@charset "utf-8";

html {
	scroll-behavior: smooth;
}

body{
	background: #151515;
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 15px;
	line-height: 1.6;
	font-weight: 300;
	color:#BBBBBB;
}
main{
	margin: 0;
}
p{
	margin: 0;
}
.teko{
	font-family: "Teko", sans-serif;
}
.garamond{	
	font-family: "Cormorant Garamond", serif;
}
.eng_pri{
	font-family: 'bely-display', serif;
	letter-spacing: 1px;
}
a:link, a:visited{
	color: #E4007F;
	text-decoration: none;
	font-weight: 300;
	font-size: 28px;
	font-weight: 400;
	font-family: "Cormorant Garamond", serif;
}

@media (min-width: 590px){
	.only-mb{
		display: none;
	}
}
@media (max-width: 599px){
	.only-dt{
		display: none;
	}
	body{
		font-size: 3.1vw;
		line-height: 1.8;
	}
	a:link, a:visited{
		font-size: 7vw;
	}

}







/*================================================================== NAV */


.navarea{
	display: flex;
	width: 90%;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	margin: 1% 5%;
}
.logo img{
	margin:10% 0 0 0;
	width: 220px;
}
.menu{
	line-height: 0;
	text-align: right;
	flex-grow: 2;
}
.menu a{
	color:#fff;
	font-size: 24px;
	font-family: "Teko", sans-serif;
	font-weight: 300;
}
.menu a:hover{
	color: #E4007F;
	font-size: 24px;
	font-family: "Teko", sans-serif;
	font-weight: 300;
}
.btns{
	text-align: right;
	padding: 0 0 0 3%;
}
.btns img{
	width: 60px;
}

@media (max-width: 599px){
	.navarea{
		width: 100%;
		margin: 0;
	}
	.logo{
		width: 28%;
		margin-left: 2%;
	}
	.logo img{
		width: 100%;
	}
	.menu{
		width: 50%;
	}
	.menu a{
		font-size: 120%;
	}
	.menu a:hover{
		font-size: 120%;
	}
	.btns{
		width: 20%;
		padding: 0%;
		padding: 0 0 0 0;
	}
	.btns img{
		width:34%;
	}
	.navarea span{
		font-size: 30%;
	}
}

/*================================================================== KEYVISUAL */
#keyvisual{
	background: url("../img/keyvisual.jpg") top center #000 no-repeat;
	height: 900px;
	width: 100%;
	background-size: contain;
}
#keyvisual .heading{
	padding: 15% 5% 0 20%;
}
#keyvisual h1{
	font-family: "Cormorant Garamond", serif;
	font-size: 60px;
	font-weight: 300;
	line-height: 150%;
	margin: 0;
}
#keyvisual h2{
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.6;
}

@media (max-width: 599px){
	#keyvisual{
		background: url("../img/keyvisual-m.jpg") center right #000 no-repeat;
		width: 100%;
		height: 190vw;
		background-size: cover;
	}
	#keyvisual .heading{
		padding: 60% 5% 0 25%;
	}
	#keyvisual h1{
		font-size: 8vw;
	}
	#keyvisual h2{
		font-size: 3vw;
	}
}



/*================================================================== ANIMATION */


@keyframes scroll-anim {
	from {
	  scale: 1 1;
	}
	to {
	  scale: 1 1;
	}
  }
  
  .item {
	animation: scroll-anim linear;
	animation-timeline: scroll();
  }
  .item {
	background-color: #B9314F;
	font-size: 100px;
	border-radius: 8px;
	color: #ffffff;
	font-weight: 600;
	padding: 16px 24px;
	position: sticky;
	text-align: center;
	top: 20px;
	width: calc(1% - 1px);
  }



/*================================================================== CONTENTS */

.container{
	width: 100%;
	padding: 5% 0 0 0;
}

.container .heading{
	color: #E4007F;
	width:70%;
	margin: 0 0 5% auto;
	padding: 1% 0;
	text-align: left;
	border-top: 1px solid #E4007F;
	border-bottom: 1px solid #E4007F;
	
}
h3{
	font-size: 35px;
	line-height: 1;
	font-family: "Teko", sans-serif;
	font-weight: 300;
	margin: 0 0 0 0;
}
h4{
	font-size:15px;
	font-weight: 300;
	margin: 0;
}
h5{
	font-family: "Cormorant Garamond", serif;
	font-size: 62px;
	font-weight: 300;
	line-height: 130%;
	margin: 0 0 2%;
}
.contents-right{
	width:70%;
	margin: 0 0 5% auto;
}
.contents{
	width: 90%;
	margin: 0 auto;
}
.map{
	-webkit-filter: grayscale(100%);
	margin: 2% 0 0 0;
}
.list li{
	margin: 1% 0;
	width: 100%;
}
.emoji{
	font-size: 35px;
}
table{
	width: 100%;
	margin: 0 auto;
}
table td{
	padding: 9px 0;
}
table th{
	font-weight: normal;
	width:130px;
	text-align: left;
	vertical-align: baseline;
}
table td{
	vertical-align: baseline;
}
footer{
	background: #000;
	text-align: center;
	font-size: 20px;
	font-weight: 300;
	padding: 3%;
	margin-top: 10%;
}

@media (max-width: 599px){
	.container .heading{
		padding: 4% 0;
		width: 100%;
		margin: 10% 0 5% 0;
	}
	.contents-right{
		width:90%;
		margin: 0 auto 5% auto;
	}
	h3{
		font-size: 6vw;
		margin: 0 0 0 5%;
		font-family: "Teko", sans-serif;
	}
	h4{
		font-size: 3vw;
		margin: 0 0 0 5%;
	}
	h5{
		font-size: 8.2vw;
		margin: 2% 0 6%;
	}
	.emoji{
		font-size: 6vw;
	}
	table th{
		width: 26%;
		text-align: left;
		vertical-align: baseline;
	}
	footer{
		font-size: 4vw;
		margin-top: 20%;
		padding: 10% 3%;
	}
}