/* ========================================
   キュビナ26年度アップデート - CSSスタイル
   ======================================== */

/* ========================================
   フォント定義
   ======================================== */
@font-face {
  font-family: "Qubena Gothic";
  font-display: swap;
  src: url(/wp-content/themes/COMPASS/assets/fonts/QubenaGothic-Regular.woff) format("woff"), 
       url(/wp-content/themes/COMPASS/assets/fonts/QubenaGothic-Regular.ttf) format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "Qubena Gothic";
  font-display: swap;
  src: url(/wp-content/themes/COMPASS/assets/fonts/QubenaGothic-Bold.woff) format("woff"), 
       url(/wp-content/themes/COMPASS/assets/fonts/QubenaGothic-Bold.ttf) format("truetype");
  font-weight: 700;
}

/* ========================================
   リセット & ベーススタイル
   ======================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Qubena Gothic', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Meiryo', sans-serif;
  line-height: 1.5;
  color: #212423;
  background: #fff;
  overflow-x: hidden;
  min-width: 360px;
  position: relative;
}

/* タブレット対応: body全体をzoomで縮小
   .main-content, .cta-banner, .bg-decoration含め全要素が均一に縮小される */
@media screen and (min-width: 961px) and (max-width: 1200px) {
  body {
    zoom: 0.8;
  }
}

@media screen and (min-width: 751px) and (max-width: 960px) {
  body {
    zoom: 0.65;
  }
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

/* ========================================
   CTA追従バナー
   ======================================== */
.cta-banner {
  position: fixed;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cta-banner.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* PC版: 右下に角丸長方形ボタン */
@media print, screen and (min-width: 751px) {
  .cta-banner {
    right: 30px;
    bottom: 30px;
  }

  .cta-banner__button {
    width: 203px;
    height: 61px;
    background: #FF6F5F;
    border-radius: 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 1.74px 1.74px 2.436px 0px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .cta-banner__button:hover {
    transform: scale(1.05);
    box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.3);
  }

  .cta-banner__text-main {
    font-weight: 700;
    font-size: 15.456px;
    color: #fff;
    line-height: 1.2;
  }

  .cta-banner__text-sub {
    font-weight: 700;
    font-size: 11.451px;
    color: #fff;
    line-height: 1.2;
  }

  .sp-only {
    display: none;
  }
}

/* SP版: 右下に円形ボタン */
@media only screen and (max-width: 750px) {
  .cta-banner {
    right: 15px;
    bottom: 15px;
  }

  .cta-banner__button {
    width: 106px;
    height: 106px;
    background: #FF6F5F;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: transform 0.2s ease;
  }

  .cta-banner__button:hover {
    transform: scale(1.05);
  }

  .cta-banner__text-main {
    font-weight: 700;
    font-size: 16px;
    color: #fff;
    line-height: 1.1;
    text-align: center;
    margin-top: 4px;
  }

  .cta-banner__text-sub {
    font-weight: 700;
    font-size: 10px;
    color: #fff;
    line-height: 1.2;
    text-align: center;
  }
}

/* ========================================
   背景デコレーション（フルワイド） - Group 1152
   Figma座標: x:0, y:303, 1200×4242.5px
   - back2 (PC_back01.svg): 上部装飾 1200×358px, y:220pxから
   - back1 (PC_back02.svg): 下部装飾（セクション7の下から）
   - 間に薄緑背景を配置
   ======================================== */
.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: visible;
}

/* 上部背景装飾（セクション1〜7をカバー）
   PC_back01.svg: 1200×358px, 開始位置 y:220px
   フルワイド対応: width:100% */
.bg-decoration__top {
  position: absolute;
  top: 220px;
  left: 0;
  width: 100%;
  z-index: 1; /* 薄緑背景の上に配置 */
}

.bg-decoration__top img {
  width: 100%;
  height: auto;
}

/* 薄緑背景（top画像の開始位置からbottomまで）
   top画像の下に重ねて配置することで、縮小時の隙間を防ぐ */
.bg-decoration__middle {
  position: absolute;
  top: 220px; /* top画像と同じ開始位置 */
  left: 0;
  width: 100%;
  height: 4000px;
  background: #c8ede0; /* 薄緑 */
  z-index: 0; /* top画像の下に配置 */
}

/* 下部背景装飾（セクション7の下から）
   フルワイド対応: width:100% */
.bg-decoration__bottom {
  position: absolute;
  top: 4220px; /* セクション7 CTAの下端付近 */
  left: 0;
  width: 100%;
  z-index: 1;
}

.bg-decoration__bottom img {
  width: 100%;
  height: auto;
}

/* bodyのzoomで全体縮小されるため、タブレット版の個別補正は不要 */

/* SP版（750px以下）: 背景デコレーションをSP用に調整 */
@media only screen and (max-width: 750px) {
  .bg-decoration__top {
    top: 250px;
  }

  .bg-decoration__middle {
    top: 250px;
    height: 3950px; /* 4200 - 250 = 3950px */
  }

  .bg-decoration__bottom {
    top: 4200px;
  }
}

/* ========================================
   背景デコレーション Wrapper（セクション24〜27用）
   - main-content(max-width:1200px)からブレークアウトしてフルワイド背景を配置
   ======================================== */
.bg-decoration-wrapper--lower {
  position: relative;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  padding-top: 250px;  /* PC_back01.svgの波形表示用スペース */
  padding-bottom: 250px; /* PC_back02.svgの波形表示用スペース */
}

.bg-decoration--lower {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

.bg-decoration--lower .bg-decoration__top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

.bg-decoration--lower .bg-decoration__middle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #c8ede0;
  z-index: 0;
}

.bg-decoration--lower .bg-decoration__bottom {
  position: absolute;
  top: auto; /* ベースクラスのtop:4350pxをリセット */
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}

/* ラッパー内のセクションはz-indexで前面に */
.bg-decoration-wrapper--lower > section {
  position: relative;
  z-index: 1;
}

/* タブレット版（961px-1200px）: bodyのzoom(0.8)により100vwがビューポートの80%になるため補正 */
@media only screen and (max-width: 1200px) and (min-width: 961px) {
  .bg-decoration-wrapper--lower {
    width: calc(100vw / 0.8);
    margin-left: calc((-100vw / 0.8 + 100%) / 2);
  }
}

/* タブレット版（751px-960px）: bodyのzoom(0.65)により100vwがビューポートの65%になるため補正 */
@media only screen and (max-width: 960px) and (min-width: 751px) {
  .bg-decoration-wrapper--lower {
    width: calc(100vw / 0.65);
    margin-left: calc((-100vw / 0.65 + 100%) / 2);
  }
}

/* SP版: 背景デコレーションをSP用に調整 */
@media only screen and (max-width: 750px) {
  .bg-decoration-wrapper--lower {
    padding-top: 120px;
    padding-bottom: 120px;
  }
}

/* ========================================
   メインコンテンツ
   ======================================== */
.main-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* タブレット対応: bodyのzoomで全体縮小されるため、.main-content個別のzoomは不要 */

/* ========================================
   セクション1: ヒーロー（メインビジュアル）- PC版
   プロジェクトナレッジの位置関係に基づく絶対配置
   
   PC版位置関係（Figma座標）:
   - [1.1] ロゴ: left:152px, top:50px (423×162px)
   - [1.5] UI画像: left:90px, top:190px (480×303px)
   - [1.6] テストロゴ: left:121px, top:437px (517×159px)
   - [1.2.1] 年度テキスト: left:651px, top:71px (380.78×70.84px)
   - [1.2.2] UPDATE: left:628px, top:161px (427.72×83.38px)
   - [1.3] キャッチコピー: left:547px, top:284px (590×137px)
   - [1.4] アクセントバー: left:622px, top:404px (440×12px)
   - [1.7] 便利バー: left:711px, top:466px (297×30px)
   - [1.8] タグ群: left:662px, top:511px
   - [1.9] CTAボタン: left:970px, top:774px (203×61px)
   ======================================== */
.hero {
  position: relative;
  width: 100%;
  height: 734px;
  overflow: hidden;
}

.hero__inner {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  height: 100%;
}

/* [1.1] キュビナロゴ: left:152px, top:50px (423×162px) */
.hero__logo {
  position: absolute;
  left: 152px;
  top: 50px;
  width: 423px;
}

.hero__logo img {
  width: 100%;
  height: auto;
}

/* ----- 左エリア: UI画像とテストロゴ ----- */
.hero__left {
  position: absolute;
  left: 90px;
  top: 190px;
  width: 517px;
}

/* [1.5] キュビナテストUI画像: left:90px, top:190px (480×303px) */
/* 画像自体に影が含まれているため、CSSのドロップシャドウは不要 */
.hero__ui-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 480px;
  z-index: 1;
}

.hero__ui-image img {
  width: 100%;
  height: auto;
}

/* [1.6] NEWラベル+テストロゴ: left:121px, top:437px (517×159px) */
/* 相対位置: left:31px (121-90), top:247px (437-190) */
.hero__test-logo {
  position: absolute;
  left: 31px;
  top: 247px;
  width: 517px;
  z-index: 2;
}

.hero__test-logo img {
  width: 100%;
  height: auto;
}

/* ----- 右エリア ----- */
.hero__right {
  position: absolute;
  left: 547px;
  top: 0;
  width: 590px;
}

