/*
 * FP(FunPhotos) スタイル 3/4 ―― 画面と演出
 *
 * prototype-otanoshimi.css（7,586行）を4つに割ったうちの 3つめ
 * （2026-08-26 のリファクタリング。**中身は1文字も変えていない** ――
 * 4つをこの順に連結すると、割る前のファイルと一致する）。
 *
 * **読み込み順が意味を持つ。** 後ろの規則が前を上書きしている箇所が
 * 実在するので、hs_fp_head() は必ずこの順で4つの <link> を出す:
 *   1. fp-base.css    …… 土台。box-sizing の一覧・帯・撮影一覧・お試し
 *   2. fp-shop.css    …… 購入モーダル（従来と v2 の枠）
 *   3. fp-screens.css …… TOP反映・撮影開始/再生中/現像の演出・ご注意
 *   4. fp-late.css    …… あとから重ねた調整と上書き。**必ず最後**
 * 順を変えたいときは、先に該当の規則を1ファイルへ寄せてから。
 */
/* =========================================================
   TOPページ 修正指示（資料 P「トップページ 修正指示」）
   ========================================================= */

/* --- 5. シャッター残数をバー(ゲージ)形式で見せる --- */
#fp-shutter-bar .fp-gauge {
  /* 本数が多くても省略せず全部見せる。固定幅の目盛りを折り返して並べるので、
     何本になっても太さが揃い、カード内に収まる。 */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 5px;
  flex: 0 1 100%;
  width: 100%;
  max-width: 100%;    /* カード幅いっぱいまで使って本数を見やすく */
  margin: 6px auto 0;
  /* 目盛りを伸ばすので、端が枠の罫線に触れないよう内側に余白を持たせる */
  padding: 0 2px;
  box-sizing: border-box;
}
#fp-shutter-bar .fp-gauge i {
  display: block;
  /* **左右いっぱいまで伸ばす**（利用者の指示・2026-08-14）。
     以前は 18px 固定で、本数が少ないと中央に小さくまとまり、
     枠の左右が大きく空いて「何かが欠けている」ように見えた。
     1本あたりの幅を残数で割り当てれば、何本でも帯の幅を使い切る。
     min-width で細くなりすぎるのを止め、多いときは折り返しに任せる。 */
  flex: 1 1 0;
  min-width: 10px;
  max-width: 40px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  transition: background .25s ease, box-shadow .25s ease;
}
/* 埋まっている本数はゴールドで示す（当たり要素と同じ色系で統一） */
#fp-shutter-bar .fp-gauge i.is-on {
  background: linear-gradient(180deg, #ffe9a8, #e8b44a);
  box-shadow: 0 0 8px rgba(232, 180, 74, .55), inset 0 0 0 1px rgba(255, 255, 255, .35);
}
/* 「撮り直しはできません」の一文 */
#fp-shutter-bar .fp-gauge-note {
  flex-basis: 100%;
  text-align: center;
  font-size: 11px;
  opacity: .6;
}

/* 残0のときはゲージを赤系にして、撮れない状態だと分かるようにする */
#fp-shutter-bar.is-empty .fp-gauge i,
#fp-shutter-bar.is-empty .fp-gauge .fp-gauge-track { box-shadow: inset 0 0 0 1px rgba(255, 120, 120, .45); }

@media (max-width: 768px) {
  /* 注記は折り返し行に置くため、1行固定を解除する */
  #fp-shutter-bar { flex-wrap: wrap; white-space: normal; }
  #fp-shutter-bar .fp-gauge { gap: 5px 4px; }
  #fp-shutter-bar .fp-gauge i { width: 12px; height: 7px; }
  #fp-shutter-bar .fp-gauge-note { font-size: 10px; }
}

/* --- 6. ラインナップの一部公開（扇形に重ねたカード） --- */
.lp-lineup {
  width: min(92%, 560px);
  margin: 6px auto 26px;
  text-align: center;
  font-family: "M PLUS 2", sans-serif;
  color: #fff;
}
.lp-lineup-head {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: 14px;
}
.lp-lineup-fan {
  position: relative;
  height: 128px;
  margin: 0 auto;
  width: 100%;
  max-width: 340px;
}
.lp-lineup-card {
  position: absolute;
  top: 8px;
  left: 50%;
  width: 84px;
  height: 104px;
  margin-left: -42px;
  border-radius: 8px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  transform-origin: 50% 120%;
}
.lp-lineup-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 扇形に広げる。中央(2枚目)だけ前面・大きめ・金枠で目立たせる。 */
.lp-lineup-card-0 { transform: rotate(-14deg) translateX(-64px); z-index: 1; }
.lp-lineup-card-2 { transform: rotate(14deg)  translateX(64px);  z-index: 1; }
.lp-lineup-card.is-center {
  transform: scale(1.12);
  z-index: 3;
  border-color: #e8b44a;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .45), 0 0 14px rgba(232, 180, 74, .5);
}
.lp-lineup-note {
  margin-top: 12px;
  font-size: 12px;
  opacity: .75;
  line-height: 1.7;
}
@media (max-width: 480px) {
  .lp-lineup-fan { height: 118px; max-width: 300px; }
  .lp-lineup-card { width: 74px; height: 92px; margin-left: -37px; }
  .lp-lineup-card-0 { transform: rotate(-14deg) translateX(-54px); }
  .lp-lineup-card-2 { transform: rotate(14deg)  translateX(54px); }
  .lp-lineup-head { font-size: 14px; }
}

/* --- 7. CTAを2段階に（メイン=ゴールド / 既存=アウトライン調） --- */
.lp-buttons .lp-btn-primary {
  background: linear-gradient(135deg, #f5c451, #e0952a) !important;
  border-color: #f0c463 !important;
  color: #241a05 !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 18px rgba(224, 149, 42, .38);
}
.lp-buttons .lp-btn-primary span,
.lp-buttons .lp-btn-primary div { color: #241a05 !important; }
.lp-buttons .lp-btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.45) !important;
  box-shadow: none !important;
  opacity: .9;
}

/* =========================================================
   撮影開始演出（資料「撮影開始演出 実装指示」＋共有モックアップ準拠）
   進行: 巻き上げ → 会場名 → Are you ready? →
         カウントダウン(3/2/1) → フラッシュ → ピント合わせ → 再生開始
   ポイント: カウントダウンまでは真っ黒の上で見せ、映像は
             フラッシュの白に隠れて現れる（それまで映像を見せない）。
   ========================================================= */
#fp-intro {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background: transparent;          /* 暗さは .fp-intro-black が受け持つ */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Chakra Petch", "M PLUS 2", sans-serif;
  color: #fff;
}

/* 暗転。カウントダウンが終わるまで保ち、フラッシュの白に隠れて一気に外す
   （ゆっくり抜くと白が引いたあとも薄暗く残るため、切り替えは即時）。 */
#fp-intro .fp-intro-black {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 1;
}
#fp-intro.is-revealed .fp-intro-black { opacity: 0; }

/* 1. フィルムの巻き上げ: コマ送りのような縦線が画面を一瞬で横切る。
   （以前は静止した縦線がフェードするだけで、動きが無く見えなかった） */
#fp-intro .fp-intro-film {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  transition: opacity .1s ease;
}
#fp-intro .fp-intro-film i { display: none; }   /* 旧マークアップの縦線は使わない */
#fp-intro .fp-intro-film::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200%;
  /* コマの区切り線(明)と、コマ間のうっすらした帯で「フィルム」に見せる */
  background:
    repeating-linear-gradient(90deg,
      rgba(255, 255, 255, .30) 0 2px,
      rgba(255, 255, 255, .05) 2px 8px,
      transparent 8px 26vw);
}
#fp-intro.is-film .fp-intro-film { opacity: 1; }
#fp-intro.is-film .fp-intro-film::before { animation: fpFilmWind .32s linear both; }
@keyframes fpFilmWind {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }   /* 0.3秒で画面1枚ぶん横切る */
}

/* 縦向きに巻き上げる形（横線が下から上へ流れる）。
   PCの指定と、**縦のセッション**（.is-vert）で使う。
   キーフレームはメディアクエリの外に置く ―― 中に置くと、その条件の
   ときしか名前が引けず、スマホの縦セッションで効かない。 */
@keyframes fpFilmWindV {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }   /* 0.3秒で画面1枚ぶん上へ巻き上がる */
}
/* 縦のセッションでは、スマホでも下から上へ巻き上げる
   （利用者の指示・2026-08-20）。縦の映像は画面いっぱいに縦長で出るので、
   横へ流れるフィルムだと動きの向きが映像と合わない。 */
#fp-intro.is-vert .fp-intro-film::before {
  top: 0;
  bottom: auto;
  left: 0;
  right: 0;
  width: auto;
  height: 200%;
  background:
    repeating-linear-gradient(180deg,
      rgba(255, 255, 255, .30) 0 2px,
      rgba(255, 255, 255, .05) 2px 8px,
      transparent 8px 26vh);
}
#fp-intro.is-vert.is-film .fp-intro-film::before { animation-name: fpFilmWindV; }

/* PC: フィルムは縦方向に巻き上がる（横線が下から上へ流れる） */
@media (min-width: 900px) {
  #fp-intro .fp-intro-film::before {
    top: 0;
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 200%;
    background:
      repeating-linear-gradient(180deg,
        rgba(255, 255, 255, .30) 0 2px,
        rgba(255, 255, 255, .05) 2px 8px,
        transparent 8px 26vh);
  }
  /* キーフレーム（fpFilmWindV）はメディアクエリの外に置いてある */
  #fp-intro.is-film .fp-intro-film::before { animation-name: fpFilmWindV; }
}

/* 会場名（あるときだけ） */
#fp-intro .fp-intro-venue {
  position: absolute;
  color: #8f97d8;
  font-size: 12px;
  letter-spacing: 1px;
  opacity: 0;
  transition: opacity .3s ease;
}
#fp-intro.is-venue .fp-intro-venue { opacity: 1; }

/* 2. 「Are you ready?」: 大きめに、1文字ずつ現れる */
#fp-intro .fp-intro-ready {
  position: absolute;
  font-size: clamp(28px, 8.4vw, 46px);
  font-weight: 700;
  letter-spacing: 2px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .55);
  opacity: 0;
  transition: opacity .2s ease;
}
#fp-intro.is-ready .fp-intro-ready { opacity: 1; }
#fp-intro .fp-intro-ready i {
  display: inline-block;
  font-style: normal;
  opacity: 0;
  transform: translateY(8px);
}
#fp-intro.is-ready .fp-intro-ready i { animation: fpReadyChar .26s ease forwards; }
@keyframes fpReadyChar {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* 3. シネマ風カウントダウン（円＋十字線＋一周するライン） */
#fp-intro .fp-intro-count {
  position: absolute;
  width: 168px;
  height: 168px;
  opacity: 0;
  transition: opacity .25s ease;
}
#fp-intro.is-count .fp-intro-count { opacity: 1; }
#fp-intro .fp-intro-count svg { width: 100%; height: 100%; }
#fp-intro .fp-cd-ring  { fill: none; stroke: #4a4a4a; stroke-width: 1.5; }
#fp-intro .fp-cd-cross { stroke: #4a4a4a; stroke-width: 1; }
#fp-intro .fp-cd-sweep {
  fill: none;
  stroke: #F2C14E;
  stroke-width: 3;
  stroke-dasharray: 376.99;
  stroke-dashoffset: 376.99;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
/* 数字が切り替わるごとにラインが円周を一周する */
#fp-intro .fp-intro-count.is-tick .fp-cd-sweep { animation: fpSweep .7s linear 1 both; }
@keyframes fpSweep { from { stroke-dashoffset: 376.99; } to { stroke-dashoffset: 0; } }
/* 音量の注意（利用者の指示・2026-08-20）。カウントダウンの円（168px）の
   下に置く ―― 中央そろえの入れ物なので、円の半分＋すき間ぶんだけ下げる。
   演出の主役ではないので、白の細字にとどめて数字の邪魔をしない。

   **出すのはカウントダウン（3・2・1）の間だけ**（利用者の指示・2026-08-20
   「音量の忠告はカウントダウンのときだけでる」）。巻き上げ〜Are you ready?
   の間はロード待ちで長く留まることがあり、そこから出しっぱなしにすると
   注意書きのほうが主役に見える。数字と一緒に出て、数字と一緒に消す。 */
#fp-intro .fp-intro-note {
  position: absolute;
  transform: translateY(118px);
  max-width: min(86vw, 420px);
  text-align: center;
  font-size: clamp(11px, 3.2vw, 13px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .02em;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .8);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
/* is-count はカウントダウンの数字が出ている間だけ付く（tick で付け、
   countOut で外す）。フラッシュ・ピント合わせのときには既に外れている。 */
#fp-intro.is-count .fp-intro-note { opacity: .85; }
#fp-intro.is-flash .fp-intro-note,
#fp-intro.is-focus .fp-intro-note { opacity: 0; }

#fp-intro .fp-cd-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 52px;
  font-weight: 700;
}

/* 1のタイミングで「のこり◯枚」を小さく再掲 */
#fp-intro .fp-intro-left {
  position: absolute;
  bottom: 30%;
  font-size: 11px;
  color: #9aa1d9;
  opacity: 0;
  transition: opacity .3s ease;
}
#fp-intro .fp-intro-left.is-in { opacity: 1; }

/* 4. フラッシュ */
#fp-intro .fp-intro-flash {
  position: absolute;
  inset: 0;
  background: #fff;
  opacity: 0;
  transition: opacity .4s ease;
}
#fp-intro.is-flash .fp-intro-flash { opacity: 1; transition: opacity .06s linear; }
#fp-intro.is-focus .fp-intro-flash { opacity: 0; transition: opacity .4s ease; }

