@charset "utf-8";
/* CSS Document */
/*div,section{
    border: 1px solid #9d9d9d;
}*/

img{max-width: 100%;height:auto;}

/******************************  SP＆PC 共通  ******************************/

body{
    background-color: #111;
}

header{
    width: 100%;
    height: auto;
}

.Theater_Via_Digre{
    color:#B08D57;
    font-size: 32px;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-style: normal;
}

h1,h2,h3,h4,h5,h6{
    color:#fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-style: normal;
    line-height: 100%;
}

p,li{
    font-size: 15px;
    color: #fff;
    line-height: 170%;
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.title-box{
    width: 90%;
}

.top-section-title{
    color:#fff;
    font-size: 80px;
    line-height: 100%;

    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;

    text-indent: 0;
}

.top-section-title span{
    line-height: 100%;
    display: inline;
    margin-left: 50px;
    padding-left: 0;
}

/*===========
フェードイン
===========*/
.fadeIn{
  transition: 2s;
  opacity: 0;
}

.fadeIn.animated {
  opacity: 1;
}

/*===========
inview （劇場案内,劇場について）
===========*/

.fadeIn_up {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
}
.fadeIn_up.is-show {
  opacity: 1;
  transform: translateY(0);
}

.fadeIn_right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.8s ease-out;
}
.fadeIn_right.is-show {
  opacity: 1;
  transform: translateX(0);
}

.fadeIn_left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.8s ease-out;
}
.fadeIn_left.is-show {
  opacity: 1;
  transform: translateX(0);
}

/* ボタンの矢印 
.arrow {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 2px;
    margin-top: 16px;
    margin-left: 15px;
    border-radius: 9999px;
    background-color: #ffffff;
  }
  
  .arrow::before {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    width: 15px;
    height: 2px;
    border-radius: 9999px;
    background-color: #ffffff;
    transform: rotate(35deg);
    transform-origin: calc(100% - 1px) 50%;
  }*/

/* ボタンの矢印 */
.arrow{
    position: relative;
    display: inline-block;
    width: 8px;
    height: 14px;

    margin-top: 6px;
    margin-left: 10px;
}
  
.arrow::before,
.arrow::after{
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    width: 11px;
    height: 2px;
    border-radius: 9999px;
    background-color: #ffffff;
    transform-origin: calc(100% - 1px) 50%;
}
  
.arrow::before{
    transform: rotate(45deg);
}

.arrow::after{
    transform: rotate(-45deg);
}

/***  aタグ  ***/
a:link{text-decoration: none;color:#fff;}
a:visited {text-decoration: none;color:#fff;}
a:hover{text-decoration: none;color: #B08D57; transition: 0.3s;}
a:active {text-decoration: none;color: #fff;}

/***  幕 →　メインビジュアルの動作 ***/
#first-view{
    position: relative;
    height: 100vh;
    overflow: hidden;
}

#first-view img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

#first-view img.active{
    opacity: 1;
}

.catchcopy{
    width: 80%;
    font-size: 55px;
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;

    position: absolute;    
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    color: #fff;
    text-shadow: 1px 1px 5px #000;
}

#first-view img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

#first-view img .active{
    opacity: 1;
}

/*** ハンバーガーメニューのボタン ***/
.menu-toggle {
    display: none;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2000;
    cursor: pointer;
  }

.menu-toggle span {
    display: block;
    width: 30px;
    height: 4px;
    background: #fff;
    margin: 6px 0;
}  

/*** ハンバーガーメニューをクリックしたときの動作 ***/
.menu-toggle.open span:nth-child(1){
    transform: rotate(45deg) translate(5px, 5px);
  }

.menu-toggle.open span:nth-child(2){
    opacity: 0;
  }

.menu-toggle.open span:nth-child(3){
    transform: rotate(-45deg) translate(6px, -6px);
  }

/* TOPへ戻るボタン */
.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 15px;
}
.pagetop a {
    display: block;
    background-color: #111;
    text-align: center;
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    padding: 12px 7px;
	/*filter:alpha(opacity=50);*/
    /*-moz-opacity: 0.5;*/
    /*opacity: 0.5;*/
    border: 1px solid #fff;
    border-radius: 50%;
}
.pagetop a:hover {
    display: block;
    background-color:#353535;
    text-align: center;
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    padding: 12px 7px;
	/*filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;*/
    transition: 0.3s;
}

/****************************** PCレイアウト ******************************/

.logo{
    width: fit-content;
    margin: 20px auto;
}

/* グローバルナビ */
#drawer-menu{
    width: 85%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style-type: none;
    margin: 0 auto 3px auto;
}



#drawer-menu li{
    display: flex;
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 10px;
}

/*#drawer-menu li:hover{
    background-color: #B08D57;
}*/
    
#drawer-menu a{
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    line-height: 130%;
}
    
#drawer-menu a span{
    display: block;
    font-size: 12px;
    font-weight: normal;
}

/*** CTAのグループ ***/
#drawer-menu .cta-group{
    display: flex;
    gap: 50px; /* ボタン間のすきま */
    justify-content: center;
    margin-bottom: 8px;
}
    
#drawer-menu .cta-btn{
    background-color: #AE0B1B;
    padding: 5px 16px;
    border-radius: 2px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    line-height: 1.4;
    transition: background 0.3s;
}
    
#drawer-menu .cta-btn span{
    display: block;
    font-size: 12px;
    font-weight: normal;
}
    
#drawer-menu .cta-btn:hover{
    background-color: #B08D57;
    color: #fff;
    transition: 0.3s;
} 

/*********************** PCレイアウト：フッター ***********************/
footer{
    width: 100%;
    height: auto;
    background-color: #353535;
}

.container{
    max-width: 1200px;
    /*width: 1200px;*/
    padding: 80px 20px 20px 20px;
    margin: 0 auto; 
}

.footer-inner{
    display: flex;
    justify-content: space-between;
    margin-bottom: 80px;
}

.footer-info-box{
    max-width: 310px;
    width: 310px;
}

.footer-logo{
    margin-bottom: 20px;
}

.footer-nav{
    max-width: 250px;
    width: 250px;
    display: flex;
    justify-content: space-between;
}

.footer-nav ul li{
    list-style-type: none;
    line-height: 250%;
}

.disclaimer{
    text-align: center;
    color: #909090;
    font-size: 13px;
}

.privacy-terms{
    text-align: center;
    font-size: 13px;
}

.copy-right{
    text-align: center;
    font-size: 13px;
}

/* FOLLOW US */
.follow-us{
    max-width: 310px;
    width: 310px;
}

.follow-us .sns-icon p:hover{
    color: #B08D57;
    transition: 0.3s;
}

.sns-icon{
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
}