/* [1.2] 年度表記バッジ */
/* [1.2.1] 年度テキスト: left:651px, top:71px → 相対位置: left:104px, top:71px */
.hero__year-badge {
  position: absolute;
  left: 104px;
  top: 71px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* PC版年度テキスト: 380.78×70.84px */
.hero__year-text--pc {
  width: 381px;
  height: 71px;
}

/* SP版年度テキスト（デフォルトは非表示） */
.hero__year-text--sp {
  display: none;
}

/* [1.2.2] UPDATE: left:628px, top:161px (427.72×83.38px) */
/* 相対位置: margin-left:-23px (628-651), margin-top:19px */
.hero__update-text {
  width: 428px;
  height: 83px;
  margin-top: 19px;
  margin-left: -23px;
}

/* [1.3] キャッチコピー: left:547px, top:284px (590×137px) */
/* 相対位置: left:0, top:284px */
/* 左右中央揃え */
.hero__catchcopy {
  position: absolute;
  left: 0;
  top: 284px;
  width: 590px;
  text-align: center;
  z-index: 2;
}

.hero__catchcopy-line1,
.hero__catchcopy-line2 {
  font-weight: 700;
  font-size: 29.163px;
  line-height: 1.3;
  color: #212423;
}

.hero__catchcopy-line3 {
  font-weight: 700;
  font-size: 45px;
  line-height: 1.3;
  color: #212423;
}

/* [1.4] アクセントバー: left:622px, top:404px (440×12px) */
/* 相対位置: left:75px (622-547), top:404px */
.hero__accent-bar {
  position: absolute;
  left: 75px;
  top: 404px;
  width: 440px;
  height: 12px;
  background: rgba(0, 204, 136, 0.4);
  z-index: 1;
}

/* [1.7] 便利バー: left:711px, top:466px (297×30px) */
.hero__content-bar-wrapper {
  position: absolute;
  left: 711px;
  top: 466px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__content-bar {
  width: 297px;
  height: 30px;
  background: linear-gradient(90deg, #FFC83E 0%, #FFC83E 100%);
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 便利バー下の下向き矢印 */
.hero__content-bar-arrow {
  width: 15px;
  height: 15px;
  margin-top: -2px;
}

.hero__content-bar-text {
  font-weight: 700;
  font-size: 14.974px;
  color: #212423;
}

/* [1.8] タグ群: left:662px, top:511px (2列×2行) */
.hero__tags {
  position: absolute;
  left: 662px;
  top: 511px;
  display: grid;
  grid-template-columns: repeat(2, 192px);
  gap: 10px;
}

.hero__tag {
  width: 192px;
  height: 53px;
  background: #fff;
  border: 2px solid #FFC83E;
  border-radius: 7.487px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}

.hero__tag-text {
  font-weight: 700;
  font-size: 18.717px;
  color: #231815;
}

.hero__tag-icon {
  width: 30px;
  height: auto;
  flex-shrink: 0;
}

/* 実技4教科: タグ内コンテンツを右に5pxずらす */
.hero__tag--jitsugi {
  padding-left: 15px;
}

/* 実技4教科アイコン: サイズ大きめ＋右寄せ */
.hero__tag-icon--jitsugi {
  width: 40px;
  margin-left: 15px;
}


/* ========================================
   セクション2: AI型教材キュビナとは - PC版
   プロジェクトナレッジの位置関係に基づく
   
   PC版位置関係（Figma座標）:
   - カード: x:204, y:734, 791×578px
   - タイトル: left:346px, top:765px (498×83px)
   - アクセントバー: left:345px, top:822px (494×13px)
   - 説明: left:278px, top:856px (634×52px)
   - POINT: left:539px, top:937px (118×28px)
   - ヘッダー: left:411px, top:974px (378×45px)
   - ピル: left:274px, top:1034px (315×39px × 2)
   - 円: left:346px, top:1095px (177×177px × 2)
   - 下矢印: left:578px, top:1312px (43×44px)
   ======================================== */
.about-qubena {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 0;
}

.about-qubena__card {
  position: relative;
  width: 791px;
  height: 578px;
  background: #fff;
  border-radius: 20.14px;
  box-shadow: 0px 4.028px 4.028px 0px rgba(0, 0, 0, 0.25);
}

/* [2.1] タイトル「AI型教材キュビナとは」
   位置: left:346px, top:765px (498×83px)
   カードからの相対位置: left:142px (346-204), top:31px (765-734) */
.about-qubena__title {
  position: absolute;
  left: 142px;
  top: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  z-index: 1;
}

.about-qubena__title-text {
  font-weight: 700;
  font-size: 30.721px;
  color: #212423;
  line-height: 1;
}

/* ロゴ: 位置: left:485px, top:765px (287×83px)
   「AI型教材」との間隔調整 */
.about-qubena__title-logo {
  width: 287px;
  height: 83px;
  object-fit: contain;
  margin-top: -8px; /* ベースライン調整 */
}

/* [2.2] アクセントバー
   位置: left:345px, top:822px (494×13px)
   カードからの相対位置: left:141px (345-204), top:88px (822-734) */
.about-qubena__accent-bar {
  position: absolute;
  left: 141px;
  top: 80px;
  width: 494px;
  height: 13px;
  background: #CDF2E6;
}

/* [2.3] 説明テキスト
   位置: left:278px, top:856px (634×52px)
   カードからの相対位置: left:74px (278-204), top:122px (856-734) */
.about-qubena__description {
  position: absolute;
  left: 74px;
  top: 122px;
  width: 634px;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: #212423;
  text-align: center;
}

/* [2.4] POINTグラフィック
   位置: left:539px, top:937px (118×28px)
   カードからの相対位置: left:335px (539-204), top:203px (937-734) */
.about-qubena__point {
  position: absolute;
  left: 335px;
  top: 203px;
  width: 118px;
  height: 28px;
}

.about-qubena__point-img {
  width: 100%;
  height: 100%;
}

/* テキスト表示のフォールバック（画像が使えない場合） */
.about-qubena__point-text {
  display: none;
  font-family: 'Arial', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 22px;
  letter-spacing: 2px;
  color: #FEEECF;
  -webkit-text-stroke: 2.5px #00CC88;
  text-stroke: 2.5px #00CC88;
  paint-order: stroke fill;
}

/* [2.5] 「キュビナはここが違います！」ヘッダー
   位置: left:411px, top:974px (378×45px)
   カードからの相対位置: left:207px (411-204), top:240px (974-734) */
.about-qubena__header {
  position: absolute;
  left: 207px;
  top: 240px;
  width: 378px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

.about-qubena__header-text {
  font-weight: 700;
  font-size: 25px;
  color: #00CC88;
  white-space: nowrap;
}

/* 矢印: 23×30px */
.about-qubena__header-arrow {
  width: 23px;
  height: 30px;
  flex-shrink: 0;
}

.about-qubena__header-arrow--left {
  transform: none;
}

.about-qubena__header-arrow--right {
  transform: scaleX(-1);
}

/* [2.6] 特徴ピル
   位置: left:274px, top:1034px (315×39px × 2)
   カードからの相対位置: left:70px (274-204), top:300px (1034-734) */
.about-qubena__pills {
  position: absolute;
  left: 70px;
  top: 300px;
  display: flex;
  gap: 22px;
}

.about-qubena__pill-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-qubena__pill {
  width: 315px;
  height: 39px;
  background: linear-gradient(90deg, #FFC83E 0%, #FFC83E 100%);
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
}

/* ピル下の下向き矢印: 15×15px, ピル下端から-2pxの位置 */
.about-qubena__pill-arrow {
  width: 15px;
  height: 15px;
  margin-top: -2px;
}

.about-qubena__pill-text {
  font-weight: 700;
  font-size: 22.044px;
  color: #212423;
  text-align: center;
  line-height: 1.2;
}

.about-qubena__pill-text--pc {
  display: inline;
}

.about-qubena__pill-text--sp {
  display: none;
}

/* [2.7] 緑円と×印
   位置: left:346px, top:1095px
   カードからの相対位置: left:142px (346-204), top:361px (1095-734) */
.about-qubena__circles {
  position: absolute;
  left: 142px;
  top: 361px;
  display: flex;
  align-items: center;
  gap: 0;
}

.about-qubena__circle {
  width: 177px;
  height: 177px;
  background: #00CC88;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-qubena__circle-text {
  font-weight: 400;
  font-size: 30px;
  line-height: 1.3;
  color: #fff;
  text-align: center;
}

/* ×印: 50×50px, 左円と右円の間
   左円右端から×印左端: (574-346-177) = 51px
   ×印右端から右円左端: (680-574-50) = 56px */
.about-qubena__cross {
  width: 50px;
  height: 50px;
  margin: 0 53px;
}

.about-qubena__cross--pc {
  display: block;
}

.about-qubena__cross--sp {
  display: none;
}

/* [2.8] 下向き矢印（吹き出し）
   位置: left:578px, top:1312px (43×44px)
   カードからの相対位置: 中央, top:578px (1312-734 = 578 = カード高さ) */
.about-qubena__arrow-down {
  width: 43px;
  height: 44px;
  position: absolute;
  bottom: -44px;
  left: 50%;
  transform: translateX(-50%);
}

.about-qubena__arrow-down::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 21.5px solid transparent;
  border-right: 21.5px solid transparent;
  border-top: 44px solid #fff;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.15));
}

/* ========================================
   セクション3: 教科書準拠 - PC版
   プロジェクトナレッジの位置関係に基づく
   
   PC版位置関係（Figma座標）:
   - タイトルエリア: x:234, y:1450, 694×155px
   - [3.0] POINT: left:245px, top:1492px (121×56px) rotate(-14.533°)
   - [3.1] ヘッダー: left:469px, top:1450px (257×45px)
   - [3.2] メインタイトル: left:234px, top:1492px (692×72px)
   - [3.3] 説明: left:245px, top:1576px (683×29px)
   - カードエリア: x:145, y:1648, 910×323px
   - [3.4] 左カード: left:145px, top:1648px (436×323px)
   - [3.5] 右カード: left:619px, top:1648px (436×323px)
   ======================================== */
.textbook-align {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  /* セクション2の下端（約1356px）からセクション3の開始（1450px）までの間隔 */
  margin-top: 94px;
}

.textbook-align__inner {
  position: relative;
  width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* タイトルエリア: 694×155px, 中央配置 */
.textbook-align__title-area {
  position: relative;
  width: 694px;
  height: 155px;
}

/* [3.0] POINT: left:245px, top:1492px (121×56px)
   タイトルエリアからの相対位置: left:11px (245-234), top:18px
   メインタイトルの左上に重なる位置 */
.textbook-align__point {
  position: absolute;
  left: 11px;
  top: 18px;
  width: 121px;
  height: 56px;
  transform: rotate(-14.533deg);
  z-index: 2;
}

.textbook-align__point-img {
  width: 100%;
  height: 100%;
}

/* [3.1] 「比べてください！」ヘッダー: left:469px, top:1450px (257×45px)
   タイトルエリアからの相対位置: left:235px (469-234), top:0px (1450-1450) */
.textbook-align__header {
  position: absolute;
  left: 235px;
  top: 0;
  width: 257px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.textbook-align__header-text {
  font-weight: 700;
  font-size: 25px;
  color: #212423;
  white-space: nowrap;
}

/* 矢印: black-allow.svgを使用 23×30px */
.textbook-align__header-arrow {
  width: 23px;
  height: 30px;
  flex-shrink: 0;
}

/* 左矢印「＼」: そのまま */
.textbook-align__header-arrow--left {
  transform: none;
}

/* 右矢印「／」: 水平反転 */
.textbook-align__header-arrow--right {
  transform: scaleX(-1);
}

/* [3.2] メインタイトル: left:234px, top:1492px (692×72px)
   タイトルエリアからの相対位置: left:0px (234-234), top:42px (1492-1450)
   背景はセクション2のピルと同様のpill形状 */
.textbook-align__main-title {
  position: absolute;
  left: 0;
  top: 42px;
  width: 692px;
  height: 72px;
  background: linear-gradient(90deg, #F9B816 0%, #FFC83E 100%);
  border-radius: 36px; /* pill形状: 高さ72pxの半分 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.textbook-align__main-title-text {
  font-weight: 700;
  font-size: 34px;
  color: #212423;
  text-align: center;
  line-height: 1.3;
}

.textbook-align__main-title-text--pc {
  display: inline;
}

.textbook-align__main-title-text--sp {
  display: none;
}

/* [3.3] 説明テキスト: left:245px, top:1576px (683×29px)
   タイトルエリアからの相対位置: left:11px (245-234), top:126px (1576-1450) */
.textbook-align__description {
  position: absolute;
  left: 11px;
  top: 126px;
  width: 683px;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: #1f2322;
  text-align: center;
}

.textbook-align__description--pc {
  display: inline;
}

.textbook-align__description--sp {
  display: none;
}

/* カードエリア: 910×323px
   Figma: タイトルエリア下端(y:1605)からカード上端(y:1648)までの間隔=43px */
.textbook-align__cards {
  display: flex;
  gap: 38px;
  margin-top: 43px;
}

/* カード: 436×323px */
.textbook-align__card {
  width: 436px;
  height: 323px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 33px 28px 39px;
}

/* カードタイトル: 22px, 緑 */
.textbook-align__card-title {
  font-weight: 700;
  font-size: 22px;
  color: #00CC88;
  text-align: center;
  margin-bottom: 22px;
  line-height: 1.3;
}

.textbook-align__card-title--pc {
  display: inline;
}

.textbook-align__card-title--sp {
  display: none;
}

/* 画像エリア: 380×201px (左カード), 379×201px (右カード) */
.textbook-align__card-content {
  position: relative;
  width: 380px;
  height: 201px;
  background: #F4F3F3;
  border: 1px solid #A8A6A6;
  overflow: visible;
}

/* 左カードの画像配置 */
.textbook-align__card-content--left {
  position: relative;
}

/* 教科書イラスト: 160×82px
   画像エリア内での位置: left:16px (189-173), top:60px (1791-1731) */
.textbook-align__img-textbook {
  position: absolute;
  left: 16px;
  top: 60px;
  width: 160px;
  height: 82px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

/* 問題画面イラスト: 176×173px
   画像エリア内での位置: left:187px (360-173), top:15px (1746-1731) */
.textbook-align__img-problem {
  position: absolute;
  left: 187px;
  top: 15px;
  width: 176px;
  height: 173px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

/* 右カードの画像配置 */
.textbook-align__card-content--right {
  position: relative;
  width: 379px;
}

/* キュビナスクリーンショット: 379×201px (背景として全体を覆う) */
.textbook-align__img-screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 教科書Aオーバーレイ: 102×82px
   画像エリア内での位置: left:119px (766-647), top:24px (1755-1731) */
.textbook-align__img-overlay {
  position: absolute;
  left: 122px;
  top: 24px;
  width: 102px;
  height: 82px;
}

/* ========================================
   フッター
   ======================================== */
.footer {
  position: relative;
  width: 100%;
  background: #a8a6a6;
  padding: 30px 20px;
  margin-top: 80px;
  z-index: 10;
}

.footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.footer__nav {
  display: flex;
  gap: 30px;
  align-items: center;
}

.footer__link {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.footer__link:hover {
  opacity: 0.7;
}

.footer__copyright {
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
}

/* ========================================
   レスポンシブ: タブレット (961px - 1200px)
   ⮳ .main-content全体のscale(0.8)で縮小されるため、
     個別セクションのscaleは不要
   ======================================== */
/* タブレット版: .main-contentのzoomで全体縮小されるため、
   heroのheightはPC版(734px)のままでOK
   zoom適用後: 734×0.8=587px (961-1200px), 734×0.65=477px (751-960px) */

/* ========================================
   レスポンシブ: SP版 (750px以下)
   プロジェクトナレッジのSP版位置関係に基づく
   
   セクション1 SP版位置関係（Figma座標）:
   - [1.1] ロゴ: 中央, top:14px (144×55px)
   - [1.2] 年度表記: 中央, top:71px
   - [1.3] キャッチコピー: 中央, top:141px (336×85px)
   - [1.4] アクセントバー: 中央, top:218px (297×8px)
   - [1.5] UI画像: 中央, top:242px (312×197px)
   - [1.6] テストロゴ: 中央, top:381px (325×97px) ※UI画像と-58px重なり
   - [1.7] 便利バー: 中央, top:511px (285×25px)
   - [1.8] タグ群: 中央, top:547px
   
   セクション2 SP版位置関係（Figma座標）:
   - カード: x:16, y:692, 365×475px
   - タイトル: left:57px, top:717px (262×39px)
   - アクセントバー: left:54px, top:743px (265×7px)
   - 説明: left:48px, top:778px (300×130px)
   - POINT: left:154px, top:904px (86×20px)
   - ヘッダー: left:45px, top:931px (306×20px)
   - ピル: left:36px, top:977px (146×38px × 2)
   - 円: left:55px, top:1033px (107×106px × 2)
   - 下矢印: left:187px, top:1166px (20×20px)
   ======================================== */
@media only screen and (max-width: 750px) {
  .main-content {
    max-width: 396px;
  }

  .hero {
    height: auto;
    /*padding: 0 0 80px;*/
  }

  .hero__inner {
    position: relative;
    left: auto;
    width: 100%;
    max-width: 396px;
    height: auto;
    transform: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 0 0;
    margin: 0 auto;
  }

  /* ----- SP版では全ての絶対配置を解除してフロー配置に ----- */
  
  /* [1.1] キュビナロゴ: 中央, 144×55px */
  .hero__logo {
    position: relative;
    left: auto;
    top: auto;
    width: 144px;
    margin-bottom: 2px;
    order: 1;
  }

  /* 右エリアをフロー配置に変更 */
  .hero__right {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    display: contents;
  }

  /* [1.2] 年度表記: 中央、横並び */
  .hero__year-badge {
    position: relative;
    left: auto;
    top: auto;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    margin-bottom: 11px;
    order: 2;
  }

  /* PC版年度テキストは非表示 */
  .hero__year-text--pc {
    display: none;
  }

  /* SP版年度テキストは表示: 56.958×59px */
  .hero__year-text--sp {
    display: block;
    width: 57px;
    height: 59px;
  }

  /* SP版UPDATEテキスト: 216×42px */
  .hero__update-text {
    width: 216px;
    height: 42px;
    margin-top: 0;
    margin-left: 0;
  }

  /* [1.3] キャッチコピー: 336×85px, 中央揃え */
  .hero__catchcopy {
    position: relative;
    left: auto;
    top: auto;
    width: 336px;
    text-align: center;
    margin-bottom: 0;
    order: 3;
  }

  .hero__catchcopy-line1,
  .hero__catchcopy-line2 {
    font-size: 17.246px;
  }

  .hero__catchcopy-line3 {
    font-size: 29.565px;
  }

  /* [1.4] アクセントバー: 297×8px */
  .hero__accent-bar {
    position: relative;
    left: auto;
    top: auto;
    width: 297px;
    height: 8px;
    margin-top: -8px;
    margin-bottom: 16px;
    order: 4;
  }

  /* 左エリアをフロー配置に変更 */
  .hero__left {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    order: 5;
  }

  /* [1.5] UI画像: 312×197px */
  .hero__ui-image {
    position: relative;
    left: auto;
    top: auto;
    width: 312px;
  }

  /* [1.6] テストロゴ: 325×97px, UI画像と-58px重なり */
  .hero__test-logo {
    position: relative;
    left: auto;
    top: auto;
    width: 325px;
    margin-top: -58px;
  }

  /* [1.7] 便利バー: 285×25px */
  .hero__content-bar-wrapper {
    position: relative;
    left: auto;
    top: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 21px;
    margin-bottom: 11px;
    order: 6;
  }

  .hero__content-bar {
    width: 285px;
    height: 25px;
    border-radius: 33px;
  }

  /* SP版便利バー下矢印 */
  .hero__content-bar-arrow {
    width: 7px;
    height: 7px;
    margin-top: -1px;
  }

  .hero__content-bar-text {
    font-size: 13.179px;
  }

  /* [1.8] タグ群: 2列×2行 (164×34px各) */
  .hero__tags {
    position: relative;
    left: auto;
    top: auto;
    grid-template-columns: repeat(2, 164px);
    gap: 8px;
    order: 7;
  }

  .hero__tag {
    width: 164px;
    height: 34px;
    border-width: 2.2px;
    border-radius: 6.59px;
    gap: 6px;
  }

  .hero__tag-text {
    font-size: 14.278px;
  }

  .hero__tag-icon {
    width: 22px;
  }

  .hero__tag--jitsugi {
    padding-left: 15px;
  }

  .hero__tag-icon--jitsugi {
    width: 40px;
    margin-left: 15px;
  }

  /* ========================================
     セクション2: AI型教材キュビナとは - SP版
     ======================================== */
  .about-qubena {
    margin-top: 70px;
    padding: 0 16px;
  }

  .about-qubena__card {
    width: 365px;
    height: 475px;
    transform: none;
  }

  /* [2.1] タイトル: left:57px, top:717px (262×39px)
     カードからの相対位置: left:41px (57-16), top:25px (717-692) */
  .about-qubena__title {
    left: 41px;
    top: 25px;
    width: 262px;
    gap: 0;
  }

  .about-qubena__title-text {
    font-size: 20px;
  }

  /* ロゴ: 133×39px */
  .about-qubena__title-logo {
    width: 133px;
    height: 39px;
    margin-top: -4px;
  }

  /* [2.2] アクセントバー: left:54px, top:743px (265×7px)
     カードからの相対位置: left:38px (54-16), top:51px (743-692) */
  .about-qubena__accent-bar {
    left: 38px;
    top: 48px;
    width: 265px;
    height: 7px;
  }

  /* [2.3] 説明テキスト: left:48px, top:778px (300×130px)
     カードからの相対位置: left:32px (48-16), top:86px (778-692) */
  .about-qubena__description {
    left: 32px;
    top: 86px;
    width: 300px;
    font-size: 16px;
    text-align: left;
    line-height: 1.6;
  }

  /* [2.4] POINT: left:154px, top:904px (86×20px)
     カードからの相対位置: left:138px (154-16), top:212px (904-692) */
  .about-qubena__point {
    left: 138px;
    top: 212px;
    width: 86px;
    height: 20px;
  }

  /* [2.5] ヘッダー: left:45px, top:931px (306×20px)
     カードからの相対位置: left:29px (45-16), top:239px (931-692) */
  .about-qubena__header {
    left: 29px;
    top: 239px;
    width: 306px;
    height: 20px;
  }

  .about-qubena__header-text {
    font-size: 19px;
  }

  /* 矢印: 11×14px */
  .about-qubena__header-arrow {
    width: 11px;
    height: 14px;
  }

  /* [2.6] ピル: left:36px, top:977px (146×38px × 2)
     カードからの相対位置: left:20px (36-16), top:285px (977-692) */
  .about-qubena__pills {
    left: 20px;
    top: 285px;
    gap: 30px;
  }

  .about-qubena__pill-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .about-qubena__pill {
    width: 146px;
    height: 38px;
    padding: 0 10px;
  }

  /* SP版ピル下矢印: 7×7px */
  .about-qubena__pill-arrow {
    width: 7px;
    height: 7px;
    margin-top: -1px;
  }

  .about-qubena__pill-text {
    font-size: 13px;
    line-height: 1.3;
  }

  .about-qubena__pill-text--pc {
    display: none;
  }

  .about-qubena__pill-text--sp {
    display: inline;
    text-align: center;
  }

  /* [2.7] 緑円と×印: left:55px, top:1033px
     カードからの相対位置: left:39px (55-16), top:341px (1033-692) */
  .about-qubena__circles {
    left: 39px;
    top: 341px;
  }

  .about-qubena__circle {
    width: 107px;
    height: 106px;
  }

  .about-qubena__circle-text {
    font-size: 19px;
  }

  /* ×印: 30×30px */
  .about-qubena__cross {
    width: 30px;
    height: 30px;
    margin: 0 22px;
  }

  .about-qubena__cross--pc {
    display: none;
  }

  .about-qubena__cross--sp {
    display: block;
  }

  /* [2.8] 下向き矢印: 20×20px */
  .about-qubena__arrow-down {
    width: 20px;
    height: 20px;
    bottom: -20px;
  }

  .about-qubena__arrow-down::before {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #fff;
  }

  /* ========================================
     セクション3: 教科書準拠 - SP版
     
     SP版位置関係（Figma座標）:
     - タイトルエリア: x:16, y:1223, 365×139px
     - [3.0] POINT: left:48px, top:1258px (56×26px) rotate(-14.181°)
     - [3.1] ヘッダー: left:104px, top:1223px (179×20px)
     - [3.2] メインタイトル: left:16px, top:1254px (365×60px)
     - [3.3] 説明: left:46px, top:1325px (305×37px)
     - [3.4] 上カード: left:16px, top:1398px (365×271px)
     - [3.5] 下カード: left:15px, top:1699px (366×293px)
     ======================================== */
  .textbook-align {
    margin-top: 50px;
    padding: 0 16px;
  }

  .textbook-align__inner {
    width: 100%;
    max-width: 365px;
    transform: none;
  }

  /* タイトルエリア: 365×139px */
  .textbook-align__title-area {
    width: 365px;
    height: 139px;
  }

  /* [3.0] POINT: 56×26px
     タイトルエリアからの相対位置: left:32px, top:10px
     メインタイトルの左上に重なる位置 */
  .textbook-align__point {
    left: 32px;
    top: 21px;
    width: 56px;
    height: 26px;
    transform: rotate(-14.181deg);
  }

  /* [3.1] ヘッダー: 179×20px
     タイトルエリアからの相対位置: left:88px (104-16), top:0px (1223-1223) */
  .textbook-align__header {
    left: 88px;
    top: 0;
    width: 179px;
    height: 20px;
  }

  .textbook-align__header-text {
    font-size: 19px;
  }

  /* 矢印: 10×13px */
  .textbook-align__header-arrow {
    width: 10px;
    height: 13px;
  }

  /* [3.2] メインタイトル: 365×60px
     タイトルエリアからの相対位置: left:0px (16-16), top:31px (1254-1223) */
  .textbook-align__main-title {
    left: 0;
    top: 31px;
    width: 365px;
    height: 60px;
    border-radius: 30px; /* pill形状: 高さ60pxの半分 */
  }

  .textbook-align__main-title-text {
    font-size: 20px;
    line-height: 1.4;
  }

  .textbook-align__main-title-text--pc {
    display: none;
  }

  .textbook-align__main-title-text--sp {
    display: inline;
  }

  /* [3.3] 説明テキスト: 305×37px
     タイトルエリアからの相対位置: left:30px (46-16), top:102px (1325-1223) */
  .textbook-align__description {
    left: 30px;
    top: 102px;
    width: 305px;
    font-size: 14px;
    line-height: 1.5;
  }

  .textbook-align__description--pc {
    display: none;
  }

  .textbook-align__description--sp {
    display: inline;
  }

  /* カードエリア: 縦並び
     Figma: タイトルエリア下端(y:1362)からカード上端(y:1398)までの間隔=36px */
  .textbook-align__cards {
    flex-direction: column;
    gap: 30px;
    margin-top: 36px;
  }

  /* カード: 365×271px (上), 366×293px (下) */
  .textbook-align__card {
    width: 365px;
    height: auto;
    min-height: 271px;
    border-radius: 15px;
    padding: 27px 15px 30px;
  }

  /* カードタイトル: 20px */
  .textbook-align__card-title {
    font-size: 20px;
    margin-bottom: 13px;
  }

  .textbook-align__card-title--pc {
    display: none;
  }

  .textbook-align__card-title--sp {
    display: inline;
  }

  /* 画像エリア: 336×178px */
  .textbook-align__card-content {
    width: 336px;
    height: 178px;
    border-width: 1.127px;
  }

  /* 左カードの画像配置 */
  /* 教科書イラスト: 142×73px
     画像エリア内での位置: left:14px (44-30), top:53px (1515-1462) */
  .textbook-align__img-textbook {
    left: 14px;
    top: 53px;
    width: 142px;
    height: 73px;
    box-shadow: 0px 4.5px 4.5px 0px rgba(0, 0, 0, 0.25);
  }

  /* 問題画面イラスト: 156×153px
     画像エリア内での位置: left:166px (196-30), top:13px (1475-1462) */
  .textbook-align__img-problem {
    left: 166px;
    top: 13px;
    width: 156px;
    height: 153px;
    box-shadow: 0px 4.5px 4.5px 0px rgba(0, 0, 0, 0.25);
  }

  /* 右カードの画像配置 */
  .textbook-align__card-content--right {
    width: 335px;
    height: 178px;
  }

  /* 教科書Aオーバーレイ: 90×73px
     画像エリア内での位置: left:105px (135-30), top:8px (1793-1785) */
  .textbook-align__img-overlay {
    left: 110px;
    top: 18px;
    width: 90px;
    height: 73px;
  }

  /* フッター */
  .footer {
    padding: 30px 20px;
    margin-top: 50px;
  }

  .footer__link {
    font-size: 13px;
  }

  .footer__copyright {
    font-size: 11px;
    text-align: center;
  }
}

/* =============================================
   セクション4: 授業活用
   PC版: 910×303px, カード位置 left:145px, top:2040px
   SP版: 366×541px, カード位置 left:15px, top:2070px
============================================= */

.class-usage {
  width: 100%;
  padding: 24px 0 0;
}

.class-usage__inner {
  position: relative;
  margin: 0 auto;
}

/* 緑の下向き矢印 */
.class-usage__arrow {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}

.class-usage__arrow-img {
  width: 73px;
  height: 28px;
}

/* [4.0] カード背景 */
.class-usage__card {
  position: relative;
  width: 910px;
  height: 303px;
  margin: 0 auto;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

/* [4.1] カードヘッダーラッパー */
.class-usage__header-wrapper {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 30px;
  width: 627px;
}

.class-usage__header {
  position: relative;
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #212423;
  text-align: center;
  white-space: nowrap;
  margin: 0;
}

/* 黄色アクセント背景（テキスト下部） */
.class-usage__header-accent {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -3px;
  width: 573px;
  height: 8px;
  background: #FEEECF;
}

.class-usage__header--pc {
  display: inline;
}

.class-usage__header--sp {
  display: none;
}

/* コンテンツエリア: 横並び配置 */
.class-usage__content {
  position: absolute;
  top: 75px;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding: 0 103px;
  gap: 40px;
}

/* 各エリア共通 */
.class-usage__area {
  position: relative;
  flex: 1;
  max-width: 305px;
}

/* イラスト＋ラベル行 */
.class-usage__icon-row {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  z-index: 1;
}

/* イラストラッパー（トリミング用） */
.class-usage__icon-wrapper {
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
}

.class-usage__icon-wrapper--children {
  width: 48px;
  height: 71px;
}

.class-usage__icon-wrapper--teacher {
  width: 50px;
  height: 72px;
}

/* イラスト */
.class-usage__icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* グレーアクセント線（イラスト行の下） */
.class-usage__accent-line {
  width: 305px;
  height: 2px;
  background-color: #A8A6A6;
  margin-bottom: 10px;
}

/* ラベル */
.class-usage__label {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #212423;
  z-index: 1;
  padding-bottom: 10px;
}

/* 緑タイトル */
.class-usage__title {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #00CC88;
  margin-bottom: 8px;
  line-height: 1.4;
}

/* 説明テキスト */
.class-usage__description {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: normal;
  font-size: 15px;
  color: #3E3A39;
  line-height: 1.5;
}

.class-usage__description p {
  margin: 0 0 4px;
}

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

/* 先生エリアの「教材研究の時間を短縮」は●なし、インデント */
.class-usage__description-note {
  padding-left: 1em;
}

/* =============================================
   SP版（750px以下）
============================================= */
@media screen and (max-width: 750px) {
  .class-usage {
    padding: 15px 0 0;
  }

  .class-usage__inner {
    width: 100%;
    padding: 0 15px;
  }

  /* 緑の下向き矢印 */
  .class-usage__arrow {
    margin-bottom: 20px;
  }

  .class-usage__arrow-img {
    width: 78px;
    height: 30px;
  }

  /* [4.0] カード背景: 366×541px, 角丸8.044px */
  .class-usage__card {
    width: 366px;
    height: 541px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 8.044px;
    box-shadow: 0px 1.609px 1.609px 0px rgba(0, 0, 0, 0.25);
    transform: none;
  }

  /* [4.1] カードヘッダーラッパー */
  .class-usage__header-wrapper {
    top: 28px;
    width: 306px;
  }

  /* 黄色アクセント背景: SP版は2行分を::before/::afterで実装（セクション6.2と同じ手法） */
  .class-usage__header-accent {
    display: none; /* SP版では非表示、代わりに疑似要素を使用 */
  }

  .class-usage__header {
    position: relative;
    display: inline-block;
    font-size: 19px;
    white-space: normal;
    line-height: 1.4;
  }

  .class-usage__header--pc {
    display: none;
  }

  .class-usage__header--sp {
    display: inline;
    position: relative;
    z-index: 1;
  }

  .class-usage__header::before,
  .class-usage__header::after {
    content: '';
    position: absolute;
    height: 8px;
    background: #FEEECF;
    z-index: 0;
    left: 50%;
    transform: translateX(-50%);
  }

  /* 1行目アクセント: 257px幅 */
  .class-usage__header::before {
    top: 18px;
    width: 257px;
  }

  /* 2行目アクセント: 268px幅 */
  .class-usage__header::after {
    top: 41px;
    width: 268px;
  }

  /* コンテンツエリア: 縦並び配置 */
  .class-usage__content {
    top: 92px;
    flex-direction: column;
    align-items: center;
    padding: 0 15px;
    gap: 20px;
  }

  /* 各エリア共通 */
  .class-usage__area {
    width: 336px;
    max-width: 100%;
  }

  /* イラスト＋ラベル行 */
  .class-usage__icon-row {
    gap: 5px;
  }

  /* イラストラッパー */
  .class-usage__icon-wrapper--children {
    width: 48px;
    height: 71px;
  }

  .class-usage__icon-wrapper--teacher {
    width: 50px;
    height: 71px;
  }

  /* グレーアクセント線 */
  .class-usage__accent-line {
    width: 305px;
  }

  /* 説明テキスト: SP版は16px */
  .class-usage__description {
    font-size: 16px;
  }
}

/* ========================================
   セクション5: 高精度AI - PC版
   セクション3（教科書準拠）と同様の構造で実装
   
   PC版位置関係（Figma座標）:
   - タイトルエリア: x:228, y:2480, 700×178px
   - [5.0] POINT: left:228px, top:2520px (121×56px) rotate(-14.5°)
   - [5.1] ヘッダー: left:469px, top:2480px (257×45px)
   - [5.2] タイトル背景: left:234px, top:2522px (692×72px) 角丸なし
   - [5.3] メインタイトル: left:274px, top:2535px
   - [5.4] 説明テキスト: left:245px, top:2606px (683×52px)
   ======================================== */
.ai-precision {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  /* セクション4の下からセクション5の開始までの間隔 */
  margin-top: 105px;
}

.ai-precision__inner {
  position: relative;
  width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* タイトルエリア: 700×178px, セクション3と同様の構造 */
.ai-precision__title-area {
  position: relative;
  width: 700px;
  height: 178px;
}

/* [5.0] POINT: 121×56px
   セクション3と同様の位置に配置: left:11px, top:18px
   メインタイトルの左上に重なる位置 */
.ai-precision__point {
  position: absolute;
  left: 11px;
  top: 12px;
  width: 121px;
  height: 56px;
  transform: rotate(-14.533deg);
  z-index: 2;
}

.ai-precision__point-img {
  width: 100%;
  height: 100%;
}

/* [5.1]「比べてください！」ヘッダー: 257×45px
   タイトルエリアからの相対位置: left:241px (469-228), top:0px (2480-2480) */
.ai-precision__header {
  position: absolute;
  left: 241px;
  top: 0;
  width: 257px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ai-precision__header-text {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 25px;
  color: #212423;
  white-space: nowrap;
}

/* 矢印: black-allow.svgを使用 23×30px */
.ai-precision__header-arrow {
  width: 23px;
  height: 30px;
  flex-shrink: 0;
}

/* 左矢印: そのまま */
.ai-precision__header-arrow--left {
  transform: none;
}

/* 右矢印: 水平反転 */
.ai-precision__header-arrow--right {
  transform: scaleX(-1);
}

/* [5.2] タイトル背景 + [5.3] メインタイトル: 692×72px
   セクション3と同様の配置: left:0, top:42px
   セクション3と同様のpill形状（角丸あり） */
.ai-precision__main-title {
  position: absolute;
  left: 0;
  top: 42px;
  width: 692px;
  height: 72px;
  background: linear-gradient(90deg, #F9B816 0%, #FFC83E 100%);
  /* セクション3と同様のpill形状 */
  border-radius: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-precision__main-title-text {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 34px;
  color: #212423;
  text-align: center;
  line-height: 1.3;
}

.ai-precision__main-title-text--pc {
  display: inline;
}

.ai-precision__main-title-text--sp {
  display: none;
}

/* [5.4] 説明テキスト: 683×52px
   タイトルエリアからの相対位置: left:17px (245-228), top:126px (2606-2480) */
.ai-precision__description {
  position: absolute;
  left: 17px;
  top: 126px;
  width: 683px;
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: #1f2322;
  text-align: center;
  margin: 0;
}

.ai-precision__description--pc {
  display: inline;
}

.ai-precision__description--sp {
  display: none;
}

/* ========================================
   セクション5: 高精度AI - SP版
   
   SP版位置関係（Figma座標）:
   - タイトルエリア: x:15, y:2692, 366×165px
   - [5.0] POINT: left:33px, top:2724px (56×26px) rotate(-14°)
   - [5.1] ヘッダー: left:104px, top:2692px (179×20px)
   - [5.2] タイトル背景: left:15px, top:2723px (366×60px)
   - [5.4] 説明テキスト: left:46px, top:2794px (305×63px)
   ======================================== */
@media only screen and (max-width: 750px) {
  .ai-precision {
    margin-top: 81px;
    padding: 0 12px;
  }

  .ai-precision__inner {
    width: 100%;
    max-width: 366px;
    transform: none;
  }

  /* タイトルエリア: 366×165px */
  .ai-precision__title-area {
    width: 366px;
    height: 165px;
  }

  /* [5.0] POINT: 56×26px
     セクション3と同様の位置: left:32px, top:10px
     メインタイトルの左上に重なる位置 */
  .ai-precision__point {
    left: 15px;
    top: 18px;
    width: 56px;
    height: 26px;
    transform: rotate(-14.181deg);
  }

  /* [5.1] ヘッダー: 179×20px
     タイトルエリアからの相対位置: left:89px (104-15), top:0px (2692-2692) */
  .ai-precision__header {
    left: 89px;
    top: 0;
    width: 179px;
    height: 20px;
    gap: 6px;
  }

  .ai-precision__header-text {
    font-size: 19px;
  }

  /* 矢印: 10×13px */
  .ai-precision__header-arrow {
    width: 10px;
    height: 13px;
  }

  /* [5.2] タイトル背景: 365×60px
     セクション3と同様のpill形状（角丸あり） */
  .ai-precision__main-title {
    left: 0;
    top: 31px;
    width: 365px;
    height: 60px;
    border-radius: 30px;
  }

  .ai-precision__main-title-text {
    font-size: 20px;
    line-height: 1.4;
  }

  .ai-precision__main-title-text--pc {
    display: none;
  }

  .ai-precision__main-title-text--sp {
    display: inline;
  }

  /* [5.4] 説明テキスト: 305×63px
     タイトルエリアからの相対位置: left:31px (46-15), top:102px (2794-2692) */
  .ai-precision__description {
    left: 31px;
    top: 102px;
    width: 305px;
    font-size: 14px;
    line-height: 1.5;
  }

  .ai-precision__description--pc {
    display: none;
  }

  .ai-precision__description--sp {
    display: inline;
  }
}

/* ========================================
   セクション6: AI分析詳細
   ======================================== */

/* PC版 (デフォルト) */
.ai-analysis {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 57px 0 0;
  display: flex;
  justify-content: center;
}

.ai-analysis__card {
  position: relative;
  width: 910px;
  background: #FFFFFF;
  border-radius: 20px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  padding: 68px 0 48px;
}

/* [6.1] タイトルエリア */
.ai-analysis__title-area {
  position: relative;
  text-align: center;
}

.ai-analysis__title {
  margin: 0 0 30px;
  position: relative;
  display: inline-block;
}

.ai-analysis__title-text {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: #212423;
  position: relative;
  z-index: 1;
}

.ai-analysis__title::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 446px;
  height: 8px;
  background: #CDF2E6;
  z-index: 0;
}

/* AI分析イラストエリア（SVG画像1枚に置き換え） */
.ai-analysis__illustration {
  position: relative;
  width: 708px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.ai-analysis__illustration-img {
  width: 100%;
  height: auto;
  max-width: 708px;
}

.ai-analysis__tablet {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 424px;
  height: 279px;
}

.ai-analysis__tablet-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* バブル共通スタイル */
.ai-analysis__bubble {
  position: absolute;
  background: #00CC88;
  border-radius: 50% 50% 50% 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
}

.ai-analysis__bubble-text {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #FFFFFF;
  white-space: nowrap;
}

/* 各バブルの位置 */
.ai-analysis__bubble--history {
  top: 85px;
  left: 73px;
  width: 129px;
  height: 91px;
  border-radius: 45px 45px 45px 0;
}

.ai-analysis__bubble--time {
  top: 69px;
  right: 27px;
  width: 129px;
  height: 91px;
  border-radius: 45px 45px 0 45px;
}

.ai-analysis__bubble--content {
  top: 185px;
  right: -20px;
  width: 129px;
  height: 91px;
  border-radius: 45px 45px 0 45px;
}

.ai-analysis__bubble--proficiency {
  bottom: 27px;
  left: 86px;
  width: 157px;
  height: 91px;
  border-radius: 45px 45px 45px 0;
}

.ai-analysis__bubble--process {
  bottom: 21px;
  right: 80px;
  width: 157px;
  height: 91px;
  border-radius: 45px 45px 0 45px;
}

/* 生徒イラスト */
.ai-analysis__student {
  position: absolute;
  bottom: 0;
}

.ai-analysis__student--female {
  left: 0;
  width: 175px;
  height: 126px;
}

.ai-analysis__student--male {
  right: -88px;
  width: 176px;
  height: 127px;
}

.ai-analysis__student-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* [6.2] 理解・定着エリア */
.ai-analysis__ai-section {
  position: relative;
  text-align: center;
  padding: 52px 0 0;
}

.ai-analysis__ai-title {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 26px;
  color: #212423;
  line-height: 1.4;
  margin: 0 0 40px;
  position: relative;
  display: inline-block;
}

.ai-analysis__ai-title--pc {
  display: inline;
  position: relative;
  z-index: 1;
}

.ai-analysis__ai-title--sp {
  display: none;
  position: relative;
  z-index: 1;
}

.ai-analysis__ai-title::before,
.ai-analysis__ai-title::after {
  content: '';
  position: absolute;
  height: 8px;
  background: #CDF2E6;
  z-index: 0;
}

.ai-analysis__ai-title::before {
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 334px;
}

.ai-analysis__ai-title::after {
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 446px;
}

/* ヘキサゴンエリア */
.ai-analysis__hexagons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 30px;
}

.ai-analysis__hexagon {
  position: relative;
  width: 182px;
  height: 178px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  clip-path: polygon(50% 0%, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}

.ai-analysis__hexagon--understanding {
  background: linear-gradient(135deg, #F9B816 0%, #FFC83E 100%);
}

.ai-analysis__hexagon--retention {
  background: linear-gradient(135deg, #00CC88 0%, #00CC88 100%);
}

.ai-analysis__hexagon-label {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 28px;
  color: #FFFFFF;
  margin-bottom: 5px;
}

.ai-analysis__hexagon-desc {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #212423;
  text-align: center;
  line-height: 1.4;
}

/* ×マーク */
.ai-analysis__cross {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-analysis__cross-icon {
  position: relative;
  width: 30px;
  height: 30px;
}

.ai-analysis__cross-icon::before,
.ai-analysis__cross-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 4px;
  background: #A8A6A6;
  border-radius: 2px;
}

.ai-analysis__cross-icon::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.ai-analysis__cross-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* キュビナがアプローチ */
.ai-analysis__approach {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 20px;
}

.ai-analysis__approach-logo {
  width: 145px;
  height: auto;
}

.ai-analysis__approach-text {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 22px;
  color: #212423;
}

/* ヘキサゴン＆キュビナがアプローチエリア（SVG画像に置き換え） */
.ai-analysis__hexagon-approach {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: 100%;
  max-width: 750px;
}

.ai-analysis__hexagon-approach-img {
  width: 543px;
  height: auto;
  max-width: 750px;
}

/* [6.3] 機能カードエリア */
.ai-analysis__features {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 50px 45px 0;
}

.ai-analysis__feature-card {
  position: relative;
  width: 390px;
  height: 337px;
  background: #F4F3F3;
  border-radius: 18px;
  padding: 20px;
  text-align: center;
}

.ai-analysis__feature-title {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #00CC88;
  margin: 0 0 15px;
}

.ai-analysis__feature-image {
  width: 306px;
  height: auto;
  overflow: visible;
  border-radius: 0;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  margin: 0 auto;
}

.ai-analysis__feature-img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* キャプション吹き出し共通（SVG矢印方式） */
.ai-analysis__feature-caption {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ai-analysis__feature-caption-arrow {
  flex-shrink: 0;
  margin-bottom: -10px;
  position: relative;
  z-index: 1;
}

.ai-analysis__feature-caption-box {
  background: linear-gradient(135deg, #F9B816 0%, #FFC83E 100%);
  border-radius: 10px;
  padding: 12px 8px;
  position: relative;
  z-index: 10;
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #212423;
  text-align: center;
  line-height: 1.3;
  width: 194px;
  min-height: 59px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ワークブック キャプション */
.ai-analysis__feature-caption--workbook {
  bottom: 17px;
  left: 196px;
}

.ai-analysis__feature-caption--workbook .ai-analysis__feature-caption-arrow {
  transform: rotate(-35deg);
  align-self: flex-start;
  margin-left: 32px;
}

/* 5分間復習 キャプション */
.ai-analysis__feature-caption--review {
  bottom: 25px;
  left: 185px;
}

.ai-analysis__feature-caption--review .ai-analysis__feature-caption-arrow {
  transform: rotate(-35deg);
  align-self: flex-start;
  margin-left: 10px;
}

/* SP版 */
@media only screen and (max-width: 750px) {
  .ai-analysis {
    padding: 36px 12px 0;
  }

  .ai-analysis__card {
    width: 366px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: 0px 1.6px 1.6px rgba(0, 0, 0, 0.25);
    padding: 29px 0 30px;
  }

  /* タイトルエリア */
  .ai-analysis__title {
    margin-bottom: 10px;
  }

  .ai-analysis__title-text {
    font-size: 19px;
  }

  .ai-analysis__title::after {
    width: 321px;
    height: 7px;
    bottom: 4px;
  }

  /* AI分析イラストエリア */
  .ai-analysis__illustration {
    width: 354px;
    height: 221px;
  }

  .ai-analysis__tablet {
    top: 65px;
    width: 212px;
    height: 139px;
  }

  /* バブル SP版 */
  .ai-analysis__bubble {
    padding: 8px 12px;
  }

  .ai-analysis__bubble-text {
    font-size: 11px;
  }

  .ai-analysis__bubble--history {
    top: 63px;
    left: 37px;
    width: 64px;
    height: 45px;
    border-radius: 22px 22px 22px 0;
  }

  .ai-analysis__bubble--time {
    top: 55px;
    right: 50px;
    width: 64px;
    height: 45px;
    border-radius: 22px 22px 0 22px;
  }

  .ai-analysis__bubble--content {
    top: 113px;
    right: 30px;
    width: 64px;
    height: 45px;
    border-radius: 22px 22px 0 22px;
  }

  .ai-analysis__bubble--proficiency {
    bottom: 32px;
    left: 55px;
    width: 78px;
    height: 45px;
    border-radius: 22px 22px 22px 0;
  }

  .ai-analysis__bubble--process {
    bottom: 32px;
    right: 70px;
    width: 78px;
    height: 45px;
    border-radius: 22px 22px 0 22px;
  }

  /* 生徒イラスト SP版 */
  .ai-analysis__student--female {
    left: 5px;
    width: 87px;
    height: 63px;
  }

  .ai-analysis__student--male {
    right: 0;
    width: 88px;
    height: 63px;
  }

  /* 理解・定着エリア SP版 */
  .ai-analysis__ai-section {
    padding: 35px 0 0;
  }

  .ai-analysis__ai-title {
    font-size: 19px;
    margin-bottom: 25px;
  }

  .ai-analysis__ai-title--pc {
    display: none;
  }

  .ai-analysis__ai-title--sp {
    display: inline;
  }

  .ai-analysis__ai-title::before {
    top: 18px;
    width: 242px;
  }

  .ai-analysis__ai-title::after {
    width: 322px;
  }

  /* ヘキサゴン SP版 */
  .ai-analysis__hexagons {
    gap: 15px;
    margin-bottom: 20px;
  }

  .ai-analysis__hexagon {
    width: 112px;
    height: 110px;
  }

  .ai-analysis__hexagon-label {
    font-size: 17px;
    margin-bottom: 3px;
  }

  .ai-analysis__hexagon-desc {
    font-size: 11px;
  }

  .ai-analysis__cross {
    width: 30px;
    height: 30px;
  }

  .ai-analysis__cross-icon {
    width: 20px;
    height: 20px;
  }

  .ai-analysis__cross-icon::before,
  .ai-analysis__cross-icon::after {
    width: 25px;
    height: 3px;
  }

  /* キュビナがアプローチ SP版 */
  .ai-analysis__approach {
    margin-top: 10px;
  }

  .ai-analysis__approach-logo {
    width: 89px;
  }

  .ai-analysis__approach-text {
    font-size: 14px;
  }

  /* ヘキサゴン＆キュビナがアプローチエリア SP版 */
  .ai-analysis__hexagon-approach {
    max-width: 340px;
    padding: 0 10px;
  }

  .ai-analysis__hexagon-approach-img {
    max-width: 100%;
  }

  /* 機能カード SP版 */
  .ai-analysis__features {
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 35px 30px 0;
  }

  .ai-analysis__feature-card {
    width: 306px;
    height: 264px;
    border-radius: 14px;
    padding: 15px;
  }

  .ai-analysis__feature-title {
    font-size: 15px;
    margin-bottom: 10px;
  }

  .ai-analysis__feature-image {
    width: 240px;
    height: auto;
    margin: 0 auto;
  }

  /* キャプション吹き出し SP版 */
  .ai-analysis__feature-caption-arrow {
    width: 26px;
    height: 30px;
    margin-bottom: -8px;
  }

  .ai-analysis__feature-caption-box {
    width: 159px;
    min-height: 48px;
    padding: 10px 8px;
    font-size: 12px;
    border-radius: 8px;
  }

  .ai-analysis__feature-caption--workbook {
    bottom: 13px;
    left: 147px;
  }

  .ai-analysis__feature-caption--workbook .ai-analysis__feature-caption-arrow {
    margin-left: 26px;
  }

  .ai-analysis__feature-caption--review {
    bottom: 18px;
    left: 130px;
  }

  .ai-analysis__feature-caption--review .ai-analysis__feature-caption-arrow {
    margin-left: 8px;
  }
}

/* ========================================
   セクション7: CTA
   ======================================== */

/* PC版 (デフォルト) */
.cta-section {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 83px 0 0;
  display: flex;
  justify-content: center;
}

.cta-section__inner {
  position: relative;
  width: 565px;
  text-align: center;
}

/* [7.1] ヘッダー */
.cta-section__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 7px;
}

.cta-section__header-text {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #212423;
}

.cta-section__header-text--pc {
  display: inline;
}

.cta-section__header-text--sp {
  display: none;
}

.cta-section__header-arrow {
  width: 28px;
  height: 37px;
}

.cta-section__header-arrow--right {
  transform: scaleX(-1);
}

/* [7.2] CTAボタン */
.cta-section__button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 565px;
  height: 139px;
  background: #FF6F5F;
  border-radius: 96.581px;
  box-shadow: 4.829px 4.829px 6.761px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.cta-section__button:hover {
  opacity: 0.85;
}

.cta-section__button-sub {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 31.78px;
  color: #FFFFFF;
  line-height: 1.2;
}

.cta-section__button-main {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 42.896px;
  color: #FFFFFF;
  line-height: 1.2;
}

/* お問い合わせリンク */
.cta-section__inquiry {
  margin-top: 16px;
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 24px;
  color: #212423;
  text-align: center;
}

.cta-section__inquiry--pc {
  display: inline;
}

.cta-section__inquiry--sp {
  display: none;
}

.cta-section__inquiry a {
  color: #00834C;
  text-decoration: underline;
}

.cta-section__inquiry a:hover {
  opacity: 0.7;
}

/* SP版 */
@media only screen and (max-width: 750px) {
  .cta-section {
    padding: 50px 12px 0;
  }

  .cta-section__inner {
    width: 306px;
    max-width: 100%;
    margin: 0 auto;
  }

  /* [7.1] ヘッダー SP版 */
  .cta-section__header {
    gap: 8px;
    margin-bottom: 12px;
  }

  .cta-section__header-text {
    font-size: 15px;
    line-height: 1.2;
    text-align: center;
  }

  .cta-section__header-text--pc {
    display: none;
  }

  .cta-section__header-text--sp {
    display: inline;
  }

  .cta-section__header-arrow {
    width: 12px;
    height: 20px;
  }

  /* [7.2] CTAボタン SP版 */
  .cta-section__button {
    width: 306px;
    height: 75px;
    border-radius: 52.308px;
    box-shadow: 2.615px 2.615px 3.662px rgba(0, 0, 0, 0.25);
  }

  .cta-section__button-sub {
    font-size: 17.212px;
  }

  .cta-section__button-main {
    font-size: 23.232px;
  }

  /* お問い合わせリンク SP版 */
  .cta-section__inquiry {
    margin-top: 12px;
    font-size: 13px;
  }

  .cta-section__inquiry--pc {
    display: none;
  }

  .cta-section__inquiry--sp {
    display: inline;
  }
}

/* ========================================
   セクション8: 25年度・26年度アップデート
   PC版: 左側に年度ヘッダー+UPDATEロゴ、右側にメインテキストの横並び
   
   Figma座標:
   - 左グループ: x:176-528, y:4655-4784
   - 右グループ: x:576-1166, y:4682-4819
   - 下線アクセント: x:573, y:4770, 440×12px
   ======================================== */

/* PC版 (デフォルト) */
.update-section {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 323px 0 0;
}

.update-section__inner {
  position: relative;
  width: 990px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: 45px; /* Figma: 左右グループ間の間隔 (573-528=45px) */
}

/* 左側: 年度ヘッダーとUPDATEロゴ */
.update-section__left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* 右側: メインテキスト */
.update-section__right {
  display: flex;
  align-items: center;
  padding-top: 27px; /* Figma: 4682-4655=27px のオフセット */
}

/* [8.1] 年度ヘッダー */
.update-section__year-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  margin-bottom: 5px;
}

.update-section__year-text {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 33.523px;
  color: #00CC88;
}

.update-section__arrow {
  width: 31px;
  height: 40px;
}

.update-section__arrow--right {
  transform: scaleX(-1);
}

/* [8.2] UPDATEグラフィック */
.update-section__logo {
  width: 352px;
  height: 69px;
}

.update-section__logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* [8.3] メインテキスト */
.update-section__main-text {
  position: relative;
  text-align: left;
}

.update-section__text-line1 {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 29.163px;
  color: #212423;
  margin: 0;
  line-height: 1.3;
}

.update-section__text-line2 {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 45px;
  color: #212423;
  margin: 0;
  line-height: 1.3;
  position: relative;
}

.update-section__text-line2::before {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 0;
  width: 440px;
  height: 12px;
  background: #CDF2E6;
  z-index: -1;
}

/* SP版 */
@media only screen and (max-width: 750px) {
  .update-section {
    padding: 180px 12px 0;
  }

  .update-section__inner {
    width: 335px;
    max-width: 100%;
    margin: 0 auto;
    flex-direction: column;
    align-items: center;
    gap: 30px; /* Figma: UPDATEロゴ下端→メインテキスト上端 約30.4px */
  }

  /* 左側: SP版では中央揃え */
  .update-section__left {
    align-items: center;
  }

  /* 右側: SP版ではパディングリセット */
  .update-section__right {
    padding-top: 0;
  }

  /* [8.1] 年度ヘッダー SP版 */
  .update-section__year-header {
    justify-content: center;
    gap: 3px;
    margin-bottom: 11px; /* Figma: 年度ヘッダー下端→UPDATEロゴ上端 約10.8px */
  }

  .update-section__year-text {
    font-size: 21.508px;
  }

  .update-section__arrow {
    width: 19.734px;
    height: 25.81px;
  }

  /* [8.2] UPDATEグラフィック SP版 */
  .update-section__logo {
    width: 226px;
    height: 44px;
  }

  /* [8.3] メインテキスト SP版 */
  .update-section__main-text {
    text-align: center;
  }

  .update-section__text-line1 {
    font-size: 18.711px;
  }

  .update-section__text-line2 {
    font-size: 28.872px;
  }

  .update-section__text-line2::before {
    width: 280px;
    height: 7px;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ========================================
   セクション9: キュビナテスト
   ======================================== */

/* PC版 (デフォルト) */
.qubena-test {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 90px 0 0;
}

.qubena-test__inner {
  position: relative;
  width: 1000px;
  margin: 0 auto;
}

/* [9.1] UPDATEグラフィック */
.qubena-test__update {
  position: absolute;
  left: 57px;
  top: 0;
  width: 184px;
  height: 36px;
  transform: rotate(-12deg);
  z-index: 2;
}

.qubena-test__update-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* [9.2] ヘッダー */
.qubena-test__header {
  position: relative;
  width: 100%;
  height: 72px;
  background: linear-gradient(90deg, #F9B816 0%, #FFC83E 100%);
  border-radius: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

.qubena-test__header-text {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 34px;
  color: #212423;
  margin: 0;
}

/* ヘッダー下の下向き矢印 */
.qubena-test__header-arrow-wrapper {
  display: flex;
  justify-content: center;
}

.qubena-test__header-arrow {
  width: 23px;
  height: 23px;
}

/* [9.3] コンテンツエリア */
.qubena-test__content {
  display: flex;
  gap: 20px;
  padding: 0 57px;
  align-items: flex-start;
}

/* 左側: テキストエリア */
.qubena-test__text-area {
  flex: 0 0 auto;
  width: 416px;
}

/* 年度バッジ */
.qubena-test__badge {
  display: inline-block;
  background: #F4F3F3;
  border-radius: 13px;
  padding: 3px 12px;
  margin-bottom: 5px;
}

.qubena-test__badge-text {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #000000;
}

/* ロゴ+バッジ ラッパー（PC版は透過） */
.qubena-test__logo-badge-wrapper {
  /* PC版では特別なスタイル不要 */
}

/* ロゴ */
.qubena-test__logo {
  width: 320px;
  height: 50px;
  margin-bottom: 10px;
}

.qubena-test__logo-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

/* サブタイトル */
.qubena-test__subtitle {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #00CC88;
  margin: 0 0 8px;
  line-height: 1.5;
}

/* 装飾点 */
.qubena-test__dots {
  display: flex;
  gap: 18.6px;
  margin-bottom: 1px; /* Figma: 装飾点下端5115.275px、キャッチコピー上端5116px = 約0.7px */
  margin-left: 191.5px; /* Figma: 装飾点x=380.5 - キャッチコピーx=189 */
  line-height: 0;
}

.qubena-test__dot {
  width: 7.3px;
  height: 7.3px;
  background: #00CC88;
  border-radius: 50%;
}

/* キャッチコピー */
.qubena-test__catchcopy {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 25.775px;
  color: #202423;
  line-height: 1.4;
  margin: 0 0 15px;
}

.qubena-test__catchcopy--pc {
  display: inline;
}

.qubena-test__catchcopy--sp {
  display: none;
}

/* 説明テキスト */
.qubena-test__description {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: #231815;
  line-height: 1.5;
  margin: 0;
}

.qubena-test__description--pc {
  display: inline;
}

.qubena-test__description--sp {
  display: none;
}

/* 右側: 画像エリア */
.qubena-test__image-area {
  position: relative;
  flex: 0 0 auto;
  margin-top: 80px; 
}

.qubena-test__screen {
  width: 401px;
  height: 269px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

.qubena-test__screen-img {
  width: 100%;
  height: 100%;
}

.qubena-test__new-badge {
  position: absolute;
  top: -25px;
  right: -42px; /* Figma座標: NEW!バッジ left:885px - (スクリーンショット left:493px + width:448px) = -56px → 調整 */
  width: 73px;
  height: 73px;
  background: #FF6F5F;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qubena-test__new-text {
  font-family: 'DIN Alternate', sans-serif;
  font-weight: 700;
  font-size: 17.01px;
  color: #FFFFFF;
  letter-spacing: 0.1em;
}

/* SP版 */
@media only screen and (max-width: 750px) {
  .qubena-test {
    padding: 40px 12px 0;
  }

  .qubena-test__inner {
    width: 366px;
    max-width: 100%;
    margin: 0 auto;
  }

  /* [9.1] UPDATEグラフィック SP版
     Figma: 84.63×32.77px, left:29px(44-15), top:16.9px, rotate(-11.75deg) */
  .qubena-test__update {
    left: 29px;
    top: -12px;
    width: 83px;
    height: 16px;
    transform: rotate(-11.75deg);
  }

  /* [9.2] ヘッダー SP版
     Figma: 366×32px, border-radius:16px, text:19px */
  .qubena-test__header {
    height: 32px;
    border-radius: 16px;
    margin-bottom: 0;
  }

  .qubena-test__header-text {
    font-size: 19px;
  }

  /* ヘッダー下の下向き矢印 SP版
     Figma: 8.24×8.39px */
  .qubena-test__header-arrow-wrapper {
    margin-bottom: 12px;
  }

  .qubena-test__header-arrow {
    width: 8.24px;
    height: 8.39px;
  }

  /* [9.3] コンテンツエリア SP版 */
  .qubena-test__content {
    flex-direction: column;
    align-items: center; /* 子要素を水平中央に */
    gap: 20px;
    padding: 0;
  }

  /* テキストエリア SP版
     各要素はそれぞれ独自の水平位置を持つ（中央ブロック + 個別text-align） */
  /* テキストエリア SP版: テキストが上、画像が下 */
  .qubena-test__text-area {
    width: 100%;
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* ロゴ+バッジ ラッパー SP版
     バッジはロゴ上に重ねる特殊配置のため、相対位置指定 */
  .qubena-test__logo-badge-wrapper {
    position: relative;
    width: 315px;
    margin-bottom: 8px;
  }

  /* 年度バッジ SP版
     Figma: 147.45×21.3px, 左右中央揃え */
  .qubena-test__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 0 10px;
    margin-bottom: 3px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 10.65px;
  }

  .qubena-test__badge-text {
    font-size: 12.3px;
  }

  /* ロゴ SP版
     Figma: 315.12×92.64px, ≈中央 (Left:25px / Right:25.88px) */
  .qubena-test__logo {
    width: 265px;
    height: 50px;
    margin-bottom: 0; /* ラッパーがmargin-bottomを担当 */
    margin-left: 25px;
  }

  .qubena-test__logo-img {
    object-position: center center; /* SP版は中央揃え */
  }

  /* サブタイトル SP版
     Figma: 310×19px, 13px, #00CC88
     ≈中央 (Left:30px / Right:26px), text-center */
  .qubena-test__subtitle {
    font-size: 13px;
    margin: 0 0 6px;
    text-align: center;
    width: 310px;
    max-width: 100%;
  }

  /* 装飾点 SP版
     Figma: 各5.96×5.96px
     キャッチコピーブロック(228px)内の右寄りに配置
     幅を228px（キャッチコピーと同幅）にして中央配置、内部でmargin-leftでオフセット */
  .qubena-test__dots {
    width: 228px; /* キャッチコピーと同幅にして中央配置を揃える */
    gap: 15.27px;
    margin-bottom: 2px;
    margin-left: 0; /* PC版のmargin-left:191.5pxをリセット */
    padding-left: 139px; /* Figma: 装飾点x=223.97 - キャッチコピーx=85 */
    line-height: 0;
    box-sizing: border-box;
  }

  .qubena-test__dot {
    width: 5.96px;
    height: 5.96px;
  }

  /* キャッチコピー SP版
     Figma: 228×48px, 19px
     ≈中央 (Left:70px / Right:68px), text-center */
  .qubena-test__catchcopy {
    font-size: 19px;
    margin-bottom: 10px;
    text-align: center;
    width: 228px;
    max-width: 100%;
  }

  .qubena-test__catchcopy--pc {
    display: none;
  }

  .qubena-test__catchcopy--sp {
    display: inline;
  }

  /* 説明テキスト SP版
     Figma: 305×138px, 15px
     ≈中央ブロック (Left:30px / Right:31px), ⚠️ text-left */
  .qubena-test__description {
    font-size: 15px;
    text-align: left;
    width: 305px;
    max-width: 100%;
  }

  .qubena-test__description--pc {
    display: none;
  }

  .qubena-test__description--sp {
    display: inline;
  }

  /* 画像エリア SP版
     image-areaが位置基準（position:relativeはPC版から継承）
     NEW!バッジがはみ出すためoverflow:visible */
  .qubena-test__image-area {
    order: 2; /* テキスト(order:1)の後に配置 */
    display: flex;
    justify-content: center;
    overflow: visible;
    margin-top: 0; /* PC版のmargin-top:50pxをリセット */
  }

  /* スクリーン SP版
     Figma: 304.7×203.83px, ≈中央 (Left:30px / Right:31.3px)
     shadow:3.17px */
  .qubena-test__screen {
    width: 304.7px;
    height: 203.83px;
    box-shadow: 0px 3.17px 3.17px rgba(0, 0, 0, 0.25);
  }

  /* NEW!バッジ SP版
     Figma: 55.47×55.47px
     位置基準: image-area (366px幅, position:relative)
     バッジ右端: コンテナ右端から約4.7px内側
     スクリーン上端から4px上 */
  .qubena-test__new-badge {
    top: -5px;
    right: -25px; 
    width: 55.47px;
    height: 55.47px;
  }

  /* NEW!テキスト SP版
     Figma: 12.925px */
  .qubena-test__new-text {
    font-size: 12.925px;
  }
}

/* ========================================
   セクション10: 特徴1 カラーテスト・単元テスト代替
   
   PC版座標基準: y: 5395
   - 内部コンテナ: 1000px × 600px
   - 特徴バッジ: top:4px, left:115px, 96.35×96.35px
   - タイトル: top:42px, left:218px, 570×38px
   - タイトル下線: top:71px, left:218px, 562×8px
   - 説明文: top:98px, left:113px, 775×26px
   - 緑ピル: top:162px
   - スクリーンショット左: top:279px, left:99px, 380×238px
   - スクリーンショット右: top:281px, left:525px, 383×238px
   ======================================== */

/* PC版 (デフォルト) */
.feature-section {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 45px 0 0;
}

.feature-section__inner {
  position: relative;
  width: 1000px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 4px solid #00CC88;
  border-radius: 20px;
}

/* [10.1] 特徴バッジ: top:4px, left:115px, 96.35×96.35px */
/* 緑色の吹き出し形状（右下に三角矢印付き） */
.feature-section__badge {
  position: absolute;
  top: 4px;
  left: 115px;
  width: 96.35px;
  height: 96.35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* 吹き出しの丸部分 - オレンジ色、Figmaでは73×73px */
.feature-section__badge::before {
  content: '';
  position: absolute;
  width: 73px;
  height: 73px;
  background: linear-gradient(135deg, #F9B816 0%, #FFC83E 100%);
  border-radius: 50%;
  z-index: -1;
}

/* 吹き出しの三角矢印（右下向き） - オレンジ色 */
.feature-section__badge::after {
  content: '';
  position: absolute;
  bottom: 20px;
  right: 7px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 25px solid #FFC83E;
  z-index: -1;
  transform: rotate(45deg);
}

.feature-section__badge-label {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #212423;
}

.feature-section__badge-number {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: #212423;
  line-height: 1;
}

/* [10.2] タイトルエリア */
.feature-section__title-wrapper {
  position: absolute;
  top: 42px;
  left: 218px;
  width: 570px;
  height: 38px;
}

/* タイトル下線背景: top:71px, left:218px, 562×8px */
.feature-section__title-bg {
  position: absolute;
  background: #CDF2E6;
  z-index: 0;
}

.feature-section__title-bg--line1 {
  bottom: 0;
  left: 0;
  width: 562px;
  height: 8px;
}

.feature-section__title-bg--line2 {
  display: none; /* PC版では2行目の下線は不要 */
}

.feature-section__title {
  position: relative;
  z-index: 1;
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: #212423;
  text-align: center;
  margin: 0;
  line-height: 1.3;
}

.feature-section__title--pc {
  display: inline;
}

.feature-section__title--sp {
  display: none;
}

/* [10.3] 説明文: top:98px, left:113px, 775×26px */
.feature-section__description {
  position: absolute;
  top: 98px;
  left: 113px;
  width: 775px;
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: #231815;
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

/* [10.4] 特徴ピル: top:162px */
.feature-section__pills {
  position: absolute;
  top: 162px;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
}

/* ピル1: left:142px, 266.22×84.72px */
.feature-section__pill {
  background: linear-gradient(135deg, #00CC88 0%, #00CC88 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.feature-section__pill--1 {
  width: 266.22px;
  height: 84.72px;
  margin-left: 42px; /* 調整: left:142px - (中央配置考慮) */
}

/* ピル2: 172×85px */
.feature-section__pill--2 {
  width: 172px;
  height: 85px;
}

/* ピル3: 132×85px */
.feature-section__pill--3 {
  width: 132px;
  height: 85px;
  margin-right: 68px; /* 調整: 右余白 */
}

.feature-section__pill-text {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #FFFFFF;
  line-height: 1.3;
  text-align: center;
}

/* ×マーク: 34.82×34.81px */
.feature-section__x-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34.82px;
  height: 34.81px;
  flex-shrink: 0;
  margin: 0 15px;
}

.feature-section__x-mark svg {
  width: 100%;
  height: 100%;
}

/* [10.5] スクリーンショット */
.feature-section__screenshots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* スクリーンショット左: top:279px, left:99px, 380×238px */
.feature-section__screenshot--1 {
  position: absolute;
  top: 279px;
  left: 99px;
  width: 380px;
  height: 238px;
}

/* スクリーンショット右: top:281px, left:525px, 383×238px */
.feature-section__screenshot--2 {
  position: absolute;
  top: 281px;
  left: 525px;
  width: 383px;
  height: 238px;
}

.feature-section__screenshot-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}

/* キャプション共通 */
.feature-section__caption {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.feature-section__caption-arrow {
  flex-shrink: 0;
  margin-bottom: -5px;
}

.feature-section__caption-box {
  background: #CDF2E6;
  border-radius: 10px;
  padding: 10px 15px;
  position: relative;
  z-index: 10;
}

.feature-section__caption-box span {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #212423;
  line-height: 1.3;
  text-align: center;
  display: block;
}

/* キャプション左: 矢印top:482px, ボックスtop:500px, left:129px, 146×56px */
.feature-section__caption--left {
  top: 183px; /* スクリーンショットからの相対位置: 調整済み */
  left: 30px; /* 129-99=30 */
  flex-direction: column-reverse; /* ボックスが上、矢印が下 */
}

.feature-section__caption--left .feature-section__caption-arrow {
  transform: rotate(20deg); /* 左下方向を指す */
  align-self: flex-end;
  margin-top: -5px;
  margin-right: 95px;
  margin-bottom: 0;
  position: relative;
  top: 15px; /* 矢印だけ下に移動 */
}

.feature-section__caption--left .feature-section__caption-box {
  width: 146px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* キャプション中央: 矢印top:470px, ボックスtop:488px, left:406px, 194×56px */
/* スクリーンショット2からの相対位置: top: 470-281=189, left: 406-525=-119 */
.feature-section__caption--center {
  top: 169px; /* 調整済み */
  left: -119px;
  flex-direction: column-reverse; /* ボックスが上、矢印が下 */
}

.feature-section__caption--center .feature-section__caption-arrow {
  transform: rotate(-20deg); /* 左上方向を指す */
  align-self: flex-start;
  margin-top: -5px;
  margin-left: 20px;
  margin-bottom: 0;
  position: relative;
  top: 15px; /* 矢印だけ下に移動 */
}

.feature-section__caption--center .feature-section__caption-box {
  width: 194px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* キャプション右: 矢印top:475px, ボックスtop:493px, left:677px, 120×56px */
/* スクリーンショット2からの相対位置: top: 475-281=194, left: 677-525=152 */
.feature-section__caption--right {
  top: 175px; /* 調整済み */
  left: 152px;
  flex-direction: column-reverse; /* ボックスが上、矢印が下 */
}

.feature-section__caption--right .feature-section__caption-arrow {
  transform: rotate(-20deg); /* 左上方向を指す */
  align-self: flex-start;
  margin-top: -5px;
  margin-left: 10px;
  margin-bottom: 0;
  position: relative;
  top: 15px; /* 矢印だけ下に移動 */
}

.feature-section__caption--right .feature-section__caption-box {
  width: 120px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 特徴1用の調整 */
.feature-section--1 .feature-section__inner {
  height: 600px;
}

/* ========================================
   セクション11: 特徴2 サービス上で完結
   
   PC版座標基準: y: 6040
   - 内部コンテナ: 1000px × 353px
   - 特徴バッジ: top:0, left:97px
   - タイトル: top:42px, left:195px
   - タイトル下線: top:71px, left:195px
   - 説明文: top:98px, left:177px
   - ワークフローピル: top:161px, left:72px
   - キャプション左: top:243px, left:120px
   - キャプション右: top:243px, left:483px
   - 先生イラスト: top:197px, left:770px
   ======================================== */

/* 特徴2用の調整 */
.feature-section--2 .feature-section__inner {
  position: relative;
  width: 1000px;
  height: 353px;
  margin: 0 auto;
  background: #FFFFFF;
  border: 4px solid #00CC88;
  border-radius: 20px;
  padding: 0; /* 絶対配置のためpadding不要 */
}

/* [11.1] 特徴バッジ（オレンジ丸）: top:0, left:97px */
.feature-section--2 .feature-section__badge {
  position: absolute;
  top: 0px;
  left: 97px;
  width: 96.35px;
  height: 96.35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* 吹き出しの丸部分 - オレンジ色、73×73px */
.feature-section--2 .feature-section__badge::before {
  content: '';
  position: absolute;
  width: 73px;
  height: 73px;
  background: linear-gradient(135deg, #F9B816 0%, #FFC83E 100%);
  border-radius: 50%;
  z-index: -1;
}

/* 吹き出しの三角矢印（右下向き） */
.feature-section--2 .feature-section__badge::after {
  content: '';
  position: absolute;
  bottom: 20px;
  right: 7px;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 25px solid #FFC83E;
  z-index: -1;
  transform: rotate(45deg);
}

/* [11.2] タイトルエリア: top:42px, left:195px */
.feature-section--2 .feature-section__title-wrapper {
  position: absolute;
  top: 42px;
  left: 195px;
  width: 610px;
  height: 38px;
}

/* タイトル下線: top:71px, left:195px, 602×8px */
.feature-section--2 .feature-section__title-bg--line1 {
  position: absolute;
  top: 29px; /* 71-42=29px from title wrapper */
  left: 0;
  width: 602px;
  height: 8px;
  background: #CDF2E6;
  z-index: 0;
}

/* SP版で2行目の下線用 */
.feature-section--2 .feature-section__title-bg--line2 {
  display: none;
}

.feature-section--2 .feature-section__title {
  position: relative;
  z-index: 1;
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: #212423;
  text-align: center;
  margin: 0;
  line-height: 1.3;
}

.feature-section--2 .feature-section__title--pc {
  display: inline;
}

.feature-section--2 .feature-section__title--sp {
  display: none;
}

/* [11.3] 説明文: top:98px, left:177px */
.feature-section--2 .feature-section__description {
  position: absolute;
  top: 98px;
  left: 177px;
  width: 641px;
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: #231815;
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

/* [11.4] ワークフローピル群: top:161px, left:72px */
.feature-section--2 .feature-section__workflow {
  position: absolute;
  top: 161px;
  left: 72px;
  display: flex;
  flex-direction: row;
  gap: 10px; /* Figma: ステップ間の空白 */
}

/* 各ワークフローステップ（五角形：左端直線、右端尖り） */
.feature-section--2 .feature-section__workflow-step {
  position: relative;
  width: 142px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #00CC88;
  /* 五角形: 左端直線、右端尖り */
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
}

.feature-section--2 .feature-section__workflow-step--first {
  /* 最初のステップも五角形（左端直線、右端尖り） */
  clip-path: polygon(0 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 0 100%);
}

.feature-section--2 .feature-section__workflow-step--last {
  width: 137px;
  /* 最後のステップは四角形 */
  clip-path: none;
  border-radius: 0 5px 5px 0;
}

.feature-section--2 .feature-section__workflow-step span {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 18.426px;
  color: #FFFFFF;
  text-align: center;
}

/* [11.5] キャプション群 */
.feature-section--2 .feature-section__captions {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* キャプション共通 */
.feature-section--2 .feature-section__caption {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* キャプションボックス */
.feature-section--2 .feature-section__caption-box {
  background: #CDF2E6;
  border-radius: 10px;
  padding: 10px 10px;
  position: relative;
  z-index: 10;
  width: 291px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-section--2 .feature-section__caption-box span {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #212423;
  line-height: 1.3;
  text-align: center;
}

/* キャプション矢印共通 */
.feature-section--2 .feature-section__caption-arrow {
  width: 32.41px;
  height: 36.22px;
}

/* キャプション左: top:220px, left:120px - ワークフローに近づける */
.feature-section--2 .feature-section__caption--left {
  top: 220px;
  left: 120px;
  flex-direction: column-reverse; /* ボックスが上、矢印が下 */
}

.feature-section--2 .feature-section__caption--left .feature-section__caption-arrow {
  transform: rotate(20deg);
  align-self: flex-end;
  margin-top: -8px;
  margin-right: 100px;
  position: relative;
  z-index: 1;
}

/* キャプション右: top:220px, left:483px - ワークフローに近づける */
.feature-section--2 .feature-section__caption--right {
  top: 220px;
  left: 483px;
  flex-direction: column-reverse; /* ボックスが上、矢印が下 */
}

.feature-section--2 .feature-section__caption--right .feature-section__caption-arrow {
  transform: rotate(-20deg);
  align-self: flex-start;
  margin-top: -8px;
  margin-left: 30px;
  position: relative;
  z-index: 1;
}

/* [11.6] 先生イラスト: top:155px, left:770px - 枠線にかからないよう上に調整 */
.feature-section--2 .feature-section__teacher-img {
  position: absolute;
  top: 193px;
  left: 770px;
  width: 200px;
  height: 152px;
}

.feature-section--2 .feature-section__teacher-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ========================================
   セクション10: SP版 (750px以下)
   
   SP版座標基準: y: 5330.24
   - コンテナ: 366px × 838px
   - バッジ: top:9px, left:4px, 57×57px
   - タイトル: top:25px, left:48px, 273×48px
   - 説明文: top:94px, left:31px, 305×69px
   - ピル: 縦並び, top:181px
   - スクリーンショット1: top:455px, 231.34×144.72px
   - スクリーンショット2: top:656px, 233.11×144.75px
   ======================================== */
@media only screen and (max-width: 750px) {
  .feature-section {
    padding: 30px 12px 0;
  }

  .feature-section__inner {
    width: 366px;
    max-width: 100%;
    margin: 0 auto;
    border-width: 3px;
    border-radius: 15px;
  }

  /* [10.1] 特徴バッジ: top:9px, left:4px, 57×57px */
  .feature-section__badge {
    top: 9px;
    left: 4px;
    width: 57px;
    height: 57px;
  }

  .feature-section__badge::before {
    width: 43.2px;
    height: 43.2px;
  }

  .feature-section__badge::after {
    bottom: 10px;
    right: 6px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 15px solid #FFC83E;
  }

  .feature-section__badge-label {
    font-size: 7.865px;
  }

  .feature-section__badge-number {
    font-size: 16.854px;
  }

  /* [10.2] タイトル: top:25px, left:48px, 273×48px */
  .feature-section__title-wrapper {
    position: absolute;
    top: 25px;
    left: 48px;
    width: 273px;
    height: 48px;
  }

  /* SP版タイトル下線: 2行表示 */
  .feature-section__title-bg--line1 {
    top: 16px; /* 1行目下線: top:41-25=16px */
    left: 14px; /* 62-48=14px */
    width: 244px;
    height: 7px;
  }

  .feature-section__title-bg--line2 {
    display: block;
    top: 41px; /* 2行目下線: top:66-25=41px */
    left: 79px; /* 127-48=79px */
    width: 109px;
    height: 7px;
  }

  .feature-section__title {
    font-size: 19px;
    line-height: 1.3;
  }

  .feature-section__title--pc {
    display: none;
  }

  .feature-section__title--sp {
    display: inline;
  }

  /* [10.3] 説明文: top:94px, left:31px, 305×69px */
  .feature-section__description {
    position: absolute;
    top: 94px;
    left: 31px;
    width: 305px;
    height: auto;
    font-size: 15px;
    text-align: left;
  }

  /* [10.4] ピル: 縦並び, top:181px */
  .feature-section__pills {
    position: absolute;
    top: 181px;
    left: 0;
    width: 100%;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  /* SP版ピル: 175.22×55.76px */
  .feature-section__pill {
    border-radius: 7px;
  }

  .feature-section__pill--1 {
    width: 175.22px;
    height: 55.76px;
    margin-left: 0;
  }

  .feature-section__pill--2 {
    width: 175px;
    height: 56px;
  }

  .feature-section__pill--3 {
    width: 175px;
    height: 56px;
    margin-right: 0;
  }

  .feature-section__pill-text {
    font-size: 13.164px;
  }

  /* SP版×マーク: 22.92×22.91px */
  .feature-section__x-mark {
    width: 22.92px;
    height: 22.91px;
    margin: 8px 0;
  }

  /* [10.5] スクリーンショット */
  .feature-section__screenshots {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* スクリーンショット1: top:455px, left:65px, 231.34×144.72px */
  .feature-section__screenshot--1 {
    position: absolute;
    top: 450px;
    left: 65px;
    width: 231.34px;
    height: 144.72px;
  }

  /* スクリーンショット2: top:656px, left:63.32px, 233.11×144.75px */
  .feature-section__screenshot--2 {
    position: absolute;
    top: 650px;
    left: 63.32px;
    width: 233.11px;
    height: 144.75px;
  }

  .feature-section__screenshot-img {
    box-shadow: 0px 2.434px 2.434px rgba(0, 0, 0, 0.25);
  }

  /* SP版キャプション共通 */
  .feature-section__caption-arrow {
    width: 28.35px;
    height: 31.69px;
  }

  .feature-section__caption--left .feature-section__caption-arrow {
    margin-right: 85px;
  }


  .feature-section__caption-box {
    border-radius: 8px;
    padding: 8px 12px;
  }

  .feature-section__caption-box span {
    font-size: 12.247px;
  }

  .feature-section__caption--left {
    top: 105px;
    left: -28px;
  }

  .feature-section__caption--left .feature-section__caption-box {
    width: 127.72px;
    height: 48.99px;
  }

  .feature-section__caption--center {
    top: -95px;
    left: 117.68px;
  }

  .feature-section__caption--center .feature-section__caption-box {
    width: 169.71px;
    height: 48.99px;
  }

  .feature-section__caption--right {
    top: 90px;
    left: 121.68px;
  }

  .feature-section__caption--right .feature-section__caption-box {
    width: 104.98px;
    height: 48.99px;
  }

  /* 特徴1用: SP版カード高さ 838px */
  .feature-section--1 .feature-section__inner {
    height: 838px;
  }

  /* ========================================
     セクション11: 特徴2 SP版
     
     SP版座標基準: y: 6189.24
     - コンテナ: 366px × 432px
     - バッジ: top:12px, left:8px, 57×57px
     - タイトル: top:32px, left:47px, 273×48px
     - タイトル下線1: top:48px, left:76px, 214×7px
     - タイトル下線2: top:74px, left:102px, 162×7px
     - 説明文: top:103px, left:30px, 305×46px
     - ワークフローピル: top:242px, left:69px, 縦並び
     - キャプション上: top:174px, left:60px
     - キャプション下: top:349px, left:60px
     - 先生イラスト: top:360px, left:264px, 91.77×69.75px
     ======================================== */
  
  /* 特徴2用の調整 */
  .feature-section--2 .feature-section__inner {
    width: 366px;
    max-width: 100%;
    height: 432px;
    border-width: 3px;
    border-radius: 15px;
    padding: 0;
  }

  /* [11.1] 特徴バッジ: top:12px, left:8px, 57×57px */
  .feature-section--2 .feature-section__badge {
    top: 12px;
    left: 8px;
    width: 57px;
    height: 57px;
  }

  .feature-section--2 .feature-section__badge::before {
    width: 43.2px;
    height: 43.2px;
  }

  .feature-section--2 .feature-section__badge::after {
    bottom: 10px;
    right: 6px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 15px solid #FFC83E;
  }

  .feature-section--2 .feature-section__badge-label {
    font-size: 7.865px;
  }

  .feature-section--2 .feature-section__badge-number {
    font-size: 16.854px;
  }

  /* [11.2] タイトルエリア: top:32px, left:47px, 273×48px */
  .feature-section--2 .feature-section__title-wrapper {
    top: 32px;
    left: 47px;
    width: 273px;
    height: 48px;
  }

  /* SP版タイトル下線1（1行目）: top:48px, left:76px, 214×7px */
  .feature-section--2 .feature-section__title-bg--line1 {
    top: 16px; /* 48-32=16px from title wrapper */
    left: 29px; /* 76-47=29px from title wrapper */
    width: 214px;
    height: 7px;
  }

  /* SP版タイトル下線2（2行目）: top:74px, left:102px, 162×7px */
  .feature-section--2 .feature-section__title-bg--line2 {
    display: block;
    position: absolute;
    top: 42px; /* 74-32=42px from title wrapper */
    left: 55px; /* 102-47=55px from title wrapper */
    width: 162px;
    height: 7px;
    background: #CDF2E6;
    z-index: 0;
  }

  .feature-section--2 .feature-section__title {
    font-size: 19px;
    line-height: 1.3;
  }

  .feature-section--2 .feature-section__title--pc {
    display: none;
  }

  .feature-section--2 .feature-section__title--sp {
    display: inline;
  }

  /* [11.3] 説明文: top:103px, left:30px, 305×46px */
  .feature-section--2 .feature-section__description {
    top: 103px;
    left: 30px;
    width: 305px;
    font-size: 15px;
  }

  /* [11.4] ワークフローピル群: top:242px, left:69px, 縦並び */
  .feature-section--2 .feature-section__workflow {
    top: 242px;
    left: 69px;
    flex-direction: row;
    gap: 6px; /* Figma: SP版ステップ間の空白 */
  }

  /* SP版ワークフローステップ: 五角形（左端直線、右端尖り）, 42×87px */
  .feature-section--2 .feature-section__workflow-step {
    width: 42px;
    height: 87px;
    /* 五角形: 左端直線、右端尖り（横向き） */
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
    margin-left: 0;
    margin-top: 0;
  }

  .feature-section--2 .feature-section__workflow-step--first {
    margin-left: 0;
    /* 最初のステップも五角形（左端直線、右端尖り） */
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
  }

  .feature-section--2 .feature-section__workflow-step--last {
    width: 33px;
    /* 最後のステップは四角形 */
    clip-path: none;
    border-radius: 0 5px 5px 0;
  }

  .feature-section--2 .feature-section__workflow-step span {
    font-size: 13.723px;
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }

  /* [11.5] キャプション群 - SP版では上下に配置 */
  .feature-section--2 .feature-section__captions {
    z-index: 1;
  }

  .feature-section--2 .feature-section__caption-box {
    width: 240px;
    height: 46.54px;
  }

  .feature-section--2 .feature-section__caption-box span {
    font-size: 12px;
  }

  .feature-section--2 .feature-section__caption-arrow {
    width: 27.9px;
    height: 28.69px;
  }

  /* キャプション上: top:174px, left:60px - パターンB（BOX上、ARROW下） */
  /* HTML順序: BOX→ARROW なので column で自然順 = BOX上、ARROW下 */
  .feature-section--2 .feature-section__caption--left {
    top: 174px;
    left: 60px;
    flex-direction: column;
  }

  .feature-section--2 .feature-section__caption--left .feature-section__caption-arrow {
    transform: scaleY(-1) rotate(-35deg);
    align-self: flex-start;
    margin-top: -20px;
    margin-right: 0;
    margin-left: 80px;
    top: 10px;
  }

  .feature-section--2 .feature-section__caption--right {
    top: 325px;
    left: 60px;
    flex-direction: column-reverse;
  }

  .feature-section--2 .feature-section__caption--right .feature-section__caption-arrow {
    transform: rotate(20deg);
    align-self: flex-start;
    margin-top: -5px;
    margin-left: 120px;
    top: 10px;
  }

  /* [11.6] 先生イラスト */
  .feature-section--2 .feature-section__teacher-img {
    top: 356px;
    left: 264px;
    width: 91.77px;
    height: 69.75px;
    z-index: 2;
  }
}

/* ========================================
   セクション12: オプションサービス
   ======================================== */

/* PC版 (デフォルト) */
.option-service {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 70px 0 0;
}

.option-service__inner {
  width: 729px;
  height: 141px;
  margin: 0 auto;
  background: #F4F3F3;
  border-radius: 15px;
  display: flex;
  align-items: center;
  padding: 0 30px 0 37px;
  gap: 40px;
  box-sizing: border-box;
}

/* 左側ブロック: ヘッダー + バッジが縦並び */
.option-service__left-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  width: 140px;
}

/* ヘッダー部分（装飾線付き） */
.option-service__header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.option-service__deco-left,
.option-service__deco-right {
  width: 6px;
  height: 22px;
  flex-shrink: 0;
}

.option-service__header-text {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 12.763px;
  color: #00CC88;
  text-align: center;
  line-height: 1.4;
}

/* バッジ */
.option-service__badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 113px;
  height: 77px;
}

.option-service__badge-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.option-service__badge-text {
  position: relative;
  z-index: 1;
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 15.64px;
  color: #00CC88;
  text-align: center;
  line-height: 1.4;
}

/* 右側ブロック: 説明テキスト */
.option-service__right-block {
  flex: 1;
}

.option-service__description {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #1F2322;
  line-height: 1.5;
  margin: 0;
}

/* SP版: 750px以下 */
@media only screen and (max-width: 750px) {
  .option-service {
    padding: 30px 12px 0;
  }

  .option-service__inner {
    width: 100%;
    max-width: 366px;
    height: 101px;
    border-radius: 7.531px;
    padding: 0 12px 0 15px;
    gap: 15px;
    transform: none;
  }

  .option-service__left-block {
    width: 92px;
    gap: 3px;
  }

  .option-service__header {
    gap: 3px;
  }

  .option-service__deco-left,
  .option-service__deco-right {
    width: 4px;
    height: 16px;
  }

  .option-service__header-text {
    font-size: 9.31px;
  }

  .option-service__badge {
    width: 82px;
    height: 56px;
  }

  .option-service__badge-text {
    font-size: 11.409px;
  }

  .option-service__description {
    font-size: 12px;
  }
}

/* ========================================
   セクション13: 見取り機能ヘッダー
   ======================================== */

/* PC版 (デフォルト) */
.mitori-header {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 190px 0 0;
}

.mitori-header__inner {
  position: relative;
  width: 1000px;
  margin: 0 auto;
}

/* UPDATEグラフィック */
.mitori-header__update {
  position: absolute;
  left: 55px;
  top: 0;
  width: 184px;
  height: 36px;
  transform: rotate(-12deg);
}

.mitori-header__update-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* タイトル */
.mitori-header__title-wrapper {
  width: 100%;
  height: 72px;
  background: linear-gradient(90deg, #F9B816 0%, #FFC83E 100%);
  border-radius: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

/* ヘッダー下の下向き矢印（セクション9と同様） */
.mitori-header__arrow-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.mitori-header__arrow {
  width: 23px;
  height: 23px;
}

.mitori-header__title {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 34px;
  color: #212423;
  margin: 0;
}

/* サブテキスト */
.mitori-header__subtitle {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #212423;
  text-align: center;
  line-height: 1.3;
  margin: 0;
}

/* SP版 */
@media only screen and (max-width: 750px) {
  .mitori-header {
    padding: 100px 12px 0;
  }

  .mitori-header__inner {
    width: 366px;
    max-width: 100%;
    margin: 0 auto;
  }

  .mitori-header__update {
    left: 20px;
    width: 100px;
    height: 20px;
    top: -10px;
  }

  .mitori-header__title-wrapper {
    height: 58px;
    border-radius: 28px;
    margin-bottom: 0;
  }

  /* ヘッダー下の下向き矢印 SP版 */
  .mitori-header__arrow-wrapper {
    margin-bottom: 3px;
  }

  .mitori-header__arrow {
    width: 15px;
    height: 15px;
  }

  .mitori-header__title {
    font-size: 20px;
    line-height: 24px;
    text-align: center;
  }

  .mitori-header__subtitle {
    font-size: 14px;
  }
}

/* ========================================
   セクション15-17: 機能カード
   ======================================== */

.function-cards {
  padding: 16px 0;
  background: #fff;
}

.function-cards__inner {
  width: 1000px;
  max-width: 100%;
  margin: 0 auto;
}

.function-cards__row {
  display: flex;
  justify-content: center;
  gap: 54px;
}

/* 機能カード共通 */
.function-card {
  width: 473px;
  background: #fff;
  border: 4px solid #00CC88;
  border-radius: 20px;
  padding: 38px 30px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* NEWバッジ */
.function-card__new-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 73px;
  height: 73px;
}

.function-card__new-badge img {
  width: 100%;
  height: 100%;
}

/* ヘッダー（タイトル） */
.function-card__header {
  position: relative;
  margin-bottom: 10px;
  text-align: center;
}

.function-card__title-bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + 5px);
  height: 10px;
  background: #CDF2E6;
  z-index: 0;
}

.function-card__title {
  position: relative;
  z-index: 1;
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: #212423;
  margin: 0;
  line-height: 1.2;
}

/* スケジュールバッジ */
.function-card__schedule {
  background: #EFEFEF;
  border-radius: 13px;
  padding: 0 10px;
  margin-bottom: 8px;
}

.function-card__schedule span {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #000;
}

/* 説明文 */
.function-card__description {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 20px;
  color: #212423;
  text-align: center;
  line-height: 1.3;
  margin: 0 0 15px;
}

.function-card__description--small {
  font-size: 15px;
  margin: 7px 0 20px;
}

/* 画像エリア */
.function-card__image {
  width: 100%;
  flex-grow: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 10px;
}

.function-card__image img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.function-card__image--karte {
  max-height: 280px;
  overflow: hidden;
}

.function-card__image--karte img {
  width: 401px;
  max-width: 100%;
}

/* 保護者レポート - スマホ2台 */
.function-card__image--report {
  min-height: 260px;
}

.function-card__phone-wrapper {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.function-card__phone {
  width: 147px;
  border: 1px solid #A8A6A6;
  border-radius: 5px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.function-card__phone img {
  width: 100%;
  height: auto;
}

/* キャプション */
.function-card__caption {
  position: absolute;
  right: 20px;
  bottom: 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.function-card__caption--tall {
  bottom: 20px;
}

.function-card__caption-arrow {
  width: 32px;
  height: 36px;
  margin-bottom: -5px;
  margin-right: 10px;
  transform: rotate(-35deg) scaleY(-1);
}

.function-card__caption-arrow img {
  width: 100%;
  height: 100%;
}

.function-card__caption-box {
  background: #CDF2E6;
  border-radius: 10px;
  padding: 10px 20px;
  text-align: center;
}

.function-card__caption-box span {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #212423;
  line-height: 1.3;
}

.function-card__caption-box--tall {
  padding: 12px 20px;
}

/* SP版 */
@media only screen and (max-width: 750px) {
  .function-cards {
    padding: 20px 0;
  }

  .function-cards__inner {
    padding: 0 15px;
  }

  .function-cards__row {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .function-card {
    width: 100%;
    max-width: 366px;
    padding: 20px 20px 25px;
    border-width: 3px;
    border-radius: 15px;
  }

  .function-card--new {
    padding-top: 21px;
  }

  .function-card__new-badge {
    width: 50px;
    height: 50px;
    top: 8px;
    right: 15px;
  }

  .function-card__title {
    font-size: 19px;
  }

  .function-card__title-bg {
    height: 7px;
  }

  .function-card__description {
    font-size: 14px;
  }

  .function-card__description--small {
    font-size: 13px;
    margin: 5px;
  }

  .function-card__schedule {
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .function-card__schedule span {
    font-size: 12px;
  }

  .function-card__image--karte img {
    width: 100%;
  }

  .function-card__phone {
    width: 120px;
  }

  .function-card__caption {
    right: 15px;
    bottom: 20px;
  }

  .function-card__caption-arrow {
    width: 24px;
    height: 27px;
  }

  .function-card__caption-box {
    padding: 8px 15px;
    border-radius: 8px;
  }

  .function-card__caption-box span {
    font-size: 12px;
  }
}

/* ========================================
   セクション15: 教員向けダッシュボード キャプション修正
   Figma座標基準:
   - カード: 473×485px
   - キャプション矢印: カードからの相対位置 left:241px, top:365px, 32.406×36.223px
   - キャプションボックス: カードからの相対位置 left:228px, top:383px, 194×57px
   ======================================== */

/* ダッシュボードカードのキャプション: 絶対配置で正確な位置に配置 */
.function-card--dashboard {
  position: relative;
}

.function-card__caption--dashboard {
  position: absolute;
  left: 224px;
  top: 355px;
  right: auto;
  bottom: auto;
  display: flex;
  flex-direction: column; /* 矢印が上、ボックスが下（KNOWHOWパターンA） */
  align-items: flex-start;
}

.function-card__caption--dashboard .function-card__caption-box--green {
  /* Figma: 194×57px */
  width: 194px;
  height: 57px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border-radius: 10px;
  background: #CDF2E6; /* 薄緑単色、セクション11と同様 */
}

.function-card__caption--dashboard .function-card__caption-box--green span {
  font-size: 14px;
  line-height: 1.3;
}

.function-card__caption--dashboard .function-card__caption-arrow-svg {
  /* Figma: 矢印はボックスの上、左上の画像を指す */
  width: 32.406px;
  height: 36.223px;
  transform: rotate(-20deg); /* 左上を指す */
  align-self: flex-end;
  margin-bottom: -15px;
  margin-right: 145px;
  position: relative;
  z-index: 1;
}

/* リアルタイム画面カードのキャプション
   Figma座標基準:
   - カード: left:627px, top:7074px, 473×485px
   - キャプショングループ: left:702px, top:7439px, 194×93px（3行テキスト）
   - カードからの相対位置: left:75px, top:365px
*/
.function-card--realtime {
  position: relative;
}

.function-card__caption--realtime {
  position: absolute;
  left: 67px;
  top: 360px;
  right: auto;
  bottom: auto;
  display: flex;
  flex-direction: column; /* 矢印が上、ボックスが下（KNOWHOWパターンA） */
  align-items: flex-start;
}

.function-card__caption--realtime .function-card__caption-box--green {
  width: 194px;
  height: 73px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 15px;
  border-radius: 10px;
  background: #CDF2E6; /* 薄緑単色、セクション11と同様 */
}

.function-card__caption--realtime .function-card__caption-box--green span {
  font-size: 14px;
  line-height: 1.3;
}

.function-card__caption--realtime .function-card__caption-arrow-svg {
  /* Figma: 矢印はボックスの上、右上の画像を指す */
  width: 32.406px;
  height: 36.223px;
  transform: rotate(20deg); /* 右上を指す */
  align-self: flex-end;
  margin-bottom: -15px;
  margin-right: 5px;
  position: relative;
  z-index: 1;
}

/* 薄緑のキャプションボックス */
.function-card__caption-box--green {
  background: #CDF2E6;
}

/* SP版の調整 */
@media only screen and (max-width: 750px) {
  .function-card--dashboard .function-card__image img {
    width: 277px;
    max-width: 100%;
  }

  .function-card__caption--dashboard {
    /* SP版: カード幅366pxに対して比例縮小 */
    left: auto;
    right: 30px;
    top: auto;
    bottom: 20px;
  }

  .function-card__caption--realtime {
    /* SP版: カード幅366pxに対して比例縮小 */
    left: auto;
    right: 160px;
    top: auto;
    bottom: 5px;
  }
  .function-card__caption--dashboard .function-card__caption-box--green,
  .function-card__caption--realtime .function-card__caption-box--green {
    width: 150px;
    height: 48px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #CDF2E6; /* 薄緑単色、セクション11と同様 */
  }

  .function-card__caption--dashboard .function-card__caption-box--green span,
  .function-card__caption--realtime .function-card__caption-box--green span {
    font-size: 12px;
  }

  .function-card__caption--dashboard .function-card__caption-arrow-svg {
    width: 24px;
    height: 27px;
    transform: rotate(-20deg); /* 左上を指す */
    align-self: flex-end;
    margin-bottom: -10px;
    margin-right: 110px;
  }

  .function-card__caption--realtime .function-card__caption-arrow-svg {
    width: 24px;
    height: 27px;
    transform: rotate(20deg); /* 右上を指す */
    align-self: flex-end;
    margin-bottom: -6px;
    margin-right: 30px;
  }
}

/* ========================================
   セクション14/19: 緑帯
   ======================================== */

.green-band {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 0 0;
}

.green-band__inner {
  width: 1000px;
  height: 41px;
  margin: 0 auto;
  background: #00CC88;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.green-band__text {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #FFFFFF;
  text-align: center;
  margin: 0;
}

/* SP版 */
@media only screen and (max-width: 750px) {
  .green-band {
    padding: 20px 12px 0;
  }

  .green-band__inner {
    width: 100%;
    max-width: 366px;
    height: 51px;
    border-radius: 8px;
  }

  .green-band__text {
    font-size: 15px;
    line-height: 130%;
  }
}

/* ========================================
   セクション18: 黄色pill（幅広いシーン）
   ======================================== */

.scene-header {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 0 0;
}

.scene-header__inner {
  width: 1000px;
  margin: 0 auto;
}

.scene-header__title-wrapper {
  width: 100%;
  height: 72px;
  background: linear-gradient(90deg, #F9B816 0%, #FFC83E 100%);
  border-radius: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

.scene-header__arrow-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.scene-header__arrow {
  width: 23px;
  height: 23px;
}

.scene-header__title {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 34px;
  color: #212423;
  margin: 0;
}

.scene-header__subtitle {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #212423;
  text-align: center;
  line-height: 1.3;
  margin: 0;
}

/* SP版 */
@media only screen and (max-width: 750px) {
  .scene-header {
    padding: 40px 12px 0;
  }

  .scene-header__inner {
    width: 366px;
    max-width: 100%;
    margin: 0 auto;
  }

  .scene-header__title-wrapper {
    height: 63px;
    border-radius: 30px;
    margin-bottom: 0;
  }

  .scene-header__arrow-wrapper {
    margin-bottom: 3px;
  }

  .scene-header__arrow {
    width: 15px;
    height: 15px;
  }

  .scene-header__title {
    font-size: 19px;
    line-height: 24px;
    text-align: center;
  }

  .scene-header__subtitle {
    font-size: 14px;
  }
}

/* ========================================
   セクション16: 緑帯2（見取り機能強化）
   ======================================== */

.green-band--mitori2 {
  padding: 41px 0 0;
}

/* ========================================
   セクション17: 学習カルテ・保護者レポート
   ======================================== */

.function-cards--new-features {
  padding: 16px 0 60px;
  background: #fff;
}

/* 学習カルテカード */
.function-card--karte {
  position: relative;
}

.function-card--karte .function-card__schedule {
  display: inline-block;
}

.function-card--karte .function-card__image--karte {
  max-height: 260px;
  overflow: hidden;
  margin: 20px;
}

.function-card--karte .function-card__image--karte img {
  width: 401px;
  max-width: 100%;
  border-radius: 8px;
}

.function-card__caption--karte {
  position: absolute;
  right: 20px;
  bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.function-card__caption--karte .function-card__caption-arrow-svg {
  width: 32px;
  height: 36px;
  transform: rotate(-20deg);
  margin-bottom: -10px;
  margin-right: 140px;
  align-self: flex-end;
  position: relative;
  z-index: 1;
}

.function-card__caption--karte .function-card__caption-arrow-svg path {
  fill: #CDF2E6;
}

.function-card__caption--karte .function-card__caption-box {
  width: 194px;
  padding: 12px 15px;
  background: #CDF2E6;
  border-radius: 10px;
}

.function-card__caption--karte .function-card__caption-box span {
  font-size: 14px;
  line-height: 1.3;
  display: block;
  text-align: center;
}

/* 保護者レポートカード */
.function-card--report {
  position: relative;
}

.function-card--report .function-card__image--report {
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.function-card--report .function-card__image--report img {
  max-width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

.function-card__caption--report {
  position: absolute;
  left: 40px;
  bottom: 25px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.function-card__caption--report .function-card__caption-arrow-svg {
  width: 32px;
  height: 36px;
  transform: rotate(20deg);
  align-self: flex-start;
  margin-bottom: -15px;
  margin-left: 140px;
  position: relative;
  z-index: 1;
}

.function-card__caption--report .function-card__caption-box--green {
  width: 194px;
  padding: 10px 20px;
  background: #CDF2E6;
  border-radius: 10px;
  position: relative;
  z-index: 10;
}

.function-card__caption--report .function-card__caption-box--green span {
  font-size: 14px;
  line-height: 1.4;
  display: block;
  text-align: center;
}

/* SP版 */
@media only screen and (max-width: 750px) {
  .green-band--mitori2 {
    padding: 20px 12px 0;
  }

  .function-cards--new-features {
    padding: 20px 0 40px;
  }

  .function-cards--new-features .function-cards__row {
    flex-direction: column;
    gap: 30px;
  }

  .function-card--karte,
  .function-card--report {
    width: 100%;
    max-width: 366px;
    margin: 0 auto;
  }

  .function-card--karte .function-card__schedule {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .function-card--karte .function-card__image--karte {
    max-height: 200px;
  }

  .function-card--karte .function-card__image--karte img {
    width: 100%;
  }

  .function-card__caption--karte {
    right: 15px;
    bottom: 20px;
  }

  .function-card__caption--karte .function-card__caption-arrow-svg {
    width: 24px;
    height: 27px;
    margin-right: 100px;
    margin-bottom: -8px;
  }

  .function-card__caption--karte .function-card__caption-box {
    width: 150px;
    padding: 10px 12px;
  }

  .function-card__caption--karte .function-card__caption-box span {
    font-size: 12px;
  }

  .function-card--report .function-card__image--report {
    min-height: 200px;
  }

  .function-card--report .function-card__image--report img {
    max-width: 280px;
  }

  .function-card__caption--report {
    left: 15px;
    bottom: 15px;
  }

  .function-card__caption--report .function-card__caption-arrow-svg {
    width: 24px;
    height: 27px;
    margin-bottom: -8px;
    margin-left: 115px;
  }

  .function-card__caption--report .function-card__caption-box--green {
    width: 150px;
    padding: 10px 12px;
  }

  .function-card__caption--report .function-card__caption-box--green span {
    font-size: 12px;
  }
}

/* ========================================
   セクション20: ワークブック機能＋オフライン学習機能
   ======================================== */

.function-cards--workbook-offline {
  padding: 17px 0 26px;
  background: #fff;
}

/* ワークブック機能カード */
.function-card--workbook {
  position: relative;
}

.function-card--workbook .function-card__image--workbook {
  min-height: 275px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.function-card--workbook .function-card__image--workbook img {
  width: 275px;
  max-width: 100%;
  height: auto;
  margin-left: 58px; /* Figma: カード左端128px, 右端70px → 中央から29px右にシフト */
}

/* ワークブック機能キャプション（パターンB: column-reverse - ボックスが上、矢印が下）
   Figma: 左側配置、矢印は右下を指す */
.function-card__caption--workbook {
  position: absolute;
  top: 163px;
  left: 35px;
  right: auto;
  bottom: auto;
  display: flex;
  flex-direction: column-reverse; /* ボックスが上、矢印が下 */
  align-items: flex-start;
}

.function-card__caption--workbook .function-card__caption-arrow-svg {
  width: 36px;
  height: 32px;
  /* パターンB: ボックスが上、矢印が下。矢印は右下を指す */
  /* 基本SVGは上向き。scaleY(-1)で下向きにし、rotate(35deg)で右に傾ける */
  transform: scaleY(-1) rotate(35deg);
  margin-top: -8px;
  margin-left: 100px;
  align-self: flex-start;
  position: relative;
  z-index: 1;
}

.function-card__caption--workbook .function-card__caption-box--green {
  width: 160px;
  padding: 12px 5px;
  background: #CDF2E6;
  border-radius: 10px;
}

.function-card__caption--workbook .function-card__caption-box--green span {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: #212423;
  display: block;
  text-align: center;
}

/* 黄色キャプションボックス（未使用だが互換性のため残す） */
.function-card__caption-box--yellow {
  padding: 12px 15px;
  background: linear-gradient(90deg, #F9B816 0%, #FFC83E 100%);
  border-radius: 10px;
}

.function-card__caption-box--yellow span {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: #212423;
  display: block;
  text-align: center;
}

/* オフライン学習機能カード */
.function-card--offline {
  position: relative;
}

.function-card--offline .function-card__schedule {
  display: inline-block;
  padding: 0 10px;
}

.function-card--offline .function-card__image--offline {
  min-height: 180px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 37.45px;
  margin: 20px;
  padding: 0 30px;
}

.function-card--offline .function-card__img-wifi {
  width: 157px;
  height: auto;
}

.function-card--offline .function-card__img-download {
  width: 151px;
  height: auto;
}

/* オフライン学習機能キャプション（パターンA: column - 矢印が上、ボックスが下）
   Figma: 下部中央配置、矢印は上を指す */
.function-card__caption--offline {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 75px;
  display: flex;
  flex-direction: column; /* 矢印が上、ボックスが下 */
  align-items: center;
}

.function-card__caption--offline .function-card__caption-arrow-svg {
  width: 23px;
  height: 36px;
  /* パターンA: 矢印が上、ボックスが下。矢印は右上を指す */
  /* 基本SVGは上向きなので、scaleY(-1)は不要。微小な右傾き */
  transform: rotate(20deg);
  margin-bottom: -10px;
  margin-left: -90px;
  align-self: center;
  position: relative;
  z-index: 1;
}

.function-card__caption--offline .function-card__caption-box--green {
  width: 194px;
  padding: 12px 5px;
  background: #CDF2E6;
  border-radius: 10px;
}

.function-card__caption--offline .function-card__caption-box--green span {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 14.4px;
  line-height: 1.3;
  letter-spacing: -0.1px;
  color: #212423;
  display: block;
  text-align: center;
}

/* 黄色ボックス（互換性のため残す） */
.function-card__caption--offline .function-card__caption-box--yellow {
  width: 194px;
  padding: 12px 15px;
}

.function-card__caption--offline .function-card__caption-box--yellow span {
  font-size: 14.4px;
  letter-spacing: -0.1px;
}

/* SP版 */
@media only screen and (max-width: 750px) {
  .function-cards--workbook-offline {
    padding: 20px 0 40px;
  }

  .function-cards--workbook-offline .function-cards__row {
    flex-direction: column;
    gap: 30px;
  }

  .function-card--workbook,
  .function-card--offline {
    width: 100%;
    max-width: 366px;
    margin: 0 auto;
    padding-bottom: 0;
  }

  .function-card--workbook .function-card__image--workbook {
    min-height: 200px;
  }

  .function-card--workbook .function-card__image--workbook img {
    width: 190px;
    margin-left: 50px;
  }

  /* ワークブック機能キャプション SP版 */
  .function-card__caption--workbook {
    top: auto;
    left: 15px;
    bottom: 150px;
  }

  .function-card__caption--workbook .function-card__caption-arrow-svg {
    width: 27px;
    height: 24px;
    transform: scaleY(-1) rotate(35deg); /* 右下を指す */
    margin-top: -6px;
    margin-left: 70px;
  }

  .function-card__caption--workbook .function-card__caption-box--green {
    width: 130px;
    padding: 5px;
    border-radius: 8px;
  }

  .function-card__caption--workbook .function-card__caption-box--green span {
    font-size: 12px;
  }

  /* 黄色ボックス（互換性のため） */
  .function-card__caption-box--yellow {
    padding: 10px 12px;
  }

  .function-card__caption-box--yellow span {
    font-size: 12px;
  }

  .function-card--offline .function-card__schedule {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .function-card--offline .function-card__image--offline {
    min-height: 140px;
    gap: 15px;
    padding: 0 20px;
    margin: 10px 20px 30px;
  }

  .function-card--offline .function-card__img-wifi {
    width: 100px;
  }

  .function-card--offline .function-card__img-download {
    width: 105px;
  }

  /* オフライン学習機能キャプション SP版 */
  .function-card__caption--offline {
    bottom: 15px;
  }

  .function-card__caption--offline .function-card__caption-arrow-svg {
    width: 18px;
    height: 27px;
    transform: rotate(20deg); /* 右上を指す */
    margin-left: -80px;
    margin-bottom: -8px;
  }

  .function-card__caption--offline .function-card__caption-box--green {
    width: 160px;
    padding: 5px;
    border-radius: 8px;
  }

  .function-card__caption--offline .function-card__caption-box--green span {
    font-size: 12px;
  }

  /* 黄色ボックス（互換性のため） */
  .function-card__caption--offline .function-card__caption-box--yellow {
    width: 160px;
    padding: 10px 12px;
  }

  .function-card__caption--offline .function-card__caption-box--yellow span {
    font-size: 12px;
  }
}

/* ========================================
   セクション21: 緑帯（多彩な難易度）
   ======================================== */

.green-band--workbook {
  padding: 30px 0 0;
}

/* SP版 */
@media only screen and (max-width: 750px) {
  .green-band--workbook {
    padding: 0 12px;
  }

  .green-band--workbook .green-band__text {
    font-size: 15px;
  }
}

/* ========================================
   セクション22: 高校入試の練習問題＋実技4教科
   ======================================== */

.function-cards--entrance-exam-jitsugu {
  padding: 30px 0 0;
  background: #fff;
}

/* 高校入試の練習問題カード */
.function-card--entrance-exam {
  position: relative;
  min-height: 507px;
  box-sizing: border-box;
}

.function-card--entrance-exam .function-card__image--entrance-exam {
  position: relative;
  min-height: 280px;
  width: 100%;
  margin: 20px;
}

.function-card--entrance-exam .function-card__img-exam-left {
  position: absolute;
  top: 0;
  left: 13px;
  width: 121px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  z-index: 1;
}

.function-card--entrance-exam .function-card__img-exam-right {
  position: absolute;
  top: 40px;
  left: 151px;
  width: 262px;
  height: 200px;
  border-radius: 8px;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
  z-index: 2;
}

/* 高校入試キャプション（パターンA: column - 矢印が上、ボックスが下）
   Figma: カード基準 top:373px, left:262px */
.function-card__caption--entrance-exam {
  position: absolute;
  top: 373px;
  left: 262px;
  right: auto;
  bottom: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  z-index: 2;
}

.function-card__caption--entrance-exam .function-card__caption-arrow-svg {
  width: 32px;
  height: 36px;
  transform: rotate(-20deg);
  margin-bottom: -18px;
  margin-left: 20px;
  position: relative;
  z-index: 1;
}

.function-card__caption--entrance-exam .function-card__caption-box--green {
  width: 194px;
  padding: 12px 5px;
  background: #CDF2E6;
  border-radius: 10px;
}

.function-card__caption--entrance-exam .function-card__caption-box--green span {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  color: #212423;
  display: block;
  text-align: center;
}

/* 実技4教科カード */
.function-card--jitsugu {
  position: relative;
  min-height: 507px;
  box-sizing: border-box;
}

.function-card--jitsugu .function-card__new-badge {
  top: 22px;
  right: 20px;
}

.function-card--jitsugu .function-card__schedule {
  display: inline-block;
}

.function-card--jitsugu .function-card__image--jitsugu {
  min-height: 280px;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-bottom: 0;
}

/* 教科アイコングリッド */
.function-card__icon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px 30px;
  justify-items: center;
  padding: 0 40px;
}

.function-card__icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.function-card__icon-item img {
  width: 128px;
  height: 105px;
  object-fit: contain;
}

.function-card__icon-label {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: #212423;
  text-align: center;
}

/* SP版 */
@media only screen and (max-width: 750px) {
  .function-cards--entrance-exam-jitsugu {
    padding: 20px 0;
  }

  .function-cards--entrance-exam-jitsugu .function-cards__row {
    flex-direction: column;
    gap: 30px;
  }

  .function-card--entrance-exam,
  .function-card--jitsugu {
    width: 100%;
    max-width: 366px;
    margin: 0 auto;
    min-height: auto;
  }

  .function-card--entrance-exam .function-card__image--entrance-exam {
    min-height: 190px;
    margin: 0;
  }

  .function-card--entrance-exam .function-card__img-exam-left {
    width: 90px;
    height: 150px;
    left: 10px;
  }

  .function-card--entrance-exam .function-card__img-exam-right {
    width: 195px;
    height: 150px;
    left: 110px;
    top: 30px;
  }

  /* 高校入試キャプション SP版 */
  .function-card__caption--entrance-exam {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    align-self: flex-end;
    margin-top: -50px;
    margin-right: 5px;
  }

  .function-card__caption--entrance-exam .function-card__caption-arrow-svg {
    width: 24px;
    height: 27px;
    transform: rotate(-20deg);
    margin-bottom: -14px;
    margin-left: 20px;
  }

  .function-card__caption--entrance-exam .function-card__caption-box--green {
    width: 155px;
    padding: 10px 8px;
    border-radius: 8px;
  }

  .function-card__caption--entrance-exam .function-card__caption-box--green span {
    font-size: 12px;
  }

  .function-card--jitsugu .function-card__schedule {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 実技4教科 SP版 */
  .function-card--jitsugu .function-card__image--jitsugu {
    min-height: 220px;
    margin-bottom: 0;
  }

  .function-card__icon-grid {
    gap: 10px 20px;
    padding: 10px 20px;
  }

  .function-card__icon-item img {
    width: 95px;
    height: 80px;
  }

  .function-card__icon-label {
    font-size: 14px;
  }
}

/* ========================================
   セクション24: 学習eポータル機能を搭載
   ======================================== */

.eportal-section {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 0 80px;
}

.eportal-section__inner {
  width: 1000px;
  margin: 0 auto;
}

/* ヘッダー（白色pill吹き出し） */
.eportal-section__header {
  width: 100%;
  height: 72px;
  background: #FFFFFF;
  border-radius: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.eportal-section__header-text {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 34px;
  color: #00CC88;
  margin: 0;
}

/* 下矢印（白色・吹き出し尻尾） */
.eportal-section__arrow-wrapper {
  display: flex;
  justify-content: center;
}

.eportal-section__arrow {
  width: 23px;
  height: 23px;
}

/* コンテンツエリア（ロゴ＋説明文 横並び） */
.eportal-section__content {
  display: flex;
  align-items: flex-start;
  margin-top: 36px;
  padding-left: 75px;
  gap: 33px;
}

.eportal-section__logo {
  flex-shrink: 0;
  width: 343px;
}

.eportal-section__logo img {
  width: 100%;
  height: auto;
  display: block;
}

.eportal-section__description {
  width: 475px;
  flex-shrink: 0;
}

.eportal-section__text {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: #1F2322;
  margin: 0;
}

.eportal-section__note {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  color: #1F2322;
  margin: 0;
}

/* SP版 */
@media only screen and (max-width: 750px) {
  .eportal-section {
    padding: 40px 0 40px;
  }

  .eportal-section__inner {
    width: 366px;
    max-width: 100%;
    margin: 0 auto;
  }

  .eportal-section__header {
    height: 32px;
    border-radius: 16px;
  }

  .eportal-section__header-text {
    font-size: 19px;
  }

  .eportal-section__arrow-wrapper {
    margin-top: -6px;
    position: relative;
    z-index: 1;
  }

  .eportal-section__arrow {
    width: 23px;
    height: 23px;
  }

  /* コンテンツエリア: 縦積みレイアウト */
  .eportal-section__content {
    flex-direction: column;
    align-items: center;
    margin-top: 23px;
    padding-left: 30px;
    padding-right: 30px;
    gap: 16px;
  }

  .eportal-section__logo {
    width: 306px;
  }

  .eportal-section__description {
    width: 305px;
  }

  .eportal-section__text {
    font-size: 15px;
  }

  .eportal-section__note {
    font-size: 12px;
  }
}

/* ========================================
   セクション25: キュビナを利用した児童生徒に学力が伸びる傾向
   セクション24と同じ「白pill＋緑テキスト」パターン
   背景: #CDF2E6（薄緑）
   
   Figma座標基準: y: 10803
   - タイトルpill: x:100, y:10803, 1000×72px
   - 下矢印: x:589, y:10875, 23×23px
   - サブテキスト: x:258, y:10919, 685×52px
   - バッジ: x:466, y:11015, 262×35px
   ======================================== */

/* PC版 (デフォルト) */
.evidence-section {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 0 80px;
}

.evidence-section__inner {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* [25.1] タイトルバー（白色pill吹き出し + 緑テキスト）
   1000×72px, 背景: #FFFFFF, 角丸: 36px */
.evidence-section__header {
  width: 100%;
  height: 72px;
  background: #FFFFFF;
  border-radius: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.evidence-section__header-text {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 34px;
  color: #00CC88;
  margin: 0;
}

.evidence-section__header-text--pc {
  display: inline;
}

.evidence-section__header-text--sp {
  display: none;
}

/* [25.2] 下矢印（白色・吹き出しの尻尾）
   23×23px, pill直下中央 */
.evidence-section__arrow-wrapper {
  display: flex;
  justify-content: center;
}

.evidence-section__arrow {
  width: 23px;
  height: 23px;
}

/* [25.3] サブテキスト
   685×52px, 17px, #1F2322, 中央揃え
   pill下端から44px（矢台23px含む） */
.evidence-section__subtitle {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: #1F2322;
  text-align: center;
  width: 685px;
  margin: 21px 0 0; /* 44px - 23px(arrow) = 21px */
}

/* [25.4] エビデンスバッジ「学術機関との共同研究で実証」
   262×35px, 黄色グラデーション, 角丸: 26.4px
   サブテキスト下端から44px */
.evidence-section__badge {
  width: 262px;
  height: 35px;
  background: linear-gradient(90deg, #F9B816 0%, #FFC83E 100%);
  border-radius: 26.4px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 44px;
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #212423;
  letter-spacing: -0.198px;
}

/* [25.5] エビデンスカードコンテナ */
.evidence-section__cards {
  display: flex;
  gap: 26px;
  justify-content: center;
  margin: 30px auto 0;
}

.evidence-section__card {
  width: 458px;
  height: 200px;
  background: #fff;
  border: 3px solid #00cc88;
  border-radius: 15px;
  overflow: hidden;
}

.evidence-section__card-header {
  height: 38px;
  background: #00cc88;
  border: 3px solid #00cc88;
  border-radius: 15px 15px 0 0;
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 38px;
  color: #fff;
  text-align: center;
  margin-top: -6px;
  margin-left: -3px;
  margin-right: -3px;
  width: calc(100% + 6px);
}

.evidence-section__card-description {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: normal;
  color: #212423;
  text-align: center;
  margin: 12px 0 5px;
}

.evidence-section__card-body {
  display: block;
  padding: 5px 15px 15px;
}

.evidence-section__card-body img {
  width: auto;
  height: 100%;
  display: block;
  margin: 0 auto;
}

/* [25.6] 注釈テキスト */
.evidence-section__note {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 1.3;
  color: #000;
  text-align: left;
  margin: 15px auto 0;
  max-width: 940px;
  padding: 0 105px;
}

/* SP版 (750px以下) */
@media only screen and (max-width: 750px) {
  .evidence-section {
    padding: 0;
  }

  .evidence-section__inner {
    width: 366px;
    max-width: 100%;
    margin: 0 auto;
  }

  /* [25.1] SP: 白pill + 緑テキスト（PCと同じ配色、サイズのみ変更）
     366×56px, 背景: #FFFFFF, border-radius: 28px */
  .evidence-section__header {
    height: 56px;
    border-radius: 28px;
  }

  .evidence-section__header-text {
    font-size: 19px;
    line-height: 1.5;
    text-align: center;
  }

  .evidence-section__header-text--pc {
    display: none;
  }

  .evidence-section__header-text--sp {
    display: inline-block;
    line-height: 1.2;
  }

  /* [25.2] SP: 白矢印（PCと同じ白色）
     23×23px */
  .evidence-section__arrow-wrapper {
    margin-top: -6px;
    position: relative;
    z-index: 1;
  }

  .evidence-section__arrow {
    width: 23px;
    height: 23px;
  }

  /* [25.3] SP: サブテキスト
     305px幅, 14px */
  .evidence-section__subtitle {
    width: 305px;
    max-width: 100%;
    font-size: 14px;
    line-height: 1.6;
    margin: 17px 0 0;
    text-align: left;
  }

  /* [25.4] SP: エビデンスバッジ
     208×28px, border-radius: 14px, font-size: 14px */
  .evidence-section__badge {
    width: 208px;
    height: 28px;
    border-radius: 14px;
    margin-top: 30px;
    font-size: 14px;
    letter-spacing: normal;
  }

  /* [25.5] SP: エビデンスカードコンテナ */
  .evidence-section__cards {
    flex-direction: column;
    gap: 20px;
    padding: 0;
    margin: 10px 0 0;
  }

  .evidence-section__card {
    width: 100%;
    max-width: 330px;
    height: auto;
    min-height: 153px;
    border: 2.301px solid #00cc88;
    border-radius: 11.503px;
    margin: 0 auto;
  }

  .evidence-section__card-header {
    height: 28px;
    line-height: 26px;
    font-size: 15px;
    border: 2.301px solid #00cc88;
    border-radius: 11.503px 11.503px 0 0;
    margin-top: -2.301px;
    margin-left: -2.301px;
    margin-right: -2.301px;
    width: calc(100% + 4.602px);
  }

  .evidence-section__card-description {
    font-size: 15px;
    line-height: normal;
    margin: 10px 0 12px;
  }

  .evidence-section__card-body {
    display: block;
    padding: 5px 15px 15px;
  }

  .evidence-section__card-body img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  /* [25.6] SP: 注釈テキスト */
  .evidence-section__note {
    font-size: 12px;
    line-height: 1.3;
    padding: 0;
    width: 330px;
    max-width: 100%;
    margin: 15px 0 0;
  }
}

/* ========================================
   セクション26: 導入自治体
   セクション24と同じ「白pill＋緑テキスト」パターン
   背景: #CDF2E6（薄緑）
   
   Figma座標基準: y: 11443
   - タイトルpill: x:100, y:11443, 1000×72px
   - 下矢印: x:589, y:11515, 23×23px（pill直下）
   - 説明テキスト: x:258, y:11559, 685×26px
   ======================================== */

/* PC版 (デフォルト) */
.adoption-section {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 30px 0 48px;
}

.adoption-section__inner {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* [26.1] タイトルバー（白色pill吹き出し + 緑テキスト）
   1000×72px, 背景: #FFFFFF, 角丸: 36px */
.adoption-section__header {
  width: 100%;
  height: 72px;
  background: #FFFFFF;
  border-radius: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.adoption-section__header-text {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 30px;
  color: #00CC88;
  margin: 0;
}

/* [26.2] 下矢印（白色・吹き出し尻尾）
   23×23px, pill直下中央 */
.adoption-section__arrow-wrapper {
  display: flex;
  justify-content: center;
}

.adoption-section__arrow {
  width: 23px;
  height: 23px;
}

/* [26.3] 説明テキスト
   685×26px, 17px, #1F2322, 中央揃え
   矢印底→説明テキスト上: 21px */
.adoption-section__description {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: #1F2322;
  text-align: center;
  width: 685px;
  margin: 21px 0 0;
}

/* SP版 */
@media only screen and (max-width: 750px) {
  .adoption-section {
    padding: 40px 0 40px;
  }

  .adoption-section__inner {
    width: 366px;
    max-width: 100%;
    margin: 0 auto;
  }

  /* [26.1] SP: 白色pill 366×32px, border-radius: 16px */
  .adoption-section__header {
    height: 32px;
    border-radius: 16px;
  }

  .adoption-section__header-text {
    font-size: 19px;
  }

  /* [26.2] SP: 白色矢印 23×23px, -6px食い込み */
  .adoption-section__arrow-wrapper {
    margin-top: -6px;
    position: relative;
    z-index: 1;
  }

  .adoption-section__arrow {
    width: 23px;
    height: 23px;
  }

  /* [26.3] SP: 説明テキスト 306px, 15px
     矢印底→説明テキスト上: 23px */
  .adoption-section__description {
    width: 306px;
    max-width: 100%;
    font-size: 15px;
    margin: 23px 0 0;
    text-align: left;
  }
}

/* ============================================
   セクション26b: 導入自治体一覧（自治体リスト）
   ============================================ */

.adoption-list {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 0 63px;
}

.adoption-list__inner {
  position: relative;
  width: 772px;
  margin: 0 auto;
}

/* [26b.1] 装飾背景SVG
   513.78×531.07px, 白色50%透過バブル
   テキストの右寄り背面に配置 */
.adoption-list__decoration {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.adoption-list__decoration--pc {
  width: 513.78px;
  height: 531.07px;
  top: -4px;
  left: 72px;
}

.adoption-list__decoration--sp {
  display: none;
}

/* [26b.2] 自治体テキストリスト
   772×543px, 2カラム横並び
   左: 329px, 右: 362px, gap: 81px */
.adoption-list__content {
  position: relative;
  z-index: 1;
}

.adoption-list__content--pc {
  display: flex;
  gap: 81px;
}

.adoption-list__content--sp {
  display: none;
}

.adoption-list__column--left {
  width: 329px;
  flex-shrink: 0;
}

.adoption-list__column--right {
  width: 362px;
  flex-shrink: 0;
}

/* テキストスタイル: 16px, line-height: 2, #1F2322 */
.adoption-list__column p {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 2;
  color: #1F2322;
  margin: 0;
}

/* 都道府県名: Bold */
.adoption-list__prefecture {
  font-weight: 700;
}

/* 合計行 */
.adoption-list__total {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 2;
  color: #1F2322;
  margin: 0;
}

/* SP版 */
@media only screen and (max-width: 750px) {
  .adoption-list {
    padding: 0 0 37px;
  }

  .adoption-list__inner {
    width: 308px;
    max-width: 100%;
    margin: 0 auto;
  }

  /* SP版: PC装飾非表示、SP装飾表示 */
  .adoption-list__decoration--pc {
    display: none;
  }

  .adoption-list__decoration--sp {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 513.78 / 531.07;
    object-fit: contain;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* SP版: PC版コンテンツ非表示 */
  .adoption-list__content--pc {
    display: none;
  }

  /* SP版: 1カラム流し込み表示 */
  .adoption-list__content--sp {
    display: block;
  }

  .adoption-list__content--sp p {
    font-family: 'Qubena Gothic', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 2;
    color: #1F2322;
    margin: 0;
  }

  .adoption-list__content--sp .adoption-list__prefecture {
    font-weight: 700;
  }
}

/* ========================================
   セクション27: CTA4
   ======================================== */

.cta-section--quaternary {
  padding-top: 0;
}

/* ========================================
   セクション28: 無償トライアル - PC版
   ======================================== */
.trial-section {
  position: relative;
  width: 100%;
  max-width: 1200px;
  height: 900px;
  margin: 0 auto 0;
  padding: 0 20px;
}

/* 背景（オレンジ/クリーム色エリア） */
.trial-section__bg {
  position: absolute;
  top: 94px;
  left: 91px;
  width: 1020px;
  height: 780px;
  background: #FEEECF;
  border-radius: 20px;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.13);
  z-index: 0;
}

.trial-section__content {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 1;
}

/* イラスト */
.trial-section__illust {
  position: absolute;
  top: 29px;
  left: 50%;
  transform: translateX(-50%);
  width: 267px;
  height: 123px;
  overflow: hidden;
  z-index: 2;
}

.trial-section__illust img {
  position: absolute;
  width: 267px;
  height: 123px;
}

/* 装飾アイコン */
.trial-section__decoration {
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);
  width: 331px;
  height: 48px;
  text-align: center;
  z-index: 2;
}

.trial-section__decoration-img--pc {
  display: block;
  width: 100%;
  height: 30px;
  object-fit: contain;
  margin: 0 auto 10px;
}

.trial-section__decoration-img--sp {
  display: none;
}

.trial-section__decoration-text {
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.3;
  color: #212423;
  text-align: center;
  margin: 0;
  letter-spacing: -0.22px;
  z-index: 3;
}

/* タイトル */
.trial-section__title {
  position: absolute;
  top: 181px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 35px;
  line-height: normal;
  color: #212423;
  text-align: center;
  margin: 0;
  white-space: nowrap;
  z-index: 2;
}

/* 説明テキスト */
.trial-section__description {
  position: absolute;
  top: 232px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: normal;
  color: #212423;
  text-align: center;
  margin: 0;
  white-space: nowrap;
  z-index: 2;
}

/* CTAボタン */
.trial-section__cta {
  position: absolute;
  top: 280px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

.trial-section__cta-button {
  display: block;
  width: 432px;
  height: 74px;
  background: #00CC88;
  border-radius: 90.061px;
  box-shadow: 4.503px 4.503px 6.304px 0px rgba(0, 0, 0, 0.25);
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 25px;
  line-height: 74px;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.trial-section__cta-button:hover {
  transform: scale(1.02);
}

/* 情報ボックス群 */
.trial-section__info-boxes {
  position: absolute;
  top: 390px;
  left: 165px;
  width: 854px;
  z-index: 2;
}

.trial-section__info-box {
  width: 100%;
  height: 95px;
  background: #FFFDF8;
  border-radius: 15px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  padding: 0 30px;
}

.trial-section__info-box:last-child {
  margin-bottom: 0;
}

.trial-section__info-box-inner {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 30px;
}

.trial-section__info-title {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  color: #212423;
  margin: 0;
  min-width: 120px;
  flex-shrink: 0;
}

.trial-section__info-text {
  font-family: 'Qubena Gothic', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.5;
  color: #212423;
  margin: 0;
  flex: 1;
}

/* ========================================
   セクション28: 無償トライアル - SP版
   ======================================== */
@media (max-width: 750px) {
  .trial-section {
    max-width: 390px;
    height: 680px;
    margin: 0 auto 0;
    padding: 0 15px;
  }

  /* 背景 */
  .trial-section__bg {
    top: 44px;
    left: 15px;
    width: calc(100% - 30px);
    max-width: 360px;
    height: 640px;
    border-radius: 7.423px;
    box-shadow: 0px 1.485px 1.485px 0px rgba(0, 0, 0, 0.13);
  }

  /* イラスト */
  .trial-section__illust {
    top: 0;
    width: 186px;
    height: 86px;
  }

  .trial-section__illust img {
    width: 186px;
    height: 86px;
  }

  /* 装飾アイコン */
  .trial-section__decoration {
    top: 90px;
    width: 238px;
    height: 34px;
  }

  .trial-section__decoration-img--pc {
    display: none;
  }

  .trial-section__decoration-img--sp {
    display: block;
    width: 100%;
    height: 23px;
    object-fit: contain;
    margin: 0 auto 10px;
  }

  .trial-section__decoration-text {
    font-size: 15px;
    letter-spacing: -0.165px;
  }

  /* タイトル */
  .trial-section__title {
    top: 112px;
    font-size: 23.661px;
    white-space: normal;
    width: 300px;
  }

  /* 説明テキスト */
  .trial-section__description {
    top: 148px;
    font-size: 15px;
    width: 300px;
  }

  /* CTAボタン */
  .trial-section__cta {
    top: 177px;
  }

  .trial-section__cta-button {
    width: 292px;
    height: 50px;
    border-radius: 60.883px;
    box-shadow: 3.044px 3.044px 4.262px 0px rgba(0, 0, 0, 0.25);
    font-size: 16.901px;
    line-height: 50px;
  }

  /* 情報ボックス群 */
  .trial-section__info-boxes {
    top: 267px;
    left: 15px;
    width: calc(100% - 30px);
    max-width: 360px;
  }

  .trial-section__info-box {
    height: auto;
    min-height: 86px;
    border-radius: 6.777px;
    margin-bottom: 11px;
    padding: 15px 15px;
  }

  .trial-section__info-box-inner {
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .trial-section__info-title {
    font-size: 14px;
    min-width: 80px;
    flex-shrink: 0;
  }

  .trial-section__info-text {
    font-size: 14px;
  }
}

/* ========================================
   セクション28: 無償トライアル - PC版縮小対応
   ======================================== */
@media (min-width: 751px) and (max-width: 1200px) {
  .trial-section {
    transform-origin: top center;
    width: 1200px;
    margin: 0 auto;
  }
}

@media (min-width: 751px) and (max-width: 960px) {
  .trial-section {
    transform-origin: top center;
    width: 1200px;
    margin: 0 auto;
  }
}