/* ========================================
  オイモール システム画面 共通可読性補正CSS
  対象：カート・ログイン・お客様情報入力・ご注文手続き等
  目的：文字が小さい/薄い/細い問題を全体補正
  ※文字色は各ページCSS・Futureshop標準・共通ヘッダー/フッター側に任せる
======================================== */
:where(a:visited) {
  color: inherit;
}
/* =========================
   対象ページの基本文字設定
   ※文字色は指定しない
========================= */

body.fs-body-cart,
body.fs-body-cart-login,
body.fs-body-customerDetails,
body.fs-body-checkout,
body.fs-body-checkout-login,
body.fs-body-myPage,
body.fs-body-register,
body.fs-body-login {
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0.03em;
  -webkit-text-size-adjust: 100%;
}


/* =========================
   薄すぎる補足文字・説明文を底上げ
   ※文字色は指定しない
========================= */

body.fs-body-cart small,
body.fs-body-cart .fs-c-smallText,
body.fs-body-cart .fs-c-note,
body.fs-body-cart .fs-c-explain,
body.fs-body-cart-login small,
body.fs-body-cart-login .fs-c-smallText,
body.fs-body-cart-login .fs-c-note,
body.fs-body-cart-login .fs-c-explain,
body.fs-body-customerDetails small,
body.fs-body-customerDetails .fs-c-smallText,
body.fs-body-customerDetails .fs-c-note,
body.fs-body-customerDetails .fs-c-explain,
body.fs-body-checkout small,
body.fs-body-checkout .fs-c-smallText,
body.fs-body-checkout .fs-c-note,
body.fs-body-checkout .fs-c-explain,
body.fs-body-checkout .fs-c-checkout-shippingDetail__deliveryDateInfo,
body.fs-body-checkout .fs-c-checkout-paymentMethod__body,
body.fs-body-checkout .fs-c-checkout-checkoutMethod__body,
body.fs-body-checkout .fs-c-checkout-shippingOptionPreview__note {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.75;
}


/* =========================
   見出し・ラベル系
   ※文字色は指定しない
========================= */

body.fs-body-cart .fs-c-heading,
body.fs-body-cart-login .fs-c-heading,
body.fs-body-customerDetails .fs-c-heading,
body.fs-body-checkout .fs-c-heading,
body.fs-body-checkout-login .fs-c-heading,
body.fs-body-myPage .fs-c-heading,
body.fs-body-register .fs-c-heading,
body.fs-body-login .fs-c-heading {
  font-weight: 700;
}

body.fs-body-cart label,
body.fs-body-cart-login label,
body.fs-body-customerDetails label,
body.fs-body-checkout label,
body.fs-body-checkout-login label,
body.fs-body-myPage label,
body.fs-body-register label,
body.fs-body-login label {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}


/* =========================
   テーブル文字の底上げ
   ※文字色は指定しない
========================= */

body.fs-body-cart table,
body.fs-body-cart th,
body.fs-body-cart td,
body.fs-body-customerDetails table,
body.fs-body-customerDetails th,
body.fs-body-customerDetails td,
body.fs-body-checkout table,
body.fs-body-checkout th,
body.fs-body-checkout td {
  font-size: 14px;
  line-height: 1.65;
}

body.fs-body-cart th,
body.fs-body-customerDetails th,
body.fs-body-checkout th {
  font-weight: 700;
}


/* =========================
   商品名・価格まわり
   ※文字色は指定しない
========================= */

body.fs-body-cart .fs-c-productName,
body.fs-body-cart .fs-c-cartTable__productName,
body.fs-body-cart .fs-c-cartTable__productName a,
body.fs-body-checkout .fs-c-productName,
body.fs-body-checkout .fs-c-cartTable__productName,
body.fs-body-checkout .fs-c-cartTable__productName a,
body.fs-body-checkout .fs-c-checkout-shippingParcel__productName {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.65;
  text-decoration: none;
}

body.fs-body-cart .fs-c-price,
body.fs-body-cart .fs-c-price__value,
body.fs-body-checkout .fs-c-price,
body.fs-body-checkout .fs-c-price__value {
  font-weight: 700;
}


/* =========================
   フォーム入力欄
   ※文字色は指定しない
========================= */

body.fs-body-cart input,
body.fs-body-cart select,
body.fs-body-cart textarea,
body.fs-body-cart-login input,
body.fs-body-cart-login select,
body.fs-body-cart-login textarea,
body.fs-body-customerDetails input,
body.fs-body-customerDetails select,
body.fs-body-customerDetails textarea,
body.fs-body-checkout input,
body.fs-body-checkout select,
body.fs-body-checkout textarea,
body.fs-body-checkout-login input,
body.fs-body-checkout-login select,
body.fs-body-checkout-login textarea,
body.fs-body-myPage input,
body.fs-body-myPage select,
body.fs-body-myPage textarea,
body.fs-body-register input,
body.fs-body-register select,
body.fs-body-register textarea,
body.fs-body-login input,
body.fs-body-login select,
body.fs-body-login textarea {
  font-size: 14px;
  font-weight: 500;
}


/* =========================
   薄グレー背景をやや白寄せ
   ※背景と線だけ。文字色は指定しない
========================= */

body.fs-body-cart .fs-c-panel,
body.fs-body-cart .fs-c-box,
body.fs-body-customerDetails .fs-c-panel,
body.fs-body-customerDetails .fs-c-box,
body.fs-body-checkout .fs-c-panel,
body.fs-body-checkout .fs-c-box,
body.fs-body-checkout .fs-c-checkout-confirmationContent,
body.fs-body-checkout .fs-c-checkout-previewAndEdit__info {
  background-color: #ffffff;
  border-color: #e4d8cb;
}


/* =========================
   境界線の視認性を少し上げる
   ※文字色は指定しない
========================= */

body.fs-body-cart table,
body.fs-body-cart th,
body.fs-body-cart td,
body.fs-body-customerDetails table,
body.fs-body-customerDetails th,
body.fs-body-customerDetails td,
body.fs-body-checkout table,
body.fs-body-checkout th,
body.fs-body-checkout td,
body.fs-body-cart .fs-c-panel,
body.fs-body-customerDetails .fs-c-panel,
body.fs-body-checkout .fs-c-panel {
  border-color: #e4d8cb;
}


/* =========================
   SP共通：さらに可読性を底上げ
   ※文字色は指定しない
========================= */

@media screen and (max-width: 767px) {
  body.fs-body-cart,
  body.fs-body-cart-login,
  body.fs-body-customerDetails,
  body.fs-body-checkout,
  body.fs-body-checkout-login,
  body.fs-body-myPage,
  body.fs-body-register,
  body.fs-body-login {
    font-size: 14px;
    line-height: 1.75;
  }

  body.fs-body-cart table,
  body.fs-body-cart th,
  body.fs-body-cart td,
  body.fs-body-customerDetails table,
  body.fs-body-customerDetails th,
  body.fs-body-customerDetails td,
  body.fs-body-checkout table,
  body.fs-body-checkout th,
  body.fs-body-checkout td {
    font-size: 13px;
  }

  body.fs-body-cart .fs-c-productName,
  body.fs-body-cart .fs-c-cartTable__productName,
  body.fs-body-cart .fs-c-cartTable__productName a,
  body.fs-body-checkout .fs-c-productName,
  body.fs-body-checkout .fs-c-cartTable__productName,
  body.fs-body-checkout .fs-c-cartTable__productName a,
  body.fs-body-checkout .fs-c-checkout-shippingParcel__productName {
    font-size: 14px;
    line-height: 1.65;
  }

  body.fs-body-cart small,
  body.fs-body-cart .fs-c-smallText,
  body.fs-body-cart .fs-c-note,
  body.fs-body-cart .fs-c-explain,
  body.fs-body-customerDetails small,
  body.fs-body-customerDetails .fs-c-smallText,
  body.fs-body-customerDetails .fs-c-note,
  body.fs-body-customerDetails .fs-c-explain,
  body.fs-body-checkout small,
  body.fs-body-checkout .fs-c-smallText,
  body.fs-body-checkout .fs-c-note,
  body.fs-body-checkout .fs-c-explain {
    font-size: 12px;
    line-height: 1.7;
  }
}

/* ========================================
  おすすめ商品・お気に入り商品カルーセル調整
  対象：
  ・Futureshop おすすめ商品パーツ
  ・Futureshop お気に入り商品パーツ
======================================== */

/* おすすめ商品・お気に入り商品エリア全体 */
.fs-c-featuredProduct,
.fs-c-wishlistProduct {
  max-width: 1280px;
  margin: 56px auto 0;
  padding: 0 24px 16px;
  box-sizing: border-box;
}

/* タイトル周り */
.fs-c-featuredProduct__header,
.fs-c-wishlistProduct__header {
  margin: 100px 0 40px;
  padding: 0;
  border: none !important;
  text-align: center;
}

.fs-c-featuredProduct__title,
.fs-c-wishlistProduct__title {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 0 0 14px;
  border: none !important;
  color: #371806;
  font-family:
    "Shippori Mincho",
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.08em;
}

