/* v0.2 — editorial direction: restrained, typographic, not card-based */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');
:root{--paper:#faf9f6;--ink:#202722;--muted:#686e67;--line:#d9d9d3;--accent:#405b4e;--sage:#eeeee8}
body{background:var(--paper);font-family:'Manrope','Noto Sans JP',sans-serif;color:var(--ink)}
.wrap{max-width:1160px}.adnotice{text-align:left;background:#eeeee9;border-bottom:1px solid #dbdbd3;padding:8px max(22px,calc((100vw - 1092px)/2));font-size:10px;letter-spacing:0}
.site-header{background:rgba(250,249,246,.97);border-bottom:1px solid #c7c9c1}.header-inner{min-height:76px}.brand{font-size:19px;letter-spacing:-.045em}.brand small{font-size:8px;font-weight:500;letter-spacing:.05em;color:#797f78;margin-top:5px}nav a{font-size:12px;font-weight:500}nav{gap:26px}
.hero{grid-template-columns:1.08fr .92fr;gap:48px;padding-top:90px;padding-bottom:94px}.hero h1,.section-head h2,.question h3,.result h3,.subpage h1,.scene h3,.editorial-inner blockquote,.planner-aside h3{font-family:'Noto Sans JP',sans-serif;letter-spacing:-.06em;font-weight:600}.hero h1{font-size:clamp(44px,4.55vw,66px);line-height:1.55;margin:25px 0 29px}.hero-copy>p{font-size:14px;line-height:2.25;color:#4f5851}.hero-actions{margin:37px 0 24px}.eyebrow{font-family:inherit;font-size:11px;letter-spacing:.04em;font-weight:600;color:var(--accent)}.hero-caption{font-size:11px}.btn.dark{background:var(--ink)}.btn{border-radius:0;padding:16px 20px;transition:background .16s}.btn:hover{transform:none;background:#3f5548}.text-link{font-size:12px}
.hero-feature{border:1px solid #c8ccc4;min-height:465px;display:flex;flex-direction:column;background:#e8e9e2;padding:24px 30px}.feature-caption,.feature-bottom{display:flex;justify-content:space-between;gap:15px;font-size:11px;color:#566259}.feature-center{margin:auto 0;padding:48px 18px}.feature-num{font-size:70px;letter-spacing:-.09em;font-weight:800;color:#abb8ad;line-height:1}.feature-center h2{font-size:31px;line-height:1.65;letter-spacing:-.065em;margin:17px 0 13px}.feature-center p{font-size:12px;line-height:2;color:#647068}.feature-bottom{border-top:1px solid #bcc5bb;padding-top:17px}.feature-bottom a{text-decoration:none;border-bottom:1px solid #788d7e;color:#263b2f}
.intro-strip{background:transparent;border-top:1px solid #c5c9c1;border-bottom:1px solid #c5c9c1}.strip-inner{grid-template-columns:165px 1fr;padding-top:25px;padding-bottom:25px}.strip-inner>span{font-size:12px;letter-spacing:0}.strip-inner p{font-size:13px}
.section{padding-top:96px;padding-bottom:96px}.section-head h2{font-size:34px;letter-spacing:-.055em;margin-top:12px}.section-head>p{font-size:12px;line-height:2}.section-head{margin-bottom:30px}
.scene-grid{grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid #bdc4bc}.scene{background:transparent!important;min-height:180px;padding:24px 25px;border-bottom:1px solid #bdc4bc;position:relative;display:grid;grid-template-columns:60px 1fr;align-content:center;gap:10px;border-radius:0}.scene:nth-child(odd){border-right:1px solid #bdc4bc}.scene:hover{transform:none;background:#f1f2ec!important}.scene-number{font-size:12px;color:#849084}.scene h3{font-size:20px;line-height:1.6;letter-spacing:-.045em;margin:0 0 9px}.scene p{font-size:11px}.scene-arrow{position:absolute;right:22px;top:19px;font-size:19px}
.planner-section{background:#e9ebe5;padding:85px 0}.planner-head{margin-bottom:31px}.planner-shell{grid-template-columns:1.55fr .8fr;background:#fffefa;border:1px solid #ced4ca}.planner-form{padding:38px 43px}.planner-aside{background:#e0e4db;border-left:1px solid #c8d0c5;color:#26372d;padding:42px 33px}.aside-top,.aside-foot{color:#607368}.planner-aside h3{font-size:27px;color:#253a2d}.planner-aside p{color:#516253}.step-label{font-family:inherit;font-size:11px}.progress{margin-bottom:33px}.question h3{font-size:22px}.choice{background:#fffefa;border-color:#d9ddd6;font-size:13px;min-height:56px;border-radius:0}.choice.selected{background:#edf1eb;box-shadow:inset 2px 0 #405b4e}.result{background:#fffefa}.result h3{font-size:26px}
.product-row{grid-template-columns:114px 1fr 142px;gap:18px;padding:32px 0}.product-row h3{font-size:17px;letter-spacing:-.025em}.product-row p{font-size:12px}.product-row>a{white-space:nowrap}
.editorial-band{background:#e8e9e2}.editorial-inner{max-width:1120px;display:grid;grid-template-columns:180px 1.2fr 1fr;gap:45px;align-items:center;padding-top:75px;padding-bottom:75px}.editorial-inner blockquote{font-size:31px;line-height:1.7;margin:0}.editorial-inner p{font-size:12px;line-height:2.2}
.article-grid{gap:0;grid-template-columns:repeat(3,1fr);border-top:1px solid #bfc6bc}.article-grid article{padding:27px 26px 12px 0;border-bottom:1px solid #bfc6bc}.article-grid article+article{border-left:1px solid #bfc6bc;padding-left:26px}.article-tag{margin-top:0;font-size:10px;letter-spacing:.05em}.article-grid h3{font-size:18px;letter-spacing:-.045em}.article-grid a{display:inline-block;margin:7px 0 15px}footer{background:#26352b}.footer-brand{font-size:20px;letter-spacing:-.045em}
:focus-visible{outline:3px solid #a16937;outline-offset:3px}
@media(max-width:900px){.hero{gap:24px}.editorial-inner{grid-template-columns:1fr;gap:20px}.planner-aside{padding:25px}.scene-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:650px){.adnotice{padding:9px 20px;line-height:1.6}.header-inner{min-height:64px}.brand{font-size:16px}.brand small{font-size:7px;letter-spacing:0}.hero{display:flex;flex-direction:column;padding-top:53px;padding-bottom:55px;gap:36px}.hero h1{font-size:39px;line-height:1.6}.hero-copy>p{font-size:13px}.hero-feature{min-height:310px;padding:18px 20px}.feature-center{padding:20px 6px}.feature-num{font-size:48px}.feature-center h2{font-size:24px}.feature-center p{font-size:11px}.feature-bottom{font-size:10px}.section{padding-top:65px;padding-bottom:65px}.section-head h2{font-size:29px}.scene-grid{grid-template-columns:1fr}.scene{min-height:130px;border-right:0!important;padding:18px 12px;grid-template-columns:44px 1fr}.scene h3{font-size:18px}.scene-arrow{right:9px;top:18px}.planner-section{padding:60px 0}.planner-aside{display:none}.planner-form{padding:26px 20px}.question h3{font-size:20px}.choice{font-size:12px}.product-row{grid-template-columns:1fr}.editorial-inner{display:block}.editorial-inner blockquote{font-size:25px;margin:20px 0}.article-grid{grid-template-columns:1fr}.article-grid article,.article-grid article+article{padding:25px 0;border-left:0}.footer-main{gap:25px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.product-ad { align-self: center; }
.product-photo { margin-bottom: 8px; } .product-photo img { max-width: 100%; max-height: 142px; width: auto; object-fit: contain; vertical-align: middle; }

/* Indigo and warm paper tie the guide and planner together. */
:root {
  --design-ink: #242940;
  --design-muted: #525b71;
  --design-accent: #414d9a;
  --design-line: #d8dce9;
}
body { background: #fbfaf7; color: var(--design-ink); }
.adnotice { background: #eeedf8; color: #343e72; }
.site-header { background: #fbfaf7; border-color: var(--design-line); }
.brand, .text-link, .scene-arrow, .product-ad a, .article-grid a { color: var(--design-accent); }
.btn.dark { background: #363f86; color: #fff; border-radius: 8px; }
.btn.dark:hover { background: #29326f; }
.hero { align-items: center; gap: clamp(30px, 6vw, 86px); }
.hero-copy { text-align: center; }
.hero h1 { color: var(--design-ink); font-size: clamp(38px, 5.6vw, 70px); line-height: 1.2; letter-spacing: -.055em; }
.hero-copy > p { color: var(--design-muted); font-size: 15px; line-height: 1.95; }
.hero-actions { justify-content: center; }
.hero-feature { width: 100%; border-radius: 18px; background: #e8e8f6; color: #293365; border-color: #d6d8ed; }
.feature-center { text-align: center; }
.feature-num { color: #5863a4; }
.eyebrow { color: var(--design-accent); }
.intro-strip { background: #f0eee8; border-color: #e3e0d9; }
.section-head h2 { color: var(--design-ink); font-size: clamp(29px, 4vw, 42px); line-height: 1.3; }
.section-head > p, .product-row p, .article-grid p { color: var(--design-muted); font-size: 14px; line-height: 1.8; }
#scenes .section-head, .planner-head, .article-section .section-head {
  display: block;
  text-align: center;
  margin-bottom: 36px;
}
#scenes .section-head > p, .planner-head > p, .article-section .section-head > p {
  max-width: 36rem;
  margin: 12px auto 0;
}
.planner-head h2 br { display: none; }
.scene-grid, .article-grid { gap: 16px; border: 0; }
.scene, .scene:nth-child(odd) { border: 1px solid var(--design-line); border-radius: 12px; background: #fff !important; }
.scene:hover { background: #f1f0fa !important; }
.scene-number { color: var(--design-accent); }
.planner-section { background: #eeedf8; }
.planner-shell { border: 1px solid #d6d8ed; border-radius: 16px; overflow: hidden; background: #fff; }
.planner-aside { background: #e3e4f4; border-color: #d6d8ed; }
.planner-aside h3, .planner-aside p, .aside-top, .aside-foot { color: #343e72; }
.choice { border-radius: 8px; background: #fff; border-color: var(--design-line); }
.choice.selected { background: #efeffb; border-color: #646cb2; box-shadow: inset 3px 0 var(--design-accent); }
.progress > div { background: var(--design-accent); }
.result { background: #fff; border-radius: 12px; }
.product-row { border-color: var(--design-line); grid-template-columns: 85px minmax(0, 1fr) 185px; align-items: center; }
.product-ad { text-align: center; font-size: 13px; line-height: 1.65; }
.product-photo img { max-height: 148px; }
.editorial-band { background: #e9e9f6; }
.editorial-inner { display: block; text-align: center; }
.editorial-inner blockquote { margin: 16px 0; color: #293365; }
.editorial-inner p { max-width: 34rem; margin: 0 auto; color: var(--design-muted); font-size: 14px; }
.article-grid article, .article-grid article + article { padding: 24px; border: 1px solid var(--design-line); border-radius: 12px; background: #fff; }
.article-tag { color: var(--design-accent); }
footer { background: #282e50; }
:focus-visible { outline-color: #535db1; }
@media (max-width: 650px) {
  .hero-feature { min-height: 275px; }
  .hero-copy > p { font-size: 14px; }
  .hero-actions { gap: 14px; }
  .scene:nth-child(odd) { border-right: 1px solid var(--design-line) !important; }
  .product-row { grid-template-columns: minmax(0, 1fr) minmax(92px, 34%); gap: 8px 14px; padding: 22px 0; }
  .product-index { grid-column: 1 / -1; }
  .product-photo img { max-height: 100px; }
  .product-ad { font-size: 11px; }
}
.product-story { max-width: 760px; }
.product-story h1 { line-height: 1.4; }
.product-story .buy-note { margin: 36px 0; padding: 18px 22px; border: 1px solid #d8dce9; border-radius: 12px; background: #eeedf8; }
.product-story .buy-note p { margin: 6px 0; }
.product-story .buy-note a { color: #414d9a; font-weight: 700; }
.story-products { margin: 28px 0 36px; padding: clamp(14px, 4vw, 26px); background: #eeedf8; border: 1px solid #d8dce9; border-radius: 16px; }
.story-product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.story-product-grid figure { margin: 0; padding: 16px; background: #fff; border-radius: 12px; text-align: center; }
.story-product-grid figcaption { font-weight: 750; color: #293365; }
.story-product-photo { margin: 10px 0; }
.story-product-photo img { max-width: 100%; max-height: 270px; width: auto; object-fit: contain; vertical-align: middle; }
.story-product-grid figure p { margin-bottom: 0; font-size: 14px; }
.story-products .story-ad-label { margin: 0 0 10px; font-size: 12px; }
.story-products .story-buy-prompt { margin: 14px 0 0; color: #293365; font-weight: 700; }
.hero-illustration { display: block; width: min(100%, 260px); height: auto; margin: 0 auto 14px; }
.scene-illustration { width: 100%; height: auto; grid-row: 1 / span 2; align-self: center; border-radius: 10px; }
.scene, .scene:nth-child(odd) { grid-template-columns: minmax(86px, 132px) 1fr; gap: 4px 20px; }
.scene .scene-number { align-self: end; }
.scene > div { grid-column: 2; }
.article-illustration { display: block; width: 100%; height: auto; max-height: 158px; object-fit: contain; border-radius: 12px; background: #f0edf8; margin: 0 0 16px; }
.topic-illustration { margin: 20px 0 24px; padding: 12px; background: #eeedf8; border-radius: 16px; text-align: center; }
.topic-illustration img { display: block; width: min(100%, 360px); height: auto; margin: auto; }
@media (max-width: 650px) { .scene, .scene:nth-child(odd) { grid-template-columns: minmax(72px, 100px) 1fr; gap: 4px 14px; } }