@charset "utf-8";

/* --------------------

- style.css

-------------------- */
main {
  background: url('../img/top/bg.jpg') repeat center top, #fcf3f7;
  background-size: 100% auto;
  padding: 4.687vw 0 6.25vw;
}

.contents-ttl {
  position: relative;
}

.contents-ttl-img {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

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

  main {
    padding: 15.625vw 0 17.187vw;
  }

}

/* --------------------
- top
-------------------- */
#top {
  overflow: hidden;
  position: relative;
  margin: 0 0 4.427vw;
}

.top-lead {
  position: absolute;
  z-index: 3;
}

#top-lead-a {
  left: .520vw;
  max-width: 747px;
  top: 4.166vw;
  width: 38.906vw;
}

#kv {
  position: relative;
}

#top-logo {
  bottom: .260vw;
  left: 50%;
  max-width: 575px;
  position: absolute;
  transform: translateX(-50%);
  width: 29.947vw;
  z-index: 3;
}

#top-lead-b {
  max-width: 354px;
  right: 0;
  top: 1.562vw;
  width: 18.437vw;
}

#trailer {
  background: #000;
  bottom: 1.562vw;
  cursor: pointer;
  left: 1.302vw;
  max-width: 402px;
  position: absolute;
  width: 20.937vw;
  z-index: 3;
}

#trailer-play {
  left: 50%;
  max-width: 160px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8.333vw;
  z-index: 1;
}

#trailer-thumb {
  transition: .4s;
}

#trailer:hover #trailer-thumb {
  opacity: .6;
}

.top-petal {
  position: absolute;
  z-index: 2;
}

#top-petal-a {
  animation: fall-a 6s linear infinite;
  left: 4.166vw;
  top: 23.958vw;
  width: 1.562vw;
}

@keyframes fall-a {
  0% {
    left: 27.5vw;
    top: -.781vw;
    transform: rotateX(0deg) rotateZ(0deg);
  }
  100% {
    left: -1.562vw;
    top: 27.083vw;
    transform: rotateX(180deg) rotateZ(360deg);
  }
}

#top-petal-b {
  animation: fall-b 6s linear infinite;
  left: 9.895vw;
  top: 19.583vw;
  width: .729vw;
}

@keyframes fall-b {
  0% {
    left: 23.645vw;
    top: -1.145vw;
    transform: rotateY(0deg) rotateZ(0deg);
  }
  100% {
    left: -.729vw;
    top: 30.937vw;
    transform: rotateY(90deg) rotateZ(300deg);
  }
}

#top-petal-c {
  animation: fall-c 3s linear infinite;
  right: 3.437vw;
  top: 39.895vw;
  width: 1.718vw;
}

@keyframes fall-c {
  0% {
    right: -1.718vw;
    top: 36.718vw;
    transform: rotateY(0deg) rotateZ(0deg);
  }
  100% {
    right: 8.333vw;
    top: 49.479vw;
    transform: rotateY(90deg) rotateZ(300deg);
  }
}

#top-petal-d {
  animation: fall-d 8s linear infinite;
  right: 13.020vw;
  top: 14.687vw;
  width: 2.864vw;
}

@keyframes fall-d {
  0% {
    right: 8.072vw;
    top: -2.083vw;
    transform: rotateY(0deg) rotateZ(0deg);
  }
  100% {
    right: 32.291vw;
    top: 48.437vw;
    transform: rotateY(90deg) rotateZ(300deg);
  }
}

#top-petal-e {
  animation: fall-e 4s 1s infinite;
  right: 3.333vw;
  top: 31.927vw;
  width: 1.614vw;
}

@keyframes fall-e {
  0% {
    right: -1.614vw;
    top: 26.562vw;
    transform: rotateY(0deg) rotateZ(0deg);
  }
  100% {
    right: 12.395vw;
    top: 47.916vw;
    transform: rotateY(90deg) rotateZ(300deg);
  }
}

#top-petal-f {
  animation: fall-f 10s linear 1s infinite;
  right: 18.645vw;
  top: 8.333vw;
  width: 1.822vw;
}

