@charset "UTF-8";
/* ==========================================================================
   ショッピングカート（/p/cart）調整用CSS
   ・本番HTMLは編集せず、このCSSと cart-custom.js だけで見た目を調整する
   ・すべて body.fs-body-cart 配下にスコープ（他ページに影響させない）
   ・接頭辞は既存の自社パーツ（ino-fc / ino-rc）に合わせて ino- を使用
   --------------------------------------------------------------------------
   目次
     0. 変数
     1. レイアウト土台（PC2カラムのはみ出し修正）
     2. カート表：商品名の縦積み解消／列幅
     3. 削除・あとで買うボタンの整理
     4. 合計テーブル
     5. 決済エリア（ページ内に残す）＋下部の追随バー
     6. スマホ：1商品=1カード
     7. 印刷・アクセシビリティ
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 変数
   -------------------------------------------------------------------------- */
body.fs-body-cart {
  --ino-cart-accent: #ff8b34;        /* サイトのプライマリ（オレンジ） */
  --ino-cart-accent-dark: #ef7616;
  --ino-cart-text: #251e1c;
  --ino-cart-sub: #767676;
  --ino-cart-line: #e0ddd8;
  --ino-cart-bg-soft: #faf8f4;
  --ino-cart-radius: 10px;
  /* 決済バナー（会員登録済み／初めてのお客様）の最大幅。
     画像の原寸が 284x170 なので、既定はそれ以上引き伸ばさない。
     大きさを変えたいときはこの1か所だけ触ればよい */
  --ino-cart-paybtn-max: 284px;
  /* SP固定バーの実測値。cart-custom.js が実測して上書きする */
  --ino-cart-bar-h: 0px;

  /* Chrome のフォントブースト（長文ブロックの自動拡大）を止める。
     長い商品名だけ1.6倍に膨らむのを防ぐ。none ではなく 100% にして
     ユーザーのズームは殺さない */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* --------------------------------------------------------------------------
   1. レイアウト土台
   既存CSSの問題:
     ・fs_itou.css  .fs-l-pageMain{max-width:740px}
     ・fs_itou.css  .fs-body-cart .fs-l-cart__mainColumn{width:740px}
     ・fs_itou.css  #fs-totalsArea-wrapper{width:310px!important; left:-18px}
   → グリッド枠(720px)より中身(740+280)が大きく、サイドカラムが枠外へはみ出す。
     ここでグリッドに収まる形へ戻す。
   -------------------------------------------------------------------------- */
@media screen and (min-width: 960px) {
  /* 定期カートページ・商品ページのフリーパーツに
       .fs-l-pageMain { max-width: 800px !important; }
     が入っている。800pxだとカート表の商品名列が潰れて1文字ずつ改行される
     （実測: 商品名の幅0px）ので、カートページに限って打ち消す。
     セレクタの詳細度はこちらが上なので !important 同士でも勝つ */
  body.fs-body-cart .fs-l-pageMain {
    max-width: 1100px !important;
    margin-left: auto;
    margin-right: auto;
  }
  body.fs-body-cart .fs-l-cart__contentsArea {
    grid-template-columns: minmax(0, 1fr) 320px !important;
    grid-template-rows: auto !important;   /* fs_original.css の 410px/60px 固定行を解除 */
    grid-column-gap: 24px !important;
    align-items: start;
  }
  body.fs-body-cart .fs-l-cart__mainColumn {
    width: auto !important;
    min-width: 0;
  }
  /* サイドカラムは枠線を外して「カードの積み重ね」に */
  body.fs-body-cart #fs-totalsArea-wrapper.fs-l-cart__sideColumn {
    width: auto !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    align-self: start !important;
  }
  body.fs-body-cart #fs-cartTotals-container {
    border: 1px solid var(--ino-cart-line);
    border-radius: var(--ino-cart-radius);
    padding: 12px 14px;
    background: #fff;
  }
}

