@charset "utf-8";

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

html {
  width: 100%;
	overflow-x:hidden;
}

html {
  font-size: 1px;
}

body {
  width: 100%;
	background:#fff;
  color: #fff;
  font-weight: 400;
  line-height: 1.6;
  font-feature-settings: "palt" 1;
	font-family: "a-otf-ryumin-pr6n", serif;
	font-weight: 300;
	font-style: normal;
  font-optical-sizing: auto;
  letter-spacing: 0.02em;
}

.gothic{
	font-family: "Noto Sans JP", sans-serif;
}

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

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

a:hover{
  opacity: 0.6;
}

@media screen and (max-width: 767px) {
  html {
    font-size: calc(100vw / 750);
  }

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

	.pc{
		display:none;
	}

	.sp{
		display: block;
	}
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.loader-logo {
  width: 350rem;
  opacity: 0;
}

.white-mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  transform: translateX(-100%);
  z-index: 10000;
}

#wrapper{
	opacity: 0;
	width:100%;
  max-width: 1000rem;
	position: relative;
	margin:0 auto;
	padding-top:120rem;
}

#wrapper h1{
	width:100%;
  max-width: 1000rem;
	position: relative;
	margin:0 auto;
}

#wrapper h2{
	width:84%;
  max-width: 800rem;
	position: relative;
	margin:70rem auto 0;
}

/*---------------------------------------
movie
---------------------------------------*/
#movie{
	width:100%;
  max-width: 1000rem;
	position:relative;
	margin:100rem auto 0;
}

#movie p{
	width:100%;
	font-size:40rem;
	text-align:center;
	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 10%, rgba(226, 1, 133, 1) 50%, rgba(255, 255, 255, 1) 90%);
	margin-bottom:30rem;
}

#movie p.movie_title{
	width:100%;
	font-size:40rem;
	text-align:center;
	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 10%, rgba(239, 239, 4, 1) 50%, rgba(255, 255, 255, 1) 90%);
	margin-bottom:30rem;
	color:#000;
	font-weight:bold;
	letter-spacing:1rem;
}

.video-container {
	position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video-container iframe {
	width: 100%;
	height: 100%;
}

#movie span{
	width:100%;
	display:block;
	font-size:18rem;
	text-align:center;
	font-weight:400;
	color:#000;
	margin-top:15rem;
}

a.official_btn{
  display: block;
	width:300rem;
	height:60rem;
	margin:70rem auto 0;
  border-radius: 30rem;
	background-color:#e20286;
	box-sizing:border-box;
	border:3px solid #e20286;
  font-size: 24rem;
  color: #fff;
	display: flex;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
	transition: 0.4s ;
}

a.official_btn:hover {
  color: #e20286;
	background-color:#fff;
	opacity:1.0;
}

a.official_btn2{
  display: block;
	width:300rem;
	height:60rem;
	margin:70rem auto 0;
  border-radius: 30rem;
	background-color:#efef04;
	box-sizing:border-box;
	border:3px solid #efef04;
  font-size: 24rem;
  color: #000;
	display: flex;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
	transition: 0.4s ;
	font-weight:bold;
	letter-spacing:1rem;
}

a.official_btn2:hover {
  color: #efef04;
	background-color:#000;
	border:3px solid #000;
	opacity:1.0;
}

.copyright{
	font-size:14rem;
	color:#000;
	text-align:center;
	padding:100rem 0 20rem;
	letter-spacing:1.4rem;
}



@media screen and (max-width: 767px) {
	#wrapper{
		width:660rem;
	  max-width: auto;
		position: relative;
		margin:0 auto;
		padding-top:120rem;
	}

	#wrapper h1{
		width:100%;
	  max-width: auto;
		position: relative;
		margin:0 auto;
	}

	#wrapper h2{
		width:480rem;
	  max-width: auto;
		position: relative;
		margin:50rem auto 0;
	}

	#movie{
		width:100%;
	  max-width: auto;
		position:relative;
		margin:70rem auto 0;
	}

	#movie p{
		width:100%;
		font-size:36rem;
		text-align:center;
		background: linear-gradient(90deg, rgba(255, 255, 255, 1) 10%, rgba(226, 1, 133, 1) 50%, rgba(255, 255, 255, 1) 90%);
		margin-bottom:30rem;
	}

	#movie span{
		font-size:16rem;
	}

	a.official_btn,
	a.official_btn2{
		width:380rem;
		height:70rem;
		margin:70rem auto 0;
	  border-radius: 35rem;
	  font-size: 28rem;
	}

}