@charset "UTF-8";


.header_center .gnav .gnav-img-fixed   { display: none  !important; }

.shop_header_block.fixed .header_center .gnav .gnav-img-default { display: none  !important; }
.shop_header_block.fixed .header_center .gnav .gnav-img-fixed   {
  display: block !important;
  height: 50px;
  width: auto;
  object-fit: contain;
}

.shop_header_block .gnav > ul > li {
  height: auto;
}

.shop_header_block .gnav .menu {
  top: 100%;
}

.shop_header_block.fixed .wrap {
  padding: 8px 0;
}

.shop_header_block .gnav > ul > li.ml {
  margin-left: 20px;
}

.userIcon {
  width: 40px;
}

.shop_header_block .gnav > ul > li {
  line-height: 0;
}

.member_info_cart_info .member_nav_cart {
  padding-left: 20px;
}

.header_cart {
  width: 80px !important;
}

.member_info_cart_info .member_nav_cart .item_cnt {
  left: 35px;
}

.member_info_cart_info {
  margin: 17px 0 13px;
}
.shop_header_block .gnav > ul > li.header_account {
  width: 75px;
}

.header_center {
  display: flex;
  gap: 80px;
  align-items: center;
  margin-left:300px;
}
@media screen and (max-width: 1200px) {
  .header_center {
    margin-left:200px;
  }
  .vbs-scroll-down .header_center,.vbs-scroll-up .header_center  {
    margin-left:300px;
  }
}
@media screen and (max-width: 1024px) {
  .header_center {
    margin-left:150px;
  }
  .vbs-scroll-down .header_center,.vbs-scroll-up .header_center  {
    margin-left:250px;
  }
}

.shop_header_block .gnav {
  margin: 0;
}

/* アイコングループを常に右端に固定 */
@media screen and (min-width: 769px) {
    .shop_header_block .wrap > .gnav {
        margin-left: auto !important;
    }
}

.shop_header_block #header-nav-drawer {
  display: none;
}
.shop_header_block .header_center .gnav > ul > li,
.shop_header_block .header_center .gnav > ul > li:last-child {
  width: 120px;
}

@media screen and (max-width: 960px) {
  .shop_header_block #header-nav-drawer {
    display: block;
  }
}


.column4 {
  padding-top: 40px;
}

.column4 .badge {
  width: 70px;
  height: auto;
}

/*# sourceMappingURL=style.css.map */

/* ===== SP Brand Switch ===== */
.virina-brand-switch {
    display: none; /* PC では非表示 */
}

@media screen and (max-width: 960px) {
    .virina-brand-switch {
        display: block; /* 初期表示あり */
        width: 100%;
        background: #fff;
        border-top: 1px solid #efefef;
    }

    /* 画像ボタン行（初期 / 上スクロール時） */
    .vbs-images {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 6px 10px 8px;
    }

    .vbs-img-btn {
        display: block;
        flex: 1 1 0;
        max-width: 160px;
        border-radius: 2px;
        overflow: hidden;
        line-height: 0;
    }

    .vbs-img-btn img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 2px;
    }

    /* テキストタブ行（初期は非表示 → 下スクロール時に表示） */
    .vbs-tabs {
        display: none;
        width: 100%;
    }

    .vbt-tab {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 4px;
        font-size: 11px;
        letter-spacing: 0.06em;
        color: #888;
        text-decoration: none;
        border-bottom: 2px solid transparent;
        font-family: "Cormorant Garamond", "Noto Sans JP", "Yu Gothic", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", serif;
        background: #fff;
        text-align: center;
        line-height: 1.35;
        box-sizing: border-box;
        -webkit-tap-highlight-color: transparent;
    }

    .vbt-tab + .vbt-tab {
        border-left: 1px solid #e5e5e5;
    }

    .vbt-tab--active {
        color: #222;
        border-bottom-color: #222;
        font-weight: 600;
    }

    .vbt-tab--serif {
        font-family: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
    }

    /* フェードイン（display:none → block/flex と同時に animation が発火する仕様を利用） */
    @keyframes vbs-fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }

    /* スクロール方向トグル */
    body.vbs-scroll-up .virina-brand-switch {
        display: block;
    }

    body.vbs-scroll-down .virina-brand-switch {
        display: block;
    }

    body.vbs-scroll-up .vbs-images {
        display: flex;
    }

    body.vbs-scroll-down .vbs-images {
        display: none;
    }

    body.vbs-scroll-down .vbs-tabs {
        display: flex;
        animation: vbs-fadein 0.2s ease both;
    }
}
/* ===== /SP Brand Switch ===== */

