/* 年齢確認の門。
 *
 * ★★出す・出さないは <html> の age-ask で決まる（inc/age.php の頭のスクリプト）。
 *   ★JSが無ければ印が付かない＝門は出ない。中身はそのまま読める。
 *     門は宣言であって錠ではないので、それでよい。
 * ★★既定は display:none。**HTMLには常に書いてあるが、見えない**。
 *   クローラにも中身がそのまま届く（サーバ側で止めないための要）。
 */
.age { display: none; }

html.age-ask .age {
  position: fixed;
  inset: 0;
  /* ★★何よりも前。ヘッダー10／期間20／写真30／通知40 ── 門は 50。
   *   ★通知より前に出す。ここだけは**答えるまで何も触らせない**ため。 */
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--edge-pad);
  /* ★地は濃く。うっすらだと後ろが読めてしまい、門の意味が薄れる。 */
  background: var(--ink0);
}

/* ★★門が出ているあいだ、後ろを動かさない。
 *   動くと「読めないのに動く」という気持ちの悪い状態になる。 */
html.age-ask body { overflow: hidden; }

.age-box {
  width: 100%;
  max-width: 380px;
  padding: 28px 22px 22px;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: var(--ink2);
  text-align: center;
}

/* ★名乗り。★どこのサイトの門なのかが分からないと、答えようがない。
 *   ロゴと同じ毛筆（--font-brush）で、ヘッダーと同じ顔にする。 */
.age-mark {
  margin-bottom: 18px;
  color: var(--t1);
  font-family: var(--font-brush);
  font-size: 30px;
  line-height: 1;
}

.age-q {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--t1);
}
.age-q b { color: var(--t1); }

.age-p {
  margin: 0 0 20px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--t2);
}
.age-p b { color: var(--t1); }

/* ★縦に積む。★横に並べると「はい」と「いいえ」が同じ重さに見える。
 *   ★塗ってあるほう（はい）が上。ほとんどの人はそちらを押す。 */
.age-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ★添え書き。★門だけ見て帰る人が居るので、何のサイトかを1行で言う。 */
.age-note {
  margin: 20px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--edge);
  font-size: 11px;
  line-height: 1.7;
  color: var(--t3);
}

.age-no-in[hidden], .age-ask-in[hidden] { display: none; }