/* =========================================================
   オリジナルCSS（たんす屋オンラインストア）
   ※上から順に適用されます。並び順を変える場合は上書き関係に注意。

   目次
   1. 共通（ヘッダー・パンくず・ボタン文字色）
   2. 商品詳細ページ（文字サイズ・カートボタン）
   3. フリーパーツ goods_kimono
   4. 商品一覧・検索結果・商品グループ
   5. サイト内小アイコン
   6. カート画面
   7. ご利用ガイド ランクテーブル
   8. 価格・エラー表示・レイアウト調整
   9. 商品マーク（未洗い・新入荷）・カートに入れるボタン
  10. トップページ お知らせ／商品マーク（特集・Sランク・SALE等）
  11. ポイント表示・検索窓・商品画像
  12. メニュー・商品一覧の文字
  13. 商品詳細ページ 表示順（20260911）
  14. 商品名の2行表示・説明非表示（20260911）
  15. カート画面 PC版ボタン（20260911）
  16. スマホ：カートに追加ボタン
   ========================================================= */


/* =========================================================
   1. 共通（ヘッダー・パンくず・ボタン文字色）
   ========================================================= */

/* プレビュー用ヘッダーを非表示 */
#fs_preview_header {
    display: none;
}

/* ヘッダーの「カートを見る」文字 */
span.fs-p-headerNavigation__viewCartButton__label {
    color: #fff;
    font-size: 1.4rem;
}

/* セカンダリボタンの文字色 */
.fs-c-button--secondary .fs-c-button__label {
    color: #fff;
}

/* パンくず */
.fs-c-breadcrumb {
    max-width: 1080px;
    margin: 0 auto 0;
    width: 94%;
    padding-top: 15px;
}


/* =========================================================
   2. 商品詳細ページ（文字サイズ・カートボタン）
   ========================================================= */

/* 商品名 */
span.fs-c-productNameHeading__name {
    font-size: 22px;
    font-weight: bold;
}

/* 商品番号（枠・余白は「13. 表示順」で指定） */
.fs-c-productNumber__number {
    font-weight: 200 !important;
}

/* 価格 */
span.fs-c-price__value {
    font-size: 22px;
}
span.fs-c-price__currencyMark {
    font-size: 22px;
}
span.fs-c-productPrice__addon__label {
    line-height: 1.5;
}

/* カートボタン（文字ボタン用） */
#fs_form > div > div.fs-l-productLayout__item.fs-l-productLayout__item--2 > div.fs-c-productActionButton.fs-c-buttonContainer > button > span {
    color: #fff;
}
button.fs-c-button--addToCart--detail.fs-c-button--primary {
    padding: 25px 0;
    font-size: 14px !important;
    background-color: #f12121;
    border: 0;
}

/* 商品についてのお問い合わせボタン */
.fs-c-inquiryAboutProduct.fs-c-buttonContainer.fs-c-buttonContainer--inquiryAboutProduct {
    border: 1px solid #cfcfcf;
    border-radius: 5px;
    text-align: center;
}
button.fs-c-button--inquiryAboutProduct.fs-c-button--plain {
    margin: 0 auto;
}

/* カートボタンのカートアイコン */
#fs_form > div > div.fs-l-productLayout__item.fs-l-productLayout__item--2 > div.fs-c-productActionButton.fs-c-buttonContainer > button > span:before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 12px;
    background-image: url(https://mkkimono.itembox.design/item/img/cart_btn.png?d=20210209160326);
    background-size: contain;
}


/* =========================================================
   3. フリーパーツ goods_kimono（20210212）
   ========================================================= */
.goods_kimono {
    padding: 0 0 50px 0;
}
.goods_kimono .title {
    border-bottom: 1px solid #999999;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    background-color: #f5f5f5;
}
.goods_kimono .text {
    padding: 10px;
}

/* 商品タグの間隔（20210212） */
.fs-c-productMark > li {
    margin: 2px;
}


/* =========================================================
   4. 商品一覧・検索結果・商品グループ
   ========================================================= */

/* 商品一覧ページ：価格を小さく */
.fs-body-category .fs-c-price__value {
    font-size: 18px;
}
.fs-body-category .fs-c-price__currencyMark {
    font-size: 18px;
}

/* タグ検索一覧ページ：価格を小さく */
.fs-body-search .fs-c-price__value {
    font-size: 18px;
}
.fs-body-search .fs-c-price__currencyMark {
    font-size: 18px;
}

