/*
 * 案内ダイアログのテンプレート「遊び方はカンタン！」のスタイル。
 *
 * 中身は 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;
  color: #fff;
}
.fp-guide-badge {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 16px;
  border-radius: 999px;
  background: #ffc31f;
  color: #14163c;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.fp-guide-title {
  margin: 0 0 6px;
  font-size: clamp(22px, 5.2vw, 34px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .02em;
  text-wrap: balance;
}
.fp-guide-lead {
  margin: 0 0 18px;
  font-size: clamp(12px, 3.2vw, 15px);
  line-height: 1.6;
  opacity: .92;
}
.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-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #ffc31f;
  color: #14163c;
  font-size: 15px;
  font-weight: 800;
  /* 丸の中の数字は、行ボックスの余りで上へ寄りやすい（利用者の標準ルール・
     2026-08-14「矩形の中の文字は、見た目の上下余白を必ず均等にする」）。
     line-height:1 で余りを殺してから中央に置く。 */
  line-height: 1;
}
.fp-guide-icon { font-size: 26px; }
.fp-guide-step-title {
  margin: 0 0 6px;
  font-size: clamp(13px, 3.4vw, 17px);
  font-weight: 800;
  line-height: 1.35;
}
.fp-guide-step-desc {
  margin: 0 0 10px;
  font-size: clamp(11px, 2.8vw, 13px);
  line-height: 1.55;
  opacity: .9;
}
/* **実寸より大きく引き伸ばさない**（利用者の指示・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; }
  .fp-guide-num { width: 24px; height: 24px; font-size: 12px; }
  .fp-guide-icon { font-size: 19px; }
  .fp-guide-step-title { margin: 0 0 4px; }
  .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; }
  .fp-guide-step-head { flex-direction: column; 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 {
  color: #fff !important;
  -webkit-text-fill-color: #fff;
}
/* 金色の面に載る文字は濃いまま（白にすると地に沈む）。 */
.fp-guide-tpl .fp-guide-badge,
.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() が
   同じ変数をこれより強いセレクタで書き換えるので、そちらが勝つ。
   ============================================================= */
#fp-preshoot-guide .fp-modal-panel:has(.fp-guide-tpl),
#fp-trial-intro .fp-modal-panel:has(.fp-guide-tpl) {
  --fp-guide-max: 680px;
}