/* =========================================================
   utilities.css … u-* / is-* / a11y
   ========================================================= */
@layer utilities {
  /* ---------- 改行の制御 ---------- */
  .u-ib {
    display: inline-block;
  }
  @media (max-width: 767px) {
    .u-pc { display: none; }
  }
  @media (min-width: 768px) {
    .u-sp { display: none; }
  }

  /* 絞り込み・ページ送りで隠した項目（assets/js/main.js が付け外し） */
  .is-hidden {
    display: none;
  }

  /* 文中のリンク */
  .u-link {
    color: var(--c-action-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  .u-link:hover {
    color: var(--c-action-primary-hover);
  }

  .u-text-center {
    text-align: center;
  }

  /* 見た目は隠して読み上げは残す */
  .u-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* ---------- 表示時の動き（html.js-motion のときだけ） ---------- */
  /* ふわっと出る：assets/js/main.js が画面に入ったら is-in を付ける */
  .js-motion .u-reveal {
    opacity: 0;
    transform: translateY(var(--sp-5));
    transition: opacity var(--dur-slow) ease, transform var(--dur-slow) ease;
  }
  .js-motion .u-reveal.is-in {
    opacity: 1;
    transform: none;
  }
  /* 横に開く（要所の写真だけ） */
  .js-motion .u-wipe {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.4s var(--ease-wipe);
  }
  .js-motion .u-wipe.is-in {
    clip-path: inset(0);
  }
  /* 読み込み時に下から出る（MV） */
  @keyframes u-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }
  .js-motion .u-rise {
    animation: u-rise 1s ease 0.3s both;
  }
}

@layer a11y {
  /* キーボード操作のときだけ出るフォーカス表示（全部品で共通） */
  :focus-visible {
    outline: 3px solid var(--c-action-primary);
    outline-offset: 3px;
  }
  .l-section--emphasis :focus-visible,
  .c-cta :focus-visible,
  .l-footer :focus-visible,
  .p-mv__media :focus-visible {
    outline-color: var(--c-text-invert);
  }

  /* 本文へ移動（header.php が出力） */
  .u-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    padding: var(--sp-2) var(--sp-4);
    background: var(--c-text);
    color: var(--c-text-invert);
  }
  .u-skip:focus {
    left: var(--sp-4);
    top: var(--sp-4);
  }

  /* 動きを減らす設定の人には、アニメーションを止める（!important はここだけ） */
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}