﻿@charset "UTF-8";
/* =========================
  スライダー　背景
========================= */
.block-top-body--body{
  background:#e6f1f2;
  padding:25px 0 30px;
}
@media (max-width: 767px){
  .block-top-body--body{
    padding-top:25px;
    padding-bottom:20px;
  }
}



/* スライド　アスペクト比：リセット */
#top-slider img{
  aspect-ratio: auto!important; 
}

section {margin:0;}


/* =========================
  slick チラ見せ共通
========================= */

/* slickの外にはみ出して見せる */
#top-slider-warp{
  overflow:hidden;
}

/* slickの表示窓は visible */
#top-slider-warp .slick-list{
  overflow: visible;
}
#top-slider-warp a:focus:not(:focus-visible){
  outline: none;
}
/* 画像 */
#top-slider-warp img{
  width:100%;
  height:auto;
  display:block;
}

/* =========================
  SP（〜768px）
========================= */
@media (max-width: 767px){
  #top-slider-warp .slick-slide{
    padding: 40px 6px 0;
  }
}

/* =========================
  PC（769px〜）
========================= */
@media (min-width: 768px){
  #top-slider-warp .slick-slide{
    padding: 0 15px;
  }
}


/* =========================
  slick ページネーション（ドット）
========================= */

#top-slider-warp .slick-dots{
  bottom: -35px;
}

#top-slider-warp .slick-dots li{
  width: 10px;
  height: 10px;
  margin: 0 6px;
}

#top-slider-warp .slick-dots li button{
  width: 10px;
  height: 10px;
  padding: 0;
}

#top-slider-warp .slick-dots li button:before{
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  opacity: 1;

  position: absolute;
  top: 0;
  left: 0;
}

/* アクティブ */
#top-slider-warp .slick-dots li.slick-active button:before{
  background: #73aab7;
}

@media (max-width: 767px){
  #top-slider-warp .slick-dots li{
    width: 12px;
    height: 12px;
    margin: 0 6px;
  }

  #top-slider-warp .slick-dots li button:before{
    width: 12px;
    height: 12px;
  }
  #top-slider-warp .slick-dots{
    bottom: -30px;
  }
}

/* =========================
  slick 初期化（初期乱れ対策）
========================= */
#top-slider{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#top-slider.slick-initialized{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .22s ease;
}


/* トピック調整 */
.block-icon-image--angle-right{
  display:none;
}

/* 各行：左右余白＋点線を内側に */
.block-top-topic--body .block-topic--items > li{
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-weight: normal !important;
  color:#333;
}


/* 調整 */
.block-top-topic--icon-image img{
  display:block;
}

/* slick初期化前：2枚目以降を隠して「縦に全部並ぶ」を防止 */
#top-slider:not(.slick-initialized) > *:not(:first-child){
  display:none!important;
}

#top-slider{ visibility:hidden!important; opacity:0!important; }
#top-slider.slick-initialized{
  visibility:visible!important;
  opacity:1!important;
  transition:opacity .15s ease;
}






@media (max-width: 767px){
  .page-top .block-top-topic--icon-image {
    margin-top:2px;
  }
  .block-top-topic--body
  .block-topic--items dt{
    padding-left: 47px;
    margin-bottom:5px!important;
    font-size:14px!important;
  }
  .block-top-topic--body
  .block-topic--items dd{
    font-size:16px!important;
  }
  .block-topic--items dd .block-top-topic--comment {
    font-size:16px!important;
  }

  /* アイコンが無い dd だけ右にずらす */
  .block-top-topic--body
  .block-topic--items dd:not(:has(.block-top-topic--icon-image)){
    padding-left: 40px; /* ← ずらし量の調整 */
  }

}









/* =============
  臨時お知らせ枠
================ */
.tmp-notice{
  max-width:1180px;
  width:100%;
  margin:50px auto 0; /* 上部に余白 */
  background:#f1eeeb;
  color:#333333;
  padding:25px 30px;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
}

/* リスト */
.tmp-notice__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:20px; /* データ同士の余白を増やす */
}

/* 1件（PCは「左：タイトル列 / 右：リンク列」） */
.tmp-notice__item{
  display:grid;
  grid-template-columns:185px 1fr;
  column-gap:0;          /* タイトル右の余白感を消す */
  align-items:center;    /* ★1件目（2行）の中央にタイトルが来る */
}

/* ★タイトルはCSSで「1件目だけ」描画（保守はli追加のみ） */
.tmp-notice__item::before{
  content:"";            /* 2件目以降は空 */
  display:block;
}

/* 1件目だけ：ホーン画像＋重要なお知らせ */
.tmp-notice__item:first-child::before{
  content:"重要なお知らせ";
  display:flex;
  align-items:center;
    font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  padding-left:50px; /* アイコン右マージン */
  min-height:28px;

  color:#bf292a;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.2;
  font-size:16px;
  background:
    url("../../img/usr/common/horn.png")
    no-repeat left center / 30px auto;
}

/* リンク（クリック範囲は日付も本文も含む） */
.tmp-notice__link{
  display:flex;
  flex-direction:column; /* PC：日付と本文は縦並び */
  gap:4px;
  padding-left:22px;     /* タイトル列からの距離（必要分だけ本文側で） */

  color:#333333;
  text-decoration:none;  /* 通常は下線なし */
}

.tmp-notice__link:hover{
  text-decoration:underline; /* hoverで下線 */
  text-underline-offset:2px;
}