/* --------------------------------------------------------------------------
   2. カート表：商品名の縦積み解消／列幅
   既存CSSの問題:
     ・fs_itou.css .fs-c-cartTable__product{display:flex}
       → テーマ側の grid(80px 1fr) が無効化され、商品名ブロックが最小幅まで
         潰れて1～2文字ずつ改行される（＝スクリーンショットの症状）
     ・fs_itou.css .fs-c-cartTable__headerCell{width:0}
     ・fs_itou.css .fs-c-cartTable__{headerCell,dataCell}--quantity{width:30px!important}
   -------------------------------------------------------------------------- */
body.fs-body-cart .fs-c-cartTableContainer {
  padding: 0;
  border: none;
}

@media screen and (min-width: 601px) {
  body.fs-body-cart .fs-c-cartTable {
    table-layout: fixed;   /* 列幅を宣言どおりに固定する */
    width: 100%;
    border-collapse: collapse;
  }
  body.fs-body-cart .fs-c-cartTable__headerCell {
    width: auto !important;
    padding: 10px 8px;
    font-size: 1.3rem;
    font-weight: bold;
    white-space: nowrap;
    background: var(--ino-cart-bg-soft);
    border: 1px solid var(--ino-cart-line);
  }
  /* 列幅は % で持つ。px固定にすると、表が想定より狭いときに
     固定分を引いた残りが商品名列に回らず0pxまで潰れる。
     数量は ＋／－ ステッパーが入るので広めに取る。
     756px時 ≒ 商品名348 / 数量129 / 小計114 / ポイント68 / 操作98 */
  body.fs-body-cart .fs-c-cartTable__headerCell--product { width: auto !important; }
  body.fs-body-cart .fs-c-cartTable__headerCell--quantity,
  body.fs-body-cart .fs-c-cartTable__dataCell--quantity  { width: 17% !important; }
  body.fs-body-cart .fs-c-cartTable__headerCell--subtotal,
  body.fs-body-cart .fs-c-cartTable__dataCell--subtotal  { width: 15% !important; }
  body.fs-body-cart .fs-c-cartTable__headerCell--point,
  body.fs-body-cart .fs-c-cartTable__dataCell--point     { width: 9% !important; }
  body.fs-body-cart .fs-c-cartTable__headerCell--action,
  body.fs-body-cart .fs-c-cartTable__dataCell--action    { width: 13% !important; }

  body.fs-body-cart .fs-c-cartTable__dataCell {
    padding: 14px 8px;
    border: 1px solid var(--ino-cart-line);
    vertical-align: middle;
  }
  body.fs-body-cart .fs-c-cartTable__dataCell--product { vertical-align: top; }

  /* 商品セル：画像 + 情報の2カラムに戻す。min-width:0 が折返し正常化の要 */
  body.fs-body-cart .fs-c-cartTable__product {
    display: grid !important;
    /* 画像トラックも縮められるようにする。84px固定だと、セルが狭いときに
       画像がセルからはみ出し、商品名側が0pxまで潰れる */
    grid-template-columns: minmax(0, 84px) minmax(0, 1fr);
    grid-gap: 12px;
    align-items: start;
  }
  body.fs-body-cart .fs-c-cartTable__productImage {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
  }
  body.fs-body-cart .fs-c-cartTable__productInfo {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;   /* これが無いとグリッド項目が縮まず、隣を押し潰す */
  }
}

body.fs-body-cart .fs-c-cartTable__productImage__image {
  width: 100%;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--ino-cart-line);
}

/* 商品名：1文字改行を止めて素直に折り返す */
body.fs-body-cart .fs-c-cartTable__productName,
body.fs-body-cart .fs-c-cartTable__productName.fs-c-listedProductName {
  min-width: 0;
}
body.fs-body-cart .fs-c-listedProductName__name,
body.fs-body-cart .fs-c-cartTable__productName__name {
  display: block;
  width: auto !important;
  max-width: 100%;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: normal;
  overflow-wrap: anywhere;
  line-break: strict;
  font-size: 1.4rem;
  line-height: 1.65;
  font-weight: bold;
  text-decoration: none;
}
body.fs-body-cart .fs-c-listedProductName__name:hover { text-decoration: underline; }

body.fs-body-cart .fs-c-listedProductName__variation {
  display: inline-block;
  margin: 0 0 4px;
  font-size: 1.1rem;
  color: var(--ino-cart-sub);
}

