/*
 * FP(FunPhotos) スタイル 4/4 ―― 後段の調整（必ず最後）
 *
 * prototype-otanoshimi.css（7,586行）を4つに割ったうちの 4つめ
 * （2026-08-26 のリファクタリング。**中身は1文字も変えていない** ――
 * 4つをこの順に連結すると、割る前のファイルと一致する）。
 *
 * **読み込み順が意味を持つ。** 後ろの規則が前を上書きしている箇所が
 * 実在するので、hs_fp_head() は必ずこの順で4つの <link> を出す:
 *   1. fp-base.css    …… 土台。box-sizing の一覧・帯・撮影一覧・お試し
 *   2. fp-shop.css    …… 購入モーダル（従来と v2 の枠）
 *   3. fp-screens.css …… TOP反映・撮影開始/再生中/現像の演出・ご注意
 *   4. fp-late.css    …… あとから重ねた調整と上書き。**必ず最後**
 * 順を変えたいときは、先に該当の規則を1ファイルへ寄せてから。
 */
/* =========================================================
   プラン選択: スマホは縦積みの横長カード（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; }
  /* ダウンロードはガチャでは出さないので、商品決定と同じ場所を使える
     （両方が同時に出ることはない） */
  .fp-plans .fp-plan .fp-plan-downloads { grid-row: 2; grid-column: 5; justify-self: end; }
  /* 数字は太字にしない（利用者の指示）。中央寄せの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;
  }
}

/* 幅の狭い端末では、2行目の3つが**桁の多いプランで収まらない**
   （プレミアム: シャッター18回／現像18枚／ダウンロード6枚）。
   間隔を詰めても足りないので、この行だけ字を一段落とす。
   落とすのは行の中だけで、プラン名・価格・当たる商品には触らない。 */
@media (max-width: 430px) {
  .fp-plans .fp-plan .fp-plan-shots,
  .fp-plans .fp-plan .fp-plan-develops,
  .fp-plans .fp-plan .fp-plan-downloads,
  .fp-plans .fp-plan .fp-plan-gift {
    font-size: 11px;
    letter-spacing: 0;
    gap: 3px;
  }
  .fp-plans .fp-plan { column-gap: 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;
}

/* --- 「追加する」を塗りにするかは PHP が決める（2026-08-24 に移した） ---
   もとはここで **サイトの明るさ**（body:not(.hs-dark-bg)）を見て塗りにしていた。
   帯・掲示の面の色をサイトの逆側にした（利用者の指示「表示部の背景は、
   明るいとき黒、暗いとき白」）ので、サイト基準だと判断が逆になる。
   いまは面の色ひとつで決める ―― hs_fp_bar_color_css() が
   濃い面ならゴースト／明るい面なら塗り、を書き出す。
   ここに残っているのは**塗る前の素の姿**（金の細枠＋金文字）だけ。 */

/* ゲスト（ログインなしで撮影した人）の「登録して続ける」は、購入ボタンの場所に
   置くリンク。ボタンと同じ形にするため、インラインのままでは効かない
   上下の余白と下線を整える（見た目は .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%);
  /* 通常位置で測った実寸をJSから渡す。親の `width:100%` を固定状態で解くと
     画面幅を基準にしてしまうため、追従中も通常のシャッター欄と完全に同じ幅へ
     固定する。 */
  width: var(--fp-float-width) !important;
  max-width: none !important;
  box-sizing: border-box;
  margin: 0 !important;
  z-index: 2147482800;   /* 購入モーダル(2147482900)よりは下 */
  /* 色が未指定の暗色テーマでは、追従中をフロストガラスにする。
     明るい色／管理画面で指定した帯色は、PHP側の後続ルールで通常位置と同色へ上書きする。 */
  background-color: rgb(0 0 0 / 62%) !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(44px);
  backdrop-filter: blur(44px);
}

/* **切り替えは行きも帰りも同じ動きにする**（利用者の指示・2026-08-18
   「スクロール時に追従フッターとの境目が分からないようにスムースに」）。

   以前は出るときだけアニメーション（fpBarRise）で、戻るときはクラスを外して
   即座に流れへ戻していた。出るのはふわり、消えるのはパチン、と左右非対称で、
   切り替わった瞬間がはっきり分かってしまう。

   いまは2つの状態を用意して**両方向とも同じ transition** を通す。
     ・fp-float-off … 固定のまま、下へ沈んで消えている状態
   出るとき  : off を付けて固定にし、次のフレームで off を外す（下からせり上がる）
   戻るとき  : off を付けて沈ませ、消えてから固定を解く

   **元の位置ではそのまま出す**（利用者の指示・2026-08-21）。以前は
   fp-float-in で淡く現れさせていたが、帯はもともとその場所にあるものなので、
   出るときと同じ演出を付けると「一度消えて、また出てきた」ように見える。 */
#fp-shutter-bar {
  transition: opacity .2s ease;
}
/* **動かすのは bottom（縦）だけ。transform は動かさない。**
   横位置は transform: translateX(-50%) で取っている。これを transition の
   対象にすると、固定に切り替わる瞬間に「transform なし → translateX(-50%)」まで
   一緒に animate されて、帯が**右から左へ滑って**見えた
   （利用者の指摘・2026-08-18「右から左にアニメーションではなく、下から上に」）。
   縦は bottom で上げ下げすれば、横位置は最初から決まったままになる。 */
#fp-shutter-bar.fp-float-bottom {
  transition: opacity .2s ease, bottom .24s cubic-bezier(.2, .8, .3, 1);
}
#fp-shutter-bar.fp-float-bottom.fp-float-off {
  opacity: 0;
  bottom: -24px;
}
@media (prefers-reduced-motion: reduce) {
  #fp-shutter-bar,
  #fp-shutter-bar.fp-float-bottom { transition: none; }
}

