@charset "UTF-8";

body{
	background: url("../img/bg.gif") center top var(--black);
}
#bgTop{
	position: relative;
	background: url("../img/bg_top.gif") center top repeat-x;
}
.under #bgTop{
	background: url("../img/bg_top_under.gif") center top repeat-x;
}

.loading{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10011;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: /*url("../img/bg.gif") center top*/ var(--black);
	opacity: 1;
	visibility: visible;
	transition: all 1s;
}
.loading.is-active{
	opacity: 0;
	visibility: hidden;
}
.loading-animation {
	width: 100%;
	transition: all 0.5s;
	opacity: 0;
	visibility: hidden;
}
.loading-animation.is-active {
	opacity: 1;
	visibility: visible;
}
.loading-animation img{
	display: block;
	animation: korokoro 2.5s linear 0s 1;
	max-width: 220px;
	margin: 0 auto;
}
@keyframes korokoro {
	0%   { transform: translate(0%, 0%); }
	5%   { transform: translate(10%, 0%) rotate(10deg); }
	25%  { transform: translate(20%, 0%) rotate(20deg); }
	30%  { transform: translate(-10%, 0%) rotate(-10deg); }
	35%  { transform: translate(-15%, 0%) rotate(-15deg); }
	45%  { transform: translate(10%, 0%) rotate(10deg); }
	50%  { transform: translate(15%, 0%) rotate(15deg); }
	60%  { transform: translate(-5%, 0%) rotate(-5deg); }
	65%  { transform: translate(-7%, 0%) rotate(-7deg); }
	75%  { transform: translate(0%, 0%) rotate(0deg); }
	100% { transform: translate(0%, 0%) rotate(0deg); }
}

#cbnr{
	display: block;
	position: fixed;
	right: var(--size-40px);
	bottom:  var(--size-80px);
	z-index: 998;
}
#cbnr a{
	color: var(--black);
	border-radius: var(--r20);
	padding: 2em 4em 2em 2em;
	background: url("../img/link_b.svg") right 2em center no-repeat var(--yellow);
	background-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	transition: .2s;
}
#cbnr a:hover{
	background: url("../img/link_b.svg") right 1.5em center no-repeat #fff;
	background-size: 15px;
}

header{
	position: fixed;
	left: 0;
	top: 0;
	z-index: 998;
	width: 100%;
}
header #header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: calc(50px + var(--size-80px));
	padding: var(--size-40px);
	line-height: normal;
}
header h1{
	max-width: 170px;
}
header h1 a{
	display: block;
}


/*--========== ハンバーガーメニュー ==========--*/
#hMenu {
	position: relative;
	width: 50px;
	height: 50px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-align: center;
}
.open #hMenuClose {
	position: fixed;
	right: var(--size-40px);
	top: var(--size-40px);
	width: 50px;
	height: 50px;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-align: center;
}
#hMenu span,
.open #hMenuClose span{
	position: absolute;
	display: block;
	width: 50px;
	height: 4px;
	border-radius: 999px;
	background: #fff;
	transition: transform .2s ease-in-out, top .2s ease;
}

#hMenu span:nth-child(1),
.open #hMenuClose span:nth-child(1) {
	left: 0;
	top: 4px;
}
#hMenu span:nth-child(2),
.open #hMenuClose span:nth-child(2) {
	left: 0;
	top: 23px;
}
#hMenu span:nth-child(3),
.open #hMenuClose span:nth-child(3){
	left: 0;
	top: 42px;
}
.open #hMenu span:nth-child(1),
.open #hMenuClose span:nth-child(1){
	margin-left: 0;
	top: 20px;
	left: -8px;
	width: 130%;
	transform: rotate(45deg);
}
.open #hMenu span:nth-child(2),
.open #hMenuClose span:nth-child(2){
	display: none;
}
.open #hMenu span:nth-child(3),
.open #hMenuClose span:nth-child(3){
	top:20px;
	left: -8px;
	width: 130%;
	transform: rotate(-45deg);
}

.open #headerOpneNav{
	visibility: visible;
	opacity: 1;
}
.open{
	overflow: hidden;
}
.open header{
	display: none;
	border-bottom: none;
	width: 120px;
	left: inherit;
	right: 0;
	background: none;
}
#headerOpneNav{
	position: fixed;
	z-index: 9999;
	background: #222;
	display: flex;
	justify-content: center;
	align-items: baseline;
	visibility: hidden;
	opacity: 0;
	transition: opacity .2s ease, visibility .1s ease;
	width: 100%;
	height: 100vh;
	padding: 100px 0 150px;
	overflow-x: hidden;
	text-align: center;
}
@media screen and (min-height: 700px){
	#headerOpneNav{
		align-items: center;
		padding: 0;
	}
	#headerOpneNav > div{
		height: 550px;
	}
}
#headerOpneNav h2{
	width: 250px;
	margin: 0 auto;
	margin-bottom: var(--size-60px);
}
#headerOpneNav li{
	font-size: 116%;
	line-height: normal;
	margin-top: 1.5em;
}
#headerOpneNav #headerOpneNavImg{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	width: 299px;
}

#base article{
	padding-top: var(--size-120px);
}

footer{
	font-size: 89%;
	line-height: normal;
	color: #fff;
	background: url("../img/bg_bottom.png") center bottom no-repeat;
}
footer a{
	color: #fff;
}
footer #pageTop{
	text-align: right;
	position: relative;
}
footer #pageTop a{
	position: relative;
	top: -122px;
	width: 76px;
	display: inline-block;
}
footer #footerNav{
	padding-bottom: var(--size-240px);
}
footer #footerNavBox{
	display: flex;
	justify-content: space-between;
	padding-bottom: var(--size-100px);
}
footer #footerNavBox div{
	display: flex;
}
footer #footerNavBox div ul{
	width: 208px;
	padding-right: var(--size-40px);
}
footer #footerNavBox div li{
	margin-top: calc(var(--size-10px) + var(--size-20px));
}
footer #footerNavBox div li:first-child{
	margin-top: 0;
}
footer #footerNavBox h1{
	width: 380px;
}