/* 商品グループページ */
.fs-c-subgroupList__label {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}
.fs-c-subgroupList__link::after {
    grid-column: 4 !important;
}
.fs-c-sortItems__list__item.is-active {
    background: #F2F2F2;
}


/* =========================================================
   5. サイト内小アイコン
   ========================================================= */
.fs-p-scrollingCartButton {
    width: 400px;   /* 全体の幅 */
    text-align: right;
}

/* チェックボックスを非表示 */
#switch {
    display: none;
}

/* 全体右寄せ */
.right {
    margin: 0 0 0 auto;
}

.open,
.close {
    margin-left: 27px;
}

/* 表示ボタン（初期：表示） */
.open {
    display: inline-block;
}

/* 閉じるボタン（初期：非表示） */
.close {
    display: none;
}

/* コンテンツ（初期：非表示） */
.contents {
    display: none;
    padding: 0 20px 15px;
}

/* --- チェック時（クリック後） --- */
#switch:checked + .button > .icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
#switch:checked + .button > .icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
#switch:checked + .button > .open {
    display: none;
}
#switch:checked + .button > .close {
    display: inline-block;
}
#switch:checked ~ .contents {
    display: block;
}


/* =========================================================
   6. カート画面
   ========================================================= */

/* ログインして進むボタン */
.fs-body-cart .fs-c-button--primary {
    background: #f5f5f5;
    border: 1px solid #f5f5f5;
}

/* ご注文手続きへ進むボタン */
.fs-body-cart .fs-c-button--secondary {
    background: #f5f5f5;
    border: 1px solid #f5f5f5;
}
.fs-body-cart .fs-c-button__label {
    color: #000000 !important;
    vertical-align: super;
}

/* 合計金額 */
.fs-c-orderTotalTable__mainRow .fs-c-price .fs-c-price__value {
    font-size: 26px;
    color: #f12121 !important;
}
.fs-c-orderTotalTable__mainRow .fs-c-price .fs-c-price__currencyMark {
    font-size: 26px;
    color: #f12121 !important;
}

/* 小計金額 */
.fs-c-cartTable__dataCell--subtotal .fs-c-price .fs-c-price__value {
    font-size: 20px;
}
.fs-c-cartTable__dataCell--subtotal .fs-c-price .fs-c-price__currencyMark {
    font-size: 20px;
}

/* 商品名に表示される金額部分を非表示 */
.fs-c-priceDisplay .fs-c-price .fs-c-price__value {
    display: none;
}
.fs-c-priceDisplay .fs-c-price .fs-c-price__currencyMark {
    display: none;
}
.fs-c-priceDisplay span.fs-c-productPrice__addon__label {
    display: none;
}
.fs-c-priceDisplay .fs-c-productPrice__addon:not(.fs-c-productPrice__addon--listed)::before {
    content: "";
}
.fs-c-priceDisplay .fs-c-productPrice__addon:not(.fs-c-productPrice__addon--listed)::after {
    content: "";
}

/* 送料無料ライン自動表示 */
.fs-c-cartDiscountInfo__info__current {
    color: #f12121;
    font-size: 1.8rem;
    margin-top: -10px;
}
.fs-c-cartDiscountInfo__info {
    justify-content: flex-end;
}
.fs-c-cartDiscountInfo__note {
    text-align: right;
}
.fs-c-cartDiscountInfo__more .fs-c-price .fs-c-price__value {
    color: #f12121;
    margin: -20px 10px 0px 0px;
}
.fs-c-cartDiscountInfo__more .fs-c-price .fs-c-price__currencyMark {
    color: #f12121;
    margin: 0 0 0 10px;
}


/* =========================================================
   7. ご利用ガイド ランクテーブル
   ========================================================= */
.fs-c-rankTable {
    border-collapse: collapse;
    border: 1px solid #b2b2b2;
}
.fs-c-rankTable__rank {
    padding: 8px 16px;
    text-align: center;
    background: rgba(126, 126, 126, 0.08);
    font-weight: normal;
    border: 1px solid #b2b2b2;
    white-space: nowrap;
    width: 15%;
    font-size: 20px;
}
.fs-c-rankTable__rankData {
    padding: 8px 16px;
    border: 1px solid #b2b2b2;
}


/* =========================================================
   8. 価格・エラー表示・レイアウト調整
   ========================================================= */

/* 定価に取消線 */
.fs-c-productPrice--listed .fs-c-price {
    text-decoration: line-through;
}

/* エラー表示等の幅 */
.fs-c-panelContainer {
    flex-basis: 100%;
    min-width: auto;
    max-width: 1080px;
    width: 95%;
    margin: auto;
}

