/* ==========================================================
   b!olala 限定セット（オープン記念）セクション用スタイル
   ・このセクション（<section class="sec tz-limited">）だけで完結しているので、
     予告LPでも、オープン後の本編LPでも、同じCSS・JS・HTMLをそのまま使えます
   ・使い方：style.css（本編と共通）のあとに、このファイルを読み込む
     （商品カードの .pick-list / .item は style.css のものを使います）
   ・動き（画像のスライド）は limited.js
   ========================================================== */
/* オープン記念の限定商品（style.css の .pick-list / .item を流用。6点なので、PCは3列にする） */
.tz-limited .pick-list {
  grid-template-columns: repeat(3, 1fr);
}
/* リンクなし（販売前）なので、マウスを乗せても動かさない */
.tz-limited .item:hover .item-img {
  transform: none;
}
.tz-badge {
  position: absolute;
  /*top: 10px;
  left: 10px;*/
  z-index: 1;
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--coral);
  color: #fff;
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: .06em;
}
@media screen and (max-width: 767px) {
  .tz-limited .pick-list {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* 限定商品の紹介文（商品名の下に、短い説明と内容を添える） */
.tz-limited .item-name {
  font-size: 15px;
}
.tz-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 5.25em;   /* 3行ぶん。行数がちがう商品も、価格の位置がそろう */
  margin-top: 2px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--sub);
}
.tz-contents {
  margin: 6px 0 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.6;
}
@media screen and (max-width: 767px) {
  .tz-desc {
    -webkit-line-clamp: 4;
    min-height: 7em;
    font-size: 12px;
  }
}
/* ----------------------------------------------------------
   セットの画像スライダー（.fb-slider）
   ・横にスクロールして切り替わる（スワイプ・矢印・ドット。自動では動かない）
   ・動きは teaser.js
   ---------------------------------------------------------- */
.tz-limited .pick-list li:nth-child(6n+1) { --pic: var(--pic1); }
.tz-limited .pick-list li:nth-child(6n+2) { --pic: var(--pic2); }
.tz-limited .pick-list li:nth-child(6n+3) { --pic: var(--pic3); }
.tz-limited .pick-list li:nth-child(6n+4) { --pic: var(--pic4); }
.tz-limited .pick-list li:nth-child(6n+5) { --pic: var(--pic5); }
.tz-limited .pick-list li:nth-child(6n)   { --pic: var(--pic6); }
.fb-slider {
  margin-bottom: 4px;
}
.fb-view {
  position: relative;
}
.fb-track {
  display: flex;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.fb-track::-webkit-scrollbar {
  display: none;
}
.fb-slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative;
  overflow: hidden;
}
/* 画像を入れたとき */
.fb-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 1枚目：外観 */
.fb-cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* 画像が入っても、枠からはみ出さない */
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  background: var(--pic);
  text-align: center;
  font-family: "Shippori Mincho", serif;
  font-size: 22px;
  color: rgba(0, 0, 0, .55);
}
.fb-cover small {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}
/* 2枚目：中身の写真（2×2） */
.fb-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* 2列とも同じ幅に固定（画像の大きさで広がらない） */
  grid-template-rows: repeat(2, minmax(0, 1fr));      /* 2段とも同じ高さに固定 */
  gap: 8px;
  padding: 12px;
  background: #fff;
}
/* 商品画像：縦横どんな比率でも、枠（マス目）の中に全体を収める。商品が切れないよう contain */
.fb-photos img {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  border-radius: 10px;
  background: #fff;
  object-fit: contain;
  object-position: center;
}
.fb-photos span {
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--bg);
  font-size: 12px;
  color: var(--sub);
  text-align: center;
}
.tz-badge {
  pointer-events: none;
}
.fb-view .tz-badge {
  z-index: 2;
}
/* 左右の矢印 */
.fb-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-top: -17px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 2px 8px rgba(35, 51, 44, .22);
  color: #23332c;
  transition: opacity .2s;
}
.fb-arrow::before {
  content: "";
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 2px 2px 0 0;
}
.fb-prev {
  left: 8px;
}
.fb-prev::before {
  margin-left: 3px;
  transform: rotate(-135deg);
}
.fb-next {
  right: 8px;
}
.fb-next::before {
  margin-right: 3px;
  transform: rotate(45deg);
}
/* 端まで来たら、薄くして押せなくする */
.fb-arrow:disabled {
  opacity: .3;
  cursor: default;
}
/* ドット */
.fb-dots {
  display: flex;
  justify-content: center;
  margin-top: 2px;
}
.fb-dots button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
}
.fb-dots button::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  transition: background .2s, transform .2s;
}
.fb-dots button.on::before {
  background: var(--green);
  transform: scale(1.25);
}
@media screen and (max-width: 767px) {
  .fb-arrow {
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }
  .fb-photos {
    gap: 6px;
    padding: 8px;
  }
  .fb-cover {
    font-size: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fb-track {
    scroll-behavior: auto;
  }
}
/* ----------------------------------------------------------
   限定セットのセクションを、深緑の背景にする（#1f4d3f）
   ・背景が暗くなるので、文字・ドット・価格まわりの色を明るい色に切り替える
   ---------------------------------------------------------- */
.tz-limited {
  background: #000;
  color: #fff;
}
.tz-limited .label {
  color: rgba(255, 255, 255, .88);
}
.tz-limited .sec-sub {
  color: #cfe0d6;
}
/* 限定セットのカード（白い台紙）
   ・背景が深緑でも白いカードの上では、文字は暗い色に戻す。ダークモードでも白いカードのままなので、色は変数（--ink など）ではなく、直接指定している */
.tz-limited .item {
  padding: 12px 12px 14px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16);
  color: #23332c;
}
.tz-limited .fb-track {
  border-radius: 10px;
}
.tz-limited .item-tax,
.tz-limited .item-price small,
.tz-limited .tz-desc {
  color: #667269;
}
.tz-limited .tz-contents {
  border-top-color: #d6cfc0;
  color: #23332c;
}
.tz-limited .fb-dots button::before {
  background: #d6cfc0;
}
.tz-limited .fb-dots button.on::before {
  background: #1f4d3f;
}
.tz-limited .pick-list {
  gap: 24px 20px;
}
/* 税込価格とボタンの間を空ける */
.tz-limited .item-tax {
  margin-bottom: 10px;
}
/* ボタン（「セットの詳細を見る」）：リンクは、このボタンだけ。
   総合サイト側のCSS（a など）に上書きされないよう、主な指定には !important を付けている
   マウスを乗せる（キーボードで選ぶ・押している）と、色が反転する */
