/* ==========================================================================
   base.css — リセットと要素デフォルト（全ページ共通）
   --------------------------------------------------------------------------
   corporate.css と product-lp.css に重複していた記述を集約したもの。
   ページ固有の値（背景色・文字色・字送り）はここには書かない。

   読み込み順: tokens.css → base.css → ページ固有CSS
   ========================================================================== */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-ja);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; }

/* --- ハンバーガーボタンの形状 -----------------------------------------------
   線の太さと色はページ側で上書きする。開閉時の変形はここで共通化。
   -------------------------------------------------------------------------- */
.menu-btn span {
  position: absolute;
  left: 13px;
  width: 18px;
}
.menu-btn span:nth-child(1) { top: 15px; }
.menu-btn span:nth-child(2) { top: 21px; }
.menu-btn span:nth-child(3) { top: 27px; }
.mobile-open .menu-btn span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.mobile-open .menu-btn span:nth-child(2) { opacity: 0; }
.mobile-open .menu-btn span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* --- モーション抑制 ---------------------------------------------------------
   CLAUDE.md 5章の必須対応。!important はここだけ許容する
   （ユーザー設定を確実に優先させるため）。
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}