/* 選択オプション（了承しました／◯◯:2個 など）はタグ表示にまとめる */
body.fs-body-cart .fs-c-listedProductName__selection {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 6px 0 0;
}
body.fs-body-cart .fs-c-listedProductName__selection__choice {
  display: inline-block;
  padding: 2px 8px 1px;
  border: 1px solid var(--ino-cart-line);
  border-radius: 999px;
  background: var(--ino-cart-bg-soft);
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--ino-cart-sub);
}

/* 単価：fs_itou.css の 30px は表内では大きすぎるので抑える */
body.fs-body-cart .fs-c-cartTable__unitPrice {
  margin-top: 8px;
  align-items: baseline;
  gap: 4px;
}
body.fs-body-cart .fs-c-cartTable__unitPrice .fs-c-price__value {
  font-size: 1.8rem !important;
  font-weight: bold;
}
body.fs-body-cart .fs-c-cartTable__price .fs-c-price__value {
  font-size: 1.8rem;
  font-weight: bold;
}

/* 数量セレクト／入力（ステッパーが無いときの素の見た目） */
body.fs-body-cart .fs-c-cartTable__quantity,
body.fs-body-cart .fs-c-cartTable__dataCell--quantity .fs-c-quantity {
  max-width: none;   /* fs_style.css / fs_theme.css の max-width:5em を解除 */
  margin: 0 auto;
}
body.fs-body-cart .fs-c-cartTable__quantity select,
body.fs-body-cart .fs-c-cartTable__quantity input {
  width: 100%;
  min-width: 0;
  max-width: 80px;
  padding: 6px 4px;
  border: 1px solid var(--ino-cart-line);
  border-radius: 6px;
  font-size: 1.4rem;
  text-align: center;
}

/* 数量の ＋／－ ステッパー（cart-custom.js が .ino-cart-qty で囲う）
     [ － | 数量 | ＋ ]
   中の select / input は futureshop の元の要素をそのまま使っている */
body.fs-body-cart .ino-cart-qty {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 132px;
  height: 40px;
  margin: 0 auto;
  box-sizing: border-box;
  border: 1px solid var(--ino-cart-line);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
body.fs-body-cart .ino-cart-qty__btn {
  position: relative;   /* ＋／－ の線（::before / ::after）の基準 */
  flex: 0 1 34px;   /* 列が極端に狭いときはボタン側から縮め、数字を残す */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  min-width: 22px;   /* 表が狭いときもボタンが潰れすぎないように */
  margin: 0;   /* fs_itou_sp.css の button への margin 指定に巻き込まれないように */
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--ino-cart-bg-soft);
  color: var(--ino-cart-text);
  font-family: inherit;
  font-size: 0;   /* 記号は文字ではなく下の線で描く（文字化け対策） */
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;   /* 連打でダブルタップズームしないように */
  transition: background-color .15s, color .15s;
}
body.fs-body-cart .ino-cart-qty__btn--minus { border-right: 1px solid var(--ino-cart-line); }
body.fs-body-cart .ino-cart-qty__btn--plus  { border-left: 1px solid var(--ino-cart-line); }

/* ＋／－ の記号は線で描く。
   記号の文字（U+2212 など）をJSから入れると、futureshop へアップロードした際の
   CP932変換で「?」に化けるため（本番でマイナスが「?」になる不具合が出た）。
   線なら文字コードに左右されず、色は currentColor でホバー時も追従する。 */
