/* =========================================================
   sema-theme age-gate.css — 年齢確認ゲート（初回訪問時のオーバーレイ）
   ブランド：明朝主軸（Zen Old Mincho）／補助ゴシック／深緑・アイボリー・グレージュ・ブロンズ。
   静かで落ち着いた会社公式サイトの入口。警告画面・煽情的表現・赤主役・強い影・派手な演出はしない。
   本文を完全な黒背景にしない（サイトを薄く隠す深緑系オーバーレイ）。
   ゲート表示時のみ読み込む（未確認時）。全クラス sema-age- プレフィックス。
   ========================================================= */

/* スクロール固定（body クラスはサーバー側で付与＝JavaScript 無効でも効く） */
html.sema-age-open,
body.sema-age-open{ overflow:hidden; }

/* 重要（スマホ横幅の根本原因対策）：
   確定済みのスマホ用ナビ（.sema-nav）は閉時に画面右外へ退避しており（fixed; right:0; translateX(100%)）、
   モバイルではこれがページ横方向オーバーフロー（約323px）を生み、レイアウトビューポート（window.innerWidth）を
   実機幅より広く（例：375px→698px）拡張する。position:fixed; inset:0 のゲートはその拡張ビューポート幅を埋めるため、
   パネルが実画面からはみ出す。→ ゲート表示中のみ html の横オーバーフローをクリップし、レイアウトビューポートを
   実機幅へ戻す（base.css・ナビ・他ページは変更しない。ゲート表示時にのみ適用）。JS 無効でも効くよう :has() を使用し、
   JS 有効時は age-gate.js でも documentElement に設定してフォールバックする。 */
html:has(body.sema-age-open){ overflow-x:hidden; }

