@charset "UTF-8";


body {
    background-color: #000;
}

img {
    display: block;
    width: auto;
    height: auto;
}

/* common
------------------------------- */
.wrapper {
    max-width: 750px;
    width: 100%;
    margin: auto;
    background-color: #fff;
}

.footer {
    max-width: 750px;
    padding-bottom: 200px;
    width: 100%;
    margin: auto;
    background-color: #fff;
}

@media screen and (max-width: 767px) {
    .footer {
        padding-bottom: calc(200vw / 767 * 100);
    }
}


/* cv
------------------------------- */
.cv {
    display: block;
    width: 612px;
    margin: auto;
}

@media screen and (max-width: 767px) {
    .cv {
        width: calc(612vw / 767 * 100);
    }
}



/* float
------------------------------- */
.float {
    position: fixed;
    width: 100%;
    padding: 20px 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .75);
    opacity: 0;
    transition: .3s;
    z-index: 10;
}

.is-active.float {
    opacity: 1;
}

@media screen and (max-width: 767px) {
    .float {
        padding: calc(20vw / 767 * 100) 0;
    }

}


/* popup
------------------------------- */
.js-popup {
    cursor: pointer;
}

.popup_wrap {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 1);
    z-index: 500;
    opacity: 0;
    transition: .3s;
    cursor: pointer;
    pointer-events: none;
}

.is-active.popup_wrap {
    opacity: 1;
    pointer-events: all;
}

.popup_main {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 960px;
    width: 90vw;
    height: 90vh;
}

.popup_main img {
    max-width: 100%;
    max-height: 100%;
}

/* header
------------------------------- */
.header {
    background-color: #fff;
    /*padding: 20px;*/
    max-width: 750px;
    width: 100%;
    margin: auto;
}

.header_logo {
    width: 330px;
}

@media screen and (max-width: 767px) {
    .header {
        /*padding: calc(20vw / 767 * 100);*/
    }

    .header_logo {
        width: calc(330vw / 767 * 100);
    }
}


/* fv
------------------------------- */
.fv {
    position: relative;
}

.fv_btn {
    position: absolute;
    width: 612px;
    right: 0;
    left: 0;
    bottom: 194px;
    margin: auto;
    z-index: 5;
}

.fv_slide {
    display: block;
}


@media screen and (max-width: 767px) {
    .fv_btn {
        width: calc(612vw / 767 * 100);
        bottom: calc(194vw / 767 * 100);
    }
}

/* whats
------------------------------- */
.whats_block {
    padding: 12.4% 0 13.7%;
    background: #efefef;
}

.whats_block_ttl {
    position: relative;
    z-index: 1;
    width: 74.7%;
    max-width: 560px;
    margin: 0 auto -4.6%;
}

.whats_block_img {
    display: block;
    margin: 0 0 5.3%;
}

.whats_block_txt {
    display: block;
    width: 79.1%;
    max-width: 593px;
    margin: 0 0 5.3% 14.3%;
}

.whats_block_cv {
    display: block;
    width: 86.7%;
    max-width: 650px;
    margin: 0 auto;
}

/* works
------------------------------- */
.works_slide_wrap {
    position: relative;
}

.works_slide {
    position: absolute;
    width: 414px;
    left: 0;
    right: 0;
    bottom: 170px;
    margin: auto;
    z-index: 5;
}

.works_slide_nav {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    bottom: 460px;
    z-index: 5;
}

.works_slide_nav>p {
    cursor: pointer;
}

@media screen and (max-width: 767px) {
    .works_slide {
        width: calc(414vw / 767 * 100);
        bottom: calc(170vw / 767 * 100);
    }

    .works_slide_nav {
        bottom: calc(460vw / 767 * 100);
    }

    .works_slide_nav>p {
        width: calc(100vw / 767 * 100);
    }
}


/* policy
------------------------------- */
.policy_btn_wrap {
    position: relative;
}

.policy_btn {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 630px;
    left: 0;
    right: 0;
    bottom: 80px;
    margin: auto;
}

.policy_btn li {
    margin-top: 26px;
    width: 300px;
}

.policy_slide_wrap {
    position: relative;
    margin-bottom: 10%;
    padding-bottom: 12%;
    background-color: #f9ec00;
}

.policy_slide {
    width: 514px;
    margin: auto;
    overflow: hidden;
    z-index: 5;
}

.policy_slide_nav {
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    top: 20%;
    z-index: 5;
}

.policy_slide_nav>p {
    cursor: pointer;
}

@media screen and (max-width: 767px) {
    .policy_btn {
        width: calc(630vw / 767 * 100);
        bottom: calc(80vw / 767 * 100);
    }

    .policy_btn li {
        margin-top: calc(26vw / 767 * 100);
        width: calc(300vw / 767 * 100);
    }

    .policy_slide {
        width: calc(515vw / 767 * 100);
        bottom: calc(170vw / 767 * 100);
    }

    .policy_slide_nav {
        bottom: calc(395vw / 767 * 100);
    }

    .policy_slide_nav>p {
        width: calc(100vw / 767 * 100);
    }
}

.white.background {
    background-color: #ffffff;
}

.all_header {
    padding: 15px 15px 0;
    max-width: 750px;
    width: 100%;
    margin: auto;
    line-height: 0;
}

@media screen and (max-width: 767px) {
    .white.background {
        background-color: #ffffff;
    }

    .all_header {
        padding: 15px 15px 0;
        max-width: 750px;
        width: 100%;
        margin: auto;
    }
}

/* works_slide */
#tns1>.tns-item {
    height: min(681px, calc(681 / 767 * 100vw));
}

.tns-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}