@charset "UTF-8";
/* =========================================================
   WWE — ベース
   AFFINGER の CSS を停止しているため、ブラウザ標準スタイルだけが残る。
   必要な要素にだけ明示的に当てる最小限の記述。

   ⚠️ リセットCSSは書かない。
   ⚠️ グローバルセレクタ（body / a / h2 単体）に当てない。
      管理バーやプラグインの出力にまで影響するため .wwe-body で絞る。

   ⚠️⚠️ 要素セレクタは必ず :where() で包む（2026-07-30 の不具合対応）。
      `.wwe-body h1`（詳細度 0,1,1）は `.wwe-hero__title`（0,1,0）より強いため、
      素で書くとコンポーネント側の color / line-height / margin が
      「書いてあるのに効かない」状態になる（FVの見出しがネイビー地にネイビーで消えた）。
      `.wwe-body :where(h1)` にすると詳細度が (0,1,0) に下がり、
      あとから読み込む components / layout / page-*.css の単一クラスが必ず勝つ。
      ここは既定値の置き場所であって、勝ちにいく場所ではない。
   ========================================================= */

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

html { -webkit-text-size-adjust: 100%; }

.wwe-body {
  margin: 0;
  font-family: var(--wwe-font);
  font-size: var(--wwe-fs-body);
  font-weight: var(--wwe-fw-normal);
  line-height: var(--wwe-lh-body);
  letter-spacing: var(--wwe-ls-body);
  color: var(--wwe-text-body);
  background: var(--wwe-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; /* 横スクロールを絶対に出さない */
  /* 区切りの無い長い英字（住所など）も途中で折り返し、右へはみ出して切れないようにする（2026-11-11）。
     和文はもともとどこでも折り返せるので、ふつうの見た目は変わらない（13 ページ × 320〜1440px で部品の位置が同じ）。
     break-word ではグリッドやフレックスの中の文字が列を押し広げるので anywhere にする */
  overflow-wrap: anywhere;
}

.wwe-body :where(img, svg, video) {
  max-width: 100%;
  height: auto;
  display: block;
}

.wwe-body :where(a) {
  color: inherit;
  text-decoration: none;
  transition: color var(--wwe-dur) var(--wwe-ease),
              background-color var(--wwe-dur) var(--wwe-ease),
              border-color var(--wwe-dur) var(--wwe-ease),
              opacity var(--wwe-dur) var(--wwe-ease);
}

.wwe-body :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wwe-body :where(p, dl, dd, figure, blockquote) {
  margin: 0;
}

.wwe-body :where(h1, h2, h3, h4) {
  margin: 0;
  font-weight: var(--wwe-fw-bold);
  line-height: var(--wwe-lh-head);
  letter-spacing: var(--wwe-ls-head);
  color: var(--wwe-text);
}

.wwe-body :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

.wwe-body :where(button) { cursor: pointer; background: none; border: 0; padding: 0; }

.wwe-body :where(table) { border-collapse: collapse; }

/* ---- フォーカスリング ----
   outline: none は禁止。上書きして見やすくする。 */
.wwe-body :focus-visible {
  outline: 3px solid var(--wwe-gold);
  outline-offset: 2px;
  border-radius: 2px;
}
/* ネイビー地の上では白のリングにする（コントラスト確保） */
.wwe-navy :focus-visible,
.wwe-body .wwe-footer :focus-visible {
  outline-color: var(--wwe-white);
}

/* ---- スクリーンリーダー専用 ---- */
.wwe-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- スキップリンク ---- */
.wwe-skip {
  position: absolute;
  left: 0; top: -100%;
  z-index: 999;
  padding: 12px 20px;
  background: var(--wwe-navy);
  color: var(--wwe-on-navy);
}
.wwe-skip:focus { top: 0; }

/* ---- スクロール表示アニメーション ----
   IntersectionObserver で .is-visible を付与する。
   JS が動かない場合でも内容が見えるよう、
   .wwe-js クラス（JSが有効なときだけ付く）を前提にする。 */
.wwe-js [data-animate] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s var(--wwe-ease), transform .7s var(--wwe-ease);
  will-change: opacity, transform;
}
.wwe-js [data-animate].is-visible {
  opacity: 1;
  transform: none;
}

/* 動きを減らす設定の利用者にはアニメーションを適用しない。
   30〜60代のターゲットには動きを抑えたい方が一定数いる。 */
@media (prefers-reduced-motion: reduce) {
  .wwe-js [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .wwe-body * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- 画像プレースホルダー ----
   写真が未入手のうちはレイアウトを崩さず枠だけ出す。 */
.wwe-ph {
  display: grid;
  place-items: center;
  min-height: 200px;
  background: var(--wwe-bg-mid);
  border: 2px dashed var(--wwe-line);
  border-radius: var(--wwe-radius-card);
  color: var(--wwe-text-mute);
  text-align: center;
  padding: 24px;
}
.wwe-ph__label {
  font-size: var(--wwe-fs-note);
  line-height: 1.6;
}
.wwe-ph__label small {
  font-size: var(--wwe-fs-small);
  opacity: .8;
}