/* ------------------------------------------------------------- 年齢確認オーバーレイ 初回訪問時のみ表示し、「はい」を選ぶとlocalStorageに記録する。 確認済みの場合は が付き、CSSで非表示になる （JSで要素を消すとチラつくため、head内の同期スクリプトで判定する）。 ------------------------------------------------------------- */ .age-gate { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(16, 10, 9, 0.92); backdrop-filter: blur(6px); } /* 確認済み、またはJS無効時に誤って出続けないようにする */ .age-ok .age-gate { display: none; } .age-gate-card { width: 100%; max-width: 380px; background: #F7F1EA; color: #1A1210; border-radius: 14px; padding: 28px 24px 22px; text-align: center; font-family: "Noto Sans JP", sans-serif; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45); } .age-gate-brand { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.18em; color: #C81E65; margin-bottom: 14px; } .age-gate-title { font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif; font-weight: 900; font-size: 19px; line-height: 1.5; margin: 0 0 10px; } .age-gate-text { font-size: 13px; line-height: 1.8; color: #7A6F68; margin: 0 0 22px; } .age-gate-buttons { display: flex; flex-direction: column; gap: 10px; } .age-gate-yes, .age-gate-no { display: block; width: 100%; padding: 13px 16px; border-radius: 999px; font-size: 15px; font-family: inherit; font-weight: 700; cursor: pointer; border: 1px solid transparent; } .age-gate-yes { background: #C81E65; color: #fff; } .age-gate-yes:hover { background: #A81555; } .age-gate-no { background: transparent; color: #7A6F68; border-color: #EDE0D3; font-weight: 500; } .age-gate-no:hover { border-color: #B7A99E; } .age-gate-note { font-size: 11px; color: #B7A99E; margin: 16px 0 0; } .age-gate-note a { color: #7A6F68; }