@charset "utf-8";

/* =========================================================
   正直屋 総合サイト 共通ヘッダー / ドロワー
   Figma: 総合給湯器_リニューアル_2 (1920px基準)
   Figmaのpx値 ÷ 16 = em。ルートfont-sizeが1280px以下で比例縮小する。
   ========================================================= */

/* ドロワーを開くと html に overflow:hidden を付けてページを止める。
   このときスクロールバーが消えて表示領域が広がり、ページ全体と
   画面に固定している要素（ハンバーガー・固定フッター）が
   スクロールバーの幅ぶん右にずれる（実測15px）。

   scrollbar-gutter で「バーの居場所」を常に確保しておけば、
   バーが出ていてもいなくても幅が変わらないのでずれない。
   JSで padding を足して打ち消す手もあるが、固定要素それぞれに
   同じ補正が要るうえ、後から固定要素を足すたびに漏れる。

   対応していないブラウザ（Safari 18.1以前など）では今までどおり。
   ただしスマホは常に重なる形のバーなので、そもそもずれない。 */
:root {
  scrollbar-gutter: stable;
}

/* Figmaの寸法はborder-box前提（例: バー高さ98pxにpadding 14pxが含まれる）。
   既存サイトに全体リセットが無いので、この配下だけ確実にborder-boxにする。
   :where() で詳細度を0に保つ。 */
