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

#movie {
  position: relative; }
  @media (max-width: 767px) {
    #movie {
      width: 90%;
      padding-top: calc(9 / 16 * 90%);
      margin: 0 auto;
      margin-bottom: 1rem;
      overflow: hidden; } }
  @media (min-width: 768px) and (max-width: 1365px) {
    #movie {
      width: 65%;
      padding-top: calc(9 / 16 * 65%);
      margin: 0 auto;
      margin-bottom: 1rem;
      overflow: hidden; } }
  @media (min-width: 1366px) {
    #movie {
      width: 640px;
      height: 360px;
      margin: 1rem auto; } }

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

#header {
  font-family: 'Noto Sans JP', sans-serif;
  color: #fff;
  /*background-color: #fff;*/ }
  @media (max-width: 767px) {
    #header div.header {
      background: url("../images/top_smp.jpg") no-repeat;
      width: 100%;
      height: 0;
      padding-bottom: 150%;
      background-size: contain; } }
  @media (min-width: 768px) and (max-width: 1365px) {
    #header div.header {
      background: url("../images/top_desktop.jpg") no-repeat;
      width: 100%;
      height: 0;
      padding-bottom: 62.2254758419%;
      background-size: contain; } }
  @media (min-width: 1366px) {
    #header div.header {
      background: url("../images/top_desktop.jpg") no-repeat;
      width: 1366px;
      height: 850px;
      margin: 0 auto; } }
  #header h1 {
    position: relative;
    font-size: 0rem; }
    @media (max-width: 767px) {
      #header h1 {
        width: 60%;
        background-size: contain;
        margin: 0 auto;
        margin-top: -80%; } }
    @media (min-width: 768px) and (max-width: 1365px) {
      #header h1 {
        width: 50%;
        background-size: contain;
        margin: 0 auto;
        margin-top: -27.5%; } }
    @media (min-width: 1366px) {
      #header h1 {
        width: 50%;
        background-size: contain;
        margin: 0 auto;
        margin-top: -27.5%; } }
  #header h2 {
    text-align: center;
    font-weight: 700; }
    @media (max-width: 767px) {
      #header h2 {
        margin-top: 5%;
        font-size: 1.5rem;
        line-height: 150%; }
        #header h2 span {
          font-size: 2.3rem; } }
    @media (min-width: 768px) and (max-width: 1365px) {
      #header h2 {
        margin-top: 3%;
        font-size: 2.4rem;
        line-height: 150%; }
        #header h2 span {
          font-size: 4rem; }
        #header h2 br {
          display: none; } }
    @media (min-width: 1366px) {
      #header h2 {
        margin-top: 50px;
        font-size: 2.4rem;
        line-height: 150%; }
        #header h2 span {
          font-size: 4rem; }
        #header h2 br {
          display: none; } }
  #header h3 {
    text-align: center;
    font-weight: 700;
    padding-bottom: 1rem; }
    @media (max-width: 767px) {
      #header h3 {
        margin: 0.9rem 0;
        font-size: 1.1rem;
        line-height: 150%; }
        #header h3 span {
          font-size: 0.8rem; } }
    @media (min-width: 768px) {
      #header h3 {
        margin: 1rem 0;
        font-size: 1.4rem;
        line-height: 150%; }
        #header h3 span {
          font-size: 0.9rem; }
        #header h3 br {
          display: none; } }

#main {
  font-family: 'Noto Sans JP', sans-serif;
  /*color:#0047AB;*/
  color: #fff;
  font-weight: 100; }
  #main a {
    text-decoration: none;
    /*color:#d07390;
    border-bottom: 2px dotted #d07390;
    padding-bottom: 3px;*/ }
  @media (max-width: 767px) {
    #main {
      width: 94.6666666667%;
      margin: 0 auto; } }
  @media (min-width: 768px) and (max-width: 1365px) {
    #main {
      width: 88.5416666667%;
      margin: 0 auto; } }
  @media (min-width: 1366px) {
    #main {
      width: 1366px;
      margin: 0 auto; } }

#overviews {
  /*background-color:rgba(255,248,248,0.7);*/
  background-color: #66ccbf;
  margin-bottom: 2rem;
  border-radius: 5px;
  /*border: 2px solid rgba(200,175,80,0.5);*/ }
  @media (max-width: 767px) {
    #overviews {
      width: 100%;
      padding: 1rem;
      font-size: 0.9rem;
      line-height: 175%;
      text-align: center; } }
  @media (min-width: 768px) and (max-width: 1365px) {
    #overviews {
      width: 100%;
      padding: 2.6041666667% 5.2083333333%;
      font-size: 1.1rem;
      line-height: 175%;
      text-align: center; } }
  @media (min-width: 1366px) {
    #overviews {
      width: 1366px;
      margin: 0 auto;
      margin-bottom: 2rem;
      padding: 2rem 139px;
      font-size: 1.1rem;
      line-height: 175%;
      text-align: center; } }
  #overviews h1 {
    /*color:#A28800;*/
    color: #246055;
    font-family: 'Sawarabi Mincho', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 0.75rem; }
    @media (min-width: 768px) {
      #overviews h1 {
        font-size: 1.4rem; } }

#intro {
  /*background-color:rgba(255,248,248,0.7);*/
  background-color: #66ccbf;
  margin-bottom: 2rem;
  border-radius: 5px;
  /*border: 2px solid rgba(200,175,80,0.5);*/ }
  @media (max-width: 767px) {
    #intro {
      width: 100%;
      padding: 1rem;
      font-size: 0.9rem;
      line-height: 175%;
      text-align: center; } }
  @media (min-width: 768px) and (max-width: 1365px) {
    #intro {
      width: 100%;
      padding: 2.6041666667% 5.2083333333%;
      font-size: 1.1rem;
      line-height: 175%;
      text-align: center; } }
  @media (min-width: 1366px) {
    #intro {
      width: 1366px;
      margin: 0 auto;
      margin-bottom: 2rem;
      padding: 2rem 139px;
      font-size: 1.1rem;
      line-height: 175%;
      text-align: center; } }
  #intro h1 {
    /*color:#A28800;*/
    color: #246055;
    font-family: 'Sawarabi Mincho', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 0.75rem; }
    @media (min-width: 768px) {
      #intro h1 {
        font-size: 1.4rem; } }

