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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  /* 固定（sticky）ヘッダー分だけアンカー着地位置を下げ、タイトルの見切れを防ぐ。
     ハッシュ遷移・ページ読込時ハッシュ・scrollIntoView すべてに効く。
     ヘッダー高さ（--header-height）は PC/SP 共通 64px。 */
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

/* 相談投稿・体験談投稿ページはヘッダーが追従しない（layout-header-static）ため、
   余計な余白を作らないようオフセットを最小化する。 */
html:has(body.layout-header-static) {
  scroll-padding-top: var(--space-4);
}

/* SP含む全画面で横はみ出しによる左右ぶれを抑止する。
   `clip` は scroll container を作らないため、site-header の position: sticky を壊さない。 */
html,
body {
  overflow-x: clip;
}

@supports not (overflow-x: clip) {
  html,
  body {
    overflow-x: hidden;
  }
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text-primary);
  background-color: var(--color-base-2);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-main);
  text-decoration: none;
  transition: opacity var(--transition-fast);
}

a:hover {
  opacity: 0.8;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* WordPressデフォルトスタイルの上書き */
.wp-block-group {
  margin: 0;
}

/* スクリーンリーダー専用（ラベル等） */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   表示切替ユーティリティ（グローバル）
   - PC（769px以上）でのみ表示される改行 / インライン要素
   - モバイル（768px以下）では表示されない
   ブレークポイントは theme の `--breakpoint-md` と同じ 768px を採用。

   使い方:
     <h1>前半<span class="pc-kaigyo"><br></span>後半</h1>
     → PCでは「前半<改行>後半」、モバイルでは「前半後半」
   ========================================================================== */
.pc-kaigyo,
.u-pc-only {
  display: none;
}
.sp-only,
.u-sp-only {
  display: inline;
}

@media (min-width: 769px) {
  .pc-kaigyo,
  .u-pc-only {
    display: inline;
  }
  .sp-only,
  .u-sp-only {
    display: none;
  }
}

/* ============================================================
   タグ順次フォーカス演出（js-tag-reveal）
   IntersectionObserver でコンテナがビューに入った瞬間に
   子のタグリンク（.is-tag-item）を1個ずつフェードイン＋パルスする。
   JS が is-tag-armed を付けて初期を隠し、is-tag-revealed で発火。
   JS 無効時・prefers-reduced-motion 時は即表示（演出なし）。
   ============================================================ */

@keyframes wkwTagFocusIn {
  0%   { opacity: 0; transform: translateY(8px) scale(0.96); box-shadow: none; }
  55%  { opacity: 1; transform: translateY(0) scale(1.09); box-shadow: var(--shadow-md); }
  100% { opacity: 1; transform: translateY(0) scale(1); box-shadow: none; }
}

/* JS が付与するまで非表示にしない（JS 無効でも表示される安全設計） */
.js-tag-reveal.is-tag-armed .is-tag-item {
  opacity: 0;
}

.js-tag-reveal.is-tag-revealed .is-tag-item {
  animation: wkwTagFocusIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  .js-tag-reveal.is-tag-armed .is-tag-item {
    opacity: 1;
  }
  .js-tag-reveal.is-tag-revealed .is-tag-item {
    animation: none;
    opacity: 1;
  }
}