/* =========================
   age-check.css
   認証ページ専用スタイル（完全版）
   ========================= */

/* ===== フォント切替（既存仕様を維持） ===== */
.font-noto-sans-jp { font-family: 'Noto Sans JP', sans-serif; }
.font-yuji-mai     { font-family: "Yuji Mai", serif; }
.font-yuji-syuku   { font-family: "Yuji Syuku", serif; }

.font-button-noto-sans-jp .auth-button-enter,
.font-button-noto-sans-jp .auth-button-exit { font-family: 'Noto Sans JP', sans-serif; }
.font-button-yuji-mai .auth-button-enter,
.font-button-yuji-mai .auth-button-exit     { font-family: "Yuji Mai", serif; }
.font-button-yuji-syuku .auth-button-enter,
.font-button-yuji-syuku .auth-button-exit   { font-family: "Yuji Syuku", serif; }

/* ===== レイアウト・背景 ===== */
.age-check-body,
.auth-content {
  background: linear-gradient(to bottom, #d32d25 0%, #ffffff 100%) !important;
  color: #fff;
  margin: 0 auto;
  padding: 0;
  max-width: 960px;
}

/* ===== 認証ヘッダー ===== */
.auth-header {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #d32d25 !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
  padding: 20px;
}
.auth-header .logo { display: flex; justify-content: center; }
.auth-header .auth-header-logo {
  max-width: 200px; height: auto; display: inline-block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}

/* ===== バナー ===== */
.auth-banner-wrapper { width: 100%; margin: 0; }
.auth-banner-wrapper picture,
.auth-banner-image,
.auth-banner-wrapper img {
  display: block; width: 100%; height: auto;
}

/* ===== メッセージ ===== */
.auth-message {
  font-size: 1.2em; color: #fff; margin-bottom: 20px;
  line-height: 1.5; text-align: center;
  text-shadow: 3px 3px 6px rgba(0,0,0,1);
}

/* =========================
   ボタン：安定レイアウト
   ========================= */

/* 共通サイズ（必要に応じて調整） */
:root {
  --auth-btn-w: 160px;  /* テキスト時の最小幅 */
  --auth-btn-h: 56px;   /* テキスト時の最小高さ */
  --auth-gap:   20px;
}

/* 2列（SPで縦）を安定させる：Grid採用 */
.auth-buttons {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--auth-btn-w), 1fr);
  gap: var(--auth-gap);
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
  text-shadow: 3px 3px 6px rgba(0,0,0,1);
}
@media (max-width: 767px) {
  .auth-buttons {
    grid-auto-flow: row;
    grid-template-columns: minmax(var(--auth-btn-w), 1fr);
    justify-items: center;
    gap: 12px;
  }
}

/* テキストボタンの“箱”を統一（all: unset; は使わない） */
.auth-button-enter,
.auth-button-exit {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--auth-btn-w);
  min-height: var(--auth-btn-h);
  padding: 12px 24px;
  background-color: #ff0;
  color: #000;
  border: 2px solid #000;
  border-radius: 6px;
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  text-align: center;
  transition: opacity .2s ease, transform .15s ease;
}
.auth-button-enter:hover,
.auth-button-exit:hover { opacity: .85; }

/* 画像ボタンは装飾OFF＋画像に委ねる */
.auth-button-enter.has-image,
.auth-button-exit.has-image {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  min-width: auto;
  min-height: auto;
}

/* 画像サイズ：横に伸び過ぎ防止＆中央寄せ */
.auth-button-enter.has-image img,
.auth-button-exit.has-image img {
  display: block;
  width: auto;
  max-width: var(--auth-btn-w);
  height: auto;
  margin: 0 auto;
  /* 高さも揃えたい場合↓を有効化
  max-height: 64px; object-fit: contain;
  */
}
/* 画像ボタンのホバー（画像そのものに適用） */
.auth-button-enter.has-image:hover img,
.auth-button-exit.has-image:hover img {
  opacity: .9; transform: scale(1.05);
}

/* ===== ロゴ・補足・セクション（既存機能維持） ===== */
.auth-logo-container { display: flex; justify-content: center; margin: 20px 0;
  text-shadow: 3px 3px 6px rgba(0,0,0,1); }
