@charset "UTF-8";

/* ************************************************************************
*
*   Perie Hall - index.css
*
************************************************************************ */

header .headInner{
	max-width: 2000px;
	min-width: auto;
	padding-left: 0;
	padding-right: 0;
	position: relative;
}

/*Animation*/

header h1{
	opacity: 0;
}

.topAnim1,.topAnim2,.topAnim3{
	opacity: 0;
}

/* ----------------- ▼ Contents ▼ ----------------- */

/*------------------------------------------------
     2000px(inner:1760px)
 ----------------------------------------------- */

.contents{
	width: 100%;
	max-width: 2000px;
	margin: auto;
	padding: 207px 6% 0;
	/*padding: 215px 120px 120px;*/
	position: relative;
	/*background: #eee;*/
}

/*------------------------------------------------
     1368px(inner:1208px)
 ----------------------------------------------- */

@media screen and (max-width: 1368px){
	.contents{
		max-width: 1368px;
		margin: auto;
		padding: 168px 5.8% 0;
		/*padding: 168px 80px 80px;*/
	}
}

/*------------------------------------------------
     1184px(inner:1024px)
 ----------------------------------------------- */

@media screen and (max-width: 1184px){
	.contents{
		max-width: 1184px;
		margin: auto;
		padding: 156px 6.7% 0;
		/*padding: 156px 80px 80px;*/
	}
}

/* -------------- ▼ Main Visual ▼ -------------- */

/*------------------------------------------------
     2000px(inner:1760px)
 ----------------------------------------------- */

.mainVis{
	/*min-height: 785px;*/
	position: relative;
}
.mainVis .txt{
	padding-top: 22%;
	/*position: relative;*/
	position: absolute;
	bottom: 0;
	z-index: 102;
	opacity: 0;
}
.mainVis h2{
	margin-bottom: 48px;
	font-size: 46px;
	line-height: 1.45;
	letter-spacing: 5px;
	text-shadow: 3px 2px 10px #fff;
}
.mainVis h2 span{
	position: relative;
	display: inline-block;
	left: -25px;
	margin-right: -35px;
}
.isAnim .mainVis h2 span:after{
	width: 0;
	height: 3px;
	content: "";
	background: #40b6e8;
	display: inline-block;
	position: absolute;
	bottom: 0;
	left: 6%;
	animation: lineTop 0.5s ease-out 1.5s  forwards;
}
@keyframes lineTop {
  0% { width: 1px; }
  100% { width: 87%; }
}
.mainVis p{
	width: 20%;
	/*width: 340px;*/
	letter-spacing: 2px;
	line-height: 1.92;
}
.mainVis .img{
	width: 76%;
	position: absolute;
	right: 0;
	top: 0;
}

.mainVis .whitebox01{
	position: absolute;
	background: #fff;
	z-index: 100;
	right: 0;
	top: 0;
}


.mainVis .flex-active-slide{
	overflow: hidden;
}
.mainVis .flex-active-slide img{
	animation: zoomOut 5s ease-out;
	transform: scale(1);
}
.mainVis img{
	width: 100%;
}

/*------------------------------------------------
     1368px(inner:1208px)
 ----------------------------------------------- */

@media screen and (max-width: 1368px){
	/*.mainVis .txt{
		padding-top: 14%;
	}*/
	/*.mainVis p{
		width: 250px;
	}*/
	.mainVis img{
		max-width: 910px;
	}

}

/*------------------------------------------------
     1184px(inner:1024px)
 ----------------------------------------------- */

@media screen and (max-width: 1184px){
	.mainVis .txt{
		padding-top: 9%;
	}
	/*.mainVis p{
		width: 210px;
	}*/
	.mainVis img{
		max-width: 770px;
	}
}

/* -------------- ▼ stage2 ▼ -------------- */

#stage2 .contents{
	top: 7%;
}
#stage2 h2{
	margin-bottom: 28px;
	font-size: 18px;
	letter-spacing: 4px;
}
#stage2 h2 span{
	width: 40px;
	height: 40px;
	margin-right: 20px;
	padding: 10px;
	background: #000;
	font-family:Garamond, serif;
	font-size: 24px;
	color: #fff;
	text-align: center;
	display: inline-block;
	letter-spacing: 0px;
}
#stage2 li p{
	margin: 15px 0 25px;
	font-size: 14px;
	line-height: 1.85;
}
#stage2 li .more{
	width: 50px;
}


.animate .animList_top li{
	position: relative;
	left: 40px;
	opacity: 0;
}


/* -------------- ▼ stage3 ▼ -------------- */
/*
#stage3 .contents{
	top: 9%;
}
#stage3 h2{
	margin-bottom: 55px;
	font-size: 29px;
}
#stage3 .news{
	width: 60%;
	padding: 0 6%;
	float: left;
	opacity: 0;
}
#stage3 .news dl{
	width: 100%;
	display: table;
	border-bottom: 1px solid #d9d9d9;
	background: url(../img/arrow_bk.png) no-repeat 98% center;
}
#stage3 .news dt,
#stage3 .news dd{
	display: table-cell;
	vertical-align: middle;
	text-align: left;
}
#stage3 .news dt{
	width: 110px;
	padding-right: 40px;
	font-size: 15px;
}
#stage3 .news dd a{
	font-size: 16px;
	font-weight: 700;
}
#stage3 .download{
	width: 40%;
	padding: 0 6%;
	float: left;
	opacity: 0;
}
#stage3 .download .btn{
	width: 100%;
	padding: 23% 0;
	background: #f08845;
	text-align: center;
}*/


