/*
 * /captured/ ページ固有のCSS ―― **ページ内 <style> から出したもの**。
 *
 * 同じ見た目の持ち主が4層あった（利用者の指摘・2026-08-20
 * 「同じ見た目に、持ち主が4層いる」）。
 *
 *   1. 共有CSS（style.css / captured_purchased.css / captured.css）
 *   2. サイト全体の自由CSS（general_style_css・DBに入っている）
 *   3. ページ内の <style>   ← ここに大量にあった
 *   4. 要素の style 属性
 *
 * 3 が一番の問題だった。**同じ強さなら後に書いた方が勝つ**ので、
 * ページ内 <style> は共有CSSに黙って勝つ。しかも grep でも
 * ブラウザの開発者ツールでも「どのファイルの何行目」が出ないため、
 * 保存ボタン（2026-08-20）のように「直したのに直らない」が繰り返し起きた。
 *
 * ここへ移したぶんは**見た目を1ミリも変えていない**。読み込む位置を
 * 自由CSS（2）の直後 ―― もとの <style> と同じ場所 ―― にしてあるので、
 * 勝ち負けの関係はそのまま。変わったのは「どこに書いてあるか分かる」ことだけ。
 * !important も当時のまま残してある（外すのは、勝たせたい相手を
 * 1つずつ確かめてからにする）。
 *
 * **新しい見た目をページ内 <style> に足さないこと。** ここか、
 * React の部品（自前のクラス名を持つので、そもそも4層の外にいる）に置く。
 */

/* 写真上のウォーターマーク(Captured by … / © …)は白で表示する。
   詳細(.copyright_detailphoto)・リスト/ズーム(.copyright)の双方を対象にし、
   サイトのカスタムCSSに詳細度で負けないようID付き指定も併用する。 */
.copyright_detailphoto, .copyright,
#pageDetails .copyright_detailphoto, #zoom .copyright, .capturedlist .copyright { color:#fff !important; }
/* 商品選択モーダルの枠線が general_style_css により黒くなるのを打ち消し、薄いグレー/選択時オレンジに */
.goods-select-item{ border-color:#e6e6e6 !important; }
.goods-select-item.selected{ border-color:#ff9900 !important; }
/* PC: 詳細写真の表示サイズをほぼ揃えつつ、上下のレターボックス（余白）を作らない。
   固定比の枠に収めると横長写真で上下に余白が出るため、写真は本来の縦横比のままにし、
   最大幅(860px)＋最大高さ(72vh)で上限だけを設ける。同一セッションは同比率のため大きさも揃う。 */
@media screen and (min-width:481px){
  /* PCでは写真の縦横比に依らず「一定サイズの枠」に収め、画像ごとに表示サイズが変わらないようにする。
     横向きセッションの枠を固定比(16:9)にして object-fit:contain で内側に収める。
     同一セッションの通常写真は16:9のため余白は出ず、お楽しみ写真など比率が異なるものだけ
     枠内に収まる（枠サイズ自体は常に一定）。 */
  #pageDetails:not(.vertical) #pageDetailsFramed{
    width: min(860px, 92vw);
    max-width: 860px;
    aspect-ratio: 16 / 9;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
  /* 正方形のセッションは枠も正方形にする（利用者の指示・2026-08-22）。
     16:9 の枠のままだと、1:1 の写真が左右に帯を作って収まる。
     幅を 860 → 560 に落とすのは、正方形のまま 860 だと縦が伸びて
     下のボタンまで押し出すため。 */
  #pageDetails.square #pageDetailsFramed{
    width: min(560px, 92vw);
    max-width: 560px;
    aspect-ratio: 1 / 1;
  }
  #pageDetails:not(.vertical) #pageDetailsFramed #pageDetailsFramedImage{
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    margin: 0 !important;
  }
}

/* 高解像度画像の読み込み中スピナー。低解像度を表示しつつ中央で回転し、
   高解像度の読み込み完了でスムースに切り替える（JS が display を制御）。 */
.hs-img-spinner{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 4px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0,0,0,0.45);
  animation: hs-img-spin 0.8s linear infinite;
  z-index: 120;
  pointer-events: none;
  display: none;
}
@keyframes hs-img-spin{ to { transform: rotate(360deg); } }
/* 高解像度へ差し替わるまで、低解像度の拡大ボケを少し和らげる。 */
#pageDetailsFramedImage.hs-img-upscaling,
#zoomImage.hs-img-upscaling{ filter: blur(0.4px); }

/* ---- ギフト帯（商品ガチャの残数）。もとは一覧の直前にあった <style> ---- */

