@charset "utf-8";

/* ==========================================================================
   CLT Environmental Page
   Strictly isolated using .p-environmental__ prefix and #clt-environmental-page
   ========================================================================== */

#clt-environmental-page {
    font-family: 'Noto Sans JP', sans-serif;
    background-color: #000;
    color: #F0F0F0;
    padding-bottom: 80px;
    line-height: 1.8;
}

/* ==========================================================================
   Resets to block style.css bleeding
   ========================================================================== */
#clt-environmental-page h2,
#clt-environmental-page h3,
#clt-environmental-page h4,
#clt-environmental-page h5,
#clt-environmental-page h6,
#clt-environmental-page p {
    margin: 0 !important;
    padding: 0 !important;
    font-weight: normal;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    clear: none !important;
    line-height: 1.8;
}

.p-environmental__live-content h2 {
    text-align: left !important;
}

#clt-environmental-page h2::before,
#clt-environmental-page h2::after,
#clt-environmental-page h3::before,
#clt-environmental-page h3::after,
#clt-environmental-page h4::before,
#clt-environmental-page h4::after {
    display: none !important;
    content: none !important;
}

#clt-environmental-page ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#clt-environmental-page img {
    width: 100%;
    height: auto;
    display: block;
}

/* Local Nav */
#clt-environmental-page .clt-local-nav {
    margin: 0;
    padding: 20px 0;
}

#clt-environmental-page .clt-local-nav a {
    color: #fff;
    text-decoration: none;
    transition: all 0.2s linear;
}

#clt-environmental-page .clt-local-nav li.current a,
#clt-environmental-page .clt-local-nav a:hover {
    color: #000;
    background: #fff;
}

.p-environmental__inner {
    width: 90%;
    max-width: 1180px;
    margin: 0 auto;
}

.p-environmental__pc-br {
    display: inline;
}

.p-environmental__sp-br {
    display: none;
}

.p-environmental__text--lg {
    font-size: 1.25em;
}

.p-environmental__text--xl {
    font-size: 1.6em;
    font-weight: bold;
    text-align: left !important;
}

.p-environmental__text--bold {
    font-weight: bold;
}

/* ==========================================================================
   Section 001: Main Visual
   ========================================================================== */
.p-environmental__mv {
    position: relative;
    width: 100%;
    margin-top: 0;
    margin-bottom: 80px;
}

.p-environmental__mv-inner {
    position: relative;
    width: 100%;
}

.p-environmental__mv-bg {
    width: 100%;
    height: auto;
    display: block;
}

.p-environmental__mv-catch {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30%;
    z-index: 2;
}

/* ==========================================================================
   Section 009: CLT Hybrid Home
   ========================================================================== */
.p-environmental__section-cycle {
    padding: 100px 0;
    background: #000;
}

.p-environmental__block {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 100px;
}

.p-environmental__block--reverse {
    flex-direction: row-reverse;
}

.p-environmental__txt-box {
    width: 48%;
}

.p-environmental__img-box {
    width: 48%;
}

.p-environmental__h2-title {
    font-size: 24px !important;
    line-height: 1.6;
    margin-bottom: 30px !important;
}

.p-environmental__h2-title span {
    display: block;
}

.p-environmental__h2-title .title-lg {
    font-size: 1.4em;
    font-weight: bold;
}

.p-environmental__p {
    font-size: 18px !important;
    color: #ccc;
    line-height: 2.2 !important;
    text-align: justify;
}

.p-environmental__notice {
    font-size: 14px;
    color: #999;
    display: block;
    margin-top: 15px;
    line-height: 1.6;
}

.p-environmental__h3-title {
    font-size: 24px !important;
    line-height: 1.6;
    margin-bottom: 30px !important;
}

.p-environmental__link-btn {
    display: inline-block;
    border: 1px solid #fff;
    padding: 15px 50px;
    color: #fff;
    text-decoration: none;
    margin-top: 30px;
    transition: 0.3s;
}

.p-environmental__link-btn:hover {
    background: #fff;
    color: #000;
}

/* ==========================================================================
   Section 008: Forest Wall
   ========================================================================== */
.p-environmental__section-forest {
    position: relative;
    padding-bottom: 100px;
}

.p-environmental__forest-bg {
    position: relative;
}

.p-environmental__forest-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
}

.p-environmental__forest-title h2 {
    font-size: 38px !important;
    color: #fff;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

.p-environmental__forest-title span {
    display: block;
}

.p-environmental__forest-content {
    margin-top: 60px;
}

.p-environmental__forest-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 80px;
}

