/* 診断画面のデザイン（見本 mock/diagnosis.html どおり）。index.html の <html class="nd"> で常に効く。
   index.html の中の古い見た目（2026年9月までのデザイン）の上に重ねている。
   色・文字は assets/app.css のデザイントークンと同じ値。ダークモードは使わない。シェア画像（深緑×金）は変えない。 */

html.nd:root, html.nd:root:not([data-theme="light"]) {
  color-scheme: light;
  --paper: #FAFAF7; --paper-panel: #FFFFFF; --grid: transparent;
  --ink: #2B2F33; --ink-muted: #6B6F76; --accent: #1F7F73; --accent-soft: #E6F4F1;
  --amber: #B4561B; --amber-soft: #FDF1E7; --border: #E7E5E0;
  --nd-main: #1F7F73; --nd-main-dark: #186A60; --nd-line: #E7E5E0; --nd-radius: 14px; --nd-radius-sm: 10px;
  --nd-shadow: 0 1px 2px rgba(43,47,51,.04), 0 4px 16px rgba(43,47,51,.05);
}
html.nd body { background: #FAFAF7; font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Sans', sans-serif; font-size: 16px; }
html.nd .nd-only { display: block; }
html:not(.nd) .nd-only { display: none !important; }
html.nd .old-only { display: none !important; }

/* 上の帯 */
.nd-topbar { background: #fff; border-bottom: 1px solid #E7E5E0; }
.nd-topbar div { max-width: 720px; margin: 0 auto; padding: 12px 20px; font-weight: 700; font-size: 17px; color: #2B2F33; display: flex; align-items: center; gap: 8px; }
.nd-topbar img { width: 30px; height: 30px; border-radius: 7px; }
.nd-topbar small { font-weight: 500; color: #6B6F76; font-size: 13px; margin-left: 6px; }
.nd-mypage { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #1F7F73; text-decoration: none; padding: 6px 12px; border: 1px solid #BFE0D9; border-radius: 999px; background: #fff; }
.nd-mypage[hidden] { display: none; }
.nd-topbar div { white-space: nowrap; }
.nd-mypage { flex: none; }
.nd-mypage.nd-mm + .nd-mypage { margin-left: 6px; } /* みんマドとマイページが並ぶとき */
.nd-mypage[hidden] { display: none; }
@media (max-width: 420px) { .nd-topbar div.has-mypage small { display: none; } }
.nd-unread { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #B4561B; color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
.nd-unread[hidden] { display: none; }
html.nd .wrap { padding-top: 20px; }

/* 枠（入力画面はカード、結果画面は枠なしでセクションごとのカードに） */
html.nd .frame { border: 1px solid #E7E5E0; border-radius: 14px; box-shadow: var(--nd-shadow); padding: 28px 22px 26px; background: #fff; }
html.nd .frame.showing-result { background: none; border: none; box-shadow: none; padding: 0; }
html.nd .corner { display: none; }
html.nd .kicker { color: var(--nd-main); font-size: 14px; }
html.nd .beta { background: #F4A261; border-radius: 999px; padding: 0 8px; }
html.nd h1 { font-size: 26px; font-weight: 700; line-height: 1.4; word-break: auto-phrase; }
html.nd .lead { font-size: 15px; margin-bottom: 22px; }
html.nd .drop { border: 2px dashed #CFCCC4; border-radius: 14px; background: #fff; padding: 32px 20px; }
html.nd .drop svg { stroke: var(--nd-main); }
html.nd .drop:hover, html.nd .drop.drag { background: #E6F4F1; border-color: var(--nd-main); }
html.nd .preview-box, html.nd .preview-grid figure, html.nd .pdf-pick { border-radius: 10px; }
html.nd .toggle-row { border-top: none; margin-top: 18px; padding: 14px 16px; border: 1px solid #E7E5E0; border-radius: 10px; background: #fff; }
html.nd select, html.nd input[type="text"], html.nd input[type="number"], html.nd textarea { background-color: #fff; border: 1px solid #D5D3CD; border-radius: 10px; min-height: 48px; font-size: 16px; }
html.nd textarea { min-height: 88px; }
html.nd select:focus, html.nd input:focus, html.nd textarea:focus { outline: 3px solid rgba(31,127,115,.25); border-color: var(--nd-main); }
html.nd .btn { border-radius: 10px; min-height: 52px; background: var(--nd-main); color: #fff; font-weight: 700; }
html.nd .btn:hover { opacity: 1; background: var(--nd-main-dark); }
html.nd .btn.secondary { background: #fff; color: var(--nd-main); border: 1px solid var(--nd-main); }
html.nd .btn.secondary:hover { background: #E6F4F1; }
html.nd .hint { font-size: 13px; }
html.nd .loading .path { stroke: var(--nd-main); }

/* ===== 結果画面 ===== */
.nd-result { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
.nd-result > * { min-width: 0; }
.nd-card { background: #fff; border: 1px solid #E7E5E0; border-radius: 14px; box-shadow: var(--nd-shadow); padding: 22px 20px; }
.nd-card.center { text-align: center; }
.nd-section-title { font-size: 18px; font-weight: 700; margin: 0 0 12px; line-height: 1.4; word-break: auto-phrase; }
.nd-muted { color: #6B6F76; }
.nd-small { font-size: 14px; }
.nd-xs { font-size: 13px; }
.nd-kicker { font-size: 14px; color: #6B6F76; margin: 0 0 6px; }
.nd-type { font-size: 27px; font-weight: 700; line-height: 1.35; margin: 0 0 12px; word-break: auto-phrase; }
.nd-catch { display: inline-block; background: #FDF1E7; color: #B4561B; border-radius: 12px; padding: 10px 14px; font-weight: 700; font-size: 16px; line-height: 1.6; margin: 0 0 14px; word-break: auto-phrase; }
.nd-scoreline { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 4px 0 2px; }
.nd-score { display: flex; align-items: baseline; gap: 4px; }
.nd-score b { font-size: 44px; line-height: 1; color: var(--nd-main); }
.nd-rank { font-weight: 700; color: var(--nd-main); border: 2px solid var(--nd-main); border-radius: 999px; padding: 2px 12px; font-size: 14px; }
.nd-legend { font-size: 12px; color: #6B6F76; margin: 4px 0 0; }
.nd-legend-sub { font-size: 11px; color: #8A8D93; margin: 2px 0 0; }
.nd-legend-q { font: inherit; font-size: 11px; font-weight: 700; width: 18px; height: 18px; line-height: 16px; margin-left: 6px; padding: 0; border: 1px solid #C9C7C1; border-radius: 50%; background: #fff; color: #6B6F76; cursor: pointer; vertical-align: 1px; }
/* 「上位○%」（本物の分布から）。得意なところを自慢できるように、点数より目立たせる */
.nd-rare { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; }
.nd-rare-main { background: #E6F4F1; color: #1F7F73; border-radius: 999px; padding: 8px 16px; font-size: 15px; font-weight: 700; }
.nd-rare-main b { font-size: 18px; }
.nd-rare-sub { border: 1px solid #CDE8E2; color: #1F7F73; border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 700; }
.nd-rare-note { font-size: 11.5px; color: #6B6F76; margin: 6px 0 0; }
.nd-top { font-size: 12px; font-weight: 700; color: #1F7F73; background: #E6F4F1; border-radius: 999px; padding: 3px 9px; }
html.nd .radar-wrap svg { max-width: 300px; }
html.nd .radar-grid { stroke: #E7E5E0; }
html.nd .radar-area { fill: #1F7F73; fill-opacity: .15; stroke: #1F7F73; }
html.nd .radar-label { fill: #6B6F76; font-family: 'Noto Sans JP', sans-serif; font-size: 12px; }
.nd-share-now { border-top: 1px solid #E7E5E0; padding-top: 16px; margin-top: 8px; }
.nd-share-now p { margin: 0 0 10px; font-weight: 700; font-size: 15px; }
.nd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nd-two .btn { margin-top: 0; padding-left: 8px; padding-right: 8px; white-space: nowrap; }
html.nd .btn.btn-x { background: #0F1419; color: #fff; border: none; }
html.nd .btn.btn-x:hover { background: #272C30; }
html.nd .btn.btn-line { background: #06C755; color: #fff; border: none; }
html.nd .btn.btn-line:hover { background: #05B34C; }
html.nd .btn.btn-ig { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); color: #fff; border: none; }
html.nd .btn.btn-ig:hover { filter: brightness(0.95); }
.brand-logo { width: 18px; height: 18px; fill: currentColor; flex: none; }
.nd-reason { text-align: left; font-size: 15px; margin: 16px 0 0; }
html.nd .reading { border-radius: 10px; border-color: #E7E5E0; }
/* ラベルを上、文を下に（スマホで文を横幅いっぱい使い、書き出しの位置もそろう） */
.nd-traits { display: grid; gap: 14px; }
.nd-trait { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.nd-trait p { margin: 0; font-weight: 700; line-height: 1.55; }
.nd-badge { display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; line-height: 1; padding: 6px 10px; border-radius: 999px; white-space: nowrap; flex: none; }
.nd-trait .nd-badge { font-size: 12px; padding: 4px 10px; }
.nd-badge.main { background: #E6F4F1; color: #1F7F73; }
.nd-badge.accent { background: #FDF1E7; color: #B4561B; }
.nd-badge.gray { background: #F1F0EC; color: #6B6F76; }
.nd-scene { border-left: 3px solid #1F7F73; padding: 4px 0 4px 14px; margin-top: 16px; font-size: 14px; line-height: 1.8; }
.nd-scene b { display: block; font-size: 13px; color: #1F7F73; }
.nd-cat + .nd-cat { margin-top: 14px; padding-top: 14px; border-top: 1px solid #EFEDE8; }
.nd-cat-row { display: flex; align-items: center; gap: 8px; }
.nd-cat-row .sp { flex: 1; }
.nd-cat-score { font-weight: 700; font-size: 18px; }
.nd-cat-score small { font-size: 13px; color: #6B6F76; margin-left: 2px; font-weight: 500; }
.nd-bar { height: 8px; background: #EFEEE9; border-radius: 4px; overflow: hidden; margin: 8px 0 10px; }
.nd-bar i { display: block; height: 100%; background: #8CC4BB; border-radius: 4px; }
.nd-cat.best .nd-bar i { background: #1F7F73; }
.nd-cat-one { font-weight: 700; margin: 0 0 4px; }
.nd-cat p.nd-muted { margin: 0; font-size: 14px; }
.nd-list { display: grid; gap: 12px; }
.nd-insight + .nd-insight { margin-top: 14px; padding-top: 14px; border-top: 1px solid #EFEDE8; }
.nd-insight b { display: block; margin-bottom: 4px; line-height: 1.55; }
.nd-insight p { margin: 0; font-size: 14px; color: #6B6F76; }
.nd-lens { display: inline-block; font-size: 11px; font-weight: 700; color: #6B6F76; background: #F1F0EC; border-radius: 4px; padding: 1px 6px; margin-right: 6px; vertical-align: 2px; }
.nd-idea-how { margin: 6px 0 0; font-size: 13.5px; color: #6B6F76; line-height: 1.6; }
.nd-idea-effect { margin: 6px 0 0; font-size: 14.5px; font-weight: 700; color: #1F7F73; line-height: 1.6; }
.nd-idea-effect::before { content: '→ '; }
.nd-idea-head { display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 4px; }
.nd-idea-head b { line-height: 1.55; }
.nd-idea-head .nd-badge { font-size: 11.5px; padding: 4px 9px; }
.nd-idea-row { display: grid; grid-template-columns: 5.5em 1fr; gap: 8px; font-size: 14px; margin-top: 8px; }
.nd-idea-row b { color: #6B6F76; }
.nd-idea-row.after b, .nd-idea-row.after span { color: #1F7F73; font-weight: 700; }
.nd-note { font-size: 13px; color: #6B6F76; margin: -4px 0 0; }
html.nd .share-block { margin-top: 0; }
html.nd .share-block h3 { font-size: 18px; font-weight: 700; }
html.nd .share-strip img { border-radius: 8px; border-color: #E7E5E0; }
.nd-big { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 420px; margin: 0 auto; }
.nd-big .btn { margin-top: 0; min-height: 56px; font-size: 18px; }
.nd-char-share { margin: 12px 0 0; text-align: right; }
.nd-char-share button { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 700; color: #2B2F33; background: none; border: none; padding: 6px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(43,47,51,.3); }
.nd-char-share .brand-logo { width: 14px; height: 14px; }
/* X・スレッズの投稿文：ノリのボタン（いつも見える）→ 投稿される文 → Xとスレッズのボタン */
.x-tpl { text-align: left; background: #F7F6F2; border-radius: 12px; padding: 12px; margin-top: 10px; }
.x-tpl-label { margin: 0 0 8px !important; font-size: 13px !important; font-weight: 700; color: #2B2F33 !important; }
.x-tpl-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.x-tpl-tabs button { font: inherit; font-size: 12.5px; font-weight: 700; padding: 6px 4px; min-height: 36px; border-radius: 999px; border: 1px solid #D5D3CD; background: #fff; color: #2B2F33; cursor: pointer; white-space: nowrap; }
/* ノリが4つ（「わたしのタイプ」が入る）ときは、1列に入りきらないので2つずつ2段に（2026-10-18） */
.x-tpl-tabs:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.x-tpl-tabs button[aria-checked="true"] { background: #0F1419; border-color: #0F1419; color: #fff; }
.x-tpl .share-grid { margin-top: 10px; }
.x-tpl-note { margin: 8px 0 0 !important; font-size: 12px !important; color: #1F7F73 !important; font-weight: 700; }
.x-tpl-preview { margin: 10px 0 0 !important; padding: 10px 12px; background: #fff; border: 1px solid #E7E5E0; border-radius: 10px; font-size: 13px !important; line-height: 1.6; color: #2B2F33 !important; white-space: pre-wrap; word-break: break-word; }
.share-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.nd-big .share-grid .btn { font-size: 15px; min-height: 52px; padding-left: 8px; padding-right: 8px; gap: 6px; white-space: nowrap; }
html.nd .btn.btn-threads { background: #000; color: #fff; border: none; }
html.nd .btn.btn-threads:hover { background: #262626; }
.share-img-link { font: inherit; font-size: 14px; font-weight: 700; color: #1F7F73; background: none; border: none; padding: 6px; margin: 2px auto 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.share-img-link:disabled { color: #9A9DA3; text-decoration: none; cursor: default; }
html.nd .fc { margin-top: 0; background: #fff; border: 1px solid #E7E5E0; border-radius: 14px; box-shadow: var(--nd-shadow); }
html.nd .fc-extra-title { color: #1F7F73; }
html.nd .actions { margin-top: 0; }

/* 専門家に相談してみる */
html.nd .consult { margin-top: 0; }
html.nd .consult h3 { font-size: 18px; font-weight: 700; }
html.nd .c-card { border-radius: 14px; border-color: #E7E5E0; background: #fff; box-shadow: var(--nd-shadow); padding: 18px 18px; }
html.nd .c-card.partner { border-color: #CDE8E2; background: #F4FAF8; }
/* 提携先の相談欄も、サイトと同じ色にする（先方のコーポレートカラーにすると、別の会社の申込フォームに切り替わった感じがして敷居が上がるため） */
html.nd .c-tag { background: #F1F0EC; color: #6B6F76; font-weight: 700; }
html.nd .c-tag.partner { background: #E6F4F1; color: #1F7F73; border: none; }
html.nd .c-tag.soon { background: #FDF1E7; color: #B4561B; }
html.nd .c-title { font-weight: 700; }
html.nd .c-points li::before { color: #1F7F73; }

/* スマホでの改行：見出し・短い文は文節で折り返して行の長さをそろえる（本文はふつうの折り返し）
   （word-break: auto-phrase は Chrome、text-wrap は Chrome・Safari。効かないブラウザでは今までどおりの折り返し） */
html.nd .nd-result :is(h2, h3, .nd-type, .nd-catch, .nd-trait p, .nd-insight b, .nd-idea-head b, .stat-text, .c-title, .fc-q, .cq-chips span, .ob-title, .x-tpl-note, .my-save p b) { word-break: auto-phrase; text-wrap: balance; }
/* ログインせずに送った感想に、中の人からお返事が届いたときのお知らせ */
.fb-notice { display: block; box-sizing: border-box; margin: 0 auto 12px; width: calc(100% - 32px); max-width: 720px; padding: 10px 14px; border-radius: 12px; background: #FFF4E5; border: 1px solid #F0C99A; color: #8A4513; font-size: 14px; font-weight: 700; text-decoration: none; text-align: center; }
.fb-notice[hidden] { display: none; }
/* 登録したけれど相談していない人への声かけ（トップ）。緑の枠で、詰めすぎない */
.my-nudge { box-sizing: border-box; margin: 16px auto 16px; width: calc(100% - 32px); max-width: 720px; padding: 16px 18px; border-radius: 14px; background: #F2F8F7; border: 1px solid #CFE5E1; color: #1E2B28; font-size: 14px; line-height: 1.7; }
.my-nudge[hidden] { display: none; }
.my-nudge b { display: block; font-size: 15.5px; font-weight: 700; word-break: auto-phrase; text-wrap: balance; }
.my-nudge .mn-sub { margin: 2px 0 12px; color: #4A5A56; font-size: 13px; }
.my-nudge .mn-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.my-nudge .mn-go { display: inline-block; background: #1F7F73; color: #fff; font-weight: 700; padding: 10px 18px; border-radius: 999px; text-decoration: none; }
.my-nudge .mn-close { background: none; border: none; padding: 0; font: inherit; font-size: 13px; color: #4A5A56; cursor: pointer; }
.fb-wait { font-weight: 400; text-align: left; }
.fb-wait span { display: flex; gap: 16px; align-items: center; margin-top: 6px; }
.fb-wait a { color: #8A4513; font-weight: 700; }
.fb-wait button { background: none; border: none; padding: 0; font: inherit; font-size: 13px; color: #8A4513; opacity: .7; cursor: pointer; }

/* ===== 2026-10-10 デザインの見直し（トップと同じルール：緑1色＋オレンジの差し色、見出しは太く、余白は広め） ===== */
.nd-result { gap: 20px; }
.nd-card { padding: 28px 22px; }
.nd-section-title { font-size: 20px; font-weight: 900; margin: 0 0 16px; }
.nd-section-title::before { content: ''; display: block; width: 22px; height: 3px; border-radius: 2px; background: #E07B39; margin: 0 0 10px; }
.nd-card.center .nd-section-title::before { margin-left: auto; margin-right: auto; }
.nd-list > .nd-section-title { padding: 0 4px; }
.nd-kicker { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--nd-main); }
.nd-type { font-size: 30px; font-weight: 900; letter-spacing: .01em; }
.nd-score b { font-size: 54px; font-weight: 900; letter-spacing: -.02em; }
.nd-cat-row b { font-weight: 900; }
@media (max-width: 380px) { .nd-card { padding: 24px 18px; } .nd-type { font-size: 26px; } }

/* ===== B案（2026-10-10 試作）：結果発表らしいいちばん上・6つの観点を2列・気づきに番号・変えたらは「今 → こう変える」 ===== */
.nd-b > .nd-card.center:first-of-type, .nd-b .nd-card.center { position: relative; overflow: hidden; background:
  linear-gradient(180deg, rgba(230,244,241,.9), #fff 46%),
  #fff; }
.nd-b .nd-card.center::before { content: ''; position: absolute; inset: -20px -40px auto auto; width: 220px; height: 220px; opacity: .5; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none' stroke='%23B9DCD5' stroke-width='1.6'%3E%3Crect x='10' y='10' width='100' height='100'/%3E%3Cpath d='M10 60h50V10M60 60v50M60 80h50M85 10v50'/%3E%3Cpath d='M30 110a20 20 0 0 1 20-20'/%3E%3C/svg%3E") no-repeat center / contain; }
.nd-b .nd-card.center > * { position: relative; }
.nd-b .nd-type { font-size: 34px; }
.nd-hero-grid { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: center; margin-top: 6px; }
@media (min-width: 360px) { .nd-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); text-align: left; } .nd-hero-grid .nd-scoreline { justify-content: flex-start; flex-wrap: wrap; } .nd-hero-grid .nd-legend { text-align: left; } .nd-hero-grid .nd-rare { justify-content: flex-start; } }
.nd-hero-grid .radar-wrap { margin: 0; }
.nd-hero-grid .radar-wrap svg { max-width: 220px; }
.nd-hero-grid .nd-legend { font-size: 10.5px; line-height: 1.6; }
.nd-hero-grid .nd-rare-main { font-size: 13px; padding: 6px 12px; }
.nd-hero-grid .nd-rare-main b { font-size: 15px; }
.nd-cats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nd-b .nd-cat { margin: 0 !important; padding: 14px 12px !important; border: 1px solid #E7E5E0 !important; border-radius: 12px; background: #FBFBF9; }
.nd-b .nd-cat.best { background: #F2FAF8; border-color: #CDE8E2 !important; }
.nd-b .nd-cat-row { flex-wrap: wrap; gap: 2px 6px; }
.nd-b .nd-cat-row b { font-size: 14px; }
.nd-b .nd-cat-row .nd-badge { order: 3; font-size: 10.5px; }
.nd-b .nd-cat-score { font-size: 24px; font-weight: 900; color: #1F7F73; }
.nd-b .nd-bar { margin: 6px 0 8px; }
.nd-b .nd-cat-one { font-size: 13.5px; line-height: 1.5; }
.nd-b .nd-cat p.nd-muted { font-size: 12px; line-height: 1.6; }
.nd-b .nd-insights { counter-reset: ins; }
.nd-b .nd-insight { position: relative; padding-left: 46px; counter-increment: ins; }
.nd-b .nd-insight::before { content: counter(ins, decimal-leading-zero); position: absolute; left: 0; top: 0; font-size: 26px; font-weight: 900; color: #1F7F73; line-height: 1.1; }
/* ここをこう変えたら？（2026-10-18：灰色の箱・緑の箱・↓・緑の太字・緑の枠と重なって、ごちゃっと見えた）
   「今」は小さく灰色の文字だけ。「こう変える」と「変わると」は左の緑の線でひとまとまりに。プロに聞くは線で区切った文字リンクに */
.nd-idea-now { margin: 12px 0 0; font-size: 13.5px; line-height: 1.7; color: #6B6F76; }
.nd-idea-now span, .nd-idea-to span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; margin-bottom: 2px; }
.nd-idea-now span { color: #8A8D93; }
.nd-idea-to { margin: 12px 0 0; padding: 2px 0 2px 14px; border-left: 3px solid #1F7F73; }
.nd-idea-to p { margin: 0; font-size: 14.5px; line-height: 1.75; color: #2B2F33; }
.nd-idea-to span { color: #1F7F73; }
.nd-idea-to .nd-idea-effect { margin-top: 8px; font-size: 14px; font-weight: 700; color: #1F7F73; line-height: 1.65; }
.nd-card .nd-ask[data-ask="idea"] { margin-top: 16px; padding: 12px 28px 0 0; background: none; border: 0; border-top: 1px solid #ECEAE5; border-radius: 0; box-shadow: none; }
.nd-card .nd-ask[data-ask="idea"]::after { right: 4px; top: calc(50% + 6px); }
.nd-b .nd-cat-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
.nd-b .nd-cat-row .sp { display: none; }
.nd-b .nd-cat-row .nd-badge, .nd-b .nd-cat-row .nd-top { grid-column: 1 / -1; justify-self: start; }
.nd-b .nd-cat-row b { white-space: nowrap; }
.nd-b .nd-cat-score { white-space: nowrap; }
/* スマホ（幅520px未満）：点数とレーダーは縦に（レーダーが小さくなりすぎないように）。観点の説明は3行まで見せて、カードを押すと全部 */
@media (max-width: 519px) {
  .nd-hero-grid { grid-template-columns: 1fr !important; text-align: center !important; }
  .nd-hero-grid .nd-scoreline, .nd-hero-grid .nd-rare { justify-content: center !important; }
  .nd-hero-grid .nd-legend { text-align: center !important; }
  .nd-hero-grid .radar-wrap svg { max-width: 270px; }
}
.nd-b .nd-cat p.nd-muted { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nd-b .nd-cat.open p.nd-muted { -webkit-line-clamp: unset; display: block; }
.nd-b .nd-cat.clamped { cursor: pointer; }
.nd-b .nd-cat.clamped:not(.open)::after { content: '続きを読む'; display: block; margin-top: 4px; font-size: 11px; font-weight: 700; color: #1F7F73; }
.nd-b .nd-cat-one { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nd-b .nd-cat.open .nd-cat-one { display: block; }

/* 上のバーがスマホで画面からはみ出して、横にぐらぐら動いていた（2026-10-14。「みんマド」と「マイページ／ログイン」が並ぶと、375px でぎりぎり・320px ではみ出す）
   ・名前は縮められるように（入りきらなければ「…」）、ボタンは小さめに、間をつめる。バーの中から外へは出さない */
.nd-topbar div { overflow: hidden; }
.nd-brand { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nd-topbar img { flex: none; }
@media (max-width: 420px) {
  .nd-topbar div { padding-left: 16px; padding-right: 16px; gap: 6px; font-size: 16px; }
  .nd-topbar div:has(.nd-mm:not([hidden])) small { display: none; }
  .nd-mypage { padding: 5px 10px; font-size: 12.5px; }
  .nd-mypage.nd-mm + .nd-mypage { margin-left: 4px; }
}
@media (max-width: 340px) { .nd-topbar img { width: 26px; height: 26px; } .nd-topbar div { font-size: 15px; } }

/* 「この間取りを選んだあなたは？」16タイプ（2026-10-17。シェア欄のすぐ上・おまけの遊び） */
.nd-card.ptype { text-align: center; background: linear-gradient(180deg, #FFF8F2 0%, #fff 70%); border-color: #F3D9C4; }
.ptype .pt-eyebrow { margin: 0; font-size: 13px; font-weight: 700; color: #B4561B; letter-spacing: .04em; }
.ptype .pt-name { margin: 8px 0 10px; font-size: 30px; font-weight: 900; line-height: 1.3; color: var(--ink, #2B2F33); }
.ptype .pt-sides { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 0 0 12px; }
.ptype .pt-sides span { padding: 3px 9px; border-radius: 999px; background: var(--nd-main, #1F7F73); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ptype .pt-line { margin: 0 auto 10px; max-width: 30em; font-size: 15px; line-height: 1.8; }
.ptype .pt-rare { margin: 0 0 14px; font-size: 14px; color: #6B6F76; }
.ptype .pt-rare b { color: #B4561B; font-size: 17px; margin: 0 2px; }
.ptype .pt-share { border: 1px solid var(--nd-main, #1F7F73); background: #fff; color: var(--nd-main, #1F7F73); font-weight: 700; font-size: 15px; padding: 10px 18px; border-radius: 999px; cursor: pointer; }
.ptype .pt-card { max-width: 320px; margin: 10px auto 16px; }
.ptype .pt-card svg { display: block; width: 100%; height: auto; }
.ptype .pt-note { margin: 12px 0 0; font-size: 12px; color: #8A8E94; }

/* 結果画面の小さい入口（1行。2026-10-17：結果画面が長いので、添削者・みんマドの投票は小さく） */
.nd-card.res-mini { padding: 0; overflow: hidden; }
.res-mini-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.res-mini-row[hidden] { display: none; }
.res-mini-tx { flex: 1; min-width: 0; display: grid; gap: 2px; line-height: 1.45; }
.res-mini-tx b { font-size: 14.5px; }
.res-mini-tx small { font-size: 12px; color: var(--muted, #6B6F76); }
.res-mini-row > i { font-style: normal; font-size: 20px; color: var(--muted, #9AA0A6); }
.res-mini-faces { display: flex; flex: none; }
.res-mini-faces .adv-photo { width: 30px; height: 30px; min-width: 30px; font-size: 13px; border: 2px solid #fff; margin-left: -8px; }
.res-mini-faces .adv-photo:first-child { margin-left: 0; }
/* 開いたあとの投票（minmado.css の .pre-consult.mm-in-result { padding: 0 } より強く。投票のあとの「ありがとう」が枠にくっついていた。2026-10-17） */
.nd-card.res-mini .pre-consult.mm-in-result { padding: 16px; }
/* 16タイプを「この間取りのキャラクター」の上に（2026-10-17）。左に家とキャラの上半分、右に名前とあるある。絵を押すとフルサイズのカード */
.pt-head { display: flex; gap: 14px; align-items: center; margin: 2px 0 18px; padding: 12px; border-radius: 16px; background: #FBF5EC; }
.pt-head .pt-art { flex: none; width: 128px; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pt-head .pt-art svg { display: block; width: 100%; height: auto; }
.pt-head .pt-tx { min-width: 0; }
.pt-head .pt-eyebrow { margin: 0; font-size: 11.5px; font-weight: 700; color: #9A6B3F; }
.pt-head .pt-name { margin: 2px 0 6px; font-size: 19px; font-weight: 900; line-height: 1.35; color: var(--ink, #2B2F33); }
.pt-head .pt-line { margin: 0; font-size: 12.5px; line-height: 1.65; color: #55595E; }
.pt-head .pt-rare { display: inline-block; margin-top: 8px; padding: 2px 10px; border-radius: 999px; background: #2B2F33; color: #FFF7E8; font-size: 11px; font-weight: 900; }
.nd-char-share.pt-foot { display: grid; justify-items: end; gap: 6px; }
.nd-char-share.pt-foot small { font-size: 11px; color: #8A8E94; }

/* 16タイプの「間取りで差が出やすいところ」（キャラクターのカードのいちばん下。すぐ下の相談の入口につなげる。2026-10-17） */
.pt-hook { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: #F2FAF8; border: 1px solid #CDE8E2; font-size: 13.5px; line-height: 1.75; color: var(--ink, #2B2F33); }
.pt-hook b { color: #1F7F73; }

/* みんマドの「みんなにも聞く」と「ほかの人の間取りに、ひとこと」を1枚のカードに見せる（2026-10-17：2枚続いていた） */
.mm-group { display: grid; }
.mm-group > div:empty { display: none; }
.mm-group > #mmSection:not(:empty) + #mmVoteSection:not(:empty) > .nd-card { margin-top: -1px; border-top: 1px dashed #E2DED6; border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: none; }
.mm-group > #mmSection:not(:empty):has(+ #mmVoteSection:not(:empty)) > .nd-card { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* 16タイプのキャラのひとこと（吹き出し。各欄の最初に1つだけ。2026-10-17） */
.pt-say { display: flex; align-items: center; gap: 10px; margin: 2px 0 0; }
.pt-say-av { flex: none; width: 64px; }
.pt-say-av svg { display: block; width: 100%; height: auto; }
.pt-say-b { position: relative; margin: 0 0 6px; padding: 9px 13px; border-radius: 14px 14px 14px 4px; background: #FBF5EC; border: 1px solid #EFE2CF; font-size: 14px; font-weight: 700; line-height: 1.55; color: var(--ink, #2B2F33); }
.pt-say-b small { display: block; font-size: 10.5px; font-weight: 700; color: #9A6B3F; margin-bottom: 1px; }

/* 6つの観点のキャラの掛け合い（2026-10-18。assets/cat-chars.js。風水チェックの .talk と同じ見た目） */
.cc-talk { display: grid; gap: 8px; margin: 4px 0 16px; }
.cc-row { display: flex; gap: 10px; align-items: flex-start; }
.cc-row.r { flex-direction: row-reverse; }
.cc-av { flex: none; width: 68px; }
.cc-av svg { display: block; width: 68px; height: auto; }
.cc-bub { flex: 1; min-width: 0; background: #F2FAF8; border: 1px solid #CDE8E1; border-radius: 14px; padding: 10px 12px; }
.cc-row.r .cc-bub { background: #FFF6EE; border-color: #F3D9BC; }
.cc-bub small { display: block; font-size: 12px; font-weight: 900; color: var(--ink, #1C2B33); }
.cc-bub small span { font-weight: 400; color: var(--ink-muted, #6B6F76); margin-left: 6px; font-size: 11px; }
.cc-bub p { margin: 3px 0 0; font-size: 14.5px; line-height: 1.65; font-weight: 700; }
.cc-talk.cc-pro { margin: 12px 0 10px; gap: 6px; }
.cc-pro .cc-row { align-items: center; }
.cc-pro .cc-av, .cc-pro .cc-av svg { width: 44px; }
.cc-pro .cc-bub { padding: 7px 11px; border-radius: 12px; }
.cc-pro .cc-bub small { display: none; }
.cc-pro .cc-bub p { margin: 0; font-size: 13.5px; line-height: 1.55; }
.cc-pro .cc-add { margin-top: 6px; padding: 3px 10px; font-size: 12.5px; }
.cc-add { margin-top: 8px; font: inherit; font-size: 13px; font-weight: 900; color: #1F7F73; background: #fff; border: 1.5px solid #1F7F73; border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.cc-add:disabled { color: #6B6F76; border-color: #D9D6CF; cursor: default; }

/* 1日の無料の診断を使い切ったときのパスの案内（2026-11-03） */
.diag-wall { margin: 14px 0 0; padding: 16px; border: 1px solid #E9D9B8; background: #FFF9EC; border-radius: 12px; text-align: center; }
.diag-wall[hidden] { display: none; }
.diag-wall .dw-t { margin: 0 0 6px; font-weight: 700; font-size: 15px; color: #3a3a3a; }
.diag-wall .dw-s { margin: 0 0 12px; font-size: 13px; color: #555; line-height: 1.7; text-align: left; }
.diag-wall .dw-btn { display: inline-block; padding: 11px 26px; border-radius: 999px; background: #1F7F73; color: #fff; font-weight: 700; text-decoration: none; }
.diag-wall .dw-n { margin: 10px 0 0; font-size: 12px; color: #777; }
/* マドリノートへの入口（2026-11-04） */
.note-try { border: 1.5px solid #E7E5E0; border-radius: 14px; background: #fff; padding: 14px; display: grid; gap: 6px; margin: 4px 0 10px; }
.note-try b { font-size: 15px; }
.note-try small { font-size: 12.5px; color: #5F646B; line-height: 1.7; }
.note-try .btn { justify-self: start; }

/* 片づけの観点の下の「収納ぴったり計算」への1行（2026-11-05・控えめに） */
.nd-pittari { margin: 6px 0 0; font-size: 12.5px; }
.nd-pittari a { color: var(--nd-muted, #6B7280); text-decoration: underline; text-underline-offset: 2px; }
/* 上のバーの「ログイン／マイページ／みんマド」（2026-11-05。ユーザー：トップのスマホががたつく）：あとから出たときにバーが3〜6px高くなり、ページ全体がずれていた → ロゴと同じ30pxに固定 */
.nd-topbar .nd-mypage { box-sizing: border-box; height: 30px; padding-top: 0; padding-bottom: 0; line-height: 1; }