@charset "UTF-8";


.l_header_image{position: relative;width: 100%;height: 100vh;overflow: hidden;}
.l_header_image::before{content: "";display: block;width: 100%;height: 100%;background: rgb(0 0 0 /.4);position: absolute;top: 0;
z-index: 2;left: 0;}
.header_slider {width: 100%;height: 100%;}
.header_slider .swiper-slide {width: 100%;height: 100%;text-align: center;}
.header_slider .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
.header_msg {
    position: absolute;top: 50%;left: 50%;transform: translate(-50%, -40%);z-index: 2;font-family: "Zen Kaku Gothic New", sans-serif;
    display: flex;height: 100%;justify-content: center;writing-mode: vertical-rl;text-orientation: mixed;color: #fff;font-weight: 500;
    font-size: clamp(20px, 3.054vw, 44.43px);line-height: 2.3;letter-spacing: 14px;
}


.btn{height: 56px;}

.wrapper .title_box h2 {font-family: "Shippori Mincho", serif;font-weight: 500;font-size: 41.35px;}
.wrapper .title_box h2::before {display: block;letter-spacing: 0.4055rem;margin-bottom: 16px;margin-left: 1px;font-family: "Yu Gothic", sans-serif;color: rgb(179 124 87 / .3);font-size: 18px;font-weight: 500;line-height: 1.6;}



#home_first .wrapper{padding-top: 101px;padding-bottom: 118px;max-width: 1440px;margin-right: auto;margin-left: auto;position: relative;}
#home_first .wrapper::before,#home_first .wrapper::after,#home_first .wrapper .frame::before,#home_first .wrapper .frame::after{content: "";display: block;position: absolute;}
#home_first .wrapper::before{background: url(../images/home/first_img1.jpg) no-repeat;}
#home_first .wrapper::after{background: url(../images/home/first_img2.jpg) no-repeat;}
#home_first .wrapper .frame::before{background: url(../images/home/first_img3.jpg) no-repeat;}
#home_first .wrapper .frame::after{background: url(../images/home/first_img4.jpg) no-repeat;}


#home_first .wrapper .frame .title_box h2{background: rgb(255 255 255 / .5);box-shadow: 0 0 10px #FFF;position: relative;z-index: 1;}
#home_first .wrapper .frame .title_box h2::before{content: "ABOUT YAMAKOO";}
#home_first .wrapper .text{position: relative;max-width: 580px;text-align: center;margin: 0 auto;z-index: 1;background: rgb(255 255 255 / .5);box-shadow: 0 0 10px #FFF;padding: 5px;}
#home_first .wrapper .text span{display: block;}
#home_first .wrapper .text span:not(:last-of-type){margin-bottom: 35px;}
#home_first .wrapper .text span:nth-of-type(1){line-height: 1.6;}
#home_first .wrapper .text span:nth-of-type(2){line-height: 1.8;}
#home_first .wrapper .text span:nth-of-type(3),#home_first .wrapper .text span:nth-of-type(4){line-height: 2.5;}
#home_first .btn,#home_project .btn{width: 224px;}
#home_first .btn{margin: 51px auto 0;}


#home_menu .wrapper ul{display: flex;}
#home_menu .wrapper ul li a{position: relative;display: block;width: 100%;height: 100%;color: #FFF;}
#home_menu .wrapper ul li a::before{content: "";display: block;width: 100%;height: 100%;background: rgb(0 0 0 /.5);position: absolute;left: 0;top: 0;}
#home_menu .wrapper ul li.tenant a{background: url(../images/home/menu_tenant.jpg) no-repeat;background-position: center;background-size: cover;}
#home_menu .wrapper ul li.reform a{background: url(../images/home/menu_reform.jpg) no-repeat;background-position: center;background-size: cover;}
#home_menu .wrapper .title_box{z-index: 1;position: relative;}
#home_menu .wrapper .title_box h2{text-align: center;}


#home_menu .wrapper .title_box h2::before{display: block;font-family: "Zen Kaku Gothic New", sans-serif;color: #FFF;font-size: 15px;line-height: 2;letter-spacing: 0.0268rem;margin-bottom: 12px;}
#home_menu .wrapper .tenant .title_box h2::before{content: "Commercial Space Design & Construction";}
#home_menu .wrapper .reform .title_box h2::before{content: "New Home Construction & Renovation";}
#home_menu .wrapper .title_box h2::after{content: "";display: block;width: 97px;height: 49.13px;border: 1px solid #FFF;border-radius: 100vh;background: url(../images/arrow_left_alt.svg) no-repeat center;position: absolute;left: 50%;transform: translateX(-50%);bottom: -81.13px;}