@keyframes fall-f {
  0% {
    right: 14.583vw;
    top: -1.354vw;
    transform: rotateY(0deg) rotateZ(0deg);
  }
  100% {
    right: 38.437vw;
    top: 47.916vw;
    transform: rotateY(90deg) rotateZ(360deg);
  }
}

#top-petal-g {
  animation: fall-g 6s linear 1s infinite;
  left: 53.958vw;
  top: 4.010vw;
  width: 1.927vw;
}

@keyframes fall-g {
  0% {
    left: 58.437vw;
    top: -2.864vw;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    left: 24.479vw;
    top: 49.218vw;
    transform: rotateX(90deg) rotateY(90deg) rotateZ(360deg);
  }
}

#top-petal-h {
  animation: fall-h 8s 2s infinite;
  left: 4.687vw;
  top: 17.812vw;
  width: 1.093vw;
}

@keyframes fall-h {
  0% {
    left: 12.5vw;
    top: -2.083vw;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    left: -1.093vw;
    top: 31.510vw;
    transform: rotateX(90deg) rotateY(90deg) rotateZ(360deg);
  }
}

#top-petal-i {
  animation: fall-i 8s linear 2s infinite;
  left: 45.833vw;
  top: 3.645vw;
  width: 1.510vw;
}

@keyframes fall-i {
  0% {
    left: 49.739vw;
    top: -1.406vw;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    left: 23.177vw;
    top: 47.916vw;
    transform: rotateX(90deg) rotateY(90deg) rotateZ(360deg);
  }
}

#top-petal-j {
  animation: fall-j 4s linear infinite;
  left: 21.354vw;
  top: 20.312vw;
  width: 2.291vw;
}

@keyframes fall-j {
  0% {
    left: 31.770vw;
    top: -2.187vw;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    left: 9.895vw;
    top: 48.697vw;
    transform: rotateX(90deg) rotateY(90deg) rotateZ(360deg);
  }
}

#top-petal-k {
  animation: fall-k 8s linear 2s infinite;
  right: 14.583vw;
  top: 20vw;
  width: 3.229vw;
}

@keyframes fall-k {
  0% {
    right: 9.114vw;
    top: -4.739vw;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
  100% {
    right: 27.083vw;
    top: 51.302vw;
    transform: rotateX(90deg) rotateY(90deg) rotateZ(360deg);
  }
}

#top-petal-l {
  animation: fall-l 6s linear infinite;
  left: 12.343vw;
  top: 15.104vw;
  width: 4.739vw;
}

@keyframes fall-l {
  0% {
    left: 22.395vw;
    top: -3.229vw;
    transform: rotateY(0deg) rotateZ(0deg);
  }
  100% {
    left: -4.739vw;
    top: 44.270vw;
    transform: rotateY(90deg) rotateZ(360deg);
  }
}

#trailer-modal {
  align-items: center;
  background: rgba(0, 0, 0, .9);
  display: none;
  height: 100%;
  justify-content: center;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
}

#trailer-modal-box {
  background: #000;
  border: 1px solid #fff;
  box-sizing: content-box;
  height: 480px;
  position: relative;
  transform: translateY(15px);
  transition: .6s;
  width: 854px;
}

#trailer-modal-close {
  color: #fff;
  cursor: pointer;
  font-size: 80px;
  position: absolute;
  right: -10px;
  top: -80px;
  transition: .4s;
}

#trailer-modal-close:hover {
  opacity: .4;
}

