/*
 * お知らせの帯（インフォメーション）と、ポップアップダイアログ。
 *
 * **写真一覧とTOPで同じものを出す**（利用者の指示・2026-08-23
 * 「これをTOPにも用意する」）。もとは captured-page.css の中にあったが、
 * あちらは /captured/ でしか読まないので、TOPでは枠も色も付かなかった。
 *
 * クラス名は移す前のまま（hs-captured-info / hs-cap-popup）。
 * 名前を変えると、片方の画面だけ当たらなくなる。
 *
 * 出す中身と設定は parts/info-popup.php が持つ（画面ごとの prefix で
 * captured_* / top_* を読み分ける）。
 */

/* ---- 写真一覧のインフォメーション（Design →「写真一覧」→「インフォメーション」）----
   体験モードの残数の帯（#fp-develop-bar）と**同じ見た目**にそろえる。
   別の作りにすると、同じ位置に同じ形で出るものが2種類あることになり、
   どちらが何の話なのか読み手に区別がつかない。

   ただし持ち物は別にしてある ―― あちらは体験モードの残数で、
   出し入れの条件も中身の作り手（JS）も違う。見た目だけをそろえる。

   色は帯と同じ考え方: 明るいサイトでは白の薄膜が浮くので、
   文字色から作った薄い面（currentColor の 6%）を敷き、枠線は控えめにする。 */
.hs-captured-info-wrap{
  box-sizing:border-box;
  width:100%;
  display:flex;
  justify-content:center;
  /* 縦の間隔は、この帯エリアの規則どおり「下だけ」を持つ
     （上は誰も持たない。captured-page.css のタブ行の節と対）。 */
  margin:0 0 14px;
}

/* ---- 写真一覧では、スクロールしても帯が付いてくる（利用者の指示・2026-08-26
   「これはスクロールして追従するように」）----

   **写真一覧のときだけ**（data-scope="captured"）。同じ部品を TOP でも
   出しており（parts/info-popup.php は1つ）、あちらは扇やカルーセルが
   縦に流れる画面なので、付いてくると邪魔になる。

   `position:sticky` は**祖先に overflow があると効かない**。いまの一覧に
   その指定は無いが、外側を触るときはここも確かめること
   （効かなくなっても見た目は静かに元へ戻るだけで、気づけない）。

   帯は半透明なので、下を写真が通ると読めなくなる。**通る中身をぼかす**
   （backdrop-filter）―― サイトの背景色を知らなくても、どの配色でも文字が立つ。
   ぼかしが効かないブラウザでは、いまの半透明のまま重なるだけ（読めはする）。 */
.hs-captured-info-wrap[data-scope="captured"]{
  position:sticky;
  top:0;
  /* 写真のカード（バッジは30）より上、案内モーダル（2147483000）より下。 */
  z-index:60;
  /* 上の余白は sticky で必要になるぶん（元は「下だけ」だった）。 */
  padding:10px 0;
  margin-bottom:4px;
}
/* **ぼかさない**（利用者の指示・2026-08-26「stickyはblurではなく、
   これと同じにして」）。一度 backdrop-filter で通る中身をぼかしていたが、
   画面いっぱいに曇った帯が横切る見え方になっていた。

   代わりに**帯の下にページと同じ色を敷く**。帯そのものの色（薄膜）は
   流れの中に居るときと同じままで、下に写真が透けないだけになる ――
   #fp-develop-slot が上端に留まるときと同じやり方（--hs-fp-stuck-veil）。

   薄膜は background-image（同じ色の1段グラデーション）で重ねる。
   background-color は下に敷く色に使うので、2枚を1つのプロパティで
   持てないため。 */
.hs-captured-info-wrap[data-scope="captured"] .hs-captured-info{
  background-color:var(--hs-fp-stuck-veil, #fff);
  background-image:linear-gradient(rgba(128,128,128,0.10), rgba(128,128,128,0.10));
}
body.hs-dark-bg .hs-captured-info-wrap[data-scope="captured"] .hs-captured-info{
  background-image:linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0.28));
}
/* バナー画像のときは面を持たないので、敷く色も要らない。 */
.hs-captured-info-wrap[data-scope="captured"] .hs-captured-info-banner{
  background-color:transparent;
  background-image:none;
}