#stage3 .stage3_inner{
	width: 100%;
	margin: 0 auto;
}

#stage3 .topAnim3_1{
	opacity: 0;
}

#stage3 h2{
	margin-bottom: 25px;
	font-size: 32px;
	letter-spacing: 5px;
	text-align: center;
/*	width: 261px;
    float: left;*/
}


#stage3 .lead{
	margin-bottom: 45px;
	line-height: 30px;
	text-align: center;
	font-size: 16px;
/*    width: 400px;
    float: left;*/
}
#stage3 ul{
    width: 80%;
    margin: 0 auto;
    overflow: hidden;
    opacity: 0;
}
#stage3 ul li{
    float: left;
    width: 48%;
    padding: 4% 20px 4.1% 60px;
    line-height: 28px;
    font-size: 16px;
}
#stage3 ul li a{
	background: url(../img/ar_r.png) no-repeat right center;
	background-size: 7px auto;
}
#stage3 ul li.pdf{
	background: url(../img/ico_pdf.png) no-repeat 20px center;
	background-size: 27px auto;
}
#stage3 ul li.doc{
	background: url(../img/ico_doc.png) no-repeat 20px center;
	background-size: 27px auto;
}
#stage3 ul li:nth-child(odd){
	margin-right: 4%;
}
#stage3 ul li{
	border-bottom: 1px solid #e8e8e8;
}
#stage3 ul li:nth-child(-n+2){
	border-top: 1px solid #e8e8e8;
}

/*--



/* -------------- ▼ stage4 ▼ -------------- */

#stage4{
	position: relative;
}
#stage4 .contents{
	top: 0;
}
#stage4 .txt{
	/*width: 20%;*/
	height: 370px;
	position: absolute;
	bottom: 40px;
	z-index: 1000;
	padding-top: 0;
}
#stage4 h2{
	margin-bottom: 50px;
	font-size: 32px;
	letter-spacing: 5px;
}
#stage4 .address{
	margin-bottom: 30px;
	padding-left: 30px;
	background: url(../img/ico_pin.png) no-repeat left center;
	background-size: 17px;
}
#stage4 .access dt{
	margin-bottom: 15px;
	padding:4px 0 4px 30px;
	background: url(../img/ico_train.png) no-repeat left center;
	background-size: 20px;
	font-size: 14px;
	font-weight: 700;
}
#stage4 .access dd{
	margin-bottom: 10px;
}
#stage4 mark{
	padding: 4px 7px;
	background: #ededed;
	display: inline-block;
}

#stage4  dd span.from{
	width: 200px;
	display: inline-block;
}



#stage4 .topAnim4_3{
/*	width: 71%!important;*/
	position: absolute;
	right: 0;
	top: 0;
}

#stage4 .img_box{
	position: absolute;
	right: 0;
	top: 0;
}

#stage4 .stage4_img_inner{
	width: 100%;
	height: 100%;
	position: relative;
}
#stage4 .f_img{
	width: 100%;
}

#stage4 img{
	width: 100%;
	max-width: 1335px;
}
#stage4 .more a{
	width: 120px;
	margin-top: 25px;
	padding: 8px 0;
	background: url(../img/arrow_bk_02.png) no-repeat center right 8px;
	background-size: 4px auto;
	border: 1px solid #000;
	font-family:Garamond, serif;
	display: block;
	text-align: center;
	transition: all ease .5s;
}
#stage4 .more a:hover{
	color: #fff;
	background: #000 url(../img/arrow_wt_02.png) no-repeat center right 8px;
	background-size: 4px auto;
	opacity: 1;
}

/*------------------------------------------------
     1368px(inner:1208px)
 ----------------------------------------------- */

/*@media screen and (max-width: 1368px){
	#stage4 .txt{
		padding-top: 4%;
	}
}*/

/*------------------------------------------------
     1184px(inner:1024px)
 ----------------------------------------------- */

/*@media screen and (max-width: 1184px){
	#stage4 .txt{
		padding-top: 0%;
	}
}*/

/* ----------------- ▼ Footer ▼ ----------------- */

/*#globalFooter{
	position: fixed;
	bottom: -500px;
	left: 0;
}*/

/*------------------------------------------------
     SP View
 ----------------------------------------------- */

