/* @override 
	http://203.143.96.127:8003/tickets/seats_view360/assets/css/base_vr360.css */

@charset "UTF-8";
/* CSS Document */

:root {
	/*color*/
	/*色相-彩度(％)-輝度(％-50%中間)*/
	--main_bk: hsl(0, 0%, 1%);
	--main_kf_blue: hsl(199, 99%, 57%);/**/
	--main_kf_blue_darker: hsl(199, 99%, 57%);/**/
	--main_kf_blue_pale: hsl(199, 99%, 95%);
	--main_kf_blue_pale_more: hsl(198, 62%, 96%);
	--main_red: hsl(0, 100%, 50%);
	--main_glay_light: hsl(0, 0%, 95%);

}


/*JP-Font*/
:root {
--main_jp_font:'Noto Sans JP', "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",sans-serif;
}

[lang='en'],
[lang='en']>strong {
	font-weight: normal;
}

/*Condensed-Regular*/
[id^='lay_'] p.close_btn,
p#site_name,
condensed-regular{
	font-family: DINNextLTPro-Condensed;
	font-weight: normal;
	text-transform: uppercase;
}

/*Condensed-Medium*/
#base_art_stadium>.inner_txt h2,
condensed-medium{
	font-family: DINNextLTPro-MediumCond;
	font-weight: normal;
	text-transform: uppercase;
}

/*Condensed-Light*/

condensed-light{
	font-family: DINNextLTPro-LightCondensed;
	font-weight: normal;
	text-transform: uppercase;
}

/*medium*/
h2#seat_ttl span[lang='en'],
medium{
	font-family: DINNextLTPro-Medium;
	font-weight: normal;
	text-transform: uppercase;
}


* {
	font-feature-settings: "palt" 1;
}

html {
    font-family:var(--main_jp_font);
    font-weight: 400;

    font-size: 62.5%;
    line-height: 1.4;
}



body,
html {
    width: 100%;
}

#wrapper {
	position: relative;
	z-index: 0;
}

p {
	font-size: 1.6rem;
}

*,
*:before,
*:after {
    box-sizing: border-box;
}

audio,
canvas,
img,
video {
    vertical-align: middle;
}

img {
        max-width: 100%;
}
    
 main {
 	display: block;
 	position: relative;
 	z-index: 10;
 }
 
 body.home main {
 	margin-top: 800px;
 }
 
 a {
 	text-decoration: none;
 	color: var(--main_bk);
 }
  
  
 #wrapper_header_kv {
 	position: fixed;
 	top: 0;
 	left: 0;
 	z-index: 0;
 	width: 100%;
 	height: auto;
 	transition: 0.3s;
 }
 
 #wrapper_header_kv.blur {
 	filter: blur(20px);
 }
  
  #overlay {
  	position: fixed;
  	width: 100%;
  	height: 100svh;
  	top: 0;
  	left: 0;
  	background-color: hsla(0,0%,0%,0.6);
  	z-index: 100;
  	backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  }
  
    
 /* ==== header(pc) ==== */
 header {
 	height: 80px;
 	/*nest-start*/
 	
 	#site_id{
 	top: 12px;
 	}
 	
 	#site_id::before {
 		top: -44px;
 		left: -24px;
 	}
 	
 	#site_id::after {
 		top: -26px;
 		left: -28px;
 	}
 	
 	& > .inner{
 	width: calc(100% - 64px);
 	height: 100%;
 	margin: 0 auto;
 	position: relative;
 	z-index: 10;
 }
 
 p#site_name {
 	position: absolute;
 	top: 22px;
 	right: 0;
 	text-align: right;
 	width: 500px
 }
 
 p#site_name>a {
 	display: block;
 }
 
 p#site_name>a>span {
 	font-weight: normal;
 	color: var(--main_kf_blue);
 }
 
/*nest-end*/
 	
 }
 
 
