@charset "UTF-8";
/* ↑ content の絵文字（🎁 等）のための明示。無いと、参照元の
   文字コード推定が外れた環境で「🎷」のような文字化けになる。 */
/* お楽しみ動画フォト — 検証用プロトタイプのスタイル
   hs_fp_enabled が有効なサイトでのみ読み込まれる。 */

/* このプロトタイプが足す要素は、幅指定に padding が上乗せされて
   画面幅を超え、横スクロール（左右の揺れ）を起こしやすい。
   自前の要素はまとめて border-box にしておく。 */
#fp-develop-bar, #fp-develop-bar *,
#fp-shutter-bar, #fp-shutter-bar *,
#fp-shop-modal, #fp-shop-modal *,
#fp-refill, #fp-refill *,
#fp-hud, #fp-hud *,
#fp-toast,
#fp-devbar, #fp-devbar * {
  box-sizing: border-box;
}

/* 押すものの文字は選択できないようにする。
   スマホでボタンを長押し・二度押しすると文字が青く選択されてしまい、
   押せていないように見える（選択が残ったまま次の操作をすることになる）。
   読ませる文章ではないので、選択できて得るものが無い。
   対象は「押すもの」だけに絞る。注意書きや残数の文言まで止めると、
   利用者が控えたいときにコピーできなくなる。 */
.fp-dev-more,
.fp-plan,
.fp-shutter-btn,
.fp-modal-close,
.fp-trial-yes,
.fp-trial-no,
.fp-buy-shutter,
.fp-refill-btn,
.fp-goods-sample-link,
#fp-develop-bar button,
#fp-shutter-bar button,
#fp-shop-modal button,
.fp-dl-agree,
.fp-dl-submit,
.fp-devbox-dl,
.fp-devbox-dl *,
#pageDetailsDownloadButtonWrap,
#pageDetailsDownloadButtonWrap *,
#pageDetailsDownloadButton,
#pageDetailsDownloadButton * {
  -webkit-user-select: none;
  user-select: none;
  /* 長押しでiOSが出す「コピー/共有」の吹き出しも止める */
  -webkit-touch-callout: none;
}

/* 手書きマーカー体（Permanent Marker）。CDNに依存せずテーマ同梱で配信する。
   現像後のキャプション「Nice Capture !」「To: ◯◯」に使う。
   ※ @font-face はセレクタ列の途中に置かないこと。置くとその前の
     セレクタ列ごと丸ごと無効になり、border-box が効かなくなる。 */
@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/permanent-marker/PermanentMarker-Regular.woff2') format('woff2');
}

/* ---------------- プレイヤー: 残回数HUD ---------------- */

#fp-hud {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9000;
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(8px);
  font-family: "M PLUS 2", sans-serif;
  font-size: 12px;
  color: #fff;
  pointer-events: none;
  white-space: nowrap;
}

#fp-hud .fp-chip {
  display: flex;
  align-items: center;
  gap: 4px;
}

#fp-hud .fp-chip b {
  font-size: 15px;
  font-weight: 700;
  color: #ffe14d;
}

#fp-hud .fp-chip.is-empty b { color: #ff5470; }

/* ---------------- シャッター: フラッシュ演出 ---------------- */

#fp-flash {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: #fff;
  opacity: 0;
  pointer-events: none;
}

#fp-flash.is-firing {
  animation: fp-flash-anim 420ms ease-out;
}

@keyframes fp-flash-anim {
  0%   { opacity: 0; }
  8%   { opacity: 0.95; }
  100% { opacity: 0; }
}

/* ---------------- トースト ---------------- */

#fp-toast {
  position: fixed;
  left: 50%;
  bottom: 120px;
  transform: translateX(-50%) translateY(10px);
  /* モーダル(購入=2147482900/案内=2147483000)の上にも出す。
     「決済画面へ移動します…」等はモーダル表示中に出るため。 */
  z-index: 2147483400;
  max-width: 88vw;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(20, 20, 40, 0.92);
  color: #fff;
  font-size: 13px;
  text-align: center;
  opacity: 0;
  transition: opacity 220ms ease, transform 220ms ease;
  pointer-events: none;
}

#fp-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* スマホはシャッターボタンが画面下にあり、トーストと近くなる。少し上げる。 */
@media (max-width: 768px) {
  #fp-toast {
    bottom: 180px;
  }
}

/* ---------------- 撮影一覧: ポラロイド枠 ---------------- */

/* 装飾（マスク／ポラロイド化）が済むまでカードを見せない。
   読み込み直後に素の一覧が一瞬見えるチラつきを防ぐとともに、
   未現像の中身が装飾前に覗いてしまうのも防ぐ。
   decorateCard が付ける data-fp-done を目印にする。 */
body.hs-fp .capturedlist[data-capturetiming]:not([data-fp-done]),
body.hs-fp-develop .capturedlist[data-capturetiming]:not([data-fp-done]) {
  visibility: hidden;
}

/* 印画紙に見立てた枠。下だけ広いのがポラロイドの特徴。
   box-sizing を指定しないと padding のぶんカードが広がり、隣のカードと重なる。 */
.capturedlist.fp-polaroid {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  background: #f4f1e8;
  padding: 12px 12px 48px;
  /* 撮影一覧側が .capturedlist に border-radius:10px !important を当てているため、
     こちらも !important で上書きする（印画紙なのでほぼ角のない見た目にする）。 */
  border-radius: 2px !important;
  /* 背景が明るいサイトでも印画紙が浮いて見えるよう、控えめな影を落とす */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.capturedlist.fp-polaroid .capturedlistImage {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  /* 印画紙の白地の上で写真が浮いて見えるように、薄い影を落とす */
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
  background: #0b0b18;
}

/* 撮影者と著作権の表示は、拡大表示と同じ組み立てにする。
   白帯ではなく写真の右下へ白で重ねる（帯は宛名の場所として空ける）。
   位置は下帯48px・左右の余白12pxから逆算する。絶対配置の基準は
   余白の外側なので、余白のぶんを足さないと写真の外に出る。 */
.capturedlist.fp-polaroid .copyright {
  position: absolute;
  left: auto;
  right: 18px;    /* 余白12px + 写真の内側へ6px */
  bottom: 54px;   /* 下帯48px + 写真の内側へ6px */
  top: auto;
  height: auto;
  display: block;
  margin: 0;
  /* サイト全体の動的CSSが本文の文字サイズを !important で当ててくるため、
     こちらも同じ強さで指定しないと拡大されてしまう。 */
  font-size: 10px !important;
  line-height: 1.45 !important;
  text-align: right;
  font-weight: 600;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .95),
               1px 0 2px rgba(0, 0, 0, .8),
               -1px 0 2px rgba(0, 0, 0, .8);
}

/* 当たりを現像したカードの宛名。拡大表示と同じく帯の中央に置く。 */
.capturedlist.fp-polaroid .fp-card-to {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12px;
  text-align: center;
  font-family: 'Permanent Marker', "Chakra Petch", cursive, sans-serif;
  font-size: 16px !important;
  letter-spacing: .04em;
  color: #e8b44a !important;
  -webkit-text-fill-color: #e8b44a !important;
  pointer-events: none;
}
/* PCは一覧のカードも大きく出るので、宛名も一回り大きくする */
@media (min-width: 900px) {
  .capturedlist.fp-polaroid .fp-card-to { bottom: 11px; font-size: 18px !important; }
}

/* ガチャの選択状態の札。**写真の右上**に置く（利用者の指示・2026-08-13
   「ラベルの位置を逆にして」―― 商品名タグと入れ替えた）。
   「購入商品を選定」タブの札と同じ言葉・同じ色分け
   （選択済＝緑／未選択＝灰）。 */
.capturedlist.fp-polaroid .fp-select-state,
#pageDetailsFramed .fp-select-state {
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 3px 12px;
  border-radius: 999px;
  background: #8a8f98;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
  z-index: 28;
}
.capturedlist.fp-polaroid .fp-select-state.is-done,
#pageDetailsFramed .fp-select-state.is-done { background: #4CAF50; }
/* 選定は済んだが送料はまだ（琥珀）。緑＝支払い済と混ざらない色にする
   （利用者の指示・2026-08-14）。 */
.capturedlist.fp-polaroid .fp-select-state.is-pending,
#pageDetailsFramed .fp-select-state.is-pending { background: #8a6520; }
/* 選べる枠がもう無い（選択不可）。灰のまま、**一段沈めて**押せないことを示す
   ―― 別の色を足すと状態が増えたように見える（利用者の指示・2026-08-15）。 */
.capturedlist.fp-polaroid .fp-select-state.is-locked,
#pageDetailsFramed .fp-select-state.is-locked { background: #5a5f68; opacity: .85; }
/* 拡大表示の札は、**広い画面だけ**一回り大きくする。スマホでは面が
   一覧のカードとほぼ同じ大きさなので、そろえたまま変えない（利用者の指示）。 */
@media (min-width: 769px) {
  #pageDetailsFramed .fp-select-state { font-size: 13px; padding: 4px 14px; }
}
/* 商品名タグ（トレカ／???）は**ポラロイド下辺の余白**へ（同じ入れ替えの片割れ）。
   基点の .fp-trial-tag（右上・top/right 20px）より強いセレクタで上書きする。

   見た目は黒い札をやめて「🎁 商品名」の素の文字にする（利用者の指示・
   2026-08-13）。余白は印画紙のクリーム色なので文字は濃色、字も一回り
   大きくして読ませる。アイコンは ::before で足す ―― マークアップ
   （React と 拡大表示のJS）を触らずに、両方へ同時に効かせるため。 */
body.hs-fp .capturedlist.fp-polaroid .fp-prize-tag {
  top: auto;
  right: auto;
  left: 50%;
  /* キャプション帯（padding-bottom: 48px）の上下中央に置く。
     中心を帯の半分（24px）に合わせ、自身の高さぶんを translate で戻す */
  bottom: 24px;
  transform: translate(-50%, 50%);
  z-index: 5;
  background: none;
  box-shadow: none;
  padding: 0;
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a;
  font-size: 15px;
}
body.hs-fp .capturedlist.fp-polaroid .fp-prize-tag::before,
body.hs-fp #pageDetailsFramed .fp-prize-tag::before {
  /* **絵文字は生で書かず、コードポイントで書く。**
     CSS の文字コードは HTTP の Content-Type が最優先で、@charset はその次。
     サーバーが text/css を charset 無し（や iso-8859-1）で返すと @charset が
     効かず、UTF-8 のバイト列が cp1252 として読まれて「ðŸŽ」に化ける
     （利用者の報告・2026-08-15）。エスケープなら文字コードに依存しない。
     \01F381 = 🎁 / \00A0 = 空白（6桁で書けば終端の空白が要らない）。 */
  content: "\01F381\00A0";
}
/* 商品名が入った瞬間のエフェクト。小さく生まれて弾み、金色がひと呼吸
   だけ差して落ち着く。scale/opacity は transform と独立したプロパティ
   なので、中央合わせの translate（transform）とは干渉しない。 */
@keyframes fp-prize-tag-in {
  0%   { scale: .4; opacity: 0; }
  55%  { scale: 1.18; opacity: 1; text-shadow: 0 0 14px rgba(232, 180, 74, .9); }
  100% { scale: 1; opacity: 1; text-shadow: none; }
}
.fp-prize-tag-in {
  animation: fp-prize-tag-in .55s cubic-bezier(.2, 1.1, .35, 1.1) both;
}
@media (prefers-reduced-motion: reduce) {
  .fp-prize-tag-in { animation: none; }
}
/* 拡大表示（詳細モーダル）も同じレイアウト: 印画紙下辺の余白に「🎁 商品名」。
   下の @media (min-width:769px) の右上指定（top/right 26px）より
   強いセレクタにしてある（.fp-prize-tag まで指定）。 */
body.hs-fp #pageDetailsFramed .fp-trial-tag.fp-prize-tag {
  /* 位置は **left:50% + translate(-50%,50%)** のまま。
     一度 left/right を 0 起点の箱に変えたが、この要素の包含ブロックは
     印画紙（#pageDetailsFramed）ではなく外側なので、左端へ飛び出した
     （利用者の報告・2026-08-14）。**包含ブロックを確かめずに
     left/right へ切り替えないこと。**

     「下にずれる」の元は2行への折り返し。中心を決め打ちしているので、
     行が増えたぶんだけ下へはみ出していた。折り返させなければ起きないので、
     1行に固定して、長い名前は端を省略する。 */
  top: auto;
  right: auto;
  left: 50%;
  bottom: 33px;                    /* 下帯（66px）の上下中央 */
  transform: translate(-50%, 50%);
  white-space: nowrap;
  max-width: calc(100% - 32px);
  overflow: hidden;
  text-overflow: ellipsis;
  background: none;
  box-shadow: none;
  padding: 0;
  color: #1a1a1a !important;
  -webkit-text-fill-color: #1a1a1a;
  /* スマホでは一覧のキャプション（15px）と同じ大きさのまま。
     20px への拡大は広い画面だけ（下の @media）。面がほぼ同じ大きさなのに
     字だけ大きいと、一覧と別の画面に見える（利用者の指示）。 */
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  z-index: 5;
}
@media (min-width: 769px) {
  /* 「プレゼント名が小さい」（2026-08-13）による拡大は広い画面だけ */
  body.hs-fp #pageDetailsFramed .fp-trial-tag.fp-prize-tag { font-size: 20px; }
}

/* ---------------- 拡大表示もポラロイドの見え方に揃える ---------------- */

/* 詳細のポラロイド化は **FPモードのときだけ**（お楽しみ動画フォト／ガチャ）。

   通常モードへ現像を持ち込んだサイト（body.hs-fp-develop）でも印画紙に
   していたが、外した（利用者の指示・2026-08-17
   「通常モードの時はポロライドの表示にしない」）。
   通常モードへ持ち込んでいるのは**現像の演出**であって、写真の見せ方は
   サイト本来のまま（素の写真）にする。
   伏せ／現像の演出そのもの（body.hs-fp-develop の他の指定）は残る。 */
body.hs-fp #pageDetails #pageDetailsFramed {
  box-sizing: border-box;
  background: #f4f1e8;
  /* 下帯（キャプション）の高さ。**ここが唯一の定義**。
     商品名の位置も撮影者表示の位置もこの値から逆算するので、
     3か所に 66px を書き写さない（書き写すと片方だけ直ってずれる）。 */
  --fp-caption-h: 66px;
  /* キャプションは2行ぶん(約39px)あるので、下の余白はそれより広く取る */
  padding: 12px 12px var(--fp-caption-h);
  border-radius: 2px !important;   /* captured.css の 15px を上書き */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}

/* 撮影一覧側は #pageDetails:not(.vertical) … に
   height:100% !important / object-fit:contain !important を当てている。
   そのままだと写真がレターボックスになり、印画紙の左右に無駄な余白が出る。
   body クラスを足して詳細度で上回り、幅なりの高さで表示させる。
   （hs-fp-develop は通常モードへの現像持ち込み時にJSが付ける同義のクラス） */
body.hs-fp #pageDetails #pageDetailsFramed #pageDetailsFramedImage {
  display: block;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);   /* 一覧の写真と同じ薄い影 */
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  /* 比率は JS がサムネイルと同じ値を入れる。枠に収めるため cover で埋める。 */
  object-fit: cover !important;
  border-radius: 0;
}

/* 枠の高さは中身なりにする。
   撮影一覧側は「画像ごとに表示サイズが変わらないように」と
   #pageDetailsFramed 自体へ aspect-ratio:16/9 を当てている。
   印画紙は下の余白が広いぶん枠全体の比率が変わるため、これを外さないと
   写真が余白へはみ出して下のキャプションに重なる。比率は画像側で持たせる。 */
