/* mobile.css */
body {opacity:1; font-size: 1.4rem;}
#opening p { width: 80%; }
.anchor { padding-top: 40px; margin-top: -40px;}
h3 {font-size: 200%;}

/* header */
#header {position:fixed;background:transparent;}
#header:after {
display:none;
background-size: 33px;
}
#header-inner {width: 100%;}
#header #header-title {flex-basis: 25%;margin-top:1em; z-index: 2; 	transition: all 0.1s ease-in-out;}
.scrollmenu-open #header #header-title {flex-basis: 40%; margin-top:2em;}
#header #header-title a { display: block; height: 80%; }
#header #header-title span {
white-space:nowrap;
font-size: 1.3rem;
}
#header.menuclose #header-title {
    opacity: 0;
    overflow: hidden;
}

#header #gnavi-pc {display:none;}

/* gnavi-sp */
#gnavi-sp{
	display: flex;
	justify-content: space-between;
	align-items: start;
}
#header #header-title:after {
    animation: none;
}

#gnavi-sp:before{content:"";display:block;	width: 14vw; margin:2vw;}


/* hamburger-menu */
.hamburger{
	display:grid;
	place-content:center;
	position: relative;
	background: rgba(255, 255, 255, .7);
	border-radius:50%;
	width: 50px;
	height: 50px;
	z-index:2;
	-webkit-tap-highlight-color:transparent;
	cursor:pointer;
	margin:2vw;
	padding:2.25vw 2vw;
}
.hamburger .line{
	display: block;
	position: relative;
	width: 30px;
	height: 3px;
	margin: 3px auto;
	background-color: #F07;
	border-radius:2px;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.hamburger:hover{cursor: pointer;
}
.hamburger.active{
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.hamburger.active .line:nth-child(2){
opacity: 0;
}
.hamburger.active .line:nth-child(1){
-webkit-transform: translateY(8px);
-ms-transform: translateY(8px);
-o-transform: translateY(8px);
transform: translateY(8px);
}
.hamburger.active .line:nth-child(3){-webkit-transform: translateY(-10px) rotate(90deg);-ms-transform: translateY(-10px) rotate(90deg);-o-transform: translateY(-10px) rotate(90deg);transform: translateY(-10px) rotate(90deg);
}

/*hamburger-menus*/
#gnavi-sp .hamburger-menus{
position: fixed;
z-index:1;
top:0;
right:-100%;
width:100%;
height:100%;
transition: 0.3s;
background-color:#ffd1f3;
overflow: scroll;
}
#gnavi-sp .hamburger-menus.active{
right:0;
}
#gnavi-sp .hamburger-menus .title{
margin: 2em auto 1em;
}
#sp-navigation ul {display:flex; flex-wrap:wrap; justify-content:center; padding:0 5vw}
#sp-navigation ul li {flex-basis:49%;padding:2%;}
#gnavi-sp .hamburger-menus ul li {
background:transparent;
}
#sp-navigation li:nth-of-type(1) {
    padding: 3vw 20vw 5vw;
    flex-basis: 100%;
}
#gnavi-sp .hamburger-menus > ul li:before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background-color: rgba(255,255,255,.5);
opacity:0;
transition: 0.5s;
}
#gnavi-sp .hamburger-menus ul li a {
position: relative;
display: flex;
justify-content:start;
align-items:center;
color:#fff;
transition: 0.3s;
margin: auto;
width: 100%;
text-decoration:none;
border-radius: .5em;
}
/*
#header #sp-navigation li:nth-of-type(1) a{background:#FF7BAD;}
#header #sp-navigation li:nth-of-type(2) a{background:#C784D9;}
#header #sp-navigation li:nth-of-type(3) a{background:#8EC2FF;}
#header #sp-navigation li:nth-of-type(4) a{background:#61DFBA;}
#header #sp-navigation li:nth-of-type(5) a{background:#FFC600;}
*/
#gnavi-sp .hamburger.active ~ .hamburger-menus ul li:before {
width: 100%;
}
#gnavi-sp .hamburger ~ .hamburger-menus ul li a {
text-align:center;
}
#gnavi-sp .hamburger.active ~ .hamburger-menus ul li a:hover {
transform: scale(1.1);
}
html.scroll-off, html.scroll-off body {height: 100%; overflow: hidden;}
#sp-navigation {padding-bottom:2em;background-color:#fff;}
#hamburger-menus-sns {color:#F07; text-align:center; padding:2.5em 0 4em;}
#hamburger-menus-sns ul {display:flex; gap: 0 4vw; justify-content:center;}
#hamburger-menus-sns a {height:50px;}
#hamburger-menus-sns a:hover {background-color:transparent !important;}
#hamburger-menus-sns a svg {fill:#111;}
#hamburger-menus-sns a:hover svg {fill:#F07;}