/* 既存の下線を消す */
.fs-c-featuredProduct__title::before,
.fs-c-wishlistProduct__title::before {
  content: none !important;
}

/* オレンジの短い飾り線 */
.fs-c-featuredProduct__title::after,
.fs-c-wishlistProduct__title::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: #ea6b13;
}

/* カルーセル全体 */
.fs-c-featuredProduct__list,
.fs-c-wishlistProduct__list {
  position: relative;
  margin: 0;
  box-sizing: border-box;
}

/* Slick側のはみ出し・余白調整 */
.fs-c-featuredProduct .fs-c-productListCarousel__list,
.fs-c-wishlistProduct .fs-c-productListCarousel__list {
  overflow: hidden;
}

.fs-c-featuredProduct .fs-c-productListCarousel__list__itemTrack,
.fs-c-wishlistProduct .fs-c-productListCarousel__list__itemTrack {
  display: flex !important;
  align-items: stretch;
  gap: 32px !important;
  column-gap: 32px !important;
}

/* カード幅 */
.fs-c-featuredProduct .fs-c-productListCarousel__list__item,
.fs-c-wishlistProduct .fs-c-productListCarousel__list__item {
  flex: 0 0 286px !important;
  width: 286px !important;
  min-width: 286px !important;
  box-sizing: border-box;
}

/* カードを大きく・ゆったり */
.fs-c-productListCarousel__list__item.fs-c-productListItem {
  padding: 16px 16px 20px !important;
  border-radius: 28px;
  box-shadow: 0 10px 24px rgba(55, 24, 6, 0.07);
}

/* 画像 */
.fs-c-featuredProduct .fs-c-productListItem__imageContainer,
.fs-c-wishlistProduct .fs-c-productListItem__imageContainer {
  margin-bottom: 16px;
}

.fs-c-featuredProduct .fs-c-productListItem__image a,
.fs-c-wishlistProduct .fs-c-productListItem__image a {
  border-radius: 22px;
}

/* 商品名 */
.fs-c-featuredProduct .fs-c-productListItem__productName,
.fs-c-wishlistProduct .fs-c-productListItem__productName {
  min-height: 82px;
  margin: 0 6px 14px !important;
  font-size: 17px;
  line-height: 1.62 !important;
  letter-spacing: 0.08em;
}

/* マーク */
.fs-c-featuredProduct .fs-c-productMarks,
.fs-c-wishlistProduct .fs-c-productMarks {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 6px 10px;
}

.fs-c-featuredProduct .fs-c-mark,
.fs-c-wishlistProduct .fs-c-mark {
  margin: 0 !important;
  border-radius: 5px;
}

.fs-c-featuredProduct .fs-c-mark__label,
.fs-c-wishlistProduct .fs-c-mark__label {
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

/* 予約メッセージ */
.fs-c-featuredProduct .fs-c-preorderMessage,
.fs-c-wishlistProduct .fs-c-preorderMessage {
  margin: 0 6px 14px !important;
}

/* 価格 */
.fs-c-featuredProduct .fs-c-productListItem__prices,
.fs-c-wishlistProduct .fs-c-productListItem__prices {
  margin: 0 6px 14px !important;
}

.fs-c-featuredProduct .fs-c-price__value,
.fs-c-wishlistProduct .fs-c-price__value {
  font-size: 24px;
}

/* 詳細を見るボタン */
.fs-c-featuredProduct .fs-c-productListItem__control,
.fs-c-wishlistProduct .fs-c-productListItem__control {
  margin: auto 6px 0 !important;
}

.fs-c-featuredProduct .fs-c-button--viewProductDetail,
.fs-c-wishlistProduct .fs-c-button--viewProductDetail {
  min-height: 44px;
  border-radius: 8px;
}

/* 左右矢印 */
.fs-c-productListCarousel__ctrl {
  width: 34px;
  height: 34px;
}

.fs-c-button--carousel {
  width: 34px;
  height: 34px;
  border: 1px solid #eadfce;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 6px 14px rgba(55, 24, 6, 0.08);
}

.fs-c-button--carousel::before {
  color: #6b4a32;
}

/* ========================================
  SP調整
======================================== */

@media screen and (max-width: 767px) {
  .fs-c-featuredProduct,
  .fs-c-wishlistProduct {
    margin-top: 42px;
    padding: 0 12px 12px;
  }

  .fs-c-featuredProduct__header,
  .fs-c-wishlistProduct__header {
    margin-bottom: 22px;
  }

  .fs-c-featuredProduct__title,
  .fs-c-wishlistProduct__title {
    font-size: 24px;
  }

  .fs-c-featuredProduct .fs-c-productListCarousel__list__itemTrack,
  .fs-c-wishlistProduct .fs-c-productListCarousel__list__itemTrack {
    gap: 20px !important;
    column-gap: 20px !important;
  }

  .fs-c-featuredProduct .fs-c-productListCarousel__list__item,
  .fs-c-wishlistProduct .fs-c-productListCarousel__list__item {
    flex-basis: 230px !important;
    width: 230px !important;
    min-width: 230px !important;
  }

  .fs-c-productListCarousel__list__item.fs-c-productListItem {
    padding: 12px 12px 16px !important;
    border-radius: 22px;
  }

  .fs-c-featuredProduct .fs-c-productListItem__image a,
  .fs-c-wishlistProduct .fs-c-productListItem__image a {
    border-radius: 16px;
  }

  .fs-c-featuredProduct .fs-c-productListItem__productName,
  .fs-c-wishlistProduct .fs-c-productListItem__productName {
    min-height: 68px;
    margin: 0 4px 12px !important;
    font-size: 14px;
    line-height: 1.55 !important;
  }

  .fs-c-featuredProduct .fs-c-price__value,
  .fs-c-wishlistProduct .fs-c-price__value {
    font-size: 20px;
  }

  .fs-c-featuredProduct .fs-c-button--viewProductDetail,
  .fs-c-wishlistProduct .fs-c-button--viewProductDetail {
    min-height: 40px;
  }
}

/* ========================================
  商品一覧・商品カードの基本色
======================================== */

.fs-c-productList,
.fs-c-productListItem,
.fs-c-featuredProduct,
.fs-c-rankingProduct,
.fs-c-recommendProduct {
  color: #5A3D2B;
  font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
}

/* ========================================
  商品一覧グリッド
  ※カテゴリ一覧・自動出力リストを4列化
======================================== */

.fs-c-productList__list {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* ========================================
  本体
======================================== */

.fs-c-productList__list__item.fs-c-productListItem,
.fs-c-productListItem {
  position: relative;
  width: auto !important;
  background: #fff;
  border: 1px solid #F2E8D9;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}

.fs-c-productListItem:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(90, 61, 43, .10);
}

/* formがある商品カードは高さを揃える */
.fs-c-productListItem > form {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

/* formがない自動出力カードにも最低限効かせる */
.fs-c-productListItem {
  display: flex;
  flex-direction: column;
}

/* ========================================
  商品画像
======================================== */

.fs-c-productListItem__imageContainer {
  margin: 0 0 14px;
}

.fs-c-productListItem__image {
  margin: 0;
}

.fs-c-productListItem__image a,
.fs-c-productListItem__imageContainer a,
.fs-c-productImage a {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 22px;
  background: #fafafa;
  text-decoration: none !important;
}

.fs-c-productListItem__image__image,
.fs-c-productImage__image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform .7s cubic-bezier(0.16, 1, 0.3, 1);
}

.fs-c-productListItem:hover .fs-c-productListItem__image__image,
.fs-c-productListItem:hover .fs-c-productImage__image {
  transform: scale(1.04);
}

/* 「他の画像を見る」はカード内では非表示 */
.fs-c-productListItem__viewMoreImageButton {
  display: none !important;
}

/* ========================================
  商品名
======================================== */

.fs-c-productListItem__productName,
.fs-c-productName {
  margin: 0 6px 12px !important;
  padding: 0 !important;
  border: none !important;
  color: #5A3D2B;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.68 !important;
  letter-spacing: .1em;
}

.fs-c-productListItem__productName a,
.fs-c-productName a {
  color: #5A3D2B !important;
  text-decoration: none !important;
}

.fs-c-productListItem .fs-c-productName__name,
.fs-c-productList__list span.fs-c-productName__name {
  line-height: 1.68 !important;
  letter-spacing: .1em !important;
}

.fs-c-productListItem:hover .fs-c-productName__name,
.fs-c-productListItem:hover .fs-c-productName a {
  color: #E86A17 !important;
}

/* ========================================
  価格
======================================== */

.fs-c-productListItem__prices {
  margin: 0 6px 10px !important;
  padding: 0 !important;
}

.fs-c-productPrice {
  margin: 0 !important;
  padding: 0 !important;
}

.fs-c-productPrice__main {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: #5A3D2B;
  line-height: 1.2;
}

.fs-c-productPrice__main__label {
  display: none !important;
}

.fs-c-price__currencyMark {
  color: #5A3D2B;
  font-size: 15px;
  font-weight: 800;
}

.fs-c-price__value {
  color: #5A3D2B;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .02em;
}

.fs-c-productPrice__main__addon,
.fs-c-productPrice__addon {
  color: rgba(90, 61, 43, .62);
  font-size: 9px;
  font-weight: 700;
}

.fs-c-productPrice__main__joint {
  margin-left: 3px;
  color: rgba(90, 61, 43, .65);
  font-size: 14px;
  font-weight: 800;
}

/* ========================================
  レビュー表示
======================================== */

.productRating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0 6px 12px;
  color: #C68B2F;
  font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}

.productRating.ratingcount-0 {
  display: none !important;
}

.productRating .fs-c-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1;
}

