@charset "UTF-8";
/* CSS Document */


/*ポップアップ*/
.overlay {
display: none;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.6);
position: fixed;
z-index: 1;
}
.btn_area {
width: 40%;
height: 80%;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #fff;
text-align: center;
z-index: 2;
padding: 15px;
overflow: scroll;
}
.btn_area .ttl {
font-weight: bold
}
.btn_area img {
width: 100%;
}
.btn_area p {
margin-bottom: 20px;
line-height: 33px;
}
.btn_area button {
display: block;
margin: 30px auto 0;
background: #333;
color: #fff;
padding: 10px 20px;
border: none
}
.btn_area button:hover {
background: #777
}
  .pc_only{
    display:block !important;
  }
  .mobile_only{
    display:none !important;
  }
  
@media only screen and (max-width: 900px){
.btn_area {
width: 60%;
}
.btn_area img {
width: 100%;
}
}
@media only screen and (max-width: 431px){
.btn_area {
width: 90%;
}
}






/* INFORMATION----------------------------------------------------------- */
.oshiraseArea  {
	max-width: 1500px;
	margin: 0 auto;
}
.oshiraseArea .inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 120px 20px 80px 20px;
	line-height: 1.2;
	text-align: center;
}
.oshiraseArea h2 {
	display: inline-block;
	font-size: 40px;
	border-bottom: 1px solid #45403f;
    margin: 0 auto;
    }

.oshiraseArea dl {
	display: flex;
    flex-wrap: wrap;
    width: 70%;
    margin: 0 auto;
    padding: 0.5em 0;
    border-bottom: 1px solid #ccc;
	font-size: 20px;
}
.oshiraseArea dt {
    display: block;
    padding-bottom: 0;
    width: 30%;
    margin-right: 5%;
    white-space: nowrap;
    }
 .oshiraseArea dd {
    display: block;
    padding-bottom: 0;
    width: 65%;
    }
    
@media only screen and (max-width: 900px){
.oshiraseArea .inner {
	max-width: 100%;
	margin: 0 auto;
	padding: 100px 5% 80px 5%;
	display: block;
	line-height: 1.2;
}
.oshiraseArea dl {
    width: 80%;
}
}

@media only screen and (max-width: 431px){
.oshiraseArea{
    margin-bottom: 40px;
}
.oshiraseArea .inner {
	padding: 40px 10px 40px 10px;
}
.oshiraseArea dl {
    flex-wrap:nowrap;
	display: block;
    width: 80%;
    margin: 0 auto;
    padding: 0.5em 0;
    border-bottom: 1px solid #ccc;
}
/*
.oshiraseArea dt {
    display: block;
    width: 100%;
    padding: 10px 0 5px 0;
    }
 .oshiraseArea dd {
    display: block;
    padding: 10px 0 5px 0;
    width: 100%;
    }
*/
.oshiraseArea dt {
    display: block;
    width: 100%;
    white-space:normal;
    }
 .oshiraseArea dd {
    display: block;
    width: 100%;
    }

}



/* GOODS----------------------------------------------------------- */
.goodsArea  {
	max-width: 1500px;
	margin: 0 auto;
	text-align: center;
}
.goodsArea .inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 120px 20px 0 20px;
	line-height: 1.2;
}


.goodsArea h2 {
	display: inline-block;
	font-size: 40px;
	border-bottom: 1px solid #45403f;
}
.goodsArea h3 {
	font-size: 28px;
	font-family: "Sawarabi Mincho";
	line-height: 1.7;
    margin-bottom: 20px;
}
.goodsArea ul {
	display: flex;
    flex-wrap: wrap;
	justify-content: center;
	text-align: center;
}
.goodsArea ul li {
	width: 20%;
    margin-right: 5%;
    margin-bottom: 30px;
}
.goodsArea ul li .img {
	padding-bottom: 20px;
}
.goodsArea .inner ul li .item {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
    margin-bottom: 10px;
}
.goodsArea .inner ul li .price {
	font-size: 16px;
	line-height: 1.2;
	font-weight: normal;
}