/* 帯そのものの幅を % で決めると、親の幅しだいで端に寄ってしまう。
   外側に左右の余白を持たせて、どの親の中でも必ず余白が残るようにする
   （TOPのシャッターバーと同じ見え方にそろえる）。 */
.hs-gift-bar-wrap{
  box-sizing:border-box;
  width:100%; padding:0 16px;
  /* 帯エリアの縦の間隔は「下だけ 14px」でそろえる
     （利用者の指示・2026-08-15。prototype-otanoshimi.css の同節と対）。 */
  margin:0 0 14px;
}

/* ---- 帯エリアは上端に留まる（利用者の指示・2026-08-21）----
   「この表示が画面から切れる時、sticky に追従するように」「他もこの要素全て」。

   対象は帯エリアの2つ:
     #fp-develop-slot  … シャッター／現像可能数の帯（中身は入れ替わる）
     .hs-gift-bar-wrap … 🎁 商品を N つ選定いただけます
   どちらも**同時には出ない**（applyDevelopCount が入れ替える）ので、
   同じ位置（top:6px）に留めても重ならない。

   JS（TOPのシャッター帯の watchShutterBarFloat）ではなく position:sticky で
   行う ―― こちらは一覧の中に居続けるだけなので、流れから外れる瞬間が無く、
   下敷き（spacer）も要らない。留まる範囲は親（#pagePhoto）の高さ＝
   一覧を読んでいるあいだずっと。
   器がスクロールするTOP同梱（#fp-captured-spa）でも同じように効く
   （閉じるボタンが既に position:sticky で動いているのと同じ理屈）。

   6px は上端との隙間。0 にすると画面の縁に貼り付いて窮屈に見える。 */
#fp-develop-slot,
.hs-gift-bar-wrap{
  position:sticky;
  top:6px;
  /* 写真カードより手前。モーダル類（2147482900〜）よりはずっと後ろ。 */
  z-index:40;
}
.hs-gift-bar{
  box-sizing:border-box;
  /* 2行組（数の行＋添え書き）にしたので縦積み。
     gap は行間なので、1行目の中の間隔は .hs-gift-bar-main が持つ。 */
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  width:100%; max-width:560px; margin:0 auto; padding:12px 18px;
  text-align:center;
  /* 見た目は現像可能数の帯と同じ枠にそろえる（利用者の指示・2026-08-14） */
  border:1px solid rgba(255,255,255,0.2);
  border-radius:10px;
  background:rgba(255,255,255,0.06);
  /* **ぼかしはここに置かない。** backdrop-filter は自前の重ね順を作るので、
     下敷き（下の .hs-gift-bar::before）が帯の地色より前に出て塗り潰す。
     ぼかしは下敷き側に持たせてある。 */
  transition:background-color .18s ease, box-shadow .18s ease;
  font-family:"M PLUS 2",sans-serif;
  /* サイト全体の動的CSSに負けないよう、文字サイズもここで固定する */
  font-size:13px !important;
  color:#f2c14e !important; -webkit-text-fill-color:#f2c14e;
}
/* ---- 留まっているあいだの下敷き（利用者の指示・2026-08-22）----
   「ここの追従は背景色が同じ雰囲気でつながるように」
   「上の追従バーは、楕四角の形状で切り取ってほしい」
   「輪郭に完璧に沿わせて」
   「画面上端のあいだを写真が通り抜けてしまう ―― これはOK」

   もとは**帯そのもの**に黒の半透明を焼き付けていた。暗い背景のサイトでは
   それらしく見えるが、明るいサイトでは留まった瞬間だけ帯が黒く沈む。
   次に入れ物（#fp-develop-slot / .hs-gift-bar-wrap）へ下敷きを敷いたが、
   入れ物は画面いっぱいの幅で、帯は中央の 560px ぶん ―― 帯の輪郭とは
   別の四角が背後に出る形になっていた。

   **下敷きは帯そのものに持たせる。** ::before を帯の中へ置き、
   inset と border-radius:inherit で帯の輪郭にそのまま沿わせる。
   幅も角の丸みも帯の宣言をそのまま継ぐので、帯の形が変わっても
   ここを直す必要がない（.is-empty の枠の色違いも同じ形のまま）。

   色は PHP が出す --hs-fp-stuck-veil（＝サイトの背景色。未設定なら白）。
   変数が無いとき（FPを読み込んでいないページ）だけ従来の黒に落ちる。

   上端との 6px の隙間は埋めない（利用者の判断・2026-08-22）。
   そこを写真が通り抜けるのは想定どおり。 */

