@charset "UTF-8";
@import url("common.css");

/*  共通
-------------------------------------------------------------*/
.flex__box{gap: 32px;}
.itemDetail__inner{margin: 0 auto; padding: 56px 24px; width: 1032px;}
#itemDetail p{margin: 0;}
select{-webkit-appearance: none; appearance: none; background-image: url("./img/arrow.svg"); background-repeat: no-repeat;}


/*  パンくず
-------------------------------------------------------------*/
#breadcrumbs{margin: 0 auto; padding: 24px; width: 1032px; font-size: var(--fontSize-Yu-text2);}
#breadcrumbs{display: flex; align-items: center; gap: 2px;}
.breadcrumbs__link{color: var(--color-lightBlue); text-decoration: none;}

/*  商品画像スライダー
-------------------------------------------------------------*/
.slider__conteiner{width: 480px;}
.slider__conteiner img{display: block; width: 100%;}
.item__mainslider li img{width: 480px;}
.item__thumslider li{padding: 8px; width: 73px !important; border: 1px solid var(--line-lightGray);}
.item__thumslider li img{width: 57px;}
.item__thumslider .slick-current li{border: 1px solid var(--line-gray);}

.slick-track{margin: 0;}
.slick-next{top: 40%; right: 52px; z-index: 1;}
.slick-next:before{content: ""; display: block; width: 56px; height: 56px; background-size: 56px; background-image: url(../images/common/slick_arrow_next.png); background-repeat: no-repeat;}
.slick-prev{top: 40%; left: 16px; z-index: 1;}
.slick-prev:before{content: ""; display: block; width: 56px; height: 56px; background-size: 56px; background-image: url(../images/common/slick_arrow_prev.png); background-repeat: no-repeat;}
.slick-dots li button:before{width: 12px; height: 12px; font-size: 16px; color: var(--line-lightGray); opacity: 1;}
.slick-dots li.slick-active button:before{color: var(--color-lightBlue);}

/* 商品一覧リンク */
.link__area{margin: 24px 0 0;}
.link__area a{position: relative; padding: 0 0 0 24px; font-size: var(--fontSize-Yu-h4); color: var(--color-lightBlue); font-weight: bold; text-decoration: none;}
.link__area a::before{content: ""; position: absolute; background: url(../images/common/icon_16arrow_right_bk.svg) no-repeat; width: 16px; height: 16px; top: 0; left: 0;}
.link__area a+a{margin: 4px 0 0;}

/*  メインテキストエリア
-------------------------------------------------------------*/
.detail__txt-box{flex: 1;}

/* アイコン */
.icon__list{display: flex; gap: 4px;}
#itemDetail .icon{display: block; margin-bottom: 24px; border: 1px solid #000; border-radius: 16px; font-size: var(--fontSize-Yu-h5); padding: 3px 12px; font-weight: bold;}
#itemDetail .icon__bg-r{border: 1px solid var( --color-red); background-color: var( --color-red); color: #FFF;}
#itemDetail .icon__r{border: 1px solid var( --color-red); color: var( --color-red);}
#itemDetail .icon__bl{border: 1px solid var( --color-lightBlue); color: var( --color-lightBlue);}

.appeal__txt{margin: 0 0 16px;}
.maker_ttl{margin: 16px 0 0; color: var(--color-txt-gray); font-size: var(--fontSize-Yu-h4); font-weight: bold;}
#itemDetail .detail__ttl{margin: 8px 0 0; font-size: var(--fontSize-Yu-h2); font-weight: bold;}
#itemDetail .jan__txt{margin: 8px 0 0; color: var(--color-txt-gray); font-size: var(--fontSize-Yu-text1);}

/* 価格 */
.price__area{margin: 24px 0 0;}
#itemDetail .price__txt{font-size: var(--fontSize-Yu-h1); font-weight: bold; color: var(--color-red);}
#itemDetail .price__txt-small{font-size: var(--fontSize-Yu-h3);}
#itemDetail .price__txt-gr{margin: 8px 0 0; font-size: var(--fontSize-Yu-text2); color: var(--color-txt-lightGray);}
.price__txt-gr > span{display: block;}

