@charset "utf-8";
/* ===================================================================

 file name  :index.css
 style info :トップページ

=================================================================== */

/* =============================

	overwrite

=============================== */





/* =================================== */

/* メインビジュアル
------------------------------------------------*/
#mv{
	margin-bottom: 76px;
	text-align: center;
	position: relative;
}
#mvSlider{
	overflow:hidden;
	position: relative;
}
#mvSlider .cap01,
#mvSlider .cap02{
	color :#fff;
	text-shadow: 
		0 0 3px #000,
		0 0 3px #000,
		0 0 3px #000,
		0 0 3px #000;
	font-size: 1.4rem;
}
#mvSlider .cap01{
	position: absolute;
	left: 0.5em;
	bottom: 33px;
}
#mvSlider .cap02{
	position: absolute;
	top: 58%;
	left: 0.5em;
}

#mvSlider img{
	width:100%;
	height: auto;
	max-width: initial;
	max-width: auto;
}
#mvSlider .slick-slide img{
	width:100%;
	max-width: initial;
	max-width: auto;
}
#mvSlider .slick-dots{
	position: absolute;
	top: 25px;
	right: 28px;
}
#mvSlider .slick-dots li{
	display: inline-block;
	margin: 0 0 0 11px;
}
#mvSlider .slick-dots li button{
	display: block;
	margin: 0;
	padding: 0;
	width: 13px;
	height: 13px;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	text-align: left;
	text-indent: -99999px;
	overflow: hidden;
	position: relative;
}
#mvSlider .slick-dots li button::before{
	content: "";
	display: block;
	width: 13px;
	height: 13px;
	background: #e4f5ff;
	border-radius: 50%;
	position: absolute;
}
#mvSlider .slick-dots li.slick-active button::before{
	background: #7dbce3;
}
#scroll{
	display: inline-block;
	height: 172px;
	position: absolute;
	left: 50%;
	bottom: -31px;
	transform: translateX(-50%);
}
#scroll span{
	color: #fff;
	text-shadow: 
		0 0 3px #000,
		0 0 3px #000;
	font-size: 1.4rem;
	letter-spacing: 3px;
}
#scroll span::after{
	content: "";
	display: block;
	width: 1px;
	height: 0;
	margin: 0 auto;
	background: #fff;
	box-shadow: 
		0 0 3px #000;
	animation: scroll 2s ease 0s infinite;
}



@keyframes scroll{
	0% {
		height: 0;
	}
	
	100% {
		height: 100%;
	}
}


@media screen and (max-width: 1600px){
	#mvSlider .slick-slide img{
		position: relative;
		width:1600px;
		max-width: 1600px;
		left:50%;
		margin-left: -800px;
	}
}
@media screen and (max-width: 970px){
	#mvSlider .cap01,
	#mvSlider .cap02{
		font-size: 1.2rem;
	}
	#mvSlider .cap01{
		bottom: 25px;
	}
	#mvSlider .slick-slide img{
		position: relative;
		width:200%;
		left:0;
		margin-left: -50%;
	}
	#mvSlider .slick-dots{
		top: 5px;
		right: 15px;
	}
	#mvSlider .slick-dots li{
		margin: 0 0 0 8px;
	}
	#mvSlider .slick-dots li button{
		width: 8px;
		height: 8px;
	}
	#mvSlider .slick-dots li button::before{
		width: 8px;
		height: 8px;
	}
	#scroll{
		height: 80px;
		bottom: -10px;
	}
}
@media screen and (max-width: 640px){
	#mv{
		margin: 0 0 80px;
	}
	#mvSlider .cap01,
	#mvSlider .cap02{
		font-size: 0.9rem;
	}
	#mvSlider .cap01{
		bottom: 10px;
	}
	#mvSlider .cap02{
		top: 56%;
	}
	#scroll{
		height: 30px;
		bottom: -28px;
	}
	#scroll span{
		font-size: 1rem;
	}
	#scroll span::after{
		box-shadow: 
			0 0 3px #000;
		animation: scroll 1.6s ease 0s infinite;
	}
}

