/* ==============================
   共通
============================== */
:root {
  --brand:#2A3F59;
}

/* ヘッダー本体 */
.site-header {
  border: 0;
  background: var(--brand);
}

/* サブタイトル非表示 */
.site-branding .site-description {
  display: none !important;
}

/* ロゴ＋サイト名 */
.jade-header {
  display:flex;
  align-items:center;
  gap:24px;
}

.jade-header__logo img {
  height:28px;
  width:auto;
}

.jade-logo-text {
  color:#fff;
  text-decoration:none;
  font-weight:700;
  font-size:20px;
}

/* ナビリンク共通 */
.jade-header__nav a {
  color:#fff !important;
  text-decoration:none;
  display:inline-block;
  padding:8px 0;
  position:relative;
  white-space:nowrap;
}

/* ホバー下線アニメーション */
.jade-header__nav a::after {
  content:"";
  position:absolute;
  left:0;
  bottom:2px;
  width:100%;
  height:2px;
  background-color:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 0.25s ease-out;
}
.jade-header__nav a:hover::after {
  transform:scaleX(1);
}

/* クリック時の紫枠を消す */
.site-header a:focus,
.site-footer a:focus {
  outline:none;
  box-shadow:none;
}

/* ==============================
   PCレイアウト（961px〜）
============================== */
@media (min-width:961px) {

  .site-header {
    padding:10px 24px !important;
  }

  .site-header .col-full {
    display:flex;
    align-items:center;    /* ここで縦中央揃え */
    gap:24px;
  }

  /* メインナビを右側へ */
  .jade-header__nav {
    margin-left:auto;
  }

  .jade-header__nav .menu {
    display:flex;
    gap:28px;
    margin:0;
    padding:0;
    list-style:none;
  }

  /* PC用フォントサイズ（画面幅で少し変動） */
  .jade-header__nav a {
    font-size:clamp(12px, 1.25vw, 16px);
  }

  /* お問い合わせボタン */
  .header-contact {
    display:flex;
    align-items:center;
    margin-left:16px;
  }
  .header-contact__link {
    background:#99AECE;
    color:#fff;
    padding:8px 15px;
    border:1px solid #99AECE;
    border-radius:2px;
    margin:0 0 0 8px;
    letter-spacing:0.05em;
    font-size:14px;
    transition:all 0.3s;
  }
  .header-contact__link:hover {
    background:rgba(255,255,255,.14);
  }

  /* ==========================
     キーワード検索（PC）
     ========================== */
  .jade-header__search {
    margin-left:24px;
    flex:0 1 260px;      /* 固定幅＋縮小可 */
    max-width:260px;
  }

  .jade-header__search .search-form {
    position:relative;
    margin:0;
  }

  .jade-header__search .search-field {
    width:100%;
    border-radius:999px;
    border:none;
    padding:8px 42px 8px 18px;
    font-size:14px;
    box-sizing:border-box;
    background:#fff;
  }

  .jade-header__search .search-field:focus {
    outline:none;
    box-shadow:none;
  }

  /* 送信ボタン（虫眼鏡アイコン） */
.jade-header__search .search-submit {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);   /* きっちり中央に */
  right: 10px;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  /* テキスト「検索」を見た目上消す */
  font-size: 0;
  line-height: 1;
}


  .jade-header__search .search-submit .screen-reader-text {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
  }

  .jade-header__search .search-submit::before,
  .jade-header__search .search-submit::after {
    content:"";
    display:block;
    box-sizing:border-box;
  }

  .jade-header__search .search-submit::before {
    width:16px;
    height:16px;
    border-radius:999px;
    border:2px solid #2A3F59;
  }

  .jade-header__search .search-submit::after {
        position: absolute;
        width: 11px!important;
        height: 2px;
        background: #2A3F59;
        right: 2px!important;
        bottom: 6px!important;
        border-radius: 2px;
        transform: translate(4px, 3px) rotate(45deg);
  }

  /* PCサブメニュー */
  .jade-header__nav .menu > li {
    position:relative;
  }
  .jade-header__nav .sub-menu {
    position:absolute;
    top:100%;
    left:0;
    min-width:180px;
    background:#99AECE;
    padding:8px 0;
    margin:0;
    list-style:none;
    display:none;
    z-index:9999;
  }
  .jade-header__nav .sub-menu li {
    list-style:none;
  }
  .jade-header__nav .sub-menu a {
    display:block
    padding:6px 16px;
    color:#fff;
    white-space:nowrap;
  }
  .jade-header__nav .sub-menu a:hover {
    background:rgba(255,255,255,0.12);
  }
  .jade-header__nav .menu > li:hover > .sub-menu,
  .jade-header__nav .menu > li:focus-within > .sub-menu {
    display:block;
  }

}

/* ==============================
   モバイルレイアウト（〜960px）
============================== */
.jade-menu-toggle {
  display:none;
  background:none;
  border:none;
  padding:0;
  margin-left:1rem;
  cursor:pointer;
}
.jade-menu-toggle__bar {
  display:block;
  width:22px;
  height:2px;
  background:#fff;
  margin:4px 0;
}

@media (max-width:960px) {

  .site-header {
	height:70px!important;
    padding:8px 16px;
  }

  .site-header .col-full {
    display:flex;
    align-items:center;
  }

  .jade-header {
    align-items:center;
    gap:14px;
    margin-top:4px;
  }

  /* ハンバーガー表示 */
  .jade-menu-toggle {
    display:block;
    margin-left:auto;
  }

  /* PCナビ・検索・問い合わせボタンは非表示 */
  .jade-header__nav,
  .jade-header__search,
  .header-contact {
    display:none;
  }

  /* 開閉式モバイルナビ */
  .jade-handheld-navigation {
    display:none;
  }
  .jade-handheld-navigation.is-open {
    display:block;
  }

  .jade-handheld-navigation .menu {
    list-style:none;
    margin:8px 0 0;
    padding:0;
  }
  .jade-handheld-navigation a {
    display:block;
    padding:10px 0;
    color:#fff;
    text-decoration:none;
  }
}

/* ==============================
   フッター（最低限）
============================== */
.site-footer .footer-column ul {
  list-style:none;
  margin:0;
  padding-left:0;
}

/* ヘッダー検索ボタン（虫眼鏡）のフォーカス枠を消す */
.site-header .search-submit:focus,
.site-header .search-submit:active,
.site-header .search-submit:hover {
  outline: none !important;
  box-shadow: none !important;
}

/*カートアイコン*/
.jade-cart-icon {
    color: #fff;
    margin-right: 5px;
}

.jade-cart-count{
	color:#fff;
}