@charset "utf-8";

/* intro */
.intro_inner {
    position: relative;
    margin-inline: auto;
}
.intro_txt_set  {
    position: relative;
    color: #fff;
    font-weight: 500;
}
.intro_img_wrap {
    position: absolute;
    overflow: hidden;
}
.intro_img {
    filter: grayscale(1);
}
.intro_img_inner {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.intro_in_img_wrap {
    width:65%;
}
@media (min-width: 769px) {
    .intro {
        padding-inline: 55px;
    }
    .intro_inner {
        padding-top: 750px;
        max-width: 908px;
    }
    .intro_txt_set  {
        width: 101%;
    }
    .intro_txt_set > dt {
        font-size: 20px;
        line-height: 3;
        letter-spacing: 0.1em;
    }
    .intro_txt_set > dd {
        font-size: 14px;
        line-height: 3;
        letter-spacing: 0.1em;
        margin-top: 40px;
    }
    .intro_img_wrap {
        top: 150px;
        left: calc(50% - 618px / 2);
        width: 618px;
    }
}
@media (max-width: 768px) {
    .intro {
        padding-inline: 32rem;
    }
    .intro_inner {
        padding-top: 434rem;
    }
    .intro_txt_set  {
        width: 101%;
    }
    .intro_txt_set > dt {
        font-size: 16rem;
        line-height: 2.4;
        letter-spacing: 0.12em;
    }
    .intro_txt_set > dd {
        font-size: 12rem;
        line-height: 3;
        letter-spacing: 0.1em;
        margin-top: 35rem;
    }
    .intro_img_wrap {
        top: 110rem;
        left: 0;
        right: 0;
        width: 263rem;
        margin-inline: auto;
    }
}

/* common */
.projects_ttl {
    position: relative;
    color:#fff;
}
.projects_ttl_en {
    display: block;
}
.projects_ttl_jp {
    display: block;
    font-weight: 500;
}
.vertical-swiper {
    opacity: 0;
}
.is_ready.vertical-swiper {
    opacity: 1;
    transition: opacity 0.4s ease;
}
@media (min-width: 769px) {
    .projects_ttl_en {
        font-size: 32px;
        line-height: 1;
        letter-spacing: 0.1em;
    }
    .projects_ttl_jp {
        font-size: 14px;
        line-height: 1;
        letter-spacing: 0.1em;
        margin-top: 32px;
    }
}
@media (max-width: 768px) {
    .projects_ttl_en {
        font-size: 24rem;
        line-height: 1;
        letter-spacing: 0.1em;
    }
    .projects_ttl_jp {
        font-size: 12rem;
        line-height: 1;
        letter-spacing: 0.1em;
        margin-top: 25rem;
    }
}

/* japan */
.japan {
    overflow: hidden;
    position: relative;
}
.japan_inner {
    margin-inline: auto;
    display: flex;
}
.japan_left,
.japan_right {
    position: relative;
}
.projects_histry_list > li > dl {
    display: flex;
}
.projects_histry_list > li > dl > dt {
    color: #6C6C6C;
    font-weight: 500;
}
.projects_histry_list > li > dl > dd {
    color:#FFF;
    font-weight: 500;
}
.projects_histry_list > li > dl > dd a {
    color: inherit;
}
.japan_img_1_wrap {
    position: absolute;
    filter: grayscale(1);
    pointer-events: none;
}
.japan_img_1_wrap::after {
    content:"";
    position:absolute;
    z-index: 1;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background:rgba(0,0,0,0.8);
}
.japan_bg_swiper {
    width: 100%;
    height:100%;
    opacity:0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}
.japan_bg_swiper.is_ready {
    opacity: 1;
    visibility: visible;
}
.japan_bg_swiper .swiper-slide {
    width: 100%;
    height:100%;
}
.japan_bg_img {
    width:100%;
    height:auto;
}
.japan .japan_swiper .swiper-slide img {
    width: 100%;
}
.japan_swiper {
    pointer-events: none;
}
@media (min-width: 769px) {
    .japan {
        margin-top: 158px;
    }
    .japan_inner {
        max-width: 1200px;
        margin-top: 235px;
    }
    .japan_right {
        margin-right: clamp(-68px,calc(-68px + (0 - -68) * ((100vw - 769px) / (1440 - 769))),0px);
        z-index:1;
    }
    .japan_left,
    .japan_right {
        flex: 1;
        padding-left: 48px;
    }
    .projects_histry_list_wrap {
        margin-top: 80px;
    }
    .projects_histry_list > li > dl {
        gap: 40px;
    }
    .projects_histry_list > li > dl > dt {
        font-size: 14px;
        line-height: 3;
        letter-spacing: 0.1em;
    }
    .projects_histry_list > li > dl > dd {
        font-size: 14px;
        line-height: 3;
        letter-spacing: 0.1em;
    }
    .projects_histry_item_small {
        font-size: 12px;
    }
    .japan .projects_histry_list > li > dl > dt {
        width: 38px;
    }
    .japan_img_1_wrap {
        top: -235px;
        left: 398px;
        width: 1382px;
        margin-left: clamp(-53px,calc(-53px + (0 - -53) * ((100vw - 769px) / (1440 - 769))),0px);
    }
    .japan .japan_swiper {
        height: 921px;
        position: absolute;
        top: -232px;
        left: -120px;
        margin-left: clamp(0px,calc(120px + (0 - 120) * ((100vw - 769px) / (1440 - 769))),120px);
    }
    .japan .japan_swiper .swiper-slide {
        width: 680px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
    }
    .japan .japan_swiper .swiper-slide:not(.swiper-slide-active) {
        transform: scale(0.5)!important;
    }
    .japan .japan_swiper .swiper-slide-active {
        transform: scale(1)!important;
    }
}
@media (max-width: 768px) {
    .japan {
        margin-top: 117rem;
    }
    .japan_inner {
        margin-top: 177rem;
    }
    .japan_right {
        margin-right: 10rem;
        z-index:1;
    }
    .japan_left,
    .japan_right {
        flex: 1;
        padding-left: 16rem;
    }
    .projects_histry_list_wrap {
        margin-top: 80px;
    }
    .projects_histry_list > li > dl {
        gap: 40px;
    }
    .projects_histry_list > li > dl > dt {
        font-size: 14px;
        line-height: 3;
        letter-spacing: 0.1em;
    }
    .projects_histry_list > li > dl > dd {
        font-size: 14px;
        line-height: 3;
        letter-spacing: 0.1em;
    }
    .projects_histry_item_small {
        font-size: 12px;
    }
    .japan_img_1_wrap {
        top: -130rem;
        left: -284rem;
        width: 960rem;
        margin-left: 0;
    }
    .japan .japan_swiper {
        height: 390rem;
        width: 229rem;
        position: absolute;
        z-index: 5;
        top: -177rem;
        left: 153rem;
    }
    .japan .japan_swiper .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
    }
    .japan .japan_swiper .swiper-slide:not(.swiper-slide-active) {
        transform: scale(0.6)!important;
        transform-origin: 100% 50%!important;
    }
    .japan .japan_swiper .swiper-slide-active {
        transform: scale(1)!important;
    }
}