body.hs-fp #pageDetails #pageDetailsFramed {
  aspect-ratio: auto !important;
  height: auto !important;
  min-height: 0 !important;
  /* overflow:hidden は付けない。前後の矢印はこの枠の内側にあり、
     left/right のマイナス値で枠の外に出しているため、クリップされて消えてしまう。 */
  overflow: visible;
}

/* キャプションは写真の上ではなく、下の印画紙の余白に置く */
/* 写真の中央に重ねていたID表示は出さない。
   同じ番号は右下のクレジット「Captured by ◯◯ (12345678)」に入っており、
   写真の真ん中に重なるぶん、見せたい部分が隠れてしまうため。 */
body.hs-fp #pageDetails #pageDetailsFramed .display-user-id,
body.hs-fp #zoom .display-user-id,
body.hs-fp-develop #zoom .display-user-id {
  display: none !important;
}

/* 撮影者と著作権の表示は、印画紙の下帯ではなく写真の右下に重ねる。
   bottom は下帯の高さ(--fp-caption-h)を基準に逆算する。
   帯の高さちょうどで写真の下端、それより大きくすると写真の中へ入る。 */
body.hs-fp #pageDetails #pageDetailsFramed .copyright_detailphoto {
  left: auto;
  right: 20px;   /* 左右の余白12px + 写真の内側へ8px */
  bottom: calc(var(--fp-caption-h, 66px) + 8px);
  top: auto;
  height: auto;
  display: block;
  margin: 0;
  font-size: 12px !important;
  line-height: 1.5 !important;
  text-align: right;
  font-weight: 600;
  /* 文字の塗りそのものを白に固定する。color だけだと、サイト全体の
     動的配色が別の色を当てていた場合に負けることがあるため。 */
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  /* 影は輪郭を締める程度にとどめる。3方向に濃く重ねていたので、
     文字のまわりが黒く縁取られて重く見えていた。
     写真の上でも読めればよいので、真下に1枚だけ薄く落とす。 */
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

/* お楽しみ写真などのバッジは、一覧のカードと同じ位置に置く。
   一覧は枠の端から5px（＝写真の角より7px外側）に出ているので、
   拡大側も写真の角からの距離が同じになるよう、枠の余白に合わせて逆算する。
   スマホは余白12px → 12-7=5px、PCは余白18px → 18-7=11px。 */
body.hs-fp #pageDetails #pageDetailsFramed .top-right-container-detail {
  top: 5px !important;
  right: 5px !important;
}

/* スマホでは拡大表示も一覧のカードと同じ入れ方に揃える。
   拡大側だけ余白と文字が大きいと、同じ印画紙なのに別物に見えてしまう。
   （一覧: padding 12/12/48・キャプション left/right 14px・高さ48px・11px） */
@media (max-width: 768px) {
  body.hs-fp #pageDetails #pageDetailsFramed,
  body.hs-fp-develop #pageDetails #pageDetailsFramed {
    padding: 12px 12px 48px;
  }

  body.hs-fp #pageDetails #pageDetailsFramed .copyright_detailphoto,
  body.hs-fp-develop #pageDetails #pageDetailsFramed .copyright_detailphoto {
    left: auto;
    right: 20px;    /* 余白12px + 写真の内側へ8px */
    bottom: 56px;   /* 下帯48px + 写真の内側へ8px */
    height: auto;
    font-size: 10px !important;
    line-height: 1.5 !important;
  }
}

/* PCでは横いっぱいに広がると余白が相対的に細くなり、印画紙に見えなくなる。
   最大幅を決めて中央に置き、余白も幅に見合う太さにする。 */
@media (min-width: 769px) {
  body.hs-fp #pageDetails #pageDetailsFramed,
  body.hs-fp-develop #pageDetails #pageDetailsFramed {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    padding: 18px 18px 86px;
  }

  body.hs-fp #pageDetails #pageDetailsFramed .copyright_detailphoto,
  body.hs-fp-develop #pageDetails #pageDetailsFramed .copyright_detailphoto {
    left: auto;
    right: 28px;    /* 余白18px + 写真の内側へ10px */
    bottom: 96px;   /* 下帯86px + 写真の内側へ10px */
    height: auto;
    font-size: 13px !important;
  }

  body.hs-fp #pageDetails #pageDetailsFramed .top-right-container-detail,
  body.hs-fp-develop #pageDetails #pageDetailsFramed .top-right-container-detail {
    top: 11px !important;
    right: 11px !important;
  }

  /* 前後の矢印は #pageDetailsFramed の内側にあり、left/right:-10px だと
     80px幅の大半が印画紙に重なる。枠の完全に外へ出す。 */
  body.hs-fp #pageDetails #pageDetailsFramed #prevButton,
  body.hs-fp-develop #pageDetails #pageDetailsFramed #prevButton {
    left: -96px !important;
  }

  body.hs-fp #pageDetails #pageDetailsFramed #nextButton,
  body.hs-fp-develop #pageDetails #pageDetailsFramed #nextButton {
    right: -96px !important;
  }
}

/* ---------------- 撮影一覧: マスク & 現像演出 ---------------- */

/* 未現像: フィルムのネガのように、うっすらとだけ像が分かる状態。
   色を反転させ、コントラストと彩度を落として何が写っているかは読み取れないようにする。
   blur はそのままだと画像の外側ににじみ出て印画紙の余白に影のように落ちるため、
   clip-path で自分の枠に閉じ込める。 */
.capturedlist.fp-undeveloped .capturedlistImage {
  clip-path: inset(0);
  filter:
    invert(1)
    sepia(0.3)
    hue-rotate(160deg)
    saturate(0.6)
    brightness(0.78)
    contrast(1.25)
    blur(2.2px);
  opacity: 0.78;
}

/* ---------------- 現像: プリンターのように上から下へ ---------------- */

/* カバーを上から順に切り落として、下に隠れている写真を出していく。 */
.fp-cover.is-printing {
  animation: fp-print-reveal 2600ms linear forwards;
}

@keyframes fp-print-reveal {
  from { clip-path: inset(0 0 0 0); }
  to   { clip-path: inset(100% 0 0 0); }
}

/* 走査線に合わせて上から出てくる、カラーの写真。
   未現像のネガの上に重ね、上端から下へ向かって見える範囲を広げる。
   カバー(25)より上・走査ヘッド(27)より下に置く。 */
.fp-reveal {
  position: absolute;
  inset: 0;
  z-index: 26;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
  /* 初期状態は完全に隠す。押した瞬間に全部見えないようにするため。
     削るのは「下」側。inset() の第1引数は上端から削る量なので、
     inset(100% 0 0 0) にすると下から生えてきて走査線と逆向きになる。 */
  clip-path: inset(0 0 100% 0);
}

/* ポラロイド枠では印画紙の余白を残し、写真面だけを覆う */
.capturedlist.fp-polaroid .fp-reveal {
  inset: 12px 12px 48px;
  border-radius: 0;
}

.fp-reveal img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fp-reveal.is-printing {
  animation: fp-print-fill 2600ms linear forwards;
}

/* 走査線と同じく、上から下へ向かって見える範囲を広げる */
@keyframes fp-print-fill {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* 走査ヘッドを走らせる領域。写真面に重ねる。 */
.fp-printer {
  position: absolute;
  inset: 0;
  z-index: 27;
  overflow: hidden;
  pointer-events: none;
}

.capturedlist.fp-polaroid .fp-printer {
  inset: 12px 12px 48px;
}

/* 走査ヘッド。粒子そのものは canvas(.fp-particles) が描くので、
   ここでは先端の光と、そのにじみだけを受け持つ。 */
.fp-printer-head {
  position: absolute;
  left: 0;
  right: 0;
  height: 36%;
  animation: fp-print-head 2600ms linear forwards;
}

/* 画像の画素から作った光の粒。走査線の手前に飛び込んでくる。 */
.fp-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* 先端まわりのにじんだ光。線を太く見せないよう、ごく薄く短く。 */
.fp-printer-head::before {
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -5px;
  height: 18px;
  background: radial-gradient(52% 100% at 50% 100%, rgba(186, 210, 255, 0.26), transparent 72%);
  filter: blur(4px);
}

/* 走査線そのもの。1pxの細い線として見せ、グローは最小限にとどめる。 */
.fp-printer-head::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7) 12%, rgba(226, 238, 255, 0.85) 50%, rgba(255, 255, 255, 0.7) 88%, transparent);
  box-shadow:
    0 0 2px rgba(255, 255, 255, 0.5),
    0 0 7px rgba(170, 198, 255, 0.3);
  opacity: 0.82;
}

/* 帯の「下端」が走査線。カバーの剥がれ位置(0%→100%)と一致させるため、
   帯の高さ(36%)ぶん手前から始めて 64% で終える。
   （以前は 100% まで動かしていたので、線だけが表示領域より先行していた） */
@keyframes fp-print-head {
  from { top: -36%; }
  to   { top: 64%; }
}


@media (prefers-reduced-motion: reduce) {
  .fp-printer-head { animation: none; }
}

/* 現像中はカバーの文言を消す（走査の邪魔になるため） */
.fp-cover.is-printing .fp-cover-label,
.fp-cover.is-printing .fp-cover-sub {
  opacity: 0;
  transition: opacity 180ms ease;
}

/* 動きを控える設定では走査を出さず、すぐに表示する */
@media (prefers-reduced-motion: reduce) {
  .fp-cover.is-printing { animation-duration: 1ms; }
  .fp-reveal.is-printing { animation-duration: 1ms; }
  .fp-printer { display: none; }
}

/* 未現像カードに重ねるカバー */
.fp-cover {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: inherit;
  cursor: pointer;
  color: #fff;
  font-family: "M PLUS 2", sans-serif;
  text-align: center;
  /* 下のネガが透けるよう半透明にする（不透明だと像が完全に隠れてしまう） */
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 10px, rgba(255,255,255,0) 10px 20px),
    linear-gradient(160deg, rgba(27, 28, 70, 0.40) 0%, rgba(14, 15, 52, 0.48) 100%);
  transition: opacity 700ms ease;
}

/* ポラロイド枠では印画紙の余白を残し、写真面だけを覆う */
.capturedlist.fp-polaroid .fp-cover {
  inset: 12px 12px 48px;
  border-radius: 0;
}

.fp-cover .fp-cover-label {
  display: inline-block;
  padding: 6px 18px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  /* 背景が白のサイトでは、動的配色の文字色(黒系)を継いで読めなくなる。
     覆いの上は常に暗い写真なので、白で固定する（塗りごと固定。
     JS側でもインラインの !important を入れており、二重の保険）。 */
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.fp-cover .fp-cover-sub {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  opacity: 0.6;
}

.fp-cover.is-hiding {
  opacity: 0;
  pointer-events: none;
}

/* 現像枠を使い切ったコマ。押しても開かないので、押せる見た目をやめる。
   pointer-events は切らない ―― 切るとカードの拡大表示へクリックが
   通り抜けて、未現像の中身が見えてしまう。タップの無効化は
   prototype-otanoshimi.js 側（.fp-cover-locked を見て伝播を止める）が行う。 */
.fp-cover.fp-cover-locked {
  cursor: default;
}
.fp-cover.fp-cover-locked .fp-cover-label {
  border-color: rgba(255, 255, 255, 0.28);
  opacity: 0.72;
  font-weight: 600;
}

/* ガチャの「商品にする1枚」を選ぶチェックと画面下の受け取りバー
   （.fp-pick-* / .fp-pickbar）は、導入した当日に廃止した
   （利用者の判断・2026-08-13「複雑になるため」）。
   選定は当選ダイアログの「◯◯を購入する」1本。 */

/* 現像中のインジケータ */
.fp-developing-note {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 26;
  padding: 3px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.06em;
  pointer-events: none;
  animation: fp-pulse 1.4s ease-in-out infinite;
}

@keyframes fp-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}

/* ポラロイド枠では、印画紙の白帯にあるキャプションと重ならないよう写真面の中に置く */
.capturedlist.fp-polaroid .fp-developing-note {
  bottom: 58px;
}

/* ---------------- お楽しみ動画フォトの見え方 ---------------- */

/* お楽しみ写真（当たり）のカード枠。
   .fp-special / .fp-special-item は現像したあとにしか付かないので、
   現像前の一覧では当たりが分からないまま（伏せたまま）になる。
   ※ ここは以前セレクタが壊れていて（閉じ忘れで後続と繋がっていた）
      どのカードにも当たっていなかった。 */
.capturedlist.fp-special,
.captured-item.fp-special-item .capturedlist {
  outline: 3px solid #e8b44a;
  outline-offset: -3px;
  box-shadow: 0 0 16px rgba(232, 180, 74, .55);
}

/* ---------------- 濃い背景では同梱の線画素材を白抜きにする ---------------- */

/* step1_bk.png / step3_frame.png は黒の線画なので、濃い背景では沈んで見えない。
   反転して白線にする。対象は同梱プリセットだけで、
   管理画面からアップロードした写真（.is-preset が付かない）は触らない。 */
body.hs-fp.hs-dark-bg .lp-step-img.is-preset,
body.hs-fp.hs-dark-bg .lp-step3-frame-img {
  filter: invert(1);
}


/* ---------------- LP: ステップの写真を小さめに ---------------- */

/* 既定サイズだと写真が主張しすぎるので、少し小さくして周囲に余白を取る。
   本番サイトのLPは変えないよう、プロトタイプ稼働中のサイトに限定する。 */
body.hs-fp .lp-steps .lp-step-img {
  max-width: 66% !important;
  padding: 14px 0 6px;
}

/* スマホは1列が狭く、そこからさらに66%にすると絵が潰れる。列幅なりに出す。 */
@media (max-width: 768px) {
  body.hs-fp .lp-steps .lp-step-img {
    max-width: 100% !important;
    padding: 10px 0 4px;
  }
}

body.hs-fp .lp-steps .lp-step2-stack {
  max-width: 84px !important;
  margin-top: 14px !important;
  margin-bottom: 6px !important;
}

/* ステップの見出しの改行位置をPCでもスマホと同じにする。
   lp-styles.php は .lp-sp-br をスマホ限定にしているが、
   PCで自然に折り返すと語の途中で切れて読みにくいため。 */
body.hs-fp .lp-steps .lp-sp-br {
  display: block;
}

/* PCは列幅に余裕があるので、写真を小さくしすぎない。
   列の左右 padding が 30px あり、それが実質の上限になっていたので合わせて詰める。 */
@media (min-width: 769px) {
  body.hs-fp .lp-steps .lp-step {
    padding-left: 14px;
    padding-right: 14px;
  }

  body.hs-fp .lp-steps .lp-step-img {
    max-width: 100% !important;
  }

  /* 写真2枚重ねは面積が大きく見えるので、ステップ1の線画より控えめにする。 */
  body.hs-fp .lp-steps .lp-step2-stack {
    max-width: 125px !important;
  }
}

/* ---------------- PC: LPがヘッダーに食い込むのを防ぐ ---------------- */

/* lp-styles.php はPCで .lp-wrapper に margin-top:-90px を当てている。
   これは「ロゴ画像が大きいと本文が下がりすぎる」ための調整なので、
   ロゴ画像が未設定のサイトでは詰めすぎてヘッダーと重なる。
   本番のレイアウトを変えないよう、プロトタイプ稼働中のサイトに限って打ち消す。 */
@media (min-width: 769px) {
  body.hs-fp:not(.hs-has-logo-image) .lp-wrapper {
    margin-top: 0;
  }
}

/* ---------------- デジタル画像提供のみ: グッズ導線を隠す ---------------- */

/* 実物グッズを提供しないモードなので、スペシャルグッズの購入ボタンは出さない。
   （選択ダイアログ内のグッズ項目は JS 側で非表示にしている） */
body.hs-fp-digital #fixedfooter {
  display: none !important;
}

/* ---------------- 撮影一覧: 隠す既存UI ---------------- */

