/* =====================================================
  基本設定 / 共通
===================================================== */
:root {
  --jumbotron-padding-y: 3rem;

  /* flow animation */
  --red: #2c43b3;
  --gap: 22px;
  --dur: 0.6s;
  --between: 0ms;
}

html {
  font-size: 14px;
}

body {
  background-color: #f5f5f5;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* =====================================================
  フォント
===================================================== */
.kozuka {
  font-family: "小塚ゴシック Pro L", "Kozuka Gothic Pro Light", sans-serif;
}
.helfont {
  font-family: Helvetica, Arial, sans-serif;
}
.timesfont {
  font-family: "Times New Roman", Times, serif;
}

/* =====================================================
  汎用
===================================================== */
.navbar {
  background-color: transparent !important;
}

.bg-light02 {
  background-color: #f7f7f7 !important;
}
.fontcolor01 {
  color: #186de6;
}
.red {
  color: #ffc118;
}
.mainmarbin {
  margin-top: 118px;
}

/* =====================================================
  コンテナ幅
===================================================== */
.album .container {
  max-width: 950px;
}
.news .container {
  max-width: 985px;
}
.about .container {
  max-width: 675px;
}
.group .container {
  max-width: 660px;
}
.talent .container {
  max-width: 868px;
}
.talentcont .container {
  max-width: 755px;
}
.training .container {
  max-width: 700px;
}
.training02 .container {
  max-width: 630px;
}

/* =====================================================
  training list
===================================================== */
.training-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.5rem;
  text-align: left;
  font-size: 1rem;
}
.training-list li {
  margin-bottom: 0.6em;
}
.training-list span {
  font-size: 26px;
  margin-right: 5px;
}

/* =====================================================
  Slider
===================================================== */
#slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

#slider #slideBox {
  max-width: none;
  width: 100%;
  /* margin: 115px 0 0; */
}

#slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: 1026 / 479; /* ← これが必須 */
}

#slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

#slideshow img.active {
  opacity: 1;
  z-index: 2;
}

#slider #slideBox {
  width: 100vw; /* SPは完全に全幅 */
  max-width: 1400px; /* ← PCでの上限（ここが肝） */
  margin: 0 auto; /* 中央寄せ */
}

/* スマホ微調整（任意） */
@media (max-width: 767px) {
  #slider #slideBox {
    max-width: none; /* 念のため制限解除 */
  }
}

/* =====================================================
  Flow（選考の流れ）
===================================================== */
.flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
}

.step,
.arrow {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(2px);
  transition:
    opacity var(--dur),
    transform var(--dur),
    filter var(--dur);
}

.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.step {
  width: min(520px, 100%);
}

.stepBox {
  background: var(--red);
  color: #fff;
  border-radius: 18px;
  padding: 22px 18px;
  text-align: center;
  font-weight: 800;
}

.arrow {
  color: var(--red);
  font-size: 44px;
  font-weight: 900;
}

.flow-horizontal {
  flex-direction: row; /* ← column を打ち消す */
  justify-content: center;
  align-items: center;
  gap: 24px;
}

/* 初期状態（非表示） */
.step-right,
.arrow-right {
  opacity: 0;
  transform: translateX(-12px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.arrow-right {
  color: var(--red); /* ← 赤 */
}

/* 表示状態 */
.step-right.is-visible,
.arrow-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

.stepBox-right {
  background: var(--red); /* オレンジ */
  color: #fff;

  width: 160px; /* 円の直径 */
  height: 160px; /* widthと同じ */
  border-radius: 50%; /* ← 円にする核心 */

  display: flex; /* 中央寄せ */
  align-items: center;
  justify-content: center;

  text-align: center;
  font-weight: 800;
}

@media (max-width: 768px) {
  .stepBox-right {
    width: 100px;
    height: 100px;
  }
}

/* ==============================
   flow：date / label フォント指定
============================== */

/* PC */
#flow .date {
  font-size: 1.4rem;
  line-height: 1.2;
  white-space: nowrap;
}

#flow .label {
  margin-top: 8px;
  font-size: 1.3rem;
  line-height: 1.2;
}

/* スマホ */
@media (max-width: 768px) {
  #flow .date {
    font-size: 0.9rem;
  }

  #flow .label {
    font-size: 0.9rem;
  }

  .flow {
    gap: 10px; /* 既存14px → 10px（好みで8〜12） */
  }

  .arrow {
    margin-top: -6px;
    margin-bottom: -6px;
  }
}

/* =====================================================
  応募資格カード
===================================================== */
.qualification-section {
  padding: 60px 0;
  background: #f5f5f5;
}