#trailer-video {
  display: none;
  height: 100%;
  width: 100%;
}

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

  #top-lead-a {
    left: 50%;
    max-width: none;
    top: 2.5vw;
    transform: translateX(-50%);
    width: 96%;
  }

  #kv {
    margin: 0 0 4.062vw;
  }

  #top-logo {
    bottom: 64.062vw;
    max-width: none;
    width: 43.75vw;
  }

  #top-lead-b {
    max-width: none;
    top: 99.062vw;
    width: 100%;
  }

  #trailer {
    bottom: auto;
    left: auto;
    margin: 0 auto 4.062vw;
    max-width: none;
    position: relative;
    width: 94%;
  }

  #trailer-play {
    max-width: none;
    pointer-events: none;
    width: 34.375vw;
  }

  #trailer:hover #trailer-thumb {
    opacity: 1;
  }

  .top-petal {
    display: none;
  }

  #trailer-modal-box {
    height: 52.812vw;
    width: 93.75vw;
  }

  #trailer-modal-close {
    font-size: 25vw;
    right: -3.125vw;
    top: -25vw;
  }

  #trailer-modal-close:hover {
    opacity: 1;
  }

  #trailer-video {
    height: 99%;
  }

}

/* --------------------
- bnr
-------------------- */
#bnr {
  margin: 0 0 4.427vw;
}

#pre {
  max-width: 643px;
  width: 33.489vw;
}

#pre-sp {
  display: none;
}

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

  #bnr {
    display: none;
  }

  #pre {
    display: none;
  }

  #pre-sp {
    display: block;
    left: 50%;
    max-width: none;
    position: absolute;
    top: 82.812vw;
    transform: translateX(-50%);
    width: 94%;
    z-index: 1;
  }

}

/* --------------------
- widget
-------------------- */
#widget {
  margin: 0 0 5.468vw;
}

#widget-bnr {
  margin: 0 4.427vw 0 0;
}

.widget {
  border: 2px solid #ff3e99;
  padding: .677vw;
  position: relative;
  max-width: 780px;
  width: 40.625vw;
}

#news,
#system {
  margin: 0 0 4.630vw;
}

.petal {
  max-width: 35px;
  position: absolute;
  width: 1.822vw;
  z-index: 1;
}

.petal-top {
  left: 0;
  top: 0;
}

.petal-bottom {
  bottom: 0;
  right: 0;
}

.widget-box {
  background: #fff;
  border: 2px solid #ff3e99;
}

.widget-ttl {
  border-bottom: 2px solid #ff3e99;
}

.widget-contents {
  height: 46.354vw;
  max-height: 890px;
}

#twitter-contents {
  padding: .520vw;
}

.twitter-timeline {
  border: 1px solid #d6ecfa;
}

@media screen and (min-width: 1921px) {

  #widget-bnr {
    margin: 0 85px 0 0;
  }

  #news,
  #system {
    margin: 0 0 88.9px;
  }

}

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

  #widget {
    margin: 0 0 10.937vw;
  }

  #widget-bnr {
    margin: 0 auto 3.75vw;
  }

  .widget {
    border: 1px solid #ff3e99;
    margin: 0 auto;
    max-width: none;
    padding: 1.875vw;
    width: 94%;
  }

  #news,
  #system {
    margin: 0 auto 3.75vw;
  }

  .petal {
    max-width: none;
    width: 5.468vw;
  }

  .widget-box {
    border: 1px solid #ff3e99;
  }

  .widget-ttl {
    border-bottom: 1px solid #ff3e99;
  }

  .widget-contents {
    height: 157.812vw;
    max-height: none;
  }

  #twitter-contents {
    padding: 4.687vw;
  }

}

/* --------------------
- intro
-------------------- */
#intro-ttl {
  margin: 0 0 2.864vw;
}

#intro-ttl-img {
  max-width: 428px;
  width: 22.291vw;
}

#intro-contents {
  background: url('../img/intro/bg.jpg') no-repeat center top;
  background-size: cover;
  border-bottom: 1px solid #ff3e99;
  border-top: 1px solid #ff3e99;
  margin: 0 0 5.729vw;
  padding: 7.812vw 0;
}

#intro-lead {
  margin: 0 auto 2.083vw;
  max-width: 1001px;
  width: 52.135vw;
}

