@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html { scroll-behavior: smooth; }

.d-flex { display: flex; }
.d-none { display: none; }

.jcc { justify-content: center; }
.jcb { justify-content: space-between; }
.jce { justify-content: end; }

.aic { align-items: center; }

.fw400 { font-weight: 400; }
.fw500 { font-weight: 500; }
.fw600 { font-weight: 600; }
.fw700 { font-weight: 700; }

.pos-relative { position: relative; }
.pos-absolute { position: absolute; }

.cursor-pointer { cursor: pointer; }

.custom-badge { line-height: 0; }

.custom-badge .el-badge__content {
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  font-size: 8px;
  line-height: 0;
  border-radius: 4px;
  background-color: #767676;
  font-weight: 600;
}

/* ---------- CSS Header ---------- */
#header.header {
  background-color: rgba(1, 67, 154, 1);
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.08);
  color: #ffffff;
}

.header__top {
  padding: 9.5px 16px 12px;
}

.header__meta {
  margin-bottom: 15.5px;
  line-height: 17px;
  font-size: 14px;
  gap: 10px;
}

.header__user-info {
  flex-shrink: 0;
  gap: 19px;
}

.header__inner,
.header__brand-inner {
  gap: 22px;
}

.header__brand-wrap {
  flex: 1;
  min-width: 0;
}

.header__logo {
  width: 158px;
  flex-shrink: 1;
}

.header__logo img {
  line-height: unset;
}

.header__bottom {
  font-size: 16px;
  background: rgba(0, 0, 0, 0.1);
  gap: 24px;
}

.header .category-trigger {
  flex-shrink: 0;
  padding: 0 16px;
  width: 282px;
  height: 52px;
  background: #1765CE;
  border: unset;
}

.category-trigger__arrow {
  width: 8.5px;
  transform: rotate(90deg);
}

.category-trigger__txt {
  display: flex;
  align-items: center;
  color: #fff;
  gap: 8px;
}

.header__action-bar {
  margin-right: 16px;
  gap: 32px;
}

.header .action-bar {
  color: #ffffff;
  font-weight: bold;
  gap: 16px;
}

.header .action-bar__btn-wrap { gap: 6px; }

.header .action-bar__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 14px;
  min-width: 110px;
  height: 32px;
  font-size: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: inherit;
  text-decoration: none;
  gap: 6px;
}

.header .action-bar__btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.category-menu-wrap {
  position: relative;
}

.category-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  width: 282px;
  margin: 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid #bdcce0;
  border-top: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.category-menu.is-open {
  display: block;
}

.category-menu__item,
.category-submenu__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  min-height: 60px;
  font-size: 16px;
  line-height: 17px;
  color: #393939;
}

.header .category-submenu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  color: #393939;
  text-decoration: none;
}

.header .category-submenu__link:visited:hover {
  color: #393939;
}

.category-menu__arrow {
  width: 6px;
}

.category-menu__indicator {
  transform: rotate(90deg);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.category-menu__indicator.is-open {
  transform: rotate(270deg);
}

.header .category-submenu__link::after {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 10px;
  margin-left: 8px;
  background: url('/icons/icon-arrow-right-gray.svg') no-repeat center / contain;
}

.category-menu__item {
  position: relative;
}

.category-menu__item:not(:last-child) {
  border-bottom: 1px solid #eaeaea;
}

.category-menu__item:hover {
  background: #eaf2fd;
}

.category-menu__txt {
  display: flex;
  align-items: center;
  font-weight: bold;
  gap: 12px;
}

.category-menu__icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
}

.category-menu__label {
  width: 100%;
}

.category-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  width: 220px;
  margin: 0;
  list-style: none;
  background: #eaf2fd;
  border: 1px solid #bdcce0;
  border-top: 1px solid #ffffff;
  z-index: 10;
}

.category-menu__item:hover .category-submenu {
  display: block;
}

.category-submenu__item:not(:last-child) {
  border-bottom: 1px solid #ffffff;
}

.category-submenu__item:hover {
  background: #ced5df;
}

/* SP: submenu rendered inline/always-expanded instead of a hover flyout */
.category-submenu--static {
  position: static;
  width: 100%;
}

