/* 現行サイトの index.css のうち、ビルド済みCSSに含まれない土台部分だけを移したもの */

:root {
  --deep-charcoal: #1a1a1a;
  --warm-ivory: #f5f1e8;
  --antique-gold: #c9a961;
  --deep-burgundy: #5c1f1f;
}

body {
  background: var(--deep-charcoal);
  font-family: "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "Noto Serif JP", "MS PMincho", serif;
  -webkit-font-smoothing: antialiased;
}

/* スクロールで浮かび上がる演出。React版と同じ動き。 */
.fade-in, .scale-in {
  opacity: 0;
  transition: opacity .9s ease, transform .9s ease;
}
.fade-in  { transform: translateY(24px); }
.scale-in { transform: scale(.96); }
.fade-in.visible, .scale-in.visible { opacity: 1; transform: none; }

/* 動きを控えたい設定の人には出さない */
@media (prefers-reduced-motion: reduce) {
  .fade-in, .scale-in { opacity: 1; transform: none; transition: none; }
}

/* ヘッダーの Services ドロップダウン
   ビルド済みCSSには group-hover の opacity/pointer-events が入っていない
   （React版はホバーではなくJSで開閉していたため）ので、ここで用意する。 */
.pianoma-dropdown { position: relative; }
.pianoma-dropdown > .pianoma-dropdown-menu {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity .15s ease, transform .15s ease;
}
.pianoma-dropdown:hover > .pianoma-dropdown-menu,
.pianoma-dropdown:focus-within > .pianoma-dropdown-menu,
.pianoma-dropdown.is-open > .pianoma-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.pianoma-dropdown:hover > button svg,
.pianoma-dropdown.is-open > button svg { transform: rotate(180deg); }
.pianoma-dropdown > button svg { transition: transform .2s ease; }

/* #about や #services へ飛んだとき、固定ヘッダーの下に隠れないようにする */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
section[id] { scroll-margin-top: 88px; }