@charset "utf-8";
#mainFV.titleInc figcaption h2 strong{
	color:#7f7fac;
	text-align:justify-all;
}
#qaPg .secTtl{width:100%;}
#qaPg .secTtl strong{color:#7f7fac;}
.qaNavi{text-align:left;}
.qaNavi .qaTtlBtn{
	display:block;
	position:relative;
	width:100%;
	line-height:1.0;
	text-align:left;
}
.qaNavi .qaTtlBtn svg{
	position:absolute;
	display:block;
	transform-origin:center center;
	transition:transform 0.4s;
}
.qaNavi .qaTtlBtn:hover svg,
.qaNavi.open .qaTtlBtn svg{transform:rotate(180deg);}
.qaNavi ul{
	max-height:0px;
	transform-origin:center top;
	transform:scaleY(0);
	transition:all 0.4s;
	overflow:hidden;
}
.qaNavi.open ul{
	max-height:9999px;
	transform:scaleY(1);
}
.qaNavi li{line-height:1.6;}
.qaNavi li a{
	display:table;
	width:100%;
}
.qaNavi li a span{
	display:table-cell;
	vertical-align:middle;
}
.qaNavi li a:after{
	content:"\03e";
	display:table-cell;
	vertical-align:middle;
	text-align:right;
}
.qaBox{width:100%;}
.qaBox .qaTtl{
	display:flex;
	align-items:center;
	text-align:center;
	line-height:1.0;
}
.qaBox .qaTtl:before,
.qaBox .qaTtl:after,
.qaBox .qaTtl span,
.qaBox dl dd div > *:first-child{display:block;}
.qaBox dl dd div ul,
.qaBox dl dd div ol{padding-left:24px;}
.qaBox dl dd div ol li{list-style:decimal;}
.qaBox dl dd div ul li{list-style:disc;}
.qaBox .qaTtl:before,
.qaBox .qaTtl:after{
	content:"";
	height:1px;
	flex-grow:1;
}
.qaBox dl{text-align:left;}
#qaPg .qaBox dl dd div,
#qaPg .qaBox dl dd div *{color:#1c1c1c;}
.qaBox dl dt{
	border-top:2px solid #fff;
	line-height:2.0;
}
.qaBox dl dt .qaItemBtn span{
	display:block;
	margin-top:3px;
}
.qaBox dl dd div > *:first-child{margin-top:5px;}
.itemBox h4{line-height:1.0;}
.itemBox dl dt,
.itemBox dl dd{
	width:100%;
	display:flex;
	justify-content:space-between;
	position:relative;
}
.itemBox dl dt{cursor:pointer;}
.itemBox dl dt:before{
	content:"Q";
	display:block;
	font-weight:bold;
}
.itemBox dl dd:before{
	content:"A";
	display:block;
	font-weight:bold;
}
.itemBox dl dt .qaItemBtn,
.itemBox dl dd div{
	display:block;
	text-align:left;
}
.itemBox dl dt .qaItemBtn:before,
.itemBox dl dt .qaItemBtn:after{
	content:"";
	display:block;
	position:absolute;
	top:50%;
	height:1px;
	background-color:#000;
	transition:transform 0.4s;
	transform-origin:center center;
}
.itemBox dl dt .qaItemBtn,
.itemBox dl dd div{flex-grow:1;}

