@charset "utf-8";

/* ===============================================
# キービジュアル
=============================================== */
.keyvisual {
    position: relative;
    width: 100%;
    height: 366rem;
    background: url(/treecycle/value/oneclicklca/embodied_carbon/img/kv.jpg) no-repeat center / cover;
}
@media screen and (max-width: 768px) {
    .keyvisual {
        height: calc(240rem * var(--sp-root));
        background: url(/treecycle/value/oneclicklca/sp/embodied_carbon/img/kv.jpg) no-repeat center / cover;
    }
}
.keyvisual__contents {
    position: absolute;
    top: 50%;
    left: 120rem;
    right: 120rem;
    transform: translateY(-50%);
    color: var(--wh);
}
@media screen and (max-width: 768px) {
    .keyvisual__contents {
        width: calc(100% - 40rem * var(--sp-root));
        top: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%,-50%);
        text-align: center;
    }
}
.keyvisual__name {
    font-size: max(12px, 24rem);
    font-weight: 900;
    line-height: calc(30/24);
    margin-bottom: 11rem;
    text-shadow: 0 0 14px rgba(34,139,11,0.7);
}
@media screen and (max-width: 768px) {
    .keyvisual__name {
        font-size: max(12px, calc(15rem * var(--sp-root)));
        line-height: calc(30/15);
        margin-bottom: calc(4rem * var(--sp-root));
    }
}
.keyvisual__copy {
    font-size: max(12px, 44rem);
    font-weight: 900;
    line-height: calc(56/44);
    margin-bottom: 16rem;
    text-shadow: 0 0 24px rgba(34,139,11,0.7);
}
@media screen and (max-width: 768px) {
    .keyvisual__copy {
        font-size: max(12px, calc(22rem * var(--sp-root)));
        line-height: calc(36/26);
        margin-bottom: calc(12rem * var(--sp-root));
    }
}
.keyvisual__subCopy {
    font-size: max(10px, 18rem);
    font-weight: 500;
    line-height: calc(30/18);
    text-shadow: 0 0 14px rgba(34,139,11,0.7);
}
@media screen and (max-width: 768px) {
    .keyvisual__subCopy {
        font-size: max(10px,calc(13rem * var(--sp-root)));
        line-height: calc(22/13);
    }
}

/* ===============================================
# リンクボタン
=============================================== */
.link {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
@media screen and (max-width: 768px) {
    .link {
        flex-direction: column;
        border-top: none;
    }
}
.link__item {
    position: relative;
    width: 600rem;
    height: 64rem;
}
@media screen and (max-width: 768px) {
    .link__item {
        width: calc(335rem * var(--sp-root));
        height: auto;
        padding: calc(14rem * var(--sp-root)) 0;
    }
}
.link__item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 28rem;
    background: var(--border);

}
@media screen and (max-width: 768px) {
    .link__item::before {
        top: auto;
        bottom: 0;
        transform: translateY(0);
        width: 100%;
        height: 1px;
    }
    .link__item:last-child::before {
        display: none;
    }
}
.link__item:last-child:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 28rem;
    background: var(--border);
}
.link__button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: max(12px, 14rem);
    font-weight: 700;
    line-height: calc(20/14);
}
@media screen and (max-width: 768px) {
    .link__button {
        justify-content: flex-start;
        font-size: max(12px, calc(14rem * var(--sp-root)));
    }
}
.link__button::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 20rem;
    transform: translateY(-50%);
    width: 15rem;
    height: 14rem;
    background: url(/treecycle/value/oneclicklca/common/img/icn_arrow_gr.png) no-repeat center / contain;
}
@media screen and (max-width: 768px) {
    .link__button::after {
        right: 0;
        width: calc(17rem * var(--sp-root));
        height: calc(16rem * var(--sp-root));
    }
}
.link__item.active .link__button::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 561rem;
    height: 2px;
    background: var(--main);
    margin-inline: auto;
}
@media screen and (max-width: 768px) {
    .link__item.active .link__button::before {
        display: none;
    }
}
.link__item.active .link__button {
    color: var(--main);
}


