@charset "UTF-8";
/* ==========================================================================
   ai-school-lp / style.css
   デザインの正: G:\マイドライブ\2026\AIスクール事業\08_LPデザイン仕様.md
   - SP ファースト → @media (min-width:768px) で上書き
   - 基準幅 PC1440 / SP375、ブレークポイント 768px
   - 影はほぼ使わない（radius 8px + 2px solid #E6E6E6 + 塗り分けのフラット設計）
   - スクロール連動アニメーションなし（FVマーキー / hover .5s / Splide 手動のみ）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. デザイントークン（08 §1・§2・§3）
   -------------------------------------------------------------------------- */
:root {
  /* color */
  --cta-orange: #f47806;
  --cta-orange-hover: #ff9f47;
  --brand-grad: linear-gradient(90deg, #309da4, #2368a7);
  --teal-deep: #134055;
  --teal: #2e92a5;
  --bg-alt: #f0f5fa;
  --accent-pink: #e1367c;
  --badge-new: #dd1969;
  --marker-yellow: linear-gradient(transparent 60%, rgba(255, 219, 91, 0.6) 0);
  --c-head: #1a1a1a;
  --c-body: #000;
  --c-sub: #808080;
  --c-link: #2760fd;
  --c-footer-bg: #172223;
  --c-border: #e6e6e6;
  --c-white: #fff;

  /* shape */
  --radius: 8px;
  --radius-btn: 5px;
  --radius-pill: 9999px;
  --border: 2px solid var(--c-border);

  /* layout */
  --container: 1000px;
  --container-wide: 1200px;
  --gutter: 20px;
  --header-h: 48px; /* SP */
  /* アンカー着地位置。ヘッダー高 + 12px でヘッダー下端への密着を防ぐ */
  --anchor-offset: calc(var(--header-h) + 12px);

  /* type */
  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", meiryo,
    sans-serif;
  --font-en: "Roboto", "Noto Sans JP", sans-serif;

  /* motion */
  --hover-transition: 0.5s;
}

@media (min-width: 768px) {
  :root {
    --gutter: 32px;
    --header-h: 80px; /* PC */
  }
}

/* --------------------------------------------------------------------------
   2. リセット
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 62.5%; /* 1rem = 10px */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.8;
  color: var(--c-body);
  background: var(--c-white);
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

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

a {
  color: var(--c-link);
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

summary::-webkit-details-marker {
  display: none;
}

:focus-visible {
  outline: 2px solid var(--cta-orange);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. レイアウト共通
   -------------------------------------------------------------------------- */
.l-container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.l-container--wide {
  max-width: calc(var(--container-wide) + var(--gutter) * 2);
}

.l-section {
  padding-block: 48px;
  /* sticky ヘッダー分のアンカーオフセット（+12px でヘッダー下端への密着を防ぐ） */
  scroll-margin-top: var(--anchor-offset);
}

.l-section--lg {
  padding-block: 72px;
}

.l-section--alt {
  background: var(--bg-alt);
}

.l-section--teal-deep {
  color: var(--c-white);
  background: var(--teal-deep);
}

.l-section--teal {
  color: var(--c-white);
  background: var(--teal);
}

@media (min-width: 768px) {
  .l-section {
    padding-block: 64px;
  }

  .l-section--lg {
    padding-block: 100px;
  }
}

/* SP フローティング CTA(70px) と重ならないよう最下部に余白を確保（+16px の逃げ） */
.l-page-bottom-space {
  height: 86px;
}

@media (min-width: 768px) {
  .l-page-bottom-space {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   4. 見出し（08 §2）
   -------------------------------------------------------------------------- */
.c-h2 {
  position: relative;
  margin-bottom: 32px;
  padding-bottom: 24px;
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-head);
  text-align: center;
}

.c-h2::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 40px;
  height: 3px;
  content: "";
  background: var(--brand-grad);
  transform: translateX(-50%);
}

.l-section--teal-deep .c-h2,
.l-section--teal .c-h2 {
  color: var(--c-white);
}

.l-section--teal-deep .c-h2::after,
.l-section--teal .c-h2::after {
  background: var(--c-white);
}

.c-h3 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-head);
}

.c-lead {
  font-size: 1.6rem;
  line-height: 2;
  text-align: center;
}

.c-note {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--c-sub);
}

.c-marker {
  background: var(--marker-yellow);
}

@media (min-width: 768px) {
  .c-h2 {
    margin-bottom: 48px;
    padding-bottom: 28px;
    font-size: 3.6rem;
  }

  .c-h2::after {
    width: 80px;
  }

  .c-h3 {
    font-size: 2.4rem;
  }

  .c-lead {
    font-size: 1.7rem;
  }

  .c-note {
    font-size: 1.3rem;
  }
}

