@charset "utf-8";

/* -------------------------
  1. common
  2. top
  3. about
  4. story01
  5. story02
  6. story03
  7. gallery
  8. spec
  9. special
------------------------- */

/*--- 1. common ---*/

html{
  background: #000;
}

body {
  color: #fff;
 /* background: #112337;*/
  font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
  font-size: 2.4vw;
  font-weight: 350;
  height: 100%;
  overflow-x: hidden;
  position: relative;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  width: 100%;
}

.barba-container{
  /*margin-top: 100vh;*/
  transition: margin-top .6s ease;
}

header{
  z-index: 10000;
}

figure{
  margin: 0;
}

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

.pc{
  display: none;
}

#loading{
  background: #071128;
  height: 100%;
  position: fixed;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  width: 100%;
  z-index: 10001;
}

#loading p{
  -webkit-animation: blink 1s ease-in-out infinite alternate;
  animation: blink 1s ease-in-out infinite alternate;
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: auto auto;
  width: 40.9375vw;
}
@-webkit-keyframes blink {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@keyframes blink {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

@media (min-width: 960px) {

  #loading p{
    width: 15.9375vw;
  }

  body{
    font-size: 0.9375vw;
  }

  header{
    margin-top: -20vw;
    transition: margin-top .5s ease;
    transition-delay: .6s;
  }

  .pc{
    display: block;
  }
  .sp{
    display: none;
  }

}

/* header */

#nav-btn {
  background: #091c33;
  border: none;
  border-radius: 50% 50%;
  color: #fff;
  cursor: pointer;
  font-size: 1.333vw;
  height: 16vw;
  letter-spacing: .1em;
  position: fixed;
  left: 2.666vw;
  top: 2.666vw;
  transition: all .3s;
  width: 16vw;
  z-index: 10000;
}

#nav-btn .icon,
#nav-btn .icon::before,
#nav-btn .icon::after {
  background: #fff;
  display: block;
  height: .9333vw;
  left: 0;
  margin: 0 auto;
  position: absolute;
  right: 0;
  transition: all .3s;
  width: 6.6666vw;
}

#nav-btn .icon {
  top: 7.6vw;
}

#nav-btn .icon::before,
#nav-btn .icon::after {
  content: "";
}

#nav-btn .icon::before {
  top: -2.666vw;
}

#nav-btn .icon::after {
  bottom: -2.666vw;
}

#nav-btn.active{
  background: #fff;
}

#nav-btn.active .icon {
  background: transparent;
}

#nav-btn.active .icon::before {
  background: #091c33;
  transform: translateY(2.666vw) rotate(-45deg);
}

#nav-btn.active .icon::after {
  background: #091c33;
  transform: translateY(-2.666vw) rotate(45deg);
}

nav > ul{
  display: none;
  transition: all .3s;
  transition-timing-function: ease;
  opacity: 0;
  margin: 18.66666vw auto 0;
  width: 86.6666vw;
}

nav li{
  border-bottom: #182e49 1px solid;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 16.8vw;
}
  
nav li.none{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  pointer-events: none;
  opacity: .3;
}
  
nav li.none img{
  width: auto;
}
  
nav .story li.none{
  box-sizing: border-box;
  padding-top: 0.520833vw;
}
  
nav li a{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}
  
nav li a img{
  width: auto;
}

nav > ul.active{
  display: block;
  opacity: 1;
}
  
header.active{
  background: rgba(0,15,48,.96);
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%;
}

@media (min-width: 960px) {
  
  #nav-btn{
    display: none;
  }
  
  header{
    background: rgba(0,15,48,.96);
    display: block;
    height: auto;
    position: fixed;
    top: 0;
    width: 100%;
  }

  nav ul{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    flex-grow: 1;
    height: 7vw;
    opacity: 1;
    margin: 0 auto;
    max-width: 1300px;
    width: 100%;
  }

  nav ul.story{
    position: relative;
    width: 38.3333%;
  }

  nav ul.story::before{
    background: url(../img/nav03.png)no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 9.8958vw;
    position: absolute;
    top: 0.5208vw;
    right: 0;
    left: 0;
    margin: 0 auto;
    pointer-events: none;
    width: 95%;
    z-index: 20;
  }
  
  nav li::before{
    background: linear-gradient(-90deg, #002c45, #000f30);
    content: "";
    display: block;
    height: 100%;
    opacity: 0;
    transition: all .3s;
    position: absolute;
    top: 0;
    right: -100%;
    width: 100%;
    z-index: 5;
  }
  
  nav li.none::before{
    display: none;
  }
  
  nav li:hover::before{
    opacity: 1;
    right: 0;
  }
  
  nav li{
    background: linear-gradient(-90deg, #000f30, #000f30);
    border-right: #182e49 solid 1px; 
    border-bottom: none;
    display: -webkit-flex;
    display: flex;
    height: 100%;
    -webkit-flex-grow: 1;
    flex-grow: 1;
    position: relative;
    overflow: hidden;
  }
  
  nav li:first-child{
    border-left: #182e49 solid 1px;
  }
  
  nav li a{
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
    padding: 0 1.8229vw;
    position: relative;
    width: 100%;
    z-index: 10;
  }

  nav li.none{
    padding: 0 1.8229vw;
  }

  nav ul.story li a{
    margin-top: 0.520833vw;
  }

  nav ul.story li.none{
    box-sizing: border-box;
    padding-top: 0.520833vw;
  }
  
}

@media (min-width: 1200px) {

  nav ul{
    height: 80px;
  }
  
  nav li a,
  nav li.none{
    padding: 0 36px;
  }
  
}

/* footer */

footer{
  background: #000;
  box-shadow: 0px 0px 200px 75px #000;
  padding-top: 5.6vw;
  position: relative;
}

footer.not_top{
  box-shadow: none;
  padding-top: 0;
}

footer .bn{
  border-bottom: rgba(238,238,238,.1) 1px solid;
  margin-top: -11.2vw;
  padding-bottom: 4vw;
  width: 100%;
}

footer .bn.not_top{
  display: none;
}

footer .bn li{
  margin: 0 auto 0;
  position: relative;
  overflow: hidden;
  width: 51.7333vw;
}

footer .bn li img{
  -webkit-transition: transform .3s;
  transition: transform .3s;
}

footer .bn li:hover img{
  -webkit-transform: scale(1.07);
  transform: scale(1.07);
}
  
footer .bn li a{
  display: block;
  height: 100%;
  width: 100%;
}
  
footer .bn li::after{
  box-shadow: 0 0 0 1.0666vw rgba(199,199,199,.5) inset;
  content: "";
  display: block;
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

footer .bn li:not(:first-child){
  margin-top: 2.6666vw;
}

footer .sns{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 4vw auto;
  width: 25.8666vw
}

footer.not_top .sns{
  padding-top: 4vw;
  margin: 0 auto 4vw;
}

footer .sns li{
  height: 7.7333vw;
  position: relative;
  width: 7.7333vw;
}

footer .sns li a{
  display: block;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 100%;
  width: 100%;
}

footer .sns li:nth-child(1) img{
  width: 2.5333vw;
}
footer .sns li:nth-child(2) img{
  width: 1.6vw;
}
footer .sns li:nth-child(3) img{
  width: 3.4666vw;
}

footer .sns li img{
  position: relative;
  z-index: 10;
}

footer .sns li::after{
  border: #8b8b8b solid 1px;
  content: "";
  display: block;
  height: 5.333vw;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  transition: all .3s;
  position: absolute;
  pointer-events: none;
  top: 13%;
  left: 13%;
  width: 5.333vw;
  z-index: 5;
}

footer .sns li:hover::after{
  background: rgba(165,126,43,.8);
  border: rgba(202,168,96,.5) 1px solid;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}

footer .plat{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  justify-content: -webkit-space-between;
  justify-content: space-between;
  margin: 0 auto;
  width: 30.666vw;
}

footer .plat li:nth-child(1){
  width: 65.217%;
}
footer .plat li:nth-child(2){
  width: 26.08%;
}

footer .cre{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  justify-content: -webkit-space-between;
  justify-content: space-between;
  margin: 4vw auto 0;
  padding-bottom: 4vw;
  width: 80.4vw;
}

footer .cre ul{
  display: -webkit-flex;
  display: flex;
  justify-content: -webkit-space-between;
  justify-content: space-between;
  width: 21.22719%;
}

footer .cre ul li{
  width: 7.2vw;
}

footer .cre p{
  width: 75.456%;
}

@media (min-width: 960px) {

  footer{
    box-shadow: 0px 0px 200px 120px #000;
    padding-top: 1.8229vw;
  }

  footer.not_top .sns {
    padding-top: 0;
    margin: 0 0 0 2.604vw;
  }
  
  footer .bn{
    border: none;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: -3.658vw auto 0;
    padding-bottom: 1.5625vw;
    width: 41.2916vw;
  }

  footer .bn li{
    margin: 0 !important;
    width: 20.104vw;
  }
  
  footer .bn li::after{
    box-shadow: 0 0 0 0.41666vw rgba(199,199,199,.5) inset;
  }

  footer .bn li:first-child{
    margin-bottom: 0;
  }

  footer .bn + .box{
    border-top: rgba(238,238,238,.1) 1px solid;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    justify-content: -webkit-space-between;
    justify-content: space-between;
    padding: 1.5625vw 0;
  }
  
  footer .bn + .box .inr{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    justify-content: -webkit-space-between;
    justify-content: space-between;
    margin: 0 2.604vw 0 auto;
    width: 45.8333vw;
  }
  
  footer .bn + .box .inr a{
    transition: opacity .3;
  }
  
  footer .bn + .box .inr a:hover{
    opacity: .7;
  }

  footer .sns{
    margin: 0 auto 0 2.604vw;
    width: 10.4958vw
  }

  footer .sns li{
    height: 3.125vw;
    width: 3.125vw;
  }

  footer .sns li:nth-child(1) img{
    width: 0.98958vw;
  }
  footer .sns li:nth-child(2) img{
    width: 0.625vw;
  }
  footer .sns li:nth-child(3) img{
    width: 1.3541vw;
  }

  footer .sns li::after{
    height: 2.08vw;
    top: 13%;
    left: 15%;
    width: 2.08vw;
  }

  footer .plat{
    width: 11.979vw;
  }

  footer .cre{
    margin: 0;
    padding-bottom: 0;
    width: 31.875vw;
  }

  footer .cre ul{
    display: -webkit-flex;
    display: flex;
    justify-content: -webkit-space-between;
    justify-content: space-between;
    width: 22.87581%;
  }

  footer .cre ul li:nth-child(1){
    width: 2.8645vw;
  }
  footer .cre ul li:nth-child(2){
    width: 3.90625vw;
  }

  footer .cre p{
    max-width: 453px;
    width: 23.6979vw;
  }

}

/*--- 2. top ---*/

@media (min-width: 960px) {
  #top {
    display: -webkit-inline-flex;
    display: inline-flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%;
  }
}

/* plat */

#top .plat_wrap p{
  width: 44vw;
}

