@charset "UTF-8";
/* ==========================================================================
   base.css — @font-face・要素既定・タイポグラフィ
   ========================================================================== */

/* --------------------------------------------------------------------------
   Webフォント（ローカル同梱・サブセット）
   ⚠️ OFL 1.1 の再配布義務により assets/fonts/OFL.txt を必ず同梱すること。
   ⚠️ Reserved Font Name 指定がある場合は font-family 名を変更すること（設計書 §11.4）。
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/noto-sans-jp-400.subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("../fonts/noto-sans-jp-500.subset.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("../fonts/zen-kaku-gothic-new-700.subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Document
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--ink);
  background-color: var(--surface);
  /* 日本語の折り返し */
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
  /* 下部固定バーぶんの余白。バー非表示時は 0 にする（responsive.css） */
  padding-bottom: calc(var(--h-bottombar) + env(safe-area-inset-bottom, 0px));
}

/* 横スクロールを構造的に禁止する */
html,
body {
  overflow-x: clip;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: var(--lh-heading);
}

p + p {
  margin-top: var(--sp-4);
}

strong, b {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Link
   -------------------------------------------------------------------------- */
a:where(:not([class])) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .2em;
}

a:where(:not([class])):hover {
  color: var(--accent-hover);
}

.is-dark a:where(:not([class])) {
  color: var(--accent-on-dark);
}

/* --------------------------------------------------------------------------
   Focus
   ⚠️ outline: none の単独使用を禁止する（設計書 §9.1）。
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* --------------------------------------------------------------------------
   アンカーのスクロール位置
   ⚠️ --anchor-offset は js/nav.js が実測値で更新する（設計書 §7.4）。
   -------------------------------------------------------------------------- */
[id] {
  scroll-margin-top: var(--anchor-offset);
}

/* --------------------------------------------------------------------------
   Utility（最小限）
   -------------------------------------------------------------------------- */
.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-nowrap {
  white-space: nowrap;
}

/* 本文へスキップ */
.u-skiplink {
  position: absolute;
  top: 0;
  left: 0;
  z-index: var(--z-toast);
  padding: var(--sp-3) var(--sp-5);
  background: var(--accent);
  color: #FFFFFF;
  font-weight: 700;
  transform: translateY(-120%);
}

.u-skiplink:focus-visible {
  transform: translateY(0);
}