/* 下敷きの置き場所。**position:relative だけ**にする ―― ここで
   backdrop-filter や transform を持つと帯が自前の重ね順を作ってしまい、
   z-index:-1 の下敷きが帯の地色より前に出る（＝帯を塗り潰す）。
   ぼかしは下敷き側へ移した。 */
#fp-develop-bar,
#fp-shutter-left-note,
.hs-gift-bar{ position:relative; }
#fp-develop-bar{ transition:background-color .18s ease, box-shadow .18s ease; }

#fp-develop-bar::before,
#fp-shutter-left-note::before,
.hs-gift-bar::before{
  content:'';
  position:absolute;
  /* 罫線のぶんだけ外へ出す。罫線は半透明（サイトによっては透明）なので、
     内側で止めると1pxの輪郭から写真が透ける。 */
  inset:-1px;
  border-radius:inherit;
  /* 帯の地色より後ろへ。入れ物が position:sticky + z-index:40 で自前の
     重ね順を持っているので、-1 にしてもページの背後までは抜けない。 */
  z-index:-1;
  background:var(--hs-fp-stuck-veil, rgba(0,0,0,0.42));
  /* 変数が無くて黒の半透明に落ちたときのために、ぼかしは下敷き側に置く。 */
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  /* 影は最初から持たせておく（留まった瞬間に影だけ後から足すと、
     形が変わったように見える）。動かすのは濃さだけ。
     下敷きの色はページの背景色と同じなので、輪郭を見せているのは影。 */
  box-shadow:0 4px 16px rgba(0,0,0,0.14);
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
}
/* 暗い背景のサイトは影も強めにする（薄い影は濃い面の上では見えない）。 */
body.hs-dark-bg #fp-develop-bar::before,
body.hs-dark-bg #fp-shutter-left-note::before,
body.hs-dark-bg .hs-gift-bar::before{
  box-shadow:0 4px 18px rgba(0,0,0,0.36);
}
#fp-develop-slot.is-stuck #fp-develop-bar::before,
#fp-develop-slot.is-stuck #fp-shutter-left-note::before,
.hs-gift-bar-wrap.is-stuck .hs-gift-bar::before{ opacity:1; }

/* **留まっている枠の透明な部分で、指を受け止めない。**
   入れ物は画面いっぱいの幅で、中の帯は中央の 560px ぶんだけ。
   留まっているあいだ入れ物は写真の上に重なるので、そのままだと
   左右の余白（何も描かれていない所）をタップしても写真に届かない。
   受けるのは帯そのものだけにする（下敷きは帯の中にあるので一緒に動く）。 */
#fp-develop-slot.is-stuck,
.hs-gift-bar-wrap.is-stuck{ pointer-events:none; }
#fp-develop-slot.is-stuck #fp-develop-bar,
.hs-gift-bar-wrap.is-stuck .hs-gift-bar{ pointer-events:auto; }

.hs-gift-bar b{
  /* 数字は現像可能数の帯（.fp-dev-count b）と**同じ指定**にそろえる
     （利用者の指摘・2026-08-14「数字のフォントにぶれがある」）。
     22px / 700 / #ffe14d / line-height:1。並んで出る帯どうしで
     数字の顔が違うと、別の種類の数に見える。 */
  color:#ffe14d !important; -webkit-text-fill-color:#ffe14d;
  /* 数字だけ別の書体になっていたので、帯と同じ書体を必ず継がせる
     （サイト全体の動的CSSが b/strong に別の書体を当てているため）。
     固定名ではなく inherit にして、読み込み状況によらずラベルと必ずそろえる。 */
  font-family:inherit !important;
  font-size:22px !important; font-weight:700; line-height:1; display:inline-block; margin:0 2px;
}
.hs-gift-bar .hs-gift-bar-icon{
  font-size:15px !important; line-height:1; -webkit-text-fill-color:initial;
}
/* 1行目（絵文字＋文＋数字）。行の中の間隔はここが持つ。
   line-height:1 にして、22pxの数字が作る行ボックスの余りで
   上下の見た目の余白がずれないようにする（矩形内の文字は上下均等）。 */