/* ビューファインダー枠は使わない。
   「四隅マークがアニメーションで現れて残る」演出は、常設マーク(#marks)自身を
   動かして表現する（下の fp-marks-hold）。別要素で位置・サイズを模倣すると
   どうしても差が出るため、最終状態＝常設マークそのものにする。 */
#fp-intro .fp-intro-finder { display: none; }

/* 演出中は TAP TO START も出さない（オーバーレイ自動開始で演出が先に走るときのため） */
body.fp-intro-running #taptostart { display: none !important; }

/* 常設の四隅マーク: カウントダウン中は隠し、ピント合わせの瞬間に
   四隅が画面の外からスッと入ってきて定位置に止まる。
   動かすのは常設マーク自身なので、着地位置・長さ・太さは必ず一致する。
   （#marks 自体には transform をかけない。サイズ0のコンテナに transform を
     かけると、絶対配置の子マークの基準が変わって位置が崩れるため） */
body.fp-marks-hold #marks .mark { opacity: 0; }

body.fp-marks-in #marks .mark {
  animation-duration: .62s;
  animation-timing-function: cubic-bezier(.2, 1.05, .3, 1);
  animation-fill-mode: both;
}
body.fp-marks-in #marks .mark:nth-child(1) { animation-name: fpMarkInTL; }
body.fp-marks-in #marks .mark:nth-child(2) { animation-name: fpMarkInTR; }
body.fp-marks-in #marks .mark:nth-child(3) { animation-name: fpMarkInBL; }
body.fp-marks-in #marks .mark:nth-child(4) { animation-name: fpMarkInBR; }
@keyframes fpMarkInTL {
  from { opacity: 0; transform: translate(-14vmax, -14vmax); }
  to   { opacity: 1; transform: none; }
}
@keyframes fpMarkInTR {
  from { opacity: 0; transform: translate(14vmax, -14vmax); }
  to   { opacity: 1; transform: none; }
}
@keyframes fpMarkInBL {
  from { opacity: 0; transform: translate(-14vmax, 14vmax); }
  to   { opacity: 1; transform: none; }
}
@keyframes fpMarkInBR {
  from { opacity: 0; transform: translate(14vmax, 14vmax); }
  to   { opacity: 1; transform: none; }
}

/* ---------------- オーバーレイ・プレイヤー（ページ遷移なし） ---------------- */
#fp-frame-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483600;   /* すべてのモーダルより上（プレイヤーが全画面を占有） */
  background: #000;
}
#fp-frame-overlay iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
body.fp-overlay-open { overflow: hidden !important; }

/* SPA同梱プレイヤー（TOPページ内に非表示で持っておき、タップで全画面に開く） */
#fp-spa { display: none; }
#fp-spa.is-open {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2147483600;
  background: #000;
}
body.fp-spa-open { overflow: hidden !important; }

/* SPA同梱の撮影一覧（TOPに非表示で持っておき、タップでその場で開く）。
   プレイヤーの同梱（#fp-spa）と同じ作りだが、こちらは写真を見る場所なので
   背景はサイトの地色のまま、中身は縦にスクロールさせる。 */
#fp-captured-spa { display: none; }
/* **画面全体を覆わない。** 以前は position:fixed のオーバーレイで、本物の
   ヘッダーまで覆ってしまい、写しのヘッダーで補っていた ―― 実機で写しが
   出ない報告が続いたため、器は**普通の流れ**に置く（2026-08-18）。
   本物のヘッダー・フッター・サイトの背景がそのまま残るので、
   背景色やヘッダーの写しの手当てはすべて不要になった。 */
#fp-captured-spa.is-open {
  display: block;
  /* 開くときはすっと浮かび上がる。閉じるのは即時（戻る操作の応答を鈍らせない） */
  animation: fpCapturedIn .26s cubic-bezier(.2, .8, .3, 1);
}
/* **transform を使わない**（利用者の報告・2026-08-18
   「SPAは画面切り替え時に、一瞬スペシャルグッズがみえてしまう」）。

   以前は translateY で下から持ち上げていたが、transform の掛かった要素は
   その中の position:fixed の**基準（包含ブロック）になる**。この器の中には
   撮影一覧の固定フッター（#fixedfooter＝スペシャルグッズの購入帯）が入っていて、
   ふだんは画面の外（bottom:0 から translateY(100%)）に停めてある ――
   基準が画面から器に移った瞬間、その「外」が器のすぐ下＝**画面の中**になり、
   開く0.26秒のあいだだけ顔を出していた。CLAUDE.md の定石2そのもの。

   持ち上げをやめて淡く出すだけにすれば包含ブロックは作られず、固定フッターは
   画面基準のまま（＝停めた位置のまま）で居る。 */
@keyframes fpCapturedIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #fp-captured-spa.is-open { animation: none; }
}
/* 開いている間、TOPの本文だけを隠す（.wrapeer はTOP本文の外枠。
   器はその外＝兄弟に居るので、これで器まで消えることはない）。 */
body.fp-captured-spa-open .wrapeer { display: none !important; }

/* 閉じる。同梱ではヘッダーが付かない（テンプレートが別に出しているため）ので、
   戻る手段をこちらで用意する。ブラウザの「戻る」でも閉じられる。 */
#fp-captured-spa-close {
  position: sticky;
  top: 8px;
  left: 8px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 8px 0 0 8px;
  padding: 8px 14px 8px 10px;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
#fp-captured-spa-close .material-symbols-outlined { font-size: 18px; }

/* プレイヤー表示中は、画面の外側（横持ちのセーフエリア等＝canvas）も黒にする。
   canvasの色は html / body の背景から採られるため、両方を黒で固定する */
body.fp-spa-open { background: #000 !important; }
html:has(body.fp-spa-open) { background: #000 !important; }

/* SPA自動開始中は TAP TO START を出さない（表示せず始まるなら不要）。
   音あり再生がブロックされたとき(fp-spa-blocked)だけ従来どおり出す。 */
body.fp-spa-open:not(.fp-spa-blocked) #taptostart { display: none !important; }

/* 演出中は周辺UI（戻る・タイムコード・撮影ボタン・ヒートバー等）を引っ込め、
   カウントダウンが終わった瞬間（ピント合わせ）にすっとフェードインで復帰させる。 */
body.fp-intro-running #headerControl,
body.fp-intro-running #footerControl,
body.fp-intro-running #buttonCapture,
body.fp-intro-running #fp-heat {
  opacity: 0 !important;
  pointer-events: none !important;
  /* **隠すときは一瞬で**（利用者の報告・2026-08-23「カウントダウンが
     始まる前にこれがちらつく」）。下の .4s は**戻るとき**のためのもの
     だが、付けたままだと隠すときも 0.4秒かけて薄れていき、演出の黒が
     重なるより先に見えてしまうことがある（2回目の再生ではタイムコードや
     ヒートバーに中身が入っているので目立つ）。
     この行を外すと、クラスを外した瞬間は下の transition が復活するので、
     復帰のフェードインは今までどおり。 */
  transition: none !important;
}
#headerControl, #footerControl, #buttonCapture, #fp-heat { transition: opacity .4s ease; }

/* **演出のあいだは、プレイヤーの飾りを層ごと見せない**（利用者の報告・
   2026-08-23「Are you ready とシャッターが回転する間にまだチラツキがあります」）。

   上の4つ（戻る・タイムコード・シャッター・ヒートバー）以外 ――
   IDバッジ（#display-user-id）・四隅マーク（#marks）・印画紙の飾りなどは、
   これまで**演出の黒に隠れている前提**だった。iOS は合成レイヤの描画順が
   ばらつき、黒より飾りが先に描かれる（＝黒の上に一瞬見える）ことがある。
   黒に頼らず、#base の中の飾りの層（.overlay）をまとめて隠す。

   **video は隠さない** ―― フラッシュの瞬間に黒の下から現れる本体。
   演出の要素（#fp-intro）は #base の外なので巻き込まない。
   復帰は runFocus が fp-intro-running を外した瞬間 ―― visibility は
   すぐ戻り、opacity が下の transition で 0.4秒かけて明ける（今までどおり
   フェードインに見える）。 */
body.fp-intro-running #base > .overlay {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: none !important;
}
#base > .overlay { transition: opacity .4s ease, visibility 0s; }

/* 演出中の video の隠し（opacity 0）は**撤回した**（2026-08-24）。
   iOS は見えない動画の読み込み・再生を制限することがあり、演出後の
   音あり再生が拒否されて TAP TO START に落ちる退行が出た
   （利用者の報告「tap to startが出てしまって自動再生されない」）。
   音あり再生は製品の前提（CLAUDE.md）なので、映像はもともとの設計
   どおり**演出の黒に隠れる**形に戻す。 */

/* 5. シャッターボタンの脈動は、ヒートバーがゴールドの間だけ（.fp-hotpulse）。
      常時跳ねさせると「いま押すと良い」の合図にならないため、ここでは付けない。 */

/* =========================================================
   動画再生中の演出（資料「動画再生中の演出 実装指示」）
   ========================================================= */
#fp-heat {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translateX(-50%);
  width: min(88%, 520px);
  z-index: 60;
  pointer-events: none;
  font-family: "M PLUS 2", sans-serif;
  color: #fff;
  text-align: center;
}
#fp-heat .fp-heat-label {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
  font-size: 10.5px;
  margin: 0 0 6px;
}
/* バーの地は暗いネイビー。中身をぼかして「傾向」に見せる（正確な位置を示さない）。 */
#fp-heat .fp-heat-bar {
  position: relative;
  /* 22px は太すぎた（利用者の指示・2026-08-20「ヒートバーの高さはもっと
     小さくても良い」）。中身はぼかした「傾向」なので、細くても読める。
     PC(900px以上)・横持ち・回転表示はそれぞれ別の値を持っている。 */
  height: 14px;
  border-radius: 999px;   /* 左右は完全な角丸 */
  overflow: hidden;
  background: #1a1f4a;
  /* 薄い罫線でエッジが背景に溶け込まないようにする */
  border: 1px solid rgba(255, 255, 255, .25);
}
#fp-heat .fp-heat-fill {
  position: absolute;
  inset: 0;
  filter: blur(3px);
}
/* PCはバーをもう少し細く。シャッターボタンと注記が重ならない範囲で下寄せ */
@media (min-width: 900px) {
  #fp-heat { bottom: 120px; }
  #fp-heat .fp-heat-bar { height: 14px; }
}

/* 縦の映像をスマホで見るとき、フキダシ（残り回数）は**シャッターの右横**に置く
   （利用者の指示・2026-08-20「スマホでverticalのとき、カメラの横にフキダシが
   でるようにして」「右側」）。

   もともとはボタンの真上に出していたが、縦の映像は #fp-heat を回さない
   （横向きの映像は90度回して画面の右端へ逃がす）ため、ヒートバーと
   同じ場所に来て重なっていた。横へ出せば重ならないので、バーの位置は
   既定（下から92px）のままでよい。

   置き方と尻尾の向きはPC（769px以上）と同じ。値もそちらと対にしてある。
   ・横持ち(max-height:500px)はボタンごと右端へ寄せる別の置き方なので外す
   ・回転表示(fp-rotated)は横向きの映像＝hs-vertical が付かないので当たらない */
@media (max-width: 768px) and (min-height: 501px) {
  body.hs-vertical #buttonCapture #fp-shots {
    bottom: auto;
    right: auto;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%);
  }
  /* 尻尾を左向きにする。基本ルールが border-bottom-width:0 にしているので、
     ここで上下の枠幅を戻さないと三角形が崩れて下向きに見える。 */
  body.hs-vertical #buttonCapture #fp-shots::after {
    top: 50%;
    left: auto;
    right: 100%;
    bottom: auto;
    transform: translateY(-50%);
    border-style: solid;
    border-color: transparent;
    border-top-width: 7px;
    border-bottom-width: 7px;
    border-left-width: 0;
    border-right-width: 7px;
    border-right-color: #fff;
    border-top-color: transparent;
  }
}

/* スマホの横持ち（縦が短い画面）: カメラのようにシャッターは右端・縦中央に置き、
   バーは下寄せで細く。残数バッジはボタンの左隣。 */
@media (max-height: 500px) {
  #buttonCapture {
    left: auto !important;
    right: calc(25px + env(safe-area-inset-right, 0px)) !important;
    top: 50% !important;
    transform: translateY(-50%);
  }
  /* 回転して見せているとき（縦動画を横持ち）は、要素の右端が**画面の上端**を
     向く ―― 逃がす先が違うので safe-area の取り口も変える
     （利用者の報告・2026-08-29「シャッターがみえない?」）。 */
  body.fp-rotated #buttonCapture {
    right: calc(25px + env(safe-area-inset-top, 0px)) !important;
  }
  /* フキダシはシャッターの真上（尻尾は下向きでボタンを指す） */
  #fp-shots {
    bottom: calc(100% + 14px);
    top: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
  #fp-shots::after {
    top: 100%;
    bottom: auto;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-style: solid;
    border-color: transparent;
    border-top-width: 7px;
    border-bottom-width: 0;
    border-left-width: 7px;
    border-right-width: 7px;
    border-top-color: #fff;
    border-right-color: transparent;
  }
  #fp-heat { bottom: 46px; width: min(70%, 640px); }
  #fp-heat .fp-heat-bar { height: 10px; }
  #fp-heat .fp-heat-label { font-size: 9px; margin-bottom: 3px; }
  #fp-heat .fp-heat-note  { font-size: 8.5px; margin-top: 2px; }
}
/* 現在の再生位置 */
#fp-heat .fp-heat-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: #fff;
  transition: left .1s linear;
}
#fp-heat .fp-heat-note {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
  font-size: 10px;
  margin-top: 5px;
  opacity: .85;
}

