/* ------------------------------ */
/* Site Header (header.html 専用) */
/* 既存 .header / .header-ai 等とは命名を分離 */
/* ------------------------------ */

.b-site-header {
  /* 既存 style.css / style_sp.css の header 指定を打ち消す */
  box-sizing: border-box;
  display: block;
  position: relative;
  width: 100%;
  max-width: none;
  padding: 0 !important;
  overflow: visible !important;
  border: none;
  border-bottom: none !important;
  background-color: #fff;
  z-index: auto;
  font-family: "M PLUS Rounded 1c", "Rounded Mplus 1c", sans-serif;
}

/*
 * 既存 style_sp.css の
 *   nav { display: none; position: absolute; top: 11.4vw; ... }
 * が全 <nav> に効くため、新ヘッダー／パンくずでは明示リセットする
 * ※サブナビ(.b-site-header__subnav)はSPで非表示にするため、
 *   display:block の強制はグロナビ／パンくずに限定する
 */
.b-site-header__nav,
.b-site-header__subnav,
.b-site-breadcrumb {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: none;
  min-width: 0;
  z-index: auto !important;
  flex-wrap: unset;
  align-items: unset;
  justify-content: unset;
}

.b-site-header__nav,
.b-site-breadcrumb {
  display: block !important;
}

/* PC / Tab では緑サブナビを表示（SPでは後述メディアクエリで非表示） */
.b-site-header__subnav {
  display: block;
}

.b-site-header *,
.b-site-header *::before,
.b-site-header *::after,
.b-site-breadcrumb *,
.b-site-breadcrumb *::before,
.b-site-breadcrumb *::after {
  box-sizing: border-box;
}

.b-site-header__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 40px 0;
}

.b-site-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 72px;
  padding: 8px 0 12px;
}

.b-site-header__logo {
  display: block;
  flex-shrink: 0;
  width: 200px;
  transition: opacity 0.2s ease;
}

.b-site-header__logo:hover {
  opacity: 0.8;
}

.b-site-header__logo img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

/* おたすけAI（既存素材流用・専用クラス） */
.b-site-header__ai {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.b-site-header__ai-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 216px;
}

.b-site-header__ai-caption {
  display: block;
  margin: 0 0 4px;
  color: #e85643;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.b-site-header__ai-input {
  width: 100%;
  height: 44px;
  padding: 12px;
  border: none;
  border-radius: 4px;
  background-color: #f1f0f0;
  color: #333;
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  line-height: 1;
}

.b-site-header__ai-input::placeholder {
  color: #d4cdcd;
}

.b-site-header__ai-input:focus {
  outline: 2px solid #1b792b;
}

.b-site-header__ai-button {
  display: block;
  flex-shrink: 0;
  width: 64px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.b-site-header__ai-button:hover {
  opacity: 0.8;
}

.b-site-header__ai-button img {
  display: block;
  width: 100%;
  height: auto;
}

/* グローバルナビ */
.b-site-header__nav,
.b-site-header nav.b-site-header__nav {
  position: relative !important;
}

.b-site-header__nav {
  border-top: 3px solid #e0e0e0;
  border-bottom: 3px solid #e0e0e0;
  background-color: #fff !important;
  overflow: visible;
  transition: transform 0.25s ease;
  will-change: transform;
}

/* グロナビ追従用スペーサー（JSが高さを入れる） */
.b-site-header__nav-spacer {
  display: none;
  width: 100%;
  height: 0;
  pointer-events: none;
}

.b-site-header__nav-spacer.is-active {
  display: block;
}

/* グロナビ固定表示（既存 position:static !important を上書き） */
.b-site-header nav.b-site-header__nav.is-fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  width: 100% !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.b-site-header nav.b-site-header__nav.is-fixed.is-hidden {
  transform: translateY(-100%);
}

/* 横スクロール可能時は右端フェード（幅は問わず / 下部はネイティブのバー） */
.b-site-header__nav.is-scrollable:not(.is-at-end)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 40px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%);
}

.b-site-header__nav-list {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 16px 28px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 16px 24px;
  list-style: none;
  box-sizing: border-box;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #5ba3d9 #e8f2fa;
}

.b-site-header__nav-list > li {
  flex-shrink: 0;
}

/* 横スクロールバー */
.b-site-header__nav-list::-webkit-scrollbar {
  height: 8px;
}

.b-site-header__nav-list::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.b-site-header__nav-list::-webkit-scrollbar-thumb {
  background: #5ba3d9;
  border-radius: 4px;
}

.b-site-header__nav-list::-webkit-scrollbar-track {
  background: #e8f2fa;
}

.b-site-header__nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.b-site-header__nav-link:hover {
  opacity: 0.8;
}

