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


.scrollin {
    opacity : 0;
    }	
 
.scrollin.on {
    opacity : 1;
    transition : transform 1200ms,opacity 1200ms;
    -webkit-transition : transform 1200ms,opacity 1200ms;
    }

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

	
#contents {
	margin-bottom: 200px;
	text-align: justify !important;
	text-justify: inter-ideograph !important;
	}
	
	
	#title{
		height:583px;
		background-image:url(../images/title_bg.jpg);
		background-position:center;
		background-size:cover;
		position:relative;
		}
		#title_wrap h2{
			margin-top:-169px;
			margin-top: -105px;
			display:block;
			margin-left:auto;
			margin-right:auto;
			text-align:center;
			position:relative;
			z-index:1;
  			transform : translate(0, -30px);
			}
		#title_wrap h2.on{
			transform : translate(0, 0);
			transition : transform 1200ms,opacity 1200ms;
			-webkit-transition : transform 1200ms,opacity 1200ms;
			}
			#title_wrap h2 > span{
				padding:25px 40px 40px;
				background:rgba(0,0,0,0.8);
				box-sizing:border-box;
				display:inline-block;
				font-size: 18px;
				line-height: 2em;
				letter-spacing: 0.1em;
				color:#fff;
				}
				#title_wrap h2 > span span{
					display:block;
					font-size: 12px;
					margin-bottom: 10px;
					}
					
	.intro{
		line-height: 3em;
		text-align: center;
		margin: 40px auto 0;
		font-size: 14px;
  		transform : translate(0, -30px);
		}
		.intro.on{
			transform : translate(0, 0);
			transition : transform 1200ms,opacity 1200ms;
			-webkit-transition : transform 1200ms,opacity 1200ms;
			}
		

.guide_sec{
	max-width:1400px;
	min-width:1040px;
	margin:auto;
	margin-top:170px;
	}
	
	
	.guide_sec.sec1{
		margin-top:120px;
		}
	.guide_sec.sec2{
		margin-top:270px;
		}
	
	.guide_sec .flt_r{
		float:right;
		}
	.guide_sec .flt_l{
		float:left;
		}
	
	.guide_sec .text_area.flt_r{
		text-align:left;
		padding-right: 20px;
		}
	.guide_sec .text_area.flt_l{
		text-align:right;
		padding-left: 20px;
		}
		.text_area{
			width: calc(100% - 780px);
			}
		.guide_sec .text_area > div {
			display:inline-block;
			max-width:380px;
			text-align:left;
			}
	.guide_sec h3{
		line-height:1.6em;
		font-size:16px;
		font-weight:normal;
		text-align:center;
		margin-bottom:60px;
		}
		.guide_sec h3 span.border::before{top:0;}
		.guide_sec h3 span.border::after{bottom:0;}
		
		.guide_sec h3 span.border::before,
		.guide_sec h3 span.border::after{
			content:"";
			position:absolute;
			width:1px;
			height:30px;
			-webkit-transform: scaleY(0);
			background-color:#CFCFCF;
			left:50%;
			margin-left:-1px;
			}
		.guide_sec h3.on span.border::before,
		.guide_sec h3.on span.border::after{
			-webkit-transform: scaleY(1);
			transform: scaleY(1);
			transition:2000ms;
			}
		.guide_sec h3 .border{
			position: relative;
			display: inline-block;
			padding: 55px 0;
			box-sizing: border-box;
			}
		.guide_sec h3 .border span{
			opacity:0;
			}
		.guide_sec h3 .border span.on{
			opacity:1;
			transition:2000ms;
			-webkit-transition:2000ms;
			}
		.guide_sec h3 .border span{
			}
		.guide_sec h3 + p{
			line-height:2em;
			text-align:left;
			}
		.guide_sec .time{
			text-align:center;
			margin-top:40px;
			}
			.guide_sec .time p{
				display: inline-block;
				position:relative;
				padding:0 20px;
				margin:10px;
				}
				.guide_sec .time p::after,
				.guide_sec .time p::before{
					content:"";
					display:block;
					width:8px;
					height:47px;
					position:absolute;
					top:50%;
					margin-top:-23px;
					}
				.guide_sec .time p::before{
					left:0;
					background-image:url(../images/time_bg_pc_l.png);
					}
				.guide_sec .time p::after{
					right:0;
					background-image:url(../images/time_bg_pc_r.png);
					}
			.guide_sec .time p span{
				font-size: 12px;
				display: block;
				letter-spacing: 0em;
				}
		
		.guide_sec .pht_area{
			position:relative;
			}
		.guide_sec .pht_area > div{
			position:relative;
			overflow:hidden;
			z-index:1;
			width:698px;
			height:464px;
			}
			.guide_sec .pht_area > div img{
				position:absolute;
				width:698px;
				}
			.sec1 .pht_area > div{
				height:340px;
				width:434px;
				}
			.sec1 .pht_area > div img{
				width:434px;
				}
			.guide_sec .pht_area.flt_l > div img{
				}
			.guide_sec .pht_area.flt_r > div img{
				}
			.guide_sec .pht_area{
				transform : translate(0, 0);
				}
			.guide_sec .pht_area.flt_l.on > .rel_img img,
			.guide_sec .pht_area.flt_l > div img.on{
				left:0;
				opacity : 1;
				transition : opacity 2000ms;
				-webkit-transition :opacity 2000ms;
				}
			.guide_sec .pht_area.flt_r > div img.on{
				right:0;
				opacity : 1;
				transition: opacity 2000ms;
				-webkit-transition: opacity 2000ms;
				}
			.guide_sec .pht_area .abs_img{
				position:absolute;
				right:-265px;
				bottom:-260px;
				z-index:0;
				opacity: 0;
				}
			.guide_sec .pht_area .abs_img.on{
				opacity : 1;
				transition: opacity 2000ms;
				-webkit-transition: opacity 2000ms;
				}
	
	
	
}