@media screen and (max-width: 768px) {
		
	/* ----------------- ▼ Contents ▼ ----------------- */

	.contents{
		max-width: 768px;
		padding: 6%;
	}
	
	/* -------------- ▼ Main Visual ▼ -------------- */
	
	.mainVis{
		overflow: hidden;
	}
	.mainVis .txt{
		padding-top: 12%;
		position: relative;
	}
	.mainVis h2{
		margin-bottom: 8%;
		font-size: 26px;
		letter-spacing: 4px;
	}
	.mainVis h2 span{
		left: -13px;
		margin-right: -22px;
	}
	.isAnim .mainVis h2 span:after{
	height: 2px;
     }

	.mainVis p{
		width: 100%;		
	}
	.mainVis .img{
		width: 100%;
		position: relative;
	}
	
	/* -------------- ▼ stage2 ▼ -------------- */

	#stage2 .contents{
		padding-right: 0;
		padding-left: 0;
	}
	#stage2 h2 span{
		font-size: 22px;
	}
	#stage2 li p{
		font-size: 12px;
	}
	
	/* -------------- ▼ stage3 ▼ -------------- */
	/*
	#stage3 h2{
		padding: 8% 0;
		margin-bottom: 0;
		font-size: 25px;
	}
	#stage3 .news{
		width: 100%;
		margin-bottom: 8%;
		padding: 0;
	}
	#stage3 .news h2{
		border-top: 1px solid #d9d9d9;
		border-bottom: 1px solid #d9d9d9;
	}
	#stage3 .news dl{
		padding: 8% 0;
		background: url(../img/arrow_bk_sp.png) no-repeat 98% center;
		background-size: 8px auto;
	}
	#stage3 .news dt,
	#stage3 .news dd{
		padding-right: 8%;
		display: block;
	}
	#stage3 .news dt{
		width: 100%;
		font-size: 12px;
	}
	#stage3 .news dd a{
		font-size: 13px;
	}
	#stage3 .download{
		width: 100%;
		padding: 0;
	}
	#stage3 .download .btn{
		margin-top: 2%;
		padding: 12% 20%;
	}*/

	#stage3 .stage3_inner{
	width: 100%;
	margin: 0 auto;
     }

     #stage3 .topAnim3_1{
     	opacity: 0;
     }

     #stage3 h2{
      margin: 8% 0 5%;
      text-align: left;
     /*	font-size: 32px;
     	letter-spacing: 5px;
     	text-align: center;*/
     /*	width: 261px;
         float: left;*/
     }

     #stage3 .lead{
       width: 100%;
       margin: 0 auto;
       line-height: 2;
       text-align: left;
       font-size: 116%;
     /*    width: 400px;
         float: left;*/
     }
     #stage3 ul{
		width: 100%;
		margin: 10% auto;
		border-top: 1px solid #e8e8e8;
         opacity: 1;
     }
     #stage3 ul li{
		float: none;
		width: 100%;
		padding: 10% 5% 10% 16%;
		font-size: 133%;
     }
     #stage3 ul li a{
		background: url(../img/ar_r.png) no-repeat right center;
		background-size: 3% auto;
     }
     #stage3 ul li.pdf{
		background: url(../img/ico_pdf.png) no-repeat 6% center;
		background-size: 7% auto;
     }
     #stage3 ul li.doc{
		background: url(../img/ico_doc.png) no-repeat 6% center;
		background-size: 7% auto;
     }
     #stage3 ul li:nth-child(odd){
		margin-right: 0;
     }
     #stage3 ul li{
		border-bottom: 1px solid #e8e8e8;
     }
     #stage3 ul li:nth-child(-n+2){
		border-top: none;
     }


	/* -------------- ▼ stage4 ▼ -------------- */

	#stage4 .txt{
		width: 100%;
		height: auto;
		position: relative;
		padding-top: 0;
		bottom: 0;
	}
	#stage4 h2{
		margin-bottom: 8%;
	}
	#stage4 .access dt{
		min-height: 40px;
		padding: 2px 0 0 30px;
		background-position: left top;
	}
	#stage4 .img_box{
	position: relative;
	right: 0;
	top: 0;
    }

    	#stage4  dd span.from{
	width: 180px;
	display: inline-block;
}

#stage4 .topAnim4_3{
/*	width: 71%!important;*/
	position: relative;
	right: 0;
	top: 0;
}

#stage4 .img_box{
	position: relative;
	right: 0;
	top: 0;
}

#stage4 .stage4_img_inner{
	width: 100%;
	height: 100%;
	position: relative;
}
#stage4 .f_img{
	width: 100%;
	margin-top: 11%;
}
	#stage4 .img{
		width: 100%!important;
		margin-top: 11%;
		position: static;
	}
	#stage4 .more{
		text-align: center;
	}
	#stage4 .more a{
    	margin: 10% auto;
        width: 80%;
        font-size: 23px;
        background: url(../img/arrow_bk_02.png) no-repeat center right 14px;
        background-size: 9px auto;
        border: 1px solid #000;
        padding: 15px 0;
	}
	#stage4 .more a:hover{
		color: #000;
		background: url(../img/arrow_bk_02.png) no-repeat center right 14px;
		background-size: 9px auto;
		opacity: 1;
	}










	
}

@media screen and (max-width: 414px) {

	#stage2 .owl-item:nth-child(4) h2 span{
		float: left;
	}
	
}