@charset "utf-8";

/* =====================================================
   UX強化（2026年9月追加）
   ヘッダーの追尾／スクロール演出／SPメニューの単独項目

   既存CSSを書き換えず、最後に読み込んで上書きする方針です。
   この1ファイルを外せば追加前の状態に戻ります。
===================================================== */

/* -----------------------------------------------------
   1. ヘッダーの追尾
   .site-header は元々 position:relative で、メガメニューの
   位置基準になっています。sticky も同じ役割を果たすため、
   メガメニューの表示位置は変わりません。
----------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 300;
  /* 追尾中に背面のコンテンツが透けないよう、外側にも地色を敷く */
  background-color: #fff;
  transition: box-shadow 0.3s ease;
}
.site-header.is-scrolled {
  box-shadow: 0 3px 10px rgba(74, 38, 21, 0.1);
}

/* スクロール後はヘッダーを縮め、本文の表示領域を確保する */
.site-header__inner {
  transition: height 0.3s ease;
}
.site-header.is-scrolled .site-header__inner {
  height: min(5.2vw, 94px);
}

@media screen and (max-width: 767px) {
  /* SPはハンバーガーが固定表示のため、高さは変えずに追尾のみ行う */
  .site-header.is-scrolled .site-header__inner {
    height: 17.8743vw;
  }
}

/* ページ内リンクの着地点が、追尾ヘッダーの下に隠れないようにする */
:target {
  scroll-margin-top: min(8vw, 150px);
}

/* -----------------------------------------------------
   2. SPハンバーガーメニューの単独項目
   下層を持たない項目（料金・オンライン診療）に使います。
   アコーディオンの dt と同じ体裁で、開閉アイコンだけ
   矢印に差し替えています。
----------------------------------------------------- */
@media screen and (max-width: 767px) {
  .globalMenu dl.single dt {
    display: block;
    padding: 4.83vw 0;
    width: 100%;
    font-size: 4.1vw;
    background-image: url(../../images/src/parts/arrow_brown.svg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 4.5vw auto;
  }
  .globalMenu dl.single dt a {
    display: block;
    width: 100%;
    font-weight: 400;
  }
}

/* -----------------------------------------------------
   3. スクロールに合わせた表示演出
   ux-fx.js が .js-reveal を付与し、画面に入った時点で
   .is-visible を追加します。JSが動かない環境では
   クラス自体が付かないため、内容は常に表示されます。
----------------------------------------------------- */
.js-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease;
}
.js-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* メインビジュアルの視差スクロール（PCのみ・JSが数値を入れる） */
.js-parallax {
  will-change: transform;
}

/* 動きを減らす設定の利用者には、演出を行わない */
@media (prefers-reduced-motion: reduce) {
  .site-header__inner,
  .site-header {
    transition: none;
  }
  .js-reveal,
  .js-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js-parallax {
    transform: none !important;
    opacity: 1 !important;
  }
}