/**
 * 受験生応援シリーズ 共通スタイル
 * 対象: トップ / event / about / like / schedule（Figma 5画面）
 * ページ固有は cheering.css / cheering-event.css などへ
 */

:root {
  --ch-red: #ff0000;
  --ch-red-dark: #cc0000;
  --ch-red-mid: #c8373a;
  --ch-black: #111111;
  --ch-gray: #555555;
  --ch-gray-muted: #666666;
  --ch-gray-light: #f7f7f7;
  --ch-gray-light-2: #f2f2f2;
  --ch-border: #dddddd;
  --ch-white: #ffffff;
  --ch-cat-nyushi: #1a6bb5;
  --ch-cat-oc: #c8373a;
  --ch-cat-event: #2a9d5c;
  --ch-container: min(1122px, calc(100% - 3rem));
  --ch-font: "Noto Sans JP", sans-serif;
  --ch-font-en: "Jost", "Noto Sans JP", sans-serif;
}

/* ----- Body shell（is-cheering-family を全テンプレに付与） ----- */
body.is-cheering-family .p-footer,
body.is-cheering-family .footer {
  margin-top: 0;
}

body.is-cheering-family.has-renewal-header .p-sub-mv {
  margin-bottom: 0;
}

body.is-cheering-family .l-body--cheering,
body.is-cheering-family .l-body--cheering-event,
body.is-cheering-family .l-body--cheering-about,
body.is-cheering-family .l-body--cheering-like,
body.is-cheering-family .l-body--cheering-schedule {
  margin-top: 0;
}

.ch-page,
.cheering-page,
.che-page,
.cha-page,
.chl-page,
.chs-page {
  background: var(--ch-white);
  color: var(--ch-black);
  font-family: var(--ch-font);
  overflow-x: clip;
}

.ch-container {
  margin-inline: auto;
  width: var(--ch-container);
}

.ch-u-sp {
  display: inline;
}

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

.ch-u-visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

/* ----- Section head（EN + 日本語見出し） -----
 * 修飾: --center（中央） / --lg（title 4.0rem）
 * 内部余白（Figma）:
 *   標準: EN↔title 10px / title↔lead 16px
 *   --center: 子要素間 12px 均一
 */
.ch-section-head {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 4rem;
}

.ch-section-head__en {
  color: var(--ch-red);
  font-family: var(--ch-font);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  line-height: 1.8;
  margin: 0;
  text-transform: uppercase;
}

.ch-section-head__title {
  color: #1a1a1a;
  font-size: 3.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4875;
  margin: 0;
}

.ch-section-head__pdf {
  color: #6a6a6a;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.7;
  margin: 0;
}

.ch-section-head__pdf a {
  color: var(--ch-red);
  font-weight: 700;
  text-decoration: underline;
}

.ch-section-head__pdf a:hover {
  color: var(--ch-red-dark);
}

.ch-section-head__lead + .ch-section-head__pdf {
  margin-top: 0.6rem;
}

.ch-section-head__lead {
  color: #6a6a6a;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.7;
  margin: 0.6rem 0 0;
}

.ch-section-head.--center {
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}

.ch-section-head.--center .ch-section-head__lead {
  margin-inline: auto;
  margin-top: 0;
  max-width: none;
}

.ch-section-head.--lg .ch-section-head__title {
  font-size: 4rem;
  line-height: 1.35;
}

/* タイトル下〜本文（Figma 5 Features: 見出し枠下端〜本文 72px） */
.ch-section-head.--lg {
  margin-bottom: 7.2rem;
}

.ch-section-head.--lg:has(.ch-section-head__lead) {
  margin-bottom: 4rem;
}

@media (min-width: 768px) {
  .ch-section-head.--center .ch-section-head__lead {
    width: max-content;
  }
}

/* ----- Button layout（SPの見た目は下部 @media で共通塗りに固定） ----- */
.ch-btn {
  border-radius: 0;
  box-sizing: border-box;
  letter-spacing: 0.04em;
  max-width: 36.6rem;
  min-height: 5.6rem;
  width: fit-content;
}

.ch-btn.--block {
  max-width: none;
  width: 100%;
}

