/* プライベートレッスン — pale-air × letter（臙脂） */
:root{
  --bg:#fbf5f3; --bg2:#f4e8e4; --card:#fff; --ink:#32211e; --body:#5a423c;
  --muted:#9b857e; --line:#e6d3cd; --accent:#a4332f; --accent-2:#6b2b27;
  --sans:"Noto Serif JP",serif;
  --en:"Fraunces","Noto Serif JP",serif;
  --tx:"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(164,51,47,.26)}
.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(251,246,238,.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}
}

/* ── 時間割（曜日で選ぶ）───────────────────── */
.day{margin:34px 0 0;display:grid;grid-template-columns:clamp(96px,13vw,150px) 1fr;gap:0 clamp(16px,2.6vw,34px);
  padding-top:22px;border-top:2px solid var(--ink)}
.day__w{font-family:var(--sans);font-size:clamp(19px,2.6vw,28px);font-weight:700;color:var(--ink);line-height:1.4;margin:0}
.sl{list-style:none;margin:0;padding:0}
.sl li{padding:0 0 22px}
.sl li + li{padding-top:22px;border-top:1px solid var(--line)}
.sl__t{font-family:var(--en);font-size:clamp(24px,3.4vw,36px);font-weight:600;color:var(--accent);line-height:1;margin:0 0 8px;letter-spacing:.01em}
.sl__n{font-family:var(--sans);font-size:clamp(15px,1.8vw,18.5px);color:var(--ink);font-weight:700;line-height:1.7;margin:0}
.sl__c{font-size:12.5px;color:var(--muted);margin:6px 0 0}
@media(max-width:620px){.day{grid-template-columns:1fr;gap:12px}.day__w{margin-bottom:4px}}


/* ── お困りごと ─────────────────────────── */
.tl{list-style:none;padding:0;margin:26px 0 0}
.tl li{position:relative;padding:18px 0 18px 30px;border-bottom:1px solid var(--line);
  font-size:clamp(15px,1.8vw,17.5px);line-height:1.95;color:var(--ink)}
.tl li:first-child{border-top:1px solid var(--line)}
.tl li::before{content:"";position:absolute;left:4px;top:1.5em;width:10px;height:10px;
  border:2px solid var(--accent);border-radius:50%}

/* ── 通った方の声 ───────────────────────── */
.vl{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:clamp(14px,2vw,20px)}
.vl li{background:var(--card);border:1px solid var(--line);border-radius:2px;
  padding:clamp(20px,2.6vw,28px) clamp(20px,3vw,34px)}
.vl p{margin:0;font-size:clamp(15px,1.8vw,17.5px);line-height:2;color:var(--ink)}

/* ── 講師紹介 ──────────────────────────── */
.pl{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.pl li{font-family:var(--sans);font-size:12.5px;color:var(--accent-2);
  border:1px solid var(--line);border-radius:2px;padding:7px 14px;background:var(--card)}

.pf{display:grid;grid-template-columns:clamp(150px,20vw,230px) 1fr;gap:clamp(20px,3.4vw,44px);align-items:start;margin-top:26px}
.pf__img{width:100%;height:auto;border-radius:2px;display:block}
.pf__tx .p{margin-bottom:14px}
@media(max-width:620px){.pf{grid-template-columns:1fr}.pf__img{max-width:230px}}

.band{width:100%;height:clamp(240px,38vw,460px);overflow:hidden}
.band img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;display:block}
.ph{margin:30px 0 0}
.ph img{width:100%;height:auto;display:block;border-radius:2px}

.first{margin:26px 0 0;background:var(--card);border:1px solid var(--accent);border-radius:2px;
  padding:clamp(18px,2.2vw,22px) clamp(18px,3vw,28px);text-align:center}
.first__l{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--accent);margin:0 0 6px}
.first__n{margin:0}
.first__n b{font-family:var(--en);font-size:clamp(24px,3vw,30px);font-weight:800;color:var(--ink);letter-spacing:-.01em}
.first__n small{font-size:13px;color:var(--body);margin-left:3px}
.first + .fee{margin-top:12px}

/* ── 担当インストラクター ───────────────── */
.tcl{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:clamp(22px,3vw,34px)}
.tcl li{display:grid;grid-template-columns:clamp(110px,15vw,170px) 1fr;gap:clamp(18px,3vw,34px);align-items:start}
.tcl img{width:100%;height:auto;border-radius:50%;display:block}
.tcl__n{font-family:var(--sans);font-size:clamp(16px,2vw,20px);font-weight:700;color:var(--ink);margin:0}
.tcl__d{font-size:12.5px;color:var(--accent);margin:4px 0 12px;font-family:var(--sans);font-weight:700}
.tcl__b{margin:0 0 10px;font-size:clamp(14.5px,1.7vw,16.5px);line-height:1.95;max-width:34em}
.tcl__b:last-child{margin-bottom:0}
@media(max-width:560px){.tcl li{grid-template-columns:1fr;gap:14px}.tcl img{max-width:150px}}

.first__s{font-size:12.5px;color:var(--body);margin:8px 0 0;line-height:1.8}
.first + .first{margin-top:12px}

.fee--2{grid-template-columns:repeat(2,1fr)}
.fee--2 + .fee--2{margin-top:clamp(12px,2vw,20px)}
.fee--2 span{font-size:12.5px}
@media(max-width:560px){.fee--2{grid-template-columns:1fr}}
.tcl__note{margin:10px 0 0;font-size:13px;line-height:1.9;color:var(--accent-2);
  border-left:2px solid var(--accent);padding-left:12px;max-width:32em}