/* ===================================================================
   SP ヘッダー統一: 960px 以下
   - PC gnav / PC ハンバーガーを非表示
   - ロゴ中央寄せ
   - 白背景 / 黒ロゴ / 黒アイコン（body内 <style> のインラインルールを上書き）
   =================================================================== */
@media screen and (max-width: 960px) {

    /* ---- PC 専用要素を非表示 ---- */
    .header_center .gnav {
        display: none !important;
    }

    /* ---- wrap: SP flex レイアウト ---- */
    .shop_header_block .wrap {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    /* ---- header_center: ロゴのみ中央に絶対配置 ---- */
    .header_center {
        position: absolute;
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        margin-left: 0 !important;
        gap: 0 !important;
        pointer-events: none; /* クリック領域は左右アイコンに譲る */
    }
    .header_center .logo,
    .header_center .logo a {
        pointer-events: auto;
    }

    /* ---- ヘッダー背景: 常に白（インラインスタイルを上書き） ---- */
    .shop_header_block {
        background: #fff !important;
    }
    .fixed.shop_header_block {
        background: #fff !important;
    }

    /* ---- ロゴ: 黒版を表示、白版を非表示（インラインスタイルを上書き） ---- */
    .shop_header_block .logo img#on {
        display: block !important;
    }
    .shop_header_block .logo img#off {
        display: none !important;
    }

    /* ---- カート: 黒版を表示、白版を非表示（.top-page ルールを上書き） ---- */
    .header_cart img#on {
        display: block !important;
    }
    .header_cart img#off {
        display: none !important;
    }

    /* ---- SP ハンバーガー: 左端に配置・黒線（インラインスタイルを上書き） ---- */
    .shop_header_block #header-nav-drawer {
        -webkit-box-ordinal-group: 0;
            -ms-flex-order: -1;
                order: -1;
        display: inline-block;
        position: relative; /* default.css の position:fixed を解除してフレックス内に収める */
        width: 46px;
        height: 46px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        cursor: pointer;
        right: auto;
        top: auto;
    }
    .shop_header_block #header-nav-drawer span {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 2px;
        margin: -3px 0 0 -12px;
        background: #111 !important;
        -webkit-transition: .2s;
                transition: .2s;
    }
    .shop_header_block #header-nav-drawer span::before,
    .shop_header_block #header-nav-drawer span::after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 24px;
        height: 2px;
        background: #111 !important;
        -webkit-transition: .3s;
                transition: .3s;
    }
    .shop_header_block #header-nav-drawer span::before {
        margin-top: -10px;
    }
    .shop_header_block #header-nav-drawer span::after {
        margin-top: 7px;
    }
    /* ---- Open時: 中央バーを透明にして正しい×形を表示 ---- */
    .shop_header_block #header-nav-drawer.spsDrawerOpen span {
        background: transparent !important;
    }

    /* ---- アカウントアイコン: SP では不要なら非表示 ---- */
    .shop_header_block .gnav > ul > li.header_account {
        display: none;
    }

    /* ---- fixed 時の wrap パディング統一 ---- */
    .shop_header_block.fixed .wrap {
        padding: 12px 0;
    }
}

