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


.scrollin {
    opacity : 0;
    transform : translate(0, -30px);
    }	
 
.scrollin.on {
    opacity : 1;
    transform : translate(0, 0);
    transition : transform 1200ms,opacity 1200ms;
    -webkit-transition : transform 1200ms,opacity 1200ms;
    }

/* pc */
@media screen and (min-width: 801px),screen and (orientation: landscape), print {
footer{
	margin-top:0;
	}
	
#contents {
	padding-top:200px;
	padding-bottom: 200px;
	background-image:url(../images/bg.jpg);
	background-color:#000;
	background-position: top center;
	background-repeat:no-repeat;
	}
	
	
	#title_wrap {
		text-align:center;
		}
	#title_wrap  h2{
		display:inline-block;
		color:#fff;
		font-size:16px;
		line-height:1.5em;
		position:relative;
		padding: 20px;
		font-weight:normal;
		}
		#title_wrap  h2::before,
		#title_wrap  h2::after{
			content:"";
			height:100%;
			width:1px;
			background:rgba(255,255,255,0.2);
			position:absolute;
			top:0;
			-webkit-transform: scaleY(0);
			transform: scaleY(0);
			}
		#title_wrap.on  h2::before,
		#title_wrap.on  h2::after{
			-webkit-transform: scaleY(1);
			transform: scaleY(1);
			transition: 2000ms;
			}
		#title_wrap  h2::before{left:0;}
		#title_wrap  h2::after{right:0;}
	.intro{
		color:#fff;
		line-height: 3em;
		text-align: center;
		margin: 40px auto 0;
		font-size: 14px;
		}
		
	
	.faq_wrap{
		margin-right:auto;
		margin-left:auto;
		width:745px;
		margin-top:90px;
		}
		
		.faq_wrap dl{
			border-top:1px solid rgba(255,255,255,0.2);
			}
		.faq_wrap dl:last-child{
			border-bottom:1px solid rgba(255,255,255,0.2);
			}
		.faq_wrap dl dt{
			padding:25px;
			padding-bottom:25px;
			cursor:pointer;
			position:relative;
			overflow:hidden;
			}
		.faq_wrap dl dt::after{
			content:"";
			background-image:url(../images/arrow.png);
			position:absolute;
			width:4px;
			height:14px;
			right:28px;
			top:50%;
			margin-top:-7px;
			background-size:cover;
			transform: rotate(180deg);
			-webkit-transform: rotate(180deg);
			transition: 500ms;
			-webkit-transition: 500ms;
			}
		.faq_wrap dl dt.on::after{
			transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			transition: 500ms;
			-webkit-transition: 500ms;
			}
			.faq_wrap dl dt p:nth-of-type(1),
			.faq_wrap dl dd p:nth-of-type(1){
				float:left;
				width:60px;
				box-sizing:border-box;
				color:#fff;
				}
			.faq_wrap dl dt p:nth-of-type(2),
			.faq_wrap dl dd p:nth-of-type(2){
				float:left;
				width:600px;
				color:#fff;
				}
		.faq_wrap dl dd{
			display:none;
			background:rgba(255,255,255,0.1);
			padding:25px;
			overflow:hidden;
			}
		
		


	
	
	
}

/* sp =============================================================================================*/
@media only screen and (max-width: 800px) and (orientation: portrait) {
footer{
	margin-top:0;
	}
	
#contents {
	padding-bottom: 150px;
	background-image:url(../images/bg.jpg);
	background-position: top center;
	background-size:130% auto;
	background-color:#000;
	background-repeat:no-repeat;
	}
	
	
	#title_wrap {
		padding-top:50px;
		text-align:center;
		}
	#title_wrap  h2{
		display:inline-block;
		color:#fff;
		font-size:16px;
		line-height:1.5em;
		position:relative;
		padding: 20px;
		font-weight:normal;
		}
		#title_wrap  h2::before,
		#title_wrap  h2::after{
			content:"";
			height:100%;
			width:1px;
			background:rgba(255,255,255,0.2);
			position:absolute;
			top:0;
			-webkit-transform: scaleY(0);
			transform: scaleY(0);
			}
		#title_wrap.on  h2::before,
		#title_wrap.on  h2::after{
			-webkit-transform: scaleY(1);
			transform: scaleY(1);
			transition: 2000ms;
			}
		#title_wrap  h2::before{left:0;}
		#title_wrap  h2::after{right:0;}
		
				
	.intro{
		line-height: 2.5em;
		margin: 50px auto;
		font-size: 14px;
		padding-left:10px;
		padding-right:10px;
		color:#fff;
		}
	
	.faq_wrap{
		margin-left:10px;
		margin-right:10px;
		margin-top: 90px;
		}
		
		.faq_wrap dl{
			border-top:1px solid rgba(255,255,255,0.2);
			}
		.faq_wrap dl:last-child{
			border-bottom:1px solid rgba(255,255,255,0.2);
			}
		.faq_wrap dl dt{
			padding:20px 15px;
			cursor:pointer;
			position:relative;
			overflow:hidden;
			}
		.faq_wrap dl dt::after{
			content:"";
			background-image:url(../images/arrow.png);
			position:absolute;
			width:4px;
			height:14px;
			right:15px;
			top:50%;
			margin-top:-7px;
			background-size:cover;
			transform: rotate(180deg);
			-webkit-transform: rotate(180deg);
			transition: 500ms;
			-webkit-transition: 500ms;
			}
		.faq_wrap dl dt.on::after{
			transform: rotate(0deg);
			-webkit-transform: rotate(0deg);
			transition: 500ms;
			-webkit-transition: 500ms;
			}
			.faq_wrap dl dt p:nth-of-type(1),
			.faq_wrap dl dd p:nth-of-type(1){
				float:left;
				width:3em;
				box-sizing:border-box;
				color:#fff;
				}
			.faq_wrap dl dt p:nth-of-type(2),
			.faq_wrap dl dd p:nth-of-type(2){
				float:left;
				width:calc(100% - 4em);
				color:#fff;
				}
		.faq_wrap dl dd{
			display:none;
			background:rgba(255,255,255,0.1);
			padding:20px 15px;
			overflow:hidden;
			}
		
		
		
		
}