:where(#siteHeader, #siteDrawer),
:where(#siteHeader, #siteDrawer) *,
:where(#siteHeader, #siteDrawer) *::before,
:where(#siteHeader, #siteDrawer) *::after {
  box-sizing: border-box;
}

/* 白い帯の高さ。ヘッダーとドロワーの見出し帯で共有する。
   ヘッダーは #siteHeader の font-size(= min(16px, 1.15vw)) に対する 6.125em だが、
   ドロワーは font-size を16px固定にして vw可変から切り離してあるので em では揃えられない。
   6.125 × 1.15vw = 7.04375vw を上限98pxでクランプした値を両方から参照する。 */
:root { --hdr-bar-h: min(98px, 7.04375vw); }

#siteHeader {
  --c-navy: #182e78;
  --c-line: #e1e8f6;
  --c-red: #d2002f;
  --c-blue: #2d73d5;
  --c-green: #13b919;
  --c-sub: #868686;
  --c-note: #6d6d6d;
  --c-drawer-bg: #f5f7fb;

  /* 1280px以上はFigma実寸(16px)。以下は比例縮小 */
  /* ナビの中身(1201px) ＋ 左右のハンバーガー用の余白(90px×2) ＝ 86.31em が
     必ず画面幅に収まるように係数を決めてある（100 / 86.31 ≒ 1.15）。
     これより大きい係数だと、狭い画面でナビの右端がハンバーガーの下に潜り込む。 */
  font-size: min(16px, 1.15vw);
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  position: sticky;
  /* 帯の高さ(98px)ぶん上にずらして貼り付ける。
     こうするとスクロールで白い帯だけが自然に上へ抜け、青いナビが画面上端に残る。
     JSでクラスを付け替えて高さを0にする方式だと再レイアウトが一気に走ってガタつくが、
     これはブラウザ本来のスクロール追従なので引っかからない。SPでは 0 に戻す。 */
  inset-block-start: -6.125em;
  z-index: 1000;
  background: #fff;

  & :focus-visible { outline: 3px solid #ffb400; outline-offset: 2px; }
}

/* リセットは必ず詳細度0で書く。
   `#siteHeader :where(a)` のように書くと #siteHeader のぶんで (1,0,0) になり、
   後続の .hdr__nav-link { color:#fff } (0,1,0) に勝ってしまう。
   実際それで html { color:#282828 } が継承され、ナビとボタンの文字が黒くなっていた。 */
:where(#siteHeader, #siteDrawer) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(#siteHeader, #siteDrawer) :where(a) { color: inherit; text-decoration: none; }

/* 既存サイトに a:hover { text-decoration: underline } 系があり、詳細度0のリセットでは勝てない。
   ヘッダーとドロワーの中では状態を問わず下線を出さないので、ID込みの詳細度で明示的に打ち消す。 */
:is(#siteHeader, #siteDrawer) :is(a, a:hover, a:focus, a:active, a:visited) { text-decoration: none; }
:where(#siteHeader, #siteDrawer) :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(#siteHeader, #siteDrawer) :where(img, svg) { display: block; }

/* ---------- ヘッダーバー (Figma 1920x98) ---------- */
.hdr__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  block-size: var(--hdr-bar-h);   /* 98px。ドロワーの見出し帯と共有 */
  padding: 0.875em 1em;         /* 14px 16px */
  background: #fff;
}

.hdr__logos {
  display: flex;
  align-items: center;
  gap: 1.2851em;                /* 20.562px */
  block-size: 100%;
}
.hdr__logo--edion    { inline-size: 8.9498em; block-size: 3.6666em; }  /* 143.197 x 58.666 */
.hdr__logo-link      { display: block; block-size: 100%; }
.hdr__logo--shojikiya{ block-size: 100%; inline-size: auto; aspect-ratio: 176.2419 / 80.7775; }

.hdr__cta {
  display: flex;
  align-items: center;
  gap: 1em;                     /* 16px */
  block-size: 100%;
  /* ハンバーガーの箱幅(5.625em)から、ボタン同士の間隔(1em)を引く。
     箱幅ぶんまるごと空けると、箱の中で中身が中央寄せになっている
     ぶん（片側 約21px）が上乗せされ、LINEボタンとの間だけ
     36pxも空いて見えてしまう（他のボタン同士は16px）。
     ここまで詰めると LINEボタンの右端が箱の左端にちょうど接する。
     残る21pxは箱の内側なので、これ以上詰めるとボタンが白い箱に潜る。 */
  padding-inline-end: 4.625em;
}

/* --- 電話ブロック (287.139px) --- */
.hdr__tel { inline-size: 17.9462em; }
.hdr__tel-main {
  display: flex;
  align-items: center;
  gap: 0.3504em;                /* 5.606px */
}
.hdr__tel-fc { inline-size: 2.5164em; block-size: 1.9771em; }  /* 40.262 x 31.634 */
.hdr__tel-num {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 900;
  font-size: 2.3236em;          /* 37.177px */
  line-height: 1;
  color: var(--c-red);
  white-space: nowrap;
}
.hdr__tel-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3461em;                /* 5.538px */
  margin: 0;
  padding: 0.1645em 0.3461em;   /* 2.632px 5.538px */
  border-radius: 1.1423em;      /* 18.277px */
  background: var(--c-red);
  color: #fff;
  font-weight: 500;
  font-size: 0.7677em;          /* 12.283px */
  white-space: nowrap;
}
.hdr__tel-badge-pair { display: flex; align-items: flex-end; }
.hdr__tel-badge small { font-size: 0.8571em; }  /* 10.528 / 12.283 */
.hdr__tel-note {
  margin: 0;
  font-weight: 500;
  font-size: 0.6618em;          /* 10.588px */
  color: var(--c-note);
  text-align: center;
}

/* --- メール / LINE ボタン --- */
.hdr__btn {
  display: flex;
  align-items: center;
  gap: 0.4375em;                /* 7px */
  block-size: 100%;
  padding: 1em;                 /* 16px */
  border-radius: 0.625em;       /* 10px */
  color: #fff;
  transition: background-color .2s;
}
.hdr__btn--mail { background: var(--c-blue); }
.hdr__btn--line { background: var(--c-green); }
.hdr__btn--mail:hover { background: color-mix(in srgb, var(--c-blue) 85%, black); }
.hdr__btn--line:hover { background: color-mix(in srgb, var(--c-green) 85%, black); }

.hdr__btn-ico  { block-size: 100%; inline-size: auto; aspect-ratio: 1; }
.hdr__btn-txt  {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* 「メール」と「問い合わせ」の頭を揃える */
  text-align: start;
  inline-size: 4.9069em;     /* 78.51px */
}
.hdr__btn-main { font-weight: 900; font-size: 1.5em; line-height: 1.2; }         /* 24px */
.hdr__btn-sub  { font-weight: 700; font-size: 0.98em; line-height: 1.2; }        /* 15.68px */
.hdr__btn-arrow{ inline-size: 0.5312em; block-size: 0.8529em; }                  /* 8.499 x 13.646px */

/* ---------- ナビバー (Figma 1920x46 / 中身の実幅1201px) ---------- */
/* ハンバーガーは position:fixed で画面右端に居座るので、その幅ぶんを左右に空ける。
   左右対称にすることで、項目の中央揃え（Figmaの見た目）を崩さずに右端の潜り込みを防ぐ。 */
.hdr__nav {
  background: var(--c-navy);
  padding-inline: 5.625em;   /* ハンバーガー幅 90px */
}
.hdr__nav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 2.875em;          /* 46px */
}
/* 項目はナビバーと同じ高さ(46px)にする。区切り線は高さ24pxだけ引きたいので、
   border ではなく背景のグラデーションで描く。
   ※ border で24pxの箱を作ると <li> が24pxになり、中の46pxのリンクがはみ出す。
     ドロップダウンが <li> を基準に配置されるため11px上にズレる原因になる。 */
.hdr__nav-item {
  display: flex;
  align-items: center;
  block-size: 2.875em;          /* 46px */
  background: linear-gradient(#fff, #fff) left center / 1px 1.5em no-repeat;
}
.hdr__nav-item:last-child {
  background:
    linear-gradient(#fff, #fff) left center / 1px 1.5em no-repeat,
    linear-gradient(#fff, #fff) right center / 1px 1.5em no-repeat;
}

.hdr__nav-link,
.hdr__nav-trigger {
  display: flex;
  align-items: center;
  block-size: 2.875em;          /* 46px。区切り線(24px)より高くしてクリック域を確保 */
  padding-inline: 1.25em;       /* 20px */
  font-weight: 500;
  font-size: 1em;               /* 16px */
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  transition: background-color .2s;
}
.hdr__nav-link:hover,
.hdr__nav-trigger:hover { background: color-mix(in srgb, var(--c-navy) 80%, #fff); }

/* ---------- ハンバーガー (Figma 70x70 / 左下だけ18px丸め) ---------- */
.hdr__hamburger {
  /* 帯にもナビにも属さず常に画面右上に居座らせる。
     帯がスクロールで抜けたあともそのまま残り、ナビに被さる（Figmaの見た目）。 */
  position: fixed;
  inset-block-start: 0;
  inset-inline-end: 0;
  /* SPではヘッダーが position:static になり重ね順の基準が無くなるので、
     .sp-menu-bar(z-index:140) より確実に上に来る値を直接持たせる。 */
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.375em;                       /* 6px */
  inline-size: 5.625em;               /* 70px + 左右padding 10px */
  /* 高さは白い帯(98px)と揃える。90pxのままだと上端固定なので下に8px余り、
     3本線と「メニュー」が帯の中で上寄りに見える。
     スクロールで帯が抜けたあとはナビ(46px)に被さって残る（Figmaの見た目）。 */
  block-size: var(--hdr-bar-h);       /* 帯と同じ高さ */
  padding: 0.625em;                   /* 10px */
  background: #fff;
  border-end-start-radius: 1.125em;   /* 18px */
}
.hdr__hamburger-bars {
  display: flex;
  flex-direction: column;
  gap: 0.4598em;                      /* 7.357px */
  inline-size: 2.4908em;              /* 39.853px */
}
.hdr__hamburger-bars i {
  block-size: 0.3449em;               /* 5.518px */
  background: var(--c-navy);
  transition: transform .25s, opacity .25s;
}
.hdr__hamburger-label {
  font-weight: 700;
  font-size: 0.7664em;                /* 12.262px */
  line-height: 1;
  color: #000;
  white-space: nowrap;
}

/* 開いている間は×に変形 */
.hdr__hamburger[aria-expanded="true"] .hdr__hamburger-bars i:nth-child(1) { transform: translateY(0.8047em) rotate(45deg); }
.hdr__hamburger[aria-expanded="true"] .hdr__hamburger-bars i:nth-child(2) { opacity: 0; }
.hdr__hamburger[aria-expanded="true"] .hdr__hamburger-bars i:nth-child(3) { transform: translateY(-0.8047em) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .hdr__hamburger-bars i { transition: none; }
}

/* ---------- ドロワー (Figma 419px) ---------- */
.drawer {
  font-size: 16px;              /* ヘッダーのvw可変から切り離す */
  inline-size: min(100%, 419px);
  max-inline-size: none;
  block-size: 100dvh;
  max-block-size: none;
  margin-block: 0;
  margin-inline: auto 0;        /* 右端に寄せる */
  padding: 0;
  border: 0;
  background: var(--c-drawer-bg);
  color: #000;
  overflow-y: auto;
  overscroll-behavior: contain;

  translate: 100% 0;
  transition: translate .3s ease, overlay .3s allow-discrete, display .3s allow-discrete;

  &[open] { translate: 0 0; }
  @starting-style { &[open] { translate: 100% 0; } }

  &::backdrop {
    background: rgb(0 0 0 / 0);
    transition: background-color .3s, overlay .3s allow-discrete, display .3s allow-discrete;
  }
  &[open]::backdrop { background: rgb(0 0 0 / .5); }
  @starting-style { &[open]::backdrop { background: rgb(0 0 0 / 0); } }
}

@media (prefers-reduced-motion: reduce) {
  .drawer, .drawer::backdrop { transition: none; }
}

.drawer__head {
  position: sticky;
  inset-block-start: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* ヘッダーの白い帯と同じ高さにする */
  block-size: var(--hdr-bar-h);
  padding-block: 0;
  padding-inline: 16px;
  background: var(--c-navy);
  color: #fff;
}
.drawer__title { margin: 0; font-weight: 900; font-size: 20px; line-height: 1; }
/* ハンバーガーの「メニュー」と対になる見た目にする（アイコン＋ラベルの縦積み） */
.drawer__close {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  inline-size: 56px;
  block-size: 56px;
}
.drawer__close svg { inline-size: 32px; block-size: 32px; }
.drawer__close-label { font-weight: 500; font-size: 12px; line-height: 1; }

.drawer__body { display: flex; flex-direction: column; gap: 10px; padding: 16px; }

/* --- 商品タイル 2列 --- */
.drawer__tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.drawer__tile {
  display: flex;
  align-items: center;
  gap: 5px;
  block-size: 58px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 5px;
  transition: border-color .2s;
}
.drawer__tile:hover { border-color: var(--c-navy); }
.drawer__tile img { inline-size: 39px; block-size: 39px; object-fit: cover; flex-shrink: 0; }
.drawer__tile-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* 「ビルトイン」の小ラベルも含めて左揃えに揃える */
  justify-content: center;
  flex: 1;
  min-inline-size: 0;
  text-align: start;
}
.drawer__tile-txt small { font-weight: 700; font-size: 10px; line-height: 1.2; color: var(--c-sub); }
.drawer__tile-name { font-weight: 700; font-size: 15px; line-height: 1.2; }
.drawer__chev { inline-size: 7px; block-size: 10px; flex-shrink: 0; color: #000; }

/* --- リンクカード --- */
.drawer__links {
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 5px;
  overflow: hidden;
}
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 10px;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  transition: background-color .2s;
}
.drawer__link:hover { background: var(--c-drawer-bg); }
.drawer__links > :where(a, details) + :where(a, details) { border-block-start: 1px solid var(--c-line); }

/* --- 商品一覧アコーディオン --- */
.drawer__acc summary { list-style: none; cursor: pointer; }
.drawer__acc summary::-webkit-details-marker { display: none; }

/* 開閉のアニメーション。<details> の中身は ::details-content で掴める。
   auto へ transition させるために interpolate-size をこの配下だけで有効化する
   （:root に置くとサイト全体の挙動が変わってしまうので置かない）。
   未対応ブラウザでは ::details-content ごと無視され、従来どおり瞬時に開くだけ。 */
.drawer__acc { interpolate-size: allow-keywords; }

.drawer__acc::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .25s ease, content-visibility .25s allow-discrete;
}
.drawer__acc[open]::details-content { block-size: auto; }

@media (prefers-reduced-motion: reduce) {
  .drawer__acc::details-content { transition: none; }
}

.drawer__plus {
  position: relative;
  inline-size: 10px;
  block-size: 10px;
  flex-shrink: 0;
}
.drawer__plus::before,
.drawer__plus::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: 10px;
  block-size: 2px;
  background: currentColor;
  translate: 0 -50%;
  transition: rotate .2s;
}
.drawer__plus::after { rotate: 90deg; }
.drawer__acc[open] .drawer__plus::after { rotate: 0deg; }

.drawer__acc-list {
  border-block-start: 1px solid var(--c-line);
  /* 親カードが白なので、--c-drawer-bg(#f5f7fb)では白と見分けがつかない。
     ライン色寄りに振って、開いた中身だとはっきり分かる濃さにする。 */
  background: color-mix(in srgb, var(--c-line) 60%, white);
}
.drawer__acc-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 10px;
  font-size: 14px;
  font-weight: 700;
  text-align: start;
}
.drawer__acc-list a:hover { background: color-mix(in srgb, var(--c-line) 90%, white); }

/* 「ビルトイン」の小ラベル付き。商品タイル(.drawer__tile-txt)と同じ見せ方に揃える */
.drawer__acc-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.2;
}
.drawer__acc-txt small { font-size: 10px; font-weight: 700; color: var(--c-sub); }
.drawer__acc-list li + li a { border-block-start: 1px solid var(--c-line); }

/* --- 規約・公式アカウントのリンク ---
   主要導線（.drawer__links のカード）とは性格が違うので、
   カードにも囲み線にもせず、控えめなテキストリンクとして並べる。 */
.drawer__sub {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding-block-start: 4px;
  /* サイト既存CSSから text-align: center が継承されてくるので打ち消す */
  text-align: start;
}
.drawer__sub a {
  display: block;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-navy);
}
/* 下線は :is(#siteHeader, #siteDrawer) :is(a, a:hover…) で全消ししているので、
   ホバーは背景で表す */
.drawer__sub a:hover { background: color-mix(in srgb, var(--c-line) 70%, white); }

@media (prefers-reduced-motion: reduce) {
  .drawer__plus::before, .drawer__plus::after { transition: none; }
}

/* ---------- 商品一覧ドロップダウン (PCのみ) ---------- */
.hdr__nav-item--products { position: relative; }

.hdr__dropdown {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-start: 50%;
  translate: -50% 0;
  z-index: 3;
  inline-size: max-content;
  padding: 0.625em;                       /* 10px */
  background: #fff;
  border: 1px solid var(--c-line);
  border-radius: 0.3125em;                /* 5px */
  box-shadow: 0 0.25em 0 rgb(24 46 120 / .15);  /* blur無しのベタ影 */
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s, visibility .15s;
}

/* 表示条件はこの2つだけ。JSは状態を作らず、ここを読んで aria に反映するだけにする
   （aria-expanded を表示条件に混ぜると、CSSとJSのどちらが真実か決まらなくなる） */
.hdr__nav-item--products:hover .hdr__dropdown,
.hdr__nav-item--products:focus-within .hdr__dropdown {
  opacity: 1;
  visibility: visible;
}

.hdr__dropdown-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.3125em;                          /* 5px */
}
.hdr__dropdown-list a {
  display: flex;
  align-items: center;
  gap: 0.3125em;
  padding: 0.5em 0.625em;
  border-radius: 0.3125em;
  font-weight: 700;
  font-size: 0.9375em;                    /* 15px */
  color: #000;
  white-space: nowrap;
  transition: background-color .2s;
}
.hdr__dropdown-list a:hover { background: var(--c-drawer-bg); }
.hdr__dropdown-list img { inline-size: 2.4375em; block-size: 2.4375em; }  /* 39px */

@media (prefers-reduced-motion: reduce) {
  .hdr__dropdown { transition: none; }
}

/* =========================================================
   SP (1024px以下)
   ========================================================= */
@media (max-width: 1024px) {
  /* SPは白い帯（ロゴ・お見積り）を追従させず、スクロールでそのまま流す。
     ハンバーガーだけ position:fixed で画面右上に残る。 */
  #siteHeader { font-size: 16px; position: static; }

  /* SPは帯もハンバーガーもドロワーの見出しも60px */
  :root { --hdr-bar-h: 60px; }

  .hdr__bar {
    /* ハンバーガーは position:fixed で画面右端が基準なので、
       右のpaddingは0にして .hdr__cta 側だけで場所を確保する */
    padding: 8px 0 8px 12px;
  }

  /* ロゴは横幅が足りなくなったら縮む。min-inline-size:0 が無いと
     flexアイテムは内容幅より小さくならず、そのままはみ出す。
     object-fit:contain で縦横比を保ったまま小さくなる。 */
  .hdr__logos {
    gap: 10px;
    min-inline-size: 0;
    flex: 0 1 auto;
  }
  .hdr__logo--edion,
  .hdr__logo--shojikiya {
    min-inline-size: 0;
    max-inline-size: 100%;
    object-fit: contain;
    object-position: left center;
  }
  .hdr__logo--edion { inline-size: auto; block-size: 100%; aspect-ratio: 143.197 / 58.666; }

  /* 電話・メール・LINEは画面下の固定CTAが担うので出さない */
  .hdr__tel,
  .hdr__btn { display: none; }

  /* ハンバーガー(60px)ぶん＋わずかな隙間を空ける。縮めない */
  .hdr__cta {
    flex: 0 0 auto;
    padding-inline-end: calc(60px + 4px);
  }

  .hdr__hamburger {
    inline-size: 60px;
    padding: 6px;
    gap: 5px;
    border-end-start-radius: 12px;
  }
  .hdr__hamburger-bars { inline-size: 26px; gap: 5px; }
  .hdr__hamburger-bars i { block-size: 4px; }
  .hdr__hamburger-label { font-size: 10px; }
  .hdr__hamburger[aria-expanded="true"] .hdr__hamburger-bars i:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  .hdr__hamburger[aria-expanded="true"] .hdr__hamburger-bars i:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

  /* ナビバーとドロップダウンはSPでは出さない（ドロワーが担当） */
  .hdr__nav { display: none; }

  .drawer { inline-size: 100%; }

  /* 帯が60pxになるので、56pxの閉じるボタンでは詰まる */
  .drawer__title { font-size: 18px; }
  .drawer__close { inline-size: 48px; block-size: 48px; gap: 5px; }
  .drawer__close svg { inline-size: 26px; block-size: 26px; }
}

@media (max-width: 380px) {
  .drawer__tile-name { font-size: 14px; }
  .drawer__tile img { inline-size: 34px; block-size: 34px; }
}

/* =========================================================
   レガシー(base.min.css)の打ち消し
   旧ヘッダー #fix_menu は position:absolute/fixed だったため、本文を押し下げる
   body { padding-top } がブレークポイントごとに5つ入っている。
   新ヘッダー #siteHeader は position:sticky で通常フローを占めるので、それらは不要。
   旧ルールの1つが !important なので、ここだけ !important を使う
   （このプロジェクトで !important を使ってよい唯一の場所）。
   ========================================================= */
body.hdr-v2 { padding-top: 0 !important; }

/* base.min.css 84行目 `header { height: 110px }` が新ヘッダーを110pxに潰していた
   （中身は98+46=144px必要）。要素セレクタなのでIDで上書きする。 */
body.hdr-v2 header#siteHeader { block-size: auto; }

/* base.min.css 534行目 `main { margin-top: 160px }` は旧ヘッダーが absolute/fixed で
   浮いていた前提の余白。sticky になった今は本文との間に160pxの隙間になるだけなので消す。 */
body.hdr-v2 main { margin-block-start: 0; }

/* 旧ヘッダーが fixed だった前提で fixed 配置されていたSPのタブバーを、
   新ヘッダーの直下に貼り付く sticky に変える。
   fixed のままだと本文がバーの下に潜り込む。 */
@media (max-width: 768px) {
  /* 白い帯が追従しなくなったので、SPのタブバーは画面上端に貼り付ける
     （PCで青いナビが上端に残るのと同じ役割） */
  /* タブバーは画面上端に貼り付ける（旧ヘッダーが fixed だった前提の top:60px はやめる）。
     ハンバーガー(右上・60px)と同じ位置に来るが、右端に60pxの透明ボーダーを置くことで
     横スクロールの表示領域（＝パディングボックス）がハンバーガーの手前で終わる。
     ハンバーガーと重なるのは「バーが画面上端に貼り付いている間」だけ。
     なので幅を空けるのもその間だけにする（is-stuck は header.js が付け外しする）。
     常に空けると、重なっていないスクロール位置でもタブが途中で切れて不格好になる。 */
  body.hdr-v2 .sp-menu-bar {
    position: sticky;
    inset-block-start: 0;
    overflow: visible;          /* 横スクロールは内側の nav が担当 */
    border: 0;
  }

  body.hdr-v2 .sp-menu-bar .sp-menu-nav {
    inline-size: auto;
    min-inline-size: 0;         /* 既定の max-content だとスクロールしない */
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    transition: margin-inline-end .15s ease;
  }

  body.hdr-v2 .sp-menu-bar .sp-menu-nav::-webkit-scrollbar {
    display: none;
    inline-size: 0;
    block-size: 0;
  }

  /* 貼り付いている間だけハンバーガー幅ぶんを空ける。
     空いた60pxには親バーの紺色がそのまま出るので、バーは全幅の一枚に見えたまま。 */
  body.hdr-v2 .sp-menu-bar.is-stuck .sp-menu-nav {
    margin-inline-end: 60px;
  }
}

/* =========================================================
   お見積り（SPのみ）
   旧ヘッダーにあったSP専用ボタンの復活。
   PCはメール／LINEボタンがあるので出さない。
   ========================================================= */
.hdr__estimate { display: none; }

@media (max-width: 1024px) {
  .hdr__estimate {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    inline-size: 60px;
    block-size: 60px;
    color: var(--c-navy);
  }
  .hdr__estimate img { inline-size: 32px; block-size: 32px; }
  .hdr__estimate span {
    font-weight: 700;
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
  }
}