/* **留まっているあいだだけ影を落とす**（利用者の指示・2026-08-27
   「追従するとき影を浸けて」）。下を写真が通っているときに、帯が手前に
   在ることが分かる ―― 流れの中では背後が一色なので、影があると
   理由なく浮いて見える。

   印（.is-stuck）を付けるのは captured-page.js の hsWatchStickyBands。
   帯の直前に置いた番兵が画面から出たかどうかで見ている
   ―― 帯そのものを見張ると、貼り付いている間もずっと画面内で分からない。 */
.hs-captured-info-wrap[data-scope="captured"] .hs-captured-info{
  transition:box-shadow .18s ease;
}
.hs-captured-info-wrap[data-scope="captured"].is-stuck .hs-captured-info{
  box-shadow:0 6px 18px rgba(0,0,0,0.28);
}
@media (prefers-reduced-motion: reduce) {
  .hs-captured-info-wrap[data-scope="captured"] .hs-captured-info{ transition:none; }
}
/* =============================================================
   写真一覧に並ぶ「面」の共通の見た目（2026-08-26）

   **2つが同じ面を使う**（利用者の指示「CSSも切り出して共通化してほしい」）:
     - お知らせの帯      .hs-captured-info
     - 残数パネル        #fp-develop-slot .hs-dlpanel
   同じ画面に上下で並ぶので、幅や丸みが違うとどちらかが仮置きに見える。
   以前は同じ値を2か所（ここと captured-page.css）に書いていた。

   **薄膜（半透明）で作ってある。** ページの色を知らなくても、明るいサイト
   でも暗いサイトでも「面がある」ことだけが伝わる。下に何かが透ける場所へ
   置くときは、透けない色を敷いてから重ねること（下の追従の節を参照）。
   ============================================================= */
.hs-cap-panel,
.hs-captured-info,
#fp-develop-slot .hs-dlpanel{
  box-sizing:border-box;
  width:min(680px, 92%);
  padding:14px 18px;
  border:1px solid rgba(128,128,128,0.28);
  border-radius:16px;
  background:rgba(128,128,128,0.10);
  font-family:"M PLUS 2", sans-serif;
  font-size:13px;
  /* 太字（利用者の指示・2026-08-27「bold」）。短い一文を面の中央に置く
     見せ方なので、細いと面のほうが目立って文が沈む。 */
  font-weight:700;
  line-height:1.7;
  text-align:center;
}
/* 暗い背景のサイトは黒の薄膜にする（body.hs-dark-bg はサイトの背景色から
   付く印。FPの帯の配色もこれで分けている）。 */
body.hs-dark-bg .hs-cap-panel,
body.hs-dark-bg .hs-captured-info,
body.hs-dark-bg #fp-develop-slot .hs-dlpanel{
  border-color:rgba(255,255,255,0.16);
  background:rgba(0,0,0,0.28);
}
@media only screen and (max-width: 480px) {
  .hs-cap-panel,
  .hs-captured-info,
  #fp-develop-slot .hs-dlpanel{ padding:12px 12px; font-size:12px; }
}

/* ---- TOPの帯も、写真一覧と同じ寸法にする（利用者の指示・2026-08-27
   「お知らせのレイアウトが微妙に違う、サイズ感は写真一覧を正にして」）----

   幅は上の共通規則が 92% で持っているが、**92% の相手（親）が画面ごとに違う**。
   写真一覧の帯はページの幅いっぱいの中に居るのに対し、TOPの帯は LP の器
   （`.wrapeer.lp2-mode` ＝ スマホで calc(100% - 20px)）の中に居るので、
   同じ 92% でも一回り内側に入っていた。**正は写真一覧**（利用者の指示）
   なので、TOPだけ画面幅を相手にする。

   上限（680px）は共通のまま ―― PCではどちらも 680px なので、
   変わるのはスマホだけ。 */
