/* mobile.css */

/* common */
body {opacity:1; font-size: 1.4rem;}

/* html */
html.scrollmenu-open {
width: 100%;
height: 100%;
overflow: hidden;
}

/* header */
#header {
height:60px;
}
#header-inner {
justify-content:space-between;
}
#header #header-title {
flex-basis:30%;
}
@media all and (max-width: 640px) {
#header #header-title {flex-basis:55%;}
}
#header #header-title span {
white-space:nowrap;
font-size: 1.3rem;
}

/* gnavi-sp */
#gnavi-sp{
	width:60px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#header #header-title:after {
    animation: none;
}


/* hamburger-menu */
.hamburger{
	position: relative;
	padding:0 2rem;
	z-index:2;
	-webkit-tap-highlight-color:transparent;
	cursor:pointer;
}
.hamburger .line{
	display: block;
	position: relative;
	width: 20px;
	height: 2px;
	margin: 6px auto;
	background-color: #fff;
	-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:before{
content: "";
position: absolute;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 32px;
height: 32px;
top: calc(50% - 16px);
left: calc(50% - 16px);
border: 2px solid transparent;
border-radius: 100%;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hamburger.active:before{
border: 2px solid #FFF;
}
.hamburger.active .line{
width: 20px;
}
.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(-8px) rotate(90deg);-ms-transform: translateY(-8px) rotate(90deg);-o-transform: translateY(-8px) rotate(90deg);transform: translateY(-8px) rotate(90deg);
}

/*hamburger-menus*/
#gnavi-sp .hamburger-menus{
position: fixed;
z-index:1;
top:60px;
left:0;
width:100%;
height:calc(100% - 60px);
visibility:collapse;
opacity:0;
transition: 0.3s;
background-color: rgba(0,0,0,.9);
overflow: scroll;
}
#gnavi-sp .hamburger-menus ul {padding: 1rem;}
#gnavi-sp .hamburger-menus ul li {
position: relative;
display: flex;
flex-direction: column;
}
#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 {
color:#fff;
padding: 0 2rem;
opacity:0;
transition: 0.3s;
}
#gnavi-sp .hamburger.active ~ .hamburger-menus{
visibility:visible;opacity:1;
}
#gnavi-sp .hamburger.active ~ .hamburger-menus ul li:before {
opacity:1;width: 100%;
}
#gnavi-sp .hamburger.active ~ .hamburger-menus ul li a {
opacity:1;padding: 1.5rem 2rem;
}
#gnavi-sp .hamburger.active ~ .hamburger-menus ul li a:hover {
font-weight:900;
background-color: rgba(255,255,255,.3);
}
@media all and (max-width: 960px) {
html.scroll-off, html.scroll-off body {height: 100%; overflow: hidden;}
}
#gnavi-sp #hamburger-menus-sns{
width:90%;
margin:3rem auto;
}
#gnavi-sp #hamburger-menus-sns ul li:before {
content: none;
}
#gnavi-sp #hamburger-menus-sns p{
font-weight:900;
color:#fff;
text-align:center;
}
#gnavi-sp #hamburger-menus-sns ul {
display: flex;
justify-content: center;
align-items: center;
}
#gnavi-sp #hamburger-menus-sns ul li {
margin:0 2rem;
}
#gnavi-sp #hamburger-menus-sns ul li a {
padding: 0rem;
background:transparent;
}
#gnavi-sp #hamburger-menus-sns svg {
width: 2.4rem;
height: 2.4rem;
}



#body {
padding: 60px 0 0;
}
#body .section-header,
#body .section-body {
width: 90%;
}
#body .section h2{
font-size:210%;
min-width:7em;
}
#body .section h2:before {
top: -90%;
left: -20px;
}
#body .section h2:after {
top: -40%;
right: -10%;
}



/* mainvisual */
#mainvisual:before{
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(15,15,50);
    mix-blend-mode: multiply;
}
#mainvisual .mv-img {
transform: translate(-50%,0%);
max-width: 960px;
}
#mainvisual .mv-img img {
height:auto;
object-fit: contain;
}
@media all and (max-width: 520px) {
#mainvisual {
height:calc(100vh - 60px);
}
#mainvisual .mv-img {
transform: translate(-50%,-50%);
max-width: 520px;
}
#mainvisual .mv-img img {
    height: calc(100vh - 60px);
    object-fit: contain;
}
}

#whatsnew {
height: 625px;
}
#whatsnew .whatsnew-item {
flex-basis: 100%;
}
#whatsnew #news.whatsnew-item > div {
margin:0 auto;
}
#whatsnew #news ul {
height: 200px;
}
#whatsnew #twitter.whatsnew-item > div {
margin:0 auto;
}