.btnBox{
	margin-top: 1em;
	margin-bottom: 1em;
}
.btnBox a{
	display: inline-block;
	padding: 1em 2em;
	width: 256px;
	background: url("../img/link_b.svg") right 2em center no-repeat var(--yellow);
	background-size: 15px;
	border-radius: 999px;
	margin: 0 5px;
	color: var(--black);
	font-weight: 700;
	line-height: 1.3;
	transition: .2s;
}
.btnBox a:hover{
	background: url("../img/link_b.svg") right 1.5em center no-repeat #fff;
	background-size: 15px;
}
.btnBox a:first-child{
	margin-left: 0;
}
.btnBox a:last-child{
	margin-right: 0;
}
.btoPage a{
	display: block;
	margin: 0 auto !important;
}

.blue{
	color: var(--blue);
}
.red{
	color: var(--red);
}
.fontSize1down{
	font-size: 87%;
}
.atnt{
	background: #f7f7f7;
	text-align: center;
	line-height: 1.5;
	padding: var(--size-20px);
	margin-top: var(--size-40px);
	margin-bottom: var(--size-40px);
	font-size: 88%;
}
.caption{
	font-size: 87%;
	line-height: 1.5;
	margin-top: 1em;
}
.rightTxt{
	text-align: right;
}

main{
	background: url("../img/bg_bottom.gif") center bottom repeat-x;
}
#mainBottom{
	position: relative;
	margin-top: var(--size-240px);
}
#mainBottom img{
	position: relative;
	display: block;
	margin: 0 auto;
	width: 299px;
	bottom: -24px;
}

#ttl{
	text-align: center;
	line-height: normal;
	padding: var(--size-40px);
	margin-bottom: var(--size-160px);
}
#ttl strong{
	display: block;
	font-size: 355%;
	font-weight: 700;
	margin-bottom: 0.1em;
}
section h4{
	text-align: center;
	font-size: 266%;
	margin-bottom: var(--size-60px);
}

/*-- ========== Youtube ========== --*/
#youtubeBox{
	position: relative;
	width: 960px;
	margin: var(--size-160px) auto;
}
#youtubeBox #youtubeImg01,
#youtubeBox #youtubeImg02,
#youtubeBox #youtubeImg03{
	position: absolute;
	z-index: 5;
}
#youtubeBox #youtubeImg01{
	width: 200px;
	left: -45px;
	top: -63px;
}
#youtubeBox #youtubeImg02{
	width: 103px;
	left: 444px;
	bottom: -133px;
}
#youtubeBox #youtubeImg03{
	width: 220px;
	right: -120px;
	top: 120px;
}
#youtubeBox iframe{
	display: block;
	width: 960px;
	height: 540px;
	margin: 0 auto;
}

/*-- ========== infoBox ========== --*/
#info{
	position: relative;
}
#info #infoBgImg{
	position: absolute;
	z-index: 1;
	right: 139px;
	top: -107px;
	width: 160px;
}
#infoBox{
	position: relative;
	z-index: 2;
	border: var(--border);
	border-radius: 40px;
	background: rgba(0,0,0,0.5);
	padding: var(--size-80px);
}
#infoBox #infoBoxOverview{
	display: flex;
}
#infoBox #infoBoxOverview div:first-child{
	width: 26%;
	padding: 0 var(--size-10px);
	text-align: center;
}
#infoBox #infoBoxOverview div:first-child p{
	font-size: 87%;;
	line-height: normal;
	text-align: center;
	margin-top: 0.5em;
}
#infoBox #infoBoxOverview div:first-child p span{
	font-size: 87%;
	color: var(--red);
}
#infoBox #infoBoxOverview div:first-child p a{
	text-decoration: underline;
}
#infoBox #infoBoxOverview div:first-child p a:hover{
	text-decoration: none;
}
#infoBox #infoBoxOverview > div:last-child{
	width: 74%;
	padding-left: var(--size-40px);
}
#infoBox #infoBoxOverview > div:last-child > div{
	text-align: left;
}
#infoBox .ovList p{
	font-weight: 700;
}
#infoBox .ovList p strong{
	font-size: 215%;
	line-height: 1.3;
}
#infoBox .ovList dl{
	display: flex;
	width: 100%;
	border-bottom: var(--bordersolid1px);
	padding: var(--size-10px) var(--size-20px);
	margin-top: var(--size-20px);
	line-height: 1.5;
}
#infoBox .ovList dt{
	display: flex;
	justify-content: space-between;
	width: 9.4em;
	font-weight: 700;
	padding-right: 1em;
	text-align: right;
}
#infoBox #infoList.ovList dt{
	width: 7em;
}
#infoBox #infoList.ovList dl:nth-child(2) dt{
	padding-top: 0.5em;
}
#infoBox .ovList dt span{
	width: 7em;
	padding-right: 1em;
	display: inline-block;
}
#infoBox .ovList dt::after{
	content: "　:";
}
#infoBox .ovList dd{
	width: calc(100% - 9.4em);
}
#infoBox #infoList.ovList dd{
	width: calc(100% - 7em);
}
#infoBox .ovList dd strong{
	font-size: 162%;
	line-height: normal;
}
#infoBox .ovList dd span{
	font-size: 88%;
}
#infoBox .ovList dd ul{
	padding-top: 0.3em;
}
#infoBox .ovList dd li{
	font-size: 87%;
	text-indent: -1.5em;
	padding-left: 1.5em;
	margin-bottom: 0.2em;
}
#infoBox .ovList dd li::before{
	content: "※ ";
}
#infoBox .ovList dd a{
	text-decoration: underline;
}
#infoBox .ovList dd a:hover{
	text-decoration: none;
}
#infoBox #infoBoxTicket{
	margin-top: var(--size-60px);
	margin-bottom: var(--size-60px);
}
#infoBox #infoBoxTicket h3{
	font-size: 162%;
	line-height: normal;
	margin-bottom: 0.5em;
}
#infoBox #ticketBox{
	margin-bottom: 1em;
}
#infoBox .spTable{
	display: none;
}
#infoBox #ticketBox table{
	width: 100%;
	border-collapse: collapse;
}
#infoBox #ticketBox th,
#infoBox #ticketBox td{
	width: 37%;
	text-align: center;
	padding: var(--size-40px) var(--size-10px);
	line-height: normal;
	font-weight: 400;
	background: #fff;
	color: #111;
}
#infoBox #ticketBox th{
	font-size: 112%;
	font-weight: 700;
	color: #fff;
	background: var(--blue);
	border-bottom: var(--bordersolid1px);
	border-right: var(--bordersolid1px);
}
#infoBox #ticketBox td{
	font-size: 88%;
	border-bottom: var(--bordersolid1px);
	border-right: var(--bordersolid1px);
}
#infoBox #ticketBox th:last-child,
#infoBox #ticketBox td:last-child{
	border-right: none;
}
#infoBox #ticketBox tr:last-child th:first-child,
#infoBox #ticketBox tr:last-child td:last-child{
	border-bottom: none;
}