.auth-logo-image { max-width: 350px; height: auto; display: inline-block; }

.auth-message-2 {
  font-size: 1em; color: #fff; line-height: 1.4; margin-top: 20px;
  text-align: center; text-shadow: 3px 3px 6px rgba(0,0,0,1);
}

.auth-extra-sections { margin-top: 40px; padding: 0 20px; }
.auth-section-block {
  background-color: rgba(255,255,255,.1);
  padding: 20px; border-radius: 6px; margin-bottom: 30px;
}
.auth-section-image { text-align: center; margin-bottom: 12px; }
.auth-section-image img { max-width: 100%; height: auto; display: inline-block; }
.auth-section-title { font-size: 1.3em; color: #0a0000; margin-bottom: 8px; text-align: center; }
.auth-section-text {
  color: #fff; font-size: 1em; line-height: 1.5; margin-bottom: 12px;
  text-align: center; text-shadow: 3px 3px 6px rgba(0,0,0,1);
}
.auth-section-link-wrap { text-align: center; margin-top: 12px; }
.auth-section-link {
  display: inline-block; background-color: #fff; color: #000;
  padding: 8px 16px; border-radius: 4px; text-decoration: none; font-weight: bold;
}
.auth-section-link:hover { background-color: #eee; }

/* ==== Gridの非対称を解消 ==== */

/* formを“消えるコンテナ”にして中のbuttonをグリッド子要素に */
.auth-form-enter { display: contents; }

/* グリッド子の最低幅制約を外す（内容が大きくても均等化） */
.auth-buttons > * { min-width: 0; }

/* ボタン自身はトラック幅いっぱいに伸ばす＆枠を含めて計算 */
.auth-button-enter,
.auth-button-exit {
  box-sizing: border-box;
  width: 100%;           /* ← トラック幅を満たす */
}

/* 画像ボタンも同様に中央で幅合わせ */
.auth-button-enter.has-image img,
.auth-button-exit.has-image img {
  max-width: var(--auth-btn-w);
  height: auto;
  margin: 0 auto;
}

/* 念のため：古いflex指定が残っていてもGridを優先 */
.auth-buttons { display: grid !important; }

/* ==== 認証ボタンの文字影を統一 ==== */
.auth-button-enter,
.auth-button-exit {
  text-shadow: 3px 3px 6px rgba(0,0,0,1) !important;
}

/* hover時も影は消さず維持する */
.auth-button-enter:hover,
.auth-button-exit:hover {
  text-shadow: 3px 3px 6px rgba(0,0,0,1) !important;
}

/* ==== ボタンを“細身”にして中央寄せ・PC2列／SP1列 ==== */

/* グリッド列を内容サイズで確保（両ボタンが細身になる） */
.auth-buttons {
  /* 既存の grid-auto-columns: minmax(var(--auth-btn-w), 1fr) を無効化し、
     2列を max-content ベースで中央寄せにする */
  grid-auto-columns: initial !important;
  grid-template-columns: repeat(2, max-content) !important;
  justify-content: center !important;
  column-gap: var(--auth-gap);
}

/* SPは1列で中央寄せ（幅は内容に応じて） */
@media (max-width: 767px) {
  .auth-buttons {
    grid-template-columns: max-content !important;
    justify-content: center !important;
    row-gap: 12px;
  }
}

/* グリッド子を中央に配置（form と a / button 両方に効く） */
.auth-buttons > * { justify-self: center !important; }

/* form が列幅を握らないように（中身の button をグリッド子に） */
.auth-form-enter { display: contents; }

/* ボタンは“内容幅＋最小幅”に。以前の width:100% を打ち消す */
.auth-button-enter,
.auth-button-exit {
  width: auto !important;
  min-width: var(--auth-btn-w) !important;  /* 例: 100px */
  padding: 12px 20px;                       /* 横余白を少し控えめに */
  box-sizing: border-box;
}

/* 画像ボタンも同じく細身で中央に */
.auth-button-enter.has-image img,
.auth-button-exit.has-image img {
  max-width: calc(var(--auth-btn-w) + 40px); /* 文字ボタンと釣り合う程度に */
  height: auto;
  margin: 0 auto;
}