@charset "UTF-8";
/* ==========================================================
   サイトヘッダー（自前実装 / フェーズ2 T-01）

   移行元:Elementor「Latest Header」(ID 20975)
   値の出典:
     - docs/extracted/elementor-css/post-20975.css（Elementorが生成していたCSS）
     - 本番の計算済みスタイル（Playwrightで実測）

   ブレークポイントは Elementor の既定に合わせる。
     スマホ     〜767px
     タブレット  768〜1024px
     PC        1025px〜
   ========================================================== */

:root {
  --mibot-header-bg: rgba(245, 245, 245, 0.92);
  --mibot-header-text: #333333;
  --mibot-accent: #f6be00;
  --mibot-font: "M PLUS 1", sans-serif;
}

/* ---- 読み上げ専用テキスト ----
   いまは Elementor の frontend.css が同名のクラスを定義しているが、
   フェーズ5で Elementor を止めると消えるのでテーマ側にも持つ。
   (メニューボタンの「メニューを開く」等が見えてしまうのを防ぐ) */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  border: 0;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  position: absolute !important;
  top: 5px;
  left: 5px;
  z-index: 100000;
  width: auto;
  height: auto;
  margin: 0;
  padding: 15px 23px 14px;
  clip: auto !important;
  clip-path: none;
  background-color: #f1f1f1;
  color: #0073aa;
  font-size: 14px;
  line-height: normal;
  text-decoration: none;
}

/* ---- 外枠：本体が position:fixed なので、高さぶんの場所取りをする ----
   スマホ 64px。本番のトップだけ旧テーマの JS がロゴを <h1> で包み、その見出しの既定スタイルで 92px に
   伸びていたが、意図しない副作用だったので再現しない(本番も 2026-09-25 に CSS で 64px に修正済み)。
   docs/page-inventory.md「スマホのヘッダー高さ」 */
.l-header {
  height: 64px;
}

/* ---- 固定バー ---- */
.l-header__bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  z-index: 100;
  display: flex;
  flex-direction: column;
  min-height: 50px;
  background-color: var(--mibot-header-bg);
  transition: background 0.3s, border 0.3s, box-shadow 0.3s, transform 0.4s;
}

.l-header__inner {
  width: 100%;
  max-width: 1376px;
  margin-inline: auto;
  padding: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
}

/* ---- ロゴ行 ----
   本番はこの中にスマホ用のまとまりも入っている（0e4b16c > c9a1818 + d361f04）。
   スマホは高さ 44px(スマホ用のまとまりの高さ)で、ヘッダー全体は 44+padding20=64px。
   PC は 72px(下の PC 用の指定)。
   ロゴ画像の縦位置は Elementor の行box積み上げによるもので計算では追いにくいため、
   本番の実測値(トップ以外のページ。cmp-header.js /legal-notice/)に合わせて直接指定している。 */
.l-header__logo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}

.l-header__logoBox {
  align-self: flex-start;
  line-height: 0;
  font-size: 0;
  padding-top: 14px; /* スマホ:本番の実測値(ロゴ画像 y=24) */
}

/* トップページのロゴの <h1>(template-parts/header.php)。見出しの既定スタイル(reset.css の margin・
   font-size 2.5rem・line-height 1.2)を打ち消して、h1 が無いページと同じ組み方にする */
.l-header__logoH1 {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* ロゴ
   Elementorのサイトロゴは
     コンテナ(flex) > ウィジェット(block, 16px/24px) > a(inline-block, 40px/48px) > img(vertical-align:middle)
   という入れ子で、行boxの積み上がりでウィジェットの高さが決まっている。
   この高さがヘッダー全体の高さを決めているので、同じ組み方にする。 */
.l-header__logoBox a {
  display: inline-block;
  line-height: 0;
  font-size: 0;
}

.l-header__logoImg {
  display: inline-block;
  vertical-align: middle;
  width: 60px;
  height: auto;
  margin: 0;
}

/* ---- ユーティリティリンク（ニュースレター登録 / ログイン） ---- */
/* 内側余白は左右10px。上下14pxが付くのはスマホ版だけ（本番の実測）。 */
.l-header__utilLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  margin-left: 0;
  color: var(--mibot-header-text);
  text-decoration: none;
  transition: color 0.3s;
}

.l-header__mobile .l-header__utilLink {
  padding: 14px 10px;
  border-radius: 10px;
}

.l-header__utilLink:hover .l-header__utilText {
  color: var(--mibot-accent);
}

.l-header__utilIcon {
  display: inline-flex;
  align-items: center;
}

/* Elementor の設定値は14pxだが、実際に描画されているのは16px */
.l-header__utilIcon svg {
  width: 16px;
  height: 16px;
}

