/** Shopify CDN: Minification failed

Line 7:0 Unexpected "<"
Line 31:8 Unexpected "<"

**/
<style>
/* ====== 既存スタイル（元ファイルの内容をベースにしつつ追記） ====== */
:root{
  --z-backdrop: 9997;
  --z-nav:      9998;
  --z-toggle:   9999;
}

body {
  margin: 10vw 0 0 0;
  padding: 0;
}

@media (min-width: 768px) {
  body {
    margin: 5vw 0 0 0;
  }
}

li::before{ content: none !important;}
ul:not(.list-unstyled):not([list-unstyled]) li { padding-left: 0 !important;}
  
#prime-review-favorites-float{ z-index:2 !important; display:none;}

.outfit-<uniquifier> {
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

.header-banner{
  position: fixed; 
  top: 0px;
  z-index:11;
  width:100%;
}


.fade-items { position: relative; width: 100%; max-width: 100%; overflow: hidden; }
.slide { height: 100%; }
.slide a { display: block; width: 100%; height: 100%; text-decoration: none; color: black; }
.slide img {
  width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: translateX(30px);
  transition: opacity 0.7s ease, transform 0.7s ease; display: block;
}


/* ====== ハンバーガー ====== */
#nav_toggle { position: absolute; top: 1em; right: 1em; z-index: var(--z-toggle); }
#nav_toggle div { position: relative; display: block; top: 4px; width: 28px; height: 28px; z-index: var(--z-toggle); }
#nav_toggle span { position: absolute; display: block; width: 100%; height: 3px; background: #000; transition: 0.5s ease-in-out; }
#nav_toggle span:nth-child(1) { top:0px; }
#nav_toggle span:nth-child(2) { top:12px; }
.open #nav_toggle span:nth-child(1) { top: 6px; transform: rotate(135deg); background: #fff; }
.open #nav_toggle span:nth-child(2) { top: 6px; transform: rotate(-135deg); background: #fff; }

/* ====== ナビ本体 ====== */

/* ルートメニュー */
nav ul { list-style-type: none; padding: 1em 0 0 0; margin: 0; }
nav ul li { border-bottom: 1px solid rgba(255, 255, 255, 0.15); position: relative; }
nav ul li:last-child { border: none; }
nav ul li a {
  padding: 1em 0; display: block; text-decoration: none; font-size: 1.250em;
  font-weight: 300; color: #fff; transition: 0.5s;
}
nav ul li a:hover { padding: 1.0em 1.0em; opacity: 0.5; transition: 0.5s; }

/* ====== サブメニュー（右からスライド） ====== */
nav li.has-sub { overflow: hidden; } /* コンテナの外に出ないように */
nav li.has-sub > .submenu {
  position: absolute;
  top: 0;
  left: 100%; /* ルート項目の右側から開始 */
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.9);
  transform: translateX(0); /* オフセットの基準 */
  translate: 0 0; /* for compatibility */
  transition: transform 0.35s ease;
  display: block;
  pointer-events: none;
  opacity: 0;
}

/* 開いたときに、右からフルオーバーレイのように見せる */
nav li.has-sub.submenu-open > .submenu {
  transform: translateX(-100%); /* 左へ100%動かして、ちょうど親liを覆う */
  pointer-events: auto;
  opacity: 1;
}

/* サブメニュー内の見た目 */
nav li.has-sub > .submenu li { border-bottom: 1px solid rgba(255,255,255,0.15); }
nav li.has-sub > .submenu li a {
  color: #fff;
  padding: 1em 0;
  display: block;
  font-size: 1.1em;
}
nav li.has-sub > .submenu li:last-child { border: none; }

/* サブメニュー上部のヘッダー行（戻る） */
.submenu-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.75em 0;
  border-bottom: 1px solid rgba(255,255,255,0.25);
}
.submenu-header span {
  color: #fff;
  font-size: 1.0em;
  opacity: 0.9;
}
.submenu-back {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.7);
  color: #fff;
  padding: 0.4em 0.75em;
  font-size: 0.95em;
  border-radius: 6px;
  margin-left: 1em !important;
}

/* ====== ヘッダー固定表示 ====== */
#head_menu{
  position: fixed; top: 0; left: 0; width: 100%;
  margin: 0; padding: 0; z-index: 20;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0); /* 常に独立レイヤー化 */
  background: rgba(255,255,255,0.8); /* 半透明白 */
  -webkit-backdrop-filter: blur(6px);
  z-index: 10;
}