body.fs-body-cart .ino-cart-qty__btn::before,
body.fs-body-cart .ino-cart-qty__btn--plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  border-radius: 1px;
}
/* 横棒（＋・－ 共通） */
body.fs-body-cart .ino-cart-qty__btn::before {
  width: 12px;
  height: 2px;
  margin: -1px 0 0 -6px;
}
/* 縦棒（＋のみ） */
body.fs-body-cart .ino-cart-qty__btn--plus::after {
  width: 2px;
  height: 12px;
  margin: -6px 0 0 -1px;
}
body.fs-body-cart .ino-cart-qty__btn:hover:not(:disabled) {
  background: var(--ino-cart-accent);
  color: #fff;
}
body.fs-body-cart .ino-cart-qty__btn:disabled {
  color: #c9c4bb;
  cursor: default;
}
body.fs-body-cart .ino-cart-qty__btn:focus-visible {
  outline: 2px solid var(--ino-cart-accent);
  outline-offset: -2px;
}
/* 数値部分。select（1～9）と input（10以上）で見た目をそろえる */
body.fs-body-cart .ino-cart-qty select,
body.fs-body-cart .ino-cart-qty input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 24px;
  max-width: none;
  height: 100%;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;   /* fs_style.css の inset 影を解除 */
  color: var(--ino-cart-text);
  font-family: inherit;
  font-size: 1.6rem;   /* 16px未満だとiOSでフォーカス時に拡大される */
  font-weight: bold;
  text-align: center;
  text-align-last: center;
  -webkit-appearance: none;
  -moz-appearance: textfield;
  appearance: none;
}
body.fs-body-cart .ino-cart-qty select { cursor: pointer; }
body.fs-body-cart .ino-cart-qty select:focus,
body.fs-body-cart .ino-cart-qty input:focus {
  outline: none;
  background: #fffaf5;
}
body.fs-body-cart .ino-cart-qty input.is-error { background: #fcf5c2; }
/* 更新中（再描画待ち）は薄くして連打を防ぐ */
body.fs-body-cart .ino-cart-qty.is-busy { opacity: .55; }
body.fs-body-cart .ino-cart-qty.is-busy select,
body.fs-body-cart .ino-cart-qty.is-busy input { pointer-events: none; }
body.fs-body-cart .fs-c-cartTable__dataCell--quantity,
body.fs-body-cart .fs-c-cartTable__dataCell--subtotal,
body.fs-body-cart .fs-c-cartTable__dataCell--point { text-align: center; }

/* --------------------------------------------------------------------------
   3. 削除・あとで買うボタンの整理
   既存CSSの問題: fs_original.css .fs-c-button--plain span{color:#fff}
     → 背景が透明のボタンで白文字になり読めなくなるケースがある
   赤い塗りボタンをやめ、控えめなアウトラインにして誤タップを減らす
   -------------------------------------------------------------------------- */
body.fs-body-cart .fs-c-cartTable__actionButton {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
body.fs-body-cart .fs-c-cartTable__actionButton__container {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}
body.fs-body-cart .fs-c-cartTable__actionButton button,
body.fs-body-cart .fs-c-cartTable__dataCell--action button {
  width: 100% !important;
  min-width: 0;
  padding: 7px 6px 6px !important;
  background: #fff !important;
  border: 1px solid var(--ino-cart-line) !important;
  border-radius: 6px !important;
  color: var(--ino-cart-sub) !important;
  font-size: 1.2rem !important;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
body.fs-body-cart .fs-c-cartTable__actionButton button .fs-c-button__label,
body.fs-body-cart .fs-c-cartTable__dataCell--action button .fs-c-button__label {
  color: inherit !important;   /* 白文字になる既存指定を打ち消す */
  font-size: inherit !important;
  padding: 0 !important;
}
body.fs-body-cart .fs-c-cartTable__actionButton button:hover {
  background: var(--ino-cart-bg-soft) !important;
  border-color: #c9c4bb !important;
  color: var(--ino-cart-text) !important;
}
/* 削除だけは取り消せない操作なのでホバー時に赤く */
body.fs-body-cart .fs-c-button--cancel--cart:hover,
body.fs-body-cart .fs-c-button--removeFromCart:hover {
  border-color: #d0454a !important;
  color: #d0454a !important;
  background: #fff6f6 !important;
}

/* --------------------------------------------------------------------------
   4. 合計テーブル
   -------------------------------------------------------------------------- */
body.fs-body-cart .fs-c-orderTotalTable { width: 100%; }
body.fs-body-cart .fs-c-orderTotalTable th,
body.fs-body-cart .fs-c-orderTotalTable td {
  padding: 9px 4px;
  border-bottom: 1px dotted var(--ino-cart-line);
  font-size: 1.3rem;
}
body.fs-body-cart .fs-c-orderTotalTable tr:last-child th,
body.fs-body-cart .fs-c-orderTotalTable tr:last-child td { border-bottom: none; }
body.fs-body-cart .fs-c-orderTotalTable td { text-align: right; }
body.fs-body-cart .fs-c-orderTotalTable__mainRow th,
body.fs-body-cart .fs-c-orderTotalTable__mainRow td { font-weight: bold; }
body.fs-body-cart .fs-c-orderTotalTable__mainRow .fs-c-price__value {
  font-size: 2.2rem;
  font-weight: bold;
  color: #d0454a;
}

/* 送料までの残額表示 */
body.fs-body-cart .fs-c-cartDiscountInfo {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--ino-cart-line);
  border-radius: var(--ino-cart-radius);
  background: var(--ino-cart-bg-soft);
}
body.fs-body-cart .fs-c-cartDiscountInfo__info { font-size: 1.4rem; font-weight: bold; }
body.fs-body-cart .fs-c-cartDiscountInfo__note {
  margin: 6px 0 0;
  padding-left: 1.2em;
  font-size: 1.1rem;
  color: var(--ino-cart-sub);
}

/* 受注処理後の送料に関する注意文（cart-custom.js が末尾に足す）。
   文頭に「※」が入るので、リストの黒点は外して行頭までぶら下げる */
body.fs-body-cart .ino-cart-postageNote {
  list-style: none;
  margin: 8px 0 0 -1.2em;
  padding-top: 8px;
  border-top: 1px dotted var(--ino-cart-line);
  line-height: 1.7;
  text-indent: -1em;
  padding-left: 1em;   /* 折り返し行を「※」の後ろにそろえる */
}

/* 「ショッピングを続ける」
   cart-custom.js が .fs-c-cartDiscountInfo--postage の直下へ移動する */
body.fs-body-cart .fs-c-continueShopping.ino-cart-continue {
  margin: 14px 0 0;
  text-align: left;
}
body.fs-body-cart .ino-cart-continue .fs-c-button--continueShopping {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 12px 24px;
  border: 1px solid var(--ino-cart-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ino-cart-text);
  font-size: 1.35rem;
  line-height: 1;
  text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
body.fs-body-cart .ino-cart-continue .fs-c-button--continueShopping::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-right: 2px;
}
body.fs-body-cart .ino-cart-continue .fs-c-button--continueShopping:hover {
  background: var(--ino-cart-bg-soft);
  border-color: #c9c4bb;
}
body.fs-body-cart .ino-cart-continue .fs-c-button__label {
  color: inherit;
  padding: 0;
}
@media screen and (max-width: 600px) {
  body.fs-body-cart .ino-cart-continue .fs-c-button--continueShopping {
    display: flex;
    width: 100%;
    justify-content: center;
  }
}

/* --------------------------------------------------------------------------
   5. 決済エリア
      決済ブロック（このサイトでお支払い／Amazon Pay／Apple Pay）は
      #fs-totalsArea-wrapper 内の元の位置に **表示したまま** 残す。
      JSでDOMを動かさないので、外部SDKが描画するボタンにも触れない。
      画面下部には「商品合計＋ご注文手続きへ」の追随バーだけを出し、
      押すとページ内の決済ブロックまでスクロールして強調する。
   -------------------------------------------------------------------------- */

/* ---- ページ内の決済ブロック（サイドカラム内） -------------------------- */
body.fs-body-cart .fs-c-purchaseHere,
body.fs-body-cart .fs-c-payWithAmazon,
body.fs-body-cart .fs-c-applePay { margin: 0; }

/* PCのサイドカラムはカードの積み重ねにするので、決済ブロックにも枠を付ける。
   SPは1カラムで枠が冗長なうえ、内側パディングぶんバナーが小さくなるので付けない */
body.fs-body-cart #fs-checkout-payHere-container,
body.fs-body-cart #fs-checkout-amazon-container { margin: 16px 0 0; }
@media screen and (min-width: 960px) {
  body.fs-body-cart #fs-checkout-payHere-container,
  body.fs-body-cart #fs-checkout-amazon-container {
    padding: 14px;
    border: 1px solid var(--ino-cart-line);
    border-radius: var(--ino-cart-radius);
    background: #fff;
  }
}
body.fs-body-cart #fs-checkout-apple-container { margin: 16px 0 0; }

body.fs-body-cart .fs-c-purchaseHere__message p,
body.fs-body-cart .fs-c-payWithAmazon__message p {
  margin: 0 0 8px;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--ino-cart-sub);
}
body.fs-body-cart .fs-c-cartPayment__button { margin: 0 0 10px; }
body.fs-body-cart .fs-c-cartPayment__button:last-child { margin-bottom: 0; }
body.fs-body-cart .fs-c-cartPayment__button > a,
body.fs-body-cart .fs-c-cartPayment__button > button { display: block; width: 100%; }