#infoBox #ticketBox td span{
	font-size: 128%;
}
#infoBox #ticketBox td strong{
	color: var(--blue);
}
#infoBox #ticketBox tr th:first-child{
	width: 26%;
}
#infoBox #ticketBox tr:first-child th:first-child{
	border-top-left-radius: var(--r40);
}
#infoBox #ticketBox tr:first-child th:last-child{
	border-top-right-radius: var(--r40);
}
#infoBox #ticketBox tr:last-child th:first-child{
	border-bottom-left-radius: var(--r40);
}
#infoBox #ticketBox tr:last-child td:last-child{
	border-bottom-right-radius: var(--r40);
}

#infoBox #infoBoxTicket .btnBox{
	text-align: left;
}
#infoBox #infoBoxTicket span{
	font-size: 88%;
}
#infoBox #infoBoxTicket ul{
	margin-top: 2em;
}
#infoBox #infoBoxTicket ul li{
	margin-top: 0.5em;
	text-indent: -1.5em;
	padding-left: 1.5em;
	font-size: 88%;
	line-height: 1.3;
}
#infoBox #infoBoxTicket ul li::before{
	content: "※ ";
}
#infoBox #infoBoxTicket .infoP strong{
	color: var(--yellow);
}

#infoBox .btnBox{
	display: flex;
}
#infoBox .btnBox a{
	display: flex;
	align-items: center;
	background: url("../img/link_b.svg") right 2em center no-repeat var(--green);
	background-size: 15px;
	color: #111;
	font-weight: 700;
	border-radius: 10px;
	padding: 2em 1em;
}
#infoBox .btnBox a:hover{
	background: url("../img/link_b.svg") right 1.5em center no-repeat #fff;
	background-size: 15px;
}


/*-- ========== TOP ========== --*/
#top #base article{
	padding-top: 0;
}

#top #mv .mvSP{
	display: none;
}

#topYoutube{
	position: relative;
	width: 100%;
	padding-top: calc(var(--size-120px) + var(--size-10px));
	padding-bottom: calc(var(--size-160px) * 2.6);
	margin-top: calc(var(--size-20px) + var(--size-10px));
	background: url("../img/bg_bottom.gif") center bottom repeat-x;
}
#topYoutube iframe{
	position: relative;
	z-index: 3;
}
#topYoutube #youtubeBox{
	margin: 0 auto;	
}
#topYoutube p{
	font-size: 177%;
	font-weight: 700;
	text-align: center;
	margin-top: calc(var(--size-160px) + var(--size-40px));
}
#topYoutube p .red{
	color: var(--red);
}
#topYoutube p .grey{
	color: var(--grey);
}
#topYoutube p .yellow{
	color: var(--yellow);
}
#topYoutube p .blue{
	color: var(--blue);
}
#topYoutube p img{
	width: 163px;
	margin: 0 var(--size-10px);
	line-height: normal;
}
#topYoutubeObakeObi{
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	margin-bottom: -74px;
	width: 1040px;
}
#topYoutubeImg{
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	left: 0;
	margin: 0 auto;
	mix-blend-mode: darken;
	width: 100%;
	max-width: 1500px;
	overflow: hidden;
}
#topYoutubeImg img{
	width: 1500px;
}

#contentList{
	margin-top: var(--size-80px);
	margin-bottom: var(--size-100px);
}
#contentList li{
	max-width: calc(590px + var(--size-80px));
	margin: 0 var(--size-40px);
	filter: blur(0.3em);
	padding: var(--size-40px);
}
#contentList li.slick-center{
	filter: blur(0);
}
#contentList li img{
	border: var(--border);
	border-radius: var(--r40);
}
#contentList li p{
	margin-top: var(--size-20px);
	padding: 0 10px;
}
#contentList .prev-arrow{
	position: absolute;
	z-index: 100;
	left: calc(50% - 395px);
	top: 310px;
	width: 37px;
	height: auto;
}
#contentList .next-arrow{
	position: absolute;
	z-index: 100;
	right: calc(50% - 395px);
	top: 310px;
	width: 37px;
	height: auto;
}
#contentList .slick-arrow{
	cursor: pointer;
	transition: opacity .2s ease, visibility .1s ease;
}
#contentList .slick-arrow:hover{
	opacity: 0.5;
}

#newsBox{
	position: relative;
	margin-top: var(--size-100px);
	margin-bottom:  var(--size-160px);
}
#newsBox #newsImg{
	position: absolute;
	z-index: 1;
	left: calc(50% - 70px);
	top: var(--size-80px);
	width: 140px;
}
#newsContent{
	position: relative;
	z-index: 2;
	background: #e6e6e5;
	color: var(--black);
	font-size: 87%;
	border-radius: var(--r40);
	padding: var(--size-40px) var(--size-80px);
}
#newsContent a{
	color: var(--black);
	text-decoration: underline;
}
#newsContent a:hover{
	text-decoration: none;
}
#newsContent .newsCon{
	display: flex;
	width: 100%;
	padding: var(--size-10px) var(--size-20px);
	margin-top: var(--size-10px);
	border-bottom: var(--bordersolid1px);
}
#newsContent .newsCon:first-child{
	margin-top: 0;
}
#newsContent .newsCon .day{
	width: 8em;
}
#newsContent .newsCon .newsTtl{
	width: calc(100% - 8em);
}

