/* Scss Document */
body {
  background-color: #e9e6d9;
}

a {
  text-decoration: none;
}

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

#main a {
  color: #fff;
  text-decoration: none;
  border-bottom: #fff 2px dotted;
}

#movie {
  position: relative;
  width: 100%;
  padding-top: calc(9 / 16 * 100%);
  margin: 2% auto;
  overflow: hidden;
}

#movie .tvo-video {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
}

#movie2 {
  width: 89.3%;
  margin: 0 auto;
  margin-top: 2%;
}

.cast-info {
  display: block;
  width: 88%;
  margin: 1em auto;
  padding: 1em;
  background-color: white;
  border: none;
  box-shadow: 0px 2px 8px 0px rgba(99, 99, 99, 0.85);
  border-radius: 4px;
  color: #3882a1;
  font-size: 0.85rem;
  line-height: 1.8;
}

.scroll{
  overflow-y: scroll;
  height: 220px;
}

@media (max-width: 767px) {
  br.pconly {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1365px) {
  br.sponly {
    display: none;
  }
}

@media (min-width: 1366px) {
  br.sponly {
    display: none;
  }
}

/* header */
@media (max-width: 767px) {
  #header {
    background: url("../images/header_mobile@2x.jpg") no-repeat;
    width: 100%;
    height: 0;
    background-size: contain;
    font-size: 0em;
    padding-bottom: 100.5333333333%;
  }
}

@media (min-width: 768px) and (max-width: 1365px) {
  #header {
    background: url("../images/header_desktop.jpg") no-repeat;
    padding-bottom: 79.5572916667%;
    width: 100%;
    height: 0;
    background-size: contain;
    font-size: 0em;
  }
}

@media (min-width: 1366px) {
  #header {
    background: url("../images/header_desktop.jpg") no-repeat;
    width: 1366px;
    padding-bottom: 1082px;
    height: 0;
    margin: 0 auto;
    background-size: contain;
    font-size: 0em;
  }
}

@media (max-width: 767px) {
  #header_200815 {
    background: url("../images/header_mobile_220622@2x.jpg") no-repeat;
    width: 100%;
    height: 0;
    background-size: contain;
    font-size: 0em;
    padding-bottom: 100.5333333333%;
  }
}

#header_220810 {
  background: url("../../images/common/header_low_220622.jpg") no-repeat center center;
  background-size: auto;
  width: 100%;
  height: 0;
  background-size: contain;
  font-size: 0em;
  margin-left: auto;
  margin-right: auto;
  max-width: 1366px;
  padding-bottom: 49.25%;
}

@media (max-width: 767px) {}

@media (min-width: 768px) and (max-width: 1365px) {
  #header_200815 {
    background: url("../images/header_desktop_220622.jpg") no-repeat;
    padding-bottom: 79.5572916667%;
    width: 100%;
    height: 0;
    background-size: contain;
    font-size: 0em;
  }
}

@media (min-width: 1366px) {
  #header_200815 {
    background: url("../images/header_desktop_220622.jpg") no-repeat;
    width: 1366px;
    padding-bottom: 1082px;
    height: 0;
    margin: 0 auto;
    background-size: contain;
    font-size: 0em;
  }
}

/* main */
#main {
  font-size: 0.9rem;
  line-height: 175%;
  font-family: 'Noto Sans JP', sans-serif;
  color: #fff;
}

.top_bnr {
  background-color: #3882a1;
  width: 100%;
  margin: 0 auto;
  padding: 2% 0;
  text-align: center;
  color: #fff;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 1.2rem;
  line-height: 150%;
}

@media (min-width: 768px) and (max-width: 1365px) {
  #main {
    font-size: 1.1rem;
    line-height: 200%;
  }

  #movie {
    position: relative;
    width: 65%;
    padding-top: calc(9 / 16 * 65%);
    margin: 0 auto;
    margin-top: 2%;
    overflow: hidden;
  }

  #movie {
    position: relative;
    width: 65%;
    padding-top: calc(9 / 16 * 65%);
    margin: 2% auto;
    overflow: hidden;
  }

  #movie2 {
    width: 65%;
    margin: 0 auto;
    margin-top: 2%;
  }

  .top_bnr br {
    display: none;
  }
}

