html, body { overflow-x: hidden; }

/* --- 価格の文字色: 基本黒、SALEは赤 --- */
.ec-price .ec-price__price {
    color: #333;
}
.ec-price .ec-price__price--sale {
    color: #c00;
}

.price02-default {
    color: #333;
}

.price02-sale {
    color: #c00;
}

/* --- 通常価格（斜線）+ セール価格表示 --- */
.price01-default {
    text-decoration: line-through;
    color: #999;
    font-size: 0.9em;
}

.ec-productRole__priceRegularPrice {
    color: #999;
}

/* 新着アイテムの通常価格 */
.surprise-new-items__price-regular {
    font-size: 10px;
    color: #999;
    text-decoration: line-through;
    margin: 0;
}

/* 商品一覧の通常価格 */
.price01-list {
    font-size: 0.85em;
    color: #999;
    text-decoration: line-through;
}

@charset "utf-8";

/* =============================================
   SURPRISE カスタムCSS for EC-CUBE 4
   2系デザインを4系に適用するスタイル
   ============================================= */

/* --- リセット & ベース --- */
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    background-color: #fff;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
}

/* --- ヘッダー --- */
.ec-layoutRole__header {
    border-bottom: 1px dotted #666;
}

.surprise-header-top {
    background: #fff;
    padding: 8px 0;
    font-size: 12px;
    color: #666;
    text-align: center;
}

.surprise-header-top .frame {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}

#headDesc {
    font-size: 11px;
    color: #666;
}

.surprise-header-btns {
    display: flex;
    gap: 15px;
    align-items: center;
}

