@charset "UTF-8";
/* ==========================================================================
   第68回 競輪祭 有料席 テーマA「提灯ナイター」

   キービジュアル（夜のバンク × 提灯 /「熱狂を灯せ。」）に合わせた
   黒 × 金 × 朱の夜テーマ。

   reset.css → base.css → (index.css / form.css …) → class.css の
   最後に読み込む「上書き層」として作ってあります。既存CSSには手を入れて
   いないので、不採用ならこの1枚のlinkを外すだけで元のデザインに戻ります。
   ========================================================================== */

:root {
  --sumi:        #080c16;  /* 墨紺（最暗部） */
  --sumi-2:      #0b1120;  /* 背景上部 */
  --panel:       #101828;  /* カード面 */
  --panel-2:     #0c1322;
  --kin:         #d4af37;  /* 金 */
  --kin-light:   #f5d76e;  /* 金（ハイライト） */
  --kin-pale:    #fff2c4;  /* 提灯の灯り */
  --aka:         #c8102e;  /* 朱 */
  /* 文字。青寄りのグレーは濃紺の地色に沈んで読みにくいので、
     --text と同系の暖かいグレーで明度差だけを付ける（2026-08-20 豊嶋さん指摘）。
     地色 #080c16 に対するコントラスト比 text 17.3 / muted 14.8。
     サイト本体（css/keirinsai68.css）の --ink / --ink-soft と同値。 */
  --text:        #f4f1ea;  /* 本文（温かみのある白） */
  --text-muted:  #e4e0d6;
  --line:        rgba(212, 175, 55, 0.30);
}

/* --------------------------------------------------------------------------
   1. 地色 ― 夜のバンクと提灯の灯り
   base.css の body::before は content の綴り違いで実質無効なので、
   ここで固定背景レイヤーとして復活させて使う。
   -------------------------------------------------------------------------- */
body {
  background: var(--sumi);
  color: var(--text);
  /* 暗い背景では 400 だと線が細く、暗く沈んで見える。本文は 500（Medium）を基準にする。
     base.css の `font-weight: 400` を上書きしている。
     各ページの Google Fonts 読み込みに Noto Sans JP の 500 を追加済み。 */
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   1-2. 書体 ― 欧文と数字は Roboto、日本語はこれまでどおり
   Roboto は和文グリフを持たないので、日本語は自動的に次のフォントへ落ちる。
   結果として「数字と英字だけ」が差し替わる。
   -------------------------------------------------------------------------- */
body,
input,
select,
textarea,
button {
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
}

/* base.css が丸ゴシックを当てている見出しも、数字だけ Roboto にする */
h1,
h2,
h4 {
  font-family: 'Roboto', 'M PLUS Rounded 1c', sans-serif;
}

body::before {
  content: "";
  background:
    /* 上部の提灯の灯り */
    radial-gradient(110% 55% at 50% -8%,
      rgba(255, 198, 96, 0.30) 0%,
      rgba(255, 150, 40, 0.08) 38%,
      rgba(255, 150, 40, 0) 66%),
    /* 左右下からの朱の残光 */
    radial-gradient(70% 45% at 12% 108%, rgba(200, 16, 46, 0.18), transparent 60%),
    radial-gradient(70% 45% at 88% 108%, rgba(30, 90, 200, 0.16), transparent 60%),
    linear-gradient(180deg, var(--sumi-2) 0%, var(--sumi) 46%, #04060c 100%);
}

/* --------------------------------------------------------------------------
   2. ヘッダー ― キービジュアルを主役にする
   -------------------------------------------------------------------------- */
/* base.css は1000px。キービジュアル（images/title.jpg・原寸1920×800）を
   一回り大きく見せる。表示は1200pxで頭打ちなので原寸より縮小され、
   高解像度ディスプレイでも鮮明に出る（本文は1000pxのまま） */
header article {
  width: min(1200px, 100%);
}

header article#Head {
  position: relative;
}

header article h1 img {
  display: block;
}

/* 画像の下端を地色へ落として、夜がそのまま紙面に続くように見せる。
   キービジュアルの下端にはスポンサーロゴとURLが入っているので、
   それを潰さない範囲（下端12%・最大0.65）に留めること */
header article#Head::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 12, 22, 0) 0%, rgba(8, 12, 22, 0.65) 100%);
}