/* hawaii */
.hawaii {
    overflow: hidden;
    position: relative;
}
.hawaii_inner {
    margin-inline: auto;
    display: flex;
}
.hawaii_left,
.hawaii_right {
    position: relative;
    flex:1;
}
.hawaii_right {
    z-index:2;
}
.projects_histry_list > li > dl {
    display: flex;
}
.projects_histry_list > li > dl > dt {
    color: #6C6C6C;
    font-weight: 500;
}
.projects_histry_list > li > dl > dd {
    color:#FFF;
    font-weight: 500;
}
.projects_histry_list > li > dl > dd a {
    color: inherit;
}
.hawaii_img_1_wrap {
    position: absolute;
}
.hawaii_img_2_wrap {
    position: absolute;
}
.hawaii_img_3_wrap {
    position: absolute;
}
.hawaii_img_4_wrap {
    position: absolute;
}
.hawaii_img {
    width: 100%;
    height:auto;
}
.hawaii_img_1_wrap {
    position: absolute;
    filter: grayscale(1);
}
.hawaii_img_1_wrap::after {
    content:"";
    position:absolute;
    z-index: 1;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background:rgba(0,0,0,0.8);
}
.hawaii_bg_swiper {
    width: 100%;
    height:100%;
    opacity:0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}
.hawaii_bg_swiper.is_ready {
    opacity: 1;
    visibility: visible;
}
.hawaii_bg_swiper .swiper-slide {
    width: 100%;
    height:100%;
}
.hawaii_bg_img {
    width:100%;
    height:auto;
}
.hawaii .hawaii_swiper .swiper-slide img {
    width: 100%;
}
.hawaii_swiper {
    pointer-events: none;
}
@media (min-width: 769px) {
    .hawaii {
        margin-top: 162px;
        padding-bottom: 250px;
    }
    .hawaii_inner {
        max-width: 1200px;
        margin-top: 222px;
    }
    .hawaii_left,
    .hawaii_right {
        flex:1;
        padding-left: 86px;
        margin-left: clamp(-53px,calc(-53px + (0 - -53) * ((100vw - 769px) / (1440 - 769))),0px);
    }
    .hawaii_left {
        order: 1;
    }
    .projects_histry_list_wrap {
        margin-top: 77px;
        width: 500px;
    }
    .projects_histry_list > li > dl {
        gap: 40px;
    }
    .projects_histry_list > li > dl > dt {
        font-size: 14px;
        line-height: 3;
        letter-spacing: 0.1em;
    }
    .projects_histry_list > li > dl > dd {
        font-size: 14px;
        line-height: 3;
        letter-spacing: 0.1em;
    }
    .projects_histry_item_small {
        font-size: 12px;
    }
    .hawaii .projects_histry_list > li > dl > dt {
        width: 61px;
    }
    .hawaii_img_1_wrap {
        top: -222px;
        right: 398px;
        width: 1368px;
        margin-left: clamp(-53px,calc(-53px + (0 - -53) * ((100vw - 769px) / (1440 - 769))),0px);
    }
    .hawaii .hawaii_swiper {
        height: 921px;
        position: absolute;
        top: -232px;
        right: -120px;
        margin-right: clamp(0px, calc(120px + (0 - 120) * ((100vw - 769px) / (1440 - 769))), 120px);
    }
    .hawaii .hawaii_swiper .swiper-slide {
        width: 680px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
    }
    .hawaii .hawaii_swiper .swiper-slide:not(.swiper-slide-active) {
        transform: scale(0.5)!important;
    }
    .hawaii .hawaii_swiper .swiper-slide-active {
        transform: scale(1)!important;
    }
}
@media (max-width: 768px) {
    .hawaii {
        margin-top: 80rem;
        padding-bottom: 50rem;
    }
    .hawaii_inner {
         margin-top: 173rem;
    }
    .hawaii_left,
    .hawaii_right {
        flex:1;
        padding-left: 33rem;
    }
    .hawaii_left {
        order: 1;
    }
    .projects_histry_list_wrap {
        margin-top: 32rem;
        width: 348rem;
    }
    .projects_histry_list > li > dl {
        gap: 0rem;
        flex-direction: column;
    }
    .projects_histry_list > li > dl > dt {
        font-size: 12rem;
        line-height: 3;
        letter-spacing: 0.1em;
    }
    .projects_histry_list > li > dl > dd {
        font-size: 12rem;
        line-height: 2;
        letter-spacing: 0.1em;
    }
    .projects_histry_item_list > li + li {
        margin-top: 12px;
    }
    .projects_histry_item_small {
        font-size: 10rem;
    }
    .hawaii_img_1_wrap {
        top: -129rem;
        right: -272rem;
        width: 987rem;
    }
    .hawaii .hawaii_swiper {
        height: 390rem;
        width: 229rem;
        position: absolute;
        z-index:5;
        top: -170rem;
        right: 36rem;
    }
    .hawaii .hawaii_swiper .swiper-slide {
        /* width: 228rem; */
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.3s ease;
    }
    .hawaii .hawaii_swiper .swiper-slide:not(.swiper-slide-active) {
        transform: scale(0.6)!important;
        transform-origin: 100% 50%!important;
    }
    .hawaii .hawaii_swiper .swiper-slide-active {
        transform: scale(1)!important;
    }
}

