/*
 * page/costume.css
 *
 * 衣装紹介（/costume/）専用スタイル（Eデザイン＝スプリット色面ヒーロー＋節目の色）。
 * page-costume.php が出力する .cos-* クラス専用。global.css の CSS 変数・.rv・components.css の
 * .line-card（CTA）に依存し、それ以外は自己完結する（page-doc.css には依存しない）。
 *
 * 配色：ベースは既存ブランド変数（--cream/--charcoal/--gold-dk/--en/--jp/--sans）を流用。
 *   「節目の色」だけ本ページ固有のローカル変数 --cos-acc / --cos-acc-dk / --cos-fg を .cos-wrap に定義し、
 *   タブ切替で JS（costume.js）が値を差し替える（振袖=青／七五三=赤／赤ちゃん=クリーム／卒業袴=金・2026-06-19）。
 *   --cos-fg は色面の文字色＝明るい色面（クリーム）のタブだけ濃色に切り替える（白文字が消えるのを防ぐ）。
 *   白背景のコンテンツに出るアクセント（金額・○・チップ・もっと見る・見出しバー）は --cos-ink（白背景で必ず読める濃い色）を使う。
 *   :root は汚さない。
 *
 * @package odashima2026
 */

.cos-wrap{
  /* 節目の色：既定＝振袖の青。タブ切替で costume.js が上書きする（振袖=青/七五三=赤/赤ちゃん=クリーム/卒業袴=金） */
  --cos-acc:#283B6B;      /* ヒーロー色面のグラデ上端・タブ背景・チップ背景など */
  --cos-acc-dk:#1c2b50;   /* ヒーロー色面のグラデ下端（acc と同系の濃淡） */
  --cos-fg:var(--cream);  /* 色面の文字色。明るい色面（赤ちゃん=クリーム）のタブだけ JS が濃色に差し替える */
  --cos-ink:#2f4a8c;      /* 白背景コンテンツのアクセント（金額・○・チップ文字・もっと見る・見出しバー・タブ文字/墨線）＝白背景で必ず読める濃い色。#1c2b50 は暗すぎて黒く見えた→はっきり紺青に（オーナー要望 2026-06-20）。赤ちゃんは acc-dk が明るいベージュなので ink は別の濃茶を持つ */
}

.cos-wrap :focus-visible{outline:2px solid var(--cos-acc);outline-offset:3px;border-radius:2px}
.cos-wrap .cos-hero-color :focus-visible{outline-color:#fff}
.cos-c{max-width:1180px;margin:0 auto;padding:0 var(--sp)}
@media(min-width:768px){.cos-c{padding:0 var(--sp-m)}}

/* ── スプリットヒーロー：色面＋大判写真 ── */
.cos-hero{display:grid;grid-template-columns:1fr}
@media(min-width:880px){.cos-hero{grid-template-columns:1.04fr 1fr;align-items:stretch}}/* min-height は外し、高さは縦長の図に追従（衣装は縦写真＝オーナー要望 2026-06-19） */
.cos-hero-color{
  position:relative;overflow:hidden;color:var(--cos-fg);
  background:linear-gradient(150deg,var(--cos-acc) 0%,var(--cos-acc-dk) 100%);
  transition:background .7s var(--ease),color .7s var(--ease);
  display:flex;flex-direction:column;justify-content:center;
}
.cos-hero-inner{padding:60px 7vw 60px max(var(--sp),7vw);position:relative;z-index:1}
.cos-hero-color::after{content:"";position:absolute;right:-90px;bottom:-90px;width:360px;height:360px;border:1px solid currentColor;opacity:.15;border-radius:50%}/* 文字色に追従＝クリーム面でも見える */
.cos-hero-color::before{content:"";position:absolute;left:-50px;top:-50px;width:180px;height:180px;border:1px solid currentColor;opacity:.10;border-radius:50%}
.cos-hero-eyebrow{font-family:var(--sans);font-size:.7rem;font-weight:600;letter-spacing:.22em;opacity:.7;margin:0 0 16px;line-height:1.4}/* ページの本当のH1（主題＝キーワード）。詩的コピーは下の装飾見出し */
.cos-kosho{font-family:var(--jp);font-size:.82rem;letter-spacing:.4em;opacity:.88;margin-bottom:20px}
.cos-hero-title{font-family:var(--jp);font-weight:700;font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.28;letter-spacing:.06em;margin:0}
.cos-hero-lead{margin-top:24px;max-width:27em;font-size:.94rem;opacity:.95;line-height:2.05}
.cos-hero-fig{position:relative;min-height:44vh;background:var(--cream)}
@media(min-width:880px){.cos-hero-fig{min-height:0;aspect-ratio:4/5;align-self:center}}/* PCは縦長（4:5）に＝正方形に見える問題を解消（オーナー要望 2026-06-19） */
/* 880px以上は2カラム＝色面が半幅。従来は 6vw（全幅基準）フォント＋左右 7vw の広い余白のせいで、880〜1100px 帯で見出しが色面に収まらず「節目」「記念」等が意図外の位置で割れていた（PC のみ・SP は1カラム全幅ゆえ正常＝オーナー実機で確認）。対策は2段構え（2026-07-11）：①色面内側の左右余白を 7vw→40px に詰めて文字の可用幅を広げる ②フォントを最長見出し（赤ちゃん「はじめての記念に、」9文字）が全 PC 幅で1行に収まる 4.4vw 基準へ抑える。これで <br> 指定位置だけで折れ、全4タブが破綻しない（実測：880〜1280px で全タブ意図どおりの行数）。SP 側の padding/font は不変。 */
@media(min-width:880px){
  .cos-hero-inner{padding-left:40px;padding-right:40px}
  .cos-hero-title{font-size:clamp(2.3rem,4.25vw,3.75rem)}
}
.cos-hero-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}/* 縦写真の顔・上半身を残す（切れるのは裾側） */