#eventBox{
	margin-top: var(--size-100px);
	margin-bottom: var(--size-100px);
}
#eventBox h4{
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--yellow);
}
#eventBox h4 span{
	display: flex;
	align-items: center;
}
#eventBox h4 span:first-child{
	padding-left: 100px;
}
#eventBox h4 img{
	margin-left: 10px;
	width: 100px;
}
#eventBox .btnBox{
	display: flex;
	justify-content: flex-end;
	padding-right: var(--size-80px);
	margin-top: var(--size-40px);
}
#eventBoxIn{
	display: flex;
}
#eventBoxIn > div{
	width: calc(100% /3);
	padding: 0 var(--size-20px);
	line-height: 1.5;
	position: relative;
	z-index: 1;
}
#eventBoxIn > div:nth-child(1)::before{
	content: "";
	background: url('../img/eventImg01.png') left top no-repeat;
	background-size: cover;
	display: block;
	position: absolute;
	z-index: -1;
	left: -20px;
	top: -108px;
	width: 135px;
	height: 221px;
}
#eventBoxIn > div:nth-child(3)::before{
	content: "";
	background: url('../img/eventImg02.png') left top no-repeat;
	background-size: cover;
	display: block;
	position: absolute;
	z-index: 2;
	right: -55px;
	top: 130px;
	width: 92px;
	height: 101px;
}
#eventBoxIn .eventImg img{
	border-radius: var(--r40);
}
#eventBoxIn .eventTxtBox{
	margin-top: 0.8em;
	padding: 0 var(--size-10px);
}
#eventBoxIn .eventTxtBox > p:first-child{
	margin-bottom: 0.5em;
	cursor: pointer;
}
#eventBoxIn a .eventTxtBox > p:first-child{
	text-decoration: underline;
	color: var(--green);
	font-weight: 700;
}
#eventBoxIn a .eventTxtBox p:first-child:hover{
	text-decoration: none;
}

#eventBoxIn .eventTxtBox p:nth-child(2){
	font-size: 89%;
}
#eventBoxIn .eventTxtBox dl{
	display: flex;
	align-items: center;
	width: 100%;
	background: rgba(0 , 0 , 0 , 0.25);
	font-size: 78%;
	margin-top: 1em;
}
#eventBoxIn .eventTxtBox dt{
	line-height: normal;
	width: 6em;
	text-align: center;
}
#eventBoxIn .eventTxtBox dd{
	width: calc(100% - 6em);
	padding: 1em 1.5em;
	border-left: solid 1px #fff;
}
#eventBoxIn .eventEnd .eventTxtBox{
	color: #999;
}

#goodsBox{
	margin-top: var(--size-120px);
	margin-bottom: var(--size-120px)
}
#goodsBox a{
	position: relative;
	display: block;
	border-radius: var(--r40);
	background: url("../img/goodsImg.png") right center no-repeat #1c2426;
	background-size: contain;
	padding: calc(var(--size-40px) + var(--size-10px));
}
#goodsBox a > img:first-child{
	width: 274px;
}
#goodsBox a span{
	display: flex;
	align-items: center;
	background: url("../img/link_b.svg") right 2em center no-repeat var(--yellow);
	background-size: 15px;
	color: var(--black);
	font-weight: 700;
	border-radius: 999px;
	width: 344px;
	padding: 1em 2em;
	margin-top: calc(var(--size-20px) + var(--size-10px));
	transition: .2s;
}
#goodsBox a span:hover{
	background: url("../img/link_b.svg") right 1.5em center no-repeat #fff;
	background-size: 15px;
}
#goodsBox a > img:last-child{
	position: absolute;
	z-index: 1;
	left: 125px;
	bottom: -72px;
	width: 216px;
}


/*-- ========== EVENT ========== --*/
#event #atntBox{
	background: #fff;
	color: var(--black);
	padding: var(--size-40px) var(--size-80px);
	border-radius: var(--r40)
}
#event #atntBox h4{
	text-align: center;
	color: var(--red);
	font-size: 133%;
	font-weight: 700;
	margin-bottom: 0.5em;
	line-height: normal;
}

