/* ▼▼▼ 1. 文字サイズ・フォントの強制適用 ▼▼▼ */
.fs-l-productLayout,
.fs-l-product4,
.product-right,
.fs-p-productDescription,
.spec-item,
.spec-item div,
.fs-c-productNameHeading__name {
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif !important;
    color: #3e3a39 !important;
    letter-spacing: 0.05em;
}

/* 商品説明文とスペック表の文字サイズを大きく */
.fs-p-productDescription,
.spec-item,
.spec-item div {
    font-size: 16px !important;
    line-height: 1.9 !important;
}


@media screen and (min-width: 1024px) {
    .fs-l-productLayout {
        display: flex !important;
        justify-content: center !important;
        align-items: flex-start !important;
        
        width: 100% !important;        
        max-width: 1200px !important;
        margin: 0 auto !important;
        
        
        gap: 30px !important; 
        padding: 0 20px !important;
        box-sizing: border-box !important; 
    }

    .product-left {
        
        flex: 1 !important;          
        width: auto !important;       
        max-width: 600px !important;  
        min-width: 0;                 
    }

    .product-right {
        
        width: 360px !important;      
        min-width: 300px !important;
        flex-shrink: 0 !important;   
        
        margin: 0 !important;
        position: sticky;
        top: 100px;
    }

/* 返品特約（右カラムの一番下）の余白 */
  .fs-c-returnedSpecialContract {
    margin-top: 60px !important;    /* 上の要素（お問い合わせボタン）との間隔 */
    margin-bottom: 40px !important; /* 下の要素との間隔 */
  }

  /* フッター全体の余白 */
  footer {
    margin-top: 100px !important;   /* メインコンテンツとフッターの間隔 */
    padding-top: 50px !important;   /* フッター内の上の余白 */
    padding-bottom: 50px !important;/* フッター内の下の余白 */
  }

}
}


.fs-c-productCarouselMainImage__expandButton {
    display: flex !important;
    justify-content: flex-end; 
    margin-top: 15px;
}