.hs-captured-info-wrap[data-scope="top"] .hs-captured-info{
  width:min(680px, 92vw);
}


/* ---- 左のアイコン（利用者の指示・2026-08-26「左にアイコンを指定できるように」）----
   決めていないサイトには要素そのものが出ないので、ここは在るときの形だけ。
   文と横に並べるため、帯そのものを flex にする（.has-icon のときだけ）。
   **中央そろえは保つ** ―― アイコンと文をひとかたまりとして中央に置く。 */
.hs-captured-info.has-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.hs-captured-info-icon{
  flex:none;
  font-size:22px;
  line-height:1;
  opacity:.85;
  /* 絵文字ではなくアイコンフォントなので、文字色をそのまま継ぐ。
     帯の文字色指定（-webkit-text-fill-color）に巻き込まれると
     塗りつぶされるため、こちらでも継承を書いておく。 */
  color:inherit;
  -webkit-text-fill-color:currentColor;
}
@media only screen and (max-width: 480px) {
  .hs-captured-info-icon{ font-size:19px; }
  .hs-captured-info.has-icon{ gap:8px; }
}

/* バナー画像のとき（利用者の指示・2026-08-22）。
   **枠も余白も持たない** ―― バナーは絵として仕上がっているので、
   周りに枠を付けると額縁が二重になる。幅と丸みだけ帯と同じにそろえ、
   画像は縦横比のまま収める（伸ばしも切りもしない）。 */
.hs-captured-info-banner{
  padding:0;
  border:none;
  background:transparent;
  overflow:hidden;          /* 角の丸みを画像にも効かせる */
  line-height:0;            /* img の下に行の余りが残らないように */
}
body.hs-dark-bg .hs-captured-info-banner{
  border:none;
  background:transparent;
}
.hs-captured-info-banner img{
  display:block;
  width:100%;
  height:auto;
}
@media only screen and (max-width: 480px) {
  .hs-captured-info-banner{ padding:0; }
}

/* ---- 写真一覧のポップアップ（Design →「写真一覧」→「ポップアップダイアログ」）----
   重なりの決まりは CLAUDE.md の一覧に合わせる。購入モーダル(2147482900)より
   手前に出す用は無く、**案内の類**なので案内モーダルと同じ段（2147483000）に置く。 */
.hs-cap-popup{
  position:fixed; inset:0;
  z-index:2147483000;
  display:none;            /* 出すのは JS（captured-popup.js） */
  align-items:center; justify-content:center;
  padding:20px;
  box-sizing:border-box;
  background:rgba(0,0,0,0.62);
  -webkit-overflow-scrolling:touch;
  overflow:auto;
}
.hs-cap-popup-box{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  max-width:min(720px, 100%);
  margin:auto;
}
/* 画像は**縦横比のまま**画面に収める（伸ばさない・切らない）。
   引く 120px は下の「閉じる」とその余白のぶん。 */
.hs-cap-popup-box img{
  display:block;
  max-width:100%;
  max-height:calc(100dvh - 120px);
  width:auto; height:auto;
  border-radius:12px;
  box-shadow:0 10px 40px rgba(0,0,0,0.45);
}
.hs-cap-popup-close{
  appearance:none; -webkit-appearance:none;
  border:1px solid rgba(255,255,255,0.55);
  background:rgba(255,255,255,0.10);
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  font-family:"M PLUS 2", sans-serif;
  font-size:14px; font-weight:700;
  /* 矩形の中の文字は上下の余白を均等に（利用者の標準ルール）。
     行の余りが上に溜まらないよう line-height を殺してから padding を同値にする。 */
  line-height:1;
  padding:13px 30px;
  border-radius:999px;
  cursor:pointer;
}
.hs-cap-popup-close:hover{ background:rgba(255,255,255,0.18); }
/* ポップアップが出ている間は後ろを動かさない */
body.hs-cap-popup-open{ overflow:hidden; }
/* 狭い画面。**この3つは captured-page.css に取り残されていた** ――
   あちらは /captured/ でしか読まないので、TOPのポップアップだけ
   スマホで余白が広いままだった（2026-08-23 に移設）。 */