@media only screen and (max-width: 900px){
.goodsArea .inner {
	max-width: 100%;
	margin: 0 auto;
	padding: 100px 5% 20px 5%;
	display: block;
	line-height: 1.2;
}

}

@media only screen and (max-width: 431px){
.goodsArea .inner {
	max-width: 100%;
	margin: 0 auto;
	padding: 40px 5% 20px 5%;
	display: block;
	line-height: 1.2;
}
.goodsArea .inner h3 {
	font-size: 16px;
	font-family: "Sawarabi Mincho";
    font-weight: bold;
	line-height: 1.7;
    margin-bottom: 20px;
}
.goodsArea ul {
	display: flex;
    flex-wrap: wrap;
	justify-content: center;
	text-align: center;
}
.goodsArea ul li {
	width: 45%;
    margin-right: 5%;
    margin-bottom: 30px;
}
.goodsArea ul li .img {
	padding-bottom: 10px;
}
.goodsArea .inner ul li .item {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}
.goodsArea .inner ul li .price {
	font-size: 10px;
	font-weight: 700;
	line-height: 1.6;
    margin-bottom: 20px;
}

}




/* STORY----------------------------------------------------------- */
.storyArea  {
	max-width: 1500px;
	margin: 0 auto;
	text-align: center;
}
.storyArea .inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 120px 20px 80px 20px;
	line-height: 1.2;
/*	display: flex;
	justify-content: flex-start;
*/
}
.storyArea .inner .left {
/*    width: 50%;
    text-align: left;
    padding-left: 20px;
    background-image: url(../img/top/7-3.png);
    background-repeat: no-repeat;
    background-position: -20px bottom;
    background-size: 80%;
*/
}
.storyArea .inner .right {
/*	width: 50%;
	text-align: left;
*/
}
.storyArea .inner .left h2 {
	display: inline-block;
	font-size: 40px;
	border-bottom: 1px solid #45403f;
}
.storyArea .inner .right h3 {
	font-size: 28px;
	font-family: "Sawarabi Mincho";
	line-height: 1.7;
}

.storyArea .inner .right .txt {
	padding-top: 30px;
	font-size: 17px;
	line-height: 2;
}


@media only screen and (max-width: 900px){
.storyArea .inner {
	max-width: 100%;
	margin: 0 auto;
	padding: 100px 5% 80px 5%;
	display: block;
	line-height: 1.2;
}
.storyArea .inner .left {
    width: 100%;
    text-align: center;
    background-image: none;
}
.storyArea .inner .right {
	width: 100%;
	text-align: center;
/*    background-image: url(../img/top/7-3.png);
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: 40%;*/
}
}

@media only screen and (max-width: 431px){
.storyArea .inner {
	max-width: 100%;
	margin: 0 auto;
	padding: 40px 10px 20px 10px;
	display: block;
	line-height: 1.2;
}
.storyArea .inner .left {
	font-size: 16px;
    text-align: center;
    background-image: none;
}

.storyArea .inner .right h3 {
	font-size: 20px;
	font-family: "Sawarabi Mincho";
    font-weight: bold;
	line-height: 1.7;
}
.storyArea .inner .right .txt {
	padding-top: 30px;
    padding-left: 20px;
/*	font-size: 14px;*/
	line-height: 2;
	text-align: center;
}
}


/* COMMENT----------------------------------------------------------- */
#commentArea  {
	max-width: 1500px;
	margin: 0 auto;
	text-align: center;
}
#commentArea .inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 120px 20px 80px 20px;
	line-height: 1.2;
}
#commentArea .inner .left h2 {
	display: inline-block;
	font-size: 40px;
	border-bottom: 1px solid #45403f;
}
#commentArea .inner .right h3 {
	font-size: 28px;
	font-family: "Sawarabi Mincho";
	line-height: 1.7;
}

