.s-iomaHeader {
  height: 5.9rem;
  font-family: var(--font-ja);
}

.s-iomaHeader .s-header-wrap {
  height: 5.9rem;
}

.s-iomaHeader .s-header-wrap__logo {
  width: 18rem;
  height: 3.3rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.s-iomaHeader .s-iomaHeader__logoImage {
  width: 18rem;
  height: 3.3rem;
}

.s-iomaHeader .s-header-wrap__nav {
  top: 1.45rem;
  left: 1rem;
  width: 2.4rem;
  height: 3rem;
}

.s-iomaHeader .s-header-wrap__utility {
  top: 1.45rem;
  right: 1rem;
  width: 7rem;
  height: 3rem;
}

.s-iomaHeader .s-header-utilityList {
  gap: 1rem;
}

.s-iomaHeader .s-header-utilityList__item {
  width: 3rem;
}

.s-iomaHeader .s-iomaHeader__utilityIcon--user {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
}

.s-iomaHeader .s-iomaHeader__utilityIcon--user img {
  width: 2.2rem;
  height: 2.45rem;
}

.s-iomaHeader .s-header__cartCnt {
  top: -0.55rem;
  right: -0.63rem;
  min-width: 1.9rem;
  height: 1.9rem;
  padding: 0 0.15rem;
  background: var(--color-brand-accent-red);
  font-family: var(--font-ja);
  font-size: 1rem;
}

.s-iomaHeader .s-header-navBlok__nav {
  top: 5.9rem;
  height: calc(100vh - 5.9rem);
  padding: 1.5rem 0 0;
  border-top: none;
}

.s-iomaHeader .s-header-navBlok__nav::after {
  height: 10rem;
}

.s-iomaHeader .s-header-navBlok__openBtn > img {
  display: block;
  width: 2.4rem;
  height: 1.8rem;
}

.s-iomaHeader .s-header-navBlok__openBtn:not(.active)::before,
.s-iomaHeader .s-header-navBlok__openBtn:not(.active)::after,
.s-iomaHeader .s-header-navBlok__openBtn:not(.active) > span {
  display: none;
}

.s-iomaHeader .s-header-navBlok__openBtn.active > img {
  display: none;
}

.s-iomaHeader .s-header-userNav {
  padding: 0 1.5rem;
  margin-bottom: 0;
}

.s-iomaHeader .s-header-userNav__head {
  padding-bottom: 0.5rem;
  border-color: var(--color-black);
}

.s-iomaHeader .s-iomaHeader__accountIcon {
  width: 2.2rem;
  height: 2.45rem;
  margin-right: 1.6rem;
}

.s-iomaHeader .s-header-userNav__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.028rem;
}

.s-iomaHeader .s-header-userNav__navLink {
  border-color: var(--color-gray);
}

.s-iomaHeader .s-header-userNav__navLink > a {
  padding: 1.4rem 0;
  font-size: 1.4rem;
  line-height: 1.6;
  letter-spacing: 0.028rem;
}

.s-iomaHeader__mobileNavGroup {
  display: block;
}

.s-iomaHeader__mobileNavTitle {
  display: block;
  padding: 1.4rem 1.5rem;
  background: var(--color-brand-accent-red);
  font-size: 1.4rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.028rem;
  color: var(--color-white);
}

.s-iomaHeader__mobileNavItem {
  border-bottom: 1px solid var(--color-gray);
}

.s-iomaHeader__mobileNavList a {
  display: block;
  padding: 1.4rem 1.5rem;
  font-size: 1.4rem;
  line-height: 1.6;
  letter-spacing: 0.028rem;
}

.s-iomaHeader__mobileNavList a:focus-visible {
  outline: 2px solid var(--color-brand-accent-red);
  outline-offset: 2px;
}

.s-iomaHeader .s-header-userNav__navLink > a:focus-visible {
  outline: 2px solid var(--color-brand-accent-red);
  outline-offset: 2px;
}

.s-iomaHeader .s-headerModalBox {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 2.5rem 1.5rem;
  background: var(--color-overlay);
}

.s-iomaHeader .s-headerModalBox::after {
  display: none;
}

.s-iomaHeader .s-headerModalBox__outer {
  width: 100%;
  max-width: 96rem;
  max-height: calc(100vh - 5rem);
  overflow: hidden;
}

.s-iomaHeader .s-headerModalBox__outer > form {
  display: flex;
  flex-direction: column;
  max-height: inherit;
}

.s-iomaHeader .s-headerModalBox__inner {
  flex: 1 1 auto;
  margin: 0;
  overflow-y: auto;
}

.s-iomaHeader .s-headerModalBoxHeding__closeBtn {
  color: var(--color-primary);
}

.s-iomaHeader .s-headerRefinedSearchBox {
  padding: 1.9rem 1.5rem;
}

/* 上の .s-headerModalBox__inner で margin を 0 にしたため、W2 既定の margin: 0 0 4rem（common.css 6796-6802・768px 以上）が
   消えてボタン行が中身に密着していました。__inner はスクロール領域なので余白は margin では戻さず、ボタン行の padding-top で作ります。
   768px 以上の 4rem はカンプの Footer 上パディング 40px（Figma 56:1026 Desktop）と同値です。
   SP の 2rem は**カンプからの意図的な差**で、カンプ（Figma 56:1057 Mobile）の Footer 上パディングは 0 です
   （2026-09-14 髙橋指示。中身側の 1.9rem だけでは実機で詰まって見えるため）。実測は工程4（P4-DBG-02）。 */
.s-iomaHeader .s-headerModalBoxFooterBtn {
  padding-top: 2rem;
}

.s-iomaHeader .s-headerRefinedSearchBox-item + .s-headerRefinedSearchBox-item {
  margin-top: 2.4rem;
}