/* ヒートゾーン中: タイムコードをオレンジに固定する。
   パルスは入った瞬間の一発だけ（.fp-hotflash 側で 1.3倍・0.3秒）。
   滞在中に脈を打ち続けると騒がしいため、色とにじみだけで示す。 */
body.fp-hot .timecode,
body.fp-hot #timecode {
  color: #ffa23a !important;
  text-shadow: 0 0 14px rgba(255, 162, 58, .8), 0 1px 3px rgba(0, 0, 0, .9);
}

/* 終了間際の警告 */
#fp-endsoon {
  position: fixed;
  left: 50%; top: 46px;
  transform: translateX(-50%);
  z-index: 61;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(180,30,30,.72);
  font-family: "M PLUS 2", sans-serif;
  font-size: 12px;
  color: #fff;
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
#fp-endsoon.is-in { opacity: 1; }
/* タイムコードを赤系に（ヒートゾーンと重なるときはゴールドの点滅を優先） */
body.fp-endsoon-on:not(.fp-hot) .timecode,
body.fp-endsoon-on:not(.fp-hot) #timecode { color: #ff8f8f !important; }

/* =========================================================
   動画終了時モーダル（資料「動画終了時モーダル 実装指示」）
   ========================================================= */
.fp-endmodal .fp-trial-lead { line-height: 1.9; }
.fp-btn-gold {
  background: linear-gradient(135deg, #f5c451, #e0952a) !important;
  color: #241a05 !important;
  border: 0 !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 18px rgba(224,149,42,.38);
}
.fp-btn-outline {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.5) !important;
  font-weight: 600 !important;
}
.fp-btn-outline[disabled],
.fp-btn-gold[disabled] { opacity: .45; }

/* =========================================================
   シャッター撮影時の演出（資料「シャッター撮影時の演出 実装指示」）
   ========================================================= */
#fp-capfx {
  position: fixed; inset: 0;
  z-index: 9997;
  pointer-events: none;
  opacity: 0;
}
#fp-capfx.is-firing { opacity: 1; }

/* 撮影の遮蔽は「丸いマスク」ではなく、実機のシャッター羽根(#hane)が閉じる動きで表す。
   丸マスクは使わないので、要素は残しつつ描画しない（閉じきった瞬間の白フラッシュだけ担当）。 */
#fp-capfx .fp-capfx-iris {
  position: absolute; inset: 0;
  background: #fff;
  opacity: 0;
}
#fp-capfx.is-firing .fp-capfx-iris { animation: fpShutterFlash .42s linear 1 both; }
@keyframes fpShutterFlash {
  0%, 30% { opacity: 0; }
  34%     { opacity: .85; }   /* 羽根が閉じきるタイミングで一瞬光る */
  48%     { opacity: 0; }
  100%    { opacity: 0; }
}

/* スピードライン: 中心から放射状に一瞬広がって消える */
#fp-capfx .fp-capfx-lines {
  position: absolute; inset: 0;
  background: repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,255,255,.55) 0deg 1.2deg, rgba(255,255,255,0) 1.2deg 9deg);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 22%, #000 60%);
          mask-image: radial-gradient(circle at 50% 50%, transparent 22%, #000 60%);
  opacity: 0;
}
#fp-capfx.is-firing .fp-capfx-lines { animation: fpLines .34s ease-out .12s 1 both; }
@keyframes fpLines {
  0%   { opacity: 0;  transform: scale(.5); }
  30%  { opacity: .9; }
  100% { opacity: 0;  transform: scale(1.5); }
}

/* ビューファインダー枠が一瞬小さくなってから戻る（ピントが合う動き） */
#fp-capfx .fp-capfx-finder { position: absolute; inset: 0; }
#fp-capfx .fp-capfx-finder i {
  position: absolute; width: 30px; height: 30px;
  border: 2px solid rgba(255,255,255,.85);
}
#fp-capfx .fp-capfx-finder i:nth-child(1) { top: 10%;    left: 10%;  border-right: 0; border-bottom: 0; }
#fp-capfx .fp-capfx-finder i:nth-child(2) { top: 10%;    right: 10%; border-left: 0;  border-bottom: 0; }
#fp-capfx .fp-capfx-finder i:nth-child(3) { bottom: 10%; left: 10%;  border-right: 0; border-top: 0; }
#fp-capfx .fp-capfx-finder i:nth-child(4) { bottom: 10%; right: 10%; border-left: 0;  border-top: 0; }
#fp-capfx.is-firing .fp-capfx-finder { animation: fpFinderSnap .36s cubic-bezier(.3,1.4,.4,1) 1 both; }
@keyframes fpFinderSnap {
  0%   { transform: scale(1);   opacity: .95; }
  45%  { transform: scale(.9);  opacity: 1; }
  100% { transform: scale(1);   opacity: 0; }
}

/* 「CAPTURE.」の一言（英字タイポが鋭く一瞬） */
#fp-capfx .fp-capfx-word {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: "Chakra Petch", sans-serif;
  font-size: clamp(22px, 7vw, 44px);
  font-weight: 700;
  letter-spacing: .16em;
  color: #fff;
  text-shadow: 0 0 18px rgba(0,0,0,.6);
  opacity: 0;
}
/* 「CAPTURE.」はしっかり読める長さで出す（出現→保持→ゆっくり消える） */
#fp-capfx.is-firing .fp-capfx-word { animation: fpWord 1.15s ease-out .1s 1 both; }
@keyframes fpWord {
  0%   { opacity: 0; transform: scale(1.18) skewX(-8deg); }
  12%  { opacity: 1; transform: scale(1)    skewX(0deg); }
  62%  { opacity: 1; transform: scale(1); }      /* しばらく表示したまま */
  100% { opacity: 0; transform: scale(.98); }
}
/* 回転表示中は「CAPTURE.」も映像に合わせて回す。
   #fp-capfx は body 直下（#base の外）にあり一緒に回らないため、
   回転を織り込んだ専用キーフレームに差し替える。 */
body.fp-rotated #fp-capfx.is-firing .fp-capfx-word { animation-name: fpWordRot; }
@keyframes fpWordRot {
  0%   { opacity: 0; transform: rotate(-90deg) scale(1.18) skewX(-8deg); }
  12%  { opacity: 1; transform: rotate(-90deg) scale(1)    skewX(0deg); }
  62%  { opacity: 1; transform: rotate(-90deg) scale(1); }
  100% { opacity: 0; transform: rotate(-90deg) scale(.98); }
}

/* ズームパンチ: 映像全体が一瞬グッと寄って戻る */
.fp-zoompunch { animation: fpZoomPunch .4s cubic-bezier(.3,1.3,.4,1) 1; }
@keyframes fpZoomPunch {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ボタンの微振動（押し込まれた状態を維持したままジッター） */
#buttonCapture.fp-jitter { animation: fpJitter .3s steps(2, jump-none) 3; }
@keyframes fpJitter {
  0%   { transform: scale(.94) translate(0, 0); }
  50%  { transform: scale(.94) translate(1.5px, -1px); }
  100% { transform: scale(.94) translate(-1.5px, 1px); }
}

/* 残り1回になったら、ゴールド → アイシーホワイト（0.4秒でフェード）に変えて維持。
   brightness を上げすぎるとカメラのアイコンまで白飛びして見えなくなるため、
   彩度だけ落として明るさは据え置き、アイコンが判別できる濃さを保つ。 */
#buttonCapture.fp-last {
  filter: saturate(.18) brightness(.92) contrast(1.15);
  box-shadow: 0 0 0 2px rgba(226,244,255,.9), 0 0 22px rgba(200,232,255,.75) !important;
  transition: filter .4s ease, box-shadow .4s ease;
}

/* =========================================================
   現像完了のキラキラ（資料「現像・キラキラ演出 実装指示(最終版)」）
   ========================================================= */
.fp-sparkle {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 6;
}
.fp-sparkle i {
  position: absolute;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  background:
    radial-gradient(circle, rgba(255,255,255,.98) 0 18%, rgba(255,255,255,0) 60%),
    conic-gradient(from 0deg, rgba(255,236,178,0) 0deg, rgba(255,236,178,.95) 90deg, rgba(255,236,178,0) 180deg);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  opacity: 0;
  transform: scale(var(--s, 1));
  animation: fpSparkle 1.1s ease-out var(--d, 0s) 1 both;
}
/* 当たりは持続時間を長くして、複数波が降り注いで見えるようにする */
.fp-sparkle.is-big i { animation-duration: 1.6s; }
@keyframes fpSparkle {
  0%   { opacity: 0; transform: scale(.2)  rotate(0deg); }
  30%  { opacity: 1; transform: scale(var(--s,1)) rotate(60deg); }
  100% { opacity: 0; transform: scale(.3)  rotate(160deg) translateY(-14px); }
}

/* 当たり: 背景からの光の広がり（グロー）＋ 写真の縁取り（ゴールド） */
.fp-special-glow {
  position: relative;
  box-shadow: 0 0 0 3px #e8b44a, 0 0 34px rgba(232,180,74,.75) !important;
  transition: box-shadow .5s ease;
}
/* 放射状の光芒は出さない方針（金縁とキラキラのみ）。 */
.fp-special-glow::after { content: none; }

/* =========================================================
   プラン選択モーダル（資料「プラン選択モーダル 実装指示」）
   ========================================================= */

/* 1. おすすめプランを一段目立たせる（ゴールドのバッジ＋金枠） */
.fp-plan { position: relative; }
.fp-plan.is-recommended {
  border-color: #e8b44a !important;
  box-shadow: 0 0 0 1px #e8b44a, 0 8px 22px rgba(232,180,74,.28);
}
.fp-plan-badge {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  padding: 2px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5c451, #e0952a);
  color: #111 !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(224,149,42,.4);
}

/* 3. ライト/スタンダード/プレミアムを横並びにする */
.fp-plans {
  display: flex;
  gap: 10px;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
}
.fp-plans .fp-plan { flex: 1 1 0; min-width: 96px; margin-top: 12px; }

/* 2. 「のこり◯回」を独立したカード状の背景で区切る。
      ただし金額を冷静に判断してもらう場面なので、煽らない抑えたトーンにする。 */
.fp-shop-balance {
  display: block;
  margin: 10px auto 4px;
  padding: 8px 14px;
  border-radius: var(--hs-radius-surface, 16px);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  font-size: 12px;
  opacity: .9;
  text-align: center;
}
.fp-shop-balance b { font-size: 15px; font-weight: 800; }

@media (max-width: 480px) {
  .fp-plans { gap: 8px; }
  /* 商品名を折り返さずに収めるため、左右の余白と字送りを詰める。
     「スタンダード」(6文字)が入る幅を確保するのが基準。 */
  .fp-plans .fp-plan { min-width: 0; padding: 14px 6px 15px; }
  .fp-plan-badge { font-size: 10px; padding: 2px 9px; }
  .fp-plan-name  { font-size: 11px; letter-spacing: 0; }
  .fp-plan .fp-plan-per { font-size: 10px; }
}

/* =========================================================
   TOPページ モックアップ反映（見た瞬間の印象を変える）
   ・ラベルはゴールドのピル
   ・シャッターは「見出し＋追加する／横長ゲージ／のこりN/M回」の3段
   ・ラインナップは5枚の扇形（中央だけ実物・金枠）
   ========================================================= */

/* 見出しの読点は半角幅に見せる。
   全角の「、」は後ろに大きな空きを持ち、大きな文字ほど間延びして見える。
   フォントの機能(halt)は字形を持たないフォントでは効かないため、
   出力時に包んだ span の右余白を詰めて確実に半角ぶんにする。 */
.fp-punct {
  display: inline-block;
  margin-right: -0.5em;
}

/* 見出し上のラベル（ゴールドのピル） */
.lp-editor-content h2 .lp-eyebrow {
  display: inline-block;
  padding: 3px 14px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f5c451, #e0952a);
  color: #241a05 !important;
  font-size: 12px !important;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.7;
  box-shadow: 0 3px 12px rgba(224, 149, 42, .35);
}

/* お楽しみ動画ガチャ（グッズ提供）のときは、バッジを紫地×白文字にする。
   フォト（金地×黒）と見た目で区別するための指定。判定は body.hs-fp-goods。
   文言(hs_experience_name)と同じくモードから自動で切り替わるので、
   管理画面で切り替えても直し漏れが起きない。上の #241a05 !important に
   勝たせるため body クラスで特異度を上げて !important を重ねる。
   LP v2 側の同名バッジ(lp2-eyebrow)は lp-styles.php に同じ指定がある。 */
body.hs-fp-goods .lp-editor-content h2 .lp-eyebrow {
  /* 指定色（マゼンタ寄りの紫）。LP v2 の lp2-eyebrow と同じ色にする。 */
  background: linear-gradient(135deg, #e83be0, #d726d0);
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(215, 38, 208, .35);
}

/* --- シャッター残数カード（モックアップの構成に合わせる） --- */
#fp-shutter-bar {
  display: block;                     /* 3段構成にするため flex を解除 */
  width: min(92%, 560px);
  padding: 14px 18px 12px;
  border-radius: var(--hs-radius-surface, 16px);
  /* 座布団は黒の半透明（背景色に左右されずコントラストを保つ・枠線なし） */
  background: rgba(0, 0, 0, .13);
  border: none;
  text-align: left;
}
#fp-shutter-bar .fp-shutter-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
#fp-shutter-bar .fp-dev-label {
  font-size: 12px;
  font-weight: 700;
  opacity: .8;
  letter-spacing: .02em;
}
/* 「追加する」はゴールドのゴーストボタン（モックアップ準拠）。
   動的配色(白 !important)に負けないよう色は !important で固定する。 */
#fp-shutter-bar .fp-dev-more {
  padding: 5px 16px;
  border-radius: 999px;
  border: 1px solid #e8b44a;
  background: transparent;
  color: #F2C14E !important;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
#fp-shutter-bar .fp-dev-more:hover { background: rgba(232, 180, 74, .14); }

