@charset "UTF-8";


body {
    font-family: "Klee One", cursive;
    font-weight: 400;
    font-style: normal;
    background-color: #D8DFE6;
}

.site_logo_wrapper {
    height: 113px;
    display: flex;
    align-items: center;
    padding-left: 60px;
    background-color: white;

    height: clamp(60px, 7.887vw - 0.571px, 113px);
    padding-left: clamp(32px, 4.167vw, 60px);
}
.site_logo {
    width: 315.4px;
    height: 44.33px;

    /* SVGファイルを型抜きマスクとして使う */
    mask-image: url(../img/site_logo.svg);
    mask-size: contain;
    mask-repeat: no-repeat;
    background-color: black;

    width: clamp(168px, 21.935vw - 0.457px, 315.4px);
    height: clamp(23px, 3.174vw - 1.377px, 44.33px);
}
.site_logo a {
    display: inline-block;
    width: 100%;
    height: 100%;
}
@media ( max-width: 768px ) {
    .site_logo_wrapper {
        height: 60px;
        padding-left: 32px;
    }
    .site_logo {
        width: 168px;
        height: 23px;
    }
}
@media ( max-width: 767px ) {
    .site_logo_wrapper {
        height: clamp(60px, calc(-1.272vw + 69.772px), 65px);
        padding: 0;
        justify-content: center;
    }
}
@media ( max-width: 375px ) {
    .site_logo_wrapper {
        height: 65px;
        padding: 0;
        justify-content: center;
    }
    .breadcrumbs {
        padding: 8px 5px;
    }
}


/* ーーーーーーーーーーーーーーーーーーヘッダーーーーーーーーーーーーーーーーーーー */
header nav.no_hamburger ul li {
    border-right: 1px solid #000;
}
header nav.no_hamburger ul a {
    color: black;
}
@media ( max-width: 375px ) {
    header {
        margin-bottom: 10px;
        top: 10px;
    }
    .hamburger_menu_btn {
        margin-top: 10px;
    }
}

/* ーーーーーーーーーーーーーーーーーーパンくずリストーーーーーーーーーーーーーーーーーー */
.breadcrumbs {
    background-color: #4A5457;
    padding: 8px 53px;
    padding: 8px clamp(32px, 4.167vw, 60px);
    line-height: 10px;
}
.breadcrumbs ul {
    display: flex;
}
.breadcrumbs ul li {
    padding-left: 8px;
    color: white;
}
.breadcrumbs ul li a {
    color: white;
    font-size: 10px;
}


/* ーーーーーーーーーーーーーーーーーーファーストヴュー画像ーーーーーーーーーーーーーーーーーー */
.first_view_img {
    height: 449px;
    background-image: url( ../img/projects_TOP.jpg );
    display: flex;
    justify-content: center;
    align-items: center;

    height: clamp(226px, 33.185vw - 28.857px, 449px);
}
.first_view_img h1 {
    position: relative;
    top: 19px;
}
.design_text {
    margin-bottom: 35px;
    display: flex;
    gap: 3px;
}
@media ( max-width: 768px ) {
    .first_view_img {
        height: 226px;
    }
}
@media ( max-width: 767px ) {
    .first_view_img {
        height: clamp(158px, calc(17.303vw + 93.114px), 226px);
    }
}
@media ( max-width: 375px ) {
    .first_view_img {
        height: 158px;
    }
}


/* ーーーーーーーーーーーーーーーーーーファーストヴュー_テキストーーーーーーーーーーーーーーーーーー */
.design_text {
    margin-bottom: 35px;
    gap: 3px;

    margin-bottom: clamp(15px, 2.976vw - 7.857px, 35px);
    gap: clamp(1px, 0.298vw - 1.286px, 3px);
}
.emphasis_design22 span {
    font-size: 41px;
    width: 1.3em;
    min-width: 1.3em;
    height: 1.3em;
    line-height: 1.2em;

    font-size: clamp(23px, 2.679vw + 2.429px, 41px);
}
.sekou_zirei {
    text-align: center;
    color: white;
    font-size: 28px;

    font-size: clamp(18px, 1.488vw + 6.571px, 28px);
}
.first_view_img h1 {
    /* top: 5px (@768px) -> 19px (@1440px) */
    top: clamp(5px, 2.083vw - 11px, 19px);
}

@media ( max-width: 768px ) {
    .emphasis_design22 span {
        font-size: 23px;
    }
    .design_text {
        margin-bottom: 15px;
        gap: 1px;
    }
    .sekou_zirei {
        font-size: 18px;
    }
    .first_view_img h1 {
        top: 5px;
    }
}
@media ( max-width: 767px ) {
    .design_text {
        margin-bottom: clamp(11px, calc(1.018vw + 7.182px), 15px);
    }
    .emphasis_design22 span {
        font-size: clamp(21px, calc(0.509vw + 19.09px), 23px);
    }
    .sekou_zirei {
        font-size: clamp(15px, calc(0.763vw + 12.14px), 18px);
    }
    .first_view_img h1 {
        top: clamp(4px, calc(0.254vw + 3.05px), 5px);
    }
    .site_logo_wrapper {
        height: 65px;
        padding: 0;
        justify-content: center;
    }
}
@media ( max-width: 375px ) {
    .site_logo_wrapper {
        height: 65px;
        padding: 0;
        justify-content: center;
    }
    .breadcrumbs {
        padding: 8px 5px;
    }
    .first_view_img {
        height: 158px;
    }
    .emphasis_design22 span {
        font-size: 21px;
    }
    .first_view_img h1 {
        top: 4px;
    }
    .sekou_zirei {
        font-size: 15px;
    }
    .design_text {
        margin-bottom: 11px;
    }
}
/* ーーーーーーーーーーーーーーーーーーヘッダーーーーーーーーーーーーーーーーーーー */
header {
    /* padding-bottom: 147px; */
    padding-top: 18px;
}
.hamburger_menu_btn {
    margin-top: 0;
}
@media ( max-width: 768px ) {
    header {
        /* padding: 0;
        height: 62px; */
    }
}
@media ( max-width: 375px ) {
    header {
        height: 50px;
    }
}

