@charset "UTF-8";

/* ********************************************************************
        stage
******************************************************************** */

#stage {
    padding: calc(58 / 750 * 100%) 0 calc(200 / 750 * 100%);
    background: #f8f8f8;
    overflow: hidden;
}

#stage .inner {
    max-width: calc(700 / 750 * 100%);
}

#stage h2 {
    width: calc(570/700 *100%);
    margin: 0 0 calc(70/700 *100%) calc(35 / 700 * 100%);
}

#stage p.txt01 {
    font-size: 2.4rem;
    text-align: center;
    color: #ef8dae;
    padding-bottom: calc(10/700 *100%);
}

.stage_box {
    width: 100%;
    margin: 0 auto;
}

.stage_btn {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.stage_btn li {
    position: absolute;
    top: 0;
    left: 0;
}

.stage_id_01 {
    width: calc(432 / 1180 * 100%);
    padding-top: calc(548 / 1180 * 100%);
    margin: calc(153 / 1180 * 100%) 0 0 calc(37 / 1180 * 100%);
}

.stage_id_02 {
    width: calc(260 / 1180 * 100%);
    padding-top: calc(241 / 1180 * 100%);
    margin: calc(161 / 1180 * 100%) 0 0 calc(532 / 1180 * 100%);
}

.stage_id_03 {
    width: calc(349 / 1180 * 100%);
    padding-top: calc(390 / 1180 * 100%);
    margin: calc(507 / 1180 * 100%) 0 0 calc(486 / 1180 * 100%);
    z-index: 3 !important;
}

.stage_id_04 {
    width: calc(266 / 1180 * 100%);
    padding-top: calc(515 / 1180 * 100%);
    margin: calc(149 / 1180 * 100%) 0 0 calc(889 / 1180 * 100%);
}

.stage_id_05 {
    width: calc(486 / 1180 * 100%);
    padding-top: calc(512 / 1180 * 100%);
    margin: calc(767 / 1180 * 100%) 0 0 calc(96 / 1180 * 100%);
}

.stage_id_06 {
    width: calc(352 / 1180 * 100%);
    padding-top: calc(467 / 1180 * 100%);
    margin: calc(913 / 1180 * 100%) 0 0 calc(739 / 1180 * 100%);
}

.stage_id_07 {
    width: calc(459 / 1180 * 100%);
    padding-top: calc(601 / 1180 * 100%);
    margin: calc(1339 / 1180 * 100%) 0 0 calc(105 / 1180 * 100%);
}

.stage_id_08 {
    width: calc(316 / 1180 * 100%);
    padding-top: calc(599 / 1180 * 100%);
    margin: calc(1333 / 1180 * 100%) 0 0 calc(760 / 1180 * 100%);
    z-index: 3 !important;
}

.stage_id_09 {
    width: calc(144 / 1180 * 100%);
    padding-top: calc(1076 / 1180 * 100%);
    margin: calc(901 / 1180 * 100%) 0 0 calc(591 / 1180 * 100%);
}

@media all and (min-width: 768px) {
    #stage {
        padding: calc(110 / 1200 * 100%) 0 calc(238 / 1200 * 100%);
    }
    #stage .inner {
        max-width: 1200px;
    }
    #stage .inner::before {
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        background: url(../images/stage/bg_shape3.png) no-repeat center/contain;
        width: calc(364 / 1200 * 100%);
        padding-top: calc(278 / 1200 * 100%);
        margin: 0 calc(151 / 1200 * 100%) calc(-130 / 1200 * 100%) 0;
        -webkit-animation: fuwafuwa 1.2s infinite alternate;
        animation: fuwafuwa 1.2s infinite alternate;
        -webkit-animation-delay: 0.5s;
        animation-delay: 0.5s;
    }
    #stage h2 {
        width: calc(560/1000 *100%);
        margin: 0 0 calc(70 /1000 *100%) 0;
    }
    #stage p.txt01 {
        font-size: 1.6rem;
    }
    .stage_box {
        width: calc(720 / 1000 * 100%);
    }
    .stage_box::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        background: url(../images/stage/bg_shape1.png) no-repeat center/contain;
        width: calc(239 / 720 * 100%);
        padding-top: calc(252 / 720 * 100%);
        margin: calc(-163 / 720 * 100%) calc(-122 / 720 * 100%) 0 0;
        -webkit-animation: fuwafuwa 1.2s infinite alternate;
        animation: fuwafuwa 1.2s infinite alternate;
    }
    .stage_box::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        background: url(../images/stage/bg_shape2.png) no-repeat center/contain;
        width: calc(364 / 720 * 100%);
        padding-top: calc(272 / 720 * 100%);
        margin: calc(551 / 720 * 100%) 0 0 calc(-231 / 720 * 100%);
        -webkit-animation: fuwafuwa 1.2s infinite alternate;
        animation: fuwafuwa 1.2s infinite alternate;
        -webkit-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }
    .stage_box>img {
        z-index: 1;
    }
    .stage_btn li {
        cursor: pointer;
        z-index: 2;
    }
}