/* キービジュアルの下端に金の光条を敷いて、紙面とつなぐ */
header article#Head::after {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.15) 12%,
    var(--kin-light) 50%,
    rgba(212, 175, 55, 0.15) 88%,
    transparent 100%);
  box-shadow: 0 0 24px rgba(245, 215, 110, 0.55);
}

/* --------------------------------------------------------------------------
   3. 大会情報の帯
   -------------------------------------------------------------------------- */
.fest-strip {
  width: 1000px;
  margin: 0 auto;
  padding: 2.2em 1em 2.2em;
  text-align: center;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
}

.fest-strip .fest-grade {
  display: inline-block;
  margin-bottom: 0.7em;
  padding: 0.25em 1.4em;
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  color: var(--sumi);
  background: linear-gradient(145deg, var(--kin-pale), var(--kin) 55%, #b8912a);
  box-shadow: 0 2px 14px rgba(212, 175, 55, 0.40);
}

.fest-strip .fest-title {
  font-size: clamp(2.1rem, 3.2vw, 3.2rem);
  font-weight: 700;
  letter-spacing: 0.10em;
  line-height: 1.5;
  color: var(--kin-pale);
  text-shadow: 0 0 26px rgba(245, 215, 110, 0.35);
}

/* --------------------------------------------------------------------------
   4. 紙面 ― 白い箱をやめて夜に溶かす
   -------------------------------------------------------------------------- */
main {
  padding-bottom: 5em;
}

main article {
  background: transparent;
  padding: 0 1em 1em;
  color: var(--text);
}

main article section {
  margin-bottom: 3.4em;
}

main article section.inner {
  margin-bottom: 0;
}

/* 見出し ― 金の箔押し風 */
main h3 {
  display: flex;
  align-items: center;
  gap: 0.55em;
  position: relative;
  margin: 0 0 1.1em;
  padding: 0 0 0.6em;
  border-bottom: none;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(2.0rem, 2.6vw, 2.6rem);
  letter-spacing: 0.06em;
  color: #fff;
  white-space: normal;
}

main h3::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--kin-light) 0%,
    var(--kin) 18%,
    rgba(212, 175, 55, 0.28) 55%,
    rgba(212, 175, 55, 0) 100%);
}

main h3 .num {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.85em;
  height: 1.85em;
  font-size: 0.72em;
  font-weight: 900;
  color: var(--sumi);
  background: linear-gradient(150deg, var(--kin-pale), var(--kin) 52%, #b8912a);
  box-shadow:
    0 0 0 1px rgba(255, 242, 196, 0.45),
    0 3px 14px rgba(212, 175, 55, 0.35);
}

main p {
  color: var(--text);
}

/* reset.css が p の margin を 0 にしているため、続けて置かれた段落が
   くっついて読みにくい。案内ページの本文だけ行間を空ける。 */
.guide main article section > p + p {
  margin-top: 0.5em;
}

main strong {
  color: var(--kin-pale);
  text-shadow: 0 0 22px rgba(245, 215, 110, 0.30);
}

em {
  color: #ff8a8a;
}

/* フォームページの ol.attention / #Navigator は独自のインデントを持っているので、
   字下げは案内ページだけに当てる */
.guide main ol {
  margin-left: 1.4em;
}

main ol li {
  margin-bottom: 0.5em;
  color: var(--text);
}

main ol li::marker {
  color: var(--kin);
  font-weight: 700;
}

/* 受付前・受付終了などの告知 ― 高札に見立てた枠 */
.notice {
  margin: 0.5em auto 2.5em;
  padding: 1.1em 1em;
  text-align: center;
  background: linear-gradient(180deg, rgba(200, 16, 46, 0.22), rgba(200, 16, 46, 0.10));
  border: 1px solid rgba(212, 175, 55, 0.55);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45);
}

.notice span {
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(1.7rem, 3.4vw, 2.4rem);
  line-height: 1.5;
  color: #ffd9a0;
  text-shadow: 0 0 24px rgba(255, 170, 90, 0.45);
}

/* --------------------------------------------------------------------------
   5. 席種カード ― 価格順に「格」を色で見せる
   -------------------------------------------------------------------------- */
