/**
 * 年齢確認モーダル用のスタイル
 */

/* モーダルのオーバーレイ */
.age-verification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 背景を明るくする（0.8→0.5） */
    z-index: 9999;
    display: none; /* 初期状態では非表示 */
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
}

/* JavaScriptで表示する際のスタイル */
.age-verification-overlay.active {
    display: flex !important; /* 中央揃えのためにflexを使用 */
}

/* モーダル本体 */
.age-verification-modal {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.5);
    width: 100%;
    max-width: 900px; /* 最大幅 */
    overflow: hidden;
    margin: auto; /* 中央揃え */
}

/* トップ画像コンテナ */
.age-verification-modal .sp-head {
    width: 100%;
    line-height: 0;
    font-size: 0;
}

/* トップ画像 */
.age-verification-modal .sp-head img {
    width: 100%;
    height: auto;
    display: block;
}

/* モーダルコンテンツエリア */
.age-verification-modal .modal-content {
    padding: 0;
    text-align: center;
    background-color: #fff;
}

/* ボタンコンテナ */
.age-verification-modal .enter-buttons-container {
    padding: 20px 0 30px;
    text-align: center;
    width: 100%;
    background-color: #fff;
}

/* ボタンリスト */
.age-verification-modal .enter-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* ボタン間の間隔 */
    margin: 0 auto;
    padding: 0;
    list-style: none;
    max-width: 600px; /* 最大幅を設定 */
}

/* ボタンアイテム */
.age-verification-modal .enter-buttons li {
    width: 40%;
    max-width: 250px; /* ボタンの最大幅 */
}

/* ボタンリンク */
.age-verification-modal .enter-buttons a {
    display: block;
}

/* ボタン画像 */
.age-verification-modal .enter-buttons a img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ボタンホバー効果 */
.age-verification-modal .enter-buttons a:hover img {
    opacity: 0.8;
    transform: scale(1.05);
}

/* 非表示タイトル */
.age-verification-modal .kasou_h1 {
    display: none; /* 非表示 */
}

/* 警告テキスト */
.age-verification-modal .enter-caution {
    margin: 0 50px 40px; /* マージン */
    padding: 20px; /* パディング */
    background-color: rgba(189, 150, 104, 0.6);
    border-radius: 5px;
}

/* 警告テキスト内のパラグラフ */
.age-verification-modal .enter-caution p {
    margin: 0;
    color: #fff;
    font-size: 16px;
    line-height: 1.6;
}

/* 警告テキスト内の強調表示 */
.age-verification-modal .enter-caution span {
    font-weight: bold;
    color: #ff0000;
    text-decoration: underline;
}

/* 警告テキスト内のリンク */
.age-verification-modal .enter-caution a {
    color: #fff;
    text-decoration: underline;
}

/* 警告テキスト内のリンクホバー */
.age-verification-modal .enter-caution a:hover {
    color: #ffcc00;
}

/* レスポンシブデザイン - タブレット */
@media (max-width: 768px) {
    .age-verification-modal {
        max-width: 90%;
    }
    
    .age-verification-modal .enter-buttons-container {
        padding: 15px 0 20px;
    }
    
    .age-verification-modal .enter-buttons {
        gap: 20px;
    }
    
    .age-verification-modal .enter-caution {
        margin: 0 30px 30px;
        padding: 15px;
    }
}

/* レスポンシブデザイン - スマホ */
@media (max-width: 576px) {
    .age-verification-modal {
        max-width: 95%;
    }
    
    .age-verification-modal .enter-buttons-container {
        padding: 10px 0 15px;
    }
    
    .age-verification-modal .enter-buttons {
        gap: 15px;
    }
    
    .age-verification-modal .enter-caution {
        margin: 0 20px 20px;
        padding: 10px;
    }
    
    .age-verification-modal .enter-caution p {
        font-size: 14px;
    }
}

/* 超小型スマホ用 */
@media (max-width: 375px) {
    .age-verification-modal .enter-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .age-verification-modal .enter-buttons li {
        width: 80%;
    }
}

/* PC版での表示調整 */
@media screen and (min-width: 769px) {
    .age-verification-modal {
        max-width: 800px;
        margin: 0 auto;
    }
    
    .age-verification-modal .enter-buttons-container {
        padding: 30px 0;
    }
    
    .age-verification-modal .enter-buttons {
        gap: 50px;
    }
    
    .age-verification-modal .enter-buttons li {
        width: 30%;
        max-width: 200px;
    }
}