@media only screen and (max-width: 480px) {
  .hs-cap-popup{ padding:16px; }
  .hs-cap-popup-box img{ max-height:calc(100dvh - 110px); }
  .hs-cap-popup-close{ font-size:13px; padding:12px 26px; }
}
/* ---- きっかけが「インフォメーションをタップ」のとき ----------------------
   押せることと、**押すと別の面（ポップアップ）が開く**ことの2つを見せる
   （利用者の指示・2026-08-23「右に、右上矢印のまーくをいれてポップアップする
   ことがわかるようにして」→「右の矢印にして、もう少し矢印を大きく」）。
   右向きの矢印で「押すと先へ進む」ことを示す。大きさは 20px
   （13pxの文字より少し大きい ―― 小さいと飾りに見えて印にならない）。

   印は **`is-tappable` が付いた帯だけ**に出す ―― この印は
   captured-popup.js が「きっかけ＝info_tap」のときだけ付ける。
   CSSの側で条件を足すと、管理画面の選択と食い違う。 */
.hs-captured-info.is-tappable{ position:relative; cursor:pointer; }
.hs-captured-info.is-tappable:hover{ border-color:rgba(128,128,128,0.5); }
body.hs-dark-bg .hs-captured-info.is-tappable:hover{ border-color:rgba(255,255,255,0.4); }

/* 文章の帯。**左右の余白を同じだけ広げる** ―― 右だけ広げると、
   中央寄せの文字が左へずれて、矢印を足しただけで文面が動いて見える。
   矢印そのものは絶対配置なので、文字の中央寄せには関わらない。 */
.hs-captured-info.is-tappable:not(.hs-captured-info-banner){ padding-left:46px; padding-right:46px; }
.hs-captured-info.is-tappable::after{
  content:'';
  position:absolute; top:50%; right:16px;
  transform:translateY(-50%);
  width:20px; height:20px;
  opacity:.65;
  pointer-events:none;    /* 矢印の上を押しても帯を押したことになるように */
  /* **文字色から作る**（塗りを currentColor にして、形はマスクで抜く）。
     色を直に書くと、サイト全体の自由CSS（general_style_css）で
     文字色を変えている画面で矢印だけ取り残される。 */
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.hs-captured-info.is-tappable:hover::after{ opacity:.95; }

/* バナー画像のとき。絵の上に重なるので、**文字色ではなく白で描き、
   下地に暗い丸を敷く** ―― 明るい絵の上では currentColor の矢印が消える。
   置き場所は右上（絵の中の文字は中央〜下に置かれることが多く、
   右上がいちばん当たりにくい）。 */
.hs-captured-info-banner.is-tappable::after{
  top:10px; right:10px;
  transform:none;
  width:32px; height:32px;
  border-radius:999px;
  opacity:1;
  -webkit-mask:none; mask:none;
  background:rgba(0,0,0,0.42) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='M13 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat center / 20px 20px;
}
.hs-captured-info-banner.is-tappable:hover::after{ background-color:rgba(0,0,0,0.6); }

@media only screen and (max-width: 480px) {
  /* 狭い画面では帯そのものの余白が 18px なので、矢印のぶんも詰める
     （46px のままだと文字の入る幅が足りない）。 */
  .hs-captured-info.is-tappable:not(.hs-captured-info-banner){ padding-left:38px; padding-right:38px; }
  .hs-captured-info.is-tappable::after{ right:12px; width:17px; height:17px; }
  .hs-captured-info-banner.is-tappable::after{ top:8px; right:8px; width:27px; height:27px; background-size:17px 17px; }
}

/* ---- 出入りの動き（利用者の指示・2026-08-23「Modalがでるときには
   ふわっとズームイン&フェードイン／とじるときはズームアウト&フェードアウト」）----

   **既定の見た目は変えない。** 印（is-in / is-out）が付いたときだけ動かす
   ―― このクラス（.hs-cap-popup）は抽選のグッズ選択ダイアログでも使い回して
   おり、あちらは display を直に出し入れする。既定を透明にすると、
   あちらが**開いても見えない**ダイアログになる。 */
@keyframes hs-cap-popup-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hs-cap-popup-box-in {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes hs-cap-popup-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes hs-cap-popup-box-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.94); }
}
.hs-cap-popup.is-in { animation: hs-cap-popup-in .22s ease both; }
.hs-cap-popup.is-in .hs-cap-popup-box {
  animation: hs-cap-popup-box-in .26s cubic-bezier(.2, .8, .3, 1) both;
}
/* 閉じるほうは少し速く（閉じる動きが長いと「反応が遅い」に見える）。
   JS の CLOSE_MS（200ms）と対。片方だけ変えると、消える前に display が
   落ちるか、消えたあとに間が空く。 */