/* PC ヘッダーは 961px 以上でそのまま維持 */
@media screen and (min-width: 961px) {
    /* ハンバーガー: 961px+ でも表示（PDF 3-01p 新仕様対応） */
    .shop_header_block #header-nav-drawer {
        display: inline-block !important;
        position: absolute;
        left: 24px;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        width: 46px;
        height: 46px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        cursor: pointer;
        z-index: 1000; /* スライダー・オーバーレイより前面 */
    }
    /* 三本線の色・サイズ（961px+ 非 .fixed 状態） */
    .shop_header_block #header-nav-drawer span {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 2px;
        margin: -3px 0 0 -12px;
        background: #111 !important;
        -webkit-transition: .2s;
                transition: .2s;
    }
    .shop_header_block #header-nav-drawer span::before,
    .shop_header_block #header-nav-drawer span::after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 24px;
        height: 2px;
        background: #111 !important;
        -webkit-transition: .3s;
                transition: .3s;
    }
    .shop_header_block #header-nav-drawer span::before {
        margin-top: -10px;
    }
    .shop_header_block #header-nav-drawer span::after {
        margin-top: 7px;
    }
    .header_center .gnav {
        display: block;
    }
}

/* ---- ドロワーをヘッダー下から開始（ヘッダー高さ分オフセット） ---- */
/* ---- ハンバーガー: 768px以下は右上固定に（max-width:960px の left 配置を上書き） ---- */
@media screen and (max-width: 768px) {
    /* ---- ドロワー: 右側から開く / 全高 / SP スクロール制御 ---- */
    #sub-column {
        top: 0 !important;       /* 白背景を viewport 最上部まで伸ばす */
        padding-top: 56px;       /* コンテンツ開始位置を元の top:56px 相当に補正 */
        right: 0 !important;     /* 右端に配置 */
        left: auto !important;   /* PC の left:0 を無効化 */
        height: 100dvh !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* 閉じた状態: 右へオフスクリーン（PCは左から←→、SPは右から←→） */
        -webkit-transform: translateX(100%) !important;
                transform: translateX(100%) !important;
        -webkit-transition: -webkit-transform 0.3s ease-in-out;
                transition: transform 0.3s ease-in-out;
    }
    #sub-column.spsDrawerOpen {
        -webkit-transform: translateX(0) !important;
                transform: translateX(0) !important;
    }
    #sub-column.spsDrawerClose {
        -webkit-transform: translateX(100%) !important;
                transform: translateX(100%) !important;
    }

    /* ---- ドロワーopen時: 背景ページのスクロールを禁止 ---- */
    /* :has() 対応ブラウザ: body 自体を hidden にする */
    body:has(#wrapper.spsDrawerOpen) {
        overflow: hidden;
    }
    /* fallback: JSが body にクラスを付ける場合 */
    body.spsDrawerOpen {
        overflow: hidden;
    }
    #wrapper.spsDrawerOpen {
        overflow: hidden;
    }
    /* ドロワー内だけスクロール可能に */
    #wrapper.spsDrawerOpen #sub-column {
        overflow-y: auto;
        height: 100dvh;
        -webkit-overflow-scrolling: touch;
    }

    /* ---- SP オーバーレイ（網掛け）: PCと同様に追加 ---- */
    #wrapper.spsDrawerOpen::before {
        background: rgba(0, 0, 0, 0.4);
        content: "";
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 400; /* #sub-column(800) より下、#header-info(2) より上 */
    }

    /* ---- ドロワーOPEN時: #header-info を overlay 後ろへ ---- */
    #wrapper.spsDrawerOpen #header-info {
        z-index: 1 !important;
    }

    /* SP初期表示: common.css により .shop_header_block が position:fixed になるため
       ヘッダー(wrap≈56px) + ブランドボタン(.vbs-images 画像68px+縦pad14px≈82px)
       合計 ≈ 140px 分だけ #top の開始位置を下げる
       ※スクロール時の重なりは今回対象外 */
    #top {
        padding-top: 140px;
    }

    /* ハンバーガーを flex 右端へ */
    .shop_header_block .wrap {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -webkit-box-align: center !important;
            -ms-flex-align: center !important;
                align-items: center !important;
    }
    .shop_header_block #header-nav-drawer {
        position: relative !important;
        right: auto !important;
        left: auto !important;
        top: auto !important;
        -webkit-transform: none !important;
                transform: none !important;
        margin-left: auto !important;  /* flex 右端寄せ */
        -webkit-box-ordinal-group: initial !important;
            -ms-flex-order: initial !important;
                order: initial !important;
        z-index: 1000 !important;
    }
}