#cast {
  /*background-color:rgba(255,248,248,0.7);*/
  background-color: #66ccbf;
  margin-bottom: 2rem;
  border-radius: 5px;
  /*border: 2px solid rgba(200,175,80,0.5);*/ }
  @media (max-width: 767px) {
    #cast {
      width: 100%;
      padding: 1rem;
      font-size: 0.9rem;
      line-height: 175%;
      text-align: center; } }
  @media (min-width: 768px) and (max-width: 1365px) {
    #cast {
      width: 100%;
      padding: 2.6041666667% 5.2083333333%;
      font-size: 1.1rem;
      line-height: 175%;
      text-align: center; } }
  @media (min-width: 1366px) {
    #cast {
      width: 1366px;
      margin: 0 auto;
      margin-bottom: 2rem;
      padding: 2rem 139px;
      font-size: 1.1rem;
      line-height: 175%;
      text-align: center; } }
  #cast h1 {
    /*color:#A28800;*/
    color: #246055;
    font-family: 'Sawarabi Mincho', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 0.75rem; }
    @media (min-width: 768px) {
      #cast h1 {
        font-size: 1.4rem; } }

#story {
  /*background-color:rgba(255,248,248,0.7);*/
  background-color: #66ccbf;
  margin-bottom: 2rem;
  border-radius: 5px;
  /*border: 2px solid rgba(200,175,80,0.5);*/ }
  @media (max-width: 767px) {
    #story {
      width: 100%;
      padding: 1rem;
      font-size: 0.9rem;
      line-height: 175%;
      text-align: center; } }
  @media (min-width: 768px) and (max-width: 1365px) {
    #story {
      width: 100%;
      padding: 2.6041666667% 5.2083333333%;
      font-size: 1.1rem;
      line-height: 175%;
      text-align: center; } }
  @media (min-width: 1366px) {
    #story {
      width: 1366px;
      margin: 0 auto;
      margin-bottom: 2rem;
      padding: 2rem 139px;
      font-size: 1.1rem;
      line-height: 175%;
      text-align: center; } }
  #story h1 {
    /*color:#A28800;*/
    color: #246055;
    font-family: 'Sawarabi Mincho', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 0.75rem; }
    @media (min-width: 768px) {
      #story h1 {
        font-size: 1.4rem; } }

#news {
  /*background-color:rgba(255,248,248,0.7);*/
  background-color: #66ccbf;
  margin-bottom: 2rem;
  border-radius: 5px;
  /*border: 2px solid rgba(200,175,80,0.5);*/ }
  @media (max-width: 767px) {
    #news {
      width: 100%;
      padding: 1rem;
      font-size: 0.9rem;
      line-height: 175%;
      text-align: center; } }
  @media (min-width: 768px) and (max-width: 1365px) {
    #news {
      width: 100%;
      padding: 2.6041666667% 5.2083333333%;
      font-size: 1.1rem;
      line-height: 175%;
      text-align: center; } }
  @media (min-width: 1366px) {
    #news {
      width: 1366px;
      margin: 0 auto;
      margin-bottom: 2rem;
      padding: 2rem 139px;
      font-size: 1.1rem;
      line-height: 175%;
      text-align: center; } }
  #news h1 {
    /*color:#A28800;*/
    color: #246055;
    font-family: 'Sawarabi Mincho', sans-serif;
    font-size: 1.1rem;
    margin-bottom: 0.75rem; }
    @media (min-width: 768px) {
      #news h1 {
        font-size: 1.4rem; } }

.bnr {
  width: 94.6666666667%;
  margin: 0 auto 1rem;
  padding: 2px;
  border: #66ccbf 1px solid; }
  @media (min-width: 1366px) {
    .bnr {
      width: 1366px; } }

#intro p, #story p {
  text-align: left; }
  @media (max-width: 767px) {
    #intro p br, #story p br {
      display: none; } }

#cast dd {
  font-size: 0.9rem;
  line-height: 175%; }
@media (max-width: 767px) {
  #cast dl {
    margin-bottom: 2rem; }
  #cast dt img {
    width: 75%; }
  #cast div img {
    width: 75%; } }
@media (min-width: 768px) {
  #cast dl {
    margin: 0 auto;
    margin-bottom: 2rem; }
    #cast dl dt img {
      width: 60%; }
  #cast div {
    display: flex;
    flex-wrap: wrap; }
    #cast div dl {
      width: 35%;
      margin: 0 auto;
      margin-bottom: 2rem; }
      #cast div dl dt img {
        width: 100%; } }

#overviews dl {
  margin: 1rem 0; }
#overviews dt {
  /*color:#A28800;*/
  color: #246055;
  margin-top: 1rem;
  font-weight: 700; }
@media (min-width: 768px) {
  #overviews .net {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; }
  #overviews .net dd {
    width: 40%;
    margin: 2% 0; }
  #overviews .book {
    width: 50%;
    margin: 0 auto; } }

#tver img {
  width: 100%;
  margin: 1rem auto; }
  @media (min-width: 768px) {
    #tver img {
      width: 45%; } }

.emphasis {
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 175%; }

.caution {
  font-weight: 100;
  font-size: 0.9rem;
  line-height: 175%; }