@charset "UTF-8";

/* CSS Document */
:root {
  --font-family-en: 'Roboto', sans-serif;
  --font-family-en-2: 'Arial', sans-serif;
  --font-family-en-3: 'Oswald', sans-serif;
  --font-family-M: 'メイリオ', Meiryo, 'ヒラギノ角ゴシック', 'Hiragino Sans', sans-serif;
  --font-family-J: 'Noto Sans JP', sans-serif;
  --red: #F80000;
  --orange: #FF8000;
  --blue: #39A1DD;
  --black: #000;
}


/*クリック無効*/
#map_01,
#map_02,
#map_03{
	pointer-events: none;
}

    #sea_menu {
        width: 1000px;
		margin: 0 auto 30px auto; 
        height: 82px;
		display: flex;
		justify-content: center;
        background: #EAEAEA;
		padding: 10px;
		gap: 10px;
    }

    #sea_menu li a{
		font-size: 22px;
		font-weight: bold;
		text-decoration: none;
		color: #000;
		display: block;
		background: url(../images/seat_arrow.png) right 15px center no-repeat #FFF;
		line-height: 60px;
		width: 318px;
		text-align: center;
		text-indent: -10px;
	}
    #sea_menu li.yoyaku a{
		color: #FFD600;
		background: #00368C;
		border: 1px solid #FFD600;
	}
    #sea_menu li.yoyaku a i{
		display: inline-block;
		background: url(../images/seat_i_open.svg);
		width: 20px;
		height: 20px;
		margin-left: 15px;
	}
	#sea_menu li.non{
		pointer-events: none;
		opacity: 0.5;
	}
	#sea_menu li a span{font-size: 0.7em;}
	

.howto{
	display: flex;
	flex-direction: column;
	justify-content:center;
	align-items: center;
	margin: 0 auto 50px auto;
}
.howto .tit{
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 22px;
}

.howto table{
	border: 1px solid #000;
	border-collapse: collapse;
	width: 1470px;
	margin-bottom: 15px;
}
.howto table tr:nth-child(odd){
	background: whitesmoke;
}

.howto table th,
.howto table td{
	border: 1px solid #000;
	padding: 10px;
}
.howto table td:first-child{
	text-align: center;
}

