@charset "utf-8";

/* mv_op */
.mv_op_main {
    opacity:0;
    filter: blur(10px);
}
.mv_op {
    position: fixed;
    top:0;
    left:0;
    right:0;
    height: 100vh;
    height:100svh;
    background: #000;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
}
.animation_loaded .mv_op_main {
    opacity: 1;
    filter: blur(0px);
    transition: opacity 1.6s, filter 1.6s;
}
.animation_loaded .mv_op {
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.6s 2.6s;
}

/* mv */
.mv {
    position: relative;
}

.mv_inner {
    top:0;
    left:0;
    width:100%;
}
.mv_bg_cover {
    position: relative;
    overflow: hidden;
    width:100%;
    height:100vh;
    height: calc(100svh - 8rem);
}
.mv_bg {
    position: relative;
    object-fit: cover;
    top:100%;
    top: 0%;
    left:0;
    width:100%;
    height:100vh;
    height: calc(100svh - 8rem);
}

.bg_0,
.bg_0 img {
    overflow: hidden;
    position:relative;
    object-fit: cover;
    top: 0;
    left:0;
    width:100%;
    height:100vh;
    height:100svh;
    height: calc(100svh - 8rem);
}
.mv_front {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}
.mv_front_inner {
    position: sticky;
    top:0;
    left:0;
    width: 100%;
    height: calc(100svh - 8rem);
}
.vertical_sideways {
    writing-mode: vertical-rl;
    text-orientation: sideways;
}
.mv_scroll_txt_wrap {
    position: absolute;
    color:#fff;
    bottom: 34px;
}
.mv_main_txt_wrap {
    position:absolute;
    top:0;
    left:0;
    right:0;
    top: 50vh;
    top: 50svh;
    transform: translateY(-50%);
    text-align: center;
    color:  #FFF;
    font-weight: 500;
}
@media (min-width: 769px) {
    .mv_bg_cover {
        border-top: 8px solid #000;
    }
    .mv_front {
        border:8px solid #000;
    }
    .mv_scroll_txt_wrap {
        bottom: 34px;
        font-size:10px;
        left: 38px;
        letter-spacing: 0.2em;
    }
    .mv_main_txt_wrap {
        font-size: 24px;
        line-height: 1;
        letter-spacing: 0.3em;
    }
}
@media (max-width: 768px) {
    .mv_bg_cover {
        border-top: 8rem solid #000;
    }
    .mv_front {
        border: 8rem solid #000;
    }
    .mv_scroll_txt_wrap {
        bottom: 15rem;
        font-size: 9rem;
        left: 13rem;
        letter-spacing: 0.2em;
    }
    .mv_main_txt_wrap {
        font-size: 20rem;
        line-height: 1;
        letter-spacing: 0.3em;
    }
}

@media (min-width: 769px) {
    .animation_ready .mv_bg_0 {
        scale: 1.025;
    }
}
@media (max-width: 768px) {
    .animation_ready .mv_bg_0 {
        scale: 1.05;
    }
}
.animation_ready .mv_bg_0 {
    transition: scale 1.6s;
}
.animation_loaded .bg_0.is_animated .mv_bg_0 {
    scale: 1;
}
.animation_ready .mv_bg_cover:nth-child(odd) .mv_bg {
    scale: 1.05;
    transition: scale 1.6s;
}
.animation_ready .mv_bg_cover:nth-child(even) .mv_bg {
    scale: 1;
    transition: scale 1.6s;
}
.animation_loaded .mv_bg_cover.is_animated:nth-child(odd) .mv_bg {
    scale: 1;
}
.animation_loaded .mv_bg_cover.is_animated:nth-child(even) .mv_bg {
    scale: 1.05;
}