/* ── タブ：案2「帯と筆」（2026-06-20 オーナー選択。旧＝/price/共通の金ガラス・ピル .seg-* は本ページから撤去） ──
   枠も塗りも持たず、余白に明朝の言葉だけを並べ、選んだタブの下を一本の墨線（節目色 --cos-ink）がすっと移動する。
   ヒーローの主役性を邪魔しない軽い佇まい。タブ切替・墨線の位置は costume.js が担当（JS無効でも .on で現在地は分かる）。 */
.cos-tabs{margin:0 auto 28px;padding:26px 16px 0}/* 上の余白は margin でなく padding で確保：main.cos-wrap の最初の子のため top margin が相殺（margin collapse）し、暗い body(#111) が黒帯として覗くのを防ぐ＝cream の cos-wrap 上に余白を乗せる */
.cos-tablist{position:relative;display:flex;justify-content:center;gap:clamp(16px,5vw,58px);max-width:760px;margin:0 auto;border-bottom:1px solid var(--light-gray)}
.cos-tab{display:flex;align-items:center;justify-content:center;padding:10px 4px 16px;background:none;border:0;cursor:pointer}
.cos-tab-jp{font-family:var(--sans);font-size:1.2rem;font-weight:800;letter-spacing:.06em;color:var(--warm-gray);white-space:nowrap;transition:color .35s}/* カテゴリタブは可読性優先でゴシック(--sans)＋極太(800)・大きめに（明朝だと細く見えづらい・オーナー要望 2026-06-20） */
.cos-tab.on .cos-tab-jp{color:var(--cos-ink)}/* アクティブは日本語が節目色に（--cos-ink は白背景で読める濃色） */
/* 動く墨線：選んだタブの下を移動し、その節目の色をまとう。位置(left/width)は costume.js が付与 */
.cos-tab-ink{position:absolute;bottom:-1.5px;left:0;width:0;height:3px;border-radius:3px;pointer-events:none;background:linear-gradient(90deg,transparent,var(--cos-ink) 14%,var(--cos-ink) 86%,transparent);transition:left .5s var(--ease),width .5s var(--ease),background .5s}

/* ── パネル ── */
.cos-panel{display:none;padding:52px 0 0}
.cos-panel.on{display:block;animation:cos-fade .5s var(--ease) both}
@keyframes cos-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.cos-lead{font-family:var(--jp);font-size:1.12rem;font-weight:600;line-height:1.85;max-width:30em;letter-spacing:.03em;color:var(--charcoal)}/* リード文：見出し(1.3rem)より小さく＝階層を保つ（22.4→17.9px・オーナー指摘 2026-06-19） */
.cos-lead p{margin:0}
.cos-accent{color:var(--cos-ink);transition:color .6s}/* 本文中の強調＝白背景に出るので濃い側を使う（クリーム面タブでも読める） */

