/* 全画面の写真が切り替わるスライド + 一行のメッセージ。本文は白、About / School / Teacher / Journal / Contact の順 */
:root{--white:#fff;--soft:#F6F5F3;--ink:#2E2A27;--mute:#66605B;--line:rgba(46,42,39,.14);--accent:#8A5420;
--disp:'Shippori Mincho','Noto Serif JP','Hiragino Mincho ProN',serif;--body:'Zen Kaku Gothic New','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;--en:'Shippori Mincho','Noto Serif JP',serif;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font:400 16px/2 var(--body)}
img{display:block;max-width:100%;height:auto}
h1,h2,h3{font-family:var(--disp);font-weight:500;line-height:1.6;margin:0;text-wrap:balance}
p{margin:0 0 1em}
a{color:inherit}
.wrap{width:min(1040px,100% - 32px);margin-inline:auto}

/* ヘッダー */
.head{position:absolute;inset:env(safe-area-inset-top,0px) 0 auto 0;z-index:6;color:#fff}
.head .wrap{display:flex;justify-content:space-between;align-items:center;padding-block:22px}
.logo{font-family:var(--disp);font-size:16px;letter-spacing:.2em;text-decoration:none}
.burger{width:44px;height:44px;background:none;border:0;color:inherit;cursor:pointer;display:grid;align-content:center;gap:8px;padding:10px}
.burger span{display:block;height:1px;background:#fff;transition:transform .3s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(20deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-20deg)}
.menu{position:fixed;inset:0;background:rgba(20,22,34,.95);display:none;flex-direction:column;align-items:center;justify-content:center;gap:22px;font-family:var(--disp);font-size:22px;letter-spacing:.14em;z-index:-1}
.menu.open{display:flex}
.menu a{text-decoration:none}

/* スライド（全画面・4枚・24秒で一巡） */
.hero{position:relative;height:100vh;height:100svh;min-height:520px;color:#fff;background:#2b3042;overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;animation:slide 30s infinite}
.slide:nth-child(1){opacity:1;animation-delay:0s}
.slide:nth-child(2){animation-delay:6s}
.slide:nth-child(3){animation-delay:12s}
.slide:nth-child(4){animation-delay:18s}
.slide:nth-child(5){animation-delay:24s}
.slide>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:zoom 30s infinite}
@keyframes slide{0%{opacity:0}4%{opacity:1}20%{opacity:1}24%{opacity:0}100%{opacity:0}}
@keyframes zoom{0%{transform:scale(1)}30%{transform:scale(1.05)}100%{transform:scale(1.05)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(14,16,28,.5),rgba(14,16,28,.2) 45%,rgba(14,16,28,.62));z-index:1}
.moons{position:absolute;left:50%;top:34%;width:min(820px,88vw);aspect-ratio:1920/470;transform:translate(-50%,-50%);z-index:2}
.moons img{position:absolute;inset:0;width:100%;height:100%;opacity:.92}
.msg{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);z-index:3;text-align:center;padding-inline:16px}
.msg h1{font-size:clamp(22px,3.4vw,38px);letter-spacing:.22em;text-shadow:0 1px 18px rgba(0,0,0,.45)}
.fade{opacity:0;animation:in 1.8s ease forwards}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.d4{animation-delay:1.4s;animation-duration:2.6s}
.cue{position:absolute;z-index:3;left:50%;bottom:0;width:1px;height:72px;background:rgba(255,255,255,.2);overflow:hidden}
.cue i{display:block;width:1px;height:36px;background:#fff;animation:cue 2.4s ease-in-out infinite}
@keyframes cue{from{transform:translateY(-36px)}to{transform:translateY(72px)}}
.dots{position:absolute;z-index:3;right:clamp(16px,4vw,48px);bottom:24px;display:flex;gap:8px}
.dots i{width:20px;height:1px;background:rgba(255,255,255,.35)}

.s-moon{background:#003980}
.s-moon>img.bg{height:54%;top:4%;animation:none}
@media(max-aspect-ratio:1/1){.s-moon>img.bg{object-fit:contain}}
/* 本文：英字の見出し + 日本語。四角い写真 */
.sec{padding-block:clamp(64px,10vw,120px)}
.sec+.sec{border-top:1px solid var(--line)}
.eyebrow{font-family:var(--en);font-size:14px;letter-spacing:.3em;color:var(--mute);margin:0 0 6px;text-transform:uppercase}
.sec h2{font-size:clamp(24px,3.4vw,34px);margin-bottom:22px}
.grid{display:grid;gap:36px clamp(32px,6vw,80px);align-items:center}
@media(min-width:800px){.grid{grid-template-columns:1fr 1fr}.grid.rev .pic{order:2}}
.pic img{width:100%}
.more{display:inline-flex;align-items:center;gap:14px;font-size:14px;letter-spacing:.14em;text-decoration:none;margin-top:8px;border-bottom:1px solid var(--ink);padding-bottom:4px}
.more::after{content:"→"}
.lead-text{color:var(--mute)}
.fig-cap{font-size:13px;color:var(--mute);margin-top:8px}
.words{text-align:center;background:var(--soft)}
.words blockquote{margin:0 0 4px;font-family:var(--disp);font-size:clamp(22px,3.6vw,34px);line-height:1.9}
.words cite{display:block;margin-top:18px;font-style:normal;font-size:14px;color:var(--mute)}
.links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:6px}
.foot{background:var(--soft);padding-block:48px;font-size:14px;color:var(--mute)}
.foot .fnav{display:flex;flex-wrap:wrap;gap:6px 24px;margin-bottom:18px}
.foot .fnav a{text-decoration:none;color:var(--ink)}
@media(prefers-reduced-motion:reduce){.fade{animation:none;opacity:1}.slide{animation:none}.slide:not(:first-child){display:none}.slide>img.bg{animation:none}.cue i{animation:none}html{scroll-behavior:auto}}

.narrow{width:min(720px,100% - 32px);text-align:center}
.about h2{font-size:clamp(22px,3.2vw,32px);margin-bottom:28px}
.about p{color:var(--ink)}
.rows{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.rows li{border-bottom:1px solid var(--line)}
.row{display:grid;grid-template-columns:clamp(110px,24vw,260px) 1fr auto;gap:clamp(16px,4vw,48px);align-items:center;padding:20px 0;text-decoration:none}
.row img{width:100%;aspect-ratio:3/2;object-fit:cover}
.row .rt small{display:block;font-size:14px;color:var(--mute);line-height:1.8}
.row .rt b{display:block;font-family:var(--disp);font-weight:500;font-size:clamp(20px,2.6vw,28px);line-height:1.6}
.row .arrow{font-size:20px;padding-right:6px;transition:transform .25s}
.row:hover .arrow{transform:translateX(6px)}
.row.slim{grid-template-columns:1fr auto;padding:22px 0}
.row.slim .rt b{font-size:clamp(18px,2.2vw,22px)}
@media(max-width:560px){.row:not(.slim){grid-template-columns:96px 1fr auto;gap:14px}.row .rt b{font-size:18px}}

/* ---- 内側のページ ---- */
.head.solid{position:relative;color:var(--ink);background:#fff;border-bottom:1px solid var(--line)}
.head.solid .burger span{background:var(--ink)}
.head.solid .burger[aria-expanded="true"] span{background:#fff}
.head.solid .wrap{padding-block:10px}
.menu a{color:#fff}
.page-top{padding-block:clamp(48px,8vw,96px) clamp(24px,4vw,40px)}
.page-top h1{font-size:clamp(28px,4.2vw,44px);margin-bottom:18px}
.kicker{font-family:var(--en);font-size:13px;letter-spacing:.3em;color:var(--mute);margin:0 0 8px}
.lead{max-width:34em;color:var(--mute)}
.sec h2{font-size:clamp(22px,3vw,30px)}
.sec h3{font-size:19px}
.band{background:var(--soft)}
.sec.band+.sec,.sec+.sec.band{border-top:0}
.section-head{margin-bottom:28px}
.section-head p{max-width:34em;color:var(--mute);margin:10px 0 0}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-block;padding:12px 28px;border:1px solid var(--ink);background:var(--ink);color:#fff;text-decoration:none;font-size:15px;letter-spacing:.06em}
.btn.ghost{background:transparent;color:var(--ink)}
.note{font-size:14px;color:var(--mute)}
.plain{margin:0;padding-left:1.2em}
.plain li{margin-bottom:.4em}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:24px clamp(32px,6vw,72px)}
.views{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:0 32px}
.views div{padding:16px 0;border-top:1px solid var(--line)}
.views p{margin:0;color:var(--mute);font-size:15px}
.cycle{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(24px,5vw,56px);align-items:center}
.cycle svg{width:100%;height:auto}
.phases{display:grid;margin:0;padding:0;list-style:none}
.phases li{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;padding:18px 0;border-top:1px solid var(--line)}
.phases li:last-child{border-bottom:1px solid var(--line)}
.dot{grid-row:span 2;width:14px;height:14px;border-radius:50%;margin-top:11px}
.phases h3 small{font-family:var(--body);font-size:14px;color:var(--accent);margin-left:10px;letter-spacing:.08em}
.phases p{margin:0;color:var(--mute);font-size:15px}
@media(max-width:640px){.cycle{grid-template-columns:minmax(0,1fr)}.cycle svg{max-width:200px;margin-inline:auto}}
.timeline{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:0 28px}
.timeline dt{font-family:var(--disp);font-size:18px;padding:12px 0;border-top:1px solid var(--line);color:var(--accent)}
.timeline dd{margin:0;padding:12px 0;border-top:1px solid var(--line)}
@media(max-width:560px){.timeline{grid-template-columns:minmax(0,1fr)}.timeline dt{padding-bottom:0}.timeline dd{border-top:0;padding-top:2px}}
.figure{margin:28px auto 0;max-width:760px}
.figure img{width:100%;height:auto}
.figure figcaption{font-size:13px;color:var(--mute);margin-top:8px}
.figure.wide{max-width:1040px;margin-top:0}
.figure.wide img{max-height:420px;object-fit:cover}
.figure.side{margin:0}
.split{display:grid;gap:28px 56px;align-items:center}
@media(min-width:760px){.split{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:16px}
.tcard{background:#fff;border:1px solid var(--line);padding:20px 22px}
.tcard h3{font-size:18px;line-height:1.55;margin-bottom:4px}
.tcard .who{margin:0 0 10px;font-size:15px;color:var(--mute);line-height:1.7}
.tcard .links{margin:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:15px}
.tag{display:inline-block;margin-left:8px;padding:0 8px;font:400 12px/1.8 var(--body);letter-spacing:.06em;color:var(--accent);border:1px solid var(--accent)}
.words blockquote{margin:0 0 4px}
/* ---- 第4案の追加 ---- */
.phase3{list-style:none;margin:32px 0 8px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.phase3 li{border-top:1px solid var(--line);padding:18px 4px 0;text-align:center}
.phase3 .dot{display:block;width:12px;height:12px;border-radius:50%;margin:0 auto 10px}
.phase3 small{display:block;font-size:13px;color:var(--mute);letter-spacing:.1em}
.phase3 b{display:block;font-family:var(--disp);font-weight:500;font-size:clamp(18px,2.6vw,24px);letter-spacing:.14em}
.candle{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:50% 58%}
.stars{position:relative;color:#fff;background:#0b1230 url(img/stars.jpg) center/cover}
.stars::before{content:"";position:absolute;inset:0;background:rgba(6,10,32,.55)}
.stars .wrap{position:relative}
.stars .kicker,.stars p{color:#fff}
.stars .btn{background:#fff;color:var(--ink);border-color:#fff}
.ringfig{max-width:560px;margin:0 auto 24px}
.ringsvg{width:100%;height:auto;display:block}
.phases.ph li{grid-template-columns:clamp(88px,18vw,140px) 1fr;align-items:start}
.phimg{grid-row:span 2;width:100%;aspect-ratio:1;object-fit:cover}
.phases.ph h3{margin-top:2px}
.scrollx{max-width:900px}
.scrollbox{overflow-x:auto}
.horsvg{width:100%;min-width:640px;height:auto;display:block}
.phase3 img{width:100%;aspect-ratio:4/5;object-fit:cover;margin:0 0 12px}
.phase3 li{padding-top:0;border-top:0}
.sky{position:relative;background:#cfe0f7 url(img/sky.jpg) center/cover}
.sky::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.62)}
.sky .wrap{position:relative}
.us-name{font-family:var(--disp);font-size:18px;line-height:1.9}
.about .pc{display:none}@media(min-width:700px){.about .pc{display:inline}}
.narrow .more{margin-top:20px}
.sec .grid .more{margin-top:10px}
@media(max-aspect-ratio:1/1){.msg{top:66%}}
@media print{.head,.foot,.burger,.menu{display:none!important}body{font-size:12pt}.sec{padding-block:20px}}