@charset "UTF-8";
.first{
	overflow: hidden;
}
.first #base{
	opacity: 0;
}

#base{
	position: relative;
	overflow-x: clip;
}
/*main{
	overflow-x: hidden;
}*/

.loading {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10011;
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #111;
	opacity: 1;
	visibility: visible;
	overflow: hidden;
}

.loading.is-active {
	opacity: 0;
	visibility: hidden;
}

/* コンテナを中央に固定 */
.loading-animation {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	transition: all 0.5s;
	opacity: 0;
	visibility: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

.loading-animation.is-active {
	opacity: 1;
	visibility: visible;
}

.loading-animation img {
	position: relative;
	left: 0;
	top: 0;
	display: block;
	margin: 0 auto;
	width: 50vw;
	opacity: 1;
}

.loading-animation.is-active img {
    animation: loadingZoomFade 1.4s ease-in-out forwards;
}
@keyframes loadingZoomFade {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    70% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(50);
    }
}

footer{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: var(--size-08);
}
footer img{
	width: 12.5vw;
}
footer p{
	font-size: var(--font-2down);
	color: #fff;
}
@media screen and (max-width: 759px) {/* SP */
	footer{
		display: block;
		padding: var(--size-40) var(--size-08);
		text-align: center;
	}
	footer img{
		width: 50vw;
	}
	footer p{
		margin-top: 1em;
	}
}

.obi{
	overflow-x: hidden;
	margin-top: var(--size-16);
}
.marquee{
	overflow: hidden;
	width: 100%;
}

.marquee__list{
	display: flex;
	flex-wrap: nowrap;
	width: max-content;
	will-change: transform;
}

.marquee__list li{
	flex-shrink: 0;
}

.marquee__list img{
	width: 290vw;
	height: auto;
	display: block;
}
marquee marquee--left .marquee__list img{
	width: 235vw;
}
@media screen and (max-width: 759px) {/* SP */
	.marquee__list img{
		width: 400vw;
	}
	marquee marquee--left .marquee__list img{
		width: 325vw;
	}
}

.rockBg{
	background: url("../img/rockBg.jpg") center top / contain;
	/*padding: 0 var(--size-08) var(--size-32);*/
	padding-bottom: var(--size-32);
}
.rbg01{
	position: relative;
	background: rgba(227,223,186,0.2);
	border-radius: var(--size-08);
	padding: var(--size-08);
	margin: 0 var(--size-08);
	margin-bottom: var(--size-08);
}
.rbg02{
	background: rgba(255,255,255,0.1);
	border-radius: var(--size-04);
	padding: var(--size-08);
}
@media screen and (max-width: 759px) {/* SP */
	.rbg02{
		padding: var(--size-24) var(--size-08);
	}
}
.rbg03{
	background: rgba(41,41,41,0.5);
	border-radius: var(--size-04);
	padding: var(--size-08);
}
.pointP{
	position: absolute;
	right: -2vw;
	top: 2vw;
	background: var(--red);
	color: var(--white);
	font-weight: var(--font-bold);
	line-height: normal;
	padding: var(--size-02) var(--size-04);
	transform: rotate(14deg);
}
@media screen and (max-width: 1024px) {/* iPad pro　portrait */
	.pointP{
		top: 3vw;
	}
}
@media screen and (max-width: 759px) {/* SP */
	.pointP{
		right: -5vw;
		top: 9vw;
		font-size: var(--font-1down);
	}
}

.spTable{
	display: none;
}
@media screen and (max-width: 759px) {/* SP */
	.pcTable{
		display: none;
	}
	.spTable{
		display: block;
	}
}
#ticketBox{
	margin: 0 var(--size-08);
	margin-bottom: var(--size-08);
}
#ticketBox table{
	width: 100%;
	border-collapse: collapse;
}
#ticketBox th,
#ticketBox td{
	width: 37%;
	text-align: center;
	padding: var(--size-05) var(--size-02);
	line-height: normal;
	font-weight: var(--font-nomal);
	background: var(--white);
	color: var(--black);
	border: solid 1px rgba(0,0,0,0.2);
}
#ticketBox th{
	font-size: 112%;
	font-weight: 700;
	color: #fff;
	background: rgba(41,41,41,0.5);
}
#ticketBox td{
	font-size: 88%;
}

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