#top .plat_wrap.sp{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  justify-content: -webkit-space-between;
  justify-content: space-between;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 0 0 auto;
  width: 76vw;
}

#top .plat_wrap .plat{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  justify-content: -webkit-space-between;
  justify-content: space-between;
  width: 30vw;
}

#top .plat li:nth-child(1){
  width: 20vw;
}
#top .plat li:nth-child(2){
  width: 8vw;
}

#top .plat.pc{
  display: none;
}

@media (min-width: 960px) {
  
  #top .plat_wrap.sp{
    display: none;
  }
  
  #top .plat_wrap.pc{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    justify-content: -webkit-space-between;
    justify-content: space-between;
    left: 0;
    right: 0;
    margin: 4.1vw auto 0;
    width: 90%;
  }
  
  #top .plat_wrap.pc p{
    margin-top: 0.104vw;
    margin-right: 1.56vw;
    margin-left: -0.625vw;
    width: 21.302vw;
  }

  #top .plat.pc{
    display: -webkit-flex;
    display: flex;
    position: relative;
  }

  #top .plat_wrap .plat{
    width: 12.03125vw;
  }

  #top .plat li:nth-child(1){
    box-sizing: border-box;
    padding-bottom: 0;
    width: 65.217%;
  }
  #top .plat li:nth-child(2){
    width: 26.086%;
  }

  #top .plat.sp{
    display: none;
  }
}

@media (min-width: 1200px) {

  #top .plat_wrap.pc{
    margin-top: 35px;
  }
}

/* visual */

#top .visual{
  background: #1c272b url(../img/top/visual.jpg) 50% 0 no-repeat;
  background-size: cover;
  height: 138.2vw;
  overflow: hidden;
  width: 100%;
}

@media (min-width: 960px) {
  #top .visual{
    background: #1c272b url(../img/top/visual.jpg) 50% bottom no-repeat;
    background-size: cover;
    height: auto;
    padding-top: 1.4vw;
    width: 60.9375vw;
  }
}

/* cont */

#top .cont{
  background: url(../img/top/bg-sp.png) 50% 5vw no-repeat;
  background-size: cover;
  margin-top: -30vw;
}

#top .cont .inr{
  margin: 0 auto 0;
  width: 86.6666vw;
}

#top .cont h1{
  background: url(../img/top/ttl-sp.png)no-repeat;
  background-size: contain;
  height: 34.5333vw;
  margin: -10vw auto 0;
  width: 89.2vw;
}

#top .cont .release{
  margin: .8vw 0 1.7333vw;
}

#top .cont .movie{
  background: #000;
  border: #c0b233 solid 1px;
  margin: 4vw auto 0;
  padding: 2vw 0;
  overflow: hidden;
  width: 58.8vw;
}

#top .cont #topMovie{
  height: 33.0666vw;
  width: 58.8vw;
}

#top .cont .movie + p{
  margin: -9.7333vw -1.6vw 0 auto;
  padding-bottom: 1.33333vw;
  position: relative;
  pointer-events: none;
  z-index: 10;
  width: 32vw;
}

@media (min-width: 960px) {
  
  #top .visual + div{
   width: calc(100% - 60.9375vw);
  }
  
  #top .cont{
    background: url(../img/top/bg.jpg) 50% 0 no-repeat;
    background-size: cover;
    margin: 0;
    padding-top: 4.1666vw;
    overflow: hidden;
  }
  
  #top .cont .inr{
    max-width: 650px;
    width: 90%;
  }

  #top .cont h1{
    background: url(../img/top/ttl.png)no-repeat;
    background-size: contain;
    height: 12.5vw;
    margin-top: 1.04166vw;
    max-width: 650px;
    width: 90%;
  }

  #top .cont .release{
    margin: .729166vw 0 0.677vw;
  }
  
  #top .cont #topMovie{
    height: 12.9166vw;
    width: 22.9166vw;
  }

  #top .cont .movie{
    background: #000;
    margin: 1.458333vw auto 0;
    padding: 0.83333vw 0;
    overflow: hidden;
    width: 67.3846%;
  }

  #top .cont .movie + p{
    margin: -3.9vw 0 0 auto;
    padding-bottom: 1.33333vw;
    position: relative;
    pointer-events: none;
    width: 12.5vw;
    z-index: 10;
  }
}

/* link */

#top .link li span,
#top + .next span a,
#special detail span a,
#top + section + .spec .ara_down a{
  background: rgba(165,126,43,.8);
  border: rgba(202,168,96,.5) 1px solid;
  display: block;
  transition: all .3s;
  padding: 2vw 10.66666vw 1.5vw 4.6666vw;
  position: absolute;
  left: 6.66666vw;
  bottom: 6.66666vw;
  z-index: 10;
}

#top + .next span a,
#special detail span a,
#top + section + .spec .ara_down a{
  position: relative;
  left: 0;
  bottom: 0;
  margin: 0 auto;
  width: 16vw;
}
#top + section + .spec .ara_down a{
  background: rgba(192,16,30,.8);
  border: rgba(255,111,111,.5) 1px solid;
}

#top .link li span::after,
#top + .next span a::after,
#special detail span a::after,
#top + section + .spec .ara_down a::after{
  background: url(../img/top/arw.png) 50% 50% no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 1.0666vw;
  transition: all .3s;
  position: absolute;
  right: -1.6666vw;
  bottom: 2.2vw;
  opacity: .5;
  width: 13.46666vw;
}
#top + section + .spec .ara_down a::after{
  right: -.2vw;
  bottom: 4.2vw;
}
#special detail span a::after{
  bottom: 2.5vw;
}

#top .link li a,
#top + .next span a,
#special detail span a,
#top + section + .spec .ara_down a{
  display: block;
  color: #fff;
  height: 100%;
  text-decoration: none;
  width: 100%;
}
#special detail span a{
  margin-top: 2em;
  width: 26%;
}

#top + section + .spec .ara_down a{
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  margin-top: 5vw;
  padding: 0 2vw 0 0;
}

#top + section + .spec .ara_down a img{
  margin-right: 6vw;
  width: 14%;
}

#top .link li img{
  transition: transform .3s;
}

#top + .next span a{
  width: 16vw;
}
#top + section + .spec .ara_down a{
  box-sizing: border-box;
  width: 66.666vw;
}

#top .link li:hover span,
#top + .next span a:hover,
#special detail span a:hover{
  border: rgba(202,168,96,1) 1px solid;
}
#top + section + .spec .ara_down a:hover{
  border: rgba(230,0,0,1) 1px solid;
}
#top .link li:hover span::after,
#top + .next span a:hover::after,
#special detail span a:hover::after,
#top + section + .spec .ara_down a:hover::after{
  opacity: .8;
  margin-right: -2%;
}
#top .link li:hover img{
  transform: scale(1.05);
}

#top .link li{
  height: 40vw;
  position: relative;
  width: 100%;
}

#top .link li:nth-child(1){
  background: url(../img/top/link01.jpg);
  background-size: cover;
}

#top .link li:nth-child(1) img{
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 57.0666vw;
}

#top .link li:nth-child(2){
  background: #96c4c1;
  text-align: right;
  overflow: hidden;
}

#top .link li:nth-child(2) img{
  margin-right: 0;
  width: 62.933333vw;
}

#top .link li:nth-child(2)::after{
  background: url(../img/top/link02.png);
  background-size: cover;
  content: "";
  height: 40vw;
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
}

#top .link li.coming:nth-child(2)::after{
  background: url(../img/top/link02-coming.png);
  background-size: cover;
  content: "";
  height: 40vw;
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
}

#top .link li.coming > img,
#top .link li.coming span{
  display: none;
}

@media (min-width: 960px) {

  #top .link li span,
  #top + .next span a,
#special detail span a,
  #top + section + .spec .ara_down a{
    padding: 1.0775vw 4.1666vw 0.9375vw 1.979vw;
    left: 2.604166vw;
    bottom: 2.604166vw;
  }
  #top + .next span a,
  #special detail span a,
  #top + section + .spec .ara_down a{
    left: 0;
    bottom: 0;
    width: 6vw;
  }
  #special detail span a{
    width: 7vw;
  }
  #top + section + .spec .ara_down a{
    padding: 0 1.979vw 0 0;
    margin-top: 2.2vw;
    width: 26.04166vw;
  }

  #top .link li span::after,
  #top + .next span a::after,
  #special detail span a::after,
  #top + section + .spec .ara_down a::after{
    height: 0.5208vw;
    right: 1.3334vw;
    bottom: 1.2vw;
    width: 1.3541vw;
  }
  #top + section + .spec .ara_down a::after{
    right: 1.8334vw;
    bottom: 1.5vw;
  }

  #top .link li{
    height: 15.625vw;
  }

  #top + section + .spec .ara_down a img{
    margin-right: 3vw;
    width: 14%;
  }

  #top .link li:nth-child(1) img{
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 22.291vw;
  }

  #top .link li:nth-child(2) img{
    width: 24.47916vw;
  }

  #top .link li:nth-child(2)::after{
    height: 15.625vw;
  }
}

/* top - next */

#top + .next{
  background: url(../img/top/daedalus-bg.jpg) 50% 50% no-repeat;
  background-size: cover;
  padding: 3.8vw 0;
}

#top + .next .txt{
  margin: 0 auto 3vw; 
  width: 95%;
}

@media (min-width: 960px) {

  #top + .next{
    padding: 1.927vw 0;
  }

  #top + .next .txt{
    margin: 0 auto 1.145vw;
    max-width: 1084px;
    width: 56.458vw;
  }
  
}

/* top - spec */

#top + section + .spec{
  background: url(../img/top/spec-bg-sp.png) 50% 0 no-repeat;
  background-size: cover;
  box-shadow: 0px 170px 200px -100px #000528 inset;
  position: relative;
  padding: 13.33333vw 0 15.13333vw;
  width: 100%;
}

#top + section + .spec h2{
  margin-left: 26.666vw;
  width: 36vw;
}

#top + section + .spec div.detail{
  display: inline-block;
  width: 100%;
}