.howto table th{background: #00368C; color: #FFF; height: 40px;}
.howto .come{ font-size: 18px;  width: 1470px; margin-bottom: 20px; color: #333;}

.howto dl{
	display: flex;
	width: 1470px;
	margin-bottom: 10px;
}

.howto dt{
	background: #00368C; color: #FFF; 
	width: 120px; 
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 10px;
	padding: 5px 0;
}
.howto .red{ color: #DC0000;}


#seat h4{
	border-bottom: 10px solid #00368C;
	width: 1700px;
	margin: 0 auto 20px auto;
	font-size: 34px;
	font-weight: bold;
	line-height: 2em;
	text-indent: 0.5rem;
}

#seat h4 span{font-size: 22px; margin-left: 20px;}

	#sea_btn{
		width: 1470px;
		height: 60px;
		margin: 0px auto 20px auto;
	}
	
	#sea_btn_left{
		float: left;
		width: 50%;
		height: 60px;
		line-height: 58px;
		border-top-left-radius: 30px;
		border-bottom-left-radius: 30px;
		background:url("../images/access_arrow.png") no-repeat 540px center #666;
		background-size: 24px 21px;
		text-align: center;
		color: #fff;
		font-size: 26px;
		font-weight: 700;
	}
	#sea_btn_left:hover, #sea_btn_right:hover{
		cursor: pointer;
	}
	#sea_btn_left.active:hover, #sea_btn_right.active:hover{
		pointer-events: none;
	}
	#sea_btn_right{
		float: left;
		width: 50%;
		height: 60px;
		line-height: 58px;
		border-top-right-radius: 30px;
		border-bottom-right-radius: 30px;
		background:url("../images/access_arrow.png") no-repeat 570px center #666;
		background-size: 24px 21px;
		text-align: center;
		color: #fff;
		font-size: 26px;
		font-weight: 700;
	}
	#sea_btn i{
		font-size: 28px;
		font-family: 'Roboto',sans-serif;
		width: 36px;
		height: 36px;
		border-radius: 100%; 
		display: inline-block; 
		line-height: 36px;
		margin-right: 10px;
	}
	#sea_btn_right i{background: #1BB6BA;}
	#sea_btn_left i{background: #FFCE00;}

	#sea_btn span{
		font-size: 22px;
		font-weight: 400;
		margin-right: 10px;
	}
	#sea_btn_left.active, #sea_btn_right.active{
		background: #01378C;
	}
	#seat_01, #seat_02{
		display: none;
		background: #EAEAEA;
		padding-top: 30px;
	}
	#seat_01.active, #seat_02.active{
		display: block;
	}


	.map{
		text-align: center;
		margin: 0 auto 50px auto;
		width: 100%;
		position: relative
	}

	a g:hover path,a g:hover circle {
		cursor: pointer;
	}

	.atte{
		text-align: left;
		width: 1400px;
		background: url(../images/seat_atte.png) left center no-repeat;
		margin: 0 auto;
		background-size: 80px;
		padding-left: 100px;
		height: 120px;
		display: flex;
		/* color: var(--red); */
		align-items: center;
		font-weight: bold;
	}
	#seat_01 .map{background: url(../images/seat_floor_mida.svg) top 282px left calc(50% - 480px) no-repeat;}
	#seat_02 .map{background: url(../images/seat_floor_mida.svg) top 70px left calc(50% - 550px) no-repeat;}
	.map img{
		/* width: 1210px; */
	}

	#seat_01 .about{
		background: #FFCE00;
		padding-top: 30px;
		position: relative;
		padding-bottom: 50px;
	}
	#seat_02 .about{
		background: #1BB6BA;
		padding-top: 30px;
		position: relative;
		padding-bottom: 50px;
	}
	#seat .about::before{
		content: '';
		width: 110px;height: 30px;
		background:url(../images/seat_bk_arrow.svg) no-repeat;
		position: absolute;
		top: -1px;
		left: calc(50% - 55px);
	}

	.about_top{
		display: flex;
		width: 1470px;
		margin: 0 auto 25px auto;
		justify-content: space-between;
	}

	.about_top .left .mida{
		background: url(../images/seat_mida_gold.svg) center top no-repeat;
		padding-top: 140px;
		font-weight: bold;
		font-size: 34px;
		text-align: center;
	}
	#seat_01 .about_top .left .mida{background: url(../images/seat_mida_gold.svg) center top no-repeat;	}
	#seat_02 .about_top .left .mida{background: url(../images/seat_mida_platinum.svg) center top no-repeat;	}
	.about_top .left{width: 500px;}
	.about_top .left p{
		background: #FFFFFF;
		line-height: 1.2em;
		width: 100%;
		text-align: center;
		margin-top: 10px;
		padding: 15px 0;
		border-radius: 100vmax;
	}
	.about_top .right{
		display: flex;
		justify-content: space-between;
		gap: 5px;
		padding-top: 15px;
		width: 940px;
	}
	.textarea{
		background: rgba(255,255,255,0.85);
		flex-grow: 1;
		padding: 15px 25px 20px 25px;
	}
	.textarea .mida{
		font-weight: bold;
		font-size: 24px;
		margin-bottom: 5px;
	}
	.textarea ul{
		flex-wrap: wrap;
		display: flex;
		margin-bottom: 15px;
	}
	.textarea li{
		text-indent: -1rem;
		padding-left: 1rem;
		margin-right: 10px;
		font-size: 18px;
		text-align: left;
	}
	.textarea li .come{
		line-height: 20px;
		font-size: 16px;
		margin-top: 5px;
		text-indent: 0;
		color: #333;
	}

	.textarea:nth-child(1){ width: 410px;}
	.textarea:nth-child(2){
		width: 530px;
	}
	.seat_section table{
		width: 1470px;
		margin: 0 auto;
		border-collapse: collapse;
		background: #FFF;
	}