/* ---- ドロワー open 時レイヤー順 ----
   × ボタン(#header-nav-drawer)  : 1000  独自 stacking context
   #sub-column.spsDrawerOpen    : 800
   #wrapper::before オーバーレイ : 500
   .shop_header_block           : auto  ← stacking context を消してオーバーレイ後ろへ
   ------------------------------------------------------------ */
@media screen and (max-width: 960px) {
    #sub-column.spsDrawerOpen {
        z-index: 800 !important;
    }
    #wrapper.spsDrawerOpen .shop_header_block {
        z-index: auto !important; /* stacking context を消す → ×ボタンが 1000 でオーバーレイ(500)前面に出る */
    }
}

/* =====================================================
   ドロワーメニュー スタイル調整
   ===================================================== */

/* ---- ドロワー専用クローズボタン（#sub-column 先頭・右上固定） ---- */
#drawer-close-btn {
    position: absolute; /* #sub-column(position:fixed) を基準に配置 */
    right: 14px;
    top: 14px;
    width: 46px;
    height: 46px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
}
#drawer-close-btn::before,
#drawer-close-btn::after {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    background: #111;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -12px;
    -webkit-transition: background .2s;
            transition: background .2s;
}
#drawer-close-btn::before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#drawer-close-btn::after  { -webkit-transform: rotate( 45deg); transform: rotate( 45deg); }
#drawer-close-btn:hover::before,
#drawer-close-btn:hover::after { background: #666; }

/* 左右パディング拡大 */
/* PDF 4-04p: ドロワーメニュー内の左右余白を追加（現サイトに合わせて広めに） */
#sub-column {
    padding-left: 28px !important;
    padding-right: 28px !important;
}

/* アコーディオン: セクション見出しトグル */
#sub-column .drawer-accordion > h2 {
    cursor: pointer;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}
#sub-column .drawer-accordion > h2::after {
    content: "▼";
    font-size: 10px;
    color: #999;
    flex-shrink: 0;
}
#sub-column .drawer-accordion.is-open > h2::after {
    content: "▲";
}
#sub-column .drawer-accordion .drawer-body {
    display: none;
}
#sub-column .drawer-accordion.is-open .drawer-body {
    display: block;
}
/* セクション見出し: フォント拡大 + 下罫線 */
#sub-column section > h2,
#sub-column .freeArea2 h2 {
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em;
    border-bottom: 1px solid #ccc;
    padding-bottom: 6px;
    margin-bottom: 10px;
    margin-top: 20px;
}

/* セクション間の区切り線を除去 */
#sub-column section + section {
    border-top: none !important;
}
/* カテゴリー区切り → 破線
#sub-column ul li {
    border-bottom: 1px dashed #e0e0e0;
} */
#sub-column ul li:last-child {
    border-bottom: none;
}

/* ====================================================
   PC / タブレット ハンバーガー + 左ドロワー (769px+)
   ==================================================== */
