@charset "UTF-8";

/*
 * 個人情報の取り扱い 同意モジュール（モーダル）
 *
 * 背景の明暗に関わらず読めるよう、モーダル内で色を完結させている。
 * サイト側のCSSに依存しないので、他サイトへはこのファイルごとコピーするだけでよい。
 */

/*
 * 開くリンク。同意チェックの <label> の中に差し込まれる（linkify_acceptance）。
 * 文字の大きさと行間はラベルから継承させ、リンクらしさだけをここで足す。
 *
 * CF7のform内なので button 要素にしている
 * （aタグにするとhrefの扱いが要り、inputにすると送信扱いになりうる）。
 *
 * 文字色は設置先の背景しだいなので、濃い背景のサイトでは設置先のCSSで上書きする
 * （このサイトでは common.css / page.css の #cta-wrap 群）。
 * WebKitはフォーム部品で -webkit-text-fill-color を color より優先するので、そちらも指定する。
 */
.privacy-consent__trigger {
  display: inline;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  font: inherit;
  font-weight: 700;
  color: #0b64c8;
  -webkit-text-fill-color: #0b64c8;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.privacy-consent__trigger:hover {
  opacity: 0.75;
}

.privacy-consent__trigger:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ------------------------------------------------------------------
 * モーダル本体
 * ------------------------------------------------------------------ */

/*
 * dialog 自体は「画面全体を覆う中央寄せの器」にし、見た目のカードは __inner が持つ。
 *
 * dialog を直接カードにして margin:auto で中央に置く方法は使わない。
 * UA既定の height:fit-content と max-height の組み合わせでは auto余白の解決が
 * 状況によって変わり、実測で上160px/下0pxのように偏ることがある（下が見切れる）。
 * padding で余白、flexで中央寄せにすれば、余白は指定した値そのものになる。
 *
 * showModal() で開くと最前面レイヤーに載るため、
 * 祖先の overflow / transform / z-index には切られない。
 */
.privacy-consent-modal {
  position: fixed;
  inset: 0;
  width: auto;
  max-width: none;
  height: auto;
  max-height: none;
  margin: 0;
  padding: 24px 16px;
  border: none;
  background: transparent;
  overflow: hidden;
  color: #1d1d1d;
  font-family: var(--swl-font_family, sans-serif);

  display: flex;
  align-items: center;
  justify-content: center;
}

/* display を指定すると UA の dialog:not([open]){display:none} が効かなくなるので戻す */
.privacy-consent-modal:not([open]) {
  display: none;
}

.privacy-consent-modal::backdrop {
  background: rgba(0, 0, 0, 0.55);
}

/*
 * 見た目のカード。dialog の padding の内側に収まるので、
 * max-height:100% だけで画面からはみ出さない（実寸を書かない）。
 * カードが器より小さいぶん、dialog自身へのクリック＝背景クリックと判別できる。
 */
.privacy-consent-modal__inner {
  display: flex;
  flex-direction: column;
  width: min(680px, 100%);
  max-height: min(100%, 720px);
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  overflow: hidden;
}

.privacy-consent-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
  padding: 14px 16px;
  background: #f7f7f7;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.privacy-consent-modal__title {
  font-size: 15px;
  line-height: 1.5;
  font-weight: 700;
  color: #1d1d1d;
}

.privacy-consent-modal__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 4px;
  background: none;
  box-shadow: none;
  font-size: 22px;
  line-height: 1;
  color: #555;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.privacy-consent-modal__close:hover {
  background: rgba(0, 0, 0, 0.06);
}

.privacy-consent-modal__scroll {
  flex: 1 1 auto;
  min-height: 0;
  padding: 18px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}

.privacy-consent-modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  flex-shrink: 0;
  padding: 12px 16px;
  background: #f7f7f7;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.privacy-consent-modal__link {
  margin-right: auto;
  font-size: 12px;
  color: #0b64c8;
  text-decoration: underline;
}

.privacy-consent-modal__link:hover {
  opacity: 0.7;
}

.privacy-consent-modal__ok {
  padding: 8px 24px;
  border: none;
  border-radius: 4px;
  background: #1d1d1d;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.privacy-consent-modal__ok:hover {
  opacity: 0.85;
}

/* モーダルを開いている間、背面のページはスクロールさせない */
.privacy-consent-modal-open,
.privacy-consent-modal-open body {
  overflow: hidden;
}

/*
 * 本文（原本のマークアップをそのまま流し込む）。
 * SWELLの見出し装飾（下線バー・センタリング等）が入り込まないよう、
 * 疑似要素まで含めて打ち消してから組み直す。
 */
.privacy-consent__body {
  font-size: 13px;
  line-height: 1.9;
  color: #1d1d1d;
  text-align: left;
}

.privacy-consent__body h2,
.privacy-consent__body h3,
.privacy-consent__body h4 {
  margin: 20px 0 6px;
  padding: 0;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 700;
  color: #1d1d1d;
  text-align: left;
  background: none;
  border: none;
  box-shadow: none;
  counter-reset: none;
}

.privacy-consent__body h2::before,
.privacy-consent__body h2::after,
.privacy-consent__body h3::before,
.privacy-consent__body h3::after,
.privacy-consent__body h4::before,
.privacy-consent__body h4::after {
  content: none;
  display: none;
}

.privacy-consent__body > *:first-child {
  margin-top: 0;
}

.privacy-consent__body p {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.9;
}

.privacy-consent__body ul,
.privacy-consent__body ol {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

.privacy-consent__body li {
  margin: 0 0 2px;
  padding: 0;
  font-size: 13px;
  line-height: 1.9;
  list-style: none;
}

.privacy-consent__body li::before,
.privacy-consent__body li::marker {
  content: none;
}

.privacy-consent__body a {
  color: #0b64c8;
  text-decoration: underline;
  word-break: break-all;
}

.privacy-consent__body .privacy-contact-card {
  margin: 14px 0 0;
  padding: 12px 14px;
  background: #f7f7f7;
  border-radius: 4px;
}

.privacy-consent__body .card-title {
  display: block;
  font-weight: 700;
}

.privacy-consent__body > *:last-child {
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  /* SPは画面が狭いので余白を詰める。この padding がそのまま画面端との余白になる */
  .privacy-consent-modal {
    padding: 16px 12px;
  }

  .privacy-consent-modal__inner {
    width: 100%;
    max-height: 100%;
  }

  .privacy-consent-modal__head {
    padding: 12px 14px;
  }

  .privacy-consent-modal__title {
    font-size: 14px;
  }

  .privacy-consent-modal__scroll {
    padding: 16px 14px;
  }

  .privacy-consent-modal__foot {
    padding: 10px 14px;
  }
}