/* Selected font candidate A: clear Gothic type and readable small copy. */
@font-face{font-family:"Noto Sans JP";src:url("assets/noto-sans-jp.ttf") format("truetype");font-style:normal;font-weight:100 900;font-display:swap}
:root{--sans:"Noto Sans JP","Yu Gothic","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;--serif:var(--sans)}
body{font-size:16px;line-height:1.95}
h1,h2,h3{font-weight:500}
.hero h1{letter-spacing:.025em;line-height:1.65}
h2{letter-spacing:.025em}
.eyebrow,.hero-visual figcaption,.vertical-caption,.scroll-cue,.approach-icon>span,.approach-word,.lesson-kicker,.fee-price strong,.route-caption,.route-parking,.copyright,.faq summary>span{font-family:var(--sans)}
.eyebrow,.hero .eyebrow{font-size:13px;letter-spacing:.1em}
.button,.hero .button{font-size:15px}
.button-small,.mobile-cta .button,.draft-actions .button{font-size:14px}
.text-link,.hero .text-link,.lesson-aside>.text-link,.nursery-fee .text-link,#edit-draft{font-size:14px}
.prototype-bar{font-size:12px;min-height:32px;height:auto;padding:4px 12px}
nav>a{font-size:14px}
.hero-description,.section-intro>p:last-child{font-size:16px}
.hero-tags{font-size:13px;flex-wrap:wrap;row-gap:6px}
.photo-note{font-size:17px;letter-spacing:.05em}
.hero-visual figcaption,.vertical-caption,.scroll-cue{font-size:11px;letter-spacing:.12em}
.approach-item p,.section-heading>p,.lesson-panel-main>p:not(.lesson-kicker),.lesson-aside li,.profile-message>p:not(.eyebrow),.fees-intro>p:last-child,.faq summary,.faq details>p,.access-name,.access dd{font-size:15px}
.approach-item p{max-width:none}
.approach-word,.lesson-kicker{font-size:12px;letter-spacing:.14em}
.lesson-tabs button{font-size:18px}
.lesson-tabs button span{font-size:13px}
.aside-label,.lesson-meta,.lesson-aside>.text-link{font-size:14px}
.aside-small,.fee-head>span,.fee-price>span,.fee-spec dd span,.fee-note,.nursery-fee p,.access dt,.access-note,.route-station small,.route-path span,.route-parking>span,.trial-note,.footer-links,.copyright,.copyright span{font-size:13px}
.profile-details h3,.fee-spec>div,.nursery-fee>span,.trial-label,.route-station>span{font-size:15px}
.profile-details li{font-size:14px;line-height:2.2}
.fee-price strong{font-weight:500}
.route-caption,.trial-section .eyebrow{font-size:12px;letter-spacing:.1em}
.trial-section p:not(.eyebrow){font-size:15px}
.trial-note{line-height:1.8;text-align:center}
.site-footer .brand small{font-size:12px}
.copyright{letter-spacing:.025em;flex-wrap:wrap;gap:8px 24px}
.dialog-lead,.dialog-body label,.draft-label{font-size:15px}
.dialog-body label>span,.form-note,.dialog-disclaimer,.draft-to,.copy-status{font-size:13px}
.dialog-body input,.dialog-body select,.dialog-body textarea,.dialog-body #draft-text{font-size:16px}
.mobile-cta>span{font-size:13px}
.brand strong,.site-footer .brand strong,.signature .signature-name,.route-destination>span:last-child{font-family:var(--sans);font-stretch:normal;font-weight:700;letter-spacing:0}
.brand strong,.site-footer .brand strong{font-size:28px}
.brand strong>span,.site-footer .brand strong>span,.signature .signature-name>span,.route-destination small{font-family:var(--sans);letter-spacing:0}
.brand strong>span,.site-footer .brand strong>span{font-size:21px}
.site-header .brand small{font-size:13px;text-align:center}
.signature .signature-name{font-size:25px}
.signature .signature-name>span{font-size:18px}
@media(max-width:1100px){
  .hero h1{font-size:41px}.photo-note{font-size:16px}
  .header-inner{gap:16px}nav{gap:16px}
}
/* The larger navigation labels switch to the compact menu before crowding. */
@media(min-width:851px) and (max-width:1020px){
  .header-inner{min-height:76px}
  .menu-toggle{display:block;width:44px;height:44px;position:relative;padding:10px;flex-shrink:0}
  .menu-toggle span{display:block;height:1px;width:24px;background:var(--ink);position:absolute;left:10px;top:17px;transition:transform .2s,top .2s}
  .menu-toggle span+span{top:25px}
  .menu-toggle[aria-expanded=true] span{top:21px;transform:rotate(45deg)}
  .menu-toggle[aria-expanded=true] span+span{transform:rotate(-45deg)}
  nav{display:none;position:absolute;left:0;right:0;top:76px;background:var(--paper);padding:25px 30px 30px;border-bottom:1px solid var(--line);box-shadow:0 16px 22px #34352f0a}
  nav.is-open{display:flex;flex-direction:column;align-items:stretch;gap:0}
  nav>a{padding:14px 0;border-bottom:1px solid var(--line)}
  nav .button{margin-top:20px}
}
@media(max-width:850px){
  .hero h1{font-size:35px}
  .hero .eyebrow{font-size:12px}
  .hero-description{font-size:15px}
  .hero .button{font-size:14px}
  nav>a{font-size:16px}
  .approach-item h3{font-size:20px}
  .profile-details{padding-left:22px}
  .faq-grid{grid-template-columns:1fr;gap:30px}
}
@media(max-width:600px){
  .brand strong,.site-footer .brand strong{font-size:24px;gap:4px}
  .brand strong>span,.site-footer .brand strong>span{font-size:18px}
  .site-header .brand small{font-size:12px;margin-top:5px}
  .hero h1{font-size:clamp(27px,8.5vw,35px);letter-spacing:.015em}
  .hero-description,.section-intro>p:last-child{font-size:15px}
  .hero-tags{font-size:12px;gap:8px}
  .hero-tags span+span{padding-left:8px}
  .hero .text-link{font-size:14px}
  .hero .button{font-size:14px;padding-inline:14px}
  .eyebrow,.hero .eyebrow{font-size:12px}
  .photo-note{font-size:15px;padding:14px 16px}
  .vertical-caption{font-size:10px;right:-17px;letter-spacing:.08em}
  .hero-visual figcaption,.scroll-cue{font-size:10px}
  .approach-item p,.section-heading>p,.lesson-panel-main>p:not(.lesson-kicker),.lesson-aside li,.profile-message>p:not(.eyebrow),.fees-intro>p:last-child,.faq summary,.faq details>p,.access-name,.access dd{font-size:15px}
  .approach-word,.lesson-kicker{font-size:12px}
  .lesson-tabs{grid-template-columns:1fr;gap:8px;border-bottom:0}
  .lesson-tabs button{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:10px;font-size:14px;line-height:1.7;padding:14px;text-align:left;border:1px solid var(--line);border-radius:4px}
  .lesson-tabs button span{font-size:12px;line-height:1.8;margin:0}
  .lesson-tabs button[aria-selected=true]{border-color:var(--rose)}
  .lesson-tabs button[aria-selected=true]:after{display:none}
  .lesson-panel h3{font-size:22px;letter-spacing:.015em;text-wrap:pretty}
  .lesson-meta{font-size:14px}
  .profile-details{display:block;padding:26px 0 0}
  .profile-piano{flex-direction:row;align-items:center;gap:20px;padding:0 0 22px}
  .profile-details h3{font-size:16px}
  .profile-details li{font-size:14px}
  .fee-spec>div{font-size:14px;gap:12px}
  .fee-spec dd span,.fee-note,.access-note,.trial-note,.footer-links,.copyright,.copyright span{font-size:12px}
  .trial-section p:not(.eyebrow){font-size:15px}
  .trial-section .eyebrow{font-size:12px;letter-spacing:.06em}
  .trial-label{font-size:14px}
  .trial-action{min-width:0}
  .site-footer .brand small{font-size:12px}
  .mobile-cta{gap:10px;padding-inline:14px}
  .mobile-cta>span{font-size:12px}
  .mobile-cta .button{font-size:14px;padding-inline:14px;gap:12px}
  .dialog-lead,.dialog-body label{font-size:14px}
  .form-note,.dialog-disclaimer,.draft-to{font-size:13px}
  .dialog-body label>span{font-size:12px}
  .draft-actions .button,.form-submit{font-size:14px}
}
@media(max-width:380px){
  .brand strong,.site-footer .brand strong{font-size:21px;gap:3px}
  .brand strong>span,.site-footer .brand strong>span{font-size:16px}
  .site-header .brand small{font-size:11px}
  .lesson-tabs button{font-size:13px}
  .lesson-tabs button span{font-size:11px}
  .prototype-bar{font-size:11px;gap:8px}
  .prototype-bar span+span{padding-left:8px}
}