@charset "UTF-8";
/* ==========================================================================
料理民宿 松林 — 共通スタイル
このファイル1本で全ページの見た目を管理しています。
色・フォントを変えたいときは :root の変数だけ触れば全ページに反映されます。
========================================================================== */
/* --------------------------------------------------------------------------
1. フォント
--------------------------------------------------------------------------
本文は「筑紫Aオールド明朝」を第一候補にしています。
筑紫書体は有料フォントのため、Webフォントの契約が必要です。
契約後、下記のいずれか1つを各HTMLの に追加すれば自動で切り替わります。
● FONTPLUS を使う場合（筑紫Aオールド明朝の取り扱いあり）
● Adobe Fonts を使う場合
● フォントファイルを自社サーバーに置く場合
下の @font-face のコメントを外し、パスを合わせてください。
契約前でも「Shippori Mincho → ヒラギノ明朝 → 游明朝」に自動で落ちるので
レイアウトは崩れません。
-------------------------------------------------------------------------- */
/* --- パソコンに筑紫Aオールド明朝が入っている場合に、太さも正しく使うための対応 ---
インストールされていない環境では何も起きません（下の Shippori Mincho に落ちます）。
Webフォント契約をすると、契約側のフォントが優先されます。 */
@font-face{font-family:"TsukuAOldMinLocal";font-weight:300;font-display:swap;
src:local("TsukuAOldMinPr6N-L"),local("筑紫Aオールド明朝 Pr6N L"),local("A-OTF Tsuku A Old Min Pr6N L")}
@font-face{font-family:"TsukuAOldMinLocal";font-weight:400;font-display:swap;
src:local("TsukuAOldMinPr6N-R"),local("筑紫Aオールド明朝 Pr6N R"),local("筑紫Aオールド明朝 Pr6N"),local("A-OTF Tsuku A Old Min Pr6N R")}
@font-face{font-family:"TsukuAOldMinLocal";font-weight:500;font-display:swap;
src:local("TsukuAOldMinPr6N-M"),local("筑紫Aオールド明朝 Pr6N M"),local("A-OTF Tsuku A Old Min Pr6N M")}
@font-face{font-family:"TsukuAOldMinLocal";font-weight:600;font-display:swap;
src:local("TsukuAOldMinPr6N-D"),local("筑紫Aオールド明朝 Pr6N D"),local("TsukuAOldMinPr6N-B"),local("筑紫Aオールド明朝 Pr6N B")}
@font-face{font-family:"TsukuAOldMinLocal";font-weight:700;font-display:swap;
src:local("TsukuAOldMinPr6N-B"),local("筑紫Aオールド明朝 Pr6N B"),local("A-OTF Tsuku A Old Min Pr6N B"),local("TsukuAOldMinPr6N-E"),local("筑紫Aオールド明朝 Pr6N E")}
/* 自社サーバーにフォントファイルを置く場合は、下のコメントを外してパスを合わせてください
@font-face{font-family:"TsukuAOldMin";src:url("assets/fonts/TsukuAOldMinPr6N-R.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"TsukuAOldMin";src:url("assets/fonts/TsukuAOldMinPr6N-M.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"TsukuAOldMin";src:url("assets/fonts/TsukuAOldMinPr6N-D.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"TsukuAOldMin";src:url("assets/fonts/TsukuAOldMinPr6N-B.woff2") format("woff2");font-weight:700;font-display:swap}
*/
:root{
/* ---- 色 ---- */
--navy:#0c1f31;
--navy-2:#173a5c;
--gold:#b3924f;
--gold-l:#dcc48f;
--gold-hi:#f7c750; /* 写真の上で使う、目立たせる金 */
--ink:#22303c;
--sub:#5c6b76;
--mute:#8a97a0;
--paper:#ffffff;
--paper-2:#f6f3ed;
--sky:#edf4f8; /* 周辺観光の背景（薄い水色） */
--line:rgba(12,31,49,.14);
/* ---- フォント ---- */
--serif:"筑紫Aオールド明朝 Pr6N R","TsukuAOldMinLocal","Shippori Mincho","Hiragino Mincho ProN","ヒラギノ明朝 ProN","Yu Mincho","游明朝",serif;
--serif-m:"筑紫Aオールド明朝 Pr6N M","筑紫Aオールド明朝 Pr6N R","TsukuAOldMinLocal","Shippori Mincho","Hiragino Mincho ProN","ヒラギノ明朝 ProN","Yu Mincho","游明朝",serif;
--serif-b:"筑紫Aオールド明朝 Pr6N B","筑紫Aオールド明朝 Pr6N R","TsukuAOldMinLocal","Shippori Mincho","Hiragino Mincho ProN","ヒラギノ明朝 ProN","Yu Mincho","游明朝",serif;
--en:"Cormorant Garamond",serif;
--hd:84px;
--maxw:1160px;
--ez:cubic-bezier(.22,1,.36,1); /* 表示アニメーションの動き方 */
/* 飾り文字（筆記体）の色。水色にしたいときは rgba(150,196,214,.42) */
--wm:rgba(179,146,79,.20);
}
*{box-sizing:border-box;margin:0;padding:0}
/* ページ遷移＝クロスフェード ------------------------------------------------
前のページと次のページが重なったまま、片方が消えながらもう片方が現れます。
（1）対応ブラウザ … ブラウザ標準の View Transitions で本物のクロスフェード
（2）非対応ブラウザ … 下のフォールバック（白をはさむフェード）
速さを変えるなら .55s / .5s / .3s の数字を変えてください。 */
@view-transition{navigation:auto}
::view-transition-old(root),
::view-transition-new(root){
animation-duration:.34s;animation-timing-function:ease-out; /* 控えめに */
mix-blend-mode:normal; /* 2枚をそのまま重ねる＝クロスフェード */
}
::view-transition-old(root){animation-name:xfade-out}
::view-transition-new(root){animation-name:xfade-in}
@keyframes xfade-out{from{opacity:1}to{opacity:0}}
@keyframes xfade-in{from{opacity:0}to{opacity:1}}
/* --- フォールバック（transform は使いません。固定ヘッダーがずれるため） --- */
@keyframes pagein{from{opacity:0}to{opacity:1}}
body{animation:pagein .35s ease-out backwards}
body.page-out{opacity:0;transition:opacity .22s ease-out}
@supports (view-transition-name:none){
body{animation:none} /* クロスフェードと二重にならないように */
}
@media(prefers-reduced-motion:reduce){
body{animation:none}
body.page-out{transition:none}
::view-transition-old(root),::view-transition-new(root){animation:none}
}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{
font-family:var(--serif);color:var(--ink);background:var(--paper);
line-height:1.95;letter-spacing:.055em;
-webkit-font-smoothing:antialiased;overflow-x:hidden;
font-feature-settings:"palt";
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.en{font-family:var(--en);letter-spacing:.22em;text-transform:uppercase}
.inner{max-width:var(--maxw);margin:0 auto}
section{padding:clamp(62px,7.5vw,106px) clamp(20px,5vw,60px)}
.bg-paper{background:var(--paper-2)}
.bg-navy{background:var(--navy);color:#fff}
/* ==========================================================================
ヘッダー
========================================================================== */
header{
position:fixed;inset:0 0 auto 0;height:var(--hd);z-index:100;
display:flex;align-items:center;justify-content:space-between;
padding:0 clamp(14px,2.4vw,34px);
transition:background .5s,box-shadow .5s,height .4s;
}
header.solid,body.sub-page header{background:rgba(255,255,255,.97);box-shadow:0 1px 0 var(--line);height:70px}
/* ヘッダーのロゴ
ロゴは常に青（元データの色）です。写真の上に乗るあいだだけ、
白いにじみ（drop-shadow）を足して読めるようにしています。
大きさは .logo img の height、にじみ具合は filter の数値で調整できます。 */
.logo{position:relative;display:block;line-height:0;flex:none}
.logo{padding:9px 15px;background:rgba(255,255,255,.93);
box-shadow:0 4px 18px rgba(6,18,30,.16);transition:background .45s,box-shadow .45s,padding .4s}
.logo img{display:block;height:clamp(38px,4vw,54px);width:auto;transition:height .4s}
header.solid .logo,body.sub-page .logo{background:transparent;box-shadow:none;padding:0}
header.solid .logo img,body.sub-page .logo img{height:clamp(36px,3.6vw,48px)}
/* 右上にまとめたグループ：ナビ／言語／電話／予約ボタン */
.hd-right{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px);margin-left:auto}
nav.gnav{display:flex;align-items:center;gap:clamp(18px,2.3vw,38px)}
nav.gnav a{color:#fff;font-size:18px;letter-spacing:.1em;position:relative;padding:8px 0;transition:color .5s;white-space:nowrap;
text-shadow:0 1px 12px rgba(0,0,0,.45)}
header.solid nav.gnav a,body.sub-page nav.gnav a{text-shadow:none}
header.solid nav.gnav a,body.sub-page nav.gnav a{color:var(--navy)}
nav.gnav a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);transition:width .35s}
nav.gnav a:hover::after,nav.gnav a[aria-current]::after{width:100%}
nav.gnav a[aria-current]{color:var(--gold)}
.hd-tel{color:#fff;font-family:var(--en);font-size:20px;letter-spacing:.05em;transition:color .5s;white-space:nowrap;line-height:1.2}
.hd-tel small{display:block;font-family:var(--serif);font-size:10.5px;letter-spacing:.06em;opacity:.78}
header.solid .hd-tel,body.sub-page .hd-tel{color:var(--navy)}
.btn-resv{background:var(--gold);color:#fff;font-size:14.5px;letter-spacing:.12em;padding:14px 27px;border:1px solid var(--gold);transition:.35s;white-space:nowrap}
.btn-resv:hover{background:transparent;color:var(--gold)}
/* 言語切り替え --------------------------------------------------------- */
.hd-lang{position:relative}
.lang-btn{
background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff;
font-family:var(--serif);font-size:15px;letter-spacing:.08em;padding:9px 30px 9px 16px;
cursor:pointer;transition:.3s;white-space:nowrap;position:relative;
}
.lang-btn::after{content:"";position:absolute;right:13px;top:calc(50% - 3px);
width:6px;height:6px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;
transform:rotate(45deg);transition:transform .3s}
.lang-btn[aria-expanded="true"]::after{transform:rotate(-135deg);top:calc(50% - 1px)}
.lang-btn:hover{border-color:var(--gold);color:var(--gold-l)}
header.solid .lang-btn,body.sub-page .lang-btn{color:var(--navy);border-color:var(--line)}
header.solid .lang-btn:hover,body.sub-page .lang-btn:hover{color:var(--gold);border-color:var(--gold)}
.lang-menu{
position:absolute;right:0;top:calc(100% + 8px);min-width:170px;list-style:none;margin:0;padding:6px 0;
background:#fff;box-shadow:0 12px 34px rgba(12,31,49,.18);border:1px solid var(--line);
opacity:0;visibility:hidden;transform:translateY(-6px);transition:.25s;z-index:120;
}
.hd-lang.open .lang-menu{opacity:1;visibility:visible;transform:none}
.lang-menu button{
display:block;width:100%;text-align:left;background:transparent;border:0;cursor:pointer;
font-family:var(--serif);font-size:14.5px;color:var(--ink);padding:11px 20px;letter-spacing:.06em;transition:.2s;
}
.lang-menu button:hover{background:var(--paper-2);color:var(--gold)}
.lang-menu button[aria-current="true"]{color:var(--gold)}
.lang-menu button[aria-current="true"]::before{content:"— ";}
.burger{display:none;width:28px;height:19px;position:relative;cursor:pointer;background:none;border:0}
.burger i{position:absolute;left:0;width:100%;height:1.5px;background:#fff;transition:.35s}
header.solid .burger i,body.sub-page .burger i{background:var(--navy)}
.burger i:nth-child(1){top:0}.burger i:nth-child(2){top:8.5px}.burger i:nth-child(3){top:17px}
body.menu-open .burger i,body.sub-page.menu-open .burger i{background:#fff}
body.menu-open .burger i:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
body.menu-open .burger i:nth-child(2){opacity:0}
body.menu-open .burger i:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}
.drawer{
position:fixed;inset:0;background:var(--navy);z-index:90;
display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;
opacity:0;visibility:hidden;transition:.45s;overflow-y:auto;padding:88px 20px 40px;
}
body.menu-open .drawer{opacity:1;visibility:visible}
.drawer a{color:#fff;font-size:16px;letter-spacing:.16em;text-align:center}
.drawer .en{color:var(--gold-l);font-size:10px;display:block;margin-top:1px}
/* ==========================================================================
ヒーロー（トップページ）
========================================================================== */
/* ファーストビューの高さ。100svh にすると画面いっぱいになります */
.hero{position:relative;height:84svh;min-height:540px;overflow:hidden;background:var(--navy);
touch-action:pan-y;user-select:none}
.hero-track{position:absolute;inset:0}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1.3s ease}
.slide.on{opacity:1}
/* 写真の調光。最後の数字（不透明度）を小さくするほど写真が明るくなります。 */
.slide::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
background:
linear-gradient(180deg,rgba(4,13,22,.52),rgba(4,13,22,.06) 32%,rgba(4,13,22,.62) 78%,rgba(4,13,22,.78)),
linear-gradient(100deg,rgba(4,13,22,.55) 0%,rgba(4,13,22,.22) 38%,rgba(4,13,22,0) 62%)}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transform:scale(1);transition:transform 0s}
.slide.on img{transform:scale(1.07);transition:transform 7.5s linear}
/* 写真ごとのキャッチコピー（各 .slide の中に入っています） */
.s-copy{position:absolute;z-index:3;left:clamp(20px,6vw,86px);right:clamp(20px,6vw,86px);
bottom:clamp(158px,21vh,214px);color:#fff}
.s-copy .lead{display:block;font-family:var(--en);font-size:11.5px;letter-spacing:.34em;
text-transform:uppercase;opacity:.9;margin-bottom:14px;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.s-copy h1{font-size:clamp(26px,4.4vw,52px);font-family:var(--serif-b);/*fw*/font-weight:600;line-height:1.52;letter-spacing:.07em;margin:0;
text-shadow:0 2px 22px rgba(0,0,0,.6),0 0 70px rgba(0,0,0,.4)}
.s-copy h1 em{font-style:normal;color:var(--gold-hi);
text-shadow:0 2px 16px rgba(0,0,0,.72),0 0 34px rgba(0,0,0,.5),0 0 2px rgba(120,80,10,.55)}
.s-copy .under{margin-top:20px;font-size:clamp(14px,1.55vw,19px);line-height:1.95;letter-spacing:.06em;
opacity:.96;max-width:46em;text-shadow:0 1px 16px rgba(0,0,0,.65)}
/* 写真が変わるたび、コピーがすっと持ち上がる */
/* キャッチコピーも、下の本文と同じ動き方（--ez）で揃えています */
.slide.on .s-copy .lead,.slide.on .s-copy h1,.slide.on .s-copy .under{animation:copyup 1s var(--ez) both}
.slide.on .s-copy h1{animation-delay:.14s}
.slide.on .s-copy .under{animation-delay:.28s}
@keyframes copyup{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* 下端の波 ------------------------------------------------------------- */
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;z-index:4;height:clamp(84px,9vw,116px);
pointer-events:none;overflow:hidden}
.hero-wave svg{position:absolute;left:0;bottom:0;width:200%;height:100%;display:block}
.hero-wave .w-back{fill:rgba(178,206,222,.42);animation:wavemove 21s linear infinite}
.hero-wave .w-mid{fill:rgba(255,255,255,.9);animation:wavemove 15s linear infinite reverse}
.hero-wave .w-front{fill:#fff;animation:wavemove 11s linear infinite}
@keyframes wavemove{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.hero-ctl{
position:absolute;z-index:6;left:0;right:0;bottom:clamp(96px,13vh,132px);
display:flex;align-items:center;justify-content:center;color:#fff;
}
.hero-dots{display:flex;align-items:center;gap:22px}
.hero-dot{
width:10px;height:10px;border-radius:50%;border:0;padding:0;cursor:pointer;
background:rgba(255,255,255,.45);transition:background .35s,transform .35s;
-webkit-appearance:none;appearance:none;box-shadow:0 1px 6px rgba(0,0,0,.35);
}
.hero-dot:hover{background:rgba(255,255,255,.78);transform:scale(1.15)}
.hero-dot.on{background:#fff;transform:scale(1.25)}
.hero-dot:focus-visible{outline:1px solid var(--gold-l);outline-offset:5px}
/* スクロール誘導：波と重ならないよう右端に縦組みで置いています */
.scrollcue{position:absolute;z-index:6;right:clamp(62px,6.5vw,92px);
bottom:clamp(100px,13.5vh,138px);color:#fff;text-align:center}
.scrollcue .en{font-size:9.5px;opacity:.85;writing-mode:vertical-rl;letter-spacing:.3em;display:inline-block;
text-shadow:0 1px 8px rgba(0,0,0,.5)}
.scrollcue i{display:block;width:1px;height:44px;background:rgba(255,255,255,.55);margin:8px auto 0;position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;top:-44px;left:0;width:1px;height:44px;background:var(--gold-l);animation:cue 2.4s infinite}
@keyframes cue{0%{top:-44px}60%,100%{top:44px}}
/* ==========================================================================
下層ページ見出し
========================================================================== */
/* 下層ページ上部の写真。高さは下の clamp の数字で調整できます */
.page-hero{position:relative;height:clamp(430px,68vh,720px);overflow:hidden;background:var(--navy);margin-top:70px}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,15,25,.45),rgba(5,15,25,.6))}
.page-hero .t{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff;text-align:center;padding:0 20px}
.page-hero .t .en{font-size:11px;color:var(--gold-l);margin-bottom:12px}
.page-hero .t h1{font-size:clamp(23px,3.4vw,36px);font-weight:400;letter-spacing:.18em}
.crumb{max-width:var(--maxw);margin:0 auto;padding:16px clamp(20px,5vw,60px);font-size:11.5px;color:var(--mute);letter-spacing:.08em}
.crumb a:hover{color:var(--gold)}
/* ==========================================================================
見出し・共通パーツ
========================================================================== */
/* ==========================================================================
飾り文字（筆記体のウォーターマーク）
--------------------------------------------------------------------------
使い方：見出しブロックや写真ブロックの中に、いちばん最後に1行入れるだけ。
Cuisine
文字はそのまま書き換えられます。色は :root の --wm、
大きさは下の font-size の数字で調整できます。
========================================================================== */
/* 飾り文字に使う筆記体（Great Vibes／SIL Open Font License）。
サーバーに置いたファイルを読むので、ネットの状態に左右されません。
別の書体に変えたいときは、woff2 を assets/fonts に置いて下の1行を差し替えます。 */
@font-face{
font-family:"WmScript";
src:url("assets/fonts/great-vibes-400.woff2") format("woff2");
font-weight:400;font-style:normal;font-display:swap;
}
.wm{
position:absolute;z-index:0;pointer-events:none;user-select:none;white-space:nowrap;
font-family:"WmScript","Great Vibes",cursive;font-weight:400;line-height:1;letter-spacing:.01em;
color:var(--wm);
}
/* 見出しの後ろに、うっすら大きく */
.shead{position:relative}
.shead>*:not(.wm){position:relative;z-index:1}
.shead>.wm{left:50%;top:48%;transform:translate(-50%,-50%);
font-size:clamp(76px,12.5vw,188px)}
/* 写真ブロックでは、写真の上に重ねて流す */
.feature>.wm{z-index:2;top:-.20em;left:-.03em;font-size:clamp(58px,10vw,158px)}
.feature.rev>.wm{left:auto;right:-.03em}
@media(max-width:820px){
.feature>.wm{top:-.16em;font-size:clamp(52px,12vw,86px)}
}
.shead{text-align:center;margin-bottom:clamp(34px,4.4vw,56px)}
.shead .en{display:block;font-size:11px;color:var(--gold);margin-bottom:11px}
.shead h2{font-size:clamp(21px,2.8vw,31px);font-weight:400;letter-spacing:.12em;color:var(--navy);line-height:1.7}
.bg-navy .shead h2{color:#fff}
.shead p{margin-top:15px;font-family:var(--serif-b);font-weight:600;
font-size:clamp(13.5px,1.15vw,15.5px);color:var(--ink);line-height:2.05;letter-spacing:.03em}
.bg-navy .shead p{color:rgba(255,255,255,.62)}
/* ==========================================================================
スクロールで現れるアニメーション（サイト全体の共通ルール）
--------------------------------------------------------------------------
・写真 → 見出し → 本文・ボタン の順に、少しずつ遅れてふわっと現れます
・下から 28px、0.9秒、余韻のあるイージング（:root の --ez）
・class="reveal" を付けた入れもの（見出しブロック・カードの並び・
写真＋文章のブロックなど）の「中身」が順番に現れます
・調整するところ
動く距離 … @keyframes riseIn の translateY(28px)
速さ … .9s と書いてある数字
遅れ方 … animation-delay の秒数
========================================================================== */
@keyframes riseIn{
from{opacity:0;transform:translateY(28px)}
to {opacity:1;transform:none}
}
.reveal:not(.on)>*{opacity:0}
.reveal.on>*{animation:riseIn .9s var(--ez) backwards}
.reveal.on>*:nth-child(2){animation-delay:.12s}
.reveal.on>*:nth-child(3){animation-delay:.22s}
.reveal.on>*:nth-child(4){animation-delay:.32s}
.reveal.on>*:nth-child(5){animation-delay:.40s}
.reveal.on>*:nth-child(6){animation-delay:.48s}
.reveal.on>*:nth-child(7){animation-delay:.56s}
.reveal.on>*:nth-child(n+8){animation-delay:.64s}
/* 写真＋文章のブロックは、文章の中身をさらに一行ずつずらします
（写真 → ラベル → 見出し → 本文 → ボタン） */
.feature.reveal:not(.on) .ftxt>*{opacity:0}
.feature.reveal.on>.ftxt{animation:none;opacity:1}
.feature.reveal.on .ftxt>*{animation:riseIn .9s var(--ez) backwards}
.feature.reveal.on .ftxt>*:nth-child(1){animation-delay:.14s}
.feature.reveal.on .ftxt>*:nth-child(2){animation-delay:.24s}
.feature.reveal.on .ftxt>*:nth-child(3){animation-delay:.34s}
.feature.reveal.on .ftxt>*:nth-child(4){animation-delay:.42s}
.feature.reveal.on .ftxt>*:nth-child(5){animation-delay:.50s}
.feature.reveal.on .ftxt>*:nth-child(n+6){animation-delay:.58s}
/* 中身を分けずに、ひとかたまりで現れさせたいときは class="reveal solo" */
.reveal.solo:not(.on){opacity:0}
.reveal.solo:not(.on)>*{opacity:1}
.reveal.solo.on{animation:riseIn .9s var(--ez) backwards}
.reveal.solo.on>*{animation:none}
/* 大きな写真だけ、ごくゆるやかなズームを添える */
@keyframes slowZoom{from{transform:scale(1.05)}to{transform:none}}
.feature.reveal.on .ph img{animation:slowZoom 2.4s var(--ez) backwards}
.page-hero img{animation:slowZoom 5s var(--ez) backwards}
@media(prefers-reduced-motion:reduce){
.reveal:not(.on)>*,.feature.reveal:not(.on) .ftxt>*{opacity:1}
.reveal.on>*,.feature.reveal.on .ftxt>*,
.feature.reveal.on .ph img,.page-hero img{animation:none}
}
/* 横長のCTAボタン（金の枠＋右に矢印） */
.btn-wide{
position:relative;display:flex;align-items:center;justify-content:center;
margin-top:30px;width:100%;padding:clamp(20px,2.2vw,28px) clamp(56px,6vw,80px);
border:1px solid var(--gold);background:transparent;color:var(--navy);
font-size:clamp(15px,1.65vw,20px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.2em;line-height:1.5;
text-align:center;transition:background .35s,color .35s,border-color .35s;
}
/* 右の矢印（大きさを変えるなら width の数字を） */
.btn-wide .ar{position:absolute;right:clamp(18px,2.2vw,30px);width:clamp(20px,1.9vw,26px);height:auto;
fill:none;stroke:var(--gold);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;
transition:stroke .35s,transform .35s}
.btn-wide .ar path{vector-effect:non-scaling-stroke} /* 縮めても線の太さは一定 */
/* 矢印を左向きにしたいときは class="btn-wide rev" */
.btn-wide.rev{white-space:nowrap;
padding:clamp(20px,2.2vw,28px) clamp(22px,2.4vw,32px) clamp(20px,2.2vw,28px) clamp(50px,5vw,68px)}
.btn-wide.rev .ar{left:clamp(16px,1.9vw,26px);right:auto}
.btn-wide.rev:hover .ar{transform:translateX(-5px)}
/* ボタンの中の電話番号を大きく */
.btn-wide .tel{font-family:var(--en);font-size:1.5em;font-weight:500;
letter-spacing:.02em;margin-left:.5em;white-space:nowrap}
@media(max-width:640px){
.btn-wide.rev{padding:18px 20px 18px 46px}
.btn-wide.rev .ar{left:15px}
.btn-wide .tel{font-size:1.35em;margin-left:.35em}
}
.btn-wide:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.btn-wide:hover .ar{stroke:var(--gold-l);transform:translateX(5px)}
@media(max-width:640px){
.btn-wide{font-size:14.5px;letter-spacing:.12em;padding:18px 46px 18px 20px}
.btn-wide .ar{right:15px;width:19px}
}
.more{display:inline-block;margin-top:24px;font-size:12.5px;letter-spacing:.16em;color:var(--navy);border-bottom:1px solid var(--gold);padding-bottom:6px;transition:.35s}
.more:hover{color:var(--gold);letter-spacing:.22em}
.bg-navy .more{color:#fff}
.note{font-size:11.5px;color:var(--mute);line-height:2}
/* 写真枠 --------------------------------------------------------------- */
.ph{position:relative;overflow:hidden;background:var(--navy)}
.ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s}
.ph:hover img{transform:scale(1.05)}
.ph.r43{aspect-ratio:4/3}
.ph.r32{aspect-ratio:3/2}
.ph.r11{aspect-ratio:1/1}
.ph.r169{aspect-ratio:16/9}
.ph .cap{position:absolute;left:0;bottom:0;background:rgba(12,31,49,.72);color:#fff;font-size:10.5px;letter-spacing:.12em;padding:6px 13px}
/* 左右分割 ------------------------------------------------------------- */
.feature{position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(26px,4.4vw,64px)}
.feature.rev{direction:rtl}.feature.rev>*{direction:ltr}
.ftxt .en{display:block;font-size:clamp(12px,1.25vw,14px);font-weight:600;letter-spacing:.24em;color:var(--gold);margin-bottom:13px}
.ftxt h2,.ftxt h3{font-size:clamp(22px,2.8vw,33px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.08em;color:var(--navy);line-height:1.7}
.ftxt p{margin-top:20px;font-size:clamp(14.5px,1.4vw,17px);font-family:var(--serif-m);/*fw*/font-weight:500;color:#4d5c68;line-height:2.1}
.ftxt p.small{font-size:clamp(13.5px,1.25vw,15px);color:#6b7883}
/* ボタン --------------------------------------------------------------- */
.btn-l{display:inline-block;padding:17px 44px;font-size:13.5px;letter-spacing:.16em;border:1px solid var(--gold);background:var(--gold);color:#fff;transition:.35s}
.btn-l:hover{background:transparent;color:var(--gold)}
.bg-navy .btn-l:hover,.cta .btn-l:hover{color:var(--gold-l)}
.btn-o{display:inline-block;padding:17px 44px;font-size:13.5px;letter-spacing:.16em;border:1px solid rgba(255,255,255,.45);color:#fff;transition:.35s}
.btn-o:hover{background:#fff;color:var(--navy)}
.btn-oc{display:inline-block;padding:17px 44px;font-size:13.5px;letter-spacing:.16em;border:1px solid var(--line);color:var(--navy);transition:.35s}
.btn-oc:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
/* ==========================================================================
動画（波のすぐ下・白背景）
========================================================================== */
.video-sec{background:#fff;padding:clamp(26px,3.4vw,48px) clamp(20px,5vw,60px) clamp(62px,7.5vw,104px)}
.video-wrap{position:relative;max-width:1080px;margin:0 auto;aspect-ratio:16/9;
background:var(--navy);overflow:hidden;box-shadow:0 18px 46px rgba(12,31,49,.13)}
.video-wrap video{width:100%;height:100%;object-fit:cover;display:block;background:var(--navy)}
.video-wrap::after{content:"";position:absolute;inset:0;pointer-events:none;
background:rgba(6,18,30,.22);transition:opacity .5s}
.video-wrap.playing::after{opacity:0}
/* 再生ボタン */
.video-play{
position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;
width:clamp(62px,6.4vw,86px);aspect-ratio:1;border-radius:50%;
border:1px solid rgba(255,255,255,.85);background:rgba(12,31,49,.3);
-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
cursor:pointer;transition:.35s;
}
.video-play::before{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
border-left:clamp(17px,1.8vw,23px) solid #fff;
border-top:clamp(11px,1.15vw,15px) solid transparent;
border-bottom:clamp(11px,1.15vw,15px) solid transparent}
.video-play:hover{background:var(--gold);border-color:var(--gold);transform:translate(-50%,-50%) scale(1.06)}
.video-play:focus-visible{outline:2px solid var(--gold-l);outline-offset:6px}
.video-wrap.playing .video-play{opacity:0;visibility:hidden}
.video-cap{max-width:1080px;margin:16px auto 0;text-align:center;font-size:13px;color:var(--mute);letter-spacing:.06em}
/* ==========================================================================
情報バー（紺の「Pick up 01/02/03」の帯）
いまはトップページから外してあります。戻したい場合は README の
「2-4. 情報バーを戻したいとき」をご覧ください。CSSはそのまま残しています。
========================================================================== */
.benefit{background:var(--navy);color:#fff;padding:34px clamp(16px,4vw,60px)}
.benefit .wrap{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.18)}
.benefit .cell{background:var(--navy);padding:20px 16px;text-align:center}
.benefit .n{font-family:var(--en);font-size:10.5px;letter-spacing:.24em;color:var(--gold-l)}
.benefit .t{font-size:clamp(14px,1.6vw,17px);margin-top:7px;letter-spacing:.06em}
.benefit .d{font-size:12px;opacity:.7;margin-top:4px;line-height:1.75}
/* ==========================================================================
カード類
========================================================================== */
/* ==========================================================================
選ばれる理由（和紙風の背景・金の枠・写真つきカード）
========================================================================== */
.reason-sec{position:relative;overflow:hidden;
background:#f7f4ed url("assets/images/paper-bg.jpg") repeat;
background-size:420px auto;
padding:clamp(64px,7.5vw,110px) clamp(20px,5vw,60px) clamp(34px,3.6vw,52px)}
/* 「選ばれる理由」の締めの一行と、次のお料理ブロックの間隔 */
.reason-sec+section{padding-top:clamp(30px,3.4vw,50px)}
/* 写真＋文章のブロックが続くところは、あいだを少し詰める（数字を変えれば調整できます） */
section:has(>.inner.feature):has(+section>.inner.feature){padding-bottom:clamp(34px,3.9vw,58px)}
/* 上下の端をふわっと白へ返して、前後のセクションとつなげる */
.reason-sec::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;
background:linear-gradient(180deg,#fff,rgba(255,255,255,0));pointer-events:none}
.reason-sec::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;
background:linear-gradient(0deg,#fff,rgba(255,255,255,0));pointer-events:none}
/* 背景の飾り（海の絵・氷の上の鮮魚） */
.r-bg{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.r-bg img{position:absolute;display:block}
.r-bg-sea{left:-3%;top:2%;width:clamp(320px,46%,760px);opacity:.9}
.r-bg-fish{right:-2%;top:-4%;width:clamp(260px,36%,600px);opacity:.85}
.reason-sec .inner{position:relative;z-index:2}
.reason-sec .shead h2{font-size:clamp(27px,3.9vw,48px);font-family:var(--serif-b);/*fw*/font-weight:700;letter-spacing:.09em;line-height:1.55}
.reason-sec .shead .en{margin-bottom:11px;font-size:clamp(13px,1.35vw,16px);font-weight:600;letter-spacing:.28em;color:var(--gold)}
.reason-sec .shead p{font-size:clamp(14.5px,1.45vw,17.5px);font-family:var(--serif-m);/*fw*/font-weight:500;color:#4d5c68;line-height:2.05;margin-top:18px}
/* リード文の数字を目立たせる */
.reason-sec .shead p b{font-family:var(--serif-b);/*fw*/font-weight:700;color:var(--gold);font-size:1.22em;letter-spacing:.02em}
.r-rule{display:block;width:clamp(64px,7vw,88px);height:1.5px;background:var(--gold);margin:0 auto 20px;opacity:.85}
.r-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:clamp(18px,2.2vw,32px)}
.r-card{
position:relative;border-radius:14px;overflow:hidden;
background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.86));
border:1px solid rgba(179,146,79,.45);
box-shadow:0 10px 30px rgba(12,31,49,.09);
display:flex;flex-direction:column;transition:transform .4s,box-shadow .4s;
}
.r-card:hover{transform:translateY(-4px);box-shadow:0 18px 42px rgba(12,31,49,.14)}
.r-top{display:flex;align-items:center;gap:16px;padding:30px 30px 0}
.r-num{width:clamp(52px,5vw,64px);flex:none;display:block;line-height:0}
.r-num img{width:100%;height:auto;display:block}
.r-ico{display:block;width:52px;color:var(--gold)}
.r-ico svg{width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round}
.r-card h3{font-size:clamp(19px,1.95vw,24px);font-family:var(--serif-b);/*fw*/font-weight:700;letter-spacing:.05em;color:var(--navy);
line-height:1.65;margin:20px 30px 0}
.r-card p{font-size:clamp(14px,1.35vw,15.5px);font-family:var(--serif-m);/*fw*/font-weight:500;color:#4d5c68;line-height:1.95;margin:15px 30px 26px}
.r-photo{margin-top:auto;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.r-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.r-card:hover .r-photo img{transform:scale(1.05)}
/* 締めの一行（両端に波の飾り） */
.r-close{
margin:clamp(34px,4vw,52px) auto 0;text-align:center;
font-size:clamp(16px,2vw,25px);font-family:var(--serif-b);/*fw*/font-weight:700;color:var(--navy);letter-spacing:.07em;line-height:1.85;
display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.8vw,26px);flex-wrap:wrap;
}
.r-close .orn{display:block;width:clamp(40px,4.6vw,64px);color:var(--gold);flex:none}
.r-close .orn.flip{transform:scaleX(-1)}
.r-close .orn svg{width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
@media(max-width:900px){
.r-bg-sea{width:62%;opacity:.55}
.r-bg-fish{width:52%;opacity:.5}
}
@media(max-width:640px){
.r-bg-sea{width:88%;left:-24%;top:3%;opacity:.32}
.r-bg-fish{width:64%;right:-18%;top:-1%;opacity:.26}
.r-close{font-size:16px;gap:10px}
.r-top{padding:24px 22px 0}
.r-num{width:52px}
.r-ico{width:46px}
.r-card h3{margin:18px 22px 0}
.r-card p{margin:13px 22px 22px}
}
/* === RDETAIL START === */
/* --------------------------------------------------------------------------
「選ばれる理由」の、番号ごとの詳しい解説の帯（.rd）
・パソコン … 左に文章、右に写真。写真の左はしは、ふわっと和紙へ溶けます
・スマホ … 上に写真、下に文章
いじるところの目安
写真の見える幅 … .rd-ph の left:34%（数字を小さくすると写真が広がります）
溶けぐあい … mask-image の 14% / 36% / 52%
帯の高さ … .rd の min-height
-------------------------------------------------------------------------- */
.rd{position:relative;display:flex;align-items:center;
min-height:clamp(300px,30vw,430px);
margin-top:clamp(36px,4vw,58px)}
/* 帯どうしの間は、少しだけ詰めます */
.rd + .rd{margin-top:clamp(22px,2.6vw,38px)}
/* 右の写真。左はしを、和紙の地へ溶かします */
.rd-ph{position:absolute;z-index:0;top:0;right:0;bottom:0;left:34%;
overflow:hidden;border-radius:14px}
.rd-ph img{width:100%;height:100%;object-fit:cover;display:block;
-webkit-mask-image:linear-gradient(90deg,
rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 14%,rgba(0,0,0,.85) 36%,#000 52%);
mask-image:linear-gradient(90deg,
rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 14%,rgba(0,0,0,.85) 36%,#000 52%)}
/* 左の文章 */
.rd-in{position:relative;z-index:1;width:min(53%,545px);
padding:clamp(20px,2.3vw,32px) 0}
.rd-top{display:flex;align-items:center;gap:clamp(12px,1.4vw,18px)}
.rd-num{width:clamp(54px,5.2vw,68px);flex:none;display:block;line-height:0}
.rd-num img{width:100%;height:auto;display:block}
.rd-ico{display:block;width:clamp(44px,4.6vw,58px);color:var(--gold);flex:none}
.rd-ico svg{width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round}
.rd h3{margin:clamp(12px,1.5vw,20px) 0 0;
font-family:var(--serif-b);/*fw*/font-weight:700;color:var(--navy);
font-size:clamp(24px,3.2vw,40px);letter-spacing:.06em;line-height:1.5}
.rd-lead{margin:clamp(9px,1.1vw,14px) 0 0;
font-family:var(--serif-b);/*fw*/font-weight:700;color:var(--gold);
font-size:clamp(14.5px,1.6vw,20px);letter-spacing:.08em;line-height:1.7}
.rd-t{margin-top:clamp(12px,1.5vw,20px)}
.rd-t p{margin:0;font-family:var(--serif-m);/*fw*/font-weight:500;color:#3f4e5a;
font-size:clamp(13px,1.18vw,15px);line-height:1.9}
.rd-t p + p{margin-top:.85em}
/* 文章のとちゅうに入れる、少し大きな一文（03で使っています） */
.rd-t p.rd-sub{font-family:var(--serif-b);/*fw*/font-weight:700;color:var(--navy);
font-size:clamp(16px,1.9vw,23px);letter-spacing:.05em;line-height:1.6;
margin-top:1.15em}
.rd-t p.rd-sub + p{margin-top:.6em}
/* 金色のマーカー（04で使っています）。濃さは .62、太さは 58% の数字 */
.rd-t p.rd-mk .mk{background:linear-gradient(transparent 56%,
rgba(220,196,143,.62) 56%,rgba(220,196,143,.62) 95%,transparent 95%);
padding:0 .12em}
.rd-orn{display:block;width:clamp(100px,11vw,160px);color:var(--gold);opacity:.8;
margin-top:clamp(12px,1.5vw,22px)}
.rd-orn svg{width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.1;
stroke-linecap:round}
/* パソコンでは、帯を画面の左右いっぱいに広げます
・左右のマイナスの余白で、帯そのものを画面のふちまで出しています
・文章の左の余白は、下の padding-left の数字で決まります（小さくすると左へ寄ります）
・角の丸みは、画面のふちでは不自然なので消します
・光の溶けぐあいは、写真が広がっても同じ幅で溶けるよう px で指定します */
@media(min-width:901px){
.rd{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.rd-in{padding-left:clamp(24px,4vw,56px)}
.rd-ph{border-radius:0}
.rd-ph img{
-webkit-mask-image:linear-gradient(90deg,
rgba(0,0,0,0) 0,rgba(0,0,0,.22) 105px,rgba(0,0,0,.85) 275px,#000 400px);
mask-image:linear-gradient(90deg,
rgba(0,0,0,0) 0,rgba(0,0,0,.22) 105px,rgba(0,0,0,.85) 275px,#000 400px)}
}
/* スマホ・タブレット … 上に写真、下に文章 */
@media(max-width:900px){
.rd{display:block;min-height:0}
.rd-ph{position:relative;inset:auto;aspect-ratio:16/11;border-radius:12px}
.rd-ph img{
-webkit-mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.3) 90%,rgba(0,0,0,0) 100%);
mask-image:linear-gradient(180deg,#000 58%,rgba(0,0,0,.3) 90%,rgba(0,0,0,0) 100%)}
.rd-in{width:auto;padding:clamp(12px,2.6vw,18px) 0 clamp(6px,1.6vw,12px);
/* 右はしの縦タブに、文字がかからないようにします */
padding-right:clamp(30px,9vw,48px)}
.rd h3{font-size:clamp(23px,5.6vw,32px)}
.rd-lead{font-size:clamp(14.5px,3.9vw,18px)}
.rd-t p{font-size:clamp(13.5px,3.6vw,15.5px);line-height:2}
.rd-t p.rd-sub{font-size:clamp(16px,4.4vw,20px)}
/* 人物が上のほうに写っている写真は、上寄りで切り取ります */
.rd-ph.is-top img{object-position:center 14%}
/* パソコン用の改行は、スマホでは無視します */
.rd .pc-br{display:none}
}
/* === RDETAIL END === */
/* === PHONEONLY START === */
/* --------------------------------------------------------------------------
素泊まり・朝食付きのご案内（お電話のみ受付）
1泊2食付きプランのボタンより目立たないよう、
紺の塗りつぶしではなく、淡い地色＋金の細い枠にしています。
いじるところの目安
地色 … background の #fbf9f5
枠の色 … border の rgba(179,146,79,.42)
電話番号 … .po-tel-n .cp-num（大きさは共通指定を使っています）
-------------------------------------------------------------------------- */
.po{max-width:780px;margin:clamp(30px,3.6vw,52px) auto clamp(6px,1vw,12px);
background:#fbf9f5;border:1px solid rgba(179,146,79,.42);border-radius:14px;
padding:clamp(22px,3vw,38px) clamp(18px,3vw,40px);text-align:center}
.po-en{display:block;font-family:var(--en),serif;font-size:11.5px;letter-spacing:.24em;
color:var(--gold);margin-bottom:9px}
.po h2{margin:0;font-family:var(--serif-b);/*fw*/font-weight:700;color:var(--navy);
font-size:clamp(17px,2.1vw,25px);letter-spacing:.07em;line-height:1.65}
.po-rule{display:block;width:46px;height:1.5px;background:var(--gold);opacity:.8;
margin:clamp(12px,1.5vw,18px) auto clamp(14px,1.8vw,22px)}
.po p{margin:0 0 .95em;font-family:var(--serif-m);/*fw*/font-weight:500;color:#4d5c68;
font-size:clamp(13px,1.25vw,15px);line-height:2}
.po p:last-of-type{margin-bottom:0}
.po p b{font-family:var(--serif-b);/*fw*/font-weight:700;color:var(--navy)}
.po-tel{margin-top:clamp(18px,2.3vw,30px);padding-top:clamp(16px,2vw,24px);
border-top:1px solid rgba(179,146,79,.3);
display:flex;flex-direction:column;align-items:center;gap:4px}
.po-tel-l{font-size:12.5px;color:var(--mute);letter-spacing:.05em}
.po-tel-n{text-decoration:none}
.po-tel-h{font-size:12.5px;color:var(--mute);letter-spacing:.06em}
/* 取り扱いを終えたプランのURLで来られたときの、ひとこと */
.bk-gone{max-width:720px;margin:clamp(14px,2vw,24px) auto 0;
background:#fbf9f5;border:1px solid rgba(179,146,79,.42);border-radius:12px;
padding:clamp(13px,1.6vw,18px) clamp(14px,2vw,22px);
font-family:var(--serif-m);/*fw*/font-weight:500;color:#4d5c68;
font-size:clamp(12.5px,1.15vw,14px);line-height:1.95;text-align:center}
.bk-gone a{color:var(--navy);font-family:var(--serif-b);/*fw*/font-weight:700}
@media(max-width:600px){
.po{margin-left:0;margin-right:0;padding:22px 16px}
.po .pc-br{display:none}
}
@media(min-width:601px){
.po .sp-br{display:none}
}
/* === PHONEONLY END === */
/* ==========================================================================
客室・館内案内（和紙の背景・写真つきカード3枚）
--------------------------------------------------------------------------
背景 … assets/images/rooms-bg.jpg を差し替えるだけで変わります
カードの色 … 各カードの --ac（3枚目のペット同伴だけ緑）
========================================================================== */
.room-sec{
position:relative;overflow:hidden;
background:#f6f1e6 url("assets/images/rooms-bg.jpg") center/cover no-repeat;
padding:clamp(46px,5.2vw,76px) clamp(20px,5vw,60px) clamp(48px,5.6vw,78px);
}
/* --- 見出し --- */
.rm-head{position:relative;text-align:center;margin-bottom:clamp(22px,2.7vw,36px)}
.rm-head>*:not(.wm){position:relative;z-index:1}
.rm-head>.wm{left:50%;top:53%;transform:translate(-50%,-50%);
font-size:clamp(74px,11.8vw,178px)}
.rm-head .rm-mark{width:clamp(27px,2.6vw,36px);height:auto;margin:0 auto 7px;opacity:.9}
.rm-head .en{display:block;font-size:clamp(10.5px,1.02vw,12.5px);color:var(--gold);letter-spacing:.26em}
.rm-head h2{margin-top:8px;font-size:clamp(23px,3.05vw,37px);font-family:var(--serif-m);/*fw*/font-weight:500;
letter-spacing:.16em;color:var(--navy);line-height:1.4}
.rm-rule{display:block;position:relative;width:clamp(126px,15vw,192px);height:1px;
background:var(--gold);opacity:.7;margin:clamp(11px,1.3vw,16px) auto}
.rm-rule::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;
transform:translate(-50%,-50%) rotate(45deg);background:var(--gold)}
.rm-head p{font-size:clamp(13px,1.3vw,16px);font-family:var(--serif-m);/*fw*/font-weight:500;color:var(--ink);letter-spacing:.08em}
.rm-head p b{font-family:var(--serif-b);font-size:1.24em;font-weight:700;color:var(--gold);
letter-spacing:.02em;margin:0 .05em}
/* --- カード --- */
.rm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(13px,1.6vw,23px);
max-width:1110px;margin:0 auto}
.rm-card{
--ac:var(--navy);
display:flex;flex-direction:column;overflow:hidden;
background:rgba(255,255,255,.97);border-radius:12px;
box-shadow:0 10px 30px rgba(20,32,48,.10);
transition:transform .45s var(--ez),box-shadow .45s var(--ez);
}
.rm-card.pet{--ac:#6a7a43}
.rm-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px rgba(20,32,48,.15)}
.rm-ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--navy)}
.rm-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s}
.rm-card:hover .rm-ph img{transform:scale(1.05)}
/* 写真の上の丸いバッジ */
.rm-flag{
position:absolute;right:12px;top:12px;width:clamp(62px,5.8vw,84px);aspect-ratio:1;border-radius:50%;
background:rgba(106,122,67,.93);color:#fff;box-shadow:0 4px 14px rgba(20,32,48,.2);
display:flex;flex-direction:column;align-items:center;justify-content:center;
font-size:clamp(10px,.95vw,12px);line-height:1.4;letter-spacing:.02em;text-align:center;
}
.rm-flag svg{width:clamp(16px,1.5vw,20px);height:auto;margin-bottom:2px}
.rm-body{display:flex;flex-direction:column;flex:1;
padding:clamp(14px,1.5vw,20px) clamp(14px,1.5vw,20px) clamp(14px,1.6vw,21px)}
.rm-title{display:flex;align-items:center;gap:clamp(9px,1vw,13px)}
/* 筆で描いた丸のアイコン画像（assets/images/ico-*.png） */
.rm-ico{flex:none;width:clamp(32px,3.1vw,42px);height:auto}
.rm-title h3{font-size:clamp(15px,1.6vw,19.5px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.08em;color:var(--navy);line-height:1.45}
/* 小さなラベル（全20室・6〜12畳 など） */
.rm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:clamp(12px,1.3vw,17px)}
.rm-chips span{display:inline-flex;align-items:center;gap:6px;background:#fff;
border:1px solid rgba(179,146,79,.42);border-radius:9px;padding:6px 8.5px;
font-size:clamp(10.5px,.9vw,11.8px);letter-spacing:.03em;color:var(--ink);white-space:nowrap}
.rm-chips svg{width:14px;height:14px;flex:none}
.rm-note{margin-top:clamp(19px,2.2vw,28px);text-align:center}
.rm-note p{font-size:clamp(12.5px,1.18vw,15px);line-height:2.05;color:var(--navy);letter-spacing:.06em}
.rm-note p.sub{margin-top:clamp(9px,1vw,12px);font-size:clamp(10.8px,.95vw,12px);color:var(--sub)}
.rm-card p{margin-top:clamp(10px,1.1vw,14px);flex:1;
font-size:clamp(11.8px,.96vw,12.8px);font-family:var(--serif-m);/*fw*/font-weight:500;line-height:1.92;color:#55636e}
.rm-more{margin-top:clamp(13px,1.4vw,18px);padding-top:clamp(12px,1.3vw,16px);
border-top:1px dashed rgba(12,31,49,.2);
display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.4vw,20px);
color:var(--navy);font-size:clamp(12px,1.02vw,13.6px);letter-spacing:.08em}
.rm-more::after{content:"";position:absolute;left:clamp(15px,1.7vw,23px);right:clamp(15px,1.7vw,23px);
bottom:clamp(12px,1.5vw,20px);height:1.5px;background:var(--ac)}
.rm-more{position:relative;padding-bottom:clamp(20px,2.2vw,30px)}
.rm-more svg{width:21px;height:auto;fill:none;stroke:var(--ac);stroke-width:1.4;
stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ez)}
.rm-card:hover .rm-more svg{transform:translateX(5px)}
/* アイコンの描き方（線／塗り） */
.rm-flag .ic-l{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rm-flag .ic-f{fill:#fff;stroke:none}
.rm-chips .ic-l{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rm-chips .ic-f{fill:var(--gold);stroke:none}
/* --- 下の誘導 --- */
.rm-cta{display:flex;align-items:center;justify-content:space-between;gap:clamp(16px,2.2vw,32px);
max-width:680px;margin:clamp(21px,2.5vw,32px) auto 0;
background:rgba(250,246,238,.92);border-radius:16px;box-shadow:0 8px 26px rgba(20,32,48,.07);
padding:clamp(16px,1.9vw,25px) clamp(18px,2.2vw,32px);
color:var(--navy);text-align:left;transition:box-shadow .4s var(--ez),transform .4s var(--ez)}
.rm-cta:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(20,32,48,.12)}
.rm-cta small{display:block;font-size:clamp(11px,.95vw,12.5px);color:var(--sub);letter-spacing:.08em}
.rm-cta strong{display:block;margin-top:3px;font-size:clamp(15px,1.7vw,21px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.1em}
.rm-round{flex:none;width:clamp(42px,4.2vw,55px);aspect-ratio:1;border-radius:50%;background:var(--navy);
display:flex;align-items:center;justify-content:center;transition:background .35s,transform .35s var(--ez)}
.rm-round svg{width:34%;height:auto;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.rm-cta:hover .rm-round{background:var(--gold)}
.rm-round svg{stroke-width:1.8}
@media(max-width:900px){
.rm-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
.rm-grid{grid-template-columns:1fr}
.rm-cta{flex-direction:column;text-align:center;gap:14px}
.room-sec{background-size:cover}
}
/* --- スポーツ合宿（客室と同じカード／背景は白） --- */
.camp-sec{position:relative;padding:clamp(46px,5.2vw,76px) clamp(20px,5vw,60px) clamp(48px,5.6vw,78px)}
.camp-sec .rm-card{border:1px solid rgba(12,31,49,.07);box-shadow:0 8px 24px rgba(20,32,48,.07)}
.camp-sec .rm-card:hover{box-shadow:0 16px 36px rgba(20,32,48,.12)}
.camp-sec .rm-head h2 b{font-family:var(--serif-b);/*fw*/font-weight:700;color:var(--gold);font-size:1.06em;letter-spacing:.02em}
.camp-sec .rm-cta{background:var(--paper-2)}
/* ==========================================================================
お料理ページの3ブロック：海を思わせる背景
--------------------------------------------------------------------------
薄い水色のグラデーション＋うっすらとした波。
色を変える … 下の #f2f9fc / #e7f1f7、波の色 … 波の画像の stroke
========================================================================== */
.sea-sec{position:relative;background:linear-gradient(180deg,#f2f9fc,#e7f1f7)}
.sea-sec::before{content:"";position:absolute;inset:0;pointer-events:none;
background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221200%22%20height%3D%22220%22%20viewBox%3D%220%200%201200%20220%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23a6c7db%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%220.55%22%3E%3Cpath%20d%3D%22M0%2060%20C100%2020%20200%2020%20300%2060%20C400%20100%20500%20100%20600%2060%20C700%2020%20800%2020%20900%2060%20C1000%20100%201100%20100%201200%2060%22%2F%3E%3Cpath%20d%3D%22M0%20130%20C100%2090%20200%2090%20300%20130%20C400%20170%20500%20170%20600%20130%20C700%2090%20800%2090%20900%20130%20C1000%20170%201100%20170%201200%20130%22%2F%3E%3Cpath%20d%3D%22M0%20196%20C100%20156%20200%20156%20300%20196%20C400%20236%20500%20236%20600%20196%20C700%20156%20800%20156%20900%20196%20C1000%20236%201100%20236%201200%20196%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-repeat:repeat;background-position:center;background-size:1200px auto;opacity:.5}
.sea-sec>.inner{position:relative;z-index:1}
/* 前後の白いセクションへふわっとつなぐ */
.sea-sec.sea-top::after,.sea-sec.sea-bottom::after{content:"";position:absolute;left:0;right:0;height:90px;
pointer-events:none}
.sea-sec.sea-top::after{top:0;background:linear-gradient(180deg,#fff,rgba(255,255,255,0))}
.sea-sec.sea-bottom::after{bottom:0;background:linear-gradient(0deg,#fff,rgba(255,255,255,0))}
/* お料理3ブロックの英字ラベル（Kue / Hamo / Funamori & Kaiseki）は筆記体で */
.sea-sec .ftxt .en{font-family:"WmScript","Great Vibes",cursive;
text-transform:none;font-weight:400;letter-spacing:.02em;
font-size:clamp(24px,2.6vw,34px);line-height:1.1;margin-bottom:clamp(8px,1vw,13px)}
/* --- ギャラリーも横に流す（周辺観光と同じ仕組み） --- */
.gal-slider{position:relative;margin-top:clamp(18px,2.2vw,30px)}
.gal-track{display:flex;width:max-content;gap:clamp(8px,1vw,14px);
animation:gflow 64s linear infinite}
@keyframes gflow{from{transform:translate3d(0,0,0)}
to{transform:translate3d(calc(-50% - clamp(4px,.5vw,7px)),0,0)}}
.gal-slider:hover .gal-track,
.gal-slider:focus-within .gal-track{animation-play-state:paused}
.gal-slider.reveal.solo.on>*{animation:none}
.gal-track .ph{flex:0 0 clamp(200px,21vw,290px);aspect-ratio:4/3}
@media(prefers-reduced-motion:reduce){
.gal-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
.gal-track .ph[aria-hidden="true"]{display:none}
}
@media(max-width:640px){.gal-track{animation-duration:52s}.gal-track .ph{flex-basis:190px}}
/* ==========================================================================
3つの入口タイル（写真の上に日本語＋筆記体）
--------------------------------------------------------------------------
写真の暗さ … .tile::after のグラデーションの数字
========================================================================== */
.tile-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(6px,.8vw,12px);
margin-top:clamp(24px,2.8vw,40px)}
.tile{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;
aspect-ratio:6/5;background:var(--navy)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ez)}
.tile::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(8,20,32,.44),rgba(8,20,32,.58));transition:background .45s}
/* 明るい写真のタイルは少し濃いめに（客室ページ用） */
.tile-row.bright .tile::after{background:linear-gradient(180deg,rgba(8,20,32,.5),rgba(8,20,32,.66))}
.tile-row.bright .tile:hover::after{background:linear-gradient(180deg,rgba(8,20,32,.36),rgba(8,20,32,.56))}
.tile:hover img{transform:scale(1.06)}
.tile:hover::after{background:linear-gradient(180deg,rgba(8,20,32,.3),rgba(8,20,32,.48))}
.t-in{position:relative;z-index:2;text-align:center;color:#fff;padding:0 10px}
.t-in .ja{display:block;font-size:clamp(16px,2.1vw,29px);font-family:var(--serif-m);/*fw*/font-weight:500;letter-spacing:.14em;
line-height:1.5;text-shadow:0 2px 16px rgba(0,0,0,.45)}
.t-in .en-s{display:block;margin-top:clamp(7px,1vw,14px);
font-family:"WmScript","Great Vibes",cursive;font-size:clamp(15px,1.9vw,26px);
letter-spacing:.04em;color:rgba(255,255,255,.92);text-shadow:0 2px 14px rgba(0,0,0,.4)}
@media(max-width:640px){
.tile{aspect-ratio:3/4}
.t-in .ja{font-size:14.5px;letter-spacing:.08em}
.t-in .en-s{font-size:14px}
}
/* ==========================================================================
おすすめのコース（写真が半分・番号つき）
--------------------------------------------------------------------------
・写真と文章が左右に半分ずつ。2つめだけ class="crs rev" で左右が入れ替わります
・番号の丸 … .crs-no ／ 料金ボタン … .crs-btn
・文章の内容は build_pages.py（repl_course.py）で作っています
========================================================================== */
.course-sec{padding:clamp(46px,5.2vw,76px) 0 clamp(30px,3.4vw,48px)}
.course-sec>.inner{padding:0 clamp(20px,5vw,60px)}
.crs{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.crs+.crs{margin-top:clamp(42px,5.6vw,92px)} /* ブロックどうしの間隔（この数字を変えると広さが変わります） */
.crs.rev .crs-ph{order:2} /* 写真を右にしたいときに使います */
.crs-ph{position:relative;overflow:hidden;background:var(--navy);min-height:clamp(250px,29vw,430px)}
.crs-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s}
.crs:hover .crs-ph img{transform:scale(1.04)}
.crs-txt{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
padding:clamp(22px,2.2vw,32px) clamp(20px,3.6vw,52px)}
/* 番号（弧＋両脇の線＋下の飾り） */
.crs-badge{position:relative;display:flex;align-items:center;justify-content:center;
width:clamp(46px,4.2vw,58px);aspect-ratio:1}
.crs-badge .arc{position:absolute;left:50%;top:-14%;transform:translateX(-50%);
width:132%;height:auto;fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round}
.crs-badge::before,.crs-badge::after{content:"";position:absolute;top:50%;width:clamp(26px,3vw,44px);
height:1px;background:var(--gold);opacity:.85}
.crs-badge::before{right:calc(100% + 10px)}
.crs-badge::after{left:calc(100% + 10px)}
.crs-no{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;
background:var(--gold);color:#fff;font-family:var(--en);font-size:clamp(18px,1.8vw,25px);
letter-spacing:.02em;line-height:1;padding-bottom:2px}
.crs-orn{width:clamp(40px,3.6vw,50px);height:auto;margin-top:clamp(5px,.7vw,8px);fill:var(--gold);opacity:.9}
.crs-txt h3{margin-top:clamp(9px,1vw,13px);
font-size:clamp(20px,2.2vw,30px);font-family:var(--serif-b);/*fw*/font-weight:700;letter-spacing:.1em;color:var(--navy);line-height:1.45}
.crs-sub{margin-top:clamp(5px,.6vw,8px);font-size:clamp(13.5px,1.28vw,17px);font-family:var(--serif-m);/*fw*/font-weight:500;
color:var(--gold);letter-spacing:.06em}
/* まん中に飾りの入った区切り線 */
.crs-rule{display:flex;align-items:center;justify-content:center;gap:11px;
width:min(100%,400px);margin:clamp(9px,1vw,13px) 0}
.crs-rule::before,.crs-rule::after{content:"";flex:1;height:1px;background:rgba(179,146,79,.8)}
.crs-rule .mk{width:clamp(30px,2.9vw,40px);height:auto;flex:none;fill:var(--gold)}
.crs-d{font-size:clamp(13px,1.18vw,15.5px);line-height:1.75;color:var(--navy);letter-spacing:.05em;
max-width:32em}
.crs-n{margin-top:clamp(8px,.85vw,11px);font-size:clamp(11px,.96vw,12.4px);line-height:1.85;
color:var(--sub);letter-spacing:.03em;max-width:34em}
.crs-n.band{background:var(--paper-2);padding:clamp(7px,.8vw,10px) clamp(12px,1.4vw,18px)}
.crs-n .hl{color:var(--gold);font-family:var(--serif-b);/*fw*/font-weight:600;font-size:1.12em}
/* 料金ボタン */
.crs-btn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
width:min(100%,430px);margin-top:clamp(10px,1.1vw,15px);
padding:clamp(11px,1.15vw,15px) clamp(30px,3vw,40px);
border:1px solid var(--gold);color:var(--navy);transition:background .35s,color .35s,border-color .35s}
.crs-btn .pr{font-size:clamp(13px,1.26vw,16px);letter-spacing:.06em;line-height:1.3}
.crs-btn .pr b{font-family:var(--serif-b);font-size:1.45em;font-weight:700;color:var(--gold);
margin:0 .12em;letter-spacing:.02em}
.crs-btn .pr small{font-size:.72em;margin-left:.3em;letter-spacing:.02em}
.crs-btn .dv{display:block;width:100%;height:1px;margin:clamp(6px,.7vw,9px) 0;
background:repeating-linear-gradient(90deg,rgba(179,146,79,.85) 0 2px,transparent 2px 6px)}
.crs-btn .go{font-size:clamp(11.5px,1.02vw,13.5px);color:var(--navy);letter-spacing:.08em;transition:color .35s}
.crs-btn .cv{position:absolute;right:clamp(14px,1.5vw,20px);top:50%;transform:translateY(-50%);
width:clamp(12px,1.15vw,15px);height:auto;
fill:none;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
transition:stroke .35s,transform .35s var(--ez)}
.crs-btn:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.crs-btn:hover .go{color:rgba(255,255,255,.78)}
.crs-btn:hover .pr b{color:var(--gold-l)}
.crs-btn:hover .dv{background:repeating-linear-gradient(90deg,rgba(220,196,143,.7) 0 2px,transparent 2px 6px)}
.crs-btn:hover .cv{stroke:var(--gold-l);transform:translateY(-50%) translateX(4px)}
@media(max-width:860px){
.crs{grid-template-columns:1fr}
.crs.rev .crs-ph{order:0}
.crs-ph{min-height:clamp(220px,52vw,340px)}
.crs-txt{padding:clamp(24px,5vw,34px) clamp(20px,5vw,32px) clamp(30px,6vw,40px)}
.crs-badge::before,.crs-badge::after{width:26px}
}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(18px,2.2vw,28px)}
.card{border:1px solid var(--line);background:#fff}
.card .body{padding:22px 22px 26px}
.card h3{font-size:17.5px;font-family:var(--serif-b);/*fw*/font-weight:700;letter-spacing:.06em;color:var(--navy)}
.card .meta{font-family:var(--serif-b);font-size:13px;font-weight:700;color:var(--gold);
margin-top:7px;letter-spacing:.08em;font-variant-numeric:lining-nums;
font-feature-settings:"lnum" 1}
.card p{font-size:13.5px;font-family:var(--serif-b);/*fw*/font-weight:600;color:var(--ink);margin-top:11px;line-height:2}
.card ul{margin-top:12px;padding-left:0;list-style:none}
.card ul li{font-size:13px;font-family:var(--serif-b);/*fw*/font-weight:600;color:var(--sub);padding-left:14px;
position:relative;line-height:1.95}
.card ul li::before{content:"";position:absolute;left:0;top:.9em;width:6px;height:1px;background:var(--gold)}
/* ==========================================================================
料金リスト
========================================================================== */
.p-tabs{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.p-tabs button{background:transparent;border:1px solid rgba(179,146,79,.75);color:#fff;
font-family:var(--serif-m);font-size:clamp(13px,1.2vw,15.5px);font-weight:500;letter-spacing:.12em;
padding:clamp(11px,1.2vw,15px) clamp(24px,2.8vw,38px);cursor:pointer;
transition:background .3s,color .3s,border-color .3s}
.p-tabs button:hover{border-color:var(--gold-l)}
.p-tabs button.on{background:linear-gradient(180deg,#cfae66,#b3924f);border-color:var(--gold);
color:var(--navy);font-family:var(--serif-b);/*fw*/font-weight:600}
.p-panel{display:none}.p-panel.on{display:block;animation:pf .5s}
@keyframes pf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.p-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 clamp(24px,4vw,56px);max-width:900px;margin:0 auto}
.p-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:15px 2px;border-bottom:1px solid rgba(255,255,255,.14)}
.p-row .nm{font-size:clamp(15px,1.42vw,18px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.05em;line-height:1.6}
.p-row .nm small{display:block;font-size:11px;color:var(--gold-l);letter-spacing:.06em;margin-top:2px}
.p-row .pr{font-family:var(--serif);font-size:15px;color:var(--gold-l);letter-spacing:.04em;white-space:nowrap}
.p-row .pr b{font-family:var(--serif-b);font-size:1.5em;font-weight:700;letter-spacing:.02em}
.bg-navy .rm-head h2{color:#fff}
.bg-navy .rm-head p{color:rgba(255,255,255,.8)}
.bg-navy .rm-head>.wm{color:rgba(220,196,143,.13)}
.p-tax{margin-top:clamp(5px,.6vw,8px);color:var(--gold-l)}
.bg-navy .rm-head p.p-tax{color:var(--gold-l)}
.p-note{max-width:900px;margin:24px auto 0;font-size:11.5px;color:rgba(255,255,255,.5);line-height:2}
/* 明るい背景の料金表 */
.p-light .p-row{border-bottom-color:var(--line)}
.p-light .p-row .pr{color:var(--gold)}
.p-light .p-row .nm small{color:var(--mute)}
.p-light .p-note{color:var(--mute)}
/* ==========================================================================
館内設備リスト
========================================================================== */
.fac{background:var(--paper-2);padding:clamp(26px,3.4vw,40px)}
.fac h3{font-size:15px;letter-spacing:.12em;color:var(--navy);margin-bottom:18px;font-family:var(--serif-b);/*fw*/font-weight:600}
.fac-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px 26px}
.fac-item{font-size:13px;color:var(--sub);padding-left:16px;position:relative;line-height:1.95}
.fac-item::before{content:"";position:absolute;left:0;top:.85em;width:6px;height:1px;background:var(--gold)}
.fac-item b{color:var(--navy);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.04em}
/* ==========================================================================
周辺・施設カード
========================================================================== */
/* ==========================================================================
周辺観光：写真が横に流れるスライダー
背景の色は :root の --sky（薄い水色）で変えられます
--------------------------------------------------------------------------
・同じカードを2組ならべて、半分ぶん動かして先頭に戻す＝途切れずに流れます
・速さ … .a-track の animation の秒数（大きいほどゆっくり）
・止める … マウスを乗せる／指で触れているあいだは止まります
========================================================================== */
.around-sec{background:var(--sky)}
.a-slider{position:relative;margin-top:clamp(20px,2.4vw,32px)}
.a-vp{overflow:hidden;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.a-track{display:flex;width:max-content;gap:clamp(12px,1.4vw,20px);
animation:aflow 72s linear infinite}
@keyframes aflow{from{transform:translate3d(0,0,0)}
to{transform:translate3d(calc(-50% - clamp(6px,.7vw,10px)),0,0)}}
.a-slider:hover .a-track,
.a-slider:focus-within .a-track{animation-play-state:paused}
.a-slider.reveal.solo.on>*{animation:none} /* 外枠だけフェード、中身は流れ続ける */
.a-card{flex:0 0 clamp(210px,20vw,268px);
background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;
text-align:center;transition:transform .45s var(--ez),box-shadow .45s var(--ez)}
.a-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(12,31,49,.12)}
.a-ph{aspect-ratio:4/3;overflow:hidden;background:var(--navy)}
.a-ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s}
.a-card:hover .a-ph img{transform:scale(1.05)}
.a-body{padding:clamp(13px,1.4vw,18px) 14px clamp(15px,1.6vw,20px)}
.a-card .t{font-size:clamp(13px,1.15vw,14.5px);font-family:var(--serif-m);/*fw*/font-weight:500;color:var(--navy);letter-spacing:.03em;line-height:1.7}
.a-card .d{font-family:var(--en);font-size:11.5px;color:var(--gold);margin-top:7px;letter-spacing:.08em}
.a-card .x{font-size:11.5px;color:var(--mute);margin-top:6px;line-height:1.8}
@media(prefers-reduced-motion:reduce){
.a-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center}
.a-vp{-webkit-mask-image:none;mask-image:none}
.a-card[aria-hidden="true"]{display:none}
}
@media(max-width:640px){
.a-card{flex-basis:210px}
.a-track{animation-duration:56s}
}
/* 旧レイアウト（アクセスページの周辺観光）はそのまま */
.a-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:clamp(12px,1.4vw,18px)}
.a-grid .a-card{flex:none;border-radius:0;padding:22px 18px}
.a-grid .a-card .t{font-size:14px}
/* ==========================================================================
表
========================================================================== */
.tbl{width:100%;border-collapse:collapse;background:#fff;
font-family:var(--serif);font-size:clamp(14px,1.18vw,16.5px)}
.tbl th,.tbl td{text-align:left;padding:clamp(15px,1.6vw,20px) clamp(14px,1.5vw,20px);
border-bottom:1px solid var(--line);vertical-align:top}
.tbl th{width:clamp(104px,10vw,140px);font-family:var(--serif-b);/*fw*/font-weight:700;color:var(--gold);
letter-spacing:.1em;white-space:nowrap}
.tbl td{color:var(--navy);font-family:var(--serif-b);/*fw*/font-weight:600;line-height:1.9}
.tbl a{border-bottom:1px solid var(--line)}
.tbl a:hover{color:var(--gold)}
/* ==========================================================================
お知らせ
========================================================================== */
/* お知らせ：背景は和紙色（:root の --paper-2） */
.news-sec{background:var(--paper-2)}
/* 「お知らせ」の見出し（ほかより少し大きく・太く） */
.news-sec .shead h2{font-size:clamp(24px,3.2vw,37px);font-family:var(--serif-m);/*fw*/font-weight:500;letter-spacing:.14em}
.news-sec .shead .en{font-size:clamp(10.5px,1.02vw,12.5px);letter-spacing:.26em}
.news-sec .shead>.wm{font-size:clamp(70px,11vw,168px)}
.news-sec .news-item{border-bottom-color:rgba(12,31,49,.12)}
.news-sec .tag{background:rgba(255,255,255,.85)}
.news-list{max-width:820px;margin:0 auto}
.news-item{display:flex;gap:22px;align-items:baseline;padding:19px 4px;border-bottom:1px solid var(--line)}
.news-item time{font-family:var(--en);font-size:12.5px;color:var(--gold);white-space:nowrap;letter-spacing:.08em}
.news-item .tag{font-size:10.5px;border:1px solid var(--line);padding:2px 10px;color:var(--mute);white-space:nowrap}
.news-item p{font-size:13.5px}
/* ==========================================================================
FAQ
========================================================================== */
/* ==========================================================================
よくある質問（トップページ）
--------------------------------------------------------------------------
質問は 、答えは .qa-a。クリックで開閉します。
Qの丸の色 … .qm の background、線の色 … .qa details の border-bottom
========================================================================== */
.faq-sec{padding:clamp(46px,5.2vw,76px) clamp(20px,5vw,60px) clamp(48px,5.6vw,80px)}
.qa{max-width:840px;margin:0 auto}
.qa details{border-bottom:1px solid rgba(12,31,49,.13)}
.qa details:first-child{border-top:1px solid rgba(12,31,49,.13)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:clamp(12px,1.4vw,18px);
padding:clamp(15px,1.7vw,21px) 38px clamp(15px,1.7vw,21px) 0;position:relative;
transition:color .3s}
.qa summary::-webkit-details-marker{display:none}
.qa .qm{flex:none;width:clamp(30px,2.9vw,38px);aspect-ratio:1;border-radius:50%;
background:var(--navy);color:#fff;font-family:var(--en);font-size:clamp(15px,1.5vw,19px);
display:flex;align-items:center;justify-content:center;line-height:1;padding-bottom:2px;
transition:background .35s}
.qa .qt{font-size:clamp(13.5px,1.25vw,16px);font-family:var(--serif-m);/*fw*/font-weight:500;color:var(--navy);letter-spacing:.05em;line-height:1.75}
.qa summary:hover .qm,
.qa details[open] .qm{background:var(--gold)}
.qa summary:hover .qt{color:var(--gold)}
/* 右の＋（開くと−） */
.qa summary::before,.qa summary::after{content:"";position:absolute;right:6px;top:50%;
background:var(--gold);transition:transform .35s var(--ez),opacity .35s}
.qa summary::before{width:14px;height:1.5px;transform:translateY(-50%)}
.qa summary::after{width:1.5px;height:14px;right:12px;transform:translate(0,-50%)}
.qa details[open] summary::after{transform:translate(0,-50%) rotate(90deg);opacity:0}
.qa-a{display:flex;gap:clamp(12px,1.4vw,18px);padding:0 38px clamp(18px,2vw,26px) 0;
animation:qaopen .45s var(--ez)}
@keyframes qaopen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.qa .am{flex:none;align-self:flex-start;width:clamp(30px,2.9vw,38px);aspect-ratio:1;border-radius:50%;
background:var(--paper-2);color:var(--gold);font-family:var(--en);font-size:clamp(15px,1.5vw,19px);
display:flex;align-items:center;justify-content:center;line-height:1;padding-bottom:2px}
.qa-a p{font-size:clamp(12.5px,1.1vw,14px);color:var(--sub);line-height:2.05;letter-spacing:.04em;padding-top:6px}
.qa-more{margin-top:clamp(22px,2.6vw,34px);text-align:center}
.qa-more a{display:inline-flex;align-items:center;gap:12px;padding-bottom:6px;
border-bottom:1px solid var(--gold);color:var(--navy);
font-size:clamp(13px,1.15vw,15px);letter-spacing:.08em;transition:gap .35s}
.qa-more a svg{width:22px;height:auto;fill:none;stroke:var(--gold);stroke-width:1.4;
stroke-linecap:round;stroke-linejoin:round}
.qa-more a:hover{gap:17px}
@media(prefers-reduced-motion:reduce){.qa-a{animation:none}}
.faq{max-width:880px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 34px;position:relative;font-size:14.5px;color:var(--navy);letter-spacing:.04em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";position:absolute;left:0;top:20px;font-family:var(--en);color:var(--gold);font-size:15px}
.faq summary::after{content:"";position:absolute;right:8px;top:31px;width:9px;height:9px;border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);transform:rotate(45deg);transition:.3s}
.faq details[open] summary::after{transform:rotate(-135deg);top:34px}
.faq .a{padding:0 40px 24px 34px;font-size:13.5px;color:var(--sub);line-height:2.1;position:relative}
.faq .a::before{content:"A";position:absolute;left:0;top:0;font-family:var(--en);color:var(--mute);font-size:15px}
/* ==========================================================================
ギャラリー
========================================================================== */
.gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(10px,1.2vw,16px)}
.gal .ph{aspect-ratio:4/3}
/* ==========================================================================
CTA
========================================================================== */
/* ==========================================================================
CTAの2枚のパネル（紺＝ご予約／生成り＝お電話）
--------------------------------------------------------------------------
・紺パネル … 予約サイトへ。金のボタンの色は .btn-gold の background
・生成りパネル … 電話番号。枠の色は .cp-ivory の border
========================================================================== */
.cta-panels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.1vw,14px);
max-width:720px;margin:clamp(12px,1.3vw,17px) auto 0;text-align:center}
.cp{position:relative;overflow:hidden;border-radius:10px;
padding:clamp(11px,1vw,13px) clamp(11px,1.3vw,17px) clamp(10px,.95vw,12px);
display:flex;flex-direction:column;justify-content:center;align-items:center}
/* --- 紺のパネル --- */
.cp-navy{background:linear-gradient(160deg,#123561,#0c2544 70%);
box-shadow:0 14px 36px rgba(4,12,22,.35)}
.cp-wave{position:absolute;width:62%;height:auto;fill:none;
stroke:rgba(255,255,255,.16);stroke-width:2.2;stroke-linecap:round;pointer-events:none}
.cp-wave-a{top:-4%;right:-6%}
.cp-wave-b{bottom:-3%;left:-8%;transform:scaleX(-1)}
.cp-lead{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(9px,1.1vw,14px);
text-align:left}
.cp-ic{flex:none;width:clamp(26px,2.4vw,32px)}
.cp-ic svg{width:100%;height:auto}
.cp-ic .bd{fill:none;stroke:#fff;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.cp-ic .dt{fill:#fff}
.cp-ic .sp{fill:none;stroke:var(--gold-l);stroke-width:2.1;stroke-linecap:round}
.cta .cp-lead p{margin:0;color:#fff;font-size:clamp(11px,1vw,12.8px);font-family:var(--serif-m);/*fw*/font-weight:500;
line-height:1.7;letter-spacing:.05em;white-space:nowrap}
/* 金の下線（筆でひいたような形） */
.cp-mark{position:relative;display:inline-block}
.cp-mark::after{content:"";position:absolute;left:-.06em;right:-.06em;bottom:-.16em;height:.16em;
border-radius:50%;background:linear-gradient(90deg,rgba(220,196,143,0),var(--gold-l) 18%,#e8cf9a 55%,var(--gold-l) 84%,rgba(220,196,143,0))}
.btn-gold{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:14px;
width:100%;margin-top:clamp(8px,.9vw,11px);
padding:clamp(9px,.9vw,11px) clamp(11px,1.3vw,16px);border-radius:6px;
background:linear-gradient(180deg,#dcbd77,#bb9648);
box-shadow:0 0 0 1px rgba(240,220,170,.85) inset,0 6px 18px rgba(4,12,22,.3);
color:#fff;font-size:clamp(11.5px,1.1vw,14px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.08em;white-space:nowrap;
transition:filter .35s,transform .35s var(--ez)}
.btn-gold svg{width:clamp(11px,1.05vw,13px);height:auto;fill:none;stroke:#fff;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ez)}
.btn-gold:hover{filter:brightness(1.07);transform:translateY(-2px)}
.btn-gold:hover svg{transform:translateX(4px)}
/* --- 生成りのパネル --- */
.cp-ivory{background:#faf7f1;border:1px solid rgba(179,146,79,.6);color:var(--navy)}
.cta .cp-ivory p{margin:0;color:var(--navy);font-size:clamp(11px,1.04vw,13.2px);font-family:var(--serif-m);/*fw*/font-weight:500;
line-height:1.7;letter-spacing:.05em}
.cp-div{display:flex;align-items:center;justify-content:center;width:100%;
margin:clamp(5px,.6vw,7px) 0}
.cp-div::before,.cp-div::after{content:"";flex:1;height:1px;background:rgba(179,146,79,.55)}
.cp-div svg{width:clamp(13px,1.15vw,15px);height:auto;margin:0 10px;flex:none;
fill:none;stroke:var(--gold);stroke-width:1.1}
.cp-tel{display:flex;align-items:center;justify-content:center;gap:clamp(8px,.95vw,12px);
transition:opacity .3s}
.cp-ph{flex:none;width:clamp(21px,2vw,27px)}
.cp-ph svg{width:100%;height:auto}
.cp-ph .bd{fill:var(--navy)}
.cp-ph .sp{fill:none;stroke:var(--gold);stroke-width:2.2;stroke-linecap:round}
/* 電話番号は本文と同じ明朝（「130」などの数字と同じ書体）で。
パネルの幅に合わせて自動で縮み、必ず1行に収まります。
最大の大きさを変えるなら、下の 54px の数字を変えてください。 */
.cp-ivory{container-type:inline-size}
.cp-num{font-family:var(--serif-b);font-size:clamp(17px,3.3vw,28px);font-weight:700;
letter-spacing:.02em;color:var(--navy);line-height:1;white-space:nowrap}
@supports (container-type:inline-size){
.cp-num{font-size:clamp(17px,9.4cqw,28px)}
}
.cp-tel:hover{opacity:.78}
@media(max-width:860px){
.cta-panels{grid-template-columns:1fr;max-width:560px}
.cp-lead{flex-direction:column;text-align:center;gap:12px}
}
@media(max-width:420px){
.cta .cp-lead p{white-space:normal}
}
@media(prefers-reduced-motion:reduce){.btn-gold,.btn-gold svg{transition:none}}
.cta{position:relative;color:#fff;text-align:center;overflow:hidden;background:var(--navy);
padding:clamp(22px,2.1vw,30px) clamp(20px,5vw,60px) clamp(18px,1.8vw,26px)}
.cta .bgimg{position:absolute;inset:0}
.cta .bgimg img{width:100%;height:100%;object-fit:cover;opacity:.34}
.cta .bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,31,49,.72),rgba(6,17,27,.92))}
.cta .inner{position:relative;z-index:2}
.cta h2{font-size:clamp(21px,2.5vw,32px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.12em;line-height:1.5;
text-wrap:balance}
.cta p{margin-top:16px;font-size:13.5px;color:rgba(255,255,255,.76);line-height:2.05}
.cta-btns{margin-top:32px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
/* ==========================================================================
フッター
========================================================================== */
footer{background:#071520;color:rgba(255,255,255,.66);padding:clamp(46px,5.4vw,68px) clamp(20px,5vw,60px) 30px;font-size:13px}
.f-top{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:34px}
.f-logo .f-mark{height:52px;width:auto;display:block;opacity:.95}
.f-logo address{font-style:normal;margin-top:20px;line-height:2;font-size:12.5px}
.f-logo .sns{margin-top:16px;display:flex;gap:14px;font-size:12px;flex-wrap:wrap}
.f-logo .sns a{border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px}
.f-logo .sns a:hover{color:#fff;border-color:var(--gold)}
.f-col h4{font-size:10.5px;font-family:var(--en);letter-spacing:.2em;color:var(--gold-l);margin-bottom:14px}
.f-col a{display:block;padding:5px 0;font-size:12.5px;transition:.3s}
.f-col a:hover{color:#fff;padding-left:6px}
.f-bot{max-width:var(--maxw);margin:38px auto 0;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.42)}
/* ==========================================================================
スマホ固定CTA
========================================================================== */
.mcta{display:none}
/* ==========================================================================
レスポンシブ
========================================================================== */
@media(max-width:1080px){
nav.gnav{display:none}
.burger{display:block}
}
@media(max-width:900px){
.feature{grid-template-columns:1fr}
.split2{grid-template-columns:1fr !important}
.f-top{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
:root{--hd:64px}
html{scroll-padding-top:64px}
.page-hero{margin-top:64px}
.logo img{height:36px}
.benefit .wrap{grid-template-columns:1fr}
.hero{height:86svh}
.s-copy{bottom:214px}
.s-copy .under{font-size:13.5px;line-height:1.85}
.hero-ctl{bottom:136px} /* 波とスマホ下部の固定ボタンを避ける */
.hero-wave{height:112px} /* 下50pxは固定ボタンに隠れるぶん、少し高めです */
.scrollcue{display:none}
.hero-dots{gap:18px}
.hero-dot{width:9px;height:9px}
.lang-btn{font-size:12px;padding:7px 22px 7px 11px}
.lang-btn::after{right:9px}
.f-top{grid-template-columns:1fr}
.news-item{flex-wrap:wrap;gap:8px}
.p-list{grid-template-columns:1fr}
.tbl th{width:88px;padding:13px 10px}
.tbl td{padding:13px 10px}
.mcta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80}
.mcta a{flex:1;text-align:center;padding:15px 6px;font-size:13px;letter-spacing:.08em}
.mcta .a{background:var(--gold);color:#fff}
.mcta .b{background:var(--navy);color:#fff}
body{padding-bottom:50px}
}
@media(prefers-reduced-motion:reduce){
*{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
/* 印刷 */
@media print{
header,.drawer,.mcta,.scrollcue,.cta{display:none}
body{padding:0}
}
/* ==========================================================================
===== 松林AIコンシェルジュ（自動応答チャット）
--------------------------------------------------------------------------
・右端のタブを押すと開きます
・受け答えの中身は assets/js/main.js の CHAT_QA に書いてあります
・色は下の変数（金＝var(--gold)、紺＝var(--navy)）
========================================================================== */
/* 金の縁取り＋紺地の縦タブ（外わく＝金のグラデーション、中＝紺） */
.cb-tab{
position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:200;
display:flex;flex-direction:column;align-items:center;gap:7px;
padding:13px 12px 15px;border:none;cursor:pointer;isolation:isolate;
border-radius:17px 0 0 17px;
background:linear-gradient(180deg,#efd9a8 0%,#c39d4e 16%,#8f6d2b 42%,
#e3c68d 62%,#ab8438 82%,#d9bb79 100%);
color:#f4e9d3;font-family:var(--serif);letter-spacing:0;
box-shadow:-5px 5px 22px rgba(6,16,26,.4);
transition:filter .3s,transform .35s var(--ez);
}
/* 中の紺色の面 */
.cb-tab::before{content:"";position:absolute;inset:3px 0 3px 3px;z-index:-1;
border-radius:14px 0 0 14px;
background:linear-gradient(155deg,#13293e 0%,#0a1c2b 48%,#0e2436 100%)}
/* 内側の細い金の線 */
.cb-tab::after{content:"";position:absolute;inset:10px 0 10px 10px;z-index:-1;
border:1px solid rgba(214,178,110,.45);border-right:0;
border-radius:10px 0 0 10px;pointer-events:none}
.cb-tab:hover{filter:brightness(1.07);transform:translateY(-50%) translateX(-3px)}
.cb-tab .cb-tab-ic{flex:none;width:37px;height:37px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
border:1.5px solid #d9b978;box-shadow:0 0 14px rgba(217,185,120,.3)}
.cb-tab .cb-tab-ic svg{width:21px;height:auto;fill:#e8ca90}
.cb-tab .cb-spk{font-size:9px;line-height:1;color:#eccf95;
text-shadow:0 0 9px rgba(236,207,149,.85)}
.cb-tab .cb-tab-t,.cb-tab .cb-tab-s{display:flex;flex-direction:column;align-items:center;
letter-spacing:0;text-align:center}
.cb-tab .cb-tab-t{font-size:15px;font-family:var(--serif-b);/*fw*/font-weight:700;line-height:1;gap:5px;color:#f7edd9;
text-shadow:0 1px 7px rgba(0,0,0,.4)}
.cb-tab .cb-tab-s{font-size:11px;font-family:var(--serif-b);/*fw*/font-weight:600;line-height:1;gap:4px;color:#ebdfc6;background:rgba(255,255,255,.05);
border:1px solid rgba(214,178,110,.45);border-radius:999px;padding:11px 6px}
.cb-tab .cb-tab-t i,.cb-tab .cb-tab-s i{font-style:normal;display:block}
.cb-tab .cb-tab-t i.en{font-family:var(--serif-b);font-size:1.3em;font-weight:700;
color:#ecc887;letter-spacing:.02em;text-shadow:0 0 10px rgba(236,200,135,.45)}
/* 画面が低いときは小さい文字を隠して収める */
@media(max-height:780px){.cb-tab .cb-tab-s{display:none}}
@media(max-height:620px){.cb-tab .cb-spk{display:none}.cb-tab .cb-tab-t{font-size:13px;gap:4px}}
body.cb-open .cb-tab{opacity:0;pointer-events:none}
.cb-panel{
position:fixed;right:clamp(10px,1.6vw,22px);bottom:clamp(10px,1.6vw,22px);z-index:201;
width:min(360px,calc(100vw - 20px));max-height:min(620px,calc(100vh - 40px));
display:flex;flex-direction:column;overflow:hidden;border-radius:14px;background:#fff;
box-shadow:0 18px 50px rgba(12,31,49,.3);
animation:cbin .35s var(--ez);
}
@keyframes cbin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cb-panel[hidden]{display:none}
.cb-head{display:flex;align-items:center;gap:11px;padding:13px 14px;
background:linear-gradient(180deg,#123561,#0c2544);color:#fff}
.cb-head .cb-ic{flex:none;width:34px;height:34px;border-radius:50%;background:var(--gold);
display:flex;align-items:center;justify-content:center}
.cb-head .cb-ic svg{width:19px;height:auto;fill:#fff}
.cb-head b{display:block;font-size:14.5px;font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.06em}
.cb-head small{display:block;font-size:10.5px;color:rgba(255,255,255,.7);letter-spacing:.03em;margin-top:2px}
.cb-x{margin-left:auto;background:transparent;border:none;color:#fff;cursor:pointer;
font-size:20px;line-height:1;padding:4px 2px;opacity:.75;transition:opacity .25s}
.cb-x:hover{opacity:1}
.cb-body{flex:1;overflow-y:auto;padding:14px;background:#f7f5f0;
display:flex;flex-direction:column;gap:10px}
.cb-msg{max-width:86%;font-size:13px;line-height:1.9;letter-spacing:.02em;
padding:10px 13px;border-radius:12px;animation:cbin .3s var(--ez)}
.cb-msg.bot{align-self:flex-start;background:#fff;color:var(--ink);
border:1px solid rgba(12,31,49,.09);border-top-left-radius:4px}
.cb-msg.me{align-self:flex-end;background:var(--navy);color:#fff;border-top-right-radius:4px}
.cb-msg a{color:var(--gold);border-bottom:1px solid rgba(179,146,79,.5)}
.cb-msg.me a{color:var(--gold-l);border-bottom-color:rgba(220,196,143,.5)}
.cb-msg.typing span{display:inline-block;width:6px;height:6px;margin:0 2px;border-radius:50%;
background:var(--mute);animation:cbdot 1s infinite}
.cb-msg.typing span:nth-child(2){animation-delay:.15s}
.cb-msg.typing span:nth-child(3){animation-delay:.3s}
@keyframes cbdot{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.cb-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;background:#fff;
border-top:1px solid rgba(12,31,49,.08)}
.cb-chips button{background:#fff;border:1px solid rgba(179,146,79,.55);border-radius:20px;
padding:6px 12px;font-family:var(--serif);font-size:11.5px;letter-spacing:.03em;
color:var(--navy);cursor:pointer;transition:background .25s,color .25s}
.cb-chips button:hover{background:var(--gold);border-color:var(--gold);color:#fff}
.cb-form{display:flex;gap:8px;padding:10px 12px 12px;background:#fff;
border-top:1px solid rgba(12,31,49,.08)}
.cb-form input{flex:1;min-width:0;border:1px solid rgba(12,31,49,.18);border-radius:20px;
padding:9px 14px;font-family:var(--serif);font-size:13px;color:var(--ink);background:#fff}
.cb-form input:focus{outline:none;border-color:var(--gold)}
.cb-form button{flex:none;border:none;border-radius:20px;background:var(--navy);color:#fff;
font-family:var(--serif);font-size:12.5px;letter-spacing:.08em;padding:9px 16px;cursor:pointer;
transition:background .25s}
.cb-form button:hover{background:var(--gold)}
@media(max-width:640px){
.cb-tab{padding:11px 9px 13px;gap:6px;border-radius:14px 0 0 14px}
.cb-tab::before{border-radius:11px 0 0 11px}
.cb-tab::after{inset:8px 0 8px 8px}
.cb-tab .cb-tab-ic{width:31px;height:31px}
.cb-tab .cb-tab-ic svg{width:18px}
.cb-tab .cb-tab-t{font-size:13px;gap:4px}
.cb-tab .cb-tab-s{display:none}
.cb-panel{right:8px;left:8px;width:auto;bottom:64px;max-height:calc(100vh - 130px)}
}
@media(prefers-reduced-motion:reduce){.cb-panel,.cb-msg{animation:none}}
/* == アメニティ・お子様料金の表 == */
.amn{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0 4px;max-width:620px}
.amn span{border:1px solid rgba(179,146,79,.45);border-radius:20px;padding:5px 13px;
background:#fff;font-family:var(--serif-b);font-size:12.5px;font-weight:600;
color:var(--navy);letter-spacing:.04em}
.kid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
margin:14px 0 16px;max-width:540px}
.kid-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
border:1px solid rgba(179,146,79,.4);border-radius:9px;background:#fff;
padding:9px 14px}
.kid-t{font-family:var(--serif-b);font-size:12.5px;font-weight:600;color:var(--navy);letter-spacing:.03em}
.kid-p{font-family:var(--serif-b);font-weight:700;font-size:19px;color:var(--navy);white-space:nowrap}
.kid-p i{font-style:normal;font-size:.62em;margin-left:2px;color:var(--gold)}
@media(max-width:560px){.kid{grid-template-columns:minmax(0,1fr)}}
/* == 周辺観光のその他 == */
.a-more{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
gap:clamp(8px,1vw,14px);margin:clamp(20px,2.4vw,32px) 0 0;padding:0}
.a-more li{display:flex;align-items:baseline;gap:8px;background:#fff;
border:1px solid rgba(179,146,79,.38);border-radius:22px;
padding:clamp(7px,.9vw,11px) clamp(13px,1.5vw,20px)}
.a-more b{font-family:var(--serif-b);font-weight:600;color:var(--navy);
font-size:clamp(12.5px,1.05vw,14.5px);letter-spacing:.04em}
.a-more span{font-family:var(--serif);color:var(--gold);
font-size:clamp(11px,.95vw,12.5px);letter-spacing:.02em}
/* == 周辺観光のその他 ここまで == */
/* == 見出しの太字＋金の数字 == */
.shead h2.h2-b{font-family:var(--serif-b);/*fw*/font-weight:700;letter-spacing:.1em}
.shead h2.h2-b b{font-family:var(--serif-b);/*fw*/font-weight:700;color:var(--gold);font-size:1.18em;
letter-spacing:.04em;font-variant-numeric:lining-nums;
font-feature-settings:"lnum" 1}
/* == パンくずの下の余白 == */
.crumb + section{padding-top:clamp(38px,4.4vw,62px)}
/* == 金のグラデーションボタン（単独用） == */
.btn-goldx{display:inline-flex;align-items:center;justify-content:center;gap:14px;
padding:clamp(14px,1.5vw,19px) clamp(28px,3.4vw,52px);border-radius:7px;
background:linear-gradient(180deg,#dcbd77,#bb9648);
box-shadow:0 0 0 1px rgba(240,220,170,.85) inset,0 8px 22px rgba(12,31,49,.2);
color:#fff;font-family:var(--serif-b);font-weight:600;white-space:nowrap;
font-size:clamp(13px,1.2vw,16px);letter-spacing:.12em;
transition:filter .35s,transform .35s var(--ez)}
.btn-goldx svg{width:clamp(12px,1.1vw,14px);height:auto;fill:none;stroke:#fff;
stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
transition:transform .35s var(--ez)}
.btn-goldx:hover{filter:brightness(1.07);transform:translateY(-2px);color:#fff}
.btn-goldx:hover svg{transform:translateX(3px)}
/* == 合宿の設備スライダー == */
.eqp-sec{padding:clamp(50px,6vw,88px) clamp(20px,5vw,60px) clamp(54px,6.4vw,94px);
background:#f4f7fb url("assets/images/bg-wave.jpg") no-repeat center bottom/cover}
.eqs{position:relative;margin-top:clamp(24px,3vw,40px)}
.eqs-vp{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
padding-bottom:4px}
.eqs-vp::-webkit-scrollbar{display:none}
.eqs-track{--g:clamp(12px,1.5vw,22px);display:flex;gap:var(--g)}
.eqs-card{flex:0 0 calc((100% - var(--g) * 2) / 3);scroll-snap-align:start;
background:#fff;border:1px solid rgba(179,146,79,.34);border-radius:14px;
overflow:hidden;box-shadow:0 8px 26px rgba(12,31,49,.07)}
.eqs-ph{line-height:0}
.eqs-ph img{width:100%;aspect-ratio:16/10;object-fit:cover;
transition:transform 1.3s var(--ez)}
.eqs-card:hover .eqs-ph img{transform:scale(1.04)}
.eqs-b{padding:clamp(13px,1.6vw,20px) clamp(14px,1.7vw,22px) clamp(16px,1.9vw,24px)}
.eqs-t{display:flex;align-items:center;gap:clamp(9px,1.1vw,14px)}
.eqs-ico{flex:none;width:clamp(34px,3.1vw,42px);height:clamp(34px,3.1vw,42px);
border-radius:50%;display:flex;align-items:center;justify-content:center;
background:linear-gradient(155deg,#16304a,#0b1d2d);
border:1px solid rgba(214,178,110,.55)}
.eqs-ico svg{width:52%;height:auto;fill:#e6c88c}
.eqs-t b{font-family:var(--serif-b);font-weight:700;color:var(--navy);
font-size:clamp(15px,1.4vw,19px);letter-spacing:.08em}
.eqs-b p{margin:clamp(8px,1vw,13px) 0 0;font-family:var(--serif-b);font-weight:600;
color:var(--ink);font-size:clamp(12.5px,1.05vw,14.5px);line-height:1.95;letter-spacing:.03em}
/* 矢印 */
.eqs-nav{position:absolute;top:calc(50% - 24px);transform:translateY(-50%);z-index:3;
width:clamp(38px,3.6vw,50px);height:clamp(38px,3.6vw,50px);border-radius:50%;
display:flex;align-items:center;justify-content:center;cursor:pointer;
background:linear-gradient(155deg,#16304a,#0b1d2d);border:1px solid rgba(214,178,110,.6);
box-shadow:0 6px 18px rgba(12,31,49,.24);transition:opacity .3s,transform .3s var(--ez)}
.eqs-nav svg{width:42%;height:auto;fill:none;stroke:#e6c88c;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round}
.eqs-nav.prev{left:calc(clamp(38px,3.6vw,50px) / -2)}
.eqs-nav.next{right:calc(clamp(38px,3.6vw,50px) / -2)}
.eqs-nav:hover{transform:translateY(-50%) scale(1.06)}
.eqs-nav:disabled{opacity:.28;cursor:default;transform:translateY(-50%)}
/* ドット */
.eqs-dots{display:flex;justify-content:center;gap:9px;margin-top:clamp(16px,2vw,26px)}
.eqs-dots button{width:9px;height:9px;padding:0;border-radius:50%;cursor:pointer;
background:transparent;border:1px solid rgba(179,146,79,.75);transition:.3s}
.eqs-dots button.on{background:#b3924f;transform:scale(1.25)}
.eqp-cta{text-align:center;margin-top:clamp(30px,3.8vw,50px)}
.eqp-cta p{font-family:var(--serif);color:var(--sub);letter-spacing:.04em;
font-size:clamp(13px,1.15vw,15.5px);line-height:2.1}
.eqp-cta .btn-goldx{margin-top:clamp(16px,2vw,26px)}
@media(max-width:900px){
.eqs-card{flex:0 0 calc((100% - var(--g)) / 2)}
}
@media(max-width:620px){
.eqs-card{flex:0 0 100%}
.eqs-nav.prev{left:2px}
.eqs-nav.next{right:2px}
}
@media(prefers-reduced-motion:reduce){.eqs-vp{scroll-behavior:auto}}
/* == 合宿の設備スライダー ここまで == */
/* == 合宿の3つの特長 == */
.cp3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(14px,1.8vw,30px);margin-top:clamp(52px,5.6vw,84px)}
.cp3-card{position:relative;text-align:center;border-radius:16px;
border:1px solid rgba(179,146,79,.34);
background:linear-gradient(180deg,#fffdfa 0%,#fdf9f1 100%);
padding:clamp(13px,1.5vw,20px) clamp(13px,1.5vw,22px) clamp(20px,2.4vw,32px);
box-shadow:0 10px 30px rgba(12,31,49,.06)}
.cp3-ico{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
width:clamp(52px,5vw,72px);height:clamp(52px,5vw,72px);border-radius:50%;
display:flex;align-items:center;justify-content:center;background:#fff;
border:1px solid rgba(179,146,79,.32);box-shadow:0 6px 18px rgba(12,31,49,.1)}
.cp3-ico svg{width:46%;height:auto;fill:#c2a25f}
.cp3-ph{margin-top:clamp(22px,2.6vw,38px);border-radius:8px;overflow:hidden;line-height:0}
.cp3-ph img{width:100%;aspect-ratio:16/10;object-fit:cover;
transition:transform 1.4s var(--ez)}
.cp3-card:hover .cp3-ph img{transform:scale(1.04)}
.cp3-no{display:inline-flex;align-items:center;gap:11px;
margin-top:clamp(15px,1.9vw,26px);font-family:var(--serif-b);font-weight:700;
color:#b3924f;font-size:clamp(14px,1.3vw,18px);letter-spacing:.16em;
font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1}
.cp3-no::before,.cp3-no::after{content:"";width:clamp(14px,1.4vw,20px);height:1px;
background:rgba(179,146,79,.75)}
.cp3-b h3{margin:clamp(7px,.9vw,12px) 0 0;font-family:var(--serif-b);font-weight:700;
color:var(--navy);font-size:clamp(16px,1.6vw,23px);letter-spacing:.06em;line-height:1.5}
.cp3-rule{display:block;position:relative;width:min(58%,160px);height:1px;
margin:clamp(11px,1.4vw,19px) auto;
background:linear-gradient(90deg,rgba(179,146,79,0),rgba(179,146,79,.7),rgba(179,146,79,0))}
.cp3-rule::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;
background:#fdfaf3;border:1px solid #b3924f;transform:translate(-50%,-50%) rotate(45deg)}
.cp3-b p{margin:0;font-family:var(--serif-b);color:var(--ink);font-weight:600;
letter-spacing:.03em;font-size:clamp(13px,1.13vw,15.5px);line-height:2.05}
/* 横に並ぶときは、見出しが1行でも2行でも下の飾り線と本文の位置がそろうように
2行分の高さを確保します（line-height 1.5 × 2行 ＝ 3em）*/
@media(min-width:621px){
.cp3-b h3{min-height:3em}
}
@media(max-width:900px){
.cp3{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(52px,7vw,72px)}
}
@media(max-width:620px){
.cp3{grid-template-columns:minmax(0,1fr);row-gap:clamp(52px,14vw,70px)}
.cp3-b p br{display:none}
}
/* == 合宿の3つの特長 ここまで == */
/* == 無料送迎バス == */
.sb-sec{position:relative;overflow:hidden;background:#fff;
padding:clamp(50px,6vw,88px) clamp(20px,5vw,60px) clamp(54px,6.4vw,94px)}
.sb-bg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.sb-sec>.inner{position:relative;z-index:1}
.sb-head{text-align:center;margin-bottom:clamp(26px,3.2vw,44px)}
.sb-ico{display:block;width:clamp(30px,2.8vw,40px);margin:0 auto clamp(9px,1.1vw,14px)}
.sb-ico svg{width:100%;height:auto;fill:#c2a25f}
.sb-head .en{display:block;font-family:var(--en);color:#b3924f;text-transform:uppercase;
font-size:clamp(11px,1.1vw,14px);letter-spacing:.34em}
.sb-head h2{margin:clamp(6px,.8vw,12px) 0 0;font-family:var(--serif-b);font-weight:600;
color:var(--navy);font-size:clamp(25px,3.4vw,45px);letter-spacing:.13em;line-height:1.35}
.sb-rule{display:block;position:relative;width:min(56%,430px);height:1px;
margin:clamp(13px,1.6vw,22px) auto 0;
background:linear-gradient(90deg,rgba(179,146,79,0),rgba(179,146,79,.65),rgba(179,146,79,0))}
.sb-rule::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
background:#fff;border:1px solid #b3924f;transform:translate(-50%,-50%) rotate(45deg)}
.sb-head>p{margin:clamp(14px,1.7vw,24px) 0 0;font-family:var(--serif);color:var(--sub);
font-size:clamp(13px,1.15vw,16px);letter-spacing:.05em;line-height:1.9}
.sb-card{border:1px solid rgba(179,146,79,.42);border-radius:16px;
background:rgba(255,255,255,.72);backdrop-filter:blur(2px);
padding:clamp(16px,2.2vw,34px) clamp(10px,1.6vw,26px)}
.sb-grid{display:grid}
.sb-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.sb-2{grid-template-columns:repeat(2,minmax(0,1fr));
margin-top:clamp(14px,1.9vw,28px);padding-top:clamp(14px,1.9vw,28px);
border-top:1px solid rgba(179,146,79,.28)}
.sb-item{display:flex;align-items:center;gap:clamp(11px,1.4vw,20px);
padding:clamp(6px,.9vw,14px) clamp(9px,1.3vw,22px);min-width:0}
.sb-item+.sb-item{border-left:1px solid rgba(179,146,79,.26)}
.sb-2 .sb-item{align-items:flex-start}
.sb-ic{flex:none;width:clamp(42px,4vw,58px);height:clamp(42px,4vw,58px);border-radius:50%;
background:#f4efe5;display:flex;align-items:center;justify-content:center}
.sb-ic svg{width:50%;height:auto;fill:#12304f}
.sb-item b{display:block;font-family:var(--serif-b);font-weight:600;color:var(--navy);
font-size:clamp(13.5px,1.28vw,18px);letter-spacing:.15em;line-height:1.4}
.sb-item p{margin:clamp(4px,.6vw,8px) 0 0;font-family:var(--serif);color:var(--ink);
font-size:clamp(12px,1.05vw,14.5px);line-height:1.85;letter-spacing:.03em}
@media(max-width:900px){
.sb-4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(10px,1.6vw,18px)}
.sb-4 .sb-item:nth-child(odd){border-left:0}
.sb-4 .sb-item:nth-child(n+3){border-top:1px solid rgba(179,146,79,.26);
padding-top:clamp(12px,1.8vw,20px)}
.pc-br{display:none}
}
@media(max-width:560px){
.sb-4,.sb-2{grid-template-columns:minmax(0,1fr)}
.sb-item+.sb-item{border-left:0;border-top:1px solid rgba(179,146,79,.26);
padding-top:clamp(12px,3vw,18px)}
.sb-4 .sb-item:nth-child(n+3){padding-top:clamp(12px,3vw,18px)}
.sb-2{margin-top:0;padding-top:0;border-top:0}
.sb-2 .sb-item{border-top:1px solid rgba(179,146,79,.26);padding-top:clamp(12px,3vw,18px)}
}
/* == 送迎バス ここまで == */
/* == アクセスのルート図 == */
.acx-sec{padding:clamp(46px,5.4vw,80px) clamp(20px,5vw,60px) clamp(50px,6vw,86px);
background:linear-gradient(180deg,#fbfcfd 0%,#f4f7f9 100%)}
.acx{--ac1:#1f6f6d;--ac2:#2f8c89;--acl:#e7f1f0}
.acx+.acx{margin-top:clamp(44px,5.4vw,80px)}
.acx-train{--ac1:#c0413f;--ac2:#d8a13c;--acl:#fbeceb}
.acx-car{--ac1:#12365e;--ac2:#12365e;--acl:#e9eff5}
.acx-head{text-align:center;margin-bottom:clamp(20px,2.6vw,34px)}
.acx-head h3{margin:0;font-family:var(--serif-b);font-weight:700;color:var(--ac1);
font-size:clamp(21px,2.5vw,34px);letter-spacing:.09em;line-height:1.4}
.acx-rule{display:block;width:min(58%,430px);height:1px;margin:clamp(9px,1.1vw,15px) auto 0;
background:linear-gradient(90deg,rgba(179,146,79,0),rgba(179,146,79,.85),rgba(179,146,79,0))}
.acx-head p{margin:clamp(9px,1.1vw,14px) 0 0;font-family:var(--serif);color:var(--sub);
font-size:clamp(12.5px,1.05vw,15px);letter-spacing:.06em}
/* ---- 図 ---- */
.acx-map{display:grid;align-items:center;
grid-template-columns:minmax(96px,148px) minmax(150px,1fr) auto minmax(84px,152px) minmax(132px,208px);
column-gap:clamp(6px,.9vw,14px);row-gap:clamp(10px,1.4vw,20px)}
.acx-o{grid-column:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:2px;min-height:clamp(62px,7vw,92px);padding:8px 6px;border-radius:11px;
background:var(--ac1);color:#fff;font-family:var(--serif);text-align:center}
.acx-o svg{width:clamp(17px,1.7vw,22px);height:auto;fill:#fff;opacity:.95}
.acx-o b{font-family:var(--serif-b);/*fw*/font-weight:700;font-size:clamp(12.5px,1.15vw,16px);letter-spacing:.05em;line-height:1.3}
.acx-o small{font-size:clamp(10px,.85vw,11.5px);opacity:.88;letter-spacing:.02em}
.acx-flow{grid-column:2;display:flex;align-items:center;gap:clamp(5px,.7vw,10px)}
.acx-flow2{grid-column:4;grid-row:1/span var(--rows);align-self:center;display:flex}
.acx-seg{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px}
.acx-slab{display:flex;align-items:center;gap:5px;min-height:18px;
font-family:var(--serif);font-size:clamp(10.5px,.95vw,13px);color:var(--ink);
letter-spacing:.03em;white-space:nowrap}
.acx-slab svg{width:clamp(16px,1.5vw,21px);height:auto;fill:var(--ac2)}
.acx-slab em{font-style:normal}
.acx-line{width:100%;height:0;border-top:3px dotted var(--ac2);opacity:.8}
.acx-line.rail{height:10px;border:0;border-top:2px solid #b8bfc5;border-bottom:2px solid #b8bfc5;
background:repeating-linear-gradient(90deg,#b8bfc5 0 3px,transparent 3px 9px);opacity:1}
.acx-line.road{height:9px;border:0;background:#8d949b;border-radius:1px;position:relative;opacity:1}
.acx-line.road::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;
transform:translateY(-50%);
background:repeating-linear-gradient(90deg,#fff 0 9px,transparent 9px 18px)}
.acx-time{display:flex;align-items:center;gap:4px;font-family:var(--serif-b);font-weight:600;
font-size:clamp(11px,1vw,14px);color:var(--ink);white-space:nowrap}
.acx-time svg{width:clamp(13px,1.15vw,16px);height:auto;fill:var(--ac2)}
.acx-time em{font-style:normal}
.acx-mid{flex:none;display:flex;align-items:center;justify-content:center;text-align:center;
min-height:clamp(52px,6vw,78px);padding:7px clamp(7px,.9vw,13px);border-radius:10px;
background:#6b8a3f;color:#fff;font-family:var(--serif-b);font-weight:700;line-height:1.25;
font-size:clamp(11px,1vw,14px);letter-spacing:.04em}
.acx-hub{grid-column:3;grid-row:1/span var(--rows);align-self:stretch;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
min-width:clamp(48px,4.6vw,66px);padding:clamp(12px,1.5vw,20px) clamp(7px,.9vw,13px);
border-radius:12px;background:linear-gradient(160deg,#14365c,#0c2544);color:#fff}
.acx-hub svg{width:clamp(18px,1.8vw,24px);height:auto;fill:#fff}
.acx-hub span{display:flex;flex-direction:column;align-items:center;gap:clamp(3px,.4vw,6px);
font-family:var(--serif-b);font-weight:700;letter-spacing:0;line-height:1;
font-size:clamp(12.5px,1.2vw,17px)}
.acx-hub span i{font-style:normal;display:block}
.acx-hub span i.en{font-size:1.05em;letter-spacing:.02em}
.acx-dest{grid-column:5;grid-row:1/span var(--rows);align-self:stretch;position:relative;
display:flex;align-items:center;justify-content:center;overflow:hidden;
border:2px solid #14365c;border-radius:14px;background:#fff;
padding:clamp(14px,1.8vw,24px) clamp(9px,1.2vw,16px) clamp(38px,4.4vw,62px)}
.acx-dest img{position:relative;z-index:1;width:min(100%,168px);height:auto}
.acx-wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:30%;opacity:.85}
/* ---- 下の一覧 ---- */
.acx-list{list-style:none;margin:clamp(18px,2.2vw,30px) 0 0;padding:clamp(14px,1.8vw,24px) clamp(14px,1.8vw,26px);
border:1px solid rgba(12,31,49,.1);border-radius:13px;background:#fff}
.acx-list li{display:flex;align-items:flex-start;gap:clamp(11px,1.4vw,18px);
padding:clamp(11px,1.4vw,17px) 0}
.acx-list li+li{border-top:1px dashed rgba(12,31,49,.13)}
.acx-ic{flex:none;width:clamp(36px,3.4vw,46px);height:clamp(36px,3.4vw,46px);border-radius:50%;
display:flex;align-items:center;justify-content:center;background:var(--ac1)}
.acx-ic svg{width:52%;height:auto;fill:#fff}
.acx-ic.t2{background:#b3924f}
.acx-ic.c2{background:#6b8a3f}
.acx-ic.c3{background:#b3924f}
.acx-list b{font-family:var(--serif-b);font-weight:700;color:var(--ac1);
font-size:clamp(14px,1.25vw,17px);letter-spacing:.05em}
.acx-dur{font-family:var(--serif);color:var(--sub);font-size:clamp(11.5px,1vw,13.5px);
letter-spacing:.02em;margin-left:2px}
.acx-list p{margin:5px 0 0;font-family:var(--serif);color:var(--ink);
font-size:clamp(12.5px,1.08vw,14.5px);line-height:1.95;letter-spacing:.02em}
.acx-note{display:flex;align-items:center;gap:10px;margin:clamp(11px,1.3vw,16px) 0 0;
padding:clamp(9px,1.1vw,14px) clamp(12px,1.5vw,20px);border-radius:10px;background:var(--acl);
font-family:var(--serif);color:var(--sub);letter-spacing:.03em;
font-size:clamp(11.5px,1vw,13.5px)}
.acx-nic{flex:none;width:22px;height:22px;border-radius:50%;display:flex;
align-items:center;justify-content:center;background:var(--ac1)}
.acx-nic svg{width:60%;height:auto;fill:#fff}
/* ---- 移動手段の入口カード ---- */
.mv-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(9px,1.2vw,18px);max-width:min(100%,880px);
margin:0 auto clamp(30px,3.6vw,54px)}
.mv{position:relative;display:block;overflow:hidden;border-radius:4px;
aspect-ratio:5/6;text-decoration:none;isolation:isolate;
box-shadow:0 12px 34px rgba(12,31,49,.18);
transition:transform .5s var(--ez),box-shadow .5s var(--ez)}
.mv:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(12,31,49,.26)}
.mv-car{background:radial-gradient(125% 95% at 50% 16%,#1e4674 0%,#123055 48%,#0b2140 100%)}
.mv-train{background:radial-gradient(125% 95% at 50% 16%,#8a2a2c 0%,#6a1e21 48%,#4d1518 100%)}
.mv-air{background:radial-gradient(125% 95% at 50% 16%,#22726e 0%,#155451 48%,#0d3b39 100%)}
.mv-deco{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.mv-frame{position:absolute;inset:5.5%;z-index:1;pointer-events:none;
border:1px solid rgba(214,178,110,.5)}
.mv-corners{position:absolute;inset:calc(5.5% - 6px);z-index:1;pointer-events:none;
background:
linear-gradient(#ecd6a4,#ecd6a4) left top/17% 1.6px no-repeat,
linear-gradient(#ecd6a4,#ecd6a4) left top/1.6px 12% no-repeat,
linear-gradient(#ecd6a4,#ecd6a4) right top/17% 1.6px no-repeat,
linear-gradient(#ecd6a4,#ecd6a4) right top/1.6px 12% no-repeat,
linear-gradient(#ecd6a4,#ecd6a4) left bottom/17% 1.6px no-repeat,
linear-gradient(#ecd6a4,#ecd6a4) left bottom/1.6px 12% no-repeat,
linear-gradient(#ecd6a4,#ecd6a4) right bottom/17% 1.6px no-repeat,
linear-gradient(#ecd6a4,#ecd6a4) right bottom/1.6px 12% no-repeat}
.mv-in{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:0;padding:0 8% 7%;text-align:center}
.mv-ico{display:block;width:clamp(38px,3.9vw,54px);margin-bottom:clamp(15px,1.9vw,28px);
transition:transform .6s var(--ez)}
.mv-ico svg{width:100%;height:auto;display:block}
.mv:hover .mv-ico{transform:translateY(-4px) scale(1.05)}
.mv-ja{font-family:var(--serif-m);font-weight:500;color:#fff;line-height:1.3;
font-size:clamp(15px,1.6vw,22px);letter-spacing:.15em;text-indent:.15em;
text-shadow:0 2px 14px rgba(0,0,0,.35)}
.mv-rule{display:block;position:relative;width:min(66%,150px);height:1px;
margin:clamp(8px,1vw,14px) 0;
background:linear-gradient(90deg,rgba(214,178,110,0),rgba(214,178,110,.85),rgba(214,178,110,0))}
.mv-rule::before{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;
background:#e0c084;transform:translate(-50%,-50%) rotate(45deg)}
.mv-en{font-family:"WmScript","Great Vibes",cursive;color:#e6c88c;line-height:1.1;
font-size:clamp(17px,1.8vw,25px);letter-spacing:.02em;
text-shadow:0 2px 12px rgba(0,0,0,.3)}
/* ---- スマホ・タブレット ---- */
@media(max-width:900px){
.acx-map{grid-template-columns:minmax(86px,1fr) minmax(0,1.5fr);row-gap:8px}
.acx-o{grid-column:1}
.acx-flow{grid-column:2}
.acx-hub,.acx-flow2,.acx-dest{grid-column:1/-1;grid-row:auto}
.acx-hub{flex-direction:row;min-height:52px;margin-top:6px}
.acx-hub span{flex-direction:row;gap:.14em}
.acx-flow2{align-self:stretch}
.acx-dest{padding:16px 16px 40px}
.acx-dest img{width:min(52%,180px)}
.acx-line{min-width:26px}
.acx-slab{white-space:normal;text-align:center;justify-content:center}
.acx-mid{min-height:44px}
}
@media(max-width:520px){
.mv-row{gap:8px}
.mv-ja{letter-spacing:.08em;text-indent:.08em}
.acx-map{grid-template-columns:1fr}
.acx-o,.acx-flow{grid-column:1}
.acx-flow{flex-direction:column;gap:6px}
.acx-seg{width:100%}
.acx-list li{gap:10px}
}
/* == ルート図 ここまで == */
/* == 地図（Googleマップ） == */
.gmap{position:relative;margin-top:clamp(12px,1.4vw,18px);
border:1px solid rgba(179,146,79,.4);border-radius:12px;overflow:hidden;
background:#e9eef1;box-shadow:0 8px 24px rgba(12,31,49,.08)}
.gmap iframe{display:block;width:100%;height:clamp(220px,24vw,300px);border:0}
.gmap.tall{margin-top:0}
.gmap.tall iframe{height:clamp(300px,34vw,440px)}
.gmap-link{margin-left:.5em;color:var(--gold);border-bottom:1px solid rgba(179,146,79,.45)}
/* == その他の設備・サービス == */
.ofac-sec{position:relative;overflow:hidden;
padding:clamp(44px,5.4vw,78px) clamp(20px,5vw,60px) clamp(50px,6vw,86px);
background:linear-gradient(180deg,#fdf9f2 0%,#faf3e7 100%)}
.ofac-sec::before,.ofac-sec::after{content:"";position:absolute;top:-30px;
width:min(30vw,300px);aspect-ratio:900/943;pointer-events:none;
background:url("assets/images/washi-seigaiha.png") no-repeat right top/contain;opacity:.85}
.ofac-sec::before{left:calc(50% - 50vw);transform:scaleX(-1)}
.ofac-sec::after{right:calc(50% - 50vw)}
.ofac-sec>.inner{position:relative;z-index:1}
.ofac{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:clamp(10px,1.3vw,20px);margin-top:clamp(22px,2.8vw,38px)}
.ofc{display:flex;flex-direction:column;background:#fffdf8;
border:1px solid rgba(179,146,79,.4);border-radius:13px;overflow:hidden;
box-shadow:0 10px 30px rgba(12,31,49,.07)}
.ofc-ph{position:relative;line-height:0}
.ofc-ph img{width:100%;aspect-ratio:4/5;object-fit:cover}
.ofc-ico{position:absolute;left:50%;bottom:0;transform:translate(-50%,50%);
width:clamp(40px,3.6vw,52px);height:clamp(40px,3.6vw,52px);border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(155deg,#162c43,#0a1c2b);
border:1.5px solid rgba(214,178,110,.75);box-shadow:0 5px 14px rgba(12,31,49,.28)}
.ofc-ico svg{width:52%;height:auto;fill:#e6c88c}
.ofc-b{flex:1;text-align:center;padding:clamp(30px,3vw,40px) clamp(9px,1.1vw,16px) clamp(16px,1.8vw,24px)}
.ofc-b h3{margin:0;font-family:var(--serif-b);font-weight:700;color:var(--navy);
font-size:clamp(15px,1.35vw,20px);letter-spacing:.06em}
.ofc-rule{display:block;width:46px;height:1px;margin:clamp(9px,1vw,13px) auto;
background:rgba(179,146,79,.55);position:relative}
.ofc-rule::before{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;
border-radius:50%;background:#b3924f;transform:translate(-50%,-50%)}
.ofc-b p{margin:0;font-family:var(--serif-b);color:var(--ink);font-weight:600;
font-size:clamp(12.5px,1.05vw,15px);line-height:1.85;letter-spacing:.03em}
.ofc-b p.sub{margin-top:5px;font-family:var(--serif-m);/*fw*/font-weight:500;color:var(--sub);
font-size:clamp(11px,.92vw,13px)}
.ofac-note{display:grid;grid-template-columns:.94fr 1.62fr 1fr;
gap:clamp(10px,1.3vw,20px);margin-top:clamp(14px,1.7vw,24px)}
.ofn{display:flex;align-items:center;gap:clamp(12px,1.35vw,18px);background:#fffdf8;
border:1px solid rgba(179,146,79,.34);border-radius:13px;
padding:clamp(15px,1.8vw,24px) clamp(14px,1.6vw,21px)}
.ofn-ico{flex:none;width:clamp(44px,3.8vw,54px);height:clamp(44px,3.8vw,54px);
border-radius:50%;display:flex;align-items:center;justify-content:center;
background:linear-gradient(155deg,#162c43,#0a1c2b);
border:1.5px solid rgba(214,178,110,.7);box-shadow:0 4px 12px rgba(12,31,49,.2)}
.ofn-ico svg{width:52%;height:auto;fill:#e6c88c}
.ofn b{display:block;font-family:var(--serif-b);font-weight:700;color:var(--navy);
font-size:clamp(16px,1.5vw,21px);letter-spacing:.07em;margin-bottom:6px}
.ofn>div>span{display:block;font-family:var(--serif-b);font-weight:600;color:var(--ink);
font-size:clamp(12px,1vw,13.5px);line-height:1.9;letter-spacing:0}
.ofn>div>span.sub{margin-top:2px;font-family:var(--serif-m);/*fw*/font-weight:500;color:var(--sub);
font-size:clamp(11.5px,1vw,13.5px)}
@media(max-width:1000px){
.ofac{grid-template-columns:repeat(2,minmax(0,1fr))}
.ofac-note{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
.ofac{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.ofac-note{grid-template-columns:minmax(0,1fr)}
.ofc-b{padding:26px 8px 15px}
.ofc-ico{width:38px;height:38px}
}
/* == その他の設備 ここまで == */
/* == 答えの中の表・タグ == */
.qa-a .qa-t{flex:1;min-width:0;padding-top:6px}
.qa-a .qa-t>p{padding-top:0}
.qa-a .qa-t>p+p{margin-top:10px}
.qa-a .cx,.qa-a .kid{margin:12px 0}
.qa-a .amn{margin:12px 0 2px}
/* == 答えの中 ここまで == */
/* == キャンセル料の表 == */
.cx{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:14px 0 16px;max-width:520px}
.cx-row{border:1px solid rgba(179,146,79,.4);border-radius:9px;overflow:hidden;
background:#fff;text-align:center}
.cx-t{display:block;padding:7px 4px;background:linear-gradient(155deg,#152b41,#0b1d2d);
color:var(--gold-l);font-family:var(--serif-b);font-size:11.5px;font-weight:600;letter-spacing:.04em}
.cx-v{display:block;padding:9px 4px;font-family:var(--serif-b);font-weight:700;
font-size:20px;color:var(--navy);letter-spacing:.02em}
.cx-v i{font-style:normal;font-size:.62em;margin-left:1px;color:var(--gold)}
@media(max-width:520px){.cx{grid-template-columns:repeat(2,1fr)}}
/* == 客室タイプ TYPE01-03 == */
.rtype-sec{padding:clamp(40px,5vw,70px) clamp(20px,5vw,60px) clamp(28px,3.2vw,44px);
overflow:hidden;
background:linear-gradient(180deg,#fdf9f2 0%,#faf3e7 100%)}
/* 次のセクション（館内のご案内）との間隔 */
.rtype-sec + section{padding-top:clamp(38px,4.4vw,62px)}
.rtype{position:relative;padding:clamp(16px,2.2vw,28px) 0;
display:grid;column-gap:clamp(26px,3.6vw,58px);
grid-template-columns:minmax(0,1fr) minmax(215px,34%);
grid-template-areas:
"type ph"
"rule ph"
"h2 ph"
"lead ph"
"tbl tbl"
"note note";
align-content:start}
.rt-type{grid-area:type}
.rt-rule{grid-area:rule}
.rtype h2{grid-area:h2}
.rt-lead{grid-area:lead}
.rt-ph{grid-area:ph;align-self:center;justify-self:end;width:100%;
padding:6px;border:1px solid rgba(179,146,79,.45);border-radius:14px;
background:#fffdf8;box-shadow:0 14px 38px rgba(12,31,49,.13)}
.rt-ph img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:9px}
.rt-tbl{grid-area:tbl}
.rt-note{grid-area:note}
/* 青海波は画面の右はしまで伸ばす */
.rtype::before{content:"";position:absolute;pointer-events:none;
top:clamp(-28px,-1.8vw,-10px);right:calc(50% - 50vw);
width:min(34vw,330px);aspect-ratio:900/943;
background:url("assets/images/washi-seigaiha.png") no-repeat right top/contain}
.rtype+.rtype{margin-top:clamp(30px,4vw,56px);border-top:1px solid rgba(179,146,79,.2)}
.rtype>*{position:relative}
/* TYPE 01 の飾り文字（筆記体）。フォントは assets/fonts/great-vibes-400.woff2 */
.rt-type{display:block;font-family:"WmScript","Great Vibes",cursive;
font-size:clamp(21px,2.3vw,32px);letter-spacing:.03em;line-height:1.1;
color:#b3924f}
.rt-rule{display:block;position:relative;margin:10px 0 clamp(13px,1.7vw,21px);
height:1px;width:clamp(130px,14vw,180px);
background:linear-gradient(90deg,rgba(179,146,79,.75),rgba(179,146,79,.95) 45%,rgba(179,146,79,.25))}
.rt-rule::before,.rt-rule::after{content:"";position:absolute;top:50%;width:6px;height:6px;
border-radius:50%;background:#b3924f;transform:translateY(-50%)}
.rt-rule::before{left:-1px}
.rt-rule::after{right:-1px}
.rtype h2{margin:0;font-family:var(--serif-b);font-weight:700;color:var(--navy);
font-size:clamp(25px,3.4vw,42px);letter-spacing:.07em;line-height:1.32}
.rt-lead{margin:clamp(14px,1.9vw,23px) 0 clamp(19px,2.5vw,30px);
padding-left:clamp(13px,1.4vw,20px);border-left:2px solid rgba(179,146,79,.8);
font-family:var(--serif);color:var(--ink);letter-spacing:.04em;
font-size:clamp(13.5px,1.1vw,16px);line-height:1.95}
.rt-tbl{border:1px solid rgba(179,146,79,.5);border-radius:13px;overflow:hidden;
background:#fffdf8;box-shadow:0 10px 32px rgba(12,31,49,.07)}
.rt-row{display:grid;grid-template-columns:clamp(138px,18vw,212px) minmax(0,1fr);align-items:stretch}
.rt-row+.rt-row{border-top:1px solid rgba(179,146,79,.38)}
.rt-k{display:grid;grid-template-columns:clamp(48px,5.2vw,70px) 1fr;align-items:center;
background:linear-gradient(155deg,#152b41 0%,#0b1d2d 100%);
color:var(--gold-l);font-family:var(--serif-b);font-weight:600;
font-size:clamp(12.5px,1.02vw,15px);letter-spacing:.14em}
.rt-k>i{display:flex;align-items:center;justify-content:center;align-self:stretch;
border-right:1px solid rgba(214,178,110,.26)}
.rt-k>i img{width:clamp(21px,2vw,28px);height:auto}
.rt-k>span{padding:clamp(11px,1.35vw,17px) clamp(7px,1vw,14px)}
.rt-v{display:flex;align-items:center;flex-wrap:wrap;min-width:0;overflow-wrap:anywhere;
padding:clamp(11px,1.35vw,17px) clamp(13px,1.6vw,22px);
font-family:var(--serif);color:var(--navy);letter-spacing:.045em;line-height:1.7;
font-size:clamp(13.5px,1.12vw,16.5px)}
.rt-v small{font-size:.78em;color:var(--mute);letter-spacing:.02em}
.rt-note{display:flex;align-items:center;gap:10px;margin:clamp(11px,1.4vw,16px) 0 0;
font-family:var(--serif);color:var(--mute);letter-spacing:.05em;
font-size:clamp(12px,.98vw,13.5px)}
.rt-note img{width:clamp(17px,1.5vw,21px);height:auto;flex:none}
@media(max-width:980px){
.rtype{grid-template-columns:minmax(0,1fr);
grid-template-areas:"type" "rule" "h2" "lead" "ph" "tbl" "note";
row-gap:0}
.rt-ph{justify-self:stretch;margin:0 0 clamp(24px,3.2vw,38px)}
}
@media(max-width:780px){
.rtype::before{width:min(60vw,300px);top:-12px}
.rt-row{grid-template-columns:minmax(104px,30vw) minmax(0,1fr)}
.rt-k{grid-template-columns:46px 1fr;font-size:12.5px;letter-spacing:.1em}
.rt-k>i img{width:21px}
.rt-k>span{padding:12px 8px}
.rt-v{padding:12px 13px;font-size:14px}
.rt-lead br.sp-br{display:none}
}
/* == 客室タイプ ここまで == */
/* == スマホ優先の調整＋CTAのひかるアニメーション == */
/* --------------------------------------------------------------------------
1. 日本語の改行を自然な位置に
「〜しま／す。」「くださ／い。」のように語の途中で2段になるのを防ぎます。
対応していないブラウザでは、これまでどおりの改行になります（害はありません）。
-------------------------------------------------------------------------- */
html{overflow-x:clip} /* 飾り文字が画面外に出ても横スクロールしません */
body{
line-break:strict; /* 句読点・小さい「っ」などの行頭禁止を厳密に */
word-break:auto-phrase; /* 文節（意味のまとまり）で改行します */
}
/* 見出しは2段の長さがそろうように */
h1,h2,h3,h4,
.rm-head h2,.shead h2,.card h3,.ofc-b h3,.ofn b,
.cp3-card h3,.eqs-card h3,.acx-h h3,.sb-h,.mv-in,.rt-h2{
text-wrap:balance;
}
/* 本文は最後の行に1文字だけ残らないように */
p,li,dd,td,
.qa-t,.qa-a p,.rt-v,.rt-lead,.acx-seg,.acx-note,.ofc-b p,.ofn>div>span,
.eqs-card p,.cp3-card p,.card p,.shead p,.crs-d,.crs-n,.p-note,.note,.sub,.small{
text-wrap:pretty;
}
/* … で包んだ語は途中で切れません（アメニティの一覧など） */
.ofn i,.rt-v i,.qa-t i{font-style:normal;white-space:nowrap}
/*
… スマホのときだけ改行します（見出しの折り返し位置の調整用） */
.spbr{display:none}
@media(max-width:640px){.spbr{display:inline}}
/* 金額・電話番号・時刻は途中で折り返さない */
.pr,.p-price,.tel-num,.sb-v,.rt-v time,.acx-t{white-space:nowrap}
/* --------------------------------------------------------------------------
2. 背景の飾り文字（うっすら大きい英語）がスマホで画面からはみ出さないように
-------------------------------------------------------------------------- */
@media(max-width:640px){
.shead>.wm{font-size:clamp(48px,16.5vw,92px)}
.rm-head>.wm{font-size:clamp(46px,16vw,88px)}
.news-sec .shead>.wm{font-size:16.5vw}
.feature>.wm{font-size:clamp(44px,13vw,72px)}
}
/* --------------------------------------------------------------------------
3. スマホでの文字サイズ（小さすぎたところを読みやすく）
-------------------------------------------------------------------------- */
@media(max-width:640px){
.ofc-b p,.ofn>div>span{font-size:13px}
.ofc-b p.sub,.ofn>div>span.sub{font-size:12px}
.eqs-card p,.cp3-card p{font-size:13px}
.acx-note,.p-note,.note{font-size:12px;line-height:1.95}
.card .meta{font-size:12px}
.crumb{font-size:11.5px}
}
@media(max-width:400px){
/* コースのキャッチコピーが2段にならないように少しだけ小さく */
.crs-sub{font-size:12px;letter-spacing:.02em}
}
/* --------------------------------------------------------------------------
3-2. 見出しの字間をスマホだけ詰めます
（パソコン用の広い字間のままだと、あと数ピクセルで2段になってしまうため）
-------------------------------------------------------------------------- */
@media(max-width:640px){
.rm-head h2{letter-spacing:.07em}
.shead h2{letter-spacing:.06em}
.news-sec .shead h2{letter-spacing:.07em}
.reason-sec .shead h2{letter-spacing:.05em}
.cta h2{font-size:20px;letter-spacing:.045em}
.qa .qt{letter-spacing:.02em}
}
@media(max-width:380px){
.rm-head h2,.shead h2{letter-spacing:.03em;font-size:21px}
.cta h2{font-size:18.5px;letter-spacing:.02em}
.qa .qt{font-size:13px;letter-spacing:0}
}
/* --------------------------------------------------------------------------
4. スマホで整列が崩れていたところ
-------------------------------------------------------------------------- */
@media(max-width:640px){
/* 地図の下の住所と「Googleマップで開く」を縦に並べます */
.gmap+.note{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.gmap-link{margin-left:0}
/* 宿情報の表：項目名の列を少し広げて2段になるのを防ぎます */
.tbl th{width:74px;padding:12px 8px;letter-spacing:.02em}
.tbl td{padding:12px 8px}
}
@media(max-width:620px){
/* 次のページへの案内カード
── スマホでもパソコンと同じ「文字が左・丸い矢印が右」の形のまま、
文字と矢印だけを小さくして1枚に収めます。
高さを変えたいときは padding と .rm-round の大きさが効きます */
.rm-cta{flex-direction:row;text-align:left;align-items:center;
gap:10px;padding:13px 14px;border-radius:14px;margin-top:clamp(16px,2vw,24px)}
.rm-cta small{font-size:10.5px;letter-spacing:.04em}
.rm-cta strong{margin-top:3px;font-size:15px;letter-spacing:.05em;white-space:nowrap}
.rm-round{width:38px}
.rm-round svg{width:36%}
}
@media(max-width:345px){
/* 画面の狭い機種（iPhone SEなど）でも、案内カードの見出しが1行に収まるように */
.rm-cta{gap:8px;padding:12px}
.rm-cta small{font-size:10px;letter-spacing:.02em}
.rm-cta strong{font-size:13.5px;letter-spacing:.02em}
.rm-round{width:33px}
}
/* --------------------------------------------------------------------------
6. ページ下のCTA（紺の予約パネル＋生成りの電話パネル）を小さく
横に2枚並ばなくなる幅（860px以下）で、縦・横ともコンパクトにします。
・横幅 … .cta-panels の max-width
・高さ … .cp の padding と、下の各文字サイズ
・電話番号 … .cp-num の 21px
-------------------------------------------------------------------------- */
@media(max-width:860px){
.cta-panels{max-width:400px;gap:8px;margin-top:10px}
.cp{padding:14px 13px 15px;border-radius:9px}
/* アイコンを文字の上ではなく左に置き、説明文も1行にして背を低くします */
.cp-lead{flex-direction:row;text-align:left;gap:9px}
.cp-ic{width:22px}
.cta .cp-lead p{font-size:11px;line-height:1.55}
.cta .cp-lead p br,.cta .cp-ivory p br{display:none}
.btn-gold{margin-top:17px;padding:9px 10px;font-size:11.5px;gap:9px;border-radius:5px}
.btn-gold svg{width:10px}
.cta .cp-ivory p{font-size:11px;line-height:1.55}
.cp-div{margin:10px 0}
.cp-div svg{width:11px;margin:0 8px}
.cp-tel{gap:8px}
.cp-ph{width:16px}
.cp-num{font-size:clamp(15px,6.4cqw,20px)}
}
@media(max-width:430px){
/* 画面が狭いときは、説明文の折り返しを許します（2行になります） */
.cta .cp-lead p{white-space:normal}
.cta .cp-lead p br,.cta .cp-ivory p br{display:inline}
.cta .cp-lead p,.cta .cp-ivory p{font-size:10.5px}
}
/* --------------------------------------------------------------------------
7. アクセスのルート図：いちばん下の「宿（ロゴ）」のカードを小さく
横に並ばなくなる幅（900px以下）で、幅・高さとも半分ほどにします。
・横幅 … max-width
・高さ … padding と .acx-dest img の width
-------------------------------------------------------------------------- */
@media(max-width:900px){
.acx-dest{max-width:360px;margin:4px auto 0;border-width:1.5px;border-radius:12px;
padding:14px 16px 26px}
.acx-dest img{width:min(72%,230px)}
}
@media(max-width:400px){
.acx-dest{max-width:100%;padding:12px 14px 22px}
.acx-dest img{width:min(80%,210px)}
}
/* --------------------------------------------------------------------------
スマホのときだけ、改行をやめて1行にしたいところ
HTML側で
と書いた改行が対象です。
（例：トップの「紀伊水道の豊かな漁場から」）
-------------------------------------------------------------------------- */
@media(max-width:640px){
br.sp-nobr{display:none}
}
/* == スマホ優先の調整 ここまで == */
/* == スマホ下部の固定CTA（カード2枚） == */
/* --------------------------------------------------------------------------
画面の下にいつも出ている「電話する／空室・ご予約」の2枚のカードです。
・出る幅 … いちばん下の @media(max-width:640px)
・カードの色 … .mc-tel（紺）と .mc-resv（金）の background
・金の細い枠 … .mcta .mc::before の border
・文字の大きさ … .mc-t b（見出し）と .mc-t i（小さい説明）
・文言 … HTMLの中の文字と、main.js の mcta_tel_s / mcta_resv_s
-------------------------------------------------------------------------- */
.mcta{display:none}
@media(max-width:640px){
.mcta{
display:flex;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:80;
padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
/* 下地は透明です。うっすら敷きたいときは下の1行の頭の / * を外してください
background:linear-gradient(180deg,rgba(250,247,241,0),rgba(250,247,241,.9) 46%); */
}
.mcta .mc{
flex:1 1 0;min-width:0;display:flex;align-items:center;gap:7px;
padding:8px 9px;border-radius:11px;position:relative;overflow:hidden;
text-decoration:none;text-align:left;line-height:1;
box-shadow:0 6px 18px rgba(12,31,49,.24);
}
/* カードの内側に細い枠を1本 */
.mcta .mc::before{content:"";position:absolute;inset:3px;border-radius:8px;
border:1px solid rgba(214,178,110,.55);pointer-events:none;z-index:2}
.mc-tel{background:linear-gradient(180deg,#17324f,#0d2237)}
.mc-resv{background:linear-gradient(180deg,#d2b070,#bd9a52)}
.mc-resv::before{border-color:rgba(255,255,255,.5)}
/* 丸いアイコン */
.mc-ico{flex:none;width:26px;height:26px;border-radius:50%;z-index:3;
display:flex;align-items:center;justify-content:center;
border:1px solid rgba(214,178,110,.85)}
.mc-resv .mc-ico{border-color:rgba(255,255,255,.7)}
.mc-ico svg{width:54%;height:auto;fill:none;stroke:#dcbd77;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.mc-tel .mc-ico svg path{fill:#dcbd77;stroke:none}
.mc-resv .mc-ico svg{stroke:#fff}
.mc-ico svg .dot{fill:#dcbd77;stroke:none}
.mc-resv .mc-ico svg .dot{fill:#fff}
/* 文字 */
.mc-t{flex:1 1 auto;min-width:0;z-index:3}
.mc-t b{display:block;font-family:var(--serif-b);font-weight:600;color:#fff;
font-size:13px;letter-spacing:.05em;white-space:nowrap}
.mc-t i{display:block;margin-top:4px;font-style:normal;font-family:var(--serif-m);
font-weight:500;font-size:9.5px;letter-spacing:.01em;white-space:nowrap;
overflow:hidden;text-overflow:ellipsis}
.mc-tel .mc-t i{color:rgba(228,203,155,.95)}
.mc-resv .mc-t i{color:rgba(255,255,255,.9)}
/* 右の矢印 */
.mc-ar{flex:none;width:7px;height:auto;z-index:3;margin-right:1px;
fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.mc-tel .mc-ar{stroke:#dcbd77}
.mc-resv .mc-ar{stroke:#fff}
/* 日本語以外は文字数が多いので、少し小さくします */
html:not([lang="ja"]) .mc-t b{font-size:11.5px;letter-spacing:.01em}
html:not([lang="ja"]) .mc-t i{font-size:8.5px}
/* 固定バーのぶん、本文の下に余白をとります */
body{padding-bottom:66px}
}
/* 画面の狭い機種（iPhone SEなど） */
@media(max-width:359px){
.mcta{gap:7px;padding-left:8px;padding-right:8px}
.mcta .mc{gap:6px;padding:7px}
.mc-ico{width:23px;height:23px}
.mc-t b{font-size:12px;letter-spacing:.02em}
.mc-t i{font-size:9px;margin-top:3px}
.mc-ar{width:6px}
}
/* 押したときの手ごたえ */
.mcta .mc{transition:transform .2s var(--ez),box-shadow .2s var(--ez)}
.mcta .mc:active{transform:translateY(1px);box-shadow:0 3px 10px rgba(12,31,49,.26)}
/* == スマホ下部の固定CTA ここまで == */
/* == フッター（アイコン付き＋開閉メニュー） == */
/* --------------------------------------------------------------------------
・住所・電話・メールの前の金のアイコン … .f-i svg
・Stay / Guide の見出し … .f-tg span
・スマホの開閉 … 見出しを押すと閉じます（main.js の .f-tg）
・パソコンでは開閉しません（3列のまま）
-------------------------------------------------------------------------- */
.f-info{list-style:none;margin:20px 0 0;padding:0}
.f-info li{display:flex;align-items:flex-start;gap:11px;margin-top:11px}
.f-info li:first-child{margin-top:0}
.f-i{flex:none;width:19px;height:19px;margin-top:2px;display:flex;align-items:center;justify-content:center}
.f-i svg{width:100%;height:100%;fill:none;stroke:var(--gold);stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.f-i svg .dot{fill:var(--gold);stroke:none}
.f-v{font-size:12.5px;line-height:1.85;color:rgba(255,255,255,.72)}
.f-v a{color:inherit}
.f-v a:hover{color:#fff}
.f-v em{font-style:normal;opacity:.45;margin:0 .35em}
.f-logo .sns{margin-top:18px;display:flex;align-items:center;gap:0;flex-wrap:wrap}
.f-logo .sns a{display:inline-flex;align-items:center;gap:7px;border:0;padding:0 13px}
.f-logo .sns a:first-child{padding-left:0}
.f-logo .sns a+a{border-left:1px solid rgba(255,255,255,.17)}
.f-logo .sns a svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6}
.f-logo .sns a svg .dot{fill:currentColor;stroke:none}
.f-logo .sns a span{border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:3px}
.f-logo .sns a:hover span{border-color:var(--gold)}
.f-col h4{margin:0 0 10px}
.f-tg{display:block;width:100%;padding:0;background:none;border:0;text-align:left;
color:var(--gold-l);font-family:var(--en);font-size:15px;letter-spacing:.16em;
font-weight:600;cursor:default}
.f-ch{display:none}
.f-col a{display:flex;align-items:center;justify-content:space-between;gap:10px}
.f-ar{display:none}
/* ---------------- スマホ ---------------- */
@media(max-width:640px){
footer{padding-left:20px;padding-right:20px}
.f-top{gap:0}
.f-logo .f-mark{height:46px}
.f-info{margin-top:22px}
.f-info li{gap:13px;margin-top:15px}
.f-i{width:21px;height:21px}
.f-v{font-size:13.5px;line-height:1.8}
.f-logo .sns{margin-top:20px;font-size:13px}
.f-col{margin-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.f-col+.f-col{margin-top:0}
.f-col h4{margin:0}
.f-tg{display:flex;align-items:center;justify-content:space-between;
padding:17px 2px;font-size:16px;cursor:pointer}
.f-ch{display:block;width:13px;height:auto;flex:none;fill:none;
stroke:rgba(255,255,255,.55);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
transition:transform .3s var(--ez)}
.f-tg[aria-expanded="false"] .f-ch{transform:rotate(180deg)}
/* 開閉のなめらかな動き（0fr〜1fr で高さを出し入れします） */
.f-links{display:grid;grid-template-rows:1fr;transition:grid-template-rows .34s var(--ez)}
.f-list{min-height:0;overflow:hidden}
.f-col.closed .f-links{grid-template-rows:0fr}
.f-col a{padding:15px 2px;font-size:14.5px;color:rgba(255,255,255,.85);
border-top:1px solid rgba(255,255,255,.09)}
.f-col a:hover{padding-left:2px;color:#fff}
.f-list>a:last-child{border-bottom:1px solid rgba(255,255,255,.09)}
.f-ar{display:block;width:7px;height:auto;flex:none;fill:none;
stroke:rgba(255,255,255,.5);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.f-bot{margin-top:28px;font-size:10.5px;line-height:1.9}
}
/* == フッター ここまで == */
/* == ペット一棟貸しページ == */
/* --------------------------------------------------------------------------
・上の紹介バナー … .pet-hero
・丸い「New!」の印 … .ph-badge（文字は pet.html の中）
・3つの特長 … .pf（アイコンは repl_pet.py の FEATS）
・写真 … .pg（枚数・順番は repl_pet.py の GALLERY）
-------------------------------------------------------------------------- */
.pet-hero{position:relative;overflow:hidden;
padding:clamp(38px,4.6vw,70px) clamp(20px,5vw,60px) clamp(44px,5.4vw,78px);
background:#fdfcf9 url("assets/images/pet-hero-bg.jpg") no-repeat right center/cover}
.pet-hero>.inner{position:relative;z-index:2}
/* 文字を置く側をさらに白くぼかします（写真の明るさが変わったとき用） */
.pet-hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(100deg,rgba(255,253,249,.72) 18%,rgba(255,253,249,.34) 42%,
rgba(255,253,249,0) 62%)}
/* 左半分に文字・特長・ボタンをまとめます */
.ph-col{max-width:min(58%,660px)}
.ph-eyebrow{display:block;font-family:var(--serif-b);font-weight:600;color:var(--navy);
font-size:clamp(12.5px,1.15vw,15.5px);letter-spacing:.09em;
padding-bottom:clamp(10px,1.2vw,15px);border-bottom:1px solid rgba(179,146,79,.6)}
.pet-hero h2{margin:clamp(15px,1.9vw,26px) 0 0;font-family:var(--serif-b);font-weight:700;
color:var(--navy);line-height:1.35;letter-spacing:.06em;
font-size:clamp(27px,4vw,52px)}
.ph-lead{margin:clamp(15px,1.8vw,24px) 0 0;font-family:var(--serif-b);font-weight:600;
color:var(--ink);line-height:2.05;letter-spacing:.03em;
font-size:clamp(12.5px,1.12vw,15px)}
/* --- 丸い「New!」の印（右上） --- */
.ph-badge{position:absolute;z-index:3;right:clamp(14px,3vw,52px);top:clamp(14px,2.6vw,42px);
width:clamp(96px,11.5vw,166px);aspect-ratio:1;border-radius:50%;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
background:radial-gradient(circle at 50% 34%,#fffdf7,#f7efdd);
border:1px solid rgba(179,146,79,.55);
box-shadow:0 0 0 4px #fff,0 10px 26px rgba(12,31,49,.18);text-align:center}
/* 「New!」の字体
背景のうっすら大きい飾り文字（Information / Gallery など）と同じ
筆記体（Great Vibes）です。変えるなら下の font-family を書き換えてください */
.ph-badge .en{font-family:"WmScript","Great Vibes",cursive;font-style:normal;
color:var(--gold);font-size:clamp(17px,2.3vw,33px);line-height:1.42;letter-spacing:.01em;
margin-top:-.12em}
.ph-badge b{font-family:var(--serif-b);font-weight:600;color:var(--navy);
font-size:clamp(8.5px,.88vw,12.5px);letter-spacing:.04em;margin-top:2px}
.ph-badge strong{font-family:var(--serif-b);font-weight:700;color:var(--navy);
font-size:clamp(14px,1.6vw,23px);letter-spacing:.06em;line-height:1.2}
.ph-badge .paw{display:block;width:clamp(13px,1.5vw,22px);margin-top:3px}
.ph-badge .paw svg{width:100%;height:auto;fill:#8a6f3c}
/* --- ポラロイド風の小さい写真（右下） --- */
.ph-snap{position:absolute;z-index:3;display:block;background:#fff;padding:7px;
border-radius:3px;box-shadow:0 10px 26px rgba(12,31,49,.24);line-height:0}
.ph-snap img{width:100%;height:100%;object-fit:cover;display:block;
aspect-ratio:1/1;border-radius:2px}
.ph-snap.a{width:clamp(96px,13vw,190px);right:clamp(96px,13.5vw,206px);
bottom:clamp(16px,2.4vw,40px);transform:rotate(-5deg)}
.ph-snap.b{width:clamp(92px,12.4vw,182px);right:clamp(12px,2vw,32px);
bottom:clamp(10px,1.6vw,28px);transform:rotate(4deg)}
/* --- 3つの特長 --- */
.pf-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
margin-top:clamp(26px,3.4vw,48px);background:rgba(255,253,249,.94);border-radius:13px;
border:1px solid rgba(179,146,79,.3);box-shadow:0 10px 30px rgba(12,31,49,.08);
overflow:hidden;backdrop-filter:blur(3px)}
.pf{text-align:center;padding:clamp(14px,1.8vw,26px) clamp(8px,1.1vw,16px)}
.pf+.pf{border-left:1px solid rgba(179,146,79,.24)}
.pf-ic{display:block;width:clamp(26px,2.6vw,38px);margin:0 auto clamp(7px,.9vw,12px)}
.pf-ic svg{width:100%;height:auto;fill:#7b6234;color:#7b6234}
.pf b{display:block;font-family:var(--serif-b);font-weight:700;color:var(--navy);
font-size:clamp(12px,1.2vw,16px);letter-spacing:.05em;line-height:1.5}
/* ↓ .pf span と書くと丸アイコン（.pf-ic）にも当たるので、b のうしろの span だけに当てます */
.pf b+span{display:block;margin-top:clamp(4px,.6vw,8px);font-family:var(--serif-b);
font-weight:600;color:var(--sub);line-height:1.8;
font-size:clamp(10.5px,.92vw,12.5px);letter-spacing:.02em}
/* 横に並ぶときは、見出しが1行でも2行でも下の説明の位置がそろうように
2行分の高さを確保します（line-height 1.5 × 2行 ＝ 3em）*/
@media(min-width:621px){
.pf b{min-height:3em}
}
/* --- 下の紺のボタン --- */
.pet-cta{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.2vw,16px);
margin-top:clamp(12px,1.5vw,20px);padding:clamp(14px,1.6vw,21px) clamp(18px,2.4vw,34px);
border-radius:6px;background:linear-gradient(180deg,#1a3a5c,#122942);
color:#fff;font-family:var(--serif-b);font-weight:600;
font-size:clamp(13.5px,1.35vw,18px);letter-spacing:.1em;text-align:center;
box-shadow:0 10px 26px rgba(12,31,49,.2);transition:filter .35s,transform .35s var(--ez)}
.pet-cta:hover{color:#fff;filter:brightness(1.12);transform:translateY(-2px)}
.pet-cta svg{width:clamp(11px,1.05vw,14px);height:auto;flex:none;
fill:none;stroke:var(--gold-l);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
transition:transform .35s var(--ez)}
.pet-cta:hover svg{transform:translateX(4px)}
/* --- 写真の一覧 --- */
.pet-gal{padding:clamp(44px,5.4vw,78px) clamp(20px,5vw,60px) clamp(50px,6vw,86px)}
.pg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(10px,1.3vw,18px);margin-top:clamp(22px,2.8vw,38px)}
.pg-item{margin:0;background:#fff;border-radius:11px;overflow:hidden;
border:1px solid rgba(12,31,49,.08);box-shadow:0 8px 24px rgba(12,31,49,.07)}
.pg-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
transition:transform 1.3s var(--ez)}
.pg-item:hover img{transform:scale(1.04)}
.pg-item figcaption{padding:clamp(9px,1.1vw,14px) 10px;text-align:center;
font-family:var(--serif-b);font-weight:600;color:var(--navy);
font-size:clamp(11.5px,1vw,13.5px);letter-spacing:.04em}
/* --- ご利用について --- */
/* 下の余白（質問パートとのすき間）は、この3つめの数字で調整できます */
.pet-info{padding:clamp(44px,5.4vw,78px) clamp(20px,5vw,60px) clamp(40px,4.8vw,68px)}
.pinfo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(12px,1.6vw,22px);max-width:900px;margin:clamp(22px,2.8vw,36px) auto 0}
.pinfo-it{display:flex;align-items:center;gap:clamp(13px,1.6vw,20px);
background:#fffdf8;border:1px solid rgba(179,146,79,.36);border-radius:13px;
padding:clamp(17px,2vw,26px) clamp(16px,1.9vw,26px);
box-shadow:0 8px 24px rgba(12,31,49,.06)}
.pinfo-ic{flex:none;width:clamp(44px,4vw,56px);height:clamp(44px,4vw,56px);border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(155deg,#162c43,#0a1c2b);
border:1.5px solid rgba(214,178,110,.7);box-shadow:0 4px 12px rgba(12,31,49,.2)}
.pinfo-ic svg{width:52%;height:auto;fill:#e6c88c}
.pinfo-it b{display:block;font-family:var(--serif-b);font-weight:700;color:var(--navy);
font-size:clamp(15px,1.4vw,19px);letter-spacing:.06em;margin-bottom:6px}
/* ↓ .pinfo-it span と書くと丸アイコン（.pinfo-ic）にも当たってしまい、
アイコンが中心からずれます。かならず >div>span で文字だけに当てます */
.pinfo-it>div>span{display:block;font-family:var(--serif-b);font-weight:600;color:var(--ink);
font-size:clamp(12.5px,1.05vw,14.5px);line-height:1.9;letter-spacing:.02em}
.pinfo-it em{font-style:normal;font-family:var(--serif-b);/*fw*/font-weight:700;color:var(--gold)}
@media(max-width:700px){
.pinfo{grid-template-columns:minmax(0,1fr)}
}
/* --- ご相談 --- */
.pet-ct{padding:clamp(44px,5.4vw,78px) clamp(20px,5vw,60px) clamp(50px,6vw,86px)}
.shead-p{margin-top:clamp(14px,1.7vw,22px);text-align:center;font-family:var(--serif-b);
font-weight:600;color:var(--ink);line-height:2.05;letter-spacing:.03em;
font-size:clamp(12.5px,1.12vw,15.5px)}
.pct-box{max-width:520px;margin:clamp(18px,2.2vw,30px) auto 0;text-align:center;
background:#faf7f1;border:1px solid rgba(179,146,79,.6);border-radius:12px;
padding:clamp(18px,2.2vw,30px) clamp(16px,2vw,28px)}
.pct-tel{display:inline-flex;align-items:center;gap:clamp(10px,1.3vw,17px);
color:var(--navy);transition:opacity .3s}
.pct-tel:hover{opacity:.78;color:var(--navy)}
.pct-ic{flex:none;width:clamp(24px,2.4vw,32px)}
.pct-ic svg{width:100%;height:auto;fill:var(--navy)}
.pct-t{text-align:left;line-height:1.2}
.pct-t small{display:block;font-family:var(--serif-b);font-weight:600;color:var(--sub);
font-size:clamp(10.5px,.95vw,12.5px);letter-spacing:.08em}
.pct-t b{display:block;margin-top:3px;font-family:var(--serif-b);font-weight:700;
color:var(--navy);letter-spacing:.02em;font-size:clamp(23px,3vw,38px);white-space:nowrap}
.pct-note{display:block;margin-top:clamp(8px,1vw,13px);font-family:var(--serif-b);
font-weight:600;color:var(--sub);font-size:clamp(11px,.95vw,12.5px);letter-spacing:.06em}
/* ---------------- タブレット・スマホ ---------------- */
@media(max-width:1100px){
.ph-col{max-width:min(64%,600px)}
}
@media(max-width:900px){
/* タブレット：文字の幅を広げ、丸い印とポラロイドを少し小さく */
.ph-col{max-width:min(70%,560px)}
.pet-hero::before{background:linear-gradient(100deg,
rgba(255,253,249,.9) 14%,rgba(255,253,249,.55) 40%,rgba(255,253,249,0) 64%)}
.ph-badge{width:clamp(104px,14vw,132px)}
.ph-snap.a{width:clamp(92px,13vw,124px);right:clamp(94px,13.6vw,132px)}
.ph-snap.b{width:clamp(88px,12.4vw,118px)}
.pf b{font-size:clamp(12px,1.7vw,15px)}
.pf b+span{font-size:clamp(10.5px,1.35vw,12px)}
.pg{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
/* 写真は上半分だけに置き、文字は写真の白くぼけた側に重ねます。
写真の見える高さを変えたいときは background-size の 138% の数字を変えてください */
.pet-hero{
display:grid;grid-template-columns:1fr 1fr;
column-gap:clamp(7px,2vw,12px);row-gap:clamp(18px,4.5vw,34px);align-items:start;
padding:clamp(30px,7vw,50px) clamp(18px,5vw,34px) clamp(26px,6vw,44px);
background-image:url("assets/images/pet-hero-bg-sp.jpg");
/* 写真の見える高さ。数字を変えると写真の見える量が変わります */
background-size:auto clamp(460px,125vw,560px);background-position:right top}
/* 文字側をさらに白く。写真の下側は画像そのものがクリーム色になじむよう加工済みです */
.pet-hero::before{background:linear-gradient(96deg,
rgba(253,252,249,.94) 0%,rgba(253,252,249,.74) 26%,
rgba(253,252,249,.26) 50%,rgba(253,252,249,0) 68%)}
.pet-hero>.inner{grid-column:1/-1;order:1;max-width:none}
.ph-col{max-width:100%}
/* ポラロイド風の写真は、ボタンの下に2枚ならべます。
大きさを変えたいときは、下の margin（左右のはみ出し量）と
.ph-snap img の aspect-ratio が効きます */
.ph-snap{position:static;order:2;width:auto;padding:clamp(8px,2.4vw,11px);
box-shadow:0 10px 26px rgba(12,31,49,.22)}
.ph-snap.a{width:auto;right:auto;bottom:auto;justify-self:stretch;transform:rotate(-2.6deg);
margin-left:calc(-1 * clamp(10px,3.2vw,22px))}
.ph-snap.b{width:auto;right:auto;bottom:auto;justify-self:stretch;transform:rotate(2.2deg);
margin-right:calc(-1 * clamp(10px,3.2vw,22px))}
.ph-snap img{aspect-ratio:1/1}
.ph-badge{width:clamp(112px,25vw,150px);
top:clamp(12px,3vw,26px);right:clamp(12px,3.6vw,30px)}
.ph-badge .en{font-size:clamp(20px,4.6vw,28px);line-height:1.5;margin-top:.04em}
.ph-badge b{font-size:clamp(10px,2.2vw,13px)}
.ph-badge strong{font-size:clamp(17px,3.9vw,23px)}
.ph-badge .paw{width:clamp(15px,3.4vw,20px)}
.pet-hero h2{font-size:clamp(29px,7.6vw,40px);line-height:1.42}
.ph-lead{font-size:clamp(13px,3.4vw,15.5px);line-height:1.95}
.ph-eyebrow{font-size:clamp(13px,3.4vw,15.5px)}
}
@media(max-width:620px){
/* 3つの特長：アイコンを左、見出しと説明を右に */
.pf-row{grid-template-columns:minmax(0,1fr);border-radius:18px;
padding:0 clamp(16px,4.6vw,22px);margin-top:clamp(22px,5.5vw,34px)}
.pf+.pf{border-left:0;border-top:1px solid rgba(179,146,79,.26)}
.pf{display:grid;grid-template-columns:clamp(44px,12vw,54px) minmax(0,1fr);
align-items:center;gap:5px clamp(12px,3.4vw,18px);text-align:left;
padding:clamp(17px,4.4vw,24px) 0}
.pf-ic{width:clamp(34px,9vw,42px);margin:0;grid-row:1/span 2}
.pf b{min-height:0;font-size:clamp(15.5px,4.2vw,18px);letter-spacing:.03em}
.pf b+span{margin-top:3px;font-size:clamp(12.5px,3.3vw,14px);line-height:1.75}
.pf b+span br{display:inline}
.pet-cta{margin-top:clamp(14px,3.6vw,20px);border-radius:10px;
padding:clamp(16px,4.4vw,22px) 14px;font-size:clamp(14px,4vw,18px);letter-spacing:.05em}
.pet-cta svg{width:11px}
/* 丸い印にかからないように、見出しの上の一文の右をあけます
（金の線もそこで止まります） */
.ph-eyebrow{padding-right:clamp(100px,30vw,168px)}
}
@media(max-width:360px){
/* 画面の狭い機種 */
.ph-badge{width:86px;top:8px;right:8px}
.ph-badge .en{font-size:13.5px}
.ph-badge b{font-size:9px}
.ph-badge strong{font-size:14px}
.ph-badge .paw{width:13px}
.ph-eyebrow{font-size:12px;padding-right:92px}
.pet-hero h2{font-size:26px}
.ph-lead{font-size:12.5px}
.pet-cta{font-size:13px;letter-spacing:.02em;padding:15px 10px}
.pf b{font-size:14.5px}
.pf b+span{font-size:12px}
}
/* == ペット一棟貸し ここまで == */
/* == ペット一棟貸しへの案内バナー == */
/* --------------------------------------------------------------------------
トップページの客室カードの下と、客室・館内ページの TYPE 03 のうしろに出る
「ペットと泊まれる一棟貸し」への案内です。
・写真 … .petbn-ph img（repl_petbn.py の BN で差し替え）
・New! の印 … .petbn-tag
・色 … .petbn の background と border
-------------------------------------------------------------------------- */
.petbn-sec{padding:0 clamp(20px,5vw,60px) clamp(44px,5.4vw,74px)}
.petbn{position:relative;display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
align-items:stretch;gap:0;overflow:hidden;
margin-top:clamp(26px,3.4vw,44px);border-radius:16px;
background:linear-gradient(160deg,#fffdf9,#f8f1e4);
border:1px solid rgba(179,146,79,.42);
box-shadow:0 12px 34px rgba(12,31,49,.09);
transition:box-shadow .4s var(--ez),transform .4s var(--ez)}
.petbn:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(12,31,49,.14)}
.petbn-ph{position:relative;display:block;line-height:0;overflow:hidden}
.petbn-ph>img{width:100%;height:100%;object-fit:cover;min-height:clamp(180px,20vw,270px);
transition:transform 1.4s var(--ez)}
.petbn:hover .petbn-ph>img{transform:scale(1.05)}
/* 右下に小さくわんちゃんの写真 */
.petbn-ph img.petbn-seal{position:absolute;left:4.5%;top:6%;z-index:3;
width:clamp(56px,23%,124px);height:auto;min-height:0;object-fit:contain;
transform:none !important;pointer-events:none;
filter:drop-shadow(0 3px 9px rgba(6,16,26,.32))}
.petbn-snap{position:absolute;right:clamp(10px,1.3vw,20px);bottom:clamp(10px,1.4vw,20px);
width:clamp(64px,7.4vw,104px);background:#fff;padding:5px;border-radius:3px;
box-shadow:0 8px 20px rgba(12,31,49,.24);transform:rotate(-4deg);line-height:0;z-index:2}
.petbn-snap img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;border-radius:2px}
.petbn-b{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
padding:clamp(20px,2.6vw,38px) clamp(18px,2.6vw,40px)}
/* 「─ NEW! 🐾 ─」の横長ラベル
・二重の枠 … .petbn-tag の border と ::before の border
・両側の短い線 … .petbn-tag .ln の width
・文字 … .petbn-tag .en（明朝系の英字・var(--en)） */
.petbn-tag{position:relative;display:inline-flex;align-items:center;
gap:clamp(9px,1vw,14px);
padding:clamp(9px,1vw,13px) clamp(16px,1.8vw,26px);border-radius:999px;
background:linear-gradient(180deg,#fffdf7,#f7f1e2);
border:1px solid rgba(179,146,79,.28);
box-shadow:0 3px 12px rgba(12,31,49,.07)}
.petbn-tag::before{content:"";position:absolute;inset:3px;border-radius:999px;
border:1px solid rgba(179,146,79,.6);pointer-events:none}
.petbn-tag .ln{display:block;width:clamp(16px,1.9vw,28px);height:1px;flex:none;
background:rgba(179,146,79,.8)}
.petbn-tag .en{font-family:var(--en),serif;font-style:normal;font-weight:500;
color:#c19a4e;font-size:clamp(19px,2vw,30px);line-height:1;letter-spacing:.1em;
text-indent:.1em}
.petbn-tag em{display:block;width:clamp(15px,1.4vw,21px);font-style:normal;flex:none}
.petbn-tag em svg{width:100%;height:auto;fill:#9a7c40;display:block}
.petbn b{display:block;margin-top:clamp(10px,1.3vw,17px);font-family:var(--serif-b);
font-weight:700;color:var(--navy);line-height:1.4;letter-spacing:.06em;
font-size:clamp(18px,2.1vw,29px)}
.petbn-t{display:block;margin-top:clamp(8px,1vw,14px);font-family:var(--serif-b);
font-weight:600;color:var(--ink);line-height:1.95;letter-spacing:.03em;
font-size:clamp(12.5px,1.05vw,14.5px)}
.petbn-go{display:inline-flex;align-items:center;gap:10px;
margin-top:clamp(14px,1.7vw,24px);padding:clamp(11px,1.2vw,15px) clamp(20px,2.2vw,32px);
border-radius:6px;background:linear-gradient(180deg,#1a3a5c,#122942);color:#fff;
font-family:var(--serif-b);font-weight:600;letter-spacing:.09em;white-space:nowrap;
font-size:clamp(12.5px,1.15vw,15.5px);box-shadow:0 8px 20px rgba(12,31,49,.18)}
.petbn-go svg{width:clamp(10px,.95vw,13px);height:auto;fill:none;stroke:var(--gold-l);
stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ez)}
.petbn:hover .petbn-go svg{transform:translateX(4px)}
/* トップページでは客室カードのすぐ下に入ります */
.room-sec .petbn{margin-top:clamp(22px,2.8vw,38px)}
/* --------------------------------------------------------------------------
この2つの紺のボタンだけ、光の帯が流れます
・「ページを見る」（案内バナー） … .petbn-go
・「一棟貸しのご相談」（ペットページ）… .pet-cta
間隔 … 3.6s（次に光るまでの時間）／ 通り抜ける速さ … 22% の数字（小さいほど速い）
光の強さ … rgba(255,255,255,.5) の .5
止めたいときは、下の @keyframes からこのブロックの終わりまでを消してください
-------------------------------------------------------------------------- */
/* 光の帯は、ボタンの外（左）から外（右）まで通り抜けます。
-170% ／ 430% は「帯じたいの幅」に対する割合です。
帯の幅（width:26%）を変えたときは、この2つの数字も見直してください */
@keyframes petShine{
0% {transform:translate3d(-170%,0,0) skewX(-18deg)} /* 通り始め（左の外） */
22% {transform:translate3d(430%,0,0) skewX(-18deg)} /* 通り終わり（右の外） */
100% {transform:translate3d(430%,0,0) skewX(-18deg)} /* つぎまで待機 */
}
.petbn-go,.pet-cta{position:relative;overflow:hidden}
.petbn-go::after,.pet-cta::after{
content:"";position:absolute;top:-40%;left:0;z-index:1;
width:26%;height:180%;pointer-events:none;
background:linear-gradient(90deg,
rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);
transform:translate3d(-170%,0,0) skewX(-18deg);
will-change:transform;backface-visibility:hidden;
animation:petShine 3.6s linear infinite}
.pet-cta::after{animation-delay:.6s}
/* マウスを乗せたときは速く・はっきり */
.petbn:hover .petbn-go::after,.pet-cta:hover::after{animation-duration:1.2s;animation-delay:0s}
/* 動きを減らす設定の方には出しません */
@media(prefers-reduced-motion:reduce){
.petbn-go::after,.pet-cta::after{display:none}
}
@media(max-width:760px){
.petbn{grid-template-columns:minmax(0,1fr)}
.petbn-ph>img{min-height:0;aspect-ratio:16/10}
.petbn-snap{width:clamp(74px,20vw,104px);right:clamp(12px,4vw,20px);bottom:clamp(12px,3.4vw,18px)}
.petbn-b{padding:clamp(22px,5.5vw,30px) clamp(18px,5vw,26px) clamp(20px,5vw,28px)}
.petbn b{font-size:clamp(19px,5.2vw,24px)}
.petbn-t{font-size:clamp(12.5px,3.4vw,14px)}
.petbn-go{width:100%;justify-content:center;padding:15px 14px;
font-size:clamp(13.5px,3.8vw,15.5px)}
}
/* == ペット一棟貸しへの案内バナー ここまで == */
/* == AIコンシェルジュのタブ 大きさ・文字の並び == */
/* 外わく（縦タブ本体）。padding の数字で全体の太さが変わります */
.cb-tab{gap:0;padding:13px 11px 15px;border-radius:18px 0 0 18px}
.cb-tab::before{border-radius:15px 0 0 15px}
.cb-tab::after{inset:9px 0 9px 9px;border-radius:11px 0 0 11px}
/* 中身：右の列（アイコン＋題字）と、左の金色カプセルを横に並べます */
.cb-tab .cb-tab-in{display:flex;flex-direction:row-reverse;align-items:stretch;gap:7px}
.cb-tab .cb-tab-col{display:flex;flex-direction:column;align-items:center;gap:9px}
/* ロボットのアイコン */
.cb-tab .cb-tab-ic{width:31px;height:31px}
.cb-tab .cb-tab-ic svg{width:18px}
/* 題字（白い縦文字）。font-size で大きさ、gap で字間が変わります */
.cb-tab .cb-tab-t{font-size:17px;gap:7px;line-height:1}
.cb-tab .cb-tab-t i.en{font-size:1.15em}
/* 左の金色カプセル。align-self:stretch で上下いっぱいに伸びます */
.cb-tab .cb-tab-s{
display:flex;align-self:stretch;justify-content:center;
font-size:11.5px;font-family:var(--serif-b);/*fw*/font-weight:600;line-height:1;gap:5.5px;
color:#123049;background:linear-gradient(180deg,#e7cf9b 0%,#d6b673 52%,#e2c88e 100%);
border:none;border-radius:999px;padding:13px 5px;
text-shadow:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
/* 画面が低いときは少しだけ小さく（カプセルは残します） */
@media(max-height:780px){.cb-tab .cb-tab-s{display:flex}}
@media(max-height:660px){
.cb-tab{padding:11px 9px 13px}
.cb-tab .cb-tab-t{font-size:14px;gap:4px}
.cb-tab .cb-tab-s{font-size:10.5px;gap:4px;padding:11px 4px}
.cb-tab .cb-tab-ic{width:27px;height:27px}
.cb-tab .cb-tab-ic svg{width:16px}
}
/* スマホ */
@media(max-width:640px){
.cb-tab{padding:10px 8px 12px;border-radius:15px 0 0 15px}
.cb-tab::before{border-radius:12px 0 0 12px}
.cb-tab::after{inset:7px 0 7px 7px;border-radius:9px 0 0 9px}
.cb-tab .cb-tab-in{gap:6px}
.cb-tab .cb-tab-col{gap:7px}
.cb-tab .cb-tab-ic{width:26px;height:26px}
.cb-tab .cb-tab-ic svg{width:15px}
.cb-tab .cb-tab-t{font-size:13.5px;gap:5px}
.cb-tab .cb-tab-s{display:flex;font-size:9.5px;gap:4px;padding:10px 4px}
}
/* == AIコンシェルジュのタブ ここまで == */
/* == ご予約ページ（検索・プラン・カレンダー・確認） == */
/* ---------------- ① ファーストビュー ---------------- */
.bk-hero{height:clamp(240px,36vh,380px)}
.bk-hero .t h1{font-size:clamp(22px,3.2vw,34px)}
.bk-hero-s{margin-top:12px;font-size:clamp(11.5px,1.2vw,13.5px);letter-spacing:.06em;
color:rgba(255,255,255,.88);line-height:1.9}
.bk-top{position:relative;z-index:6;margin-top:clamp(-58px,-6vw,-40px);
padding:0 clamp(20px,5vw,60px) clamp(34px,4.4vw,60px)}
.bk-top .inner{max-width:640px}
.bk-card{background:#fff;border-radius:16px;padding:clamp(18px,2.4vw,26px) clamp(15px,2.2vw,24px) clamp(16px,2.2vw,22px);
box-shadow:0 16px 44px rgba(12,31,49,.16);border:1px solid rgba(12,31,49,.06)}
.bk-card-h{text-align:center;font-size:clamp(13px,1.5vw,15px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.08em;
color:var(--navy);margin-bottom:clamp(13px,1.6vw,18px)}
.bk-nojs{font-size:12px;color:var(--sub);text-align:center;line-height:2}
.bk-nojs a{color:var(--gold);border-bottom:1px solid rgba(179,146,79,.5)}
.bk-rows{display:flex;flex-direction:column;gap:9px}
.bk-row{position:relative;display:flex;align-items:center;gap:10px;width:100%;
background:#f7f5f0;border:1px solid rgba(12,31,49,.10);border-radius:9px;
padding:12px 13px;cursor:pointer;text-align:left;font-family:var(--serif);
transition:border-color .25s,background .25s}
.bk-row:hover{border-color:rgba(179,146,79,.55);background:#fbf9f5}
.bk-row .bk-ic{flex:none;width:19px;height:19px;display:flex;align-items:center;justify-content:center}
.bk-row .bk-ic svg{width:19px;height:19px;fill:none;stroke:var(--navy);stroke-width:1.5;
stroke-linecap:round;stroke-linejoin:round;opacity:.75}
.bk-row .bk-lb{flex:none;width:6.3em;white-space:nowrap;font-size:12px;letter-spacing:.06em;color:var(--sub)}
.bk-row .bk-val{flex:1;min-width:0;font-size:clamp(14px,1.6vw,16px);font-family:var(--serif-b);/*fw*/font-weight:600;
letter-spacing:.03em;color:var(--navy);font-variant-numeric:oldstyle-nums}
.bk-row .bk-cv{flex:none;width:17px;height:17px;fill:none;stroke:var(--mute);stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ez)}
.bk-row.on .bk-cv{transform:rotate(180deg)}
/* 日付・泊数は、見た目の上に透明な入力を重ねています */
.bk-row input,.bk-row select{position:absolute;inset:0;width:100%;height:100%;
opacity:0;border:0;padding:0;margin:0;cursor:pointer;-webkit-appearance:none;appearance:none;
font-size:16px;background:transparent;color:transparent}
.bk-pax{display:flex;gap:9px;padding:2px 0 0}
.bk-pax[hidden]{display:none}
.bk-st{flex:1;display:flex;align-items:center;justify-content:space-between;gap:6px;
background:#f7f5f0;border:1px solid rgba(12,31,49,.10);border-radius:9px;padding:9px 10px}
.bk-st-l{font-size:11.5px;color:var(--sub);letter-spacing:.04em}
.bk-st button{width:26px;height:26px;flex:none;border-radius:50%;border:1px solid rgba(12,31,49,.18);
background:#fff;color:var(--navy);font-size:14px;line-height:1;cursor:pointer;
display:flex;align-items:center;justify-content:center;transition:.22s}
.bk-st button:hover{border-color:var(--gold);color:var(--gold)}
.bk-st b{min-width:1.4em;text-align:center;font-size:15px;font-family:var(--serif-b);/*fw*/font-weight:600;color:var(--navy)}
.bk-go{display:flex;align-items:center;justify-content:center;gap:10px;position:relative;
margin-top:clamp(13px,1.6vw,18px);padding:15px 18px;border-radius:8px;
background:linear-gradient(180deg,#173a5c 0%,#0c1f31 100%);
border:1px solid rgba(220,196,143,.5);color:#fff;
font-size:clamp(13.5px,1.5vw,15px);letter-spacing:.1em;overflow:hidden;
box-shadow:0 8px 20px rgba(12,31,49,.22);transition:filter .3s}
.bk-go:hover{filter:brightness(1.12)}
.bk-go .bk-ar{width:19px;height:19px;fill:none;stroke:var(--gold-l);stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ez)}
.bk-go:hover .bk-ar{transform:translateX(4px)}
.bk-go::after{content:"";position:absolute;top:-40%;left:0;z-index:1;width:26%;height:180%;
pointer-events:none;
background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 100%);
transform:translate3d(-170%,0,0) skewX(-18deg);will-change:transform;backface-visibility:hidden;
animation:petShine 3.6s linear infinite}
.bk-best{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:11px;
font-size:11.5px;letter-spacing:.05em;color:var(--sub)}
.bk-best svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
/* ---------------- ② プラン一覧 ---------------- */
.bk-plans-sec{background:var(--paper-2);padding:clamp(38px,5vw,74px) 0 clamp(40px,5.4vw,80px)}
.bk-plans{display:flex;flex-direction:column;max-width:960px;margin:0 auto;
gap:clamp(26px,3.4vw,42px)} /* ← カードどうしのすき間。この数字で広さが変わります */
.bk-pc{display:flex;background:#fff;border-radius:13px;overflow:hidden;
box-shadow:0 6px 22px rgba(12,31,49,.09);border:1px solid rgba(12,31,49,.06)}
.bk-pc-ph{position:relative;flex:none;width:47%;max-width:330px;display:block;overflow:hidden}
.bk-pc-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transition:transform .7s var(--ez)}
.bk-pc:hover .bk-pc-ph img{transform:scale(1.05)}
.bk-bd{position:absolute;top:0;left:0;z-index:2;padding:5px 22px 6px 13px;
font-size:11px;letter-spacing:.08em;color:#fff;border-radius:0;
clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.bk-bd-rec{background:linear-gradient(135deg,#b3924f,#8d7135)}
.bk-bd-win{background:linear-gradient(135deg,#2b5b86,#12304f)}
.bk-bd-new{background:linear-gradient(135deg,#a8563f,#7d3b2a)}
.bk-bd-sum{background:linear-gradient(135deg,#3f7f6a,#255a49)}
.bk-bd-hot{background:linear-gradient(135deg,#c0503f,#8f3226)}
.bk-bd-sim{background:linear-gradient(135deg,#7c8992,#5b666e)}
/* 写真の上に重ねる丸いロゴ（当館最上級など）。
width で大きさ、left/top で位置が変わります */
.bk-pc-ph img.bk-seal,.bk-pd-hero img.bk-seal,.bk-gal-main img.bk-seal,.bk-rm-ph img.bk-seal{
position:absolute;z-index:3;inset:auto;height:auto;object-fit:contain;
transform:none !important;pointer-events:none;
filter:drop-shadow(0 3px 8px rgba(6,16,26,.45))}
.bk-pc-ph img.bk-seal{left:5.5%;top:5%;width:clamp(44px,30%,116px)}
.bk-rm-ph img.bk-seal{left:4.5%;top:6%;width:clamp(50px,26%,120px)}
.bk-pd-hero img.bk-seal,.bk-gal-main img.bk-seal{right:4%;top:5%;width:clamp(66px,18%,160px)}
.bk-pc-tx{flex:1;min-width:0;padding:clamp(14px,1.8vw,22px) clamp(14px,1.8vw,24px) clamp(15px,1.8vw,22px);
display:flex;flex-direction:column}
.bk-pc-tx h3{font-size:clamp(16px,2vw,21px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.06em;
line-height:1.5;color:var(--navy);text-wrap:pretty;word-break:auto-phrase}
.bk-pc-tx h3 a{color:inherit}
.bk-pc-tx h3 a:hover{color:var(--gold)}
.bk-pc-l{margin-top:9px;font-size:clamp(11.5px,1.2vw,13px);line-height:1.95;color:var(--sub)}
.bk-pc-m{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;line-height:1.5;
font-size:11.5px;color:var(--sub);letter-spacing:.04em}
.bk-pc-m span{display:flex;align-items:center;gap:5px}
.bk-pc-m svg{width:14px;height:14px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.5;
stroke-linecap:round;stroke-linejoin:round}
.bk-pc-p{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 9px;margin-top:auto;padding-top:10px;line-height:1.15}
.bk-pc-for{font-size:11.5px;font-family:var(--serif-b);/*fw*/font-weight:600;color:var(--ink)}
.bk-pc-n{font-family:var(--en),var(--serif);font-size:clamp(23px,3vw,30px);font-weight:700;
color:var(--gold);letter-spacing:.01em;font-variant-numeric:lining-nums}
.bk-pc-n i{font-family:var(--serif-b);font-style:normal;font-weight:600;font-size:.5em;margin-left:2px}
.bk-pc-tax{font-size:10.5px;font-family:var(--serif-b);/*fw*/font-weight:600;color:var(--sub)}
.bk-pc-ask{font-size:13px;color:var(--sub)}
.bk-pc-go{position:relative;display:flex;align-items:center;justify-content:center;margin-top:10px;
padding:11px 30px;border:1px solid rgba(12,31,49,.22);border-radius:7px;
font-size:12.5px;line-height:1.4;letter-spacing:.08em;color:var(--navy);transition:.28s}
.bk-pc-go:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.bk-pc-go .bk-ar{position:absolute;right:clamp(11px,1.3vw,17px);width:17px;height:17px;
fill:none;stroke:currentColor;stroke-width:1.5;
stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ez)}
.bk-pc-go:hover .bk-ar{transform:translateX(4px)}
.bk-more{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;max-width:420px;
margin:clamp(6px,1vw,12px) auto 0;padding:15px 18px;border-radius:8px;cursor:pointer;
background:#fff;border:1px solid rgba(12,31,49,.20);color:var(--navy);
font-family:var(--serif);font-size:13.5px;letter-spacing:.08em;transition:.28s}
.bk-more:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.bk-more i{font-style:normal;font-size:11.5px;color:var(--mute)}
.bk-more:hover i{color:rgba(255,255,255,.7)}
.bk-more svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.bk-plans-n{max-width:960px;margin:clamp(16px,2vw,24px) auto 0;font-size:11.5px;
color:var(--mute);line-height:2;text-align:center}
.bk-plans-n a{color:var(--gold);border-bottom:1px solid rgba(179,146,79,.45)}
/* ---------------- ④ カレンダー ---------------- */
.bk-cal-sec{padding:clamp(38px,5vw,74px) 0 clamp(44px,5.6vw,84px)}
.bk-cal{max-width:560px;margin:0 auto;background:#fff;border-radius:14px;
border:1px solid rgba(12,31,49,.08);box-shadow:0 6px 22px rgba(12,31,49,.07);
padding:clamp(14px,1.8vw,22px) clamp(11px,1.6vw,20px) clamp(16px,2vw,22px)}
.bk-cal-h{display:flex;align-items:center;justify-content:center;gap:clamp(18px,4vw,40px);
margin-bottom:clamp(11px,1.4vw,16px)}
.bk-cal-h b{font-size:clamp(15px,1.8vw,18px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.09em;color:var(--navy)}
.bk-cal-nav{width:32px;height:32px;border-radius:50%;border:1px solid rgba(12,31,49,.16);
background:#fff;color:var(--navy);font-size:17px;line-height:1;cursor:pointer;transition:.24s}
.bk-cal-nav:hover{border-color:var(--gold);color:var(--gold)}
.bk-cal-w{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:4px}
.bk-cal-w span{text-align:center;font-size:11px;letter-spacing:.05em;color:var(--sub);padding:4px 0}
.bk-cal-w .sun{color:#b4585c}.bk-cal-w .sat{color:#4a7a99}
.bk-cal-g{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.bk-d{display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 1px 6px;
min-height:56px;border:1px solid transparent;border-radius:7px;background:#faf8f4;
font-family:var(--serif);cursor:pointer;transition:.2s}
.bk-d:hover:not(:disabled){border-color:var(--gold);background:#fffdf8}
.bk-d.on{border-color:var(--navy);background:#eef3f7;box-shadow:inset 0 0 0 1px var(--navy)}
.bk-d-e{background:transparent;border:0;min-height:56px;pointer-events:none}
.bk-d-p{background:transparent;color:var(--mute);opacity:.45;cursor:default}
.bk-d:disabled{cursor:default}
.bk-d-x{background:#f2f0ee;opacity:.65}
.bk-d-n{font-size:12.5px;color:var(--ink);line-height:1.2}
.bk-d-sun .bk-d-n{color:#b4585c}.bk-d-sat .bk-d-n{color:#4a7a99}
.bk-d-m{font-size:12px;line-height:1.1}
.bk-m-o{color:#3f8f6f}.bk-m-t{color:#c08a2e}.bk-m-x{color:#a8a29a}
.bk-d-y{font-family:var(--en),var(--serif);font-size:9.5px;color:var(--sub);
letter-spacing:0;line-height:1.1;font-variant-numeric:lining-nums}
.bk-cal-lg{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 16px;
margin-top:clamp(12px,1.5vw,18px);font-size:11.5px;color:var(--sub)}
.bk-cal-lg span{display:flex;align-items:center;gap:5px}
.bk-cal-lg i{font-style:normal;font-size:13px}
.bk-cal-note{margin-top:10px;font-size:11px;line-height:1.95;color:var(--mute);text-align:center}
/* ---------------- プラン詳細の写真カルーセル ---------------- */
.bk-gal{margin-top:6px}
.bk-gal-main{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/10;
background:#f2efe9;outline:none}
.bk-gal-main:focus-visible{box-shadow:0 0 0 3px rgba(179,146,79,.55)}
.bk-gal-main img.bk-gal-s{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transition:opacity .55s var(--ez)}
.bk-gal-main img.bk-gal-s.on{opacity:1}
/* 左右のボタン */
.bk-gal-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:4;
width:38px;height:38px;border:none;border-radius:50%;cursor:pointer;padding:0;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.9);box-shadow:0 2px 10px rgba(12,31,49,.22);
transition:background .25s,transform .25s var(--ez)}
.bk-gal-nav svg{width:19px;height:19px;fill:none;stroke:var(--navy);stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.bk-gal-nav:hover{background:#fff}
.bk-gal-prev{left:10px}
.bk-gal-next{right:10px}
.bk-gal-prev:hover{transform:translateY(-50%) translateX(-2px)}
.bk-gal-next:hover{transform:translateY(-50%) translateX(2px)}
/* 「1 / 4」の表示 */
.bk-gal-cnt{position:absolute;right:12px;bottom:11px;z-index:4;
background:rgba(12,31,49,.62);color:#fff;border-radius:20px;padding:3px 11px;
font-family:var(--en),var(--serif);font-size:11.5px;letter-spacing:.08em}
.bk-gal-cnt b{font-weight:600}
/* 下の小さい写真 */
.bk-gal-th{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:7px;margin-top:8px}
.bk-gal-th button{position:relative;aspect-ratio:4/3;overflow:hidden;padding:0;cursor:pointer;
border:2px solid transparent;border-radius:8px;background:none;opacity:.6;
transition:opacity .25s,border-color .25s}
.bk-gal-th button:hover{opacity:1}
.bk-gal-th button.on{opacity:1;border-color:var(--gold)}
.bk-gal-th img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:640px){
.bk-gal-nav{width:32px;height:32px}
.bk-gal-nav svg{width:16px;height:16px}
.bk-gal-prev{left:7px}.bk-gal-next{right:7px}
.bk-gal-th{gap:5px;margin-top:6px}
.bk-gal-th button{border-width:2px;border-radius:6px}
.bk-gal-cnt{right:8px;bottom:8px;font-size:10.5px;padding:2px 9px}
}
@media(prefers-reduced-motion:reduce){.bk-gal-main img.bk-gal-s{transition:none}}
/* ---------------- ③ プラン詳細 ---------------- */
.bk-pd-wrap{padding:70px clamp(20px,5vw,60px) 0}
/* ご予約の流れの画面では、スマホのときだけAIタブを隠します（操作の邪魔になるため） */
@media(max-width:640px){body.bk-flow .cb-tab{display:none}}
.bk-pd-crumb{padding-left:0;padding-right:0}
.bk-pd-crumb a{color:var(--sub);border-bottom:1px solid rgba(12,31,49,.14)}
.bk-pd-fb{font-size:20px;font-family:var(--serif-b);/*fw*/font-weight:600;color:var(--navy);margin:10px 0}
#bkPlan{max-width:720px;margin:0 auto;padding-bottom:clamp(40px,5vw,80px)}
/* 確認画面はチケットを大きく見せたいので、少し広めにとります */
#bkConfirm,#bkForm{max-width:960px;margin:0 auto;padding-bottom:clamp(40px,5vw,80px)}
.bk-pd-hero{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:16/10;margin-top:6px}
.bk-pd-hero img{width:100%;height:100%;object-fit:cover}
.bk-pd-head{padding:clamp(18px,2.4vw,28px) 0 0}
.bk-pd-head h1{font-size:clamp(21px,3vw,30px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.07em;
line-height:1.6;color:var(--navy)}
.bk-pd-c{margin-top:12px;font-size:clamp(13px,1.5vw,15.5px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.05em;color:var(--gold)}
.bk-pd-d{margin-top:14px;font-size:clamp(12.5px,1.3vw,14px);font-family:var(--serif-m);/*fw*/font-weight:500;line-height:2.15;color:var(--sub)}
/* プラン詳細の見出しまわりだけ、少し太めにします */
.bk-pd-head .bk-pc-m{font-family:var(--serif-m);/*fw*/font-weight:500}
.bk-pd-s{padding:0;margin-top:clamp(32px,4vw,56px)} /* section の初期の余白を打ち消します */
.bk-pd-en{display:block;font-family:var(--en),serif;font-size:11px;letter-spacing:.22em;
color:var(--gold);margin-bottom:6px}
.bk-pd-s h2{font-size:clamp(17px,2.1vw,22px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.1em;color:var(--navy)}
.bk-pd-ph{margin-top:14px;border-radius:12px;overflow:hidden;aspect-ratio:16/9}
.bk-pd-ph img{width:100%;height:100%;object-fit:cover}
.bk-pd-t{margin-top:14px;font-size:clamp(12.5px,1.3vw,14px);line-height:2.15;color:var(--sub)}
.bk-pd-t b{color:var(--navy);font-family:var(--serif-b);/*fw*/font-weight:600}
.bk-pd-n{margin-top:10px;font-size:11.5px;line-height:2;color:var(--mute)}
.bk-pd-dl{margin-top:15px;border-top:1px solid var(--line)}
.bk-pd-dl>div{display:flex;gap:12px;padding:11px 2px;border-bottom:1px solid var(--line)}
.bk-pd-dl dt{flex:none;width:10.6em;font-size:12px;color:var(--sub);letter-spacing:.04em}
/* 「プラン内容」の表：見出しは少し狭く、中身は読みやすく */
.bk-pd-plan .bk-pd-dl dt{width:8em;white-space:nowrap;font-family:var(--serif-b);/*fw*/font-weight:600;color:var(--navy)}
.bk-pd-plan .bk-pd-dl dd{font-size:13px;line-height:2.05}
.bk-pd-sub{display:block;margin-top:3px;font-size:11.5px;line-height:1.9;color:var(--mute)}
@media(max-width:640px){
.bk-pd-plan .bk-pd-dl dt{width:6.8em;font-size:11.5px}
.bk-pd-plan .bk-pd-dl dd{font-size:12.5px;line-height:1.95}
}
@media(max-width:360px){
.bk-pd-plan .bk-pd-dl>div{flex-direction:column;gap:2px;padding:10px 2px}
.bk-pd-plan .bk-pd-dl dt{width:auto}
}
.bk-pd-dl dd{flex:1;min-width:0;font-size:12.5px;line-height:1.95;color:var(--ink)}
.bk-pd-tt dt,.bk-pd-tt dd{font-family:var(--serif-b);/*fw*/font-weight:600;color:var(--navy)}
.bk-pd-tt dd{font-size:16px}
.bk-empty{padding:60px 0;text-align:center;color:var(--sub)}
/* ---------------- 客室を選ぶ（カルーセル） ---------------- */
.bk-rm-wrap{position:relative;margin-top:clamp(14px,1.8vw,20px)}
.bk-rm-track{display:flex;gap:clamp(10px,1.4vw,16px);overflow-x:auto;scroll-snap-type:x mandatory;
scroll-padding-left:0;padding:4px 2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.bk-rm-track::-webkit-scrollbar{display:none}
.bk-rm{flex:0 0 100%;scroll-snap-align:start;background:#fff;border-radius:13px;overflow:hidden;
display:flex;flex-direction:column;
border:2px solid rgba(12,31,49,.10);box-shadow:0 4px 16px rgba(12,31,49,.07);
cursor:pointer;transition:border-color .3s,box-shadow .3s}
.bk-rm.on{border-color:var(--gold);box-shadow:0 6px 22px rgba(179,146,79,.22)}
.bk-rm-ph{position:relative;aspect-ratio:16/9;overflow:hidden}
.bk-rm-ph img{width:100%;height:100%;object-fit:cover}
/* 選択中の丸いチェック */
.bk-rm-chk{position:absolute;top:10px;right:10px;z-index:2;width:28px;height:28px;border-radius:50%;
display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.92);
opacity:0;transform:scale(.8);transition:.3s var(--ez)}
.bk-rm.on .bk-rm-chk{opacity:1;transform:scale(1);background:var(--gold)}
.bk-rm-chk svg{width:17px;height:17px;fill:none;stroke:var(--mute);stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.bk-rm.on .bk-rm-chk svg{stroke:#fff}
.bk-rm-tx{flex:1;display:flex;flex-direction:column;
padding:clamp(13px,1.7vw,20px) clamp(13px,1.7vw,22px) clamp(14px,1.8vw,20px)}
.bk-rm-en{display:block;font-family:var(--en),serif;font-size:10.5px;letter-spacing:.2em;color:var(--gold)}
.bk-rm-tx h3{margin-top:3px;font-size:clamp(16px,1.9vw,20px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.07em;color:var(--navy)}
.bk-rm-t{margin-top:8px;font-size:clamp(11.5px,1.2vw,13px);line-height:1.95;color:var(--sub)}
.bk-rm-dl{margin-top:11px;border-top:1px solid var(--line)}
.bk-rm-dl>div{display:flex;gap:10px;padding:7px 2px;border-bottom:1px solid var(--line)}
.bk-rm-dl dt{flex:none;width:4.6em;font-size:11px;color:var(--sub);letter-spacing:.04em}
.bk-rm-dl dd{flex:1;min-width:0;font-size:11.5px;line-height:1.8;color:var(--ink)}
.bk-rm-p{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 8px;margin-top:auto;padding-top:12px;line-height:1.15}
.bk-rm-for{font-size:11px;font-family:var(--serif-b);/*fw*/font-weight:600;color:var(--ink)}
.bk-rm-p b{font-family:var(--en),var(--serif);font-size:clamp(23px,2.8vw,28px);font-weight:700;
color:var(--gold);font-variant-numeric:lining-nums}
.bk-rm-p b i{font-family:var(--serif-b);font-style:normal;font-size:.48em;margin-left:2px}
.bk-rm-p em{font-style:normal;font-size:10px;font-family:var(--serif-b);/*fw*/font-weight:600;color:var(--sub)}
.bk-rm-ask{font-size:12.5px;color:var(--sub)}
.bk-rm-go{display:flex;align-items:center;justify-content:center;gap:9px;position:relative;
margin-top:12px;padding:13px 16px;border-radius:8px;color:#fff;
font-size:13px;font-family:var(--serif-m);/*fw*/font-weight:500;letter-spacing:.08em;
background:linear-gradient(180deg,#173a5c 0%,#0c1f31 100%);
border:1px solid rgba(220,196,143,.5);box-shadow:0 6px 16px rgba(12,31,49,.18);
transition:filter .3s}
.bk-rm-go:hover{filter:brightness(1.13)}
.bk-rm-go .bk-ar{width:18px;height:18px;fill:none;stroke:var(--gold-l);stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ez)}
.bk-rm-go:hover .bk-ar{transform:translateX(4px)}
/* 左右のボタン */
.bk-rm-wrap.no-nav .bk-rm-nav{display:none}
.bk-rm-nav{position:absolute;top:32%;transform:translateY(-50%);z-index:4;
width:38px;height:38px;border:none;border-radius:50%;cursor:pointer;padding:0;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.94);box-shadow:0 2px 10px rgba(12,31,49,.24);transition:background .25s}
.bk-rm-nav svg{width:19px;height:19px;fill:none;stroke:var(--navy);stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.bk-rm-nav:hover{background:#fff}
.bk-rm-prev{left:-6px}
.bk-rm-next{right:-6px}
/* 下のお部屋名タブ */
.bk-rm-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:clamp(10px,1.3vw,14px)}
.bk-rm-dots button{border:1px solid rgba(12,31,49,.20);border-radius:20px;background:#fff;
padding:7px 16px;cursor:pointer;font-family:var(--serif);font-size:12px;letter-spacing:.05em;
color:var(--sub);transition:.25s}
.bk-rm-dots button:hover{border-color:var(--gold);color:var(--gold)}
.bk-rm-dots button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.bk-rooms .bk-pd-n{text-align:center}
.bk-rm-more{margin-top:9px;text-align:right;font-size:11.5px}
.bk-rm-more a{color:var(--sub);border-bottom:1px solid rgba(12,31,49,.2)}
.bk-rm-more a:hover{color:var(--gold);border-bottom-color:rgba(179,146,79,.5)}
/* 固定CTAに出る客室名 */
.bk-fix-rm{font-style:normal;color:var(--gold)}
.bk-fix-rm:not(:empty)::before{content:"／"}
@media(min-width:781px){
.bk-rm{flex:0 0 calc(50% - clamp(5px,.7vw,8px))}
.bk-rm-prev{left:-14px}
.bk-rm-next{right:-14px}
}
@media(max-width:640px){
.bk-rm-nav{width:32px;height:32px}
.bk-rm-nav svg{width:16px;height:16px}
.bk-rm-prev{left:-2px}
.bk-rm-next{right:-2px}
.bk-rm-dots button{padding:6px 13px;font-size:11.5px}
}
/* 説明のすぐ下に置くCTA */
.bk-pd-cta{margin-top:clamp(20px,2.6vw,30px);padding:clamp(16px,2vw,22px) clamp(15px,2vw,24px) clamp(14px,1.8vw,18px);
background:var(--paper-2);border:1px solid rgba(12,31,49,.07);border-radius:13px;
display:flex;flex-direction:column}
.bk-pd-cta-p{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 9px;justify-content:center}
.bk-pd-cta-p span{font-size:11.5px;font-family:var(--serif-b);/*fw*/font-weight:600;color:var(--ink)}
.bk-pd-cta-p b{font-family:var(--en),var(--serif);font-size:clamp(26px,3.4vw,34px);font-weight:700;
color:var(--gold);letter-spacing:.01em;line-height:1.15;font-variant-numeric:lining-nums}
.bk-pd-cta-p b i{font-family:var(--serif-b);font-style:normal;font-size:.48em;margin-left:2px}
.bk-pd-cta-p em{font-style:normal;font-size:10.5px;font-family:var(--serif-b);/*fw*/font-weight:600;color:var(--sub)}
.bk-pd-cta-ask{font-family:var(--serif) !important;font-size:14px !important;color:var(--sub) !important}
.bk-pd-cta-go{display:flex;align-items:center;justify-content:center;gap:10px;position:relative;
margin-top:clamp(11px,1.4vw,15px);padding:15px 18px;border-radius:8px;
background:linear-gradient(180deg,#173a5c 0%,#0c1f31 100%);
border:1px solid rgba(220,196,143,.5);color:#fff;
font-size:clamp(13.5px,1.5vw,15px);font-family:var(--serif-m);/*fw*/font-weight:500;letter-spacing:.1em;
box-shadow:0 8px 20px rgba(12,31,49,.2);transition:filter .3s}
.bk-pd-cta-go:hover{filter:brightness(1.13)}
.bk-pd-cta-go .bk-ar{width:19px;height:19px;fill:none;stroke:var(--gold-l);stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ez)}
.bk-pd-cta-go:hover .bk-ar{transform:translateX(4px)}
.bk-pd-cta .bk-best{margin-top:10px}
/* ひかるアニメーション（「空室を検索する」と同じ動きです） */
.bk-pd-cta-go,.bk-rm-go,.bk-cf-go,.bk-fm-go{position:relative;overflow:hidden}
.bk-pd-cta-go::after,.bk-rm-go::after,.bk-cf-go::after,.bk-fm-go::after{
content:"";position:absolute;top:-40%;left:0;z-index:1;width:26%;height:180%;
pointer-events:none;
background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.42) 50%,rgba(255,255,255,0) 100%);
transform:translate3d(-170%,0,0) skewX(-18deg);will-change:transform;backface-visibility:hidden;
animation:petShine 3.6s linear infinite}
.bk-rm-go::after{animation-delay:.5s}
.bk-cf-go::after{animation-delay:.3s}
.bk-fm-go::after{animation-delay:.7s}
.bk-pd-cta-go:hover::after,.bk-rm-go:hover::after,
.bk-cf-go:hover::after,.bk-fm-go:hover::after{animation-duration:1.2s;animation-delay:0s}
/* 送信中は光らせません */
.bk-fm-go:disabled::after{display:none}
@media(prefers-reduced-motion:reduce){
.bk-pd-cta-go::after,.bk-rm-go::after,.bk-cf-go::after,.bk-fm-go::after{display:none}
}
/* 画面下に出しっぱなしのCTA */
.bk-fix{position:fixed;left:0;right:0;bottom:0;z-index:190;display:flex;align-items:center;gap:10px;
padding:9px clamp(12px,3vw,22px) calc(9px + env(safe-area-inset-bottom));
background:rgba(255,255,255,.96);backdrop-filter:blur(8px);
border-top:1px solid var(--line);box-shadow:0 -4px 18px rgba(12,31,49,.10)}
.bk-fix[hidden]{display:none}
.bk-fix-p{flex:none;display:flex;flex-direction:column;line-height:1.25}
.bk-fix-p span{font-size:10.5px;color:var(--sub)}
.bk-fix-p b{font-family:var(--en),var(--serif);font-size:19px;font-weight:500;color:var(--navy);
font-variant-numeric:lining-nums}
.bk-fix-p i{font-style:normal;font-size:10px;color:var(--mute)}
.bk-fix-ask{font-family:var(--serif-b);font-size:11.5px !important;font-weight:600 !important;
white-space:nowrap;line-height:1.4;color:var(--sub) !important}
.bk-fix-go{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
padding:13px 12px;border-radius:8px;color:#fff;font-size:13px;letter-spacing:.08em;
background:linear-gradient(180deg,#173a5c 0%,#0c1f31 100%);
border:1px solid rgba(220,196,143,.5);transition:filter .3s}
.bk-fix-go:hover{filter:brightness(1.14)}
.bk-fix-go .bk-ar{width:17px;height:17px;fill:none;stroke:var(--gold-l);stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
body.has-bkfix{padding-bottom:78px}
body.has-bkfix .mcta{display:none}
/* ---------------- ⑤ 最終確認 ---------------- */
/* このあとのお手続き（確認画面） */
.bk-ho{max-width:940px;margin:clamp(18px,2.3vw,30px) auto 0;
padding:clamp(16px,2vw,28px) clamp(15px,2.1vw,32px);
background:rgba(255,255,255,.88);border:1px solid rgba(12,31,49,.08);border-radius:13px}
.bk-ho-h{font-size:clamp(13.5px,1.35vw,18px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.12em;color:var(--navy);
display:flex;align-items:center;gap:clamp(8px,1vw,12px)}
.bk-ho-h::before{content:"";flex:none;width:3px;height:1.05em;border-radius:2px;background:var(--gold)}
.bk-ho-st{margin:clamp(12px,1.5vw,18px) 0 0;padding:0;list-style:none;counter-reset:ho}
.bk-ho-st li{position:relative;counter-increment:ho;
/* --dot が丸数字の大きさ。点線もこの数字にあわせて自動で真ん中にきます */
--dot:clamp(22px,2vw,27px);
display:flex;align-items:center;gap:clamp(10px,1.2vw,16px);
padding:clamp(7px,.9vw,11px) 0 clamp(7px,.9vw,11px) clamp(30px,2.6vw,40px);
font-size:clamp(12px,1.05vw,14px);font-family:var(--serif-b);/*fw*/font-weight:600;line-height:1.8;color:var(--ink)}
/* 左はしの丸数字 */
.bk-ho-st li::before{content:counter(ho);position:absolute;left:0;top:50%;
transform:translateY(-50%);z-index:2;
width:var(--dot);height:var(--dot);border-radius:50%;
background:var(--navy);color:#fff;
font-family:var(--en),var(--serif);font-size:clamp(11px,1vw,13px);font-weight:700;
display:flex;align-items:center;justify-content:center}
/* 丸数字どうしをつなぐ点線（丸の中心にぴったり合わせています） */
.bk-ho-st li::after{content:"";position:absolute;left:calc(var(--dot) / 2);top:50%;
transform:translateX(-50%);width:0;height:100%;
border-left:1px dotted rgba(12,31,49,.3)}
.bk-ho-st li:last-child::after{display:none}
/* 数字のとなりの、うすい丸の中の絵 */
.bk-ho-ic{flex:none;display:flex;align-items:center;justify-content:center;
width:clamp(30px,2.9vw,40px);height:clamp(30px,2.9vw,40px);border-radius:50%;
background:rgba(179,146,79,.11)}
.bk-ho-ic svg{width:clamp(15px,1.4vw,19px);height:clamp(15px,1.4vw,19px);
fill:none;stroke:var(--gold);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.bk-ho-tx{flex:1;min-width:0}
.bk-ho-dl{margin-top:13px;border-top:1px solid var(--line)}
.bk-ho-dl>div{display:flex;gap:12px;padding:10px 2px;border-bottom:1px solid var(--line)}
.bk-ho-dl dt{flex:none;width:6.2em;white-space:nowrap;font-size:clamp(11.5px,.95vw,13px);
font-family:var(--serif-b);/*fw*/font-weight:700;color:var(--navy);letter-spacing:.04em;padding-top:2px}
.bk-ho-dl dd{flex:1;min-width:0;font-size:clamp(12px,1vw,13.5px);font-family:var(--serif-b);/*fw*/font-weight:600;
line-height:1.9;color:var(--ink)}
.bk-ho-dl dd b{color:var(--navy);font-family:var(--serif-b);/*fw*/font-weight:700}
.bk-ho-dl dd a{color:var(--gold);border-bottom:1px solid rgba(179,146,79,.5)}
.bk-ho-more{margin-top:10px;text-align:right;font-size:clamp(11.5px,.95vw,13px)}
.bk-ho-more a{font-family:var(--serif-b);/*fw*/font-weight:600;color:var(--sub);border-bottom:1px solid rgba(12,31,49,.2)}
.bk-ho-more a:hover{color:var(--gold);border-bottom-color:rgba(179,146,79,.5)}
/* 外部リンクの印 */
.bk-cf-go .bk-ext{width:14px;height:14px;fill:none;stroke:rgba(255,255,255,.65);stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;margin-left:-2px}
.bk-cf-ext{margin-top:9px;text-align:center;font-size:11px;color:var(--mute)}
@media(max-width:400px){
.bk-ho-dl>div{flex-direction:column;gap:2px}
.bk-ho-dl dt{width:auto}
}
/* 確認画面は、白い箱ではなくページの上に直接ならべます */
.bk-cf{margin-top:clamp(4px,1vw,12px)}
.bk-cf-h{font-size:clamp(20px,2.7vw,29px);font-family:var(--serif-m);/*fw*/font-weight:500;letter-spacing:.16em;color:var(--navy);
text-align:center}
/* うしろの波（完了ページと同じ絵をつかっています） */
.cf-wave{position:relative;background:#fdfdfc;overflow:hidden;
padding-bottom:clamp(140px,18vw,240px)}
.cf-wave::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:0;
height:clamp(120px,16vw,220px);pointer-events:none;
background:url("assets/images/thanks-bottom.webp") center bottom/cover no-repeat}
.cf-wave>.inner{position:relative;z-index:1}
.bk-cf-n{margin-top:12px;text-align:center;font-size:11.5px;line-height:2;color:var(--mute)}
.bk-cf-go{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;
padding:16px 18px;border-radius:8px;color:#fff;font-size:14px;letter-spacing:.1em;
background:linear-gradient(180deg,#173a5c 0%,#0c1f31 100%);
border:1px solid rgba(220,196,143,.5);box-shadow:0 8px 20px rgba(12,31,49,.2);transition:filter .3s}
.bk-cf-go:hover{filter:brightness(1.14)}
.bk-cf-go .bk-ar{width:19px;height:19px;fill:none;stroke:var(--gold-l);stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ez)}
.bk-cf-go:hover .bk-ar{transform:translateX(4px)}
.bk-cf-back{margin-top:14px;text-align:center;font-size:11.5px}
.bk-cf-back a{color:var(--sub);border-bottom:1px solid rgba(12,31,49,.18)}
/* お一人様の追加料金のご案内（プラン詳細のCTAの中） */
.bk-solo{margin-top:clamp(9px,1.1vw,14px);padding:clamp(8px,1vw,12px) clamp(11px,1.3vw,16px);
border-radius:8px;background:rgba(179,146,79,.09);border:1px solid rgba(179,146,79,.3);
font-size:clamp(11px,.95vw,13px);font-family:var(--serif-m);/*fw*/font-weight:500;line-height:1.8;color:var(--sub);
text-align:center}
.bk-solo b{font-family:var(--serif-b);/*fw*/font-weight:700;color:var(--navy)}
/* お一人様で検索されているときは、はっきり見せます */
.bk-solo.on{background:rgba(179,146,79,.16);border-color:rgba(179,146,79,.55);color:var(--ink)}
/* ---- 併用（お申し込み方法を2つ並べる） ---- */
.bk-cf-two{max-width:940px;margin:clamp(18px,2.3vw,30px) auto 0}
.bk-cf-two-l{text-align:center;font-size:12px;letter-spacing:.04em;color:var(--sub)}
.bk-cf-two-g{display:flex;align-items:stretch;gap:clamp(10px,1.4vw,18px);margin-top:12px}
.bk-cf-pick{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
background:rgba(255,255,255,.88);border:1px solid rgba(12,31,49,.08);border-radius:11px;
padding:clamp(13px,1.6vw,18px) clamp(12px,1.5vw,17px)}
.bk-cf-pick-t{display:flex;align-items:center;gap:8px;
font-size:12px;font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.05em;color:var(--navy);line-height:1.5}
.bk-cf-pick-t i{flex:none;width:20px;height:20px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:var(--en),var(--serif);font-style:normal;font-weight:600;font-size:11px;
background:var(--navy);color:var(--gold-l)}
.bk-cf-pick .bk-cf-go{margin-top:12px}
.bk-cf-pick .bk-cf-ext{margin-top:10px;text-align:left;font-size:11px;line-height:1.85;
color:var(--sub)}
/* Bのボタンは、Aと区別がつくように白地にします */
.bk-cf-go2{background:#fff;color:var(--navy);border:1px solid rgba(12,31,49,.3);
box-shadow:0 4px 12px rgba(12,31,49,.08)}
.bk-cf-go2 .bk-ar{stroke:var(--gold)}
.bk-cf-go2 .bk-ext{stroke:rgba(12,31,49,.45)}
.bk-cf-go2:hover{background:var(--navy);color:#fff;border-color:var(--navy);filter:none}
.bk-cf-go2:hover .bk-ext{stroke:rgba(255,255,255,.6)}
/* 「または」の仕切り */
.bk-cf-or{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;
padding:6px 0}
.bk-cf-or::before,.bk-cf-or::after{content:"";flex:1;width:1px;
background:linear-gradient(180deg,transparent,rgba(12,31,49,.16),transparent)}
.bk-cf-or span{font-size:10.5px;letter-spacing:.1em;color:var(--mute);white-space:nowrap}
@media(max-width:640px){
.bk-cf-two-g{flex-direction:column}
.bk-cf-or{flex-direction:row;padding:0}
.bk-cf-or::before,.bk-cf-or::after{width:auto;height:1px;flex:1;
background:linear-gradient(90deg,transparent,rgba(12,31,49,.16),transparent)}
}
/* ---------------- ⑥ お客様情報の入力フォーム ---------------- */
.bk-fm-w{margin-top:clamp(4px,1vw,12px)}
/* 入力欄の白い箱（チケットの下） */
.bk-fm{max-width:940px;margin:clamp(18px,2.3vw,30px) auto 0;
background:rgba(255,255,255,.92);border-radius:14px;border:1px solid rgba(12,31,49,.08);
box-shadow:0 6px 22px rgba(12,31,49,.07);
padding:clamp(20px,2.6vw,36px) clamp(16px,2.6vw,40px)}
.bk-fm-lead{margin-top:14px;text-align:center;font-size:clamp(12.5px,1.05vw,14px);
line-height:2;color:var(--sub)}
/* チケットの下の「内容を変更する ›」 */
.bk-tk-back{max-width:940px;margin:clamp(9px,1.1vw,14px) auto 0;text-align:right}
.bk-tk-back a{display:inline-flex;align-items:center;gap:5px;
font-size:clamp(11.5px,.95vw,13px);letter-spacing:.04em;color:var(--gold);
border-bottom:1px solid rgba(179,146,79,.5);transition:color .25s,border-color .25s}
.bk-tk-back a span{font-size:14px;line-height:1}
.bk-tk-back a:hover{color:var(--navy);border-bottom-color:rgba(12,31,49,.35)}
/* 見出しの下の金色の線 */
.bk-fm-h{border-bottom:0;padding-bottom:0;position:relative}
.bk-fm-w .bk-fm-h{font-size:clamp(20px,2.7vw,29px);font-family:var(--serif-m);/*fw*/font-weight:500;letter-spacing:.16em}
.bk-fm-h::after{content:"";display:block;width:46px;height:1px;margin:13px auto 0;
background:linear-gradient(90deg,transparent,var(--gold) 22%,var(--gold) 78%,transparent)}
/* ---- 上のご予約内容（チケット風のカード） ----
・左のこん色のタテ帯 … .bk-tk-tab
・上のクリーム色の帯 … .bk-tk-hd（左右に半円の切りこみが入ります）
・その下の項目 … .bk-tk-dl
・いちばん下の帯 … .bk-tk-ft */
.bk-tk-card{display:flex;margin:clamp(18px,2.2vw,26px) auto 0;width:100%;
border-radius:12px;overflow:hidden;background:#fff;
border:1px solid rgba(12,31,49,.1);box-shadow:0 5px 18px rgba(12,31,49,.08)}
/* 左のこん色のタテ帯（文字はタテ書き） */
.bk-tk-tab{flex:none;width:clamp(34px,3.6vw,54px);
background:linear-gradient(180deg,#173a5c 0%,#0c1f31 100%);
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:9px;padding:14px 0;position:relative}
.bk-tk-tab::after{content:"";position:absolute;right:0;top:8px;bottom:8px;width:1px;
background:linear-gradient(180deg,transparent,rgba(220,196,143,.45),transparent)}
/* タテ書きの「ご予約内容」。1文字ずつ縦に並べています */
.bk-tk-tabt{flex:none;display:flex;flex-direction:column;align-items:center;gap:.24em}
.bk-tk-tabt i{display:block;font-style:normal;line-height:1.06;
font-size:clamp(10.5px,1vw,13.5px);color:#fff;font-family:var(--serif-b);/*fw*/font-weight:600}
.bk-tk-tab .bk-tk-i{width:clamp(15px,1.3vw,18px);height:clamp(15px,1.3vw,18px);stroke:var(--gold-l)}
.bk-tk-body{flex:1;min-width:0}
.bk-tk-i{flex:none;fill:none;stroke:var(--gold);stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
/* 上のクリーム色の帯（3つに分かれた部分） */
.bk-tk-hd{position:relative;display:flex;align-items:stretch;
background:var(--paper-2);
padding:clamp(12px,1.7vw,24px) clamp(11px,1.9vw,30px)}
/* 左右の半円の切りこみ */
.bk-tk-hd::before,.bk-tk-hd::after{content:"";position:absolute;bottom:-9px;
width:18px;height:18px;border-radius:50%;z-index:2}
/* 左は、こん色の帯にちょうど半分かかります */
.bk-tk-hd::before{left:-9px;background:linear-gradient(90deg,transparent 0 50%,#fff 50% 100%)}
.bk-tk-hd::after{right:-9px;background:#fff}
/* 帯の下は金色の点線 */
.bk-tk-hd{border-bottom:1px dashed rgba(179,146,79,.55)}
.bk-tk-cell{flex:1 1 0;min-width:0;padding:0 clamp(8px,1.6vw,26px);
border-left:1px dashed rgba(179,146,79,.5)}
.bk-tk-cell:first-child{border-left:0;padding-left:2px}
.bk-tk-cell1{flex:1.45 1 0}
.bk-tk-k{font-size:clamp(10.5px,.85vw,12px);font-family:var(--serif-m);/*fw*/font-weight:500;letter-spacing:.08em;color:var(--mute)}
/* ご宿泊日（大きな金色の数字） */
.bk-tk-date{margin-top:5px;display:flex;align-items:center;gap:clamp(4px,.7vw,9px);flex-wrap:nowrap}
.bk-tk-date span{display:flex;align-items:baseline;gap:4px;min-width:0}
.bk-tk-date b{font-family:var(--en),var(--serif);font-weight:600;
font-size:clamp(17px,2.2vw,30px);line-height:1.1;color:var(--gold);
font-variant-numeric:lining-nums;white-space:nowrap}
.bk-tk-date i{font-family:var(--en),var(--serif);font-style:normal;font-weight:500;
font-size:clamp(8.5px,.95vw,13px);letter-spacing:.09em;color:var(--mute)}
.bk-tk-arw{width:clamp(13px,1.6vw,22px);height:clamp(13px,1.6vw,22px);
stroke:var(--gold-l);stroke-width:1.7}
/* ご宿泊数・ご人数 */
.bk-tk-w{margin-top:6px;display:flex;align-items:center;gap:6px;
font-size:clamp(12px,1.25vw,16.5px);color:var(--navy);font-family:var(--serif-b);/*fw*/font-weight:600;line-height:1.4}
.bk-tk-w .bk-tk-i{width:clamp(15px,1.6vw,21px);height:clamp(15px,1.6vw,21px)}
.bk-tk-sm{font-size:.82em;font-weight:400;color:var(--sub)}
/* 下の項目（プラン・客室・お食事・料金） */
.bk-tk-dl{padding:clamp(4px,.7vw,12px) clamp(13px,2.1vw,34px) clamp(6px,1vw,16px)}
.bk-tk-dl>div{display:flex;gap:clamp(8px,1.6vw,26px);align-items:flex-start;
padding:clamp(9px,1.2vw,16px) 0;border-bottom:1px solid rgba(12,31,49,.07)}
.bk-tk-dl>div:last-child{border-bottom:0}
.bk-tk-dl dt{flex:none;width:9.4em;display:flex;align-items:center;gap:clamp(7px,.7vw,10px);
font-size:clamp(11.5px,.92vw,13px);letter-spacing:.03em;color:var(--sub);padding-top:2px}
.bk-tk-dl dt .bk-tk-i{width:clamp(15px,1.25vw,17px);height:clamp(15px,1.25vw,17px)}
.bk-tk-dl dd{flex:1;min-width:0;font-size:clamp(12.5px,1.05vw,15px);line-height:1.8;color:var(--ink)}
.bk-tk-yen{font-family:var(--en),var(--serif);font-weight:600;font-size:clamp(16px,1.4vw,20px);
color:var(--navy);font-variant-numeric:lining-nums;margin-right:1px}
/* ================= 大きいチケット（確認画面） ================= */
.bk-tk-lg{--nr:13px;max-width:940px;border-radius:16px;
box-shadow:0 10px 34px rgba(12,31,49,.1);
-webkit-mask:radial-gradient(circle var(--nr) at 0 50%,transparent 98%,#000 100%),
radial-gradient(circle var(--nr) at 100% 50%,transparent 98%,#000 100%);
mask:radial-gradient(circle var(--nr) at 0 50%,transparent 98%,#000 100%),
radial-gradient(circle var(--nr) at 100% 50%,transparent 98%,#000 100%);
-webkit-mask-composite:source-in;mask-composite:intersect}
.bk-tk-lg .bk-tk-tab{width:clamp(40px,4.6vw,66px);border-radius:16px 0 0 16px}
/* タブのよこの金色のミシン目 */
.bk-tk-lg .bk-tk-tab::after{right:-5px;top:14px;bottom:14px;width:0;
background:none;border-left:2px dotted rgba(179,146,79,.75)}
.bk-tk-lg .bk-tk-tabt i{font-size:clamp(12px,1.15vw,16px);font-family:var(--serif-b);/*fw*/font-weight:700;letter-spacing:.02em}
.bk-tk-lg .bk-tk-tabt{gap:.3em}
.bk-tk-lg .bk-tk-tab .bk-tk-i{width:clamp(17px,1.5vw,22px);height:clamp(17px,1.5vw,22px)}
.bk-tk-lg .bk-tk-body{background:var(--paper-2);padding-left:clamp(8px,1vw,14px)}
/* 上半分：日付＋泊数・人数 */
.bk-tk-top{display:flex;align-items:stretch;
padding:clamp(18px,2.4vw,34px) clamp(14px,2.2vw,34px) clamp(16px,2vw,28px);
border-bottom:2px dotted rgba(179,146,79,.6)}
.bk-tk-dates{flex:1.6 1 0;min-width:0;padding-right:clamp(10px,1.6vw,24px)}
.bk-tk-en{font-family:var(--en),var(--serif);font-weight:700;
font-size:clamp(9.5px,.95vw,13px);letter-spacing:.16em;color:var(--gold)}
.bk-tk-big{margin-top:clamp(4px,.6vw,10px);display:flex;align-items:center;
gap:clamp(8px,1.6vw,26px);flex-wrap:nowrap}
.bk-tk-d{display:flex;flex-direction:column;align-items:center;min-width:0}
.bk-tk-d b{font-family:var(--en),var(--serif);font-weight:600;
font-size:clamp(30px,5vw,64px);line-height:1;color:var(--navy);
font-variant-numeric:lining-nums;white-space:nowrap}
.bk-tk-d i{margin-top:clamp(2px,.5vw,7px);font-family:var(--en),var(--serif);font-style:normal;
font-weight:600;font-size:clamp(10px,1.15vw,15px);letter-spacing:.14em;color:var(--sub)}
.bk-tk-arw2{width:clamp(18px,2.4vw,34px);height:clamp(18px,2.4vw,34px);
stroke:var(--gold);stroke-width:1.9;margin-bottom:clamp(10px,1.6vw,22px)}
.bk-tk-side{flex:1 1 0;min-width:0;display:flex;flex-direction:column;
justify-content:center;gap:clamp(9px,1.2vw,16px);
padding-left:clamp(12px,1.8vw,28px);border-left:1px solid rgba(179,146,79,.5)}
.bk-tk-sr{display:flex;align-items:center;gap:clamp(9px,1.1vw,15px)}
.bk-tk-sr+.bk-tk-sr{padding-top:clamp(9px,1.2vw,16px);
border-top:1px dotted rgba(179,146,79,.6)}
.bk-tk-sr .bk-tk-i{width:clamp(20px,2.1vw,29px);height:clamp(20px,2.1vw,29px)}
.bk-tk-sr>span{min-width:0}
.bk-tk-sr .bk-tk-k{display:block}
.bk-tk-sv{display:block;margin-top:1px;font-size:clamp(14px,1.55vw,21px);font-family:var(--serif-b);/*fw*/font-weight:600;
line-height:1.35;color:var(--navy);letter-spacing:.02em}
.bk-tk-sv em{font-style:normal;font-family:var(--serif-m);/*fw*/font-weight:500;font-size:.72em;color:var(--sub)}
/* 下半分：プラン・客室・お食事 */
.bk-tk-mid{padding:clamp(14px,1.8vw,26px) clamp(14px,2.2vw,34px) clamp(16px,2.2vw,30px)}
.bk-tk-m{display:flex;align-items:center;gap:clamp(8px,1vw,14px);min-width:0}
.bk-tk-m .bk-tk-i{width:clamp(18px,1.9vw,26px);height:clamp(18px,1.9vw,26px)}
.bk-tk-ml{flex:none;font-size:clamp(10.5px,.95vw,13px);font-family:var(--serif-b);/*fw*/font-weight:600;
letter-spacing:.06em;color:var(--gold)}
.bk-tk-mv{flex:1;min-width:0;font-family:var(--serif-b);/*fw*/font-weight:600;font-size:clamp(14px,1.5vw,21px);
line-height:1.5;color:var(--navy);letter-spacing:.02em}
.bk-tk-m2{display:flex;align-items:stretch;gap:clamp(12px,1.8vw,28px);
margin-top:clamp(11px,1.4vw,18px)}
.bk-tk-m2>.bk-tk-m{flex:1 1 0}
.bk-tk-m2>.bk-tk-m+.bk-tk-m{padding-left:clamp(12px,1.8vw,28px);
border-left:1px solid rgba(179,146,79,.45)}
.bk-tk-m2 .bk-tk-mv{flex:0 1 auto}
/* 料金の帯 */
.bk-tk-pr{display:flex;align-items:center;justify-content:center;gap:clamp(9px,1.2vw,16px);
max-width:940px;margin:clamp(13px,1.7vw,22px) auto 0;
padding:clamp(12px,1.5vw,20px) clamp(16px,2vw,28px);
background:rgba(255,255,255,.85);border:1px solid rgba(179,146,79,.34);border-radius:11px;
flex-wrap:wrap}
.bk-tk-pr .bk-tk-i{width:clamp(20px,2vw,27px);height:clamp(20px,2vw,27px)}
.bk-tk-pr-ask p{font-size:clamp(13px,1.35vw,18px);font-family:var(--serif-b);/*fw*/font-weight:600;
letter-spacing:.06em;color:var(--navy)}
.bk-tk-pr-k{font-size:clamp(11.5px,1vw,13.5px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.05em;color:var(--sub)}
.bk-tk-pr-k em{font-style:normal;color:var(--mute)}
.bk-tk-pr-v{display:flex;align-items:baseline;gap:2px;font-size:clamp(12px,1.05vw,14px);
font-family:var(--serif-b);/*fw*/font-weight:600;color:var(--navy)}
.bk-tk-pr-v b{font-family:var(--en),var(--serif);font-weight:600;
font-size:clamp(24px,2.8vw,38px);line-height:1;color:var(--navy);
font-variant-numeric:lining-nums}
.bk-tk-pr-v i{font-style:normal;font-size:clamp(10.5px,.95vw,12.5px);color:var(--mute);margin-left:3px}
@media(max-width:640px){
.bk-tk-top{flex-direction:column;gap:clamp(13px,3vw,18px)}
.bk-tk-dates{padding-right:0}
.bk-tk-side{padding-left:0;border-left:0;padding-top:clamp(12px,3vw,16px);
border-top:1px dotted rgba(179,146,79,.6)}
.bk-tk-m2{flex-direction:column;gap:11px}
.bk-tk-m2>.bk-tk-m+.bk-tk-m{padding-left:0;border-left:0;padding-top:11px;
border-top:1px dotted rgba(179,146,79,.5)}
}
/* いちばん下の帯 */
.bk-tk-ft{display:flex;justify-content:flex-end;background:var(--paper-2);
border-top:1px dashed rgba(179,146,79,.45);
padding:clamp(9px,1.2vw,16px) clamp(13px,2.1vw,34px)}
.bk-tk-ft a{display:inline-flex;align-items:center;gap:5px;font-size:clamp(11.5px,.95vw,13px);
letter-spacing:.04em;color:var(--gold);border-bottom:1px solid rgba(179,146,79,.5);
transition:color .25s,border-color .25s}
.bk-tk-ft a span{font-size:14px;line-height:1}
.bk-tk-ft a:hover{color:var(--navy);border-bottom-color:rgba(12,31,49,.35)}
/* 入力欄 */
.bk-fm-g{display:flex;flex-wrap:wrap;gap:clamp(13px,1.7vw,18px) clamp(11px,1.4vw,16px);
margin-top:clamp(18px,2.2vw,26px)}
.bk-fm-f{flex:1 1 100%;display:flex;flex-direction:column;min-width:0}
.bk-fm-f.half{flex:1 1 calc(50% - clamp(6px,.7vw,8px))}
.bk-fm-l{display:flex;align-items:center;gap:8px;margin-bottom:6px;
font-size:12.5px;font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.05em;color:var(--navy)}
.bk-req,.bk-opt{font-style:normal;flex:none;font-size:10px;font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.06em;
padding:2px 7px 3px;border-radius:3px;line-height:1.3}
.bk-req{background:#b4585c;color:#fff}
.bk-opt{background:rgba(12,31,49,.08);color:var(--sub)}
.bk-fm-f input,.bk-fm-f select,.bk-fm-f textarea{
width:100%;font-family:var(--serif);font-size:16px;color:var(--ink);
background:#f7f5f0;border:1px solid rgba(12,31,49,.14);border-radius:8px;
padding:12px 13px;line-height:1.7;transition:border-color .25s,background .25s}
.bk-fm-f textarea{resize:vertical;min-height:88px}
.bk-fm-f input:focus,.bk-fm-f select:focus,.bk-fm-f textarea:focus{
outline:none;border-color:var(--gold);background:#fff}
.bk-fm-f input::placeholder,.bk-fm-f textarea::placeholder{color:#b3bcc3}
.bk-fm-sel{position:relative;display:block}
.bk-fm-sel select{appearance:none;-webkit-appearance:none;padding-right:36px;cursor:pointer}
.bk-fm-sel .bk-cv{position:absolute;right:13px;top:50%;transform:translateY(-50%);
width:17px;height:17px;pointer-events:none;fill:none;stroke:var(--mute);stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
/* ラジオ */
.bk-fm-rd{display:flex;flex-wrap:wrap;gap:8px}
.bk-fm-rd label{display:flex;align-items:center;gap:7px;cursor:pointer;
background:#f7f5f0;border:1px solid rgba(12,31,49,.14);border-radius:8px;
padding:11px 14px;font-size:13px;color:var(--ink);transition:.22s}
.bk-fm-rd label:hover{border-color:rgba(179,146,79,.6)}
.bk-fm-rd input{width:16px;height:16px;flex:none;accent-color:var(--gold);margin:0}
.bk-fm-rd label:has(input:checked){border-color:var(--gold);background:#fffdf8;font-family:var(--serif-b);/*fw*/font-weight:600}
.bk-fm-n{margin-top:6px;font-size:11px;line-height:1.8;color:var(--mute)}
.bk-fm-e{margin-top:6px;font-size:11.5px;color:#b4585c}
.bk-fm-f.bad input,.bk-fm-f.bad select,.bk-fm-f.bad textarea{border-color:#b4585c;background:#fdf6f6}
/* 同意まわり */
.bk-fm-pv{flex:1 1 100%;background:var(--paper-2);border-radius:11px;
padding:clamp(13px,1.7vw,18px) clamp(14px,1.8vw,20px);font-size:11.5px;line-height:1.95;color:var(--sub)}
.bk-fm-warn{padding-left:22px;position:relative;color:var(--ink)}
.bk-fm-warn::before{content:"!";position:absolute;left:0;top:2px;width:15px;height:15px;border-radius:50%;
background:#b4585c;color:#fff;font-family:var(--en),serif;font-size:11px;font-weight:700;
display:flex;align-items:center;justify-content:center}
.bk-fm-warn b{color:var(--navy);font-family:var(--serif-b);/*fw*/font-weight:600}
.bk-fm-pv p+p{margin-top:8px}
.bk-fm-ag{display:flex;align-items:center;gap:9px;margin-top:12px;cursor:pointer;
font-size:12.5px;font-family:var(--serif-b);/*fw*/font-weight:600;color:var(--navy)}
.bk-fm-ag input{width:18px;height:18px;flex:none;accent-color:var(--gold);margin:0}
/* 送信ボタン */
.bk-fm-go{flex:1 1 100%;display:flex;align-items:center;justify-content:center;gap:10px;
position:relative;padding:17px 18px;border:1px solid rgba(220,196,143,.5);border-radius:8px;
background:linear-gradient(180deg,#173a5c 0%,#0c1f31 100%);color:#fff;cursor:pointer;
font-family:var(--serif-m);font-size:clamp(14px,1.5vw,15.5px);font-weight:500;letter-spacing:.1em;
box-shadow:0 8px 20px rgba(12,31,49,.2);transition:filter .3s}
.bk-fm-go:hover{filter:brightness(1.13)}
.bk-fm-go:disabled{opacity:.6;cursor:default}
.bk-fm-go .bk-ar{width:19px;height:19px;fill:none;stroke:var(--gold-l);stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ez)}
.bk-fm-go:hover .bk-ar{transform:translateX(4px)}
.bk-fm-go.sending{pointer-events:none}
.bk-fm-tel{flex:1 1 100%;margin-top:2px;text-align:center;font-size:11.5px;color:var(--mute)}
.bk-fm-tel a{color:var(--gold);font-family:var(--serif-b);/*fw*/font-weight:600;border-bottom:1px solid rgba(179,146,79,.5)}
/* 送信後の画面 */
.bk-fm-done{text-align:center}
.bk-fm-ok{display:flex;align-items:center;justify-content:center;width:52px;height:52px;
margin:0 auto 14px;border-radius:50%;background:rgba(63,143,111,.12)}
.bk-fm-ok svg{width:28px;height:28px;fill:none;stroke:#3f8f6f;stroke-width:1.6;
stroke-linecap:round;stroke-linejoin:round}
.bk-fm-done .bk-fm-go{display:inline-flex;flex:none;margin-top:16px;min-width:min(300px,100%)}
.bk-fm-n2{margin-top:12px;font-size:11.5px;line-height:1.95;color:var(--mute)}
.bk-fm-cp{margin-top:18px;font-size:11.5px;line-height:1.95;color:var(--sub)}
.bk-fm-cp a{color:var(--gold);border-bottom:1px solid rgba(179,146,79,.5)}
.bk-fm-pre{margin-top:10px;padding:13px 14px;text-align:left;white-space:pre-wrap;word-break:break-all;
background:var(--paper-2);border:1px solid var(--line);border-radius:9px;
font-family:var(--serif);font-size:11.5px;line-height:1.95;color:var(--ink);
max-height:270px;overflow:auto}
.bk-fm-copy{margin-top:10px;padding:10px 20px;border:1px solid rgba(12,31,49,.22);border-radius:7px;
background:#fff;cursor:pointer;font-family:var(--serif);font-size:12.5px;letter-spacing:.06em;
color:var(--navy);transition:.25s}
.bk-fm-copy:hover{background:var(--navy);border-color:var(--navy);color:#fff}
@media(max-width:520px){
.bk-fm-f.half{flex:1 1 100%}
.bk-tk-dl>div{flex-direction:column;gap:3px}
.bk-tk-dl dt{width:auto}
}
/* せまい画面では、チケット上部を「ご宿泊日」と「泊数・人数」の2段にします */
@media(max-width:430px){
.bk-tk-hd{flex-wrap:wrap;row-gap:11px}
.bk-tk-cell1{flex:1 1 100%;padding-left:2px;padding-right:2px}
.bk-tk-cell:not(.bk-tk-cell1){flex:1 1 0;padding-left:0;padding-right:8px;border-left:0}
.bk-tk-cell:last-child{padding-left:12px;padding-right:0;
border-left:1px dashed rgba(179,146,79,.5)}
.bk-tk-sm{display:block;margin-left:0}
}
/* ---------------- ⑦ ご予約ありがとうございました ---------------- */
/* 背景：上に水平線、下に波。画像は assets/images/thanks-top.webp と thanks-bottom.webp
高さは下の clamp() の数字で変わります */
.tk-wrap{position:relative;background:#fbfcfd;overflow:hidden;
padding-bottom:clamp(150px,20vw,260px)}
.tk-wrap::before,.tk-wrap::after{content:"";position:absolute;left:0;right:0;z-index:0;
pointer-events:none}
.tk-wrap::before{top:0;height:clamp(120px,16vw,220px);
background:url("assets/images/thanks-top.webp") center top/cover no-repeat}
.tk-wrap::after{bottom:0;height:clamp(130px,17vw,240px);
background:url("assets/images/thanks-bottom.webp") center bottom/cover no-repeat}
.tk-wrap>.inner{position:relative;z-index:1;max-width:760px}
.tk{text-align:center;padding:clamp(70px,14vw,150px) 0 0}
/* 金色の丸チェック */
.tk-ok{display:flex;align-items:center;justify-content:center;width:clamp(56px,6.4vw,72px);
height:clamp(56px,6.4vw,72px);margin:0 auto;border-radius:50%;
border:1.5px solid var(--gold);background:rgba(255,255,255,.72)}
.tk-ok svg{width:52%;height:52%;fill:none;stroke:var(--gold);stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.tk-en{display:block;margin-top:14px;font-family:var(--en),serif;font-size:12px;
letter-spacing:.32em;text-transform:none;color:var(--gold)}
.tk h1{margin-top:8px;font-size:clamp(20px,2.9vw,32px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.13em;
line-height:1.55;color:var(--navy)}
.tk-rule{display:block;width:30px;height:1px;margin:clamp(13px,1.6vw,18px) auto 0;
background:var(--gold);opacity:.8}
.tk-rule.sm{width:22px;margin-top:9px}
.tk-lead{margin-top:clamp(13px,1.6vw,18px);font-size:clamp(12.5px,1.35vw,14.5px);
line-height:2.15;color:var(--sub)}
.tk-lead b{color:var(--navy);font-family:var(--serif-b);/*fw*/font-weight:600}
/* 生成りのカード */
.tk-card{margin-top:clamp(20px,2.6vw,32px);text-align:left;
padding:clamp(18px,2.2vw,28px) clamp(16px,2.1vw,28px);
background:rgba(250,247,240,.92);border:1px solid rgba(179,146,79,.22);border-radius:14px;
box-shadow:0 4px 20px rgba(12,31,49,.05)}
.tk-card-h{display:flex;align-items:center;gap:10px;
font-size:clamp(14px,1.6vw,17px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.09em;color:var(--navy)}
.tk-card-h .tk-ic{width:21px;height:21px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.4;
stroke-linecap:round;stroke-linejoin:round}
/* このあとの流れ */
.tk-st{margin:clamp(14px,1.8vw,20px) 0 0;padding:0;list-style:none;counter-reset:tk}
.tk-st li{position:relative;display:flex;align-items:flex-start;gap:13px;counter-increment:tk;
padding-bottom:clamp(13px,1.6vw,18px)}
.tk-st li:last-child{padding-bottom:0}
.tk-st li i{position:relative;z-index:2;flex:none;width:24px;height:24px;border-radius:50%;
background:var(--navy);color:#fff;font-style:normal;
font-family:var(--en),var(--serif);font-size:12px;font-weight:600;
display:flex;align-items:center;justify-content:center;margin-top:1px}
.tk-st li i::before{content:counter(tk)}
/* 番号どうしをつなぐ点線 */
.tk-st li:not(:last-child)::before{content:"";position:absolute;left:11.5px;top:25px;bottom:2px;
border-left:1px dashed rgba(179,146,79,.55)}
.tk-st li span{flex:1;min-width:0;font-size:clamp(12px,1.3vw,13.5px);line-height:1.95;color:var(--sub)}
.tk-st li span b{color:var(--gold);font-family:var(--serif-b);/*fw*/font-weight:600}
.tk-note{margin-top:clamp(14px,1.8vw,18px);padding-top:clamp(13px,1.6vw,17px);
border-top:1px solid rgba(179,146,79,.25);
font-size:11.5px;line-height:1.95;color:var(--mute)}
.tk-note b{color:var(--sub);font-family:var(--serif-b);/*fw*/font-weight:600}
/* 電話番号（両側に細い線） */
.tk-tel{display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,18px);
margin-top:clamp(13px,1.6vw,18px)}
.tk-tel::before,.tk-tel::after{content:"";flex:1;height:1px;background:rgba(179,146,79,.35)}
.tk-tel a{display:flex;align-items:center;gap:9px;flex:none;
font-family:var(--en),var(--serif);font-size:clamp(19px,2.3vw,25px);font-weight:600;
letter-spacing:.04em;color:var(--gold);font-variant-numeric:lining-nums}
.tk-teli{width:18px;height:18px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.5;
stroke-linecap:round;stroke-linejoin:round}
/* ご宿泊日・カレンダー登録 */
.tk-cal-d{margin-top:12px;font-size:clamp(15px,1.8vw,19px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.05em;
color:var(--navy)}
.tk-cal-d span{display:inline-block;margin-left:9px;font-size:11.5px;font-weight:400;color:var(--mute)}
.tk-cal-t{margin-top:7px;font-size:11.5px;line-height:1.95;color:var(--sub)}
.tk-cal-b{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}
.tk-cb{flex:1 1 200px;display:flex;align-items:center;justify-content:center;gap:8px;
padding:13px 16px;border-radius:8px;cursor:pointer;
background:linear-gradient(180deg,#173a5c 0%,#0c1f31 100%);
border:1px solid rgba(220,196,143,.5);color:#fff;
font-size:12.5px;font-family:var(--serif-m);/*fw*/font-weight:500;letter-spacing:.06em;transition:filter .3s}
.tk-cb:hover{filter:brightness(1.13)}
.tk-cb.sub{background:rgba(255,255,255,.85);border-color:rgba(12,31,49,.2);color:var(--navy)}
.tk-cb.sub:hover{filter:none;background:var(--navy);border-color:var(--navy);color:#fff}
.tk-cbi{width:17px;height:17px;flex:none;fill:none;stroke:var(--gold-l);stroke-width:1.4;
stroke-linecap:round;stroke-linejoin:round}
.tk-cb.sub .tk-cbi{stroke:var(--gold)}
.tk-cb.sub:hover .tk-cbi{stroke:var(--gold-l)}
/* ご滞在の前に */
.tk-lk{margin-top:clamp(26px,3.4vw,44px)}
.tk-lk-h{font-size:clamp(13px,1.5vw,15px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.11em;color:var(--navy)}
.tk-lk-g{display:grid;grid-template-columns:1fr;
gap:clamp(9px,1.2vw,14px);margin-top:clamp(14px,1.8vw,20px)}
@media(min-width:560px){.tk-lk-g{grid-template-columns:1fr 1fr}}
.tk-lk-g a{display:flex;align-items:center;gap:12px;padding:15px 16px;
background:rgba(255,255,255,.88);border:1px solid rgba(12,31,49,.12);border-radius:10px;
color:var(--navy);transition:.26s}
.tk-lk-g a:hover{background:var(--navy);border-color:var(--navy);color:#fff;
box-shadow:0 6px 18px rgba(12,31,49,.16)}
.tk-lk-g .tk-ic{width:22px;height:22px;flex:none;fill:none;stroke:var(--navy);stroke-width:1.4;
stroke-linecap:round;stroke-linejoin:round;transition:stroke .26s}
.tk-lk-g a:hover .tk-ic{stroke:var(--gold-l)}
.tk-lk-g b{flex:1;min-width:0;font-size:13px;font-family:var(--serif-m);/*fw*/font-weight:500;letter-spacing:.06em}
.bk-cvs{width:7px;height:12px;flex:none;fill:none;stroke:var(--gold);stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round}
.tk-lk-g a:hover .bk-cvs{stroke:var(--gold-l)}
/* 完了ページでは、下の「空室・ご予約」CTAとスマホの固定バーは出しません */
.tk-wrap ~ .cta,.tk-wrap ~ .mcta{display:none}
.tk-back{margin-top:clamp(20px,2.4vw,28px);font-size:11.5px}
.tk-back a{color:var(--sub);border-bottom:1px solid rgba(12,31,49,.2)}
.tk-back a:hover{color:var(--gold);border-bottom-color:rgba(179,146,79,.5)}
@media(max-width:520px){
.tk-cal-b{flex-direction:column}
.tk-cb{flex:none;width:100%}
.tk-tel::before,.tk-tel::after{display:none}
}
/* ---------------- スマホ ---------------- */
@media(min-width:641px){
.bk-pc-go{align-self:flex-start;min-width:250px;padding-left:30px;padding-right:30px}
}
@media(max-width:900px){
.bk-pc-ph{width:42%}
}
@media(max-width:640px){
.bk-pd-wrap{padding-top:64px}
/* スマホでも「写真は左、文字は右」の横並びのままにします */
.bk-pc{flex-direction:row;border-radius:11px}
.bk-pc-ph{width:47%;max-width:none}
.bk-pc-tx{padding:11px 11px 12px}
.bk-pc-tx h3{font-size:13.5px;line-height:1.45;letter-spacing:.02em}
.bk-pc-l{margin-top:4px;font-size:10px;line-height:1.7}
.bk-pc-m{margin-top:6px;gap:3px 9px;font-size:9.5px}
.bk-pc-m svg{width:11px;height:11px}
.bk-pc-p{padding-top:7px;gap:0 5px}
.bk-pc-for{font-size:9.5px}
.bk-pc-n{font-size:18px}
.bk-pc-tax{font-size:8.5px}
.bk-pc-ask{font-size:10.5px}
.bk-pc-go{margin-top:6px;padding:8px 22px;font-size:10.5px;letter-spacing:.03em}
.bk-pc-go .bk-ar{right:9px;width:13px;height:13px}
.bk-bd{font-size:9.5px;padding:3px 17px 4px 9px;
clip-path:polygon(0 0,100% 0,calc(100% - 11px) 100%,0 100%)}
.bk-more{font-size:12.5px;padding:13px 14px}
.bk-row .bk-lb{width:6em;font-size:11.5px}
.bk-row .bk-val{font-size:14px}
.bk-d{min-height:50px}
.bk-d-e{min-height:50px}
.bk-d-y{font-size:8.5px}
.bk-fix-p b{font-size:17px}
.bk-fix-go{font-size:12.5px;padding:12px 10px}
}
@media(max-width:380px){
.bk-pc-ph{width:45%}
.bk-pc-tx{padding:10px 9px 11px}
.bk-pc-tx h3{font-size:12.5px}
.bk-pc-l{font-size:9.5px;line-height:1.65}
.bk-pc-n{font-size:16.5px}
.bk-pc-go{font-size:10px;padding:7px 20px}
.bk-pc-go .bk-ar{right:8px;width:12px;height:12px}
.bk-card{padding:15px 12px 14px}
.bk-row{padding:11px 10px;gap:8px}
.bk-row .bk-lb{width:5.7em;font-size:11px}
.bk-d-y{font-size:8px}
}
@media(prefers-reduced-motion:reduce){.bk-go::after{display:none}}
/* == ご予約ページ ここまで == */
/* == 右はしの縦タブ2つ（ご予約／AIコンシェルジュ） == */
/* 2つのタブを縦に重ねる入れもの。gap でタブどうしのすき間が変わります */
.side-tabs{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:200;
display:flex;flex-direction:column;align-items:flex-end;gap:10px;pointer-events:none}
.side-tabs>*{pointer-events:auto}
body.cb-open .side-tabs{opacity:0;pointer-events:none;transition:opacity .3s}
/* 画像をそのまま使うタブ。もとのタブの飾り（金わく・紺地）は打ち消します */
.img-tab{position:relative;right:auto;top:auto;display:block;
padding:0;border:0;background:none;box-shadow:none;border-radius:0;
cursor:pointer;overflow:visible;
/* 幅：ふつうは70px。画面が低い／狭いときは自動で小さくなります */
width:max(42px, min(70px, 8.6vh, 17vw));
filter:drop-shadow(-4px 5px 14px rgba(6,16,26,.34));
transform:none;transition:transform .35s var(--ez),filter .3s}
.img-tab::before,.img-tab::after{content:none;display:none}
.img-tab img{display:block;width:100%;height:auto}
.img-tab:hover{transform:translateX(-4px);
filter:drop-shadow(-7px 6px 18px rgba(6,16,26,.44))}
@media(prefers-reduced-motion:reduce){.img-tab{transition:none}}
/* == 右はしの縦タブ2つ ここまで == */
/* == 規約・ポリシーのページ == */
.lg-wrap{background:#fdfdfc;padding-bottom:clamp(50px,7vw,100px)}
.lg-wrap>.inner{max-width:820px}
.lg-h1{margin-top:clamp(6px,1vw,14px);text-align:center;
font-size:clamp(21px,2.8vw,31px);font-family:var(--serif-m);/*fw*/font-weight:500;letter-spacing:.16em;color:var(--navy)}
.lg-h1::after{content:"";display:block;width:46px;height:1px;margin:14px auto 0;
background:linear-gradient(90deg,transparent,var(--gold) 22%,var(--gold) 78%,transparent)}
.lg-lead{margin-top:clamp(16px,2vw,24px);font-size:clamp(12.5px,1.05vw,14px);
font-family:var(--serif-m);/*fw*/font-weight:500;line-height:2.1;color:var(--sub)}
.lg-sec{margin-top:clamp(26px,3.4vw,46px);padding:0} /* 全体の section の余白を打ち消します */
/* start="2" のように途中から始まる番号にも対応します */
.lg-ol[start="2"]{counter-reset:lg 1}
.lg-ol[start="3"]{counter-reset:lg 2}
.lg-ol[start="4"]{counter-reset:lg 3}
.lg-ol[start="5"]{counter-reset:lg 4}
.lg-ol[start="6"]{counter-reset:lg 5}
.lg-sec h2{display:flex;align-items:center;gap:clamp(8px,1vw,12px);
font-size:clamp(14px,1.4vw,18px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.08em;color:var(--navy);
padding-bottom:clamp(9px,1.1vw,13px);border-bottom:1px solid rgba(179,146,79,.34)}
.lg-sec h2::before{content:"";flex:none;width:3px;height:1.05em;border-radius:2px;background:var(--gold)}
.lg-h3{margin-top:clamp(16px,2vw,24px);font-size:clamp(13px,1.15vw,15px);font-family:var(--serif-b);/*fw*/font-weight:600;
letter-spacing:.06em;color:var(--navy)}
.lg-sec p{margin-top:clamp(11px,1.3vw,16px);font-size:clamp(12.5px,1.05vw,14px);
font-family:var(--serif-m);/*fw*/font-weight:500;line-height:2.05;color:var(--ink)}
.lg-sec p b,.lg-sec li b{font-family:var(--serif-b);/*fw*/font-weight:700;color:var(--navy)}
.lg-sec a{color:var(--gold);font-family:var(--serif-b);/*fw*/font-weight:600;border-bottom:1px solid rgba(179,146,79,.5)}
.lg-sec a:hover{color:var(--navy);border-bottom-color:rgba(12,31,49,.35)}
/* 箇条書き（・） */
.lg-ul{margin:clamp(9px,1.1vw,14px) 0 0;padding:0;list-style:none}
.lg-ul li{position:relative;padding-left:1.15em;margin-top:7px;
font-size:clamp(12.5px,1.05vw,14px);font-family:var(--serif-m);/*fw*/font-weight:500;line-height:2.05;color:var(--ink)}
.lg-ul li::before{content:"・";position:absolute;left:0;color:var(--gold)}
/* 番号つき（1. 2. 3.） */
.lg-ol{margin:clamp(9px,1.1vw,14px) 0 0;padding:0;list-style:none;counter-reset:lg}
.lg-ol>li{position:relative;counter-increment:lg;padding-left:2.1em;margin-top:clamp(9px,1.1vw,14px);
font-size:clamp(12.5px,1.05vw,14px);font-family:var(--serif-m);/*fw*/font-weight:500;line-height:2.05;color:var(--ink)}
.lg-ol>li::before{content:counter(lg) ".";position:absolute;left:0;top:0;
width:1.7em;font-family:var(--en),var(--serif);font-weight:600;
font-size:1.05em;color:var(--gold);font-variant-numeric:lining-nums}
.lg-ol .lg-ul{margin-top:5px}
.lg-ol .lg-ul li{margin-top:4px}
/* 定義リスト（名称・所在地など） */
.lg-dl{margin-top:clamp(11px,1.3vw,16px);border-top:1px solid rgba(12,31,49,.09)}
.lg-dl>div{display:flex;gap:clamp(10px,1.6vw,22px);
padding:clamp(10px,1.2vw,14px) 2px;border-bottom:1px solid rgba(12,31,49,.09)}
.lg-dl dt{flex:none;width:9.5em;font-size:clamp(12px,1vw,13.5px);font-family:var(--serif-b);/*fw*/font-weight:700;
color:var(--navy);letter-spacing:.04em;line-height:1.9}
.lg-dl dd{flex:1;min-width:0;font-size:clamp(12.5px,1.05vw,14px);font-family:var(--serif-m);/*fw*/font-weight:500;
line-height:1.95;color:var(--ink)}
.lg-sub{display:block;margin-top:2px;font-size:.88em;font-weight:400;color:var(--sub)}
/* 表（キャンセル料） */
.lg-tbl-w{margin-top:clamp(14px,1.8vw,22px);overflow-x:auto}
.lg-tbl{width:100%;border-collapse:collapse;background:#fff;
border:1px solid rgba(12,31,49,.1);border-radius:10px;overflow:hidden}
.lg-tbl caption{caption-side:top;text-align:left;padding-bottom:9px;
font-size:clamp(11.5px,.95vw,13px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.06em;color:var(--gold)}
.lg-tbl th,.lg-tbl td{padding:clamp(10px,1.2vw,15px) clamp(11px,1.4vw,20px);
font-size:clamp(12px,1vw,13.5px);line-height:1.8;text-align:left;
border-bottom:1px solid rgba(12,31,49,.08)}
.lg-tbl thead th{background:var(--paper-2);font-family:var(--serif-b);/*fw*/font-weight:700;color:var(--navy);
letter-spacing:.05em;white-space:nowrap}
.lg-tbl tbody th,.lg-tbl tbody td{font-family:var(--serif-b);/*fw*/font-weight:600;color:var(--ink)}
.lg-tbl tbody td:last-child{font-family:var(--en),var(--serif);font-weight:600;
color:var(--navy);font-variant-numeric:lining-nums;white-space:nowrap}
.lg-tbl tbody tr:last-child th,.lg-tbl tbody tr:last-child td{border-bottom:0}
/* 補足（※のところ） */
.lg-note{margin-top:clamp(10px,1.2vw,15px);padding:clamp(11px,1.3vw,17px) clamp(12px,1.5vw,20px);
background:var(--paper-2);border-radius:9px;
font-size:clamp(11.5px,.98vw,13px)!important;font-family:var(--serif-m);/*fw*/font-weight:500;line-height:2;color:var(--sub)!important}
/* 未確定のところ（公開前に消してください） */
.lg-todo{display:inline-block;padding:2px 9px;border-radius:5px;
background:rgba(198,86,66,.1);border:1px dashed rgba(198,86,66,.5);
font-size:.92em;font-family:var(--serif-b);/*fw*/font-weight:600;color:#a34b38}
.lg-rev{margin-top:clamp(28px,3.6vw,48px);text-align:right;
font-size:clamp(11.5px,.95vw,13px);font-family:var(--serif-m);/*fw*/font-weight:500;color:var(--mute)}
.lg-back{margin-top:clamp(20px,2.4vw,30px);text-align:center;font-size:clamp(11.5px,.95vw,13px)}
.lg-back a{font-family:var(--serif-b);/*fw*/font-weight:600;color:var(--sub);border-bottom:1px solid rgba(12,31,49,.2)}
.lg-back a:hover{color:var(--gold);border-bottom-color:rgba(179,146,79,.5)}
@media(max-width:520px){
.lg-dl>div{flex-direction:column;gap:3px}
.lg-dl dt{width:auto}
/* せまい画面では、表を折り返して横スクロールをなくします */
.lg-tbl thead th{white-space:normal}
.lg-tbl th,.lg-tbl td{padding:10px 11px}
}
/* == 規約・ポリシーのページ ここまで == */
/* == コンシェルジュの質問ボタン == */
/* 下の質問ボタンの並び。数が増えても、この中だけスクロールします */
.cb-chips{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;background:#fff;
border-top:1px solid rgba(12,31,49,.08);max-height:168px;overflow-y:auto}
.cb-chips-h{flex:1 1 100%;font-size:10.5px;letter-spacing:.08em;color:var(--mute);
padding:1px 2px 3px}
.cb-chips button{background:#fff;border:1px solid rgba(179,146,79,.55);border-radius:20px;
padding:6px 12px;font-family:var(--serif-b);font-size:11.5px;font-weight:600;letter-spacing:.03em;
color:var(--navy);cursor:pointer;transition:background .25s,color .25s,border-color .25s;
text-align:left;line-height:1.5}
.cb-chips button:hover{background:var(--gold);border-color:var(--gold);color:#fff}
/* 「カテゴリーから探す」「もどる」など、内容ではないボタン */
.cb-chips button.sub{border-color:rgba(12,31,49,.2);color:var(--sub);font-family:var(--serif-m);/*fw*/font-weight:500}
.cb-chips button.sub:hover{background:var(--navy);border-color:var(--navy);color:#fff}
.cb-msg b{font-family:var(--serif-b);/*fw*/font-weight:700;color:var(--navy)}
.cb-msg.me b{color:#fff}
/* == コンシェルジュの質問ボタン ここまで == */
/* == Instagram のご案内（トップ） == */
/* 上下の余白は、この padding の数字で変わります */
.ig-sec{background:#fafafa;padding:clamp(52px,7vw,104px) clamp(20px,5vw,60px)}
.ig-in{display:flex;align-items:center;gap:clamp(26px,5vw,80px)}
/* 左のまるいイラスト */
.ig-ph{flex:none;width:clamp(150px,24vw,330px)}
.ig-ph img{display:block;width:100%;height:auto;border-radius:50%}
.ig-tx{flex:1;min-width:0}
/* Instagram のマークと文字 */
.ig-brand{display:flex;align-items:center;gap:clamp(9px,1.1vw,15px)}
.ig-mark{flex:none;display:inline-flex;align-items:center;justify-content:center;
width:1em;height:1em;border-radius:26%;
background:linear-gradient(45deg,#f9ce34 4%,#ee2a7b 48%,#6228d7 96%)}
.ig-brand .ig-mark{font-size:clamp(30px,3.4vw,46px)}
.ig-mark svg{width:72%;height:72%;fill:none;stroke:#fff;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round}
.ig-mark svg .ig-dot{fill:#fff;stroke:none}
.ig-word{font-family:"WmScript","Great Vibes",cursive;font-weight:400;
font-size:clamp(30px,3.6vw,52px);line-height:1;letter-spacing:.01em;color:var(--navy)}
/* 見出しと金色の線 */
.ig-h{margin-top:clamp(16px,2.2vw,30px);font-size:clamp(20px,2.9vw,40px);font-family:var(--serif-m);/*fw*/font-weight:500;
line-height:1.5;letter-spacing:.06em;color:var(--navy)}
.ig-h::after{content:"";display:block;width:clamp(56px,6vw,86px);height:1px;
margin-top:clamp(13px,1.6vw,22px);
background:linear-gradient(90deg,var(--gold),rgba(179,146,79,0))}
.ig-lead{margin-top:clamp(14px,1.8vw,26px);font-size:clamp(13px,1.25vw,17px);
font-family:var(--serif-m);/*fw*/font-weight:500;line-height:2.1;letter-spacing:.04em;color:var(--ink)}
/* Instagram を見るボタン */
.ig-go{position:relative;overflow:hidden;
display:inline-flex;align-items:center;gap:clamp(10px,1.2vw,17px);
margin-top:clamp(20px,2.6vw,36px);
padding:clamp(13px,1.5vw,20px) clamp(22px,2.6vw,38px);border-radius:9px;
background:linear-gradient(90deg,#f9ce34 0%,#ee2a7b 50%,#6228d7 100%);
color:#fff;font-size:clamp(13.5px,1.35vw,18px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.08em;
box-shadow:0 8px 22px rgba(196,53,124,.26);
transition:transform .3s var(--ez),box-shadow .3s,filter .3s}
.ig-go:hover{transform:translateY(-2px);filter:brightness(1.06);
box-shadow:0 12px 28px rgba(196,53,124,.34)}
.ig-go .ig-mark{font-size:clamp(21px,2.1vw,29px);background:none;border-radius:0}
.ig-go .ig-mark svg{width:100%;height:100%;stroke-width:1.7}
.ig-go .ig-ar{flex:none;width:clamp(19px,1.9vw,26px);height:clamp(19px,1.9vw,26px);
fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
transition:transform .3s var(--ez)}
.ig-go:hover .ig-ar{transform:translateX(5px)}
/* ひかりが流れるアニメーション（ほかのCTAと同じ動き） */
.ig-go::after{content:"";position:absolute;top:0;left:-60%;width:45%;height:100%;
pointer-events:none;
background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 100%);
transform:skewX(-18deg);
animation:petShine 3.6s linear infinite;animation-delay:.9s}
.ig-go:hover::after{animation-duration:1.2s;animation-delay:0s}
@media(max-width:820px){
.ig-in{flex-direction:column;text-align:center}
.ig-brand{justify-content:center}
.ig-h::after{margin-left:auto;margin-right:auto;
background:linear-gradient(90deg,rgba(179,146,79,0),var(--gold),rgba(179,146,79,0))}
.ig-ph{width:clamp(150px,42vw,230px)}
}
/* せまい画面。右はしのタブに文字がかからないように少し小さくします */
@media(max-width:560px){
.ig-sec{padding-left:clamp(18px,5vw,26px);padding-right:clamp(30px,10vw,52px)}
.ig-h{font-size:clamp(17px,4.7vw,21px);letter-spacing:.03em}
.ig-lead{font-size:12.5px;line-height:2}
.ig-word{font-size:clamp(26px,7.6vw,34px)}
.ig-brand .ig-mark{font-size:clamp(25px,7vw,32px)}
}
@media(prefers-reduced-motion:reduce){
.ig-go::after{display:none}
.ig-go:hover{transform:none}
}
/* == Instagram のご案内 ここまで == */
/* == 紀州和華牛のご案内（お料理） == */
/* 全体。背景の色や上下の余白は、この行で変わります */
.wg2{position:relative;overflow:hidden;
background:radial-gradient(120% 90% at 78% 18%,#16202b 0%,#0a0f15 58%,#05080b 100%);
padding:clamp(42px,4.6vw,68px) clamp(20px,5vw,60px) 0}
.wg2-in{display:grid;grid-template-columns:.86fr 1.14fr;align-items:center;
gap:clamp(22px,3vw,46px);max-width:1240px;margin:0 auto}
/* ---- 左：文章 ---- */
.wg2-tx{min-width:0}
.wg2-eb{font-size:clamp(12.5px,1.25vw,17px);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.12em;
color:rgba(255,255,255,.82)}
.wg2-h{position:relative;z-index:0;margin-top:clamp(4px,.7vw,10px);line-height:1.24;
letter-spacing:.03em;color:#fff}
.wg2-h b{font-family:var(--serif-b);/*fw*/font-weight:700;font-size:clamp(34px,5.4vw,74px);
background:linear-gradient(180deg,#fdf3d4 6%,#e6c98a 42%,#b8944c 96%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.wg2-h i{font-style:normal;font-family:var(--serif-b);/*fw*/font-weight:600;font-size:clamp(20px,2.8vw,38px);color:#fff}
.wg2-h2{font-family:var(--serif-b);/*fw*/font-weight:600;font-size:clamp(23px,3.3vw,45px);color:#fff}
/* 見出しのうしろの金色の輪 */
.wg2-arc{position:absolute;left:clamp(-22px,-2vw,-13px);top:clamp(-24px,-2.4vw,-14px);
width:clamp(88px,11.4vw,158px);height:clamp(88px,11.4vw,158px);pointer-events:none;z-index:-1}
.wg2-arc svg{width:100%;height:100%;display:block}
.wg2-arc svg path{fill:none;stroke:var(--gold);stroke-width:4.2;stroke-linecap:round;
opacity:.55}
/* ---- 本文 ---- */
.wg2-lead{margin-top:clamp(15px,1.9vw,26px);font-size:clamp(14px,1.6vw,22px);
font-family:var(--serif-b);/*fw*/font-weight:600;line-height:1.85;letter-spacing:.04em;color:#fff;
padding-bottom:clamp(13px,1.6vw,22px);
border-bottom:1px solid rgba(220,196,143,.34)}
.wg2-sub{margin-top:clamp(12px,1.5vw,20px);font-size:clamp(11.5px,1.1vw,15px);
font-family:var(--serif-m);/*fw*/font-weight:500;line-height:1.95;letter-spacing:.03em;color:rgba(255,255,255,.72)}
.wg2-st{margin-top:clamp(14px,1.8vw,26px);font-size:clamp(13.5px,1.5vw,21px);
font-family:var(--serif-b);/*fw*/font-weight:600;line-height:1.8;letter-spacing:.04em;color:#fff}
.wg2-st em{font-style:normal;color:var(--gold-l)}
/* ---- 3つの特長（2段組の下に並べます。アーチ型の金わく） ---- */
.wg2-bw{max-width:1000px;margin:clamp(20px,2.6vw,40px) auto 0}
.wg2-bd{display:flex;align-items:stretch;gap:clamp(6px,1.2vw,18px);
margin:0;padding:0;list-style:none}
/* 黒地＋金色のグラデーションのふち。アーチの高さは border-radius の2つ目の数字で変わります */
.wg2-bd li{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;
text-align:center;
padding:clamp(16px,3.6vw,58px) clamp(5px,1.1vw,18px) clamp(12px,1.7vw,26px);
border:2px solid transparent;
border-radius:50% 50% 12px 12px / 38% 38% 12px 12px;
background:
linear-gradient(#050506,#0a0a0b) padding-box,
linear-gradient(168deg,#f7e8bd 0%,#dcbb74 26%,#8d7037 66%,#e2c380 100%) border-box}
/* 金色のアイコン */
.wg2-ic{display:flex;align-items:flex-end;justify-content:center;
width:100%;height:clamp(40px,7.4vw,114px)}
.wg2-ic img{width:auto;height:100%;max-width:100%;display:block;object-fit:contain}
/* 英字（LESS MARBLING など） */
.wg2-bd b{margin-top:clamp(8px,1.4vw,22px);font-family:var(--en),var(--serif);
font-weight:600;font-size:clamp(10px,2.05vw,31px);line-height:1.22;letter-spacing:.02em;
background:linear-gradient(180deg,#fbf1d2 4%,#e5c987 46%,#b4914b 98%);
-webkit-background-clip:text;background-clip:text;color:transparent}
.wg2-bd b em{display:block;font-family:var(--serif-b);font-style:normal;font-weight:700;
font-size:1.12em;letter-spacing:.02em}
/* 金色の区切り線 */
.wg2-bl{display:block;width:72%;height:1px;margin:clamp(7px,1.2vw,18px) 0;
background:linear-gradient(90deg,rgba(220,196,143,0),rgba(220,196,143,.85),rgba(220,196,143,0))}
/* 日本語の説明 */
.wg2-bt{font-size:clamp(9px,1.16vw,17px);font-family:var(--serif-m);/*fw*/font-weight:500;line-height:1.68;
letter-spacing:.01em;color:#fff}
.wg2-bt sup{font-size:.78em;vertical-align:super}
.wg2-note{margin-top:clamp(9px,1.1vw,16px);text-align:left;
font-size:clamp(9.5px,.95vw,13.5px);
font-family:var(--serif-m);/*fw*/font-weight:500;letter-spacing:.02em;color:rgba(255,255,255,.62)}
/* ---- 右：写真とタテ書き ---- */
.wg2-ph{position:relative;min-width:0}
.wg2-ph img{display:block;width:100%;height:auto;border-radius:10px;
box-shadow:0 18px 44px rgba(0,0,0,.55)}
/* パソコンでは、写真を少し縦長に切り取って余白をつめます */
@media(min-width:861px){
.wg2-ph img{aspect-ratio:1.62/1;height:auto;object-fit:cover;object-position:center 46%}
}
/* ---- 下の帯 ---- */
.wg2-foot{position:relative;max-width:1240px;
margin:clamp(26px,3.4vw,52px) auto 0;
padding:clamp(16px,2.1vw,30px) clamp(16px,2.4vw,34px);
text-align:center;
background:linear-gradient(90deg,rgba(220,196,143,.03),rgba(220,196,143,.13),rgba(220,196,143,.03));
border-top:1px solid rgba(220,196,143,.4);border-bottom:1px solid rgba(220,196,143,.4)}
.wg2-foot p{font-size:clamp(15px,1.9vw,27px);font-family:var(--serif-b);/*fw*/font-weight:600;line-height:1.6;
letter-spacing:.04em;color:#fff}
.wg2-ft-e{font-size:.66em;font-family:var(--serif-m);/*fw*/font-weight:500;letter-spacing:.08em;
color:rgba(255,255,255,.82)}
.wg2-foot b{font-family:var(--serif-b);/*fw*/font-weight:700;
background:linear-gradient(180deg,#fdf3d4 8%,#e6c98a 46%,#c2a05c 96%);
-webkit-background-clip:text;background-clip:text;color:transparent}
/* ---- タブレット・スマホ ---- */
@media(max-width:860px){
.wg2-in{grid-template-columns:1fr;gap:clamp(22px,4vw,32px)}
}
/* スマホでは、下の帯の文字を大きくして2行に折り返します */
@media(max-width:640px){
.wg2-foot{padding:clamp(15px,4vw,20px) clamp(12px,3.4vw,18px)}
.wg2-foot p{font-size:clamp(17px,5vw,21px);line-height:1.7;letter-spacing:.02em}
.wg2-ft-w{display:block}
}
@media(max-width:560px){
.wg2{padding-left:clamp(14px,4vw,22px);padding-right:clamp(14px,4vw,22px)}
/* 右はしの縦タブに3つめのアーチが隠れないよう、右にすき間をあけます */
.wg2-bw{padding-right:clamp(44px,13.5vw,58px)}
.wg2-bd{gap:5px}
.wg2-bd li{padding:clamp(13px,4.2vw,20px) 4px clamp(10px,2.6vw,14px);border-width:1.4px}
.wg2-bl{width:80%;margin:6px 0}
}
/* == 紀州和華牛のご案内 ここまで == */
/* === PERF START === */
/* プラン一覧が並ぶまでの間、高さだけ先に確保しておきます。
（中身が入れば、この指定は効かなくなります） */
.bk-plans:empty{min-height:min(calc(1178px + 59.5vw), 1960px)}
/* 日付・人数を選ぶ箱も、出来上がりの高さを先に確保しておきます */
#bkSearch{min-height:350px}
@media (min-width:1000px){ #bkSearch{min-height:390px} }
/* === PERF END === */
/* === PLANPICK START === */
/* プラン詳細ページ：カレンダーの上に出る「泊数・人数」の選択 */
.bk-pk{max-width:700px;margin:0 auto clamp(16px,2.2vw,26px)}
.bk-pk-rows{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bk-pk .bk-row{margin:0}
.bk-pk .bk-val{white-space:nowrap;font-size:clamp(13px,1.5vw,15.5px)}
.bk-pk .bk-lb{flex:0 0 auto}
.bk-pk .bk-pax{grid-column:1 / -1}
.bk-pk-now{margin:clamp(12px,1.8vw,18px) 0 0;text-align:center;
font-family:var(--serif);font-size:clamp(13px,3.3vw,15px);letter-spacing:.05em;color:var(--ink)}
.bk-pk-now b{color:var(--gold);font-family:var(--serif-b);/*fw*/font-weight:600;letter-spacing:.06em}
@media (max-width:560px){
.bk-pk-rows{grid-template-columns:1fr}
}
/* === PLANPICK END === */
/* === DATES START === */
/* ---------------- 日程を選ぶページ ---------------- */
.bk-dt-wrap{padding-bottom:clamp(90px,12vw,130px)}
#bkDates{max-width:760px;margin:0 auto}
.bk-dt-h{margin:clamp(10px,1.6vw,18px) 0 0;text-align:center;
font-family:var(--serif-m),var(--serif);font-weight:500;
font-size:clamp(21px,3.4vw,31px);letter-spacing:.12em;color:var(--navy);line-height:1.5}
.bk-dt-lead{margin:clamp(10px,1.4vw,15px) 0 clamp(20px,2.8vw,30px);text-align:center;
font-size:clamp(12.5px,3.2vw,14px);line-height:2;color:var(--sub);letter-spacing:.05em}
/* 選択中のプランを、小さくおさらいする箱 */
.bk-dt-plan{display:grid;grid-template-columns:clamp(96px,26vw,140px) 1fr;
gap:clamp(12px,2vw,20px);align-items:center;
padding:clamp(12px,1.8vw,18px);border:1px solid var(--line);border-radius:14px;
background:#fffdf9;margin-bottom:clamp(18px,2.6vw,28px)}
.bk-dt-ph{border-radius:10px;overflow:hidden;aspect-ratio:4/3;background:#f2efe9}
.bk-dt-ph img{width:100%;height:100%;object-fit:cover}
.bk-dt-pt{min-width:0}
.bk-dt-tag{display:inline-block;padding:3px 10px;border-radius:999px;
background:var(--navy);color:#fff;font-size:10.5px;letter-spacing:.14em}
.bk-dt-nm{margin:8px 0 0;font-family:var(--serif-m),var(--serif);font-weight:500;
font-size:clamp(14.5px,3.5vw,18px);line-height:1.65;letter-spacing:.06em;color:var(--navy)}
.bk-dt-rm{margin:5px 0 0;font-size:clamp(12px,3vw,13px);color:var(--sub);letter-spacing:.05em}
.bk-dt-back{margin:9px 0 0;font-size:11.5px;letter-spacing:.05em}
.bk-dt-back a{color:var(--gold);text-decoration:none;border-bottom:1px solid rgba(179,146,79,.45);
padding-bottom:1px;transition:.2s}
.bk-dt-back a:hover{opacity:.7}
/* 泊数・部屋数・人数（3つならび） */
.bk-dt-pk{max-width:none}
.bk-pk-3{grid-template-columns:repeat(3,1fr)}
.bk-pk-3 .bk-pax{grid-column:1 / -1}
@media (max-width:760px){ .bk-pk-3{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .bk-pk-3{grid-template-columns:1fr} }
/* カレンダーの「残り部屋数」 */
.bk-d-lf{font-size:10.5px;line-height:1.1;letter-spacing:0;color:#3f8f6f;
font-variant-numeric:lining-nums}
.bk-d-lf.few{color:#c08a2e}
@media (max-width:560px){ .bk-d-lf{font-size:9.5px} }
/* === DATES END === */
/* === FONTWEIGHT START === */
/* や は、ブラウザが自動で太字にします。
そのままだと並太(R)を無理に太らせた「にせ太字」になるので、
筑紫Aオールド明朝の太い書体を使うように指定しておきます。 */
b,strong,th,em,i{font-family:var(--serif-b)}
/* 英字づかいのところは、これまでどおり英字書体のまま */
.en b,.en strong,.en em,.en i{font-family:var(--en),var(--serif-b)}
/* === FONTWEIGHT END === */
/* === SIDETAB START === */
/* 右はしの縦タブを、スマホのときだけ小さくします。
タブの絵は縦長（幅の約4.4倍と3.9倍の高さ）なので、
幅を少し縮めるだけで、高さは大きく減ります。
幅の決め方
50px …… これ以上は大きくしません
5.4vh …… 画面の高さの5.4%（背の低い端末で自動的に小さくなります）
13vw …… 画面の幅の13%（横幅の狭い端末で自動的に小さくなります）
34px …… これ以下には小さくしません（押しにくくなるため） */
@media (max-width:768px){
.side-tabs{gap:7px}
.img-tab{width:max(34px, min(50px, 5.4vh, 13vw))}
}
/* 画面がとても低いとき（横向きなど）は、さらに小さくします */
@media (max-width:768px) and (max-height:560px){
.side-tabs{gap:5px}
.img-tab{width:max(28px, min(38px, 6.2vh))}
}
/* === SIDETAB END === */
/* === BKCLS START === */
/* ご予約まわりのページは、中身をJavaScriptで組み立てています。
組み上がるまでの一瞬、中身が空っぽになるため、そのままだと
フッターが下から飛び上がってきて、画面がガタッと動きます。
そこで、組み上がるまでのあいだ「だいたいこのくらいの高さになる」
という場所を先に取っておきます。
組み上がると .bk-ready が付いて、この指定は効かなくなります。
（だから、中身が短いときに余白が残ることはありません） */
@media (max-width:767px){
#bkPlan:not(.bk-ready){min-height:2150px}
#bkDates:not(.bk-ready){min-height:880px}
#bkConfirm:not(.bk-ready){min-height:1240px}
#bkForm:not(.bk-ready){min-height:2210px}
#bkThanks:not(.bk-ready){min-height:960px}
}
@media (min-width:768px){
#bkPlan:not(.bk-ready){min-height:2450px}
#bkDates:not(.bk-ready){min-height:900px}
#bkConfirm:not(.bk-ready){min-height:920px}
#bkForm:not(.bk-ready){min-height:1550px}
#bkThanks:not(.bk-ready){min-height:820px}
}
/* === BKCLS END === */
/* === PETBNW START === */
/* --------------------------------------------------------------------------
ペットの案内バナーを、画面の横いっぱいに広げます。
（ここは目立たせたいところなので、ほかの中身の枠を飛び出させています）
-------------------------------------------------------------------------- */
/* ① 客室・館内ページ
バナーだけが入っている入れものなので、左右の余白をなくします。
上下の余白はそのままです。 */
.petbn-sec{padding-left:0;padding-right:0}
.petbn-sec>.inner{max-width:none}
/* ② トップページ
こちらは客室カードと同じ入れものの中にいるので、
左右へ「画面のはしまで」はみ出させます。
50% … 入れものの半分
50vw … 画面の半分
その差のぶんだけ、外側へ広がります。 */
.room-sec .petbn{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
/* ③ 画面のはしまで届くので、角の丸みと左右の枠線は外します。
上下の枠線は、区切りとして残します。 */
.petbn{border-radius:0;border-left:0;border-right:0}
/* ④ 右はしには縦タブ（空室検索・AIコンシェルジュ）が浮いています。
文字やボタンがその下にもぐらないよう、右側だけ余白を広く取ります。
タブの幅は、パソコンで50pxほど、スマホで46pxほどです。 */
.petbn-b{padding-right:clamp(64px,7vw,120px)}
/* ⑤ 上の中身との間を、少しだけ広げます。
横いっぱいになったぶん、上に間を取ったほうが落ち着いて見えます。
間隔を変えたいときは、この2行の数字を大きく／小さくしてください。 */
.room-sec .petbn{margin-top:clamp(40px,4.6vw,64px)}
.rtype-sec + .petbn-sec{padding-top:clamp(54px,6vw,86px)}
/* ⑥ 高さを、上の「タイプ別の部屋紹介」1つぶんとそろえます。
（パソコンで610px前後。部屋紹介は611pxほどです）
スマホは、もともとこれより高いので変わりません。 */
@media(min-width:761px){
.petbn{min-height:clamp(380px,44vw,610px)}
/* 背が高くなったぶん、文字と写真の大きさも少し上げます */
.petbn-ph>img:not(.petbn-seal){min-height:0}
.petbn b{font-size:clamp(19px,2.5vw,35px)}
.petbn-t{font-size:clamp(12.5px,1.15vw,16px);line-height:2.05}
.petbn-go{padding:clamp(12px,1.35vw,18px) clamp(22px,2.6vw,38px);
font-size:clamp(13px,1.25vw,17px)}
.petbn-snap{width:clamp(72px,8.4vw,124px)}
/* 写真と文字を半分ずつに。背が高いぶん、写真の切れかたが自然になります */
.petbn{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
/* 上下の間も少し広げて、ゆったり見せます */
.petbn b{margin-top:clamp(13px,1.9vw,28px)}
.petbn-t{margin-top:clamp(10px,1.3vw,19px)}
.petbn-go{margin-top:clamp(18px,2.5vw,36px)}
}
/* --------------------------------------------------------------------------
⑦ 目立たせるための動き
動きは4つです。うるさくならないよう、どれもゆっくりにしています。
止めたいものがあれば、その animation の行を消してください。
（パソコンの設定で「視差効果を減らす」にしている方には、
いちばん下の指定で自動的にすべて止まります）
-------------------------------------------------------------------------- */
/* (1) 写真が、18秒かけてゆっくり寄って、ゆっくり戻ります */
@keyframes petZoom{from{scale:1}to{scale:1.08}}
.petbn-ph>img:not(.petbn-seal){
animation:petZoom 18s ease-in-out infinite alternate}
/* (2) 「NEW」の丸い印が、ふわりと上下に浮きます */
@keyframes petFloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
.petbn-ph img.petbn-seal{animation:petFloat 5s ease-in-out infinite}
/* (3)(4) バナーを流れる金色の光の帯と、「NEW!」枠の明滅は取りやめました。
（2026年9月／お客様のご指示）
「ページを見る」ボタンの光の帯（petShine）は、そのまま残しています。
もとに戻したいときは、この下の 1行を消して、前の指定を書き戻します */
.petbn::after{content:none;display:none}
/* 動きを減らす設定の方には、いっさい動かしません */
@media(prefers-reduced-motion:reduce){
.petbn-ph>img:not(.petbn-seal),
.petbn-ph img.petbn-seal{animation:none}
}
@media(max-width:760px){
.petbn-b{padding-right:clamp(56px,15vw,66px)}
/* 右下のわんちゃんの写真も、タブにかからない位置へずらします */
.petbn-snap{right:clamp(56px,15vw,66px)}
}
/* === PETBNW END === */
/* === SLIDER-SP START === */
/* --------------------------------------------------------------------------
横に流れる写真（周辺観光 .a-track ／ お料理ギャラリー .gal-track）を、
スマホでもきちんと流れるようにします。
-------------------------------------------------------------------------- */
/* ① 「乗せたら止まる」は、マウスが使える機械のときだけにします。
スマホでは、いちど触れた状態が残って止まりっぱなしになるためです。
（もとの指定を、ここで打ち消してから入れ直しています） */
.a-slider:hover .a-track,
.gal-slider:hover .gal-track{animation-play-state:running}
@media (hover:hover) and (pointer:fine){
.a-slider:hover .a-track,
.gal-slider:hover .gal-track{animation-play-state:paused}
}
/* キーボードで中の要素を選んだときは、パソコン・スマホとも止めます */
.a-slider:focus-within .a-track,
.gal-slider:focus-within .gal-track{animation-play-state:paused}
/* ② 描き直しのちらつきを抑えます。
（※ will-change は、あえて入れていません。横に6000px以上ある列に
付けると、iPhone で絵が真っ白になることがあるためです） */
.a-track,.gal-track{
backface-visibility:hidden;
-webkit-backface-visibility:hidden}
/* ③ スマホでは、両はしのぼかし加工を使いません。
iPhone では、動く絵と重なると真っ白になることがあるためです。 */
@media(max-width:640px){
.a-vp{-webkit-mask-image:none;mask-image:none}
}
/* === SLIDER-SP END === */
/* === SLIDEIMG START === */
/* 流れる写真の下じき。読み込みの途中でも、まっ白にはなりません */
.gal-track .ph{background:#efe8db}
.a-track .a-ph{background:#e6dfd2}
/* === SLIDEIMG END === */
/* === FVBR START === */
/* トップ一番上の文字。スマホでは、行の切れ目を決めうちにしています。
（
が、スマホのときだけ効く改行です）
1行に入る文字数は端末によって少し違うので、
いちばん狭い機種でもはみ出さない長さにそろえてあります。 */
@media(max-width:640px){
.hero h1,.hero .under{text-wrap:initial}
}
/* === FVBR END === */
/* === FADDR START === */
/* フッターの住所。スマホでは1行におさめます。
・改行（f-abr）を消します
・1行に収まるよう、この行だけ文字を少し小さくします
（clamp は「画面が狭いほど小さく、10.5px〜13px のあいだ」の意味） */
@media(max-width:640px){
.f-info li:first-child .f-v br.f-abr{display:none}
.f-info li:first-child .f-v{
font-size:clamp(10.5px,3.3vw,13px);
letter-spacing:.01em}
}
/* === FADDR END === */
/* === WM-STATIC START === */
/* 見出しの後ろの筆文字（.wm）は、動かしません。
・.reveal:not(.on)>.wm … まだ画面に入る前でも、消さずに出しておきます
・.reveal.on>.wm … 画面に入ったときの「浮かび上がる」動きを止めます
もとの動きに戻したいときは、このブロックごと消してください。 */
.reveal:not(.on)>.wm{opacity:1}
.reveal.on>.wm{animation:none;opacity:1}
/* === WM-STATIC END === */
/* === DSUB START === */
/* 所要時間の下に、小さく時期・時間帯を出します */
.a-card .d-sub{display:block;margin-top:3px;
font-family:var(--en);font-size:10.5px;letter-spacing:.07em;
color:var(--mute);opacity:.9}
/* === DSUB END === */
/* === MARQUEE-CSS START === */
/* 横スクロールで流すときの見た目。
・スクロールバーは出しません（自動で流れるので、あると目ざわりです）
・指で横へ送れるようにします（縦のスクロールはこれまでどおり） */
.a-vp.mq-on{
scrollbar-width:none;
-ms-overflow-style:none;
touch-action:pan-x pan-y;
-webkit-overflow-scrolling:touch}
.a-vp.mq-on::-webkit-scrollbar{width:0;height:0;display:none}
/* 流れているあいだ、カードを押さえつけないようにします */
.a-vp.mq-on>*{will-change:auto}
/* === MARQUEE-CSS END === */
/* === JPTIME START === */
/* 所要時間を日本語にしたので、英字用の書体から日本語の明朝に変えます。
（英字用の Cormorant Garamond には、日本語が入っていません） */
.a-card .d{font-family:var(--serif-m);font-size:12px;letter-spacing:.04em}
/* 下の小さい文字（Oct – Dec / Night View）は英語のままなので、書体もそのまま */
.camp-card .meta,.cf-card .meta,.meta{font-family:var(--serif-m)}
/* === JPTIME END === */
/* === CONTACT START === */
/* --------------------------------------------------------------------------
お問い合わせページ（contact.html）
・色や大きさは、サイト全体の設定（:root）をそのまま使っています
・ご予約フォームと違い、JavaScript を使わない素のフォームです
-------------------------------------------------------------------------- */
/* 電話番号の帯 */
.ct-tel{max-width:680px;margin-left:auto;margin-right:auto;display:flex;flex-direction:column;align-items:center;gap:2px;
margin:clamp(22px,2.8vw,34px) 0 clamp(14px,1.6vw,20px);
padding:clamp(18px,2.2vw,26px) 20px;border-radius:12px;
background:linear-gradient(160deg,#fffdf9,#f8f1e4);
border:1px solid rgba(179,146,79,.42)}
.ct-tel-l{font-size:13px;color:var(--mute);letter-spacing:.04em}
.ct-tel-n{font-family:var(--en),serif;font-size:clamp(28px,3.6vw,42px);
color:var(--navy);text-decoration:none;letter-spacing:.06em;line-height:1.25}
.ct-tel-n:hover{color:var(--gold)}
.ct-tel-h{font-size:12.5px;color:var(--mute);letter-spacing:.06em}
.ct-resv{font-size:13px;color:var(--mute);max-width:680px;margin:0 auto clamp(24px,3vw,36px);text-align:center}
/* フォーム全体 */
.ct-form{max-width:680px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:14px;
padding:clamp(22px,3vw,40px) clamp(18px,2.6vw,38px) clamp(26px,3.2vw,42px)}
.ct-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.ct-fs{border:0;padding:0;margin:0 0 clamp(20px,2.4vw,30px)}
.ct-lg{padding:0;font-family:var(--serif-b);font-weight:600;font-size:14.5px;
color:var(--navy);letter-spacing:.06em;margin-bottom:11px}
.ct-req{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:3px;
background:#b4463f;color:#fff;font-size:10.5px;letter-spacing:.08em;
font-family:var(--serif-m);font-weight:500;vertical-align:2px}
/* ご用件のえらび方 */
.ct-topics{display:grid;gap:8px}
.ct-tp{display:block;cursor:pointer}
.ct-tp input{position:absolute;opacity:0;width:0;height:0}
.ct-tp-b{display:block;border:1px solid var(--line);border-radius:9px;
padding:12px 15px;background:#fdfbf7;transition:border-color .2s,background .2s}
.ct-tp-b b{display:block;font-family:var(--serif-m);font-weight:500;
font-size:14.5px;color:var(--navy);letter-spacing:.04em}
.ct-tp-b i{display:block;margin-top:3px;font-style:normal;font-size:12.5px;color:var(--mute)}
.ct-tp:hover .ct-tp-b{border-color:rgba(179,146,79,.55)}
.ct-tp input:checked + .ct-tp-b{border-color:var(--gold);background:#fffaf0;
box-shadow:0 0 0 1px var(--gold) inset}
.ct-tp input:focus-visible + .ct-tp-b{outline:2px solid var(--gold);outline-offset:2px}
/* ふつうの入力欄 */
.ct-row{margin:0 0 clamp(16px,1.9vw,22px)}
.ct-lb{display:block;font-family:var(--serif-b);font-weight:600;font-size:14px;
color:var(--navy);letter-spacing:.05em;margin-bottom:7px}
.ct-in{display:block;width:100%;border:1px solid var(--line);border-radius:8px;
background:#fdfbf7;padding:13px 14px;font-size:16px;color:var(--navy);
font-family:inherit;line-height:1.6;transition:border-color .2s,background .2s}
.ct-in::placeholder{color:#b9b2a3}
.ct-in:hover{border-color:rgba(179,146,79,.5)}
.ct-in:focus{outline:0;border-color:var(--gold);background:#fff;
box-shadow:0 0 0 3px rgba(179,146,79,.13)}
.ct-ta{resize:vertical;min-height:150px}
.ct-hint{display:block;margin-top:5px;font-size:12px;color:var(--mute)}
.ct-2{display:grid;gap:0 clamp(14px,1.8vw,22px);grid-template-columns:1fr 1fr}
/* 同意のチェック */
.ct-agree{display:flex;align-items:flex-start;gap:10px;margin:clamp(6px,1vw,12px) 0 clamp(20px,2.4vw,28px);
font-size:13.5px;color:var(--ink);cursor:pointer;line-height:1.9}
.ct-agree input{width:19px;height:19px;margin-top:3px;flex:none;accent-color:var(--gold);cursor:pointer}
.ct-agree a{color:var(--navy)}
/* 送信ボタン */
.ct-go{display:block;width:100%;border:0;cursor:pointer;
background:linear-gradient(180deg,#1a3a5c,#122942);color:#fff;
border-radius:8px;padding:17px 20px;
font-family:var(--serif-b);font-weight:600;font-size:16px;letter-spacing:.1em;
box-shadow:0 8px 20px rgba(12,31,49,.18);transition:transform .2s,box-shadow .2s}
.ct-go:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(12,31,49,.24)}
.ct-go:active{transform:none}
.ct-note{margin:15px 0 0;font-size:12.5px;color:var(--mute);line-height:1.95}
@media(max-width:600px){
.ct-2{grid-template-columns:1fr}
.ct-form{padding:20px 15px 24px}
}
/* お料理・合宿ページの、電話ボタンのすぐ下に出す小さな入口 */
.ct-inline{margin:clamp(10px,1.2vw,15px) 0 0;font-size:13.5px}
.ct-inline a{color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(179,146,79,.55);
padding-bottom:2px}
.ct-inline a:hover{color:var(--gold);border-color:var(--gold)}
/* === CONTACT END === */
/* === PICKFIX START === */
/* --------------------------------------------------------------------------
チェックイン・泊数・部屋数の「透明な入力欄」
もとは opacity:0（まるごと透明）でした。
iPhone の Safari は、まるごと透明にした日付欄・プルダウンを
押しても反応しないことがあります。
そこで「まるごと透明」をやめ、
・背景は透明
・文字だけ透明（-webkit-text-fill-color）
にしました。見た目は今までとまったく同じで、
iPhone からはふつうの入力欄として扱われます。
-------------------------------------------------------------------------- */
.bk-row input,
.bk-row select{
position:absolute;inset:0;width:100%;height:100%;
opacity:1; /* ← 0 にしない */
z-index:2;
border:0;padding:0;margin:0;cursor:pointer;
-webkit-appearance:none;appearance:none;
font-size:16px; /* 16px 未満だと iPhone が拡大します */
font-family:inherit;
background:transparent;
color:transparent;
-webkit-text-fill-color:transparent; /* iPhone はこちらを見ます */
-webkit-tap-highlight-color:transparent;
outline:0}
/* 日付欄の中身（年月日の数字とカレンダーの絵）も消します */
.bk-row input[type="date"]::-webkit-date-and-time-value{
color:transparent;-webkit-text-fill-color:transparent;text-align:left}
.bk-row input[type="date"]::-webkit-datetime-edit,
.bk-row input[type="date"]::-webkit-datetime-edit-fields-wrapper{
color:transparent;-webkit-text-fill-color:transparent}
.bk-row input[type="date"]::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer}
.bk-row input[type="date"]::-webkit-inner-spin-button{display:none}
/* キーボードで選んでいるときは、どの行にいるか分かるようにします */
.bk-row:focus-within{border-color:var(--gold);background:#fbf9f5}
/* === PICKFIX END === */
/* === RTYPE START === */
/* 客室カードの「空き状況」の札 --------------------------------------------
客室ごとの残室数が届いたときだけ出ます。届かなければ、これまでどおり
なにも出ません。 */
.bk-rm-av{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 7px;
margin-top:11px;padding:7px 11px;border:1px solid var(--line);
border-radius:7px;background:#f7f4ed}
.bk-rm-av i{font-style:normal;font-size:13px;line-height:1;color:#3f8f6f;
font-family:var(--serif-b)}
.bk-rm-av b{font-size:12.5px;letter-spacing:.04em;color:var(--ink)}
.bk-rm-av span{font-size:10.5px;letter-spacing:.03em;color:var(--sub)}
.bk-rm-av.few i,.bk-rm-av.few b{color:#c08a2e}
.bk-rm-av.x{background:#f5efe9;border-color:#e3d6c8}
.bk-rm-av.x i,.bk-rm-av.x b{color:#a8564a}
/* === RTYPE END === */
/* === CTTEL START === */
/* お問い合わせページの電話番号の帯 ----------------------------------------
お料理ページの生成りパネル（.cp-ivory）と同じ組み方にそろえています。
数字は明朝（高さのそろった数字）です。英字書体の数字は 0 や 3 が
下に飛び出すため、電話番号には使いません。 */
.ct-tel{
max-width:680px;
margin:clamp(22px,2.8vw,34px) auto clamp(14px,1.6vw,20px); /* ← 中央ぞろえ */
display:flex;flex-direction:column;align-items:center;gap:2px;
padding:clamp(18px,2.2vw,26px) clamp(20px,3vw,34px);
border-radius:12px;
background:linear-gradient(160deg,#fffdf9,#f8f1e4);
border:1px solid rgba(179,146,79,.42);
container-type:inline-size} /* 数字を帯の幅に合わせて縮めるため */
.ct-tel .cp-div{margin:clamp(7px,.9vw,11px) 0 clamp(4px,.5vw,7px)}
.ct-tel .cp-num{font-size:clamp(20px,3.6vw,34px)}
@supports (container-type:inline-size){
.ct-tel .cp-num{font-size:clamp(20px,7.2cqw,34px)}
}
.ct-tel-n{text-decoration:none;color:var(--navy)}
.ct-tel-n:hover{color:var(--navy)} /* 色は変えず、.cp-tel の薄れる動きにそろえます */
/* === CTTEL END === */
/* === PGHEAD START === */
/* ページの見出し帯（お問い合わせ・プライバシーポリシー・宿泊約款）--------
「よくあるご質問」などと同じ .rm-head の意匠を、各ページの
h1（ページの題）にも使えるようにしています。 */
/* 帯を横いっぱいに広げると、ほんのわずかに横へはみ出します。
そのぶんを、この囲いで隠します。 */
.pg-wrap{overflow:hidden}
/* 和紙色の帯。左右いっぱいに広げ、中の文字だけを中央にそろえます */
.pg-hero{
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
margin-top:clamp(12px,1.6vw,22px);
padding:clamp(36px,4.6vw,64px) clamp(20px,5vw,60px) clamp(32px,4vw,54px);
background:var(--paper-2)}
.pg-head{margin-bottom:0}
/* .rm-head の見出しは h2 むけの指定なので、h1 にも同じものを当てます */
.pg-head h1{margin-top:8px;font-size:clamp(23px,3.05vw,37px);
font-family:var(--serif-m);/*fw*/font-weight:500;
letter-spacing:.16em;color:var(--navy);line-height:1.4}
.pg-head .rm-rule{margin-bottom:0}
.pg-lead{max-width:640px;margin:clamp(15px,1.9vw,24px) auto 0;text-align:center}
/* スマホでは、画面の右端に「空室検索・ご予約」などの細長いタブが
出ています。帯の文字がその下にもぐらないよう、左右を少し内側に
寄せます（中央ぞろえのまま、両側を同じだけ空けます）。 */
@media(max-width:760px){
.pg-hero{padding-left:clamp(40px,13vw,56px);padding-right:clamp(40px,13vw,56px)}
}
/* === PGHEAD END === */
/* === PICKSEC START === */
/* トップページ「ご用件からお選びください」--------------------------------
4つの行き先を、同じ大きさの札で並べます。
パソコンは2列、スマホは1列です。 */
.pk-sec{padding:clamp(48px,6vw,92px) clamp(20px,5vw,60px)}
.pk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(12px,1.5vw,20px);margin:0 auto;
/* 画面の右端には「空室検索・ご予約」の縦タブが出ています。
札がその下にもぐらないよう、両側に同じだけの逃げを取ります。 */
max-width:min(var(--maxw), calc(100vw - 200px))}
.pk{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;
gap:clamp(12px,1.5vw,20px);
padding:clamp(17px,2.1vw,27px) clamp(16px,2vw,26px);
background:#fff;border:1px solid var(--line);border-radius:12px;
color:var(--navy);text-decoration:none;
transition:border-color .3s,box-shadow .3s,transform .3s}
.pk:hover{border-color:var(--gold);box-shadow:0 6px 22px rgba(12,31,49,.07);
transform:translateY(-2px);color:var(--navy)}
.pk-ic{flex:none;width:clamp(30px,3.2vw,42px)}
.pk-ic svg{width:100%;height:auto;fill:none;stroke:var(--gold);stroke-width:1.35;
stroke-linecap:round;stroke-linejoin:round}
.pk-tx{min-width:0;display:block}
.pk-tx small{display:block;font-size:clamp(9.5px,.9vw,11px);letter-spacing:.14em;
color:var(--gold);font-family:var(--serif-b);/*fw*/font-weight:600}
.pk-tx strong{display:block;margin-top:5px;font-size:clamp(14px,1.35vw,17.5px);
font-family:var(--serif-b);/*fw*/font-weight:700;letter-spacing:.05em;line-height:1.5}
.pk-tx em{display:block;margin-top:6px;font-style:normal;
font-size:clamp(11px,1.02vw,12.8px);line-height:1.85;color:var(--sub);letter-spacing:.03em}
.pk-ar{flex:none;width:clamp(17px,1.7vw,22px)}
.pk-ar svg{width:100%;height:auto;fill:none;stroke:var(--navy);stroke-width:1.5;
stroke-linecap:round;stroke-linejoin:round;transition:transform .3s}
.pk:hover .pk-ar svg{transform:translateX(3px)}
.pk-note{margin-top:clamp(18px,2.2vw,28px);text-align:center;
font-size:clamp(11.5px,1.05vw,13.5px);color:var(--sub);letter-spacing:.04em}
.pk-note a{color:var(--navy);font-family:var(--serif-b);/*fw*/font-weight:700;
font-size:1.12em;letter-spacing:.02em;font-variant-numeric:lining-nums;
border-bottom:1px solid rgba(179,146,79,.5)}
/* 画面がせまいときは、右端の縦タブのぶんだけ右を空けます。
（タブは画面に貼りついているので、札が下にもぐってしまいます） */
@media(max-width:900px){
.pk-sec{padding-right:calc(max(44px, min(70px, 15vw)) + 8px)}
.pk-grid{max-width:none}
}
@media(max-width:820px){
.pk-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:420px){
.pk{gap:11px;padding:15px 14px}
.pk-tx em{font-size:11px;line-height:1.75}
}
/* === PICKSEC END === */
/* === ONEDAY START === */
/* トップページ「松林で過ごす、一日。」------------------------------------
時刻を縦に並べ、左に細い線を1本通します。
丸はその線の上に乗り、下へ順に読んでいける形です。 */
.od-sec{padding:clamp(52px,6.4vw,98px) clamp(20px,5vw,60px);background:#fff}
.od-list{position:relative;list-style:none;margin:0 auto;padding:0;
max-width:760px}
/* 縦の線。いちばん上の丸の中心から、いちばん下の丸の中心まで */
.od-list::before{content:"";position:absolute;left:calc(clamp(38px,4vw,50px) / 2);
top:clamp(19px,2vw,25px);bottom:clamp(19px,2vw,25px);
width:1px;background:rgba(179,146,79,.34)}
.od-i{position:relative;display:grid;
grid-template-columns:clamp(38px,4vw,50px) clamp(52px,5.6vw,72px) minmax(0,1fr);
align-items:start;gap:clamp(11px,1.4vw,20px);
padding-bottom:clamp(22px,2.6vw,34px)}
.od-i:last-child{padding-bottom:0}
.od-ic{position:relative;z-index:1;width:clamp(38px,4vw,50px);height:clamp(38px,4vw,50px);
display:flex;align-items:center;justify-content:center;
border-radius:50%;background:#faf7f1;border:1px solid rgba(179,146,79,.5)}
.od-ic svg{width:54%;height:auto;fill:none;stroke:var(--gold);stroke-width:1.45;
stroke-linecap:round;stroke-linejoin:round}
.od-tm{padding-top:clamp(7px,.9vw,11px);
font-family:var(--serif-b);/*fw*/font-weight:700;
font-size:clamp(14px,1.5vw,19px);letter-spacing:.02em;color:var(--navy);
font-variant-numeric:lining-nums;white-space:nowrap}
.od-tx{min-width:0;padding-top:clamp(4px,.5vw,7px)}
.od-tx small{display:block;font-family:var(--en),var(--serif);
font-size:clamp(9.5px,.92vw,11.5px);letter-spacing:.2em;color:var(--gold)}
.od-tx strong{display:block;margin-top:4px;
font-family:var(--serif-m);/*fw*/font-weight:500;
font-size:clamp(15px,1.6vw,21px);letter-spacing:.07em;line-height:1.55;color:var(--navy)}
.od-tx em{display:block;margin-top:7px;font-style:normal;
font-size:clamp(11.5px,1.05vw,13.5px);line-height:2;color:var(--sub);letter-spacing:.03em}
.od-note{max-width:760px;margin:clamp(24px,3vw,38px) auto 0;
font-size:clamp(11px,1vw,12.5px);line-height:1.9;color:var(--mute);letter-spacing:.03em}
/* 画面がせまいときは、右端の縦タブのぶんだけ右を空けます */
@media(max-width:900px){
.od-sec{padding-right:calc(max(44px, min(70px, 15vw)) + 8px)}
}
@media(max-width:560px){
/* 幅がせまいので、時刻を見出しの上に持ち上げます */
.od-i{grid-template-columns:38px minmax(0,1fr);gap:4px 12px}
.od-ic{grid-row:1 / span 2} /* 丸は、時刻と本文の両方にまたがらせます */
.od-tm{grid-column:2;padding-top:7px;font-size:14px}
.od-tx{grid-column:2;padding-top:0}
.od-tx strong{margin-top:0}
.od-tx small{display:none}
.od-list::before{left:19px}
}
/* === ONEDAY END === */
/* === CHILD START === */
/* お子様の区分（人数を選ぶところ）---------------------------------------
もとの人数欄は「大人」「子ども」を横に2つ並べる作りでした。
区分が5つに増えたので、折り返して縦に積めるようにします。 */
.bk-pax{flex-wrap:wrap}
.bk-pax>.bk-cw,
.bk-pax>.bk-cs{flex:0 0 100%;width:100%;min-width:0}
.bk-cs{display:flex;flex-direction:column;gap:7px}
.bk-cs .bk-st{flex:none}
.bk-st-c .bk-st-l{flex:1;min-width:0}
.bk-cw{display:flex;align-items:center;gap:8px;width:100%;
margin-top:4px;padding:11px 4px 11px 2px;
background:none;border:0;border-top:1px solid var(--line);
color:var(--navy);font-family:var(--serif-m);/*fw*/font-weight:500;
font-size:13px;letter-spacing:.05em;cursor:pointer;text-align:left}
.bk-cw>span{flex:1;min-width:0}
.bk-cw>em{font-style:normal;font-size:12px;color:var(--sub);letter-spacing:.03em}
.bk-cw>i{flex:none;width:8px;height:8px;border-right:1px solid var(--sub);
border-bottom:1px solid var(--sub);transform:rotate(45deg) translate(-2px,-2px);
transition:transform .25s}
.bk-cw.on>i{transform:rotate(-135deg) translate(-2px,-2px)}
.bk-cs{padding-top:2px}
.bk-st-c .bk-st-l{line-height:1.45}
.bk-st-c .bk-st-l em{display:block;font-style:normal;font-size:10.5px;
color:var(--mute);letter-spacing:.02em;margin-top:2px}
.bk-cs-n{margin-top:9px;padding:9px 11px;border-radius:7px;background:#faf7f1;
font-size:11px;line-height:1.85;color:var(--sub);letter-spacing:.02em}
.bk-cs-n b{font-family:var(--serif-b);/*fw*/font-weight:700;color:var(--navy)}
/* 料金の内訳（確認画面）------------------------------------------------- */
.bk-brk{max-width:var(--maxw);margin:clamp(10px,1.2vw,15px) auto 0;
padding:clamp(15px,1.8vw,22px) clamp(15px,1.8vw,24px);
background:#fff;border:1px solid var(--line);border-radius:12px}
.bk-brk-h{font-family:var(--serif-b);/*fw*/font-weight:700;font-size:12.5px;
letter-spacing:.1em;color:var(--navy)}
.bk-brk-l{list-style:none;margin:9px 0 0;padding:0}
.bk-brk-l li{display:grid;grid-template-columns:minmax(0,1fr) auto;
gap:2px 10px;padding:8px 0;border-top:1px solid var(--line);
font-size:12.5px;letter-spacing:.02em}
.bk-brk-l li.opt .bk-brk-n{color:var(--gold)}
.bk-brk-n{font-family:var(--serif-b);/*fw*/font-weight:700;color:var(--navy)}
.bk-brk-c{grid-column:1;font-size:11px;color:var(--mute);letter-spacing:.01em}
.bk-brk-v{grid-column:2;grid-row:1 / span 2;align-self:center;
font-family:var(--serif-b);/*fw*/font-weight:700;color:var(--navy);
font-variant-numeric:lining-nums;white-space:nowrap}
.bk-brk-t{display:flex;align-items:baseline;justify-content:flex-end;gap:6px;
margin-top:10px;padding-top:11px;border-top:1px solid var(--gold)}
.bk-brk-t span{flex:1;font-size:12.5px;font-family:var(--serif-b);/*fw*/font-weight:700;
letter-spacing:.1em;color:var(--navy)}
.bk-brk-t b{font-family:var(--serif-b);/*fw*/font-weight:700;
font-size:clamp(19px,2.2vw,26px);color:var(--navy);
font-variant-numeric:lining-nums;letter-spacing:.01em}
.bk-brk-t i{font-style:normal;font-size:10.5px;color:var(--sub)}
.bk-brk-n{}
.bk-brk>.bk-brk-n{margin-top:9px;font-size:10.5px;line-height:1.85;
color:var(--mute);font-family:var(--serif);/*fw*/font-weight:400;letter-spacing:.02em}
/* 小鍋のグレードアップ --------------------------------------------------- */
.bk-nb{max-width:var(--maxw);margin:clamp(10px,1.2vw,15px) auto 0;
padding:clamp(15px,1.8vw,22px) clamp(15px,1.8vw,24px);
background:linear-gradient(160deg,#fffdf9,#f8f1e4);
border:1px solid rgba(179,146,79,.5);border-radius:12px}
.bk-nb-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.bk-nb-h span{flex:none;padding:3px 9px;border-radius:4px;background:var(--gold);
color:#fff;font-size:10px;letter-spacing:.14em;
font-family:var(--serif-b);/*fw*/font-weight:700}
.bk-nb-h b{font-family:var(--serif-b);/*fw*/font-weight:700;
font-size:clamp(13.5px,1.35vw,16.5px);letter-spacing:.05em;color:var(--navy)}
.bk-nb-l{margin-top:8px;font-size:11.5px;line-height:1.85;color:var(--sub);letter-spacing:.02em}
.bk-nb-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
margin-top:10px;padding:11px 13px;border-radius:9px;
background:#fff;border:1px solid var(--line)}
.bk-nb-r.on{border-color:var(--gold);box-shadow:0 0 0 3px rgba(179,146,79,.12)}
.bk-nb-t{flex:1;min-width:150px}
.bk-nb-t b{display:block;font-family:var(--serif-b);/*fw*/font-weight:700;
font-size:13px;letter-spacing:.04em;color:var(--navy)}
.bk-nb-t em{display:block;margin-top:3px;font-style:normal;font-size:10.5px;
color:var(--sub);letter-spacing:.02em;font-variant-numeric:lining-nums}
.bk-nb-c{flex:none;display:flex;align-items:center;gap:4px}
.bk-nb-c button{width:30px;height:30px;border-radius:50%;
border:1px solid var(--line);background:#fff;color:var(--navy);
font-size:15px;line-height:1;cursor:pointer}
.bk-nb-c button:hover{border-color:var(--gold);color:var(--gold)}
.bk-nb-c b{min-width:26px;text-align:center;
font-family:var(--serif-b);/*fw*/font-weight:700;font-size:14px;
font-variant-numeric:lining-nums}
.bk-nb-n{margin-top:9px;font-size:10.5px;color:var(--mute);letter-spacing:.02em}
@media(max-width:480px){
.bk-brk-l li{grid-template-columns:minmax(0,1fr) auto}
.bk-nb-r{gap:8px}
.bk-nb-t{min-width:0}
}
/* === CHILD END === */
/* === INVSRC START === */
/* 空室を読み込んでいるあいだ、と、読めなかったとき -------------------------- */
.bk-cal-wait{padding:clamp(40px,6vw,74px) 20px;text-align:center;
font-size:13px;letter-spacing:.06em;color:var(--sub)}
.bk-cal-ng{padding:clamp(24px,3.2vw,38px) clamp(18px,2.4vw,30px);
border:1px solid rgba(168,86,74,.45);border-radius:12px;background:#fdf6f4;
text-align:center;line-height:2}
.bk-cal-ng p{font-size:clamp(12px,1.15vw,14px);color:var(--sub);letter-spacing:.03em}
.bk-cal-ng-h{font-family:var(--serif-b);/*fw*/font-weight:700;
font-size:clamp(14px,1.4vw,17px)!important;color:#a8564a!important;margin-bottom:6px}
.bk-cal-ng a{color:var(--navy);font-family:var(--serif-b);/*fw*/font-weight:700;
font-variant-numeric:lining-nums;border-bottom:1px solid rgba(179,146,79,.5)}
/* === INVSRC END === */
/* === STAGE34 START === */
/* 料金を確認しているあいだ／目安のままのとき ------------------------------- */
.bk-q-wait{opacity:.42;transition:opacity .2s}
.bk-q-est .bk-brk::after{content:"※ ただいま料金を確認できないため、目安の金額です。確定金額は、当館よりあらためてご連絡いたします。";
display:block;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
font-size:clamp(11.5px,1.05vw,13px);line-height:1.9;color:#a8564a;letter-spacing:.03em}
/* お部屋の確保のお知らせ ---------------------------------------------------- */
.bk-hold{margin:14px auto 0;max-width:var(--maxw)}
.bk-hold:empty{display:none}
.bk-hold.wait,.bk-hold.ok,.bk-hold.ng,.bk-hold.est{
padding:clamp(14px,1.8vw,20px) clamp(16px,2.2vw,26px);border-radius:12px;
border:1px solid var(--line);background:var(--paper-2);line-height:1.95;
font-size:clamp(12px,1.1vw,13.5px);letter-spacing:.04em;color:var(--sub)}
.bk-hold b{display:block;font-family:var(--serif-b);/*fw*/font-weight:700;
font-size:clamp(13px,1.25vw,15px);color:var(--navy);margin-bottom:2px}
.bk-hold span{display:block}
.bk-hold.ok{border-color:rgba(47,125,91,.4);background:#f1f8f4}
.bk-hold.ok b{color:#2f7d5b}
.bk-hold.ng{border-color:rgba(168,86,74,.45);background:#fdf6f4}
.bk-hold.ng b{color:#a8564a}
.bk-hold.est{border-color:rgba(179,146,79,.45);background:#fbf8f1}
.bk-hold a{color:var(--navy);font-family:var(--serif-b);/*fw*/font-weight:700;
font-variant-numeric:lining-nums;border-bottom:1px solid rgba(179,146,79,.5)}
.bk-hold-a{display:inline-block;margin-top:10px;padding:9px 20px;border:1px solid var(--navy);
border-radius:999px;border-bottom-width:1px;font-size:12.5px;letter-spacing:.08em}
.bk-hold-a:hover{background:var(--navy);color:#fff}
.bk-fm-go.waiting{opacity:.4;pointer-events:none}
/* 完了画面の予約番号 -------------------------------------------------------- */
.tk-rid{display:inline-flex;align-items:center;gap:12px;margin:0 auto 6px;
padding:9px 22px;border:1px solid var(--line);border-radius:999px;background:#fff}
.tk-rid span{font-size:11px;letter-spacing:.14em;color:var(--mute)}
.tk-rid b{font-family:var(--serif-b);/*fw*/font-weight:700;font-size:clamp(14px,1.4vw,17px);
color:var(--navy);font-variant-numeric:lining-nums;letter-spacing:.05em}
.tk-nm{max-width:640px;margin:10px auto 0;padding:13px 18px;border-radius:10px;
border:1px solid rgba(168,86,74,.45);background:#fdf6f4;color:#a8564a;
font-size:clamp(11.5px,1.05vw,13px);line-height:1.95;letter-spacing:.03em}
.tk-nm a{color:#a8564a;font-family:var(--serif-b);/*fw*/font-weight:700;
font-variant-numeric:lining-nums;border-bottom:1px solid rgba(168,86,74,.5)}
@media(max-width:900px){
.bk-hold{padding-right:calc(max(44px, min(70px, 15vw)) + 8px)}
}
/* === STAGE34 END === */
/* === COLUMN START === */
/* ============================================================================
コラム記事（/column/）
==========================================================================*/
/* ---- 一覧 ---------------------------------------------------------------- */
.cl-wrap{background:#fdfdfc;padding-bottom:clamp(50px,7vw,100px)}
.cl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(20px,2.6vw,34px);margin-top:clamp(26px,3.4vw,44px)}
.cl-card{display:block;background:#fff;border:1px solid var(--line);border-radius:14px;
overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s}
.cl-card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(12,31,49,.1)}
.cl-ph{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--paper-2)}
.cl-ph img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.cl-card:hover .cl-ph img{transform:scale(1.05)}
.cl-ph-no{display:flex;align-items:center;justify-content:center;height:100%;
font-family:var(--en);font-size:22px;letter-spacing:.14em;color:var(--mute)}
.cl-b{display:block;padding:clamp(15px,1.8vw,22px) clamp(16px,1.9vw,24px) clamp(18px,2.1vw,26px)}
.cl-date{display:block;font-family:var(--en);font-size:12px;letter-spacing:.1em;color:var(--mute);
font-variant-numeric:lining-nums}
.cl-ttl{display:block;margin:7px 0 0;font-family:var(--serif-b);/*fw*/font-weight:700;
font-size:clamp(14.5px,1.35vw,16.5px);line-height:1.65;color:var(--navy);
letter-spacing:.02em}
.cl-ex{display:block;margin-top:9px;font-size:12px;line-height:1.95;color:var(--sub);letter-spacing:.02em}
.cl-tag{display:inline-block;margin-top:11px;padding:3px 11px;border-radius:999px;
background:var(--paper-2);font-size:10.5px;letter-spacing:.08em;color:var(--mute)}
.cl-empty{margin-top:40px;padding:clamp(34px,5vw,64px) 20px;text-align:center;
border:1px solid var(--line);border-radius:14px;background:#fff;
font-size:13px;line-height:2;color:var(--sub);letter-spacing:.04em}
.cl-ng{margin-top:34px;padding:clamp(24px,3.2vw,38px) clamp(18px,2.4vw,30px);
border:1px solid rgba(168,86,74,.45);border-radius:12px;background:#fdf6f4;
text-align:center;line-height:2;font-size:13px;color:var(--sub)}
.cl-ng b{display:block;font-family:var(--serif-b);/*fw*/font-weight:700;
color:#a8564a;font-size:15px;margin-bottom:5px}
/* ---- ページ送り ---------------------------------------------------------- */
.cl-pg{display:flex;justify-content:center;align-items:center;gap:10px;
margin-top:clamp(30px,3.6vw,48px);flex-wrap:wrap}
.cl-pg a,.cl-pg span{min-width:38px;padding:8px 13px;border-radius:999px;
border:1px solid var(--line);font-size:12.5px;letter-spacing:.06em;text-align:center;
font-variant-numeric:lining-nums;color:var(--sub);background:#fff}
.cl-pg a:hover{border-color:var(--navy);color:var(--navy)}
.cl-pg .on{background:var(--navy);border-color:var(--navy);color:#fff}
/* ---- 記事本文 ------------------------------------------------------------ */
.cl-art{max-width:820px;margin:0 auto}
.cl-hero{margin-top:clamp(20px,2.4vw,30px);border-radius:14px;overflow:hidden}
.cl-hero img{width:100%;height:auto;display:block}
.cl-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
margin-top:clamp(14px,1.8vw,20px);font-size:11.5px;letter-spacing:.08em;color:var(--mute)}
.cl-meta .d{font-family:var(--en);font-variant-numeric:lining-nums;font-size:12.5px}
.cl-body{margin-top:clamp(24px,3vw,40px);font-size:clamp(13.5px,1.25vw,15px);
line-height:2.2;color:var(--navy);letter-spacing:.03em}
.cl-body p{margin:0 0 1.6em}
.cl-body h2{margin:clamp(38px,4.4vw,58px) 0 .9em;padding-bottom:.5em;
border-bottom:1px solid var(--line);font-family:var(--serif-b);/*fw*/font-weight:700;
font-size:clamp(17px,1.9vw,22px);line-height:1.6;letter-spacing:.04em}
.cl-body h3{margin:clamp(28px,3.2vw,42px) 0 .7em;padding-left:.7em;
border-left:3px solid var(--gold);font-family:var(--serif-b);/*fw*/font-weight:700;
font-size:clamp(15px,1.55vw,18px);line-height:1.6;letter-spacing:.04em}
.cl-body h4{margin:clamp(22px,2.6vw,32px) 0 .6em;font-family:var(--serif-b);
/*fw*/font-weight:700;font-size:clamp(14px,1.35vw,16px);letter-spacing:.04em}
.cl-body img{max-width:100%;height:auto;border-radius:10px;margin:.6em 0}
.cl-body a{color:var(--navy);border-bottom:1px solid rgba(179,146,79,.55)}
.cl-body a:hover{border-bottom-color:var(--gold)}
.cl-body b{font-family:var(--serif-b);/*fw*/font-weight:700}
.cl-body code{padding:.12em .45em;border-radius:4px;background:var(--paper-2);
font-family:ui-monospace,SFMono-Regular,monospace;font-size:.88em}
.cl-ul,.cl-ol{margin:0 0 1.6em;padding-left:1.5em}
.cl-ul li,.cl-ol li{margin-bottom:.5em;line-height:2.05}
.cl-ul{list-style:none;padding-left:1.2em}
.cl-ul>li{position:relative}
.cl-ul>li::before{content:"";position:absolute;left:-1.05em;top:.95em;
width:5px;height:5px;border-radius:50%;background:var(--gold)}
.cl-bq{margin:0 0 1.6em;padding:clamp(14px,1.8vw,22px) clamp(16px,2vw,26px);
border-left:3px solid var(--gold);border-radius:0 10px 10px 0;background:var(--paper-2)}
.cl-bq p:last-child{margin-bottom:0}
.cl-hr{margin:clamp(30px,3.6vw,46px) 0;border:0;border-top:1px solid var(--line)}
.cl-pre{margin:0 0 1.6em;padding:16px 18px;border-radius:10px;background:#0c1f31;
color:#e8e3d8;overflow-x:auto;font-size:12.5px;line-height:1.85}
.cl-tw{margin:0 0 1.6em;overflow-x:auto}
.cl-tbl{border-collapse:collapse;width:100%;font-size:13px}
.cl-tbl th,.cl-tbl td{padding:10px 14px;border:1px solid var(--line);text-align:left;
line-height:1.8}
.cl-tbl th{background:var(--paper-2);font-family:var(--serif-b);/*fw*/font-weight:700;
white-space:nowrap}
/* ---- 写真 ---------------------------------------------------------------- */
.cl-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
gap:clamp(10px,1.2vw,16px);margin-top:clamp(26px,3vw,38px)}
.cl-gal img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;
border-radius:10px;display:block}
/* ---- よくあるご質問 ------------------------------------------------------ */
.cl-faq{margin-top:clamp(34px,4.2vw,56px)}
.cl-h{font-family:var(--serif-b);/*fw*/font-weight:700;font-size:clamp(15px,1.6vw,18px);
letter-spacing:.08em;color:var(--navy);padding-left:11px;
border-left:3px solid var(--gold);line-height:1.5}
.cl-faq details{margin-top:11px;border:1px solid var(--line);border-radius:11px;
background:#fff;overflow:hidden}
.cl-faq summary{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
padding:clamp(13px,1.6vw,18px) clamp(15px,1.8vw,22px);list-style:none;
font-family:var(--serif-b);/*fw*/font-weight:700;font-size:clamp(13px,1.3vw,15px);
line-height:1.75;color:var(--navy);letter-spacing:.03em}
.cl-faq summary::-webkit-details-marker{display:none}
.cl-faq summary::after{content:"";flex:0 0 auto;margin-left:auto;width:9px;height:9px;
border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
transform:rotate(45deg);margin-top:5px;transition:transform .3s}
.cl-faq details[open] summary::after{transform:rotate(-135deg);margin-top:9px}
.cl-faq .qm{flex:0 0 auto;font-family:var(--en);font-size:15px;color:var(--gold)}
.cl-faq .a{display:flex;gap:11px;padding:0 clamp(15px,1.8vw,22px) clamp(15px,1.8vw,20px);
font-size:clamp(12.5px,1.2vw,14px);line-height:2.05;color:var(--sub);letter-spacing:.02em}
.cl-faq .a .am{flex:0 0 auto;font-family:var(--en);font-size:15px;color:var(--navy)}
/* ---- 関連 ---------------------------------------------------------------- */
.cl-rel{margin-top:clamp(34px,4.2vw,56px)}
.cl-chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:13px}
.cl-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 17px;border-radius:999px;
border:1px solid var(--line);background:#fff;font-size:12.5px;letter-spacing:.04em;
color:var(--navy)}
.cl-chip:hover{border-color:var(--gold);background:var(--paper-2)}
.cl-chip svg{width:13px;height:13px;fill:none;stroke:var(--gold);stroke-width:1.6}
/* ---- 記事の下のご案内 ---------------------------------------------------- */
.cl-cta{margin-top:clamp(40px,5vw,66px);padding:clamp(26px,3.4vw,44px) clamp(20px,2.6vw,38px);
border-radius:16px;background:var(--navy);color:#fff;text-align:center}
.cl-cta-t{font-family:var(--serif-b);/*fw*/font-weight:700;
font-size:clamp(15.5px,1.8vw,20px);line-height:1.8;letter-spacing:.05em}
.cl-cta-s{margin-top:9px;font-size:12.5px;line-height:2;color:rgba(255,255,255,.72);
letter-spacing:.04em}
.cl-cta-b{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:clamp(18px,2.2vw,26px)}
.cl-btn{display:inline-flex;align-items:center;gap:9px;padding:14px 32px;border-radius:999px;
font-size:13.5px;letter-spacing:.09em;font-family:var(--serif-b);/*fw*/font-weight:700}
.cl-btn.go{background:var(--gold);color:#fff}
.cl-btn.go:hover{background:#c5a35c}
.cl-btn.sub{border:1px solid rgba(255,255,255,.4);color:#fff}
.cl-btn.sub:hover{background:rgba(255,255,255,.1)}
.cl-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7}
.cl-tel{margin-top:15px;font-size:12px;letter-spacing:.05em;color:rgba(255,255,255,.7)}
.cl-tel a{color:#fff;font-variant-numeric:lining-nums;
border-bottom:1px solid rgba(255,255,255,.35)}
/* ---- ほかの記事 ---------------------------------------------------------- */
.cl-more{margin-top:clamp(40px,5vw,66px)}
.cl-more .cl-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.cl-back{margin-top:clamp(30px,3.6vw,46px);text-align:center;font-size:12.5px;
letter-spacing:.06em}
.cl-back a{color:var(--sub);border-bottom:1px solid var(--line)}
@media(max-width:900px){
.cl-grid,.cl-more .cl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
.cl-grid,.cl-more .cl-grid{grid-template-columns:1fr;gap:16px}
.cl-cta-b{flex-direction:column}
.cl-btn{justify-content:center}
}
/* === COLUMN END === */
/* === FIXBAR START === */
/* ---- カレンダー下の凡例：1段目に説明、2段目に記号 ---- */
.bk-cal-lg{display:block;margin-top:clamp(14px,1.6vw,20px);text-align:center;color:var(--sub)}
.bk-cal-lg-t{font-size:12px;letter-spacing:.04em;line-height:1.8}
.bk-cal-lg-t b{font-family:var(--serif-b);/*fw*/font-weight:700;color:var(--navy)}
.bk-cal-lg-t em{font-style:normal;color:var(--mute)}
.bk-cal-lg-m{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 22px;
margin-top:7px;font-size:11.5px;letter-spacing:.04em}
.bk-cal-lg-m span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.bk-cal-lg-m i{font-style:normal;font-size:13px}
.bk-cal-note{max-width:34em;margin-left:auto;margin-right:auto}
/* ---- 画面下の予約バー：字を読みやすく ----
・上の「大人2名 1泊／おまかせ和室」は、濃く・大きく
・金額は明朝の太字に。数字の高さがそろう字形（ライニング数字）にします
・（税込）は金額のすぐ右に並べます */
/* 1段目（人数・客室）は1行で。長い客室名は「…」で切ります。
2段目は金額と（税込）を、すき間なく横に並べます */
.bk-fix-p{display:flex;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:6px;row-gap:2px;
flex:1 1 auto;min-width:0}
.bk-fix-p span{flex:0 0 100%;width:100%;max-width:100%;min-width:0;font-size:12px;letter-spacing:.05em;color:var(--navy);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-fix-p b,.bk-fix-p i{white-space:nowrap}
.bk-fix-go{white-space:nowrap}
.bk-fix-p span .bk-fix-rm{font-family:var(--serif-b);/*fw*/font-weight:700}
.bk-fix-p b{font-family:var(--serif-b);/*fw*/font-weight:700;font-size:23px;line-height:1.15;
letter-spacing:.02em;color:var(--navy);font-variant-numeric:lining-nums}
.bk-fix-p i{font-size:11px;letter-spacing:.04em;color:var(--sub)}
.bk-fix-go{font-family:var(--serif-b);/*fw*/font-weight:700}
@media(max-width:600px){
.bk-fix{gap:10px}
.bk-fix-p span{font-size:11px;letter-spacing:.02em}
.bk-fix-p b{font-size:19px}
.bk-fix-p i{font-size:10px}
/* ボタンは中身ぶんの幅で、文字は折り返しません */
.bk-fix-go{flex:0 0 auto;padding:13px 16px;font-size:13px;letter-spacing:.06em}
}
/* ---- 画面下の予約バー：パソコンでは、金額とボタンを中央にまとめます ---- */
@media(min-width:901px){
.bk-fix{justify-content:center;gap:clamp(28px,3.4vw,52px);
padding-top:11px;padding-bottom:calc(11px + env(safe-area-inset-bottom))}
.bk-fix-p{display:inline-grid;grid-template-columns:auto 1fr;flex:0 0 auto;max-width:460px}
.bk-fix-p span{grid-column:1 / -1;width:auto}
.bk-fix-go{flex:0 0 auto;width:clamp(320px,30vw,420px);padding:15px 28px;font-size:15px;letter-spacing:.12em}
}
/* === FIXBAR END === */
/* === MOBILE START === */
/* ---- メニュー：中身が長くても、上までスクロールできるように ----
「上下中央」は、はみ出したとき上側に届かなくなるので、
はじめと終わりの余白で中央に寄せる形に変えます */
.drawer{justify-content:flex-start;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
transition:opacity .22s ease,visibility 0s linear .22s}
.drawer>:first-child{margin-top:auto}
.drawer>:last-child{margin-bottom:auto}
body.menu-open .drawer{transition:opacity .22s ease,visibility 0s}
body.menu-open{overflow:hidden}
/* メニューを開いているあいだは、右の縦タブと下のバーを隠します（重なって読みにくいため） */
body.menu-open .side-tabs,body.menu-open .mcta{opacity:0;visibility:hidden;pointer-events:none}
/* ---- チャット：スマホの実際の画面の高さに合わせます ---- */
.cb-body{min-height:0;overscroll-behavior:contain}
@media(max-width:640px){
.cb-panel{max-height:calc(100vh - 130px);max-height:calc(100dvh - 120px)}
}
/* ---- 電話番号の画面 ---- */
.tel-sheet{position:fixed;inset:0;z-index:400;display:flex;align-items:center;justify-content:center;
padding:20px;visibility:hidden;opacity:0;transition:opacity .2s,visibility 0s linear .2s}
.tel-sheet.on{visibility:visible;opacity:1;transition:opacity .2s,visibility 0s}
.tel-bg{position:absolute;inset:0;background:rgba(6,16,26,.55)}
.tel-box{position:relative;width:min(380px,100%);padding:30px 24px 24px;border-radius:16px;
background:#fff;text-align:center;box-shadow:0 20px 60px rgba(6,16,26,.35)}
.tel-x{position:absolute;right:10px;top:8px;border:0;background:none;font-size:26px;
line-height:1;color:var(--mute);cursor:pointer;padding:6px}
.tel-h{font-family:var(--serif-b);/*fw*/font-weight:700;font-size:14px;letter-spacing:.06em;color:var(--navy)}
.tel-num{margin-top:12px;font-family:var(--serif-b);/*fw*/font-weight:700;font-size:34px;
letter-spacing:.04em;color:var(--navy);font-variant-numeric:lining-nums;
-webkit-user-select:all;user-select:all}
.tel-s{margin-top:4px;font-size:12px;color:var(--sub);letter-spacing:.04em}
.tel-b{display:flex;flex-direction:column;gap:9px;margin-top:20px}
.tel-go,.tel-cp{display:block;width:100%;padding:14px 10px;border-radius:999px;
font-family:var(--serif-b);/*fw*/font-weight:700;font-size:14px;letter-spacing:.08em;cursor:pointer}
.tel-go{background:var(--navy);color:#fff}
.tel-go[hidden]{display:none}
.tel-cp{border:1px solid var(--line);background:#fff;color:var(--navy)}
.tel-n{margin-top:14px;font-size:11px;line-height:1.85;color:var(--mute);letter-spacing:.02em}
body.tel-open{overflow:hidden}
/* === MOBILE END === */