/* ===============================================
# サステナブルな建築?建設に対する洞察
=============================================== */
.insights__row {
    position: relative;
    z-index: 0;
}
.insights__row:not(:first-child) {
    margin-top: 120rem;
}
@media screen and (max-width: 768px) {
    .insights__row:not(:first-child) {
        margin-top: calc(48rem * var(--sp-root));
    }
}
.insights__row::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 1102rem;
    height: 100%;
    background: #E9FFEA;
    border-radius: 32rem 0 0 32rem;
    z-index: -1;
}
@media screen and (max-width: 768px) {
    .insights__row::before {
        width: 100%;
        height: 88.77%;
        border-radius: 0;
    }
}
.insights__row.reverse::before {
    right: auto;
    left: 0;
    border-radius: 0 32rem 32rem 0;
}
@media screen and (max-width: 768px) {
    .insights__row.reverse::before {
        border-radius: 0;
    }
}
.insights__inner {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1200rem;
    margin-inline: auto;
    padding-block: 72rem;
}
@media screen and (max-width: 768px) {
    .insights__inner {
        flex-direction: column;
        padding: calc(32rem * var(--sp-root)) calc(30rem * var(--sp-root)) 0;
    }
}
.insights__row.reverse .insights__inner {
    flex-direction: row-reverse;
}
@media screen and (max-width: 768px) {
    .insights__row.reverse .insights__inner {
        flex-direction: column;
    }
}
.insights__image {
    flex-shrink: 0;
    width: 436rem;
    margin-right: 64rem;
}
@media screen and (max-width: 768px) {
    .insights__image {
        order: 2;
        width: calc(248rem * var(--sp-root));
        margin-top: calc(48rem * var(--sp-root));
        margin-inline: auto;
    }    
}
.insights__row.reverse .insights__image {
    margin-right: 0;
    margin-left: 64rem;
}
.insights__image img {
    border-radius: 28rem;
    box-shadow: var(--shadow);
}
.insights__enTitle {
    color: var(--copy-text);
    font-family: var(--mont);
    font-size: max(12px, 64rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
}
@media screen and (max-width: 768px) {
    .insights__enTitle {
        font-size: max(12px, calc(28rem * var(--sp-root)));
    }
}
.insights__title {
    position: relative;
    font-size: max(12px, 32rem);
    font-weight: 900;
    line-height: calc(46/32);
    margin-top: -36rem;
    z-index: 1;
}
@media screen and (max-width: 768px) {
    .insights__title {
        font-size: max(12px, calc(20rem * var(--sp-root)));
        line-height: calc(28/20);
        margin-top: 0;
    }
}
.insights__texts {
    margin-block: 40rem;
}
@media screen and (max-width: 768px) {
    .insights__texts {
        margin-block: calc(20rem * var(--sp-root));
    }
}
.insights__texts p:not(:first-child) {
    margin-top: 32rem;
}
@media screen and (max-width: 768px) {
    .insights__texts p:not(:first-child) {
        margin-top: calc(16rem * var(--sp-root));
    }
}
.insights__buttonWrap {
    margin-top: 40rem;
}
@media screen and (max-width: 768px) {
    .insights__buttonWrap {
        margin-top: calc(20rem * var(--sp-root));
    }
}
.insights__buttonWrap .common__button {
    max-width: 340rem;
}
@media screen and (max-width: 768px) {
    .insights__buttonWrap .common__button {
        max-width: 100%;
        height: calc(56rem * var(--sp-root));
        font-size: max(12px, calc(14rem * var(--sp-root)));
    }
}
@media screen and (max-width: 768px) {
    .insights .related {
        flex-direction: column;
    }
}



/* ===============================================
# 脱炭素設計のためのコミュニケーションツール
=============================================== */
.tool {
    padding-top: 172rem;
    background: var(--bg);
}
@media screen and (max-width: 768px) {
    .tool {
        padding-top: calc(117rem * var(--sp-root));
    }
}
.tool__inner {
    position: relative;
    width: 100%;
    max-width: 1024rem;
    min-width: 700px;
    margin-inline: auto;
    text-align: center;
}
@media screen and (max-width: 768px) {
    .tool__inner {
        min-width: auto;
        padding-inline: calc(30rem * var(--sp-root));
    }
}
.tool__tag {
    position: absolute;
    top: -52rem;
    left: 50%;
    transform: translateX(-50%);
    display: inline-block;
    width: 440rem;
    min-width: 300px;
    padding: 10rem 16rem;
    font-size: max(10px, 15rem);
    font-weight: 700;
    line-height: 1;
    color: var(--green);
    border: 1px solid var(--green);
    border-radius: 99rem;
    text-align: center;
    z-index: 2;
}
@media screen and (max-width: 768px) {
    .tool__tag {
        width: calc(320rem * var(--sp-root));
        top: calc(-30rem * var(--sp-root));
        padding: calc(5rem * var(--sp-root)) calc(12rem * var(--sp-root));
        font-size: max(10px, calc(11rem * var(--sp-root)));
    }
}
.tool__title::before {
    top: -110rem;
}
@media screen and (max-width: 768px) {
    .tool__title::before {
        top: calc(-65rem * var(--sp-root));
    }
}
.tool__image {
    width: 858rem;
    margin-top: 64rem;
    margin-bottom: 48rem;
}
@media screen and (max-width: 768px) {
    .tool__image {
        width: 100%;
        margin-top: calc(32rem * var(--sp-root));
        margin-bottom: calc(24rem * var(--sp-root));
    }
}
.tool__text {
    text-align: center;
}
@media screen and (max-width: 768px) {
    .tool__text {
        text-align: left;
    }
}


/* ===============================================
# CO2排出量を見える化して?環境性能を追求?PRしよう
=============================================== */
.pr {
    padding-top: 120rem;
    padding-bottom: 135rem;
    background: url(/treecycle/value/oneclicklca/common/img/pic_pr.jpg) no-repeat center / cover;
}
@media screen and (max-width: 768px) {
    .pr {
        padding-top: calc(48rem * var(--sp-root));
        padding-bottom: calc(48rem * var(--sp-root));
        background: url(/treecycle/value/oneclicklca/sp/common/img/pic_pr.jpg) no-repeat center / cover;
    }
}
.pr__inner {
    width: 100%;
    max-width: 1024rem;
    min-width: 700px;
    margin-inline: auto;
}
@media screen and (max-width: 768px) {
    .pr__inner {
        min-width: auto;
        padding-inline: calc(30rem * var(--sp-root));
    }
}
.pr__title {
    color: var(--wh);
}
.pr__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 64rem;
    margin-top: 66rem;
}
@media screen and (max-width: 768px) {
    .pr__list {
        grid-template-columns: repeat(1, 1fr);
        gap: calc(32rem * var(--sp-root));
        margin-top: calc(32rem * var(--sp-root));
    }
}
.pr__list .list__item {
    padding: 30rem 65rem 48rem;
    background: var(--wh);
    border-radius: 18rem;
    box-shadow: var(--shadow);
    text-align: center;
}
@media screen and (max-width: 768px) {
    .pr__list .list__item {
        padding: calc(24rem * var(--sp-root));
        border-radius: calc(18rem * var(--sp-root));
    }
}
.pr__list .list__title {
    font-size: max(12px, 24rem);
    font-weight: 900;
    line-height: calc(48/24);
    margin-bottom: 16rem;
}
@media screen and (max-width: 768px) {
    .pr__list .list__title {
        font-size: max(12px, calc(20rem * var(--sp-root)));
        line-height: 1.5;
        margin-bottom: calc(13rem * var(--sp-root));
    }
}
.pr__list .gr {
    display: block;
    font-size: max(12px, 13rem);
    font-weight: 700;
    color: var(--green);
}
@media screen and (max-width: 768px) {
    .pr__list .gr {
        font-size: max(10px, calc(10rem * var(--sp-root)));
    }
}
.pr__list .list__image {
    margin-bottom: 16rem;
}
@media screen and (max-width: 768px) {
    .pr__list .list__image {
        margin-bottom: calc(16rem * var(--sp-root));
    }
}
.pr__buttonWrap .common__button {
    max-width: 100%;
    min-height: 40px;
}
@media screen and (max-width: 768px) {
    .pr__buttonWrap .common__button {
        height: calc(56rem * var(--sp-root));
        margin-top: calc(16rem * var(--sp-root));
        font-size: max(12px, calc(14rem * var(--sp-root)));
        line-height: calc(18/14);
    }
}



