@charset "UTF-8";
/* ============================================================
   LP001 CV強化追加スタイル（main.css は一切変更せず、上乗せ）
   前提: 既存 BP 767-768px。モバイル75-80%想定で mobile first 寄り
   ============================================================ */

/* ---------- 0) KVサブコピー（数字＆具体性） ---------- */
.kv_movie .kv_movie_cap p.kv_sub_lead strong {
  color: #ffe45c;
  font-weight: 900;
  font-size: 1.18em;
  margin: 0 .05em;
  letter-spacing: .01em;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}

/* ---------- 1) KV内CTA（FV内コンバージョン） ---------- */
.kv_cta_wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3%;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 0 16px;
  flex-wrap: wrap;
}
.kv_cta_wrap a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 10px 24px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  letter-spacing: .04em;
  transition: transform .15s ease, box-shadow .15s ease;
}
.kv_cta_wrap a.kv_cta_primary {
  background: linear-gradient(135deg,#ff8a3d 0%,#ff5a1f 100%);
  color: #fff;
}
/* Primary CTA: メインコピー＋小さなサブコピー（2段組） */
.kv_cta_wrap a.kv_cta_primary .cta_lines {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  gap: 3px;
}
.kv_cta_wrap a.kv_cta_primary .cta_main {
  display: block;
  line-height: 1.1;
}
.kv_cta_wrap a.kv_cta_primary .cta_sub {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .26em;
  color: rgba(255,255,255,.94);
  text-indent: .26em; /* letter-spacing による右偏り補正（中央寄せの見た目調整） */
  text-shadow: 0 1px 2px rgba(0,0,0,.18);
  white-space: nowrap;
}
.kv_cta_wrap a.kv_cta_tel {
  background: #fff;
  color: #1a1a1a;
  border: 2px solid #1a1a1a;
}
/* 副 CTA 用のサブコピー（2段組の下段） */
.kv_cta_wrap a.kv_cta_tel .cta_lines {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  gap: 3px;
}
.kv_cta_wrap a.kv_cta_tel .cta_main {
  display: block;
  line-height: 1.1;
}
.kv_cta_wrap a.kv_cta_tel .cta_sub {
  display: block;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  color: #666;
  text-indent: .22em;
  white-space: nowrap;
}
.kv_cta_wrap a:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.3);
}
.kv_cta_wrap .kv_cta_sub {
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin-top: 8px;
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.header.kv_movie, .kv_movie { position: relative; }

/* ---------- 2) ファクトストリップ（信頼バー） ---------- */
.facts_strip {
  background: linear-gradient(135deg,#ff8a3d 0%,#ff5a1f 100%);
  color: #fff;
  padding: 20px 16px;
}
.facts_strip ul {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  list-style: none;
  padding: 0;
}
.facts_strip li {
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.35);
  padding: 4px 8px;
}
.facts_strip li:last-child { border-right: 0; }
.facts_strip .num {
  display: block;
  font-size: 44px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  text-shadow: 0 2px 0 rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.25);
  letter-spacing: .01em;
}
.facts_strip .num small {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: rgba(255,255,255,.92);
  margin-left: 3px;
  vertical-align: baseline;
  text-shadow: none;
  letter-spacing: .02em;
}
.facts_strip .lbl {
  display: block;
  font-size: 12px;
  margin-top: 4px;
  letter-spacing: .03em;
  color: rgba(255,255,255,.95);
}