/* ====== 商品ページ商品画像ポップアップ時に閉じるボタンが押せない為、一時非表示 ====== */
.product-gallery-fullscreen #head_menu{
  display: none !important;
}

#head_menu.show { transform: translateY(0); }
  
/* メニューが開いている間はヘッダーを透明に */
nav.add_nav ~ #head_menu {
  background: transparent !important;
  box-shadow: none !important;
}

.head_logo{ width: 35vw; padding: 1.3em 0 0 1em; }
@media (min-width: 768px) { .head_logo{ width: 20vw; } }
.head_logo img{ width: 100%; }
.icon_favorite{ width: 25px; height: 27px; position: absolute; top: 12px; right: 123px; }
.icon_user{ width: 25px; height: 27px; position: absolute; top: 12px; right: 53px; }
.icon_cart{ width: 25px; height: 27px; position: absolute; top: 12px; right: 88px; }
  
.container { position: relative; background: #fff; }
#content { opacity: 0; transition: opacity 1s ease; }
#content.visible { opacity: 1; }
.add_container { filter: blur(8px); transition: 0.5s; pointer-events: none;}

.main_logo{ width: 40%; margin: 0 auto; padding: 70vw 0 70vw; }
@media (min-width: 768px) {.main_logo{ width: 15%; padding: 22vw 0 22vw; } }
.main_logo img{ width: 100%; }

/* == added for slide-left root & slide-in-right sub == */
/* ==== 2枚パネルでの横スライドアニメーション ==== */
nav {
  position: fixed;      /* <- absolute から fixed に */
  inset: 0;             /* 画面全体を覆う */
  padding: 0;
  width: 100%;
  opacity: 0;
  z-index: var(--z-nav);;          /* 背景ぼかし(#menu_backdrop)より前面に */
  transform: scale(0.85);
  transition: 0.5s;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.add_nav { display:block; opacity:1; z-index:10; transform:scale(1); pointer-events:auto; }

#menu_backdrop{
  position: fixed;
  inset: 0;
  /* 背面のページ全体をぼかす */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* うっすら暗くする（好みで調整） */
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 9;           /* nav(10) より下、ページ本体より上 */
}
/* nav が開いた時だけ有効化（兄弟セレクタで連動） */
nav.add_nav ~ #menu_backdrop{
  opacity: 1;
  pointer-events: auto;
}

/* nav が開いている間だけ、ヘッダーをクリック不可に */
nav.add_nav ~ #head_menu{
  pointer-events: none;
}
nav.add_nav ~ #head_menu #nav_toggle{
  pointer-events: auto;              /* ← 例外：トグルは有効 */
}

.menu-frame{
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 60vh; /* メニュー面積を確保。必要に応じて調整 */
  overflow: hidden;
  padding: 3%;
}

/* 2枚のパネル */
.panel{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 1em 0 0 0;
  transition: transform 0.35s ease;
}

/* ルート（初期: 0, サブ表示時: -100% 左へ） */
.panel-root{
  transform: translateX(0%);
}
.add_nav.view-sub .panel-root{
  transform: translateX(-100%);
}

/* サブ（初期: +100% 右、サブ表示時: 0） */
.panel-sub{
  background: rgba(0,0,0,0.01);
  transform: translateX(100%);
  padding-left: 0;
}
.add_nav.view-sub .panel-sub{
  transform: translateX(0%);
}