/* ===============================================
# One Click LCA 関連製品の導入メリット
=============================================== */
.merit__inner {
    position: relative;
    width: 100%;
    max-width: 1200rem;
    min-width: 700px;
    margin-inline: auto;
}
@media screen and (max-width: 768px) {
    .merit__inner {
        min-width: auto;
        padding-inline: calc(30rem * var(--sp-root));
    }
}
.merit__list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 72rem;
    margin-top: 64rem;
    counter-reset: number 0;
}
@media screen and (max-width: 768px) {
    .merit__list {
        grid-template-columns: repeat(1, 1fr);
        gap: calc(32rem * var(--sp-root));
        margin-top: calc(32rem * var(--sp-root));
    }
}
.merit__list .list__image {
    margin-bottom: 18rem;
}
@media screen and (max-width: 768px) {
    .merit__list .list__image {
        margin-bottom: calc(14rem * var(--sp-root));
    }
}
.merit__list .list__title {
    position: relative;
    font-size: max(12px, 18rem);
    font-weight: 700;
    line-height: calc(26/18);
    color: var(--green);
    margin-bottom: 8rem;
    z-index: 0;
}
@media screen and (max-width: 768px) {
    .merit__list .list__title {
        font-size: max(12px, calc(16rem * var(--sp-root)));
        line-height: calc(26/16);
    }
}
.merit__list .list__title::before {
    counter-increment: number 1;
    content: counter(number,decimal-leading-zero);
    position: absolute;
    top: -25rem;
    right: 0;
    font-family: var(--mont);
    font-size: max(12px, 65rem);
    font-weight: 800;
    line-height: 1;
    color: var(--copy-text2);
    z-index: -1;
}
@media screen and (max-width: 768px) {
    .merit__list .list__title::before {
        top: calc(-20rem * var(--sp-root));
        font-size: max(12px, calc(56rem * var(--sp-root)));
    }
}
.merit__list .list__text {
    margin-bottom: 18rem;
    font-size: max(12px, 14rem);
    line-height: calc(24/14);
}
@media screen and (max-width: 768px) {
    .merit__list .list__text {
        font-size: max(12px, calc(13rem * var(--sp-root)));
        line-height: calc(20/13);
        margin-bottom: calc(14rem * var(--sp-root));
    }
}