#event-parts ol li {
    margin-top: 20px;
    flex-basis: 100%;
}


#cast .section-body {width: 90%;}
#cast h3 { line-height:1.2; padding:.25rem .75rem !important; }
#cast #regular > h3 { margin-bottom:.5rem; }
#cast ul li p{font-size: 1.2rem; line-height:1.2;}
#cast ul li p span {font-size: 1rem;}

@media all and (max-width: 960px) {
#cast #regular ul li {
    flex-basis: calc( 96% / 3 );
    background: #FFF;
    margin: 1%;
    padding: .5rem;
}
#cast #regular ul li.spacer{
display:none;
}
#cast #regular ul li:nth-of-type(5n),#cast #regular ul li:nth-of-type(5n+1) {
margin: 1%;
}
#cast #regular ul li:nth-of-type(3n) {
margin-right: 0;
}
#cast #regular ul li:nth-of-type(3n+1) {
margin-left: 0;
}
}
#cast #regular ul li.non-regular {margin-top:5% !important;}
#cast #regular ul li.non-regular h4 {font-size:1.2rem; line-height:1.2;}
#cast #osaka-special .flex-item {flex-basis: 100%;margin-top: 10px;}



#schedule .section-header {
height:80px;
}
#schedule .section-body {
width: 100%;
}
#schedule .table-wrapper {
padding: 0 2% 0 5%;
}
#schedule .slidehint {
position: relative;
top: 0;
right: 0;
}
#schedule ul {
width: 90%;
margin: 10px auto 0;
}

#tickets .section-body dl {
font-size: 1.6rem;
}

#tickets .section-body dt {
    flex-basis: 40%;
   }
#tickets .section-body dd {
    flex-basis: calc(60% - 2px);
}
#tickets .section-body ul {
margin-top: 10px;
line-height:1.3;
}
#tickets .section-body .linktoplayguide a {
font-size: 1.8rem;
}
#tickets #online.section-body {
margin-top: 25px;
}

@media all and (min-width: 521px) and (max-width: 960px) {
#goods ul li {
    flex-basis: calc( 92% / 3 );
    background: #FFF;
    margin: 2%;
    padding: 1rem;
}
#goods ul li.spacer{
display:none;
}
#goods ul li:nth-of-type(5n),#goods ul li:nth-of-type(5n+1) {
    margin: 2%;
}
#goods ul li:nth-of-type(3n) {
    margin-right: 0;
}
#goods ul li:nth-of-type(3n+1) {
    margin-left: 0;
}
}

@media all and (max-width: 520px) {
#goods ul li {
    flex-basis: calc( 96% / 2 );
    background: #FFF;
    margin: 2%;
    padding: 1rem;
}
#goods ul li:nth-of-type(5n),#goods ul li:nth-of-type(5n+1) {
    margin: 2%;
}
#goods ul li:nth-of-type(2n) {
    margin-right: 0;
}
#goods ul li:nth-of-type(2n+1) {
    margin-left: 0;
}
}

#link_banners .section-body {
width: 100%;
}

/*details*/
#details .section-body {
justify-content: center;
}
@media all and (min-width: 521px) and (max-width: 960px) {
#details .section-body #detail-title{
flex-basis:75%;
}
}
@media all and (max-width: 520px) {
#details .section-body #detail-title{
flex-basis:100%;
}
}
#details .section-body #pv{
flex-basis:100%;
padding-top: 56.25%;
margin-top: 25px;
}
#details .section-body #pv iframe{
position: absolute;
top: 0;
left: 0;
margin-top:0;
}
#details .section-body p:nth-of-type(2) {
margin-top: 3rem;
}
#details .section-body p:nth-of-type(3) {
margin-top: 3rem;
}






/*breadcrumb*/
#top_breadcrumb {margin-top: 60px;}
.breadcrumb ol { width:94%;}
.breadcrumb { font-size: 1.2rem; padding: 0.25rem 0; }



/*footer*/
#footer-menu-wrapper {
grid-column-gap: 0px;
grid-row-gap: 0px; 
width: 90%;
padding: 30px 0 50px;
}
#footer-logo { grid-area: 1 / 1 / 3 / 2; } 
#footer-menu { grid-area: 1 / 2 / 2 / 3; } 
#footer-sns { grid-area: 2 / 2 / 3 / 3; margin-top: 10px;}
#copyright { grid-area: 3 / 1 / 4 / 3; } 

@media all and (max-width: 520px) {
#footer-menu-wrapper {
display:block;
width: 90%;
padding: 30px 0 50px;
}
#footer-logo p.title {
    width: 80%;
    margin: 0 auto 25px;
}
}

.modal-container{padding:0px;}
.modal-close {right:0;}
.modal-content {padding: 10px;}