/* 作例＝フォトログ自動表示（写真モザイク・クリックで撮影記録へ／雑誌組みレイアウト） */
.cos-plgrid{columns:2;column-gap:16px;margin:42px 0 6px}
@media(min-width:760px){.cos-plgrid{columns:3;column-gap:20px}}
.cos-plitem{break-inside:avoid;display:block;margin:0 0 16px;position:relative;overflow:hidden;border-radius:3px;text-decoration:none}
.cos-plitem img{width:100%;object-fit:cover;transition:transform .7s var(--ease);display:block}
/* 画像ホバーズームはマウス環境のみ（@media hover）。タッチでの :hover 固着を作らない（下の
   .cos-cat-item と同根のタップ不発対策・Galaxy S25 実機 2026-06-21）。 */
@media (hover:hover) and (pointer:fine){.cos-plitem:hover img{transform:scale(1.05)}}
.cos-plitem:nth-child(3n+1) img{aspect-ratio:3/4}
.cos-plitem:nth-child(3n+2) img{aspect-ratio:1/1}
.cos-plitem:nth-child(3n) img{aspect-ratio:4/5}
.cos-plitem:focus-visible{outline:2px solid var(--cos-acc);outline-offset:2px}
.cos-plcap{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 8px;font-family:var(--jp);font-size:.78rem;color:#fff;letter-spacing:.02em;line-height:1.4;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.cos-plmore{text-align:center;margin:24px 0 0}/* もっと見るは共通ボタン .text-cta（components.css）に統一＝他ページと同じ見た目。矢印は .text-cta::after が付与 */

/* 本文＋料金ブロック */
.cos-doc{display:grid;grid-template-columns:minmax(0,1fr);margin-top:56px;border-top:1px solid var(--light-gray);padding-top:40px}/* minmax(0,1fr)＝表のmin-width:360でトラックが膨らむグリッド・ブローアウトを防ぐ（横スクロールで収める） */
@media(min-width:760px){.cos-doc{grid-template-columns:200px minmax(0,1fr);gap:38px}}
.cos-doc h2{font-family:var(--jp);font-size:1.3rem;font-weight:700;letter-spacing:.06em;line-height:1.5;position:relative;padding-left:15px;margin:0 0 14px}
.cos-doc h2::before{content:"";position:absolute;left:0;top:.18em;width:4px;height:1.05em;background:var(--cos-ink);transition:background .6s}
@media(min-width:760px){.cos-doc h2{margin-bottom:0}}
.cos-doc-body p{font-size:.93rem;color:var(--text2);margin:0 0 1.1em;max-width:42em;line-height:1.95}
.cos-doc-body p:last-child{margin-bottom:0}
.cos-price{margin-top:22px;border-top:1px solid var(--light-gray)}
.cos-price dl{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--light-gray);margin:0}
@media(min-width:520px){.cos-price dl{grid-template-columns:1fr auto;align-items:baseline;gap:16px}}
.cos-price dt{font-family:var(--jp);font-weight:600;padding:15px 0 4px;letter-spacing:.03em;margin:0}
.cos-price dd{font-family:var(--en);font-size:1.5rem;color:var(--cos-ink);padding:0 0 15px;margin:0;transition:color .6s}/* 金額＝白背景に出るので濃い側（クリーム面でも読める） */
@media(min-width:520px){.cos-price dt{padding:16px 0}.cos-price dd{padding:16px 0}}
.cos-note{font-size:.81rem;color:var(--warm-gray);margin-top:14px;line-height:1.85}
.cos-pbox{margin-top:22px;background:var(--warm-white);border-left:3px solid var(--cos-ink);border-radius:2px;padding:16px 18px;transition:border-color .6s}
.cos-pbox p{font-size:.88rem;color:var(--text2);margin:0;line-height:1.9}
.cos-pbox strong{font-family:var(--jp);color:var(--charcoal);font-weight:700}

