/* 診断「20の質問でわかる、あなたの愛し愛され方診断（2026-09-22改名）」
   配色はブランドパレット固定（memory/reference_brand_colors.md）。
     ベース #F7F4EF／メイン #D8C2A8／アクセント #E0B57A／テキスト #3F3A34
   - アクセントは「押してほしいボタン」（はじめる／LINE・メールで受け取る）と、入口の見出しの「愛され方・愛し方」（2026-09-12）・締めの見出しの「幸せ」（2026-09-13）だけ（リョージ）。他には使わない
   - 純黒 #000 は使わない。影も墨色（63,58,52）の薄いものだけ
   - 見出し・設問・タイプ名は明朝（研究所のリールと同じトーン）。長い本文は読みやすさでゴシック
   - スマホ縦が主。PCは幅を絞って中央に置くだけ */

:root {
  --base:#F7F4EF;
  --main:#D8C2A8;
  --accent:#E0B57A;
  --text:#3F3A34;
  --muted:#8a8175;   /* 01_婚活シミュレーターと同じ補助色 */
  --line:#e6ded2;    /* 同上 */
  --white:#fff;
  --tint:rgba(216,194,168,.20);   /* メインを薄く敷く面 */
  --shadow:0 1px 2px rgba(63,58,52,.04), 0 8px 24px rgba(63,58,52,.06);

  /* 端末に明朝があればそれを使う（iPhone・Mac＝ヒラギノ明朝）。無い端末だけ しっぽり明朝 を取りに行く */
  --serif:"Hiragino Mincho ProN","Hiragino Mincho Pro","Shippori Mincho","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","Noto Sans JP",sans-serif;
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0;
  background:var(--base);
  color:var(--text);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.9;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt" 0;
}
button { font:inherit; color:inherit; }
[hidden] { display:none !important; }

/* 改行位置の調整（main.ts の phrase()）。文言はそのまま、折り返す場所だけを選ぶ */
.ph { display:inline-block; }
.nw { white-space:nowrap; }
h1, h2, p, li { text-wrap:pretty; }  /* 最終行が1〜2文字だけになるのを避ける（対応ブラウザのみ） */

#app {
  max-width:560px; margin:0 auto;
  padding:0 24px calc(24px + env(safe-area-inset-bottom));
}

