@charset "utf-8";

/* ============================================
   Cookieポリシーページ

   日本語サイト（layout.css）とグローバルサイト（global.css）の
   どちらでも読み込まれるため、色は継承させ、寸法のみを定義する。
   ============================================ */

.cookie-policy {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px 48px;
  font-size: 20px;
  line-height: 1.8;
  text-align: left;
}

.cookie-policy__title {
  margin: 0 0 16px;
  font-size: 32px;
  line-height: 1.4;
  font-weight: 700;
}

.cookie-policy h2 {
  margin: 40px 0 12px;
  font-size: 24px;
  line-height: 1.5;
  font-weight: 700;
}

.cookie-policy p {
  margin: 0 0 16px;
  font-size: 20px;
  line-height: 1.8;
}

.cookie-policy__updated {
  font-size: 18px;
}

.cookie-policy__links {
  margin: 0;
  padding: 0 0 0 24px;
}

.cookie-policy__links li {
  margin-bottom: 8px;
  font-size: 20px;
  line-height: 1.8;
}

/* --- Cookie一覧 ---
   表ではなく見出し＋段落で組む。理由は
   functions/cookie-policy.php の ashirase_cookie_policy_list() を参照。
   横スクロールを作らないことが要件なので、幅を固定する指定は置かない。 */

.cookie-policy__cat {
  margin: 32px 0 12px;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 700;
}

.cookie-policy__item {
  margin: 0 0 16px;
  padding: 16px;
  border: 1px solid currentColor;
  border-radius: 6px;
}

.cookie-policy__item-name {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 700;
  /* wordpress_logged_in_ のような長い名称でも横に溢れさせない */
  word-break: normal;
  overflow-wrap: anywhere;
}

/* 1項目 = 1段落。中身はテキストノード1つだけで、span や b を入れてはいけない
   （入れると値がアクセシビリティツリーから落ちる。PHP側のコメント参照）。
   そのため「ラベルを太字にする」スタイルはここに置けない。
   要素セレクタ付き（p.）にしているのは `.cookie-policy p` と詳細度を
   揃えて margin を上書きするため。font-size / line-height はそちらが持つ。 */
p.cookie-policy__field {
  margin: 8px 0 0;
  word-break: normal;
  overflow-wrap: anywhere;
}

p.cookie-policy__field:first-of-type {
  margin-top: 0;
}

/* --- 設定変更ボタン --- */

.cookie-policy__settings-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 24px;
  border: 2px solid currentColor;
  border-radius: 6px;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
  cursor: pointer;
}

.cookie-policy__settings-btn:focus-visible,
.cookie-policy__settings-btn:focus {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

/* ============================================
   文字サイズ設定への追従（日本語サイトの body.fontL）

   日本語サイトは html{font-size:14px} + body.fontS/M/L で本文を拡大する。
   ここを px 固定のままにすると、「文字大」を選んでもこのページだけ
   拡大されない。fontS では a11y の下限を割らないよう縮小はしない。
   グローバルサイトは .global-site が 20px 固定のため対象外。
   ============================================ */

body.fontL .cookie-policy {
  font-size: 24px;
}

body.fontL .cookie-policy__title {
  font-size: 36px;
}

body.fontL .cookie-policy h2 {
  font-size: 28px;
}

body.fontL .cookie-policy__cat {
  font-size: 26px;
}

body.fontL .cookie-policy p,
body.fontL .cookie-policy__links li,
body.fontL .cookie-policy__item-name,
body.fontL .cookie-policy__settings-btn {
  font-size: 24px;
}

body.fontL .cookie-policy__updated {
  font-size: 22px;
}

@media screen and (max-width: 896px) {
  /* 上部の固定UIとの重なりを避ける。
     モバイルでは固定ヘッダー（0〜65px）＋「背景を選択／文字サイズ」の帯
     （.site-edit-wrap: top 65px・高さ約54px）で下端が約119pxになるのに対し、
     layout.css / layout2.css の #container は margin-top: 112px しか取っておらず、
     本文が帯の下に潜り込む。デスクトップ（150px vs 151px）でも同じ関係だが、
     パンくず等の余白に吸収されて表面化しない。
     根本原因は #container 側にあるが、そこを触ると全ページのレイアウトが
     動くため、ここではこのページ分だけを退避させる。 */
  .cookie-policy {
    padding: 24px 12px 32px;
  }

  .cookie-policy__settings-btn {
    width: 100%;
  }
}