/* base.css — リセット＋ベーススタイル（tokens.css の変数を参照）
   ※ 余白・サイズ・色は数値直書きせず var() を使う */

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip; /* はみ出す装飾をビューポート端でクリップ（sticky を壊さない）*/
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: var(--space-56); /* ページ内リンク到着位置の余白 */
}

/* 比率縮小：基準幅以下は html の font-size を vw 連動にし、rem 参照の全寸法を一括で縮める。
   max-width の値は tokens.css の --scale-viewport-base と一致させること。
   1200px 以下（1カラム＋ハンバーガーメニュー）では縮小を解除する */
@media (min-width: 1201px) and (max-width: 1440px) {
  html { font-size: calc(100vw / var(--scale-viewport-base) * var(--scale-rem-base)); }
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-body);
  line-height: var(--line-height-loose);
  color: var(--color-text);
  background: var(--color-white);
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-16);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
h5 { font-size: var(--font-size-h5); }
h6 { font-size: var(--font-size-h6); }

p { margin: 0 0 var(--space-16); }

a { color: var(--color-primary); }

/* 電話リンクは本文と同じ見た目（iPhone で青く目立たせない） */
a[href^="tel:"] {
  color: inherit;
  text-decoration: none;
}

.text-xl {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}
.text-large {
  font-size: var(--font-size-large);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
}
.lead { color: var(--color-gray-dark); }

/* ==========================================================================
   モーション共通（assets/js/motion.js と対）
   - JS が有効なときだけ .js が付き、出現前の非表示状態になる（JS 無効時は常に表示）
   - prefers-reduced-motion では出現・パララックス・マーキーをすべて無効化
   ========================================================================== */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-offset));
  transition:
    opacity var(--duration-reveal) var(--ease-out),
    transform var(--duration-reveal) var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* 出現時に写真がゆっくり縮む（横長写真・記事画像）*/
.js [data-reveal-zoom] img {
  transform: scale(var(--hover-zoom));
  transition: transform calc(var(--duration-slow) * 2) var(--ease-out);
}

.js [data-reveal-zoom].is-visible img {
  transform: none;
}

/* パララックス（JS が --parallax-y を更新）*/
.js [data-parallax] {
  transform: translateY(var(--parallax-y, 0));
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js [data-reveal],
  .js [data-reveal-zoom] img,
  .js [data-parallax] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}