@media screen and (min-width: 769px) {
    /* wrap を relative にして絶対配置の基準に */
    .shop_header_block .wrap {
        position: relative;
    }

    /* .fixed 時にハンバーガーを左端に絶対配置 */
    .shop_header_block.fixed #header-nav-drawer {
        display: inline-block;
        position: absolute;
        left: 24px;
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        right: auto;
        width: 46px;
        height: 46px;
        -webkit-box-sizing: border-box;
                box-sizing: border-box;
        cursor: pointer;
        z-index: 1000; /* スライダー・オーバーレイより前面 */
    }

    /* 三本線: サイズ・配置 (≥961px では max-width:960px ブロックが適用されないため明示) */
    .shop_header_block.fixed #header-nav-drawer span {
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        width: 24px;
        height: 2px;
        margin: -3px 0 0 -12px;
        background: #111 !important;
        -webkit-transition: .2s;
                transition: .2s;
    }
    .shop_header_block.fixed #header-nav-drawer span::before,
    .shop_header_block.fixed #header-nav-drawer span::after {
        display: block;
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 24px;
        height: 2px;
        background: #111 !important;
        -webkit-transition: .3s;
                transition: .3s;
    }
    .shop_header_block.fixed #header-nav-drawer span::before {
        margin-top: -10px;
    }
    .shop_header_block.fixed #header-nav-drawer span::after {
        margin-top: 7px;
    }

    /* Open 時: 中央バーを透明にして × を表示（通常状態・769px+） */
    .shop_header_block #header-nav-drawer.spsDrawerOpen span {
        background: transparent !important;
    }
    /* × アニメーション: 上下バーを中央に寄せて回転（769px+、通常状態） */
    .shop_header_block #header-nav-drawer.spsDrawerOpen span::before,
    .shop_header_block #header-nav-drawer.spsDrawerOpen span::after {
        margin-top: 0 !important;
    }
    .shop_header_block #header-nav-drawer.spsDrawerOpen span::before {
        -webkit-transform: rotate(-45deg) !important;
                transform: rotate(-45deg) !important;
    }
    .shop_header_block #header-nav-drawer.spsDrawerOpen span::after {
        -webkit-transform: rotate(-135deg) !important;
                transform: rotate(-135deg) !important;
    }

    /* Open 時: 中央バーを透明にして × を表示（.fixed 状態） */
    .shop_header_block.fixed #header-nav-drawer.spsDrawerOpen span {
        background: transparent !important;
    }
    /* × アニメーション: 上下バーを中央に寄せて回転（769px+、.fixed 状態） */
    .shop_header_block.fixed #header-nav-drawer.spsDrawerOpen span::before,
    .shop_header_block.fixed #header-nav-drawer.spsDrawerOpen span::after {
        margin-top: 0 !important;
    }
    .shop_header_block.fixed #header-nav-drawer.spsDrawerOpen span::before {
        -webkit-transform: rotate(-45deg) !important;
                transform: rotate(-45deg) !important;
    }
    .shop_header_block.fixed #header-nav-drawer.spsDrawerOpen span::after {
        -webkit-transform: rotate(-135deg) !important;
                transform: rotate(-135deg) !important;
    }



    /* Open: 左からスライドイン */
    #sub-column.spsDrawerOpen {
        -webkit-transform: translateX(0) !important;
                transform: translateX(0) !important;
        z-index: 800 !important; /* ヘッダー(700)より確実に上 */
    }

    /* Close: 左に退場 */
    #sub-column.spsDrawerClose {
        -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
    }

    /* オーバーレイ */
    #wrapper.spsDrawerOpen::before {
        background: rgba(0, 0, 0, 0.4);
        content: "";
        height: 100%;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 500;
    }

    /* Open 時: ヘッダーの stacking context を消す
       → 内部の #header-nav-drawer(z-index:1000) がドキュメントレベルで機能し
         オーバーレイ(500)の前面・ドロワー(800)の前面に出る */
    #wrapper.spsDrawerOpen .shop_header_block {
        z-index: auto !important;
    }

    /* Fixed 時の cart margin リセット (SP は対象外) */
    .shop_header_block.fixed .member_info_cart_info {
        margin: 0;
    }
}

/* =====================================================
   PC: #sub-column / ハンバーガー — TOP vs 下層 分岐
   ===================================================== */

/* --- 下層PCのみ: 左ナビ通常表示
       body:not(.top-page) で TOP PC ドロワーに影響しない --- */