/* 決済バナー画像。
   fs_itou_sp.css の .fs-c-button--image > img { width:100% !important } により
   SPで原寸284pxを超えて引き伸ばされ（=拡大でボケる）高さも膨らんでいた。
   max-width は width より優先されるので、!important 合戦をせずに原寸で止まる */
body.fs-body-cart .fs-c-button--image .fs-c-button__image,
body.fs-body-cart .fs-c-cartPayment__button img {
  display: block;
  width: 100%;
  max-width: var(--ino-cart-paybtn-max);
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
}
/* 会員でログイン済みのとき出る「このサイトでお支払い」テキストボタン */
body.fs-body-cart .fs-c-button--purchaseHere {
  display: block;
  width: 100%;
  padding: 16px 12px;
  border-radius: 8px;
  background: var(--ino-cart-accent);
  color: #fff;
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none !important;
}
body.fs-body-cart .fs-c-button--purchaseHere:hover { background: var(--ino-cart-accent-dark); }
body.fs-body-cart .fs-c-button--purchaseHere .fs-c-button__label {
  color: #fff !important;
  text-decoration: none !important;
}

/* ---- 画面下部の追随バー（ハンドルのみ）--------------------------------- */
body.fs-body-cart .ino-cart-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #fff;
  border-top: 1px solid var(--ino-cart-line);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, .12);
  padding-bottom: env(safe-area-inset-bottom);
  transition: transform .25s ease, opacity .25s ease;
}
body.fs-body-cart .ino-cart-cta *,
body.fs-body-cart .ino-cart-cta *::before { box-sizing: border-box; }