.each-sns{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.each-sns img{
    margin-bottom:25px;
}

.each-sns img:hover{
    opacity: 0.7;
    transition: 0.3s;
}

/* 出演団体募集（外部/サブドメインへのリンク） */
.footer-callout{
    width: fit-content;
    display: flex;
    margin: 0 auto 50px auto;
}

.footer-callout p:hover{
    color: #B08D57;
    transition: 0.5s;
}

/***********************  【01】PCレイアウト：トップページ共通 ***********************/

#first-view{
    margin-bottom: 200px;
}

#information,
#todays-program,
#lineup,
#about{
    max-width: 1200px;
    margin: 0 auto 250px auto;
}

#information .title-box,
#todays-program .title-box,
#lineup .title-box,
#about .title-box{
    width:90%;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 1.4;
}

.top-section-title{
    font-size: 80px;
}

.top-section-title span{
    font-size: 18px;
}

.top-section-container{
    padding: 0 20px;
}

/*********************** 【01】 PCレイアウトトップページ：新着情報 ***********************/

#information{
    max-width: 1200px;
    height: 700px;
    background-image: url(../img/01_info.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#information .title-box{
    padding-top: 50px;
}

.information-list{
    max-width: 900px;
    background-color: rgba(53, 53, 53, 0.7);
    padding:40px 3%;
    margin: 50px auto 0 auto;
}

.information-list li{
    margin: 15px 0;
    list-style-type: none;
    border-bottom: 1px solid #fff;
    padding: 15px 1em;
}

.information-list li br{
    display: none;
}

.information-list li a span{
    width: fit-content;
    padding: 2px 10px;
    background-color: #B08D57;
    border-radius: 2px;
    margin: 0 18px;
    line-height: 200%;
    color: #fff;
}

/* もっと見るボタン */
#information .btn{
    width: fit-content;
    display: flex;
    margin: 50px auto 0 auto;
    background-color: #111;
    border: 1px solid #fff;
    padding: 8px 40px;
}

#information .btn:hover{
    background-color: #353535;
    transition: 0.3s;
}

#information .btn p{
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    font-style: normal;
}


/***********************  【01】PCレイアウトトップページ：本日の公演 ***********************/

/* 大枠 */
#todays-program .programs{
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin: 50px auto 0 auto;
}

/* 個別の枠 */
#todays-program .programs .program{
    max-width: 600px;
    background-color: #353535;
    padding: 50px;
    display: flex;
}

#todays-program .yymmdd{
    margin-top: 50px;
}

#todays-program .yymmdd span{
    font-size: 50px;
    margin-left: 10px;
    display: inline;
} 

.program-title{
    font-size: 21px;
    line-height: 200%;
}

.program_info{
    max-width: 236px;
    margin-left: 30px;
}

.program .program_info .label{
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.top-lineup-btn{
    width: fit-content;
    background-color: #111;
    border: 1px solid #fff;
    padding: 8px 40px;
    display: flex;
    margin-top: 30px;
}

.top-lineup-btn:hover{
    background-color: #353535;
    transition: 0.3s;
}

/***********************  【01】PCレイアウトトップページ：ラインナップ ***********************/

#lineup .slider{
    display: flex;
}

.top-lineup{
    margin-top: 100px;
}

/* もっと見るボタン */
#lineup .btn{
    width: fit-content;
    display: flex;
    margin: 70px auto;
    background-color: #111;
    border: 1px solid #fff;
    padding: 8px 40px;
}

#lineup .btn:hover{
    background-color: #353535;
    transition: 0.3s;
}

#lineup .btn p{
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    font-style: normal;
}

/* Slickスライダーのdiv */
.top-lineup{
    height: fit-content;
}

/***********************  【01】PCレイアウトトップページ：劇場について ***********************/

#about{
    max-width: 1200px;
    height: 500px;
    background-image: url(../img/01_about.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

#about .title-box{
    padding-top: 50px;
}

#about .title-box h2{
text-shadow: 1px 1px 5px #000;
}

.about_intro{
    max-width: 900px;
    height: 290px;
    background-color: rgba(53, 53, 53, 0.7);
    padding: 50px 20px;
    margin: 45px auto 0 auto;
}

/* もっと見るボタン */
.about_intro .btn{
    width: fit-content;
    max-width: 100%;
    border: 1px solid #fff;
    background-color: #111;
    display: flex;
    padding: 8px 40px;  
    margin: 20px auto 0 auto;
}

.about_intro .btn:hover{
    background-color: #353535;
    transition: 0.3s;
}

.about_intro .btn p{
    font-family: "Montserrat", sans-serif;
    font-weight: bold;
    font-style: normal;
}

/***********************  【共通】PCレイアウト下層ページ共通 ***********************/  

.lower-mv .container{
    width: 100%;
    padding: 0 20px;
}

.lower-mv .container .mb{
    margin-bottom: 200px;
}

.lower-mv .container .mb .mb02{
    margin-bottom: 100px;
}

.lower-mv .container .mb .mb03{
    margin-bottom: 50px;
}

.lower-mv .heading-container h1{
    font-size: 96px;
    text-align: center;
    display: block;
}

.lower-mv .heading-container h1 span{
    font-size: 18px;
}

.lower-mv .container .section-heading{
    font-size: 80px;
    margin-bottom: 30px;
}

.lower-mv .container .section-heading span{
    font-size: 18px;
    margin-left: 50px;   /* 要修正*/ 
    display: inline;
}

.no-break{ /*日本語見出しの改行：レスポンシブのみで有効にする */
    display: none;
}

/***********************  【01-1】PCレイアウト下層ページ：新着情報 ***********************/

#lower-info .heading-container{
    width: 100%;
    padding-top: 180px;
    margin: 0 auto 100px auto;
}

#lower-info .heading-container h1{
    font-size: 96px;
    text-align: center;
}

#lower-info .heading-container h1 span{
    font-size: 18px;
}

#lower-info .container{
    max-width: 1200px;
    margin-bottom: 200px;
}

#lower-info .infomation-container{
    margin-bottom: 200px;
}

#lower-info .infomation-container .information-list .info-box li span{
    background-color: #B08D57;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-style: normal;
    padding: 3px 5px;
    border-radius: 2px;
    margin: 0 15px;
}

#lower-info .infomation-container .information-list .info-box li{
    border-bottom: 1px solid #fff;
    padding-bottom: 8px;
}

/***********************  【01-1】PCレイアウト下層ページ：新着情報 ***********************/

#lower-info .heading-container{
    width: 100%;
    padding-top: 180px;
    margin: 0 auto 100px auto;
}

#lower-info .heading-container h1{
    font-size: 96px;
    text-align: center;
}

#lower-info .heading-container h1 span{
    font-size: 18px;
}

#lower-info .container{
    max-width: 1200px;
    margin-bottom: 200px;
}

#lower-info .infomation-container{
    margin-bottom: 200px;
}

#lower-info .infomation-container .information-list .info-box li span{
    background-color: #B08D57;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-style: normal;
    padding: 3px 5px;
    border-radius: 2px;
    margin: 0 15px;
}

