@charset "utf-8";

/* ============================================
   Cookie同意バナー
   日本語サイト（layout.css）とグローバルサイト（global.css）の
   両方で読み込まれる。どちらの CSS にも依存しない自己完結スタイル。

   - 文字サイズは px 固定。rem は html の基準サイズが
     日本語サイト（14px）とグローバル（16px）で異なるため使わない。
   - 本文 20px 以上・コントラスト 4.5:1 以上・タッチターゲット 44px 以上。
   ============================================ */

.ashirase-cc[hidden],
.ashirase-cc__settings[hidden],
.ashirase-cc__btn[hidden] {
  display: none !important;
}

.ashirase-cc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100000; /* GTranslate ウィジェット（z-index: 2000）より前面 */
  box-sizing: border-box;
  /* モバイルの vh は「アドレスバーが隠れた状態」の高さを指すため、
     アドレスバー表示中は実際の可視領域をはみ出す。dvh に対応する
     ブラウザではそちらを使う（vh を先に書いて dvh で上書きする）。 */
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  /* スクロールチェイニングの抑止。
     既定値では、バナーの中身が収まっている（スクロールの余地が無い）ときや
     スクロール端に達したときに、ジェスチャが祖先＝ページ本体へ伝播し、
     「バナーを上下にスワイプすると裏の画面が動く」状態になる。
     contain にすると、バナー上のスクロールはバナー内で完結する。
     （ページ自体のスクロールは止めない。非モーダルなので本文は読めるべき） */
  overscroll-behavior: contain;
  padding: 20px 16px;
  /* iOS のホームインジケータ領域にボタンが潜り込まないようにする */
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: #fff;
  color: #111;
  border-top: 4px solid #004366;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
  font-size: 20px;
  line-height: 1.8;
  font-weight: 400;
  text-align: left;
}

.ashirase-cc *,
.ashirase-cc *::before,
.ashirase-cc *::after {
  box-sizing: border-box;
}

.ashirase-cc__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.ashirase-cc__heading {
  margin: 0 0 8px;
  padding: 0;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 700;
  color: inherit;
}

/* 見出しは JS がプログラム的にフォーカスするため、リングを明示する */
.ashirase-cc__heading:focus-visible,
.ashirase-cc__heading:focus,
.ashirase-cc__settings-title:focus-visible,
.ashirase-cc__settings-title:focus {
  outline: 3px solid #004366;
  outline-offset: 2px;
}

.ashirase-cc__body {
  margin: 0;
  font-size: 20px;
  line-height: 1.8;
}

.ashirase-cc__policy-link {
  color: #004366;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.ashirase-cc__policy-link:hover {
  color: #002a40;
}

.ashirase-cc__policy-link:focus-visible,
.ashirase-cc__policy-link:focus {
  outline: 3px solid #004366;
  outline-offset: 2px;
}

/* --- 設定パネル --- */

.ashirase-cc__settings {
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid #767676;
}

.ashirase-cc__settings-title {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 700;
}

.ashirase-cc__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ashirase-cc__item + .ashirase-cc__item {
  margin-top: 16px;
}

.ashirase-cc__label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 6px 0;
  cursor: pointer;
  font-weight: 700;
}

.ashirase-cc__label input[type="checkbox"] {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 6px 0 0;
  accent-color: #004366;
}

.ashirase-cc__label input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

.ashirase-cc__label-text {
  font-size: 20px;
  line-height: 1.6;
}

.ashirase-cc__desc {
  margin: 0 0 0 36px;
  font-size: 20px; /* 同意の判断材料になる説明文のため、本文と同じ下限を守る */
  line-height: 1.7;
}

/* --- ボタン --- */

.ashirase-cc__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 16px;
}

.ashirase-cc__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 44px;
  padding: 10px 24px;
  border: 2px solid #004366;
  border-radius: 6px;
  font-family: inherit;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.ashirase-cc__btn--primary {
  background: #004366; /* 白文字とのコントラスト 10.5:1 */
  color: #fff;
}

.ashirase-cc__btn--primary:hover {
  background: #002a40;
}

.ashirase-cc__btn--secondary {
  background: #fff;
  color: #004366;
}

.ashirase-cc__btn--secondary:hover {
  background: #e6eef2;
}

.ashirase-cc__btn:focus-visible,
.ashirase-cc__btn:focus {
  outline: 3px solid #004366;
  outline-offset: 3px;
}

/* --- 読み上げ専用のライブリージョン --- */

