@charset "UTF-8";
/* ============================================================
   L'Aube 症状診断ページ（チャット型）／ shindan.css
   2026-08-28 作成（Phantom）

   スワイプ＝ふくの木整体院の診断ページ
   https://fukunoki.ad-lp.com/chat_direct_yoyakutest/
   実測値：本文15px／行間1.70／最大幅480px（スマホ前提）／Noto Sans JP
   色はL'Aubeの実測パレットへ翻訳（緑→紺 #115190）

   🔴 このサイトは html{font-size:62.5%} ＝ 1rem = 10px。
      16px前提で rem を書くと文字が10pxで出る（2026-08-28に実際に踏んだ）
   🔴 すべて body.shindan-c にスコープ。他ページに1pxも効かせない
   ============================================================ */

body.shindan-c {
  --sd-navy: #115190;
  --sd-red: #be1e1e;
  --sd-line: #aab8da;
  --sd-pale: #ebf4ff;
  --sd-cream: #faf8ed;
  --sd-ink: #435b5b;
  --sd-mute: #566565;
  --sd-white: #fff;
  --sd-talk: #dce6f1;      /* トークの背景（スワイプの実測値） */
  --sd-maxw: 480px;        /* スワイプの実測値。スマホ前提の幅 */
  --sd-radius: 14px;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  color: var(--sd-ink);
}

body.shindan-c .sd-wrap {
  max-width: var(--sd-maxw);
  margin-left: auto; margin-right: auto;
  padding-left: 14px; padding-right: 14px;   /* 🔴 ショートハンドで書かない */
}

/* ---- トーク画面の見出し（スワイプの型） ---- */
body.shindan-c .sd-bar { background: var(--sd-navy); color: var(--sd-white); }
body.shindan-c .sd-bar__in {
  display: flex; align-items: center; gap: 10px;
  padding-top: 10px; padding-bottom: 10px;
}
body.shindan-c .sd-bar img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto;
}
body.shindan-c .sd-bar b { font-size: 1.5rem; font-weight: 700; display: block; line-height: 1.4; }
body.shindan-c .sd-bar span { font-size: 1.1rem; opacity: .9; display: block; line-height: 1.4; }
body.shindan-c .sd-bar span::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: #6ee787; margin-right: 5px; vertical-align: middle;
}

/* ---- 進捗 ---- */
body.shindan-c .sd-prog { background: var(--sd-white); border-bottom: 1px solid var(--sd-line); }
body.shindan-c .sd-prog__in {
  display: flex; align-items: center; gap: 10px;
  padding-top: 10px; padding-bottom: 10px;
}
body.shindan-c .sd-prog__label { font-size: 1.2rem; color: var(--sd-navy); font-weight: 700; white-space: nowrap; }
/* 🔴 min-height は消さない（2026-09-12）。ドット5個はJSが後から差し込むので、
   高さを先に確保しないと最初の描画のあとに行が6px伸び、進捗バーと本文が3px下へ飛ぶ。
   実測 CLS 0.051（PC）。この1行で 0 になる。値は .sd-dots i の height と同じにする。 */
body.shindan-c .sd-dots { display: flex; gap: 6px; min-height: 22px; }
body.shindan-c .sd-dots i {
  width: 22px; height: 22px; border-radius: 50%; background: var(--sd-line);
  color: var(--sd-white); font-size: 1.1rem; font-style: normal; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
body.shindan-c .sd-dots i.on { background: var(--sd-navy); }
body.shindan-c .sd-prog__bar { flex: 1 1 auto; min-width: 0; height: 3px; background: var(--sd-line); position: relative; border-radius: 2px; }
body.shindan-c .sd-prog__bar span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--sd-navy); border-radius: 2px; transition: width .32s ease; }

/* ---- トーク本体 ---- */
body.shindan-c .sd-talk { background: var(--sd-talk); min-height: 60vh; }
body.shindan-c .sd-talk__in { padding-top: 18px; padding-bottom: 28px; }