#lower-info .infomation-container .information-list .info-box li{
    border-bottom: 1px solid #fff;
    padding-bottom: 8px;
}

/***********************  【02】PCレイアウト下層ページ：公演ラインナップ ***********************/  

#lower-lineup .heading-container{
    width: 100%;
    height: 550px;
    background-image: url(../img/02_mv.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 180px;
    margin-bottom: 100px;
}

#lower-lineup .heading-container h1{
    font-size: 96px;
    text-align: center;

}

#lower-lineup .heading-container h1 span{
    font-size: 18px;
}

#east-hall{
    max-width: 1200px;
    margin: 0 auto 200px auto;
}

#east-hall h2{
    font-size: 80px;
}

#west-hall{
    max-width: 1200px;
    margin: 0 auto;
}

#west-hall h2{
    font-size: 80px;
}

#east-hall .container .lineup-box .program-info h3,
#west-hall .container .lineup-box .program-info h3{
    font-size: 18px;
    line-height: 130%;
}

#lower-lineup .hall{
    max-width: 300px;
    width: 300px;
    margin: 0 auto 100px auto;
}

#lower-lineup .hall ul{
    display: flex;
    justify-content: space-between;
    list-style-type: none;
}

#lower-lineup .container{
    display: flex;
    justify-content: space-around;
}

#lower-lineup .container .lineup-box .program-info a .btn{
    width: 100%;
    background-color: #AE0B1B;
    border-radius: 2px;
    padding: 8px 30px;
    display: flex;
    justify-content: center;
}

#lower-lineup .container .lineup-box .program-info a .btn:hover{
    background-color: #B08D57;
    transition: 0.3s;
}

.program-image{
    position: relative;
    z-index: 1;
}

.program-image .label-box{
    width: fit-content;
    position: absolute;
    top: 0;
    left: 0;

    background-color:#B08D57;
    padding: 3px 5px;
}

.program-info{
    max-width: 236px;
}

.program-info .info-box{
    max-width: 236px;
    display: flex;
    margin: 10px 0;
}

.program-info .label{
    width: fit-content;
    background-color: #cf408c;
    padding: 3px 5px;
    border-radius: 2px;
    margin-right: 20px;
}

.program-info .program-title{
    margin-bottom: 20px;
}

#west-hall{
    margin-bottom: 200px;
}

.lineup-btn{
    display: flex;
    margin-top: 8px;
}

.lineup-btn div p:hover{
    color:#B08D57;
    transition: 0.3s;
}

/* ▶ボタン 
.triangle{
    width: 0;
    height: 0;
    border-style: solid;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 15px solid #ffffff;
    border-right: 0;

    margin-top: 5px;
    margin-left: 15px;
}*/

/***********************  【22】PCレイアウト下層ページ：公演情報詳細 ***********************/  

#lower-lineup-details .heading-container{
    width: 100%;
    height: 550px;
    background-image: url(../img/03_mv.png);
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 180px;
    margin-bottom: 50px;
}

#lower-lineup-details .heading-container h1{
    font-size: 96px;
    text-align: center;
}

#lower-lineup-details .heading-container h1 span{
    font-size: 18px;
}

/* ポスターのエリア */
.program-details-nav{
    width: 70%;
    list-style-type: none;
    display: flex;
    justify-content: space-between;
    margin: 0 auto 100px auto;
}

.program-intro{
    max-width: 1200px;
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 200px;
}

.program-nav{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.program-nav .program-title{
    margin-bottom: 30px;
}

.program-nav h2{
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
}

.program-nav h3{
    font-size: 40px;
    text-align: center;
    margin-bottom: 30px;
}

.program-period p,
.program-time p{
    text-align: center;
}

.program-heading{
    margin: 0 auto 50px auto;
}

/* h2とspan */
#prologue h2,
#schedule h2,
#staff-cast h2,
#story h2,
#ticket h2,
#contact-links h2{
    font-size: 72px;
}

#prologue h2 span,
#schedule h2 span,
#staff-cast h2 span,
#story h2 span,
#ticket h2 span,
#contact-links h2 span{
    font-size: 18px;
    margin-left: 30px;
}

#prologue,
#schedule,
#staff-cast,
#ticket,
#contact-links{
    max-width: 1200px;
    margin: 0 auto 200px auto;
}

/* プロローグ */
#prologue h3{
    font-size: 32px;
    margin: 50px 0 20px 0;
}

.prologue-text{
    max-width: 620px;
}

/* スケジュール */
#schedule .schedule-list{
    list-style-type: none;
    padding-bottom: 50px;
    margin-bottom: 50px;
}

.program-period{
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
}

.program-time{
    display: flex;
    gap: 20px;
}

/* スタッフ＆キャスト */
.bd{
    margin-bottom: 30px;
}

.staff-list,
.cast-list{
    list-style-type: none;
    margin-bottom: 50px;
}

/* story あらすじ */
#story{
    width: 1920px;
    height: 600px;
    background-image: url(../img/22_02.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    padding-top: 30px;
    margin: 0 auto 200px -370px;
}

.story-heading{
    max-width: 1200px;
    margin: 0 auto 50px auto;
}

.story-text-box{
    max-width: 1200px;
    margin: 0 auto;
}

.story-text{
    max-width: 600px;
}

/* チケット購入 */
.ticket-list{
    list-style-type: none;
    margin-bottom: 30px;
}

.ticket-note{
    margin-bottom: 30px;
}

.ticket-btn-container{
    width: fit-content;
    background-color: #AE0B1B;
    border-radius: 2px;
    padding: 8px 35px;
    display: flex;
    gap: 20px;
}

.ticket-btn-container:hover{
    background-color: #B08D57;
    transition: 0.3s;
}

/* コンタクト＆リスト */
#contact-links .contact{
    margin-bottom: 60px;
}

#contact-links .contact h3{
    font-size: 24px;
    margin-bottom: 20px;
}

/* SNSリスト */
#contact-links .sns-links-list{
    list-style-type: none;
    display: flex;
    gap: 20px;
}

#contact-links .sns-links{
    margin-bottom: 60px;
}

#contact-links .sns-links h3{
    font-size: 24px;
    margin-bottom: 20px;
}

#contact-links .sns-links p{
    margin-bottom: 20px;
}

#contact-links .sns-links ul li a p:hover{
    color: #B08D57;
    transition: 0.3s;
}

#contact-links .sns-links .sns-links-list{
    margin-bottom: 10px;
    text-align: center;
}

#contact-links .sns-links .sns-links-list li a img{
    margin-bottom: 10px;
}

#contact-links .sns-links .sns-links-list li a img:hover{
    opacity: 0.8;
}

/* ハッシュタグ */
#contact-links .hashtag h3{
    font-size: 24px;
    margin-bottom: 20px;
}

#contact-links .hashtag div p:hover{
    color: #B08D57;
    transition: 0.3s;
}