@media (min-width: 1366px) {
  #main {
    font-size: 1.1rem;
    line-height: 200%;
  }

  #movie {
    position: relative;
    width: 50%;
    padding-top: calc(9 / 16 * 50%);
    margin: 0 auto;
    margin-top: 2%;
    overflow: hidden;
  }

  #movie2 {
    width: 50%;
    margin: 0 auto;
    margin-top: 2%;
  }

  .top_bnr br {
    display: none;
  }
}

.wf-sawarabi {
  font-family: 'Sawarabi Mincho', sans-serif;
}

#location,
#about,
#cast,
#instagram,
#more {
  background-color: #3882a1;
  width: 94.6666666667%;
  padding: 2.6666666667% 5.3333333333%;
  margin: 3% auto;
  border-radius: 5px;
}

@media (min-width: 1366px) {

  #location,
  #about,
  #cast,
  #instagram,
  #more {
    width: 1366px;
  }
}

#location h1,
#about h1,
#cast h1,
#instagram h1,
#more h1 {
  margin: 0.5rem 0;
  padding-bottom: 0.5rem;
  font-family: 'Sawarabi Mincho', 'Noto Serif JP', sans-serif;
  text-align: center;
  /*color: #ECE038;*/
  color: #E9E6D9;
}

@media (max-width: 767px) {

  #location h1,
  #about h1,
  #cast h1,
  #instagram h1,
  #more h1 {
    font-size: 1.3rem;
  }
}

#location h2,
#instagram h2,
#about h2,
#about h3 {
  margin-top: 0.5rem;
  font-family: 'Sawarabi Mincho', sans-serif;
  /*color: #ECE038;*/
  color: #E9E6D9;
}

@media (max-width: 767px) {

  #location h2,
  #instagram h2,
  #about h2,
  #about h3 {
    text-align: left;
    font-size: 1.0rem;
  }
}

@media (min-width: 768px) {

  #location h2,
  #instagram h2,
  #about h2,
  #about h3 {
    text-align: center;
    font-size: 1.4rem;
  }
}

@media (min-width: 1366px) {

  #cast dl,
  #more dl {
    width: 1100px;
    margin: 0 auto;
    padding: 40px;
    font-size: 1.2rem;
    line-height: 175%;
    text-align: left;
    color: #fff;
  }

  #cast dt,
  #more dt {
    width: 35%;
    margin-top: 4%;
    margin-right: 2%;
    float: left;
    clear: both;
  }

  #cast dt:nth-child(2),
  #more dt:nth-child(2) {
    margin-top: 2rem;
  }

  #cast dd.comment,
  #more dd.comment {
    margin-top: 3%;
    width: 63%;
    float: left;
  }
}

@media (min-width: 768px) and (max-width: 1365px) {

  #cast dl,
  #more dl {
    width: 94%;
    margin: 0 auto;
    padding: 0 3%;
    font-size: 1rem;
    line-height: 175%;
    color: #fff;
  }

  #cast dt,
  #more dt {
    width: 35%;
    margin-top: 3%;
    margin-right: 2%;
    float: left;
    clear: both;
  }

  #cast dd.comment,
  #more dd.comment {
    width: 60%;
    margin-top: 5%;
    float: left;
  }
}

@media (max-width: 767px) {

  #cast dl,
  #more dl {
    width: 92%;
    margin: 0 auto;
    margin-bottom: 10%;
    padding: 0 4%;
    font-size: 1rem;
    line-height: 175%;
    color: #fff;
  }

  #cast dt,
  #more dt {
    width: 75%;
    margin: 0 auto;
  }

  #cast dd.comment,
  #more dd.comment {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: #263350 4px dotted;
  }
}

#cast1 {
  background-color: #3882a1;
  width: 94.6666666667%;
  padding: 2.6666666667% 5.3333333333%;
  margin: 3% auto;
  border-radius: 5px;
}

@media (min-width: 1366px) {
  #cast1 {
    width: 1366px;
  }
}

