:root{
  --ink:#26324b;
  --muted:#687187;
  --paper:#fff6e6;
  --card:#fff;
  --red:#f7773f;
  --red-dark:#c55326;
  --green:#36ae86;
  --navy:#26324b;
  --amber:#e9a72f;
  --line:#dfd6c8;
  --blue:#3f87e8;
  --sky:#d5efff;
  --yellow:#ffd657;
  --shadow:0 8px 0 rgba(38,50,75,.14);
}

html{font-size:16px}
body{
  background:linear-gradient(180deg,var(--sky) 0 220px,var(--paper) 220px 100%);
  color:var(--ink);
  font-family:"Hiragino Maru Gothic ProN","Yu Gothic UI","Meiryo",sans-serif;
  line-height:1.75;
}
body:before{display:none}
button,input,select,textarea{font:inherit}
a{color:#276b59}
h1,h2,h3,.logo,.brand,.brandline,.calc h2,.impact h2,.impact-total,.countline,.shock,.compare b,.bridge p,.ideas h2,.reason,.support h3,.legacy h2,.legacy-quote,.seo h2,.quote{
  font-family:inherit!important;
}
h1,h2{color:var(--ink);letter-spacing:.01em}

/* co-sodate共通ヘッダー */
body>header{
  position:sticky;
  top:0;
  z-index:30;
  background:rgba(213,239,255,.96);
  color:var(--ink);
  border-bottom:2px solid rgba(38,50,75,.14);
  backdrop-filter:blur(10px);
}
.head,.page header{
  width:min(1040px,calc(100% - 32px));
  margin-left:auto;
  margin-right:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.head{padding:12px 0}
.page header{padding:10px 0;margin-bottom:25px}
.brand-group{display:flex;align-items:center;gap:10px;min-width:0}
.co-brand{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--ink);
  text-decoration:none;
  font-weight:900;
  letter-spacing:.03em;
  white-space:nowrap;
}
.co-mark{
  display:grid;
  place-items:center;
  width:39px;
  height:39px;
  border:3px solid var(--ink);
  border-radius:13px;
  background:var(--yellow);
  box-shadow:0 3px 0 var(--ink);
  line-height:1;
}
.brand-divider{width:1px;height:27px;background:rgba(38,50,75,.25)}
.brand{
  color:var(--ink)!important;
  text-decoration:none;
  font-size:1rem!important;
  font-weight:900;
  letter-spacing:.04em;
  white-space:nowrap;
}
.head nav{display:flex;align-items:center;gap:8px}
.head nav a{
  color:var(--ink);
  background:#fff;
  border:2px solid var(--ink);
  border-radius:999px;
  padding:7px 11px;
  text-decoration:none;
  font-size:.78rem;
  font-weight:900;
}
.head nav a:first-child{background:var(--green);color:#fff}
.head nav a:hover,.co-brand:hover,.brand:hover{transform:translateY(-1px)}

/* 計算トップ */
.page{padding:12px 18px 50px;background:transparent}
.shell{width:min(1040px,100%)}
.quiet{color:var(--muted);font-weight:700}
.header-actions{display:flex;align-items:center;gap:12px}
.header-check{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:7px 12px;
  color:var(--ink);
  background:#fff;
  border:2px solid var(--ink);
  border-radius:999px;
  text-decoration:none;
  font-size:.78rem;
  font-weight:900;
  white-space:nowrap;
}
.first-view{max-width:980px;gap:26px}
.hero .kicker,.kicker{
  display:inline-block;
  width:max-content;
  max-width:100%;
  color:#276b59;
  background:#e4f7ef;
  border-radius:999px;
  padding:5px 10px;
  letter-spacing:.04em;
  font-weight:900;
}
.hero h1{font-weight:900!important;line-height:1.15!important;letter-spacing:.01em!important}
.hero h1 em{color:var(--red)}
.hero p{color:var(--muted);font-weight:700}
.brandline{color:#526075!important;font-weight:800}
.hero-art{display:block;width:100%;height:auto;margin:22px 0 0;border:3px solid var(--ink);border-radius:22px;box-shadow:0 6px 0 rgba(38,50,75,.14)}
.calc,.reveal,.ideas,.legacy{
  background:#fff;
  border:3px solid var(--ink);
  box-shadow:var(--shadow);
}
.calc{border-radius:25px}
.calc-title{font-weight:900}
input,select{
  border:2px solid #bdc5ce;
  border-radius:13px;
  min-height:49px;
}
input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(63,135,232,.16)}
.notice{background:#fff7dd;border:1px solid #ead9a8;color:#5d574b}
.primary,.start,.done,.line{
  border:3px solid var(--ink)!important;
  border-radius:14px;
  box-shadow:0 4px 0 var(--ink)!important;
  font-weight:900;
}
.primary,.start{background:var(--red)!important;color:#fff!important}
.primary:hover,.start:hover,.done:hover,.line:hover{filter:none;transform:translateY(-1px)}
.primary:active,.start:active,.done:active,.line:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)!important}
.stagebar li{font-weight:900}.stagebar li.current{color:var(--red-dark)}
.stagebar li.current b{background:var(--red)}.stagebar li.done b{background:var(--green)}
.path,.idea,.impact-stat,.legacy-card,.links a{
  border:2px solid #cfd5da;
  background:#fff;
}
.path:hover,.path.active,.idea:hover,.idea.selected{border-color:var(--red);background:#fff4ed}
.impact{background:#e4f7ef;border:2px solid #b9dfd0}
.support{background:#eef8ff;border:2px solid #c7dfef}
.support-link{color:#276b59}
.seo{border-top:3px solid rgba(38,50,75,.14)}
.seo h2{font-weight:900}
.formula{background:#fff;border:2px solid #d7dde2}
.readiness-entry{
  width:min(900px,100%);
  margin:30px auto 0;
  padding:24px 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:23px;
  box-shadow:var(--shadow);
}
.readiness-copy{min-width:0}
.readiness-label{display:block;color:#276b59;font-size:.76rem;font-weight:900;letter-spacing:.04em;margin-bottom:3px}
.readiness-entry h2{margin:0;font-size:clamp(1.45rem,3vw,2rem);font-weight:900;line-height:1.35}
.readiness-entry p{margin:7px 0 11px;max-width:560px;color:var(--muted);font-size:.9rem;font-weight:700}
.readiness-points{display:flex;flex-wrap:wrap;gap:6px}
.readiness-points span{padding:4px 9px;background:#eaf5fc;border-radius:999px;color:#42637c;font-size:.72rem;font-weight:900}
.readiness-button{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:51px;
  padding:12px 18px;
  color:#fff;
  background:var(--green);
  border:3px solid var(--ink);
  border-radius:14px;
  box-shadow:0 4px 0 var(--ink);
  text-decoration:none;
  font-weight:900;
  white-space:nowrap;
}
.readiness-button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ink)}

/* 記事とチェック画面 */
body>main{width:min(1040px,calc(100% - 28px));padding-top:25px}
.crumb{color:var(--muted);font-weight:700}
.crumb a{color:#42637c}
.layout{grid-template-columns:minmax(0,720px) 270px;gap:24px}
article,.side-card,.deadline,.item,.result-box{
  background:#fff;
  border:2px solid #cfd5da;
}
article{border-radius:24px;box-shadow:var(--shadow)}
article h1{font-weight:900;line-height:1.35}
article h2{font-weight:900;line-height:1.45}
p,li{color:#4e5968}
.summary,.answer,.inline-cta,.consult{background:#eaf8f2;border-color:#b8dccf}
.toc,.jump a,.check,.mini-card,.related a{background:#fff;border:2px solid #d7dde2}
.step{border:2px solid #d7dde2;background:#fff}.step span{background:var(--blue)}
th{background:#eaf5fc}
.note{background:#fff7dd;border-color:#ead9a8}
.cta{background:var(--ink);border:3px solid var(--ink);box-shadow:0 5px 0 rgba(38,50,75,.18)}
.cta h2{color:#fff}.cta a,.inline-cta a,.pr-box a{background:var(--red);border:2px solid #fff;font-weight:900}
.side-card{border-radius:17px}.side-card b{font-weight:900;color:var(--ink)}
.side-card a{display:inline-block;padding:6px 0}
article>img{border:3px solid var(--ink)!important;border-radius:20px!important;box-shadow:0 6px 0 rgba(38,50,75,.12)}
body>main>nav{width:max-content;max-width:100%;background:#fff;border:2px solid #d7dde2;border-radius:999px;padding:7px 12px;font-size:.82rem}
body>main>.hero{background:#fff;color:var(--ink);border:3px solid var(--ink);box-shadow:var(--shadow);border-radius:24px}
body>main>.hero h1{color:var(--ink);font-weight:900}
body>main>.hero p{color:var(--muted);font-weight:700}
body>main>.hero strong{color:var(--red-dark)}
.chosen{background:var(--ink);border:3px solid var(--ink);box-shadow:0 7px 22px rgba(38,50,75,.24)}
footer{color:var(--muted);font-weight:700}
footer:before{content:"co-sodate  /  あと何回。";display:block;color:var(--ink);font-weight:900;margin-bottom:4px}

/* 迷わない操作フィードバック */
button,a{transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:4px solid rgba(63,135,232,.35);outline-offset:3px}

@media(max-width:780px){
  body{background:linear-gradient(180deg,var(--sky) 0 180px,var(--paper) 180px 100%)}
  .layout{grid-template-columns:1fr}
  .head nav{display:flex}
  .head nav a:not(:first-child){display:none}
  .side{position:static}
}
@media(max-width:650px){
  .page{padding:8px 12px 36px}
  .head,.page header{width:min(100% - 20px,1040px)}
  .co-brand{font-size:.86rem}.co-mark{width:35px;height:35px;border-radius:11px}
  .brand-divider{height:23px}.brand{font-size:.88rem!important}
  .quiet{display:none}
  .header-actions{gap:0}
  .header-check{min-height:37px;padding:6px 10px;font-size:.72rem}
  .first-view .hero h1{font-size:2.55rem}
  .hero-art{margin-top:17px;border-width:2px;border-radius:17px}
  .calc{border-width:2px;box-shadow:0 6px 0 rgba(38,50,75,.12)}
  article{border-width:2px;box-shadow:0 6px 0 rgba(38,50,75,.12)}
  .readiness-entry{margin-top:24px;padding:20px 17px;display:grid;gap:17px;border-width:2px;box-shadow:0 6px 0 rgba(38,50,75,.12)}
  .readiness-button{width:100%}
}
@media print{
  body>header,.page header{display:none!important}
  body{background:#fff}
  article{border:0;box-shadow:none}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}