/*
 * figma-top.css — TOP ページ専用 CSS (Figma 準拠リビルド v1)
 * Figma file: 9m4PVlTYQ9LVUwup5zhjGK / node 38:1171 (PC)
 * 作成日: 2026-10-02 Session 2
 *
 * 本ファイルは TOP ページ専用。共通パーツは figma-components.css へ分離予定。
 */

/* ==========================================================
   Design Tokens (TOP 専用。tokens.css と整合させる想定)
   ========================================================== */
:root {
  --ytc-bg-base: #ffffff;
  --ytc-bg-inverse: #000000;
  --ytc-bg-brand: #439fff;
  --ytc-bg-brand-strong: #2f8aee;
  --ytc-bg-brand-soft: #6bd0ff;
  --ytc-bg-accent: #ffef6b;
  --ytc-bg-success: #20d99b;
  --ytc-bg-section: #d7f2ff;
  --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;
}

/* ==========================================================
   TOP wrapper
   ========================================================== */
.ytc-top {
  color: var(--ytc-text-primary);
  font-family: var(--ytc-font-jp);
  background: var(--ytc-bg-base);
  overflow-x: hidden;
}
.ytc-top img { display: block; max-width: 100%; height: auto; }
.ytc-top a { color: inherit; text-decoration: none; }

/* ==========================================================
   Shared: Wordmark (大英字タイトル・影つき)
   ========================================================== */
.c-wordmark {
  position: relative;
  display: inline-flex;
  font-family: var(--ytc-font-en);
  font-weight: 700;
  font-style: italic;
  font-size: 67px;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  user-select: none;
}
.c-wordmark__shadow {
  position: absolute;
  top: 4px;
  left: 4px;
  color: var(--ytc-text-brand);
}
.c-wordmark__front {
  position: relative;
  color: var(--ytc-text-inverse);
  text-shadow: 0 0 0 var(--ytc-text-inverse);
}

/* ==========================================================
   Shared: Section Heading (ピル + h2 + lead)
   ========================================================== */
.c-section-heading {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  width: 838px;
  max-width: 100%;
  text-align: center;
}
.c-section-heading__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 40px;
  background: var(--ytc-bg-accent);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 40px;
  font-family: var(--ytc-font-jp);
  font-weight: 500;
  font-size: 18px;
  line-height: 18px;
  letter-spacing: 0.02em;
}
.c-section-heading__title {
  font-family: var(--ytc-font-jp);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.5;
  margin: 0;
}
.c-section-heading__lead {
  font-family: var(--ytc-font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}

/* ==========================================================
   Shared: Button
   ========================================================== */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  font-family: var(--ytc-font-jp);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
  text-decoration: none;
}
.c-btn--primary {
  width: 305px;
  height: 45px;
  padding: 0 20px;
  background: var(--ytc-bg-inverse);
  color: var(--ytc-text-inverse) !important;
  font-size: 16px;
}
.c-btn--primary .c-btn__label {
  color: var(--ytc-text-inverse) !important;
}
.c-btn--primary .c-btn__arrow {
  width: 13.5px;
  height: 13.5px;
  flex-shrink: 0;
  filter: brightness(0) invert(1); /* black SVG → white */
}
.c-btn--outline {
  width: 150px;
  height: 40px;
  padding: 0 8px;
  background: var(--ytc-bg-base);
  color: var(--ytc-text-primary);
  border: 1px solid var(--ytc-border-strong);
  font-size: 15px;
}

/* ==========================================================
   Shared: Tag
   ========================================================== */
.c-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 10px;
  background: var(--ytc-bg-base);
  border: 1px solid var(--ytc-border-tag);
  border-radius: 999px;
  font-family: var(--ytc-font-jp);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  color: var(--ytc-text-primary);
  white-space: nowrap;
}

/* ==========================================================
   Shared: Section wrapper (枠付きコンテナ)
   ========================================================== */
.c-section-box {
  position: relative;
  width: var(--ytc-container-pc);
  max-width: 100%;
  margin: 0 auto;
  border: 1px solid var(--ytc-border-strong);
  border-radius: 20px;
  padding: 60px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}

/* ==========================================================
   1. KV (ヒーロー CHALLENGE SPIRITS)
   ========================================================== */
