/* ==========================================================================
   TOP の各セクション — design/TOP.dc.html
   ヒーローは css/hero.css に分けている。
   TOP だけの意匠：太い赤の斜線カット、透かし数字。下層ページでは使わない。
   ========================================================================== */

/* --- 「熱」ステートメント ------------------------------------------------- */
.tp-statement {
  background: var(--c-navy);
  padding: var(--pad-navy);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.tp-statement__inner { max-width: min(860px, 100%); margin: 0 auto; position: relative; z-index: 1; }
.tp-statement h2 {
  font-family: var(--f-head);
  font-weight: 900;
  font-size: clamp(26px, 5vw, 42px);
  line-height: 1.7;
  color: var(--c-offwhite);
  margin: 0 0 clamp(32px, 6vw, 56px);
}
.tp-statement h2:last-child { margin-bottom: 0; }
.tp-statement__accent { color: var(--c-red); }
.tp-statement__p {
  font-size: clamp(15px, 3vw, 20px);
  line-height: 2.2;
  color: var(--c-on-navy);      /* 紺背景上の本文。このセクション専用 */
  margin: 0 0 36px;
}
.tp-statement__p--wide { margin-bottom: clamp(32px, 6vw, 56px); }
.tp-statement__rule { width: 60px; height: 2px; background: var(--c-red); margin: 0 auto clamp(32px, 6vw, 56px); }
.tp-statement__call { margin: 0 0 40px; }
.tp-statement__call b {
  display: block;
  font-family: var(--f-head);
  font-weight: 900;
  font-size: clamp(20px, 4vw, 28px);
  color: var(--c-offwhite);
  margin-bottom: 14px;
}
.tp-statement__call span { font-size: clamp(15px, 3vw, 19px); color: var(--c-muted); }

/* --- 透かし数字（TOP のみ） ----------------------------------------------- */
.tp-wm {
  position: absolute;
  transform: skewX(-9deg);
  font-family: var(--f-en);
  font-weight: 900;
  font-size: clamp(160px, 22vw, 320px);
  line-height: 1;
  color: rgba(16, 28, 76, .045);
  z-index: 0;
  user-select: none;
}
.tp-wm--on-navy { color: rgba(255, 255, 255, .06); }
.tp-wm--yt { font-size: clamp(110px, 14vw, 200px); color: rgba(255, 255, 255, .035); }

/* --- 01〜03 の導線セクション ----------------------------------------------
   HTML には .tp-row--01 / --02 / --03 が付くが、01 ABOUT は下の .tp-row の
   既定値をそのまま使うため --01 の個別指定は無い（意図的）。 */
.tp-row {
  background: #fff;
  padding: clamp(64px, 10vw, 180px) clamp(24px, 8vw, 100px);
  position: relative;
  overflow: hidden;
  display: flex;
  gap: clamp(40px, 6vw, 100px);
  align-items: center;
}
.tp-row--02 { padding: clamp(56px, 10vw, 160px) clamp(24px, 8vw, 100px); z-index: 1; }
.tp-row--03 { background: var(--c-navy); padding: clamp(56px, 10vw, 160px) clamp(24px, 8vw, 100px); z-index: 1; }

.tp-row__text { flex: 1 1 46%; min-width: 0; container-type: inline-size; position: relative; z-index: 1; }
.tp-row--03 .tp-row__text { flex: 1 1 42%; }

.tp-row__h2 {
  font-family: var(--f-head);
  font-size: clamp(28px, 8cqi, 48px);
  font-weight: 900;
  color: var(--c-navy);
  line-height: var(--lh-head);
  margin: 0 0 28px;
}
.tp-row--02 .tp-row__h2 { font-size: clamp(26px, 8cqi, 44px); margin-bottom: 24px; }
.tp-row--03 .tp-row__h2 { font-size: clamp(26px, 8cqi, 44px); margin-bottom: 24px; color: var(--c-offwhite); }

.tp-row__lead { font-size: 16px; line-height: 2; color: var(--c-text); margin: 0 0 40px; }
.tp-row--02 .tp-row__lead { line-height: 1.9; max-width: 480px; margin-bottom: 28px; }
.tp-row--03 .tp-row__lead { line-height: 1.9; max-width: 480px; margin-bottom: 28px; color: var(--c-offwhite); }

/* リード文の中で強調する一文（上京希望者への訴求）。
   赤い下線で示す。折り返しても下線が続くよう box-decoration-break を使う。 */
.tp-row__lead-strong {
  font-weight: 700;
  border-bottom: 2px solid var(--c-red);
  padding-bottom: 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* リード文より 2px 小さい補足（待遇の案内）。
   リード文の中に置き、行間もそのまま続ける。 */
.tp-row__note {
  display: block;
  font-size: 14px;
}

/* 下線のテキストリンク */
.tp-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: var(--c-navy);
  font-weight: 700;
  font-size: 16px;
  border-bottom: 2px solid var(--c-navy);
  padding-bottom: 4px;
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
/* ホバーで文字と下線が赤に変わる */
.tp-link:hover { color: var(--c-red); border-bottom-color: var(--c-red); }

/* 03 は赤い塗りのボタン。
   このセクションは紺背景なので、他ページのボタンのように紺を流し込むと
   ボタンが背景に溶けて見えなくなる。そのため、お問い合わせページの
   「内容を修正する」と同じ「少し拡大する」動きを使う。 */
.tp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  background: var(--c-red);
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  padding: 22px 44px;
  transition: transform .3s var(--ease-out);
}
.tp-btn:hover { color: #fff; transform: scale(1.06); }

/* --- 矢印の動き（TOPの導線リンク共通） -----------------------------------
   ホバーで矢印が少し右へ進む。動きはこれだけに留める。 */
.tp-link span,
.tp-btn span,
.tp-channel span {
  display: inline-block;
  transition: transform .3s var(--ease-out);
}
.tp-link:hover span,
.tp-btn:hover span,
.tp-channel:hover span { transform: translateX(6px); }

/* 写真の斜め枠。内側は逆方向に skew して写真を歪ませない */
.tp-row__photo {
  flex: 1 1 50%;
  min-width: 0;
  aspect-ratio: 3 / 2;
  position: relative;
  z-index: 1;
  transform: var(--skew-frame);
  box-shadow: var(--shadow-photo);
  overflow: hidden;
}
.tp-row__photo-inner { transform: skewX(6deg) scale(1.15); width: 100%; height: 100%; }
.tp-row__photo-inner img { width: 100%; height: 100%; object-fit: cover; }

.tp-divider { height: 1px; background: rgba(16, 28, 76, .1); margin: 0 clamp(24px, 8vw, 100px); }

/* --- 04 MEMBER ----------------------------------------------------------- */
.tp-member {
  background: var(--bg-section);
  padding: clamp(56px, 10vw, 160px) clamp(24px, 6vw, 160px);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.tp-sec-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 64px;
  position: relative;
  z-index: 1;
}
.tp-sec-head .kicker { margin-bottom: 22px; }
.tp-sec-head h2 {
  font-family: var(--f-head);
  font-size: var(--fs-h2-on-navy);
  font-weight: 900;
  color: var(--c-navy);
  line-height: var(--lh-head);
  margin: 0;
}

.tp-member__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.tp-card { background: #fff; display: block; }
.tp-card__photos { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
/* 敷き込みは components.css の .fill-photo */
/* 通常の写真をフェードアウトさせてホバー後の写真を出す */
.tp-card__front { transition: opacity .4s ease; opacity: 1; }
.tp-card:hover .tp-card__front { opacity: 0; }

.tp-card__body { padding: 24px 28px; }
.tp-card__dept { font-size: 13px; color: var(--c-red); font-weight: 600; letter-spacing: .02em; margin-bottom: 10px; }
.tp-card__catch { font-size: 20px; font-weight: 700; line-height: 1.6; color: var(--c-navy); margin: 0 0 16px; }
.tp-card__initial { font-size: 13px; font-weight: 600; color: var(--c-muted); letter-spacing: .06em; }

/* --- 05 YOUTUBE ---------------------------------------------------------- */
.tp-youtube {
  background: #150F0D;
  padding: clamp(56px, 10vw, 160px) clamp(24px, 8vw, 100px);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.tp-youtube__head { position: relative; max-width: min(900px, 100%); z-index: 1; margin-bottom: 64px; }
.tp-youtube__head .kicker { margin-bottom: 22px; }
.tp-youtube__head h2 {
  font-family: var(--f-head);
  font-size: var(--fs-h2-on-navy);
  font-weight: 900;
  color: var(--c-offwhite);
  line-height: var(--lh-head);
  margin: 0;
}
.tp-youtube__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 32px);
  margin-bottom: 48px;
  max-width: 1400px;
  z-index: 1;
}
.tp-video { background: var(--bg-card-dark); }
.tp-video__frame { width: 100%; aspect-ratio: 16 / 9; position: relative; }
.tp-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
.tp-video__meta { padding: 20px 24px; display: flex; align-items: center; gap: 14px; }
.tp-video__label {
  font-family: var(--f-en);
  font-weight: 800;
  font-style: italic;
  font-size: 11px;
  color: var(--c-red);
  letter-spacing: .1em;
}
.tp-video__title { font-family: var(--f-head); font-size: 17px; font-weight: 900; color: var(--c-offwhite); margin: 0; }

.tp-channel {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  color: var(--c-offwhite);
  font-weight: 700;
  font-size: 16px;
  border-bottom: 2px solid var(--c-offwhite);
  padding-bottom: 4px;
  z-index: 1;
}
.tp-channel {
  transition: border-color .3s var(--ease-out);
}
/* 紺（濃い背景）の上なので、下線だけ赤に変える */
.tp-channel:hover { color: var(--c-offwhite); border-bottom-color: var(--c-red); }

/* ==========================================================================
   SP（768px 以下）
   ========================================================================== */

/* ==========================================================================
   SP（768px 以下）
   ========================================================================== */
@media (max-width: 768px) {
  .tp-row, .tp-row--02, .tp-row--03 { flex-direction: column; gap: 48px; }
  .tp-row__text, .tp-row--03 .tp-row__text { flex: 1 1 auto; width: 100%; }
  .tp-row__photo {
    flex: 1 1 auto;
    width: 100%;
    transform: none;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
  }
  .tp-row__photo-inner { transform: none; }

  .tp-wm { display: none; }

  .tp-member__grid { grid-template-columns: 1fr; gap: 24px; }
  /* SP はホバーできないため、ホバー後の写真を常時表示する */
  .tp-card__front { display: none; }

  .tp-youtube__grid { grid-template-columns: 1fr; }
}