@charset "utf-8";

/* おおまかにブレイクポイントを決める
SP ~ 519px
tab 520px ~ 959px
PC 960px~
*/

/* ============
 トップ 
 ============ */
.top {
    margin-bottom: var(--contents-gutter);
}

.top .top_image {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    margin-bottom: var(--section-gutter);
    color: #fff;
}

.top .top_image_inner {
    width: 100%;
    height: 100vh;
    background-image: url("../../img/cases-top.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.top .top_image .top_image_inner .image_area {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: start;
    height: 100%;
}

.top .top_image h1 {
    position: absolute;
    font-size: var(--size-xxl);
    line-height: 1.6;
    margin-left: var(--gutter-base);
    margin-right: var(--gutter-base);
    top: calc(var(--gutter-base)*30);
    letter-spacing: 0.16em;
}

.top .top_lead {
    color: #ffffff;
    font-size: var(--size-lg);
    padding-left: var(--side-gutter);
    padding-right: var(--side-gutter);
    padding-bottom: calc(var(--section-gutter-pc)*1.2);
    text-align: center;
    max-width: 760px;
}

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

    .top .top_lead {
        padding-bottom: calc(var(--section-gutter-pc)*2);
    }

    .top .top_image h1 {
        font-size: var(--size-xxxl);
    }

    /* ========min-width:500px======== */
}


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

    .top .top_image {
        margin-bottom: var(--section-gutter-pc);
    }

    .top .top_image .top_image_inner .image_area {
        padding-top: calc(var(--gutter-base)*4);
        padding-left: calc(var(--gutter-base)*4);
        padding-right: calc(var(--gutter-base)*4);
    }

    .top .top_lead {
        padding-bottom: calc(var(--section-gutter-pc)*2.2);
    }

    /* ========min-width:960px======== */
}


@media screen and (min-width:1240px) {
    .top .top_image .top_image_inner .image_area {
        padding: 0;
    }

    /* ========min-width:1240px======== */
}


/* ============
 施工事例一覧
 ============ */

.cases {
    padding-left: var(--side-gutter);
    padding-right: var(--side-gutter);
}

.cases .cases_inner .case {
    margin-bottom: var(--section-gutter);
}

.cases .cases_inner .target {
    opacity: 0;
    transition: 1.6s;
}

.cases .cases_inner .target.on {
    opacity: 1;
}

.cases .cases_inner .case h3 {
    position: relative;
    padding-bottom: calc(var(--gutter-base)*3);
    margin-bottom: calc(var(--gutter-base)*2.5);
}

.cases .cases_inner .case h3::after {
    content: "";
    width: 88px;
    height: 8px;
    background-color: var(--main-color);
    position: absolute;
    bottom: 0;
    left: 0;
}

.cases .cases_inner .case .place {
    margin-bottom: var(--gutter-base);
}

.cases .cases_inner .case .place .material-symbols-outlined {
    display: inline-block;
    vertical-align: bottom;
    color: var(--accent-color);
}

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

    .cases .cases_inner {
        width: 100%;
        max-width: 1200px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: calc(var(--gutter-base)*3);
    }

    /* ========min-width:920px======== */
}