/* ===== RM-759 初心者向けオリパ遊び方ガイド =====
   縦スクロール型LP / モバイル402px基準 (iPhone 16 Pro)
   用語: オリパ(モノ) / ガチャを引く(操作) / PT表記は 500PT 形式
   配色: DOPA 実ブランドカラー
     - プライマリ  #CD3054 (ローズ/クリムゾン: CTA)
     - ネイビー    #132337 (地・見出し)
     - サブ文字    #3F4E60
     - ゴールド    #E8B53D (マスコット王冠 → アクセント) */

:root {
  --brand:        #cd3054;   /* DOPA プライマリ（CTA・アクセント） */
  --brand-dark:   #a8254a;
  --brand-soft:   #fdeef2;   /* ローズ淡色（背景） */
  --brand-line:   #f5c6d2;   /* ローズ罫線 */
  --navy:         #132337;   /* DOPA ネイビー */
  --navy-2:       #2c4a78;   /* 信頼・透明性の補助（PT還元など） */
  --navy-soft:    #eaf0f9;
  --navy-line:    #cdd9ec;
  --gold:         #e8b53d;   /* 王冠カラー（★・ハイライト） */
  --ink:          #132337;
  --ink-soft:     #3f4e60;
  --line:         #e6e8ee;
  --bg:           #fafbfc;
  --card:         #ffffff;
  --warn-bg:      #fff8e6;
  --warn-line:    #f3d27a;
  --radius:       16px;
  --shadow:       0 4px 18px rgba(19,35,55,.08);
  --maxw:         402px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  color: var(--ink);
  background: #dde1ea;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  font-size: 16.5px;
  overflow-x: hidden;
}


/* モバイル幅をシミュレートする外枠（実装時は body 全幅でOK） */
.app {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--bg);
  min-height: 100vh;
  overflow-x: hidden;
}

/* 横オーバーフロー防止: flex/grid 子の最小幅を解除し、はみ出しを根絶 */
.rec-grid, .rec-card2, .rec-card2 .body,
.methods, .method, .assure-card, .assure-card .txt,
.options, .opt, .flow, .term-chips, .trust-badges {
  min-width: 0;
}
img, table { max-width: 100%; }
.rec-card2 .nm, .rec-card2 .desc, .index a { overflow-wrap: anywhere; }


section { padding: 32px 20px; scroll-margin-top: 12px; }
section + section { border-top: 1px solid var(--line); }

.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--brand);
  background: var(--brand-soft);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
  letter-spacing: .04em;
}

h2.sec-title {
  font-size: 23px;
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 18px;
  letter-spacing: .01em;
  color: var(--navy);
}
h2.sec-title .num {
  color: var(--brand);
  margin-right: 8px;
}

h3.block-title {
  font-size: 18px;
  font-weight: 800;
  margin: 24px 0 12px;
  padding-left: 12px;
  border-left: 5px solid var(--brand);
  line-height: 1.5;
  color: var(--navy);
}

p { margin-bottom: 13px; color: var(--ink); }
.note { font-size: 14px; color: var(--ink-soft); }


.pt { font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.tbc { /* 〔要確認〕 */
  font-size: 11px; font-weight: 700; color: #b06a00;
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-radius: 6px; padding: 1px 6px; white-space: nowrap;
}

/* ---------- CTA ---------- */
.cta {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  padding: 16px;
  border: none;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(205,48,84,.30);
  cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.cta:active { transform: translateY(1px); background: var(--brand-dark); }
.cta.secondary {
  background: #fff; color: var(--brand);
  border: 2px solid var(--brand); box-shadow: none;
}
.cta-recap { margin-top: 24px; }

/* ---------- Hero ---------- */
.hero {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(205,48,84,.10) 0%, rgba(205,48,84,0) 55%),
    linear-gradient(165deg, #ffffff 0%, #fdeef2 55%, #fbe0e7 100%);
  text-align: center;
  padding: 36px 20px 40px;
  border-top: none;
}
.hero .brand-logo {
  display: block;
  width: auto; height: 38px;
  margin: 0 auto 14px;
  object-fit: contain;
}
.hero .mascot {
  width: 240px; height: auto; max-width: 84%;
  margin: 0 auto 14px;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(205,48,84,.20));
}

/* セクション内のマスコット。固定pxはPCで拡大されない原因なのでclampに統一（素材は2000px） */
.section-figure {
  display: block;
  width: clamp(220px, 26vw, 340px); height: auto; max-width: 70%;
  margin: 18px auto 6px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(19,35,55,.14));
}
.hero .badge {
  display: inline-block;
  color: var(--brand);
  background: #fff;
  border: 1px solid var(--brand-line);
  font-weight: 800; font-size: 12px;
  padding: 5px 14px;
  border-radius: 999px;
  letter-spacing: .06em;
  box-shadow: 0 2px 8px rgba(205,48,84,.10);
  margin-bottom: 14px;
}
.hero h1 {
  font-size: 31px; font-weight: 900; line-height: 1.3;
  margin: 4px 0 18px; letter-spacing: .01em; color: var(--navy);
}
.hero h1 em { color: var(--brand); font-style: normal; }
.hero .lead {
  font-size: 14.5px; color: var(--ink-soft);
  text-align: left; line-height: 1.9;
  max-width: 360px; margin: 0 auto 24px;
}
.hero .lead b { color: var(--navy); font-weight: 800; }



/* ---------- Index ---------- */
.index { background: var(--card); }
.index ol {
  list-style: none; counter-reset: idx;
  display: grid; gap: 8px;
}
.index li { counter-increment: idx; }
.index a {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink);
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px; font-weight: 700; font-size: 14px;
  transition: border-color .12s, background .12s;
}
.index a:active { border-color: var(--brand); background: var(--brand-soft); }
.index a::before {
  content: counter(idx);
  flex: 0 0 26px; height: 26px;
  background: var(--brand); color: #fff;
  border-radius: 50%; font-size: 13px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Highlight / guarantee box ---------- */
.callout {
  background: var(--brand-soft);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  padding: 16px;
  margin: 16px 0;
}
.callout .ttl { font-weight: 800; color: var(--brand-dark); margin-bottom: 6px; }
.callout .fine { font-size: 12px; color: var(--ink-soft); margin-bottom: 0; }

/* ---------- Recommend cards ---------- */
.rec-card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 16px; margin-bottom: 12px;
  border-top: 3px solid var(--brand);
}
.rec-card .head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rec-card .icon {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--brand-soft); display: flex; align-items: center;
  justify-content: center; font-size: 22px;
}
.rec-card .name { font-weight: 800; color: var(--navy); }
.rec-card .stars { margin-left: auto; color: var(--gold); font-size: 14px; letter-spacing: 1px; }
.rec-card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.rec-card dt { color: var(--ink-soft); }
.rec-card dd { font-weight: 700; text-align: right; color: var(--navy); }