/* 詳細画面のバリエーションのGridを解除（20220223 akiyama） */
.fs-c-variationCart > li {
    display: block;
}

/* ボタンを横並び・中央寄せ（20220223 akiyama） */
.fs-c-buttonContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
}

/* トップページ「注目ワード」をスマホで折り返す（20220223 akiyama） */
.searchArea .column .__word {
    display: flex;
    padding: 0 0;
    flex-wrap: wrap;
}

/* バリエーション表示時の「お気に入り登録する」ボタン（20220228 akiyama） */
.fs-c-variationCart__wishlist {
    display: grid;
    justify-content: end;
}

/* 画像ボタンの比率を固定（iPhoneで縦長になるのを防ぐ）（20220307 akiyama） */
.fs-c-button--image > img {
    width: 100%;
    height: auto;
    margin-left: auto;
}

/* 画像の角を丸く（20220316 akiyama） */
img {
    border-radius: 8px;
}

/* フリーページの横幅を1080pxに（20220524 akiyama） */
.fs-l-pageMain {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

/* フリーページ見出し下のラインの横幅を1080pxに（20220524 akiyama） */
.fs-c-heading--page {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}

/* 会員価格の札の色（20230308 akiyama） */
.fs-c-mark--memberPrice_aki {
    background: #ffa500;
    color: white;
}
.fs-c-mark--memberPrice_aki > .fs-c-mark__label {
    color: white;
}

/* 「会員特別価格」の表記を赤に */
.fs-c-productPrice__main__label {
    margin-right: 4px;
    color: red;
}


/* =========================================================
   9. 商品マーク（未洗い・新入荷）・カートに入れるボタン
   ========================================================= */

/* 未洗い */
.label_miarai {
    background: #2D277F;   /* たんす屋カラー */
}
.label_miarai > .fs-c-productMark__label {
    color: #ffffff;
}

/* 新入荷（からし色・どきどきアニメーション） */
.label_sinnyuka {
    background: #FFD800;
    animation-name: dokidoki;
    animation-delay: 0s;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
.label_sinnyuka > .fs-c-productMark__label {
    color: #000000;
}
@keyframes dokidoki {
    0%   { transform: scale(1); }
    40%  { transform: scale(1); }
    50%  { transform: scale(1.1); }
    60%  { transform: scale(1); }
    100% { transform: scale(1); }
}

/* カートに入れる */
.cartin {
    color: #ffffff;
    border: 0px solid #373582;
    border-radius: 20px;
    padding: 0px 8px;
}
.cartin > .fs-c-button__label {
    color: #ffffff;
}

/* カートに入れる（バリエーションページ） */
.cartin_variation {
    background: #F12121;
    border: 0px solid #373582;
}
.cartin_variation > .fs-c-button__label {
    color: #ffffff;
}


/* =========================================================
  10. トップページ お知らせ（20230420 aki）
   ========================================================= */
.fs-pt-column__heading {
    font-size: 1.0rem;
    font-weight: bold;
}
.ec_info > .fs-pt-column__item > .fs-pt-column__heading {
    color: #ff0000;
    text-decoration: underline;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    border: none;
    border-bottom: 1px dotted black;
    position: relative;
}
.ec_info > .fs-pt-column__item > .fs-pt-column__heading::after {
    content: '　〉';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    margin-left: 25px;
}

/* --- 商品マーク（続き） --- */

/* 特集 */
.label_tokushu > .fs-c-productMark__label {
    color: #2D277F;
}

/* プロダクトマーク共通 */
.fs-c-productMark__mark {
    border: 1px solid black;
    padding: 2px 10px 2px;
    margin: 0px;
    border-radius: 0px;
}

/* Sランク・SALE・各OFF */
.label_srank > .fs-c-productMark__label {
    color: #FFFFFF;
}
.label_sale > .fs-c-productMark__label {
    color: #FFFFFF;
}
.label_70off > .fs-c-productMark__label {
    color: #FFFFFF;
}
.label_50off > .fs-c-productMark__label {
    color: #FFFFFF;
}
.label_30off > .fs-c-productMark__label {
    color: #FFFFFF;
}


/* =========================================================
  11. ポイント表示・検索窓・商品画像
   ========================================================= */

/* ポイント表示の文字色を白に */
.fs-c-productPointDisplay__label {
    color: white;
}
.fs-c-productPointDisplay__quantity {
    color: white;
}
.fs-c-productPointDisplay__unit {
    color: white;
}

/* キーワード検索のサイズ（スマホ） */
@media screen and (max-width: 768px) {
    #fs_input_productSearchKeyword {
        width: 150%;
        font-size: 16px;
    }
}

/* 商品画像パーツ フリックの調整 */
.fs-c-productCarouselMainImage .slick-list.draggable {
    aspect-ratio: 1 / 1;
    height: auto !important;
}
.fs-c-productCarouselMainImage .slick-track {
    height: 100% !important;
}
.fs-c-productCarouselMainImage .slick-slide {
    aspect-ratio: 1 / 1;
}
.fs-c-productCarouselMainImage__image > img {
    width: 100%;
}


/* =========================================================
  12. メニュー・商品一覧の文字
   ========================================================= */

/* サイドメニュー：太字・大きめ */
.fs-l-sideArea .listBox .__listWrap .__list .__sub li a {
    font-size: 13px;
    font-weight: bold;
}

/* 商品一覧：商品名を太字 */
.fs-c-productListItem__productName {
    font-weight: bold;
}

/* ヘッダーメニュー：太字・大きめ */
#menulist .__listWrap .first_link > a > span {
    font-weight: bold;
    font-size: 15px;
}