.surprise-header-btns a {
    color: #666;
    text-decoration: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.surprise-header-btns a:hover {
    color: #000;
}

/* ロゴ */
.surprise-logo {
    text-align: center;
    padding: 15px 0;
}

.surprise-logo img {
    max-width: 300px;
    height: auto;
}

/* --- メガメニュー --- */
.surprise-megamenu {
    border-bottom: 1px dotted #666;
    border-top: 1px dotted #666;
    padding: 10px 0;
    text-align: center;
}

.surprise-megamenu ul.megamenu {
    display: flex !important;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 960px;
    flex-wrap: wrap;
}

.surprise-megamenu ul.megamenu > li {
    position: relative;
    display: inline-block;
    border-left: 1px solid #cfcfcf;
}

.surprise-megamenu ul.megamenu > li:last-child {
    border-right: 1px solid #cfcfcf;
}

.surprise-megamenu ul.megamenu > li > a {
    display: block;
    padding: 5px 15px;
    color: #666;
    text-decoration: none;
    font-size: 13px;
    white-space: nowrap;
}

.surprise-megamenu ul.megamenu > li > a:hover {
    color: #000;
    background: #f5f5f5;
}

.surprise-megamenu ul.megamenu > li > a > span {
    display: inline;
}

/* サブメニュー（ドロップダウン） */
.surprise-megamenu .cateBox {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #cfcfcf;
    z-index: 100;
    min-width: 200px;
    padding: 10px;
    text-align: left;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.surprise-megamenu ul.megamenu > li.is-open .cateBox {
    display: block;
}
.surprise-megamenu ul.megamenu > li.level1 > a { cursor: pointer; }
.surprise-megamenu ul.megamenu > li.level1.is-open > a { background: #f5f5f5; }

.surprise-megamenu .cateBox p {
    margin: 0;
    padding: 3px 0;
}

.surprise-megamenu .cateBox p a {
    color: #666;
    text-decoration: none;
    font-size: 12px;
    display: block;
    padding: 3px 10px;
}

.surprise-megamenu .cateBox p a:hover {
    color: #000;
    background: #f9f9f9;
}

/* --- フッター --- */
.surprise-footer {
    background: #fff;
    border-top: 1px solid #ccc;
    padding: 20px 0;
    text-align: center;
    font-size: 12px;
    color: #666;
}

.surprise-footer .footer-logo {
    margin-bottom: 10px;
}

.surprise-footer .footer-logo img {
    max-width: 200px;
}

.surprise-footer address {
    font-style: normal;
    margin-bottom: 5px;
}

.surprise-footer #copyright {
    font-size: 11px;
    color: #999;
    margin-top: 10px;
}

/* --- 商品一覧 --- */
.ec-shelfGrid .ec-shelfGrid__item {
    margin-bottom: 20px;
}

.ec-shelfGrid .ec-shelfGrid__item-image img {
    width: 100%;
    height: auto;
}

/* --- ニュース --- */
.surprise-news {
    margin: 30px auto;
    max-width: 960px;
}

.surprise-news h2 {
    border-bottom: 1px dotted #000;
    border-top: 3px solid #000;
    padding: 10px;
    margin: 30px 0 15px;
    font-size: 22px;
}

.surprise-news .news-list {
    max-height: 200px;
    overflow-y: auto;
    padding: 10px;
}

.surprise-news .news-item {
    padding: 5px 0;
    border-bottom: 1px dotted #ccc;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.surprise-news .news-date {
    color: #999;
    font-size: 12px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* --- スライダー --- */
/* --- ZOZO風 検索バー --- */
.surprise-search-bar {
    max-width: 960px;
    margin: 0 auto;
    padding: 8px 15px;
}

.surprise-search-bar__inner {
    display: flex;
    align-items: center;
    background: #f5f5f5;
    border-radius: 20px;
    padding: 0 15px;
    height: 40px;
}

.surprise-search-bar__icon {
    color: #999;
    font-size: 14px;
    margin-right: 10px;
    flex-shrink: 0;
}

.surprise-search-bar__input {
    border: none;
    background: transparent;
    width: 100%;
    font-size: 14px;
    outline: none;
    color: #333;
}

.surprise-search-bar__input::placeholder {
    color: #aaa;
}

@media (max-width: 768px) {
    .surprise-search-bar {
        padding: 5px 10px;
    }

    .surprise-search-bar__inner {
        height: 36px;
    }

    .surprise-search-bar__input {
        font-size: 13px;
    }
}

.surprise-slider {
    margin: 0 -15px 20px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .surprise-slider {
        margin: 0 -10px 15px;
    }
}

.surprise-slider .slick-slide img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.surprise-slider__inner {
    padding: 0 10px;
}

.surprise-slider .slick-slide {
    padding: 0 5px;
}

.surprise-slider .slick-dots {
    position: relative;
    bottom: auto;
    margin-top: 10px;
}

.surprise-slider .slick-dots li button:before {
    font-size: 8px;
    color: #ccc;
    opacity: 1;
}

.surprise-slider .slick-dots li.slick-active button:before {
    color: #333;
    opacity: 1;
}

.surprise-slider .slick-prev,
.surprise-slider .slick-next {
    z-index: 1;
    width: 30px;
    height: 30px;
}

.surprise-slider .slick-prev {
    left: 15px;
}

.surprise-slider .slick-next {
    right: 15px;
}

/* --- 新着商品 --- */
.surprise-new-items h2 {
    border-bottom: 1px dotted #000;
    border-top: 3px solid #000;
    padding: 10px;
    margin: 30px 0 15px;
    font-size: 22px;
}

/* --- 送料案内バー（2系再現） --- */
.surprise-shipping-bar {
    background: #f5f5f5;
    text-align: center;
    padding: 5px 0;
    font-size: 11px;
    color: #666;
    border-bottom: 1px solid #eee;
}

/* --- レスポンシブ --- */
@media screen and (max-width: 768px) {
    .surprise-header-top .frame {
        flex-direction: column;
        gap: 5px;
    }
    
    .surprise-megamenu ul.megamenu {
        flex-direction: column;
    }
    
    .surprise-megamenu ul.megamenu > li {
        border-left: none;
        border-bottom: 1px solid #eee;
    }
    
    .surprise-megamenu ul.megamenu > li:last-child {
        border-right: none;
    }
    
    .surprise-megamenu .cateBox {
        position: static;
        box-shadow: none;
        border: none;
        padding-left: 20px;
    }
}

/* EC-CUBE 4 デフォルトの上書き */
.ec-headerRole {
    max-width: none;
    display: none;
}

.ec-layoutRole__contentTop {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 15px;
}

.ec-layoutRole__contents {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 15px;
}


/* =============================================
   商品一覧ページ - 2系デザイン再現
   ============================================= */

/* 一覧グリッド: 4列表示（2系準拠） */
.ec-shelfGrid {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0 -8px;
}

.ec-shelfGrid__item {
    width: 25%;
    padding: 0 8px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

/* 商品画像 */
.ec-shelfGrid__item-image {
    margin-bottom: 0;
    overflow: hidden;
    border: 1px solid #eee;
}

.ec-shelfGrid__item-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.2s;
}

.ec-shelfGrid__item a:hover .ec-shelfGrid__item-image img {
    opacity: 0.8;
}

/* 商品名 */
.ec-shelfGrid__item a {
    text-decoration: none;
    color: #333;
    display: block;
}

.ec-shelfGrid__item a p {
    margin: 0 0 3px;
    font-size: 12px;
    line-height: 1.4;
    color: #333;
}

.ec-shelfGrid__item a:hover p {
    text-decoration: underline;
}

/* 価格 */
.ec-shelfGrid__item .price02-default {
    font-size: 13px;
    font-weight: bold;
    color: #333;
}

.ec-shelfGrid__item .price02-sale {
    color: #c00;
}

/* 一覧のカートボタン・数量を非表示（2系ではなかった） */
.ec-shelfGrid__item .ec-productRole__actions,
.ec-shelfGrid__item .ec-productRole__btn,
.ec-shelfGrid__item form {
    display: none;
}

/* トピックパス */
.ec-topicpath {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0 0 15px;
    font-size: 12px;
    flex-wrap: wrap;
}

.ec-topicpath__item a {
    color: #666;
    text-decoration: none;
}

.ec-topicpath__item a:hover {
    text-decoration: underline;
}

.ec-topicpath__divider {
    margin: 0 5px;
    color: #999;
}

/* 検索結果情報 */
.ec-searchnavRole__infos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dotted #ccc;
    margin-bottom: 20px;
}

.ec-searchnavRole__counter {
    font-size: 13px;
    color: #666;
}

/* ページネーション */
.ec-pagerRole {
    text-align: center;
    margin: 30px 0;
}

.ec-pager {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 5px;
}

.ec-pager li {
    display: inline-block;
}

.ec-pager li a,
.ec-pager li span {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #ccc;
    color: #666;
    text-decoration: none;
    font-size: 12px;
    min-width: 30px;
    text-align: center;
}

.ec-pager li a:hover {
    background: #f5f5f5;
}

.ec-pager li.ec-pager__item--active span,
.ec-pager li.ec-pager__item--active a {
    background: #333;
    color: #fff;
    border-color: #333;
}

/* レスポンシブ: タブレット3列、スマホ2列 */
@media screen and (max-width: 768px) {
    .ec-shelfGrid__item {
        width: 33.333%;
    }
}

@media screen and (max-width: 480px) {
    .ec-shelfGrid__item {
        width: 50%;
    }
    
    .ec-shelfGrid__item a p {
        font-size: 11px;
    }
    
    .ec-shelfGrid__item .price02-default {
        font-size: 12px;
    }
}


/* =============================================
   左カラム - ショッピングガイド & ブランド一覧
   ============================================= */

/* 2カラムレイアウト（左カラムあり） */
.ec-layoutRole__contents {
    display: flex;
    gap: 20px;
}

.ec-layoutRole__left {
    width: 200px;
    min-width: 200px;
    flex-shrink: 0;
}

.ec-layoutRole__main {
    flex: 1;
    min-width: 0;
}

/* ショッピングガイド */
.surprise-side-guide {
    margin-bottom: 20px;
    border: 1px solid #ccc;
    padding: 10px;
}

.surprise-side-guide h3 {
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px dotted #999;
}

.surprise-side-guide h3 img {
    display: block;
}

.surprise-side-guide ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.surprise-side-guide ul li {
    padding: 4px 0;
    border-bottom: 1px dotted #ddd;
}

.surprise-side-guide ul li:last-child {
    border-bottom: none;
}

.surprise-side-guide ul li a {
    color: #666;
    text-decoration: none;
    font-size: 12px;
}

.surprise-side-guide ul li a:hover {
    color: #000;
    text-decoration: underline;
}

/* ブランド一覧 */
.surprise-side-brands {
    margin-bottom: 20px;
}

.surprise-side-brands h3 {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin: 0 0 10px;
    padding-bottom: 8px;
    border-bottom: 1px dotted #999;
    letter-spacing: 2px;
}

.surprise-side-brands .brand_ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.surprise-side-brands .brand_ul li {
    text-align: center;
    border: 1px solid #cecece;
    padding: 4px 0;
    margin-bottom: 5px;
}

.surprise-side-brands .brand_ul li a {
    display: block;
}

.surprise-side-brands .brand_ul li a img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    transition: opacity 0.2s;
}

.surprise-side-brands .brand_ul li a:hover img {
    opacity: 0.7;
}

/* レスポンシブ: スマホでは左カラム非表示 */
@media screen and (max-width: 768px) {
    .ec-layoutRole__contents {
        flex-direction: column;
    }
    
    .ec-layoutRole__left {
        display: none;
    }
}


/* =============================================
   スマホ版対応 - ハンバーガーメニュー & レスポンシブ強化
   ============================================= */

/* ハンバーガーボタン（PC非表示） */
.surprise-hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.surprise-hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: #333;
    margin: 5px 0;
    transition: all 0.3s;
}