/* 日付：少し小さく */
.tmp-notice__date{
  font-size:14px;
  line-height:1.2;
  color:#555;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}

.tmp-notice__text{
  font-size:16px;
    font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
  line-height:1.5;
}

/* =========================
  SP：枠は100%幅（背景は端まで）・中身の余白だけ調整
========================= */
@media (max-width: 767px){

  .tmp-notice{
    max-width:none;
    width:100%;
    margin:30px 0 0;
    padding:20px 10px 20px 30px!important;
    border-radius:0;
    box-sizing: border-box;
    max-width: 100%;
    overflow-x: hidden;
  }

  .tmp-notice__list{
    gap:12px;
  }

  .tmp-notice__item{
    grid-template-columns:1fr; /* 1列 */
    row-gap:18px;
    align-items:start;
  }

  /* SPは「1件目だけタイトルを出す」。2件目以降の空要素は消す */
  .tmp-notice__item::before{
    display:none;
  }
  .tmp-notice__item:first-child::before{
    display:flex;
    padding-left:52px; /* ★PCと揃える（アイコン大きめ前提） */
    min-height:28px;
    font-size:16px;
    background:
      url("../../img/usr/common/horn.png")
      no-repeat left center / 40px auto;
  }
  /* 日付 */
  .tmp-notice__date{
    font-size:16px;
  }
  /* SP：日付＋本文は横並び */
  .tmp-notice__link{
    display:flex;
    flex-direction:row;
    align-items:baseline;
    padding-left:0;
    flex-wrap:nowrap;
    gap:20px;
  }
}





/* === 表示順変更 === */
/* NEWS （トピック） */
#block_of_topic{
  /*order:1;*/
}

/* イベント（トップ表示の) */
#block_of_event {
  /*order:2;*/
}

/* カテゴリ */
#block_of_category{
  /*order:3;*/
}

/* フリー枠 */
#block_of_top_free2 {
  /*order:10;*/
}




/* NEWS（お知らせ） 変更 */

.block-top-topic--body {
  background:#fff!important;
  padding-bottom:0;
}

/* NEWS（英字）：小さく・ゴシック */
.block-top-topic--header{
  font-size: 0;
  line-height: 0;
  padding-top:70px;
}

.block-top-topic--header::before{
  content: "News";
  font-size: 14px;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-weight: 400;
  margin-bottom:10px;
  letter-spacing: 0.08em;
  color:#333;
  font-weight:700;
}

/* 「ニュース」は非表示（構造保持） */
.block-top-topic--header span{
  font-size: 0;
}

/* 表示上は「お知らせ」：明朝・大きく */
.block-top-topic--header span::before{
  content: "お知らせ";
  display: block;
  font-family:
  "Zen Old Mincho",
  "Hiragino Mincho ProN",
  "Yu Mincho",
  "MS PMincho",
   serif;
  margin-top: 10px;
  letter-spacing:0.03em;
  font-size: 32px;
  font-weight: 500;
  color:#333;

}
.block-top-topic--comment {
  font-size:16px!important;
  color:#333;
}

@media (max-width: 767px){
  .block-top-topic--header span::before{
    font-size: 28px;
  }

}

/* お知らせ (News)　の PC向けカスタマイズ */
@media (min-width: 768px){
  #block_of_topic ul {margin:0 auto!important;max-width:1180px!important;}

}

/* =========================
  次ページリンク（もっと見る）
========================= */
.block-top-topic--next-page{
  text-align: center;   /* 中央寄せ */
  margin-top: 40px;     /* 前コンテンツとの余白 */
}

.block-top-topic--next-page a{
  position: relative;
  display: inline-block;
  width:400px!important;
  background: #73aab7;
  color: #fff;
  border: none;
  border-radius: 999px;

  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-weight: 700;
  text-decoration: none;
  padding: 17px 46px 17px 46px; /* 右に矢印分余白 */
  line-height: 1.2;

  font-size: 0; /* 元の「続きを読む」を消す */
}

/* 表示テキスト */
.block-top-topic--next-page a::before{
  content: "もっと見る";
  font-size: 16px;
  color: #fff;
}

/* CSS矢印（文字不使用） */
.block-top-topic--next-page a::after{
  content: "";
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

/* hover（PCのみ） */
@media (hover:hover){
  .block-top-topic--next-page a:hover{
    filter: brightness(1.06);
    opacity:0.6;
  }
  a.block-list-add-cart-btn:hover{
    filter: brightness(1.06);
    opacity:0.6;
  }
}

@media (max-width: 767px){
  .block-top-topic--header span::before{
    font-size: 28px;
  }

  .block-top-topic--next-page{
    margin-top: 30px;     /* 前コンテンツとの余白 */
  }

  .block-top-topic--next-page a{
    width:300px!important;
    padding: 25px 46px 25px 46px; /* 右に矢印分余白 */
    line-height: 1.2;
  }

  /* 表示テキスト */
  .block-top-topic--next-page a::before{
    font-size: 18px;
  }


}



/* ランキング：バッジサイズ調整（PC） */
.js-rank-badge{
  width: 60px;
  height: auto;
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 10;
  pointer-events: none; /* hover影響させない */
}

/* SP */
@media (max-width: 767px){
  .js-rank-badge{
    width: 50px;
  }
}

/* hover時にopacityを変化させない */
.js-enhanced-ecommerce-goods-name:hover .js-rank-badge{
  opacity: 1 !important;
}



/* デフォルトカテゴリは表示なし */
.page-top #block_of_category {
  display:none;
}







.page-top #block_of_event{
  padding-top:130px;
  background-image: url("../../img/usr/common/back_wave_r.png");
  background-repeat: no-repeat;
  background-position: right top;
  background-size: clamp(240px, 24%, 260px) auto;
}
@media (max-width: 767px){
  .page-top #block_of_topic {
    padding-bottom:40px;
  }
  .page-top #block_of_event{
    padding-top:60px;
    background-image: url("../../img/usr/common/back_wave_r.png");
    background-size: clamp(150px, 34%, 360px) auto!important;
  }
}


.page-top #block_of_event h2.block-top-title:nth-of-type(2){
  margin-top:50px;
  padding-top:70px;
  background-image: url("../../img/usr/common/back_wave_l.png");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: clamp(240px, 24%, 260px) auto;
}
@media (max-width: 767px){

  .page-top h2.block-top-title:nth-of-type(2){
    padding-top:55px!important;
    background-image: url("../../img/usr/common/back_wave_l.png");
    background-size: clamp(150px, 34%, 360px) auto!important;
  }
}




