@charset "UTF-8";
/* 追記：25.12.29 */
/* ==============================
   トップカルーセル（中央1枚＋左右チラ見せ）
============================== */

/* 外枠 */
.top-carousel{
  margin: 0 auto var(--margin) auto;
  position: relative;
}

/* 内側余白（上だけ少し） */
.top-carousel-inner{
  padding: 24px 0 0;
}

/* Swiper本体（左右チラ見せ量をここで作る） */
.top-carousel .swiper{
  padding: 0 48px;              /* PC: 左右の見切れ量 */
  box-sizing: border-box;
}

/* wrapper */
.top-carousel .swiper-wrapper{
  align-items: stretch;
}

/* 各スライド（中央1枚の幅を安定させる） */
.top-carousel .swiper-slide{
  width: clamp(320px, 68vw, 680px);  /* ← 中央1枚を作る肝 */
  max-width: none;
  transition: transform .3s ease, opacity .3s ease;
  opacity: 1;                         /* ← 全体は薄くしない */
}

/* もし左右を少し薄くしたい場合は下の3つだけ有効にする */
.top-carousel .swiper-slide{
  opacity: .4;
}
.top-carousel .swiper-slide-active{
  opacity: 1;
}
.top-carousel .swiper-slide-prev,
.top-carousel .swiper-slide-next{
  opacity: .7;
}


/* 中央のスライド（必要なら少し強調） */
.top-carousel .swiper-slide-active{
  transform: none;
}

/* カード本体 */
.top-carousel-card{
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 20px rgba(0,0,0,.08);
}

/* 画像 */
.top-carousel-card img{
  display: block;
  width: 100%;
  height: auto;
}