.seat_section table th{background: #666666; color: #FFF; text-align: center; vertical-align: middle;border-right: 1px solid #FFF; padding: 10px; font-size: 16px;}
.seat_section table th:last-child{border: none;}
.seat_section table td{background: #FFF;  text-align: center; vertical-align: middle; padding: 10px;border: 1px solid #707070;}
.seat_section table td .chu{
	font-size: 0.8em;
	color: #666;
}

.map_memo{
	width: 1200px;
	background: url(../images/seat_map_memo.png) center center no-repeat; 
	border: 1px solid #CCC; 
	height: 50px;
	position: relative;
	margin: 15px auto 0 auto;
}

td.seat{
	font-weight: bold;
}
td.num{
	font-family: 'Roboto',sans-serif;
}

td.text{font-size: 18px;}

#seat_01 tr.col1 .cate,
#seat_01 tr.col1 .num,
#seat_01 tr.col1 .capa{background: #FFE8CC !important;}
#seat_01 tr.col1 .seat{background: #FF8D00 !important;}

#seat_01 tr.col2 .cate,
#seat_01 tr.col2 .num,
#seat_01 tr.col2 .capa{background: #FFDBDB !important;}
#seat_01 tr.col2 .seat{background: #FF4D4D !important;}

#seat_01 tr.col3 .cate,
#seat_01 tr.col3 .num,
#seat_01 tr.col3 .capa{background: #FFE6DD !important;}
#seat_01 tr.col3 .seat{background: #FF8256 !important;}

#seat_01 tr td.seat.col3_2{background: #FFF100 !important;}

#seat_01 tr.col4 .cate,
#seat_01 tr.col4 .num,
#seat_01 tr.col4 .capa{background: #FCECF3 !important;}
#seat_01 tr.col4 .seat{background: #F19EC2 !important;}

#seat_02 tr.col1 .cate,
#seat_02 tr.col1 .num,
#seat_02 tr.col1 .capa{background: #D2EBE0 !important;}
#seat_02 tr.col1 .seat{background: #229D66 !important; color: #FFF;}

#seat_02 tr.col2 .cate,
#seat_02 tr.col2 .num,
#seat_02 tr.col2 .capa{background: #E4E4F9 !important;}
#seat_02 tr.col2 .seat{background: #7777DE !important; color: #FFF;}

#seat_02 tr.col3 .cate,
#seat_02 tr.col3 .num,
#seat_02 tr.col3 .capa{background: #E4F1E8 !important;}
#seat_02 tr.col3 .seat{background: #77B78D !important;}

#seat_02 tr.col4 .cate,
#seat_02 tr.col4 .num,
#seat_02 tr.col4 .capa{background: #E4F0F9 !important;}
#seat_02 tr.col4 .seat{background: #77B6DE !important;}

#seat_02 tr td.seat.col4_2{background: #2192D9 !important; color: #FFF;}
#seat_02 tr td.seat.col4_3{background: #2164D9 !important; color: #FFF;}

.seat_section .bottom_come{
	font-size: 18px;
	color: #333;
	width: 1470px;
	text-align: left;
	margin: 10px auto 0 auto;
}

.atte2{
	width: 1470px;
	margin: 10px auto 30px auto;
}

.atte2 .tit{
	width: 100%;
	line-height:30px;
	color: #FFF;
	font-weight: bold;
	border-bottom: 1px #FFF double;
	font-size: 24px;
	border-left: 10px solid #FFF;padding-left: 15px;
	padding-bottom: 10px;
	margin-bottom: 20px;
}

.atte2 dl{
	display: flex;
	margin-bottom: 5px;
	line-height: 30px;
}

.atte2 dt{background: #FFF; width:150px; text-align: center; margin-right: 10px; font-size: 18px; border-radius:100vmax;}
.atte2 dd{font-size: 18px;}

.atte2 .come{font-size:18px;}

.chushi{
	background: #EAEAEA;
	padding: 30px 0 50px 0;
}

.chushi .tit{
	display: flex;
	justify-content: center;
	margin-bottom: 15px;
}
.chushi .tit p{
	background: url(../images/seat_chushi_i.svg) left center no-repeat;
	line-height: 40px;
	padding-left: 50px;
	font-size: 24px;
	font-weight: bold;
}
.chushi table{
	width: 1470px;
	margin: 0 auto;
	border-collapse: collapse;
}

.chushi table th{background: #222; color: #FFF; text-align: center; vertical-align: middle;border-right: 1px solid #FFF; padding: 10px; font-size: 16px;}
.chushi table th:last-child{border: none;}
.chushi table td{background: #FFF;  text-align: center; vertical-align: middle; padding: 10px;border: 1px solid #707070;}

.chushi table td.col1{background: #D2EBE0;}
.chushi table .col1 span{
	font-weight: bold;
	color: #00368C;
}

.chushi table td .line{
	text-decoration: underline;
}
.chushi table td .bold{
	font-weight: bold;
}

.chushi table th.large{
	font-size: 22px;
}
.chushi table th.col2{
	width: 380px;
	background: #00368C;
}
.chushi table th.col2 span{color: #FFCE00;}
.chushi table td.text{
	padding: 10px;
	font-size: 18px;
	text-align: left;
}
.chushi .come {
    font-size: 18px;
    color: #333;
    width: 1470px;
    text-align: left;
    margin: 10px auto 0 auto;
}

/* ミディアムデバイス (タブレット) のスタイル */
@media (max-width: 1024px) {
	

	.sp_non{
		display: none !important;
	}
	.header{
	width: 100%;
	height: 80px;	
	background: rgb(213,238,245);
    background: linear-gradient(180deg, rgba(213,238,245,1) 0%, rgba(255,255,255,1) 100%);
	position: relative;
	padding-top: 18px;	
	}
	
	h3{
	width: 100%;
	height: 44px;
	background:url("../images/h3_seat.png") no-repeat center center;
	background-size: contain;
	}
	.contents {
		width: 400px;
        position: relative;	
        padding-bottom: 40px;
    }

    #sea_menu {
        width: 380px;
		margin: 0 auto 20px auto; 
		flex-wrap: wrap;
		height: auto;
		gap: 8px;
    }

    #sea_menu li a{
		font-size: 16px;
		background: url(../images/seat_arrow.png) right 10px center no-repeat #FFF;
		line-height: 40px;
		background-size: 10px auto;
		width: 175px;
	}
    #sea_menu li.yoyaku a{
		width: 356px;
	}
    #sea_menu li.yoyaku a i{
		background-size: 100%;
		width: 14px;
		height: 14px;
		margin-left: 10px;
	}

.howto{	font-size: 14px;}
.howto .tit{margin-bottom: 5px;}

#seat h4{
	width: 380px;
	margin: 0 auto 20px auto;
	font-size: 20px;
	text-align: center;
	text-indent: 0rem;
	border-bottom: #00368C 5px solid;
}

#seat h4 span{font-size: 12px; margin: 0; display: block; margin-top: -15px;}

	#sea_btn{
		width: 380px;
		height: 40px;
		margin: 0px auto 20px auto;
	}
	
	#sea_btn_left{
		float: left;
		width: 50%;
		height: 40px;
		line-height: 40px;
		background: #666;
		font-size: 16px;
	}
	#sea_btn_right{
		float: left;
		width: 50%;
		height: 40px;
		line-height: 40px;
		background: #666;
		font-size: 16px;
	}
	#sea_btn i{
		font-size: 20px;
		width: 26px;
		height: 26px;
		line-height: 26px;
		margin-right: 6px;
	}

	#sea_btn span{
		font-size: 22px;
		font-weight: 400;
		margin-right: 10px;
	}
	#seat_01, #seat_02{
		display: none;
		background: #EAEAEA;
		padding-top: 20px;
	}
	#seat_01.active, #seat_02.active{
		display: block;
	}