/* 在庫 */
.zaiko__area{display: flex; align-items: center; gap: 4px; margin: 24px 0 0;}
.zaiko__txt{font-size: var(--fontSize-Yu-text1); color: var(--color-txt-gray);}
#itemDetail .zaiko__txt-sub{margin: 4px 0 0; font-size: var(--fontSize-Yu-text2); color: var(--color-red);}

/* 数量 */
.amount__area{display: flex; align-items: center; gap: 4px; margin: 24px 0 0;}
.flex__box.amount__box{align-items: center; gap: 8px;}
#itemDetail .amount__box-txt{font-size: var(--fontSize-Yu-h5); font-weight: bold;}
.amount__box-select input{border: 1px solid var(--line-lightGray); border-radius: 5px; padding: 8px 16px; width: 73px;}
.quantity__txt{font-size: var(--fontSize-Yu-h4);}

/* カートに入れるボタン */
.button__area{margin: 24px 0 0;}
.btn-cart:after{content: none;}
.button__area-member{margin: 24px 0 0; padding: 24px; background-color: var(--color-lightGray);}
.button__area-txt{font-size: var(--fontSize-Yu-text1); text-align: center;}
.button__area-box{margin: 24px 0 0;}
.button__area-box .btn+.btn{margin: 16px 0 0;}

/* お気に入りボタン */
.button__area-wish{margin: 16px 0 0;}
.btn-wish{display: flex; justify-content: center; align-items: center; gap: 8px; border: 1px solid var(--color-txt-lightGray); background: #FFF; color: #333; font-weight: bold; padding: 8px 16px;}
.btn-wish:hover{color: #333;}
.btn-wish::after{content: none;}
.btn-wish.btn-disable{border: 1px solid var(--color-gray); background-color: var(--color-gray); color: #FFF; cursor: default;}

/* バリエーション */
.property__box{margin: 32px 0 0;}
#itemDetail .property__box-txt{margin: 0 0 16px; font-size: var(--fontSize-Yu-text2);}
#itemDetail .property__box-table{width: 100%;}
.property__box-table th,.property__box-table td{border: 1px solid #DDD;}
.property__box-table th{background: #E8E8E8;}

/*  タブ
-------------------------------------------------------------*/
.tab__container{margin: 56px 0 0;}

/* タブボタン */
.tab__ttl-container{display: flex;}
.tab_ttl{position: relative; padding: 16px 40px; font-size: var(--fontSize-Yu-h3); font-weight: bold; cursor: pointer; border-color: var(--line-lightGray) var(--line-lightGray) transparent; border-style: solid; background-color: var(--color-lightGray); color: var(--color-txt-lightGray);}
.tab_ttl:first-child{border-width: 1px 0 1px 1px; border-radius: 5px 0 0 0;}
.tab_ttl:last-child{border-width: 1px 1px 1px 1px; border-radius: 0 5px 0 0;}

.tab_ttl.active{background-color: #FFF; color: #333;}
.tab_ttl.active::after{content: ""; position: absolute; display: block; width: 100%; height: 1px; border-bottom: 3px solid #FFF; left: 0; bottom: -3px;}

/* タブ中身 */
.tab__content-box{display: none;}
.tab__content-box.show{display: block;}
.tab__content{padding: 32px 0 0; border-top: 1px solid var(--line-lightGray);}
.table_layout-box{display: flex;}
.userhtml{margin: 16px 0 0;}

/*  おすすめ商品
-------------------------------------------------------------*/
.recommend__box{background-color: var(--color-lightGray);}
.recommend__inner{margin: 0 auto; padding: 56px 24px; width: 1032px;}
#itemDetail .item__content-name{margin: 4px 0 0;}
#itemDetail .item__content-appeal{margin: 16px 0 0;}