/* シャッターを有料で買って撮る体系（お楽しみ動画フォト）では、
   撮影データのリセットと写真の削除を出さない。
   買ったぶんを消せてしまうと、回数制限も現像枠も意味を失うため。

   条件を body.hs-fp に付けているのは、**シャッターが有料のときだけ**の
   話だから。このCSSは「通常モードに演出だけ持ち込んだサイト」でも
   読み込まれる（hs_fp_presentation_only）。そちらはシャッターが無料なので、
   リセットも削除もあってよい。
   以前は条件なしで隠していたため、無料のサイトでも消せなくなっていた。 */
body.hs-fp #managePhotos,
body.hs-fp p.reset-notice {
  display: none !important;
}

/* 写真の複数選択（購入用チェックボックス）も使わない。
   1枚ずつ現像して手に入れる体験なので、まとめ選択の概念が合わない。
   買ったシャッターで撮った写真を消させない、という意味でもある。

   ラベルは **クラス** で指す。以前は label[name="CapturedImagesFrame"] と
   属性で指していたが、label の name はHTMLとして何の働きも持たない
   「この CSS のためだけに置かれた属性」だった。そうと知らずに消されると
   チェックが表に出てしまう（実際に一度そうなった）。
   意味のある目印（class="checkbox_label"）で指しておけば、この形で壊れない。 */
body.hs-fp .captured-item .checkbox.capturedImages,
body.hs-fp-develop .captured-item .checkbox.capturedImages,
body.hs-fp .captured-item label.checkbox_label,
body.hs-fp-develop .captured-item label.checkbox_label,
body.hs-fp .captured-item .checkmark,
body.hs-fp-develop .captured-item .checkmark,
body.hs-fp #pageDetailsFramed .checkboxDetail,
body.hs-fp-develop #pageDetailsFramed .checkboxDetail,
body.hs-fp #pageDetailsFramed label[for="CapturedImagesFrameDetail"],
body.hs-fp-develop #pageDetailsFramed label[for="CapturedImagesFrameDetail"],
/* 「選択した写真を削除」のフッターも出さない。
   上のチェックが隠れていれば選べないので普段は出ないが、
   隠し忘れが1つでもあると削除の導線だけが生き残ってしまう
   （実際に label の name を落としたときにそうなった）。
   買ったシャッターで撮った写真を消させない、が守りたいことなので、
   選ばせない側と、出さない側の両方で塞いでおく。 */
body.hs-fp #footer_delete,
body.hs-fp-develop #footer_delete {
  display: none !important;
}

/* デジタル画像提供のみのときは「購入した商品」タブを出さない。
   残るのが「撮影した写真」1枚だけになり、切り替え先が無いので
   タブ自体を丸ごと隠す（見出しとしては上の「あなたの写真」がある）。 */
body.hs-fp-digital .button-links {
  display: none !important;
}

/* 開始前の「写真集／アクスタは撮影された画像から選ばれます。」。
   デジタル画像提供のみのモードでは売る現物が無いので出さない。 */
body.hs-fp-digital #taptostart > p {
  display: none !important;
}

/* スマホでは手順を画面いっぱいに使う。
   lp-styles.php が .lp-steps と .lp-step の両方に左右の余白を入れていて、
   3列に分けると1列あたりが狭くなり、本文がひどく折り返すため。 */
@media (max-width: 768px) {
  /* 親の .wrapeer が width:90% なので、100% にしても画面端まで届かない。
     手順の帯だけ左右に食い出させて画面いっぱいに使う。 */
  body.hs-fp .lp-steps {
    /* 端に文字が触れないぶんだけ内側に余白を取る。
       content-box のままだと 100vw + 10px になって横スクロールが出る。 */
    box-sizing: border-box;
    padding-left: 5px;
    padding-right: 5px;
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* 各列にも余白を入れて、文字が区切りの点線に触れないようにする。
     lp-styles.php は最後の列だけ padding-right:0 にしているので、そこも揃える。 */
  body.hs-fp .lp-step,
  body.hs-fp .lp-step:last-child {
    padding-left: 5px;
    padding-right: 5px;
  }
}

/* お楽しみフォトの総数。本文より少しだけ目立たせる。 */
body.hs-fp .lp-step-count {
  display: inline-block;
  margin-top: 4px;
  font-weight: 700;
}

/* LPのステップから記号のアイコンを外し、番号だけにする。
   番号と絵の二重表示になっていて、意味の足しになっていないため。 */
body.hs-fp .lp-step-icon .material-symbols-outlined {
  display: none !important;
}

/* アイコンが消えたぶん、番号だけが左に寄らないよう中央のままにする
   （gap は要素が1つになれば効かないので、余白の調整だけ行う）。 */
body.hs-fp .lp-step-icon {
  gap: 0;
}

/* デジタル画像提供のみのときは、ヘッダーのスペシャルグッズ（買い物袋）も出さない。
   購入できるものが無いので、押しても行き止まりになる。
   リンク先は固定ページ Photobook（/captured-photobook/）。 */
body.hs-fp-digital #header li:has(> a[href*="photobook"]) {
  display: none !important;
}

/* :has() が使えない環境向けの保険。リンク自体を消して枠だけ残さないようにする。 */
body.hs-fp-digital #header a[href*="photobook"] {
  display: none !important;
}

/* お問い合わせの一文。_photo-header-styles.php が座布団（背景と余白）を
   付けているが、タブが無くなると見出しの直下に浮いて見えるため地の色に戻す。
   向こうが !important なので、こちらも同じ強さで上書きする。 */
body.hs-fp .notice {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 見出しとお問い合わせを近づける */
body.hs-fp h3.head {
  margin-bottom: 10px !important;
}

body.hs-fp .head {
  margin-bottom: 10px !important;
}

/* お楽しみ動画フォト（デジタル画像提供のみ）では、拡大表示のアクションを
   ダウンロードだけにする（グッズ購入と商品サンプルは出さない）。
   グッズ提供モード(photo_goods)や通常モードでは出る。 */
body.hs-fp-digital #purchase_goodsController a[onclick*="openGoodsSelection"],
body.hs-fp-digital #purchase_goodsController a[onclick*="openGoodsSample"] {
  display: none !important;
}

/* 登録・ログインのボタン。
   テーマの動的配色が a 要素すべてに color:#fff !important を当てるため、
   副ボタン（<a>）が薄いグレー地に白文字になって読めなくなる。
   濃い背景でも見える配色に置き換える（モーダルのボタンと同じ考え方）。 */
/* 主ボタンはオレンジの塗り。影は付けない。
   既存CTAの #ff8400 は白文字とのコントラストが2.46しかないので、
   同系で少し深い #ea580c にする（白文字3.56・背景の紺4.09・入力欄の白3.56）。
   文字は19pxの太字なので、大きい文字の基準(3.0)を満たす。 */
body.hs-fp .hs-auth-button {
  background: #ea580c !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}

body.hs-fp .hs-auth-button:hover {
  background: #d24d0a !important;
}

body.hs-fp .hs-auth-button--secondary {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: none !important;
}

body.hs-fp .hs-auth-button--secondary:hover {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* 2つのボタンは対になるものなので、間隔を詰めて高さを揃える。
   <button> と <a> で行の高さの扱いが違い、そのままだと高さがずれる。 */
body.hs-fp .hs-auth-button,
body.hs-fp .hs-auth-button--secondary {
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 58px !important;
  padding: 0 17px !important;
  line-height: 1.2 !important;
  /* 入力欄（角丸8px）と役割が違うことが形でも分かるよう、丸みを強くする */
  border-radius: 999px !important;
}

/* 入力欄の並びと送信ボタンの間は、区切りとして少し広くとる。
   逆に「登録」と「ログイン」は対になるものなので、間隔を詰めて一組に見せる。
   フォームは flex の gap:20px で並ぶので、その上に足し引きする。 */
body.hs-fp .hs-auth-button {
  margin-top: 14px !important;   /* 20 + 14 = 34px */
}

body.hs-fp .hs-auth-button--secondary {
  margin-top: -10px !important;  /* 20 - 10 = 10px */
}

/* PCでは見出しの語（ニックネーム等）が入力欄に対して大きいので、少し落とす。
   スマホは指で触る幅が狭く、今の大きさのほうが読みやすいので触らない。 */
@media (min-width: 769px) {
  body.hs-fp .hs-auth-label {
    font-size: 15px !important;
  }
}

/* 登録画面の注意書き。
   入れ物が 500px しかないため一文が収まらず「ご確認く / ださい。」と
   語の途中で折り返してしまう。PCでは一文が1行に収まる幅まで広げる。 */
@media (min-width: 769px) {
  body.hs-fp .registration_notice {
    max-width: 620px !important;
  }
}

/* ダウンロードのご注意（白背景のボックス）。
   スマホでは画面いっぱいに近く、角も大きいので、少し内側に収めて角を小さくする。
   インラインの style で書かれているため、!important で上書きする。 */
@media (max-width: 768px) {
  body.hs-fp #notice_download {
    /* padding が幅に上乗せされると 83% に収まらないので border-box にする */
    box-sizing: border-box !important;
    width: 83% !important;
    max-width: 83% !important;
    border-radius: 6px !important;
  }

  /* 箇条書きはスマホでは少し小さく */
  body.hs-fp #notice_download ul {
    font-size: 12px !important;
  }
}

/* 1枚も無いときの案内。
   「購入した商品がありません」と同じ位置・同じ見た目にそろえる
   （上30px・font-size 15px・薄くしない。書体はページに合わせて継承）。 */
/* 「〜がありません」の空表示。**撮影タブと選定タブで同じ体裁にする**
   （利用者の指示・2026-08-14）。body クラスに関係なく効かせる ――
   選定タブは通常モードでも出るので、hs-fp が付いていない状態でも
   撮影タブと同じ見え方でなければならない。 */
#fp-empty,
body.hs-fp #fp-empty,
body.hs-fp-develop #fp-empty,
/* タブSPA（spa-tabs.js）が /purchased/ から取り寄せた空状態。
   id を #fp-empty のままにすると、撮影一覧側の showEmptyNoticeIfNeeded が
   「写真があるのに空の案内がいる」と判断して消してしまうため、
   取り寄せ側はクラス名に付け替える。見た目の定義はこの1か所のまま。 */
#hs-spa-purchased .hs-spa-empty {
  /* 上下の余白は**同じ値**にする。タブとの間・下の規約リンクとの間が
     タブごとに違うと、同じ画面の別の状態に見えない。 */
  margin: 56px auto;
  padding: 0 20px;
  max-width: 600px;
  font-size: 15px;
  line-height: 1.9;
  text-align: center;
  opacity: 1;
}

/* ---------------- 撮影一覧: 残り現像枚数 ---------------- */

#fp-develop-bar,
#fp-shutter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  /* **字間はギフト帯（🎁 商品を1つ選定いただけます）を標準形にそろえる**
     （利用者の指示・2026-08-15）。あちらは1行目を gap:6px の一続きの文と
     して組んでいる。ここだけ 14px 空けていたため、「シャッター　のこり
     3 回」と語のあいだが割れて、別の作りの帯に見えていた。
     行間（6px）はそのまま ―― 2行組の見え方も標準形と同じになる。 */
  gap: 6px;
  width: min(92%, 560px);
  /* 上の余白。18px だと、すぐ上の「トラブルなどのお問い合わせはこちら」と
     枠の罫線が接して見えた（利用者の指摘・2026-08-14）。 */
  /* 帯の上を広く、下は詰める（利用者の指示・2026-08-14。2枚の見比べ）。
     上が詰まっていると問い合わせリンクと帯がひと塊に見え、
     下が空きすぎると帯と一覧が別の話に見える。 */
  /* 上の余白も !important で確定させる（利用者の指摘・2026-08-14）。
     padding と同じく、サイト全体の動的CSSに負けて効いておらず、
     問い合わせリンクと帯の罫線がくっついて見えていた。 */
  /* 上の余白は小さく。置き場（#fp-develop-slot）が先に高さを確保しており、
     帯はその中で**下寄せ**なので、余ったぶんが帯の上に空きとして出る。
     ここで大きく取ると二重に空いて、不自然な余白になる
     （利用者の指摘・2026-08-14）。 */
  margin: 14px auto 14px !important;
  /* 内側の余白。10px → 18px → 24px と広げても「文字と枠がくっつく」の指摘が
     続いた（2026-08-13, 2026-08-14 に2回）。**値が足りないのではなく、
     サイト全体の動的CSS（general_style_css）に負けて効いていなかった。**
     CLAUDE.md の定石どおり ID セレクタ＋!important で確定させる。
     上下もひと回り広げて、2行になっても罫線に触れないようにする。 */
  /* 上下は詰めぎみ、左右はゆったり（利用者の指示・2026-08-14。
     スマホの見え方を基準にそろえる）。上下を広く取ると、帯だけが
     間延びして一覧から浮いて見えた。 */
  /* **上下の余白は同値**（利用者の指示・2026-08-14「見た目上の上下の
     余白が均等になるように。このルールはずっと徹底」）。
     非対称に見える原因は padding ではなく、大きい数字の行ボックスの余り
     （.fp-dev-count b の line-height で殺してある）。ここは対称に保つ。 */
  padding: 14px 26px !important;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  font-family: "M PLUS 2", sans-serif;
  color: #fff;
  font-size: 13px;
}

/* 「次に何をすればいいか」の一文。
   数字より控えめにし、**行を分けて**置く（同じ行に続けると
   数字が埋もれて、どれが残数なのか分からなくなる）。 */
.fp-dev-hint {
  flex-basis: 100%;
  /* **2行目の体裁はギフト帯の添え書き（.hs-gift-bar-sub）を標準形にする**
     （利用者の指示・2026-08-15）。あちらは 11px / 行間1.5 / 少し落とした白で、
     行間は入れ物の gap(6px) が持つ。ここも同じにして、上マージンは持たない
     ―― 持つと gap と足し合わさり、2行の塊だけ縦に伸びる。 */
  margin-top: 0;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  opacity: 1;
  /* 金色の帯の中でも、案内は白のまま（金だと数字と競合して読みにくい）。
     濃さは opacity ではなく色そのもので落とす（標準形と同じ指定）。 */
  color: rgba(255, 255, 255, .78) !important;
}
@media (min-width: 600px) {
  .fp-dev-hint { font-size: 11px; }
}

/* ラベルの見せ方は置き場所で変えない。
   帯の中でも単独の枠でも、同じ薄さで並ぶようにする。 */
.fp-dev-label { opacity: 0.75; }

/* 現像可能数の帯では、「現像可能数」と「のこり N 枚」を**同じ行・同じ見た目**にする。
   これまではラベルだけ薄く（opacity .75）、かつ帯が align-items:center だったため、
   大きい数字の高さに引っ張られてラベルの位置が上下にずれ、別の字面に見えていた。
   文字の基準線でそろえ、濃さも合わせる（フォントは帯から継いだ M PLUS 2 で共通）。 */
#fp-develop-bar { align-items: baseline; }
#fp-develop-bar .fp-dev-label {
  opacity: 1;
  font-size: 13px;
  font-weight: 400;
}
/* 案内文は次の行に置くので、基準線そろえの対象から外す */
#fp-develop-bar .fp-dev-hint { align-self: stretch; }

/* 現像を使い切ったあとの見出し（「商品を選んでください」）。
   数を出す場面ではないので、ラベル＋数字の代わりにこれ1つが行を占める。
   残数を読む場面から、次の操作へ誘う場面に変わったことが分かるよう、
   数字と同じくらいの強さで出す。 */
#fp-develop-bar .fp-dev-lead {
  flex-basis: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  opacity: 1;
  color: #f2c14e !important;
  -webkit-text-fill-color: #f2c14e;
}

