/* ------------------------------------------------------------
   ヘッダーメニュー（header.php / トップ index.php と同じデザイン）
   トップは organic-top.css の .organic-top .site-header を使っているため、
   同じ見た目になるよう .dx-header 配下にスコープして定義する。
   bootstrap / style.css が読み込まれるページで使うので、
   a や nav などの既存スタイルに負けないよう詳細度を上げている。
------------------------------------------------------------ */
.dx-header{
  --teal-900:#045C66;
  --teal-700:#03A0B3;
  --ink-sub:#5A6E6B;
  --line:#D8E4E2;
  --white:#FFFFFF;

  position:sticky;top:0;z-index:1000;
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 24px;
  background:var(--white);
  border-bottom:1px solid var(--line);
  font-family:'Noto Sans JP',sans-serif;
  line-height:1.7;
}
/* 管理バーを表示しているときは、固定ヘッダーが管理バーの下に張り付くようにする。
   管理バーの高さは 32px（783px以上）/ 46px（782px以下）。
   600px以下では管理バーが固定されなくなる（スクロールで流れる）ため top:0 に戻す */
body.admin-bar .dx-header{top:32px;}
@media (max-width:782px){
  body.admin-bar .dx-header{top:46px;}
}
@media (max-width:600px){
  body.admin-bar .dx-header{top:0;}
}
.dx-header *{box-sizing:border-box;}
.dx-header .dx-header-logo{display:flex;align-items:center;text-decoration:none;}
.dx-header .dx-header-logo img{display:block;width:140px;height:auto;}
.dx-header .dx-header-right{display:flex;align-items:center;gap:24px;}
.dx-header nav{
  display:flex;align-items:center;gap:28px;
  font-size:15px;font-weight:700;color:var(--ink-sub);
}
.dx-header nav > a{color:inherit;text-decoration:none;}
.dx-header nav > a:hover{color:var(--teal-700);}
.dx-header .dx-header-ctas{display:flex;gap:10px;align-items:center;}
.dx-header .dx-header-login{
  display:inline-block;
  background:var(--teal-700);color:var(--white);
  padding:9px 20px;border-radius:999px;font-size:14.5px;font-weight:700;text-decoration:none;
  transition:background-color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.dx-header .dx-header-login:hover{
  background:var(--teal-900);color:var(--white);
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(4,92,102,0.25);
}

/* ハンバーガーメニュー（800px以下でnavの代わりに表示） */
.dx-header .dx-header-toggle{
  display:none;
  flex-direction:column;justify-content:center;gap:5px;
  width:32px;height:32px;padding:0;
  background:none;border:none;cursor:pointer;
}
.dx-header .dx-header-toggle span{
  display:block;width:100%;height:2px;
  background:var(--teal-900);border-radius:1px;
  transition:transform .2s ease,opacity .2s ease;
}
.dx-header .dx-header-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.dx-header .dx-header-toggle.is-active span:nth-child(2){opacity:0;}
.dx-header .dx-header-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

@media (max-width:800px){
  .dx-header{padding:8px 16px;}
  .dx-header .dx-header-logo img{width:120px;}
  .dx-header .dx-header-toggle{display:flex;}

  /* nav（カート・商品一覧・ログイン）をまとめてドロップダウン化し、
     ヘッダー行にはハンバーガーボタンだけを残す */
  .dx-header nav{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    padding:4px 24px 20px;
    background:var(--white);
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 24px rgba(4,92,102,0.1);
  }
  .dx-header nav.is-open{display:flex;}
  .dx-header nav > a{padding:14px 0;border-bottom:1px solid var(--line);}
  .dx-header .dx-header-ctas{
    flex-direction:column;gap:10px;
    margin-top:10px;padding-top:16px;
    border-top:1px solid var(--line);
  }
  .dx-header .dx-header-login{width:100%;text-align:center;}
}