@charset "utf-8";

/* ===============================================
# 平奈申斥亙失伙
=============================================== */
.keyvisual {
    position: relative;
    width: 100%;
    height: 366rem;
    background: url(/treecycle/value/oneclicklca/glossary/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);
}


/* ===============================================
# 珨笊井日今互允
=============================================== */
.index {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 16rem;
    border-bottom: 1px solid var(--border);
}
@media screen and (max-width: 768px) {
    .index {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: calc(20rem * var(--sp-root));
    }
}
.index__en {
    font-family: var(--mont);
    font-size: max(12px, 22rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
}
@media screen and (max-width: 768px) {
    .index__en {
        font-size: max(12px, calc(16rem * var(--sp-root)));
    }
}
.index__ja {
    font-size: max(12px, 14rem);
    font-weight: 700;
    line-height: calc(20/14);
    margin-left: 32rem;
    margin-right: 16rem;
}
@media screen and (max-width: 768px) {
    .index__ja {
        font-size: max(10px, calc(12rem * var(--sp-root)));
        line-height: calc(17/12);
        margin: calc(8rem * var(--sp-root)) 0 calc(4rem * var(--sp-root));
    }
}
.index__select {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 420rem;
    min-width: 320px;
    height: 41rem;
    padding: 5rem 14rem;
    border-radius: 8rem;
    border: 1px solid #D5D5D5;
    cursor: pointer;
}
@media screen and (max-width: 768px) {
    .index__select {
        width: 100%;
        min-width: auto;
        height: calc(41rem * var(--sp-root));
        padding: calc(5rem * var(--sp-root)) calc(14rem * var(--sp-root));
        border-radius: calc(8rem * var(--sp-root));
    }
}
.index__select.active {
    border-bottom: none;
    border-radius: 8rem 8rem 0 0;
    box-shadow: 0 0 12px rgba(1,155,99,0.16);
}
@media screen and (max-width: 768px) {
    .index__select.active {
        border-radius: calc(8rem * var(--sp-root)) calc(8rem * var(--sp-root)) 0 0;
    }
}
.index__message {
    color: #B7B7B7;
    font-size: max(12px, 14rem);
    line-height: calc(20/14);
}
@media screen and (max-width: 768px) {
    .index__message {
        font-size: max(12px, calc(13rem * var(--sp-root)));
        line-height: calc(19/13);
    }
}
.index__select.active .index__message {
    color: var(--main);
}
.index__arrow {
    width: 15rem;
    transform: rotate(90deg);
    pointer-events: none;
}
@media screen and (max-width: 768px) {
    .index__arrow {
        width: calc(15rem * var(--sp-root));
    }
}
.index__select.active .index__arrow {
    transform: rotate(-90deg);
}
.index__list {
    position: absolute;
    top: 40rem;
    left: 0;
    right: 0;
    display: none;
    justify-content: space-between;
    padding: 14rem 14rem 20rem;
    background: var(--wh);
    border: 1px solid #D5D5D5;
    border-radius: 0 0 8rem 8rem;
}
@media screen and (max-width: 768px) {
    .index__list {
        top: calc(40rem * var(--sp-root));
        padding: calc(16rem * var(--sp-root)) calc(13rem * var(--sp-root));
        border-radius: 0 0 calc(8rem * var(--sp-root)) calc(8rem * var(--sp-root));
    }
}
.index__list.active {
    display: flex;
}
.index__listRow {
    width: 190rem;
    min-width: 150px;
}
@media screen and (max-width: 768px) {
    .index__listRow {
        width: calc(148rem * var(--sp-root));
        min-width: auto;
    }
}
.index__link {
    width: 100%;
    font-size: max(12px, 14rem);
    font-weight: 700;
    line-height: calc(20/14);
}
@media screen and (max-width: 768px) {
    .index__link {
        font-size: max(12px, calc(13rem * var(--sp-root)));
        line-height: calc(19/13);
    }
}
.index__link {
    margin-top: 8rem;
}
@media screen and (max-width: 768px) {
    .index__link {
        margin-top: calc(8rem * var(--sp-root));
    }
}
.index__listRow li:first-child .index__link {
    margin-top: 0 !important;
}


/* ===============================================
# 蚚惤摩
=============================================== */
.glossary {
    padding-top: 56rem;
    background: var(--bg);
}
@media screen and (max-width: 768px) {
    .glossary {
        padding-top: calc(48rem * var(--sp-root));
    }
}
.glossary__inner {
    width: 100%;
    max-width: 1024rem;
    min-width: 700px;
    margin-inline: auto;
}
@media screen and (max-width: 768px) {
    .glossary__inner {
        min-width: auto;
        padding-inline: calc(30rem * var(--sp-root));
    }
}
.glossary__box {
    display: flex;
    justify-content: space-between;
    padding: 56rem;
    background: var(--wh);
    box-shadow: var(--shadow);
    border-radius: 18rem;
}
@media screen and (max-width: 768px) {
    .glossary__box {
        flex-direction: column;
        padding: calc(20rem * var(--sp-root));
        border-radius: calc(18rem * var(--sp-root));
    }
}
.glossary__box:not(:first-child) {
    margin-top: 56rem;
}
@media screen and (max-width: 768px) {
    .glossary__box:not(:first-child) {
        margin-top: calc(32rem * var(--sp-root));
    }
}
.glossary__word {
    font-family: var(--mont);
    font-size: max(12px, 32rem);
    font-weight: 800;
    line-height: calc(48/32);
    color: var(--main);
}
@media screen and (max-width: 768px) {
    .glossary__word {
        font-size: max(12px, calc(20rem * var(--sp-root)));
    }
}
.glossary__word.ja {
    font-family: var(--sans);
    font-size: max(12px, 24rem);
    font-weight: 900;
    line-height: calc(28/24);
}
@media screen and (max-width: 768px) {
    .glossary__word.ja {
        font-size: max(12px, calc(20rem * var(--sp-root)));
    }
}
.glossary__en {
    margin-top: 8rem;
    font-size: max(12px, 15rem);
    color: var(--main);
}
@media screen and (max-width: 768px) {
    .glossary__en {
        margin-top: calc(2rem * var(--sp-root));
        font-size: max(12px, calc(13rem * var(--sp-root)));
    }
}
.glossary__detail {
    width: 640rem;
    min-width: 444px;
    font-size: max(12px, 15rem);
    line-height: calc(32/15);
}
@media screen and (max-width: 768px) {
    .glossary__detail {
        width: 100%;
        min-width: auto;
        font-size: max(12px, calc(13rem * var(--sp-root)));
        line-height: calc(24/13);
        margin-top: calc(16rem * var(--sp-root));
    }
}
.glossary .related {
    align-items: center;
    margin-top: 24rem;
}
@media screen and (max-width: 768px) {
    .glossary .related {
        flex-direction: column;
        align-items: flex-start;
        margin-top: calc(20rem * var(--sp-root));
    }
}