#commentArea .inner .right .txt {
	padding-top: 30px;
	font-size: 17px;
	line-height: 2;
}

#commentArea img{
    width: 40%;
}

@media only screen and (max-width: 900px){
#commentArea .inner {
	max-width: 100%;
	margin: 0 auto;
	padding: 100px 5% 80px 5%;
	display: block;
	line-height: 1.2;
}
#commentArea .inner .left {
    width: 100%;
    text-align: center;
    background-image: none;
}
#commentArea .inner .right {
	width: 100%;
	text-align: center;
}

#commentArea .inner .left h2 {
	font-size: 30px;
}



#commentArea img{
    width: 60%;
}
}

@media only screen and (max-width: 431px){

#commentArea .inner .left h2 {
	font-size: 20px;
}

#commentArea img{
    width: 80%;
}
}




/* CONCEPT----------------------------------------------------------- */
.conceptArea  {
	max-width: 1500px;
	margin: 0 auto;
	text-align: center;
}
.conceptArea .inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 80px 20px 60px 20px;
	line-height: 1.2;
/*	display: flex;
	justify-content: flex-start;
*/
}
.conceptArea .inner .left {
/*    width: 20%;
    text-align: left;
    padding-left: 20px;
*/
}
.conceptArea .inner .right {
/*
    width: 80%;
	text-align: left;
*/
}
.conceptArea .inner .left h2 {
	display: inline-block;
	font-size: 40px;
	border-bottom: 1px solid #45403f;
}
.conceptArea .inner .right h3 {
	font-size: 28px;
	font-family: "Sawarabi Mincho";
	line-height: 1.7;
	padding-bottom: 30px;
}

.conceptArea .inner .right .txt {
	font-size: 16px;
	line-height: 2;
}

@media only screen and (max-width: 900px){
.conceptArea .inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 100px 5% 20px 5%;
	display: block;
	line-height: 1.2;
}
.conceptArea .inner .left {
    width: 100%;
    text-align: center;
    background-image: none;
}
.conceptArea .inner .right {
	width: 100%;
	text-align: center;
}
}

@media only screen and (max-width: 431px){
.conceptArea .inner {
	max-width: 390px;
	margin: 0 auto;
	padding: 80px 10px 20px 10px;
	display: block;
	line-height: 1.2;
}
.conceptArea .inner .right {
	width: 100%;
	text-align: center;
    background-image: url(../img/top/7-3.png);
    background-repeat: no-repeat;
    background-position: center 700px;
    background-size: 40%;
}
.conceptArea .inner .left h2 {
	display: inline-block;
	font-size: 40px;
	border-bottom: 1px solid #45403f;
}
.conceptArea .inner .right h3 {
	font-size: 20px;
	font-family: "Sawarabi Mincho";
    font-weight: bold;
	line-height: 1.7;
}
.conceptArea .inner .right .txt {
	padding-top: 30px;
    padding-left: 20px;
	font-size: 14px;
	line-height: 2;
	text-align: left;
}
}





/* CAST----------------------------------------------------------- */

.castArea  {
	max-width: 1500px;
	margin: 0 auto;
	text-align: center;
}
.castArea .inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px 100px 20px;
}

.castArea .inner ul {
	display: flex;
	justify-content: center;
    flex-grow: 1;
}
.castArea .inner ul li {
	width: 30%;
    margin-right: 3%;
    margin-bottom: 30px;
}
.castArea .inner ul li .img {
	padding-bottom: 20px;
}
.castArea .inner ul li .h3Area {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 1em;
}
.castArea .inner ul li .h3Area h3 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.7;
}
.castArea .inner ul li p {
	font-size: 13px;
	line-height: 2.3;
	font-weight: 700;
	text-align: left;
}

