:root{
  --ink:#1a1a1a;
  --ink-soft:#3a3a3a;
  --muted:#7a7a7a;
  --line:#e6e4df;
  --bg:#fbfaf7;
  --bg-warm:#f5f1ea;
  --accent:#1a1a1a;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}
body{
  font-family:"Noto Sans JP","Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  font-weight:400;
  line-height:1.8;
  font-feature-settings:"palt";
}
img{display:block;max-width:100%;height:auto}
.serif{font-family:"Noto Serif JP",serif;font-weight:400;font-feature-settings:"palt"}
.en{font-family:"Inter",sans-serif;letter-spacing:0.04em}

/* ───── 写真の共通加工：彩度を落とし、暖色寄り「静かな熱量」 ───── */
.photo{
  filter:saturate(0.78) contrast(0.96) brightness(1.02) sepia(0.06);
  object-fit:cover;width:100%;
}

/* ───── nav ───── */
.nav{
  position:absolute;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:24px 40px;
}
.logo{
  font-family:"Noto Serif JP",serif;
  font-size:20px;font-weight:500;letter-spacing:0.12em;
  color:var(--ink);
}
.nav-cta{
  font-size:13px;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--ink);padding-bottom:2px;
  letter-spacing:0.05em;
}
.nav-cta:hover{opacity:0.6}

/* ───── WordPress (Swell) のコンテンツ幅 1200px 制約を突破 ─────
   ヒーロー背景 / 代表メッセージ背景を画面幅いっぱいに広げる。
   ローカル単体表示時は calc() の値が 0 になり挙動変化なし。 */
body{overflow-x:hidden}
.hero-wrap,
.message{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* ───── hero wrap：FV画像を背景にしたオーバーレイ構造 ───── */
.hero-wrap{
  position:relative;overflow:hidden;background:var(--bg);
}
.hero-wrap::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:url('img/FV%20_top8.png');
  background-size:cover;background-position:center;background-repeat:no-repeat;
  filter:saturate(0.62) contrast(0.94) brightness(1.06) sepia(0.04);
}
.hero-wrap::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg, rgba(251,250,247,0.94) 0%, rgba(251,250,247,0.80) 50%, rgba(251,250,247,0.55) 100%),
    linear-gradient(180deg, rgba(251,250,247,0.45) 0%, rgba(251,250,247,0.25) 35%, rgba(251,250,247,0.90) 100%);
}

/* ───── hero ───── */
.hero{
  position:relative;z-index:2;
  min-height:92vh;
  padding:160px 40px 100px;
  max-width:1200px;
  margin:0 auto;
  display:flex;flex-direction:column;justify-content:center;
}
.eyebrow{
  font-size:12px;letter-spacing:0.2em;color:var(--muted);
  text-transform:uppercase;margin-bottom:48px;
}
.eyebrow-jp{
  font-family:"Noto Serif JP",serif;
  text-transform:none;letter-spacing:0.1em;
  margin-top:-36px;margin-bottom:48px;
  color:var(--ink-soft);font-size:13px;
}
.hero-title{
  font-family:"Noto Serif JP",serif;
  font-weight:400;
  font-size:60px;
  line-height:1.55;
  letter-spacing:0.02em;
  margin:0 0 36px;
  color:var(--ink);
}
.hero-title .em{font-weight:500}
.hero-warm{
  font-family:"Noto Serif JP",serif;
  font-size:17px;line-height:2.1;color:var(--ink-soft);
  margin:0 0 44px;letter-spacing:0.03em;max-width:520px;
}
.rule{
  width:48px;height:1px;background:var(--ink);
  border:0;margin:0 0 36px;
}
.hero-sub{
  font-size:15.5px;line-height:2.1;color:var(--ink-soft);
  max-width:560px;margin:0 0 16px;font-weight:400;
}
.hero-sub.serif{font-size:19px;line-height:1.95;color:var(--ink);margin-bottom:28px}
.hero-meta{
  font-size:13px;color:var(--muted);letter-spacing:0.04em;
  margin:0 0 56px;
}

/* ───── cta ───── */
.btn-primary{
  display:inline-flex;align-items:center;gap:14px;
  background:var(--ink);color:#fff;
  padding:20px 36px;
  font-size:15px;letter-spacing:0.08em;font-weight:500;
  border:0;border-radius:4px;cursor:pointer;
  text-decoration:none;
  transition:transform 0.2s, opacity 0.2s;
  font-family:"Noto Sans JP",sans-serif;
}
.btn-primary:hover{opacity:0.85;transform:translateY(-1px)}
.btn-primary .arrow{font-family:"Inter",sans-serif;font-weight:400}
.cta-note{
  font-size:13px;color:var(--muted);
  margin:20px 0 0;line-height:1.9;max-width:480px;
}
.cta-sub{
  display:inline-block;margin-left:24px;
  font-size:14px;color:var(--ink-soft);
  text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:2px;
}
.cta-sub:hover{border-color:var(--ink)}

