/* ══════════════════════════════════════════════════════════════════════
   色の決まりごと

   このテーマは「基調色を差し替えられる」作りにしています。
   下の :root が既定（白基調＝象牙色の地）で、サイト全体はこれで表示されます。
   プランごとのページは、body に印を付けるだけで基調色を丸ごと入れ替えられます
   （このファイルの末尾「ジャンルごとの基調色」を参照）。

   色を足すときは、必ず下の変数を使ってください。
   スタイルの中に直接 #色 や rgba() を書くと、基調色を切り替えたときに
   そこだけ取り残されて浮きます。

     地の色
       --ji        主となる地
       --ji-2      一段沈めた面（節ごとの色替え、カードの地）
       --keisen    罫線
       --ji-rgb    地の色を r,g,b で表したもの（膜づくりに使う）

     文字の色
       --moji      基本の文字
       --moji-2    副次的な文字（説明、日付）
       --moji-3    さらに弱い文字（補助）
       --midashi   見出しの文字
       --han       濃い面の上に置く明るい文字（予約帯など）

     差し色（基調が変わっても役割は変わりません）
       --enji --ebicha --kogane --usukin --fukakin
   ══════════════════════════════════════════════════════════════════════ */
:root{
	/* ── 地：白基調（象牙色）── */
	--ji:#F4EFE4; --ji-2:#EBE3D4; --keisen:#D9CEBA; --ji-rgb:244,239,228;

	/* ── 文字：墨色を基本に ── */
	--moji:#2A2420; --moji-2:#6B6055; --moji-3:#7A6E60;
	--midashi:#2A2420; --han:#FBF8F1; --han-rgb:251,248,241;
	/* 半透明をつくるための r,g,b。色を変えたらこちらも合わせて直すこと */
	--moji-rgb:42,36,32; --enji-rgb:166,53,61; --kogane-rgb:156,122,46;

	/* ── 差し色：白地でも沈まない濃さに ── */
	--enji:#A6353D; --ebicha:#7A3034; --kogane:#9C7A2E;
	--usukin:#8A6C2A; --fukakin:#6E5520;

	/* 読ませる文字に使う差し色。
	   黄金（--kogane）は罫線や小さな飾り字には映えますが、
	   写真の上に白い膜を敷いた面ではコントラストが足りず読めません
	   （最悪 1.9 程度。本文に必要なのは 4.5）。
	   リンクなど「読ませる」文字にはこちらを使います。 */
	--kogane-moji:#6B4F16;

	/* HERO（プラン詳細）専用。白基調は白基調のまま：写真の色を守り、文字が乗る側にだけ
	   象牙の地（--hero-veil-rgb）を敷いて濃い文字を読ませる。専用のHERO写真は被写体を右
	   （狐は中央）に置き、文字が乗る左側が明るいので、左側だけ象牙で持ち上げれば足りる。
	   濃い文字は h1=墨・導入=濃灰・ラベル=濃い金。実写真へ合成して 4.5 以上を実測して決めた値。
	   濃い基調（tone-*）では各トーンの明るい文字色＋暗い地に差し替わる（下の tone-* ブロック）。 */
	--hero-veil-rgb:244,239,228;
	--hero-midashi:#2A2420;
	--hero-moji:#3A322C;
	--hero-label:#4A3A10;

	/* ── 以下は旧い名前。既存の指定を壊さないよう、上の変数に橋渡ししています ── */
	--kurocha:var(--ji); --kogecha:var(--ji-2); --kobicha:var(--keisen);
	--sumi:var(--moji); --zouge:var(--midashi); --shironeri:var(--han); --hai:var(--moji-2);

	--f-disp:"Shippori Mincho","Hiragino Mincho ProN",serif;
	--f-body:"Zen Kaku Gothic New","Hiragino Sans",sans-serif;
	--f-lat:"Cormorant Garamond",serif;
	--rail:58px;
	--pw:1120px;   /* 本文（非全幅セクション）の最大幅。全ページでこの幅にそろえる（プランページ基準） */
	--mw:var(--pw);/* 旧名。読ませる要素の最大幅を --pw に統一。写真の帯だけはこれを外して全幅にする */
	--topH:70px;   /* 上辺の帯の高さ。ロゴの縦位置もこれに合わせる */
	--ease:cubic-bezier(.16,1,.3,1);--slow:2.2s;--slower:3.2s;

	/* ── 写真の上に敷く膜の濃さ ──
	   白基調は、全面を覆うと衣裳の色が洗われて商材が死ぬので薄く。
	   文字は左側の地（--maku-hidari）で読ませ、写真そのものは覆わない。 */
	--maku-ue:.55;      /* 上辺（帯とのつなぎ） */
	--maku-naka:0;      /* 中ほど（写真を見せる。0＝覆わない） */
	--maku-shita:.94;   /* 下辺（次の節へのつなぎ） */
	--maku-hidari:.34;  /* 左（写真をわずかに落ち着かせるだけ。覆わない） */
	--maku-hidari-w:26%;/* 左の地が消えるところ。広いと一列目まで覆って見えなくなる */
	--maku-moji:.86;    /* 文字のかたまり自身が持つ地の濃さ。読ませるのはここが受け持つ */
	--maku-iko:.42;     /* 衣桁の札。閉じているときの霞み具合 */
	--maku-fuda-ue:.9;  /* 料金の札の膜（上）。文字が乗るので薄くしすぎない */
	--maku-fuda-shita:.82; /* 同（下）。ここが薄いとリンクが読めなくなる */

	/* ── 期間限定の節 ──
	   黒基調では「海老茶の面に白文字、写真は暗く沈める」組み方でしたが、
	   白基調でそれをやるとここだけ濃い赤の帯が浮きます。
	   白基調では逆に「明るい面に濃い文字、写真は沈めない」に組み替えます。 */
	--limit-ji:#EDE4D2;      /* 節の地。ほかの節より少し濃い砂色で、区切りを示す */
	--limit-moji:#2A2420;    /* 節の見出し */
	--limit-moji-2:#6B6055;  /* 節の副題 */
	--limit-tag:#6B4F16;     /* 英字。明るい地の上で読める濃さにする */
	--camp-akaru:1;          /* 札の写真の明るさ。1＝沈めない */
	--camp-akaru-on:1.55;    /* 触れたとき。白基調は明るく飛ばして濃い文字を載せる */
	--camp-over-maku:.62;    /* 触れたときの文字の背後に敷く地の濃さ */
	--camp-moji:#2A2420;     /* 札の上の見出し */
	--camp-moji-2:#4A4038;   /* 札の上の説明 */
	--camp-tag:#6B4F16;      /* 札の上の英字・日付 */
	--camp-waku:#D9CEBA;     /* 札の枠 */
	--camp-maku-rgb:244,239,228; /* 札の下辺に敷く地 */
	--shashin:none;     /* 写真そのものへの補正 */

	/* 地図のかけ方。
	   白基調では反転はかけない（かけると地図だけ黒くなって浮く）。
	   代わりに褐色を足して彩度を落とし、水面の青や標識の色みを和らげて、
	   象牙の地と金茶の差し色になじませる。
	   sepia を上げすぎると地図としての読み取りにくくなるので .46 前後が限度。 */
	--chizu:sepia(.46) saturate(.66) hue-rotate(-6deg) brightness(1.06) contrast(.9);
	--chizu-maku:.1;
}
*,*::before,*::after{box-sizing:border-box}
/* スクロールバーの幅を常に確保する。メニューやライトボックスを開くと本文の
   スクロールを止める（overflow:hidden）ため、確保しないとバーが消えた幅ぶん
   ページが右へ広がり、h1やヘッダーがガクッと横に伸びて見える。 */
html{-webkit-text-size-adjust:100%;scroll-padding-top:var(--topH);scrollbar-gutter:stable}
body{margin:0;background:var(--kurocha);color:var(--zouge);font-family:var(--f-body);font-weight:400;font-size:15px;line-height:2;letter-spacing:.05em;overflow-x:hidden;
 font-feature-settings:"palt" 1;text-spacing-trim:trim-start}

/* 日本語は字面が大きく、欧文と同じ級数まで上げるとすぐ野暮ったくなる。
   大きく見せたい箇所ほど級数を抑え、字間を詰め、行間を締める。 */
/* 日本語の見出しは字面が大きく、欧文と同じ級数まで上げると野暮ったくなる。
   級数を抑え、字間を詰め、行間を締めて密度で見せる。 */