.hs-cap-popup.is-out { animation: hs-cap-popup-out .2s ease both; }
.hs-cap-popup.is-out .hs-cap-popup-box {
  animation: hs-cap-popup-box-out .2s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .hs-cap-popup.is-in,
  .hs-cap-popup.is-in .hs-cap-popup-box,
  .hs-cap-popup.is-out,
  .hs-cap-popup.is-out .hs-cap-popup-box { animation: none; }
}

/* =============================================================
   帯ごとリンクにするとき（タップしたときの挙動＝グッズ／写真一覧）

   **見た目は変えない。** 押せることだけを足すので、リンクの下線も
   色も消し、幅の決まり方も元のまま（帯の width:min(92%,560px) は
   親の幅に対する割合なので、この <a> が親の幅いっぱいに広がらないと
   帯が縮む）。
   ============================================================= */
.hs-captured-info-link{
  display:flex;
  justify-content:center;
  width:100%;
  color:inherit;
  text-decoration:none;
}
.hs-captured-info-link:hover,
.hs-captured-info-link:focus{ color:inherit; text-decoration:none; }
/* 押せる印（右上の矢印）は帯側の .is-tappable が持つ ―― リンクのときも
   同じ印を出す。JSは「ポップアップを開く」ときにしか印を付けないため、
   ここで同じものを付ける。 */
.hs-captured-info-link .hs-captured-info{ cursor:pointer; }

/* =============================================================
   ポップアップの中身がHTML／テンプレートのとき

   画像のときは絵がそのまま箱になるが、HTMLは自分で箱を持たないので
   ここで地色と余白を与える。**地色はお試しダイアログと同じ濃紺**に
   そろえる（案内の見た目が画面ごとに違って見えないように）。
   テンプレート（.fp-guide-tpl）の中身の体裁は guide-template.css。
   ============================================================= */
.hs-cap-popup-box.is-html{
  width:min(720px, 92%);
  max-height:calc(100dvh - 80px);
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:16px;
  /* 既定はお試しダイアログと同じ濃紺。Design タブで地色を指定して
     あれば hs_fp_trial_dialog_css() があとから上書きする。 */
  background:#14163c;
  box-shadow:0 10px 40px rgba(0,0,0,0.45);
}
.hs-cap-popup-box.is-html .fp-preshoot-html{
  padding:22px 20px;
  color:#fff;
  font-size:14px;
  line-height:1.8;
  text-align:left;
}
/* テンプレートは自前で余白を持つので、二重に付けない。 */
.hs-cap-popup-box.is-html .fp-preshoot-html:has(> .fp-guide-tpl){ padding:0; }
.hs-cap-popup-box.is-html .fp-preshoot-html :first-child{ margin-top:0; }
.hs-cap-popup-box.is-html .fp-preshoot-html :last-child{ margin-bottom:0; }
.hs-cap-popup-box.is-html .fp-preshoot-html h1,
.hs-cap-popup-box.is-html .fp-preshoot-html h2,
.hs-cap-popup-box.is-html .fp-preshoot-html h3{
  margin:0 0 10px;
  font-size:18px;
  font-weight:800;
  line-height:1.4;
}
.hs-cap-popup-box.is-html .fp-preshoot-html p { margin:0 0 12px; }
.hs-cap-popup-box.is-html .fp-preshoot-html ul,
.hs-cap-popup-box.is-html .fp-preshoot-html ol{ margin:0 0 12px; padding-left:1.3em; }
.hs-cap-popup-box.is-html .fp-preshoot-html li { margin:0 0 6px; }
.hs-cap-popup-box.is-html .fp-preshoot-html img{
  max-width:100%; height:auto; border-radius:8px;
  /* 箱の影は外側が持つ。画像に重ねない。 */
  box-shadow:none;
}
.hs-cap-popup-box.is-html .fp-preshoot-html a { color:inherit; }