/* ---- プレイヤー右上「撮影画像を見る」（利用者の指示・2026-08-22）----

   FPでは右上のマークが撮影一覧への入口になっている（swapPlayerHeaderIcon が
   アカウントのマークから差し替える）。マークだけでは何の入口か伝わらないので、
   下に短い添え書きを置く。

   印（fp-photos-link / fp-photos-cap）は同じ関数が付ける。
   **通常のプレイヤーには付かない** ―― あちらはアカウント設定への入口なので、
   同じ体裁にすると行き先と食い違う。

   **body.hs-fp を条件にしない**（2026-08-24）。印は swapPlayerHeaderIcon が
   付けるが、あの関数は initPlayer から素通しで呼ばれる。抽選キャンペーンの
   ように「通常モードが土台で hs-fp が付かない」場面では、添え書きだけ出て
   この指定が当たらず、兄弟の #buttonProfileSettings>a>span（32px／24px）が
   そのまま乗っていた ―― 文字が急に大きくなる形（利用者の報告
   「撮影画像を見るのキャプションがでかすぎることがある」）。
   印そのものが「この体裁にする所」を指しているので、印だけを条件にする。

   左右の軸合わせ（横向きのときシャッターの真上へ寄せる）は JS の
   alignPhotosLinkToShutter が transform で行う。位置の数字はCSSに書かない。 */
#buttonProfileSettings.fp-photos-link {
  /* 添え書きのぶん、幅は中身なり。#timecode が flex:1 で余りを吸うので、
     ここを可変にしても左のもどるボタンやタイムコードは動かない。 */
  width: auto;
  height: auto;
  padding: 0 8px;
}
/* 既定の a は line-height:70px の1行組み。縦積みに組み替える。 */
#buttonProfileSettings.fp-photos-link > a {
  /* 下線は出さない（利用者の指示・2026-08-22）。サイト全体のCSSが
     リンクに下線を引くので、マークにも添え書きにも線が乗っていた。 */
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;      /* マークと文字を同じ中心にそろえる */
  justify-content: center;
  gap: 3px;
  line-height: 1;
}
#buttonProfileSettings.fp-photos-link > a > span.material-symbols-outlined {
  line-height: 1;
}
/* **添え書きそのものを名指しする**（2026-08-24）。
   以前は枠の印（.fp-photos-link）を条件にしていたが、その印が付く前に
   描かれた・付け直された等で外れていると、兄弟の指定
   （#buttonProfileSettings>a>span の 32px／24px）がそのまま乗って、
   枠幅15%の中で折り返した巨大な文字になっていた
   （利用者の報告・2026-08-24「キャプションがでかい」）。

   添え書きの有無は**その要素があること自体**が示しているので、
   印には頼らず、大きさだけは言い切る（CLAUDE.md の定石3）。
   枠のほうも :has() で受け、印が無くても幅が中身なりになるようにする。 */
#buttonProfileSettings:has(> a > span.fp-photos-cap) {
  width: auto;
  height: auto;
  padding: 0 8px;
}
#buttonProfileSettings:has(> a > span.fp-photos-cap) > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  line-height: 1;
  text-decoration: none;
}
#buttonProfileSettings > a > span.fp-photos-cap {
  font-size: 11px !important;
  white-space: nowrap;
}
@media only screen and (max-width: 480px), only screen and (max-height: 480px) {
  #buttonProfileSettings > a > span.fp-photos-cap { font-size: 10px !important; }
}
#buttonProfileSettings.fp-photos-link > a > span.fp-photos-cap {
  display: block;
  font-family: "M PLUS 2", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  color: #fff;
  -webkit-text-fill-color: #fff;
  /* 映像の上に出るので、明るい場面でも読めるように影を敷く
     （もどるボタン・タイムコードと同じ影）。 */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
@media only screen and (max-width: 480px), only screen and (max-height: 480px) {
  #buttonProfileSettings.fp-photos-link > a > span.fp-photos-cap {
    font-size: 10px;
  }
}

/* ---- 撮影開始の演出が始まるまで、プレイヤーの中身を出さない
   （利用者の指摘・2026-08-23「シャッターが回転する前に一瞬、この画面が
    みえてしまっているので、開始前は見えないように」）----

   印（hs-fp-preintro）は**サーバー側で付ける**（functions/system-setting.php）。
   JSで足すと最初の描画に間に合わず、素のプレイヤー（動画の1コマ・
   シャッター・四隅のマーク・タイムライン）が一瞬見えてしまう。
   外すのは JS ―― 演出が始まったとき（あちらの黒が引き継ぐ）か、
   TAP TO START を出すとき（そこからは利用者の操作待ちなので、
   これまでどおり動画の1コマが見えていてよい）。

   **TAP TO START より下、プレイヤーより上**に置く。覆いで隠したいのは
   プレイヤーの中身で、押す相手（TAP TO START）は隠さない。 */
/* **覆うだけでは足りない。**（利用者の報告・2026-08-23「動画が始まる前に
   一瞬これがちらつくので黒のままにして」）
   プレイヤーは器ごと前に出ることがある（TOPに同梱した #fp-spa は
   2147483600）ので、下の黒い覆い（9997）では隠せない。
   **中身そのものを見せない**ようにして、器の黒だけを残す。

   隠す印は2つ。ページのプレイヤーは body（サーバー側で付ける）、
   TOPに同梱したプレイヤーは器（開くときにJSが付ける）――
   同梱のほうは、同じ body の印が先に外れてしまうため別に持つ。
   外すのは prototype-otanoshimi.js の clearPreintroVeil（1か所）。

   **映像だけは opacity で消す。** visibility を当てると、端末によっては
   「描かれていない映像」の再生を始めてくれないことがある ――
   音あり再生を落とすわけにはいかない。opacity なら再生には関わらない。
   演出（#fp-intro）は #base の外に足されるので、どちらにも巻き込まれない。 */
body.hs-fp-preintro #base > *:not(video),
#fp-spa.is-open.is-preintro #base > *:not(video) { visibility: hidden; }
body.hs-fp-preintro #base > video,
#fp-spa.is-open.is-preintro #base > video { opacity: 0; }
/* **#base の外に付く飾りも隠す**（利用者の報告・2026-08-23「カウントダウンが
   始まる前にこれがちらつく」＝2回目の再生でヒートバー等が見えた）。
   ヒートバー（#fp-heat）は器（fpHost）の直下に付くので、上の #base の
   規則では隠れない。初回は中身が無いので目立たなかったが、2回目は
   前の回のまま残っていて、そのまま見える。 */
body.hs-fp-preintro #fp-heat,
#fp-spa.is-open.is-preintro #fp-heat { visibility: hidden; }

