/*
 * 案内ダイアログのテンプレート「遊び方はカンタン！」のスタイル。
 *
 * 中身は hs_fp_guide_template_html() が組み立てる。**色と余白はここだけが
 * 持つ** ―― PHP側でstyleを書き足すと、直す場所が2つに割れる。
 * ダイアログの地色を変えても浮かないよう、外枠は透明で受け、
 * 内側の箱だけ薄い面で塗る。
 *
 * **prototype-otanoshimi.css から独立させてある**（2026-08-24）。
 * あちらは体験モードのページにしか読まれないが、このテンプレートは
 * お知らせのポップアップからも使い、そちらは通常モードでも開くため。
 * 読み込むのは hs_fp_head() と parts/info-popup.php の2か所で、
 * $GLOBALS['hs_guide_tpl_css_done'] を見て1ページ1回にする。
 */

/* ============================================================= */
/*  案内ダイアログのテンプレート「遊び方はカンタン！」            */
/*  （利用者の指示・2026-08-24。手順は3つ／2つを選べる）          */
/*                                                               */
/*  中身は hs_fp_guide_template_html() が組み立てる。**色と余白は */
/*  ここだけが持つ** ―― PHP側でstyleを書き足すと、直す場所が2つに */
/*  割れる。ダイアログの地色を変えても浮かないよう、外枠は透明で   */
/*  受け、内側の箱だけ濃紺で塗る。                                */
/* ============================================================= */
.fp-guide-tpl {
  padding: 22px 18px 20px;
  text-align: center;
  /* 地の文字色はここでは持たない（利用者の指示・2026-08-25）。
     **下の「文字色をこの場で決め切る」節が .fp-guide-tpl を
     color:#fff !important で名指ししている**ので、見た目の色はそのまま
     白で出る ―― ここの指定は元から効いていない側だった。
     色を変えたいときは下の節を直すこと。 */
}
.fp-guide-badge {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 16px;
  border-radius: 999px;
  /* **薄い白の地に、本文と同じ白い文字**（利用者の指示・2026-08-25
     「タグの配色を、薄い白、文字を白で本文と揃えて」）。

     金色は数字の丸と「撮影をはじめる」でも使っていて、上から下まで
     金が3か所並んでいた。かといって白ベタだと呼び名のタグが見出しより
     目立つ ―― 呼び名は読ませるだけのものなので、地は透かした白に留め、
     文字は本文と同じ白にそろえる。 */
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.fp-guide-title {
  margin: 0 0 6px;
  /* 広い画面では 28px（利用者の指示・2026-08-25「PCでメインの見出しは
     もう少し小さくても良い」。はじめ 32px と言われたぶんを下げた）。
     狭い画面は幅なりに縮める ―― 固定にすると、スマホで1行が2〜3行に
     折り返して見出しが塊になる。上限がその 28px。 */
  font-size: clamp(22px, 5.2vw, 28px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .02em;
  text-wrap: balance;
  word-break: auto-phrase;
}
.fp-guide-lead {
  margin: 0 0 18px;
  font-size: clamp(12px, 3.2vw, 15px);
  line-height: 1.6;
  opacity: .92;
  word-break: auto-phrase;
}
.fp-guide-steps {
  display: grid;
  /* 横の間だけ空ける。**縦は 0**（利用者の指示・2026-08-24
     「画像はgridで上端がそろうように」）。下の subgrid で行を共有するので、
     縦の gap を持たせると各行の間に隙間が入り、いまの余白（各要素の
     margin が持つ）と二重になる。 */
  column-gap: 10px;
  row-gap: 0;
  align-items: start;
  /* 手順どうしで**行をそろえる**ための行。上から
     [丸とアイコン][見出し][説明][画像] の4段。
     説明が1行の手順と2行の手順が混ざると、下の画像の上端がずれていた。 */
  grid-template-rows: auto auto auto auto;
  padding: 16px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
}
/* 手順の中身を**親の行にそのまま載せる**（subgrid）。
   subgrid を読めないブラウザでは、これまでどおり手順ごとに積むだけで、
   上端がそろわない以外は同じに出る（崩れはしない）。 */
.fp-guide-step {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-content: start;
}
/* 仕切り線は全部の行にまたがる（1本の縦線に見せる）。 */
.fp-guide-rule { grid-row: span 4; }
/* 手順の間に矢印を挟むので、列は「手順・矢印・手順…」の並びになる。
   3つなら5列、2つなら3列。矢印の列だけ幅を詰める。 */
.fp-guide-steps-3 { grid-template-columns: 1fr auto 1fr auto 1fr; }
.fp-guide-steps-2 { grid-template-columns: 1fr auto 1fr; }
/* ステップのあいだの仕切り（利用者の指示・2026-08-24「→でなく、縦の罫線」）。
   **背が高い1本の線**にして、隣り合う手順を分ける。矢印のように
   「次へ進む」向きは持たないので、色も控えめな白の透かしにする。 */
.fp-guide-rule {
  align-self: stretch;
  justify-self: center;
  width: 1px;
  min-height: 100%;
  background: rgba(255, 255, 255, .22);
}
.fp-guide-step-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 8px;
}
.fp-guide-tpl .fp-guide-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* **もう一回り大きく**（利用者の指示・2026-08-27「数字を大きく」）。
     丸ごと大きくする ―― 丸を据え置いて数字だけ太らせると、
     金色の余白が無くなって窮屈に見える。 */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffc31f;
  color: #14163c;
  /* 数字は Helvetica（利用者の指示・2026-08-25）。本文の和文フォントで
     出すと、丸の中で数字だけ字面が小さく見える。 */
  font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
  /* 丸の 6割弱。上下の余りは残しつつ、離れて見ても数字だと分かる大きさ
     （2026-08-25 は 30px の丸に 17px、2026-08-27 に 36px / 21px へ）。 */
  font-size: 21px;
  font-weight: 800;
  /* 丸の中の数字は、行ボックスの余りで上へ寄りやすい（利用者の標準ルール・
     2026-08-14「矩形の中の文字は、見た目の上下余白を必ず均等にする」）。
     line-height:1 で余りを殺してから中央に置く。 */
  line-height: 1;
}
/* 絵記号は丸と**同じ高さの箱**にして、中心で並べる
   （利用者の指示・2026-08-27「数字とアイコンは水平に整列させて」）。

   箱の高さを丸と同じにしておくと、行の高さ（line-height）が
   どこから来ても中心がずれない ―― 以前は箱の高さが絵記号の行の高さ任せで、
   丸（30px）と絵記号（32px）で2pxぶん違っていた。

   **持ち上げ（transform）は要らない。** Material Symbols を実測すると
   （Chromium・em=1000）字面の箱は ベースライン +125〜+875、フォントの
   ascent 1100 / descent 100 で、どちらの中心も **+500（0.5em）** で一致する。
   つまり箱をそろえれば字面もそろう。ここに微調整を足すと、かえってずれる。

   **大きさは丸とそろえる**（利用者の指示・2026-08-27「アイコンがでかすぎる、
   文字に対して上下中央になるように」。48→32→44→56 と動かしたあとの落としどころ）。
   Material Symbols の字面は箱の 0.75em ぶんなので、48px で字面 36px ――
   丸（36px）と同じ背丈になる。

   **箱の高さは丸と同じ 36px**。字面は箱の中で上下中央（実測: 字面も
   フォントの箱も、中心はベースラインの 0.5em 上で一致）なので、
   高さをそろえれば中心もそろう。字面のほうが箱より高いぶんは
   上下に同じだけはみ出すので、中心は動かない。

   **当て先は `.fp-guide-tpl` から**（詳細度 0,2,0）。素の `.fp-guide-icon`
   だと `.material-symbols-outlined { font-size:24px }`（captured_purchased.css）
   と同じ強さで、読み込みが後のページでは負けて小さいままになる
   ―― 大きさが効かない、の形で表に出る。 */
