@charset "utf-8";

/*---------------------------------------
common
---------------------------------------*/

* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
	font-size:16px;
	color:#000;
	line-height:1.8em;
	font-family:'Noto Sans JP', sans-serif,"メイリオ","Meiryo",verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
	 -webkit-text-size-adjust: none;
	width:100%;
	height:100%;
}

.zoom{
	position:relative;
}

.zoom p{
	position:absolute;
	z-index:100;
}

.zoom a img{
	display: block;
	transition-duration: 0.3s;
}

.zoom a:hover img{
	transform: scale(1.1);
	transition-duration: 0.3s;
}

.zoom a:hover p img{
	transform: scale(1.0);
	transition-duration: 0.3s;
}

img{
	width:100%;
	-webkit-backface-visibility: hidden;
}

a{
	transition: 0.4s ;
	text-decoration:none;
}

a:hover{
  opacity: 0.6;
}


.pc{
	display:block !important;
}

.sp{
	display: none !important;
}

.container{
	width:1200px;
	margin:0 auto;
	position:relative;
}

@media screen and (max-width:767px) {
	html{
		overflow-x: hidden;
	}

	.pc{
		display:none !important;
	}

	.sp{
		display:block !important;
		line-height:1.4;
	}

	img{
		width:100%;
		height:auto;
	}

	.container{
		width:100%;
		margin:0 auto;
	}
}


/* --------------------------------------------------
loader
 -------------------------------------------------- */
.loader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #fff;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
	z-index:9999;
	transition: 1.0s ;
}



.is_loaded .loader {
  opacity: 0;
}


/*---------------------------------------
mainvisual
---------------------------------------*/
#mainvisual{
	width:100%;
	min-width:1200px;
	height:1000px;
	margin:0 auto;
	position:relative;
	overflow:hidden;
}

#mainvisual #bg{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	background: url(../images/pc_bg.jpg) no-repeat center center;
	background-size:cover;
	z-index:1;
}

#mainvisual .bgline{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:10;
	background: url(../images/pc_line1.png) no-repeat center center;
	transform-origin: 62% 40%;
}

#mainvisual dl{
	width:1100px;
  justify-content: space-between;
  align-items: center;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin:40px auto 0;
	position:relative;
	z-index:100;
}

#mainvisual dl dt{
	width:510px;
}

#mainvisual dl dd{
	width:564px;
}

@media screen and (max-width: 767px) {
	#mainvisual{
		width:100%;
		min-width:100%;
		height:auto;
		margin:0 auto;
		position:relative;
		overflow:hidden;
	}

	#mainvisual #bg{
		width:100%;
		height:100%;
		position:absolute;
		left:0;
		top:0;
		background: none;
		background-size:cover;
		z-index:1;
	}

	#mainvisual .bgline{
		width:100%;
		height:100%;
		position:absolute;
		left:0;
		top:0;
		z-index:10;
		background:none;
	}

	#mainvisual dl{
		width:100%;
		margin:0 auto;
	}

	#mainvisual dl dt{
		width:100%;
		line-height:0;
	}

	#mainvisual dl dd{
		width:100%;
		background: url(../images/sp_bg.jpg) no-repeat center top;
		background-size:cover;
		line-height:0;
		height:150vw;
	}

	#mainvisual dl dd ul{
		width:88%;
		margin:0 auto;
		padding:8% 0 0;
	}

}

/*---------------------------------------
contents
---------------------------------------*/
#contents{
	width:1200px;
	margin:-160px auto 0;
	position:relative;
	background:rgba(103,204,255,0.8);
	z-index:1000;
}

#contents #photo1{
	width:800px;
	position:absolute;
	left:0;
	right:0;
	top:-40px;
	margin:auto;
	border:4px solid #fff;
	line-height:0;
}

#contents #photo2{
	width:800px;
	position:relative;
	margin:0 auto;
	padding-top:630px;
}

#photo2_inner{
	width:100%;
	position:relative;
	margin:0 auto;
}