header h1 {
width: 640px;
padding: 24px 0 21px 0;
position: absolute;
top: 16px;
left: 5.2vw;
margin-left: 96px;
		/*nest-start*/
		
		& > a{
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		width: 100%;
		padding-left: 96px;
		position: relative;
		z-index: 0;
		}
		
		& a img,
		& a small{
		display: block;
		position: relative;
		z-index: 0;
		}
		
		& a span.icon {
		display: block;
		width: 80px;
		height: 78px;
		position: absolute;
		left: 0;
		top: -24px;
		}
		
		& a span.icon>img {
		width: 100%;
		height: 100%;
		}
		
		& a img.main_name {
			height: 34px;
		}
		
		& a>small {
		margin-left: 8px;
		width: 270px;
		height: auto;
		top: 19px;
		}
		
		
		/*nest-end*/	
}
 /* ==== /header ==== */
 
 
  /* ==== header(pc) -vr_page ==== */
body.vr_page header h1{
width: 220px;
padding: 4px 0 0 0;
top: 20px;
left: 1.5vw;
margin-left: 64px;
		/*nest-start*/
		& > a{
		flex-wrap: wrap;
		width: 100%;
		padding-left: 68px;
		}
		
		& a span.icon {
		display: block;
		width: 60px;
		height: 56px;
		top: -8px;
		}
		
		& a img.main_name {
			height: 32px;
		}
		
		& small {
		margin-left: 0;
		width: 240px;
		top: 0px;
		}
		& small>img {
			height: 10px;
		}

		
		/*nest-end*/
}


 /* ==== header(pc)-vr_page ==== */
body.vr_page header {
		/*nest-start*/
		
		& > .inner{
		padding-top: 0;
		}
		
		#site_id{
		top: 13px;
		left: 1.5vw;
		}
		#site_id>a {
		width: 56px;
		}
		#site_id::before {
		top: -56px;
		left: -4px;
		width: 20px;
		}
		/*blue*/
		#site_id::after {
		width: 50px;
		top: -56px;
		left: 0px;
		}
		p#site_name {
		top: 18px;
		}
		
		p#site_name>a {
			color: #777;
		}
		/*nest-end*/
}
 
   /* ==== /header(pc) -vr_page ==== */

 
  /* ==== #wrapper_kv ==== */

#wrapper_kv {
width: 100%;
height: 750px;
position: relative;
z-index: 0;
overflow: hidden;
/*nest-start*/

& >.inner{
width: 1280px;
height: 624px;
position: absolute;
z-index: 30;
top: 0;
left: 50%;
margin-left: calc((1280px / 2) * -1 );
}

div.bg_img{
width: 100%;
height: 624px;
position: relative;
z-index: 0;
overflow: hidden;
}

div.bg_img>img {
	max-width: initial;
	width: 120%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

span.icon_huge {
	display: block;
	position: absolute;
	right: 72px;
	top: 50%;
	width: 356px;
	height: 347px;
	margin-top: calc(347px / 2 * -1);
	transform-origin: center center;
}



span.icon_huge>img {
	width: 100%;
	height: auto;
}

div.kv_catch {
	position: absolute;
	top: 47%;
	left: 0;
	margin-top: -80px;
	width: 50%;
}

div.kv_catch>p {
	font-size: 4rem;
	line-height: 1.4;
	position: relative;
	z-index: 0;
	font-weight: bold;
	font-weight: 700;
}

div.kv_catch>p>span {
	display: inline-block;
	position: relative;
	z-index: 0;
}

div.kv_catch>p>span>span.rubi {
	position: absolute;
	top: -0.6em;
	left: 0.2em;
	width: 5em;
	font-size: 1.2rem;
}

/*nest-end*/
}

#wrapper_kv span.icon_huge {
	animation: swingRotate 1s ease-out forwards;
}

@keyframes swingRotate {
  0% {
    transform: rotate(-90deg);
  }
  25% {
    transform: rotate(0deg);      /* いったん0度を通過 */
  }
  50% {
    transform: rotate(45deg);     /* オーバーシュート */
  }
  
  75% {
    transform: rotate(-45deg);      /* 最終的に0度へ戻る */
  }
  
  100% {
    transform: rotate(0deg);      /* 最終的に0度へ戻る */
  }
}



#wrapper_kv .bg_img::before,
#wrapper_kv .bg_img::after {
	content: "";
	display: block;
	width: 101%;
	height: 44px;
	position: absolute;
	z-index: 20;
	left: 0;
	background-image: url(/tickets/seats_view360/assets/img/kv_bg_arch.svg);
	background-repeat: no-repeat;
	background-size: cover;
}