/* --------------------------------------------------------------------------
   5. CTA ボタン 2 種（08 §4）
   主 = 白地 + オレンジ文字 + 2px solid（ゴースト）／副 = オレンジ塗り + 白文字
   標準 280x50 / 14px 700、最下部のみ 420x64 / 20px。hover = #FF9F47 地 + 白文字
   -------------------------------------------------------------------------- */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 280px;
  min-height: 50px;
  padding: 8px 16px;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-btn);
  transition: background-color var(--hover-transition),
    color var(--hover-transition), border-color var(--hover-transition);
}

/* 主 CTA: ゴースト */
.c-btn--primary {
  color: var(--cta-orange);
  background: var(--c-white);
  border: 2px solid var(--cta-orange);
}

/* 副 CTA: オレンジ塗り */
.c-btn--secondary {
  color: var(--c-white);
  background: var(--cta-orange);
  border: 2px solid var(--cta-orange);
}

@media (hover: hover) {
  .c-btn--primary:hover,
  .c-btn--secondary:hover {
    color: var(--c-white);
    background: var(--cta-orange-hover);
    border-color: var(--cta-orange-hover);
  }
}

/* 最下部 CTA のみ 420x64 / 20px */
.c-btn--lg {
  max-width: 420px;
  min-height: 56px;
  font-size: 1.6rem;
}

@media (min-width: 768px) {
  .c-btn--lg {
    min-height: 64px;
    font-size: 2rem;
  }
}

/* CTA 2 種の並び */
.c-cta-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

@media (min-width: 768px) {
  .c-cta-group {
    flex-direction: row;
    gap: 16px;
    justify-content: center;
  }
}

/* 標準より小さいヘッダー内 CTA（08 の標準 280x50 は本文中 CTA 側に残す）
   幅は内容基準・1行固定。狭い幅では font-size を落として 1 行を維持する */
.c-btn--sm {
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  min-height: 40px;
  padding: 6px 12px;
  font-size: 1.15rem;
  white-space: nowrap;
}

@media (min-width: 1200px) {
  .c-btn--sm {
    padding: 6px 14px;
    font-size: 1.3rem;
  }
}

/* --------------------------------------------------------------------------
   6. バッジ・ピル（08 §4）
   -------------------------------------------------------------------------- */
.c-pill {
  display: inline-block;
  padding: 10px 24px;
  font-size: 1.3rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--c-head);
  background: var(--bg-alt);
  border-radius: var(--radius-pill);
}

.c-pill--grad {
  color: var(--c-white);
  background: var(--brand-grad);
}

.c-pill--new {
  color: var(--c-white);
  background: var(--badge-new);
}

/* --------------------------------------------------------------------------
   7. カード
   -------------------------------------------------------------------------- */
.c-card {
  padding: 24px 20px;
  background: var(--c-white);
  border: var(--border);
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   8. アコーディオン（7分野・FAQ 共用 / ネイティブ details）
   開閉アイコン = 16x2px バー 2 本の ＋／−
   -------------------------------------------------------------------------- */
.c-acc {
  background: var(--bg-alt);
  border-radius: var(--radius);
}

.c-acc + .c-acc {
  margin-top: 12px;
}

.c-acc__summary {
  position: relative;
  display: block;
  padding: 18px 52px 18px 20px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--c-head);
  cursor: pointer;
  list-style: none;
}

.c-acc__summary::before,
.c-acc__summary::after {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 16px;
  height: 2px;
  content: "";
  background: var(--c-head);
  transition: transform var(--hover-transition);
}

.c-acc__summary::before {
  transform: translateY(-50%);
}

.c-acc__summary::after {
  transform: translateY(-50%) rotate(90deg);
}

.c-acc[open] > .c-acc__summary::after {
  transform: translateY(-50%) rotate(0deg);
}

.c-acc__body {
  padding: 0 20px 20px;
  font-size: 1.4rem;
  line-height: 1.9;
}

@media (min-width: 768px) {
  .c-acc__summary {
    padding: 22px 60px 22px 28px;
    font-size: 1.7rem;
  }

  .c-acc__summary::before,
  .c-acc__summary::after {
    right: 28px;
  }

  .c-acc__body {
    padding: 0 28px 24px;
    font-size: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   9. S0 ヘッダー（08 §3: sticky / 白地 / 影なし / PC80px・SP48px）
   -------------------------------------------------------------------------- */
.l-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-white);
  border-bottom: 1px solid var(--c-border);
}

.l-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--header-h);
  padding-inline: var(--gutter);
}

.l-header__logo {
  font-family: var(--font-en);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--c-head);
  white-space: nowrap;
}

/* ナビ・ヘッダーCTA は PC のみ（SP はフローティングCTAで代替）
   ナビは 6 項目を 1 行で収められる 1000px 以上でのみ表示する。
   768〜999px は ロゴ＋ヘッダーCTA2種、〜767px は ロゴ＋フローティングCTA */
.l-header__nav,
.l-header__cta {
  display: none;
}