#body {padding-top:0; width:100%;}

#mainvisual {
    background: rgba(255, 43, 174, .7);
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    z-index: 1;
    padding-top:0;
}
#mainvisual.subpage {
    padding-top: 0;
}
#mainvisual.subpage .mv-img {
position:static;
transform: translate(0%, 0%);
}


#mainvisual h1 {
top:auto;
bottom: 8%;
left: 17%;
width: 66%;
}
#mainvisual .mv-img {
background: transparent;
width: 100%;
height: auto;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
#mainvisual .mv-img {
position:static;
transform: translate(0%, 0%);
}
#mainvisual .flex {
display:none;
}
.scroll-indicator {
top: -12vh;
left: 90%;
z-index: 10;
}
.scroll-indicator:after {
color: rgba(255, 255, 255,1);
}
.indicator:before,
.indicator:after {
  background: rgba(255,255,255,.9);
}
#body .section {
    width: 94%;
    margin:0 auto 2em;
}
#catchcopy{padding:2em 0 0;}

#body #detail {width:105%; margin: 0 calc(50% - 52.5vw); }

#event-information{padding:1em;display:block;}
#event-information > p {display:none;}
#event-information p:nth-of-type(2) {flex-basis:100%;}
#sns-links {gap:1.5em;padding:1em;}
#detail #catchcopy {
    width: 90%;
}
#detail p#detail-lead {
    font-size: clamp(1.4rem, 3.1vw, 3.3rem);
}
#detail #detail-leadend {
    width: 85%;
}
#whatsnew .whatsnew-item {
    flex-basis: 100%;
}

#ticket-price .flex-item {
    flex-basis: 100%;
}
#ticket-price .flex-item:nth-of-type(1) {
    margin-bottom:3em;
}

#ticket-schedule .flex-item {
    flex-basis: 100%;
}
.buytickets a {
    border-radius: .5em;
    padding: 1em 0;
    background: #ffbad8;
    color:#FFF;
}

#lightup div ul {
    font-size: initial;
}
#lightup .flex table { width:100%; }
#lightup .flex table:nth-of-type(2) { margin-top:1em;}

#calendar {padding:3em 0 0 3vw;}
#calendar ol {padding:0 3vw 0 0;}

#body.schedule div.content { padding: 1em; }
#body.schedule div.content th, #body.schedule div.content td {
    border-radius: .5em;
    padding: .3em .6em;
}
#stage .flex {gap:15px; justify-content:center;}
#stage .flex p {flex-basis:100% !important;}
#singer .flex li { flex-basis: calc(94% / 2);}

#toolarea .section-header { display: block;}

#stage, #workshop, #toolarea { padding: 2em 1em; }

.comingsoon {
    padding: 30vw 0;
}
#body.precaution h2 {font-size: 250%;}
#body.precaution .section dd {
    padding: 2em .15em 2em 1em;
}
#body.precaution .photoshoot .speechbubble {
padding-top: initial;
padding-bottom: initial;
}
#body.precaution .speechbubble {
    padding: 3.5em 1em 1em !important;
}
#sns-links li { flex-basis: 50%; }
#sponsorship dl {width:94vw;}
#footer-menu-wrapper {
    display: block;
}