/* =========================
  [goods] カルーセル外枠
  PC：max 1000px / 中央
  Tablet：90% / 中央
  SP：100%
========================= */
#goods_list_auto_load_area{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}
/* PC調整 */
@media (min-width: 1025px) and (max-width: 1350px){
  #goods_list_auto_load_area{
    width: 90%;
    max-width: none;
    margin: 0 auto;
  }
}

/* Tablet：90%（中央） */
@media (min-width: 768px) and (max-width: 1024px){
  #goods_list_auto_load_area{
    width: 85%;
    max-width: none;
    margin: 0 auto;
  }
}

/* SP：100% */
@media (max-width: 767px){
  #goods_list_auto_load_area{
    max-width: none;
    margin: 0;

  }
}

/* 幅が半分になる事故対策（親側が50%/flex等を持っているケースを潰す） */
.block-top-event--goods{
  width: 100%;
  max-width: none;
}

.block-top-event--goods .goods-list-qty {
  display:none!important;
}
footer.pane-footer {
  margin-top:0!important;
}


/* =========================
  [goods] 元 items（slickが当たる要素）
========================= */
#goods_list_auto_load_area .block-goods-detail-j--items{
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  border:none!important;
}

/* li直下でも崩れないように */
#goods_list_auto_load_area .block-goods-detail-j--items > li{
  list-style: none;
  margin: 0;
  padding: 0;
}
/* セール名がないときは非表示 */
#goods_list_auto_load_area .block-goods-detail-j--scomment:empty{
  display: none;
}

/* =========================
  [goods] slick.css 最低限（no-white safe）
========================= */
#goods_list_auto_load_area .slick-slider{
  position: relative;
  display: block;
  box-sizing: border-box;
  touch-action: pan-y;
}

#goods_list_auto_load_area .slick-list{
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

#goods_list_auto_load_area .slick-track{
  display: flex;
  flex-wrap: nowrap;
  will-change: transform;
}

#goods_list_auto_load_area .slick-slide{
  flex: 0 0 auto;
  height: auto;
  min-height: 1px;
  box-sizing: border-box;
}

/* スライド間の余白（全体バランス） */
#goods_list_auto_load_area .slick-slide > div{
  padding: 0 4px;
  box-sizing: border-box;
}

@media (max-width: 767px){
  #goods_list_auto_load_area .slick-slide > div{
    padding: 0 6px;
  }
}



/* =========================
  [goods] カード内部：縦積み（画像 → 説明）
========================= */
#goods_list_auto_load_area .block-goods-detail-j--item{
  display: block;
  box-sizing: border-box;
}

/* 画像ブロック／説明ブロックを縦に */
#goods_list_auto_load_area
.block-goods-detail-j--item
.block-goods-list--image-relative,
#goods_list_auto_load_area
.block-goods-detail-j--item
.block-goods-detail-j--goods-description{
  width: 100%;
  max-width: none;
  float: none;
  box-sizing: border-box;
}


/* 画像が左寄せ＆説明より細くなる問題を潰す（最小・忠実） */
#goods_list_auto_load_area .block-goods-list--image-relative a{
  display: block;
  width: 100%;
}

#goods_list_auto_load_area .block-goods-detail-j--goods-image,
#goods_list_auto_load_area .block-goods-detail-j--goods-image figure,
#goods_list_auto_load_area .block-goods-detail-j--goods-image .img-center{
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  aspect-ratio: 4 / 3!important;
}

/* =========================
  [goods] 画像
========================= */
#goods_list_auto_load_area .block-goods-detail-j--goods-image{
  overflow: hidden;
  border-radius: 8px;
  background: transparent;

  position: relative;
}

#goods_list_auto_load_area .block-goods-detail-j--goods-image figure,
#goods_list_auto_load_area .block-goods-detail-j--goods-image .img-center{
  width:100%;
  height:100%;
}
#goods_list_auto_load_area .block-goods-detail-j--goods-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;

  display:block;
  max-width:none;
  max-height:none;
}

/* 画像と説明の間 */
#goods_list_auto_load_area
.block-goods-detail-j--item
.block-goods-detail-j--goods-description{
  width:90%!important;
  margin:6px auto 0!important;
  padding: 0 2px!important;
}


/* カルーセル内　アイコンサイズ制御 */
#goods_list_auto_load_area
.block-goods-detail-j--item
.block-goods-detail-j--goods-description
.block-icon{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  gap:2px;
}

.block-goods-detail-j--item
.block-goods-detail-j--goods-description
.block-icon img {
  height:1.5vw!important;
  max-height:19px;
  aspect-ratio: 7 / 2;
  margin-bottom:2px;
}

.block-goods-detail-j--item
.block-icon
.block-icon--auto-on-sales img {
  /* セール (sale) */
  height:1.5vw!important;
  max-height:19px;
  margin-bottom:2px;
  aspect-ratio: 2 / 1!important;
}

@media (min-width: 768px) and (max-width: 949px){
  .block-goods-detail-j--item
  .block-goods-detail-j--goods-description
  .block-icon img {
    height:2.3vw!important;
    max-height:22px;
  }

  .block-goods-detail-j--item
  .block-icon
  .block-icon--auto-on-sales img {
    /* セール (sale) */
    height:2.3vw!important;
    max-height:22px;
  }
}

@media (max-width: 767px){
 #goods_list_auto_load_area
  .block-goods-detail-j--item
  .block-goods-detail-j--goods-description
  .block-icon{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start!important;
    align-items:center;
    column-gap:2px!important;
    row-gap:1px!important;
  }

  /* span側の余白・伸びを潰す */
  #goods_list_auto_load_area
  .block-goods-detail-j--item
  .block-goods-detail-j--goods-description
  .block-icon > span{
    flex:0 0 auto!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
  }

  .block-goods-detail-j--item
  .block-goods-detail-j--goods-description
  .block-icon img {
    height:3vw!important;
    max-height:60px;
  }

  .block-goods-detail-j--item
  .block-icon
  .block-icon--auto-on-sales img {
    /* セール (sale) */
    height:3vw!important;
    max-height:60px;
  }
}