.top-bnr{
	text-align: center;
	margin: 0 0 50px;
}
#info-holiday{
	margin-bottom: 50px;
	padding: 20px;
	text-align: center;
	font-size: 1.8rem;
	border: 4px double #d01e1e;
	font-weight: 700;	
}
#info-holiday h3{
	font-weight: 700;
	font-size: 2.4rem;
	color: #d01e1e;
}
#info-holiday p + p{
	font-size: 1.4rem;
	font-weight: normal;
}

/* contetns
------------------------------------------------*/
#contents{
	padding: 0 0 110px;
	text-align: center;
	position: relative;
}
#contents h2{
	margin: 0 0 30px;
	font-size: 3.2rem;
	letter-spacing: 4px;
}
#contents .list{
	position: relative;
	z-index: 10;
}
#contents .list li{
	width: 29.1666666666%;
	float: left;
}
#contents .list li + li{
	margin: 0 0 0 6.25%;
}
#contents .list li .txt{
	margin: 20px -1em 38px;
	font-size: 2.6rem;
	white-space: nowrap;
}
#contents .list li .txt span{
	color :#1f8cbf;
}
#contents .list li .btn-eft{
	width: 200px;
	margin: 0 auto;
}

#contents .bnr{
	margin: 70px 0 0;
}


#contents .particle01{
	top: -134px;
	left: 50%;
	margin: 0 0 0 600px;
}
#contents .particle02{
	left: 50%;
	margin: 0 0 0 -899px;
	bottom: -165px;
}
@media screen and (max-width: 1200px){
	#contents .particle01{
		top: -200px;
		margin: 0 0 0 400px;
		transform: scale( 0.6, 0.6);
	}
	#contents .particle02{
		margin: 0 0 0 -600px;
		transform: scale( 0.6, 0.6);
	}
}
@media screen and (max-width: 960px){
	#contents .list li .txt{
		margin: 15px 0 25px;
		font-size: 2.5vw;
	}
}

/* model
------------------------------------------------*/
#model{
	padding: 70px 0 110px;
	background: #f4f4f4;
}
#model h2{
	margin: 0 0 30px;
	text-align: center;
}
#model h2 .en{
	display: inline-block;
	margin: 0 0 12px;
	padding: 0 2em 6px;
	font-size: 3.2rem;
	letter-spacing: 4px;
	border-bottom: solid 1px #000;
}
#model h2 .ja{
	display: block;
	font-size: 1.6rem;
}

#model .catch{
	margin: 0 0 55px;
	text-align: center;
	font-size: 3.2rem;
	letter-spacing: 4px;
}
#model .model-style{
	padding: 53px 55px 40px;
	background: #fff;
	position: relative;
}
#model .model-style::before{
	content: "";
	display: block;
	width: 100%;
	height: 50px;
	background: url(../images/index/img_detail.png) 50% bottom;
	position: absolute;
	left: 0;
	right: 0;
	bottom: -50px;
}
#model .model-style ul{
	margin: 0 0 40px;
}
#model .model-style ul li{
	width: 100%;
	position: relative;
	overflow: hidden;
}
#model .model-style ul li a{
	display: block;
	overflow: hidden;
	background: #000;
}
#model .model-style ul li a h3{
	position: absolute;
	z-index: 10;
}

#model .model-style ul li a figure figcaption{
	font-size: 1.4rem;
	line-height: 1;
	color :#fff;
	text-shadow:
		0 0 3px #000,
		0 0 3px #000;
	position: absolute;
	right: 0.2em;
	bottom: 0.3em;
}
#model .model-style ul li a figure img{
	transition:all ease 0.6s;
}
#model .model-style ul li a:hover figure img{
	transform: scale(1.2, 1.2);
	opacity: 0.6;
}
#model .model-style .btn-eft{
	width: 290px;
	margin: 0 auto;
}
#model .shunchiku{
	margin-top: 95px;
}