#detailBox{
	position: relative;
	margin: 0 var(--size-08);
	margin-top: var(--size-12);
}
#detailBox #fossil01{
	position: absolute;
	right: -26vw;
	top:-10vw;
	width: 53vw;
}
#detailBox #fossil02{
	position: absolute;
	left: -15vw;
	bottom:-7vw;
	width: 45vw;
}
@media screen and (max-width: 1024px) {/* iPad pro　portrait */
	#detailBox #fossil01{
		right: -23vw;
		top:-5vw;
		width: 48vw;
	}
	#detailBox #fossil02{
		left: -15vw;
		bottom:-3vw;
		width: 45vw;
	}
}
@media screen and (max-width: 759px) {/* SP */
	#detailBox #fossil01{
		right: -25vw;
		top:-3vw;
		width: 60vw;
	}
	#detailBox #fossil02{
		left: -15vw;
		bottom:-12vw;
		width: 60vw;
	}
}
#detailBoxIn{
	display: flex;
	padding: var(--size-04);
}
@media screen and (max-width: 759px) {/* SP */
	#detailBoxIn{
		flex-wrap: wrap;
		padding: var(--size-32) var(--size-04);
	}
}

#detailBoxIn > div:first-child img{
	width: 24.5vw;
	flex-shrink: 0;
}
#detailBoxIn > div:last-child{
	padding-left: var(--size-06);
}
#detailBoxIn > div:last-child h3 span:first-child{
	display: inline-block;
	font-size: 60%;
}
#detailBoxIn > div:last-child h3 span:last-child{
	display: block;
	font-size: 35%;
	margin-top: 0.5em;
}
#detailBoxIn > div:last-child dl{
	display: flex;
	align-items: center;
	line-height: var(--line-height2down);
	border-bottom: solid 2px var(--black);
	padding-bottom: 0.5em;
	margin-top: 1em;
}
#detailBoxIn > div:last-child dl.fwb{
	font-weight: var(--font-bold);
}
#detailBoxIn > div:last-child dl dt{
	display: flex;
	flex-shrink: 0;
	white-space: nowrap;
	align-items: center;
}
#detailBoxIn > div:last-child dl dt span{
	display: block;
	flex-shrink: 0;
	width: 9vw;
	text-align: right;
}
#detailBoxIn > div:last-child dl dt::after{
	content: "：";
	margin-left: 0.5em;
}
#detailBoxIn > div:last-child dl dd{
	padding-left: 1em;
}
#detailBoxIn > div:last-child dl dd strong{
	font-size: var(--font-2up);
}
#detailBoxIn > div:last-child dl dd span{
	display: inline-block;
}

#detailBoxIn > div:last-child dl dd span.f1d{
	font-size: var(--font-2down);
}
/*#detailBoxIn > div:last-child dl dd span{
	font-size: var(--font-1down);
}*/
#detailBoxIn > div:last-child dl dd a{
	text-decoration: underline;
}
#detailBoxIn > div:last-child dl dd a:hover{
	text-decoration: none;
}
#detailBoxIn > div:last-child dl.fwb dd{
	font-size: var(--font-1up);
}
#detailBoxIn #accessBox{
	margin-top: var(--size-04);
	/*padding: var(--size-04);
	background: #4f1c1c;*/
}
#detailBoxIn #accessBox ul:last-child{
	padding: var(--size-04);
	background: var(--white);
	color: var(--red);
	font-size: var(--font-1up);
	font-weight: var(--font-bold);
}
#detailBoxIn #accessBox ul:last-child li:first-child{
	margin-top: 0;
}
@media screen and (max-width: 759px) {/* SP */
	#detailBoxIn > div:first-child{
		width: 100%;
		text-align: center;
		margin-bottom: var(--size-08);
	}
	#detailBoxIn > div:last-child{
		padding-left: 0;
	}
	#detailBoxIn > div:first-child img{
		width: 60vw;
	}
	#detailBoxIn > div:last-child h3{
		text-align: center;
	}
	#detailBoxIn > div:last-child h3 span:first-child{
		font-size: 55%;
	}
	#detailBoxIn > div:last-child dl{
		flex-wrap: wrap;
		border: none;
	}
	#detailBoxIn > div:last-child dl dt{
		background: var(--black);
		width: 100%;
		padding: var(--size-06);
		margin-bottom: var(--size-04);
	}
	#detailBoxIn > div:last-child dl dt span{
		width: 100%;
		text-align: center;
	}
	#detailBoxIn > div:last-child dl dt::after{
		content: "";
		margin-left: 0;
	}