body.hs-fp-preintro::after {
  content: "";
  position: fixed;
  inset: 0;
  background: #000;
  /* **画面ぜんぶを覆う。**（利用者の指摘・2026-08-23「開始前にこれが一瞬
     表示されてしまう」）
     はじめは #base の中だけを覆ったが、**戻る矢印・IDのバッジ・シャッター・
     アカウントの印が黒の上に残った** ―― まだ位置も決まっていない状態で
     画面の真ん中に固まって出るので、かえって目立つ。
     覆いは演出（#fp-intro は 9998）のすぐ下に置き、引き継ぎで隙間を作らない。 */
  z-index: 9997;
  pointer-events: none;
}

/* ============================================================= */
/*  案内ダイアログのテンプレート「遊び方はカンタン！」            */
/*                                                               */
/*  **持ち主は assets/css/guide-template.css へ移した**           */
/*  （2026-08-24）。撮影前のガイダンス／お試しの説明だけでなく、  */
/*  お知らせのポップアップ（parts/info-popup.php）でも同じ中身を  */
/*  出せるようになり、そちらは通常モードでも開く ―― この          */
/*  スタイルシートは体験モードのページにしか読まれないので、      */
/*  ここに置いたままだと通常モードで素の見た目になる。            */
/*  読み込みは hs_fp_head() と parts/info-popup.php の両方から     */
/*  （$GLOBALS['hs_guide_tpl_css_done'] で1ページ1回）。          */
/* ============================================================= */


/* =========================================================
   購入モーダル v2: 上書きの断ち切り（利用者の報告・2026-08-25「バグっている」）
   =========================================================
   v2 の一式をファイルの中ほどに置いたが、**後ろに、より強い指定があった**。

     - #fp-shop-modal .fp-plans { display:flex !important }（ID＋important）
     - .fp-plans .fp-plan { flex:1 1 0; min-width:96px }（クラス2つ）
     - @media (max-width:599px) の .fp-plans .fp-plan { display:grid; ... }

   どれも .fp-plan-v2（クラス1つ）より強く、しかも後ろにある。
   結果、カードはスマホ幅で**5列のグリッド**として組まれ、名前・価格・
   数字が同じ行へ流れ込んで重なっていた。

   ここはファイルの末尾で、v2 だけに当たるセレクタを一段強くして断つ。
   **従来の見せ方には触らない**（.is-v2 / .fp-plan-v2 が付いた時だけ）。
   ========================================================= */

#fp-shop-modal .fp-plans.is-v2,
.fp-plans.is-v2 {
  /* 上の !important を外せないので、こちらも同じ強さで受ける。 */
  display: flex !important;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 12px;
  grid-template-columns: none;
}

#fp-shop-modal .fp-plans.is-v2 .fp-plan-v2,
.fp-plans.is-v2 .fp-plan-v2 {
  display: block;
  grid-template-columns: none;
  align-items: stretch;
  /* 縦積みなので伸ばさない（flex:1 1 0 のままだと3枚が同じ高さに引き伸ばされる）。 */
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  margin-top: 0;
  padding: 14px 18px 16px;
  text-align: left;
  column-gap: 0;
  row-gap: 0;
}

/* おすすめバッジ。スマホ用の指定（left:14px / transform:none）と同じ形なので
   位置は変わらないが、上に -10px 掛ける指定だけはこちらで持つ。 */
#fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-plan-badge,
.fp-plans.is-v2 .fp-plan-v2 .fp-plan-badge {
  position: absolute;
  top: -10px;
  left: 12px;
  transform: none;
}

@media (max-width: 599px) {
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2,
  .fp-plans.is-v2 .fp-plan-v2 { padding: 13px 14px 14px; }
}


/* =========================================================
   シャッターのゲージ: 色を濃くする（利用者の指示・2026-08-25「色がうすい」）
   =========================================================
   紫地の上で金が沈み、目盛りが「点いている」ように見えなかった。

   直すのは2つ。
     1. 目盛りの地の色 ―― 上を明るく下を濃くして、金らしい照りを出す。
        いままでは #f5c451→#e0952a と幅が狭く、紫の上ではほぼ単色に見えた
     2. 注記の透け（opacity:.7） ―― 数字（9/9）まで一緒に薄くなっていた。
        文は薄いままでよいので、**数字だけ**を戻して色も付ける

   ファイルの末尾に置く。上の指定（5028行あたり）と同じ強さなので、
   あとに書いたこちらが勝つ。
   ========================================================= */
#fp-shutter-bar .fp-gauge i.is-on {
  background: linear-gradient(180deg, #ffd970 0%, #f4b02a 52%, #d98708 100%);
  box-shadow:
    0 0 12px rgba(244, 176, 42, .70),
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 0 0 1px rgba(190, 120, 10, .45);
}
/* まだ使っていない目盛りは、逆に**もう少し沈める** ―― 点いている側との
   差が付かないと、濃くしても「どこまで残っているか」が読み取れない。 */
#fp-shutter-bar .fp-gauge i.is-used {
  background: rgba(0, 0, 0, .22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
/* 注記は薄いまま、数字だけ濃く。 */
#fp-shutter-bar .fp-gauge-note { opacity: .78; }
#fp-shutter-bar .fp-gauge-note b {
  color: #ffd15c;
  opacity: 1;
  font-weight: 800;
}


/* =========================================================
   購入モーダル v2: PCは**縦レイアウトのカードを横に3枚**
   （利用者の指示・2026-08-25「PCのとき、縦レイアウト」）
   =========================================================
   スマホは1枚を横長にして「回数」と「枚数」を左右に置く形でよかったが、
   PCでその形のまま1列に積むと、カードが画面幅いっぱいに伸びて
   右半分が空き、3つを見比べる形にもならなかった。

   PCでは**カードの中を縦に積む**（名前 → 価格 → 回数 → 枚数）。
   幅が要らなくなるので3枚を横に並べられ、比較の形になる。

   セレクタに #fp-shop-modal を含めるのは、上に
   `@media (min-width:900px) { #fp-shop-modal .fp-plans .fp-plan { flex:1 1 0 } }`
   というID込みの指定があるため（クラスだけでは届かない）。
   ========================================================= */