#intro-txt {
  margin: 0 auto;
  max-width: 1001px;
  width: 52.135vw;
}

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

  #intro-ttl {
    margin: 0 0 5.312vw;
  }

  #intro-ttl-img {
    max-width: none;
    width: 100%;
  }

  #intro-contents {
    background: url('../img/intro/bg_sp.jpg') no-repeat center top;
    background-size: cover;
    margin: 0 0 17.187vw;
    padding: 15.625vw 5.625vw;
  }

  #intro-lead {
    margin: 0 auto 2.083vw;
    max-width: none;
    width: 100%;
  }

  #intro-txt {
    max-width: none;
    width: 100%;
  }

}

/* --------------------
- system
-------------------- */
#system-ttl-img {
  max-width: 220px;
  width: 11.458vw;
}

#system-contents {
  margin: 0 0 5.468vw;
}

.system-list {
  border-bottom: 1px solid #e84699;
  border-top: 1px solid #e84699;
  height: 34.895vw;
  margin: 2.864vw 0 0;
}

#system-character {
  background: url('../img/system/character_bg.jpg') no-repeat left top;
  background-size: cover;
}

#system-zoom {
  background: url('../img/system/zoom_bg.jpg') no-repeat left top;
  background-size: cover;
}

#system-ougi {
  background: url('../img/system/ougi_bg.jpg') no-repeat left top;
  background-size: cover;
}

#system-multi {
  background: url('../img/system/online_bg.jpg') no-repeat left top;
  background-size: cover;
}

.system-box {
  flex-direction: row-reverse;
}

.system-box-txt {
  color: #000;
  font-size: 1.354vw;
  font-weight: bold;
  line-height: 2;
  max-width: 634px;
  padding: .156vw 0 0;
  text-shadow: 2px 2px 1px rgba(255, 255, 255, .6);
  width: 33.020vw;
}

.system-txt {
  padding: 1.562vw 0 0 1.562vw;
}

.system-box-img {
  margin: 0 1.041vw 0 0;
  max-width: 750px;
  width: 39.062vw;
}

#character-img {
  margin: 0 2.604vw 0 0;
  max-width: 872px;
  width: 45.416vw;
}

#zoom-img {
  border: 2px solid #e84699;
  margin: 0 5.208vw 0 0;
  max-width: 750px;
  width: 39.062vw;
}

#ougi-img {
  margin: 0 2.604vw 0 0;
  max-width: 822px;
  width: 42.812vw;
}

#multi-img {
  margin: 0 2.604vw 0 0;
  max-width: 750px;
  width: 39.062vw;
}

@media screen and (max-width: 768px) {
  
  #top {
    margin: 0;
  }

  #system-ttl-img {
    max-width: none;
    width: 100%;
  }

  #system-contents {
    margin: 0 0 10.937vw;
  }

  .system-list {
    height: auto;
    margin: 4.687vw 0 0;
    padding: 4.687vw 0;
  }

  #system-character {
    background: url('../img/system/character_bg_sp.jpg') no-repeat left top;
    background-size: cover;
  }

  #system-zoom {
    background: url('../img/system/zoom_bg_sp.jpg') no-repeat left top;
    background-size: cover;
  }

  #system-ougi {
    background: url('../img/system/ougi_bg_sp.jpg') no-repeat left top;
    background-size: cover;
  }

  #system-online {
    background: url('../img/system/online_bg_sp.jpg') no-repeat left top;
    background-size: cover;
  }

  .system-box {
    display: block;
  }

  .system-box-txt {
    font-size: 3.75vw;
    margin: 0 auto 4.687vw;
    padding: 0;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, .6);
    width: 89%;
  }

  .system-category {
    max-width: none;
    width: 100%;
  }

  .system-txt {
    padding: 4.687vw 0 0;
  }

  .system-box-img {
    margin: 0 auto;
    max-width: none;
    width: 89%;
  }

  #character-img {
    margin: 0;
    max-width: none;
    width: 100%;
  }

  #zoom-img {
    margin: 0 auto;
    max-width: none;
    width: 89%;
  }

  #ougi-img {
    margin: 0;
    max-width: none;
    width: 100%;
  }

  #multi-img {
    margin: 0;
    max-width: none;
    width: 100%;
  }

}