/* 帯を入れる枠。**先に高さを取っておく**ための場所で、中身はJSが差し込む。
   枠が無いと、差し込んだ瞬間に下の写真が押し下げられて画面が跳ねる。

   高さは「案内文がある2行の状態」に合わせる。残りがあるうちは案内文を
   出さないので帯自体は1行だが、使い切って案内文が出たときに高さが変わると、
   そこでもう一度跳ねる。最初から2行ぶん取っておけば、どちらの状態でも動かない。
   帯は枠の中で下寄せにして、余った空きが写真との間の余白として効くようにする。

   高さを取るかどうかは **PHP が付ける .is-reserved** で決める
   （photos-captured.php の $hs_dev_reserve）。以前は `:empty` で畳んでいたが、
   枠は初回描画では必ず空なので**常に高さ0**になり、JSが差し込んだ瞬間に
   写真一覧が一段ぶんガタッと下がっていた（利用者の報告・2026-08-14）。
   「まだ入っていない」と「入る予定が無い」を CSS では区別できない。 */
#fp-develop-slot {
  display: flex;
  flex-direction: column;
  /* **中央寄せ。** 以前は下寄せ（flex-end）で、確保した高さの余りが
     ぜんぶ帯の**上**に溜まり、外側の余白が上だけ広く見えた
     （利用者の指摘・2026-08-14「上下のmarginが不均一」）。
     中央なら余りが上下に半分ずつ割れ、帯の実際の高さが確保と多少
     ずれても見た目の余白は均等のまま。 */
  justify-content: center;
  min-height: 0;
}
/* 帯が入る画面だけ、描画の時点で場所を取っておく */
/* 確保する高さは、実際の帯の高さに合わせる。大きすぎると、その差が
   そのまま帯の上の空きになる（帯は下寄せ）。2行の案内文が入った状態で
   だいたい 76px。 */
#fp-develop-slot.is-reserved { min-height: 76px; }

/* ---- 帯エリアの縦の間隔（利用者の指示・2026-08-15「常に均一に」） ----
   タブ→帯／帯→赤枠／赤枠→一覧 の3つを同じ 14px にそろえる。
   決め方は**各要素が「下」だけを持ち、「上」は誰も持たない**。
   隣り合う margin が足し合わさらないので、どれが出ていても間隔は一定。
   （上下の両方を持たせると 14+14=28px になり、置き場の確保ぶんも乗って
   離れていた。ページ側の p.button-links と #capturedlists も同じ規則で
   photos-captured.php / captured.css にそろえてある。） */
/* **間隔は置き場（#fp-develop-slot）が gap で持つ。**
   帯と赤枠はテンプレート上 230行ほど離れていて、間にセッション選択や
   管理ブロック（FPでは display:none）が挟まる。隣り合う margin で
   詰めようとすると、その並びに左右されて中央だけ広くなった
   （利用者の指摘・2026-08-15「真ん中あいてないですか」）。
   赤枠は表示するとき JS が置き場の中へ入れる（updateShutterLeftNote）ので、
   何が間にあっても間隔は gap の 14px で確定する。 */
#fp-develop-slot {
  gap: 14px;
  /* **上の余白は置き場が持つ**（利用者の指摘・2026-08-16
     「赤の枠は margin のところです。padding ではありません」）。

     すぐ上にあるのは「トラブルなどのお問い合わせはこちら →」で、
     0 のままだと帯の罫線と接して見えていた（2026-08-14 にも同じ指摘）。
     箱の内側（padding）をいくら広げてもこの隙間は空かない ――
     空けるべきは箱の**外**。

     「上は誰も持たず、各要素が下だけを持つ」という帯エリアの規則の
     例外はここだけにする。置き場より上はこのページの見出し・リンクで、
     帯エリアの規則の外側にあるため。 */
  margin: 20px 0 14px !important;
}
#fp-develop-bar { margin: 0 auto !important; }
/* #fp-shutter-left-note の margin は**この下の自分の宣言**が持つ。
   ここに書くと、後ろにある自分の宣言に負けて効かなかった
   （同じ !important なら後勝ち・2026-08-15 に踏んだ）。 */

/* 枠に入れた帯は、枠側が余白を持つので自前の上下マージンを詰める */
#fp-develop-slot > #fp-develop-bar { margin-top: 0; }

@media (max-width: 768px) {
  /* 文字が折り返して3行になることがあるぶん、少しだけ高く取る */
  #fp-develop-slot.is-reserved { min-height: 88px; }
}

/* 残りシャッターの警告（利用者の指示・2026-08-14）。
   ガチャは商品を選んだ時点でその回が終わり、残ったシャッターは次の購入で
   **置き換えられて消える**。使い切らずに選ぶと、そのぶんは戻らない。

   **枠付き・赤で出す**（利用者の指示）。以前は帯の下に添える控えめな
   一行にしていたが、これは「損をしないための注意」なので、
   案内ではなく警告として立たせる。
   シャッターが残っている間は現像可能数の帯を畳んで、**この枠だけ**を出す
   （updateShutterLeftNote）―― 次にすることを1つに絞る。

   赤はサイト全体の動的CSS（general_style_css）の color:#fff !important に
   負けるので、!important と -webkit-text-fill-color の両方で押さえる。 */
/* **組み立ては現像可能数の帯（#fp-develop-bar）と同じ**にする（利用者の指示・
   2026-08-15「一貫性をもたせたデザインに」）。中身も帯と同じクラス
   （.fp-dev-label / .fp-dev-count / .fp-dev-hint）で組み、ここでは
   **配置を帯からそのまま写し、色だけ赤系に上書き**する。
   以前の flex(縦積み)は、文中の <b>N</b> が独立した項目になって
   「シャッターがあと / 6 / 回…」と数字だけ別の行に割れていた。 */
#fp-shutter-left-note {
  box-sizing: border-box;
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  /* 字間はギフト帯にそろえる（上の #fp-develop-bar と同じ理由・2026-08-15） */
  gap: 6px;
  width: min(92%, 560px);
  /* 上下は持たない。間隔は置き場（#fp-develop-slot）の gap と
     その下マージンが受け持つ ―― ここで 14px を持つと足し合わさって
     28px になる（利用者の指摘・2026-08-15「満たされてますか？」）。 */
  margin: 0 auto !important;
  padding: 14px 26px !important;
  border: 1px solid rgba(255, 120, 120, .55);
  border-radius: 10px;
  background: rgba(190, 40, 40, .16);
  font-family: "M PLUS 2", sans-serif;
  font-size: 13px !important;
  text-align: center;
  color: #ff9b9b !important;
  -webkit-text-fill-color: #ff9b9b;
}
/* 1行目「シャッター のこり N 回」は**白**、数字は**黄色**
   （利用者の指示・2026-08-15）。現像可能数の帯とまったく同じ配色にして、
   2つの矩形で数の読み方をそろえる。枠が注意であることは罫線・地色と
   2行目の文（赤）が伝えるので、数まで赤くしない。 */
#fp-shutter-left-note .fp-dev-label,
#fp-shutter-left-note .fp-dev-count {
  opacity: 1;
  font-size: 13px;
  font-weight: 400;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
/* 数字は帯と同じ 22px/700/line-height:1（.fp-dev-count b）。色も帯と同じ黄色 */
#fp-shutter-left-note .fp-dev-count b {
  color: #ffe14d !important;
  -webkit-text-fill-color: #ffe14d;
}
/* 2行目も**白**にして、現像可能数の帯とまったく同じ体裁にする
   （利用者の指示・2026-08-15）。文字サイズ・行間・薄さ（opacity .7）は
   共通の .fp-dev-hint がすでに持っているので、ここでは色だけを合わせる。
   -webkit-text-fill-color を明示するのは、枠の地色指定（赤系）を
   継いでしまうため ―― これが無いと iOS/Safari では赤のまま出る。 */
#fp-shutter-left-note .fp-dev-hint {
  align-self: stretch;
  /* 濃さも標準形（ギフト帯の添え書き）と同じ。白のベタだと1行目と
     同じ強さになり、どちらが主役か読み取れない。 */
  color: rgba(255, 255, 255, .78) !important;
  -webkit-text-fill-color: rgba(255, 255, 255, .78);
}
/* 帯と並ぶときの上の余白は **JS（updateShutterLeftNote）が決める**。
   隣接セレクタ（+）で詰めていたが、間に script や非表示のギフト帯が
   挟まると外れる ―― どちらの帯を見せるかを知っているのは
   updateShutterLeftNote ひとつなので、そこで marginTop を明示する
   （利用者の指摘・2026-08-15「余白を整えて」）。 */
@media (max-width: 768px) {
  #fp-shutter-left-note { font-size: 12px !important; }
}

/* サムネイルの直上に置くため、下に余白を取って詰まって見えないようにする */
#fp-shutter-bar {
  margin-bottom: 22px;
}

/* スマホでは「シャッター回数／のこりN回／追加する」が折り返して2行になる。
   横幅と文字を詰めて1行に収める。 */
@media (max-width: 768px) {
  #fp-shutter-bar {
    flex-wrap: nowrap;
    gap: 8px;
    width: calc(100% - 20px);
    padding: 9px 12px;
    font-size: 12px;
    white-space: nowrap;
  }

  #fp-shutter-bar .fp-dev-count b {
    font-size: 18px;
  }

  #fp-shutter-bar .fp-dev-more {
    flex: 0 0 auto;
    padding: 6px 12px;
    font-size: 11px;
  }
}

/* 数字も置き場所で変えない。商品ガチャの帯だけ小さいと、
   隣に並べたときに揃わない（実際そう見えていた）。 */
.fp-dev-count b {
  font-size: 22px;
  font-weight: 700;
  color: #ffe14d;
  padding: 0 3px;
  /* **行ボックスの余りを殺す。** 既定の line-height(約1.4)だと 22px の
     数字の行が縦に膨らみ、余りが行の上側に溜まって「上の余白だけ広い」
     ように見える（利用者の指摘・2026-08-14）。padding をいくら対称に
     しても、ここを殺さないと見た目は対称にならない。 */
  line-height: 1;
  display: inline-block;
}
/* 数字の差し替えを「下からせり上がる」形で見せる。
   現像から戻ったときに最初から変わっていると、減ったことに気づけない。
   is-rolling が付いている間だけ2つの数字を重ねて動かし、終わったら素に戻す。 */
.fp-develops-value.is-rolling,
.fp-shots-count b.is-rolling {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
  /* 高さが要る。行の高さぶんだけ切り取って、その外は見せない。 */
  line-height: 1.15;
}
.fp-develops-value.is-rolling .fp-roll-old,
.fp-develops-value.is-rolling .fp-roll-new,
.fp-shots-count b.is-rolling .fp-roll-old,
.fp-shots-count b.is-rolling .fp-roll-new {
  display: block;
  transition: transform .42s cubic-bezier(.2, .8, .2, 1);
}
/* 古い数字は上へ抜ける */
.fp-develops-value.is-rolling .fp-roll-old,
.fp-shots-count b.is-rolling .fp-roll-old { transform: translateY(-100%); }
/* 新しい数字は下から入る（開始位置は下、終了位置は0） */
.fp-develops-value.is-rolling .fp-roll-new,
.fp-shots-count b.is-rolling .fp-roll-new {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(0);
}
.fp-develops-value .fp-roll-new,
.fp-shots-count b .fp-roll-new { transform: translateY(100%); }

@media (prefers-reduced-motion: reduce) {
  .fp-develops-value.is-rolling .fp-roll-old,
  .fp-develops-value.is-rolling .fp-roll-new,
  .fp-shots-count b.is-rolling .fp-roll-old,
  .fp-shots-count b.is-rolling .fp-roll-new { transition: none; }
}

/* 回っている間だけ数字が白くなるのを止める（利用者の指摘・2026-08-16
   「カウンターが回るとき、文字が白になり、終わった後黄色になる」）。

   原因は**包み直し**。rollNumber は数字を <span> 2枚に作り替えるので、
   サイト全体の自由CSS（general_style_css）の `color:#fff !important` が
   その span に当たる。回り終わって素のテキストへ戻すと親の色に戻るため、
   「回っている間だけ白い」という見え方になっていた。

   色は**親から継ぐ**（inherit）。黄色を直に書かないのは、置き場所で色が
   違うため ―― 通常の帯は #ffe14d、商品ガチャの金色帯は #f2c14e。
   直に書くと、どちらかで必ず食い違う。
   ID セレクタ＋!important で取り返すのは CLAUDE.md の定石3。 */
#fp-develop-bar .fp-roll-old,
#fp-develop-bar .fp-roll-new,
#fp-shutter-bar .fp-roll-old,
#fp-shutter-bar .fp-roll-new,
#fp-shutter-left-note .fp-roll-old,
#fp-shutter-left-note .fp-roll-new,
#fp-hud .fp-roll-old,
#fp-hud .fp-roll-new,
/* ID の外に置かれた帯（ギフト帯など）にも効かせる保険。
   クラス2つ＋!important で、素の `span{color:#fff!important}` には勝つ。 */
.fp-dev-count .fp-roll-old,
.fp-dev-count .fp-roll-new,
.fp-shots-count .fp-roll-old,
.fp-shots-count .fp-roll-new {
  color: inherit !important;
  -webkit-text-fill-color: currentColor !important;
}

/* 金色の帯（商品ガチャ）では、数字も帯の色に合わせる */
.fp-gift-note .fp-dev-count b { color: #f2c14e !important; }

#fp-develop-bar .fp-dev-more,
#fp-shutter-bar .fp-dev-more {
  padding: 6px 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(100deg, #ff0055, #ff8400);
  color: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

/* ---------------- 購入モーダル ---------------- */

/* ---------------- お試し体験モード ---------------- */

/* 案内だけのモーダル。お試しのモーダルと同じ見た目を使う。 */
/* 閉じるボタンの位置（自動撮影の確認だけ×を出す） */
#fp-autoshot-modal .fp-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

#fp-autoshot-modal .fp-modal-panel { position: relative; }

#fp-autoshot-modal,
#fp-notice-modal,
#fp-trial-modal {
  position: fixed;
  inset: 0;
  z-index: 9960;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 6, 24, 0.72);
  backdrop-filter: blur(8px);
}

/* 案内は拡大表示(#zoom は 99999)の上に出す必要がある。
   拡大中に押されることがあり、後ろに回ると何も起きないように見えてしまう。 */
#fp-notice-modal {
  z-index: 2147483000;
}

/* 「商品にする1枚を選ぶ」専用のダイアログ(#fp-pick-modal)は廃止した。
   商品は現像した瞬間にコマごとで決まるようになり、複数枚現像したプランでは
   「どの写真のグッズをみてみるボタンを押すか」自体が選ぶことになったため、
   全商品／全現像済み写真から選ばせる別画面が不要になった（仕様変更）。 */

/* --- 商品を決める前の確認（現像枠が残っているとき） -------------------
   当選ダイアログ(2147482800)の**上**に出す。当選ダイアログの
   「商品を受け取る」から開くので、後ろに回ると何も起きないように見える。
   案内(2147483000)より下に置き、案内の優先は変えない。 */