img{display:block;max-width:100%}
h1,h2,h3,h4{margin:0;font-family:var(--f-disp);font-weight:500;font-feature-settings:"palt" 1;line-height:1.56;letter-spacing:.02em}
p{margin:0}
a{color:inherit;text-decoration:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}


/* ── カーソル。小さな点と、遅れて追う輪の二重。
   触れる対象の種類によって、輪の姿が変わる。 ── */
@media (hover:hover) and (pointer:fine){
.cur,.cur-r{position:fixed;left:0;top:0;z-index:200;pointer-events:none;border-radius:50%;
	 transform:translate3d(-50%,-50%,0);will-change:transform,width,height,opacity}
.cur{width:3px;height:3px;background:var(--kogane)}
.cur-r{width:17px;height:17px;border:1px solid rgba(190,151,72,.7);
	 transition:width .5s var(--ease),height .5s var(--ease),border-color .5s var(--ease),background .5s var(--ease),opacity .5s var(--ease)}

	/* 押せるものの上では輪が広がる */
	.cur-r.hot{width:28px;height:28px;border-color:var(--kogane);background:rgba(190,151,72,.14)}

	/* 掴んで動かせる列の上では、輪が横長になる */
	.cur-r.drag{width:36px;height:36px;border-color:var(--kogane);background:rgba(190,151,72,.1)}
.cur-r.drag::after{content:"⇔";position:absolute;inset:0;display:grid;place-content:center;font-size:11px;color:var(--kogane)}
.cur.hide,.cur-r.hide{opacity:0}
body.fine, body.fine a, body.fine button{cursor:none}
}


/* 端に寄せた極小ラベル。中央寄せの見出しブロックは作らない。 */
.u{position:relative;display:inline-block}

/* 下線は文字の下だけに引く。左から滑り込む矢印の下には伸ばさない。
   そのため矢印を下線の対象から外し、下線は文字を包む要素にだけ引く。 */
.u::after{content:"";position:absolute;left:var(--ul,0);right:0;bottom:-5px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left center;transition:transform 1.1s var(--ease),left .9s var(--ease)}

/* 下線の開始位置をずらすのは、左から矢印が出るリンクだけ */
.u:has(.ar):hover{--ul:1.45em}
.u:hover::after,.u:focus-visible::after{transform:scaleX(1)}
.u .ar{display:inline-block;width:0;opacity:0;margin-right:0;transform:translateX(-6px);transition:width .9s var(--ease),opacity .9s var(--ease),transform .9s var(--ease),margin .9s var(--ease)}
.u:hover .ar,.u:focus-visible .ar{width:1.1em;opacity:1;transform:none;margin-right:.35em}
/* 触れられない端末では、押せることが見た目で分かるよう下線と矢印を常に出す。
   ただしフッターはリンクが密に並ぶため、下線を引くとかえって読みにくくなる。除外する。 */
@media (hover:none){
.u::after{transform:scaleX(1);opacity:.45}
/* 幅を決め打ちにすると字と重なるので、文字送りは切って自然な幅にする */
.u .ar{width:auto;opacity:1;transform:none;margin-right:.4em;letter-spacing:0}
.ft .u::after{transform:scaleX(0)}
.ft .u .ar{width:0;opacity:0;transform:translateX(-6px);margin-right:0;letter-spacing:inherit}
}


/* ── 幅の制御 ────────────────────────────────────────────────
   広い画面で文字が横に伸びきらないよう、読ませる要素に最大幅を設ける。
   一方、簾・衣桁・四つの帯といった写真の面は、あえて画面いっぱいのまま残す。
   見出しは常に制限側に置くので、全セクションで左端がそろう。
   ────────────────────────────────────────────────────────── */
.sec-h,.tick-in,.news-in,.about-body,.aside-row,
.camp,.pcs,.posts,.price-wrap,.said-grid,.said-more{
	max-width:var(--mw);
	margin-inline:auto;
}


/* 節の見出し。全セクションでこの組みに揃える。
   欧文の小さな標題（.tag）→ 日本語の見出し（h2）→ 必要なら補足文。
   左端は各セクションの本文と同じ位置にそろえる。 */
.sec-h{padding:0 clamp(20px,3.4vw,52px);margin-bottom:clamp(26px,3.2vw,40px)}
.sec-h .tag{display:block;margin-bottom:13px;line-height:1.7}

/* 大きく見えるタイトルが文書構造上の見出し（.copy＝h2/h1）。その下の小さい行は
   補足の説明文（.sec-sub＝p）。見た目はクラスで決まるので、要素を替えても崩れない。
   ※ページ見出しの .sub-h（h1.copy＋p.sub-h）は別物なので、ここでは触れない。 */
.sec-h .copy{margin:0;font-family:var(--f-disp);font-weight:500;font-feature-settings:"palt" 1;
 font-size:clamp(19px,2.1vw,26px);letter-spacing:.04em;line-height:1.58;text-wrap:balance;color:inherit}
.sec-h .sec-sub{margin-top:9px;font-family:var(--f-body);font-weight:400;font-size:12.5px;
 letter-spacing:.14em;line-height:1.9;color:var(--moji-2)}
.sec-h .note{margin-top:15px;font-size:13px;line-height:2.05;color:var(--hai);max-width:34em}
.sec-h .note a{font-size:12.5px;letter-spacing:.14em;color:var(--kogane);white-space:nowrap}

/* 矢印の幅の指定は上（.u .ar）にまとめてあります。
   ここで書き直すと、触れられない端末向けの指定を打ち消してしまいます。 */
.sec-h .note .ar{color:var(--kogane)}

/* 補足文を見出しの右に回したいとき */
.sec-h.wide{display:flex;align-items:flex-end;gap:clamp(20px,3.4vw,56px);flex-wrap:wrap}
.sec-h.wide .note{margin-top:0;margin-left:auto;max-width:28em}
@media (max-width:860px){
.sec-h.wide .note{margin-left:0;margin-top:14px}
}
.tag{font-family:var(--f-lat);font-size:11px;letter-spacing:.4em;color:var(--kogane);text-transform:uppercase}