.hs-gift-bar .hs-gift-bar-main{
  display:flex; align-items:center; justify-content:center; gap:6px;
  line-height:1;
  /* **この行はまるごと太字**（利用者の指示・2026-08-21「商品を〜の列は
     全てボールド」）。以前は数字だけが太く、前後の文だけ細かったため、
     数字が浮いて1つの文に見えなかった。 */
  font-weight:700;
}
/* 2行目の添え書き。1行目より一段落ち着かせて、主役を数の行に残す。 */
.hs-gift-bar .hs-gift-bar-sub{
  display:block;
  font-size:11px !important; font-weight:400;
  line-height:1.5;
  color:rgba(255,255,255,.78) !important; -webkit-text-fill-color:rgba(255,255,255,.78);
}
@media (max-width:768px){
  .hs-gift-bar{ font-size:11px !important; }
  .hs-gift-bar .hs-gift-bar-sub{ font-size:10px !important; }
}

/* 添え書きの読点での改行は**スマホだけ**（利用者の指示・2026-08-21）。
   PCでは1行に収まるので、改行すると逆に間延びする。
   マークアップ側（hs_fp_gift_bar_html）が <br class="hs-band-sp-br"> を置く。 */
.hs-band-sp-br{ display:none; }
@media (max-width:768px){
  .hs-band-sp-br{ display:inline; }
}

/* **帯エリアの2つは同じ高さにそろえる**（利用者の指示・2026-08-21
   「高さを他に揃えてください」）。中身の行数が違っても（シャッターの帯は
   見出し＋2行、ギフト帯は見出し＋1〜2行）、入れ替わったときに
   箱の大きさが動かないようにする。
   下限だけを決め、内側は中央に置く ―― 行が増えたぶんは今までどおり伸びる。

   **ガチャ（グッズ提供）のときだけ**（利用者の指摘・2026-08-21
   「フォトモードのとき余白がおかしい、ここは前のままにしたい」）。
   フォトモードの帯は「ダウンロード可能数 のこり N 枚」の1行だけで、
   入れ替わる相手もいない。下限を持たせると、その1行の下に
   使われない余白が残る。 */
body.hs-fp-goods #fp-develop-bar,
.hs-gift-bar{
  min-height:90px;
  justify-content:center;
  align-content:center;
}
@media (max-width:768px){
  body.hs-fp-goods #fp-develop-bar,
  .hs-gift-bar{ min-height:84px; }
}

/* 帯を出さないときは、置き場の余白ごと畳む（印は applyDevelopCount）。
   高さ0の置き場が 14px の下余白を持ち続け、タブとギフト帯のあいだに
   誰も使っていない一段ぶんが残っていた（利用者の指摘・2026-08-21）。 */
#fp-develop-slot.is-collapsed{
  margin:0 !important;
  gap:0;
}
/* 一覧側の上の余白(30px)と帯の余白が重なって、間が空きすぎていた。
   帯を出しているときだけ、少しだけ詰める（10pxまで寄せると窮屈だった）。 */
/* 帯を出しているときの一覧側の上マージン。帯の下マージンで空けるので
   ここは足さない（両方で空けると離れすぎる）。 */
.hs-gift-bar-wrap + #pagePhotoList #capturedlists{ margin-top:0; }

/* ---- タブ行の下 ----
   帯エリアと同じ 14px にそろえる（このページだけ）。
   「上は誰も持たず、各要素が下だけを持つ」という規則の起点。 */
p.button-links{ margin-bottom:14px !important; }

/* ---- 一覧・詳細まわり（もとは同じページ内の2つめの <style>） ----
   画像のパスは**このファイルからの相対**。以前は get_template_directory_uri() で
   絶対URLを組んでいたが、CSSの url() はそのCSSファイルの位置から解く決まりなので、
   PHPに頼らなくてよい。 */

ul#capturedlists li .nocopy:after,
ul#capturedlistsSelected li .nocopy:after {
  background-image: url("../images/nocopy.svg");
}
.bg:after{
  background-image: url("../images/bg.png");
}
label.checkbox_label {
  background-image: url("../images/check_off.svg");
  background-size: 100%;
}
input[type=checkbox]:checked + label.checkbox_label{
  background-image: url("../images/check_on.svg");
  background-size: 100%;
}

#pageDetailsFramed,
.capturedlist{
  background: #0000002e;
  border-radius: 10px !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 0;
  overflow: hidden;
}
.capturedlistImage{
  padding-top: 0px;
  /* img はインライン既定だとベースライン下に余白が出るため block 化（サムネイル下の隙間を解消） */
  display: block;
}
/* 一覧画像の読み込み完了時にフェードイン */
.captured-fade{
  opacity: 0;
  transition: opacity 0.45s ease;
}
.captured-fade.is-loaded{
  opacity: 1;
}
/* ---- 帯と一覧を、確定するまで伏せる（利用者の報告・2026-08-15） ----
   **要素ごとに opacity を書くのはやめた。** 伏せるスクリプトは
   #fp-develop-slot の直後にあり、ギフト帯・シャッターの枠・写真一覧は
   その**あと**に出力される。解析時に querySelector が null を返すので
   そこだけ伏さらず、リロードのたびにギフト帯だけが一瞬出ていた。

   印を <html> に付けてCSSで伏せれば、**まだ出力されていない要素にも
   効く**（あとから現れた時点で既に伏さっている）。
   外すのは hsShowBands（状態が揃ったとき／保険の2.5秒後）。
   JSが動かない環境では印が付かないので、消えっぱなしにはならない。 */