.fp-confirm-modal {
  position: fixed;
  inset: 0;
  z-index: 2147482850;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 6, 24, 0.86);
  backdrop-filter: blur(8px);
}
.fp-confirm-modal.is-open { display: flex; }
.fp-confirm-modal .fp-modal-panel {
  box-sizing: border-box;
  width: min(100%, 420px);
  padding: 24px 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: linear-gradient(180deg, #1b1b3a, #12122a);
  text-align: center;
  color: #fff;
}
.fp-confirm-modal .fp-confirm-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
.fp-confirm-modal .fp-confirm-lead {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.9;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  opacity: .9;
}
/* 戻せないことは、他の行と同じ濃さで書くと読み飛ばされる */
.fp-confirm-modal .fp-confirm-warn {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  color: #ffc9c9 !important;
  -webkit-text-fill-color: #ffc9c9;
}
.fp-confirm-modal .fp-prize-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fp-confirm-modal .fp-prize-receive,
.fp-confirm-modal .fp-prize-again {
  padding: 13px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
/* 金色（fp-prize-receive）が付くのは上の「この商品に決める」
   （利用者の指示・2026-08-15 に入れ替え）。 */
.fp-confirm-modal .fp-prize-receive {
  background: linear-gradient(135deg, #f5c451, #e0952a);
  color: #241a05 !important;
  -webkit-text-fill-color: #241a05;
}
.fp-confirm-modal .fp-prize-again {
  background: transparent;
  border-color: rgba(255, 255, 255, .4);
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}

/* --- 追加現像（現像を1枚だけ買い足す・お楽しみ動画フォトのみ） ---------
   見た目の骨は確認ダイアログ(.fp-confirm-modal)を借りる。**プランの購入
   モーダルとは別物**として作ってあり（利用者の指示・2026-08-16
   「同じモーダルにプランと並べずに別にして」）、買うものは1つだけなので
   プランのカード列は出さない。

   層は購入モーダルと同じ 2147482900。現像のライトボックス(#fp-devbox)や
   当選(2147482800)の上から開く導線なので、下に置くと押しても何も
   起きないように見える。 */
.fp-extradev-modal { z-index: 2147482900; }

/* 買うものの1行（現像／1枚／金額）。カードを並べる代わりに、
   何をいくらで買うのかをこの1行だけで見せる。 */
.fp-extradev-modal .fp-extradev-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
}
.fp-extradev-modal .fp-extradev-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
.fp-extradev-modal .fp-extradev-qty {
  font-size: 13px;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  opacity: .85;
}
/* 金額は右端。数字は line-height:1 で行ボックスの余りを殺してから、
   上下の padding を同値にする（矩形の中の文字は上下の余白を均等に）。 */
.fp-extradev-modal .fp-extradev-price {
  margin-left: auto;
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  color: #f5c451 !important;
  -webkit-text-fill-color: #f5c451;
}
.fp-extradev-modal .fp-extradev-yen {
  margin-left: 2px;
  font-size: 13px;
  font-weight: 700;
  color: #f5c451 !important;
  -webkit-text-fill-color: #f5c451;
}
/* 「撮ったものは消えない」の但し書き。プランの購入と起きることが違うので
   必ず出すが、本文より一段落として読ませる。 */
.fp-extradev-modal .fp-extradev-note {
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1.8;
  text-align: left;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  opacity: .72;
}

/* --- RESULT（当選発表・仕様06） ---------------------------------------
   現像のライトボックス(#fp-devbox)の上に出す。当選は現像の直後に出るので、
   後ろに回ると「押しても何も起きない」ように見える。
   購入モーダル(2147482900)より下、案内(2147483000)より下に置き、
   受け取りを押したあとに開く購入の導線が前に来るようにする。 */
#fp-prize-modal {
  position: fixed;
  inset: 0;
  z-index: 2147482800;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 6, 24, 0.82);
  backdrop-filter: blur(8px);
}
#fp-prize-modal.is-open,
#fp-prize-modal.is-closing { display: flex; }

/* 開閉はズームで見せる（利用者の指示・2026-08-14）。
   開く＝手前に寄ってくる、閉じる＝奥に引いていく。
   閉じる側に is-closing という別クラスが要るのは、is-open を外すと
   display:none で即座に消えてしまい、閉じる動きが一切見えないため。
   JS側は is-open を外して is-closing を付け、220ms 後にDOMから外す
   （閉じアニメ 200ms ＋ 余白）。 */
#fp-prize-modal.is-open    { animation: fpModalFade .18s ease both; }
#fp-prize-modal.is-closing { animation: fpModalFadeOut .2s ease both; }
#fp-prize-modal.is-open .fp-modal-panel {
  animation: fpModalZoom .3s cubic-bezier(.2, .9, .3, 1.15) both;
}
#fp-prize-modal.is-closing .fp-modal-panel {
  animation: fpModalZoomOut .2s cubic-bezier(.4, .0, .7, .2) both;
}
/* 動きを減らす設定では出入りを付けない（中身は変わらない） */
@media (prefers-reduced-motion: reduce) {
  #fp-prize-modal.is-open,
  #fp-prize-modal.is-closing,
  #fp-prize-modal.is-open .fp-modal-panel,
  #fp-prize-modal.is-closing .fp-modal-panel { animation: none; }
}

#fp-prize-modal .fp-modal-panel {
  box-sizing: border-box;
  width: min(100%, 420px);
  padding: 24px 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: linear-gradient(180deg, #1b1b3a, #12122a);
  text-align: center;
  color: #fff;
}
#fp-prize-modal .fp-prize-eyebrow {
  font-size: 11px;
  letter-spacing: .18em;
  opacity: .7;
}
#fp-prize-modal .fp-prize-title {
  margin: 8px 0 14px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
}
/* 商品画像は形がばらばら（円・縦長・横長）なので、正方形の枠に収める
   （ラインナップのタイルと同じ考え方）。 */
#fp-prize-modal .fp-prize-image {
  width: 180px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  box-sizing: border-box;
  /* **白で塗る。** 商品画像は背景が透過（PNG）のものがあり、半透明の枠だと
     後ろのダイアログの濃い地色が透けて商品が沈む
     （ラインナップの扇形カード・プランカードの枠と同じ扱い）。 */
  background: #fff;
  border-radius: 14px;
}
/* 紙吹雪はダイアログの**後ろ**へ。中身（見出し・画像・ボタン）に重ねると
   商品が読み取りにくくなる。 */
.fp-prize-modal .fp-devbox-confetti { z-index: 0; }
.fp-prize-modal .fp-modal-panel { position: relative; z-index: 1; }
#fp-prize-modal .fp-prize-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
/* 複数画像のフェード送り（メイン画像が無くサンプルを順に見せるとき）。
   flex の流れに任せると横に並んでしまうので、重ねて置いて
   opacity だけで入れ替える。枠の大きさは1枚のときと同じ。 */
#fp-prize-modal .fp-prize-image.is-multi { position: relative; }
#fp-prize-modal .fp-prize-image.is-multi img {
  position: absolute;
  inset: 10px;               /* 枠の padding と同じだけ内側に */
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: contain;
  opacity: 0;
  transition: opacity .6s ease;
}
#fp-prize-modal .fp-prize-image.is-multi img.is-on { opacity: 1; }
#fp-prize-modal .fp-prize-lead {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.8;
  opacity: .9;
}
#fp-prize-modal .fp-prize-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#fp-prize-modal .fp-prize-receive,
#fp-prize-modal .fp-prize-again {
  padding: 13px 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
#fp-prize-modal .fp-prize-receive {
  background: linear-gradient(135deg, #f5c451, #e0952a);
  color: #241a05;
}
#fp-prize-modal .fp-prize-again {
  background: transparent;
  border-color: rgba(255, 255, 255, .4);
  color: #fff;
}
#fp-prize-modal .fp-prize-note {
  margin: 14px 0 0;
  font-size: 11px;
  line-height: 1.7;
  opacity: .65;
}
/* 当選ダイアログの「商品サンプルを見る」。控えめなテキストリンク */
#fp-prize-modal .fp-prize-sample {
  margin: 10px 0 0;
  font-size: 12px;
}
#fp-prize-modal .fp-prize-sample a {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  text-decoration: underline;
  opacity: .85;
}
/* すでに他の写真の商品を受け取り済み／このコマ自体を受け取り済みのとき。
   「受け取る」ボタンの代わりに出す一文。悪い知らせではないので、
   note(灰色)より少し目立たせつつ、当たりの金色(fp-prize-receive)とは
   区別が付くよう控えめな色にする。 */
#fp-prize-modal .fp-prize-locked {
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  font-size: 13px;
  line-height: 1.7;
  opacity: .9;
}

#fp-autoshot-modal.is-open,
#fp-notice-modal.is-open,
#fp-trial-modal.is-open { display: flex; }

#fp-autoshot-modal .fp-modal-panel,
#fp-notice-modal .fp-modal-panel,
#fp-trial-modal .fp-modal-panel {
  box-sizing: border-box;
  width: min(100%, 420px);
  padding: 26px 24px 22px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: linear-gradient(165deg, #1b1d52, #12143c);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
  font-family: "M PLUS 2", sans-serif;
  color: #fff;
  text-align: center;
  animation: fp-modal-in 260ms cubic-bezier(0.2, 1, 0.4, 1);
}

#fp-autoshot-modal .fp-trial-title,
#fp-notice-modal .fp-trial-title,
#fp-trial-modal .fp-trial-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 700;
}

#fp-notice-modal .fp-trial-lead b { color: #ffe14d; }

#fp-autoshot-modal .fp-trial-lead,
#fp-notice-modal .fp-trial-lead,
#fp-trial-modal .fp-trial-lead {
  margin: 0 0 20px;
  font-size: 12px;
  line-height: 1.8;
  opacity: 0.78;
}

#fp-trial-modal .fp-trial-points {
  margin: 0 0 20px;
  padding: 14px 16px;
  list-style: none;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 13px;
  line-height: 2;
  text-align: left;
}

#fp-trial-modal .fp-trial-points b { color: #ffe14d; }

#fp-autoshot-modal .fp-trial-actions,
#fp-notice-modal .fp-trial-actions,
#fp-trial-modal .fp-trial-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

#fp-autoshot-modal .fp-trial-yes,
#fp-notice-modal .fp-trial-yes,
#fp-trial-modal .fp-trial-yes,
#fp-trial-modal .fp-trial-no {
  width: 100%;
  padding: 13px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

#fp-autoshot-modal .fp-trial-yes,
#fp-notice-modal .fp-trial-yes {
  border: 0;
  background: #fff;
  color: #14163c;
}

/* 「お試しで体験する」は進めるほうの選択なので、登録ボタンと同じオレンジにする。
   白文字を載せるため、明るい #ff8400（白と2.46）ではなく
   登録ボタンと同じ #ea580c（白と3.56）にして読める側へ寄せる。 */
#fp-trial-modal .fp-trial-yes {
  border: 0;
  background: #ea580c;
  color: #fff;
}

#fp-trial-modal .fp-trial-yes:hover {
  background: #d24d0a;
}

/* 押したときの枠（ブラウザ既定のフォーカスリング）は出さない。
   開いた直後に自動で当てているだけで、選び直しの目印にはならないため。 */
#fp-trial-modal .fp-trial-yes:focus,
#fp-trial-modal .fp-trial-no:focus,
#fp-trial-modal .fp-trial-yes:focus-visible,
#fp-trial-modal .fp-trial-no:focus-visible {
  outline: none;
  box-shadow: none;
}

#fp-trial-modal .fp-trial-no {
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  color: #fff;
}

#fp-trial-modal button[disabled] { opacity: 0.6; cursor: default; }

/* 撮影一覧で「お試しで撮った写真」に付ける印。
   印画紙の外ではなく写真面の右上に置くため、枠の余白ぶんを差し引く。 */
/* 拡大表示の枠にも印を置けるように、位置の基準を持たせる */
body.hs-fp #pageDetailsFramed {
  position: relative;
}

body.hs-fp .fp-trial-tag {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 28;
  padding: 4px 9px;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  font-family: "M PLUS 2", sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* ガチャの当たり商品タグ（コマ右上の「トレカ」「??? 」等）は黒地×白文字
   （利用者の指示・2026-08-13）。お試しの赤い印とは意味が違うので色で分ける。 */
body.hs-fp .fp-prize-tag {
  background: #000;
  color: #fff;
}

/* セッションカードの右上に出す「お試し可能」。
   カード内の要素は絶対配置で置かれているので、基準を確実にしておく。 */
body.hs-fp .list-session {
  position: relative;
}

/* 角Rはカードの角と**同心円**にする（利用者の指示・2026-08-14）。
   同心円になる条件は「外側の半径 − 内側の半径 ＝ 内側までの余白」。
   バッジはピル（高さの半分が半径）のままにしたいので、動かすのは**余白**のほう。

     カードR 15px − ピルR 10.5px = 4.5px … 通常のカード
     カードR 15px − ピルR 9px    = 6px   … 端末幅768px以下（バッジが一回り小さい）
     カードR 28px − ピルR 10.5px = 17.5px … LP v2 の900px以上（.list-session が28px）

   ピルRは「上下padding×2 ＋ font-size（line-height:1）」の半分。
   padding か font-size を変えたら、ここの余白も一緒に計算し直すこと
   ―― 片方だけ直すと角の曲がりがカードとずれる。 */
body.hs-fp .fp-trial-badge {
  position: absolute;
  top: 4.5px;
  right: 4.5px;
  z-index: 6;
  padding: 5px 11px;                /* 高さ 5+11+5 = 21px → ピルR 10.5px */
  border-radius: 999px;
  /* 白地に黒文字（利用者の指示・2026-08-14）。
     サイト全体の動的CSS（general_style_css）が .list-session の中の文字を
     color:#fff !important で塗るので、!important と -webkit-text-fill-color の
     両方で押さえないと白地に白文字になる。 */
  background: #fff !important;
  color: #000 !important;
  -webkit-text-fill-color: #000;
  font-family: "M PLUS 2", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

@media (max-width: 768px) {
  body.hs-fp .fp-trial-badge {
    top: 6px;
    right: 6px;
    padding: 4px 9px;               /* 高さ 4+10+4 = 18px → ピルR 9px */
    font-size: 10px;
  }
}

/* LP v2 のPCではカードの角が 28px（lp-styles.php）。同心円を保つため余白も広げる */
@media (min-width: 900px) {
  body.hs-fp .wrapeer.lp2-mode .list-session .fp-trial-badge {
    top: 17.5px;
    right: 17.5px;
  }
}

/* 拡大表示は印画紙の余白が広いので、写真面の角に合わせる */
@media (min-width: 769px) {
  body.hs-fp #pageDetailsFramed .fp-trial-tag {
    top: 26px;
    right: 26px;
    padding: 5px 11px;
    font-size: 11px;
  }
}

/* ---------------- 購入完了モーダル ---------------- */

#fp-done-modal {
  position: fixed;
  inset: 0;
  z-index: 9950;   /* 購入モーダルより上に出す */
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 6, 24, 0.72);
  backdrop-filter: blur(8px);
}

#fp-done-modal.is-open { display: flex; }

#fp-done-modal .fp-modal-panel {
  position: relative;
  box-sizing: border-box;
  width: min(100%, 420px);
  padding: 30px 24px 24px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: linear-gradient(165deg, #1b1d52, #12143c);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
  font-family: "M PLUS 2", sans-serif;
  color: #fff;
  text-align: center;
  animation: fp-modal-in 260ms cubic-bezier(0.2, 1, 0.4, 1);
}

#fp-done-modal .fp-done-mark {
  width: 54px;
  height: 54px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: #2fbf71;
  color: #fff;
  font-size: 30px;
  line-height: 54px;
  font-weight: 700;
}

#fp-done-modal .fp-done-title {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
}

#fp-done-modal .fp-done-plan {
  margin: 0 0 18px;
  font-size: 12px;
  line-height: 1.7;
  opacity: 0.72;
}

#fp-done-modal .fp-done-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  text-align: left;
}

/* 見出し・増加数・残数の3つを流し込む。
   flex + width:100% だと残数が同じ行の幅を奪い、見出しが1文字ずつ
   縦に折り返してしまうため、行と列を明示できる grid にする。 */
#fp-done-modal .fp-done-row {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2px 12px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
}

#fp-done-modal .fp-done-label {
  min-width: 0;
  font-size: 13px;
}

#fp-done-modal .fp-done-gain {
  font-size: 20px;
  font-weight: 700;
  color: #ffe14d;
  white-space: nowrap;
  text-align: right;
}

/* 残数は次の行いっぱいを使って右寄せ */
#fp-done-modal .fp-done-left {
  grid-column: 1 / -1;
  font-size: 11px;
  opacity: 0.62;
  text-align: right;
}

/* 開いたときに自動でフォーカスを当てているぶん、ブラウザの標準の枠が
   出てしまう。押す場所は白い大きなボタンで明らかなので枠は出さない。
   （フォーカス自体は残すので、そのままEnterで進める） */
