@charset "UTF-8";

:root {
    --main-font: "Shippori Mincho", serif;
    --sub-font: "Josefin Slab", serif;
    --bg-color: #e4e1dd;
    --bg-color2: #d1d5cd;
    --black: #1D1D1D;
    --white: #FFFFFF;
    --gray: #676865;
}



/*==================
#loading
==================*/

#loading {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: var(--bg-color);
    text-align: center;
}

#loading_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#loading .kvArea {
    width: 100%;
}

#loading .kvArea #img_box {
    text-align: center;
}

#loading .kvArea {
    max-width: 100%;
    height: auto;
}

#img_box img {
    margin-inline: auto;
    width: 50%;
}

.fadeUp {
    animation-name: fadeUpAnime;
    animation-duration: 1.2s;
    animation-delay: 1.2s;
    animation-fill-mode: forwards;
    opacity: 1;
}

@keyframes fadeUpAnime {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-100px);
    }
}



/*==========================================
    Main Visual
==========================================*/


.MV {
    padding: 5vw 5vw 100vw;
    background: var(--bg-color);
    width: 100vw;
    min-height: 500px;
}

.MV__inner {
    width: 100%;
    margin-inline: auto;
    max-width: 1500px;
    position: relative;
    padding: 50px 30px;
}


.MV__title {
    position: absolute;
    width: 80vw;
    height: auto;
    z-index: 5;
    top: 45vw;
    right: 0;

}


@media (min-width: 684px) {
    .MV {
        padding: 5vw 5vw 30vw;
    }

    .MV__title {
        top: 15vw;
        max-width: 600px;
        width: 65vw;
    }
}


@media (min-width: 968px) {
    .MV__title {
        width: 60vw;
    }
}


@media (min-width: 1200px) {
    .MV__title {
        max-width: 1000px;
        top: 3vw;
    }
}


.MV__txt {
    width: 100%;
    height: auto;
    position: absolute;
    top: 80vw;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5;
    font-family: var(--main-font);
    font-size: 1.4rem;
    color: var(--black);
    padding: 1em 2em;
    letter-spacing: 0.02em;
    line-height: 3rem;
}

@media (min-width: 684px) {
    .MV__txt {
        width: 63%;
        top: 40vw;
        bottom: auto;
        left: auto;
        right: 0;
        padding: 1em 0;

    }
}


@media (min-width: 968px) {
    .MV__txt {
        top: 38vw;
    }
}


@media (min-width: 1200px) {
    .MV__txt {
        width: 60%;
        top: 30vw;
    }
}


@media (min-width: 1800px) {
    .MV__txt {
        top: 25vw;
    }
}


@media (min-width: 2000px) {
    .MV__txt {
        top: 22vw;
    }
}

.MV__img {
    position: absolute;
    height: auto;
}

.MV__img--1 {
    z-index: 2;
    width: 60vw;
    top: 10vw;
    left: -10vw;
    opacity: 0.75;
    max-width: 400px;
    border-radius: 10px 50px 30px 10px;
}

.MV__img--2 {
    z-index: 1;
    width: 120%;
    top: -5vw;
    left: -25vw;
    border-radius: 80px;
}

@media screen and (min-width:684px) {
    .MV__img--1 {
        width: 50vw;
        top: 5vw;
    }

    .MV__img--2 {
        top: -10vw;
    }
}

@media screen and (min-width:960px) {
    .MV__img--1 {
        width: 40vw;
    }

    .MV__img--2 {
        top: -20vw;
        width: 100%;
    }
}

@media screen and (min-width:1200px) {
    .MV__img--1 {
        width: 40vw;
        top: 0;
        max-width: 600px;
        left: -15vw;
    }

}



/*==========================================
    Concept
==========================================*/
.concept {
    width: 100%;
    height: auto;
    margin-inline: auto;
    background-color: var(--bg-color2);
    padding-bottom: 3em;
}

.concept_inner {
    padding-inline: 30px;
}



.concept_circle {
    margin: 32px 0 40px;
}


.concept_circle-inner {
    position: relative;
}

.concept_circle-inner:last-of-type {
    margin-left: -8vw;
}

.concept_circle-inner svg {
    width: 45vw;
    height: 45vw;
    opacity: 0;
    stroke-dasharray: 1165.76904296875px;
}

.concept_circle.is-show .concept_circle-inner svg {
    animation: drawCircle 2.0s cubic-bezier(0.43, 0.05, 0.10, 1) forwards;
}

#circle-1 {
    animation-delay: 0s;
    margin-inline: auto;
}

#circle-2 {
    animation-delay: 0.3s;
}

#circle-3 {
    animation-delay: 0.6s;
}

.concept_circle-pass {
    fill: none;
    stroke: var(--black);
}

.concept_circle-column {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -14.4vw;
}

.concept_circle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    font-size: 1.4rem;
    transform: translate(-50%, -50%);
    transition: opacity 2.8s ease;
}

.concept_circle.is-show .concept_circle-text {
    opacity: 1;
}

.concept_circle-text--1 {
    transition-delay: 0.3s;
}

.concept_circle-text--2 {
    transition-delay: 0.6s;
}

.concept_circle-text--3 {
    transition-delay: 0.9s;
}

@media (min-width: 768px) {

    .concept_inner {
        max-width: 1200px;
        margin-inline: auto;
        padding-inline: 40px;
    }

    .concept_circle {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 32px 72px 56px;

    }


    .concept_circle-inner:first-of-type {
        margin-right: -30px;
    }

    .concept_circle-inner:last-of-type {
        margin-left: 0px;
    }

    .concept_circle-inner svg {
        width: 100%;
        height: 100%;
    }

    /* .concept_circle-inner svg {
        width: 25vw;
        height: auto;
    } */


    .concept_circle-column {
        margin-top: 0;
    }

    .concept_circle-text {
        font-size: 1.5rem;
    }
}

@keyframes drawCircle {
    0% {
        opacity: 0;
        stroke-dashoffset: 1165.76904296875px;
    }

    100% {
        opacity: 1;
        stroke-dashoffset: 0px;
    }
}

.concept_a {
    text-align: center;
}

.concept_about {
    margin-inline: auto;
    font-size: 1.4rem;
    letter-spacing: 0.03rem;
    line-height: 3.2rem;
    padding: 0 4.5em 3em;
}

@media (min-width: 768px) {
    .concept_about {
        padding: 0 8em 3em;
    }
}

/*==========================================
    insta&news
==========================================*/

.instaandnews {
    width: 100%;
    height: auto;
    margin-inline: auto;
    background-color: var(--bg-color);
    padding-bottom: 2em;
    transform: translateY(-3px);
}

.news_inner {
    padding-inline: 30px;
}

.news_text {
    margin: 1em 0 1.5em;
    text-align: center;
    font-size: 1.3rem;
    letter-spacing: 0.02rem;
    line-height: 3.2rem;
}

.news_text img {
    margin-inline: auto;
    width: 20px;
    padding-bottom: 0.6em;
}






/*==========================================
    Separator
==========================================*/

.separator {
    width: 100vw;
    height: auto;

}


.separator_01 {
    background-color: var(--bg-color2);
    width: 100%;
    height: 35vw;
    transform: translateY(-3px)
}

@media screen and (min-width:684px) {
    .separator_01 {
        height: 20vw;
    }

}

.separator_02 {
    background-color: var(--bg-color);
    width: 100%;
    height: 35vw;
    transform: translateY(-1px)
}

@media screen and (min-width:684px) {
    .separator_02 {
        height: 20vw;
    }
}