#detailBoxIn > div:last-child dl dd{
	padding-left: 1em;
}
#detailBoxIn > div:last-child dl dd strong{
	font-size: var(--font-2up);
}
#detailBoxIn > div:last-child dl dd span{
	font-size: var(--font-1down);
}
#detailBoxIn > div:last-child dl dd a{
	text-decoration: underline;
}
#detailBoxIn > div:last-child dl dd a:hover{
	text-decoration: none;
}
#detailBoxIn #accessBox{
	margin-top: var(--size-04);
}
}

.list_atnt,
.list_point{
	margin-top: 1em;
}
.list_atnt li,
.list_point li{
	font-size: var(--font-2down);
	line-height: var(--line-height2down);
	margin-top: 0.3em;
	text-indent: -1.5em;
	padding-left: 1.5em;
}
.list_atnt li::before{
	content: "※ "
}
.list_point li::before{
	content: "・ "
}

.btnBox{
	margin-top: 1.5em;
}
.btnBox p{
	line-height: var(--line-height1down);
	margin-bottom: 0.5em;
}
.btnBox ul{
	display: flex;
	flex-wrap: wrap;
}
.btnBox ul li{
	width: calc(100% / 3);
	padding: var(--size-02);
	line-height: normal;
}
@media screen and (max-width: 1024px) {/* iPad pro　portrait */
	.btnBox ul li{
		width: calc(100% / 2);
	}
}
@media screen and (max-width: 759px) {/* SP */
	.btnBox ul li{
		width: 100%;
	}
}
.btnBox ul li a{
	display: flex;
	align-items: center;
	justify-content: center;
	background: url("../img/link_b.svg") right 1em center no-repeat var(--gold);
	background-size: var(--size-02);
	color: var(--black);
	padding: var(--size-04) var(--size-06);
	font-weight: var(--font-bold);
	border-radius: var(--size-02);
	transition: .2s;
}
.btnBox ul li a:hover{
	background: url("../img/link_b.svg") right 0.5em center no-repeat var(--white);
	background-size: var(--size-02);
}
@media screen and (max-width: 759px) {/* SP */
	.btnBox ul li a{
		background: url("../img/link_b.svg") right 1em center no-repeat var(--gold);
		background-size: var(--size-08);
		padding: var(--size-12) var(--size-06);
		border-radius: var(--size-08);
		transition: inherit;
	}
	.btnBox ul li a:hover{
		background: url("../img/link_b.svg") right 0.5em center no-repeat var(--white);
		background-size: var(--size-08);
	}
}

.footprints{
	height: 9.375vw;
	background: url("../img/footprints.svg") center center repeat-x;
	background-size: contain;
	opacity: 0.1;
	margin: var(--size-08) 0;
	transform: rotate(-3deg);
}
@media screen and (max-width: 759px) {/* SP */
	.footprints{
		height: 20vw;
	}
}

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

#top #mv{
	overflow: hidden;
	position: relative;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 112.5vw;
	background: url("../img/mv.jpg") center top / cover no-repeat;
	padding-top: var(--size-12);
}
#top #mv h1{
	width: 70.8125%;
	margin: 0 auto;
}

#top #mvAnime{
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	width: 100%;
	height: 112.5vw;
	background: url("../img/mv.jpg") center top / cover no-repeat;
	opacity: 0;
    visibility: hidden;
}
#top #mvAnime.is-animating {
	visibility: visible;
	animation: sliderAnime 0.5s linear forwards 0s;
}

@keyframes sliderAnime {
    0% {
        opacity: 1;
        animation-timing-function: ease-in;
		transform: scale(3.0);
    }
    8% {
        opacity: 1;
        animation-timing-function: ease-out;
		
    }
	16% {
        opacity: 1;
        animation-timing-function: ease-in;
		transform: scale(2.0);
    }
    24% {
        opacity: 1;
        animation-timing-function: ease-out;
		
    }
    32% {
        opacity: 1;
        transform: scale(1.1);
    }
    48%,
    100% {
        opacity: 0;
        transform: scale(2.2);
    }
}
#top #mvfoot{
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 3;
	width: 100%;
	height: 15.4vw;
    background: linear-gradient(rgba(17,17,17,0),rgba(17,17,17,1));
}
@media screen and (max-width: 759px) {/* SP */
	#top #mv{
		height: 177.7333vw;
		background: url("../img/mvSp.jpg") center top / cover no-repeat;
	}