.productRating .fs-c-rating__stars,
.productRating .fs-c-reviewStars {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  color: #C68B2F;
  font-size: 13px;
}

.productRating .fs-c-rating__value {
  color: #9B6A2E;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.productRating a {
  color: #9B6A2E !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 700;
}

/* ========================================
  予約コメント・在庫切れ
======================================== */

.fs-c-preorderMessage,
.fs-c-productListItem__outOfStock,
.fs-c-productStock {
  margin: 0 6px 12px !important;
  padding: 7px 10px;
  border-radius: 10px;
  background: #FFF6E0;
  color: #E86A17;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
}

/* ========================================
  ボタンエリア
======================================== */

.fs-c-productListItem__control {
  display: grid !important;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: auto 6px 0 !important;
  padding: 0 !important;
}

/* 詳細を見る・カートに入れる */
.fs-c-button--viewProductDetail,
.fs-c-button--addToCart--list {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-height: 42px;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: none !important;
  border-radius: 999px;
  background: #5A3D2B !important;
  color: #fff !important;
  text-align: center;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color .2s ease, opacity .2s ease;
}

.fs-c-button--viewProductDetail:hover,
.fs-c-button--addToCart--list:hover {
  background: #E86A17 !important;
  opacity: .9;
}

.fs-c-button--viewProductDetail .fs-c-button__label,
.fs-c-button--addToCart--list .fs-c-button__label {
  color: #fff !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .04em;
}

/* ボタン内アイコン補正 */
.fs-c-button--viewProductDetail::before,
.fs-c-button--addToCart--list::before,
.fs-c-button--viewProductDetail .fs-c-button__icon,
.fs-c-button--addToCart--list .fs-c-button__icon {
  margin-right: 5px;
  font-size: 12px;
  line-height: 1;
}

/* お気に入りボタンはカード内では非表示 */
.fs-c-button--addToWishList--icon {
  display: none !important;
}

/* ========================================
  ランキング順位表示がある場合
======================================== */

.fs-c-rankingProduct__rank,
.fs-c-productListItem__rank {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 9px;
  border-radius: 999px;
  background: #E86A17;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(90, 61, 43, .18);
}

/* ========================================
  タブレット
======================================== */

@media screen and (max-width: 1024px) {
  .fs-c-productList__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ========================================
  SP
======================================== */

@media screen and (max-width: 768px) {
  .fs-c-productList {
    width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
  }

  .fs-c-productList__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .fs-c-productList__list__item.fs-c-productListItem,
  .fs-c-productListItem {
    padding: 9px 9px 12px !important;
    border-radius: 22px;
  }

  .fs-c-productListItem__image a,
  .fs-c-productListItem__imageContainer a,
  .fs-c-productImage a {
    border-radius: 16px;
  }

  .fs-c-productListItem__productName,
  .fs-c-productName {
    margin: 0 4px 10px !important;
    font-size: 13px;
    line-height: 1.6 !important;
    letter-spacing: .08em;
  }

  .fs-c-productListItem .fs-c-productName__name,
  .fs-c-productList__list span.fs-c-productName__name {
    line-height: 1.6 !important;
    letter-spacing: .08em !important;
  }

  .fs-c-price__currencyMark {
    font-size: 13px;
  }

  .fs-c-price__value {
    font-size: 18px;
  }

  .fs-c-productListItem__prices {
    margin: 0 4px 9px !important;
  }

  .productRating {
    margin: 0 4px 10px;
    gap: 3px;
    font-size: 12px;
  }

  .productRating .fs-c-rating__stars,
  .productRating .fs-c-reviewStars {
    font-size: 12px;
  }

  .productRating .fs-c-rating__value,
  .productRating a {
    font-size: 11px;
  }

  .fs-c-productListItem__control {
    margin: auto 4px 0 !important;
  }

  .fs-c-button--viewProductDetail,
  .fs-c-button--addToCart--list {
    min-height: 38px;
    padding: 8px 10px !important;
  }

  .fs-c-button--viewProductDetail .fs-c-button__label,
  .fs-c-button--addToCart--list .fs-c-button__label {
    font-size: 11px;
  }

  .fs-c-rankingProduct__rank,
  .fs-c-productListItem__rank {
    top: 9px;
    left: 9px;
    min-width: 30px;
    height: 30px;
    font-size: 11px;
  }
}

/* ========================================
  極小SP
======================================== */

@media screen and (max-width: 374px) {
  .fs-c-productList__list {
    gap: 10px;
  }

  .fs-c-productList__list__item.fs-c-productListItem,
  .fs-c-productListItem {
    padding: 7px 7px 10px !important;
  }

  .fs-c-productListItem__productName,
  .fs-c-productName {
    font-size: 12px;
  }

  .fs-c-price__value {
    font-size: 17px;
  }
}

/* ========================================
  ベース設定・アニメーション
======================================== */
body {
  /*background-color: #FFFDF7;*/
  color: #5A3D2B;
  font-feature-settings: "palt";
  -webkit-tap-highlight-color: transparent;
}
.snap-carousel {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
}
.snap-item {
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
.hide-scroll::-webkit-scrollbar {
  display: none;
}
.hide-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
  メニュー制御
======================================== */
#menu-container {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  pointer-events: none;
  transition: visibility 0s 0.3s;
}
#menu-backdrop {
  opacity: 0;
  transition: opacity 0.3s ease;
  background-color: rgba(90, 61, 43, 0.4);
}
#menu-panel {
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
body.menu-open #menu-container {
  pointer-events: auto;
  visibility: visible;
  transition: visibility 0s 0s;
}
body.menu-open #menu-backdrop {
  opacity: 1;
}
body.menu-open #menu-panel {
  transform: translateX(0);
}

/* ========================================
  コマースクリエイター レイアウト上書き設定
======================================== */
/* 既存のレイアウト構造を強制的に無視する設定 */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important; /* 100vwから100%に変更 */
  overflow-x: hidden;
}

/* ページの大枠を強制的に画面幅に広げる */
.fs-l-page,
#all {
  display: block !important;
  width: 100% !important; /* 100vwから100%に変更 */
  max-width: 100% !important; /* 100vwから100%に変更 */
  margin: 0 !important;
  padding: 0 !important;
}

/* 自由パーツの容器の制限を外す */
.fs-c-freePartsContainer {
  width: 100% !important; /* 100vwから100%に変更 */
  max-width: 100% !important; /* 100vwから100%に変更 */
  margin: 0 !important;
  padding: 0 !important;
}

/* ========================================
  カート・商品ラベル関連
======================================== */

