@charset "UTF-8";

/* =====================================================================
   ZSC 新ヘッダー（PC専用）
   - is-zsc ページ（!is_company()）でのみ読み込みます。
   - サンプル style.css 56–144 行の PC ヘッダーCSSを抽出し、既存テーマや
     下層ページへの影響を避けるため、すべて .site-header 配下にスコープし、
     グローバルリセット（*, body, a, ul, img …）は持ち込んでいません。
   - 方針A : PC = 新ヘッダー(.site-header) / モバイル(≤768px) = 現行のまま
   - 方針イ: 現行 .page-header-top（h1帯）は PC でも表示（新ヘッダーの下）
   ===================================================================== */

:root {
  --c-blue: #1B5DAA;
  --c-blue-deep: #15407e;
  --c-orange: #FFAE00;
  --c-cyan: #11B4C6;
}

/* ---- .site-header 配下にスコープしたリセット（グローバルには影響させない） ---- */
.site-header,
.site-header *,
.site-header *::before,
.site-header *::after { box-sizing: border-box; }
.site-header a { color: inherit; text-decoration: none; }
.site-header ul,
.site-header ol { list-style: none; padding: 0; margin: 0; }
.site-header img { max-width: 100%; height: auto; display: block; }
.site-header button { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; }

/* ============================================
   HEADER（PC）
============================================ */
.site-header {
  position: relative;
  z-index: 100;
  background: #fff;
  border-bottom: 1px solid #eee;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  font-weight: 500;
  height: 104px;
}
.site-header .header-inner {
  max-width: 1480px; margin: 0 auto;
  display: flex; align-items: center;
  padding: 7px 32px;
  height: 104px;
}
.site-header .logo { flex-shrink: 0; display: flex; align-items: center; }
.site-header .logo img {
  width: 180px; height: 40px; display: block;
  object-fit: contain;
}
.site-header .gnav { margin-left: 40px; margin-right: auto; min-width: 0; }
.site-header .gnav ul { display: flex; gap: 3px; flex-wrap: nowrap; }
.site-header .gnav a {
  font-size: 16px; font-weight: 500;
  color: #000;
  padding: 10px 16px;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}
.site-header .gnav a:hover { color: var(--c-blue); border-color: var(--c-blue); }

/* PC（≥769px）では、モバイル専用ナビ項目・ドロワー用CTAを隠す */
@media (min-width: 769px) {
  .site-header .gnav-mobile-only,
  .site-header .gnav-cta { display: none !important; }
  .site-header .gnav-top-link__sp { display: none; }
}

