/* ============================================================
 * TOP ページ専用 CSS
 * Figma: weMbv5Gyjtk9YIJKwOcv1Q / node 1152:2564
 * ============================================================ */

/* TOP ページ: ヘッダーからフッターまで緩い単一グラデーション。
   旧 repeating-linear-gradient (バンド状) を撤去し、共通 .clever-wrap グラデーションに統合。
   旧テーマ由来 body(0,0,1)+!important を確実に上書きするため !important を維持。 */
/* TOP ページは html 側のグラデーションを継承 (body は透明) */
body.aoi-page-top {
  background: transparent !important;
}

/* ページタイトル非表示・パディング除去 */
/* .c-pageTitle removed - clever has no page title element */ .aoi-page-top .__unused {
  display: none;
}
#clever-wrap.aoi-page-top #clever-content {
  padding-top: 0;
}
.aoi-page-top #clever-content {
  padding-top: 0;
}

/* ============================================================
 * front-page コンテンツラッパー
 * .post_content を使うことで style.css の en-title::before が発火する
 * ============================================================ */
.aoi-front-page-content {
  /* post_content 既定の上下パディングを除去 */
  padding-top: 0 !important;
}

/* FV 直後の空 wp-block-group マージンをゼロに */
.aoi-front-page-content > .aoi-fv-sp + * {
  margin-top: 0 !important;
}

/* ============================================================
 * 旧テーマ由来 h2 / h3 ティール背景・border 装飾を除去
 * ============================================================ */
.aoi-page-top .aoi-front-page-content h2.simple-h2 {
  background: none;
  padding-left: 0;
  padding-right: 0;
  margin-top: 50px;
  margin-bottom: 60px;
  font-size: 26px;
}
.aoi-page-top .aoi-front-page-content h2.simple-h2::before {
  border-top: none;
  border-bottom: none;
  height: auto;
}
.aoi-page-top .aoi-front-page-content h3 {
  padding: 0;
}
.aoi-page-top .aoi-front-page-content h3::before {
  display: none;
}
.aoi-page-top .aoi-front-page-content h4 {
  padding: 0;
  border-left: none;
}

/* ============================================================
 * Intro セクション (.aoi-top-intro)
 * Figma: 1152:2602
 * ============================================================ */
.aoi-top-intro {
  margin: 60px 0 80px;
}

/* ============================================================
 * Feature セクション (.aoi-top-feature)
 * Figma: 1152:2610 — linear-gradient(180.66deg, #f1f8fa 30.202%, #ffffff 99.495%)
 * ============================================================ */
/* 全幅ラッパー: 背景SVGの位置基準 + グラデーション + overflow clip */
.aoi-top-feature-wrap,
.aoi-top-lesson-wrap,
.aoi-top-teachers-wrap,
.aoi-top-voice-wrap {
  position: relative;
  isolation: isolate;
  /* 装飾を Figma 設計幅 1512px 基準に固定しつつ縮小: 1512 を上限に viewport で縮小 */
  --aoi-design-w: min(100vw, 1512px);
  /* overflow:hidden は使わない: Figma ではセクション境界をまたいで装飾が伸びる構成のため、
     クリップせず後段の z-index/stacking context で文字背後に保つ */
}

.aoi-top-feature {
  margin-bottom: 0;
}

/* .en-title は z-index:0 のスタッキングコンテキスト（step6）を作る。
   セクション本体（block-level, step3）が先に描画されてしまい被って見える問題を解消するため、
   本体コンテナに position:relative を付けて step6 に昇格させる（DOM順でH2の後 → 上に描画）。 */
.aoi-top-feature .aoi-columns.aoi-white-box,
.aoi-top-lesson-section .aoi-top-lesson-tab,
.aoi-top-teachers-section .fullwidth-carousel,
.aoi-top-voice-section .aoi-achievement,
.aoi-top-voice-section .fullwidth-carousel {
  position: relative;
}

/* 旧 .aoi-top-feature-wrap セクション固有のグラデーションは撤去
   (body 全体の単一グラデーションに統合)。
   .l-container と .aoi-top-feature-wrap の背景色不一致の主原因だった。 */
.aoi-top-feature-wrap::before {
  content: none;
}

/* ============================================================
 * Lesson タブセクション (.aoi-top-lesson-section)
 * Figma: 1152:2644
 * タブバー: bg #e5e5e5 rounded-top-12px / アクティブタブ: bg white h 76px
 * パネル: border 1px #e5e5e5 / padding 40px 50px / image + text
 * ============================================================ */
