/* ==========================================================
   Common CSS Parts — Phase 9/10 (2026-10-01〜02)
   ----------------------------------------------------------
   48ページ横断で同一実装だった UI パーツを1箇所に集約。
   このファイル1箇所の編集で全ページに反映される設計。

   ★編集ルール:
     - `.c-section.c-section {}` の二重クラス記述は意図的 (specificity boost)
       → page-xxx の既存ルール(0,1,0) を上書きするため 0,2,0 で定義
     - 二重記述は typo ではない
   ========================================================== */


/* ==========================================================
   Design Tokens (Figma 準拠・全ページ共通)
   figma-top.css と整合。下層ページでも使えるようここでも定義。
   ========================================================== */
:root {
  --ytc-bg-base: #ffffff;
  --ytc-bg-inverse: #000000;
  --ytc-bg-brand: #439fff;
  --ytc-bg-brand-strong: #2f8aee;
  --ytc-bg-brand-deep: #4ea5ff;
  --ytc-bg-brand-soft: #6bd0ff;
  --ytc-bg-accent: #ffef6b;
  --ytc-bg-success: #20d99b;
  --ytc-bg-section: #d7f2ff;
  --ytc-bg-subtle: #edf9ff;
  --ytc-bg-sky: #4ea5ff;
  --ytc-bg-error: #fc3855;
  --ytc-border-strong: #39364e;
  --ytc-border-subtle: #dadada;
  --ytc-border-tag: #e5e5e5;
  --ytc-text-primary: #000000;
  --ytc-text-inverse: #ffffff;
  --ytc-text-secondary: #787878;
  --ytc-text-muted: #a1a1a1;
  --ytc-text-link: #439fff;
  --ytc-text-brand: #439fff;
  --ytc-text-accent: #20d99b;
  --ytc-font-jp: "Noto Sans JP", sans-serif;
  --ytc-font-en: "Montserrat", "Inter", sans-serif;
  --ytc-card-shadow: 8px 8px 0 -1px var(--ytc-bg-brand-soft), 8px 8px 0 0 var(--ytc-border-strong);
  --ytc-container-pc: 1240px;
}


/* ==========================================================
   1. Breadcrumb — 47ページ共通
   ========================================================== */
