/* 
======================================================================
   永楽屋オンラインショップ カスタムCSS

   ▼ 目次

   01. カート追加ボタン
      商品詳細ページの「カートに入れる」ボタン色

   02. マイページ
      ログアウトボタン中央寄せ

   03. 商品紹介レイアウト
      .box / .text / .pict による紹介ブロック

   04. 会員証画像（スマホ縦表示）
      @media max-600px

   05. カートページ レイアウト
      @media min-900px グリッド

   06. 商品詳細ページ 商品説明
      .ec-productRole__description

   07. PageTopボタン位置
      ssf-PageTop（FutureShop標準）

   08. ヒーローセクション
      .hero-Sub_TextWrapper

   09. 商品詳細 おすすめ商品
      fs-c-featuredProduct カルーセル

   10. ログイン連携
      fs-c-accountService

   11. 今までにチェックした商品
      _rcmdjp_display 表示崩れ対策

   12. AnyGift フローティング
      anygift-floating-cart

   13. ヘッダー カゴバッジ
      ssh-Utility_ItemBadge

   14. レビュー評価（星マーク）
      ey-rating（商品一覧）

   15. お気に入り 販売期間
      fs-c-salesPeriod__date

   16. PCヘッダー フローティング
      ssh-Header_Fix（@media min-900px）

   17. カート割引情報
      fs-c-cartDiscountInfo（あと¥○○）

   18. お支払い方法 注意書き
      fs-c-checkout-paymentMethod

   19. チェックアウト リファインCSS
      fs-body-checkout 全体

   20. チェックアウト 見出し左寄せ
      [PATCH] preview__title

   21. お支払い金額エリア sticky
      fs-l-sticky / fs_orderTotalContainer

   22. カートページ 北海道沖縄注記
      cartDiscountInfo__note

   23. お支払い金額 フローティング最終版
      @media min-769px / max-768px

   24. z-index 整理
      Header_Fix / Navigation_Container

   25. チェックアウト 配送内容
      shippingParcel（大江ノ郷スタイル）

   26. チェックアウト サムネイル拡大
      115pxへ拡大・フォント統一・1行表示

   27. チェックアウト 配送内容 フォント統一
      YuGothic系に強制統一

   28. チェックアウト お届け希望日 余白
      deliveryDetail スリム化

   29. チェックアウト レイアウト調整4点
      shippingInfo / shippingCarrier

   30. チェックアウト 配送日案内 枠囲み
      shippingCarrier__comment

   31. チェックアウト 見出し本文余白
      outline__title / shippingCarrier__label

   32. チェックアウト 配送日案内 枠一重化
      shippingCarrier__comment 確定版

   33. チェックアウト 複数届け先ボタン右寄せ
      addDestinationButton

   34. チェックアウト 商品名太字復元
      productName 太字

   35. チェックアウト 配送日案内 文字サイズ
      shippingCarrier__comment フォント

   36. カートページ ご注文内容テーブル
      fs-c-cartTable 統一

   37. カートページ サムネイル統一
      cartTable productImage 115px

   38. カートページ サムネイル スマホ対応
      @media max-768px

   39. チェックアウト 右側ボタン群統一
      200px幅・明朝・::beforeでラベル変更

   40. チェックアウト クーポン・変更ボタン
      couponCodeInput / previewAndEdit

   41. チェックアウト クーポン欄レイアウト
      ラベル＋入力＋利用するを横一列

   42. チェックアウト ポイント欄余白
      pointInfo previewAndEdit__info

   43. フッター オンラインショップご利用案内
      eirakuya-howto（4×2カードグリッド）

   ▼ 編集メモ
   - 各セクションは = で囲まれたヘッダーコメントで区切られています
   - 新しいスタイルを追加する場合、関連するセクションの末尾に追記すると
     重複や上書きの混乱を避けやすくなります
   - !important は futureshop テーマCSSへの上書きのため多用されています

   ===================================================================
*/


/* ============================================================
   01. カート追加ボタン
   商品詳細ページの「カートに入れる」ボタン色
   ============================================================ */

.fs-c-button--addToCart--detail{
    background: #005731 !important;
    border-color: #005731 !important;
    }
    
    /*--- マイページ ---*/
    
/* ============================================================
   02. マイページ
   ログアウトボタン中央寄せ
   ============================================================ */

.mypage-logout{
    text-align: center;
    }
    
    
    /*--- オリジナルＣＳＳ ---*/
    
/* ============================================================
   03. 商品紹介レイアウト
   .box / .text / .pict による紹介ブロック
   ============================================================ */

body {
      margin: 0;
      padding: 0;
    }
    
    .box {
      display:flex;
      flex-direction: column;
      padding: 0px;
    }
    
    .text {
        font-family: Yu Mincho,YuMincho,ヒラギノ明朝 ProN W3,Hiragino Mincho ProN,HG明朝E,ＭＳ Ｐ明朝,ＭＳ 明朝,serif; 
        font-size:115%;
        width: 100%;
        text-align: left;
        margin-top:0px;
    }
    
    h3 {
        font-size: 130%;
        text-align: center;
        line-height:3;
    }
    
    .pict {
        text-align: center;
        width: 100%;
        min-height: 0%;
    }
    
    .pict img {
        max-width: 80vw;
        height:auto;
    }
    .box:nth-child(even) {
        <!--background-color: #f1f1f1;-->
        padding: 20px;
    }
    
    @media (min-width:900px) {
        body {
            padding: 0;
        }
    
        .box {
            flex-direction: row;
            justify-content:center;
            margin-bottom: 0px;
        }
    
        .box:nth-child(even) {
            flex-direction: row-reverse;
        }
    
        .text {
            font-family: Yu Mincho,YuMincho,ヒラギノ明朝 ProN W3,Hiragino Mincho ProN,HG明朝E,ＭＳ Ｐ明朝,ＭＳ 明朝,serif; 
            font-size: 115%;
            text-align: left;
            line-height: 1;
            margin-top:10px;
            margin-bottom:10px;
            margin-left:10px;
            margin-right:10px;
        }
    
        h3 {
            font-family: Yu Mincho,YuMincho,ヒラギノ明朝 ProN W3,Hiragino Mincho ProN,HG明朝E,ＭＳ Ｐ明朝,ＭＳ 明朝,serif; 
            font-size: 115%;
            text-align: left;
            line-height:3;
        }
    
        .box:nth-child(even) .text {
            text-align: left;
        }
    
        .pict {
            text-align: center;
            width: 40vw;
            margin-top:10px;
            margin-bottom:10px;
            margin-left:10px;
            margin-right:10px;
        }
    
        .pict img {
            max-width: 300px;
            width: 100%;
            height:auto;
        }
    
        .box:nth-child(even) .pict {
            margin-left: 0;
            margin-right: 3%;
        }
    }
    
    
/* ============================================================
   04. 会員証画像（スマホ縦表示）
   @media max-600px
   ============================================================ */

@media screen and (max-width: 600px) {
        .fs-c-membershipCard__image {
            transform: rotate(-90deg);
        }
    }
    
    
/* ============================================================
   05. カートページ レイアウト
   @media min-900px グリッド
   ============================================================ */

@media screen and (min-width: 900px) {
        .fs-body-cart .fs-l-main .fs-l-cart__contentsArea{
        -ms-grid-columns: 1fr 320px; grid-template-columns: 1fr 320px; 
        } 
    }

    
/* ============================================================
   06. 商品詳細ページ 商品説明
   .ec-productRole__description
   ============================================================ */