#event .eventList{
	display: flex;
	width: 100%;
	margin-top: var(--size-60px);
	line-height: 1.5;
	padding-bottom: var(--size-40px);
	margin-bottom:  var(--size-60px);
	border-bottom: var(--bordersolidw);
}
#event .eventList.eventSingle{
	display: block;
}
#event .eventList .eventImg{
	width: 275px;
}
#event .eventList .eventImg a{
	display: block;
}
#event .eventList .eventImg img{
	border-radius: var(--r20);
}
#event .eventList.eventSingle .eventImg{
	width: 100%;
	text-align: center;
	margin-bottom: var(--size-40px);
}
#event .eventList.eventSingle .eventImg img{
	width: 567px;
}
#event .eventList .eventTxtBoxAll{
	width: calc(100% - 275px);
	padding-left: var(--size-40px);
}
#event .eventList h4{
	font-size: 150%;
	line-height: 1.4;
	font-weight: 700;
	margin-bottom: 0.3em;
	text-align: left;
	padding: 0 0.5em;
}
#event .eventList h4 a{
	text-decoration: underline;
	color: var(--green);
}
#event .eventList h4 a:hover{
	text-decoration: none;
}
#event .eventList .eventTxtBox{
	padding: 0 0.5em;
}
#event .eventList p{
	margin-bottom: 0.5em;
}
#event .eventList p a,
#event .eventList li a{
	text-decoration: underline;
}
#event .eventList p img{
	width: auto;
	max-width: 1216px;
}
#event .eventList p.imgC{
	text-align: center;
	margin-bottom: 1em;
}
#event .eventList p.imgP{
	text-align: center;
	margin-bottom: 1em;
}
#event .eventList p.imgP img{
	max-width: 30%;
	height: auto;
	margin: 0 var(--size-10px);
}
#event .eventList div > p:last-child{
	margin-bottom: 0;
}
#event .eventList ul{
	margin-bottom: 0.5em;
}
#event .eventList li{
	text-indent: -1.3em;
	padding-left: 1.3em;
	margin-bottom: 0.5em;
	font-size: 87%;
	line-height: 1.25;
}
#event .eventList li::before{
	content: "※ ";
}
#event .tableBox{
	background: var(--black);
	padding: 1px 1px 0 1px;
	margin-top: var(--size-20px);
}
#event .tableBox .tableFlex{
	width: 100%;
	display: flex;
	padding-bottom: 1px;
}
#event .tableBox .tableFlex .tableBoxTh{
	padding: var(--size-40px);
	font-weight: 700;
	color: var(--black);
	background: var(--yellow);
	margin-right: 1px;
	width: 26%;
	text-align: center;
}
#event .tableBox .tableFlex .tableBoxTd{
	padding: var(--size-40px);
	background: #fff;
	color: var(--black);
	width: 74%;
}
#event .tableBox .tableFlex .tableBoxTd a{
	color: var(--black);
}
#event .eventList .btnBox a{
	background: url("../img/link_b.svg") right 2em center no-repeat #eee;
	background-size: 15px;
	border: solid 1px #eee;
	color: #111;
	width: 512px;
}
#event .eventList .btnBox a:hover{
	background: url("../img/link_b.svg") right 1.5em center no-repeat #fff;
	background-size: 15px;
}
#event .eventList.eventEnd{
	border-color: #999;
}
#event .eventList.eventEnd h4{
	color: #999;
	font-size: 116%;
}
#event .eventList.eventEnd > div{
	color: #999;
}
#event .eventList.eventEnd .tableBox{
	background: #eee;
	color: #999;
}
#event .eventList.eventEnd .tableBox .tableFlex .tableBoxTh{
	background: #f7f7f7;
	color: #999;
}
#event .eventList.eventEnd .tableBox .tableFlex .tableBoxTd{
	color: #999;
}
#event .eventList.eventEnd .btnBox{
	display: none;
}


/*-- ========== Exhibition Overview ========== --*/
#eo #eoTxt h2{
	font-size: 177%;
	line-height: 2;
	text-align: center;
}
#eo #eoTxt p{
	line-height: 2.5;
	margin-bottom: var(--size-160px);
}
#eo #imgList{
	margin: var(--size-80px) 0;
}
#eo #imgList li img{
	width: 350px;
}

/*-- ========== Goods ========== --*/
#goodsBox p:first-child{
	margin-bottom: var(--size-80px);
}
#goodsBox p:first-child span{
	font-size: 87%;
	display: block;
	margin-top: 0.5em;
}
#goods .goods1{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	line-height: normal;
}
#goods .goods2,
#goods .goods3{
	display: flex;
	flex-wrap: wrap;
	line-height: normal;
}
#goods .goods1 > div,
#goods .goods2 > div{
	width: calc(50% - var(--size-20px));
	margin-bottom: var(--size-80px);
	margin-right: var(--size-40px);
}
#goods .goods2 > div:nth-child(2){
	margin-right: 0;
}
#goods .goods3 > div{
	width: calc(100% / 3.051 - var(--size-20px));
	margin-bottom: var(--size-80px);
	margin-right: var(--size-40px);
}
#goods .goods3 > div:nth-child(3n){
	margin-right: 0;
}
#goods .goods1 dl,
#goods .goods2 dl,
#goods .goods3 dl{
	display: flex;
	justify-content: space-between;
	padding: 0 var(--size-10px);
	margin: var(--size-20px) 0 var(--size-10px);
}
#goods .goods1 dt,
#goods .goods2 dt,
#goods .goods3 dt{
	padding-right: 1em;
	font-weight: 700;
}
#goods .goods1 dd span,
#goods .goods2 dd span,
#goods .goods3 dd span{
	font-size: 87%;
}
#goods .goods1 p,
#goods .goods2 p,
#goods .goods3 p{
	padding: 0 var(--size-10px);
}
#goods .goods1 p span,
#goods .goods2 p span,
#goods .goods3 p span{
	font-size: 87%;
	display: block;
	margin-top: 0.8em;
}

/*-- ========== NEWS ========== --*/

#news .newsCon{
	display: flex;
	width: 100%;
	margin-bottom: 1em;
	background: #e6e6e5;
	color: var(--black);
	font-size: 87%;
	border-radius: var(--r40);
	padding: var(--size-40px) var(--size-80px);
}
#news .newsCon a{
	color: var(--black);
	text-decoration: underline;
}
#news .newsCon a:hover{
	text-decoration: none;
}
#news .newsCon .day{
	width: 8em;
}
#news .newsCon .newsTtl{
	width: calc(100% - 8em);
}

#news .newsBox{
	padding-bottom: var(--size-40px);
	margin-bottom:  var(--size-80px);
}

#news .newsBox .date{
	padding: 0 0.5em;
	margin: 0;
}
#news .newsBox h4{
	font-size: 150%;
	line-height: 1.4;
	font-weight: 700;
	margin-bottom: 1.3em;
	padding: 0.5em;
	text-align: left;
	border-bottom: var(--bordersolidw);
}
#news .newsBox p{
	margin-bottom: 1em;
}

#news .newsBox > p:last-child{
	margin-bottom: 0;
}
#news .newsBox > div{
	padding: 0.5em;
}
#news .newsBox > div a{
	text-decoration: underline;
}
#news .newsBox > div a:hover{
	text-decoration: none;
}
#news .newsBox ul{
	margin-bottom: 1em;
}
#news .newsBox li{
	text-indent: -1.3em;
	padding-left: 1.3em;
	margin-bottom: 0.5em;
	font-size: 87%;
	line-height: 1.25;
}
#news .newsBox li::before{
	content: "※ ";
}
#news .newsBox img{
	width: auto;
	max-width: 1092px;
}
#news .newsBox iframe{
	width: 100%;
	height: 50vw;
	max-height: 655px;
}
#news .newsBox .aligncenter{
	display: block;
	text-align: center;
	margin-left:auto;
	margin-right: auto;
}