.guide main ul {
  justify-content: flex-start;
  gap: 20px;
}

.guide main ul li {
  --accent:      var(--kin);
  --accent-lit:  var(--kin-light);
  --accent-glow: rgba(212, 175, 55, 0.35);
  width: calc(50% - 10px);
  margin-bottom: 0;
}

.guide main ul li:nth-child(n+3) {
  width: calc(33.333% - 13.34px);
}

/* 3位・ロイヤル席＝鋼青 */
.guide main ul li:nth-child(3) {
  --accent:      #5e8bc4;
  --accent-lit:  #9dc0e8;
  --accent-glow: rgba(94, 139, 196, 0.30);
}

/* 4位・ラウンジ席＝古銅 */
.guide main ul li:nth-child(4) {
  --accent:      #c98a4b;
  --accent-lit:  #f0b578;
  --accent-glow: rgba(201, 138, 75, 0.30);
}

/* 5位・指定席＝白金 */
.guide main ul li:nth-child(5) {
  --accent:      #b9c4d6;
  --accent-lit:  #eaf0f8;
  --accent-glow: rgba(200, 214, 234, 0.30);
}

/* index.css の `main ul li:nth-child(N) dl` に背景を奪われないよう、
   こちらも :nth-child(n) を噛ませて詳細度を並べる（後勝ちで効く） */
.guide main ul li:nth-child(n) dl {
  position: relative;
  overflow: hidden;
  padding: 0;
  text-align: left;
  color: var(--text);
  background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* 上端の格付けライン */
.guide main ul li dl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-lit), var(--accent));
  z-index: 2;
}

.guide main ul li dl:hover {
  transform: translateY(-4px);
  border-color: var(--accent-glow);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 30px var(--accent-glow);
}

.guide main ul li dl dt {
  padding: 0.7em 0.7em 0.6em;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 2.1vw, 2.2rem);
  line-height: 1.35;
  letter-spacing: 0.04em;
  color: var(--accent-lit);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.guide main ul li dl dd {
  margin: 0;
}

.guide main ul li dl dd.photo {
  overflow: hidden;
  line-height: 0;
}

.guide main ul li dl dd.photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(0.92) brightness(0.86) contrast(1.05);
  transition: transform 0.5s ease, filter 0.5s ease;
}

.guide main ul li dl:hover dd.photo img {
  transform: scale(1.05);
  filter: none;
}

.guide main ul li dl dd.meta {
  padding: 0.8em 0.9em 0;
  font-size: 1.45rem;
  line-height: 1.7;
  color: var(--text-muted);
}

.guide main ul li dl dd.meta + dd.meta {
  padding-top: 0.1em;
}

.guide main ul li dl dd.price {
  margin-top: auto;
  padding: 0.65em 0.9em 0.85em;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.2;
  color: var(--accent-lit);
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
}

.guide main ul li dl dd.price b {
  font-size: 2.6rem;
  letter-spacing: 0.01em;
  text-shadow: 0 0 22px var(--accent-glow);
}

.guide main ul li dl dd.price small {
  display: block;
  margin-top: 0.2em;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--text-muted);
}

/* 席種カードのすぐ下に文章が続くと詰まって見えるので、間を空ける
   （「各座席の詳しい位置は…」の一文） */
.guide main ul + p {
  margin-top: 2em;
}

/* --------------------------------------------------------------------------
   6. ボタン ― 金の箔
   -------------------------------------------------------------------------- */
