/* =====================================================================
   28卒対象 新規事業立案イベント LP 専用CSS（.evtLp* 名前空間）
   recruit2025_common_add.css 等の末尾へ追記して使用する。
   - 既存クラス／既存CSS変数は一切上書きしない（追加のみ）
   - recruit_common2025.css の @layer（reset/base/components/inheritance/
     utilities）には入れない。recruit_common2025_add.css 自体がレイヤー外
     運用のため、その支配的規約に合わせてレイヤー外に置く
   - 色は既存トークンを参照（--color-en = #E6002D ＝ 旧LPの --evt-red と同値）
   ===================================================================== */

.evtLp {
  --_accent: var(--color-en);          /* #E6002D ／既存トークン参照 */
  --_prizeBg: #14100e;                 /* design-locked: 旧LP実測の暖色黒。既存トークンに同値なしのためローカル定義 */
  --_reverse: var(--color-reverse);
  font-family: var(--font-jp);
}

/* 表の caption 等、読み上げにだけ残す要素 */
.evtLpVisuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------------------------------------------------------------
   共通CTAボタン
   --------------------------------------------------------------- */
.evtLpCta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: var(--_accent);
  color: var(--_reverse);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  padding: 17px 44px;
  text-align: center;
  transition-property: opacity;
  transition-duration: var(--transition);
}
.evtLpCta:hover {
  opacity: var(--opacity);
  text-decoration: none;
}
.evtLpCta:focus-visible {
  outline: 2px solid var(--_accent);
  outline-offset: 3px;
}
.evtLpCta--lg {
  min-width: min(100%, 360px);
}

/* ---------------------------------------------------------------
   このLPを載せるページは1カラム（左ナビなし）にする。
   ヒーローのビューポート全幅化は「l_main がビューポート中央にある」ことが
   前提の計算なので、左に site_nav 200px + gap 55px が入ると左へ 255px
   はみ出す。テンプレート側の編集に依存させず、CSS とレイアウト前提が
   同じファイルで完結するよう、この LP を含むページだけ左ナビを落とす。
   （ヘッダー内の site_nav ＝ SPのハンバーガーには影響しない）
   ※テンプレート側で Include を条件分岐させる運用にするなら、この1ブロックは削除可
   --------------------------------------------------------------- */
.l_contents:has(.evtLp) > .site_nav {
  display: none;
}

/* 記事アンカーナビ（テンプレートが EntryBody の前に出す器）はヒーローより
   上に来るため、ページを開いた瞬間の印象がヒーローより先にナビになる。
   このLPでは出さない。下余白48pxは JS 生成の __list 側に付いているので、
   外側を消せば余白ごと消える。
   ※HTML の data-navititle は残してあるので、この1ブロックを削除すれば
     アンカーナビはそのまま復活する */
.l_main:has(.evtLp) > .btm_anchorNav {
  display: none;
}

/* ---------------------------------------------------------------
   HERO
   ビューポート全幅。全幅化は既存CSSの作法に合わせる
   （recruit_common2025.css の l_header__wrapper / l_footer__contents /
    トップのヒーローと同じ書き方）。素朴な margin:0 calc(50% - 50vw) は
   100vw がスクロールバー幅を含むため約15px溢れるので使わない。
   サイズは全幅＝ビューポート幅なので vw で決める。
   --------------------------------------------------------------- */