/* gallery */
.gallery {
    position: relative;
}
.gallery .projects_ttl {
    text-align: center;
}
.gallery_ttl {
    text-align: center;
    color:  #FFF;
    font-weight: 500;
}
.gallery_ttl_large {
    display: block;
}
.gallery_ttl_small {
    display: block;
}

[data-gallery] {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease;
}
[data-gallery].is_ready {
  opacity: 1;
  visibility: visible;
}
.gallery_swiper_over_wrap {
    position: relative;
}
.gallery_swiper_wrap {
    margin-inline: auto;
}
.gallery_img {
    width: 100%;
    height: auto;
}
.gallery_thumb {
    margin-inline: auto;
}
.thumbs {
    display: grid;
}
.gallery_thumb .thumb {
    filter: grayscale(1);
    cursor: pointer;
    transition: filter 0.4s;
}
.gallery_thumb .thumb.is_active {
    filter: grayscale(0);
}
.gallery_swiper .swiper-slide {
    transition: filter 1.6s;
}
.gallery_swiper .swiper-slide:not(.swiper-slide-active) {
    filter: grayscale(100);
}
@media (min-width: 769px) {
    .gallery {
        margin-top:160px;
    }
    .gallery_ttl_large {
        font-size: 20px;
        line-height: 3;
        letter-spacing: 0.1em;
    }
    .gallery_ttl_small {
        font-size: 14px;
        line-height: 3;
        letter-spacing: 0.1em;
        margin-top: -8px;
    }
    .gallery_swiper_over_wrap {
        max-width: min(912px, 80%);
        margin-inline: auto;
    }
    .gallery_swiper_wrap {
        position: relative;
        width: 100%;
        padding-top: calc(608 / 912 * 100%);
        margin-top: 80px;
    }
    .gallery_swiper_cover {
        position:absolute;
        top:0;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% * 3 + 8px * 2);
    }
    .gallery_swiper .swiper-slide {
        width: 100%;
    }
    .gallery_thumb {
        width: calc(182px * 6 + 8px * 5);
        max-width: 100%;
        margin-top: 80px;
    }
    .thumbs {
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
    }
    @media (max-width: 1200px) {
        .thumbs {
            grid-template-columns: repeat(3, 1fr);
            max-width: 571px;
            margin-inline:auto;
        }
    }

    .gallery_6 {
        margin-top: 82px;
    }
    .gallery_1 {
        margin-top: 122px;
    }
    .gallery_2 {
        margin-top: 122px;
    }
    .gallery_3 {
        margin-top: 122px;
    }
    .gallery_4 {
        margin-top: 122px;
    }
    .gallery_7 {
        margin-top: 122px;
    }
    .gallery_5 {
        margin-top: 122px;
    }
}
@media (max-width: 768px) {
    .gallery {
        margin-top: 74rem;
    }
    .gallery_ttl_large {
        font-size: 12rem;
        line-height: 3;
        letter-spacing: 0.1em;
    }
    .gallery_ttl_small {
        font-size: 10rem;
        line-height: 3;
        letter-spacing: 0.1em;
        margin-top: -3rem;
    }
    .gallery_swiper_over_wrap {
        margin-inline: auto;
        max-width: 84%;
    }
    .gallery_swiper_wrap {
        position: relative;
        width: 100%;
        padding-top: calc(608 / 912 * 100%);
        margin-top: 40rem;
    }
    .gallery_swiper_cover {
        position:absolute;
        top:0;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% * 3 + 8px * 2);
    }
    .gallery_swiper .swiper-slide {
        width: 100%;
    }
    .gallery_thumb {
        max-width: 72%;
        margin-top: 40rem;
    }
    .thumbs {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    .gallery_6 {
        margin-top: 80rem;
    }
    .gallery_1 {
        margin-top: 78rem;
    }
    .gallery_2 {
        margin-top: 78rem;
    }
    .gallery_3 {
        margin-top: 79rem;
    }
    .gallery_4 {
        margin-top: 79rem;
    }
    .gallery_7 {
        margin-top: 79rem;
    }
    .gallery_5 {
        margin-top: 78rem;
    }
    .footer {
        margin-top: 76rem;
    }
}