@media (min-width: 768px) {
  .l-header__inner {
    gap: 16px;
  }

  .l-header__logo {
    font-size: 2rem;
  }

  .l-header__cta {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
    align-items: center;
  }
}

@media (min-width: 1000px) {
  .l-header__inner {
    gap: 20px;
  }

  .l-header__nav {
    display: block;
    margin-inline-end: auto;
  }

  .l-header__nav-list {
    display: flex;
    gap: 14px;
    align-items: center;
  }

  /* 2 行に折り返すとインライン box の中心が行間に落ちて当たり判定が消えるため、
     nowrap ＋ inline-block で矩形＝文字領域を一致させる */
  .l-header__nav-list a {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.6;
    color: var(--c-head);
    white-space: nowrap;
    transition: color var(--hover-transition);
  }
}

@media (min-width: 1200px) {
  .l-header__inner {
    gap: 24px;
  }

  .l-header__nav-list {
    gap: 24px;
  }

  .l-header__nav-list a {
    font-size: 1.4rem;
  }
}

@media (hover: hover) {
  .l-header__nav-list a:hover {
    color: var(--teal);
  }
}

/* --------------------------------------------------------------------------
   10. フローティングCTA（08 §4: SP専用・fixed bottom・rgba(0,0,0,.8)・70px）
   -------------------------------------------------------------------------- */
.l-floating {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: center;
  width: 100%;
  height: 70px;
  padding-inline: 10px;
  background: rgba(0, 0, 0, 0.8);
}

.l-floating .c-btn {
  max-width: 174px;
  min-height: 50px;
  padding: 6px 4px;
  margin-inline: auto;
  font-size: 1.2rem;
}

@media (min-width: 768px) {
  .l-floating {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   11. S1 ファーストビュー
   -------------------------------------------------------------------------- */
.p-fv {
  padding-top: 32px;
  overflow: hidden;
  text-align: center;
  background: var(--c-white);
  scroll-margin-top: var(--anchor-offset);
}

.p-fv__badge {
  font-size: 1.2rem;
  font-weight: 700;
  padding: 8px 18px;
}

/* SP は u-br-sp で 3 行に割る（AI新時代の、／稼ぐまでの／キャリアアップ。）。
   最長行「キャリアアップ。」は 8em なので、内寸 = 100vw - gutter*2 に対して
   上限は約 11.9vw。8.5vw なら 320〜767px の全幅で 1 行に収まる。
   下限 28px は SP のセクション h2（26px）より必ず大きくして見出し階層を保つため、
   上限 34px は 400px 超で文字が過大にならないようにするため */
.p-fv__catch {
  margin-top: 20px;
  font-size: clamp(2.8rem, 8.5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--c-head);
}

/* リード文の br は PC 用の改行位置。SP は自然折返しにして語の分断を避ける */
.p-fv__lead br {
  display: none;
}

/* SP は br を殺して自然折返しにする。あわせて keep-all で読点・句点の位置だけを
   改行点にし、「並走」のような語の途中で割れないようにする。
   最長の文節（23字）が下限幅でも 1 行に収まるよう font は 3.75vw 連動 */
.p-fv__lead {
  margin-top: 16px;
  font-size: min(1.4rem, 3.75vw);
  line-height: 1.9;
  word-break: keep-all;
}

/* 特徴バッジ3つ。SP は 08 の特徴ピル仕様（#f0f5fa 地・radius pill・padding 10/24）で
   横長ピルを縦に3段。円だと font 10px まで落ちて可読性を欠くため、13px を確保する。
   最長「講義7分野 動画＋スライドで学べる」でも 320px 幅で 1 行に収まる。
   PC（>=768）は従来どおり 170px の円に戻す */
.p-fv__facts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 24px;
}

.p-fv__fact {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 10px 24px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-head);
  text-align: center;
  background: var(--bg-alt);
  border-radius: var(--radius-pill);
}

.p-fv__cta {
  margin-top: 28px;
}

.p-fv__disclaimer {
  margin-top: 12px;
}

@media (min-width: 768px) {
  .p-fv {
    padding-top: 56px;
  }

  .p-fv__badge {
    font-size: 1.4rem;
    padding: 10px 24px;
  }

  .p-fv__catch {
    margin-top: 28px;
    font-size: 4.8rem;
    letter-spacing: 0.01em;
  }

  .p-fv__lead {
    margin-top: 24px;
    font-size: 1.7rem;
    line-height: 2;
    word-break: normal;
  }

  /* PC は 07 の改行位置どおりに 2 行で見せる */
  .p-fv__lead br {
    display: inline;
  }

  /* PC は円形バッジに戻す（SP のピル指定を打ち消す） */
  .p-fv__facts {
    flex-direction: row;
    gap: 24px;
    align-items: flex-start;
    margin-top: 40px;
  }

  .p-fv__fact {
    width: 170px;
    height: 170px;
    max-width: none;
    padding: 16px;
    font-size: 1.4rem;
    line-height: 1.6;
    border: 2px solid var(--c-border);
    border-radius: 50%;
  }

  .p-fv__cta {
    margin-top: 40px;
  }
}