.about_top .left p{font-size: 14px; line-height: 20px; padding: 10px 0;}
	.map{
		text-align: center;
		margin: 0 auto 30px auto;
		padding-top: 30px;
		width:400px;
		overflow-x: scroll;
		background: url(../images/seat_floor_mida.svg) top center no-repeat !important;
		background-size: 120px auto !important;
		position: relative;
		padding-bottom: 15px;
	}
	.map svg{
        width: 840px;
        height: 530px;
	}

	#seat_02 .map svg{
        width: 880px;
        height: 350px;}
.map_memo{
	width: 380px;
	background-size: 95%;
	height: 70px;
	position: sticky;
	left: 10px;
	background: url(../images/seat_map_memo_sp.png) center center no-repeat;
        background-size: 94%;
	bottom: 5px;
}
	#seat .about::before{
		content: '';
		width: 110px;height: 30px;
		background:url(../images/seat_bk_arrow.svg) no-repeat;
		position: absolute;
		top: -10px;
		left: calc(50% - 55px);
	}

	.about_top{
		width: 380px;
		margin: 0 auto 25px auto;
		flex-wrap: wrap;
	}
	#seat_01 .about_top .left .mida,
	#seat_02 .about_top .left .mida{
		background-position: left top;
		background-size: 50px;
		padding: 0;
		padding-left: 60px;
		margin: 0 auto;
		margin-left: 34px;
		width: auto;display: inline-block;
	}
	.about_top .left{width: 100%;}
	.about_top .right{
		display: flex;
		justify-content: space-between;
		gap: 5px;
		padding-top: 15px;
		width: 940px;
	}
	.textarea{
		padding: 10px 10px 20px 10px;
	}
	.textarea .mida{
		font-weight: bold;
		font-size: 14px;
		margin-bottom: 5px;
	}
	.textarea ul{
		flex-wrap: wrap;
		display: flex;
	}
	.textarea li{
		text-indent: -1rem;
		padding-left: 1rem;
		margin-right: 5px;
		font-size: 13px;
	}

	.table_scroll{
		width: 400px;
  overflow-x: auto;}

	.textarea:nth-child(1){ width: 188px;}
	.textarea:nth-child(2){ width: 188px;}
	.seat_section table{
  		/* table-layout: fixed; */
		margin: 0 auto;
		border-collapse: collapse;
		background: #FFF;
	}