@media only screen and (max-width: 431px){
.castArea .inner {
	max-width: 390px;
	margin: 0 auto;
	padding: 0 10px 80px 10px;
}

.castArea .inner ul {
	display: block;
}
.castArea .inner ul li {
	width: 100%;
    margin-bottom: 50px;
}
.castArea .inner ul li .img {
	padding-bottom: 5%;
}
.castArea .inner ul li .h3Area {
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 10px;
}
.castArea .inner ul li .h3Area h3 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.7;
}
.castArea .inner ul li p {
	font-size: 13px;
	line-height: 2.3;
	font-weight: 700;
	text-align: left;
}
}




/* STAFF----------------------------------------------------------- */
.staffArea{
    margin-bottom: 20px;
}

.staffArea .inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px 110px;
}

.staffArea .inner ul {
	display: flex;
	justify-content: center;
}
.staffArea .inner ul li {
	width: 40%;
    margin-right: 10%;
}
.staffArea .inner ul li .duties {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 1em;
    font-weight: bold;
    letter-spacing: 1em;
}
.staffArea .inner ul li .h3Area {
	height: 90px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 46px;
}
.staffArea .inner ul li .h3Area h3 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.7;
}
.staffArea .inner ul li p {
	font-size: 13px;
	line-height: 2.3;
	font-weight: 700;
	text-align: left;
}

@media only screen and (max-width: 431px){
.staffArea .inner {
	max-width: 390px;
	margin: 0 auto;
	padding: 0 5% 20px 5%;
}

.staffArea .inner ul {
	display: block;
}
.staffArea .inner ul li {
	width: 100%;
    margin-bottom: 80px;
}

.staffArea .inner ul li .duties {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 1em;
    font-weight: bold;
    letter-spacing: 1em;
}
.staffArea .inner ul li .h3Area {
	height: 90px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 46px;
}
.staffArea .inner ul li .h3Area h3 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.7;
}
.staffArea .inner ul li p {
	font-size: 13px;
	line-height: 2.3;
	font-weight: 700;
	text-align: left;
}
}





/* STAFF----------------------------------------------------------- */
.staffArea2{
    margin-bottom: 100px;
}

.staffArea2 .inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px 110px;
}

.staffArea2 .inner ul {
	display: flex;
	justify-content: center;
}
.staffArea2 .inner ul li {
	width: 40%;
    margin-right: 10%;
}
.staffArea2 .inner ul li .duties {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 1em;
    font-weight: bold;
    letter-spacing: 0;
}
.staffArea2 .inner ul li .h3Area {
	height: 90px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 46px;
}
.staffArea2 .inner ul li .h3Area h3 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.7;
}


@media only screen and (max-width: 431px){
.staffArea2 .inner {
	max-width: 390px;
	margin: 0 auto;
	padding: 0 5% 10px 5%;
}

.staffArea2 .inner ul {
	display: block;
}
.staffArea2 .inner ul li {
	width: 100%;
    margin-bottom: 10px;
}

.staffArea2 .inner ul li .duties {
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 1em;
    font-weight: bold;
    letter-spacing: 0;
}
.staffArea2 .inner ul li .h3Area {
	height: 90px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding-bottom: 46px;
}
.staffArea2 .inner ul li .h3Area h3 {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.7;
}

}






/* TICKET----------------------------------------------------------- */

.ticketsArea {
	background-color: #e0e3e4;
	font-family: "Sawarabi Mincho";
}
.ticketsArea .inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 110px 10% ;
	text-align: center;
}
.ticketsArea .inner .txt {
font-size: 16px;
line-height: 1.8;
text-align: center;
}
.ticketsArea h3 {
	padding: 0 0 30px 0;
	font-size: 48px;
	line-height: 1.0;
	align-items: center;
}
.ticketsArea h3 span{
    font-size: 50%;
}
.ticketsArea h4 {
	padding: 50px 0 20px 0;
    margin: 0 0 20px 0;
	font-size: 22px;
	line-height: 1.4;
	align-items: center;
	border-bottom: 1px solid #45403f;
    letter-spacing: 0.2em;
}