/* ───── 子どもの変化 ───── */
.changes{
  padding:140px 40px;
  max-width:1200px;margin:0 auto;
}
.changes-head{
  max-width:720px;margin:0 0 80px;
}
.section-label{
  font-size:12px;letter-spacing:0.2em;color:var(--muted);
  text-transform:uppercase;margin-bottom:20px;
}
.section-label.center{text-align:center}
.section-title{
  font-family:"Noto Serif JP",serif;
  font-size:36px;font-weight:400;
  margin:0 0 28px;letter-spacing:0.03em;line-height:1.55;
}
.section-title.center{text-align:center;font-size:28px;margin-bottom:56px}
.section-lead{
  font-size:16px;color:var(--ink-soft);line-height:2;margin:0;
  max-width:560px;
}
.changes-body{
  display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center;
}
.changes-photo{
  width:100%;aspect-ratio:4/5;overflow:hidden;background:var(--bg-warm);
}
.changes-photo .photo{height:100%}
.change-list{
  list-style:none;padding:0;margin:0;
}
.change-list li{
  padding:24px 0;border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:48px 1fr;gap:24px;align-items:baseline;
}
.change-list li:last-child{border-bottom:0}
.change-list .num{
  font-family:"Inter",sans-serif;
  font-size:13px;color:var(--muted);letter-spacing:0.15em;
}
.change-list .label{
  font-family:"Noto Serif JP",serif;
  font-size:18px;font-weight:500;color:var(--ink);
  line-height:1.7;
}
.change-list .desc{
  display:block;font-family:"Noto Sans JP",sans-serif;font-weight:400;
  font-size:13px;color:var(--muted);margin-top:6px;line-height:1.9;
}

/* ───── 保護者の声 ───── */
.voices{
  padding:140px 40px;
  max-width:1100px;margin:0 auto;
  border-top:1px solid var(--line);
}
.voices-head{
  text-align:center;margin-bottom:80px;
  max-width:640px;margin-left:auto;margin-right:auto;
}
.voices-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:64px;
}
.voice{text-align:left}
.voice-mark{
  font-family:"Noto Serif JP",serif;
  font-size:36px;color:var(--muted);
  line-height:1;margin-bottom:16px;
}
.voice-body{
  font-family:"Noto Serif JP",serif;
  font-size:16.5px;line-height:2.1;color:var(--ink);
  margin:0 0 24px;letter-spacing:0.02em;font-weight:400;
}
.voice-attr{
  font-size:12px;color:var(--muted);letter-spacing:0.1em;
}

/* ───── 代表メッセージ ───── */
.message{
  padding:140px 40px;background:var(--bg-warm);
}
.message-inner{
  max-width:680px;margin:0 auto;
}
.message-label{
  font-size:12px;letter-spacing:0.2em;color:var(--muted);
  text-transform:uppercase;text-align:center;margin-bottom:32px;
}
.message-body{
  font-family:"Noto Serif JP",serif;
  font-size:19px;line-height:2.3;color:var(--ink);
  font-weight:400;margin:0 0 40px;
  letter-spacing:0.04em;
}
.message-body p{margin:0 0 24px}
.message-body p:last-child{margin-bottom:0}
.message-attr{
  font-size:13px;color:var(--muted);letter-spacing:0.08em;
  text-align:right;
}