/* price
------------------------------------------------*/
#main .price{
	background: #70c8df;
}
#main .price dl{
	max-width: 960px;
	margin: 0 auto;
	padding: 36px 10px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#main .price dl dt{
	width: 16.6666666666%;
	padding: 20px 0;
	font-size: 3.2rem;
	line-height: 1;
	color: #fff;
	letter-spacing: 2px;
	text-align: center;
	border-top: solid 1px #fff;
	border-bottom: solid 1px #fff;
}
#main .price dl dd{
	width: 40.875%;
}
#main .price dl dd + dd{
	width: 27.5%;
	align-self: flex-end;
	position: relative;
}
#main .price dl dd + dd::before{
	content: "";
	display: block;
	width: 1px;
	height: 65px;
	background: #fff;
	position: absolute;
	top: 0;
	left: -13%;
	bottom: 0;
	margin: auto 0;
}

/* plan
------------------------------------------------*/
#main .plan{
	padding: 0 0 88px;
}
#main .plan h3{
	margin: 0 0 52px;
	text-align: center;
	font-size: 4rem;
}
#main .plan h3 span{
	padding: 0 0.5em 8px;
	border-bottom: solid 1px #000;
}
#main .plan ul{
	display: flex;
	justify-content: center;
	margin: 0 0 26px;
}
#main .plan ul li:first-child{
	/*margin-right: 60px;*/
}
#main .plan dl{
	/*width: calc(100% - 325px);
	float: left;*/
	font-size: 1.4rem;
}
#main .plan dl dt{
	margin: 0 0 5px;
	font-size: 2rem;
}

#main .plan .btn-eft{
	width:290px;
	float: right;
	margin: 28px 0 0 !important;
}
#main .plan .btns{
	display: flex;
	width: 100%;
	justify-content: center;
	gap: 0 30px;
}
#main .plan .btns .btn-eft{
	float: none;
	width: 300px;
}
#main .plan .btns .btn-eft a{
	padding: 15px 0;
	border-radius: 32px;
}
#main .plan .btns .btn-eft.btn-blue a{
	background: linear-gradient(to right, rgba(68,131,199,1) 0%,rgba(41,152,213,1) 100%);
}

/* movie
------------------------------------------------*/
#main .movie{
	padding: 0 0 88px;
}
#main .movie ul{
	display: flex;
	justify-content: space-between;
}
#movieModal{
	position: fixed;
  background: rgba(20, 31, 43, 0.8);
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 999999;
	pointer-events: none;
	transform: translateX(-120%);
}
#movieModal.show{
	transform: translateX(0);
	pointer-events: auto;
}
#movieModal.hide-animate{
	opacity: 0 !important;
	transition: opacity ease .5s;
}
#movieModal .skip{
	position: absolute;
	top: 10px;
  right: 10px;
  background: #FFF;
  cursor: pointer
}
#movieModal .volume{
	position: absolute;
  top: 10px;
  right: 100px;
  z-index: 32768;
  font-size: 0;
  line-height: 0;
  width: 24px;
}
#movieModal .volume div {
  position: absolute;
  top: 0;
  right: 0;
  background: #FFF;
  cursor: pointer;
  display: none;
}
#movieModal .volume div.active{
  display: block;
}



#movieModal #movieWrap{
	position: absolute;
  width: 960px;
  max-width: 100%;
  max-height: 100vh;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  overflow: hidden;
}
#movieModal #movieWrap #movie{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: -1;
}


#movieModal #movieWrap:after {
  content: "";
  position: relative;
  padding-top: 56.21428571428571%;
  z-index: 90;
  display: block;
  overflow: hidden;
  background: rga(0,255,255,0.2);
  z-index: 5500;
  /*pointer-events: none;*/
}

	/* links
	------------------------------------------------*/
