@charset "UTF-8";


.top_feature_sec{
    background: #0a96eb;
}

.feature_new{
    max-width: 800px;
    margin: 0 auto;
}

.feature_flex{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto;
}

.feature_flex > div{
    width: 48%;
}

.min_project_bg{
    padding: 20px 0;
    background: #fad700;
}
.min_project{
    max-width: 500px;
    width: 80%;
    margin: 0 auto;
}

.feature_box{
    padding: 20px 0;
    text-align: center;
}

.feature_box p{
    color: #394867;
    font-size: 43px;
    line-height: 1.4;
    font-weight: 600;
    font-family: 'Noto Sans JP', sans-serif;
}

.feature_box p .font_l{
    font-family: "impact", sans-serif;
    font-weight: 400;
    font-size: 1.6em;
    line-height: 1;
    margin: 0 0.1em;
    color: #ff4632;
    position: relative;
    bottom: -0.07em;
}
.feature_box p .font_s{
    font-size: 0.6em;
}

.num_cap_box span{
    font-size: 0.6em;
    position: absolute;
    left: 50%;
    top: -40%;
    transform: translateX(-50%);
    white-space: nowrap;
}

.info_bg{
    padding: 20px 0;
    background: #0a96eb;
}

.info_box{
    margin: 0 auto;
    /*max-width: 720px;*/
    max-width: 800px;
    text-align: center;
    font-family: 'Noto Sans JP', sans-serif;
    color: #fff;
}

.info_ttl{
    display: inline-block;
    color: #ffdb00;
    border-bottom: 2px solid #fff;
    /* padding-bottom: 10px; */
    padding: 0 20px 10px;
    margin-bottom: 10px;
    font-size: 42px;
    line-height: 1.4;
    font-weight: 600;
}
.info_ttl .num{
    font-family: "impact", sans-serif;
    font-weight: 400;
    font-size: 1.1em;
}
.info_ttl .font_s{
    font-size: 0.6em;
}
.info_lead{
    font-size: 28px;
    line-height: 1.6;
    font-weight: 600;
}
.info_cap{
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    margin-top: 10px;
}

.info_kyuu{
    font-size: 14px;
    font-weight: bold;
    line-height: 1.4;
    margin-top: 10px;
    color: #f00;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
    -1px 1px 0 #FFF, 1px -1px 0 #FFF,
    0px 1px 0 #FFF,  0-1px 0 #FFF,
    -1px 0 0 #FFF, 1px 0 0 #FFF;
}

.two_bd_t01{
    border-top: 8px solid;
    border-image: linear-gradient(to right, #ffa000 50%, #003cff 50%) 1;
}

.two_bd_t02{
    border-top: 8px solid;
    border-image: linear-gradient(to right, #55beb4 50%, #ff4632 50%) 1;
}

.two_bd_b01{
    border-bottom: 8px solid;
    border-image: linear-gradient(to right, #ffa000 50%, #003cff 50%) 1;
}

.two_bd_b02{
    border-bottom: 8px solid;
    border-image: linear-gradient(to right, #394867 50%, #ff4632 50%) 1;
}

.info_entry{
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    padding: 0;
}


.info_entry > p{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 600;
}
.info_entry{
    background: #0a96eb;
}
.info_entry.reserve{
    background: #64c8be;
}

.info_entry > p .font_s{
    font-size: 0.5em;
    line-height: 1;
    display: block;
}
.info_entry > p .font_l{
    font-size: 1.8em;
    line-height: 1;
    text-transform: uppercase;
    font-family: "impact", sans-serif;
    font-weight: 400;
    display: block;
}


#limitedArea{
    background: #fff;
}

#limitedArea .limited_en{
    font-family: "impact", sans-serif;
    font-weight: 400;
    color: #ffa000;
    text-transform: uppercase;
    font-size: 54px;
    margin-bottom: 0.7em;
    width: auto;
}

#limitedArea .limited_layout{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 600;
}
#limitedArea .limited_ttl{
    color: #4a84c5;
}

#limitedArea .limited_txt{
    color: #4bbbb1;
}
#limitedArea .limited_txt .em{
    color: #003cff;
}
#limitedArea .limited_note{
    color: #231f44;
}

.cont_box{
    text-align: center;
    /* aspect-ratio: 192/60; */
    height: 80vh;
    padding: 50px 0;    
    position: relative;
    overflow: hidden;
}
.cont_box::before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.cont_box:hover::before{
    transform: scale(1.1);;
    opacity: 0.8;
}