/* 比較表（振袖） */
.cos-cmp-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cos-table{margin-top:26px;border-collapse:collapse;width:100%;min-width:360px;font-size:.83rem}
.cos-table th,.cos-table td{border:1px solid var(--light-gray);padding:12px 9px;text-align:center;vertical-align:middle}
.cos-table thead th{font-family:var(--jp);font-weight:600;color:var(--cos-fg);background:var(--cos-acc);letter-spacing:.03em;line-height:1.4;transition:background .6s,color .6s}/* 文字は色面と同じ可変色＝クリーム面でも読める */
.cos-table .cos-th-sub{font-weight:400;font-size:.72rem;opacity:.85}
.cos-table tbody th{text-align:left;font-weight:500;font-family:var(--sans);color:var(--text2);background:#fff;white-space:normal;line-height:1.45}/* 行見出しは折り返す（長い項目が枠からはみ出すのを防ぐ・オーナー要望 2026-06-19） */
.cos-table tbody tr:nth-child(even) td{background:rgba(0,0,0,.015)}
.cos-mark{font-weight:700;font-size:1.05rem}
.cos-mark--yes{color:var(--cos-ink);transition:color .6s}/* ○＝白背景に出るので濃い側（クリーム面でも読める） */
.cos-mark--no{color:var(--warm-gray)}/* × を可読コントラストに（薄すぎ修正） */
.cos-cell-note{display:block;font-size:.7rem;color:var(--warm-gray);margin-top:2px;letter-spacing:.02em}
.cos-cmp-intro{margin:0 0 4px}/* 比較表の導入文（旧インラインstyleをクラス化） */
.cos-points{margin:18px 0 0;padding-left:1.1em}
.cos-points li{font-size:.84rem;color:var(--text2);line-height:1.85;margin-bottom:.4em}

/* 振袖カタログ（絞り込み＋もっと見る） */
.cos-catalog{margin-top:56px;border-top:1px solid var(--light-gray);padding-top:40px}
.cos-catalog h2{font-family:var(--jp);font-size:1.3rem;font-weight:700;letter-spacing:.06em;line-height:1.5;position:relative;padding-left:15px;margin:0}
.cos-catalog h2::before{content:"";position:absolute;left:0;top:.18em;width:4px;height:1.05em;background:var(--cos-ink);transition:background .6s}
/* タブ別FAQ（2026-07-24）。区画の作り（上罫線＋見出しの色バー）は .cos-doc／.cos-catalog と揃える＝
   タブを切り替えると --cos-ink が変わり、見出しバーも節目の色に追従する。
   Q&A の見た目は components.css（.faq-item）・縦間隔は page-doc.css（.faq-list）＝ここでは定義しない。 */
.cos-faq{margin-top:56px;border-top:1px solid var(--light-gray);padding-top:40px}
.cos-faq h2{font-family:var(--jp);font-size:1.3rem;font-weight:700;letter-spacing:.06em;line-height:1.5;position:relative;padding-left:15px;margin:0 0 20px}
.cos-faq h2::before{content:"";position:absolute;left:0;top:.18em;width:4px;height:1.05em;background:var(--cos-ink);transition:background .6s}
/* Q&A の見た目は撮影メニューFAQ（.nb__faq-acc）と完全に揃える＝open時の左金バーもそのまま金。
   以前はこのページだけ左バーを節目色（--cos-ink）へ、質問文hoverも節目色へ寄せていたが、
   オーナー指示で撮影メニューと完全一致に統一（2026-07-24・続き411）＝両方の上書きを撤去。
   基準（.nb__faq-acc）は質問文のhover色変化を持たないため、こちらも持たせない。 */
.cos-cat-filter{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px}
.cos-chip{font-family:var(--sans);font-size:.8rem;padding:7px 16px;border:1px solid var(--light-gray);border-radius:999px;background:transparent;color:var(--text2);cursor:pointer;transition:.3s;letter-spacing:.03em;min-height:34px}
.cos-chip:hover{border-color:var(--cos-ink);color:var(--cos-ink)}
.cos-chip.on{background:var(--cos-acc);color:var(--cos-fg);border-color:var(--cos-acc);transition:background .5s,color .3s}/* 選択チップの文字は色面と同じ可変色＝クリーム面でも読める */
.cos-cat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(min-width:600px){.cos-cat-grid{grid-template-columns:repeat(4,1fr);gap:12px}}
@media(min-width:980px){.cos-cat-grid{grid-template-columns:repeat(5,1fr)}}
.cos-cat-item{position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:3px;background:var(--warm-white);margin:0}
.cos-cat-item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);display:block;touch-action:manipulation}
/* ホバーズームはマウス環境だけに限定（@media hover）。タッチ端末（Galaxy S25 実機・オーナー指摘
   2026-06-21）で :hover が固着すると、拡大を閉じた直後に同じ写真を1回タップしても再拡大しない
   （2回タップ／一度スクロールすれば開く）症状になる。スクロール＝固着ホバー解除・2回目タップ＝
   1回目で解除し2回目で発火、という症状とも整合。:hover の無い料金カードが正常だった差分がこれ。
   touch-action:manipulation はダブルタップズーム抑止＝タップ→クリック合成の取りこぼし保険。 */