.qualification-card {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: 80px 40px 40px;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.qualification-title {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  background: #186de6;
  color: #fff;
  font-size: 26px;
  font-weight: 700;
  padding: 12px 44px;
  border-radius: 9999px;

  /* text-shadow:
    -0.8px -0.8px 0 rgba(0, 0, 0, 0.8),
    0.8px -0.8px 0 rgba(0, 0, 0, 0.8),
    -0.8px 0.8px 0 rgba(0, 0, 0, 0.8),
    0.8px 0.8px 0 rgba(0, 0, 0, 0.8); */
}

.qualification-sub {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 30px;
}

/* list */
.qualification-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #e5e5e5;
}
.qualification-list li {
  display: flex;
  gap: 18px;
  padding: 28px 10px;
  border-bottom: 1px solid #e5e5e5;
  align-items: flex-start; /* ← center をやめる */
}

/* li の中身を縦並びにする */
.qualification-list .item-body {
  display: flex;
  flex-direction: column; /* ← これが核心 */
  gap: 0.4em;
}

/* 1行目（dot + 見出し） */
.qualification-list .dot-row {
  display: flex;
  align-items: center;
  gap: 0.4em;
}

.qualification-list .dot-row-square {
  display: flex;
  align-items: flex-start; /* ← これに変更 */
  gap: 0.4em;
}

/* dot */
.qualification-list .dot {
  font-size: 1.3rem;
  line-height: 1;
  color: #666;
}

/* 見出し */
.qualification-list .text-dot {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.4;
}

.text-square {
  color: #000;
}

/* 説明文 */
.qualification-list .text-desc {
  margin-left: 0.46rem; /* ← dot 分だけインデント */
}

.qualification-list .check {
  font-size: 28px;
  color: #bbb;
  display: flex; /* ← 重要 */
  align-items: center; /* ← 重要 */
  height: 1em; /* ← 高さを明示 */
}

.check-dd {
  font-size: 1.3rem; /* ← .text と合わせる */
  line-height: 1.4; /* ← .text と同じ */
  color: #bbb;

  display: block; /* ← inline-flex やめる */
  margin-top: 0.1em; /* ← 微調整（0〜0.15em） */
  flex-shrink: 0;
}

.qualification-list .number {
  font-size: 1.3rem;
  font-weight: 700;
  color: #999;

  display: inline-flex;
  align-items: baseline; /* ← ベースライン基準 */
  line-height: 1.2; /* ← 見出し1行目と合わせる */

  align-self: flex-start; /* ← liが center でも上に逃がす */
  margin-top: 0.15em; /* ← 視覚調整（0〜0.2emで微調整） */

  flex-shrink: 0;
}

.qualification-list .text {
  font-size: 1.3rem;
  font-weight: bold;
}

/* 中央寄せ用 */
.qualification-list.text-center li {
  display: block;
  text-align: center;
}
.qualification-list.text-center .check {
  display: none;
}

.qualification-list .text-desc {
  font-size: 1rem;
  font-weight: 500;
  color: #666;
  line-height: 1.6;
  margin-top: 0.5rem;
}

.qualification-list .text-deadline {
  font-size: 1rem;
  font-weight: 500;
  color: #666;
  line-height: 1.6;
  margin-top: 0.5rem;
}

.qualification-sub.form2 {
  width: 100%;
  text-align: center;
  margin: 0;
}

.qualification-sub.form2 .text-desc {
  margin-left: 0; /* ← これがないと右にずれる */
  text-align: center;
}

.deadline {
  font-size: 1.2rem;
  line-height: 1.6;
  color: #666;
}

.download {
  font-size: 1.2rem;
}

.video-title {
  font-size: 1.2rem;
}

.text-intro2 {
  font-size: 1.2rem;
}

/* スマホ時 */
@media (max-width: 768px) {
  .qualification-section {
    padding: 3.3rem 0;
  }

  .qualification-card {
    padding-top: 56px; /* 80px → 56px */
  }

  .qualification-list .text-desc {
    font-size: 0.8rem;
    line-height: 1.6;
  }

  /* .qualification-title {
    text-shadow:
      -0.5px -0.5px 0 rgba(0, 0, 0, 0.9),
      0.5px -0.5px 0 rgba(0, 0, 0, 0.9),
      -0.5px 0.5px 0 rgba(0, 0, 0, 0.9),
      0.5px 0.5px 0 rgba(0, 0, 0, 0.9);
  } */

  .qualification-list .text-dot {
    font-size: 1.1rem;
  }

  .qualification-list .text-deadline {
    font-size: 1rem;
  }

  .deadline {
    font-size: 1rem;
  }

  .download {
    font-size: 1rem;
  }

  .qualification-list .number {
    font-size: 1.1rem; /* video-title に合わせる */
    line-height: 1.4; /* qualification-sub(video-title) と同じ */
    margin-top: 0.05em; /* 微調整（0〜0.1emでOK） */
  }

  .qualification-sub.video-title {
    font-size: 1.1rem;
  }

  .check-dd {
    font-size: 1rem; /* ← text と同じ */
    line-height: 1.4; /* ← text と同じ */
    margin-top: 0.05em; /* ← 微調整（0〜0.1em） */
  }
}

