@charset "UTF-8";

/* --------------------------------------------------
ticket
-------------------------------------------------- */
#ticket{
  width: 100%;
  min-width: 1200rem;
  position: relative;
	margin-bottom:100rem;
}

#ticket #bg{
	width:100%;
	height:100%;
	background-image:url("../img/ticket/bg.jpg");
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;
  position: fixed;
	left:0;
	top:0;
	z-index:1;
}

#ticket_inner{
	width:1100rem;
	position:relative;
	margin:0 auto;
	padding-top:130rem;
	z-index:10;
}

#ticket_inner .title{
	color:#fff100;
	text-align:center;
	font-size:56rem;
	font-weight:500;
	position:relative;
	line-height:1.0;
	padding-top:20rem;
}

#select_inner #select_block #title span{
	display:block;
	color:#fff;
	text-align:center;
	font-size:20rem;
	font-weight:500;
	position:relative;
	line-height:1.0;
}

/* --------------------------------------------------
unker
-------------------------------------------------- */
ul.unker{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:15rem;
	margin-top:20rem;
}

ul.unker li{
	width:250rem;
	height:60rem;
}

ul.unker li a{
	display:block;
	width:250rem;
	height:60rem;
	font-size:18rem;
	font-weight:600;
	line-height:1.2;
	color:#000;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	background: url(../img/ticket/btn_unker.png) no-repeat center top;
	background-size:cover;
}

#ticket_block{
	width:1100rem;
	position:relative;
	margin:40rem auto 0;
	background-color:#fff;
	padding-bottom:50rem;
}

#mvtk1,
#mvtk2,
#mvtk3,
#mvtk4,
#animate{
	width:960rem;
	position:relative;
	margin:0 auto;
	padding-top:50rem;
}

#limited{
	width:340rem;
	position:absolute;
	left:-70rem;
	top:40rem;
}

#ticket_block dl{
	width:960rem;
	position:relative;
	margin:20rem auto 0;
	display: flex;
  justify-content: space-between;
  align-items: start;
	flex-wrap: wrap;
}

#ticket_block dl dt{
	width:435rem;
	position:relative;
}

#ticket_block dl dd{
	width:496rem;
	position:relative;
	margin-top:5rem;
}

#ticket_block #mvtk4 dl dt,
#ticket_block #animate dl dt{
	width:905rem;
	position:relative;
}

#ticket_block #mvtk4 dl dd,
#ticket_block #animate dl dd{
	width:26rem;
	position:relative;
}

#ticket_block h3{
	color:#eb5c01;
	font-size:22rem;
	line-height:1.6;
	font-weight:600;
}

#ticket_block p{
	font-size:20rem;
	color:#000;
	line-height:1.6;
	font-weight:600;
	padding-bottom:20rem;
}

#ticket_block ul.btn{
	width:496rem;
	position:relative;
	display: flex;
  justify-content: space-between;
  align-items: start;
	flex-wrap: wrap;
	margin-bottom:10rem;
}

#ticket_block ul.btn li{
	width:240rem;
	height:50rem;
	position:relative;
	overflow:hidden;
	margin-bottom:10rem;
}

#ticket_block ul.btn li a{
	display:block;
	width:240rem;
	height:50rem;
	position:relative;
	display: flex;
  justify-content: center;
  align-items: center;
	flex-wrap: wrap;
	background: url(../img/ticket/btn.png) no-repeat center top;
	background-size:cover;
	font-size:15rem;
	color:#fff;
	font-weight:500;
	transition: transform 0.3s ease;
}

#ticket_block ul.btn li a::after{
	content:"";
	position:absolute;
	right:15rem;
	top:calc(50% - 7rem);
	width:9rem;
	height:14rem;
	background: url(../img/ticket/arrow.png) no-repeat center top;
	background-size:cover;
}

#ticket_block ul.btn li:hover a {
  transform: translateY(5rem);
}

#ticket_block span{
	display:block;
	position:relative;
	font-size:15rem;
	color:#000;
	font-weight:500;
	line-height:1.6;
	padding-left:1em;
}

#ticket_block span::before{
	content:"※";
	position:absolute;
	left:0;
	top:0;
}

#mvtk1 dl dt img,
#mvtk2 dl dt img{
	width:420rem;
}

#mvtk1 dl dt,
#mvtk2 dl dt{
	padding-top:10rem;
}


#mvtk2 ul.btn,
#mvtk3 ul.btn,
#animate ul.btn{
	margin-top:10rem;
}

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(60rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes scaleIn {
  0% {
    opacity: 0;
    transform: scale(1.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

#ticket_inner p.title,
ul.unker li,
#mvtk1,
#mvtk2,
#mvtk3,
#mvtk4,
#animate{
	opacity:0;
}

.is-loaded #ticket_inner p.title{
	animation: fadeInUp 0.8s cubic-bezier(.05,.53,.29,.88) 1.4s forwards;
}

.is-loaded ul.unker li:nth-child(1){
	animation: fadeInUp 0.8s cubic-bezier(.05,.53,.29,.88) 1.8s forwards;
}

.is-loaded ul.unker li:nth-child(2){
	animation: fadeInUp 0.8s cubic-bezier(.05,.53,.29,.88) 2.0s forwards;
}

.is-loaded ul.unker li:nth-child(3){
	animation: fadeInUp 0.8s cubic-bezier(.05,.53,.29,.88) 2.2s forwards;
}

.is-loaded ul.unker li:nth-child(4){
	animation: fadeInUp 0.8s cubic-bezier(.05,.53,.29,.88) 2.4s forwards;
}

.is-loaded ul.unker li:nth-child(5){
	animation: fadeInUp 0.8s cubic-bezier(.05,.53,.29,.88) 2.6s forwards;
}

.is-loaded #mvtk1{
	animation: fadeInUp 0.8s cubic-bezier(.05,.53,.29,.88) 2.6s forwards;
}

#mvtk2.is_loaded,
#mvtk3.is_loaded,
#mvtk4.is_loaded,
#animate.is_loaded{
	animation: fadeInUp 0.8s cubic-bezier(.05,.53,.29,.88) 0.4s forwards;
}