@media (min-width: 700px) {
  #fp-shop-modal .fp-plans.is-v2,
  .fp-plans.is-v2 {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 14px;
  }
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2,
  .fp-plans.is-v2 .fp-plan-v2 {
    /* 3枚を等分に。高さは揃える（バッジの位置と下辺がそろう）。 */
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    padding: 24px 16px 20px;
    text-align: center;
  }

  /* 名前と価格は縦に積んで中央へ。横並びのままだと、狭い列で
     「スタンダー／ド ¥1,400」と名前が割れる。 */
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-head,
  .fp-plans.is-v2 .fp-plan-v2 .fp-p2-head {
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-bottom: 16px;
  }
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-name,
  .fp-plans.is-v2 .fp-plan-v2 .fp-p2-name { font-size: 15px; opacity: .9; }
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-price,
  .fp-plans.is-v2 .fp-plan-v2 .fp-p2-price { font-size: 30px; }

  /* 2項目は上下に。区切りは縦罫から横罫へ変える
     （並びが変わったのに縦罫のままだと、どこで切れているのか読めない）。 */
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-body,
  .fp-plans.is-v2 .fp-plan-v2 .fp-p2-body {
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-cell,
  .fp-plans.is-v2 .fp-plan-v2 .fp-p2-cell {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-gets,
  .fp-plans.is-v2 .fp-plan-v2 .fp-p2-gets {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    padding-left: 0;
    padding-top: 14px;
  }
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-col,
  .fp-plans.is-v2 .fp-plan-v2 .fp-p2-col { text-align: center; }
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-num,
  .fp-plans.is-v2 .fp-plan-v2 .fp-p2-num { font-size: 22px; }
  /* 「3枚 GET! ✦」は中央へ。左寄せのままだと列の中で片寄る。 */
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-big,
  .fp-plans.is-v2 .fp-plan-v2 .fp-p2-big { justify-content: center; font-size: 34px; }
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-ic,
  .fp-plans.is-v2 .fp-plan-v2 .fp-p2-ic { width: 44px; height: 44px; }

  /* おすすめバッジは中央上。縦カードでは左上に置くと名前と近すぎる。 */
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-plan-badge,
  .fp-plans.is-v2 .fp-plan-v2 .fp-plan-badge {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ---- 残数パネル(v2)の数字を黄色にする（利用者の指示・2026-08-25）----
   .fp-b2-num b には最初から色を当ててあるが、サイト全体の動的自由CSS
   （general_style_css）の `color:#fff !important` に負けて白いままだった
   ―― CLAUDE.md の定石どおり、**IDセレクタ＋!important** で取り返す。
   添え書きの太字も同じ理由で色が抜けていたので、あわせて取り返す。 */
#fp-develop-bar.fp-develop-bar-v2 .fp-b2-num b {
  color: #ffd15c !important;
  -webkit-text-fill-color: #ffd15c !important;
}
#fp-develop-bar.fp-develop-bar-v2 .fp-b2-note b {
  color: #f5c451 !important;
  -webkit-text-fill-color: #f5c451 !important;
}

/* ---- 残数のピルとプランカードをくっつけない（利用者の指示・2026-08-25）----
   カードのバッジ（「おすすめ」「保存が先」）は top:-10px でカードの外へ
   出るので、詰めるとピルに触れて重なって見える。バッジのぶんも含めて空ける。 */
#fp-shop-modal .fp-plans.is-v2,
.fp-plans.is-v2 { margin-top: 24px; }

/* ---- スマホでは案内と操作の上余白を殺す（利用者の指示・2026-08-25）----
   狭い画面では、パネルの余白と中身の余白が二重になって上が間延びする。
   **上だけ**を0にして、左右と下の余白はそのまま残す。
   popup 側（info-popup.css）の指定と同じ強さにならないよう、
   クラスを重ねて詳細度を1つ上げる ―― 読み込み順に左右されないため。 */
@media (max-width: 599px) {
  #fp-preshoot-guide .fp-preshoot-html,
  #fp-trial-modal .fp-preshoot-html,
  #fp-notice-modal .fp-preshoot-html,
  .hs-cap-popup-box.is-html .fp-preshoot-html.fp-preshoot-html,
  #fp-autoshot-modal .fp-trial-actions,
  #fp-notice-modal .fp-trial-actions,
  #fp-preshoot-guide .fp-trial-actions,
  #fp-trial-modal .fp-trial-actions {
    padding-top: 0;
  }
}

/* ---- 買えないときの「写真を保存しにいく」（2026-08-25）----
   **見た目は汎用ダイアログ（.fp-dialog）が持つ。** ここで専用の金ボタンを
   作っていたが、同じ「短い面」なのにプラン選択だけ別の姿になっていた
   （利用者の指示・同日「こうしたシンプルなダイアログは汎用ダイアログに
   ととのえて」）。この名前は**クリックの受け口**として残す ――
   押されたことを名前で拾っているので、消すと導線が切れる。
   **×（.fp-modal-close）のクラスは付けない** ―― あちらは position:absolute の
   32px 丸で、付けると文字が縦に潰れる（利用者の報告・同日）。 */

/* ---- ♥ の左に余白（利用者の指示・2026-08-25）----
   2つ目のセルは縦罫のすぐ隣から始まるので、アイコンが罫にくっついて見える。
   罫と中身の間を空ける（1つ目のセルには要らない ―― 左は面の余白がある）。 */
.fp-develop-bar-v2 .fp-b2-cell + .fp-b2-cell { padding-left: 14px; }
@media (max-width: 430px) {
  .fp-develop-bar-v2 .fp-b2-cell + .fp-b2-cell { padding-left: 10px; }
}

/* ---- 使い切ったときの案内は押しどころにする（利用者の指示・2026-08-25）----
   文と矢印を左右に置き、枠ごと押せる形にする。見た目は元の添え書きの
   まま（.fp-b2-note を兼ねる）で、押せることは矢印と反応で伝える。 */
#fp-develop-bar.fp-develop-bar-v2 .fp-b2-buy {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* ボタンの `border: 0` は（IDセレクタのぶん）.fp-b2-note の上罫線に勝って
     しまうので、ここで引き直す。左右下は消したまま、上だけ残す。 */
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
#fp-develop-bar.fp-develop-bar-v2 .fp-b2-buy-txt { flex: 1 1 auto; min-width: 0; }
#fp-develop-bar.fp-develop-bar-v2 .fp-b2-buy-arrow {
  flex: none;
  display: inline-flex;
  opacity: .8;
}
#fp-develop-bar.fp-develop-bar-v2 .fp-b2-buy:hover { opacity: .88; }
#fp-develop-bar.fp-develop-bar-v2 .fp-b2-buy:active { transform: translateY(1px); }
#fp-develop-bar.fp-develop-bar-v2 .fp-b2-buy b {
  color: #ffd15c !important;
  -webkit-text-fill-color: #ffd15c !important;
}