/* 決済ブロックが画面内に入ったら引っ込める（ボタンに重ならないように）。
   本文の下余白は据え置くので、出入りでページの高さは変わらない */
body.fs-body-cart .ino-cart-cta.is-hidden {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}

/* バーの中身。ページ内の決済ボタンと同じリンクを並べるので、
   バーからもそのまま注文手続きへ進める。
   ※ Amazon Pay / Apple Pay は外部SDKがshadow DOMで描画するため複製できない。
     それらはページ内の決済ブロックにのみ表示される */
body.fs-body-cart .ino-cart-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 10px 14px;
}
body.fs-body-cart .ino-cart-cta__total {
  display: flex;
  align-items: baseline;
  gap: 5px;
  flex: 0 0 auto;
  min-width: 0;
}
body.fs-body-cart .ino-cart-cta__totalLabel {
  font-size: 1.1rem;
  color: var(--ino-cart-sub);
  white-space: nowrap;
}
body.fs-body-cart .ino-cart-cta__totalValue {
  font-size: 2.1rem;
  font-weight: bold;
  color: #d0454a;
  line-height: 1.1;
  white-space: nowrap;
}
body.fs-body-cart .ino-cart-cta__totalTax { font-size: 1rem; color: var(--ino-cart-sub); }

/* ボタン置き場。1行に収まらない幅では自動で折り返して全幅になる */
body.fs-body-cart .ino-cart-cta__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex: 1 1 260px;
  min-width: 0;
}
body.fs-body-cart .ino-cart-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 13px 14px;
  border: none;
  border-radius: 999px;
  background: var(--ino-cart-accent);
  color: #fff;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(255, 139, 52, .35);
  transition: background-color .15s;
}
body.fs-body-cart .ino-cart-cta__btn:hover { background: var(--ino-cart-accent-dark); }
body.fs-body-cart .ino-cart-cta__btn:visited { color: #fff; }

/* 固定バーの高さぶん本文の下に余白を作り、フッターが隠れないようにする */
body.fs-body-cart {
  padding-bottom: calc(var(--ino-cart-bar-h) + 24px) !important;
}
/* 既存の追随パーツと重ならないよう、このページでは退避 */
body.fs-body-cart .ino-fc,
body.fs-body-cart .fixed-firstusercart,
body.fs-body-cart .fs-p-scrollingCartButton { display: none !important; }

/* ---- PC ---------------------------------------------------------------- */
@media screen and (min-width: 960px) {
  /* バーの中身をページ幅に合わせて中央寄せ */
  body.fs-body-cart .ino-cart-cta__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 12px 16px;
    flex-wrap: nowrap;
  }
  body.fs-body-cart .ino-cart-cta__totalValue { font-size: 2.6rem; }
  body.fs-body-cart .ino-cart-cta__actions { flex: 0 1 auto; }
  body.fs-body-cart .ino-cart-cta__btn {
    flex: 0 1 auto;
    padding: 14px 24px;
    font-size: 1.5rem;
  }
}

