@charset 'utf-8';

/* 下層共通
--------------------------------------- */
#header{position:fixed;}
#header .banner{font-size:36px;}
#main{padding-top:20px;}
.inner{width:1000px;margin:auto;}
@media screen and (max-width:750px){
  #header .banner{font-size:40px;padding-top:30px;}
  #main{padding-top:40px;}
  .inner{width:690px;}
}

.close{
  position:absolute;
  top:0px;
  right:0px;
  display:flex;
  justify-content:center;
  align-items:center;
  width:80px;
  height:80px;
  cursor:pointer;
}
.close a{
  display:block;
  width:48px;
  height:6px;
  background:#cfb659;
  position:relative;
  transform:rotate(45deg);
}
.close a::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:inherit;
  transform:rotate(90deg);
}
.return{margin:90px 0 0;text-align:center;}
.return a{
  padding:8px 80px;
  color:#fff;
  font-weight:600;
  background-color:#0304aa;
  border:1px solid #0304aa;
  transition:color 300ms,background-color 300ms;
}
.return a:hover{color:#0304aa;background-color:#fff;}
@media screen and (max-width:750px){
  .close{top:10px;}
  .return{margin-top:110px;}
  .return a{transition:none;}
  .return a:hover{color:#fff;background-color:#0304aa;}
}

/* 公演 */
#tickets .box-link p{
  word-wrap:break-word;
  white-space:normal;
  line-height:1.5;
}
#tickets .box-link p .url{}
#ticket{margin-top:-90px;padding-top:90px;}
@media screen and (max-width:750px){
  #ticket{margin-top:0;padding-top:0;}
}

/*  */
#tickets .box-link table{
  font-size:24px;
  font-weight:600;
  line-height:1.5;
}
#tickets .box-link table th,
#tickets .box-link table td{
  padding:20px 0;
  border-bottom:1px solid #d9dada;
}
#tickets .box-link table tr:first-of-type th,
#tickets .box-link table tr:first-of-type td{
  padding-top:0;
}
#tickets .box-link table tr:last-of-type th,
#tickets .box-link table tr:last-of-type td{
  padding-bottom:0;
  border-bottom-width:0;
}
#tickets .box-link table th{width:14%;}
#tickets .box-link table td{width:86%;}
#tickets .box-link table ul{
  line-height:1.2;
/*
  padding-left:1.0em;
  text-indent:-1.0em;*/
  word-wrap:break-word;
  white-space:normal;
}
#tickets .box-link table ul li{margin-bottom:0.8em;}
#tickets .box-link table ul li.osk-eplus{
  padding-left:6em;
  text-indent:-6em;
}
#tickets .box-link table p{
  margin-bottom:0;
  padding-bottom:0;
  border-bottom-width:0;
}
#tickets .box-link table a{/*
  text-decoration:underline;*/
  transition:opacity 300ms;
}
#tickets .box-link table a:hover{
  opacity:0.7;
}
@media screen and (max-width:750px){
  #tickets .box-link table{
    display:block;
    font-size:36px;
  }
  #tickets .box-link table th,
  #tickets .box-link table td{
    display:block;
    width:100%;
  }
  #tickets .box-link table td{width:630px;}
  #tickets .box-link table th{border-bottom-width:0;}
  #tickets .box-link table ul li.osk-eplus{
    padding-left:0;
    text-indent:0;
  }
  #tickets .box-link table a{transition:none;}
  #tickets .box-link table a:hover{opacity:1;}
}


/* プロデューサーインタビュー
--------------------------------------- */
#main.interview{background-color:#f4f0ec;}

/* lead */
.interview .lead{margin-bottom:90px;}
.interview .lead .h3{
  margin-bottom:40px;
  font-size:32px;
  font-weight:600;
  color:#b00c04;
  line-height:1.5 !important;
  text-align:center;
}
.interview .lead .h4{
  margin-bottom:20px;
  font-size:21px;
  font-weight:600;
  line-height:1.5 !important;
  text-align:center;
}
.interview .lead .txt{
  width:920px;
  margin:auto;
}
@media screen and (max-width:750px){
  .interview .lead .h3{font-size:36px;}
  .interview .lead .h4{font-size:34px;text-align:left;}
  .interview .lead .txt{width:100%;}
}