@media (max-width: 481px){
  .block-goods-detail-j--item
  .block-goods-detail-j--goods-description
  .block-icon img {
    height:5vw!important;
  }

  .block-goods-detail-j--item
  .block-icon
  .block-icon--auto-on-sales img {
    /* セール (sale) */
    height:5vw!important;
  }
}



@media (max-width: 767px){
  #goods_list_auto_load_area
  .block-goods-detail-j--item
  .block-goods-detail-j--goods-description{
    width:95%;
    margin-top: 10px;
  }
}

/* 説明文が長い場合の高さ暴れ防止 */
#goods_list_auto_load_area .block-goods-detail-j--comment1{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}




/* =========================
  [goods] 矢印
========================= */
#goods_list_auto_load_area .slick-prev,
#goods_list_auto_load_area .slick-next{
  width: 44px;
  height: 44px;
  border: 0;
  border: 2px solid #bf292a;   /* ★ 白抜き外枠 */
  border-radius: 999px;
  background: #fff;           /* ★ 白背景 */

  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;

  padding: 0;
  cursor: pointer;
  font-size: 0;
  line-height: 0;
}

#goods_list_auto_load_area .slick-prev{ left: -10px; }
#goods_list_auto_load_area .slick-next{ right: -10px; }

@media (max-width: 767px){
  #goods_list_auto_load_area .slick-prev{ left: -6px; }
  #goods_list_auto_load_area .slick-next{ right: -6px; }
}

/* 矢印アイコン（CSS） */
#goods_list_auto_load_area .slick-prev:before,
#goods_list_auto_load_area .slick-next:before{
  content: "";
}

#goods_list_auto_load_area .slick-prev::after,
#goods_list_auto_load_area .slick-next::after{
  content: "";
  width: 12px;
  height: 12px;
  border-right: 3px solid #bf292a;
  border-bottom: 3px solid #bf292a;
  display: block;
  margin: 0 auto;
}

/* ★ 矢印位置の微調整（Xだけ動かす：縦位置はズレない） */
#goods_list_auto_load_area .slick-prev::after{
  transform: translateX(2px) rotate(135deg);   /* ← 左矢印を少し右へ */
}

#goods_list_auto_load_area .slick-next::after{
  transform: translateX(-2px) rotate(-45deg);  /* → 右矢印を少し左へ */
}


/* =========================
  [goods] disabledでもhover反転させる
========================= */

/* hoverを発生させるために、disabledでもポインターを受ける */
#goods_list_auto_load_area .slick-prev.slick-disabled,
#goods_list_auto_load_area .slick-next.slick-disabled{
  pointer-events: auto !important;
}

/* hover反転（左右共通） */
#goods_list_auto_load_area .slick-prev:hover,
#goods_list_auto_load_area .slick-next:hover{
  background: #bf292a !important;
}

#goods_list_auto_load_area .slick-prev:hover::after,
#goods_list_auto_load_area .slick-next:hover::after{
  border-right-color: #fff !important;
  border-bottom-color: #fff !important;
}




/* =========================
  slick 矢印：カルーセル枠の外へ
========================= */

/* PC */
#goods_list_auto_load_area .slick-prev{
  left: -56px; /* 44px（ボタン）+ 余白 */
}

#goods_list_auto_load_area .slick-next{
  right: -56px;
}

/* SP */
@media (max-width: 767px){
  #goods_list_auto_load_area .slick-prev{
    left: -44px;
  }
  #goods_list_auto_load_area .slick-next{
    right: -44px;
  }
}


/* =========================
  goods：カートボタン中央寄せ（最終確実版）※中央が崩れない土台
========================= */
#goods_list_auto_load_area .block-goods-detail-j--cart-btn{
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}

/* =========================
  goods：カートボタン a（整理＋アイコン追加・確定版）
========================= */
#goods_list_auto_load_area .block-goods-detail-j--cart-btn a{
  display: inline-flex !important;          /* ★ アイコン対応 */
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;                                 /* アイコンと文字の間 */

  width: 100% !important;
  max-width: 100% !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;

  box-sizing: border-box !important;
  border-radius: 8px !important;
  background: #bf292a !important;
  text-align: center !important;
  font-size:14px;
  font-weight:700;
  color: #fff !important;
  transform: translateX(-4px) !important; /* ← 左に少し */
}

/* カートアイコン（左） */
#goods_list_auto_load_area .block-goods-detail-j--cart-btn a::before{
  content: "";
  width: 18px;
  height: 18px;
  display: inline-block;

  background: url("../../img/usr/common/icon_cart_white.png") no-repeat center;
  background-size: contain;
  transform: translateY(-1px); /* ← 少し上へ */
}



/* カルーセルの関連調整 */
.block-goods-detail-j--net-price.net-price {
  display:none;
}

@media (max-width: 767px){
  #goods_list_auto_load_area{
    padding-bottom: 60px; /* 下に置く場合の余白 */
  }

  #goods_list_auto_load_area .slick-prev{
    top: auto;
    bottom: -50px;            /* カルーセル枠の下 */
    left: 10px !important;
    right: auto;
    transform: none;
  }

  /* spの場合は ページネーション位置調整 */
  #goods_list_auto_load_area .slick-next{
    top: auto;
    bottom: -50px;            /* カルーセル枠の下 */
    right: 10px!important;
    left:auto;
    transform: none;
  }
}


/* =========================
  [goods] パネル高さ固定＋購入ボタン下揃え
========================= */
.page-top .block-goods-detail-j--item{
  height: 470px !important;
  display: flex !important;
  flex-direction: column !important;
}


