@charset 'utf-8';


/* Footer */
.menuMain li.menuWork a { border-left: 4px solid #338753;}

/* Contents Wrapper */
.contents_wrap .contents { display: flex; flex-direction: column; gap: 80px; }
.contents_wrap .contents .content_flex_wrap { margin-top: 0; }
.content.right .content_text p { margin-bottom: 0; }
@media screen and (min-width: 1080px) { 
    .contents_wrap .contents { gap: 120px; }
}

/* Common Elements */
h2 { margin-bottom: 32px; }
.before_circle::before { content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 8px; border-radius: 50%; background-color: #338753; }
@media screen and (min-width: 1080px) { 
    h2 { margin-bottom: 64px; }
}

/* Project List */
.project_list { display: flex; flex-direction: column; gap: 60px; }
.project_list li { position: relative; }
.project_list li .project_list_copy { position: absolute; top: -32px; right: 0; display: flex; flex-direction: column; gap: 8px; z-index: 1; }
.project_list li .project_list_copy p { height: fit-content; margin: 0; padding: 8px 0; font-size: 18px; line-height: 24px; }
.project_list li .project_list_img { width: 95vw; max-height: 400px; aspect-ratio: 95 / 64; margin-right: -5vw; border-right: none; overflow: hidden; }
.project_list li .project_list_img img { width: 100%; height: 100%; object-fit: cover; }
.project_list li .project_list_text { margin-top: 24px; }
.project_list li .project_list_text p { margin: 12px 0; }
@media screen and (min-width: 768px) {
    .project_list { flex-direction: row; gap: 60px; }
    .project_list li { flex: 1 1 0; }
    .project_list li .project_list_copy { right: 32px; }
    .project_list li .project_list_img { width: 100%; border-right: 2px solid #000; }
}
@media screen and (min-width: 1080px) {
    .project_list li .project_list_copy p { padding: 12px 0; font-size: 22px; line-height: 28px; }
}

/* Element List */
.element_list { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 5vw; width: 100%; }
.element_list li { display: flex; flex-direction: column; gap: 8px; width: 120px; }
.element_list li .element_icon { width: 100%; height: auto; border: 2px solid #000; border-radius: 50%; overflow: hidden; }
.element_list li .link_button { display: flex; justify-content: space-between; font-size: 16px; }
/* .element_list li .link_button .arrow { margin: 0; } */
@media screen and (min-width: 450px) {
    .element_list { justify-content: left; }
}
@media screen and (min-width: 1080px) {
    .element_list li { width: 140px; }
}
@media screen and (min-width: 1300px) {
    .element_list li { width: 160px; }
}

/* Desktop Styles (1080px+) */
@media screen and (min-width: 1080px) {
    .menuMain li.menuWork a::after { transform: scale(1, 1); }
    
    .contents_wrap .contents { padding: 96px 0 120px; }
    .contents_wrap .contents p { margin: 0; }
    
    .project_list li .fontsize_m { font-size: 26px; line-height: 39px; }
}



/* ----------Project Detail Pages---------- */

.project_top_wrap .contents { padding-bottom: 24px; }
.project_top_wrap h1 { padding-top: 30px; margin-bottom: 36px; }
.project_top_wrap .before_circle_s::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 50%; background-color: #338753; }
.project_top_wrap .project_top_img { width: 100vw; max-height: 400px; aspect-ratio: 95 / 64; margin: 48px -5vw 24px; border-left: none; border-right: none; }
.project_top_wrap .project_top_text .project_outline { padding: 24px 0px; margin: 40px 0; border-top: 1px solid #000; border-bottom: 1px solid #000; }
.project_top_wrap .project_top_text p { padding: 0 0px; }

.project_wrap .contents { padding: 60px 0; }
.project_wrap .contents .content { display: flex; flex-direction: column; gap: 60px; }
.project_wrap .project_flex_wrap { display: flex; flex-direction: column; gap: 20px; }
.project_wrap .project_flex_wrap .project_img { width: 95vw; margin-right: -5vw; border-right: none; }
.project_wrap .project_flex_wrap p { margin-bottom: 0; margin-top: 0; }
.project_wrap .link_button { width: fit-content; margin: 0 auto; }


.only_sp { display: inline; }
.only_pc { display: none; }


.link_button_wrap { padding: 20px 0 60px; text-align: center; background: #FFF; }
@media screen and (min-width: 768px) {
    .link_button_wrap { padding: 80px 0; }
}


@media screen and (min-width: 768px) {
    .only_sp { display: none; }
    .only_pc { display: inline; }
    .ALL_wrap { display: flex; }
    /* .LEFT_wrap { width: calc(10vw + 280px); padding: 116px 5vw 80px 5vw; z-index: 3; margin-right: calc(0% - 280px - 10vw); background: #FFF; } */
    .LEFT_wrap { width: calc(10vw + 280px); padding: 96px 5vw 0 5vw; z-index: 3; margin-right: calc(0% - 280px - 10vw);  }
    .LEFT_wrap .project_top_wrap { position: sticky; top: 5vw; }
    .LEFT_wrap .project_top_text .before_circle_s { display: flex; }
    .LEFT_wrap .project_top_text .before_circle_s::before { margin-top: 10px; }
    .RIGHT_wrap { width: 100vw; }
    .RIGHT_wrap .contents_wrap:nth-child(1) { width: 100%; padding: 116px 5vw 60px calc(15vw + 280px) !important; }
    .RIGHT_wrap .contents_wrap { width: 100%; padding: 60px 5vw 80px calc(15vw + 280px); }
    .RIGHT_wrap .contents_wrap .contents { width: 100%; margin: 0; padding: 0; }
    .RIGHT_wrap .contents_wrap .contents .content { display: flex; flex-direction: column; gap: 60px; }
    .RIGHT_wrap .contents_wrap .contents .project_top_flex_wrap { display: flex; flex-direction: column; gap: 20px; }
    .RIGHT_wrap .contents_wrap .contents .project_flex_wrap { display: flex; flex-direction: column; gap: 20px; }
    .RIGHT_wrap .contents_wrap .contents .project_top_img { width: calc(100% + 5vw); aspect-ratio: 95 / 64; max-height: none; margin: 24px -5vw 0 0; padding: 0; border-right: none; border-left: 2px solid #000;; }
    /* .RIGHT_wrap .contents_wrap .contents .project_img { width: 100%; aspect-ratio: 95 / 64; max-height: none; margin: 0; padding: 0; border-right: 2px solid #000; } */
    .RIGHT_wrap .contents_wrap .contents .project_img { width: 100%; aspect-ratio: 116 / 64; max-height: none; margin: 0; padding: 0; border-right: 2px solid #000; }
    .RIGHT_wrap .contents_wrap .contents p { display: inline-block; width: 98%; margin: 0; padding: 0; }


}
@media screen and (min-width: 1080px) {
    /* .LEFT_wrap { width: calc(20vw + 360px); padding: 116px 5vw 0px 15vw; margin-right: calc(0% - 360px - 20vw); } */
    .LEFT_wrap { margin-right: calc(0% - 360px - 20vw); }
    /* .LEFT_wrap .project_top_wrap { top: 200px; } */
    .LEFT_wrap .project_top_text .before_circle_s::before { margin-top: 18px; }    
    /* .RIGHT_wrap .contents_wrap:nth-child(1) { width: 100%; padding: 116px 5vw 60px calc(25vw + 360px) !important; } */
    .RIGHT_wrap .contents_wrap:nth-child(1) { width: 117.5%; padding: 64px 5vw 60px calc(25vw + 360px) !important; }
    /* .RIGHT_wrap .contents_wrap { width: 100%; padding: 60px 5vw 0px calc(25vw + 360px); } */
    .RIGHT_wrap .contents_wrap { width: 100%; padding: 60px 7vw 0px calc(25vw + 360px); }
    /* .RIGHT_wrap .contents_wrap .contents .project_top_img { width: calc(100% + 15vw); max-height: 600px; margin-top: 40px; } */
    .RIGHT_wrap .contents_wrap .contents .project_top_img { width: auto; max-height: 500px; margin-top: 40px; }
    .ALL_wrap .contents_wrap { width:116vw;}
}

.ALL_wrap .contents_wrap { padding-bottom: 0;}
.ALL_wrap .contents_wrap .contents { padding-top: 28px; }
@media screen and (min-width: 768px) {
    .ALL_wrap .contents_wrap .contents { padding-top: 0; }
}




.construction_list { display: flex; flex-wrap: wrap; gap: 8px; }
.construction_list .construction_title { width: 100%; }
.construction_list li { padding: 0px 12px; border-radius: 99px; background: #FFF; border: 1px solid #338753;}



.project_list li .project_list_img img { transition: all 0.4s ease-in-out; }
.project_list li:hover .project_list_img img { scale: 1.08; }
.project_list li:hover .link_button::before { transform-origin: right top; transform: scale(0, 1); }
.project_list li:hover .link_button .arrow::before { scale: 1.25; }

.element_list li .element_icon img { transition: all 0.4s ease-in-out; }
.element_list li:hover .element_icon img { scale: 1.1; }
.element_list li:hover .link_button::before { transform-origin: right top; transform: scale(0, 1); }
.element_list li:hover .link_button .arrow::before { scale: 1.25;}




.letterspacing_mini { margin-top: -2px; }
.letterspacing_mini span { margin-top: -6px; }
@media screen and (min-width: 1080px) {
    .letterspacing_mini span { margin-top: -9px; }  
}

.RIGHT_wrap .contents_wrap .contents { position: relative; }
.RIGHT_wrap .contents_wrap .contents .project_top_flex_wrap .project_copy { position: absolute; top: 80px; right: 0; display: flex; flex-direction: column; gap: 8px; z-index: 1; }
.RIGHT_wrap .contents_wrap .contents .project_top_flex_wrap .project_copy p { height: fit-content; margin: 0; padding: 12px 0; }
@media screen and (min-width: 768px) {
    .RIGHT_wrap .contents_wrap .contents .project_top_flex_wrap .project_copy { top: 0; }
}


.element_illust { margin-top: 60px; }
@media screen and (min-width: 1080px) {
    .element_illust { margin-top: 90px; }
}

.m_top_0 { margin-top: 0 !important; }

.contents .company_back_img { display: none; }
@media screen and (min-width: 1180px) {
  .content.right { position: relative; }
  .contents .company_back_img { display: inline; height: auto; width: calc(21vw - 10px); opacity: 0.5; position: absolute; top: calc(30px - 1.5vw); right: 0;  }
}



/* 施工事例詳細追加 */
@media screen and (min-width: 1080px) {
.project_top_wrap.project_top_element .project_top_text .project_outline { margin: 0; text-align: justify; border: none;}
.project_top_wrap.project_top_element .element_illust.element_illust_planting { width:160px; padding-left: 0px;
    margin-left: -37px;
    margin-top: 45px;}
    .project_top_wrap.project_top_element .element_illust.element_illust_parking { width:160px; padding-left: 0px;
        margin-left:0;
        margin-top: 45px;}
}