main a.btn,
main a.btn:link,
main a.btn:visited {
  position: relative;
  overflow: hidden;
  width: min(560px, 82%);
  margin: 1.8em auto 0.4em;
  padding: 0.9em 1.2em;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: clamp(1.8rem, 2.2vw, 2.2rem);
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  color: #1c1300;
  background: linear-gradient(180deg, #fbeaa4 0%, var(--kin) 48%, #b8912a 100%);
  border: 1px solid var(--kin-pale);
  box-shadow:
    0 8px 28px rgba(212, 175, 55, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* 光が横切る演出 */
main a.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
}

main a.btn:hover {
  color: #1c1300;
  background: linear-gradient(180deg, #fff3c4 0%, var(--kin-light) 48%, var(--kin) 100%);
  box-shadow:
    0 12px 38px rgba(245, 215, 110, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
  text-decoration: none;
}

main a.btn:hover::after {
  left: 120%;
}

/* チラシDLは主役ではないので、金の枠線だけの控えめな見た目にする */
main a.btn.btn-sub,
main a.btn.btn-sub:link,
main a.btn.btn-sub:visited {
  width: min(420px, 76%);
  font-size: clamp(1.5rem, 1.8vw, 1.7rem);
  color: var(--kin-pale);
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid var(--kin);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.18), 0 4px 18px rgba(0, 0, 0, 0.45);
}

main a.btn.btn-sub:hover {
  color: var(--sumi);
  background: linear-gradient(180deg, #fbeaa4, var(--kin));
  box-shadow: 0 8px 26px rgba(212, 175, 55, 0.35);
}

/* --------------------------------------------------------------------------
   7. フッター・付帯パーツ
   -------------------------------------------------------------------------- */
footer {
  background: #04060c;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
}

#PageTop,
a#PageTop:link,
a#PageTop:visited {
  color: var(--kin-pale);
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.45);
  backdrop-filter: blur(4px);
}

#PageTop:hover {
  color: var(--sumi);
  background: linear-gradient(180deg, #fbeaa4, var(--kin));
}

/* --------------------------------------------------------------------------
   8. フォーム系ページ（entry.php / registration.php / contact.php）

   案内ページには出てこない部品をまとめて夜のテーマに合わせる。
   既存の form.css / message.css は書き換えず、`#EntryForm` 配下に限定して
   上書きする。既存側が `section#Navigator ol li` のように詳細度を持つ箇所は
   こちらも id を重ねて勝たせている。
   -------------------------------------------------------------------------- */

/* 入力面は「枠のある紙」にする。案内ページと違い、どこからどこまでが
   入力欄なのかが分かった方が迷わないため。 */
main article#EntryForm {
  width: 1000px;
  margin: 2.6em auto 0;
  padding: 2em 2.2em 2.6em;
  background: linear-gradient(180deg, rgba(18, 26, 44, 0.94), rgba(11, 17, 31, 0.94));
  border: 1px solid rgba(212, 175, 55, 0.28);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.50);
}

/* 黒地に黄色の見出し帯 → 金の帯 */
#EntryForm h2 {
  margin: 0 0 1.6em;
  padding: 0.75em 0.8em;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 2.4vw, 2.4rem);
  letter-spacing: 0.08em;
  line-height: 1.5;
  white-space: normal;
  color: var(--kin-pale);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.20), rgba(212, 175, 55, 0.05));
  border-top: 1px solid rgba(212, 175, 55, 0.45);
  border-bottom: 1px solid rgba(212, 175, 55, 0.45);
}

/* form.css が h3 に白背景を敷くので消す。
   フォームでは項目グループの区切りになるので、上に余白を取る */
#EntryForm h3 {
  margin: 1.6em 0 1em;
  background: transparent;
}

/* 申込ステップ */
#EntryForm section#Navigator {
  margin-bottom: 2.6em;
}

#EntryForm section#Navigator ol li {
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(212, 175, 55, 0.22);
  border-radius: 2px;
  font-size: 1.4rem;
}

/* 通過済み */
#EntryForm section#Navigator ol li.end {
  color: var(--kin-pale);
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.40);
}

/* 現在地 */
#EntryForm section#Navigator ol li.select {
  color: #1c1300;
  background: linear-gradient(180deg, #fbeaa4, var(--kin));
  border-color: var(--kin-pale);
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(212, 175, 55, 0.32);
}

#EntryForm section#Navigator ol li::after,
#EntryForm section#Navigator ol li.end::after {
  color: rgba(212, 175, 55, 0.55);
}

/* 入力項目の見出し帯 */
#EntryForm dl {
  background: transparent;
}

#EntryForm dl dt {
  color: var(--kin-pale);
  background: rgba(255, 255, 255, 0.06);
  border-top: 1px dotted rgba(212, 175, 55, 0.30);
  border-bottom: 1px dotted rgba(212, 175, 55, 0.30);
  font-weight: 700;
}

#EntryForm dl dt span,
#EntryForm dl dt small {
  color: var(--text-muted);
}