/* --------------------------------------------------------------------------
   12. FVマーキー（08 §4: 画像3列の無限マーキー／JS不使用）
   3行・行ごとに逆方向。1トラック = 同一グループ3連 → -33.3333% で継ぎ目なし
   周期は 08 の 72s から 96s へ調整（2026-09-19(2) 代表判断）。
   1行の画像を 6→8 点に増やしたぶんグループ幅が約 4/3 になり、72s のままだと
   スクロール速度（px/s）が約 33% 速くなるため、周期も 4/3 倍して旧来の体感速度に戻す。
   -------------------------------------------------------------------------- */
.p-marquee {
  margin-top: 36px;
  overflow: hidden;
}

.p-marquee__row {
  overflow: hidden;
}

.p-marquee__row + .p-marquee__row {
  margin-top: 8px;
}

.p-marquee__track {
  display: flex;
  width: max-content;
  animation: marquee-scroll 96s linear infinite;
}

.p-marquee__row--reverse .p-marquee__track {
  animation-direction: reverse;
}

/* 2026-09-19(2) 暫定: 実素材 8 点を 3 行で使い回すため、行ごとに並び順を変えたうえで
   位相（animation-delay）も 1/3 ループずつずらし、同じ画像が縦に並ぶ瞬間を減らす。
   負の値なので初期表示から途中の位置で流れ始める（頭出しの空白が出ない）。
   値は周期 96s の 1/3・2/3（周期を変えるときは比例させて位相関係を保つこと）。
   ユニーク 24 点体制に切り替わったあともこの位相差は残してよい */
.p-marquee__row--2 .p-marquee__track {
  animation-delay: -32s;
}

.p-marquee__row--3 .p-marquee__track {
  animation-delay: -64s;
}

.p-marquee__group {
  display: flex;
  flex: 0 0 auto;
}

.p-marquee__group > li {
  flex: 0 0 auto;
  margin-right: 8px;
}

.p-marquee__group img {
  width: auto;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius);
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-33.3333%);
  }
}

@media (min-width: 768px) {
  .p-marquee {
    margin-top: 56px;
  }

  .p-marquee__row + .p-marquee__row {
    margin-top: 12px;
  }

  .p-marquee__group > li {
    margin-right: 12px;
  }

  .p-marquee__group img {
    height: 160px;
  }
}

