:root{
  --navy:#1B3A4B; --text:#2C3E50; --accent:#2E86C1; --accent-dark:#1B6FA8; --accent-light:#6FB6E2;
  --paper:#F8F6F1; --white:#fff; --muted:rgba(44,62,80,.72); --line:rgba(27,58,75,.16);
  --pad-x:clamp(20px,6vw,96px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{margin:0;padding:0;background:var(--paper)}
body{color:var(--text);font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  -webkit-font-smoothing:antialiased;font-size:16px;line-height:2}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-dark)}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
p{margin:0}
.inner{max-width:1080px;margin:0 auto;width:100%}
.inner.wide{max-width:1200px}
.inner.text{max-width:760px}
.eyebrow{margin:0 0 20px;font-size:12px;letter-spacing:.28em;font-weight:700;color:var(--accent)}
.h2{margin:0;font-size:clamp(26px,3.6vw,44px);font-weight:900;color:var(--navy);line-height:1.4;word-break:keep-all;overflow-wrap:anywhere}
.lead{margin:clamp(20px,4vh,36px) 0 0;font-size:clamp(15px,1.3vw,17px);line-height:2.1;max-width:62ch}
.muted{color:var(--muted)}
.small{font-size:13px;line-height:1.9}
.blue{color:var(--accent)}
.nb{white-space:nowrap}

