/* ============================================
   さーたん — 下層ページ共通
   ①おすすめサイト（satan/sites/ ＝ 案A・2026-07-30採用確定 ／ satan/sites-b/ ＝ 案B・不採用だが本番公開まで残置）
   ②予想の買い方（satan/howto/）
   ※ components.css（トップ共通）を読み込んだ上で追加する
   ※ 2026-07-29 Figma（node 169:234 / 190:551 / 195:1264）実測に合わせて改訂
   ============================================ */

/* ---------- もどる（矢印アイコンのみ） ---------- */

.back-btn {
  display: block;
  width: 20px;
  height: 20px;
  margin: 26px 0 0 16px;
  padding: 4px 3px;
}

.back-btn :is(img, svg) {
  width: 13.7px;
  height: 12.75px;
}

/* ---------- 下層ページヘッダー ---------- */

.page-header--sub {
  position: relative;
  padding: 4px 22px 0;
}

/* トップの header-divider と同じ金飾り（比率が崩れるので幅・高さ両方を指定する） */
.page-header--sub .header-swirl {
  width: 316px;
  max-width: 88%;
  height: 6.4px;
  margin: 0 auto;
}

.page-title--sub {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 24px;
  line-height: 50px;
  letter-spacing: 2px;
  color: var(--color-title);
  white-space: nowrap;
}

/* ヘッダー周りに散らすキラキラ（使うページのみ・style で座標指定） */
.header-sparkle {
  position: absolute;
  pointer-events: none;
}

/* ---------- セクション見出し（下層ページ用・リボン幅可変） ----------
   リボンの下地SVGはテキスト幅に合わせて伸ばす。
   --ribbon-w  : リボンの表示幅（テキスト＋左右余白）
   --ribbon-img: 下地SVGの幅（リボンの切り欠き分だけ外へはみ出す）
   --ribbon-x  : 下地SVGの左オフセット */
.section-heading--sub {
  padding: 12px 0 0;
  gap: clamp(8px, 3vw, 16px);
}

/* リボンが長い見出し（※WOLFの場合 付き）でも 375px 幅で溢れないよう、
   渦飾り側を縮める（リボンのテキストは折り返さない） */
.section-heading--sub .swirl {
  flex: 0 1 55px;
}

.section-heading--sub .section-ribbon {
  width: var(--ribbon-w, 140px);
  max-width: 100%;
  gap: 10px;
}

.section-heading--sub .section-ribbon :is(img, svg) {
  left: var(--ribbon-x, -7px);
  width: var(--ribbon-img, 154px);
}

/* リボン内の注記（※WOLFの場合）
   components.css の `.section-ribbon span`（16px）より詳細度を上げる必要がある */
.section-ribbon .ribbon-note {
  position: relative;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: #fff;
  white-space: nowrap;
  opacity: 0.92;
}

/* ---------- リード文カード ---------- */

.lead-card {
  position: relative;
  padding: 21px 17px;
  text-align: center;
  overflow: hidden;
}

.lead-card p {
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  color: var(--color-text);
}

/* ---------- サイトカード（①おすすめサイト） ---------- */

.site-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px 0;
}

.site-card {
  padding: 15px 17px;
}

.site-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.num-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-badge);
  color: #fff;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.site-name-box {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 9px;
  border-bottom: 1.9px dashed var(--color-dotted);
}

.site-name {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 21px;
  line-height: 26px;
  letter-spacing: 1px;
  color: var(--color-site-name);
  white-space: nowrap;
}

.site-kana {
  font-size: 10px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 1px;
  color: var(--color-site-kana);
  padding-top: 2px;
}

/* CTA（ここからLINE登録） */
.cta-btn {
  position: relative;
  width: 100%;
  min-width: 0;
  margin-top: 14px;
  gap: 6px;
  font-size: 13px;
}

.cta-btn .cta-chevron {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  opacity: 0.9;
}

.cta-btn .cta-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  line-height: 1;
}

/* ---------- サイトカード 案B（紹介文＋タグ＋右側CTA） ---------- */

/* 案Bは1行に「バッジ＋テキスト＋CTA」を並べるため横幅の余裕がない。
   Figmaのフレーム幅430px基準の実測値をvw比率でフルード化し、
   375pxでも紹介文2行・タグ1行を保つ（固定pxのままだとタグが2段に落ちる）。 */
.site-card--b {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.79vw, 12px);
  padding: 15px clamp(12px, 3.99vw, 17px);
}

.site-card--b .site-head {
  flex: 1;
  min-width: 0;
  align-items: center;
  gap: clamp(8px, 2.79vw, 12px);
}

.site-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.site-desc {
  font-size: clamp(11px, 3.02vw, 13px);
  font-weight: 500;
  line-height: 1.54;
  color: var(--color-text);
}

.site-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  list-style: none;
}

.site-tags li {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 clamp(5px, 1.63vw, 7px);
  border-radius: 5px;
  background: var(--color-panel);
  font-size: clamp(9.5px, 2.56vw, 11px);
  font-weight: 500;
  line-height: 20px;
  color: var(--color-heading);
  white-space: nowrap;
}

/* 案BのCTA（カード右側の小ボタン） */
.cta-btn--sm {
  width: clamp(88px, 24.65vw, 106px);
  min-width: 0;
  max-width: 106px;
  margin-top: 0;
  flex-shrink: 0;
  padding: 10px 8px;
  font-size: clamp(11.5px, 3.02vw, 13px);
}

/* 下層ページのヒント枠（白地・左右16px） */
.hint--sub {
  margin: 12px 16px 0;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.6);
}

/* ---------- 購入手順カード（②予想の買い方） ---------- */