/* ---- 汎用ダイアログ（assets/js/shared/hs-dialog.js）----
   利用者の指示・2026-08-26「これは汎用ダイアログにして」。
   暗幕と重なりの段は上の .hs-cap-popup を借り、中の箱だけここで作る。

   **色は必ず !important と -webkit-text-fill-color の対で置く。**
   サイト全体の自由CSS（general_style_css）に color:#fff !important が
   入っており、inline の color では負けて白地に白になる
   ―― 作り替える前の showCustomConfirm が実際にそれで読めなくなっていた。 */
.hs-dialog-box{
  width:min(360px, 100%);
  padding:26px 24px 22px;
  border-radius:16px;
  background:#1b1b1b;
  font-family:"M PLUS 2", sans-serif;
  text-align:center;
  gap:0;                 /* 中の間隔は下の2つで決める */
}
.hs-dialog-msg{
  margin:0 0 22px;
  font-size:15px;
  font-weight:700;
  line-height:1.7;
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  /* 呼び手は \n で改行を書く。HTMLは受け取らない（textContent で入る）。 */
  white-space:pre-line;
}
.hs-dialog-btns{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.hs-dialog-btn{
  appearance:none; -webkit-appearance:none;
  border:1px solid rgba(255,255,255,0.55);
  background:rgba(255,255,255,0.10);
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  font-family:inherit;
  font-size:14px; font-weight:700;
  /* 矩形の中の文字は上下の余白を均等に（利用者の標準ルール）。
     行の余りが上に溜まらないよう line-height を殺してから padding を同値に。 */
  line-height:1;
  padding:14px 26px;
  min-width:104px;
  border-radius:999px;
  cursor:pointer;
}
.hs-dialog-btn:hover{ background:rgba(255,255,255,0.18); }
/* 取り消せない一手（リセット・削除）の OK は塗りを変えて、
   隣の「キャンセル」と見分けられるようにする。 */
.hs-dialog-btn.is-danger{
  border-color:#ff3b30;
  background:#ff3b30;
}
.hs-dialog-btn.is-danger:hover{ background:#ff5147; }
@media only screen and (max-width: 480px) {
  .hs-dialog-box{ padding:22px 18px 18px; }
  .hs-dialog-msg{ font-size:14px; margin:0 0 18px; }
  .hs-dialog-btn{ font-size:13px; padding:13px 20px; min-width:96px; }
}

/* 帯を複数並べたときの間隔（利用者の指示・2026-08-26「お知らせは複数
   入れられるように」）。**2件目以降にだけ**足すので、1件のときの
   見た目はこれまでと1pxも変わらない。 */
.hs-captured-info + .hs-captured-info{ margin-top:8px; }


/* =============================================================
   ダイアログの白い面（共通・2026-08-26）

   **2つのダイアログが同じ面を使う**（利用者の指示「CSSは共通化してほしい」）:
     - 「ダウンロードのご注意」          #hs-lot-dl
     - 「購入したいグッズをお選びください」 #hs-lot-picker
   同じ流れの中で続けて開く2枚なので、面の作りが違うと別のサイトに見える。
   以前は同じ値を2か所（ここと captured-page.css）に書いていた。

   体験モードの #fp-dl-modal（fp-screens.css 2330行〜）とも値をそろえてある。
   あちらは FP の器の上に建っているので別のファイルに居る ――
   **3つめを足すときは、まずこの面を使えないか見ること。**

   色は !important で書く（CLAUDE.md 定石3）―― サイト全体の自由CSS
   （general_style_css）が `color:#fff !important` を撒いていることがあり、
   白地に白文字で読めなくなる。
   ============================================================= */

/* 外枠。塗らない ―― 中の面と二重になり、色が食い違って見える。
   角丸と面の色は下の .hs-cap-sheet が持つ。 */
.hs-cap-popup-box.hs-cap-sheet-box{
  /* **クラスを2つ重ねて指す。** 幅は .hs-cap-popup-box が min(720px,100%) を
     持っており、クラス1つ同士だと**どちらのCSSが後に読まれるか**で
     決まってしまう。読み込み順に頼らない ―― 順番は将来ずれる。 */
  width:100%;
  max-width:680px;
  align-items:stretch;
  gap:0;
}

/* 白い面そのもの。高さは中身なりで、上限だけ言う
   （外枠の余白 20px×2 を引いた残り全部）。 */
.hs-cap-sheet{
  box-sizing:border-box;
  display:block;
  width:100%;
  max-height:calc(100vh - 40px);
  overflow:auto;
  margin:0;
  padding:22px 26px 20px;
  border-radius:var(--hs-radius-surface, 16px);
  background:#fff;
  color:#000;
  font-family:"M PLUS 2", sans-serif;
  text-align:center;
}
.hs-cap-sheet:empty{ display:none; }

/* 見出し。本文とはっきり差を付ける（ページ側と同じ扱い）。 */
.hs-cap-sheet-title{
  margin:0 0 12px;
  font-size:18px;
  font-weight:700;
  line-height:1.5;
  text-align:center;
  color:#000 !important;
  -webkit-text-fill-color:#000;
}

/* 面の中の押しどころ。ページ側の #downloadButton と同じ見た目。
   矩形の中の文字は上下の余白を均等に（利用者の標準ルール）―― line-height を
   殺してから padding を同値にする、はボタンの形（padding 15px 20px）で満たす。 */
.hs-cap-sheet-actions{
  display:flex;
  flex-direction:column;
  max-width:300px;
  margin:14px auto 0;
}
.hs-cap-sheet-actions a{
  display:block;
  padding:15px 20px;
  border-radius:999px;
  background:#ea580c;
  color:#fff !important;
  -webkit-text-fill-color:#fff;
  font-size:16px; font-weight:700; line-height:1.4;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}
.hs-cap-sheet-actions a.disabled{ opacity:.5; pointer-events:none; }

/* 面の中に置く画像は、拡大表示の1枚用の指定（.hs-cap-popup-box img の
   影・角丸・画面いっぱいの高さ）を持ち込まない。 */
.hs-cap-sheet img{ box-shadow:none; }

/* 狭い画面では左右の余白を詰める（折り返しの多い文が細くなるため）。 */
@media (max-width: 480px) {
  .hs-cap-sheet{ padding:18px 14px 16px; }
}

/* --- 「SNSに投稿する画像をダウンロード」のモーダル（カスタム・2026-08-26） ---

   面は上の .hs-cap-sheet が持つ。ここに残すのは**この面だけのもの**
   ―― 注意書きの箇条書き、焼き上がった写真、保存の面への切り替え。

   利用者の指示「これは画面遷移ではなくモーダルで」。以前は
   /imagegenerator/ へ遷移していた。中身の組み立ては captured-lottery.js、
   画像づくりは imagegenerator-page.js（hsImageGenBoot）。 */

/* 読み込みが終わるまでも面を出しておく。透明のままだと背後の写真が
   透けて、壊れているように見える。 */
#hs-lot-dl .hs-lot-dl-loading{
  min-height:220px;
  display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:700;
  color:#000 !important;
  -webkit-text-fill-color:#000;
}
#hs-lot-dl .hs-lot-dl-notice{ text-align:left; }
/* 注意書きの中身はサーバーが出す（/cart/ と同じ文面）。見た目はここが持つ。 */
#hs-lot-dl .hs-lot-dl-notice ul{
  list-style-type:disc; padding-left:20px; margin:0;
  font-size:14px; line-height:1.6;
}
#hs-lot-dl .hs-lot-dl-notice li{ margin-bottom:6px; }
#hs-lot-dl .hs-lot-dl-notice li:last-child{ margin-bottom:0; }
#hs-lot-dl .hs-lot-dl-notice,
#hs-lot-dl .hs-lot-dl-notice :where(p, ul, li, span, b, strong, div){
  color:#000 !important; -webkit-text-fill-color:#000;
}
#hs-lot-dl .hs-lot-dl-notice a{ color:#007AFF !important; -webkit-text-fill-color:#007AFF; }

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

