:root {
  --green-txt: #47845E;
  --green-txt-fontsize:24px;
}
/* .zeh img{
    width: 100%;
} */
.flex-reverse{
    flex-direction: row-reverse;
}
.font-bold{
    font-family: "MFW-KoburinaGoStdN-W6";
}
.diagram-white{
    background: #fff;
    border-radius: 20px;
    padding: clamp(60px,10vw,100px) clamp(80px,8vw,150px);
}
.text-right{
    text-align: end;
}
.figcaption-txt{
    position: absolute;
    bottom: 8px;
    right: 8px;
    font-size: 12px;
    color: #fff;
    z-index: 3;
}
.mv-caption{
    position: absolute;
    bottom: 201px;
    left: 190px;
    font-size: 12px;
    color: #fff;
    z-index: 3;
}
.remarks-wrap{
    margin-top: 100px;
}
.remark-list-ttl{
    font-size: 11px;
    margin-bottom: 12px;
}
.remark-list{
    display: flex;
    flex-direction: column;
    gap: 0px;
    margin: 23px 0;
}
.remark-item{
position: relative;
    padding-left: 20px;
    list-style: none;
}
.remark-item::before{
    content: "※";
    position: absolute;
    font-size: 10px;
    top: 0px;
    left: 0;
    border-radius: 100%;

}
.remark-item{
    font-size: 11px;
}

.remark-list-ol{
    counter-reset: list03 0;
}
.remark-list-ol .remark-item{
    position: relative;
    padding-left: 26px;
    counter-increment: list03;
    list-style: none;
}
.remark-list-ol .remark-item::before{
    position: absolute;
    top: 0;
    left: 0;
    content: "※"counter(list03);
}
.co2-txt{
    scale: .6;
    display: inline-block;
    transform-origin: 26% 70%;
}
@media screen and (max-width: 767px) {
    .figcaption-txt{
        position: absolute;
        bottom: 7px;
        right: 7px;
        font-size: 10px;
    }
    .figcaption-txt.link-caption{
        position: absolute;
        top: 4px;
        right: 5px;
        font-size: 10px;
    }

    .remark-list-ol .remark-item{
        position: relative;
        padding-left: 16px;
    }
    .remark-item{
        position: relative;
        padding-left: 12px;
        list-style: none;
    }
    .mv-caption{
        position: absolute;
        bottom: 30px;
        left: calc(100% - 70px);
        font-size: 10px;
        color: #fff;
        z-index: 3;
    }
    .zeh-mv-cap{
        color: #fff;
    }

}
figure{
    position: relative;
}
.c-cross-image{
    max-width: 1010px;
    margin: 0 auto;
}
.din-font{
    font-family: "din-2014", sans-serif;
}
.c-hero-zeh h1{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: auto;
    z-index: 2;
    text-align: center;
    color: #fff;
    text-shadow:none;
}
.hero-zeh-span{
    font-size: clamp(2.2rem, 1.54rem + 2.0625vw, 5.5rem) !important;
    display: inline !important;
}
@media screen and (max-width: 767px) {
    .diagram-white{
        border-radius: 15px;
        padding: 25px 30px;
    }
}
/* 共通 ---------------------------------*/