/* ----- Tabs（ニュース / ボイス / 下層でも同一） ----- */
.ch-tabs,
.ch-news__tabs,
.ch-voices__tabs {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 3rem;
  padding-left: 0;
}

.ch-tab,
.ch-news__tab,
.ch-voices__tab {
  background: #fff;
  border: 1px solid var(--ch-border);
  border-radius: 999px;
  color: var(--ch-black);
  cursor: pointer;
  display: inline-block;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  padding: 0.5rem 2rem;
}

.ch-tab:hover,
.ch-news__tab:hover,
.ch-voices__tab:hover {
  border-color: rgba(255, 0, 0, 0.35);
  box-shadow: 0 0.8rem 2.4rem rgba(0, 0, 0, 0.08);
}

.ch-tab.is-active,
.ch-news__tab.is-active,
.ch-voices__tab.is-active {
  background: var(--ch-red);
  color: #fff;
}

/* ----- Check list（イベント詳細など） ----- */
.ch-checks,
.che-event-block__checks {
  list-style: none;
  margin: 0 0 2.4rem;
  padding: 0;
}

.ch-checks li,
.che-event-block__checks li {
  font-size: 1.5rem;
  line-height: 1.5;
  margin: 0 0 0.8rem;
  padding-left: 2rem;
  position: relative;
}

.ch-checks li::before,
.che-event-block__checks li::before {
  color: var(--ch-red-mid);
  content: "✓";
  font-size: 1.35rem;
  font-weight: 700;
  left: 0;
  position: absolute;
  top: 0;
}

/* ----- Category badges（スケジュール凡例など） ----- */
.ch-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ch-cat {
  align-items: center;
  display: inline-flex;
  font-size: 1.4rem;
  font-weight: 700;
  gap: 0.6rem;
  line-height: 1.4;
}

.ch-cat::before {
  border-radius: 50%;
  content: "";
  display: block;
  flex-shrink: 0;
  height: 1rem;
  width: 1rem;
}

.ch-cat--nyushi::before {
  background: var(--ch-cat-nyushi);
}

.ch-cat--oc::before {
  background: var(--ch-cat-oc);
}

.ch-cat--event::before {
  background: var(--ch-cat-event);
}

/* ----- CTA ----- */
.ch-cta {
  color: #fff;
  overflow: hidden;
  position: relative;
}

