@charset "UTF-8";

/* ticket */

.ticket {
  background-image: url(../img/modal/ticket_bg.png);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

.ticket-wrapper {
  max-width: 900px;
  width: 90%;
  margin: 0 auto;
  padding: 59px 0 113px 0;
}

.ticket-logo {
  width: 44.81%;
  margin: 0 auto 29px;
}

.ticket-box {
  width: 100%;
  margin: 0 auto 27px;
  background-image: url(../img/modal/ticket_box.png);
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
}

.ticket-box-inner {
  position: relative;
  padding: 25.555% 0 11.222% 0;
}

.ticket-ttl {
  position: absolute;
  top: -4%;
  left: 0;
  right: 0;
  margin: auto;
  width: 46.666%;
}

.ticket-pre {
  width: 79.717%;
  margin: 0 auto 1.377%;
}

.ticket-headline {
  width: 43.821%;
  margin: 0 auto 1.844%;
}

.ticket-price {
  width: 71.895%;
  margin: 0 auto;
}

.ticket-btn {
  width: 40.707%;
  margin: 0 auto;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
}

.ticket-btn:hover{
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

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

  .ticket {
    background-image: url(../img/modal/ticket_bg_sp.png);
  }

  .ticket-wrapper {
    width: 100%;
    padding: 63px 0 107px 0;
  }
  
  .ticket-logo {
    width: 81.842%;
    margin: 0 auto 29px;
  }
  
  .ticket-box {
    margin: 0 auto 17px;
    background-image: url(../img/modal/ticket_box_sp.png);
  }
  
  .ticket-box-inner {
    padding: 63% 0 31% 0;
  }
  
  .ticket-ttl {
    top: -2%;
    left: 0;
    right: 0;
    margin: auto;
    width: 93.44%;
  }
  
  .ticket-pre {
    width: 100%;
    margin: 0 auto 6.2%;
  }
  
  .ticket-headline {
    width: 93.437%;
    margin: 0 auto 4.5%;
  }
  
  .ticket-price {
    width: 93.333%;
  }
  
  .ticket-btn {
    width: 93.333%;
  }
  
}

/* sweetpotato */

.sweetpotato {
  background-color: #C481BE;
}

.sweetpotato-wrapper {
  max-width: 900px;
  width: 90%;
  margin: 0 auto;
  padding: 121px 0 165px 0;
}

.sweetpotato-box {
  width: 100%;
  margin: 0 auto;
  background-image: url(../img/modal/sweetpotato_story_head.png);
  background-color: #FFE8BD;
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
  border-radius: 30px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  -ms-border-radius: 30px;
  -o-border-radius: 30px;
}

.sweetpotato-box-inner { 
  position: relative;
  padding: 34.6% 0 13.2% 0;
}

.sweetpotato-ttl {
  width: 37.4%;
  position: absolute;
  top: -6%;
  left: 0;
  right: 0;
  margin: auto;
}

.sweetpotato-txt {
  width: 72.2%;
  margin: 0 auto 5.7%;

}

.sweetpotato-img {
  width: 72.2%;
  margin: 0 auto;
}

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

  .sweetpotato-wrapper {
    width: 100%;
    padding: 100px 0 130px 0;
  }
  
  .sweetpotato-box {
    width: 100%;
    background-image: url(../img/modal/sweetpotato_story_head_sp.png);
    background-size: contain;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
}
  
  .sweetpotato-box-inner { 
    padding: 75.7% 0 23.2% 0;
  }
  
  .sweetpotato-ttl {
    width: 75.2%;
    position: absolute;
    top: -3.5%;
  }
  
  .sweetpotato-txt {
    width: 87.9%;
    margin: 0 auto 11.4%;
  }
  
  .sweetpotato-img {
    width: 90.6%;
  }

}

/* present */

.present {
  background-image: url(../img/modal/present_bg.png);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}

.present-wrapper {
  max-width: 900px;
  width: 90%;
  margin: 0 auto;
  padding: 59px 0 147px 0;
}