/* ---- SP／タブレット ----------------------------------------------------- */
@media screen and (max-width: 959px) {
  /* 1カラムなのでサイドカラムを全幅に */
  body.fs-body-cart #fs-totalsArea-wrapper.fs-l-cart__sideColumn {
    width: 100% !important;
    left: 0 !important;
    margin: 0 !important;
  }

  /* 「ログインしてご注文」「会員登録してのご注文」の2バナーを横並びにする。
     縦積みだと決済ブロックが縦に伸びすぎるため。
     画像は fs_itou_sp.css の width:100%!important でカラム幅に追従するので、
     ここでは列を2つに割るだけでよい */
  body.fs-body-cart:not(.fs-body-cartSubscribe) .fs-c-purchaseHere {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px;
  }
  body.fs-body-cart:not(.fs-body-cartSubscribe) .fs-c-purchaseHere__message {
    flex: 0 0 100%;
  }
  body.fs-body-cart:not(.fs-body-cartSubscribe) .fs-c-purchaseHere .fs-c-cartPayment__button {
    flex: 1 1 140px;   /* 極端に狭い端末では折り返して縦積みに戻る */
    min-width: 0;
    margin: 0;
  }
  /* 半分幅に収めるので、原寸284pxの上限はここでは効かせない */
  body.fs-body-cart:not(.fs-body-cartSubscribe) .fs-c-purchaseHere .fs-c-button__image {
    width: 100%;
    max-width: 100%;
  }
}

/* --------------------------------------------------------------------------
   5-2. 定期カート（body.fs-body-cartSubscribe）
   同じカートだが決済ボタンの構成が通常カートと違う。
     ログインしてご注文     = テキストボタン .fs-c-button--loginAndSubscribe
                              （fs_itou.css の .fs-c-button--primary{width:80%}）
     会員登録してのご注文   = 横長バナー 600x100 .fs-c-button--registerAndSubscribe
   縦長バナー2枚（284x170）を前提にした指定をここで打ち消す。
   -------------------------------------------------------------------------- */
