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


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


/*------------------------------------*\
    header (logo)
\*------------------------------------*/
.header_logo_wrap {
    position: fixed;
    top: 22px;
    left: 4%;
    z-index: 940;
    opacity: 0;
    visibility: hidden;
    transition: all 500ms ease-in-out;
}
.header_logo_wrap.js_action {
    opacity: 1;
    visibility: visible;
}
body.is-sec1 .header_logo_wrap {
    opacity: 0;
    visibility: hidden;
}
@media (max-width: 750px) {
    .header_logo_wrap {
        top: 20px;
    }
}
.header_logo {
    width: 150px;
}
@media (max-width: 750px) {
    .header_logo {
        max-width: 120px;
        width: 60vw;
    }
}

/*------------------------------------*\
    header (sns)
\*------------------------------------*/
.header_sns_wrap {
    position: fixed;
    bottom: 22px;
    left: 4%;
    z-index: 940;
    opacity: 0;
    visibility: hidden;
    transition: all 500ms ease-in-out;
}
.header_sns_wrap.js_action {
    opacity: 1;
    visibility: visible;
}
body.is-sec1 .header_sns_wrap {
    opacity: 0;
    visibility: hidden;
}
@media (max-width: 750px) {
    .header_sns_wrap {
        bottom: 20px;
    }
}
.header_sns {
    width: 28px;
}
@media (max-width: 750px) {
    .header_sns {
        width: 20px;
    }
}


/*------------------------------------*\
    top 
\*------------------------------------*/
.top_main {
    position: relative;
}

.top_bk_img_wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.top_bk_img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.top_sec_dot_list_wrap {
    position: fixed;
    top: 50%;
    left: 5%;
    transform: translate(0, -50%);
    z-index: 3;
    opacity: 0;
    visibility: hidden;
    transition: all 500ms ease-in-out;
}
.top_sec_dot_list_wrap.js_action {
    opacity: 1;
    visibility: visible;
}
@media (max-width: 750px) {
    .top_sec_dot_list_wrap {
        left: 2%;
    }
}


.top_sec_dot_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
@media (max-width: 750px) {
    .top_sec_dot_list {
        gap: 8px;
    }
}
.top_sec_dot_wrap {
    padding: 5px;
    cursor: pointer;
    opacity: 0.3;
    transform: scale(0.99);
    transition: opacity 600ms ease-in-out, transform 600ms ease-in-out;;
}
.top_sec_dot_wrap.is-active {
    opacity: 1;
    transform: scale(1);
}
.top_sec_dot {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #6597B8;
}


.top_sec_list {
    position: relative;
    height: 100svh;
    overflow: hidden;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transition: all 800ms ease-in-out;
}
.top_sec_list.js_action {
    opacity: 1;
    visibility: visible;
}





.com_sec {
  position: absolute;
  inset: 0;
  width: 100%;
  min-height: 100svh;
  overflow-y: auto;
  opacity: 0;
  transition: opacity 800ms ease-in-out;
  pointer-events: none;
}
.com_sec.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.sec_inner {
}
.top_fv_content_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100svh;
    justify-content: center;
    padding: 100px 0;
}
.top_fv_title {
    width: 50%;
    max-width: 700px;
}
@media (max-width: 750px) {
    .top_fv_title {
        width: 65%;
        max-width: 300px;
    }
}
.top_fv_logo {
}
.top_fv_text_wrap {
    margin-top: min(10svh, 80px);
}
@media (max-width: 750px) {
    .top_fv_text_wrap {
        margin-top: 30px;
    }
}
.top_fv_text {
    font-family: var(--fontjp);
    color: var(--color);
    font-size: 23px;
    line-height: 34px;
    letter-spacing: 0.04em;
    font-weight: 500;
}
@media (max-width: 750px) {
    .top_fv_text {
        font-size: 15px;
        line-height: 20px;
    }
}
.top_fv_open_wrap {
    width: 40%;
    max-width: 512px;
    margin-top: 18px;
    padding-bottom: 3px;
    border-bottom: 4px solid var(--color);
}
@media (max-width: 750px) {
    .top_fv_open_wrap {
        width: 58%;
        max-width: 260px;
        margin-top: 12px;
        border-bottom: 2px solid var(--color);
    }
}
.top_fv_open {
}