#top + section + .spec figure{
  margin: 4.5333vw 0 0 12.53333vw;
  width: 78.9333vw;
}

#top + section + .spec div{
  margin: 2vw auto 7.333vw;
  width: 66.6666vw;
}

#top + section + .spec dl{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

#top + section + .spec dt{
  color: #c5c5c5;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  width: 30%;
}

#top + section + .spec dd{
  line-height: 200%;
  width: 68%;
}

#top + section + .spec .scenario{
  background: url(../img/top/spec-bg02.png) 50% 0 no-repeat;
  background-size: cover;
  margin-top: 8vw;
  padding: 2.666vw 0 4vw;
  text-align: center;
  width: 100%;
}

#top + section + .spec .scenario h3{
  margin: 0 auto 1.6vw;
  width: 19.7333vw;
}

#top + section + .spec .scenario p{
  font-size: 2.133vw;
  line-height: 160%;
  margin: 0 auto;
  position: relative;
  width: 90vw;
  z-index: 10;
}

#top + section + .spec .scenario p span{
  color: #888dae;
  margin-left: 1em;
}

@media (min-width: 960px) {
  #top + section + .spec{
    background: url(../img/top/spec-bg.jpg) 50% 0 no-repeat;
    background-size: cover;
    background-attachment: fixed;
    box-shadow: none;
    padding: 5.2083vw 0 8.9583vw;
  }

  #top + section + .spec h2{
    margin: 0 auto;
    width: 14.1666vw;
  }
  
  #top + section + .spec h2 img{
    margin-left: -1.7229vw;
    max-width: 271px;
  }

  #top + section + .spec div.detail{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 0 auto;
    width: 56.7708vw;
  }

  #top + section + .spec figure{
    margin: 1.8411vw 0 0 0;
    max-width: 592px;
    width: 31vw;
  }

  #top + section + .spec div{
    margin: 6.1458vw 0 5.729vw 0;
    width: 26.04166vw;
  }

  #top + section + .spec .scenario{
    margin: 0 auto;
    padding: 1.41666vw 0 1.302vw;
    width: 100%;
  }

  #top + section + .spec .scenario h3{
    margin: 0 auto 0.6777vw;
    max-width: 147px;
    width: 7.65625vw;
  }

  #top + section + .spec .scenario p{
    font-size: .833vw;
    width: 90vw;
  }
  
}

/*--- 3. about ---*/

/* common */

#about{
  background: url(../img/about/bg01.jpg)no-repeat 50% 0;
  background-size: cover;
  background-attachment: fixed;
  padding: 12.33333vw 0 0;
  overflow-x: hidden;
  width: 100%;
}

#about h1{
  margin: 0 auto 6.666vw;
  width: 58vw;
}

#about h1 img{
  margin-left: -3vw;
}

#about h2{
  margin: 0 0 8.333vw -19vw;
    width: 138vw;
}

@media (min-width: 960px) {

  #about{
    padding: 8.1875vw 0 0;
  }

  #about h1 {
    margin: 0 auto 3.90625vw;
    max-width: 1919px;
    width: 27.8876vw;
  }

  #about h1 img{
    margin-left: -1vw;
  }

  #about h2{
    margin: 0 auto 6.208333vw ;
    max-width: 1919px;
    width: 100vw;
  }
}

/* n1 */

#about .box1{
  background: url(../img/about/bg01-01.png)no-repeat 50% 0;
  background-size: 100%;
  padding-top: 4vw;
  width: 100%;
}

#about .box2{
  background: url(../img/about/bg01-02.png)no-repeat 50% 0;
  background-size: 100%;
  padding-top: 4vw;
  margin-top: 6vw;
  width: 100%;
}

#about .box1 .inr,
#about .box2 .inr,
#about .box3 .inr{
  display: -webkit-flex;
  display: flex;
  margin: -7vw auto 0;
  width: 94.5%;
}

#about .box1 .inr .img,
#about .box2 .inr .img{
  max-width: 973px;
  width: 74%;
}

#about .box1 .inr .txt{
  position: relative;
  margin-top: 26.1vw;
  max-width: 700px;
  width: 54%;
}

#about .box1 .inr .img{
  margin-left: -28%;
}

#about .box2 .inr .txt{
  position: relative;
  margin-top: 26.1vw;
  margin-left: -36.5%;
  max-width: 823px;
  order: 2;
  width: 62.5%;
}

#about .box2 .inr .img{
  order: 1;
}

#about .box3{
  margin-top: 12vw;
  width: 100%;
}



#about .box3 .inr{
  -webkit-align-items: center;
  align-items: center;
}

#about .box3 .inr .txt{
  position: relative;
  margin-top: 2vw;
  max-width: 753px;
  width: 57.69%;
}

#about .box3 .inr .detail{
  background: rgba(0,0,0,.7);
  box-sizing: border-box;
  margin-top: 1vw;
  padding: 0.6666vw;
  width: 78.4%;
}

#about .box3 .inr .detail > div{
  border: rgba(255,255,255,.4) 1px solid;
  box-sizing: border-box;
  display: -webkit-flex;
  display: flex;
  padding: 1vw;
  width: 100%;
}

#about .box3 .inr .detail > div figure{
  width: 30%;
}

#about .box3 .inr .detail > div p{
  font-size: 2.13333vw;
  margin-left: 3%;
  line-height: 130%;
  width: 67%;
}

#about .box3 .inr .detail > div span{
  font-size: 1.86666vw;
}

#about .box3 .inr .detail > div .name{
  color: #caa860;
  font-size: 2.4vw;
  font-weight: bold;
}

#about .box3 .inr .img{
  margin-left: -9.69%;
  width: 52%;
}

@media (min-width: 960px) {

  #about .box1{
    padding-top: 3.125vw;
    width: 100%;
  }

  #about .box2{
    padding-top: 3.125vw;
    margin-top: 6.0833vw;
    width: 100%;
  }

  #about .box1 .inr,
  #about .box2 .inr,
  #about .box3 .inr{
    margin: -6.25vw auto 0;
    width: 68.229%;
  }

  #about .box1 .inr{
    padding-left: 5vw;
  }

  #about .box2 .inr{
    padding-right: 5vw;
  }

  #about .box1 .inr .img,
  #about .box2 .inr .img{
    width: 74.35114%;
  }

  #about .box1 .inr .txt{
    margin-top: 20.05208vw;
    max-width: 700px;
    width: 54.5%;
  }

  #about .box1 .inr .img{
    margin-left: -28.01526%;
  }

  #about .box2 .inr .txt{
    margin-top: 19.45208vw;
    margin-left: -37.9%;
    max-width: 823px;
    width: 63.5%;
  }
  
  #about .box3{
    margin-top: 11vw;
  }

  #about .box3 .inr{
    -webkit-align-items: center;
    align-items: center;
  }

  #about .box3 .inr .txt{
    margin-top: 2vw;
    max-width: 753px;
    width: 58.5%;
  }

  #about .box3 .inr .detail{
    margin-top: 0.78125vw;
    padding: 0.36458vw;
    width: 78.4%;
  }

  #about .box3 .inr .detail > div{
    padding: 0.341666vw;
    -webkit-align-items: center;
    align-items: center;
    width: 100%;
  }

  #about .box3 .inr .detail > div figure{
    width: 37.5%;
  }

  #about .box3 .inr .detail > div p{
    font-size: 0.8333vw;
    margin-left: 3%;
    line-height: 130%;
    width: 58.7686%;
  }

  #about .box3 .inr .detail > div span{
    display: inline-block;
    font-size: 0.729166vw;
  }

  #about .box3 .inr .detail > div .name{
    color: #caa860;
    font-size: 0.9375vw;
    font-weight: bold;
    margin-bottom: .5em;
  }

  #about .box3 .inr .img{
    margin-left: -9.69%;
    width: 52%;
  }
}

/* visual */

#about .visual{
  background: url(../img/about/visual.jpg)no-repeat 50% 50%;
  background-size: 125%;
  background-attachment: fixed;
  height: 30vw;
  margin: 8vw 0;
  width: 100%;
}

@media (min-width: 960px) {

  #about .visual{
    background: url(../img/about/visual.jpg)no-repeat 50% 80%;
    background-size: 100%;
    background-attachment: fixed;
    height: 22.8125vw;
    margin: 4.6875vw 0;
    width: 100%;
  }
  
}

/* n2 */

#about .n2 h2 {
  margin: 0 0 6.333vw -4vw;
  width: 110vw;
}

#about .n2 .box {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  margin: 0 auto;
  width: 90.5%;
}

#about .n2 p {
  margin: 0 auto 5.333vw;
  width: 90.5%;
}

#about .n2 figure {
  margin: 0 auto 4.333vw;
  width: 48%;
}

#about .n2 figure:first-child{
  margin-right: 2%;
}

#about .n2 figure:last-child figcaption{
  margin-left: -25%;
  width: 150%;
}

#about .n2 figcaption {
  text-align: center;
  line-height: 150%;
  margin-top: 2vw;
}

@media (min-width: 960px) {
  
  #about .n2{
    padding-bottom: 4.16666vw;
  }

  #about .n2 h2 {
    margin: 0 auto 2.604166vw;
    max-width: 1918px;
    width: 100vw;
  }

  #about .n2 .box {
    width: 63.020833vw;
  }

  #about .n2 p {
    margin: 0 auto 2.604166vw;
    width: 43.6458vw;
  }

  #about .n2 figure:nth-child(1) {
    margin: 0 auto 2vw;
    width: 31.770833vw;
  }
  #about .n2 figure:nth-child(2) {
    margin: 0 auto 2vw;
    width: 30.20833vw;
  }
  #about .n2 figure:nth-child(3) {
    margin: 0;
    width: 31.770833vw;
  }

  #about .n2 figure:last-child figcaption{
    margin-left: 0;
    width: 100%;
  }

  #about .n2 figcaption {
    text-align: center;
    line-height: 150%;
    margin-top: 0.26vw;
  }
  
}

/* n3 */

#about .n3{
  background: url(../img/about/bg02.jpg)no-repeat 50% 0;
  background-size: cover;
  background-attachment: fixed;
  padding: 6.6666vw 0 8.666vw;
  overflow-x: hidden;
  width: 100%;
}

#about .n3 h2 {
  margin: 0 0 3.333vw -17vw;
  width: 134vw;
}

#about .n3 p {
  margin: 0 auto;
  width: 94.5%;
}

#about .n3 p:last-child {
  margin: 0 auto;
  width: 80.5%;
}

