/* ============================================================
   新歓ページ共通 — CSS（アメフトとは・先輩の声 などで共有）
   新歓トップページと同じ配色（チームブルー×イエロー）・英字フォント
   すべて .sk-lp の中に閉じ込めて、テーマやElementorと干渉させない
   文字サイズはpxで指定する（テーマがスマホ幅で基準サイズを14pxに下げるため、remは使わない）
   ============================================================ */

/* 新歓トップの「EVENT SCHEDULE」と同じチーム英字フォント */
@font-face {
  font-family: "sk-warriors";
  src: url("https://www.tokyowarriors.com/wp-content/uploads/useanyfont/1501Warriors-Original-2.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ----- RESET & BASE ----- */
.sk-lp,
.sk-lp *,
.sk-lp *::before,
.sk-lp *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.sk-lp {
  --sk-blue: #187FC4;
  --sk-blue-light: #418FDE;
  --sk-gray: #F2F3F5;
  --sk-yellow: #FABE00;
  --sk-yellow-dark: #D9A200;
  --sk-ink: #1E2A36;
  --sk-sub: #5E6B78;
  --sk-line: #D9DDE2;
  --sk-radius: 12px;
  --sk-font: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  --sk-font-en: "sk-warriors", "warriors-original-2", 'Noto Sans JP', sans-serif;

  font-family: var(--sk-font);
  color: var(--sk-ink);
  background: #FFFFFF;
  line-height: 1.85;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.sk-lp img { max-width: 100%; height: auto; display: block; }
.sk-lp a { color: inherit; text-decoration: none; }
.sk-lp ul, .sk-lp ol { list-style: none; }
.sk-lp strong, .sk-lp b { font-weight: 700; }
/* サイト全体のフォント設定（Use Any Font）が h1〜h6 にチーム英字フォントを !important で当てているため、
   見出しの英字も本文と同じ日本語フォントに戻す（略称バッジなど、個別にチーム英字フォントを指定した部分はそのまま） */
.sk-lp :is(h1, h2, h3, h4, h5, h6) { font-family: var(--sk-font) !important; }
/* テーマ（Lightning・Bootstrap）が見出しの行間を1.2、段落を1.7（スマホ）、リストを1.65にし、
   h2・h3・dt・ddに線を引くので打ち消す。:where() で詳細度を下げ、各部品で指定した行間・線は優先させる */
:where(.sk-lp) :is(h1, h2, h3, h4, h5, h6) { line-height: 1.5; border: 0; }
:where(.sk-lp) :is(h1, h2, h3, h4, h5, h6)::after { content: none; }
:where(.sk-lp) :is(p, li, dt, dd) { line-height: inherit; }
:where(.sk-lp) :is(dl, dt, dd) { border: 0; }

/* ----- 日本語の改行 ----- */
/* 見出しや短い文はHTML側で文節ごとに<wbr>を入れてあり、その要素では単語の途中で改行しない
   （「スポ／ーツ」「…行こ／う」のような折り返しを防ぐ）。長すぎる語だけは端で折り返す */
.sk-lp :has(> wbr) { word-break: keep-all; overflow-wrap: anywhere; text-wrap: balance; }
.sk-lp :is(h1, h2, h3, h4) { text-wrap: balance; }
.sk-lp p { text-wrap: pretty; }

/* ----- LAYOUT ----- */
.sk-container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.sk-container--narrow { max-width: 820px; }
.sk-section { padding: 80px 0; scroll-margin-top: 20px; }
.sk-section--tint { background: var(--sk-gray); }
@media (max-width: 600px) { .sk-section { padding: 60px 0; } }

.sk-en {
  font-family: var(--sk-font-en);
  color: var(--sk-blue);
  font-size: 17px;
  letter-spacing: 0.08em;
  text-align: center;
  line-height: 1.3;
  margin-bottom: 6px;
}
.sk-title {
  text-align: center;
  font-size: clamp(24px, 4.2vw, 35px);
  font-weight: 900;
  line-height: 1.5;
  margin-bottom: 20px;
}
/* 見出しの番号はCSSで表示し、見出しテキスト（SEO）には含めない。
   英字・数字が日本語と同じ行に並ぶところは、チーム英字フォントではなく日本語フォントでそろえる */
.sk-title[data-num]::before {
  content: attr(data-num);
  display: inline-block;
  font-family: var(--sk-font);
  font-weight: 900;
  color: #FFFFFF;
  background: var(--sk-blue);
  border-radius: 6px;
  padding: 0 10px;
  margin-right: 10px;
  font-size: 0.8em;
  vertical-align: 0.12em;
}
.sk-lead { max-width: 760px; margin: 0 auto 40px; color: var(--sk-sub); }
.sk-lead strong { color: var(--sk-blue); }
.sk-subtitle {
  font-size: 21px;
  font-weight: 900;
  margin: 56px 0 20px;
  padding-left: 14px;
  border-left: 6px solid var(--sk-yellow);
  line-height: 1.5;
}
.sk-note { margin-top: 16px; font-size: 14px; color: var(--sk-sub); text-align: center; }

/* ----- CARD ----- */
/* 枠線・影・背景は付けず、区切りは下線1本と余白だけ */
.sk-card {
  position: relative;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--sk-line);
}

/* ----- 新歓ナビ ----- */
.sk-shinkan-nav { background: var(--sk-blue); }
.sk-shinkan-nav ul {
  display: flex;
  justify-content: center;
  gap: 2px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sk-shinkan-nav ul::-webkit-scrollbar { display: none; }
.sk-shinkan-nav a {
  display: block;
  white-space: nowrap;
  color: #FFFFFF !important;
  font-size: 14px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
}
.sk-shinkan-nav a:hover { background: rgba(255, 255, 255, 0.15); }
.sk-shinkan-nav a[aria-current="page"] { background: #FFFFFF; color: var(--sk-blue) !important; }
.sk-shinkan-nav .sk-shinkan-nav-contact { background: var(--sk-yellow); color: var(--sk-ink) !important; }
@media (max-width: 860px) { .sk-shinkan-nav ul { justify-content: flex-start; } }

/* ----- HERO ----- */
.sk-hero {
  text-align: center;
  padding: 72px 20px 64px;
  background: #FFFFFF;
}
.sk-hero .sk-en { font-size: 21px; }
.sk-hero-title {
  font-size: clamp(29px, 6vw, 48px);
  font-weight: 900;
  line-height: 1.45;
  color: var(--sk-ink);
  margin-bottom: 20px;
}
.sk-hero-lead { max-width: 680px; margin: 0 auto 36px; text-align: left; }
.sk-hero-lead strong { color: var(--sk-blue); }

.sk-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.sk-toc a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border: 2px solid var(--sk-blue);
  border-radius: 999px;
  font-weight: 700;
  color: var(--sk-blue) !important;
  background: #FFFFFF;
  transition: background 0.15s ease, color 0.15s ease;
}
.sk-toc a:hover { background: var(--sk-blue); color: #FFFFFF !important; }
.sk-toc span { flex: none; font-weight: 900; }
@media (max-width: 600px) {
  .sk-hero { padding: 48px 16px 48px; }
  .sk-hero .sk-en { font-size: 17px; }
  .sk-toc { display: grid; grid-template-columns: 1fr 1fr; }
  .sk-toc a { justify-content: center; padding: 10px 8px; font-size: 14px; }
}
@media (max-width: 360px) {
  .sk-toc { gap: 8px; }
  .sk-toc a { gap: 4px; padding: 8px 6px; font-size: 13px; }
}

/* ----- NEXT ----- */
.sk-next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 28px; }
.sk-next-grid a { display: block; height: 100%; padding-top: 8px; }
.sk-next-grid a:hover b { text-decoration: underline; }
.sk-next-grid b { display: block; font-size: 18px; font-weight: 900; color: var(--sk-blue); margin-bottom: 6px; }
.sk-next-grid b::after { content: "\00A0→"; }
.sk-next-grid span { font-size: 14px; color: var(--sk-sub); }
@media (max-width: 760px) { .sk-next-grid { grid-template-columns: 1fr; } }

.sk-cta { text-align: center; margin-top: 44px; }
.sk-btn {
  display: inline-block;
  background: var(--sk-yellow);
  color: var(--sk-ink) !important;
  font-weight: 900;
  font-size: 18px;
  padding: 18px 48px;
  border-radius: 999px;
  box-shadow: 0 4px 0 var(--sk-yellow-dark);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sk-btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 var(--sk-yellow-dark); }