#main .links{
	padding: 100px 0 80px;
	background: #6fc6cf;
	text-align: center;
	position: relative;
}
#main .links .links-inner{
	position: relative;
}
#main .links .links-inner{
	/*max-width: 980px;*/
	max-width: 750px;
    padding: 0px 10px;
    margin: 0 auto;
}
#main .links ul{
	display: flex;
	justify-content: space-between;
}
#main .links ul li{
	/*width: 26.25%;*/
	width: 100%;
}
/*#main .links ul li:nth-child(2){
	width: 30.2083333333%;
}*/
#main .links ul li a{
	display: block;
	color :#fff;
}
#main .links ul li a h3{
	margin: 0 0 30px;
	padding: 0 0.5em;
	font-size: 3.2rem;
	display: inline-block;
	letter-spacing: 3px;
	border-bottom: solid 1px #fff;
}
#main .links ul li:nth-child(2) a h3{
	color: #fff286;
}
#main .links ul li a figure{
	margin: 0 0 28px;
}
#main .links ul li a figcaption{
	margin-bottom: -18px;
}
#main .links ul li a .txt{
	font-size: 1.7rem;
	line-height: 1.7;
}
#main .links ul li a .txt span{
	color :#fff286;
}
#main .links .particle03{
	top: 46px;
	right: -253px;
}
#main .links .particle04{
	top: 232px;
	left: -284px;
}



	/* =====================================================================================================
	   between
	 ===================================================================================================== */
	@media screen and (max-width: 800px){
	/* contetns
	------------------------------------------------*/
	#contents{
		padding: 0 0 50px;
	}
	#contents .list li{
		width: 100%;
		float: none;
	}
	#contents .list li + li{
		margin: 40px 0 0;
	}
	#contents .list li .txt{
		margin: 20px 0 38px;
	}
	
	#contents .bnr{
		margin: 40px 0 0;
		position: relative;
		z-index: 10;
	}
	#contents .bnr li{
		float: none;
		width: 100%;
		margin: 0 auto;
	}
	#contents .bnr li + li{
		float: none;
		width: 80%;
		margin: 20px auto 0;
	}
	
	#contents .particle01{
		left: auto;
		right: -8%;
		margin: 0;
	}
	#contents .particle02{
		left: -8%;
		margin: 0;
	}

	/* model
	------------------------------------------------*/
	#model .model-style{
		padding: 30px 25px;
	}
	#model .model-style ul li a figure figcaption{
		font-size: 1.2rem;
	}
	#model .shunchiku{
	margin-top: 53px;
}

	/* links
	------------------------------------------------*/
	#main .links{
		padding: 50px 0 40px;
	}
	#main .links ul{
		display: block;
	}
	#main .links ul li{
		width: 100%;
		margin: 0 0 40px
	}
	#main .links ul li:nth-child(2){
		width: 100%;
	}
	#main .links .particle03{
		display: none;
	}
	#main .links .particle04{
		display: none;
	}

}









	/* =====================================================================================================
	   smartPhone
	 ===================================================================================================== */
	@media screen and (max-width: 640px){
	.top-bnr{
		margin: 0 15px 20px;
	}
		#info-holiday{
			margin: 0 10px 50px;
			font-size: 1.6rem;
		}
		#info-holiday h3{
			font-size: 1.8rem;
		}
		#info-holiday p + p{
			font-size: 1.3rem;
		}
	#contents h2{
		margin: 0 0 15px;
		font-size: 1.8rem;
		letter-spacing: 3px;
	}
	#contents .list{
		padding: 0 50px;
	}
	#contents .list li + li{
		margin: 30px 0 0;
	}
	#main .links ul li a figcaption{
		margin-bottom: 0;
	}
	#contents .list li .txt{
		margin: 15px 0 20px;
		font-size: 1.8rem;
	}
	#contents .list li .btn-eft{
		width: 100%;
		max-width: 250px;
	}
	#contents .particle01{
		left: auto;
		right: -120px;
		margin: 0;
		transform: scale( 0.5, 0.5);
		top: -150px;
	}
	#contents .particle02{
		top: 22%;
		left: -150px;
		bottom: auto;
		transform: scale( 0.5, 0.5);
	}
	/* model
	------------------------------------------------*/
	#model{
		padding: 45px 0 55px;
	}
	#model h2{
		margin: 0 0 15px;
	}
	#model h2 .en{
		margin: 0 0 6px;
		padding: 0 2em 3px;
		font-size: 1.8rem;
		letter-spacing: 3px;
	}
	#model h2 .ja{
		font-size: 1.2rem;
	}
	
	#model .catch{
		margin: 0 0 26px;
		font-size: 2rem;
		letter-spacing: 2px;
	}
	#model .model-style{
		margin: 0 -10px;
		padding: 23px 0;
	}
	#model .model-style::before{
		height: 25px;
		background-size: auto 25px;
		bottom: -25px;
	}
	#model .model-style ul{
	}
	#model .model-style ul li{
	}
	#model .model-style ul li a figure figcaption{
		font-size: 0.9rem;
	}
	#model .model-style .btn-eft{
		width: 100%;
		max-width: 203px;
		margin: 0 auto;
	}

	/* price
	------------------------------------------------*/
	#main .price dl{
		max-width: 71.875%;
		margin: 0 auto;
		padding: 15px 10px;
		display: block;
	}
	#main .price dl dt{
		width: 100%;
		margin: 0 0 7px;
		padding: 8px 0;
		font-size: 1.6rem;
	}
	#main .price dl dd{
		width: 100%;
		padding: 0 0 10px;
		border-bottom: solid 1px #fff;
	}
	#main .price dl dd + dd{
		width: 58.2608695652%;
		margin: 0 auto;
		padding: 10px 0 0;
		border-bottom: none;
	}
	#main .price dl dd + dd::before{
		content: none;
	}
	
	/* plan
	------------------------------------------------*/
	#main .plan{
		padding: 0 0 50px;
	}
	#main .plan h3{
		margin: 0 0 25px;
		font-size: 2rem;
	}
	#main .plan h3 span{
		padding: 0 0.5em 8px;
	}
	#main .plan ul{
		/*width: 85%;*/
		margin: 0 auto;
		display: block;
		text-align: center;
	}
	#main .plan ul li{
		width: 100%;
		margin: 0 0 12px;
	}
	#main .plan .btn-eft{
		width: 63.4375%;
		max-width: 292px;
		margin: 25px auto 43px;
		float: none;
	}
	#main .plan dl{
		/*width: 100%;
		float: none;*/
		font-size: 1rem;
	}
	#main .plan dl dt{
		font-size: 1.3rem;
	}
		#main .plan .btns{
			display: block;
		}
		#main .plan .btns .btn-eft{
			max-width: 250px;
			margin: 20px auto 0 !important;
		}
		#main .plan .btns .btn-eft a{
			padding: 10px 0;
			border-radius: 22px;
		}
	
		/* movie
	------------------------------------------------*/
		#main .movie{
			padding: 0 0 50px;
		}
		#main .movie ul{
			display: block;
		}
		#main .movie ul li{
			padding: 0 40px;
		}
		#main .movie ul li:first-child{
			margin-bottom: 20px;
		}
		.is_touch #movieModal #movieWrap:after {
		  pointer-events: none;
		}
		
	
	/* links
	------------------------------------------------*/
	#main .links{
		padding: 50px 0 40px;
	}
	#main .links ul li{
		width: 100%;
		margin: 0 0 40px
	}
	#main .links ul li:nth-child(2){
		width: 100%;
	}
	#main .links ul li a h3{
		margin: 0 0 20px;
		font-size: 2.3rem;
	}
	#main .links ul li a figure{
		margin: 0 auto 20px;
		width: 54.6875%;
	}
	#main .links ul li:nth-child(2) a figure{
		width: 63.75%;
	}
	#main .links ul li a .txt{
		font-size: 1.3rem;
	}
	
}