/* ご注文手続き（パソコン）：右側の「ご注文内容」の箱がスクロールで押し下げられ続け、
   ページが下へ伸び続ける不具合の対策。箱はブラウザの sticky で画面についてくる（2026-11-13） */
@media only screen and (min-width: 768px) {
  .ec-orderRole__summary {
    margin-top: 0 !important;
    position: sticky;
    top: 16px;
    align-self: flex-start;
  }
}

/* スマホの見た目の直し（2026-11-14・開店のあとの社長のチェック） */
/* ① 選び方の「このタイプ」を途中で切らない */
.jsd-d-rank__here { display: inline-block; white-space: nowrap; }
/* ② 使い方動画の手順の丸数字：まん中にして少し大きく */
.jsd-v-stepbox .jsd-v-step__num { display: inline-flex; align-items: center; justify-content: center; text-align: center; font-size: 18px; line-height: 1; }
/* ③ 商品の画像：読み込みの途中で縦に伸びて見えないように（横長の画像でも枠の中におさめる） */
.ec-sliderItemRole .item_visual img { object-fit: contain; }
@media only screen and (max-width: 767px) {
  /* ④ 商品一覧の「全て｜〇〇」と見出しを、件数の文字と同じ位置に */
  .ec-searchnavRole__topicpath, .jsd-listTitle { padding-left: 20px; padding-right: 20px; }
  /* ⑤ 使い方動画の手順：スマホは横長の枠なので、PC用の改行を使わない */
  .jsd-v-step br { display: none; }
  /* ⑥ 商品の画像の下の丸（何枚目か）：枠で切れないように、枠の外に並べる */
  .ec-sliderItemRole .item_visual.slick-slider { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .ec-sliderItemRole .item_visual .slick-list { border: 1px solid rgb(227, 241, 250); border-radius: 18px; overflow: hidden; background: #fff; }
  .ec-sliderItemRole .item_visual .slick-dots { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 0; margin: 12px 0 0; padding: 0; }
  .ec-sliderItemRole .item_visual .slick-dots li { margin: 0 3px; }
  /* ⑦ メニュー（三）：Safariで下のほうが隠れて押せない → 画面の高さに合わせて、下に余白 */
  .ec-drawerRole { top: 0; bottom: 0; height: auto; -webkit-overflow-scrolling: touch; }
  .ec-drawerRole::after { content: ""; display: block; height: calc(96px + env(safe-area-inset-bottom, 0px)); }
}

@media only screen and (max-width: 767px) {
  /* ⑧ ご注文手続き（スマホ）：合計とボタンの箱を、お問い合わせの下・特商法の表示の上へ（確認画面は動かさない＝特商法の表示はボタンの前のまま） */
  #page_shopping .ec-orderRole { display: flex; flex-direction: column; }
  #page_shopping .ec-orderRole__detail { display: contents; }
  #page_shopping .ec-orderRole__detail > div { order: 1; }
  #page_shopping .ec-orderRole__summary { order: 2; }
  #page_shopping .ec-orderRole__detail > .ec-orderConfirm ~ .ec-orderConfirm { order: 3; }
  /* ⑨ 商品一覧の札（カビ取り侍｜ソフトタイプ など）を1行に */
  .jsd-pcard .jsd-chip { white-space: nowrap; font-size: 10px; letter-spacing: -0.01em; padding-left: 6px; padding-right: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; box-sizing: border-box; }
}