.fp-guide-tpl .fp-guide-icon {
  font-size: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* **丸と同じ寸法の箱にする。** 高さだけでなく幅も決めるのは、
     字面の広さが絵記号ごとに違っても、並びの見え方を変えないため。 */
  width: 36px;
  height: 36px;
  line-height: 1;
  /* 中心をずらしうるものを、この場で言い切る（利用者の報告・2026-08-27
     「アイコンが下にずれて見える」）。実測では丸と字面がぴったり重なる
     ので、ずれる余地は**外から入る指定**しかない ―― 余白・枠・行の高さ・
     縦の並べ方の4つを、ここで断ち切る。 */
  padding: 0;
  border: 0;
  vertical-align: middle;
  flex: none;
  box-sizing: content-box;
}
/* **文節で折り返す**（利用者の指示・2026-08-25「でで改行」）。
   和文は既定だとどこでも折り返せるので、「好きな瞬間でシャッ／ター！」の
   ように語の途中で切れる。auto-phrase は文節の切れ目を選ぶので
   「好きな瞬間で／シャッター！」になる。
   読めないブラウザでは宣言ごと無視され、これまでどおりの折り返しに戻る
   （崩れはしない）。列より長い文節は、そこだけ従来どおり途中で切れる。 */
/* **手順の見出しは3行にしない**（利用者の指示・2026-08-25
   「見出しが3列にならないように」）。

   文には既に改行（<br>）が1つ入っていて2行になる作りだが、17px だと
   1行目（「動画を見ながら」＝7文字）が列の幅に収まらず、そこがもう一度
   折り返して3行になっていた。列は枠の幅を3つで割ったぶんしかないので、
   **文字のほうを列に合わせる**。15px なら、枠がいちばん狭いとき
   （PC 500px → 1列 約150px）でも7文字が収まる。 */