.present-logo {
  width: 42.392%;
  margin: 0 auto 28px;
}

.present-box {
  width: 100%;
  margin: 0 auto;
  background-image: url(../img/modal/present_box.png);
  background-size: 100% auto;
  background-position: top center;
  background-repeat: no-repeat;
}

.present-box-inner {
  position: relative;
  padding: 25% 0 13.4% 0;
}

.present-ttl {
  width: 23.7%;
  position: absolute;
  top: -1.1%;
  left: 0;
  right: 0;
  margin: auto;
}

.present-img {
  width: 45.946%;
  margin: 0 auto 5.4%;
}

.present-txt {
  width: 71%;
  margin: 0 auto;
}

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

  .present {
    background-image: url(../img/modal/present_bg_sp.png);
  }
  
  .present-wrapper {
    width: 100%;
    padding: 63px 0 55px 0;
  }
  
  .present-logo {
    width: 81.84%;
    margin: 0 auto 7px;
  }
  
  .present-box {
    background-image: url(../img/modal/present_box_sp.png);
  }
  
  .present-box-inner {
    padding: 70% 0 36.2% 0;
  }
  
  .present-ttl {
    width: 57.066%;
    top: 0.4%;
  }
  
  .present-img {
    width: 95.7%;
    margin: 0 auto 12% 0;
  }
  
  .present-txt {
    width: 71.2%;
  }

}

/* staff */

.staff .-mb05 {
  margin: 0 0 0.5em;
}

.staff .-mb06 {
  margin: 0 0 0.6em;
}

.staff .-mb1 {
  margin: 0 0 1em;
}

.staff .-mb2 {
  margin: 0 0 2em;
}

.staff .-mb3 {
  margin: 0 0 3em;
}

.staff .-mb4 {
  margin: 0 0 4em;
}

.staff .-mb5 {
  margin: 0 0 5em;
}

.staff .-mb6 {
  margin: 0 0 6em;
}

.staff-wrapper {
}

.staff-head {
  width: 100%;
}

.staff-box {
  background-color: #33004F;
}

.staff-box-inner {
  width: 80.321%;
  margin: 0 auto;
  position: relative;
  padding: 0 0 50px 0;
}

.staff-ttl {
  width: 35.712%;
  margin: -50px auto 84px;
}

.staff-roll {
  color: #fff;
  font-size: 1.7vw;
  line-height: 1.45;
  text-align: left;
  margin: 0 0 6em;
}

.staff-roll-ttl {
  margin: 0 0 2em;
  font-weight: bold;
}

.staff-roll dl {
  display: flex;
  width: 100%;
}

.staff-roll dt {
  font-weight: normal;
  width: 40%;
}

/* .staff-roll dd {
  width: 30%;
} */

.staff-roll .-second {
  width: 40%;
}

.staff-roll .-third {
  width: 20%;
}

.staff-roll-voice {
  margin: 0 0 4em;
}

.staff-roll-role {
  margin: 0 0 50px;
}

.staff-txt_center {
  text-align: center;
  margin: 0 0 2em;
}

.staff-roll-copyright {
  margin: 3em 0 0 0;
}

.staff-foot {
  width: 100%;
}

@media screen and (max-width: 768px) {
  
  .staff-box-inner {
    width: 88%;
    padding: 0 0 30px 0;
  }
  
  .staff-ttl {
    width: 60.606%;
    margin: -25px auto 67px;
  }
  
  .staff-roll {
    font-size: 3.6vw;
    line-height: 1.5;
  }
  
  .staff-roll dl {
    flex-wrap: wrap;
  }
  
  .staff-roll dt {
    width: 100%;
    margin: 0;
  }
  
  .staff-roll .-second {
    width: 60%;
  }

  .staff-roll .-third {
    width: 40%;
  }
  
  .staff-roll-role {
    margin: 0 0 50px;
  }
  
  .staff-txt_center {
    text-align: center;
    margin: 0 0 2em;
  }
  
  .staff-roll-copyright {
    margin: 3em 0 0 0;
  }

}