/* ---- 帯の黄色い太字は途中で折らない（利用者の指示・2026-08-25）----
   「ダウンロードできる枚／数を使い切りました。」のように語の途中で切れると
   一目で読めない。行そのものは折り返してよいので、**太字のかたまりだけ**を
   割らないようにする（矢印のぶん幅が狭い面でも、この長さなら収まる）。 */
#fp-develop-bar.fp-develop-bar-v2 .fp-b2-note b { white-space: nowrap; }

/* ---- 添え書きは上下を罫線で区切る（利用者の指示・2026-08-25）----
   上だけの罫線だと、数のかたまりから続いた尻尾に見える。上下で挟むと
   「別の一区切り」として読める ―― 押しどころ（使い切りの案内）のときは
   なおさら、どこまでが押せる範囲かが分かる。
   上下の余白は同値にする（矩形の中の要素は上下を均等に）。 */
/* 罫線は**上だけ**（利用者の指示・2026-08-25「罫線は上で」）。
   使い切りの案内も、区切りは数のかたまりとの間に1本あれば足りる ――
   下にもう1本引くと枠が二重に見える。上の罫線は .fp-b2-note が持つ。 */

/* ---- 広い画面のプラン選択（利用者の指定・2026-08-25。730pxへ改定）----
   **width も一緒に合わせる。** 元の指定が width: min(100%, 860px) なので、
   max-width だけ書き換えても 860px 側で頭打ちになり効かないことがある。 */
@media (min-width: 900px) {
  #fp-shop-modal .fp-modal-panel {
    width: min(100%, 730px);
    max-width: 730px;
    padding: 30px 48px 20px;
  }
}

/* ---- 広い画面でも「撮影できる回数」は左右に並べる（利用者の指示・2026-08-25）----
   縦積みにすると、丸アイコン → ラベル → 数字と3段になり、カードの上半分が
   間延びする。アイコンを左、ラベルと数字を右に置くと1つのかたまりとして読める。
   下の「獲得できる写真」はアイコンを持たないので、そちらは中央のまま。 */
@media (min-width: 700px) {
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-shots,
  .fp-plans.is-v2 .fp-plan-v2 .fp-p2-shots {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-shots .fp-p2-col,
  .fp-plans.is-v2 .fp-plan-v2 .fp-p2-shots .fp-p2-col { text-align: left; }
}

/* ---- 残数の帯の横幅（利用者の指定・2026-08-25）----
   #fp-develop-bar だけ 500px で頭打ちにする。共通の指定
   （width: min(92%, 560px)）はシャッターの帯と分け合っているので、
   そちらは触らずここだけ max-width で抑える。 */
#fp-develop-bar { max-width: 500px; }

/* ---- 「お試しで体験する」は控えめに（利用者の指定・2026-08-25）----
   プランより目立たせない逃げ道なので、太字をやめて小さくする
   （DevTools で当てていた font-weight:normal / font-size:10px をそのまま）。 */
#fp-shop-modal .fp-shop-trial {
  font-weight: normal;
  font-size: 10px;
}

/* =========================================================
   プランカード(v2)の仕上げ（利用者の指示・2026-08-25）
   ========================================================= */

/* プランカードの文字は**いつも白**（利用者の指示・2026-08-27
   「背景の色に関わらずプランの文字を色変えないように、文字は白」）。

   カードの地は濃い色で決め打ちなので、文字も決め打ちで言い切る。
   サイト全体の動的自由CSS（general_style_css）に**黒**を撒いている
   サイトがあり、濃紺のカードに黒い文字が出て読めなかった
   （利用者の報告・2026-08-27。下の「取り返す」側は、白を撒くサイトだけを
   前提に書いてあった）。

   **`*` では当てない。** おすすめの札（金地に濃い文字）まで白くなる。
   文字を持つ要素を1つずつ名指しして、それぞれの色を言い切る
   ―― 案内テンプレート（guide-template.css）と同じ作法。

   この下の段ごとの色（tone2/tone3）は**同じ強さ**なので、
   **必ずこのブロックより後ろに置く**（後ろが勝つ）。 */
#fp-shop-modal .fp-plans .fp-plan-v2,
#fp-shop-modal .fp-plans .fp-plan-v2 .fp-p2-head,
#fp-shop-modal .fp-plans .fp-plan-v2 .fp-p2-name,
#fp-shop-modal .fp-plans .fp-plan-v2 .fp-p2-price,
#fp-shop-modal .fp-plans .fp-plan-v2 .fp-p2-body,
#fp-shop-modal .fp-plans .fp-plan-v2 .fp-p2-cell,
#fp-shop-modal .fp-plans .fp-plan-v2 .fp-p2-col,
#fp-shop-modal .fp-plans .fp-plan-v2 .fp-p2-label,
#fp-shop-modal .fp-plans .fp-plan-v2 .fp-p2-num,
#fp-shop-modal .fp-plans .fp-plan-v2 .fp-p2-unit,
#fp-shop-modal .fp-plans .fp-plan-v2 .fp-p2-big,
#fp-shop-modal .fp-plans .fp-plan-v2 .fp-p2-get,
#fp-shop-modal .fp-plans .fp-plan-v2 .fp-p2-spark,
#fp-shop-modal .fp-plans .fp-plan-v2 .fp-p2-ic {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* 段ごとの色を**取り返す**。もともと当ててあるが、サイト全体の
   動的自由CSS由来の `#fp-shop-modal .fp-plan { color:#fff !important }`
   に負けて白のままだった（CLAUDE.md の定石どおり ID＋!important）。
   ライト（tone1）は白のままでよい ―― 3段とも色を付けると差が読めない。 */