.ec-productRole__description {
        font-family: Yu Mincho,YuMincho,ヒラギノ明朝 ProN W3,Hiragino Mincho ProN,HG明朝E,ＭＳ Ｐ明朝,ＭＳ 明朝,serif; 
        font-size: 115%;
    }



/* ============================================================
   07. PageTopボタン位置
   ssf-PageTop（FutureShop標準）
   ============================================================ */

/* ============================================
   PAGE TOPボタンの位置（FutureShop標準）
   - WordPressトップページのデザインに合わせて本来のサイズで表示
   - ボタン全体・装飾の上書きはせず、FutureShop標準の挙動に任せる
   2026/05/03 調整
   ============================================ */
.ssf-PageTop {
  position: fixed !important;
  right: 2vw !important;
  bottom: 5vh !important;
  z-index: 1 !important;
}

    
    
/* ============================================================
   08. ヒーローセクション
   .hero-Sub_TextWrapper
   ============================================================ */

.hero-Sub_TextWrapper {
        font-family: Yu Mincho,YuMincho,ヒラギノ明朝 ProN W3,Hiragino Mincho ProN,HG明朝E,ＭＳ Ｐ明朝,ＭＳ 明朝,serif; 
        font-size: 115%;
    }
    
    
/* ============================================================
   09. 商品詳細 おすすめ商品
   fs-c-featuredProduct カルーセル
   ============================================================ */

/* 商品詳細 おすすめ商品 */
    .fs-c-featuredProduct .fs-c-productListCarousel__list__item {
        width: 56.4vw !important;
        max-width: none;
    }
    .fs-c-productListCarousel [class^=fs-c-button--] {font-size: 8vw;}
    .fs-l-productLayout .fs-c-featuredProduct {margin-top:8vw;}
    
    @media screen and (min-width: 600px) {
    .fs-c-featuredProduct .fs-c-productListCarousel__list__item {width: 300px !important;}
    .fs-c-productListCarousel [class^=fs-c-button--] {font-size: 36px;}
    .fs-l-productLayout .fs-c-featuredProduct {margin-top:75px;}
    }


    
/* ============================================================
   10. ログイン連携
   fs-c-accountService
   ============================================================ */

/* ログイン連携 */
    .fs-c-accountService__page--linkedAccounts .fs-c-accountService__pageLink__label::before {
        content: "\e93f";
    }


    
/* ============================================================
   11. 今までにチェックした商品
   _rcmdjp_display 表示崩れ対策
   ============================================================ */

/*--- 「今までにチェックした商品」表示崩れ対策 (2026/04 追記) ---*/
    /* PC（769px以上）: 3列 */
    #_rcmdjp_display_1 .doc-Ranking_Items.swiper-wrapper,
    #_rcmdjp_display_1 .swiper-wrapper {
      display: grid !important;
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 24px !important;
      flex-wrap: nowrap !important;
    }
    #_rcmdjp_display_1 .swiper-slide {
      width: auto !important;
      margin: 0 !important;
    }
    /* スマホ（768px以下）: 2列 */
    @media screen and (max-width: 768px) {
      #_rcmdjp_display_1 .doc-Ranking_Items.swiper-wrapper,
      #_rcmdjp_display_1 .swiper-wrapper {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
      }
    }



/* ============================================================
   12. AnyGift フローティング
   anygift-floating-cart
   ============================================================ */

/* スマホ・基本（バッチリ調整済み） */
.anygift-floating-cart {
  right: 2vw !important;
  bottom: calc(5vh + 80px) !important;
}

/* PC（768px以上）: 横位置を微調整 */
@media screen and (min-width: 768px) {
  .anygift-floating-cart {
    right: calc(2vw + 7px) !important;  /* 10px → 5px へ（少し右へ） */
    bottom: calc(5vh + 110px) !important;
  }
}



/* ============================================================
   13. ヘッダー カゴバッジ
   ssh-Utility_ItemBadge
   ============================================================ */

/* ============================================
   ヘッダー「カゴを見る」のバッジ（カート内商品数）
   - 初期は非表示にしてちらつき防止
   - JSが1以上を検知したときだけ表示
   2026/05/02 追加
   ============================================ */

/* バッジの親（リンク要素）を相対配置に */
.ssh-Utility_Item-cart > a {
  position: relative !important;
  display: inline-block !important;
}

/* ヘッダーバッジのデザイン（初期は非表示） */
.ssh-Utility_ItemBadge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  min-width: 18px !important;
  height: 18px !important;
  padding: 0 4px !important;
  background-color: #d42828 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: bold !important;
  line-height: 18px !important;
  text-align: center !important;
  border-radius: 9px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  z-index: 10 !important;
  display: none;  /* ★初期は非表示 */
}

/* JSが「表示すべき」と判定したクラスを付けたときだけ表示 */
.ssh-Utility_ItemBadge.is-visible {
  display: block !important;
}



/* ============================================================
   14. レビュー評価（星マーク）
   ey-rating（商品一覧）
   ============================================================ */

/* ========================================
   永楽屋オンラインショップ
   商品一覧 レビュー評価表示（v2: 星マーク対応）
   ======================================== */

.ey-rating {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 4px;
  font-family: "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", serif;
  font-size: 13px;
  line-height: 1.4;
  color: #3a3a3a;
}

/* レビュー0件の商品では非表示 */
.ey-rating--count-0 {
  display: none !important;
}

/* ----------------------------------------
   星マーク本体
   data-rating（0.0〜5.0、0.5刻み）に応じて
   琥珀色の塗りを width で制御
---------------------------------------- */
.ey-rating__stars {
  --ey-star-color: #c9985a;        /* 琥珀色（塗りつぶし） */
  --ey-star-bg: #e8e0d0;           /* 薄琥珀（背景・空の星） */
  --ey-star-size: 14px;
  position: relative;
  display: inline-block;
  width: calc(var(--ey-star-size) * 5);
  height: var(--ey-star-size);
  font-size: 0;                    /* 隙間防止 */
  line-height: 1;
}

/* 背景：空の星×5個（薄琥珀色） */
.ey-rating__stars::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M7 .8l1.94 4.05 4.46.5-3.31 3.04.92 4.41L7 10.55l-3.99 2.25.92-4.41L.6 5.35l4.46-.5z' fill='%23e8e0d0'/></svg>");
  background-size: var(--ey-star-size) var(--ey-star-size);
  background-repeat: repeat-x;
}

/* 前景：評価点に応じた幅で琥珀色の星を上書き */
.ey-rating__stars::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M7 .8l1.94 4.05 4.46.5-3.31 3.04.92 4.41L7 10.55l-3.99 2.25.92-4.41L.6 5.35l4.46-.5z' fill='%23c9985a'/></svg>");
  background-size: var(--ey-star-size) var(--ey-star-size);
  background-repeat: repeat-x;
}

/* data-rating の値に応じて幅を制御（0.5刻み） */
.ey-rating__stars[data-rating="0.5"]::after { width: 10%; }
.ey-rating__stars[data-rating="1.0"]::after { width: 20%; }
.ey-rating__stars[data-rating="1.5"]::after { width: 30%; }
.ey-rating__stars[data-rating="2.0"]::after { width: 40%; }
.ey-rating__stars[data-rating="2.5"]::after { width: 50%; }
.ey-rating__stars[data-rating="3.0"]::after { width: 60%; }
.ey-rating__stars[data-rating="3.5"]::after { width: 70%; }
.ey-rating__stars[data-rating="4.0"]::after { width: 80%; }
.ey-rating__stars[data-rating="4.5"]::after { width: 90%; }
.ey-rating__stars[data-rating="5.0"]::after { width: 100%; }