#about .n3 .wrap{
  box-shadow: 0.4vw 0.4vw 0 0 rgba(0,0,0,.15);
  background: rgba(255,255,255,.6);
  box-sizing: border-box;
  margin: 3.3333vw auto;
  padding: 1.333vw;
  width: 94.5%;
}

#about .n3 .wrap .inr{
  box-sizing: border-box;
  border: #fff 1px solid;
  padding: 3.3333vw;
  width: 100%;
}

#about .n3 ul.main{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 0 auto;
  width: 100%;
}

#about .n3 ul.main li:nth-child(1){
  width: 25.6%;
}
#about .n3 ul.main li:nth-child(2){
  width: 35%;
}
#about .n3 ul.main li:nth-child(3){
  width: 28.4%;
}

#about .n3 ul.other{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  justify-content: center;
  margin: 0 auto;
  width: 100%;
}

#about .n3 ul.other li{
  box-shadow: 0 .2vw .3vw 0.1vw rgba(0,0,0,.1);
  margin-left: 1.3333vw;
  width: calc((100% / 4) - 1.3333vw);
}

#about .n3 ul.other li:not(:nth-child(-n+3)){
  margin-top: 1.3333vw;
}

#about .n3 ul.other li:nth-child(4),
#about .n3 ul.other li:nth-child(8){
  margin-left: 0;
}

#about .n3 ul.other li:first-child{
  margin-left: 12%;
}
#about .n3 ul.other li:nth-child(3){
  margin-right: 12%;
}

@media (min-width: 960px) {

  #about .n3{
    padding: 4.1666vw 0 4.9479vw;
  }

  #about .n3 h2 {
    margin: 0 auto 2.604166vw;
    max-width: 1920px;
    width: 100vw;
  }

  #about .n3 p {
    margin: 0 auto;
    max-width: 848px;
    width: 45.2vw;
  }

  #about .n3 p:last-child {
    margin: 0 auto;
    max-width: 841px;
    width: 44.5vw;
  }

  #about .n3 .wrap{
    margin: 2.0833vw auto;
    padding: 0.520833vw;
    width: 67.6041vw;
  }

  #about .n3 .wrap .inr{
    padding: 1.302083vw 1.041666vw;
  }

  #about .n3 ul.main{
    margin-bottom: 0.41666vw;
    width: 53.6458vw;
  }

  #about .n3 ul.main li:nth-child(1){
    width: 25.6%;
  }
  #about .n3 ul.main li:nth-child(2){
    width: 35%;
  }
  #about .n3 ul.main li:nth-child(3){
    width: 28.4%;
  }

  #about .n3 ul.other li{
    margin-left: 0.78125vw;
    width: calc((100% / 6) - 0.78125vw);
  }
  #about .n3 ul.other li:nth-child(4),
  #about .n3 ul.other li:nth-child(8){
    margin-left: 0.78125vw;
  }
  
  #about .n3 ul.other li:not(:nth-child(-n+3)) {
    margin-top: 0;
  }

  #about .n3 ul.other li:not(:nth-child(-n+5)){
    margin-top: 0.78125vw;
  }

  #about .n3 ul.other li:nth-child(3){
    margin-right: 0;
  }
  
  #about .n3 ul.other li:nth-child(1),
  #about .n3 ul.other li:nth-child(6){
    margin-left: 0;
  }

  #about .n3 ul.other li:first-child{
    margin-left: calc(((100% / 6) - 0.78125vw) / 2);
  }
  #about .n3 ul.other li:nth-child(5){
    margin-right: calc(((100% / 6) - 0.78125vw) / 2);
  }
  
}

/*--- 4. story01 ---*/

/* common */

/* ttl */

#story01{
  background: url(../img/story01/bg.jpg)no-repeat 50% 0;
  background-size: cover;
  background-attachment: fixed;
  padding: 12.33333vw 0 6.666vw;
  overflow-x: hidden;
  width: 100%;
}

#story01 h1{
  margin: 0 auto 4.5333vw;
  width: 36vw;
}

#story01 section:not(:last-child){
  margin-bottom: 4.666vw;
}

#story01 .ttl::before{
  background: rgba(173,141,72,.8);
  box-shadow: 0 0 3vw 0.3vw rgba(0,0,0,.5);
  content: "";
  height: 100%;
  position: absolute;
  top: 2.13333vw;
  left: 2.13333vw;
  width: 100%;
}

#story01 .ttl{
  position: relative;
  height: 67.4666vw;
  margin: 0 auto;
  width: 86.666vw;
  z-index: 20;
}

#story01 .ttl .inr{
  box-sizing: border-box;
  height: 100%;
  padding: 10.6666vw 0;
  position: relative;
  width: 100%;
}

/* cont */

#story01 .cont{
  /*background: url(../img/story01/story-bg01-01.jpg)no-repeat;*/
  background: cover;
  overflow: hidden;
  margin-top: -6.666vw;
}

#story01 .cont > div:first-child {
  
}

#story01 .cont .inr{
  position: relative;
}
  
#story01 .cont  .inr p{
  padding-top: 8.666vw;
  position: relative;
  width: 100%;
}

#story01 .cont .inr p img{
  display: inline-block;
  width: 100%;
}

#story01 .cont .inr p::after{
  box-shadow: 0px -57.333vw 33.333vw -26.666vw #000c24 inset;
  content: "";
  display: block;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

#story01 .bg_slide{
  height: 100vw;
  margin: 0;
  position: absolute;
  width: 100%;
}

#story01 .bg_slide li.item{
  height: 120vw;
  margin: 0;
  width: 100%;
}

#story01 .bg_slide .s01_bg01{
  background: #000c24 url(../img/story01/story-bg01-01.jpg)no-repeat 14% 0;
  background-size: 155%;
}
#story01 .bg_slide .s01_bg02{
  background: #000c24 url(../img/story01/story-bg01-02.jpg)no-repeat 14% 0;
  background-size: 155%;
}
#story01 .bg_slide .s01_bg03{
  background: #000c24 url(../img/story01/story-bg01-03.jpg)no-repeat 14% 0;
  background-size: 155%;
}
#story01 .bg_slide .s02_bg01{
  background: #000c24 url(../img/story01/story-bg02-01.jpg)no-repeat 14% 0;
  background-size: 155%;
}
#story01 .bg_slide .s02_bg02{
  background: #000c24 url(../img/story01/story-bg02-02.jpg)no-repeat 14% 0;
  background-size: 155%;
}
#story01 .bg_slide .s02_bg03{
  background: #000c24 url(../img/story01/story-bg02-03.jpg)no-repeat 14% 0;
  background-size: 155%;
}
#story01 .bg_slide .s03_bg01{
  background: #000c24 url(../img/story01/story-bg03-01.jpg)no-repeat 14% 0;
  background-size: 155%;
}
#story01 .bg_slide .s03_bg02{
  background: #000c24 url(../img/story01/story-bg03-02.jpg)no-repeat 14% 0;
  background-size: 155%;
}
#story01 .bg_slide .s03_bg03{
  background: #000c24 url(../img/story01/story-bg03-03.jpg)no-repeat 14% 0;
  background-size: 155%;
}

#story01 .cont .bg_slide .s_dots{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  position: absolute;
  top: 12vw;
  right: 5.333vw;
  width: 6.666vw;
}

#story01 .cont .bg_slide .s_dots button{
  cursor: pointer;
  margin: 0;
  padding: 0;
  background: #fff;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  height: 1.5vw;
  opacity: .3;
  position: relative;
  text-indent: -9999px;
  width: 1.5vw;
  z-index: 999;
}

#story01 .cont .bg_slide .s_dots .slick-active button{
  background: #caa860;
  opacity: 1;
}

#story01 .cont .inr .slick-prev{
  background: url(../img/story01/arwBlu-left.gif)no-repeat;
  left: 6.666vw;
  top: 124vw;
  bottom: auto;
  background-size: cover;
  height: 7.86666vw;
  text-indent: -9999px;
  width: 4.2666vw;
  z-index: 999;
}
#story01 .cont .inr .slick-next{
  background: url(../img/story01/arwBlu-right.gif)no-repeat;
  right: 6.666vw;
  top: 124vw;
  bottom: auto;
  background-size: cover;
  height: 7.86666vw;
  text-indent: -9999px;
  width: 4.2666vw;
  z-index: 999;
}

@media (min-width: 450px) {

  #story01 .cont .inr .slick-prev{
    top: 116vw;
  }
  #story01 .cont .inr .slick-next{
    top: 116vw;
  }
}

@media (min-width: 800px) {

  #story01 .cont .inr .slick-prev{
    top: 114vw;
  }
  #story01 .cont .inr .slick-next{
    top: 114vw;
  }
}
  
#story01 dl {
  margin: 0 auto 6.666vw;
  position: absolute;
  top: 74.6666vw;
  right: 0;
  left: 0;
   width: 86.6666vw;
  z-index: 20;
}

#story01 dt {
  margin-bottom: 2.8vw;
}

#story01 dd {
  line-height: 180%;
}

#story01 .cont .inr + div{
  background: #000c24;
  padding-bottom: 6.666vw;
}

#story01 .chara_list{
  margin: -16.666vw auto 0;
  padding-left: .8%;
  width: 72.0666vw;
}

#story01 .chara_list li{
  background: #000f30;
  box-shadow: 0px 0px 40px 5px rgba(255,255,255,.05) inset;
  cursor: pointer;
}

/* 0612今だけ */
/*#story01 .chara_list li:first-child{
  background: url(../img/story01/icon-active.jpg)no-repeat;
  background-size: cover;
}*/

#story01 .chara_list li.coming{
  background: #0F0F0F !important;
  box-shadow: 0px 0px 40px 5px rgba(255,255,255,.05) inset;
  cursor: auto;
  position: relative;
}

#story01 .chara_list li.coming img{
  position: relative;
  z-index: 0;
}

#story01 .chara_list li.coming span{
  position: absolute;
  top: 42%;
  left: -2%;
  right: 0;
  text-align: center;
  z-index: 1;
}

#story01 .chara_list .slick-slide:not(:last-child) {
  margin-right: 1.5%;
}

#story01 .chara_list .slick-list:not(:last-child) {
  margin-right: -1.5%;
}
#story01 .chara_list .slider-arrow {
  position: absolute;
  top: 50%;
  margin-top: -1.1%;
  color: #bd77f2;
  cursor: pointer;
  z-index: 30;
}
#story01 .chara_list li.slick-current{
  background: url(../img/story01/icon-active.jpg)no-repeat;
  background-size: cover;
}