.itemBox dl dt .qaItemBtn:before{transform:rotate(90deg);}
.itemBox dl dt.open .qaItemBtn:before{transform:rotate(0deg);}
.itemBox dl dd{
	max-height:0px;
	transform-origin:center top;
	transform:scaleY(0);
	transition:all 0.4s;
	overflow:hidden;
}
.itemBox dl dt.open + dd{
	max-height:9999px;
	transform:scaleY(1);
}
#cosmetologyDermatology *,
*[data-type="cosmetologyDermatology"] *{color:#7f7fac;}
.qaNavi[data-type="cosmetologyDermatology"] .qaTtlBtn{border:1px solid #7f7fac;}
.qaNavi[data-type="cosmetologyDermatology"] .qaTtlBtn use{fill:#7f7fac;}
*[data-type="cosmetologyDermatology"] li a,
#cosmetologyDermatology dl{background-color:#ededf3;}
.qaNavi[data-type="cosmetologyDermatology"] li{border-bottom:1px solid #7f7fac;}
#cosmetologyDermatology .qaTtl:before,
#cosmetologyDermatology .qaTtl:after,
#cosmetologyDermatology .itemBox dl dt .qaItemBtn:before,
#cosmetologyDermatology .itemBox dl dt .qaItemBtn:after{background-color:#7f7fac;}
#cosmetologyDermatology .itemBox h4{border:1px solid #7f7fac;}
#cosmetologyDermatology .itemBox dl dd:before{color:#bbbbd3;}

#artMake *,
*[data-type="artMake"] *{color:#be615f;}
.qaNavi[data-type="artMake"] .qaTtlBtn{border:1px solid #be615f;}
.qaNavi[data-type="artMake"] .qaTtlBtn use{fill:#be615f;}
*[data-type="artMake"] li a,
#artMake dl{background-color:#faf0ee;}
.qaNavi[data-type="artMake"] li{border-bottom:1px solid #be615f;}
#artMake .qaTtl:before,
#artMake .qaTtl:after,
#artMake .itemBox dl dt .qaItemBtn:before,
#artMake .itemBox dl dt .qaItemBtn:after{background-color:#be615f;}
#artMake .itemBox h4{border:1px solid #be615f;}
#artMake .itemBox dl dd:before{color:#e4aca8;}

@media screen and (max-width:749.98px){
	#mainFV.titleInc figcaption h2 strong{letter-spacing:2.1rem;}
	#qaPg .qaNavi{width:100%;}
	.qaNavi+.qaNavi{margin-top:-1px;}
	.qaNavi .qaTtlBtn{
		padding:13px 0 13px 6.4vw;
		padding-right:calc(28px + 4vw);
		font-size:1.5rem;
	}
	#qaPg .qaNavi .qaTtlBtn{
		border-left:0;
		border-right:0;
	}
	.qaNavi .qaTtlBtn svg{
		width:16px;
		right:16px;
		top:calc(50% - 5px);
	}
	#qaPg .qaBox{width:100%;}
	.qaNavi li a{
		padding:10px 20px 10px 45px;
		font-size:1.3rem;
	}
	.qaNavi li a span small{font-size:1.15rem;}
	.qaBox{margin-top:140px;}
	.qaBox .qaTtl{margin:0 5.333vw 48px;}
	.qaBox .qaTtl span{
		padding:0 20px;
		font-size:2.5rem;
	}
	.itemBox+.itemBox{margin-top:65px;}
	.itemBox h4{
		margin:0 5.333vw 30px;
		padding:12px 20px;
		border-radius:21px;
		font-size:1.5rem;
	}
	.itemBox h4 small{font-size:1.2rem;}
	.itemBox dl dt{
		padding:4px 0 4px 6vw;
		padding-right:calc(33px + 2vw);
	}
	.itemBox dl dt .qaItemBtn{font-size:1.45rem;}
	.itemBox dl dt:before,
	.itemBox dl dd:before{
		width:24px;
		font-size:1.9rem;
	}
	.itemBox dl dt .qaItemBtn,
	.itemBox dl dd div{width:calc(100% - 24px);}
	.itemBox dl dt .qaItemBtn:before,
	.itemBox dl dt .qaItemBtn:after{
		right:20px;
		width:12px;
	}
	.itemBox dl dd{
		padding:0 0 0 6vw;
		padding-right:calc(33px + 2vw);
	}
	.itemBox dl dt.open + dd{
		padding:6px 0 10px 6vw;
		padding-right:calc(33px + 2vw);
	}
	.qaBox dl dd div{font-size:1.4rem;}
}
@media screen and (min-width:750px){
	#mainFV.titleInc figcaption h2 strong{letter-spacing:1.3rem;}
	#qaPg .inner{
		display:flex;
		justify-content:space-between;
		flex-wrap:wrap;
	}
	#qaPg .qaNavi{width:49.555%;}
	.qaNavi .qaTtlBtn{
		padding:14px 36px 14px 20px;
		font-size:2.5rem;
		transition:background-color 0.4s;
	}
	.qaNavi .qaTtlBtn svg{
		width:16px;
		right:16px;
		top:calc(50% - 5px);
	}
	#qaPg .qaBox{width:100%;}
	.qaNavi li a{
		padding:10px 20px 10px 45px;
		font-size:1.6rem;
	}
	.qaNavi li a span small{font-size:1.3rem;}
	.qaBox{margin-top:140px;}
	.qaBox .qaTtl{
		width:100%;
		margin-bottom:80px;
	}
	.qaBox .qaTtl span{
		padding:0 20px;
		font-size:2.5rem;
	}
	.qaBox dl dt .qaItemBtn{font-size:1.6rem;}
	.qaBox dl dd{font-size:1.4rem;}
	.itemBox{margin-top:120px;}
	.itemBox h4{
		margin-bottom:50px;
		padding:12px 20px;
		border-radius:21px;
		font-size:1.6rem;
	}
	.itemBox h4 small{font-size:1.4rem;}
	.itemBox dl dt{padding:10px 64px 10px 24px;}
	.itemBox dl dt:before,
	.itemBox dl dd:before{
		width:32px;
		font-size:2.0rem;
	}
	.itemBox dl dt .qaItemBtn,
	.itemBox dl dd div{width:calc(100% - 32px);}
	.itemBox dl dt .qaItemBtn:before,
	.itemBox dl dt .qaItemBtn:after{
		right:26px;
		width:15px;
	}
	.itemBox dl dd{padding:0 64px 0 24px;}
	.itemBox dl dt.open + dd{padding:8px 64px 20px 24px;}
	.qaNavi[data-type="cosmetologyDermatology"] .qaTtlBtn:hover{background-color:#ededf3;}
	.qaNavi[data-type="artMake"] .qaTtlBtn:hover{background-color:#faf0ee;}
}
