/* scripts/build-spinoff.js が site.json の theme から作る（手で編集しない）。共通の見た目は style.css（ツール箱と同じ）で、色だけをこのサイト用に変える */
:root { --accent: #5f7a5f; --accent-ink: #46604a; --focus: 0 0 0 3px rgba(95, 122, 95, 0.35); }
@media (prefers-color-scheme: dark) { :root { --accent: #a3bf9f; --accent-ink: #bcd2b7; --focus: 0 0 0 3px rgba(163, 191, 159, 0.4); } }
.logo-sub { display: inline-block; margin-left: 8px; font-size: .72rem; font-weight: 400; color: var(--muted); }
.spinoff-hero { padding: 40px 0 8px; }
.spinoff-hero h1 { font-size: clamp(1.9rem, 6vw, 2.8rem); margin: 0 0 14px; }
.spinoff-kicker { display: inline-block; margin: 0 0 14px; padding: 3px 12px; border-radius: 6px; font-size: .8rem; font-weight: 700; color: var(--accent-ink); background: var(--ai-tint); }
.spinoff-hero .badges li { padding: 4px 14px; }
.spinoff-home-link { margin-top: 16px; font-size: .9rem; color: var(--muted); }
@media (max-width: 480px) { .logo-sub { display: none; } }

/* ---- spinoffs/madori-kagu/custom.css（このサイトだけの見た目） ---- */
/* 間取りと家具の配置プランナー：住まいらしい落ち着いた見た目（生成り・木の色・くすんだ緑、細い線、小さな角）。
   年配の方でも読みやすいよう、文字は基準18px、押す所は48px以上 */
:root {
  --bg: #f6f3ec; --surface: #fcfaf5; --surface-2: #eee9de; --text: #2a2722; --muted: #57524a;
  --border: #e0d9ca; --border-strong: #c7bca7;
  --ai: #4f6b52; --ai-hover: #3e5741; --ai-tint: #edf0e6; --ai-tint-2: #dde4d4; --on-ai: #ffffff;
  --accent: #5f7a5f; --accent-ink: #46604a;
  --wood: #8a6542; --wood-soft: #e7d9c4;
  --grad: none; --grad-strong: none;
  --header-bg: rgba(246, 243, 236, .93); --footer-bg: #2f332c; --footer-text: #cfd0c6; --footer-head: #ffffff; --footer-mark: #ffffff;
  --radius: 6px; --radius-sm: 4px;
  --mincho: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "BIZ UDPMincho", serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1b18; --surface: #21231f; --surface-2: #292b26; --text: #ebe7de; --muted: #c3beb2;
    --border: #363831; --border-strong: #4c4f45;
    --ai: #a3bf9f; --ai-hover: #b9d2b5; --ai-tint: #252a23; --ai-tint-2: #2f362c; --on-ai: #1a1b18;
    --accent: #a3bf9f; --accent-ink: #bcd2b7;
    --wood: #d2ac84; --wood-soft: #3a3127;
    --header-bg: rgba(26, 27, 24, .92); --footer-bg: #121310; --footer-text: #aaa89f;
  }
}

/* 文字は大きめ（基準18px）。「大きく」で約21px */
html { font-size: 112.5%; }
html.big { font-size: 131%; }
body { font-size: 1rem; background: var(--bg); line-height: 1.9; letter-spacing: .01em; }
h1, h2, h3, .logo-text, .sec-title { font-family: var(--mincho); font-weight: 600; letter-spacing: .04em; }
.logo-mark .m-base { fill: var(--ai); }
.site-header { border-bottom: 1px solid var(--border); box-shadow: none; }
.spinoff .site-header .wrap { max-width: 1120px; }
.site-header nav { display: flex; gap: 2px; flex-wrap: wrap; scrollbar-width: none; }
.site-header nav::-webkit-scrollbar { display: none; }
.site-header .nav-link { display: inline-flex; align-items: center; min-height: 48px; padding: 0 12px; font-size: .9rem; border-radius: 0; background: transparent; border: 0; border-bottom: 2px solid transparent; }
.site-header .nav-link:hover { border-bottom-color: var(--wood); background: transparent; }
main a { color: var(--accent-ink); text-decoration-color: currentColor; text-underline-offset: 3px; }
main a:hover { color: var(--ai-hover); }
.card, .tool-card, details { background: var(--surface); border-radius: var(--radius); box-shadow: none; }
.lead { color: var(--text); }
input, select { font-size: 1rem; min-height: 48px; }
.nw { display: inline-block; }
.note { font-size: .9rem; }
.breadcrumbs { font-size: .9rem; color: var(--muted); margin-top: 22px; }
.site-footer { margin-top: 80px; }

/* 文字の大きさの切り替え（site.json の sizeToggle） */
.g-size { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: 10px auto 0; font-size: .9rem; }
.g-chip { min-height: 48px; padding: 6px 16px; white-space: nowrap; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: var(--radius-sm); font-size: .95rem; cursor: pointer; }
.g-chip:hover, .g-chip[aria-pressed="true"] { border-color: var(--ai); background: var(--ai); color: var(--on-ai); }

/* 見出し */
.sec-title { font-size: clamp(1.35rem, 3.6vw, 1.65rem); margin: 64px 0 8px; padding-bottom: 12px; border-bottom: 1px solid var(--border-strong); }
.sec-lead { margin: 12px 0 24px; color: var(--muted); }

/* トップの大きな絵と見出し */
.m-hero { display: grid; gap: 20px; margin: 18px 0 0; padding: 24px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.m-for { margin: 0 0 12px; padding-left: 12px; border-left: 3px solid var(--wood); font-weight: 600; color: var(--wood); }
.m-hero h1 { font-size: clamp(1.6rem, 5vw, 2.3rem); line-height: 1.55; margin: 0 0 14px; }
.m-hero .lead { margin: 0; }
.m-hero-fig img, .m-hero-fig svg { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
.m-hero-fig img { aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 860px) { .m-hero { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 36px; padding: 40px; } }

/* 絵が届くまでの間取り図（インラインSVG） */
.m-plan { background: var(--surface-2); }
.m-plan .p-floor { fill: var(--wood-soft); }
.m-plan .p-wall { fill: none; stroke: var(--text); stroke-width: 6; stroke-linejoin: round; }
.m-plan .p-door { fill: none; stroke: var(--muted); stroke-width: 2; stroke-dasharray: 5 4; }
.m-plan .p-item { fill: var(--surface); stroke: var(--ai); stroke-width: 2.5; }
.m-plan .p-path { fill: none; stroke: var(--wood); stroke-width: 3; stroke-dasharray: 2 8; stroke-linecap: round; }
.m-plan .p-t { fill: var(--text); font-size: 20px; text-anchor: middle; dominant-baseline: central; }
.m-plan .p-s { fill: var(--wood); font-size: 18px; font-weight: 700; }

/* 何をしたいですか？（大きな入口） */
.m-start { margin: 40px 0 0; }
.m-start h2 { font-size: 1.4rem; margin: 0 0 14px; }
.m-start ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 860px) { .m-start ul { grid-template-columns: repeat(3, 1fr); } }
.m-start li { max-width: none; margin: 0; }
.m-start a { display: flex; align-items: center; gap: 16px; height: 100%; min-height: 96px; padding: 16px 18px; border: 2px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
.m-start a:hover, .m-start a:focus-visible { border-color: var(--ai); }
.m-start img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
@media (min-width: 860px) { .m-start a { flex-direction: column; align-items: stretch; } }
@media (max-width: 859px) { .m-start img { width: 96px; flex: none; } }
.m-ico { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-sm); background: var(--ai-tint); color: var(--ai); }
.m-ico svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.m-start strong { display: block; font-size: 1.12rem; line-height: 1.5; }
.m-start strong::after { content: " →"; color: var(--wood); }
.m-start .m-d { display: block; margin-top: 4px; font-size: .95rem; color: var(--muted); }

/* 読み物（番号つき） */
.m-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.m-steps li { display: flex; gap: 16px; max-width: none; margin: 0; padding: 20px 0; border-bottom: 1px solid var(--border); }
.m-n { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--wood); border-radius: 50%; color: var(--wood); font-family: var(--mincho); font-size: 1.2rem; }
.m-steps h3 { margin: 4px 0 6px; font-size: 1.15rem; }
.m-steps h3 a { text-decoration: none; }
.m-steps h3 a::after { content: " →"; color: var(--wood); }
.m-steps p { margin: 0; }

/* できること */
.m-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--border); }
@media (min-width: 760px) { .m-feats { grid-template-columns: repeat(2, 1fr); column-gap: 32px; } }
@media (min-width: 1000px) { .m-feats { grid-template-columns: repeat(3, 1fr); } }
.m-feats li { max-width: none; margin: 0; padding: 16px 4px 16px 18px; border-bottom: 1px solid var(--border); position: relative; }
.m-feats li::before { content: ""; position: absolute; left: 2px; top: 26px; width: 8px; height: 8px; background: var(--ai); }
.m-feats strong { display: block; }
.m-feats span { display: block; font-size: .95rem; color: var(--muted); }
.m-small { margin: 14px 0 0; font-size: .92rem; color: var(--muted); }

