:root{
  --primary:#8A5A44;
  --dark:#57382D;
  --light:#F1E6DF;
  --accent:#B97858;
  --bg:#FCF9F6;
  --text:#292624;
  --nudge-brand:#3d6a85;
  --header-text:#24211e;
  --line:#ece3da;
  --muted:#6b6560;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;}
a{color:inherit;}
h1,h2,h3,h4,p,ul{margin:0;}
.toi-brand{color:var(--header-text);}
.nudge-brand{color:var(--nudge-brand);}

/* ---------- header ---------- */
.toi-header{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:10;}
.toi-header-inner{
  max-width:1180px;margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
}
.toi-header-logo{font-size:1.2rem;font-weight:700;letter-spacing:.02em;white-space:nowrap;}
.toi-header-breadcrumb{
  font-size:.88rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:1;text-align:center;min-width:0;
}
.toi-header-breadcrumb a{text-decoration:none;}
.toi-header-breadcrumb a:hover{text-decoration:underline;}
.toi-header-breadcrumb .sep{margin:0 8px;color:#c9beb2;}
.toi-header-cta{
  background:var(--nudge-brand);color:#fff;padding:10px 22px;border-radius:999px;
  font-size:.86rem;font-weight:700;text-decoration:none;white-space:nowrap;
}
@media(max-width:768px){
  .toi-header-inner{padding:14px 18px;}
  .toi-header-breadcrumb{
    flex-basis:100%;order:3;text-align:left;white-space:normal;text-overflow:clip;
    margin-top:6px;
  }
  .toi-header-cta{padding:9px 16px;font-size:.8rem;}
}

/* ---------- FV ---------- */
.fv{
  padding:64px 24px 54px;text-align:center;
  background:linear-gradient(180deg,#fff 0%, var(--bg) 70%);
}
.fv-inner{max-width:980px;margin:0 auto;}
.fv-eyebrow{
  display:inline-flex;flex-wrap:wrap;gap:8px;justify-content:center;
  font-size:.85rem;font-weight:700;color:var(--primary);letter-spacing:.03em;margin-bottom:18px;
}
.fv-eyebrow .theme-name{
  background:var(--light);color:var(--dark);padding:4px 14px;border-radius:999px;
}
.fv-title{
  font-size:3.15rem;font-weight:800;line-height:1.5;color:var(--dark);
  max-width:860px;margin:0 auto 26px;letter-spacing:.01em;
}
.fv-sub{font-size:1.12rem;line-height:2;max-width:700px;margin:0 auto 22px;color:var(--text);}
.fv-note{font-size:.95rem;line-height:1.9;color:var(--muted);max-width:640px;margin:0 auto 30px;}
.fv-trust{
  display:inline-block;background:var(--light);color:var(--dark);
  padding:11px 24px;border-radius:999px;font-size:.88rem;font-weight:700;margin-bottom:40px;line-height:1.7;
}
.fv-visual{max-width:1040px;margin:0 auto;}
.fv-visual img{width:100%;height:auto;display:block;border-radius:16px;box-shadow:0 18px 40px -20px rgba(87,56,45,.35);}
@media(max-width:768px){
  .fv{padding:48px 20px 40px;}
  .fv-title{font-size:2.3rem;}
  .fv-sub{font-size:1rem;}
}

/* ---------- sections ---------- */
main{overflow:hidden;}
.lp-section{
  counter-increment:sec;
  padding:72px 24px;max-width:880px;margin:0 auto;
}
.lp-section.is-tinted{max-width:100%;background:var(--light);}
.lp-section.is-tinted .lp-section-inner{max-width:880px;margin:0 auto;}
.sec-num{
  font-size:.8rem;font-weight:700;color:var(--accent);letter-spacing:.12em;margin-bottom:14px;
}
.sec-num::before{content:"SECTION " counter(sec,decimal-leading-zero);}
.sec-heading{
  font-size:1.55rem;font-weight:800;color:var(--dark);line-height:1.7;margin-bottom:26px;
}
.sec-body p{font-size:1rem;line-height:2;margin-bottom:16px;}
.sec-body p:last-child{margin-bottom:0;}

.plain-list{list-style:none;padding:0;margin:18px 0;}
.plain-list li{position:relative;padding-left:1.3em;margin-bottom:8px;line-height:1.8;}
.plain-list li::before{content:"・";position:absolute;left:0;color:var(--primary);font-weight:700;}

.core-message{
  background:#fff;border-left:5px solid var(--primary);border-radius:10px;
  padding:22px 26px;margin-top:30px;box-shadow:0 6px 18px -14px rgba(41,38,36,.35);
}
.is-tinted .core-message{background:#fff;}
.core-message .core-label{
  display:block;font-size:.74rem;font-weight:700;color:var(--primary);letter-spacing:.1em;margin-bottom:8px;
}
.core-message p{font-size:1.08rem;font-weight:700;color:var(--dark);line-height:1.85;margin:0;}

/* chip row */
.chip-row{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:22px 0;}
.chip-row li{
  background:var(--light);color:var(--dark);padding:9px 18px;border-radius:999px;
  font-size:.92rem;font-weight:700;
}
.chip-row.on-white li{background:var(--bg);border:1px solid var(--line);}

/* qa grid */
.qa-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:26px 0;}
.qa-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;}
.qa-badge{
  display:inline-block;background:var(--primary);color:#fff;font-size:.72rem;font-weight:700;
  padding:3px 11px;border-radius:999px;margin-bottom:12px;letter-spacing:.05em;
}
.qa-q{font-weight:700;color:var(--dark);font-size:1rem;line-height:1.7;}

/* compare grid */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:28px 0;align-items:stretch;}
@media(max-width:680px){.compare-grid{grid-template-columns:1fr;}}
.compare-col{background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px;}
.compare-col.is-highlight{background:var(--light);border-color:var(--accent);}
.compare-col h3{font-size:1.02rem;color:var(--dark);margin-bottom:14px;font-weight:800;}
.compare-col ul{list-style:none;padding:0;margin:0;}
.compare-col li{position:relative;padding-left:1.2em;margin-bottom:8px;font-size:.95rem;line-height:1.8;}
.compare-col li::before{content:"・";position:absolute;left:0;color:var(--accent);}
.compare-col p{font-size:.95rem;line-height:1.85;}

/* flow vertical */
.flow-vertical{list-style:none;padding:0;margin:28px 0;}
.flow-vertical li{position:relative;padding:6px 0 22px 34px;border-left:2px solid var(--accent);}
.flow-vertical li:last-child{border-left-color:transparent;padding-bottom:0;}
.flow-vertical li::before{
  content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;background:var(--primary);
}
.flow-vertical .step-title{font-weight:800;color:var(--dark);font-size:1rem;}
.flow-vertical .step-desc{font-size:.9rem;color:var(--muted);margin-top:4px;}
.flow-loop-note{
  margin-top:6px;padding:12px 18px;background:var(--light);border-radius:10px;
  display:inline-block;font-size:.9rem;color:var(--dark);font-weight:700;
}

/* flow row (horizontal chain) */
.flow-row{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin:28px 0;}
.flow-row .node{
  flex:1;min-width:150px;background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:16px 14px;text-align:center;display:flex;flex-direction:column;justify-content:center;gap:6px;
}
.flow-row .node .node-tag{font-size:.72rem;font-weight:700;color:var(--primary);letter-spacing:.05em;}
.flow-row .node .node-q{font-weight:700;color:var(--dark);font-size:.92rem;line-height:1.6;}
.flow-row .arrow{align-self:center;color:var(--accent);font-size:1.3rem;font-weight:700;}
@media(max-width:680px){
  .flow-row{flex-direction:column;}
  .flow-row .arrow{transform:rotate(90deg);margin:-4px 0;}
}

/* expand flow (staircase) */
.expand-flow{list-style:none;padding:0;margin:30px 0;}
.expand-flow li{
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;position:relative;
}
.expand-flow li + li{margin-top:24px;}
.expand-flow li:not(:last-child)::after{
  content:"↓";position:absolute;left:22px;bottom:-26px;color:var(--accent);font-size:1.15rem;
}
.expand-flow .ef-tag{
  display:inline-block;background:var(--light);color:var(--dark);font-size:.74rem;font-weight:700;
  padding:3px 12px;border-radius:999px;margin-bottom:8px;
}
.expand-flow .ef-q{font-weight:700;color:var(--dark);font-size:.96rem;}
.expand-flow .e1{margin-left:0;}
.expand-flow .e2{margin-left:14px;}
.expand-flow .e3{margin-left:28px;}
.expand-flow .e4{margin-left:42px;}
.expand-flow .e5{margin-left:56px;}
.expand-flow .e6{margin-left:70px;}
@media(max-width:600px){
  .expand-flow .e1,.expand-flow .e2,.expand-flow .e3,.expand-flow .e4,.expand-flow .e5,.expand-flow .e6{margin-left:0;}
}

/* info grid */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin:28px 0;}
.info-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;}
.info-card h4{font-size:1rem;color:var(--dark);margin-bottom:10px;font-weight:800;}
.info-card p{font-size:.9rem;color:var(--muted);line-height:1.8;}