.fs-c-button--viewExtendedImage {
    background-color: #6f4b3e !important; /* 指定の茶色 */
    color: #ffffff !important; /* 白文字 */
    border: none !important;
    padding: 10px 30px !important;
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif !important;
    font-size: 14px !important;
    border-radius: 0 !important; /* 四角いボタンでクラシカルに */
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.fs-c-button--viewExtendedImage:hover {
    opacity: 0.8;
}

/* ▼▼▼ スライダー関連設定 ▼▼▼ */
/* スライダー本体のエリア確保 */
.fs-c-productCarouselMainImage {
    overflow: hidden;
    padding: 0;
}

/* JSでロード完了後に表示 */
.fs-c-productCarouselMainImage.slick-initialized {
    visibility: visible;
    opacity: 1;
}

/* 画像の基本設定 */
.fs-c-productCarouselMainImage__image img {
    width: 100% !important;
    height: auto !important;
   object-fit: contain; /* 比率を保ったまま枠内に収める */
    box-sizing: border-box;
    
}


/* 各スライドの左右に余白（隙間）を入れる */
.fs-c-productCarouselMainImage .slick-slide {
    margin-left: 0;


}

.fs-c-productCarouselMainImage .slick-list {
    margin: 0;
    padding: 0;
overflow: hidden;
}


/* ▼▼▼ スライダー修正：左右のはみ出しを確実に隠す設定 ▼▼▼ */

/* ② スライダーの余白設定をリセット */
.fs-c-productCarouselMainImage {
    padding: 0 !important; /* 外側の余白はなし */
}

/* ② 画像スライド1枚ずつの左右に「白背景（余白）」を持たせる */
.fs-c-productCarouselMainImage .slick-slide {
    padding: 0 50px !important; /* 左右に50pxずつ余白を作る */
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* ② 矢印を、新しく作った白背景エリア（スライドの両端）に配置 */
.slick-prev {
    left: 5px !important; 
    z-index: 20;
}
.slick-next {
    right: 5px !important; 
    z-index: 20;
}

/* 画像を確実に表示させる */
.fs-c-productCarouselMainImage__image img {
    width: 100% !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
    visibility: visible !important; /* 念のため強制的に表示 */
    opacity: 1 !important;          /* 念のため透明度を解除 */
}



/* --- 矢印（< >）のデザイン --- */
.slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #d8cfc4;
    color: #6f4b3e;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Yu Mincho", serif;
    font-size: 18px;
    transition: all 0.3s ease;
    opacity: 0.8;
}

.slick-arrow:hover {
    background: #6f4b3e;
    color: #fff;
    opacity: 1;
}




/* ③ スライダー領域の左右に余白を作り、矢印を画像の外に出す */
.fs-c-productCarouselMainImage {
    padding: 0 50px !important; /* 左右に50pxずつ矢印のスペースを確保 */
    position: relative;
    box-sizing: border-box;
}

/* 矢印の位置を確保した余白部分（外側）に移動 */
.slick-prev {
    left: 0 !important; 
}
.slick-next {
    right: 0 !important; 
}

/* （オプション）背景が不要な場合は、既存の rgba(255,255,255,0.7) や border を消してスッキリさせるのもおすすめです */
/* .slick-arrow {
    background: transparent !important;
    border: none !important;
}
*/


/* --- スマホ表示（1024px以下）のレイアウト調整 --- */
@media screen and (max-width: 1023px) {
    
    /* ① スマホ版では下の小さなサムネイル画像とスクロールバーを非表示にする */
    .slick-dots, 
    .fs-c-productCarouselThumbnail,
    .fs-c-productImageList {
        display: none !important;
    }

 /* ② 画像の左右見切れを完全に防ぐ（Slick特有のズレを強制リセット） */
    .fs-c-productCarouselMainImage {
        padding: 0 20px 60px 20px !important; /* 上0、右20px、下60px、左20px */
        overflow: hidden !important; /* 横揺れやはみ出しをカット */
    }
    
    .fs-c-productCarouselMainImage__carousel,
    .fs-c-productCarouselMainImage .slick-list,
    .fs-c-productCarouselMainImage .slick-track,
    .fs-c-productCarouselMainImage .slick-slide,
    .fs-c-productCarouselMainImage__image {
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    .fs-c-productCarouselMainImage__image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }

    /* ③ 「＜」「＞」ボタンと「画像拡大」ボタンを横一列に並べる */
    .fs-c-productCarouselMainImage__expandButton {
        position: absolute !important;
        bottom: 10px !important; /* 下からの位置 */
        left: 50% !important;
        transform: translateX(-50%) !important; /* 中央揃え */
        margin: 0 !important;
        z-index: 10 !important;
    }
    
    .slick-prev, .slick-next {
        position: absolute !important;
        top: auto !important;
        bottom: 10px !important; /* 画像拡大ボタンと高さをピタリと合わせる */
        transform: none !important;
        z-index: 20 !important;
        margin: 0 !important;
    }
    
    /* 画像拡大ボタンの両脇に矢印を配置（近すぎる場合は110pxの数値を大きくしてください） */
    .slick-prev {
        left: calc(50% - 110px) !important;
    }
    .slick-next {
        right: calc(50% - 110px) !important;
    }
}

/* ▼▼▼ 3. 各パーツのデザイン装飾 ▼▼▼ */

/* 商品名 */
.fs-c-productNameHeading__name {
    font-size: 26px !important;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
    display: block;
}

/* 価格 */
.fs-c-productPrice__main__price {
    font-family: "Times New Roman", serif;
    font-size: 32px !important;
    color: #8b0000 !important;
    font-weight: normal;
    margin: 20px 0;
    display: block;
}
.fs-c-productPrice__addon__label {
    font-size: 14px !important;
    color: #666;
}

.fs-c-productPrice {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: nowrap !important;
}

.fs-c-productPrice__taxIncluding,
.price-tax {
    margin-left: 8px !important;
    white-space: nowrap !important;
}

/* スペック表のタイトル */
.spec-title {
    font-size: 16px !important;
    font-weight: bold;
    color: #6f4b3e;
    margin-bottom: 8px;
    display: inline-block;
}
/* スペック表の線 */
.spec-item:last-child {
    border-bottom: 1px solid #eee;
}

/* ▼▼▼ 4. バリエーション選択（サイズ・色）の修正 ▼▼▼ */
.fs-c-variationMatrix {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}
.fs-c-variationMatrix__row {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px dotted #ccc;
    padding-bottom: 15px;
}
.fs-c-variationMatrix__row__thumbnail {
    width: 60px;
    margin-right: 15px;
}
.fs-c-variationMatrix__row__variationName {
    width: 100px;
    font-weight: bold;
    font-size: 15px !important;
}
.fs-c-variationMatrix__lane {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ラジオボタン非表示 */
.fs-c-variationMatrix__radio {
    display: none;
}

/* 在庫パネルのデザイン */
.fs-c-variationMatrix__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    border: 1px solid #d8cfc4;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    font-family: "Times New Roman", serif;
}

/* サイズ文字（M, L） */
.fs-c-variationMatrix__panel__label {
    font-size: 16px !important;
    color: #333;
    line-height: 1;
    margin-bottom: 4px;
}


.fs-c-variationMatrix__panel {
    display: flex !important;
    flex-direction: row !important;   
    align-items: center !important;   
    justify-content: center !important;
    
    width: auto !important;           
    min-width: 80px;                  
    height: 50px !important;          
    padding: 0 15px !important;       
    gap: 8px;                         
}


.fs-c-variationMatrix__panel__label {
    margin-bottom: 0 !important;      
    margin-right: 0 !important;
    line-height: 1;
}

/* 3. 在庫記号（×）：位置調整 */
.fs-c-variationMatrix__panel__stock {
    margin-top: 0 !important;         
    margin-left: 0 !important;
    line-height: 1;
    
    
    font-size: 24px !important;
    font-weight: bold !important;
    color: #555 !important;
}


.fs-c-variationMatrix__panel__stock:empty {
    display: none !important;
}

/* 「在庫なし」の時の色 */
.fs-c-variationMatrix__panel__stock.is-out-of-stock {
    color: #8b0000;
}

/* 「残りわずか」の時の色 */
.fs-c-variationMatrix__panel__stock.is-low-stock {
    color: #8b0000;
}

/* 凡例（説明書き）の調整 */
.fs-c-stockSignLegend__sign {
    font-size: 12px;
    width: auto;
    margin-right: 5px;
    font-weight: bold;
}

/* 選択された時のデザイン */
.fs-c-variationMatrix__radio:checked + .fs-c-variationMatrix__panel {
    border-color: #6f4b3e;
    background-color: #6f4b3e;
}
.fs-c-variationMatrix__radio:checked + .fs-c-variationMatrix__panel .fs-c-variationMatrix__panel__label,
.fs-c-variationMatrix__radio:checked + .fs-c-variationMatrix__panel .fs-c-variationMatrix__panel__stock {
    color: #fff !important;
}

/* ▼▼▼ 5. ボタン・その他 ▼▼▼ */

/* 数量選択 */
.fs-c-quantity__select {
    width: 100%;
    max-width: 120px;
    height: 50px;
    padding: 5px 15px;
    border: 1px solid #ccc;
    font-size: 16px !important;
    font-family: "Times New Roman", serif;
    margin-bottom: 20px;
}

/* カートボタン */
.fs-c-button--addToCart--detail {
    width: 100% !important;
    height: 60px;
    background-color: #6f4b3e !important;
    color: #fff !important;
    font-family: "Yu Mincho", "YuMincho", serif !important;
    font-size: 20px !important;
    letter-spacing: 0.1em;
    border: none;
    cursor: pointer;
    margin-top: 10px;
}
.fs-c-button--addToCart--detail:hover {
    opacity: 0.8;
}


/* サイズ表の全体デザイン */
.size-table {
  width: 100%;            /* 横幅いっぱいに広げる */
  border-collapse: collapse; /* 枠線を重ねてスッキリさせる */
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Times New Roman", serif; /* 明朝体でクラシカルに */
  font-size: 14px;        /* 読みやすいサイズ感 */
  color: #333;            /* 文字色はデフォルトに近い濃いグレー */
  margin-bottom: 20px;
}

/* ヘッダーと見出しセル（項目名・サイズ名） */
.size-table th {
  border: 1px solid #6f4b3e; /* 指定の茶色 */
  padding: 8px 4px;
  font-weight: normal;    /* エレガントに見せるため太字にしすぎない */
  background-color: #faf7f5; /* ほんのり生成り色でアンティーク感を出す（不要なら削除可） */
  text-align: center;
}

/* データセル（数値） */
.size-table td {
  border: 1px solid #6f4b3e; /* 指定の茶色 */
  padding: 8px 4px;
  text-align: center;
}

/* 項目名の列だけ少し幅を狭く調整（お好みで） */
.size-table .item-name {
  width: 25%;
  background-color: #f4efec; /* 項目名だけ少し色を濃くしてメリハリ */
}

/* お問い合わせボタン */
.fs-c-button--inquiryAboutProduct {
    width: 100% !important;
    background: transparent !important;
    border: 1px solid #999 !important;
    color: #666 !important;
    margin-top: 20px;
    padding: 15px 0;
    font-size: 14px !important;
}

/* お気に入り抹消 */
.fs-c-productQuantityAndWishlist__wishlist,
.fs-c-button--addToWishList--detail {
    display: none !important;
}

/* ▼▼▼ 6. スマホ対応 ▼▼▼ */
@media screen and (max-width: 1023px) {
    .product-left, .product-right {
        width: 100% !important;
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 1023px) {
    .fs-l-productLayout {
        display: block !important;
        padding: 0 15px;
    }
    
    .product-right {
        position: static;
    }
    
   /* スマホでのカートボタン下部追従設定 */
    .fs-c-button--addToCart--detail {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        margin: 0 !important;
        z-index: 9999 !important; /* 他の画像やテキストよりも常に手前に表示させる */
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1) !important; /* ボタン上部に軽い影をつけて境界をわかりやすくする */
    }
    
    /* ボタンが固定される分、一番下までスクロールした時にフッターが隠れないように余白を追加 */
    body {
        padding-bottom: 65px !important; 
    }
    
    /* スマホの見出しサイズ調整 */
    .fs-c-productNameHeading__name {
        font-size: 20px !important;
    }
    .fs-c-productPrice__main__price {
        font-size: 28px !important;
    }
}

.fs-c-breadcrumb {
    margin-top: 50px !important;
    margin-bottom: 20px;
    padding-left: 20px;
    font-size: 12px !important;
}

/* ▼▼▼ 返品特約リンクのデザイン ▼▼▼ */
.fs-c-returnedSpecialContract {
    margin-top: 15px !important;       
    text-align: left !important;      
}

.fs-c-returnedSpecialContract__link a {
    font-size: 14px !important;        
    color: #6f4b3e !important;         
    text-decoration: none !important;  
    border-bottom: 1px solid #6f4b3e;  
    padding-bottom: 2px;               
    transition: opacity 0.3s;
}

/* マウスを乗せた時の動き */
.fs-c-returnedSpecialContract__link a:hover {
    opacity: 0.7;                      
    text-decoration: none !important;
}


/* ▼▼▼ 販売期間表示のデザイン ▼▼▼ */
.fs-c-productSalesPeriod {
    margin: 0 0 25px 0 !important; /* 商品名の下、価格の上の余白を調整 */
    padding: 15px 20px !important; /* 枠の内側の余白 */
    border: 1px solid #6f4b3e !important; /* Innocent Worldのブランドカラーに合わせた茶色の枠線 */
    background-color: #faf7f5 !important; /* ほんのり生成り色でアンティーク感を演出 */
    text-align: center !important; /* 中央揃えでエレガントに */
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif !important;
}

.fs-c-productSalesPeriod__label {
    display: block !important;
    font-size: 14px !important;
    color: #6f4b3e !important; /* アクセントカラー */
    margin-bottom: 8px !important;
    letter-spacing: 0.1em !important;
}

.fs-c-productSalesPeriod__date {
    display: block !important;
    font-size: 18px !important; /* 日付の文字を大きく見やすく */
    font-family: "Times New Roman", serif !important; /* 英数字はTimes New Romanでクラシカルに */
    color: #3e3a39 !important;
    letter-spacing: 0.05em !important;
}

/* 日付と「〜」の細かい調整 */
.fs-c-productSalesPeriod__date .fs-c-time {
    font-weight: normal !important;
}

.fs-c-productSalesPeriod__date .fs-c-timeJoint {
    margin: 0 5px !important; /* 波線の左右に少し余白を持たせる */
    font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif !important; /* 波線は明朝体で綺麗に表示 */
}

@media screen and (max-width: 1023px) {

    /* スライド（画像）1枚ずつの左右に隙間を作る */
    .fs-c-productCarouselMainImage .slick-slide {
        padding: 0 15px !important; /* 左右に15pxずつの余白 */
    }

    .product-left .fs-c-productCarouselMainImage {
        padding: 0!important;
    }
    
    .product-left .fs-c-productCarouselMainImage__image img {
         width: 90vw!important;
    }

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