.block-goods-detail-j--goods-name {
  letter-spacing:0.02em;
  min-height: 3em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}





@media (min-width: 768px) and (max-width: 1024px){
  .page-top .block-goods-detail-j--item{
    height: 460px !important;
  }
}


@media (max-width: 767px) and (orientation: landscape){
  .page-top .block-goods-detail-j--item{
    height: 560px !important;
  }
}


@media (max-width: 767px){
  .page-top .block-goods-detail-j--item{
    height: 410px !important;
  }
}


.page-top
.block-goods-detail-j--item
.block-goods-detail-j--goods-description{
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

.page-top .block-goods-detail-j--cart-btn{
  margin-top: auto !important;
}



/* =========================
  slick-dots（ページネーション）デザイン調整
  ・ドット大きく
  ・デフォルト #cccccc
  ・アクティブ #bf292a
========================= */
#goods_list_auto_load_area .slick-dots{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;                 /* ドット間隔 */
  position: absolute;
  bottom: -40px;
}

/* li の余計なサイズ影響を排除 */
#goods_list_auto_load_area .slick-dots li{
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;
}

/* 通常ドット */
#goods_list_auto_load_area .slick-dots li button{
  width: 12px;               /* ★ ドットサイズ */
  height: 12px;
  padding: 0;
  border-radius: 50%;
  background: #cccccc;       /* デフォルト色 */
  border: none;
  text-indent: -9999px;      /* テキスト非表示 */
  cursor: pointer;
}

/* アクティブ */
#goods_list_auto_load_area .slick-dots li.slick-active button{
  background: #bf292a;       /* 選択色 */
}

/* hover / focus の余計な装飾を無効化 */
#goods_list_auto_load_area .slick-dots li button:hover,
#goods_list_auto_load_area .slick-dots li button:focus{
  outline: none;
}



/* =========================
  [goods] カルーセル画像クリック時の枠を無効化
========================= */
#goods_list_auto_load_area a,
#goods_list_auto_load_area img{
  outline: none !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0); /* SPの青ハイライト対策 */
}

#goods_list_auto_load_area a:focus,
#goods_list_auto_load_area a:active,
#goods_list_auto_load_area img:focus,
#goods_list_auto_load_area img:active{
  outline: none !important;
}

/* Firefox 内部フォーカス枠 */
#goods_list_auto_load_area a::-moz-focus-inner{
  border: 0 !important;
}

#goods_list_auto_load_area .block-goods-detail-j--comment {
  display:none;
}


/* カルーセルの項目位置・バランス調整 */

/* 在庫は非表示 */
.block-goods-detail-j--stock{
  display:none!important;
}
/* コメントも非表示 */
.block-goods-detail-j--comment1{
  display:none!important;
}
/* バリエーションも非表示 */
.variation-name{
  display:none!important;
}


/* =========================
  goods：商品情報 表示順・寄せ・太字（最終）
========================= */

/* 親を縦flex（既存指定と重複してもOK） */
#goods_list_auto_load_area .block-goods-detail-j--goods-description{
  display: flex;
  flex-direction: column;
}

/* =========================
  表示順（上 → 下）
========================= */

/* 1. アイコン */
#goods_list_auto_load_area .block-icon{
  order: 1;
}

/* 2. 商品名 */
#goods_list_auto_load_area .block-goods-detail-j--goods-name{
  order: 2;
  font-weight:700;
  margin-bottom:4px;
  color:#333;
}

/* 3. 価格ブロック（中で並び替える） */
#goods_list_auto_load_area .block-goods-detail-j--price-infos{
  order: 3;
}

/* 4. カートボタン */
#goods_list_auto_load_area .block-goods-detail-j--cart-btn{
  order: 4;
}

/* =========================
  価格ブロック内の調整（最終正解）
========================= */

/* price-infos を縦flexに */
#goods_list_auto_load_area .block-goods-detail-j--price-infos{
  display: flex;
  flex-direction: column;
}

/* price-items は中身をそのまま並べる箱に */
#goods_list_auto_load_area .block-goods-detail-j--price-items{
  display: contents;
}

/* =========================
  表示順（上 → 下）
  1. 通常価格
  2. 特別セール
  3. 販売価格
========================= */

/* 通常価格 */
#goods_list_auto_load_area .block-goods-detail-j--default-price{
  order: 1;
  text-align: right;
  font-size: 14px;
}
#goods_list_auto_load_area .block-goods-detail-j--default-price::after{
  font-size:12px;
}

/* 特別セール */
#goods_list_auto_load_area .block-goods-detail-j--scomment{
  order: 2;
  text-align: right;
  font-size: 13px;
}

/* 中身がある場合のみ《 》を付ける */
#goods_list_auto_load_area .block-goods-detail-j--scomment:not(:empty)::before{
  content: "《";
  padding-right: 3px;
}

#goods_list_auto_load_area .block-goods-detail-j--scomment:not(:empty)::after{
  content: "》";
  padding-left: 3px;
}


/* 販売価格 */
#goods_list_auto_load_area .block-goods-detail-j--price{
  order: 3;
  text-align: right;
  font-weight: bold;
  font-size: 16px;
}
#goods_list_auto_load_area .block-goods-detail-j--price::after{
  font-size:13px;
}





/* 商品カテゴリ */
.top_cate {
   padding-top:70px!important;
   padding-bottom:40px;
}




.block-category{
  width: 100%;
  box-sizing: border-box;
}

.block-category__inner{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  box-sizing: border-box;
}

.block-category__list{
  margin: 0;
  padding: 0;
  list-style: none;

  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* ★ center → flex-start */
  gap: 18px;
}


/* PC：4列 */
.block-category__item{
  width: calc((100% - (18px * 3)) / 4);
  box-sizing: border-box;
}

/* リンクパネル */
.block-category__link{
  display: flex;
  align-items: center;
  gap: 5px;
  font-size:16px;
  border: 1px solid #4d4d4d;
  padding: 0;                 /* ★ 画像を枠に密接 */
  text-decoration: none;
  box-sizing: border-box;
}

