/* Palette from the supplied Cocotto Yodogawa logo. */
:root{--ink:#65483f;--sky:#85d4f3;--sky-light:#eefaff;--coral:#ff9e94;--coral-light:#fff2ef;--sun:#ffda73;--mint:#b8dfc7;--blue-ink:#285e75;--line:#e9ddd5}
body{color:var(--ink);background:#fffefb;font-family:'Yu Gothic','Hiragino Kaku Gothic ProN',sans-serif}
:focus-visible{outline-color:var(--blue-ink)}
.header{height:112px;background:#fff;border-bottom:1px solid #e7f1f4;padding:10px 4%;gap:24px}
.brand{display:block;flex-shrink:0;line-height:0;white-space:normal}
.brand img{display:block;width:250px;height:auto}
nav{gap:22px}nav a{font-size:12px}
.nav-contact,.button,.mobile-cta{color:var(--ink);background:var(--sun);border:2px solid var(--ink);box-shadow:3px 4px 0 #f7e4bd}
.nav-contact{padding:10px 18px;box-shadow:3px 4px 0 #f9ddd5;background:var(--coral)}
.button:hover{background:#ffe695}.nav-contact:hover{background:#ffb4a9}
.hero{background:linear-gradient(130deg,#fffefb 0%,#fffefb 35%,#eaf8ff 100%);padding-top:28px}
.hero-inner{max-width:1200px;grid-template-columns:1.08fr 1fr;gap:25px;padding:20px 30px 45px;min-height:570px}
.hero-copy{position:relative;z-index:2}
.hero-logo{display:block;width:560px;max-width:100%;height:auto;margin:0 0 18px;mix-blend-mode:multiply}
.eyebrow{color:var(--blue-ink);font-size:11px;letter-spacing:.16em}
.hero-copy>.eyebrow{margin-bottom:14px}
h1{font-size:clamp(30px,3.1vw,43px);font-weight:700;line-height:1.6;letter-spacing:.025em;margin-bottom:20px}
h1>span{color:inherit}
.hero-description{font-size:14px;margin-bottom:25px}
.hero-art{height:470px}
.art-circle{width:390px;height:390px;left:35px;top:35px;background:var(--sky);border-radius:48% 52% 43% 57%;box-shadow:18px 22px 0 #d8f0fc}
.hero-art::before{content:'';position:absolute;left:3px;top:55px;width:100px;height:100px;background:var(--sun);border-radius:50%;opacity:.85}
.hero-art::after{content:'';position:absolute;right:4px;bottom:16px;width:125px;height:125px;background:var(--coral);border-radius:40% 60% 55% 45%;opacity:.55}
.art-word{left:45px;top:64px;font-size:28px;color:var(--blue-ink);transform:rotate(-7deg)}
.character{z-index:2}.st{right:13px;top:10px}.ot{left:0;bottom:5px}.pt{left:127px;bottom:-5px}.cp{right:-5px;bottom:0}
.opening{max-width:1140px;border:2px solid #bfe4f2;background:#fff;border-radius:23px;box-shadow:5px 6px 0 #e1f4fb;padding:20px 28px;margin-bottom:40px;position:relative}
.opening::before{content:'';position:absolute;top:-7px;left:32px;width:76px;height:13px;border-radius:3px;transform:rotate(-4deg);background:repeating-linear-gradient(135deg,var(--sky) 0 9px,#fff 9px 18px);border:1px solid #85c8df}
.opening-label{color:var(--blue-ink)}.opening strong{color:var(--ink)}.pill{background:var(--coral-light);color:#884a40;border:1px solid #ffd1c8}
.trees{height:auto;width:100%;object-fit:contain}
.section-heading .eyebrow{display:inline-block;background:#fff;padding:4px 18px;border-radius:30px;border:1px solid #d3e8ee;margin-bottom:16px}
.section-heading h2{font-weight:700;letter-spacing:.035em}
.about{background:#fffefb}.about h2{font-weight:700}
.about-stamp{display:block;max-width:300px;margin-top:24px}.about-stamp img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.prose strong{background:linear-gradient(transparent 65%,#ccecf9 65%)}
.programs{background:var(--sky-light);border-top:1px solid #e1f3f9;border-bottom:1px solid #e1f3f9}
.program-grid{gap:18px}.program-card{border-radius:75px 75px 22px 22px;background:#fff;border:2px solid transparent;box-shadow:0 7px 0 #65483f07;padding:25px 20px}
.program-card.yellow{border-color:#f6d976;background:linear-gradient(#fff8e3 0 250px,#fff 250px)}
.program-card.pink{border-color:#ffc1b8;background:linear-gradient(#fff0ed 0 250px,#fff 250px)}
.program-card.blue{border-color:#a8dff5;background:linear-gradient(#eaf8ff 0 250px,#fff 250px)}
.program-card.green{border-color:#c1e3cc;background:linear-gradient(#eef9f1 0 250px,#fff 250px)}
.number{color:var(--ink);font-size:18px;opacity:.65}.specialist{color:var(--ink)}
.yellow .specialist{background:#ffe59a}.pink .specialist{background:#ffd1c8}.blue .specialist{background:#c3ebfc}.green .specialist{background:#d0edda}
.activities>div{border-color:var(--sky)}.activities>div:nth-child(2){border-color:var(--coral)}.activities>div:nth-child(3){border-color:var(--mint)}
#flow{background:#fffefb}.flow-grid{gap:24px}.flow-grid li{border:1px solid #f2dfb0;border-radius:20px;background:#fffbef;padding:25px}.flow-grid li:nth-child(2){background:var(--coral-light);border-color:#f5d3cb}.flow-grid li:nth-child(3){background:#f0faf3;border-color:#d0e8d9}
.flow-grid span{color:var(--ink);display:inline-block;border-bottom:4px solid var(--sun);font-size:32px}.flow-grid li:nth-child(2)>span{border-color:var(--coral)}.flow-grid li:nth-child(3)>span{border-color:var(--mint)}
.access{background:#f0faf4}.info>div{border-color:#d9e8dd}.map-panel{border-radius:23px;box-shadow:5px 6px 0 #dceee2}.map-panel>a{color:var(--blue-ink)}
.faq{background:#fffefb}.faq details{background:#fff;border:1px solid #e6ded7;border-radius:15px;padding:20px 24px;margin-bottom:12px}.faq summary::before{color:var(--ink);background:#ffedb7;border-radius:50%;width:36px;height:36px;line-height:36px;text-align:center;flex-shrink:0;font-size:22px}.faq summary::after{color:var(--blue-ink)}
.contact{background:var(--coral-light);position:relative;border-top:1px solid #f9dfd8}.contact .section-heading .eyebrow{border-color:#f4cfc6;color:#884a40}
.form-panel{background:#fff;border:1px solid #efd9d2;box-shadow:6px 7px 0 #f7dfd8;border-radius:24px}.form-panel input,.form-panel select,.form-panel textarea{border-color:#ddcfc8;background:#fffefb}.form-panel label>span{color:#894a3f}.form-panel input:focus,.form-panel select:focus,.form-panel textarea:focus{border-color:#55b4d5}.phone{color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral);text-underline-offset:9px;text-decoration-thickness:4px}
footer{background:#fff}footer .brand{width:310px;max-width:100%;margin:auto}footer .brand img{width:100%}.footer-links a{color:var(--blue-ink)}.menu-button{border-color:#e6d3c9;background:#fff4ed;color:var(--ink)}
@media(max-width:1100px){.header{padding:10px 24px;gap:15px}.brand img{width:210px}nav{gap:12px}nav a{font-size:11px}.nav-contact{padding:9px 12px}.hero-inner{gap:10px;padding-left:26px;padding-right:26px}.hero-logo{width:560px}.hero-art{transform:scale(.9)}.opening{margin-left:24px;margin-right:24px;gap:16px}.program-card{padding:25px 14px}}
@media(max-width:900px) and (min-width:781px){.brand img{width:180px}nav{gap:9px}nav a{font-size:10px}.nav-contact{padding:8px}.hero-art{transform:scale(.8)}h1{font-size:30px}}
@media(max-width:780px){.header{height:86px;padding:10px 20px}.brand img{width:185px}.menu-button{padding:8px 12px}.header nav{top:86px;background:#fff}nav a{font-size:14px}.nav-contact{font-size:14px}.hero{padding-top:16px}.hero-inner{grid-template-columns:1fr;min-height:0;padding:16px 24px 0;gap:10px}.hero-copy{text-align:center}.hero-logo{width:calc(100% + 24px);max-width:none;margin:0 -12px 20px}.hero-copy>.eyebrow{font-size:10px;margin-bottom:12px}h1{font-size:clamp(25px,7.5vw,33px);line-height:1.7;margin-bottom:18px}.hero-description{font-size:13px}.hero-art{height:350px;width:100%;max-width:430px;transform:none;margin:0 auto}.art-circle{width:280px;height:280px;left:calc(50% - 140px);top:30px;box-shadow:12px 14px 0 #d8f0fc}.hero-art::before{width:70px;height:70px;left:3%;top:43px}.hero-art::after{width:88px;height:88px;right:1%;bottom:10px}.art-word{left:12%;top:48px;font-size:23px}.st{height:260px;right:7%;top:15px}.ot{height:180px;left:1%;bottom:0}.pt{height:190px;left:30%;bottom:0}.cp{height:155px;right:0;bottom:0}.opening{margin:18px 20px 28px;padding:20px 15px;border-radius:18px;gap:12px}.opening>div:nth-child(2){border-color:#deedf2}.opening-label{font-size:9px}.pill{font-size:11px}.trees{height:auto}.about-stamp{display:block;width:240px;max-width:85%;margin-top:18px}.about-grid{gap:30px}.section-heading h2,.about h2{font-size:28px}.program-card{border-radius:55px 55px 18px 18px;padding:18px 14px}.program-card.yellow{background:linear-gradient(#fff8e3 0 193px,#fff 193px)}.program-card.pink{background:linear-gradient(#fff0ed 0 193px,#fff 193px)}.program-card.blue{background:linear-gradient(#eaf8ff 0 193px,#fff 193px)}.program-card.green{background:linear-gradient(#eef9f1 0 193px,#fff 193px)}.program-grid{gap:12px}.program-card h3{font-size:14px}.flow-grid{gap:15px}.flow-grid li{padding:22px}.flow-grid span{font-size:26px}.faq details{padding:17px 15px}.faq summary{gap:10px}.faq summary::before{font-size:20px;width:30px;height:30px;line-height:30px}.form-panel{padding:25px 20px}.mobile-cta{background:var(--sun);border-color:var(--ink);color:var(--ink);box-shadow:3px 4px 0 #f1d6a7}.mobile-cta:hover{background:#ffe695}footer .brand{width:280px}}



/* An airy four-character composition, scaled together at every screen width. */
.hero .hero-art{width:100%;max-width:550px;height:auto;aspect-ratio:1 / 1;padding:0;margin:0 auto;transform:none;isolation:isolate}
.hero .hero-art .art-circle{width:78%;height:76%;top:12%;left:11%;background:#dff3fb;border-radius:46% 54% 60% 40% / 54% 42% 58% 46%;box-shadow:none;transform:rotate(-12deg);z-index:0}
.hero .hero-art::before{width:32%;height:32%;top:3%;left:0;background:#ffedb3;border-radius:50%;opacity:1;z-index:0}
.hero .hero-art::after{width:30%;height:29%;right:0;bottom:3%;background:#fbdad3;border-radius:54% 46% 48% 52%;opacity:1;z-index:0}
.hero .hero-art .character{object-fit:contain;filter:none;z-index:2;max-width:none;width:auto}
.hero .hero-art .st{height:52%;top:0;left:47%;right:auto;bottom:auto;transform:rotate(7deg)}
.hero .hero-art .ot{height:46%;top:7%;left:4%;right:auto;bottom:auto;transform:rotate(-9deg)}
.hero .hero-art .pt{height:48%;top:49%;left:25%;right:auto;bottom:auto;transform:rotate(-5deg)}
.hero .hero-art .cp{height:42%;top:54%;left:68%;right:auto;bottom:auto;transform:rotate(9deg)}
.art-spark{position:absolute;color:#dba955;z-index:1;font-size:30px;line-height:1}
.spark-one{left:40%;top:36%;transform:rotate(12deg)}
.spark-two{left:12%;top:70%;font-size:20px;color:#93bca6;transform:rotate(-10deg)}
.art-dot{position:absolute;left:79%;top:46%;width:10px;height:10px;border-radius:50%;background:#e9ad9f;z-index:1}
@media(max-width:1100px) and (min-width:781px){.hero-inner{grid-template-columns:1.08fr 1fr}.hero .hero-art{max-width:500px}}
@media(max-width:780px){.hero .hero-art{max-width:390px;margin:20px auto 0}.art-spark{font-size:23px}.spark-two{font-size:17px}.art-dot{width:7px;height:7px}}


/* Readable header navigation without shrinking labels on narrow screens. */
.header nav{gap:26px}
.header nav a{font-size:16px;line-height:1.6;font-weight:700;white-space:nowrap}
.header .nav-contact{padding:13px 22px}
@media(max-width:1250px){.header{height:96px;padding:10px 24px}.header .brand img{width:220px}.header .menu-button{display:block;border:1px solid #e6d3c9;background:#fff4ed;border-radius:24px;padding:10px 18px;font-size:15px;color:var(--ink)}.header nav{display:none;position:absolute;top:96px;left:0;right:0;background:#fff;padding:24px;box-shadow:0 10px 15px #594c4310}.header nav.open{display:flex;flex-direction:column;align-items:stretch;gap:12px}.header nav a{font-size:16px;padding:12px}.header .nav-contact{text-align:center}}
@media(max-width:780px){.header{height:86px;padding:10px 20px}.header .brand img{width:185px}.header nav{top:86px}.header .menu-button{padding:9px 13px;font-size:14px}}

/* Shared Junior branding; supplied logo will replace these text marks. */
.junior-logo{display:flex;flex-direction:column;gap:7px;color:var(--ink);line-height:1.3}
.junior-logo>small{font-size:11px;letter-spacing:.2em;font-weight:700}
.junior-name{display:flex;align-items:baseline;flex-wrap:wrap;font-size:30px;font-weight:700;letter-spacing:.03em;gap:0}
.junior-period{color:var(--ink)}.junior-name b{font-size:18px;margin-left:8px;background:#dff3fb;padding:4px 8px;border-radius:10px;color:var(--blue-ink)}
.junior-hero .junior-logo{gap:13px}.junior-hero .junior-logo>small{font-size:15px}.junior-hero .junior-name{font-size:54px}.junior-hero .junior-name b{font-size:30px;padding:5px 12px;margin-left:10px}.hero-logo.junior-hero{margin-bottom:28px;mix-blend-mode:normal}
.about-stamp .junior-name{font-size:28px}.about-stamp .junior-name b{font-size:16px}
.header nav a{font-size:15px}.header nav{gap:20px}.opening>div:nth-child(2){flex-wrap:wrap}.opening>div:nth-child(2)>strong{font-size:13px}.branch{padding:35px;background:#fffefb;border:1px solid #d8eade;border-radius:26px;margin-top:30px}.branch-heading{margin-bottom:22px}.branch-tag{display:inline-block;background:#dff3fb;color:var(--blue-ink);padding:5px 20px;border-radius:25px;font-size:17px;font-weight:700}.branch:nth-of-type(2) .branch-tag{background:#ffe5dd;color:#884a40}.branch-heading h3{display:inline-block;font-size:22px;margin:0 0 0 15px}.branch-heading p{margin:10px 0 0;font-size:14px}.branch .access-grid{gap:35px}.branch-contact{margin-top:25px}.branch-phone{padding:20px 0;border-bottom:1px solid #ecd7ce}.branch-phone>span{display:block;font-size:15px;font-weight:700}.branch-phone p{margin-bottom:0}.telephone .phone{font-size:28px}
footer .junior-logo{align-items:center}footer .junior-name{justify-content:center}
@media(max-width:1250px){.header nav a{font-size:16px}.header .brand{max-width:calc(100% - 105px)}.header .junior-name{font-size:26px}.header .junior-name b{font-size:16px}}
@media(max-width:780px){.header .junior-logo{gap:4px}.header .junior-logo>small{font-size:10px}.header .junior-name{font-size:22px}.header .junior-name b{font-size:13px;padding:3px 6px;margin-left:3px}.hero-logo.junior-hero{width:100%;max-width:100%;margin:12px auto 25px}.junior-hero .junior-logo{align-items:center}.junior-hero .junior-name{justify-content:center;font-size:38px}.junior-hero .junior-name b{font-size:22px;margin-left:6px}.junior-hero .junior-logo>small{font-size:12px}.branch{padding:23px 18px}.branch-heading h3{font-size:18px;margin-left:8px}.branch-tag{font-size:14px;padding:4px 12px}.branch .access-grid{gap:25px}.opening>div:nth-child(2)>strong{font-size:12px}.about-stamp .junior-name{font-size:25px}}
@media(max-width:360px){.header .junior-name{font-size:19px}.header .junior-name b{font-size:11px}.junior-hero .junior-name{font-size:33px}.junior-hero .junior-name b{font-size:19px}}
.about-stamp .junior-logo,.about-stamp .junior-name,.about-stamp .junior-period{border:0;border-radius:0;padding:0}

/* Official Junior logo: preserve its aspect ratio across all placements. */
.hero-logo.junior-hero{width:560px;max-width:100%;margin:0 0 28px}
.junior-hero>img{display:block;width:100%;height:auto;mix-blend-mode:multiply}
.about-stamp>img{display:block;width:100%;height:auto}
@media(max-width:780px){.hero-logo.junior-hero{width:calc(100% + 24px);max-width:none;margin:0 -12px 24px}.header .brand{max-width:calc(100% - 100px)}}

/* New crayon characters: blend the supplied white backgrounds into the palette. */
.hero .hero-art .character,.program-card img,.telephone>img{mix-blend-mode:normal;opacity:1}
.hero .hero-art .st{height:50%;left:47%;top:0;transform:rotate(4deg)}
.hero .hero-art .ot{height:45%;left:2%;top:7%;transform:rotate(-5deg)}
.hero .hero-art .pt{height:45%;left:24%;top:52%;transform:rotate(-3deg)}
.hero .hero-art .cp{height:42%;left:65%;top:54%;transform:rotate(5deg)}