@charset "UTF-8";

/* =========================================
   1. カート周りの全体レイアウト順序変更
   ========================================= */

/* 全体を囲む大枠（親要素）をFlexboxにする */
#tocart {
    display: flex;
    flex-direction: column;
}

/* カートボタンを囲む「壁」を取り払い、子要素を並列に昇格させる */
#cartbackarea {
    display: contents;
}

/* 上から順番に表示順（order）を割り振る */
.fs-c-productChooseVariation { order: 1; }
.fs-c-productQuantityAndWishlist { order: 2; margin-bottom: 20px; }
.fs-c-productSelection { order: 3; margin-bottom: 20px; }
.fs-c-productActionButton { order: 4; }
.fs-c-inquiryAboutProduct { order: 5; margin-top: 20px; }
.fs-c-productNotice-bg { order: 6; }
.fs-p-snsArea { 
    order: 7; 
    margin-top: 20px; 
    display: flex; /* ボタンを横一列に並べる */
    align-items: center; /* 縦の高さを中央で綺麗に揃える */
    gap: 10px; /* ボタンとボタンの間に少しだけ隙間を作る */
}
.fs-c-productReview { order: 8; }


/* =========================================
   2. 数量・お気に入りボタンの横並び設定
   ========================================= */

.fs-c-productQuantityAndWishlist {
    display: flex;
    align-items: center;
    margin: 15px 0;
}
.fs-c-productQuantityAndWishlist__quantity {
    order: 1;
    margin-right: 10px;
}
.fs-c-productQuantityAndWishlist__wishlist {
    order: 2;
}


/* =========================================
   3. ボタンのデザイン統一と文言変更
   ========================================= */

/* カートに入れるボタン */
.fs-c-button--addToCart--detail.fs-c-button--primary {
    background-color: #9b1933 !important;
    color: #ffffff !important;
    font-size: 130% !important;
    border: none !important;
}
.fs-c-button--addToCart--detail.fs-c-button--primary:hover {
    background-color: #9b1933 !important;
    color: #ffffff !important;
}

/* お問い合わせボタン */
.fs-c-button--inquiryAboutProduct.fs-c-button--plain {
    background-color: #9b1933 !important;
    color: #ffffff !important;
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 16px 0px 15px !important;
    border: none !important;
    cursor: pointer;
}
.fs-c-button--inquiryAboutProduct.fs-c-button--plain:hover {
    background-color: #9b1933 !important;
    color: #ffffff !important;
}

/* お問い合わせボタンの文言変更 */
.fs-c-button--inquiryAboutProduct .fs-c-button__label {
    font-size: 0 !important;
}
.fs-c-button--inquiryAboutProduct .fs-c-button__label::after {
    content: "お問い合わせはこちら";
    font-size: 19.5px;
    font-weight: normal;
}