@import url(../css/top.css);
 header #main01,
 nav #main02,
 article,
 #mainContents01,
 #mainContents03,
 footer,
 #bnrBox {
   margin: 0 auto;
   text-align: center;
 }

 @media screen and (min-width: 700px) {
   header #main01 #mainVisual,
   nav #main02 #button01,
   #contents01,
   #contents02,
   #contents03 {
     width: 700px;
     float: left;
   }
 }

 #main01 {
   width: 100%;
 }

 #main01 img,
 #main02 img {
   width: 100%;
 }

 #mainVisual {
   background: url(../images/main_sp.jpg) center center / cover no-repeat;
   padding-top: 139.8%;
   width: 100%;
   height: 0;
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
 }

 .wrapper nav {
   width: 90%;
   padding: 0 5% 10px;
 }

 @media screen and (min-width: 700px) {
   #mainVisual {
     background: url(../images/main_pc.jpg) no-repeat;
     padding-top: 0;
     background-size: 700px;
     height: 938px;
   }
        .wrapper nav {
     padding: 0;
     margin: 0 auto;
   }
     .wrapper nav {
     width: 90%;
     padding: 0 5%;
     margin: 20px 0;
   }
        .wrapper nav #main02 {
     width: 916px;
   }
        .wrapper nav #main02 #button01 {
     text-align: center;
     margin-top: 10px;
   }
 }

 .button01 a {
   background: url(../images/bnr_official_sp.jpg) center center / cover no-repeat;
   padding-top: 25.666%;
   width: 100%;
   height: 0;
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
   display: block;
 }

 @media screen and (min-width: 700px) {
   .button01 a {
     background: url(../images/bnr_official_pc.jpg) no-repeat;
     background-size: 620px;
     padding-top: 0;
     width: 661px;
     height: 170px;
     overflow: hidden;
     text-indent: 100%;
     white-space: nowrap;
     display: block;
   }
 }

 .intro_midashi {
   background: url(../images/intro_sp.jpg) center center / cover no-repeat;
   padding-top: 13.59%;
   width: 100%;
   height: 0;
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
   margin: 50px 0;
 }

 .intro1,
 .intro2,
 .intro3,
 .intro4 {
   width: 100%;
   height: 0;
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
 }

 .intro1 {
   background: url(../images/intro1_sp.jpg) center center / cover no-repeat;
   padding-top: 67.9%;
 }

 .intro2 {
   background: url(../images/intro2_sp.jpg) center center / cover no-repeat;
   padding-top: 91.25%;
 }

 .intro3 {
   background: url(../images/intro3_sp.jpg) center center / cover no-repeat;
   padding-top: 125.625%;
 }

 .intro4 {
   background: url(../images/intro4_sp.jpg) center center / cover no-repeat;
   padding-top: 167.65625%;
 }

 @media screen and (min-width: 700px) {
   .intro_midashi {
     background: url(../images/intro_pc.png) no-repeat;
     padding-top: 13.59%;
     width: 100%;
     height: 0;
     overflow: hidden;
     text-indent: 100%;
     white-space: nowrap;
     margin: 50px 0;
   }
   .intro1 {
     background: url(../images/intro1_pc.png) no-repeat;
     background-size: 700px;
     height: 382px;
     padding-top: 0;
   }
   .intro2 {
     background: url(../images/intro2_pc.png) no-repeat;
     background-size: 700px;
     height: 380px;
     padding-top: 0;
   }
   .intro3 {
     background: url(../images/intro3_pc.png) no-repeat;
     background-size: 700px;
     height: 502px;
     padding-top: 0;
   }
   .intro4 {
     background: url(../images/intro4_pc.png) no-repeat;
     background-size: 700px;
     height: 524px;
     padding-top: 0;
   }
 }

 aside {
   display: none;
 }

 @media screen and (min-width: 700px) {
   aside {
     display: block;
     margin: 0;
     height: 0;
   }
 }

 #mainContents01,
 #mainContents02,
 #mainContents03 {
   background-position: 0 0;
   background-repeat: no-repeat;
 }

 .video {
   background: url(../images/bg_dotto.jpg) repeat;
 }

 @media screen and (min-width: 700px) {
   .video {
     background: transparent;
   }
 }

 .video1 {
   padding: 50px 20px 40px;
 }

 .video2 {
   padding: 0 20px 50px;
 }

 .video1 a {
   background: url(../images/video_sp.jpg) center center / cover no-repeat;
   padding-top: 56.166%;
   width: 100%;
   height: 0;
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
   display: block;
 }

 .video2 a {
   background: url(../images/youtube_sp.jpg) center center / cover no-repeat;
   padding-top: 25.6%;
   width: 100%;
   height: 0;
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
   display: block;
 }

 @media screen and (min-width: 700px) {
   .video1 a {
     background: url(../images/video_pc.jpg) no-repeat;
     background-size: 631px;
     height: 372px;
     padding-top: 0;
   }
   .video2 a {
     background: url(../images/youtube_pc.jpg) no-repeat;
     background-size: 631px;
     height: 170px;
     padding-top: 0;
   }
   .video1 {
     padding: 70px 30px 20px;
   }
   .video2 {
     padding: 20px 30px 50px;
   }
 }

 .staff {
   background: url(../images/staff_sp.jpg) center center / cover no-repeat;
   padding-top: 185.625%;
   width: 100%;
   height: 0;
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
   display: block;
 }

 @media screen and (min-width: 700px) {
   .staff {
     background: url(../images/staff_pc.jpg) no-repeat;
     background-size: 700px;
     height: 949px;
     padding-top: 0;
   }
 }

 @media screen and (min-width: 700px) {
   #mainContents01 {
     background: url(../images/intro_bg_pc.jpg) no-repeat;
     background-position: 0 500px;
   }
   #mainContents02 {
     background: url(../images/bg_dotto.jpg) repeat;
   }
   #mainContents03 {
     background-image: url();
   }
   #wrapper {
     background-color: #000;
   }
   header {
     width: 100%;
     margin: 0 auto;
     background: #000;
     position: relative;
   }
   header #main01 {
     width: 1018px;
   }
 }

 #main01 p {
   position: absolute;
   left: 50%;
   bottom: 4%;
   margin-left: -464px;
 }
 /*#sns {
  clear: both;
  padding-top: 30px;
}*/

 #mainContents03 {
   width: 100%;
   position: relative;
   z-index: 1;
 }

 .button02 {
   position: absolute;
   left: 0;
   right: 0;
   bottom: -130px;
 }

 .button02 img {
   width: 182px;
 }

 #bnrBox {
   padding-top: 76px;
 }

 #bnrMinibox {
   text-align: center;
   margin: 0 auto;
   background: url(../images/bg_dotto.jpg) repeat;
   padding: 70px 0 30px 0;
 }

 .bnrArea_sp li {
   padding: 5px 0;
 }

 @media screen and (min-width: 700px) {
   article {
     width: 998px;
   }
   #introduction p {
     margin: 50px 0 0;
   }
   #cast p {
     margin: 37px 0 45px 50px;
   }
   #mainContents03 {
     width: 100%;
     height: 949px;
     position: relative;
     z-index: 1;
   }
   #staff p {
     margin: 41px 0 30px 50px;
   }
   .button02 {
     position: absolute;
     left: 600px;
     bottom: -50px;
   }
   .button02 img {
     width: 168px;
   }
   #bnrBox {
     width: 100%;
   }
   #bnrMinibox {
     text-align: center;
     margin: 0 auto;
     padding: 0;
     background: transparent;
   }
 }

 footer {
   width: 100%;
   background: #000;
 }

 .bnrArea_pc {
   display: none;
 }

 @media screen and (min-width: 700px) {
   footer article {
     width: 100%;
     background: url(../images/bg_dotto.jpg) repeat;
   }
   .bnrArea_pc {
     display: block;
     height: 200px;
     width: 100%;
     padding: 0 0 0 0;
   }
   .bnrArea_sp {
     display: none;
   }
   footer {
     width: 100%;
     background: #000;
   }
   #bnrMinibox {
     width: 720px;
     margin: 0 auto;
   }
   .bnrArea_pc ul {
     float: left;
   }
   .bnrArea_pc ul li {
     padding: 5px;
   }
   .bnrArea_pc ul li:nth-of-type(2) {
     padding-bottom: 10px;
   }
 }

 .copyright {
   padding: 20px 20%;
   background-color: #e60012;
 }

 .copy {
   clear: both;
   text-align: center;
   background: url(../images/copy_sp.jpg) center center / cover no-repeat;
   padding-top: 4.028%;
   width: 100%;
   height: 0;
   overflow: hidden;
   text-indent: 100%;
   white-space: nowrap;
   display: block;
 }

 @media screen and (min-width: 700px) {
   .copy {
     background-size: 354px;
     width: auto;
     height: 15px;
     margin-left: -250px;
     /* padding: 0; */
   }
 }
 /*# sourceMappingURL=layout.css.map */