/* ナビゲーションボタン */
.top-carousel-prev,
.top-carousel-next{
  position: absolute;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
  background: #fff;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.top-carousel-prev::before,
.top-carousel-next::before{
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-top: 2px solid #333;
  border-right: 2px solid #333;
}

.top-carousel-prev{
  left: 8px;
}
.top-carousel-prev::before{
  transform: rotate(-135deg);
}

.top-carousel-next{
  right: 8px;
}
.top-carousel-next::before{
  transform: rotate(45deg);
}

/* ページネーション */
.top-carousel-pagination{
  text-align: center;
  margin-top: 15px;
}

.top-carousel .swiper-pagination-bullet{
  width: 8px;
  height: 8px;
  margin: 0 4px !important;
  background: rgba(0,0,0,.2);
  opacity: 1;
}

.top-carousel .swiper-pagination-bullet-active{
  background: rgba(0,0,0,.7);
}

/* スマホ調整 */
@media (max-width: 767px){
  .top-carousel .swiper{
    padding: 0 18px;                 /* SP: チラ見せ量を減らす */
  }

  .top-carousel .swiper-slide{
    width: clamp(260px, 86vw, 520px); /* SP: 中央1枚を維持 */
  }
}


/* サムネイルカテゴリ：セクション全体 */
.top-categorylist{
  margin: 0 auto var(--margin) auto;
  padding: 0 var(--padding);
}

/* タイトル周り（既存テーマに合わせる想定） */
.top-categorylist .sec-title{
  margin-bottom: 28px;
}

/* 一覧ラッパー */
.top-categorylist__items{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;     /* ★ 個数に関係なく常に中央寄せ */
  align-items: flex-start;
  gap: 28px 40px;              /* 行 / 列の間隔 */
}

/* -----------------------------------------
   各カテゴリアイテム
----------------------------------------- */
.top-categorylist__item{
  flex: 0 0 calc((100% - 40px * 4) / 5);
  /* ↑ PCでは最大5コマ */
  max-width: 220px;
  text-align: center;
  text-decoration: none;
  color: inherit;
}

/* サムネイル枠（少し大きめ） */
.top-categorylist__image{
  width: 180px;
  height: 180px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 画像本体 */
.top-categorylist__image img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* カテゴリ名 */
.top-categorylist__name{
  font-size: 1.4rem;
  line-height: 1.4;
  word-break: break-word;
  font-weight: bold;
}

/* =========================================
   Tablet（～1024px）
   → 最大4コマ
========================================= */
@media screen and (max-width: 1024px){
  .top-categorylist__item{
    flex: 0 0 calc((100% - 32px * 3) / 4);
    max-width: 160px;
  }

  .top-categorylist__image{
    width: 120px;
    height: 120px;
  }
}

/* =========================================
   Mobile（～768px）
   → 3～4コマ / 中央寄せ
========================================= */
@media screen and (max-width: 768px){
  .top-categorylist{
    margin: 48px 0;
  }

  .top-categorylist__items{
    gap: 18px 20px;
    padding: 0 10px;
  }

  .top-categorylist__item{
    flex: 0 0 calc((100% - 20px * 2) / 3);
    max-width: none;
  }

  .top-categorylist__image{
    width: 90px;
    height: 90px;
    margin-bottom: 8px;
  }

  .top-categorylist__name{
    font-size: 1.4rem;
    font-weight: bold;
  }
}

/* =========================================
   Small Mobile（～360px）
   → 3コマ
========================================= */
@media screen and (max-width: 360px){
  .top-categorylist__item{
    flex: 0 0 calc((100% - 16px * 2) / 3);
  }

  .top-categorylist__image{
    width: 76px;
    height: 76px;
  }
}

/* =========================================
   売上ランキング
========================================= */
.salesranking{
  margin: 0 auto var(--margin) auto;
  padding: 0 var(--padding);
}

.salesrankingWrap .sec-title{
  margin-bottom: 28px;
}

.salesranking-note{
  margin-bottom: 20px;
  line-height: 1.6;
  color: #666;
  text-align: left;
}

/* 自動順位（数字入力不要） */
.salesranking__list{
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: salesrank;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 16px;
  row-gap: 26px;
}

.salesranking__item{
  counter-increment: salesrank;
  position: relative;
}

.salesranking__link{
  display: block;
  text-decoration: none;
  color: inherit;
}

.salesranking__thumb{
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(0,0,0,.04);
}

.salesranking__thumb img{
  width: 100%;
  height: auto;
  display: block;
}

/* 左上の順位バッジ */
.salesranking__item::before{
  content: counter(salesrank);
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(0,0,0,.78);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}

.salesranking__meta{
  padding-top: 10px;
  text-align: center;
}

.salesranking__name{
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.4;
}

.salesranking__price{
  margin-top: 4px;
    font-size: 1.4rem;
  opacity: .75;
}

/* もっと見る（初期は6位以降を非表示） */
.salesranking__item.is-more{
  display: none;
}

.salesranking.is-open .salesranking__item.is-more{
  display: block;
}

.salesranking__more{
  margin-top: 18px;
  text-align: center;
}

.salesranking__morebtn{
  appearance: none;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 1.2rem;
}

/* =========================================
   売上ランキング：画像を正方形で中央ぞろえ
========================================= */

/* サムネ枠を正方形に固定（中の画像は中央でトリミング） */
.salesranking__thumb{
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.salesranking__thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* ★中央でトリミングして正方形に揃える */
  object-position: center;
}


/* =========================================
   売上ランキング：順位バッジ 1〜3位の色分け
   4位以降は既存（黒）
========================================= */
/* 王冠本体 */
.salesranking__item::before{
  content: counter(salesrank);
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;

  /* ★スリムに */
  width: 38px;
  height: 32px;

  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 4px;

  font-weight: 800;
  font-size: 13px;
  line-height: 1;

  background: rgba(0,0,0,.78);
  color: #fff;

  /* ★棘を3つ（中央だけ高め） */
  clip-path: polygon(
    0% 48%,
    12% 26%,   /* 左の棘（低め） */
    28% 46%,
    50% 14%,   /* 中央の棘（高め） */
    72% 46%,
    88% 26%,   /* 右の棘（低め） */
    100% 48%,
    100% 100%,
    0% 100%
  );

  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* 縁取り */
.salesranking__item::after{
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;

  width: 38px;
  height: 32px;

  clip-path: polygon(
    0% 48%,
    12% 26%,
    28% 46%,
    50% 14%,
    72% 46%,
    88% 26%,
    100% 48%,
    100% 100%,
    0% 100%
  );

  border: 1px solid rgba(255,255,255,.35);
  border-radius: 6px;
  pointer-events: none;
}

/* 1位：ゴールド */
.salesranking__item:nth-child(1)::before{
  background: #d4af37;
  color: #111;
}
.salesranking__item:nth-child(1)::after{
  border-color: rgba(0,0,0,.18);
}

/* 2位：シルバー */
.salesranking__item:nth-child(2)::before{
  background: #c0c0c0;
  color: #111;
}
.salesranking__item:nth-child(2)::after{
  border-color: rgba(0,0,0,.18);
}

/* 3位：ブロンズ */
.salesranking__item:nth-child(3)::before{
  background: #cd7f32;
  color: #111;
}
.salesranking__item:nth-child(3)::after{
  border-color: rgba(0,0,0,.18);
}

/* SP：2列 or 3列 */
@media screen and (max-width: 1024px){
  .salesranking__list{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (max-width: 768px){
  .salesranking__list{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ================================
   ヘッダー：電話アイコン追加
================================ */
/* 受付時間：PCではホバーで表示、スマホは非表示 */
/*
.header-btn .tel .tel-note{
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 12px;
  line-height: 1;
  border-radius: 999px;
  background: rgba(0,0,0,.78);
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 20;
}

@media (hover:hover){
  .header-btn .tel:hover .tel-note{
    opacity: 1;
    transform: translateY(0);
  }
}
*/

/* =========================================
   TELアイコン
========================================= */

.header-btn .tel{
  position: absolute;
  right:110px;
}

.header-btn .tel a{
  display: block;
  position: relative;
  width: 262px;
}

@media screen and (max-width: 1024px){
  .header-btn .tel {
      position: absolute;
      right: 50px;
  }
  .header-btn .tel img{
      width: 200px;
  }
}

@media screen and (max-width: 768px){
  .header-btn .tel a{
    width: 34px;
    height: 34px;
  }
  .header-btn .tel {
    position: relative;
    margin-right: -10px;
    display: none;
  }
  .tel img {
    display: none;
  }
  /* tel の after を “画像表示” にする */
  .header-btn .tel a:after{
    content: '';
    position: absolute;
    inset: 0;
    mask: none !important;
    -webkit-mask: none !important;
    background-color: transparent !important;

    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M6.62%2010.79a15.05%2015.05%200%200%200%206.59%206.59l2.2-2.2a1%201%200%200%201%201.01-.24%2011.36%2011.36%200%200%200%203.58.57%201%201%200%200%201%201%201v3.5a1%201%200%200%201-1%201A17%2017%200%200%201%203%205a1%201%200%200%201%201-1h3.5a1%201%200%200%201%201%201%2011.36%2011.36%200%200%200%20.57%203.58%201%201%200%200%201-.25%201.01l-2.2%202.2z%22%2F%3E%3C%2Fsvg%3E");

    background-repeat: no-repeat;
    background-position: center;
    background-size: 28px 28px;
    background-position: 50% 10%;
  }
}

/* ===============================
   SP 右下固定 追従バナー
================================ */

.sp-float-banner{
  display: none;          /* PCは非表示 */
}

/* SPだけ表示 */
@media (max-width: 767px){
  .sp-float-banner{
    display: block;
    position: fixed;
    right: 0px;
    bottom: 40px;
    z-index: 9999;

    width: 138px;
    max-width: 24vw;

    overflow: hidden;

    -webkit-tap-highlight-color: transparent;
  }

  .sp-float-banner img{
    display: block;
    width: 100%;
    height: auto;
  }

  /* iPhoneのホームバー対策（対応ブラウザのみ効く） */
  .sp-float-banner{
    bottom: calc(14px + env(safe-area-inset-bottom));
  }
}