@charset "utf-8"; /* ══════════════════════════════════════════════════════════════════════ plan.css — プラン詳細ページ共通（花魁・舞妓・狐の嫁入り・百鬼夜行 …） inc/enqueue.php が、plan_pages に登録されたスラッグのページすべてで読み込みます。 本体の組み立ては template-parts/plan-body.php、掲載内容は inc/config.php の plan_pages['スラッグ']。色・字組み・共通部品（.sec-h .tag .u .acc など）は theme.css の変数を参照します。 基調色は body.tone-*（inc/setup.php が付与）。装いによらない「組み」だけをここに置き、 色は変数任せにしているので、白基調・濃い基調のどちらでも同じ組みが使えます。 唯一、見せ場（ヒーロー）だけは基調で組みが逆になるため出し分けています： ・白基調（既定）… 写真を活かし、下寄せで文字帯にだけ地を敷く（濃い文字） ・濃い基調（tone-oiran / tone-yokai）… 写真を沈めて中央に明るい文字 膜の濃さは実写真の輝度で決めています。触ったら必ず輝度で再検証すること。 見せ場の動きは、固定区画に main.js が渡す 5 つの値で決まります。 --rise / --reveal / --focus / --cue / --out JS が動かないときは、CSSの既定値（読める最終状態）のまま静止します。 ══════════════════════════════════════════════════════════════════════ */ /* プランページの読ませる幅。全幅だと間延びするので少し狭める */ .plan{--pw:1120px} /* 読ませる要素をそろえる箱。各セクションが内側でこれを使う */ .pl-in{max-width:var(--pw);margin-inline:auto;padding:0 clamp(20px,3.4vw,52px)} /* ── 見せ場 ────────────────────────────────────────────────────── 高さを3画面ぶん取り、その間だけ画面に貼りつけて写真を見せる。 濃い基調なので、写真を膜で沈め、明るい文字を起こす組み方。 ────────────────────────────────────────────────────────────── */ /* HERO の総高から固定の掛かる距離が決まる（総高 − 100svh）。 文字は進捗 0.7 で出そろうので、固定が長すぎると出そろったあと間延びする。 出そろい → ほどなく解除、と感じられる長さに詰めている（main.js の out と対）。 */ .pl-hero{height:190svh;position:relative} .pl-hero-fix{ --rise:1;--reveal:1;--focus:.5;--cue:0;--out:0; position:sticky;top:0;height:100svh;overflow:hidden;background:var(--ji)} /* 写真の補正。基調で組みが逆になる（CLAUDE.md）。 ・白基調（既定）… 色を守るため暗くしない。文字は下の地で読ませる。 ・濃い基調（tone-oiran / tone-yokai）… 下で暗く沈めて明るい文字を起こす。 */ .pl-hero-fix img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%; will-change:transform,filter;backface-visibility:hidden; transform:scale(calc(1.02 + var(--focus)*.02)); filter:blur(calc(var(--focus)*1.6px)) brightness(calc(1 - var(--focus)*.08))} /* プランページ到着時、HERO写真だけを控えめにフェードインしてムードを出す。 ・opacity だけで演出（transform／filter は見せ場の --focus が使うので触らない）。 ・html.js（JS有効・で同期付与）＋「動きを減らさない」設定のときだけ動く。 JS無効・reduced-motion・クローラには最初から表示（src も HTML 内・fetchpriority=high なので 読み込みもインデックスも不利にならない）。 ・LCP を大きく遅らせないよう、初期不透明度は高め(.42)・時間は短め(.95s)に留める。 */ @keyframes pl-hero-in{from{opacity:.42}to{opacity:1}} @media (prefers-reduced-motion:no-preference){ html.js .pl-hero-fix img{animation:pl-hero-in .95s var(--ease) both} } /* 白基調 HERO の膜。象牙（--hero-veil-rgb）を「文字が乗る左側だけ」に敷く（全面には敷かない）。 専用HERO写真は被写体を右（狐は中央）に置くので、左を象牙で持ち上げ濃い文字を読ませ、 右の被写体・衣裳の色は素通し（右端で膜 .08）で守る。デスクトップは横方向のグラデ一枚。 実写真（舞妓・狐）へ合成し 1280〜2560 で本文4.5以上を実測して決めた値。 ※膜・文字色を触ったら必ず実写真へ合成して輝度で再検証すること（CLAUDE.md）。 */ .pl-veil{position:absolute;inset:0;pointer-events:none;z-index:1;background: linear-gradient(to right, rgba(var(--hero-veil-rgb),.96) 0%,rgba(var(--hero-veil-rgb),.72) 18%,rgba(var(--hero-veil-rgb),.52) 40%, rgba(var(--hero-veil-rgb),.45) 58%,rgba(var(--hero-veil-rgb),.28) 76%,rgba(var(--hero-veil-rgb),.17) 100%)} /* 濃い基調：写真を沈めて中央に明るい文字（花魁で実測して決めた値）。 ※膜を触ったら assets/js/main.js の見せ場と合わせ、必ず輝度で再検証すること。 */ body.tone-oiran .pl-hero-fix img,body.tone-yokai .pl-hero-fix img,body.tone-shinsengumi .pl-hero-fix img,body.tone-samurai .pl-hero-fix img{ filter:blur(calc(var(--focus)*2.4px)) brightness(calc(.86 - var(--focus)*.22)) saturate(calc(1 - var(--focus)*.06))} /* 濃い基調の膜。新しいHERO写真は被写体が中央〜右で、左にも明部（花魁の障子窓など）が あるため、文字が乗る左側を強く沈める横スクリム＋縦中央の帯で、明るい文字を起こす。 実写真（花魁・百鬼）へ合成し、デスクトップ 1280〜2560 で本文4.5以上（花魁 5.3〜9.1、 百鬼 5.5〜10.2）を確認。写真は右側（被写体・衣裳）を素通し（右端 .04）で守る。 新選組（tone-shinsengumi）も暗い写真なので同じ組み。 */ body.tone-oiran .pl-veil,body.tone-yokai .pl-veil,body.tone-shinsengumi .pl-veil,body.tone-samurai .pl-veil{background: linear-gradient(to right, rgba(var(--ji-rgb),.94) 0%,rgba(var(--ji-rgb),.90) 30%,rgba(var(--ji-rgb),.68) 46%, rgba(var(--ji-rgb),.34) 56%,rgba(var(--ji-rgb),.10) 74%,rgba(var(--ji-rgb),.04) 100%), linear-gradient(to bottom, rgba(var(--ji-rgb),.30) 0%,rgba(var(--ji-rgb),.26) 20%,rgba(var(--ji-rgb),.50) 36%, rgba(var(--ji-rgb),.56) 50%,rgba(var(--ji-rgb),.50) 66%,rgba(var(--ji-rgb),.26) 84%,rgba(var(--ji-rgb),.40) 100%)} /* 見せ場は一列。ラベル → 大きなプラン名（h1）→ 導入文 → 予約ボタン。 白基調・濃い基調とも同じ位置：縦は中央、横は左寄せ（情報が出る場所を揃える）。 */ .pl-hero-in{position:relative;z-index:2;max-width:var(--pw);margin-inline:auto;height:100svh; padding:0 clamp(20px,3.4vw,52px); display:flex;flex-direction:column;align-items:flex-start;justify-content:center; gap:clamp(14px,2vw,24px)} /* 文字のまとまり。箱にはしない（display:contents で枠を作らず、ラベル・プラン名・ 導入文・ボタンを HERO の縦並びにそのまま流す）。読みは上の暗幕が受け持つ。 */ .pl-hero-txt{display:contents} /* HERO の文字のハロー。白基調は膜だけで本文4.5以上を満たすので付けない（白い光彩は不要）。 濃い基調（花魁・百鬼）だけ、明部（狭いモバイルや花魁の障子窓など）対策に暗色のにじみを添える。 */ body.tone-oiran :is(.pl-plate-jp,.pl-lead,.pl-plate-no), body.tone-yokai :is(.pl-plate-jp,.pl-lead,.pl-plate-no), body.tone-shinsengumi :is(.pl-plate-jp,.pl-lead,.pl-plate-no), body.tone-samurai :is(.pl-plate-jp,.pl-lead,.pl-plate-no){ text-shadow:0 1px 2px rgba(var(--hero-veil-rgb),.85),0 0 12px rgba(var(--hero-veil-rgb),.55)} /* 装いの札。ラベルと大きなプラン名（見出し）。据えたまま気配だけ足す */ .pl-plate{margin:0;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,1vw,14px); opacity:calc(var(--rise) * (1 - var(--out))); transform:translateY(calc((1 - var(--rise))*4vh - var(--out)*3vh))} /* HERO の文字は膜の上に起こす色（--hero-*）。白基調＝濃い文字、濃い基調＝明るい文字。 */ .pl-plate-no{font-family:var(--f-lat);font-size:10.5px;letter-spacing:.3em;color:var(--hero-label)} .pl-plate-no span{margin:0 .4em;color:var(--hero-moji)} .pl-plate-jp{margin:0;font-family:var(--f-disp);font-weight:600;font-feature-settings:"palt" 1; font-size:clamp(34px,4.8vw,60px);line-height:1.02;letter-spacing:.12em;color:var(--hero-midashi)} /* 導入文（あとから現れる）と予約ボタン */ .pl-stage{position:relative} .pl-lead{margin:0;max-width:23em; font-family:var(--f-body);font-size:13.5px;line-height:2.2;letter-spacing:.08em;color:var(--hero-moji); will-change:transform,opacity; transform:translateY(calc((1 - var(--reveal))*14px - var(--out)*3vh)); opacity:calc(var(--reveal) * (1 - var(--out)))} /* 見せ場の予約ボタン。導入文と同じ間合いで、あとから現れる */ .pl-hero-cta{margin:clamp(18px,2.4vw,28px) 0 0;display:flex;flex-wrap:wrap;gap:12px 14px; transform:translateY(calc((1 - var(--reveal))*16px - var(--out)*3vh)); opacity:calc(var(--reveal) * (1 - var(--out)))} @media (max-width:520px){.pl-hero-cta .btn{flex:1 1 100%}} /* 下向きの合図 */ .pl-cue{position:absolute;left:50%;bottom:clamp(26px,4.5vh,52px);width:1px;height:44px; margin-left:-.5px;background:linear-gradient(to bottom,transparent,rgba(var(--kogane-rgb),.55)); opacity:var(--cue);overflow:hidden} .pl-cue i{position:absolute;left:0;top:-100%;width:100%;height:100%; background:linear-gradient(to bottom,transparent,var(--kogane));animation:pl-cue 3s var(--ease) infinite} @keyframes pl-cue{0%{transform:translateY(0)}60%,100%{transform:translateY(220%)}} @media (max-width:900px){ .pl-hero{height:170svh} .pl-hero-in{gap:clamp(14px,4vw,24px)} /* 長い名前（着物コーディネート・ピンクリボンチャリティ・お子様・ご家族プラン）も 一行に収める。縦画面は字間を少し詰めて字を小さめに。折り返す場合も balance で均等に。 375px 実測：最長のピンクリボンチャリティ（11字）でも約320pxで枠内（335px）に収まる。 */ .pl-plate-jp{font-size:clamp(24px,7.4vw,46px);letter-spacing:.05em;text-wrap:balance} .pl-lead{font-size:12.5px;line-height:2.05} /* 縦画面は写真が中央（被写体）で切り取られ、横グラデでは文字の右側が足りない。 縦中央の帯に地色を敷き、文字（縦中央）を受ける。以前は帯の縁（8→18%・82→92%）の 立ち上がりが急で、写真の上に横線＝切れ目に見えた。上下へ長くなだらかに羽化して境目を消す。 文字が乗る中央は 0.80 前後を保つので読みは変わらない（濃い基調は specificity で別指定）。 */ .pl-veil{background:linear-gradient(to bottom, rgba(var(--hero-veil-rgb),0) 0%,rgba(var(--hero-veil-rgb),.34) 22%,rgba(var(--hero-veil-rgb),.68) 36%, rgba(var(--hero-veil-rgb),.80) 50%,rgba(var(--hero-veil-rgb),.68) 64%,rgba(var(--hero-veil-rgb),.34) 78%,rgba(var(--hero-veil-rgb),0) 100%)} /* 濃い基調の縦画面も同じく縦中央の帯を羽化。文字のハロー（text-shadow）と併せて読みを確保。 */ body.tone-oiran .pl-veil,body.tone-yokai .pl-veil,body.tone-shinsengumi .pl-veil,body.tone-samurai .pl-veil{background:linear-gradient(to bottom, rgba(var(--hero-veil-rgb),0) 0%,rgba(var(--hero-veil-rgb),.38) 22%,rgba(var(--hero-veil-rgb),.74) 36%, rgba(var(--hero-veil-rgb),.86) 50%,rgba(var(--hero-veil-rgb),.74) 64%,rgba(var(--hero-veil-rgb),.38) 78%,rgba(var(--hero-veil-rgb),0) 100%)} } /* セクションは「表示された順」に自動で交互配色にする。プランごとに節の有無が 変わっても（狐は季節あり／花魁は無し 等）、必ず互い違いになる。 下の各 pl-* が持つ固定の background より詳細度が高いので、それを上書きする。 ヒーローは
なので数に入らず、最初の節（概要）が奇数＝地色になる。 */ .plan > section:nth-of-type(odd){background:var(--ji)} .plan > section:nth-of-type(even){background:var(--ji-2)} /* カードや囲みは、乗るセクションと逆の地色にして「浮き」を保つ （同色だと枠線だけになり、立体感が失われるため）。 */ .plan > section:nth-of-type(odd) .pl-season-card, .plan > section:nth-of-type(odd) .pl-opt-i, .plan > section:nth-of-type(odd) .pl-seasons-note{background:var(--ji-2)} .plan > section:nth-of-type(even) .pl-season-card, .plan > section:nth-of-type(even) .pl-opt-i, .plan > section:nth-of-type(even) .pl-seasons-note{background:var(--ji)} /* ── この装いについて ──────────────────────────────────────────── */ .pl-concept{background:var(--ji);border-top:1px solid var(--keisen);padding:clamp(40px,5vw,68px) 0} .pl-concept-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,80px);align-items:start} @media (max-width:900px){.pl-concept-in{grid-template-columns:1fr;gap:34px}} .pl-concept-txt .tag{display:block;margin-bottom:14px} .pl-concept-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;color:var(--midashi)} .pl-concept-body{margin:clamp(16px,2vw,24px) 0 0;max-width:36em; font-size:14px;line-height:2.2;letter-spacing:.04em;color:var(--moji-2)} /* 右に添える一枚。縦長で、文章の高さに寄り添う */ .pl-concept-fig{margin:0;overflow:hidden} .pl-concept-fig img{width:100%;height:100%;max-height:clamp(300px,40vw,520px);object-fit:cover;object-position:center 28%; filter:var(--shashin)} @media (max-width:900px){.pl-concept-fig img{max-height:56vw}} /* 要点。三つ横並び。罫だけで区切り、箱にはしない */ .pl-points{margin:clamp(34px,4.4vw,56px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.6vw,40px);border-top:1px solid var(--keisen);padding-top:clamp(24px,3vw,36px)} .pl-point h3{font-family:var(--f-disp);font-weight:600;font-size:clamp(15px,1.6vw,18px);letter-spacing:.08em;color:var(--kogane-moji)} .pl-point p{margin:9px 0 0;font-size:12.5px;line-height:2;color:var(--moji-2)} @media (max-width:640px){.pl-points{grid-template-columns:1fr;gap:0} .pl-point{padding:16px 0;border-bottom:1px solid var(--keisen)} .pl-point:first-child{padding-top:0}} /* ── プランの並び（室内 A/B/C・屋外/特別）──────────────────────── 箱で囲わず、一件ずつ罫線で区切る。左に符牒（A/B/C）または英字。 ────────────────────────────────────────────────────────────── */ .pl-courses{padding:clamp(40px,5vw,68px) 0;border-top:1px solid var(--keisen)} .pl-courses{background:var(--ji-2)} .pl-courses-x{background:var(--ji)} /* カット数の注意。読み飛ばされると誤解につながるので、黄金の枠で目立たせる。 箱を使わない方針の例外。ここだけは先に読ませたい。 */ .pl-callout{display:flex;gap:clamp(12px,1.6vw,18px);align-items:flex-start; margin:0 0 clamp(24px,3vw,34px);padding:clamp(16px,2vw,22px) clamp(16px,2.2vw,26px); border:1px solid var(--kogane);background:rgba(var(--kogane-rgb),.07); font-size:12.5px;line-height:1.95;color:var(--moji)} .pl-callout b{font-weight:600;color:var(--kogane-moji)} .pl-callout-i{flex:0 0 auto;display:grid;place-content:center;width:22px;height:22px;margin-top:.1em; border:1px solid var(--kogane);border-radius:50%; font-family:var(--f-lat);font-size:13px;line-height:1;color:var(--kogane)} .pl-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--keisen)} .pl-course{list-style:none;position:relative; display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(20px,3vw,52px);align-items:center; padding:clamp(26px,3.4vw,44px) 0;border-bottom:1px solid var(--keisen)} /* 作例の写真。箱で囲わず、写真そのものを置く。縦横比を一定にして端を切る */ .pl-shot{margin:0;overflow:hidden;background:var(--ji)} .pl-shot img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center 30%; filter:var(--shashin);transition:transform 3s var(--ease)} .pl-course:hover .pl-shot img{transform:scale(1.03)} .pl-course-main{min-width:0} /* 帯状のバナー写真（四季彩狐絵巻の六テーマを1枚に並べた montage 等）。横並びをやめ、 写真を上に全幅で置く。切れないよう縦横比を写真そのものに合わせる（1450×450＝29/9）。 */ .pl-course--banner{grid-template-columns:1fr;gap:clamp(18px,2.4vw,32px)} .pl-course--banner .pl-shot img{aspect-ratio:29/9;object-position:center} /* 写真素材のない項目（ファミリー撮影など）。左の写真欄は空けたまま、 内容は画像ありのカードと同じ右側の列に置く（幅と位置をそろえる） */ .pl-course--plain .pl-course-main{grid-column:2} /* 符牒（A/B/C）。見出しの頭に小さく金の印として置く */ .pl-badge{display:inline-grid;place-content:center;flex:0 0 auto; width:1.9em;height:1.9em;border:1px solid var(--kogane);border-radius:50%; font-family:var(--f-lat);font-size:14px;line-height:1;color:var(--kogane)} /* 屋外・特別プランは符牒を持たないので、頭に英字を小さく置く */ .pl-course-en{display:block;width:100%;font-family:var(--f-lat);font-size:11px;letter-spacing:.28em; color:var(--usukin);margin-bottom:6px} /* 見出し。名前＋価格を一行に。収まらない幅では価格が下の行へ折り返す（潰さない）。 */ .pl-course-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px clamp(12px,1.6vw,20px); margin-bottom:clamp(14px,1.8vw,20px)} .pl-course-head h3{font-family:var(--f-disp);font-weight:600;font-size:clamp(16px,1.8vw,21px); letter-spacing:.05em;line-height:1.45;color:var(--midashi)} /* 価格。以前は nowrap で一行固定にしていたが、ファミリー撮影のような長い価格 （各プラン +11,500円〜（お一人につき））が狭い画面で右にはみ出し、ページごと 横に切れていた。折り返しを許可しつつ word-break:keep-all で「11,500円」等の 数字は割らず、税込（span）だけは一かたまりに保つ。右寄せは維持。 */ .pl-price{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:.2em .5em; word-break:keep-all;margin-left:auto;min-width:0} .pl-price b{font-family:var(--f-disp);font-weight:700;font-size:clamp(17px,1.9vw,21px);letter-spacing:.02em;color:var(--kogane-moji)} .pl-price span{font-size:11.5px;letter-spacing:.06em;color:var(--moji-2);white-space:nowrap} /* 含まれるもの。長い一文にせず、項目ごとに分けて拾い読みできるようにする。 箱では囲わず、頭に金の小さな印を付けるだけ。二列で畳んで縦を詰める。 */ .pl-incl{margin:clamp(6px,1vw,12px) 0 0} .pl-incl-h{display:block;font-family:var(--f-lat);font-size:10.5px;letter-spacing:.28em; text-transform:uppercase;color:var(--kogane-moji);margin-bottom:10px} .pl-incl ul{list-style:none;margin:0;padding:0; display:grid;grid-template-columns:1fr 1fr;gap:7px clamp(16px,2vw,28px)} .pl-incl li{position:relative;padding-left:15px;font-size:12.5px;line-height:1.75;color:var(--moji)} .pl-incl li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:1px;background:var(--kogane)} @media (max-width:420px){.pl-incl ul{grid-template-columns:1fr}} /* 所要時間・お渡し。ラベルと値をひと組の「事実」として並べる */ .pl-facts{margin:clamp(16px,2vw,22px) 0 0;padding-top:clamp(14px,1.8vw,18px);border-top:1px solid var(--keisen); display:flex;flex-wrap:wrap;gap:6px clamp(28px,5vw,64px)} .pl-facts > div{min-width:0} .pl-facts dt{font-family:var(--f-lat);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--kogane-moji)} .pl-facts dd{margin:5px 0 0;font-size:13.5px;line-height:1.7;color:var(--moji)} /* 注記（中止期間・併用不可など）。臙脂の細い罫を左に添える */ .pl-course-note{margin:clamp(14px,1.8vw,20px) 0 0;padding:2px 0 2px 16px; border-left:2px solid var(--enji);font-size:12px;line-height:2;color:var(--moji-2)} /* 各プランの予約ボタン */ .pl-course-cta{margin:clamp(16px,2.2vw,24px) 0 0} .pl-course-cta .btn{display:inline-flex} @media (max-width:720px){ .pl-course{grid-template-columns:1fr;gap:16px} .pl-course--plain .pl-course-main{grid-column:auto} .pl-price{margin-left:0} } /* 予約・ギャラリーへのボタン（各プラン群の直後）*/ .pl-book-in{margin:clamp(28px,3.6vw,44px) 0 0;display:flex;flex-wrap:wrap;gap:12px 14px} @media (max-width:520px){.pl-book-in .btn{flex:1 1 100%}} /* ── 季節別プラン（百鬼夜行）────────────────────────────────── 妖ごとに横長写真のカードを、季節で束ねて三列に並べる。 */ /* 全プラン共通の含まれるもの。目立つ枠で先に読ませる。 */ .pl-seasons-note{margin:0 0 clamp(26px,3.2vw,38px);padding:clamp(14px,1.8vw,18px) clamp(16px,2vw,22px); border:1px solid var(--keisen);background:var(--ji-2);font-size:12.5px;line-height:1.95;color:var(--moji);max-width:none} /* プラン内容（含まれるもの）は一段強く見せる：金の左罫＋見出しラベル。 */ .pl-seasons-note--incl{border-left:3px solid var(--kogane);padding:clamp(16px,2vw,20px) clamp(18px,2.2vw,24px)} .pl-seasons-note-h{display:block;font-weight:600;font-size:13px;letter-spacing:.08em;color:var(--kogane-moji);margin-bottom:6px} /* 一覧の下に置く注記（流派名の但し書きなど）は、下ではなく上に余白を取る */ .pl-seasons-foot{margin:clamp(34px,4.4vw,56px) 0 0} /* 期間の区切り。上に太めの罫、英字＋大きな和字で節をはっきり分ける。 */ /* 各季節を上罫で区切る（先頭の季節も、上の「含まれるもの」枠から余白で離す）。 */ .pl-season{margin-top:clamp(40px,5.4vw,70px)} .pl-season-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:clamp(12px,1.8vw,20px); margin:0 0 clamp(16px,2vw,22px);padding-top:clamp(16px,2vw,24px);border-top:2px solid var(--keisen); font-family:var(--f-disp);font-weight:700;font-feature-settings:"palt" 1; font-size:clamp(18px,2.2vw,24px);letter-spacing:.08em;color:var(--midashi)} .pl-season-en{font-family:var(--f-lat);font-weight:500;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--kogane-moji)} .pl-season-grid{list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px) clamp(14px,2vw,26px); align-items:start} /* 説明文の量でカード丈が変わっても、下に余白が伸びないよう天付けに */ .pl-season-card{list-style:none;position:relative;display:flex;flex-direction:column;border:1px solid var(--keisen);background:var(--ji);overflow:hidden; transition:border-color .5s var(--ease)} .pl-season-card:hover{border-color:var(--kogane)} /* 男性も体験できるプランの目印。作例写真の右上に小さく。写真の上でも読めるよう地色の膜を背に。 */ .pl-season-badge{position:absolute;top:8px;right:8px;z-index:3;display:inline-flex;align-items:center;gap:.3em; padding:3px 8px 3px 6px;font-family:var(--f-body);font-size:10px;font-weight:500;letter-spacing:.06em;line-height:1; color:var(--midashi);background:rgba(var(--ji-rgb),.82);border:1px solid var(--keisen);border-radius:2px; -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .pl-season-badge i{font-style:normal;font-size:11px;color:var(--enji)} .pl-season-card .pl-shot{aspect-ratio:3/2;background:var(--ji-2)} /* 妖の写真は横長 */ .pl-season-card .pl-shot img{object-position:center} /* サムライの剣術の構えは縦長写真なので、カードも縦長に（全身の構えを収める） */ body.tone-samurai .pl-season-card .pl-shot{aspect-ratio:5/7} /* 複数枚をフェードで重ねる（[data-fade]。切り替えは main.js）。 img を重ねて、表示中の一枚（.on）だけ不透明にする。JSが動かなければ先頭で静止。 */ .pl-fade{position:relative;overflow:hidden} .pl-fade img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:0;transition:opacity 1.3s var(--ease)} .pl-fade img.on{opacity:1;z-index:1} .pl-season-card-main{padding:clamp(13px,1.6vw,17px) clamp(13px,1.6vw,17px) clamp(14px,1.7vw,18px);min-width:0} /* 名前と価格は縦に積む（名前の長短でばらつかない） */ .pl-season-hd{margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid var(--keisen)} /* 名前だけのカード（着物のスタイル等、料金や説明がない）は、名前の下の罫線・余白を出さない。 */ .pl-season-card-main > .pl-season-hd:only-child{margin:0;padding:0;border-bottom:0} /* ── 撮影ブースの紹介（着物コーディネート等）──────────────────────── */ .pl-booths{background:var(--ji);border-top:1px solid var(--keisen);padding:clamp(40px,5vw,68px) 0} .pl-booth-grid{list-style:none;margin:0;padding:0 clamp(20px,3.4vw,52px); display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,3.2vw,48px)} @media (max-width:760px){.pl-booth-grid{grid-template-columns:1fr;gap:30px}} .pl-booth{list-style:none;min-width:0} .pl-booth .pl-shot{aspect-ratio:3/2;background:var(--ji-2);overflow:hidden} .pl-booth .pl-shot img{width:100%;height:100%;object-fit:cover;filter:var(--shashin);transition:transform 3s var(--ease)} .pl-booth:hover .pl-shot img{transform:scale(1.03)} .pl-booth-nm{margin:15px 0 7px;font-family:var(--f-disp);font-weight:600;font-size:clamp(16px,1.8vw,20px);letter-spacing:.06em;color:var(--midashi)} .pl-booth-tx{margin:0;font-family:var(--f-body);font-size:13px;line-height:1.95;letter-spacing:.04em;color:var(--moji-2)} .pl-season-nm{margin:0;font-family:var(--f-disp);font-weight:600;font-size:clamp(14px,1.5vw,16px);letter-spacing:.05em;line-height:1.4;color:var(--midashi)} /* 読み仮名（ふりがな）。読みにくい装い名に、日本語ページで小さく添える */ .pl-season-yomi{display:block;margin-top:3px;font-family:var(--f-body);font-weight:400;font-size:10.5px;letter-spacing:.14em;color:var(--moji-3)} .pl-season-pr{margin:5px 0 0;font-family:var(--f-disp);font-weight:700;font-size:13.5px;letter-spacing:.02em;color:var(--kogane-moji)} /* プラン内容（所要・お渡し・注記）の下に置く説明文（妖の由来、隊士のプロフィールなど）。 上の内容とは余白で分ける（名前の罫線と重ねて二重罫にならないよう、罫は引かない）。 */ .pl-season-desc{margin:13px 0 0;font-size:12px;line-height:1.85;letter-spacing:.03em;color:var(--moji-2)} /* 説明文に添える「余韻の一文」。斜体・さらに控えめの色で、語りの余白として。 */ .pl-season-say{margin:7px 0 0;font-family:var(--f-body);font-style:italic;font-size:11.5px;line-height:1.9;letter-spacing:.03em;color:var(--moji-3)} /* 所要・お渡しはラベル付きで分かりやすく */ .pl-season-facts{margin:0;display:flex;flex-wrap:wrap;gap:8px clamp(14px,2vw,22px)} .pl-season-facts dt{font-family:var(--f-lat);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--kogane-moji)} .pl-season-facts dd{margin:2px 0 0;font-size:12px;line-height:1.6;color:var(--moji)} /* 妖ごとの注釈。複数ある場合は ※ で一件ずつ。臙脂の細い縦罫で一塊に見せる。 */ .pl-season-notes{margin:10px 0 0;padding:2px 0 2px 12px;border-left:2px solid var(--enji);list-style:none; font-size:11px;line-height:1.75;color:var(--moji-2)} .pl-season-notes li{position:relative;padding-left:1.15em} .pl-season-notes li::before{content:"※";position:absolute;left:0;color:var(--enji)} .pl-season-notes li + li{margin-top:5px} @media (max-width:820px){.pl-season-grid{grid-template-columns:1fr 1fr}} @media (max-width:460px){.pl-season-grid{grid-template-columns:1fr}} /* ── 専用オプション ──────────────────────────────────────────── */ .pl-opt{padding:clamp(40px,5vw,68px) 0;border-top:1px solid var(--keisen);background:var(--ji-2)} /* 並べる札。写真を上・説明を下に積む。オプションは脇役なので、 写真は本プランより小さく（三列・低め）。説明が短いので横長にはしない。 */ .pl-opt-list{margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,34px) clamp(16px,2.2vw,30px); padding-top:clamp(20px,2.6vw,30px);border-top:1px solid var(--keisen)} /* 一件ずつ枠で囲うと、写真と説明のまとまりが分かりやすい */ /* オプションのカードはリンクではない（クリックできない）ので、 押せそうに見えるホバー効果（枠の金色化・写真の拡大）は付けない。 */ .pl-opt-i{display:flex;flex-direction:column;border:1px solid var(--keisen);background:var(--ji);overflow:hidden} .pl-opt-fig{margin:0;overflow:hidden;background:var(--ji-2)} .pl-opt-fig img{width:100%;aspect-ratio:3/2;object-fit:cover;object-position:center 26%;filter:var(--shashin)} /* 説明は枠内に余白をとる。写真は枠の上端に密着させる */ .pl-opt-main{min-width:0;padding:clamp(14px,1.7vw,19px) clamp(14px,1.7vw,19px) clamp(15px,1.9vw,21px)} /* 写真を持たないオプション（ネイルなど）は引き伸ばさず、自然な高さで上に置く */ .pl-opt-i--plain{align-self:start} /* 名前の長さでばらつかないよう、名前→価格を常に縦に積む（全オプション統一）。 */ .pl-opt-hd{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0 0 9px; padding-bottom:9px;border-bottom:1px solid var(--keisen)} .pl-opt-nm{font-family:var(--f-disp);font-weight:600;font-size:clamp(14px,1.5vw,17px);letter-spacing:.06em;line-height:1.4;color:var(--midashi)} .pl-opt-pr{display:flex;align-items:baseline;gap:.4em;white-space:nowrap} .pl-opt-pr b{font-family:var(--f-disp);font-weight:700;font-size:14px;color:var(--kogane-moji)} .pl-opt-pr span{font-size:10.5px;color:var(--moji-2)} .pl-opt-tx{margin:0;font-size:12.5px;line-height:2;color:var(--moji-2)} .pl-opt-more{margin:9px 0 0;font-size:12.5px;line-height:1.7} @media (max-width:820px){.pl-opt-list{grid-template-columns:1fr 1fr}} @media (max-width:520px){ .pl-opt-list{grid-template-columns:1fr} .pl-opt-pr{margin-left:0} } /* ── 共通オプション（畳んで見せる。開閉は theme.css の .acc に乗せる）── */ .pl-common{padding:clamp(40px,5vw,68px) 0;border-top:1px solid var(--keisen);background:var(--ji)} .pl-common-list{margin:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 clamp(16px,2.4vw,36px)} .pl-common-list dt{padding:11px 0;border-top:1px solid var(--keisen);font-size:12.5px;line-height:1.9;color:var(--moji)} .pl-common-list dt:first-child{border-top:0} .pl-common-list dd{margin:0;padding:11px 0;border-top:1px solid var(--keisen); font-family:var(--f-disp);font-weight:600;font-size:13px;letter-spacing:.02em;color:var(--kogane-moji); text-align:right;white-space:nowrap} .pl-common-list dd:nth-of-type(1){border-top:0} .pl-common-note{margin:14px 0 0;font-size:11.5px;line-height:1.95;color:var(--moji-2);max-width:46em} /* フォトグッズ専用ページ（/goods/）への案内 */ .pl-common-more{margin:clamp(20px,2.6vw,30px) 0 0} .pl-common-more a{font-size:12.5px;letter-spacing:.14em;color:var(--kogane-moji)} .pl-common-more .ar{color:var(--kogane)} /* ── お申し込み前に、必ずお読みください ────────────────────────── このプラン固有の確認事項（※リスト）と、全プラン共通の注意事項 （ラベル｜本文の二列）を、同じ節・同じ見出しの下にまとめて出す。 */ .pl-notice{padding:clamp(40px,5vw,68px) 0;border-top:1px solid var(--keisen);background:var(--ji-2)} /* このプラン固有の確認事項。※ を頭に添えた箇条書き */ .pl-notice-marks{list-style:none;margin:0 0 clamp(20px,2.6vw,30px);padding:0} .pl-notice-marks li{position:relative;padding:8px 0 8px 1.7em;font-size:12.5px;line-height:1.95;color:var(--moji-2)} .pl-notice-marks li::before{content:"※";position:absolute;left:0;top:8px;color:var(--kogane);font-size:11px} .pl-notice-list{margin:0;display:grid;grid-template-columns:minmax(150px,210px) minmax(0,1fr)} .pl-notice-list dt{padding:16px clamp(16px,2vw,28px) 16px 0;border-top:1px solid var(--keisen); font-family:var(--f-disp);font-weight:600;font-size:13.5px;letter-spacing:.06em;color:var(--kogane-moji)} .pl-notice-list dd{margin:0;padding:16px 0;border-top:1px solid var(--keisen); font-size:12.5px;line-height:1.95;color:var(--moji-2)} .pl-notice-list > dt:first-of-type,.pl-notice-list > dd:first-of-type{border-top:0} .pl-notice-list dd a{color:var(--kogane-moji);text-decoration:underline;text-underline-offset:.2em} .pl-notice-list dd a:hover{color:var(--kogane)} @media (max-width:600px){ .pl-notice-list{grid-template-columns:1fr} .pl-notice-list dt{padding-bottom:2px;border-top:1px solid var(--keisen)} .pl-notice-list dd{padding-top:6px;border-top:0} .pl-notice-list > dd:first-of-type{border-top:0} } /* ── 撮影の作例（ギャラリー入口）──────────────────────────────── 罫線でも余白でもなく、写真そのものを敷き詰めて見せる数少ない箇所。 ────────────────────────────────────────────────────────────── */ /* 豆知識コラムのカード（舞妓ページ）。写真＋日付＋タイトル＋矢印。箱で囲わない */ .pl-cols{padding:clamp(40px,5vw,68px) 0 clamp(40px,5vw,64px);border-top:1px solid var(--keisen);background:var(--ji-2)} .pl-cols-grid{list-style:none;margin:clamp(10px,1.6vw,18px) 0 0;padding:0 clamp(20px,3.4vw,52px);max-width:var(--pw);margin-inline:auto; display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)} .pl-cols-grid > li{min-width:0} .pl-col-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0} .pl-col-shot{margin:0;overflow:hidden;background:var(--ji);aspect-ratio:3/2} .pl-col-shot img{width:100%;height:100%;object-fit:cover;object-position:center 30%;filter:var(--shashin);transition:transform 3s var(--ease)} .pl-col-card:hover .pl-col-shot img{transform:scale(1.045)} .pl-col-meta{display:flex;flex-direction:column;gap:5px;padding:12px 2px 0} .pl-col-date{font-family:var(--f-lat);font-size:10.5px;letter-spacing:.16em;color:var(--usukin)} .pl-col-nm{display:flex;align-items:baseline;gap:.4em;font-family:var(--f-disp);font-weight:600; font-size:clamp(14px,1.6vw,17px);letter-spacing:.04em;line-height:1.5;color:var(--midashi)} .pl-col-nm i{font-style:normal;font-size:.85em;color:var(--kogane);transition:transform .34s var(--ease)} .pl-col-card:hover .pl-col-nm i{transform:translateX(4px)} @media (max-width:820px){.pl-cols-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:460px){.pl-cols-grid{grid-template-columns:1fr}} .pl-gallery{padding:clamp(40px,5vw,68px) 0 clamp(40px,5vw,64px);border-top:1px solid var(--keisen);background:var(--ji)} .pl-gal-grid{list-style:none;margin:clamp(6px,1vw,14px) 0 0;padding:0 clamp(20px,3.4vw,52px);max-width:var(--pw);margin-inline:auto; display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(6px,.9vw,12px)} .pl-gal-grid li{list-style:none;overflow:hidden;background:var(--ji-2)} .pl-gal-grid img{width:100%;height:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 28%;filter:var(--shashin); transition:transform 3s var(--ease)} .pl-gal-grid li:hover img{transform:scale(1.05)} @media (max-width:900px){.pl-gal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:520px){.pl-gal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} .pl-gal-more{margin:clamp(22px,3vw,32px) auto 0;padding-inline:clamp(20px,3.4vw,52px)} .pl-gal-more a{font-size:12.5px;letter-spacing:.14em;color:var(--kogane-moji)} .pl-gal-more .ar{color:var(--kogane)} /* ── 末尾の導線 ───────────────────────────────────────────────── */ .pl-end{padding:clamp(44px,5.4vw,76px) 0 clamp(52px,6vw,88px);border-top:1px solid var(--keisen);background:var(--ji-2)} .pl-end-acts{display:flex;flex-wrap:wrap;gap:12px 14px;margin-bottom:clamp(22px,3vw,32px)} @media (max-width:520px){.pl-end-acts .btn{flex:1 1 100%}} .pl-end-links{display:flex;flex-wrap:wrap;gap:14px clamp(20px,3vw,40px)} .pl-end-links a{font-size:12.5px;letter-spacing:.14em;color:var(--kogane-moji)} .pl-end-links .ar{color:var(--kogane)} /* 動きを減らす設定のときは、写真を止め、文字は既定（読める状態）で静止させる */ @media (prefers-reduced-motion:reduce){ .pl-cue{display:none} .pl-plate,.pl-lead,.pl-hero-cta{transform:none} }