@charset "utf-8";

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

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

}

html {
  font-size: 1px;
}

#wrapper{
	width:100%;
	position: relative;
}

.container {
  max-width: 1000rem;
  margin: 0 auto;
	position: relative;
	background: var(--bg, linear-gradient(180deg, #000 11.16%, #432449 28.67%, #872F39 55.57%, #324 82.48%));
}

.pc{
	display:block;
}

.sp{
	display: none;
}

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

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

@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;
	}
}

body {
  width: 100%;
	background:#000;
  color: #fff;
  font-weight: 400;
  line-height: 1.6;
  font-feature-settings: "palt" 1;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  letter-spacing: 0.02em;
}

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

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

a:hover{
  opacity: 0.6;
}

/* --------------------------------------------------
loader
 -------------------------------------------------- */
.loader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
	display: flex;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
	z-index:9999;
	transition: 1.0s ;
}



.is_loaded .loader {
  opacity: 0;
}

/*---------------------------------------
mainvisual
---------------------------------------*/
#mainvisual{
	width:100%;
	height:51vw;
	margin:0 auto;
	position:relative;
	background: url(../images/mainvisual.jpg) no-repeat center top;
	background-size:100% auto;
}

#mainvisual #imax{
	width:33vw;
	position:absolute;
	top:2.5vw;
	right:16.5vw;
}

#mainvisual h1{
	width:31vw;
	position:absolute;
	top:11vw;
	right:17.5vw;
}

#mainvisual #date1{
	width:14vw;
	position:absolute;
	bottom:5.5vw;
	right:34vw;
}

#mainvisual #date2{
	width:14vw;
	position:absolute;
	bottom:5.5vw;
	right:19vw;
}

#mainvisual #copy{
	width:28vw;
	position:absolute;
	bottom:2vw;
	right:19.4vw;
}

#mainvisual #top_copy{
	width:22vw;
	position:absolute;
	bottom:0.2vw;
	left:0.5vw;
}

#mainvisual #top_billing{
	width:24vw;
	position:absolute;
	top:1.5vw;
	left:1.6vw;
}


@media screen and (max-width: 767px) {
	#mainvisual{
		width:100%;
		height:1092rem;
		margin:0 auto;
		position:relative;
		background: url(../images/mainvisual_sp.jpg) no-repeat center top;
		background-size:100% auto;
	}

	#mainvisual h1{
		width:388rem;
		position:absolute;
		top:460rem;
		right:5rem;
	}

	#mainvisual #date1{
		width:41vw;
		position:absolute;
		bottom:13vw;
		right:51vw;
	}

	#mainvisual #date2{
		width:41vw;
		position:absolute;
		bottom:13vw;
		right:7.5vw;
	}

	#mainvisual #copy{
		width:71vw;
		position:absolute;
		bottom:4vw;
		right:0;
		left:0;
		margin:auto;
	}
}


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

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#movie p{
	font-size:16rem;
	text-align:center;
	margin-top:10rem;
}

#title{
	text-align: center;
	font-feature-settings: 'palt' on;
	text-shadow: 0 0 45.513px #BD429A, 0 0 26.007px #BD429A, 0 0 15.171px #BD429A, 0 0 7.585px #BD429A, 0 0 2.167px #BD429A, 0 0 1.084px #BD429A;
	font-size: 32rem;
	font-weight: 500;
	line-height: 150%; /* 48px */
	margin-top:140rem;
}

#lead{
	text-align: center;
	font-size: 18rem;
	margin-top:10rem;
}

@media screen and (max-width: 767px) {
	#movie{
		width:670rem;
		position:relative;
		margin:100rem auto 0;
	}

	#movie p{
		font-size:26rem;
		text-align:center;
		margin-top:20rem;
	}

	#title{
		text-align: center;
		font-feature-settings: 'palt' on;
		text-shadow: 0 0 45.513px #BD429A, 0 0 26.007px #BD429A, 0 0 15.171px #BD429A, 0 0 7.585px #BD429A, 0 0 2.167px #BD429A, 0 0 1.084px #BD429A;
		font-size: 54rem;
		font-weight: 500;
		line-height: 150%; /* 48px */
		margin-top:120rem;
	}

	#lead{
		text-align: left;
		font-size: 32rem;
		width:670rem;
		position:relative;
		margin:20rem auto 0;
	}
}


/*---------------------------------------
info
---------------------------------------*/
#info{
	width:850rem;
	margin:50rem auto 0;
	box-sizing:border-box;
	border:1px solid #D886DB;
	padding-bottom:40rem;
}

#info h3{
	color: #000;
	font-size: 22rem;
	font-weight: 700;
	line-height: 180%; /* 39.6px */
	background-color:#D886DB;
	text-align:center;
}

#info h4{
	color: #F3EE94;
	font-size: 18rem;
	font-weight: 700;
	line-height: 180%; /* 32.4px */
	margin-top:30rem;
	padding:0 50rem;
}