.surprise-hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.surprise-hamburger.active span:nth-child(2) {
    opacity: 0;
}

.surprise-hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ロゴコンテナ relative化 */
.surprise-logo {
    position: relative;
}

/* --- スマホ用（768px以下） --- */
@media screen and (max-width: 768px) {

    /* ハンバーガーボタン表示 */
    .surprise-hamburger {
        display: block;
    }

    /* 送料案内バー */
    #headDesc {
        font-size: 9px;
        line-height: 1.3;
    }

    /* ヘッダーボタン */
    .surprise-header-btns {
        gap: 10px;
    }

    .surprise-header-btns a {
        font-size: 10px;
    }

    /* ロゴ */
    .surprise-logo img {
        max-width: 200px;
    }

    /* メガメニュー: デフォルト非表示、sp-openで表示 */
    .surprise-megamenu {
        display: none;
        border-top: 1px solid #ccc;
    }

    .surprise-megamenu.sp-open {
        display: block;
    }

    .surprise-megamenu ul.megamenu {
        flex-direction: column;
    }

    .surprise-megamenu ul.megamenu > li {
        border-left: none;
        border-bottom: 1px solid #eee;
    }

    .surprise-megamenu ul.megamenu > li:last-child {
        border-right: none;
    }

    .surprise-megamenu ul.megamenu > li > a {
        padding: 12px 15px;
        font-size: 14px;
    }

    /* サブメニュー */
    .surprise-megamenu .cateBox {
        position: static;
        box-shadow: none;
        border: none;
        border-top: 1px solid #eee;
        padding: 5px 0 5px 20px;
        min-width: auto;
    }

    .surprise-megamenu .cateBox p a {
        padding: 8px 10px;
        font-size: 13px;
    }

    /* コンテンツ幅 */
    .ec-layoutRole__contentTop,
    .ec-layoutRole__contents {
        padding: 0 10px;
    }

    /* スライダー */
    .surprise-slider {
        margin-bottom: 15px;
    }

    /* ニュース */
    .surprise-news h2 {
        font-size: 18px;
        margin: 15px 0 10px;
    }

    /* 商品詳細 */
    .ec-grid2 {
        display: block;
    }

    .ec-grid2__cell {
        width: 100% !important;
        margin-bottom: 15px;
    }

    .ec-productRole__title h2 {
        font-size: 16px;
    }

    /* フッター */
    .surprise-footer {
        padding: 15px 10px;
        font-size: 11px;
    }

    .surprise-footer .footer-logo img {
        max-width: 150px;
    }
}