/* ゲージ（本数が多いときは折り返して全部見せる。上の定義と整合させること。
   以前ここで flex:1 1 0 の等分にしていたため、本数が多いと1本が極細になり
   上の折り返し指定と食い違って表示が崩れていた） */
#fp-shutter-bar .fp-gauge {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 5px;
  width: 100%;
}
#fp-shutter-bar .fp-gauge i {
  flex: 0 0 auto;
  width: 18px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
}
#fp-shutter-bar .fp-gauge i.is-on {
  background: linear-gradient(180deg, #f5c451, #e0952a);
  box-shadow: 0 0 10px rgba(232, 180, 74, .5);
}
/* 買い足しで増えたぶんの目盛り（is-flash は ShutterBandBody が
   「いま増えた添字」にだけ付ける）。白く光ってから地の金色へ戻る。
   色そのものではなく filter で白飛びさせる ―― 地の色が
   グラデーションでもベタでも（is-dense でも）同じ書き方で効く。 */
#fp-shutter-bar .fp-gauge i.is-flash {
  animation: fp-pill-flash .7s ease-out;
}
@keyframes fp-pill-flash {
  0% {
    filter: brightness(3.2) saturate(.15);
    box-shadow: 0 0 16px rgba(255, 255, 255, .95), 0 0 4px rgba(255, 255, 255, .9);
  }
  45% {
    filter: brightness(2.2) saturate(.4);
    box-shadow: 0 0 12px rgba(255, 255, 255, .75);
  }
  100% {
    filter: brightness(1) saturate(1);
    box-shadow: 0 0 10px rgba(232, 180, 74, .5);
  }
}
@media (prefers-reduced-motion: reduce) {
  #fp-shutter-bar .fp-gauge i.is-flash { animation: none; }
}
/* 「のこり N/M回。撮り直しはできません。」は右寄せの小さな注記 */
#fp-shutter-bar .fp-gauge-note {
  margin-top: 8px;
  text-align: right;
  font-size: 11px;
  opacity: .7;
  flex-basis: auto;
}
#fp-shutter-bar .fp-gauge-note b { font-weight: 800; opacity: 1; }

@media (max-width: 768px) {
  #fp-shutter-bar { width: calc(100% - 20px); padding: 12px 14px 10px; }
  #fp-shutter-bar .fp-gauge i { width: 12px; height: 9px; }
}

/* --- ラインナップ: 5枚の扇形 --- */
.lp-lineup {
  padding: 18px 16px 16px;
  border-radius: var(--hs-radius-surface, 16px);
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
}
.lp-lineup-fan { height: 150px; max-width: 380px; }
.lp-lineup-card {
  width: 76px; height: 96px; margin-left: -38px;
  display: flex; align-items: center; justify-content: center;
}
/* 扇形の配置（外側ほど大きく傾け、奥に置く） */
.lp-lineup-card-0 { transform: rotate(-24deg) translateX(-118px) translateY(16px); z-index: 1; }
.lp-lineup-card-1 { transform: rotate(-12deg) translateX(-62px)  translateY(4px);  z-index: 2; }
.lp-lineup-card-2 { transform: scale(1.16);                                        z-index: 4; }
.lp-lineup-card-3 { transform: rotate(12deg)  translateX(62px)   translateY(4px);  z-index: 2; }
.lp-lineup-card-4 { transform: rotate(24deg)  translateX(118px)  translateY(16px); z-index: 1; }
/* 中央の1枚だけ色・枠を変えて目立たせる */
.lp-lineup-card.is-center {
  border-color: #e8b44a;
  background: linear-gradient(160deg, #5a4620, #2c2033);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .45), 0 0 16px rgba(232, 180, 74, .55);
}
.lp-lineup-spark {
  position: absolute;
  font-size: 22px;
  color: #ffd97a;
  text-shadow: 0 0 12px rgba(255, 217, 122, .9);
  pointer-events: none;
}
/* 実物が入っている中央カードでは、飾りの星は隠して写真を見せる */
.lp-lineup-card.is-center:not(.is-hidden) .lp-lineup-spark { display: none; }

@media (max-width: 480px) {
  .lp-lineup-fan { height: 138px; max-width: 320px; }
  .lp-lineup-card { width: 66px; height: 84px; margin-left: -33px; }
  .lp-lineup-card-0 { transform: rotate(-24deg) translateX(-100px) translateY(14px); }
  .lp-lineup-card-1 { transform: rotate(-12deg) translateX(-53px)  translateY(4px); }
  .lp-lineup-card-3 { transform: rotate(12deg)  translateX(53px)   translateY(4px); }
  .lp-lineup-card-4 { transform: rotate(24deg)  translateX(100px)  translateY(14px); }
}

/* --- CTA: メインを大きく・目立つ色に、既存は控えめに --- */
.lp-buttons .lp-btn-primary {
  border-radius: 999px !important;
  padding: 15px 24px !important;
  font-size: 16px !important;
}
.lp-buttons .lp-btn-ghost {
  border-radius: 999px !important;
  font-size: 13px !important;
  padding: 11px 20px !important;
}

/* =========================================================
   動画終了時モーダル（資料「動画終了時モーダル 実装指示」準拠）
   ・背景は視聴していた動画をぼかした状態で見せる
   ・モーダルは角丸カード、ダークブルー基調、右上に×
   ・メイン=ゴールド / サブ=アウトラインで主従をはっきり分ける
   ========================================================= */
#fp-autoshot-modal {
  /* 動画が透けるよう、覆いは薄めにしてぼかしを強くする */
  background: rgba(8, 12, 40, .55);
  backdrop-filter: blur(10px);
}
#fp-autoshot-modal .fp-endmodal {
  background: #141a4a;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--hs-radius-surface, 16px);
  padding: 30px 22px 22px;
  max-width: 340px;
  width: 100%;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  text-align: center;
}
#fp-autoshot-modal .fp-endmodal .fp-trial-lead {
  font-size: 14px;
  line-height: 1.9;
  margin: 0 0 22px;
}
#fp-autoshot-modal .fp-endmodal .fp-trial-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#fp-autoshot-modal .fp-endmodal .fp-btn-gold,
#fp-autoshot-modal .fp-endmodal .fp-btn-outline {
  width: 100%;
  padding: 15px 18px;
  border-radius: 999px;
  font-size: 15px;
  cursor: pointer;
}
#fp-autoshot-modal .fp-endmodal .fp-btn-outline { border-radius: 999px; }
/* この画面の主ボタン（＝「もう1度見る」）は赤系。文字は白（動的配色の
   color:#fff !important とも噛み合う）。影も赤に合わせて上書きする。 */
#fp-autoshot-modal .fp-endmodal .fp-btn-gold {
  background: linear-gradient(135deg, #f2564d, #c62828) !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(198, 40, 40, .42);
}

/* =========================================================
   動画のloading表示（バッファリング中のみ）
   ========================================================= */
#fp-video-loading {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  background: rgba(0, 0, 0, .25);
}
#fp-video-loading.is-on { display: flex; }
#fp-video-loading .fp-loading-ring {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25);
  border-top-color: #F2C14E;
  animation: fpSpin .8s linear infinite;
}
@keyframes fpSpin { to { transform: rotate(360deg); } }
#fp-video-loading .fp-loading-text {
  font-family: "Chakra Petch", "M PLUS 2", sans-serif;
  font-size: 12px;
  letter-spacing: .12em;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}

/* =========================================================
   プレイヤー操作まわりの調整
   ========================================================= */

/* 一時停止時の従来シークスライダーは使わない（ヒートバーがシークを担う） */
#controlTimeline { display: none !important; }

/* ヒートバーをシーク操作に対応させる（クリック/ドラッグ） */
#fp-heat .fp-heat-bar {
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
}
#fp-heat .fp-heat-playhead { width: 3px; box-shadow: 0 0 6px rgba(0,0,0,.6); }

/* 一時停止インジケーター（停止中であることをひと目で） */
#fp-paused {
  position: fixed;
  inset: 0;
  z-index: 56;
  /* **display の出し入れでは動きが付かない**ので、置いたまま透明にしておく
     （利用者の指示・2026-08-20「フェード&ズームで出るように」）。
     画面の外に出しているわけではないが、透明＋クリック透過なので
     止まっていないときは無いのと同じ。 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  background: rgba(0, 0, 0, .28);
  opacity: 0;
  visibility: hidden;
  /* 消えるときは透明になり切ってから visibility を落とす（遅延） */
  transition: opacity .22s ease, visibility 0s linear .22s;
}
#fp-paused.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity .22s ease, visibility 0s;
}
/* ズームは**中身だけ**に掛ける。入れ物の .fp-inner-rot は回転表示の
   transform を持っているので、そこへ重ねると回転が壊れる。 */
#fp-paused .fp-paused-icon,
#fp-paused .fp-paused-text {
  transform: scale(.86);
  transition: transform .24s cubic-bezier(.2, .9, .3, 1.15);
}
#fp-paused.is-on .fp-paused-icon,
#fp-paused.is-on .fp-paused-text { transform: none; }
#fp-paused .fp-paused-icon {
  display: flex;
  gap: 9px;
  padding: 18px 20px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  border: 2px solid rgba(255, 255, 255, .85);
}
#fp-paused .fp-paused-icon i {
  display: block;
  width: 7px;
  height: 26px;
  border-radius: 2px;
  background: #fff;
}
#fp-paused .fp-paused-text {
  font-family: "M PLUS 2", sans-serif;
  font-size: 12px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .7);
}

/* =========================================================
   モーダルの表示演出と微調整
   ========================================================= */

/* フォーカス時の青い輪郭線は出さない（ボタン自体の主従の色で十分なため） */
#fp-autoshot-modal button:focus,
#fp-notice-modal button:focus,
#fp-trial-modal button:focus { outline: none; }

/* fade + zoom-in で開く */
#fp-autoshot-modal.is-open,
#fp-notice-modal.is-open,
#fp-trial-modal.is-open { animation: fpModalFade .22s ease both; }
/* **パネルの中心から**ズームする（利用者の指示・2026-08-14）。
   共有の fpModalZoom は translateY(8px) で少し下から持ち上げる形で、
   このダイアログでは「ずれた位置から拡大してくる」ように見えていた。
   ここは中心の拡大だけにして、位置は動かさない。
   transform-origin も明示する ―― 既定は 50% 50% だが、
   別の指定が紛れ込んでも中心から動かないようにしておく。 */
#fp-autoshot-modal .fp-modal-panel,
#fp-notice-modal .fp-modal-panel,
#fp-trial-modal .fp-modal-panel { transform-origin: 50% 50%; }
#fp-autoshot-modal.is-open .fp-modal-panel,
#fp-notice-modal.is-open .fp-modal-panel,
#fp-trial-modal.is-open .fp-modal-panel { animation: fpModalZoomCenter .3s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes fpModalZoomCenter {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes fpModalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fpModalZoom {
  from { opacity: 0; transform: scale(.9) translateY(8px); }
  to   { opacity: 1; transform: scale(1)  translateY(0); }
}
/* 閉じる側。開く側の逆再生ではなく、少しだけ速く・小さく引く
   （閉じる動きが長いと「反応が遅い」に見える） */
@keyframes fpModalFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes fpModalZoomOut {
  from { opacity: 1; transform: scale(1)   translateY(0); }
  to   { opacity: 0; transform: scale(.88) translateY(6px); }
}

/* PCでは文字を大きく */
@media (min-width: 900px) {
  #fp-autoshot-modal .fp-endmodal { max-width: 440px; padding: 36px 30px 28px; }
  #fp-autoshot-modal .fp-endmodal .fp-trial-lead { font-size: 18px; }
  #fp-autoshot-modal .fp-endmodal .fp-btn-gold,
  #fp-autoshot-modal .fp-endmodal .fp-btn-outline { font-size: 17px; padding: 17px 20px; }
  #fp-paused .fp-paused-text { font-size: 14px; }
}

/* 保存不可モーダル: ボタンの形をサブ（TOPへ戻る）と揃えたピルに */
#fp-notice-modal .fp-btn-gold,
#fp-notice-modal .fp-btn-outline {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 18px;
  border-radius: 999px;
  font-size: 15px;
  cursor: pointer;
}
#fp-notice-modal .fp-trial-actions { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) {
  #fp-notice-modal .fp-modal-panel { max-width: 600px; padding-left: 40px; padding-right: 40px; }
  #fp-notice-modal .fp-trial-title { font-size: 22px; }
  #fp-notice-modal .fp-trial-lead { font-size: 16px; }
  #fp-notice-modal .fp-btn-gold,
  #fp-notice-modal .fp-btn-outline { font-size: 17px; padding: 17px 20px; }
}

/* プラン選択モーダル: 価格は Helvetica、PCでは余裕のあるレイアウトに */
.fp-plan .fp-plan-price {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  font-weight: 700;
  letter-spacing: .01em;
}
/* 現像可能数。シャッター回数のすぐ下に置く。
   「1枚あたり」の目安(.fp-plan-per)より手前の情報なので、
   薄くしすぎず、回数と同系の見え方にする。 */
/* ダウンロード可能数。現像のすぐ下に置き、見え方は現像とそろえる
   （どちらも「何枚ぶんか」の話なので、片方だけ強いと比べにくい）。 */
.fp-plan .fp-plan-downloads {
  white-space: nowrap;
  opacity: .85;
}

.fp-plan .fp-plan-develops {
  /* margin-top は置かない（利用者の指示・2026-08-13「等間隔になるように」）。
     3行の間隔は .fp-plan の gap だけが決める。ここに余白を足すと
     この行の上だけ広がり、3行が等間隔でなくなる。 */
  white-space: nowrap;
  /* 字の大きさと並べ方（display）は、3行そろえて上のまとめて指定する側が持つ。
     ここで display:block を書いていたため、左右に並べる指定を打ち消していた
     （後ろにあるぶんだけ勝つ）。同じ理由で font-size もここには書かない。 */
  opacity: .85;
}