/* 同梱（TOPの #fp-captured-spa）では印を <html> ではなく**入れ物**に付ける。
   <html> に付けると、TOP側の帯（シャッター残数の告知など）まで
   同じ選択子で伏さり、TOPを開いた直後の2.5秒だけ帯が消える。
   伏せたいのは同梱した一覧の中だけ。 */
html.hs-fp-bandwait #fp-develop-slot,
html.hs-fp-bandwait .hs-gift-bar-wrap,
html.hs-fp-bandwait #fp-shutter-left-note,
html.hs-fp-bandwait #pagePhotoList,
#fp-captured-spa.hs-fp-bandwait #fp-develop-slot,
#fp-captured-spa.hs-fp-bandwait .hs-gift-bar-wrap,
#fp-captured-spa.hs-fp-bandwait #fp-shutter-left-note,
#fp-captured-spa.hs-fp-bandwait #pagePhotoList { opacity: 0; }
#fp-develop-slot,
.hs-gift-bar-wrap,
#fp-shutter-left-note,
#pagePhotoList { transition: opacity .22s ease; }

/* ---- 一覧の初回表示（利用者の指示・2026-08-15） ----
   状態が揃うまでカードを伏せ（html.hs-fp-listwait・付け外しは
   hsShowBands のスクリプトが持つ）、揃ったら**上から順に**せり上げる。
   アニメーションは backwards: 遅延中は最初のコマ（透明）で待ち、
   終わったら**通常のスタイルに戻る** ―― both で最終コマに固定すると、
   ホバーの transform が一生効かなくなる。
   並べ替え（sortFrames の FLIP）は2秒後なので、最後のカードの
   せり上がり（約1.1秒）とは重ならない。 */
/* 見せどきの合図（.hs-cards-in）は React（captured-list.tsx）が
   状態の settled と同じ描画で付ける。合図が無い間は伏せる。
   以前は html への印＋インラインスクリプトの合図で二段構えにしていたが、
   部品が多く順序の穴が塞ぎきれなかった（利用者の報告・2026-08-15
   「直っていない」）。判定と描画を同じ場所にした。 */
#capturedlists:not(.hs-cards-in) .captured-item{ opacity: 0; }
#capturedlists.hs-cards-in .captured-item{
  animation: hsCardIn .42s cubic-bezier(.2, .8, .3, 1) backwards;
}
#capturedlists.hs-cards-in .captured-item:nth-child(1){ animation-delay: 0ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(2){ animation-delay: 55ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(3){ animation-delay: 110ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(4){ animation-delay: 165ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(5){ animation-delay: 220ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(6){ animation-delay: 275ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(7){ animation-delay: 330ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(8){ animation-delay: 385ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(9){ animation-delay: 440ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(10){ animation-delay: 495ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(11){ animation-delay: 550ms; }
#capturedlists.hs-cards-in .captured-item:nth-child(12){ animation-delay: 605ms; }
/* 13枚目以降は同じ遅延でまとめて出す。行が深くなるほど待たせても
   「出てこない」に見えるだけ（選べる商品の行と同じ考え方） */
#capturedlists.hs-cards-in .captured-item:nth-child(n+13){ animation-delay: 660ms; }
@keyframes hsCardIn{
  from{ opacity: 0; transform: translateY(12px); }
  to  { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  #capturedlists.hs-cards-in .captured-item{ animation: none; }
}
.display-user-id{
  padding-top: 30px;
}

.layout{
  width: 90%;
}
#pageDetails.horizontal .layout{
    width: 90%;
}

@media only screen and (max-width: 480px) {
  .layout{
    width: 90%;
  }
  ul#capturedlists, ul#capturedlistsSelected {
    width: 90%;
  }
}

#pageDetailsFramedButtonCheckout_P2[data-href="disabled"]{
  display: none !important;
}

