/* =========================================================
   Header (for .site-header markup)
   File: assets/css/2_layout/header.css
========================================================= */

/* ヘッダー本体：スクロールで上部に張り付く */
.site-header{
  position: sticky;  /* 親に overflow が付いていると効かないので注意 */
  top: 0;
  z-index: 1000;
  background: var(--wan-bg, #fff);
  border-bottom: 1px solid var(--wan-line, #e5e7eb);
  box-shadow: 0 2px 6px rgba(0,0,0,.04);
}

/* 内側ラップ */
.site-header .container{
  max-width: var(--wan-container, 1200px);
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 28px;
	max-width: var(--container-max);
	height:56px;
}

/* ロゴ */
.site-header .logo img{
  height: 56px;
  width: auto;
  display: block;
}

/* ナビを中央寄せ（ロゴ左／ナビ中央／ボタン右） */
.site-header .main-nav{
  flex: 1 1 auto;               /* 中央ブロックを伸縮させる */
  display: flex;
  justify-content: center;
}

.site-header .main-nav .menu{
  display: flex;
  gap: 64px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-header .main-nav .menu > li > a{
  color: var(--wan-text, #111);
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
  padding: 8px 0;
  transition: opacity .2s ease;
}
.site-header .main-nav .menu > li > a:hover{ opacity: .7; }

/* 右端ボタン */
.site-header .header-btn{ margin-left: auto; }
.site-header .btn-login{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 9999px;
  background: var(--wan-accent, #ff922b);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 0 rgba(0,0,0,.06), 0 1px 8px rgba(0,0,0,.05);
  transition: transform .02s ease, background-color .2s ease;
}
.site-header .btn-login:hover{ background: var(--wan-accent-strong, #ff7b00); }
.site-header .btn-login:active{ transform: translateY(1px); }

/* モバイル最小調整 */
@media (max-width: 1023px){
  .site-header .logo img{ height: 48px; }
  .site-header .main-nav .menu{ gap: 24px; overflow-x: auto; }
}