/* =========================================================
   Lightbox Modal Baseline v1.0  ——  レイアウト固定版
   ※ このファイルを“唯一のベース”として使います。
   ※ 以後の改修では、下の「CONFIG（可変でも良い値）」だけ変更可。
   ※ HTML構造／クラス名／主要寸法は変更しません。
   ========================================================= */

:root{
  --modal-width: 80vw;
  --modal-height: 80vh;
  --modal-radius: 12px;

  --modal-shadow: 0 24px 60px rgba(0,0,0,.35);
  --overlay-color: rgba(0,0,0,.6);
  --text-color: #333;
  --close-color: #666;
  --close-color-hover: #111;

  --fade-ms: 350ms;
  --easing: ease;
  --enter-scale: .96;
}
.t_orange	{color:#f60;}
/* スムーズスクロール一時無効 */
html.no-smooth { scroll-behavior: auto !important; }

/* 背景スクロール停止（position:fixed は使わない） */
html.no-scroll,
html.no-scroll body { overflow: hidden !important; }
/* ======================================================================= */

.btn-open {
/*  display: inline-block;
  padding: .7em 1.2em;
  background: #22b573;
  color: #fff;
  text-decoration: none;
  border-radius: .5em;
  font-weight: 700;
*/
}
.btn-open:hover { opacity: .9; }

.modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; opacity: 0;
  transition: opacity var(--fade-ms) var(--easing),
              visibility var(--fade-ms) var(--easing);
  z-index: 10000;
}
.modal.is-open { visibility: visible; opacity: 1; }

.modal__overlay { position: absolute; inset: 0; background: var(--overlay-color); }

.modal__content {
  position: relative;
  width: var(--modal-width);
  height: var(--modal-height);
  background: #fff;
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  overflow: auto;                         /* 中だけスクロール */
  overscroll-behavior: contain;           /* 端で背面に連鎖しない */
  -webkit-overflow-scrolling: touch;      /* iOS慣性 */
  touch-action: auto;                     /* モーダル内のパン操作を許可 */
  transform: scale(var(--enter-scale));
  opacity: 0;
  transition: transform var(--fade-ms) var(--easing), opacity var(--fade-ms) var(--easing);}

.modal.is-open .modal__content { transform: scale(1); opacity: 1; }

.modal__header {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 30px 30px 20px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.modal__title { margin: 0; font-size: 1.4em; font-weight: 700; letter-spacing:0;}

.modal__close {
  position:absolute;
  top:0;
  right:0;
  appearance: none;
  border: none; background: transparent;
  width: 40px; height: 40px;
  border-radius: 8px;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  color: var(--close-color);
}
.modal__close:hover { background: #f5f5f5; color: var(--close-color-hover); }

.modal__body { padding: 30px; line-height: 1.9; }

.container { padding: 48px 20px 120px; max-width: 960px; margin: 0 auto; }
.demo-spacer { height: 1200px; background: repeating-linear-gradient(180deg,#fafafa 0 40px,#f3f3f3 40px 80px); border: 1px solid #eee; }

/* ===== 追加機能：同意チェック→ボタン有効化（レイアウト不変で追加） ===== */
.gate {
  margin: 12px 0 8px;
  padding: 12px 12px;
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 10px;
  text-align:center;
}
.gate__row {
  display: flex;
  align-items: center;
  justify-content:center;
  gap: 10px;
  margin-bottom:10px;
}
.gate__label {
  user-select: none;
  cursor: pointer;
}
.gate__note {
  margin: 8px 0 14px;
  font-size: 14px;
  color: #666;
}

/* ボタン（a要素）。未同意＝無効（グレー・ホバー無効・クリック不可） */
.gate__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin:0 auto;
  padding: 12px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  color: #fff;
  background: #c9c9c9;           /* 無効：グレー */
  pointer-events: none;          /* クリック不可（ポインタ） */
  cursor: not-allowed;
  border: none;
  outline: none;
  transition: background .2s ease, transform .05s ease, filter .2s ease;
	font-size:1.3em;
	line-height:1em;
	text-align:center;
}
.gate__cta:focus {
  outline: none;
}
.gate form {
  display: flex;
  justify-content: center; /* 横方向中央 */
  margin-top: 12px;        /* 上に少し余白（任意） */
}
.gate__cta[aria-disabled="true"]:hover { filter: none; }

/* 有効化された状態（同意チェックON） */
.gate__cta.is-enabled {
  background: #1976d2;          /* ブルー */
  pointer-events: auto;          /* クリック可 */
  cursor: pointer;
}
.gate__cta.is-enabled:hover { filter: brightness(0.95); }
.gate__cta.is-enabled:active { transform: translateY(1px); }