.fp-plan .fp-plan-per {
  display: block;
  margin-top: 4px;
  /* 改行は <br> の位置だけ。「約」と金額が離れないようにする */
  white-space: nowrap;
  font-size: 11px;
  opacity: .6;
}
@media (min-width: 900px) {
  #fp-shop-modal .fp-modal-panel { max-width: 730px; }
  .fp-plans { gap: 16px; }
  .fp-plans .fp-plan { padding: 26px 16px 22px; min-width: 170px; }
  .fp-plan .fp-plan-name  { font-size: 15px; }
  .fp-plan .fp-plan-price { font-size: 34px; }
  .fp-plan .fp-plan-per   { font-size: 12px; }
  .fp-shop-title { font-size: 24px; }
  .fp-shop-lead  { font-size: 15px; }
}

/* =========================================================
   現像ライトボックス（拡大表示にした時点で現像を開始する）
   ========================================================= */
#fp-devbox {
  position: fixed;
  inset: 0;
  z-index: 9970;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(6, 8, 26, .8);
  /* backdrop-filter はここに置かない。iOSでは backdrop-filter を持つ要素の
     子孫で transform の更新が止まり、印画紙の弾みがまったく動かなくなる。
     ぼかしは背面の専用レイヤー(::before)に担当させ、動かす要素を
     その子孫から外す。見た目は同じ。 */
}
#fp-devbox.is-open { display: flex; animation: fpModalFade .2s ease both; }
/* 背面のぼかし層。中身（印画紙）はこの層の子孫ではないので、
   iOSの合成レイヤーの不具合に巻き込まれない。 */
#fp-devbox::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
#fp-devbox .fp-devbox-inner {
  position: relative;
  z-index: 1;   /* ぼかし層より前に出す */
  width: 100%;
  max-width: min(92vw, 540px);
}
#fp-devbox .fp-devbox-card {
  position: relative;
  /* 虹色のきらめきは mix-blend-mode で写真に重ねる。
     混ぜる相手を写真だけに限る（iOSでは背後のぼかしと混ざると
     虹がベタ塗りになって写真が見えなくなることがある）。 */
  isolation: isolate;
  border-radius: var(--hs-radius-surface, 16px);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  animation: fpModalZoom .3s cubic-bezier(.2, .9, .3, 1.15) both;
}
/* **縦の写真にも対応する**（利用者の指摘・2026-08-20「縦画像が対応していない」）。
   幅いっぱい（width:100%）だけを決めていたので、縦長の写真は高さが画面を
   はみ出し、PCでは max-height で切られて（object-fit:cover）真ん中しか
   見えなかった。

   **高さの上限を決めて、幅はそれに合わせる。** 縦長なら細く、横長なら
   広くなり、どちらも切らずに全部見せられる。印画紙（枠）は下の
   fit-content で写真の形に合わせて縮む。 */
#fp-devbox .fp-devbox-card img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 58vh;
  object-fit: contain;
}
/* 印画紙と写真の入れ物は、写真の形に合わせて縮む（縦長のときに
   両脇へ白が余らないように）。 */
#fp-devbox .fp-devbox-frame,
#fp-devbox .fp-devbox-card {
  /* Safari は width の fit-content に前置きが要る版がある。無いと
     width が auto に倒れ、left/right:0 のぶん**横いっぱいに伸びる**
     （利用者の報告・2026-08-20「ダウンロードボタンがこわれてみえる」）。 */
  width: -webkit-fit-content;
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* 現像した写真の右下のクレジット。拡大表示の .copyright_detailphoto と
   同じ見せ方にそろえる（利用者の指示・2026-08-20）――
   写真の中の右下に重ね、白文字＋薄い影で写真の上でも読めるようにする。
   写真そのもの（.capturedlistImage）に掛かる現像中のフィルタは、
   兄弟のこの要素には掛からない。
   出すのは現像が終わってから。JS が is-in を付けるまでは見えない。 */
#fp-devbox .fp-devbox-credit {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 12;
  margin: 0;
  padding: 0;
  text-align: right;
  /* **書体は一覧・拡大表示のクレジット（.copyright）と同じ**
     （利用者の指摘・2026-08-21「フォントも抜けてる？」）。
     指定が無く、ページの地の書体で出ていた ―― 同じ写真の同じ文言なのに、
     現像の演出のときだけ別の字面になっていた。 */
  font-family: "Chakra Petch", sans-serif;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 600;
  /* 文字の塗りそのものを白に固定する。color だけだと、サイト全体の
     動的配色（general_style_css）に負けることがある。 */
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
}
#fp-devbox .fp-devbox-credit.is-in { opacity: 1; }
@media (max-width: 480px) {
  #fp-devbox .fp-devbox-credit { font-size: 10px; }
}

/* プラン選択モーダル: 細部の指定
   - プランカードのフォーカス線は出さない
   - 「おすすめ」バッジの文字は黒（自由CSSの白!importantに特異度で勝たせる）
   - 残数の座布団は黒の半透明、数字は大きく */
.fp-plan:focus,
button.fp-plan:focus { outline: none !important; }

#fp-shop-modal span.fp-plan-badge,
button.fp-plan span.fp-plan-badge,
span.fp-plan-badge { color: #111 !important; }

.fp-shop-balance {
  background: rgba(0, 0, 0, .30);
  border: 1px solid rgba(255, 255, 255, .12);
  /* スマホの狭い幅で「商品プレゼント」等が単語の途中で折り返されるのを防ぐ。
     改行してよいのはスペースの位置だけにする。 */
  word-break: keep-all;
  overflow-wrap: normal;
}
.fp-shop-balance b {
  font-size: 24px;
  line-height: 1;
  vertical-align: -2px;
  margin: 0 2px;
}
@media (min-width: 900px) {
  .fp-shop-balance { font-size: 14px; padding: 12px 16px; }
  .fp-shop-balance b { font-size: 30px; }
}

/* 「追加する」フォーカス時の白い線は出さない */
#fp-shutter-bar .fp-dev-more:focus { outline: none !important; box-shadow: none !important; }

/* PC: プラン選択モーダルをゆったりと（幅・余白・カード間隔を拡大） */
@media (min-width: 900px) {
  #fp-shop-modal .fp-modal-panel {
    max-width: 730px;
    padding: 44px 48px 36px;
  }
  /* 見出しの下の余白は取る（利用者の指定・2026-08-25）。
     すぐ下の一文が自前で上下の余白を持っており、足すと離れすぎる。 */
  #fp-shop-modal .fp-shop-title { margin-bottom: 0; }
  #fp-shop-modal .fp-shop-lead  { margin-bottom: 22px; }
  #fp-shop-modal .fp-shop-balance { margin: 0 0 30px; padding: 14px 18px; }
  #fp-shop-modal .fp-plans { gap: 22px; }
  #fp-shop-modal .fp-plans .fp-plan { padding: 34px 20px 30px; }
  #fp-shop-modal .fp-plan .fp-plan-name  { margin-bottom: 10px; }
  #fp-shop-modal .fp-plan .fp-plan-price { margin-bottom: 10px; }
  #fp-shop-modal .fp-plan .fp-plan-per   { margin-top: 8px; }
  #fp-shop-modal .fp-shop-note { margin-top: 24px; }
}

/* プランは1行（1列に3枚）で並べる。旧grid指定との競合を断つ。 */
#fp-shop-modal .fp-plans {
  display: flex !important;
  flex-wrap: wrap;
  grid-template-columns: none;
}
@media (min-width: 900px) {
  #fp-shop-modal .fp-plans { flex-wrap: nowrap; }
  #fp-shop-modal .fp-plans .fp-plan { flex: 1 1 0; min-width: 0; }
}

/* ホバーは黄色（ゴールド）系に統一 */
.fp-plan:hover {
  border-color: #e8b44a !important;
  background: rgba(232, 180, 74, .12) !important;
}


/* =========================================================
   回転表示（スマホ縦持ちで横向き動画）のときの調整
   ========================================================= */
/* ヒートバー: 動画に合わせて90度回転し、画面の右端（横持ち時の下辺）に縦置きする。
   長さの基準は画面の縦(vh)＝横持ちしたときの横幅。translate(50%,-50%)で
   「右端・上下中央」に中心を合わせてから回す。 */
body.fp-rotated #fp-heat {
  left: auto;
  right: 58px;   /* 横持ち時の「下辺から少し上」= 右端から少し内側 */
  top: 50%;
  bottom: auto;
  width: min(72vh, 420px);
  transform: translate(50%, -50%) rotate(-90deg);
}

/* 撮影開始演出も映像に合わせて回す（カウントダウン・Are you ready?・会場名・のこり枚数） */
body.fp-rotated #fp-intro .fp-intro-count,
body.fp-rotated #fp-intro .fp-intro-ready,
body.fp-rotated #fp-intro .fp-intro-venue,
body.fp-rotated #fp-intro .fp-intro-left {
  transform: rotate(-90deg);
}
/* 音量の注意も一緒に回す（利用者の報告・2026-08-21「90度回転させているときに
   音量の表示も横になるように」）。上の並びに入れないのは transform が
   translateY(118px)＝「円の下」との合成だから ―― rotate を**先**に書くと、
   118px のずらしが回転後の座標で効き、回した画面でもちゃんと円の下に来る。
   （逆順に書くと、ずらしだけ画面の下向きのままになり、円の横に出る） */
body.fp-rotated #fp-intro .fp-intro-note {
  transform: rotate(-90deg) translateY(118px);
}
body.fp-rotated #fp-heat .fp-heat-bar { height: 12px; }
body.fp-rotated #fp-heat .fp-heat-label { font-size: 9.5px; margin-bottom: 4px; }
body.fp-rotated #fp-heat .fp-heat-note  { font-size: 9px; margin-top: 3px; }
body.fp-rotated #fp-heat .fp-heat-playhead { width: 2px; }

/* ダイアログも画面の向きに合わせて回す（購入モーダルは既存対応済み） */
body.fp-rotated #fp-autoshot-modal .fp-modal-panel,
body.fp-rotated #fp-notice-modal .fp-modal-panel {
  width: min(86vh, 560px);
  max-height: 84vw;
  transform: rotate(-90deg);
}
body.fp-rotated #fp-autoshot-modal.is-open .fp-modal-panel,
body.fp-rotated #fp-notice-modal.is-open .fp-modal-panel { animation: none; }
body.fp-rotated #fp-devbox .fp-devbox-inner {
  max-width: min(86vh, 540px);
  transform: rotate(-90deg);
}
body.fp-rotated #fp-devbox .fp-devbox-card { animation: none; }
/* 一時停止・loading は「中身だけ」回す。全画面の薄暗い背景ごと回すと、
   回転した矩形の重なりが中央の正方形に見えてしまうため。 */
.fp-inner-rot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
body.fp-rotated #fp-paused .fp-inner-rot,
body.fp-rotated #fp-video-loading .fp-inner-rot { transform: rotate(-90deg); }

/* お試しモーダル: メインボタンはTOPのCTAと同じ配色（ゴールド×黒文字） */
#fp-trial-modal .fp-trial-yes {
  background: linear-gradient(135deg, #f5c451, #e0952a) !important;
  color: #111 !important;
  border: 0 !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 18px rgba(224, 149, 42, .38);
}
#fp-trial-modal .fp-trial-yes:focus { outline: none; }
@media (min-width: 900px) {
  /* PCでもモーダルは画面幅いっぱいへ広げず、スマホに近い読みやすい大きさに保つ。 */
  #fp-trial-modal .fp-modal-panel {
    width: min(92vw, 460px);
    max-width: 460px;
    padding: 26px 24px 22px;
  }
  #fp-trial-modal .fp-trial-title { font-size: 18px; }
  #fp-trial-modal .fp-trial-lead  { font-size: 12px; white-space: normal; }
  #fp-trial-modal .fp-trial-actions button { font-size: 14px; padding: 13px; }
}

/* 現像ライトボックス: ポラロイド(チェキ)風の白フレーム。下辺を広めに取る。 */
#fp-devbox .fp-devbox-frame {
  position: relative;
  z-index: 1;
  background: #f6f4ee;
  border-radius: 0;                      /* ポラロイドは角丸なし */
  /* 当たりの金の罫線は最初から場所を取っておき、色だけ後から変える。
     現像後に border を足すと、そのぶん内側が削られて写真が小さくなるため。
     余白は罫線のぶん詰めてあるので、印画紙も写真も見た目の寸法は変わらない
     （11+3=14 / 49+3=52 で、罫線を入れる前と同じ）。 */
  border: 3px solid transparent;
  padding: 11px 11px 49px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  /* 開くときのズームはJS(bounceTween)が行う。CSSアニメーションを
     ここに置くと fill が transform を掴み続け、iOSでは解除が効かずに
     完了時の弾み（インラインtransform）が一切見えなくなる。 */
}
#fp-devbox .fp-devbox-card {
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
  animation: none;    /* zoomはフレーム側で行う */
}
/* ポラロイド下辺の手書き風のひと言。現像中(Developing…)も常に見せておく */
#fp-devbox .fp-devbox-caption {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 49px;   /* フレームの下帯(padding-bottom)と同じ高さ＝帯の上下中央に文字が来る */
  z-index: 7;   /* ムラ現像のcanvas(z:5, ぼかしのはみ出しあり)より上に置く */
  text-align: center;
  font-family: 'Permanent Marker', "Chakra Petch", cursive, sans-serif;
  font-size: 17px;
  letter-spacing: .04em;
  /* サイト全体の自由CSS(color:#fff !important)に負けないよう同じ強さで指定。
     白帯の上に白文字になって見えなくなるのを防ぐ */
  color: #5a5348 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  opacity: 1 !important;
}