/* ==============================
   qualification：備考（羅列・整列版）
============================== */

.qualification-list--note {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 760px;
}

.qualification-list--note li {
  display: flex; /* ← ここが重要 */
  align-items: flex-start; /* 文頭を揃える */
  gap: 0.4em;

  padding: 10px 0;
  font-size: 1rem;
  font-weight: 500;
  color: #555;
  line-height: 1.7;
  padding-left: 1em; /* ← 数値を増やすほど右へ */
  border-bottom: 1px solid #e5e5e5; /* ← 各行の薄い線 */
}

/* 最後の線だけ消す */
.qualification-list--note li:last-child {
  border-bottom: none;
}

/* 文頭の「・」 */
.qualification-list--note li::before {
  content: "・";
  flex-shrink: 0;
  line-height: 1.7; /* ← 文章と完全一致 */
  color: #555;
}

/* スマホ */
@media (max-width: 768px) {
  .qualification-list--note li {
    font-size: 0.85rem;
    line-height: 1.7;
    padding: 8px 0;
  }
}

/* ==============================
   応募フォームリンク（最優先）
============================== */

.apply-main {
  display: inline-block; /* 枠を効かせるため */
  padding: 10px 18px 12px;
  border: 2px solid #186de6;
  border-radius: 8px;
}

.qualification-sub .apply-link,
.qualification-sub .apply-link:visited,
.qualification-sub .apply-link:hover,
.qualification-sub .apply-link:active {
  color: #000 !important; /* ← 赤を完全に潰す */
  text-decoration: none !important; /* ← Bootstrap下線殺す */
}

.apply-main {
  position: relative;
}

.apply-main::after {
  content: "";
  position: absolute;
  left: 18px; /* ← padding-left と同じ */
  right: 18px; /* ← padding-right と同じ */
  bottom: 12px; /* ← 文字のすぐ下 */
  height: 2px;
  background: rgba(69, 69, 69, 0.7);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s ease;
}

.apply-main:hover::after {
  transform: scaleX(1);
}

/* =====================================================
  ナビゲーション（PC）
===================================================== */
@media (min-width: 992px) {
  .navbar .container {
    position: relative;
  }

  .navbar-brand {
    margin-left: -1rem;
    z-index: 2;
  }

  .navbar-collapse {
    position: absolute;
    left: calc(50% + 20px);
    transform: translateX(-50%);
  }

  .navbar-nav {
    display: flex;
    flex-direction: row;
    gap: 1rem;
  }

  .navbar-nav .nav-item {
    white-space: nowrap;
  }
}

/* =====================================================
  トップに戻るボタン
===================================================== */
#backToTop {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #186de6;
  color: #fff;
  border: none;
  opacity: 0;
  visibility: hidden;
  font-size: x-small;
}
#backToTop.is-visible {
  opacity: 1;
  visibility: visible;
}

/* =====================================================
  アーティスト表示
===================================================== */
.artist-block {
  text-align: center;
}
.artist-inner {
  display: inline-block;
  text-align: left;
}
.artist-label {
  font-size: 0.85rem;
  color: #666;
}
.artist-name a {
  font-size: 1.4rem;
  font-weight: 700;
  color: #000 !important;
  text-decoration: none;
}

/* =====================================================
  スマホ調整
===================================================== */
@media (max-width: 768px) {
  .flow {
    gap: 14px;
  }
  .arrow {
    font-size: 28px;
  }
  .stepBox {
    padding: 16px 14px;
  }

  .qualification-card {
    padding: 70px 20px 30px;
  }
  .qualification-title {
    font-size: 1.2rem;
    padding: 10px 32px;
  }
  .qualification-sub {
    font-size: 1.2rem;
  }

  .text-intro {
    font-size: 0.95rem;
  }

  .text-intro2 {
    font-size: 0.95rem;
  }

  .text-deadline {
    font-size: 1.2rem;
  }

  .qualification-list .text {
    font-size: 1rem;
  }
  .artist-name a {
    font-size: 1rem;
  }
}

/* ==============================
   スマホのみ改行
============================== */
.sp-only {
  display: none;
}

@media (max-width: 768px) {
  .sp-only {
    display: inline;
  }
}

/* =====================================================
  フッター
===================================================== */
footer {
  min-height: 200px;
  background: #000 !important;
  display: block;
  margin-top: 0;
  padding-top: 2.7rem;
  padding-bottom: 2.2rem;
}

footer p {
  margin: 0; /* 余白をリセット */
  line-height: 1.7; /* 行間を調整（1.4〜1.7で好み） */
}

.text-footer {
  color: #6e6e6e;
  font-size: small;
}

.text-footer a,
.text-footer a:visited,
.text-footer a:hover,
.text-footer a:active {
  text-decoration: none;
  color: inherit;
}