#cast1 h1 {
  margin: 0.5rem 0;
  padding-bottom: 0.5rem;
  font-family: 'Sawarabi Mincho', sans-serif;
  text-align: center;
  /*color: #ECE038;*/
  color: #E9E6D9;
}

@media (max-width: 767px) {
  #cast1 h1 {
    font-size: 1.3rem;
  }
}

#cast1 h2,
#cast1 h3 {
  margin-top: 0.5rem;
  font-family: 'Sawarabi Mincho', sans-serif;
  /*color: #ECE038;*/
  color: #E9E6D9;
}

@media (max-width: 767px) {

  #cast1 h2,
  #cast1 h3 {
    text-align: left;
    font-size: 1.0rem;
  }
}

@media (min-width: 768px) {

  #cast1 h2,
  #cast1 h3 {
    text-align: center;
    font-size: 1.4rem;
  }
}

#cast2 {
  background-color: #3882a1;
  width: 94.6666666667%;
  padding: 2.6666666667% 5.3333333333%;
  margin: 3% auto;
  border-radius: 5px;
}

@media (min-width: 1366px) {
  #cast2 {
    width: 1366px;
  }
}

#cast2 h1 {
  margin: 0.5rem 0;
  padding-bottom: 0.5rem;
  font-family: 'Sawarabi Mincho', sans-serif;
  text-align: center;
  /*color: #ECE038;*/
  color: #E9E6D9;
}

@media (max-width: 767px) {
  #cast2 h1 {
    font-size: 1.3rem;
  }
}

#cast2 h2,
#cast2 h3 {
  margin-top: 0.5rem;
  font-family: 'Sawarabi Mincho', sans-serif;
  /*color: #ECE038;*/
  color: #E9E6D9;
}

@media (max-width: 767px) {

  #cast2 h2,
  #cast2 h3 {
    text-align: left;
    font-size: 1.0rem;
  }
}

@media (min-width: 768px) {

  #cast2 h2,
  #cast2 h3 {
    text-align: center;
    font-size: 1.4rem;
  }
}

#story {
  background-color: #3882a1;
  width: 94.6666666667%;
  padding: 2.6666666667% 5.3333333333%;
  margin: 3% auto;
  border-radius: 5px;
}

@media (min-width: 1366px) {
  #story {
    width: 1366px;
  }
}

#story h1 {
  margin: 0.5rem 0;
  padding-bottom: 0.5rem;
  font-family: 'Sawarabi Mincho', sans-serif;
  text-align: center;
  /*color: #ECE038;*/
  color: #E9E6D9;
}

@media (max-width: 767px) {
  #story h1 {
    font-size: 1.3rem;
  }
}

#story h2,
#story h3 {
  margin-top: 0.5rem;
  font-family: 'Sawarabi Mincho', sans-serif;
  /*color: #ECE038;*/
  color: #E9E6D9;
}

@media (max-width: 767px) {

  #story h2,
  #story h3 {
    text-align: left;
    font-size: 1.0rem;
  }
}

@media (min-width: 768px) {

  #story h2,
  #story h3 {
    text-align: center;
    font-size: 1.4rem;
  }
}

#overviews {
  background-color: #3882a1;
  width: 94.6666666667%;
  padding: 2.6666666667% 5.3333333333%;
  margin: 3% auto;
  border-radius: 5px;
}

@media (min-width: 1366px) {
  #overviews {
    width: 1366px;
  }
}

#overviews h1 {
  margin: 0.5rem 0;
  padding-bottom: 0.5rem;
  font-family: 'Sawarabi Mincho', sans-serif;
  text-align: center;
  /*color: #ECE038;*/
  color: #E9E6D9;
}

@media (max-width: 767px) {
  #overviews h1 {
    font-size: 1.3rem;
  }
}

#overviews h2,
#overviews h3 {
  margin-top: 0.5rem;
  font-family: 'Sawarabi Mincho', sans-serif;
  /*color: #ECE038;*/
  color: #E9E6D9;
}

@media (max-width: 767px) {

  #overviews h2,
  #overviews h3 {
    text-align: left;
    font-size: 1.0rem;
  }
}