.evtLpHero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: calc(50% - 50vw + var(--scrollbar-width) / 2);
  width: calc(100vw - var(--scrollbar-width));
  min-height: clamp(540px, 82vw, 780px);
  padding-block: clamp(72px, 10vw, 100px);
  padding-inline: 20px;
  overflow: hidden;
  /* ▼ 要差し替え：本番の画像パス（現状は仮の絶対パス） */
  background-image: url("/resource/img/recruit/28sotsu-shinjigyo/hero_ceo_duotone.jpg");
  background-size: cover;
  background-position: center 20%;
  color: var(--_reverse);
  text-align: center;
}
.evtLpHero::before {
  /* 顔にテキストが乗る前提。写真全体を均等に沈め、どこに文字が来ても読める強さにする */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .64) 60%, rgba(0, 0, 0, .8) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .12) 30%, rgba(0, 0, 0, .2) 62%, rgba(0, 0, 0, .6) 100%);
  pointer-events: none;
}
.evtLpHero__inner {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin-inline: auto;
}
.evtLpHero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--_accent);
  margin-bottom: 24px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
}
.evtLpHero__badge::before {
  content: "";
  width: 22px;
  height: 1px;
  background-color: var(--_accent);
}
.evtLpHero__title {
  font-family: var(--font-jp);
  font-weight: 900;
  /* design-locked: 初期案と同じ 9.2vw／上限84px。ヒーローがビューポート全幅
     なので vw 基準。最長行「事業をつくるのは、」は Range 実測で 9.09em 幅
     （字送り .01em 込み）。9.09F + 左右余白40px < 画面幅 が収まる条件で、
     375px→余り21px、320px→余り13px。左右余白を24pxから20pxに詰めて
     この余裕を作っている（文字サイズは初期案から変えない）。 */
  font-size: clamp(28px, 9.2vw, 84px);
  line-height: 1.28;
  letter-spacing: .01em;
  white-space: nowrap;
  text-shadow: 0 8px 32px rgba(0, 0, 0, .9), 0 2px 6px rgba(0, 0, 0, .95);
  margin-bottom: 28px;
}
.evtLpHero__em {
  font-style: normal;
  color: var(--_reverse);
  background: linear-gradient(180deg, transparent 64%, var(--_accent) 64%);
}
.evtLpHero__sub {
  font-size: clamp(13px, 1.6vw, 16px);
  line-height: 1.9;
  color: rgba(255, 255, 255, .9);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
  max-width: 520px;
  margin-inline: auto;
  margin-bottom: 40px;
}
.evtLpHero__ctaWrap {
  margin-top: 0;
}

/* ---------------------------------------------------------------
   AGITATION
   --------------------------------------------------------------- */
.evtLpAgitation {
  text-align: center;
  margin-top: clamp(48px, 6cqw, 72px); /* ヒーロー直下に一行分の余白を確保 */
}
.evtLpAgitation__lead {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(20px, 3cqw, 28px);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: -.02em;
  margin-bottom: 32px;
}
.evtLpAgitation__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  text-align: left;
}
.evtLpAgitation__item {
  background-color: #F8F8F8;
  border-left: 4px solid var(--_accent);
  padding: 24px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.8;
}

/* ---------------------------------------------------------------
   セクション見出し
   --------------------------------------------------------------- */
.evtLpSecTitle {
  text-align: center;
  margin-bottom: 36px;
}
.evtLpSecTitle__en {
  display: block;
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .18em;
  color: var(--_accent);
  margin-bottom: 8px;
}
.evtLpSecTitle__jp {
  display: block;
  font-family: var(--font-jp);
  font-weight: 900;
  font-size: clamp(22px, 3.4cqw, 32px);
  line-height: 1.5;
}

/* ---------------------------------------------------------------
   開催概要テーブル内の注記（table--event 本体には触らない）
   --------------------------------------------------------------- */
.evtLpTableNote {
  display: inline-block;
  font-size: 12px;
  line-height: 1.8;
  color: #777;
}

/* ---------------------------------------------------------------
   事前課題テーマ
   --------------------------------------------------------------- */
.evtLpTheme__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.evtLpTheme__item {
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--_accent);
  padding: 28px 24px;
}
.evtLpTheme__tag {
  display: inline-block;
  border: 1px solid var(--_accent);
  color: var(--_accent);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  padding: 4px 16px;
  margin-bottom: 14px;
}
.evtLpTheme__ttl {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 10px;
}
.evtLpTheme__txt {
  font-size: 14px;
  line-height: 1.8;
  margin-bottom: 14px;
}
.evtLpTheme__points {
  font-size: 13px;
  line-height: 1.9;
  color: var(--color-text);
}
.evtLpTheme__point {
  padding-left: 1.2em;
  position: relative;
}
.evtLpTheme__point::before {
  content: "・";
  position: absolute;
  left: 0;
}

/* ---------------------------------------------------------------
   3日間タイムライン
   --------------------------------------------------------------- */