/* ボタン */
.btn{display:inline-block;background:var(--accent);color:#fff;font-size:16px;font-weight:700;padding:16px 36px;letter-spacing:.04em}
.btn:hover{background:#3B97D4;color:#fff}
.btn.big{font-size:clamp(17px,1.6vw,20px);font-weight:900;padding:22px 48px;box-shadow:0 10px 28px rgba(46,134,193,.28)}
.btn.big:hover{background:var(--accent-dark)}
.btn.soon{background:rgba(46,134,193,.14);color:var(--accent-dark);box-shadow:none;cursor:default;text-align:center}
.btn.soon small{display:block;font-size:12px;font-weight:700;letter-spacing:.16em;margin-top:2px}
.btn-outline{display:inline-block;font-size:15px;font-weight:900;color:var(--accent);border:2px solid var(--accent);padding:12px 26px}
.btn-outline:hover{background:var(--accent);color:#fff}
.link{font-size:15px;font-weight:700;border-bottom:1px solid rgba(46,134,193,.4);padding-bottom:3px}
.links{display:flex;flex-wrap:wrap;gap:12px 24px}

/* ヒーロー（トップ） */
.hero{background:var(--navy);color:#fff;padding:clamp(72px,12vh,140px) var(--pad-x) clamp(80px,12vh,140px);min-height:88vh;display:flex;flex-direction:column;justify-content:center}
.hero .brand{margin:0 0 clamp(40px,7vh,72px);font-size:14px;letter-spacing:.22em;font-weight:500;color:rgba(255,255,255,.72)}
.hero h1{margin:0;font-size:clamp(36px,6.4vw,78px);line-height:1.32;font-weight:900;letter-spacing:.01em;word-break:keep-all;overflow-wrap:anywhere}
.hero .tag{margin:clamp(28px,4vh,40px) 0 0;font-size:clamp(16px,1.6vw,21px);line-height:2;color:rgba(255,255,255,.88);word-break:keep-all;overflow-wrap:anywhere}
.hero .cred{margin:clamp(48px,7vh,72px) 0 0;font-size:13px;line-height:1.9;color:rgba(255,255,255,.56);max-width:52ch}
.hero .cta{margin-top:clamp(32px,5vh,44px)}

/* セクション */
.sec{padding:clamp(72px,13vh,150px) var(--pad-x)}
.sec.white{background:var(--white)}
.sec.paper{background:var(--paper)}
.sec.tight{padding-top:clamp(48px,8vh,88px);padding-bottom:clamp(56px,9vh,100px)}

/* 7つのステップ */
.steps{margin-top:clamp(48px,8vh,88px);display:grid;grid-template-columns:repeat(7,1fr);border-top:2px solid var(--navy)}
.step{background:#fff;padding:22px 16px 30px;display:flex;flex-direction:column;gap:10px;border-left:1px solid var(--line)}
.step:first-child{border-left:0}
.step .n{font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--accent)}
.step .t{font-size:clamp(16px,1.4vw,20px);font-weight:900;color:var(--navy);line-height:1.5;word-break:keep-all}
.step .d{font-size:13px;line-height:1.8;color:var(--muted)}
@media (max-width:900px){
  .steps{grid-template-columns:repeat(4,1fr)}
  .step{border-bottom:1px solid var(--line)}
  .step:nth-child(4n+1){border-left:0}
}
@media (max-width:520px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .step:nth-child(4n+1){border-left:1px solid var(--line)}
  .step:nth-child(2n+1){border-left:0}
}
.stem{display:flex;justify-content:center;padding:14px 0 0}
.stem div{width:1px;height:28px;background:rgba(27,58,75,.3)}
.base{background:var(--navy);color:#fff;padding:clamp(24px,4vw,40px) clamp(20px,4vw,44px);display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px}
.base .t{font-size:clamp(16px,1.5vw,19px);font-weight:900;letter-spacing:.02em;white-space:nowrap}
.base .d{font-size:clamp(14px,1.2vw,16px);line-height:2;color:rgba(255,255,255,.88);flex:1 1 300px;min-width:0}

/* 書籍 */
.book{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(40px,6vw,80px);align-items:start}
.cover{background:var(--navy);aspect-ratio:1/1.42;padding:clamp(28px,4vw,44px);display:flex;flex-direction:column;justify-content:space-between;max-width:420px;width:100%}
.cover .t{font-size:clamp(24px,3.2vw,36px);font-weight:900;color:#fff;line-height:1.5}
.cover .s{margin-top:clamp(20px,3vh,28px);font-size:clamp(12px,1.1vw,14px);line-height:2;color:rgba(255,255,255,.8)}
.cover .a{font-size:13px;letter-spacing:.14em;color:rgba(255,255,255,.72)}
.mt{margin-top:clamp(20px,3vh,28px)}
.mt-l{margin-top:clamp(32px,5vh,44px)}

/* 案内のカード */
.cards{margin-top:clamp(48px,8vh,88px);display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:clamp(32px,4vw,56px)}
.card{border-top:2px solid var(--navy);padding-top:26px;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.card h3{margin:0;font-size:clamp(19px,1.8vw,23px);font-weight:900;color:var(--navy);line-height:1.5}
.card p{font-size:15px;line-height:2.05;flex:1}
.status{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.08em;padding:2px 10px;border:1px solid var(--line);color:var(--muted);line-height:1.9}
.status.ok{border-color:rgba(46,134,193,.5);color:var(--accent-dark)}

/* 下層ページ */
.bar{background:var(--navy);padding:0 var(--pad-x)}
.bar .inner{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:16px}
.bar a{color:rgba(255,255,255,.86);font-size:14px}
.bar a:hover{color:#fff}
.bar .brand{font-weight:700;letter-spacing:.18em;color:#fff}
.band{background:var(--navy);color:#fff;padding:clamp(40px,8vh,88px) var(--pad-x) clamp(48px,9vh,96px);border-top:1px solid rgba(255,255,255,.08)}
.band h1{margin:0;font-size:clamp(28px,4.6vw,52px);font-weight:900;line-height:1.4;word-break:keep-all;overflow-wrap:anywhere}
.band .sub{margin-top:18px;font-size:clamp(14px,1.3vw,16px);line-height:2;color:rgba(255,255,255,.8)}
.band .crumb{margin:0 0 18px;font-size:13px;letter-spacing:.06em}
.band .crumb a{color:rgba(255,255,255,.72);border-bottom:1px solid rgba(255,255,255,.3)}
.prose p{margin:0 0 1.2em;font-size:clamp(15px,1.3vw,17px);line-height:2.1}
.prose p.small{font-size:13px}
.prose h2{margin:2.4em 0 .8em;font-size:clamp(20px,2vw,26px);font-weight:900;color:var(--navy);line-height:1.5}
.prose ul{margin:0 0 1.2em;padding-left:1.3em}
.prose li{margin:.2em 0;line-height:2}
.panel{background:var(--paper);border-top:2px solid var(--navy);padding:22px 24px;margin:0 0 1.6em}
.panel ul,.panel p:last-child{margin-bottom:0}
table.spec{border-collapse:collapse;width:100%;margin:0 0 1.4em;font-size:15px}
table.spec th,table.spec td{border-bottom:1px solid var(--line);padding:12px 8px;text-align:left;vertical-align:top}
table.spec th{color:var(--navy);font-weight:700;white-space:nowrap;width:7em}

/* フッター */
.foot{background:var(--navy);color:#fff;padding:clamp(56px,10vh,110px) var(--pad-x)}
.foot .sns{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.foot .sns a{font-size:16px;font-weight:700;color:var(--accent)}
.foot .sns a:hover{color:var(--accent-light)}
.foot .sep{color:rgba(255,255,255,.3)}
.foot nav{margin-top:28px;display:flex;flex-wrap:wrap;gap:6px 22px}
.foot nav a{font-size:13px;color:rgba(255,255,255,.72);white-space:nowrap}
.foot nav a:hover{color:#fff}
.foot .disc{margin-top:clamp(36px,6vh,60px);font-size:12.5px;line-height:2.1;color:rgba(255,255,255,.66);max-width:64ch}
.foot .copy{margin-top:20px;font-size:12.5px;color:rgba(255,255,255,.66)}