.seat_section table th{background: #666666; color: #FFF; text-align: center; vertical-align: middle;border-right: 1px solid #FFF; font-size: 12px;}
.seat_section table th:last-child{border: none;}
.seat_section table td{background: #FFF;  text-align: center; vertical-align: middle;border: 1px solid #707070; font-size: 14px;}

td.cate{
	position: sticky;
	left: 0;
	width: 40px !important;
	/* writing-mode: vertical-lr; */
	writing-mode: vertical-rl;
-webkit-writing-mode: vertical-rl;
}

.seat_section table th:first-child{
	position: sticky;
	left: 0;
} 
td.seat{
	width: 110px !important;
	position: sticky;
	left: 40px;
}
td.text{font-size: 14px;}

#seat_01 table{width: 750px;}
#seat_01 th:nth-child(1){	width: 150px;}
#seat_01 th:nth-child(2){	width: 80px;}
#seat_01 th:nth-child(3){	width: 70px;}
#seat_01 th:nth-child(4){	width: 90px;}
#seat_01 th:nth-child(5){	width: 180px;}
#seat_01 th:nth-child(6){	width: 180px;}

#seat_02 table{width: 920px;}
#seat_02 th:nth-child(1){	width: 150px;}
#seat_02 th:nth-child(2){	width: 80px;}
#seat_02 th:nth-child(3){	width: 70px;}
#seat_02 th:nth-child(4){	width: 100px;}
#seat_02 th:nth-child(5){	width: 140px;}
#seat_02 th:nth-child(6){	width: 100px;}
#seat_02 th:nth-child(7){	width: 140px;}
#seat_02 th:nth-child(8){	width: 140px;}
	
  .cboxPhoto {
    max-width: 380px !important;
    height: auto !important;
  }
  #cboxClose {
    border: 0;
    padding: 0;
    margin: 0;
    overflow: none;
    text-indent: -9999px;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0px;
    right: 0px;
  }

  #cboxClose {
    background: url(../images/close.png) no-repeat center center;
    background-size: 100%;
  }

