@charset "UTF-8";
header	{background-color: #ffffff;}
img{width: auto; max-width: content-width !important;}
.contents	{position: relative; /*padding-bottom: 0;*/ background: #000000 url("../../../img/jch/110/teaser/bg.jpg") no-repeat center top;}
.field	{position: relative; text-align: center;}
.tile, .box{display: flex;}
.box{flex-wrap: wrap;}
.btl .box{align-items: flex-end;}
.tile > div{width: 100%;}
.box .photo, .tile > .single{width: 50%;}
.box.times3 .photo{width: 33.333%;}
.action {opacity: 1; animation: fade 3s;}
.buttonDetail ul{display: flex; flex-wrap: wrap; justify-content: space-between;}
.buttonDetail li a{display: block; color: #ffffff; background-color: #e50112; font-weight: bold; text-align: center; text-decoration: none; transition: all 0.25s;}
.buttonDetail li a:hover{background-color: #720009;}
.buttonDetail .buttonArchive{text-align: center;}
.buttonDetail .buttonArchive a{display: block; color: #e50112; background-color: #ffffff; border-radius: 5px; text-decoration: none;}
.ticketInfo{margin-top: 1.5em; padding: 1.0em;  color: #ffffff; background-color: rgba(51,51,51,0.85); border: 2px solid rgba(190,167,98,1.0); box-sizing: border-box;}
.ticketInfo strong{display: block; margin-bottom: 0.5em; color: #bea762; font-size: 1.25em; text-align: center;}
.ticketInfo table{margin-bottom: 0; border-collapse: separate; border-spacing: 4px; border-top: none;}
.ticketInfo table tr > *{border-bottom: none;}
.ticketInfo th{background-color: rgba(229,1,18,0.75); text-align: center;}
.ticketInfo td{background-color: #000000;}
.ticketInfo .buttonBuy a{display: inline-block; margin-top: 1.0em; padding: 0.5em 1.5em; color: #ffffff; background-color: #e50112; border-radius: 5.0em; font-weight: bold; text-align: center; text-decoration: none;}
.field .swiper{position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%;}
.field .type{display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.field .kv{opacity: 0;}
.roadto{padding: 1.5em 0; background: rgb(29, 21, 38); background: linear-gradient(90deg, rgba(29, 21, 38, 1) 0%, rgba(116, 83, 153, 1) 50%, rgba(29, 21, 38, 1) 100%); text-align: center;}
.roadto > b{display: block; margin-bottom: 1.0em; color: #ffffff; font-size: 1.25em;}
.roadto li a{display: flex; align-items: center; justify-content: center; color: #ffffff; border: 2px solid #ffffff; font-weight: bold; text-align: center; text-decoration: none; transition: all 0.25s;}
.roadto li a:hover{color: #745399; background-color: rgba(255,255,255,0.9)}

.is-zoom {
  animation: zoomIn 0.8s cubic-bezier(0.25, 1, 0.5, 1) forwards;
	opacity: 1;
}
 
@keyframes zoomIn {
	0% {
		transform: scale(0.8);
		opacity: 0;
	}
  100% {
		opacity: 1;
		transform: scale(1);
	}
}

@media only screen and (max-width: 640px){
.btl{margin-top: 50vw;}
.tile > .box{width: 50%;}
.tile > .box > .photo{width: 100%;}
.data	{position: absolute; top: calc(50% - 25vw); left: 0; width: 100%; height: 50vw;}
.buttonDetail ul{margin: 0 10px;}
.buttonDetail ul li{width: calc(50% - 5px); margin-top: 10px; font-size: 3.5vw}
.buttonDetail a{padding: 1.0em 0;}
.buttonDetail .buttonArchive{margin: 10px; font-size: 3.5vw}
.ticketInfo{margin: 1.0em;}
.ticketInfo table tr > *{font-size: 3.5vw;}
.roadto ul{display: flex; flex-wrap: wrap; justify-content: center; margin: 0 20px;}
.roadto ul li{width: calc(50% - 5px); font-size: 3.5vw;}
.roadto ul li:nth-child(even){margin-left: 10px;}
.roadto ul li:nth-of-type(n+3){margin-top: 10px;}
.roadto ul li a{height: 4.0em;}
}

@media only screen and (min-width: 641px){
.contents, .main	{position: relative;}
.contents	{background-size: 100%;}
.data	{position: absolute; top: 25%; left: 25%; width: 50%; height: 25vw;}
.buttonDetail{width: 1050px; margin: 30px auto 0;}
.buttonDetail ul li{width: calc(25% - 10px); margin-bottom: 30px;}
.buttonDetail a{padding: 1.0em;}
.buttonDetail .buttonArchive a{display: inline-block; width: 50%; padding: 1.0em;}
.ticketInfo{width: 800px; margin: 40px auto 0; padding: 40px; border-width: 10px;}
.ticketInfo strong{font-size: 30px;}
.ticketInfo table tr > *{padding: 1.5em;;}
.ticketInfo .buttonBuy a{font-size: 20px;}
.roadto{margin-top: 40px;}
.roadto ul{display: flex; justify-content: space-between; width: 1050px; margin: 0 auto;}
.roadto ul li{width: calc(20% - 10px)}
.roadto ul li a{padding: 1.0em 0;}
}

@media only screen and (max-width: 1680px){
.field	{min-height: 56.25vw;}
}
@media only screen and (min-width: 1681px){
.field	{min-height: 945px;}
}