/* 広い画面ではグループ幅が足りず継ぎ目が出るため、画像を大きくして担保する */
@media (min-width: 1440px) {
  .p-marquee__group img {
    height: 200px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .p-marquee__track {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   13. S2 業務別の変化カード カルーセル（Splide / 08 §4・07 2026-09-19(2)）
   カードは文字主体（人物写真・氏名は使わない＝07 §S2 の法務指定）。
   上部グラデ帯＝業務名 / 中央 Before ▶▶ After（After を cta-orange で強調）/ 下段 出所ラベル
   -------------------------------------------------------------------------- */
.p-works__lead {
  margin-bottom: 32px;
}

.p-works__carousel {
  padding-inline: 0;
}

/* スライドを伸縮させ、カード高さを行内で揃える */
.p-works__carousel .splide__list {
  align-items: stretch;
}

.p-works__carousel .splide__slide {
  height: auto;
  display: flex;
}

.p-works__card {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  color: var(--c-body);
  text-align: center;
  background: var(--c-white);
  border-radius: var(--radius);

  /* 語中・熟語の分断を止め、改行してよい位置だけを HTML 側の <wbr> で与える。
     overflow-wrap は「1 文節がカード幅を超えたときだけ」効く保険（はみ出し防止） */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 上部グラデ帯：業務名（白文字） */
.p-works__job {
  padding: 12px 16px;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--c-white);
  background: var(--brand-grad);
}

/* 中央：Before ▶▶ After */
.p-works__change {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
}

.p-works__before {
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.7;
  color: var(--c-sub);
}

.p-works__arrow {
  font-size: 2rem;
  line-height: 1;
  color: var(--cta-orange);
  letter-spacing: 0.1em;
}

.p-works__after {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--cta-orange);
}

/* 下段：出所ラベル（小さめ・補助色）。margin-top:auto でカード下端へ寄せる。
   min-height で 3 行ぶんの高さを確保し、2 行のカードと 3 行のカードで
   border-top の縦位置が揃うようにする（揃えないと同時表示時に罫線がずれる）。
   box-sizing:border-box なので min-height には上下 padding と border-top 1px を含める */
.p-works__source {
  padding: 12px 16px;
  margin-top: auto;
  min-height: calc(1.7em * 3 + 24px + 1px);
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--c-sub);
  border-top: 1px solid var(--c-border);
}

/* 矢印: ストロークSVG（08 §4）。
   SP（〜767px）は矢印が白いカードの上に重なり、白ストロークが白地に埋没するため
   半透明の円形地（--teal-deep 60%）を敷く。08「ドット・矢印色は地色に応じて変える」
   原則の範囲内の微調整（2026-09-19(2)）。タップ当たりは 44px を確保。
   PC（≥768px）は teal-deep 帯の上に出るので従来どおり透明・40px。 */
.p-works__carousel .splide__arrow {
  width: 44px;
  height: 44px;
  color: var(--c-white);
  background: rgb(19 64 85 / 60%);
  border: 0;
  border-radius: 50%;
  opacity: 1;
  transition: opacity var(--hover-transition);
}

.p-works__carousel .splide__arrow svg {
  width: 24px;
  height: 24px;
  fill: none;
}

.p-works__carousel .splide__arrow:disabled {
  opacity: 0.35;
}

@media (hover: hover) {
  .p-works__carousel .splide__arrow:hover:not(:disabled) {
    opacity: 0.6;
  }
}

/* ドット: 地色に応じて白（teal-deep 帯） */
.p-works__carousel .splide__pagination {
  bottom: -32px;
  gap: 8px;
}

.p-works__carousel .splide__pagination__page {
  width: 8px;
  height: 8px;
  margin: 0;
  background: var(--c-white);
  opacity: 0.4;
  transition: opacity var(--hover-transition);
}

.p-works__carousel .splide__pagination__page.is-active {
  background: var(--c-white);
  opacity: 1;
  transform: none;
}

.p-works__carousel .splide__track {
  padding-bottom: 8px;
}

/* 07 S2 の ※ 注記。ドット（bottom:-32px）を避けてカルーセル直下に近接配置。
   帯が teal-deep なので白の 85% 透過で可読性を確保（c-note のグレーは暗背景で沈む） */
.p-works__note {
  max-width: 720px;
  margin-top: 56px;
  margin-inline: auto;
  font-size: 1.3rem;
  line-height: 1.9;
  color: rgb(255 255 255 / 85%);
  text-align: center;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.p-works {
  padding-bottom: 88px;
}

@media (min-width: 768px) {
  .p-works {
    padding-bottom: 120px;
  }

  .p-works__job {
    font-size: 1.6rem;
  }

  .p-works__change {
    gap: 10px;
    padding: 28px 20px;
  }

  .p-works__before {
    font-size: 1.5rem;
  }

  .p-works__arrow {
    font-size: 2.4rem;
  }

  .p-works__after {
    font-size: 2rem;
  }

  .p-works__source {
    padding: 14px 20px;
    min-height: calc(1.7em * 3 + 28px + 1px);
    font-size: 1.3rem;
  }

  .p-works__carousel .splide__arrow {
    width: 40px;
    height: 40px;
    background: transparent;
    border-radius: 0;
  }

  .p-works__note {
    margin-top: 64px;
    font-size: 1.4rem;
  }

  .p-works__carousel {
    width: 100%;
    max-width: calc(var(--container) + var(--gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }

  /* カルーセル左右に外側余白が無い幅では矢印を内側に置く（横スクロール防止） */
  .p-works__carousel .splide__arrow--prev {
    left: 8px;
  }

  .p-works__carousel .splide__arrow--next {
    right: 8px;
  }
}

/* 1088px = コンテナ最大幅 1064px（1000 + gutter32*2）＋ 矢印のはみ出し 12px*2。
   これ以上の幅でのみコンテナ外に負マージンで逃がせる */
@media (min-width: 1088px) {
  .p-works__carousel .splide__arrow--prev {
    left: -12px;
  }

  .p-works__carousel .splide__arrow--next {
    right: -12px;
  }
}

/* --------------------------------------------------------------------------
   14. S3 募集ステータス欄
   -------------------------------------------------------------------------- */
.p-news__list {
  max-width: 720px;
  margin-inline: auto;
  border-top: 1px solid var(--c-border);
}

.p-news__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: 14px;
  border-bottom: 1px solid var(--c-border);
}

.p-news__date {
  font-family: var(--font-en);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--teal);
}

.p-news__text {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .p-news__item {
    flex-direction: row;
    gap: 24px;
    align-items: baseline;
    padding-block: 16px;
  }

  .p-news__date {
    flex: 0 0 100px;
    font-size: 1.4rem;
  }

  .p-news__text {
    font-size: 1.5rem;
  }
}

/* --------------------------------------------------------------------------
   15. S4 問題提起・対比図
   -------------------------------------------------------------------------- */
.p-problem__body {
  font-size: 1.5rem;
  line-height: 2;
  text-align: center;
}

.p-compare {
  display: grid;
  gap: 16px;
  margin-top: 32px;
}

.p-compare__card {
  padding: 20px;
  background: var(--c-white);
  border: var(--border);
  border-radius: var(--radius);
}

.p-compare__card--ours {
  border-color: var(--teal);
}

.p-compare__title {
  display: inline-block;
  padding: 6px 16px;
  margin-bottom: 16px;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--c-head);
  background: var(--bg-alt);
  border-radius: var(--radius-pill);
}

.p-compare__card--ours .p-compare__title {
  color: var(--c-white);
  background: var(--brand-grad);
}

.p-compare__flow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.p-compare__step {
  width: 100%;
  padding: 12px 10px;
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
  background: var(--bg-alt);
  border-radius: var(--radius);
}

.p-compare__card--ours .p-compare__step {
  color: var(--c-white);
  background: var(--teal);
}

.p-compare__arrow {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--c-sub);
  transform: rotate(90deg);
}

