/* 正本の site.css を変更せず、WordPress とメニューだけ補正する。 */
/* sticky ヘッダーは元から top: 0。操作バー削除によるオフセットは不要。 */
body.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 0px); }
body.admin-bar [id] { scroll-margin-top: calc(var(--header-h) + var(--wp-admin--admin-bar--height, 0px)); }
/* ページの表題 (h1) の下も節と節の間と同じ余白 (2026-10-27 田島さん「Privacy Policyのタイトル下も節同士の余白と同じにして」)。h1 の下の余白 (0.5em) とは打ち消し合い、大きいほうが効く */
/* 節と節の間 (表題の下も同じ) は画面幅で変える。--space-2xl (64〜72px) のままだとスマホで本文に対して広く見えるので (2026-10-27 田島さん「画面幅によって余白が広く見える場合は調整して」)、
   375px で 48px、幅が広がるにつれて増やし、1125px 以上は 72px (これまでの PC と同じ) にする */
.policy-content { --policy-gap: clamp(3rem, 2.25rem + 3.2vw, 4.5rem); margin-top: var(--policy-gap); }
/* ポリシー本文は固定ページの本文 (h2〜h4・リスト)。ワイヤーにこのページは無いのでテーマだけで持つ。 */
/* 余白は3段にして境目を見せる (2026-10-27 田島さん「各ブロックの境目がわかりやすいように余白のメリハリをつけて。同じブロックは近く、違うブロック同士は離す」)。
   同じ節の中の段落とリストは 0.75em、小見出し (h4) の上は --space-l、節見出し (h3) の上は --policy-gap。見出しの下は本文に寄せる */
.policy-content :is(p, ul, ol) { margin: 0 0 0.75em; }
.policy-content li + li { margin-top: 0.25em; }
.policy-content h3 { margin: var(--policy-gap) 0 0.4em; }
/* 中国語版は冒頭の「英語版が優先」の一文のあとに表題 (h2) が来るので、その間も離す */
.policy-content h2 { margin: var(--space-l) 0 0.4em; }
.policy-content > :first-child { margin-top: 0; }
.policy-content h4 { margin: var(--space-l) 0 0.3em; }
.policy-content :is(ul, ol) { padding-inline-start: 1.5em; }
/* 本文の長い URL (Microsoft のプライバシーの URL など) がスマホ幅で横にはみ出すので、途中で折り返す */
.policy-content a { overflow-wrap: anywhere; }
/* 段落だけ --measure で折り返すとリストと行末がそろわないので、本文の幅いっぱいにする。 */
.policy-content p { max-width: none; }
@media (max-width: 1199px) {
  .site-header .wrap { position: relative; }
  .gnav {
    display: flex;
    flex-wrap: wrap;
    position: absolute;
    top: 100%;
    inset-inline: 0;
    padding: var(--space-s) var(--gutter);
    margin: 0;
    background: rgba(255,255,255,0.96);
    border-top: var(--border-width) solid var(--color-border);
    gap: var(--space-s) var(--space-m);
  }
  .has-js .gnav { display: none; }
  .has-js .gnav.is-open { display: flex; }
  .has-js .menu-btn { display: inline-flex; }
  .menu-btn { display: none; }
  /* 開いたメニューはヘッダーと同じ透け方にし、ヘッダーの赤い下線をパネルの下へ移す。
     下のページは暗くして境目を見せる (2026-10-27 田島さん指示)。暗い面を押すと body が押されたことになり、site.js がメニューを閉じる */
  .site-header:has(.gnav.is-open) { box-shadow: none; }
  .has-js .gnav.is-open { box-shadow: 0 3px 0 var(--color-header-rule); }
  body:has(.gnav.is-open)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0,0,0,0.4);
  }
}
/* スマホは1項目1行の縦1列。横に流して折り返すと押せる範囲が小さく順番も追いにくい (2026-10-27 田島さん指示)。
   行の高さは 48px、項目の間に線。項目が増えて画面に収まらないときはパネルの中でスクロールする */
@media (max-width: 767px) {
  .gnav {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding-block: 0;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  .gnav a {
    display: flex;
    align-items: center;
    min-height: 48px;
    border-bottom: var(--border-width) solid var(--color-border);
    font-size: var(--step-0);
    color: var(--color-text);
    white-space: normal;
  }
  .gnav a:last-child { border-bottom: 0; }
}
@media (max-width: 1199px) {
  html:not(.has-js) .site-header .wrap { height: auto; flex-wrap: wrap; }
  html:not(.has-js) .gnav { position: static; order: 1; width: 100%; }
}