/* ---- 拡大表示（#zoom）の入れ物の大きさは captured.css が持ち主 ----
   `#zoom > #zoomContainer { width:auto !important; height:auto !important;
   max-width:100%; max-height:100dvh; aspect-ratio:auto !important }`
   （captured.css・2026-08-19）が、**比率によらず**入れ物を写真ぴったりに
   縮める。写真の隅に置いたクレジットとIDが写真の外に出ないための仕掛けで、
   横・縦・正方形のどれでもこれ1つで足りる。

   ここには以前 `#zoom > #zoomContainer`（16:9）と `#zoom.vertical …`（9:16）が
   書いてあったが、!important の付いていない素の宣言で、上の指定に負けて
   **一度も効いていなかった**。2026-08-22 にそこへ `.square` 用の指定を
   足したところ、そちらだけは詳細度で勝ってしまい、入れ物が
   min(100dvh,100vw) の正方形に広がって**写真から離れた隅に
   クレジットが出る**（＝直そうとしていた不具合そのもの）状態になった。
   比率ごとの指定は全部やめて、持ち主を captured.css の1か所に戻す。

   正方形セッションの拡大表示が崩れて見えた原因は別で、
   通常モード（body.hs-fp-develop）に印画紙の余白だけが残っていたこと。
   prototype-otanoshimi.css 側で直してある。 */

#purchase_goodsController .button a, #fixedfooter .button a{
  line-height: 1.1;
  padding: 0px 10px;
}
/* 詳細のボタン（ダウンロード/グッズ購入）は横幅を揃える。
   商品選択モーダル内の .buttons を巻き込まないよう直下だけに当てる */
#purchase_goodsController > .buttons > .button{
  width: 300px;
  max-width: 88vw;
}
#purchase_goodsController > .buttons > .button a.footerButton{
  width: 100%;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.buttons{
  gap: 0;
}
/*
.footerButton {
  font-size: 14px;
  height: 40px;
}
*/
/*
#pageDetails.horizontal #pageDetailsFramed
 {
  width: 50vw;
 }
*/

/* 詳細モーダルを開いている間、**背後の一覧**のチェックは隠す。

   限定が要る理由: `.checkbox_label` は一覧のコマだけでなく、
   詳細モーダル自身の選択チェック（#CapturedImagesFrameDetail の label）
   にも付いている。body 直下から無条件に消すと、詳細モーダルの
   チェックまで巻き添えで消えて、**詳細から1コマを選ぶ操作が
   できなくなる**（入力は captured.css:439 で常に display:none、
   押せるのは label だけなので、label が消えると手が無い）。
   一覧のカード（.captured-item）の中だけに絞る。

   お楽しみ動画フォト/ガチャでは、詳細のチェックを出さないのが正しい。
   それは prototype-otanoshimi.css:713-720 の body.hs-fp / hs-fp-develop
   が別途受け持っているので、ここでは何もしない。 */
body.modal-open .captured-item .checkbox_label,
body.modal-open .captured-item .checkmark {
  display: none !important;
}

/* Button Links Layout */
.button-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  text-align: center;
  justify-content: center;
}
@media screen and (min-width: 481px) {
  .button-links {
    flex-direction: row;
    justify-content: center;
  }
  /* Force independent layout for footer buttons on PC */
  .footer-buttons-pc-horizontal {
      display: grid !important;
      /* 列数は管理画面の設定（special_goods_columns）。既定は3列で、
         2列のときだけページ側が --hs-goods-cols を上書きする。 */
      grid-template-columns: repeat(var(--hs-goods-cols, 3), 1fr) !important;
      gap: 10px !important;
      justify-content: center !important;
      width: 100% !important;
      max-width: 1000px !important;
  }
  .footer-buttons-pc-horizontal .button {
      width: 100% !important;
      min-width: 0 !important; /* Allow grid to control width */
      flex: auto !important;
  }
}

/* Prevent Image Drag/Save */
#pageDetailsFramedImage, #zoomImage {
    user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
    pointer-events: auto;
}
/* 詳細表示のスムース遷移（写真切替時に opacity フェード） */
#pageDetailsFramedImage { transition: opacity 0.25s ease; }

/* 詳細表示を開く瞬間に縦スクロールバーの有無が変わると、中央寄せの要素（撮影した写真の
   タブバー等）がスクロールバー幅ぶん左右にずれ、View Transitions でその差分が動いて
   「変な風に動く」ように見える。スクロールバー領域を常に確保してレイアウトのガタつきを無くす。 */
html { scrollbar-gutter: stable; }

