@charset "UTF-8";

/* =======================================
		トップページ （#page_top）
======================================= */
#page_top{
	background-color: #f5f0e2;
}
#page_top .first{
	margin-top: -80px;
}
@media screen and (min-width: 1921px) {
	#page_top .first{
		margin-top: 0;
	}
}
@media screen and (max-width: 767px) {
	#page_top .first{
		margin-top: -60px;
		margin-top: -16vw;
	}
}


/* ------ .mainvisual_box -------*/
.mainvisual_box{
	position: relative;
	padding: 0;
}
.mainvisual_box::after{
	content: '';
	background-color: #f5f0e2;
	display: block;
	position: absolute;
	bottom: 0;
	height: 10px;
	width: 100%;
}
.mainvisual_bg{
	background-image: url("../img/mainvisual_pc.png");
	background-size: 1920px auto;
	background-position: top center;
	background-repeat: no-repeat;
	height: 880px;
}
.maintext_box{
	position: absolute;
}
.maintitle{
	text-indent: -9999px;
	line-height: 0;
}
.deco_mainvisual{
	position: absolute;
	bottom: -20px;
	right: calc(50% - 450px);
}
@media screen and (min-width: 1921px) {
	.mainvisual_bg{
		background-size: 100% auto;
		position: absolute;
		top: 0;
		height: 100%;
		width: 100%;
	}
}
@media screen and (max-width: 767px) {
	.mainvisual_box{
		padding-top: 102.27%;
	}
	.mainvisual_bg{
		background-image: url("../img/mainvisual_sp.gif");
		background-size: 100% auto;
		position: absolute;
		top: 0;
		height: 100%;
		width: 100%;
	}
	.deco_mainvisual{
		display: none;
	}
}


/* ------ .main_video_box -------*/
.main_video_box{
	text-align: center;
	line-height: 0;
}
.main_video_box video{
	aspect-ratio: 1920 / 900;
	height: auto;
	min-width: 1920px;
	object-fit: cover;
	width: 100%;

	position: relative;
	left: calc(50% - 960px);
}
@media screen and (min-width: 1921px) {
	.main_video_box video{
		left: 0;
	}
}
@media screen and (max-width: 767px) {
	.main_video_box video{
		min-width: auto;
		max-width: 1920px;
		left: 0;
	}
}


/* ------ .toplink_box -------*/
.toplink_box.top{
	margin-top: -50px;
}
.toplink_box .container{
	padding-top: 60px;
	padding-bottom: 70px;
}
.toplink_box.bottom .container{
	padding-top: 50px;
}
.toplink_box .text_toplink{
	margin: 0 auto;
}
.toplink_box .text_toplink img{
	margin: 0 auto;
}
.deco_toplink{
	bottom: 40px;
	left: calc(50% - 487px);
}
@media screen and (max-width: 767px) {
	.toplink_box.top{
		margin-top: -5.867vw;
		/* margin-top: -22px; */
	}
	.toplink_box .container{
		padding-top: 10vw;
		padding-bottom: 16vw;
		/* padding-bottom: 60px; */
	}
	.toplink_box.bottom .container{
		padding-top: 0;
		padding-bottom: 32vw;
		/* padding-bottom:  120px; */
	}
	.toplink_box .ttl_main{
		margin: 0 auto 8vw;
		width: 74vw;
	}
	.toplink_box .text_toplink{
		width: 64.267vw;
	}
	.deco_toplink{
		bottom: 2.667vw;
		left: 16vw;
		width: 21.333vw;
	}
}


/* ------ .how-to-enjoy_box -------*/
.how-to-enjoy_box{
	background-image: url("../img/common/bg_top_pc.png") , url("../img/common/bg_bottom_pc.png");
	background-position: top center,bottom center;
	background-repeat: repeat-x,repeat-x;
	background-size: auto 50px,auto 50px;
	padding: 50px 0;
	margin-top: -50px;
	margin-bottom: -50px;
	overflow: hidden;
}
.how-to-enjoy_box > .inner{
	background-color: #EEE3D3;
}
.how-to-enjoy_box .text_box p{
	font-weight: bold;
	margin-bottom: 2.5em;
}
.how-to-enjoy_box .ttl_main img{
	margin: 0;
}
.how-to-enjoy_box .img_box{
	position: absolute;
	right: -220px;
	top: 50px;
}
@media screen and (min-width: 768px) {
	.how-to-enjoy_box > .inner > .container{
		padding-bottom: 120px;
		padding-top: 120px;
	}
}
@media screen and (max-width: 767px) {
	.how-to-enjoy_box{
		background-image: url("../img/common/bg_top_sp.png") , url("../img/common/bg_bottom_sp.png");
		background-position: top 2px center,bottom 2px center;
		background-repeat: repeat-x,repeat-x;
		background-size: 100% auto,100% auto;
		padding: 6.7% 0;
		margin-top: -6.7%;
		margin-bottom: -6.7%;
		position: relative;
		z-index: 100;
	}
	
	.how-to-enjoy_box .container{
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 10.667vw;
		/* padding-bottom: 40px; */
	}
	.how-to-enjoy_box .ttl_main{
		width: 61.067vw;
	}
	.how-to-enjoy_box .text_box{
		padding: 0 10vw;
		/* padding: 0 37.5px; */
	}
	.how-to-enjoy_box .text_box p{
		margin-bottom: 1.5em;
	}
	.how-to-enjoy_box .text_box p:last-child{
		margin-bottom: 0.5em;
	}
	.how-to-enjoy_box .img_box{
		position: relative;
		right: auto;
		top: auto;
		/* margin-top: -10.667vw; */
		width: 100%;
		z-index: 0;
	}
	.how-to-enjoy_box .btn_border{
		margin: 0;
		position: relative;
		width: 56vw;
		z-index: 1;
	}
	.how-to-enjoy_box .btn_border img{
		width: 42.133vw;
	}
}


/* ------ .cta_box -------*/
#page_top .cta_box .container{
	padding-top: 50px;
	padding-bottom: 0;
}
#page_top .cta_box .ttl_cta_main img{
	max-width: 706px;
	height: auto;
	width: 100%;
}
@media screen and (max-width: 767px) {
	#page_top .cta_box .container{
		padding: 12vw 5vw 0;
	}
	#page_top .cta_box .cta_top_box p.text{
		margin-bottom: 1.5em;
	}
}


/* ------ .parallax_box -------*/
@media screen and (min-width: 768px) {
	.parallax_box {
		position: relative;
		/* height: 455px; */
		padding-top: max(23.69%, 455px);
		width: 100%;
	}
	.parallax_bg{
		background-image: url('../img/bg_parallax_pc.jpg');
		background-attachment: fixed;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
	}
	.parallax_warp .how-to-enjoy_box{
		z-index: 10;
	}
	.parallax_warp .parallax_box{
		z-index: 0;
	}
	.parallax_warp .cta_box{
		z-index: 10;
	}
}
@media screen and (min-width: 1921px) {
	.parallax_bg{
		background-size: cover;
	}
}

@media screen and (max-width: 767px) {
	.parallax_box{
		padding-top: 68.53%;
		/* height: 257px; */
		position: relative;
	}
	.parallax_bg{
		background-image: url('../img/bg_parallax_sp.jpg');
		background-size: 100% auto;
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		z-index: 1;
	}
}