/* ============================================================
   RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ============================================================
   ROOT カラー変数
============================================================ */
:root {
  --orange:     #FF691F;
  --yellow:     #FFE965;
  --teal:       #64C2DB;
  --cream:      #FFF7D0;
  --light-blue: #E6F7FB;
  --green:      #6ECE98;
  --purple:     #BD72DA;
  --text:       #333;
  --white:      #fff;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Zen Kaku Gothic New', sans-serif;
  font-size: 16px;
  color: var(--text);
  background: var(--white);
}

/* 欧文は Roboto */
.teacher-name-en, .teacher-role,
.step-label, .flow-step-label, .features-num {
  font-family: 'Roboto', sans-serif;
}

/* PC では非表示、SPでだけ改行 */
.br-sp {
  display: none;
}

@media (max-width: 768px) {
  .br-sp {
    display: block;
  }
}

/* ============================================================
   H2 共通（PC: 36px）
============================================================ */
h2 {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.08em;
}

/* ============================================================
   HEADER
   PC / SP 共通: position: fixed で常時固定
   PC  : 背景 #FDF8E8 / border-bottom なし / ロゴ左・ナビ右
   SP  : スクロール前 → ロゴのみ中央
         スクロール後（.header-scrolled）→ ロゴ左・入会ボタン右
============================================================ */
header {
  background: var(--cream);          /* PC/SP 共通 */
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;              /* sticky → fixed に変更 */
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  /* border-bottom は削除 */
}

/* ヘッダー分の高さを body 最上部にオフセット */
body {
  padding-top: 76px;            /* header の実高さに合わせて調整 */
}

.logo-img {
  height: 42px;
  width: auto;
  display: block;
}

nav {
  display: flex;
  align-items: center;
  gap: 24px;
}
nav a {
  text-decoration: none;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
}
nav a:hover { color: var(--orange); }

.btn-join {
  background: var(--orange);
  color: var(--white) !important;
  padding: 10px 24px;
  border-radius: 50px;
  font-weight: 700;
  transition: opacity 0.2s;
}
.btn-join:hover { opacity: 0.85; }

/* SP 入会ボタン（PC では非表示） */
.btn-header-sp {
  display: none;
  background: var(--orange);
  color: var(--white);
  padding: 10px 20px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.btn-header-sp:hover { opacity: 0.85; }

/* ============================================================
   WAVE
============================================================ */
.wave-wrap         { width: 100%; line-height: 0; overflow: hidden; }
.wave-wrap.wave-top    { background: var(--cream); }
.wave-wrap.wave-bottom { background: var(--cream); }
.wave-img          { width: 100%; height: auto; display: block; }

/* ============================================================
   HERO
   - 背景は100%幅
   - コンテンツ（hero-inner）は max-width: 1440px で中央寄せ
   - 要素はセンター上揃え（align-items: flex-start / justify-content: center）
============================================================ */
.hero {
  background: var(--cream);
  padding: 0 60px;
  overflow: hidden;
}

/* コンテンツ幅制限ラッパー */
.hero-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;   /* 左右に振り分け */
  align-items: flex-start;          /* 上揃え */
  gap: 40px;
}

.hero-left {
  flex: 1 1 auto;
  max-width: 616px;
  padding: 90px 0 60px 0;
}
.hero-title-img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 24px;
}
.hero-title-pc  { display: block; max-width: 616px; }
.hero-title-sp  { display: none; }

.hero-illust    { flex-shrink: 0; }
.hero-illust-img { height: auto; display: block; }
.hero-illust-pc {
  display: block;
  width: 500px;   /* hero.png のサイズを 500px に固定 */
}
.hero-illust-sp { display: none; }

/* ============================================================
   hero-line-wrap: hero セクション外・about の直前
   PC: 表示 / SP: 非表示
============================================================ */
.hero-line-wrap {
  width: 100%;
  line-height: 0;
  overflow: hidden;
  background: var(--cream);   /* hero 背景と揃える */
}
.hero-line-img {
  width: 100%;
  height: auto;
  display: block;
}

.btn-hero {
  background: var(--orange);
  color: var(--white);
  padding: 14px 36px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  display: inline-block;
  transition: opacity 0.2s;
}
.btn-hero:hover { opacity: 0.85; }

