/* ============================================================
   MIRAI JAPAN ヘッダー・フッターのトンマナ

   SHOPLINE標準のヘッダー／フッターは作り替えず、見た目だけを上書きする。
   カート・検索・会員・モバイルメニュー・多言語などの動きはそのまま残す。

   参照 design-preview/style.css:
     .notice{text-align:center;background:var(--violet);color:white;
             font-size:12px;letter-spacing:.13em;padding:7px 16px}
     .header{display:flex;align-items:center;justify-content:space-between;
             padding:22px 4.5%;gap:28px;background:#fbfdff;
             border-bottom:1px solid #e1f1f9}
     .nav{display:flex;align-items:center;gap:27px;font-size:14px}
     .nav a{position:relative;padding:5px 0}
     .nav a:hover:after{content:'';position:absolute;bottom:0;left:0;
                        width:100%;height:1px;background:var(--violet)}
     .footer{padding:65px 5% 25px;background:#e9f4fa}
     .footerlinks{font-size:14px}
     .fine{border-top:1px solid var(--line);padding-top:24px;
           font-size:11px;color:var(--muted)}
   ============================================================ */

:root {
  --mjhf-brand: #09629e;
  --mjhf-ink: #12334d;
  --mjhf-line: #c9dfe9;
  --mjhf-muted: #506a7e;
  --mjhf-surface: #fbfdff;
  --mjhf-footer-bg: #e9f4fa;
  --mjhf-header-line: #e1f1f9;
}

/* ---- お知らせバー（参照 .notice） ---- */
.announcement-bar,
.announcement-bar__carousel-wrapper {
  background: var(--mjhf-brand) !important;
  color: #fff !important;
}

.announcement-bar a,
.announcement-bar__carousel-wrapper a,
.announcement-bar__carousel-wrapper p,
.announcement-bar__carousel-wrapper span {
  color: #fff !important;
}

.announcement-bar__carousel-wrapper {
  font-size: 12px !important;
  letter-spacing: 0.13em;
  text-align: center;
}

/* 各スライドは配色設定により白背景を持つことがあり、
   土台の青を覆ってしまう。スライド側も青に揃える。 */
.announcement-bar__group-item,
.announcement-bar__group-item-content,
.announcement-bar__group-item-inner,
.announcement-bar__button {
  background: var(--mjhf-brand) !important;
  color: #fff !important;
}

.announcement-bar__group-item *,
.announcement-bar__button * {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
}

/* 左右の矢印もバーの色に馴染ませる */
.announcement-bar svg,
.announcement-bar__carousel-wrapper svg {
  color: #fff !important;
  fill: currentColor;
}

/* ---- ヘッダー（参照 .header） ---- */
.header-section {
  background: var(--mjhf-surface) !important;
  border-block-end: 1px solid var(--mjhf-header-line);
}

.header-section .header__container-top-wrap {
  padding-block: 22px;
}

.header-section a {
  color: var(--mjhf-ink);
}

/* ナビゲーション（参照 .nav{gap:27px;font-size:14px}）
   テーマは「2階層目のメニュー文字サイズ」設定でリンク自体にクラスを当てるため、
   ul や theme-nav-bar に指定しても効かない。a を直接指定する。 */
.header-section .header-nav__menu a.header-nav__underline {
  font-size: 14px;
}

.header-section .header-nav__menu .lighthighted,
.header-section .header-nav__menu .header-nav__ellipsis {
  font-size: inherit;
}

/* 参照 .nav{display:flex;align-items:center;gap:27px}
   ピルだけ高さが違うので、中央揃えを明示しないと数pxずれる */
.header-section .header-nav__menu {
  column-gap: 27px;
  align-items: center;
}

.header-section .header__container-bottom {
  border-block-start: 0;
}

/* ホバー時の下線（参照 .nav a:hover:after{background:var(--violet)}）
   テーマに同じ仕組み（.header-nav__underline::after）があるので、色だけ合わせる。
   自前で ::after を足すと下線が二重になる。 */
.header-section .header-nav__underline::after {
  background-color: var(--mjhf-brand) !important;
}