.b-site-header__nav-icon {
  display: block;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* .kagaku_area a { color: #00b41e } を打ち消す */
.b-site-header__nav-link--jiyuu,
.b-site-header__nav-link--jiyuu:hover { color: #067ab0 !important; }
.b-site-header__nav-link--kagaku,
.b-site-header__nav-link--kagaku:hover { color: #1b792b !important; }
.b-site-header__nav-link--video,
.b-site-header__nav-link--video:hover { color: #d31092 !important; }
.b-site-header__nav-link--news,
.b-site-header__nav-link--news:hover { color: #606060 !important; }
.b-site-header__nav-link--work,
.b-site-header__nav-link--work:hover { color: #c75001 !important; }
.b-site-header__nav-link--manga,
.b-site-header__nav-link--manga:hover { color: #ad2616 !important; }
.b-site-header__nav-link--factory,
.b-site-header__nav-link--factory:hover { color: #8a3aa8 !important; }
.b-site-header__nav-link--jiten,
.b-site-header__nav-link--jiten:hover { color: #4b5fd2 !important; }
.b-site-header__nav-link--parents,
.b-site-header__nav-link--parents:hover { color: #dc164a !important; }
.b-site-header__nav-link--teachers,
.b-site-header__nav-link--teachers:hover { color: #9b042d !important; }

/* カテゴリサブナビ（科学） ※Figma 556:1998 / SPでは非表示 */
.b-site-header__subnav {
  background-color: #1b792b;
}

.b-site-header__subnav-list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  max-width: 1500px;
  /* Figma高さ45px → 4pxグリッドで44px、テキストを垂直中央 */
  min-height: 44px;
  margin: 0 auto;
  padding: 0 40px;
  list-style: none;
}

.b-site-header__subnav-list > li {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.b-site-header__subnav-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 16px;
  /* .kagaku_area a の緑指定を打ち消す */
  color: #fff !important;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.b-site-header__subnav-link:hover {
  color: #fff !important;
  opacity: 0.85;
}

.b-site-header__subnav-link.is-current {
  color: #fff !important;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* パンくず（Figma 542:6843 / PC・Tab・SP共通） */
.b-site-breadcrumb {
  box-sizing: border-box;
  width: 100%;
  max-width: 1250px;
  margin: 0 auto;
  padding: 16px 40px 16px 16px;
  font-family: "M PLUS Rounded 1c", "Rounded Mplus 1c", sans-serif;
  background: transparent;
}

.b-site-breadcrumb__list {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.75;
  font-size: 0; /* inline 間の空白を消す */
}

.b-site-breadcrumb__item {
  display: inline;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.75;
  vertical-align: baseline;
}

/* 区切り矢印（最後の項目以外） */
.b-site-breadcrumb__item:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 11px;
  margin: 0 8px 0 4px;
  vertical-align: -1px;
  background: url("../images/site-header/icon-chevron.svg") no-repeat center / contain;
}

.b-site-breadcrumb__link {
  display: inline;
  white-space: nowrap;
  /* 各エリアの a 色上書きを打ち消す */
  color: #979696 !important;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.b-site-breadcrumb__link:hover {
  color: #979696 !important;
  opacity: 0.8;
}

.b-site-breadcrumb__home-icon {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 4px;
  vertical-align: -2px;
  object-fit: contain;
}

.b-site-breadcrumb__current {
  display: inline;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  color: #333 !important;
}

/* Tab */
@media screen and (max-width: 1023px) {
  .b-site-header__inner {
    padding: 8px 24px 0;
  }

  .b-site-header__top {
    min-height: 64px;
    padding: 8px 0 12px;
  }

  .b-site-header__logo {
    width: 160px;
  }

  .b-site-header__nav-list {
    gap: 12px 28px;
    padding: 12px 24px;
    justify-content: flex-start;
  }

  .b-site-header__nav-list > li {
    flex-shrink: 0;
  }

  .b-site-header__nav-link {
    font-size: 14px;
  }

  .b-site-header__nav-icon {
    width: 24px;
    height: 24px;
  }

  /* Tab用緑サブナビ（Figma 556:2267 / 834px）※SPではない */
  .b-site-header__subnav-list {
    gap: 0;
    min-height: 44px;
    padding: 0 40px;
    justify-content: space-between;
    overflow: visible;
  }

  .b-site-header__subnav-list > li {
    flex: 0 0 auto;
  }

  .b-site-header__subnav-link {
    width: auto;
    font-size: 16px;
  }

  .b-site-breadcrumb {
    padding: 12px 24px;
  }
}

/* SP: 緑サブナビ非表示、AIはアイコンのみ、パンくずはグロナビ直下 */
@media screen and (max-width: 599px) {
  /* style_sp.css の header / nav を再上書き（同一メディアクエリ内で確実に勝たせる） */
  .b-site-header {
    padding: 0 !important;
    border-bottom: none !important;
    overflow: visible !important;
    position: relative;
    z-index: auto;
  }

  .b-site-header__nav,
  .b-site-breadcrumb {
    display: block !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    z-index: auto !important;
    width: 100% !important;
  }

  /* 案内オーバーレイ用（上の static をグロナビだけ上書き） */
  .b-site-header nav.b-site-header__nav {
    position: relative !important;
  }

  .b-site-header nav.b-site-header__nav.is-fixed {
    position: fixed !important;
  }

  .b-site-header__inner {
    padding: 8px 16px 0;
  }

  .b-site-header__top {
    min-height: 56px;
    padding: 8px 0;
    gap: 12px;
  }

  .b-site-header__logo {
    width: 140px;
  }

  .b-site-header__ai-left {
    display: none;
  }

  .b-site-header__ai-button {
    width: 50px;
  }

  .b-site-header__nav-list {
    gap: 12px 28px;
    padding: 12px 16px;
    justify-content: flex-start;
  }

  .b-site-header__nav-link {
    font-size: 14px;
  }

  .b-site-header__nav-icon {
    width: 20px;
    height: 20px;
  }

  /* 緑カテゴリサブナビ（.b-site-header__subnav）は SP のみ非表示 */
  .b-site-header__subnav,
  .b-site-header nav.b-site-header__subnav {
    display: none !important;
  }

  .b-site-breadcrumb {
    padding: 12px 16px 8px;
    background: transparent !important;
  }

  .b-site-breadcrumb__item {
    font-size: 11px;
  }
}