.ticketsArea .inner .strong{
    font-size: 160%;
    line-height: 1.8;
    text-align: center;
    margin-bottom: 30px;
}

.ticketsArea dl.date {
/*    display: flex;
    text-align: left;
    width: 60%;
*/
    font-size: 18px;
    line-height: 1.8;
    margin: 10px auto 20px auto;
}
.ticketsArea dl.date dt {
/*  width: 20%;*/
  margin-right: 10px;
  white-space: nowrap;
  font-weight: bold;
  font-size: 120%;

}
.ticketsArea dl.date dd {
  width: auto;
white-space: nowrap;
}

.ticketsArea span{
    font-weight: bold;
}

.ticketsArea iframe {
  width: 100%;
  aspect-ratio: 16/9; /*アスペクト比*/
  margin: 20px 0 0 0;
}


.ticketsArea .btn {
	padding: 20% auto;
    margin: 50px 0 80px 0;
}
.ticketsArea .btn a {
    display: block;
    padding: 30px;
    font-size: 160%;
    line-height: 1.2;
	text-align: center;
    color: #fff;
    background-color: #808080;
}
.ticketsArea .btn a:hover {
    background-color: #19b5af;
}
.ticketsArea .seat-cont {
    display: flex;
    justify-content: center;
    align-items: stretch;
}
.ticketsArea .seat-cont .seat-item{
flex-basis: 40%;
border-radius: 16px;
border: 1px solid #8B8B8B;
background: #fff;
padding-bottom: 10px;
}
.ticketsArea .seat-cont .seat-item:first-child{
    margin-right:5%;
}

.ticketsArea .seat-cont .seki{
background: #19b5af;
color: #FFF;
text-align: center;
margin-bottom: 10px;
padding: 15px;
font-size: 180%;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}

.ticketsArea .seat-cont .price{
    font-size: 150%;
}
.ticketsArea .seat-cont .tokuten{
    font-size: 120%;
    padding: 0 10px 30px 10px;
}




.ticketsArea .standhana{
background-color: #fff;
padding: 30px;
text-align: left;
border-radius: 16px;
}

.ticketsArea .standhana h3{
font-size: 150%;
font-weight: bold;
}

.ticketsArea .standhana p{
    line-height: 2em;
    margin-bottom: 2em;
}
.ticketsArea .standhana p strong{
    font-weight: bold;
    display: block;
}

@media only screen and (max-width: 900px){
.ticketsArea dl.date {
    font-size: 16px;
    line-height: 1.8;
/*    text-align: left;*/
    width: 80%;
    margin:auto;
}
.ticketsArea dl.date dt {
/*  width: 30%;*/
}
.ticketsArea dl.date dd {
/*  width: 70%;*/
margin-bottom: 20px;
}

}

@media only screen and (max-width: 431px){
.ticketsArea .inner {
	max-width: 100%;
	margin: 0 auto;
	padding: 100px 5% 20px 5%;
	text-align: center;
}

.ticketsArea dl.date {
    display: block;
    font-size: 18px;
    line-height: 1.8;
    text-align: center;
    padding-left: 0;
}
.ticketsArea dl.date dt {
  width: 100%;
  font-weight: bold;
  padding-top: 20px;
}
.ticketsArea dl.date dd {
  width: 100%;
}

.ticketsArea .btn {
	padding: 0 auto;
    margin: 30px 0;
}
.ticketsArea .btn a {
    display: block;
    padding: 30px 10px;
    font-size: 150%;
    line-height: 1.2;
}
.ticketsArea .seat-cont {
    display: block;
}
.ticketsArea .seat-item {
    margin-bottom: 10px;
}
.ticketsArea .seat-cont .seat-item:first-child{
    margin-right:0;
}
}