#wrapper_kv .bg_img::before {
	top: 0;
	transform-origin: center center;
	transform: scale(1,-1);
}

#wrapper_kv .bg_img::after{
	bottom: 0;
}

/* hand_phone */
#wrapper_hand_phone {
position: absolute;
top: 8px;
left: 50%;
margin-left: -316px;
width: 542px;
height: 750px;
z-index: 50;
/*nest-start*/

& > p{
position: absolute;
top: 0;
left: 0;
}

p.front_hand {
	position: absolute;
	z-index: 20;
	width: 540px;
	height: 750px;
	top: 50%;
  left: 50%;
	

}



p.back_hand_phone {
	z-index: 10;
}

p.phone_screen {
	z-index: 0;
	left: 50%;
	top: 26px;
	margin-left: -59px;
	border-radius: 24px;
	width: 216px;
	height: 450px;
	background-color: var(--main_kf_blue_pale);
	overflow: hidden;
}

p.phone_screen>img {
	max-width: initial;
	height: 120%;
	position: absolute;
	top: 50%;
	left: 50%;
	
}

p.front_hand,
p.phone_screen>img {
animation: circleMove 4s linear infinite;
 animation-play-state: running;
/* 半径Npxの円を描く */
 offset-path: circle(20px at 50% 50%);
 offset-rotate: 0deg; /* ← 指の向きを固定 */
}



/*nest-end*/
}

/* 指は回転させず、位置だけ円運動させる */
@keyframes circleMove {
  to {
    offset-distance: 100%;
  }
}

/* ==== article#vr_home ==== */
article#vr_home {
	width: 1280px;
	margin: 0 auto;
position: relative;
	z-index: 0;
/*nest-start*/


/*nest-end*/

}


/* ==== #wrapper_tab ==== */
#wrapper_tab {
	position: relative;
	z-index: 10;
	margin-top: -72px;
	/*nest-start*/
	section{
	position: relative;
	z-index: 0;
	width: 1280px;
	height: auto;
	border-radius: 16px;
	box-shadow: 0px 2px 5px hsla(0,0%,0%,0.1);
	min-height: 500px;
	padding-top: 56px;
	background-color: #fff;
	}
	/*nest-end*/
	
}

/* ==== div#tab_btns ==== */
div#tab_btns {
	margin: 0 auto;
	width: 832px;
	height: auto;
	background-color: hsla(0,100%,100%,0.85);
	box-shadow: 0px 2px 5px hsla(0,0%,0%,0.1);
	position: relative;
	z-index: 10;
	border-radius: 8px;
	padding: 12px 0 12px 0;
	/*nest-start*/
	
	& ul {
	display: flex;
	justify-content: center;
	font-size: 2.8rem;
	line-height: 1;
	font-weight: bold;
	font-weight: 700;
	gap: 0 12px;
	}
	
	& ul>li {
		text-align: center;
		width: 400px;
		display: block;
		background-color: var(--main_kf_blue_pale);
		border-radius: 6px;
		padding: 18px 0 18px 0;
		transition: 0.3s;
		cursor: pointer;
	}
	

	& ul>li:hover {
	background-color: hsl(199, 99%, 92%);
	}
	
	& ul>li.current {
		background-color: var(--main_kf_blue);
		color: #fff;
		pointer-events: none;
	}
	
	
	
	/*nest-end*/
}

.tab_cont_wrapper {
	position: relative;
	z-index: 0;
	margin-top: -44px;
	
}