@media screen and (min-width: 769px) {

    body:not(.top-page) #sub-column {
        position: static !important;
        -webkit-transform: none !important;
                transform: none !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        float: left !important;
        width: 260px !important;
        height: auto !important;
        overflow: visible !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        z-index: auto !important;
        -webkit-transition: none !important;
                transition: none !important;
    }

    /* 下層PCのみ: ハンバーガー非表示 */
    body:not(.top-page) .shop_header_block #header-nav-drawer {
        display: none !important;
    }

    /* 下層PC: クローズボタンは不要（ドロワー非使用）*/
    body:not(.top-page) #drawer-close-btn {
        display: none !important;
    }
}

/* --- TOP PCドロワー: position:fixed 左スライドオーバーレイ
       index.html inline style の #sub-column{display:none} を上書きし
       spsDrawerClose/Open で左スライド --- */
@media screen and (min-width: 769px) {

    body.top-page #sub-column {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        height: 100% !important;
        width: 300px !important;
        max-width: 80vw !important;
        background: #fff !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        display: block !important;
        padding-top: 60px;
        -webkit-transition: -webkit-transform 0.3s ease-in-out !important;
                transition: transform 0.3s ease-in-out !important;
    }

    body.top-page #sub-column.spsDrawerClose {
        -webkit-transform: translateX(-100%) !important;
                transform: translateX(-100%) !important;
    }

    body.top-page #sub-column.spsDrawerOpen {
        -webkit-transform: translateX(0) !important;
                transform: translateX(0) !important;
        z-index: 800 !important;
    }
}

/* =====================================================
   PC下層ページ: #sub-column padding リセット
   ドロワー用28px padding がPC左ナビのコンテンツ幅を圧迫するため解除
   TOPページドロワーには body:not(.top-page) で影響しない
   ===================================================== */
@media screen and (min-width: 769px) {
    body:not(.top-page) #sub-column {
        padding-left:  0 !important;
        padding-right: 0 !important;
    }
}

/* =====================================================
解除:
   PC下層ページ: .header_center 左寄せ
   margin-left:300px はハンバーガー左端オフセット用（下層PCでは非表示のため不要）
   vbs-scroll-down/up 時の margin 変化も同時に無効化
   TOPページ影響なし: body:not(.top-page) で除外

@media screen and (min-width: 769px) {
    body:not(.top-page) .header_center {
        margin-left: 0 !important;
    }
    body:not(.top-page).vbs-scroll-down .header_center,
    body:not(.top-page).vbs-scroll-up .header_center {
        margin-left: 0 !important;
    }
}
   ===================================================== */

/* =======================================================
   vsp- ドロワーメニュー（html_noslider より移行）
   ======================================================= */
/* --- 共通リスト --- */
.vsp-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.vsp-list li {
    border-bottom: 1px solid #f2f2f2;
}
.vsp-list li:last-child {
    border-bottom: none;
}
.vsp-list a {
    display: block;
    position: relative;
    padding: 11px 22px 11px 2px;
    font-size: 13px;
    color: #222;
    text-decoration: none;
    line-height: 1.5;
}
.vsp-list a:hover { color: #555; }

/* サブリスト（アコーディオン内） */
.vsp-list--sub {
    padding: 0 0 4px 12px;
}
.vsp-list--sub li {
    border-bottom: 1px solid #f0f0f0;
}
.vsp-list--sub a {
    font-size: 12px;
    color: #444;
    padding: 10px 22px 10px 2px;
}

/* --- 新着・再入荷ボタン --- */
.vsp-newitem-btn {
    width: 100%;
    display: block;
    border-bottom: 1px solid #ebebeb;
}
.vsp-newitem-link {
    display: block;
    text-align: center;
    width: 100%;
    padding: 10px 8px;
    border: 5px solid #80C3C5;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
    text-decoration: none;
    letter-spacing: 0.06em;
}
.vsp-newitem-link:hover {
    background: #80C3C5;
    color: #fff;
}

/* --- セクションブロック --- */
.vsp-section-block {
    border-bottom: 1px solid #ebebeb;
    margin: 32px 0 48px 0;
    font-family: "Noto Sans JP";
}
.vsp-section-block-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 8px 8px;
    font-size: 16px
}

