@charset "utf-8";


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

animation

----------------------------------*/
@keyframes mv_ttl {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-60px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-30px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

@keyframes ani_fluffy {
  0% { transform: translateY(-5px); }
  100% { transform: translateY(5px); }
}

@keyframes ani_rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes ani_sway {
  0% {transform: translate(0px, 0px) rotateZ(0deg)}
  25% {transform: translate(2px, 2px) rotateZ(1deg)}
  50% {transform: translate(0px, 2px) rotateZ(0deg)}
  75% {transform: translate(2px, 0px) rotateZ(-1deg)}
  100% {transform: translate(0px, 0px) rotateZ(0deg)}
}

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

@keyframes mv_ttl {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-30px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-15px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

}


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

mv

----------------------------------*/
.mv {
  background: url(../img/mv_bg.jpg) no-repeat center center;
  background-size: cover;
  padding-top: 4vw;
}

.mv > figure {
  width: 70vw;
  margin: 0 auto;
  animation: ani_fluffy 1.5s ease-in-out infinite alternate;
}

.mv h1 {
  width: 700px;
  margin: 5vw auto 0;
}

.mv h1 img {
  animation: mv_ttl 3s infinite;
}


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

.mv {
  padding-top: 8vw;
}

.mv > figure {
  width: 82vw;
}

.mv h1 {
  width: 64vw;
  margin-top: 7vw;
}

}


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

information

----------------------------------*/
.information {
  padding-top: 40px;
  text-align: center;
}

.information .inner {
  position: relative;
}

.information .deco {
  position: absolute;
  width: 130px;
  top: 300px;
  right: -30px;
  animation: ani_fluffy 1.5s ease-in-out infinite alternate;
}

.information header p {
  background: #111;
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  display: inline-block;
  padding: 8px 20px;
  letter-spacing: .2em;
}

.information header h2 {
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: .16em;
  margin-top: 20px;
}

.information header h2 span {
  font-size: 1.6rem;
  font-weight: inherit;
  letter-spacing: .12em;
}

.information .tracks {
  margin-top: 100px;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: space-between;
  justify-content: space-between;
}

.information .tracks figure {
  width: 50%;
}

.information .tracks section {
  display: -webkit-box;
  display: inline-flex;
  -webkit-box-pack: center;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 50%;
  text-align: left;
  padding: 0 6%;
  font-size: 1.3rem;
}

.information .tracks section li {
  margin-bottom: 14px;
}

.information .tracks section li:last-child {
  line-height: 1.4;
  font-size: 1.2rem;
  color: #666;
}

.information .pack {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: space-between;
  justify-content: space-between;
  text-align: left;
  border: solid 4px #111;
  margin-top: 40px;
  background: #fff;
}

.information .pack section:first-child {
  margin: 5% 0 5% 6%;
  padding-right: calc(6% + 2px);
  border-right: solid 4px #111;
  width: calc(44% + 2px);
}

.information .pack section:last-child {
  margin: 5% 6% 5% 6%;
  width: calc(38% - 2px);
}

.information .pack section h3 {
  font-size: 1.8rem;
  font-weight: 700;
}

.information .pack section p {
  line-height: 1.8;
  font-size: 1.3rem;
  margin-top: 20px;
}

.information .pack section > section:last-child {
  border-top: solid 2px #111;
  margin-top: 40px;
  padding-top: 40px;
}

.information .pack section p em {
  font-weight: 700;
}

.information .pack section p span {
  color: #1f84c7;
}

.information .ticket {
  border: solid 4px #111;
  margin-top: -4px;
  background: #fff;
  text-align: left;
  padding: 5% 6%;
  line-height: 1.8;
  text-align: justify;
  text-justify: inter-ideograph;
}

.information .ticket h3 {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 20px;
}

.information .ticket p:first-of-type {
  margin-bottom: 20px;
}

.information .ticket em {
  font-weight: 700;
}

.information .ticket .note {
  font-size: 1.2rem;
  color: #666;
}

.information .ticket p:last-of-type {
  margin-top: 20px;
  color: #1f84c7;
  font-size: 1.3rem;
}


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

.information {
  padding-top: 7vw;
}

.information .deco {
  width: 18vw;
  top: 150vw;
  right: 14vw;
}

.information header p {
  font-size: 3.733vw;
  font-weight: 700;
  padding: 2vw 4.6vw;
}

.information header h2 {
  font-size: 9.067vw;
  margin-top: 4vw;
  line-height: 1.1;
}

.information header h2 span {
  font-size: 3.467vw;
}

.information .tracks {
  flex-direction: column;
  margin-top: 10.667vw;
}

.information .tracks figure {
  width: 60%;
  margin: 0 auto;
}

.information .tracks section {
  width: 100%;
  margin-top: 10vw;
  padding: 0;
  font-size: 3.2vw;
}

