/* =========================
   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;
}

/* 1) 全体背景と文字色（グラデーション） */
.age-check-body,
.auth-content {
  background: linear-gradient(to bottom, #a48ed2 0%, #ffffff 100%) !important;
  color: #fff;
  margin: 0;
  padding: 0;
}

/* 2) 中央寄せボックス */
.age-check-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}
.age-check-box {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 30px;
  border-radius: 8px;
  text-align: center;
}

/* 3) 認証ヘッダー */
.auth-header {
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to bottom, #a48ed2 0%, #c19ee0 100%) !important;
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0, 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, 0.5));
}

/* 4) バナー */
.auth-banner-wrapper {
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
}
.auth-banner-wrapper picture,
.auth-banner-image,
.auth-banner-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}

/* 5) コンテンツ本体 */
.auth-content {
  text-align: center;
  padding: 40px 20px;
}

/* 6) 認証メッセージ */
.auth-message {
  font-size: 1.2em;
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.5;
}

/* 7) ボタン */
.auth-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.auth-button-enter,
.auth-button-exit {
  background-color: #ff0;
  color: #000;
  padding: 12px 24px;
  border: 2px solid #000;
  border-radius: 4px;
  font-size: 1.1em;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.auth-button-enter:hover,
.auth-button-exit:hover {
  opacity: 0.8;
}

/* 8) ロゴエリア */
.auth-logo-container {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
.auth-logo-image {
  max-width: 350px;
  height: auto;
  display: inline-block;
}

/* 9) 補足メッセージ */
.auth-message-2 {
  font-size: 1.0em;
  color: #fff;
  margin-top: 20px;
  line-height: 1.4;
}

/* 10) 任意の追加セクション */
.auth-extra-sections {
  margin-top: 40px;
  padding: 0 20px;
}
.auth-section-block {
  background-color: rgba(255, 255, 255, 0.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: 1.0em;
  line-height: 1.5;
  margin-bottom: 12px;
  text-align: center;
}
.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;
}

/* 11) レスポンシブ対応 */
@media (max-width: 767px) {
  .auth-buttons {
    flex-direction: column;
    gap: 12px;
  }
  .auth-button-enter,
  .auth-button-exit {
    width: 100%;
  }
}
@media (min-width: 768px) {
  .auth-buttons button {
    flex: 1;
    max-width: 200px;
  }
}
/* --- PC中央寄せ --- */
.age-check-wrapper,
.auth-content {
  max-width: 960px;
  margin: 0 auto;
}

/* --- 白文字にシャドウ追加 --- */
.auth-message,
.auth-message-2,
.auth-section-text,
.auth-content,
.age-check-box,
.auth-logo-container,
.auth-buttons {
 text-shadow: 3px 3px 6px rgba(0,0,0,1);

}
.auth-button-image img {
  width: 180px;
  height: auto;
  display: block;
  transition: transform 0.2s ease;
}

.auth-button-image img:hover {
  transform: scale(1.05);
}

@media (max-width: 767px) {
  .auth-buttons {
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .auth-button-image {
    margin-bottom: 16px;
  }

  .auth-button-image img {
    width: 80%; /* 必要に応じて 100% や max-width: 240px に調整してにゃ */
    max-width: 240px;
    height: auto;
  }
}

@media (max-width: 767px) {
  .auth-buttons {
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }

  .auth-button-image {
    display: block;
    text-align: center;
    margin: 0 auto 16px;
  }

  .auth-button-image img {
    width: 80%;
    max-width: 240px;
    height: auto;
    display: block;
    margin: 0 auto;
  }
}