.aoi-top-lesson-section {
  margin-bottom: 0;
}

.aoi-top-lesson-tab {
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  overflow: hidden;
}

.aoi-top-lesson-tab__bar {
  display: flex;
  align-items: center;
  background: #e5e5e5;
  padding: 12px;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.aoi-top-lesson-tab__bar::-webkit-scrollbar {
  display: none;
}

.aoi-top-lesson-tab__btn {
  flex: 1;
  min-width: 160px;
  min-height: 76px;
  height: auto;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: #e5e5e5;
  border-radius: 12px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  color: #1c4660;
  font-family: inherit;
  transition: background 0.2s;
  padding: 12px 16px;
  white-space: normal;
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1.4;
}

/* タブ間のセパレーター線 */
.aoi-top-lesson-tab__btn + .aoi-top-lesson-tab__btn::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 65px;
  background: rgba(28, 70, 96, 0.25);
  pointer-events: none;
}

.aoi-top-lesson-tab__btn.is-active {
  background: #fff;
  font-weight: 700;
}

.aoi-top-lesson-tab__body {
  background: #fff;
}

.aoi-top-lesson-tab__panel {
  display: none;
}

.aoi-top-lesson-tab__panel.is-active {
  display: block;
}

.aoi-top-lesson-tab__panel-inner {
  display: flex;
  gap: 40px;
  padding: 50px 50px 50px 40px;
  align-items: center;
}

.aoi-top-lesson-tab__img {
  flex: 1 0 0;
  min-width: 0;
  height: 440px;
  margin: 0;
}

.aoi-top-lesson-tab__img img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  display: block;
  object-fit: cover;
}

.aoi-top-lesson-tab__text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.aoi-top-lesson-tab__text h3 {
  font-size: 20px;
  font-weight: 700;
  color: #1c4660;
  margin: 0 !important;
  padding: 0 !important;
  letter-spacing: 0.1em;
  line-height: 1.8;
}

.aoi-top-lesson-tab__text h3::before {
  display: none !important;
}

.aoi-top-lesson-tab__text p {
  font-size: 16px;
  line-height: 1.76;
  letter-spacing: 0.1em;
  color: #1c4660;
  margin: 0;
}

/* ============================================================
 * Teachers / Voice セクション
 * ============================================================ */
.aoi-top-teachers-section,
.aoi-top-voice-section {
  margin-bottom: 0;
}

/* ============================================================
 * News セクション
 * ============================================================ */
.aoi-top-news-section {
  position: relative;
  width: 100vw;
  left: 50%;
  margin-left: -50vw;
  padding: 80px;
  background-size: cover;
  background-position: center;
  box-sizing: border-box;
}

.aoi-top-news-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(245, 245, 245, 0.6);
  pointer-events: none;
}

.aoi-top-news-inner {
  background: #f1f8fa;
  border-radius: 24px;
  padding: 50px;
  position: relative;
  z-index: 1;
}

.aoi-top-news-layout {
  display: flex;
  gap: 106px;
  align-items: flex-start;
}

.aoi-top-news-left {
  flex: 0 0 263px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 33px;
}

.aoi-top-news-right {
  flex: 1;
  min-width: 0;
}

.aoi-top-news-item {
  background: #fff;
  border-radius: 16px;
  margin-bottom: 12px;
}

.aoi-top-news-item:last-child {
  margin-bottom: 0;
}

.aoi-top-news-link {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 30px;
  text-decoration: none;
  color: #1c4660;
}

.aoi-top-news-date {
  font-size: 12px;
  color: #1c4660;
  white-space: nowrap;
  flex-shrink: 0;
}

.aoi-top-news-cat {
  background: #1c4660;
  color: #fff;
  border-radius: 24px;
  padding: 8px 15px;
  font-size: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}

.aoi-top-news-title {
  font-size: 15px;
  font-weight: 500;
  flex: 1 0 0;
  min-width: 0;
}

.aoi-top-news-arrow {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 14px;
  color: #1c4660;
}

/* ============================================================
 * FEATURE カード固有スタイル
 * Figma: border-radius 12px, padding 30px, gap 36px
 * ============================================================ */
.aoi-top-feature .aoi-white-box {
  border-radius: 12px;
  padding: 30px;
}
.aoi-top-feature .aoi-columns.aoi-white-box + .aoi-columns.aoi-white-box {
  margin-top: 36px !important;
}

