/* ============================================================
   さざなみピアノ教室 LP — style.css
   Palette: base #FDFBF7 / main #7FA8B8 / sub #DCE9EE-#EEF5F8
            accent #E9A6A6 / gold #C9A96A / text #3D4B54
   Fonts: Zen Maru Gothic(見出し) / Noto Sans JP(本文)
   ============================================================ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #FDFBF7;
  color: #3D4B54;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  word-break: auto-phrase;
  text-wrap: pretty;
}
a { color: #7FA8B8; text-decoration: none; }
a:hover { opacity: .85; }
img { max-width: 100%; display: block; }

/* ---- helpers ---- */
.wrap { max-width: 1000px; margin: 0 auto; padding: 0 22px; }
.wrap--wide { max-width: 1180px; }
.wrap--mid { max-width: 920px; }
.wrap--narrow { max-width: 760px; }
.center { text-align: center; }
.min { font-family: "Zen Maru Gothic", sans-serif; }
.maru { font-family: "Zen Maru Gothic", sans-serif; }
.accent { color: #E9A6A6; }
.tbd { color: #98a4ab; }
.sml-phrase { display: inline-block; }

.eyebrow { font-family:"Zen Maru Gothic",sans-serif; color:#C9A96A; font-weight:700; font-size:14px; letter-spacing:.16em; margin:0 0 10px; }
.eyebrow--gold { color:#EAD9B4; }
.h2 { font-family:"Zen Maru Gothic",sans-serif; font-weight:500; font-size:clamp(27px,4.6vw,37px); margin:0; color:#33424b; letter-spacing:.02em; line-height:1.5; }
.h2--light { color:#fff; }
.note { font-family:"Zen Maru Gothic",sans-serif; font-size:13px; color:#b7c1c7; margin:24px 0 0; }
.sec { padding: 70px 0 74px; }
.sec--pale { background:#EEF5F8; }
[id] { scroll-margin-top:80px; }

/* ============ OPENING LOADER ============ */
.opening-loader {
  position:fixed; inset:0; z-index:1000;
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 34% 38%,rgba(255,255,255,.95) 0 8%,transparent 30%),
    radial-gradient(circle at 70% 62%,rgba(234,217,180,.24),transparent 34%),
    #fbf1ec;
  opacity:1; visibility:visible;
  transition:opacity .65s ease, visibility 0s linear .65s;
}
.opening-loader.is-finished { opacity:0; visibility:hidden; pointer-events:none; }
.opening-played .opening-loader { display:none; }
.opening-loader__inner { text-align:center; transform:translateY(-8px); }
.opening-loader__notes {
  height:96px;
  display:flex; align-items:flex-end; justify-content:center; gap:15px;
}
.opening-loader__note {
  display:block;
  color:#c9a96a;
  font-family:"Zen Old Mincho",serif;
  font-size:48px; line-height:1;
  opacity:0;
  transform:translateY(64px) scale(.65) rotate(-12deg);
  text-shadow:0 10px 20px rgba(201,169,106,.18);
  animation:openingNoteBounce 1.05s cubic-bezier(.22,.8,.32,1.15) forwards;
}
.opening-loader__note--1 { color:#7fa8b8; animation-delay:.12s; }
.opening-loader__note--2 { color:#e9a6a6; font-size:58px; animation-delay:.32s; }
.opening-loader__note--3 { color:#c9a96a; animation-delay:.52s; }
.opening-loader__name {
  margin:22px 0 0;
  color:#3d4b54;
  font-size:clamp(20px,3vw,28px);
  letter-spacing:.14em;
  opacity:0;
  animation:openingNameIn .8s ease .88s forwards;
}
@keyframes openingNoteBounce {
  0% { opacity:0; transform:translateY(64px) scale(.65) rotate(-12deg); }
  48% { opacity:1; transform:translateY(-20px) scale(1.08) rotate(7deg); }
  68% { transform:translateY(7px) scale(.96) rotate(-3deg); }
  84% { transform:translateY(-7px) scale(1.02) rotate(2deg); }
  100% { opacity:1; transform:translateY(0) scale(1) rotate(0); }
}
@keyframes openingNameIn {
  from { opacity:0; transform:translateY(10px); letter-spacing:.2em; }
  to { opacity:1; transform:translateY(0); letter-spacing:.14em; }
}
body.is-opening { overflow:hidden; }
@media (prefers-reduced-motion:reduce) {
  .opening-loader__note,
  .opening-loader__name { opacity:1; transform:none; animation:none; }
  .opening-loader { transition-duration:.15s; }
}

/* ---- 下層ページ共通 ---- */
.page-hero {
  position:relative; overflow:hidden; padding:96px 0 72px;
  background:
    radial-gradient(circle at 18% 30%, rgba(233,166,166,.18), transparent 30%),
    radial-gradient(circle at 82% 70%, rgba(127,168,184,.16), transparent 32%),
    #FDFBF7;
  border-bottom:1px solid #edf0ed;
}
.page-hero__title { margin:0; font-size:clamp(34px,6vw,52px); font-weight:600; line-height:1.4; color:#33424b; }
.page-hero__lead { margin:18px 0 0; font-size:16px; color:#74838b; line-height:2; }
.page-local-nav {
  display:flex; justify-content:center; flex-wrap:wrap; gap:12px 28px;
  margin-top:34px; padding-top:22px; border-top:1px solid rgba(127,168,184,.24);
}
.page-local-nav a {
  padding:5px 10px; border-radius:999px;
  font-family:"Zen Maru Gothic",sans-serif; font-size:13.5px; font-weight:700; color:#5b8494;
  transition:transform .3s ease, color .3s ease, background .3s ease;
}
.page-local-nav a::after {
  content:"↓"; display:inline-block; margin-left:7px; color:#C9A96A;
  transition:transform .3s ease, color .3s ease;
}
.page-local-nav a:hover,
.page-local-nav a:focus-visible {
  opacity:1; color:#c07d7d; background:rgba(251,241,236,.9);
  transform:translateY(-2px); outline:none;
}
.page-local-nav a:hover::after,
.page-local-nav a:focus-visible::after { color:#7FA8B8; transform:translateY(3px); }
.page-next { padding:38px 0; background:#FDFBF7; }
.page-next__link {
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:110px 1fr auto; gap:22px; align-items:center;
  padding:22px 14px; border-top:1px solid #dbe4e7; border-bottom:1px solid #dbe4e7; color:#3D4B54;
  transition:border-color .35s ease;
}
.page-next__link::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(251,241,236,.95),rgba(238,245,248,.72));
  transform:scaleX(0); transform-origin:left center;
  transition:transform .42s cubic-bezier(.22,1,.36,1);
}
.page-next__link > * { position:relative; z-index:1; }
.page-next__link span {
  font-family:"Zen Maru Gothic",sans-serif; font-size:12px; letter-spacing:.12em; color:#9aabb2;
  transition:color .35s ease, transform .35s ease;
}
.page-next__link b { font-size:23px; font-weight:600; transition:color .35s ease, transform .35s ease; }
.page-next__link i { font-style:normal; font-size:24px; color:#C9A96A; transition:transform .35s ease, color .35s ease; }
.page-next__link:hover,
.page-next__link:focus-visible { opacity:1; border-color:rgba(127,168,184,.5); outline:none; }
.page-next__link:hover::before,
.page-next__link:focus-visible::before { transform:scaleX(1); }
.page-next__link:hover span,
.page-next__link:focus-visible span { color:#c07d7d; transform:translateX(5px); }
.page-next__link:hover b,
.page-next__link:focus-visible b { color:#5b8494; transform:translateX(8px); }
.page-next__link:hover i,
.page-next__link:focus-visible i { transform:translateX(8px); color:#c07d7d; }

/* ---- トップページ内の案内 ---- */
.text-link {
  position:relative; z-index:1; display:inline-flex; gap:12px; align-items:center;
  margin-top:26px; padding-bottom:4px; border-bottom:1px solid #b8c9cf;
  font-family:"Zen Maru Gothic",sans-serif; font-size:14px; font-weight:700; color:#5b8494;
}
.home-guide__head { margin-bottom:34px; }
.home-guide__list { border-top:1px solid #dbe4e7; }
.home-guide__item {
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:52px 1fr auto; align-items:center; gap:22px;
  padding:24px 4px; border-bottom:1px solid #dbe4e7; color:#3D4B54;
  transition:border-color .35s ease;
}
.home-guide__item::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(251,241,236,.95),rgba(238,245,248,.72));
  transform:scaleX(0); transform-origin:left center;
  transition:transform .42s cubic-bezier(.22,1,.36,1);
}
.home-guide__item > span { position:relative; z-index:1; }
.home-guide__num {
  font-family:"Zen Maru Gothic",sans-serif; font-size:12px; letter-spacing:.12em; color:#C9A96A;
  transition:transform .35s ease, color .35s ease;
}
.home-guide__item b { display:block; font-size:23px; font-weight:600; transition:transform .35s ease, color .35s ease; }
.home-guide__item small { display:block; margin-top:3px; font-size:13.5px; color:#89979e; transition:color .35s ease; }
.home-guide__arrow { font-size:24px; color:#7FA8B8; transition:transform .35s ease, color .35s ease; }
.home-guide__item:hover,
.home-guide__item:focus-visible { opacity:1; border-color:rgba(127,168,184,.5); outline:none; }
.home-guide__item:hover::before,
.home-guide__item:focus-visible::before { transform:scaleX(1); }
.home-guide__item:hover .home-guide__num,
.home-guide__item:focus-visible .home-guide__num { transform:translateX(6px); color:#c07d7d; }
.home-guide__item:hover b,
.home-guide__item:focus-visible b { transform:translateX(8px); color:#5b8494; }
.home-guide__item:hover small,
.home-guide__item:focus-visible small { color:#6f7e86; }
.home-guide__item:hover .home-guide__arrow,
.home-guide__item:focus-visible .home-guide__arrow { transform:translateX(8px); color:#c07d7d; }
@media (max-width:600px) {
  .page-hero { padding:68px 0 52px; }
  .page-hero__lead { font-size:14.5px; }
  .page-local-nav { gap:10px 18px; margin-top:26px; }
  .page-next__link { grid-template-columns:1fr auto; gap:4px 18px; }
  .page-next__link span { grid-column:1; }
  .page-next__link b { grid-column:1; font-size:20px; }
  .page-next__link i { grid-column:2; grid-row:1 / 3; }
  .home-guide__item { grid-template-columns:34px 1fr auto; gap:12px; padding:21px 0; }
  .home-guide__item b { font-size:19px; }
  .home-guide__item small { font-size:12.5px; line-height:1.65; }
}

/* ---- CTA buttons ---- */
.cta {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#E9A6A6; color:#fff; font-family:"Zen Maru Gothic",sans-serif; font-weight:700;
  font-size:14px; padding:10px 20px; border-radius:999px;
  box-shadow:0 12px 26px rgba(233,166,166,.45); transition:transform .15s;
}
.cta:hover { transform: translateY(-2px); opacity:1; }
.cta--lg { font-size:18px; padding:18px 44px; margin-top:26px; }
.cta--white { background:#fff; color:#5b8494; box-shadow:0 12px 24px rgba(0,0,0,.12); font-size:17px; padding:17px 34px; }
.cta--dark { background:#3D4B54; font-size:17px; padding:17px 34px; box-shadow:0 12px 24px rgba(0,0,0,.15); }
.line-dot { width:9px; height:9px; border-radius:3px; background:#06C755; display:inline-block; }
.badge {
  display:inline-block; background:#fff; border:1.5px solid #C9A96A; color:#b48f4c;
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:14px;
  padding:7px 18px; border-radius:999px; box-shadow:0 6px 16px rgba(201,169,106,.18);
}

/* ---- grid & photo placeholders ---- */
.grid { display:grid; gap:20px; margin-top:44px; text-align:left; }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); }
.wave { display:block; width:100%; height:56px; }
.photo {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:#7c9aa6; text-align:center; font-family:"Zen Maru Gothic",sans-serif; background:#DCE9EE;
}
.photo b { font-size:14px; font-weight:700; }
.photo span { font-size:12.5px; margin-top:5px; line-height:1.6; }
img.photo { object-fit:cover; }

/* ============ トップ：あたたかい2分割ヒーロー ============ */
.home-stage {
  position:relative; min-height:max(680px,100svh); overflow:hidden;
  isolation:isolate; background:#e8ddd0;
}
.home-hero {
  position:relative; min-height:max(680px,100svh); overflow:hidden; background:#3D4B54;
}
.home-hero::before {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 42%,rgba(45,32,22,.5) 0%,rgba(45,32,22,.24) 44%,transparent 72%),
    linear-gradient(180deg,rgba(45,32,22,.22) 0%,rgba(45,32,22,.05) 26%,rgba(45,32,22,.05) 62%,rgba(45,32,22,.32) 100%);
}
.home-hero__copy {
  position:relative; z-index:3; width:100%; min-height:max(680px,100svh);
  display:flex; align-items:center; justify-content:center;
  padding:78px 24px 110px; text-align:center;
}
.home-hero__copy-inner {
  width:100%; max-width:640px; margin:0 auto; padding:0;
  background:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  border-radius:0; box-shadow:none;
}
.home-hero__location {
  max-width:560px; margin:0 auto 24px; padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.36);
  font-size:17px; letter-spacing:.1em; color:#fff;
  text-shadow:0 1px 6px rgba(20,14,8,.55);
}
.home-hero__title {
  margin:0; max-width:none; font-size:clamp(38px,4.6vw,58px);
  font-weight:500; line-height:1.5; letter-spacing:.04em; color:#fff;
  text-shadow:0 3px 16px rgba(20,14,8,.55),0 1px 3px rgba(20,14,8,.5);
}
.home-hero__title-wave,
.home-hero__title-rest { display:inline-block; }
.home-hero__title-wave > span {
  display:inline-block;
  opacity:0;
  transform-origin:center bottom;
  animation:heroTitleWave .78s cubic-bezier(.22,.8,.3,1.2) forwards;
  animation-delay:calc(2.65s + var(--char-index) * .085s);
}
.home-hero__title-rest {
  opacity:0;
  animation:heroTitleRest .7s ease 3.25s forwards;
}
.opening-played .home-hero__title-wave > span {
  animation-delay:calc(.18s + var(--char-index) * .085s);
}
.opening-played .home-hero__title-rest { animation-delay:.78s; }
@keyframes heroTitleWave {
  0% { opacity:0; transform:translateY(25px) rotate(-5deg) scale(.86); }
  48% { opacity:1; transform:translateY(-13px) rotate(3deg) scale(1.04); }
  70% { transform:translateY(5px) rotate(-1deg) scale(.98); }
  86% { transform:translateY(-4px) rotate(0) scale(1.01); }
  100% { opacity:1; transform:translateY(0) rotate(0) scale(1); }
}
@keyframes heroTitleRest {
  from { opacity:0; transform:translateX(12px); }
  to { opacity:1; transform:translateX(0); }
}
.home-hero__title-break { display:none; }
.home-hero__lead {
  display:none; /* いったん非表示 */
  margin:24px 0 0; font-size:15.5px; line-height:2; color:#fff;
  text-shadow:0 2px 8px rgba(20,14,8,.6);
}
.home-hero__visual { position:absolute; inset:0; z-index:0; min-width:0; margin:0; overflow:hidden; background:#e8ddd0; }
.home-hero__visual img { width:100%; height:100%; object-fit:cover; object-position:60% center; }
.home-hero__3d {
  position:absolute; inset:0; z-index:1; overflow:hidden;
  pointer-events:none; opacity:.9;
}
.home-hero__3d canvas {
  display:block; width:100%; height:100%;
  filter:saturate(.92);
}
.home-hero__3d.is-static::before {
  content:""; position:absolute; width:clamp(130px,19vw,245px); aspect-ratio:1;
  left:50%; top:42%; transform:translate(-50%,-50%);
  border:1px solid rgba(255,255,255,.34); border-radius:50%;
  background:radial-gradient(circle at 32% 25%,rgba(255,255,255,.24),rgba(233,166,166,.06) 46%,rgba(127,168,184,.13) 72%,transparent 74%);
  box-shadow:inset -18px -12px 34px rgba(127,168,184,.12),0 0 36px rgba(255,255,255,.12);
}
@media (max-width:800px) {
  .home-stage,
  .home-hero { min-height:max(760px,100svh); }
  .home-hero::before {
    background:
      radial-gradient(ellipse at 50% 36%,rgba(45,32,22,.54),rgba(45,32,22,.22) 54%,transparent 76%),
      linear-gradient(180deg,rgba(45,32,22,.3),rgba(45,32,22,.06) 40%,rgba(45,32,22,.06) 66%,rgba(45,32,22,.34) 100%);
  }
  .home-hero__copy { width:100%; min-height:max(760px,100svh); align-items:center; padding:54px 22px 160px; }
  .home-hero__copy-inner { max-width:520px; margin:0 auto; }
  .home-hero__title { font-size:clamp(34px,8vw,46px); }
  .home-hero__visual { position:absolute; inset:0; min-height:0; height:auto; }
  .home-hero__visual img { object-position:65% center; }
  .home-hero__3d { opacity:.72; }
}
@media (max-width:480px) {
  .home-stage,
  .home-hero { min-height:max(720px,100svh); }
  .home-hero__copy { padding-top:48px; }
  .home-hero__copy-inner { transform:translateY(-130px); }
  .home-hero__location { font-size:14px; }
  .home-hero__title { font-size:32px; line-height:1.55; }
  .home-hero__title-break { display:block; }
  .home-hero__lead { margin-top:20px; font-size:14.5px; }
  .home-hero__copy { min-height:max(720px,100svh); padding-bottom:130px; }
  .home-hero__visual img { object-position:60% center; }
}
@media (prefers-reduced-motion:reduce) {
  .home-hero__title-wave > span,
  .home-hero__title-rest { opacity:1; transform:none; animation:none; }
}

/* ============ ① FIRST VIEW（写真スライドショー背景） ============ */
.fv { position:relative; background:#3D4B54; min-height:min(760px,92vh); display:flex; align-items:center; padding:60px 0; overflow:hidden; }
.fv__slideshow { position:absolute; inset:0; z-index:0; }
.fv__slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.8s ease; }
.fv__slide.is-active { opacity:1; }
.fv__overlay {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(100deg, rgba(35,44,50,.82) 0%, rgba(35,44,50,.62) 42%, rgba(35,44,50,.34) 68%, rgba(35,44,50,.14) 100%);
}
.fv__watermark {
  position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); text-align:center;
  font-family:"Zen Old Mincho",serif; font-weight:700; font-size:clamp(70px,15vw,190px);
  color:rgba(255,255,255,.07); line-height:1; letter-spacing:.03em; pointer-events:none; user-select:none; z-index:1;
}
.fv__notes { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:2; }
.fv__note {
  position:absolute; top:100%; color:#EAD9B4; line-height:1;
  will-change:transform,translate,rotate,filter,opacity;
  animation-play-state:running,paused,paused;
  transition:translate .6s ease, color .6s ease, scale .7s ease;
}
.fv__note.is-near { color:#FF6FA0; scale:2.2; animation-play-state:running,running,paused; }
@keyframes fvNoteFloat {
  0%   { transform:translateY(0) translateX(0) rotate(0deg); opacity:0; }
  8%   { opacity:.65; }
  50%  { transform:translateY(-56vh) translateX(var(--dx,16px)) rotate(var(--rot,10deg)); }
  92%  { opacity:.65; }
  100% { transform:translateY(-112vh) translateX(calc(var(--dx,16px) * 2)) rotate(calc(var(--rot,10deg) * 2)); opacity:0; }
}
@keyframes fvNoteRainbow {
  0%   { filter:hue-rotate(0deg) saturate(1.8) brightness(1.1); }
  100% { filter:hue-rotate(360deg) saturate(1.8) brightness(1.1); }
}
@keyframes fvNoteWiggle {
  0%, 100% { rotate:0deg; }
  25% { rotate:-16deg; }
  75% { rotate:16deg; }
}
.fv__inner { position:relative; z-index:3; width:100%; text-align:center; }
.fv__text { max-width:560px; margin:0 auto; }
.fv__title { font-weight:700; font-size:clamp(36px,7.4vw,58px); line-height:1.45; margin:18px 0 0; color:#fff; letter-spacing:.02em; text-shadow:0 6px 26px rgba(0,0,0,.3); }
.fv .badge { margin:0; }
.fv .wave { position:absolute; left:0; bottom:0; z-index:3; }

/* ---- シャボン玉バッジ（3つ・HPのトーン／あっさりすりガラス） ---- */
.fv__points { list-style:none; display:flex; flex-wrap:wrap; gap:26px; margin:38px 0 0; padding:0; justify-content:center; }
.fv__points li {
  position:relative; overflow:hidden;
  width:196px; height:196px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:10px;
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:20px; line-height:1.5;
  color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.28);
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border:2px solid rgba(255,255,255,.5);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.1),
    0 12px 22px -14px rgba(0,0,0,.18);
  scale:.4; opacity:0;
  animation-name: fvBubbleIn, fvBubbleFloat;
  animation-duration: 2.2s, 5.5s;
  animation-timing-function: ease-in-out, ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-fill-mode: forwards, none;
}
.fv__points li::before {
  content:""; position:absolute; top:12%; left:18%; width:38%; height:22%;
  background:radial-gradient(ellipse at center, rgba(255,255,255,.45), rgba(255,255,255,0) 75%);
  border-radius:50%; pointer-events:none;
}
.fv__points li span { position:relative; z-index:1; }
.fv__points li:nth-child(1) { border-color:#7FA8B8; animation-delay:.1s,2.3s; animation-duration:2.2s,6.2s; }
.fv__points li:nth-child(2) { border-color:#E9A6A6; animation-delay:.7s,2.9s; animation-duration:2.2s,7.1s; }
.fv__points li:nth-child(3) { border-color:#C9A96A; animation-delay:1.3s,3.5s; animation-duration:2.2s,5.4s; }
@keyframes fvBubbleIn { to { opacity:1; scale:1; } }
@keyframes fvBubbleFloat {
  0%   { translate:0 0; rotate:0deg; }
  25%  { translate:7px -12px; rotate:2deg; }
  50%  { translate:-3px -20px; rotate:-1.5deg; }
  75%  { translate:-9px -9px; rotate:1.5deg; }
  100% { translate:0 0; rotate:0deg; }
}

@media (max-width:480px) {
  .fv__points li { width:150px; height:150px; font-size:17px; }
}

@media (min-width:900px) {
  .fv__inner { text-align:left; }
  .fv__text { margin:0; max-width:660px; }
  .fv__points { justify-content:flex-start; }
}

/* ============ ② さざなみピアノ教室について ============ */
.concern {
  position:relative; z-index:4; padding-top:56px;
  background-color:#FBF1EC;
  background-image:
    radial-gradient(circle at 18% 26%, rgba(233,166,166,.07) 0, transparent 42%),
    radial-gradient(circle at 82% 74%, rgba(201,169,106,.08) 0, transparent 42%);
}
.concern__deco { position:relative; z-index:1; width:44px; height:44px; color:#C9A96A; opacity:.6; margin:0 auto 8px; display:block; }
.concern__glow {
  position:absolute; z-index:0; pointer-events:none;
  width:300px; height:300px; border-radius:50%;
  top:42%; right:6%; transform:translateY(-50%);
  background:radial-gradient(circle, rgba(233,166,166,.32) 0%, rgba(201,169,106,.16) 55%, transparent 76%);
  filter:blur(30px);
}
.concern__lead { position:relative; z-index:1; margin:10px 0 0; color:#7a8890; font-size:16px; }
.worry-list {
  position:relative; z-index:1;
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  max-width:860px; margin:34px auto 0; text-align:center;
  border-top:1px solid rgba(192,125,125,.24);
  border-bottom:1px solid rgba(192,125,125,.24);
}
.worry {
  min-height:220px; padding:24px 28px 26px;
  border-left:1px solid rgba(192,125,125,.2);
}
.worry:first-child { border-left:0; }
.worry__art {
  width:96px; height:96px; margin:0 auto 10px; object-fit:contain;
  filter:drop-shadow(0 7px 8px rgba(61,75,84,.11));
}
.worry h3 { margin:0 0 6px; font-family:"Zen Maru Gothic",sans-serif; font-size:17px; color:#33424b; }
.worry p { margin:0; font-size:14px; line-height:1.7; color:#7a8890; }
.concern__message { position:relative; z-index:1; margin:28px 0 0; font-size:16px; line-height:1.8; color:#6f7e86; }
.concern__message strong { color:#c07d7d; }
.concern__message--intro { line-height:2.05; }
.concern__message--intro strong { display:inline-block; margin-bottom:5px; font-size:17px; font-weight:700; }
.concern__cta { position:relative; z-index:1; margin-top:20px; padding:13px 30px; font-size:15px; }
@media (max-width:700px) {
  .concern { padding-top:44px; }
  .concern__deco { width:36px; height:36px; }
  .concern__lead { font-size:14.5px; }
  .worry-list { grid-template-columns:1fr; gap:0; margin-top:26px; }
  .worry {
    min-height:0; display:grid; grid-template-columns:72px 1fr;
    column-gap:14px; padding:16px 4px; text-align:left;
    border-left:0; border-top:1px solid rgba(192,125,125,.2);
  }
  .worry:first-child { border-top:0; }
  .worry__art { grid-row:1 / 3; width:68px; height:68px; margin:0; }
  .worry h3 { align-self:end; margin:0; font-size:16px; }
  .worry p { align-self:start; font-size:13.5px; }
  .concern__message { margin-top:24px; font-size:15px; }
}

/* ---- トップ：ヒーローに重なる特徴カード ---- */
.home-points {
  position:absolute; z-index:5; left:0; right:0;
  bottom:clamp(28px,5svh,56px); padding:0 22px;
}
.home-points__list {
  position:relative; margin:0 auto; max-width:900px;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(12px) saturate(1.08);
  -webkit-backdrop-filter:blur(12px) saturate(1.08);
  border:1px solid rgba(255,255,255,.72);
  border-radius:26px; box-shadow:0 18px 42px rgba(45,32,22,.16);
}
.home-points__list .worry { min-height:180px; padding:20px 28px 22px; transition:translate .3s cubic-bezier(.22,1,.36,1); }
.home-points__list .worry__art { transition:transform .35s cubic-bezier(.22,1,.36,1); }
.home-points__list .worry h3 { transition:color .3s ease; }
@media (hover:hover) {
  .home-points__list .worry:hover { translate:0 -6px; }
  .home-points__list .worry:hover .worry__art { transform:scale(1.12) rotate(-6deg); }
  .home-points__list .worry:hover h3 { color:#c07d7d; }
}
@media (max-width:700px) {
  .home-points { bottom:clamp(160px,24svh,210px); padding:0 6px; }
  .home-points .wrap { padding:0; }
  .home-points__list {
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin-top:0; border-radius:20px; transform:none;
  }
  .home-points__list .worry {
    min-width:0; min-height:128px;
    display:flex; flex-direction:column; align-items:center;
    padding:14px 5px 13px; text-align:center;
    border-top:0; border-left:1px solid rgba(192,125,125,.2);
  }
  .home-points__list .worry:first-child { border-left:0; }
  .home-points__list .worry__art {
    flex:none; width:58px; height:58px; margin:0 auto 7px;
  }
  .home-points__list .worry h3 {
    margin:0; font-size:12.5px; line-height:1.5;
  }
}
@media (max-width:370px) {
  .home-points__list .worry { min-height:118px; padding:11px 3px 12px; }
  .home-points__list .worry__art { width:52px; height:52px; }
  .home-points__list .worry h3 { font-size:11.5px; }
}
@media (max-width:330px) {
  .home-hero__copy-inner { transform:translateY(-145px); }
  .home-hero__copy { padding-inline:14px; }
  .home-hero__location { font-size:11.5px; letter-spacing:.05em; }
  .home-hero__title { font-size:27px; letter-spacing:.01em; }
}
@media (max-width:600px) {
  .concern { padding-bottom:58px; }
  .concern__cta { display:none; }
}

/* ============ ③ 特徴 ============ */
.features-layout { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(280px,.82fr); gap:58px; align-items:center; margin-top:44px; text-align:left; }
.features-list { width:100%; min-width:0; border-top:1px solid #dbe4e7; }
.feature-item {
  display:grid; grid-template-columns:44px 1fr; gap:18px;
  padding:20px 0; border-bottom:1px solid #dbe4e7;
}
.feature-item__num {
  padding-top:2px; font-family:"Zen Maru Gothic",sans-serif;
  font-size:12px; letter-spacing:.12em; color:#C9A96A;
}
.feature-item h3 { font-family:"Zen Maru Gothic",sans-serif; font-weight:500; font-size:17px; margin:0 0 5px; color:#33424b; line-height:1.5; }
.feature-item p { margin:0; font-size:13.5px; line-height:1.75; color:#6b7981; }
.features-photo { border-radius:3px; aspect-ratio:3/4; box-shadow:none; }
@media (max-width:800px) {
  .features-layout { grid-template-columns:1fr; gap:32px; }
  .features-photo { aspect-ratio:16/9; order:-1; }
}

/* ============ ④ ギャラリー（スライドショー） ============ */
.gallery-slider { position:relative; margin-top:44px; border-radius:24px; overflow:hidden; background:#1c2529; box-shadow:0 20px 44px rgba(127,168,184,.22); }
.gallery-slider__track { display:flex; touch-action:pan-y; transition:transform .6s cubic-bezier(.65,0,.35,1); }
.gallery-slider__slide { position:relative; flex:0 0 100%; aspect-ratio:16/9; }
.gallery-slider__slide img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; user-select:none; }
.gallery-slider__cap {
  position:absolute; left:18px; bottom:18px; z-index:2;
  background:rgba(61,75,84,.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#fff; font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:14px;
  padding:8px 18px; border-radius:999px;
}
.gallery-slider__btn {
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.85); color:#5b8494; font-size:24px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 18px rgba(0,0,0,.16);
  transition:background .2s, transform .2s;
}
.gallery-slider__btn:hover { background:#fff; transform:translateY(-50%) scale(1.06); }
.gallery-slider__btn--prev { left:16px; }
.gallery-slider__btn--next { right:16px; }
.gallery-slider__dots { position:absolute; left:0; right:0; bottom:16px; z-index:3; display:flex; gap:8px; justify-content:center; }
.gallery-slider__dot { width:8px; height:8px; border-radius:50%; border:none; padding:0; background:rgba(255,255,255,.55); cursor:pointer; transition:background .2s, width .2s; }
.gallery-slider__dot.is-active { background:#fff; width:22px; border-radius:5px; }
@media (max-width:640px) {
  .gallery-slider__slide { aspect-ratio:4/3; }
  .gallery-slider__btn { width:38px; height:38px; font-size:19px; }
  .gallery-slider__cap { font-size:13px; padding:7px 14px; }
}

/* ============ 生徒・保護者の声 ============ */
.voices-layout {
  display:grid; grid-template-columns:repeat(3,1fr); gap:0;
  max-width:980px; margin:44px auto 0; text-align:left;
  border-top:1px solid #dbe4e7; border-bottom:1px solid #dbe4e7;
}
.voice-card {
  position:relative; overflow:hidden;
  padding:30px 30px 34px; border-left:1px solid #dbe4e7;
}
.voice-card:first-child { border-left:0; }
.voice-card::before {
  content:"“"; position:absolute; right:14px; top:10px; z-index:0;
  font-family:Georgia,serif; font-size:62px; line-height:1; color:rgba(127,168,184,.13);
}
.voice-card--featured {
  grid-row:auto; display:block; padding:30px 30px 34px;
}
.voice-card__meta { position:relative; z-index:1; display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.voice-card__tag {
  display:inline-flex; color:#a86767;
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:12px;
}
.voice-card__name { font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:13.5px; color:#6f8791; }
.voice-card__quote { position:relative; z-index:1; margin:0; font-size:15.5px; line-height:1.95; color:#4f6069; }
.voice-card--featured .voice-card__quote { font-size:15.5px; line-height:1.95; }
@media (max-width:700px) {
  .voices-layout { grid-template-columns:1fr; gap:0; margin-top:30px; }
  .voice-card, .voice-card--featured { grid-row:auto; padding:24px 4px; border-left:0; border-top:1px solid #dbe4e7; }
  .voice-card:first-child { border-top:0; }
  .voice-card--featured .voice-card__quote { font-size:16px; line-height:1.9; }
}

/* ============ ⑤ 流れ ============ */
.flow { position:relative; background:#7FA8B8; }
.flow__head { margin-bottom:44px; }
.steps { list-style:none; max-width:820px; margin:0 auto; padding:0; }
.step { display:flex; gap:18px; align-items:stretch; }
.step__rail { flex:none; display:flex; flex-direction:column; align-items:center; }
.step__num { width:42px; padding-top:18px; color:#EAD9B4; font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:13px; letter-spacing:.08em; text-align:center; }
.step__line { flex:1; width:1px; background:rgba(255,255,255,.32); margin:6px 0 0; min-height:18px; }
.step__body { flex:1; padding:15px 2px 22px; margin-bottom:0; border-bottom:1px solid rgba(255,255,255,.28); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.step:last-child .step__body { border-bottom:0; }
.step__title { font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:17px; color:#fff; }
.step__time { flex:none; font-family:"Zen Maru Gothic",sans-serif; font-size:14px; color:#eaf3f6; }
.flow__note { max-width:820px; text-align:center; margin:28px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.3); font-size:15.5px; color:#fff; }

/* ============ ⑤ 講師 ============ */
.teacher__layout {
  display:grid; grid-template-columns:minmax(260px,.82fr) minmax(0,1.18fr);
  gap:64px; align-items:start; padding:18px 0;
}
.teacher__portrait-wrap { position:relative; margin:0 18px 0 0; }
.teacher__portrait-wrap::before {
  content:""; position:absolute; z-index:0;
  inset:22px -18px -18px 22px; background:#F7E8E5;
}
.teacher__portrait {
  position:relative; z-index:1; width:100%; aspect-ratio:3/4;
  object-fit:cover; border-radius:3px;
}
.teacher__role {
  margin:28px 0 0; color:#7a8890; font-size:13px;
  letter-spacing:.18em;
}
.teacher__role::before {
  content:""; display:inline-block; width:34px; height:1px;
  margin-right:12px; vertical-align:middle; background:#C9A96A;
}
.teacher__content { padding-top:12px; }
.teacher__name { font-weight:600; font-size:clamp(32px,4.5vw,42px); margin:4px 0 0; color:#33424b; }
.teacher__ruby { font-size:13.5px; color:#7FA8B8; margin:2px 0 0; letter-spacing:.08em; }
.teacher__section { margin-top:34px; }
.teacher__label {
  margin:0 0 14px; padding-bottom:8px;
  border-bottom:1px solid #e5dfd5;
  font-weight:700; font-size:13.5px; color:#6f8791; letter-spacing:.08em;
}
.teacher__facts { list-style:none; margin:0; padding:0; }
.teacher__facts li {
  position:relative; padding:7px 0 7px 20px;
  font-size:15px; color:#4f6069;
}
.teacher__facts li::before {
  content:"—"; position:absolute; left:0; color:#C9A96A;
}
.teacher__message { margin:0 0 12px; font-size:21px; color:#3D4B54; line-height:1.7; }
.teacher__body { margin:0; font-size:15px; color:#5f6f77; line-height:1.95; }
@media (max-width:700px) {
  .teacher__layout { grid-template-columns:1fr; gap:46px; padding:0 12px; }
  .teacher__visual { max-width:300px; margin:0 auto; }
  .teacher__role { margin-top:24px; }
  .teacher__content { padding-top:0; }
  .teacher__name { font-size:32px; }
  .teacher__section { margin-top:30px; }
  .teacher__message { font-size:19px; }
}

/* ============ ⑥ 料金 ============ */
.price #courses { gap:0; border-top:1px solid #cbdde4; border-bottom:1px solid #cbdde4; }
.card-course { padding:30px 30px 32px; border-left:1px solid #cbdde4; }
.card-course:first-child { border-left:0; }
.card-course h3 { font-family:"Zen Maru Gothic",sans-serif; font-weight:500; font-size:20px; margin:0 0 4px; color:#33424b; }
.card-course__target { font-family:"Zen Maru Gothic",sans-serif; margin:0 0 16px; font-size:14px; color:#8aa6b1; }
.card-course__detail { margin:0 0 18px; font-size:15.5px; color:#5a6a73; }
.card-course__price { display:flex; align-items:baseline; gap:4px; border-top:1px solid #EEF5F8; padding-top:16px; }
.card-course__price b { font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:34px; color:#E9A6A6; }
.card-course__price span { font-size:14px; color:#8a97a0; }
.price__note { margin:26px 0 0; font-size:15px; color:#8a97a0; line-height:2; }
.price__note strong { color:#5b8494; }
@media (max-width:700px) {
  .price #courses { grid-template-columns:1fr; }
  .card-course { padding:24px 4px; border-left:0; border-top:1px solid #cbdde4; }
  .card-course:first-child { border-top:0; }
}

/* ============ ⑦ スケジュール ============ */
.schedule__head { margin-bottom:38px; }
.schedule__scroll { overflow-x:auto; border-top:1px solid #cbdde4; border-bottom:1px solid #cbdde4; }
.schedule__table { width:100%; border-collapse:collapse; min-width:540px; font-size:15px; }
.schedule__table th { padding:14px 6px; text-align:center; font-weight:700; color:#5b8494; }
.schedule__table th.is-weekend { color:#c07d7d; }
.schedule__table th:first-child { text-align:left; }
.schedule__table tbody tr { border-top:1px solid #dfe9ec; }
.schedule__table td { padding:15px 6px; text-align:center; }
.schedule__table td:first-child { padding:16px 10px; text-align:left; font-weight:700; color:#5b8494; white-space:nowrap; }
.schedule__table td.is-open { color:#5b8494; font-weight:700; }
.schedule__table td.is-lim { color:#b48f4c; font-weight:700; }
.schedule__table td.is-off { color:#c9cdd0; }
.schedule__note { text-align:center; margin:22px 0 0; font-size:15px; color:#5b6b74; }
.schedule__note strong { color:#c07d7d; }

/* ============ ⑧ FAQ ============ */
.faq__head { margin-bottom:38px; }
.faq__list { display:flex; flex-direction:column; gap:0; border-top:1px solid #cbdde4; }
.faq__item { border-bottom:1px solid #cbdde4; overflow:hidden; }
.faq__q { width:100%; background:none; border:none; cursor:pointer; padding:21px 0; display:flex; justify-content:space-between; align-items:center; gap:14px; text-align:left; font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:16.5px; color:#3D4B54; }
.faq__q .q-mark { color:#7FA8B8; margin-right:9px; }
.faq__icon { flex:none; width:28px; height:28px; color:#5b8494; display:flex; align-items:center; justify-content:center; font-size:19px; transition:transform .25s; }
.faq__item.is-open .faq__icon { transform:rotate(45deg); }
.faq__body { overflow:hidden; max-height:0; opacity:0; transition:max-height .3s ease,opacity .25s; }
.faq__item.is-open .faq__body { max-height:280px; opacity:1; }
.faq__body p { margin:0; padding:0 42px 22px; font-size:15.5px; line-height:1.9; color:#5a6a73; }

/* ============ ⑨ アクセス ============ */
.access__head { margin-bottom:38px; }
.access__map-full { width:100%; margin:0 0 38px; }
.photo--map { display:block; width:100%; height:clamp(320px,40vw,560px); border:0; }
.access__inner { display:flex; flex-direction:column; gap:28px; }
.access__info { text-align:center; font-size:16px; line-height:2.1; color:#4a5a63; }
.access__name { font-weight:700; color:#5b8494; margin:0 0 6px; font-size:16.5px; }
.access__info p { margin:0; }
.access__contact { margin-top:12px !important; font-size:14.5px; color:#98a4ab; }
@media (max-width:640px) {
  .photo--map { height:280px; }
}

/* ============ ⑩ 最終CTA ============ */
.finalcta { position:relative; background:#E9A6A6; padding:74px 0 80px; overflow:hidden; }
.wave--top { position:absolute; top:0; left:0; height:52px; }
.finalcta__inner { position:relative; z-index:2; }
.finalcta__title { font-weight:600; font-size:clamp(28px,5.2vw,42px); color:#fff; margin:18px 0 16px; line-height:1.5; }
.finalcta__lead { color:#fff; font-size:16.5px; margin:0 0 34px; opacity:.95; }
.finalcta__btns { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ============ FOOTER ============ */
.footer { background:#3D4B54; color:#c8d2d8; padding:48px 0 40px; text-align:center; }
.footer__name { font-size:22px; color:#fff; margin:0 0 6px; }
.footer__nav { display:flex; justify-content:center; flex-wrap:wrap; gap:8px 22px; margin:0 0 18px; font-size:13px; }
.footer__nav a { color:#aebdc4; }
.footer__info { font-size:14.5px; margin:0 0 18px; line-height:2; }
.footer__sns { display:flex; gap:20px; justify-content:center; font-size:14px; margin-bottom:24px; }
.footer__sns a { color:#9fb0b8; }
.footer__copy { font-size:12px; color:#7a8790; margin:0; }

/* ============ STICKY MOBILE CTA ============ */
.sticky { position:fixed; left:0; right:0; bottom:0; z-index:50; background:rgba(253,251,247,.94); backdrop-filter:blur(10px); border-top:1px solid #F0EAE0; box-shadow:0 -6px 22px rgba(61,75,84,.08); }
.sticky__inner { max-width:640px; margin:0 auto; padding:10px 12px; display:grid; grid-template-columns:1fr 1.35fr; gap:10px; }
.sticky__line, .sticky__apply { display:flex; align-items:center; justify-content:center; gap:7px; font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:15px; padding:13px 6px; border-radius:14px; }
.sticky__line { background:#fff; border:2px solid #7FA8B8; color:#5b8494; }
.sticky__apply { background:#E9A6A6; color:#fff; box-shadow:0 8px 18px rgba(233,166,166,.5); }

/* ---- ヘッダー ---- */
.header { position:sticky; top:0; z-index:40; background:rgba(253,251,247,.92); backdrop-filter:blur(8px); border-bottom:1px solid #F0EAE0; }
.header--reveal {
  position:fixed; left:0; right:0;
  transform:translateY(calc(-100% - 40px));
  opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .35s ease, visibility 0s linear .5s;
}
.header--reveal.is-visible {
  transform:translateY(0);
  opacity:1; visibility:visible; pointer-events:auto;
  transition-delay:0s;
}
.header__inner { min-height:64px; padding-top:10px; padding-bottom:10px; padding-right:190px; display:flex; align-items:center; justify-content:space-between; gap:18px; }
.logo { display:flex; align-items:center; gap:10px; color:#33424b; flex:none; }
.logo__mark { height:34px; width:auto; display:block; }
.logo__text { display:flex; flex-direction:column; line-height:1.35; gap:1px; }
.logo__name { font-weight:600; font-size:19px; }
.logo__sub { font-family:"Noto Sans JP",sans-serif; font-size:10.5px; letter-spacing:.14em; color:#a9b7bd; text-transform:uppercase; }

/* ---- ヘッダーナビ ---- */
.nav { display:flex; align-items:center; gap:clamp(10px,2vw,26px); flex:1; justify-content:center; }
.nav__link {
  position:relative;
  min-height:44px; padding:3px 0 7px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-family:"Zen Maru Gothic",sans-serif; font-weight:700; font-size:14px; line-height:1.35;
  color:#4a5a63; white-space:nowrap;
}
.nav__link small {
  font-family:"Noto Sans JP",sans-serif; font-weight:400; font-size:10px; line-height:1.3;
  letter-spacing:.06em; color:#a9b7bd;
}
.nav__link:hover { color:#5b8494; opacity:1; }
.nav__link.is-current { color:#5b8494; }
.nav__link.is-current::after {
  content:""; position:absolute; left:50%; bottom:1px; width:18px; height:1px;
  transform:translateX(-50%); background:#C9A96A;
}
@media (max-width:960px) { .nav { display:none; } }

/* ---- ヘッダー右端の申込みブロック（はみ出す仕様） ---- */
.header__cta {
  position:absolute; top:0; right:0; height:100px;
  min-width:150px; padding:12px 22px;
  background:#E9A6A6; color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  border-bottom-left-radius:20px;
  font-family:"Zen Maru Gothic",sans-serif; text-align:center;
  box-shadow:0 14px 26px rgba(233,166,166,.35);
}
.header__cta-icon { font-size:14px; }
.header__cta-title { font-weight:700; font-size:13.5px; line-height:1.5; }
.header__cta-sub { font-size:11px; opacity:.9; }
.header__cta:hover { opacity:.92; }

/* スマホ：ヘッダーCTAは幅を圧迫するため非表示にし、追従CTA(.sticky)に一本化 */
@media (max-width:600px) {
  .header__cta { display:none; }
  .header__inner { padding-right:22px; }
  body { padding-bottom:78px; } /* sticky CTA分 */
}
/* PC：追従CTAはヘッダーCTAと重複するため非表示 */
@media (min-width:601px) {
  .sticky { display:none; }
}
@media (max-width:330px) {
  .sticky__inner { padding:8px; gap:7px; }
  .sticky__line,
  .sticky__apply { padding:11px 2px; font-size:12.5px; white-space:nowrap; }
}
@media (prefers-reduced-motion:reduce) {
  .header--reveal { transition:none; }
}