/* page/price.css — 料金一覧（/price/）。
   料金カード自体は menu-shared.css の .nb__price-card / .nb__price-plans / .nb__price-standard 系を流用し、
   ここでは「撮影メニュー切替タブ」とページ固有のレイアウトだけを定義する。 */

/* 撮影メニュー切替タブの見た目は components.css の共通ピルタブ（.seg-tabbar / .seg-tab）に集約。
   ここでは /price/ 固有の配置だけを足す。旧＝画面下に浮遊する position:fixed のバー
   （.price-tabbar / .price-tabbar__scroll / .price-menu-tab とその .is-active・仕切り線・退場 .is-hidden）は
   オーナー要望 2026-06-17 で上部固定（通常フロー）へ移行し、共通 .seg-* に統合・撤去した。 */
.price-page .price-tabbar {
  margin-bottom: 22px; /* タブ帯とパネルの間隔（通常フロー配置） */
}

/* このページは縦に短く「上に戻る」ボタンは不要（押してまで戻る距離ではない／無い方がスッキリ＝オーナー指示 2026-06-09）。
   price.css は /price/ 限定 enqueue なので他ページの「上に戻る」には影響しない。JS状態クラスより優先するため !important。 */
.back-to-top { display: none !important; }

/* タブの“つまみ（.is-active）”・仕切り線・focus は components.css の共通 .seg-tab に集約済み（重複定義を撤去）。 */

/* パネル（メニューごと） */
.price-menu-panel[hidden] {
  display: none;
}

/* タブ切替を「パッ」ではなく「フワッ」に＝表示になったパネルをふわっとフェードイン（高級感・オーナー指示 2026-06-09）。
   非表示は display:none（[hidden]）なので、none→block で都度この animation が再生される。JS変更は不要。 */
.price-menu-panel.is-active {
  animation: priceFadeIn .5s ease both;
}
@keyframes priceFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 動きを抑えたい設定の人にはフェードしない（アクセシビリティ）。 */
@media (prefers-reduced-motion: reduce) {
  .price-menu-panel.is-active { animation: none; }
}

.price-menu-h2 {
  font-family: var(--jp);
  font-size: clamp(1.15rem, 4vw, 1.5rem);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--charcoal);
  text-align: center;
  margin: 0 0 22px;
}

.price-aud-h {
  font-family: var(--jp);
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--gold-dk);
  text-align: center;
  margin: 30px 0 14px;
}

.price-empty {
  text-align: center;
  color: var(--text2);
  font-size: .9rem;
  padding: 24px 0;
}

/* 「詳細・オプションを見る」はトップページの二次ボタンと同じ .text-cta（金の枠線ボタン）に揃える
   （オーナー指示 2026-06-09）。矢印は .text-cta::after が出すのでHTML側の「→」は削除済み。 */
.price-detail-link {
  text-align: center;
  margin: 30px 0 0;
}

/* 長いメニュー名（例「フォトウェディング」）でも崩れないよう、ボタン内は折り返し可に上書き
   （トップの .text-cta は短文ゆえ nowrap だが、こちらは文が長い）。 */
.price-detail-link .text-cta {
  white-space: normal;
  text-align: center;
}

/* 成人式（振袖）タブのみ：振袖レンタル料金＋成人式メニューの2ボタンを並べる（page-price.php の 20th 分岐）。
   PC は横並び・SP（折返し時）は縦積み。2ボタンの幅は文字数が違っても揃える（オーナー指示 2026-07-12）＝
   長い方（成人式メニュー）に合わせて両方を同じ幅にするため、各ボタンへ共通の min-width を与える。 */