#contents #photo2 p{
	width:800px;
	position:relative;
	border:4px solid #fff;
	line-height:0;
}

#contents #photo2 #fukidashi1{
	width:370px;
	position:absolute;
	bottom:490px;
	right:-90px;
}

#contents #photo2 #fukidashi2{
	width:300px;
	position:absolute;
	bottom:360px;
	left:-90px;
}

#contents #photo2 #fukidashi3{
	width:156px;
	position:absolute;
	bottom:30px;
	right:100px;
}

#contents #date{
	width:680px;
	margin:80px auto 0;
	position:relative;
}

#contents ul{
	width:1072px;
  justify-content: center;
  align-items: center;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin:55px auto 0;
	position:relative;
}

#contents ul li{
	width:248px;
	margin:0 10px 12px;
}

#contents ul li:nth-child(17),
#contents ul li:nth-child(18){
	margin-bottom:0;;
}

#contents span{
	font-size:16px;
	text-align:center;
	display:block;
	padding:40px 0 50px;
	position:relative;
}

#contents #btn_official{
	width:420px;
	margin:0 auto;
	position:relative;
}

#contents #copyright{
	font-size:12px;
	text-align:center;
	display:block;
	padding:50px 0 40px;
	position:relative;
}

#contents #cont_bg{
	width:100%;
	height:100%;
	position:absolute;
	left:0;
	top:0;
	z-index:0;
	background: url(../images/pc_line2.png) no-repeat center 840px;
	transform-origin: center 80%;
}




@media screen and (max-width: 767px) {
	#contents{
		width:100%;
		margin:-36vw auto 0;
		background:none;
	}

 	#cont_bgcolor{
		width:100%;
		height:100%;
		position:absolute;
		left:0;
		top:0;
		z-index:0;
		overflow: hidden;
	}

 	#cont_bgcolor::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background:rgba(103,204,255,1.0);
		transform: skewY(-16deg) translateY(20vw);
		z-index: -1;
	}

	#contents #photo1{
		width:86.666%;
		position:absolute;
		left:0;
		right:0;
		top:-8vw;
		margin:auto;
		border:7px solid #fff;
		line-height:0;
	}

	#contents #photo2{
		width:86.666%;
		position:relative;
		margin:0 auto;
		padding-top:70vw;
	}

	#contents #photo2 #photo2_inner p{
		width:100%;
		position:relative;
		border:7px solid #fff;
		line-height:0;
	}

	#contents #photo2 #photo2_inner #fukidashi1{
		width:56.923%;
		position:absolute;
		top:-12vw;
		right:-3vw;
	}

	#contents #photo2 #fukidashi2{
		width:46.153%;
		position:absolute;
		top:-4vw;
		left:-3vw;
	}

	#contents #photo2 #fukidashi3{
		width:23.076%;
		position:absolute;
		top:45vw;
		right:3vw;
	}

	#contents #date{
		width:90.666%;
		margin:10% auto 0;
		position:relative;
	}

	#contents ul{
		width:86.666%;
	  justify-content: center;
	  align-items: center;
		display: -webkit-flex;
		display: flex;
		-webkit-flex-wrap: wrap;
		flex-wrap: wrap;
		margin:8% auto 0;
		position:relative;
	}

	#contents ul li{
		width:48%;
		margin:0 4% 3% 0;
	}

	#contents ul li:nth-child(2n){
		margin-right:0;
	}

	#contents span{
		font-size:2.1vw;
		text-align:center;
		display:block;
		padding:6% 0 5%;
		position:relative;
	}

	#contents #btn_official{
		width:56%;
		margin:0 auto;
		position:relative;
	}

	#contents #copyright{
		font-size:1.8vw;
		text-align:center;
		display:block;
		padding:5% 0 4%;
		position:relative;
	}

	#contents #cont_bg{
		width:100%;
		height:100%;
		position:absolute;
		left:0;
		top:0;
		z-index:0;
		background: url(../images/sp_line.png) no-repeat center 56vw;
		background-size:100% auto;
	}
}