.fp-guide-step-title {
  margin: 0 0 6px;
  font-size: clamp(13px, 3.4vw, 15px);
  font-weight: 800;
  line-height: 1.35;
  word-break: auto-phrase;
}
.fp-guide-step-desc {
  margin: 0 0 10px;
  font-size: clamp(11px, 2.8vw, 13px);
  line-height: 1.55;
  opacity: .9;
  word-break: auto-phrase;
}
/* **実寸より大きく引き伸ばさない**（利用者の指示・2026-08-24
   「画像サイズ以上に引き延ばされないように」）。
   width:100% だと小さい絵が列の幅まで拡大されて粗く見えていた。
   実寸で描き、列より大きいときだけ max-width が縮める。
   小さいときは列の中央に置く（左に寄ると3つの並びが揃わない）。 */
.fp-guide-step-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  /* **縦スクロールを出さない**（利用者の指示・2026-08-24「縦スクロールが
     発生しないように画像のサイズを調整して」）。実寸で描くようにしたら、
     大きい絵のときにダイアログが画面より高くなっていた。
     絵の高さだけを画面の高さに合わせて頭打ちにする ―― ここを詰めるより
     先に文字を削ると、読ませたい説明が消える。
     dvh はスマホのアドレスバーの出入りで高さが変わるため（vh だと
     隠れている間に画面外へはみ出す）。 */
  max-height: min(34dvh, 300px);
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
}

/* 狭い画面では横に3つ並べると1つあたりが読めない幅になる。
   縦積みにして、矢印は下向きに倒す。 */
/* **スマホでも横並びのまま**（利用者の指示・2026-08-24
   「スマホの時も、フローは左から右に並べるように」）。

   以前は 520px 以下で縦積みにしていたが、1→2→3 という**流れ**を見せる図
   なので、縦に積むと「順番」ではなく「箇条書き」に見える。
   並びは変えずに、狭い画面では余白と文字を詰めて収める
   （見出し・説明は clamp() で既に縮むので、ここでは間と余白だけ詰める）。 */
@media (max-width: 520px) {
  .fp-guide-tpl { padding: 18px 10px 16px; }
  .fp-guide-steps {
    gap: 6px;
    padding: 12px 8px;
  }
  .fp-guide-step-head { gap: 5px; margin: 0 0 6px; }
  /* 狭い画面も同じ比で大きくする（丸の6割弱）。 */
  .fp-guide-tpl .fp-guide-num { width: 30px; height: 30px; font-size: 17px; }
  .fp-guide-tpl .fp-guide-icon { font-size: 40px; width: 30px; height: 30px; }
  /* **手順の見出しは 11px**（利用者の指示・2026-08-24「スマホで、この見出し
     フォントサイズ11px」）。3つ横に並べたままなので、clamp の下限（13px）でも
     1つあたりが細く、見出しが不自然な位置で折り返していた。 */
  .fp-guide-step-title { margin: 0 0 4px; font-size: 11px; }
  .fp-guide-step-desc { margin: 0 0 8px; }
  /* 狭い画面は横に3つ並べるぶん1つが細いので、絵も低めに抑える。 */
  .fp-guide-step-img { max-height: min(26dvh, 220px); }
}
/* いちばん狭いところ（小さめのスマホ）。3つ並べると1つあたりが
   100px を切るので、丸と絵記号を縦に積んで幅を稼ぐ。 */
