/* =========================================================
   Alphaespace Original CSS
   整理版
   ========================================================= */


/* =========================================================
   1. スマートフォン：商品ページ文字の縦落ち防止
   ========================================================= */

@media (max-width: 768px) {

  body,
  .fs-c-product,
  .fs-c-productDetail,
  .fs-c-productDescription,
  .product-description,
  .fs-c-productDetail__spec,
  .fs-c-productDetail__detail,
  .fs-c-productPrice,
  .fs-c-productPriceNote,
  .fs-c-productLead,
  .fs-c-productCaption {
    writing-mode: horizontal-tb !important;
    -webkit-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 {
    word-break: keep-all !important;
    overflow-wrap: anywhere;
  }

  /* 不要な強制改行を解除 */
  .product-description br,
  .fs-c-productDescription br,
  .fs-c-productLead br,
  .fs-c-productPriceNote br {
    display: none !important;
  }
}


/* =========================================================
   2. スマートフォン：Paidy表示
   ========================================================= */

@media (max-width: 768px) {

  /* 分割払い案内を横並び */
  .fs-c-productPriceNote {
    display: inline-flex !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;

    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;
    line-height: 1.6 !important;
  }

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

  /* Paidy関連 */
  .fs-c-product [class*="paidy"],
  .fs-c-product [id*="paidy"],
  .paidy-checkout-button,
  .paidy-msg {
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;

    display: inline-flex !important;
    align-items: center !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    gap: 4px !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
  }

  .fs-c-product [class*="paidy"] br,
  .fs-c-product [id*="paidy"] br,
  .paidy-checkout-button br,
  .paidy-msg br {
    display: none !important;
  }

  /* Paidy画像・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,
  .fs-c-product img[src*="paidy"],
  .fs-c-product svg[aria-label*="paidy"],
  .paidy-checkout-button img,
  .paidy-msg img,
  .paidy-msg svg {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;

    width: auto !important;
    height: 20px !important;
    max-height: 20px !important;

    vertical-align: middle !important;
  }

  /*
   Paidyロゴが外部スクリプト側で表示されない場合の
   フォールバック。
  */
  .fs-c-productPriceNote::before {
    content: "" !important;
    display: inline-block !important;

    width: 72px !important;
    height: 16px !important;
    flex: 0 0 72px !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;
  }
}


/* =========================================================
   3. 商品メイン画像
   読み込み時のレイアウトシフト防止
   ========================================================= */

.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;
}


/* =========================================================
   4. 上部案内バー
   読み込み時のレイアウトシフト防止
   ========================================================= */

.site-info-bar,
.fs-p-announcementBar,
.announcement-bar,
.notice-area {
  min-height: 40px;
  contain: layout;
}


/* =========================================================
   5. PC中間幅：ヘッダーナビ崩れ対策
   最大表示とスマホ表示には影響させない
   ========================================================= */

@media (min-width: 769px) and (max-width: 1900px) {

  /*
   PCナビが画面幅に収まらなくなったときだけ
   文字と余白を少し縮小する
  */

  header nav ul {
    column-gap: clamp(10px, 1.2vw, 28px) !important;
  }

  header nav a {
    font-size: clamp(13px, 0.95vw, 16px) !important;
  }

  header nav li {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

}


/* =========================================================
   6. さらに狭いPC / タブレット横向き
   ========================================================= */

@media (min-width: 769px) and (max-width: 1400px) {

  header nav ul {
    column-gap: 10px !important;
  }

  header nav a {
    font-size: 13px !important;
  }

}