/* ==========================================
   基本・共通設定
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f0f0f0;
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: #333;
    line-height: 1.6;
}

/* トリコロールカラーの定義 */
:root {
    --tricolor-blue: #002395;  /* 紺・青 */
    --tricolor-white: #ffffff;
    --tricolor-red: #ed2939;   /* 赤 */
}

/* 全体を包むコンテナ（PC推奨幅600px） */
.main-wrapper {
    max-width: 600px;
    margin: 0 auto;
    background: var(--tricolor-white);
    min-height: 100vh;
    border-left: 5px solid var(--tricolor-blue);
    border-right: 5px solid var(--tricolor-red);
    display: flex;
    flex-direction: column;
    overflow-x: hidden; /* 横はみ出しの最終防衛ライン */
}

/* ==========================================
   メインコンテンツ（年齢認証・店舗情報）
   ========================================== */
.auth-container {
    padding: 40px 20px;
    text-align: center;
    flex: 1;
}

/* ロゴ画像エリア */
.logo-area {
    margin-bottom: 30px;
}

.main-logo {
    max-width: 100%;
    height: auto;
    margin: 0 auto 15px auto;
    display: block;
}

/* 年齢認証メッセージ */
.auth-message {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 30px;
    border: 1px solid #eee;
}

.warning {
    color: var(--tricolor-red);
    font-weight: bold;
    font-size: 1.2rem;
    display: block;
    margin-bottom: 5px;
}

/* 認証ボタン（ENTER / EXIT 画像用グループ） */
.btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 30px 0 40px 0;
    width: 100%;
}

.btn {
    flex: 1;
    max-width: 240px; /* ボタン画像が大きくなりすぎないよう制限 */
    display: block;
    transition: opacity 0.3s;
}

.btn:hover {
    opacity: 0.8;
}

.btn img {
    width: 100%;
    height: auto;
    display: block;
}

/* 店舗情報テーブル */
.shop-info {
    text-align: left;
    margin-top: 20px;
}

.intro-text {
    text-align: center;
    margin-bottom: 25px;
    font-weight: bold;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
}

.info-table th, .info-table td {
    padding: 12px;
    border-bottom: 1px solid #ddd;
}

.info-table th {
    width: 30%;
    background: #f2f2f2;
    color: var(--tricolor-blue);
    font-size: 0.9rem;
}

.status-highlight {
    color: var(--tricolor-red);
    font-weight: bold;
}

.access-info {
    text-align: center;
    font-size: 0.85rem;
    color: #666;
}

/* ==========================================================================
   相互リンクバナーセクション（PC：横2列並び / スマホ：縦1列）
   ========================================================================== */
.mutual-banners-list {
    list-style: none;
    margin: 30px auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px 20px; /* 上下の行の間隔25px、左右の間隔20px */
    max-width: 468px;
}

/* 各バナー（li）の外枠 */
.mutual-banners-list > li {
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 上頭基準で綺麗に並べる */
}

/* 1. 上側のバナー画像用のリンク枠（上下左右の中央揃え） */
.mutual-banners-list > li > a:first-of-type {
    display: flex;
    align-items: center;     /* 画像を上下の中央に配置 */
    justify-content: center;  /* 画像を左右の中央に配置 */
    width: 200px;
    height: 43px;            /* 一番背の高いマンゾク様に合わせた絶妙な高さ */
    margin-bottom: 6px;       /* バナー画像とテキストの間の隙間 */
    overflow: hidden;
}

/* 各バナー画像のサイズ制御（縮小されすぎ・潰れを防止） */
.mutual-banners-list > li > a:first-of-type img {
    width: 100% !important;
    max-width: 200px !important;
    height: auto !important;
    display: block;
}

/* 2. 下側のテキストリンクの共通設定 */
.mutual-banners-list li a:not(:first-of-type),
.mutual-banners-list .banner-txt-link-mz a {
    font-size: 11px;
    letter-spacing: -0.5px;
    color: #4a90e2;
    text-align: center;
    text-decoration: none;
    line-height: 1.4;
    display: inline-block;
    white-space: nowrap; /* テキストが絶対に2行に折れないようにする */
}