.l-header__utilText {
  padding-left: 5px;
  font-family: var(--mibot-font);
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
  white-space: nowrap;
  transition: color 0.3s;
}

/* ---- UE「基本ボタン」ウィジェットが出力していたCSSの移植 ----
   Unlimited Elements の ucaddon_basic_link は、置いた場所ごとに次の <style> を
   本文中に吐いていた(ヘッダーの「予約する」、フッターの「ニュースレター登録」、
   固定ページ内のボタン)。UE を止めると消えるので、全ページ共通のここに持つ。
   !important も含めて元の記述のまま。 */
.basic_link {
  position: relative;
  justify-content: center !important;
}

.icon-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 6%;
}

/* 「予約する」ボタン
   style.css の @media (max-width:1250px){ width:100% } が、フレックス直下だと
   親いっぱいに伸びる。本番は内容にあわせた幅なので戻す。
   767px以下は style.css が 98px を指定しており、そちらが正しいので触らない。 */
@media (min-width: 768px) and (max-width: 1250px) {
  .l-header a.basic_link.header__button {
    width: auto;
  }
}

/* 「予約する」を折り返さない(2026-10 修正)。
   ボタンはフレックスの中で縮められ、PC の 1025〜1140px で2行、1025〜1055px で4行、スマホの 325px 以下で2行に
   折り返していた(1025〜1055px では固定バーが 136px に伸び、場所取りの 100px を超えて本文に 36px かぶっていた)。
   nowrap で文字の幅が最小幅になるので、フレックスでもそれ以上は縮まない */
.l-header a.basic_link.header__button {
  white-space: nowrap;
}

/* 幅の狭いスマホ(〜359px)は、ボタンを縮めない分「ニュース登録」がロゴに付くので、項目の間を詰める */
@media (max-width: 359px) {
  .l-header__mobile {
    gap: 6px;
  }
  .l-header__mobile .l-header__utilLink {
    padding-inline: 4px;
  }
}

/* ---- メニューボタン（スマホ・タブレット） ---- */
.l-header__menuToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: #f5f5f5;
  color: inherit;
  line-height: 0;
  cursor: pointer;
}

/* reset.css の button:hover(背景 #c36)を打ち消す。本番はホバーで色が変わらない */
.l-header__menuToggle:hover,
.l-header__menuToggle:focus {
  background-color: #f5f5f5;
  color: inherit;
}

.l-header__menuToggle svg {
  display: block;
  width: 34px;
  height: 34px;
}

/* ---- PC：ナビゲーション ---- */
.l-header__navWrap {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  min-height: 40px;
}

.l-header__nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 40px;
  border-radius: 14px;
}

/* 本番は項目を自然幅のまま並べ、入りきらない分を折り返している。
   幅を100%にして space-between すると項目が縮んで文字が折り返るので、しない。 */
.l-header__navList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.l-header__navList li {
  margin: 0;
}

/* 余白は li を挟んで詳細度を上げる。style.css の「.menu-item-21010 a { padding-right:1.5em }」
   (会社概要の外部リンク)と同じ詳細度だと読み込み順で勝ち負けが変わり、本番(Elementor の
   ナビ CSS が勝って 16px)と 3.5px ずれた(2026-09-25、style.css を優先度 100 にしたときに実測)。
   position:relative と ::after の外部リンクアイコンは style.css のまま効かせる(本番と同じ)。 */
.l-header__navList li a {
  padding: 10px 16px;
}

.l-header__navList a {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  font-family: var(--mibot-font);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
  color: var(--mibot-header-text);
  fill: var(--mibot-header-text);
  text-decoration: none;
  transition: 0.4s;
}

.l-header__navList a:hover,
.l-header__navList a:focus,
.l-header__navList .current-menu-item > a {
  color: var(--mibot-accent);
  fill: var(--mibot-accent);
}

/* ---- PC:「予約ガイド」のドロップダウン ----
   旧 functions.php が wp_footer に出していた <style> の値をそのまま移した(2026-09-29。
   .menu-item-20696 は .l-header__navItem--dropdown に置き換え)。
   キーボードでフォーカスが入ったときも開く(:focus-within。2026-09-29 追加)。
   :has() に対応しないブラウザで他の指定まで無効にならないよう、ルールを分けている。 */
.l-header__navItem--dropdown {
  position: relative;
}

.dropdownMenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 30px 45px;
  border-radius: 5px;
  background-color: #fff;
  min-width: 200px;
  z-index: 9999;
}

.l-header__navItem--dropdown:hover .dropdownMenu {
  display: flex;
  align-items: center;
}

.l-header__navItem--dropdown:focus-within .dropdownMenu {
  display: flex;
  align-items: center;
}