@media (min-width: 768px) {

  #overviews h2,
  #overviews h3 {
    text-align: center;
    font-size: 1.4rem;
  }
}

#news {
  background-color: #3882a1;
  width: 94.6666666667%;
  padding: 2.6666666667% 5.3333333333%;
  margin: 3% auto;
  border-radius: 5px;
}

@media (min-width: 1366px) {
  #news {
    width: 1366px;
  }
}

#news h1 {
  margin: 0.5rem 0;
  padding-bottom: 0.5rem;
  font-family: 'Sawarabi Mincho', sans-serif;
  text-align: center;
  /*color: #ECE038;*/
  color: #E9E6D9;
}

@media (max-width: 767px) {
  #news h1 {
    font-size: 1.3rem;
  }
}

#news h2,
#news h3 {
  margin-top: 0.5rem;
  font-family: 'Sawarabi Mincho', sans-serif;
  /*color: #ECE038;*/
  color: #E9E6D9;
}

@media (max-width: 767px) {

  #news h2,
  #news h3 {
    text-align: left;
    font-size: 1.0rem;
  }
}

@media (min-width: 768px) {

  #news h2,
  #news h3 {
    text-align: center;
    font-size: 1.4rem;
  }
}

.bnr {
  width: 94.6666666667%;
  margin: 0 auto;
  padding: 2px;
  border: #3882a1 1px solid;
}

@media (min-width: 1366px) {
  .bnr {
    width: 1366px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1365px) {
  ul#location {
    display: flex;
    flex-wrap: wrap;
  }

  #location li {
    width: 48%;
    margin: 1%;
    text-align: center;
  }
}

@media (min-width: 1366px) {
  ul#location {
    display: flex;
    flex-wrap: wrap;
  }

  #location li {
    width: 31%;
    margin: 1%;
    text-align: center;
  }
}

#location li img {
  padding: 1px;
  border: #fff 1px solid;
  margin-bottom: 1rem;
}

#cast1,
#cast2 {
  text-align: center;
}

#cast1 dl,
#cast2 dl {
  margin-bottom: 2rem;
}

#cast1 .emphasis,
#cast2 .emphasis {
  font-weight: 700;
  /*color:#ffb5b5;*/
  color: #E9E6D9;
  font-size: 1.3rem;
  line-height: 175%;
}

@media (max-width: 767px) {
  #cast2 {
    display: none;
  }
}

@media (min-width: 768px) {
  #cast1 {
    display: none;
  }

  #cast2 div {
    display: flex;
    flex-wrap: wrap;
  }

  #cast2 dl {
    width: 46%;
    margin: 2%;
  }
}

#overviews dt {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  /*color: #ECE038;*/
  color: #E9E6D9;
  font-weight: 700;
}

@media (max-width: 767px) {
  #overviews dt {
    text-align: left;
  }
}

@media (min-width: 768px) {
  #overviews dt {
    text-align: center;
  }
}

@media (max-width: 767px) {
  #overviews dd {
    text-align: left;
  }
}

@media (min-width: 768px) {
  #overviews dd {
    text-align: center;
  }
}

#overviews .emphasis {
  margin-top: 0.5rem;
  font-weight: 700;
}

@media (max-width: 767px) {
  #overviews .emphasis {
    font-size: 1.1rem;
  }
}

@media (min-width: 768px) {
  #overviews .emphasis {
    font-size: 1.3rem;
  }
  #overviews dd + .emphasis {
    margin-top: 1.2rem;
  }
}

#overviews .caution {
  font-size: 0.8rem;
  line-height: 150%;
  padding-left: 1em;
  text-indent: -1em;
}

@media (max-width: 767px) {
  #overviews .caution {
    text-align: left;
  }
}

#overviews .book {
  text-align: center;
}

@media (min-width: 768px) {
  #overviews .net {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  #overviews .net dd {
    /*width: 23%;*/
    margin: 2% 0;
  }

  #overviews .book {
    width: 50%;
    margin: 0 auto;
  }
}


.movie {}