@media screen and (max-width: 1500px) {/* 1500px */

	.loading-animation img{
		max-width: 15vw;
	}

	footer #footerNavBox h1{
		width: 35vw;
	}


/*-- ========== infoBox ========== --*/
	#info #infoBgImg{
		right: 9.2vw;
		top: -7.1vw;
		width: 10.6vw;
	}

/*-- ========== Youtube ========== --*/
	#youtubeBox,
	#youtubeBox iframe{
		width: 64vw;
		height: 36vw;
	}
	#youtubeBox #youtubeImg01{
		width: 13vw;
		left: -3vw;
		top: -4.2vw;
	}
	#youtubeBox #youtubeImg02{
		width: 6.8vw;
		left: 29.6vw;
		bottom: -8.8vw;
	}
	#youtubeBox #youtubeImg03{
		width: 14.6vw;
		right: -8vw;
		top: 8vw;
	}

/*-- ========== TOP ========== --*/
	#topYoutube{
		padding-bottom: calc(var(--size-160px) * 3);
	}
	#topYoutube p img{
		width: 10.8vw;
	}
	#topYoutubeObakeObi{
		margin-bottom: -5vw;
		width: 69vw;
	}
	#topYoutubeImg{
		width: 98.8vw;
		max-width: inherit;
		overflow: hidden;
	}
	#topYoutubeImg img{
		width: 100%;
	}

	#contentList li{
		max-width: calc(39vw + var(--size-80px));
	}
	#contentList .prev-arrow{
		position: absolute;
		z-index: 100;
		left: calc(50% - 26vw);
		top: 20vw;
		width: 2.46vw;
	}
	#contentList .next-arrow{
		position: absolute;
		z-index: 100;
		right: calc(50% - 26vw);
		top: 20vw;
		width: 2.46vw;
	}

	#newsBox #newsImg{
		left: calc(50% - 4.5vw);
		top: var(--size-80px);
		width: 9vw;
	}

	#eventBox h4 img{
		margin-left: var(--size-10px);
		width: 6.6vw
	}
	#eventBoxIn > div:nth-child(1)::before{
		left: -1.3vw;
		top: -7.2vw;
		width: 9vw;
		height: 14.7vw;
	}
	#eventBoxIn > div:nth-child(3)::before{
		right: -3.18vw;
		top: 8.66vw;
		width: 6.1vw;
		height: 6.7vw;
	}

	#goodsBox a > img:first-child{
		width: 18.2vw;
	}
	#goodsBox a span{
		width: 23vw;
	}
	#goodsBox a > img:last-child{
		left: 8vw;
		bottom: -4.8vw;
		width: 14.4vw;
	}

	/*-- ========== NEWS ========== --*/
	#news .newsBox img{
		max-width: 100%;
	}

/*-- ========== Exhibition Overview ========== --*/
	#eo #imgList li img{
		width: 25vw;
	}

}



@media screen and (max-width: 1366px) {/* iPad pro　landscape */

	body{
		background-size: 100%;
	}
	.under #bgTop{
		background-size: 100%;
	}
	main{
		background-size: 100%;
	}

	#topYoutubeImg{
		width: 98vw;
	}

	#event .eventList p img{
		width: 100%;
		max-width: 1216px;
	}

}



@media screen and (max-width: 1194px) {/* iPad pro 11　landscape */



}



@media screen and (max-width: 1024px) {/* iPad pro　portrait */

	.loading-animation img{
		max-width: 30vw;
	}

	header #header{
		height: calc(5vw + var(--size-80px));
	}
	header h1{
		max-width: 24vw;
	}

/*--========== ハンバーガーメニュー ==========--*/
	#hMenu {
		width: 5vw;
		height: 5vw;
	}
	.open #hMenuClose {
		width: 5vw;
		height: 5vw;
	}
	#hMenu span,
	.open #hMenuClose span{
		width: 5vw;
		height: 0.5vw;
	}
	#hMenu span:nth-child(1),
	.open #hMenuClose span:nth-child(1) {
		top: 0.5vw;
	}
	#hMenu span:nth-child(2),
	.open #hMenuClose span:nth-child(2) {
		top: 2.5vw;
	}
	#hMenu span:nth-child(3),
	.open #hMenuClose span:nth-child(3){
		top: 4.6vw;
	}

	.open #hMenu span:nth-child(1),
	.open #hMenuClose span:nth-child(1){
		left: -0.8vw;
		top: 2.5vw;
	}
	.open #hMenu span:nth-child(3),
	.open #hMenuClose span:nth-child(3){
		left: -0.8vw;
		top:2.5vw;
	}

	#headerOpneNav{
		padding: var(--size-160px) var(--size-160px);
	}
	@media screen and (min-height: 700px){
		#headerOpneNav{
			align-items:baseline;
			padding: var(--size-160px) var(--size-160px);
		}
		#headerOpneNav > div{
			height: inherit;
		}
	}
	.open header{
		width: 120vw;
	}
	#headerOpneNav > div{
		height: 55vw;
	}
	@media screen and (min-height: 700px){
		#headerOpneNav > div{
			height: 55vw;
		}
	}
	#headerOpneNav h2{
		width: 35vw;
	}
	#headerOpneNav #headerOpneNavImg{
		width: 30vw;
	}

	footer #footerNav{
		padding-bottom: calc(var(--size-240px) + var(--size-240px));
	}

	.btnBox{
		flex-wrap: wrap;
	}


/*-- ========== infoBox ========== --*/
	#infoBox #infoBoxOverview{
		display: block;
	}
	#infoBox #infoBoxOverview div:first-child{
		width: 100%;
		padding: 0;
	}
	#infoBox #infoBoxOverview div:first-child img{
		width: 40%
	}
	#infoBox #infoBoxOverview > div:last-child{
		width: 100%;
		padding-left: 0;
		margin-top: var(--size-80px);
	}
	#infoBox .btnBox a{
		width: calc(49.8% - var(--size-40px));
		margin: var(--size-5px) var(--size-10px);
	}


/*-- ========== TOP ========== --*/

	#newsBox #newsImg{
		top: var(--size-120px);
	}