/* ── 画面左端の目次。章はここだけに出し、各セクションには見出しラベルを置かない ── */
.index{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:60;display:flex;flex-direction:column;justify-content:center;gap:2px;border-right:1px solid var(--kobicha);background:rgba(var(--ji-rgb),.72);backdrop-filter:blur(8px);overflow:hidden;transition:width 1s var(--ease)}
.index:hover{width:198px}
.index a{display:flex;align-items:center;gap:14px;padding:8px 0 8px 20px;white-space:nowrap;font-family:var(--f-lat);font-size:12px;letter-spacing:.2em;color:var(--moji-2);transition:color .6s var(--ease)}
.index a b{font-weight:500}
.index a i{font-family:var(--f-body);font-style:normal;font-size:11px;letter-spacing:.16em;opacity:0;transform:translateX(-6px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.index:hover a i{opacity:1;transform:none}
.index a.on{color:var(--kogane)}
.index a:hover{color:var(--zouge)}


/* ── 画面右端の予約タブ。全幅のCTA帯は作らず、常時ここに置く ── */
.book{position:fixed;right:26px;bottom:26px;z-index:70;background:var(--ebicha);display:flex;align-items:center;gap:12px;padding:15px 26px;border:1px solid rgba(var(--han-rgb),.24);transition:background .6s var(--ease),border-color .6s var(--ease),opacity .5s var(--ease),transform .5s var(--ease)}
/* トップのヒーロー内予約ボタン（.hbook）と重ならないよう、ヒーロー表示中は隠す（main.js が付与） */
.book.book--hero{opacity:0;transform:translateY(16px);pointer-events:none}
.book:hover{background:var(--enji);border-color:var(--kogane)}
.book span{font-size:13px;letter-spacing:.22em;color:var(--shironeri)}
.book i{font-style:normal;font-size:12px;color:var(--kogane);transition:transform .34s var(--ease)}
.book:hover i{transform:translateX(4px)}


/* ── 最上部。ロゴと言語だけ。ナビは目次が兼ねる ── */
/* ── 上辺の帯。左にロゴ、右に主要メニュー・言語・予約 ── */
.top{position:fixed;left:var(--rail);right:0;top:0;z-index:80;min-height:var(--topH);display:flex;align-items:center;gap:clamp(12px,1.8vw,26px);
 padding:0 clamp(20px,3.4vw,52px);background:rgba(var(--ji-rgb),.55);backdrop-filter:blur(10px);
 border-bottom:1px solid transparent;transition:background .7s var(--ease),border-color .7s var(--ease),transform .7s var(--ease)}
.top.solid{background:rgba(var(--ji-rgb),.95);border-bottom-color:var(--kobicha)}
.top.away{transform:translateY(-100%);pointer-events:none}

/* ロゴは二か所に置く。
   ・.brand   … ヒーローの上。スクロールには追従せず、そのまま流れていく。
   ・.brand-h … ヘッダーの中。ヘッダーが現れるときに一緒に現れる。
   縦位置と大きさを揃えてあるので、入れ替わっても位置は動かない。 */
/* 本文の枠。左端の目次のぶんだけ右へ寄せる。
   目次を出さないページ（body.no-rail）では --rail が 0 になるので、寄りません。
   ヘッダーも同じ変数を見ているため、両者が必ずそろいます。 */
.wrap{position:relative;margin-left:var(--rail)}
body.no-rail{--rail:0px}

.brand,.brand-h{z-index:85;height:var(--topH);display:flex;align-items:center}
.brand{position:absolute;left:clamp(20px,3.4vw,52px);top:0;transition:opacity .4s var(--ease)}
.brand-h{flex:0 0 auto;margin-right:auto}
/* ヘッダーが出ている（away でない）間は、ヒーロー上のロゴ（.brand）を消す。
   ヘッダーの見出しロゴ（.brand-h）と位置が重なるため、両方出すとロゴが二重に見える。
   先頭（away）ではヘッダーが隠れているので .brand を見せる＝常にロゴは一つ。 */
.top:not(.away) ~ .wrap .brand{opacity:0;pointer-events:none}
.brand img,.brand-h img{height:clamp(22px,2.4vw,32px);width:auto}
.menu{margin-left:auto}
.top .menu{margin-left:0}
.menu ul,.lang ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:clamp(11px,1.6vw,24px)}
.lang ul{gap:9px}
.menu a{position:relative;font-size:12.5px;letter-spacing:.1em;color:var(--zouge);padding:6px 0;white-space:nowrap;transition:color .5s var(--ease)}
.menu a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--kogane);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease)}
.menu a:hover::after{transform:scaleX(1)}
.menu a:hover{color:var(--kogane)}
.lang{padding-left:clamp(10px,1.4vw,20px);border-left:1px solid var(--kobicha);
 font-family:var(--f-lat);font-size:12px;letter-spacing:.14em;color:var(--moji-3)}
.lang a{transition:color .5s var(--ease)}
.lang a:hover,.lang a.on{color:var(--kogane)}
.top .go{flex:0 0 auto;display:flex;align-items:center;gap:9px;padding:10px 18px;background:var(--ebicha);
 border:1px solid rgba(var(--han-rgb),.2);font-size:12px;letter-spacing:.14em;color:var(--shironeri);
 transition:background .5s var(--ease),border-color .5s var(--ease)}
.top .go i{font-style:normal;color:var(--kogane);transition:transform .32s var(--ease)}
.top .go:hover{background:var(--enji);border-color:var(--kogane)}
.top .go:hover i{transform:translateX(4px)}


/* ── ハンバーガーと全面メニュー ── */
.burger{display:none;margin-left:auto;width:42px;height:42px;background:none;border:0;padding:0;cursor:pointer}
.burger i{display:block;width:22px;height:1px;margin:5px auto;background:var(--zouge);transition:transform .5s var(--ease),opacity .4s var(--ease)}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
/* 縦は中央寄せだが、項目が多く画面より高くなったときは safe で先頭（上）から
   並べて全部スクロールで届くようにする。単なる center だと上側が画面外に隠れて
   スクロールしても戻れない。上下の余白と字間も詰めて、多い項目を収めやすくした。 */
.sheet{position:fixed;inset:0;z-index:75;background:rgba(var(--ji-rgb),.985);display:flex;flex-direction:column;justify-content:flex-start;
 padding:calc(var(--topH) + 14px) clamp(20px,3.4vw,52px) 28px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility .7s var(--ease)}
/* 中身が短いときは中央寄せ、2階層目を開いて画面より高いときは上寄せ＋全域スクロール可（margin:auto 方式） */
.sheet > :first-child{margin-top:auto}
.sheet > :last-child{margin-bottom:auto}
.sheet.open{opacity:1;visibility:visible}
.sheet a{display:flex;align-items:baseline;gap:13px;padding:11px 0;border-bottom:1px solid var(--kobicha)}
.sheet a b{font-family:var(--f-disp);font-weight:500;font-size:17px;letter-spacing:.08em;color:var(--zouge)}
.sheet a i{font-family:var(--f-lat);font-style:normal;font-size:11px;letter-spacing:.22em;color:var(--moji-3)}
.sheet a span{margin-left:auto;color:var(--kogane);font-size:13px}
.sheet .sheet-go{margin-top:16px;justify-content:center;background:var(--ebicha);border:1px solid var(--kogane);padding:13px}
/* 予約ボタンは海老茶の面。白基調では見出し色（--zouge）が暗く沈むので、
   .btn-go や .book と同じ明るい文字（--han）に固定して読ませる */
.sheet .sheet-go b{color:var(--han)}
.sheet .sheet-lang{display:flex;gap:16px;justify-content:center;margin-top:16px;font-family:var(--f-lat);font-size:12px;letter-spacing:.18em;color:var(--moji-3)}
.sheet .sheet-lang a{display:inline;border:0;padding:0}
.sheet .sheet-lang a.on{color:var(--kogane)}

/* ── 2階層メニュー ──────────────────────────────────────────────
   PC は親にホバー（またはフォーカス）で下位パネルを開く。スマホは <details> で開閉。
   共通の下向き山形（.caret）は、開くと反転する。 */
.caret{display:inline-block;width:6px;height:6px;margin-left:6px;
 border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
 transform:translateY(-2px) rotate(45deg);transition:transform .4s var(--ease)}
/* PC：ドロップダウン */
.menu .has-sub{position:relative}
.menu .has-sub:hover .caret,.menu .has-sub:focus-within .caret{transform:translateY(1px) rotate(-135deg)}
.menu .sub{position:absolute;left:50%;top:100%;transform:translateX(-50%) translateY(8px);
 display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:200px;margin:0;padding:9px 0;
 background:var(--ji);border:1px solid var(--keisen);box-shadow:0 12px 30px rgba(var(--moji-rgb),.12);
 opacity:0;visibility:hidden;pointer-events:none;z-index:80;
 transition:opacity .4s var(--ease),transform .4s var(--ease),visibility .4s var(--ease)}