/* ---------- CSS Search ---------- */
.search-bar {
  flex: 1;
  width: 100%;
  max-width: 1070px;
  background-color: #ffffff;
  border-radius: 8px;
}

.header__category {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  max-width: 171px;
  margin-left: 12px;
}

.header__category-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 25px;
  padding: 4px 19px;
  border: none;
  border-radius: 20px;
  background-color: #ececec;
  font-size: 14px;
  font-weight: 600;
  line-height: 17px;
  color: #393939;
  cursor: pointer;
}

.header__category-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header__category-arrow {
  flex-shrink: 0;
  width: 10px;
  transition: transform 0.2s ease;
}

.header__category-trigger[aria-expanded="true"] .header__category-arrow {
  transform: rotate(180deg);
}

.header__category-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 30;
  min-width: 200px;
  max-height: 300px;
  overflow-y: auto;
  margin: 0;
  padding: 4px 0;
  list-style: none;
  background: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.header__category-dropdown.is-open {
  display: block;
}

.header__category-option {
  padding: 8px 16px;
  font-size: 14px;
  color: #393939;
  cursor: pointer;
  white-space: nowrap;
}

.header__category-option:hover {
  background-color: #f5f7fa;
}

.search-input { flex: 1; }

.header__suggest-box { width: 100%; }

.search-input__field {
  width: 100%;
  height: 48px;
  padding: 0 10px 0 8px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  line-height: 17px;
  font-weight: 500;
  color: #626262;
}

.search-input__field::placeholder {
  color: #626262;
}

.search-input__icon {
  margin-right: 16px;
  flex-shrink: 0;
}

.search-dialog__input-wrap {
  background-color: #EEF4FA;
  border: 1px solid #dbe4ec;
  border-radius: 8px;
  padding: 0 15px;
  margin: 0 5px 7px;
}

.search-drawer {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  left: 0;
  right: 0;
  z-index: 2002;
  margin: 0;
  padding: 0;
  top: var(--header-height, 76px);
  width: 100%;
  height: auto;
  min-height: 93px;
  background: #ffffff;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.search-drawer.is-open {
  visibility: visible;
  opacity: 1;
}

#header .search-drawer #axel-header-search {
  height: 100%;
  padding: 0;
  background-color: unset;
}

.search-dialog__form .search-input__field {
  height: 50px;
}

/* Scoped under .header, not .wave: .wave lives on the page layout, outside the captured
   <header> outerHTML, so a .wave-prefixed selector can never match on the shared snapshot. */
.header .el-button.search-bar__submit {
  margin-right: -1px;
  width: 54px;
  height: 48px;
  background-color: #393939;
  border: 0;
  border-radius: 0;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}

.header__actions {
  flex-shrink: 1;
  max-width: 529px;
  gap: clamp(4px, 1vw, 24px);
}

.header a {
  color: white;
  text-decoration: unset;
}

.header__nav {
  font-size: 12px;
  line-height: 15px;
  gap: 8px;
}

.header__actions .header__nav-item {
  width: 108px;
  height: 48px;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  color: #fff;
  gap: 2px;
}

.header__actions .header__nav-item:hover {
  background-color: rgba(0, 0, 0, 0.4);
  color: #fff;
}