.btn-cta {
  display:block; width:100%;
  border:none; border-radius:999px; cursor:pointer;
  /* 文字は白（2026-09-13 リョージ「黒だとちょっとキツイ」）。金の上で白が沈まないよう、ごく薄い影を足す */
  background:var(--accent); color:var(--white);
  text-shadow:0 1px 2px rgba(63,58,52,.22);
  font-family:var(--sans); font-size:16px; font-weight:600; letter-spacing:.1em;
  text-align:center; text-decoration:none;
  padding:17px 20px; line-height:1.5;
  box-shadow:0 6px 18px rgba(224,181,122,.30);
  transition:transform .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.btn-cta:active { transform:translateY(1px); box-shadow:0 3px 10px rgba(224,181,122,.28); }

.btn-text {
  display:block; margin:18px auto 0; padding:10px 14px;
  background:none; border:none; cursor:pointer;
  font-size:13px; color:var(--muted); letter-spacing:.06em;
  -webkit-tap-highlight-color:transparent;
}

:focus-visible { outline:2px solid var(--main); outline-offset:3px; }

/* =========================================================
   入口
   ========================================================= */
.lp {
  min-height:100svh;
  display:flex; flex-direction:column;
  padding:0 0 28px;
}
/* 見出しの背景（2026-09-12 リョージ「キャッチの背景にイメージ画像」）。
   画面の端まで敷き、ベース色を重ねて文字を読めるようにする。下はベース色に溶かして本文へつなぐ
   画像＝_共有素材/img/header/header_scene_v1.png（窓辺・2客のカップ）を 1080px に縮めたもの */
.lp-hero {
  margin:0 -24px;
  padding:44px 24px 34px;
  background:
    linear-gradient(180deg, rgba(247,244,239,.92) 0%, rgba(247,244,239,.85) 45%, rgba(247,244,239,.89) 78%, var(--base) 100%),
    url(img/lp-hero.jpg) center 62% / cover no-repeat;
}
.org {
  margin:0 0 24px;
  font-size:11.5px; letter-spacing:.24em; color:var(--muted);
  display:flex; align-items:center; gap:12px;
}
.org::after { content:""; flex:0 0 28px; height:1px; background:var(--main); }

.lp-title {
  margin:0;
  font-family:var(--serif); font-weight:600;
  /* 旧名「愛され方・愛し方のクセ」（11字）で決めた大きさ。2026-09-22改名後の「愛し愛され方診断」（8字）も収まる */
  font-size:clamp(22px, 7.2vw, 34px);
  line-height:1.6; letter-spacing:.05em;
}
/* 3行はリョージ指定の改行（2026-09-12）＝1かたまり1行 */
.lp-title span { display:block; white-space:nowrap; }
/* 「愛され方・愛し方」だけボタンと同じアクセント色（2026-09-12 リョージ）。見出しの中でここだけ立てる */
.lp-title .lp-key { font-style:normal; color:var(--accent); }

.lp-note {
  margin:16px 0 0;
  font-size:13px; line-height:1.8; color:var(--muted);
}
/* 画像（カップ）の上に重なるので、補助色より少しだけ濃くして読めるようにする */
.lp-hero .lp-note { color:#6b6358; }

.lp-intro { margin:30px 0 0; }
.lp-lead { margin:0 0 14px; font-size:15px; line-height:2; }
/* 2026-09-12 リョージ「どうしたら…は1行になる？」＝375px幅で1行に収まるよう、
   文字をひと回り小さく・左右の余白を少し詰め・かっこと「？」の空きを詰めた（palt）。
   もっと狭い画面では、原稿の「／」の位置（どうしたら／振り向いて…）で折り返す */
.lp-voice {
  margin:0;
  padding:18px 18px;
  background:var(--tint); border-radius:16px;
  font-family:var(--serif); font-weight:600;   /* 2026-09-12 リョージ「太くしてみて」（旧500） */
  font-size:16px; line-height:1.9; letter-spacing:.04em;
  font-feature-settings:"palt" 1;
}
/* リョージの答え（相談者の声の枠の外に置く）。
   2026-09-12 リョージ「本文と同じ文字に」＝1行目（.lp-lead）と同じゴシック・同じ大きさ */
.lp-answer { margin:20px 0 0; font-size:15px; line-height:2; }

/* 未確定の枠（文言が決まるまでの仮置き。公開前に必ず消える＝deploy.sh が止める） */
.pending {
  margin:14px 0 0; padding:10px 14px;
  border:1px dashed var(--muted); border-radius:10px;
  font-size:12px; line-height:1.7; color:var(--muted);
}
.pending p { margin:0; }

.lp-meta {
  list-style:none; margin:26px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center;   /* 2026-09-12 リョージ「中央揃えに」 */
}
.lp-meta li {
  padding:5px 13px;
  background:var(--white); border:1px solid var(--line); border-radius:999px;
  font-size:12.5px; line-height:1.6; color:var(--text);
  /* 「」の前後の文字の余白を詰める（「近い／近くない」の札の左だけ空いて見えるため・2026-09-12 お試し） */
  font-feature-settings:"palt" 1;
}

.lp-meta + .btn-cta { margin-top:22px; }

/* =========================================================
   設問
   ========================================================= */
.quiz {
  min-height:100svh;
  display:flex; flex-direction:column;
  padding:22px 0 18px;
}
.progress { display:flex; align-items:center; gap:14px; }
.bar {
  flex:1; height:3px; border-radius:3px; overflow:hidden;
  background:rgba(63,58,52,.08);
}
.bar span {
  display:block; height:100%; width:0;
  background:var(--main);
  transition:width .35s ease;
}
.count {
  margin:0; min-width:4.2em; text-align:right;
  font-family:var(--serif); font-size:13px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.count b { font-size:20px; font-weight:600; color:var(--text); }
.count .sep { margin:0 .3em; }

.q-note {
  margin:14px 0 0;
  font-size:12px; line-height:1.75; color:var(--muted);
}

/* 設問の文字だけが入れ替わる。ボタンは下で動かない（親指の位置を変えない） */
.q-body {
  flex:1;
  display:flex; align-items:center;
  padding:28px 0;
  min-height:220px;
}
.q-text {
  margin:0;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(20px, 5.8vw, 24px);
  line-height:1.85; letter-spacing:.04em;
}
.q-body.in .q-text { animation:rise .45s ease both; }

.answers { display:grid; gap:12px; }
.ans {
  width:100%;
  padding:18px 20px;
  background:var(--white); color:var(--text);
  border:1px solid var(--line); border-radius:16px;
  font-size:16.5px; font-weight:600; letter-spacing:.14em;
  cursor:pointer;
  box-shadow:var(--shadow);
  transition:background .18s ease, border-color .18s ease, transform .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.ans:active { transform:scale(.985); }
.ans.picked { background:var(--main); border-color:var(--main); }
@media (hover:hover) { .ans:hover { border-color:var(--main); } }

/* =========================================================
   結果（4タイプ）・全型1点以下
   ========================================================= */
.result { padding:0 0 8px; }   /* 上はタイプ名の背景画像から始まる（2026-09-13） */
.low { padding:40px 0 8px; }
.view.result, .view.low { animation:fade .6s ease both; }

.r-title {
  margin:0;
  font-family:var(--serif); font-size:12.5px; line-height:1.7;
  letter-spacing:.06em; color:var(--muted); text-align:center;
}
/* 結果の上（2026-09-13 リョージ）：「あなたは／〇〇タイプ」＋一行の説明。背景に画像（仮＝入口と同じ・入口と同じ重ね方） */
.r-hero {
  margin:0 -24px;
  padding:52px 24px 44px;
  text-align:center;
  background:
    linear-gradient(180deg, rgba(247,244,239,.92) 0%, rgba(247,244,239,.85) 45%, rgba(247,244,239,.89) 78%, var(--base) 100%),
    var(--type-img, url(img/lp-hero.jpg)) center 45% / cover no-repeat;
}
/* タイプごとの背景（2026-09-13 リョージ「見出しに合うもの」＝まりなびブログの文字なしの元画像 _raw_eyecatch_*） */
body[data-type="A"] { --type-img:url(img/type-a.jpg); }   /* 先まわり＝贈り物のリボンを結ぶ手（kizukai-karamawari） */
body[data-type="B"] { --type-img:url(img/type-b.jpg); }   /* のみこみ＝書きものをしながら言葉をしまう（iitai-koto-ienai） */
body[data-type="C"] { --type-img:url(img/type-c.jpg); }   /* 見きわめ＝メモを前に考えこむ（konkatsu-joken-tsukareru） */
body[data-type="D"] { --type-img:url(img/type-d.jpg); }   /* 待ち受け＝窓辺の席で待つ（konkatsu-ukemi） */
.r-you {
  margin:0 0 6px;
  font-family:var(--serif); font-size:14px; letter-spacing:.24em; color:#6b6358;
}

/* 愛され方・愛し方（各1文）。2つを1枚の枠にまとめ、点線で分ける */
.r-loves {
  margin:4px 0 0; padding:4px 22px;
  background:var(--white); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow);
}
.r-love-row { padding:18px 0; }
.r-love-row + .r-love-row { border-top:1px dashed var(--line); }
.r-loves dt {
  display:inline-block; padding:2px 12px;
  background:var(--tint); border-radius:999px;
  font-size:12px; line-height:1.7; letter-spacing:.14em; color:var(--text);
}
/* 文字は本文（.sec p）と同じ（2026-09-13 リョージ） */
.r-loves dd { margin:10px 0 0; font-size:15.5px; line-height:2.05; }

.r-loves-note {
  margin:14px 0 0; text-align:center;
  font-size:13px; letter-spacing:.06em; color:#6b6358;
}

/* 叶える一歩目は… 〜 愛し愛される関係を築くには？ ＝ 画面の端まで白い帯（2026-09-13 リョージ）。
   帯の中の枠（一歩目・あるある）は、白の上で消えないようベース色にする */
.r-body {
  margin:44px -24px 0; padding:8px 24px 52px;
  background:var(--white);
}
.r-body .sec:first-child { margin-top:40px; }
/* 叶える一歩目は…・こんなことありませんか？ は囲まない（2026-09-13 リョージ「囲まなくていい」） */
.r-body .sec ul { padding:0; background:none; border:none; border-radius:0; box-shadow:none; }
.r-body .sec li { border-bottom:none; padding:7px 0 7px 20px; }   /* 点線なし（2026-09-13 リョージ） */
.r-body .sec li::before { top:1.2em; }
.r-body .sec-gift { padding:0; background:none; border:none; border-radius:0; box-shadow:none; }

/* 全型1点以下の画面の見出し（縦線つき） */
.r-head { text-align:center; margin:44px 0 8px; }
.r-head::before {
  content:""; display:block;
  width:1px; height:34px; margin:0 auto 22px;
  background:var(--main);
}
.r-name {
  margin:0;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(28px, 8.4vw, 36px);
  line-height:1.5; letter-spacing:.1em;
}
.l-head {
  margin:0;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(21px, 6vw, 25px);
  line-height:1.7; letter-spacing:.05em;
}

/* 各区切り */
.sec { margin:52px 0 0; animation:rise .6s ease both; animation-delay:calc(var(--i, 0) * 70ms); }
.sec h2 {
  margin:0 0 16px;
  font-family:var(--serif); font-weight:600;
  /* 見出しは必ず1行（2026-09-13 リョージ）。いちばん長い「愛し愛される関係を築くには？」（14字）が
     320px幅でも1行に入るよう、狭い画面では少しだけ縮む（375px以上は従来の18.5px） */
  font-size:clamp(16px, 4.95vw, 18.5px); white-space:nowrap;
  line-height:1.6; letter-spacing:.06em;
  display:flex; align-items:center; gap:12px;
}
.sec h2::before { content:""; flex:0 0 18px; height:1px; background:var(--text); opacity:.5; }
.sec p { margin:0 0 16px; font-size:15.5px; line-height:2.05; }
.sec p:last-child { margin-bottom:0; }

/* 太字は太さだけ（2026-09-13 リョージ「アンダーラインは全部消して」＝旧マーカー線は廃止） */
.sec strong, .closing-body strong { font-weight:700; }

/* あるある3つ（こんなこと、ありませんか） */
.sec ul {
  list-style:none; margin:0; padding:6px 20px;
  background:var(--white); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow);
}
.sec li {
  position:relative;
  padding:14px 0 14px 20px;
  font-size:15.5px; line-height:1.85;
  border-bottom:1px dashed var(--line);
}
.sec li:last-child { border-bottom:none; }
.sec li::before {
  content:""; position:absolute; left:2px; top:1.35em;
  width:6px; height:6px; border-radius:50%;
  background:var(--main);
}

/* 叶える一歩目は…（渡せること）は枠で立てる */
.sec-gift {
  padding:26px 18px;
  background:var(--white); border:1px solid var(--main); border-radius:20px;
  box-shadow:var(--shadow);
}

/* 締め（音声5本 → 受け取り方） */
.closing {
  margin:60px 0 0;
  padding:30px 22px 26px;
  background:var(--tint); border-radius:22px;
}
.low .closing { margin-top:36px; }
/* 結果ページの締めは、画面の端まで今の色の帯にする（白い帯のすぐ下・2026-09-13 リョージ） */
.result .closing {
  margin:0 -24px; padding:44px 24px 40px;
  border-radius:0;
  background:#F1EAE1;   /* ＝今の締めの色（メイン #D8C2A8 を20%でベースに重ねた色）を不透明にしたもの */
}
.closing-body p { margin:0 0 16px; font-size:15.5px; line-height:2.05; }

/* 締めの見出し（2026-09-13 リョージ）＝「もっと幸せが叶う／パートナーシップ／無料音声セミナー」。3行とも8字 */
.closing-head {
  margin:0 0 26px; text-align:center;
}
/* 結果ページでは見出しの背景に画像（仮＝タイプのところと同じ・2026-09-13 リョージ）。帯の上端から端まで敷き、下は帯の色に溶かす */
.result .closing-head {
  margin:-44px -24px 28px; padding:48px 24px 40px;
  background:
    linear-gradient(180deg, rgba(247,244,239,.92) 0%, rgba(247,244,239,.85) 45%, rgba(241,234,225,.9) 80%, #F1EAE1 100%),
    url(img/closing.jpg) center 45% / cover no-repeat;   /* 明るい部屋で笑顔の女性（kekkon-shitekara-shiawase） */
}
.closing-head {
  font-family:var(--serif); font-weight:600;
  font-size:clamp(21px, 6.2vw, 25px); line-height:1.6; letter-spacing:.08em;
}
.closing-head span { display:block; white-space:nowrap; }
/* 見出しの中の太字（原稿の **幸せ**）はボタンと同じ橙（2026-09-13 リョージ・入口の「愛され方・愛し方」と同じ扱い） */
.closing-head strong { font-weight:inherit; color:var(--accent); }

/* ボタンの上のメッセージ（音声5本の一覧のすぐ下の段落・2026-09-13 リョージ）＝リョージの気持ちなので中央に立てる */
.closing-body ul + p {
  margin:28px 0 18px; text-align:center;
  font-family:var(--serif); font-weight:500; line-height:2;
}
/* 名前と顔写真（メッセージのすぐ下・2026-09-13 リョージ）。写真＝ryoji_ptn_v6 をバストアップで丸く（2026-09-13 リョージ「顔がアップすぎ」） */
.result .closing-body .r-author {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  margin:0 0 26px; text-align:center;
  font-size:12px; line-height:1.75; color:var(--muted); letter-spacing:.02em;
}
.result .closing-body .r-author::before {
  content:""; flex:0 0 64px; width:64px; height:64px; border-radius:50%;
  background:url(img/ryoji-bust.jpg) center / cover no-repeat;
  box-shadow:0 0 0 2px var(--white), var(--shadow);
}
/* 締めの最後の一行（受け取り方を選べます。）も中央（2026-09-13 リョージ） */
.result .closing-body p:last-child { text-align:center; }
.closing-body ul {
  list-style:none; margin:4px 0 20px; padding:0;
}
.closing-body li {
  position:relative;
  padding:13px 0 13px 26px;
  font-family:var(--serif); font-weight:500;
  font-size:15.5px; line-height:1.8; letter-spacing:.03em;
  border-top:1px solid rgba(63,58,52,.10);
}
.closing-body li:last-child { border-bottom:1px solid rgba(63,58,52,.10); }
/* 音声5本の頭は①〜⑤（2026-09-13 リョージ。旧＝▶）。5本より増えたら足す */
.closing-body li::before {
  position:absolute; left:0; top:13px;
  font-family:var(--serif); font-weight:500; color:var(--muted);
}
.closing-body li:nth-child(1)::before { content:"①"; }
.closing-body li:nth-child(2)::before { content:"②"; }
.closing-body li:nth-child(3)::before { content:"③"; }
.closing-body li:nth-child(4)::before { content:"④"; }
.closing-body li:nth-child(5)::before { content:"⑤"; }
/* 結果ページでは①〜⑤を白い枠で囲む（2026-09-13 リョージ）。枠の中は行と行の間だけ細い線 */
.result .closing-body ul {
  margin:6px 0 0; padding:4px 18px;
  background:var(--white); border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow);
}
.result .closing-body li { border-top:1px solid var(--line); }
.result .closing-body li:first-child { border-top:none; }
.result .closing-body li:last-child { border-bottom:none; }

.cta-pair { display:grid; gap:12px; margin-top:24px; }

.again { margin-top:34px; }

/* =========================================================
   フッター・その他
   ========================================================= */
.foot {
  margin:48px 0 8px; padding-top:18px;
  border-top:1px solid var(--line);
  font-size:11px; letter-spacing:.2em; color:var(--muted); text-align:center;
}
/* 設問中はフッターを出さない（1問に集中してもらう） */
body[data-view="quiz"] .foot { display:none; }

.noscript { padding:40px 24px; text-align:center; color:var(--muted); }

/* 答え終わってから結果が出るまでのひと呼吸 */
.settle {
  position:fixed; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  background:var(--base);
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.settle span {
  display:block; width:0; height:1px; background:var(--main);
}
body.settling .settle { opacity:1; pointer-events:auto; }
body.settling .settle span { animation:draw .6s ease forwards; }

@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }
@keyframes draw { from { width:0; } to { width:120px; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}

/* PC：幅は絞ったまま、上下に少し余白を足すだけ */
@media (min-width:720px) {
  .lp { min-height:auto; padding-top:88px; }
  .lp .btn-cta { margin-top:36px; }
  .quiz { min-height:auto; padding-top:56px; }
  .q-body { min-height:280px; }
  .cta-pair { grid-template-columns:1fr 1fr; }
}

/* メールで受け取る：押すと開くアドレス欄（2026-09-11） */
.mail-form { margin:18px 0 0; padding:20px; background:var(--white); border:1px solid var(--line); border-radius:16px; }
.mail-label { display:block; font-size:14px; letter-spacing:.04em; }
.mail-note { display:block; font-size:12px; color:var(--muted); margin:2px 0 8px; }
.mail-input { display:block; width:100%; font:inherit; font-size:16px; color:var(--text);
  padding:13px 14px; border:1px solid var(--line); border-radius:10px; background:var(--base); }
.mail-input:focus { outline:2px solid var(--main); outline-offset:1px; }
.mail-submit { width:100%; margin-top:14px; border:0; cursor:pointer; }

/* スマホの本文は14px（講座サイトと同じ基準・2026-09-12 リョージ「よろしく」）
   質問の文・見出し・声の枠は大きいまま。メール欄は16px（下げるとiPhoneが入力時に拡大する） */
@media (max-width:719px) {
  .lp-lead, .lp-answer, .r-loves dd, .sec p, .sec li, .closing-body p, .closing-body li { font-size:14px; }
}