.menu .has-sub:hover .sub,.menu .has-sub:focus-within .sub{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.menu .sub li{width:100%}
.menu .sub a{display:block;padding:8px 20px;white-space:nowrap}
.menu .sub a::after{display:none}   /* 下位はスライド下線を出さない */
.menu .sub a:hover{color:var(--kogane);background:var(--ji-2)}
/* スマホ：<details> による開閉 */
.sheet-sub{border-bottom:1px solid var(--kobicha)}
.sheet-sub > summary{display:flex;align-items:baseline;gap:13px;padding:11px 0;cursor:pointer;list-style:none}
.sheet-sub > summary::-webkit-details-marker{display:none}
.sheet-sub > summary b{font-family:var(--f-disp);font-weight:500;font-size:17px;letter-spacing:.08em;color:var(--zouge)}
.sheet-sub > summary i{font-family:var(--f-lat);font-style:normal;font-size:11px;letter-spacing:.22em;color:var(--moji-3)}
.sheet-sub > summary .caret{margin-left:auto;color:var(--kogane);border-width:0 1.5px 1.5px 0}
.sheet-sub[open] > summary .caret{transform:translateY(1px) rotate(-135deg)}
.sheet-sub-list{padding:0 0 12px 15px}
.sheet-sub-list a{padding:10px 0;border-bottom:0}
.sheet-sub-list a b{font-size:15px}
@media (max-width:1140px){
:root{--topH:72px}
.menu,.lang,.top .go{display:none}
.burger{display:block}
}
/* 幅の狭い画面では、上辺の帯を低くして本文の見える範囲を広げる */
@media (max-width:760px){
:root{--topH:56px}
.top{padding:0 clamp(20px,3.4vw,52px)}
.burger{width:38px;height:38px}
.burger i{margin:4px auto}
}


/* ══ 一枚目 ══════════════════════════════════════════════════════════════
   簾（みす）。画面を縦の細長い列に分け、列ごとに別の写真を別の速さで流す。
   一枚の決め写真に頼らず、多くの写真を「織り地」として使う構成。
   列の幅も速さもそろえない。中央の三列だけを明るく残し、両端は闇に沈める。
   ────────────────────────────────────────────────────────────────────── */
/* ── 管理バー（ログイン中だけ画面上に出る黒い帯）────────────────────
   WordPress は管理バーのぶん <html> に上余白を入れます。
   位置を固定している上辺の帯と左端の目次は、その下へ下げないと隠れます。
   帯の高さは 32px、幅の狭い画面では 46px です。 */
.admin-bar .top{top:32px}
.admin-bar .index{top:32px}
@media (max-width:782px){
	.admin-bar .top{top:46px}
	.admin-bar .index{top:46px}
}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--kogecha);color:var(--zouge);padding:12px 20px;font-size:13px}
.skip:focus{left:0}
@keyframes slideup{from{transform:translate3d(0,0,0)}    to{transform:translate3d(0,-50%,0)}}
@keyframes slidedn{from{transform:translate3d(0,-50%,0)} to{transform:translate3d(0,0,0)}}
@keyframes sweep{0%{transform:translateX(-100%)}56%{transform:translateX(0)}100%{transform:translateX(100%)}}
@keyframes drop{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
.arw,.arw2{position:absolute;z-index:3;width:30px;height:30px;display:grid;place-content:center;font-size:12px;
 border:1px solid rgba(var(--han-rgb),.24);color:var(--moji-3);background:transparent;
 transition:background .32s var(--ease),color .32s var(--ease),border-color .32s var(--ease),transform .32s var(--ease),opacity .32s var(--ease)}
.faq-more a{font-size:12.5px;letter-spacing:.16em;color:var(--kogane)}
.faq-more .ar{color:var(--kogane)}


/* ══ よくあるご質問。開閉は details にまかせる（JSなしでも開く）══ */

.acc{border-top:1px solid var(--kobicha)}
ol.acc{list-style:none;margin:0;padding:0}
ol.acc li{list-style:none}
.acc details{border-bottom:1px solid var(--kobicha)}
.acc summary{position:relative;list-style:none;cursor:pointer;padding:16px 40px 16px 0;
 font-family:var(--f-disp);font-weight:500;font-size:14px;letter-spacing:.04em;line-height:1.8;transition:color .5s var(--ease)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--kogane)}

/* 記号は行の高さの中央に。行が二行になっても中央のままになる。 */
.acc summary i{position:absolute;right:4px;top:50%;margin-top:-.5px;width:13px;height:1px;background:var(--kogane)}
.acc summary i::after{content:"";position:absolute;inset:0;background:var(--kogane);transform:rotate(90deg);transition:transform .6s var(--ease)}
.acc details[open] summary i::after{transform:rotate(0)}
.acc-a{padding:0 40px 19px 0;font-size:12.5px;line-height:2.05;color:var(--hai)}
.faq-more{margin-top:22px}


/* ══ 共通のボタンと、予約CTA帯 ═══════════════════════════════════════════
   ふだんは罫線と余白で組みますが、予約への導線だけは「面」で押します。
   色は基調の変数を使うので、白基調でも濃い基調でも役割は変わりません。
   ・.btn-go  … 主たる予約ボタン（海老茶の面に明るい文字）
   ・.btn-line… 副次のボタン（罫線だけ。ギャラリー・電話など）
   ・.cta     … フッター直前の、全ページ共通の予約帯（footer.php）
   ══════════════════════════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
 padding:14px 26px;font-family:var(--f-body);font-size:12.5px;letter-spacing:.16em;line-height:1;white-space:nowrap;
 border:1px solid transparent;cursor:pointer;
 transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)}
.btn i{font-style:normal;font-size:12px;color:var(--kogane);transition:transform .32s var(--ease)}
.btn:hover i{transform:translateX(4px)}
.btn-go{background:var(--ebicha);color:var(--han);border-color:rgba(var(--han-rgb),.22)}
.btn-go:hover{background:var(--enji);border-color:var(--kogane)}
.btn-line{background:transparent;color:var(--kogane-moji);border-color:var(--keisen)}
.btn-line:hover{border-color:var(--kogane);color:var(--kogane)}
.btn-line i{color:var(--kogane)}
.btn-sm{padding:11px 20px;font-size:12px;letter-spacing:.12em}
@media (hover:none){.btn i{transform:none}}

.cta{background:var(--ji-2);border-top:1px solid var(--keisen);
 padding:clamp(52px,7vw,88px) clamp(20px,3.4vw,52px)}

/* 背景に店内写真を敷く場合。
   店内写真は明るいので、明るい面に濃い文字を載せる「白基調の組み」に固定します。
   （明るい写真に明るい文字だと必ず沈み、逆に濃い写真より写真がよく見える）。
   そのため、この帯の中だけ変数を白基調の値へ引き直し、既存の .cta-* / .btn を
   そのまま流用します。どのページ（濃い基調も含む）でも同じ明るい帯になります。
   膜（.42）は、写真の暗部（黒い看板）でも濃い文字が読める濃さです。 */
.cta--photo{position:relative;background-color:#F1EBDD;
 --ji-rgb:244,239,228; --ji:#F4EFE4; --ji-2:#EBE3D4; --keisen:#D9CEBA;
 --moji:#2A2420; --moji-2:#6B6055; --moji-3:#7A6E60; --midashi:#2A2420;
 --kogane:#9C7A2E; --kogane-moji:#6B4F16; --kogane-rgb:156,122,46;
 --ebicha:#7A3034; --enji:#A6353D; --han:#FBF8F1; --han-rgb:251,248,241;
 background-image:linear-gradient(rgba(var(--ji-rgb),.2),rgba(var(--ji-rgb),.2)),var(--cta-bg);
 background-size:cover;background-position:center;background-repeat:no-repeat}
/* 文字は写真の上に直接載せず、象牙のパネルに載せる。写真はパネルの周りに見せる。
   写真は中間調・明部・暗部（黒い看板）が混在し、そのままだと金字や薄い文字が沈むため。 */
.cta--photo .cta-in{background:rgba(var(--ji-rgb),.9);backdrop-filter:blur(2px);
 padding:clamp(28px,4vw,46px) clamp(24px,4vw,54px);border:1px solid var(--keisen)}
/* 装飾の英字ラベルは、写真の上では明るい金だと沈むので読ませる濃い金に */
.cta--photo .tag{color:var(--kogane-moji)}
.cta-in{max-width:720px;margin-inline:auto;text-align:center}
.cta .tag{display:block;margin-bottom:14px}
.cta-copy{margin:0;font-family:var(--f-disp);font-weight:500;font-feature-settings:"palt" 1;
 font-size:clamp(22px,3vw,34px);letter-spacing:.04em;line-height:1.5;color:var(--midashi);text-wrap:balance}
.cta-sub{margin:12px 0 0;font-family:var(--f-body);font-weight:400;font-size:13px;
 letter-spacing:.08em;line-height:2;color:var(--moji-2)}
.cta-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 16px;margin-top:clamp(24px,3vw,34px)}
.cta-note{margin:18px 0 0;font-size:12px;letter-spacing:.08em;color:var(--moji-2)}
@media (max-width:520px){.cta-acts{flex-direction:column}.cta-acts .btn{width:100%}}


/* ══ ライトボックス（作例の拡大表示）═══════════════════════════════════
   data-zoom を付けた画像をクリックで開く（結線は main.js）。
   色は基調変数で嵐山の配色に合わせる。地を敷いて写真を浮かせ、操作は黄金。
   ══════════════════════════════════════════════════════════════════════ */
html.ska-lb-lock{overflow:hidden}
.ska-lb{position:fixed;inset:0;z-index:120;display:none;
 background:rgba(var(--ji-rgb),.965);backdrop-filter:blur(6px);
 opacity:0;transition:opacity .55s var(--ease)}
/* .open で表示だけ先に切り替え、次フレームで .in を足して淡く浮かせる（起動をふわっと）。
   display の切り替えと不透明度の変化を同フレームで行うと遷移が効かないため二段に分ける。 */