/* --- 小型スマホ（480px以下） --- */
@media screen and (max-width: 480px) {

    /* 送料案内バー */
    .surprise-header-top .frame {
        padding: 0 8px;
    }

    #headDesc {
        font-size: 8px;
    }

    /* ヘッダーボタン */
    .surprise-header-btns a {
        font-size: 9px;
        letter-spacing: 0;
    }

    /* ロゴ */
    .surprise-logo img {
        max-width: 160px;
    }

    /* 商品一覧 */
    .ec-shelfGrid__item {
        padding: 0 4px;
    }
}


/* =============================================
   新着アイテム - スライダー表示
   ============================================= */
/* --- カテゴリナビ（ブランド＋アイテムカテゴリ） --- */
.surprise-category-nav {
    display: flex;
    gap: 30px;
    max-width: 960px;
    margin: 20px auto;
    padding: 0 15px;
}

.surprise-category-nav__section {
    flex: 1;
}

.surprise-category-nav__title {
    border-bottom: 2px solid #333;
    padding-bottom: 5px;
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: bold;
}

.surprise-category-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.surprise-category-nav__list li {
    width: 50%;
    box-sizing: border-box;
}

.surprise-category-nav__list li a {
    display: block;
    padding: 4px 8px;
    font-size: 12px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px dotted #ddd;
}

.surprise-category-nav__list li a:hover {
    background: #f5f5f5;
    color: #000;
}