#EntryForm dl dd {
  color: var(--text);
}

/* 入力行の余白。既存は dt が padding 2px / dd が margin 5px しかなく、
   項目名と入力欄が詰まって走査しづらいので1行ずつ間を取る。
   dt と dd の左padding は揃えること（項目名と入力欄の左端が揃う）。
   contact.php の当選内容（dl.naiyo）は横並びの表なので対象外。 */
#EntryForm dl:not(.naiyo) dt {
  margin-top: 1.1em;
  padding: 0.5em 0.7em;
  /* ラベル文字と「必須」バッジが baseline 揃えのままだとバッジが下にずれる。
     flex にして上下中央で揃える。エラー文（strong）が入る行もあるので折り返す。 */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2em 0.5em;
}

#EntryForm dl:not(.naiyo) dd {
  margin-bottom: 0.2em;
  padding: 0.5em 0.7em 0;
}

/* 当選内容の一覧は行の高さだけ確保する */
#EntryForm dl.naiyo dt,
#EntryForm dl.naiyo dd {
  padding: 0.5em 0.6em;
}

/* 「必須」バッジ。dt 側の gap で間隔を取るので margin は外し、
   上下に padding を持たせて箱の形を整える */
#EntryForm form dl dt em {
  margin: 0;
  padding: 0.2em 0.6em;
  line-height: 1.3;
  color: #fff;
  background: var(--aka);
}

/* 注意事項の箇条書き */
#EntryForm ol.attention {
  margin: 1.6em auto 2.2em;
}

#EntryForm ol.attention li {
  margin-bottom: 0.7em;
}

/* 同意チェックの枠 */
#EntryForm div#Agreement {
  margin: 2.2em auto;
  padding: 1.5em 1em;
  color: var(--text);
  background: rgba(200, 16, 46, 0.14);
  border: 1px solid rgba(212, 175, 55, 0.45);
}

/* 注意・情報メッセージ。message.css の淡いパステルは暗い地では浮くので、
   意味の色（青＝情報／黄＝注意／赤＝エラー）は保ったまま濃度を落とす。
   アイコン画像はそのまま使う。 */
#EntryForm #message {
  margin: 1.4em auto 1.6em;
}

#EntryForm .info,
#EntryForm .success,
#EntryForm .warning,
#EntryForm .error {
  /* 左の 50px はアイコン画像の場所なので触らない */
  padding: 1.1em 1em 1.1em 50px;
}

#EntryForm .info {
  color: #bfe2ff;
  background-color: rgba(30, 90, 160, 0.20);
  border-color: rgba(120, 180, 235, 0.45);
}

#EntryForm .success {
  color: #d3ecab;
  background-color: rgba(60, 130, 40, 0.20);
  border-color: rgba(140, 200, 100, 0.45);
}

#EntryForm .warning {
  color: #ffdca0;
  background-color: rgba(170, 120, 20, 0.22);
  border-color: rgba(230, 190, 90, 0.50);
}

#EntryForm .error {
  color: #ffb3b3;
  background-color: rgba(190, 30, 40, 0.22);
  border-color: rgba(240, 120, 120, 0.50);
}

/* 入力欄は明るいまま残す。暗い地に暗い入力欄だと入力中の文字が読みにくく、
   記入ミスにつながるため。枠と焦点表示だけ金に合わせる。 */
#EntryForm input[type="password"],
#EntryForm input[type="text"],
#EntryForm input[type="number"],
#EntryForm input[type="tel"],
#EntryForm input[type="email"],
#EntryForm textarea,
#EntryForm select {
  margin: 0.3em 0;
  padding: 0.45em 0.6em;
  color: #1c1a16;
  background: #f6f3ec;
  border: 1px solid rgba(212, 175, 55, 0.55);
}

#EntryForm input[type="password"]:focus,
#EntryForm input[type="text"]:focus,
#EntryForm input[type="number"]:focus,
#EntryForm input[type="tel"]:focus,
#EntryForm input[type="email"]:focus,
#EntryForm textarea:focus,
#EntryForm select:focus {
  background: #fffdf6;
  border-color: var(--kin-light);
  box-shadow: 0 0 0 3px rgba(245, 215, 110, 0.30);
}