#info p{
	font-size: 18rem;
	padding:0 50rem;
}

#info span{
	display:block;
	font-size: 12rem;
	padding:0 50rem;
}

@media screen and (max-width: 767px) {
	#info{
		width:670rem;
		margin:80rem auto 0;
		box-sizing:border-box;
		border:2px solid #D886DB;
		padding-bottom:80rem;
	}

	#info h3{
		color: #000;
		font-size: 40rem;
		font-weight: 700;
		line-height: 250%;
		background-color:#D886DB;
		text-align:center;
	}

	#info h4{
		color: #F3EE94;
		font-size: 32rem;
		font-weight: 700;
		line-height: 180%; /* 32.4px */
		margin-top:40rem;
		padding:0 50rem;
	}

	#info p{
		font-size: 32rem;
		padding:0 50rem;
	}

	#info span{
		font-size: 24rem;
		padding:0 50rem;
		margin-top:15rem;
	}
}


/*---------------------------------------
caution
---------------------------------------*/
#caution{
	width:850rem;
	margin:60rem auto 0;
	box-sizing:border-box;
}

.title{
	color: #000;
	text-align: center;
	font-size: 16rem;
	font-weight: 500;
	line-height: 180%; /* 28.8px */
	background-color: #D886DB;
	padding:2rem 0;
}

#caution p{
	font-size: 16rem;
	margin-top:20rem;
}

@media screen and (max-width: 767px) {
	#caution{
		width:670rem;
		margin:100rem auto 0;
		box-sizing:border-box;
	}

	.title{
		color: #000;
		text-align: center;
		font-size: 32rem;
		font-weight: 500;
		line-height: 230%;
		background-color: #D886DB;
		padding:5rem 0;
	}

	#caution p{
		font-size: 24rem;
		margin-top:30rem;
	}
}

/*---------------------------------------
list
---------------------------------------*/
.tel_link{
  pointer-events: auto;
  text-decoration: underline;
  color:#fff; 
}
.tel_link:hover{
  text-decoration: none;
}

#list{
	width:850rem;
	margin:60rem auto 0;
	box-sizing:border-box;
}

#list ul{
	width:850rem;
	display: flex;
  justify-content: space-between;
  align-items: stretch;
	flex-wrap: wrap;
	margin:20rem auto 0;
}

#list ul li{
	width:130rem;
}

#list ul li a{
	width:133rem;
	height:40rem;
	position:relative;
	color:#000;
	font-size:15rem;
	display: flex;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
	background-color:#fff;
}

#list ul li a::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10rem;
  width: 7rem;
  height: 7rem;
  margin: auto;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: translateY(-1px) rotate(135deg);
  box-sizing: border-box;
}

@media screen and (max-width: 767px) {
	.tel_link{
		pointer-events: auto;
		text-decoration:underline;
	}

	#list{
		width:670rem;
		margin:60rem auto 0;
		box-sizing:border-box;
	}

	#list ul{
		width:670rem;
		display: flex;
	  justify-content: space-between;
	  align-items: stretch;
		flex-wrap: wrap;
		margin:50rem auto 0;
	}

	#list ul li{
		width:326rem;
		margin-bottom:15rem;
	}

	#list ul li a{
		width:326rem;
		height:100rem;
		position:relative;
		color:#000;
		font-size:32rem;
		display: flex;
	  justify-content: center;
	  align-items: center;
		flex-wrap: wrap;
		background-color:#fff;
	}

	#list ul li a::after {
	  content: '';
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  right: 20rem;
	  width: 18rem;
	  height: 18rem;
	  margin: auto;
	  border-top: 4rem solid #000;
	  border-right: 4rem solid #000;
	  transform: translateY(-4rem) rotate(135deg);
	  box-sizing: border-box;
	}
}

/*---------------------------------------
block
---------------------------------------*/
.block{
	width:850rem;
	margin:50rem auto 0;
	box-sizing:border-box;
}

.block h2{
	font-size: 30rem;
	font-weight: 400;
}

.block table{
	width:100%;
	margin-top:20rem;
	border-collapse:collapse;
	border-spacing:0;
	box-sizing:border-box;
	font-size:13rem;
}

table tr:first-child {
  background-color: #D886DB;
	color:#000;
}

table td,
table th {
  position: relative;
  padding: 1rem;
}

table tr:not(:first-child) td::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background-color: #C6C5C5;
	opacity: 1; 
}

table td:nth-child(1) {
	text-align:center;
  width: 90rem;
}

table td:nth-child(2) {
  width: 380rem;
}

table td:nth-child(3) {
  width: 130rem;
}

table td:nth-child(4) {
  width: 250rem;
}

table td {
  padding:15rem 0;
}

.block ul{
	width:850rem;
	margin:20rem auto 0;
	box-sizing:border-box;
	font-size:12rem;
}