/* ---- フッター（参照 .footer） ---- */
.footer {
  background: var(--mjhf-footer-bg) !important;
  color: var(--mjhf-ink);
}

.footer .page-width {
  padding-block: 65px 25px;
}

.footer a {
  color: var(--mjhf-ink);
  text-decoration: none;
}

.footer a:hover {
  color: var(--mjhf-brand);
  text-decoration: underline;
}

/* リンク一覧（参照 .footerlinks{font-size:14px}） */
.footer__group a,
.footer__group li {
  font-size: 14px;
}

/* 見出しは本文と同じゴシックで、少し小さく */
.footer__group h2,
.footer__group h3,
.footer__group .footer__group-title {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
}

/* コピーライト行（参照 .fine） */
.footer__copyright,
.footer__bottom,
.footer__fine {
  border-block-start: 1px solid var(--mjhf-line);
  padding-block-start: 24px;
  font-size: 11px;
  color: var(--mjhf-muted);
}

@media (max-width: 760px) {
  .header-section .header__container-top-wrap { padding-block: 18px; }
  .footer .page-width { padding-block: 45px 20px; }
  .footer__group a,
  .footer__group li { font-size: 13px; }
}

/* ---- 強調メニュー（参照 .contact） ----
   .contact{border:1px solid var(--violet);padding:9px 23px!important;border-radius:30px}

   テーマは強調対象を <mark class="lighthighted"> で囲むだけなので、
   mark に padding を当てるとインライン要素のままで他の項目と縦位置がずれる。
   mark は素に戻し、リンク（a.header-nav__underline）自体をピル型にする。 */
.header-section .lighthighted,
.header-section .highlighted {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  border: 0 !important;
  font: inherit;
}

.header-section .header-nav__menu-item:has(.lighthighted) > .header-nav__underline,
.header-section .header-nav__menu-item:has(.highlighted) > .header-nav__underline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--mjhf-brand);
  border-radius: 30px;
  /* 参照 .contact{padding:9px 23px}。テーマ側のリンクは行の高さが大きく、
     そのままだと縦長の箱になるため、高さを明示して平たいピルにする */
  padding: 0 23px;
  min-height: 44px;
  height: 44px;
  color: var(--mjhf-brand) !important;
  line-height: 1;
}

/* ピル型の項目にはホバー下線を引かない */
.header-section .header-nav__menu-item:has(.lighthighted) .header-nav__underline::after,
.header-section .header-nav__menu-item:has(.highlighted) .header-nav__underline::after {
  display: none;
}

.header-section .header-nav__menu-item:has(.lighthighted) > .header-nav__underline:hover,
.header-section .header-nav__menu-item:has(.highlighted) > .header-nav__underline:hover {
  background: var(--mjhf-brand);
  color: #fff !important;
}

/* ---- ナビを右寄せにする（参照モック） ----
   モックはロゴが左端、ナビ群が右側に寄っている。
   標準レイアウト left_logo_left_menu はロゴの直後にナビが続くため、
   ナビの手前に余白を作って右へ送る。 */
.header-section .header__container-bottom theme-nav-bar,
.header-section .header-nav {
  margin-inline-start: auto;
}

/* ロゴとナビが同じ行に入る構成のとき、ナビ全体を右端へ寄せる */
.header-section .header-nav__menu {
  justify-content: flex-end;
}

/* ---- ナビを右端へ寄せる（参照モック） ----
   テーマの left_logo_left_menu は
     grid-template-columns: minmax(0,auto) minmax(0,auto) 1fr
   で、余白（1fr）が右端のアイコン列に入るため、ナビがロゴ寄りになる。
   ナビ列を 1fr、アイコン列を auto に入れ替えると、
   余白がナビ列に入り、中の flex-end でナビが右端へ寄る。

   モバイルはグリッドの領域定義そのものが異なるため、
   デスクトップ幅に限定して上書きする。 */
@media (min-width: 1000px) {
  .header__container[layout^="left_logo_left_menu"] .header__container-top-wrap {
    grid-template-columns: minmax(0px, auto) minmax(0px, 1fr) auto;
  }
}