/* =====================================================
    btc_Header Styles
   ===================================================== */
.btc_main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 25px !important;
  box-sizing: border-box;
  z-index: 9999;
  background-color: transparent !important;
  color: #ffffff; /* 初期状態（ダークセクション想定）は白 */
  transition: color 0.4s ease, background-color 0.4s ease;
}

/* 明るい背景(on-light)セクションにいる時のネイビー化 */
.btc_main-header.btc_on-light {
  color: #1a2a40 !important;
}

.btc_left { display: flex; align-items: center; }
.btc_right { display: flex; align-items: center; gap: 0 !important; }

/* ロゴ設定 */
.btc_logo-link { display: flex; align-items: center; text-decoration: none; color: inherit; }
.btc_logo-svg { display: block; fill: currentColor; }
.btc_logo-img { height: 24px; width: auto; object-fit: contain; }

/* アイコン共通設定 */
.btc_icon-link { 
  color: inherit; 
  display: flex; 
  align-items: center; 
  justify-content: center;
  text-decoration: none; 
  position: relative; 
  transition: opacity 0.2s ease; /* ホバー時の動きを滑らかに */

  /* 【標準サイズ】指で押しやすい 44px の正方形 */
  width: 40px;
  height: 40px;
  margin: 0 !important; 
  padding: 0 !important;

}
/* ホバーした時に少し薄くする演出 */
.btc_icon-link:hover {
    opacity: 0.7;
}
.btc_icon-stroke { fill: none !important; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }
.btc_icon-person { width: 22px !important; height: auto !important; }
.btc_icon-cart { width: 22.005px !important; height: auto !important; }

/* ログイン／ログアウトテキスト共通 */
.btc_auth-form {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}
.btc_auth-text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: inherit;
  text-decoration: none;
  /* ボタンのデフォルトスタイルをリセット（ログアウト用 <button> に適用） */
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 6px;
  margin: 0;
  font-family: inherit;
  transition: color 0.4s ease, opacity 0.2s ease;
}
.btc_auth-text:hover {
  opacity: 0.7;
}
.btc_auth-links{
    display:flex;
    align-items:center;
    gap:16px;
}

.btc_auth-link{
    display:flex;
    align-items:center;
    gap:6px;

    color:inherit;
    text-decoration:none;
}

.btc_auth-form{
    margin:0;
}

.btc_auth-button{
    border:none;
    background:none;
    padding:0;
    cursor:pointer;
    font:inherit;
}

.btc_icon-person{
    width:22px;
    height:22px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.1;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.btc_icon-logout{
    width:22px;
    height:22px;

    fill:currentColor;
}

.btc_auth-text{
    font-size:13px;
    line-height:1;
}

/* カートバッジ */
.btc_cart-badge {
  position: absolute;
  top: -5px;
  right: 0px;
  background: #ff0000;
  color: #fff;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 10px;
  min-width: 12px;
  text-align: center;
  display: none; /* カートが空の場合は非表示（JSで制御可） */
}

/* MENUボタン設定 */
.btc_menu-wrap { 
  cursor: pointer; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center; 
  margin-left: 9px;
}
.btc_menu-circle { width: 52px; height: 52px; }

/* 背景円：デフォルトはシャンパンゴールド */
/* transition: all → fill/stroke のみに限定（all はGPUレイヤー昇格を誘発しテキストがぼやける原因になるため） */
.btc_circle-bg {
  fill: #bda16b;
  stroke: #bda16b;
  stroke-width: 1.1;
  transition: fill 0.4s ease, stroke 0.4s ease;
}

/* MENUテキスト：SVG <text> → HTML <span> に変更済み（ClearType/Quartzが有効になり鮮明な描画になる） */
.btc_menu-wrap {
  position: relative; /* span の absolute 配置の基準 */
}
.btc_menu-text {
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 8.5px;
  font-weight: 400;
  letter-spacing: 0.4px;
  color: #ffffff;
  line-height: 1;
  pointer-events: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color 0.4s ease;
}
.btc_menu-line { stroke: #ffffff; stroke-width: 1.2; stroke-linecap: round; transition: stroke 0.4s ease; }

/* 明るい背景(on-light)でのMENUボタン：円の色をネイビーに変更 */
.btc_main-header.btc_on-light .btc_circle-bg {
  fill: #1a2a40;
  stroke: #1a2a40;
}
.btc_main-header.btc_on-light .btc_menu-text {
  color: #ffffff; /* HTML span なので color プロパティを使用 */
}
.btc_main-header.btc_on-light .btc_menu-line {
  stroke: #ffffff;
}
.btc_main-header.btc_on-light .btc_auth-text {
  color: #1a2a40;
}

/* =====================================================
    レスポンシブ対応（タブレット・PC）
   ===================================================== */

/* タブレット（768px〜） */
@media (min-width: 768px) {
  .btc_main-header {
    height: 80px;
    padding: 0 32px 0 36px !important;
  }
  .btc_logo-svg {
    width: 210px;
  }
  .btc_icon-link {
    width: 44px;
    height: 44px;
  }
  .btc_icon-person { width: 25px !important; }
  .btc_icon-cart   { width: 25px !important; }
  .btc_menu-wrap {
    margin-left: 12px;
  }
  .btc_menu-circle {
    width: 56px;
    height: 56px;
  }
  /* 56px円に合わせてテキスト位置・サイズを調整 */
  .btc_menu-text {
    font-size: 9px;
    bottom: 11px;
  }
}

/* デスクトップ（1024px〜） */
@media (min-width: 1024px) {
  .btc_main-header {
    height: 88px;
    padding: 0 52px 0 56px !important;
  }
  .btc_logo-svg {
    width: 240px;
  }
  .btc_icon-link {
    width: 48px;
    height: 48px;
  }
  .btc_icon-person { width: 27px !important; }
  .btc_icon-cart   { width: 27px !important; }
  .btc_menu-wrap {
    margin-left: 16px;
  }
  .btc_menu-circle {
    width: 60px;
    height: 60px;
  }
  /* 60px円に合わせてテキスト位置・サイズを調整 */
  .btc_menu-text {
    font-size: 10px;
    bottom: 12px;
  }
  /* PC向けホバーエフェクト強化（MENUボタン） */
  .btc_menu-wrap:hover .btc_circle-bg {
    fill: #a08558;
    stroke: #a08558;
  }
  .btc_main-header.btc_on-light .btc_menu-wrap:hover .btc_circle-bg {
    fill: #2d3f5a;
    stroke: #2d3f5a;
  }
}