.block ul li{
	position: relative;
  margin-left: 1.2em;
	margin-top:5rem;
}

.block ul li::before {
  content: "※";
  position: absolute;
  left: -1.2em;
}

#kyushu.block{
	padding-bottom:120rem;
}

@media screen and (max-width: 767px) {
	.block{
		width:670rem;
		margin:80rem auto 0;
		box-sizing:border-box;
	}

	.block h2{
		font-size: 38rem;
		font-weight: 400;
	}

	.block table{
		width:100%;
		margin-top:20rem;
		border-collapse:collapse;
		border-spacing:0;
		box-sizing:border-box;
		font-size:13rem;
	}

	table tr:first-child {
	  background-color: #D886DB;
		color:#000;
	}

	table tr:first-child td{
		font-size:18rem !important;
		padding-top:45rem;
		padding-bottom:45rem;
	}

	table td:nth-child(1) {
		text-align:left;
	  width: 130rem;
		font-size:22rem;
		box-sizing:border-box;
		padding-left:20rem;
	}

	table td:nth-child(2) {
	  width: 320rem;
		font-size:24rem;
	}

	table td:nth-child(3) {
	  width: 100rem;
	}

	table td:nth-child(3) p{
	  width: 50rem;
		margin-left:5rem;
	}

	table td:nth-child(4) {
	  width: 120rem;
		font-size:21rem;
		line-height:1.3;
	}

	table td {
	  padding:20rem 0;
		vertical-align: middle;
	}

	.block ul{
		width:670rem;
		margin:20rem auto 0;
		box-sizing:border-box;
		font-size:24rem;
	}

	.block ul li{
		position: relative;
	  margin-left: 1.2em;
		margin-top:5rem;
	}

	.block ul li::before {
	  content: "※";
	  position: absolute;
	  left: -1.2em;
	}

	#kyushu.block{
		padding-bottom:120rem;
	}
}


/*---------------------------------------
footer
---------------------------------------*/
#footer{
	width:1000rem;
	margin:0 auto;
	box-sizing:border-box;
	background-color: #222;
	padding:40rem 0;
}

#footer #billing{
	width:120rem;
	margin:0 auto;
}

#footer #copyright{
	width:205rem;
	margin:10rem auto 0;
}

#gototop{
	width:50rem;
	position:fixed;
	right:-200rem;
	bottom:30rem;
	z-index:100;
	transition: 0.6s ;
}

#gototop.open{
	right:30rem;
}

@media screen and (max-width: 767px) {
	#footer{
		width:100%;
		margin:0 auto;
		box-sizing:border-box;
		background-color: #222;
		padding:50rem 0;
	}

	#footer #billing{
		width:360rem;
		margin:0 auto;
	}

	#footer #copyright{
		width:520rem;
		margin:20rem auto 0;
	}

	#gototop{
		width:100rem;
		position:fixed;
		right:-200rem;
		bottom:150rem;
		z-index:100;
		transition: 0.6s ;
	}

	#gototop.open{
		right:40rem;
	}

}

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

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

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

@keyframes zoomOut {
  from {
    opacity: 0;
    -webkit-transform: scale(1.1);
    transform:scale(1.1);
  }
  to {
    opacity: 1;
    -webkit-transform: scale(1.0);
    transform:scale(1.0);
  }
}

@keyframes maskIn {
  0% {
    clip-path: inset(0 100% 0 0);
  }
  100% {
    clip-path: inset(0);
  }
}

@keyframes blur {
  0% {
    opacity: 0;
    filter: blur(50px);
    transform:scale(1.2);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform:scale(1);
  }
}

#mainvisual #imax,
#mainvisual h1,
#mainvisual #date1,
#mainvisual #date2,
#mainvisual #copy,
#mainvisual #top_billing,
#mainvisual #top_copy{
	opacity:0;
}

.is_loaded #mainvisual #imax{
  animation: fadeIn 3.0s cubic-bezier(0.19, 1, 0.22, 1) 0.8s forwards;
}

.is_loaded #mainvisual h1{
  animation: zoomOut 3.0s cubic-bezier(0.19, 1, 0.22, 1) 1.4s forwards;
}

.is_loaded #mainvisual #date2{
  animation: fadeInUp 3.0s cubic-bezier(0.19, 1, 0.22, 1) 2.2s forwards;

}
.is_loaded #mainvisual #date1{
  animation: fadeInUp 3.0s cubic-bezier(0.19, 1, 0.22, 1) 2.0s forwards;
}

.is_loaded #mainvisual #copy{
  animation: blur 3.0s cubic-bezier(0.19, 1, 0.22, 1) 2.4s forwards;
}

.is_loaded #mainvisual #top_billing,
.is_loaded #mainvisual #top_copy{
  animation: fadeIn 3.0s cubic-bezier(0.19, 1, 0.22, 1) 2.4s forwards;
}