/* ルートリストのスタイル（既存を踏襲） */
.root-menu{ list-style: none; margin: 0; padding: 1em 0 0 1em; }
.root-menu > li{ border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.root-menu > li:last-child{ border: none; }
.root-menu > li > a{
  padding: 1em 0; display: block; text-decoration: none; font-size: 1.250em;
  font-weight: 300; color: #fff; transition: 0.5s;
}
.root-menu > li > a:hover{ padding: 1.0em 1.0em; opacity: 0.5; transition: 0.5s; }

/* サブメニューの見た目 */
.submenu-header{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.75em 0;
  border-bottom: 1px solid rgba(255,255,255,0.25);
}
.submenu-title{ color: #fff; font-size: 1.0em; opacity: 0.9; }
.subwrap{ list-style: none; margin: 0; padding: 12px; box-sizing: border-box; }
.subwrap li{ border-bottom: 1px solid rgba(255,255,255,0.15); }
.subwrap li:last-child{ border: none; }
.subwrap a{ color: #fff; padding: 1em 0; display: block; font-size: 1.1em; text-decoration: none; }
  
  
/* 1) サブパネル全体を縦積みにし、ステージに高さを与える */
.panel.panel-sub{
  display: flex;
  flex-direction: column;
  min-height: 50vh;          /* 好みで 40〜70vh に */
  overflow: hidden;
}
/* 2) ステージは「面」を載せる器。余白を受け取って高さを持たせる */
.sub-stage{
  position: relative;
  flex: 1 1 auto;            /* ← これでステージに高さが出ます */
  overflow: hidden;
}

.sub-stage::before{ content:""; display:block; }

/* 3) 各「面」(L1/L2) は絶対配置で全領域を覆う */
.sub-stage .sub-panel{
  position: absolute;
  inset: 0;                  /* top:0; right:0; bottom:0; left:0 の短縮 */
  width: 100%;
  height: 100%;              /* ← 高さを必ず確保 */
  transition: transform 0.35s ease;
  will-change: transform;
  overflow: hidden;
}

/* 4) 初期位置：L1=0%（画面内）, L2=+100%（右外） */
.sub-stage .l1{ transform: translateX(0%); }
.sub-stage .l2{ transform: translateX(100%); }

/* 5) view-sub2 が付いたら L1 を左へ、L2 を画面内へ */
.add_nav.view-sub2 .sub-stage .l1{ transform: translateX(-100%); }
.add_nav.view-sub2 .sub-stage .l2{ transform: translateX(0%); }

  
/* ── サブサブ（L2）だけ2列に ───────────────────────── */
.subwrap2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列。子が縮めるよう minmax(0,1fr) */
  gap: 12px;                                        /* 列間のスキマ */
  padding: 12px;                                    /* パディングを付けるなら box-sizing とセットで */
  box-sizing: border-box;                           /* ← これがないと padding ぶん横幅オーバーしやすい */
  width: 100%;
  max-width: 100%;
}

/* 2列カード化するので境界線は消して、カード側で背景を付ける */
.subwrap2 li{
  border: 0;
  min-width: 0;
}

/* L2の各リンクをカードっぽく */
.subwrap2 a{
  display: block;
  max-width: 100%;
  box-sizing: border-box;                           /* パディングやボーダーを幅に含める */
  text-align: center;
  padding: 12px 14px;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
  transition: transform .2s ease, opacity .2s ease;
  word-break: keep-all;                              /* 長い英字 */
  overflow-wrap: anywhere;                           /* 長い単語でも折り返す */
}

/* 画面が極端に狭い時だけ1列に（任意） */
@media (max-width: 380px){
  .subwrap2{
    grid-template-columns: 1fr;gap: 8px; padding: 8px;
  }
}
  

/* サブ（第1面）でさらに子を持つ項目の見た目 */
.subwrap li.has-sub2 > a::after{
  content: "›";
  float: right;
  opacity: .7;
}

/* テンプレートは画面に出さない */
.submenu-template{ display: none; }
.submenu-2-template{ display: none; }
  
/* === overflow fix: L2だけ2列で右端が切れる対策 === */

/* 1) 横はみ出しは親の左右paddingが主因。親は0に寄せる */
.menu-frame{ padding-left: 0; padding-right: 0; } /* 既に0なら不要 */
.panel-sub{  padding-left: 0; padding-right: 0; } /* 既に0なら不要 */

/* 2) スクロール発生の保険（横方向は隠す） */
nav, .panel-sub, .sub-stage, .sub-stage .sub-panel{ overflow-x: hidden; }

/* 3) サブサブ（L2）だけ2列。幅計算は box-sizing で安全に */
.subwrap2{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2列。子が必ず縮む */
  gap: 12px;                                        /* すき間 */
  padding: 12px;                                    /* 余白はここに集約 */
  box-sizing: border-box;                           /* ← これが超重要 */
  width: 100%;
  max-width: 100%;
}

/* 4) 子要素が列幅を押し広げないように */
.subwrap2 > li{ min-width: 0; }                     /* ← これも重要 */
.subwrap2 a{
  display: block;
  width: 100%;
  box-sizing: border-box;                           /* paddingを幅に含める */
  padding: 6px 10px;
  text-align: center;
  background: rgba(255,255,255,0.06);
  border-radius: 5px;
  text-decoration: none;
  color: #fff;
  overflow-wrap: anywhere;                          /* 長い語も折り返す */
  font-size: 1em;
}

/* 5) すごく狭い端末では余白をさらに絞る */
@media (max-width: 380px){
  .subwrap2{ gap: 8px; padding: 8px; }
}
  
/* --- 検索アイコン（右上の並びに合わせる） --- */
.icon_search{
  position: absolute;
  top: 12px;
  right: 158px;          /* ← icon_favorite=100px / icon_bag=58px に合わせて一番左 */
  width: 25px;
  height: 27px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
.icon_search svg{ width: 100%; height: 100%; }


.has-date-banner .icon_group{ margin-top:20px; }
.has-date-banner .head_menu_blur{ margin-top:20px; }


/* === 検索ポップアップ（画像風デザイン） ================== */
#search_popup{
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  padding-top: 10vw;
}

/* 表示時 */
#search_popup.show{
  opacity: 1;
  pointer-events: auto;
}

/* 中のコンテナ（グレー背景に白のカプセルを浮かせる感じ） */
.search-shell{
  background: transparent;
  width: min(680px, 92vw);
  text-align: center;
}

/* 上の白いカプセル本体 */
.search-pill{
  background: #fff;
  border-radius: 9999px;

  padding: 4px 4px 4px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.25);
  position: relative;
}