/* top_section */
.top_section {
    position: relative;
    overflow: hidden;
}
.top_section_right {
    text-align: right;
}
.top_section_inner {
    position: relative;
    margin-inline: auto;
    display: flex
}
.top_section_right .top_section_inner {
    justify-content: end;
}
.top_section_inbox {
    display: block;
    text-decoration: none;
}
.top_section_ttl {
    color: #FFF;
}
.top_section_txt {
    color: #FFF;
    font-weight: 500;
}
.top_section_btn {
    color: #fff;
    font-weight: 500;
    text-decoration: none;
}
.top_section_btn_dot {
    display:inline-block;
    position: relative;
}
.top_section_btn_dot::before {
    content:"";
    display:block;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height:100%;
    border-radius: 50%;
    background:#AB9A93;
    opacity: 0.5;
}
.top_section_btn_dot::after {
    content:"";
    display:block;
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height:100%;
    border-radius: 50%;
    background:#AB9A93;
}
.top_section_bg_img_1 {
    position: absolute;
    overflow: hidden;
}
.top_section_bg_img_2 {
    position: absolute;
    overflow: hidden;
}
.business {
    --bg_img_1_left: -1320px;
    --bg_img_2_left: -141px;
}
.projects {
    --bg_img_1_left: 458px;
    --bg_img_2_left: -720px;
}
.about {
    --bg_img_1_left: -1320px;
    --bg_img_2_left: -141px;
}
.press {
    --bg_img_1_left: 458px;
    --bg_img_2_left: -720px;
}
@media (min-width: 769px) {
    .top_section {
        height: 544px;
        margin-top: 155px;
    }
    .top_section_inner {
        width: calc(768px - 40px * 2);
        margin-top: 225px;
    }
    .top_section_ttl {
        font-size: 40px;
        line-height: 1;
        letter-spacing: 0.1em;
    }
    .top_section_txt {
        font-size: 16px;
        line-height: 1;
        letter-spacing: 0.3em;
        margin-top: 40px;
        margin-left: 5px;
    }
    .top_section_btn_wrap {
        margin-top: 72px;
    }
    .top_section_btn {
        font-size: 12px;
        line-height: 1;
        letter-spacing: 0.3em;
        margin-left: 13px;
    }
    .top_section_btn_dot {
        top: -0.1em;
        width:6px;
        height:6px;
        margin-right: 16px;
    }
    .top_section_bg_img_1 {
        top:0;
        left: calc(50% + var(--bg_img_1_left));
        width: 860px;
        height: 540px;
    }
    .top_section_bg_img_2 {
        top:0;
        left: calc(50% + var(--bg_img_2_left));
        width: 860px;
        height: 540px;
    }
    .business {
        --bg_img_1_left: -1320px;
        --bg_img_2_left: -141px;
    }
    .projects {
        --bg_img_1_left: 458px;
        --bg_img_2_left: -720px;
    }
    .about {
        --bg_img_1_left: -1320px;
        --bg_img_2_left: -141px;
    }
    .press {
        --bg_img_1_left: 458px;
        --bg_img_2_left: -720px;
    }
}
@media (max-width: 768px) {
    .top_section {
        height: 506rem;
        margin-top: 113rem;
    }
    .top_section + .top_section {
        margin-top: 0;
    }
    .top_section_inner {
        margin-inline: 30rem;
        margin-top: 310rem;
    }
    .top_section_ttl {
        font-size: 30rem;
        line-height: 1;
        letter-spacing: 0.1em;
    }
    .top_section_txt {
        font-size: 14rem;
        line-height: 1;
        letter-spacing: 0.2em;
        margin-top: 23rem;
        margin-left: 2rem;
    }
    .top_section_btn_wrap {
        margin-top: 40rem;
    }
    .top_section_btn {
        font-size: 10rem;
        line-height: 1;
        letter-spacing: 0.3em;
        margin-left: 2rem;
    }
    .top_section_btn_dot {
        top: -0.1em;
        width: 6rem;
        height: 6rem;
        margin-right: 8rem;
    }
    .top_section_bg_img_1 {
        top:0;
        left: calc(50% + var(--bg_img_1_left));
        width: 490rem;
        height: 327rem;
    }
    .top_section_bg_img_2 {
        top: 0;
        left: calc(50% + var(--bg_img_2_left));
        width: 490rem;
        height: 327rem;
    }
    .top_section_bg_img_1 img,
    .top_section_bg_img_2 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .business {
        --bg_img_1_left: 163rem;
        --bg_img_2_left: -358rem;
    }
    .projects {
        --bg_img_1_left: -653rem;
        --bg_img_2_left: -130rem;
    }
    .about {
        --bg_img_1_left: 162rem;
        --bg_img_2_left: -359rem;
    }
    .press {
        --bg_img_1_left: -653rem;
        --bg_img_2_left: -130rem;
    }
}
@media (min-width: 769px) and (hover: hover) {
    .top_section_inbox .top_section_btn_dot::before {
        transition: scale 0.4s;
    }
    .top_section_inbox:hover .top_section_btn_dot::before {
        scale: 4;
    }
}

/* animation */
.animation_ready .top_section_bg_img {
    transition: scale 1.6s;
}
.animation_loaded .is_animated .top_section_bg_img {
    scale: 1;
}
.animation_ready .top_section_ttl {
    opacity:0;
    filter: blur(10px);
    transition: opacity 1.6s, filter 1.6s;
}
.animation_ready .top_section_txt {
    opacity:0;
    filter: blur(10px);
    transition: opacity 1.6s, filter 1.6s;
}
.animation_ready .top_section_btn_wrap {
    opacity:0;
    filter: blur(10px);
    transition: opacity 1.6s, filter 1.6s;
}
.animation_loaded .is_animated .top_section_ttl {
    opacity:1;
    filter: blur(0px);
    transition-delay: 0s;
}
.animation_loaded .is_animated .top_section_txt {
    opacity:1;
    filter: blur(0px);
    transition-delay: 0.8s;
}
.animation_loaded .is_animated .top_section_btn_wrap {
    opacity:1;
    filter: blur(0px);
    transition-delay: 1.6s;
}
@media (min-width: 769px) {
    .animation_ready .top_section_bg_img {
        scale: 1.05;
        transition: scale 1.6s;
    }
}
@media (max-width: 768px) {
    .animation_ready .top_section_bg_img {
        scale: 1.1;
        transition: scale 1.6s;
    }
}