/* グループレッスン — pale-air × letter */
:root{
  --bg:#faf7f3; --bg2:#f2ebe4; --card:#fff; --ink:#2b2521; --body:#564e48;
  --muted:#9a8f86; --line:#e4dad0; --accent:#2b2521; --accent-2:#c08585;
  --sans:"Noto Sans JP",system-ui,sans-serif;
  --en:"Inter Tight","Noto Sans JP",sans-serif;
  --tx:"Inter","Noto Sans JP",system-ui,sans-serif;
  --pad:clamp(20px,6vw,80px); --max:860px;
}
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--body);font-family:var(--tx);font-size:15.5px;line-height:2.05;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2{font-family:var(--sans);color:var(--ink);font-weight:700;line-height:1.55;margin:0}
p,ul,dl{margin:0}
a{color:inherit}

.cap{font-family:var(--en);font-size:10.5px;letter-spacing:.3em;color:var(--muted);margin:0 0 16px;text-transform:uppercase;font-weight:600}
.h2{font-size:clamp(21px,3.2vw,30px);margin:0 0 22px}
.p{margin:0 0 16px;max-width:36em}
.p--big{font-family:var(--sans);font-size:clamp(17px,2.3vw,24px);color:var(--ink);font-weight:700;line-height:1.85;margin-bottom:22px}
.note{font-size:13px;color:var(--muted);margin:22px 0 0;max-width:38em}
.sec{padding:clamp(54px,8vw,100px) var(--pad);max-width:calc(var(--max) + var(--pad)*2);margin:0 auto}
.sec--tint{background:var(--bg2);max-width:none}
.sec--tint>*{max-width:var(--max);margin-left:auto;margin-right:auto}

.in{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.in.is-in{opacity:1;transform:none}
.mask{display:block;overflow:hidden}
.mask>span{display:block}

.btn{display:inline-block;font-family:var(--sans);font-size:14.5px;font-weight:700;letter-spacing:.04em;
  padding:17px 38px;background:var(--accent);color:#fff;text-decoration:none;border-radius:2px;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(43,37,33,.2)}
.btn--big{font-size:16px;padding:21px 52px}

.bar{position:fixed;top:0;left:0;right:0;z-index:90;display:flex;align-items:center;gap:16px;
  padding:12px var(--pad);background:rgba(250,247,243,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid transparent;transform:translateY(-102%);transition:transform .6s cubic-bezier(.2,.7,.2,1),border-color .4s}
.bar.is-on{transform:none;border-bottom-color:var(--line)}
.bar__n{font-family:var(--sans);font-weight:700;color:var(--ink);font-size:13.5px;white-space:nowrap}
.bar__b{font-size:12.5px;font-weight:700;background:var(--accent);color:#fff;padding:10px 20px;border-radius:2px;text-decoration:none;margin-left:auto;flex:none}

.hero{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);align-items:stretch}
.hero__bg{position:relative;order:2;min-height:0}
.hero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 46%;display:block}
.hero__in{order:1;display:flex;flex-direction:column;justify-content:flex-end;background:var(--bg);
  padding:clamp(80px,12vh,130px) clamp(22px,4vw,56px) clamp(46px,7vh,84px) var(--pad)}
.hero__h{font-size:clamp(23px,3.1vw,38px);line-height:1.6;margin:0 0 18px;letter-spacing:.01em}
.hero__lead{font-family:var(--sans);font-size:clamp(14px,1.5vw,17px);color:var(--ink);margin:0 0 28px}
.hero__btns{margin:0}
@media(max-width:860px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__bg{order:1;height:min(52svh,420px)}
  .hero__in{order:2;padding:clamp(30px,5vw,48px) var(--pad) clamp(38px,6vw,58px)}
  .hero__h{font-size:clamp(22px,5.8vw,30px)}
}

/* クラス一覧 */
.cl{list-style:none;padding:0;margin:26px 0 0}
.cl__i{display:grid;grid-template-columns:86px 76px 1fr;gap:4px 16px;align-items:baseline;
  padding:22px 0;border-top:1px solid var(--line)}
.cl__i:last-child{border-bottom:1px solid var(--line)}
.cl__w{font-family:var(--sans);font-size:14px;color:var(--ink);font-weight:700}
.cl__t{font-family:var(--en);font-size:19px;color:var(--accent-2);font-weight:800;letter-spacing:.01em}
.cl__n{font-family:var(--sans);font-size:clamp(15px,1.8vw,18.5px);color:var(--ink);line-height:1.7;font-weight:700}
.cl__teach{grid-column:3;font-size:12.5px;color:var(--muted);margin-top:4px}
@media(max-width:620px){
  .cl__i{grid-template-columns:76px 1fr}
  .cl__n{grid-column:1 / -1}
  .cl__teach{grid-column:1 / -1}
}

/* 料金 */
.fee{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,20px)}
.fee li{background:var(--card);border:1px solid var(--line);padding:clamp(18px,2.4vw,26px);text-align:center;border-radius:2px}
.fee span{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.fee b{font-family:var(--en);font-size:clamp(26px,4vw,40px);color:var(--ink);font-weight:800;letter-spacing:-.01em}
.fee small{font-size:13px;color:var(--body);margin-left:3px}
@media(max-width:560px){.fee{grid-template-columns:1fr}}

/* 場所 */
.info{display:grid;grid-template-columns:clamp(80px,10vw,120px) 1fr;margin:0}
.info dt{font-family:var(--sans);font-size:13px;color:var(--muted);padding:16px 0;border-top:1px solid var(--line)}
.info dd{margin:0;padding:16px 0;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink);line-height:1.9}

.end{text-align:center;background:var(--bg2);padding:clamp(70px,11vw,140px) var(--pad)}
.end__h{font-size:clamp(21px,3.4vw,34px);margin:0 0 30px;line-height:1.7}
.end .note{margin:18px auto 0}
.sub{margin:22px 0 0;font-size:13.5px}
.sub a{color:var(--body);text-decoration:underline;text-underline-offset:4px}

.ft{border-top:1px solid var(--line);padding:40px var(--pad);background:var(--bg)}
.ft__n{font-family:var(--sans);font-weight:700;color:var(--ink);font-size:13.5px;margin:0 0 4px}
.ft__a{font-size:12.5px;color:var(--muted);margin:0 0 16px}
.ft__c{font-size:11px;color:var(--muted);letter-spacing:.06em;margin:0}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .in{opacity:1;transform:none;transition:none}
  .bar{transform:none;border-bottom-color:var(--line)}
  .mask>span{transform:none!important}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}