.header-color-1 {
  background-color: #EDF0F5;
}

.header-color-2 {
  background-color: var(--sky-blue);
}

.header-color-3 {
  background-color: var(--dark-blue);
}

.header-sp {
  display: none;
}

/* =============================================================================
   header
============================================================================= */

header {
  display: flex;
  width: 100%;
  height: 120px;
  align-items: center;
  background-color: #fff;
  position: relative;
  /* Dropdown positioning context */
}

.header-l {
  width: 280px;
  display: flex;
  align-items: center;
  margin-left: 40px;
  flex-shrink: 0;
}

.header-l img {
  max-height: 70px;
  width: auto;
}

.header-r {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* -----------------------------------------------------------------------------
   header-upper
----------------------------------------------------------------------------- */

.header-upper {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  height: 50px;
}

.target-nav {
  display: flex;
  align-items: center;
  padding-left: 20px;
  flex: 1;
  justify-content: space-between;
  padding-right: 24px;
}

.target-nav a,
.target-nav a:visited,
.target-nav a:hover,
.target-nav a:active {
  text-decoration: none;
  color: #333;
}

.target-nav a {
  font-size: 14px;
  white-space: nowrap;
  line-height: 20px;
}

.utility-box {
  background-color: var(--dark-blue);
  display: flex;
  align-items: center;
  padding: 0 32px;
  border-bottom-left-radius: 20px;
  gap: 24px;
}

.utility-item,
.utility-item:visited,
.utility-item:hover,
.utility-item:active {
  color: #FFF;
  text-decoration: none;
}

.utility-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #FFF;
  text-decoration: none;
  font-size: 14px;
  height: 100%;
  cursor: pointer;
  white-space: nowrap;
}

.lang-menu {
  position: relative;
}

.white-icon {
  filter: brightness(0) invert(1);
  width: 24px;
  height: 24px;
}

.lang-arrow {
  width: 16px;
  height: 16px;
  transform: rotate(90deg);
}

/* -----------------------------------------------------------------------------
   header-lower
----------------------------------------------------------------------------- */

.header-lower {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  /* Reverted to center */
  height: 70px;
  gap: 16px;
}

.main-nav {
  display: flex;
  align-items: center;
  /* Reverted to center */
  gap: 40px;
}

.nav-item-container {
  display: flex;
  align-items: center;
  height: 70px;
  /* Explicit height to fill the area for hover */
  padding: 0;
  position: static;
  cursor: pointer;
}

.nav-link-item,
.nav-link-item:visited,
.nav-link-item:hover,
.nav-link-item:active {
  text-decoration: none;
  color: #333;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.64px;
  white-space: nowrap;
}

/* Dropdown Menu */
.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background-color: rgba(11, 49, 143, 0.8);
  z-index: 2000;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.nav-item-container:hover .dropdown-menu {
  display: block;
}

.dropdown-inner {
  display: flex;
  width: 100%;
  /* Optional: max-width constraint if needed, but image suggests full width or wide bar */
  min-height: 200px;
}

.dropdown-left {
  width: 320px;
  background-color: rgba(11, 49, 143, 0.8);
  padding-left: 80px;
  /* Slightly darker or different shade */
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 20px;
  font-weight: 500;
  flex-shrink: 0;
  line-height: 20px;
  /* 100% */
  letter-spacing: 1px;
}

.dropdown-right {
  flex: 1;
  padding: 40px 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 0px;
  align-content: center;
}

.dropdown-sub-link,
.dropdown-sub-link:visited,
.dropdown-sub-link:hover,
.dropdown-sub-link:active {
  color: #fff;
  text-decoration: none;
}

.dropdown-sub-link {
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: opacity 0.2s;
}

.dropdown-sub-link:hover {
  opacity: 0.8;
}

.arrow-right {
  width: 6px;
  height: 6px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
  margin-top: -2px;
  /* Slight adjustment */
}

/* sph_parts.css のページネーション用スタイルが干渉するため、beforeを無効化 */
.dropdown-menu .arrow-right::before {
  display: none;
}


.header-tools {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* -----------------------------------------------------------------------------
   header-search：検索欄
----------------------------------------------------------------------------- */

.header-search {
  border: 1px solid #A7A7A7;
  width: 176px;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  box-sizing: border-box;
  position: relative;
  background-color: #fff;
}

.header-search img {
  flex-shrink: 0;
  margin-left: 8px;
}

.request-btn {
  background-color: #009CE2;
  color: #FFF;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 32px;
  height: 48px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
}

.request-btn:hover,
.request-btn:active {
  background-color: #009CE2;
  color: #FFF;
  opacity: 1;
}

.request-btn img {
  width: 24px;
  height: 24px;
}

.header-search-input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 0;
  font-size: 14px;
}