/* **面は2つ。** ご注意（文章＋同意）と、保存（画像＋長押し）。
   隠すのは display で ―― 器ごと消しても canvas と <img> は描けるので、
   読んでいるあいだに画像を焼いておける（同意の先で待たせない）。 */
#hs-lot-dl .hs-lot-dl-savehead,
#hs-lot-dl .hs-lot-dl-savenote,
#hs-lot-dl .hs-lot-dl-photo{ display:none; }
#hs-lot-dl .hs-lot-dl-body.is-save .hs-lot-dl-notice,
#hs-lot-dl .hs-lot-dl-body.is-save .hs-cap-sheet-actions{ display:none; }
#hs-lot-dl .hs-lot-dl-body.is-save .hs-lot-dl-savehead,
#hs-lot-dl .hs-lot-dl-body.is-save .hs-lot-dl-savenote{ display:block; }
#hs-lot-dl .hs-lot-dl-body.is-save .hs-lot-dl-photo{ display:block; margin-top:0; }

/* 保存のしかたの案内。**ここが面の主役** ―― 押しどころのボタンが無い面なので、
   やることが文字でしか伝わらない。指のしぐさを1つ添える。 */
#hs-lot-dl .hs-lot-dl-savehead{
  margin:0 0 6px;
  font-size:18px; font-weight:700; line-height:1.6; text-align:center;
  color:#000 !important; -webkit-text-fill-color:#000;
  word-break:auto-phrase;
  text-wrap:pretty;
}
#hs-lot-dl .hs-lot-dl-savehead::before{
  content:"👇";
  display:block;
  margin-bottom:2px;
  font-size:22px;
  line-height:1;
}
#hs-lot-dl .hs-lot-dl-savenote{
  margin:0 0 14px;
  font-size:12.5px; line-height:1.7; text-align:center;
  color:#555 !important; -webkit-text-fill-color:#555;
  word-break:auto-phrase;
}
/* 画像だけの面になるので、写真に高さを譲る。
   引く分は写真の上下に載るものの高さ。 */
#hs-lot-dl .hs-lot-dl-body.is-save .hs-lot-dl-photo img{
  max-height:calc(100vh - 200px);
}
/* **長押しを塞がない。** 端末の「写真に保存」はここが通らないと出ない
   （利用者の報告・2026-08-27「長押しできない」）。

   **入れ物にも当てる。** 一覧まわりのCSS（captured.css の .captured-item img
   ほか）が広めに user-select:none を撒いており、画像1枚に当てるだけでは
   祖先から降りてくる指定に負ける場面がある。面ごと通しておく。
   保存されて困る画像ではない ―― ここは「持ち帰ってもらう」ための面。 */
#hs-lot-dl .hs-lot-dl-photo,
#hs-lot-dl .hs-lot-dl-photo img{
  -webkit-touch-callout:default !important;
  -webkit-user-select:auto !important;
  user-select:auto !important;
  -webkit-user-drag:auto;
  pointer-events:auto;
}

@media (max-width: 480px) {
  #hs-lot-dl .hs-lot-dl-notice ul{ padding-left:18px; }
}