.cont_ttl{
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 800;
    font-size: 57px;
    letter-spacing: 0.05em;
    line-height: 1.2;
    margin-bottom: 0.1em;
}

.cont_ttl_en{
    font-family: "impact", sans-serif;
    font-weight: 400;
    font-size: 84px;
}

.mark_click{
    max-width: 60px;
    margin: 20px auto 0;
}


.cont_value::before{
    background: url(../img/top/cont_value.jpg) no-repeat;
    background-size: cover;
    background-position:  center;
}
.cont_access::before{
    background: url(../img/top/cont_access.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}
.cont_location::before{
    background: url(../img/top/cont_location.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}
.cont_design::before{
    background: url(../img/top/cont_design.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}
.cont_plan::before{
    background: url(../img/top/cont_plan.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}


.color_green{
    color: #64b9b9;
}
.color_blue{
    color: #4a84c5;
}
.color_blue02{
    color: #0a96eb;
}
.color_orange{
    color: #ffa000;
}
.color_yellow{
    color: #fad700; 
}
.color_white{
    color: #fff;
}
.txt_upper{
    text-transform: uppercase;
}


.info_entry > p::after{
    display: none;
}



@media screen and (max-width: 1000px){

}

@media screen and (max-width: 768px){
    #limitedArea {
        padding: 50px 0 0;
    }
    #limitedArea .limited_layout {
        display: grid;
    }


}

@media screen and (max-width: 750px){

}

@media screen and (max-width: 650px){


    .feature_new{
        max-width: 340px;
        width: 80%;
    }

    .min_project_bg,.feature_box{
        padding: 10px 0;
    }

    .info_entry{
        height: 80px;
        font-size: 24px;
    }

    .top_feature_sec .com_inner {
        padding: 0 20px;
    }

    .feature_flex > div{
        width: 100%;
    }

    .feature_box p{
        font-size: 24px;
    }
    .feature_box p .font_l{
        margin: 0 0.1em;
    }

    .info_ttl{
        font-size: 28px;
    }

    .info_cap,.info_kyuu {
        font-size: 10px;
        line-height: 1.6;
    }

    #limitedArea {
        padding: 30px 0 0;
    }

    #limitedArea .limited_layout {
        display: none;
    }

    #limitedArea .limited_sp_ttl{
        color: #4a84c5;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 600;
    }
    #limitedArea .limited_sp_txt{
        color: #4bbbb1;
        font-family: 'Noto Sans JP', sans-serif;
        font-weight: 700;
        font-size: clamp(10px, 4.5vw, 18px);
    }
    #limitedArea .limited_sp_txt .em{
        color: #003cff;
    }
    #limitedArea .limited_sp_note{
        color: #231f44;
    }
    #limitedArea .limited_sp_image{
        padding-top: 10px;
    }

    #limitedArea .limited_sp_en{
        width: auto;
        margin: 0px auto 30px;
        line-height: 0;
        font-family: "impact", sans-serif;
        font-weight: 400;
        color: #ffa000;
        text-transform: uppercase;
        font-size: 40px;
    }

    .cont_box{
        padding: 20px 0;
    }
    .mark_click {
        max-width: 40px;
    }
    .cont_ttl{
        font-size: 38px;
    }
    .cont_ttl_en{
        font-size: 58px;
    }


    .cont_value::before{
        background: url(../img/top/cont_value_sp.jpg) no-repeat;
        background-size: cover;
        background-position:  center;
    }
    .cont_access::before{
        background: url(../img/top/cont_access_sp.jpg) no-repeat;
        background-size: cover;
        background-position: center;
    }
    .cont_location::before{
        background: url(../img/top/cont_location_sp.jpg) no-repeat;
        background-size: cover;
        background-position: center;
    }
    .cont_design::before{
        background: url(../img/top/cont_design_sp.jpg) no-repeat;
        background-size: cover;
        background-position: center;
    }
    .cont_plan::before{
        background: url(../img/top/cont_plan_sp.jpg) no-repeat;
        background-size: cover;
        background-position: center;
    }

    #appArea{
        margin-top: 0;
    }

}


/* MV */

/* --- 全体のレイアウト --- */
.mv_wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.controls_area {
  position: absolute;
  text-align: right;
  z-index: 201;
  top: 65px;
  right: 5px;
}

.control_btn {
    padding: 5px 10px;
    display: flex;
    justify-content: center;
    height: 2.5em;
    letter-spacing: 0.05em;
    cursor: pointer;
    background: #221e44;
    color: #fff;
    border: none;
    width: 6em;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
}