/* sp =============================================================================================*/
@media only screen and (max-width: 800px) and (orientation: portrait) {

	
#contents {
	margin-bottom: 200px;
	/*
	text-align: justify !important;
	text-justify: inter-ideograph !important;
	*/
	}
	
	
	#title{
		height:400px;
		background-image:url(../images/title_bg.jpg);
		background-position:center;
		background-size:cover;
		position:relative;
		}
		#title_wrap{
			position:relative;
			}
		#title_wrap h2{
			display:block;
			margin-left:auto;
			margin-right:auto;
			text-align:center;
			position:absolute;
			bottom:-50px;
			width:100%;
			z-index:1;
  			transform : translate(0, -30px);
			}
		#title_wrap h2.on{
			transform : translate(0, 0);
			transition : transform 1200ms,opacity 1200ms;
			-webkit-transition : transform 1200ms,opacity 1200ms;
			}
			#title_wrap h2 > span{
				max-width:80%;
				padding:15px 5% 20px;
				background:rgba(0,0,0,0.8);
				box-sizing:border-box;
				display:inline-block;
				font-size: 16px;
				line-height: 2em;
				letter-spacing: 0.1em;
				color:#fff;
				}
				#title_wrap h2 > span span{
					display:block;
					font-size: 12px;
					margin-bottom: 10px;
					}
					
					
	.intro{
		line-height: 2em;
		margin: 90px auto 100px;
		font-size: 14px;
		/*
		padding-left:12%;
		padding-right:12%;
		*/
		padding: 0 30px;
  		transform : translate(0, -30px);
		}
		.intro.on{
			transform : translate(0, 0);
			transition : transform 1200ms,opacity 1200ms;
			-webkit-transition : transform 1200ms,opacity 1200ms;
			}
		
		
	.guide_sec{
		margin-top:140px;
		}
	.guide_sec.sec1{
		}
	.guide_sec .text_area{
		padding:0 30px;
		}
		
	.guide_sec h3{
		line-height:1.6em;
		font-size:16px;
		font-weight:normal;
		text-align:center;
		margin-bottom:20px;
		}
		.guide_sec h3 span.border::before{top:0;}
		.guide_sec h3 span.border::after{bottom:0;}
		.guide_sec h3 span.border::before,
		.guide_sec h3 span.border::after{
			content:"";
			position:absolute;
			width:1px;
			height:30px;
			-webkit-transform: scaleY(0);
			background-color:#CFCFCF;
			left:50%;
			margin-left:-1px;
			}
		.guide_sec h3.on span.border::before,
		.guide_sec h3.on span.border::after{
			-webkit-transform: scaleY(1);
			transform: scaleY(1);
			transition:2000ms;
			}
		.guide_sec h3 .border{
			position: relative;
			display: inline-block;
			padding: 55px 0;
			box-sizing: border-box;
			}
		.guide_sec h3 .border span{
			opacity:0;
			}
		.guide_sec h3 .border span.on{
			opacity:1;
			transition:2000ms;
			-webkit-transition:2000ms;
			}
		.guide_sec h3 + p{
			line-height:2em;
			}
		.guide_sec .time{
			text-align:center;
			margin-top:20px;
			}
			.guide_sec .time p{
				display: inline-block;
				position:relative;
				padding:0 20px;
				}
				.guide_sec .time p::after,
				.guide_sec .time p::before{
					content:"";
					display:block;
					width:8px;
					height:47px;
					position:absolute;
					top:50%;
					margin-top:-23px;
					background-size:cover;
					}
				.guide_sec .time p::before{
					left:0;
					background-image:url(../images/time_bg_sp_l.png);
					}
				.guide_sec .time p::after{
					right:0;
					background-image:url(../images/time_bg_sp_r.png);
					}
			.guide_sec .time p{
				margin:  15px 12px;
				}
			.guide_sec .time p span{
				font-size: 12px;
				display: block;
				letter-spacing: 0em;
				}
			.guide_sec .pht_area > div{
				position:relative;
				z-index:1;
				}
			.guide_sec .pht_area{
				margin-top:25px;
				}
			.guide_sec .pht_area > div,
			.guide_sec .pht_area > div img{
				width:100%!important;
				}
		
}