.p-compare__card--ours .p-compare__arrow {
  color: var(--teal);
}

.p-problem__disclaimer {
  margin-top: 16px;
  text-align: center;
}

@media (min-width: 768px) {
  .p-problem__body {
    font-size: 1.7rem;
  }

  .p-compare {
    gap: 20px;
    margin-top: 48px;
  }

  .p-compare__card {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 24px 28px;
  }

  .p-compare__title {
    flex: 0 0 auto;
    margin-bottom: 0;
    font-size: 1.4rem;
  }

  .p-compare__flow {
    flex: 1 1 auto;
    flex-direction: row;
    gap: 10px;
  }

  .p-compare__step {
    width: auto;
    flex: 1 1 auto;
    padding: 14px 12px;
    font-size: 1.5rem;
  }

  .p-compare__arrow {
    flex: 0 0 auto;
    font-size: 1.6rem;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   16. S6 選ばれる3つの理由 ＋ 学べる7分野
   -------------------------------------------------------------------------- */
.p-reasons__item + .p-reasons__item {
  margin-top: 40px;
}

/* keep-all で「02｜7分野×動画＋スライドで、」を 1 文節として扱うため、
   下限幅では文節が内寸（100vw - gutter*2 - padding14 - border4）を超える。
   5.4vw 連動にすると 320px でも収まり、370px 以上では従来どおり 20px で頭打ちになる */
.p-reasons__title {
  padding-left: 14px;
  font-size: min(2rem, 5.4vw);
  border-left: 4px solid var(--teal);
}

.p-reasons__body {
  margin-top: 12px;
  font-size: 1.5rem;
  line-height: 2;
}

.p-fields {
  margin-top: 24px;
  scroll-margin-top: var(--anchor-offset);
}

@media (min-width: 768px) {
  .p-reasons__item + .p-reasons__item {
    margin-top: 64px;
  }

  /* PC は c-h3 の既定サイズに戻す（SP の vw 連動を打ち消す） */
  .p-reasons__title {
    font-size: 2.4rem;
  }

  .p-reasons__body {
    font-size: 1.6rem;
  }

  .p-fields {
    margin-top: 32px;
  }
}

/* --------------------------------------------------------------------------
   17. S7 サポート内容
   -------------------------------------------------------------------------- */
.p-support__list {
  display: grid;
  gap: 12px;
  max-width: 800px;
  margin-inline: auto;
}

.p-support__item {
  padding: 18px 20px;
  background: var(--c-white);
  border: var(--border);
  border-radius: var(--radius);
}

.p-support__term {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--teal);
}

.p-support__desc {
  margin: 4px 0 0;
  font-size: 1.4rem;
  line-height: 1.8;
}

@media (min-width: 768px) {
  .p-support__item {
    display: flex;
    gap: 8px;
    align-items: baseline;
    padding: 22px 28px;
  }

  .p-support__term {
    flex: 0 0 auto;
    font-size: 1.6rem;
  }

  .p-support__desc {
    margin-top: 0;
    font-size: 1.6rem;
  }
}

/* --------------------------------------------------------------------------
   18. S8 講師紹介
   -------------------------------------------------------------------------- */
.p-instructor__body {
  display: grid;
  gap: 24px;
  max-width: 800px;
  margin-inline: auto;
}

/* lazy 画像は読込前の固有幅が 0 のため、枠側で寸法を確定させて CLS を出さない */
.p-instructor__figure {
  width: min(240px, 64%);
  max-width: 240px;
  margin-inline: auto;
}

.p-instructor__figure img {
  width: 100%;
  aspect-ratio: 480 / 600;
  border: var(--border);
  border-radius: var(--radius);
}

.p-instructor__profile {
  font-size: 1.5rem;
  line-height: 2;
}

.p-instructor__profile + .p-instructor__profile {
  margin-top: 16px;
  color: var(--c-sub);
}

@media (min-width: 768px) {
  .p-instructor__body {
    grid-template-columns: 240px 1fr;
    gap: 40px;
    align-items: start;
  }

  .p-instructor__figure {
    width: 100%;
    margin-inline: 0;
  }

  .p-instructor__profile {
    font-size: 1.6rem;
  }
}

/* --------------------------------------------------------------------------
   19. S9 中間CTA（無料個別相談・TimeRex埋込枠）
   -------------------------------------------------------------------------- */
.p-consult__card {
  max-width: 800px;
  padding: 24px 20px;
  margin-inline: auto;
  color: var(--c-body);
  background: var(--c-white);
  border-radius: var(--radius);
}

.p-consult__title {
  font-family: var(--font-jp);
  text-align: center;
}

.p-consult__list {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.p-consult__item {
  padding: 14px 16px;
  font-size: 1.4rem;
  line-height: 1.8;
  background: var(--bg-alt);
  border-radius: var(--radius);
}

.p-consult__label {
  font-weight: 700;
  color: var(--teal);
}

.p-consult__embed {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 420px;
  margin-top: 24px;
  overflow: hidden;
  background: var(--bg-alt);
  border: 2px dashed var(--c-border);
  border-radius: var(--radius);
  scroll-margin-top: var(--anchor-offset);
}

.p-consult__embed-note {
  font-size: 1.3rem;
  color: var(--c-sub);
}

.p-consult__cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin-top: 24px;
}

.p-consult__cta-note {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--c-sub);
}