.is_hidden {
  display: none !important;
}

/* --- スライダー（Slick）エリア --- */
.slider_area {
  width: 100%;
}
.slide_item img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- 光の演出エリア --- */
.animation_area {
  position: relative;
  width: 100%;
}
.base_image {
  display: block;
  width: 100%;
  height: auto;
}
div.base_image img {
  width: 100%;
  height: auto;
  display: block;
}

/* ① 下から上へ伸びるレイヤー（光の建物） */
.mask_layer_up {
  position: absolute; top: 0; left: 0;
  mix-blend-mode: lighten;
  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
  transition: none !important;
  z-index: 2;
}

#layer_building.is_growing,
#layer_building_slide.is_growing,
#layer_building_slide2.is_growing {
  -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);
  transition: clip-path 4.0s ease-out, -webkit-clip-path 4.0s ease-out !important;
}

#layer_building_slide2.is_growing {
  -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0);
  transition: clip-path 0.75s ease-out, -webkit-clip-path 0.75s ease-out !important;
}

/* ② JSで動的にマスクをかけるレイヤー（フレアの軌跡） */
.trail_layer {
  position: absolute; top: 0; left: 0;
  mix-blend-mode: lighten;
  -webkit-clip-path: inset(100% 0 0 0);
  clip-path: inset(100% 0 0 0);
  transition: none !important; 
  z-index: 3;
}

/* ③ フェードインするレイヤー */
.fade_layer {
  position: absolute; top: 0; left: 0;
  opacity: 0;
  transition: none !important;
}

#layer_final, #layer_final_slide { mix-blend-mode: lighten; z-index: 4; }
#layer_name, #layer_name_slide { z-index: 5; }
#layer_sub, #layer_sub_slide { z-index: 6; }

/* 2枚目の文字のz-index */
#layer_text1_slide2, #layer_text2_slide2 { z-index: 15; }

/* 4枚目の文字のz-index */
#layer_text_slide4 { z-index: 15; }

/* クラス付与でフワッと表示 */
#layer_final.is_growing,
#layer_final_slide.is_growing {
  opacity: 1; transition: opacity 2.0s ease-in-out !important; 
}
#layer_name.is_growing,
#layer_name_slide.is_growing,
#layer_sub.is_growing,
#layer_sub_slide.is_growing {
  opacity: 1; transition: opacity 1.5s ease-in-out !important;
}
#layer_text1_slide2.is_growing,
#layer_text2_slide2.is_growing {
  opacity: 1; transition: opacity 1.5s ease-in-out !important;
}

/* 4枚目の文字のフェードイン設定 */
#layer_text_slide4.is_growing {
  opacity: 1; transition: opacity 1.5s ease-in-out !important;
}

.particle_canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* 🌟 スライダーからメイン画面へのクロスフェード用 */
/* .fade_overlay {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200;
  opacity: 0;
  transition: opacity 1.5s ease-in-out !important;
}
.fade_overlay.is_visible {
  opacity: 1 !important;
} */

.fade_overlay {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200;
  opacity: 0;
  transition: opacity 0.7s ease-in-out !important;
}

.fade_overlay.is_visible {
  opacity: 1 !important;
}


.mv_wrapper .db650{
    display: none !important;
}
.mv_wrapper .dn650{
    display: block !important;
}


/* 🌟 フワッと表示される文字画像の土台をGPUに転送する */
#layer_name,
#layer_sub,
#layer_name_slide,
#layer_sub_slide,
#layer_text_slide4 {
  /* ブラウザに「この要素はアニメーションするからGPUで準備して！」と命令 */
  will-change: opacity, transform;
  transform: translateZ(0);
}

/* 🌟 中の画像（PC用/スマホ用の両方）にも適用し、スクロールのガタつきを防ぐ */
#layer_name img,
#layer_sub img,
#layer_name_slide img,
#layer_sub_slide img,
#layer_text_slide4 img {
  will-change: opacity, transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

@media screen and (max-width: 1000px) {
    .controls_area {
        top: 5px;
    }
}

@media screen and (max-width: 650px) {
/* .controls_area {
    top: 5px;
    bottom: initial;
} */
.mv_wrapper .db650{
    display: block !important;
}
.mv_wrapper .dn650{
    display: none !important;
}

.control_btn {
    padding: 5px 5px;
    width: 5em;
    font-size: 12px;
}

}