/* ============================================
   ほどく。 HODOKU | Wellness Coaching
   共通スタイル（叩き台 v1.0 / 2026-07-17）
   ============================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth;
  /* 9/4：閉じたメニューが画面の右外に控えている分、スマホで右に300pxスクロールできて
     しまっていた（指で左に払うと空白が見える）。clip なら sticky ヘッダーを壊さずに止まる */
  overflow-x: clip; }
body {
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  color: #2a2624;
  background: url("../images/texture_paper.jpg") center/300px repeat, #fdfcf9;
  background-blend-mode: multiply;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased; font-feature-settings: "palt";
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

:root {
  --ivory:#fdfcf9; --cream:#f6f1e8; --sand:#ece4d3; --ink:#2a2624; --sub:#6b625a;
  --gold:#b89a5e; --gold-dk:#8f7239; --gold-lt:#e5d4a8; --line:#d8cfbe;
  --shadow:0 14px 40px rgba(118,94,45,.08);
  --serif:'Noto Serif JP','Cormorant Garamond',serif;
}
.container { width: min(1120px, 92%); margin-inline: auto; }
.serif { font-family: var(--serif); font-weight: 500; letter-spacing: .04em; }
.center { text-align: center; }
.gold { color: var(--gold-dk); }
.mute { color: var(--sub); }
.divider { width: 60px; height: 1px; background: var(--gold); margin: 18px auto; }
section { padding: 100px 0; position: relative; }
@media (max-width: 768px){ section { padding: 68px 0; } }

/* 叩き台の「要確認」注記 */
.todo { display:inline-block; font-size:.66rem; letter-spacing:.04em; color:#9a5b00;
  background:#fff3d6; border:1px dashed #d8ad4e; border-radius:5px; padding:1px 7px; margin:0 4px; vertical-align:middle; font-family:'Noto Sans JP',sans-serif; }
.draft-banner { background:#3a332b; color:#f6f1e8; text-align:center; font-size:.78rem; letter-spacing:.06em; padding:8px 12px; position:relative; z-index:60; }
.draft-banner b { color:var(--gold-lt); }

h2.section-title { font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.5; letter-spacing: .06em; color: var(--ink); text-align: center; }
h2.section-title .sub { display: block; font-size: .72rem; letter-spacing: .35em;
  color: var(--gold-dk); margin-bottom: 14px; font-family: 'Cormorant Garamond', serif; font-style: italic; }

/* ============ ヘッダー・ナビ ============ */
header.site { position: sticky; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(253,252,249,.94); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--line); }
.nav { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; gap: 16px; }
.brand { font-family: var(--serif); font-size: 1.15rem; letter-spacing: .18em; color: var(--ink); line-height: 1.2; }
.brand small { display: block; font-size: .58rem; letter-spacing: .28em; color: var(--gold-dk); font-family: 'Cormorant Garamond', serif; font-style: italic; margin-top: 2px; }

.nav-menu { display:flex; align-items:center; gap:26px; }
.nav-menu a { font-size:.86rem; letter-spacing:.08em; color:var(--ink); transition:.2s; }
.nav-menu a:hover { color:var(--gold-dk); }
.nav-menu a.current { color:var(--gold-dk); border-bottom:1px solid var(--gold); padding-bottom:2px; }
.nav-cta { display: inline-block; padding: 10px 22px; font-size: .82rem; letter-spacing: .08em;
  border: 1px solid var(--gold); color: var(--gold-dk); border-radius: 999px; transition: .25s; background:#fff; }
.nav-cta:hover { background: var(--gold); color: #fff; }
.hamburger { display:none; background:none; border:none; cursor:pointer; padding:8px; width:40px; height:40px; position:relative; }
.hamburger span { display:block; position:absolute; left:8px; right:8px; height:1.5px; background:var(--ink); transition:.25s; }
.hamburger span:nth-child(1){ top:13px; }
.hamburger span:nth-child(2){ top:19px; }
.hamburger span:nth-child(3){ top:25px; }
.hamburger.open span:nth-child(1){ top:19px; transform:rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ top:19px; transform:rotate(-45deg); }

@media (max-width: 900px){
  /* 9/4：right:-100% だと画面外にはみ出した分だけ横スクロールできてしまうため、
     transform で逃がす（スクロール領域は広がらない） */
  .nav-menu { position:fixed; z-index:65; top:0; right:0; transform:translateX(100%); width:min(320px,80%); height:100vh; background:var(--ivory); flex-direction:column; align-items:flex-start; justify-content:center; padding:40px; gap:20px; transition:transform .3s; box-shadow: -8px 0 30px rgba(0,0,0,.08); }
  .nav-menu.open { transform:translateX(0); }
  .nav-menu a { font-size:1rem; }
  .nav-menu .nav-cta { margin-top:12px; }
  .hamburger { display:block; z-index:70; position:relative; }
  .nav-menu-overlay { display:none; position:fixed; inset:0; background:rgba(42,38,36,.4); z-index:45; }
  .nav-menu-overlay.open { display:block; }
}
@media (max-width: 640px){ .brand { font-size: 1rem; } }

/* ============ ボタン ============ */
.btn-primary { display: inline-flex; align-items: center; gap: 10px; padding: 17px 32px; font-size: .98rem; letter-spacing: .06em;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dk) 100%); color: #fff; border-radius: 999px;
  box-shadow: 0 12px 28px rgba(143,114,57,.28); transition: .25s; font-weight: 500; border: none; cursor: pointer; text-align:center; }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(143,114,57,.35); }
.btn-ghost { display:inline-flex; align-items:center; gap:8px; padding:17px 30px; font-size:.95rem; letter-spacing:.06em;
  border:1px solid var(--gold); color:var(--gold-dk); border-radius:999px; transition:.25s; background:#fff; cursor:pointer; text-align:center; }
.btn-ghost:hover { background:var(--cream); }

/* ============ HERO（トップ） ============ */
.hero { min-height: 92vh; padding: 90px 0 90px;
  background: radial-gradient(ellipse at top right, rgba(229,212,168,.35), transparent 55%),
    radial-gradient(ellipse at bottom left, rgba(236,228,211,.6), transparent 55%),
    linear-gradient(180deg, #fffdf7 0%, #fdfcf9 100%);
  display: flex; align-items: center; overflow: hidden; position: relative; }
.hero-inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 900px){ .hero-inner { grid-template-columns: 1fr; gap: 36px; } }
.hero-eyebrow { display: inline-block; font-size: .72rem; letter-spacing: .28em; color: var(--gold-dk);
  border: 1px solid var(--gold-lt); padding: 6px 16px; border-radius: 999px; background: #fff; margin-bottom: 24px; }
.hero h1 { font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.9rem, 4.4vw, 2.5rem); line-height: 1.55; letter-spacing: .04em; color: var(--ink); }
.hero h1 em { font-style: normal; background: linear-gradient(transparent 68%, var(--gold-lt) 0); padding: 0 4px; }
.hero-lead { margin-top: 26px; color: var(--sub); font-size: 1rem; line-height: 2.1; }
.hero-bullets { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }
.hero-bullets li { list-style: none; font-size: .95rem; color: var(--ink); padding-left: 26px; position: relative; }
.hero-bullets li::before { content: ""; position: absolute; left: 0; top: .7em; width: 14px; height: 1px; background: var(--gold); }
.hero-cta-row { margin-top: 38px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-visual { aspect-ratio: 4/5; border-radius: 8px; background:
  linear-gradient(135deg, var(--sand), var(--cream)); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; color:var(--sub); font-size:.85rem; box-shadow:var(--shadow); text-align:center; padding:20px; overflow:hidden; position:relative; }
.hero-visual img { width:100%; height:100%; object-fit:cover; display:block; }
.hero-visual .placeholder-note { position:absolute; bottom:12px; left:12px; right:12px; }

/* ============ ページヒーロー（下層共通） ============ */
.page-hero { padding: 120px 0 80px; background:
  radial-gradient(ellipse at top right, rgba(229,212,168,.3), transparent 55%),
  linear-gradient(180deg, #fffdf7 0%, #fdfcf9 100%); text-align:center; }
/* 9/12：診断ページのヒーローに、結果イラストと同じ女性の絵を置く */
.hero-illust { max-width: 440px; margin: 34px auto 4px; }  /* 10/1：横長の糸の絵に替えたため幅を広げた */
.hero-illust img { width: 100%; height: auto; display: block; }

.page-hero .en { font-family:'Cormorant Garamond',serif; font-style:italic; letter-spacing:.35em; color:var(--gold-dk); font-size:.78rem; }
.page-hero h1 { font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.5; letter-spacing: .06em; margin-top: 14px; }
.page-hero p.lead { margin-top: 24px; color: var(--sub); font-size: 1rem; line-height: 2; max-width: 640px; margin-inline:auto; }
.breadcrumb { font-size: .74rem; letter-spacing: .06em; color: var(--sub); margin-top: 24px; }
.breadcrumb a { color:var(--gold-dk); }
.breadcrumb span { margin: 0 8px; color:var(--line); }

/* ============ 悩みグリッド ============ */
.worries { background: linear-gradient(180deg,#fbf7ef,#fdfcf9); }
.worry-grid { margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:820px){ .worry-grid{ grid-template-columns:1fr; } }
.worry { background:#fff; border:1px solid var(--line); border-radius:10px; padding:30px 26px; box-shadow:var(--shadow); position:relative; }
.worry .q { font-family:var(--serif); color:var(--gold-dk); font-size:1.6rem; line-height:1; }
.worry p { margin-top:12px; font-size:.94rem; color:var(--ink); }
.worry .tag { position:absolute; top:16px; right:18px; font-size:.62rem; letter-spacing:.2em; color:var(--gold-dk); }
.worry-note { margin-top:40px; text-align:center; font-family:var(--serif); font-size:1.15rem; color:var(--ink); }

/* ============ リフレーム（ダーク） ============ */
.reframe { background:
  linear-gradient(rgba(47,42,36,.86), rgba(47,42,36,.94)),
  url("../images/motif_thread.jpg") center/cover no-repeat,
  #2f2a24; color:#f3ede1; }
.reframe .container { max-width: 820px; }
.reframe h2 { font-family:var(--serif); font-weight:500; font-size:clamp(1.5rem,3.2vw,2.1rem); line-height:1.6; text-align:center; letter-spacing:.05em; }
.reframe h2 em { font-style:normal; color:var(--gold-lt); }
.reframe p { margin-top:26px; text-align:center; color:#d8cfbe; font-size:1rem; line-height:2.1; }
.reframe .big { margin-top:34px; text-align:center; font-family:var(--serif); font-size:clamp(1.5rem,4vw,2.4rem); color:#fff; letter-spacing:.06em; }
.reframe .big span { color:var(--gold-lt); }

/* ============ 診断カード ============ */
.diagnosis { background:#fff; }
.diag-card { max-width:860px; margin:0 auto; border:1px solid var(--gold-lt); border-radius:14px; padding:52px 40px; text-align:center;
  background: linear-gradient(180deg,#fffef9,#fbf5e9); box-shadow:var(--shadow); }
.diag-card .en2 { font-family:'Cormorant Garamond',serif; font-style:italic; letter-spacing:.3em; color:var(--gold-dk); font-size:.8rem; }
.diag-card h3 { font-family:var(--serif); font-weight:500; font-size:clamp(1.4rem,3vw,1.9rem); margin-top:12px; letter-spacing:.04em; }
.diag-card p { margin-top:18px; color:var(--sub); }

/* ============ 比較（心の脂肪） ============ */
.about-section { background: linear-gradient(180deg,#fbf7ef,#fdfcf9); }
.compare { margin-top:52px; display:grid; grid-template-columns:1fr 1fr; gap:24px; }
@media (max-width:820px){ .compare{ grid-template-columns:1fr; } }
.compare .col { border-radius:12px; padding:34px 30px; }
.compare .old { background:#f0ece4; border:1px solid var(--line); }
.compare .new { background:linear-gradient(160deg,#fffdf7,#f7edd6); border:1px solid var(--gold-lt); box-shadow:var(--shadow); }
.compare h4 { font-family:var(--serif); font-size:1.1rem; letter-spacing:.05em; margin-bottom:18px; }
.compare .old h4 { color:var(--sub); }
.compare .new h4 { color:var(--gold-dk); }
.compare ul { list-style:none; display:flex; flex-direction:column; gap:12px; }
.compare li { font-size:.92rem; padding-left:24px; position:relative; }
.compare .old li::before { content:"×"; position:absolute; left:0; color:#b0a795; }
.compare .new li::before { content:"○"; position:absolute; left:0; color:var(--gold-dk); }

/* ============ タイプ ============ */
.types .type-grid { margin-top:54px; display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:820px){ .types .type-grid{ grid-template-columns:1fr; } }
.type { border:1px solid var(--line); border-radius:10px; padding:28px 26px; background:#fff; box-shadow:var(--shadow); }
.type .cat { font-size:.66rem; letter-spacing:.22em; color:#fff; background:var(--gold-dk); border-radius:999px; padding:3px 12px; display:inline-block; }
.type .cat.mind { background:#6f6a86; }
.type h4 { font-family:var(--serif); font-size:1.12rem; margin:16px 0 10px; letter-spacing:.03em; line-height:1.5; }
.type p { font-size:.9rem; color:var(--sub); }
.type .app { margin-top:16px; font-size:.88rem; color:var(--ink); border-top:1px dashed var(--line); padding-top:14px; }
.type .app b { color:var(--gold-dk); font-weight:500; }
.types .root { margin-top:44px; text-align:center; font-family:var(--serif); font-size:1.25rem; color:var(--ink); letter-spacing:.05em; }
.types .root em { font-style:normal; background:linear-gradient(transparent 68%, var(--gold-lt) 0); padding:0 4px; }

/* ============ メソッド ============ */
.method { background:linear-gradient(180deg,#fbf7ef,#fdfcf9); }
.steps { margin-top:54px; display:flex; flex-direction:column; gap:16px; max-width:840px; margin-inline:auto; }
.step { display:grid; grid-template-columns:64px 1fr; gap:22px; align-items:start; background:#fff; border:1px solid var(--line); border-radius:10px; padding:24px 26px; box-shadow:var(--shadow); }
.step .no { font-family:'Cormorant Garamond',serif; font-size:2rem; color:var(--gold); line-height:1; }
.step h4 { font-family:var(--serif); font-size:1.08rem; margin-bottom:6px; letter-spacing:.03em; }
.step p { font-size:.9rem; color:var(--sub); }
/* 9/4：トップの5ステップは見出しのみにしたので、カードの高さを詰める */
.steps-compact { gap:12px; }
.steps-compact .step { padding:18px 26px; align-items:center; }
.steps-compact .step h4 { margin-bottom:0; }

/* ============ 選ばれる理由 ============ */
.why .why-grid { margin-top:54px; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
@media (max-width:820px){ .why .why-grid{ grid-template-columns:1fr; } }
.why-card { text-align:center; padding:10px; }
.why-card .no { font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold-dk); letter-spacing:.2em; }
.why-card h4 { font-family:var(--serif); font-size:1.14rem; margin:12px 0 12px; letter-spacing:.03em; }
.why-card p { font-size:.92rem; color:var(--sub); }

/* ============ プロフィール（ダーク） ============ */
.profile { background:#2f2a24; color:#f3ede1; }
.profile-inner { display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:center; }
@media (max-width:820px){ .profile-inner{ grid-template-columns:1fr; } }
.profile-photo { aspect-ratio:4/5; border-radius:8px; background:linear-gradient(135deg,#4a4237,#3a332b); border:1px solid #554c3d; display:flex; align-items:center; justify-content:center; color:#b7ad9a; font-size:.82rem; text-align:center; padding:20px; overflow:hidden; position:relative; }
.profile-photo img { width:100%; height:100%; object-fit:cover; display:block; }
.profile-photo .placeholder-note { position:absolute; bottom:12px; left:12px; right:12px; color:#f3ede1; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.profile h3 { font-family:var(--serif); font-size:1.7rem; letter-spacing:.05em; }
.profile .role { color:var(--gold-lt); font-size:.9rem; letter-spacing:.08em; margin:8px 0 22px; }
.profile p { color:#d8cfbe; font-size:.94rem; line-height:2; margin-bottom:16px; }
.profile .quote { font-family:var(--serif); color:#fff; font-size:1.05rem; line-height:1.9; border-left:2px solid var(--gold); padding-left:18px; margin-top:24px; }
.profile .creds { margin-top:22px; display:flex; flex-wrap:wrap; gap:8px; }
.profile .creds span { font-size:.74rem; border:1px solid #554c3d; border-radius:999px; padding:5px 12px; color:#cfc4b0; }
.profile .more-link { display:inline-block; margin-top:26px; font-size:.86rem; color:var(--gold-lt); border-bottom:1px solid var(--gold); padding-bottom:2px; }

/* ============ 声（ダイジェスト） ============ */
.voices { background:linear-gradient(180deg,#fbf7ef,#fdfcf9); }
.voice-grid { margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:820px){ .voice-grid{ grid-template-columns:1fr; } }
.voice { background:#fff; border:1px solid var(--line); border-radius:10px; padding:28px 26px; box-shadow:var(--shadow); }
.voice h4 { font-family:var(--serif); font-size:1.05rem; line-height:1.5; margin-bottom:12px; }
.voice p { font-size:.9rem; color:var(--sub); }
.voice .who { margin-top:16px; font-size:.8rem; color:var(--gold-dk); letter-spacing:.06em; }

/* ============ 流れ ============ */
.flow .steps2 { margin-top:52px; display:grid; grid-template-columns:repeat(5,1fr); gap:16px; }
@media (max-width:900px){ .flow .steps2{ grid-template-columns:1fr; } }
.flowstep { background:#fff; border:1px solid var(--line); border-radius:10px; padding:22px 18px; box-shadow:var(--shadow); }
.flowstep .no { font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold-dk); letter-spacing:.15em; font-size:.82rem; }
.flowstep h4 { font-family:var(--serif); font-size:1rem; margin:10px 0 8px; line-height:1.4; }
.flowstep p { font-size:.82rem; color:var(--sub); }

/* ============ FAQ ============ */
.faq { background:linear-gradient(180deg,#fbf7ef,#fdfcf9); }
.faq-list { margin-top:48px; max-width:820px; margin-inline:auto; display:flex; flex-direction:column; gap:14px; }
.faq-item { background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); overflow:hidden; }
.faq-item .q { font-family:var(--serif); font-size:1rem; color:var(--ink); position:relative; padding:22px 60px 22px 56px; cursor:pointer; user-select:none; transition:background .2s; }
.faq-item .q:hover { background:#fbf7ef; }
.faq-item .q::before { content:"Q"; position:absolute; left:26px; top:22px; color:var(--gold-dk); font-family:'Cormorant Garamond',serif; font-style:italic; }
.faq-item .q::after { content:""; position:absolute; right:26px; top:50%; width:12px; height:12px; border-right:1.5px solid var(--gold-dk); border-bottom:1.5px solid var(--gold-dk); transform:translateY(-70%) rotate(45deg); transition:.25s; }
.faq-item.open .q::after { transform:translateY(-30%) rotate(-135deg); }
.faq-item .a { max-height:0; overflow:hidden; transition:max-height .3s ease, padding .3s; font-size:.92rem; color:var(--sub); padding:0 28px 0 56px; }
.faq-item.open .a { max-height:600px; padding:0 28px 24px 56px; }

/* ============ 最終CTA（ダーク） ============ */
.finalcta { background:
  linear-gradient(rgba(47,42,36,.82), rgba(47,42,36,.92)),
  url("../images/section_release.jpg") center/cover no-repeat,
  #2f2a24; color:#f3ede1; text-align:center; }
.finalcta h2 { font-family:var(--serif); font-weight:500; font-size:clamp(1.6rem,3.6vw,2.4rem); line-height:1.6; letter-spacing:.05em; }
.finalcta h2 em { font-style:normal; color:var(--gold-lt); }
.finalcta p { margin-top:22px; color:#d8cfbe; font-size:1rem; line-height:2; }
.finalcta .hero-cta-row { justify-content:center; }

/* ============ フッター ============ */
footer.site { background:#241f1a; color:#a99f8f; padding:48px 0 40px; text-align:center; font-size:.8rem; }
footer .brand2 { font-family:var(--serif); font-size:1.1rem; color:#f3ede1; letter-spacing:.14em; }
footer .brand2 em { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:.8rem; color:var(--gold-lt); margin-left:8px; }
footer .links { margin:20px 0; display:flex; gap:20px; justify-content:center; flex-wrap:wrap; }
footer .links a { color:#cfc4b0; transition:.2s; }
footer .links a:hover { color:var(--gold-lt); }

/* ============ セクションバナー画像（下層共通） ============ */
.section-banner { max-width: 1120px; margin: 0 auto 0; aspect-ratio: 21/9; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.section-banner img { width:100%; height:100%; object-fit:cover; display:block; }
.section-figure { max-width: 720px; margin: 40px auto; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.section-figure img { width:100%; height:auto; display:block; }

/* ============ 記事型（voice.htmlさなえ物語） ============ */
.story { max-width: 780px; margin: 0 auto; }
.story h3 { font-family:var(--serif); font-size:clamp(1.3rem,2.6vw,1.7rem); letter-spacing:.05em; margin-top:56px; margin-bottom:18px; color:var(--ink); }
.story h3::before { content:""; display:inline-block; width:28px; height:1px; background:var(--gold); margin-right:14px; vertical-align:middle; }
.story p { font-size:1rem; line-height:2.1; color:var(--ink); margin-bottom:22px; }
.story blockquote { font-family:var(--serif); font-size:1.15rem; line-height:2; color:var(--gold-dk); border-left:2px solid var(--gold); padding: 12px 0 12px 24px; margin:30px 0; letter-spacing:.03em; }
.story .story-meta { font-size:.82rem; color:var(--sub); letter-spacing:.06em; text-align:center; margin-bottom:40px; }

/* ============ 手書きお礼状 ============ */
.letters { margin-top:52px; display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:820px){ .letters{ grid-template-columns:1fr; } }
.letter { background:#fff; border:1px solid var(--line); border-radius:10px; padding:20px; box-shadow:var(--shadow); text-align:center; }
.letter .img-wrap { aspect-ratio: 3/4; background:linear-gradient(135deg,#f6f1e8,#ece4d3); border-radius:6px; display:flex; align-items:center; justify-content:center; color:var(--sub); font-size:.78rem; padding:20px; margin-bottom:14px; overflow:hidden; }
.letter .img-wrap img { width:100%; height:100%; object-fit:cover; border-radius:6px; }
.letter .caption { font-size:.86rem; color:var(--sub); }
.letter .caption b { color:var(--ink); font-weight:500; }

/* ============ 階段図（メニュー全体像） ============ */
.stairs { margin-top: 54px; max-width: 900px; margin-inline:auto; }
.stair { display:grid; grid-template-columns: 80px 1fr; gap:20px; align-items:stretch; margin-bottom: 12px; }
.stair .step-no { display:flex; align-items:center; justify-content:center; font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.4rem; color:var(--gold-dk); background:linear-gradient(160deg,#fffdf7,#f7edd6); border:1px solid var(--gold-lt); border-radius:8px; }
.stair .step-body { background:#fff; border:1px solid var(--line); border-radius:8px; padding:20px 22px; box-shadow:var(--shadow); }
.stair .step-body h4 { font-family:var(--serif); font-size:1.05rem; margin-bottom:6px; letter-spacing:.03em; }
.stair .step-body p { font-size:.88rem; color:var(--sub); line-height:1.9; }
.stair.hi .step-body { background:linear-gradient(160deg,#fffdf7,#f7edd6); border:1px solid var(--gold-lt); }
.stair.hi .step-body h4 { color:var(--gold-dk); }

/* ============ 料金表 ============ */
.pricing { margin-top:54px; display:grid; grid-template-columns:1fr 1fr; gap:24px; max-width:840px; margin-inline:auto; }
@media (max-width:820px){ .pricing{ grid-template-columns:1fr; } }
.price-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:36px 30px; text-align:center; box-shadow:var(--shadow); position:relative; }
.price-card.hi { background:linear-gradient(180deg,#fffdf7,#f7edd6); border:1px solid var(--gold-lt); }
.price-card .plan { font-family:var(--serif); font-size:1.2rem; letter-spacing:.05em; color:var(--ink); }
.price-card .period { color:var(--sub); font-size:.86rem; margin-top:6px; letter-spacing:.06em; }
.price-card .amount { font-family:var(--serif); font-size:2.2rem; color:var(--gold-dk); margin:20px 0 10px; letter-spacing:.02em; }
.price-card .amount small { font-size:.9rem; color:var(--sub); font-family:'Noto Sans JP',sans-serif; }
.price-card ul { list-style:none; text-align:left; margin-top:20px; display:flex; flex-direction:column; gap:10px; padding-top:20px; border-top:1px solid var(--line); }
.price-card li { font-size:.9rem; color:var(--ink); padding-left:20px; position:relative; }
.price-card li::before { content:"○"; position:absolute; left:0; color:var(--gold-dk); font-size:.8rem; }
.price-card .badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--gold-dk); color:#fff; font-size:.72rem; letter-spacing:.2em; padding:5px 16px; border-radius:999px; }

/* ============ 診断ページ ============ */
.diagn-page { background:linear-gradient(180deg,#fdfcf9,#fbf7ef); }
.diagn-intro { max-width:720px; margin: 0 auto 40px; text-align:center; }
.diagn-intro p { color:var(--sub); font-size:1rem; line-height:2; margin-top:16px; }
/* 9/4：診断の条件をひと目で。ここを短くして、すぐQ1が見える位置まで上げる */
.diagn-badges { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:22px; list-style:none; }
.diagn-badges li { font-size:.78rem; letter-spacing:.06em; color:var(--gold-dk); background:#fffdf7;
  border:1px solid var(--gold-lt); border-radius:999px; padding:7px 15px; }
.quiz { max-width:720px; margin:0 auto; }
.q-item { background:#fff; border:1px solid var(--line); border-radius:10px; padding:24px 26px; margin-bottom:14px; box-shadow:var(--shadow); }
.q-item .q-text { font-family:var(--serif); font-size:1rem; letter-spacing:.03em; margin-bottom:16px; line-height:1.7; }
.q-item .q-num { font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold-dk); margin-right:10px; }
.q-options { display:flex; gap:8px; flex-wrap:wrap; }
.q-options label { flex:1; min-width:100px; text-align:center; padding:12px; border:1px solid var(--line); border-radius:8px; cursor:pointer; font-size:.9rem; color:var(--sub); transition:.2s; background:#fdfcf9; }
.q-options label:hover { border-color:var(--gold); color:var(--gold-dk); }
.q-options input[type="radio"] { display:none; }
.q-options input[type="radio"]:checked + span { color:#fff; }
.q-options label:has(input:checked) { background:var(--gold-dk); color:#fff; border-color:var(--gold-dk); }
.quiz-actions { text-align:center; margin-top:30px; }
/* 9/4：スマホで「はい／ときどき」で1行が埋まり、折り返した「いいえ」が flex:1 で
   行いっぱいに広がっていた（面談で発見）。最長ラベルが4文字なので3等分で収める。 */
@media (max-width:480px){
  .q-options { gap:6px; }
  .q-options label { min-width:0; padding:12px 4px; font-size:.85rem; letter-spacing:0; }
}
.quiz-result { max-width:720px; margin:40px auto 0; background:linear-gradient(180deg,#fffef9,#fbf5e9); border:1px solid var(--gold-lt); border-radius:14px; padding:40px 32px; text-align:center; box-shadow:var(--shadow); display:none; }
.quiz-result.show { display:block; }
.quiz-result .score { font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold-dk); font-size:.9rem; letter-spacing:.2em; }
.quiz-result h3 { font-family:var(--serif); font-size:clamp(1.4rem,3vw,1.8rem); margin-top:12px; letter-spacing:.04em; }
.quiz-result p { color:var(--sub); margin-top:16px; line-height:2; }
.quiz-result .actions { margin-top:26px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ============ フォーム ============ */
.form-wrap { max-width:640px; margin: 0 auto; background:#fff; border:1px solid var(--line); border-radius:12px; padding:40px 36px; box-shadow:var(--shadow); }
@media (max-width:640px){ .form-wrap { padding:28px 22px; } }
.field { margin-bottom:22px; }
.field label { display:block; font-size:.86rem; letter-spacing:.06em; color:var(--ink); margin-bottom:8px; font-weight:500; }
.field label .req { color:#c8763a; font-size:.72rem; margin-left:6px; }
.field input[type="text"], .field input[type="email"], .field textarea, .field select {
  width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:6px; background:#fdfcf9; font-family:inherit; font-size:.95rem; color:var(--ink); transition:.2s;
}
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--gold); background:#fff; }
.field textarea { min-height:140px; resize:vertical; line-height:1.8; }
.form-actions { text-align:center; margin-top:30px; }
.form-thanks { display:none; text-align:center; padding:20px; background:linear-gradient(160deg,#fffdf7,#f7edd6); border:1px solid var(--gold-lt); border-radius:8px; color:var(--gold-dk); font-family:var(--serif); }
.form-thanks.show { display:block; }
.hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-error { margin:0 0 18px; padding:12px 14px; border:1px solid #e3b9a0; background:#fff6f0; color:#9a4f2a; border-radius:6px; font-size:.86rem; line-height:1.7; }
.form-error[hidden] { display:none; }
.assurance { max-width:640px; margin:40px auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:640px){ .assurance{ grid-template-columns:1fr; } }
.assurance .a-card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:18px 16px; text-align:center; }
.assurance .a-card h5 { font-family:var(--serif); font-size:.95rem; color:var(--gold-dk); margin-bottom:6px; }
.assurance .a-card p { font-size:.82rem; color:var(--sub); line-height:1.7; }
.sns-row { margin-top:36px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.sns-btn { padding:12px 24px; border:1px solid var(--line); border-radius:999px; font-size:.86rem; color:var(--ink); background:#fff; transition:.2s; }
.sns-btn:hover { background:var(--cream); border-color:var(--gold); }

/* ============ legal.html ============ */
.legal-body { max-width:820px; margin:0 auto; }
.legal-body h3 { font-family:var(--serif); font-size:1.15rem; margin: 32px 0 14px; color:var(--ink); padding-bottom:8px; border-bottom:1px solid var(--line); letter-spacing:.04em; }
.legal-body p { font-size:.92rem; color:var(--sub); line-height:1.9; margin-bottom:14px; }
.legal-body table { width:100%; border-collapse:collapse; margin: 14px 0 20px; font-size:.9rem; }
.legal-body th, .legal-body td { text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.legal-body th { background:#fbf7ef; color:var(--ink); font-weight:500; width:30%; white-space:nowrap; }
.legal-body td { color:var(--sub); }

/* ============ 引用（テキストブロック） ============ */
.pullquote { max-width:720px; margin: 40px auto; padding: 28px 34px; background:linear-gradient(180deg,#fffdf7,#f7edd6); border:1px solid var(--gold-lt); border-radius:12px; text-align:center; }
.pullquote p { font-family:var(--serif); font-size:1.1rem; line-height:2; color:var(--ink); letter-spacing:.04em; }
.pullquote .from { display:block; margin-top:14px; font-size:.82rem; color:var(--sub); letter-spacing:.08em; font-family:'Noto Sans JP',sans-serif; }

/* ============ ダイエット導線（B案 コールアウト・C案 ANOTHER MENU） ============ */
.diet-callout { max-width:720px; margin:56px auto 0; padding:26px 30px; background:#fbf7ef; border:1px solid var(--line); border-left:3px solid var(--gold); border-radius:6px; }
.diet-callout-label { font-size:.78rem; letter-spacing:.08em; color:var(--gold-dk); font-family:'Cormorant Garamond',serif; font-style:italic; margin-bottom:12px; }
.diet-callout p { font-size:.94rem; color:var(--ink); line-height:1.9; letter-spacing:.02em; }
.diet-callout .btn-ghost { display:inline-block; }

.another-menu { padding: 60px 0 80px; background:transparent; }
.another-menu-inner { max-width:760px; margin:0 auto; padding:36px 40px; background:#fbf7ef; border:1px solid var(--line); border-top:2px solid var(--gold-lt); border-radius:10px; text-align:center; }
.another-menu-inner .en { font-family:'Cormorant Garamond',serif; font-style:italic; letter-spacing:.28em; font-size:.78rem; color:var(--gold-dk); margin-bottom:14px; }
.another-menu-inner h3 { font-family:var(--serif); font-size:1.25rem; font-weight:500; letter-spacing:.05em; color:var(--ink); margin-bottom:16px; }
.another-menu-inner p { font-size:.92rem; color:var(--sub); line-height:1.95; letter-spacing:.02em; max-width:600px; margin:0 auto; }
@media (max-width:640px){
  .another-menu-inner { padding:28px 22px; }
  .another-menu-inner h3 { font-size:1.1rem; }
}

/* フッターのダイエット案内（E案） */
footer.site .diet-footer-note { margin-top:22px; font-size:.76rem; color:#a99f8f; letter-spacing:.02em; }
footer.site .diet-footer-note a { color:var(--gold-lt); border-bottom:1px solid var(--gold-dk); padding-bottom:1px; }
footer.site .diet-footer-note a:hover { color:#fff; }

/* ============================================================
   v3.0 追加分（2026-08-04 面談の反映）
   ・ウェルネス定義文をトップへ／引き出し（ヨガ等）の明示
   ・使い方の例／料金の考え方／診断後のLINE導線
   ・「スッキリしすぎ」＝スマホで文字が続く問題への"息継ぎ"
   ============================================================ */

/* ---- ウェルネス定義文（トップ・里実さんの言葉） ---- */
.wellness-def { padding: 84px 0; background:
  radial-gradient(ellipse at center, rgba(229,212,168,.28), transparent 62%),
  linear-gradient(180deg,#fdfcf9,#fbf7ef); }
.wellness-def-inner { max-width: 720px; margin: 0 auto; text-align: center; }
.wellness-def .en { font-family:'Cormorant Garamond',serif; font-style:italic; letter-spacing:.34em; color:var(--gold-dk); font-size:.76rem; margin-bottom: 26px; }
.wellness-def .def { font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.18rem, 2.9vw, 1.72rem); line-height: 2.25; letter-spacing: .09em; color: var(--ink); }
.wellness-def .def em { font-style: normal; color: var(--gold-dk);
  background: linear-gradient(transparent 66%, var(--gold-lt) 0); padding: 0 3px; }
.wellness-def .def-note { margin-top: 22px; font-size: .86rem; color: var(--sub); letter-spacing: .04em; }

/* 糸モチーフの区切り線（ほどけた一本の糸のイメージ） */
.thread-rule { display:flex; align-items:center; justify-content:center; margin: 30px auto 0; }
.thread-rule span { display:block; width: 140px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold) 78%, transparent); position: relative; }
.thread-rule span::before, .thread-rule span::after { content:""; position:absolute; top:50%; width:5px; height:5px;
  border-radius:50%; background: var(--gold); transform: translateY(-50%); }
.thread-rule span::before { left: -2px; }
.thread-rule span::after { right: -2px; }

/* ---- 引き出し（ヨガ・呼吸・潜在意識…＝モチコミ系との差別化）※ヨガ哲学は8/24にカット ---- */
.toolbox { max-width: 820px; margin: 52px auto 0; padding: 34px 36px;
  background: linear-gradient(160deg,#fffdf7,#f7edd6); border: 1px solid var(--gold-lt); border-radius: 12px; box-shadow: var(--shadow); text-align: center; }
.toolbox-head { font-family: var(--serif); font-size: clamp(1.02rem, 2.2vw, 1.22rem); line-height: 1.85; letter-spacing: .05em; color: var(--ink); }
.toolbox-head em { font-style: normal; color: var(--gold-dk); }
.toolbox-chips { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.toolbox-chips span { font-size: .82rem; letter-spacing: .06em; color: var(--gold-dk);
  background: #fff; border: 1px solid var(--gold-lt); border-radius: 999px; padding: 7px 17px; }
.toolbox-note { margin-top: 24px; font-size: .9rem; color: var(--sub); line-height: 2; text-align: left; }
.story .toolbox { margin: 34px auto 30px; }
@media (max-width: 640px){
  .toolbox { padding: 26px 20px; }
  .toolbox-chips span { font-size: .76rem; padding: 6px 13px; }
  .toolbox-note { font-size: .86rem; }
}

/* ---- 息継ぎ（画像帯＋一行） ---- */
.breather { padding: 0 0 4px; background: transparent; }
.breather-img { max-width: 1120px; margin: 0 auto; aspect-ratio: 21/9; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); }
.breather-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.breather-copy { margin-top: 26px; text-align: center; font-family: var(--serif);
  font-size: clamp(1.05rem, 2.4vw, 1.3rem); letter-spacing: .08em; color: var(--sub); }
.breather-copy em { font-style: normal; color: var(--gold-dk);
  background: linear-gradient(transparent 68%, var(--gold-lt) 0); padding: 0 3px; }
@media (max-width: 640px){ .breather-img { aspect-ratio: 3/2; } }

/* ---- 診断カードの補足文 ---- */
.diag-card-note { margin-top: 22px; font-size: .86rem; color: var(--sub); line-height: 1.95; }

/* ---- 使い方の例（service：料金列挙をやめた代わり） ---- */
.usecases { background: linear-gradient(180deg,#fbf7ef,#fdfcf9); }
.usecase-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
@media (max-width: 900px){ .usecase-grid { grid-template-columns: 1fr; max-width: 620px; margin-inline: auto; } }
.usecase { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 30px 28px; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.usecase .uc-no { font-family:'Cormorant Garamond',serif; font-style: italic; letter-spacing: .2em; color: var(--gold-dk); font-size: .8rem; }
.usecase h4 { font-family: var(--serif); font-size: 1.08rem; line-height: 1.65; letter-spacing: .03em; margin: 12px 0 14px; }
.usecase p { font-size: .91rem; color: var(--sub); line-height: 1.95; flex: 1; }
.usecase .uc-tag { margin-top: 18px; align-self: flex-start; font-size: .74rem; letter-spacing: .06em;
  color: var(--gold-dk); background: #fbf5e9; border: 1px solid var(--gold-lt); border-radius: 999px; padding: 4px 13px; }

/* ---- 料金の考え方（フロントのみ掲載） ---- */
.fee-box { max-width: 820px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 16px; }
.fee-row { display: grid; grid-template-columns: 150px 1fr; gap: 0; background: #fff;
  border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
@media (max-width: 720px){ .fee-row { grid-template-columns: 1fr; } }
.fee-row .fee-label { display: flex; align-items: center; justify-content: center; text-align: center;
  background: #f6f1e8; color: var(--sub); font-family: var(--serif); font-size: .94rem; letter-spacing: .08em; padding: 18px 12px; }
.fee-row.free .fee-label { background: linear-gradient(160deg,#fffdf7,#f7edd6); color: var(--gold-dk); }
.fee-row .fee-body { padding: 26px 30px; }
.fee-row .fee-body h4 { font-family: var(--serif); font-size: 1.1rem; letter-spacing: .04em; margin-bottom: 10px; }
.fee-row .fee-body p { font-size: .92rem; color: var(--sub); line-height: 1.95; }
.fee-row .fee-body p + p { margin-top: 12px; }
.fee-row .fee-body b { color: var(--gold-dk); font-weight: 500; }
.fee-assure { padding-top: 12px; border-top: 1px dashed var(--line); }
/* 9/4：参考価格（60分10,000円）を1つだけ置く＝アンカリング */
.fee-price { font-family: var(--serif); font-size: 1.02rem; letter-spacing: .04em; white-space: nowrap; }
.stairs-note { max-width: 900px; margin: 24px auto 0; font-size: .84rem; color: var(--sub); text-align: center; }

/* ---- 診断結果のLINEオファー ---- */
.line-offer { margin-top: 30px; padding: 30px 28px; background: #fff;
  border: 1px solid var(--gold-lt); border-radius: 12px; text-align: center; }
.line-offer-label { font-family:'Cormorant Garamond',serif; font-style: italic; letter-spacing: .18em; color: var(--gold-dk); font-size: .8rem; }
.line-offer h4 { font-family: var(--serif); font-size: clamp(1.08rem, 2.4vw, 1.32rem); line-height: 1.75; letter-spacing: .04em; margin: 12px 0 14px; }
.line-offer p { font-size: .9rem; color: var(--sub); line-height: 1.95; }
.line-offer .actions { margin-top: 22px; }
.line-offer-note { margin-top: 16px; }

/* ---- about：所属の一行（モチコミはさらっと触れるだけ） ---- */
.profile .affiliation { font-size: .84rem; color: #bdb3a1; line-height: 1.9; }

/* ---- 流れ（STEP が5→6になっても崩れないように） ---- */
.flow .steps2 { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
@media (max-width: 900px){ .flow .steps2 { grid-template-columns: 1fr; } }

/* ---- スマホでの"息継ぎ"（8/4：文字が続きすぎる問題への対処） ---- */
@media (max-width: 640px){
  /* ブランド下のプロミスが折り返さないように */
  .brand small { letter-spacing: .14em; font-size: .54rem; }
  /* セクション間にゆとりを出す（9/4：削減で縦が1,500px縮んだので、一部を呼吸に戻す） */
  section { padding: 72px 0; }
  .wellness-def { padding: 74px 0; }
  /* 本文の行間を少し広げて読みやすく */
  .worry p, .type p, .voice p, .step p, .why-card p { line-height: 2; }
  .hero-lead, .reframe p, .finalcta p { line-height: 2.15; }
  /* カード間の余白 */
  .worry-grid, .voice-grid, .types .type-grid, .usecase-grid { gap: 20px; }
  .worry { padding: 26px 22px; }
  /* セクション見出しの前後に空気を入れる */
  h2.section-title { margin-bottom: 4px; }
  .divider { margin: 16px auto 22px; }
  /* ウェルネス定義文：1行が折り返さないサイズに落とす（中央揃えの崩れ防止） */
  .wellness-def .def { font-size: 1rem; letter-spacing: .03em; line-height: 2.35; }
  .wellness-def .def-note { font-size: .8rem; }
}

/* ============ ページ準備中の注記（diet.html 用） ============ */
.wip-notice { padding: 40px 0 20px; background:transparent; }
.wip-notice-inner { max-width:820px; margin:0 auto; padding:32px 36px; background:#fff8e6; border:2px dashed #d8ad4e; border-radius:12px; text-align:center; }
.wip-notice-tag { display:inline-block; font-size:.82rem; font-weight:600; letter-spacing:.08em; color:#8a4a00; background:#ffe6a8; padding:6px 16px; border-radius:999px; margin-bottom:18px; font-family:'Noto Sans JP',sans-serif; }
.wip-notice-title { font-family:var(--serif); font-weight:500; font-size:clamp(1.15rem, 2.4vw, 1.55rem); line-height:1.6; color:#5a3a00; margin-bottom:20px; letter-spacing:.03em; }
.wip-notice-title b { color:#8a4a00; }
.wip-notice-body { font-size:.92rem; color:#6b4a1a; line-height:1.95; letter-spacing:.02em; font-family:'Noto Sans JP',sans-serif; max-width:640px; margin:0 auto; }
.wip-notice-body b { color:#5a3a00; }
.sp-only { display:none; }
@media (max-width:640px){
  .wip-notice-inner { padding:24px 20px; }
  .sp-only { display:inline; }
}

/* ============================================================
   v4.0 追加分（2026-08-25 里実さんの回答・お写真の反映）
   ============================================================ */

/* ---- 2枚並びの写真（about：講師としての活動 など） ---- */
.photo-duo { max-width: 720px; margin: 40px auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.photo-duo figure { margin: 0; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); aspect-ratio: 3/4; }
.photo-duo img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 560px){ .photo-duo { gap: 10px; } }

/* ---- service：里実さんからのメッセージ（ウェルネスをベースにした話し方） ---- */
.stance { background: linear-gradient(180deg,#fdfcf9,#fbf7ef); }
.stance-inner { max-width: 820px; margin: 0 auto; }
.stance .en { font-family:'Cormorant Garamond',serif; font-style:italic; letter-spacing:.32em;
  color:var(--gold-dk); font-size:.76rem; text-align:center; }
.stance h2 { font-family: var(--serif); font-weight: 500; text-align: center; margin-top: 14px;
  font-size: clamp(1.3rem, 3vw, 1.85rem); line-height: 1.7; letter-spacing: .05em; }
.stance .sub { display:block; margin-top: 14px; text-align:center; font-family: var(--serif);
  font-size: clamp(.94rem, 2vw, 1.05rem); color: var(--gold-dk); letter-spacing: .06em; }
.stance p { margin-top: 24px; font-size: 1rem; line-height: 2.1; color: var(--ink); }
.stance p.lead-q { font-family: var(--serif); font-size: clamp(1.05rem,2.4vw,1.24rem);
  line-height: 2; letter-spacing: .04em; color: var(--gold-dk); text-align: center; }
/* 10/1：3つ→4つに変更したため 2×2 に */
.stance-points { margin: 34px auto 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 16px; max-width: 760px; }
@media (max-width: 820px){ .stance-points { grid-template-columns: 1fr; max-width: 520px; } }
.stance-point { background:#fff; border:1px solid var(--gold-lt); border-radius:12px;
  padding: 26px 17px; box-shadow: var(--shadow); }
/* 縦位置の写真は幅を絞る（横位置と同じ720pxだと画面を占有しすぎるため） */
.section-figure.portrait { max-width: 470px; }
/* 正方形に近い写真用（縦長ほど絞らなくてよい） */
.section-figure.square { max-width: 540px; }
.stance-point h4 { font-family: var(--serif); font-size: .96rem; letter-spacing:0;
  color: var(--gold-dk); margin-bottom: 10px; line-height: 1.6; }
.stance-point .sp-no { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--gold); margin-right: .5em; letter-spacing: .06em; }
.stance-point p { margin-top: 0; font-size: .9rem; color: var(--sub); line-height: 1.95; }
.stance-close { margin-top: 34px; padding-top: 26px; border-top: 1px dashed var(--line); }
.stance-sign { margin-top: 18px; text-align: right; font-family: var(--serif);
  font-size: .9rem; color: var(--sub); letter-spacing: .08em; }

/* ---- 手書きお礼状：実物を入れたので、余白を詰めて紙を大きく見せる ---- */
/* 3枚は紙の縦横比が少しずつ違うため、contain で全文を必ず収め、枠で高さを揃える */
.letter .img-wrap { aspect-ratio: 1/1.45; padding: 0; background: #fbf7ef; align-items: center; }
.letter .img-wrap img { width: 100%; height: 100%; object-fit: contain; border-radius: 4px; }

/* ============================================================
   v4.2 追加分（2026-09-01）
   日本語の折り返しを「スマホで読む人」基準に整える
   ・小書き仮名（ゃゅょっ）が行頭に来る禁則崩れを止める
   ・見出しだけ行長を揃える（本文にかけると行が短くなりすぎる）
   ・PC向けの改行はスマホで無効化、スマホ専用の改行を別に持たせる
   ============================================================ */

html { line-break: strict; }

/* 行の長さを揃える（＝最終行に1〜2語だけ残るのを防ぐ）。
   ※ PCでは「中央寄せの短い見出し・決め文」だけに限定する。
     行が広いPCで本文にかけると、語の途中でも割ってしまい かえって読みにくくなる。
   ※ h3 を一括指定しないこと。プロフィールの「里実 Satomi」のような短い見出しが
     わざわざ2行に割られてしまう */
h1, h2,
.section-title, .page-hero h1, .page-hero p.lead,
.reframe h2, .finalcta h2,
.wellness-def .def, .breather-copy, .types .root, .worry-note,
.stance h2, .stance .sub, .stance .lead-q, .toolbox-head,
.diag-card h3, .another-menu-inner h3, .wip-notice-title {
  text-wrap: balance;
}

/* 長い本文＝最終行の孤立だけ防ぐ */
p, li { text-wrap: pretty; }

/* 改行の出し分け。
   ・句点「。」のあとの改行は、スマホでも残す（文の切れ目なので消すと読みにくい）
   ・読点や語句の途中に入れた「PCで整えるための改行」だけ br-pc にして、スマホでは消す
   ・スマホでだけ入れたい改行は br-sp */
br.br-sp { display: none; }
@media (max-width: 640px){
  br.br-pc { display: none; }
  br.br-sp { display: inline; }
  /* 見出しは1行に入る文字数を稼ぐ */
  .hero h1 { font-size: 1.62rem; line-height: 1.85; letter-spacing: .01em; }
  /* 9/12：セクション見出しが「あなたは、ど／のタイプですか」のように
     意味の切れ目でない場所で割れていたため、少しだけ詰めて1行に収まる幅を稼ぐ */
  h2.section-title { font-size: 1.4rem; letter-spacing: .04em; }
  /* 診断ヒーローのイラスト：Q1が遠ざかりすぎないよう、少し小さく・余白も詰める */
  .hero-illust { max-width: 320px; margin: 22px auto 0; }
  .page-hero { padding-top: 88px; padding-bottom: 56px; }
  /* 9/12：下の見出しも、スマホでは1行に入る文字数が足りず
     「あなたのペースで、／大丈夫です。」のように途中で割れていたため少し詰める */
  .finalcta h2 { font-size: 1.42rem; letter-spacing: .03em; }
  .another-menu-inner h3 { font-size: 1.04rem; letter-spacing: .03em; }
  /* 「「安心して失敗できる場／所」です。」のように括弧の途中で割れていたので、
     左右の余白と字の大きさを少しだけ詰めて1行に収める */
  .pullquote { padding: 26px 20px; }
  .pullquote p { font-size: 1.02rem; letter-spacing: .02em; }
  /* 文中のリンクが「詳しく見／る」のように割れないようにする */
  .faq-item .a a, .fee-body a, .diet-footer-note a { white-space: nowrap; }
  .page-hero h1 { letter-spacing: .04em; }
  .reframe h2 { font-size: 1.32rem; }
  .reframe .big { font-size: 1.3rem; }
  /* 9/12：本文への text-wrap:balance は外した。
     balance は「全行の長さを揃える」ため、段落によっては右端が 100px 以上も余り
     （段落幅345pxに対して最大121px＝3割が空白）、しかも余り方が段落ごとにバラバラで、
     スマホで読むと右side が中途半端に空いて見えていた（吉田さん指摘・実測で確認）。
     本文は下の text-wrap:pretty（最終行の孤立だけ防ぐ）に任せ、行は右端まで詰める。
     ※見出しだけは balance を残す。外すと「1行目は詰まって2行目が極端に短い」
       尻すぼみの割れ方になり、かえって不格好になるため（これも実測で確認）。 */
  h3, h4 {
    text-wrap: balance;
  }
}

/* ============================================================
   v6.0 追加分（2026-09-04）
   スマホで文字とカードが続く区間に、写真・糸・見せ方の変化をつくる
   ============================================================ */

.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---- ヒーロー：スマホでは写真を見出しの直後へ ---- */
.hero-copy { min-width:0; }
.hero-secondary { min-width:0; }

/* ---- 悩み：一本の糸で状態を先に見せる ---- */
.worry-line { display:block; width:70px; height:30px; margin:10px 0 16px; position:relative; opacity:.78; }
.worry-line::before,
.worry-line::after { content:""; position:absolute; border-color:var(--gold); }
.worry-knot .worry-line::before { left:1px; top:14px; width:68px; border-top:1.5px solid var(--gold); transform:rotate(-4deg); }
.worry-knot .worry-line::after { left:27px; top:4px; width:18px; height:18px; border:1.5px solid var(--gold); border-radius:50% 45% 50% 45%; transform:rotate(38deg); }
.worry-loop .worry-line::before { left:2px; top:14px; width:68px; border-top:1.5px solid var(--gold); }
.worry-loop .worry-line::after { left:22px; top:3px; width:23px; height:23px; border:1.5px solid var(--gold); border-radius:50%; }
.worry-pull .worry-line::before { left:0; top:15px; width:70px; border-top:1.5px solid var(--gold); transform:rotate(-8deg); }
.worry-pull .worry-line::after { right:0; top:8px; width:11px; height:11px; border-top:1.5px solid var(--gold); border-right:1.5px solid var(--gold); transform:rotate(45deg); }
.worry-rigid .worry-line::before { left:1px; top:5px; width:66px; height:20px; border-left:1.5px solid var(--gold); border-top:1.5px solid var(--gold); border-right:1.5px solid var(--gold); transform:skewX(-24deg); }
.worry-rigid .worry-line::after { left:1px; top:24px; width:68px; border-top:1.5px solid var(--gold); }

/* ---- リフレーム：足す／ほどくを1枚で理解する ---- */
.reframe-map { max-width:620px; margin:38px auto 4px; display:grid; gap:10px; }
.reframe-route { display:grid; grid-template-columns:86px 1fr; align-items:center; text-align:left; border:1px solid rgba(229,212,168,.24); border-radius:12px; padding:16px 20px; background:rgba(255,255,255,.04); }
.reframe-route .route-label { font-family:var(--serif); color:#c9bea9; letter-spacing:.12em; }
.reframe-route b { display:block; font-family:var(--serif); font-weight:500; color:#fff; letter-spacing:.04em; }
.reframe-route small { display:block; margin-top:3px; color:#c9bea9; font-size:.78rem; }
.reframe-route.route-add { opacity:.72; }
.reframe-route.route-add > div { position:relative; }
.reframe-route.route-add > div::after { content:""; position:absolute; left:0; right:0; top:50%; border-top:1px solid rgba(216,207,190,.55); transform:rotate(-2deg); }
.reframe-route.route-release { border-color:rgba(229,212,168,.58); background:rgba(229,212,168,.09); }
.reframe-route.route-release .route-label,
.reframe-route.route-release small { color:var(--gold-lt); }

/* ---- タイプ：デスクトップは一覧、スマホは選んで開く ---- */
.type-guide { display:none; }
.type-heading { position:relative; }
.type-line-icon { display:none; }
.type-toggle { display:none; }
.type-body { min-width:0; }

/* ---- 一本の糸でつながるステップ ---- */
.thread-timeline { position:relative; }
.thread-timeline::before { content:""; position:absolute; left:31px; top:23px; bottom:23px; width:1px; background:linear-gradient(var(--gold-lt),var(--gold),var(--gold-lt)); }
.thread-timeline .step { position:relative; border:0; box-shadow:none; background:transparent; padding:16px 0; grid-template-columns:64px 1fr; }
.thread-timeline .step .no { width:42px; height:42px; margin-left:10px; display:grid; place-items:center; color:var(--gold-dk); background:var(--ivory); border:1px solid var(--gold); border-radius:50%; font-size:1.35rem; position:relative; z-index:1; }
.thread-timeline .step h4 { padding-top:8px; }

/* ---- 選ばれる理由：枠を足さず、番号をシンボルに ---- */
.why-card .no { width:54px; height:54px; margin:0 auto; display:grid; place-items:center; border:1px solid var(--gold-lt); border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff,#f7edd6); box-shadow:0 10px 24px rgba(118,94,45,.08); }

/* ---- 横送り：次のカードを少し見せる ---- */
.rail-hint { display:none; }

/* ---- 利用の流れ：カード列を一本の道にする ---- */
.thread-flow { position:relative; }

/* ---- サービス：本文途中に置く人物写真 ---- */
.stance-figure { max-width:520px; margin:34px auto 38px; border-radius:52% 48% 12px 12px / 18% 18% 8px 8px; overflow:hidden; box-shadow:var(--shadow); position:relative; }
.stance-figure::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px rgba(229,212,168,.7); border-radius:inherit; pointer-events:none; }
.stance-figure img { width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center; }   /* 9/12：横長のイメージ写真に変更。縦は切れないので位置指定は中央でよい */
.compare.compare-flow { grid-template-columns:1fr 34px 1fr; gap:16px; align-items:center; }
.compare-bridge { justify-self:center; font-family:var(--serif); color:var(--gold-dk); letter-spacing:.08em; padding:2px 0; }
.timeline-photo { margin:18px 0 24px 86px; max-width:560px; border-radius:8px 48px 8px 8px; overflow:hidden; box-shadow:var(--shadow); position:relative; z-index:1; }
/* 9/12：元画像が縦長（933×1400）で顔は上から約9〜33%。
   16:8 の横長枠だと画像の33%しか映らず、位置を直しても「顔だけ」の窮屈な絵になったため、
   枠を 4:3 にして画像の50%（上5%〜55%）＝顔から胸元までが入るようにした。 */
.timeline-photo img { width:100%; aspect-ratio:4/3; object-fit:cover; object-position:center 10%; }

/* ---- 企業研修：3要素を一本の線でつなぐ ---- */
.program-thread { max-width:860px; margin:44px auto 6px; display:grid; grid-template-columns:1fr 46px 1fr 46px 1fr; align-items:center; }
.program-thread > div { min-height:150px; padding:24px 18px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background:#fff; border:1px solid var(--line); border-radius:12px; }
.program-thread > div.is-goal { background:linear-gradient(160deg,#fffdf7,#f7edd6); border-color:var(--gold-lt); box-shadow:var(--shadow); }
.program-thread span { font-family:'Cormorant Garamond',serif; font-style:italic; color:var(--gold-dk); font-size:.76rem; letter-spacing:.18em; }
.program-thread b { margin-top:8px; font-family:var(--serif); font-weight:500; letter-spacing:.04em; }
.program-thread small { margin-top:6px; color:var(--sub); font-size:.78rem; }
.program-thread i { display:block; height:1px; background:linear-gradient(90deg,var(--gold-lt),var(--gold)); position:relative; }
.program-thread i::after { content:""; position:absolute; right:0; top:50%; width:7px; height:7px; border-top:1px solid var(--gold); border-right:1px solid var(--gold); transform:translateY(-50%) rotate(45deg); }

/* ---- 診断結果のイラスト枠 ---- */
.result-visual { width:min(330px,82%); margin:22px auto 2px; overflow:hidden; }
.result-visual-frame { display:block; width:100%; aspect-ratio:1; background-image:url("../images/diagnosis_journey.png"); background-repeat:no-repeat; background-size:200% 200%; background-position:0 0; }
.quiz-result[data-result="calm"] .result-visual-frame { background-position:0 0; }
.quiz-result[data-result="low"] .result-visual-frame { background-position:100% 0; }
.quiz-result[data-result="mid"] .result-visual-frame { background-position:100% 100%; }
.quiz-result[data-result="high"] .result-visual-frame { background-position:0 100%; }

@media (max-width: 640px){
  /* ヒーローの読み順を、見出し → 写真 → 説明にする */
  .hero { min-height:auto; padding:64px 0 76px; }
  .hero-inner { display:grid; grid-template-columns:1fr; gap:0; }
  .hero-copy { display:contents; }
  .hero-primary { order:1; }
  /* 10/1：里実さんより「スマホだと顔の寄りが大きい」→ 全幅をやめて幅を絞り、縦長の枠で引きの画角に */
  .hero-visual { order:2; margin:30px auto 0; width:78%; aspect-ratio:4/5; border-radius:0 58px 0 0; border:0; padding:0; box-shadow:none; }
  .hero-visual img { object-position:center 12% !important; }
  .hero-secondary { order:3; padding-top:32px; }
  .hero-secondary .hero-lead { margin-top:0; }
  .hero-cta-row .btn-primary,
  .hero-cta-row .btn-ghost { width:100%; justify-content:center; }

  .worry-line { margin-top:7px; margin-bottom:13px; }

  .reframe-map { margin-top:30px; }
  .reframe-route { grid-template-columns:66px 1fr; padding:14px 16px; }

  .type-guide { display:block; margin:22px auto 0; text-align:center; color:var(--sub); font-size:.82rem; }
  .types .type-grid { margin-top:26px; gap:10px; }
  .types .type { padding:0; overflow:hidden; box-shadow:none; border-color:var(--gold-lt); }
  .type-heading { min-height:84px; padding:40px 52px 16px 18px; display:block; } /* 10/5：線のアイコンを外したので1列に */
  .type-heading .cat { position:absolute; left:18px; top:13px; font-size:.56rem; padding:2px 9px; }
  .type-heading h4 { margin:0; font-size:.98rem; line-height:1.65; }
  .type-line-icon { display:block; width:42px; height:34px; grid-column:1; position:relative; margin-top:14px; }
  .type-line-icon::before,
  .type-line-icon::after { content:""; position:absolute; border-color:var(--gold); }
  .icon-knot::before { left:1px; top:17px; width:40px; border-top:1.5px solid var(--gold); }
  .icon-knot::after { left:13px; top:7px; width:17px; height:17px; border:1.5px solid var(--gold); border-radius:50% 45% 50% 45%; transform:rotate(38deg); }
  .icon-loop::before { left:1px; top:17px; width:40px; border-top:1.5px solid var(--gold); }
  .icon-loop::after { left:11px; top:6px; width:21px; height:21px; border:1.5px solid var(--gold); border-radius:50%; }
  .icon-pull::before { left:1px; top:17px; width:39px; border-top:1.5px solid var(--gold); transform:rotate(-9deg); }
  .icon-pull::after { right:1px; top:10px; width:9px; height:9px; border-top:1.5px solid var(--gold); border-right:1.5px solid var(--gold); transform:rotate(45deg); }
  .icon-fold::before { left:2px; top:8px; width:37px; height:18px; border-left:1.5px solid var(--gold); border-top:1.5px solid var(--gold); border-right:1.5px solid var(--gold); transform:skewX(-24deg); }
  .icon-fold::after { left:2px; top:25px; width:38px; border-top:1.5px solid var(--gold); }
  .icon-wander::before { left:1px; top:15px; width:39px; height:12px; border-top:1.5px solid var(--gold); border-radius:50%; transform:rotate(-9deg); }
  .icon-wander::after { right:2px; top:10px; width:6px; height:6px; border:1.5px solid var(--gold); border-radius:50%; }
  .type-toggle { display:block; position:absolute; right:8px; top:50%; transform:translateY(-50%); width:42px; height:42px; background:transparent; border:0; border-radius:50%; cursor:pointer; }
  .type-toggle:focus-visible { outline:2px solid var(--gold-dk); outline-offset:2px; }
  .toggle-mark::before,
  .toggle-mark::after { content:""; position:absolute; left:14px; top:20px; width:14px; border-top:1.5px solid var(--gold-dk); transition:transform .2s; }
  .toggle-mark::after { transform:rotate(90deg); }
  .type-toggle[aria-expanded="true"] .toggle-mark::after { transform:rotate(0); }
  .type-body { padding:0 20px 21px 18px; }
  .type-body p { margin-top:0; }
  [data-collapsible-types].is-collapsible .type-body[hidden] { display:none; }
  [data-collapsible-types].is-collapsible .type:has(.type-toggle[aria-expanded="true"]) { box-shadow:var(--shadow); background:#fffefa; }

  .thread-timeline { margin-top:34px; }
  .thread-timeline::before { left:24px; }
  .thread-timeline .step { grid-template-columns:50px 1fr; gap:14px; padding:11px 0; }
  .thread-timeline .step .no { width:38px; height:38px; margin-left:5px; font-size:1.15rem; }
  .thread-timeline .step h4 { padding-top:6px; font-size:1rem; }

  .rail-hint { display:flex; justify-content:space-between; align-items:center; margin:24px 0 0; color:var(--sub); font-size:.74rem; letter-spacing:.04em; }
  .rail-hint b { font-family:'Cormorant Garamond',serif; font-weight:500; color:var(--gold-dk); letter-spacing:.14em; }
  .mobile-rail,
  .voice-grid.mobile-rail,
  .usecase-grid.mobile-rail { display:flex; width:calc(100% + 8vw); margin:18px 0 0 -4vw; padding:0 4vw 16px; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-inline:contain; }
  .mobile-rail::-webkit-scrollbar { display:none; }
  .mobile-rail > * { flex:0 0 calc(100% - 48px); scroll-snap-align:start; }

  .thread-flow { display:block !important; margin-top:38px !important; padding-left:14px; }
  .thread-flow::before { content:""; position:absolute; left:31px; top:10px; bottom:10px; width:1px; background:linear-gradient(var(--gold-lt),var(--gold),var(--gold-lt)); }
  .thread-flow .flowstep { position:relative; margin:0 0 8px 42px; padding:15px 8px 20px 18px; border:0; border-radius:0; box-shadow:none; background:transparent; }
  .thread-flow .flowstep::before { content:""; position:absolute; left:-34px; top:20px; width:13px; height:13px; background:var(--ivory); border:1px solid var(--gold); border-radius:50%; }
  .thread-flow .flowstep .no { margin:0 0 4px; }
  .thread-flow .flowstep h4 { margin:4px 0 7px; }

  .stance-figure { margin:30px -4.35vw 34px; max-width:none; border-radius:0 54px 0 0; box-shadow:none; }
  .stance-figure img { aspect-ratio:5/4; }

  .compare-bridge { transform:rotate(90deg); margin:-2px 0; }
  .compare.compare-flow { grid-template-columns:1fr; gap:14px; }

  .timeline-photo { margin:13px -4.35vw 22px 50px; border-radius:8px 0 0 48px; box-shadow:none; }
  .timeline-photo img { aspect-ratio:4/3; object-position:center 10%; }   /* 9/12：同上 */

  .program-thread { grid-template-columns:1fr; gap:0; margin-top:34px; }
  .program-thread > div { min-height:116px; }
  .program-thread i { width:1px; height:28px; margin:0 auto; background:linear-gradient(var(--gold-lt),var(--gold)); }
  .program-thread i::after { right:auto; left:50%; top:auto; bottom:0; transform:translateX(-50%) rotate(135deg); }

  .stairs { position:relative; margin-top:40px; }
  .stairs::before { content:""; position:absolute; left:18px; top:12px; bottom:12px; width:1px; background:linear-gradient(var(--gold-lt),var(--gold),var(--gold-lt)); }
  .stair { grid-template-columns:38px 1fr; gap:14px; margin-bottom:8px; position:relative; }
  .stair .step-no { width:34px; height:34px; align-self:start; border-radius:50%; position:relative; z-index:1; background:var(--ivory); font-size:1rem; }
  .stair .step-body { padding:15px 4px 20px 8px; border:0; box-shadow:none; background:transparent; }
  .stair.hi .step-body { background:linear-gradient(90deg,rgba(229,212,168,.22),transparent); border:0; border-radius:8px; padding-left:14px; }

  .result-visual { margin-top:18px; }
}

@media (prefers-reduced-motion: reduce){
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

/* 文末のひとまとまりを行またぎさせない（js/main.js の preventOrphanTail が付与） */
.nb { display: inline-block; }