/*-- ========== EVENT ========== --*/
	#event .eventList .btnBox a{
		background: url("../img/link_b.svg") right 1em center no-repeat #eee;
		background-size: 2vw;
		transition: inherit;
		width: 80vw;
	}
	#event .eventList .btnBox a:hover{
		background: url("../img/link_b.svg") right 1em center no-repeat #fff;
		background-size: 2vw;
	}

}



@media screen and (max-width: 768px) {/* TB */
	body{
		background-size: 200%;
	}
	.under #bgTop{
		background-size: 200%;
	}
	main{
		background-size: 200%;
	}

	.atnt{
		text-align: left;
		padding: var(--size-40px);
	}

	#cbnr{
		width: 80vw;
		left: 10vw;
		right: 0;
		bottom: 4vw;
	}
	#cbnr a{
		display: block;
		width: 100%;
	}

	#mainBottom img{
		width: 40vw;
		bottom: -3.4vw;
	}
	footer #pageTop a{
		top: -10vw;
		width: 10vw;
	}
	footer #footerNav{
		padding-top: 0;
		padding-bottom: calc(var(--size-240px) + var(--size-240px));
	}
	footer #footerNavBox{
		width: 100%;
		flex-wrap: wrap;
		padding-bottom: var(--size-100px);
	}
	footer #footerNavBox h1{
		order: 1;
		margin: 0 auto;
		
	}
	footer #footerNavBox div{
		order: 2;
		justify-content: space-between;
		margin: var(--size-160px) 0;
	}
	footer #footerNavBox div ul{
		width: 44vw;
		padding-right:0;
	}
	footer #footerNavBox div li{
		margin-top: var(--size-80px);
	}
	footer #footerNavBox div li:first-child{
		margin-top: 0;
	}
	footer #footerNav p{
		text-align: center;
	}
	footer #footerNavBox h1{
		width: 50vw;
	}

	.btnBox a{
		padding: 2em 1em;
		width: 80%;
		background-size: 4vw;
		transition: inherit;
	}
	.btnBox a:hover{
		background-size: 4vw;
	}

	.under section > h3 strong{
		font-size: 225%;
	}

	.copyright{
		margin-top: 0.1em;
	}
	.copyright img{
		width: 20vw !important;
	}

	#ttl{
		display: block;
		padding:var(--size-60px) var(--size-40px);
		margin-left: 0;
		margin-bottom: var(--size-100px);
	}
	#ttl strong{
		font-size: 200%;
		display: block;
		margin-bottom: 0.1em;
	}
	#ttl span{
		font-size: 87%;
	}

/*-- ========== Youtube ========== --*/
	#youtubeBox,
	#youtubeBox iframe{
		width: 80vw;
		height: 45vw;
	}
	#youtubeBox #youtubeImg01{
		width: 16.25vw;
		left: -3vw;
		top: -4.2vw;
	}
	#youtubeBox #youtubeImg02{
		width: 8.5vw;
		left: 36.5vw;
		bottom: -8.8vw;
	}
	#youtubeBox #youtubeImg03{
		width: 18.25vw;
		right: -8vw;
		top: 10vw;
	}


/*-- ========== infoBox ========== --*/
	#infoBox{
		padding: var(--size-160px) var(--size-40px);
	}
	#infoBox #infoBoxOverview div:first-child img{
		width: 70%
	}
	#infoBox .ovList p strong{
		display: block;
	}
	#infoBox .ovList dl{
		display: block;
		width: 100%;
		border-bottom: none;
		padding: 0;
		margin-top: var(--size-80px);
	}
	#infoBox .ovList dt,
	#infoBox #infoList.ovList dt{
		display: block;
		width: 100%;
		padding-right: 0;
		padding: 0.8em 0;
		margin-bottom: 0.6em;
		background: var(--blue);
		color: #fff;
		text-align: center;
	}
	#infoBox .ovList dt span{
		width: 100%;
		display: inline-block;
	}
	#infoBox .ovList dt::after{
		content: inherit;
	}
	#infoBox .ovList dd,
	#infoBox #infoList.ovList dd{
		width: 100%;
		padding: 0 0.5em;
	}

	#infoBox .pcTable{
		display: none;
	}
	#infoBox .spTable{
		display: block;
	}
	#infoBox #infoBoxTicket ul{
		margin-top: 1em;
	}
	#infoBox #ticketBox .spTable:last-child{
		margin-top: 0.5em;
	}
	#infoBox #ticketBox th,
	#infoBox #ticketBox td{
		width: 100vw;
		font-size: 100%;
		padding: var(--size-80px) var(--size-10px);
	}
	#infoBox #ticketBox th span{
		font-size: 74%;
		color: var(--yellow)
	}
	#infoBox #ticketBox tr th:first-child{
		width: 35%;
	}
	#infoBox #infoBoxSponsored #sponsoredList{
		width: 100%;
	}
	#infoBox .btnBox a{
		width: 100%;
	}