.information .tracks section li:last-child {
  font-size: 2.667vw;
  margin-top: 6vw;
}

.information .pack {
  margin-top: 8vw;
  padding: 8vw;
  display: block;
  background: #fff;
}

.information .pack figure {
  width: 40vw;
  margin: 0 auto 8vw;
}

.information .pack section {
  width: 100%;
  padding: 0;
  margin: 0;
}

.information .pack section:first-child,
.information .pack section:last-child {
  border-right: none; 
  padding: 0;
  margin: 0;
  width: 100%;
}

.information .pack section:last-child {
  padding: 0;
  margin: 8vw 0 0 0;
}

.information .pack section h3 {
  font-size: 4.267vw;
}

.information .pack section p {
  font-size: 3.2vw;
  margin-top: 3vw;
}

.information .pack section > section:last-child {
  margin-top: 8vw;
  padding-top: 8vw;
}

.information .ticket {
  padding: 8vw;
  font-size: 3.2vw;
}

.information .ticket h3 {
  font-size: 4.267vw;
  line-height: 1.4;
  margin-bottom: 3vw;
}

.information .ticket p:first-of-type {
  margin-bottom: 5vw;
}

.information .ticket .note {
  font-size: 2.667vw;
}

.information .ticket p:last-of-type {
  margin-top: 5vw;
  font-size: 3.2vw;
}


}


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

movie

----------------------------------*/
.movie {
  padding-top: 160px;
  text-align: center;
}

.movie .inner {
  position: relative;
}

.movie .deco {
  position: absolute;
  width: 420px;
  bottom: 80px;
  left: -280px;
  animation: ani_sway .2s ease-in-out infinite alternate;
}

.movie .slider {
  position: relative;
}

.movie .slider .video {
  position: relative;
  width: 80%;
  height: 0;
  padding-bottom: 45%;
  margin: 0 auto;
}

.movie .slider .video iframe {
  position:  absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.movie .slick-next,
.movie .slick-prev {
  content: "";
  width: 36px;
  height: 36px;
  border-top: 2px solid #111;
  border-right: 2px solid #111;
  transform: rotate(45deg);
  position: absolute;
  top: calc(50% - 36px);
  right: 8px;
  transition: all 200ms;
  z-index: 9999;
}

.movie .slick-prev {
  transform: rotate(225deg);
  left: 8px;
}

.movie .slider p {
  margin-top: 30px;
  line-height: 1.6;
}

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

.movie {
  padding-top: 28vw;
}

.movie .deco {
  width: 66vw;
  top: -17vw;
  left: -24vw;
}

.movie .slick-next,
.movie .slick-prev {
  width: 4vw;
  height: 4vw;
  top: calc(50% - 12vw);
  right: 0;
}

.movie .slick-prev {
  left: 0;
}

.movie .slider p {
  margin-top: 3vw;
  font-size: 3.467vw;
}

}


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

special

----------------------------------*/
.special {
  padding-top: 160px;
  text-align: center;
  position: relative;
}

.special .inner {
  position: relative;
}

.special .deco:nth-of-type(1) {
  position: absolute;
  width: 120px;
  top: -60px;
  left: calc(50% - 60px);
  z-index: 999;
  animation: ani_fluffy 1.5s ease-in-out infinite alternate;
}

.special .deco:nth-of-type(2) {
  position: absolute;
  width: 70px;
  bottom: 640px;
  left: -10px;
  z-index: 999;
  animation: ani_sway .2s ease-in-out infinite alternate;
}

.special .deco:nth-of-type(3) {
  position: absolute;
  width: 110px;
  bottom: 230px;
  right: -13px;
  z-index: 999;
  animation: ani_rotation 3s linear infinite;
}

.special .inner > div {
  position: relative;
  border: solid 4px #111;
  padding: 80px 0;
  background: #fff;
}

.special h3 {
  font-size: 2.2rem;
  font-weight: 700;
  position: relative;
  display: inline-block;
}

.special h3:before,
.special h3:after {
  content: "";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 28px;
  height: 2px;
  background: #111;
}

.special h3:before {
  left: -40px;
  transform: rotate(-130deg);
}

.special h3:after {
  right: -40px;
  transform: rotate(130deg);
}

.special .badge {
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: 1.4rem !important;
  line-height: 1.8;
  font-weight: 700;
  color: #fff !important;
  background: #1f84c7;
  margin-top: 0 !important;
  border-radius: 50%;
  height: 140px;
  width: 140px;
  padding-top: 40px;
}

.special .inner > div > div {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  flex-wrap: wrap;
}

.special .inner > div > div section {
  margin-top: 80px;
  padding: 0 20px;
  width: 50%;
}

.special .inner > div > div section:nth-child(even) {
  border-left: solid 4px #111; 
}

.special .inner > div > div figure {
  width: 50%;
  margin: 0 auto 30px;
}