.price-detail-link--dual {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 14px;
}
.price-detail-link--dual .text-cta {
  min-width: min(320px, 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 詳細ボタンと締めCTAが近すぎたので間隔を大きく空ける（オーナー指示 2026-06-09・2回目＝さらに拡大）。
   締めCTAはフォトログと同じ緑の line-card（.price-line-cta 内）に統一したため（オーナー指示 2026-06-17
   「フォトログページのCTAと揃えて」）、round1 の金枠（背景・border・padding）は撤去し、上の間隔だけ引き継ぐ。
   枠・地・余白は .line-card 自身（components.css）が持つ。 */
.price-page .price-line-cta {
  margin-top: clamp(72px, 16vw, 132px);
}

/* /price/ は全12メニューを同じ .nb__price-plans に流すため、プランが4枚未満のメニュー
   （シニア1枚・証明写真2枚・誕生日/家族/プロフィール3枚 等）だと PC で右に空きカラムが残る。
   PC のみ flex 中央寄せに上書きし、枚数に関わらず中央に揃える（モバイルの2列は menu-shared.css のまま）。 */
@media (min-width: 768px) {
  .price-menu-panel .nb__price-plans {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
  }
  .price-menu-panel .nb__price-card {
    flex: 0 1 240px;
    max-width: 260px;
  }
}

/* ── プリント・台紙・オプション料金（タブパネル群の下の共通セクション） ──────────────
   9メニュー共通ブロック（[data-price-extras="common"]）と wedding 専用ブロック（"wedding"）を
   両方 DOM に出し、price.js が [hidden] で表示を切り替える（idphoto/profile は両方 hidden）。
   小表はタブ内の主なオプション料金カード（.nb__price-opt-card／menu-shared.css）と同じ薄枠カードで
   統一する（オーナー確定 2026-07-12・罫線のみ→枠付きへ変更・同一ページ内の同種情報は同じ見た目にする）。
   クラス流用は .nb__price-opt-name::before 等の副作用が乗るため避け、同値をここに書く（影・一辺色バーは付けない）。
   料金行は menu-shared.css の .nb__price-opt-rows（プラン左・金額右／¥縦揃え）を流用する。 */
.nb__price-extras[hidden] { display: none; }

.nb__price-extras {
  /* タブパネル群と締めCTAの中間に置く独立セクション＝上に大きめの余白で章の切れ目を作る。 */
  margin-top: clamp(40px, 9vw, 72px);
  padding-top: clamp(28px, 6vw, 44px);
  border-top: 1px solid rgba(184,151,90,.22); /* 章の境界を示す1本罫（面ではなく上辺なのは全幅セクション境界＝仕事を持つ罫） */
}

.nb__price-extras-title {
  font-family: var(--jp);
  font-size: clamp(1.05rem, 3.6vw, 1.3rem);
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--charcoal);
  text-align: center;
  margin: 0 0 12px;
}

.nb__price-extras-lead {
  font-family: var(--sans);
  font-size: .82rem;
  line-height: 1.9;
  color: var(--warm-gray);
  letter-spacing: .03em;
  text-align: center;
  max-width: 34em;
  margin: 0 auto clamp(24px, 5vw, 38px);
}

/* サブ表（追加と焼増／台紙／フレーム／データ／オプション品）を余白で区切って積む。
   PC は2列に分けて縦の長さを抑える（省スペース）。区切りは箱ではなく距離＋細い仕切り罫。 */
.nb__price-extras-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(26px, 6vw, 36px) clamp(32px, 6vw, 52px);
}
@media (min-width: 720px) {
  .nb__price-extras-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* 小表の枠（.nb__price-opt-card と同じ性質：背景・薄枠・角丸・padding／影なし）。 */
.nb__price-extras-block {
  background: var(--warm-white);
  border: 1px solid rgba(184,151,90,.16);
  border-radius: 4px;
  padding: 16px 18px;
  min-width: 0; /* grid トラック幅に従わせ、狭幅端末での横はみ出しを防ぐ（.nb__price-opt-card と同じ理由） */
}
@media (min-width: 768px) {
  .nb__price-extras-block { padding: 20px 22px; }
}

.nb__price-extras-block-title {
  font-family: var(--jp);
  font-size: .98rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--gold-dk);
  margin: 0 0 4px;
  padding-bottom: 9px;
  border-bottom: 1px solid rgba(122,97,54,.28);
}

.nb__price-extras-block-sub {
  font-family: var(--sans);
  font-size: .72rem;
  line-height: 1.7;
  color: var(--text2);
  letter-spacing: .02em;
  margin: 8px 0 0;
}

/* .nb__price-opt-rows は max-content 中央寄せがデフォルト。ここでは表として全幅に開き、
   プラン↔金額を左右に振る（左揃えの品目一覧として読ませる）。 */
.nb__price-extras-block .nb__price-opt-rows {
  width: 100%;
  min-width: 0;
  margin: 14px 0 0;
  gap: 10px;
}

.nb__price-extras-note {
  font-family: var(--sans);
  font-size: .74rem;
  line-height: 1.9;
  color: var(--text2);
  letter-spacing: .02em;
  margin: clamp(26px, 5vw, 38px) 0 0;
  text-align: left;
  max-width: 40em;
}