/* =========================================================
  13. 商品詳細ページ 表示順（20260911）
      商品名 → 商品番号 → マーク → 価格＋ポイント → お気に入り
      → オプション選択 → カート（Flexboxで並べ替え）
   ========================================================= */
.fs-l-productLayout__item--2 {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
}
.fs-l-productLayout__item--2 > .fs-c-productNameHeading {
    flex-basis: 100%;
    order: 0;
}
.fs-c-productNumber {
    border: 0;
    padding: 0;
    flex-basis: 100%;
    order: 10;
}
.fs-c-productMarks {
    flex-basis: 100%;
    order: 20;
}
.fs-c-productNotice {
    flex-basis: 100%;
    order: 25;
}
.fs-c-productPrices--productDetail {
    display: contents;
}
.fs-c-productPrice--listed {
    flex-basis: 100%;
    order: 30;
}
.fs-c-productPrice--listed .fs-c-productPrice__main {
    display: inline-flex;
}
.fs-c-productPrice--selling {
    order: 40;
}
.fs-c-productPointDisplay {
    order: 40;
    margin-left: auto;
}
/* 数量・お気に入り（横幅比率 1:2） */
.fs-c-productQuantityAndWishlist {
    grid-template-columns: 1fr 2fr !important;
    flex-basis: 100%;
    order: 50;
}
.fs-c-variationAndActions,
.fs-c-productOption {
    flex-basis: 100%;
    order: 60;
}
.fs-c-productActionButton,
.fs-c-productActionButton ~ * {
    flex-basis: 100%;
    order: 70;
}


/* =========================================================
  14. 商品名の2行表示・説明非表示（20260911）
   ========================================================= */

/* 商品一覧：商品名を2行まで */
.fs-c-productName__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* 商品一覧：価格の下の商品説明を非表示 */
.fs-c-productListItem__productDescription {
    display: none;
}

/* トップページ「新着の商品」：商品名を2行まで */
.fr2-listItem__productName {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}


/* =========================================================
  15. カート画面 PC版：削除・あとで買うを同じ枠に（20260911）
   ========================================================= */
@media screen and (min-width: 601px) {
    .fs-c-cartTable__dataCell--action {
        height: auto !important;
        overflow: visible !important;
    }
    .fs-c-cartTable__actionButton {
        width: auto;
        min-width: 70px;
        height: auto !important;
        overflow: visible !important;
        border: 1px solid #b2b2b2;
        padding: 8px;
        box-sizing: border-box;
    }
    .fs-c-cartTable__actionButton__container {
        overflow: visible !important;
    }
    .fs-c-cartTable__actionButton__container > button {
        white-space: nowrap;
    }
    .fs-c-cartTable__actionButton__container + .fs-c-cartTable__actionButton__container {
        border-width: 1px 0 0 0;
        margin-top: 8px;
        padding-top: 8px;
    }
}


/* =========================================================
  16. スマホ：カートに追加ボタンを店舗お取り寄せバナーと同じ幅に
      （画面幅959px以下のみ。PCは変更なし）
   ========================================================= */
@media screen and (max-width: 959px) {
    .fs-c-productActionButton .fs-c-button--addToCart--detail.fs-c-button--image {
        width: 100%;   /* 画像は「8. 画像ボタンの比率を固定」で width:100% 済み */
    }
}