#fp-shop-modal .fp-plan-v2.is-tone2 .fp-p2-big,
#fp-shop-modal .fp-plan-v2.is-tone2 .fp-p2-get,
#fp-shop-modal .fp-plan-v2.is-tone2 .fp-p2-spark {
  color: #f5c451 !important;
  -webkit-text-fill-color: #f5c451 !important;
}
#fp-shop-modal .fp-plan-v2.is-tone3 .fp-p2-big,
#fp-shop-modal .fp-plan-v2.is-tone3 .fp-p2-get,
#fp-shop-modal .fp-plan-v2.is-tone3 .fp-p2-spark {
  color: #a98cf0 !important;
  -webkit-text-fill-color: #a98cf0 !important;
}

@media (min-width: 700px) {
  /* 金額はもう少し小さく。カードの主役は「何回撮れて何枚持ち帰れるか」で、
     金額はその判断に添える数（利用者の指示）。 */
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-price,
  .fp-plans.is-v2 .fp-plan-v2 .fp-p2-price { font-size: 26px; }

  /* **獲得できる写真のほうを大きく**（利用者の判断・2026-08-25）。
     いったん同じ大きさにそろえたが、持ち帰れる枚数が主役なので、
     そこに差が付いているほうが読み取りやすかった。元の比に戻す。 */
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-num,
  .fp-plans.is-v2 .fp-plan-v2 .fp-p2-num { font-size: 22px; }
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-big,
  .fp-plans.is-v2 .fp-plan-v2 .fp-p2-big { font-size: 34px; }

  /* 見出し下の一文は1行で（利用者の指示）。狭い画面のために入れてある
     <br> は、広い画面では余計な折り返しになる。 */
  #fp-shop-modal .fp-shop-lead br { display: none; }
}

/* 決まり文も**いつも白**（利用者の報告・2026-08-27「注釈が黒になっている」）。
   プランカードと同じ理由 ―― 地（黒の薄膜）が決め打ちなのに、文字だけ
   サイト全体の動的自由CSS（general_style_css）に従っていた。
   丸い「i」の印（::before）は色を継ぐので、一緒に言い切る。
   **太字（金）は下の規則が持つ** ―― こちらは b を名指ししていないので当たらない。 */
#fp-shop-modal .fp-shop-rules,
#fp-shop-modal .fp-shop-rules li,
#fp-shop-modal .fp-shop-rules li::before {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* 決まり文の太字は金色に（利用者の指示・2026-08-25 の見本）。
   ここも動的自由CSSの color:#fff !important に負けるので ID＋!important。 */
#fp-shop-modal .fp-shop-rules b {
  color: #f5c451 !important;
  -webkit-text-fill-color: #f5c451 !important;
}

/* ---- 足元は1行（利用者の指示・2026-08-25）----
   左にテストモードの注記、右に「お試しで体験する」。高さをそろえるため
   align-items:center で受け、注記の余白（<p> の既定）は殺す。
   片方しか無いときは、余ったほうへ寄る（space-between のまま）。 */
#fp-shop-modal .fp-shop-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  text-align: left;
}
#fp-shop-modal .fp-shop-foot .fp-shop-test-note {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}
/* お試しだけのときは右端に置く（左に押し出す相手が居ないため）。 */
#fp-shop-modal .fp-shop-foot > .fp-shop-trial:only-child { margin-left: auto; }

/* ---- ホバーの色は段ごと（利用者の指示・2026-08-25）----
   ライト＝白／スタンダード＝金／プレミアム＝紫。カードの中の数字と
   同じ色にすることで、どの段に触れているかが色で分かる。
   共通の `.fp-plan:hover { … !important }`（5623行）に勝つ必要があるので、
   こちらも ID＋!important でそろえる。売切のカードは触らない
   （下の .is-soldout の指定がそのまま勝つよう、:not() で外す）。 */
#fp-shop-modal .fp-plan-v2.is-tone1:not(.is-soldout):hover {
  border-color: rgba(255, 255, 255, .85) !important;
  background: rgba(255, 255, 255, .10) !important;
}
#fp-shop-modal .fp-plan-v2.is-tone2:not(.is-soldout):hover {
  border-color: #f5c451 !important;
  background: rgba(245, 196, 81, .12) !important;
}
#fp-shop-modal .fp-plan-v2.is-tone3:not(.is-soldout):hover {
  border-color: #a98cf0 !important;
  background: rgba(169, 140, 240, .14) !important;
}

/* ---- 開いたときに上から順へ、すばやくフェード（利用者の指示・2026-08-25）----
   面ごとふわっと出すのではなく、**読む順に置かれていく**ようにする。
   1つ 0.22 秒、間隔は 0.04 秒 ―― 待たされる長さにはしない。
   fill-mode:both で、遅れて始まる要素も最初は消えた状態で待つ。
   カードは入れ物より少し遅らせて、面 → カードの順で目が動くようにする。 */
@keyframes fpShopIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
#fp-shop-modal .fp-modal-panel > * { animation: fpShopIn .22s ease both; }
#fp-shop-modal .fp-modal-panel > *:nth-child(1) { animation-delay: .02s; }
#fp-shop-modal .fp-modal-panel > *:nth-child(2) { animation-delay: .06s; }
#fp-shop-modal .fp-modal-panel > *:nth-child(3) { animation-delay: .10s; }
#fp-shop-modal .fp-modal-panel > *:nth-child(4) { animation-delay: .14s; }
#fp-shop-modal .fp-modal-panel > *:nth-child(5) { animation-delay: .18s; }
#fp-shop-modal .fp-modal-panel > *:nth-child(6) { animation-delay: .22s; }

#fp-shop-modal .fp-plans .fp-plan { animation: fpShopIn .22s ease both; }
#fp-shop-modal .fp-plans .fp-plan:nth-child(1) { animation-delay: .12s; }
#fp-shop-modal .fp-plans .fp-plan:nth-child(2) { animation-delay: .16s; }
#fp-shop-modal .fp-plans .fp-plan:nth-child(3) { animation-delay: .20s; }
#fp-shop-modal .fp-plans .fp-plan:nth-child(n+4) { animation-delay: .24s; }

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