.swiper-slide-next,
.swiper-slide-prev {
    cursor: pointer;
}

/* animation */
.animation_ready .intro_txt_set > dt,
.animation_ready .japan_right .projects_ttl,
.animation_ready .hawaii_right .projects_ttl {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 1.6s 0s, filter 1.6s 0s;
}
.animation_ready .intro_txt_set > dd,
.animation_ready .japan_right .projects_histry_list_wrap,
.animation_ready .hawaii_right .projects_histry_list_wrap {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 1.6s 0.8s, filter 1.6s 0.8s;
}

.animation_loaded .intro_txt_set.is_animated > dt,
.animation_loaded .japan_right.is_animated .projects_ttl,
.animation_loaded .hawaii_right.is_animated .projects_ttl {
    opacity: 1;
    filter: blur(0px);
}
.animation_loaded .intro_txt_set.is_animated > dd,
.animation_loaded .japan_right.is_animated .projects_histry_list_wrap,
.animation_loaded .hawaii_right.is_animated .projects_histry_list_wrap {
    opacity: 1;
    filter: blur(0px);
}
.animation_ready .intro_img {
    transition: scale 1.6s;
}
.animation_loaded .is_animated .intro_img {
    scale: 1;
}
.animation_ready .intro_in_img {
    transition: scale 1.6s;
    scale: 1;
}
.animation_ready .gallery_ttl,
.animation_ready .projects_ttl {
    opacity: 0;
    filter: blur(10px);
    transition: opacity 1.6s 0s, filter 1.6s 0s;
}
.animation_loaded .gallery_ttl.is_animated,
.animation_loaded .projects_ttl.is_animated {
    opacity: 1;
    filter: blur(0px);
}
@media (min-width: 769px) {
    .animation_ready .intro_img {
        scale: 1.05;
    }
    .animation_loaded .is_animated .intro_in_img {
        scale: 1.05;
    }
}
@media (max-width: 768px) {
    .animation_ready .intro_img {
        scale: 1.1;
    }
    .animation_loaded .is_animated .intro_in_img {
        scale: 1.1;
    }
}