@media (min-width: 960px) {
  
  #story01{
    padding: 8.177vw 0 8.177vw;
    width: 100%;
  }

  #story01 h1{
    margin: 0 auto 1.927vw;
    max-width: 277px;
    width: 14.479166vw;
  }
  
  #story01 section{
    display: flex;
    display: -webkit-flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin: 0 auto;
    width: 94.79166vw;
  }

  #story01 section:not(:last-child){
    margin-bottom: 2.604vw;
  }

  #story01 .ttl::before{
    top: .8333vw;
    left: .8333vw;
  }

  #story01 .ttl{
    height: 36.458333vw;
    margin: 0;
    width: 39.0625vw;
  }
  
  #story01 .cont{
    background: url(../img/story01/story-bg01-01.jpg)no-repeat;
    height: 36.458333vw;
    margin-top: 2.8645vw;
    margin-left: -2.604vw;
    overflow: visible;
    position: relative;
    width: 58.4375vw;
  }
  
  #story01 .cont > div:first-child{
    background-size: 100%;
  }
  
  #story01 .cont .inr .chara{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  
  #story01 .cont .inr p{
    padding-top: 0;
    order: 2;
    margin-left: -17.8125vw;
    margin-top: -3.49vw;
    width: 62.5vw;
  }

  #story01 .cont .inr p::after{
    display: none;
  }
  
  #story01 .cont .inr p img {
    padding-left: 4vw;
  }

  #story01 .bg_slide{
    height: 36.45833vw;
    margin: 0;
    position: absolute;
    width: 100%;
  }

  #story01 .bg_slide li.item{
    background-size: 100%;
    height: 36.45833vw;
    margin: 0;
    width: 100%;
  }

  #story01 .cont .bg_slide .s_dots{
    top: 1.5625vw;
    right: 1.5625vw;
    width: 2.604vw;
  }

  #story01 .cont .bg_slide .s_dots button{
    height: 0.52vw;
    width: 0.52vw;
  }
  
  #story01 dl {
    margin: 17.239vw 0 6.666vw 5.885vw;
    position: relative;
    top: 0;
    order: 1;
    width: 50vw;
  }

  #story01 dt {
    margin-bottom: 1.0625vw;
    width: 33.854166vw;
  }

  #story01 dd {
    line-height: 180%;
  }

  #story01 .cont .inr + div{
    background: none;
    padding-bottom: 0;
  }

  #story01 .chara_list{
    margin: 0 0 2.01vw 5.585vw;
    padding-left: .8%;
    position: absolute;
    bottom: 0;
    width: 25.395vw;
  }

  #story01 .chara_list.list_nav01{
    width: 23.4375vw;
  }

  #story01 .cont .inr .slick-prev{
    display: none !important;
  }
  #story01 .cont .inr .slick-next{
    display: none !important;
  }

  #story01 .cont .inr .s_dots{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    position: absolute;
    top: 0;
    right: 5.333vw;
    width: 2.91363vw;
  }

  #story01 .cont .story01_chara .s_dots{
    width: 6.666vw;
  }

  
}
  
/* n1 */

#story01 .n1 .ttl .inr{
  background: url(../img/story01/story-ttl-bg01.jpg)no-repeat 50% 45%;
  background-size: cover;
  padding: 10.6666vw 0;
}

#story01 .n1 h2{
  margin: 0 auto 4.666vw;
  width: 64.769%; 
}

#story01 .n1 h2 + p{
  margin: 0 auto;
  width: 84.1538%; 
}

#story01 .cont{
  background: cover;
}


@media (min-width: 960px) {
  
  #story01 .n1 .ttl .inr{
    background: url(../img/story01/story-ttl-bg01.jpg)no-repeat 50% 0;
    background-size: cover;
    padding: 9.375vw 0 8.8541vw;
  }

  #story01 .n1 h2{
    margin: 0 auto 1.5625vw;
    width: 56%;
  }

  #story01 .n1 h2 + p{
    margin: 0 auto;
    max-width: 554px;
    width: 73.8666666%;
  }

  #story01 .story01_chara .chara:nth-child(1) p img{
    padding-left: 4vw;
  }
  #story01 .story01_chara .chara:nth-child(2) p img{
    padding-left: 4vw;
  }
  #story01 .story01_chara .chara:nth-child(3) p img{
    padding-left: 6.2vw;
  }
  
}
  
/* n2 */

#story01 .n2 .ttl .inr{
  background: url(../img/story01/story-ttl-bg02.jpg)no-repeat 50% 45%;
  background-size: cover;
  padding: 8vw 0;
}

#story01 .n2 h2{
  margin: 0 auto 4.666vw;
  width: 96.615%; 
}

#story01 .n2 h2 + p{
  margin: 0 auto;
  width: 83.0769%; 
}


@media (min-width: 960px) {
  
  #story01 .n2 .ttl .inr{
    background: url(../img/story01/story-ttl-bg02.jpg)no-repeat 50% 0;
    background-size: cover;
    padding: 9.375vw 0 8.8541vw;
  }

  #story01 .n2 h2{
    margin: 0 auto 1.5625vw;
    width: 84%;
  }

  #story01 .n2 h2 + p{
    margin: 0 auto;
    max-width: 550px;
    width: 73.33333%;
  }

  #story01 .story02_chara .chara:nth-child(1) p img{
    padding-left: 7vw;
  }
  #story01 .story02_chara .chara:nth-child(2) p img{
    padding-left: 5vw;
  }
  #story01 .story02_chara .chara:nth-child(3) p img{
    padding-left: 6.2vw;
  }
  #story01 .story02_chara .chara:nth-child(4) p img{
    padding-left: 6.2vw;
  }
}

/* n3 */

#story01 .n3 .ttl .inr{
  background: url(../img/story01/story-ttl-bg03.jpg)no-repeat 50% 85%;
  background-size: cover;
  padding: 5.733vw 0;
}

#story01 .n3 h2{
  margin: 0 auto 4vw;
  width: 79.2307%; 
}

#story01 .n3 h2 + p{
  margin: 0 auto;
  width: 79.2307%;
}

@media (min-width: 960px) {
  
  #story01 .n3 .ttl .inr{
    background: url(../img/story01/story-ttl-bg03.jpg)no-repeat 50% 0;
    background-size: cover;
    padding: 7.375vw 0 8.8541vw;
  }

  #story01 .n3 h2{
    margin: 0 auto 1.5625vw;
    width: 68.6%;
  }

  #story01 .n3 h2 + p{
    margin: 0 auto;
    max-width: 510px;
    width: 68%; 
  }

  #story01 .story03_chara .chara:nth-child(1) p img{
    padding-left: 4.1vw;
  }
  #story01 .story03_chara .chara:nth-child(2) p img{
    padding-left: 5vw;
  }
  #story01 .story03_chara .chara:nth-child(3) p img{
    padding-left: 3.6vw;
  }
  #story01 .story03_chara .chara:nth-child(4) p img{
    padding-left: 4vw;
  }
}

/*--- 5. story02 ---*/

#story02{
  background: url(../img/story02/bg.jpg)no-repeat 50% 0;
  background-size: cover;
  background-attachment: fixed;
  color: #000;
  padding: 12.33333vw 0 0;
  width: 100%;
}

#story02 p{
  line-height: 140%;
}

#story02 h1{
  margin: 0 auto 4.5333vw;
  width: 36vw;
}

#story02 h1 + p{
  margin: 0 auto 5.5333vw;
  width: 90%;
}

#story02 ul.ss{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  width: 100%;
}

#story02 ul.ss li{
  -webkit-flex-grow: 1;
  flex-grow: 1;
  width: 33%;
}

#story02 .white{
  background: rgba(255,255,255,.6);
  padding: 6.5333vw 0 8.5333vw;
}

@media (min-width: 960px) {
  #story02{
  padding: 8.177vw 0 0;
  width: 100%;
  }

  #story02 p{
    line-height: 200%;
  }

  #story02 h1{
    margin: 0 auto 1.927vw;
    max-width: 277px;
    width: 14.479166vw;
  }

  #story02 h1 + p{
    margin: 0 auto 3.85416vw;
    max-width: 695px;
    width: 36.6979vw;
  }

  #story02 ul.ss{
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%;
  }

  #story02 ul.ss li{
    -webkit-flex-grow: 1;
    flex-grow: 1;
    width: 33%;
  }

  #story02 .white{
    background: rgba(255,255,255,.6);
    padding: 6.5333vw 0 8.5333vw;
  }

}

/* about */

#story02 .about h2{
  margin: 0 auto 4.5333vw;
  width: 30vw;
}

#story02 .about h2 + p{
  margin: 0 auto 5.5333vw;
  width: 88%;
}

#story02 .about figure{
  margin: 0 auto 2vw;
  width: 90%;
}

#story02 .about figcaption{
  margin: 0 auto 6.5333vw;
  text-align: center;
  width: 90%;
}

@media (min-width: 960px) {

  #story02 .about > div{
    display: -webkit-flex;
    display: flex;
    margin: 0 auto;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-bottom: 2.604vw;
    width: 55.89vw;
  }

  #story02 .about h2{
    margin: 0;
    max-width: 274px;
    width: 14.7708vw;
  }

  #story02 .about h2 + p{
    margin: 0;
    width: 39.177vw;
  }

  #story02 .about figure{
    margin: 0 auto 1.041666vw;
    max-width: 1199px;
    width: 62.5vw;
  }

  #story02 .about figcaption{
    margin: 0 auto 5.20833vw;
  }
}

/* visual */

#story02 .visual{
  background: url(../img/story02/visual-sp.jpg)no-repeat 50% 50%;
  background-size: 120%;
  background-attachment: fixed;
  height: 30vw;
  width: 100%;
}

@media (min-width: 960px) {

  #story02 .visual{
    background: url(../img/story02/visual.jpg)no-repeat 50% 0;
    background-size: cover;
    background-attachment: fixed;
    height: 0;
    padding-top: 20%;
    width: 100%;
  }
}

/* secret */

#story02 .secret h2{
  background: url(../img/story02/sub-ttl02-bg.jpg)no-repeat 50% 41%;
  background-size: cover;
  border: solid 1px #9da1b5;
  outline: solid 2px #465170;
  margin: 7.5333vw auto 4.5333vw;
  padding: calc(6.7vw - 3px) 0;
  text-align: center;
  width: calc(90% - 6px);
}
#story02 .secret.coming h2{
  background: url(../img/story02/sub-ttl02-bg-coming.jpg)no-repeat 50% 41%;
  background-size: cover;
}