#lay_seat_map,
#tab_cont_seats_map {
	
	/*nest-start*/
	
	#base_art_stadium{
	width: 1120px;
	height: auto;
	margin: 0 auto;
	position: relative;
	z-index: 0;
	padding-bottom: 42px;
	}
	
	#base_art_stadium>.inner_txt{
		position: absolute;
		z-index: 10;
		top: 50%;
		left: 50%;
		transform: translate(-48%, -123%);
		background-color: #fff;
		text-align: center;
		border: 2px solid #222;
		border-radius: 40px;
		padding: 1.4em 3em 1em 3em;
		box-shadow: 0px 3px 5px hsla(0,0%,0%,0.1);
	}
	
	#base_art_stadium>.inner_txt h2 {
		font-size: 2.8rem;
		line-height: 0.9;
		color: #222;
		text-transform: none;
	}
	
	#base_art_stadium>.inner_txt h2+p {
		font-weight: bold;
		font-weight: 600;
		font-size: 1.4rem;
	}
	
	img.bg_img{
	width: 100%;
	height: auto;
	position: relative;
	z-index: 0;
	}
	
	/*pins*/
	
	ul#list_pins {
	position: absolute;
	z-index: 20;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: hsla(0,100%,100%,0.2);
	}
	
	
	
	ul#list_pins>li {
	text-align: center;
	width: 32px;
	position: absolute;
	z-index: 0;
	}
	
	ul#list_pins span.pin_icon {
	display: block;
	width: 32px;
	height: auto;
	margin: 0 auto;
	transform-origin: center;
	transition: 0.3s;
	}
	
	ul#list_pins li:hover span.pin_icon {
		transform: scale(1.1);
	}
	
	ul#list_pins>li h3 {
	font-size: 2rem;
	height: 2.5em;
	line-height: 1.2;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	}
	
	ul#list_pins>li h3 small {
		font-size: 1.6rem;
		display: inline-block;
	}
	
	ul#list_pins>li h3+p {
	margin-top: 7px;
	display: block;
	width: 5.7em;
	margin: 0.3em auto 0 auto;
	position: relative;
	z-index: 0;
	font-weight: bold;
	font-weight: 500;
	padding-left: 22px;
	line-height: 1;
	white-space: nowrap;
	}
	
	ul#list_pins>li h3+p::before {
		content: "";
		display: block;
		width: 18px;
		height: 18px;
		position: absolute;
		top: 50%;
		left: 0;
		margin-top: -8.5px;
		background-image: url(/tickets/seats_view360/assets/img/icon_arrow_360.svg);
		background-size: cover;
		background-repeat: no-repeat;
		
	}
	
	/*baloon*/
	ul#list_pins li>a {
	position: absolute;
	display: block;
	z-index: 10;
	height: 98px;
	width: 150px;
	left: 50%;
	top: -102px;
	border: 2px solid #fff;
	transform: translateX(-50%) scale(0.2);
	transform-origin: bottom center;
	background-color: #fff;
	border-radius: 6px;
	padding: 10px 8px 0 8px;
	transition: 0.3s;
	box-shadow: 0px 5px 15px hsla(0,0%,0%,0.15);
	display: none;
	}
	
	ul#list_pins li.down>a {
		top: 50px;
	}
	
	ul#list_pins a:hover {
		background-color: #f5f5f5;
	}
	
	ul#list_pins a::after {
		content: "";
		content: "";
  position: absolute;
  bottom: -13px;    /* 吹き出しの下にはみ出させる */
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 14px;
  background: #fff;
  /* 下向き三角形：上辺中央が頂点になるように */
  clip-path: polygon(50% 100%, 0 0, 100% 0);
	}
	
	ul#list_pins li.down>a::after {
		bottom: auto;
		top: -13px;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
	}
	
	ul#list_pins li.active {
		z-index: 10;
	}
	
	ul#list_pins li.active a{
		display: block;
	transform: translateX(-50%) scale(1);
	}
	
	ul#list_pins li.x2>a {
		width: 200px;
	}
	
	ul#list_pins li.x3>a {
		width: 260px;
	}
	
	ul#list_pins li.l2>a {
		height: 106px;
		top: -108px;
	}
	
	ul#list_pins li.l2>a span {
		width: 100%;
	}
	
	ul#list_pins li.l2>a h3 {
		height: 2.8em;
	}
	
	ul#list_pins li.l2>a span:first-of-type {
		border-bottom: 1px solid #ccc;
		padding-bottom: 0.2em;
	}
	
	ul#list_pins li.l2>a span:nth-of-type(2) {
		padding-top: 0.2em;
	}
	
	/* seat_01 */
	ul#list_pins>li.seat_01 {
	left: 49%;
	top: 64.3%;
	}
	
	/* seat_02 */
	ul#list_pins>li.seat_02 {
	left: 41%;
	top: 64.3%;
	}
	
	/* seat_03 */
	ul#list_pins>li.seat_03 {
	left: 60.5%;
	top: 64.3%;
	}
	
	/* seat_04 */
	ul#list_pins>li.seat_04 {
	left: 49%;
	top: 75.5%;
	}
	
	/* seat_05 */
	ul#list_pins>li.seat_05 {
	left: 48%;
	top: 7.4%;
	}
	
	
	/* seat_06 */
	ul#list_pins>li.seat_06-lower {
	left: 28.5%;
	top: 67%;
	}
	
	ul#list_pins>li.seat_06-upper {
	left: 24.5%;
	top: 74.2%;
	}
	
	/* seat_07 */
	ul#list_pins>li.seat_07-lower {
	left: 67.5%;
	top: 63.5%;
	}
	
	ul#list_pins>li.seat_07-upper{
	left: 78%;
	top: 71.5%;
	}
	
	/* seat_08 */
	ul#list_pins>li.seat_08 {
	left: 37%;
	top: 7.5%;
	}
	
	/* seat_09 */
	ul#list_pins>li.seat_09 {
	left: 62.5%;
	top: 7.5%;
	}
	
	/* seat_10 */
	ul#list_pins>li.seat_10 {
	left: 17%;
	top: 16%;
	}
	
	/* seat_11 */
	ul#list_pins>li.seat_11{
	left: 10%;
	top: 31.5%;
	}

	/* seat_12 */
	ul#list_pins>li.seat_12 {
	left: 82.3%;
	top: 18.5%;
	}
	
	/* seat_13 */
	ul#list_pins>li.seat_13{
	left: 59.5%;
	top: 17%;
	}
	
	/* seat_14 */
	ul#list_pins>li.seat_14-north {
	left: 16%;
	top: 34%;
	}
	
	ul#list_pins>li.seat_14-back {
	left: 33%;
	top: 17.5%;
	}
	
	ul#list_pins>li.seat_14-south {
	left: 79%;
	top: 29%;
	}
	
	/* seat_15 */
	ul#list_pins>li.seat_15 {
	left: 32.5%;
	top: 62%;
	}
	
	
	/* seat_16 */
	ul#list_pins>li.seat_16{
	left: 74.5%;
	top: 62%;
	}

	/* seat_17 */
	ul#list_pins>li.seat_17 {
	left: 89.5%;
	top: 54%;
	}
	
	/* seat_18 */
	ul#list_pins>li.seat_18{
	left: 80%;
	top: 53%;
	}
	
	/* seat_19 */
	ul#list_pins>li.seat_19 {
	left: 24%;
	top: 61.5%;
	}
	
		/* seat_20-21 */
	ul#list_pins>li.seat_20-21 {
	left: 30%;
	top: 73%;
	}
	
	/* seat_22 */
	ul#list_pins>li.seat_22 {
	left: 40.5%;
	top: 72.7%;
	}
	
	
	/* seat_23 */
	ul#list_pins>li.seat_23 {
	left: 57.7%;
	top: 72.7%;
	}
	
	/* seat_24 */
	ul#list_pins>li.seat_24-lower {
	left: 62%;
	top: 72.7%;
	}
	
	ul#list_pins>li.seat_24-upper {
	left: 66.5%;
	top: 82%;
	}
	
	
	/* seat_25 */
	ul#list_pins>li.seat_25 {
	left: 54.5%;
	top: 72.7%;
	}
	
	/* seat_26 */
	ul#list_pins>li.seat_26 {
	left: 43.5%;
	top: 72.7%;
	}
	
	/* seat_27 */
	ul#list_pins>li.seat_27-north {
	left: 34.5%;
	top: 75%;
	}
	
	/* seat_27-south */
	ul#list_pins>li.seat_27-south {
	left: 71%;
	top: 73%;
	}
	
	/* seat_28 */
	ul#list_pins>li.seat_28 {
	left: 54.5%;
	top: 14.2%;
	}
	
	
	
	
	
	/*nest-end*/

}