/* マンゾク様の2つのテキストリンクの左右の隙間調整 */
.mutual-banners-list .banner-txt-link-mz a {
    margin: 0 4px;
}

/* マウスホバー時に下線を出す */
.mutual-banners-list li a:not(:first-of-type):hover,
.mutual-banners-list .banner-txt-link-mz a:hover {
    text-decoration: underline;
}

/* ==========================================
   バナーエリア強制縮小・中央寄せ・高さ同期設定
   ========================================== */
.footer-banners {
    padding: 20px 0;
    border-top: 2px solid var(--tricolor-blue);
    background: #fff;
    width: 100%;
}

/* メインバナーを確実に中央寄せ */
.main-banner-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.main-banner-wrap img {
    width: 80%;
    max-width: 468px;
    height: auto !important;
    display: block;
}

/* 相互リンクとYOASOBIを包むインナーコンテナ */
.banner-inner-container {
    width: 100%;
    max-width: 468px;
    margin: 0 auto;
    padding: 0 10px;
}

/* 相互リンクの横並び1行（左ロゴ＋右ボタン） */
.mutual-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100%;
    margin-bottom: 10px;
}

/* 左側の大きいロゴの枠 */
.banner-left-logo {
    flex: 0 0 50.42%;
    min-width: 0;
    display: flex;
    align-items: center;
}

/* 右側のボタン2段を包む枠 */
.banner-right-buttons {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 小ボタンが4つ並ぶ各行 */
.button-sub-row {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

.button-sub-row a {
    flex: 1;
    display: block;
}

/* YOASOBIバナーの枠 */
.yoasobi-row {
    width: 100%;
    margin-top: 10px;
}

/* フッター領域内すべての画像共通のリセット */
.footer-banners img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    border: none;
}

/* ==========================================
   初めてご利用されるお客様へのQ&A（強化調整）
   ========================================== */
#ageVerification {
    margin: 60px 0px 50px 0px;
    border: double 4px var(--tricolor-blue); /* 線の太さを指定し、統一感ある紺色に変更 */
    padding: 20px 15px;
    background-color: #fff;
    text-align: left; /* 中身のテキストは左詰めに */
}

/* 大見出し「初めてご利用されるお客様へのQ&A」 */
#ageVerification h4 {
    font-size: 1.15rem;
    color: var(--tricolor-blue);
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 1px dashed #ddd;
}

/* Q&Aのリスト全体 */
#ageVerification ul {
    list-style: none; /* デフォルトの黒丸（・）を綺麗に消去 */
    padding: 0;
    margin: 0;
}

/* 質問と回答の各セット（ブロック） */
#ageVerification ul li {
    margin-bottom: 30px;
}

#ageVerification ul li:last-child {
    margin-bottom: 0; /* 最後の項目の下の余白をリセット */
}

/* 質問タイトル（h5） */
#ageVerification h5 {
    font-size: 0.95rem;
    background: #f2f5fd; /* ほんのり薄い青の背景で質問らしく */
    color: var(--tricolor-blue);
    padding: 8px 12px;
    border-left: 4px solid var(--tricolor-blue);
    margin-bottom: 10px;
    font-weight: bold;
}

/* 回答本文を包むdiv */
#ageVerification ul li div {
    padding: 5px 10px;
    font-size: 0.85rem;
    line-height: 1.7;
    color: #444;
}

/* 強調文字（strong）を赤文字に変更 */
#ageVerification ul li div strong {
    color: var(--tricolor-red);
}

/* ==========================================
   レスポンシブ（スマホ用）
   ========================================== */
@media (max-width: 600px) {
    /* サイドのトリコロールボーダーを少し細くしてコンテンツ幅を確保 */
    .main-wrapper {
        border-left-width: 3px;
        border-right-width: 3px;
    }

    /* スマホ画面が狭い場合、ENTER/LEAVEボタンの隙間を調整 */
    .btn-group {
        gap: 10px;
        padding: 0 10px;
    }

    /* スマホの時は、下部バナー群のベース幅を90%に絞り込んで中央寄せ */
    .banner-inner-container {
        width: 90% !important;
    }

    /* スマホ表示時は相互リンクを縦1列に */
    .mutual-banners-list {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
}