#story02 .secret h2 img{
  width: 55vw;
}

#story02 .secret div{
  margin: 0 auto;
  width: 88%;
}

#story02 .secret div p:not(:first-child){
  margin-top: 2vw;
}

#story02 .secret div p.name{
  margin-top: 3vw;
  text-align: right;
}

@media (min-width: 960px) {
  
  #story02 .secret{
    display: -webkit-flex;
    display: flex;
    margin: 0 auto;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    padding-top: 5.208333vw;
    width: 71.875vw;
  }  

  #story02 .secret h2{
    background: url(../img/story02/sub-ttl02-bg.jpg)no-repeat 50% 41%;
    background-size: cover;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 0;
    width: 28.4375vw;
  }
  #story02 .secret.coming h2{
    background: url(../img/story02/sub-ttl02-bg-coming.jpg)no-repeat 50% 41%;
    background-size: cover;
    padding: calc(3.7vw - 3px) 0;
    width: 100%;
  }

  #story02 .secret h2 img{
    max-width: 472px;
    width: 24.58vw;
  }

  #story02 .secret div{
    margin: -6px 0 0 0;
    width: 39.9vw;
  }

  #story02 .secret div p{
    line-height: 160%;
  }

  #story02 .secret div p:not(:first-child){
    margin-top: 2.604vw;
  }

  #story02 .secret div p.name{
    margin-top: 2.604vw;
    text-align: right;
  }
}

/*--- 6. story03 ---*/

#story03{
  background: url(../img/story03/bg.jpg)no-repeat 50% 0;
  background-size: cover;
  background-attachment: fixed;
  color: #000;
  overflow: hidden;
  padding: 12.33333vw 0 10.13333vw;
  position: relative;
  width: 100%;
}

#story03 h1{
  margin: 0 auto 4.5333vw;
  width: 36vw;
}

#remakeList .slick-arrow{
  cursor: pointer;
  position: absolute;
  top: 16.133vw;
  width: 4.267vw;
  z-index: 1;
}

#remakeList .slick-arrow.prev{
  left: 6.667vw;
}

#remakeList .slick-arrow.next{
  right: 6.667vw;
}

#remakeList {
  position: relative;
}

#remakeList::before{
  background: #000f30;
  bottom: 0;
  content: "";
  display: block;
  height: 69.2vw;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 100%;
}

#remakeList h2 img,
#remakeList .summary p{
  width: 65.867vw;
}

#remakeList h2{
  background: url(../img/story03/bg-wht.png) repeat-x 0 100%;
  text-align: center;
}

#remakeList h2 img{
  display: inline;
}

#remakeList .summary{
  background: #fff;
  position: relative;
  z-index: 1;
}

#remakeList .summary p{
  box-sizing: border-box;
  font-size: 2.8vw;
  height: 40.4vw;
  line-height: 1.7;
  margin: 0 auto;
  padding-top: 1.6vw;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
}

#remakeList .chara,
#remakeList .chara .slick-slide{
  height: 78.933vw;
}

#remakeList .chara::before,
#remakeList .ss{
  background: #000f30;
}

#remakeList .chara{
  background: #fff;
  margin: -11.067vw 0 0 !important;
  overflow: hidden;
  position: relative;
}

#remakeList .chara::before{
  bottom: 0;
  content: "";
  display: block;
  height: 37.333vw;
  left: 0;
  position: absolute;
  width: 100%;
}

#remakeList .chara img{
  bottom: 0;
  left: 0;
  position: absolute;
  width: 56vw;
}

#remakeList .chara p{
  color: #fff;
  font-size: 2.8vw;
  line-height: 1.5;
  margin: 46vw 0 0 auto;
  width: 52vw;
}

#remakeList .chara p strong{
  color: #caa860;
  font-weight: 500;
}

#remakeList .chara p span{
  color: #caa860;
  font-size: 1.8vw;
  margin-right: .4em;
  position: relative;
  top: -.3em;
}

#remakeList .chara .slick-dots{
  bottom: 0;
  position: absolute;
  right: 6.667vw;
  width: auto;
}

#remakeList .chara .slick-dots li{
  margin: 0;
}

#remakeList .chara .slick-dots li button::before{
  color: #4d576f;
  font-size: 2.667vw;
}

#remakeList .ss{
  padding-bottom: 4vw;
}

#remakeList .ss ul{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 0 auto;
  padding-top: 3.867vw;
  width: 86.667vw;
}

#remakeList .ss li{
  width: 42.667vw;
}

#remakeThumb img{
  cursor: pointer;
  transition: all .3s;
}

#remakeThumb li:not(.slick-center) img{
  filter: saturate(20%);
}

#remakeThumb .slick-arrow{
  bottom: 0;
  cursor: pointer;
  margin: auto;
  position: absolute;
  top: 0;
  width: 4.267vw;
  z-index: 1;
}

#remakeThumb .slick-arrow.prev{
  left: 0;
}

#remakeThumb .slick-arrow.next{
  right: 0;
}

@media (min-width: 960px) {
  
  #story03{
    padding: 0 0 5.208vw;
  }

  #story03 h1{
    left: 0;
    margin: 0 auto 1.927vw;
    max-width: 277px;
    position: absolute;
    right: 0;
    top: 7.177vw;
    width: 14.427vw;
    z-index: 2;
  }
  
  #remakeList .slick-arrow{
    top: 30.885vw;
    width: 1.667vw;
  }

  #remakeList .slick-arrow.prev{
    left: 15.521vw;
  }

  #remakeList .slick-arrow.next{
    right: 15.521vw;
  }
  
  #remakeList::before{
    height: 34.6vw;
  }

  #remakeList h2 img,
  #remakeList .summary p{
    margin: 0 auto 0 18.75vw;
    width: 25.729vw;
  }

  #remakeList h2{
    margin-top: 21.406vw;
    padding-bottom: 1.042vw;
    text-align: left;
  }
  
  #remakeList .summary{
    background: #000f30;
  }

  #remakeList .summary p{
    color: #fff;
    font-size: .85vw;
    height: auto;
    text-shadow: none;
  }
  
  #remakeList .chara{
    background: transparent;
    display: -webkit-flex;
    display: flex;
    height: 40.833vw;
    margin: 0 !important;
    overflow: visible;
    position: absolute;
    right: 18.75vw;
    top: 10vw;
    width: 35.156vw;
    z-index: 1;
  }

  #remakeList .chara::before{
    display: none;
  }
  
  #remakeList .chara .slick-slide{
    box-sizing: border-box;
    float: none;
    height: auto;
    padding-left: 4.115vw;
    text-align: center;
  }
  
  #remakeList .chara.one li{
    width: 100%;
  }

  #remakeList .chara.two li{
    width: 50%;
  }

  #remakeList .chara.three li{
    width: 33.333%;
  }

  #remakeList .chara img{
    left: -2.6vw;
    position: relative;
    width: 22.969vw;
  }
  
  #remakeList .chara.one li img{
    left: 5.5vw;
  }

  #remakeList .chara p{
    font-size: .733vw;
    line-height: 1.6;
    margin-top: 1.6vw;
    position: relative;
    text-align: center;
    width: auto;
  }

  #remakeList .chara p span{
    font-size: .521vw;
  }

  #remakeList .ss{
    padding-bottom: 1.563vw;
  }

  #remakeList .ss ul{
    padding-top: 1.042vw;
    width: 62.5vw;
  }

  #remakeList .ss li{
    width: 30.781vw;
  }
  
  #remakeThumb img{
    width: 13.5vw;
  }
  
  #remakeThumb .slick-arrow{
    width: 1.667vw;
  }

}

/*--- 7. gallery ---*/

#gallery{
  background: url("../img/gallery/bg.png")no-repeat 50% 0;
  background-size: cover;
  padding: 13.33333vw 0 10.13333vw;
  width: 100%;
}

#gallery a img{
  -webkit-transition: transform .3s;
  transition: transform .3s;
}

#gallery a img:hover{
  -webkit-transform: scale(1.07);
  transform: scale(1.07);
}
  
#gallery img:hover a{
  display: block;
  height: 100%;
  width: 100%;
}

#gallery h2{
  margin-left: 28.8vw;
  width: 36vw;
}

#gallery figure{
  margin: 2.6vw auto 0;
  overflow: hidden;
  position: relative;
  width: 86.666%;
}

#gallery figure:first-child{
  margin: 6.3333vw auto 0 ;
}

#gallery figure::after{
  background: url(../img/gallery/label-movie.jpg)no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 4.1333vw;
  margin: -4.1333vw 0 0 auto;
  position: relative;
  width: 7.8666vw;
}

#gallery ul{
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 2.6vw auto;
  width: 86.666%;
}

#gallery ul li{
  width: calc((100% - 2.6vw) / 2);
  position: relative;
  overflow: hidden;
}

#gallery ul li::after{
  background: url(../img/gallery/label-ss.jpg)no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 4.1333vw;
  margin: -4.1333vw 0 0 auto;
  position: relative;
  width: 12.26666vw;
}

#gallery ul li:nth-child(n+3){
  margin-top: 2.6vw;
}
  
#gallery ul + figure,
#gallery ul + figure + figure{
  margin-top: 0;
}

#gallery figure:last-child{
  margin-top: 2.6vw;
}

@media (min-width: 960px) {
  #gallery{
    padding: 7.8125vw 0 6.20833vw;
  }

  #gallery h2{
    margin: 0 auto;
    max-width: 286px;
    width: 15.1041666vw;
  }

  #gallery h2 img{
    margin-left: 0;
  }

  #gallery .inr{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 2.5625vw auto 0;
    width: 100vw;
  }
  
  #gallery figure{
    margin: 0;
    width: 46.354166vw;
  }

  #gallery figure::after{
    height: 1.61458vw;
    margin: -1.61458vw 0 0 auto;
    width: 3.0729vw;
  }
  
  #gallery figure:first-child{
    margin: 0 2.52vw 0 0;
    width: 46.354166vw;
  }
  
  #gallery figure:nth-child(3),
  #gallery ul:nth-child(3){
    margin: 2.52vw 2.52vw 0 0;
  }
  
  #gallery figure:last-child{
    margin-top: 2.52vw;
  }

  #gallery ul{
    margin: 0;
    margin-left: 0;
    width: 46.354166vw;
  }

  #gallery ul li{
    width: calc((100% - 2.6vw) / 2);
  }

  #gallery ul li::after{
    height: 1.61458vw;
    margin: -1.61458vw 0 0 auto;
    width: 4.791666vw;
  }

  #gallery ul li:nth-child(n+3){
    margin-top: 2.52vw;
  }
  
  #gallery ul{
    margin-top: 2.52vw;
  }
}