.ska-lb.open{display:block}
.ska-lb.in{opacity:1}
/* 主画像は、淡く浮かびながらごくわずかに寄って収まる */
.ska-lb-fig{opacity:0;transform:scale(.985);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.ska-lb.in .ska-lb-fig{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
	.ska-lb{transition:none}
	.ska-lb-fig{transition:none;opacity:1;transform:none}
}
/* 図とサムネ列は別の要素なので、間の余白は inner の gap が受け持つ。
   ここが 0 だとサムネが写真の下端に貼り付いて見える。 */
/* 主画像は中央に置くが、サムネイル列は下部に固定する（下の .ska-lb-strip）。
   下側パディングでサムネ列のぶんの高さを確保し、写真の縦横に関わらず
   画像がサムネ列に重ならないようにする。 */
.ska-lb-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:clamp(16px,2.6vh,30px);
 padding:clamp(48px,7vh,84px) clamp(52px,8vw,110px) clamp(96px,15vh,124px)}
.ska-lb-fig{margin:0;max-width:100%;min-height:0;flex:0 1 auto;display:flex;flex-direction:column;align-items:center;gap:12px}
/* 主画像は、サムネイル列とキャプションの分の高さを必ず残して収める。
   横長（縦が低い）画面で画像が伸びきると、下のサムネイル列がはみ出して切れるため。 */
.ska-lb-img{max-width:100%;max-height:min(78vh,calc(100dvh - 240px));width:auto;height:auto;object-fit:contain;background:var(--ji-2)}
.ska-lb-cap{font-family:var(--f-body);font-size:12.5px;letter-spacing:.08em;color:var(--moji-2);text-align:center;max-width:40em}
.ska-lb-btn{position:absolute;z-index:2;display:grid;place-content:center;width:48px;height:48px;padding:0;
 background:rgba(var(--ji-rgb),.4);border:1px solid var(--keisen);color:var(--kogane);font-size:20px;line-height:1;cursor:pointer;
 transition:border-color .4s var(--ease),color .4s var(--ease),background .4s var(--ease)}
.ska-lb-btn:hover{border-color:var(--kogane);color:var(--midashi);background:rgba(var(--kogane-rgb),.16)}
.ska-lb-x{top:clamp(14px,3vh,28px);right:clamp(14px,3vw,28px)}
.ska-lb-prev{left:clamp(8px,2vw,24px);top:50%;margin-top:-24px}
.ska-lb-next{right:clamp(8px,2vw,24px);top:50%;margin-top:-24px}
/* サムネイル列は画面下部に固定。写真が横長でも縦長でも位置が動かず、操作しやすい。
   項目が多くて横にあふれるときは safe center で中央寄せしつつスクロールできる。 */
.ska-lb-strip{position:absolute;left:0;right:0;bottom:clamp(14px,3vh,28px);z-index:2;
 display:flex;justify-content:safe center;gap:8px;overflow-x:auto;padding:4px clamp(12px,3vw,28px) 0}
/* サムネイルは高さだけ固定し、幅は写真の比率のまま（縦でも横でも切り取らない）。
   プランごとに作例の縦横比が違うため、固定枠で cover すると必ずどちらかが崩れる。 */
.ska-lb-thumb{flex:0 0 auto;height:60px;width:auto;padding:0;border:1px solid transparent;background:none;cursor:pointer;opacity:.5;line-height:0;
 transition:opacity .4s var(--ease),border-color .4s var(--ease)}
.ska-lb-thumb img{height:100%;width:auto;display:block;object-fit:contain}
.ska-lb-thumb.on,.ska-lb-thumb:hover{opacity:1;border-color:var(--kogane)}
@media (max-width:600px){
	.ska-lb-inner{padding:60px 12px clamp(84px,16vh,104px)}   /* 下部＝サムネ列ぶんを確保 */
	.ska-lb-prev{left:6px}.ska-lb-next{right:6px}
	.ska-lb-btn{width:42px;height:42px;font-size:18px}
	.ska-lb-img{max-height:min(64vh,calc(100dvh - 210px))}
	.ska-lb-thumb{height:52px}   /* 狭い画面はサムネを少し小さく */
}
@media (prefers-reduced-motion:reduce){.ska-lb{transition:none}}


/* ══ 末尾 ══════════════════════════════════════════════════════════════ */
/* 画面が広いときに横へ間延びしないよう、内側に最大幅を設ける */
.ft{background:var(--kurocha);border-top:1px solid var(--kobicha);
 padding:clamp(54px,7vw,92px) clamp(20px,3.4vw,52px) 34px;font-size:13px}
/* 著作権表示は行の中央に置く。
   右下に浮く予約ボタンとは横に離れているので、下を大きく空ける必要はない。 */


.ft > *{max-width:1280px;margin-inline:auto}
.ft-top{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.6fr);gap:clamp(26px,3.6vw,58px)}
.ft-brand img{height:clamp(26px,2.6vw,34px);width:auto}
.ft-read{margin-top:9px;font-size:11px;letter-spacing:.28em;color:var(--moji-2)}
.ft address{margin-top:22px;font-style:normal;font-size:12.5px;line-height:2.1;color:var(--hai)}
.ft address a{color:var(--kogane)}
.ft-pay{margin-top:22px}
.ft-pay-h{display:block;font-size:11px;letter-spacing:.22em;color:var(--kogane);margin-bottom:10px}
.ft-pay-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ft-pay-row img{height:24px;width:auto;border-radius:2px;background:var(--shironeri);padding:1px 3px}
.ft-pay-note{font-size:12px;line-height:1.95;color:var(--moji-2);max-width:26em}
.ft-sns{display:flex;gap:14px;margin-top:22px}
.ft-sns a{width:34px;height:34px;display:grid;place-content:center;border:1px solid var(--kobicha);color:var(--hai);
 transition:color .5s var(--ease),border-color .5s var(--ease)}
.ft-sns svg{width:17px;height:17px;fill:currentColor}
.ft-sns a:hover{color:var(--kogane);border-color:var(--kogane)}
.ft-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,38px)}
.ft-cols .ft-h{font-family:var(--f-lat);font-weight:500;font-size:12px;letter-spacing:.28em;color:var(--kogane);margin:0 0 14px}
.ft-cols .ft-h.mt{margin-top:26px}

/* 触れると矢印が左から現れ、その幅ぶん文字が右へ送られる。
   下線は文字の下だけに引くので、矢印の下には伸びない。 */
.ft-cols a{position:relative;display:block;width:max-content;max-width:100%;margin-bottom:10px;padding-left:0;
 font-size:12.5px;letter-spacing:.04em;color:var(--hai);
 transition:color .5s var(--ease),padding-left .55s var(--ease)}
.ft-cols a::before{content:"→";position:absolute;left:0;top:0;color:var(--kogane);
 opacity:0;transform:translateX(-6px);transition:opacity .5s var(--ease),transform .55s var(--ease)}
.ft-cols a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.ft-cols a{white-space:normal;overflow:visible;line-height:1.7}}
.ft-cols a:hover{color:var(--kogane);padding-left:1.5em}
.ft-cols a:hover::before{opacity:1;transform:none}
.ft-cols a:hover{color:var(--kogane)}
.ft-csr{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:clamp(34px,5vw,60px);
 padding-top:22px;border-top:1px solid var(--kobicha);font-size:12.5px;color:var(--hai)}
.ft-csr a{margin-left:auto;color:var(--kogane);font-size:12.5px;white-space:nowrap}
.ft-csr .ar{color:var(--kogane)}
.ft-tag{margin-top:18px;padding-top:18px;border-top:1px solid var(--kobicha);text-align:center;font-size:12px;color:var(--moji-2)}
.ft-tag b{font-weight:400;color:var(--usukin)}
.ft-bot{display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(18px,3vw,44px);
 margin-top:18px;padding-top:18px;border-top:1px solid var(--kobicha);font-size:11.5px;color:var(--moji-2)}
.ft-lang{display:flex;align-items:center;gap:9px}
.ft-lang a{color:var(--hai)}
.ft-lang a.on{color:var(--kogane)}
.ft-lang span{color:var(--kobicha)}

