@charset "UTF-8";

/* --------------------------------

 TAB Set

-------------------------------- */
#tabset{
	display:block;
	overflow:hidden;
	padding:60px 0 60px;
}

#tabset > h2{
	display:block;
	overflow:hidden;
	text-align: center;
	margin-bottom: 45px;

	font-size:52px;
	line-height:125%;
	font-weight: 300;

}

#tabset > .innerFrame{
	width:800px;
}

#tabset .offer_btn {
    display: block;
    overflow: hidden;
    text-align: center;
    margin: 20px 0;
}

#tabset .offer_btn + p > img{
	max-width:461px;
}

ul#tabList {
    display: block;
    overflow: hidden;
    /*width:552px;*/
    margin:0 auto;
    text-align:center;
    letter-spacing:-.4em;
    position:relative;
    top:1px;
}

ul#tabList > li {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    text-align:center;
    width:184px;
}

ul#tabList > li a {
    display: block;
    overflow: hidden;
}

ul#tabList > li a img{
	max-width:158px;
}


.tabFrame{
	display:none;
	overflow:hidden;
	padding-bottom:85px;
	background-color:#f9f8f4;
	text-align:center;
}

.tabFrame > h2{
	display:block;
	overflow:hidden;
	text-align:center;
	color:#ffffff;
	font-size:32px;
	line-height:155%;
	padding:25px 0;
	background-color:#cccccc;
}

.tabBody{
	display:block;
	/*overflow:hidden;*/
	position:relative;
	margin-top:35px;
}

.tabBody h4{
	display:block;
	overflow:hidden;
	margin:20px 0 40px;
}

.tabBody p.dataTxt{
	display:block;
	overflow:hidden;
	width:472px;
	margin:0 auto;
	font-size:12px;
	line-height:175%;
	text-align:left;
}

.tabBody p.cautionTxt{
	width:472px;
	text-align:left;
	text-indent: -1em;
    padding-left: 1em;
    margin:1em auto 0;
}

.tabBody p.cautionTxt+p.cautionTxt{
	margin-top:0;
}

/*トライアルセット*/
.tabA{
	
}

.tabA.tabFrame > h2{
	background-color:#2D6782;
}


/*ノーファンデ素肌美セット*/
.tabB{
	
}

.tabB.tabFrame > h2{
	background-color:#AD155A;
}

.tabB .exItem > .exBody > h4{
	background-color:#AD155A;
}



.exItem{
	display:block;
	overflow:hidden;
	width:468px;
	margin:45px auto;
	padding:20px 20px;
	border:1px solid #231815;
	background-color:#fefcf7;
}

.exItem > h3{
	display:block;
	overflow:hidden;
	font-size:18px;
	line-height: 175%;
	margin-bottom:30px;
}

.exItem > .exBody{
	display:block;
	overflow:hidden;
	background-color:#f2f1ea;
}

.exItem > .exBody > h4{
	display:block;
	overflow:hidden;
	padding:0.5em 0;
	font-size:14px;
	margin:0 0;
	/*font-weight:bold;*/
	line-height:125%;
	color:#ffffff;
}

.exInner{
	display:block;
	overflow:hidden;
	padding:25px 35px;
}
.exInner > h5{
	display:block;
	overflow:hidden;
	font-size:24px;
	line-height:125%;
}
.exInner > h5 > span{
	font-size:16px;
	line-height:125%;
}

.exInner > ul{
	display:block;
	overflow:hidden;
	text-align: left;
	margin-top:25px;
}
.exInner > ul > li {
    display: block;
    overflow: hidden;
    text-indent: -1em;
    padding-left: 1em;
    padding-bottom: 0.75em;
    font-size: 14px;
    line-height: 155%;
}
.exInner > ul > li::before {
    content: "●";
}




/*スキンケア2ステップ定期便*/
.tabC{
	
}

.tabC.tabFrame > h2{
	background-color:#E29F26;
}
.tabC .exItem > .exBody > h4{
	background-color:#E29F26;
}


#benefitItem{
    display: block;
    overflow: hidden;
    width: 468px;
    margin: 45px auto;
    border: 1px solid #231815;
    background-color: #fefcf7;
}

#benefitItem > h4{
	display:block;
	overflow:hidden;
	margin:0 0;
	padding:0.5em 0;
	color:#ffffff;
	font-size:21px;
	line-height:125%;
	background-color:#E29F26;
}