.header__mobile-overlay {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2000;
  top: var(--header-height, 76px);
  height: calc(100% - var(--header-height, 76px));
  background-color: rgba(0, 0, 0, 0.12);
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.header__mobile-overlay.is-open {
  visibility: visible;
  opacity: 1;
}

.drawer-menu {
  visibility: hidden;
  position: fixed;
  top: var(--header-height, 76px);
  right: 0;
  bottom: 0;
  z-index: 2001;
  width: 82.05%;
  overflow-y: auto;
  background: #ffffff;
  padding: 16px 0;
  transform: translateX(100%);
  transition: transform 0.25s ease, visibility 0.25s ease;
}

.drawer-menu.is-open {
  visibility: visible;
  transform: translateX(0);
}

.drawer-menu__header {
  padding: 0 12px 12px;
  gap: 12px;
}

.drawer-menu__username {
  font-size: 11px;
  color: #393939;
}

.drawer-menu__close {
  flex-shrink: 0;
}

.drawer-menu__dropdown {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer-menu__link,
.drawer-menu__sublink {
  display: flex;
  align-items: center;
  width: 100%;
  border: none;
  background: none;
  text-decoration: none;
  text-align: left;
  cursor: pointer;
  gap: 4px;
}

.drawer-menu__link {
  padding: 0 10px;
  height: 54px;
}

.drawer-menu__link span,
.drawer-menu__sublink span {
  font-size: 16px;
  color: #023375;
  font-weight: bold;
}

.drawer-menu__toggle::after {
  position: absolute;
  content: '';
  flex-shrink: 0;
  top: calc(50% - 3.5px);
  right: 10px;
  width: 10px;
  height: 7px;
  background: url('/icons/icon-arrow-down.svg') no-repeat center / contain;
  transition: transform 0.2s ease;
}

.drawer-menu__item--expandable.is-expanded > .drawer-menu__toggle::after {
  transform: rotate(180deg);
}

.drawer-menu__submenu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer-menu__item--expandable.is-expanded > .drawer-menu__submenu {
  display: block;
}

.drawer-menu__sublink {
  padding: 0 10px 0 40px;
  min-height: 44px;
}

.drawer-menu__sublink span {
  color: #393939;
  font-weight: 500;
  font-size: 14px;
}

.drawer-menu .drawer-menu__badge {
  position: static;
  color: #fff;
  font-size: 8px;
  font-weight: 600;
}

.drawer-menu__submenu--subcategory .drawer-menu__sublink {
  padding-left: 60px;
}

/* Same rationale as .category-submenu__link::after above: no per-item <img>. */
.drawer-menu__submenu--subcategory .drawer-menu__sublink::after {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 10px;
  margin-left: 8px;
  background: url('/icons/icon-arrow-right.svg') no-repeat center / contain;
}

.drawer-menu__sublink--category {
  min-height: 60px;
  gap: 10px;
}

.drawer-menu__category-icon {
  flex-shrink: 0;
  max-width: 24px;
}

.drawer-menu__category-label {
  width: 100%;
}

.search-dialog__header {
  padding: 7px;
}

.search-dialog__header button {
  background-color: unset;
  border: unset;
}

.badge-number {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: -4px;
  right: -4px;
  min-width: 15px;
  height: 15px;
  padding: 0 4px;
  border-radius: 11px;
  background-color: #EF3434;
  color: #fff;
  font-size: 8px;
  font-weight: 600;
  line-height: 14px;
  text-align: center;
}

/* ---------- SUGGEST DROPDOWN (Unisuggest — ported from OCEAN_B2B) ---------- */
.search-suggest,
.history-suggest {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  max-height: 663px;
  overflow-y: scroll;
  border-radius: 0 0 16px 16px;
  padding: 20px 0;
  background-color: #fff;
  font-size: 0.85rem;
  flex-direction: column;
  border: 2px solid #e8e8e8;
  z-index: 20;
}

.search-suggest ul,
.history-suggest ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.search-suggest ul li a,
.history-suggest ul li a {
  display: block;
  text-decoration: none;
  padding: 2px 20px;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #393939;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search-suggest ul li a:hover,
.history-suggest ul li a:hover {
  color: #393939;
  background-color: #ededed;
}

.search-suggest ul:not(.keyword) li,
.history-suggest ul:not(.keyword) li {
  padding: 3px 0;
}

.search-suggest .suggest-key {
  color: #393939;
}

.history-suggest h2 {
  color: #888;
  font-size: 1rem;
  padding: 10px 20px 0;
  margin: 0;
}

.search-suggest ul:not(:first-child) {
  padding-top: 15px;
}

/* A group with no hits would still keep its padding and separator below. */
.search-suggest ul:empty {
  display: none;
}

.search-suggest ul:not(:last-child) {
  padding-bottom: 14px;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

.search-suggest ul.model-number li a::before,
.search-suggest ul.item-number li a::before,
.search-suggest ul.product-name li a::before,
.search-suggest ul.category li a::before,
.search-suggest ul.maker li a::before,
.search-suggest ul.tag li a::before {
  display: inline-block;
  margin-right: 14px;
  color: #fff;
  font-size: 13px;
  padding: 2px 0;
  width: 88px;
  text-align: center;
  font-weight: 700;
  border-radius: 3px;
}

.search-suggest ul.model-number li a::before {
  content: "型番";
  background-color: #338995;
}

.search-suggest ul.item-number li a::before {
  content: "品番";
  background-color: #931d28;
}

.search-suggest ul.product-name li a::before {
  content: "商品名";
  background-color: #316ef6;
}

.search-suggest ul.category li a::before {
  content: "カテゴリー";
  background-color: #aaa130;
}

.search-suggest ul.maker li a::before {
  content: "メーカー";
  background-color: #c74691;
}

.search-suggest ul.tag li a::before {
  content: "タグ";
  background-color: #46c793;
}

/* ---------- CSS Footer ---------- */
#footer.footer {
  overflow: visible;
  width: 100%;
  padding: 24px 36px;
  color: #ffffff;
  font-size: 14px;
  line-height: 17px;
  background-color: #393939;
}

#footer .footer__cta {
  top: -36px;
  right: 0;
  width: 119px;
  height: 36px;
  color: #ffffff;
  background-color: #023375;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#footer .footer__cta:hover {
  text-decoration: unset;
}

.header .header__sp-only {
  display: none;
}

@media screen and (max-width: 1000px) {
  .header__inner { flex-direction: column; }

  .header__brand-wrap { width: 100%; }

  .header .category-trigger {
    height: 79px;
  }

  .header__action-bar {
    flex-direction: column;
    align-items: flex-start;
    margin: 5px 16px 5px 0;
    gap: 5px;
  }
}

@media only screen and (max-width: 768px) {
  .header .header__pc-only {
    display: none;
  }

  .header .header__sp-only {
    display: block;
  }

  .header button.header__sp-only {
    display: flex;
    border: unset;
  }

  .header__hamburger-btn {
    background-color: unset;
  }

  .header__top {
    padding: 8px 12px;
  }

  .header__meta {
    line-height: 15px;
    margin-bottom: 8px;
  }

  .header__inner {
    flex-direction: row;
    width: 100%;
    gap: 14px;
  }

  .header__brand-wrap { width: auto; }

  .header__actions {
    max-width: 100%;
    gap: 8px;
  }

  .header__actions .header__nav-item {
    width: 40px;
    height: 40px;
    border-radius: 8px;
  }

  .header__catch-copy {
    font-size: 10px;
    line-height: 12px;
  }

  /* Unisuggest renders real <span> badge elements on SP (type: 'sp') instead of the
     ::before pseudo-content used on PC — ported from OCEAN_B2B, which had this and WAVE
     didn't, so SP suggestions rendered as unstyled plain text. */

  .search-input__field {
    padding: 0;
  }

  .search-suggest,
  .history-suggest {
    border: unset;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    min-height: calc(100vh - var(--header-height, 88px) - 85px);
    border-radius: unset;
  }

  .search-suggest ul li {
    display: flex;
    flex-direction: column;
    padding: 10px 20px !important;
    font-size: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    gap: 4px;
  }

  .search-suggest ul li a,
  .search-suggest ul li span {
    padding: 0;
    margin: 0;
    color: #393939;
    line-height: 17px;
  }

  .history-suggest ul li a {
    padding: 0;
  }

  .search-suggest ul li .search-suggest-item-title-common {
    padding: 4px 0;
    display: inline-block;
    width: 70px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    line-height: 15px;
    border-radius: 3px;
  }

  .search-suggest ul li .search-suggest-category-item-title { background: #aaa130; }
  .search-suggest ul li .search-suggest-maker-item-title { background: #c74691; }
  .search-suggest ul li .search-suggest-productno-item-title { background: #931d28; }
  .search-suggest ul li .search-suggest-modelno-item-title { background: #338995; }
  .search-suggest ul li .search-suggest-productname-item-title { background: #316ef6; }
  .search-suggest ul li .search-suggest-tag-item-title { background: #46c793; }

  .footer {
    padding: 16px 20px;
    text-align: center;
  }

  .footer__content {
    font-size: 12px;
    line-height: 15px;
  }
}