#contact-links .hashtag div{
    display: flex;
    gap: 20px;
}

/* brを無効に */
.program-details-br{
    display: none;
}

/***********************  【03】PCレイアウト下層ページ：劇場案内 ***********************/

#guide .heading-container{
    width: 100%;
    height: 550px;
    background-image: url(../img/03_mv.png);
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 180px;
    margin-bottom: 100px;
}


.guide-box{
    display: flex;
    position: relative;
}

.guide-heading{
    font-size: 60px;
    line-height: 50%;
    margin: 30px 0 20px 0;
}

.guide-heading span{
    font-size: 18px;   
}

#guide .container .mm{
    margin-top: -50px;
}


.ticket-text-box{
    max-width: 428px;
    margin-top: 70px;
    margin-right: 20px;
}

.entrance-text-box,
.bar-text-box{
    max-width: 428px;
    margin-left: 20px; 
}


/* 各ホール紹介 */

.hall-image{/* ホールの画像 */
    max-width: 800px;
    height: 450px;
}

.east-text-box{
    margin-left: 20px;
}

.east-text{
    margin-bottom: 30px;
}

.west-text-box{
    margin-right: 20px;
}

.west-text{
    margin-bottom: 30px;
}

.east-hall{
    line-height: 50%; /* 縮小したときの重なりに注意 */
    position: absolute;
    top: 74%;
    left: 55%;
}

.east-hall .east-jp{
    margin-left: 0px;
}

.west-hall{
    line-height: 77%; /* 縮小したときの重なりに注意 */
    position: absolute;
    top: 71%;
    left: 5%;
}

.west-hall .west-jp{
    margin-left: 238px;
    display: block;
}

.seat-btn{
    width: 145px;
    height: 50px;
    background-color: #AE0B1B;
    border-radius: 2px;
    padding: 10px 15px;
    margin-bottom: 50px;
    margin-left: 185px;
    display: flex;
    justify-content: space-around;
}

.seat-btn:hover{
    background-color: #B08D57;
    transition: 0.3s;
}

/* アクセシビリティ */

.accessibility-heading{
    font-size: 24px;
    margin-bottom: 20px;
    display: block;
}

/* PCで非表示 */
.sp-east-hall,
.sp-west-hall{
    display: none;
}

/*********************** 【04】 PCレイアウト下層ページ：座席表 ***********************/ 

#seat .heading-container{
    width: 100%;
    height: 550px;
    background-image: url(../img/04_mv.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-top: 180px;
    margin-bottom: 100px;
}

#seat .heading-container h1{
    font-size: 96px;
    text-align: center;
}

#seat .heading-container h1 span{
    font-size: 18px;
    text-align: center;
}

.seating-chart{
    max-width: 1200px;
    margin: 0 auto 200px auto;
}

.seating-chart h2{
    font-size: 50px;
}

.seating-chart h2 span{
    font-size: 18px;
    margin-left: 30px;
}

.seat-br{
    display: none;
}

/***********************  【05】PCレイアウト下層ページ：劇場について ***********************/

#lower-about{
    display: block;
    width: 100%;
    min-height: 100vh; 
}

#lower-about .heading-container{
    width: 100%;
    height: 550px;
    background-image: url(../img/05_01.png);
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 180px;
    margin: 0 auto 100px auto;
}

/* ABOUT-01 */
.about-01{
    width: 100%;
    height: 1093px;
    background-image: url(../img/05_02.png);
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 200px; 
    margin-bottom: 200px;
}

.about-box,
.concept-box{
    max-width: 1200px;
    padding: 0 20px;
    margin: 0 auto;

}

.about-box h2,
.concept-box h2{
    font-size: 96px;
    display: block;
    margin-bottom: 50px;
}

.about-box h3,
.concept-box h3{
    font-size: 24px;
    line-height: 170%;
    display: block;
    margin-bottom: 50px;
}

.about-text,
.concept-text{
    max-width: 600px;
    width: 600px;
}

/* CONCEPT */
.concept-box{
    max-width: 1200px;
    height: 100vh;
    background-image: url(../img/05_03.png);
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 200px; 
    margin: 0 auto 100px auto;
}

.concept-image-box{
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.concept-image{
    margin-bottom: 100px;
}

.text-last{
    max-width: 1200px;
    width: 1200px;
    margin: 0 auto 100px auto;
}

.text-last p{
    text-align: center;
    
}

.image-last{
    margin: 0 auto 200px auto;
}

/*********************** 【06】PCレイアウト下層ページ：よくある質問 ***********************/

#faq .heading-container{
    width: 100%;
    padding-top: 180px;
    margin: 0 auto 20px auto;
}

#faq .heading-container h1{
    font-size: 96px;
    text-align: center;
}

#faq .heading-container h1 span{
    font-size: 18px;
}

#faq .container{
    max-width: 1200px;
}

dl{
    max-width: 1200px;
    background-color: #353535;
    padding: 50px;
    margin-bottom: 200px;
}

dd, dt{
    color: #fff;
    line-height: 200%;
}

.accordion-outer{
    margin-bottom: 20px;
}

/*  Questionの部分  */
.accordion-outer{
    cursor: pointer; /* クリックできます */
    display: flex; /* タイトル（Q）と矢印に対して */
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #939faa;
  }
  
/*  Answerの部分  */
.accordion-inner{
    display: none;
    border: 1px solid #fff;
    padding: 20px;
    margin-bottom: 20px;
}

.accordion-outer:after{
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); /* 下向きの矢印 */
    transition: 0.4s; /* 矢印のタイミング */
}

.open:after{
    -webkit-transform: rotate(225deg); 
    transform: rotate(225deg); /* 上向きの矢印 */
}

.faq-q{
    
    margin-bottom: 15px;
}

.faq-a{
    margin-bottom: 50px;
}

/*********************** 【07】PCレイアウト下層ページ：チケット購入ページ ***********************/

#ticket{
    max-width: 1920px;
}

#ticket .heading-container{
    width: 100%;
    height: 550px;
    background-image: url(../img/02_mv.png);
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 180px;
    margin: 0 auto 100px auto;
}


#ticket .heading-container h1{
    font-size: 96px;
    text-align: center;
}

#ticket .heading-container h1 span{
    font-size: 18px;
    text-align: center;
}

#ticket .form-guide{
    width: 100%;
    margin: 0 auto 50px auto;
}

#ticket .form-guide p{
    text-align: center;
}

#ticket form{
    max-width: 800px;
    margin: 0 auto 200px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

#ticket form label{
    font-size: 16px;
    color: #fff;
    margin-bottom: 5px;
}

#ticket form input,
#ticket form select,
#ticket form textarea{
    padding: 10px;
    font-size: 16px;
}

#ticket form input[type="checkbox"]{
    width: auto;
}