.c-breadcrumb {
  background: var(--technoauto-bg-brand-strong, #2f8aee);
  border: 1px solid var(--technoauto-border-base, #39364e);
  border-radius: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  overflow: hidden;
  width: 100%;
  white-space: nowrap;
  line-height: 1;
}
.c-breadcrumb__item {
  font-family: var(--technoauto-font-jp);
  font-weight: 400;
  font-size: 12px;
  color: var(--technoauto-text-inverse, #fff);
}
.c-breadcrumb__sep {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  border-left: 5px solid #6bd0ff;
  font-size: 0;
  line-height: 0;
  color: transparent;
}
.c-breadcrumb a,
.c-breadcrumb a:visited {
  color: inherit;
  text-decoration: none;
}
.c-breadcrumb a:hover {
  text-decoration: underline;
}

/* ページ別テーマ色上書き（breadcrumb の背景色が青以外のページ用） */
.page-girls-talk .c-breadcrumb {
  background: #d1417a;
}
.page-girls-talk .c-breadcrumb__sep {
  color: #ffd6e3;
}

/* top variant: 常時非表示（ヘッダー .site-breadcrumb 青バーが SP で担うため） */
.c-breadcrumb--top {
  display: none;
}

@media screen and (max-width: 768px) {
  /* SP: inline variant (hero内) 非表示 */
  .c-breadcrumb--inline {
    display: none;
  }
}


/* ==========================================================
   2. Section / Section-inner — DISABLED (2026-10-01)
   ----------------------------------------------------------
   各ページで独自の section padding/sizing を使っていたため、
   共通化しようとして double-class specificity で強制上書きしたら
   各ページの意図を壊してしまった（空白が巨大化）。
   HTML 側の .c-section / .c-section-inner クラスは残しているが、
   CSS ルールは意図的に空（＝page-xxx__section 側の既存ルールが生きる）。
   ========================================================== */


/* ==========================================================
   3. Definition List / Row — 12ページ共通
   ========================================================== */
.c-def-list.c-def-list {
  display: flex;
  gap: 30px;
  align-items: stretch;
  overflow: hidden;
  width: 100%;
}
.c-def-list__divider.c-def-list__divider {
  width: 1px;
  background: #d9d9d9;
}
/*
 * 旧 c-def-row (フレックス縦積み・__label/__value) は P21 (c-def-row grid 版) と
 * 命名衝突するため削除。本リポジトリの PHP では未使用。
 * 定義リストの旧形式が必要な場合は c-def-list (上記) + c-def-row-v (下記再定義) を使う。
 */


/* ==========================================================
   4. Feature Card — 10ページ共通
   ========================================================== */
.c-feature.c-feature {
  flex: 1 0 0;
  min-width: 0;
  background: var(--technoauto-bg-base, #ffffff);
  border: 1px solid var(--technoauto-border-base, #39364e);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  overflow: hidden;
  align-self: stretch;
}
.c-feature__title.c-feature__title {
  font-family: var(--technoauto-font-jp);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  color: var(--technoauto-text-primary, #000);
}
.c-feature__desc.c-feature__desc {
  font-family: var(--technoauto-font-jp);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.6;
  color: var(--technoauto-text-secondary, #787878);
  width: 100%;
}
.c-feature__badge.c-feature__badge {
  background: var(--technoauto-bg-brand, #439fff);
  border: 1px solid var(--technoauto-border-base, #39364e);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}


/* ==========================================================
   5. Step (minimal base) — 16ページ
   padding / gap / direction はページ別のため共通化せず
   ========================================================== */
.c-step.c-step {
  background: #ffffff;
  border: 1px solid var(--technoauto-border-base, #39364e);
  border-radius: 10px;
  display: flex;
  box-sizing: border-box;
}


/* ==========================================================
   Phase 10 (2026-10-02): Figma パーツページ (97:99) から抽出
   ----------------------------------------------------------
   全パーツ：Figma `97:99` のコンポーネント単位で CSS 化。
   PC 1240px 幅前提。SP は 768px 以下で縮退。
   アイコンは assets/images/figma-20261002/parts-*.svg
   ========================================================== */

/* 共通カラートークン（figma-top.css の --ytc-* と重複定義を避けるため fallback 併記） */

/* ----------------------------------------------------------
   P1. Page Hero (下層) — Figma 725:11251
   ---------------------------------------------------------- */
.c-page-hero.c-page-hero {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  position: relative;
}
.c-page-hero.c-page-hero::after {
  content: "";
  position: absolute;
  bottom: -40px;
  right: -10px;
  width: 260px;
  height: 153px;
  background: var(--hero-illust, none) no-repeat right bottom / contain;
  pointer-events: none;
  z-index: 3;
  display: var(--hero-illust-display, none);
}
.c-page-hero__panel.c-page-hero__panel {
  flex: 1 0 0;
  min-width: 0;
  background: var(--ytc-bg-brand-deep, #4ea5ff);
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-right: 0;
  border-radius: 20px 0 0 20px;
  padding: 39px 40px; /* 2026-10-19 [common] Figma 40 (stroke INSIDE) → border 1px 分を引く。高さ 423 */
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: flex-start;
  word-break: break-word;
  box-sizing: border-box;
}
.c-page-hero__en.c-page-hero__en {
  font-family: "Montserrat", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  line-height: 22px;
  color: #398be2;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
}
.c-page-hero__body.c-page-hero__body {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
}
.c-page-hero__title-group.c-page-hero__title-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.c-page-hero__wordmark.c-page-hero__wordmark {
  position: relative;
  font-family: "Montserrat", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 60px;
  line-height: 1;
  padding-bottom: 3px;
  white-space: nowrap;
  display: inline-flex;
}
.c-page-hero__wordmark-shadow.c-page-hero__wordmark-shadow {
  position: absolute;
  left: 3px;
  top: 3px;
  color: var(--ytc-bg-brand, #439fff);
}
.c-page-hero__wordmark-front.c-page-hero__wordmark-front {
  position: relative;
  color: #fff;
}
.c-page-hero__title.c-page-hero__title {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.4;
  color: #fff;
  margin: 0;
}
.c-page-hero__sub.c-page-hero__sub {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.8;
  color: #fff;
  margin: 0;
}
.c-page-hero__image.c-page-hero__image {
  flex-shrink: 0;
  width: 600px;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 0 20px 20px 0;
  overflow: hidden;
  background: #d7f2ff;
  position: relative; /* 2026-10-19 [common] 画像の縦横比でヒーローが伸びないよう img を絶対配置 → 高さはパネル (Figma 423) で決まる */
}
.c-page-hero__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media screen and (max-width: 768px) {
  /* Figma SP 準拠: 青背景フル幅・パンくずバー上部・画像とタイトル縦積み中央 + 床の斜めトランジション */
  .c-page-hero.c-page-hero {
    flex-direction: column;
    max-width: 100%;
    background: var(--ytc-bg-brand-deep, #4ea5ff);
    padding: 40px 0 20px; /* 上=パンくず枠, 下=余白のみ */
    border-top: 1px solid var(--ytc-border-strong, #39364e);
    border-bottom: 0;
    overflow: visible;
    margin-bottom: calc(50px + var(--hero-illust-gap, 20px)); /* 床50 + イラスト120 (2026-10-19 [common] イラスト無しは +20 のみ。--hero-illust-gap は functions.php が出力) */
  }
  /* 床のコピー5: ヒーロー直下に配置、斜めで次セクションへ繋ぐ (Figma 256:2473) */
  .c-page-hero.c-page-hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%; /* ヒーローの直下 */
    height: 50px;
    background: url('./images/figma-20261002/hero-floor.png?v=2') no-repeat center top / 100% 100%;
    pointer-events: none;
    z-index: 1;
  }
  /* eyebrow (yokohama...) は Figma SP で非表示 */
  .c-page-hero__en.c-page-hero__en { display: none; }
  /* パネル: 透明化してテキストのみ中央配置 */
  .c-page-hero__panel.c-page-hero__panel {
    order: 2;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 20px 24px 10px;
    gap: 20px;
    align-items: center;
    text-align: center;
  }
  .c-page-hero__body.c-page-hero__body {
    align-items: center;
  }
  .c-page-hero__title-group.c-page-hero__title-group {
    align-items: center;
    gap: 10px; /* 2026-10-19 [common] Figma SP itemSpacing 10 */
  }
  .c-page-hero__wordmark.c-page-hero__wordmark { font-size: 50px; justify-content: center; }
  .c-page-hero__wordmark-shadow.c-page-hero__wordmark-shadow { left: 3px; top: 3px; }
  .c-page-hero__title.c-page-hero__title { font-size: 26px; line-height: 1.5; }
  .c-page-hero__sub.c-page-hero__sub { font-size: 14px; }
  /* パンくずは絶対配置でヒーロー上部に貼り付け (濃青フル幅バー) */
  .c-page-hero__panel .c-breadcrumb {
    position: absolute;
    top: 0; left: 0; right: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-top: 0;
    height: 40px;
    padding-left: 20px;
    padding-right: 20px;
    justify-content: flex-start;
    box-sizing: border-box;
  }
  /* 画像: パネル上に配置、中央寄せ、角丸10 */
  .c-page-hero__image.c-page-hero__image {
    order: 1;
    width: calc(100% - 40px);
    height: 200px;
    margin: 0 20px;
    border-radius: 10px;
  }
  /* イラスト: ヒーロー外側、床の下に配置 */
  .c-page-hero.c-page-hero::after {
    position: absolute;
    top: calc(100% + 55px); /* 床50 + 余白5 */
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translateX(-50%);
    width: 220px;
    height: 129px;
    background: var(--hero-illust, none) no-repeat center bottom / contain;
    pointer-events: none;
    z-index: 2;
    display: var(--hero-illust-display, none);
  }
}


/* ----------------------------------------------------------
   P2. Section Heading 下層 — Figma 595:9049 / 741:11273
   130箇所で使用
   ---------------------------------------------------------- */
.c-section-heading-sub.c-section-heading-sub {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
  word-break: break-word;
}
.c-section-heading-sub__en.c-section-heading-sub__en {
  position: relative;
  font-family: "Montserrat", sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 50px;
  line-height: 1;
  padding-bottom: 3px;
  white-space: nowrap;
  display: inline-flex;
}
.c-section-heading-sub__en-shadow.c-section-heading-sub__en-shadow {
  position: absolute;
  left: 3px;
  top: 3px;
  color: var(--ytc-bg-brand, #439fff);
}
.c-section-heading-sub__en-front.c-section-heading-sub__en-front {
  position: relative;
  color: #fff;
  -webkit-text-stroke: 1px var(--ytc-border-strong, #39364e);
}
.c-section-heading-sub__title.c-section-heading-sub__title {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 30px;
  line-height: 1.5;
  color: var(--ytc-text-primary, #000);
  white-space: nowrap;
  margin: 0;
}
.c-section-heading-sub__lead.c-section-heading-sub__lead {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ytc-text-primary, #000);
  text-align: center;
  margin: 0;
  padding: 0 20px;
  max-width: 920px;
}
@media screen and (max-width: 768px) {
  .c-section-heading-sub__en.c-section-heading-sub__en { font-size: 36px; }
  .c-section-heading-sub__title.c-section-heading-sub__title { font-size: 22px; white-space: normal; }
  .c-section-heading-sub__lead.c-section-heading-sub__lead { font-size: 14px; }
}


/* ----------------------------------------------------------
   P3. FAQ Item — Figma 848:13581
   Q&A・学費サポート
   ---------------------------------------------------------- */
.c-faq.c-faq {
  background: #fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 10px;
  width: 100%;
  max-width: 1160px;
  overflow: hidden;
}
.c-faq__q.c-faq__q {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 20px 24px 20px 20px;
  width: 100%;
  background: #fff;
  border: 0;
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.c-faq__badge.c-faq__badge {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: var(--ytc-bg-brand, #439fff);
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}
.c-faq__badge--a.c-faq__badge--a { background: var(--ytc-bg-success, #20d99b); }
.c-faq__text.c-faq__text {
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--ytc-text-primary, #000);
  margin: 0;
}
.c-faq__icon.c-faq__icon {
  flex-shrink: 0;
  font-family: "Montserrat", sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  color: var(--ytc-text-primary, #000);
}
.c-faq__a.c-faq__a {
  background: var(--ytc-bg-subtle, #edf9ff);
  display: none;
  gap: 10px;
  padding: 20px 24px 22px 20px;
}
.c-faq.is-open .c-faq__a {
  display: flex;
  align-items: flex-start;
}
.c-faq.is-open .c-faq__icon::before {
  content: "−";
}
.c-faq.is-open .c-faq__icon { visibility: hidden; position: relative; width: 18px; text-align: center; }
.c-faq.is-open .c-faq__icon::before { visibility: visible; position: absolute; left: 0; right: 0; }
.c-faq__a-text.c-faq__a-text {
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ytc-text-primary, #000);
  margin: 0;
}
@media screen and (max-width: 768px) {
  .c-faq__text.c-faq__text { font-size: 15px; }
  .c-faq__a-text.c-faq__a-text { font-size: 14px; }
}


/* ----------------------------------------------------------
   P4. Pagination — Figma 959:15792
   ---------------------------------------------------------- */
.c-pagination.c-pagination {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.c-pagination__item.c-pagination__item,
.c-pagination__nav.c-pagination__nav {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  box-sizing: border-box;
}
.c-pagination__item.c-pagination__item {
  background: #fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  color: var(--ytc-text-primary, #000);
}
.c-pagination__item--current.c-pagination__item--current {
  background: var(--ytc-bg-brand, #439fff);
  color: #fff;
}
.c-pagination__item--dots.c-pagination__item--dots {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
}
.c-pagination__nav.c-pagination__nav {
  background: transparent;
  border: 1px solid var(--ytc-border-strong, #39364e);
  color: var(--ytc-text-primary, #000);
}
.c-pagination__nav img { width: 100%; height: 100%; }


/* ----------------------------------------------------------
   P5. Primary Button (フォーム用) — Figma 959:15783
   .c-btn との差別化: 幅360px / 大きめ padding
   ---------------------------------------------------------- */
.c-btn-primary-form.c-btn-primary-form {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  background: var(--ytc-bg-brand, #439fff);
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 999px;
  padding: 18px 20px;
  width: 360px;
  max-width: 100%;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.c-btn-primary-form__arrow.c-btn-primary-form__arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


/* ----------------------------------------------------------
   P6. Form Field — Figma 959:15775
   ---------------------------------------------------------- */
.c-form-field.c-form-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 570px;
}
.c-form-field__label-row.c-form-field__label-row {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.c-form-field__label.c-form-field__label {
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--ytc-text-primary, #000);
}
.c-form-field__required.c-form-field__required {
  flex-shrink: 0;
  background: var(--ytc-bg-error, #fc3855);
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 5px;
  padding: 5px 10px;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  color: #fff;
}
.c-form-field__input.c-form-field__input,
.c-form-field__textarea.c-form-field__textarea,
.c-form-field__select.c-form-field__select {
  background: #fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 10px;
  padding: 16px;
  width: 100%;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ytc-text-primary, #000);
  box-sizing: border-box;
}
.c-form-field__input::placeholder,
.c-form-field__textarea::placeholder {
  color: var(--ytc-text-secondary, #787878);
}
.c-form-field__textarea.c-form-field__textarea {
  min-height: 160px;
  resize: vertical;
}
.c-form-field__select.c-form-field__select {
  appearance: none;
  background-image: url(images/figma-20261002/parts-arrow-chevron.svg);
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 15px auto;
  padding-right: 44px;
}


/* ----------------------------------------------------------
   P7. Tab — Figma 950:14757
   NEWS一覧・Q&A カテゴリタブ
   ---------------------------------------------------------- */
.c-tab.c-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 999px;
  background: #fff;
  color: var(--ytc-text-primary, #000);
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
.c-tab--active.c-tab--active,
.c-tab[aria-selected="true"] {
  background: var(--ytc-bg-brand, #439fff);
  color: #fff;
}
.c-tab-list.c-tab-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}


/* ----------------------------------------------------------
   P8. Link Row — Figma 636:10304
   › 付き1行リンク。関連ページ・サイトマップで54箇所
   ---------------------------------------------------------- */
.c-link-row.c-link-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  height: 60px;
  background: #fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 5px;
  text-decoration: none;
  color: var(--ytc-text-primary, #000);
  width: 100%;
  max-width: 275px;
  box-sizing: border-box;
}
.c-link-row__thumb.c-link-row__thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--ytc-bg-section, #d7f2ff);
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  overflow: hidden;
}
.c-link-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-link-row__label.c-link-row__label {
  flex: 1 0 0;
  min-width: 0;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--ytc-text-primary, #000);
}
.c-link-row__arrow.c-link-row__arrow {
  flex-shrink: 0;
  width: 6px;
  height: 12px;
}


/* ----------------------------------------------------------
   P9. Route Row — Figma 636:10313
   アクセスページ 電車/バス 経路カード
   ---------------------------------------------------------- */
.c-route-row.c-route-row {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 10px;
  width: 100%;
  max-width: 570px;
  box-sizing: border-box;
}
.c-route-row__label.c-route-row__label {
  background: #439fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 30px;
  padding: 6px 12px;
  width: 100%;
  text-align: center;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  box-sizing: border-box;
}
.c-route-row__desc.c-route-row__desc {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.8;
  color: var(--ytc-text-primary, #000);
  text-align: center;
  margin: 0;
}


/* ----------------------------------------------------------
   P10. Schedule Row — Figma 759:11282
   OC 開催日程 1行
   ---------------------------------------------------------- */
.c-schedule.c-schedule {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  padding: 14px 18px 14px 14px;
  background: #fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 10px;
  width: 100%;
  max-width: 275px;
  box-sizing: border-box;
}
.c-schedule__date.c-schedule__date {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
  width: 100%;
  background: #439fff;
  border-radius: 5px;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.c-schedule__date-ymd.c-schedule__date-ymd {
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  line-height: 1;
}
.c-schedule__date-dow.c-schedule__date-dow {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-size: 12px;
}
.c-schedule__content.c-schedule__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  width: 100%;
  text-align: center;
}
.c-schedule__badge.c-schedule__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: var(--ytc-bg-accent, #ffef6b);
  border: 1px solid var(--ytc-border-base, #39364e);
  border-radius: 999px;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ytc-text-primary, #000);
  white-space: nowrap;
}
.c-schedule__title.c-schedule__title {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--ytc-text-primary, #000);
}
.c-schedule__time.c-schedule__time {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 400;
  font-size: 15px;
  color: var(--ytc-text-secondary, #787878);
}
.c-schedule__apply.c-schedule__apply {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 13px;
  color: #439fff;
  text-decoration: none;
}
.c-schedule__apply::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background: url(images/figma-20261002/parts-arrow-chevron.svg) center/contain no-repeat;
}


/* ----------------------------------------------------------
   P11. PDF Row — Figma 1160:19356
   情報公開 資料DLリンク 37箇所
   ---------------------------------------------------------- */
.c-pdf-row.c-pdf-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 16px 16px 16px 20px;
  background: #fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 10px;
  width: 100%;
  max-width: 570px;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}
.c-pdf-row__text.c-pdf-row__text {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.c-pdf-row__title.c-pdf-row__title {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 400;
  font-size: 17px;
  color: var(--ytc-text-primary, #000);
}
.c-pdf-row__note.c-pdf-row__note {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ytc-text-secondary, #787878);
}
.c-pdf-row__badge.c-pdf-row__badge {
  flex-shrink: 0;
  background: var(--ytc-bg-error, #fc3855);
  border-radius: 999px;
  padding: 5px 11px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.5px;
  line-height: 1;
  color: #fff;
}


/* ----------------------------------------------------------
   P12. Choice Row — Figma 959:15755
   フォーム選択肢・入試方式カード
   ---------------------------------------------------------- */
.c-choice-row.c-choice-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 20px 20px 20px 22px;
  background: #fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 10px;
  width: 100%;
  max-width: 373px;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}
.c-choice-row__body.c-choice-row__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.c-choice-row__label.c-choice-row__label {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ytc-text-primary, #000);
}
.c-choice-row__note.c-choice-row__note {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ytc-text-secondary, #787878);
}
.c-choice-row__arrow.c-choice-row__arrow {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
}


/* ----------------------------------------------------------
   P13. Fee Table — Figma 854:14321 / 854:14330
   学費表（Head + Row 4列・ゼブラ）
   ---------------------------------------------------------- */
.c-fee-table.c-fee-table {
  background: #fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  max-width: 570px;
  border-collapse: collapse;
}
.c-fee-table th,
.c-fee-table td {
  padding: 12px 6px;
  text-align: center;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-size: 14px;
  line-height: 1;
  border-bottom: 1px solid var(--ytc-border-strong, #39364e);
}
.c-fee-table th {
  color: #fff;
  font-weight: 700;
  background: var(--ytc-bg-brand, #439fff);
}
.c-fee-table th:nth-child(even) {
  background: var(--ytc-bg-brand-strong, #2f8aee);
}
.c-fee-table td {
  color: var(--ytc-text-primary, #000);
  font-weight: 400;
  background: #fff;
}
.c-fee-table td:nth-child(even) { background: #f8f8f8; }
.c-fee-table tr:last-child td { border-bottom: 0; }


/* ----------------------------------------------------------
   P14. Check Item — Figma 621:10965
   入試対象者・制度特徴の✓リスト
   ---------------------------------------------------------- */
.c-check-item.c-check-item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 22px 20px;
  background: #fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 10px;
  width: 100%;
  max-width: 275px;
  box-sizing: border-box;
}
.c-check-item__icon.c-check-item__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}
.c-check-item__text.c-check-item__text {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  color: var(--ytc-text-primary, #000);
  text-align: center;
  margin: 0;
}


/* ----------------------------------------------------------
   P15. Worry Item — Figma 950:14752
   「こんなお悩みありませんか？」の青丸?カード
   ---------------------------------------------------------- */
.c-worry-item.c-worry-item {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  padding: 26px 22px;
  background: #fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 10px;
  width: 100%;
  max-width: 373px;
  min-height: 120px;
  box-sizing: border-box;
}
.c-worry-item__icon.c-worry-item__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background: var(--ytc-bg-brand, #439fff);
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-worry-item__icon img { width: 7px; height: 10px; }
.c-worry-item__text.c-worry-item__text {
  flex: 1 0 0;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  color: var(--ytc-text-primary, #000);
  text-align: center;
  margin: 0;
}


/* ----------------------------------------------------------
   P16. Info Card (下層) — Figma 759:11267
   入試方式カードなど
   ---------------------------------------------------------- */
.c-info-card.c-info-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 10px;
  width: 100%;
  max-width: 275px;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
}
.c-info-card__text.c-info-card__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  width: 100%;
}
.c-info-card__title.c-info-card__title {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  color: var(--ytc-text-link, #439fff);
  margin: 0;
}
.c-info-card__lead.c-info-card__lead {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ytc-text-primary, #000);
  margin: 0;
}
.c-info-card__desc.c-info-card__desc {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ytc-text-secondary, #787878);
  margin: 0;
}
.c-info-card__cta.c-info-card__cta {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #439fff;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}
.c-info-card__cta::before {
  content: "";
  width: 12px;
  height: 12px;
  background: url(images/figma-20261002/parts-arrow-chevron.svg) center/contain no-repeat;
}


/* ----------------------------------------------------------
   P17. Stat Card 下層 — Figma 704:11134
   就職率・学費などの単体数字カード (TOP版と区別)
   ---------------------------------------------------------- */
.c-stat-card-sub.c-stat-card-sub {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  padding: 20px 10px;
  background: #fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 10px;
  width: 100%;
  max-width: 275px;
  min-height: 174px;
  box-sizing: border-box;
}
.c-stat-card-sub__pill.c-stat-card-sub__pill {
  background: var(--ytc-bg-accent, #ffef6b);
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 999px;
  padding: 4px 15px;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  color: var(--ytc-text-primary, #000);
  white-space: nowrap;
}
.c-stat-card-sub__value.c-stat-card-sub__value {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.c-stat-card-sub__value-num.c-stat-card-sub__value-num {
  font-family: "Montserrat", sans-serif;
  font-size: 70px;
  color: var(--ytc-bg-brand, #439fff);
}
.c-stat-card-sub__value-unit.c-stat-card-sub__value-unit {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-size: 50px;
  color: var(--ytc-text-link, #439fff);
}
.c-stat-card-sub__note.c-stat-card-sub__note {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 400;
  font-size: 14px;
  color: var(--ytc-text-secondary, #787878);
  text-align: center;
  margin: 0;
}


/* ----------------------------------------------------------
   P18. Interview Card 下層 — Figma 1121:17835
   在校生・卒業生・校長挨拶の縦型プロフィールカード
   ---------------------------------------------------------- */
.c-interview-card-sub.c-interview-card-sub {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 10px;
  width: 100%;
  max-width: 275px;
  text-decoration: none;
  color: inherit;
  box-sizing: border-box;
}
.c-interview-card-sub__profile.c-interview-card-sub__profile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.c-interview-card-sub__photo.c-interview-card-sub__photo {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  background: var(--ytc-bg-section, #d7f2ff);
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 999px;
  overflow: hidden;
}
.c-interview-card-sub__photo img { width: 100%; height: 100%; object-fit: cover; }
.c-interview-card-sub__meta.c-interview-card-sub__meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
  width: 100%;
  padding-bottom: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.c-interview-card-sub__name.c-interview-card-sub__name {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.5;
  color: var(--ytc-text-link, #439fff);
  white-space: nowrap;
}
.c-interview-card-sub__dept.c-interview-card-sub__dept {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 400;
  font-size: 15px;
  color: var(--ytc-text-secondary, #787878);
}
.c-interview-card-sub__quote.c-interview-card-sub__quote {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ytc-text-primary, #000);
  text-align: center;
  width: 100%;
  margin: 0;
}
.c-interview-card-sub__cta.c-interview-card-sub__cta {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #439fff;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}
.c-interview-card-sub__cta::before {
  content: "";
  width: 12px;
  height: 12px;
  background: url(images/figma-20261002/parts-arrow-chevron.svg) center/contain no-repeat;
}


/* ----------------------------------------------------------
   P19. Section Box (下層共通) — Figma 全ページ共通パターン
   ----------------------------------------------------------
   - 角丸20px枠 + 色付き背景 + 上にはみ出す Section Heading
   - 内側 padding: pt-110 (見出し領域) + pb-40 + px-40
   - カラー variant: --accent-soft / --brand-soft / --section / --base
   ---------------------------------------------------------- */
.c-section-box.c-section-box {
  position: relative;
  width: 100%;
  max-width: 1240px;
  margin: 50px auto 0;
  /* 2026-10-19 [common] Figma: padding 110/40/40 (stroke INSIDE 1px) → border 1px 分を引いて 109/39/39。
     中身幅 1240-80 = 1160。リード付き見出しは上 150 (下の :has ルール) */
  padding: 109px 39px 39px;
  background: #fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 20px;
  box-sizing: border-box;
}
.c-section-box.c-section-box:first-of-type { margin-top: 30px; }
.c-section-box--accent-soft.c-section-box--accent-soft { background: #fff7ce; }
.c-section-box--brand-soft.c-section-box--brand-soft { background: var(--ytc-bg-brand-soft, #6bd0ff); }
.c-section-box--section.c-section-box--section { background: var(--ytc-bg-section, #d7f2ff); }
.c-section-box--sky.c-section-box--sky { background: var(--ytc-bg-sky, #4ea5ff); }
.c-section-box--success.c-section-box--success { background: var(--ytc-bg-success, #20d99b); }
.c-section-box__heading.c-section-box__heading {
  position: absolute;
  top: -31px;
  left: 50%;
  transform: translateX(-50%);
}
.c-section-box__body.c-section-box__body {
  display: flex;
  flex-direction: column;
  gap: 30px; /* 2026-10-19 [common] Figma itemSpacing 30 (旧 36) */
  align-items: center;
  width: 100%;
}
/* 2026-10-19 [common] リード付き見出し (Figma「Section Heading / PC 下層 リード付き」) は上 150 */
@media screen and (min-width: 769px) {
  .c-section-box.c-section-box:where(:has(> .c-section-box__heading .c-section-heading-sub__lead)) { padding-top: 149px; } /* :where で詳細度を基本ルールと同じにし、ページ別の上書きを優先させる */
  /* 2026-10-19 left:50% の absolute は幅が箱の半分 (約600px) までしか広がらず、長いリード文が2行に折れて
     箱の中身に重なっていた。幅は中身なり・最大は箱の内側までにする (lead 自体の max-width 920 は維持) */
  .c-section-box__heading.c-section-box__heading { width: max-content; max-width: calc(100% - 80px); }
}
@media screen and (max-width: 768px) {
  .c-section-box.c-section-box { padding: 90px 20px 32px; margin-top: 36px; }
  .c-section-box.c-section-box:first-of-type { margin-top: 24px; }
  .c-section-box__heading.c-section-box__heading { top: -20px; }
  .c-section-box__body.c-section-box__body { gap: 24px; }
  .c-section-heading-sub.c-section-heading-sub { gap: 10px; }
}


/* ----------------------------------------------------------
   P20. History Row — Figma 636:10298
   沿革タイムライン 1行（ドット + 年 + できごと）
   親の破線軸は .c-history-list 側で担う
   ---------------------------------------------------------- */
.c-history-list.c-history-list {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 0;
  overflow: hidden;
}
.c-history-list::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 16px;
  bottom: 16px;
  width: 1px;
  border-left: 1px dashed var(--ytc-text-link, #439fff);
}
.c-history-row.c-history-row {
  position: relative;
  display: flex;
  gap: 6px;
  align-items: flex-start;
  z-index: 1;
}
.c-history-row__dot.c-history-row__dot {
  flex-shrink: 0;
  width: 10px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c-history-row__dot::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--ytc-text-link, #439fff);
  border-radius: 999px;
}
.c-history-row__text.c-history-row__text {
  display: flex;
  gap: 20px;
  align-items: center;
  font-size: 18px;
  line-height: 1.8;
}
.c-history-row__year.c-history-row__year {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  color: var(--ytc-text-link, #439fff);
  width: 46px;
  flex-shrink: 0;
}
.c-history-row__event.c-history-row__event {
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 400;
  color: var(--ytc-text-primary, #000);
}
@media screen and (max-width: 768px) {
  .c-history-row__text.c-history-row__text { font-size: 14px; gap: 10px; }
  .c-history-row__year.c-history-row__year { width: 40px; }
}


/* ==========================================================
   Phase 10 end (parts 1-20)
   ========================================================== */


/* ==========================================================
   P21-P24. 2026-10-02 下層ページ横断で頻出していたパターンを
   パーツ化。admission / course-detail / about 系で共有。
   ========================================================== */


/* ----------------------------------------------------------
   P21. Definition Row — 入試・学科詳細の「ピル+値」横並び
   ----------------------------------------------------------
   HTML:
     <dl class="c-def-row" style="--def-cols:4;">
       <div class="c-def-row__cell">
         <dt class="c-def-row__pill">修業年限</dt>
         <dd class="c-def-row__value">4年</dd>
       </div>
       ...
     </dl>
   variants: --card (白地枠付き) / --sm (値を小さく)
   ---------------------------------------------------------- */
.c-def-row.c-def-row {
  display: grid;
  grid-template-columns: repeat(var(--def-cols, 3), 1fr);
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.c-def-row--card.c-def-row--card {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 10px;
}
.c-def-row__cell.c-def-row__cell {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  text-align: center;
  padding: 4px 24px;
  border-right: 1px solid #d9d9d9;
}
.c-def-row--card .c-def-row__cell { border-right-color: #e5e5e5; }
.c-def-row__cell:last-child { border-right: none; }
.c-def-row__pill.c-def-row__pill {
  display: inline-block;
  padding: 8px 20px;
  background: var(--ytc-bg-section, #d7f2ff);
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 999px;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 15px;
  color: var(--ytc-text-primary, #000);
}
.c-def-row--sm .c-def-row__pill { padding: 6px 14px; font-size: 14px; border-color: transparent; }
.c-def-row__value.c-def-row__value {
  margin: 0;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.6;
  color: var(--ytc-text-primary, #000);
}
.c-def-row--sm .c-def-row__value { font-weight: 400; font-size: 14px; line-height: 1.7; }
@media screen and (max-width: 768px) {
  .c-def-row.c-def-row { grid-template-columns: 1fr; gap: 16px; }
  .c-def-row__cell.c-def-row__cell {
    border-right: none;
    border-bottom: 1px solid #d9d9d9;
    padding: 0 0 16px;
  }
  .c-def-row--card .c-def-row__cell { border-bottom-color: #e5e5e5; }
  .c-def-row__cell:last-child { border-bottom: none; padding-bottom: 0; }
}


/* ----------------------------------------------------------
   P22. Text Card — 「タイトル (下線) + 本文」の2列カード
   ----------------------------------------------------------
   HTML:
     <li class="c-text-card">
       <p class="c-text-card__title">タイトル</p>
       <p class="c-text-card__body">本文...</p>
     </li>
   admission系の ABOUT セクションで4ページ共通利用
   ---------------------------------------------------------- */
.c-text-card.c-text-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 10px;
  box-sizing: border-box;
  height: 100%;
}
.c-text-card__title.c-text-card__title {
  margin: 0;
  /* Figma 822:13543 準拠: タイトルは中央寄せ・ボールド・下線無し */
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--ytc-text-primary, #000);
  text-align: center;
}
/* 旧仕様の下線付きタイトルが必要な場合は --underline modifier を付与 */
.c-text-card--underline .c-text-card__title {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ytc-bg-brand, #439fff);
  text-align: left;
}
.c-text-card__body.c-text-card__body {
  margin: 0;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ytc-text-primary, #000);
}


/* ----------------------------------------------------------
   P23. Feature Numbered Card — 番号バッジ + タイトル + 説明
   ----------------------------------------------------------
   HTML (vertical, default):
     <li class="c-feature-numbered">
       <span class="c-feature-numbered__no">01</span>
       <p class="c-feature-numbered__title">...</p>
       <p class="c-feature-numbered__desc">...</p>
     </li>
   HTML (horizontal):
     <li class="c-feature-numbered c-feature-numbered--horizontal">
       <span class="c-feature-numbered__no">01</span>
       <div class="c-feature-numbered__body">
         <p class="c-feature-numbered__title">...</p>
         <p class="c-feature-numbered__desc">...</p>
       </div>
     </li>
   variants: --horizontal (番号左), --success (緑枠+緑丸)
   admission AO/general/company SELECTION, course-detail FEATURES で共有
   ---------------------------------------------------------- */
.c-feature-numbered.c-feature-numbered {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 28px 22px;
  background: #fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 10px;
  box-sizing: border-box;
  height: 100%;
  /* Figma 595:9061 準拠: バッジ・タイトル・説明すべて中央寄せ */
  align-items: center;
  text-align: center;
}
.c-feature-numbered--horizontal.c-feature-numbered--horizontal {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: 20px;
  padding: 24px;
}
.c-feature-numbered--success.c-feature-numbered--success {
  border-color: #1aad7c;
}
.c-feature-numbered__no.c-feature-numbered__no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  background: var(--ytc-bg-brand, #439fff);
  color: #fff;
  border-radius: 999px;
  font-family: var(--ytc-font-en, "Montserrat", sans-serif);
  font-weight: 700;
  font-size: 14px;
}
.c-feature-numbered--horizontal .c-feature-numbered__no {
  width: 50px;
  height: 50px;
  font-size: 20px;
}
.c-feature-numbered--success .c-feature-numbered__no { background: #1aad7c; }
.c-feature-numbered__body.c-feature-numbered__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 0 0;
  min-width: 0;
  align-items: center;
}
.c-feature-numbered--horizontal .c-feature-numbered__body.c-feature-numbered__body {
  align-items: flex-start;
}
.c-feature-numbered__title.c-feature-numbered__title {
  margin: 0;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ytc-text-primary, #000);
}
.c-feature-numbered--horizontal .c-feature-numbered__title { font-size: 20px; }
.c-feature-numbered__desc.c-feature-numbered__desc {
  margin: 0;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ytc-text-secondary, #787878);
}
.c-feature-numbered--horizontal .c-feature-numbered__desc { color: var(--ytc-text-primary, #000); }


/* ----------------------------------------------------------
   P24. Step Row — 「STEP バッジ + タイトル + 説明」横並び
   ----------------------------------------------------------
   HTML:
     <ol>
       <li class="c-step-row">
         <div class="c-step-row__no">STEP 1</div>
         <div class="c-step-row__body">
           <p class="c-step-row__title">...</p>
           <p class="c-step-row__desc">...</p>
         </div>
       </li>
     </ol>
   連続行には下向き矢印 (::after) 自動付与。
   admission AO SCHEDULE / recommendation FLOW など縦積み7ステップで共有
   ---------------------------------------------------------- */
.c-step-row.c-step-row {
  position: relative;
  display: flex;
  gap: 24px;
  padding: 24px 28px;
  background: #fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 10px;
  box-sizing: border-box;
  list-style: none;
}
.c-step-row:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 60px;
  bottom: -14px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid var(--ytc-bg-brand, #439fff);
  z-index: 1;
}
.c-step-row__no.c-step-row__no {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100px;
  padding: 10px;
  background: var(--ytc-bg-brand, #439fff);
  color: #fff;
  border-radius: 8px;
  font-family: var(--ytc-font-en, "Montserrat", sans-serif);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-align: center;
}
.c-step-row__body.c-step-row__body {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.c-step-row__title.c-step-row__title {
  margin: 0;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--ytc-text-primary, #000);
}
.c-step-row__desc.c-step-row__desc {
  margin: 0;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.8;
  color: var(--ytc-text-secondary, #787878);
}
@media screen and (max-width: 768px) {
  .c-step-row.c-step-row { flex-direction: column; gap: 12px; padding: 16px; }
  .c-step-row__no.c-step-row__no { width: 100%; }
  .c-step-row:not(:last-child)::after { left: 50%; transform: translateX(-50%); }
}


/* ----------------------------------------------------------
   P25. Chip Grid — ロールごとの選択可能タグの3列グリッド
   HTML:
     <ul class="c-chip-grid">
       <li class="c-chip">テキスト</li>
     </ul>
   career-companies 就職先一覧 / qa 等で流用
   ---------------------------------------------------------- */
.c-chip-grid.c-chip-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(var(--chip-cols, 3), 1fr);
  gap: 10px 15px;
  width: 100%;
}
.c-chip.c-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 41px;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ytc-text-primary, #000);
  text-align: center;
}
@media screen and (max-width: 768px) {
  .c-chip-grid.c-chip-grid { grid-template-columns: 1fr; gap: 8px; }
}


/* ----------------------------------------------------------
   P26. Tab Pill — 選択/非選択の rounded タブ
   HTML:
     <ul class="c-tab-pill">
       <li><button class="c-tab-pill__btn is-active">すべて</button></li>
       <li><button class="c-tab-pill__btn">ディーラー</button></li>
     </ul>
   career-companies / admission 系で流用
   ---------------------------------------------------------- */
.c-tab-pill.c-tab-pill {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
}
.c-tab-pill > li { flex: 1 1 0; min-width: 120px; display: flex; }
.c-tab-pill__btn.c-tab-pill__btn {
  flex: 1 1 0;
  padding: 10px 20px;
  background: #fff;
  border: 1px solid var(--ytc-border-strong, #39364e);
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
  font-weight: 700;
  font-size: 14px;
  color: var(--ytc-text-primary, #000);
  transition: background 0.2s, color 0.2s;
}
.c-tab-pill__btn:hover { background: #f0f5fa; }
.c-tab-pill__btn.is-active {
  background: var(--ytc-bg-brand, #439fff);
  color: #fff;
}
@media screen and (max-width: 768px) {
  .c-tab-pill.c-tab-pill { gap: 6px; }
  .c-tab-pill__btn { font-size: 12px; padding: 8px 12px; }
}


/* ----------------------------------------------------------
   P27. c-section-box 追加 variants (danger-soft)
   ---------------------------------------------------------- */
.c-section-box--danger-soft.c-section-box--danger-soft { background: #ffe3e7; }
.c-section-box--danger-soft .c-section-heading-sub__en-shadow { color: #fc3855; }

/* ==========================================================
 * c-pill — カテゴリピル / バッジ (全ページ共通)
 * ========================================================== */
.c-pill.c-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 14px;
    border: 1px solid var(--ytc-border-base, #39364e);
    border-radius: 999px;
    background: #ffffff;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ytc-text-primary, #000);
    text-decoration: none;
    white-space: nowrap;
}
.c-pill.c-pill--brand {
    background: var(--ytc-bg-brand, #439fff);
    color: #ffffff;
    border-color: var(--ytc-bg-brand, #439fff);
}
.c-pill.c-pill--info {
    background: var(--ytc-bg-brand, #439fff);
    color: #ffffff;
    border-color: var(--ytc-bg-brand, #439fff);
}
.c-pill.c-pill--blog {
    background: var(--ytc-bg-success, #20d99b);
    color: #ffffff;
    border-color: var(--ytc-bg-success, #20d99b);
}
.c-pill.c-pill--event {
    background: var(--ytc-bg-accent, #ffef6b);
    color: var(--ytc-text-primary, #000);
    border-color: var(--ytc-border-base, #39364e);
}
a.c-pill:hover {
    opacity: 0.85;
}

/* ==========================================================
 * c-btn — ボタン共通 (全ページ共通 / figma-top.css からの移管)
 * ========================================================== */
.c-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 999px;
    font-family: var(--ytc-font-jp, "Noto Sans JP", sans-serif);
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-sizing: border-box;
    text-decoration: none;
    border: 1px solid var(--ytc-border-strong, #39364e);
}
.c-btn--primary {
    min-width: 240px;
    height: 45px;
    padding: 0 24px;
    background: var(--ytc-bg-inverse, #39364e);
    color: #ffffff;
    font-size: 15px;
}
.c-btn--primary .c-btn__label {
    color: #ffffff;
}
.c-btn--primary .c-btn__arrow {
    width: 13.5px;
    height: 13.5px;
    flex-shrink: 0;
    filter: brightness(0) invert(1);
}
.c-btn--outline {
    min-width: 150px;
    height: 40px;
    padding: 0 16px;
    background: #ffffff;
    color: var(--ytc-text-primary, #000);
    font-size: 14px;
}
.c-btn--brand {
    min-width: 180px;
    height: 42px;
    padding: 0 20px;
    background: var(--ytc-bg-brand, #439fff);
    color: #ffffff;
    font-size: 14px;
    border-color: var(--ytc-bg-brand, #439fff);
}
.c-btn:hover {
    opacity: 0.85;
}