@charset "utf-8";

body {
    font-family: "Zen Old Mincho", serif;
    background-color: #000;
}
body.is_opened {
    overflow: hidden;
}
.font_lustria {
    font-family: "Lustria", serif;
}
.wrap {
    position: relative;
    overflow: clip;
}
img {
    max-width: 100%;
    height: auto;
}
@media (min-width: 769px) {
    html{
        font-size: 1px;
    }
}
@media (max-width: 768px) {
    html{
        font-size: calc(100/390*1vw);
    }
}

/*
    【PC】961px ~
    【TAB】769px ~ 960px
    【SP】~ 768px
*/
@media (min-width: 961px) {
    [disp-only]:not([disp-only~='pc']) {
        display: none !important;
    }
}
@media (min-width: 769px) and (max-width: 960px) {
    [disp-only]:not([disp-only~='tab']) {
        display: none !important;
    }
}
@media (max-width: 768px) {
    [disp-only]:not([disp-only~='sp']) {
        display: none !important;
    }
}


/* header */
.header .js_hide_el {
    transition: opacity 0.2s;
}
.header.is_hide .js_hide_el {
    opacity: 0;
    pointer-events: none;
}
.nav_wrap {
    position: fixed;
    z-index: 60;
    text-align:right;
}
nav .nav_list {
    text-align: right;
}
nav .nav_list a {
    color:#fff;
    text-decoration: none;
    font-weight: 500;
}
.header_logo_wrap {
    position: fixed;
    z-index: 60;
    height: auto;
}
.header_logo {
    width: 100%;
    height:auto;
}
@media (min-width: 769px) {
    .nav_wrap {
        top: 43px;
        right: 50px;
    }
    nav .nav_list > li + li {
        margin-top: 19px;
    }
    nav .nav_list a {
        font-size: 12px;
        letter-spacing: 0.1em;
    }
    .header_logo_wrap {
        top: 47px;
        left: 50px;
        width: 220px;
    }
}
@media (max-width: 768px) {
    .menu_wrap {
        display: none;
        opacity:0;

        position: fixed;
        z-index:50;
        top:0;
        left:0;
        width: 100%;
        height:100%;
        background:#000;
        padding: 80rem;
    }
    .menu_wrap .nav_list {
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        height: 100%;
        gap: 33rem;
        padding: 0;
    }
    .nav_list > li a {
        font-size: 14rem;
        color: #fff;
        text-decoration: none;
        letter-spacing: 0.1em;
    }

    .menu_btn {
        outline: none;
        position: relative;
        padding: 30rem 32rem;
        background: transparent;
        border: none;
    }
    .menu_btn_line_wrap {
        position: relative;
        width: 56rem;
        height: 20rem;
    }
    .menu_btn_line {
        position: absolute;
        top: calc(50% - 0.5px);
        left: 0;
        right:0;
        margin-inline: auto;
        display: block;
        width: 56rem;
        border-top: 1px solid #fff;
    }
    .menu_btn_line:nth-child(1) {
        margin-top: -3rem;
        transition: margin-top 0.2s 0.2s, rotate 0.2s 0s;
    }
    .menu_btn_line:nth-child(2) {
        margin-top: 2rem;
        transition: margin-top 0.2s 0.2s, rotate 0.2s 0s;
    }
    .is_opened .menu_btn_line:nth-child(1) {
        margin-top: 0rem;
        rotate: 6deg;
        transition: margin-top 0.2s 0s, rotate 0.2s 0.2s;
    }
    .is_opened .menu_btn_line:nth-child(2) {
        margin-top: 0rem;
        rotate: -6deg;
        transition: margin-top 0.2s 0s, rotate 0.2s 0.2s;
    }
    .menu_wrap .nav_list > li {
        opacity: 0;
        transition: opacity 0.8s;
    }
    .menu_wrap.is_opened .nav_list > li {
        opacity: 1;
    }
    .menu_wrap.is_opened .nav_list > li:nth-child(1) {
        transition-delay: 0s;
    }
    .menu_wrap.is_opened .nav_list > li:nth-child(2) {
        transition-delay: 0.2s;
    }
    .menu_wrap.is_opened .nav_list > li:nth-child(3) {
        transition-delay: 0.4s;
    }
    .menu_wrap.is_opened .nav_list > li:nth-child(4) {
        transition-delay: 0.6s;
    }
    .menu_wrap.is_opened .nav_list > li:nth-child(5) {
        transition-delay: 0.8s;
    }
    .header_logo_wrap {
        top: 33rem;
        left: 34rem;
        width: 152rem;
    }
    .header_menu_btn_wrap {
        position: fixed;
        z-index: 60;
        top:0;
        right:0;
    }
}

