@charset "shift_jis";
/* CSS Document */
  :root {
    --red:        #e50012;  /* ヘッダー / フッターの赤 */
    --red-enter:  #ff0000;  /* ENTER ボタンの赤 */
    --bg:         #e6e6e6;  /* 背景 IMG エリアのグレー */
    --box:        #000000;  /* バナー等のプレースホルダー黒 */
    --text:       #333333;
    --title:      #3a0006;
    --container:  1122px;   /* メインコンテンツ最大幅（= ヒーロー画像幅） */
    --col:        468px;    /* 2カラム時の1カラム幅（= バナー幅） */
    --gap:        clamp(16px, 4vw, 60px);
  }

  * { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic",
                 "Meiryo", system-ui, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.7;
  }

  a { color: inherit; text-decoration: none; }
@media screen and (min-width: 768px) {
  .sp_only {
    display: none;
  }
}
  /* ---------- ヘッダー / フッター（赤帯） ---------- */

  .site-footer {
    background: var(--red);
    color: #fff;
    text-align: center;
    padding: 1px;
  }
 .site-header {
  background: var(--red);
  color: #fff;
  text-align: center;
  padding: 5px;
}
.site-header h1 {
  margin: 0;                                   /* 標準マージンを消す */
  color: var(--title);
  font-weight: 700;
  font-size: clamp(0.95rem, 2.4vw, 1.2rem);    /* 元の指定を移設 */
  letter-spacing: 0.02em;
  word-break: break-all;
  line-height: 1.4;
}
  .site-footer {
    font-size: clamp(0.85rem, 2vw, 1rem);
    letter-spacing: 0.1em;
  }

  /* ---------- 背景 IMG エリア ---------- */
  .stage {
    position: relative;
    background-image: url("../img/enter_bg.webp");background-position: center top;
    overflow: hidden;
    padding: clamp(16px, 2.5vw, 36px) 0 clamp(40px, 6vw, 80px);
  }
  .stage__watermark {
    position: absolute;
    top: clamp(20px, 4vw, 70px);
    left: clamp(16px, 3vw, 60px);
    margin: 0;
    font-size: clamp(1.4rem, 4vw, 3rem);
    font-weight: 400;
    color: #bcbcbc;
    letter-spacing: 0.04em;
    pointer-events: none;
    user-select: none;
  }

  .container {
    position: relative;
    width: min(100%, var(--container));
    margin-inline: auto;
    padding-inline: clamp(16px, 4vw, 32px);
  }

  /* ---------- プレースホルダー共通 ---------- */
  .ph {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    letter-spacing: 0.12em;
  }

  /* ヒーロー画像 1122 x 605 */
  .hero {
    width: 100%;
    aspect-ratio: 1122 / 605;
    font-size: clamp(1.6rem, 6vw, 4rem);
    font-weight: 500;
    letter-spacing: 0.02em;
  }
.hero-img { display: block; width: 100%; height: auto; }
  /* 468 x 70 バナー */
  .banner {
    width: 100%;
    max-width: var(--col);
    aspect-ratio: 468 / 70;
    font-size: clamp(0.85rem, 2vw, 1rem);
  }

  /* 88 x 31 バナー */
  .banner-sm {
    width: 88px;
    height: 31px;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    flex: 0 0 auto;
  }

  /* ---------- 上段：ENTER / 注意文 の2カラム ---------- */
  .intro {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    margin-top: clamp(24px, 4vw, 40px);
    justify-content: center; 
  }
  .intro__col {
    flex: 1 1 var(--col);
    min-width: 0;
    max-width: var(--col);
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2vw, 20px);
  }

  /* ENTER ボタン */
  .enter-btn {
  display: block;
  width: 100%;
  max-width: var(--col);   /* 468px を超えて拡大させない */
  aspect-ratio: auto;      /* 枠の比率固定を解除 */
  background: none;        /* 画像を敷くので赤背景は不要 */
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.enter-btn img {
  display: block;
  width: 100%;
  height: auto;            /* 画像の比率そのままで縮小 */
}
  .enter-btn:hover,
  .enter-btn:focus-visible {
    opacity: 0.88;
    transform: translateY(-2px);
  }

  .notice {color:#fff;
    margin: 0;
    font-size: clamp(0.9rem, 2vw, 1rem);   
  }
    .notice > span { display: block;padding:20px  }
    .notice a {
  color: #e50012;
  text-decoration: underline;
}
.notice {
  position: relative;   /* ::after の基準（既に指定済みならそのままでOK） */
}
.notice::after {
  content: "";
  position: absolute;
  inset: 0;                 /* 要素いっぱいに重ねる */
  padding: 10px;            /* ← 枠の太さ */
  pointer-events: none;     /* 上に重ねてもリンク（コチラ）を押せるように */
  background: repeating-linear-gradient(
    45deg,
    #000 0 5px,            /* 黒 */
    #e50012 5px 10px       /* 赤（黒一色にしたいなら下記参照） */
  );
  /* 中央をくり抜いて“枠だけ”残す */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
@media (min-width: 981px) {
  .enter-btn,
  .notice {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--col);   /* = 468px、幅を揃える */
    height: 160px;           /* ← 好きな高さに。両方共通の値にする */
  }
  .enter-btn {
    aspect-ratio: auto;      /* 高さ指定を効かせるため比率固定を解除 */
  }
  .enter-btn img {
    width: 100%;
    height: 100%;
    object-fit: contain;     /* ボタン画像を切らずに枠内へ。埋めたいなら cover */
  }
  .notice {
    margin: 0;
    display: flex;
    align-items: center;     /* テキストを縦中央に */
  }
}
  /* ---------- 説明テキスト ---------- */
  .lead {color:#fff;
    margin: clamp(28px, 4vw, 44px) 0 0;
    font-size: clamp(0.9rem, 2vw, 1rem);background: #000;padding: 1em;
  }

  /* ---------- 中段バナー：2列 x 3段 ---------- */
  .banner-grid {
    margin-top: clamp(28px, 4vw, 48px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, var(--col)));
    justify-content: space-between;
    gap: clamp(14px, 2.5vw, 22px) var(--gap);
  }
  .banner-grid .banner { max-width: none; }
@media (min-width: 981px) {.banner-grid,.banner-mini{width: 960px;margin-left: auto;margin-right: auto}}
  /* ---------- 小バナー 88x31 グリッド ---------- */
  .banner-mini {
    margin-top: clamp(28px, 4vw, 44px);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* ---------- レスポンシブ ---------- */
  @media (max-width: 980px) {
    .intro { flex-direction: column; align-items: center; }
    .intro__col { flex-basis: auto; width: 100%; max-width: var(--col); }
    .banner-grid { grid-template-columns: minmax(0, var(--col)); justify-content: center; }
    .banner-grid .banner { max-width: var(--col); margin-inline: auto; }
    .banner-mini { justify-content: center; }
    .stage__watermark { position: static; margin: 0 0 20px; text-align: center; }
    .notice { order: 1; } 
  }

  @media (max-width: 480px) {
    .banner-mini { gap: 6px; }
  }

  /* アクセシビリティ：フォーカスリング / モーション配慮 */
  a:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
  @media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
  }
body,td,th {
    font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, sans-serif;
}