@media (hover:hover) and (pointer:fine){.cos-cat-item:hover img{transform:scale(1.05)}}
.cos-cat-item figcaption{position:absolute;left:8px;bottom:7px;color:#fff;font-family:var(--jp);font-size:.72rem;letter-spacing:.03em;text-shadow:0 1px 5px rgba(0,0,0,.65)}
/* 成約済み＝写真を少し沈めて（opacity .7）、右上の角に斜めの「成約済み」リボンを掛ける。
   overflow:hidden の .cos-cat-item の右上角を 45deg の帯が斜めに横切るコーナーリボン。
   right/top を負値にして帯の両端をタイル外へ流し、角に綺麗に収める。 */
.cos-cat-item--sold img{opacity:.7}
.cos-sold-ribbon{
  position:absolute;
  top:14px;right:-34px;
  width:128px;
  transform:rotate(45deg);
  transform-origin:center;
  background:linear-gradient(135deg,#a8312b,#7d1f1b);
  color:#fff;
  font-family:var(--sans);
  font-size:.62rem;font-weight:700;letter-spacing:.04em;
  text-align:center;line-height:1;padding:4px 0;
  box-shadow:0 1px 5px rgba(0,0,0,.4);
  text-shadow:0 1px 1px rgba(0,0,0,.45);
  pointer-events:none;
  z-index:2;
}
.cos-cat-empty{grid-column:1/-1;color:var(--warm-gray);font-size:.85rem;padding:20px 0;text-align:center}
.cos-cat-count{font-size:.78rem;color:var(--warm-gray);text-align:center;margin:16px 0 0;letter-spacing:.04em}
.cos-more-wrap{display:none;text-align:center;margin-top:14px}/* 既定は隠し JS が必要時のみ表示（FOUC防止） */
.cos-more{font-family:var(--jp);font-size:.9rem;letter-spacing:.06em;padding:13px 32px;border:1px solid var(--cos-ink);color:var(--cos-ink);background:transparent;border-radius:2px;cursor:pointer;transition:.3s;min-height:44px}/* 濃い側＝白背景・クリーム面でも読める */
.cos-more:hover{background:var(--cos-acc);color:var(--cos-fg)}

/* CTA（フォトログと同じ .line-card を使う）：上に余白だけ足す */
.cos-cta-sec{margin-top:76px}

/* スクロールリベール（global の .rv と同仕様。common.js [2] が .on を付ける／once） */
.cos-wrap .rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.cos-wrap .rv.on{opacity:1;transform:none}

/* ── SP ── */
@media(max-width:879px){
  .cos-hero-fig{min-height:64vh;order:-1}/* 縦写真のクロップ低減 */
  .cos-hero-inner{padding:46px var(--sp)}
}
@media(max-width:560px){
  .cos-tabs{padding:20px 12px 0}/* SP も上余白は padding で（黒帯防止＝desktop と同方針） */
  .cos-tablist{gap:clamp(10px,4vw,20px)}
  .cos-tab{padding:8px 2px 14px}
  .cos-tab-jp{font-size:1.12rem;letter-spacing:.04em}
  .cos-hero-fig{min-height:92vw}/* 縦写真をほぼフルに見せる（クロップ50%→約25%） */
  .cos-hero-title{font-size:clamp(2.1rem,9vw,3rem)}
  /* 比較表：第1列（行見出し）が幅を占有しデータ列が潰れるのを抑える。折り返しは base の white-space:normal */
  .cos-table tbody th{max-width:120px}
  .cos-table .cos-th-sub{font-size:.68rem}
  .cos-lead{font-size:1.04rem}
  .cos-plgrid{column-gap:12px}
  .cos-plitem{margin-bottom:12px}
}
@media(prefers-reduced-motion:reduce){
  .cos-wrap *,.cos-wrap *::before,.cos-wrap *::after{animation:none!important;transition:none!important}
  .cos-wrap .rv{opacity:1;transform:none}
}