/* faq */
.interview .faq{margin-bottom:90px;}
.interview .faq .h3{
  margin-bottom:40px;
  font-size:28px;
  font-weight:600;
  line-height:1.5 !important;
  text-align:center;
}
.interview .faq .box-q,
.interview .faq .box-a{
  position:relative;
  display:flex;
  padding:30px;
  background-color:#fff;
  border:1px solid #000;
  border-radius:5px;
  justify-content:start;
  align-items:center;
}
.interview .faq .box-q{
  min-height:60px;
  margin-bottom:20px;
  color:#b00c04;
}
.interview .faq .box-a{
  min-height:100px;
  margin-bottom:40px;
}
.interview .faq .box-q.box-l{
  float:left;
  width:640px;
  margin-left:20px;
}
.interview .faq .box-q.box-r{
  float:right;
  width:640px;
  margin-right:20px;
}
.interview .faq .box-a.box-l{
  float:left;
  width:980px;
  margin-left:20px;
}
.interview .faq .box-a.box-r{
  float:right;
  width:980px;
  margin-right:20px;
}

/* faq - 吹き出し */
.interview .faq .box-a:before{
  content:'';
  position:absolute;
  top:-31px;
  margin-left:-15px;
  border:16px solid transparent;
  border-bottom:16px solid #fff;
  z-index:2;
}
.interview .faq .box-a:after{
  content:'';
  position:absolute;
  top:-32px;
  margin-left:-15px;
  border:16px solid transparent;
  border-bottom:16px solid #000;
  z-index:1;
}
.interview .faq .box-a.box-l:before,
.interview .faq .box-a.box-l:after{left:10%;}
.interview .faq .box-a.box-r:before,
.interview .faq .box-a.box-r:after{right:10%;}

/* faq - タイトル背景 */
.interview .faq .box-q .h4,
.interview .faq .box-a .h4{
  position:absolute;
  top:20px;
  font-family:'Roboto',sans-serif;
  font-weight:600;
  color:#fff;
  z-index:1;
}
.interview .faq .box-q .h4{
  width:64px;
  height:59px;
  padding-top:18px;
  padding-left:13px;
  background:url(../images/title_r.svg) 0 0 no-repeat;
}
.interview .faq .box-a .h4{
  width:44px;
  height:100px;
  padding-top:68px;
  text-align:center;
  background:url(../images/banner.svg) 0 0 no-repeat;
}
.interview .faq .box-q.box-l .h4{left:-32px;}
.interview .faq .box-q.box-r .h4{right:-32px;}
.interview .faq .box-a.box-l .h4{left:-22px;}
.interview .faq .box-a.box-r .h4{right:-22px;}
@media screen and (max-width:750px){
  .interview .faq .h3{
    font-size:34px;
    text-align:left;
    padding-left:1.0em;
    text-indent:-1.0em;
    white-space:nowrap;
  }
  .interview .faq .box-q,
  .interview .faq .box-a{padding:30px;}
  .interview .faq .box-q{
    min-height:110px;
    margin-bottom:30px;
  }
  .interview .faq .box-a{
    min-height:167px;
    margin-bottom:70px;
  }
  .interview .faq .box-q.box-l{
    width:650px;
    margin-left:40px;
    padding-left:50px;
  }
  .interview .faq .box-q.box-r{
    width:650px;
    margin-right:40px;
    padding-right:50px;
  }
  .interview .faq .box-a.box-l{
    width:650px;
    margin-left:40px;
    padding-left:50px;
  }
  .interview .faq .box-a.box-r{
    width:650px;
    margin-right:40px;
    padding-right:50px;
  }

  .interview .faq .box-q .h4{
    top:-40px;
    width:120px;
    height:110px;
    padding-top:32px;
    padding-left:24px;
    font-size:30px;
  }
  .interview .faq .box-a .h4{
    top:-20px;
    width:72px;
    height:167px;
    padding-top:120px;
    font-size:30px;
  }
  .interview .faq .box-q.box-l .h4{left:-60px;}
  .interview .faq .box-q.box-r .h4{right:-70px;}
  .interview .faq .box-a.box-l .h4{left:-40px;}
  .interview .faq .box-a.box-r .h4{right:-40px;}
}

/* プロフ */
.interview .casts .prof .dtl .txt a:hover{text-decoration:underline;}
@media screen and (max-width:750px){
  .interview .casts .prof .dtl .txt{text-align:start;}
  .interview .casts .prof .dtl .txt a:hover{text-decoration:none;}
}