@charset "UTF-8";

/* ==========================================
   ショッピングカート画面のカスタマイズ
========================================== */

/* ① 商品名、色・サイズ、項目選択肢、販売期間の文字サイズをすべて揃える */
.fs-c-listedProductName__name,
.fs-c-listedProductName__variation__choice,
.fs-c-listedProductName__selection__choice,
.fs-c-cartProductSalesPeriod,
.fs-c-cartProductSalesPeriod__label,
.fs-c-time {
    font-size: 14px !important; /* お好みのサイズに調整してください */
}

/* ② 「あとで買う」ボタンを非表示にする */
.fs-c-cartTable__actionButton__container--buyItLater {
    display: none !important;
}

/* ③ 「このサイトでお支払い」ボタンの右側のバグ（文字化け）を標準の矢印に修正する */
/* ※以下のセレクタはシステムの標準的なクラス名を想定しています */
.fs-p-cartCheckout__button::after,
.fs-c-button--checkout::after,
.fs-c-button__icon::after {
    content: "\2192" !important; /* 標準のテキスト矢印「→」のUnicodeを指定 */
    font-family: sans-serif !important; /* アイコンフォントの読み込みエラーを回避し、標準フォントを強制 */
}

/* ==========================================
   「お気に入りリスト」「おすすめ商品」「買物カゴアイテム」など
   商品一覧カルーセルの商品名調整
========================================== */
.fs-c-wishlistProduct .fs-c-productName__name,
.fs-c-featuredProduct .fs-c-productName__name,
.fs-c-productListCarousel .fs-c-productName__name {
    /* ① 2行で制限し、はみ出た文字は「...」で省略する設定 */
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    
    /* 文字の行間を少し開けて読みやすくする（お好みで調整） */
    line-height: 1.5 !important; 

    /* ② 文字サイズを強制的に統一する */
    font-size: 13px !important; 
}

/* ==========================================
   お気に入り（ハート）ボタンのサイズ調整と見切れ防止
   （登録前・登録後の両方に適用）
========================================== */
button[class*="WishList--icon"] {
    /* ① ハートのサイズを全体的に縮小する（0.7 = 70%の大きさ） */
    transform: scale(0.7) !important; 
    
    /* 縮小する際の基準点を右下にする（位置ズレ防止） */
    transform-origin: right bottom !important; 
    
    /* ② 少し上にズラして、下部が切れるのを防ぐ */
    bottom: 5px !important; 
}

/* ③ 商品カード自体の下部に余白を持たせて枠を広げる */
.fs-c-productListItem {
    padding-bottom: 10px !important; 
}

/* ==========================================
   カート内「削除」ボタンの縦書き（折り返し）防止
========================================== */
.fs-c-button--cancel--cart .fs-c-button__label {
    white-space: nowrap !important;
}

/* ==========================================
   カート画面：購入手続きボタンの文字サイズ統一
========================================== */
.fs-c-button--loginAndPurchase .fs-c-button__label,
.fs-c-button--registerAndPurchase .fs-c-button__label {
    font-size: 14px !important; /* 上のボタンのサイズに合わせて数値を調整してください */
    line-height: 1.4 !important; /* 文字が折り返した際の行間も整えます */
}

/* ==========================================
   購入手続きボタンの右端に「＞」記号を配置し、文字化けを修正
========================================== */
/* ① ボタン本体を記号配置の基準位置にする */
.fs-c-button--loginAndPurchase,
.fs-c-button--registerAndPurchase {
    position: relative !important;
}

/* ② 両方のボタンの右端に「＞」を表示させる */
.fs-c-button--loginAndPurchase::after,
.fs-c-button--registerAndPurchase::after {
    content: "＞" !important; /* 記号を指定 */
    font-family: sans-serif !important; /* アイコンフォントのエラーを回避し、標準フォントで表示 */
    position: absolute !important;
    right: 15px !important; /* ボタン右端からの距離（お好みで調整） */
    top: 50% !important;
    transform: translateY(-50%) !important; /* 上下中央に配置 */
    font-size: 14px !important; /* 記号の大きさ */
    font-weight: bold !important; /* 記号を少し太くする */
}

/* ==========================================
   「このサイトでお支払い」ボタンの右端に「＞」記号を配置
========================================= */
/* ① ボタン本体を記号配置の基準位置にする */
.fs-c-button--purchaseHere {
    position: relative !important;
}

/* ② ボタンの右端に「＞」を表示させる */
.fs-c-button--purchaseHere::after {
    content: "＞" !important; /* 記号を指定 */
    font-family: sans-serif !important; /* アイコンフォントのエラーを回避し、標準フォントで表示 */
    position: absolute !important;
    right: 15px !important; /* ボタン右端からの距離（お好みで調整） */
    top: 50% !important;
    transform: translateY(-50%) !important; /* 上下中央に配置 */
    font-size: 14px !important; /* 記号の大きさ */
    font-weight: bold !important; /* 記号を少し太くする */
}

/* ==========================================
   スマホ表示時のみ：購入手続きボタンの横幅を揃える
========================================== */
@media screen and (max-width: 768px) {
    .fs-c-button--registerAndPurchase,
    .fs-c-buttonContainer--registerAndPurchase {
        width: 100% !important; /* 横幅をいっぱいに広げる */
        display: block !important; /* 要素をブロック化して横幅を効かせる */
        box-sizing: border-box !important; /* 余白計算を整える */
    }
}