#ticket form .submit-btn{
    width: fit-content;
    background-color: #AE0B1B;
    color: #fff;
    padding: 10px 60px;
    font-size: 18px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    margin-top: 20px;
    align-self: center;
}

#ticket form .submit-btn:hover{
    background-color: #B08D57;
    transition: 0.3s;
}

.required{
    color: #fff;
    font-size: 14px;
}

.checkbox-area{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.checkbox-area a{
    /*color: #B08D57;*/
    text-decoration: underline;
}

/***********************  【08】PCレイアウト下層ページ：アクセス ***********************/

#access .heading-container{
    width: 100%;
    padding-top: 180px;
    margin: 0 auto 100px auto;
}

#access .heading-container h1{
    font-size: 96px;
    text-align: center;
}

#access .heading-container h1 span{
    font-size: 18px;
    text-align: center;
}

#access .container{
    max-width: 1200px;
    background-color: #353535;
    margin: 0 auto 200px auto;
}

#access .container > div{
    margin-bottom: 70px;
}

#access .container > div > h2{
    margin-bottom: 15px;
    border-left: 5px solid #fff;
    padding-left: 1em;
}

#access .container .map iframe{
    max-width: 1160px;
    height: 300;
    display: block;
    text-align: center;   
}

.access-barrier-free ul .li-outer{
    margin-left: 1em;
}

.access-barrier-free ul .li-outer ul .li-inner{
    list-style-type: none;
    margin-left: 0;
}

.access-barrier-free ul li{
    margin-left: 1em;
}

.access-train ul li,
.access-bus ul li{
    list-style-type: none;
}

.access-barrier-free .mb{
    display: block;
    margin-bottom: 30px;
}

.access-map-btn{
    width: fit-content;
    background-color: #B08D57;
    border-radius: 2px;
    padding: 3px 10px;
}

/*********************** 【09】PCレイアウト下層ページ：プライバシーポリシー ***********************/

#privacy .heading-container{
    width: 100%;
    padding-top: 180px;
    margin: 0 auto 30px auto;
}

#privacy .heading-container h1{
    font-size: 36px;
    text-align: center;
    margin-bottom: 30px;
}

.policy-explain{
    max-width: 1200px;
    padding: 0 150px;
    margin: 0 auto;
}

#privacy .container{
    max-width: 1200px;
    margin: 0 auto 200px auto;
}

#privacy .text-box{
    padding: 0 130px;
    margin: 0 auto 100px auto;
}
  
/*.policy .h-j{
    width: fit-content;
    border-bottom: 1px solid #fff;
    font-size: 28px;
    font-family: "Noto Sans JP", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    padding-bottom: 12px;
    margin: 180px auto 100px auto;
}*/
  
.policy-h{
    width: fit-content;
    border-bottom: 1px solid #fff;
    font-size: 21px;
    font-family: "Noto Sans JP", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.policy-p01{
    margin-bottom: 15px;
}
  
.policy-li01{ 
    text-indent: 2rem;
    list-style-type: none;
}
  
.policy-li02{
    text-indent: 4rem;
    list-style-type: none;
}

/***********************  【10】PCレイアウト下層ページ：利用規約 ***********************/

#terms .heading-container{
    width: 100%;
    height: 400px;
    padding-top: 180px;
    
}

#terms .heading-container h1{
    font-size: 36px;
    text-align: center;
    display: block;
    margin-bottom: 30px;
}

#terms .heading-container p{
    display: block;
    max-width: 1200px;
    padding: 0 150px;
    margin: 0 auto;;
}

#terms .container{
    max-width: 1200px;
    padding: 20px 150px;
    margin: 0 auto 200px auto;
}

#terms .container > h2{
    line-height: 170%;
    display: block;
    margin-bottom: 15px;
}

#terms .container > p{
    line-height: 170%;
    display: block;
    margin-bottom: 50px;
}

.terms-list{
    /*list-style-type: none;*/
    line-height: 170%;
    margin: -20px 0 50px 20px;
}

/***********************  【11】PCレイアウト下層ページ：特定商取引法 ***********************/

#legal .heading-container{
    width: 100%;
    height: 400px;
    padding-top: 180px;
    
}

#legal .heading-container h1{
    font-size: 36px;
    text-align: center;
    display: block;
    margin-bottom: 30px;
}

#legal .heading-container p{
    display: block;
    max-width: 1200px;
    padding: 0 150px;
    margin: 0 auto;;
}

#legal .container{
    max-width: 1200px;
    padding: 20px 150px;
    margin: 0 auto 200px auto;
}

#legal .container > h2{
    line-height: 170%;
    display: block;
    margin-bottom: 15px;
}

#legal .container > p{
    line-height: 170%;
    display: block;
    margin-bottom: 50px;
}

/***********************  【12】PCレイアウト下層ページ：お問い合わせ ***********************/

#contact .heading-container{
    width: 100%;
    padding-top: 180px;
    margin: 0 auto;
}

#contact .heading-container h1{
    font-size: 96px;
    text-align: center;
}

#contact .heading-container h1 span{
    font-size: 18px;
}

#contact .heading-container p{
    text-align: center;
}

#contact form{
    max-width: 800px;
    margin: 50px auto 200px auto;
    padding: 0 20px;
    display: flex;
    flex-direction: column;
}

#contact form label{
    font-size: 16px;
    margin-bottom: 10px;
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
}

#contact form input[type="text"],
#contact form input[type="email"],
#contact form textarea{
    width: 100%;
    background-color: #353535;
    border: 1px solid #fff;
    color: #fff;
    font-size: 15px;
    padding: 10px;
    margin-bottom: 30px;
    border-radius: 2px;
    font-family: "Montserrat", sans-serif;
}

#contact form input[type="checkbox"]{
    margin-right: 8px;
}

#contact form a{
    /*color: #B08D57;*/
    text-decoration: underline;
}

#contact form button{
    width: fit-content;
    margin: 30px auto 0 auto;
    background-color: #AE0B1B;
    color: #fff;
    border: none;
    padding: 10px 30px;
    font-size: 16px;
    border-radius: 2px;
    cursor: pointer;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
}

#contact form button:hover{
    background-color: #B08D57;
}

/*********************** グローバルナビ：ハンバーガーメニューに切り替え **********************************************/
@media only screen and (max-width: 1280px) {

/*** SPレイアウト：ヘッダー ***/
header{
    background-color: #111;
    height: 70px;
    position: relative;
    z-index: 1000;
}

.logo{
    position: absolute;
    top: 0;
    left: 15px;
    z-index: 1001;
}
    
/*** ドロワーメニュー（モバイル時） ***/
.menu-toggle{
    display: block;
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 2000;
    cursor: pointer;
}

.menu-toggle span{
    display: block;
    width: 30px;
    height: 4px;
    background: #fff;
    margin: 6px 0;
    transition: all 0.3s ease; /* animation */
}

#drawer-menu{
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 50%;
    background: #111;
    flex-direction: column;
    justify-content: space-evenly;
    z-index: 1500;
    list-style-type: none;
    /*margin-top: 30px;*/
}