/* check list / issue list */
.check-list{list-style:none;padding:0;margin:28px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;}
.check-list li{
  position:relative;padding:12px 16px 12px 38px;background:#fff;border:1px solid var(--line);
  border-radius:10px;font-size:.95rem;line-height:1.7;
}
.check-list li::before{content:"✓";position:absolute;left:14px;top:11px;color:var(--primary);font-weight:800;}

.issue-list{list-style:none;padding:0;margin:28px 0;}
.issue-list li{
  padding:13px 0 13px 26px;position:relative;border-bottom:1px solid var(--line);font-size:.95rem;line-height:1.8;
}
.issue-list li:last-child{border-bottom:none;}
.issue-list li::before{content:"—";position:absolute;left:0;color:var(--accent);font-weight:700;}

/* pair list */
.pair-list{list-style:none;padding:0;margin:28px 0;display:flex;flex-direction:column;gap:14px;}
.pair-item{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;}
.pair-item .pair-term{
  background:var(--dark);color:#fff;padding:6px 16px;border-radius:999px;font-size:.84rem;
  font-weight:700;white-space:nowrap;
}
.pair-item .pair-desc{font-size:.95rem;color:var(--text);line-height:1.8;}

/* quote box */
.quote-box{
  background:var(--dark);color:#fff;padding:30px 32px;border-radius:16px;
  font-size:1.1rem;font-weight:700;line-height:1.95;margin:28px 0;
}

