/* Why → How → What story blocks for the homepage and the representative message (2026-11-04). */
.why-story{background:var(--navy);color:#fff;padding:120px 0}
.why-story .eyebrow{color:#9fd8aa}
.why-story .eyebrow i{background:#9fd8aa}
.why-manifesto{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:44px}
.why-manifesto p{margin:0;font-size:clamp(18px,1.7vw,22px);line-height:2.05;letter-spacing:.06em;font-weight:500}
.why-manifesto .why-lead{font-size:clamp(24px,2.6vw,34px);line-height:1.7;font-weight:700}
.why-manifesto .why-turn{font-size:clamp(22px,2.3vw,30px);line-height:1.8;font-weight:700}
.why-manifesto .why-self{font-size:clamp(26px,2.9vw,38px);line-height:1.6;font-weight:700;color:#9fd8aa;padding:12px 0;border-block:1px solid rgba(255,255,255,.22)}
.why-manifesto .why-close{font-size:clamp(26px,2.9vw,40px);line-height:1.7;font-weight:700}
.why-manifesto p>span{display:block;text-wrap:balance}

.how-story{padding:110px 0}
.how-story-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:56px}
.how-story-head h2{font-size:clamp(28px,3vw,42px);line-height:1.5;margin:0}
.how-story-head p{margin:0 0 12px;font-size:16px;line-height:2}
.how-elements{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.how-elements li{background:#fff;border-top:4px solid var(--green);padding:28px 26px;display:flex;flex-direction:column;gap:10px}
.how-elements b{font-size:22px;color:var(--navy);letter-spacing:.08em}
.how-elements span{font-size:15px;line-height:1.9;color:var(--ink)}
.how-story-note{margin:28px 0 0;font-size:15px;line-height:2}

.program-story{padding:110px 0}
.program-story h2{font-size:clamp(30px,3.4vw,46px);line-height:1.4;margin:0 0 20px}
.program-lead{font-size:clamp(17px,1.5vw,20px);line-height:2;max-width:820px;margin:0 0 48px}
.program-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:0 0 28px;padding:0;list-style:none}
.program-steps li{background:#fff;padding:32px 30px;display:flex;flex-direction:column;gap:12px}
.program-steps .step-no{font:700 13px/1 Arial,sans-serif;letter-spacing:.18em;color:var(--green-dark)}
.program-steps h3{font-size:24px;line-height:1.5;margin:0;color:var(--navy)}
.program-steps p{margin:0;font-size:15px;line-height:1.95}
.program-notes{margin:0 0 36px;padding:0;list-style:none;font-size:13.5px;line-height:1.9;color:var(--muted)}
.program-actions{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}

.how-elements span,.how-story-head p,.how-story-note,.program-lead,.program-steps p,.program-notes li,.message-story .message-body p,.rep-message-body p{text-wrap:pretty}
.message-story .message-body p{line-height:2.05}
.message-story h2{line-height:1.5}

.rep-message{padding:100px 0}
.rep-message .why-manifesto{margin:0 0 64px;max-width:none}
.rep-message .why-manifesto p{color:var(--ink)}
.rep-message .why-manifesto .why-self{color:var(--green-dark);border-color:var(--line)}
.rep-message-body{max-width:760px;display:flex;flex-direction:column;gap:26px}
.rep-message-body p{margin:0;font-size:16px;line-height:2.1}
.rep-message-body .why-close{font-size:clamp(24px,2.6vw,34px);line-height:1.7;font-weight:700;color:var(--navy);margin-top:20px}
.rep-message-body .why-close span{display:block}
.rep-message-sign{margin-top:36px;font-size:14px;letter-spacing:.06em}
.rep-message hr{border:0;border-top:1px solid var(--line);margin:8px 0;width:72px}

/* Mission・Vision・Concept を横3列に */
.audience-grid.mvc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.mvc-grid .principle-statement{word-break:auto-phrase;text-wrap:balance}
.mvc-grid .concept-formula{margin:0;font-weight:700;color:var(--green-dark);letter-spacing:.04em}

@media(max-width:860px){
 .audience-grid.mvc-grid{grid-template-columns:1fr}
 .how-story-head{grid-template-columns:1fr;gap:20px}
 .how-elements,.program-steps{grid-template-columns:1fr}
}
@media(max-width:680px){
 .why-story{padding:80px 0}
 .why-manifesto{gap:34px}
 .why-manifesto p{font-size:16px;line-height:1.95;letter-spacing:.02em}
 .why-manifesto p>span+span{margin-top:6px}
 .why-manifesto .why-lead,.why-manifesto .why-self,.why-manifesto .why-close{font-size:22px;letter-spacing:.02em}
 .why-manifesto .why-turn{font-size:19px;letter-spacing:.02em}
 .rep-message-body .why-close{font-size:22px}
 .how-story,.program-story{padding:76px 0}
 .program-steps li,.how-elements li{padding:24px 20px}
 .rep-message{padding:70px 0}
}