.header-search-input::placeholder {
  color: #A7A7A7;
}

/* -----------------------------------------------------------------------------
   言語メニュー
----------------------------------------------------------------------------- */

.lang-menu {
  position: relative;
  cursor: pointer;
}

.lang-sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: -32px;
  background-color: #fff;
  z-index: 100;
  padding-top: 16px;
  border-top: 1px solid #E6E6E6;
}

.lang-item,
.lang-item:visited,
.lang-item:hover,
.lang-item:active {
  padding: 16px 16px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.64px;
  color: #0B318F;
}

.lang-item:hover {
  background-color: #f0f0f0;
}

.menu-close {
  background-color: var(--dark-blue);
  color: #FFF;
  padding: 16px 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.64px;
}

.menu-close img {
  width: 14.284px;
  height: 14.142px;
}

/* -----------------------------------------------------------------------------
   ハンバーガーメニュー
   ※ メニュー初期状態は上に隠す
----------------------------------------------------------------------------- */

.global-nav {
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  background: #fff;
  transform: translateY(-100%);
  transition: transform 0.3s ease;
  z-index: 999;
  box-sizing: border-box;
}

/* メニュー表示 */
.global-nav.active {
  transform: translateY(0);
  background-color: var(--dark-blue);
  padding: 96px 64px 40px 64px;
}

/* ハンバーガー・閉じる切り替え */
.menu-toggle {
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  z-index: 1000;
}

.menu-toggle .menu-icon-close {
  display: none;
}

/* メニューが開いている時のボタン（白背景に×ボタン） */
.menu-toggle.active {
  background-color: #FFF;
  width: 70px;
  height: 70px;
}

.menu-toggle.active .menu-icon {
  display: none;
}

.menu-toggle.active .menu-icon-close {
  display: block;
}

/* =============================================================================
   新モバイルナビ共通スタイル
============================================================================= */

.nav-utility {
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 0 0 24px;
  width: 100%;
}

.nav-utility .utility-item,
.nav-utility .utility-item:visited,
.nav-utility .utility-item:hover,
.nav-utility .utility-item:active {
  color: #FFF;
  text-decoration: none;
}

.nav-utility .utility-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.nav-utility .border-left {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.nav-utility .utility-item img {
  width: 48px;
  height: 48px;
}

/* -----------------------------------------------------------------------------
   nav-lang-sp：モバイル言語切替
----------------------------------------------------------------------------- */

.nav-lang-sp {
  display: none;
  padding: 0 0 24px;
  width: 100%;
}

.nav-lang-sp.is-open {
  display: block;
}

.lang-inner-sp {
  display: flex;
  flex-direction: column;
  background: #FFF;
  border-radius: 4px;
  overflow: hidden;
}

.lang-btn-sp,
.lang-btn-sp:visited,
.lang-btn-sp:hover,
.lang-btn-sp:active {
  color: #0B318F;
  text-decoration: none;
  background-color: transparent;
}

.lang-btn-sp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  color: #0B318F;
  text-decoration: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0.64px;
  border-bottom: 1px solid #0B318F;
}

.lang-btn-sp:last-of-type {
  border-bottom: none;
}

.lang-close-sp {
  background: #333;
  height: 48px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 16px;
  cursor: pointer;
}

.lang-close-sp img {
  width: 20px;
  height: 20px;
  filter: brightness(0) invert(1);
}

.lang-btn-sp .arrow-icon {
  width: 16px;
  height: 16px;
  filter: brightness(0) saturate(100%) invert(12%) sepia(85%) architecture(255%) hue-rotate(219deg) brightness(92%) contrast(101%);
  /* var(--dark-blue)近似色 */
}

/* -----------------------------------------------------------------------------
   nav-search-sp：モバイル検索バー
----------------------------------------------------------------------------- */

.nav-search-sp {
  display: none;
  padding: 0 0 24px;
  width: 100%;
  position: relative;
}

.nav-search-sp.is-open {
  display: block;
}

.search-inner-sp {
  display: flex;
  align-items: stretch;
  background: #FFF;
  height: 48px;
  border-radius: 4px;
  padding: 0 0 0 16px;
  overflow: hidden;
}