@-webkit-keyframes fuwafuwa {
    0% {
        -webkit-transform: translate(0, 0px);
        transform: translate(0, 0px);
    }
    100% {
        -webkit-transform: translate(0, -20px);
        transform: translate(0, -20px);
    }
}

@keyframes fuwafuwa {
    0% {
        -webkit-transform: translate(0, 0px);
        transform: translate(0, 0px);
    }
    100% {
        -webkit-transform: translate(0, -20px);
        transform: translate(0, -20px);
    }
}


/* =====================================================================
*    popup
* =================================================================== */

.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
}

.popup_bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(199, 232, 250, 0.8);
    cursor: pointer;
}

.popup_area {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    display: flex;
}

.popup_inner {
    width: calc(690 / 750 * 100%);
    max-width: 900px;
    margin: auto;
    padding: calc(45 / 750 * 100%) 0 0;
    align-self: center;
    z-index: 2;
}

.popup_close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 110;
    cursor: pointer;
    width: calc(80 / 750 * 100%);
    margin: calc(-45 / 750 * 100%) calc(-5 / 750 * 100%) 0 0;
    transition: 0.2s ease;
}

.popup_close:hover {
    border-radius: 50%;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.13);
    margin: calc(-35 / 750 * 100%) calc(-5 / 750 * 100%) 0 0;
}

.popup_close::before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 100%;
    background: url(../images/common/btn_close.png) no-repeat center/contain;
    margin: 0 auto;
    transition: 0.2s ease;
    border-radius: 50%;
    box-shadow: 0px 10px 21px 0px rgba(0, 0, 0, 0.13);
}

.popup_list {
    width: 100%;
    height: 100%;
}

.popup_details {
    display: none;
    padding: 0;
    background-color: #fff;
    border: 2em solid #fff;
    border-radius: 2em;
}

.popup_details_inner>p {
    font-size: 2.4rem;
    line-height: 1.833;
    padding: 0.5em 1em;
}

.popup_details_inner>h4 {
  font-size: 3em;
  color: #009d97;
  padding-top: 1em;
}

.popup .slick-arrow {
    display: block;
    width: 3em;
    height: 3em;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    margin: auto;
    border-top: .5em solid #fff100;
    border-right: .5em solid #fff100;
    cursor: pointer;
}

.popup .slick-arrow.prev {
    left: 2em;
    -webkit-transform: rotate( -135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate( -135deg);
}

.popup .slick-arrow.next {
    right: 2em;
    -webkit-transform: rotate( -315deg);
    -ms-transform: rotate(-315deg);
    transform: rotate( -315deg);
}

@media screen and (min-width: 768px) {
    .popup_inner {
        width: calc(900 / 1200 * 100%);
        max-width: 900px;
        margin: auto;
        padding: calc(80 / 1200 * 100%) 0 0;
        align-self: flex-start;
        z-index: 2;
    }
    .popup_close {
        width: calc(60 / 1000 * 100%);
        margin: calc(15 / 1000 * 100%) calc(-5 / 1000 * 100%) 0 0;
    }
    .popup_close:hover {
        margin: calc(25 / 1000 * 100%) calc(-5 / 1000 * 100%) 0 0;
    }
    .popup_details {
        border-width: 0;
        padding: calc(30 / 900 * 100%) calc(50 / 900 * 100%);
    }
    .popup_img {
        width: calc(650 /800 *100%);
        margin: 0 auto;
    }
    .popup_details_inner>p {
        line-height: 1.938;
        font-size: 1.6rem;
        padding: 1em 0;
    }
    .popup_details_inner>h4 {
      font-size: 1.8em;
      color: #009d97;
      padding-top: 1em;
    }
}

@media screen and (min-width: 1200px) {
    .popup_inner {
        padding: 80px 0 0;
    }
}