/*--------------------------------------
animation
----------------------------------------*/

#mainvisual #bg,
#mainvisual .bgline,
#mainvisual dt,
#mainvisual li,
#photo1,
#photo2 p,
#photo2 #fukidashi1,
#photo2 #fukidashi2,
#photo2 #fukidashi3,
#date,
#block ul,
#block span,
#contents #cont_bg,
#btn_official{
	opacity:0;
}


@keyframes scale_down {
  0% {
	  opacity: 0;
    transform: scale(1.6);
  }
  100% {
	  opacity: 1;
    transform: scale(1);
  }
}

@keyframes scale_up {
  0% {
	  opacity: 0;
    transform: scale(0.4);
  }
  100% {
	  opacity: 1;
    transform: scale(1);
  }
}

@keyframes fade {
  0% {
	  opacity: 0;
  }
  100% {
	  opacity: 1;
  }
}

@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translateY(50px);
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes  scale_img {
	0% { transform: scale(0.5,0.5); opacity: 0;}
	60% { transform: scale(1.2,1.2); opacity: 1;}
	100% { transform: scale(1,1); opacity: 1;}
}

.is_loaded #mainvisual #bg{
  animation: scale_down 0.8s cubic-bezier(.22,.72,.32,.98) 0.6s forwards;
}

.is_loaded #mainvisual dt{
  animation: fade 0.6s cubic-bezier(.58,.17,.81,.68) 1.2s forwards;
}

.is_loaded #mainvisual .bgline{
  animation: scale_up 0.6s cubic-bezier(.74,.07,1,.32) 1.6s forwards;
}

@media screen and (min-width: 768px) {
	.is_loaded #mainvisual li:nth-child(1){
	  animation: scale_img 0.3s ease-out 2.0s forwards;
	}
	.is_loaded #mainvisual li:nth-child(2){
	  animation: scale_img 0.3s ease-out 2.2s forwards;
	}

	.is_loaded #mainvisual li:nth-child(3){
	  animation: scale_img 0.3s ease-out 2.4s forwards;
	}
}

@media screen and (max-width: 767px) {
	#mainvisual dd.is_loaded li:nth-child(1){
	  animation: scale_img 0.3s ease-out 0.4s forwards;
	}
	#mainvisual dd.is_loaded li:nth-child(2){
	  animation: scale_img 0.3s ease-out 0.6s forwards;
	}

	#mainvisual dd.is_loaded li:nth-child(3){
	  animation: scale_img 0.3s ease-out 0.8s forwards;
	}
}




#photo1.is_loaded{
  animation: fadeInUp 1.4s cubic-bezier(.24,.92,.53,1.01) 0.4s forwards;
}

#photo2_inner.is_loaded p{
  animation: fadeInUp 1.4s cubic-bezier(.24,.92,.53,1.01) 0.4s forwards;
}

#photo2_inner.is_loaded #fukidashi1{
  animation: scale_img 0.3s ease-out 1.2s forwards;
}

#photo2_inner.is_loaded #fukidashi2{
  animation: scale_img 0.3s ease-out 1.3s forwards;
}

#photo2_inner.is_loaded #fukidashi3{
  animation: scale_img 0.3s ease-out 1.4s forwards;
}

#block.btn_in #date{
  animation: scale_img 0.3s ease-out 2.0s forwards;
}

#block.btn_in ul{
  animation: fadeInUp 1.0s cubic-bezier(.24,.92,.53,1.01) 2.4s forwards;
}

#cont_bg.line_in{
  animation: scale_up 0.6s cubic-bezier(.74,.07,1,.32) 1.4s forwards;
}

#block.btn_in span{
  animation: fade 0.4s cubic-bezier(.58,.17,.81,.68) 2.0s forwards;
}

#block.btn_in #btn_official{
  animation: fadeInUp 1.0s cubic-bezier(.24,.92,.53,1.01) 2.4s forwards;
}