/* カート件数の位置合わせ */
.fs-client-cart-count {
  position: absolute !important;
  top: 1px !important;
  right: 50% !important;
  margin-right: -15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fs-c-sortItems__list__item.is-active {
    background: none !important;
}

/* 中身が完全に空の時は非表示にする */
.fs-client-cart-count:empty {
  display: none !important;
}

/* 商品ラベルの正常表示 */
.fs-c-productMark {
  padding-bottom: 6px;
  font-weight: 500;
}

.fs-c-productMarks {
  padding-bottom: 6px;
  font-weight: 500;
}

/* おすすめラベル */
.fs-c-productMark__mark--32 {
  color: #fff;
  background: #ff730c;
  border-radius: 4px;
  padding: 0.3em 0.8em;
  display: inline-block;
  line-height: 1.5;
  font-size: 1.1rem;
}

/* クール便でお届け */
.fs-c-mark--coolDelivery {
  color: #fff;
  background: #4db8e8;
  border-radius: 4px;
  padding: 0.3em 0.8em;
  display: inline-block;
  font-size: 1.1rem;
}

/* 予約商品 */
.fs-c-mark--preorder {
  color: #fff;
  background: #1f3a5f;
  border-radius: 4px;
  padding: 0.3em 0.8em;
  display: inline-block;
  font-size: 1.1rem;
}


/* ========================================
  共通：商品一覧 並び替えパーツ
======================================== */
.fs-c-productList__controller {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto 22px;
  padding-top: 40px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: #5A3D2B;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* 並び替え全体 */
.fs-c-productList__controller .fs-c-sortItems {
  width: auto;
  margin: 0 !important;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  min-width: 0;
}

/* 「並び替え」ラベル */
.fs-c-productList__controller .fs-c-sortItems__label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  color: rgba(90, 61, 43, .78);
  font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .08em;
  white-space: nowrap;
}

/* 並び替えリスト */
.fs-c-productList__controller .fs-c-sortItems__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* 各項目 */
.fs-c-productList__controller .fs-c-sortItems__list__item {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* 通常リンク・選択中ラベル共通 */
.fs-c-productList__controller .fs-c-sortItems__list__item__label,
.fs-c-productList__controller .fs-c-sortItems__list__item a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 15px;
  border: 1px solid rgba(234, 220, 207, .95);
  border-radius: 999px;
  background: #fff;
  color: rgba(90, 61, 43, .78) !important;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .03em;
  text-decoration: none !important;
  box-shadow: 0 3px 8px rgba(90, 61, 43, .035);
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

/* hover */
.fs-c-productList__controller .fs-c-sortItems__list__item a:hover {
  background: #FFF6E0;
  border-color: rgba(232, 106, 23, .32);
  color: #E86A17 !important;
  transform: translateY(-1px);
}

/* 選択中 */
.fs-c-productList__controller .fs-c-sortItems__list__item.is-active .fs-c-sortItems__list__item__label {
  background: #E86A17;
  border-color: #E86A17;
  color: #fff !important;
  box-shadow: 0 5px 12px rgba(232, 106, 23, .18);
}

/* 件数表示：右寄せ */
.fs-c-productList__controller .fs-c-listControl,
.fs-c-productList__controller .fs-c-productList__message,
.fs-c-productList__controller .fs-c-listControl__status,
.fs-c-productList__controller .fs-c-productList__controller__status {
  width: auto;
  margin: 0 !important;
  margin-left: auto !important;
  color: rgba(90, 61, 43, .68);
  font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  white-space: nowrap;
  text-align: right;
}

/* 不要な余白をリセット */
.fs-c-productList__controller > * {
  box-sizing: border-box;
}

/* ========================================
  SP：商品一覧 並び替えパーツ
======================================== */
@media screen and (max-width: 768px) {
  .fs-c-productList__controller {
    width: calc(100% - 24px);
    margin-bottom: 18px;
    display: block;
  }

  .fs-c-productList__controller .fs-c-sortItems {
    display: block;
    width: 100%;
  }

  .fs-c-productList__controller .fs-c-sortItems__label {
    display: block;
    margin: 0 0 10px;
    font-size: 11px;
  }

  .fs-c-productList__controller .fs-c-sortItems__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .fs-c-productList__controller .fs-c-sortItems__list__item__label,
  .fs-c-productList__controller .fs-c-sortItems__list__item a {
    width: 100%;
    min-height: 32px;
    padding: 7px 8px;
    font-size: 11px;
    letter-spacing: .01em;
  }

  .fs-c-productList__controller .fs-c-listControl,
  .fs-c-productList__controller .fs-c-productList__message,
  .fs-c-productList__controller .fs-c-listControl__status,
  .fs-c-productList__controller .fs-c-productList__controller__status {
    display: block;
    margin: 10px 0 0 !important;
    font-size: 11px;
    text-align: right;
    white-space: normal;
  }
}

/* ========================================
  iPhone等のセーフエリア対応（ボトムナビ用）
======================================== */
.pb-safe {
  padding-bottom: env(safe-area-inset-bottom);
}

/* =========================================
   ブランドカラー定義（必要に応じて変更）
   オレンジ: #eb6100 / ブラウン: #594031 / イエロー: #f5b800 / 背景色: #fff9ee
========================================= */

/* =========================================
   ファーストビュー (Carousel - 自動スライダー版)
========================================= */
.oimall-fv-section {
    position: relative;
    padding-top: 60px;
    padding-bottom: 0px;
    overflow: hidden;
    background-color: #fff9ee;
}

.oimall-fv-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 16px;
}

.oimall-fv-carousel {
    display: flex;
    overflow-x: auto;
    gap: 16px; /* カード間の余白 */
    padding-top: 24px;
    /* スクロールバーを非表示にする設定 */
    -ms-overflow-style: none;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth; /* JavaScriptでのスムーズな移動用 */
}
.oimall-fv-carousel::-webkit-scrollbar {
    display: none;
}

/* 各カードのスタイル（横長フルサイズ化） */
.oimall-fv-card {
    display: block;
    position: relative;
    flex: 0 0 100%; /* コンテナの100%幅を確保 */
    width: 100%;
    /* スマホ表示時は 4:3 程度の横長 */
    aspect-ratio: 4 / 3;
    background-color: #ffffff;
    border: 4px solid #ffffff;
    border-radius: 24px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    margin-top: 8px;
    cursor: pointer;
    text-decoration: none;
    scroll-snap-align: center; /* スクロール時に中央でピタッと止まる */
    overflow: visible;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .oimall-fv-section {
        padding-top: 60px;
        padding-bottom: 0px;
    }
    .oimall-fv-card {
        aspect-ratio: 21 / 9; 
    }
}

/* 画像エリアとホバーエフェクト */
.oimall-fv-img-wrap {
    position: absolute;
    top: 2px; right: 2px; bottom: 2px; left: 2px;
    border-radius: 16px;
    overflow: hidden;
}
.oimall-fv-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}
.oimall-fv-card:hover .oimall-fv-img {
    transform: scale(1.05);
}

/* 暗いグラデーション（文字を読みやすくする） */
.oimall-fv-overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(to top, rgba(89, 64, 49, 0.8) 0%, rgba(89, 64, 49, 0.1) 60%, transparent 100%);
}

/* テキストコンテンツエリア */
.oimall-fv-content {
    position: absolute;
    bottom: 24px; left: 24px; right: 24px;
    color: #ffffff;
}
@media (min-width: 768px) {
    .oimall-fv-content {
        bottom: 48px; left: 48px; right: 48px; /* PCでは余白を広く */
    }
}

/* カテゴリーラベル */
.oimall-fv-category {
    display: inline-block;
    font-size: 10px;
    font-weight: bold;
    padding: 4px 8px;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    border-radius: 4px;
}
@media (min-width: 768px) {
    .oimall-fv-category { font-size: 12px; padding: 6px 12px; margin-bottom: 12px; }
}