#drawer-menu.active{
    display: flex;
}

.global-nav li a span{
    display: block;
    font-size: 12px;
    color: #fff;
}

#drawer-menu .cta-group{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 30px; /* ボタン間のすきま */
    justify-content: center;
}

#drawer-menu .cta-group a{
    background-color: #AE0B1B;
    padding: 6px 16px;
    border-radius: 2px;
    color: #fff;
    font-weight: bold;
    display: inline-block;
    transition: background 0.3s ease;
}

#drawer-menu .cta-group a:hover{
    background-color: #B08D57;
}

}

/***********************  ※ここからSPレイアウト※ **********************************************/

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

.catchcopy{
    width: 86%;
}

.catchcopy h2{
    font-size: 38px;
    line-height: 130%;
}

/***  SPレイアウト：トップページ共通  ****/

#information, #todays-program, #lineup, #about{/* コンテンツの幅100％ */
    width: 100%;
    margin-bottom: 200px;
}

/* 見出しをやや小さく */
.top-section-title{
    font-size: 38px;
    text-align: center;
    margin-left: 30px;
}

/* 見出しの日本語改行 */
#information .title-box .top-section-title span,
#todays-program .title-box .top-section-title span,
#lineup .title-box .top-section-title span,
#about .title-box .top-section-title span{
    display: block;
    margin-top: 15px;
    margin-left: 0;
    text-align: center;
}

/* ドロワー */
.slider {
    padding: 0 10px;
}

  .slider .slick-slide {
    padding: 0 5px;
}

.slider img {
    max-width: 100%;
    height: auto;
}

.slider .slick-slide img {
    max-height: 280px;
    height: auto;         /* 比率を保つ */
    object-fit: contain;  
}

/* 矢印全体の表示と位置調整 */
.slick-prev,
.slick-next {
    z-index: 10;
    width: 40px;
    height: 40px;
}

/* 前へ（←）矢印：左から5%の位置に */
.slick-prev {
    left: -2% !important;
}

/* 次へ（→）矢印：右から5%の位置に */
.slick-next {
    right: -2% !important;
}

/* 矢印の中身（← →）のデザイン */
.slick-prev:before,
.slick-next:before {
    font-size: 30px;
    color: #000; 
}


/***  SPレイアウト：フッター  ****/
footer{
    height: auto;
}

footer .container {
    width: 100%;
    padding-right: 3%;
    padding-left: 3%;
}

.footer-inner{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.footer-info{
    margin-bottom: 50px;
}

.footer-info p{
    text-align: center;
}

.footer-nav{
    flex-direction: column;
    margin-bottom: 50px;
}

.footer-nav li{
    line-height: 250%;
}

.follow-us p{
    text-align: center;
}

.footer-callout{
    margin-bottom: 50px;
}


/***********************  【01】SPレイアウトトップページ：新着情報 ***********************/
#information{
    background-image: url(../img/01_info.png);
    background-repeat: no-repeat;
    background-position: left;
    height: 1000px;
}

.information-list li br{
    display: inline;
}

#information .btn{
    width: 95%;
    display: flex;
    justify-content: center;
    padding: 10px 15px;
}

/***********************  【01】SPレイアウトトップページ：本日の公演 ***********************/

/* 大枠 */
#todays-program .programs{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center; 
}

/* 個別の枠 */
#todays-program .programs .program{
    width: 100%;
    background-color: #353535;
    padding: 50px 3%;
    display: flex;
    flex-direction: column;
    margin: 0 auto 30px auto;

    align-items: center;  
    padding: 30px; 
}

#todays-program .programs .program img{
    margin: 0 auto 10px auto;
    display: block;
}

#todays-program .yymmdd{
    margin-top: 50px;
    display: flex;
    justify-content: center;   
}

#todays-program .yymmdd span{
    font-size: 38px;
    margin-left: 10px;
    display: inline;
} 

.program_info{
    width: 88%;
    margin-top: 20px;
    margin-left: 0;
}

.top-lineup-btn{
    width: 100%;
    padding: 10px 10px;
    display: flex;
    justify-content: center;
}

/***********************  【01】SPレイアウトトップページ：公演ラインナップ ***********************/

#lineup .btn{
    width: 95%;
    display: flex;
    justify-content: center;
    padding: 10px 15px;
}

/***********************  【01】SPレイアウトトップページ：劇場について ***********************/

#about{
    min-height: 730px; 
    height: auto;
    padding-bottom: 20px;
}

.about_intro{
    height: auto;
    padding: 20px 3%;
    margin-top: 20px;
}

.about_intro .follow-us-p{
    display: block;
}

.about_intro .btn{
    width: 95%;
    padding: 8px 25px;  
    display: flex;
    justify-content: center;
}

/***********************  【01-1】SPレイアウト下層ページ：新着情報 ***********************/

#lower-info .container .info-box .article-title{
    width: 100%;
}

#lower-info .heading-container{
    height: 300px;
    margin: 30px auto 50px auto;
    padding-top: 110px;
}

#lower-info .heading-container h1{
    font-size: 50px;
    line-height: 100%;
    /*margin: 50px 3% 0 3%;*/
}

#lower-info .heading-container h1 span{
    font-size: 18px;
}

.infomation-container{
    width: 100%;
    padding: 0 1% 20px 1%; 
    margin-bottom: 200px;
}

.information-list{
    width: 95%;
}

.information-list li{
    padding: 20px 2%;
    margin-bottom: 15px;
}

.information-list li br{
    display: flex;
}


/***********************  【02】SPレイアウト下層ページ：公演ラインナップ ***********************/  

#lower-lineup .heading-container{
    height: 300px;
    margin: 30px auto 50px auto;
    padding-top: 110px;
}

#lower-lineup .heading-container h1{
    font-size: 50px;
    line-height: 100%;
    margin: 0px 3%;
}

#lower-lineup .container{ 
    justify-content: flex-start;
    flex-wrap: wrap; 
}

.program-info{
    align-items: center;
}

#lower-lineup .container .lineup-box{
    width: 48%;
    margin: 1%;
}

#lower-lineup .container .line-up-3rd{
    width: 48%;
    margin-left: 0;
}

#lower-lineup .container .lineup-box .program-info .info-box{
    display: flex;
    margin: 10px auto 10px -17px;
}

#lower-lineup .container .lineup-box .program-info .info-box .label{
    font-size: 9px;
    width: 28%;
    margin: 0 auto;
    text-align: center;  
}

#lower-lineup .container .lineup-box .program-info .info-box .schedule{
    font-size: 13px;
}

#lower-lineup .container .lineup-box .program-info a .btn{
    width: 95%;
    background-color: #AE0B1B;
    border-radius: 2px;
    padding: 10px 13px;
    display: flex;
    justify-content: center;
    margin: 0 auto 15px auto;
}

