@charset "UTF-8";

img {
    max-width: 100%;
    vertical-align: top;
}
.pc-only {
    display: block;
}
.m-only {
    display: none;
}
.main {
    position: relative;
    overflow: hidden;
}
.main .container {
    position: relative;
    width: 100%;
    max-width: 1480px;
    padding-right: 0;
    padding-left: 0;
}
.main .container img {
    width: 100%;
    max-width: 1480px;
}

/* section01 */
.section01 {
    background: rgb(215,252,250);
    background: linear-gradient(200deg, rgba(215,252,250,1) 0%, rgba(155,236,241,1) 100%);
}
.section01 a {
    position: absolute;
    top: 52.44%;
    left: 50.45%;
    width: 22.3%;
    height: 4.5%;
    transform: translateX(-50%);
}

/* section02 */
.section02 {
    background-color: #fff;
}

/* section03 */
.section03 {
    background-color: #f9eaff;
}


/* section04 */
.section04 {
    background-color: #fff;
}

/* section05 */
.section05 {
    background-color: #c0f3f4;
}
.section05 .sec-cont {
    position: absolute;
    top: 31.8%;
    left: 50.47%;
    width: 40.541%;
    height: 46.084%;
    transform: translateX(-50%);
}
.section05 .sec-cont:after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 36.667%;
    height: 36.667%;
    border-radius: 50%;
    box-shadow: 1px 1px 12px 0px rgba(0,0,0,0.4);
    background: url(../images/img/class1/sec05_logo.png) no-repeat center;
    background-size: cover;
    transform: translateX(-50%) translateY(-50%);
}
.section05 ul {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.section05 li {
    position: relative;
    width: 50%;
    height: 50%;
}
.section05 li a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: all .2s ease-in-out;
    cursor: pointer;
}
.section05 li div {
    opacity: 0;
    position: absolute;
    width: 92%;
    transition: all .2s ease-in-out;
}
.section05 li.r1 {
    position: absolute;
    left: 0;
    top: 0;
}
.section05 li.r1 a {
    background-color: #E7CCFD;
    border-radius: 100% 0 0 0;
}
.section05 li.r2 {
    position: absolute;
    right: 0;
    top: 0;
}
.section05 li.r2 a {
    background-color: #8CBAFF;
    border-radius: 0 100% 0 0;
}
.section05 li.r3 {
    position: absolute;
    right: 0;
    bottom: 0;
}
.section05 li.r3 a {
    background-color: #F5B5FF;
    border-radius: 0 0 100% 0;
}
.section05 li.r4 {
    position: absolute;
    left: 0;
    bottom: 0;
}
.section05 li.r4 a {
    background-color: #CCFFAD;
    border-radius: 0 0 0 100%;
}

/* section06 */
.section06 {
    background-color: #f9eaff;
}

/* section07 */
.section07 {
    background-color: #fff;
}
.section07 a {
    position: absolute;
    bottom: 8.3%;
    left: 50.1%;
    width: 58.3%;
    height: 7.2%;
    transform: translateX(-50%);
}

/* section08 */
.section08 {
    padding-bottom: 6.7vw;
    background-color: #c0f3f4;
}
.section08 a {
    position: absolute;
    bottom: 14.5%;
    left: 50.1%;
    width: 58.3%;
    height: 12.7%;
    transform: translateX(-50%);
}

/* floating */
.section-fix {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    display: block;
    text-align: center;
}
.section-fix img {
    margin: 0 auto;
}
.section-fix.on {
    position: absolute;
    bottom: 0;
    z-index: 1;
}

@media (min-width: 751px) {
    .section-fix.show {
        bottom: -1px;
    }

    /* section05 */
    .section05 li.r1 div {
        top: -17.5%;
        left: -86.7%;
    }
    .section05 li.r2 div {
        top: -17.5%;
        right: -86.4%;
    }
    .section05 li.r3 div {
        top: 56.5%;
        right: -86.4%;
    }
    .section05 li.r4 div {
        top: 56.5%;
        left: -86.7%;
    }
    .section05 .sec-cont li.on a {
        background-color: #BFC4C8;
    }
    .section05 .sec-cont li.on div {
        opacity: 1;
    }
}
@media (max-width: 750px) {
    .pc-only {
        display: none;
    }
    .m-only {
        display: block;
    }

    /* section01 */
    .section01 a {
        top: 51.7%;
        left: 50%;
        width: 43.9%;
        height: 5.5%;
    }
    
    /* section05 */
    .section05.show {
        padding-bottom: 42.66vw
    }
    .section05 .sec-cont {
        top: 38.2%;
        left: 50%;
        width: 74.667%;
        height: 47.742%;
    }
    .section05 .sec-cont:after {
        width: 35.715%;
        height: 35.715%;
        background-image: url(../images/img/class1/sec05_logo_m.png)
    }
    .section05 li {
        position: static;
    }
    .section05 li div {
        top: 100% !important;
        bottom: auto !important;
        width: auto;
        margin-top: 13.33vw;
        margin-left: -4vw;
        margin-right: -4vw;
        transform: translateX(0);
    }
    .section05 li.m-on a {
        background-color: #BFC4C8;
    }
    .section05 li.m-on div {
        opacity: 1;
    }
    .section05 li.r1 div {
        top: 200% !important;
        left: 0 !important;
        right: -100% !important;
    }
    .section05 li.r2 div {
        top: 200% !important;
        left: -100% !important;
        right: 0 !important;
    }
    .section05 li.r3 div {
        left: -100% !important;
        right: 0 !important;
    }
    .section05 li.r4 div {
        left: 0 !important;
        right: -100% !important;
    }


    /* section07 */
    .section07 a {
        bottom: 10.8%;
        left: 50%;
        width: 85.3%;
        height: 8.2%;
    }

    /* section08 */
    .section08 {
        padding-bottom: 21.3vw;
    }
    .section08 a {
        bottom: 10.6%;
        left: 50%;
        width: 85.3%;
        height: 8%;
    }
}