/* 左に言語切替、右に規約類。両端で釣り合わせる。 */
.ft-legal{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:14px clamp(16px,2.2vw,30px);margin-left:auto}
@media (max-width:760px){
/* 言語・規約・著作権は、狭い画面では中央にそろえる */
.ft-legal{justify-content:center;margin-left:0;flex-basis:100%;gap:10px 18px;font-size:11.5px}
.ft-lang{flex-basis:100%;justify-content:center;flex-wrap:wrap;gap:8px}
.ft-bot{justify-content:center;text-align:center}
.ft-bot small{margin-left:0}
}
.ft-legal a{position:relative;color:var(--hai)}
.ft-legal a:hover{color:var(--kogane)}

/* 言語切替と規約類を一行に。著作権表示はその下の行に、幅いっぱいで中央に置く。 */
.ft-bot small{flex:1 0 100%;margin-top:14px;padding-top:14px;border-top:1px solid var(--kobicha);
 text-align:center;font-size:11.5px;letter-spacing:.1em;color:var(--moji-2)}
@media (max-width:900px){
.ft-top{grid-template-columns:1fr}
.ft-cols{grid-template-columns:1fr 1fr}
/* 3つ目（About・Group）は項目が多いので、下の段で幅いっぱいに使う */
.ft-cols > div:nth-child(3){grid-column:1 / -1;margin-top:8px}
.ft-cols > div:nth-child(3) > .ft-h.mt{margin-top:22px}
.ft-csr a{margin-left:0}
}



/* ページ上部へ戻る */
.to-top{position:fixed;right:26px;bottom:96px;z-index:70;width:44px;height:44px;padding:0;
 background:rgba(var(--ji-rgb),.9);backdrop-filter:blur(6px);border:1px solid var(--kobicha);color:var(--usukin);
 font-size:15px;cursor:pointer;opacity:0;visibility:hidden;
 transition:opacity .6s var(--ease),visibility .6s var(--ease),background .5s var(--ease),border-color .5s var(--ease)}
.to-top.on{opacity:1;visibility:visible}
.to-top:hover{background:var(--ebicha);border-color:var(--kogane)}
@media (max-width:760px){
.to-top{right:16px;bottom:76px;width:40px;height:40px}
}


/* ── 出現。上下ではなく、左から拭うように出す ── */
/* ── 画面に入った要素を、下から浮かび上がらせる ──────────────
   .rise を付けた要素は、少し下・少し縮んだ状態から定位置へ戻る。
   同じ並びの中では .d1〜.d5 で出る順をずらす。
   端末が「視差効果を減らす」設定のときは、何も動かさず最初から表示する。
   ──────────────────────────────────────────────────────── */
.js .rise{opacity:0;transform:translate3d(0,26px,0) scale(.985);
 transition:opacity 1.2s var(--ease),transform 1.4s var(--ease);will-change:opacity,transform}
.js .rise.in{opacity:1;transform:none}
.js .d1{transition-delay:.09s}
.js .d2{transition-delay:.18s}
.js .d3{transition-delay:.27s}
.js .d4{transition-delay:.36s}
.js .d5{transition-delay:.45s}
@media (max-width:760px){
:root{--rail:40px}
.book{right:16px;bottom:16px;padding:13px 20px}
.book span{font-size:12px;letter-spacing:.18em}
/* ヘッダーの左右余白は、本文・スマホメニュー（.sheet）と同じガターに揃える。
   以前は 18px 固定で、メニュー項目（20px）と2pxずれて見えていた。 */
.top{padding:0 clamp(20px,3.4vw,52px)}
.top nav{display:none}
/* ヒーローを持つページ（トップ・プラン＝.hero-nav）は先頭でヘッダーを隠す（away）が、
   スマホには目次(.index)がないため、隠すとメニューを開く手段が消える。ヒーローの間は
   バーだけ透明にしてバーガーを画面内に残し、押せるようにする（ロゴは隠す）。
   ※スクロールで下層に入ってからの away（.hero-nav でない状態は無い）とは別扱い。 */
.top.hero-nav.away{transform:none;background:transparent;box-shadow:none;border-color:transparent}
.top.hero-nav.away .brand-h{opacity:0;pointer-events:none}
.top.hero-nav.away .burger{pointer-events:auto}
}

/* ══════════════════════════════════════════════════════════════════════
   スマートフォンでの調整
   画面が狭いと、余白・重なり・写真の上の文字が一気に読みにくくなる。
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){

	/* 左端の目次は場所を取るわりに押しにくいので出さない。
	   そのぶん本文が画面幅いっぱいを使える。移動はハンバーガーから行う。 */
	:root{--rail:0px}
.index{display:none}


	/* 予約は右下の小さなボタンではなく、下辺いっぱいの帯にする。
	   本文に被る位置が一定になり、押す面積も広がる。 */
	.book{right:0;left:0;bottom:0;justify-content:center;gap:10px;
	 padding:15px 20px calc(15px + env(safe-area-inset-bottom));
	 border:0;border-top:1px solid rgba(190,151,72,.4)}
.book span{font-size:13px;letter-spacing:.16em}
.to-top{right:14px;bottom:calc(70px + env(safe-area-inset-bottom));width:38px;height:38px}
/* 幅の狭い画面では、下辺いっぱいの予約の帯ぶんを空ける */
.ft{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{transition-duration:.001ms!important;animation-duration:.001ms!important}
.rise{opacity:1!important;transform:none!important}
}

/* ══════════════════════════════════════════════════════════════════════
   下層ページ（記事一覧・記事・固定ページ・404）
   トップページ以外はこの組みを使います。
   ══════════════════════════════════════════════════════════════════════ */
/* 下層のコンテンツページ（page.php / single.php）は、固定した上辺の帯の下に
   本文が潜らないよう上余白を取る。
   ただしトップと /about/ のように全面デザインで上余白を自前で管理するページ
   （body に ska-flush が付く）は除く。これを付け忘れると、トップページを
   「固定ページ」に設定したときに body へ page クラスが付き、この余白が効いて
   ヒーローとロゴがまるごと押し下がる。 */
.page:not(.ska-flush),.single:not(.ska-flush){padding:calc(var(--topH) + clamp(46px,7vw,90px)) 0 clamp(70px,9vw,120px)}
/* 下層コンテンツページの直下の要素を、本文幅に収めて中央寄せする。
   トップと /about/（ska-flush）は全面デザインなので除外する。
   除外し忘れると、固定ページの body に付く page クラス経由で
   .wrap の rail マージン（左帯ぶんの余白）が margin-inline:auto に潰され、
   本文が左端まで広がって左帯の下に潜る。 */
/* 本文の器（.wrap）を本文幅に収めて中央寄せする。 */
.page:not(.ska-flush) > .wrap,.single:not(.ska-flush) > .wrap{max-width:var(--pw);margin-inline:auto}

/* パンくずリスト（全ページ共通・ska_breadcrumb()）。本文幅に合わせて左端をそろえる */
.crumbs{max-width:var(--pw);margin:0 auto clamp(14px,2vw,22px);padding:0 clamp(20px,3.4vw,52px)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
 font-family:var(--f-lat);font-size:11.5px;letter-spacing:.1em;color:var(--moji-2)}