.vsp-section-icon {
    display: none;
}
.vsp-section-subtitle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 110px;
    padding: 4px 10px;
    font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #aaa;
    line-height: 1.2;
}
.vsp-section-subtitle--fashion { background: #88cdcc; }
.vsp-section-subtitle--ojuken  { background: #021f47; }
.vsp-section-subtitle--search  { background: #cf8ab7; }
.vsp-section-title {
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #111;
    letter-spacing: 0.04em;
    margin: 0;
    line-height: 1;
    font-family: "Noto Sans JP";
    padding: 4px 4px 14px 4px;
    border-bottom: 1px double #BBB;
}
.vsp-section-block .vsp-list {
    padding: 0 4px 6px;
}
.vsp-section-block .vsp-list a {
    padding-left: 4px;
}

/* --- アコーディオン --- */
.vsp-accordion {
    border-bottom: 1px solid #f0f0f0;
}
.vsp-section-block .vsp-accordion {
    margin: 0 16px;
}
.vsp-accordion-btn {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 12px 0;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 400;
    font-family: "Noto Sans JP", sans-serif;
    color: #222;
    cursor: pointer;
    text-align: left;
    letter-spacing: 0.02em;
    line-height: 1.5;
}
.vsp-accordion--standalone .vsp-accordion-btn {
    padding: 15px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #111;
}
.vsp-accordion-icon {
    display: inline-block;
    position: relative;
    width: 12px;
    height: 12px;
    -ms-flex-negative: 0;
        flex-shrink: 0;
    margin-left: 8px;
}
.vsp-accordion-icon::before,
.vsp-accordion-icon::after {
    content: '';
    position: absolute;
    background: #888;
    border-radius: 1px;
    -webkit-transition: -webkit-transform 0.22s ease, opacity 0.22s ease;
            transition: transform 0.22s ease, opacity 0.22s ease;
}
.vsp-accordion-icon::before {
    width: 1px;
    height: 12px;
    top: 0;
    left: 5.5px;
}
.vsp-accordion-icon::after {
    width: 12px;
    height: 1px;
    top: 5.5px;
    left: 0;
}
.vsp-accordion-btn[aria-expanded="true"] .vsp-accordion-icon::before {
    -webkit-transform: rotate(90deg) scaleY(0);
            transform: rotate(90deg) scaleY(0);
    opacity: 0;
}
.vsp-accordion-body {
    overflow: hidden;
    -webkit-transition: height 0.25s ease;
            transition: height 0.25s ease;
}
.vsp-accordion-body[hidden] {
    display: none;
}
.vsp-section-block .vsp-accordion-body .vsp-list {
    padding: 0 0 8px;
}

/* --- 直リンク（アコーディオンと同列） --- */
.vsp-list-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    position: relative;
    color: #222222;
    padding: 12px 0;
    background: none;
    border: none;
    font-size: 13px !important;
    font-weight: 400 !important;
    font-family: "Noto Sans JP", sans-serif !important;
}
.vsp-list-link::after {
    content: '';
    position: absolute;
    right: 4px;
    top: 50%;
    -webkit-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-top: 1px solid #bbb;
    border-right: 1px solid #bbb;
}
.vsp-section-block .vsp-list-link {
    margin: 0 16px;
}
.vsp-list-link:hover { color: #555; }

/* --- スタンドアロンアコーディオン（店舗情報 / Corporate） --- */
.vsp-accordion--standalone {
    border-bottom: 1px solid #ebebeb;
}
.vsp-accordion--standalone .vsp-accordion-body .vsp-list {
    padding: 0 16px 12px;
}

/* =======================================================
   SNS アイコン横並び（.snav_sns）
   vsp-sns レイアウトを適用
   ======================================================= */
.snav_sns ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 20px;
    list-style: none;
    padding: 0px 16px;
    margin: 0;
}
.snav_sns li {
    border-bottom: none !important;
}
.snav_sns li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-decoration: none;
    -webkit-transition: opacity 0.2s;
            transition: opacity 0.2s;
}
.snav_sns li a:after {
    display: none !important;
}
.snav_sns li a img {
    width: 36px;
    height: 36px;
    display: block;
    -o-object-fit: cover;
       object-fit: cover;
}
.snav_sns li a:hover {
    opacity: 0.7;
}
#sub-column .snav_sns,
#sub-column .snav_sns ul,
#sub-column .snav_sns li,
#sub-column .snav_sns a {
  border-bottom: none !important;
  border: none !important;
}