/* --------------------
- character
-------------------- */
#character-ttl-img {
  max-width: 339px;
  width: 17.656vw;
}

#character-list-contents {
  width: 78.125vw;
  margin: 2.8125vw auto 5.729vw;
  display: flex;
  flex-wrap: wrap;
}

.character-list-item {
  width: 17.96875vw;
  margin-bottom: 2.083333vw;
  transition: opacity .3s ease;
  cursor: pointer;
}

.character-list-item:hover {
  opacity: .5;
}

.character-list-item:not(:nth-child(4n)) {
  margin-right: 2.083333vw;
}

#character-detail-container {
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.8);
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 9.58vw 0;
  overflow-y: scroll;
  display: none;
}

.character-detail-box {
  position: relative;
  z-index: 0;
}

#character-detail-close {
  position: fixed;
  top: 3.125vw;
  right: 3.125vw;
  width: 3.75vw;
  height: 3.75vw;
  cursor: pointer;
  z-index: 2;
}

#character-control {
}

#character-prev {
  width: 3.125vw;
  top: 32.34375vw;
  left: 2.86458333vw;
  position: absolute;
  z-index: 2;
}

#character-next {
  width: 3.125vw;
  top: 32.34375vw;
  right: 2.86458333vw;
  position: absolute;
  z-index: 2;
}

.character-control-btn {
  cursor: pointer;
  transition: opacity .3s ease;
}

.character-control-btn:hover {
  opacity: .5;
}

.character-voice-list {
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  z-index: 1;
}

#character-detail-0 .character-voice-list {
  top: 22.65625vw;
  left: 10.46875vw;
}

#character-detail-1 .character-voice-list {
  top: 21.041666vw;
  left: 51.09375vw;
}

#character-detail-2 .character-voice-list {
  top: 21.3541666vw;
  left: 10.67708333vw;
}

#character-detail-3 .character-voice-list {
  top: 20.9375vw;
  left: 51.3541666vw;
}

#character-detail-4 .character-voice-list {
  top: 22.6041666vw;
  left: 10.57291666vw;
}

#character-detail-5 .character-voice-list {
  top: 19.375vw;
  left: 51.1458333vw;
}

#character-detail-6 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-7 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-8 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-9 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-10 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-11 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-12 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-13 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-14 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-15 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-16 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-17 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-18 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-19 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-20 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-21 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-22 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-23 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-24 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-25 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-26 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-27 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-28 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-29 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-30 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-31 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-32 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-33 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-34 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-35 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-36 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-37 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-38 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-39 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-40 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-41 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-42 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-43 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-44 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-45 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-46 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-47 .character-voice-list {
  top: 27.8125vw;
  left: 10.57291666vw;
}

#character-detail-48 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

#character-detail-49 .character-voice-list {
  top: 27.8125vw;
  left: 51.1458333vw;
}

.character-voice-item {
  width: 3.90625vw;
  height: 3.90625vw;
  transition: opacity .3s ease;
  cursor: pointer;
}

.character-voice-item.act,
.character-voice-item:hover {
  opacity: .5;
}

.audio-container {
  position: absolute;
  display: none;
}

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

  #character-ttl-img {
    max-width: none;
    width: 100%;
  }

  #character-list-contents {
    width: 93.75vw;
    margin: 14.0625vw auto;
  }

  .character-list-item {
    width: 45.3125vw;
    margin-bottom: 3.125vw;
  }

  .character-list-item:not(:nth-child(4n)) {
    margin-right: 0;
  }

  .character-list-item:not(:nth-child(2n)) {
    margin-right: 3.125vw;
  }

  #character-detail-container {
    padding: 0 0 20vw;
  }

  #character-detail-close {
    position: fixed;
    top: 3.125vw;
    right: 3.125vw;
    width: 10.9375vw;
    height: 10.9375vw;
    cursor: default;
  }

  #character-control {
    width: 61.875vw;
    margin: 0 auto;
    padding: 7.8125vw 0;
    display: flex;
    justify-content: space-between;
  }

  #character-prev {
    width: 7.1875vw;
    position: initial;
  }

  #character-next {
    width: 7.1875vw;
    position: initial;
  }

  .character-control-btn {
    cursor: default;
    transition: none;
  }

  .character-control-btn:hover {
    opacity: 1;
  }

  .character-voice-list {
    top: 28.125vw !important;
    left: 1.875vw !important;
  }
  
  .character-voice-item {
    width: 11.875vw;
    height: 11.875vw;
    transition: none;
    cursor: default;
  }

}