#lower-lineup .container .lineup-box .program-info a .btn div p{
    font-size: 12px;
}

#lower-lineup .container .lineup-box .program-info .program-title{
    font-size: 15px;
    text-align: center;
}

#east-hall,
#west-hall{
    width: 100%;
    margin: 0;
}

#east-hall h2,
#west-hall h2{
    font-size: 40px;
    text-align: center;
}

.lineup-btn{
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
}

.lineup-btn div p{
    font-size: 12px;
}

.lineup-arrow-01{
    margin-top: 3px;
}

.lineup-arrow-02{
    margin-top: 3px;
}

/***********************  【22】SPレイアウト下層ページ：公演情報詳細 ***********************/  

#lower-lineup-details .container{
    padding: 0;
}

#lower-lineup-details .heading-container{
    width: 100%;
    height: 300px;
    margin: 30px auto 70px auto;
    padding-top: 110px;
}

#lower-lineup-details .heading-container h1{
    font-size: 50px;
    line-height: 100%;
    margin: 0px 3%;
}

/*#lower-lineup-details .heading-container h1 span{
    font-size: 18px;
}*/

.program-details-nav{
    width: 100%;
    display: flex;
    /*flex-wrap: wrap;*/
    flex-direction: column;
    /*justify-content: space-between;*/
    text-align: center;
    padding: 0 5%;
    margin: 0 2% 70px 2%;
}

/* ポスターのエリア */
.program-intro{
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    align-items: center;
    padding: 0 5%;
    margin: 0 auto 200px auto;
}

.program-delails-poster img{
    width: 100%;
    margin: 0;
}

.program-nav{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 5%;
}

.program-nav .program-title{
    margin-bottom: 10px;
}

.program-nav h2{
    font-size: 18px;
    text-align: center;
    margin-bottom: 20px;
}

.program-nav h3{
    font-size: 28px;
    text-align: center;
    margin-bottom: 20px;
}

.program-details-date-time{
    padding: 0 5%;
    margin-bottom: 70px;
}

.program-details-date-time >div >p{
    text-align: center;
}

.program-period p,
.program-time p{
    text-align: center;
}

/*.program-heading{
    margin: 0 auto 50px auto;
}*/

/* h2とspan */
#prologue h2,
#schedule h2,
#staff-cast h2,
#story h2,
#ticket h2,
#contact-links h2{
    font-size: 40px;
    text-align: center;
}

#prologue h2 span,
#schedule h2 span,
#staff-cast h2 span,
#story h2 span,
#ticket h2 span,
#contact-links h2 span{
    font-size: 18px;
    margin-left: 0;
}

#prologue,
#schedule,
#staff-cast,
#ticket,
#contact-links{
    max-width: 1200px;
    padding: 0 5%;
    margin: 0 auto 200px auto;
}

/* プロローグ */
#prologue h3{
    font-size: 24px;
    text-align: center;
    margin: 50px 0 20px 0;
}

.prologue-text{
    max-width: 620px;
    margin: 0 auto;
}

/* スケジュール */
#schedule .schedule-list{
    list-style-type: none;
    padding-bottom: 50px;
    margin-bottom: 50px;
}

.program-period{
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
}

.program-time{
    display: flex;
    gap: 20px;
}

/* スタッフ＆キャスト */
.bd{
    margin-bottom: 30px;
}

.staff-list,
.cast-list{
    list-style-type: none;
    margin-bottom: 50px;
}

/* story あらすじ */
#story{
    /*max-width: 1920px;*/
    width: 100%;
    height: auto;
    background-image: url(../img/22_02.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;

    padding: 30px 2% 50px 2%;
    /*margin: 0 auto 200px -370px;*/
    margin: 0 auto 200px auto;
}

.story-heading{
    /*max-width: 1200px;*/
    width: 100%;
    margin: 0 auto 50px auto;
}

.story-text-box{
    /*max-width: 1200px;*/
    width: 100%;
    padding: 0 4%;
    margin: 0 auto;
}

.story-text{
    /*max-width: 600px;*/
    width: 100%;
    margin: 0 auto;
}

/* チケット購入 */
#lower-lineup-details #ticket{
    padding: 0 4%;
}

.ticket-list{
    width: fit-content;
    list-style-type: none;
    /*margin: 0 auto 30px auto;*/
}

.ticket-note{
    margin-bottom: 30px;
}

.ticket-btn-container{
    width: 100%;
    background-color: #AE0B1B;
    border-radius: 2px;
    padding: 12px 35px;
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 0 auto;
}

/* コンタクト＆リスト */
/*#contact-links .program-heading{
    padding-left: 
}*/

#contact-links .contact{
    margin-bottom: 60px;
}

#contact-links .contact h3{
    font-size: 24px;
    margin-bottom: 20px;
}

/* SNSリスト */
#contact-links .sns-links-list{
    list-style-type: none;
    display: flex;
    gap: 20px;
}

#contact-links .sns-links{
    margin-bottom: 60px;
}

#contact-links .sns-links h3{
    font-size: 24px;
    margin-bottom: 20px;
}

#contact-links .sns-links p{
    margin-bottom: 20px;
}

#contact-links .sns-links .sns-links-list{
    margin-bottom: 10px;
    text-align: center;
}

#contact-links .sns-links .sns-links-list li img{
    margin-bottom: 10px;
}

/* ハッシュタグ */
#contact-links .hashtag h3{
    font-size: 24px;
    margin-bottom: 20px;
}

#contact-links .hashtag div{
    display: flex;
    gap: 20px;
}

/* h2のbrを有効に */
.program-details-br{
    display: inline-flex;
}

/***********************  【03】SPレイアウト下層ページ：劇場案内 ***********************/ 

/* SPでは非表示 */
.pc-east-hall,
.pc-west-hall{
    display: none;
}

#guide .heading-container{
    height: 300px;
    margin: 30px auto 50px auto;
    padding-top: 110px;
}

#guide .heading-container h1{
    font-size: 50px;
    line-height: 100%;
    margin: 0 3% 0 3%;
}

#guide .heading-container h1 span{
    font-size: 14px;
}

#guide .container .section-heading{
    font-size: 45px; 
    margin-bottom: 20px;
    text-align: center;
}

#guide .container .section-heading span{
    font-size: 14px;
    margin-left: 0;
}

#guide .container .section-heading br{
    display: flex;
}

/* h3（各施設名など） */
.guide-heading{
    font-size: 28px; /* h3はh2より小さくする */
    line-height: 90%;
    margin: 15px 0 5px 0;
}

.guide-heading span{
    font-size: 14px;
}

/* 全体幅と余白調整 */
#guide .container{
    padding: 0 3%;
}

/* 画像とテキストの順番統一 */
.guide-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 50px;
}

.ticket-guide-box{
    display: flex;
    flex-direction: column-reverse;
}

