@charset "UTF-8";
/* CSS Document */



/* FONT size
---------------------------------------------------------------------
[ px ]	[ % ]
10px 	72  %		19px 	136 %
11px 	79  %		20px 	143 %
12px 	86 %		21px 	150 %
13px 	93 %		22px 	158 %
14px 	100 %		23px 	165 %
15px 	108 %		24px 	172 %
16px 	115 %		25px 	179 %
17px 	122 %		26px 	186 %
18px 	129 %
---------------------------------------------------------------------*/




/* PC */
@media screen and (min-width: 801px), print {


#faq {
	position: relative;
	margin-top: -10px;
	z-index:1;
	background: url(../img/mainimage.jpg) no-repeat center;
	background-size: cover;
	padding: 100px;
}

	.faq_wrap{
		width:600px;
		float: right;
		}
		
		.faq_wrap dl{
			background-color: rgba(255,255,255,0.8);
			border-top:1px solid rgba(0,0,0,0.1);
			}
		.faq_wrap dl:last-child{
			border-bottom:1px solid rgba(0,0,0,0.1);
			}
		.faq_wrap dl dt{
			padding:25px;
			padding-top: 35px;
			cursor:pointer;
			position:relative;
			overflow:hidden;
			font-size: 116%;
			font-weight: bold;
			}
		.faq_wrap dl dt::after{
			content:"";
			background-image:url(../img/arrow_bottom.png);
			position:absolute;
			width:34px;
			height:34px;
			right:28px;
			top:50%;
			margin-top:-17px;
			background-size:cover;
			transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			transition: 500ms;
			-webkit-transition: 500ms;
			}
		.faq_wrap dl dt.on::after{
			background-image:url(../img/arrow_top.png);
			transition: 500ms;
			-webkit-transition: 500ms;
			}
			.faq_wrap dl dt p:nth-of-type(1){
				float:left;
				width:36px;
				box-sizing:border-box;
				margin-right: 15px;
				margin-top: 5px;
				}
			.faq_wrap dl dt p:nth-of-type(1) img {
				width: 100%;
				height: auto;
				}
			.faq_wrap dl dt p:nth-of-type(2){
				float:left;
				width:440px;
				}
		.faq_wrap dl dd{
			display:none;
			background:rgba(233,190,219,0.2);
			padding:25px;
			overflow:hidden;
			}





}






/* SP */
@media only screen and (max-width: 800px) {




#faq {
	position: relative;
	margin-top: -10px;
	z-index:1;
	background: url(../img/mainimage.jpg) no-repeat left -150px;
	background-size: 200%;
	padding: 70% 0% 0% 0%;
}
		.faq_wrap dl{
			background: #FFF;
			border-bottom:1px solid rgba(0,0,0,0.1);
			}
		.faq_wrap dl:last-child{
			}
		.faq_wrap dl dt{
			padding:25px;
			cursor:pointer;
			position:relative;
			overflow:hidden;
			font-weight: bold;
			}
		.faq_wrap dl dt::after{
			content:"";
			background-image:url(../img/arrow_bottom.png);
			position:absolute;
			width:34px;
			height:34px;
			right:28px;
			top:50%;
			margin-top:-17px;
			background-size:cover;
			transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			transition: 500ms;
			-webkit-transition: 500ms;
			}
		.faq_wrap dl dt.on::after{
			background-image:url(../img/arrow_top.png);
			transition: 500ms;
			-webkit-transition: 500ms;
			}
			.faq_wrap dl dt p:nth-of-type(1){
				float:left;
				width:30px;
				box-sizing:border-box;
				margin-right: 15px;
				}
			.faq_wrap dl dt p:nth-of-type(1) img {
				width: 100%;
				height: auto;
				}
			.faq_wrap dl dt p:nth-of-type(2){
				float:left;
				width:65%;
				}
		.faq_wrap dl dd{
			display:none;
			background:rgba(233,190,219,0.2);
			padding:25px;
			overflow:hidden;
			}



}