/* 左：正方形画像 */
.block-category__thumb{
  width: 80px;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;
  overflow: hidden;
  box-sizing: border-box;
}

.block-category__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;             /* 余白防止 */
}

/* 右：タイトル（太字：ゴシック） */
.block-category__ttl{
  padding-left: 12px;         /* ★ テキスト側だけ余白 */
  color: #333;
  font-weight: 700;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  line-height: 1.35;
  letter-spacing:0.02em;
}

/* hover装飾 */
.block-category__link:hover{
  background: #e6f1f2;
  border-color: #73aab7;
  text-decoration: none;
}

.block-category__link:hover{
  background: #e6f1f2;
  text-decoration: none;
}

.block-category__link:hover .block-category__ttl{
  text-decoration: none;
  color:#73aab7;
}


/* Tablet：3列 / max 95% */
@media (min-width: 768px) and (max-width: 1024px){
  .block-category__inner{
    max-width: 95%;
  }
  .block-category__item{
    width: calc((100% - (18px * 2)) / 3);
  }
}

/* SP：2列 / max 90% */
@media (max-width: 767px){
  .top_cate {
	padding-top:50px!important;
	padding-bottom:20px;
  }

  .block-category__inner{
    max-width: 90%;   /* ← 95% → 90% */
  }
  .block-category__list {
    gap:12px;
  }
  .block-category__item{
    width: calc((100% - 12px) / 2);
  }

  .block-category__link{
    padding: 0;
    gap: 5px;
  }

  .block-category__thumb{
    width: 60px;
  }

  .block-category__ttl{
    padding-left: 10px;
  }
}







/* =========================
  バナー
========================= */
.top-banner{
  width:100%;
  padding:50px 0; /* 上下にマージン */
}

.top-banner__link{
  display:block;
  width:100%;
  text-decoration:none;
}

.top-banner__pic{
  display:block;
  width:100%;
}

/* 画像 */
.top-banner img{
  display:block;
  width:100%;
  height:auto;
}

/* PC：max 1000px（中央） */
@media (min-width: 768px){
  .top-banner{
    max-width:1180px;
    margin:40px auto 50px; /* 上下 + 中央 */
  }
}
@media (max-width: 767px){
  .top-banner {
    padding-bottom:50px;
  }
}


/* =========================
  商品を探すブロック
========================= */
.block-searchfinder{
  width:100%;
  box-sizing:border-box;
  background:url("../../img/usr/common/pc/bg_search.png") no-repeat center / cover;
  padding:0 0 60px;
}
@media (max-width: 767px){
  .block-searchfinder{
    background:url("../../img/usr/common/sp/bg_search.png") no-repeat center / cover;
    padding:40px 0;
  }
}

.block-searchfinder__inner{
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding:0 20px;
  box-sizing:border-box;

  display:flex;
  flex-direction:column;
  align-items:center;
}
@media (max-width: 767px){
  .block-searchfinder__inner{
    max-width:none;
    padding:0 14px;
  	padding:20px 0;
  }
}

/* タイトル（明朝：Zen Old Mincho） */
.block-searchfinder__ttl{
  margin:0 0 18px;
  color:#333;
  font-family:
  "Zen Old Mincho",
  "Hiragino Mincho ProN",
  "Yu Mincho",
  "MS PMincho",
   serif;
  font-weight:500;
  font-size:28px;
  line-height:1.25;
}
@media (max-width: 767px){
  .block-searchfinder__ttl{
    font-size:24px;
  }
}

/* ===== 検索フォーム ===== */
.block-searchfinder__formwrap{
  width:350px;
  display:flex;
  justify-content:center;
}

.block-searchfinder__form{
  width:100%;
  max-width:720px;
}

.block-searchfinder__field{
  position:relative;
  width:100%;
  box-sizing:border-box;
  background:#fff;
  border:1px solid #4d4d4d;
}

.block-searchfinder__input{
  width:100%;
  height:52px;
  padding:0 62px 0 16px!important;
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
  background:transparent;
  border-radius:0;
  -webkit-appearance:none;
  appearance:none;

  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size:16px;
  color:#111;
  box-sizing:border-box;
}

/* 入力枠を基準にする */
.block-searchfinder__field{
  position: relative;
}

/* 入力（高さを明示） */
.block-searchfinder__input{
  height: 46px;              /* ★基準になる高さ */
  padding-right: 46px;       /* ★ボタン分 */
  box-sizing: border-box;
}

/* 検索ボタン */
.block-searchfinder__inbtn{
  position: absolute;
  top: 50%;
  right: 6px;
  width: 42px;
  height: 42px;
  transform: translateY(-50%); /* ★縦中央 */
  border: 0;
  padding: 0;
  background:
    url("../../img/usr/common/search_t.png")
    no-repeat center / 18px auto;	/* ボタンサイズ調整 */

  cursor: pointer;
  z-index: 2;
}


/* ===== タグ共通 ===== */
.block-searchfinder__tags{
  width:100%;
  margin-top:40px;
  box-sizing:border-box;
}

.block-searchfinder__tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:8px 20px;
  border:1px solid #73aab7;
  border-radius:999px;
  background:#fff;

  color:#333;
  text-decoration:none !important;

  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-weight:700;
  font-size:14px;
  line-height:1.0;
  white-space:nowrap;
}
@media (min-width: 768px) and (max-width: 1024px){
  .block-searchfinder__tag{
    padding:8px 15px;
  }
}
/* hover */
@media (hover:hover){
  .block-searchfinder__tag:hover{
    background:#e6f1f2;
    border-color:#73aab7;
    text-decoration:none;
  }
}

/* PC：指定の3行配置 */
.block-searchfinder__tags--pc{
  display:block;
}
.block-searchfinder__tagrow{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:0 0 10px;
}
.block-searchfinder__tagrow:last-child{
  margin-bottom:0;
}

