@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap');

:root {
    --fontbase: "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
    --fontjp: 'Zen Kaku Gothic New', sans-serif;
    --fonten: "Montserrat", sans-serif;
    --color: #000;
}

html {
    font-family: var(--fontbase);
    color: var(--color);
    min-height: 100%;
    overscroll-behavior: none;
}
body {
    min-height: 100%;
    background: #FFF;
}
@media (max-width: 750px) {
}
.pc { display: block; }
.sp { display: none; }
@media (max-width: 750px) {
    .pc { display: none; }
    .sp { display: block; }
}
.link_range {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
}
img {
    width: 100%;
    height: auto;
}


/*------------------------------------*\
    共通
\*------------------------------------*/
.inview {
    opacity: 0;
    transition: opacity 0.8s ease;
}
.inview_up {
    opacity: 0;
    transform: translate(0,10px);
    transition: opacity 500ms ease-in-out, transform 500ms ease-in-out;
}

.inview_draw_left,
.inview_draw_right,
.inview_draw_top {
    will-change: clip-path;
    transition: clip-path 500ms ease-in-out;
}
.inview_draw_left {
    clip-path: inset(0 100% 0 0);
}
.inview_draw_right {
    clip-path: inset(0 0 0 100%);
}
.inview_draw_top {
    clip-path: inset(0 0 100% 0);
}

.inview_action {
    opacity: 1;
}
.inview_up.inview_action {
    opacity: 1;
    transform: translateY(0);
}
.inview_draw_left.inview_action,
.inview_draw_right.inview_action,
.inview_draw_top.inview_action {
    clip-path: inset(0 0 0 0);
}


.com_main {
}
.com_title_wrap {
    text-align: center;
    padding-top: 100px;
    padding-bottom: 100px;
}
.com_title {
    font-family: var(--fonten);
    font-size: 36px;
    letter-spacing: 0.1em;
    font-weight: 400;
    color: var(--color);
}


/*------------------------------------*\
    top 
\*------------------------------------*/
.top_main {
}
.top_main_wrap {
    display: flex;
    justify-content: space-between;
    position: relative;
    width: 93%;
    margin: 0 auto;
    margin-top: 70px;
    padding-bottom: 80px;
}
@media (max-width: 750px) {
    .top_main_wrap {
        display: block;
        width: 100%;
        margin-top: 0;
        padding-bottom: 0;
    }
}
.top_detail_wrap {
    width: 39%;
    display: flex;
    flex-direction: column;
}
@media (max-width: 750px) {
    .top_detail_wrap {
        width: 100%;
        position: relative;
        z-index: 2;
        box-sizing: border-box;
    }
}
.top_fv_sec {
}
@media (max-width: 750px) {
    .top_fv_sec {
        background-color: #FFF;
    }
}
.top_fv_wrap {
    position: relative;
    height: calc(100svh - 70px);
    min-height: 500px;
}
@media (max-width: 750px) {
    .top_fv_wrap {
        position: fixed;
        top: 20px;
        left: 5%;
        width: 90%;
        height: 150px;
        min-height: auto;
    }
}
.top_fv_logo_wrap {
    width: 100px;
    opacity: 0;
    visibility: hidden;
    transition: all 500ms ease-in-out;
}
.top_fv_logo_wrap.js_action {
    opacity: 1;
    visibility: visible;
}
@media (max-width: 750px) {
    .top_fv_logo_wrap {
        position: absolute;
        width: 50px;
        bottom: 0;
        left: 20px;
    }
}
.top_fv_logo {
}
.top_fv_logo.logo_w {
    display: none;
}
@media (max-width: 750px) {
    .top_fv_logo.logo_b {
        display: none;
    }
    .top_fv_logo.logo_w {
        display: block;
    }
    body.scroll_top .top_fv_logo.logo_w {
        display: none;
    }
    body.scroll_top .top_fv_logo.logo_b {
        display: block;
    }
}
.top_fv_sns_wrap {
    width: 30px;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 500ms ease-in-out;
}
.top_fv_sns_wrap.js_action {
    opacity: 1;
    visibility: visible;
}
@media (max-width: 750px) {
    .top_fv_sns_wrap {
        width: 20px;
    }
}
.top_fv_sns {
}

@media (max-width: 750px) {
    .top_fv_sns {
        filter: invert(100%);
    }
    body.scroll_top .top_fv_sns {
        filter: none;
    }
}

.top_fv_text_wrap {
    width: 220px;
    position: absolute;
    bottom: 70px;
    opacity: 0;
    visibility: hidden;
    transition: all 500ms ease-in-out;
}
.top_fv_text_wrap.js_action {
    opacity: 1;
    visibility: visible;
}
@media (max-width: 750px) {
    .top_fv_text_wrap {
        width: 140px;
        right: 0;
        bottom: 0;
    }
}
.top_fv_text {
}
@media (max-width: 750px) {
    .top_fv_text {
        filter: invert(100%);
    }
    body.scroll_top .top_fv_text {
        filter: none;
    }
}