#lay_seat_list,
#tab_cont_seats_list {
	display: none;
	/*nest-start*/
	
	& >.inner{
	width: 1220px;
	height: auto;
	margin: 0 auto;
	position: relative;
	z-index: 0;
	padding-bottom: 36px;
	padding-top: 24px;
	}
	
	.inner_header {
		text-align: center;
	}
	
	.inner_header>h2 {
		font-size: 2.4rem;
	}
	
	& h2+p {
		font-weight: bold;
		font-weight: 500;
	}
	
	#list_pins {
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		margin-top: 20px;
		gap: 12px 12px;
	}
	
	#list_pins>li {
		position: relative;
		z-index: 0;
		width: calc((100% - 12px * 3) / 4);
		z-index: 0;
		line-height: 1.3;
	}
	
	#list_pins>li.seat_15,
	#list_pins>li.seat_20-21,
		#list_pins>li.seat_25{
		width: calc((100% - 12px * 3) / 2 + 12px);
	}
	
	#list_pins>li.seat_20-21 span:nth-of-type(2)::before {
		content: "/";
		margin: 0 0.3em 0 0.2em;
	}
	
	
	#list_pins>li h3 {
		font-size: 2rem;
		font-weight: bold;
		font-weight: 600;
		white-space: nowrap;
	}
	
	#list_pins>li br {
		display: none;
	}
	
	#list_pins>li h3 small {
		margin-left: 0.3em;
	}
	
	#list_pins>li p.view {
		display: none;
	}
	
	#list_pins span.pin_icon {
		display: block;
		width: 28px;
		height: auto;
		position: absolute;
		top: 0;
		left: 10px;
		margin-top: 11px;
		z-index: 10;
		transition: 0.3s;
	}
	
	#list_pins>li>a {
		display: block;
		position: relative;
		z-index: 0;
		background-color: var(--main_kf_blue_pale);
		padding: 1.7em 6px 1.7em 44px;
		border-radius: 5px;
		transition: 0.3s;
	}
	
	#list_pins>li>a:hover {
	background-color: hsl(199, 99%, 92%);
	}
	
	#list_pins>li:hover span.pin_icon {
		transform: translateY(-3px);
	}
	
	