/* ---- 数字は Helvetica（利用者の指示・2026-08-25）----
   金額・回数・枚数の3つ。**日本語は M PLUS 2 のまま**にしたいので、
   欧文フォントを先に並べ、後ろに M PLUS 2 を残す ―― こうすると
   「3回」の「回」だけが別の書体に化けない。 */
#fp-shop-modal .fp-plan-v2 .fp-p2-price,
#fp-shop-modal .fp-plan-v2 .fp-p2-num,
#fp-shop-modal .fp-plan-v2 .fp-p2-big {
  font-family: Helvetica, "Helvetica Neue", Arial, "M PLUS 2", sans-serif;
}

/* 価格はさらに小さく 22px（利用者の指定・2026-08-25）。
   先に書いた 26px と同じブロックに足さず末尾に置くのは、
   指定が来た順に読めるようにするため（後ろが勝つ）。 */
@media (min-width: 700px) {
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-price,
  .fp-plans.is-v2 .fp-plan-v2 .fp-p2-price { font-size: 22px; }
}

/* ---- PCではカードをわずかに3Dで傾ける（利用者の指示・2026-08-25）----
   触れたときだけ、奥行きのある方向へ少しだけ起こす。**指で触る画面では
   やらない**（ホバーの無い端末では傾いたまま／触れた瞬間に跳ねるだけになる）。

   **animation は none に戻す。** 上の登場アニメ（fpShopIn）は fill-mode:both
   で終わったあとも transform を握り続けており、アニメーションの指定は
   通常の指定より強い ―― 外さないとホバーの transform が当たらない。 */
@media (min-width: 700px) and (hover: hover) {
  /* **傾きの角度は JS が変数で入れる**（bindPlanTilt）。組み立てはここ ――
     transform ごとJSに書かせると、大きさの指定がJSとCSSに分かれる。
     ズームは位置に関わらない一定の値なので、:hover / :active で持つ。 */
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 {
    --plan-rx: 0deg;
    --plan-ry: 0deg;
    --plan-scale: 1;
    /* 登場アニメが transform を握ったままだと傾きが当たらないので、
       カードは**位置を動かさないフェード**にしてある（下の fpShopFadeIn）。 */
    transform: perspective(900px)
               rotateX(var(--plan-rx)) rotateY(var(--plan-ry))
               scale(var(--plan-scale));
    /* 傾きは毎コマ JS が近づけるので、ここの transition はズーム用。
       0.1秒 ―― 傾きにも掛かるが、わずかにならすだけで遅れには見えない
       （セッションカードと同じ考え方）。 */
    transition: transform .1s ease, border-color .18s ease, background .18s ease;
  }
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2:not(.is-soldout):hover { --plan-scale: 1.03; }
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2:not(.is-soldout):active { --plan-scale: 1.01; }
}

/* カードの登場は**位置を動かさない**フェードにする。fpShopIn は
   fill-mode:both で終わったあとも transform を握り続け、アニメーションの
   指定は通常の指定より強い ―― そのままだと上の傾きが当たらない。
   遅れ（nth-child の delay）は今までのものがそのまま効く。 */
@keyframes fpShopFadeIn { from { opacity: 0; } to { opacity: 1; } }
#fp-shop-modal .fp-plans .fp-plan { animation-name: fpShopFadeIn; }

/* 注釈の枠線は無し（利用者の指示・2026-08-25）。地色だけで十分に囲われて
   見えるので、線を足すと面の中に箱が二重に見える。 */
#fp-shop-modal .fp-shop-rules { border: none; }

/* カード列の上下の余白（利用者の指定・2026-08-25）。
   **狭い画面では詰める。** 縦に積むぶん1枚あたりの高さがあり、広い画面と
   同じ余白では下の注釈まで遠くなる。上を下より厚くしているのは、
   はみ出す「おすすめ」バッジのぶんを含むため。 */
#fp-shop-modal .fp-plans.is-v2 { margin-top: 15px; margin-bottom: 10px; }
@media (min-width: 700px) {
  #fp-shop-modal .fp-plans.is-v2 { margin-top: 34px; margin-bottom: 30px; }
}

/* ---- カメラの座をもう少し大きく（利用者の指示・2026-08-25）----
   数字（22px）と釣り合う大きさにする。中のSVGは width/height 属性を
   持っているが、CSSのほうが勝つのでここだけで決まる。 */
@media (min-width: 700px) {
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-ic,
  .fp-plans.is-v2 .fp-plan-v2 .fp-p2-ic { width: 46px; height: 46px; }
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-ic svg,
  .fp-plans.is-v2 .fp-plan-v2 .fp-p2-ic svg { width: 24px; height: 24px; }
}

/* PCではラベル（撮影できる回数／獲得できる写真）を少し大きく
   （利用者の指示・2026-08-25）。数字を大きくしたぶん、12px のままだと
   添え書きに見えて読み飛ばされる。単位（回／枚）も一緒に上げる ――
   数字の脇で釣り合いを取っている文字なので、片方だけ動かすと歪む。 */
@media (min-width: 700px) {
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-label,
  .fp-plans.is-v2 .fp-plan-v2 .fp-p2-label { font-size: 13.5px; }
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-unit,
  .fp-plans.is-v2 .fp-plan-v2 .fp-p2-unit { font-size: 13px; }
}

/* スマホでは注釈を 10px（利用者の指定・2026-08-25）。
   買う前に読む決まりだが、カードより先に目に入ってはいけない文なので、
   狭い画面では一段落とす。 */
@media (max-width: 599px) {
  #fp-shop-modal .fp-shop-rules { font-size: 10px; }
}

@media (max-width: 599px) {
  /* お試しの導線は右へ（利用者の指示・2026-08-25）。足元が折り返して
     注記が1行を占めたとき、ボタンが次の行の左端に落ちていた。
     余りを左に押しやれば、注記が有っても無くても右に立つ。 */
  #fp-shop-modal .fp-shop-foot .fp-shop-trial { margin-left: auto; }

  /* 「おすすめ」のカードだけ上に 8px（利用者の指定・2026-08-25）。
     バッジがカードの外へ出るので、縦に積んだとき上のカードに触れる。
     はみ出しの分だけ空ける ―― 全部のカードを空けると並びが間延びする。 */
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2.is-recommended { margin-top: 8px; }
}

