@charset "UTF-8";
/*
  top-inp.css
  トップページ専用（テーマの header.php で is_front_page() のときだけ読み込む）。
  内容は test-pageview.php で検証した inp-test.css と同じ。
  - スマホのハンバーガーメニューの INP 改善（main-inp.js とセットで使う）
  - レイアウトのずれ（CLS）対策
*/

/* ---------------------------------------------
   ハンバーガーメニュー
   - 高さは JS で毎回計算せず CSS で決める
     （--inp-header-h は main-inp.js が ResizeObserver で .ham_nav に設定）
   - mCustomScrollbar をやめてネイティブスクロール
   - 閉じている間は visibility:hidden で描画対象から外す
   - アニメーションは opacity と transform のみ（margin-top は動かさない）
   - contain でメニュー内のレイアウト・描画をページ本体から切り離す
--------------------------------------------- */
html .header .cont_in .ham_nav {
  height: calc(100vh - var(--inp-header-h, 110px));
  height: calc(100dvh - var(--inp-header-h, 110px));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  contain: content;
  margin-top: 0;
  visibility: hidden;
  transform: translateY(2rem);
  transition: opacity .3s, transform .3s, visibility 0s linear .3s;
}

html .header .cont_in .ham_nav.active {
  margin-top: 0;
  visibility: visible;
  transform: none;
  transition: opacity .3s, transform .3s, visibility 0s;
}

html .header .cont_in .ham_nav .ham_nav_in {
  height: auto;
}

/* ---------------------------------------------
   メニュー内・フッターのアコーディオン（.sp_footer_pull）
   jQuery の animate({height:"toggle"}) をやめ、クラスの切り替えで開閉する
--------------------------------------------- */
@media screen and (max-width: 1200px) {
  .footer_nav .item .list.is-open > li {
    display: block !important;
  }
}

/* ---------------------------------------------
   CLS 改善
--------------------------------------------- */
/* スマホ: #wrap（112px）と .main_v2（110px）の上マージンが body の外へ突き抜けて相殺され、
   最終的に body の上端が 112px の位置になる。本文が届く前は body の上端が 0 なので、
   本文が描画された瞬間に body ごと 112px 下へずれていた。
   112px を最初から body 自身のマージンとして持たせ、子のマージンは 0 にする。
   最終的な配置（body・#wrap・.main_v2 とも上端 112px）は元と同じ */
@media screen and (max-width: 768px) {
  html body {
    margin-top: 112px;
  }

  html #wrap,
  html .main_v2 {
    margin-top: 0;
  }
}

/* スマホ: オンラインストアのバナー（new_bnr02.png 878×450）。
   width:auto 指定で HTML の width/height が効かず、画像が届くまで高さが決まらない
   → 届いた瞬間に下の要素が押し下げられていた。
   表示サイズは元と同じ（幅 90%）のまま、縦横比で高さを先に確保する */
@media screen and (max-width: 768px) {
  html #top__new-bnr .cont_in li a img {
    width: 90%;
    height: auto;
    aspect-ratio: 878 / 450;
  }
}