/*-- ========== TOP ========== --*/
	#top #mv .mvPC{
		display: none;
	}
	#top #mv .mvSP{
		display: block;
	}

	#topYoutube{
		background-size: 200vw;
		padding-bottom: calc(var(--size-160px) * 2);
	}
	#topYoutube p img{
		width: 40vw;
	}

	#topYoutubeImg{
		overflow: hidden;
		width: 100%;
	}
	#topYoutubeImg img{
		width: 125vw;
		margin-left: -12vw;
		margin-top: 5vw;
	}

	#contentList li{
		max-width: calc(60vw + var(--size-80px));
	}
	#contentList .prev-arrow{
		position: absolute;
		z-index: 100;
		left: calc(50% - 40vw);
		top: 30vw;
		width: 5vw;
	}
	#contentList .next-arrow{
		position: absolute;
		z-index: 100;
		right: calc(50% - 40vw);
		top: 30vw;
		width: 5vw;
	}

	#eventBox{
		margin-bottom: var(--size-200px);
	}
	#eventBox h4 span:first-child{
		padding-left: 12vw;
	}
	#eventBox h4 img{
		margin-left: var(--size-10px);
		width: 12vw
	}
	#eventBoxIn{
		flex-wrap: wrap;
		justify-content: center;
	}
	#eventBoxIn > div{
		width: 70vw;
		padding: var(--size-40px) 0;
		line-height: 1.5;
		position: relative;
		z-index: 1;
	}
	#eventBoxIn > div:nth-child(1)::before{
		left: -12vw;
		top: -7.2vw;
		width: 18vw;
		height: 30vw;
	}
	#eventBoxIn > div:nth-child(3)::before{
		right: -11.18vw;
		top: 20vw;
		width: 14vw;
		height: 15vw;
	}
	#eventBox .btnBox{
		justify-content: center;
	}

	#goodsBox{
		margin-bottom: var(--size-240px)
	}
	#goodsBox a{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		border-radius: var(--r40);
		background: url("../img/goodsImg.png") right bottom no-repeat #1c2426;
		background-size: contain;
		padding: 10vw 10vw 42vw;
	}
	#goodsBox a > img:first-child{
		width: 60vw;
	}
	#goodsBox a span{
		width: 60vw;
		transition: inherit;
	}
	#goodsBox a > img:last-child{
		left: 32vw;
		bottom: -9vw;
		width: 30vw;
	}

	#newsBox{
		margin-bottom:  var(--size-200px);
	}
	#newsBox #newsImg{
		top: var(--size-140px);
		left: calc(50% - 8vw);
		width: 16vw;
	}
	#newsContent .newsCon{
		display: block;
	}
	#newsContent .newsCon .day{
		width: 100%;
	}
	#newsContent .newsCon .newsTtl{
		width: 100%;
	}

	#info #infoBgImg {
		right: 15vw;
		top: -12vw;
		width: 15vw;
	}


/*-- ========== EVENT ========== --*/
	#event .eventList{
		flex-wrap: wrap;
		margin-bottom: var(--size-120px);
	}
	#event .eventList .eventImg{
		width: 80vw;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: var(--size-40px);
	}
	#event .eventList.eventSingle .eventImg img{
		width: 100%;
	}
	#event .eventList .eventTxtBoxAll{
		width: 100%;
		padding-left: 0;
	}
	#event .tableBox .tableFlex{
		display: block;
		padding-bottom: 1px;
	}
	#event .tableBox .tableFlex .tableBoxTh{
		margin-right: 0;
		margin-bottom: 1px;
		width: 100%;
	}
	#event .tableBox .tableFlex .tableBoxTd{
		width: 100%;
	}
	#event .eventList .btnBox a{
		padding: 2em 1em;
		width: 100%;
		background-size: 4vw;
		transition: inherit;
	}
	#event .eventList .btnBox a:hover{
		background-size: 4vw;
	}
	#event .eventList.eventSingle .eventImg{
		width: 80vw;
		margin-left: auto;
		margin-right: auto;
	}


/*-- ========== Goods ========== --*/
	#goods #goodsBoxIn .goods2{
		justify-content: center;
	}
	#goods #goodsBox .goods1 > div,
	#goods #goodsBox .goods2 > div{
		width: 100%;
		padding: 0 var(--size-20px);
		margin-top: var(--size-60px);
	}
	#goods #goodsBox .goods1 > div img,
	#goods #goodsBox .goods2 > div img{
		display: block;
		margin: 0 auto;
		max-width: 90%;
	}
	#goods .goods1 > div, #goods .goods2 > div {
		margin-right: 0;
	}
	#goods #goodsBox .goods3 > div{
		width: calc(100% / 2.06);
		padding: 0 var(--size-20px);
		margin-top: var(--size-60px);
	}
	#goods .goods3 > div:nth-child(3n){
		margin-right: var(--size-40px);
	}
	#goods .goods3 > div:nth-child(2n){
		margin-right: 0;
	}
	#goods #goodsBox .goods3 > div img{
		max-width: 100%;
	}
	#goods #goodsBox .goods3 p{
		font-size: 84%;
	}


/*-- ========== Exhibition Overview ========== --*/
	#eo #eoTxt h2{
		font-size: 150%;
	}
	#eo #imgList li img{
		width: 50vw;
	}

/*-- ========== NEWS ========== --*/

#news .newsCon{
	flex-wrap: wrap;
}
	#news .newsCon .day{
		width: 100%;
	}
	#news .newsCon .newsTtl{
		width: 100%;
	}

}



@media screen and (max-width: 759px) {/* SP */


/*-- ========== TOP ========== --*/
	#mvSp .caption{
		font-size: 46%;
	}


/*-- ========== Exhibition Overview ========== --*/
	#eo #eoImg01{
		height: 30vh;
		max-height: inherit;
	}
	#eo #sirTOC{
		flex-wrap: wrap;
		padding-top: var(--size-120px);
	}
	#eo .profileImg{
		width: 80%;
		margin: 0 auto;
		margin-bottom: var(--size-80px) !important;
	}
	#eo #sirTOC .profileImg .caption{
		text-align: left;
	}
	#eo .profileTxt{
		width: 100%;
		padding-left: 0;
	}
	#eo #eoImg02{
		display: block;
	}
	#eo #eoImg02 img{
		width: 100%;
	}
	#eo #profileBoxIn{
		flex-wrap: wrap;
		padding: var(--size-120px) var(--size-40px);
	}
	#eo #profileBoxIn .profileImg{
		width: 100%;
	}
	


/*-- ========== Goods ========== --*/
	#goods #goodsBox .goods1 > div,
	#goods #goodsBox .goods2 > div{
		padding: 0;
	}
	#goods #goodsBox .goods1 > div img,
	#goods #goodsBox .goods2 > div img{
		max-width: inherit;
	}
	#goods #goodsBox .goods3{
		justify-content: center;
	}
	#goods #goodsBox .goods3 > div{
		width: 100%;
		margin-right: 0;
		padding: 0;
	}
	#goods #goodsBox .goods3 > div img{
		display: block;
		margin: 0 auto;
		max-width: 90%;
	}
	#goods #goodsBox .goods3 p{
		font-size: 84%;
	}

}