:root{
  --color-primary:#F6C6DE;
  --color-secondary:#0D0D0D;
  --color-bg:#FFFFFF;
  --color-bg-alt:#FBF3F7;
  --color-text-main:#111111;
  --color-text-muted:#4A4A4A;
  --color-border:rgba(13,13,13,.15);
}
*{box-sizing:border-box}
html{overflow-x:hidden;width:100%}
body{margin:0;background:var(--color-bg);font-family:"Noto Sans JP","Hiragino Sans",sans-serif;line-break:strict;overflow-wrap:break-word;overflow-x:hidden;width:100%}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
a{color:var(--color-text-main)}
a:hover{color:#E85C3A}
img{display:block;width:100%;height:100%;object-fit:cover}

.nav-link{color:var(--color-text-main);text-decoration:none;letter-spacing:.05em}
.nav-link:hover{color:#E85C3A}
.hamburger-btn{display:none}
.nav-list{list-style:none;margin:0;padding:0;display:flex;gap:20px;align-items:center;font:400 11px 'Noto Sans JP',sans-serif;letter-spacing:.02em}
.nav-list li{display:flex}
.drawer-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:28px}
.footer-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:22px;font:400 12px 'Noto Sans JP',sans-serif;letter-spacing:.02em}
.footer-nav-list li{display:flex}

.icon-cta{flex:none;width:38px;height:38px;border-radius:50%;background:var(--color-secondary);display:flex;align-items:center;justify-content:center;transition:transform .2s ease,background .2s ease}
a:hover .icon-cta{transform:scale(1.05);background:#262626}
.text-cta{color:var(--color-text-main);text-decoration:underline;text-decoration-color:rgba(17,17,17,.35);text-underline-offset:4px;font:400 15px "Noto Sans JP",sans-serif;letter-spacing:.03em}

.section-label{border-right:1px solid var(--color-border);padding-right:32px}
.section-label span{font:500 13px "Quicksand",sans-serif;letter-spacing:.24em;color:var(--color-secondary)}

[data-reveal]{opacity:0;filter:blur(18px);transform:translateY(28px);transition:opacity 1s ease,filter 1s ease,transform 1s ease}
[data-reveal].is-visible{opacity:1;filter:blur(0);transform:none}
[data-reveal-img]{opacity:0;filter:blur(20px);transform:scale(1.04);transition:opacity 1.1s ease,filter 1.1s ease,transform 1.1s ease}
[data-reveal-img].is-visible{opacity:1;filter:blur(0);transform:none}

.hero-name-char{display:inline-block;opacity:0;transition:opacity .35s ease}
.hero-name-char.is-visible{opacity:1}

.concert-slider{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:40px;max-width:760px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.concert-slider::-webkit-scrollbar{display:none}
.concert-slide{flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:220px 1fr;gap:40px;align-items:start}
.slider-btn{width:36px;height:36px;flex:none;border-radius:50%;border:1px solid rgba(13,13,13,.25);background:#fff;color:#111111;font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s ease}
.slider-btn:hover{background:rgba(13,13,13,.06)}
.concert-dots{display:flex;gap:8px;margin-top:28px}
.concert-dot{width:8px;height:8px;border-radius:4px;background:rgba(13,13,13,.2);border:none;padding:0;cursor:pointer;transition:width .2s ease,background .2s ease}
.concert-dot.is-active{background:var(--color-secondary);width:20px}

#nav-panel{position:fixed;inset:0;background:var(--color-primary);z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transform:translateX(100%);transition:transform .35s ease}
#nav-panel.open{transform:translateX(0)}

#site-header{position:fixed;top:0;left:0;right:0;height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;box-sizing:border-box;background:rgba(246,198,222,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:5}
#greeting,#next-concert,#music,#story,#lesson,#first-classical-concert,#profile,#contact{scroll-margin-top:76px}

@media (max-width:680px){
  .sec-grid{grid-template-columns:1fr!important;gap:20px!important;padding-left:24px!important;padding-right:24px!important}
  .sec-grid>div{min-width:0!important}
  #greeting.sec-grid{padding-top:72px!important;padding-bottom:72px!important}
  .sec-grid>div:first-child{border-right:none!important;padding-right:0!important;border-bottom:1px solid rgba(13,13,13,.15);padding-bottom:10px}
  .two-col{grid-template-columns:1fr!important;max-width:100%!important}
  .two-col-img{width:100%!important;height:auto!important;aspect-ratio:2/3!important}
  .concert-slide .two-col-img{aspect-ratio:3/4!important}
  .hero-desktop-nav{display:none!important}
  .hamburger-btn{display:flex!important}
  .hero-stage{height:auto!important;min-height:0!important}
  .hero-inner{height:auto!important;display:flex!important;flex-direction:column!important;align-items:center!important;padding:112px 24px 64px!important;gap:24px!important}
  .hero-photo{position:static!important;left:auto!important;right:auto!important;top:auto!important;width:100%!important;max-width:300px!important;height:320px!important}
  .hero-name{position:static!important;right:auto!important;top:auto!important;text-align:center!important;margin:0!important}
  .hero-name>div{writing-mode:horizontal-tb!important;font-size:32px!important;letter-spacing:.1em!important}
  .hero-sub{position:static!important;right:auto!important;bottom:auto!important;text-align:center!important}
  .hero-scroll-indicator{display:none!important}
  .brand-mark{font-size:14px!important}
  .section-pad{padding:72px 0!important}
}