.movie_trailer {
  background-color: #fafbe9;
  box-shadow: 0 0 16px rgba(0, 0, 0, 0.22);
  margin-left: 12px;
  margin-right: 12px;
  padding: 12px;

}

.movie_trailer_in {
  position: relative;
  width: 100%;
}

.movie_trailer_in::before {
  content: "";
  display: block;
  padding-top: calc(100% / (16/9));
}

.movie_trailer_in>* {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.tvo-video {
  height: 100%;
  width: 100%;
}

.bc-player-default_default {
  font-size: 14px;
}

.vjs-social-overlay {
  font-size: 10px;
}


.overviews_dl {
  max-width: 800px;
  margin: auto;
}

#overviews .overviews_dl dt,
#overviews .overviews_dl dd {
  text-align: left;
}

.overviews_box {
  align-items: center;
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, .3);
  margin-top: 20px;
  padding: 20px;
}

.overviews_img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 240px;
}

.episode_img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.episode_spot_box {
  /*margin-top: 40px;*/
}

.episode_spot_photo {
  display: grid;
  gap: 12px;
  grid-template-rows: repeat(1, 1fr);
  margin-top: 10px;
}

.episode_spot_name {
  display: block;
  font-size: 24px;
  font-weight: bold;
}

.episode_spot:only-of-type .episode_spot_name {
  text-align: center;
}

.cast_title {
  color: #4E889C;
  font-family: 'Sawarabi Mincho', 'Noto Serif JP', sans-serif;
  margin-top: 3%;
  text-align: center;
}

.cast_name {
  font-size: 1.4rem;
  font-family: 'Sawarabi Mincho', sans-serif;
}

.interview {
  margin-top: 40px;
  text-align: center;
}


.news_dl_dl{
  margin: 12px 0;
}

.news_dl_dl dt{
  color: #fff;
  font-weight: 700;
  margin-top: 12px;
}
.news_dl_dl dd{
}



@media (min-width: 768px) {
  .overviews_box {
    display: flex;
    gap: 20px;
  }

  .episode_spot_box {
    display: flex;
    gap: 2%;
  }

  .episode_spot {
    width: 49%;
  }

  .episode_spot_photo {
    align-items: start;
    gap: 12px;
    grid-template-columns: 50% 1fr;
    grid-template-rows: repeat(3, 1fr);
    justify-items: center;
  }

  .episode_spot:only-of-type {
    margin-left: auto;
    margin-right: auto;
    width: 75%;
  }



  .episode_spot_photo>* {
    height: 100%;
    object-fit: cover;
  }

  .episode_spot_photo>*:nth-child(1) {
    grid-column: 1/2;
    grid-row: 1/4;
  }

  .episode_spot_photo>*:nth-child(2) {
    grid-column: 2/3;
    grid-row: 1/2;
  }

  .episode_spot_photo>*:nth-child(3) {
    grid-column: 2/3;
    grid-row: 2/3;
  }

  .episode_spot_photo>*:nth-child(4) {
    grid-column: 2/3;
    grid-row: 3/4;
  }

  .episode_spot_photo>*:only-child {
    grid-column: 1/3;
    grid-row: 1/4;
    height: 100%;
    object-fit: cover;
  }

  .episode_spot_photo>span:not([class]) {
    background-color: rgba(128, 128, 128, .15);
    height: 100%;
    width: 100%;
  }

  .episode_spot {
    grid-template-columns: repeat(2, 1fr);
  }

  #cast dl.cast_comment_box {
    display: flex;
    padding: 0;
    margin: 0;
    width: 100%;
  }

  #cast .cast_name_box {
    display: block;
    text-align: left;
    margin-bottom: 0;
  }

  #cast .cast_comment_image {
    width: 25%;
  }

  #cast .cast_comment_content {
    width: 75%;
  }

  #cast .cast_comment_image {
    margin-top: 0;
  }


  .news_dl_dl {
    display: flex;
    flex-wrap: wrap;
    margin-left: auto;
    margin-right: auto;
    max-width: 35rem;
  }

  .news_dl_dl dt {
    width: 10rem;
  }

  .news_dl_dl dd {
    margin-top: 12px;
    width: 25rem;
  }

}