/* footer */
.footer {
    background: #000;
}
.footer_inner {
    margin-inline: auto;
}
.footer .nav_list a {
    color:#fff;
    text-decoration: none;
}
.footer_copy {
    color:#fff;
}
@media (min-width: 769px) {
    .footer {
        padding-block: 160px;
        padding-inline: clamp(64px,calc(64px + (120 - 64) * ((100vw - 769px) / (1440 - 769))),120px);
    }
    .footer_inner {
        display: flex;
        justify-content: space-between;
    }
    .footer .nav_list {
        text-align: right;
    }
    .footer_logo {
        width: 300px;
    }
    .footer .nav_list > li + li {
        margin-top: 30px;
    }
    .footer .nav_list a {
        font-size: 14px;
        letter-spacing: 0.1em;
    }
    .footer_copy_wrap {
        margin-top: 180px;
    }
    .footer_copy {
        font-size: 10px;
        letter-spacing: 0.1em;
    }
}
@media (max-width: 768px) {
    .footer {
        padding: 44rem 32rem 118rem;
    }
    .footer_logo {
        width: 185rem;
    }
    .footer .nav_list {
        display: flex;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        height: 100%;
        gap: 0rem;
        padding: 0;
        margin-top: 60rem;
    }

    .footer .nav_list > li + li {
        margin-top: 34.5rem;
    }
    .footer .nav_list a {
        font-size: 12rem;
        letter-spacing: 0.1em;
    }
    .footer_copy_wrap {
         margin-top: 60rem;
    }
    .footer_copy {
        text-align: right;
        font-size: 9rem;
        letter-spacing: 0.1em;
    }
}
@media (min-width: 769px) and (hover: hover) {
    .nav_list a {
        transition: opacity 0.4s;
    }
    .nav_list a:hover {
        opacity: 0.7;
    }
}

[data-page="home"] [data-menu-curent="home"],
[data-page="business"] [data-menu-curent="business"],
[data-page="projects"] [data-menu-curent="projects"],
[data-page="about"] [data-menu-curent="about"],
[data-page="press"] [data-menu-curent="press"] {
    opacity: 0.3;
}

/* kv */
.kv {
    color: #fff;
    overflow: hidden;
    position: relative;
}
.kv_ttl_en {
    display: block;
}
.kv_ttl_jp {
    display: block;
    font-weight: 500;
}
.kv_img {
    width: 100%;
    height: auto;
}
.kv_img_wrap {
    overflow:hidden;
    position: relative;
}
@media (min-width: 769px) {
    .kv {
        border:8px solid #000;
    }
    .kv_ttl {
        margin-inline: clamp(64px,calc(64px + (112 - 64) * ((100vw - 769px) / (1440 - 769))),112px);
        margin-top: 150px;
    }
    .kv_ttl_en {
        font-size: 40px;
        letter-spacing: 0.1em;
    }
    .kv_ttl_jp {
        font-size: 16px;
        letter-spacing: 0.3em;
        margin-top: 30px;
    }
    .kv_img_wrap {
        margin-top: 116px;
    }
    .kv_img {
        height: 584px;
        object-fit: cover;
    }
}
@media (max-width: 768px) {
    .kv {
        border:8rem solid #000;
    }
    .kv_ttl {
        margin-inline: 24rem;
        margin-top: 112rem;
    }
    .kv_ttl_en {
        display: block;
        font-size: 31rem;
        letter-spacing: 0.08em;
    }
    .kv_ttl_jp {
        font-size: 13rem;
        letter-spacing: 0.3em;
        margin-top: 14rem;
    }
    .kv_img_wrap {
        margin-top: 78rem;
    }
    .kv_img {
        width: 100%;
        height: 398rem;
        object-fit: cover;
    }
}

.animation_ready .kv_img {
    transition: scale 1.6s;
}
.animation_loaded .kv_img_wrap.is_animated .kv_img {
    scale: 1;
}
.animation_ready .kv_ttl_en {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 1.6s, filter 1.6s;
}
.animation_ready .kv_ttl_jp {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 1.6s 0.4s, filter 1.6s 0.4s;
}
.animation_loaded .kv_ttl.is_animated .kv_ttl_en {
    opacity: 1;
    filter: blur(0px);
}
.animation_loaded .kv_ttl.is_animated .kv_ttl_jp {
    opacity: 1;
    filter: blur(0px);
}
@media (min-width: 769px) {
    .animation_ready .kv_img {
        scale: 1.05;
    }
}
@media (max-width: 768px) {
    .animation_ready .kv_img {
        scale: 1.1;
    }
}