/* マウスでクリックしてフォーカスが残っただけのとき(:focus-visible にならない)は、ホバーが外れたら閉じる。
   :has(:focus-visible) で開く書き方は、Chrome で Tab でドロップダウンの中へ進んだ瞬間に閉じてフォーカスが
   失われたので使わない(2026-09-29 実測) */
.l-header__navItem--dropdown:not(:hover):has(:focus:not(:focus-visible)) .dropdownMenu {
  display: none;
}

.dropdownMenu__left {
  padding: 0 20px 0 0;
  border-right: 1px solid #7A7A7A;
  height: 124px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dropdownMenu__right {
  padding: 0 0 0 20px;
}

.dropdownMenu__heading {
  padding: 8px 10px !important;
  font-size: 16px;
  font-weight: bold;
  color: #7A7A7A;
}

.dropdownMenu__icon {
  margin: 0 0 0 6px;
  width: 15px;
  height: 15px;
}

.dropdownMenu__icon path {
  fill: #7A7A7A;
}

.dropdownMenu__heading:hover .dropdownMenu__icon path {
  fill: #F6BE00 !important;
  transition: all 0.4s;
}

.dropdownMenu__item {
  padding: 8px 10px !important;
  font-size: 12px;
  color: #7A7A7A;
}

.dropdownMenu__heading:hover, .dropdownMenu__item:hover {
  color: #F6BE00;
}

/* ---- PC：右側ユーティリティ ---- */
.l-header__utility {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

/* ---- スマホ用のまとまり ---- */
.l-header__mobile {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

/* ---- タブレット用のまとまり ---- */
.l-header__tabletBar {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.l-header__tabletUtil {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* ==========================================================
   出し分け
   本番は PC / タブレット / スマホ で別ブロックを出している。
   ========================================================== */

/* スマホ（〜767px）：ロゴ + スマホ用まとまり */
@media (max-width: 767px) {
  .l-header__tabletBar,
  .l-header__navWrap,
  .l-header__utility {
    display: none;
  }
  .l-header__inner {
    justify-content: center;
  }
  .l-header__logo {
    width: 100%;
  }
  .l-header__mobile {
    width: 76%;
  }
}

/* タブレット（768〜1024px）：タブレット用まとまりのみ */
@media (min-width: 768px) and (max-width: 1024px) {
  .l-header__logo,
  .l-header__mobile,
  .l-header__navWrap,
  .l-header__utility {
    display: none;
  }
  .l-header__tabletBar {
    width: 100%;
    justify-content: flex-start;
    gap: 20px;
  }
  /* 本番は util 側の padding:10px で行高が 73px になり、
     外側の padding 10px と合わせてバー高 93px になる */
  .l-header__tabletUtil {
    flex: 1 1 auto;
    justify-content: flex-end;
    padding: 10px;
    gap: 20px;
  }
  .l-header__logoImg {
    width: 55px;
  }
  .l-header__tabletLogo .l-header__logoBox {
    padding-top: 18px; /* タブレット:本番の実測値 */
  }
}

/* PC（1025px〜） */
@media (min-width: 1025px) {
  .l-header {
    height: 100px;
  }
  .l-header__bar {
    min-height: 80px;
  }
  .l-header__mobile,
  .l-header__tabletBar {
    display: none;
  }
  .l-header__logo {
    width: 10%;
    min-height: 72px;
    justify-content: flex-start;
  }
  .l-header__navWrap {
    width: 60%;
  }
  .l-header__nav {
    width: 100%;
  }
  .l-header__utility {
    width: 34%;
  }
  .l-header__logoImg {
    width: 91.25px;
  }
  /* PC はロゴのウィジェットが10%幅いっぱいに広がり、その中で画像が中央に置かれる */
  .l-header__logoBox {
    flex: 1 1 auto;
    text-align: center;
    padding-top: 20px; /* PC:本番の実測値(ロゴ画像 y=34。以前の 16px=y30 は本番トップの h1 の影響を受けた値だった) */
  }
}

/* タブレット（768〜1024px）の高さ */
@media (min-width: 768px) and (max-width: 1024px) {
  .l-header {
    height: 93px;
  }

  /* /corporate-customer/(固定ページ 19626)は reset.css を読まない(inc/enqueue.php)ので本文の行の高さが既定のままで、
     固定バーの中身が 3px 低く 90px になる。本番もこのページだけヘッダー下端が 90px(ヘッダーは流れの中にあり、
     中身の高さがそのまま効いていた)。場所取りの高さを固定バーに合わせる。
     同じく reset.css を読まない /charging-simulator/ はページの CSS が行の高さを決めていて 93px のままなので対象外 */
  .page-id-19626 .l-header {
    height: 90px;
  }
}