.nav-search-input-sp {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  padding: 0;
  background: transparent;
}

.search-submit-sp {
  background: #333;
  border: none;
  width: 56px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.search-submit-sp .white-icon {
  width: 36px;
  height: 36px;
  filter: brightness(0) invert(1);
}

/* -----------------------------------------------------------------------------
   nav-categories：アコーディオンカテゴリ
----------------------------------------------------------------------------- */

.nav-categories {
  display: flex;
  flex-direction: column;
  padding: 0 0 24px;
  gap: 16px;
}

.category-item {
  width: 100%;
}

.category-header,
.category-header:visited,
.category-header:hover,
.category-header:active,
.category-header a,
.category-header a:visited,
.category-header a:hover,
.category-header a:active {
  color: #FFF;
  text-decoration: none;
}

.category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 16px;
  font-size: 18px;
  font-weight: 700;
  border: 1px solid #FFF;
}

.category-header a {
  flex: 1;
}

.plus-icon {
  width: 20px;
  height: 20px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.category-item.is-open .plus-icon {
  transform: rotate(45deg);
  /* + を × に見せる */
}

/* サブナビゲーション */
.category-sub-nav {
  display: none;
  background-color: var(--dark-blue);
}

.category-item.is-open .category-sub-nav {
  display: block;
}

.sub-nav-link,
.sub-nav-link:visited,
.sub-nav-link:hover,
.sub-nav-link:active {
  color: #FFF;
  text-decoration: none;
}

.sub-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  color: #FFF;
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.sub-nav-link:last-child {
  border-bottom: none;
}

.sub-arrow {
  width: 14px;
  height: 14px;
}

.nav-targets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  padding: 0 0 40px;
}

.target-btn,
.target-btn:visited,
.target-btn:hover,
.target-btn:active {
  color: #0B318F;
  text-decoration: none;
}

.target-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  background: #FFF;
  border-radius: 24px;
  color: #0B318F;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

/* 最後のアイテムが奇数の場合は全幅（メディアの方は全幅にするのが一般的） */
/* ただし画像では最後も2列に見えるので、そのままグリッドでOK */

.nav-request-bottom {
  padding: 0;
}

.request-large-btn,
.request-large-btn:visited,
.request-large-btn:hover,
.request-large-btn:active {
  color: #FFF;
  text-decoration: none;
}

.request-large-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 56px;
  background-color: #009CE2;
  color: #FFF;
  text-decoration: none;
  border-radius: 4px;
  font-size: 18px;
  font-weight: 700;
}

.scroll-icon {
  width: 24px;
  height: 24px;
}

/* =============================================================================
   suggestion-box：サジェスト全体
============================================================================= */

.suggestion-box {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: white;
  border: 1px solid #ccc;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
  max-height: 250px;
  overflow-y: auto;
  z-index: 9999;
  display: none;
}

.suggestion-item {
  padding: 10px 12px;
  cursor: pointer;
  font-size: 14px;
}

.suggestion-item:hover {
  background: #f1f1f1;
}

.suggestion-item.active {
  background: #e8e8e8;
}

/* =============================================================================
   @media
============================================================================= */

@media screen and (max-width: 1400px) {

  .header-upper,
  .main-nav,
  .header-search,
  .request-btn {
    display: none;
  }

  .header-l {
    width: auto;
    margin-left: 20px;
  }

  .header-l img {
    max-height: 40px;
  }

  .header-sp {
    display: flex;
  }

  header {
    height: 64px;
  }

  .header-lower {
    height: 64px;
    width: 100%;
  }

  .header-content {
    width: 64px;
    height: 64px;
  }

  .menu-toggle {
    display: flex;
    gap: 0;
  }

  .header-tb {
    display: none;
  }

  .target-btn {
    width: 100%;
  }
}

/* =============================================================================
   @media：SP
============================================================================= */

@media (max-width: 767px) {
  .global-nav.active {
    padding: 96px 24px 40px 24px;
  }

  .nav-targets {
    gap: 16px 8px;
  }
}

@media (max-width: 425px) {
  .nav-middle-box {
    align-self: stretch;
    gap: 0;
  }

  .header-l {
    margin-left: 16px;
    margin-left: 16px;
  }
}

@media print {
  .header-r {
    display: none;
  }

  .header-l {
    margin-left: 0;
  }
}