/* ---------- 3) AI目玉セクション（明るめ・AIトーン） ---------- */
.box_ai_spotlight {
  /* 上下にAIグラデ帯、ベースはごく淡い青〜ピンクの空気感 */
  background:
    linear-gradient(90deg,#1e88e5 0%,#9c4dcc 25%,#ec407a 50%,#ff8a3d 75%,#ffd54a 100%) top    / 100% 6px no-repeat,
    linear-gradient(90deg,#ffd54a 0%,#ff8a3d 25%,#ec407a 50%,#9c4dcc 75%,#1e88e5 100%) bottom / 100% 6px no-repeat,
    linear-gradient(135deg, #eef3ff 0%, #f6efff 50%, #fff0f5 100%);
  color: #1a2240;
  padding: 86px 16px 94px;
  position: relative;
  overflow: hidden;
}
.box_ai_spotlight::before {
  content: "";
  position: absolute;
  inset: 6px 0; /* 上下6pxのストライプを隠さない */
  background:
    radial-gradient(600px 360px at 80% 8%,  rgba(30, 136, 229, .14), transparent 60%),
    radial-gradient(500px 320px at 10% 95%, rgba(236, 64, 122, .12), transparent 60%),
    radial-gradient(420px 260px at 50% 50%, rgba(156, 77, 204, .08), transparent 65%);
  pointer-events: none;
}
/* 背景の微細スパークル（明背景に映える薄い色付きドット） */
.box_ai_spotlight::after {
  content: "";
  position: absolute;
  inset: 6px 0;
  background-image:
    radial-gradient(2px 2px at 12% 18%,  rgba(30,136,229,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 28% 72%, rgba(156,77,204,.45), transparent 60%),
    radial-gradient(2px 2px at 55% 32%,  rgba(236,64,122,.40), transparent 60%),
    radial-gradient(1px 1px at 73% 58%,   rgba(30,136,229,.55), transparent 60%),
    radial-gradient(2.5px 2.5px at 88% 22%, rgba(156,77,204,.35), transparent 60%),
    radial-gradient(1px 1px at 42% 88%,   rgba(236,64,122,.45), transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 78%, rgba(30,136,229,.40), transparent 60%);
  animation: aiSparkleTwinkle 3.6s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes aiSparkleTwinkle {
  0%   { opacity: .35; transform: translate3d(0, 0, 0); }
  50%  { opacity: 1; }
  100% { opacity: .55; transform: translate3d(0, -4px, 0); }
}
.box_ai_spotlight > .wrapper {
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.box_ai_spotlight .ai_badge {
  display: inline-block;
  padding: 8px 18px;
  font-size: 14px;
  letter-spacing: .18em;
  background: linear-gradient(135deg,#1e88e5 0%,#9c4dcc 50%,#ec407a 100%);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  margin-bottom: 16px;
  /* 脈打つグローで「ここを見て！」を強調（青〜紫の AI トーン） */
  box-shadow: 0 0 0 0 rgba(156,77,204,.7), 0 6px 18px rgba(30,136,229,.4);
  animation: aiBadgePulse 2.2s ease-in-out infinite;
}
@keyframes aiBadgePulse {
  0%   { box-shadow: 0 0 0 0   rgba(156,77,204,.75), 0 6px 18px rgba(30,136,229,.4); }
  60%  { box-shadow: 0 0 0 14px rgba(156,77,204,0),  0 6px 18px rgba(30,136,229,.4); }
  100% { box-shadow: 0 0 0 0   rgba(156,77,204,0),   0 6px 18px rgba(30,136,229,.4); }
}
.box_ai_spotlight h2 {
  font-size: 36px;
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 16px;
}
.box_ai_spotlight h2 em {
  font-style: normal;
  /* AI らしい青→紫→ピンクのグラデにシマーアニメ */
  background: linear-gradient(90deg,#1e88e5 0%,#9c4dcc 25%,#ec407a 50%,#9c4dcc 75%,#1e88e5 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding: 0 .08em;
  font-weight: 900;
  /* グラデーションを流すシマーアニメ */
  animation: aiShimmerSweep 3.4s linear infinite;
}
@keyframes aiShimmerSweep {
  0%   { background-position:   0% 0; }
  100% { background-position: 220% 0; }
}
.box_ai_spotlight .ai_lead {
  font-size: 18px;
  line-height: 1.9;
  color: #2a2f4a;
  margin-bottom: 32px;
  max-width: 800px;
  text-align: left;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}
.ai_benefits li h3, .ai_benefits li p {
  text-align: left;
}
.ai_courses_list h4, .ai_courses_list ul {
  text-align: left;
}
.ai_benefits {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 20px;
  margin-bottom: 40px;
}
.ai_benefits li {
  list-style: none;
  background: #fff;
  border: 1px solid rgba(30, 136, 229, .15);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(30, 60, 120, .08);
  /* グリッドアイテムの暗黙的 min-width: min-content を解除。
     word-break:keep-all + 長い日本語フレーズで min-content が
     ビューポート幅を超え、グリッドが横に溢れるのを防ぐ */
  min-width: 0;
  position: relative;
  overflow: hidden;
}
/* カード上部にAIグラデの薄いアクセント帯 */
.ai_benefits li::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1e88e5, #9c4dcc 50%, #ec407a);
}
.ai_benefits li h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #1e88e5, #9c4dcc 60%, #ec407a);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* 「01. 基本から安心」等の見出しも狭幅で確実に折り返し */
  overflow-wrap: anywhere;
}
.ai_benefits li p {
  font-size: 16px;
  line-height: 1.85;
  color: #333;
  word-break: keep-all;
  /* 極狭幅では keep-all より overflow 回避を優先（はみ出し防止） */
  overflow-wrap: anywhere;
  line-break: strict;
}
.ai_courses_list {
  background: #fff;
  border: 1px solid rgba(30, 136, 229, .15);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 32px;
  box-shadow: 0 6px 18px rgba(30, 60, 120, .08);
}
.ai_courses_list h4 {
  font-size: 17px;
  letter-spacing: .08em;
  color: #0f2340;
  margin-bottom: 14px;
}
.ai_courses_list h4 .ai_courses_count {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  color: #fff;
  background: linear-gradient(135deg,#1e88e5,#9c4dcc 60%,#ec407a);
  border-radius: 999px;
  vertical-align: 2px;
  box-shadow: 0 2px 8px rgba(30,136,229,.35);
}
.ai_courses_list ul {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 8px 24px;
  list-style: none;
  padding: 0;
}
.ai_courses_list li {
  font-size: 16px;
  line-height: 1.65;
  color: #333;
  padding-left: 20px;
  position: relative;
}
.ai_courses_list li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg,#1e88e5,#9c4dcc 60%,#ec407a);
}
.ai_courses_list .more_note {
  margin-top: 12px;
  font-size: 14px;
  color: #6b7896;
}
.ai_cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 12px 36px;
  background: linear-gradient(135deg,#ffd54a,#ff8a3d);
  color: #1a1a1a;
  font-weight: 800;
  font-size: 17px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(255,170,60,.35);
}

/* ---------- 4) 料金セクション ---------- */
.box_price {
  background: #f7f8fb;
  padding: 56px 16px;
}
.box_price .wrapper {
  max-width: 1200px;
  margin: 0 auto;
}
.box_price header {
  text-align: center;
  margin-bottom: 24px;
}
.box_price header h2 {
  font-size: 32px;
  font-weight: 900;
  font-family: "Montserrat", sans-serif;
  letter-spacing: .08em;
  color: #0f2340;
}
.box_price header p {
  font-size: 16px;
  color: #333;
  margin-top: 8px;
}
.box_price .price_card {
  background: #fff;
  border: 2px solid #0f2340;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.box_price .price_main {
  font-size: 20px;
  font-weight: 700;
  color: #0f2340;
  margin-bottom: 4px;
}
.box_price .price_num {
  font-family: "Montserrat", sans-serif;
  font-size: 56px;
  font-weight: 900;
  color: #ff5a1f;
  line-height: 1;
}
.box_price .price_num small {
  font-size: 18px;
  color: #333;
  font-weight: 700;
  margin-left: 4px;
}
.box_price .price_unit {
  font-size: 14px;
  color: #555;
  margin-top: 6px;
}
.box_price .price_note {
  font-size: 13px;
  color: #555;
  margin-top: 16px;
  line-height: 1.8;
}
.box_price .price_merits {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.box_price .price_merits span {
  display: inline-block;
  padding: 6px 14px;
  background: #fff4e5;
  color: #c0430a;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

/* 料金表 */
.price_table {
  width: 100%;
  max-width: 720px;
  margin: 32px auto 0;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #bbc6d8;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(15, 35, 64, .08);
}
.price_table caption {
  caption-side: top;
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  color: #0f2340;
  padding: 0 4px 8px;
}
.price_table th,
.price_table td {
  padding: 14px 16px;
  border-bottom: 1px solid #eef1f7;
  font-size: 15px;
  text-align: left;
  vertical-align: middle;
}
.price_table tr:last-child th,
.price_table tr:last-child td { border-bottom: 0; }
.price_table th {
  width: 32%;
  background: #e7ecf5;
  color: #0f2340;
  font-weight: 700;
}
.price_table .pt_amount {
  font-family: "Montserrat", sans-serif;
  font-weight: 800;
  color: #ff5a1f;
  font-size: 17px;
  width: 28%;
}
.price_table .pt_note {
  color: #555;
  font-size: 13px;
}
.price_table .pt_free {
  color: #009a44;
}

/* 月謝シミュレーション */
.price_sim {
  margin-top: 40px;
}
.price_sim > h3 {
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: #0f2340;
  margin-bottom: 18px;
}
.sim_cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.sim_card {
  background: #fff;
  border: 1.5px solid #d6dce8;
  border-radius: 12px;
  padding: 18px 16px;
  text-align: center;
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.sim_card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}
.sim_card.recommend {
  border-color: #ff5a1f;
  background: #fff8f3;
  box-shadow: 0 8px 20px rgba(255,90,31,.15);
}
.sim_card .sim_badge {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg,#ff8a3d,#ff5a1f);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: .08em;
}
.sim_card .sim_label {
  font-size: 14px;
  font-weight: 800;
  color: #0f2340;
  margin-bottom: 4px;
}
.sim_card .sim_spec {
  font-size: 12px;
  color: #555;
  margin-bottom: 8px;
}
.sim_card .sim_calc {
  font-size: 11px;
  color: #888;
  margin-bottom: 8px;
  font-family: "Montserrat", sans-serif;
}
.sim_card .sim_total {
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: #ff5a1f;
  line-height: 1.1;
}
.sim_card .sim_total small {
  font-size: 12px;
  color: #333;
  font-weight: 700;
  margin-left: 2px;
}
.sim_note {
  text-align: center;
  font-size: 12px;
  color: #555;
  margin-top: 14px;
  line-height: 1.7;
}

@media screen and (max-width: 768px) {
  .price_table { font-size: 13px; }
  .price_table th, .price_table td { padding: 10px 10px; }
  .price_table th { width: 36%; }
  .price_table .pt_amount { font-size: 15px; }
  .sim_cards { grid-template-columns: repeat(2, 1fr); }
  .sim_card .sim_total { font-size: 22px; }
}

/* ---------- 5) 教室クイックセレクタ ---------- */
.school_quick {
  max-width: 900px;
  margin: 0 auto 32px;
  background: #fff;
  border: 2px solid #0f2340;
  border-radius: 16px;
  padding: 24px;
}
.school_quick h3 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 12px;
  color: #0f2340;
}
.school_quick .form_row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.school_quick select {
  flex: 1;
  min-width: 200px;
  height: 48px;
  padding: 0 14px;
  font-size: 16px;
  border: 1.5px solid #ccd4e0;
  border-radius: 8px;
  background: #fff;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%230f2340' stroke-width='2' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}
.school_quick #quickResult {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #ccd4e0;
  min-height: 0;
}
.school_quick #quickResult.empty { display: none; }
.school_quick .q_card {
  background: #f7f8fb;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.school_quick .q_card h4 {
  font-size: 16px;
  font-weight: 800;
  color: #0f2340;
  margin-bottom: 6px;
}
.school_quick .q_card .q_addr {
  font-size: 16px;
  line-height: 1.55;
  color: #333;
  margin-bottom: 12px;
}
/* 住所: 〒xxx と 都道府県以降を 2 行に分割表示（「階」孤立改行の防止） */
.school_quick .q_card .q_addr {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.school_quick .q_card .q_zip {
  font-size: 13px;
  color: #555;
  letter-spacing: .02em;
}
.school_quick .q_card .q_addr_main {
  font-size: 15px;
  color: #1a1a1a;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}
/* 教室写真（控えめなサイズで中央寄せ） */
.school_quick .q_card .q_photo {
  margin: 0 auto 10px;
  border-radius: 8px;
  overflow: hidden;
  background: #e9edf4;
  aspect-ratio: 16 / 10;
  max-width: 240px;
  width: 100%;
}
.school_quick .q_card .q_photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* CTA は2段構え（縦積み）に変更、大型タップ領域 */
.school_quick .q_card .q_actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}
.school_quick .q_card .q_actions a {
  width: 100%;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  border-radius: 10px;
  letter-spacing: .02em;
  line-height: 1.2;
  box-shadow: 0 4px 10px rgba(15, 35, 64, .08);
  transition: transform .15s ease, box-shadow .15s ease;
}
.school_quick .q_card .q_actions a:hover,
.school_quick .q_card .q_actions a:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(15, 35, 64, .18);
}
.school_quick .q_card .q_tel {
  background: #fff;
  color: #0f2340;
  border: 2px solid #0f2340;
  flex-direction: column;
  gap: 2px;
}
.school_quick .q_card .q_tel .q_tel_lbl {
  font-size: 13px;
  font-weight: 700;
}
.school_quick .q_card .q_tel .q_tel_num {
  font-size: 20px;
  font-weight: 900;
  font-family: "Montserrat", sans-serif;
  letter-spacing: .04em;
}
.school_quick .q_card .q_trial {
  background: linear-gradient(135deg,#ff8a3d,#ff5a1f);
  color: #fff;
  font-size: 18px;
}
/* モバイル: セレクトを縦積み＋全幅化。iOS ピッカーに極力広い
   視覚的文脈を提供し、短縮ラベル（JS側で生成）との合わせ技で改行を抑制 */
@media screen and (max-width: 767px) {
  .school_quick {
    padding: 16px;
    border-radius: 12px;
  }
  .school_quick h3 {
    font-size: 15px;
  }
  .school_quick .form_row {
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
  }
  .school_quick select {
    width: 100%;
    min-width: 0;
    height: 52px;        /* タップしやすく */
    font-size: 15px;
    padding: 0 40px 0 12px;
    text-overflow: ellipsis;
  }
}

/* ---------- 6a) モバイルFV直下CTA ---------- */
.m_fv_cta {
  display: none;
}
@media screen and (max-width: 768px) {
  .m_fv_cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .m_fv_cta a {
    min-height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: .02em;
    text-align: center;
  }
  .m_fv_cta .m_tel {
    background: #0f2340;
    color: #fff;
  }
  .m_fv_cta .m_trial {
    background: linear-gradient(135deg,#ff8a3d,#ff5a1f);
    color: #fff;
  }
  .m_fv_cta .m_tel small {
    display: block;
    font-size: 11px;
    font-weight: 500;
    margin-top: 2px;
    opacity: .8;
  }
}

/* ---------- 6b) モバイル固定CTA（スクロール後に表示） ---------- */
.m_bottom_cta {
  display: none;
}
@media screen and (max-width: 768px) {
  .m_bottom_cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(255,255,255,.7);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9998;
    box-shadow: 0 -4px 16px rgba(0,0,0,.18);
    transform: translateY(100%);
    transition: transform .3s ease;
  }
  .m_bottom_cta.is_visible {
    transform: translateY(0);
  }
  .m_bottom_cta a {
    min-height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 8px;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.2;
    text-decoration: none;
    letter-spacing: .04em;
    text-align: center;
  }
  .m_bottom_cta .m_tel {
    background: #0f2340;
    color: #fff;
  }
  .m_bottom_cta .m_trial {
    background: linear-gradient(135deg,#ff8a3d,#ff5a1f);
    color: #fff;
  }
  .m_bottom_cta .m_tel small {
    display: block;
    font-size: 11px;
    font-weight: 500;
    opacity: .85;
    margin-top: 2px;
  }
  body { padding-bottom: 64px; }
}

/* ---------- 7) モバイル最適化 ---------- */
@media screen and (max-width: 768px) {
  /* KV内CTAはモバイルでは非表示（m_fv_ctaで代替） */
  .kv_cta_wrap { display: none !important; }

  /* KV高さ縮小（モバイルFV内に「KV+facts_strip+m_fv_cta」を全部収める）
     主要削減ポイント: 不要な margin-bottom と KV 最低高を圧縮 */
  .kv_movie #kv_movie {
    min-height: 30rem !important;
    margin-bottom: 2rem !important;
  }

  /* ファクトストリップをモバイルで縦方向圧縮 */
  .facts_strip { padding: 10px 12px; }
  .facts_strip ul {
    grid-template-columns: repeat(2,1fr);
    gap: 6px 8px;
  }
  .facts_strip li {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.25);
    padding: 4px 6px 8px;
  }
  .facts_strip li:nth-last-child(1),
  .facts_strip li:nth-last-child(2) { border-bottom: 0; padding-bottom: 4px; }
  .facts_strip .num { font-size: 32px; line-height: 1; white-space: nowrap; }
  .facts_strip .num small { font-size: 11px; }
  /* ラベルは日本語の単語途中で切れないように keep-all */
  .facts_strip .lbl {
    font-size: 11px;
    line-height: 1.4;
    margin-top: 2px;
    word-break: keep-all;
    overflow-wrap: break-word;
  }

  .box_ai_spotlight { padding: 64px 16px 56px; }
  .box_ai_spotlight h2 { font-size: 26px; }
  .ai_benefits { grid-template-columns: 1fr; gap: 12px; }
  .ai_benefits li { padding: 16px; }
  .ai_benefits li h3 { font-size: 17px; }
  .ai_benefits li p { font-size: 15px; line-height: 1.8; }
  .ai_courses_list ul { grid-template-columns: 1fr; }

  .box_price { padding: 40px 16px; }
  .box_price header h2 { font-size: 26px; }
  .box_price .price_num { font-size: 44px; }

}

/* ---------- 8) アクセシビリティ: 動作量設定の尊重 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 9) H1テキスト（視覚的には隠すがSEO/AT用に配置） ---------- */
.sr_only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* 60講座セクション内のAI NEWタグ */
.box_course .template_column li p .course_ai_tag {
  display: inline-block;
  background: linear-gradient(135deg,#ffd54a,#ff8a3d);
  color: #1a1a1a;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 4px;
  margin-right: 4px;
  vertical-align: 1px;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* 旧 <h1><img> から <p class="site_logo"><img> への差し替え互換 + サイズUP */
.kv_movie .kv_movie_cap .site_logo {
  max-width: 52rem;
  width: 100%;
  margin: 1.5rem 0 1rem 1.5rem;
}
.kv_movie .kv_movie_cap .site_logo img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (max-width: 768px) {
  .kv_movie .kv_movie_cap .site_logo {
    margin: 1.5rem .7rem 2rem;
    max-width: 34rem;
  }
}

/* ---------- 料金ページ移植：特徴4本柱 ---------- */
.price_features {
  margin: 28px 0 32px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.price_features .pf_item {
  background: #fff;
  border: 1px solid #e4e8f0;
  border-radius: 12px;
  padding: 24px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  align-items: center;
}
.price_features .pf_item_full {
  grid-template-columns: 1fr;
}
.price_features .pf_item figure {
  margin: 0;
}
.price_features .pf_item figure img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}
.price_features .pf_body {
  text-align: left;
}
.price_features .pf_body h3 {
  font-size: 20px;
  font-weight: 800;
  color: #e95513;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e95513;
  text-align: left;
}
.price_features .pf_body p {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  margin: 0 0 6px;
  text-align: left;
}
.price_features .pf_note {
  font-size: 13px !important;
  color: #777 !important;
  margin-top: 6px !important;
}
@media screen and (max-width: 767px) {
  .price_features .pf_item {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .price_features .pf_item figure {
    max-width: 240px;
    margin: 0 auto;
  }
}

/* ---------- 料金ページ移植：ペルソナ別モデル ---------- */
.price_models {
  margin: 32px 0 24px;
}
.price_models > h3 {
  font-size: 20px;
  font-weight: 800;
  color: #0f2340;
  margin-bottom: 16px;
  text-align: left;
}
.price_models .pm_body {
  text-align: left;
}
.price_models .pm_item {
  background: #fff;
  border: 1px solid #e4e8f0;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 28px;
  align-items: flex-start;
}
.price_models .pm_item figure {
  margin: 0;
}
.price_models .pm_item figure img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}
.price_models .pm_body h4 {
  font-size: 17px;
  font-weight: 800;
  color: #e95513;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e95513;
}
.price_models .pm_body p {
  font-size: 15px;
  line-height: 1.7;
  color: #333;
  margin: 0 0 10px;
}
.price_models .pm_spec {
  font-weight: 700;
  color: #0f2340 !important;
}
.price_models .pm_price {
  font-size: 26px !important;
  font-weight: 900;
  color: #e95513 !important;
  margin-top: 8px !important;
  font-family: "Montserrat", sans-serif;
}
.price_models .pm_price small {
  font-size: 14px;
  font-weight: 700;
  margin-left: 4px;
}
@media screen and (max-width: 767px) {
  .price_models .pm_item {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .price_models .pm_item figure {
    max-width: 240px;
    margin: 0 auto;
  }
}

/* ---------- 料金ページ移植：個人レッスン ---------- */
.price_private {
  background: #fff8f3;
  border: 1px solid #ffd4b0;
  border-radius: 12px;
  padding: 24px;
  margin: 24px 0;
}
.price_private h3 {
  font-size: 19px;
  font-weight: 800;
  color: #e95513;
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid #e95513;
  text-align: left;
}
.price_private .pp_text {
  text-align: left;
}
.price_private .pp_body {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 20px;
  align-items: center;
}
.price_private .pp_body p {
  font-size: 15px;
  line-height: 1.8;
  color: #333;
  margin: 0;
}
.price_private .pp_body figure {
  margin: 0;
}
.price_private .pp_body figure img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}
@media screen and (max-width: 767px) {
  .price_private .pp_body {
    grid-template-columns: 1fr;
  }
  .price_private .pp_body figure {
    max-width: 220px;
    margin: 0 auto;
  }
}

/* ---------- 講座サムネ：「この講座を受講しました！」バッジ（帯スタイル：画像と非干渉） ---------- */
.course_thumb {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.course_thumb .took_badge {
  order: -1;                 /* HTMLが img → span → figcaption の並びなので、視覚上は最上段へ */
  display: block;
  background: linear-gradient(135deg,#ff8a3d,#ff5a1f);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
  padding: 8px 12px;
  border-radius: 8px 8px 0 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
  letter-spacing: .04em;
  white-space: normal;
  margin-bottom: 6px;        /* 画像との間に少し余白：帯として独立 */
}
.course_thumb .took_badge br { display: none; }  /* 帯表示では改行不要（横幅が広いので1行で収まる） */
/* main.cssのfigure img負マージン（margin-top:-3rem/-1rem, margin-right:-4.5rem）が
   帯を覆ってしまうのを回避。course_thumb 内では素直な縦積みに */
.thoughts li figure.course_thumb img,
.box_worries .worries_after .worries_after_box .thoughts li figure.course_thumb img,
.box_worries .worries_after .worries_after_box.daily .thoughts li:nth-of-type(1) figure.course_thumb img,
.box_worries .worries_after .worries_after_box.business .thoughts li:nth-of-type(1) figure.course_thumb img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border-radius: 4px;
}
@media screen and (max-width: 767px) {
  .course_thumb .took_badge {
    font-size: 11px;
    padding: 6px 10px;
    letter-spacing: .02em;
  }
}

/* ---------- FAQコンパクト化＆カテゴリ見出し ---------- */
.box_faq {
  padding: 8rem 0 !important;
}
.box_faq header {
  margin-bottom: 3rem !important;
}
.box_faq .faq_group {
  margin-bottom: 3rem;
}
.box_faq .faq_cat_title {
  font-size: 1.9rem;
  font-weight: 800;
  color: #c30d23;
  padding: 0 0 .8rem;
  margin: 0 0 1.2rem;
  border-bottom: 2px solid #c30d23;
  letter-spacing: .02em;
}
.box_faq .faq_group ul {
  margin-bottom: 0 !important;
  padding: 0;
}
.box_faq .faq_group ul li {
  list-style: none;
  margin-bottom: .8rem;
}
.box_faq ul li dl dt label {
  padding: 1.4rem 8rem 1.4rem 2rem !important;
  font-size: 1.5rem !important;
  line-height: 1.5 !important;
  min-height: auto !important;
}
.box_faq ul li dl dt label::before {
  font-size: 1.6rem !important;
  margin-right: 1.2rem !important;
}
.box_faq ul li dl dd {
  font-size: 1.4rem;
  line-height: 1.7;
}
.box_faq ul li dl dd strong {
  color: #c30d23;
}
@media screen and (max-width: 767px) {
  .box_faq {
    padding: 6rem 0 8rem !important;
  }
  .box_faq .faq_cat_title {
    font-size: 1.7rem;
  }
  .box_faq ul li dl dt label {
    padding: 1.2rem 7rem 1.2rem 1.4rem !important;
    font-size: 1.35rem !important;
  }
}

/* ---------- 9b) PC-FV：h2/p（左）と kv_cta_wrap（右下）の衝突防止＋CTA強化 ---------- */
@media screen and (min-width: 769px) {
  /* h2・サブコピーが右側（映像・ボタン領域）へはみ出さないよう幅制限 */
  .kv_movie .kv_movie_cap h2,
  .kv_movie .kv_movie_cap p {
    max-width: 46vw;
  }
  /* CTA ボタン群は右下に寄せる（左のキャッチコピーと重ならない） */
  .kv_cta_wrap {
    left: auto;
    right: 3%;
    bottom: 5%;
    width: auto;
    max-width: 54%;
    padding: 0;
    gap: 18px;
    justify-content: flex-end;
  }
  .kv_cta_wrap .kv_cta_sub {
    text-align: right;
    font-size: 16px;
    font-weight: 800;
    margin-top: 14px;
    text-shadow: 0 2px 6px rgba(0,0,0,.75), 0 0 12px rgba(0,0,0,.35);
  }

  /* CTA ボタンを大幅大型化＆強調 */
  .kv_cta_wrap a {
    min-height: 72px;
    padding: 14px 34px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .05em;
    box-shadow: 0 14px 32px rgba(0,0,0,.38), 0 0 0 2px rgba(255,255,255,.14);
  }
  /* 主 CTA：グラデを濃く、矢印アイコン付き、ソフトパルスで視線誘導 */
  .kv_cta_wrap a.kv_cta_primary {
    background: linear-gradient(135deg, #ffa05a 0%, #ff6f2a 48%, #e8420f 100%);
    position: relative;
    animation: kv_cta_glow 2.4s ease-in-out infinite;
  }
  .kv_cta_wrap a.kv_cta_primary .cta_main {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .05em;
  }
  .kv_cta_wrap a.kv_cta_primary .cta_sub {
    font-size: 12px;
    letter-spacing: .32em;
    margin-top: 1px;
  }
  /* 副 CTA：枠線を太く、背景を純白で視認性UP */
  .kv_cta_wrap a.kv_cta_tel {
    border-width: 3px;
    background: #fff;
  }
  .kv_cta_wrap a.kv_cta_tel .cta_main {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .05em;
  }
  .kv_cta_wrap a.kv_cta_tel .cta_sub {
    font-size: 12px;
    letter-spacing: .28em;
    color: #555;
    margin-top: 1px;
  }
}

@keyframes kv_cta_glow {
  0%, 100% { box-shadow: 0 14px 32px rgba(0,0,0,.38), 0 0 0 0 rgba(255,138,61,.0); }
  50%      { box-shadow: 0 16px 40px rgba(255,90,31,.55), 0 0 0 8px rgba(255,138,61,.18); }
}
@media (prefers-reduced-motion: reduce) {
  .kv_cta_wrap a.kv_cta_primary { animation: none !important; }
}

/* ---------- 9c) PC-FV 縦方向節約：CTA+ファクトストリップをファーストビュー内に ---------- */
@media screen and (min-width: 769px) {
  /* KV動画の高さを 700px 固定 → ビューポート依存に。
     facts_strip（約100px）が fold に収まるよう 78vh で頭打ち */
  .kv_movie #kv_movie {
    min-height: min(56rem, 78vh);
    max-height: 86vh;
  }
  /* ロゴ周りのマージンを圧縮 */
  .kv_movie .kv_movie_cap .site_logo {
    margin: .6rem 0 .2rem 1.5rem;
    max-width: 44rem;
  }
  /* 下部 inner の padding と見出し上マージンをタイトに */
  .kv_movie .kv_movie_cap .inner {
    padding-bottom: 2.4vw;
  }
  .kv_movie .kv_movie_cap h2 {
    margin-top: .2vw;
  }
  .kv_movie .kv_movie_cap h2 .bgLRextendTrigger {
    margin-bottom: .8rem;
  }
  .kv_movie .kv_movie_cap p {
    margin-top: .8vw;
  }
  /* award アイコンもわずかに縮めて縦を稼ぐ */
  .kv_movie .kv_movie_cap .award img {
    width: 22vw;
    max-width: 40rem;
  }
  /* CTA はボタンの影が切れないよう少し上へ */
  .kv_cta_wrap {
    bottom: 4%;
  }
}

/* ---------- 10) スマホFVレイアウト整理（h2 帯の可視化 + facts_strip の分離） ---------- */
@media screen and (max-width: 768px) {
  /* kv_movie はフロー配置。動画は固定アスペクト、キャプションは動画の下に自然フロー */
  .kv_movie {
    overflow: visible !important;
  }
  .kv_movie::before { display: none !important; }

  .kv_movie #kv_movie {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10;
    min-height: 0 !important;
    margin: 0 !important;
    object-fit: cover;
    display: block;
  }

  /* キャプションを static にして動画の下へ。
     kv_movie (position:relative) が site_logo / award の絶対配置の基準になる */
  .kv_movie .kv_movie_cap {
    position: static !important;
    height: auto !important;
    display: block !important;
    background: none !important;
  }
  .kv_movie .kv_movie_cap .inner {
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
  }

  /* ロゴ：動画の下（h2 オレンジ帯の直上）に自然フロー配置、中央寄せ */
  .kv_movie .kv_movie_cap .site_logo {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    max-width: none !important;
    padding: 1.4rem 1.5rem .4rem !important;
    background: linear-gradient(90deg, rgb(241 118 76) 0%, rgb(255 153 106) 100%) !important;
    filter: none !important;
    text-align: center !important;
  }
  .kv_movie .kv_movie_cap .site_logo img {
    display: block !important;
    max-width: 40rem !important;
    width: 80% !important;
    height: auto !important;
    margin: 0 auto !important;
  }

  /* award：動画の中央下寄り（h2 帯に少し被るくらい） */
  .kv_movie .kv_movie_cap .award {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 22vw !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    z-index: 2;
    pointer-events: none;
  }
  .kv_movie .kv_movie_cap .award img {
    max-width: 26rem !important;
    width: 50vw !important;
    height: auto !important;
    margin: 0 !important;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.25));
  }

  /* h2 オレンジ帯：ロゴ帯と連続して見えるよう上 padding は小さく。中央揃え
     ※FV内に m_fv_cta まで収めるため下 padding も圧縮 */
  .kv_movie .kv_movie_cap .inner > div {
    padding: .2rem 1.5rem .8rem !important;
    text-align: center !important;
  }
  /* サブコピーの下マージンを圧縮 */
  .kv_movie .kv_movie_cap p.kv_sub_lead {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
  }
  .kv_movie .kv_movie_cap h2 {
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }
  .kv_movie .kv_movie_cap h2 .bgLRextendTrigger {
    font-size: clamp(22px, 6.2vw, 30px);
    line-height: 1.35;
    margin-bottom: .3rem !important;
    display: inline-block;
  }
  /* アニメーション未発火時の保険（JSが読み込まれない等） */
  .kv_movie .kv_movie_cap h2 .bgappearTrigger,
  .kv_movie .kv_movie_cap h2 .bgLRextendTrigger {
    opacity: 1 !important;
  }
  .kv_movie .kv_movie_cap p {
    padding: 0 !important;
    margin: 1rem 0 0 !important;
    font-size: 1.5rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  /* facts_strip との境界：薄いシャドウで h2 帯と明確に分離 */
  .facts_strip {
    box-shadow: inset 0 2px 0 rgba(0,0,0,.12);
  }
}

/* ---------- 11) worries_before Business 見出しの AI アクセント ---------- */
/* 日本語の単語中途切り防止（"スキル" が "ス|キル" に割れる等） */
.worries_before .business h3,
.worries_before .daily h3 {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-break: strict;
}
/* 「&AIスキル」を一塊で改行させる（&AIとスキルが分断されないように）
   ※ main.css の `.box_worries .worries_before .business .inner section h3 span`
     ( color:#7a6a56; padding:0 .6rem ) より詳細度を高くする必要があるため
     フルチェーンで記述している */
.box_worries .worries_before .business .inner section h3 .ai_phrase {
  white-space: nowrap;
  padding: 0;
}
/* 「&」は控えめに小さく */
.box_worries .worries_before .business .inner section h3 .ai_phrase .amp {
  font-size: .65em;
  font-weight: 700;
  margin: 0 .05em 0 .02em;
  padding: 0;
  vertical-align: .12em;
}
/* 「AI」を AI らしい寒色→暖色グラデーション（青→紫→ピンク）で強調 */
.box_worries .worries_before .business .inner section h3 .ai_phrase .ai_accent {
  display: inline-block;
  font-weight: 900;
  font-size: 1.35em;
  letter-spacing: .04em;
  padding: 0 .1em;
  position: relative;
  background: linear-gradient(90deg, #1e88e5 0%, #9c4dcc 50%, #ec407a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* ---------- 12) worries_after 連番 01-04 の視認性向上 ---------- */
/* 文字色(セクションカラー)はそのまま、外周に白フチを付けて
   背景写真や白地どちらでも読みやすく */
.box_worries .worries_after .worries_after_box.daily .worries_column > li p::before {
  color: #e86350;
  text-shadow:
    -2px -2px 0 #ffffff,  2px -2px 0 #ffffff,
    -2px  2px 0 #ffffff,  2px  2px 0 #ffffff,
    -2px  0   0 #ffffff,  2px  0   0 #ffffff,
     0   -2px 0 #ffffff,  0    2px 0 #ffffff;
}
.box_worries .worries_after .worries_after_box.business .worries_column > li p::before {
  color: #2e93c5;
  text-shadow:
    -2px -2px 0 #ffffff,  2px -2px 0 #ffffff,
    -2px  2px 0 #ffffff,  2px  2px 0 #ffffff,
    -2px  0   0 #ffffff,  2px  0   0 #ffffff,
     0   -2px 0 #ffffff,  0    2px 0 #ffffff;
}

/* ---------- 13) worries_before のチェックアイコン縮みフィックス ---------- */
/* li が display:flex なので ::before は flex item 扱い。
   既定 flex-shrink:1 により狭幅で長文 li のアイコンだけが
   縮んで見える（300px 以下で顕著）のを防止 */
.box_worries .worries_before .inner section ul li::before {
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: auto;
}

/* ---------- 14) box_point カードの中央揃え強化 ---------- */
/* 各カードは flex column + align-items:center だが、
   - h3 にテキスト中央揃え指定が無くフレックスアイテム幅次第で左寄りに見える
   - icon02 はソース PNG 内コンテンツが縦長(79x104)で見た目バランスが崩れる
   ため、明示的にテキスト中央化＆アイコン表示サイズ統一を行う */
.box_point .template_column li {
  text-align: center;
}
.box_point .template_column li h3 {
  text-align: center;
  width: 100%;
}
.box_point .template_column li > img {
  display: block;
  width: 14rem;
  height: 14rem;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 15) worries_after「日常×パソコン知識」「ビジネス×パソコン&AIスキル」バッジ CSS再現 ---------- */
/* image/worries_after_icon01.png / icon02.png の置換。
   既存の `<i>` 26rem 枠を流用し内側を flex で組む。
   テキストサイズは `<i>` の font-size に対する em 指定で各ブレークポイント連動。
   全体を 30度 右回転（シール風アクセント） */
.box_worries .worries_after .worries_after_box > header h3 i.cross_badge {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  box-shadow: 0 .8rem 1.6rem rgba(0, 0, 0, .15);
  font-size: 3.8rem;
  line-height: 1.05;
  text-align: center;
  padding: 0;
}
/* daily: オレンジ系 平面グラデ／左に20度傾ける */
.box_worries .worries_after .worries_after_box.daily > header h3 i.cross_badge.is-daily {
  background: linear-gradient(165deg, #ffd1a3 0%, #ff9362 55%, #e16640 100%);
  transform: rotate(-20deg);
}
/* business: ブルー系 平面グラデ／右に20度傾ける */
.box_worries .worries_after .worries_after_box.business > header h3 i.cross_badge.is-biz {
  background: linear-gradient(165deg, #b8dfeb 0%, #6cc1da 55%, #4a9fc1 100%);
  transform: rotate(20deg);
}
.box_worries .worries_after .worries_after_box > header h3 i.cross_badge > .bp_line {
  display: block;
  color: #fff;
  font-weight: 800;
  letter-spacing: .08em;
  font-size: 1em;
  text-shadow: 0 .15rem .25rem rgba(0, 0, 0, .15);
}
.box_worries .worries_after .worries_after_box > header h3 i.cross_badge > .bp_cross {
  display: block;
  color: rgba(255, 255, 255, .75);
  font-weight: 800;
  font-size: .9em;
  margin: .05em 0;
  letter-spacing: 0;
  text-shadow: 0 .15rem .25rem rgba(0, 0, 0, .15);
}
/* business badge 内「&」は小さく */
.box_worries .worries_after .worries_after_box > header h3 i.cross_badge > .bp_line > .bp_amp {
  font-size: .62em;
  font-weight: 700;
  font-style: normal;
  margin: 0 .05em 0 .02em;
  vertical-align: .12em;
}
/* business badge 内「AI」は AI らしい青→紫→ピンクのグラデーション */
.box_worries .worries_after .worries_after_box > header h3 i.cross_badge > .bp_line > .bp_ai {
  display: inline-block;
  font-style: normal;
  font-weight: 900;
  font-size: 1.18em;
  background: linear-gradient(90deg, #1e88e5 0%, #9c4dcc 50%, #ec407a 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@media screen and (max-width: 1099px) {
  .box_worries .worries_after .worries_after_box > header h3 i.cross_badge {
    font-size: 2.9rem;
  }
  /* タブレット: 画面右/左の見切れを軽減 */
  .box_worries .worries_after .worries_after_box.business > header h3 i.cross_badge {
    margin-right: -1rem;
  }
  .box_worries .worries_after .worries_after_box.daily > header h3 i.cross_badge {
    margin-left: -1rem;
  }
}
@media screen and (max-width: 767px) {
  .box_worries .worries_after .worries_after_box > header h3 i.cross_badge {
    font-size: 4.5vw;
  }
  /* SP: バッジが画面端で見切れ & h3テキストと被る問題を解消
     1) 負マージンを解除して画面内に収める
     2) h3 にバッジ幅分の padding を持たせ、テキストとの重なりを防ぐ */
  /* h3 タイトルは中央寄せ（バッジに合わせて左右に寄せていたのを解除） */
  .box_worries .worries_after .worries_after_box > header h3 {
    text-align: center;
    padding: 3rem 1rem;
  }
  /* バッジは h3 の下に出るよう margin-bottom を負値に
     （30vw 高に対して -12rem 押し下げ → h3 テキストとは分離しつつ
       下の写真への被りも最小限） */
  .box_worries .worries_after .worries_after_box > header h3 i.cross_badge {
    margin-bottom: -12rem !important;
  }
  .box_worries .worries_after .worries_after_box.business > header h3 i.cross_badge {
    margin-right: 0;
    right: 1rem;
  }
  .box_worries .worries_after .worries_after_box.daily > header h3 i.cross_badge {
    margin-left: 0;
    left: 1rem;
  }
  /* worries_after の SP タイトル画像をフル幅で表示
     （main.css の max-width:29.6rem で小さく表示されていたのを解除） */
  .box_worries .worries_after > header h2 {
    max-width: 100% !important;
    padding: 0 1rem;
  }
  .box_worries .worries_after > header h2 img.look_sp {
    width: 100%;
    height: auto;
    display: block;
  }
  /* 01〜04 の連番を画像にもっと深く食い込ませる
     （main.css は margin-top:-3rem。SP では大きめに上にずらす） */
  .box_worries .worries_after .worries_after_box .worries_column > li p::before {
    margin-top: -2.5rem;
    font-size: 6rem;
  }
  /* SP: テキスト block 自体も画像と重なって "1組" 感を出す
     （連番と一緒に block ごと上にせり上がる） */
  .box_worries .worries_after .worries_after_box .worries_column > li p {
    margin-top: -8.25rem;
  }
}

/* ---------- 16) PRICE / AI セクションのスクロール演出強化 ---------- */
/* PRICE/AI セクションの主要要素に fade を付与（HTML側で fade_d/_l/_r 付与済）。
   ここでは複数並ぶカード群にだけ控えめなスタッガーを当てる。CTA は遅延を付けないので
   セクション到達と同時に視界に入る */

/* 料金 4特徴カード: 0.08s刻みの軽いスタッガー */
.box_price .price_features .pf_item:nth-of-type(2) { transition-delay: .08s; }
.box_price .price_features .pf_item:nth-of-type(3) { transition-delay: .16s; }
.box_price .price_features .pf_item:nth-of-type(4) { transition-delay: .24s; }

/* 受講目的別 モデル4枚: 同じく軽くスタッガー */
.box_price .price_models .pm_item:nth-of-type(2) { transition-delay: .08s; }
.box_price .price_models .pm_item:nth-of-type(3) { transition-delay: .16s; }
.box_price .price_models .pm_item:nth-of-type(4) { transition-delay: .24s; }

/* AI 訴求 3カード: 左→中央→右の自然順 */
.box_ai_spotlight .ai_benefits li:nth-child(2) { transition-delay: .08s; }
.box_ai_spotlight .ai_benefits li:nth-child(3) { transition-delay: .16s; }

/* ---------- 16b) SP: ページトップボタンを底部固定CTAより上に逃がす ---------- */
@media screen and (max-width: 768px) {
  /* m_bottom_cta（高さ約 60-72px、bottom:0、z-index:9998）に隠れないよう持ち上げる */
  #js_pagetop {
    bottom: 76px !important;
  }
}

/* ---------- 16c) box_trial セクションの過剰余白圧縮 ---------- */
/* main.css の `.box_trial { padding: 18rem 0 }` / SP は `12rem 0 6rem`、
   かつ `.box_trial p { padding-bottom: 6rem(PC)/4rem(SP) }` が
   `<p class="q_addr">` にも降りてきて謎の隙間になっていた */
.box_trial {
  padding: 6rem 0 4rem !important;
}
.school_quick .q_card .q_addr {
  padding-bottom: 0 !important;
  letter-spacing: normal;
}
@media screen and (max-width: 767px) {
  .box_trial {
    padding: 3rem 0 3rem !important;
  }
}

/* ---------- 16d) 「こんなお悩みを…」上余白圧縮（SP） ---------- */
/* main.css `.worries_before_cap h2 { margin-top: 8rem }` (=128px) が過剰だったため縮小 */
@media screen and (max-width: 767px) {
  .box_worries .worries_before .worries_before_cap h2 {
    margin-top: 3rem !important;
  }
}

/* ---------- 17) FREE TRIAL セクション着地の安定化 ---------- */
/* #box_trial は CV の最終目的地。
   - fade_d を除去済み（HTML側） → entry アニメーションなしで即可視
   - scroll-margin-top でアンカー着地位置に余白を確保（ヘッダー被り防止）
   - ※以前 html { scroll-behavior: smooth } を入れていたが、それが原因で
     window.scrollTo() でも 2-3秒のスムーズスクロールが発動し
     CV重要セクションへの遷移が遅延していたため削除した */
#box_trial {
  scroll-margin-top: 2rem;
}