#top #mv h1{
	width: 90%;
}

	#top #mvAnime{
			height: 177.7333vw;
			background: url("../img/mvSp.jpg") center top / cover no-repeat;
	}
	#top #mvfoot{
		height: 15.4vw;
	}

}

#top main{
	position: relative;
	z-index: 3;
}

#top #topContent{
	padding-top: var(--size-10);
	background: #111;
}

#top #topTxt{
	position: relative;
	z-index: 4;
	display: flex;
	justify-content: center;
}
#top #topTxt p{
	position: relative;
	z-index: 3;
	font-weight: var(--font-maxBold);
	font-size: 770%;
	line-height: 1.5;
	transform: rotate(-10deg);
}
[rb] {
	position: relative;  /* 漢字の位置を取得 */
}

[rb]::before {
	content: attr(rb); 
	position: absolute;
	top: -0.5em;
	left: -0.2em;
	right: -0.2em;
	font-size: 30%;
	text-align: center;
	white-space: nowrap;
	line-height: 1;
	text-indent: 0;
  }
@media screen and (max-width: 1024px) {/* iPad pro　portrait */
	#top #topTxt p{
		font-size: 740%;
		margin-left: 11vw;
	}
}
@media screen and (max-width: 759px) {/* SP */
	#top #topTxt p{
		font-size: 380%;
		margin-left: 10vw;
	}
}
#top #topTxt2{
	position: relative;
	margin-top: var(--size-20);
}
@media screen and (max-width: 1024px) {/* iPad pro　portrait */
	#top #topTxt2 h2{
		margin-bottom: var(--size-04);
	}
}
@media screen and (max-width: 759px) {/* SP */
#top #topTxt2{
	margin-top: var(--size-28);
}
}
#top #topTxt2 div{
	overflow: hidden;
	position: absolute;
	right: 0;
	top: -50vw;
	z-index: 4;
	width: 100%;
	height: 100vw;
	pointer-events: none;
}
#top #topTxtImg{
	position: absolute;
	right: -17vw;
	top: 23vw;
	width: 62.5vw;
	will-change: transform;
}
@media screen and (max-width: 1024px) {/* iPad pro　portrait */
	#top #topTxtImg{
		right: -23vw;
		top: 1vw;
		width: 78vw;
	}
}
@media screen and (max-width: 759px) {/* SP */
	#top #topTxtImg{
		right: -27vw;
		top: 0vw;
		width: 82vw;
	}
}