/* カラーで探す: 2col × 5row グリッド */
#color-variation {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 2px 6px;
    list-style: none;
    padding: 8px 0 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}
#color-variation li {
    display: block !important;
    min-width: 0;
    width: 100%;
    list-style: none;
    border-bottom: 1px dashed #e0e0e0;
}
#color-variation li:last-child {
    border-bottom: 1px dotted #e0e0e0 !important;
}
#color-variation li a {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    padding: 4px 2px;
    text-decoration: none;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
}
/* カラーチップ */
#color-variation li a::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid #ddd;
}
#color-variation a#color001::before { background: #1a3562; }
#color-variation a#color002::before { background: #ffffff; border-color: #ccc; }
#color-variation a#color006::before { background: #111111; }
#color-variation a#color003::before { background: #d4b896; }
#color-variation a#color004::before { background: #5590c8; }
#color-variation a#color005::before { background: #e8a0b0; }
#color-variation a#color007::before { background: #6aab7a; }
#color-variation a#color008::before { background: #888888; }
#color-variation a#color010::before { background: #9b72b0; }
#color-variation a#color009::before { background: linear-gradient(135deg, #f88, #8bf, #8f8); }


.vsp-gift-link .vsp-list-link {
    border-top: none !important;
    border-bottom: 1px solid #ebebeb;
}

/* 打ち消し調整 */
#sub-column ul#color-variation li  {
    display: block !important;
    width: 100%;
}
#sub-column ul#color-variation li a:after {
    content: "";
    background: none;
}

/* 機能別で探す: ul ごとに1行、li は2カラム */
.kinou-icon-submenu {
    display: block;
    padding: 8px 0 0;
}
.kinou-icon-submenu ul {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
}
.kinou-icon-submenu ul li {
    display: block !important;
    width: 100%;
    border-bottom: 1px solid #ebebeb !important;
}
.kinou-icon-submenu ul:last-child li {
    border-bottom: none !important;
}
.kinou-icon-submenu ul li a{
    display: block;
    width: 100%;
    padding: 8px 2px;
}

.kinou-icon-submenu ul li a img {
    width: 100%;
    height: auto;
    display: block;
}

/*
/* 打ち消し調整 *:/
#sub-column .kinou-icon-submenu,
#sub-column .kinou-icon-submenu ul,
#sub-column .kinou-icon-submenu li,
#sub-column .kinou-icon-submenu a {
  border-bottom: none !important;
  border: none !important;
}:
*/

.vsp-shop h2,.vsp-corporate h2{
  padding: 0 !important;
}
.vsp-shop .vsp-accordion-btn,.vsp-corporate .vsp-accordion-btn{
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #111;
    letter-spacing: 0.04em;
    margin: 0;
    line-height: 1;
    font-family: "Noto Sans JP";
    padding: 4px 4px 14px 4px;
}

/* =====================================================
   floating-menu: 下層ページでも常時表示
   floating_menu.js の .hide() による inline style="display:none" を
   CSS !important で上書き（common.css 未反映時の保険を兼ねる）
   TOPページにも renew_sub.css が読み込まれるが common.css と同一ルールのため影響なし
   ===================================================== */
#floating-menu {
    display: block !important;
    opacity: 1 !important;
}

#page-top a,
#to-cart a {
    cursor: pointer;
}