/* サムネイル⇄詳細モーダルのモーフィング遷移（View Transitions API・対応ブラウザのみ）。
   共有 view-transition-name "photo-morph" を付与した両画像の間を、位置・サイズ・
   クロスフェードで滑らかに繋ぐ。非対応/reduced-motion 時は通常表示にフォールバック。 */
::view-transition-group(photo-morph) {
    animation-duration: 0.38s;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
::view-transition-image-pair(photo-morph) {
    isolation: auto;
}
/* モーフィング中、移動先(ズーム先/詳細先)に旧画像が薄く重なって「影(ゴースト)」のように
   先行表示されるのを防ぐ。旧画像(詳細の低解像度プレビュー等)を即座に消し、新画像を最初から
   不透明にして、位置・サイズの変形(グループ)だけを滑らかに見せる。二重像が出なくなる。 */
html.hs-morphing::view-transition-old(photo-morph) { animation: none; opacity: 0; }
html.hs-morphing::view-transition-new(photo-morph) { animation: none; opacity: 1; }
/* ID表示も写真と同じタイミングで位置・サイズをモーフィングさせる。 */
::view-transition-group(id-morph) {
    animation-duration: 0.38s;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
/* モーフィング中は枠の影を一時的に消す。影は枠コンテナ(#pageDetailsFramed)に付いており
   画像(morph対象)とは別タイミング(root側)で動くため、影だけが先行して見えるのを防ぐ。 */
html.hs-morphing #pageDetailsFramed { box-shadow: none !important; }

/* ---- クレジット（Captured by / ©）は右下にそろえる ----
   利用者の指示・2026-08-22。拡大表示（#zoom .copyright）は 2026-08-20 から
   右下で、詳細（.copyright_detailphoto）も印画紙モードでは右下だった。
   通常モードの一覧カードと詳細だけが左下のまま残っていて、同じ写真なのに
   見る場所で位置が変わっていた。

   印画紙（.capturedlist.fp-polaroid .copyright / body.hs-fp の詳細）は
   下帯の高さから位置を逆算した専用の指定を持っており、そちらのほうが
   詳細度が高いので触らない。 */
.capturedlist .copyright{
  left: auto;
  right: 5px;
  text-align: right;
}
#pageDetails .copyright_detailphoto{
  left: auto;
  right: 3%;
  text-align: right;
}

/* ---- お知らせの帯とポップアップは assets/css/info-popup.css へ移した ----
   写真一覧だけでなく **TOPでも同じものを出す**ようになったため
   （利用者の指示・2026-08-23「これをTOPにも用意する」）。
   このファイルは /captured/ でしか読まないので、ここに置いたままだと
   TOPで枠も色も付かない。クラス名は変えていない（hs-captured-info /
   hs-cap-popup）―― 名前を変えると、片方の画面だけ当たらなくなる。 */


/* ---- 抽選キャンペーン: 当たるグッズの候補 ----
   一覧の下の案内パネルは畳んだ（利用者の指示・2026-08-22）。ここに残るのは
   拡大表示の「欲しいグッズを選択」で開くダイアログが使う並びだけ。
   枚数が変わっても真ん中にまとまるよう、折り返す並びにする。 */
.hs-lottery-goods{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin:14px 0 0;
}
/* 押して選ぶ。**選んでいるものが一目で分かる**ように、枠と地色を変える
   ―― 印を「枠だけ」にすると、暗い背景では境目が沈んで見えなかった。 */
.hs-lottery-good{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  width:112px;   /* 96px の升目 + padding 6×2 + border 2×2 */
  /* button の既定を消す。押せるものだと分かる形は下の枠と影で作る。 */
  appearance:none; -webkit-appearance:none;
  margin:0;
  padding:6px;
  border:2px solid transparent;
  border-radius:12px;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
  transition:border-color .15s ease, background-color .15s ease;
}
.hs-lottery-good:hover{ border-color:rgba(128,128,128,0.45); }
body.hs-dark-bg .hs-lottery-good:hover{ border-color:rgba(255,255,255,0.35); }
.hs-lottery-good.is-picked{
  border-color:#e0a33c;
  background:rgba(224,163,60,0.16);
}

.hs-lottery-good img{
  display:block;
  width:96px;
  height:96px;
  /* 縦横比の違う商品画像が混ざっても、切らずに全部見せる（枠の大きさは一定）。 */
  object-fit:contain;
  background:#fff;
  border-radius:10px;
}
.hs-lottery-good span{
  font-size:11px;
  line-height:1.4;
  word-break:break-word;
}

@media only screen and (max-width: 480px) {
  /* 枠のぶん（padding 6 + border 2）×2 を足して、写真の升目は 78px を保つ */
  .hs-lottery-good{ width:94px; }
  .hs-lottery-good img{ width:78px; height:78px; }
}

/* ---- 抽選キャンペーン: 拡大表示のボタン ----
   「この写真のグッズを購入」はこのモードでは出さない（利用者の指示・2026-08-22）。
   抽選キャンペーンは買う体系ではないので、同じ場所に購入の入口を置いたままだと
   どちらが本筋なのか読み取れない。**「商品サンプルはこちら」は残す** ――
   何が当たるのかを確かめる導線で、買う話とは別。 */
body.hs-lottery #purchase_goodsController a[onclick*="openGoodsSelection"]{
  display:none !important;
}
.hs-lot-detail-btn{
  appearance:none; -webkit-appearance:none;
  display:block;
  width:min(300px, 78vw);
  margin:15px auto 0;
  border:1px solid rgba(255,255,255,0.55);
  border-radius:999px;
  background:transparent;
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  font-family:"M PLUS 2", sans-serif;
  font-size:15px;
  font-weight:700;
  /* 矩形の中の文字は上下の余白を均等に（利用者の標準ルール）。
     行の余りが上に溜まらないよう line-height を殺してから padding を同値にする。 */
  line-height:1;
  padding:16px 20px;
  cursor:pointer;
}
/* 主たる一手（投稿する画像を選ぶ）は塗りにして、二番目と見分けられるようにする。
   既存CTAの #ff8400 は白文字とのコントラストが 2.46 しかないので、
   同系で少し深い #ea580c にする（白文字で 4.5 以上）。 */