#benefitItem > .exBody{
	/*display:block;*/
	display:flex;
	flex-wrap: wrap;
	overflow:hidden;
	padding:40px 40px;
}

#benefitItem > .exBody p{
	font-size: 12px;
	line-height: 175%;
	margin-top: 1em;
}

#benefitItem > .exBody p > span.price{
	display:block;
	overflow:hidden;
	margin-top: 1em;
}

#benefitItem > .exBody p.cautionTxt{
	line-height: 175%;
	margin-top:1em;
	text-align:left;
	width:auto;
}

.benefitData:nth-child(1){
	flex-basis: 100%;
	margin-bottom: 15px;
	border-bottom:1px solid #E29F26;
}

.benefitData:nth-child(1) img{
	float:left;
}

.benefitData:nth-child(1) > p{
	display:inline-block;
	overflow:hidden;
	text-align:left;
	margin-top:4em!important;

}

.benefitData:nth-child(2){
	flex-basis:50%;
	padding-right:20px;
}

.benefitData:nth-child(3){
	flex-basis:50%;
	padding-left:20px;
	border-left:1px solid #E29F26;
}


#baseMake.exItem{
	margin: 45px auto;
}

.showA .tabA,
.showB .tabB,
.showC .tabC{
	display:block;
}




@media (max-width: 768px) {

	#tabset{
	    padding:9vw 0 6vw;
	}

	#tabset > h2{
	    display:none;
	}

	#tabset > .innerFrame{
	    width:100%;
	}

	#tabset .offer_btn {
	    margin: 3vw 0;
	}

	ul#tabList {
	    width:100%;
	    top:1px;
	    padding: 0 1vw;
	}

	ul#tabList > li {
	    width: 33.3%;
	    padding: 0 1vw;
	}


	.tabFrame{
	    padding-bottom:0;
	    background-color:#ebe8dd;
	}

	.tabFrame > h2{
	    font-size:2.2rem;
	    padding: 0.75em 0;
	}


	.tabBody{
	    margin:0 0 6vw;
	    padding:6vw 6vw 0;
	}

	.tabBody h4{
	    margin:20px 0 40px;
	}

	.tabBody p.dataTxt{
	    width:100%;
	}


	/*トライアルセット*/

	/*ノーファンデ素肌美セット*/
	.exItem{
	    width:100%;
	    margin:6vw auto;
	    padding:3vw 3vw;
	}

	.exItem > h3{
	    font-size:1.4rem;
	    margin-bottom:6vw;
	    font-weight:normal;
	    white-space:nowrap;
	    letter-spacing:-0.01em;
	}

	.exItem > .exBody > h4{
	    padding:0.5em 0;
	    font-size:1.4rem;
	}

	.exInner{
	    padding:3vw 3vw;
	}

	.exInner > h5{
	    font-size:1.8rem;
	}
	.exInner > h5 > span{
	    font-size:1.2rem;
	}

	.exInner > ul{
	    margin-top:6vw;
	}
	.exInner > ul > li {
	    font-size: 1.2rem;
	}


	/*スキンケア2ステップ定期便*/
	#benefitItem{
	    width: 100%;
	    margin: 6vw auto;
	}

	#benefitItem > h4{
	    font-size:1.6rem;
	}

	#benefitItem > .exBody{
	    padding:0 3vw;
	    flex-direction: column;
	}
	#benefitItem > .exBody p > span.price{
	    margin-top: 0;
	}



	.benefitData{
	    /*display:block;
	    overflow:hidden;*/
	    padding:6vw 0;
	    border-top:1px dashed #333333;
	    border-bottom:none;
	}

	.benefitData picture + p{
	    display:none!important;
	}


	.benefitData img{
	    float:none;
	    width:100%;
	    height:auto;
	}


	.benefitData:nth-child(1){
		order: 1;
		border-bottom:none;
		margin-bottom: 0;
	}

	.benefitData:nth-child(2){
		order:  0;
		flex-basis:100%;
	    padding-right:0;
	    border-top:none;
	}

	.benefitData:nth-child(3){
		order: 2;
		flex-basis:100%;
	    padding-left:0;
	    border-left:none;
	}



	#baseMake.exItem{
	    margin: 6vw auto;
	}

	#baseMake.exItem +p.cautionTxt{
	    margin:0.5em 0 3vw;
	}


}