/* 最外周：常にビューポート全体。パネルが高い場合はゲート内部だけ縦スクロール（元ページは動かさない） */
.sema-age{
  position:fixed; inset:0; z-index:2000;
  display:flex;                       /* パネルは margin:auto で上下左右中央（高い場合も上端まで到達可） */
  padding:clamp(16px,4vw,40px);
  box-sizing:border-box;
  overflow-x:hidden; overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* 背景：ビューポート全体を常時被覆（スクロールしても切れない）。純黒にしない。 */
.sema-age__backdrop{
  position:fixed; inset:0; z-index:0;
  background:rgba(24,32,28,.66);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}

/* パネル共通：幅は100%（左右は最外周のpaddingで確保）・最大幅制限・box-sizing・中央寄せ・折り返し */
.sema-age__panel{
  position:relative; z-index:1;
  margin:auto;
  width:100%; max-width:34rem; box-sizing:border-box;
  background:var(--sema-bg); border:1px solid var(--sema-line-2); border-radius:3px;
  padding:clamp(28px,4.5vw,46px) clamp(22px,4vw,44px);
  box-shadow:0 12px 40px rgba(24,22,17,.20);
  overflow-wrap:anywhere; word-break:break-word;
}

/* 退出パネル：既定は非表示。:target で表示のみ切替（position/width は変えない）。確認パネルを隠す。 */
.sema-age__exit{ display:none; }
#sema-age-exit:target{ display:block; }
#sema-age-exit:target ~ .sema-age__main{ display:none; }

/* 小さなブランド表記（英字キッカーにしない・ロゴ相当の控えめ表示） */
.sema-age__brand{
  font-family:var(--sema-serif); font-weight:700; letter-spacing:.2em;
  font-size:1.15rem; color:var(--sema-ink); margin:0 0 1.1em;
}

.sema-age__title{
  font-family:var(--sema-serif); font-weight:700; letter-spacing:.1em;
  font-size:clamp(1.4rem,3.4vw,1.85rem); line-height:1.4; color:var(--sema-ink);
  margin:0 0 .8em;
}
.sema-age__title::after{
  content:""; display:block; width:40px; height:1px; background:var(--sema-bronze); margin-top:.7em;
}
.sema-age__desc{
  font-family:var(--sema-serif); font-size:1rem; line-height:1.95; letter-spacing:.03em;
  color:var(--sema-ink-soft); margin:0 0 1.3em;
}
.sema-age__q{
  font-family:var(--sema-serif); font-weight:600; font-size:1.08rem; letter-spacing:.04em;
  color:var(--sema-ink); margin:0 0 1.4em;
}

/* ボタン：進む＝深緑主／退出＝控えめ枠線。赤は主役にしない。 */
.sema-age__actions{ display:flex; flex-direction:column; gap:.8em; margin:0 0 1.5em; }
.sema-age__form{ margin:0; }
.sema-age__btn{
  display:block; width:100%; box-sizing:border-box; text-align:center;
  font-family:var(--sema-sans); font-weight:700; font-size:1rem; letter-spacing:.06em; line-height:1.2;
  padding:1em 1.4em; border-radius:2px; cursor:pointer; text-decoration:none;
  transition:background-color .2s var(--sema-ease), border-color .2s var(--sema-ease), color .2s var(--sema-ease);
}
.sema-age__btn--yes{ color:#fff; background:var(--sema-sage-deep); border:1px solid var(--sema-sage-deep); }
.sema-age__btn--yes:hover{ background:var(--sema-sage); }
.sema-age__btn--yes:active{ transform:translateY(1px); }
.sema-age__btn--yes[disabled]{ background:var(--sema-ink-mute); border-color:var(--sema-ink-mute); cursor:progress; }
.sema-age__btn--no{
  color:var(--sema-ink-soft); background:transparent; border:1px solid var(--sema-line-strong);
}
.sema-age__btn--no:hover{ border-color:var(--sema-sage); background:rgba(47,74,67,.05); color:var(--sema-sage-deep); }

/* 常時表示の注記（店舗条件との区別）：控えめだが読める（色だけに依存しない） */
.sema-age__note{
  font-family:var(--sema-sans); font-size:.86rem; line-height:1.8; letter-spacing:.02em;
  color:var(--sema-ink-mute); margin:0 0 1.1em;
  padding-top:1.1em; border-top:1px solid var(--sema-line);
}

/* 補足（開閉） */
.sema-age__more{ margin:0; }
.sema-age__more-summary{
  font-family:var(--sema-sans); font-size:.86rem; letter-spacing:.05em; color:var(--sema-sage-deep);
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.4em; padding:.2em 0;
}
.sema-age__more-summary::-webkit-details-marker{ display:none; }
.sema-age__more-summary::before{
  content:"＋"; color:var(--sema-bronze); font-weight:700; font-size:.9em;
}
.sema-age__more[open] .sema-age__more-summary::before{ content:"−"; }
.sema-age__more-body{ margin-top:.8em; }
.sema-age__more-body p{
  font-family:var(--sema-sans); font-size:.82rem; line-height:1.85; color:var(--sema-ink-mute); margin:0 0 .8em;
}
.sema-age__link{ color:var(--sema-sage-deep); text-decoration:underline; text-underline-offset:2px; overflow-wrap:anywhere; }
.sema-age__link:hover{ color:var(--sema-bronze); }

/* 退出パネルの文言 */
.sema-age__exit-lead{ font-family:var(--sema-serif); font-weight:600; font-size:1.14rem; color:var(--sema-ink); margin:0 0 .8em; }
.sema-age__exit-text{ font-family:var(--sema-serif); font-size:.98rem; line-height:1.95; color:var(--sema-ink-soft); margin:0 0 1.4em; }
.sema-age__back{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--sema-sans); font-size:.94rem; letter-spacing:.05em; color:var(--sema-sage-deep); text-decoration:none;
}
.sema-age__back::before{ content:"\2190"; color:var(--sema-bronze); }
.sema-age__back:hover{ color:var(--sema-bronze); text-decoration:underline; text-underline-offset:3px; }

/* =========================================================
   スマホ（≤767px）：全画面の白ページにはせず、オーバーレイ感を維持。
   左右16〜20px・上下16〜24px程度の余白＋幅100%（余白は最外周paddingで確保）＋内部縦スクロール。
   固定px幅・transform・left/right は使わない（横スクロール／画面外配置を防ぐ）。
   ========================================================= */
@media (max-width:767px){
  .sema-age{ padding:clamp(16px,5vw,24px) clamp(16px,4.5vw,20px); }
  .sema-age__panel{
    max-width:30rem;
    padding:clamp(24px,6.5vw,34px) clamp(18px,5.5vw,24px);
  }
  .sema-age__desc{ font-size:1rem; }
  .sema-age__q{ font-size:1.06rem; }
  .sema-age__btn{ font-size:1.02rem; padding:1.05em 1.4em; }
}

/* ごく小さい画面（≤360px）でも収める */
@media (max-width:360px){
  .sema-age{ padding:14px; }
  .sema-age__panel{ padding:22px 16px; }
}

/* 動きの抑制設定を尊重 */
@media (prefers-reduced-motion:reduce){
  .sema-age__btn{ transition:none; }
}