/*--- 8. spec ---*/

/* spec - spec */

#spec .spec{
  background: url(../img/spec/spec-bg-sp.png) 50% 0 no-repeat;
  background-size: cover;
  box-shadow: 0px 170px 200px -100px #000528 inset;
  position: relative;
  padding: 13.33333vw 0 10.13333vw;
  width: 100%;
}

#spec .spec h2{
  margin-left: 26.666vw;
  width: 36vw;
}

#spec .spec div.detail{
  display: inline-block;
  width: 100%;
}

#spec .spec figure{
  margin: 4.5333vw 0 0 12.53333vw;
  width: 78.9333vw;
}

#spec .spec div{
  margin: 2vw auto 7.333vw;
  width: 66.6666vw;
}

#spec .spec dl{
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

#spec .spec dt{
  color: #c5c5c5;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  width: 30%;
}

#spec .spec dd{
  line-height: 200%;
  width: 68%;
}

#spec .spec .scenario{
  background: url(../img/spec/spec-bg02.png) 50% 0 no-repeat;
  background-size: cover;
  margin-top: 0;
  padding: 0;
  text-align: center;
  width: 100%;
}

#spec .spec .scenario h3{
  margin: 0 auto 1.6vw;
  width: 19.7333vw;
}

#spec .spec .scenario p{
  font-size: 2.133vw;
  line-height: 160%;
  margin: 0 auto;
  position: relative;
  width: 90vw;
  z-index: 10;
}

#spec .spec .scenario p span{
  color: #888dae;
  margin-left: 1em;
}

#spec .caution{
  margin: 2em auto;
  line-height: 180%;
  width: 90%;
}

@media (min-width: 960px) {
  #spec .spec{
    background: url(../img/spec/spec-bg.jpg) 50% 0 no-repeat;
    background-size: cover;
    background-attachment: fixed;
    box-shadow: none;
    padding: 7.8125vw 0 6.20833vw;
  }

  #spec .spec h2{
    margin: 0 auto;
    width: 14.1666vw;
  }
  
  #spec .spec h2 img{
    margin-left: -1.7229vw;
    max-width: 271px;
  }

  #spec .spec div.detail{
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 0 auto;
    width: 56.7708vw;
  }

  #spec .spec figure{
    margin: 1.8411vw 0 0 0;
    max-width: 592px;
    width: 31vw;
  }

  #spec .spec div{
    margin: 6.1458vw 0 5.729vw 0;
    width: 26.04166vw;
  }

  #spec .spec .scenario{
    margin: 0 auto;
    padding: 1.41666vw 0 1.302vw;
    width: 100%;
  }

  #spec .spec .scenario h3{
    margin: 0 auto 0.6777vw;
    max-width: 147px;
    width: 7.65625vw;
  }

  #spec .spec .scenario p{
    font-size: .833vw;
    width: 90vw;
  }

  #spec .caution{
    margin: 2em auto 3em;
    line-height: 180%;
    width: 39.58333vw;
  }
  
}

/* pri */

#spec .pri{
  background: url(../img/spec/pri-bg.jpg)no-repeat 50% 0;
  background-size: cover;
  background-attachment: fixed;                   
  padding-top: 10.666vw;               
  padding-bottom: 12.666vw;
}

#spec .pri h2{
  margin: 0 auto 6.666vw;
  width: 36vw;
}

#spec .pri .box{
  background: #fff;
  border: 1px solid #fff;
  outline: 1px solid rgba(209,209,209,.5);
  margin: 0 auto;
  width: calc(95% - 6px);
}

#spec .pri .box .inr{
  border: 1px solid rgba(209,209,209,.5);
  color: #000;
  padding: 1px;
}

#spec .pri .inr p:nth-child(1){
  text-align: center;
  margin: 0 auto;
  line-height: 150%;
  padding-top: 6.5vw;
  width: 82.6666%;
}

#spec .pri .inr p:nth-child(2){
  background: url(../img/spec/spec-bg02.png)no-repeat 50% 0;
  background-size: cover;
  text-align: center;
  margin: 4vw auto 3vw;
  width: 90%;
}

#spec .pri figure{
  margin: 0 auto ;
  width: 80%;
}

#spec .pri .inr p.coming{
  margin: 0 auto 6vw;
  width: 90%;
}

#spec .pri .inr table{
  text-align: center;
  margin: 0 auto 6vw;
  width: 90%;
}

#spec .pri tbody tr{
  border-bottom: #d0d0d0 1px solid;
}

#spec .pri .inr td,
#spec .pri .inr th{
  vertical-align: middle;
  line-height: 190%;
}

#spec .pri .inr th{
  color: #caa860;
  font-weight: normal;
  padding-bottom: 1vw;
}

#spec .pri .inr th:nth-child(1){
  width: 15%;
}
#spec .pri .inr th:nth-child(2){
  width: 30%;
}
#spec .pri .inr th:nth-child(3){
  width: 55%;
}

#spec .pri .inr td:not(:first-child){
  text-align: left;
}

@media (min-width: 960px) {
  #spec .pri{           
    padding: 5.208333vw 0;
  }

  #spec .pri h2{
    margin: 0 auto 2.604166vw;
    max-width: 285px;
    width: 14.84375vw;
  }

  #spec .pri .box{
    width: calc(62.3958vw - 6px);
  }

  #spec .pri .inr p:nth-child(1){
    padding-top: 2.60416vw;
    text-align: center;
    line-height: 150%;
    width: 100%;
  }

  #spec .pri .inr p:nth-child(2){
    margin: 2.60416vw auto 1.5625vw;
    max-width: 1000px;
    width: 52.1354vw;
  }

  #spec .pri figure{
    margin: 0 auto ;
    max-width: 551px;
    width: 28.6979vw;
  }

  #spec .pri .inr p.coming{
    text-align: center;
    margin: 0 auto 3vw;
    width: 39.58333vw;
  }

  #spec .pri .inr table{
    text-align: center;
    margin: 0 auto 3vw;
    width: 39.58333vw;
  }

  #spec .pri .inr td,
  #spec .pri .inr th{
    vertical-align: middle;
    padding-top: 1%;
    line-height: 200%;
  }

  #spec .pri .inr th{
    color: #caa860;
    font-weight: normal;
    padding-bottom: 1%;
  }

  #spec .pri .inr th:nth-child(1){
    width: 15%;
  }
  #spec .pri .inr th:nth-child(2){
    width: 40%;
  }
  #spec .pri .inr th:nth-child(3){
    width: 45%;
  }

  #spec .pri .inr td:not(:first-child){
    box-sizing: border-box;
    text-align: left;
    padding-left: 1.458333vw;
  }
}

/* store */


  #spec .store h2{
    margin: 10.666vw auto 6.666vw;
    width: 22vw;
  }

  #spec .store .wrap{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 0 auto;
    width: calc(95% - 6px);
  }

  #spec .store .inr{
    text-align: center;
  }

  #spec .store .inr p:nth-child(2){
    background: none;
    color: #fff;
    display: inline-block;
    font-size: 2.4vw;
    line-height: 150%;
    text-align: left;
    margin: 0;
    width: auto;
  }

  #spec .store .wrap .box{
    border: none;
    background: rgba(0,15,48,.85);
    box-sizing: border-box;
    padding: 0.83333vw;
    width: 100%;
  }

  #spec .store .wrap .box:not(:nth-child(-n+1)){
    margin-top: 4vw;
  }

  #spec .store .box .inr{
    display: -webkit-flex;
    display: flex;
    border: #aa915c 1px solid;
    box-sizing: border-box;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    height: 100%;
    padding: 3.1333vw 3.26666vw;
    width: 100%;
  }

  #spec .store .inr p.img{
    padding: 0;
    width: 100%;
  }

  #spec .store .inr p.txt{
    margin: 4vw 0;
    text-align: center;
  }

  #spec .store .inr p.txt.lines{
    text-align: left;
    margin: 4vw auto;
    width: 60%;
  }

  #spec .store .inr p.txt small{
    font-size: 1.8666vw;
    padding-left: .2em;
  }

  #spec .store .box .inr ul{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    width: 100%;
  }

  #spec .store .box .inr li{
    width: 48.5%;
  }

@media (min-width: 960px) {
  
  #spec .store a{
    transition: all .3s;
  }
  
  #spec .store a:hover{
    filter: brightness(85%);
  }

  #spec .store h2{
    margin: 5.208333vw auto 2.6041vw;
    width: 10vw;
  }

  #spec .store .wrap{
    width: 42.708vw;
  }

  #spec .store .wrap .box{
    width: 49%;
  }
  
  #spec .store .inr p:nth-child(2){
    font-size: 0.9375vw;
    line-height: 150%;
  }

  #spec .store .wrap .box{
    padding: 0.3645833vw;
    max-width: 386px;
    width: 20.104166vw;
  }

  #spec .store .wrap .box:not(:nth-child(-n+1)){
    margin: 0 auto;
  }

  #spec .store .wrap .box:not(:nth-child(-n+2)){
    margin-top: 1.302083vw;
  }

  #spec .store .box .inr{
    padding: 0.8333vw 0.8854vw;
  }
  
  #spec .store .inr p.txt{
    margin: 1.04166vw 0;
  }
  
  #spec .store .inr p.txt.lines{
    margin: 1.04166vw 0;
    width: 100%;
  }

  #spec .store .inr p.txt small{
    font-size: 0.729166vw;
    padding-left: .5em;
  }
}

/* next */

#spec .next #spe_next{
  position: absolute;
  top: -8.5vw;
}

#spec .next{
  background: url("../img/spec/next-bg.jpg")no-repeat 50% 50%;
  background-size: cover;
 /* background-attachment: fixed;*/
  margin-top: 12vw;
  padding: 11.33333vw 0 10.13333vw;
  overflow-x: hidden;
  position: relative;
  width: 100%;
}

#spec .next h2{
  width: 93%;
}

#spec .next .txt{
  background: url(../img/spec/next-txt-bg.png) 50% 50% no-repeat;
  background-size: cover;
  text-align: center;
  margin: 0 auto;
  padding: 3em 0;
  line-height: 150%;
  width: 100%;
}

#spec .next .logo{
  margin: 6vw auto 8vw;
  width: 60%;
}