/* SP：swiper表示 */
.block-searchfinder__tags--sp{
  display:none;
}
.top_search {
	padding-top:40px!important;
}
@media (max-width: 767px){
  .top_search {
  	padding-top:0!important;
	padding-bottom:10px!important;
  }
  .block-searchfinder__tags--pc{
    display:none;
  }
  .block-searchfinder__tags--sp{
    display:block;
  }

  .block-searchfinder__formwrap{
    width:85%;
  }

  .block-searchfinder__input{
    height: 55px;              /* ★基準になる高さ */
    padding-right: 55px;       /* ★ボタン分 */
  }

  .swiper-searchtag{
    width:100%;
    box-sizing:border-box;
  }

  /* SPで「何も表示されない」を防ぐ：初期化前も表示する */
  .swiper-searchtag{
    opacity:1;
    visibility:visible;
  }

  .swiper-searchtag .swiper-wrapper{
    align-items:center;
  }

  .swiper-searchtag .swiper-slide{
    width:auto !important;
  }

  .swiper-searchtag--row1{
    margin-bottom:10px;
  }

  .block-searchfinder .swiper:not(.swiper-initialized){
    opacity: 1 !important;
    visibility: visible !important;
  }

}






/* =========================
  Instagram ブロック
========================= */
.block-instagram{
  width:100%;
  box-sizing:border-box;

  display:flex;
  justify-content:center;
  align-items:center;

  padding:60px 0; /* 上下余白のみ */
}

.block-instagram__img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
}

/* PC */
.block-instagram__img{
  width: 30px;
  height: auto;
}

/* SP */
@media (max-width: 767px){
  .block-instagram__img{
    width: 40px;
  }
}





/* =========================
  About us イメージブロック
========================= */
.about-image-block{
  width:100%;
  color:#333333; /* ボタン以外の基本テキスト色 */
  margin-bottom:110px;
}

/* 幅100% 画像 */
.about-image img{
  width:100%;
  height:auto;
  display:block;
}

/* 重なりブロック */
.about-text-wrap{
  position:relative;
  margin-top:-60px;
  padding:0 20px;
}

.about-text-inner{
  max-width:1000px;
  width:100%;
  margin:0 auto;
  background:#f1eeeb;
  border:none;
  border-radius:16px;
  padding:70px 30px 50px!important;
  text-align:center;
  box-sizing:border-box;
}

/* About us（小さめ）ゴシック 太字 */
.about-en{
  margin:0 0 12px;
  font-weight:700;
  font-size:14px;
  letter-spacing:0.08em;
  color:#333333;
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
}

/* メインコピー（少し大きめ）明朝 */
.about-main{
  margin:0 0 20px;
  font-size:22px;
  font-weight:600;
  line-height:1.6;
  color:#333333;
  border:none !important;
  font-family:
    "Zen Old Mincho",
    "Hiragino Mincho ProN",
    "Yu Mincho",
    "MS PMincho",
    serif;
  font-weight:700;
}

/* 見出し下の不要な横線（既存CSS対策） */
.about-main::before,
.about-main::after{
  content:none !important;
  display:none !important;
}

/* 説明文（ゴシック） */
.about-desc{
  margin:0;
  font-size:clamp(14px, 1.8vw, 16px)!important;
  line-height:1.9;
  color:#333333;
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
}

/* ボタン */
.about-btn{
  display:flex;
  justify-content:center;
}

/* SP用ボタンは初期非表示（PC表示） */
.about-btn--sp{
  display:none;
}

/* ▼ Aboutブロック内だけ：
   「もっと見る」を出している擬似要素だけ無効化（矢印側は触らない） */
.about-image-block .block-top-topic--next-page a::before{
  content:none !important;
  display:none !important;
}

/* ▼ Aboutブロック内だけ：
   ボタンは既存デザインを維持（文字色は白） */
.about-image-block .block-top-topic--next-page a{
  color:#fff !important;
  font-size:inherit !important;
  text-indent:0 !important;
  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;
  font-size:16px!important;
}

/* PC */
@media (min-width: 768px){
  .about-text-wrap{
    margin-top:-80px;
    padding:0 40px;
  }
  .about-text-inner{
    padding:50px 60px;
  }
  .about-main{
    font-size:26px;
  }
  .about-desc{
    font-size:16px;
  }
  .sp-only{
    display:none;
  }
  .about-btn--sp{
    display:none;
  }
}

/* SP */
@media (max-width: 767px){
  .about-main{
    font-size:18px;
  }
  .about-desc{
    text-align:left;
    font-size:clamp(16px, 1.8vw, 18px)!important;
    line-height:1.8em;
    padding:10px 30px;
  }
  .about-text-inner{
    padding:50px 5px 40px!important;
  }
  .pc-only{
    display:none;
  }
  .sp-only{
    display:inline;
  }

  /* SPのみ：PC用ボタン（枠内）を非表示 */
  .about-btn--pc{
    display:none;
  }

  /* SPのみ：SP用ボタン（枠外）を表示＋枠と同じ幅 */
  .about-btn--sp{
    display:flex;
    justify-content:center;
    max-width:1000px;
    width:100%;
    margin:0 auto 0;
    box-sizing:border-box;
  }
  .about-btn--sp .block-top-topic--next-page{
    width:100%;
  }
  .about-image-block {
    margin-bottom:100px;
  }
  .about-image-block .about-btn--sp .block-top-topic--next-page a{
    width:100% !important;
    max-width:none !important;
  }


  /* もっと見るの上部を詰める（希望 */
  .block-top-event .block-top-topic--next-page {
    margin-top:10px;
  }
  .block-customer .block-top-topic--next-page {
    margin-top:10px;
  }
  
}





/* =========================
  お客様の声
========================= */

.block-customer {
  padding-top:100px;
}