/* ============================================================
   ABOUT
============================================================ */
.about-section {
  background: var(--teal);    /* #64C2DB = var(--teal) */
  padding: 64px 40px;
  text-align: center;
  color: var(--white);
  scroll-margin-top: 80px;
}
.about-section p {
  font-size: 24px;
  font-weight: 500;
  line-height: 2;
  margin-bottom: 36px;
}
.about-section p:last-child { margin-bottom: 0; }
.highlight-yellow { color: var(--yellow); font-weight: 700; }

/* ============================================================
   PHOTO STRIP
============================================================ */
.photo-strip     { width: 100%; overflow: hidden; line-height: 0; background: var(--teal); }
.photo-strip-img { width: 100%; height: auto; display: block; }
.photo-strip-pc  { display: block; }
.photo-strip-sp  { display: none; }

/* ============================================================
   TROUBLE
============================================================ */
.trouble-section {
  background: var(--cream);
  padding: 72px 40px;
  text-align: center;
}
.trouble-section h2 { margin-bottom: 24px; }
.trouble-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}
.trouble-item {
  background: var(--white);
  border-radius: 12px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: left;
  font-size: 16px;
  font-weight: 500;
}
.check-icon {
  width: 22px; height: 22px;
  background: var(--teal);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: white; font-size: 16px; font-weight: 700;
}

/* ============================================================
   MECHANISM
============================================================ */
.mechanism-section {
  background: var(--light-blue);
  padding: 72px 40px 48px;
  text-align: center;
}
.mechanism-inner {
  max-width: 1240px;
  padding: 0 40px;
  display: flex;
  gap: 64px;
  align-items: flex-start;
  text-align: left;
  margin: 0 auto;
}

/* PC: テキスト左・イラスト右 */
.mechanism-illust {
  flex-shrink: 0;
  order: 2;
}
.mechanism-text {
  flex: 1;
  order: 1;
}

.mechanism-section h2 { margin-bottom: 24px; }
.mechanism-section p {
  font-size: 16px;
  line-height: 2;
}
.mechanism-illust-img { width: 220px; height: auto; display: block; }

/* steps-grid — PC: 6カラム */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  max-width: 1240px;
  margin: 40px auto 0;
}
.step-card {
  background: var(--white);
  border-radius: 12px;
  padding: 16px 12px;
  text-align: left;   /* PC でも左揃え */
}
.step-header { margin-bottom: 10px; }
.step-label {
  font-size: 16px; color: var(--teal); font-weight: 700;
  letter-spacing: 0.08em; margin-bottom: 4px;
  text-align: left;   /* 左揃え */
}
.step-title {
  font-size: 20px; font-weight: 700;
  text-align: left;   /* 左揃え */
}
.step-items { list-style: none; text-align: left; padding-left: 4px; margin-top: 8px; }
.step-items li {
  line-height: 1.8;
  display: flex; align-items: flex-start; gap: 4px;
}
.step-items li::before {
  content: '●'; font-size: 7px; color: var(--orange);
  margin-top: 5px; flex-shrink: 0;
}

/* ============================================================
   6つのできること
============================================================ */
.features-section {
  background: var(--cream);
  padding: 80px 40px;
   scroll-margin-top: 80px;
}
.features-inner { max-width: 1240px; margin: 0 auto; }

.features-heading {
  text-align: center;
  font-size: 36px;
  font-weight: 900;
  margin-bottom: 8px;
  line-height: 1.4;
}

/*
  「6つのできること」全体を section-heading で囲む
  → inline の疑似要素で黄色帯を表示
*/
.features-heading-all {
  display: inline;          /* section-heading と同じ inline 挙動 */
}

.features-num {
  font-size: 80px;          /* PC/SP 共通 80px */
  color: var(--teal);
  font-weight: 900;
  line-height: 1;
  vertical-align: middle;
}
.features-sub {
  font-size: 30px;
  font-weight: 400;
  vertical-align: middle;
}
.features-heading-label {
  vertical-align: middle;
}