/* ----------------------------------------
   平均点の数値
---------------------------------------- */
.ey-rating__value {
  font-weight: 600;
  color: #8b6332;       /* 琥珀ダーク */
  letter-spacing: 0.02em;
}

/* ----------------------------------------
   件数
---------------------------------------- */
.ey-rating__count {
  color: #8a8a8a;
  font-size: 12px;
}
.ey-rating__count a {
  color: #8a8a8a;
  text-decoration: none;
  border-bottom: 1px dotted #c8c8c8;
  transition: color 0.2s, border-color 0.2s;
}
.ey-rating__count a:hover {
  color: #8b6332;
  border-bottom-color: #8b6332;
}

/* ----------------------------------------
   スマートフォン調整
---------------------------------------- */
@media screen and (max-width: 640px) {
  .ey-rating {
    font-size: 12px;
    gap: 4px;
  }
  .ey-rating__stars {
    --ey-star-size: 12px;
  }
  .ey-rating__count {
    font-size: 11px;
  }
}



/* ============================================================
   15. お気に入り 販売期間
   fs-c-salesPeriod__date
   ============================================================ */

/* お気に入りページの販売期間を商品詳細ページに合わせる */
.fs-c-salesPeriod__date {
  font-size: 1rem !important;
  font-family: inherit !important;
  letter-spacing: inherit !important;
  font-feature-settings: "palt", "kern" !important;
  border: 1px solid #ccc !important;
  padding: 8px 16px !important;
  text-align: center !important;
}

.fs-c-salesPeriod__date dt,
.fs-c-salesPeriod__date dd,
.fs-c-salesPeriod__date .fs-c-time,
.fs-c-salesPeriod__date .fs-c-timeJoint {
  font-family: inherit !important;
  font-size: inherit !important;
  display: inline !important;
  margin: 0 !important;
}

.fs-c-salesPeriod__date dt::after {
  content: " ";
}


/* ============================================================
   16. PCヘッダー フローティング
   ssh-Header_Fix（@media min-900px）
   ============================================================ */

/* ============================================
   PCヘッダーをフローティング表示（2026/05/05 追加）
   - スクロール時、ロゴと送料バナーは追従／ナビ帯はスクロールアウト
   - WordPress側追加CSSと同一内容
   ============================================ */
@media (min-width: 900px) {
  .ssh-Header_Fix {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    z-index: 100 !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  }
  /* Header_Fixが浮いた分の空きを、ヘッダー先頭に確保 */
  .ssh-Header::before {
    content: "";
    display: block;
    height: 176px;
  }
}


/* ============================================================
   17. カート割引情報
   fs-c-cartDiscountInfo（あと¥○○）
   ============================================================ */

/* カート割引情報「あと¥○○で送料無料です」の文字サイズ・太字解除・下余白 */
.fs-c-cartDiscountInfo .fs-c-cartDiscountInfo__info,
.fs-c-cartDiscountInfo__info {
    font-size: 1.2rem;
    font-weight: normal !important;
    margin-bottom: 0.8em;
    align-items: baseline;
}

/* 金額部分（¥3,600）のみ #CC5D65 で太字＆大きく */
.fs-c-cartDiscountInfo__more .fs-c-price,
.fs-c-cartDiscountInfo__more .fs-c-price__currencyMark,
.fs-c-cartDiscountInfo__more .fs-c-price__value {
    color: #CC5D65;
    font-weight: bold;
    font-size: 1.5rem;
}


/* ============================================================
   18. お支払い方法 注意書き
   fs-c-checkout-paymentMethod
   ============================================================ */

/* お支払い方法の利用可能金額注意書きを小さく */
.fs-c-checkout-paymentMethod__disabledMessage,
.fs-c-checkout-paymentMethod__disabledMessage font,
.fs-c-checkout-paymentMethod__disabledMessage * {
    font-size: 16px !important;
}


/* ============================================================
   19. チェックアウト リファインCSS
   fs-body-checkout 全体
   ============================================================ */

/* ===========================================================
   永楽屋 チェックアウト画面 リファインCSS
   対象: body[class*="fs-body-checkout"] 配下のみ
   方針: A方針（赤CTA専用）／C方針（明朝20px＋細い下線見出し）
        ／3階層ボタン構造／PC＋スマホ両対応
   =========================================================== */

[class*="fs-body-checkout"] {
  --eky-primary: #B40926;   /* 注文確定専用の朱赤 */
  --eky-ink: #111111;       /* 選択ボタン・主要テキスト */
  --eky-rule: #231815;      /* 罫線 */
  --eky-mute: #9E9E9F;      /* 補足テキスト */
}

/* ---- ページ見出し（ご注文手続き） ---- */
[class*="fs-body-checkout"] main h2.sw-Heading {
  font-size: 26px !important;
  letter-spacing: 0.18em !important;
  margin: 30px auto 28px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}

/* ---- セクション見出し：明朝20px・■廃止・下線で区切る ---- */

[class*="fs-body-checkout"] .fs-c-checkout-preview__title::before,
[class*="fs-body-checkout"] .fs-c-checkout-heading::before {
  content: "" !important;
  display: none !important;
}

/* ---- 2カラムレイアウト ---- */
[class*="fs-body-checkout"] .fs-l-checkout {
  display: flex !important;
  gap: 40px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}