#fp-done-modal .fp-done-ok:focus,
#fp-done-modal .fp-done-ok:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
#fp-done-modal .fp-done-ok {
  width: 100%;
  padding: 13px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: #14163c;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

#fp-done-modal .fp-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

#fp-shop-modal {
  position: fixed;
  inset: 0;
  /* 撮影一覧の拡大表示(#zoom=99999)の上からも開けるようにする。
     保存不可の案内(#fp-notice-modal=2147483000)から遷移してくるため、
     その直下に置く（案内→購入の順で重なっても隠れない）。 */
  z-index: 2147482900;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 6, 24, 0.72);
  backdrop-filter: blur(8px);
}

#fp-shop-modal.is-open { display: flex; }

#fp-shop-modal .fp-modal-panel {
  position: relative;
  /* 3枚のプランを横に並べる画面なので、狭いとカードの中が縦に伸びて
     商品名まで読みにくくなる。広い画面ではもっと使う。 */
  width: min(100%, 860px);
  max-height: 88vh;
  overflow-y: auto;
  padding: 26px 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: linear-gradient(165deg, #1b1d52, #12143c);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
  font-family: "M PLUS 2", sans-serif;
  color: #fff;
  animation: fp-modal-in 260ms cubic-bezier(0.2, 1, 0.4, 1);
}

@keyframes fp-modal-in {
  from { transform: translateY(12px) scale(0.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

#fp-shop-modal .fp-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

#fp-shop-modal .fp-modal-close:hover { background: rgba(255, 255, 255, 0.2); }

/* 枠切れで開いたときの案内 */
#fp-shop-modal .fp-shop-alert {
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 92, 138, 0.5);
  border-radius: 8px;
  background: rgba(255, 0, 85, 0.12);
  color: #ffd0dd;
  font-size: 12.5px;
  line-height: 1.7;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  #fp-shop-modal .fp-modal-panel { animation: none; }
}

/* 使い切ったときは面ごと色を変える。枠線と数字の色だけだと、
   帯そのものは他と同じ見た目のままで「もう開けない」ことが伝わりにくい。 */
#fp-develop-bar.is-empty {
  border-color: rgba(255, 92, 138, 0.6);
  background: rgb(126 0 36 / 47%);
}
/* 数字はここでも黄色のまま。面の色と枠線で「もう開けない」ことは伝わるので、
   数字まで赤にすると、読ませたい数（0）が警告色に埋もれて読みにくくなる。 */

/* ---------------- TOP: 現像の追加購入 ---------------- */

#fp-shop {
  max-width: 720px;
  margin: 32px auto 8px;
  padding: 22px 20px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
  font-family: "M PLUS 2", sans-serif;
  color: #fff;
}

.fp-shop-head { text-align: center; }

.fp-shop-title {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
}

.fp-shop-lead {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.75;
  opacity: 0.75;
}

.fp-shop-balance {
  margin-top: 12px;
  font-size: 12px;
  opacity: 0.9;
}

.fp-shop-balance b {
  font-size: 20px;
  font-weight: 700;
  color: #ffe14d;
  padding: 0 3px;
}

.fp-plans {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-top: 18px;
}

.fp-plan {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 10px 15px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  color: #fff;
  font-family: inherit;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.fp-plan:hover { border-color: #ff5c8a; background: rgba(255, 0, 85, 0.14); }
.fp-plan:active { transform: translateY(1px); }
.fp-plan[disabled] { opacity: .5; cursor: default; }

/* 商品名は途中で折り返さない（「スタンダー／ド」のような割れ方を防ぐ）。
   改行してよい箇所は JS が <br> で明示しているので、行の中では折らない。 */
.fp-plan-name { font-size: 12px; letter-spacing: .06em; opacity: .8; white-space: nowrap; }
.fp-plan-price { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.fp-plan-shots { font-size: 12px; color: #ffe14d; white-space: nowrap; }
.fp-plan-shots small { display: block; font-size: 10px; opacity: .65; color: #fff; }

.fp-shop-note {
  margin: 14px 0 0;
  font-size: 10px;
  letter-spacing: .04em;
  text-align: center;
  opacity: .5;
}

/* 残高の枠に2つ並べるときの区切り */
.fp-shop-balance .fp-shop-balance-sep {
  margin: 0 10px;
  opacity: .45;
}
/* 「シャッター回数のこり◯回」「🎁 商品プレゼントのこり◯個」は、それぞれを
   ひとまとまりとして扱う。折り返しは2つの間だけで起き、アイコンや数字が
   文言から切り離されて行末に取り残されない。 */
.fp-shop-balance .fp-shop-balance-item {
  display: inline-block;
  white-space: nowrap;
}
/* スマホでは横に「/」で並べると窮屈で、どこまでが1項目か読み取りにくい。
   2項目を上下に積み、区切りは「/」ではなく水平の罫線にする。 */
@media (max-width: 768px) {
  /* 枠ぜんぶで1つのグリッドにして、2段が「ラベル / 数字 / 単位」の
     同じ3列を共有するようにする。行ごとに中央寄せすると、ラベルの
     文字数の違いで数字の位置がずれて見えるため。 */
  .fp-shop-balance {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    justify-content: center;
    align-items: baseline;
    column-gap: 6px;
    padding: 10px 14px;
  }
  /* 行そのものは器を持たず、中の3つを直接グリッドへ流し込む */
  .fp-shop-balance .fp-shop-balance-item { display: contents; }
  .fp-shop-balance .fp-balance-label { text-align: right; }
  .fp-shop-balance .fp-balance-unit  { text-align: left; }
  /* 「/」だったspanを、そのまま段の区切り線として使う。
     上下の余白（10px）は枠の内側の余白と同じにして、間延びを防ぐ。 */
  .fp-shop-balance .fp-shop-balance-sep {
    grid-column: 1 / -1;
    height: 1px;
    margin: 10px 0;
    background: rgba(255, 255, 255, .18);
    font-size: 0;
    color: transparent;
    opacity: 1;
  }
  /* 数字を下へずらすと、その段だけ下側が広く見える。基準線に戻す。
     後ろにある .fp-shop-balance b（vertical-align:-2px）に勝つよう、
     項目クラスを挟んで詳細度を上げている。 */
  .fp-shop-balance .fp-shop-balance-item b {
    vertical-align: baseline;
    text-align: center;
  }
}

/* 「商品サンプルはこちら」（購入モーダルの中のリンク） */
/* 送料が別にかかることの一行。以前は「商品ガチャとは何か」を説明する
   大きな枠の中にあったが、枠ごと出すとプランの比較から
   目がそれるため、費用の話だけを小さく残した。
   薄いグレー(.fp-shop-note)にはしない。**買う前に知っておくべき費用**で、
   読み飛ばされては困るため、金色で少しだけ目立たせる。 */
.fp-shop-shipping {
  margin: 12px 0 0;
  text-align: center;
  /* 冒頭の案内文（.fp-shop-lead）と同じ大きさにそろえる。
     900px 以上での拡大も同じ値で追随させること（下の @media）。 */
  font-size: 12px;
  line-height: 1.7;
  color: #f2c14e !important;
  -webkit-text-fill-color: #f2c14e;
  opacity: .95;
}
.fp-shop-shipping b {
  color: #f2c14e !important;
  -webkit-text-fill-color: #f2c14e;
  font-weight: 800;
}
.fp-shop-sample {
  margin: 12px 0 0;
  text-align: center;
  /* 同上。.fp-shop-lead とそろえる */
  font-size: 12px;
}
.fp-shop-sample .fp-goods-sample-link {
  color: #cfd6ff !important;
  -webkit-text-fill-color: #cfd6ff;
  text-decoration: underline;
  cursor: pointer;
}

/* 商品サンプル本体。購入モーダル(2147482900)の上に重ねる。
   プラン選択は閉じずに残し、×か背景で戻れるようにする。 */
#fp-goods-sample {
  position: fixed;
  inset: 0;
  z-index: 2147482950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 6, 24, .82);
}
#fp-goods-sample .fp-goods-sample-panel {
  position: relative;
  width: min(100%, 820px);
  height: min(86vh, 900px);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
}
#fp-goods-sample iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
/* ×はパネルの角に重ねる（PC）。スマホでは画面内に収まるよう内側へ寄せる。 */
#fp-goods-sample .fp-modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #222;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
  z-index: 1;
}
@media (max-width: 768px) {
  #fp-goods-sample { padding: 14px; }
  #fp-goods-sample .fp-modal-close { top: 10px; right: 10px; }
}

/* プランカードの「商品プレゼント N個」 */
.fp-plan .fp-plan-gift {
  display: block;
  /* 上の余白と太字は外した（利用者の指示・2026-08-13）。
     3行（シャッター・現像・商品決定）は**等間隔・同じ太さ**で並べる。
     余白や太字で3行目だけ持ち上げると、別の情報のように見えていた。
     数字の強調は3行共通の .fp-plan-row-value が持つ。 */
  font-size: 11px;
  line-height: 1.5;
  color: #f2c14e !important;
  /* スマホの狭い幅だと「商品プレゼント」が文字の途中で折り返されるため、
     改行してよいのは<br>の位置だけにする（単語の途中では折り返さない）。 */
  word-break: keep-all;
  overflow-wrap: normal;
}

/* プランごとに当たる商品が違うことを、名前と写真で伝える。

   画像は**常に1枚だけ**を大きく見せ、候補が複数あるときは重ねて
   クロスフェードする（切り替えは JS の startPlanGoodsFade）。
   以前は商品の数だけ横に並べていたが、カード幅が狭い（3列）ため
   1枚30pxまで縮んで何の商品か分からず、さらに3件のときは2行に
   折り返して、そのぶん商品名の開始位置がカードごとにずれていた。 */
.fp-plan .fp-plan-goods-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  /* 数字の3行と商品画像がくっつかないように、ひと呼吸あける
     （利用者の指示・2026-08-13）。スマホの縦積みは罫線＋余白を
     モバイル用ブロックが別に持つ。 */
  margin-top: 14px;
}
/* 枠は**候補の数にも画像の有無にもよらず同じ大きさ**。
   これがそろっているから、下に続く商品名の上端が3枚のカードでそろう。 */
/* --- プランカードの3行（シャッター／現像／商品決定）を同じ見え方にそろえる ---
   1行目 = アイコン＋ラベル、2行目 = 数字＋単位。
   3つとも同じ字の大きさ・同じ行間にする。以前は 12px / 12px / 11px と
   ばらばらで、現像だけ数字が先、商品決定だけ絵文字付きだった。 */
/* ラベルと数字は**左右に並べる**。縦に積むとカードが間延びし、
   3行ぶんで6行になって、下の商品名まで押し下げていた。 */
.fp-plan .fp-plan-shots,
.fp-plan .fp-plan-develops,
.fp-plan .fp-plan-gift {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
}
.fp-plan .fp-plan-row-label,
.fp-plan .fp-plan-row-value {
  white-space: nowrap;
}
.fp-plan .fp-plan-shots,
.fp-plan .fp-plan-develops,
.fp-plan .fp-plan-gift {
  font-size: 12px;
  line-height: 1.55;
}
/* 数字は少し強めに出す（プランを比べる決め手になるため） */
.fp-plan .fp-plan-row-value {
  font-weight: 800;
}
@media (min-width: 900px) {
  .fp-plan .fp-plan-shots,
  .fp-plan .fp-plan-develops,
  .fp-plan .fp-plan-gift {
    font-size: 13px;
  }
}

.fp-plan .fp-plan-goods-stage {
  position: relative;
  display: block;
  /* 商品が何かを見て分かる大きさにする（元の 64px では判別できなかった）。
     ただしスマホでは3枚が横に並ぶのでカードが狭く、96px では枠が
     カードいっぱいになって窮屈だった。広い画面だけ大きくする（下の @media）。 */
  width: 76px;
  aspect-ratio: 1 / 1;
  flex: none;
  /* **白で塗る。** 商品画像は背景が透過（PNG）のものがあり、半透明の枠だと
       後ろのモーダルの濃い地色が透けて商品が沈む。白い台紙に載せる
       （ラインナップの扇形カードと同じ扱い）。 */
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}
/* 重ねて置き、is-on の1枚だけを見せる。
   商品によって円形・縦長・横長とばらばらなので contain で枠に収める。 */
.fp-plan .fp-plan-goods-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 5px;
  box-sizing: border-box;
  object-fit: contain;
  display: block;
  opacity: 0;
  transition: opacity 700ms ease;
}
.fp-plan .fp-plan-goods-img.is-on { opacity: 1; }
.fp-plan .fp-plan-goods-names {
  /* 「もう少し大きく」の指示（2026-08-13）で 9px → 11px。
     当たる商品はプランを選ぶ決め手なので、読ませる大きさにする。 */
  /* 画像と文字の間にひと呼吸（利用者の指示・2026-08-13） */
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
  color: #f2c14e !important;
  /* PCでは太字にしない（利用者の指示・2026-08-13）。金色の細めの字で
     数字の行と強弱を分ける。スマホの縦積みでは下のモバイル用ブロックが
     太字を戻す（行が長く、細字だと濃紺の地に沈むため）。 */
  font-weight: 400;
  text-align: center;
  /* 名前は折り返してよい。枠と違って文章として読ませたいため */
  word-break: break-word;
}
/* 商品ごとに1行。区切り文字の途中で折り返らないようにするため、
   「／」の連結ではなく1件ずつのブロックにしてある（JS側と対）。 */
.fp-plan .fp-plan-goods-names .fp-plan-goods-name {
  display: block;
}
@media (min-width: 900px) {
  .fp-plan .fp-plan-goods-stage { width: 116px; }
  .fp-plan .fp-plan-goods-names { font-size: 12px; }
}
/* 動きを減らす設定では、切り替えは残しつつフェードだけ止める
   （切り替え自体を止めると、2枚目以降の商品が見られなくなる）。 */
@media (prefers-reduced-motion: reduce) {
  .fp-plan .fp-plan-goods-img { transition: none; }
}

/* ---------------- 撮り切ったあとの導線 ---------------- */

#fp-refill {
  position: fixed;
  left: 50%;
  top: 50%;                       /* 画面中央に置く（シャッターボタンと重ならない） */
  bottom: auto;
  transform: translate(-50%, -50%);
  /* 少し遅れて、ズームインしながらふわっと出す（利用者の指示・2026-08-13）。
     撮り切った直後は最後のフラッシュの余韻があるので、一呼吸おいてから。
     拡大は scale プロパティで行う ―― transform は中央合わせの translate が
     使っているので、そこには触らない。 */
  animation: fp-refill-in .45s ease-out .6s both;
  z-index: 9400;
  width: min(88vw, 380px);
  padding: 16px 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  background: rgba(14, 15, 52, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45);
  font-family: "M PLUS 2", sans-serif;
  color: #fff;
  text-align: center;
}

.fp-refill-t { font-size: 13px; opacity: .85; }

.fp-refill-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 11px 14px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(100deg, #ff0055, #ff8400);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.fp-refill-btn[disabled] { opacity: .55; cursor: default; }

/* ---------------- 端末が横向き（プレイヤーが強制回転）のとき ---------------- */

/* プレイヤーは #base を -90deg 回して横向き表示にする。
   body 直下のオーバーレイは回らないので、同じだけ回して向きを揃える。 */

/* 残回数HUD: 回転後の「上」＝画面の左端に寄せる */
body.fp-rotated #fp-hud {
  top: 50%;
  left: 34px;
  transform: translate(-50%, -50%) rotate(-90deg);
}

/* 追加ショットの案内: 中央に置いて回す */
@keyframes fp-refill-in {
  from { opacity: 0; scale: .85; }
  to   { opacity: 1; scale: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #fp-refill { animation: none; }
}

body.fp-rotated #fp-refill {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: min(72vh, 380px);
  transform: translate(-50%, -50%) rotate(-90deg);
}