@media (max-width: 380px) {
  .fp-guide-steps { gap: 4px; padding: 10px 6px; }
  /* **丸と絵記号は横に並べたまま**（利用者の指示・2026-08-24
     「これは左右にならべて」）。幅を稼ぐために縦へ積んでいたが、
     手順の頭が2段になって背が伸び、3つの列の高さもそろわなくなる。
     詰めるのは間だけにする。 */
  .fp-guide-step-head { gap: 3px; }
}

/* =============================================================
   文字色を**この場で決め切る**（利用者の指示・2026-08-24
   「丸の中以外、文字は白」）。

   サイト全体の動的自由CSS（general_style_css）が広いセレクタで
   `color:#000 !important` を撒いているサイトがあり、上の
   `.fp-guide-tpl { color:#fff }`（詳細度 0,1,0・!important 無し）が
   負けて、濃紺の地に黒い文字が出ていた
   （CLAUDE.md「UI/アニメーション修正の定石」3 と同じ型。あちらは白を
   撒かれる側だったが、押し負ける理由は同じ）。

   **`* { color:#fff }` で塗り潰さない** ―― 矢印の水色と、金色の中に置く
   濃い文字（丸の中の数字・バッジ）まで白くなり、読めなくなる。
   色を持つものを1つずつ名指しして、それぞれの色を言い切る。
   -webkit-text-fill-color も対で置く（iOS は fill が勝つ）。
   ============================================================= */
.fp-guide-tpl,
.fp-guide-tpl .fp-guide-title,
.fp-guide-tpl .fp-guide-lead,
.fp-guide-tpl .fp-guide-step-title,
.fp-guide-tpl .fp-guide-step-desc,
.fp-guide-tpl .fp-guide-icon,
/* タグは薄い白の地になったので、文字は本文と同じ白い側
   （利用者の指示・2026-08-25）。**上の background と対で直すこと** ――
   片方だけ変えると、白地に白文字か、透かした地に濃紺の文字になる。 */
.fp-guide-tpl .fp-guide-badge {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
/* 金色の面に載る文字は濃いまま（白にすると地に沈む）。 */
.fp-guide-tpl .fp-guide-num {
  color: #14163c !important;
  -webkit-text-fill-color: #14163c;
}
/* 仕切りは線なので文字色を持たない（塗りは上の .fp-guide-rule が持つ）。 */

/* =============================================================
   テンプレートを使うときの**PCでの横幅の上限は 680px**
   （利用者の指示・2026-08-24「このてんぷれーとのとき、PC最大横幅を
   680pxとする」）。

   1枚画像の案内は絵の実寸まで広げたいので上限を大きく取っているが、
   テンプレートは文字組みなので、広げるほど1行が長くなって読みにくい。
   **数値は変数で渡す** ―― 枠の width / max-width を直に書くと、
   「画像に合わせて縮める」規則と詳細度を取り合う
   （prototype-otanoshimi.css の同じ節を参照）。
   管理画面で上限を指定したときは hs_fp_trial_dialog_css() が
   同じ変数をこれより強いセレクタで書き換えるので、そちらが勝つ。
   ============================================================= */
/* お試しの確認ダイアログも同じ中身を出す（2026-08-24）ので、同じ上限にする。
   680px → 760px → 840px（利用者の指示・2026-08-25「PCで横幅、もうちょい
   ひろげて」→「PCのとき横幅がもう少し大きくなるように」）。 */
#fp-preshoot-guide .fp-modal-panel:has(.fp-guide-tpl),
#fp-trial-modal .fp-modal-panel:has(.fp-guide-tpl) {
  --fp-guide-max: 840px;
}