.oimall-cat-1 { background-color: #eb6100; color: #ffffff; }
.oimall-cat-2 { background-color: #f5b800; color: #594031; }
.oimall-cat-3 { background-color: #6366f1; color: #ffffff; }

/* タイトルと説明文 */
.oimall-fv-title {
    font-size: 30px;
    font-family: serif;
    font-weight: bold;
    line-height: 1.25;
    margin: 0 0 8px 0;
}
@media (min-width: 768px) {
    .oimall-fv-title { font-size: 44px; margin-bottom: 16px; }
}

.oimall-fv-desc {
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 16px 0;
}
@media (min-width: 768px) {
    .oimall-fv-desc { font-size: 18px; margin-bottom: 24px; }
}

.oimall-desc-1 { color: #f5b800; }
.oimall-desc-2, .oimall-desc-3 { opacity: 0.9; }

/* ボタン共通設定 */
.oimall-fv-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 9999px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, color 0.3s;
}
@media (min-width: 768px) {
    .oimall-fv-button { font-size: 14px; padding: 12px 24px; }
}

.oimall-fv-btn-icon {
    width: 12px;
    height: 12px;
}
@media (min-width: 768px) {
    .oimall-fv-btn-icon { width: 16px; height: 16px; }
}

.oimall-btn-1 { background-color: #ffffff; color: #eb6100; }
.oimall-fv-card:hover .oimall-btn-1 { background-color: #eb6100; color: #ffffff; }

.oimall-btn-2 { background-color: #eb6100; color: #ffffff; }
.oimall-fv-card:hover .oimall-btn-2 { background-color: #ffffff; color: #eb6100; }

.oimall-btn-3 { background-color: #ffffff; color: #594031; }
.oimall-fv-card:hover .oimall-btn-3 { background-color: #594031; color: #ffffff; }

/* =========================================
   カルーセルナビゲーション（矢印とドット）
========================================= */
.oimall-fv-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 8px;
    padding-bottom: 16px;
}
/* 矢印ボタン */
.oimall-fv-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    color: #5A3D2B;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s ease;
}
.oimall-fv-arrow:hover {
    border-color: #eb6100;
    color: #eb6100;
}
.oimall-fv-arrow svg {
    width: 16px;
    height: 16px;
}
/* ドットインジケーター */
.oimall-fv-dots {
    display: flex;
    gap: 8px;
}
.oimall-fv-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #d1d5db; /* 未選択はグレー */
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
.oimall-fv-dot.active {
    background-color: #eb6100; /* 選択中はオレンジ */
    transform: scale(1.3);
}

/* =========================================
   カテゴリーボタン
========================================= */
.oimall-category-section {
    padding: 32px 16px;
    background-color: #FFFDF7; /* bodyの背景色に合わせる */
    color: #5A3D2B; /* 共通のブラウンテキスト */
}

/* コンテナ：SPは4列グリッド、PCはフレックスで中央寄せ */
.oimall-category-container {
    max-width: 1024px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    text-align: center;
}
@media (min-width: 768px) {
    .oimall-category-container {
        display: flex;
        justify-content: center;
        gap: 48px;
    }
}

/* カテゴリーアイテム（ボタン本体） */
.oimall-category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 16px;
    padding: 8px;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .oimall-category-item {
        padding: 12px;
        min-width: 100px;
    }
}
.oimall-category-item:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    transform: translateY(-4px);
}

/* アイコンを囲む円 */
.oimall-category-icon-wrap {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    margin: 0 auto 8px auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (min-width: 768px) {
    .oimall-category-icon-wrap {
        width: 64px;
        height: 64px;
    }
}

/* SVGアイコンのサイズ */
.oimall-category-icon {
    width: 24px;
    height: 24px;
}
@media (min-width: 768px) {
    .oimall-category-icon {
        width: 32px;
        height: 32px;
    }
}

/* テキストラベル */
.oimall-category-text {
    display: block;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    margin-top: auto;
}
@media (min-width: 768px) {
    .oimall-category-text {
        font-size: 14px;
    }
}

/* --- 各ボタン固有のカラー設定 --- */

/* 生芋 */
.oimall-cat-raw { border-color: #fff7ed; }
.oimall-cat-raw .oimall-category-icon-wrap { background-color: #fff7ed; color: #eb6100; }

/* スイーツ */
.oimall-cat-sweets { border-color: #fef2f2; }
.oimall-cat-sweets .oimall-category-icon-wrap { background-color: #fef2f2; color: #ef4444; }

/* 芋診断 */
.oimall-cat-diag { border-color: #fef8e8; }
.oimall-cat-diag .oimall-category-icon-wrap { background-color: #fef8e8; color: #f5b800; }

/* セール */
.oimall-cat-sale { border-color: #f9fafb; }
.oimall-cat-sale .oimall-category-icon-wrap { background-color: #f9fafb; color: #6b7280; }

/* =========================================
   一押し商品（初めての方へ）
========================================= */
.oimall-recommend-section {
    padding: 64px 0;
    background-color: #fff9ee; /* セクション背景色 */
}

.oimall-recommend-inner {
    max-width: 896px;
    margin: 0 auto;
    padding: 0 16px;
    text-align: center;
    color: #5A3D2B;
}

/* タイトル周り */
.oimall-recommend-title {
    font-size: 24px;
    margin-bottom: 12px;
    font-family: serif;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
@media (min-width: 768px) {
    .oimall-recommend-title {
        font-size: 30px;
    }
}

.oimall-accent-color {
    color: #eb6100;
}

.oimall-recommend-lead {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 32px;
    opacity: 0.9;
}
.oimall-sp-only {
    display: block;
}
@media (min-width: 768px) {
    .oimall-sp-only {
        display: none;
    }
}

/* カードレイアウト */
.oimall-recommend-card {
    background-color: #ffffff;
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: left;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 4px solid #ffffff;
    margin-top: 16px;
}
@media (min-width: 768px) {
    .oimall-recommend-card {
        padding: 40px;
        flex-direction: row;
    }
}

/* 左側：画像エリア */
.oimall-recommend-img-col {
    width: 100%;
    border-radius: 16px;
    position: relative;
    overflow: visible; /* バッジを見切れないようにする設定 */
}
@media (min-width: 768px) {
    .oimall-recommend-img-col {
        width: 50%;
    }
}

.oimall-recommend-img-wrap {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.oimall-recommend-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}
.oimall-recommend-card:hover .oimall-recommend-img {
    transform: scale(1.05);
}

/* 右側：テキストエリア */
.oimall-recommend-txt-col {
    width: 100%;
}
@media (min-width: 768px) {
    .oimall-recommend-txt-col {
        width: 50%;
    }
}

.oimall-recommend-tag {
    background-color: #f5b800;
    color: #5A3D2B;
    font-size: 11px;
    padding: 4px 12px;
    margin-bottom: 12px;
    display: inline-block;
    border-radius: 9999px;
    font-weight: bold;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.oimall-recommend-item-title {
    font-size: 20px;
    margin-bottom: 16px;
    font-family: serif;
    font-weight: bold;
    color: #eb6100;
}
@media (min-width: 768px) {
    .oimall-recommend-item-title {
        font-size: 24px;
    }
}

.oimall-recommend-desc {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 32px;
    font-weight: bold;
    line-height: 1.625;
}

.oimall-recommend-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #eb6100;
    color: #ffffff !important;
    padding: 16px 32px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
}
@media (min-width: 768px) {
    .oimall-recommend-btn {
        width: auto;
    }
}
.oimall-recommend-btn:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.oimall-btn-icon {
    width: 16px;
    height: 16px;
}

/* =========================================
   会員特典
========================================= */
.oimall-member-section {
    padding: 64px 16px;
    background-color: #FFFDF7;
}

.oimall-member-inner {
    max-width: 1024px;
    margin: 0 auto;
}

/* オレンジ色のメインカード */
.oimall-member-card {
    position: relative;
    background-color: #eb6100;
    color: #ffffff;
    border-radius: 24px;
    padding: 32px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
@media (min-width: 768px) {
    .oimall-member-card {
        padding: 48px;
    }
}

/* 背景右上の「ぼんやり光る円形」エフェクト */
.oimall-member-bg-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 256px;
    height: 256px;
    background-color: #ffffff;
    opacity: 0.1;
    border-radius: 50%;
    transform: translate(25%, -50%);
    filter: blur(40px); /* ぼかし効果 */
}

/* カード内のコンテンツ配置 */
.oimall-member-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}
@media (min-width: 768px) {
    .oimall-member-content {
        flex-direction: row;
    }
}

/* 左側：テキストエリア */
.oimall-member-text-col {
    text-align: center;
    width: 100%;
}
@media (min-width: 768px) {
    .oimall-member-text-col {
        text-align: left;
    }
}

.oimall-member-subtitle {
    display: inline-block;
    color: #f5b800;
    font-weight: bold;
    font-size: 12px;
    letter-spacing: 0.1em;
    margin-bottom: 12px;
}

.oimall-member-title {
    font-size: 24px;
    font-family: serif;
    font-weight: bold;
    line-height: 1.25;
    margin: 0 0 16px 0;
}
@media (min-width: 768px) {
    .oimall-member-title {
        font-size: 36px;
    }
}

.oimall-member-desc {
    font-size: 14px;
    font-weight: bold;
    opacity: 0.9;
    margin: 0 0 32px 0;
}

/* 特典バッジのリスト */
.oimall-member-benefits {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}
@media (min-width: 768px) {
    .oimall-member-benefits {
        justify-content: flex-start;
    }
}

/* 特典バッジ（半透明ガラスエフェクト） */
.oimall-member-badge {
    background-color: rgba(255, 255, 255, 0.2);
    font-size: 12px;
    font-weight: bold;
    padding: 10px 16px;
    border-radius: 9999px;
    backdrop-filter: blur(4px); /* 背景のぼかし */
}

/* 右側：ボタンエリア */
.oimall-member-btn-col {
    width: 100%;
    position: relative;
    overflow: visible; /* 右上のPOPが見切れないようにする */
    margin-top: 24px;
    flex-shrink: 0;
}
@media (min-width: 768px) {
    .oimall-member-btn-col {
        width: auto;
        margin-top: 0;
    }
}

/* メインボタン */
.oimall-member-btn-main {
    display: block;
    width: 100%;
    background-color: #ffffff;
    color: #eb6100 !important;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    padding: 20px 40px;
    border-radius: 9999px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
    text-decoration: none;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .oimall-member-btn-main {
        font-size: 16px;
    }
}
.oimall-member-btn-main:hover {
    transform: scale(1.05);
}

/* ログインリンク */
.oimall-member-link {
    display: block;
    text-align: center;
    margin-top: 20px;
    font-size: 12px;
    font-weight: bold;
    color: #ffffff !important;
    opacity: 0.8;
    text-decoration: underline;
    transition: opacity 0.3s ease;
}
.oimall-member-link:hover {
    opacity: 1;
}


/* =========================================
   カテゴリーから探す
========================================= */
.oimall-catsearch-section {
    padding: 64px 0;
    background-color: #fff9ee;
}

.oimall-catsearch-inner {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 16px;
}

/* 見出し */
.oimall-catsearch-header {
    text-align: center;
    margin-bottom: 48px;
}
.oimall-catsearch-subtitle {
    display: inline-block;
    color: #eb6100;
    font-size: 10px;
    letter-spacing: 0.1em;
    font-weight: bold;
    margin-bottom: 8px;
}
.oimall-catsearch-title {
    font-size: 24px;
    font-family: serif;
    font-weight: bold;
    color: #5A3D2B;
    margin: 0;
}
@media (min-width: 768px) {
    .oimall-catsearch-title {
        font-size: 30px;
    }
}

/* グリッドレイアウト */
.oimall-catsearch-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 16px;
}
@media (min-width: 768px) {
    .oimall-catsearch-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* リンクカード全体のラッパー（バッジのはみ出しを許容） */
.oimall-catsearch-card {
    display: block;
    position: relative;
    text-decoration: none;
    overflow: visible;
}

/* カード本体 */
.oimall-catsearch-card-body {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border-radius: 24px;
    border: 4px solid #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease;
    box-sizing: border-box;
}
/* ホバー時：カード全体が浮き上がる */
.oimall-catsearch-card:hover .oimall-catsearch-card-body {
    transform: translateY(-4px);
}

/* 暗いオーバーレイ */
.oimall-catsearch-overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: rgba(89, 64, 49, 0.2);
    z-index: 10;
    transition: background-color 0.3s ease;
}
/* ホバー時：オーバーレイが少し明るくなる */
.oimall-catsearch-card:hover .oimall-catsearch-overlay {
    background-color: rgba(89, 64, 49, 0.1);
}

/* 背景画像 */
.oimall-catsearch-img {
    width: 100%;
    height: 192px;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
@media (min-width: 768px) {
    .oimall-catsearch-img {
        height: 256px;
    }
}
/* ホバー時：画像がゆっくり拡大 */
.oimall-catsearch-card:hover .oimall-catsearch-img {
    transform: scale(1.05);
}

/* テキストコンテンツエリア */
.oimall-catsearch-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 24px;
    z-index: 20;
    background: linear-gradient(to top, rgba(89, 64, 49, 0.9) 0%, transparent 100%);
    color: #ffffff;
    box-sizing: border-box;
}

.oimall-catsearch-item-title {
    font-size: 24px;
    font-family: serif;
    font-weight: bold;
    color: #f5b800;
    margin: 0 0 8px 0;
}

.oimall-catsearch-item-desc {
    font-size: 12px;
    font-weight: bold;
    opacity: 0.9;
    margin: 0;
    line-height: 1.5;
    /* 2行で三点リーダーにする設定 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 768px) {
    .oimall-catsearch-item-desc {
        font-size: 14px;
    }
}

/* リンクテキスト */
.oimall-catsearch-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 12px;
    font-weight: bold;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    transition: color 0.3s ease, border-color 0.3s ease;
}
/* ホバー時：リンクテキストが黄色になる */
.oimall-catsearch-card:hover .oimall-catsearch-link {
    color: #f5b800;
    border-bottom-color: #f5b800;
}

/* =========================================
   人気ランキング
========================================= */
.oimall-ranking-section {
    padding: 64px 16px;
    background-color: #FFFDF7; /* bodyの背景色に合わせる */
}
@media (min-width: 768px) {
    .oimall-ranking-section {
        padding: 64px 24px;
    }
}

.oimall-ranking-inner {
    max-width: 1024px;
    margin: 0 auto;
}

/* 見出しエリア */
.oimall-ranking-header {
    text-align: center;
    margin-bottom: 48px;
}
.oimall-ranking-subtitle {
    display: inline-block;
    color: #eb6100;
    font-size: 10px;
    letter-spacing: 0.1em;
    font-weight: bold;
    margin-bottom: 8px;
}
.oimall-ranking-title {
    font-size: 24px;
    font-family: serif;
    font-weight: bold;
    color: #5A3D2B;
    margin: 0;
}
@media (min-width: 768px) {
    .oimall-ranking-title {
        font-size: 30px;
    }
}
.oimall-ranking-desc {
    font-size: 14px;
    font-weight: bold;
    color: rgba(90, 61, 43, 0.8);
    margin: 16px 0 0 0;
}

/* 2カラムレイアウト */
.oimall-ranking-layout {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: stretch;
}
@media (min-width: 768px) {
    .oimall-ranking-layout {
        flex-direction: row;
    }
}
.oimall-ranking-col-main,
.oimall-ranking-col-sub {
    width: 100%;
}
@media (min-width: 768px) {
    .oimall-ranking-col-main,
    .oimall-ranking-col-sub {
        width: 50%;
    }
}
.oimall-ranking-col-sub {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}

/* 1位（メインカード）スタイル */
.oimall-ranking-card-main {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #ffffff;
    padding: 16px;
    border-radius: 24px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    text-decoration: none;
    box-sizing: border-box;
}
.oimall-ranking-card-main:hover {
    border-color: rgba(235, 97, 0, 0.3);
}

.oimall-ranking-main-imgwrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 16px;
}
.oimall-ranking-badge-1 {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f5b800;
    color: #5A3D2B;
    font-size: 16px;
    font-weight: bold;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-right-radius: 16px;
    border-top-left-radius: 16px;
    z-index: 20;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
@media (min-width: 768px) {
    .oimall-ranking-badge-1 { font-size: 18px; }
}

.oimall-ranking-main-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
@media (min-width: 768px) {
    .oimall-ranking-main-img { aspect-ratio: 3 / 2; }
}
.oimall-ranking-card-main:hover .oimall-ranking-main-img {
    transform: scale(1.05);
}

.oimall-ranking-main-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0 4px;
}
.oimall-ranking-main-title {
    font-size: 18px;
    font-weight: bold;
    color: #5A3D2B;
    margin: 0 0 8px 0;
    transition: color 0.3s ease;
}
@media (min-width: 768px) { .oimall-ranking-main-title { font-size: 20px; } }
.oimall-ranking-card-main:hover .oimall-ranking-main-title { color: #eb6100; }

.oimall-ranking-main-desc {
    font-size: 14px;
    color: #4b5563; /* gray-600 */
    margin: 0 0 16px 0;
}
.oimall-ranking-main-price {
    font-size: 20px;
    font-weight: bold;
    color: #eb6100;
    margin: auto 0 0 0;
}

/* 2位・3位（サブカード）スタイル */
.oimall-ranking-card-sub {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
    background-color: #ffffff;
    padding: 16px;
    border-radius: 24px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 2px solid transparent;
    transition: all 0.3s ease;
    text-decoration: none;
    box-sizing: border-box;
}
@media (min-width: 768px) {
    .oimall-ranking-card-sub { gap: 24px; }
}
.oimall-ranking-card-sub:hover {
    border-color: rgba(235, 97, 0, 0.3);
}

.oimall-ranking-sub-imgwrap {
    position: relative;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
}
@media (min-width: 768px) {
    .oimall-ranking-sub-imgwrap { width: 128px; height: 128px; }
}

.oimall-ranking-badge-2,
.oimall-ranking-badge-3 {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 12px;
    font-weight: bold;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom-right-radius: 12px;
    border-top-left-radius: 16px;
    z-index: 10;
}
.oimall-ranking-badge-2 {
    background-color: #e5e7eb; /* gray-200 */
    color: #374151; /* gray-700 */
}
.oimall-ranking-badge-3 {
    background-color: #d48937;
    color: #ffffff;
}

.oimall-ranking-sub-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.oimall-ranking-card-sub:hover .oimall-ranking-sub-img {
    transform: scale(1.1);
}

.oimall-ranking-sub-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.oimall-ranking-sub-title {
    font-size: 16px;
    font-weight: bold;
    color: #5A3D2B;
    margin: 0 0 8px 0;
    transition: color 0.3s ease;
}
@media (min-width: 768px) { .oimall-ranking-sub-title { font-size: 18px; } }
.oimall-ranking-card-sub:hover .oimall-ranking-sub-title { color: #eb6100; }

.oimall-ranking-sub-desc {
    font-size: 12px;
    color: #6b7280; /* gray-500 */
    margin: 0 0 8px 0;
}
@media (min-width: 768px) { .oimall-ranking-sub-desc { font-size: 14px; } }

.oimall-ranking-sub-price {
    font-size: 16px;
    font-weight: bold;
    color: #eb6100;
    margin: 0;
}
@media (min-width: 768px) { .oimall-ranking-sub-price { font-size: 18px; } }
.oimall-ranking-sub-price-small {
    font-size: 12px;
    font-weight: normal;
}

/* ボタン */
.oimall-ranking-btn-area {
    margin-top: 40px;
    text-align: center;
    width: 100%;
}
.oimall-ranking-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #5A3D2B;
    color: #5A3D2B !important;
    padding: 12px 40px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.oimall-ranking-btn:hover {
    background-color: #5A3D2B;
    color: #ffffff !important;
}

/* =========================================
   ランキングカードのリンク下線消去設定
========================================= */
.oimall-ranking-card-main,
.oimall-ranking-card-main:hover,
.oimall-ranking-card-main:visited,
.oimall-ranking-card-main:active {
    text-decoration: none !important;
}

.ooimall-ranking-card-main * {
    text-decoration: none !important;
}

.oimall-ranking-card-sub,
.oimall-ranking-card-sub:hover,
.oimall-ranking-card-sub:visited,
.oimall-ranking-card-sub:active {
    text-decoration: none !important;
}

.ooimall-ranking-card-sub * {
    text-decoration: none !important;
}

/* =========================================
   コラム（お芋を愉しむ）
========================================= */
.oimall-column-section {
    padding: 64px 16px;
    background-color: #fff9ee; /* ブランド表面色 */
}
@media (min-width: 768px) {
    .oimall-column-section {
        padding: 64px 24px;
    }
}

.oimall-column-inner {
    max-width: 1024px;
    margin: 0 auto;
}

/* 見出し */
.oimall-column-header {
    text-align: center;
    margin-bottom: 48px;
}
.oimall-column-subtitle {
    display: inline-block;
    color: #eb6100;
    font-size: 10px;
    letter-spacing: 0.1em;
    font-weight: bold;
    margin-bottom: 8px;
}
.oimall-column-title {
    font-size: 24px;
    font-family: serif;
    font-weight: bold;
    color: #5A3D2B;
    margin: 0;
}
@media (min-width: 768px) {
    .oimall-column-title {
        font-size: 30px;
    }
}

/* グリッドレイアウト */
.oimall-column-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: stretch;
}
@media (min-width: 768px) {
    .oimall-column-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* カード全体 */
.oimall-column-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #ffffff;
    padding: 12px;
    border-radius: 16px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 2px solid #ffffff;
    text-decoration: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
}
.oimall-column-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* 画像エリア */
.oimall-column-imgwrap {
    position: relative;
    aspect-ratio: 16 / 10;
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}
.oimall-column-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.oimall-column-card:hover .oimall-column-img {
    transform: scale(1.05);
}

/* 左上のバッジ */
.oimall-column-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    font-size: 10px;
    letter-spacing: 0.05em;
    font-weight: bold;
    padding: 4px 12px;
    border-radius: 9999px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    z-index: 10;
}
.oimall-badge-tips {
    background-color: #eb6100;
    color: #ffffff;
}
.oimall-badge-knowledge {
    background-color: #f5b800;
    color: #5A3D2B;
}
.oimall-badge-recipe {
    background-color: #D95B11;
    color: #ffffff;
}

/* 本文エリアのラッパー */
.oimall-column-card-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 0 4px 4px 4px;
}

/* 日付 */
.oimall-column-date {
    font-size: 10px;
    color: rgba(90, 61, 43, 0.6);
    font-weight: bold;
    margin-bottom: 8px;
    display: block;
}

/* コラムタイトル */
.oimall-column-card-title {
    font-family: 'Shippori Mincho', serif !important;
    font-size: 16px;
    font-weight: bold;
    color: #5A3D2B;
    line-height: 1.4;
    margin: 0 0 12px 0;
    transition: color 0.3s ease;
}
@media (min-width: 768px) {
    .oimall-column-card-title { font-size: 18px; }
}
.oimall-column-card:hover .oimall-column-card-title {
    color: #eb6100;
}

/* 概要（説明文） */
.oimall-column-desc {
    font-size: 11px;
    color: rgba(90, 61, 43, 0.8);
    font-weight: bold;
    line-height: 1.6;
    margin: auto 0 0 0;
    /* 2行で三点リーダーにする設定 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.oimall-column-card:hover .oimall-column-card-title {
    color: #eb6100;
}

/* ボタンエリア */
.oimall-column-btn-area {
    margin-top: 40px;
    text-align: center;
    width: 100%;
}
.oimall-column-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #5A3D2B;
    color: #5A3D2B !important;
    padding: 12px 40px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.oimall-column-btn:hover {
    background-color: #5A3D2B;
    color: #ffffff !important;
}

/* =========================================
   コラムカードのリンク下線消去設定
========================================= */
.oimall-column-card,
.oimall-column-card:hover,
.oimall-column-card:visited,
.oimall-column-card:active {
    text-decoration: none !important;
}

.oimall-column-card * {
    text-decoration: none !important;
}

/* =========================================
   お知らせ・メディア情報
========================================= */
.oimall-news-section {
    padding: 64px 24px;
    background-color: #ffffff; /* シンプルな白背景 */
}

.oimall-news-inner {
    max-width: 768px; /* max-w-3xl相当。少し幅を狭めて読みやすく */
    margin: 0 auto;
}

/* タイトルエリア */
.oimall-news-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}
.oimall-news-title {
    font-size: 20px;
    font-family: serif;
    font-weight: bold;
    color: #5A3D2B !important;
    margin: 0;
}
@media (min-width: 768px) {
    .oimall-news-title {
        font-size: 24px;
    }
}

/* 一覧へリンク */
.oimall-news-list-link {
    font-size: 12px;
    font-weight: bold;
    color: #eb6100 !important;
    text-decoration: none;
    transition: color 0.3s ease;
}
.oimall-news-list-link:hover {
    color: #5A3D2B;
}

/* リストエリア */
.oimall-news-list {
    display: flex;
    flex-direction: column;
}

/* 各お知らせアイテム */
.oimall-news-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 8px;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    box-sizing: border-box;
}
/* ホバー時：背景色がうっすらとブランドの表面色になる */
.oimall-news-item:hover {
    background-color: #fff9ee;
}

/* 日付バッジ */
.oimall-news-date {
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.05em;
    background-color: #f5b800;
    color: #5A3D2B;
    padding: 4px 12px;
    border-radius: 4px;
    flex-shrink: 0;
}

/* お知らせテキスト */
.oimall-news-text {
    font-size: 12px;
    font-weight: bold;
    color: rgba(90, 61, 43, 0.8);
    margin: 0;
    /* 長い文章は1行で省略（...）する設定 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}
@media (min-width: 768px) {
    .oimall-news-text {
        font-size: 14px;
    }
}
/* ホバー時：テキストがオレンジ色になる */
.oimall-news-item:hover .oimall-news-text {
    color: #eb6100;
}

/* =========================================
   最近チェックした商品
========================================= */
/* 初期状態の非表示制御 */
.oimall-history-hidden {
    display: none !important;
}

.oimall-history-section {
    padding: 48px 0;
    background-color: #fff9ee;
    border-top: 1px solid #f3f4f6; /* 上部の区切り線 */
}

.oimall-history-inner {
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 16px;
}
@media (min-width: 768px) {
    .oimall-history-inner {
        padding: 0 24px;
    }
}

.oimall-history-title {
    font-size: 14px;
    margin: 0 0 24px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #5A3D2B;
    font-weight: bold;
}
@media (min-width: 768px) {
    .oimall-history-title {
        font-size: 16px;
    }
}

.oimall-history-icon {
    width: 18px;
    height: 18px;
}

/* スクロールエリア */
.oimall-history-list {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 16px;
    /* スクロールバー非表示（IE/Edge用とFirefox用） */
    -ms-overflow-style: none;
    scrollbar-width: none;
}
/* Chrome/Safari用スクロールバー非表示 */
.oimall-history-list::-webkit-scrollbar {
    display: none;
}

/* 生成されるアイテム（1商品） */
.oimall-history-item {
    display: block;
    width: 112px;
    flex-shrink: 0;
    text-decoration: none;
}
@media (min-width: 768px) {
    .oimall-history-item {
        width: 144px;
    }
}

.oimall-history-imgwrap {
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 8px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border: 2px solid #ffffff;
    background-color: #ffffff;
    padding: 4px;
}

.oimall-history-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    display: block;
    transition: transform 0.5s ease;
}
/* ホバー時：画像拡大 */
.oimall-history-item:hover .oimall-history-img {
    transform: scale(1.05);
}

.oimall-history-name {
    font-size: 10px;
    color: #5A3D2B;
    font-weight: bold;
    margin: 0;
    padding: 0 4px;
    transition: color 0.3s ease;
    /* 2行で三点リーダーにする設定 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
@media (min-width: 768px) {
    .oimall-history-name {
        font-size: 12px;
    }
}
/* ホバー時：文字色変更 */
.oimall-history-item:hover .oimall-history-name {
    color: #eb6100;
}

/* =========================================
   ベース設定・フォント設定（Head共通から移行）
========================================= */

/* ベースのフォントサイズと、サイト全体の基本フォント（ゴシック体） */
html, body {
    font-family: 'Zen Kaku Gothic New', "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
}

/* 明朝体を適用する箇所（これまで作成した各パーツの見出しやバッジなどに適用） */
h1, h2, h3, h4, h5, h6,
[class*="oimall-"][class*="-title"],
[class*="oimall-"][class*="-badge"],
.oimall-member-pop,
.oimall-recommend-item-title {
    font-family: 'Shippori Mincho', serif !important;
}

/* =========================================
   ヘッダー本体
   常に画面上部へ固定
========================================= */
.oimall-header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 50;
    width: 100%;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}


.oimall-header-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    max-width: 1280px;
    min-height: 64px;
    margin: 0 auto;
    padding: 12px 20px;
}

/* メニューボタン（ハンバーガー） */
.oimall-header-menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    border-radius: 9999px;
    background: transparent;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.oimall-header-menu-btn:hover {
    background-color: #FFF6E0;
}

.oimall-header-menu-line {
    display: block;
    height: 2px;
    border-radius: 9999px;
    background-color: #5A3D2B;
}

.oimall-line-top {
    width: 24px;
}

.oimall-line-mid {
    width: 16px;
}

.oimall-line-btm {
    width: 20px;
}

/* ロゴ */
.oimall-header-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 50;
    margin: 0;
    transform: translate(-50%, -50%);
}

.oimall-header-logo a {
    display: block;
}

.oimall-header-logo-img {
    display: block;
    width: auto;
    height: 32px;
    object-fit: contain;
}

@media (min-width: 768px) {
    .oimall-header-logo {
        position: static;
        transform: none;
    }

    .oimall-header-logo-img {
        height: 40px;
    }
}

/* 右側ツール（ログイン・カート） */
.oimall-header-tools {
    display: flex;
    align-items: center;
    gap: 16px;
}

.oimall-header-login {
    display: none;
    color: #5A3D2B !important;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: color 0.3s ease;
}

.oimall-header-login:hover {
    color: #eb6100 !important;
}

.oimall-header-cart {
    position: relative;
    display: none;
    align-items: center;
    justify-content: center;
    color: #5A3D2B !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.oimall-header-cart:hover {
    color: #eb6100 !important;
}

@media (min-width: 768px) {
    .oimall-header-login {
        display: block;
    }

    .oimall-header-cart {
        display: flex;
    }
}

/* カートの数字バッジ */
.oimall-header-cart-badge {
    position: absolute !important;
    top: -8px !important;
    right: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: #eb6100;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    line-height: 1;
}

/* =========================================
   ドロワーメニュー（スライドメニュー）
========================================= */
/* 背景のぼかし設定 */
#menu-backdrop {
    backdrop-filter: blur(4px);
}

/* パネル本体のスタイル */
.oimall-drawer-panel {
    position: relative;
    width: 100%;
    max-width: 384px;
    height: 100%;
    background-color: #FFFDF7;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* 閉じるボタンエリア */
.oimall-drawer-close-wrap {
    padding: 24px;
    display: flex;
    justify-content: flex-end;
    border-bottom: 1px solid #f3f4f6;
}
.oimall-drawer-close-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.1em;
    font-weight: bold;
    color: #5A3D2B !important;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease;
}
.oimall-drawer-close-btn:hover { color: #eb6100; }

.oimall-drawer-close-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.oimall-drawer-close-btn:hover .oimall-drawer-close-icon {
    background-color: #eb6100;
    color: #ffffff !important;
}

/* コンテンツエリア */
.oimall-drawer-content {
    padding: 32px;
    padding-bottom: 48px;
}

/* 検索窓 */
.oimall-drawer-search {
    position: relative;
    margin-bottom: 32px;
}
.oimall-drawer-search-input {
    width: 100%;
    background-color: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 9999px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: bold;
    color: #5A3D2B !important;
    outline: none;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}
.oimall-drawer-search-input:focus {
    border-color: #eb6100;
}
.oimall-drawer-search-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: #eb6100;
}

/* バナー（生芋・スイーツ） */
.oimall-drawer-banners {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 40px;
}
.oimall-drawer-banner {
    display: block;
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 4px solid #ffffff;
    background-color: #ffffff;
    text-decoration: none;
}
.oimall-drawer-banner-img {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.oimall-drawer-banner:hover .oimall-drawer-banner-img {
    transform: scale(1.05);
}
.oimall-drawer-banner-overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: rgba(90, 61, 43, 0.1);
    transition: background-color 0.3s ease;
}
.oimall-drawer-banner:hover .oimall-drawer-banner-overlay {
    background-color: rgba(90, 61, 43, 0.2);
}
.oimall-drawer-banner-tag {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-3deg);
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    color: #eb6100 !important;
    font-weight: bold;
    font-size: 16px;
    padding: 6px 16px;
    border-radius: 9999px;
    white-space: nowrap;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* ナビゲーションリスト */
.oimall-drawer-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.oimall-drawer-nav-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-radius: 8px;
    color: #5A3D2B !important;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease;
}
.oimall-drawer-nav-item:hover {
    background-color: #FFF6E0;
}
.oimall-drawer-nav-arrow {
    color: #eb6100;
    font-size: 12px;
}

/* =========================================
   ドロワーメニュー内 検索窓（機能修正版）
========================================= */
.oimall-drawer-search {
    position: relative;
    margin-bottom: 32px;
    display: block; /* form要素として正しく表示 */
}

.oimall-drawer-search-input {
    width: 100%;
    background-color: #ffffff;
    border: 2px solid #e5e7eb;
    border-radius: 9999px;
    /* 右側に検索ボタン（虫眼鏡）用の余白を確保 */
    padding: 12px 48px 12px 20px;
    font-size: 14px;
    font-weight: bold;
    color: #5A3D2B !important;
    outline: none;
    transition: border-color 0.3s ease;
    box-sizing: border-box;
}

.oimall-drawer-search-input:focus {
    border-color: #eb6100;
}

/* 検索実行ボタン（虫眼鏡） */
.oimall-drawer-search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

.oimall-drawer-search-btn:hover {
    opacity: 0.7;
}

.oimall-drawer-search-icon {
    width: 20px;
    height: 20px;
    color: #eb6100;
}

/* =========================================
   フッター
========================================= */
.oimall-footer {
    background-color: #5A3D2B;
    color: #ffffff !important;
    padding-top: 64px;
    padding-bottom: 96px; /* SP向けにボトムナビゲーション分の余白を確保 */
    font-weight: bold;
}
@media (min-width: 768px) {
    .oimall-footer {
        padding-bottom: 64px;
    }
}

.oimall-footer-inner {
    max-width: 1152px;
    margin: 0 auto;
    padding: 0 24px;
}

/* グリッドレイアウト（PC時は3カラム、SP時は1カラム） */
.oimall-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
}
@media (min-width: 768px) {
    .oimall-footer-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 左側：ロゴ・説明文 */
.oimall-footer-logo {
    height: 40px;
    width: auto;
    object-fit: contain;
    margin-bottom: 24px;
    opacity: 0.9;
    /* 黒いロゴ画像をCSSで白抜きに反転させる */
    filter: brightness(0) invert(1);
    display: block;
}

.oimall-footer-desc {
    font-size: 12px;
    line-height: 1.625;
    opacity: 0.8;
    font-weight: 500;
    margin: 0;
}

/* 右側：リンク集（PC時は残り2カラム分を使用） */
.oimall-footer-links-wrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    font-size: 14px;
}
@media (min-width: 768px) {
    .oimall-footer-links-wrap {
        grid-column: span 2;
    }
}

.oimall-footer-link-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.oimall-footer-link {
    display: block;
    color: #ffffff !important;
    text-decoration: none;
    transition: color 0.3s ease;
}
.oimall-footer-link:hover {
    color: #f5b800 !important;
}

/* コピーライトエリア */
.oimall-footer-copyright-wrap {
    max-width: 1152px;
    margin: 48px auto 0 auto;
    padding: 24px 24px 0 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.oimall-footer-copyright {
    font-size: 10px;
    opacity: 0.5;
    font-weight: normal;
}

/* =========================================
   スマホ用ボトムナビ
========================================= */
.oimall-bottomnav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border-top: 1px solid #f3f4f6;
    display: flex;
    justify-content: space-around;
    padding-top: 8px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 40;
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.05);
    color: #5A3D2B;
}

/* PCでは非表示 */
@media (min-width: 768px) {
    .oimall-bottomnav {
        display: none;
    }
}

.oimall-bottomnav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    width: 25%;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: color 0.3s ease;
}
.oimall-bottomnav-item:hover,
.oimall-active {
    color: #eb6100;
}

.oimall-bottomnav-label {
    font-size: 9px;
    font-weight: bold;
    margin-top: 4px;
}

/* カートのバッジ */
.oimall-bottomnav-badge {
    position: absolute !important;
    top: 2px !important;
    right: 10% !important;
    margin-right: -12px !important;
    background-color: #eb6100;
    color: #ffffff;
    font-size: 10px;
    font-weight: bold;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* =========================================
   SP共通：メインエリア余白調整
========================================= */

@media screen and (max-width: 767px) {
  .fs-l-main {
    padding: 50px 22px 0px;
    box-sizing: border-box;
  }
}

/* ========================================
  Futureshop 商品一覧：並び替えボーダー打ち消し
======================================== */

.fs-c-sortItems {
  border: none;
}

.fs-c-sortItems__list {
  border-left: none;
}

/* ========================================
  パンくず
======================================== */

.fs-c-breadcrumb__list {
    width: calc(100% - 40px) !important;
    max-width: 1200px !important;
    margin: 60px auto 0 !important;
    box-sizing: border-box !important;
    color: #8a7664 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

@media screen and (max-width: 767px) {
    .fs-c-breadcrumb__list {
        width: calc(100% - 24px) !important;
        margin: 80px 0 0 18px !important;
    }
}

/* ========================================
  おすすめ商品
======================================= */
.fs-c-featuredProduct__header {
    margin: 100px 0 40px 0;
    padding: 0;
    border: none !important;
    text-align: center;
}

.fs-c-featuredProduct__title {
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0 0 14px;
    border: none !important;
    color: #371806;
    /* font-family: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif; */
    font-size: 28px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.08em;
}

.fs-c-featuredProduct__title::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin: 12px auto 0;
    border-radius: 999px;
    background: #ea6b13;
}

/* カート商品数バッジ：数字フォント調整　PCヘッダー / SP下部ナビ 共通 */

.oimall-header-cart .oimall-header-cart-badge,
.oimall-bottomnav .oimall-bottomnav-badge,
.oimall-header-cart .fs-p-cartItemNumber,
.oimall-bottomnav .fs-p-cartItemNumber {
  font-family:
    "Zen Kaku Gothic New",
    "Hiragino Maru Gothic ProN",
    "Yu Gothic",
    sans-serif !important;

  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  font-feature-settings: "palt";
}