/*nest-end*/
}






   /* ==== /#wrapper_kv ==== */

 #box_top_partners_btm {
 	position: relative;
 	z-index: 0;
 }
 
 
 
    /* ==== vr_pages styles ==== */

body.vr_page {
	min-height: 100%;
	background-color: var(--main_kf_blue_pale);
}

body.vr_page #wrapper {
	height: 100svh;
}

body.vr_page main {
	margin-top: 0;
	height: 100%;
}

#box_vr_image {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/*#box_control*/
#box_control {
	position: absolute;
	width: 800px;
	height: 64px;
	z-index: 100;
	bottom: 24px;
	left: 50%;
	margin-left: -400px;
	display: flex;
	justify-content: center;
	align-items: center;
	
	opacity: 0;
	animation: fadeIn 0.5s ease-out 1s forwards;
	
		/*nest-start*/
		
		& ul {
			display: flex;
		}
		
		.change_seat_btns li {
			color: var(--main_bk);
		}
		
		& h3,
		.still_views li,
		p.close_viewer_btn{
			color: #fff;
			line-height: 1;
		}
		
		& h3 {
			font-size: 1.6rem;
			color: var(--main_kf_blue);
			width: 7.5em;
			font-weight: bold;
			font-weight: 800;
			white-space: nowrap;
		}
		
		& li, & p, & h3{
		font-weight: bold;
		font-weight: 600;
		line-height: 1;
		text-align: center;
		position: relative;
		z-index: 0;
		} 
		
		.change_seat,
		.still_views li{
		background-color: hsla(0,0%,0%,0.9);
		border-radius: 6px;
		height: 100%;
		}
		
		.change_seat {
		display: flex;
		align-items: center;
		padding-right: 18px;
		}
		
		.change_seat+.still_views {
			margin-left: 16px;
		}
		
		.change_seat li,
		.still_views li {
			font-size: 1.8rem;
			display: flex;
			justify-content: center;
			align-items: center;
			transition: 0.3s;
			line-height: 1;
		}
		
		.change_seat ul {
			gap: 0 8px;
		}
		
		.change_seat li {
			background-color: #EBF9FF;
			border-radius: 4px;
			padding: 0.8em 1.5em 0.75em 1.5em;
			width: 240px;
		}
		
		.change_seat li:hover {
			background-color:hsl(199, 99%, 90%)
		}
		
		
		.still_views ul{
			height: 64px;
			gap: 0 6px;
		}
		
		.still_views li {
			height: 100%;
			display: flex;
			align-items: center;
			width: 82px;
		}
		
		.still_views li:hover {
			background-color: var(--main_kf_blue);
		}
		
		.still_views li>span {
			display: block;
			position: relative;
			margin-top: -1px;
			transition: 0.3s;
		}
		
		
		
		.still_views li#seat_view_front_btn>span{
			padding-left:22px ;
			margin-left: 5px;
		}
		
		.still_views li#seat_view_front_btn:hover>span {
			transform: translateY(-3px);
		}
		
		.still_views li#seat_view_back_btn>span{
			padding-right:22px ;
			margin-left: 8px;
		}
		
		.still_views li#seat_view_back_btn:hover>span {
			transform: translateY(3px);
		}
		
		.still_views li#seat_view_front_btn>span::before,
		.still_views li#seat_view_back_btn>span::after {
			content: "";
			display: block;
			position: absolute;
			top: 50%;
			width: 20px;
			height: 16px;
			margin-top: -7px;
			background-image: url(/assets_global/img/icon_arrow_upper.svg);
			background-size: cover;
			background-repeat: no-repeat;
			background-position: 50% 0;
		}
		
		.still_views li#seat_view_front_btn>span::before {
			left: 0;
		}
		
		.still_views li#seat_view_back_btn>span::after {
			right: 0;
			transform: scale(100%,-100%);
		}
		
		& li, p.close_viewer_btn{
		cursor: pointer;
		}
		
		p.close_viewer_btn {
			text-align: center;
			font-size: 1.4rem;
			line-height: 1.2;
			width: 9em;
		}
		
		p.close_viewer_btn::after {
			content: "";
			display: block;
			width: 24px;
			height: 22px;
			margin-top: -9px;
			position: absolute;
			right: -7px;
			top: 50%;
			background-image: url(/assets_global/img/icon_circle_close.svg);
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 33.5% 0;
		}
		
		/*nest-end*/
		
}