.ch-cta__bg {
  background: linear-gradient(180deg, #ff0000 0%, #cf0000 100%);
  inset: 0;
  position: absolute;
  z-index: 0;
}

.ch-cta__bg::before,
.ch-cta__bg::after {
  content: "";
  pointer-events: none;
  position: absolute;
}

.ch-cta__bg::before {
  background: repeating-linear-gradient(
    -45deg,
    rgba(0, 0, 0, 0.08) 0,
    rgba(0, 0, 0, 0.08) 2px,
    transparent 2px,
    transparent 10px
  );
  height: 100%;
  left: 0;
  opacity: 0.35;
  top: 0;
  width: 28%;
}

.ch-cta__bg::after {
  background-image: radial-gradient(rgba(255, 255, 255, 0.18) 1px, transparent 1px);
  background-size: 8px 8px;
  height: 100%;
  opacity: 0.45;
  right: 0;
  top: 0;
  width: 32%;
}

.ch-cta__inner {
  margin-inline: auto;
  max-width: 1090px;
  position: relative;
  text-align: center;
  z-index: 1;
}

.ch-cta__title {
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
}

.ch-cta__lead {
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

.ch-cta__actions {
  display: grid;
}

.ch-cta__btn {
  letter-spacing: 0.06em;
  max-width: none;
  min-width: 0;
  text-decoration: none;
  width: 100%;
}

.ch-cta__btn--fill {
  background: #fff;
  border-color: #fff;
  color: var(--ch-red);
}

.ch-cta__btn--fill::before {
  background-color: var(--ch-red);
}

.ch-cta__btn--fill::after {
  border-color: transparent transparent var(--ch-red) transparent;
}

.ch-cta__btn--fill:hover,
.ch-cta__btn--fill:hover .p-btn__label {
  color: #fff;
  text-decoration: none;
}

.ch-cta__btn--outline {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.ch-cta__btn--outline::before {
  background-color: #fff;
}

.ch-cta__btn--outline::after {
  border-color: transparent transparent #fff transparent;
}

.ch-cta__btn--outline:hover,
.ch-cta__btn--outline:hover .p-btn__label {
  color: var(--ch-red);
  text-decoration: none;
}

/* ----- 下層共通メニュー（MV直下 / Figma: 白地＋現在地赤＋下向き赤▼・下線・コンテンツ幅） ----- */
.ch-sub-nav {
  background: #fff;
  border-bottom: 1px solid #ddd;
  overflow: visible;
}

.ch-sub-nav__inner {
  margin-inline: auto;
  max-width: 1122px;
  overflow: visible;
  width: var(--ch-container);
}

.ch-sub-nav__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  overflow: visible;
  padding: 0;
}

.ch-sub-nav__item {
  min-width: 0;
  overflow: visible;
}

.ch-sub-nav__link {
  align-items: center;
  background: #fff;
  box-sizing: border-box;
  color: #1a1a1a;
  display: flex;
  font-family: var(--ch-font);
  font-size: 1.5rem;
  font-weight: 500;
  justify-content: center;
  letter-spacing: 0.02em;
  line-height: 1.62;
  min-height: 6.7rem;
  overflow: visible;
  padding: 1.2rem 0.8rem;
  position: relative;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.ch-sub-nav__label {
  display: block;
}

.ch-sub-nav__link:hover {
  background: #f2f2f2;
  color: #1a1a1a;
  text-decoration: none;
}

.ch-sub-nav__link.is-current {
  background: var(--ch-red);
  color: #fff;
  font-weight: 500;
}

.ch-sub-nav__link.is-current:hover {
  background: var(--ch-red);
  color: #fff;
}

/* 選択中：赤タブ下端から飛び出す赤い▼（Figma） */
.ch-sub-nav__link.is-current::after {
  border-left: 0.7rem solid transparent;
  border-right: 0.7rem solid transparent;
  border-top: 0.7rem solid var(--ch-red);
  bottom: -0.7rem;
  content: "";
  display: block;
  height: 0;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  width: 0;
  z-index: 1;
}

/* ----- 受験生応援ページに戻る ----- */
.ch-back {
  border-top: 1px solid var(--ch-border);
  display: flex;
  justify-content: center;
  padding: 5rem 1.5rem;
}

.ch-back__btn {
  margin: 0 auto;
  max-width: 36rem;
  text-decoration: none;
}

.ch-back__btn--fill {
  background: var(--ch-red);
  border-color: var(--ch-red);
  color: #fff;
}

.ch-back__btn--fill::before {
  background-color: var(--ch-red-dark);
}

.ch-back__btn--fill::after {
  border-color: transparent transparent #fff transparent;
}

.ch-back__btn--fill .p-btn__label {
  color: #fff;
}

.ch-back__btn--fill:hover,
.ch-back__btn--fill:hover .p-btn__label {
  color: #fff;
  text-decoration: none;
}

@media (max-width: 767px) {
  .ch-sub-nav__inner {
    margin-inline: 0;
    max-width: none;
    width: 100%;
  }

  .ch-sub-nav__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ch-sub-nav__item {
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
  }

  .ch-sub-nav__item:nth-child(2n) {
    border-right: none;
  }

  .ch-sub-nav__item:nth-last-child(-n + 2):nth-child(odd) {
    border-bottom: none;
  }

  .ch-sub-nav__item:last-child:nth-child(odd) {
    border-bottom: none;
  }

  .ch-sub-nav__link {
    font-size: 1.3rem;
    justify-content: center;
    min-height: 12.8vw;
    padding: 3.2vw 4.2667vw;
    text-align: center;
  }

  /* SPは▼なし */
  .ch-sub-nav__link.is-current::after {
    content: none;
    display: none;
  }

  .ch-back {
    padding: 10.6667vw 4.2667vw;
  }

  .ch-back__btn {
    max-width: 31rem;
    width: 100%;
  }

  .ch-section-head {
    margin-bottom: 8vw;
  }

  .ch-section-head.--lg {
    margin-bottom: 14.4vw;
  }

  .ch-section-head.--lg:has(.ch-section-head__lead) {
    margin-bottom: 8vw;
  }

  .ch-section-head__en {
    font-size: 1.1rem;
    letter-spacing: 0.18em;
  }

  .ch-section-head__title {
    font-size: 2.4rem;
  }

  .ch-section-head.--lg .ch-section-head__title {
    font-size: 2.8rem;
  }

  .ch-section-head__lead {
    font-size: 1.3rem;
    margin-top: 1.6vw;
  }

  .ch-section-head.--center .ch-section-head__lead {
    margin-top: 0;
  }

  .ch-btn {
    max-width: none;
    min-height: 12.8vw;
    width: 100%;
  }

  /*
   * SP共通ボタン（.p-btn）
   * PCは赤枠白地＋ホバー塗りだが、SPはホバーがないため初期から赤塗り白文字に固定。
   * ヒーロー・フッターCTAは独自仕様のため除外。
   */
  body.is-cheering-family .p-btn:not(.cheering-hero__p-btn):not(.ch-cta__btn) {
    background-color: var(--ch-red);
    border-color: var(--ch-red);
    color: #fff;
    transition: none;
  }

  body.is-cheering-family .p-btn:not(.cheering-hero__p-btn):not(.ch-cta__btn)::before {
    content: none;
    display: none;
  }

  body.is-cheering-family .p-btn:not(.cheering-hero__p-btn):not(.ch-cta__btn)::after {
    border-color: transparent transparent #fff transparent;
  }

  body.is-cheering-family .p-btn:not(.cheering-hero__p-btn):not(.ch-cta__btn) .p-btn__label,
  body.is-cheering-family .p-btn:not(.cheering-hero__p-btn):not(.ch-cta__btn) > span {
    color: #fff;
  }

  body.is-cheering-family .p-btn:not(.cheering-hero__p-btn):not(.ch-cta__btn):hover,
  body.is-cheering-family .p-btn:not(.cheering-hero__p-btn):not(.ch-cta__btn):focus,
  body.is-cheering-family .p-btn:not(.cheering-hero__p-btn):not(.ch-cta__btn):hover .p-btn__label,
  body.is-cheering-family .p-btn:not(.cheering-hero__p-btn):not(.ch-cta__btn):focus .p-btn__label,
  body.is-cheering-family .p-btn:not(.cheering-hero__p-btn):not(.ch-cta__btn):hover > span,
  body.is-cheering-family .p-btn:not(.cheering-hero__p-btn):not(.ch-cta__btn):focus > span {
    background-color: var(--ch-red);
    border-color: var(--ch-red);
    color: #fff;
    text-decoration: none;
  }

  body.is-cheering-family .p-btn:not(.cheering-hero__p-btn):not(.ch-cta__btn):hover::before,
  body.is-cheering-family .p-btn:not(.cheering-hero__p-btn):not(.ch-cta__btn):focus::before {
    display: none;
    transform: none;
  }

  /* テキストリンク型（三角なし）は共通塗りを適用しない */
  body.is-cheering-family .ch-events__p-btn:not(.ch-events-card__p-btn),
  body.is-cheering-family .ch-voices__p-btn:not(.ch-voices__p-btn--fill),
  body.is-cheering-family .ch-schedule__p-btn:not(.ch-schedule__p-btn--fill) {
    background-color: transparent;
    border-color: transparent;
    color: var(--ch-red);
  }

  body.is-cheering-family .ch-events__p-btn:not(.ch-events-card__p-btn)::after,
  body.is-cheering-family .ch-voices__p-btn:not(.ch-voices__p-btn--fill)::after,
  body.is-cheering-family .ch-schedule__p-btn:not(.ch-schedule__p-btn--fill)::after {
    content: none;
  }

  body.is-cheering-family .ch-events__p-btn:not(.ch-events-card__p-btn) > span,
  body.is-cheering-family .ch-voices__p-btn:not(.ch-voices__p-btn--fill) > span,
  body.is-cheering-family .ch-schedule__p-btn:not(.ch-schedule__p-btn--fill) > span {
    color: var(--ch-red);
  }

  .ch-tabs,
  .ch-news__tabs,
  .ch-voices__tabs {
    margin-bottom: 6.4vw;
  }

  .ch-checks li,
  .che-event-block__checks li {
    font-size: 1.3rem;
  }

  .ch-cta {
    padding: 10.6667vw 4.2667vw 12.8vw;
  }

  .ch-cta__title {
    font-size: 2rem;
    margin-bottom: 2.1333vw;
  }

  .ch-cta__lead {
    font-size: 1.3rem;
    margin-bottom: 6.4vw;
  }

  .ch-cta__actions {
    gap: 4vw;
  }

  .ch-cta__btn {
    font-size: 1.4rem;
    min-height: 19.3096vw;
    padding: 1.2rem 1.6rem;
  }
}

@media (min-width: 768px) {
  .ch-u-pc-only {
    display: inline-flex;
  }

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

  .ch-cta {
    padding: 5.3rem 13.5rem 5rem;
  }

  .ch-cta__title {
    font-size: 4rem;
    margin-bottom: 1rem;
  }

  .ch-cta__lead {
    font-size: 1.6rem;
    margin-bottom: 3.2rem;
  }

  .ch-cta__actions {
    gap: 1.9rem;
    grid-template-columns: 36rem 36rem;
    justify-content: center;
  }

  .ch-cta__btn {
    font-size: 1.8rem;
    min-height: 7.6rem;
    padding: 1.6rem 2rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .ch-cta {
    padding: 4.8rem clamp(2rem, 4vw, 3.2rem) 4.4rem;
  }

  .ch-cta__actions {
    gap: 1.2rem;
    grid-template-columns: minmax(0, 1fr);
    max-width: 36rem;
    width: 100%;
  }
}

/* ----- Modal（OC .oc-modal と同型／受験生系で共有） ----- */
.ch-modal[hidden] {
  display: none !important;
}

.ch-modal.is-open {
  display: block;
}

.ch-modal {
  inset: 0;
  position: fixed;
  z-index: 200;
}

.ch-modal__overlay {
  background: rgba(0, 0, 0, 0.55);
  inset: 0;
  position: absolute;
}

.ch-modal__frame {
  left: 50%;
  max-height: 90vh;
  max-width: 72rem;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 3.2rem);
  z-index: 1;
}

.ch-modal__dialog {
  background: #fff;
  max-height: 90vh;
  overflow: hidden;
  position: relative;
  width: 100%;
}

.ch-modal__scroll {
  max-height: 90vh;
  overflow: auto;
}

.ch-modal__inner {
  box-sizing: border-box;
  margin-inline: auto;
  padding: 3.2rem 4rem 4rem;
}

.ch-modal__inner--voice {
  max-width: 64rem;
  padding: 3.2rem;
}

.ch-modal__close {
  background: transparent;
  border: 0;
  color: #fff;
  cursor: pointer;
  font-size: 3.2rem;
  font-weight: 300;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  transform: translateY(calc(-100% - 1.6rem));
  z-index: 2;
}

.ch-modal-voice {
  align-items: start;
  display: grid;
  gap: 2.4rem;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
}

.ch-modal-voice__media {
  line-height: 0;
  overflow: hidden;
}

.ch-modal-voice__img {
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.ch-modal-voice__quote {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 1.6rem;
}

.ch-modal-voice__name {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 0.4rem;
}

.ch-modal-voice__meta {
  color: var(--ch-gray);
  font-size: 1.4rem;
  line-height: 1.6;
  margin: 0 0 2rem;
}

.ch-modal-voice__text {
  background: #f7f7f7;
  box-sizing: border-box;
  padding: 2rem;
}

.ch-modal-voice__text p {
  color: #444;
  font-size: 1.4rem;
  line-height: 1.9;
  margin: 0;
}

@media (max-width: 767px) {
  .ch-modal__inner--voice {
    padding: 2.4rem 2rem 3.2rem;
  }

  .ch-modal-voice {
    grid-template-columns: minmax(0, 1fr);
  }

  .ch-modal-voice__media {
    max-width: 22rem;
    margin-inline: auto;
  }

  .ch-modal-voice__quote {
    font-size: 1.8rem;
  }
}