@media (min-width: 768px) {
  .p-consult__card {
    padding: 40px;
  }

  .p-consult__item {
    font-size: 1.6rem;
  }

  .p-consult__embed {
    height: 560px;
  }
}

/* --------------------------------------------------------------------------
   20. S10 料金プラン（08 §4: 白地 / radius 8px / 2px枠 / 影なし / padding上48px）
   -------------------------------------------------------------------------- */
.p-price__period {
  margin-bottom: 24px;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.8;
  color: var(--c-head);
  text-align: center;
}

.p-price__cards {
  display: grid;
  gap: 20px;
}

.p-price__card {
  position: relative;
  padding: 48px 20px 24px;
  background: var(--c-white);
  border: var(--border);
  border-radius: var(--radius);
}

.p-price__card--recommend {
  border-color: #309da4;
}

.p-price__badge {
  position: absolute;
  top: 14px;
  left: 50%;
  padding: 6px 20px;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-white);
  white-space: nowrap;
  background: var(--brand-grad);
  border-radius: var(--radius-pill);
  transform: translateX(-50%);
}

.p-price__name {
  padding-bottom: 12px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--c-head);
  text-align: center;
  border-bottom: 1px solid var(--c-border);
}

/* 価格行は「円（税込）」等を途中で割らない。改行はラベル後のスペース位置のみ */
.p-price__early {
  margin-top: 16px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--cta-orange);
  text-align: center;
  word-break: keep-all;
  overflow-wrap: normal;
}

.p-price__regular {
  margin-top: 4px;
  font-size: 1.2rem;
  line-height: 1.6;
  color: var(--c-sub);
  text-align: center;
  word-break: keep-all;
  overflow-wrap: normal;
}

.p-price__spec {
  margin-top: 16px;
  font-size: 1.4rem;
  line-height: 1.9;
}

/* 黄マーカーはテキスト幅にだけ乗せる（ブロック幅いっぱいに伸ばさない） */
.p-price__target {
  display: inline;
  font-size: 1.4rem;
  line-height: 1.8;
  background: var(--marker-yellow);
}

/* インライン化で margin-top が効かないため、直前要素側で間隔を確保する */
.p-price__spec:has(+ .p-price__target) {
  margin-bottom: 12px;
}

.p-price__notes {
  max-width: 800px;
  margin: 28px auto 0;
}

.p-price__note {
  position: relative;
  padding-left: 1.2em;
  font-size: 1.3rem;
  line-height: 1.9;
}

.p-price__note::before {
  position: absolute;
  left: 0;
  content: "・";
}

@media (min-width: 768px) {
  .p-price__period {
    margin-bottom: 40px;
    font-size: 1.6rem;
  }

  /* 3 列にするとカード内寸が価格行 1 行分（実測 314px @24px）に届かず
     「先行価格 / 400,000円 / （税込）」と割れるため、1200px 未満は縦積みにする。
     縦積み帯では高さを揃えず内容なり（auto）にして下部の余白を出さない */
  .p-price__cards {
    max-width: 560px;
    gap: 24px;
    margin-inline: auto;
  }

  .p-price__card {
    padding: 48px 24px 32px;
  }

  .p-price__name {
    font-size: 2.2rem;
  }

  .p-price__early {
    font-size: 2.4rem;
  }

  .p-price__regular {
    font-size: 1.3rem;
  }

  .p-price__notes {
    margin-top: 40px;
  }

  .p-price__note {
    font-size: 1.4rem;
  }
}

/* 1200px = カード内寸が「先行価格 700,000円（税込）」1 行分を確保できる最小幅。
   ここから 3 列。1 行に並ぶので align-items:stretch の既定で 3 カードは同高になる */
