/* ─────────────────────────────
   スマホで商品ページの文字が縦に並んでしまう問題を修正
───────────────────────────────*/
@media (max-width: 768px) {

  /* 文字を強制的に横書きにする */
  body,
  .fs-c-productDescription,
  .product-description,
  .fs-c-productDetail__spec,
  .fs-c-productDetail__detail {
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
  }

  /* brによる1文字ずつ縦落ち防止 */
  .product-description br,
  .fs-c-productDescription br {
    display: none;
  }
}

@media (max-width: 768px) {
  /* とにかく“縦書き化”を打ち消す */
  body,
  .fs-c-product,
  .fs-c-productDetail,
  .fs-c-productDescription,
  .product-description,
  [style*="writing-mode"],
  [class*="vertical"] {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
  }

  /* 価格まわり・リード文・分割案内などに横並びを強制 */
  .fs-c-productPrice,
  .fs-c-productPriceNote,
  .fs-c-productLead,
  .fs-c-productCaption,
  .fs-c-productDetail__spec,
  .fs-c-productDetail__detail {
    writing-mode: horizontal-tb !important;
    white-space: normal !important;
    word-break: keep-all !important;   /* 1文字折返し防止 */
    overflow-wrap: anywhere;           /* 狭い幅でも横に流す */
  }

  /* 1文字ずつ落としている <br> を無効化（必要なら外してOK） */
  .fs-c-productDescription br,
  .fs-c-productLead br,
  .fs-c-productPriceNote br {
    display: none;
  }
}

@media (max-width: 768px) {
  /* Paidy支払バッジ周りを強制横並び＋横書き */
  .paidy-checkout-button,
  .paidy-checkout-button *,
  .paidy-msg,
  .paidy-msg * {
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important; /* 改行禁止 */
    display: inline-flex !important;
    align-items: center;
    gap: 4px;
  }

  /* Paidyロゴが潰れないように */
  .paidy-msg img,
  .paidy-msg svg,
  .paidy-checkout-button img {
    display: inline-block !important;
    max-width: 70px !important; /* ロゴの横幅調整 */
    height: auto !important;
  }

  /* Paidyのテキストが縦に落ちる対策 */
  .paidy-msg br {
    display: none !important;
  }
}