/* ---------- Recommend grid（実オリパのサムネ付き） ---------- */
.rec-grid { display: grid; gap: 12px; margin: 14px 0 8px; }
.rec-card2 {
  grid-template-columns: 104px 1fr; gap: 12px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.rec-card2:active { transform: translateY(1px); border-color: var(--brand); }
.rec-card2 .thumb { position: relative; background: #f1f3f7; }
.rec-card2 .thumb img {
  min-height: 112px;
  object-fit: cover; display: block;
}
.rec-card2 .thumb .rank {
  position: absolute; left: 0; top: 0;
  background: var(--brand); color: #fff; font-size: 10px; font-weight: 800;
  padding: 3px 9px; border-bottom-right-radius: 10px; letter-spacing: .02em;
}
.rec-card2 .body { padding: 12px; display: flex; flex-direction: column; gap: 7px; }
.rec-card2 .nm { font-weight: 800; color: var(--navy); font-size: 14px; line-height: 1.4; }
.rec-card2 .tags { display: flex; flex-wrap: wrap; gap: 6px; }
.rec-card2 .tag {
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px; line-height: 1.6;
}
.rec-card2 .tag.price { background: var(--brand-soft); color: var(--brand-dark); }
.rec-card2 .tag.warranty { background: var(--navy-soft); color: var(--navy-2); }
.rec-card2 .desc { font-size: 12px; color: var(--ink-soft); margin: 0; line-height: 1.6; }

/* rankバッジの役割別カラー */
.rec-card2 .rank.free { background: #2e9c4a; }
.rec-card2 .rank.hot  { background: var(--gold); color: #5a4500; }
.rec-card2 .rank.hi   { background: var(--navy-2); }
/* ログインボーナス用サムネ（マスコット） */
.rec-card2 .thumb.login {
  background: linear-gradient(160deg, #fdeef2, #fbe0e7);
  display: flex; align-items: center; justify-content: center;
}
.rec-card2 .thumb.login img { width: 76px; height: 76px; min-height: 0; object-fit: contain; }
/* リード文 */
.rec-lead { font-size: 13px; color: var(--ink-soft); margin: 4px 0 0; }
.rec-lead b { color: var(--brand); }



/* ---------- Lists ---------- */
ul.checklist, ul.fail-list { list-style: none; display: grid; gap: 8px; }
ul.checklist li, ul.fail-list li {
  position: relative; padding-left: 26px; font-size: 14px;
}
ul.fail-list li::before { content: "⚠️"; position: absolute; left: 0; }
ul.checklist li::before {
  content: "✓"; position: absolute; left: 0;
  color: var(--brand); font-weight: 900;
}

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 8px 0; }
table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: var(--card); border-radius: 12px; overflow: hidden;
}
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--navy); color: #fff; font-weight: 700; font-size: 12px; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) td { background: #fbf4f6; }

/* ---------- Term box ---------- */
.terms { display: grid; gap: 10px; margin: 12px 0; }
.term {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 14px;
  border-left: 4px solid var(--navy-2);
}
.term b { color: var(--navy-2); }

/* ---------- Steps ---------- */
ol.steps { list-style: none; counter-reset: st; display: grid; gap: 0; margin: 12px 0; }
ol.steps li {
  counter-increment: st; position: relative;
  padding: 0 0 18px 40px; font-size: 14px;
}
ol.steps li::before {
  content: counter(st); position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; background: var(--brand); color: #fff;
  border-radius: 50%; font-weight: 800; font-size: 13px;
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
ol.steps li:not(:last-child)::after {
  content: ""; position: absolute; left: 12px; top: 26px; bottom: 0;
  width: 2px; background: var(--brand-line);
}
ol.steps .step-ttl { font-weight: 700; }

/* ---------- Flow chips ---------- */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0; }
.flow .chip {
  background: var(--brand-soft); color: var(--brand-dark);
  border: 1px solid var(--brand-line); border-radius: 999px;
  padding: 8px 12px; font-size: 13px; font-weight: 700;
}
.flow .arrow { color: var(--brand); font-weight: 700; }

/* ---------- Methods (registration / payment / genre) ---------- */
.methods { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.method {
  display: flex; align-items: center; gap: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 13px; font-weight: 700; font-size: 13px; color: var(--navy);
}
.method .ico {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-soft); overflow: hidden;
}
/* 汎用ラインアイコン（ブランドカラーのストローク） */
.method .ico svg { width: 19px; height: 19px; stroke: var(--brand); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.method .ico.navy { background: var(--navy-soft); }
.method .ico.navy svg { stroke: var(--navy-2); }
/* ブランド別カラーバッジ（白抜きアイコン/ロゴ） */
.method .ico.b-google { background: #fff; border: 1px solid var(--line); }
.method .ico.b-google svg { width: 21px; height: 21px; stroke: none; }
.method .ico.b-apple  { background: #000; }
.method .ico.b-apple svg { stroke: none; fill: #fff; width: 18px; height: 18px; }
.method .ico.b-line   { background: #06c755; }
.method .ico.b-line svg { fill: #fff; stroke: none; }
.method .ico.b-paypay { background: #ff0033; }
.method .ico.b-merpay { background: #ff0211; }
.method .ico.b-amazon { background: #232f3e; }
.method .ico.b-amazon svg { fill: none; stroke: #ff9900; stroke-width: 2.4; }

/* 塗りつぶし系アイコン（スパークル等） */
.method .ico.solid svg { fill: var(--brand); stroke: none; }
.method .ico.solid.navy svg { fill: var(--navy-2); stroke: none; }
/* 文字バッジ（PayPay / メルペイ） */
.method .ico .lbl { color: #fff; font-weight: 900; line-height: 1; }
.method .ico.b-paypay .lbl { font-size: 18px; }
.method .ico.b-merpay .lbl { font-size: 12px; letter-spacing: -.04em; font-style: italic; }




/* ---------- Receive options ---------- */
.options { display: grid; gap: 12px; margin: 12px 0; }
.opt {
  border: 2px solid var(--line); border-radius: var(--radius);
  padding: 16px; background: var(--card);
}
.opt.ship { border-color: var(--brand-line); }
.opt.ship .opt-ttl { color: var(--brand); }
.opt.refund { border-color: var(--navy-line); }
.opt.refund .opt-ttl { color: var(--navy-2); }
.opt .opt-ttl { font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }

/* ---------- FAQ accordion ---------- */
.faq { display: grid; gap: 8px; }
details.qa {
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
}
details.qa summary {
  list-style: none; cursor: pointer; padding: 14px 44px 14px 16px;
  font-weight: 700; font-size: 14px; position: relative; color: var(--navy);
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::before { content: "Q. "; color: var(--brand); font-weight: 900; }
details.qa summary::after {
  content: "+"; position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%); font-size: 20px; color: var(--brand);
  transition: transform .2s;
}
details.qa[open] summary::after { content: "−"; }
details.qa[open] summary { background: var(--brand-soft); }
details.qa .ans {
  padding: 14px 16px 16px; font-size: 14px; color: var(--ink-soft);
}
details.qa .ans::before { content: "A. "; color: var(--navy-2); font-weight: 800; }

/* ---------- Mascot cheer (§4) ---------- */
.mascot-cheer {
  display: flex; align-items: center; gap: 14px;
  margin: 22px 0 4px; justify-content: center;
}
.mascot-cheer img {
  flex: 0 0 auto; width: 92px; height: 92px; object-fit: contain;
  filter: drop-shadow(0 6px 10px rgba(205,48,84,.18));
}
.mascot-cheer .bubble {
  position: relative; margin: 0;
  background: #fff; border: 2px solid var(--brand);
  color: var(--brand-dark); font-weight: 800; font-size: 15px;
  line-height: 1.5; border-radius: 14px; padding: 12px 16px;
}
.mascot-cheer .bubble::before,
.mascot-cheer .bubble::after {
  content: ""; position: absolute; right: 100%; top: 50%;
  border: 8px solid transparent; transform: translateY(-50%);
}
.mascot-cheer .bubble::before { border-right-color: var(--brand); margin-right: 0; }
.mascot-cheer .bubble::after { border-right-color: #fff; margin-right: -3px; }

/* ---------- Support ---------- */
.support {
  background: linear-gradient(160deg, #ffffff, var(--navy-soft));
}
.support .box {
  background: var(--card); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow);
}
.support .support-head { display: flex; align-items: center; gap: 16px; }
/* サポート専用に描かれた3人組（1542px）を64pxのアイコンに潰さない */
.support .support-head img {
  flex: 0 0 auto; width: clamp(120px, 14vw, 190px); height: auto; object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(19,35,55,.15));
}
@media (max-width:600px){
  .support .support-head{flex-direction:column;align-items:center;text-align:left}
}
.support .support-head p { margin: 0; }
.support .links { display: flex; gap: 8px; margin-top: 14px; }
.support .links a {
  flex: 1; text-align: center; text-decoration: none;
  border: 2px solid var(--navy-2); color: var(--navy-2);
  border-radius: 999px; padding: 10px; font-weight: 800; font-size: 14px;
}

/* ---------- Footer ---------- */
footer {
  background: linear-gradient(165deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: rgba(255,255,255,.95);
  padding: 36px 24px 40px; text-align: center; font-size: 13.5px;
}
footer p { color: rgba(255,255,255,.95); }
footer .logo { font-size: 26px; font-weight: 900; color: #fff; letter-spacing: .08em; }
footer .logo span { color: var(--gold); }
footer .tag { margin: 8px 0; }
footer .taglines {
  list-style: none; margin: 14px 0 10px; display: grid; gap: 8px;
}
footer .taglines li {
  color: #fff; font-weight: 800; font-size: 15px; line-height: 1.5;
}
footer .taglines li::before {
  content: "“"; color: var(--gold); font-weight: 900; margin-right: 2px;
}
footer .taglines li::after { content: "”"; color: var(--gold); font-weight: 900; margin-left: 2px; }

footer .copy { font-size: 11px; color: rgba(255,255,255,.75); margin-top: 14px; }



/* ===================== Responsive ===================== */

/* 小型スマホ（〜359px）: 余白・文字・カードを詰める */
@media (max-width: 359px) {
  body { font-size: 14px; }
  section { padding: 28px 16px; }
  .hero { padding: 28px 16px 32px; }
  .hero .mascot { width: 200px; height: auto; }
  .hero h1 { font-size: 22px; }
  h2.sec-title { font-size: 18px; }
  .methods { grid-template-columns: 1fr 1fr; }
  .rec-card2 { grid-template-columns: 84px 1fr; }
  .rec-card2 .thumb img { width: 84px; min-height: 100px; }
  .flow { gap: 5px; }
  .flow .chip { padding: 7px 10px; font-size: 12px; }
}

/* タブレット（600px〜）: 枠を広げ、グリッドを多段化して間延びを防ぐ */
@media (min-width: 600px) {
  body { background: #dde1ea; }
  .app { max-width: 768px; box-shadow: 0 10px 40px rgba(19,35,55,.10); }
  section { padding: 44px 40px; }
  .hero { padding: 52px 40px 56px; }
  .hero .mascot { width: 280px; height: auto; }
  .hero h1 { font-size: 30px; }
  .hero .lead { font-size: 15px; max-width: 600px; margin-left: auto; margin-right: auto; }
  .index ol { grid-template-columns: 1fr 1fr; }
  .rec-grid { grid-template-columns: 1fr 1fr; }
  .methods { grid-template-columns: repeat(4, 1fr); }
  .options { grid-template-columns: 1fr 1fr; align-items: start; }
  .support .links a, .cta { max-width: 420px; margin-left: auto; margin-right: auto; }
}

/* デスクトップ（960px〜）: さらに広く、おすすめは縦型3カラム */
@media (min-width: 960px) {
  .app { max-width: 1000px; }
  section { padding: 56px 64px; }
  .hero h1 { font-size: 34px; }
  .index ol { grid-template-columns: repeat(2, 1fr); }
  .rec-grid { grid-template-columns: repeat(3, 1fr); }
  .rec-card2 { grid-template-columns: 1fr; }
  .rec-card2 .thumb img { width: 100%; min-height: 0; }
  .rec-card2 .body { padding: 12px 14px 16px; }
  .terms { grid-template-columns: 1fr 1fr; }
}

/* ===== ブラッシュアップ追加分（UX検証反映） ===== */

/* ヒーロー: 信頼バッジ（数字を主役にした3分割の実績） */
.trust-badges {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 22px auto 24px;
  max-width: 340px;
}
.trust-badges li {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
  padding: 0 6px;
}
.trust-badges li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 30px;
  background: var(--brand-line);
}
.trust-badges li b {
  font-size: 26px;
  font-weight: 900;
  color: var(--brand);
  line-height: 1;
  letter-spacing: -.02em;
}
.trust-badges li b small {
  font-size: 13px;
  font-weight: 800;
  margin-left: 1px;
}
.trust-badges li span {
  font-size: 11px;
  color: var(--ink-soft);
  font-weight: 700;
  letter-spacing: .02em;
}

/* ヒーロー: 無料訴求（CTA直前の控えめな一文） */
.hero-free {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 auto 16px;
  max-width: 340px;
}
.hero-free b { color: var(--brand); font-weight: 800; }
.hero-fine {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 12px;
  opacity: .8;
}




/* 安心ブロック（ミニマル・横並びリスト型） */
.assurance { background: var(--card); }
.assure-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 8px;
}
.assure-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 4px;
  text-align: left;
}
.assure-card + .assure-card { border-top: 1px solid var(--line); }
.assure-card .ic {
  flex: 0 0 auto;
  width: 48px; height: 48px;
  border-radius: 12px;
  background: var(--brand-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand);
}
.assure-card .ic svg { width: 24px; height: 24px; }
.assure-card .txt { flex: 1 1 auto; min-width: 0; }
.assure-card .ttl {
  font-weight: 800;
  color: var(--navy);
  margin: 2px 0 4px;
  font-size: 16.5px;
}
.assure-card p { font-size: 14.5px; color: var(--ink-soft); margin: 0; line-height: 1.75; }




/* 用語ミニチップ */
.term-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 18px;
}
.term-chips .tchip {
  background: var(--navy-soft);
  border: 1px solid var(--navy-line);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  color: var(--navy-2);
}
.term-chips .tchip b { color: var(--navy); }

/* フッター: 年齢・健全性注記 */
footer .age-note {
  font-size: 11.5px;
  color: rgba(255,255,255,.85);
  background: rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 10px 14px;
  max-width: 340px;
  margin: 16px auto 0;
  line-height: 1.7;
}


/* 安心ブロックはPCでも縦リスト（区切り線を活かす）。最大幅で間延び防止 */

@media (min-width: 600px) {
  .assure-grid { max-width: 640px; }
}





/* ===== RM-759 beginner-guide v2: page-specific styles (inline <style> から移設) ===== */
/* ===== レイアウト：全幅背景＋コンテンツ最大幅（hero=1280 / 他=720） ===== */
:root{--content-max:720px;--hero-max:1280px}
/* LP全体の赤を #ea334f に統一（共有 default.css は変更せずページ内で上書き） */
:root{--brand:#ea334f;--brand-dark:#c81f3c}
/* LP全体フォント：Noto Sans JP */
body{font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN",system-ui,sans-serif}
/* 見出しの数字ラベル・セクションラベル（eyebrow）を非表示 */
.eyebrow{display:none}
.sec-title .num{display:none}
.app{max-width:none;box-shadow:none}
.app > section{
  padding-left:max(20px, calc((100% - var(--content-max)) / 2));
  padding-right:max(20px, calc((100% - var(--content-max)) / 2));
}
.app > section.hero{
  padding-left:max(20px, calc((100% - var(--hero-max)) / 2));
  padding-right:max(20px, calc((100% - var(--hero-max)) / 2));
}
@media (max-width:359px){
  .app > section{padding-left:16px;padding-right:16px}
  .app > section.hero{padding-left:16px;padding-right:16px}
}
/* PC：各セクションの内容幅を広げる */
@media (min-width:1000px){ :root{--content-max:1040px} }
@media (min-width:1400px){ :root{--content-max:1160px} }

/* ===== FVバナー（hero外・画面横幅いっぱい・縦横比固定 2064:512） ===== */
/* バナー原寸は1000x250。原寸を超えて引き伸ばすとぼやけるため、表示は1000pxを上限に中央寄せ */
.hero-banner{display:block;width:100%;max-width:1000px;margin-inline:auto;aspect-ratio:1000 / 250;height:auto;object-fit:cover}

/* ===== FV 2カラム＋赤背景見出し ===== */
.hero{text-align:left;background:#fff}
/* 意味の切れ目で折り返す塊（狭い幅の語中改行・孤立行の対策）。広い幅では解除する */
.nb{display:inline-block}
@media (min-width:860px){ .nb{display:inline} }

/* 見出しのように直後に疑似要素（閉じ引用符）が続く場所では .nb を使わない。
   inline-block の直後は行頭禁則が効かず、引用符だけが次行に落ちるため、
   inline のまま折り返しだけ止める .nw を使う */
.nw{white-space:nowrap}

.hero-2col{display:grid;grid-template-columns:1fr;gap:26px;align-items:center;width:100%}
/* グリッドアイテムの最小幅を0にしないと、.hero-visual の width:400px が列幅を押し広げ
   375px幅で本文が右に切れる（max-width:100% は min-content に効かない） */
.hero-2col > *{min-width:0}
@media (min-width:760px){.hero-2col{grid-template-columns:1.05fr .95fr;gap:48px}
  .hero-2col > *{padding-inline:18px}}
.hero-text .badge{margin-bottom:12px}
.hero h1{display:block;margin:0 0 16px;line-height:1.4;color:var(--brand);font-size:36px;font-weight:900}
.hero h1 em{color:#000;font-style:normal}
.hero-sub{font-size:25px;font-weight:800;color:#000;margin:0 0 16px;letter-spacing:.02em}
.hero .lead{max-width:none;margin:0 0 24px;font-size:19px;line-height:1.9;color:#000}
/* 強調：マーカー風ハイライト＋太字 */
.hero .lead .mark{font-weight:800;color:#000;padding:.06em .12em;
  background:linear-gradient(transparent 56%, rgba(234,51,79,.28) 56%)}
@media (min-width:760px){.hero h1{font-size:40px}}
.hero-visual{width:100%}
@media (min-width:760px){.hero .cta{max-width:340px}}
/* スマホ：FVの文字を縮小 */
@media (max-width:600px){
  .hero h1{font-size:27px;margin-bottom:12px}
  .hero-sub{font-size:18px;margin-bottom:12px}
  .hero .lead{font-size:16px;line-height:1.85}
}
@media (max-width:380px){
  .hero h1{font-size:24px}
  .hero-sub{font-size:16px}
  .hero .lead{font-size:15px}
}

/* ===== カルーセル共通（左右ボタン操作） ===== */
.carousel-wrap{position:relative;margin:14px 0 4px}
.carousel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;padding-bottom:8px;scroll-behavior:smooth}
.carousel::-webkit-scrollbar{height:6px}
.carousel::-webkit-scrollbar-thumb{background:var(--brand-line);border-radius:999px}
.carousel > *{flex:0 0 calc(100% / var(--cols, 1.15) - 12px);scroll-snap-align:center}
/* コンテンツ毎に最適なカラム数（レスポンシブ） */
.carousel.videos{--cols:1}     /* 1動画だけ表示・ボタンで切替 */
.carousel.stats {--cols:1.5}
.carousel.packs {--cols:1.2}
.carousel.rows2 {--cols:1.2}
@media (min-width:600px){
  .carousel.stats {--cols:4}   /* 実績4つを一望 */
  .carousel.packs {--cols:3}
  .carousel.rows2 {--cols:3}   /* 3列×2行 */
}
/* 動画スライド：1枚を中央表示・フレーム 320×694px 固定／ボタンを動画に近接 */
.carousel.videos{gap:0}
.carousel.videos > .vslide{flex:0 0 100%;display:flex;justify-content:center;scroll-snap-align:center}
.carousel.videos .video{width:100%;max-width:400px;aspect-ratio:9 / 16}
.hero-visual .carousel-wrap{width:400px;max-width:100%;margin-inline:auto;position:relative;padding-bottom:56px}
/* カルーセルボタンを動画表示領域の外（下・中央）に配置 */
.hero-visual .cbtn{top:auto;bottom:8px;transform:none}
.hero-visual .cbtn:active{transform:scale(.95)}
.hero-visual .cbtn.prev{left:calc(50% - 48px);right:auto}
.hero-visual .cbtn.next{left:calc(50% + 6px);right:auto}
.cbtn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:42px;height:42px;border-radius:50%;
  border:none;background:var(--brand);color:#fff;box-shadow:0 4px 14px rgba(19,35,55,.20);
  font-size:24px;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.cbtn:active{background:var(--brand-dark);transform:translateY(-50%) scale(.96)}
.cbtn.prev{left:-8px}.cbtn.next{right:-8px}

/* 演出動画（スマホ縦比 9:16） */
.video{position:relative;background:var(--navy);border-radius:var(--radius);aspect-ratio:9/16;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:var(--shadow);border:1px solid var(--navy-line)}
.video .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;cursor:pointer;
  width:76px;height:76px;border-radius:50%;background:rgba(255,255,255,.94);
  box-shadow:0 6px 18px rgba(0,0,0,.35);display:flex;align-items:center;justify-content:center;
  transition:opacity .2s ease, transform .15s ease}
.video .play:hover{transform:translate(-50%,-50%) scale(1.06)}
.video .play.hidden{opacity:0;pointer-events:none}
.video .play::after{content:"";border-left:23px solid var(--brand);border-top:14px solid transparent;
  border-bottom:14px solid transparent;margin-left:6px}
.video .v-point{position:absolute;left:0;top:0;z-index:2;background:var(--brand);color:#fff;
  font-size:12px;font-weight:800;padding:5px 12px;border-bottom-right-radius:12px;letter-spacing:.04em}
/* 中央上：アイキャッチアイコン */
.video .v-eyecatch{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:2;
  width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.94);
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.28)}
.video .v-eyecatch svg{width:28px;height:28px;fill:var(--brand)}
/* 実動画（フレームにフィット） */
.video .vmedia{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;background:#000;z-index:0}
.video .v-point,.video .v-eyecatch{pointer-events:none}

/* §3 実績：2列×2行グリッド（ボタンなし） */
.stat-grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:14px 0 4px}
.stat-card{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px 14px;
  text-align:center;box-shadow:var(--shadow);
  min-height:170px;display:flex;flex-direction:column;align-items:center;justify-content:center}
/* D: 数値の背後にソフトな赤グロー＋角のキラ */
.stat-card::before{content:"";position:absolute;top:-34%;left:50%;transform:translateX(-50%);
  width:150px;height:150px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side, rgba(234,51,79,.12), transparent)}
.stat-card::after{content:"✦";position:absolute;top:10px;right:14px;color:var(--gold);font-size:15px;opacity:.85}
.stat-card .n,.stat-card .l{position:relative}
@media (min-width:1000px){.stat-card{min-height:200px}}
@media (max-width:600px){.stat-card{min-height:140px}}
.stat-card .n{font-size:56px;font-weight:900;color:var(--brand);line-height:1.02;letter-spacing:-.02em}
@media (min-width:1000px){.stat-card .n{font-size:64px}}
@media (max-width:600px){.stat-card .n{font-size:40px}}
/* 単位は数字より一段小さく。折り返すなら「500 / 種類以上」と意味の切れ目で割れるようにする */
.stat-card .n .unit{font-size:.42em;margin-left:2px;font-weight:800;letter-spacing:0;display:inline-block}
.stat-card .l{font-size:13px;color:var(--ink-soft);margin-top:8px;font-weight:700}

/* §5 安心：2行カルーセル（横スクロール／約3列表示） */
.carousel.rows2{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);
  grid-auto-columns:calc(100% / var(--cols, 1.3) - 12px);gap:12px}
.carousel.rows2 .rcard{scroll-snap-align:start;background:var(--card);border:1px solid var(--line);
  border-radius:14px;padding:16px;box-shadow:var(--shadow);display:flex;gap:12px;align-items:flex-start}
.carousel.rows2 .rcard .ic{flex:0 0 auto;width:42px;height:42px;border-radius:11px;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;color:var(--brand)}
.carousel.rows2 .rcard .ic svg{width:22px;height:22px}
.carousel.rows2 .rcard .ttl{font-weight:800;color:var(--navy);font-size:17px;margin-bottom:4px}
.carousel.rows2 .rcard p{font-size:12px;color:var(--ink-soft);margin:0}

/* §2 DOPAのポイント：3列＋見出し強調 */
.point3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.point3 .pcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:46px 18px 22px;text-align:left;box-shadow:var(--shadow)}
.point3 .pcard .pno{position:absolute;top:14px;left:14px;margin:0;background:var(--brand);color:#fff;
  font-weight:900;font-size:12px;border-radius:8px;padding:4px 12px;letter-spacing:.08em;
  box-shadow:0 3px 8px rgba(234,51,79,.30)}
.point3 .pcard .ic{width:54px;height:54px;border-radius:14px;background:var(--brand-soft);
  display:flex;align-items:center;justify-content:center;color:var(--brand);margin:16px auto 18px}
.point3 .pcard .ic svg{width:28px;height:28px}
/* nowrap禁止：601〜999pxでカードが画面外へ押し出されPOINT 03が読めなくなる実測バグの原因 */
.point3 .pcard .ttl{font-size:20px;font-weight:900;color:var(--navy);line-height:1.4;margin-bottom:8px}
.point3 .pcard p{font-size:12.5px;color:var(--ink-soft);margin:0}
@media (max-width:600px){.point3 .pcard .ttl{white-space:normal}}
@media (max-width:600px){.point3{grid-template-columns:1fr}}
/* §4 遊び方：PCは3カラム（3ステップを横並び表示） */
@media (min-width:760px){
  #how ol.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:18px}
  #how ol.steps li{padding:0 0 0 40px}
  #how ol.steps li:not(:last-child)::after{display:none}
  #how ol.steps .step-ttl{font-size:17px}
}

/* §6 パックカード */
.pack-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}
.pack-card .pthumb{min-height:150px}
.pack-card .pbody{padding:12px}
.pack-card .pnm{font-weight:800;color:var(--navy);font-size:16px;line-height:1.4}
.pack-card .pprice{font-weight:900;color:var(--brand);font-size:16px;margin-top:4px}
.pack-limit{position:absolute;left:0;top:0;z-index:1;background:var(--brand);color:#fff;font-size:11px;
  font-weight:800;padding:4px 10px;border-bottom-right-radius:10px}
.dots{display:flex;justify-content:center;gap:6px;margin-top:2px}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--brand-line)}
.dots i.on{background:var(--brand)}
/* §6 パック：全幅・ボタン非表示・スクロール無し（折り返しグリッドで6枚を一望） */
#first .carousel-wrap{width:100vw;max-width:100vw;margin-left:50%;transform:translateX(-50%)}
#first .carousel{padding-left:20px;padding-right:20px}
#first .cbtn{display:none}
#first .carousel.packs{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;overflow:visible}
@media (max-width:1000px){#first .carousel.packs{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){#first .carousel.packs{grid-template-columns:repeat(2,1fr)}}

/* ステップ画面モック・プレースホルダ */
.step-phone{margin:8px 0 2px}
.step-phone .ph{max-width:240px}
.ph{display:flex;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(160deg,var(--navy-soft),#fff);color:var(--navy-2);
  font-size:12px;font-weight:700;border:1px dashed var(--navy-line);border-radius:12px;min-height:120px;padding:12px}

/* 見出しの引用符装飾は廃止（意味のない装飾のため）。階層はサイズと太さで出す */
.sec-title.q{position:relative;display:block;padding:0}
/* 見出しは全幅で中央揃え（本文は左のまま）。モバイルはアイコンを上に積む */
h2.sec-title{text-align:center}
.sec-head{justify-content:center}
@media (max-width:759px){
  .sec-head{flex-direction:column;align-items:center;gap:8px}
}
/* セクション毎に背景色を装飾してメリハリ（hero/support/footerは各自の背景を維持） */
#about{background:var(--card)}
#proof{background:var(--brand-soft)}
#how{background:var(--card)}
#safe{background:var(--navy-soft)}
#first{background:var(--brand-soft)}
#faq{background:var(--card)}
.tchip .tci{width:14px;height:14px;vertical-align:-2px;margin-right:4px;stroke:var(--navy-2);
  fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* 各セクション見出しを大きく配置 */
h2.sec-title{font-size:28px;margin-bottom:18px}
@media (max-width:600px){h2.sec-title{font-size:24px}}
@media (min-width:760px){h2.sec-title{font-size:33px}}


/* ===== P2/P3 デザイン改善（参考LP起点・素材不要） ===== */

/* E: ヒーローの信頼チップ（確定情報のみ） */
.hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.hero-chips span{display:inline-flex;align-items:center;background:var(--brand-soft);color:var(--brand-dark);
  border:1px solid var(--brand-line);border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:800}
.hero-chips span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);margin-right:7px}

/* F: 限定訴求バッジ＋中央CTAバンド */
.urgency{display:inline-block;background:var(--brand);color:#fff;font-weight:900;font-size:13px;
  letter-spacing:.02em;border-radius:8px;padding:7px 14px;margin:0 0 14px;
  box-shadow:0 4px 12px rgba(234,51,79,.30)}
.cta-band{margin-top:26px;text-align:center}
.cta-band .cta{display:inline-block;width:auto;min-width:280px;padding-left:36px;padding-right:36px}

/* F: §6 ウェルカム（先頭パック）の限定バッジを強調 */
.pack-card:first-child .pack-limit{font-size:12px;padding:5px 12px}

/* G: 余白・リズムの統一（PCでセクション縦余白を均一に） */
@media (min-width:760px){ .app > section{padding-top:48px;padding-bottom:48px} }


/* 見出し上の赤アクセントバー・セクション境界の破線は廃止
   （どちらも意味のない装飾。セクションの区切りは背景色の交互で既に立っている） */


/* ===== 追加調整 ===== */
/* §3 数値セクション：見出しを大きく */
#proof h2.sec-title{font-size:34px}
@media (min-width:1000px){#proof h2.sec-title{font-size:42px}}
@media (max-width:600px){#proof h2.sec-title{font-size:27px}}

/* §4 ジャックポット/ランク：説明背景をカード調（赤アクセント）に */
.term-chips{display:grid;grid-template-columns:1fr;gap:10px;margin:16px 0}
@media (min-width:600px){.term-chips{grid-template-columns:1fr 1fr}}
.term-chips .tchip{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--brand-line);
  border-left:4px solid var(--brand);border-radius:12px;padding:13px 15px;font-size:13px;color:var(--navy);
  box-shadow:var(--shadow)}
.term-chips .tchip b{color:var(--brand)}
.term-chips .tci{stroke:var(--brand)}

/* §5 安心カルーセル：見出しを大きく */
.carousel.rows2 .rcard .ttl{font-size:19px}

/* §6 はじめての1パック：サムネ表示領域を大きく */
.pack-card .pthumb{min-height:240px}
@media (min-width:1000px){.pack-card .pthumb{min-height:300px}}

/* §3 数値ラベル（累計ダウンロード数 等）を大きく */
.stat-card .l{font-size:16px;margin-top:10px;line-height:1.4}
@media (min-width:1000px){.stat-card .l{font-size:18px}}
@media (max-width:600px){.stat-card .l{font-size:14px}}

/* §2 見出しのアイコン装飾（guide_2）。赤バーは非表示にして置き換え */
#about::before{display:none}
.sec-icon{display:block;width:clamp(84px,10vw,140px);height:auto;margin:0 0 10px}

/* §6 実パック画像サムネ（横長810x540）＋3カラム化 */
.pack-card .pthumb{min-height:0;line-height:0;background:#0b0b0b}
.pack-card .pthumb img{width:100%;height:auto;display:block}
#first .carousel.packs{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){#first .carousel.packs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){#first .carousel.packs{grid-template-columns:1fr}}

/* §6: 1行カルーセル（横スクロール）に戻す・画像のみ表示 */
#first .carousel.packs{display:flex;grid-template-columns:none;overflow-x:auto;gap:14px;--cols:2.4}
@media (max-width:900px){#first .carousel.packs{--cols:1.6}}
@media (max-width:560px){#first .carousel.packs{--cols:1.15}}
.pack-card .pbody{display:none}

/* §6 見出し横のマスコット（カードゲット！DOPA!くん＆チャンスくん） */
.first-intro{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.first-intro > div{width:100%}
.first-intro .cardget-fig{width:clamp(210px,24vw,320px);max-width:62%;height:auto;align-self:center;
  filter:drop-shadow(0 8px 16px rgba(19,35,55,.16))}
@media (min-width:760px){
  .first-intro{flex-direction:row;align-items:center;justify-content:space-between;gap:24px}
  .first-intro > div{flex:1}
  .first-intro .cardget-fig{width:clamp(240px,26vw,340px);max-width:40%;align-self:auto;margin:0}
}

/* §6 サムネを小さく（表示枚数を増やす） */
#first .carousel.packs{--cols:3.5}
@media (max-width:900px){#first .carousel.packs{--cols:2.4}}
@media (max-width:560px){#first .carousel.packs{--cols:1.5}}

/* FV テキスト列のマスコット（僕らがいちばーん！）
   floatはH1に食い込み1文字孤立行を作る実測バグの原因なので禁止。
   見出しの上に大きく置き、幅に応じてclampで拡大する（素材は2000pxある） */
.hero-fig{display:block;width:clamp(200px,24vw,300px);max-width:70%;height:auto;margin:0 auto 10px;
  filter:drop-shadow(0 10px 18px rgba(19,35,55,.16))}
@media (min-width:760px){.hero-fig{margin:0 auto 14px}}

/* §2 見出しアイコンを見出しと同じ行（ワンライナー）に */
.sec-head{display:flex;align-items:center;gap:14px;margin-bottom:18px}
/* 表情の大きいバストアップ素材（2549px）を56pxに潰さない */
.sec-head .sec-icon{width:clamp(84px,10vw,140px);height:auto;margin:0;flex:0 0 auto}
.sec-head h2.sec-title{margin-bottom:0}

/* ジャックポット・ランクの説明セクションを非表示 */
.term-chips{display:none}

/* §4 3ステップの実スクショ（縦長） */
.step-phone{margin:10px 0 2px}
.step-phone img{width:100%;max-width:230px;height:auto;display:block;margin:0 auto;
  border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow)}
@media (min-width:760px){.step-phone img{max-width:260px}}

/* §4 ステップ画像をサイズ・位置で揃えて綺麗に */
.step-phone img{width:100%;max-width:230px;aspect-ratio:1206 / 2622;object-fit:cover;object-position:top center;
  height:auto;display:block;margin:0 auto;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow)}
@media (min-width:760px){
  .step-phone img{max-width:250px}
  #how ol.steps li{display:flex;flex-direction:column;height:100%}
  #how .step-phone{margin-top:auto;padding-top:10px}
}

/* ステップ画像はトリミングなしで全画面表示（自然な縦横比） */
.step-phone img{aspect-ratio:auto;object-fit:initial}

/* ===== スマートフォン版レイアウト調整 ===== */
@media (max-width:760px){
  /* FV: マスコットを非フロート化（見出しの不適切な折り返しを防止）＋小さく */
  .hero-fig{float:none;width:130px;max-width:46%;margin:0 auto 8px;display:block}
}
@media (max-width:600px){
  /* FV 見出しを全幅で収まるサイズに */
  .hero h1{font-size:25px;line-height:1.45}
  /* §3 数字を少し小さく */
  .stat-card .n{font-size:34px}
  /* §5 安心の6理由：横スクロールをやめて全件1カラム表示 */
  .carousel.rows2{display:grid;grid-auto-flow:row;grid-template-rows:none;
    grid-template-columns:1fr;grid-auto-columns:auto;overflow:visible;gap:10px}
}

/* ===== §3 実績カード：豪華化（金は線と文字のみ・面には使わない） ===== */
.stat-card{border-top:3px solid var(--gold)}
.stat-card .n{font-variant-numeric:tabular-nums}

/* ===== 登場アニメーション（スクロール連動・種類は要素の性質で使い分け） =====
   ・.anim はJSが reduced-motion でない環境にだけ付与する。JS無効なら全要素そのまま表示
   ・開始はビューポート進入時（section.in）。ロード時の一斉スタートはしない
   ・見出し＝帯ワイプ／本文・カード＝フェードアップ／マスコット＝わずかなスケールイン */
.anim h2.sec-title{position:relative;width:fit-content;opacity:0;margin-inline:auto}
/* sec-head内はグループごと中央に寄せる（h2のmargin autoが効くとアイコンだけ左に残る） */
.sec-head h2.sec-title{margin-inline:0}
.anim h2.sec-title::after{content:"";position:absolute;inset:-4px -10px;background:var(--brand);
  transform:scaleX(0);transform-origin:left;pointer-events:none}
.anim section.in h2.sec-title{animation:secTitleIn .01s .3s linear both}
.anim section.in h2.sec-title::after{animation:secBand .62s cubic-bezier(.77,0,.18,1) both}
@keyframes secTitleIn{to{opacity:1}}
@keyframes secBand{
  0%{transform:scaleX(0);transform-origin:left}
  46%{transform:scaleX(1);transform-origin:left}
  54%{transform:scaleX(1);transform-origin:right}
  100%{transform:scaleX(0);transform-origin:right}}
.anim .rv{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
.anim section.in .rv{opacity:1;transform:none}
.anim .rv.fig{transform:translateY(8px) scale(.94)}
.anim section.in .rv.fig{transform:none}

/* 「3年半以上」の3：何もないところからズームアップ */
.anim .z3{display:inline-block;opacity:0;transform:scale(0)}
.anim section.in .z3{animation:zoom3 .7s .95s cubic-bezier(.34,1.56,.64,1) both}
@keyframes zoom3{
  0%{opacity:0;transform:scale(0)}
  70%{opacity:1;transform:scale(1.18)}
  100%{opacity:1;transform:scale(1)}}

/* ヒーローのサブコピーは1行固定（余白を残して折り返すより、文字を小さくする方が自然） */
.hero-sub{white-space:nowrap;font-size:clamp(11.5px,3.7vw,20px)}

/* 特徴カードの細線アイコン（薄い円＋線画SVG）は廃止。POINT番号がマーカーの役割を果たす */
.point3 .pcard .ic{display:none}

/* ===== 2026-08-12e: 監査残の改善 ===== */
/* 近接の原則：見出しは直下のリード文に寄せる（見出し→リードが、リード→本文より広いのは破綻） */
h2.sec-title{margin-bottom:12px}
.sec-head{margin-bottom:14px}

/* 副CTA（お問い合わせ/ヘルプ）は主CTAより控えめに。主従の逆転を防ぐ */
.support .links{max-width:480px;margin-left:auto;margin-right:auto}
.support .links a{font-size:13px;padding:8px 10px;border-width:1.5px}

/* mascot_cardget は体・視線が右向きの素材。右端に置くと勢いがページ外へ抜けるため、
   PCでは左に置いて視線がテキストへ向かうようにする */
@media (min-width:760px){
  .first-intro{flex-direction:row-reverse}
}

/* §4 PC：3列の行をそろえる（見出し／文／画面／補足）。文の長さが違っても画面の上端が3列で同じ高さになる */
@media (min-width:760px){
  #how ol.steps{grid-template-rows:repeat(4,auto);row-gap:0}
  #how ol.steps li{display:grid;grid-row:span 4;grid-template-rows:subgrid;height:auto}
  #how ol.steps li > .step-txt{align-self:start}
  #how .step-phone{margin-top:0;padding-top:14px;align-self:start}
  #how .step-sub{grid-row:4}
}

/* §4 PC：各ステップを枠（カード）にして、画面は淡い地の面に載せる。番号は「STEP 1」の札（POINTカードの札と同じ形） */
@media (min-width:760px){
  #how ol.steps{gap:0 24px}
  #how ol.steps li{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
    padding:58px 22px 22px}
  #how ol.steps li::before{content:"STEP " counter(st);top:20px;left:22px;width:auto;height:auto;
    padding:4px 12px;border-radius:8px;font-size:12px;font-weight:900;letter-spacing:.08em;
    box-shadow:0 3px 8px rgba(234,51,79,.30)}
  #how ol.steps .step-ttl{font-size:19px;color:var(--navy);line-height:1.4}
  #how .step-txt{margin-top:6px}
  #how .step-phone{grid-row:3 / 5;align-self:stretch;margin-top:18px;padding:20px 16px;
    background:#f3f5f8;border-radius:14px}
  #how .step-phone img{max-width:220px}
  #how li:has(.step-sub) .step-phone{grid-row:3;border-radius:14px 14px 0 0;padding-bottom:10px}
  #how .step-sub{grid-row:4;align-self:stretch;max-width:none;margin:0;padding:6px 16px 18px;
    background:#f3f5f8;border-radius:0 0 14px 14px}
  #how .step-sub figure{max-width:150px;justify-self:center}
}
/* 補足画像が無い1・2番目は3段で終える（4段にすると画面の面の下が空く）。3番目だけ補足の段まで伸びる */
@media (min-width:760px){
  #how ol.steps li{grid-row:span 3;align-self:start}
  #how ol.steps li:has(.step-sub){grid-row:span 4}
  #how .step-phone{grid-row:3}
}
@media (min-width:760px){#how ol.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* 見出し直下のリード文は見出しと同じく中央にそろえる（ABOUT・キャラ・はじめての方向けのオリパ） */
#about > p:first-of-type,#chara > p:first-of-type,#first .rec-lead{text-align:center}

/* PC：よくある質問・困ったときはは幅を詰めて中央に置く（1040px幅だと中身が左に寄って見える） */
@media (min-width:760px){
  #faq .faq,#support .box{max-width:820px;margin-left:auto;margin-right:auto}
  #support .support-head{justify-content:center}
}

/* §4 A案：PCは※と補足画面をカードの外へ出し、3枚のカードを同じ高さにする。SPは今までどおりカードの中 */
.steps-after{display:none}
@media (min-width:760px){
  #how .step-cau,#how .step-sub{display:none}
  #how ol.steps li,#how ol.steps li:has(.step-sub){grid-row:span 3;align-self:stretch}
  #how .step-phone,#how li:has(.step-sub) .step-phone{grid-row:3;border-radius:14px;padding-bottom:20px}
  .steps-after{display:block;margin-top:16px}
  .steps-after__note{margin:0 0 16px;font-size:12px;line-height:1.7;color:var(--ink-soft)}
  .steps-after__sub{display:flex;align-items:center;justify-content:center;gap:28px;
    padding:22px 24px;background:#f3f5f8;border-radius:14px}
  .steps-after__t{margin:0 8px 0 0;font-family:'M PLUS 1','Noto Sans JP',sans-serif;font-weight:900;
    font-size:17px;color:var(--navy);line-height:1.5}
  .steps-after__t .steps-after__no{display:block;width:max-content;margin-bottom:6px;padding:3px 10px;border-radius:8px;
    background:var(--brand);color:#fff;font-size:11px;letter-spacing:.08em}
  .steps-after__sub figure{margin:0;width:140px}
  .steps-after__sub img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid #e3e3e3}
  .steps-after__sub figcaption{margin-top:6px;font-size:12px;line-height:1.6;color:#555;text-align:center}
}
@media (min-width:760px){.steps-after__t{white-space:nowrap;flex:none}}

/* PC：困ったときはの2手順を左右に並べ、文とボタンを中央に（1列だとボタンが横長で、文が左に寄る） */
@media (min-width:760px){
  #support .support-head p{text-align:center}
  #support .help-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:20px}
  #support .help-step{flex-direction:column;align-items:center;gap:8px;text-align:center;
    padding:20px 22px 22px;background:#f3f5f8;border-radius:14px}
  #support .help-step__no{margin-top:0}
  #support .help-step__body{width:100%;display:flex;flex-direction:column;flex:1}
  #support .help-step__btn{width:100%;max-width:300px;margin:auto auto 0;margin-top:auto}
  #support .help-step__t + .help-step__btn{margin-top:auto}
  #support .help-step__body > p:last-of-type{margin-bottom:14px}
}

/* PC：STEP 3 の補足画面は折りたたみにする（常に出すと3ステップと別の塊に見える） */
@media (min-width:760px){
  .steps-after__sub{display:block;padding:0;margin:0 0 12px;background:none;border-radius:0;
    border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .steps-after__sub summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:center;gap:10px;
    padding:12px 4px;font-weight:800;font-size:14px;color:var(--navy)}
  .steps-after__sub summary::-webkit-details-marker{display:none}
  .steps-after__sub summary::after{content:"＋";color:#999;font-weight:400}
  .steps-after__sub[open] summary::after{content:"−"}
  .steps-after__sub .steps-after__no{padding:3px 10px;border-radius:8px;background:var(--brand);color:#fff;
    font-size:11px;font-weight:900;letter-spacing:.08em}
  .steps-after__figs{display:flex;justify-content:center;gap:28px;padding:6px 0 18px}
  .steps-after__figs figure{margin:0;width:140px}
  .steps-after__figs img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid #e3e3e3}
  .steps-after__figs figcaption{margin-top:6px;font-size:12px;line-height:1.6;color:#555;text-align:center}
}

/* §4 ステップ3の補足画面はカードの中の折りたたみ。SPは見出しを隠して常に開く（JSで open） */
.step-sub-tg > summary{display:none}
@media (min-width:760px){
  #how .step-sub{display:grid}
  #how ol.steps li:has(.step-sub-tg){grid-row:span 4}
  #how ol.steps li{align-self:start}
  .step-sub-tg{grid-row:4;margin-top:12px;border-top:1px solid var(--line)}
  .step-sub-tg > summary{display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;list-style:none;
    padding:12px 4px 0;font-weight:800;font-size:13px;color:var(--navy)}
  .step-sub-tg > summary::-webkit-details-marker{display:none}
  .step-sub-tg > summary::after{content:"＋";color:#999;font-weight:400}
  .step-sub-tg[open] > summary::after{content:"−"}
  #how .step-sub-tg .step-sub{grid-row:auto;max-width:none;margin:12px 0 0;padding:0;background:none;border-radius:0}
}

/* 章ごとに地の色を変える（2026-10-14 伊藤さん「単調」→「信用感のある色使いに。紺は微妙」）
   白と淡い青灰を交互に置き、色みは寒色の低彩度にそろえる。暖色はブランドの淡いピンク1か所だけ
   白 → 青灰 → 白 → 淡い青 → 白 → 淡い青 → 淡いピンク → 青灰 → 白〜淡い青のグラデ */
#about{background:#F4F7FB}
#chara{background:var(--card)}
#proof{background:#EAF0F8}
#how{background:var(--card)}
#safe{background:#EAF0F8}
#faq{background:#F4F7FB}
section + section{border-top:0}

/* 手順の画像は開発環境の画面である旨の注記（SP・PCとも3ステップの直後） */
.steps-dev{margin:12px 0 0;font-size:12px;line-height:1.7;color:var(--ink-soft)}
@media (min-width:760px){.steps-after__note{margin-bottom:0}.steps-dev{margin-top:2px}}

/* 安心の理由：カードの見出しにマーカー。章見出しの黄色とは分けて、ブランドの淡いピンクにする（2026-10-16 伊藤さん「見出しのマーカーとは別で」） */
#safe .ttl .mk{background:linear-gradient(transparent 60%,#FBCAD6 60%,#FBCAD6 96%,transparent 96%);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 .1em}