@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:-160px;
			width:200px;
			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{
				width:100%;
				padding-top:25px;
				height:353px;
				box-sizing:border-box;
				display:inline-block;
				background:rgba(0,0,0,0.8);
				}
			#title_wrap h2 > span img{
				width:118px;
				}
	.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;
		font-size:16px;
		font-weight:normal;
		text-align:center;
		margin-bottom:60px;
		}
		.guide_sec h3 span.border::before{left:0;}
		.guide_sec h3 span.border::after{right:0;}
		.guide_sec h3 span.border::before,
		.guide_sec h3 span.border::after{
			content:"";
			position:absolute;
			width:1px;
			height:100%;
			-webkit-transform: scaleY(0);
			background-color:#CFCFCF;
			top:0;
			}
		.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: 25px 30px;
			width: 85px;
			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{
			-webkit-writing-mode: vertical-rl;
			-ms-writing-mode: vertical-rl;
			writing-mode: vertical-rl;
			}
		.guide_sec h3 + p{
			line-height:2.4em;
			text-align: justify;
			text-justify: inter-ideograph;
			}
		.guide_sec .time{
			text-align:center;
			margin-top:20px;
			}
			.guide_sec .time img{
				height:84px;
				}
		
		.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{
			position:absolute;
			bottom:-50px;
			width:100%;
			left:0;
			display:block;
			text-align:center;
			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{
				width:150px;
				box-sizing:border-box;
				display:inline-block;
				background:rgba(0,0,0,0.8);
				box-sizing:border-box;
				padding:25px 20px;
				}
			#title_wrap h2 > span img{
				width:100px;
				max-width:100%;
				}
				
	.intro{
		line-height: 2em;
		margin: 90px auto 100px;
		font-size: 14px;
		padding-left:30px;
		padding-right: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{
		margin-top:20px;
		}
	.guide_sec .text_area{
		padding:0 30px;
		}
		
	.guide_sec h3{
		line-height:1;
		font-size:16px;
		font-weight:normal;
		text-align:center;
		margin-bottom:20px;
		}
		.guide_sec h3 span.border::before{left:0;}
		.guide_sec h3 span.border::after{right:0;}
		.guide_sec h3 span.border::before,
		.guide_sec h3 span.border::after{
			content:"";
			position:absolute;
			width:1px;
			height:100%;
			-webkit-transform: scaleY(0);
			background-color:#CFCFCF;
			top:0;
			}
		.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: 15px 30px;
			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:2.4em;
			}
		.guide_sec .time{
			text-align:center;
			margin-top:15px;
			}
			.guide_sec .time img{
				height:84px;
				max-width:80%;
				}
			.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;
				}
		
}