body.fs-body-cartSubscribe {
  /* 横長バナーの原寸。284pxまで縮めると文字が読めなくなる */
  --ino-cart-paybtn-max: 600px;
}
/* 2つはボタンの種類が違うので横並びにせず縦に積む */
body.fs-body-cartSubscribe .fs-c-purchaseHere { display: block; }
/* テキストボタン。fs_itou.css の width:80% を打ち消して枠いっぱいに */
body.fs-body-cartSubscribe .fs-c-button--loginAndSubscribe {
  display: block;
  box-sizing: border-box;
  width: 100% !important;
  min-width: 0;
  margin: 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   6. スマホ：1商品=1カード（テーマの max-width:600px レイアウトを置き換え）
      各セルの見出しは cart-custom.js が data-ino-label で付与する
   -------------------------------------------------------------------------- */
@media screen and (max-width: 600px) {
  body.fs-body-cart .fs-c-cartTable,
  body.fs-body-cart .fs-c-cartTable > tbody { display: block; width: 100%; }
  body.fs-body-cart .fs-c-cartTable > thead { display: none; }

  body.fs-body-cart .fs-c-cartTable__row {
    display: block !important;
    width: 100%;
    margin: 0 0 12px;
    padding: 12px 14px 8px;
    border: 1px solid var(--ino-cart-line) !important;
    border-radius: var(--ino-cart-radius);
    background: #fff;
  }
  body.fs-body-cart .fs-c-cartTable__dataCell {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: auto !important;
    padding: 8px 0 !important;
    border: none !important;
    border-top: 1px dotted var(--ino-cart-line) !important;
    text-align: right;
    font-size: 1.3rem;
  }
  /* セル見出し（数量／小計／ポイント） */
  body.fs-body-cart .fs-c-cartTable__dataCell[data-ino-label]::before {
    content: attr(data-ino-label);
    flex: 0 0 auto;
    color: var(--ino-cart-sub);
    font-size: 1.2rem;
    text-align: left;
  }

  /* 商品セルはカードの見出しなので枠線なし */
  body.fs-body-cart .fs-c-cartTable__dataCell--product {
    display: block !important;
    padding: 0 0 6px !important;
    border-top: none !important;
    text-align: left;
  }
  body.fs-body-cart .fs-c-cartTable__product {
    display: grid !important;
    /* 画像トラックも縮められるようにする。84px固定だと、セルが狭いときに
       画像がセルからはみ出し、商品名側が0pxまで潰れる */
    grid-template-columns: minmax(0, 84px) minmax(0, 1fr);
    grid-gap: 12px;
    align-items: start;
  }
  body.fs-body-cart .fs-c-cartTable__productImage { grid-column: 1; grid-row: 1; }
  body.fs-body-cart .fs-c-cartTable__productInfo  { grid-column: 2; grid-row: 1; min-width: 0; }
  body.fs-body-cart .fs-c-listedProductName__name { font-size: 1.35rem; }
  body.fs-body-cart .fs-c-cartTable__unitPrice .fs-c-price__value { font-size: 1.6rem !important; }

  body.fs-body-cart .fs-c-cartTable__quantity,
  body.fs-body-cart .fs-c-cartTable__dataCell--quantity .fs-c-quantity {
    max-width: none;
    margin: 0 0 0 auto;   /* 小計と同じくカードの右端にそろえる */
  }
  /* カードの右側に寄せ、押しやすいよう少し大きく */
  body.fs-body-cart .ino-cart-qty {
    width: 132px;
    max-width: 132px;
    height: 42px;
    margin: 0;
  }
  body.fs-body-cart .ino-cart-qty__btn { flex-basis: 40px; width: 40px; }
  body.fs-body-cart .fs-c-cartTable__dataCell--subtotal .fs-c-price__value { font-size: 2rem; }

  /* 削除・あとで買うは横並びで小さく
     ※ fs_itou_sp.css が flex-direction:column !important を当てているため
        こちらも !important で上書きする */
  body.fs-body-cart .fs-c-cartTable__dataCell--action { display: block !important; }
  body.fs-body-cart .fs-c-cartTable__actionButton {
    flex-direction: row !important;
    gap: 8px;
  }
  body.fs-body-cart .fs-c-cartTable__actionButton button { font-size: 1.15rem !important; }

  body.fs-body-cart .fs-c-cartTableContainer { padding: 0; border: none; }
}

/* --------------------------------------------------------------------------
   7. 印刷・アクセシビリティ
   -------------------------------------------------------------------------- */
@media print {
  /* 追随バーは印刷しない（決済ブロックはページ内にあるのでそちらが出る） */
  body.fs-body-cart .ino-cart-cta { display: none !important; }
  body.fs-body-cart { padding-bottom: 0 !important; }
}

@media (prefers-reduced-motion: reduce) {
  body.fs-body-cart .ino-cart-cta,
  body.fs-body-cart .ino-cart-qty__btn { transition: none !important; }
}

body.fs-body-cart .ino-cart-cta__btn:focus-visible,
body.fs-body-cart .fs-c-cartTable__actionButton button:focus-visible {
  outline: 2px solid var(--ino-cart-accent);
  outline-offset: 2px;
}