/* ───── WHAT WE USE：体験を主役、ツール名は副次 ───── */
.tools{
  padding:140px 40px;
  max-width:1100px;margin:0 auto;
}
.tools-head{text-align:center;margin-bottom:72px;max-width:640px;margin-left:auto;margin-right:auto}
.tools-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:72px 64px;
  max-width:980px;margin:0 auto;
}
.tool{text-align:left}
.tool-photo{
  width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--bg-warm);
  margin-bottom:28px;
}
.tool-photo .photo{height:100%}
.tool-title{
  font-family:"Noto Serif JP",serif;
  font-size:22px;font-weight:500;line-height:1.7;
  margin:0 0 16px;letter-spacing:0.03em;
}
.tool-name{
  font-family:"Inter",sans-serif;
  font-size:11px;letter-spacing:0.2em;color:var(--muted);
  margin-bottom:16px;text-transform:uppercase;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.tool-desc{
  font-size:14px;color:var(--ink-soft);line-height:1.95;margin:0;
}
.tools-note{
  text-align:center;font-size:13px;color:var(--muted);
  margin-top:64px;letter-spacing:0.04em;
}

/* ───── 当日の流れ ───── */
.flow{
  padding:120px 40px;
  max-width:960px;margin:0 auto;
  border-top:1px solid var(--line);
}
.flow-steps{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:48px;
}
.step{text-align:left}
.step-num{
  font-family:"Inter",sans-serif;
  font-size:13px;color:var(--muted);letter-spacing:0.15em;
  margin-bottom:16px;
}
.step-title{
  font-family:"Noto Serif JP",serif;
  font-size:18px;font-weight:500;margin:0 0 12px;
  color:var(--ink);
}
.step-body{
  font-size:14px;color:var(--ink-soft);line-height:1.9;margin:0;
}

/* ───── 安心 ───── */
.reassure{
  padding:120px 40px;
  max-width:960px;margin:0 auto;
  border-top:1px solid var(--line);
}
.reassure-list{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:40px;
}
.reassure-item{
  padding:32px 8px;text-align:center;
}
.reassure-item .check{
  font-family:"Inter",sans-serif;
  font-size:13px;color:var(--ink);letter-spacing:0.15em;
  margin-bottom:16px;
}
.reassure-item .title{
  font-family:"Noto Serif JP",serif;
  font-size:16px;font-weight:500;margin:0 0 10px;
}
.reassure-item .desc{
  font-size:13px;color:var(--muted);line-height:1.9;margin:0;
}

/* ───── final cta ───── */
.final-cta{
  padding:140px 40px;text-align:center;
  max-width:760px;margin:0 auto;
}
.final-cta h2{
  font-family:"Noto Serif JP",serif;
  font-size:34px;font-weight:400;line-height:1.65;
  margin:0 0 36px;letter-spacing:0.04em;
}
.final-cta .seats{
  font-size:13px;color:var(--muted);
  margin:24px 0 0;letter-spacing:0.05em;
}
.final-cta .seats strong{color:var(--ink);font-weight:500}

/* ───── footer ───── */
.footer{
  padding:56px 40px;text-align:center;
  border-top:1px solid var(--line);
  font-size:12px;color:var(--muted);letter-spacing:0.05em;
}
.footer .logo-f{
  font-family:"Noto Serif JP",serif;
  font-size:16px;color:var(--ink);letter-spacing:0.15em;
  margin-bottom:12px;display:block;
}

/* ───── sticky cta (SP) ───── */
.sticky-cta{
  display:none;
  position:fixed;left:0;right:0;bottom:0;
  padding:12px 16px;background:rgba(251,250,247,0.95);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--line);
  z-index:20;
}
.sticky-cta .btn-primary{
  width:100%;justify-content:center;padding:18px;font-size:15px;
}

/* ───── responsive ───── */
@media (max-width:768px){
  .nav{padding:20px 24px}
  .logo{font-size:18px}
  .nav-cta{display:none}

  /* SP：背景画像は下半分にフェードアウト、上半分は白基調でテキスト可読性確保 */
  .hero-wrap::after{
    background:
      linear-gradient(180deg, rgba(251,250,247,0.85) 0%, rgba(251,250,247,0.55) 35%, rgba(251,250,247,0.25) 60%, rgba(251,250,247,0.92) 100%);
  }

  .hero{padding:112px 24px 64px;min-height:auto}
  .eyebrow{margin-bottom:28px;font-size:11px}
  .hero-title{font-size:24px;line-height:1.7;margin-bottom:24px;letter-spacing:0}
  .hero-warm{font-size:15px;line-height:1.95;margin-bottom:32px}
  .rule{margin-bottom:28px}
  .hero-sub.serif{font-size:16.5px;line-height:1.95;margin-bottom:20px}
  .hero-sub{font-size:14.5px;line-height:2;margin-bottom:12px}
  .hero-meta{font-size:12px;margin-bottom:40px}

  .btn-primary{padding:18px 28px;font-size:14px;width:100%;justify-content:center}
  .cta-sub{display:block;margin:20px 0 0;text-align:center}

  .changes{padding:88px 24px}
  .changes-head{margin-bottom:48px}
  .section-title{font-size:24px}
  .changes-body{grid-template-columns:1fr;gap:40px}
  .changes-photo{aspect-ratio:4/3;order:-1}
  .change-list li{grid-template-columns:36px 1fr;gap:16px;padding:20px 0}
  .change-list .label{font-size:16px}

  .voices{padding:88px 24px}
  .voices-head{margin-bottom:48px}
  .voices-grid{grid-template-columns:1fr;gap:0}
  .voice{padding:32px 0;border-bottom:1px solid var(--line)}
  .voice:first-child{padding-top:0}
  .voice:last-child{border-bottom:0;padding-bottom:0}
  .voice-body{font-size:15.5px;line-height:2}

  .message{padding:88px 24px}
  .message-body{font-size:16px;line-height:2.1}

  .tools{padding:88px 24px}
  .tools-head{margin-bottom:48px}
  .section-title.center{font-size:22px;margin-bottom:36px}
  .tools-grid{grid-template-columns:1fr;gap:48px}
  .tool-title{font-size:19px}

  .flow,.reassure{padding:72px 24px}
  .flow-steps,.reassure-list{grid-template-columns:1fr;gap:32px}
  .step{padding-bottom:24px;border-bottom:1px solid var(--line)}
  .step:last-child{border:0;padding-bottom:0}
  .reassure-item{padding:16px 0;border-bottom:1px solid var(--line)}
  .reassure-item:last-child{border:0}

  .final-cta{padding:88px 24px}
  .final-cta h2{font-size:24px}

  .sticky-cta{display:block}
  body{padding-bottom:88px}
}