.evtLpTimeline {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--color-border);
}
.evtLpTimeline__item {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--color-border);
}
.evtLpTimeline__day {
  font-family: var(--font-en);
  color: var(--_accent);
}
.evtLpTimeline__num {
  display: block;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
}
.evtLpTimeline__date {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  margin-top: 6px;
}
.evtLpTimeline__ttl {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 8px;
}
.evtLpTimeline__txt {
  font-size: 14px;
  line-height: 1.85;
  color: var(--color-text);
}

/* ---------------------------------------------------------------
   社長賞・キャリアパス
   --------------------------------------------------------------- */
.evtLpPrize__list {
  display: grid;
  /* カードの枚数に追従させる（2枚なら2カラム、3枚なら3カラム）。
     repeat(3, 1fr) 固定だと枚数を減らしたときに右が空いて間延びする */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.evtLpPrize__item {
  background-color: var(--_prizeBg);
  color: var(--_reverse);
  padding: 32px 24px;
  text-align: center;
}
.evtLpPrize__num {
  font-family: var(--font-en);
  font-weight: 800;
  color: var(--_accent);
  font-size: 13px;
  letter-spacing: .1em;
  line-height: 1.5;
  margin-bottom: 14px;
}
.evtLpPrize__ttl {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 12px;
}
.evtLpPrize__txt {
  font-size: 13px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .85);
}

/* ---------------------------------------------------------------
   社長メッセージ
   --------------------------------------------------------------- */
.evtLpCeo {
  background-color: #F8F8F8;
  padding: clamp(32px, 5cqw, 56px);
  max-width: 760px;
  margin-inline: auto;
}
.evtLpCeo__keyPhrase {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(18px, 2.6cqw, 24px);
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 16px;
}
.evtLpCeo__txt {
  font-size: 14px;
  line-height: 1.9;
}
.evtLpCeo__sign {
  font-size: 14px;
  line-height: 1.8;
  text-align: right;
  margin-top: 16px;
}

/* ---------------------------------------------------------------
   エントリーの流れ
   --------------------------------------------------------------- */
.evtLpFlow {
  counter-reset: evtLpFlow;
}
.evtLpFlow__item {
  counter-increment: evtLpFlow;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.7;
}
.evtLpFlow__item::before {
  content: counter(evtLpFlow);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--_accent);
  color: var(--_reverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14px;
}

/* ---------------------------------------------------------------
   注意書き
   --------------------------------------------------------------- */
.evtLpNote {
  font-size: 12px;
  line-height: 1.9;
  color: var(--color-text);
  background-color: #F8F8F8;
  padding: 20px 24px;
  margin-top: 24px;
}

/* ---------------------------------------------------------------
   最終CTA
   --------------------------------------------------------------- */
.evtLpFinal {
  text-align: center;
}
.evtLpFinal__lead {
  font-family: "Zen Old Mincho", serif;
  font-size: clamp(18px, 2.6cqw, 24px);
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 28px;
}

/* ---------------------------------------------------------------
   レスポンシブ（host の作法に合わせ、l_main / l_section の
   コンテナクエリで切り替える。site_nav は 1024px 以下で非表示）
   --------------------------------------------------------------- */
@container l_section (max-width: 768px) {
  .evtLpAgitation__list,
  .evtLpTheme__list,
  .evtLpPrize__list {
    grid-template-columns: 1fr;
  }
}
@container l_section (max-width: 600px) {
  .evtLpTimeline__item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .evtLpTimeline__day {
    display: flex;
    align-items: baseline;
    gap: 10px;
  }
  .evtLpTimeline__num {
    font-size: 24px;
  }
  .evtLpTimeline__date {
    margin-top: 0;
  }
  .evtLpCeo__sign {
    text-align: left;
  }
}
@container l_main (max-width: 600px) {
  .evtLpFinal__br {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .evtLpCta {
    transition-duration: 0.01ms;
  }
}


/* ---------------------------------------------------------------
   バナー設置用（LP本体ではなく、左ナビ／イベント一覧ページ側で使う）
   --------------------------------------------------------------- */
.evtLpNavBanner {
  display: block;
  margin-top: 24px;
}
.evtLpNavBanner img {
  display: block;
  width: 100%;
  height: auto;
}
.evtLpMainBanner {
  display: block;
}
.evtLpMainBanner img {
  display: block;
  width: 100%;
  height: auto;
}