:focus-visible{outline:2px solid var(--kogane);outline-offset:4px}
.pair,.info{max-width:calc(var(--mw) + clamp(40px, 6.8vw, 104px));margin-inline:auto}
/* フレックスの中では margin-inline:auto が「中身の幅に縮めて中央寄せ」として働いてしまう。
幅を明示して、左端が他の節とそろうようにする。 */
.mood-fix > .sec-h{width:100%;margin-bottom:clamp(18px,2.4vw,28px)}
.open{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--kurocha)}
/* ログイン中は管理バーのぶん画面が下がるので、その高さだけ詰めて画面ちょうどに収める */
.admin-bar .open{height:calc(100svh - 32px)}
@media (max-width:782px){.admin-bar .open{height:calc(100svh - 46px)}}
.misu{position:absolute;inset:0;display:flex;gap:2px;z-index:0}
.msl{position:relative;overflow:hidden;flex:1 1 0;transition:flex-grow 2.6s var(--ease)}
.msl b{position:absolute;left:0;right:0;bottom:26px;z-index:2;text-align:center;writing-mode:vertical-rl;margin-inline:auto;height:max-content;
font-family:var(--f-disp);font-weight:500;font-size:13px;letter-spacing:.28em;color:var(--zouge);
opacity:0;transform:translateY(14px);transition:opacity 1.8s var(--ease),transform 1.8s var(--ease)}
.msl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;z-index:2;background:var(--kogane);transform:scaleY(0);transform-origin:top;transition:transform 2.4s var(--ease)}
/* 幅をそろえない */
.msl:nth-child(2){flex-grow:1.5}
.msl:nth-child(4){flex-grow:1.9}
.msl:nth-child(6){flex-grow:1.35}
.msl:nth-child(7){flex-grow:.7}
.mtape{position:absolute;left:0;right:0;top:0;display:flex;flex-direction:column;will-change:transform}
/* 同じ並びを2組つなぎ、1組ぶん流れたら先頭に戻して途切れなく見せている。
1組の高さが画面より低いと、流れ切ったところで隙間が出る。
高さは4枚周期で変える。
・すべて同じ高さだと、列の中が単調になる
・写真の元の比率に任せると、細い列では最低の高さに張り付いて結局そろってしまう
そこで表示する高さのほうに変化をつけ、切り抜きで比率を吸収する。
おかげで縦長・横長・正方形のどれを入れても成立する。
各列は写真3枚で、それを2組つないでいる。周期は列の枚数に合わせて3枚で組む。
（4枚周期にすると、3枚では2組の高さが食い違い＝ループが継ぎ目で跳ね、
さらに1組が画面高さに届かず、列の上下に隙間＝黒帯が出る。）
3枚ぶんの合計は 104svh。画面の高さを必ず超えるので、隙間は出ない。
列の写真枚数を変えるときは、この周期も枚数に合わせること。 */
.mtape img{width:100%;height:auto;object-fit:cover;display:block;flex:0 0 auto}
.mtape img:nth-child(3n+1){min-height:34svh}
.mtape img:nth-child(3n+2){min-height:30svh}
.mtape img:nth-child(3n+3){min-height:40svh}
/* 列ごとに速さと向きを変える。上下に流れる列を混ぜる */
.js .msl:nth-child(1) .mtape{animation:slideup 74s linear infinite}
.js .msl:nth-child(2) .mtape{animation:slidedn 58s linear infinite}
.js .msl:nth-child(3) .mtape{animation:slideup 92s linear infinite}
.js .msl:nth-child(4) .mtape{animation:slidedn 66s linear infinite}
.js .msl:nth-child(5) .mtape{animation:slideup 50s linear infinite}
.js .msl:nth-child(6) .mtape{animation:slidedn 84s linear infinite}
.js .msl:nth-child(7) .mtape{animation:slideup 62s linear infinite}
/* 列ごとの沈め方。中央だけ明るく、端へゆくほど暗くする */
.msl::after{content:"";position:absolute;inset:0;background:var(--kurocha);opacity:.62;transition:opacity 2.2s var(--ease)}
.msl:nth-child(3)::after,.msl:nth-child(5)::after{opacity:.34}
.msl:nth-child(4)::after{opacity:.16}
.msl:nth-child(1)::after,.msl:nth-child(7)::after{opacity:.8}
@media (hover:hover) and (min-width:900px){
/* 触れた列は闇が引き、幅が広がり、流れが速まって、名が立ち上がる */
.misu:hover .msl::after{opacity:.82}
.misu:hover .msl{flex-grow:.86}
.misu:hover .msl:hover::after{opacity:.06}
.misu:hover .msl:hover{flex-grow:2.2}
/* 流れの速さは急に変えず、緩やかに寄せる */
.mtape{transition:none}
.msl:hover .mtape{animation-duration:30s}
.msl:hover b{opacity:1;transform:none;transition-delay:.7s}
.msl:hover::before{transform:scaleY(1)}
}
/* 文字が沈まないよう、下辺と左に地を敷く */
.misu-veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:
/* 上下：帯と次の節へのつなぎ。左右：文字を読ませるための地。
濃さは基調ごとに変わる（--maku-* は theme.css で定義）。
白基調では写真の色が洗われるため、全面を覆わず薄く効かせる。 */
/* 上下：帯と次の節へのつなぎ */
linear-gradient(to bottom,rgba(var(--ji-rgb),var(--maku-ue)) 0,rgba(var(--ji-rgb),var(--maku-naka)) 26%,rgba(var(--ji-rgb),var(--maku-naka)) 60%,rgba(var(--ji-rgb),var(--maku-shita)) 100%),
/* 左：文字を読ませるための地。
白基調では、これを全高・広範囲に効かせると一列目が覆われて見えなくなるため、
濃さ（--maku-hidari）と届く範囲（--maku-hidari-w）を基調ごとに変える。
白基調は弱く狭く（写真を見せる）、濃い基調は従来どおり強く広く。 */
linear-gradient(to right,rgba(var(--ji-rgb),var(--maku-hidari)),rgba(var(--ji-rgb),0) var(--maku-hidari-w))}
/* 一枚目の文字。
位置は left/bottom 基準なので、余白のぶんだけ位置を戻して見た目を保つ。
文字のかたまり自身にも地を持たせ、膜が薄い基調でも必ず読めるようにする。 */
.hword{--hw-pad:clamp(14px,1.8vw,24px);
position:absolute;
left:calc(clamp(20px,3.4vw,52px) - var(--hw-pad));
bottom:calc(clamp(96px,15vh,148px) - var(--hw-pad));
z-index:3;max-width:min(88vw,30em);
padding:var(--hw-pad) clamp(40px,4vw,64px) var(--hw-pad) var(--hw-pad);
background:linear-gradient(to right,
rgba(var(--ji-rgb),var(--maku-moji)) 0,
rgba(var(--ji-rgb),var(--maku-moji)) 62%,
rgba(var(--ji-rgb),0) 100%)}
/* 日本語を主役にする組み。
欧文は級数を落として冠にまわし、日本語は 40px 前後で頭打ちにする。
日本語は字面が大きいので、欧文と同じ級数まで上げると途端に安く見える。
そのぶん字間を詰め（palt＋負のトラッキング）、行間を締めて密度で見せる。 */
.hword .lat{display:block;font-family:var(--f-lat);font-weight:400;font-size:clamp(19px,2.4vw,30px);line-height:1.1;letter-spacing:.02em;color:var(--usukin);margin-bottom:clamp(14px,2vh,20px)}
.hword .jp{display:block;margin:0;font-family:var(--f-disp);font-weight:500;font-feature-settings:"palt" 1;
font-size:clamp(24px,3.6vw,44px);line-height:1.58;letter-spacing:-.01em;color:var(--zouge)}
.hword .jp em{font-style:normal;color:var(--kogane)}
/* 句読点で改行させない。「嵐山で、」の読点が行頭に落ちるのを防ぐ */
.hword .jp span{white-space:nowrap}
/* 大きいコピーは装飾（p）、その下の小さい行が h1。
見た目の主役と、文書構造上の主題を分けている。 */
.hword h1.sub{margin:clamp(13px,1.8vh,18px) 0 0;font-family:var(--f-body);font-size:12.5px;font-weight:400;
line-height:1.9;letter-spacing:.14em;color:var(--usukin)}
.hword .sub2{margin-top:clamp(13px,1.8vh,18px);font-family:var(--f-body);font-size:13px;font-weight:400;
line-height:2;letter-spacing:.06em;color:var(--hai)}
.hfoot{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;gap:clamp(14px,2.4vw,30px);padding:0 clamp(20px,3.4vw,52px) clamp(22px,3.6vh,34px)}
.hscroll{display:flex;align-items:center;gap:12px;font-family:var(--f-lat);font-size:11px;letter-spacing:.24em;color:var(--moji-3)}
.hscroll i{display:block;width:46px;height:1px;background:var(--kobicha);position:relative;overflow:hidden}
.hscroll i::after{content:"";position:absolute;inset:0;background:var(--kogane);transform:translateX(-100%);animation:sweep 3.6s var(--ease) infinite}
.hplans{display:flex;flex-wrap:wrap;gap:0;font-size:11px;letter-spacing:.16em;color:var(--moji-2)}
.hplans span{padding-right:clamp(10px,1.4vw,18px);margin-right:clamp(10px,1.4vw,18px);border-right:1px solid var(--kobicha)}
.hplans span:last-child{border-right:0}
.hbook{margin-left:auto;display:flex;align-items:center;gap:11px;padding:13px 22px;border:1px solid var(--kobicha);background:rgba(var(--ji-rgb),.5);backdrop-filter:blur(6px);font-size:12px;letter-spacing:.18em;transition:background .8s var(--ease),border-color .8s var(--ease),color .8s var(--ease)}
.hbook i{font-style:normal;color:var(--kogane);transition:transform .34s var(--ease)}
.hbook:hover i{transform:translateX(4px)}
/* ホバーで地が濃い海老茶になるので、文字は明るい（--han）に切り替えて読ませる。 */
.hbook:hover{background:var(--ebicha);border-color:var(--kogane);color:var(--han)}
.js .msl{animation:drop 2.2s var(--ease) both}
.js .msl:nth-child(2){animation-delay:.1s}
.js .msl:nth-child(3){animation-delay:.2s}
.js .msl:nth-child(4){animation-delay:.3s}
.js .msl:nth-child(5){animation-delay:.4s}
.js .msl:nth-child(6){animation-delay:.5s}
.js .msl:nth-child(7){animation-delay:.6s}
@media (max-width:860px){
/* 幅の狭い画面では列を4本に絞る。7本のままだと1本が細すぎて写真が読めない */
/* PCで目立つのは3〜6列目。狭い画面でも同じ4列を出して、主役の写真をそろえる。 */
.msl:nth-child(1),.msl:nth-child(2),.msl:nth-child(7){display:none}
.msl:nth-child(3){flex-grow:1}
.msl:nth-child(4){flex-grow:1.5}
.msl:nth-child(5){flex-grow:1.15}
.msl:nth-child(6){flex-grow:.85}
/* 縦長の画面では写真の縦幅が足りず下に隙間ができるため、幅を広げて高さを稼ぐ */
/* 幅の狭い画面は列が太いので、3枚周期。合計は 108svh */
.mtape img{width:100%;height:auto;object-fit:cover;max-width:none}
.mtape img:nth-child(3n+1){min-height:40svh}
.mtape img:nth-child(3n+2){min-height:30svh}
.mtape img:nth-child(3n+3){min-height:38svh}
.msl::after{opacity:.5}
.msl:nth-child(4)::after{opacity:.3}
.msl:nth-child(3)::after,.msl:nth-child(5)::after{opacity:.44}
.msl:nth-child(6)::after{opacity:.56}
.misu-veil{background:
linear-gradient(to bottom,rgba(var(--ji-rgb),var(--maku-ue)) 0,rgba(var(--ji-rgb),var(--maku-naka)) 20%,rgba(var(--ji-rgb),calc(var(--maku-naka) + .2)) 44%,rgba(var(--ji-rgb),var(--maku-shita)) 78%,var(--ji) 100%)}
/* 狭い画面では文字のかたまりが場所を取り、写真の見える範囲が狭くなる。
字と行間、要素の間の余白をそれぞれ詰めて、かたまり全体を小さくする。 */
.hword{bottom:clamp(96px,15vh,136px);--hw-pad:12px;
padding:var(--hw-pad) clamp(28px,7vw,52px) var(--hw-pad) var(--hw-pad)}
.hword .lat{font-size:clamp(15px,4.2vw,19px);letter-spacing:.02em;margin-bottom:9px}
.hword .jp{font-size:clamp(19px,5.6vw,26px);line-height:1.52}
.hword h1.sub{font-size:11px;letter-spacing:.08em;line-height:1.75;margin-top:10px}
.hword .sub2{font-size:11.5px;line-height:1.8;margin-top:9px}
.hplans{display:none}
.hbook{padding:11px 16px;font-size:11px;letter-spacing:.14em}
}
/* 触れられない端末では、画面の中央に来た列が開く */
.msl.act::after{opacity:.08}
.msl.act b{opacity:1;transform:none;transition-delay:.15s}
.msl.act::before{transform:scaleY(1)}
@media (prefers-reduced-motion:reduce){
.js .msl,.js .mtape{animation:none}
}
/* ══ 二枚目。細い帯で要点を並べ、続けてお知らせ、そして店の紹介へ ══ */
.ticker{border-top:1px solid var(--kobicha);border-bottom:1px solid var(--kobicha);background:var(--kogecha);overflow:hidden}
.tick-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:10px clamp(14px,2.4vw,38px);padding:15px clamp(20px,3.4vw,52px);
font-size:12px;letter-spacing:.12em;color:var(--hai);text-align:center}
@media (max-width:560px){
.tick-in{gap:8px 14px;font-size:11.5px;letter-spacing:.06em}
.tick-in i{display:none}
}
.tick-in::-webkit-scrollbar{display:none}
.tick-in b{font-family:var(--f-disp);font-weight:500;font-size:15px;letter-spacing:.06em;color:var(--kogane);padding:0 2px}
.tick-in i{flex:0 0 auto;width:4px;height:4px;background:var(--kobicha);border-radius:50%}
/* ── 節ごとの地色 ──────────────────────────────────────────────
黒茶（地）と焦茶（一段明るい面）を交互に置き、境目に細い罫を入れる。
期間限定だけは海老茶で、強い色を一箇所に集める。
────────────────────────────────────────────────────────── */
.news{padding:clamp(30px,4vw,46px) 0;background:var(--kurocha);border-bottom:1px solid var(--kobicha)}
.news-in{padding:0 clamp(20px,3.4vw,52px)}
.news-head{display:flex;align-items:baseline;gap:14px;margin-bottom:14px}
.news-en{font-family:var(--f-lat);font-size:11px;letter-spacing:.3em;color:var(--kogane)}
.news-jp{margin:0;font-family:var(--f-disp);font-weight:500;font-size:15px;letter-spacing:.1em}
.news-all{margin-left:auto;font-size:12px;letter-spacing:.14em;color:var(--hai)}
.news-all .ar{color:var(--kogane)}
.news-list{list-style:none;margin:0;padding:0}
.news-list li{list-style:none}
.news-list li + li{border-top:1px solid var(--kobicha)}
.news-list a{position:relative;display:flex;align-items:center;gap:clamp(12px,2vw,28px);padding:13px 0;
transition:color .5s var(--ease),padding-left .55s var(--ease)}
/* 触れると、行の左に金の印が出て、文字が少し右へ送られる */
.news-list a::before{content:"";position:absolute;left:0;top:50%;width:14px;height:1px;background:var(--kogane);
transform:translateY(-50%) scaleX(0);transform-origin:left;transition:transform .55s var(--ease)}
.news-list a:hover{padding-left:26px}
.news-list a:hover::before{transform:translateY(-50%) scaleX(1)}
.news-list time,.news-list .nt{transition:color .5s var(--ease)}
.news-list a:hover time{color:var(--kogane)}
.news-list time{flex:0 0 auto;font-family:var(--f-lat);font-size:12px;letter-spacing:.14em;color:var(--moji-3)}
.news-list .nt{font-size:13.5px;letter-spacing:.04em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.news-list .arw3{margin-left:auto;flex:0 0 auto;color:var(--moji-3);font-size:12px;transition:transform .32s var(--ease),color .32s var(--ease)}
.news-list a:hover{color:var(--kogane)}
.news-list a:hover .arw3{color:var(--kogane);transform:translateX(4px)}
@media (max-width:640px){
.news-list a{flex-wrap:wrap;gap:4px 14px}
.news-list .nt{white-space:normal;flex:1 1 100%;line-height:1.8}
}
.about{padding:clamp(70px,8vw,112px) 0 clamp(70px,8vw,112px);background:var(--kogecha);border-bottom:1px solid var(--kobicha)}
.about-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(28px,5vw,80px);
align-items:center;padding:0 clamp(20px,3.4vw,52px)}
.about-txt p:first-child{margin-bottom:18px}
.about-txt p{font-size:13.5px;line-height:2.15;color:var(--hai);margin-bottom:16px;max-width:34em}
.about-more{margin-top:26px}
.about-more a{font-size:12.5px;letter-spacing:.16em;color:var(--kogane)}
.about-more .ar{color:var(--kogane)}
.about-figs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px);align-items:start}
.about-figs figure{margin:0;overflow:hidden;background:var(--kogecha)}
.about-figs img{width:100%;height:100%;object-fit:cover;transition:transform 3.4s var(--ease)}
.about-figs figure:hover img{transform:scale(1.05)}
.af1{aspect-ratio:3/4}
.af2{aspect-ratio:3/4;margin-top:clamp(28px,5vw,72px)}
@media (max-width:860px){
.about-body{grid-template-columns:1fr;gap:34px}
.about-figs{max-width:520px}
}
/* ══ 衣桁（いこう）。カードのグリッドではなく、掛けられた衣装として横に並べる ══ */
.iko{display:flex;height:min(68vh,560px);border-top:1px solid var(--kobicha);border-bottom:1px solid var(--kobicha)}
.iko-i{position:relative;flex:1 1 0;min-width:0;border-right:1px solid var(--kobicha);overflow:hidden;transition:flex-grow var(--slow) var(--ease)}
.iko-i:last-child{border-right:0}
.iko-i .ph{position:absolute;inset:0;overflow:hidden}
.iko-i .ph img{position:absolute;top:0;left:50%;width:56vw;max-width:none;height:100%;object-fit:cover;object-position:center 30%;transform:translateX(-50%) scale(1);transition:transform 3.6s var(--ease);will-change:transform;backface-visibility:hidden}
.iko-i .veil{position:absolute;inset:0;z-index:1;background:var(--kurocha);opacity:.64;transition:opacity var(--slow) var(--ease);will-change:opacity}
.iko-i::after{content:"";position:absolute;inset:auto 0 0;z-index:1;height:52%;background:linear-gradient(to top,rgba(var(--ji-rgb),.9),transparent);pointer-events:none}
.iko-i .nm{position:absolute;left:0;right:0;bottom:22px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:12px}
.iko-i .nm b{writing-mode:vertical-rl;font-family:var(--f-disp);font-weight:500;font-size:clamp(15px,1.5vw,18px);letter-spacing:.22em}
.iko-i .nm em{font-family:var(--f-lat);font-style:normal;font-size:10px;letter-spacing:.28em;color:var(--usukin)}
.iko-i .dt{position:absolute;left:24px;right:56px;bottom:20px;z-index:3;opacity:0;transition:opacity 1.2s var(--ease)}
.iko-i .dt p{font-size:13px;line-height:1.9;color:var(--zouge);max-width:22rem}
.iko-i .dt span{display:inline-block;margin-top:14px;font-size:12px;letter-spacing:.18em;color:var(--kogane-moji)}
.iko-i .sign{position:absolute;right:14px;bottom:14px;z-index:4;width:26px;height:26px;border:1px solid rgba(var(--han-rgb),.4);display:grid;place-content:center;font-size:13px;color:var(--usukin);transition:background .5s var(--ease),border-color .5s var(--ease),color .5s var(--ease)}
/* 横一列に並べ、語と語のあいだは中黒で区切る */
.iko-i .sub{display:block;margin-top:14px;font-size:11.5px;letter-spacing:.1em;line-height:1.9;color:var(--usukin);white-space:nowrap}
.iko-i .sub span + span::before{content:"・";color:rgba(203,180,137,.55);padding:0 2px}
@media (hover:hover) and (min-width:900px){
/* 一つに触れたら、ほかの面は締まる */
.iko:hover .iko-i{flex-grow:.68}
.iko:hover .iko-i:hover,.iko:hover .iko-i:focus-within{flex-grow:5.6}
.iko-i:hover .sign,.iko-i:focus-within .sign{background:var(--kogane);border-color:var(--kogane);color:var(--kurocha)}
.iko-i:hover .veil,.iko-i:focus-within .veil{opacity:.16}
.iko-i:hover .ph img,.iko-i:focus-within .ph img{transform:translateX(-50%) scale(1.04)}
.iko-i:hover .nm,.iko-i:focus-within .nm{opacity:0;transition:opacity .3s}
.iko-i:hover .dt,.iko-i:focus-within .dt{opacity:1;transition-delay:.6s}
.iko-i:hover .dt h3,.iko-i:focus-within .dt h3{display:block;font-family:var(--f-disp);font-size:22px;margin-bottom:10px}
}
@media (max-width:899px){
/* 中央に来た一枚は、触れたときと同じところまで開く */
.iko-i.act .veil{opacity:.12}
.iko-i.act .ph img{transform:scale(1.04)}
.iko-i.act .nm{opacity:0}
.iko-i.act .dt{opacity:1;transition-delay:.15s}
.iko-i.act .sign{background:var(--kogane);border-color:var(--kogane);color:var(--kurocha)}
.post.act{border-color:var(--kogane)}
.post.act .bg{opacity:.55}
.post.act .th{opacity:0}
.post.act .lead{opacity:1}
.post.act .arw{border-color:var(--kogane);color:var(--kogane);transform:translateX(3px)}
.aside a.act{border-color:var(--kogane);background:var(--kogecha)}
/* 触れたとき（開いたとき）は写真をぼかして、上に文字を出す。
濃い基調は暗く沈めて明るい文字を、白基調は明るく飛ばして濃い文字を載せる。
基調ごとに向きが逆なので、明るさは変数で持つ。 */
.camp a.act img{filter:brightness(var(--camp-akaru-on)) blur(6px);transform:scale(1.06)}
.camp a.act .face{opacity:0}
.camp a.act .over{opacity:1}
.iko{height:auto;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.iko::-webkit-scrollbar{display:none}
.iko-i{flex:0 0 74%;height:66vh;scroll-snap-align:start;scroll-snap-stop:always}
.iko-i .ph img{width:100%;left:0;transform:none}
.iko-i .veil{opacity:.46}
.iko-i .dt{left:20px;right:52px;bottom:18px}
.iko-i .dt h3{display:block;font-family:var(--f-disp);font-size:19px;margin-bottom:8px}
.iko-i .nm{transition:opacity .6s var(--ease)}
}
/* ══ 期間限定。縦長のカードではなく横長のボタン。触れると背景がぼけ、字が出る ══ */
/* 期間限定の節。
黒基調では海老茶の強い面に白文字を載せていたが、白基調でそれをやると
ここだけ濃い赤の帯が浮く。地・文字・写真の扱いを変数にして、
基調ごとに「明るい面に濃い文字」「濃い面に明るい文字」を切り替える。 */
.limit{position:relative;background:var(--limit-ji);padding:clamp(70px,8vw,112px) 0;isolation:isolate;
border-block:1px solid var(--keisen)}
/* 和紙の繊維＝細かい粒／土壁のむら＝大きなにじみ。2枚重ねて平面的な印象を消す */
.limit::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.16;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");background-size:240px 240px}
.limit::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:
radial-gradient(60% 44% at 18% 12%,rgba(var(--han-rgb),.16),transparent 70%),
radial-gradient(48% 40% at 82% 78%,rgba(var(--ji-rgb),.4),transparent 72%),
radial-gradient(38% 52% at 62% 22%,rgba(var(--ji-rgb),.28),transparent 68%),
radial-gradient(52% 46% at 8% 88%,rgba(var(--han-rgb),.08),transparent 72%)}
.limit .tag{color:var(--limit-tag)}
.limit .sec-h .copy{color:var(--limit-moji)}
.limit .sec-h .sec-sub{color:var(--limit-moji-2)}
/* 件数に応じて割り付けを変える。
1件＝2カラムの左寄せ／3件＝3カラム／それ以外（2件・4件以上）＝2カラム */
.camp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);padding:0 clamp(20px,3.4vw,52px)}
.camp:has(> a:first-child:last-child) > a{grid-column:1}
.camp:has(> a:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){
.camp,.camp:has(> a:nth-child(3):last-child){grid-template-columns:1fr}
}
.camp a{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;border:1px solid var(--camp-waku)}
/* 写真の上に文字が乗るので、下辺だけ地を敷いて読めるようにする */
.camp a::after{content:"";position:absolute;inset:auto 0 0;height:46%;z-index:1;pointer-events:none;
background:linear-gradient(to top,rgba(var(--camp-maku-rgb),.92),rgba(var(--camp-maku-rgb),.5) 46%,transparent);
transition:opacity 1.2s var(--ease)}
.camp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 34%;filter:brightness(var(--camp-akaru)) blur(0);transform:scale(1.02);transition:filter var(--slower) var(--ease),transform 4s var(--ease);will-change:filter,transform;backface-visibility:hidden}
/* 初期表示は左下。左右と下の余白を同じ値にそろえる */
.camp .face{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;gap:22px;
padding:clamp(20px,3vw,34px);transition:opacity 1.2s var(--ease)}
.camp .face h3{margin:0;font-family:var(--f-disp);font-weight:500;font-size:clamp(17px,1.8vw,21px);letter-spacing:.06em;color:var(--camp-moji)}
.camp .face time{font-family:var(--f-disp);font-size:14px;font-weight:600;letter-spacing:.06em;color:var(--camp-tag)}
.camp .face .term{margin-left:auto;align-self:flex-end;display:flex;align-items:center;gap:9px;
padding:5px 12px;background:rgba(var(--ji-rgb),.72);border:1px solid rgba(190,151,72,.45);white-space:nowrap}
.camp .face .term i{font-style:normal;font-size:11px;color:var(--camp-tag)}
.camp .over{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;padding-inline:clamp(28px,6vw,72px);opacity:0;transition:opacity 1.4s var(--ease);
background:rgba(var(--camp-maku-rgb),var(--camp-over-maku))}
.camp .over em{font-family:var(--f-lat);font-style:normal;font-size:11px;letter-spacing:.32em;color:var(--camp-tag)}
.camp .over strong{font-family:var(--f-disp);font-weight:500;font-size:clamp(13.5px,1.35vw,16px);line-height:1.9;letter-spacing:.06em;color:var(--camp-moji)}
.camp .over small{font-size:12px;letter-spacing:.14em;color:var(--camp-moji-2)}
@media (hover:hover) and (min-width:900px){
.camp a:hover img,.camp a:focus-visible img{filter:brightness(var(--camp-akaru-on)) blur(6px);transform:scale(1.08)}
.camp a:hover .face,.camp a:focus-visible .face{opacity:0}
.camp a:hover::after,.camp a:focus-visible::after{opacity:0}
.camp a:hover .over,.camp a:focus-visible .over{opacity:1;transition-delay:.35s}
}
/* ── 別枠。世界観の強い区間とは分け、写真を使わず文字だけで静かに置く ── */
/* お子様・十三参り。
上のプラン一覧（衣桁）と同じ節の扱いにするため、地は主となる地のままにし、
上の罫線も引かない（プラン一覧の下辺の罫線がそのまま境目になる）。 */
.aside{padding:clamp(44px,5vw,68px) 0;background:var(--kurocha);border-bottom:1px solid var(--keisen)}
.aside-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,26px);padding:0 clamp(20px,3.4vw,52px)}
.aside a{display:block;padding:22px 24px 24px;border:1px solid var(--kobicha);transition:border-color var(--slow) var(--ease),background var(--slow) var(--ease)}
.aside a:hover{border-color:var(--kogane);background:var(--kogecha)}
.aside h3{display:flex;align-items:baseline;gap:12px;font-size:clamp(16px,1.7vw,19px);letter-spacing:.1em;margin-bottom:9px}
.aside .ext{font-family:var(--f-lat);font-size:10.5px;letter-spacing:.2em;color:var(--kogane);border:1px solid var(--kobicha);padding:2px 7px}
.aside p{font-size:13.5px;line-height:2.1;color:var(--hai);max-width:26rem}
.aside .ar{font-style:normal}
.aside .go{display:inline-block;margin-top:16px;font-size:12px;letter-spacing:.2em;color:var(--kogane)}
/* 英語トップの「写真付きサムライ」カード。上に写真、下に文。 */
.aside-photo{padding:0;overflow:hidden;display:flex;flex-direction:column}
.aside-shot{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--kogecha)}
.aside-shot img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block;filter:var(--shashin)}
.aside-photo .aside-txt{display:block;padding:22px 24px 24px}
@media (max-width:760px){
.aside-row{grid-template-columns:1fr;gap:26px}
}
/* ══ ギャラリー。画面幅いっぱいの帯を、逆向きに二本流す ══ */
.band{padding:clamp(70px,8vw,112px) 0;background:var(--kogecha);border-top:1px solid var(--kobicha);border-bottom:1px solid var(--kobicha);overflow:hidden}
/* ══ 趣。帯を四本重ね、開いた一本だけが縦に伸びる。読ませる情報は置かない ══ */
.mood{position:relative;background:var(--kurocha)}
.mood-track{height:260vh}
/* 帯は残りの高さをそのまま使う。
見出しの高さを引き算して求めていたときは、見出しの行数が変わるたびに誤差が出て
下に隙間が空いていた。ここでは .bands の実寸をJSが読む。 */
.mood-fix{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:flex-start;padding:clamp(44px,6vh,68px) 0 20px}
.mood-step{position:absolute;right:34px;top:50%;transform:translateY(-50%);writing-mode:vertical-rl;font-family:var(--f-lat);font-size:11px;letter-spacing:.3em;color:var(--moji-2);display:flex;gap:12px}
.mood-step i{width:1px;height:26px;background:var(--kobicha);transition:background 1.2s var(--ease)}
.mood-step i.on{background:var(--kogane)}
/* 閉じた帯の高さ（--bdc）は固定、開いた帯の高さ（--bdo）は
「画面の高さ − 見出し − 閉じた帯の合計」を実測してJSが入れる。
見出しの高さが変わっても帯が画面からはみ出さない。 */
.bands{--bdc:78px;--bdo:calc(100svh - var(--bdc) * 3 - 250px);flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border-top:1px solid var(--kobicha)}
/* 高さ・膜・文字の濃さは、スクロール量からJSが毎フレーム直接与える。
段階的に切り替えると、変化が終わる前に次の判定が来て追いつかなくなるため。 */
.bd{position:relative;height:var(--bdc);min-height:0;overflow:hidden;border-bottom:1px solid var(--kobicha)}
/* JSが動かない場合の初期表示。通常はJSが高さを直接与える */
.bd:first-child{height:var(--bdo)}
.bd img{position:absolute;left:0;top:50%;width:100%;height:var(--bdo);object-fit:cover;object-position:center 38%;transform:translateY(-50%) scale(1);will-change:transform;backface-visibility:hidden}
.bd::before{content:"";position:absolute;inset:0;z-index:1;background:var(--kurocha);opacity:var(--veil,.68);will-change:opacity}
/* 閉じた帯（72px）に縦積みの見出しは収まらない。
横並びにして高さを抑え、閉じた高さのちょうど中央にそろえる。 */
.bd .k{position:absolute;left:34px;top:calc(var(--bdc) / 2);transform:translateY(-50%);z-index:2;
display:flex;align-items:baseline;gap:13px;white-space:nowrap}
.bd .k h3{margin:0;font-family:var(--f-disp);font-weight:500;font-size:clamp(17px,1.75vw,21px);letter-spacing:.06em;line-height:1.2}
.bd .k i{font-family:var(--f-lat);font-style:normal;font-size:11px;letter-spacing:.24em;color:var(--hai)}
.bd .say{position:absolute;left:34px;right:82px;bottom:26px;z-index:2;font-family:var(--f-disp);font-size:clamp(14px,1.5vw,18px);letter-spacing:.1em;opacity:var(--txt,0);transform:translateY(calc((1 - var(--txt,0)) * 10px))}
.bd .arw2{right:34px;bottom:26px;opacity:var(--txt,0)}
/* 派手・高精細な写真の上でも文字を地から分離する、クリームのにじみ。
膜だけでは埋もれやすい（数値上のコントラストは足りても細い明朝が沈む）ため、
字の輪郭に近い層（3px）を強めに、外側にやわらかい層を重ねる。 */
.bd .k h3,.bd .k i,.bd .say{text-shadow:0 0 3px rgba(var(--ji-rgb),.96),0 0 8px rgba(var(--ji-rgb),.82),0 1px 15px rgba(var(--ji-rgb),.7)}
@media (max-width:760px){
.camp{grid-template-columns:1fr}
.bands{--bdc:70px}
.bd .k,.bd .say{left:20px}
.bd .k i{font-size:10px;letter-spacing:.18em}
.bd .arw2{right:20px}
}
/* ══ 体験の流れとよくあるご質問。左右に並べて、縦の長さを詰める ══ */
.pair{background:var(--kurocha);padding:clamp(70px,8vw,112px) clamp(20px,3.4vw,52px);
display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,5vw,86px);align-items:start}
.pair-col .sec-h{padding:0;margin-bottom:clamp(20px,2.6vw,32px);min-height:4.6em}
@media (max-width:900px){
.pair{grid-template-columns:1fr;gap:46px}
}
/* 体験の流れは番号と英語表記を summary に足す。組みは質問と共通 */
.flow-acc summary{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.flow-acc .no{flex:0 0 auto;font-family:var(--f-lat);font-size:12px;letter-spacing:.16em;color:var(--kogane)}
.flow-acc .fe{font-family:var(--f-lat);font-weight:400;font-size:11px;letter-spacing:.2em;color:var(--moji-2)}
.flow-acc .acc-a{padding-left:2.5em}
/* ══ 記。触れた一枚に写真が流れ込み、隠れていた文が出る ══ */
.posts{display:flex;gap:clamp(10px,1.4vw,18px);height:min(70vh,560px);padding:0 34px}
/* 節の地が焦茶なので、札は一段暗い黒茶にして境目を出す */
.post{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:var(--kurocha);
border:1px solid var(--kobicha);transition:flex-grow var(--slow) var(--ease),background .8s var(--ease),border-color var(--slow) var(--ease)}
.post .bg{position:absolute;top:0;left:50%;width:64vw;max-width:none;height:100%;object-fit:cover;opacity:0;transform:translateX(-50%) scale(1.05);transition:opacity var(--slower) var(--ease),transform 4s var(--ease);will-change:opacity,transform;backface-visibility:hidden}
.post{contain:layout paint}
/* 文字欄は札の左に置く（見出しや日付は左上から読ませる）。
中の写真だけは、下の .th で align-self を使って中央に寄せている。 */
.post .in{position:relative;z-index:2;height:100%;width:clamp(240px,26vw,380px);display:flex;flex-direction:column;padding:26px 24px}
.post .cat{font-family:var(--f-lat);font-size:11px;letter-spacing:.26em;color:var(--hai);margin-bottom:10px}
.post h3{font-size:clamp(16px,1.5vw,19px);letter-spacing:.04em}
.post .lead{margin-top:16px;font-size:13px;line-height:2;color:var(--zouge);opacity:0;transform:translateY(8px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
/* ブログの写真は元が横長。縦長に切り抜くと左右が落ちて構図が壊れるため、元の比率のまま置く。
上下の余白を分け合うと写真が宙に浮くので、見出しのすぐ下に置き、
日付と矢印を下端へ寄せて、空きを一か所にまとめる。 */
/* 写真は max-width で幅を絞っている。親（.post .in）が縦並びのフレックスなので、
横方向の位置は margin:auto ではなく align-self で決まる。 */
.post .th{flex:0 0 auto;align-self:center;margin:20px auto 0;width:100%;max-width:330px;aspect-ratio:3/2;overflow:hidden;
transition:opacity 1.2s var(--ease);will-change:opacity}
.post .th img{width:100%;height:100%;object-fit:cover;backface-visibility:hidden}
.post .meta{margin-top:auto;padding-top:20px;display:flex;align-items:flex-end;gap:16px;font-size:11px;letter-spacing:.16em;color:var(--hai)}
.post .arw{right:24px;bottom:24px;pointer-events:none}
/* 記事の札は全体が一枚のリンク。
見出しの中の に ::after を敷いて広げる方式は、::after の基準が .in になり、
札が .in より広いと右側が死角になったり、重なり・状態で不安定になる。
札のコンテンツ全体を で包み、それを札いっぱいに広げる。
これで幅・重なり・スクロール状態に関係なく、どこを押してもリンクになる。 */
.post-a{position:relative;display:block;width:100%;height:100%;color:inherit;text-decoration:none}
.post-a:focus-visible{outline:2px solid var(--kogane);outline-offset:-4px}
.post:hover h3,.post.act h3{color:var(--kogane-moji)}
@media (hover:hover) and (min-width:900px){
/* 二段に分ける。区画に入った時点で縁と字が金に起き、矢印自体に触れると塗りつぶす */
.post:hover .arw,.post:focus-within .arw,.bd:hover .arw2{border-color:var(--kogane);color:var(--kogane);transform:translateX(3px)}
.post:hover .arw:hover,.bd:hover .arw2:hover{background:var(--kogane);border-color:var(--kogane);color:var(--kurocha);transform:translateX(5px)}
.posts:hover .post{flex-grow:.78}
.posts:hover .post:hover{flex-grow:2.9;background:transparent;border-color:var(--kogane)}
.posts:hover .post:hover .bg{opacity:.62;transform:translateX(-50%) scale(1)}
.post:hover .th{opacity:0}
.post:hover .lead{opacity:1;transform:none;transition-delay:.55s}
}
@media (max-width:899px){
.posts{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-inline:20px}
.posts::-webkit-scrollbar{display:none}
/* 幅は変えない。札の幅が変わると、横に送るときの止まる位置がずれて、
勢いによっては行き過ぎて戻る動きになるため。
選ばれていることは、枠の色と写真の入れ替えで示す。 */
.post{flex:0 0 78%;height:58vh;scroll-snap-align:start;scroll-snap-stop:always;
transition:border-color var(--slow) var(--ease),background .8s var(--ease)}
.post .bg{opacity:0;width:100%;left:0;transform:none}
.post.act{background:transparent}
.post.act .bg{opacity:.5}
/* 選ばれていない札は、本文の下に小さく写真を置く。
選ばれた札では背景に大きく出るので、小さい方は消える。 */
.post .th{display:block;align-self:center;width:100%;max-width:300px;height:auto;aspect-ratio:3/2;margin:18px auto 0;
transition:opacity 1s var(--ease)}
.post .th img{width:100%;height:100%;object-fit:cover}
.post.act .th{opacity:0}
.post .in{width:100%}
.post .lead{opacity:1;transform:none}
}
/* ══ お客様の声。カードを並べず、余白の中に縦書きで一言ずつ置く ══ */
/* 全体が暗い地で構成されているため、ここだけ白く抜かず、
一段明るい焦茶の面にして「軽さ」を出す。 */
.said{position:relative;background:var(--kurocha);color:var(--zouge);padding:clamp(70px,8vw,112px) 0;isolation:isolate;overflow:hidden;border-top:1px solid var(--kobicha)}
.said::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.14;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");background-size:240px 240px}
.said .tag{color:var(--kogane)}
.said .sec-h .copy{color:var(--zouge)}
/* お客様の声は「一列」の横送り。件数が増えても段が折り返さず、ドラッグ／スクロールで送れる。 */
.said-grid{display:flex;gap:clamp(16px,2.2vw,38px);align-items:start;
overflow-x:auto;scrollbar-width:none;cursor:grab;padding:0 clamp(20px,3.4vw,52px) 10px}
.said-grid::-webkit-scrollbar{display:none}
.said-i{flex:0 0 min(320px,76vw)}
.said-i{display:flex;flex-direction:column;gap:14px;padding-top:20px;border-top:1px solid var(--kobicha)}
.said-i{margin:0}
.said-i blockquote{margin:0}
.said-i blockquote p{font-family:var(--f-disp);font-weight:500;font-size:clamp(13px,1.05vw,14.5px);line-height:2.1;letter-spacing:.02em}
.said-i q.en{writing-mode:horizontal-tb;font-family:var(--f-lat);font-size:17px;line-height:1.85;letter-spacing:.02em;width:16rem;height:auto}
.said-i figcaption{font-size:11px;letter-spacing:.16em;color:var(--moji-3)}
.said-more{display:flex;flex-wrap:wrap;gap:14px clamp(20px,3vw,40px);margin-top:clamp(26px,3.4vw,42px);
padding:0 clamp(20px,3.4vw,52px)}
.said-more a{font-size:12.5px;letter-spacing:.14em;color:var(--kogane)}
.said-more .ar{color:var(--kogane)}
/* ══ 店の情報。表組みにせず、行を端に寄せる ══ */
.info{position:relative;padding:clamp(70px,8vw,112px) clamp(20px,3.4vw,52px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(24px,4vw,70px);align-items:start}
/* 地色は箱幅ではなく画面いっぱいに。ほかの節と同じく全幅の帯にする。 */
.info::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;background:var(--kogecha);border-top:1px solid var(--kobicha)}
.info dl{margin:0;display:grid;grid-template-columns:4.5rem 1fr;row-gap:12px;column-gap:20px;font-size:13.5px}
.info dt{color:var(--fukakin);font-size:12px;letter-spacing:.18em;padding-top:.3em}
.info dd{margin:0}
.info dd a{color:var(--kogane)}
/* 地図。iframe は既定の大きさ（300×150）を持つので、枠いっぱいに広げる指定が要る。
未設定のときの案内文は、中央に置く。 */
.info-map{position:relative;aspect-ratio:5/4;border:1px solid var(--keisen);overflow:hidden;
display:grid;place-items:center;color:var(--moji-2);font-size:12px;text-align:center;padding:20px;
background:var(--ji-2)}
.info-map:has(iframe){padding:0}
/* 地図の色味。
濃い基調では、地図の白い面が浮くので明暗を反転させて暗い地図に変える。
白基調では反転すると地図だけ黒くなって浮くので、反転はかけず、
彩度をわずかに落として地になじませるだけにする。
（かけ方は --chizu で基調ごとに持つ） */
.info-map iframe{width:100%;height:100%;border:0;display:block;filter:var(--chizu)}
/* 周囲の面と地の色をそろえるための、ごく薄い膜。
操作を妨げないよう、この膜はクリックを通す。 */
.info-map:has(iframe)::after{content:"";position:absolute;inset:0;pointer-events:none;
background:var(--ji);opacity:var(--chizu-maku);mix-blend-mode:multiply}
@media (max-width:860px){
.info{grid-template-columns:1fr}
}
/* ══ 料金の札。既定は平らな面、触れると横に広がって写真が流れ込む ══ */
/* 7枚を一列に並べると1枚が狭すぎるので、4枚＋3枚の二列にする。
開閉はそれぞれの列の中で完結するため、動きはそのまま保たれる。 */
/* 幅の広い画面では4枚＋3枚の二段。狭い画面では下の指定で一列の横送りになります。 */
.pcs{display:flex;gap:clamp(10px,1.4vw,18px);height:min(52vh,430px);padding:0 clamp(20px,3.4vw,52px)}
.pcs + .pcs{margin-top:clamp(10px,1.4vw,18px)}
.pc{position:relative;flex:1 1 0;min-width:0;overflow:hidden;background:var(--kurocha);border:1px solid var(--kobicha);
contain:layout paint;transition:flex-grow var(--slow) var(--ease),border-color var(--slow) var(--ease)}
.pc-bg{position:absolute;top:0;left:50%;width:64vw;max-width:none;height:100%;object-fit:cover;
opacity:0;transform:translateX(-50%) scale(1.05);
transition:opacity var(--slower) var(--ease),transform 4s var(--ease);will-change:opacity,transform;backface-visibility:hidden}
/* 中身の幅は変えない。札が広がっても文字は動かないので、読んでいる途中でも落ち着いて見られる。
狭いと「内容」が細かく折り返すので、二行に収まる幅を確保する。 */
/* 札の膜。文字が乗る面なので、写真がどれだけ濃くても読める濃さを保つ。
これが無いと、暗い写真の上でリンクのコントラストが基準（4.5）を割る。
濃さは基調ごとに変えられる（--maku-fuda-* は theme.css）。 */
.pc::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
background:
/* 左：文字が乗る側。ここだけ地を敷いて読ませる。
全面に敷くと写真がほとんど見えなくなるので、右へ向けて溶かす。
文字の並ぶ幅（.pc-in）に合わせた px 指定にしている。 */
linear-gradient(to right,
rgba(var(--ji-rgb),var(--maku-fuda-ue)) 0,
rgba(var(--ji-rgb),var(--maku-fuda-ue)) 150px,
rgba(var(--ji-rgb),var(--maku-fuda-shita)) 230px,
rgba(var(--ji-rgb),0) 400px)}
.pc-in{position:relative;z-index:2;height:100%;width:clamp(250px,25vw,360px);display:flex;flex-direction:column;padding:22px 20px}
.pc-en{font-family:var(--f-lat);font-size:11px;letter-spacing:.26em;color:var(--kogane);margin-bottom:9px}
.pc h3{font-size:clamp(15px,1.5vw,18px);letter-spacing:.04em;margin-bottom:12px}
/* 欧文書体（Cormorant）は数字が下に垂れる設計のため、「円」と基準線がずれる。
和文と同じ書体を使い、字面と基準線をそろえる。 */
.pc-price b{font-family:var(--f-disp);font-weight:500;font-size:clamp(19px,2vw,25px);letter-spacing:.04em;color:var(--usukin);
font-feature-settings:"palt" 1}
/* 税込は税抜の右に並べる（行数を減らして、内容の欄に高さを回すため） */
.pc-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px}
.pc-price span{font-size:11.5px;color:var(--moji-3)}
.pc-meta{margin:15px 0 0;display:grid;grid-template-columns:2.8em minmax(0,1fr);gap:7px 14px;font-size:12px;line-height:1.95}
.pc-meta dt{color:var(--kogane);letter-spacing:.14em}
.pc-meta dd{margin:0;color:var(--hai)}
/* 英語は「Time」「Includes」が日本語の「所要」「内容」より長く、固定幅だと値に重なる。
ラベル列を内容の幅に合わせて広げる（日本語は 2.8em のまま）。 */
html[lang="en"] .pc-meta{grid-template-columns:max-content minmax(0,1fr);column-gap:12px}
.pc-links{margin-top:auto;display:flex;flex-direction:column;gap:9px;
opacity:0;transform:translateY(8px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.pc-links a{font-size:12.5px;letter-spacing:.12em;color:var(--kogane-moji);width:max-content}
.pc-go{position:absolute;right:20px;bottom:20px;z-index:3;width:34px;height:34px;display:grid;place-content:center;
border:1px solid rgba(var(--han-rgb),.24);color:var(--moji-3);font-size:13px;
transition:background .32s var(--ease),color .32s var(--ease),border-color .32s var(--ease),transform .32s var(--ease)}
@media (hover:hover) and (min-width:900px){
.pcs:hover .pc{flex-grow:.78}
.pcs:hover .pc:hover{flex-grow:2.9;border-color:var(--kogane)}
.pcs:hover .pc:hover .pc-bg{opacity:.85;transform:translateX(-50%) scale(1)}
.pc:hover .pc-links{opacity:1;transform:none;transition-delay:.5s}
.pc:hover .pc-go{border-color:var(--kogane-moji);color:var(--kogane-moji);transform:translateX(3px)}
.pc:hover .pc-go:hover{background:var(--kogane);color:var(--kurocha);transform:translateX(5px)}
}
@media (max-width:899px){
/* 二段をやめて一列に。
.pcs を display:contents にすると、二段ぶんの札がそのまま外枠の並びに入るので、
7枚が1つの列として横に送れます。 */
.pcs-wrap{display:flex;gap:12px;padding:0 20px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.pcs-wrap::-webkit-scrollbar{display:none}
.pcs{display:contents}
/* 幅は変えない（横に送るときの止まる位置がずれないようにするため）。
選ばれていることは、枠の色と写真の見え方で示す。 */
.pc{flex:0 0 78%;min-height:54vh;scroll-snap-align:start;scroll-snap-stop:always;
transition:border-color var(--slow) var(--ease),background .8s var(--ease)}
.pc-in{width:100%}
.pc-bg{width:100%;left:0;transform:none}
/* 関連リンクは、PCと同じく選ばれたときに現れる */
.pc-links{opacity:0;transform:translateY(8px)}
.pc.act .pc-links{opacity:1;transform:none;transition-delay:.4s}
}
/* ══ 料金一覧。検索結果に出やすいよう、意味どおりの表として組む ══ */
.price{background:var(--kogecha);border-top:1px solid var(--kobicha);border-bottom:1px solid var(--kobicha);padding:clamp(70px,8vw,112px) 0}
/* 料金一覧だけは、プランのカードを横に並べる関係で本文幅（--pw=1120）では窮屈になる。
このセクションだけ広め（旧 --mw 相当）に戻す＝幅統一の例外。見出し・カード・表を同じ幅に。 */
.price .sec-h,.price .pcs,.price .price-wrap{max-width:1560px}
.price-wrap{padding:0 clamp(20px,3.4vw,52px)}
.price-note{margin-top:16px;font-size:12px;line-height:1.9;color:var(--moji-2)}
/* 見出しは本文よりわずかに先に出す */
.js .sec-h.rise{transition-duration:1s,1.15s}
@media (max-width:760px){
.info{padding-left:20px;padding-right:20px}
}
@media (max-width:760px){
/* 狭い画面では札が細く、左右で「文字の側／写真の側」を分けられない。
選んでいない札は写真を薄く、選ばれた札で写真を見せる。 */
.pc-bg{opacity:.22}
/* 膜も上下方向に。文字は上寄りと下寄りにあるので、中ほどを空ける */
/* 狭い画面では札が細く、左右で「文字の側／写真の側」を分けられない。
上下に濃淡をつけると帯に見えるため、札全体を一定の濃さで覆う。 */
.pc::after{background:rgba(var(--ji-rgb),var(--maku-fuda-ue))}
.pc.act{border-color:var(--kogane)}
.pc.act .pc-go{border-color:var(--kogane-moji);color:var(--kogane-moji);transform:translateX(3px)}
/* 住所や営業時間は、項目名と内容を縦に積んだほうが読みやすい */
.info dl{grid-template-columns:1fr;row-gap:0}
.info dt{padding-top:16px}
.info dd{padding-top:4px}
.info dl > dt:first-child{padding-top:0}
/* お知らせは、矢印を右端に固定して見出しの行を確保する */
.news-list a{position:relative;padding-right:26px}
.news-list .arw3{position:absolute;right:0;top:14px;margin:0}
.news-list a:hover{padding-left:0}
.news-list a::before{display:none}
/* 横に送る列は、端に少し余白を残して送り終わりを分かりやすくする */
.pcs-wrap,.posts,.iko,.said-grid{scroll-padding-inline:20px}
/* ヒーローの予約ボタンは、下辺に出る帯と役割が重なるので出さない。
帯の高さぶん、ヒーロー下辺の文字も持ち上げる。 */
.hbook{display:none}
/* 下辺に出る予約の帯ぶんを空ける。環境依存の値は使わず、位置が動かないようにする */
.hfoot{padding-bottom:84px}
/* 選ばれた札は、膜が薄くなって写真が浮かび上がる。
選んでいない札は深く沈めて、対比で「選んでいる」ことが分かるようにする。 */
.pc.act .pc-bg{opacity:.8}
/* 選ばれた札は写真を濃く見せるぶん、文字が乗る上下だけ地を残す。
中ほどは膜を抜いて写真をそのまま見せる。 */
/* 選ばれた札も、濃淡をつけず一定の濃さで覆う。
文字は札の上下どちらにもあるため、どこも同じ濃さである必要がある。 */
.pc.act::after{background:rgba(var(--ji-rgb),.8)}
}
/* ══ 節の地色と上下の余白 ═══════════════════════════════════════════
黒茶（地）と焦茶（一段明るい面）を交互に置き、境目に細い罫を入れる。
下の2つはモックでは HTML に直接書いていた指定を、こちらへ移したものです。
────────────────────────────────────────────────────────────────── */
.sec-plans{background:var(--kurocha);padding:clamp(70px,8vw,112px) 0}
.line{background:var(--kogecha);padding:clamp(70px,8vw,112px) 0;
border-top:1px solid var(--kobicha);border-bottom:1px solid var(--kobicha)}