[class*="fs-body-checkout"] .fs-l-checkout__mainColumn {
  flex: 1 1 auto;
  padding: 0 !important;
  width: auto !important;
}
[class*="fs-body-checkout"] .fs-l-checkout__sideColumn {
  flex: 0 0 320px;
  width: 320px !important;
  background: #FFFFFF !important;
  padding: 24px !important;
  border: 1px solid #E6E1DC !important;
  position: sticky !important;
  top: 20px !important;
  align-self: flex-start;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
[class*="fs-body-checkout"] .fs-l-checkout__mainColumn > * {
  margin-bottom: 40px !important;
}

/* ---- ①プライマリCTA（赤・注文を確定する） ---- */
[class*="fs-body-checkout"] .fs-c-button--confirmOrder.fs-c-button--primary {
  background: var(--eky-primary) !important;
  border: 1px solid var(--eky-primary) !important;
  color: #FFFFFF !important;
  height: 60px !important;
  line-height: 1 !important;
  padding: 0 16px !important;
  font-size: 18px !important;
  letter-spacing: 0.12em !important;
  border-radius: 2px !important;
  width: 100% !important;
  font-weight: 500 !important;
  transition: opacity .2s ease;
}
[class*="fs-body-checkout"] .fs-c-button--confirmOrder.fs-c-button--primary:hover {
  opacity: 0.9;
}

/* ---- ②セレクト系（黒塗り：お届け先リスト・カード情報・利用する） ---- */
[class*="fs-body-checkout"] .fs-c-button--chooseDestination.fs-c-button--standard,
[class*="fs-body-checkout"] .fs-c-button--inputCreditCardData.fs-c-button--standard,
[class*="fs-body-checkout"] .fs-c-button--useCoupon.fs-c-button--standard {
  background: var(--eky-ink) !important;
  border: 1px solid var(--eky-ink) !important;
  color: #FFFFFF !important;
  height: 44px !important;
  line-height: 1 !important;
  padding: 0 22px !important;
  font-size: 15px !important;
  letter-spacing: 0.08em !important;
  border-radius: 2px !important;
}

[class*="fs-body-checkout"] a.fs-c-button--multiDestination.fs-c-button--secondary {
  background: #333333 !important;
  border: 1px solid #333333 !important;
  color: #FFFFFF !important;
  padding: 14px 18px !important;
  font-size: 18px !important;
  letter-spacing: normal !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  display: inline-block;
}

/* ---- ③副操作（アウトライン：変更） ---- */
[class*="fs-body-checkout"] .fs-c-button--change--small.fs-c-button--standard {
  background: #333333 !important;
  border: 1px solid #333333 !important;
  color: #FFFFFF !important;
  height: 28px !important;
  padding: 5px 10px !important;
  font-size: 16px !important;
  letter-spacing: normal !important;
  border-radius: 0 !important;
}

[class*="fs-body-checkout"] .fs-c-button--change--small.fs-c-button--standard:hover {
  background: var(--eky-ink) !important;
  color: #FFFFFF !important;
}

/* ---- 入力フィールド ---- */
[class*="fs-body-checkout"] input[type="text"],
[class*="fs-body-checkout"] input[type="email"],
[class*="fs-body-checkout"] input[type="tel"],
[class*="fs-body-checkout"] textarea,
[class*="fs-body-checkout"] select {
  border: 1px solid #CCCCCC !important;
  border-radius: 2px !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  letter-spacing: 0.04em !important;
}

/* ---- サマリーパネル内見出し ---- */
[class*="fs-body-checkout"] .fs-l-checkout__sideColumn h2,
[class*="fs-body-checkout"] .fs-l-checkout__sideColumn h3 {
  font-size: 17px !important;
  margin: 0 0 16px !important;
  padding: 0 0 10px !important;
  border-bottom: 1px solid var(--eky-rule) !important;
}
[class*="fs-body-checkout"] .fs-l-checkout__sideColumn h2::before,
[class*="fs-body-checkout"] .fs-l-checkout__sideColumn h3::before {
  content: "" !important;
  display: none !important;
}

/* ---- スマホ対応（768px以下：右サマリーを下部固定化） ---- */
@media (max-width: 768px) {
  [class*="fs-body-checkout"] .fs-l-checkout {
    flex-direction: column !important;
    margin: 0 !important;
    gap: 0 !important;
    padding: 0 !important;
  }
  [class*="fs-body-checkout"] .fs-l-checkout__mainColumn {
    width: 100% !important;
    padding: 0 16px 140px !important; /* 下部固定バー分の余白 */
  }
  [class*="fs-body-checkout"] .fs-l-checkout__sideColumn {
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important;
    width: 100% !important;
    flex: none !important;
    border: none !important;
    border-top: 1px solid #E6E1DC !important;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.08) !important;
    padding: 12px 16px !important;
    z-index: 100;
  }
  [class*="fs-body-checkout"] .fs-c-checkout-preview__title,
  [class*="fs-body-checkout"] .fs-c-checkout-heading {
    font-size: 18px !important;
  }
  [class*="fs-body-checkout"] .fs-c-button--confirmOrder.fs-c-button--primary {
    height: 56px !important;
    font-size: 17px !important;
  }
}


/* ============================================================
   20. チェックアウト 見出し左寄せ
   [PATCH] preview__title
   ============================================================ */

/* ===========================================================
   [PATCH] 「お届け先」見出しを左寄せに（中央寄せ打ち消し）
   =========================================================== */
[class*="fs-body-checkout"] .fs-c-checkout-preview__title,
[class*="fs-body-checkout"] .fs-c-checkout-heading {
  font-family: "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;
  font-size: 20px !important;
  letter-spacing: 0.08em !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  padding: 0 0 10px !important;
  margin: 40px 0 20px !important;
  border-bottom: 1px solid var(--eky-rule) !important;
  display: block !important;
  text-align: left !important;
}


/* ============================================================
   21. お支払い金額エリア sticky
   fs-l-sticky / fs_orderTotalContainer
   ============================================================ */

/* お支払い金額エリア：PCのみ追従。ヘッダー（179px）の下に出るよう top をオフセット */
@media screen and (min-width: 769px) {
  .fs-l-sticky,
  #fs_orderTotalContainer.fs-l-checkout__sideColumn {
    position: sticky;
    top: 195px;           /* ヘッダー179px + 余白16px */
  }
}

/* スマホ・タブレット（768px以下）はフローティング解除 */
@media screen and (max-width: 768px) {
  .fs-l-sticky,
  #fs_orderTotalContainer.fs-l-checkout__sideColumn {
    position: static !important;
    top: auto !important;
  }
}


/* ============================================================
   22. カートページ 北海道沖縄注記
   cartDiscountInfo__note
   ============================================================ */

/* ====== カートページ：北海道・沖縄／再計算 注記の体裁調整 ====== */
/* 対象: ショッピングカートページのul.fs-c-cartDiscountInfo__note 内の li
   - 「北海道 沖縄 は別割引設定になります。」
   - 「上記割引はお届け先ごとに再計算されます。」
*/