#spec .next span{
  background: rgba(165,126,43,.8);
  border: rgba(202,168,96,.5) 1px solid;
  display: block;
  transition: all .3s;
  margin: 0 auto;
  position: relative;
  z-index: 10;
  width: 30vw;
}

#spec .next span a{
  box-sizing: border-box;
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 2vw 10.66666vw 1.5vw 4.6666vw;
  width: 32vw;
}

#spec .next span::after{
  background: url(../img/top/arw.png) 50% 50% no-repeat;
  background-size: contain;
  content: "";
  display: block;
  height: 1.0666vw;
  transition: all .3s;
  position: absolute;
  right: -1.6666vw;
  bottom: 2.4vw;
  opacity: .5;
  width: 13.46666vw;
}

#spec .next span:hover{
  border: rgba(202,168,96,1) 1px solid;
}
#spec .next span:hover::after{
  opacity: .8;
  margin-right: -2%;
}

@media (min-width: 960px) {

  #spec .next{
    margin-top: 6vw;
    padding: 5.208333vw 0 5.729166vw;
    overflow-x: hidden;
    width: 100%;
  }

  #spec .next h2{
    max-width: 1175px;
    width: 61.1979vw;
  }

  #spec .next .txt{
    background: url(../img/spec/next-txt-bg.png) 50% 50% no-repeat;
    background-size: cover;
    font-size: 0.9375vw;
    padding: 2.08333vw 0;
    line-height: 180%;
    width: 62.5vw;
  }

  #spec .next .logo{
    margin: 2.1875vw auto 2.24375vw;
    max-width: 627px;
    width: 32.65625vw;
  }

  #spec .next span{
    width: 10.8vw;
  }

  #spec .next span a{
    box-sizing: border-box;
    display: block;
    padding: 0.83333vw 3.541666vw 0.83333vw 1.3541666vw;
    width: 10.8vw;
  }

  #spec .next span::after{
    background: url(../img/top/arw.png) 50% 50% no-repeat;
    background-size: contain;
    content: "";
    display: block;
    height: 1.0666vw;
    transition: all .3s;
    position: absolute;
    right: 1.1334vw;
    bottom: 0.75vw;
    opacity: .5;
    width: 1.35416vw;
  }
}

/* --- 9. special --- */

#special{
  background: url("../img/special/bg.jpg")no-repeat 50% 50%;
  background-size: cover;
  background-attachment: fixed;
  padding: 13.33333vw 0 10.13333vw;
  overflow-x: hidden;
  width: 100%;
}

#special a img{
  -webkit-transition: transform .3s;
  transition: transform .3s;
}

#special a img:hover{
  -webkit-transform: scale(1.07);
  transform: scale(1.07);
}
  
#special img:hover a{
  display: block;
  height: 100%;
  width: 100%;
}

#special h2{
  margin-left: 28.8vw;
  width: 36vw;
}

#special .inr{
  display: block;
  overflow: hidden;
  position: relative;
}

#special .inr::before{
  background: url(../img/special/campaign-bg.png)no-repeat;
  content: "";
  display: block;
  height: 927px;
  position: fixed;
  width: 927px;
}
  
#special .inr h3{
  background: url(../img/spec/spec-bg02.png)no-repeat 50% 0;
  background-size: cover;
  text-align: center;
  margin: 4vw auto 3vw;
  width: 90%;
}

#special .inr h3 img{
  margin-left: -25%;
  width: 150%;
}

#special .inr h3 + p{
  margin: 0 auto;
  width: 90%;
}

#special .inr h3 + p + p{
  color: #000;
  text-align: center;
  line-height: 150%;
  margin: 6.666vw auto;
  width: 90%;
}

#special detail{
  background: rgba(6,15,72,.82);
  box-sizing: border-box;
  display: block;
  padding: 0.9333vw;
  margin: 0 auto;
  width: 90.5%;
}

#special detail .inr{
  border: rgba(255,255,255,.5) 1px solid;
  box-sizing: border-box;
  padding: 5.333vw 3.3333vw;
}

#special detail .inr h4{
  background: url(../img/special/campaign-ttl-bg.png)no-repeat 50% 0;
  background-size: 120% 100%;
  text-align: center;
  margin: 5vw auto 4vw;
  width: 100%;
}

#special detail .inr h4:first-child{
  margin: 0 auto 4vw;
}

#special detail .inr h4 img{
  width: 14.8vw;
}

#special detail .inr .day{
  font-size: 2.9333vw;
  font-weight: bold;
  text-align: center;
}

#special detail .inr .app{
  margin: 0 auto;
  font-size: 2.4vw;
  text-align: center;
  line-height: 150%;
  width: 80%;
}

#special detail .inr .app a{
  color: #caa860;
  transition: all .3s;
}

#special detail .inr .app a:hover{
  opacity: .7;
}

#special detail .inr ul{
  margin: 0 auto;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-bottom: 2em;
  width: 85%;
}

#special detail .inr ul.caution{
  margin-bottom: 1em;}

#special detail .inr ul li{
  font-size: 2.133vw;
  line-height: 150%;
  padding-left: 1em;
  position: relative;
}

#special detail .inr ul li:not(:nth-child(1)),
#special detail .inr ul li:not(:nth-child(2)){
  margin-top: 1em;
}
#special detail .inr ul li:nth-child(2){
  margin-right: 2em;
}

#special detail .inr ul li::before{
  content: "・";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 1em;
  width: 1em;
}

#special detail .inr ul.caution li::before{
  content: "※";
}

#special detail .inr .bene_box{
  background: rgba(0,0,0,.4);
  box-sizing: border-box;
  padding: 1em; 
  margin: 0 auto;
  width: 90%;
}

#special detail .inr .bene{
  color: #fff;
  text-shadow: 1px 1px rgba(0,0,0,1);
  font-size: 2.9333vw;
  text-align: center;
  line-height: 150%;
  margin-top: 1em;
}
#special detail .inr .bene strong{
  font-size: 3.2333vw;
}

#special detail .inr .bene_box .caution{
  line-height: 150%;
  margin-top: -2.3vw;
}

#special detail .inr ul.goods::before{
  display: none;
}

#special detail .inr .goods_box{
  background: rgba(0,0,0,.4);
  box-sizing: border-box;
  padding: 2em;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 0 auto;
  width: 90%;
}

#special detail .inr .goods_box h5{
  border: 1px solid #caa860;
  color: #caa860;
  text-align: center;
  font-weight: bold;
  font-size: 2.5vw;
  padding: .5em 0;
  margin-bottom: 2em;
}

#special detail .inr ul.goods{
  -webkit-justify-content: space-between;
  justify-content: space-between;
  margin: 0;
  width: 100%;
}

#special detail .inr ul.goods li{
  margin: 0;
  padding: 0;
  width: 48%;
}

#special detail .inr ul.goods li figure{
  background: #fff;
  padding: .4em;
}

#special detail .inr ul.goods li:nth-child(n+3) figure{
  background: none;
}

#special detail .inr ul.goods li span{
  display: inline-block;
  text-align: center;
  line-height: 150%;
  margin-top: 1em;
  width: 100%;
}

#special detail .inr ul.goods li:nth-child(n+3){
  margin-top: 2em;
}


#special detail .inr ul.goods li::before{
  display: none;
}

@media (min-width: 960px) {
  #special{
    padding: 7.8125vw 0 6.20833vw;
  }

  #special h2{
    margin: 0 auto;
    max-width: 292px;
    width: 15.208333vw;
  }

  #special h2 img{
    margin-left: -1.79166vw;
  }

  #special > .inr{
    -webkit-align-items: flex-end;
    align-items: flex-end;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin: 1.5625vw auto 0;
    width: 52.08333vw;
  }
  
  #special .inr h3 img{
    margin-left: 0;
    width: 100%;
  }
  
  #special .inr h3{
    margin: 2.96875vw auto 2.5vw;
    max-width: 1000px;
    width: 52.08333vw;
  }

  #special .inr h3 + p{
    width: 35.729vw;
  }

  #special .inr h3 + p + p{
    color: #000;
    text-align: center;
    line-height: 150%;
    margin: 2.1041vw auto;
    width: 100%;
  }

  #special detail{
    padding: 0.3645vw;
    width: 52.08vw;
  }

  #special detail .inr{
    padding: 1.60416vw 0 2.60416vw;
  }

  #special detail .inr h4{
    background: url(../img/special/campaign-ttl-bg.png)no-repeat 50% 0;
    background-size: 110% 100%;
    text-align: center;
    margin: 2.34375vw auto 1.5625vw;
    width: 100%;
  }

  #special detail .inr h4:first-child{
    margin: 0 auto 1.5625vw;
  }

  #special detail .inr h4 img{
    width: 5.78125vw;
  }

  #special detail .inr .day{
    font-size: 1.145833vw;
  }

  #special detail .inr .app{
    font-size: 0.9375vw;
  }

  #special detail .inr ul{
    margin: 0 auto;    
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 2em;
    width: 90%;
  }

  #special detail .inr ul li{
    font-size: 0.9375vw;
    line-height: 150%;
    padding-left: 1em;
    position: relative;
  }

  #special detail .inr ul li{
    margin-top: 0;
  }
  #special detail .inr ul li:nth-child(2){
    margin-right: 0;
  }

  #special detail .inr ul li::before{
    content: "・";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 1em;
    width: 1em;
  }

  #special detail .inr .bene_box{
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content:space-around;
    justify-content: space-around;
  }

  #special detail .inr .bene{
    font-size: 0.9375vw;
    text-align: center;
    line-height: 150%;
    margin-top: 1em;
  }
  #special detail .inr .bene strong{
    font-size: 1.2375vw;
  }
  
  figure.n1{
    width: 19.3229vw;
    margin: 0 auto;
  }
  
  figure.n2{
    width: 17.9166vw;
    margin: 0 auto;
  }

  #special detail .inr .bene_box .caution{
    display: block;
    text-align: left;
    line-height: 130%;
    margin-top: -4.7vw;
  }

  #special detail .inr .bene_box .caution li{
    font-size: .8vw;
    margin-top: .5em;
  }
  
  #special detail .inr .goods_box h5 {
    border: 1px solid #caa860;
    color: #caa860;
    text-align: center;
    font-weight: bold;
    font-size: 1.2vw;
    padding: .5em 0;
    margin: 0 auto 2em;
    width: 90%;
  }
  
  #special detail .inr ul.goods {
    margin: 0 auto;
    width: 90%;
  }

  #special detail .inr ul.goods li{
    margin: 0;
    padding: 0;
    width: 17.9166vw;
  }
  
}