/*#box_controlを下からフェードイン*/
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(120px);
  }
  to   { opacity: 1; transform: translateY(0);
  }
}


h2#seat_ttl {
	position: absolute;
	z-index: 10;
	top:22px;
	left: 360px;
	font-size: 3.2rem;
	line-height: 1;
	padding-bottom: 0.1em;
	padding-left: 0.5em;
	border-left: 1px solid #777;
	display: flex;
	height: 50px;
	align-items: center;
	white-space: nowrap;
	
	
	/*nest-start*/
	span[lang='en']{
	font-size: 1.2em;
	top: 9.5%;
	display: inline-block;
	margin-right: 0.05em;
	position: relative;
	white-space: nowrap;
}

& small {
	position: relative;
	margin-left: 0.4em;
	top: 3%;
}
	/*nest-end*/
	
}

/* Layers */

[id^='lay_'] {
	position: absolute;
	z-index: 100;
	width: 1000px;
	height: 600px;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -57%);
	display: none;
	
	/*nest-start*/
	& >.inner{
	height: 100%;
	background-color: #fff;
	border-radius: 16px;
	}
	
	& >.inner>h3 {
		font-size: 2.2rem;
		line-height: 1.2;
		letter-spacing: 0.04em;
		padding: 0.65em 0 0 1.5em;
		font-weight: bold;
		font-weight: 700;
		position: absolute;
		z-index: 10;
		top: 0;
		left: 0;
	}
	
	& >.inner h3>small {
		font-size: 0.6em;
		letter-spacing: 0;
	}
	
/*nest-end*/
}



[id^="lay_seat_view_"] {
				/*nest-start*/
				& >.inner>h3{
				font-size: 1.8rem;
				line-height: 1;
				position: relative;
				z-index: 10;
				top: 1.25em;
				left: 1.25em;
				padding: 0.65em 1.25em 0.65em 1.25em;
				text-align: center;
				color: #fff;
				border-radius: 24px;
				display: inline-block;
				background-color: var(--main_kf_blue);
				}
				
				& figure {
				position: absolute;
				z-index: 0;
				top: 0;
				left: 0;
				height: 600px;
					overflow: hidden;
					border-radius: 16px;
				}
				
				/*nest-end*/
}