.block-customer__lead{
  margin:14px auto 50px;
  max-width:600px;
  text-align:center;
  font-family:
  "Yu Gothic",
  "Yu Gothic Medium",
  "游ゴシック体",
  "Hiragino Kaku Gothic ProN",
  "Meiryo",
  sans-serif;
  font-size:16px;
  font-weight:400;
  line-height:1.6em;
  color:#333;
}

@media (max-width: 767px){
  .block-customer {
    padding-top:80px;
  }

  .block-customer__lead{
    font-size:16px;
    line-height:1.8em;
  }
}

/* PC：中央だけ下にずらす */
@media (min-width:768px){
  .customer-bubble.is-pattern-2{
    margin-top:40px; /* 下げ量。必要に応じて微調整 */
  }
}

/* =========================
  お客様の声 背景ブロック
========================= */
.block-customer__bg{
  width:100%;
  background:
    url("../../img/usr/common/pc/bg_island1.jpg")
    no-repeat center bottom / 100% auto;
  padding:0 1%;
}

/* SP */
@media (max-width: 767px){
  .block-customer__bg{
    background:
      url("../../img/usr/common/sp/bg_island1.jpg")
      no-repeat center bottom / 100% auto;
    padding:0;
    height:600px;
  }
}

/* =========================
  お客様の声 吹き出し（画像＋文字重ね）
========================= */
.customer-bubbles{
  display:flex;
  gap:2.5%;
  justify-content:center;
  align-items:stretch;
  max-width:1160px;
  margin:0 auto; 
}

.customer-bubble{
  position:relative;
  flex:1 1 calc(100% / 3);
  max-width:calc(1160px / 3);
}

.customer-bubble__pic{
  display:block;
}

.customer-bubble__img{
  width:100%;
  height:auto;
  display:block;
}

/* 文字を画像の上に重ねる */
.customer-bubble__body{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;

  /* 文字位置（要調整） */
  padding:45px 40px;
  box-sizing:border-box;
  text-align:left;

  font-family:
    "Yu Gothic",
    "Yu Gothic Medium",
    "游ゴシック体",
    "Hiragino Kaku Gothic ProN",
    "Meiryo",
    sans-serif;

  color:#333;
}

.customer-bubble__date{
  font-size:14px;
  line-height:1.2;
  font-weight:600;
}

.customer-bubble__text{
  margin-top:25px;
  font-size:clamp(13px, 1.5vw, 16px);
  line-height:1.6em;
  font-weight:600;
  direction: ltr;
}

/* タブレット他 */
@media (min-width: 860px) and (max-width: 1159px){
  .customer-bubble__body{
    padding:10% 10%; /* ここも画像に合わせて後で詰める */
  }
  .customer-bubble__text {
    margin-top:5%;
  }
}
@media (min-width: 768px) and (max-width: 859px){
  .customer-bubble__body{
    padding:10% 10%;
  }
  .customer-bubble__text {
    margin-top:5%;
    line-height:1.4em;
  }
}

/* SP */
@media (max-width: 767px){
  .customer-bubbles{
    flex-direction:column;
    gap:16px;
    align-items:center;
    padding-bottom:40px;
  }

  .customer-bubble{
    width:100%;
    max-width:320px;
    flex:0 0 auto;
  }

  .customer-bubble__body{
    padding:33px 40px; /* ここも画像に合わせて後で詰める */
  }

  .customer-bubble__text{
    margin-top:15px;
    font-size:16px;
    line-height:1.4em;
    font-weight:600;
  }
}

/* SPだけ：slickのチラ見せ（中央1枚＋左右チラ見せ） */
@media (max-width: 767px){
  .customer-bubbles{
    display:block;           /* flex解除（slickが管理） */
    max-width:none;          /* SPは制限不要 */
    margin:0 auto;
  }

  /* チラ見せのため左右を見せる */
  .customer-bubbles .slick-list{
    overflow:visible;
  }

  /* スライド間の余白（チラ見せ時の見え方調整） */
  .customer-bubbles .slick-slide{
    padding:0 8px;
    box-sizing:border-box;
  }

  /* slick中は各バブルの幅固定を解除 */
  .customer-bubble{
    width:auto;
    max-width:none;
    flex:none;
  }
}

/* SP：中央（アクティブ）だけ下にずらす */
@media (max-width: 767px){
  .customer-bubbles .slick-slide{
    transition: transform .25s ease;
  }

  .customer-bubbles .slick-slide.slick-center{
    transform: translateY(35px); /* 下げ量 */
  }
}




/* 頒布会フローティングボタン */
.onoya-floating-banner{
  position:fixed !important;
  right:20px !important;
  bottom:20px !important;
  z-index:999999 !important;
  display:block;
  width:min(180px, 25vw);
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
  transition:
    opacity .5s ease,
    transform .25s ease;
}

.onoya-floating-banner.is-hide{
  opacity:.12;
  transition:
    opacity 2s ease,
    transform .25s ease;
}

.onoya-floating-banner img{
  display:block;
  width:100%;
  height:auto;
  filter:
    drop-shadow(0 0 5px rgba(255,255,255,1))
    drop-shadow(0 0 5px rgba(255,255,255,.95));
}

.onoya-floating-banner img:hover{
  opacity:1 !important;
}

/* hover時だけ少し浮かせる */
.onoya-floating-banner:hover{
  transform:translateY(-4px);
}


.onoya-floating-wrap{
  position:fixed;
  right:10px;
  bottom:10px;
  z-index:999999;
}

.onoya-floating-banner__close{
  position:absolute;
  top:-180px;
  right:-5px;
  z-index:2;

  padding:0;
  border:0;
  background:none;

  color:#333;
  font-size:22px;
  line-height:1;

  cursor:pointer;
}


@media (max-width:767px){
  .onoya-floating-banner{
    right:12px !important;
    bottom:10px !important;
    width:35vw;
    max-width:180px;
  }

  .onoya-floating-banner__close{
    top:-140px;
  }
}