/* --------------------
- movie
-------------------- */
#movie-ttl-img {
  max-width: 176px;
  width: 9.11458333vw;
}

#movie-list-contents {
  width: 78.125vw;
  margin: 2.8125vw auto 5.729vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.trailer-box {
  cursor: pointer;
  width: 32.291666vw;
  z-index: 3;
  margin: 0 1.5625vw 1.5625vw;
}

.trailer-box-inner {
  position: relative;
  background: #000;
}

.trailer-play {
  left: 50%;
  max-width: 160px;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8.333vw;
  z-index: 1;
}

.trailer-thumb {
  transition: .4s;
}

.trailer-box:hover .trailer-thumb {
  opacity: .6;
}

.trailer-box-ttl {
  font-size: 1.354vw;
  padding: 1vw 0;
}

@media screen and (max-width: 768px) {
  
  #movie-ttl-img {
    max-width: 100%;
    width: 100%;
  }

  #movie-list-contents {
    width: 93.75vw;
    margin: 5.46875vw auto 14.0625vw;
    display: block;
  }

  .trailer-box {
    cursor: default;
    width: 100%;
    margin: 0 0 9.375vw;
  }

  .trailer-box-inner {
  }

  .trailer-play {
    max-width: none;
    pointer-events: none;
    width: 34.375vw;
  }

  .trailer-thumb {
    transition: none;
  }

  .trailer-box:hover .trailer-thumb {
    opacity: 1;
  }

  .trailer-box-ttl {
    font-size: 4.062vw;
    padding: 3vw 0 0;
  }

}

/* --------------------
- pre
-------------------- */
#pre-contents {
  background: url('../img/pre/bg.jpg') no-repeat center center;
  background-size: cover;
  border-bottom: 1px solid #e84699;
  margin: 0 0 5.208vw;
  padding: 0 0 5.208vw;
}

#pre-follow {
  position: relative;
}

#follow {
  bottom: 22.916vw;
  display: block;
  left: 50%;
  margin: 0 auto;
  max-width: 837px;
  position: absolute;
  transform: translateX(-50%);
  width: 43.593vw;
  z-index: 1;
}

#pre-notes {
  margin: -14.583vw auto 0;
  position: relative;
  width: 72.916vw;
  z-index: 1;
}

#pre-notes-ttl {
  background: #fff;
  border-bottom: 1px solid #e84699;
  font-size: 1.25vw;
  font-weight: bold;
  margin: 0 0 1.822vw;
  padding: .937vw 0;
  text-align: center;
}

.pre-txt {
  font-size: 1.041vw;
  font-weight: bold;
  line-height: 1.8;
  margin: 0 0 1.302vw;
  text-shadow: 2px 2px 1px rgba(255, 255, 255, .6);
}

.pre-txt:last-child {
  margin: 0;
}

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

  #pre-contents {
    background: url('../img/pre/bg_sp.jpg') no-repeat center center;
    background-size: cover;
    margin: 0 0 15.625vw;
    padding: 0 0 15.625vw;
  }

  #follow {
    border-radius: 2.5vw;
    bottom: 15.625vw;
    box-shadow: 4px 4px 3px rgba(0, 0, 0, .2);
    max-width: none;
    width: 88%;
  }

  #pre-notes {
    margin: 0 auto;
    width: 88%;
  }

  #pre-notes-ttl {
    font-size: 3.75vw;
    margin: 0 0 5.312vw;
    padding: 3.125vw 0;
  }

  .pre-txt {
    font-size: 3.75vw;
    line-height: 2;
    margin: 0 0 5.312vw;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, .6);
  }

}