.site-header .header-cta { display: flex; gap: 4px; align-items: stretch; flex-shrink: 0; }
.site-header .hcta {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  width: 134px;
  height: 90px;
  max-width: 134px;
  max-height: 90px;
  flex-shrink: 0;
  padding: 18px 16px;
  border-radius: 6px;
  font-size: 16px; font-weight: 500; line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
  transition: opacity .2s, transform .15s;
}
.site-header .hcta:hover { opacity: .85; transform: translateY(1px); }
.site-header .hcta-ico { display: block; width: 26px; height: 26px; }
.site-header .hcta-ico svg,
.site-header .hcta-ico img { width: 100%; height: 100%; display: block; object-fit: contain; }
.site-header .hcta-check .hcta-ico { width: 22px; height: 31px; }
.site-header .hcta-dl .hcta-ico { width: 35px; height: 32px; }
.site-header .hcta-contact .hcta-ico { width: 38px; height: 33px; }
.site-header .hcta-label { display: block; }
.site-header .hcta-check {
  background: #11B4C6;
  color: #fff;
  padding: 18px 22px;
  box-shadow: 2px 2px 0.6px #1E8E9A;
}
.site-header .hcta-dl {
  background: #fff;
  color: var(--c-blue);
  border: 1px solid var(--c-blue);
  box-shadow: 2px 2px 0.6px #164172;
  letter-spacing: -.11em;
}
.site-header .hcta-contact {
  background: var(--c-blue);
  color: #fff;
  box-shadow: 2px 2px 0.6px #123B6C;
}
.site-header .hamburger { display: none; width: 36px; height: 36px; flex-direction: column; justify-content: center; gap: 4px; padding: 0 6px; }
.site-header .hamburger span { display: block; height: 2px; background: #333; border-radius: 1px; }

/* SEO用の見出し：site-header 内に置く h1。視覚的には非表示（スクリーン
   リーダー/クローラー向け）。HTMLソースには常に出力されるため、現行
   .page-header-top を非表示にしても h1 は維持される。 */
.site-header__h1 {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   PC / モバイル 表示切替（方針A）
   - 既定（モバイル想定）は新ヘッダーを隠す
   - PC（≥769px）で新ヘッダーを表示し、現行のロゴ帯・ナビ帯を隠す
   - h1 は site-header 内に持たせるため、旧 .page-header-top（h1帯）は全幅で非表示
============================================ */
.is-zsc .site-header { display: none; }
.is-zsc .page-header-top { display: none; }

@media (min-width: 769px) {
  .is-zsc .site-header { display: block; }
  .is-zsc .page-header { display: none; }
  .is-zsc .nav-wrap { display: none; }
}

/* ============================================
   PC幅での段階的縮小（サンプルと同じ挙動）
   - 重なる前に縮小を開始し、横スクロール（リサイズ時のカクつき）を防ぐ
   - サンプル style.css 6931–7031 を .site-header 配下にスコープして移植
   - 769px未満はモバイル(現行ヘッダー)に切替わるため min-width:769px 起点
============================================ */

/* Step 0（~1400px以下）：重なる前に縮小開始 */
@media (min-width: 769px) and (max-width: 1400px) {
  .site-header .header-inner { padding: 7px 16px; gap: 12px; }
  .site-header .logo img { width: 160px; height: 36px; }

  .site-header .gnav { margin-left: 16px; }
  .site-header .gnav ul { gap: 0; }
  .site-header .gnav a { padding: 10px 10px; }

  .site-header .hcta {
    width: 120px;
    height: 81px;
    max-width: 120px;
    max-height: 81px;
    gap: 9px;
    padding: 16px 14px;
    font-size: 14px;
  }
  .site-header .hcta-check { padding: 16px 20px; }
  .site-header .hcta-ico { width: 23px; height: 23px; }
  .site-header .hcta-check .hcta-ico { width: 20px; height: 28px; }
  .site-header .hcta-dl .hcta-ico { width: 31px; height: 29px; }
  .site-header .hcta-contact .hcta-ico { width: 34px; height: 30px; }
}

/* Step 1（~1280px以下） */
@media (min-width: 769px) and (max-width: 1280px) {
  .site-header .header-inner { padding: 7px 12px; gap: 8px; }
  .site-header .logo img { width: 140px; height: 31px; }

  .site-header .gnav { margin-left: 12px; }
  .site-header .gnav a { padding: 10px 8px; font-size: 14px; }

  .site-header .hcta {
    width: 104px;
    height: 70px;
    max-width: 104px;
    max-height: 70px;
    gap: 8px;
    padding: 14px 12px;
    font-size: 12px;
  }
  .site-header .hcta-check { padding: 14px 17px; }
  .site-header .hcta-ico { width: 20px; height: 20px; }
  .site-header .hcta-check .hcta-ico { width: 17px; height: 24px; }
  .site-header .hcta-dl .hcta-ico { width: 27px; height: 25px; }
  .site-header .hcta-contact .hcta-ico { width: 30px; height: 26px; }
}

/* Step 2（~1092px以下） */
@media (min-width: 769px) and (max-width: 1092px) {
  .site-header .header-inner { padding: 6px 8px; gap: 6px; }
  .site-header .logo img { width: 120px; height: 27px; }

  .site-header .gnav { margin-left: 8px; }
  .site-header .gnav a { padding: 8px 6px; font-size: 13px; }

  .site-header .hcta {
    width: 90px;
    height: 60px;
    max-width: 90px;
    max-height: 60px;
    gap: 6px;
    padding: 12px 10px;
    font-size: 11px;
  }
  .site-header .hcta-check { padding: 12px 14px; }
  .site-header .hcta-ico { width: 17px; height: 17px; }
  .site-header .hcta-check .hcta-ico { width: 15px; height: 21px; }
  .site-header .hcta-dl .hcta-ico { width: 23px; height: 21px; }
  .site-header .hcta-contact .hcta-ico { width: 26px; height: 22px; }
}

/* Step 3（~870px以下）：最小サイズ（まだPCレイアウト） */
@media (min-width: 769px) and (max-width: 870px) {
  .site-header .header-inner { padding: 6px 6px; gap: 4px; align-items: center; }
  .site-header .logo img { width: 100px; height: 22px; }

  .site-header .gnav { min-width: 0; margin-left: 4px; }
  .site-header .gnav ul { gap: 0; flex-wrap: nowrap; }
  .site-header .gnav li { min-width: 0; flex: 0 0 auto; }
  .site-header .gnav a {
    white-space: nowrap;
    padding: 6px 4px;
    font-size: 12px;
  }

  .site-header .hcta {
    width: 76px;
    height: 51px;
    max-width: 76px;
    max-height: 51px;
    gap: 5px;
    padding: 10px 8px;
    font-size: 10px;
    border-radius: 5px;
  }
  .site-header .hcta-check { padding: 10px 12px; }
  .site-header .hcta-ico { width: 14px; height: 14px; }
  .site-header .hcta-check .hcta-ico { width: 12px; height: 17px; }
  .site-header .hcta-dl .hcta-ico { width: 20px; height: 18px; }
  .site-header .hcta-contact .hcta-ico { width: 22px; height: 19px; }
}

/* ============================================
   追従メニュー（fixed-header）内のスクロール
   - 画面高が低い場合に項目＋CTAがはみ出してもメニュー内で確実にスクロールできるようにする
   - overscroll-behavior: contain で背面ページへのスクロール伝播（メニューが閉じる現象）を防止
============================================ */
.fixed-header-menu {
  height: 100vh;
  height: 100dvh;
  max-width: calc(100vw - 80px);
}
.fixed-header-menu__container {
  height: 100%;
  /* 最後の項目がチャットボットボタンに隠れずスクロールできるよう余白を確保（sample仕様） */
  padding-bottom: 240px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ============================================
   モバイル：ドロワー内CTAボタン（btn01_sp/btn02_sp の画像をテキスト化）
   - sample の緑ボタン（#79b001）に合わせる
============================================ */
.is-zsc .nav-btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  max-width: 320px;
  margin: 0 auto;
  padding: 1em;
  background-color: #79b001;
  color: #fff;
  font-weight: bold;
  letter-spacing: .1em;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
}
.is-zsc .nav-btn-cta:hover { opacity: .75; color: #fff; text-decoration: none; }
.is-zsc .nav-btn-cta > img {
  width: 25px;
  max-width: 25px;
  height: auto;
  flex-shrink: 0;
  margin: 0;
}

/* ============================================
   モバイル：ハンバーガー（navbar-toggle）を sample の .hamburger に合わせる
   - 42x42 / 枠線 #1B5DAA / 36px幅バー3本 + "MENU" ラベル
============================================ */
@media (max-width: 767px) {
  .is-zsc .navbar-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    float: right;
    width: 42px;
    height: 42px;
    margin: 8px -7px 0 0;
    padding: 0 0 6px 0;
    background: transparent;
    background-image: none;
    border: 1px solid #1B5DAA;
    border-radius: 0;
    box-sizing: border-box;
  }
  .is-zsc .navbar-toggle .icon-bar {
    display: block;
    width: 36px;
    height: 1px;
    margin: 0;
    background-color: #1B5DAA;
    border-radius: 0;
  }
  .is-zsc .navbar-toggle .icon-bar + .icon-bar { margin-top: 0; }
  .is-zsc .navbar-toggle::after {
    content: "MENU";
    margin-top: 0;
    font-family: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0;
    color: #1B5DAA;
  }
}