/* トースト。
   回転中は映像としての「上」が画面の左になるので、right を広げるほど上に寄る。
   シャッターボタン（画面の右端）からも離れる。 */
body.fp-rotated #fp-toast {
  top: 50%;
  left: auto;
  right: 124px;
  bottom: auto;
  /* 回転中は文の長さが画面の高さ方向に伸びる。折り返さず1行で出す。
     画面の高さいっぱいまで使えるので、日本語1文なら収まる。 */
  max-width: 92vh;
  white-space: nowrap;
  transform: translate(50%, -50%) rotate(-90deg);
}

body.fp-rotated #fp-toast.is-visible {
  transform: translate(50%, -50%) rotate(-90deg);
}

/* 購入モーダル・当選演出は中身のパネルごと回す */
body.fp-rotated #fp-shop-modal .fp-modal-panel {
  width: min(86vh, 620px);
  max-height: 84vw;
  transform: rotate(-90deg);
}

/* 回したパネルは、開くときのズームで transform を奪われると向きが戻ってしまう。
   （@media はセレクタの後ろに書けない。以前そう書いてしまい規則ごと無効だった） */
body.fp-rotated #fp-shop-modal .fp-modal-panel { animation: none; }

/* 自動開始（TAP TO START を挟まない）の進行中は、タップ案内を一瞬も出さない。
   player.php が100ms間隔で inline の display を書き直すため、!important で上書きする。
   音あり再生が許可されなかったときは JS がこのクラスを外し、従来どおり表示される。 */
body.fp-autostarting #taptostart { display: none !important; }


/* ---------------- プレイヤー: シャッター残数バッジ ---------------- */

/* 直近に撮った写真を動画の上に出す白枠のサムネイル。
   ポラロイドモードでは現像するまで中身を見せない建て付けなので出さない。
   写真一覧への導線はヘッダーのフォトマークが担う。 */
body.hs-fp #buttonYourPhotos {
  display: none !important;
}

/* シャッターボタンは overflow:hidden（丸く切り抜くため）なので、
   そのままだと外に出したバッジがクリップされて消える。ここだけ解除する。
   ボタンの中身はCSSで描かれており、はみ出す要素は無いので影響はない。 */
body.hs-fp #buttonCapture {
  overflow: visible !important;
}

/* スマホではシャッターボタンを少し下げる。
   フキダシをボタンの真上に置くので、上の余白を稼ぐ。 */
@media (max-width: 768px) {
  body.hs-fp #buttonCapture:not(.horizontal) {
    top: calc(100% - 80px);
  }
}

/* 強制回転モード（横向き動画をスマホの縦持ちで見る）。
   映像は #base ごと -90deg 回るが、シャッターボタンは回らず画面の右端に置かれる。
   つまり映像としての「下」＝画面の右端なので、そちらへもう少し寄せる。
   player-ui.js が left をインラインで書くため、!important で上書きする。
   兄弟の #buttonYourPhotos に付く .modeForcedRotate を目印にして、
   本当に横持ちしているとき（回転なし）には効かないようにしている。 */
body.hs-fp #buttonYourPhotos.modeForcedRotate ~ #buttonCapture {
  left: calc(100% - 82px) !important;
}

/* **フキダシ（残り回数）が出ているときは縦位置も決める**（利用者の指示・
   2026-08-15）。player-ui.js はインラインで top: calc(50% - 40px) と書く。
   あれはフキダシが無かった頃に、ボタンの高さのぶんだけ持ち上げていた値で、
   フキダシが付いたいまは上に寄って見える。

   0px は**調整のつまみ**として残す（動かすときはこの数字だけ変える）。
   インラインより強くないと効かないので !important が要る。
   目印の .fp-has-shots は mountShotBadge が付ける ―― :has() で書くと
   古いSafariで効かず、フキダシの有無で位置が変わらない。 */
body.hs-fp #buttonYourPhotos.modeForcedRotate ~ #buttonCapture.fp-has-shots {
  top: calc(50% - 0px) !important;
}

/* #buttonCapture の子として置くので、横向き回転時もボタンごと一緒に回る。 */
#fp-shots {
  position: absolute;
  bottom: calc(100% + 14px);
  /* スマホはボタンの真上・左右中央 */
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 5;
  padding: 5px 11px 6px;
  border-radius: 11px;
  background: #fff;
  color: #1b1c2e;
  font-family: "M PLUS 2", sans-serif;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  pointer-events: none;   /* シャッターの当たり判定を邪魔しない */
}

#fp-shots .fp-shots-label {
  display: block;
  font-size: 9px;
  opacity: 0.7;
}

#fp-shots .fp-shots-count {
  display: block;
  margin-top: 1px;
  font-size: 10px;
}

#fp-shots .fp-shots-count b {
  font-size: 17px;
  font-weight: 700;
  padding-left: 3px;
  vertical-align: -1px;
}

#fp-shots.is-empty { color: #c62742; }

/* 吹き出しの尻尾。スマホではボタンの真下を向く（PCは下の媒体クエリで左向きにする）。 */
#fp-shots::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: #fff;
  border-bottom-width: 0;
}

/* PCではボタンの右横に出す（尻尾は左向き）。
   スマホは画面が狭く右に置くと見切れるため、ボタンの真上のまま。 */
@media (min-width: 769px) {
  #fp-shots {
    bottom: auto;
    right: auto;
    left: calc(100% + 16px);
    top: 50%;
    transform: translateY(-50%);
  }

  /* 尻尾を左向きにする。基本ルールが border-bottom-width:0 にしているので、
     ここで上下の枠幅を戻さないと三角形が崩れて下向きに見える。 */
  #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;
  }
}

/* ---------------- 検証用パネル ---------------- */

#fp-devbar {
  white-space: nowrap;
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 9800;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #9df;
  font-family: ui-monospace, monospace;
  font-size: 11px;
}

#fp-devbar button {
  padding: 3px 9px;
  border: 1px solid #567;
  border-radius: 5px;
  background: #1a1c30;
  color: #cfe;
  font-size: 11px;
  cursor: pointer;
}

#fp-devbar button:hover { background: #263054; }

/* 帯エリアの表示パターン切り替え（検証用）。ボタンと同じ見た目にそろえる */
#fp-devbar select {
  max-width: 62vw;
  padding: 3px 6px;
  border: 1px solid #567;
  border-radius: 5px;
  background: #1a1c30;
  color: #cfe;
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

/* =========================================================
   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-extra {
  margin-left: 4px;
  font-weight: 700;
  color: #ffd97a;
}
/* 「撮り直しはできません」の一文 */
#fp-shutter-bar .fp-gauge-note {
  flex-basis: 100%;
  text-align: center;
  font-size: 11px;
  opacity: .6;
}
/* 商品プレゼントの残数。シャッターの残数と読み違えないよう、
   罫線で区切ってプレゼントのアイコンを添える。 */
/* シャッターの帯の**中に**添えるとき。上に区切り線を引いて続き物に見せる。 */
#fp-shutter-bar .fp-gift-note {
  flex-basis: 100%;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

/* 帯の外に**単独で置くとき**は、現像可能数の帯(#fp-develop-bar)と
   同じ見た目にする。以前は #fp-shutter-bar の中でしか書かれておらず、
   単独で置くと枠も余白も付かず、隣の帯と揃わなかった。
   置き場所ではなく**見せ方**でスタイルを決める。 */
.fp-gift-note {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 案内文(.fp-dev-hint)を次の行へ落とすために要る。
     無いと flex-basis:100% が効かず、1行に押し込まれて読めなくなる。 */
  flex-wrap: wrap;
  gap: 6px;
  width: min(92%, 560px);
  margin: 8px auto 4px;
  padding: 10px 18px;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  font-family: "M PLUS 2", sans-serif;
  font-size: 13px;
  color: #f2c14e !important;
}
/* 帯の中に入るときは、外枠は親が持っているので消す */
#fp-shutter-bar .fp-gift-note {
  width: auto;
  margin-left: 0;
  margin-right: 0;
  padding: 10px 0 0;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
  background: transparent;
}
.fp-gift-note b {
  color: #f2c14e !important;
  font-size: 18px;
  font-weight: 800;
  margin: 0 1px;
}
.fp-gift-note .fp-gift-icon { font-size: 15px; line-height: 1; }

/* 残0のときはゲージを赤系にして、撮れない状態だと分かるようにする */
#fp-shutter-bar.is-empty .fp-gauge i { 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; }
  .fp-gift-note { font-size: 11px; }
}

/* --- 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);
}
/* 4枚目以降は中身を隠して「ほかにも」とだけ見せる（総数は明かさない） */
.lp-lineup-more {
  transform: rotate(26deg) translateX(116px);
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: rgba(255, 255, 255, .8);
  background: rgba(255, 255, 255, 0.07);
  border-style: dashed;
}
.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-more   { transform: rotate(26deg)  translateX(98px); }
  .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: フィルムは縦方向に巻き上がる（横線が下から上へ流れる） */
@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);
  }
  #fp-intro.is-film .fp-intro-film::before { animation-name: fpFilmWindV; }
  @keyframes fpFilmWindV {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }   /* 0.3秒で画面1枚ぶん上へ巻き上がる */
  }
}

/* 会場名（あるときだけ） */
#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; } }
#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;
}
#headerControl, #footerControl, #buttonCapture, #fp-heat { transition: opacity .4s ease; }

/* 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;
  height: 22px;
  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; }
}

/* スマホの横持ち（縦が短い画面）: カメラのようにシャッターは右端・縦中央に置き、
   バーは下寄せで細く。残数バッジはボタンの左隣。 */
@media (max-height: 500px) {
  #buttonCapture {
    left: auto !important;
    right: 25px !important;
    top: 50% !important;
    transform: translateY(-50%);
  }
  /* フキダシはシャッターの真上（尻尾は下向きでボタンを指す） */
  #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);
}

/* 入った瞬間だけの一瞬の拡大（0.3秒程度） */
.fp-pop { animation: fpPop .3s ease 1; }
@keyframes fpPop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* 終了間際の警告 */
#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-endmodal-left {
  margin-top: 8px;
  font-size: 11px;
  opacity: .7;
  text-align: center;
}

/* =========================================================
   シャッター撮影時の演出（資料「シャッター撮影時の演出 実装指示」）
   ========================================================= */
#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; }
@keyframes fpGlow {
  0%   { opacity: 0;   transform: scale(.7); }
  35%  { opacity: 1;   transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.15); }
}

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

/* 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: 10px;
  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: 14px;
  /* 座布団は黒の半透明（背景色に左右されずコントラストを保つ・枠線なし） */
  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;
  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);
}
/* 「のこり 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: 14px;
  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.is-hidden { background: rgba(255, 255, 255, .09); }
.lp-lineup-card.is-hidden .material-symbols-outlined {
  font-size: 26px;
  color: rgba(255, 255, 255, .45);
}
/* 扇形の配置（外側ほど大きく傾け、奥に置く） */
.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: 18px;
  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);
}
#fp-autoshot-modal .fp-endmodal .fp-endmodal-left {
  margin-top: 2px;
  color: #7d84c4;
  font-size: 11px;
}

/* =========================================================
   動画の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: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  background: rgba(0, 0, 0, .28);
}
#fp-paused.is-on { display: flex; }
#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-autoshot-modal .fp-endmodal .fp-endmodal-left { font-size: 12px; }
  #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-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: 760px; }
  .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; }
  /* 下部の2行も冒頭の案内文と同じ大きさで拡大する */
  .fp-shop-shipping { font-size: 15px; }
  .fp-shop-sample   { 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: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  animation: fpModalZoom .3s cubic-bezier(.2, .9, .3, 1.15) both;
}
#fp-devbox .fp-devbox-card img {
  width: 100%;
  height: auto;
  display: block;
}
#fp-devbox .fp-devbox-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .92);
  color: #222;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  z-index: 6;
}
@media (max-width: 600px) {
  #fp-devbox .fp-devbox-close { top: 8px; right: 8px; }
}

/* プラン選択モーダル: 細部の指定
   - プランカードのフォーカス線は出さない
   - 「おすすめ」バッジの文字は黒（自由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: 880px;
    padding: 44px 48px 36px;
  }
  #fp-shop-modal .fp-shop-title { margin-bottom: 14px; }
  #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);
}
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) {
  /* 基本ルールが width:min(100%,420px) を指定しているため、max-width だけでは広がらない。
     width ごと上書きして、1行に収める文言がパネルからはみ出さない幅を確保する。 */
  #fp-trial-modal .fp-modal-panel {
    width: min(92vw, 780px);
    max-width: 780px;
    padding: 40px 48px 32px;
  }
  #fp-trial-modal .fp-trial-title { font-size: 24px; }
  #fp-trial-modal .fp-trial-lead  { font-size: 16px; white-space: nowrap; }
  #fp-trial-modal .fp-trial-actions button { font-size: 17px; padding: 17px 20px; }
}

/* 現像ライトボックス: ポラロイド(チェキ)風の白フレーム。下辺を広めに取る。 */
#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); }
  #fp-devbox .fp-devbox-card img { max-height: 70vh; object-fit: cover; }
  #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-zoom .fp-devbox-frame,
#fp-devbox.is-zoom .fp-devbox-frame:hover { transform: scale(1.16); }
#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;
}

/* ---------------- シャッターゲージ: 本数が多いときの密表示 ----------------
   目盛りが13本以上になると、丸い目盛りでは行数が増えて読みにくくなるため、
   細い縦罫線に切り替えて1〜2行に収める（省略はしない）。
   ゲージの定義がファイル前半にもあるため、確実に効くよう最後に置く。 */
#fp-shutter-bar .fp-gauge.is-dense {
  gap: 4px 3px;
  /* 折り返さず、幅いっぱいに均等に敷き詰める（本数が増えると1本が細くなる） */
  flex-wrap: nowrap;
}
#fp-shutter-bar .fp-gauge.is-dense i {
  flex: 1 1 0;
  width: auto;
  min-width: 2px;
  max-width: 10px;
  height: 16px;
  border-radius: 1px;
}
#fp-shutter-bar .fp-gauge.is-dense i.is-on {
  background: linear-gradient(180deg, #ffe9a8, #e0952a);
  /* 光彩が強いと隣の罫線とつながって本数が数えにくいので控えめにする */
  box-shadow: 0 0 3px rgba(232, 180, 74, .45);
}
/* 使い切った目盛り（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);
}
@media (max-width: 768px) {
  #fp-shutter-bar .fp-gauge.is-dense { gap: 4px 2px; }
  #fp-shutter-bar .fp-gauge.is-dense i { height: 14px; max-width: 8px; }
}

/* ---------------- 撮影: シャッター羽根で遮蔽する ----------------
   丸いマスクではなく、実機と同じ「羽根が閉じて開く」動きで撮影を表現する。
   羽根(#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; }
}

/* 本数が少ないとき（密表示でない＝12本以下）は、カード幅いっぱいに等分して
   1本ずつを太く見せる。固定幅のままだと中央に小さく固まって見えるため。 */
#fp-shutter-bar .fp-gauge:not(.is-dense) {
  flex-wrap: nowrap;
  gap: 8px;
}
#fp-shutter-bar .fp-gauge:not(.is-dense) i {
  flex: 1 1 0;
  width: auto;
  height: 11px;
}
@media (max-width: 768px) {
  #fp-shutter-bar .fp-gauge:not(.is-dense) { gap: 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-zoompunch2 { animation: fpZoomPunch2 .3s ease-out 1; }
@keyframes fpZoomPunch2 {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.07); }
  100% { transform: scale(1); }
}
/* 横持ちでは中身が rotate(-90deg) されている。scale だけのキーフレームだと
   その回転を打ち消してしまい、写真が一瞬起き上がって戻る。回転を含めて動かす。 */
