/**********************************/
/* メニューパーツ                   */
/**********************************/
/* 囲み枠を非表示 */
.fs-p-sideMenu .fs-pt-menu__heading--lv2{
    border-bottom: none; 
}

/* 囲み枠を非表示 */
.fs-p-sideMenu .fs-pt-menu__heading--lv3{
    border-bottom: none;
}

/**********************************/
/* 商品詳細・一覧パーツ              */
/**********************************/

/* キャッチコピー（説明文）を全画面で非表示 */ 
.fs-c-productList__copy,
.fs-c-productNameHeading__copy,
.fs-c-productName__copy { 
    display: none !important; 
}

/**********************************/
/* 商品グループ(メイン画面)           */
/**********************************/

/* 商品グループの件数を非表示 */
.fs-c-subgroup .fs-c-listControl{
     display: none;
}

/* 囲み枠を非表示 背景色を白に変更 文字色をリンクの色に変更 */
.fs-c-subgroup .fs-c-subgroupList__link{
    border-color: #ffffff;
    background: #999999;
    color: #ffffff;
}

.fs-c-subgroup .fs-c-subgroupList__link::after{
    color: #ffffff;
}

/**********************************/
/* インスタグラム                    */
/**********************************/
.insta_list{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    margin: 3vw 0 2vw;
}

.instagram_slider_items_2row .slick-arrow {
   display: none!important;
}

.insta_list img{
    width: 13vw;
    padding: 0 .25vw;
}

.instagram_slider_items_2row .slick-slide img {
  display: block;
  width: 17vw;
  max-width: 224px;
  height: 17vw;
  max-height: 224px;
  margin: 0 5px;
  position: relative;
  float: left;
  object-fit: cover;
  border: 1px solid #d7cfcc;
}

/**********************************/
/* レスポンシブ対応（PC・タブレット） */
/**********************************/
.top_grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(4, minmax(100px, 1fr));
}
.topSNSitem {
    width: 100%;
    display: flex;
    padding: 5px;
    justify-content: center;
}
.top_item {
  text-align: center;
}
img {
  max-width: 100%;
  height: auto;
}

/* PC用CSS（画面サイズ1200px以上） */
@media screen and (min-width: 1200px) {
    .morelink {
        font-size: 1.8rem;
        text-decoration: underline;
    }

    .top-sns-item-pc{
        display: flex !important;
    }
    .top-sns-item-sp{
        display: none !important;
    }
}

/* タブレット用(画面サイズ480px以上1200px以下) */
@media screen and (min-width: 480px) and (max-width: 1200px) {
    .morelink {
        font-size: 1.6rem;
        text-decoration: underline;
    }

    .top-sns-item-pc{
        display: flex !important;
    }
    .top-sns-item-sp{
        display: none !important;
    }

    .instagram_slider_items_2row .slick-slide img {
        width: 20vw;
        height: 20vw;
        position: relative;
        object-fit: cover;
        border: 1px solid #d7cfcc;
    }
}

.buttonsale {
  background-color: #fff;
  border: solid 2px #778388;
  color: #778388;
  padding: 10px 30px;
  text-decoration: none;
  font-size: 1em;
}

.button02:hover {
  color: #778388;
  background-color: #b0e0e6;
}

/**********************************/
/* 割引率バッジ＆不要要素の非表示    */
/**********************************/

/* 1. 商品一言説明（子供服 Bee キッズ ボトムス 等）を非表示 */
[data-fs-element="product-card-copy"],
.fs-c-productCard__copy {
    display: none !important;
}

/* 2. 「詳細を見る」リンクだけを非表示 */
[data-fs-element="product-card-detail-link"],
.fs-c-productCard__detail {
    display: none !important;
}

/* 3. OFF率バッジのデザイン */
.custom-discount-badge-top {
    display: inline-block !important;
    background-color: #e60012 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 11px !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    margin-bottom: 4px !important;
    width: fit-content !important;
    line-height: 1.2 !important;
}

/**********************************/
/* スマホ用設定（画面サイズ480px以下） */
/**********************************/
@media screen and (max-width: 480px) {
    .morelink {
        font-size: 1.3rem;
        text-decoration: underline;
    }

    .top_grid {
         grid-template-columns: repeat(3, minmax(100px, 1fr));
    }

    .top-sns-item-pc{
        display: none !important;
    }
    .top-sns-item-sp{
        display: flex !important;
    }

    .instagram_slider_items_2row .slick-slide img {
        width: 28vw;
        height: 28vw;
        position: relative;
        object-fit: cover;
        border: 1px solid #d7cfcc;
    }
}

/**********************************/
/* アナウンスバー（最上部帯）のスマート化 */
/**********************************/
/* 帯全体の設定 */
.header-announcement-bar,
.fs-c-headerAnnouncementBar,
[class*="announcement"] {
    background-color: #333333 !important; /* 濃いグレー〜黒背景 */
    color: #ffffff !important;             /* 文字色：白 */
    font-size: 11px !important;            /* フォントサイズをコンパクトに */
    font-weight: bold !important;
    text-align: center !important;
    padding: 6px 10px !important;          /* 上下の余白（厚み）を調整 */
    line-height: 1.2 !important;
    letter-spacing: 0.05em !important;
}