.features-lead {
  text-align: center; font-size: 16px; color: 333px;; margin-bottom: 24px;
}
.features-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.feature-card {
  background: var(--white); border-radius: 40px; padding: 28px 28px 24px;
}
.feature-label { font-size: 14px; font-weight: 700; color: #333; margin-bottom: 8px; letter-spacing: 0.05em; }
.feature-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.feature-icon { flex-shrink: 0; display: flex; align-items: center; }
.feature-icon-img { width: 32px; height: 32px; object-fit: contain; display: block; }
.feature-title { font-size: 36px; font-weight: 700; letter-spacing: 0.05em; }
.feature-desc { font-size: 16px; line-height: 1.9; }

/* ============================================================
   CTA
============================================================ */
.cta-section {
  background: var(--cream);
  padding: 60px 40px 80px;
}
.cta-inner {
  background: var(--orange);
  border-radius: 28px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 64px 100px;
  text-align: center;
  position: relative;
  overflow: visible;
}
.cta-illust-left {
  position: absolute; left: -100px; bottom: -10px;
  width: 270px; pointer-events: none; z-index: 2;
}
.cta-illust-right {
  position: absolute; right: -32px; top: -32px;
  width: 252px; pointer-events: none; z-index: 2;
}
.cta-illust-img-left  { width: 270px; height: auto; display: block; }
.cta-illust-img-right { width: 252px; height: auto; display: block; }
.cta-content { position: relative; z-index: 1; }
.cta-heading {
  font-size: 36px; font-weight: 900;
  color: var(--white); line-height: 1.6; margin-bottom: 20px; letter-spacing: 0.05em;
}
.cta-desc {
  font-size: 16px; color: rgba(255,255,255,0.9); line-height: 2; margin-bottom: 32px;
}
.btn-cta {
  display: inline-block; background: var(--white); color: var(--orange);
  font-size: 16px; font-weight: 700; padding: 14px 56px; border-radius: 50px;
  text-decoration: none; margin-bottom: 20px; transition: opacity 0.2s, transform 0.2s;
}
.btn-cta:hover { opacity: 0.9; transform: translateY(-1px); }
.cta-link-wrap { margin-top: 4px; }
.cta-link {
  color: rgba(255,255,255,0.9); font-size: 16px;
  text-decoration: underline; text-underline-offset: 3px;
}
.cta-link:hover { opacity: 0.85; }

/* ============================================================
   先生の紹介
============================================================ */
.teacher-section { background: var(--light-blue); padding: 80px 40px;  scroll-margin-top: 80px;}
.teacher-inner   { max-width: 1240px; margin: 0 auto; }
.teacher-pre     { text-align: center; font-size: 14px; font-weight: 700; margin-bottom: 8px; letter-spacing: 0.08em; }
.teacher-heading { text-align: center; font-weight: 900; margin-bottom: 24px; }
.teacher-card {
  background: var(--white); border-radius: 20px; padding: 40px;
  display: flex; gap: 36px; align-items: flex-start;
}
.teacher-avatar     { flex-shrink: 0; }
.teacher-avatar-img {
  width: 140px; height: 140px;
  border-radius: 50%; object-fit: cover; display: block;
}
.teacher-info        { flex: 1; }
.teacher-role        { font-size: 16px; color: #333; letter-spacing: 0.1em; margin-bottom: 6px; }
.teacher-name-row    { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.teacher-name        { font-size: 28px; font-weight: 900; letter-spacing: 0.2em; }
.teacher-san         { font-size: 16px; font-weight: 700; }
.teacher-name-en     { font-size: 14px; color: #333; letter-spacing: 0.4em; margin-bottom: 24px; }
.teacher-bio         { font-size: 16px; line-height: 2; margin-bottom: 12px; }
.instagram-btn {
  display: inline-flex; align-items: center; gap: 8px; color: #333;
  background: var(--cream);
  border: none;
  border-radius: 50px; padding: 16px 32px;
  font-size: 16px; font-weight: 700; letter-spacing: 0.08em; text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.instagram-btn:hover { background: #ede8c0; }
.instagram-icon { width: 20px; height: 20px; object-fit: contain; display: block; }

/* ============================================================
   入会プラン
============================================================ */
.plans-section  { background: var(--cream); padding: 80px 40px;  scroll-margin-top: 80px;}
.plans-inner    { max-width: 1240px; margin: 0 auto; }
.plans-heading  { text-align: center; font-weight: 900; margin-bottom: 24px; }
.plan-card {
  background: var(--white); border-radius: 40px; padding: 40px;
  margin-bottom: 20px; display: grid;
  grid-template-columns: 140px 430px 1fr; gap: 24px; align-items: start;
}
.plan-number {
  font-size: 80px;
  font-weight: 400;
  line-height: 1;
  margin: 0 auto;
}
.plan-number--orange { color: var(--orange); }
.plan-number--green  { color: var(--green);  }
.plan-number--purple { color: var(--purple); }
.plan-label  { font-size: 14px; font-weight: 700; color: #333; }
.plan-title  { font-size: 36px; font-weight: 700; letter-spacing: 0.06em; }
.plan-desc   { font-size: 16px; line-height: 1.9; margin-bottom: 16px; }
.plan-bullets { list-style: none; padding: 0; }
.plan-bullets li {
  font-size: 16px; padding: 4px 0 4px 20px;
  position: relative; line-height: 1.7;
}
.plan-bullets li::before {
  content: '●'; font-size: 8px; color: var(--teal);
  position: absolute; left: 2px; top: 7px;
}

/* ============================================================
   プランの比較
============================================================ */
.compare-section  { background: #ffffff; padding: 40px 40px 80px; }
.compare-inner    { max-width: 860px; margin: 0 auto; }
.compare-heading  { text-align: center; font-weight: 900; margin-bottom: 24px; letter-spacing: 0.12em; }
.compare-img-wrap { border-radius: 16px; overflow: hidden; }
.compare-img      { width: 100%; height: auto; display: block; }
.compare-note     { font-size: 11px; color: #888; margin-top: 16px; line-height: 1.8; text-align: left; }

/* ============================================================
   入会の流れ
============================================================ */
.flow-section  { background: var(--light-blue); padding: 80px 40px;  scroll-margin-top: 80px;}
.flow-inner    { max-width: 1240px; margin: 0 auto; }
.flow-heading  { text-align: center; font-weight: 900; margin-bottom: 24px; letter-spacing: 0.08em; }
.flow-grid     { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.flow-card {
  background: var(--teal); border-radius: 16px; padding: 28px 20px 24px;
  color: white; text-align: center;
}
.flow-step-label { font-size: 16px; font-weight: 700; letter-spacing: 0.2em; margin-bottom: 16px; opacity: 0.9; }
.flow-icon {
  width: 80px; height: 80px;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.flow-icon-img { width: 80px; height: 80px; object-fit: contain; display: block; }
.flow-desc { font-size: 16px; line-height: 1.9; opacity: 0.95; text-align: left; }

/* ============================================================
   FOOTER
============================================================ */
footer {
  background: #ffffff;
  color: #aaa;
  text-align: center;
  padding: 32px;
  font-size: 12px;
  border-top: 1px solid #eee;
}

/* ============================================================
   H2 黄色下線（section-heading）
   .features-heading-all にも適用（全体マーカー用）
============================================================ */
.section-heading,
.features-heading-all {
  display: inline;
  position: relative;
  z-index: 0;
}
.section-heading::after,
.features-heading-all::after {
  content: '';
  display: block;
  width: 100%;
  height: 20px;
  background: var(--yellow);
  position: absolute;
  bottom: -6px;
  left: 0;
  z-index: -1;
  border-radius: 2px;
}

/* ============================================================
   フェードインアニメーション
============================================================ */
.fade-item {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.fade-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.fade-item:nth-child(2) { transition-delay: 0.08s; }
.fade-item:nth-child(3) { transition-delay: 0.16s; }
.fade-item:nth-child(4) { transition-delay: 0.24s; }
.fade-item:nth-child(5) { transition-delay: 0.12s; }
.fade-item:nth-child(6) { transition-delay: 0.20s; }

/* ============================================================
   RESPONSIVE — 768px 以下（SP）
============================================================ */
@media (max-width: 768px) {

  /* H2 モバイル統一: 26px */
  h2 { font-size: 26px;   letter-spacing: 0.02em; }

  /* features-num は例外（80px 固定） */
  .features-num     { font-size: 80px; }
  .features-sub     { font-size: 22px; }
  .features-heading { font-size: 26px; }

  /* body offset を SP 用に調整 */
  body { padding-top: 60px; }

  /* ============================================================
     HEADER — SP
     スクロール前: ロゴのみ中央（nav / btn-header-sp 非表示）
     スクロール後: ロゴ左 + 入会ボタン右（.header-scrolled）
  ============================================================ */
  header {
    padding: 12px 20px;
    justify-content: center;   /* ロゴ中央（デフォルト） */
  }
  nav            { display: none; }
  .btn-header-sp { display: none; }  /* スクロール前は非表示 */

  /* スクロール後 */
  header.header-scrolled {
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  }
  header.header-scrolled .btn-header-sp {
    display: block;
  }

  /* ============================================================
     hero-line-wrap: SP では非表示
  ============================================================ */
  .hero-line-wrap { display: none; }

  /* ============================================================
     HERO — SP
  ============================================================ */
  .hero {
    padding: 32px 0 0;
  }
  .hero-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    max-width: 100%;
  }
  .hero-left {
    padding: 0 20px;
    max-width: 100%;
    text-align: center;
  }
  .hero-title-img {
    margin-bottom: 20px;
  }

  .hero-title-pc    { display: none; }
  .hero-title-sp    { display: block; max-width: 100%; }
  .hero-illust      { width: 100%; }
  .hero-illust-pc   { display: none; }
  .hero-illust-sp   { display: block; width: 100%; }

  /* ============================================================
     ABOUT / PHOTO STRIP — SP
  ============================================================ */
  .about-section  { padding: 48px 20px; }
  .about-section p { font-size: 18px; }
  .photo-strip-pc { display: none; }
  .photo-strip-sp { display: block; }

  /* ============================================================
     TROUBLE — SP
  ============================================================ */
  .trouble-grid    { grid-template-columns: 1fr; }
  .trouble-section { padding: 48px 20px; }

  /* ============================================================
     MECHANISM — SP
     表示順: イラスト → テキスト
  ============================================================ */
  .mechanism-section { padding: 24px 20px; }
  .mechanism-inner {
    padding: 0;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
  }
  .mechanism-illust { order: 1; }
  .mechanism-text   { order: 2; text-align: left; }
  .mechanism-illust-img { width: 180px; }

  /* steps-grid — SP: 1カラム・カード内横2分割 */
  .steps-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 100%;
  }
  .step-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 0 16px;
    text-align: left;
    padding: 20px;
    border-radius: 20px;
  }
  .step-header {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .step-label {
    font-size: 14px;
    margin-bottom: 6px;
  }
  .step-title {
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0;
  }
  .step-items {
    grid-column: 2;
    grid-row: 1;
    padding-left: 0;
    margin-top: 0;
  }
  .step-items li { font-size: 16px; }

  /* ============================================================
     FEATURES — SP
  ============================================================ */
  .features-grid    { grid-template-columns: 1fr; }
  .features-section { padding: 48px 20px; }
  .feature-title { font-size: 26px; letter-spacing: 0.08em; }

  /* ============================================================
     CTA — SP
  ============================================================ */
  .cta-section { padding: 60px 16px 80px; }
  .cta-inner   { padding: 48px 20px 80px; }
  .cta-heading { font-size: 26px; }
  .cta-illust-left  { width: 100px; left: -75px;  bottom: -80px; }
  .cta-illust-right { width: 90px;  right: 28px; top: -100px;   }
  .cta-illust-img-left  { width: 180px; }
  .cta-illust-img-right { width: 180px;  }

  /* ============================================================
     TEACHER — SP
  ============================================================ */
  .teacher-section  { padding: 48px 20px; }
  .teacher-card     { flex-direction: column; align-items: center; }
  .teacher-info     { text-align: center; }
  .teacher-name-row { justify-content: center; }

  /* ============================================================
     PLANS — SP
  ============================================================ */
  .plans-section { padding: 48px 20px; }
  .plan-card {
    grid-template-columns: 60px 1fr;
    grid-template-rows: auto auto;
    padding: 28px 28px 24px;
  }
  .plan-number  { font-size: 80px; grid-row: span 2; }
  .plan-title  { font-size: 26px;}
  .plan-detail  { grid-column: 2; }

  /* ============================================================
     COMPARE — SP: 高さ550px・横スクロール
  ============================================================ */
  .compare-section  { padding: 40px 20px 60px; }
  .compare-inner    { max-width: 100%; }
  .compare-img-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0;
    -webkit-overflow-scrolling: touch;
  }
  .compare-img {
    width: auto;
    height: 550px;
    max-width: none;
    display: block;
  }

  /* ============================================================
     FLOW — SP
  ============================================================ */
  .flow-section { padding: 48px 20px; }
  .flow-grid    { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   RESPONSIVE — 480px
============================================================ */
@media (max-width: 480px) {
  .plan-card   { grid-template-columns: 1fr; gap: 12px 40px; }
  .plan-number { grid-row: auto; }
  .flow-grid   { grid-template-columns: 1fr; }
}