/*------------------------------------*\
    top about
\*------------------------------------*/
.top_about_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100svh;
    padding: 100px 0;
}
@media (max-width: 750px) {
    .top_about_wrap {
        padding: 80px 0;
    }
}
.top_about_inner {
    min-width: 550px;
}
@media (max-width: 750px) {
    .top_about_inner {
        width: 84%;
        min-width: auto;
    }
}
.top_about_title_wrap {
}
.top_about_title {
    font-family: var(--fontjp);
    color: var(--color);
    font-size: 55px;
    letter-spacing: 0.09em;
    font-weight: 400;
}
@media (max-width: 750px) {
    .top_about_title {
        font-size: 30px;
    }
}
.top_about_text_wrap {
    margin-top: min(10svh, 80px);
}
@media (max-width: 750px) {
    .top_about_text_wrap {
        margin-top: 32px;
    }
}
.top_about_text {
    font-family: var(--fontjp);
    color: var(--color);
    font-size: 18px;
    line-height: 40px;
    letter-spacing: 0.09em;
    font-weight: 400;
}
@media (max-width: 750px) {
    .top_about_text {
        font-size: 14px;
        line-height: 32px;
    }
}


/*------------------------------------*\
    top info
\*------------------------------------*/
.top_info_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-height: 100svh;
    padding: 100px 0;
}
@media (max-width: 750px) {
    .top_info_wrap {
        padding: 80px 0;
    }
}
.top_info_inner {
    display: flex;
    gap: min(6vw, 100px);
    max-width: 90%;
    min-width: 70%;
}
@media (max-width: 750px) {
    .top_info_inner {
        flex-direction: column;
        gap: 30px;
        max-width: none;
        min-width: auto;
        width: 84%;
    }
}

.top_info_title_wrap {
}
@media (max-width: 750px) {
}
.top_info_title {
    font-family: var(--fonten);
    color: var(--color);
    font-size: 28px;
    letter-spacing: 0.05em;
    font-weight: 400;
    white-space: nowrap
}

.top_info_detail_wrap {
    width: 100%;
}
.top_info_map_wrap {
}
.top_info_map_wrap iframe {
    width: 100%;
    max-height: 45vh;
    filter: sepia(80%) saturate(10%) brightness(95%) contrast(100%);
}
@media (max-width: 750px) {
    .top_info_map_wrap iframe {
        height: 100%;
        aspect-ratio: 16 / 9;
    }
}
.top_info_text_wrap {
    margin-top: 20px;
}
@media (max-width: 750px) {
    .top_info_text_wrap {
        margin-top: 15px;
    }
}
.top_info_text {
    font-family: var(--fontjp);
    color: var(--color);
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;
}
@media (max-width: 750px) {
    .top_info_text {
        font-size: 14px;
        line-height: 22px;
    }
}


.top_info_list {
    margin-top: 22px;
}
@media (max-width: 750px) {
    .top_info_list {
        margin-top: 16px;
    }
}
.top_info_list li {
}
.top_info_list li.company {
    margin-top: 22px;
}
@media (max-width: 750px) {
    .top_info_list li.company {
        margin-top: 16px;
    }
}
.top_info_list dl {
    display: flex;
}
.top_info_list dt {
    min-width: 80px;
    font-family: var(--fontjp);
    color: var(--color);
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;
}
@media (max-width: 750px) {
    .top_info_list dt {
        min-width: 76px;
        font-size: 14px;
        line-height: 22px;
    }
}
.top_info_list dd {
    font-family: var(--fontjp);
    color: var(--color);
    font-size: 15px;
    line-height: 24px;
    font-weight: 400;
}
@media (max-width: 750px) {
    .top_info_list dd {
        font-size: 14px;
        line-height: 22px;
    }
}
.top_info_list dd .company_logo {
    height: 26px;
    width: auto;
}
@media (max-width: 750px) {
    .top_info_list dd .company_logo {
        height: 23px;
    }
}


/*------------------------------------*\
    footer 
\*------------------------------------*/
.footer_copy_wrap {
    position: fixed;
    top: 50%;
    right: 5%;
    transform: translate(0, -50%);
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    transition: all 500ms ease-in-out;
}
.footer_copy_wrap.js_action {
    opacity: 1;
    visibility: visible;
}
@media (max-width: 750px) {
    .footer_copy_wrap {
        position: absolute;
        width: 100%;
        top: auto;
        right: auto;
        transform: none;
        bottom: 3%;
        text-align: center;
    }
}
.footer_copy {
    font-family: var(--fonten);
    color: var(--color);
    font-size: 10px;
    line-height: 10px;
    letter-spacing: 0.06em;
    font-weight: 500;
    writing-mode: sideways-lr;
    min-width: 10px;
}
@media (max-width: 750px) {
    .footer_copy {
        writing-mode: initial;
    }
}