/* Figmaのフレーム幅430px基準の実測値を、390px以下でも1行が保てるよう
   vw比率でフルード化している（18px/430px = 4.19vw 等）。
   固定pxのまま写すと「必要なポイント分を追加する」が2行に割れる。 */
.step-card {
  margin: 12px 16px 0;
  padding: 15px clamp(12px, 3.99vw, 17px);
}

.step-list {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.step-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 18px;
  border-bottom: 1px dashed var(--color-dotted);
}

.step-item:last-child {
  border-bottom: 0;
}

.step-body {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.79vw, 12px);
  flex: 1;
  min-width: 0;
}

.step-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.step-title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: clamp(15px, 4.19vw, 18px);
  line-height: 1.34;
  color: var(--color-heading);
}

.step-desc {
  font-size: clamp(11px, 3.02vw, 13px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--color-text);
}

/* 単語の途中で折れてほしくない塊に付ける（iOSは text-wrap:balance が効かないため、
   折り返しが起きる文はここで文節を固定する） */
.nw {
  white-space: nowrap;
}

/* 本文中のリンク：下線は使わず、やわらかいブルーの文字色でリンクと分かるようにする
   （本文が12px前後と小さいので、色だけで区別する場合はこれ以上薄くしない） */
.text-link {
  color: var(--color-link);
}

.step-icon {
  width: clamp(50px, 13.95vw, 60px);
  height: clamp(50px, 13.95vw, 60px);
  border-radius: 50%;
  background: #fff;
  border: 0.8px solid var(--color-row-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 手描きアイコンは原画の縦横比がばらばらなので1つずつ寸法を指定する
   （共通ルールで一括指定すると潰れる） */
.step-icon .ico-phone {
  width: 30px;
  height: 36px;
}

.step-icon .ico-point {
  width: 28px;
  height: 29px;
}

/* ③④⑤は2026-07-30にFigma側でオートレイアウト化＋キラキラ追加された版へ差し替え
   （node 195:1888 / 195:1900 / 195:1911。実測 37.8×37.8 ／ 38×39 ／ 42×43・いずれも60px円に中央配置）。
   円が clamp(50px,13.95vw,60px) で縮むので、アイコンも同じ比率でフルード化して見た目の比率を保つ（design.md §8-4） */
.step-icon .ico-list {
  width: clamp(31.5px, 8.79vw, 37.8px);
  height: clamp(31.5px, 8.79vw, 37.8px);
}

.step-icon .ico-clock {
  width: clamp(31.7px, 8.84vw, 38px);
  height: clamp(32.5px, 9.07vw, 39px);
}

.step-icon .ico-ticket {
  width: clamp(35px, 9.77vw, 42px);
  height: clamp(35.8px, 10vw, 43px);
}

/* カード末尾のボート飾り */
.step-boat {
  position: relative;
  width: 110px;
  height: 58.3px;
  margin: 14px auto 0;
}

.step-boat .boat {
  position: absolute;
  top: 0;
  left: 0;
  width: 103.7px;
  height: 52.8px;
}

.step-boat .wave {
  position: absolute;
  top: 49.5px;
  left: 0.4px;
  width: 109.6px;
  height: 8.8px;
}

/* ---------- 動画解説カード（②下部） ---------- */

.video-card {
  margin: 22px 16px 0;
  padding: 0 10px 20px;
}

.video-card .section-heading--sub {
  padding-top: 35px;
}

.video-item {
  padding: 16px;
}

.video-heading {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 29px;
}

/* step-ticket.svg を手順⑤と共用している。2026-07-30の差し替えで原画が 43×43 の正方形になり、
   絵は正方形の中に 42×29.1 の横長で入っている（上下に余白がある）。
   Figma実測の 30.97px で入れると隣の .ico-point より明らかに大きく見えたため（じょじを指摘）、
   **回転後の見た目の高さが .ico-point と同じ18pxになる 20.8px** に揃える。
   計算: インク 42×29.1 を s 倍して -12.13° 回転した高さ = s×(42×sin12.13 + 29.1×cos12.13) = 18px */
.video-heading .ico-ticket {
  width: 20.8px;
  height: 20.8px;
  transform: rotate(-12.13deg);
}

.video-heading .ico-point {
  width: 17.4px;
  height: 18px;
}

.video-heading h2 {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: var(--color-heading);
  white-space: nowrap;
}

.video-desc {
  font-size: clamp(11px, 3.02vw, 13px);
  font-weight: 500;
  line-height: 1.55;
  color: var(--color-text);
}

/* 動画枠。横長(348/196)はFigmaのモック比率＝プレースホルダー用 */
.video-frame {
  position: relative;
  margin-top: 13px;
  aspect-ratio: 348 / 196;
  border-radius: 10px;
  overflow: hidden;
  background: #111;
}

/* 縦長枠：支給動画がiPhone画面録画（588×1280）のため実物比率で出す。
   横長枠にcoverで入れると上下が切れて中身が読めない。
   幅は当初62%だったが、実機（LINE内ブラウザ）で小さく感じるとのFBで **76%** に拡大
   （2026-07-30・じょじを実機確認）。パネル内側348px基準で約265px→高さ約577px。
   上限pxは付けない: ページ幅が430pxで止まるので%だけで足りる */
.video-frame--portrait {
  aspect-ratio: 588 / 1280;
  width: 76%;
  margin-inline: auto;
}

.video-frame :is(img, iframe, video) {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  display: block;
}

/* カード内の区切り飾り（動画1と動画2の間） */
.card-divider {
  width: 316px;
  max-width: 92%;
  height: 6.4px;
  margin: 0 auto;
}

/* ---------- ページ末尾の区切り飾り ---------- */

.footer-divider {
  width: 316px;
  max-width: 88%;
  height: 6.4px;
  margin: 24px auto 0;
}

.hint--sub + .footer-divider {
  margin-top: 12px;
}