/* FEATURE 番号見出し */
.aoi-feature-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  white-space: nowrap;
}

.aoi-feature-num {
  font-family: 'Zen Antique', serif;
  font-size: 64px;
  line-height: 1;
  color: #17bfbd;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

.aoi-feature-item-title {
  font-size: 20px;
  font-weight: 700;
  color: #1c4660;
  letter-spacing: 2px;
  line-height: 1.8;
  margin: 0;
  padding: 0;
  white-space: normal;
}

.aoi-feature-item-title::before {
  display: none !important;
}

.aoi-feature-divider {
  display: block;
  height: 1px;
  background: #e5e5e5;
  border: none;
  margin: 16px 0 20px;
}

/* ============================================================
 * Intro セクション h2 フォントサイズ（Figma: 30px）
 * max-width: 55% ≈ 600px (1096px content × 0.55)。px 固定を避けコンテナ幅に比例。
 * SP では 100% にリセット（@media max-width:599px 内で上書き）。
 * ============================================================ */
.aoi-top-intro h2.simple-h2 {
  font-size: 30px;
  max-width: 55%;
}

@media (max-width: 1100px) and (min-width: 769px) {
  .aoi-top-intro h2.en-title-start-your-story {
    --en-x: 0%;
    --en-width: min(1020px, calc(100vw - 64px));
  }
}

/* ============================================================
 * Intro セクション — 2 カラムレイアウト
 * Figma 1152:2607: テキスト 604px + gap 160px + ボタン auto / items-end
 * 本テンプレートは --clmn-w--pc を使用 (旧テーマは --clmn-w 参照)。
 * flex を明示して PC での 2 カラム表示を保証する。
 * ============================================================ */
body.aoi-page-top .aoi-top-intro .aoi-columns__inner {
  display: flex;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: nowrap;
}
body.aoi-page-top .aoi-top-intro .aoi-columns__inner > .aoi-column:first-child {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 55%;
}
body.aoi-page-top .aoi-top-intro .aoi-columns__inner > .aoi-column:last-child {
  flex: 0 0 auto;
}

@media (max-width: 1100px) {
  .aoi-top-intro h2.simple-h2 {
    max-width: 100%;
  }

  body.aoi-page-top .aoi-top-intro .aoi-columns__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  body.aoi-page-top .aoi-top-intro .aoi-columns__inner > .aoi-column:first-child,
  body.aoi-page-top .aoi-top-intro .aoi-columns__inner > .aoi-column:last-child {
    flex: none;
    width: 100%;
    max-width: 100%;
  }

  body.aoi-page-top .aoi-top-intro .simple-layout-bottom > div[aria-hidden="true"] {
    display: none;
  }
}

/* ============================================================
 * TEACHERS / VOICE — インジケーター → ボタン マージン
 * Figma 1152:2684 / 1152:2665: gap 78px (progress bar bottom → button top)
 * ============================================================ */
.aoi-top-teachers-section .aoi_outline_and_arrow_button,
.aoi-top-voice-section .aoi_outline_and_arrow_button {
  margin-top: 78px;
}

/* ============================================================
 * VOICE — セクション下余白
 * Figma 1152:2677: ボタン底辺からセクション末尾 ~147px
 * ============================================================ */
.aoi-top-voice-section {
  padding-bottom: 147px;
}

/* ============================================================
 * タブレット (max-width: 959px): お知らせ余白・gap を縮小し横並びを維持
 * 960px 以上の PC レイアウト (gap:106px / padding:80px / inner:50px) を
 * タブレットで圧縮する。left 固定幅(263px)は維持。
 * ============================================================ */
@media (max-width: 959px) {
  .aoi-top-news-section {
    padding: 40px;
  }
  .aoi-top-news-inner {
    padding: 30px;
  }
  .aoi-top-news-layout {
    gap: 40px;
  }
  .aoi-top-news-link {
    padding: 16px 20px;
    gap: 12px;
  }
}

/* タブレット小 (max-width: 767px): 縦積みに切替
 * 599px SP override がさらに section padding / inner padding / link を調整する */
@media (max-width: 767px) {
  .aoi-top-news-layout {
    flex-direction: column;
    gap: 24px;
  }
  .aoi-top-news-left {
    flex: none;
    width: 100%;
    gap: 16px;
  }
}

/* ============================================================
 * SP レスポンシブ (max-width: 599px)
 * ============================================================ */
@media (max-width: 599px) {
  .aoi-top-intro h2.simple-h2 {
    max-width: 100%;
  }

  .aoi-top-lesson-tab__panel-inner {
    flex-direction: column;
    padding: 24px 20px;
    gap: 20px;
  }

  .aoi-top-lesson-tab__img {
    flex: none;
    width: 100%;
    height: 240px;
  }

  .aoi-top-lesson-tab__bar {
    padding: 8px;
    gap: 6px;
  }

  .aoi-top-lesson-tab__btn {
    min-width: 100px;
    height: 52px;
    font-size: 12px;
    padding: 0 10px;
    border-radius: 8px;
  }

  .aoi-top-lesson-tab__btn + .aoi-top-lesson-tab__btn::before {
    left: -4px;
    height: 40px;
  }

  .aoi-top-news-section {
    padding: 40px 20px;
  }

  .aoi-top-news-inner {
    padding: 20px;
  }

  .aoi-top-news-layout {
    flex-direction: column;
    gap: 24px;
  }

  .aoi-top-news-left {
    flex: none;
    width: 100%;
    gap: 16px;
  }

  .aoi-top-news-link {
    flex-wrap: wrap;
    padding: 16px 20px;
    gap: 8px;
  }

  .aoi-top-news-arrow {
    display: none;
  }
}

/* ============================================================
 * TOP PAGE: 背景装飾SVG (円形・分割円)
 * ============================================================ */
.aoi-top-bg {
  position: absolute;
  pointer-events: none;
  z-index: -1;
  height: auto;
}

/* 全装飾共通: Figma 設計幅 1512 基準のスケール係数。
   --aoi-design-w は親 wrap で min(100vw, 1512px) に固定。
   旧実装は wrap 全幅を基準に % 計算していたため 1920px viewport で約 27% 過大化していた。 */

/* FEATURE: 分割円 左下 (Figma 1152:2611)
   Figma: wrapper bbox 928.692×928.692 (rotate 14.69deg, 内側 760.664×760.664), top-left (-480, 1280)
   中心 (-15.654, 1744.346) を translate(-50%,-50%) で合わせる */
.aoi-top-feature__bg--left {
  width: calc(760.664 * var(--aoi-design-w) / 1512);
  aspect-ratio: 1;
  left: calc(-15.654 * var(--aoi-design-w) / 1512);
  top: calc(1744.346 * var(--aoi-design-w) / 1512);
  transform: translate(-50%, -50%) rotate(14.69deg);
}

/* FEATURE: 分割円 右上 (Figma 1152:2612) — left 835, top 164, size 1115 */
.aoi-top-feature__bg--right {
  width: calc(1115 * var(--aoi-design-w) / 1512);
  aspect-ratio: 1;
  left: calc(835 * var(--aoi-design-w) / 1512);
  top: calc(164 * var(--aoi-design-w) / 1512);
}

/* LESSON: リング 右中 (Figma 1152:2645) — left 989, top 882, size 640 */
.aoi-top-lesson-section__bg--right {
  width: calc(640 * var(--aoi-design-w) / 1512);
  aspect-ratio: 1;
  left: calc(989 * var(--aoi-design-w) / 1512);
  top: calc(882 * var(--aoi-design-w) / 1512);
}

/* TEACHERS: リング 左中 (Figma 1152:2666) — left -257, top 598, size 896 */
.aoi-top-teachers-section__bg--left {
  width: calc(896 * var(--aoi-design-w) / 1512);
  aspect-ratio: 1;
  left: calc(-257 * var(--aoi-design-w) / 1512);
  top: calc(598 * var(--aoi-design-w) / 1512);
}

/* VOICE: リング 左下 (Figma 1156:2638) — left -206, top 1703, size 630 */
.aoi-top-voice-section__bg--left {
  width: calc(630 * var(--aoi-design-w) / 1512);
  aspect-ratio: 1;
  left: calc(-206 * var(--aoi-design-w) / 1512);
  top: calc(1703 * var(--aoi-design-w) / 1512);
}

/* VOICE: 分割楕円 右中 (Figma 1156:2640) — left 745.25, top 638.7, size 1031.245×1030.347 */
.aoi-top-voice-section__bg--right {
  width: calc(1031.245 * var(--aoi-design-w) / 1512);
  height: calc(1030.347 * var(--aoi-design-w) / 1512);
  left: calc(745.25 * var(--aoi-design-w) / 1512);
  top: calc(638.7 * var(--aoi-design-w) / 1512);
}

@media (max-width: 767px) {
  .aoi-top-bg {
    display: none;
  }
}