body.shindan-c .sd-row { display: flex; gap: 8px; margin: 0 0 14px; align-items: flex-start; }
body.shindan-c .sd-row img.sd-ico { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
body.shindan-c .sd-row__body { min-width: 0; flex: 1 1 auto; }
body.shindan-c .sd-name { font-size: 1.1rem; color: var(--sd-mute); margin: 0 0 4px; }
body.shindan-c .sd-bub {
  background: var(--sd-white); border-radius: var(--sd-radius);
  padding: 13px 15px; margin: 0 0 8px;
  font-size: 1.5rem; line-height: 1.70;   /* スワイプの実測値 */
}
body.shindan-c .sd-bub:last-child { margin-bottom: 0; }
body.shindan-c .sd-bub p { margin: 0 0 .7em; }
body.shindan-c .sd-bub p:last-child { margin-bottom: 0; }
body.shindan-c .sd-bub b { font-weight: 700; }
body.shindan-c .sd-bub mark { background: linear-gradient(transparent 60%, #fff263 60%); color: inherit; }

/* 自分の発言（既読つき・右寄せ） */
body.shindan-c .sd-me { display: flex; justify-content: flex-end; align-items: flex-end; gap: 6px; margin: 0 0 14px; }
body.shindan-c .sd-me__read { font-size: 1rem; color: var(--sd-mute); white-space: nowrap; }
body.shindan-c .sd-me__bub {
  background: var(--sd-navy); color: var(--sd-white);
  border-radius: var(--sd-radius); padding: 11px 14px;
  font-size: 1.4rem; line-height: 1.7; max-width: 78%;
}

/* 選択肢 */
body.shindan-c .sd-opts { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
body.shindan-c .sd-opts button {
  width: 100%; text-align: left; font-family: inherit;
  font-size: 1.5rem; line-height: 1.6; color: var(--sd-ink);
  background: var(--sd-white); border: 2px solid var(--sd-line);
  border-radius: var(--sd-radius); padding: 13px 15px; cursor: pointer;
  min-height: 52px; transition: border-color .18s ease, background .18s ease;
  display: flex; align-items: center; gap: 10px;
}
body.shindan-c .sd-opts button:hover { border-color: var(--sd-navy); background: var(--sd-pale); }
body.shindan-c .sd-opts button.picked { border-color: var(--sd-navy); background: var(--sd-pale); }
body.shindan-c .sd-opts button:focus-visible { outline: 3px solid var(--sd-red); outline-offset: 2px; }
body.shindan-c .sd-opts .em { font-size: 1.8rem; line-height: 1; flex: 0 0 auto; }
body.shindan-c .sd-opts .chk {
  width: 20px; height: 20px; border: 2px solid var(--sd-line); border-radius: 5px; flex: 0 0 auto;
}
body.shindan-c .sd-opts button.picked .chk { background: var(--sd-navy); border-color: var(--sd-navy); }

body.shindan-c .sd-next {
  width: 100%; margin-top: 12px; min-height: 54px; border: none; cursor: pointer;
  border-radius: var(--sd-radius); background: var(--sd-navy); color: var(--sd-white);
  font-family: inherit; font-size: 1.6rem; font-weight: 700; letter-spacing: .04em;
}
body.shindan-c .sd-next[disabled] { background: #b6c2c2; cursor: not-allowed; }
body.shindan-c .sd-back { margin-top: 12px; text-align: center; }
body.shindan-c .sd-back button {
  font-family: inherit; font-size: 1.3rem; color: var(--sd-mute);
  background: none; border: none; cursor: pointer; text-decoration: underline; padding: 8px 0;
}

/* ---- 結果 ---- */
body.shindan-c .sd-res { background: var(--sd-white); }
body.shindan-c .sd-res__in { padding-top: 26px; padding-bottom: 26px; }
body.shindan-c .sd-res__eye { font-size: 1.2rem; color: var(--sd-mute); margin: 0 0 6px; letter-spacing: .06em; }
body.shindan-c .sd-res__type {
  font-size: 2.4rem; line-height: 1.5; color: var(--sd-navy); font-weight: 700;
  margin: 0 0 16px; padding-bottom: 12px; border-bottom: 3px solid var(--sd-line);
  line-break: strict;
}
body.shindan-c .sd-res__body p { font-size: 1.5rem; line-height: 1.9; margin: 0 0 1.2em; }
body.shindan-c .sd-think { background: var(--sd-pale); border-radius: var(--sd-radius); padding: 16px 15px; margin: 20px 0; }
body.shindan-c .sd-think h3 { font-size: 1.6rem; color: var(--sd-navy); margin: 0 0 8px; font-weight: 700; }
body.shindan-c .sd-think p { font-size: 1.5rem; line-height: 1.9; margin: 0; }

/* 願望チェック（スワイプの自己選別の型） */
body.shindan-c .sd-wish { border: 2px solid var(--sd-navy); border-radius: var(--sd-radius); padding: 18px 16px; margin: 24px 0; }
body.shindan-c .sd-wish p.lead { font-size: 1.5rem; line-height: 1.8; margin: 0 0 12px; font-weight: 700; }
body.shindan-c .sd-wish ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
body.shindan-c .sd-wish li { position: relative; padding-left: 30px; font-size: 1.5rem; line-height: 1.7; }
body.shindan-c .sd-wish li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 19px; height: 19px;
  border-radius: 5px; background: var(--sd-navy);
  clip-path: polygon(22% 52%, 40% 70%, 78% 30%, 86% 40%, 40% 86%, 14% 60%);
}

/* 予約導線 */
body.shindan-c .sd-cta { margin: 22px 0 0; }
body.shindan-c .sd-cta__where { font-size: 1.5rem; line-height: 1.8; margin: 0 0 14px; }
body.shindan-c .sd-cta__btns { display: grid; gap: 10px; }
body.shindan-c .sd-cta__btns a {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 58px; border-radius: var(--sd-radius); text-decoration: none;
  font-weight: 700; line-height: 1.4; letter-spacing: .03em;
}
body.shindan-c .sd-cta__btns a.pri { background: var(--sd-navy); color: var(--sd-white); font-size: 1.6rem; }
body.shindan-c .sd-cta__btns a.line { background: #06c755; color: var(--sd-white); font-size: 1.8rem; }
body.shindan-c .sd-cta__btns a.gho { border: 2px solid var(--sd-navy); color: var(--sd-navy); background: var(--sd-white); font-size: 1.6rem; }
body.shindan-c .sd-cta__note { font-size: 1.3rem; line-height: 1.8; color: var(--sd-mute); margin: 12px 0 0; }

body.shindan-c .sd-again { margin-top: 24px; text-align: center; }
body.shindan-c .sd-again button {
  font-family: inherit; font-size: 1.3rem; color: var(--sd-mute);
  background: none; border: none; cursor: pointer; text-decoration: underline; padding: 8px 0;
}

/* 声・FAQ・注意 */
body.shindan-c .sd-sec { background: var(--sd-cream); }
body.shindan-c .sd-sec__in { padding-top: 26px; padding-bottom: 26px; }
body.shindan-c .sd-sec h2 { font-size: 1.9rem; color: var(--sd-navy); margin: 0 0 16px; text-align: center; font-weight: 700; line-break: strict; }
body.shindan-c .sd-voices { display: grid; gap: 14px; }
body.shindan-c .sd-voices img { width: 100%; border-radius: var(--sd-radius); border: 1px solid var(--sd-line); }
body.shindan-c .sd-faq { display: grid; gap: 8px; }
body.shindan-c .sd-faq details {
  background: var(--sd-white); border: 1px solid var(--sd-line); border-radius: var(--sd-radius);
}
body.shindan-c .sd-faq summary {
  cursor: pointer; padding: 14px 15px; font-size: 1.5rem; line-height: 1.6;
  font-weight: 700; color: var(--sd-navy); list-style: none;
}
body.shindan-c .sd-faq summary::-webkit-details-marker { display: none; }
body.shindan-c .sd-faq summary::after { content: "＋"; float: right; color: var(--sd-line); }
body.shindan-c .sd-faq details[open] summary::after { content: "－"; }
body.shindan-c .sd-faq p { margin: 0; padding: 0 15px 15px; font-size: 1.5rem; line-height: 1.85; }

body.shindan-c .sd-caution { border-top: 1px solid var(--sd-line); padding-top: 18px; margin-top: 24px; }
body.shindan-c .sd-caution p { font-size: 1.3rem; line-height: 1.85; color: var(--sd-mute); margin: 0 0 8px; }
body.shindan-c .sd-caution p:last-child { margin-bottom: 0; }

body.shindan-c [hidden] { display: none !important; }
body.shindan-c .sd-fade { animation: sdFade .3s ease both; }
@keyframes sdFade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  body.shindan-c .sd-fade { animation: none; }
  body.shindan-c .sd-prog__bar span { transition: none; }
}

/* ページの主題を示す見出し（h1）。トーク画面に入る前の1行 */
body.shindan-c .sd-lead { background: var(--sd-white); border-bottom: 1px solid var(--sd-line); }
body.shindan-c .sd-lead .sd-wrap { padding-top: 20px; padding-bottom: 18px; }
body.shindan-c .sd-lead h1 {
  font-size: 2rem; line-height: 1.55; color: var(--sd-navy);
  margin: 0 0 8px; font-weight: 700; line-break: strict;
}
body.shindan-c .sd-lead p { font-size: 1.3rem; line-height: 1.8; color: var(--sd-mute); margin: 0; }

/* 既存のグローバルナビとの同居（トップと同じ理由・実測値）
   .c-topbar は fixed(PC)/absolute(SP) でヘッダーの高さが0px。
   ロゴ（垂れ下がる旗・159px）がトークバーに被るため、その分だけ下げる */
body.shindan-c { padding-top: 128px; }  /* 2026-09-04 ヘッダー2段組みの実高に合わせた */
@media screen and (max-width: 56em) {
  body.shindan-c { padding-top: 39px; }
}