.hs-lot-detail-btn.hs-lot-detail-primary{
  background:#ea580c;
  border-color:#ea580c;
  color:#fff !important;
  -webkit-text-fill-color:#fff;
}
.hs-lot-detail-btn:hover{ opacity:.9; }
/* 「商品サンプルはこちら」はボタンの下に来る（差し込む位置で決めている）。
   間隔だけ、ボタンと同じ 15px にそろえる。 */
body.hs-lottery #purchase_goodsController a[onclick*="openGoodsSample"]{
  margin-top:15px !important;
}

/* 欲しいグッズを選ぶダイアログ。暗幕と重なりの段は案内ダイアログ（.hs-cap-popup）
   をそのまま使い、中の白い箱だけこちらで作る。 */
.hs-lot-picker-box{
  width:min(560px, 100%);
  padding:22px 20px 20px;
  border-radius:16px;
  background:#1b1b1b;
  color:#fff;
  font-family:"M PLUS 2", sans-serif;
  text-align:center;
}
.hs-lot-picker-title{
  margin:0 0 14px;
  font-size:14px;
  font-weight:700;
  line-height:1.6;
}
.hs-lot-picker-goods{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}
/* 暗い地のダイアログに置くので、文字は白にそろえる。 */
.hs-lot-picker-goods .hs-lottery-good{ color:#fff; }
/* いま何を選んでいるか（選んだ結果はサーバーが返す。ここはその写し）。 */
.hs-lot-picker-msg{
  margin:14px 0 0;
  font-size:12px;
  line-height:1.7;
  color:rgba(255,255,255,0.8);
}
.hs-lot-picker-box .hs-cap-popup-close{ margin-top:18px; }


/* ---- 抽選キャンペーン: 選んだ写真だけを確認するダイアログ ----
   取り消せない一手なので、押した先で何が起きるかを添える。 */
.hs-lot-confirm-note{
  margin:0 0 4px;
  font-size:12px;
  line-height:1.7;
  color:rgba(255,255,255,0.75);
}
.hs-lot-confirm-box .hs-lot-detail-btn{ margin:14px auto 0; }

/* ---- 抽選キャンペーン: 右上のバッジ（選択済 / 未選択）----
   一覧では「どれを選んだか」がいちばん知りたいことなので、
   選択済だけ塗りを変えて、未選択（既定の黒地）と離す。

   緑地に白のチェックマーク（利用者の指示・2026-08-22）。
   **色だけに頼らない** ―― チェックは文字として置き、
   色が読み取れない人にも「済んでいる」ことが分かるようにする。
   #15803d は白文字とのコントラストが 4.5 以上ある。 */
.product-badge.is-lot-picked{
  background-color:#15803d;
  color:#fff;
  font-weight:700;
}
.product-badge.is-lot-picked::before{
  content:"✓";
  margin-right:3px;
  /* 記号の行の余りで上下がずれないよう、行の高さを殺してから中央に置く */
  line-height:1;
  vertical-align:middle;
}