@media (min-width: 1200px) {
  .p-price__cards {
    grid-template-columns: repeat(3, 1fr);
    max-width: none;
  }
}

/* --------------------------------------------------------------------------
   21. S11 受講の流れ
   -------------------------------------------------------------------------- */
.p-flow__list {
  display: grid;
  gap: 12px;
  max-width: 800px;
  margin-inline: auto;
}

.p-flow__step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px 20px;
  background: var(--c-white);
  border: var(--border);
  border-radius: var(--radius);
}

.p-flow__num {
  flex: 0 0 auto;
  font-family: var(--font-en);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--teal);
}

.p-flow__text {
  font-size: 1.4rem;
  line-height: 1.8;
}

.p-flow__note {
  margin-top: 16px;
  text-align: center;
}

@media (min-width: 768px) {
  .p-flow__step {
    gap: 20px;
    align-items: center;
    padding: 22px 28px;
  }

  .p-flow__text {
    font-size: 1.6rem;
  }
}

/* --------------------------------------------------------------------------
   22. S12 FAQ
   -------------------------------------------------------------------------- */
.p-faq__list {
  max-width: 800px;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   23. S13 最終CTA・フッター（08 §1: フッター #172223 / 白文字14px）
   -------------------------------------------------------------------------- */
.p-final__cta {
  margin-top: 8px;
}

.l-footer {
  padding-top: 32px;
  font-size: 1.4rem;
  line-height: 1.9;
  color: var(--c-white);
  text-align: center;
  background: var(--c-footer-bg);
}

.l-footer__logo {
  font-family: var(--font-en);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.4;
}

.l-footer__operator {
  margin-top: 12px;
}

/* SP は縦積み（区切り記号なし）。区切り「｜」は 768px 以上の横並びのみ */
.l-footer__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  padding-block: 20px 16px;
  margin-top: 8px;
}

/* 07 S13 末尾行。フッター最下部（リンク行の下） */
.l-footer__copyright {
  padding-bottom: 32px;
  font-family: var(--font-en);
  font-size: 1.2rem;
  line-height: 1.6;
  opacity: 0.8;
}

.l-footer__sep {
  display: none;
  color: var(--c-white);
  opacity: 0.5;
}

.l-footer__links a {
  color: var(--c-white);
  text-decoration: underline;
  transition: opacity var(--hover-transition);
}

@media (hover: hover) {
  .l-footer__links a:hover {
    opacity: 0.7;
  }
}

@media (min-width: 768px) {
  .l-footer {
    padding-top: 48px;
  }

  .l-footer__links {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px 6px;
  }

  .l-footer__sep {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   24. 下層ページ（tokusho.html / privacy.html）
   -------------------------------------------------------------------------- */
.l-header__back a {
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--c-head);
  text-decoration: underline;
}

.p-legal {
  max-width: 800px;
  padding: 24px 20px;
  margin-inline: auto;
  background: var(--c-white);
  border: var(--border);
  border-radius: var(--radius);
}

.p-legal__notice {
  padding: 12px 16px;
  font-size: 1.3rem;
  line-height: 1.8;
  color: var(--c-head);
  background: var(--bg-alt);
  border-radius: var(--radius);
}

.p-legal__body {
  min-height: 240px;
  margin-top: 20px;
  font-size: 1.4rem;
  line-height: 2;
  color: var(--c-sub);
  white-space: pre-wrap;
}

@media (min-width: 768px) {
  .p-legal {
    padding: 40px;
  }

  .p-legal__body {
    font-size: 1.6rem;
  }
}

/* --------------------------------------------------------------------------
   25. アクセシビリティ / モーション配慮
   -------------------------------------------------------------------------- */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.u-sp-only {
  display: block;
}

.u-pc-only {
  display: none;
}

/* 折返し制御。keep-all で語中分断を止め、改行してよい位置だけを
   マークアップ側の <wbr> で明示する（両者はセットで使う） */
.u-keep {
  word-break: keep-all;
}

/* keep-all でも ＋ ／ 」 などの記号前後は改行可能なので、
   分けたくない範囲だけを nowrap で固める */
.u-nobr {
  white-space: nowrap;
}

/* SP 専用の改行。PC では br を display:none で殺して改行を無効化する */
.u-br-sp {
  display: inline;
}

/* PC 専用の改行（u-br-sp の逆）。SP では殺して 1 行のまま見せる。
   FV 丸バッジのように幅が固定で、<wbr> の「折れてもよい」だけでは
   ブラウザが折らない（＝文節が 1 行に収まってしまう）箇所に使う */
.u-br-pc {
  display: none;
}

@media (min-width: 768px) {
  .u-sp-only {
    display: none;
  }

  .u-pc-only {
    display: block;
  }

  .u-br-sp {
    display: none;
  }

  .u-br-pc {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}