.special .inner > div > div p {
  font-weight: 700;
}


.special .inner > div > div p a {
  display: inline-block;
  background: #a9599f;
  color: #fff;
  border-radius: 6px;
  padding: 14px 25px;
  transition: all .3s ease;
}

.special .inner > div > div p a:hover {
  transform: translate3d(0, 3px, 0);
}

.special .inner > div > div p a:hover::after {
  background: none;
}

.special .inner > div > div h4 {
  font-weight: 700;
  font-size: 1.5rem;
  margin-top: 12px;
  line-height: 1.4;
}

.special .inner > div > div h4 span {
  font-size: 1.2rem;
  color: #666;
  display: block;
  font-weight: 400;
  padding-top: 10px;
}

.special .inner > div > p {
  font-size: 1.2rem;
  color: #666;
  margin-top: 80px;
  line-height: 1.6;
}

.special #modal {
  display: none;
}

.modaal-content-container {
  padding: 0 50px 50px !important;
}

.modaal-content-container dt {
  font-weight: 700;
  font-size: 1.5rem;
  color: #a9599f;
  margin: 50px 0 20px;
  padding-bottom: 10px;
  border-bottom: solid 2px #444;
}

.modaal-content-container dd {
  line-height: 1.6;
  font-size: 1.3rem;
}

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

.special {
  padding-top: 20vw;
}

.special .deco:nth-of-type(1) {
  width: 16vw;
  top: -8vw;
  left: calc(50% - 8vw);
}

.special .deco:nth-of-type(2) {
  width: 9vw;
  bottom: 70vw;
  left: 12vw;
}

.special .deco:nth-of-type(3) {
  width: 15vw;
  bottom: 18vw;
  right: -2vw;
}

.special .inner > div {
  padding: 10vw 2vw;
}

.special h3 {
  font-size: 4.8vw;
}

.special h3:before, .special h3:after {
  width: 5vw;
  height: 0.6vw;
}

.special h3:before {
  left: -7vw;
}

.special h3:after {
  right: -7vw;
}

.special .inner > div > div section {
  margin-top: 10vw;
  padding: 0 2vw;
}

.special .inner > div > div section:nth-child(even) {
  border: none;
}

.special .inner > div > div figure {
  width: 80%;
  margin: 0 auto 5vw;
}

.special .inner > div > div p {
  font-size: 2.667vw;
  line-height: 1.4;
}

.special .inner > div > div h4 {
  font-size: 3.2vw;
  margin-top: 2vw;
}

.special .inner > div > div h4 span {
  font-size: 2.667vw;
  padding-top: 1vw;
}

.special .inner > div > p {
  font-size: 2.667vw;
  margin: 10vw 5vw 0;
  line-height: 1.5;
}

.special .inner > div > div p a {
  display: block;
  padding: 3vw 1vw;
  height: 13vw;
  display: -webkit-box;
  display: inline-flex;
  -webkit-box-pack: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
}

.modaal-content-container {
  padding: 0 30px 50px !important;
}


}


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

profile

----------------------------------*/
.profile {
  padding-top: 160px;
}

.profile .inner {
  position: relative;
}

.profile .deco:nth-of-type(1) {
  position: absolute;
  width: 110px;
  top: 46px;
  left: -32px;
  z-index: 999;
  animation: ani_fluffy 1.5s ease-in-out infinite alternate;
}

.profile .deco:nth-of-type(2) {
  position: absolute;
  width: 180px;
  top: 500px;
  right: -100px;
  z-index: 999;
  animation: ani_sway .2s ease-in-out infinite alternate;
}

.profile .inner > div {
  display: -webkit-box;
  display: flex;
}

.profile .inner > div figure {
  width: 106%;
  margin-right: 6%;
}

.profile .inner > div h3 {
  font-weight: 700;
  font-size: 1.8rem;
}

.profile .inner > div section > div {
  line-height: 2;
  margin-top: 30px;
  text-align: justify;
  text-justify: inter-ideograph;
}

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

.profile {
  padding-top: 20vw;
}

.profile .deco:nth-of-type(1) {
  width: 15vw;
  top: 9vw;
  left: 15vw;
}

.profile .deco:nth-of-type(2) {
  width: 18vw;
  bottom: -14vw;
  top: auto;
  right: -4vw;
}

.profile .inner > div {
  display: block;
}

.profile .inner > div figure {
  width: 50vw;
  margin: 0 auto;
}

.profile .inner > div h3 {
  font-size: 3.733vw;
  text-align: center;
  margin-top: 10vw;
}

.profile .inner > div section > div {
  margin-top: 5vw;
  font-size: 3.2vw;
}

.special .badge {
  margin: 0 !important;
  height: 25.067vw;
  width: 25.067vw;
  font-size: 2.667vw !important;
  padding-top: 6.933vw;
  top: -6.667vw;
  right: -16px
}


}