/* 公開ページの見た目（019）。会話の画面（web/index.html）と同じ配色（白 × ピンク〜レッド、丸く太く）。
   印刷（PDF 化）も同じ CSS で行う＝ページと PDF の内容がずれない（booking.com 080 と同じ）。 */
:root {
  color-scheme: light;
  --white: #FFFFFF; --blush: #FFF4F7; --pink: #FF6FA5; --pink-soft: #FFD9E6;
  --red: #E8334F; --red-deep: #BF1F3B; --ink: #3B2530; --ink-2: #6E4F5B; --muted: #9A7E89; --line: #F4D3DE;
  --container: 760px; --gutter: 20px;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--ink); background: var(--white); line-height: 1.85; font-size: 15px;
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Noto Sans JP", -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
header.site, footer.site {
  padding: 14px 20px; border-bottom: 2px solid var(--line);
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
footer.site { border-bottom: 0; border-top: 2px solid var(--line); display: block; margin-top: 48px; padding-left: 0; padding-right: 0; }
footer.site > p { max-width: var(--container); margin-left: auto; margin-right: auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.brand { font-weight: 800; color: var(--red); text-decoration: none; font-size: 1.15rem; letter-spacing: .02em;
  display: inline-flex; align-items: center; gap: 8px; }
.brand-mark { width: 30px; height: 30px; }
header.site nav { margin-left: auto; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
header.site nav a { color: var(--ink-2); font-weight: 700; text-decoration: none; }
/* 申し込みだけは行き先として目立たせる（ページのどこからでも1回で行ける） */
header.site nav a.nav-cta { background: #FFD84D; color: var(--ink); border-radius: 999px; padding: 7px 16px; font-weight: 900; }
a { color: var(--red); }
main { max-width: var(--container); margin: 0 auto; padding: 28px var(--gutter) 0; }
h1 { font-size: 1.5rem; margin: 8px 0 18px; line-height: 1.5; font-weight: 800; }
h2 { font-size: 1.12rem; margin: 30px 0 8px; padding-top: 8px; border-top: 2px solid var(--blush); font-weight: 800; }
h3 { font-size: 1rem; margin: 18px 0 6px; font-weight: 800; }
table { border-collapse: collapse; width: 100%; margin: 12px 0; font-size: .95rem; }
th, td { border: 1px solid var(--line); padding: 9px 11px; text-align: left; vertical-align: top; }
th { background: var(--blush); width: 32%; font-weight: 800; }
.lead { font-size: 1.05rem; color: var(--ink-2); }
.note { font-size: .82rem; color: var(--muted); }
footer .links { font-size: .88rem; }
.cur { color: var(--muted); }
ul, ol { padding-left: 1.3em; }
li { margin: 5px 0; }
.hero { background: var(--blush); border: 2px solid var(--pink-soft); border-radius: 24px; padding: 22px 20px; margin: 8px 0 24px; }
.hero h1 { margin: 0 0 8px; }
.hero p { margin: 0; color: var(--ink-2); font-weight: 700; }
.step { display: flex; gap: 14px; align-items: flex-start; margin: 14px 0; }
.step .num { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--pink); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.step h3 { margin: 4px 0 2px; }
.step p { margin: 0; color: var(--ink-2); }

@media print {
  /* PDF 版はページと同じ CSS で作る（版ズレを構造的に防ぐ） */
  header.site nav { display: none; }
  header.site nav a.nav-cta { background: none; padding: 0; }
  body { font-size: 10.5pt; }
  main { max-width: none; padding: 0; }
  h2 { break-after: avoid; }
  table, ul, ol { break-inside: avoid; }
  a { color: var(--ink); text-decoration: none; }
  footer.site .links { font-size: 8pt; color: var(--muted); }
  footer.site > p { max-width: none; padding-left: 0; padding-right: 0; }
}

/* --- LP（029。Claude Design の出力を、この配色とトークンの作りに移したもの） -----
   画面の見本は写真ではなく CSS で描く（実機のスクリーンショットは未了）。 */
.fullbleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.lp-in { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.lp-hero { background: var(--pink); padding: 40px 0 62px; text-align: center; margin-top: -28px; }
.lp-brand { margin: 0 0 18px; }
/* ロゴは**文字が白**なので、ピンク地のヒーローでだけ全体を使う。
   白地（ヘッダ）では文字が消えるため、そこには置かない（マークだけの logo-mark.png がある） */
.lp-brand img { width: clamp(220px, 32vw, 340px); height: auto; }
.lp-h1 { font-size: clamp(27px, 4.4vw, 48px); line-height: 1.7; color: var(--white); margin: 0; font-weight: 900; }
.lp-h1 span { display: block; }
.lp-h1 mark {
  background: #FFD84D; color: var(--ink); border-radius: 8px; padding: .04em .18em;
  /* inline のままだと、黄色の帯が上下の行に食い込む。inline-block にして
     行間を切り離す（Claude Design 側で同じ直しが入っていた） */
  display: inline-block; line-height: 1.28; vertical-align: baseline;
}
.lp-h1.small { font-size: clamp(25px, 4vw, 42px); }
.lp-lede { margin: 20px auto 0; max-width: 680px; font-weight: 700; font-size: clamp(15px, 1.7vw, 18px); color: var(--ink); }
.lp-fine { margin: 16px 0 0; font-size: 12px; color: var(--ink); font-weight: 500; }
.lp-cta { margin: 30px 0 0 !important; }
.btn { display: inline-block; text-decoration: none; font-weight: 900; padding: 18px 42px; border-radius: 999px; border: 0; }
.btn-cta { background: #FFD84D; color: var(--ink) !important; box-shadow: 0 7px 0 rgba(232,51,79,.3); font-size: clamp(16px, 2.2vw, 21px); }
.btn-cta:hover { background: #FFCE1F; }
.btn-plain { background: var(--blush); color: var(--ink) !important; font-size: 15px; padding: 15px; display: block; text-align: center; }

/* マスコットのうさぎ（040）。**アプリの案内役**であって先生ではないので、
   指を立てて教えたり応援したりはさせない。顔を出すだけで「そばにいる」を出す。
   `aria-hidden` なのは、読み上げに意味を足さない飾りだから（文言は何も変えていない）。 */
.usagi { display: block; pointer-events: none; user-select: none; }
/* ヒーロー: 見本の右下から半身。**スマホ見本にはかぶせない**——あれは「添削の見え方」を
   見せる中身で、隠すと損をする。だから右端の外側に置き、下を切って座らせる */
.usagi-hero { position: absolute; right: -14px; bottom: -52px; width: clamp(120px, 15vw, 190px); height: auto; z-index: 1; transform: scaleX(-1); }
/* **狭い画面では見本の横に並べる余地が無い。** 重ねると「添削の見え方」が隠れて損をするので、
   絶対配置をやめて見本の下に置く（覗いている感じは残る） */
@media (max-width: 900px) {
  .usagi-hero { position: static; width: 128px; margin: -6px auto -30px; transform: none; }
}
/* 悩み3枚のあと: 「うんうん」と聞いている位置。**淡いピンクの地**なので、白いうさぎでも沈まない */
.usagi-pains { width: clamp(104px, 13vw, 132px); height: auto; margin: 18px auto 4px; }
/* FEATURES の見出しの横。見出しの足元に添える大きさ（見出しより大きくしない） */
.lp-h2-row { display: flex; align-items: flex-end; justify-content: center; gap: 12px; }
.usagi-feat { width: clamp(64px, 8vw, 88px); height: auto; transform: scaleX(-1); }
@media (max-width: 560px) { .usagi-feat { display: none; } }   /* 狭いと見出しが窮屈になる */

/* 締め: CTA の下で待っている。下を切るので、座り込んで見える */
.usagi-end { width: clamp(120px, 20vw, 176px); height: auto; margin: 10px auto -32px; position: relative; z-index: 1; }

.lp-showcase { position: relative; margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 40px); flex-wrap: wrap; }
.facts { display: flex; flex-direction: column; gap: 12px; }
.fact { background: var(--white); border-radius: 20px; padding: 14px 20px; min-width: 190px; text-align: left; box-shadow: 0 6px 0 rgba(232,51,79,.15); }
.fact span { font-weight: 700; font-size: 15px; }
.fact b { display: block; font-size: 23px; line-height: 1.25; color: var(--red); font-weight: 900; }
.fact b i { font-style: normal; }
.phones { display: flex; align-items: flex-end; gap: 16px; }
.phone { width: clamp(148px, 19vw, 208px); background: var(--ink); border-radius: 30px; padding: 8px; box-shadow: 0 14px 30px rgba(59,37,48,.3); }
.phone-screen { background: var(--white); border-radius: 23px; padding: 11px 10px; font-size: 9.5px; line-height: 1.55; color: var(--ink); text-align: left; min-height: 300px; }
.ph-head { font-weight: 900; font-size: 10.5px; margin-bottom: 7px; }
.ph-row { display: flex; align-items: flex-start; gap: 4px; margin: 5px 0; }
.ph-face { flex: none; width: 15px; height: 15px; border-radius: 50%; background: var(--pink); margin-top: 2px; }
.ph-them { background: var(--white); border: 1px solid var(--pink-soft); border-radius: 10px; padding: 4px 7px; }
.ph-me { background: var(--blush); border-radius: 10px; padding: 4px 7px; margin: 5px 0 5px auto; width: 84%; }
.ph-bar { margin-top: 9px; border-top: 1px solid var(--line); padding-top: 7px; text-align: center; font-weight: 900; color: var(--muted); }
.ph-fix { border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; margin: 6px 0; }
.ph-x { display: block; color: var(--muted); text-decoration: line-through; }
.ph-o { display: block; color: var(--red); font-weight: 900; }
.ph-note { display: block; color: var(--ink-2); margin-top: 2px; }
.ph-drop { margin-top: 8px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 6px; }

.lp-pains { background: var(--blush-2, #FFE3EC); padding: 60px 0 64px; }
.lp-h2 { text-align: center; font-size: clamp(23px, 3.6vw, 38px); line-height: 1.4; font-weight: 900; margin: 0; border: 0; padding: 0; color: var(--ink); }
.lp-h2.tight { margin: 52px 0 0; }
.lp-sub-c { text-align: center; font-weight: 700; color: var(--red); margin: 10px 0 0; }
.pains { margin-top: 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; text-align: left; }
.pain { background: var(--white); border-radius: 22px; padding: 24px 22px; }
.pain b { font-size: 17px; line-height: 1.6; font-weight: 900; }
.pain span { display: block; margin-top: 14px; font-weight: 700; font-size: 14px; color: var(--red); }
.lp-about { max-width: 640px; margin: 28px auto 0; text-align: center; }

.eyebrow { text-align: center; font-weight: 900; font-size: 15px; letter-spacing: .26em; color: var(--pink); margin: 52px 0 8px; }
.feature { background: var(--white); border: 2px solid var(--line); border-radius: 26px; padding: clamp(20px, 3vw, 34px); margin: 22px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 26px; align-items: center; }
.feature-body h3 { font-size: clamp(20px, 2.6vw, 26px); line-height: 1.45; margin: 16px 0 0; font-weight: 900; }
.feature-body p { margin: 12px 0 0; }
.feature.reverse .feature-body { order: 2; }
.feature.reverse .feature-shot { order: 1; }
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  background: #FFD84D; color: var(--ink); border-radius: 999px;
  width: clamp(58px, 7vw, 74px); height: clamp(58px, 7vw, 74px);
  font-weight: 900; font-size: clamp(24px, 3vw, 30px); line-height: 1;
  box-shadow: 0 5px 0 #E0B400;
}
.card-shot { background: var(--blush); border-radius: 18px; padding: 16px; font-size: 12px; line-height: 1.6; }
.cs-head { font-weight: 900; color: var(--red); margin-bottom: 8px; }
.cs-word { background: var(--white); border-radius: 10px; padding: 7px 10px; font-weight: 900; }
.cs-meta { color: var(--ink-2); font-size: 11px; margin: 4px 0 10px; }
.card-shot .ph-fix { background: var(--white); font-size: 11px; }

.steps3 { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.s3 { background: var(--blush); border-radius: 22px; padding: 26px 24px; }
.s3 .num { width: 44px; height: 44px; border-radius: 999px; background: var(--pink); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 19px; }
.s3 h3 { margin: 15px 0 0; font-size: 19px; font-weight: 900; }
.s3 p { margin: 8px 0 0; font-size: 14px; }

.plans { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 18px; }
.plan { background: var(--white); border: 2px solid var(--line); border-radius: 26px; padding: 30px 28px; position: relative; }
.plan.featured { background: var(--pink); border-color: var(--pink); }
.plan .tag { position: absolute; top: -13px; left: 26px; background: #FFD84D; color: var(--ink); font-weight: 900; font-size: 12px; padding: 6px 15px; border-radius: 999px; }
.plan-name { font-weight: 900; font-size: 18px; }
.plan-price { margin-top: 10px; font-weight: 900; font-size: clamp(24px, 3.2vw, 34px); line-height: 1.25;
  /* 日本語は原則どこでも折り返せるので、「（税 / 込）」のように括弧の中で割れる。
     keep-all にすると空白の位置でしか折れず、「月額 / 2,980円（税込）」と割れる */
  word-break: keep-all; }
.plan.featured .plan-price { color: var(--white); }
.plan-list { margin: 18px 0 22px; padding-left: 20px; font-size: 14px; line-height: 2; }

.faq { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.qa { background: var(--blush); border-radius: 20px; padding: 22px 24px; }
.qa b { font-size: 16px; line-height: 1.6; font-weight: 900; }
.qa p { margin: 8px 0 0; }
.lp-end { overflow: hidden;  background: var(--pink); padding: 66px 0 70px; text-align: center; margin-top: 56px; }
br.sp { display: none; }
@media (max-width: 520px) { br.sp { display: inline; } }

@media print {
  /* 紙では色地も画面の見本も落とす。読む内容だけ残す */
  .fullbleed { margin-left: 0; margin-right: 0; }
  .lp-hero, .lp-pains, .lp-end { background: none; padding: 0; margin: 12px 0 0; }
  .lp-h1, .lp-h1 mark { color: var(--ink); background: none; font-size: 1.6rem; }
  .lp-in { padding: 0; }
  .phones, .feature-shot, .usagi { display: none; }
  .btn { background: none !important; color: var(--ink) !important; border: 1px solid var(--ink); padding: 3px 10px; box-shadow: none; font-size: 1rem; }
  .pains, .plans, .steps3, .feature { display: block; }
  .pain, .plan, .s3, .qa, .feature { break-inside: avoid; border: 1px solid var(--line); margin: 6px 0; }
}

/* ---- アプリの入口（033）。扉は2枚だけ ------------------------------------
   ロゴの文字は白なので、地の色はブランドのピンクに置く（`.lp-brand` と同じ理由）。
   1画面に収める（`min-height: 100svh`）。`svh` なのは、iOS の下バーで `vh` が
   はみ出すため——ボタンが折り返しの下に隠れると、入口として用をなさない。 */
.enter {
  background: var(--pink); color: var(--white); margin-top: -28px;
  min-height: 100svh; display: flex; align-items: center; justify-content: center;
  padding: 40px 0 48px; text-align: center;
}
.enter-in { max-width: 460px; margin: 0 auto; padding: 0 24px; width: 100%; }
.enter-brand { margin: 0 0 26px; }
.enter-brand img { width: clamp(200px, 60vw, 300px); height: auto; }
/* `keep-all` が無いと、日本語は**どの文字の間でも折れる**（「添/削」で割れた）。
   語の途中で割れた見出しは、読む前に意味が切れる */
.enter-h1 { font-size: clamp(22px, 6vw, 30px); line-height: 1.65; color: var(--white); font-weight: 900; margin: 0; word-break: keep-all; }
.enter-lede { color: var(--white); font-weight: 700; margin: 10px 0 0; opacity: .95; word-break: keep-all; }
/* 扉は縦に積む。**主（はじめる）が上**——Duolingo と同じ並びで、迷ったら上を押せばよい */
.enter-doors { margin-top: 34px; display: flex; flex-direction: column; gap: 12px; }
.enter-door { display: block; width: 100%; padding: 16px; font-size: 17px; word-break: keep-all; }
/* 副の扉は「地の上に輪郭だけ」。色を分けるのは、押し間違えても戻れる方を目立たせないため */
.enter-ghost {
  background: transparent; color: var(--white) !important;
  border: 2px solid rgba(255, 255, 255, .7); box-shadow: none;
}
.enter-ghost:hover { background: rgba(255, 255, 255, .14); }
.enter-fine { color: var(--white); font-size: 12.5px; line-height: 1.9; margin: 22px 0 0; opacity: .9; word-break: keep-all; }