/* ==========================================================
   Oblige Header (ob-header版 / Cocoonと干渉しない)
   - 固定ヘッダー
   - 日本語＋英語（2段）
   - お問い合わせCTA
   - SPはハンバーガー → #navi.active（menu.js）
========================================================== */

:root{
  --header-h: 72px;
  --header-bg: rgba(255,255,255,.88);
  --header-border: rgba(0,0,0,.08);
  --header-text: #12072c;
}

/* ===== ヘッダー固定（外枠はCocoonのIDを利用） ===== */
#header-container,
.header-container{
  position: fixed !important;
  top: 0; left: 0; right: 0;
  width: 100%;
  height: var(--header-h) !important;
  z-index: 99999;
  background: var(--header-bg) !important;
  border-bottom: 1px solid var(--header-border) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}



/* Cocoonラッパーの高さだけ整える（レイアウトは触らない） */
#header-container-in, .header-container-in,
#header, .header,
#header-in, .header-in{
  height: var(--header-h) !important;
  min-height: var(--header-h) !important;
}

/* タグライン非表示 */
.tagline{ display:none !important; }

/* ==========================================================
   ここが本体：.ob-header だけを支配
========================================================== */
#header-in .ob-header{
  height: var(--header-h);
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  box-sizing: border-box;
  padding: 0 18px !important;
  flex-wrap: nowrap !important;           /* ★2段落ち禁止 */
}

/* ロゴは左固定 */
#header-in .ob-logo{
  display:flex !important;
  align-items:center !important;
  margin-right: auto !important;          /* ★右を押し出す */
  flex: 0 0 auto !important;
}
#header-in .ob-logo a{
  display:inline-flex !important;
  align-items:center !important;
  text-decoration:none !important;
}
#header-in .header-site-logo-image{
  height: 34px !important;
  width: auto !important;
  display:block !important;
  object-fit: contain !important;
}

/* ===== PCナビ ===== */
#header-in .ob-nav{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  width: auto !important;
  flex: 0 0 auto !important;
  position: static !important;
  transform: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

#header-in .ob-nav .navi-in{
  display:flex !important;
  align-items:center !important;
  width: auto !important;
}

#header-in .ob-nav .navi-in > ul{
  display:flex !important;
  align-items:center !important;
  flex-wrap: nowrap !important;           /* ★カラム落ち防止 */
  gap: 18px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

#header-in .ob-nav .navi-in > ul > li{ margin:0 !important; padding:0 !important; }

/* 日本語＋英語 2段 */
#header-in .ob-nav .navi-in > ul > li > a{
  display:inline-flex !important;
  flex-direction: column !important;
  align-items:center !important;
  justify-content:center !important;
  gap: 3px !important;
  height: var(--header-h) !important;
  padding: 0 10px !important;
  color: var(--header-text) !important;
  text-decoration:none !important;
  white-space: nowrap !important;
  line-height: 1.05 !important;
  transition: transform .18s ease, opacity .18s ease;
}
#header-in .ob-nav .navi-in > ul > li > a:hover{
  transform: translateY(-1px);
  opacity: .92;
}

#header-in .ob-nav .nav-ja{
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
}
#header-in .ob-nav .nav-en{
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  opacity: .62 !important;
}

/* CTA */
#header-in .ob-nav .navi-in > ul > li.is-cta > a{
  background: linear-gradient(135deg, rgb(255,193,7) 0%, rgb(255,179,0) 100%) !important;
  color: #000 !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  height: auto !important;
  min-height: 44px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.14) !important;
}
#header-in .ob-nav .navi-in > ul > li.is-cta > a .nav-en{
  opacity: .85 !important;
}

/* ===== ハンバーガー（HTML常設） ===== */
#header-in .ob-toggle{
  display: none; /* PCは非表示 */
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 100000;
}
#header-in .ob-toggle span{
  display:block;
  width:22px;
  height:2px;
  margin:4px auto;
  background:#111 !important;
  border-radius:2px;
  transition: transform .25s ease, opacity .25s ease;
}
#header-in .ob-toggle.active span:nth-child(1){ transform: rotate(45deg) translate(5px,5px); }
#header-in .ob-toggle.active span:nth-child(2){ opacity:0; }
#header-in .ob-toggle.active span:nth-child(3){ transform: rotate(-45deg) translate(6px,-6px); }

/* ==========================================================
   SP：960以下でハンバーガー化（#navi.activeで開閉）
========================================================== */
@media (max-width: 960px){

  #header-in .header-site-logo-image{ height: 32px !important; }

  /* ボタン出す */
  #header-in .ob-toggle{
    display: inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  /* ナビはオーバーレイ（普段は隠す） */
  #header-in .ob-nav{
    position: fixed !important;
    top: var(--header-h) !important;
    left: 0 !important;
    right: 0 !important;
    height: calc(100vh - var(--header-h)) !important;
    background: rgba(0,0,0,.90) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transform: translateY(-110%) !important;
    transition: transform .28s ease !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 10px 0 24px !important;
    display: block !important;
  }

  /* 重要：JSは #navi.active を付け外ししてるので、ここも #navi.active で反映 */
  #navi.active{ transform: translateY(0) !important; }

  #header-in .ob-nav .navi-in{ width: 100% !important; display:block !important; }
  #header-in .ob-nav .navi-in > ul{
    display:flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 6px 0 !important;
  }
  #header-in .ob-nav .navi-in > ul > li{
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
  }
  #header-in .ob-nav .navi-in > ul > li > a{
    align-items: flex-start !important;
    height: auto !important;
    padding: 18px 22px !important;
    color: rgba(255,255,255,.92) !important;
  }
  #header-in .ob-nav .nav-ja{ font-size: 18px !important; }
  #header-in .ob-nav .nav-en{ font-size: 12px !important; opacity: .75 !important; }

  /* CTAは幅いっぱい */
  #header-in .ob-nav .navi-in > ul > li.is-cta{
    border-bottom: none !important;
    padding: 10px 14px !important;
  }
  #header-in .ob-nav .navi-in > ul > li.is-cta > a{
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }
  #header-in .ob-nav .navi-in > ul > li{
    width: 100% !important;
  }
  #header-in .ob-nav .navi-in > ul > li > a{
    width: 100% !important;
  }
}