/* ブランドロゴ並び */
.surprise-category-nav__logos {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.surprise-category-nav__logos li {
    box-sizing: border-box;
}

.surprise-category-nav__logos li a {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #333;
    font-size: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 4px 8px;
    background: #fff;
    min-height: 64px;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.surprise-category-nav__logos li a:hover {
    border-color: #999;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.surprise-category-nav__logos li a img {
    display: block;
    height: auto;
    max-height: 40px;
    max-width: 160px;
    width: auto;
    image-rendering: -webkit-optimize-contrast;
    transition: opacity 0.2s;
}

.surprise-category-nav__logos li a:hover img {
    opacity: 0.7;
}

@media (max-width: 768px) {
    .surprise-category-nav {
        flex-direction: column;
        gap: 15px;
        padding: 0 10px;
    }

    .surprise-category-nav__list li {
        width: 50%;
    }
}

@media (max-width: 480px) {
    .surprise-category-nav {
        padding: 0 5px;
    }

    .surprise-category-nav__list li a {
        font-size: 11px;
        padding: 3px 5px;
    }
}

/* --- SNSバナー（ブログ・インスタ） --- */
.surprise-sns-banners {
    max-width: 960px;
    margin: 15px auto 0;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.surprise-sns-banners__item {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-radius: 8px;
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    transition: opacity 0.2s;
}

.surprise-sns-banners__item:hover {
    opacity: 0.85;
}

.surprise-sns-banners__item > i:first-child {
    font-size: 22px;
    margin-right: 12px;
    flex-shrink: 0;
}

.surprise-sns-banners__text {
    font-size: 15px;
    letter-spacing: 1px;
}

.surprise-sns-banners__sub {
    font-size: 11px;
    font-weight: normal;
    opacity: 0.85;
    margin-left: 10px;
}

.surprise-sns-banners__arrow {
    margin-left: auto;
    font-size: 12px;
    opacity: 0.7;
}

.surprise-sns-banners__blog {
    background: linear-gradient(135deg, #333 0%, #555 100%);
}

.surprise-sns-banners__insta {
    background: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);
}

@media (max-width: 768px) {
    .surprise-sns-banners {
        padding: 0 10px;
    }

    .surprise-sns-banners__item {
        padding: 12px 15px;
    }

    .surprise-sns-banners__sub {
        display: none;
    }
}

.surprise-new-items {
    margin: 30px auto;
    max-width: 960px;
    overflow: hidden;
    box-sizing: border-box;
}

.surprise-new-items__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px 10px;
}

.surprise-new-items__item {
    overflow: hidden;
    min-width: 0;
}

.surprise-new-items__img {
    overflow: hidden;
    border: 1px solid #eee;
    margin-bottom: 5px;
}

.surprise-new-items__img img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.2s;
}

.surprise-new-items__item a:hover .surprise-new-items__img img {
    opacity: 0.8;
}

.surprise-new-items__item a {
    text-decoration: none;
    color: #333;
    display: block;
}

.surprise-new-items__name {
    font-size: 11px;
    line-height: 1.3;
    margin: 0 0 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.surprise-new-items__price {
    font-size: 12px;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.surprise-new-items__price--sale {
    color: #c00;
}

.surprise-new-items__hidden {
    display: none;
}

.surprise-new-items__more {
    text-align: center;
    margin-top: 15px;
}

.surprise-new-items__more-btn {
    background: #fff;
    border: 1px solid #333;
    border-radius: 20px;
    padding: 10px 40px;
    font-size: 13px;
    color: #333;
    cursor: pointer;
    transition: all 0.2s;
}

.surprise-new-items__more-btn:hover {
    background: #333;
    color: #fff;
}

.surprise-new-items__more-btn i {
    margin-left: 5px;
    font-size: 11px;
}

@media (max-width: 768px) {
    .surprise-new-items {
        padding: 0 10px;
    }
    .surprise-new-items__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .surprise-new-items {
        padding: 0 5px;
    }
    .surprise-new-items__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --- アコーディオン（ブランド・アイテムカテゴリ畳み機能） --- */
.surprise-category-nav__title {
    cursor: pointer;
    position: relative;
    user-select: none;
    padding-right: 25px;
}

.surprise-category-nav__toggle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
}

.surprise-category-nav__toggle::before,
.surprise-category-nav__toggle::after {
    content: "";
    position: absolute;
    background: #333;
    transition: transform 0.3s;
}

.surprise-category-nav__toggle::before {
    width: 12px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.surprise-category-nav__toggle::after {
    width: 2px;
    height: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.surprise-category-nav__section .surprise-category-nav__logos,
.surprise-category-nav__section .surprise-category-nav__list {
    overflow: hidden;
    max-height: 800px;
    transition: max-height 0.3s ease;
}

.surprise-category-nav__section.is-closed .surprise-category-nav__logos,
.surprise-category-nav__section.is-closed .surprise-category-nav__list {
    max-height: 0;
}

.surprise-category-nav__section.is-closed .surprise-category-nav__toggle::after {
    transform: translate(-50%, -50%);
}

.surprise-category-nav__section:not(.is-closed) .surprise-category-nav__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

/* --- お問い合わせボタン（おしゃれ版） --- */
.surprise-inquiry-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: transparent;
    color: #333;
    border: 2px solid #333;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.surprise-inquiry-btn:hover {
    background: #333;
    color: #fff;
    text-decoration: none;
}

.surprise-inquiry-btn i {
    font-size: 16px;
}

/* --- 商品詳細: ZOZO風フルワイド画像（スマホ） --- */
@media screen and (max-width: 768px) {
    .product_page .ec-productRole {
        padding: 0;
        max-width: 100%;
    }

    .product_page .ec-sliderItemRole {
        padding: 0;
        margin: 0;
        max-width: 100%;
        margin-bottom: 0;
    }

    .product_page .ec-sliderItemRole .item_visual {
        width: 100%;
    }

    .product_page .ec-sliderItemRole .slide-item img {
        width: 100%;
        height: auto;
        display: block;
    }

    .product_page .ec-grid2__cell {
        margin-bottom: 0;
    }

    .product_page .ec-productRole__profile {
        padding: 15px;
    }
}

/* --- 価格表示: 2系スタイル（税抜大きく左 + 税込小さく右） --- */
.surprise-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 0;
}

.surprise-price__excl {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    letter-spacing: 0.5px;
}

.surprise-price__excl.ec-price__price--sale {
    color: #de5d50;
}

.surprise-price__incl {
    font-size: 13px;
    color: #888;
}

/* --- 一覧ページの価格表示（税抜大+税込小） --- */
.surprise-price--list {
    padding: 3px 0;
}

.surprise-price--list .surprise-price__excl {
    font-size: 16px;
}

.surprise-price--list .surprise-price__incl {
    font-size: 11px;
}

@media screen and (max-width: 480px) {
    .surprise-price--list {
        flex-direction: column;
        gap: 2px;
    }
    .surprise-price--list .surprise-price__excl {
        font-size: 14px;
    }
    .surprise-price--list .surprise-price__incl {
        font-size: 10px;
    }
}

/* --- 縦1列レイアウト（WHIZ等ブランド専用） --- */
.ec-shelfGrid--vertical {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ec-shelfGrid--vertical .ec-shelfGrid__item {
    width: 100% !important;
    margin: 0 !important;
}

.ec-shelfGrid--vertical .ec-shelfGrid__item > a:not(.surprise-stock-box-link) {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    text-decoration: none;
    color: #333;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.ec-shelfGrid--vertical .ec-shelfGrid__item-image {
    width: 200px;
    min-width: 200px;
    margin: 0;
}

.ec-shelfGrid--vertical .ec-shelfGrid__item-image img {
    width: 100%;
    height: auto;
}

.ec-shelfGrid--vertical .ec-shelfGrid__item > a > p {
    margin: 0;
}

@media screen and (max-width: 768px) {
    .ec-shelfGrid--vertical .ec-shelfGrid__item > a {
        gap: 12px;
    }

    .ec-shelfGrid--vertical .ec-shelfGrid__item-image {
        width: 140px;
        min-width: 140px;
    }
}

@media screen and (max-width: 480px) {
    .ec-shelfGrid--vertical .ec-shelfGrid__item-image {
        width: 120px;
        min-width: 120px;
    }
}

/* --- 縦1列: 一覧コメント表示（2系風） --- */
.ec-shelfGrid--vertical .ec-shelfGrid__item-comment {
    font-size: 12px;
    line-height: 1.8;
    color: #555;
    margin-top: 8px;
    white-space: pre-wrap;
}

/* 縦1列: 商品名 */
.ec-shelfGrid--vertical .ec-shelfGrid__item > a > p:first-of-type {
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 5px;
    color: #333;
}

/* 縦1列: 右側の情報エリアをflex縦並び */
.ec-shelfGrid--vertical .ec-shelfGrid__item > a {
    flex-wrap: nowrap;
}

/* --- 商品コード（縦1列用） --- */
.ec-shelfGrid--vertical .ec-shelfGrid__item-code {
    font-size: 13px;
    color: #666;
    margin: 0 0 5px;
}

/* --- 在庫状況ボックス（スタイリッシュ版） --- */
.surprise-stock-box {
    width: 100%;
    margin: 12px 0;
    border: 1px solid #000;
    background: #fff;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}
a.surprise-stock-box-link:hover .surprise-stock-box {
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    transform: translateY(-1px);
}

.surprise-stock-box__title {
    background: #000;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 9px 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.surprise-stock-box__body {
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.85;
    background: #fafafa;
}

.surprise-stock-box__row {
    white-space: nowrap;
    padding: 5px 0;
    border-bottom: 1px dashed #e0e0e0;
}
.surprise-stock-box__row:last-child { border-bottom: none; }

/* --- 商品説明（1段落目、縦1列用） --- */
.surprise-list-desc {
    width: 100%;
    font-size: 13px;
    line-height: 1.8;
    color: #333;
    margin: 5px 0 0;
}

/* --- 縦1列: 右側情報エリアのスタイリッシュ化 --- */
.ec-shelfGrid--vertical .ec-shelfGrid__item > a {
    display: grid;
    grid-template-columns: 180px 1fr;
    grid-template-rows: auto;
    gap: 0 20px;
    align-items: start;
    padding-bottom: 10px;
    border-bottom: none;
}

.ec-shelfGrid--vertical .ec-shelfGrid__item > a > * {
    grid-column: 2;
}

.ec-shelfGrid--vertical .ec-shelfGrid__item > a > .ec-shelfGrid__item-image {
    grid-column: 1;
    grid-row: 1 / 20;
}

.ec-shelfGrid--vertical .ec-shelfGrid__item-image {
    grid-row: 1;
    grid-column: 1;
    width: 100%;
    min-width: unset;
}

.ec-shelfGrid--vertical .ec-shelfGrid__item > a > .ec-shelfGrid__item-name {
    font-size: 28px;
    font-weight: 700;
    color: #111;
    margin: 0;
    letter-spacing: 0.5px;
    line-height: 1.3;
}

.ec-shelfGrid--vertical .ec-shelfGrid__item-code {
    font-size: 11px !important;
    color: #999 !important;
    margin: 2px 0 8px !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ec-shelfGrid--vertical .surprise-price--list {
    margin-top: 15px;
    padding: 0;
}

.ec-shelfGrid--vertical .surprise-price--list .surprise-price__excl {
    font-size: 20px;
    font-weight: 700;
    color: #333;
}

.ec-shelfGrid--vertical .surprise-price--list .surprise-price__incl {
    font-size: 11px;
    color: #999;
    display: block;
    margin-top: 2px;
}

.ec-shelfGrid--vertical .ec-shelfGrid__item {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.ec-shelfGrid--vertical .price01-list {
    font-size: 12px;
    color: #999;
    margin: 0;
}

@media screen and (max-width: 480px) {
    .ec-shelfGrid--vertical .ec-shelfGrid__item > a {
        grid-template-columns: 130px 1fr;
        gap: 0 12px;
    }

    .ec-shelfGrid--vertical .ec-shelfGrid__item > a > .ec-shelfGrid__item-name {
        font-size: 24px;
    }

    .ec-shelfGrid--vertical .surprise-price--list .surprise-price__excl {
        font-size: 18px;
    }
}

/* =============================================
   PC向け最適化（769px以上）
   ============================================= */
@media screen and (min-width: 769px) {

    /* ヘッダー: ロゴを左寄せ、ボタンとインライン */
    .surprise-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 0;
    }

    .surprise-logo img {
        max-width: 350px;
    }

    /* ハンバーガー非表示 */
    .surprise-hamburger {
        display: none !important;
    }

    /* 検索バーの幅制限 */
    .surprise-search-bar {
        max-width: 500px;
        margin: 0 auto 10px;
    }

    /* 商品詳細: 画像とサムネイルの調整 */
    .product_page .ec-sliderItemRole {
        max-width: none;
        padding: 0;
    }

    .product_page .ec-sliderItemRole .item_nav {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    .product_page .ec-sliderItemRole .slideThumb {
        width: 80px;
        margin: 0 5px 5px 0;
        cursor: pointer;
        opacity: 0.7;
        transition: opacity 0.2s;
    }

    .product_page .ec-sliderItemRole .slideThumb:hover {
        opacity: 1;
    }

    .product_page .ec-sliderItemRole .slideThumb img {
        width: 100%;
        height: auto;
    }

    /* 商品詳細: 右側情報エリアのフォントサイズ */
    .ec-productRole__title h2 {
        font-size: 22px;
    }

    /* 商品一覧: ホバーエフェクト */
    .ec-shelfGrid__item a:hover .ec-shelfGrid__item-image img {
        opacity: 0.8;
        transition: opacity 0.2s;
    }

    .ec-shelfGrid__item-image img {
        transition: opacity 0.2s;
    }

    /* フッター: PC幅で横並び */
    .surprise-footer {
        max-width: 960px;
        margin: 0 auto;
    }

    /* ブランド・カテゴリのアコーディオン: PCでは常に開く */
    .surprise-category-nav__section.is-closed .surprise-category-nav__logos,
    .surprise-category-nav__section.is-closed .surprise-category-nav__list {
        max-height: 800px;
    }

    .surprise-category-nav__toggle {
        display: none;
    }

    .surprise-category-nav__title {
        cursor: default;
    }

    /* ブランド・カテゴリを横並び */
    .surprise-category-nav {
        display: flex;
        gap: 30px;
    }
}

/* --- 一覧 description_list (品番+在庫情報) --- */
.surprise-list-meta {
    font-size: 12px;
    line-height: 1.5;
    color: #555;
    margin: 4px 0 6px;
    white-space: pre-wrap;
}

/* --- 詳細 description_list (商品説明の上) --- */
.ec-productRole__description-list {
    font-size: 13px;
    line-height: 1.6;
    color: #555;
    margin: 0 0 12px;
    white-space: pre-wrap;
}

/* --- 在庫表示 強化 (2026-05-16) --- */
/* 動的在庫ボックスを目立たせる */
.surprise-stock-box {
    background-color: #f8f8f0 !important;
    border: 1px solid #c8a8a8 !important;
    border-radius: 4px;
    padding: 8px 10px;
    margin: 8px 0 !important;
}
.surprise-stock-box__body {
    padding: 0 !important;
    font-weight: 500;
    color: #333;
}
.surprise-stock-box__row {
    padding: 2px 0;
}


/* 在庫ボックスをリンク化 (下線・色継承) */
a.surprise-stock-box-link {
    display: block;
    text-decoration: none !important;
    color: inherit !important;
}
a.surprise-stock-box-link:hover .surprise-stock-box {
    border-color: #888 !important;
}

/* WHIZ vertical時の在庫ボックスを商品カード全幅に (2026-05-16) */
.ec-shelfGrid--vertical .ec-shelfGrid__item > a.surprise-stock-box-link {
    display: block !important;
    width: 100% !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    margin-top: 8px;
}
.ec-shelfGrid--vertical .surprise-stock-box {
    width: 100% !important;
    box-sizing: border-box;
}


/* 商品情報まとめ div (画像の横に縦並びで配置) 2026-05-16 */
.surprise-list-info {
    flex: 1;
    min-width: 0;
}
.surprise-list-info > p,
.surprise-list-info > div {
    margin: 0 0 6px 0;
}
.ec-shelfGrid--vertical .surprise-list-info .ec-shelfGrid__item-name {
    font-size: 16px;
    font-weight: bold;
    line-height: 1.3;
}

/* WHIZ vertical の画像サイズを強制制限 (大きすぎる対策) 2026-05-16 */
.ec-shelfGrid--vertical .ec-shelfGrid__item-image {
    width: 35% !important;
    min-width: 0 !important;
    max-width: 180px !important;
    flex-shrink: 0 !important;
}
.ec-shelfGrid--vertical .ec-shelfGrid__item-image img {
    width: 100% !important;
    height: auto !important;
}

/* 2026-05-16: スライダー下3カラムはPC幅でのみ非表示 (SPはそのまま表示) */
@media screen and (min-width: 769px) {
    .surprise-category-nav,
    .surprise-sns-banners { display: none !important; }
}
.surprise-stock-box__soldout {
    text-align: center;
    letter-spacing: 0.25em;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 0 !important;
    color: #b00;
}

/* 商品詳細ページの「ブログで紹介してます!」リンクをボタン化 (2系移植 2026-05-18 切替時) */
.blog-go a {
    padding: 10px 20px;
    border: 1px solid #2b2b2b;
    text-align: center;
    margin: 10px 0;
    background: #3e7ab1;
    border-radius: 5px;
    color: #fff;
    display: block;
    text-decoration: none;
}
.blog-go a:hover {
    color: #cecece;
    text-decoration: none;
}

/* === SURPRISE モダン ブログ誘導ボタン (override) 2026-05-18 === */
.blog-go {
    margin: 28px 0;
}
.blog-go a,
.blog-go a:link,
.blog-go a:visited {
    display: block;
    padding: 16px 24px;
    background: #1a1a1a;
    color: #fff !important;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-align: center;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.blog-go a::after {
    content: '\2192';
    display: inline-block;
    margin-left: 8px;
    font-weight: 400;
    transition: transform 0.2s ease;
}
.blog-go a:hover,
.blog-go a:focus,
.blog-go a:active {
    background: #c40808;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(196, 8, 8, 0.28);
    transform: translateY(-1px);
    text-decoration: none;
}
.blog-go a:hover::after,
.blog-go a:focus::after {
    transform: translateX(5px);
}
@media (max-width: 600px) {
    .blog-go a {
        padding: 18px 20px;
        font-size: 13px;
    }
}