.crumbs li{display:inline-flex;align-items:center;gap:8px;min-width:0}
.crumbs li:not(:last-child)::after{content:"\203a";color:var(--keisen)}
.crumbs a{color:var(--kogane-moji);text-decoration:none;transition:color .3s var(--ease)}
.crumbs a:hover{color:var(--enji)}
.crumbs [aria-current]{color:var(--moji-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22em}
/* 全面デザイン（プラン・about）はヒーロー直後にパンくずが来るので、上に余白を取る */
.ska-flush .crumbs{margin-top:clamp(30px,4.4vw,56px)}
/* 予約帯（.cta）とフッター（.ft）は全幅の帯。これらは .wrap の内側にあるため、
   本文幅に収めると広い画面で帯が途中で切れる。ビューポート幅いっぱいに抜き出す。 */
.page:not(.ska-flush) .cta,.single:not(.ska-flush) .cta,
.page:not(.ska-flush) .ft,.single:not(.ska-flush) .ft{width:100vw;margin-inline:calc(50% - 50vw)}
/* 本文の最後と予約帯（.cta）が接して窮屈に見えるため、帯の手前に一定の余白を
   必ず取る（末尾がボタンでも本文でも同じ間隔になる）。下層・ブログ一覧・記事・
   アーカイブなど全ページ共通。全面デザイン（ska-flush：トップ・about・プラン）は
   各自で間合いを管理するので除く。末尾ブロックに margin-bottom は持たせない前提。 */
body:not(.ska-flush) .cta{margin-top:clamp(60px,8vw,104px)}
.single:not(.ska-flush) .sec-h h1.copy,.page:not(.ska-flush) .sec-h h1.copy{margin:0;font-family:var(--f-disp);font-weight:500;
 font-feature-settings:"palt" 1;font-size:clamp(21px,2.6vw,32px);letter-spacing:.04em;line-height:1.56}

/* 本文 */
.prose{padding:0 clamp(20px,3.4vw,52px);max-width:calc(var(--mw) * .62);margin-inline:auto;
 font-size:15px;line-height:1.95;color:var(--moji)}
/* 本文の縦リズム。記事は <article>/<section> 等で深く入れ子になることがあり、
   直下の子だけに効く隣接指定（旧: .prose > * + *）では中の画像・段落に余白が届かない。
   そこで doc ページと同じく「要素ごとに余白を持たせる」方式にし、入れ子でも詰まらないようにする。 */
.prose p{margin:0 0 1.3em;color:var(--moji)}
.prose h2{margin:2.2em 0 .8em;padding-top:1.15em;border-top:1px solid var(--keisen);
 font-family:var(--f-disp);font-weight:600;font-size:clamp(21px,2.5vw,27px);letter-spacing:.05em;color:var(--midashi);line-height:1.5}
.prose h3{margin:1.85em 0 .5em;font-family:var(--f-disp);font-weight:600;font-size:clamp(17px,1.9vw,20px);letter-spacing:.04em;color:var(--midashi);line-height:1.55}
.prose a{color:var(--kogane);text-decoration:underline;text-underline-offset:.22em}
.prose img{display:block;max-width:100%;height:auto;margin:clamp(20px,2.8vw,32px) auto}
.prose figure{margin:clamp(20px,2.8vw,32px) auto}
.prose figure img{margin:0}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.4em;color:var(--moji)}
.prose li + li{margin-top:.5em}
.prose section + section{margin-top:clamp(30px,3.6vw,46px)}
.prose blockquote{margin:1.5em 0;padding:18px 22px;border-left:2px solid var(--kogane);background:var(--kogecha);color:var(--moji-2)}
.prose table{width:100%;margin:1.5em 0;border-collapse:collapse;font-size:13.5px}
.prose th,.prose td{padding:12px 14px 12px 0;border-bottom:1px solid var(--kobicha);text-align:left;vertical-align:top}
.prose th{color:var(--kogane);font-weight:500;white-space:nowrap}
.single-hero{margin:clamp(26px,4vw,48px) auto;padding:0 clamp(20px,3.4vw,52px);max-width:calc(var(--mw) * .78)}
.single-hero img{width:100%;height:auto}

/* 一覧の札 */
.cards{list-style:none;margin:0;padding:0 clamp(20px,3.4vw,52px);
 display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:clamp(16px,2.2vw,30px)}
.card{list-style:none}
.card a{position:relative;display:block;height:100%;background:var(--kogecha);border:1px solid var(--kobicha);
 overflow:hidden;transition:border-color var(--slow) var(--ease)}
.card a:hover{border-color:var(--kogane)}
.card figure{margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--kurocha)}
.card figure img{width:100%;height:100%;object-fit:cover;transition:transform 3s var(--ease)}
.card a:hover figure img{transform:scale(1.05)}
.card-in{padding:20px 22px 46px}
.card-in time{font-family:var(--f-lat);font-size:12px;letter-spacing:.14em;color:var(--moji-2)}
.card-in h3{margin:8px 0 10px;font-size:16px;letter-spacing:.04em}
.card-in p{font-size:12.5px;line-height:1.95;color:var(--hai)}
.card .arw{right:20px;bottom:16px}
.card a:hover .arw{border-color:var(--kogane);color:var(--kogane);transform:translateX(3px)}

/* ページ送り */
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;
 margin-top:clamp(34px,5vw,60px);padding:0 clamp(20px,3.4vw,52px);font-size:13px}
.pager a,.pager span{min-width:40px;padding:9px 14px;border:1px solid var(--kobicha);text-align:center;color:var(--hai);
 transition:border-color .5s var(--ease),color .5s var(--ease)}
.pager a:hover{border-color:var(--kogane);color:var(--kogane)}
.pager .current{border-color:var(--kogane);color:var(--kogane)}

.empty{padding:0 clamp(20px,3.4vw,52px);color:var(--hai)}
.nf-links{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:26px}
.nf-links a{font-size:13px;letter-spacing:.12em;color:var(--kogane)}
.nf-links .ar{color:var(--kogane)}


/* ══════════════════════════════════════════════════════════════════════
   ジャンルごとの基調色

   プランのページは、それぞれの装いの世界に合わせて基調色を変えます。
   body に印を付けるだけで、地・文字・膜がまとめて入れ替わります。
   （印は inc/setup.php の ska_body_class が、ページのスラッグから付けます）

   差し色（臙脂・黄金）の役割は、どの基調でも変えません。
   基調が濃いページでは、白基調とは逆に「膜で写真を沈めて文字を起こす」
   組み方に戻るため、--maku-* の値もあわせて持たせています。
   ══════════════════════════════════════════════════════════════════════ */

/* ── 花魁：黒茶の地に臙脂と黄金。もとの、いちばん濃い装い ── */
body.tone-oiran{
	/* 旧い名前の橋渡しは、基調ごとに引き直す必要があります。
	   :root の「--kurocha:var(--ji)」は :root の --ji で確定した色（白基調の象牙）を
	   そのまま継承するため、body で --ji を差し替えても追従しません。
	   基調を切り替えるブロックの中で、その基調の新しい変数へ改めて結び直します。 */
	--kurocha:var(--ji); --kogecha:var(--ji-2); --kobicha:var(--keisen);
	--sumi:var(--moji); --zouge:var(--midashi); --shironeri:var(--han); --hai:var(--moji-2);
	--moji-rgb:248,244,230; --enji-rgb:185,64,71; --kogane-rgb:190,151,72;
	--limit-ji:var(--ebicha); --limit-moji:var(--han); --limit-moji-2:rgba(var(--han-rgb),.7);
	--limit-tag:var(--usukin); --camp-akaru:.52; --camp-moji:var(--han);
	--camp-moji-2:rgba(var(--han-rgb),.78); --camp-tag:var(--kogane);
	--camp-waku:rgba(var(--han-rgb),.22); --camp-maku-rgb:var(--ji-rgb);
	--camp-akaru-on:.28; --camp-over-maku:.3;
	--maku-fuda-ue:.86; --maku-fuda-shita:.66;
	--kogane-moji:#BE9748;   /* 濃い地の上では、そのままで十分読めます */
	--hero-veil-rgb:var(--ji-rgb); --hero-midashi:var(--midashi); --hero-moji:var(--midashi); --hero-label:var(--usukin);
	--ji:#1C1815; --ji-2:#26201B; --keisen:#3A3028; --ji-rgb:28,24,21;
	--moji:#F8F4E6; --moji-2:#BCB1A2; --moji-3:#9A8D7C;
	--midashi:#F8F4E6; --han:#FCFAF2; --han-rgb:248,244,230;
	--enji:#B94047; --ebicha:#6C2C2F; --kogane:#BE9748;
	--usukin:#CBB489; --fukakin:#8C6E2B;
	--maku-ue:.72; --maku-naka:.24; --maku-shita:.94;
	--maku-hidari:.78; --maku-hidari-w:52%; --maku-moji:0;
	--maku-iko:.64; --shashin:none;
	--chizu:invert(.9) hue-rotate(185deg) brightness(1.04) contrast(.86) saturate(.6) sepia(.24); --chizu-maku:.16;
}