/* 現像時の写真に角丸はつけない（一覧用の .capturedlist の角丸を打ち消す） */
#fp-devbox .fp-devbox-card,
#fp-devbox .fp-devbox-card .capturedlistImage,
#fp-devbox .fp-devbox-card img,
#fp-devbox .fp-noise-cv {
  border-radius: 0 !important;
}
body.fp-rotated #fp-devbox .fp-devbox-frame { animation: none; }
@media (min-width: 900px) {
  /* PCでは写真を大きく見せる（画面の高さに収まる範囲で拡大） */
  #fp-devbox .fp-devbox-inner { max-width: min(86vw, 1000px); }
  /* PCは高さの上限だけ広げる。切り取り（cover）はしない ――
     縦の写真が真ん中だけになっていた原因（2026-08-20）。 */
  #fp-devbox .fp-devbox-card img { max-height: 70vh; }
  #fp-devbox .fp-devbox-frame { padding: 17px 17px 69px; }   /* 罫線3pxぶんを引いた値 */
  #fp-devbox .fp-devbox-caption { font-size: 22px; height: 69px; }   /* PCの下帯高さに合わせて中央 */
}

/* 現像完了の瞬間: 背景全体が一度パッと光って収まるフラッシュ。
   写真(フレーム)より奥に置くため、DOM上は inner より前に挿入される。 */
#fp-devbox .fp-devbox-flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 255, 255, .95),
    rgba(255, 240, 200, .45) 45%,
    rgba(255, 255, 255, 0) 78%);
  animation: fpDevFlash .8s ease-out forwards;
}
@keyframes fpDevFlash {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 現像中: 光の粒(Particle)がフレームの周りを漂って場を盛り上げる */
#fp-devbox .fp-devbox-particles {
  position: absolute;
  inset: -18%;
  pointer-events: none;
  /* 印画紙(z:1)より前に置く。後ろにあると、写真の面から出た粒が
     そのまま隠れてしまい、外へ抜けたものだけが見えるため
     「中心の1点から出ている」ように見えてしまう。 */
  z-index: 9;
}
#fp-devbox .fp-devbox-particles i {
  position: absolute;
  /* 進行方向に尾を引く彗星型（横長を回転で向きに合わせる）。
     尾は短めにして、粒が密に集まって見えるようにする */
  width: calc(var(--sz, 5px) * 2.6);
  height: var(--sz, 5px);
  border-radius: 999px;
  background: linear-gradient(270deg,
    #fff 0 18%,
    rgba(255, 232, 170, 1) 38%,
    rgba(255, 224, 150, .45) 68%,
    rgba(255, 224, 150, 0) 100%);
  filter: drop-shadow(0 0 9px rgba(255, 228, 160, 1))
          drop-shadow(0 0 18px rgba(255, 196, 90, .75));
  opacity: 0;
  animation: fpBurst var(--dur, 1.4s) cubic-bezier(.15, .6, .4, 1) both;
}
/* 中央から放射状に、軌跡を残しながら飛び散る */
@keyframes fpBurst {
  0%   { opacity: 0; transform: translate(0, 0) rotate(var(--rot, 0deg)) scale(.3); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -120px)) rotate(var(--rot, 0deg)) scale(1); }
}


/* Perlinノイズ現像: 乳白のムラが徐々に晴れて色が入っていく */
.fp-noise-cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  filter: blur(7px) saturate(.9);   /* 低解像度セルを有機的なムラに見せる */
  transform: scale(1.04);           /* blurの端の白フチを隠す */
}

/* 現像後のインタラクション: hoverで傾き → タップでズームアウトして閉じる。
   frame にはCSSアニメーションを一切置かない（弾み・開閉はJSが transform を書く）。 */
#fp-devbox.is-done .fp-devbox-frame {
  cursor: pointer;
  /* will-change: transform は付けない。iOSでこの要素を先に合成レイヤーへ
     上げてしまうと、以降 transform を書いても画面が更新されないことがある。 */
  transition: transform .18s ease, box-shadow .18s ease;
}
/* マウスを乗せた時点で少し浮く（位置に応じた傾きはJSが上書きする） */
/* hoverでは拡大しない（傾きのみ。傾きはJSがカーソル位置から与える） */
#fp-devbox.is-done .fp-devbox-frame:hover {
  box-shadow: 0 24px 62px rgba(0, 0, 0, .66);
}
/* タップした瞬間は少し縮む（押した手応え） */
#fp-devbox.is-done .fp-devbox-frame:active {
  transform: scale(.98) !important;
  transition: transform .12s ease !important;
}
#fp-devbox.is-closing {
  opacity: 0;
  transition: opacity .3s ease;
}
/* 閉じる: 押した状態(0.98)からそのままズームアウトして消える */
#fp-devbox.is-closing .fp-devbox-frame {
  transform: scale(.72) !important;
  opacity: 0;
  transition: transform .34s cubic-bezier(.4, 0, .6, 1),
              opacity .3s ease .04s !important;
}

/* 開いた瞬間〜現像開始までの間も「最初の状態＝白ネガ」で見せる。
   ぼかしも canvas 側(blur 7px)と揃え、現像開始時に見た目の段差が出ないようにする。 */
#fp-devbox .fp-devbox-card.fp-undeveloped:not(.fp-developing) .capturedlistImage {
  filter: invert(1) saturate(.5) brightness(1.6) contrast(.6) blur(6px);
  opacity: 1;
}

/* 現像中: canvas のネガの下は「最終画像そのもの」にしておく。
   一覧用のネガフィルタ(上の .capturedlist.fp-undeveloped 用)が残っていると、
   ムラが晴れた先にフィルタ済みの画像が見え、終了時に本来の色へ「ぱっ」と
   切り替わってしまう。ここで確実に素の画像へ戻すことで、
   現像前→最終画像がひと続きのムラフェードになる。 */
#fp-devbox .fp-devbox-card.fp-developing .capturedlistImage {
  filter: none;
  opacity: 1;
}
/* 使い切った目盛り（is-used）。色は #74747830（利用者の指定・2026-08-13）。
   濃紺の地に沈まず、点いている金とははっきり区別できる薄いグレイ。 */
#fp-shutter-bar .fp-gauge i.is-used {
  background: #74747830;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

/* ---------------- 撮影: シャッター羽根で遮蔽する ----------------
   丸いマスクではなく、実機と同じ「羽根が閉じて開く」動きで撮影を表現する。
   羽根(#hane)はプレイヤー側の既存要素。閉じ(.flash)を少し深く・速くして
   カメラらしい手応えにする。 */
#hane .shutter .hane {
  transition: transform .11s cubic-bezier(.4, 0, .2, 1);
}
/* 閉じきり: 中心まで完全に覆う（既定の rotate(0deg) では隙間が残る端末があるため） */
#hane.flash .hane {
  transform: rotate(4deg) !important;
}

/* ---------------- シャッター売り切れ（撮れるコマ数の上限に到達） ---------------- */
#fp-shutter-bar .fp-dev-more.is-soldout {
  border-color: rgba(255, 255, 255, .28) !important;
  color: rgba(255, 255, 255, .62) !important;
  background: rgba(255, 255, 255, .06) !important;
  cursor: default;
  pointer-events: none;
}
#fp-shop-modal .fp-plan.is-soldout {
  opacity: .55;
  cursor: default;
  filter: grayscale(.35);
}
/* 売切は押せないので、ホバーでも見た目を変えない（後ろにある
   .fp-plan:hover の !important に勝つよう、同じく !important で戻す）。 */
#fp-shop-modal .fp-plan.is-soldout,
#fp-shop-modal .fp-plan.is-soldout:hover,
#fp-shop-modal .fp-plan.is-soldout:active,
#fp-shop-modal .fp-plan.is-soldout:focus {
  border-color: rgba(255, 255, 255, .16) !important;
  background: rgba(255, 255, 255, .04) !important;
  transform: none !important;
}
/* 売切のときは「おすすめ」の金枠も出さない。買えないのに目立っていると、
   どれを選べばよいのか分からなくなるため。 */
#fp-shop-modal .fp-plan.is-soldout.is-recommended {
  border-color: rgba(255, 255, 255, .16) !important;
  box-shadow: none !important;
}
#fp-shop-modal span.fp-plan-badge.is-soldout {
  background: rgba(255, 255, 255, .82) !important;
  color: #7a2333 !important;
}

/* ---------------- 「まもなく終了」（残り5秒） ----------------
   縦位置はタイムコードの真下（表示時にJSが実測して inline の top を入れる）。
   ここの top はJSが測れなかったときの保険。 */
#fp-endsoon {
  position: fixed;
  left: 50%;
  top: 84px;
  transform: translateX(-50%);
  z-index: 58;
  pointer-events: none;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(198, 39, 66, .86);
  color: #fff;
  font-family: "M PLUS 2", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45);
  opacity: 0;
  transition: opacity .3s ease;
}
#fp-endsoon.is-on { opacity: 1; }
/* 回転表示中は文字だけ向きを合わせる（帯ごと回すと画面からはみ出すため） */
body.fp-rotated #fp-endsoon {
  left: auto;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}
@media (min-width: 900px) {
  #fp-endsoon { top: 96px; font-size: 14px; padding: 7px 20px; }
}

/* 目盛りはカード幅いっぱいに等分して、1本ずつを太く見せる。
   固定幅のままだと中央に小さく固まって見えるため。

   **本数が増えても見せ方は変えない**（利用者の指示・2026-08-20）。
   収まらなくなるのは目盛りの太さではなく**間**なので、間だけを
   総数（--fp-gauge-count。renderShutterGauge が書く）から詰める。
   1本の幅は flex が等分するので、何本になっても欄いっぱいに並ぶ。 */
#fp-shutter-bar .fp-gauge:not(.is-dense) {
  flex-wrap: nowrap;
  gap: clamp(2px, calc(96px / var(--fp-gauge-count, 12)), 8px);
}
#fp-shutter-bar .fp-gauge:not(.is-dense) i {
  flex: 1 1 0;
  width: auto;
  min-width: 0;   /* 本数が多いときに、はみ出さず縮めるため */
  height: 11px;
}
@media (max-width: 768px) {
  #fp-shutter-bar .fp-gauge:not(.is-dense) {
    gap: clamp(1px, calc(72px / var(--fp-gauge-count, 12)), 6px);
  }
  #fp-shutter-bar .fp-gauge:not(.is-dense) i { height: 10px; }
}

/* ---------------- ヒートゾーン（みんなの反応がゴールド）に入った時 ----------------
   ・タイムコードを橙に0.3秒ひからせる（入った瞬間だけ）
   ・シャッターボタンはゾーンにいる間だけ脈動させる */
.fp-hotflash { animation: fpHotFlash .3s ease-out 1; }
@keyframes fpHotFlash {
  0%   { color: #fff;    transform: scale(1);   text-shadow: 0 1px 3px rgba(0,0,0,.9); }
  40%  { color: #ffa23a; transform: scale(1.3); text-shadow: 0 0 14px rgba(255,162,58,.95), 0 1px 3px rgba(0,0,0,.9); }
  100% { color: #fff;    transform: scale(1);   text-shadow: 0 1px 3px rgba(0,0,0,.9); }
}
/* ゾーンを抜けた瞬間は、脈の途中の大きさから素の大きさへ戻る。
   遷移が無いとその戻りが一瞬で起き、カタッと見える。
   （脈動中はアニメーションが優先されるので、この遷移は邪魔しない） */
#buttonCapture {
  transition: opacity .4s ease, transform .35s ease-out, box-shadow .35s ease-out;
}
#buttonCapture.fp-hotpulse { animation: fpHotPulse .62s ease-in-out infinite; }
@keyframes fpHotPulse {
  0%,100% { transform: scale(1);    box-shadow: 0 1px 3px rgba(0,0,0,.3); }
  50%     { transform: scale(1.09); box-shadow: 0 0 22px rgba(245,196,81,.85), 0 1px 3px rgba(0,0,0,.3); }
}
/* 横持ち・回転表示ではボタン位置の transform を壊さないよう、光だけで表現する */
@media (max-height: 500px) {
  #buttonCapture.fp-hotpulse { animation-name: fpHotPulseGlow; }
}
body.fp-rotated #buttonCapture.fp-hotpulse { animation-name: fpHotPulseGlow; }
@keyframes fpHotPulseGlow {
  0%,100% { box-shadow: 0 1px 3px rgba(0,0,0,.3); }
  50%     { box-shadow: 0 0 24px rgba(245,196,81,.9), 0 1px 3px rgba(0,0,0,.3); }
}

/* =========================================================
   現像完了の演出（モックアップ準拠）
   写真の上で光る → 衝撃で弾む →「キャプった!!」→ 紙吹雪 → キラキラ
   ========================================================= */

/* 写真の上の白フラッシュ／虹色のきらめき（写真の中だけで光らせる） */
#fp-devbox .fp-devbox-pop,
#fp-devbox .fp-devbox-rainbow {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
}
#fp-devbox .fp-devbox-pop { background: #fff; transition: opacity .1s ease; }
#fp-devbox .fp-devbox-pop.is-on { opacity: .78; }
#fp-devbox .fp-devbox-rainbow {
  background: conic-gradient(from 0deg, #FF6FA3, #FFD65C, #5CE1E6, #B98CFF, #FF6FA3);
  mix-blend-mode: screen;
  transition: opacity .35s ease;
}
#fp-devbox .fp-devbox-rainbow.is-on { opacity: .85; transition: opacity .15s ease; }

/* 「キャプった!!」 */
#fp-devbox .fp-capword {
  position: absolute;
  left: 50%;
  /* 上下中央は「印画紙全体」ではなく「写真面」に合わせる。
     印画紙は下辺にキャプションの白帯(padding-bottom)を持つぶん、
     単純な 50% だと写真の中心より下にずれる。
     写真面の中心 = (上余白 + 高さ - 下余白) / 2 = 50% + (14px - 52px)/2 */
  top: calc(50% - 19px);
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  animation: fpCapWord .65s cubic-bezier(.2, .7, .3, 1) forwards;
}
/* PCは下帯が72pxと広いので、写真面の中心はさらに上（50% + (20px - 72px)/2）。
   ※この打ち消しは基準の指定より後ろに置くこと。詳細度が同じなので、
     前に置くと後ろの基準値に負けて効かない。 */