/* ホールの画像（entrance, bar, ticket, hall） */
.east-image{
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.west-image{
    width: 100%;
    height: auto;
    margin-bottom: 20px;
}

.west-box{
    flex-direction: column-reverse;
}

/* ホール名（EAST/WEST HALL）の位置リセット */

/* SPでは表示 */
.sp-east-hall,
.sp-west-hall{
    display: flex;
    margin-bottom: 20px;
}

/* h3 */
.hall-guide-heading{
    font-size: 28px; /* h3はh2より小さくする */
    line-height: 90%;
    margin: 15px 0 5px 0;
}

.hall-guide-heading span{
    font-size: 14px;
}

/* テキストブロック */
.entrance-text-box,
.bar-text-box,
.ticket-text-box,
.east-text-box,
.west-text-box {
    max-width: 100%;
    margin: 0 auto;
}

.east-text{
    margin-top: -10px;
    margin-bottom: 15px;
}

.west-text{
    margin-top: -10px;
    margin-bottom: 15px;
}

/* 座席表ボタン */
.seat-btn {
    width: auto;
    margin: 20px auto 0 auto;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
}

/* アクセシビリティ見出し */

.accessibility-section-heading{
    margin-bottom: 50px;
}

.accessibility-heading{
    font-size: 20px;
    margin-bottom: 15px;

}


/***********************  【04】SPレイアウト下層ページ：座席表 ***********************/

#seat .heading-container{
    height: 300px;
    margin: 30px auto 50px auto;
    padding-top: 110px;
    background-size: cover;
    background-position: center;
}

#seat .heading-container h1{
    font-size: 50px;
    line-height: 100%;
    margin: 0px 3%;
}

#seat .seating-chart div h2 span{
    margin-left: 0;
    margin-bottom: 20px;
    display: block;
}

.seat-br{
    display: flex;
}

.seating-chart > div{
    width: 90%;
    padding: 0 3%;
}

#east-seat div{
    margin: 0 auto;
}

#east-seat div h2,
#west-seat div h2{
    font-size: 36px;
    text-align: center;
}

#east-seat div span,
#west-seat div span{
    font-size: 16px;
    text-align: center;
}

/***********************  【05】SPレイアウト下層ページ：劇場について ***********************/

#lower-about .heading-container{
    height: 300px;
    margin: 30px auto 50px auto;
    padding-top: 110px;
    background-size: cover;
    background-position: center;
}

#lower-about .heading-container h1{
    font-size: 50px;
    line-height: 100%;
    margin: 0px 3%;
}

/* セクション見出し */
.about-box h2,
.concept-box h2{
    font-size: 48px;
    text-shadow: 1px 1px 2px #353535;
    text-align: center;
    margin-bottom: 30px;
}

.about-box h3,
.concept-box h3{
    font-size: 18px;
    text-shadow: 1px 1px 2px #353535;
    line-height: 160%;
    text-align: center;
    margin-bottom: 30px;
    padding: 0 10px;
}

/* ABOUT-01 */
.about-box{
    width: 100%;
    padding: 0 3%;
    margin: 0 auto;
}

/* ABOUTセクション背景調整 */
.about-01{
    height: auto;
    padding: 100px 0;
    background-size: cover;
    margin-bottom: 100px;
}

.about-text{
    width: 100%;
    padding: 5%;
    background-color: rgba(53, 53, 53, 0.7);
}

/* CONCEPT */
.concept-text{
    width: 100%;
}

.concept-box{
    width: 100%;
    height: auto;
    background-size: cover;
    padding: 100px 3%; 
    margin: 0 auto 100px auto;
}

.concept-image-box{
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 20px;
    margin-bottom: 50px;
}

.concept-image{
    margin-bottom: 30px;
}

.text-last{
    width: 100%;
    padding: 0 3%;
    margin: 0 auto 50px auto;
}

.image-last img{
    width: 100%;
    height: auto;
}



/***********************  【06】SPレイアウト下層ページ：よくある質問 ***********************/

#faq .heading-container{
    height: 300px;
    margin: 30px auto -20px auto; /* -20pxはアクセスとの高さ調整 */
    padding-top: 110px;
}

#faq .heading-container h1{
    font-size: 50px;
    line-height: 100%;
    margin: 0 3%;
}

dl{
    max-width: 768px;
    padding: 50px 2%;
}

#ticket form .submit-btn{
    width: 100%;    
}

/*********************** 【07】SPレイアウト下層ページ：チケット購入 ***********************/

#ticket{
    padding: 0;
}

#ticket .heading-container{
    height: 300px;
    margin: 30px auto 50px auto;
    padding-top: 110px;
    background-size: cover;
    background-position: center;
}

#ticket .heading-container h1 {
    font-size: 50px;
    line-height: 100%;
    margin: 0 3%;
}

.form-guide{
    width: 100%;
    padding: 0 5%;
}

#ticket form {
    width: 90%;
}

/*********************** 【08】SPレイアウト下層ページ：アクセス ***********************/

#access .heading-container{
    height: 300px;
    margin: 30px auto 50px auto;
    padding-top: 110px;
}

#access .heading-container h1{
    font-size: 50px;
    line-height: 100%;
    margin: 0 3%;
}

#access .container .map iframe{
    width: 100%;
    height: 250px;   
}


/*********************** 【09】SPレイアウト下層ページ：プライバシーポリシー ***********************/

#privacy .heading-container{
    height: 300px;
    padding-top: 110px;
    margin: 30px auto 200px auto;
}

#privacy .heading-container h1{
    font-size: 32px;
    line-height: 100%;
    margin: 0 3% 30px 3%;
}

.policy-explain{
    padding: 0 3%;
}

#privacy .container{
    padding: 0;
    margin-right: 1%; 
    margin-left: 1%;
}

#privacy .text-box{
    padding: 0 3%;
}
  
/***********************  【10】SPレイアウト下層ページ：利用規約 ***********************/

#terms .heading-container{
    height: 300px;
    margin: 30px auto 50px auto;
    padding-top: 110px;
}

#terms .heading-container h1{
    font-size: 32px;
}

#terms .heading-container p{
    padding: 0 5%;
}

#terms .container{
    padding: 20px 5%;
}

/***********************  【11】SPレイアウト下層ページ：特定商取引法 ***********************/

#legal .heading-container{
        height: 300px;
        margin: 30px auto 50px auto;
        padding-top: 110px;
}

#legal .heading-container h1{
    font-size: 32px;
    margin-right: 3%;
    margin-left: 3%;
}

#legal .heading-container p{
    padding: 0 5%;
}

#legal .container{
    padding: 20px 5%;
}

/***********************  【12】SPレイアウト下層ページ：お問い合わせ ***********************/

#contact .heading-container{
    height: 300px;
    margin: 30px auto 50px auto;
    padding: 110px 3% 0 3%;
}

#contact .heading-container h1{
    font-size: 50px;
}

#contact form button{
    width: 100%;
}

}