.ytc-kv {
  position: relative;
  background: var(--ytc-bg-brand);
  width: 100%;
  overflow: hidden;
  height: 731px;
  margin-top: -20px; /* ヘッダー下の radius 分かぶせる */
  padding-top: 20px;
}
.ytc-kv__inner {
  position: relative;
  width: 100%;
  height: 731px;
  margin: 0 auto;
}
.ytc-kv__wbg {
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translateX(-30%);
  width: 1240px;
  height: 540px;
  pointer-events: none;
  opacity: 0.95;
}
.ytc-kv__title-group {
  position: absolute;
  top: 137px;
  left: 50%;
  transform: translateX(-10%);
  width: 860px;
  height: 108px;
  pointer-events: none;
}
.ytc-kv__challenge-spirits {
  width: 860px;
  height: 62px;
  display: block;
}
.ytc-kv__en-sub {
  position: absolute;
  top: 83px;
  left: 372px;
  font-family: var(--ytc-font-en);
  font-weight: 700;
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--ytc-text-inverse);
  text-transform: uppercase;
  white-space: nowrap;
  margin: 0;
}
.ytc-kv__slide {
  position: absolute;
  top: 120px;
  left: 50%;
  transform: translateX(-50%);
  width: 2519px;
  height: 598px;
  pointer-events: none;
}
.ytc-kv__slide.is-anim {
  animation: ytc-kv-pan 24s linear infinite;
}
@keyframes ytc-kv-pan {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(calc(-50% - 1074px)); }
}
@media (prefers-reduced-motion: reduce) {
  .ytc-kv__slide.is-anim { animation: none; }
}
.ytc-kv__slide-panel {
  position: absolute;
  width: 908px;
  height: 343px;
}
.ytc-kv__slide-panel--1a { left: -0.5px; top: 0; }
.ytc-kv__slide-panel--2a { left: 537px; top: 121px; height: 307px; }
.ytc-kv__slide-panel--1b { left: 1074px; top: 170px; }
.ytc-kv__slide-panel--2b { left: 1610.5px; top: 291px; height: 307px; }
.ytc-kv__floor {
  position: absolute;
  left: 0;
  width: 908px;
  height: 265px;
}
.ytc-kv__slide-panel--1a .ytc-kv__floor,
.ytc-kv__slide-panel--1b .ytc-kv__floor { top: 88px; }
.ytc-kv__slide-panel--2a .ytc-kv__floor,
.ytc-kv__slide-panel--2b .ytc-kv__floor { top: 52px; }
.ytc-kv__props {
  position: absolute;
  top: 0;
  width: 687px;
  height: 307px;
}
.ytc-kv__slide-panel--1a .ytc-kv__props,
.ytc-kv__slide-panel--1b .ytc-kv__props { left: 109px; }
.ytc-kv__slide-panel--2a .ytc-kv__props,
.ytc-kv__slide-panel--2b .ytc-kv__props { left: 143px; width: 649px; height: 279px; }
.ytc-kv__props img {
  position: absolute;
  object-fit: contain;
  pointer-events: none;
}
.ytc-kv__title-main {
  position: absolute;
  top: 597px;
  left: 50%;
  transform: translateX(-50%);
  width: 962px;
  height: 133px;
  pointer-events: none;
}
.ytc-kv__title-main img { display: block; width: 100%; height: 100%; }

/* ==========================================================
   2. PICK UP
   ========================================================== */