body.fp-rotated #fp-devbox .fp-devbox-inner.fp-zoompunch2 {
  animation-name: fpZoomPunch2Rot;
}
@keyframes fpZoomPunch2Rot {
  0%   { transform: rotate(-90deg) scale(1); }
  30%  { transform: rotate(-90deg) scale(1.07); }
  100% { transform: rotate(-90deg) scale(1); }
}
/* 印画紙の弾みはJS(bounceTween)が transform を直接書く。CSSクラス方式は
   iOSで動かない事例があったため使わない（キーフレームは参考として残す）。 */
@keyframes fpPolaBounce {
  0%   { transform: scale(1)    rotate(0deg); }
  30%  { transform: scale(1.1)  rotate(-1.5deg); }
  55%  { transform: scale(.96)  rotate(1deg); }
  75%  { transform: scale(1.03) rotate(-.5deg); }
  100% { transform: scale(1)    rotate(0deg); }
}

/* 「キャプった!!」 */
#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;
}
/* 現像後のタップは拡大せずそのまま閉じるので、拡大状態の指定は使わない */
#fp-devbox.is-zoom .fp-devbox-frame,
#fp-devbox.is-zoom .fp-devbox-frame:hover { transform: none; }

/* 拡大表示のキャプション欄に出す宛名（当たりを現像したときだけ）。
   中央そろえ。手書き体で、印画紙のキャプションと同じ雰囲気にする。
   色はサイト全体の自由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;
  width: min(96vw, 680px);
  /* 高さは中身なり。決め打ちにすると余白だらけの大きなダイアログになる */
  height: auto;
  max-height: 90vh;
  /* 外枠は塗らない。中の下地と二重の面になり、色が食い違って見えるため。
     角丸と影は中の面（枠）に付ける。 */
  padding: 0;
  background: transparent;
}
/* 読み込みが終わるまでは、外枠にも面を出しておく。
   透明のままだと背後の写真が透けて、壊れているように見えるため。 */
#fp-dl-modal:not(.is-ready) .fp-dl-panel {
  min-height: 220px;
  border-radius: 14px;
  background: #14163c;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
}
#fp-dl-modal .fp-dl-frame {
  display: block;
  width: 100%;
  height: 320px;   /* 読み込み後にJSが中身の高さへ合わせる */
  border: 0;
  border-radius: 14px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .6);
  opacity: 0;
  transition: opacity .25s ease;
}
#fp-dl-modal.is-ready .fp-dl-frame { 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: #fff !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(255, 255, 255, .25);
  border-top-color: #fff;
  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) {
  #fp-dl-modal { padding: 12px; }
  #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);
  left: 50%;
  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: translateX(-50%) translateY(8px);
  transition: opacity .6s ease, transform .6s ease;
}
/* アイコンは字形フォントなので、文字色と同じ指定を明示的に継がせる
   （-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: translateX(-50%); }

/* 「この写真のグッズを購入」。ダウンロードと同じ白いピルで、
   ダウンロードが居るときは --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));
  left: 50%;
  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: translateX(-50%) translateY(8px);
  transition: opacity .6s ease, transform .6s ease;
}
#fp-devbox .fp-devbox-buy.is-in { opacity: 1; transform: translateX(-50%); }

/* 当たり: 現像が終わったら、暗幕をゴールドへゆっくり切り替える。
   金の紙吹雪・金縁と合わせて「特別な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%);
}

/* =========================================================
   プラン選択: スマホは縦積みの横長カード（2026-08-13）
   =========================================================
   3列のままだと 375px では1列あたり約110pxしかなく、商品名が
   1文字ずつ折り返し、絵文字と数字が隣の列へ食い込んでいた。
   狭い幅ではプランを1列に積み、1枚の中を
   「名前と価格」「数字3つ」「当たる商品」の3行にする。
   広い幅（600px〜）は従来の3列のまま。

   ファイルの**末尾**に置くこと。上の .fp-plans .fp-plan（flex）や
   @media (max-width:480px) と同じ強さのセレクタなので、
   あとに書いたこちらが勝つ、という順序で成り立っている。 */
@media (max-width: 599px) {
  /* 見出し文とカードの間・カード同士の間はスマホでは詰める（利用者の指示）。
     カードの margin-top はおすすめバッジ（上に -10px はみ出す）のぶんだけ残す。 */
  .fp-plans { flex-direction: column; gap: 0; margin-top: 0; }
  .fp-plans .fp-plan { margin-top: 12px; }
  .fp-plans .fp-plan {
    display: grid;
    /* 内側の 1fr が伸びて、2行目（数字3つ）が**両端揃え**になる
       （利用者の指示・2026-08-13。中央寄せから変更） */
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: baseline;
    column-gap: 12px;
    row-gap: 4px;
    width: 100%;
    /* width:100% と左右 padding を両立させる。これが無いと padding のぶん
       親からはみ出し、右端の価格がカードの外へ飛び出す（実際に起きた） */
    box-sizing: border-box;
    min-width: 0;
    padding: 12px 14px 10px;
    text-align: left;
  }
  /* 1行目: 名前（左）と価格（右）。価格が右端に縦へそろい、比べやすくなる */
  .fp-plans .fp-plan .fp-plan-name {
    grid-column: 1 / 4;
    justify-self: start;
    /* 15px → 18px（利用者の指示・2026-08-13「すこしおおきく」） */
    font-size: 18px;
    letter-spacing: .04em;
    /* 横長カードでは名前が行の見出しになるので、しっかり出す（利用者の指示） */
    font-weight: 800;
    opacity: 1;
  }
  /* 数字3つの行はアイコン（絵文字）を出さない。横に3つ並ぶと字面が
     込み合い、「商品決定 1個」が右端で切れていた。 */
  .fp-plans .fp-plan .fp-plan-row-ic { display: none; }
  .fp-plans .fp-plan .fp-plan-price {
    grid-column: 4 / 6;
    grid-row: 1;
    justify-self: end;
    font-size: 21px;
  }
  /* 2行目: シャッター・現像・商品決定を横に並べる */
  .fp-plans .fp-plan .fp-plan-shots    { grid-row: 2; grid-column: 1; justify-self: start; }
  .fp-plans .fp-plan .fp-plan-develops { grid-row: 2; grid-column: 3; justify-self: center; }
  .fp-plans .fp-plan .fp-plan-gift     { grid-row: 2; grid-column: 5; justify-self: end; margin-top: 0; padding-top: 0; }
  /* 数字は太字にしない（利用者の指示）。中央寄せの1行に収まるぶん、
     太字で締めなくても読める */
  .fp-plans .fp-plan .fp-plan-row-value { font-weight: 400; }
  /* 3行目: 当たる商品。画像を左・名前を右に並べる（縦積みなら横幅が使える）。
     名前は9pxまで縮めていたが、1行が広くなったので読める大きさに戻す */
  .fp-plans .fp-plan .fp-plan-goods-preview {
    grid-row: 3;
    grid-column: 1 / 6;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    /* 罫線は引かない（利用者の指示・2026-08-15）。数字の行と商品の行は
       余白だけで十分に分かれていて、線を足すと1枚のカードが
       2つの箱に割れて見える。

       罫線と対だった padding-top も外して**上に詰める**（同日の指示）。
       線が無くなると、その内側の余白は間延びとして残るだけ。
       空ける役目は margin-top だけが持つ。 */
    margin-top: 4px;
  }
  .fp-plans .fp-plan .fp-plan-goods-stage { width: 52px; }
  .fp-plans .fp-plan .fp-plan-goods-names {
    text-align: left;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 700;
  }
  /* 商品名は箇条書きの黒ポチを左に（利用者の指示・2026-08-13） */
  .fp-plans .fp-plan .fp-plan-goods-names .fp-plan-goods-name::before {
    content: "\0030FB"; /* ・ ＝ 生で書くと文字コード次第で化ける（291行の注記） */
  }
  /* おすすめバッジは左上へ。中央に置くと1行目の名前と重なる */
  .fp-plans .fp-plan .fp-plan-badge {
    left: 14px;
    transform: none;
  }
  /* 送料の注記はカードのすぐ下に寄せる（利用者の指示） */
  .fp-shop-shipping { margin-top: 6px; }
}

/* =========================================================
   明るい背景のサイトでの読みやすさ（利用者の報告・2026-08-18）
   ---------------------------------------------------------
   背景色は運営が決める。薄い色を選んだサイトでは、本文の色として
   **濃い色が全要素に !important で降ってくる**（サイト全体の自由CSS）。
   ところが FP が自前で敷いている面（プラン選択モーダル＝濃紺、
   シャッターの座布団＝黒の半透明）は暗いままなので、
   暗い面に暗い文字が乗って読めなくなる。

   直し方の原則: **面を持っている側が、その面の文字色を決める。**
   降ってくる色は !important なので、ID を含む指定＋!important で上書きする
   （CLAUDE.md「UI/アニメーション修正の定石」3）。
   `*` でまとめて白にはしない ―― 金・ピンクの差し色まで白くつぶれる。
   ========================================================= */

/* --- プラン選択モーダル: 濃紺の面の上は白 --- */
#fp-shop-modal .fp-shop-title,
#fp-shop-modal .fp-shop-lead,
#fp-shop-modal .fp-shop-note,
#fp-shop-modal .fp-shop-balance,
#fp-shop-modal .fp-shop-alert,
#fp-shop-modal .fp-plan,
#fp-shop-modal .fp-plan-name,
#fp-shop-modal .fp-plan-price,
#fp-shop-modal .fp-plan-row-label,
#fp-shop-modal .fp-plan-row-value,
#fp-shop-modal .fp-plan-shots small,
#fp-shop-modal .fp-modal-close {
  color: #fff !important;
}
/* 残数の行は、文字が**子の要素**に入っている（ラベル・単位）。
   入れ物だけ白にしても、降ってくる濃い色は子にも !important で当たるので
   中身は黒のまま残る（利用者の報告・2026-08-18「シャッターののこりが読めない」）。
   中の要素も名指しする。 */
#fp-shop-modal .fp-shop-balance .fp-shop-balance-item,
#fp-shop-modal .fp-shop-balance .fp-balance-label,
#fp-shop-modal .fp-shop-balance .fp-balance-unit,
#fp-shop-modal .fp-shop-balance .fp-shop-balance-sep {
  color: #fff !important;
}

/* 差し色は残す。**上の白より後に置く**（同じ強さなら後ろが勝つ）。 */
#fp-shop-modal .fp-shop-balance b { color: #ffe14d !important; }
#fp-shop-modal .fp-plan .fp-plan-gift,
#fp-shop-modal .fp-plan .fp-plan-gift .fp-plan-row-label,
#fp-shop-modal .fp-plan .fp-plan-gift .fp-plan-row-value { color: #f2c14e !important; }

/* --- 案内のダイアログ（お試し／注意／自動撮影）: 濃紺の面の上は白 ---
   （利用者の報告・2026-08-18「文字がよめない」）
   これらの面も自前で濃紺を敷いているので、明るいサイトの濃い文字色が
   そのまま乗ると読めない。プラン選択モーダルと同じ扱いにそろえる。 */
#fp-trial-modal .fp-trial-title,
#fp-trial-modal .fp-trial-lead,
#fp-trial-modal .fp-trial-points,
#fp-trial-modal .fp-trial-points li,
#fp-notice-modal .fp-trial-title,
#fp-notice-modal .fp-trial-lead,
#fp-autoshot-modal .fp-trial-title,
#fp-autoshot-modal .fp-trial-lead {
  color: #fff !important;
}
/* 差し色（金）は**白より後**に置いて残す（同じ強さなら後ろが勝つ）。 */
#fp-trial-modal .fp-trial-points b,
#fp-notice-modal .fp-trial-lead b {
  color: #ffe14d !important;
}

/* --- のこりの帯（シャッター／現像可能数）: 明るい背景では白地にする ---
   （利用者の指示・2026-08-18。見本つき）

   黒の半透明は、薄い紫の背景とほとんど同じ明るさで、帯があることが分からない。
   明るいサイトでは**白い面**を敷き、文字はサイトの文字色（濃い色）のまま読ませる。
   数字だけは青にして、面のどこを読めばよいかが一目で分かるようにする
   （金色は白地では沈む）。暗い背景のサイトはモックアップどおりのまま。 */
/* 面の色そのものは PHP が出す（hs_fp_bar_color_css）。サイトの背景を少し濃くした
   色を使うので、ここで白を焼き付けない ―― 白は薄い色のページの上で浮いて見えた
   （利用者の指摘・2026-08-18「背景白になるのはおかしいのでは?」）。
   枠線だけはどちらの色でも邪魔なので、ここで消しておく。 */
body:not(.hs-dark-bg) #fp-shutter-bar,
body:not(.hs-dark-bg) #fp-develop-bar {
  border-color: transparent !important;
}
/* 使い切ったときの面。暗い側の「濃い赤＋ピンクの枠」に対応する明るい側の配色。 */
body:not(.hs-dark-bg) #fp-develop-bar.is-empty {
  background: #f7dbe8 !important;
  border: 1px solid #e79ec0 !important;
}
/* 数字。roll のアニメーションが -webkit-text-fill-color を currentColor で
   固定しているので、そちらも一緒に指定しないと色が乗らない。 */
body:not(.hs-dark-bg) #fp-develop-bar .fp-dev-count b,
body:not(.hs-dark-bg) #fp-develop-bar .fp-develops-value,
body:not(.hs-dark-bg) #fp-shutter-bar .fp-gauge-note b,
body:not(.hs-dark-bg) #fp-shutter-bar .fp-dev-count b {
  color: #2323e6 !important;
  -webkit-text-fill-color: #2323e6 !important;
}

/* --- 「追加する」: 明るい背景では塗りにする（利用者の指示・2026-08-18） ---
   金色の細い枠＋金色の文字は、明るい面の上ではほとんど見えない
   （金と薄紫は明るさが近い）。押せるものだと分かるよう、
   LPのラベル（金地×黒）と同じ塗りにする。暗い背景のサイトは
   モックアップどおりゴーストのまま。 */
body:not(.hs-dark-bg) #fp-shutter-bar .fp-dev-more {
  background: linear-gradient(135deg, #f5c451, #e0952a);
  border-color: transparent;
  color: #241a05 !important;
  box-shadow: 0 3px 12px rgba(224, 149, 42, .35);
}
body:not(.hs-dark-bg) #fp-shutter-bar .fp-dev-more:hover {
  background: linear-gradient(135deg, #f7cd6b, #e9a23c);
}

/* ゲスト（ログインなしで撮影した人）の「登録して続ける」は、購入ボタンの場所に
   置くリンク。ボタンと同じ形にするため、インラインのままでは効かない
   上下の余白と下線を整える（見た目は .fp-dev-more の指定をそのまま使う）。 */
#fp-shutter-bar a.fp-dev-more {
  display: inline-block;
  text-decoration: none;
}

/* --- シャッターのこりの帯: 上へ流れて画面外になったら、画面下部に固定で出す ---
   （利用者の指示・2026-08-18。「したからせり上がってくる」動きつき）

   切り替えは JS（watchShutterBarFloat）。sticky では「上に消えたものを
   下へ出し直す」は表せないため。下の写真が透けて数字が読めなくならないよう、
   面にぼかしを添える。 */
#fp-shutter-bar.fp-float-bottom {
  position: fixed;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  /* **幅は !important で押さえる。** LP v2 の置き場所の指定
     （lp-styles.php の `#fp-lp2-shutter-slot #fp-shutter-bar { width:100% }`）は
     IDが2つぶんで、こちらより強い。固定にすると 100% が**画面いっぱい**になり、
     PCで横に伸び切っていた（利用者の指摘・2026-08-18「横幅はでかすぎる」）。 */
  width: min(92%, 560px) !important;
  max-width: 560px !important;
  margin: 0 !important;
  z-index: 2147482800;   /* 購入モーダル(2147482900)よりは下 */
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: fpBarRise .28s cubic-bezier(.2, .8, .3, 1);
}
@keyframes fpBarRise {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #fp-shutter-bar.fp-float-bottom { animation: none; }
}