/* ---- hover では中身もわずかに拡大（利用者の指示・2026-08-25）----
   カードの拡大（--plan-scale）だけだと、枠が広がって中身が同じ位置に
   留まって見える。中の2かたまり（名前＋価格／回数＋枚数）もほんの少し
   大きくすると、面が手前に来たように見える。
   **傾きの変数は触らない** ―― あちらはカード側の transform が持つ。 */
@media (min-width: 700px) and (hover: hover) {
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-head,
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2 .fp-p2-body {
    transition: transform .18s ease;
    transform: scale(1);
  }
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2:not(.is-soldout):hover .fp-p2-head,
  #fp-shop-modal .fp-plans.is-v2 .fp-plan-v2:not(.is-soldout):hover .fp-p2-body {
    transform: scale(1.02);
  }
}

/* ---- スマホの詰め（利用者の指定・2026-08-25）----
   縦に積むぶん高さがかさむので、面の余白・注釈の枠・カードの頭を詰める。 */
@media (max-width: 599px) {
  #fp-shop-modal .fp-modal-panel { padding: 26px 16px 20px; }
  #fp-shop-modal .fp-shop-rules { margin-top: 8px; padding: 10px 12px; }
  #fp-shop-modal .fp-plan-v2 .fp-p2-head { margin-bottom: 5px; }
}

/* スマホでは見出し下の一文を 11px（利用者の指定・2026-08-25）。 */
@media (max-width: 599px) {
  #fp-shop-modal .fp-shop-lead { font-size: 11px; }
}

/* ================================================================
   汎用ダイアログ（利用者の指示・2026-08-25
   「汎用ダイアログは1番目のこれにして」
   「こうしたシンプルなダイアログは汎用ダイアログにととのえて」）

   標準は**保存の確認だった面の形**（その面自体は 2026-08-25 に廃止。
   形だけがこの汎用ダイアログに残っている）。
     暗い面 ／ 中央そろえ ／ 見出し ＋ 一文 ＋ 縦に積んだ丸い押しどころ

   短い面はこの1枚に寄せる ―― 面ごとに枠と押しどころを作り直すと、
   同じことを言う画面なのに幅も余白も色も違う、という状態になる。
   使うときは `.fp-dialog` を面（.fp-modal-panel）に足し、その面が id で
   寸法や色を持っているなら**下のセレクタにその id を書き足す**。
   すでに ID で寸法を持っている面（プラン選択）は、ID の指定に勝つよう
   セレクタを併記する ―― 幅を取り返せないと形だけ揃わない。
   ================================================================ */
.fp-dialog,
#fp-notice-modal .fp-modal-panel.fp-dialog,
#fp-shop-modal .fp-modal-panel.fp-dialog {
  box-sizing: border-box;
  width: min(100%, 420px);
  max-width: 420px;
  padding: 24px 22px 20px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--hs-radius-surface, 16px);
  background: var(--fp-dialog-bg);
  text-align: center;
  color: #fff;
}
.fp-dialog .fp-confirm-title,
#fp-notice-modal .fp-dialog .fp-confirm-title,
#fp-shop-modal .fp-dialog .fp-confirm-title {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  /* 折り返しを均す。見出しは短く書くのが前提だが、それでも2行になったとき
     最後の1文字だけが落ちる（利用者の報告・2026-08-25「変なところで改行」）。
     行の長さをそろえておけば、そういう落ち方をしない。 */
  text-wrap: balance;
}
/* 見出しの中の数字だけ色を変えて、目が最初にそこへ行くようにする。 */
.fp-dialog .fp-confirm-title b,
#fp-notice-modal .fp-dialog .fp-confirm-title b,
#fp-shop-modal .fp-dialog .fp-confirm-title b {
  color: #ffe14d !important;
  -webkit-text-fill-color: #ffe14d;
}
.fp-dialog .fp-confirm-lead,
#fp-notice-modal .fp-dialog .fp-confirm-lead,
#fp-shop-modal .fp-dialog .fp-confirm-lead {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.9;
  /* **変なところで改行しない**（利用者の指示・2026-08-25）。
     和文は既定だとどこでも折り返せるので「お選びいただけま／す。」の
     ように語の途中で切れる。auto-phrase は文節の切れ目を選び、
     pretty は最後の行に1〜2文字だけ残るのを避ける。
     読めないブラウザは宣言ごと無視して従来どおり折り返す。 */
  word-break: auto-phrase;
  text-wrap: pretty;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  opacity: .9;
}
.fp-dialog .fp-trial-actions,
#fp-notice-modal .fp-dialog .fp-trial-actions,
#fp-shop-modal .fp-dialog .fp-trial-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 0;
}
.fp-dialog .fp-trial-yes,
.fp-dialog .fp-trial-no,
#fp-notice-modal .fp-dialog .fp-trial-yes,
#fp-notice-modal .fp-dialog .fp-trial-no,
#fp-shop-modal .fp-dialog .fp-trial-yes,
#fp-notice-modal .fp-dialog .fp-trial-no,
#fp-shop-modal .fp-dialog .fp-trial-no {
  width: 100%;
  padding: 13px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  /* 矩形の中の文字は上下を均等に（行ボックスの余りを先に殺す） */
  line-height: 1;
  cursor: pointer;
}
/* 進めるほうはオレンジ。登録ボタンと同じ #ea580c（白文字が読める側）。 */
.fp-dialog .fp-trial-yes,
#fp-notice-modal .fp-dialog .fp-trial-yes,
#fp-shop-modal .fp-dialog .fp-trial-yes {
  border: 0;
  background: #ea580c;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
.fp-dialog .fp-trial-yes:hover,
#fp-notice-modal .fp-dialog .fp-trial-yes:hover,
#fp-shop-modal .fp-dialog .fp-trial-yes:hover { background: #d24d0a; }
/* 引き返すほうは枠だけ。押しどころが2つ並んだとき、どちらが本命か分かる。 */
.fp-dialog .fp-trial-no,
#fp-shop-modal .fp-dialog .fp-trial-no {
  border: 1px solid rgba(255, 255, 255, .35);
  background: transparent;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}