.top_bk_wrap {
    position: relative;
    width: 58%;
    opacity: 0;
    visibility: hidden;
    transition: all 500ms ease-in-out;
}
.top_bk_wrap.js_action {
    opacity: 1;
    visibility: visible;
}
@media (max-width: 750px) {
    .top_bk_wrap {
        width: 100%;
        position: absolute;
        top: 200px;
        z-index: 1;
        pointer-events: none;
    }
}
.top_bk_img_list_wrap {
}
.top_bk_img_list {
}
.top_bk_img_list li {
}
.top_bk_img_list li + li {
    margin-top: -1px;
}
.top_bk_img {
}


.top_sec {
    padding-top: 60vw;
}
@media (max-width: 750px) {
    .top_sec {
        position: fixed;
        left: 0;
        bottom: 80px;
        width: 90%;
        height: 350px;
        background-color: #FFF;
        padding-top: 0;
        /* padding-top: min(calc(100svh - 290px), 600px); */

        opacity: 0;
        visibility: hidden;
        transition: all 500ms ease-in-out;

    }
}
@media (max-width: 750px) {
    body.bk_2  .top_sec.sec_1, body.bk_3  .top_sec.sec_1, body.bk_4  .top_sec.sec_1, body.bk_5  .top_sec.sec_1 {
        opacity: 1;
        visibility: visible;
    }
}

.top_sec.sec_2 {
    padding-top: 60vw;
    padding-bottom: 70vw;
}
@media (max-width: 750px) {
    .top_sec.sec_2 {
        padding-top: 0;
        padding-bottom: 0;
        /* padding-top: min(40svh, 300px); */
        /* padding-bottom: min(30svh, 250px); */
    }
    body.bk_4  .top_sec.sec_2, body.bk_5  .top_sec.sec_2 {
        opacity: 1;
        visibility: visible;
    }
}
.top_sec_wrap {
}
.top_sec_detail_wrap {
}
@media (max-width: 750px) {
    .top_sec_detail_wrap {
        /* width: 90%; */
        /* background-color: #FFF; */
        padding: 50px 5% 50px 10%;
    }
}
.top_com_title_wrap {
    margin-bottom: 80px;
}
@media (max-width: 750px) {
    .top_com_title_wrap {
        margin-bottom: 60px;
    }
}
.top_com_title {
    font-family: var(--fontjp);
    color: var(--color);
    font-size: 18px;
    line-height: 39px;
    letter-spacing: 0.1em;
    font-weight: 500;
}
@media (max-width: 750px) {
    .top_com_title {
        font-size: 13px;
        line-height: 27px;
    }
}
.top_com_text_wrap {
    margin-bottom: 30px;
}
@media (max-width: 750px) {
}
.top_com_text {
    font-family: var(--fontjp);
    color: var(--color);
    font-size: 16px;
    line-height: 36px;
    font-weight: 400;
}
@media (max-width: 750px) {
    .top_com_text {
        font-size: 13px;
        line-height: 19px;
    }
    .top_com_text.text_bold {
        font-weight: 500;
    }
}


.top_com_btn_wrap {
    margin-top: 60px;
}
@media (max-width: 750px) {
    .top_com_btn_wrap {
        margin-top: 0;
        position: fixed;
        bottom: 54px;
        right: 5%;
    }
}
.top_com_btn {
    font-family: var(--fontjp);
    color: #FFF;
    font-size: 18px;
    letter-spacing: 0.1em;
    font-weight: 400;
    width: 240px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--color);
    background-color: var(--color);
    transition: all 300ms ease-in-out;
    border-radius: 5px;
}
@media (hover: hover) {
    .top_com_btn:hover {
        color: var(--color);
        background-color: #FFF;
    }
}
@media (max-width: 750px) {
    .top_com_btn {
        font-size: 13px;
        width: 180px;
        height: 50px;
        border: 1px solid #818181;
    }
}


.top_footer_wrap {
    margin-top: auto;
}
@media (max-width: 750px) {
    .top_footer_wrap {
        width: 94%;
        position: fixed;
        left: 5%;
        bottom: 20px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px 20px
    }
}
.top_footer_company_wrap {
    display: flex;
    align-items: center;
    gap: 30px;
}
@media (max-width: 750px) {
    .top_footer_company_wrap {
        gap: 12px;
    }
}
.top_footer_company_text_wrap {
}
.top_footer_company_text {
    font-family: var(--fontjp);
    color: var(--color);
    font-size: 16px;
    font-weight: 400;
}
@media (max-width: 750px) {
    .top_footer_company_text {
        color: #FFF;
        font-size: 10px;
    }
}
.top_footer_company_img_wrap {
}
.top_footer_company_img {
    width: 144px;
}
@media (max-width: 750px) {
    .top_footer_company_img {
        width: 90px;
        filter: invert(100%);
    }
}
.footer_copy_wrap {
    margin-top: 40px;
}
@media (max-width: 750px) {
    .footer_copy_wrap {
        margin-top: 4px;
    }
}
.footer_copy {
    font-family: var(--fonten);
    color: var(--color);
    font-size: 10px;
    letter-spacing: 0.06em;
    font-weight: 400;
}
@media (max-width: 750px) {
    .footer_copy {
        color: #FFF;
    }
}