.tz-btn {
  display: block !important;
  margin-top: auto !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  background: #1f4d3f !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  text-decoration: none !important;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
  pointer-events: none;
}
.tz-btn,
.tz-btn:visited {
  color: #fff !important;
}
.tz-btn:hover,
.tz-btn:focus-visible,
.tz-btn:active {
  background: #fff !important;
  box-shadow: inset 0 0 0 1px #1f4d3f;
  color: #1f4d3f !important;
}
/* スマホ：カードが縦に長くならないよう、余白・文字・紹介文の行数を絞る */
@media screen and (max-width: 767px) {
  .tz-limited .item {
    gap: 2px;
    padding: 8px 8px 10px;
  }
  .tz-limited .pick-list {
    gap: 14px 10px;
  }
  .tz-limited .item-name {
    min-height: 0;
    font-size: 13px;
  }
  .tz-limited .tz-desc {
    -webkit-line-clamp: 2;   /* 紹介文は2行まで */
    min-height: 3.2em;
    font-size: 12px;
    line-height: 1.6;
  }
  .tz-limited .tz-contents {
    margin: 4px 0 2px;
    padding-top: 6px;
    font-size: 11px;
  }
  .tz-limited .item-tax {
    margin-bottom: 8px;
  }
  .tz-btn {
    padding: 8px 6px !important;
    font-size: 12px !important;
  }
}
/* 画像が1枚だけのとき：矢印とドットは出さない */
.fb-single .fb-arrow,
.fb-single .fb-dots {
  display: none;
}
/* ----------------------------------------------------------
   限定セットのカード：文字まわりのまとまり（.tz-body）と、スマホの横長レイアウト
   ・PC：これまでどおり、画像の下に文字が縦に並ぶ（見た目は変わらない）
   ・スマホ：1列にして、画像を左、文字を右に並べる
   ---------------------------------------------------------- */
.tz-limited .tz-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
@media screen and (max-width: 767px) {
  .tz-limited .pick-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .tz-limited .item {
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    padding: 10px;
  }
  /* 左：画像（スライダー） */
  .tz-limited .fb-slider {
    flex: 0 0 44%;
    min-width: 0;
    margin: auto;
    align-self: flex-start;
  }
  .tz-limited .fb-arrow {
    width: 26px;
    height: 26px;
    margin-top: -13px;
  }
  .tz-limited .fb-prev {
    left: 4px;
  }
  .tz-limited .fb-next {
    right: 4px;
  }
  .tz-limited .tz-badge {
    top: -28px;
    left: 6px;
    padding: 1px 8px;
    font-size: 12px;
  }
  /* 右：文字（紹介文は3行まで。空き行ができないよう、最低の高さはなし） */
  .tz-limited .tz-body {
    gap: 2px;
  }
  .tz-limited .tz-desc {
    -webkit-line-clamp: 3;
    min-height: 0;
  }
  .tz-limited .item-name {
    font-size: 14px;
  }
  .tz-limited .tz-contents {
    margin: 4px 0 2px;
  }
  .tz-limited .tz-btn {
    margin-top: auto !important;
  }
}
/* ----------------------------------------------------------
   セット価格：目立つ色（コーラル系の濃い色）と、大きな文字
   ・総合サイト側のCSSに上書きされないよう、色と大きさには !important を付けている
   ---------------------------------------------------------- */
.tz-limited .item-price {
  font-size: 24px !important;
  font-weight: 700;
  line-height: 1.3;
  color: #c0553f !important;
}
.tz-limited .item-price small {
  font-size: 12px !important;
}
@media screen and (max-width: 767px) {
  .tz-limited .item-price {
    font-size: 22px !important;
  }
  /* 右側の幅がせまいので、「セット価格」のラベルは、価格の上の行に出す */
  .tz-limited .item-price small {
    display: block;
    margin: 0 0 -2px;
  }
}