/* ===== Paidy表示がスマホで縦落ち・ロゴ非表示になる対策 ===== */
@media (max-width: 768px) {

  /* 商品詳細エリア内は横書きを強制（スクリプト挿入要素も含めて上書き） */
  .fs-c-product,
  .fs-c-product * {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: normal !important;
  }

  /* 価格下の補足（分割案内）を横並びに固定 */
  .fs-c-productPriceNote,
  .fs-c-productPriceNote * {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
  }
  .fs-c-productPriceNote br { display: none !important; }

  /* Paidy関連の要素を確実に横並び＋ロゴ可視化 */
  .fs-c-product [class*="paidy"],
  .fs-c-product [class*="Paidy"] {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .fs-c-product [class*="paidy"] img,
  .fs-c-product [class*="paidy"] svg,
  .fs-c-product img[src*="paidy"],
  .fs-c-product svg[aria-label*="paidy"] {
    display: inline-block !important;
    max-height: 20px !important;
    height: 20px !important;
    width: auto !important;
    vertical-align: middle !important;
  }
  .fs-c-product [class*="paidy"] br { display: none !important; }
}

/* ─ 最終パッチ：価格下の補足行を確実に1行横表示 ─ */
@media (max-width: 768px) {
  .fs-c-productPriceNote,
  .fs-c-productPriceNote * {
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    display: inline !important;
    line-height: 1.6 !important;
    letter-spacing: normal !important;
  }
  .fs-c-productPriceNote br { display: none !important; }
}

/* ===== 最終パッチ：Paidy分割テキスト縦落ち対策（強制上書き） ===== */
@media (max-width: 768px) {

  /* Paidy関連要素すべてを横書き・横並びに */
  [id*="paidy"],
  [class*="paidy"],
  .fs-c-product [id*="paidy"],
  .fs-c-product [class*="paidy"] {
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    word-break: normal !important;
  }

  /* テキストの1文字ずつ改行を防止 */
  [id*="paidy"] br,
  [class*="paidy"] br {
    display: none !important;
  }

  /* ロゴを確実に表示 */
  [id*="paidy"] img,
  [id*="paidy"] svg {
    display: inline-block !important;
    width: auto !important;
    max-height: 20px !important;
    vertical-align: middle !important;
  }
}

/* === Paidyロゴが見えない対策（img/svgを確実に表示） === */
@media (max-width: 768px) {
  /* 価格下の補足エリア内の画像・SVGを強制可視化 */
  .fs-c-productPriceNote img,
  .fs-c-productPriceNote svg,
  .fs-c-product [class*="paidy"] img,
  .fs-c-product [class*="paidy"] svg,
  .fs-c-product img[src*="paidy"],
  .fs-c-product svg[aria-label*="paidy"] {
    display: inline-block !important;   /* ← inline-flex の上書き */
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    max-height: 20px !important;        /* お好みで 16–24px で調整可 */
    height: 20px !important;
    vertical-align: middle !important;
    margin-left: 4px;
  }
}

/* === 価格下の分割案内：子要素をリセットしてロゴを確実に表示 === */
@media (max-width: 768px) {

  /* 分割案内全体は横書き／テキストは通常の inline */
  .fs-c-productPriceNote,
  .fs-c-productPriceNote * {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: nowrap !important;
  }
  /* 子要素にかかっている inline-flex を打ち消す */
  .fs-c-productPriceNote * {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1.6 !important;
  }

  /* ロゴが img / svg の場合 */
  .fs-c-productPriceNote img,
  .fs-c-productPriceNote svg {
    display: inline-block !important;
    width: auto !important;
    height: 20px !important;     /* 16〜24pxでお好み調整可 */
    max-height: 24px !important;
    vertical-align: middle !important;
  }

  /* ロゴが background-image の span 等の場合 */
  .fs-c-productPriceNote [style*="background-image"] {
    display: inline-block !important;
    width: 72px !important;       /* 目安（小さければ 56px などに） */
    height: 20px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    vertical-align: middle !important;
  }

  /* 強制改行の無効化 */
  .fs-c-productPriceNote br { display: none !important; }
}

/* === Paidyロゴがスマホだけ出ない時の最終パッチ === */
@media (max-width: 768px) {

  /* 分割案内行：まず横書き＆改行禁止は維持 */
  .fs-c-productPriceNote,
  .fs-c-productPriceNote * {
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
    line-height: 1.6 !important;
  }

  /* ── ここから “隠し指定” を徹底解除 ── */
  .fs-c-productPriceNote * {
    display: inline !important;              /* inline-flexの影響を打消し */
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;             /* clip/absoluteで隠す対策 */
    clip: auto !important;
    clip-path: none !important;
    overflow: visible !important;
    max-width: none !important;
    max-height: none !important;
    height: auto !important;
  }

  /* 「hidden/visually-hidden/sp-hide」などの共通クラス名を強制解除 */
  .fs-c-productPriceNote [class*="hidden"],
  .fs-c-productPriceNote [class*="Hidden"],
  .fs-c-productPriceNote [class*="visually"],
  .fs-c-productPriceNote [class*="sp-hide"],
  .fs-c-productPriceNote [style*="display:none"] {
    display: inline-block !important;
  }

  /* 画像・SVG をロゴとして確実に表示 */
  .fs-c-productPriceNote img,
  .fs-c-productPriceNote svg,
  .fs-c-product [class*="paidy"] img,
  .fs-c-product [class*="paidy"] svg,
  .fs-c-product img[src*="paidy"],
  .fs-c-product svg[aria-label*="paidy"] {
    display: inline-block !important;
    width: auto !important;
    height: 20px !important;       /* 16–24pxで調整可 */
    vertical-align: middle !important;
  }

  /* 背景画像でロゴを出している場合（span等） */
  .fs-c-productPriceNote [style*="background-image"],
  .fs-c-product [class*="paidy"] [style*="background-image"] {
    display: inline-block !important;
    width: 72px !important;
    height: 20px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    vertical-align: middle !important;
  }

  /* 不要な <br> は無効化 */
  .fs-c-productPriceNote br { display: none !important; }
}

/* === 追加だけでOK：Paidyエリアを既存の全体上書きから保護し、ロゴを表示 === */
@media (max-width: 768px) {

  /* 価格下の補足行は横並び */
  .fs-c-productPriceNote { display: inline-flex !important; align-items: center !important; gap: 6px !important; }

  /* ─ Paidy を “保護” ─
     既存の .fs-c-product * による指定を、Paidy配下だけ上書き解除する */
  .fs-c-product [class*="paidy"],
  .fs-c-product [id*="paidy"],
  .fs-c-product [class*="paidy"] *,
  .fs-c-product [id*="paidy"] * {
    /* 文字方向は横／改行しない */
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    white-space: nowrap !important;

    /* 子要素にかかった inline-flex 等を無効化して表示 */
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1.4 !important;
  }

  /* 改行タグは無効化 */
  .fs-c-product [class*="paidy"] br,
  .fs-c-product [id*="paidy"] br { display: none !important; }

  /* 画像・SVG ロゴを確実に表示 */
  .fs-c-product [class*="paidy"] img,
  .fs-c-product [class*="paidy"] svg,
  .fs-c-product [id*="paidy"] img,
  .fs-c-product [id*="paidy"] svg {
    display: inline-block !important;
    height: 20px !important;   /* 16–24pxで調整可 */
    width: auto !important;
    vertical-align: middle !important;
  }

  /* 背景画像や疑似要素でロゴを出しているケース */
  .fs-c-product [class*="paidy"] [style*="background-image"],
  .fs-c-product [id*="paidy"] [style*="background-image"],
  .fs-c-product [class*="paidy"]::before,
  .fs-c-product [class*="paidy"]::after,
  .fs-c-product [id*="paidy"]::before,
  .fs-c-product [id*="paidy"]::after {
    content: "" !important;
    display: inline-block !important;
    width: 72px !important;     /* 必要に応じて 56–80px で調整 */
    height: 20px !important;
    background-size: contain !important;
    background-repeat: no-repeat !imp

/* ── 暫定：スマホで Paidy ロゴが出ない場合、テキストバッジを表示して空白を解消 ── */
@media (max-width: 768px) {

  /* 先に空白になっているロゴ用要素を非表示（空きスペースを消す） */
  .fs-c-productPriceNote [style*="background-image"],
  .fs-c-productPriceNote [class*="paidy"] img,
  .fs-c-productPriceNote [class*="paidy"] svg {
    display: none !important;
  }

  /* 代替の “Paidy” テキストバッジを文頭に追加 */
  .fs-c-productPriceNote::before {
    content: "Paidy";
    display: inline-block;
    padding: 2px 8px;
    margin-right: 8px;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    border: 1px solid #222;
    border-radius: 4px;
    vertical-align: middle;
  }
}

/* ===== スマホ：価格下の分割案内の先頭空白を除去し、簡易Paidyバッジを必ず表示 ===== */
@media (max-width: 768px) {

  /* 先頭の空要素（img/svg/背景span等で中身が無いプレースホルダ）を潰す */
  .fs-c-productPriceNote > *:first-child:empty,
  .fs-c-productPriceNote > *:first-child[style*="display:none"],
  .fs-c-productPriceNote > *:first-child[aria-hidden="true"],
  .fs-c-productPriceNote > *:first-child[style*="opacity:0"],
  .fs-c-productPriceNote > *:first-child[style*="visibility:hidden"],
  .fs-c-productPriceNote > *:first-child[style*="background-image"]:empty {
    display: none !important;
  }

  /* それでもロゴが無いときは “Paidy” テキストバッジを強制表示（確実に見える） */
  .fs-c-productPriceNote {
    position: relative !important;
  }
  .fs-c-productPriceNote::before {
    content: "Paidy";
    display: inline-block !important;
    padding: 2px 8px;
    margin-right: 8px;
    font-size: 12px;
    line-height: 1 !important;
    font-weight: 700;
    border: 1px solid #222;
    border-radius: 4px;
    vertical-align: middle;
  }

  /* もし “なら月々…” が別の箱に入っているケースにも保険を掛ける */
  .fs-c-productLead::before,
  .fs-c-productCaption::before {
    content: "Paidy";
    display: inline-block !important;
    padding: 2px 8px;
    margin-right: 8px;
    font-size: 12px;
    line-height: 1 !important;
    font-weight: 700;
    border: 1px solid #222;
    border-radius: 4px;

/* ===== スマホ：価格下の分割案内の先頭空白を除去し、簡易Paidyバッジを必ず表示 ===== */
@media (max-width: 768px) {

  /* 先頭の空要素（img/svg/背景span等で中身が無いプレースホルダ）を潰す */
  .fs-c-productPriceNote > *:first-child:empty,
  .fs-c-productPriceNote > *:first-child[style*="display:none"],
  .fs-c-productPriceNote > *:first-child[aria-hidden="true"],
  .fs-c-productPriceNote > *:first-child[style*="opacity:0"],
  .fs-c-productPriceNote > *:first-child[style*="visibility:hidden"],
  .fs-c-productPriceNote > *:first-child[style*="background-image"]:empty {
    display: none !important;
  }

  /* それでもロゴが無いときは “Paidy” テキストバッジを強制表示（確実に見える） */
  .fs-c-productPriceNote {
    position: relative !important;
  }
  .fs-c-productPriceNote::before {
    content: "Paidy";
    display: inline-block !important;
    padding: 2px 8px;
    margin-right: 8px;
    font-size: 12px;
    line-height: 1 !important;
    font-weight: 700;
    border: 1px solid #222;
    border-radius: 4px;
    vertical-align: middle;
  }

  /* もし “なら月々…” が別の箱に入っているケースにも保険を掛ける */
  .fs-c-productLead::before,
  .fs-c-productCaption::before {
    content: "Paidy";
    display: inline-block !important;
    padding: 2px 8px;
    margin-right: 8px;
    font-size: 12px;
    line-height: 1 !important;
    font-weight: 700;
    border: 1px solid #222;
    border-radius: 4px;
    vertical-align: middle;
  }
}

/* ===== スマホ：Paidyロゴが出ないときの確実表示（代替） ===== */
@media (max-width: 768px) {

  /* 1) 既存の「空のロゴ要素」を消して余白をなくす */
  .fs-c-productPriceNote [class*="paidy"],
  .fs-c-productPriceNote [id*="paidy"],
  .fs-c-productLead     [class*="paidy"],
  .fs-c-productLead     [id*="paidy"],
  .fs-c-productCaption  [class*="paidy"],
  .fs-c-productCaption  [id*="paidy"] {
    display: none !important;
  }

  /* 2) 「価格下の補足行」の先頭にロゴバッジを差し込む（どれかにヒット） */
  .fs-c-productPriceNote::before,
  .fs-c-productLead::before,
  .fs-c-productCaption::before {
    content: "Paidy";
    display: inline-block !important;
    padding: 2px 8px;
    margin-right: 8px;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    color: #222;
    border: 1px solid #222;
    border-radius: 4px;
    vertical-align: middle;
    /* 文字が縦落ちしないように */
    writing-mode: horizontal-tb !important;
    white-space: nowrap !important;
  }
}

/* ===== Paidyロゴをスマホで強制表示（最優先） ===== */
@media (max-width: 768px) {

  /* 分割案内のエリアを横並びにする */
  .fs-c-productPriceNote {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  /* 既存のテキストによる縦落ち回避 */
  .fs-c-productPriceNote br {
    display: none !important;
  }

  /* Paidyロゴを必ず表示する（SVGを強制挿入） */
  .fs-c-productPriceNote::before {
    content: "" !important;
    display: inline-block !important;
    width: 72px !important;     /* ロゴの表示幅（調整可能） */
    height: 16px !important;
    background-image: url("https://cdn.paidy.com/promotional-messaging/general/images/paidy-text-magenta-v3.svg") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }
}

/* ===== Paidyロゴ：スマホで必ず表示（候補要素を網羅） ===== */
@media (max-width: 768px) {

  /* 候補の案内行をすべて横並びにして改行を抑止 */
  .fs-c-productPriceNote,
  .fs-c-productLead,
  .fs-c-productCaption,
  .fs-c-productPrice,
  .fs-c-productPriceArea,
  .fs-c-productPriceWrap,
  .p-product-price__note,
  .product-price-note {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
  }

  /* 不要な改行を無効化 */
  .fs-c-productPriceNote br,
  .fs-c-productLead br,
  .fs-c-productCaption br,
  .fs-c-productPrice br,
  .fs-c-productPriceArea br,
  .fs-c-productPriceWrap br,
  .p-product-price__note br,
  .product-price-note br {
    display: none !important;
  }

  /* 先頭に Paidy ロゴを差し込む（どれかにヒットすればOK） */
  .fs-c-productPriceNote::before,
  .fs-c-productLead::before,
  .fs-c-productCaption::before,
  .fs-c-productPrice::before,
  .fs-c-productPriceArea::before,
  .fs-c-productPriceWrap::before,
  .p-product-price__note::before,
  .product-price-note::before {
    content: "" !important;
    display: inline-block !important;
    width: 72px !important;         /* 大きければ 60px/56px へ */
    height: 16px !important;
    flex: 0 0 auto !important;
    background-image: url("https://cdn.paidy.com/promotional-messaging/general/images/paidy-text-magenta-v3.svg") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    vertical-align: middle !important;
  }
}

/* 商品メイン画像の高さを固定して最初から領域確保 */
.fs-c-productMainImg,
.product-mainimage-wrapper,
.fs-c-productMainImg__image {
  width: 100%;
  aspect-ratio: 4 / 3;    /* ← この比率なら最初から高さが決まる */
  overflow: hidden;
  contain: layout;         /* ← さらにシフト防止の保険 */
}

.fs-c-productMainImg img,
.product-mainimage-wrapper img,
.fs-c-productMainImg__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
/* 上部のバーの高さ変動も抑える */
.site-info-bar,
.fs-p-announcementBar,
.announcement-bar,
.notice-area {
  min-height: 40px;     /* 事前に空きスペース確保 */
  contain: layout;      /* これで下の要素が動かされるのを抑止 */
}