をコピーしてください 4つを超えると1行に収まらなくなるので、4つまでを目安にしてください */ .hero-notes{ margin-top:clamp(22px,3vw,30px); display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:rgba(255,255,255,.20); border:1px solid rgba(255,255,255,.24);border-radius:14px;overflow:hidden; backdrop-filter:blur(12px);box-shadow:0 18px 44px rgba(0,0,0,.28); } .hnote{ background:rgba(10,34,48,.46);padding:17px 18px; display:flex;gap:12px;align-items:flex-start;transition:background .22s ease; } .hnote svg{width:19px;height:19px;flex:none;color:#8FD8CF;margin-top:3px;stroke-width:1.7} .hnote b{display:block;font-size:.9rem;font-weight:700;letter-spacing:.02em;line-height:1.45} .hnote i{display:block;font-style:normal;font-size:.74rem;color:#BFE6E1;margin-top:4px;line-height:1.6} a.hnote:hover{background:rgba(10,34,48,.66)} .hnote.hot{background:rgba(196,84,58,.52)} .hnote.hot svg{color:#FFD9CE} .hnote.hot i{color:#FFE4DB} a.hnote.hot:hover{background:rgba(196,84,58,.68)} @media(max-width:900px){.hero-notes{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.hero-notes{grid-template-columns:1fr}} .horizon{position:absolute;left:0;right:0;bottom:0;z-index:6;line-height:0;pointer-events:none} .horizon svg{width:100%;height:80px;display:block} @media (prefers-reduced-motion:reduce){ .hslide{transition:none} .hslide .bg{transform:none;transition:none} .hslide .txt > *{opacity:1;transform:none;transition:none} } /* ============================================================ トップページの背景（うっすら敷く写真） ------------------------------------------------------------ ページ全体の背景に、写真を薄く固定で敷いています。・写真を変える … 下の url() を差し替えてください・濃さを変える … opacity の数字（大きいほど濃く／0.06〜0.14 が目安）・やめる … body.p-top::before ごと削除してください本文の可読性を守るため、白いベールを重ねて薄くしています。 ============================================================ */ body.p-top::before{ content:"";position:fixed;inset:0;z-index:-2;pointer-events:none; background-image:url('images/corridor.jpg'); background-size:cover;background-position:center;background-attachment:fixed; opacity:.16;filter:grayscale(.25); } body.p-top::after{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(circle at 12% 8%, rgba(61,158,150,.10), transparent 34%), radial-gradient(circle at 88% 82%, rgba(196,84,58,.08), transparent 32%), linear-gradient(180deg, rgba(251,250,246,.72), rgba(251,250,246,.86)); } /* 背景を透かすため、白ベタのセクションを少しだけ透明に */ body.p-top .tone{background:rgba(255,255,255,.72)} body.p-top .topics{background:rgba(243,239,228,.78)} body.p-top .facts{background:rgba(255,255,255,.80)} body.p-top .chapter{background:rgba(255,255,255,.88)} body.p-top footer.site{background:rgba(243,239,228,.72)} body.p-top .opener{background:rgba(243,239,228,.70)} @media (prefers-reduced-motion:reduce){ body.p-top::before{background-attachment:scroll} } /* スマホは背景固定が重いので、通常スクロールに */ @media(max-width:820px){ body.p-top::before{background-attachment:scroll} } /* ---------- 流れる帯 ---------- 文言は index.html のを書き換えてください。 JavaScript が同じ内容をもう1組つくって、途切れずにループさせます。速さは animation の秒数（大きいほどゆっくり）で調整できます。 */ .marquee{ background:linear-gradient(100deg,#14405270,#1E5A6E70),var(--sea); color:#F2FBFA;overflow:hidden;white-space:nowrap; border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid var(--line); padding:16px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); } .marquee-track{display:inline-flex;align-items:center;animation:slide 58s linear infinite;will-change:transform} .marquee:hover .marquee-track{animation-play-state:paused} .marquee-track span{ flex:none;display:inline-flex;align-items:center;padding:0 4px; /* やわらかい丸ゴシック系を優先。無い環境では通常のゴシックに落ちます */ font-family:'Zen Maru Gothic','Quicksand','Hiragino Maru Gothic ProN','Yu Gothic UI', 'Rounded Mplus 1c',system-ui,sans-serif; font-size:.94rem;font-weight:500;letter-spacing:.06em;text-transform:none; } /* 区切りは小さなハート型ではなく、ふっくらした丸を3つ重ねた花のような印 */ .marquee-track span::after{ content:"✿";flex:none;margin:0 20px; font-size:.72em;color:#8FD8CF;opacity:.9;transform:translateY(-1px); } @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* カウントアップする数字 */ .count{font-variant-numeric:tabular-nums} @media (prefers-reduced-motion:reduce){ .marquee-track{animation:none} } /* 数字のファクト帯 */ .facts{background:#fff;border-bottom:1px solid var(--line)} .facts .wrap{display:flex;flex-wrap:wrap;padding:0} .fact{ flex:1 1 20%;padding:26px 16px;text-align:center;border-right:1px solid var(--line); } .fact:last-child{border-right:0} .fact b{display:block;font-family:'Shippori Mincho',serif;font-size:1.6rem;color:var(--sea);line-height:1.15} .fact b em{font-style:normal;font-size:.5em;color:var(--accent);margin-left:3px} .fact span{display:block;font-size:.76rem;color:var(--muted);margin-top:4px;letter-spacing:.04em} @media(max-width:820px){.fact{flex-basis:33.333%;border-bottom:1px solid var(--line)}.fact:nth-child(3){border-right:0}} @media(max-width:520px){.fact{flex-basis:50%}.fact:nth-child(2n){border-right:0}} /* ---------- セクション間の予約バー ---------- 不要なページでは

ごと削除してください。 */ .bookbar{ background:linear-gradient(100deg,rgba(61,158,150,.12),rgba(196,84,58,.10)); border-top:1px solid var(--line);border-bottom:1px solid var(--line); } .bookbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 26px} .bookbar p{font-family:'Shippori Mincho',serif;font-size:1.22rem;font-weight:600;color:var(--sea);line-height:1.4;letter-spacing:.04em} .bookbar p small{display:block;font-family:'Karla',sans-serif;font-size:.8rem;color:var(--muted);margin-top:3px} .bookbar .btn{flex:none} @media(max-width:640px){.bookbar .wrap{flex-direction:column;align-items:stretch;text-align:center}.bookbar .btn{width:100%}} /* ---------- トピックス（お知らせ）---------- 新しいお知らせは、index.html の

を1つコピーして足してください。古いものは削除するか、3件程度で入れ替えてください。 */ .topics{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:54px 0} .topics-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:22px} .topics-head h2{font-family:'Shippori Mincho',serif;font-weight:600;font-size:1.32rem;color:var(--sea)} .topics-head .en-sub{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);font-weight:700} .topic-list{list-style:none} .topic{border-top:1px solid var(--line)} .topic:last-child{border-bottom:1px solid var(--line)} .topic a,.topic > div{ display:grid;grid-template-columns:118px 116px 1fr auto;gap:20px;align-items:center; padding:20px 4px;transition:background .2s ease; } .topic a:hover{background:rgba(61,158,150,.07)} .topic time{font-family:'Shippori Mincho',serif;font-size:.9rem;color:var(--muted);letter-spacing:.04em} .topic .tagline{ justify-self:start;font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase; color:#fff;background:var(--sea);border-radius:99px;padding:5px 12px;white-space:nowrap; } .topic .tagline.new{background:var(--roof)} .topic p{font-size:.98rem;color:var(--ink);line-height:1.65} .topic p b{font-family:'Shippori Mincho',serif;font-weight:600} .topic .arrow{color:var(--accent);font-weight:700;font-size:.86rem;white-space:nowrap} @media(max-width:820px){ .topic a,.topic > div{grid-template-columns:1fr;gap:8px;padding:18px 4px} .topic .arrow{justify-self:start} } /* 先頭の1件だけ、少し目立たせる */ .topic.lead a{background:linear-gradient(100deg,rgba(196,84,58,.08),rgba(61,158,150,.06))} .topic.lead p{font-size:1.06rem} /* トップの章立てカード（各ページへの入口） */ .chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media(max-width:900px){.chapters{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.chapters{grid-template-columns:1fr}} .chapter{ position:relative;display:flex;flex-direction:column;background:#fff; border:1px solid var(--line);border-radius:8px;overflow:hidden; transition:transform .25s ease,box-shadow .25s ease; } .chapter:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(18,58,75,.14)} .chapter .ch-photo{height:190px;overflow:hidden;background:#123A4B;position:relative} .chapter .ch-photo img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease} .chapter:hover .ch-photo img{transform:scale(1.06)} .chapter .ch-no{ position:absolute;left:14px;top:12px;z-index:2;font-family:'Shippori Mincho',serif; font-weight:700;font-size:.74rem;letter-spacing:.16em;color:#fff; background:rgba(10,34,48,.7);border-radius:99px;padding:5px 12px; } .chapter .ch-body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1} .chapter h3{font-family:'Shippori Mincho',serif;font-weight:600;font-size:1.14rem;color:var(--sea)} .chapter p{margin-top:8px;font-size:.9rem;color:var(--muted);flex:1} .chapter .go{margin-top:16px;font-size:.84rem;font-weight:700;color:var(--accent)} /* 横スクロールの写真ストリップ（トップ） */ .strip{display:flex;gap:14px;overflow-x:auto;padding:4px 26px 22px;scroll-snap-type:x mandatory} .strip::-webkit-scrollbar{height:8px} .strip::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px} .strip a{flex:0 0 clamp(210px,26vw,290px);height:clamp(250px,30vw,330px);border-radius:6px;overflow:hidden;position:relative;background:#123A4B;scroll-snap-align:start} .strip img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .strip a:hover img{transform:scale(1.06)} .strip a::after{ content:attr(data-label);position:absolute;left:0;right:0;bottom:0;padding:26px 13px 11px; color:#fff;font-size:.76rem;font-weight:700;background:linear-gradient(0deg,rgba(8,26,38,.8),transparent); } body[data-lang="ja"] .strip a::after{content:attr(data-label-ja)} /* ============================================================ 汎用ブロック ============================================================ */ .split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center} .split.narrow{grid-template-columns:1.05fr .95fr} @media(max-width:880px){.split,.split.narrow{grid-template-columns:1fr;gap:28px}} .split.flip .split-media{order:2} @media(max-width:880px){.split.flip .split-media{order:0}} .split p+p{margin-top:1em} .split .photo{min-height:360px} .duo{display:grid;grid-template-columns:1fr 1fr;gap:13px} .duo .photo{min-height:230px} .duo .photo.tall{grid-column:span 2;min-height:250px} /* 定義リスト（設備の一覧） */ .deflist{margin-top:22px;border-top:1px dashed var(--line)} .deflist div{display:flex;gap:14px;padding:12px 2px;border-bottom:1px dashed var(--line);font-size:.93rem} .deflist b{flex:none;width:136px;color:var(--sea)} .deflist span{color:var(--muted)} @media(max-width:520px){.deflist div{flex-direction:column;gap:2px}.deflist b{width:auto}} /* 数字カード */ .numgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:900px){.numgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.numgrid{grid-template-columns:1fr}} .numcard{border:1px solid var(--line);border-radius:9px;padding:24px 22px;background:var(--sand)} .tone .numcard{background:var(--sand)} .numcard .n{font-family:'Shippori Mincho',serif;font-weight:700;font-size:2.1rem;line-height:1.1;color:var(--accent)} .numcard .n small{font-size:.4em;font-weight:700;letter-spacing:.08em;color:var(--muted);margin-left:6px} .numcard h3{font-family:'Shippori Mincho',serif;font-weight:600;font-size:1.04rem;color:var(--sea);margin:10px 0 8px} .numcard p{font-size:.9rem;color:var(--muted)} /* 客室ブロック */ .room{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;padding:54px 0;border-bottom:1px solid var(--line)} .room:last-of-type{border-bottom:0} @media(max-width:880px){.room{grid-template-columns:1fr;gap:26px}} .room.flip .room-media{order:2} @media(max-width:880px){.room.flip .room-media{order:0}} .room-media .photo{min-height:330px} .thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px;margin-top:10px} .thumbs a{position:relative;display:block;height:88px;border-radius:5px;overflow:hidden;background:#123A4B} .thumbs img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease} .thumbs a:hover img{transform:scale(1.07)} .room-no{font-family:'Shippori Mincho',serif;font-size:.8rem;letter-spacing:.3em;color:var(--roof);font-weight:700;margin-bottom:8px} .room h3{font-family:'Shippori Mincho',serif;font-weight:600;font-size:1.62rem;color:var(--sea)} .room > div > p{margin-top:12px;color:#495456} .spec{margin-top:22px;border-top:1px dashed var(--line)} .spec div{display:flex;justify-content:space-between;gap:16px;padding:10px 2px;border-bottom:1px dashed var(--line);font-size:.92rem} .spec dt{color:var(--muted)} .spec dd{color:var(--sea);font-weight:700;text-align:right} .room .btn{margin-top:24px} /* 303号室・近日オープン */ .soon{ margin-top:14px;border:1.5px dashed var(--glass);border-radius:12px;padding:32px 30px; background:linear-gradient(135deg,rgba(61,158,150,.10),rgba(196,84,58,.07)); display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center; } @media(max-width:720px){.soon{grid-template-columns:1fr;gap:18px;padding:24px 20px}} .soon-badge{ font-family:'Shippori Mincho',serif;font-weight:700;color:#fff;background:var(--roof); border-radius:10px;padding:18px 22px;text-align:center;line-height:1.3; } .soon-badge b{display:block;font-size:1.9rem;letter-spacing:.02em} .soon-badge span{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase} .soon h3{font-family:'Shippori Mincho',serif;font-weight:600;font-size:1.3rem;color:var(--sea)} .soon p{margin-top:10px;color:#495456;font-size:.95rem} .soon .note{margin-top:12px;font-size:.84rem;color:var(--muted)} /* 一覧カラム（アメニティ） */ .cols{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} @media(max-width:1000px){.cols{grid-template-columns:repeat(2,1fr)}} @media(max-width:540px){.cols{grid-template-columns:1fr}} .col{border:1px solid var(--line);border-radius:9px;padding:22px 20px;background:var(--sand)} .tone .col{background:var(--sand)} .col h3{font-family:'Shippori Mincho',serif;font-size:1.04rem;color:var(--sea);margin-bottom:12px;display:flex;align-items:center;gap:9px} .col h3 svg{width:20px;height:20px;flex:none;color:var(--accent)} .col ul{list-style:none;font-size:.89rem;color:var(--muted)} .col li{padding:6px 0 6px 18px;position:relative;border-bottom:1px dashed var(--line)} .col li:last-child{border-bottom:0} .col li::before{content:"";position:absolute;left:2px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--accent)} /* 一日の流れ */ .timeline{position:relative} .tl{display:grid;grid-template-columns:104px 1fr;gap:26px;padding:20px 0;border-bottom:1px dashed var(--line)} .tl:first-child{border-top:1px dashed var(--line)} @media(max-width:600px){.tl{grid-template-columns:76px 1fr;gap:16px}} .tl-time{font-family:'Shippori Mincho',serif;font-weight:700;color:var(--accent);font-size:1.06rem} .tl h3{font-family:'Shippori Mincho',serif;font-weight:600;font-size:1.05rem;color:var(--sea)} .tl p{font-size:.9rem;color:var(--muted);margin-top:4px} /* ギャラリー */ .filter{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:24px} .filter button{ font-family:inherit;font-size:.83rem;font-weight:700;letter-spacing:.03em; border:1px solid var(--line);background:#fff;color:var(--muted); border-radius:99px;padding:8px 17px;cursor:pointer;transition:all .2s ease; } .filter button.active{background:var(--sea);color:#fff;border-color:var(--sea)} .grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:196px;gap:14px} @media(max-width:860px){.grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:152px}} .grid a{position:relative;overflow:hidden;border-radius:7px;display:block;background:#123A4B} .grid img{width:100%;height:100%;object-fit:cover;transition:transform .55s ease} .grid a:hover img{transform:scale(1.06)} .grid a::after{ content:attr(data-label);position:absolute;left:0;right:0;bottom:0;padding:26px 13px 11px; color:#fff;font-size:.76rem;font-weight:700;background:linear-gradient(0deg,rgba(8,26,38,.78),transparent); } body[data-lang="ja"] .grid a::after{content:attr(data-label-ja)} .grid .w2{grid-column:span 2} .grid .h2{grid-row:span 2} @media(max-width:860px){.grid .h2{grid-row:span 1}} .grid a[hidden]{display:none} /* ライトボックス */ .lb{position:fixed;inset:0;z-index:120;background:rgba(6,18,26,.95);display:none;align-items:center;justify-content:center;padding:24px} .lb.open{display:flex} .lb img{max-width:min(1100px,94vw);max-height:82vh;border-radius:5px;object-fit:contain} .lb-cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#DCEBEA;font-size:.88rem;padding:0 24px} .lb button{ position:absolute;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.34); color:#fff;width:46px;height:46px;border-radius:50%;cursor:pointer;font-size:1.3rem; display:flex;align-items:center;justify-content:center;transition:background .2s ease; } .lb button:hover{background:rgba(255,255,255,.26)} .lb .prev{left:18px;top:50%;transform:translateY(-50%)} .lb .next{right:18px;top:50%;transform:translateY(-50%)} .lb .close{right:18px;top:18px} /* ---------- 動画カード ---------- mp4 を site/videos/ に置けばページ内で再生され、置いていないあいだは Facebook へのリンクとして機能します。 */ .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:900px){.vgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.vgrid{grid-template-columns:1fr}} .vcard{ position:relative;display:block;aspect-ratio:9/16;border-radius:10px;overflow:hidden; background:linear-gradient(150deg,#123A4B 0%,#0A2230 55%,#1E5A6E 100%); border:1px solid var(--line);color:#fff; transition:transform .25s ease,box-shadow .25s ease; } .vcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(10,34,48,.28)} .vcard::before{ content:"";position:absolute;right:-28%;top:-14%;width:78%;aspect-ratio:1;border-radius:50%; background:rgba(61,158,150,.22); } .vcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#0A2230} .vcard .v-no{ position:absolute;left:18px;top:16px;font-family:'Shippori Mincho',serif;font-weight:700; font-size:.78rem;letter-spacing:.2em;color:rgba(255,255,255,.72); } .vcard .v-play{ position:absolute;left:50%;top:46%;transform:translate(-50%,-50%); width:62px;height:62px;border-radius:50%;border:1.5px solid rgba(255,255,255,.72); background:rgba(255,255,255,.14);backdrop-filter:blur(4px); display:grid;place-items:center;transition:background .2s ease,transform .2s ease; } .vcard:hover .v-play{background:rgba(255,255,255,.28);transform:translate(-50%,-50%) scale(1.06)} .vcard .v-play svg{width:22px;height:22px;margin-left:3px;fill:#fff} .vcard .v-body{position:absolute;left:0;right:0;bottom:0;padding:52px 18px 18px;background:linear-gradient(0deg,rgba(6,20,30,.9),transparent)} .vcard .v-body b{display:block;font-family:'Shippori Mincho',serif;font-weight:600;font-size:1.02rem;line-height:1.4} .vcard .v-body span{display:block;margin-top:5px;font-size:.76rem;color:rgba(255,255,255,.78)} .vcard.playing .v-play,.vcard.playing .v-body,.vcard.playing::before{display:none} .vnote{ margin-top:30px;border:1px dashed var(--line);background:var(--sand);border-radius:9px; padding:18px 20px;font-size:.86rem;color:var(--muted);line-height:1.85; } .vnote b{color:var(--sea)} /* ---------- Googleクチコミのお願い ---------- */ .askrev{ display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:center; border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff; box-shadow:0 14px 38px rgba(18,58,75,.10); } @media(max-width:860px){.askrev{grid-template-columns:1fr}} .askrev-body{padding:clamp(26px,4vw,40px)} .askrev h3{font-family:'Shippori Mincho',serif;font-weight:600;font-size:clamp(1.2rem,2.4vw,1.7rem);color:var(--sea);line-height:1.4} .askrev p{margin-top:14px;color:#495456;font-size:.95rem} .askrev .steps3{margin-top:22px;display:grid;gap:11px} .askrev .steps3 div{display:flex;gap:13px;align-items:flex-start;font-size:.92rem;color:#495456} .askrev .steps3 b{ flex:none;width:23px;height:23px;border-radius:50%;background:var(--accent);color:#fff; display:grid;place-items:center;font-size:.74rem;font-weight:700;margin-top:2px; } .askrev .btn{margin-top:24px;background:#1A73E8} .askrev .btn:hover{background:#1557B0} .askrev-qr{ background:linear-gradient(150deg,#F3EFE4,#FBFAF6);padding:clamp(24px,3vw,32px); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px; border-left:1px solid var(--line);height:100%; } @media(max-width:860px){.askrev-qr{border-left:0;border-top:1px solid var(--line)}} .askrev-qr img{width:min(190px,54vw);height:auto;border:8px solid #fff;border-radius:10px;box-shadow:0 8px 24px rgba(18,58,75,.14)} .askrev-qr span{font-size:.78rem;color:var(--muted);text-align:center;line-height:1.7} .askrev-note{ margin-top:22px;border-top:1px dashed var(--line);padding-top:15px; font-size:.8rem;color:var(--muted);line-height:1.8; } /* ---------- 口コミ（外部サイトへのリンク）---------- */ .revlinks{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media(max-width:900px){.revlinks{grid-template-columns:1fr}} .revcard{ display:flex;flex-direction:column;background:#fff;border:1px solid var(--line); border-radius:10px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease; } .revcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(18,58,75,.14)} .revcard .rc-top{padding:22px 22px 0;display:flex;align-items:center;gap:11px} .revcard .rc-logo{ width:38px;height:38px;border-radius:8px;display:grid;place-items:center;flex:none; font-family:'Karla',sans-serif;font-weight:700;color:#fff;font-size:1.02rem; } .revcard .rc-logo.bk{background:#003580} .revcard .rc-logo.ab{background:#FF5A5F} .revcard .rc-logo.gg{background:#1A73E8} .revcard .rc-name{font-family:'Shippori Mincho',serif;font-weight:600;font-size:1.06rem;color:var(--sea);line-height:1.3} .revcard .rc-name small{display:block;font-family:'Karla',sans-serif;font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:2px} .revcard .rc-score{padding:20px 22px 4px;display:flex;align-items:baseline;gap:10px} .revcard .rc-num{font-family:'Shippori Mincho',serif;font-size:2.5rem;line-height:1;color:var(--sea)} .revcard .rc-num small{font-size:.36em;color:#9AA3A5;margin-left:2px} .revcard .rc-cnt{font-size:.8rem;color:var(--muted)} .revcard .rc-body{padding:8px 22px 20px;font-size:.89rem;color:var(--muted);flex:1} .revcard .rc-go{ display:block;margin:0 22px 22px;text-align:center;background:var(--sea);color:#fff; border-radius:5px;padding:13px;font-weight:700;font-size:.9rem;transition:background .2s ease; } .revcard .rc-go:hover{background:var(--sea-deep)} .revcard .rc-go.todo{background:#E6E1D6;color:#8A8F8C;cursor:not-allowed} .revcard .rc-note{margin:0 22px 20px;font-size:.76rem;color:var(--roof);line-height:1.7} .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} @media(max-width:940px){.quotes{grid-template-columns:1fr}} .quote{border:1px solid var(--line);border-radius:10px;padding:24px;background:#fff;display:flex;flex-direction:column} .quote blockquote{font-size:.93rem;color:#495456;line-height:1.85;flex:1} .quote blockquote::before{content:"“";font-family:'Shippori Mincho',serif;font-size:2rem;color:var(--accent);line-height:0;vertical-align:-.35em;margin-right:4px} .quote figcaption{margin-top:16px;padding-top:13px;border-top:1px solid var(--line);font-size:.8rem;color:var(--muted)} .quote figcaption b{color:var(--sea)} /* 到着のステップ */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media(max-width:880px){.steps{grid-template-columns:1fr}} .step{background:#fff;border:1px solid var(--line);border-radius:9px;overflow:hidden;display:flex;flex-direction:column} .step .ph{height:215px;overflow:hidden;background:#123A4B} .step .ph img{width:100%;height:100%;object-fit:cover} .step .bd{padding:20px 22px 24px} .step .n{font-family:'Shippori Mincho',serif;font-size:.74rem;letter-spacing:.28em;color:var(--roof);font-weight:700} .step h3{font-family:'Shippori Mincho',serif;font-weight:600;font-size:1.1rem;color:var(--sea);margin:6px 0 8px} .step p{font-size:.9rem;color:var(--muted)} .note{margin-top:26px;font-size:.86rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:16px} /* アクセス */ .loc{display:grid;grid-template-columns:.92fr 1.08fr;gap:50px;align-items:start} @media(max-width:880px){.loc{grid-template-columns:1fr;gap:30px}} .loc-item{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)} .loc-item:first-child{border-top:1px solid var(--line)} .loc-time{flex:none;width:98px;font-family:'Shippori Mincho',serif;color:var(--accent);font-weight:700;font-size:1.02rem} .loc-item b{color:var(--sea)} .loc-item p{font-size:.89rem;color:var(--muted);margin-top:1px} .map{border:1px solid var(--line);border-radius:8px;overflow:hidden} .map iframe{width:100%;height:360px;border:0;display:block} .near{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px} @media(max-width:700px){.near{grid-template-columns:repeat(2,1fr)}} .near a{position:relative;display:block;height:165px;border-radius:7px;overflow:hidden;background:#123A4B} .near img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .near a:hover img{transform:scale(1.06)} .near b{position:absolute;left:0;right:0;bottom:0;padding:24px 12px 10px;color:#fff;font-size:.77rem;background:linear-gradient(0deg,rgba(8,26,38,.8),transparent)} /* 周辺スポット */ .spots{display:grid;grid-template-columns:repeat(3,1fr);gap:24px} @media(max-width:880px){.spots{grid-template-columns:repeat(2,1fr)}} @media(max-width:540px){.spots{grid-template-columns:1fr}} .spot{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;display:flex;flex-direction:column} .spot .ph{position:relative;height:180px;overflow:hidden;background:#123A4B} .spot .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .spot:hover .ph img{transform:scale(1.05)} .tag{position:absolute;top:12px;left:12px;font-size:.66rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:rgba(18,58,75,.86);padding:5px 10px;border-radius:99px} .tag.day{background:rgba(196,84,58,.92)} .spot .bd{padding:17px 19px 21px} .spot h3{font-family:'Shippori Mincho',serif;font-weight:600;font-size:1.06rem;color:var(--sea)} .spot p{margin-top:7px;font-size:.89rem;color:var(--muted)} /* ご利用案内 */ .rules div{display:flex;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.95rem} .rules div:first-child{border-top:1px solid var(--line)} .rules b{flex:none;width:214px;color:var(--sea);display:flex;align-items:center;gap:9px;align-self:flex-start} @media(max-width:620px){.rules div{flex-direction:column;gap:2px}.rules b{width:auto}} /* ---------- ピクトグラム（線画アイコン） ---------- 図形の定義は各HTMLの直後にあるの数字だけ直してください */ .canx{margin-top:6px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff} .canx div{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line)} .canx div:last-child{border-bottom:0} .canx .when{font-size:.95rem;color:var(--ink);line-height:1.5} .canx .when small{display:block;font-size:.76rem;color:var(--muted);margin-top:3px} .canx .fee{ font-family:'Shippori Mincho',serif;font-weight:600;font-size:1.42rem; white-space:nowrap;letter-spacing:.02em; } .canx .free .fee{color:var(--glass)} .canx .half .fee{color:#B8873B} .canx .full .fee{color:var(--roof)} .canx .free{background:rgba(61,158,150,.07)} .canx .full{background:rgba(196,84,58,.06)} /* ---------- カードブランドのアイコン ---------- Stripeで有効にしているブランドに合わせて、HTML側のを増減してください。ブランド名の文字だけで描いているので、外部の画像を読み込みません（表示が速く、リンク切れも起きません）。 */ .cards{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px} .card{ display:inline-grid;place-items:center;min-width:46px;height:30px;padding:0 8px; border:1px solid var(--line);border-radius:5px;background:#fff; font-family:'Karla',sans-serif;font-weight:700;font-size:.62rem;letter-spacing:.02em; color:#fff;line-height:1;white-space:nowrap; } .card.visa{background:#1A1F71} .card.mc{background:#EB001B} .card.amex{background:#006FCF} .card.jcb{background:#0E4C96} .card.disc{background:#F26E21} .card.diners{background:#0079BE} .card.applepay{background:#000} .card.googlepay{background:#3C4043} .cards-note{margin-top:9px;font-size:.78rem;color:var(--muted);line-height:1.7} /* 料金 */ .rates{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:820px} @media(max-width:700px){.rates{grid-template-columns:1fr}} .rate{border:1px solid rgba(255,255,255,.24);border-radius:10px;padding:24px 20px;background:rgba(255,255,255,.06);text-align:center} .rate .t{font-size:.8rem;font-weight:700;color:#BFE6E1;letter-spacing:.06em} .rate .v{font-family:'Shippori Mincho',serif;font-size:2rem;color:#fff;margin:6px 0 2px} .rate .u{font-size:.79rem;color:#CFE3E2} .rate-foot{margin-top:22px;font-size:.87rem;color:#CFE3E2;max-width:52em} .rate-foot b{color:#fff} .caution{ margin-top:22px;max-width:52em;border:1px dashed rgba(196,84,58,.8);background:rgba(196,84,58,.14); border-radius:9px;padding:15px 18px;font-size:.82rem;color:#F2DFD9;line-height:1.8; } .caution b{color:#F6B9A7} /* 予約エンジン */ .bookform{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:11px;padding:22px;max-width:820px} .bf{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end} .bf label{display:flex;flex-direction:column;gap:6px;flex:1 1 152px} .bf .lab{font-size:.79rem;font-weight:700;color:#BFE6E1;letter-spacing:.04em} .bf input,.bf select{font-family:inherit;font-size:1rem;padding:11px 12px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--ink);width:100%} .bf .go{flex:1 1 100%;margin-top:4px;background:var(--roof)} .bf .go:hover{background:#A8442E} @media(min-width:680px){.bf .go{flex:0 0 auto}} .bf-note{margin-top:14px;font-size:.81rem;color:#AFC9C7} .engine{background:#fff;border-radius:11px;overflow:hidden;border:1px solid rgba(255,255,255,.2);margin-top:26px} .engine-head{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line);background:var(--sand)} .engine-head h3{font-family:'Shippori Mincho',serif;font-weight:600;font-size:1.02rem;color:var(--sea)} .engine iframe{display:block;width:100%;height:790px;border:0;background:#fff} .engine-fb{padding:13px 20px;font-size:.8rem;color:var(--muted);text-align:center;border-top:1px dashed var(--line);background:var(--sand)} .engine-fb a{color:var(--sea);font-weight:700;text-decoration:underline} @media(max-width:760px){.engine iframe{height:700px}} .benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:36px} @media(max-width:780px){.benefits{grid-template-columns:1fr}} .benefit{border:1px solid rgba(255,255,255,.22);border-radius:8px;padding:22px;background:rgba(255,255,255,.05)} .benefit h3{font-family:'Shippori Mincho',serif;font-weight:600;font-size:1.06rem;margin-bottom:8px;color:#BFE6E1} .benefit p{font-size:.9rem;color:#DCEBEA} /* FAQ */ .qa{border-bottom:1px solid var(--line)} .qa:first-of-type{border-top:1px solid var(--line)} .qa summary{ list-style:none;cursor:pointer;padding:20px 36px 20px 0;position:relative; font-family:'Shippori Mincho',serif;font-size:1.04rem;color:var(--sea);font-weight:600; } .qa summary::-webkit-details-marker{display:none} .qa summary::after{content:"+";position:absolute;right:6px;top:18px;font-size:1.4rem;color:var(--accent);font-family:'Karla',sans-serif;line-height:1} .qa[open] summary::after{content:"−"} .qa p{padding:0 0 20px;font-size:.94rem;color:#495456;max-width:56em} /* 最後のひと押し */ .cta{background:var(--sea);color:#fff;text-align:center;padding:78px 26px} .cta img{width:min(400px,78vw);margin:0 auto 26px;border-radius:7px;box-shadow:0 14px 40px rgba(0,0,0,.35)} .cta h2{font-family:'Shippori Mincho',serif;font-weight:600;font-size:clamp(1.5rem,3.2vw,2.1rem);margin-bottom:12px} .cta p{color:#CFE3E2;max-width:34em;margin:0 auto 28px} .cta .btn{background:var(--roof);padding:17px 42px;font-size:1.05rem;border-radius:7px} .cta .btn:hover{background:#A8442E} /* フッター */ footer.site{padding:52px 0 92px;border-top:1px solid var(--line);background:var(--paper)} @media(min-width:770px){footer.site{padding-bottom:44px}} .foot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;align-items:flex-start} .foot-brand{display:flex;align-items:center;gap:12px;font-family:'Shippori Mincho',serif;font-weight:700;font-size:1.04rem;color:var(--sea)} .foot-brand img{height:52px;width:auto} .foot p{font-size:.87rem;color:var(--muted);margin-top:10px;max-width:30em} .foot-social{display:flex;gap:13px;margin-top:16px} .foot-social a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--sea);background:#fff;transition:all .2s ease} .foot-social a:hover{background:var(--sea);color:#fff} .foot-social svg{width:18px;height:18px} .foot-nav{font-size:.87rem;display:flex;flex-direction:column;gap:9px} .foot-nav a{color:var(--muted)} .foot-nav a:hover{color:var(--sea)} .legal{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);font-size:.77rem;color:var(--muted);line-height:1.9} .legal b{color:var(--roof)} .copy{margin-top:18px;font-size:.76rem;color:#9AA3A5;text-align:center;letter-spacing:.04em} /* スマホ下部の固定バー */ .sticky{ position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.97); border-top:1px solid var(--line);box-shadow:0 -6px 22px rgba(0,0,0,.09); display:none;align-items:center;justify-content:space-between;gap:14px;padding:11px 16px; } .sticky .p{font-size:.76rem;color:var(--muted);line-height:1.35} .sticky .p b{display:block;font-family:'Shippori Mincho',serif;font-size:1.05rem;color:var(--sea)} .sticky .btn{background:var(--roof);padding:12px 22px;flex:none} .sticky .btn:hover{background:#A8442E} @media(max-width:770px){.sticky{display:flex}}