.p-environmental__forest-detail .p-environmental__txt-box {
    width: 45%;
}

.p-environmental__forest-detail .p-environmental__img-box {
    width: 50%;
}

.p-environmental__forest-graphs {
    display: flex;
    justify-content: space-between;
}

.p-environmental__forest-graphs li {
    width: 48%;
}

/* ==========================================================================
   Section 002: Live with Woods
   ========================================================================== */
.p-environmental__section-live {
    position: relative;
    margin-bottom: 100px;
}

.p-environmental__live-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 10%;
    width: 40%;
}

.p-environmental__live-content h2 {
    font-size: 32px !important;
    margin-bottom: 30px !important;
    line-height: 1.6;
}

.p-environmental__live-content p {
    font-size: 18px !important;
    line-height: 2.2 !important;
}

/* ==========================================================================
   Section 003~007: 4 Effects List
   ========================================================================== */
.p-environmental__section-effects {
    padding-bottom: 100px;
}

.p-environmental__effects-title {
    text-align: center;
    font-size: 38px !important;
    margin-bottom: 80px !important;
}

.p-environmental__effect-list li {
    position: relative;
    margin-bottom: 150px;
}

.p-environmental__effect-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    padding: 60px 40px;
    border-radius: 10px;
    position: relative;
    z-index: 1;
}

.p-environmental__effect-list li.reverse .p-environmental__effect-box {
    flex-direction: row-reverse;
}

.p-environmental__effect-num {
    position: absolute;
    top: -50px;
    width: 200px;
    z-index: 0;
}

.p-environmental__effect-list li:not(.reverse) .p-environmental__effect-num {
    left: -20px;
}

.p-environmental__effect-list li.reverse .p-environmental__effect-num {
    right: -20px;
}

.p-environmental__effect-img {
    width: 50%;
    max-width: 640px;
    z-index: 1;
    position: relative;
}

.p-environmental__effect-txt {
    width: 45%;
    z-index: 2;
    position: relative;
}

.p-environmental__effect-txt h3 {
    font-size: 32px !important;
    font-weight: bold !important;
    margin-bottom: 10px !important;
    border-bottom: 1px solid #C14E45;
    padding-bottom: 10px !important;
    color: #1e1f21 !important;
}

.p-environmental__subtext {
    font-size: 20px !important;
    margin-bottom: 20px !important;
    margin-top: 20px !important;
    color: #1e1f21 !important;
}

.p-environmental__effect-desc {
    font-size: 18px !important;
    color: #333;
    text-align: justify;
}

/* ==========================================================================
   Responsive SP Styles
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .p-environmental__block {
        flex-direction: column;
    }

    .p-environmental__block--reverse {
        flex-direction: column;
    }

    .p-environmental__txt-box,
    .p-environmental__img-box,
    .p-environmental__forest-detail .p-environmental__txt-box,
    .p-environmental__forest-detail .p-environmental__img-box {
        width: 100%;
        margin-bottom: 40px;
    }

    .p-environmental__live-content {
        position: static;
        width: 100%;
        transform: none;
        padding: 40px 20px;
        background: #111;
    }

    .p-environmental__effect-box,
    .p-environmental__effect-list li.reverse .p-environmental__effect-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 20px;
    }

    .p-environmental__effect-img,
    .p-environmental__effect-txt {
        width: 100%;
    }

    .p-environmental__effect-img {
        margin-bottom: 30px;
        order: 1;
    }

    .p-environmental__effect-txt {
        order: 2;
    }
}

@media screen and (max-width: 767px) {
    .p-environmental__pc-br {
        display: none;
    }

    .p-environmental__sp-br {
        display: inline;
    }

    .p-environmental__mv-catch {
        width: 80%;
        max-width: 350px;
    }

    .p-environmental__forest-title h2 {
        font-size: 26px !important;
    }

    .p-environmental__forest-graphs {
        flex-direction: column;
    }

    .p-environmental__forest-graphs li {
        width: 100%;
        margin-bottom: 30px;
    }

    .p-environmental__effects-title {
        font-size: 26px !important;
    }

    .p-environmental__effect-num {
        width: 120px;
        top: -30px;
    }

    .p-environmental__effect-txt h3 {
        font-size: 24px !important;
    }

    .p-environmental__subtext {
        font-size: 18px !important;
    }

    .p-environmental__effect-desc,
    .p-environmental__p {
        font-size: 16px !important;
    }

    .p-environmental__h2-title .title-lg {
        font-size: 1.4em;
    }
}