#EntryForm ::placeholder {
  color: #8b857a;
}

/* PC幅では住所欄のラベル幅を揃えて、入力欄の左端を1本の線に乗せる。
   スマホ幅は form.css が `dd.address span` を block にして
   ラベルを上に置く作りなので、この指定は当てない。

   「都道府県：」の行だけラベルが span に入っておらず素のテキストなので、
   dd をグリッドにして1列目へ落とし込んでいる（テキストは匿名グリッド
   アイテムとして最初のセルに入る）。テンプレート側は触らずに済ませる形。 */
@media only screen and (min-width: 1000px) {

  #EntryForm dd.address,
  #EntryForm dd:has(> select[name^="pref"]) {
    display: grid;
    grid-template-columns: 10em auto;
    align-items: center;
    justify-content: start;
  }

  #EntryForm dd.address span {
    margin-right: 0;
  }
}

/* 年齢・郵便番号・電話番号のような短い欄は、上で padding を足したぶん
   中身の幅が減ってプレースホルダが切れる。幅を足して左右だけ詰める。 */
#EntryForm input.num,
#EntryForm ul#zip li input,
#EntryForm ul#tel li input {
  width: 5.5em;
  padding-left: 0.45em;
  padding-right: 0.45em;
}

/* 年齢欄は直後に「歳」が地の文で続くので、入力欄との間を空ける。
   郵便番号の2つの欄も同じ .num なので、ここで右側の余白がつく。 */
#EntryForm input.num {
  margin-right: 0.5em;
}

/* 郵便番号は「欄 - 欄 ボタン」が地の文で並ぶ形。ハイフンは前の欄の
   margin-right で右に、次の欄の margin-left で左に離して均等にする。 */
#EntryForm input[name^="zip"] + input[name^="zip"] {
  margin-left: 0.5em;
}

/* チェックボックス・ラジオ
   base.css の text-align: justify が効いていて、折り返した選択肢の
   1行目が「ス ー パ ー ロ イ ヤ ル 席」と引き伸ばされるので左揃えに戻す */
#EntryForm input[type="checkbox"] + label,
#EntryForm input[type="radio"] + label {
  color: var(--text);
  text-align: left;
}

#EntryForm input[type="checkbox"] + label:before {
  background: #f6f3ec;
  border-color: var(--kin);
  opacity: 1;
}

#EntryForm input[type="checkbox"]:checked + label,
#EntryForm input[type="radio"]:checked + label {
  color: var(--kin-light);
}

#EntryForm input[type="checkbox"]:checked + label:before {
  background: none;
  border-color: var(--kin-light);
  border-top-color: transparent;
  border-left-color: transparent;
}

#EntryForm input[type="radio"] + label::before {
  border-color: var(--kin);
}

#EntryForm input[type="radio"]:checked + label::after {
  background: var(--kin-light);
}

/* 選べない席種（満席など）。無効だと分かる程度に落としつつ、
   青寄りにせず読める明るさは残す */
#EntryForm input[type="radio"]:disabled + label {
  color: #a49d90;
}

/* 席種のラベルは幅が足りないと「スーパーロイヤル席(ホーム / 側)/5,000円」と
   括弧の途中で折り返る。Auto_Radio が「(」の前後を span で分けているので、
   それぞれを折り返し禁止にして、括弧の手前で改行させる。 */
#EntryForm label .nb {
  white-space: nowrap;
}

/* 席種は5つとも名前が長く、横に流すと折り返し位置が選択肢ごとにばらついて
   どこまでが1つの選択肢か読み取りにくい。1行に1つずつ並べる。
   （席数の「1席 / 2席」は短いので、そちらは横並びのまま） */
#EntryForm input[type="radio"].seat + label {
  display: block;
  margin-right: 0;
}

