:root{color-scheme:light;--ink:#533d2f;--muted:#675d52;--paper:#fcf8ee;--cream:#f8f3e5;--green:#4b603c;--rose:#8b554d;--line:#d5d7bd;--serif:"Yu Mincho","Hiragino Mincho ProN","Noto Serif CJK JP",serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Hiragino Sans","Yu Gothic",Meiryo,sans-serif;font-size:16px;line-height:1.85}
[hidden]{display:none!important}
a{color:inherit}
a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid #a16b53;outline-offset:5px}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:var(--serif);line-height:1.5}
h2{font-size:clamp(1.45rem,3.5vw,2.35rem);letter-spacing:.055em}
.wrap{width:min(1100px,calc(100% - 72px));margin-inline:auto}
.header{max-width:1400px;margin:auto;padding:21px clamp(24px,5vw,76px);display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{font-family:var(--serif);font-weight:bold;text-decoration:none}
.brand span{color:var(--rose);margin-right:.3em}
nav{display:flex;gap:28px;font-size:.87rem}
nav a{text-decoration:none}
nav a:hover{text-decoration:underline}
.hero{max-width:1400px;margin:0 auto;padding:clamp(38px,5vw,68px) 24px 48px;text-align:center;background:url("flyer-branch.webp") left top / clamp(72px,14vw,165px) auto no-repeat,url("flyer-bird.webp") right 22px top 14px / clamp(45px,8vw,95px) auto no-repeat,var(--cream);border-bottom:1px solid var(--line)}
.eyebrow{color:var(--green);font-size:.9rem;font-weight:bold;letter-spacing:.08em}
.hero h1{font-family:"Hiragino Maru Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-size:clamp(1.65rem,4.2vw,3.6rem);line-height:1.35;letter-spacing:.035em;margin:12px auto}
.hero h1{text-wrap:balance}
.hero h1 span:first-child{color:var(--green)}
.tagline{font-size:clamp(.92rem,2.4vw,1.19rem);font-weight:bold;text-wrap:balance}
.tagline strong{color:#a44e36;white-space:nowrap}
.hero-info{margin:16px 0;color:var(--muted);font-size:.94rem}
.hero-info span{margin-left:.6em}
.hero-art{position:relative;max-width:610px;margin:22px auto 0}
.hero-family{display:block;width:100%;height:auto}
.hero-book,.hero-cup{position:absolute;height:auto;width:clamp(52px,9vw,105px)}
.hero-book{right:calc(100% + 12px);top:10%}
.hero-cup{left:calc(100% + 12px);bottom:4%}
@media(max-width:870px){.hero-book,.hero-cup{display:none}}
.button{font:inherit;font-weight:bold;display:inline-flex;align-items:center;justify-content:center;gap:20px;background:var(--green);color:#fffdf7;border:0;border-radius:99px;padding:12px 24px;text-decoration:none;min-height:48px}
a.button:hover{background:#314637}
.button:disabled{background:#dddcd2;color:#504f48}
.intro{text-align:center;padding:clamp(56px,8vw,104px) 0}
.intro p{margin:16px auto;max-width:620px}
.intro .welcome{display:inline-block;color:var(--green);font-size:.9rem;font-weight:bold;margin-top:22px;padding:8px 16px;background:#e8ece1;border-radius:24px}
.welcome-item{display:inline-block;white-space:nowrap}
@media(max-width:600px){.welcome-audience{display:block}.welcome-divider{display:none}}
.schedule{background:#edf0e2;padding:clamp(55px,7vw,90px) 0}
.section-head{text-align:center;margin-bottom:34px}
.section-head h2{margin-top:6px}
.months{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.month{background:#fffdf7;border:1px solid var(--line);border-top:4px solid #9ba88b;border-radius:14px;padding:20px;min-height:205px}
.month:nth-of-type(3n+2){border-top-color:#c3938a}
.month:nth-of-type(3n){border-top-color:#cfaa83}
.month-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.month-number{font-family:var(--serif);color:var(--green);font-size:1.6rem;font-weight:bold}
.month time,.description,.detail,.note{color:var(--muted);font-size:.87rem}
.month h3{font-size:1.11rem;margin-bottom:8px}
.age{font-size:.8rem;color:var(--green);font-weight:bold;margin-bottom:5px}
summary,.detail-link{cursor:pointer;color:var(--green);font-size:.87rem;font-weight:bold;margin-top:10px;min-height:33px}
.detail{margin-top:4px}
.info{padding:clamp(56px,8vw,100px) 0;display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,6vw,75px);align-items:center}
dl{display:grid;grid-template-columns:auto 1fr;margin:18px 0 0}
dt,dd{margin:0;border-bottom:1px solid var(--line);padding:9px 0;font-size:.91rem}
dt{font-weight:bold;padding-right:17px}
.apply{background:#eee2d8;border-radius:24px;padding:clamp(22px,4vw,38px)}
.apply h2{text-align:center}
.apply .button{display:flex;width:fit-content;max-width:100%;margin-inline:auto;text-align:center}
.apply p{margin:12px 0 17px}
.apply .note{margin:10px 0 0}
.teacher{border-top:1px solid var(--line);padding:clamp(44px,7vw,82px) 0;display:grid;grid-template-columns:clamp(120px,21vw,180px) minmax(0,1fr);align-items:center;gap:20px clamp(16px,4vw,36px)}
.teacher h2,.teacher-profile{grid-column:1 / -1}
.teacher h3{font-size:clamp(1.35rem,3vw,1.8rem)}
.teacher-identity p,.teacher-profile p + p{margin-top:8px}
.teacher-profile{max-width:42em}
.credentials{color:var(--green);font-weight:bold;font-size:.9rem}
.portrait{background:#ece9db;color:#6d6c57;border-radius:48% 48% 17% 17%;aspect-ratio:1;display:grid;place-content:center;text-align:center;overflow:hidden}
.portrait:has(img){display:block}
.portrait img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 4%}
.portrait span{font-size:2.2rem}
footer{background:#e6eadf;padding:34px 0;text-align:center}
footer p,#footer-links a{font-size:.85rem}
#footer-links a{margin:0 8px}
@media(max-width:850px){.months{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.wrap{width:calc(100% - 40px)}.header{padding:13px 20px;flex-wrap:wrap;gap:6px 15px}.brand{font-size:.88rem}nav{gap:20px;font-size:.8rem}.hero{padding:58px 18px 32px;background-position:left top,right 8px top 8px,center}.hero h1{font-size:clamp(1.1rem,6vw,2.15rem)}.hero h1 span:first-child{display:block}.hero-title-ending{white-space:nowrap}.intro{text-align:left}#intro-title{font-size:clamp(1rem,6vw,1.45rem)}#intro-title span{display:block;white-space:nowrap}.intro .welcome{display:block;width:fit-content;text-align:center;border-radius:15px}.months,.info{grid-template-columns:1fr}.month{min-height:0}.teacher{grid-template-columns:clamp(92px,30vw,128px) minmax(0,1fr);gap:16px}.schedule{padding-top:48px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Dividers follow each grid row at the same breakpoints as the cards. */
.month-divider{
  display:none;
  grid-column:1 / -1;
  height:16px;
  background:
    url("month-botanical.svg") center / 144px 16px no-repeat,
    linear-gradient(90deg,transparent,#c6c5aa 25%,#c6c5aa 75%,transparent) center / min(100%,260px) 1px no-repeat;
}
@media(min-width:851px){.month-divider:nth-of-type(3n){display:block}}
@media(min-width:601px) and (max-width:850px){.month-divider:nth-of-type(2n){display:block}}
@media(max-width:600px){.month-divider{display:block}}
.month .description,.detail-expanded p{white-space:pre-line}
.detail-expanded{border-top:1px solid var(--line);padding-top:12px}
.detail-expanded h4,.detail-expanded h5{margin:0;color:var(--ink);font-size:1em}
.detail-expanded h4{font-size:1.13em}
.detail-expanded p,.detail-expanded h5{margin-top:12px}
.detail-expanded ul{margin:6px 0 0;padding-inline-start:1.35em}
.detail-apply{display:flex;width:fit-content;max-width:100%;margin:16px auto 0;text-align:center}