/* リンクが含まれている場合の色調整 */
.header-announcement-bar a,
.fs-c-headerAnnouncementBar a,
[class*="announcement"] a {
    color: #ffffff !important;
    text-decoration: none !important;
}

/* アイコンがある場合のサイズ・余白調整 */
.header-announcement-bar img,
.header-announcement-bar svg {
    height: 12px !important;
    width: auto !important;
    vertical-align: -1px !important;
    margin-right: 4px !important;
}

/**********************************/
/* アナウンスバー上の余白を消去 */
/**********************************/
/* ページ最上部・ヘッダー全体の隙間（margin / padding）を完全にリセット */
html, body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ヘッダー枠およびアナウンスバー自体の最上部余白を解除 */
.fs-l-header,
.fs-c-headerAnnouncementBar,
.header-announcement-bar,
[class*="announcement"] {
    margin-top: 0 !important;
    padding-top: 6px !important; /* バー自体の上の厚み（お好みで調整） */
}

/**********************************/
/* アナウンスバー上の白い隙間を完全消去 */
/**********************************/
/* 1. ページ最上部・ヘッダーの隙間をゼロにリセット */
html, body, header, .fs-l-header {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 2. アナウンスバー自体の位置調整と隙間消去 */
.fs-c-headerAnnouncementBar,
.header-announcement-bar,
[class*="announcement"] {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    display: block !important;
    position: relative !important;
    top: 0 !important;
}


/**********************************/
/* 検索バーの基本デザイン調整（初期アイコン使用） */
/**********************************/

/* 入力欄を囲む部分の枠線をはっきりさせる */
.fs-p-searchForm .fs-p-searchForm__inputGroup,
.fs-p-searchForm .fs-p-inputGroup,
.fs-c-searchBox {
    display: flex !important;
    align-items: center !important;
    background-color: #ffffff !important;
    border: 1px solid #778388 !important;
    border-radius: 50px !important;
    padding: 2px 12px !important;
    box-shadow: none !important;
    width: 100% !important;
}

/* 入力文字の調整 */
.fs-p-searchForm input.fs-p-searchForm__input,
.fs-c-searchBox input[type="text"] {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    width: 100% !important;
    font-size: 14px !important;
    color: #333333 !important;
    padding: 6px 0 !important;
}

.fs-p-searchForm__input::placeholder,
.fs-c-searchBox__input::placeholder {
    color: #777777 !important;
}

/**********************************/
/* 検索ボタンの背景を白にし、グレーの虫眼鏡を配置する */
/**********************************/
.fs-p-searchForm button.fs-p-searchForm__button,
.fs-c-searchBox button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #ffffff !important; /* ボタンの背景を白に */
    border: none !important;
    border-radius: 0 50px 50px 0 !important; /* 入力欄の右側の丸みに合わせる */
    box-shadow: none !important;
    width: 36px !important;
    height: 36px !important;
    cursor: pointer !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    position: relative !important;
    /* すっきりと見やすいグレーの線画虫眼鏡を背景に設定 */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23777777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7.5'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='15.8' y2='15.8'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
}

/* 予期せぬ余計なマークが重ならないようにクリア */
.fs-p-searchForm button.fs-p-searchForm__button::before,
.fs-c-searchBox button::before,
.fs-p-searchForm button.fs-p-searchForm__button::after,
.fs-c-searchBox button::after {
    content: none !important;
    display: none !important;
}



/**********************************/
/* パーツの余白 */
/**********************************/

/* 各セクション（パーツ）の上下の余白を詰める */
.fs-c-subgroup, 
.fs-l-section,
[class*="section"],
[class*="ranking"],
[class*="pickup"] {
    margin-top: 15px !important;
    margin-bottom: 15px !important;
}

/* 見出し周りの余白もコンパクトにする */
.fs-c-productNameHeading, 
[class*="heading"] {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
}



/**********************************/
/* 検索バーの下とメインビジュアルの間の境界線を消す */
/**********************************/
.fs-l-header,
.fs-p-searchForm,
.fs-c-searchBox,
[class*="header"],
[class*="search"] {
    border-bottom: none !important;
    box-shadow: none !important;
}

.fs-l-mainVisual,
.fs-c-mainVisual,
[class*="mainVisual"],
[class*="carousel"] {
    border-top: none !important;
}

/**********************************/
/* スマホで検索バーの下に余白を持たせる */
/**********************************/
@media screen and (max-width: 480px) {
    .fs-p-searchForm,
    .fs-c-searchBox,
    [class*="search"] {
        margin-bottom: 5px !important; /* お好みで 10px〜15px くらいに調整してください */
    }
}

/**********************************/
/* 商品スライダーの左右の矢印（＜ ＞）を非表示にする */
/**********************************/
.slick-arrow,
.slick-prev,
.slick-next,
[class*="slick-arrow"],
[class*="carousel-arrow"] {
    display: none !important;
}

/**********************************/
/* 商品パーツの文字サイズ調整 */
/**********************************/
@media screen and (max-width: 768px) {
    /* 商品名や価格の文字サイズを小さくすっきりさせる */
    .fs-c-product__name,
    [class*="product"] a,
    [class*="itemName"] {
        font-size: 11px !important; /* お好みで 11px〜13px に調整可能です */
    }
    
    /* 価格や割引表示の文字サイズも連動して小さくする */
    .fs-c-product__price,
    [class*="price"] {
        font-size: 11px !important;
    }