/* role grid */
.role-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin:28px 0;}
.role-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;}
.role-card .role-name{
  display:inline-block;background:var(--primary);color:#fff;font-size:.76rem;font-weight:700;
  padding:4px 13px;border-radius:999px;margin-bottom:12px;
}
.role-card p{font-weight:700;color:var(--dark);font-size:.98rem;line-height:1.7;margin:0;}

/* disclaimer */
.disclaimer-note{font-size:.83rem;color:#8a8078;margin-top:16px;border-top:1px dashed #ddccbb;padding-top:12px;line-height:1.8;}

/* foundation block (section1) */
.foundation-block{margin:32px 0;text-align:center;}
.foundation-top{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:10px;}
.foundation-top span{background:var(--light);color:var(--dark);padding:9px 17px;border-radius:999px;font-size:.9rem;font-weight:700;}
.foundation-arrow{font-size:1.5rem;color:var(--accent);margin:6px 0;}
.foundation-base{
  background:var(--dark);color:#fff;padding:20px 30px;border-radius:14px;
  font-weight:800;font-size:1.05rem;display:inline-block;max-width:520px;
}

/* overlap diagram (section16) */
.overlap-diagram{position:relative;height:250px;max-width:380px;margin:34px auto 20px;}
.overlap-circle{
  position:absolute;top:15px;width:210px;height:210px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#fff;font-weight:800;font-size:.92rem;padding:26px;mix-blend-mode:multiply;line-height:1.6;
}
.overlap-circle.c1{left:0;background:var(--primary);}
.overlap-circle.c2{right:0;background:var(--accent);}
.overlap-caption{text-align:center;font-size:.85rem;color:var(--muted);margin-top:6px;}

/* mm bar (section11) */
.mm-bar{margin:32px 0;}
.mm-bar-track{
  position:relative;height:16px;border-radius:999px;
  background:linear-gradient(to right,var(--light) 0%, var(--accent) 60%, var(--primary) 100%);
  margin-bottom:12px;
}
.mm-bar-caption{display:flex;justify-content:space-between;font-size:.86rem;color:var(--muted);font-weight:700;}

.sec-visual{display:block;width:100%;height:auto;margin:30px 0;border-radius:14px;}

/* mothership banner */
.mothership-banner{background:var(--dark);color:#fff;padding:64px 24px;text-align:center;}
.mothership-banner .badge{
  display:inline-block;background:rgba(255,255,255,.14);padding:7px 18px;border-radius:999px;
  font-size:.82rem;margin-bottom:20px;font-weight:700;
}
.mothership-banner h2{font-size:1.5rem;line-height:1.7;margin-bottom:16px;}
.mothership-banner p{font-size:.95rem;opacity:.9;max-width:660px;margin:0 auto 30px;line-height:1.95;}
.mothership-banner .cta-btn{
  display:inline-block;background:var(--accent);color:#fff;padding:15px 36px;border-radius:999px;
  font-weight:800;text-decoration:none;font-size:1rem;
}

/* final CTA */
.final-cta{background:var(--light);padding:74px 24px;text-align:center;}
.final-cta-inner{max-width:720px;margin:0 auto;}
.final-cta h2{font-size:1.65rem;color:var(--dark);line-height:1.75;margin-bottom:30px;font-weight:800;}
.final-cta .cta-buttons{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:28px;}
.final-cta .cta-btn{
  background:var(--primary);color:#fff;padding:17px 30px;border-radius:999px;font-weight:800;
  text-decoration:none;font-size:.98rem;line-height:1.5;
}
.final-cta .cta-note{font-size:.9rem;color:var(--muted);line-height:1.95;}

/* theme nav */
.theme-nav{padding:64px 24px;background:#fff;}
.theme-nav-inner{max-width:1120px;margin:0 auto;text-align:center;}
.theme-nav h2{font-size:1.3rem;color:var(--dark);margin-bottom:12px;font-weight:800;}
.theme-nav .intro{font-size:.9rem;color:var(--muted);margin-bottom:34px;line-height:1.9;}
.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:left;}
@media(max-width:880px){.theme-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:600px){.theme-grid{grid-template-columns:repeat(2,1fr);}}
.jitsumu-topic-card{
  display:block;background:#faf7f3;border:1px solid var(--line);border-radius:10px;
  padding:14px 12px;text-align:center;font-size:.85rem;color:var(--text);text-decoration:none;
  font-weight:700;line-height:1.6;
}
a.jitsumu-topic-card:hover{border-color:var(--nudge-brand);color:var(--nudge-brand);}
.jitsumu-topic-card.is-current{
  background:var(--nudge-brand);color:#fff;border-color:var(--nudge-brand);cursor:default;
}

/* footer */
.toi-footer{background:#2c2a28;color:#fff;}
.toi-footer-inner{
  max-width:1180px;margin:0 auto;padding:30px 24px;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
}
.toi-footer-copy{font-size:.82rem;opacity:.85;}
.toi-footer-links{display:flex;flex-wrap:wrap;gap:0;font-size:.85rem;}
.toi-footer-links a{color:#fff;text-decoration:none;margin-left:20px;opacity:.9;}
.toi-footer-links a:first-child{margin-left:0;}
.toi-footer-links a:hover{opacity:1;text-decoration:underline;}
@media(max-width:600px){
  .toi-footer-inner{flex-direction:column;align-items:flex-start;}
  .toi-footer-links{gap:6px 0;}
  .toi-footer-links a{margin-left:0;margin-right:16px;}
}