@charset "UTF-8";
aside {
 left: -100%;
}
main {
 width: 100%;
 margin-left: 0;
}
#stage {
 padding: 0;
 text-align: center;
}
.pageHeader {
 background: url("../images/bg_points_stage.jpg?0502") no-repeat center top -12vw;
 background-size: cover;
}
#stage .inner {
 padding: 0 5vw 0;
}
.description {
 position: relative;
 z-index: 5;
 width: 100vw;
 margin: 0 calc(50% - 50vw);
 background: rgba(255, 244, 85, 1);
 padding: 5vw;
}
.description:before {
 content: "";
 display: block;
 background: url(../images/texture.jpg) repeat;
 background-size: 100% auto;
 position: absolute;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100%;
 margin: 0 calc(50% - 50vw);
 mix-blend-mode: multiply;
 pointer-events: none;
 opacity: 0.3;
}
.description h3 {
 font-weight: 800;
 font-size: 3.6rem;
 margin: 0 0 0.5em;
 color: #e62310;
}
.description p {
 font-size: 1.7rem;
 font-weight: 500;
 margin-bottom: 2em;
}
#stage #utage {
 width: 100vw;
 margin: 0 calc(50% - 50vw);
 background-image: linear-gradient(0deg, rgba(0, 173, 236, 1) 0%, rgba(255, 244, 85, 1) 60%);
 padding: 5vw;
 position: relative;
 z-index: 5;
}
#stage #utage:before {
 content: "";
 display: block;
 background: url(../images/texture.jpg) repeat;
 background-size: 100% auto;
 position: absolute;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100%;
 margin: 0 calc(50% - 50vw);
 mix-blend-mode: multiply;
 pointer-events: none;
 opacity: 0.3;
}
#stage #utage .lead strong {
 font-weight: bold;
}
.box {
 position: relative;
 z-index: 5;
 max-width: 1280px;
 margin: 0 auto;
 padding: 0 5vw 2.5vw;
 border-radius: 1rem;
 margin-bottom: 2.5em;
 overflow: hidden;
 background: rgba(255, 255, 255, 0.97);
}
/*.box:after {
 content: "";
 display: block;
 height: 100%;
 width: 100%;
 background: rgba(255, 255, 255, 0.97);
 position: absolute;
 bottom: 0;
 left: 0;
 border-radius: 1rem;
}*/
.box .wideTtl {
 width: calc(100% + 10vw);
 margin: 0 0 3rem -5vw;
}
.box .wideTtl:first-of-type {
 margin: 0 0 3rem -5vw;
}
.box .wideTtl span {
 background: #363638;
}
.box .flex {
 display: flex;
 align-items: stretch;
 justify-content: space-between;
 margin: 2.0em auto 0;
}
.box .flex > div {
 flex: 1 0 calc(50% - 1rem);
 max-width: calc(50% - 1rem);
 padding: 0 0 1.5em;
 border-radius: 1rem;
}
.box .flex > div.set01 {
 border: solid 6px #FE9721;
}
.box .flex > div.set02 {
 border: 6px solid #504288;
}
.box .flex > div h4 {
 color: #fff;
 font-size: 2.3rem;
 line-height: 1;
 padding: calc(0.75em - 6px) 0 0.75em;
}
.box .flex > div.set01 h4 {
 background: #FE9721;
}
.box .flex > div.set02 h4 {
 background-color: #504288;
}
.box .flex > div dl {
 margin: 1.5em auto 0.5em;
}
.box .flex > div dl dt span {
 display: inline-block;
 background: #e62310;
 color: #fff;
 border-radius: 20rem;
 width: 6em;
 line-height: 1;
 font-size: 1.5rem;
 padding: 0.35em;
}
.box .flex > div dl dd {
 font-size: 2.1rem;
 font-weight: 500;
 padding: 0.35em 0 0;
}
.box .flex > div h5 {
 color: #5E5E5E;
 background: #eeefef;
 text-align: center;
 margin-top: 1.5em;
 padding: 0.5em 1em;
 line-height: 1.2;
 font-weight: 500;
 width: 8em;
 margin: 1em auto 0;
}
.box .flex > div ul {
 display: inline-block;
 text-align: left;
 padding: 1.0em 1.5rem 1em;
}
.box .flex > div ul li {
 padding-left: 1em;
 text-indent: -1em;
}
.box .flex > div ul.caution {
 display: block;
 padding: 0;
 margin: 0;
 text-align: center;
 font-size: 1.6rem;
}
.box {
 position: relative;
 z-index: 5;
}
#stage #utage #utageticket, #stage #utage #playguidelink, #stage #utage #utageticket, #stage #utage #playguidelink2 {
 position: relative;
 z-index: 5;
 padding-bottom: 2.5vw;
}
.box h4 {
 text-align: center;
 display: block;
 margin: 1.5em auto 1em;
}
.box h4 span {
 display: inline-block;
 background: #eeefef;
 padding: 0.35em 1.5em;
 font-weight: bold;
 font-size: 1.5rem;
 color: #5E5E5E;
}
.box .centering {
 display: block;
 text-align: center;
}
.box .centering ul {
 text-align: left;
}
.box ul {
 display: inline-block;
 text-align: center;
}
.box ul li {
 font-weight: bold;
 line-height: 1.5;
 padding-bottom: 0.35em;
}
.box ul li:last-child {
 margin-bottom: 0;
}
.box ul li strong {
 font-weight: bold;
 font-size: 120%;
 margin: 1em 0 0.5em;
 display: block;
}
.box ul li strong:first-of-type {
 margin: 0 0 0.5em;
}
.box ul li strong:before {
 content: "■";
 font-size: 70%;
 display: inline-block;
 transform: translateY(-0.1em)translateX(-0.2em);
 color: #e62310;
}
.box ul li a {
 background: #363638;
 color: #fff;
 display: inline-block;
 font-size: 1.5rem;
 line-height: 1.2;
 padding: 0.75em 2.5em 0.75em 1.5em;
 position: relative;
 box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3);
 margin-top: 1em;
 text-align: center;
}
.description p a {
 display: block !important;
 margin: 1em auto 0 !important;
 width: 12em;
}
.box ul li a:before {
 content: "";
 display: inline-block;
 width: 6px;
 height: 6px;
 border-top: 3px solid #fff;
 border-right: 3px solid #fff;
 transform: rotate(45deg) translateY(-50%);
 position: absolute;
 top: calc(50% - 1px);
 right: 1.25em;
}
.box ul li a:hover {
 box-shadow: 0px 0px 0 rgba(0, 0, 0, 0.3);
 background-color: #FF811F;
}
.box ul li a:hover:before {
 right: 1em;
}
.description .ph {
 width: 74%;
 margin: 0 auto;
}
#stage #utage #playguidelink .wideTtl, #stage #utage #playguidelink2 .wideTtl {
 border-radius: 0;
}
#stage #utage .playGuide {
 display: flex;
 align-items: center;
 justify-content: center;
 flex-wrap: wrap;
}
#stage #utage .playGuide li {
 margin: 0 0.5em 1em;
 padding: 0;
}
#stage #utage .playGuide li a {
 color: #fff;
 background: #363638;
 position: relative;
 padding: 1em 2em 1em 1em;
 font-size: 1.6rem;
 border-radius: 0.4rem;
 text-align: left;
 margin: 0;
}
#stage #utage .playGuide li a:before {
 content: "";
 display: inline-block;
 width: 6px;
 height: 6px;
 border-top: 3px solid #fff;
 border-right: 3px solid #fff;
 transform: rotate(45deg) translateY(-50%);
 position: absolute;
 top: calc(50% - 1px);
 right: 1.25em;
}
.btn.fany a {
 color: #f5f9f0;
 background: rgb(248, 175, 84) !important;
 background: linear-gradient(90deg, rgba(248, 175, 84, 1) 0%, rgba(224, 43, 53, 1) 50%, rgba(189, 92, 155, 1) 100%) !important;
}
.btn.fany a:hover {
 background: rgb(228, 155, 64) !important;
 background: linear-gradient(90deg, rgba(228, 155, 64, 1) 0%, rgba(204, 23, 33, 1) 50%, rgba(169, 72, 135, 1) 100%) !important;
}
.btn.pia a {
 background: #4D7FD6 !important;
}
.btn.pia a:hover {
 background: #2B66CC !important;
 color: #fef1e9 !important;
}
.btn.l-tike a {
 background: #3091CF !important;
}
.btn.l-tike a:hover {
 background: #0074be !important;
 color: #fef1e9 !important;
}
.btn.eplus a {
 background: #f16baa !important;
}
.btn.eplus a:hover {
 background: #EC3F90 !important;
 color: #fef1e9 !important;
}
.btn.kkday a {
 background: #26bec9 !important;
}
.btn.kkday a:hover {
 background: #098CA2 !important;
 color: #fef1e9 !important;
}
.btn.jalan a {
 background: #eb661d !important;
}
.btn.jalan a:hover {
 background-color: #CB4D07 !important;
 color: #fef1e9 !important;
}
.btn.asoview a {
 background: #e83217 !important;
}
.btn.asoview a:hover {
 background-color: #B21D07 !important;
 color: #fef1e9 !important;
}
#stage #utage .caution {
 font-size: 1.4rem;
 position: relative;
 z-index: 5;
 padding-top: 0;
}
#stage #utage .caution a {
 display: inline-block;
 vertical-align: bottom;
 text-indent: 0;
}
#stage #utage .caution a:hover {
 text-decoration: underline;
}
#stage #utage .note {
 position: relative;
 z-index: 5;
}
#stage #utage .note dt {
 position: relative;
 display: inline-block;
 background: #e62310;
 color: #fff;
 padding: 0.5em 3em 0.5em 1.5em;
 border-radius: 20rem;
 cursor: pointer;
}
#stage #utage .note dt:before {
 content: "+";
 display: block;
 position: absolute;
 right: 0.75em;
 top: 50%;
 transform: translateY(-60%);
 font-size: 150%;
 line-height: 1;
}
#stage #utage .note dt.open:before {
 content: "-";
}
#stage #utage .note dd {
 height: 0;
 opacity: 0;
 transition: .3s;
 pointer-events: none;
}
#stage #utage .note dd.open {
 height: 100%;
 opacity: 1;
 padding: 2.0em 0 0;
 pointer-events: auto;
}
#stage #utage .note dd h4 {
 font-weight: 600;
 font-size: 2.0rem;
 margin-bottom: 0.5em;
}
#stage #utage .note dd ul {
 text-align: left;
 font-size: 1.4rem;
 background: #f4f4f4;
 padding: 1.5em;
 border-radius: 1rem;
 width: 80%;
 margin: 0 auto 2em;
}
#stage #utage .note dd ul li {
 padding-left: 0.7em;
 text-indent: -0.7em;
}
#stage #schedule {
 background: #ECC1C1;
 position: relative;
 width: 100vw;
 margin: 0 calc(50% - 50vw);
 padding: 0 5vw 5vw;
}
#stage #schedule:before {
 content: "";
 display: block;
 background: url(../images/texture.jpg) repeat;
 background-size: 100% auto;
 position: absolute;
 top: 0;
 left: 0;
 width: 100vw;
 height: 100%;
 margin: 0 calc(50% - 50vw);
 mix-blend-mode: multiply;
 pointer-events: none;
 opacity: 0.3;
}
#stage #schedule .wideTtl {
 margin: 0 calc(50% - 50vw) 2.5em;
}
#stage #schedule .wideTtl span {
 font-size: 2.7rem;
}
.sort {
 display: block;
 text-align: center;
 background: #fff;
 width: 60%;
 margin: 0 auto 5vw;
 padding: 1.5em 1.5em;
 border-radius: 1rem;
 position: relative;
 z-index: 5;
}
.sort h4 {
 font-weight: 600;
 font-size: 1.9rem;
}
.sort h5 {
 font-weight: 500;
 font-size: 1.6rem;
 margin: 1em auto 0.35em;
}
.sort div {
 display: flex;
 align-items: center;
 justify-content: center;
}
.sort input[type="date"] {
 padding: 0.25em 0.75em;
 font-size: 1.7rem;
 margin: 0 0.25em;
 outline: none;
 border: solid 1px rgba(0, 0, 0, 0.5);
}
.sort button {
 text-align: center;
 font-size: 1.6rem;
 font-weight: 400;
 background: #e62310;
 color: #fff;
 position: relative;
 cursor: pointer;
 border: none;
 padding: 0.25em 2.5em;
 display: block;
 margin: 0.5em auto;
}
.monthNav {
 display: flex;
 justify-content: space-between;
 align-items: center;
 background: #e62310;
 color: #fff;
 padding: 1em 1.5rem;
 border-radius: 20rem;
 min-height: 3.75em;
}
.monthNav.under {
 width: 12em;
 margin: 0 auto;
 background: none;
}
.monthNav .thisMonth {
 font-size: 3.2rem;
 font-weight: 600;
 line-height: 1;
}
.monthNav .prev, .monthNav .next {
 position: relative;
}
.monthNav .prev a:before {
 content: "";
 display: inline-block;
 width: 14px;
 height: 14px;
 border-left: 4px solid #fff;
 border-bottom: 4px solid #fff;
 transform: rotate(45deg)translateY(-50%);
 opacity: 0.75;
 position: absolute;
 top: 50%;
 left: 0.25em;
 transition: 0.1s;
 cursor: pointer;
}
.monthNav .next a:after {
 content: "";
 display: inline-block;
 width: 14px;
 height: 14px;
 border-top: 4px solid #fff;
 border-right: 4px solid #fff;
 transform: rotate(45deg)translateY(-50%);
 opacity: 0.75;
 position: absolute;
 top: 50%;
 right: 1em;
 transition: 0.1s;
 cursor: pointer;
}
.monthNav .prev:hover:before {
 opacity: 1;
}
.monthNav .next:hover:after {
 opacity: 1;
}
.monthNav.under .prev a, .monthNav.under .next a {
 display: block;
 background: #e62310;
 height: 2.7em;
 width: 2.7em;
 border-radius: 50%;
}
.monthNav.under .prev a:before {
 left: 0.55em;
 top: 45%;
}
.monthNav.under .next a:after {
 right: 1.35em;
 top: 45%;
}
#schedule h4.day {
 text-align: center;
 font-weight: bold;
 position: relative;
 display: block;
 background: #e62310;
 color: #fff;
 height: 7em;
 width: 7em;
 border-radius: 50%;
 line-height: 5.2em;
 font-size: 2.7rem;
 margin: 2em auto -3em;
}
.stageList .stage {
 background: #fff;
 text-align: left;
 padding: 2.5em;
 position: relative;
 margin-bottom: 3.5%;
 border-radius: 0.4rem;
 border-left: solid 7px #363638;
}
.stageList .stage.utage {
 border-left: 7px solid #e62310;
}
.stageList .stage.matsuri {
 border-left: 7px solid #008DBF;
}
.stageList .stage .stageHeader {
 display: flex;
 justify-content: space-between;
 align-items: flex-start;
}
.stageList .stage .stageHeader .tags {
 padding-left: 1.5em;
}
.stageList .stage .stageHeader .tags ul li {
 margin-bottom: 5px;
 width: 7.5em;
 background: #fff;
 color: #fff;
 text-align: center;
 font-size: 1.4rem;
 padding: 0.25em 0 0.15em;
}
.stageList .stage .stageHeader .tags ul li:last-child {
 margin-bottom: 0;
}
.stageList .stage .stageHeader .tags ul li.paid {
 border: solid 2px #e62310;
 color: #e62310;
 font-weight: 500;
}
.stageList .stage .stageHeader .tags ul li.free {
 border: solid 2px #008DBF;
 color: #008DBF;
 font-weight: 500;
}
.stageList .stage .stageHeader .tags ul li.utage {
 background-color: #e62310;
}
.stageList .stage .stageHeader .tags ul li.matsuri {
 background-color: #008DBF;
}
.stageList .stage .stageHeader h5 {
 color: #4c4c4c;
 font-size: 1.4rem;
 font-weight: 500;
 opacity: 0.75;
 line-height: 1.2;
 margin-bottom: 0.15em;
}
.stageList .stage .stageHeader time {
 position: relative;
 padding: 0.2em 0;
 color: #444;
 display: block;
 white-space: nowrap;
 line-height: 1;
 font-size: 1.9rem;
 font-weight: 600;
 margin-bottom: 0.5rem;
}
.stageList .stage .stageHeader time:before {
 content: "";
 display: inline-block;
 background: url("../images/icon_time.svg") no-repeat;
 background-size: 100% auto;
 width: 0.9em;
 height: 0.9em;
 margin-right: 0.2em;
 transform: translateY(0.1em);
}
.stageList .stage .stageHeader time div {
 font-size: 70%;
 opacity: 0.7;
 display: inline;
 padding-left: 0.5em;
 line-height: 1.2;
}
.stageList .stage .stageHeader h3 {
 font-weight: 600;
 font-size: 2.9rem;
 line-height: 1.5;
 margin-top: 0.5em;
}
.stageList .stage .editTxt {
 background: #FFFDD1;
 color: #524B1F;
 padding: 0.5em 1.5rem;
 margin-top: 1em;
 border-radius: 1rem;
 font-size: 1.5rem;
}
.stageList .stage .editTxt strong {
 font-weight: 700;
}
.stageList .stage .editTxt strong.red {
 color: #D6484B;
 text-decoration: #D6484B wavy underline;
}
.stageList .stage .editTxt strong.set01 {
 color: #FE9721;
 text-decoration: #FE9721 wavy underline;
}
.stageList .stage .editTxt strong.set02 {
 color: #504288;
 text-decoration: #504288 wavy underline;
}
.stageList .stage .flex {
 display: flex;
 align-items: flex-start;
 flex-direction: row-reverse;
 padding-top: 1em;
}
.stageList .stage .thumb {
 flex: 1 0 30rem;
 max-width: 30rem;
 padding-left: 2.5rem;
}
.stageList .stage .detail {
 flex: 1 0 calc(100% - 30rem);
}
.stageList .stage .detail .desc {
 font-size: 1.5rem;
 line-height: 1.5;
 opacity: 0.8;
 margin-bottom: 1em;
}
.stageList .stage .detail .cast {
 background: #eeefef;
 padding: 2rem;
 color: #5E5E5E;
 border-radius: 1.0rem;
 opacity: 0.8;
}
.stageList .stage .detail .cast h4 {
 font-weight: 600;
}
.stageList .stage .detail .cast ul {
 display: flex;
 flex-wrap: wrap;
}
.stageList .stage .detail .cast ul li {
 font-size: 1.6rem;
 letter-spacing: 0.025em;
 /*white-space: nowrap;*/
 display: inline-block;
 position: relative;
}
.stageList .stage .detail .cast li:after {
 content: "/";
 display: inline-block;
 padding: 0 0.25em;
 opacity: 0.5;
 pointer-events: none;
}
.stageList .stage .detail .cast li:last-child:after {
 display: none;
}
@media screen and (max-width: 999px) {
 #stage {
  padding: 0;
 }
 #stage .inner {
  padding: 0 1.5rem 0;
 }
 .description {
  padding: 1.75em 1.5rem 1.5rem;
 }
 .description .box {
  margin: 1em auto 0;
 }
 .description h3 {
  font-size: 2.2rem;
 }
 .description p {
  font-size: 1.5rem;
  margin-bottom: 1.5em;
 }
 #stage #utage {
  padding: 1.75em 1.5rem 1.5rem;
 }
 .box {
  padding: 0 1.5rem 1.5rem;
 }
 .box .wideTtl {
  width: calc(100% + 3rem);
  margin: 1.5em 0 1.5em -1.5rem;
 }
 .box .wideTtl:first-of-type {
  margin: 0 0 1.5em -1.5rem;
 }
 .box #utageticket .wideTtl {
  margin: 0 0 1.5em -1.5rem;
 }
 .box .wideTtl span {
  font-size: 2rem;
  padding: 0.5em 3rem;
 }
 .box .flex {
  display: block;
  margin: 1.5em auto 0;
 }
 .box .flex > div {
  flex: none;
  max-width: 100%;
  margin-bottom: 1em;
  padding: 0 0 2em;
 }
 .box .flex > div h4 {
  font-size: 2.1rem;
  font-weight: 700;
 }
 .box .flex > div dl {
  margin: 1.5rem auto 0.5em;
 }
 .box .flex > div dl dd {
  font-size: 2.0rem;
 }
 .box .flex > div h5 {
  font-size: 1.4rem;
 }
 .box .flex > div ul {
  font-size: 1.5rem;
 }
 .box .flex > div ul.caution {
  font-size: 1.4rem;
 }
 .description .ph {
  width: 100%;
  margin-bottom: 1.5em;
 }
 #stage #utage #utageticket, #stage #utage #playguidelink, #stage #utage #utageticket, #stage #utage #playguidelink2 {
  padding-bottom: 1.5em;
 }
 #stage #utage .playGuide {
  display: block;
 }
 #stage #utage .playGuide li {
  margin: 0 auto 0.5em;
  width: 80%;
  padding: 0;
 }
 #stage #utage .playGuide li a {
  display: block;
  margin: 0;
  padding: 0.65em 2em 0.65em 1.5em;
 }
 #stage #utage .note dt {
  font-size: 1.5rem;
  padding: 0.5em 2.75em 0.5em 1.25em;
  white-space: nowrap;
 }
 #stage #utage .note dt:before {
  top: 50%;
  transform: translateY(-60%);
  font-size: 125%;
 }
 #stage #utage .note dd {
  padding: 1.5rem 0 0;
 }
 #stage #utage .note dd h4 {
  font-size: 1.9rem;
 }
 #stage #utage .note dd ul {
  width: 100%;
  margin: 0 auto 1.5em;
 }
 #stage #schedule {
  padding: 0 1.5rem 2.5em;
 }
 #stage #schedule .wideTtl span {
  font-size: 2.0rem;
 }
 .sort {
  width: 100%;
  margin: 0 auto 2.5em;
  padding: 2.5rem 1.5rem;
 }
 .sort h4 {
  font-size: 1.7rem;
 }
 .sort h5 {
  font-size: 1.5rem;
  margin: 1em auto 0.35em;
 }
 .sort div {
  flex-wrap: wrap;
 }
 .sort input[type="date"] {
  padding: 0.25em 0.75em;
  font-size: 1.7rem;
  margin: 0 0.25em;
  outline: none;
  border: solid 1px rgba(0, 0, 0, 0.5);
 }
 .monthNav .thisMonth {
  font-size: 1.7rem;
 }
 .monthNav .prev:before {
  width: 8px;
  height: 8px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(45deg)translateY(-60%);
  opacity: 0.85;
  left: 0.15em;
 }
 .monthNav .next:after {
  width: 8px;
  height: 8px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg)translateY(-60%);
  opacity: 0.85;
  right: 0.75em;
 }
 #schedule h4.day {
  font-size: 2.2rem;
  margin: 1.5em auto -3em;
 }
 .stageList .stage {
  padding: 1.5rem;
  margin-bottom: 2em;
  border-left: solid 5px #363638;
 }
 .stageList .stage.utage {
  border-left: 5px solid #e62310;
 }
 .stageList .stage.matsuri {
  border-left: solid 5px #008DBF;
 }
 .stageList .stage .stageHeader {
  display: block;
 }
 .stageList .stage .stageHeader .tags {
  padding: 0;
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
 }
 .stageList .stage .stageHeader .tags ul li {
  margin-bottom: 3px;
  font-size: 1.2rem;
 }
 .stageList .stage .stageHeader h5 {
  padding-top: 0.5em;
 }
 .stageList .stage .stageHeader time div {
  display: block;
  padding: 0.15em 0;
 }
 .stageList .stage .stageHeader h3 {
  font-size: 2.1rem;
 }
 .stageList .stage .editTxt {
  margin-top: 1em;
  font-size: 1.4rem;
 }
 .stageList .stage .flex {
  display: block;
  padding-top: 1em;
 }
 .stageList .stage .thumb {
  flex: none;
  max-width: 100%;
  padding: 0 0 1.5rem;
 }
 .stageList .stage .detail {
  flex: none;
 }
 .stageList .stage .detail .desc {
  font-size: 1.4rem;
  opacity: 0.9;
 }
 .stageList .stage .detail .cast {
  padding: 1.5rem;
 }
 .stageList .stage .detail .cast ul li {
  font-size: 1.5rem;
 }
}