#top .rockBg{
	padding-top: 0;
}
#top .rockBg #icon01{
	position: relative;
	top: -4.625vw;
	display: flex;
	justify-content: center;
}
#top .rockBg #icon01 img{
	width: 16.125vw;
}
@media screen and (max-width: 759px) {/* SP */
	#top .rockBg #icon01{
		top: -5vw;
	}
	#top .rockBg #icon01 img{
		width: 30vw;
	}
}
#top .rockBg h2{
	display: flex;
	align-items: center;
	flex-direction: column;
	margin-bottom: var(--size-04);
}
#top .rockBg h2 span{
	display: inline-block;
	font-size: 36.8385422%;
	line-height: normal;
	background: var(--gold);
	padding: var(--size-01) var(--size-06);
	margin-bottom: 0.3em;
}
#top .rockBg #event00{
	display: flex;
	justify-content: center;
	align-items: center;
}
#top .rockBg #event00 > div:first-child{
	text-align: center;
	padding: 0 var(--size-04);
}
#top .rockBg #event00 > div:first-child img{
	width: 12vw;
}
#top .rockBg #event00 > div:first-child h5{
	margin-top: 0.8em;
	margin-bottom: 0.5em;
}
#top .rockBg #event00 > div:first-child p{
	font-size: var(--font-2down);
	line-height: var(--line-height1down);
}
#top .rockBg #event00 > div:last-child{
	padding-left: var(--size-06);
}
#top .rockBg #event00 h4{
}
#top .rockBg #event00 h4 span{
	display: inline-block;
	font-size: 47%;
	line-height: normal;
	margin-right: 0.5em;
}
@media screen and (max-width: 1024px) {/* iPad pro　portrait */
	#top .rockBg #event00 h4 span{
		display: block;
		margin-bottom: 0.5em;
		margin-right: 0;
	}
}
#top .rockBg #event00 dl{
	display: flex;
	margin-bottom: 0.5em;
	line-height: var(--line-height1down);
}
#top .rockBg #event00 dt{
	font-weight: var(--font-bold);
	flex-shrink: 0;
}
#top .rockBg #event00 dt span{
	display: inline-block;
	width: 4em;
}
#top .rockBg #event00 dt::after{
	content: "：";
	margin-left: 0.5em;
}
#top .rockBg #event00 dd{
	margin-left: 1em;
}
#top .rockBg #event00 dd span{
	font-size: var(--font-2down);
}
@media screen and (max-width: 759px) {/* SP */
	#top .rockBg #event00{
		flex-wrap: wrap;
	}
	#top .rockBg #event00 > div:first-child{
		order: 2;
		width: 100%;
		margin-top: var(--size-08);
	}
	#top .rockBg #event00 > div:last-child{
		order: 1;
		padding-left: 0;
	}
	#top .rockBg #event00 > div:first-child img{
		width: 40vw;
	}
	#top .rockBg #event00 h3{
		margin-left: 0;
	}
	#top .rockBg #event00 h3 span{
		margin-bottom: 0.5em;
		margin-left: 0;
	}
}

#top .rockBg #ticketTtl{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	line-height: normal;
	margin-bottom: var(--size-04);
}
#top .rockBg #ticketTtl > div:first-child{
	width: 13.125vw;
}
#top .rockBg #ticketTtl >div:last-child{
	padding-left: 0.8em;
}
#top .rockBg #ticketTtl >div:last-child p:first-child{
	font-weight: var(--font-bold);
	font-size: var(--font-2up);
	margin-bottom: 0.2em;
}
#top .rockBg #ticketTtl >div:last-child p:first-child span{
	font-size: var(--font-2down);
}
#top .rockBg #ticketTtl >div:last-child h3{
	margin-bottom: 0;
}
#top .rockBg #ticketTtl >div:last-child p:last-child{
	font-size: var(--font-1up);
	margin-top: 0.2em;
}
#top .rockBg #ticketFlex{
	display: flex;
	justify-content: space-between;
}
#top .rockBg #ticketFlex > div{
	width: 48%;
}
#top .rockBg #ticketFlex img{
	width: 11.875vw;
}
@media screen and (max-width: 759px) {/* SP */
	#top .rockBg #ticketFlex img{
		width: 30vw;
	}
	#top .rockBg #ticketFlex .rbg02:last-child img{
		width: 50vw;
	}
}
#top .rockBg #ticketFlex .rbg02{
	text-align: center;
}
#top .rockBg #ticketFlex .rbg02 h4{
	margin-top: 0.5em;
	margin-bottom: 0.2em;
}
#top .rockBg #ticketFlex .rbg02 p{
	text-align: left;
}
#top .rockBg #ticketFlex .btnBox li{
	width: 100%;
}
@media screen and (max-width: 759px) {/* SP */
	#top .rockBg #ticketTtl{
		flex-wrap: wrap;
	}
	#top .rockBg #ticketTtl > div:first-child{
		width: 25vw;
		margin-bottom: 0.5em;
	}
	#top .rockBg #ticketTtl >div:last-child{
		padding-left: 0;
	}
	#top .rockBg #ticketTtl >div:last-child h3{
		font-size: 7vw;
	}
	#top .rockBg #ticketTtl >div:last-child p:first-child{
		font-size: 4.2vw;
	}
	#top .rockBg #ticketTtl >div:last-child p:last-child{
		font-size: 4vw;
	}
	#top .rockBg #ticketFlex{
		flex-wrap: wrap;
	}
	#top .rockBg #ticketFlex > div{
		width: 100%;
	}
	#top .rockBg #ticketFlex > div:first-child{
		margin-bottom: var(--size-04);
	}

}





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

}



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

}



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

}



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

}



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

}



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


}