/*
 * 撮影/購入ページ 共通のヘッダー・タブ・バッジ。
 *
 * もとは patterns/_photo-header-styles.php のページ内 <style>
 * （2026-08-21 に外へ出した）。
 *
 * **読み込む位置は変えないこと** ―― 自由CSS（general_style_css）の直後。
 * !important による上書きの勝ち負けがそこで決まっており、前に動かすと
 * 自由CSSに負ける。各ページはこれまでどおり _photo-header-styles.php を
 * その位置で require すればよく、あちらが <link> と <script> を出す。
 */

/* タブは選択中のみ下線。下線は専用の bar 要素(.tab-underline-bar)で描画し、
   タブ切替(撮影↔購入のページ遷移)時に「下線だけ」が新しい位置へスライドする。
   bar に共有 view-transition-name を付与し、#149 のMPA View Transitions で旧位置→
   新位置へモーフィング（文字/アイコンは動かさない）。非対応/reduced-motion 時は
   bar が静的な下線として表示される。 */
p.button-links .button-link{ border-bottom:2px solid transparent !important; text-decoration:none !important; position:relative; }
p.button-links .button-link.selected .tab-underline-bar{
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:currentColor;
  view-transition-name: tab-underline;
}
::view-transition-group(tab-underline){
  animation-duration: 0.35s;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
/* お問い合わせ(.notice)：枠線/影を消し、背景をうっすら表示して視認性を上げる */
.notice{ border:none !important; box-shadow:none !important; border-radius:8px !important; background:rgba(0,0,0,0.07) !important; padding:12px 16px !important; }
/* 商品バッジ */
.product-badges{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; pointer-events:none; }
.product-badge{ background-color:rgba(0,0,0,0.7); color:#fff; font-size:10px; padding:2px 6px; border-radius:4px; text-align:right; }
/* 「あなたの写真」見出しの余白（両ページで統一） */
.head{ margin-top:30px; margin-bottom:15px; }
/* グッズページの見出し（スペシャルグッズ: 28px/700 ゴシック）と同じ見た目に揃える */
h3.head, h3.head a{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",Meiryo,sans-serif !important;
  font-size:28px !important;
  font-weight:700 !important;
  letter-spacing:.04em;
}
/* --- PC（481px以上）: 撮影一覧もTOPと同じヘッダーの重ね置きにそろえる ---
   一覧用の見出しだけはロゴの直下から始める。

   **規則はこの1組だけにする（2026-08-19）。** 直接アクセスは下のインライン
   スクリプトが、TOPの同梱は開いたとき（openSpaCaptured）が、どちらも
   body.fp-captured-layout を付けてここへ入ってくる。以前は同梱側に
   `body:has(#fp-captured-spa.is-open)` の**別の値**（clamp(120px,8vw,160px)）と
   JSの実測（ヘッダー下端＋24px）があり、3系統が別々の答えを出して
   「開き方で位置が変わる」の原因になっていた。**同梱専用の位置指定を
   ここへ足さないこと** ―― 足した瞬間、また食い違いが生まれる。
   （同梱で開いている間、TOP側の本文は .wrapeer ごと display:none なので、
   器の上に残る流れの要素は無く、単独ページと同じ座標系になる。） */
@media screen and (min-width: 481px) {
  body.fp-captured-layout header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 90;
    pointer-events: none !important;
  }
  body.fp-captured-layout header a,
  body.fp-captured-layout header button { pointer-events: auto; }
  body.fp-captured-layout { padding-top: 0 !important; }
  body.fp-captured-layout h3.head {
    /* 横長時は見出しをロゴの下端より上に収める。 */
    margin-top: clamp(80px, 5vw, 120px) !important;
  }
  /* **ロゴの背に上限を付ける**（利用者の指示・2026-08-20
     「ロゴがぶつからないよう調整してくれ」）。

     この画面だけヘッダーを position:absolute にしているため、ロゴは
     本文の高さを押し下げない。縦に長いロゴ（3行ぶんの背があるもの）だと
     下端が本文まで届き、「ダウンロード可能数」の帯に重なっていた。
     見出しは中央、ロゴは左なので横には当たらず、当たるのは**横いっぱいの
     帯**だけ。

     本文が空ける高さは上の clamp(80px,5vw,120px)。ロゴの上端は
     ヘッダーの余白ぶん約45px 下から始まるので、96px までに抑えれば
     下端は約141pxで、帯の手前で止まる。
     object-fit:contain なので、上限に当たっても縦横比は崩れない。 */
  body.fp-captured-layout .header-title .pc img {
    max-height: 96px;
    object-fit: contain;
    object-position: left center;
  }
}
/* スマホでは共通ヘッダーの下余白がそのまま見出し前に残るため、
   撮影一覧だけは詰めて見出しをヘッダー直下に置く。 */
@media screen and (max-width: 480px) {
  body.fp-captured-layout .header-wrap {
    margin-bottom: 0 !important;
  }
  body.fp-captured-layout h3.head {
    margin-top: 0 !important;
  }
}