@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;
}
.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);
}


/*------------------------------------*\
    top 
\*------------------------------------*/
.top_main {
}
.top_fv_wrap {
    background-color: #383838;
    width: 100%;
    height: 100svh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.top_fv_logo_wrap {
    width: 80%;
}
.top_fv_logo {
    opacity: 0;
    visibility: hidden;
    transition: all 1600ms ease-in-out;
}
.top_fv_logo.js_action {
    opacity: 1;
    visibility: visible;
}

/*------------------------------------*\
    footer 
\*------------------------------------*/
.footer_copy_wrap {
    position: fixed;
    bottom: 2%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    transition: all 500ms ease-in-out;
}
.footer_copy_wrap.js_action {
    opacity: 1;
    visibility: visible;
}
.footer_copy {
    font-family: var(--fonten);
    color: var(--color);
    font-size: 10px;
    letter-spacing: 0.06em;
    font-weight: 500;
}