@charset "Shift_JIS";
/*------------------------------*/
/*　　　　　商品ページ　　　　　　*/
/*------------------------------*/

/* この商品は『T-SPARK』商品です。 */
.tsparkitem {
    display: flex;
    align-items: center;
    margin-top: 60px;
}
.tsparkitem {
    color: #fff;
    font-size: 16px;
}

@media screen and (max-width: 768px)  {
    .tsparkitem {
        display: block;
        margin-top: 40px;
    }
    .tsparkitem img {
        width: 170px;
        margin-left: -10px;
    }
}
/* end この商品は『T-SPARK』商品です。 */


@media screen and (min-width: 768px) {
    .tt_block18__btnGroup a{
        color: #31cdff !important;
    }
    .items-wrap {
        position: relative;
        background: url(../img/usr/tspark/bg_detail_list_arrow.png) no-repeat left top;
        padding: 40px 0 38px;
        box-sizing: border-box;
        /* background-position: calc(50% - -80px) top; */
        }
        .is-label-detail-page .tt_block4 .dv_recommend, .is-label-detail-page #tagsProduct .dv_recommend {
        position: relative;
        width: calc(100% - 284px);
        margin: 0 0 0 284px;
        margin: 0 0 0 calc(50% - 440px);
    }

}

@media screen and (max-width: 768px)  {
    .is-sp.is-label-detail-page #recommender_【spec_id】{
        padding: 20px 0 40px !important;
    }
    .is-sp.is-label-detail-page #pr100-7 .tt_block4 .block-tspark__detail-items-wrap .dv_recommend {
        width: 90% !important;
    }
}


/* モーダル */
.productText{
    font-family:"ヒラギノ角ゴ Pro W3","HIragino Kaku Gothic Pro W3","HIragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
    text-align: center;
    font-size: 1.2rem;
    margin: 1.5rem 0 0.5rem 0;
}
.expansion{  
    display: block;
    width: 100%;
    max-width: 170px;
    margin: 15px auto 0 auto;
	font-size: 0.6rem;
	line-height: 1rem;
	text-align: center;
}
.expansion img{width: 13%;max-width: 22px;}
.thumPhoto{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 90%;
    margin: 2rem auto;
}
.thumPhoto li{ width: 16%; margin-bottom: 0.6rem;}
.thumPhoto li a img {width: 100%;}
		.modal{
			display: none;
			height: 100vh;
			position: fixed;
			top: 0;
			width: 100%;
            z-index: 100000;
            margin: auto;
		}
		.modal__bg{
			background: rgba(0,0,0,0.8);
			height: 100vh;
			position: absolute;
			width: 100%;
		}
		.modal__content{
			left: 50%;
			position: absolute;
			top: 50%;
			transform: translate(-50%,-50%);
			width: 50%;
		}
        .productPhoto{ width: 100%; max-width: 500px;}
        .closeBtn {
            display: block;
            width: 170px;
            background-color: #a1a1a1;
            color: #fff;
            text-align: center;
            text-decoration: none;
            padding: 2% 6%;
            margin: 4% auto 0;
            border-radius: 34px;
        }
.cardthum{
    width: 94%;
}
.cardthum li{
    width: 16%;
}

.cardthum2 li{
    width: 16%;
}

@media screen and (max-width: 768px) {
.productText { font-size:0.9rem;padding: 0.6rem 1rem 1rem;}
.thumPhoto li{ width: 48%;}
.cardthum{width: 90%; justify-content: space-between;margin: 0.5rem auto 2rem auto;}
.cardthum li{ width: 48%;}
.cardthum2 li{ width: 48%;}
.modal__content{ width: 90%;}

.movieIn01{
    position: relative;
    padding-bottom: 56%;
}

.movieIn01 iframe{
    position: absolute;
    left: 0;
    top: 0;
    max-width: none;
    height: 100%;
}

.benefitsText{font-size: 0.9rem; line-height: 1.5rem;}
}
/* end モーダル */

/* コメント4共通 */
@media screen and (max-width: 640px) {
    #wrapper .txt_wrap{color: #fff; padding: 3%;text-align: left;}
    #wrapper .txt_wrap p{font-size: 12px;}
}
.benefitscardBox {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 1% auto 1%;
    width: 90%;
}
.benefitscardBox li {
    list-style: none;
    width: 21%;
}
.castBox {
    text-align: center;
}
/* end コメント4共通 */

@media screen and (max-width: 640px)  {
    #ajax_itemhistory {
        display: none;
    }
}

.accessory_list_ .tt_title1-1 {text-align: center !important;}