/* よくある間取り */
.m-types { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 760px) { .m-types { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .m-types { grid-template-columns: repeat(6, 1fr); } }
.m-types li { max-width: none; margin: 0; }
.m-types a { display: block; height: 100%; min-height: 48px; padding: 14px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); text-decoration: none; text-align: center; }
.m-types a:hover { border-color: var(--ai); }
.m-types strong { display: block; font-size: 1.35rem; font-family: var(--mincho); color: var(--accent-ink); }
.m-types span { display: block; font-size: .88rem; color: var(--muted); }
.m-sub { margin: 30px 0 10px; font-size: 1.08rem; }
.m-rooms { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.m-rooms li { max-width: none; margin: 0; }
.m-rooms a { display: inline-flex; align-items: center; min-height: 48px; padding: 6px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; }
.m-rooms a:hover { border-color: var(--ai); }

/* ツールの一覧（TOOLS マーカー） */
.home .tool-card { border: 1px solid var(--border); }
.home .tool-card:hover { border-color: var(--ai); }

/* 解説ページ */
.m-article { max-width: 760px; margin: 0 auto; }
.m-article h1 { font-size: clamp(1.55rem, 4.6vw, 2.1rem); line-height: 1.55; margin: 30px 0 16px; }
.m-article h2 { margin: 52px 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border-strong); font-size: 1.3rem; }
.m-article h3 { margin: 28px 0 6px; font-size: 1.1rem; }
.m-article table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; font-size: .95rem; background: var(--surface); }
.m-article th, .m-article td { padding: 10px 12px; border: 1px solid var(--border); text-align: left; vertical-align: top; }
.m-article th { background: var(--surface-2); font-weight: 600; }
.m-article li { margin: 4px 0; }
.m-toc { margin: 18px 0 6px; padding: 16px 20px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius); }
.m-toc ol { margin: 6px 0 0; padding-left: 1.3em; }
.m-toc a { display: inline-block; padding: 4px 0; }
.m-next { margin: 40px 0 18px; padding: 18px 20px; border: 1px solid var(--border); border-left: 3px solid var(--ai); background: var(--surface); border-radius: var(--radius-sm); }
.m-next ul { margin: 6px 0 0; padding-left: 1.2em; }
.m-next a { display: inline-block; padding: 6px 0; }
.m-others { margin: 22px 0 0; }
.m-others a { display: inline-block; padding: 8px 0; }

/* ツールの上の「このページは」 */
.m-forbox { margin: 12px 0 18px; padding: 14px 18px; border-left: 3px solid var(--wood); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: .98rem; }
.m-forbox p { margin: 0; }
.m-forbox .m-forbox-next { margin-top: 6px; font-size: .95rem; color: var(--muted); }
.m-forbox a { display: inline-block; padding: 4px 0; }

/* スマホ */
@media (max-width: 640px) {
  .site-header .wrap { flex-wrap: wrap; row-gap: 0; padding-top: 8px; padding-bottom: 0; }
  .site-header .logo { min-width: 0; }
  .site-header .logo-text { font-size: .98rem; white-space: normal; }
  .site-header nav { width: 100%; flex-wrap: nowrap; overflow-x: auto; }
  .site-header .nav-link { padding: 0 10px; white-space: nowrap; }
  .m-hero { padding: 20px 16px; }
  .m-hero h1 { font-size: 1.5rem; }
  .sec-title { margin-top: 52px; }
  .m-article table { font-size: .9rem; }
  .m-article th, .m-article td { padding: 8px; }
}
@media print {
  .site-header, .site-footer, .share, .g-size, .pr-slot, .pr-notice { display: none !important; }
  body { background: #fff; color: #000; }
}