.howto table{
	width: 400px;
}

.howto table .sp_vrl{
	writing-mode: vertical-rl;
	vertical-align: middle;
	text-align: center;
	font-weight: bold;
	font-size: 14px;
	width: 20px;
}
.howto table td{
	font-size: 13px;
}
.howto .come{width: 380px;
	font-size: 12px;}

.howto dl{width: 400px;}
.howto dt{width: 80px;}
.howto dd{width: 320px;}

.atte{
	background-position: top center;
	background-size: 40px auto;
    padding: 50px 15px 10px 15px;
	height: auto;
	font-size: 14px;
	margin-top: 30px;
	position: sticky;
	left: 0;
	width: 400px;}

.textarea li .come{font-size: 10px; line-height: 15px; padding: 0; text-indent: 0; margin-top: 5px;}

.chushi .tit p{font-size: 16px; line-height: 25px;}

.chushi table{
	width: 400px;
}
.chushi table td{padding: 5px;}
.chushi table th.large{font-size: 16px;}
.chushi table th{font-size: 13px;}
.chushi table td.col1{font-size: 13px;}
.chushi table th.col2{width: 110px;}
.chushi table td.text{font-size: 12px; vertical-align: top;}

.chushi .come {
	font-size: 14px;
	width: 380px;
	margin: 5px auto 15px auto;
}


.atte2{
	width: 380px;
}
.atte2 .tit{
	font-size: 18px;
    line-height: 18px;
    margin-bottom: 10px;
}
.atte2 {
	justify-content: flex-start;
}
.atte2 dt{
	width: 100px;
	height: 30px;
	line-height: 30px;
	font-size: 14px;
}
.atte2 dd{
	width: 280px;
	font-size: 14px;
    line-height: 1.2em;
}
.atte2 .come{font-size: 12px; line-height: 16px;}
.seat_section .come{width: 100%;}


.seat_section .bottom_come{
	width: 100%;
	position: sticky;
	left: 10px;
	font-size: 14px;
	width: 380px;
	margin: 5px auto 15px auto;
}

}


/* ラージデバイス (デスクトップ) のスタイル */
@media (min-width: 1025px) {
	.pc_non{
		display: none;
	}
	.contents{
		width: 94.8%;
		padding-bottom: 40px;
	}
	
	.header{
	width: 100%;
	height: 110px;
	background: rgb(213,238,245);
    background: linear-gradient(180deg, rgba(213,238,245,1) 0%, rgba(255,255,255,1) 100%);
	position: relative;
	}
	
	h3{
	width: 100%;
	height: 110px;
	background:url("../images/h3_seat.png") no-repeat center center;
	background-size: 250px auto;
	}




  
  #cboxClose {
    border: 0;
    padding: 0;
    margin: 0;
    overflow: none;
    text-indent: -9999px;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0px;
    right: 0px;
  }

  #cboxClose {
    background: url(../images/close.png) no-repeat center center;
    background-size: 100%;
  }
	
}


@keyframes heartbeat {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.1);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}