@media (min-width: 900px) {
  #fp-devbox .fp-capword { top: calc(50% - 26px); }
}
#fp-devbox .fp-capword span {
  display: inline-block;
  white-space: nowrap;
  transform: skewX(-6deg);
  font-family: "M PLUS 2", "Noto Sans JP", sans-serif;
  font-weight: 900;
  font-size: clamp(26px, 7vw, 44px);
  letter-spacing: 1px;
  color: #fff !important;
  text-shadow: 2px 2px 0 #8a5a00, -1px -1px 0 #8a5a00, 1px -1px 0 #8a5a00,
               -1px 1px 0 #8a5a00, 0 0 18px #F2C14E;
}
@keyframes fpCapWord {
  0%   { transform: translate(-50%, -50%) scale(.2) rotate(-6deg); opacity: 0; }
  45%  { transform: translate(-50%, -50%) scale(1.35) rotate(4deg); opacity: 1; }
  65%  { transform: translate(-50%, -50%) scale(.92) rotate(-2deg); opacity: 1; }
  82%  { transform: translate(-50%, -50%) scale(1.08) rotate(1deg);  opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1)   rotate(0deg);   opacity: 1; }
}
#fp-devbox .fp-capword.is-out {
  animation: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity .25s ease;
}

/* 紙吹雪を散らす層。印画紙の中に閉じ込めず、画面いっぱいに舞わせる。
   外側は「はみ出しを切る」役、内側は「奥行きを与える」役に分けている。
   overflow が visible 以外だと 3D の文脈が平らに潰されるため、
   1枚の要素に両方を持たせることはできない。 */
/* 紙吹雪の層。現像演出（#fp-devbox）と当選ダイアログ（.fp-prize-modal）の
   両方で使うので、id には結び付けない。置いた親の中いっぱいに舞う。 */
.fp-devbox-confetti {
  position: absolute;
  inset: 0;
  z-index: 8;          /* 印画紙(z:1)より前。手前を舞って見える */
  pointer-events: none;
  overflow: hidden;    /* 画面外まで出て横スクロールを作らない */
}
.fp-devbox-confetti-3d {
  position: absolute;
  inset: 0;
  /* 消失点をマウス位置に追従させる。視点が動くと、手前の紙ほど大きく
     ずれて奥の紙はあまり動かない（視差）ので、立体的に見える。 */
  perspective: 620px;
  perspective-origin: var(--fp-px, 50%) var(--fp-py, 50%);
  transition: perspective-origin .18s ease-out;
}

/* 紙吹雪: 3軸で回転しながら舞い、面がこちらを向いた瞬間だけ光る。
   ・飛び方（移動と回転）と 光り方（明るさ）は別々のアニメーションにして、
     回転の周期と光る周期を独立に決められるようにしている
   ・光りは box-shadow を brightness で持ち上げて出す。drop-shadow より軽く、
     枚数が増えてもコマ落ちしにくい */
.fp-confetti {
  position: absolute;
  width: var(--w, 8px);
  height: var(--h, 12px);
  border-radius: 2px;
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  /* 面が向いた瞬間に強く光らせる。芯の白から外へ三段でにじませる。 */
  box-shadow: 0 0 4px #fff,
              0 0 12px currentColor,
              0 0 26px currentColor,
              0 0 44px currentColor,
              0 0 3px #fff inset;
  animation: fpConfetti3d var(--dur, 1.05s) cubic-bezier(.2, .6, .4, 1) forwards,
             fpConfettiGlow var(--spin, .5s) ease-in-out infinite;
}
/* 大きさの変化は scale ではなく Z軸の移動で作る。遠近法（perspective）が
   効くので、奥から手前へ「近づいてくる」動きとして見える。
   奥のものは小さく薄く、手前のものは大きく濃い。 */
/* perspective は親（.fp-devbox-confetti-3d）が持つ。ここで perspective() を
   書くと視点が要素ごとに固定され、マウスに追従しなくなる。 */
@keyframes fpConfetti3d {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, var(--z0, -200px))
               rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  14% { opacity: var(--op, 1); }
  80% { opacity: var(--op, 1); }
  100% {
    opacity: 0;
    transform: translate3d(var(--dx, 0), var(--fall, 70px), var(--z1, 120px))
               rotateX(var(--rx, 720deg)) rotateY(var(--ry, 540deg))
               rotateZ(var(--rot, 180deg));
  }
}
/* ---------------- スマホ向けの軽量化 ----------------
   演出の中身は変えず、描き方だけ安い方法に切り替える。
   1) 全画面の背景ぼかしをやめる。ぼかした面の上で紙が動くと、
      毎フレーム全画面を再びぼかし直すことになり、いちばん重い。
      代わりに背景を少し濃くして、後ろが目立たないようにする。
   2) 影の広がりを詰める。44pxの影に明るさフィルタを毎フレームかけると、
      1枚あたり100px四方を塗り直すことになる。半径を詰めれば激減する。 */
@media (max-width: 540px) {
  #fp-devbox { background: rgba(6, 8, 26, .93); }
  #fp-devbox::before {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .fp-confetti {
    box-shadow: 0 0 3px #fff, 0 0 9px currentColor;
  }
  #fp-devbox .fp-sparkle-star {
    text-shadow: 0 0 3px #fff, 0 0 9px rgba(255, 224, 150, 1);
  }
  #fp-devbox .fp-devbox-particles i {
    filter: drop-shadow(0 0 6px rgba(255, 228, 160, 1));
  }
}

/* 面が正面を向いた瞬間に明るく、横を向くと沈む＝角度で光って見える。
   沈みを深く・山を高くするほど、きらっと光った印象が強くなる。 */
@keyframes fpConfettiGlow {
  0%, 100% { filter: brightness(.32) saturate(.75); }
  40%      { filter: brightness(1.7) saturate(1.25); }
  50%      { filter: brightness(5.2) saturate(1.7); }
  60%      { filter: brightness(1.7) saturate(1.25); }
}

/* キラキラ（✦）: 中央から放射状に飛び出し、手前に迫って見えるように
   （遠くから近づくほど大きく・速くなる ＝ 遠近感）。
   位置は全て中央固定で、飛ぶ向きと距離・最終倍率はJSが1つずつ決める。 */
#fp-devbox .fp-sparkle-star {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 7;
  pointer-events: none;
  font-style: normal;
  line-height: 1;
  opacity: 0;
  /* 芯を白く、外へ向かって金色ににじませる（強めのグロー） */
  text-shadow: 0 0 4px #fff,
               0 0 12px rgba(255, 224, 150, 1),
               0 0 26px rgba(242, 193, 78, .85);
  /* 手前に来るほど加速して見えるよう、後半で伸びる曲線にする */
  animation: fpSparkleFly var(--dur, 1.05s) cubic-bezier(.2, .35, .5, 1) forwards;
}
@keyframes fpSparkleFly {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(0, 0) scale(.12) rotate(0deg);
  }
  16% { opacity: 1; }
  78% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%)
               translate(var(--dx, 0), var(--dy, 0))
               scale(var(--sc, 1.5)) rotate(var(--rot, 40deg));
  }
}

/* 仕上げ: 当たりは金縁、キャプションは金文字 */
/* 場所は最初から取ってあるので、色を変えるだけ。レイアウトは動かない。 */
#fp-devbox .fp-devbox-frame.is-special {
  border-color: #f2c14e;
  transition: border-color .4s ease;
}
/* 現像演出では、写真そのものには金の枠を付けない（印画紙の外枠だけにする）。
   一覧のカードでは当たりの目印として金の枠を使うが、ここは印画紙の中の
   写真なので、二重に枠が付いて見えてしまう。光だけ残す。 */
#fp-devbox .fp-devbox-card.fp-special-glow {
  box-shadow: 0 0 34px rgba(232, 180, 74, .75) !important;
}
#fp-devbox .fp-devbox-card.fp-special,
#fp-devbox .fp-devbox-card.fp-special-glow {
  outline: none !important;
}

/* 拡大表示でも、お楽しみ写真は印画紙を金の枠にする（一覧と揃える）。
   枠は border だと外側に足されて通常の写真よりカードが大きくなるため、
   サイズを変えない内側の線（inset box-shadow）で描く。
   基本の影(body.hs-fp(-develop)スコープの box-shadow)より詳細度で勝つよう
   同じスコープを並記し、落ち影も含めて !important で上書きする。 */
body.hs-fp #pageDetails #pageDetailsFramed.fp-special-frame,
#pageDetails #pageDetailsFramed.fp-special-frame {
  border: none !important;
  box-shadow: inset 0 0 0 3px #f2c14e,
              0 0 18px rgba(232, 180, 74, .45),
              0 4px 16px rgba(0, 0, 0, 0.25) !important;
}
#fp-devbox .fp-devbox-caption.is-final { font-weight: 700; }
/* キャプションは1文字ずつ現れる（Developing… も To ◯◯ も同じ出方にする）。
   色はサイト全体の自由CSS(color:#fff !important)に持っていかれないよう
   親から明示的に引き継ぐ。 */
#fp-devbox .fp-devbox-caption i {
  display: inline-block;
  font-style: normal;
  color: inherit !important;
  opacity: 0;
  transform: translateY(6px);
  animation: fpCapChar .24s ease forwards;
}
@keyframes fpCapChar {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
#fp-devbox .fp-devbox-frame.is-special .fp-devbox-caption.is-final {
  color: #b8860b !important;
}

/* 「キャプった!!」と同時に、背景（ライトボックス全体）が白く光る */
#fp-devbox .fp-devbox-bgflash {
  position: absolute;
  inset: 0;
  z-index: 0;               /* 写真・文字より奥で光らせる */
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    rgba(255, 255, 255, .95),
    rgba(255, 245, 220, .55) 42%,
    rgba(255, 255, 255, 0) 76%);
  animation: fpCapBgFlash .85s ease-out forwards;
}
@keyframes fpCapBgFlash {
  0%   { opacity: 0; }
  8%   { opacity: 1; }
  100% { opacity: 0; }
}

/* 現像ライトボックス表示中は背後のスクロールを止める。
   スクロールバーが残ると、その幅ぶんだけ暗幕(inset:0)が届かず
   画面の右端に元の背景が帯状に見えてしまうため。 */
/* 覆っている間は背後を動かさない。あわせて、常時確保している
   スクロールバーの溝も一時的に無くす。溝が残ると inset:0 の暗幕が
   そこまで届かず、右端に地の色が帯状に見える。
   幅を 100vw にして覆う手もあるが、中身の中央が溝を含む幅で決まるため
   写真が右へずれる（実際にずれた）。溝そのものを消すほうが確実。 */
html.fp-devbox-open,
html.fp-devbox-open body {
  overflow: hidden !important;
  scrollbar-gutter: auto !important;
}

/* 拡大表示のキャプション欄に出す宛名（当たりを現像したときだけ）。
   中央そろえ。手書き体で、印画紙のキャプションと同じ雰囲気にする。
   色はサイト全体の自由CSS(color:#fff !important)に負けない強さで指定する。 */
#fp-detail-to {
  /* クレジットを写真側へ移したので、下帯はこの宛名が主役になる。
     通常の流れに置くと印画紙の高さが伸びて下帯の基準がずれ、
     写真の下端を基準にしているクレジットの位置まで狂う。帯の中に重ねる。 */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  margin: 0;
  text-align: center;
  font-family: 'Permanent Marker', "Chakra Petch", cursive, sans-serif;
  font-size: 22px !important;
  letter-spacing: .04em;
  color: #e8b44a !important;
}
@media (max-width: 768px) {
  #fp-detail-to { bottom: 12px; font-size: 17px !important; }
}
@media (min-width: 900px) {
  #fp-detail-to { bottom: 22px; font-size: 30px !important; }
}

/* =========================================================
   ダウンロードのご注意（ページを移らずにその場で出す）
   中身は画像生成のページをそのまま枠に読み込む。
   ========================================================= */
#fp-dl-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483200;   /* 拡大表示(#zoom=99999)より前 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 8, 26, .82);
  opacity: 0;
  transition: opacity .2s ease;
}
#fp-dl-modal.is-open { opacity: 1; }
#fp-dl-modal .fp-dl-panel {
  position: relative;
  /* **画面の幅から測らない**（利用者の指摘・2026-08-25「画面をはみ出る」）。
     96vw は外枠の余白（20px×2）を知らないので、狭い画面では
     96vw > 100vw - 40px となって右へ溢れていた。
     余白は外枠に任せ、こちらは残り幅いっぱい＋上限だけを言う。 */
  width: 100%;
  max-width: 680px;
  /* 高さは中身なり。決め打ちにすると余白だらけの大きなダイアログになる */
  height: auto;
  /* 上限は**外枠の余白（20px×2）を引いた残り全部**（利用者の指示・2026-08-25
     「縦スクロールが発生しないように」）。90vh で切っていたころは画面の下に
     使わない余りが残り、そのぶん中身が早く上限に当たっていた。
     iframe 側の上限（JSの max）とこの値は対で直すこと。 */
  max-height: calc(100vh - 40px);
  /* 外枠は塗らない。中の下地と二重の面になり、色が食い違って見えるため。
     角丸と影は中の面（枠）に付ける。 */
  padding: 0;
  background: transparent;
}
/* 読み込みが終わるまでは、外枠にも面を出しておく。
   透明のままだと背後の写真が透けて、壊れているように見えるため。 */