/* 入力欄 */
#search_input_popup{
  flex: 1 1 auto;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  min-height: 64px;
  margin-bottom: 0px !important;
}

/* 中の×ボタン（白いカプセルの中の黒丸） */
.search-clear{
  width: 35px;
  height: 30px;
  border-radius: 999px;
  background: #fff;
  color: #333;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  cursor: pointer;
  transition: opacity .15s ease;
}
.search-clear:hover{ opacity: .8; }

/* 右の黒い「検索」丸ボタン */
.search-go{
  width: 58px;
  height: 58px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  border: none;
  font-size: 14px;
  cursor: pointer;
  flex: 0 0 auto;
}

/* 下のチェックボックス行 */
.search-filter-line{
  margin-top: 16px;
  display: flex;
  justify-content: center;
  gap: 6px;
  align-items: center;
  color: #fff;
  font-size: 14px;
}

.search-filter-line label{color: #fff !important;}

.search-filter-line input[type="checkbox"]{
  accent-color: #000;
}

/* スマホで少し詰める */
@media (max-width: 480px){
  .search-pill{
    gap: 6px;
    padding-right: 6px;
  }
  .search-go{
    width: 50px;
    height: 50px;
  }
}

/* ポップアップ中は背面スクロール無効化 */
body.no-scroll{
  overflow: hidden;
  touch-action: none;                 /* iOSのゴムスクロール抑制 */
}

/* 念のため：横スクロールが出ないように */
html, body{ max-width: 100%; overflow-x: hidden; }


 /* ポップアップ内ホットキーワード */ 
  .header-popup-hotkeyword .hot-keyword {
    max-width: 960px;
    margin: 40px auto;
    padding: 0 16px;
  }

  .header-popup-hotkeyword .hot-keyword__title {
    font-size: 14px;
    letter-spacing: 0.08em;
    margin-bottom: 16px;
    text-align: center;
    color: #fff;
  }

  .header-popup-hotkeyword .hot-keyword__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)); /* 4列固定 */
    gap: 12px 12px; /* 行・列の間隔 */
  }

  .header-popup-hotkeyword .hot-keyword__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 4px; /* 縦はゆったり、横は狭めに */
    border-radius: 8px; /* 少し角丸 */
    border: 1px solid #fff; /* ボタンの輪郭（白） */
    color: #fff;           /* 文字色も白 */
    background: transparent; /* 背景なし */
    text-decoration: none;
    font-size: 13px;
    line-height: 1;
    box-sizing: border-box;
    transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease;
    text-align: center;
    white-space: nowrap; /* 折り返したくない場合 */
  }

  .header-popup-hotkeyword .hot-keyword__btn:hover,
  .header-popup-hotkeyword .hot-keyword__btn:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    outline: none;
    transform: translateY(-1px);
  }

  .header-popup-hotkeyword .hot-keyword__btn:active {
    transform: translateY(0);
    background: rgba(255, 255, 255, 0.2);
  }

  /* 画面が極端に狭いときは文字サイズだけ少し下げるなど調整 */
  @media (max-width: 360px) {
    .header-popup-hotkeyword .hot-keyword__btn {
      font-size: 12px;
      padding: 8px 2px;
    }
  }
  
  /* デフォルト（PC・タブレット）：4列 */
  .header-popup-hotkeyword .hot-keyword__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 12px;
  }

  /* スマホ幅では2列に変更する例 */
  @media (max-width: 767px) {
    .header-popup-hotkeyword .hot-keyword__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }