/* ========================================
   eichi LP - Design Tokens & Base
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital@0;1&family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* ロゴ用フォント（ローカル：表示を速くする） */
@font-face {
  font-family: 'bigmoore';
  src: url('../assets/fonts/bigmoore.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  /* Colors */
  --color-main: #ffa047;
  --color-accent: #5dcaef;
  --color-accent-light: #9cdcef;
  --color-text-blue: #156a8d;
  --color-text-brown: #6f5043;
  --color-text-light-brown: #A38578;
  --color-text-green: #617120;
  --color-dark: #222222;
  --color-text: #333333;
  --color-white: #FFFFFF;
  --color-bg-black: #262b2b;
  --color-bg-light-black: #353c3c;
  --color-bg-light: #F9F9F9;
  --color-bg-light-blue: #e6eff1;
  --color-bg-blue: #d4e8ec;
  /* コース比較テーブル用グラデーション（24° 逆方向＝204deg・比率121%） */
  --gradient-platinum: linear-gradient(204deg, #bce1e3 0%, #d7ecf1 30%, #bbe2ee 70%, #a3d3e4 100%);
  --gradient-platinum-size: 121%;
  --gradient-premium: linear-gradient(204deg, #ffb02a 0%, #ffdecb 50%, #ffc261 100%);
  --gradient-premium-size: 121%;
  --gradient-standard: linear-gradient(204deg, #d0d759 0%, #f3f8c2 50%, #d1d85d 100%);
  --gradient-standard-size: 121%;
  /* Typography */
  --font-ja: "zen-kaku-gothic-new", sans-serif;
  --font-en: 'Cormorant Garamond', serif;
  --font-title-en: 'bigmoore', serif;
  /* Spacing */
  --inner-max: 1140px;
  --inner-padding-pc: 30px;
  --inner-padding-sp: 1rem 1.25rem;
  --section-padding-pc: 6rem 0;
  --section-padding-pc-small: 4rem 0;
  --section-padding-sp: 2.5rem 0;
  --h2-padding-pc: 6rem 0 4rem;
  --h2-padding-sp: 4rem 0 2rem;
  --h3-padding-pc: 10rem 0 2rem;
  --h3-padding-sp: 6rem 0 1rem;
  --gap-contents: 2.25rem;
  --gap-pc: 1.5rem;
  --gap-sp: 1rem;
  /* Border radius */
  --radius-btn: 999px;
  --radius-card: 0.25rem;
  --radius-box: 0.375rem;
  --radius-img: 0.5rem;
  /* Transition */
  --ease: 0.25s ease;
  /* Line height */
  --line-height-text: 1.7;
}

html {
  scroll-behavior: smooth;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 5rem;
  /* スクロール可能になったタイミングで幅が縮まないよう、スクロールバー用の幅を最初から確保 */
  scrollbar-gutter: stable;
  overflow-y: scroll;
}

/* Lenis 有効時は scroll-snap を無効（Lenis は CSS scroll-snap 非対応） */
html.lenis {
  height: auto;
  scroll-snap-type: none;
}
html.lenis body {
  height: auto;
}

/* Lenis 推奨 CSS */
.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}
.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch] {
  overscroll-behavior: contain;
}
.lenis.lenis-smooth iframe {
  pointer-events: none;
}

body {
  font-family: var(--font-ja);
  font-size: 16px;
  line-height: var(--line-height-text);
  color: var(--color-text);
  background: var(--color-white);
  overflow-x: hidden;
  transition: opacity 1.2s ease;
}

/* 白画面からふわっと表示（PCのみ。SPは白画面にしない） */
body.body--preload {
  opacity: 0;
}
@media (max-width: 767px) {
  body.body--preload {
    opacity: 1;
  }
}

/* ヒーローロゴ表示完了までスクロール禁止 */
body.hero-scroll-lock {
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* riefujiwara.com 風：セクションごとにスナップ（Lenis 無効時のみ有効） */
html:not(.lenis) main > section,
html:not(.lenis) .footer {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

/* ========================================
   Utility: inner container
   ======================================== */

.l-inner {
  width: 100%;
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 0 var(--inner-padding-pc);
}

/* ========================================
   Utility: SP/PC（ブレークポイント 767px）
   ======================================== */

/* SP時のみ表示（PCでは非表示） */
.sp-only { display: none !important; }
.sp-only--inline { display: none !important; }
.sp-only--flex { display: none !important; }

/* PC時のみ表示（SPでは非表示）※SP用の上書きはファイル末尾の @media (max-width: 767px) 内 */

/* ========================================
   Section title pattern (English + Japanese)
   ======================================== */

.section-head {
  text-align: center;
}

.section-head__en {
  font-family: var(--font-title-en);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--color-accent);
}

.section-head__ja {
  font-size: 1.5rem;
  font-weight: 700;
  color: inherit;
}

/* スクロールで表示されたらフェードアップ（eichi21.jp/space3rd 同様） */
.animation-fadeup {
  display: block;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.animation-fadeup.is-animated {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s;
}

/* ========================================
   Buttons
   ======================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  border-radius: var(--radius-btn);
  transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.btn:hover { opacity: 0.9; }
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.btn--main {
  background: var(--color-main);
  color: var(--color-white);
}

/* ========================================
   Header
   ======================================== */

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 1rem 0;
  transition: background var(--ease);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: end;
}
.header__cta {
  width: 10rem;
  font-weight: 500;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  margin: 1rem 4rem 0 0;
  opacity: 0;
  filter: blur(8px);
  /* ロゴ表示完了後（約3.5s）に表示、duration 2s */
  animation: header-cta-fade-in 2s ease 3.5s forwards;
}

@keyframes header-cta-fade-in {
  from {
    opacity: 0;
    filter: blur(8px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

.header__cta:hover {
  background: #ffb153;
}

.header--scrolled {
  /* background: var(--color-dark); */
}

/* スマホ時のみ：画面下固定CTA（PCでは非表示） */
.fixed-cta {
  display: none;
}

.fixed-cta__btn {
  display: block;
  width: 100%;
  text-align: center;
  font-weight: 500;
  padding: 0.875rem 1.5rem;
}

/* ========================================
   Hero（高さは JS で phaseHeight ピクセルに設定・次のセクション上端で progress=1）
   ======================================== */

.hero {
  height: 100vh;
  position: relative;
  /* 実際の高さは JS (setHeroHeight) で phaseHeight に上書き */
}

.hero__fixed {
  position: fixed;
  top: 0;
  left: 50%;
  right: auto;
  width: 100vw;
  margin-left: -50vw;
  height: 100vh;
  height: 100dvh;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
  /* 画像背景（動画に戻す場合はコメントアウト）
  background: url("../assets/images/hero.png") no-repeat center center;
  background-size: cover;
  */
  color: var(--color-white);
  overflow: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

/* HERO_SIMPLE_SCROLL 時：全テキスト表示後、ヒーローを absolute に切り替えスクロールで流す（top は JS で指定） */
.hero__fixed--scrolling {
  position: absolute;
  left: 50%;
  right: auto;
  width: 100vw;
  margin-left: -50vw;
  height: 100vh;
  height: 100dvh;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* 画像背景：ロード時ズームアウト（eichi21 風）※Retina 対応 */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: -webkit-image-set(url("../assets/images/hero.png") 1x, url("../assets/images/hero@2x.png") 2x);
  background-image: image-set(url("../assets/images/hero.png") 1x, url("../assets/images/hero@2x.png") 2x);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  animation: hero-zoom-out 10s 1 forwards;
}

@keyframes hero-zoom-out {
  0% {
    transform: scale(1.2);
    transform-origin: left top;
  }
  100% {
    transform: scale(1);
    transform-origin: center;
  }
}

/* リップル用レイヤー（overlay の上・inner の下でマウスを受ける）※水の波紋は非表示 ※Retina 対応 */
.hero__ripples {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0.6;
  background-image: -webkit-image-set(url("../assets/images/hero.png") 1x, url("../assets/images/hero@2x.png") 2x);
  background-image: image-set(url("../assets/images/hero.png") 1x, url("../assets/images/hero@2x.png") 2x);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  animation: hero-zoom-out 10s 1 forwards;
  pointer-events: auto;
  display: none !important;
  pointer-events: none !important;
}

/* WebGL リップルが効かないときのフォールバック（クリックで波紋） */
.hero__ripple-drop {
  position: absolute;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: hero-ripple-drop 0.8s ease-out forwards;
  pointer-events: none;
}

@keyframes hero-ripple-drop {
  to {
    transform: scale(15);
    opacity: 0;
  }
}

.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 0.5;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.hero__canvas canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.hero__curtain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero__curtain img {
  display: none;
}

body.no-curtains .hero__canvas {
  display: none;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--inner-max);
  padding: 0 var(--inner-padding-pc);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* リップル用レイヤーがマウスを受けるため */
}

.hero__brand--hidden {
  position: absolute;
  opacity: 0 !important;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.hero__headlines--hidden {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.hero__brand {
  font-family: "bigmoore", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 5rem;
  margin-bottom: 1rem;
  letter-spacing: 0.1em;
  opacity: 0.7;
}

.hero__brand .hero__brand-char {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transition: opacity 2s ease, filter 2s ease;
}

.hero__brand .hero__brand-char.is-visible {
  opacity: 1;
  filter: blur(0);
}

.hero__brand--hidden .hero__brand-char {
  opacity: 0 !important;
  filter: blur(6px);
}

.hero__headlines {
  margin-bottom: 0;
}

.hero__headline-line {
  display: block;
  font-family: "Hiragino Mincho ProN", "Hiragino Mincho", serif;
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 500;
  line-height: 2;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  /* 外側光彩（Outer Glow）：不透明度20%・サイズ7px・滑らか */
  text-shadow:
    0 0 4px rgba(93, 202, 239, 0.25),
    0 0 8px rgba(93, 202, 239, 0.2),
    0 0 12px rgba(93, 202, 239, 0.15),
    0 0 16px rgba(93, 202, 239, 0.1);
}

/* 1列ずつ表示：スクロールで表示される順に少しずつ遅延（1つ目pに3行、2つ目pに2行） */
.hero__headline-text:first-child .hero__headline-line:nth-child(1) { transition-delay: 0ms; }
.hero__headline-text:first-child .hero__headline-line:nth-child(2) { transition-delay: 60ms; }
.hero__headline-text:first-child .hero__headline-line:nth-child(3) { transition-delay: 120ms; }
.hero__headline-text:last-child .hero__headline-line:nth-child(1) { transition-delay: 180ms; }
.hero__headline-text:last-child .hero__headline-line:nth-child(2) { transition-delay: 240ms; }

.hero__headline-line:last-child {
  margin-bottom: 0;
}

.hero__headline-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero__headline-char {
  font-weight: 500;
  display: inline;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.hero__headline-line.is-visible .hero__headline-char {
  opacity: 0.7;
}

/* 1文字目（「e」など）は transition なしで即表示（機種差で遅れて見えるのを防ぐ） */
.hero__headline-line.is-visible .hero__headline-char:first-child {
  transition: none;
}

.hero__headline-text {
  margin-bottom: 3.5rem;
}

.hero__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0,25 C300,50 600,0 900,25 C1050,38 1150,12 1200,25 L1200,0 L0,0 Z' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat center bottom;
  background-size: 100% 50px;
  pointer-events: none;
}

.main-content {
  position: relative;
  z-index: 10;
}

/* ========================================
   Offer (3rd season 募集期間)
   ======================================== */

.offer {
  position: relative;
  padding: 5rem 0 0;
  background: var(--color-white);
}

/* wave 共通：上端カーブ（他セクションと同一形状） */
.offer__wave--top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='og' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='rgba(157,220,239,0.65)'/%3E%3Cstop offset='100%25' stop-color='%23ffffff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,25 C300,0 600,50 900,25 C1050,12 1150,38 1200,25 L1200,50 L0,50 Z' fill='url(%23og)'/%3E%3C/svg%3E") no-repeat center top;
  background-size: 100% 50px;
  pointer-events: none;
}

.offer__content {
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(var(--color-white), var(--color-white)) padding-box,
              linear-gradient(270deg,#ffb02a 31%, #9cdcef 78%, #5dcaef 100%) border-box;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}

.offer__content-head {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(270deg,#ffb02a 0%,#ffb02a 36%, #ffa36e 42%, #9cdcef 58%, #5dcaef 64%, #5dcaef 100%);
  text-align: center;
}

.offer__content-head-title {
  margin: 0;
  font-size: 1.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  letter-spacing: 0.05em;
}

.offer__content-body {
  padding: 2rem 1.5rem 2.5rem;
  text-align: center;
}

.offer__content-text {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: var(--line-height-text);
}

.offer__content-text--main {
  font-family: var(--font-ja);
  font-weight: 500;
  font-size: 2.875rem;
  margin-bottom: 0.875rem;
  text-align: center;
  background: linear-gradient(to bottom, #ffb02a 31%, #9cdcef 78%, #5dcaef 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.offer__content-text-date {
  font-size: 1.25rem;
  margin-left: 0.25rem;
}

.offer__content-dates {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 306px;
  width: 100%;
  margin: 0 auto;
}

.offer__content-text--early {
  color: var(--color-accent);
  font-weight: 700;
  border-bottom: 2px solid var(--color-accent);
  margin-bottom: 0.875rem;
}

.offer__content-text--general {
  color: var(--color-main);
  font-weight: 700;
  border-bottom: 2px solid var(--color-main);
  margin-bottom: 2rem;
}

.offer__content-btn {
  max-width: 306px;
  width: 100%;
  padding: 1rem 2rem;
  background: var(--color-main);
  color: var(--color-white);
  font-size: 1.25rem;
  font-weight: 500;
  border-radius: 999px;
  letter-spacing: 0.12em;
}

.offer__content-btn:hover {
  background: #ffb153;
}

/* ========================================
   Voices (Member's voice)
   ======================================== */

.voices {
  padding: 10rem 0 20rem;
  background: var(--color-white);
}

.voices__inner {
  max-width: 890px;
  margin: 0 auto;
}

.voices h2 {
  margin-bottom: 4rem;
}

.voices__video-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-img);
  overflow: hidden;
  background: var(--color-bg-light);
  transition: opacity 0.4s ease;
}

.voices__video-wrap:hover .voices__thumb-area {
  opacity: 0.8;
}

.voices__thumb-area {
  position: absolute;
  inset: 0;
  cursor: pointer;
  transition: opacity 0.4s ease;
}

.voices__video-wrap.voices__video-wrap--playing .voices__thumb-area {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.voices__embed {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.voices__video-wrap.voices__video-wrap--playing .voices__embed {
  display: block;
}

.voices__embed-inner {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
}

.voices__embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.voices__video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.voices__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 108px;
  height: 108px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: auto;
}

.voices__play img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.voices__play:hover {
  opacity: 0.9;
  transform: translate(-50%, -50%) scale(1.05);
}

.voices__caption {
  font-size: 0.9375rem;
  color: var(--color-text);
  text-align: center;
}

/* ========================================
   Concept (What is eichi?)
   ======================================== */

.concept {
  padding: 5rem 0 15rem;
  background: var(--color-dark);
  color: var(--color-white);
  position: relative;
}

.concept__wave--top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0,25 C300,0 600,50 900,25 C1050,12 1150,38 1200,25 L1200,50 L0,50 Z' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat center top;
  background-size: 100% 50px;
  pointer-events: none;
}

.concept__inner { position: relative; z-index: 1; }

.section-head--light .section-head__img,
.section-head--light .section-head__ja { color: var(--color-white); }
.section-head--light .section-head__img { color: var(--color-white); }

.concept__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.concept__block {
  width: 100%;
  margin: 6rem auto;
}

.concept__point {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 1.875rem;
  color: var(--color-accent);
}

.concept__desc-wrap {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: stretch;
  background: var(--color-bg-light-black);
  border-radius: var(--radius-box);
}

.concept__desc-wrap-img {
  width: 46%;
  flex-shrink: 0;
  min-height: 0;
  display: flex;
}

.concept__desc-wrap-img .concept__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.concept__desc-wrap-text {
  width: 60%;
  padding:3.75rem;
}

/* 画像が .concept__desc-wrap の直下にある場合（2・3ブロック目） */
/* .concept__desc-wrap > .concept__img {
  width: 40%;
  flex-shrink: 0;
  height: 100%;
  object-fit: cover;
  display: block;
} */

.concept__img {
  width: 100%;
  height: auto;
}

.concept__desc {
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 2rem;
  color: var(--color-white);
  letter-spacing: 0.05em;
}

.concept__images {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.concept__wave--bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0,25 C300,50 600,0 900,25 C1050,38 1150,12 1200,25 L1200,0 L0,0 Z' fill='%23FFFFFF'/%3E%3C/svg%3E") no-repeat center bottom;
  background-size: 100% 50px;
  pointer-events: none;
}

/* ========================================
   Contents
   ======================================== */

.contents {
  padding: 5rem 0 20rem;
  background: var(--color-bg-light-blue);
  position: relative;
}

.contents h2 {
  margin-bottom: 5rem;
}

.contents__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-contents);
  margin-bottom: 3rem;
}

.contents__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin: 0;
  padding: 1rem;
  overflow: hidden;
  background: linear-gradient(#ffffff, #ffffff) padding-box,
              linear-gradient(270deg, #ffb02a 31%, #9cdcef 78%, #5dcaef 100%) border-box;
  border: 1px solid transparent;
  border-radius: var(--radius-card);
}

.contents__card img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-card);
  background: var(--color-bg-light);
}

.contents__caption {
  text-align: center;
  line-height: 1.2;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 0.25rem;
  color: var(--color-text-brown);
}
.contents__caption-text {
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-light-brown);
}

.contents__points {
  
}

.contents__points-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 10rem 0 4rem;
}

.contents__points-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  /* h2（メイン日程）と同じ縦グラデーション */
  background: linear-gradient(to bottom, #ffb02a 31%, #9cdcef 78%, #5dcaef 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  flex-shrink: 0;
}

.contents__points-title-deco {
  display: block;
  width: 60px;
  height: 2px;
  flex-shrink: 0;
}

.contents__points-title-deco--left {
  background:
    radial-gradient(circle at 0 50%, #5dcaef 0 5px, transparent 5px),
    linear-gradient(90deg, #5dcaef 8px 28px, transparent 28px),
    linear-gradient(90deg, transparent 32px, #5dcaef 32px 60px, transparent 60px);
}

.contents__points-title-deco--right {
  background:
    linear-gradient(90deg, transparent 0, #ffb02a 0 28px, transparent 28px),
    linear-gradient(90deg, transparent 32px, #ffb02a 32px 52px, transparent 52px),
    radial-gradient(circle at 100% 50%, #ffb02a 0 5px, transparent 5px);
}

.contents__points-list-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(#ffffff, #ffffff) padding-box,
              linear-gradient(270deg, #ffb02a 31%, #9cdcef 78%, #5dcaef 100%) border-box;
  background: #ffffff;
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 4rem;
  /* 光彩（内側）: #7acbe6, 不透明度20%, サイズ32px, エッジ, 滑らかに */
  /* box-shadow: inset 0 0px 12px 12px rgba(142, 203, 230, 0.2); */
}

.contents__points-list {
  width: 100%;
  max-width: 890px;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

.contents__points-row {
  display: grid;
  grid-template-columns: 4.5em 1fr;
  gap: 0 3rem;
  align-items: self-end;
  padding: 0 1rem 1rem 1rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid #b6d9e5;
}

.contents__points-row:last-child {
  margin-bottom: 0;
}

.contents__points-list dt.contents__points-item {
  grid-column: 1;
  margin: 0;
  padding: 0;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.1;
  background: linear-gradient(230deg,#ffb02a 0%,#ffb02a 24%, #ffa36e 36%, #9cdcef 58%, #5dcaef 64%, #5dcaef 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 0;
}

.contents__points-list dt.contents__points-item .contents__points-item-num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
}

.contents__points-list dd.contents__points-item {
  grid-column: 2;
  margin: 0;
  padding: 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-brown);
}

.contents__points-list-text-wrap {
  width: 100%;
  max-width: 890px;
  margin-top: 2rem;
}

.contents__points-list-text {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-light-brown);
  line-height: 1.5;
}

.contents__points-list-text:last-child {
  margin-bottom: 0;
}

.contents__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0,25 C300,50 600,0 900,25 C1050,38 1150,12 1200,25 L1200,0 L0,0 Z' fill='%238FD3D9'/%3E%3C/svg%3E") no-repeat center bottom;
  background-size: 100% 50px;
  opacity: 0.3;
  pointer-events: none;
}

/* ========================================
   Course (Pricing)
   ======================================== */

.course {
  padding: 5rem 0 10rem;
  background: var(--color-white);
  position: relative;
}

.course h2 {
  margin-bottom: 5rem;
}

.course__table-title-wrap {
  text-align: center;
  margin-bottom: 2.5rem;
}
.course__table-wrap {
  overflow-x: auto;
  margin-bottom: 10rem;
  border-radius: var(--radius-card);
}

.course__table {
  width: 100%;
  min-width: 600px;
  table-layout: fixed;
  border-collapse: collapse;
  background: var(--color-white);
}

/* 列幅 3 : 2.5 : 2.5 : 2.5（合計10.5） */
.course__table .course__col--item { width: 28.57%; }
.course__table .course__col--platinum { width: 23.81%; }
.course__table .course__col--premium { width: 23.81%; }
.course__table .course__col--standard { width: 23.81%; }

.course__th,
.course__td {
  padding: 0.25rem 1.875rem;
  text-align: center;
  border: 1px solid #b0d6e1;
  color: var(--color-text-brown);
}

.course__th {
  height: 4.75rem;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
}

.course__th--item {
  background: var(--color-white);
  color: var(--color-text);
  text-align: left;
  width: 28%;
}

.course__th--platinum {
  background: var(--gradient-platinum);
  background-size: var(--gradient-platinum-size) var(--gradient-platinum-size);
}

.course__th--premium {
  background: var(--gradient-premium);
  background-size: var(--gradient-premium-size) var(--gradient-premium-size);
}

.course__th--standard {
  background: var(--gradient-standard);
  background-size: var(--gradient-standard-size) var(--gradient-standard-size);
}

.course__th-text {
  display: block;
  text-align: center;
  font-size: 0.875rem;
  line-height: var(--line-height-text);
  color: #d65e46;
}

.course__table tbody tr {
  height: 4rem;
}

.course__table tbody td {
  font-weight: 500;
  vertical-align: middle;
}

.course__td--label {
  text-align: left;
  background: #ecf3f5;
  color: var(--color-text-brown);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.course__td-text {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: var(--line-height-text);
  color: #d65e46;
}

.course__cta-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.course__cta--standard {
  background: linear-gradient(135deg, #e8f5a0 0%, #c5e1a5 100%);
  color: var(--color-text);
}

.course__guide-title-wrap {
  text-align: center;
  margin-bottom: 2.5rem;
}

.course__box-wrap {
  margin-top: 1.5rem;
}

.course__box {
  padding: 3rem 3.75rem;
  border-radius: 4px;
  border: 1px solid var(--color-bg-blue);
  background: #f3fafb;
  box-shadow: inset 0 0px 12px 12px rgba(142, 203, 230, 0.2);
}

.course__box-title {
  margin: 0 0 1.5rem;
  font-size: 1.875rem;
  font-weight: 500;
  text-align: center;
  background: linear-gradient(230deg, #ffb02a 0%, #ffb02a 40%, #ffa36e 45%, #9cdcef 55%, #5dcaef 60%, #5dcaef 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.course__box-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.course__box-item {
  position: relative;
  padding-left: 0.5rem;
  margin-bottom: 1rem;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: var(--line-height-text);
  color: var(--color-text-brown);
}

.course__box-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1rem;
  width: 3px;
  height: 3px;
  background: var(--color-accent);
  border-radius: 50%;
}

.course__box-item:last-child {
  margin-bottom: 0;
}

.course__step-title-wrap {
  text-align: center;
  margin-bottom: 2.5rem;
}

/* お申し込みまでの５ステップ（course__box を参考にしたブロック＋arrow-step） */
.course__step-wrap {
  margin-top: 1.5rem;
}

.course__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.course__step-content {
  width: 100%;
  padding: 2.5rem 2rem;
  text-align: center;
  border-radius: 4px;
  border: 1px solid var(--color-bg-blue);
  background: #f3fafb;
  box-shadow: inset 0 0px 12px 12px rgba(142, 203, 230, 0.2);
}

.course__step-arrow {
  display: block;
  margin: 1rem 0;
  width: 40px;
  height: auto;
  object-fit: contain;
}

.course__step-num {
  margin: 0 0 1rem;
  line-height: 1;
}

.course__step-num img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.course__step-text {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-brown);
}

.course__step-desc {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: var(--line-height-text);
  color: var(--color-text-light-brown);
}

.course__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0,25 C300,50 600,0 900,25 C1050,38 1150,12 1200,25 L1200,0 L0,0 Z' fill='%23222222'/%3E%3C/svg%3E") no-repeat center bottom;
  background-size: 100% 50px;
  pointer-events: none;
}

.course__inner {
  position: relative;
  z-index: 1;
}

.course__inner:not(:first-child) {
  margin-top: 10rem;
}

.course__text {
  color: var(--color-text-brown);
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 4rem;
  line-height: var(--line-height-text);
}

.course__list {
  max-width: 720px;
  margin: 0 auto 2rem;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.course__item {
  flex: 1;
  min-width: 280px;
  padding: 2rem 1.5rem;
  text-align: center;
  border-radius: var(--radius-card);
}

.course__price-title-wrap {
  text-align: center;
  margin-bottom: 2.5rem;
}

/* プラチナコース：青系 */
.course__item--platinum {
  background: var(--gradient-platinum);
  background-size: var(--gradient-platinum-size) var(--gradient-platinum-size);
  color: #156a8d;
}

.course__item--platinum .course__item-text:last-of-type {
  color: #156a8d;
}

/* プレミアムコース：オレンジ系 */
.course__item--premium {
  background: var(--gradient-premium);
  background-size: var(--gradient-premium-size) var(--gradient-premium-size);
  color: #6f5043;
}

.course__item--premium .course__item-text:last-of-type {
  color: #6f5043;
}

/* スタンダード（ベーシック）コース：緑系 */
.course__item--standard {
  background: var(--gradient-standard);
  background-size: var(--gradient-standard-size) var(--gradient-standard-size);
  color: #617120;
}

.course__item--standard .course__item-text:last-of-type {
  color: #617120;
}

.course__item-num {
  display: block;
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
}

.course__item-text {
  margin: 0;
  font-style: italic;
  line-height: 1.1;
}

.course__item-text:first-of-type {
  font-size: 80px;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.course__item-text-small {
  font-size: 40px;
  font-weight: 700;
  margin-left: 0.1em;
  vertical-align: baseline;
}

.course__item-text:last-of-type {
  display: inline-block;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* ========================================
   Flow (入会までの流れ)
   ======================================== */

.flow {
  padding: 3rem 0;
  background: var(--color-accent);
}

.flow .section-head__en,
.flow .section-head__ja { color: var(--color-dark); }

.flow__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  counter-reset: flow;
}

.flow__step {
  background: var(--color-white);
  padding: 1.5rem;
  border-radius: var(--radius-card);
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.flow__step-num {
  display: block;
  font-family: var(--font-en);
  font-style: italic;
  font-size: 1.25rem;
  color: var(--color-main);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.flow__step-title {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--color-text);
}

.flow__step-desc {
  font-size: 0.875rem;
  line-height: var(--line-height-text);
  color: var(--color-text);
}

/* ========================================
   CTA Final
   ======================================== */

.cta-final {
  padding: 5rem 0;
  background: var(--color-dark);
  color: var(--color-white);
  position: relative;
}

.cta-final__wave--top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0,25 C300,0 600,50 900,25 C1050,12 1150,38 1200,25 L1200,50 L0,50 Z' fill='%23222222'/%3E%3C/svg%3E") no-repeat center top;
  background-size: 100% 50px;
  pointer-events: none;
}

.cta-final__inner { text-align: center; position: relative; z-index: 1; }

.cta-final__ja {
  text-align: center;
  margin-bottom: 3.5rem;
}

.cta-final__buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2.5rem;
}

.cta-final__btn {
  display: inline-block;
  text-decoration: none;
  transition: opacity 0.4s ease;
}

.cta-final__btn:hover {
  opacity: 0.8;
}

.cta-final__btn picture {
  display: block;
}
.cta-final__btn img {
  display: block;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}

/* ========================================
   FAQ
   ======================================== */

.faq {
  padding: 7.5rem 0 15rem;
  background: var(--color-white);
  position: relative;
}

.faq__title-wrap {
  text-align: center;
  margin-bottom: 5rem;
}

.faq__wave--bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0,25 C300,50 600,0 900,25 C1050,38 1150,12 1200,25 L1200,0 L0,0 Z' fill='%238FD3D9'/%3E%3C/svg%3E") no-repeat center bottom;
  background-size: 100% 50px;
  opacity: 0.5;
  pointer-events: none;
}

.faq__list {
  width: 100%;
  margin: 0 auto;
}

/* .course__box と同じ背景 */
.faq__item {
  margin-bottom: 2.25rem;
  padding: 2rem;
  border-radius: 4px;
  border: 1px solid var(--color-bg-blue);
  background: #f3fafb;
  box-shadow: inset 0 0px 12px 12px rgba(142, 203, 230, 0.2);
}

.faq__item:last-child { margin-bottom: 0; }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  font-size: inherit;
  font-weight: 500;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  font: inherit;
}

.faq__q-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: block;
  object-fit: contain;
}

.faq__question-text {
  flex: 1;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--color-text-brown);
}

.faq__question-arrow {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.faq__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: block;
  object-fit: contain;
}

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  padding: 0;
  overflow: hidden;
  transition: grid-template-rows 0.4s ease-out;
}

.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
  margin: 1.5rem 0 0 -0.25rem;
  padding: 0.5rem 0 0;
}

.faq__answer-inner {
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.5rem;
  opacity: 0;
  transition: opacity 0.25s ease-out;
}

.faq__item.is-open .faq__answer-inner {
  opacity: 1;
}

/* 2行以上ならA画像をテキスト上端に揃える */
.faq__answer.faq__answer--multiline .faq__answer-inner {
  align-items: flex-start;
}

.faq__a-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  display: block;
  object-fit: contain;
  vertical-align: top;
}

.faq__answer-text {
  flex: 1;
  margin: 0;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--color-text-brown);
}

/* ========================================
   Profile
   ======================================== */

.profile {
  padding: 5rem 0 20rem;
  background: var(--color-bg-light-blue);
  position: relative;
}

.profile h2 {
  margin-bottom: 5rem;
}

.profile__wave {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0,25 C300,50 600,0 900,25 C1050,38 1150,12 1200,25 L1200,0 L0,0 Z' fill='%23222222'/%3E%3C/svg%3E") no-repeat center bottom;
  background-size: 100% 50px;
  pointer-events: none;
}

.profile__head {
  margin-bottom: 2rem;
  text-align: center;
}

.profile__title-en {
  display: block;
  font-family: var(--font-ja);
  font-size: 2.5rem;
  font-weight: 700;
  font-style: normal;
  margin-bottom: 0.25rem;
  background: linear-gradient(90deg, #5dcaef 0%, #9cdcef 50%, #ffb02a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.profile__subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 5rem;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--color-accent);
}

.profile__subtitle-bullet {
  display: inline-block;
  vertical-align: middle;
  background: linear-gradient(250deg,#ffb02a 0%,#ffa36e 20%, #9cdcef 80%, #5dcaef 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 0.625rem;
}

.profile__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6%;
  margin: 0 3rem;
}

.profile__image-wrap {
  width: 50%;
  max-width: 470px;
  height: auto;
  flex-shrink: 0;
}

.profile__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile__text {
  width: 50%;
}

.profile__name {
  display: inline-block;
  font-size: 2.25rem;
  font-weight: 500;
  margin: 0 0 0.25rem;
  background: linear-gradient(230deg, #ffb02a 0%, #ffb02a 24%, #ffa36e 36%, #9cdcef 58%, #5dcaef 64%, #5dcaef 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  font-style: italic;
  padding-right: 0.25rem;
}
.profile__name::selection {
  -webkit-text-fill-color: transparent;
  background: rgba(93, 202, 239, 0.3);
}

.profile__role {
  font-size: 1.25rem;
  color: #68cfef;
  margin: 0 0 1rem;
  font-weight: 500;
  font-style: italic;
}

.profile__bio {
  margin: 0;
}

.profile__bio p {
  margin: 0 0 2rem;
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--color-text-brown);
  line-height: var(--line-height-text);
}

.profile__bio p:last-child {
  margin-bottom: 0;
}

.profile__message {
  position: relative;
  max-width: 1000px;
  margin: 7.5rem auto 0;
  padding: 4rem 2rem;
  border: 1px solid #c5dde3;
  border-radius: var(--radius-box);
  background: var(--color-white);
  box-shadow: inset 0 0 24px rgba(197, 221, 227, 0.2);
}

.profile__message:after {
  content: '';
  display: block;
  width: calc(100% - 1rem);
  height: calc(100% - 1rem);
  border: 1px solid #c5dde3;
  border-radius: var(--radius-box);
  top: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.5rem;
  position: absolute;
}

.profile__message-title {
  margin: 0 0 2.5rem;
  font-family: var(--font-ja);
  font-size: 1.875rem;
  font-weight: 700;
  font-style: normal;
  text-align: center;
  background: linear-gradient(90deg, #5dcaef 0%, #9cdcef 50%, #ffb02a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.profile__message-text-wrap {
  text-align: center;
}

.profile__message-text {
  margin: 0 0 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-brown);
  line-height: var(--line-height-text);
}

.profile__signature-text {
  margin: 2rem auto 0;
}

.profile__signature {
  display: block;
  max-width: 200px;
  height: auto;
  margin: 0 auto;
}

/* ========================================
   Footer
   ======================================== */

.footer {
  padding: 2rem 0;
  background: var(--color-bg-black);
  color: var(--color-white);
  position: relative;
}

.footer__wave {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 50' preserveAspectRatio='none'%3E%3Cpath d='M0,25 C300,0 600,50 900,25 C1050,12 1150,38 1200,25 L1200,50 L0,50 Z' fill='%23222222'/%3E%3C/svg%3E") no-repeat center top;
  background-size: 100% 50px;
  pointer-events: none;
}

.footer__inner {
  text-align: center;
  position: relative;
  z-index: 1;
}

.footer__list {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
}

.footer__item {
  display: flex;
  align-items: center;
  font-weight: 500;
}

.footer__item:not(:last-child)::after {
  content: "";
  flex: 0 0 auto;
  width: 1px;
  height: 0.8em;
  margin-left: 0.75rem;
  margin-right: 0.75rem;
  background: var(--color-white);
}

.footer__copyright {
  font-weight: 500;
  color: var(--color-white);
  line-height: var(--line-height-text);
}


/* リセット用 */
body { margin: 0; padding: 0; }

/* --- 上のセクション --- */
.hero-section {
  position: relative; /* 子要素の絶対配置の基準にする */
  background: rgb(255,207,135); /* SVGの上端と近い色で塗りつぶしておく（隙間対策） */
  padding-top: 100px;
  
  /* 重要：SVGが下にはみ出す分の余白を作る */
  padding-bottom: 150px; 
  z-index: 1;
}

.hero-content {
  text-align: center;
  color: #fff;
  /* コンテンツが曲線の下に隠れないように調整 */
  position: relative;
  z-index: 2; 
}

/* ========================================
   SP overrides（767px以下・一括）
   PCで設定している主なクラス一覧（SP用に上書きするときの参照用）
   ========================================
   body / .l-inner
   .section-head / .section-head__en / .section-head__ja
   .btn / .header__cta
   .header / .header__inner / .fixed-cta / .fixed-cta__btn
   .hero / .hero__fixed / .hero__inner / .hero__brand / .hero__headlines / .hero__headline-line / .hero__headline-text
   .offer / .offer__content / .offer__content-head / .offer__content-body / .offer__content-text / .offer__content-dates / .offer__content-btn
   .voices / .voices__inner / .voices__video-wrap / .voices__play / .voices__caption
   .concept / .concept__body / .concept__block / .concept__point / .concept__desc-wrap / .concept__desc / .concept__img
   .contents / .contents__grid / .contents__card / .contents__caption / .contents__points / .contents__points-list / .contents__points-row / .contents__points-item
   .course / .course__table / .course__th / .course__td / .course__item / .course__item-text / .course__box / .course__step / .course__step-text
   .flow / .flow__steps / .flow__step
   .cta-final / .cta-final__inner / .cta-final__ja / .cta-final__buttons / .cta-final__btn
   .faq / .faq__item / .faq__question / .faq__answer / .faq__answer-text
   .profile / .profile__head / .profile__title-en / .profile__body / .profile__name / .profile__bio
   .footer / .footer__inner
   ======================================== */

@media (max-width: 767px) {
  /* ========== Base ========== */
  body {
    font-size: 12px;
  }
  .l-inner {
    padding: 0 5%;
    max-width: 100%;
  }
  .sp-only { display: block !important; }
  .sp-only--inline { display: inline !important; }
  .sp-only--flex { display: flex !important; }
  .pc-only { display: none !important; }
  .pc-only--inline { display: none !important; }
  .pc-only--flex { display: none !important; }
  .voices__inner .section-head,
  .voices__inner .voices__media,
  .concept__inner .section-head,
  .concept__inner .concept__body,
  .contents__inner > *,
  .course .l-inner > *,
  .cta-final__inner > *,
  .faq__inner .section-head,
  .profile__inner > *,
  .footer__inner > * {
    padding-left: 0;
    padding-right: 0;
  }
  .u-sp-mt-0 { margin-top: 0 !important; }
  .u-sp-mt-1 { margin-top: 0.5rem !important; }
  .u-sp-mt-2 { margin-top: 1rem !important; }
  .u-sp-mb-0 { margin-bottom: 0 !important; }
  .u-sp-mb-1 { margin-bottom: 0.5rem !important; }
  .u-sp-mb-2 { margin-bottom: 1rem !important; }
  .u-sp-pt-0 { padding-top: 0 !important; }
  .u-sp-pt-1 { padding-top: 0.5rem !important; }
  .u-sp-pb-0 { padding-bottom: 0 !important; }
  .u-sp-pb-1 { padding-bottom: 0.5rem !important; }
  .u-sp-px-0 { padding-left: 0 !important; padding-right: 0 !important; }
  .u-sp-px-1 { padding-left: 1rem !important; padding-right: 1rem !important; }
  .u-sp-text-left { text-align: left !important; }
  .u-sp-text-center { text-align: center !important; }
  .u-sp-block { display: block !important; }
  .u-sp-inline-block { display: inline-block !important; }
  .u-sp-flex { display: flex !important; }
  .u-sp-w100 { width: 100% !important; }
  .u-sp-fs-sm { font-size: 0.875em !important; }
  .u-sp-fs-xs { font-size: 0.75em !important; }

  /* ========== 共通（セクションタイトル・アニメ） ========== */
  .section-head__en { font-size: 1rem; max-width: 90%; margin: 0 auto; }
  .section-head__ja { font-size: 1.25rem; }
  .section-head { }
  .section-head__img { display: block; max-width: 90%; margin: 0 auto; }
  .section-head--light { }
  /* SP時のみ：h2/h3のフェードアップ（PCより少しゆっくりだが、表示は早め） */
  .animation-fadeup {
    transition: opacity 0.85s ease, transform 0.85s ease;
  }
  .animation-fadeup.is-animated {
    transition-delay: 0.35s;
  }

  /* ========== SP: タイトル系（h2/h3画像サイズ・細かく調整用） ========== */
  .voices h2 { }
  .voices h2 img { width: auto; height: 2.25rem; }
  .concept h2 { }
  .concept h2 img { width: auto; height: 2.5rem; }
  .concept .concept__point { margin-bottom: 1rem; }
  .concept .concept__point img { height: 3rem; width: auto; }
  .contents h2 { margin-bottom: 2rem; }
  .contents h2 img { width: auto; height: 2.5rem; }
  .contents .contents__points-title { }
  .contents .contents__points-title img { }
  .contents .contents__video-wrap img { width: 200px; }
  .course h2 { margin-bottom: 2.5rem; }
  .course h2 img { width: auto; height: 2.5rem; }
  .course .course__table-title-wrap h3 { }
  .course .course__table-title-wrap h3 img { max-width: 90%; margin: 0 auto; }
  .course .course__price-title-wrap h3 { }
  .course .course__price-title-wrap h3 img { width: 160px; }
  .course .course__guide-title-wrap h3 { }
  .course .course__guide-title-wrap h3 img { width: 90%; }
  .course .course__step-title-wrap h3 { }
  .course .course__step-title-wrap h3 img { width: 90%; }
  .cta-final h3 { margin-bottom: 2rem; }
  .cta-final h3 img { width: 200px; }
  .faq h2 { }
  .faq h2 img { width: auto; height: 2.5rem; }
  .profile h2 { margin-bottom: 2rem; }
  .profile h2 img { width: auto; height: 2.5rem; }
  .profile .profile__message-title { margin-bottom: 0.5rem; }
  .profile .profile__message-title img { }

  /* ========== Buttons ========== */
  .btn { padding: 0.875rem 1.5rem; width: 100%; max-width: 320px; }

  /* ========== Header ========== */
  .header__cta { display: none; }
  .header { }
  .header__inner { }
  .header--scrolled { }

  /* ========== Fixed CTA（スマホ時のみ表示） ========== */
  .fixed-cta {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 0.75rem 1.25rem;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0));
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.5s ease, visibility 1.5s ease;
  }
  .fixed-cta.fixed-cta--visible {
    opacity: 1;
    visibility: visible;
  }
  .fixed-cta.fixed-cta--at-bottom {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .fixed-cta__btn {
    max-width: 320px;
    margin: 0 auto;
    padding: 1.125rem 1.5rem;
  }

  /* ========== Hero ========== */
  .hero {
    height: 100vh;
    height: 100dvh;
    /* ヒーロー→main 移行時の一瞬の余白を防ぐ：同じ背景で隙間を目立たなくする */
    background-image: -webkit-image-set(url("../assets/images/hero.png") 1x, url("../assets/images/hero@2x.png") 2x);
    background-image: image-set(url("../assets/images/hero.png") 1x, url("../assets/images/hero@2x.png") 2x);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }
  .hero__fixed {
    height: 100vh;
    height: 100dvh;
    padding: 2rem 0;
  }
  .hero__inner {
    padding: 0 1rem;
  }
  .hero__headline-text {
    margin-bottom: 0;
  }
  .hero__headline-line {
    font-size: 1rem;
    line-height: 2.5;
    letter-spacing: -0.03em;
  }
  .main-content { }
  .hero__fixed--scrolling { }
  .hero__video { }
  .hero__canvas { }
  .hero__overlay { }
  .hero__curtain { }
  .hero__brand { }
  .hero__brand--hidden { }
  /* SP：「eichiとは」の先頭「e」が左端で切れないよう余白を確保 */
  .hero__headlines {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .hero__headlines--hidden { }
  .hero__headline-char { }
  .hero__wave { }

  /* SP：hero→main の余白防止（curve-separator の重なりを強める） */
  .curve-separator {
    margin-top: -20%;
  }

  /* ========== Offer（3rd season 募集期間） ========== */
  .offer { padding: 2rem 0 5rem; }
  .offer__content-body { padding: 0.5rem 1rem 1rem; }
  .offer__content-text--main {
    font-size: 1.75rem;
    letter-spacing: -0.05em;
    margin-bottom: 0.375rem;
  }
  .offer__content-dates-btn { display: none; }
  .offer__wave--top { }
  .offer__content { }
  .offer__content-head { padding: 0.5rem 1rem; }
  .offer__content-head-title { font-size: 1rem; }
  .offer__content-text { }
  .offer__content-text-date { }
  .offer__content-dates { }
  .offer__content-dates-list { }
  .offer__content-dates-item { display: inline-block;}
  .offer__content-text--early { font-size: 1rem; border-bottom: 1px solid var(--color-accent);margin-bottom: 0.375rem; }
  .offer__content-text--general { font-size: 1rem; margin-bottom: 0; border-bottom: 1px solid var(--color-main); }
  .offer__content-btn { display: none; }

  /* ========== Voices（Member's voice） ========== */
  .voices { padding: 0 0 7rem; }
  .voices__inner { }
  .voices h2 { margin-bottom: 2rem; }
  .voices__inner .voices__media { padding: 0; }
  .voices__video-wrap { }
  .voices__video-thumb { }
  .voices__play { width:3rem; height: 3rem; }
  .voices__caption { }

  /* ========== Concept（What is eichi?） ========== */
  .concept { padding: 3rem 0 8rem; }
  .concept__body {  }
  .concept__block { margin: 4rem 0 0; }
  .concept__desc-wrap {
    flex-direction: column;
    padding: 10%;
  }
  .concept__desc-wrap-text {
    width: 100%;
    padding: 0;
    margin-top: 2.5rem;
  }
  .concept__desc-wrap-img { width: 100%; }
  .concept__desc-wrap-img .concept__img { border-radius: 4px; }
  .concept__wave--top { }
  .concept__inner { }
  .concept__point { }
  .concept__img { }
  .concept__desc { font-size: 0.75rem; margin-bottom: 1.5rem; }
  .concept__images { }
  .concept__wave--bottom { }

  /* ========== Contents ========== */
  .contents { padding: 3rem 0 7rem; }
  .contents__grid { grid-template-columns: repeat(1, 1fr); gap: 2.5rem; margin-bottom: 2rem; }
  .contents__inner { }
  .contents__card { gap: 1rem; }
  .contents__caption { margin-top: 0; }
  .contents__caption-text { font-size: 0.875rem; }
  .contents__points { }
  .contents__points-title-wrap { margin: 5rem 0 1rem; }
  .contents__points-title { max-width: 90%; margin: 0 auto; }
  .contents__points-title-deco { }
  .contents__points-title-deco--left { }
  .contents__points-title-deco--right { }
  .contents__points-list-wrap { padding: 1rem; }
  .contents__points-list { }
  .contents__points-row { grid-template-columns: 2.75rem 1fr; gap: 0 1rem; padding: 0 0 0.5rem 0.5rem; align-items: center; }
  .contents__points-list dt.contents__points-item { font-size: 2.25rem; }
  .contents__points-list dd.contents__points-item { font-size: 0.75rem; letter-spacing: -0.05em; }
  .contents__points-item-num { }
  .contents__points-list dt.contents__points-item .contents__points-item-num { font-size: 1rem; }
  .contents__points-list-text-wrap { margin-top: 1rem; }
  .contents__points-list-text { font-size: 0.75rem; }
  .contents__wave { }

  /* ========== Course（Pricing） ========== */
  .course { padding: 3rem 0 5rem; }
  .course__cta-wrap { grid-template-columns: 1fr; }
  .course__item-text:first-of-type { font-size: 2rem; }
  .course__item-text:last-of-type { font-size: 0.625rem;margin-top: 0; }
  .course__item-text-small { font-size: 24px; }
  .course__inner { }
  .course__inner:not(:first-child) { margin-top: 5rem; }
  .course__table-title-wrap { margin-bottom: 1.5rem; }
  .course__table-wrap { margin: 2rem 0; }
  .course__table { min-width: 500px; table-layout: fixed; }
  /* 左列のみ固定幅、右3列は均等 */
  .course__table .course__col--item { width: 170px; }
  .course__table .course__col--platinum,
  .course__table .course__col--premium,
  .course__table .course__col--standard { width: calc((100% - 170px) / 3); }
  .course__col { }
  .course__col--item { }
  .course__col--platinum { }
  .course__col--premium { }
  .course__col--standard { }
  .course__th {
    height: 3rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
  }
  .course__th--item { }
  .course__th--platinum { }
  .course__th--premium { }
  .course__th--standard { }
  .course__th-text { font-size: 0.75rem; }
  .course__td {
    height: 3rem;
    font-size: 0.75rem;
    padding: 0.25rem 0.75rem;
  }
  .course__td--label { }
  .course__td-text {
    font-size: 0.625rem;
  }
  .course__cta--standard { }
  .course__guide-title-wrap { margin-bottom: 1rem;}
  .course__box-wrap { }
  .course__box { padding: 1rem; box-shadow: inset 0 0px 6px 6px rgba(142, 203, 230, 0.2); }
  .course__box-title { margin-bottom: 0.5rem; font-size: 1rem; }
  .course__box-list { }
  .course__box-item { font-size: 0.75rem; }
  .course__box-item::before { top: 0.575rem; }
  .course__step-title-wrap { margin-bottom: 1rem; }
  .course__step-wrap { }
  .course__step { }
  .course__step-content { padding: 1rem;box-shadow: inset 0 0px 6px 6px rgba(142, 203, 230, 0.2); }
  .course__step-arrow { width: 24px; }
  .course__step-num { margin-bottom: 0.5rem; }
  .course__step-num img { max-width: 100px; }
  .course__step-text { font-size: 0.75rem; margin-bottom: 0; }
  .course__step-desc { font-size: 0.625rem; margin-bottom: 0; }
  .course__wave { }
  .course__text { font-size: 0.75rem; margin-bottom: 2rem; }
  .course__list { gap: 1.75rem; }
  .course__price-title-wrap { margin-bottom: 0.5rem; padding: 0.5rem; }
  .course__item { padding: 0.75rem 0.5rem; }
  .course__item--platinum { }
  .course__item--premium { }
  .course__item--standard { }
  .course__item-num { font-size: 16px; }
  .course__item-text { }

  /* ========== Flow（入会までの流れ） ========== */
  .flow__steps { grid-template-columns: 1fr; }
  .flow__step { }
  .flow__step-num { }
  .flow__step-title { }
  .flow__step-desc { }

  /* ========== CTA Final（お申し込み） ========== */
  .cta-final { padding: 3rem 0; }
  .cta-final__buttons { flex-direction: column; align-items: center; }
  .cta-final__wave--top { }
  .cta-final__inner { }
  .cta-final__ja { }
  .cta-final__btn { }
  .cta-final__btn img { }

  /* ========== FAQ ========== */
  .faq { padding: 5rem 0; }
  .faq__item { padding: 1.25rem; padding: 1rem;box-shadow: inset 0 0px 6px 6px rgba(142, 203, 230, 0.2);  }
  .faq__question { gap: 0.5rem;}
  .faq__title-wrap { margin-bottom: 2rem; }
  .faq__wave--bottom { }
  .faq__list { }
  .faq__q-icon { width: 24px;height: 24px; }
  .faq__question-text { font-size: 0.75rem; }
  .faq__question-arrow { width: 24px;height: 24px; }
  .faq__icon { width: 24px;height: 24px; }
  .faq__answer {  }
  .faq__answer-inner { gap: 0.5rem; }
  .faq__a-icon { width: 24px;height: 24px; }
  .faq__answer-text { font-size: 0.75rem; }
  .faq__item.is-open .faq__answer { margin-top: 0.5rem; }

  /* ========== Profile ========== */
  .profile { padding: 3rem 0 5rem; }
  .profile__title-en { font-size: 1.75rem; }
  .profile__body { margin: 0 auto; grid-template-columns: 1fr; text-align: center; flex-direction: column; overflow: visible; }
  .profile__image-wrap { width: 100%; max-width: 260px; margin-bottom: 1rem; margin-left: -6%; }
  .profile__message { margin-top: 3rem; padding: 2.5rem 1.5rem; }
  .profile__message-title { font-size: 1.5rem; }
  .profile__wave { }
  .profile__head { }
  .profile__subtitle { }
  .profile__subtitle-bullet { }
  .profile__image { }
  .profile__text { width: 100%; max-width: 290px; margin: 0 auto 0 12.5%;text-align: left;}
  .profile__name { font-size: 1.625rem; letter-spacing: 0.1em; margin-bottom: 0; line-height: 1; }
  .profile__role { font-size: 1rem; letter-spacing: 0.1em; margin-bottom: 0; margin-bottom: 0.75rem;}
  .profile__bio { text-align: left; }
  .profile__bio p { font-size: 0.75rem; margin-bottom: 1.25rem; }
  .profile__message-text-wrap { }
  .profile__message-text { font-size: 0.75rem; }
  .profile__signature-text { }
  .profile__signature { height: 1.5rem;width: auto; }

  /* ========== Footer ========== */
  .footer__wave { }
  .footer__list { margin-bottom: 0.25rem; }
  .footer__item { }
  .footer__copyright { }
}

/* ========== 一時非表示：wave（確認用。反映時はこのブロックを削除） ========== */
.hero__wave,
.offer__wave--top,
.concept__wave--top,
.concept__wave--bottom,
.contents__wave,
.course__wave,
.cta-final__wave--top,
.faq__wave--bottom,
.profile__wave,
.footer__wave {
  display: none !important;
}

.curve-separator {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 10;
  margin-top: -13%;
  pointer-events: none;
  margin-bottom: -1px;
}

/* PC：余白を消すためグラデーションをわずかに重ねる。25%だと5行目を覆うので、隙間だけ埋める最小限の値 */
.curve-separator.top-separator {
  /* margin-top: -6vh; */
  margin-top: -15%;
}

@media (max-width: 767px) {
  .curve-separator.top-separator {
    margin-top: -22%;
  }
}

.curve-separator svg {
  display: block;
  width: 100%;
  height: auto;
  
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.curve-separator-bottom {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
  z-index: 10;
  margin-top: -13%;
  pointer-events: none;
  margin-bottom: -1px;
}

.curve-separator-bottom svg {
  display: block;
  width: 100%;
  height: auto;
  
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}