#fp-dl-modal:not(.is-ready) .fp-dl-panel {
  min-height: 220px;
  border-radius: var(--hs-radius-surface, 16px);
  background: #fff;
  /* 影は落とさない（利用者の指示・2026-08-25「ドロップシャドウ不要」）。
     背後は暗い覆いなので、白い面だけで十分に浮いて見える。 */
}
/* 中身はこの場に組む（iframe をやめた・2026-08-25）。
   **面はここ1枚だけ**（利用者の指示・2026-08-25「背景 白のダイアログで
   ミニマルに」）。高さは中身なりで、iframe のときのような測り直しは要らない
   ―― 高さ合わせの苦労はすべて iframe 由来だった。 */
#fp-dl-modal .fp-dl-body {
  display: block;
  width: 100%;
  max-height: calc(100vh - 40px);
  overflow: auto;
  padding: 22px 26px 20px;
  border-radius: var(--hs-radius-surface, 16px);
  background: #fff;
  color: #000;
  opacity: 0;
  transition: opacity .25s ease;
}
#fp-dl-modal .fp-dl-notice { text-align: left; }
/* 見出しは本文とはっきり差を付ける（ページ側と同じ扱い）。 */
#fp-dl-modal .fp-dl-notice-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  color: #000;
}
/* 注意書きの中身はサーバーが出す（/cart/ と同じ文面）。
   見た目はここが持つ ―― ページ側（photos-imagegenerator.php）と同じ形。 */
#fp-dl-modal .fp-dl-notice ul {
  list-style-type: disc;
  padding-left: 20px;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}
#fp-dl-modal .fp-dl-notice li { margin-bottom: 6px; }
#fp-dl-modal .fp-dl-notice li:last-child { margin-bottom: 0; }
#fp-dl-modal .fp-dl-notice,
#fp-dl-modal .fp-dl-notice :where(p, ul, li, span, b, strong, div) { color: #000 !important; }
#fp-dl-modal .fp-dl-notice a { color: #007AFF !important; }

/* 出来上がった写真。canvas は隠したまま、<img> だけを見せる。 */
#fp-dl-modal .fp-dl-photo { margin: 14px 0 0; text-align: center; }
#fp-dl-modal .fp-dl-photo img {
  display: block;
  max-height: 46vh;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 8px;
}
#fp-dl-modal .fp-dl-photo-processing { margin: 0; padding: 0; }

/* --- 面は2つ（2026-08-25） -------------------------------------------
   ご注意（文章＋同意）と、保存（画像＋長押し）。ご注意のほうに画像は
   出さない（利用者の指示「ダウンロードのご注意では、画像が不要」）。

   **隠すのは display で。** 器ごと消しても canvas と <img> は描けるので、
   読んでいるあいだに画像を焼いておける（同意の先で待たせない）。 */
#fp-dl-modal .fp-dl-savehead,
#fp-dl-modal .fp-dl-photo,
#fp-dl-modal .fp-dl-donerow { display: none; }

#fp-dl-modal .fp-dl-body.is-save .fp-dl-notice,
#fp-dl-modal .fp-dl-body.is-save .fp-dl-actions { display: none; }
#fp-dl-modal .fp-dl-body.is-save .fp-dl-savehead { display: block; }
#fp-dl-modal .fp-dl-body.is-save .fp-dl-photo { display: block; margin-top: 0; }
#fp-dl-modal .fp-dl-body.is-save .fp-dl-donerow { display: flex; }

/* 保存のしかたの案内。**ここが面の主役**（利用者の指示・2026-08-25
   「スマホの場合、画像をタップして保存ということが伝わるように」）。
   押しどころのボタンが無い面なので、やることが文字でしか伝わらない。

   **色は !important で書く**（CLAUDE.md 定石3）。サイト全体の自由CSS
   （general_style_css）が `color:#fff !important` を撒いていることがあり、
   ID＋クラスの重みでは勝てない ―― 実際に白い面に白い文字で出ていた。
   注意書き側（.fp-dl-notice）は最初からそう書いてあったのに、
   こちらだけ付け忘れていた。 */
#fp-dl-modal .fp-dl-savehead {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  color: #000 !important;
  word-break: auto-phrase;
  text-wrap: pretty;
}
/* 指のしぐさを1つ添える。文字だけより先に目が留まる。 */
#fp-dl-modal .fp-dl-savehead::before {
  content: "👇";
  display: block;
  margin-bottom: 2px;
  font-size: 22px;
  line-height: 1;
}
/* 補足。長押しが要る端末があるので、そこだけ小さく断る。 */
#fp-dl-modal .fp-dl-savenote {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.7;
  text-align: center;
  color: #555 !important;
  word-break: auto-phrase;
}

/* 画像だけの面になるので、写真に高さを譲る。 */
#fp-dl-modal .fp-dl-body.is-save .fp-dl-photo img {
  /* 引く分は、写真の上下に載るものの高さ（利用者の指示・2026-08-25
     「縦スクロールが発生しないように」）――
     外枠の余白40 + 面の余白34 + 指のしぐさ24 + 見出し35 + 補足35 + 閉じる51。
     案内を足したぶん、210 では足りなくなっていた。 */
  max-height: calc(100vh - 250px);
  /* **長押しを塞がない。** 端末の「画像を保存」はここが通らないと出ない。 */
  -webkit-touch-callout: default;
  -webkit-user-select: auto;
  user-select: auto;
}

/* 閉じ口。押しどころがオレンジ1つだけの面から続くので、
   ここは控えめな地の無いボタンにして、写真の邪魔をしない。 */
#fp-dl-modal .fp-dl-donerow {
  justify-content: center;
  margin-top: 16px;
}
#fp-dl-modal .fp-dl-done {
  appearance: none;
  padding: 10px 28px;
  border: 1px solid rgba(0, 0, 0, .22);
  border-radius: 999px;
  background: transparent;
  color: #000;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

/* 押しどころ。ページ側の #downloadButton と同じ見た目にそろえる。 */
#fp-dl-modal .fp-dl-actions {
  display: flex;
  flex-direction: column;
  max-width: 300px;
  margin: 14px auto 0;
}
#fp-dl-modal .fp-dl-actions a {
  display: block;
  padding: 15px 20px;
  border-radius: 999px;
  background: #ea580c;
  color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
#fp-dl-modal .fp-dl-actions a.disabled { opacity: .5; pointer-events: none; }

/* 狭い画面では左右の余白を詰める（折り返しの多い箇条書きが細くなるため）。 */
@media (max-width: 480px) {
  #fp-dl-modal .fp-dl-body { padding: 18px 14px 16px; }
  #fp-dl-modal .fp-dl-notice ul { padding-left: 18px; }
}
#fp-dl-modal.is-ready .fp-dl-body { opacity: 1; }
#fp-dl-modal .fp-dl-loading {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #14163c !important;
  font-size: 13px;
  opacity: .8;
}
#fp-dl-modal.is-ready .fp-dl-loading { display: none; }

/* 読み込み中の輪。中身は別ページの読み込みなので、待たされていることが
   分かるように回るものを出す。 */
#fp-dl-modal .fp-dl-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(20, 22, 60, .18);
  border-top-color: #14163c;
  animation: fp-dl-spin .8s linear infinite;
}
@keyframes fp-dl-spin { to { transform: rotate(360deg); } }

/* 動きを減らす設定では回さない。輪だけ残して「待っている」ことは伝える。 */
@media (prefers-reduced-motion: reduce) {
  #fp-dl-modal .fp-dl-spinner { animation: none; }
}
#fp-dl-modal .fp-modal-close {
  position: absolute;
  /* 横は枠の内側に置く。外に出すと、枠が画面いっぱいのときに画面外へ
     はみ出して切れる（右に寄って見える原因）。
     縦は枠の上端に少しかける。外側の余白(12px)の内に収まる範囲にとどめる。 */
  top: -8px;
  right: 8px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #14163c !important;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45);
}
@media (max-width: 480px) {
  /* 覆いの内側の余白（＝面の左右に残す空き）。12px だと面が画面の縁に
     貼り付いて見えるので、少し取る（利用者の指示・2026-08-25）。 */
  #fp-dl-modal { padding: 16px; }
  #fp-dl-modal .fp-dl-panel { width: 100%; }
}


/* 現像が終わったあと、ひと呼吸おいてそっと出すダウンロードの入り口。
   見た目は一覧の拡大表示の「購入済み画像をダウンロード」と同じ白いピル。
   写真(印画紙)の下に置き、紙吹雪や粒(z:8-9)より前に出す。 */
#fp-devbox .fp-devbox-dl {
  position: absolute;
  top: calc(50% + var(--fp-frame-half, 200px) + 22px);
  /* 中央そろえに **transform を使わない**（利用者の報告「ボタンがぶれている」
     ・2026-08-20）。left:50% + translateX(-50%) では、ボタンの幅が奇数のとき
     半ピクセルずれた位置で1枚の絵として焼かれ、文字の輪郭がにじむ。
     左右0＋auto余白なら、そのずれは文字の描画側が吸収する。 */
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  /* Safari は width の fit-content に前置きが要る版がある。無いと
     width が auto に倒れ、left/right:0 のぶん**横いっぱいに伸びる**
     （利用者の報告・2026-08-20「ダウンロードボタンがこわれてみえる」）。 */
  width: -webkit-fit-content;
  width: fit-content;
  max-width: calc(100% - 44px);
  z-index: 20;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  /* 白地に黒文字（利用者の指示・2026-08-14）。
     一時期は差し色の金（#f2c14e）＋白文字にしていたが、金に白は
     コントラストが足りず文字が読みづらかった。白地＋黒文字なら
     暗い背景の上でも枠として立ち、文字自体もいちばん読める。
     サイト全体の動的CSS（general_style_css）の color:#fff !important に
     負けないよう、!important と -webkit-text-fill-color の両方で押さえる。 */
  background: #fff !important;
  color: #000 !important;
  -webkit-text-fill-color: #000;
  font-family: inherit;
  font-size: 14px !important;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  opacity: 0;
  /* 浮かび上がりは縦だけ。出たあとは transform を外して、
     合成レイヤーではなく通常の文字として描かせる（にじみ止め）。 */
  transform: translateY(8px);
  transition: opacity .6s ease, transform .6s ease;
}
/* まだ枠を使っていないコマ（鍵つき）。押すとダウンロード枠が1つ減るので、
   ただ落とすだけのボタンとは見た目を変える（利用者の指示・2026-08-19）。
   色は登録ボタンと同じ #ea580c ―― 明るい #ff8400 では白文字が読めない。
   白地の指定と同じ強さ（!important）で上書きしないと勝てない。 */
#fp-devbox .fp-devbox-dl.is-locked {
  background: #ea580c !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
#fp-devbox .fp-devbox-dl.is-locked .material-symbols-outlined {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

/* 詳細（拡大表示）の保存ボタンの見た目は、**React 側が持っている**
   （app/src/styles/captured-download.css / .hs-dlbtn）。2026-08-20 に
   テーマのクラス（.footerButton）と入れ物（#purchase_goodsController の
   .buttons > .button）から切り離したので、ここに書く必要が無くなった。
   見た目は現像直後のボタン（.fp-devbox-dl）と対のまま ―― 片方だけ変えると
   導線の途中で見た目が変わる。 */

/* （保存の確認 #fp-dl-confirm の見た目はここにあったが、面ごと廃止した
   ―― 利用者の指示・2026-08-25「これはもう使わない」。
   **形は汎用ダイアログ（.fp-dialog）が引き継いでいる**ので、
   同じ見た目が要るときはそちらを使うこと。） */

/* アイコンは字形フォントなので、文字色と同じ指定を明示的に継がせる
   （-webkit-text-fill-color は子へ自動では効かない） */
#fp-devbox .fp-devbox-dl .material-symbols-outlined {
  font-size: 18px;
  color: #000 !important;
  -webkit-text-fill-color: #000;
}
#fp-devbox .fp-devbox-dl.is-in { opacity: 1; transform: none; }

/* 「この写真のグッズを購入」。ダウンロードと同じ白いピルで、
   ダウンロードが居るときは --fp-buy-shift(58px) ぶん下に重ならず並ぶ。 */
#fp-devbox .fp-devbox-buy {
  position: absolute;
  top: calc(50% + var(--fp-frame-half, 200px) + 22px + var(--fp-buy-shift, 0px));
  /* 中央そろえは上の .fp-devbox-dl と同じ理由で transform を使わない
     （半ピクセルずれで文字がにじむ）。並ぶボタンなので対で直す。 */
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  /* Safari は width の fit-content に前置きが要る版がある。無いと
     width が auto に倒れ、left/right:0 のぶん**横いっぱいに伸びる**
     （利用者の報告・2026-08-20「ダウンロードボタンがこわれてみえる」）。 */
  width: -webkit-fit-content;
  width: fit-content;
  max-width: calc(100% - 44px);
  z-index: 20;
  padding: 12px 26px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #14163c !important;
  font-family: inherit;
  font-size: 14px !important;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .6s ease, transform .6s ease;
}
#fp-devbox .fp-devbox-buy.is-in { opacity: 1; transform: none; }

/* 当たり: 現像が終わったら、暗幕をゴールドへゆっくり切り替える。
   金の紙吹雪・金縁と合わせて「特別な1枚」の空気にする。 */
#fp-devbox { transition: background-color .9s ease; }
#fp-devbox.is-lucky {
  background-color: #e8b44a;
}
/* 中央をわずかに明るくして、平坦な塗りに見えないようにする */
#fp-devbox.is-lucky::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 44%, rgba(255, 236, 180, .55), rgba(255, 236, 180, 0) 62%);
}