#lay_seat_view_back {
	& >.inner>h3{
	background-color: var(--main_bk);
	}
}

/*close btn*/

[id^='lay_'] p.close_btn {
	position: absolute;
	cursor: pointer;
	white-space: nowrap;
	z-index: 10;
	right: -18px;
	bottom: -15px;
	border-radius: 18px;
	text-transform: uppercase;
	background-color: var(--main_bk);
	color: #fff;
	font-size: 1.6rem;
	line-height: 1;
	padding: 0.6em 0.5em 0.35em 0.75em;
	
			/*nest-start*/
			& span{
			display: block;
			padding-right: 24px;
			position: relative;
			z-index: 0;
			}
			
			& ::after {
			content: "";
			display: block;
			position: absolute;
			width: 20px;
			height: 20px;
			right: 0;
			top: 50%;
			margin-top: -12.5px;
			background-image: url(/assets_global/img/icon_circle_close.svg);
			background-repeat: no-repeat;
			background-size: cover;
			background-position: 33.5% 0;
			}
			/*nest-end*/
}

#lay_seat_map {
		
		/*nest-start*/
		& >.inner{
		overflow: hidden;
		}
		
		#wrapper_seat_map{
		width: 70%;
		height: auto;
		position: absolute;
		top: 0;
		left: 50%;
		z-index: 0;
		transform: translate(-50%, 0);
		}
		
		ul#list_pins>li {
	width: 24px;
	margin-top: 18px;
	}
		ul#list_pins span.pin_icon {
	width: 24px;
	}
		
/*nest-end*/
}

#lay_seat_list {
	/*nest-start*/
	
	& .inner{
	width: 100%;
	height: 600px;
	overflow: hidden;
	}
	
	& .inner> h3{
	padding-left: 1.2em;
	padding-top: 0.60em;
	}
	
	& h3 >small{
	font-size: 0.7em;
	padding-left: 0;
	}
	
	#wrapper_seat_list{
	display: block;
	padding-top: 16px;
	}
	#list_pins{
		width: 96%;
		gap: 6px 6px;
		margin: 8px auto 0 auto;
	}
	
	#list_pins>li {
		width: calc((100% - 6px * 3) / 4);
	}
	
	#list_pins>li h3 {
		font-size: 1.4rem;
		font-weight: bold;
		font-weight: 600;
	}
	
	#list_pins span.pin_icon {
		width: 24px;
		margin-top: 10px;
	}
	
	#list_pins>li>a {
		padding: 1.7em 12px 1.7em 40px;
		border-radius: 4px;
	}
	
	#list_pins>li.seat_15,
	#list_pins>li.seat_20-21,
		#list_pins>li.seat_25{
		width: calc((100% - 6px * 3) / 2 + 6px);
	}
	
	
	/*nest-end*/
}


 
 /* loading icon animate */
.sk-fading-circle {
  margin: 25% auto;
  width: 60px;
  height: 60px;
  position: relative;
}

.sk-fading-circle .sk-circle {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}

.sk-fading-circle .sk-circle:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #aaa;
  border-radius: 100%;
  -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
          animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
}
.sk-fading-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg);
}
.sk-fading-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg);
}
.sk-fading-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg);
}
.sk-fading-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg);
}
.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); 
}
.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); 
}
.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; 
}
.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; 
}
.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; 
}
.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; 
}
.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; 
}
.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; 
}
.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; 
}
.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}
.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}
 



 
 
 
 
 
     /* ==== /vr_pages styles ==== */

 
 /*==== Responsive(pc) ====*/


/*==== Responsive(sp) ====*/

@media (hover: none) {
  .btn:hover {
    background: inherit !important;
    color: inherit !important;
    transform: none !important;
  }
}

@media screen and (max-width: 768px) {
		/*mq-start*/
		/*============*/
		.pcv {
		display: none;
		}
		
		.spv {
		display: block;
		}
		
		/*============*/
		/*mq-end*/
	
}