/* ① 文字サイズを 14px に縮小（現状 19.2px） */
.fs-c-cartDiscountInfo__note,
.fs-c-cartDiscountInfo__note li {
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* ③ 「北海道」「沖縄」の太字を解除して他のテキストと同じ太さに */
.fs-c-cartDiscountInfo__note li b,
.fs-c-cartDiscountInfo__note li strong {
  font-weight: normal !important;
}

/* 余白の調整（任意：見た目のバランスを整える） */
.fs-c-cartDiscountInfo__note li {
  margin: 2px 0 !important;
  padding-left: 1em !important;
}


/* ============================================================
   23. お支払い金額 フローティング最終版
   @media min-769px / max-768px
   ============================================================ */

/* ====================================================== */
/*   お支払い金額エリア：フローティング設定（最終版）       */
/* ====================================================== */

/* PC（769px以上）のみ追従。固定ヘッダー(179px)分オフセット */
@media screen and (min-width: 769px) {
  div#fs_orderTotalContainer.fs-l-checkout__sideColumn,
  body div.fs-l-sticky {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 200px !important;     /* ヘッダー179px + 余白21px */
    z-index: 1 !important;
  }
}

/* スマホ・タブレット（768px以下）はフローティング解除 */
@media screen and (max-width: 768px) {
  div#fs_orderTotalContainer.fs-l-checkout__sideColumn,
  body div.fs-l-sticky {
    position: static !important;
    top: auto !important;
  }
}


/* ============================================================
   24. z-index 整理
   Header_Fix / Navigation_Container
   ============================================================ */

/* フローティングヘッダーは前面・お支払い金額は背面に明示 */
.ssh-Header_Fix {
  z-index: 1000 !important;
}
.ssn-Navigation_Container {
  z-index: 1001 !important;
}


/* ============================================================
   25. チェックアウト 配送内容
   shippingParcel（大江ノ郷スタイル）
   ============================================================ */

/* ====================================================================== */
/*  チェックアウト「配送内容〜送料(1個口分)」を大江ノ郷スタイルに統一        */
/* ====================================================================== */

/* ---- 親セクション全体を罫線で囲む（大江ノ郷の枠囲み再現） ---- */
.fs-c-checkout-shippingParcel {
  border: 1px solid #e6e1dc !important;
  border-radius: 4px !important;
  padding: 16px !important;
  margin-top: 12px !important;
  background: #fff !important;
}

/* ---- 商品リスト（ul）の箇条書きマーカーを消す ---- */
ul.fs-c-checkout-shippingParcel__productList {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ---- 各商品アイテムを「サムネイル＋商品情報」横並びレイアウトに ---- */

ul.fs-c-checkout-shippingParcel__productList > li.fs-c-checkout-shippingParcel__product::marker {
  content: '' !important;
}
ul.fs-c-checkout-shippingParcel__productList > li.fs-c-checkout-shippingParcel__product:last-child {
  border-bottom: none !important;
}

/* ---- サムネイルサイズ調整（160px → 64pxに縮小して大江ノ郷風に） ---- */


/* ---- 商品情報の縦並び ---- */

.fs-c-checkout-shippingParcel__productName {
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
}
.fs-c-checkout-shippingParcel__productPrice,
.fs-c-checkout-shippingParcel__productSelection,
.fs-c-checkout-shippingParcel__productQuantity {
  font-size: 13px !important;
  color: #444 !important;
  line-height: 1.6 !important;
}

/* ---- 「お届け希望日／時間帯／詳細指定事項欄」エリアを薄グレーで囲む ---- */
.fs-c-checkout-shippingDetail__deliveryDetail,
.fs-c-checkout-shippingDetail__deliveryDetailPreview {
  background: #f7f7f7 !important;
  padding: 16px !important;
  border-radius: 4px !important;
  margin: 12px 0 !important;
  position: relative !important;
}

/* ---- 「お届け日時を指定する」ボタンを右下に配置 ---- */
.fs-c-checkout-shippingDetail__deliveryDetail .fs-c-button--change,
.fs-c-checkout-shippingDetail__deliveryDetailPreview + button,
.fs-c-checkout-shippingDetail__deliveryDetail button[class*="change"],
.fs-c-checkout-shippingDetail__deliveryDetail .fs-c-button--standard {
  display: inline-block !important;
  float: right !important;
  margin-top: 8px !important;
}

/* ---- 「送料(1個口分)」の小枠囲みを解除し、プレーン表示に ---- */
.fs-c-checkout-shippingDetail [class*="shippingFee"],
.fs-c-checkout-shippingDetail__shippingFee {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin-top: 12px !important;
  display: block !important;
  font-size: 14px !important;
}
.fs-c-checkout-shippingDetail [class*="shippingFee"] dt,
.fs-c-checkout-shippingDetail [class*="shippingFee"] dd {
  display: inline !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}
.fs-c-checkout-shippingDetail [class*="shippingFee"] dt::after {
  content: ' ' !important;
}

/* ---- スマホ対応（768px以下）：余白を少し詰める ---- */
@media screen and (max-width: 768px) {
  .fs-c-checkout-shippingParcel {
    padding: 12px !important;
  }
  ul.fs-c-checkout-shippingParcel__productList > li.fs-c-checkout-shippingParcel__product {
    gap: 12px !important;
    padding: 10px 0 !important;
  }
  
  .fs-c-checkout-shippingDetail__deliveryDetail,
  .fs-c-checkout-shippingDetail__deliveryDetailPreview {
    padding: 12px !important;
  }
}


/* ============================================================
   26. チェックアウト サムネイル拡大
   115pxへ拡大・フォント統一・1行表示
   ============================================================ */

/* ========================================================== */
/*  追加修正：サムネイル拡大 & フォント統一 & 単価+数量を1行に   */
/* ========================================================== */

/* ① サムネイルを 64px → 115px（約180%）に拡大 */
.fs-c-checkout-shippingParcel__productImage {
  flex: 0 0 115px !important;
  width: 115px !important;
  margin: 0 !important;
}
.fs-c-checkout-shippingParcel__productImage__image {
  display: block !important;
  width: 115px !important;
  height: 115px !important;
  object-fit: cover !important;
}

/* ② 商品名・単価・数量・手提げ袋のフォント体裁を完全統一 */
.fs-c-checkout-shippingParcel__productName,
.fs-c-checkout-shippingParcel__productName__name,
.fs-c-checkout-shippingParcel__productSelection,
.fs-c-checkout-shippingParcel__productSelection__choice,
.fs-c-checkout-shippingParcel__unitPrice,
.fs-c-checkout-shippingParcel__quantity,
.fs-c-checkout-shippingParcel__listedOptionPrice,
.fs-c-checkout-shippingParcel__listedOptionPrice * {
  font-family: inherit !important;     /* 親要素と同じフォントに統一 */
  font-size: 16px !important;          /* 必要に応じて 13px / 15px に調整可 */
  font-weight: 400 !important;         /* 商品名の太字も解除 */
  color: #333 !important;
  line-height: 1.7 !important;
}

/* ③ 「単価」と「数量」を同じ行に並べ、間に全角スペースを挿入 */
/* 親(productInfo)を grid から普通のブロックに戻して扱いやすくする */
.fs-c-checkout-shippingParcel__productInfo {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
}

/* unitPrice と quantity を inline-flex にして横並び */
.fs-c-checkout-shippingParcel__unitPrice {
  display: inline-flex !important;
  align-items: baseline !important;
  margin: 0 !important;
  padding: 0 !important;
}
.fs-c-checkout-shippingParcel__quantity {
  display: inline-flex !important;
  align-items: baseline !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* unitPrice の直後に全角スペースを挿入 */
.fs-c-checkout-shippingParcel__unitPrice::after {
  content: "\3000" !important;   /* 全角スペース（U+3000）*/
  display: inline !important;
  white-space: pre !important;
}

/* unitPrice 内の通貨記号と金額がブロック表示で改行されているのを横並びに直す */
.fs-c-checkout-shippingParcel__unitPrice .fs-c-price,
.fs-c-checkout-shippingParcel__unitPrice .fs-c-price__currencyMark,
.fs-c-checkout-shippingParcel__unitPrice .fs-c-price__value,
.fs-c-checkout-shippingParcel__unitPrice .fs-c-productPrice__main__price {
  display: inline !important;
}

/* quantity 内のラベル・値も横並びに */
.fs-c-checkout-shippingParcel__quantity > * {
  display: inline !important;
}

/* unitPrice + quantity をひとまとめにする行ボックス（任意の余白調整） */
.fs-c-checkout-shippingParcel__unitPrice,
.fs-c-checkout-shippingParcel__quantity {
  vertical-align: baseline;
}

/* ④ サムネイルを大きくしたぶん、列の縦位置を上揃えに変更（任意） */
ul.fs-c-checkout-shippingParcel__productList > li.fs-c-checkout-shippingParcel__product {
  display: flex !important;
  align-items: flex-start !important;
  gap: 16px !important;
  padding: 12px 0 !important;
  margin: 0 !important;
  list-style: none !important;
  border-bottom: 1px solid #eee !important;
}

/* ⑤ スマホ対応：拡大したサムネイルで横幅が窮屈にならないよう微調整 */
@media screen and (max-width: 768px) {
  .fs-c-checkout-shippingParcel__productImage,
  .fs-c-checkout-shippingParcel__productImage__image {
    flex-basis: 100px !important;
    width: 100px !important;
    height: 100px !important;
  }
}


/* ============================================================
   27. チェックアウト 配送内容 フォント統一
   YuGothic系に強制統一
   ============================================================ */

/* ============================================================ */
/*  配送内容セクション内のフォントを完全統一（ゴシック系に揃える）  */
/* ============================================================ */

/* 商品エリアの全テキストをbodyと同じYuGothic系に強制統一 */
.fs-c-checkout-shippingParcel__product,
.fs-c-checkout-shippingParcel__product *,
.fs-c-checkout-shippingParcel__productInfo,
.fs-c-checkout-shippingParcel__productInfo *,
.fs-c-checkout-shippingParcel__productName,
.fs-c-checkout-shippingParcel__productName *,
.fs-c-checkout-shippingParcel__productSelection,
.fs-c-checkout-shippingParcel__productSelection *,
.fs-c-checkout-shippingParcel__unitPrice,
.fs-c-checkout-shippingParcel__unitPrice *,
.fs-c-checkout-shippingParcel__quantity,
.fs-c-checkout-shippingParcel__quantity *,
.fs-c-checkout-shippingParcel__listedOptionPrice,
.fs-c-checkout-shippingParcel__listedOptionPrice * {
  font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, "ヒラギノ角ゴ Pro N", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #333 !important;
  line-height: 1.7 !important;
}

/* ↑の中でも明朝体が当たっていた価格系クラスは特に強く上書き */
.fs-c-checkout-shippingParcel .fs-c-price,
.fs-c-checkout-shippingParcel .fs-c-price *,
.fs-c-checkout-shippingParcel .fs-c-productPrice,
.fs-c-checkout-shippingParcel .fs-c-productPrice *,
.fs-c-checkout-shippingParcel .fs-c-price__currencyMark,
.fs-c-checkout-shippingParcel .fs-c-price__value,
.fs-c-checkout-shippingParcel .fs-c-productPrice__addon {
  font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, "ヒラギノ角ゴ Pro N", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}


/* ============================================================
   28. チェックアウト お届け希望日 余白
   deliveryDetail スリム化
   ============================================================ */

/* ============================================================ */
/*  お届け希望日／時間帯エリアの上下余白をスリム化                  */
/* ============================================================ */

/* ① 親の灰色枠（外側の余白）を縮小：16px → 14px 16px */


/* ② 内側のdl（preview）の二重paddingとmarginを解除 */
dl.fs-c-checkout-shippingDetail__deliveryDetailPreview,
.fs-c-checkout-shippingDetail__deliveryDetail .fs-c-pairList {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  row-gap: 4px !important;
  gap: 4px !important;
}

/* ③ dt/dd の上下余白も最小限に */
.fs-c-checkout-shippingDetail__deliveryDetailPreview dt,
.fs-c-checkout-shippingDetail__deliveryDetailPreview dd,
.fs-c-checkout-shippingDetail__deliveryDetail dt,
.fs-c-checkout-shippingDetail__deliveryDetail dd {
  margin: 0 !important;
  padding: 0 8px 0 0 !important;
  line-height: 1.6 !important;
}

/* ④ 「変更」ボタンの上余白を縮小し、ブロック内の右下にコンパクトに配置 */
.fs-c-checkout-shippingDetail__deliveryDetail .fs-c-checkout-shippingDetail__button,
.fs-c-checkout-shippingDetail__deliveryDetail .fs-c-buttonContainer--changeSmall {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  text-align: right !important;
}

/* ⑤ スマホ対応 */
@media screen and (max-width: 768px) {
  
}


/* ============================================================
   29. チェックアウト レイアウト調整4点
   shippingInfo / shippingCarrier
   ============================================================ */

/* ============================================================ */
/*  チェックアウトページ レイアウト調整（4点まとめ）              */
/* ============================================================ */

/* ① 「お届け先リストから選ぶ」ボタンの上下に余白を追加 */
.fs-c-checkout-shippingInfo__button.fs-c-buttonContainer--chooseDestination {
  margin: 16px 0 24px !important;   /* 上16px / 下24px */
  padding: 0 !important;
}

/* ② 「配送方法」見出しの上にしっかり余白 */
.fs-c-checkout-shippingDetail__shippingCarrier {
  margin-top: 24px !important;
}


/* ③ 「変更」ボタンを「お届け希望日／時間帯」dlの右側に並べる */
/*    親(.deliveryDetail)をflexにして dl(左) + ボタン(右) を横並びに */
.fs-c-checkout-shippingDetail__deliveryDetail {
  padding: 14px 16px !important;
  background: #f7f7f7 !important;
  border-radius: 4px !important;
  margin: 12px 0 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.fs-c-checkout-shippingDetail__deliveryDetail
  > dl.fs-c-checkout-shippingDetail__deliveryDetailPreview {
  flex: 1 1 auto !important;
  margin: 0 !important;
}

.fs-c-checkout-shippingDetail__deliveryDetail
  > .fs-c-checkout-shippingDetail__button,
.fs-c-checkout-shippingDetail__deliveryDetail
  > .fs-c-buttonContainer--changeSmall {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
}

/* ④ 「配送日の指定がない場合、最短日のお届けとなります。」を枠囲み表示 */
/*    DOM上はクラスなしの <p> なので、親（shippingCarrier）配下のpを対象に */
.fs-c-checkout-shippingDetail__shippingCarrier > p,
.fs-c-checkout-shippingDetail > p {
  border: 1px solid #e6e1dc !important;
  border-radius: 4px !important;
  padding: 12px 16px !important;
  margin: 12px 0 !important;
  background: #fff !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* ⑤ スマホ対応：横並びを縦並びに切替 */
@media screen and (max-width: 768px) {
  .fs-c-checkout-shippingDetail__deliveryDetail {
    padding: 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .fs-c-checkout-shippingDetail__deliveryDetail
    > .fs-c-checkout-shippingDetail__button,
  .fs-c-checkout-shippingDetail__deliveryDetail
    > .fs-c-buttonContainer--changeSmall {
    text-align: right !important;
    margin-top: 8px !important;
  }
}


/* ============================================================
   30. チェックアウト 配送日案内 枠囲み
   shippingCarrier__comment
   ============================================================ */

/* ============================================================ */
/*  ① 「配送日の指定がない場合〜」を確実に枠囲み                  */
/*    DOM階層: .shippingCarrier__comment > .shippingCarrierComment > span > p */
/* ============================================================ */
.fs-c-checkout-shippingDetail__shippingCarrier__comment,
.fs-c-checkout-shippingCarrierComment {
  border: 1px solid #e6e1dc !important;
  border-radius: 4px !important;
  padding: 12px 16px !important;
  margin: 12px 0 !important;
  background: #fff !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* 内側のspan/pのデフォルト余白を打ち消し（枠との余白を二重にしない） */
.fs-c-checkout-shippingDetail__shippingCarrier__comment span,
.fs-c-checkout-shippingDetail__shippingCarrier__comment p,
.fs-c-checkout-shippingCarrierComment span,
.fs-c-checkout-shippingCarrierComment p {
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  display: block !important;
}


/* ============================================================
   31. チェックアウト 見出し本文余白
   outline__title / shippingCarrier__label
   ============================================================ */

/* ============================================================ */
/*  ② 見出しと本文の間に行間（余白）を追加                       */
/* ============================================================ */

/* 「配送内容」見出し直下に余白 */
.fs-c-checkout-shippingDetail__outline__title.fs-c-checkout-heading-lv2 {
  margin: 0 0 10px !important;
}

/* 「配送内容」本文（本日12時〜）の上にも少し余白 */
.fs-c-checkout-shippingDetail__deliveryDateInfo {
  margin-top: 4px !important;
  margin-bottom: 12px !important;
}

/* 「配送方法」見出し直下に余白 */
.fs-c-checkout-shippingDetail__shippingCarrier__label.fs-c-checkout-heading-lv2 {
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin: 0 0 10px !important;
}

/* 「配送方法」本文（宅配便）の余白も整える */
.fs-c-checkout-shippingDetail__shippingCarrier__value {
  margin-bottom: 10px !important;
}


/* ============================================================
   32. チェックアウト 配送日案内 枠一重化
   shippingCarrier__comment 確定版
   ============================================================ */

/* ============================================================ */
/*  ① 「配送日の指定がない場合〜」の枠を一重に                    */
/*    外側のクラスだけに枠を残し、内側のクラスは枠なしに           */
/* ============================================================ */
.fs-c-checkout-shippingDetail__shippingCarrier__comment {
  border: 1px solid #e6e1dc !important;
  border-radius: 4px !important;
  padding: 12px 16px !important;
  margin: 12px 0 !important;
  background: #fff !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}

/* 内側の .fs-c-checkout-shippingCarrierComment は枠を解除 */
.fs-c-checkout-shippingCarrierComment {
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}


/* ============================================================
   33. チェックアウト 複数届け先ボタン右寄せ
   addDestinationButton
   ============================================================ */

/* ============================================================ */
/*  ② 「いくつかのお届け先に送る」ボタンを右寄せに                */
/*    現状：左右marginが均等に300px入って中央配置になっている     */
/* ============================================================ */
.fs-c-checkout-addDestinationButton.fs-c-buttonContainer--addDestinationButton {
  display: flex !important;
  justify-content: flex-end !important;
  margin: 0 0 40px !important;
}

.fs-c-checkout-addDestinationButton.fs-c-buttonContainer--addDestinationButton
  > .fs-c-button--multiDestination {
  margin: 0 !important;        /* 左右の自動余白を打ち消す */
  margin-left: auto !important; /* 念のため右に押し出す */
}


/* ============================================================
   34. チェックアウト 商品名太字復元
   productName 太字
   ============================================================ */

/* ============================================================ */
/*  ③ 商品名のみ太字に戻す                                       */
/*    他（包装・価格・数量・手提げ袋）は normal のまま保持        */
/* ============================================================ */
.fs-c-checkout-shippingParcel__productName,
.fs-c-checkout-shippingParcel__productName *,
.fs-c-checkout-shippingParcel__productName__name {
  font-weight: 700 !important;
}


/* ============================================================
   35. チェックアウト 配送日案内 文字サイズ
   shippingCarrier__comment フォント
   ============================================================ */

/* ============================================================ */
/*  「配送日の指定がない場合〜」の文字サイズをお届け希望日と統一    */
/* ============================================================ */
.fs-c-checkout-shippingDetail__shippingCarrier__comment,
.fs-c-checkout-shippingDetail__shippingCarrier__comment span,
.fs-c-checkout-shippingDetail__shippingCarrier__comment p,
.fs-c-checkout-shippingCarrierComment,
.fs-c-checkout-shippingCarrierComment span,
.fs-c-checkout-shippingCarrierComment p {
  font-size: 16px !important;
  font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, "ヒラギノ角ゴ Pro N", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
}


/* ============================================================
   36. カートページ ご注文内容テーブル
   fs-c-cartTable 統一
   ============================================================ */

/* ============================================================ */
/*  「ご注文内容」テーブルを配送内容セクションと同じテイストに統一    */
/* ============================================================ */

/* テーブル全体：YuGothic / 14px / normal にリセット */
.fs-c-cartTable,
.fs-c-cartTable *,
.fs-c-cartTable th,
.fs-c-cartTable td,
.fs-c-cartTable .fs-c-price,
.fs-c-cartTable .fs-c-price *,
.fs-c-cartTable .fs-c-price__currencyMark,
.fs-c-cartTable .fs-c-price__value,
.fs-c-cartTable .fs-c-productPrice,
.fs-c-cartTable .fs-c-productPrice * {
  font-family: YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo,
    "ヒラギノ角ゴ Pro N", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #333 !important;
  line-height: 1.7 !important;
}

/* ヘッダー行（商品名・数量・小計・ポイント）は太字を維持 */
.fs-c-cartTable th.fs-c-cartTable__headerCell {
  font-weight: 700 !important;
  background: #f4f4f4 !important;
}

/* 商品名のみ太字 */
.fs-c-cartTable .fs-c-cartTable__productName,
.fs-c-cartTable .fs-c-cartTable__productName * {
  font-weight: 700 !important;
}


/* ============================================================
   37. カートページ サムネイル統一
   cartTable productImage 115px
   ============================================================ */

/* ============================================================ */
/*  サムネイル画像のサイズも配送内容セクションと揃える             */
/* ============================================================ */
.fs-c-cartTable .fs-c-cartTable__productImage,
.fs-c-cartTable [class*="productImage"] {
  width: 115px !important;
}
.fs-c-cartTable .fs-c-cartTable__productImage img,
.fs-c-cartTable [class*="productImage"] img {
  width: 115px !important;
  height: 115px !important;
  object-fit: cover !important;
}


/* ============================================================
   38. カートページ サムネイル スマホ対応
   @media max-768px
   ============================================================ */

/* ============================================================ */
/*  スマホ対応                                                    */
/* ============================================================ */
@media screen and (max-width: 768px) {
  .fs-c-cartTable .fs-c-cartTable__productImage,
  .fs-c-cartTable [class*="productImage"] {
    width: 100px !important;
  }
  .fs-c-cartTable .fs-c-cartTable__productImage img,
  .fs-c-cartTable [class*="productImage"] img {
    width: 100px !important;
    height: 100px !important;
  }
}


/* ============================================================
   39. チェックアウト 右側ボタン群統一
   200px幅・明朝・::beforeでラベル変更
   ============================================================ */

/* ===== 右側ボタン群を共通幅で統一する基本スタイル ===== */
/* 対象: 依頼主を変更する / 変更（お届け先）/ お届け先リストから選ぶ / お届け日時を指定する / 変更（お届け日時） */
#fs_button_changeBuyer .fs-c-button--change--small,
#fs_button_changeShippingAddress .fs-c-button--change--small,
#fs_button_selectShippingAddress .fs-c-button--standard,
.fs-c-checkout-shippingDetail__button.fs-c-buttonContainer--changeSmall
  .fs-c-button--change--small {
  position: relative !important;
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  height: 38px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-size: 16px !important;
  font-family: "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3",
               "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝",
               "ＭＳ 明朝", serif !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

/* ===== お客様の情報の「変更」 → 「依頼主を変更する」 ===== */
#fs_button_changeBuyer .fs-c-button--change--small .fs-c-button__label {
  visibility: hidden !important;
  font-size: 0 !important;
}

#fs_button_changeBuyer .fs-c-button--change--small::before {
  content: "依頼主を変更する";
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  font-size: 16px !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  color: #fff !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* ===== お届け希望日・お届け時間帯の「変更」 → 「お届け日時を指定する」 ===== */
.fs-c-checkout-shippingDetail__button.fs-c-buttonContainer--changeSmall
  .fs-c-button--change--small .fs-c-button__label {
  visibility: hidden !important;
  font-size: 0 !important;
}

.fs-c-checkout-shippingDetail__button.fs-c-buttonContainer--changeSmall
  .fs-c-button--change--small::before {
  content: "お届け日時を指定する";
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  font-size: 16px !important;
  font-family: inherit !important;
  font-weight: 400 !important;
  color: #fff !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

/* ===== 右寄せの確実化（4つのボタン） ===== */
#fs_button_changeBuyer,
#fs_button_changeShippingAddress,
#fs_button_selectShippingAddress,
.fs-c-checkout-shippingDetail__button.fs-c-buttonContainer--changeSmall {
  display: flex !important;
  justify-content: flex-end !important;
  margin-left: auto !important;
}


/* ============================================================
   40. チェックアウト クーポン・変更ボタン
   couponCodeInput / previewAndEdit
   ============================================================ */

/* ============================================================
   ご注文手続きページ ボタンサイズ統一
   「依頼主を変更する」と同サイズ・同デザインに揃える
   対象：クーポン「利用する」／ポイント「変更」／通信欄「変更」
   ============================================================ */

/* --- クーポン「利用する」ボタン（行末で右詰め） --- */
/* 入力欄とボタンを縦並びにして、ボタンを右端に寄せる */


/* --- ポイント「変更」／通信欄「変更」ボタン --- */
/* どちらも .fs-c-checkout-previewAndEdit__button 配下にある変更ボタン */
.fs-c-checkout-previewAndEdit__button.fs-c-buttonContainer--changeSmall
  .fs-c-button--change--small.fs-c-button--standard {
  width: 200px !important;
  min-width: 200px !important;
  height: 38px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #fff !important;
  background-color: #333 !important;
  border: 1px solid #333 !important;
  border-radius: 0 !important;
}

/* --- ご注文内容「変更」ボタン（aタグ）も同仕様に揃える --- */
.fs-c-checkout-preview__button.fs-c-buttonContainer--changeSmall
  a.fs-c-button--change--small.fs-c-button--standard {
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  height: 38px !important;
  padding: 0 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: #fff !important;
  background-color: #333 !important;
  border: 1px solid #333 !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* ============================================================
   41. チェックアウト クーポン欄レイアウト
   ラベル＋入力＋利用するを横一列
   ============================================================ */

/* ============================================================
   クーポン欄レイアウト：ラベル＋入力欄＋「利用する」を横一列
   （参考画像のレイアウトに合わせる）
   ============================================================ */
.fs-c-checkout-couponCodeInput {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: nowrap !important;
}

/* ラベル「クーポンコード入力」 */
.fs-c-checkout-couponCodeInput__title {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: max-content !important;
  white-space: nowrap !important;
  font-size: 16px !important;     /* 本文と同じサイズに統一 */
  font-weight: 700 !important;
}

/* 入力欄（伸縮して余白を埋める） */
.fs-c-checkout-couponCodeInput__input,
.fs-c-couponCodeInput__input {
  flex: 1 1 auto !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
}
.fs-c-checkout-couponCodeInput__input input,
.fs-c-couponCodeInput__input input {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ボタンコンテナ */
.fs-c-couponCodeInput__button.fs-c-buttonContainer--useCoupon {
  display: block !important;
  width: auto !important;
  text-align: left !important;
  margin-top: 8px;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* 「利用する」ボタン本体（参考画像準拠：高さ44px・横幅は文字＋余白） */
.fs-c-button--useCoupon.fs-c-button--standard {
  width: auto !important;
  min-width: 120px !important;
  max-width: none !important;
  height: 44px !important;
  padding: 0 28px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #fff !important;
  background-color: #111 !important;
  border: 1px solid #111 !important;
  border-radius: 0 !important;
}


/* ============================================================
   42. チェックアウト ポイント欄余白
   pointInfo previewAndEdit__info
   ============================================================ */

/* ============================================================
   ポイント（利用ポイント）欄：上下余白を控えめに
   ※強調を残すため適度な余白（14px）は維持
   ============================================================ */
.fs-c-checkout-pointInfo .fs-c-checkout-previewAndEdit__info {
  min-height: 0 !important;          /* 元は150px固定だったため解除 */
  padding: 14px 16px !important;     /* 上下14px・左右16px */
}


/* ============================================================
   43. フッター オンラインショップご利用案内
   eirakuya-howto（4×2カードグリッド）
   ============================================================ */

/* ============================================
   永楽屋 フッター オンラインご利用案内
   - 7枚のカードを4×2段（PC）／2列（スマホ）で表示
   - フッターパーツ「footer_howto」内で使用
   2026/05/06 追加
   ============================================ */
.eirakuya-howto {
  box-sizing: border-box;
  font-family: "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  color: #111;
  -webkit-font-smoothing: subpixel-antialiased;
}

.eirakuya-howto *,
.eirakuya-howto *::before,
.eirakuya-howto *::after {
  box-sizing: border-box;
}

.eirakuya-howto__inner {
  max-width: 1100px;
  margin: 0 auto;
}

/* ===== カードグリッド ===== */
/* スマホ：2列 */
.eirakuya-howto__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* カード */
.eirakuya-howto__card {
  display: block;
  background: #fff;
  border: 1px solid #c4c4c4;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color 0.4s ease, transform 0.4s ease;
  position: relative;
}

.eirakuya-howto__card:hover {
  border-color: #6B5D3B;
  text-decoration: none;
}

@media (prefers-reduced-motion: no-preference) {
  .eirakuya-howto__card:hover {
    transform: translateY(-2px);
  }
}

/* 画像エリア（16:9） */
.eirakuya-howto__card-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f4efe8;
}

.eirakuya-howto__card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* テキストエリア */
.eirakuya-howto__card-text {
  position: relative;
  padding: 12px 24px;
  text-align: center;
  background: #fff;
}

.eirakuya-howto__card-text::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 1px solid #6B5D3B;
  border-right: 1px solid #6B5D3B;
  transform: translateY(-50%) rotate(45deg);
  transition: right 0.4s ease;
}

.eirakuya-howto__card:hover .eirakuya-howto__card-text::after {
  right: 8px;
}

.eirakuya-howto__card-title {
  display: block;
  font-family: "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: #111;
  margin: 0;
}

/* ===== タブレット 600px〜：4列固定 ===== */
@media (min-width: 600px) {
  .eirakuya-howto__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }

  .eirakuya-howto__card-text {
    padding: 12px 28px;
  }

  .eirakuya-howto__card-text::after {
    right: 14px;
    width: 7px;
    height: 7px;
  }

  .eirakuya-howto__card-title {
    font-size: 14px;
  }
}

/* ===== デスクトップ 900px〜 ===== */
@media (min-width: 900px) {
  .eirakuya-howto__grid {
    gap: 16px;
  }

  .eirakuya-howto__card-text {
    padding: 14px 32px;
  }

  .eirakuya-howto__card-text::after {
    right: 16px;
    width: 8px;
    height: 8px;
  }

  .eirakuya-howto__card-title {
    font-size: 15px;
    letter-spacing: 0.06em;
  }
}


/* ========================================
   商品マーク表示修正（システムマーク用）
   予約商品・温度帯マーク等のシステムマークを
   全画面で商品詳細画面と同等のデザインに統一
   ======================================== */

/* カート・注文手続き画面のシステムマーク */
.fs-c-cartTable .fs-c-cartTable__message,
.fs-c-checkout-preview .fs-c-cartTable__message,
.fs-c-orderTotalTable .fs-c-cartTable__message {
  display: inline-block;
  padding: 5.6px;
  margin: 2px 4px 2px 0;
  font-size: 14px !important;
  line-height: 14px !important;
  background-color: #ffffff !important;
  border: 1px solid #c4c4c4;
  color: #000000 !important;
  border-radius: 3px;
  white-space: nowrap;
}

/* 商品一覧・詳細画面の予約商品マーク（念のため統一） */
.fs-c-mark--preorder {
  display: inline-block;
  padding: 5.6px;
  font-size: 14px;
  line-height: 14px;
  background-color: #ffffff;
  border: 1px solid #c4c4c4;
  color: #000000;
  border-radius: 3px;
  white-space: nowrap;
}