.ytc-pickup {
  position: relative;
  padding: 60px 0 40px;
  display: flex;
  justify-content: center;
}
.ytc-pickup .c-wordmark {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.ytc-pickup__box {
  position: relative;
  width: var(--ytc-container-pc);
  max-width: 100%;
  background: var(--ytc-bg-sky);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 20px;
  padding: 60px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
.ytc-pickup__list {
  display: flex;
  gap: 30px;
  align-items: flex-start;
  justify-content: center;
}

/* ---------- 共通カルーセル (JS 初期化後に動的化) ---------- */
.c-carousel-viewport {
  width: 100%;
  overflow: hidden;
  position: relative;
}
.c-carousel-viewport .is-carousel {
  justify-content: flex-start;
  transition: transform 0.5s cubic-bezier(.4,.0,.2,1);
  will-change: transform;
}
.c-carousel-viewport .is-carousel > * {
  flex-shrink: 0;
}
.c-carousel-dots-nav {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  margin: 10px 0 0;
}
.c-carousel-dots-btn {
  width: 10px;
  height: 10px;
  padding: 0;
  margin: 0;
  background: #fff;
  border: 1px solid #39364e;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
}
.c-carousel-dots-btn:hover {
  background: #e5e5e5;
}
.c-carousel-dots-btn.is-active {
  background: #39364e;
}

/* カード列が 3カラム以下しかない場合でもスライドできるようアイテム幅を固定 */
.c-carousel-viewport .is-carousel.ytc-pickup__list > .c-pickup-card,
.c-carousel-viewport .is-carousel.ytc-oc__list > .c-event-card,
.c-carousel-viewport .is-carousel.ytc-interview__list > .c-interview-card {
  width: calc((100% - 60px) / 3);
  min-width: calc((100% - 60px) / 3);
  max-width: calc((100% - 60px) / 3);
}
@media (max-width: 768px) {
  .c-carousel-viewport .is-carousel.ytc-pickup__list > .c-pickup-card,
  .c-carousel-viewport .is-carousel.ytc-oc__list > .c-event-card,
  .c-carousel-viewport .is-carousel.ytc-interview__list > .c-interview-card {
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }
}
.c-pickup-card {
  position: relative;
  width: 360px;
  /* 2026-10-14 佐藤様指摘: タイトル行数で高さが変わるので固定高さに統一 */
  height: 400px;
  background: var(--ytc-bg-base);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 10px;
  padding: 15px;
  box-shadow: var(--ytc-card-shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}
.c-pickup-card__text { flex: 1 1 auto; min-height: 0; }
.c-pickup-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.c-pickup-card__thumb {
  width: 100%;
  height: 220px;
  border-radius: 5px;
  overflow: hidden;
  background: #000;
}
.c-pickup-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-pickup-card__text { display: flex; flex-direction: column; gap: 8px; }
.c-pickup-card__date {
  font-family: var(--ytc-font-en);
  font-weight: 400;
  font-size: 16px;
  line-height: 1;
  color: var(--ytc-text-brand);
  letter-spacing: 0.02em;
}
.c-pickup-card__title {
  font-family: var(--ytc-font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}
.c-pickup-card__badge {
  position: absolute;
  top: -1px;
  right: -1px;
  height: 30px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  background: var(--ytc-bg-success);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 0 10px 0 10px;
  font-family: var(--ytc-font-jp);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.05em;
}
.c-pickup-card__badge--admission { background: var(--ytc-bg-error, #fc3855); color: var(--ytc-text-inverse, #fff); }
.c-pickup-card__badge--info  { background: var(--ytc-bg-brand, #439fff); color: var(--ytc-text-inverse, #fff); }
.c-pickup-card__badge--blog  { background: var(--ytc-bg-success, #20d99b); color: var(--ytc-text-inverse, #fff); }
.c-pickup-card__badge--event { background: var(--ytc-bg-accent, #ffef6b); color: var(--ytc-text-primary, #000); }

/* Carousel controls (prev/next) */
.c-carousel-controls {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--ytc-container-pc) + 50px);
  pointer-events: none;
  z-index: 3;
  height: 0;
}
.c-carousel-controls__btn {
  position: absolute;
  top: 0;
  width: 50px;
  height: 50px;
  pointer-events: auto;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.c-carousel-controls__btn--prev { left: -25px; }
.c-carousel-controls__btn--next { right: -25px; }
.c-carousel-dots {
  width: 130px;
  height: 10px;
}

/* ==========================================================
   3. COURSE
   ========================================================== */
.ytc-course {
  position: relative;
  padding: 60px 0 40px;
  display: flex;
  justify-content: center;
}
.ytc-course .c-wordmark {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.ytc-course__box {
  position: relative;
  width: var(--ytc-container-pc);
  max-width: 100%;
  background: var(--ytc-bg-section);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 20px;
  padding: 60px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
.ytc-course__groups {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 1160px;
  max-width: 100%;
}
.ytc-course__group {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.ytc-course__k {
  width: 1160px;
  max-width: 100%;
  height: 10px;
}
.ytc-course__sub-heading {
  font-family: var(--ytc-font-jp);
  font-weight: 700;
  font-size: 24px;
  line-height: 1;
  letter-spacing: 0.02em;
  margin: 0;
  text-align: center;
}
.ytc-course__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 28px;
  width: 100%;
}
.ytc-course__grid--2 { grid-template-columns: 1fr 1fr; }

/* Course Card */
.c-course-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 167px;
}
.c-course-card--total { height: 207px; }
.c-course-card__head {
  background: var(--ytc-bg-brand);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 10px 10px 0 0;
  padding: 15px 10px 15px 10px;
  display: flex;
  justify-content: center;
}
.c-course-card--green .c-course-card__head { background: var(--ytc-bg-success); }
.c-course-card__head-inner {
  display: flex;
  gap: 15px;
  align-items: center;
}
.c-course-card__year {
  background: var(--ytc-bg-accent);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 5px;
  width: 80px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 2px 0;
  font-family: var(--ytc-font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: 0.02em;
  color: var(--ytc-text-primary);
}
.c-course-card__year em {
  font-family: var(--ytc-font-en);
  font-weight: 700;
  font-size: 24px;
  line-height: 30px;
  color: var(--ytc-text-brand);
  font-style: normal;
}
.c-course-card__title {
  font-family: var(--ytc-font-jp);
  font-weight: 900;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ytc-text-inverse);
  text-shadow: 0 1px 0 var(--ytc-border-strong);
  margin: 0;
  white-space: nowrap;
}
.c-course-card__type {
  background: var(--ytc-bg-base);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 5px;
  width: 90px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ytc-font-jp);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.02em;
}
.c-course-card__body {
  flex: 1;
  background: var(--ytc-bg-base);
  border: 1px solid var(--ytc-border-strong);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.c-course-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 0;
}
.c-course-card__more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--ytc-font-en);
  font-weight: 600;
  font-size: 12px;
  line-height: 1;
  color: var(--ytc-text-primary);
}
.c-course-card__more svg { width: 12px; height: 12px; }

/* ==========================================================
   4. OPEN CAMPUS
   ========================================================== */
.ytc-oc {
  position: relative;
  padding: 60px 0 40px;
  display: flex;
  justify-content: center;
}
.ytc-oc .c-wordmark {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.ytc-oc__top-illust {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1160px;
  max-width: calc(100% - 32px);
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  pointer-events: none;
  z-index: 1;
}
.ytc-oc__top-illust img { height: 143px; width: auto; }
.ytc-oc__box {
  position: relative;
  width: var(--ytc-container-pc);
  max-width: 100%;
  background: var(--ytc-bg-brand-soft);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 20px;
  padding: 60px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
.ytc-oc__list {
  display: flex;
  gap: 30px;
  align-items: stretch;
  justify-content: center;
}
.c-event-card {
  position: relative;
  width: 360px;
  background: var(--ytc-bg-base);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 8px 8px 0 -1px #4da2fb, 8px 8px 0 0 var(--ytc-border-strong);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.c-event-card__thumb { width: 100%; height: 220px; border-radius: 5px; overflow: hidden; }
.c-event-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-event-card__text { display: flex; flex-direction: column; gap: 8px; }
.c-event-card__date {
  background: var(--ytc-bg-brand);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 31px;
  padding: 3px 0;
  display: flex;
  gap: 5px;
  justify-content: center;
  align-items: center;
  font-family: var(--ytc-font-en);
  font-weight: 700;
  color: var(--ytc-text-inverse);
  white-space: nowrap;
}
.c-event-card__date .ymd { font-size: 19px; line-height: 1; }
.c-event-card__date .dow { font-size: 14px; line-height: 1; }
.c-event-card__title {
  font-family: var(--ytc-font-jp);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ytc-text-primary);
  margin: 0;
}
.c-event-card__badge {
  position: absolute;
  top: -1px;
  right: -1px;
  height: 30px;
  padding: 0 15px;
  background: var(--ytc-bg-error);
  color: var(--ytc-text-inverse);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 0 10px 0 10px;
  display: inline-flex;
  align-items: center;
  font-family: var(--ytc-font-jp);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.05em;
}

/* ==========================================================
   5. SUPPORT
   ========================================================== */
.ytc-support {
  position: relative;
  padding: 60px 0 40px;
  display: flex;
  justify-content: center;
}
.ytc-support .c-wordmark {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.ytc-support__box {
  position: relative;
  width: var(--ytc-container-pc);
  max-width: 100%;
  background: var(--ytc-bg-section);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 20px;
  padding: 60px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
.ytc-support__stats {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  width: 100%;
  justify-content: center;
  height: 213px;
}
.c-stat-card {
  position: relative;
  width: 274.5px;
  height: 213px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.c-stat-card__pill {
  position: relative;
  z-index: 2;
  background: var(--ytc-bg-accent);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 60px;
  width: 200px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -15px;
  font-family: var(--ytc-font-jp);
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}
.c-stat-card__body {
  flex: 1;
  width: 100%;
  background: var(--ytc-bg-base);
  border: 1px dashed var(--ytc-border-strong);
  border-radius: 5px;
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 1;
}
.c-stat-card__value {
  font-family: var(--ytc-font-en);
  font-weight: 700;
  font-size: 50px;
  line-height: 1;
  color: var(--ytc-text-brand);
  margin: 0;
}
.c-stat-card--green .c-stat-card__value { color: var(--ytc-text-accent); }
.c-stat-card--kana .c-stat-card__value {
  font-family: var(--ytc-font-jp);
  font-weight: 700;
  font-size: 38px;
}
.c-stat-card__desc {
  font-family: var(--ytc-font-jp);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}
.c-stat-card__note {
  font-family: var(--ytc-font-jp);
  font-weight: 400;
  font-size: 13px;
  line-height: 1;
  color: var(--ytc-text-secondary);
  margin: 0;
}
.ytc-support__illust {
  position: absolute;
  pointer-events: none;
}
.ytc-support__illust--1 { top: 113px; left: 239px; width: 46px; height: 110px; }
.ytc-support__illust--2 { top: 113px; left: 533.5px; width: 46px; height: 110px; }
.ytc-support__illust--3 { top: 163px; left: 778px; width: 96px; height: 60px; }
.ytc-support__illust--4 { top: 148px; left: 1072.5px; width: 96px; height: 75px; }
.ytc-support__ctas {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ==========================================================
   6. SPECIAL INTERVIEW
   ========================================================== */
.ytc-interview {
  position: relative;
  padding: 60px 0 40px;
  display: flex;
  justify-content: center;
}
.ytc-interview .c-wordmark {
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 723px;
}
.ytc-interview__box {
  position: relative;
  width: var(--ytc-container-pc);
  max-width: 100%;
  background: var(--ytc-bg-brand-soft);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 20px;
  padding: 70px 40px 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
.ytc-interview__list {
  display: flex;
  gap: 30px;
  align-items: stretch;
  justify-content: center;
}
.c-interview-card {
  width: 360px;
  background: var(--ytc-bg-base);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 10px;
  padding: 15px;
  box-shadow: 8px 8px 0 -1px #4da2fb, 8px 8px 0 0 var(--ytc-border-strong);
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.c-interview-card__thumb { width: 100%; height: 220px; border-radius: 5px; overflow: hidden; }
.c-interview-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-interview-card__text { display: flex; flex-direction: column; gap: 15px; }
.c-interview-card__cat {
  background: var(--ytc-bg-accent);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 31px;
  padding: 5px 0;
  display: flex;
  justify-content: center;
  font-family: var(--ytc-font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
.c-interview-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 0 20px;
  list-style: none;
  margin: 0;
}

/* ==========================================================
   7. NEWS
   ========================================================== */
.ytc-news {
  padding: 60px 0 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: center;
}
.ytc-news__tabs { display: flex; gap: 30px; }
.ytc-news__tab {
  width: 300px;
  height: 40px;
  background: var(--ytc-bg-base);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ytc-font-jp);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  color: var(--ytc-text-primary);
}
.ytc-news__list {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  width: 1160px;
  max-width: 100%;
}
.c-article-row {
  flex: 1;
  min-width: 180px;
  background: var(--ytc-bg-base);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 10px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.c-article-row__thumb { aspect-ratio: 150 / 100; border-radius: 5px; overflow: hidden; width: 100%; }
.c-article-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.c-article-row__meta { display: flex; gap: 10px; align-items: center; }
.c-article-row__cat {
  background: var(--ytc-bg-brand);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 20px;
  padding: 3px 20px;
  color: var(--ytc-text-inverse);
  font-family: var(--ytc-font-jp);
  font-weight: 700;
  font-size: 10px;
  line-height: 1;
}
.c-article-row__date {
  font-family: var(--ytc-font-en);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--ytc-text-brand);
}
.c-article-row__title {
  font-family: var(--ytc-font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.8;
  margin: 0;
}

/* ==========================================================
   8. Footer CTA + ベースフッター (別 CSS で管理する想定・暫定ここに記述)
   ========================================================== */
.ytc-footer-cta {
  background: var(--ytc-bg-brand);
  padding: 40px 100px;
  display: flex;
  justify-content: center;
}
.ytc-footer-cta__list {
  display: flex;
  gap: 30px;
  width: 1160px;
  max-width: 100%;
}
.c-cta-card {
  flex: 1;
  height: 100px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 20px;
  background: var(--ytc-bg-accent);
  border: 1px solid var(--ytc-border-strong);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ytc-text-primary);
}
.c-cta-card--guide { background: var(--ytc-bg-success); }
.c-cta-card__icon { width: 60px; height: 60px; flex-shrink: 0; }
.c-cta-card__text { display: flex; flex-direction: column; gap: 10px; }
.c-cta-card__jp {
  font-family: var(--ytc-font-jp);
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
}
.c-cta-card__en {
  font-family: var(--ytc-font-en);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
}

/* ==========================================================
   Side strips (左右の縦文字)
   ========================================================== */
.ytc-side-strip {
  position: absolute;
  top: 0;
  width: 50px;
  background: var(--ytc-bg-brand);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: var(--ytc-font-en);
  font-weight: 700;
  font-style: italic;
  font-size: 22px;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--ytc-text-inverse);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  text-transform: uppercase;
  pointer-events: none;
}
.ytc-side-strip--l { left: 0; }
.ytc-side-strip--r { right: 0; }

/* ==========================================================
   SP (<= 768) 対応は next session で追加
   ========================================================== */
@media (max-width: 768px) {
  :root { --ytc-container-pc: 100%; }
  .c-wordmark { font-size: 36px; }
  .c-section-heading { width: 100%; padding: 0 16px; }
  .c-section-heading__title { font-size: 24px; }
  .c-section-heading__pill { width: auto; min-width: 220px; max-width: 320px; padding: 0 20px; font-size: 14px; }
  .ytc-pickup__box,
  .ytc-course__box,
  .ytc-oc__box,
  .ytc-support__box,
  .ytc-interview__box { padding: 50px 16px 24px; border-radius: 16px; margin: 0 12px; }
  .ytc-pickup__list,
  .ytc-oc__list,
  .ytc-interview__list { flex-direction: column; }
  .c-pickup-card, .c-event-card, .c-interview-card { width: 100%; }
  .ytc-course__grid { grid-template-columns: 1fr; }
  .c-course-card { height: auto; }
  .c-course-card__head-inner { flex-wrap: wrap; justify-content: center; }
  .c-course-card__title { font-size: 20px; white-space: normal; }
  .ytc-support__stats { flex-wrap: wrap; height: auto; }
  .c-stat-card { width: calc(50% - 10px); }
  .ytc-support__illust { display: none; }
  .ytc-news__list { flex-direction: column; }
  .c-article-row { width: 100%; }
  .ytc-footer-cta { padding: 20px 16px; }
  .ytc-footer-cta__list { flex-direction: column; }
  .ytc-side-strip { display: none; }
  .ytc-kv { height: 500px; }
  .ytc-kv__inner { height: 500px; }
}

/* ====================================================================
 * 2026-10-14 TOP ページ 派手目アニメーション
 * data-ytc-anim を付けた section が viewport 入りで子要素を wave 入場
 * data-ytc-stagger を付けた子要素は --anim-delay で 波ちり
 * ==================================================================== */
@media (prefers-reduced-motion: no-preference) {

/* 既定: 非表示状態 (fade+slide) */
[data-ytc-anim] [data-ytc-stagger],
[data-ytc-anim][data-ytc-anim="self"] {
    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity 0.65s cubic-bezier(.22,1,.36,1),
        transform 0.65s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--anim-delay, 0ms);
    will-change: opacity, transform;
}

[data-ytc-anim].is-in-view [data-ytc-stagger].is-in-view,
[data-ytc-anim][data-ytc-anim="self"].is-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* バリエーション: scale pop (wordmark 用) */
[data-ytc-anim-variant="pop"] [data-ytc-stagger] {
    opacity: 0;
    transform: scale(0.6) translateY(20px);
    transition:
        opacity 0.7s cubic-bezier(.34,1.56,.64,1),
        transform 0.7s cubic-bezier(.34,1.56,.64,1);
    transition-delay: var(--anim-delay, 0ms);
}
[data-ytc-anim-variant="pop"].is-in-view [data-ytc-stagger].is-in-view {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* バリエーション: slide-from-left */
[data-ytc-anim-variant="slide-left"] [data-ytc-stagger] {
    opacity: 0;
    transform: translateX(-48px);
    transition:
        opacity 0.75s cubic-bezier(.22,1,.36,1),
        transform 0.75s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--anim-delay, 0ms);
}
[data-ytc-anim-variant="slide-left"].is-in-view [data-ytc-stagger].is-in-view {
    opacity: 1;
    transform: translateX(0);
}

/* バリエーション: zoom-in (hero 用) */
[data-ytc-anim-variant="zoom"] [data-ytc-stagger] {
    opacity: 0;
    transform: scale(1.08);
    transition:
        opacity 1s cubic-bezier(.22,1,.36,1),
        transform 1.2s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--anim-delay, 0ms);
}
[data-ytc-anim-variant="zoom"].is-in-view [data-ytc-stagger].is-in-view {
    opacity: 1;
    transform: scale(1);
}

/* ホバー: カード類 lift + scale */
.ytc-pickup .c-pickup-card,
.ytc-oc .c-event-card,
.ytc-course .c-course-card,
.ytc-interview .c-interview-card,
.ytc-news .c-article-row {
    transition: transform 0.35s cubic-bezier(.22,1,.36,1), box-shadow 0.35s cubic-bezier(.22,1,.36,1);
}
.ytc-pickup .c-pickup-card:hover,
.ytc-oc .c-event-card:hover,
.ytc-course .c-course-card:hover,
.ytc-interview .c-interview-card:hover,
.ytc-news .c-article-row:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 14px 28px rgba(31, 56, 82, 0.14);
}
/* 2026-10-14 佐藤様指摘: SUPPORT の数値カードはホバーアクションなし */

/* wordmark に軽い bounce を付与 (入場後) */
.c-wordmark.is-in-view .c-wordmark__front {
    animation: ytc-wm-bounce 0.9s cubic-bezier(.34,1.56,.64,1) 0.1s both;
}
@keyframes ytc-wm-bounce {
    0%   { transform: translateY(10px) scale(0.9); opacity: 0; }
    60%  { transform: translateY(-4px) scale(1.03); opacity: 1; }
    100% { transform: translateY(0) scale(1); }
}

/* 数字 count-up 中はちょっと光らせる */
[data-ytc-countup] { display: inline-block; }

/* 2026-10-14 佐藤様指摘: TOP の .c-wordmark は PC で translateX(-50%) 中央寄せ
   → stagger の transform で centering 消失対策・PC 限定で translate() 両軸指定
   SP は wordmark が通常 flow なので override 不要 (SP 側 custom.css が transform:none を適用) */
@media screen and (min-width: 769px) {
    .ytc-pickup .c-wordmark[data-ytc-stagger],
    .ytc-course .c-wordmark[data-ytc-stagger],
    .ytc-oc .c-wordmark[data-ytc-stagger],
    .ytc-support .c-wordmark[data-ytc-stagger],
    .ytc-interview .c-wordmark[data-ytc-stagger] {
        transform: translate(-50%, 32px);
    }
    .ytc-pickup .c-wordmark[data-ytc-stagger].is-in-view,
    .ytc-course .c-wordmark[data-ytc-stagger].is-in-view,
    .ytc-oc .c-wordmark[data-ytc-stagger].is-in-view,
    .ytc-support .c-wordmark[data-ytc-stagger].is-in-view,
    .ytc-interview .c-wordmark[data-ytc-stagger].is-in-view {
        transform: translate(-50%, 0);
    }
    [data-ytc-anim-variant="pop"] .ytc-pickup .c-wordmark[data-ytc-stagger],
    [data-ytc-anim-variant="pop"] .ytc-course .c-wordmark[data-ytc-stagger],
    [data-ytc-anim-variant="pop"] .ytc-oc .c-wordmark[data-ytc-stagger],
    [data-ytc-anim-variant="pop"] .ytc-support .c-wordmark[data-ytc-stagger],
    [data-ytc-anim-variant="pop"] .ytc-interview .c-wordmark[data-ytc-stagger] {
        transform: translate(-50%, 20px) scale(0.92);
    }
    [data-ytc-anim-variant="pop"] .ytc-pickup .c-wordmark[data-ytc-stagger].is-in-view,
    [data-ytc-anim-variant="pop"] .ytc-course .c-wordmark[data-ytc-stagger].is-in-view,
    [data-ytc-anim-variant="pop"] .ytc-oc .c-wordmark[data-ytc-stagger].is-in-view,
    [data-ytc-anim-variant="pop"] .ytc-support .c-wordmark[data-ytc-stagger].is-in-view,
    [data-ytc-anim-variant="pop"] .ytc-interview .c-wordmark[data-ytc-stagger].is-in-view {
        transform: translate(-50%, 0) scale(1);
    }
}

}  /* /@media prefers-reduced-motion */

/* ==========================================================================
   2026-10-19 Figma JSON 準拠レイアウト調整 (TOP)
   - 数値は Figma ノード JSON (technoauto_top_pc / technoauto_top_sp) の
     absoluteBoundingBox / padding / itemSpacing / style から採寸
   - custom.css (後読み) の TOP ブロックに勝つよう body.is-top で詳細度を上げている
   ========================================================================== */
@media screen and (min-width: 769px) {

    /* ---- セクション間の縦リズム ----
       Figma: 前セクションの箱の下端 → 次の英字見出し上端 = 50px、見出し → 箱上端 = 34〜38px
       (各セクション padding-bottom 40px は据え置き、padding-top と見出し top で調整) */
    body.is-top .ytc-pickup     { padding-top: 48px; }
    body.is-top .ytc-pickup .c-wordmark { top: 10px; }
    body.is-top .ytc-course     { padding-top: 44px; }
    body.is-top .ytc-course .c-wordmark { top: 10px; }
    body.is-top .ytc-oc         { padding-top: 73px; }   /* イラスト +11 / 見出し +35 / 箱 +73 */
    body.is-top .ytc-oc .c-wordmark { top: 35px; }
    body.is-top .ytc-oc__top-illust { top: 11px; }
    body.is-top .ytc-support    { padding-top: 44px; }
    body.is-top .ytc-support .c-wordmark { top: 10px; }
    body.is-top .ytc-interview  { padding-top: 48px; }
    body.is-top .ytc-interview .c-wordmark { top: 10px; }
    body.is-top .ytc-news       { padding-top: 10px; padding-bottom: 50px; }

    /* ---- KV ----
       Figma: 方眼パネル y152 / CHALLENGE SPIRITS y138 / クルマ好き、ここだ。 x76 y598 / スライド y121
       (wbg の margin-top が .ytc-kv__inner に相殺されて inner の基準位置になる点に注意) */
    body.is-top .ytc-kv { height: 708px; }
    body.is-top .ytc-kv__wbg { margin: 69px auto 50px; }
    body.is-top .ytc-kv__title-group { top: -14px; }
    body.is-top .ytc-kv__slide { top: -31px; }
    body.is-top .ytc-kv__title-main { bottom: 152px; left: calc(50% - 163px); }

    /* ---- 見出し (ピル + h2 + リード) ----
       Figma: h2 / リードとも 1 行 (SUPPORT の h2 は 920px 幅)。838px 固定幅と p の max-width で
       折り返していたのを解除 */
    body.is-top .ytc-top .c-section-heading { width: auto; max-width: 100%; }
    body.is-top .ytc-top .c-section-heading__lead { max-width: none; }

    /* ---- PICK UP カード ----
       Figma: サムネ → テキスト 15px、日付 → タイトル 8px (p の既定 margin 16px を解除) */
    body.is-top .c-pickup-card { gap: 15px; }
    body.is-top .c-pickup-card__date { margin: 0; }

    /* ---- COURSE ----
       Figma: カード列間 20px / 行間 28px (逆になっていた)、年制バッジ 80x32 */
    body.is-top .ytc-course__grid { gap: 28px 20px; }
    body.is-top .c-course-card__year { height: 32px; padding: 0; box-sizing: border-box; }
    body.is-top .c-course-card__title {
        -webkit-text-stroke: 2px var(--ytc-border-strong, #39364e);
        paint-order: stroke fill;
        text-shadow: none;
    }

    /* ---- OPEN CAMPUS カード ----
       Figma: サムネ → テキスト 15px、日付ピル h31 (19px/23px)・文字色 #000 */
    body.is-top .c-event-card { gap: 15px; }
    body.is-top .c-event-card__date { color: var(--ytc-text-primary, #000); }
    body.is-top .c-event-card__date .ymd { line-height: 23px; }

    /* ---- SUPPORT ----
       Figma: 数値 (100% / 様々な自動車 / 全員に支給) に 1px の濃色フチ */
    body.is-top .c-stat-card__value {
        -webkit-text-stroke: 2px var(--ytc-border-strong, #39364e);
        paint-order: stroke fill;
    }

    /* ---- SPECIAL INTERVIEW カード ----
       Figma: カテゴリピル h31 (16px/19px)、ピル → タグ 15px (p の既定 margin を解除) */
    body.is-top .c-interview-card__cat { margin: 0; line-height: 19px; }

    /* ---- NEWS カード ----
       Figma: カテゴリピル h20 (10px/12px)、メタ → タイトル 5px */
    body.is-top .ytc-news .c-article-row__cat { line-height: 12px; }
    body.is-top .ytc-news .c-article-row__title { margin-top: -5px; }

    /* ---- カルーセル: 3 枚以下のときは中央寄せ (Figma は 3 枚で中央。2 枚だと左寄りに見えていた)
       safe center なので 4 枚以上 (はみ出し時) は従来どおり左起点で translateX 送り ---- */
    body.is-top .c-carousel-viewport .is-carousel.ytc-pickup__list,
    body.is-top .c-carousel-viewport .is-carousel.ytc-oc__list,
    body.is-top .c-carousel-viewport .is-carousel.ytc-interview__list { justify-content: safe center; }
}

@media screen and (max-width: 768px) {

    /* ---- PICK UP (SP) ----
       Figma: カード 315 幅・高さは中身なり (PC の 400px 固定を解除し、列内は stretch で揃える)、
       サムネ → テキスト 13px、日付 14/17px → タイトル 5px、タイトル 14px/500/17px、
       前後ボタン 40px・コントロール幅 270px */
    body.is-top .ytc-pickup .c-pickup-card { height: auto; gap: 13px; }
    body.is-top .ytc-pickup .c-pickup-card__text { gap: 5px; }
    body.is-top .ytc-pickup .c-pickup-card__date { margin: 0; line-height: 17px; letter-spacing: 0.05em; }
    body.is-top .ytc-pickup .c-pickup-card__title { font-size: 14px; font-weight: 500; line-height: 17px; }
    body.is-top .ytc-top .ytc-pickup .c-carousel-controls { width: 270px; }
    body.is-top .ytc-top .ytc-pickup .c-carousel-dots-nav { height: 40px; }
    /* 下部イラスト PNG の上端に Figma の前後ボタンの下端 (白い弧) が写り込んでいるので、上 12px を見せない */
    body.is-top .ytc-pickup::after { height: 338px; }

    /* ---- COURSE / SUPPORT 箱 (SP) ----
       Figma: 箱 x15 w345・padding 50/20/30・角丸 10・gap 30、ピル h30、リード 14px/25px */
    body.is-top .ytc-course__box,
    body.is-top .ytc-support__box { padding: 50px 20px 30px; border-radius: 10px; gap: 30px; }
    body.is-top .ytc-support { padding-left: 15px; padding-right: 15px; }
    body.is-top .ytc-support__box { margin: 0; }
    body.is-top .ytc-course .c-section-heading,
    body.is-top .ytc-support .c-section-heading { gap: 10px; padding: 0; }
    body.is-top .ytc-course .c-section-heading__pill,
    body.is-top .ytc-support .c-section-heading__pill,
    body.is-top .ytc-oc .c-section-heading__pill { height: 30px; }
    body.is-top .ytc-top .c-section-heading__lead { font-size: 14px; line-height: 25px; max-width: none; }

    /* ---- COURSE (SP) ----
       Figma: 小見出し 20px/30px → カード 15px、グループ間 30px、カード間 20px (+ はみ出しバッジ 15px)、
       バッジ 110x30 14px、学科名 25px、ヘッダー下 18px、白地 padding 20・gap 20、タグ 13px h30 gap 10、
       VIEW MORE 12px */
    body.is-top .ytc-course__groups { gap: 30px; }
    body.is-top .ytc-course__group { gap: 15px; }
    body.is-top .ytc-course__sub-heading { font-size: 20px; line-height: 30px; }
    body.is-top .ytc-course__grid { gap: 35px; margin-top: 15px; }
    body.is-top .c-course-card__head { padding: 0 10px 18px; }
    body.is-top .c-course-card__head-inner { gap: 14px 10px; }
    body.is-top .c-course-card__year,
    body.is-top .c-course-card__type { width: 110px; height: 30px; margin-top: -15px; font-size: 14px; }
    body.is-top .c-course-card__title { font-size: min(25px, 6.7vw); line-height: 1.3; }
    body.is-top .c-course-card__body { padding: 20px; gap: 20px; }
    body.is-top .c-course-card__tags { gap: 10px; }
    body.is-top .c-course-card .c-tag { height: 30px; padding: 0 10px; font-size: 13px; }
    body.is-top .c-course-card__more { font-size: 12px; line-height: 15px; }
    body.is-top .c-course-card__more img { width: 12px; height: 12px; }

    /* ---- OPEN CAMPUS (SP) ----
       Figma: サムネ → テキスト 13px、日付ピル h31 (padding 3 / 19px/23px)、タイトル 14px/500/17px、
       前後ボタン 40px・幅 270px、ボタン 305x45 */
    body.is-top .ytc-oc .c-event-card { gap: 13px; }
    body.is-top .ytc-oc .c-event-card__text { gap: 5px; }
    body.is-top .ytc-oc .c-event-card__date { padding: 3px 0; }
    body.is-top .ytc-oc .c-event-card__date .ymd { line-height: 23px; }
    body.is-top .ytc-oc .c-event-card__title { font-weight: 500; line-height: 17px; }
    body.is-top .ytc-top .ytc-oc .c-carousel-controls,
    body.is-top .ytc-top .ytc-interview .c-carousel-controls { width: 270px; margin-top: -40px !important; }
    body.is-top .ytc-top .ytc-oc .c-carousel-dots-nav,
    body.is-top .ytc-top .ytc-interview .c-carousel-dots-nav { height: 40px; }
    body.is-top .ytc-oc .c-btn--primary,
    body.is-top .ytc-interview .c-btn--primary { width: 305px; max-width: calc(100% - 70px); height: 45px; }

    /* 前後ボタン: Figma 40px (PICK UP / OC / INTERVIEW 共通) */
    body.is-top .ytc-top .ytc-pickup .c-carousel-controls__btn,
    body.is-top .ytc-top .ytc-oc .c-carousel-controls__btn,
    body.is-top .ytc-top .ytc-interview .c-carousel-controls__btn { width: 40px; height: 40px; }
    body.is-top .ytc-top .ytc-pickup .c-carousel-controls__btn img,
    body.is-top .ytc-top .ytc-oc .c-carousel-controls__btn img,
    body.is-top .ytc-top .ytc-interview .c-carousel-controls__btn img { width: 40px; height: 40px; }

    /* ---- SUPPORT (SP) ----
       Figma: 統計カード幅 305 (=コンテンツ幅)、ピル 200x35 19px、枠 padding 30/20・gap 10、
       数値 70px (かな 45px/45px)、説明 16px/24px、注記 13px、ボタン間 25px */
    body.is-top .ytc-support__stats { padding-left: 0; padding-right: 0; }
    body.is-top .ytc-support__stats > .c-stat-card .c-stat-card__pill { width: 200px; height: 35px; font-size: 19px; }
    body.is-top .ytc-support__stats > .c-stat-card .c-stat-card__body { padding: 30px 0 20px; gap: 10px; }
    body.is-top .ytc-support__stats > .c-stat-card .c-stat-card__value { font-size: 70px; }
    body.is-top .ytc-support__stats > .c-stat-card.c-stat-card--kana .c-stat-card__value { font-size: 45px; line-height: 1; }
    body.is-top .ytc-support__stats > .c-stat-card .c-stat-card__desc { font-size: 16px; line-height: 24px; }
    body.is-top .ytc-support__stats > .c-stat-card .c-stat-card__note { font-size: 13px; }
    body.is-top .ytc-support__ctas { gap: 25px; }

    /* ---- SPECIAL INTERVIEW (SP) ---- Figma: サムネ → テキスト 13px、カテゴリピル h31 */
    body.is-top .ytc-interview .c-interview-card { gap: 13px; }
    body.is-top .ytc-interview .c-interview-card__cat { line-height: 19px; }

    /* ---- NEWS (SP) ----
       Figma: 行 padding 25・列間 18、カテゴリ 11px h20、日付 12px/15px → タイトル 5px、タイトル 14px/500/25px */
    body.is-top .ytc-news .c-article-row { padding: 25px 0; column-gap: 18px; }
    body.is-top .ytc-news .c-article-row__cat { font-size: 11px; line-height: 13px; padding: 2px 12px; }
    body.is-top .ytc-news .c-article-row__date { font-size: 12px; line-height: 15px; }
    body.is-top .ytc-news .c-article-row__title { font-size: 14px; line-height: 25px; margin-top: -3px; }
    body.is-top .ytc-news .c-article-row { grid-template-columns: 152px 1fr; }   /* Figma: サムネ 152 + 18 + テキスト 165 */

    /* ---- OPEN CAMPUS 地色 (SP) ---- Figma: 床・地色とも #6bd0ff (#8dd7ff になっていた) */
    body.is-top .ytc-oc { background: var(--ytc-bg-brand-soft, #6bd0ff); }
    body.is-top .ytc-oc__sp-floor::after { background: var(--ytc-bg-brand-soft, #6bd0ff); }

    /* イラスト下端に出ていた 1px の濃色線 (床の濃色レイヤーと水色レイヤーのアンチエイリアス重なり) を地色で塞ぐ */
    body.is-top .ytc-oc__top-illust-sp::after,
    body.is-top .ytc-interview__sp-illust::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: var(--ytc-bg-brand-soft, #6bd0ff);
        z-index: 5;
    }
}

/* 2026-10-19 PICK UP (PC): 右端カードの影 (8px オフセット) が viewport の overflow:hidden で切れる
   → overflow を外し clip-path で左端だけ切る (右・上下は影ぶん余白を見せる。次ページとの gap 30px > 12px なので隣ページは見えない) */
@media screen and (min-width: 769px) {
    body.is-top .ytc-pickup .c-carousel-viewport {
        overflow: visible;
        clip-path: inset(-20px -12px -20px 0);
    }
}