#home_project{background: #F2F1EF;}
#home_project .wrapper{padding: 84px 41px 100px;max-width: 1440px;margin-right: auto;margin-left: auto;}
#home_project .wrapper .frame .title_box{display: grid;place-content: center;background: #FFF;border-radius: 10px;width: 100%;text-align: center;}
#home_project .wrapper .frame .title_box h2{margin-bottom: 36px;}
#home_project .wrapper .frame .title_box h2::before{content: "OUR PROJECTS";}
#home_project .wrapper .frame .title_box .text{line-height: 2;}
#home_project .wrapper .frame .title_box .btn{margin: 46px auto 0;}
#home_project .wrapper .frame .list_images{display: flex;flex-wrap: wrap;gap: 10px;}
#home_project .wrapper .frame .list_images li{width: calc(50% - 5px);}
#home_project .wrapper .frame .list_images .image{display: grid;place-content: center;border-radius: 5px;overflow: hidden;}
#home_project .wrapper .frame .list_images .image img{border-radius: 5px;}
    

#home_journal .wrapper{padding-top: 93px;padding-bottom: 97px;max-width: 1160px;margin-right: auto;margin-left: auto;}

#home_journal .wrapper .title_box .text{max-width: 645px;line-height: 2;padding-bottom: 4px;letter-spacing: -0.04rem;}
.l_contents #home_journal .wrapper .title_box h2::before{content: "YAMAKOO JOURNAL";}
.list_journal{display: flex;gap: 0 20px;}
.list_journal li span.image{display: grid;place-content: center;border-radius: 5px;overflow: hidden;}
.list_journal li span.image img{border-radius: 5px;}
.list_journal li p.title{position: relative;border-bottom: 1px solid rgb(179 124 87 / .3);font-family: "Shippori Mincho", serif;color: #343434;font-size: 20px;font-weight: 500;padding: 16px 0 14px 15px;}
.list_journal li p.title::after{content: "";display: grid;place-content: center;width: 49.36px;height: 25px;background: url(../images/home/arrow_left_alt.svg) no-repeat center #BD7A50;background-size: 11px 8px;border-radius: 22.44px;position: absolute;right: 0;}

#home_news .wrapper{padding-top: 18px;padding-bottom: 95px;max-width: 1035px;margin-right: auto;margin-left: auto;display: flex;}
.l_contents #home_news .wrapper .title_box h2::before{content: "NEWS";}
.list_news li{border-bottom: 1px solid rgb(179 124 87 / .3);}
.list_news li a{color: #343434;display: block;}
.list_news li a:hover{background: rgb(179 124 87 /.05);}
.list_news li .box{display: flex;}
.list_news li time{font-family: "Inter", sans-serif;color: #AFAFAF;font-size: 15px;display: block;width: 84px;}
.list_news li .title{font-size: 15px;line-height: 1.7;max-width: 557px;}

.area_newslist{min-width:70%;}
#home_news .btn{width: 183px;margin-left: 4px;}

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

.btn{height: 45px;}
.l_header_image{height: 400px;}
.l_home_cont section:not(#home_menu) > .wrapper{padding-top: 35px;padding-right: 20px;padding-bottom: 35px;padding-left: 20px;}
.wrapper .title_box h2{margin-bottom: 30px;font-size: 1.5rem;}
.wrapper .title_box h2::before{font-size: 1rem;margin-bottom: 10px;}


#home_first .wrapper::before,#home_first .wrapper::after,#home_first .wrapper .frame::before,#home_first .wrapper .frame::after{background-size: contain;border-radius: 5px;}
#home_first .wrapper::before{width: 140px;height: 82px;left: 8vw;top: 5%;}
#home_first .wrapper::after{width: 145px;height: 169px;top: 9%;right: 10px;}
#home_first .wrapper .frame::before{width: 180px;height: 209px;bottom: 15%;left: 10px;}
#home_first .wrapper .frame::after {width: 170px;height: 100px;right: 10px;bottom: 40%;}
#home_first .wrapper .frame{max-width: 400px;margin-right: auto;margin-left: auto;}
#home_first .wrapper .frame .title_box h2{display: flex;flex-direction: column;
        margin: 0;justify-content: center;align-items: center;padding-bottom: 40px;padding-top: 10px;}
#home_first .wrapper .text{letter-spacing: -0.05rem;text-align: left;}
#home_first .btn{margin-top: 35px;}
#home_first .wrapper .text span:nth-of-type(3) br, #home_first .wrapper .text span:nth-of-type(4) br{display: none;}

.l_home_cont section#home_first .wrapper {padding-top: 115px;padding-bottom: 50px;}

#home_project .wrapper .frame{max-width: 450px;margin: 0 auto;}
#home_project .wrapper .frame .title_box h2{max-width: 500px;padding-bottom: 60px;margin: 0 auto;position: relative;}
#home_project .title_box .box{padding: 30px 10px;letter-spacing: -0.05rem;}
#home_project .wrapper .img_project{margin-top: 10px;}
#home_project .wrapper .frame .title_box .btn{margin-top: 35px;}

#home_menu .wrapper ul,#home_news .wrapper{flex-direction: column;}
#home_menu .wrapper .list_images li{height: 220px;}
#home_menu .wrapper .title_box{width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}
#home_menu .wrapper .list_images .title_box h2{margin-top: -50px;margin-bottom: 0;}
#home_menu .wrapper .title_box h2::after {width: 70px;height: 34px;bottom: 25px;}

.area_journallist{padding-top: 10px;}
.list_journal a {padding-top: 10px;padding-bottom: 10px;border-bottom: 1px solid rgb(179 124 87 / .3);}
.list_journal li span.image{width: 100%;max-width: 150px;}
.list_journal li p.title{width: 100%;border-bottom: none;font-size: 18px;letter-spacing: 0;}
.list_journal li p.title::after{bottom: 20px;}
.list_journal{flex-direction: column;}
.list_journal a{display: flex;}

#home_news .title_box{display: flex;align-items: center;justify-content: space-between;}
.list_news li .title{font-size: 14px;}
.list_news li .box{gap: 0 20px;}
.list_news li a{padding: 10px 0;}
.list_news li time{font-size: 13px;}
#home_news .btn{width: 160px;margin-left: 0;}

}

@media screen and (min-width:768px) {

#home_first .wrapper .frame .title_box h2{width: 272px;margin: 0 auto;padding: 0 10px 50px;}
#home_first .wrapper::before{width: 240px;height: 141px;top: 130px;left: 7%;background-size: contain;}
#home_first .wrapper::after{width: 180px;height: 209px;top: 146px;right: 70px;background-size: contain;}
#home_first .wrapper .frame::before{width: 230px;height: 269px;left: 15px;bottom: 117px;background-size: contain;}
#home_first .wrapper .frame::after{width: 245px;height: 144px;right: 0;bottom: 174px;background-size: contain;}

#home_menu .wrapper ul{height: 505px;}
#home_menu .wrapper ul li{width: 50%;height: 100%;overflow: hidden;}
#home_menu .wrapper ul li a{padding-top: 136px;}
#home_menu .wrapper ul li a:hover{-webkit-transform: scale(1.05);transform: scale(1.05);}

.l_home_cont section:not(#home_menu) > .wrapper{padding-right: 40px;padding-left: 40px;}

#home_journal .title_box{display: flex;align-items: flex-end;margin-bottom: 58px;gap: 0 5%;}

.list_journal li p.title{letter-spacing: -0.05rem;}


#home_news .wrapper{gap: 0 80px;}
.list_news li .box{gap: 0 74px;}
.list_news li a{padding-top: 28px;padding-bottom: 27.5px;}
.l_contents #home_news .wrapper .title_box h2{margin-bottom: 61px;}

}


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

}


@media screen and (min-width:981px) {
   #home_journal .wrapper .title_box{padding-left: 39px;}
  .list_journal li{width: 33.3333%;}
    .list_journal li p.title::after{top: 19px;}

}

@media screen and (min-width:768px) and (max-width:980px) {
   .list_journal li p.title{padding-bottom: 40px;}
   .list_journal li p.title::after{top: 45px;}
}

@media screen and (min-width:768px) and (max-width:1220px) {

}

@media screen and (min-width:768px) and (max-width:1080px) {
#home_project .wrapper .frame .title_box{padding-top: 50px;padding-bottom: 40px;}
#home_project .wrapper .frame .list_images{flex-wrap: nowrap;margin-top: 10px;}
#home_journal .wrapper .title_box h2{width: 80%;}
#home_journal .wrapper .title_box .text{width: 100%;}
}


@media screen and (min-width:1081px) {

    #home_project .wrapper .frame{display: flex;gap: 0 10px;}


    #home_first .wrapper .frame::before{width: 324px;height: 377px;left: 46px;bottom: 176px;}
    #home_first .wrapper .frame::after{width: 354px;height: 207px;right: 0;bottom: 174px;}


}

@media screen and (min-width:1180px) {
    #home_first .wrapper::before{width: 304px;height: 178px;top: 130px;left: 140px;}
    #home_first .wrapper::after{width: 269px;height: 313px;top: 146px;right: 140px;}
}



@media screen and (min-width:1220px) {

    #home_news .wrapper{gap: 0 133px;}
    #home_journal .wrapper .title_box{gap: 0 140px;}
    #home_journal .wrapper .title_box h2{width: 320px;}

}

@media screen and (min-width:1300px) {

}

@media screen and (min-width:1440px) {
    #home_project .wrapper .frame .title_box{height: 793px;max-width: 674px;}
}