/* 送信ボタン ― 案内ページの申込ボタンと同じ金の箔 */
#EntryForm input[type="submit"],
#EntryForm button.submit {
  margin: 2em auto 0.6em;
  padding: 0.55em 1em;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #1c1300;
  background: linear-gradient(180deg, #fbeaa4 0%, var(--kin) 48%, #b8912a 100%);
  border: 1px solid var(--kin-pale);
  border-radius: 2px;
  box-shadow:
    0 8px 26px rgba(212, 175, 55, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.60);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#EntryForm input[type="submit"]:hover,
#EntryForm button.submit:hover {
  color: #1c1300;
  background: linear-gradient(180deg, #fff3c4 0%, var(--kin-light) 48%, var(--kin) 100%);
  box-shadow:
    0 12px 34px rgba(245, 215, 110, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transform: translateY(-2px);
}

/* 郵便番号検索などの補助ボタンは、送信ボタンと紛れないよう枠線だけにする */
#EntryForm input[type="button"],
#EntryForm ul#zip li.zipadd input {
  /* 直前の入力欄と地続きに見えないよう、少し離す */
  margin-left: 0.35em;
  padding: 0.35em 0.9em;
  color: var(--kin-pale);
  background: rgba(212, 175, 55, 0.14);
  border: 1px solid rgba(212, 175, 55, 0.55);
  border-radius: 2px;
}

#EntryForm input[type="button"]:hover,
#EntryForm ul#zip li.zipadd input:hover {
  color: var(--sumi);
  background: linear-gradient(180deg, #fbeaa4, var(--kin));
}

/* 確認画面などの強調 */
#EntryForm form dt strong,
#EntryForm dd strong.date1 {
  color: var(--kin-pale);
}

/* 「TOPに戻る」などの戻りリンク */
#EntryForm p.back a,
#EntryForm p.top a {
  color: var(--kin-light);
}

/* --------------------------------------------------------------------------
   9. 登場アニメーション（控えめに）
   -------------------------------------------------------------------------- */
@keyframes tomoshi {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.fest-strip,
main article section {
  animation: tomoshi 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

main article section:nth-of-type(1) { animation-delay: 0.05s; }
main article section:nth-of-type(2) { animation-delay: 0.10s; }
main article section:nth-of-type(3) { animation-delay: 0.15s; }
main article section:nth-of-type(4) { animation-delay: 0.20s; }
main article section:nth-of-type(5) { animation-delay: 0.25s; }
main article section:nth-of-type(6) { animation-delay: 0.30s; }
main article section:nth-of-type(7) { animation-delay: 0.35s; }

@media (prefers-reduced-motion: reduce) {
  .fest-strip,
  main article section {
    animation: none;
  }
  .guide main ul li dl,
  .guide main ul li dl dd.photo img,
  main a.btn,
  main a.btn::after {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   10. スマートフォン
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 999px) {

  /* base.css がキービジュアルを70%に縮めるが、ここは見せ場なので全幅に戻す */
  header img {
    width: 100%;
  }

  .fest-strip {
    width: 100%;
    padding: 1.2em 12px 1.4em;
  }

  main article {
    padding: 0 12px 1em;
  }

  /* スマホでは message.css がアイコンを上端中央に置く（background-position:
     center 10px）ので、PC用に入れた左50pxのpaddingだと文字がアイコンに
     重なる。上にアイコン分の余白を取る形に戻す。 */
  #EntryForm .info,
  #EntryForm .success,
  #EntryForm .warning,
  #EntryForm .error {
    padding: 42px 1em 1.2em;
  }

  /* フォームは左右いっぱいに使う。枠は上下だけ残して幅を稼ぐ */
  main article#EntryForm {
    width: 100%;
    margin-top: 1.4em;
    padding: 1.2em 12px 1.6em;
    border-left: none;
    border-right: none;
  }

  #EntryForm input[type="submit"],
  #EntryForm button.submit {
    width: 92%;
  }

  main article section {
    margin-bottom: 2.5em;
  }

  .guide main ul {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .guide main ul li,
  .guide main ul li:nth-child(n+3) {
    width: 100%;
  }

  .guide main ul li dl dd.photo img {
    aspect-ratio: 16 / 9;
  }

  main a.btn,
  main a.btn:link,
  main a.btn:visited {
    width: 100%;
  }

  main a.btn.btn-sub,
  main a.btn.btn-sub:link,
  main a.btn.btn-sub:visited {
    width: 100%;
  }

  /* SPではhoverが効かないので、押下時に色が変わらない既存指定を打ち消す */
  main a.btn:hover {
    background: linear-gradient(180deg, #fbeaa4 0%, var(--kin) 48%, #b8912a 100%);
  }
}