.ashirase-cc-status {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- フッターの「Cookie設定」リンク --- */

.ashirase-cc-settings-link {
  display: inline-block;
  min-height: 44px;
  padding: 10px 12px;
  background: none;
  border: 0;
  color: inherit;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* global.css の `.global-site :focus-visible` と詳細度が並ぶため、
   フッターの祖先クラスを足して確実に勝たせる。 */
.ashirase-cc-settings-link:focus-visible,
.ashirase-cc-settings-link:focus,
.global-site .ashirase-cc-settings-link:focus-visible,
.global-site .ashirase-cc-settings-link:focus,
.global-site .cookie-policy__settings-btn:focus-visible,
.global-site .cookie-policy__settings-btn:focus {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/* パスワード保護ページで <body> 直後に出る場合、固定ヘッダー
   （.header-box は position: fixed / z-index: 1500）の裏に入ってしまうため、
   前面に出す。 */
.ashirase-cc-settings-link-wrap {
  position: relative;
  z-index: 1600;
  padding: 16px;
  text-align: center;
}

/* ============================================
   背景反転（日本語サイトのみ）
   html.normal = 黒背景・白文字 / html.dark = 白背景・黒文字（既定）
   グローバルページは global.css が白背景に固定するため対象外。
   ============================================ */

html.normal .ashirase-cc:not(.ashirase-cc--global) {
  background: #000;
  color: #fff;
  border-top-color: #fff;
  box-shadow: 0 -4px 16px rgba(255, 255, 255, 0.25);
}

html.normal .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__policy-link {
  color: #fff;
}

/* 反転表示では #004366 のアウトラインが黒背景に対して 2.0:1 しかなく
   見えないため、フォーカスリングを白にする（見出しはバナーを開き直した
   ときにプログラム的にフォーカスされる） */
html.normal .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__heading:focus-visible,
html.normal .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__heading:focus,
html.normal .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__settings-title:focus-visible,
html.normal .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__settings-title:focus,
html.normal .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__policy-link:focus-visible,
html.normal .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__policy-link:focus {
  outline-color: #fff;
}

html.normal .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__settings {
  border-top-color: #fff;
}

html.normal .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__btn {
  border-color: #fff;
}

html.normal .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__btn--primary {
  background: #fff; /* 黒文字とのコントラスト 21:1 */
  color: #000;
}

html.normal .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__btn--primary:hover {
  background: #d9d9d9;
}

html.normal .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__btn--secondary {
  background: #000;
  color: #fff;
}

html.normal .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__btn--secondary:hover {
  background: #333;
}

html.normal .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__btn:focus-visible,
html.normal .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__btn:focus {
  outline-color: #fff;
}

html.normal .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__label input[type="checkbox"] {
  accent-color: #fff;
}

/* ============================================
   文字サイズ設定への追従（日本語サイトの body.fontL）
   fontS でも a11y の下限を割らないよう、縮小はしない。
   ============================================ */

body.fontL .ashirase-cc:not(.ashirase-cc--global) {
  font-size: 24px;
}

body.fontL .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__heading {
  font-size: 26px;
}

body.fontL .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__body,
body.fontL .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__label-text,
body.fontL .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__btn,
body.fontL .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__settings-title {
  font-size: 24px;
}

body.fontL .ashirase-cc:not(.ashirase-cc--global) .ashirase-cc__desc {
  font-size: 24px;
}

/* ============================================
   モバイルナビ（.header-sp-nav, z-index: 2000）が開いている間は
   バナーを隠す。バナーの z-index はGTranslateウィジェットより前面に
   出す必要があり 100000 にしているため、そのままではナビを覆う。
   ============================================ */

/* `:has()` 対応ブラウザ向け */
body:has(.header-sp-nav.is-open) .ashirase-cc,
body:has(.global-header__nav.is-open) .ashirase-cc {
  display: none;
}

/* `:has()` 非対応ブラウザ（Safari 15.3 以前 / Firefox 120 以前）向けの
   フォールバック。cookie-consent.js がナビの class 変化を監視して付与する。
   body ではなくバナー自身に付けるのは、body の class が common.js の
   文字サイズ切替で消えてしまうため。 */
.ashirase-cc--nav-open {
  display: none !important;
}

/* ============================================
   レスポンシブ
   ============================================ */

@media screen and (max-width: 896px) {
  .ashirase-cc {
    padding: 16px 12px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    max-height: 80vh;
    max-height: 80dvh;
  }

  .ashirase-cc__actions {
    flex-direction: column;
  }

  .ashirase-cc__btn {
    width: 100%;
  }
}

/* ============================================
   アニメーション抑制
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .ashirase-cc,
  .ashirase-cc__btn {
    transition: none !important;
  }
}