/* ── 百鬼夜行：藍墨の地に藤紫と青白い光。夜の妖しさ ── */
body.tone-yokai{
	/* 旧い名前の橋渡しを、この基調の新しい変数へ引き直す（理由は花魁の項を参照）。 */
	--kurocha:var(--ji); --kogecha:var(--ji-2); --kobicha:var(--keisen);
	--sumi:var(--moji); --zouge:var(--midashi); --shironeri:var(--han); --hai:var(--moji-2);
	--moji-rgb:232,230,240; --enji-rgb:126,74,140; --kogane-rgb:143,166,196;
	--limit-ji:var(--ebicha); --limit-moji:var(--han); --limit-moji-2:rgba(var(--han-rgb),.7);
	--limit-tag:var(--usukin); --camp-akaru:.52; --camp-moji:var(--han);
	--camp-moji-2:rgba(var(--han-rgb),.78); --camp-tag:var(--kogane);
	--camp-waku:rgba(var(--han-rgb),.22); --camp-maku-rgb:var(--ji-rgb);
	--camp-akaru-on:.28; --camp-over-maku:.3;
	--maku-fuda-ue:.86; --maku-fuda-shita:.66;
	--kogane-moji:#8FA6C4;   /* 濃い地の上では、そのままで十分読めます */
	--hero-veil-rgb:var(--ji-rgb); --hero-midashi:var(--midashi); --hero-moji:var(--midashi); --hero-label:var(--usukin);
	--ji:#14161C; --ji-2:#1C1F27; --keisen:#2F3440; --ji-rgb:20,22,28;
	--moji:#E8E6F0; --moji-2:#A9A6BC; --moji-3:#8B8799;
	--midashi:#E8E6F0; --han:#F4F2FA; --han-rgb:232,230,240;
	--enji:#7E4A8C;      /* 藤紫 */
	--ebicha:#3E2A4C;
	--kogane:#8FA6C4;    /* 青白い光 */
	--usukin:#A9BDD6; --fukakin:#5D7A96;
	--maku-ue:.76; --maku-naka:.28; --maku-shita:.95;
	--maku-hidari:.8; --maku-hidari-w:52%; --maku-moji:0;
	--maku-iko:.68; --shashin:saturate(.92) contrast(1.04);
	--chizu:invert(.9) hue-rotate(190deg) brightness(1.02) contrast(.88) saturate(.5); --chizu-maku:.16;
}

/* ── 新選組：墨黒の地に浅葱と朱。だんだら羽織の色 ── */
body.tone-shinsengumi{
	/* 旧い名前の橋渡しを、この基調の新しい変数へ引き直す（理由は花魁の項を参照）。 */
	--kurocha:var(--ji); --kogecha:var(--ji-2); --kobicha:var(--keisen);
	--sumi:var(--moji); --zouge:var(--midashi); --shironeri:var(--han); --hai:var(--moji-2);
	--moji-rgb:237,241,242; --enji-rgb:192,71,63; --kogane-rgb:95,168,160;
	--limit-ji:var(--ebicha); --limit-moji:var(--han); --limit-moji-2:rgba(var(--han-rgb),.7);
	--limit-tag:var(--usukin); --camp-akaru:.52; --camp-moji:var(--han);
	--camp-moji-2:rgba(var(--han-rgb),.78); --camp-tag:var(--kogane);
	--camp-waku:rgba(var(--han-rgb),.22); --camp-maku-rgb:var(--ji-rgb);
	--camp-akaru-on:.28; --camp-over-maku:.3;
	--maku-fuda-ue:.86; --maku-fuda-shita:.66;
	--kogane-moji:#5FA8A0;   /* 濃い地の上では、そのままで十分読めます */
	--hero-veil-rgb:var(--ji-rgb); --hero-midashi:var(--midashi); --hero-moji:var(--midashi); --hero-label:var(--usukin);
	--ji:#16181A; --ji-2:#1E2124; --keisen:#333A3E; --ji-rgb:22,24,26;
	--moji:#EDF1F2; --moji-2:#AEB8BC; --moji-3:#8C979B;
	--midashi:#EDF1F2; --han:#F6FAFB; --han-rgb:237,241,242;
	--enji:#C0473F;      /* 朱 */
	--ebicha:#7A2E28;
	--kogane:#5FA8A0;    /* 浅葱 */
	--usukin:#8FC9C2; --fukakin:#3E7D76;
	--maku-ue:.74; --maku-naka:.26; --maku-shita:.95;
	--maku-hidari:.79; --maku-hidari-w:52%; --maku-moji:0;
	--maku-iko:.66; --shashin:none;
	--chizu:invert(.9) hue-rotate(180deg) brightness(1.03) contrast(.88) saturate(.55); --chizu-maku:.16;
}

/* ── ピンクリボン：淡い桜色の地に薔薇色。白基調と同じ「明るい地に濃い文字」の組みで、
   乳がん啓発のやさしい色合いに寄せる。膜・限定・地図などは :root（白基調）を引き継ぐ。 */
body.tone-pink{
	/* 旧い名前の橋渡しを、この基調の新しい変数へ引き直す（引き直さないと白基調のままになる） */
	--kurocha:var(--ji); --kogecha:var(--ji-2); --kobicha:var(--keisen);
	--sumi:var(--moji); --zouge:var(--midashi); --shironeri:var(--han); --hai:var(--moji-2);
	--moji-rgb:58,42,48; --enji-rgb:196,62,110; --kogane-rgb:176,120,110;
	--kogane-moji:#8A4A5E;   /* 淡いピンク地の上で読める、濃い薔薇色 */
	/* HERO は白基調と同じ「淡い地の膜＋濃い文字」（膜色＝桜色）。導入文・ラベルは、明るい
	   写真の中間調（花や肌）に重なっても読めるよう濃い薔薇色に。実写真へ合成して 4.5 以上を確認。 */
	--hero-veil-rgb:var(--ji-rgb); --hero-midashi:var(--midashi); --hero-moji:#3A2A30; --hero-label:#6A2A48;
	--ji:#FBEFF1; --ji-2:#F6E1E7; --keisen:#E8CBD5; --ji-rgb:251,239,241;
	--moji:#3A2A30; --moji-2:#7A5C66; --moji-3:#8C6E78;
	--midashi:#3A2A30; --han:#FFF7F9; --han-rgb:255,247,249;
	--enji:#C43E6E;      /* 薔薇色（差し色の主） */
	--ebicha:#8E3357;    /* 濃い薔薇 */
	--kogane:#B0786E;    /* 温かなロゼゴールド寄り */
	--usukin:#C99AA6; --fukakin:#8A5A6A;
	--shashin:none;
}

/* ── サムライ：墨黒の地に、真鍮の金と錆朱。武士道の静けさを、落ち着いた濃い基調で ── */
body.tone-samurai{
	--kurocha:var(--ji); --kogecha:var(--ji-2); --kobicha:var(--keisen);
	--sumi:var(--moji); --zouge:var(--midashi); --shironeri:var(--han); --hai:var(--moji-2);
	--moji-rgb:237,234,226; --enji-rgb:162,74,60; --kogane-rgb:179,154,99;
	--limit-ji:var(--ebicha); --limit-moji:var(--han); --limit-moji-2:rgba(var(--han-rgb),.7);
	--limit-tag:var(--usukin); --camp-akaru:.52; --camp-moji:var(--han);
	--camp-moji-2:rgba(var(--han-rgb),.78); --camp-tag:var(--kogane);
	--camp-waku:rgba(var(--han-rgb),.22); --camp-maku-rgb:var(--ji-rgb);
	--camp-akaru-on:.28; --camp-over-maku:.3;
	--maku-fuda-ue:.86; --maku-fuda-shita:.66;
	--kogane-moji:#B39A63;   /* 墨黒の上では、そのままで読めます */
	--hero-veil-rgb:var(--ji-rgb); --hero-midashi:var(--midashi); --hero-moji:var(--midashi); --hero-label:var(--usukin);
	--ji:#17161A; --ji-2:#201F22; --keisen:#37363A; --ji-rgb:23,22,26;
	--moji:#EDEAE2; --moji-2:#B0ABA0; --moji-3:#8A8680;
	--midashi:#EDEAE2; --han:#F6F4EE; --han-rgb:246,244,238;
	--enji:#A24A3C;      /* 錆朱 */
	--ebicha:#6B2E26;
	--kogane:#B39A63;    /* 真鍮の金 */
	--usukin:#CBB98C; --fukakin:#8A7440;
	--maku-ue:.74; --maku-naka:.26; --maku-shita:.95;
	--maku-hidari:.79; --maku-hidari-w:52%; --maku-moji:0;
	--maku-iko:.66; --shashin:none;   /* 撮影はカラー。写真はそのままの色で表示する */
	--chizu:invert(.9) hue-rotate(20deg) brightness(1.02) contrast(.9) saturate(.25); --chizu-maku:.16;
}