/* ーーーーーーーーーーーーーーーーーー施工事例＿アフターイメージーーーーーーーーーーーーーーーーーー */
.construction_list {
    margin-bottom: 42px;
}
.construction_list h2 {
    text-align: center;
    padding: 13px;
    font-size: 30px;
    background-color: #1E2223;
    color: white;
    margin-bottom: 116px;

    font-size: clamp(18px, calc(2.77778vw - 3.33333px), 30px);
    margin-bottom: clamp(60px, calc(12.96296vw - 39.55556px), 116px);
    padding: clamp(10px, calc(0.69444vw + 4.66667px), 13px);
}
.wrapper {
    max-width: 1200px;
    padding: 0 30px;
    
    padding: 0 clamp(30px, -7.87vw + 124.444px, 64px);
}
.construction_list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.construction_list ul li {
    width: 28.6%;
    margin-bottom: 112px;

    margin-bottom: clamp(50px, 14.35185vw - 60.2222px, 112px);
}
.construction_list ul li h3 {
    background-color: #fff;
    padding: 10px 0;
    text-align: center;
    margin-bottom: 27px;
    font-size: clamp(14px, 1.583vw, 19px);

    font-size: clamp(14px, 1.157vw + 5.111px, 19px);
}
.construction_list ul li img {
    max-height: 326px;
    height: 326px;
    height: 27.166vw;

    height: clamp(298px, 6.481vw + 248.222px, 326px);
}
@media ( max-width: 1200px ) {
    .construction_list ul li {
        width: 46.4%;
    }
    .construction_list ul li img {
        max-height: unset;
        height: 43.612vw;
    }
}
@media ( max-width: 999px ) {
    
}

@media ( max-width: 768px ) {
    .construction_list h2 {
        font-size: 18px;
        padding: 10px;
        line-height: 1;
        margin-bottom: 60px;
    }
    .wrapper {
        padding: 0 64px;
    }
    .construction_list ul li {
        width: 46.4%;
    }
    .construction_list ul li {
        margin-bottom: 50px;
    }
}
@media ( max-width: 767px ) {
    .construction_list h2 {
        font-size: clamp(16px, calc(0.509vw + 14.092px), 18px);
    }
    .wrapper {
        
        padding-left: clamp(34px, calc(7.634vw + 5.375px), 64px);
        padding-right: clamp(34px, calc(7.634vw + 5.375px), 64px);
    }
    .construction_list ul li h3 {
        padding: clamp(6px, calc(1.018vw + 2.183px), 10px) 0;
        margin-bottom: clamp(22px, calc(1.272vw + 17.23px), 27px);
    }
    .construction_list ul li {
        margin-bottom: clamp(50px, calc(-3.816vw + 79.3px), 65px);
        width: 100%;
    }
}
@media ( max-width: 375px ) {
    .construction_list h2 {
        font-size: 16px;
    }
    .wrapper {
        padding: 0 34px;
    }
    .construction_list ul li h3 {
        font-size: 14px;
        padding: 6px 0;
        margin-bottom: 22px;
    }
    .construction_list ul li {
        margin-bottom: 65px;
    }
}

/* ーーーーーーーーーーーーーーーーーー下部のリンクーーーーーーーーーーーーーーーーーー */
.to_home_link {
    max-width: 647px;
    margin: 0 auto;
    /* padding: 0 40px; */
    color: white;
    text-align: center;
    margin-bottom: 160px;

    max-width: clamp(444px, 30.2083vw + 212px, 647px);
}
.to_home_link a {
    display: block;
    font-size: 24px;
    padding: 20px 10px;
    background-color: #0A2140;

    font-size: clamp(16.67px, 1.0908vw + 8.293px, 24px);
    padding: clamp(11px, 1.3393vw + 0.7143px, 20px) 10px;
}


@media ( max-width: 768px ) {
    .to_home_link {
        max-width: 444px;
    }
    .to_home_link a {
        font-size: 16.67px;
        padding: 11px 10px;
    }
    .construction_list {
        margin-bottom: 0;
    }
}
@media ( max-width: 767px ) {
    .to_home_link a {
        font-size: clamp(15px, calc(0.4249vw + 13.407px), 16.67px);
    }
}

@media ( max-width: 570px ) {
    .construction_list ul li {
        width: 100%;
    }
}

@media ( max-width: 375px ) {
    .to_home_link a {
        font-size: 15px;
    }
}