/* specification-仕様 */
.c-specification-warp-grid{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: repeat(3,auto);
    gap: 100px 60px;
    margin-top: 100px;
    
}
.c-specification-in-three{
    gap: 40px;
    grid-column: 1/3;
    display: grid;
    flex-wrap: wrap;
    grid-template-columns: repeat(3, 1fr);
    
}
.c-specification-in-three .c-specification-in{
    display: grid;
    grid-template-rows: subgrid; 
    grid-row: span 3; 
    gap: 0px; 
}
.c-specification-in-three .c-specification-in{
    width: 100%;

}
.c-specification-title{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    font-size: clamp(20px,2vw,24px);
}
.c-specification-txt{
    font-size: clamp(14px,1.4vw,17px);
    margin-bottom: 30px;
}
.c-specification-in-greenWrap{
    gap: 5px !important;
}
.c-specification-in-greenWrap .c-supplement-diagram-in{
    width: 45%;
}
.c-specification-in-greenWrap .c-supplement-diagram-plus{
    width: calc(10% - 10px);
}
.c-specification-in-greenWrap .c-supplement-diagram-in{
   font-size: clamp(14px,1.4vw,20px);
   height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.c-specification-in-disWrap{
    margin-top: 30px;
}
.c-specification-in-gastoku{
    width: 51%;
    margin: 0 auto;
}
.c-specification-in-setImage{
    margin-top: -10px;
    position: relative;
    z-index: -1;
}
@media screen and (max-width: 767px) {
    .c-specification-warp-grid{
        display: flex;
        flex-direction: column;
        gap: 36px;
        margin-top: 60px;
        
    }
    .c-specification-txt{
        font-size: 14px;
        margin-bottom: 30px;
    }
    .c-specification-in-ecojoaz{
        width: 90%;
        margin: 0 auto;
    }
    .c-specification-in-ecojoazTxt{
        font-size: 13px;
        margin-top: 16px;
    }
    .c-supplement-diagram-spFlex{
        flex-direction: row !important;
    }
    .c-specification-in-greenWrap .c-supplement-diagram-in{
        font-size: 13px;
        height: 100px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .c-specification-in-setImage{
        margin-top: 16px;
        position: relative;
        z-index: -1;
    }
    .c-specification-in-three{
        gap: 26px;
        grid-column: 1/3;
        display: flex;
        flex-wrap: wrap;
        grid-template-columns: repeat(3, 1fr);
        
    }
    .c-specification-in-three .c-specification-in{
        display: grid;
        grid-template-rows: none; 
        grid-template-columns: repeat(2,1fr);
        grid-template-rows: repeat(2,auto);
        gap: 0px 15px; 
    }
    .c-specification-title{
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 5px;
        margin-bottom: 16px;
        grid-column: 1/2;
        font-size: 17px;
    }
    .c-specification-in-three .c-specification-title{
        font-size: 14px;
    }
    .c-specification-txt{
        font-size: 13px;
        margin-bottom: 0px;
        grid-column: 1/2;
        grid-row: 2/3;
    }
    .c-specification-warp-grid .c-specification-txt{
        margin-bottom: 24px;
    }
    .c-specification-in-three-image{
        grid-column: 2/3;
        grid-row: 1/3;
    }
    .c-specification-in-three-namber{
        font-size: 13px !important;
        width: 20px !important;
        height: 20px !important;
    }
}

.zeh-leadWrap{
    gap: 8.5vw;
}
.intro-lead-txt{
    width: 48%;
}
.intro-lead-image{
    width: calc(100% - 48% - 8.5vw);
}
.c-sub-greenTitle{
    color: var(--green-txt);
    font-size: 24px;
}
.c-zehTitle-text-tile{
    font-size: clamp(35px,4.2vw,42px);
    margin: 24px 0;
}
.intro-lead-title{
    font-size: clamp(26px,3.2vw,32px);
    margin: 35px 0 24px;
}
.intro-lead-image{
    margin-bottom: 105px;
}
@media screen and (max-width: 767px) {
    .zeh-leadWrap{
        flex-direction: column;
        gap: 25px;
    }
    .intro-lead-txt{
        width: 100%;
    }
    .intro-lead-image{
        width: 100%;
    }
    .c-sub-greenTitle{
    font-size: 16px;
    margin-top: 20px;
    }
    .c-zehTitle-text-tile{
        font-size: 22px;
        margin: 20px 0;
    }
    .intro-lead-title{
        font-size: 22px;
        margin: 20px 0 24px;
    }
    .c-supplement-subtxt{
        font-size: 15px;
    }
    .intro-lead-image{
        margin: 15px auto 40px;
        width: 60%;
    }
}


.c-supplement-subtxt{
    font-size: 17px;
}
.c-supplement-wrap{
    margin: 80px 0 48px;
}
.ene-supplement{
     margin: 80px 0 100px;
}

.c-supplement-title{
    font-size: 24px;
    margin-bottom: 21px;
}
.c-supplement-txt{
    font-size: clamp(15px,1.7vw,17px);
}

.c-supplement-diagram{
    gap: clamp(5px,2vw,20px);
    max-width: 1000px;
    margin: 48px auto 0;
    align-items: center;

}
.c-supplement-diagram-heatWrap{
    margin: 0px auto 0;
}
.c-supplement-diagram-in{
    font-size: clamp(16px,1.6vw,24px);
    background: var(--green-txt);
    padding: 18px 0 15px;
    border-radius: 5px;
    color: #fff;
    width: 46%;
}
.c-supplement-diagram-plus{
    width: calc(100% - 92% - 40px);
}
@media screen and (max-width: 767px) {
    .c-supplement-diagram{
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    .c-supplement-diagram-in{
        width: 100%;
        font-size: 19px;
    }
    .c-supplement-diagram-plus{
        width: 10%;
    }
    .c-supplement-wrap{
        margin: 50px 0 38px;
    }
}
.third-party-wrap{
    gap: 8.4vw;
}
.third-party-txtWrap{
    width: 41%;
}

.third-party-image{
    width: calc(100% - 41% - 8.4vw);
}
.third-party-txtWrap{
    font-size: 16px;
}
.third-party-title{
    margin-bottom: 40px;
    font-size: clamp(20px,2.3vw,23px);
}
@media screen and (max-width: 767px) {
    .third-party-wrap{
        gap: 40px;
        flex-direction: column;
    }
    .third-party-txtWrap{
        width: 100%;
    }

    .third-party-image{
        width:100%;
    }
    .third-party-title{
        margin-bottom: 30px;
        font-size: 20px;
    }
}

@media screen and (max-width: 767px) {
    .c-supplement-title{
        font-size: 20px;
        margin-bottom: 21px;
    }
    .c-supplement-txt{
        font-size: 15px;
    }
    /* 横スライド */
    .flex-scroll {
        overflow-x: auto;
        position: relative;
    }
    .scroll-table {
        gap: 0px;
        position: relative;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 160%;
        overflow-x: scroll;
    }
        .scroll-icon02 {
        position: absolute;
        z-index: 3;
        top: 45%;
        left: 32%;
        translate: -50% -50%;
        width: 20%;
    }

  .scroll-icon02 img{
    transition: .8s 10s opacity;
  }
  .scroll-icon02.is_active img{
    /* position: absolute;
    z-index: 1;
    top: 55%;
    left: 32%;
    translate: -50% -50%;
    width: 15%; */
    animation: swipeIcon 6s ease-in-out 0.4s both infinite ;
    opacity: 0;
  }
  
  @keyframes swipeIcon {
    0%{
      transform: translateX(0);
    }
    10%{
      transform: translateX(-20px);
    }
    20%{
      transform: translateX(0);
    }
    30%{
      transform: translateX(-20px);
    }
    40%{
      transform: translateX(0);
    }
    50%{
      transform: translateX(-20px);
    }
    60%,100%{
      transform: translateX(0);
    }
  }
}


.section-linkCard{
    position: relative;
    margin: 40px 0 46px;
}
.section-linkCard .wave-health {
    position: absolute;
    left: 0;
    bottom: -350px;
    background-color: #fff;
    width: 100%;
    height: 500px;
    mask-size: 100%;
    mask-repeat: no-repeat;
    z-index: 0;
    mask-image: url(data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_4%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%204%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201680.11%202172.07%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20%23FFFFFF%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22cls-1%22%20d%3D%22M846.66%2C51.29C256.83-74.54%2C0%2C70.74%2C0%2C70.74v2101.33h1680.11V9.35s-208.23%2C175.32-833.45%2C41.94Z%22%2F%3E%3C%2Fsvg%3E);
}
@media screen and (max-width: 767px) {
    .section-linkCard .wave-health {
        bottom: -460px;
        
    }
}
.section-linkCard-inner{
    position: relative;
    z-index: 1;
    
}
.section-linkCard-list{
    gap: 30px;
}
.section-linkCard-item{
    width: calc(33.33% - 60px/3);
}
.section-linkCard-link{
    position: relative;
    display: block;
}
.section-linkCard-link::before{
    content: "";
    background: url(../img/zeh/arw-section-link.svg) no-repeat center / contain;
    width: 48px;
    height: 48px;
    position: absolute;
    bottom: -12%;
    left: 50%;
    translate:-50% -50%;
    z-index: 2;
}
.section-linkCard-title{
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    color: #fff;
    z-index: 3;
    width: 100%;
}
.section-linkCard-title-en{
    font-size: 42px;
}
.section-linkCard-title-ja{
    font-size: 20px;
    position: relative;
}
.section-linkCard-title-ja::after{
    content: "";
    width: 30px;
    height: 1px;
    background: #fff;
    display: block;
    position: absolute;
    top: 50%;
    left: 62%;
    translate: -50% -50%;
    z-index: 3;
}
.section-linkCard-title-ja::before{
    content: "";
    width: 30px;
    height: 1px;
    background: #fff;
    display: block;
    position: absolute;
    top: 50%;
    left: 38%;
    translate: -50% -50%;
    z-index: 3;
}
@media screen and (max-width: 767px) {
    .section-linkCard-inner{
        position: relative;
        z-index: 1;
        width: 100%;
    
    }
    .section-linkCard-list{
        gap: 0px;
    }
    .section-linkCard-item{
        width: 33.33%;
    }
    .section-linkCard-title-en{
    font-size: 16px;
}
    .section-linkCard-title-ja{
        font-size: 13px;
        position: relative;
    }
    .section-linkCard-title-ja::after{
        content: "";
        width: 15px;
        left: 75%;
    }
    .section-linkCard-title-ja::before{
        content: "";
        width: 15px;
        left: 25%;
    }
    .section-linkCard-link::before{
        width: 24px;
        height: 24px;
        bottom: -19%;
    }
}
.section-health{
    background: #F8F7F7;
}

.c-zehTitle{

}
.c-zehTitle-textWrap{
    position: relative;
    background: #F8F7F7;
    padding: 60px;
    mix-blend-mode: multiply; 
}
.c-zehTitle-textWrap-image{
    position: absolute;
    width: min(31vw,410px);
    top: 60px;
    right: 60px;
}
.--title-in-txt{
    width: 50%;
}
.c-zehTitle-lead{
    font-size: clamp(26px,3.2vw,32px);
    margin-top: 102px;
}
.c-point-title-wrap{
    gap: 30px;
    align-items: flex-end;
    margin-bottom: 50px;
    margin-top: 90px;

}
.c-green-line{
    display: block;
    height: 30px;
    width: 1px;
    background: var(--green-txt);
    margin-bottom: .8rem;
}
.c-point-namber{
    line-height: 1;
    color: var(--green-txt);
    font-size: 32px;
}
.c-point-title{
    font-size: clamp(24px,2.4vw,32px);
    color: var(--green-txt);
}
.point-large{
    font-size: 62px;
    line-height: 1;
    margin-left: 5px;
}
@media screen and (max-width: 767px) {
    .c-zehTitle-textWrap{
        padding: 26px;
    }
    .c-zehTitle-textWrap-image{
        position: static;
        width: min(100%,410px);
    }
    .--title-in-txt{
        width: 100%;
    }
    .c-zehTitle-lead{
        font-size: 19px;
        margin-top: 52px;
    }
    .c-point-title-wrap{
        gap: 12px;
        align-items: flex-start;
        margin-bottom: 16px;
        margin-top: 46px;
    }
    .c-green-line{
        display: none;
    }
    .c-point-namber{
        border-bottom: 1px solid var(--green-txt);
    }
    .c-point-namber{
        font-size: 20px;
    }
    .c-point-title{
        font-size: 23px;
        color: var(--green-txt);
    }
    .point-large{
        font-size: 40px;
        line-height: 1;
    }
    
}



.c-point-title-wrap .c-remarks{
    color: #000;
    margin-left: 20px;
}




.health-diagram{
    gap: clamp(5px,2vw,20px);
    align-items: center;
    margin-top: 48px;
}
.health-diagram-general{
    gap: 30px;
    align-items: flex-end;
    width: 46%;
}
.health-diagram-general-discription{
    width: 38%;
    flex-direction: column;
    align-items: center;
    gap:17px ;
}
.health-diagram-general-discription-plan{
    width: calc(100% - 38% - 30px);
}
.health-diagram-next-arw{
    width: calc(100% - 92% - 40px);
    width: max(calc(100% - 92% - 40px),10px);
}
.health-diagram-general-discription-txt{
    font-size: 24px;
    color: var(--green-txt);
}
.health-diagram-general-discription-txt-green{
    font-size: 32px;
    color: var(--green-txt);

}
.health-diagram-general-discription-text-glay{
    color: #575758;
}
.diagram02{
    gap: 86px;
}
/* .c-supplement-diagram.grid-layout{
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: ;
} */
.diagram-white-in{
    width: calc(50% - 43px);
}
.diagram-white-in-title{
    font-size: 24px;
    margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
    .health-diagram{
        gap: 20px;
        align-items: center;
        margin-top: 48px;
        flex-direction: column;
    }
    .health-diagram-general{
        gap: 30px;
        align-items: flex-end;
        width: 100%;
    }
    .health-diagram-general-discription-txt{
        font-size: 16px;
        color: var(--green-txt);
    }
    .health-diagram-general-discription-txt-green{
        font-size: 20px;
        color: var(--green-txt);

    }
    .health-diagram-general-discription-text-glay{
    color: #575758;
    text-align: center;
    }
    .health-diagram-next-arw{
        width: 8%;
        rotate: 90deg;
    }
    .diagram02{
        gap: 36px;
        flex-direction: column;
    }
    .diagram-white-in{
        width: 100%;
    }
    .diagram-white-in-title{
        font-size: 16px;
        margin-bottom: 16px;
    }
    .c-point-title-wrap .c-remarks{
        color: #000;
        margin-left: 3px;
    }
}
.--greenTitle{
    color: var(--green-txt);
}
.c-supplement-diagram-inWrap{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.c-supplement-diagram-inWrap{
    width: 46%;
}
.c-supplement-diagram-inWrap .c-supplement-diagram-in{
    width: 100%;
}
.c-supplement-diagram-in-next{

}
.heatshick{
    padding: calc(18px + 15px + 5px + 20px ) 0 ;
}
.health-diagram-txt{
    font-size: 20px;
    color: var(--green-txt);
    margin-top: 24px;
}
.c-remarks{
    font-size: 11px;
    margin-top: 10px;
    font-family: "MFW-KoburinaGoStdN-W3";
}
@media screen and (max-width: 767px) {
    .c-supplement-diagram-inWrap{
        width: 100%;
    }
    .heatshick{
        padding: 18px 15px ;
    }
    .health-diagram-txt{
        font-size: 14px;
        margin-top: 24px;
    }
    .c-remarks{
    font-size: 10px;
    margin-top: 10px;
}
}
.health-benefits-list{
    gap: 20px;
    margin-top: 48px;
}


.health-benefits-item{
    width: calc(100%/5 - 80px/5);
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;

}
.health-benefits-sub-result{
    background: var(--green-txt);
    padding: 23px 0px 23px;
    color: #fff;
}
.health-benefits-result{
    background: #fff;
    font-size: clamp(14px,1.4vw,24px);
    padding: 33px 0px 30px;
}
@media screen and (max-width: 767px) {
    .health-benefits-list{
        gap: 20px;
        margin-top: 48px;
        flex-direction: column;
    }
    .health-benefits-item{
        width: 100%;
        display: flex;
        flex-direction: row;
        border-radius: 10px;
        overflow: hidden;
    }
    .health-benefits-sub-result{
        background: var(--green-txt);
        padding: 23px 0px 23px;
        color: #fff;
        width: 100%;
    }
    .health-benefits-result{
        background: #fff;
        font-size: 15px;
        padding: 33px 0px 30px;
        width: 100%;
    }
}

.health-point-charm-list{
    gap: 40px;
    margin-bottom: 48px;
}
.health-point-charm-item{
    width: calc(33.33% - 80px/3);
    background: #fff;
    padding: 66px 0 70px;
    border-radius: 10px;
}
.health-point-charm-item-green{
    font-size: 17px;
    color: var(--green-txt);
    margin-bottom: 24px;
}
.health-point-charm-item-main{
    font-size: clamp(18px,1.8vw,24px);
}
.health-point-specification{
    gap: 56px;
}
.health-point-specification-in{
    display: grid;
    grid-template-columns: .35fr .65fr;
    grid-template-rows: repeat(2,auto);
    width: calc(50% - 56px/2);
    gap: 26px 56px;
    margin-top: 48px;
}
.health-point-specification-title{
    font-size: 24px;
    display: flex;
    grid-column: 1/3;
}
.health-point-specification-title-first{
    margin-bottom: 0;
}
.c-green-namber{
    background: var(--green-txt) ;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    text-align: center;
    width: 30px;
    height: 30px;
}
.health-point-specification-txt{
    grid-column: 1/2;
    grid-row: 2/3;
    font-size: 15px;
}
.health-point-specification-in-image{
    grid-column: 2/3;
    grid-row: 2/3;
}
@media screen and (max-width: 950px) {
    .health-point-specification {
        flex-direction: column;
    }
     .health-point-specification-in{
        width: 100%;
        display: grid;
    grid-template-columns: .35fr .65fr;
    grid-template-rows: repeat(2,auto);
    width:100%;
    gap: 26px 56px;
    margin-top: 48px;
    }
}
@media screen and (max-width: 767px) {
    .health-point-charm-list{
        gap: 16px;
        margin-bottom: 48px;
        flex-direction: column;
    }
    .health-point-charm-item{
        width: 100%;
        background: #fff;
        padding: 24px 0 24px;
        border-radius: 10px;
    }
    .health-point-charm-item-green{
        font-size: 15px;
        margin-bottom: 6px;
    }
    .health-point-charm-item-main{
        font-size: 16px;
    }
    
    .health-point-specification-in{
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 20px 0px;
        margin-top: 48px;
    }
    .c-green-namber{
        font-size: 14px;
        width: 24px;
        height: 24px;
    }
    .health-point-specification-title{
        font-size: 20px;
    }
    .health-point-specification-in-image{
        width: 80%;
        margin: 0 auto;
    }
    .low-e-image{
        margin: 0 auto 0 13px;
    }
}

.economic-graphtable{
    border-radius: 20px;
    border: 1px solid #ccc;
    padding: clamp(60px,10vw,100px) clamp(80px,8vw,150px);
}
.economic-graphWrap{
    margin-bottom: 80px;
}
.economic-grap-titleWrap{
    display: flex;
    gap: 18px;
    align-items: center;
}
.economic-grap-titleWrap-grid{
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: repeat(2,auto);
    gap: 0 18px;
    margin-bottom: 34px;
}
.economic-grap-titleWrap-grid .economic-grap-subTxt-wrap{
    grid-column: 2/3;
    grid-row: 2/3;
}
.economic-grap-titleWrap-grid .c-remarks{
    margin-top: 0;
}

.economic-grap-title-green{
    background: var(--green-txt);
    width: 88px;
    height: 88px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    border-radius: 50%;
}
.economic-grap-title{
    font-size: clamp(20px,2vw,24px);
}

.economic-taxWrap{
    display: grid;
    grid-template-columns: 88px auto;
    grid-template-rows: repeat(2,auto);
    margin-bottom: 30px;
    column-gap: 20px;
}
.economic-tax-green{
    border: 1px solid var(--green-txt);
    grid-column: 1/2;
    grid-row: 1/3;
    color: var(--green-txt);
    width: 88px;
    height: 68px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 20px;

}
.economic-tax-title{
    grid-column: 2/3;
    grid-row: 1/2;
}
.economic-tax-title-small{
    font-size: 11px;
}
.economic-tax-txt{
    grid-column: 2/3;
    grid-row: 2/3;
}

.economic-applicable{
    display: grid;
    grid-template-columns: repeat(3,auto);
    grid-template-rows: repeat(2,auto);
    gap: 3px 10px;
    margin-top: 16px;
}
.economic-applicable-green01{
    grid-column: 1/2;
    grid-row: 1/3;
    width: 100%;
}
.economic-applicable-green02{
    grid-column: 2/3;
    grid-row: 1/3;
    width: 100%;
}
.economic-applicable-greenTxt{
    grid-column: 3/4;
    grid-row: 1/2;
    font-size: clamp(20px,2vw,24px);
    color: var(--green-txt);
}
.economic-applicable-conditions-list{
    grid-column: 3/4;
    grid-row: 2/3;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.economic-applicable-conditions-item{
    position: relative;
    padding-left: 14px;
    list-style: none;
    font-size: 11px;
}
.economic-applicable-conditions-item::before{
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background: #575758;
}

@media screen and (max-width: 767px) {
    .economic-grap-title-green{
        width: 75px;
        height: 75px;
        font-size: 16px;
    }
    .economic-graphtable{
        border-radius: 20px;
        border: none;
        padding: 25px 0px;
    }
    .economic-grap-titleWrap{
        display: flex;
        gap: 18px;
        align-items: center;
        flex-direction: column;
        margin-bottom: 24px;
    }
    .economic-grap-title{
    font-size: 17px;
    text-align: center;
    }
    .economic-grap-subTxt{
        text-align: center;
        font-size: 14px;
        margin-bottom: 13px;
    }
    .economic-tax-title{
        font-size: 15px;
    }
    .economic-tax-title-small{
        font-size: 10px;
    }
    .economic-tax-txt{
        font-size: 14px;
    }
    .economic-tax-green{
        width: 78px;
        height: 58px;
        font-size: 16px;

    }
    .economic-taxWrap{
        display: grid;
        grid-template-columns: 78px auto;
        grid-template-rows: repeat(2,auto);
        margin-bottom: 30px;
        column-gap: 10px;
    }
    .economic-applicable{
        display: grid;
        grid-template-columns: repeat(2,auto);
        grid-template-rows: repeat(3,auto);
        gap: 3px 10px;
        margin: 16px auto 0;
        width: 85%;
    }

    .economic-applicable-green01{
        grid-column: 1/2;
        grid-row: 1/2;
        width: 100%;
        font-size: 15px;
    }
    .economic-applicable-green02{
        grid-column: 2/3;
        grid-row: 1/2;
        width: 100%;
        font-size: 15px;
    }
    .economic-applicable-greenTxt{
        grid-column: 1/3;
        grid-row: 2/3;
        font-size: 16px;
        color: var(--green-txt);
    }
    .economic-applicable-conditions-list{
        grid-column: 1/3;
        grid-row: 3/4;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }
    .economic-graphWrap{
        margin-bottom: 0px;
    }
    .economic-graph-preferential{
        margin-bottom: 54px;
    }
}


.section-environment{
    background: #F8F7F7;
}
.environment-diagram-co2{
    align-items: center;
    gap: 20px;
}
.environment-diagram-general{
    width: 46%;
}
.environment-diagram-co2-image{
    width: 75%;
    margin-left: auto;
}

.environment-diagram-general-discription-second{
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
}
.environment-diagram-general-discription-txt{
    width: 32%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.environment-diagram-goal-mark{
    display: grid;
    grid-template-columns: repeat(2,auto);
    grid-template-rows: repeat(3,auto);
    gap: 26px 45px;
}

.environment-diagram-goal-mark-txt{
    border: 1px solid var(--green-txt);
    color: var(--green-txt);
    font-size: 28px;
    border-radius: 50%;
    width: 140px;
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    grid-column: 1/2;
    grid-template-rows: 1/2;
}
.environment-diagram-goal-mark-txtWrap{
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.environment-diagram-goal-mark-txt-small{
    font-size: 24px;
}
.environment-diagram-goal-mark-image{
    grid-column: 2/3;
    grid-template-rows: 1/2;
}
.environment-diagram-goal-mark-name{
    grid-column: 2/3;
    grid-template-rows: 2/3;
    color: var(--green-txt);
    font-size: 18px;
    margin-top: -16px;
}
.environment-diagram-goal-remarkWrap{
    grid-column: 1/3;
    grid-template-rows: 3/4;
}

.environment-diagram-home-image{
    margin-top: 60px;
}
.environment-diagram-home-image-title{
    margin-bottom: 30px;
}
.environment-diagram-general-discription-txt-in{
    font-size: clamp(12px,1.2vw,14px);
}

@media screen and (max-width: 767px) {
    .environment-diagram-co2{
        align-items: center;
        gap: 20px;
        flex-direction: column;
    }
    .environment-diagram-general{
        width: 100%;
    }
    .environment-diagram-co2-image{
        width: 75%;
        margin: 0 auto;
    }
    .environment-diagram-co2-image-second{
        margin:0  0 0 auto;
    }
    .environment-diagram-general-discription-second{
        display: flex;
        flex-direction: column-reverse;
        gap: 12px;
    }
    .environment-diagram-co2{
        padding: 25px 20px;
    }
    .environment-diagram-general-discription-txt{
        font-size: 13px;
    }
    .environment-diagram-goal-mark{
        display: grid;
        grid-template-columns: repeat(2,auto);
        grid-template-rows: repeat(4,auto);
        gap: 12px 12px;
    }

    .environment-diagram-goal-mark-image{
        grid-column: 1/3;
        grid-rows: 2/3;
        margin-top: -20px;
    }
    .environment-diagram-goal-mark-name{
        grid-column: 1/2;
        grid-rows: 3/4;
        margin-top: -8px;
        font-size: 15px;
    }
    .environment-diagram-goal-remarkWrap{
        grid-column: 1/3;
        grid-template-rows: 4/5;
    }
    .environment-diagram-goal-mark-txt{
        border: 1px solid var(--green-txt);
        color: var(--green-txt);
        font-size: 16px;
        border-radius: 50%;
        width: 70px;
        height: 70px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        grid-column: 1/2;
        grid-template-rows: 1/2;
    }
    .environment-diagram-goal-mark-txt-small{
        font-size: 14px;
    }
    .ecojoaz-scrollWrap{
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
    }
    .environment-diagram-general-discription-second{
        display: flex;
        flex-direction: column-reverse;
        gap: 10px;
    }
    .environment-diagram-general-discription-txt{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
}

@media screen and (max-width: 767px) {
    .sp-text-left{
        text-align: left;
    }
    .zeh-whiteWrap{
        padding: 25px 20px;
    }
    .environment-diagram-goal-mark-txt-in{
        font-size: 14px;
    }

}

@media screen and (min-width: 767px) {
    .pc-none{
        display: none;
    }
    .sp-none{
        display: block;
    }
}
@media screen and (max-width: 767px) {
    .sp-none{
        display: none;
    }
}