@media screen and (min-width: 768px) {
  .s-iomaHeader .s-headerModalBox {
    align-items: center;
    padding: 4rem;
  }

  .s-iomaHeader .s-headerModalBox__outer {
    max-height: calc(100vh - 8rem);
  }

  .s-iomaHeader .s-headerModalBoxHeding__closeBtn {
    color: var(--color-black);
  }

  /* カンプの Footer 上パディング 40px（Figma 56:1026 Desktop）。SP の 2rem から引き上げます。 */
  .s-iomaHeader .s-headerModalBoxFooterBtn {
    padding-top: 4rem;
  }

  .s-iomaHeader .s-headerRefinedSearchBox {
    padding: 4rem;
  }
}

@media screen and (min-width: 992px) {
  .s-iomaHeader {
    height: 8.5rem;
  }

  .s-iomaHeader .s-header-wrap {
    height: 8.5rem;
    padding: 0 3rem;
    gap: 4rem;
    border-bottom: none;
  }

  .s-iomaHeader .s-header-wrap__logo {
    width: 24.5rem;
    height: 4.5rem;
    position: static;
    transform: none;
  }

  .s-iomaHeader .s-iomaHeader__logoImage {
    width: 24.5rem;
    height: 4.5rem;
  }

  .s-iomaHeader .s-header-wrap__nav {
    position: static;
    width: auto;
    height: 8.5rem;
  }

  .s-iomaHeader .s-header-wrap__utility {
    width: auto;
    height: auto;
    column-gap: 2rem;
  }

  .s-iomaHeader .s-header-utilityList {
    gap: 2rem;
  }

  .s-iomaHeader .s-header-navBlok__nav {
    height: 8.5rem;
    padding: 0;
  }

  .s-iomaHeader .s-header-userNav {
    top: 8.5rem;
    height: calc(100vh - 8.5rem);
    padding: 2rem;
  }

  .s-iomaHeader .s-header-miniCart {
    top: 8.5rem;
    height: calc(100vh - 8.5rem);
  }

  .s-iomaHeader .s-header-miniCart-body {
    max-height: calc(100vh - 8.5rem - 6rem - 10.9rem);
  }

  .s-iomaHeader .s-header-userNav__title {
    font-size: 1.1rem;
  }

  .s-iomaHeader .s-header-userNav__navLink > a {
    padding: 0.8rem 0;
    font-size: 1.1rem;
  }

  .s-iomaHeader__desktopNav {
    display: flex;
    align-items: center;
    gap: 3rem;
    height: 8.5rem;
  }

  .s-iomaHeader__desktopNavItem {
    display: block;
    height: 100%;
  }

  .s-iomaHeader__desktopNavItem > a {
    display: flex;
    align-items: center;
    height: 100%;
    font-size: 1.7rem;
    font-weight: 500;
    letter-spacing: 0.136rem;
  }

  .s-iomaHeader__desktopNavItem > a:focus-visible,
  .s-iomaHeader__megaMenu a:focus-visible {
    outline: 2px solid var(--color-brand-accent-red);
    outline-offset: 2px;
  }

  /* Theme のホバー透過は全称 a:hover ではなくセレクタごとに当てる方式です（common.css 143 の --hover-opacity）。
     W2 の .s-header-contentsNavBlock / .s-header-categoryNav 系を BRX の __desktopNav / __megaMenu 系へ差し替えた際に
     この2つだけ :hover を書いておらず、PC ナビとメガメニュー内リンクで透過が効いていませんでした（デバッグ依頼 No.10）。
     SP メニュー（.s-iomaHeader__mobileNavList）は u-hidden-lg-up で 992px 未満専用のため対象外です。 */
  @media (hover: hover) {
    .s-iomaHeader__desktopNavItem > a:hover,
    .s-iomaHeader__megaMenuList a:hover {
      opacity: var(--hover-opacity);
      transition: opacity var(--transition-default);
    }
  }

  .s-iomaHeader__megaMenu {
    display: none;
    position: fixed;
    top: 8.5rem;
    left: 0;
    z-index: 1001;
    width: 100%;
    padding: 3rem;
    /* 表示領域が狭いというデザイナー指摘（デバッグ依頼 No.20）への対応で下だけ広げます。
       PC のメガメニューはカンプ（TOP_FIX）に無く、実寸の出所は指示の「+2rem 程度」だけです。実測は工程4（P4-DBG-04）。 */
    padding-bottom: 5rem;
    border-top: 1px solid var(--color-gray);
    background: var(--color-white);
  }

  .s-iomaHeader__desktopNavItem--products:hover .s-iomaHeader__megaMenu,
  .s-iomaHeader__desktopNavItem--products:focus-within .s-iomaHeader__megaMenu {
    display: block;
  }

  .s-iomaHeader__megaMenuInner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4rem;
    width: 100%;
    max-width: 114rem;
    margin: 0 auto;
  }

  /* 見出しは color 未指定で継承の黒でした（デバッグ依頼 No.20）。赤は Figma Variable brand/accent-red = #b12d23 で、
     customize.css の --color-brand-accent-red（= --color-primary）と同値です。
     SP の同じ見出し .s-iomaHeader__mobileNavTitle はカンプ（Figma 73:2438 HamburgerMenu/DefinitionTitle）が
     赤背景・白文字で現行と一致するため対象外です。 */
  .s-iomaHeader__megaMenuTitle {
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.08rem;
    color: var(--color-brand-accent-red);
  }

  .s-iomaHeader__megaMenuList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.2rem 2rem;
  }

  .s-iomaHeader__megaMenuList a {
    display: block;
    font-size: 1.4rem;
    letter-spacing: 0.056rem;
  }
}