@charset "utf-8";
.secCmnHero .subtitBox .imgSubArea{
    display: inline-block;
    position: relative;
    padding-right: 0;
}

.secCmnTopBox::after{
    content: "";
    position: absolute;
    width: 1400px;
    height: 845px;
    left: calc(50% - 400px);
    top: 200px;
    background: url(../img/technology/envelope/imgHeroitem.png) center top no-repeat;
    opacity: 0.3;
}
.secCmnTopBox::before{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1000px;
    background-image: -moz-linear-gradient( 90deg, rgb(35,35,38) 0%, rgba(35,35,38,0) 100%);
    background-image: -webkit-linear-gradient( 90deg, rgb(35,35,38) 0%, rgba(35,35,38,0) 100%);
    background-image: -ms-linear-gradient( 90deg, rgb(35,35,38) 0%, rgba(35,35,38,0) 100%);
    z-index: 10;
}
@media screen and (max-width:767px){
    .secCmnTopBox::after{
        width: 600px;
        height: 362px;
        top: auto;
        bottom: calc(0% - 50px);
        left: -33px;
        background-size: 100% auto;
        opacity: 0.6;
    }
    .secCmnTopBox::before{
        height: calc(100% - 50px);
    }
}

@media screen and (max-width:767px){
    #Anchor01 .c_Nav.lazyloaded .navtitbox{
        background-image: url(../img/technology/envelope/imgbgNavtit01.jpg);
    }
    #Anchor02 .c_Nav.lazyloaded .navtitbox{
        background-image: url(../img/technology/envelope/imgbgNavtit02.jpg);
    }
    #Anchor03 .c_Nav.lazyloaded .navtitbox{
        background-image: url(../img/technology/envelope/imgbgNavtit03.jpg);
    }
    #Anchor04 .c_Nav.lazyloaded .navtitbox{
        background-image: url(../img/technology/envelope/imgbgNavtit04.jpg);
    }
    .secNavbox .navlinklist .item{
        width: calc((100% - 2px) / 2);
        margin-right: 1px;
    }
    .secAnchorNav .navItem{
        width: calc((100% - 2px) / 2);
        margin-right: 1px;
    }
}
@media screen and (max-width: 330px){
    .secAnchorNav .n_txt{
        letter-spacing: 0;
    }
}

/* secResidence */
.secResidence{
    background-color: #232326;
    color: #fff;
    padding-top: 181px;
    padding-bottom: 142px;
}
@media screen and (min-width:768px){
    .secResidence.lazyloaded{
        background: url(../img/technology/envelope/imgbgTaishin.jpg) center top no-repeat #232326;
    }
}
.secResidence .ComparisonBox{
    max-width: 1100px;
    margin: 0 auto;
    width: 100%;
    margin-top: 50px;
}
.secResidence .ComparisonBox .toparea{
    display: flex;
}
.secResidence .ComparisonBox .toparea .topbox{
    width: calc((100% - 100px) / 2);
    margin-right: 100px;
}
.secResidence .ComparisonBox .toparea .topbox:last-child{
    margin-right: 0;
}
.secResidence .topbox .boxIn{
    display: flex;
    align-items: center;
    width: 100%;
    height: 80px;
    border: 1px solid;
    border-color: #fff;
    background-color: #232326;
    color: #fff;
}
.secResidence .topbox.type_takano .boxIn{
    border-color: #e60012;
    background-color: #e60012;
}
.secResidence .toparea .topin{
    display: inline-block;
    width: 100%;
    text-align: center;
}
.secResidence .toparea .toptxt{
    font-size: 22px;
    line-height: calc(36 / 22);
    font-weight: 900;
    letter-spacing: 0.05em;
}
.secResidence .boxArea{
    width: 100%;
    position: relative;
    margin-top: 40px;
}
.secResidence .boxArea .list{
    display: flex;
}
.secResidence .boxArea .list .item{
    width: calc((100% - 100px) / 2);
    margin-right: 100px;
}
.secResidence .boxArea .list .item:last-child{
    margin-right: 0;
}
.secResidence .boxArea .itemtxt{
    font-size: 18px;
    line-height: calc(36 / 18);
    display: inline-block;
    width: 100%;
    text-align: center;
    letter-spacing: 0.025em;
    font-weight: 900;
}
.secResidence .boxArea .txtMin{
    font-size: 18px;
    font-weight: normal;
    color: #fff;
}
.secResidence .boxArea .txtEng{
    font-size: 50px;
    line-height: 1;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 15px;
}
.secResidence .boxArea .txtMid{
    font-size: 30px;
}
.secResidence .boxArea .txtHeat20{
    color: #42a61b;
}
@media screen and (max-width:767px){
    .secResidence{
        padding-top: 34px;
        padding-bottom: 67px;
    }
    .secResidence .ComparisonBox{
        max-width: 100%;
        margin-top: 34px;
    }
    .secResidence .ComparisonBox .toparea .topbox{
        width: calc((100% - 11px) / 2);
        margin-right: 11px;
    }
    .secResidence .ComparisonBox .toparea .topbox:last-child{
        margin-right: 0;
    }
    .secResidence .topbox .boxIn{
        height: 45px;
    }
    .secResidence .toparea .toptxt{
        font-size: 11px;
        line-height: calc(20 / 11);
        letter-spacing: 0;
    }
    .secResidence .boxArea{
        margin-top: 12px;
    }
    .secResidence .boxArea .list .item{
        width: calc((100% - 11px) / 2);
        margin-right: 11px;
    }
    .secResidence .boxArea .list .item:last-child{
        margin-right: 0;
    }
    .secResidence .boxArea .itemtxt{
        font-size: 13px;
        line-height: calc(20 / 13);
        letter-spacing: 0;
    }
    .secResidence .boxArea .txtMin{
        font-size: 11px;
    }
    .secResidence .boxArea .txtEng{
        font-size: 28px;
        line-height: 1;
        gap: 3px;
        margin-bottom: 5px;
    }
    .secResidence .boxArea .txtMid{
        font-size: 13px;
    }
}

/* secG3 */
.secG3{
    padding-top: 137px;
    padding-bottom: 150px;
}
.secG3 .underArea{
    margin-top: 49px;
}
.secG3 .underArea .boxInnner{
    display: flex;
    justify-content: center;
    gap: 35px;
}
.secG3 .underArea .boxPyramid{
    width: 520px;
    height: 533px;
    position: relative;
}
.secG3 .boxPyramid .imgPyramid:first-child:before{
    content: "";
    display: block;
    width: 159px;
    height: 1px;
    background: repeating-linear-gradient(
        to right,
        rgba(255, 255, 255, 1) 0,
        rgba(255, 255, 255, 1) 1px,
        transparent 1px,
        transparent 2px
    );
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.6s ease;
    transition-delay: 2.4s;
    position: absolute;
    top: 52px;
    right: 8px;
    z-index: 2;
}
.secG3 .boxPyramid .imgPyramid.jsShow:first-child:before{
    transform: scaleX(1);
}
.secG3 .underArea .jsHide.jsHide_type02{
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.secG3 .underArea .jsHide.jsHide_type02:not(.jsShow){
    opacity: 0;
    transform: translate3d(0, -40px, 0);
}
.secG3 .boxPyramid .imgPyramid{
    width: 100%;
    position: relative;
    /* z-index: 1; */
    margin-top: -1px;
}
.secG3 .boxPyramid .imgPyramid:not(:last-child)::after{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.6s ease;
    transition-delay: 2.4s;
    position: relative;
    z-index: 2;
}
.secG3 .boxPyramid .imgPyramid.jsShow:not(:last-child)::after{
    transform: scaleX(1);
}
.secG3 .underArea .imgCertificate{
    display: flex;
    flex-direction: column;
    padding-top: 12px;
}
.secG3 .underArea .titCertificate{
    font-size: 16px;
    letter-spacing: 0.05em;
    text-align: center;
    margin-bottom: 20px;
}
@media screen and (max-width:767px){
    .secG3{
        padding-top: 85px;
        padding-bottom: 70px;
    }
    .secG3 .underArea{
        margin-top: 36px;
    }
    .secG3 .underArea .boxInnner{
        gap: 0px;
    }
    .secG3 .underArea .boxPyramid{
        width:275px;
        height: 282px;
    }
    .secG3 .boxPyramid .imgPyramid:first-child:before{
        width: 66px;
        height: 1px;
        background: repeating-linear-gradient(
            to right,
            rgba(255, 255, 255, 0.6) 0,
            rgba(255, 255, 255, 0.6) 2px,
            transparent 2px,
            transparent 7px
        );
        transition: transform 0.6s ease;
        transition-delay: 2.4s;
        top: 12px;
        right: 17px;
    }
    .secG3 .underArea .jsHide.jsHide_type02:not(.jsShow){
        opacity: 0;
        transform: translate3d(0, -40px, 0);
    }
    .secG3 .boxPyramid .imgPyramid{
        margin-top: -1px;
    }
    .secG3 .boxPyramid .imgPyramid:not(:last-child)::after{
        background: rgba(255, 255, 255, 0.4);
    }
    .secG3 .underArea .imgCertificate{
        padding-top: 10px;
    }
    .secG3 .underArea .titCertificate{
        font-size: 8px;
        letter-spacing: 0;
        margin-bottom: 6px;
    }
    .secG3 .underArea .imgCertificateIn{
        width: 71px;
    }
}
/* ▼アニメーション */
.secG3 .underArea .imgPyramid.jsShow.delay01{
    transition-delay: 0.3s;
}
.secG3 .underArea .imgPyramid.jsShow.delay02{
    transition-delay: 0.6s;
}
.secG3 .underArea .imgPyramid.jsShow.delay03{
    transition-delay: 0.9s;
}
.secG3 .underArea .imgPyramid.jsShow.delay04{
    transition-delay: 1.2s;
}
.secG3 .underArea .imgPyramid.jsShow.delay05{
    transition-delay: 1.5s;
}
.secG3 .underArea .imgCertificate.jsShow.delay06{
    transition-delay: 3s;
}

/* secGrade */
.secGrade{
    padding-top: 136px;
    padding-bottom: 64px;
}
@media screen and (min-width:768px){
    .secGrade.lazyloaded{
        background: url(../img/technology/envelope/imgbgGrade.jpg) center top no-repeat #fff;
    }
}
.secGrade .underArea{
    margin-top: 60px;
}
.secGrade .underArea .boxList{
    display: flex;
    justify-content: center;
    gap: 40px;
}
.secGrade .underArea .item{
    width: 340px;
}
.secGrade .underArea .itemTop{
    height: 290px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: 900;
    color: #fff;
}
.secGrade .underArea .item:nth-child(1) .itemTop.lazyloaded{
    background: url(../img/technology/envelope/bgGrade01.jpg) center top / cover;
}
.secGrade .underArea .item:nth-child(2) .itemTop.lazyloaded{
    background: url(../img/technology/envelope/bgGrade02.jpg) center top / cover;
}
.secGrade .underArea .item:nth-child(3) .itemTop.lazyloaded{
    background: url(../img/technology/envelope/bgGrade03.jpg) center top / cover;
}
.secGrade .underArea .txtTit{
    font-size: 16px;
    letter-spacing: 0.08em;
}
.secGrade .underArea .txt{
    font-size: 18px;
    letter-spacing: 0.05em;
    margin-top: 19px;
}
.secGrade .underArea .txtNum{
    font-size: 50px;
}
.secGrade .underArea .txtTemperature{
    font-size: 30px;
}
.secGrade .underArea .boxTxt{
    text-align: center;
    margin-top: 30px;
}
.secGrade .underArea .boxTxt .txtGrade{
    font-size: 35px;
    letter-spacing: 0.03em;
}
.secGrade .underArea .boxTxt .txtSub{
    font-size: 16px;
    letter-spacing: 0.08em;
    margin-top: 24px;
}
@media screen and (max-width:767px){
    .secGrade{
        padding-top: 40px;
        padding-bottom: 70px;
    }
    .secGrade .underArea{
        margin-top: 35px;
    }
    .secGrade .underArea .boxList{
        flex-direction: column;
        gap: 20px;
    }
    .secGrade .underArea .item{
        width: 100%;
        display: flex;
        align-items: center;
    }
    .secGrade .underArea .itemTop{
        height: auto;
        padding: 17.615% 0;
        width: 61.2%;
    }
    .secGrade .underArea .item:nth-child(1) .itemTop.lazyloaded{
        background: url(../img/technology/envelope/bgGrade01.jpg) center top / cover;
    }
    .secGrade .underArea .item:nth-child(2) .itemTop.lazyloaded{
        background: url(../img/technology/envelope/bgGrade02.jpg) center top / cover;
    }
    .secGrade .underArea .item:nth-child(3) .itemTop.lazyloaded{
        background: url(../img/technology/envelope/bgGrade03.jpg) center top / cover;
    }
    .secGrade .underArea .txtTit{
        font-size: 10px;
        letter-spacing: 0;
    }
    .secGrade .underArea .txt{
        font-size: 11px;
        letter-spacing: 0;
        margin-top: 12px;
    }
    .secGrade .underArea .txtNum{
        font-size: 35px;
    }
    .secGrade .underArea .txtTemperature{
        font-size: 18px;
    }
    .secGrade .underArea .boxTxt{
        width: calc(100% - 61.2% - 15px);
        text-align: left;
        margin-top: 0;
        margin-left: 15px;
    }
    .secGrade .underArea .boxTxt .txtGrade{
        font-size: 28px;
        letter-spacing: 0;
    }
    .secGrade .underArea .boxTxt .txtSub{
        font-size: 12px;
        line-height: calc(20 / 13);
        letter-spacing: 0;
        margin-top: 7px;
    }
}
@media screen and (max-width:355px){
    .secGrade .underArea .boxTxt .txtSub{
        font-size: 11px;
    }
}
@media screen and (max-width:330px){
    .secGrade .underArea .boxTxt .txtSub{
        font-size: 10px;
    }
}
/* ▼アニメーション */
.secGrade .underArea .item.jsShow.delay01{
    transition-delay: 0.1s;
}
.secGrade .underArea .item.jsShow.delay02{
    transition-delay: 0.3s;
}
.secGrade .underArea .item.jsShow.delay03{
    transition-delay: 0.5s;
}

/* secMethod */
.secMethod{
    padding-top: 136px;
    padding-bottom: 64px;
}
.secMethod .subtit{
    font-size: 22px;
    font-weight: 900;
    margin-top: 49px;
}
.secMethod .topArea{
    display: flex;
    justify-content: center;
    gap: 127px;
    margin-top: 69px;
}
.secMethod .underTxt{
    width: 750px;
    height: 140px;
    background: #fff6ea;
    font-size: 18px;
    line-height: calc(34 / 18);
    letter-spacing: 0.08em;
    font-weight: 900;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 60px auto 0;
}
@media screen and (max-width:767px){
    .secMethod{
        padding-top: 40px;
        padding-bottom: 70px;
    }
    .secMethod .subtit{
        font-size: 13px;
        line-height: calc(20 / 13);
        text-align: left;
        margin-top: 14px;
    }
    .secMethod .topArea{
        gap: 17px;
        margin-top: 35px;
    }
    .secMethod .underTxt{
        width: 100%;
        height: 85px;
        font-size: 11px;
        line-height: calc(18 / 11);
        letter-spacing: 0;
        margin: 30px auto 0;
    }
}

/* secPerformance */
.secPerformance{
    padding-top: 136px;
    padding-bottom: 64px;
}
.secPerformance .underArea{
    display: flex;
    justify-content: center;
    gap: 190px;
    text-align: center;
    margin-top: 60px;
}
.secPerformance .underArea .txtTit{
    font-size: 22px;
    letter-spacing: 0.08em;
    font-weight: 900;
}
.secPerformance .underArea .txtTit.type_takano{
    color: #e60012;
}
.secPerformance .underArea .boxNum{
    display: flex;
    align-items: flex-end;
    gap: 20px;
}
.secPerformance .underArea .boxNum.type_takano{
    color: #42a61b;
}
.secPerformance .underArea .boxLeft{
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 900;
    text-align: right;
    margin-bottom: 18px;
}
.secPerformance .underArea .txtLeft{
    font-size: 50px;
    letter-spacing: 0.08em;
}
.secPerformance .underArea .txtLeftSub{
    font-size: 24px;
    letter-spacing: 0.08em;
}
.secPerformance .underArea .txtNum{
    font-size: 140px;
}
.secPerformance .underArea .txtExample{
    font-size: 16px;
    margin-top: 40px;
}
.secPerformance .underArea .imgExample{
    margin: 31px auto 0;
}
@media screen and (max-width:767px){
    .secPerformance{
        padding-top: 34px;
        padding-bottom: 70px;
    }
    .secPerformance .underArea{
        gap: 40px;
        margin-top: 35px;
    }
    .secPerformance .underArea .txtTit{
        font-size: 11px;
        letter-spacing: 0;
    }
    .secPerformance .underArea .boxNum{
        gap: 6px;
        margin-top: 13px;
    }
    .secPerformance .underArea .boxLeft{
        gap: 3px;
        margin-bottom: 9px;
    }
    .secPerformance .underArea .txtLeft{
        font-size: 18px;
        letter-spacing: 0.05em;
    }
    .secPerformance .underArea .txtLeftSub{
        font-size: 10px;
        letter-spacing: 0.05em;
    }
    .secPerformance .underArea .txtNum{
        font-size: 50px;
    }
    .secPerformance .underArea .txtExample{
        font-size: 11px;
        margin-top: 14px;
    }
    .secPerformance .underArea .imgExample{
        width: 102px;
        margin: 17px auto 0;
    }
    .secPerformance .underArea .imgExample2{
        width: 31px;
    }
}
@media screen and (max-width:350px){
    .secPerformance .underArea{
        gap: 30px;
    }
    .secPerformance .underArea .txtTit{
        font-size: 10px;
    }
    .secPerformance .underArea .txtNum{
        font-size: 45px;
    }
    .secPerformance .underArea .txtExample{
        font-size: 10px;
    }
}

/* secMeasurement */
.secMeasurement{
    padding-top: 136px;
    padding-bottom: 150px;
}
.secMeasurement .underArea{
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 69px;
}
@media screen and (max-width:767px){
    .secMeasurement{
        padding-top: 34px;
        padding-bottom: 70px;
    }
    .secMeasurement .underArea{
        gap: 9px;
        margin-top: 34px;
    }
}

/* secVentilation */
.secVentilation{
    background-color: #232326;
    color: #fff;
    padding-top: 138px;
    padding-bottom: 151px;
}
@media screen and (min-width:768px){
    .secVentilation.lazyloaded{
        background: url(../img/technology/envelope/imgbgVentilation.jpg) center top no-repeat #232326;
    }
}
.secVentilation .topArea{
    max-width: 1100px;
    padding: 68px 64px;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    gap: 94px;
    margin: 49px auto 0;
}
.secVentilation .topArea .imgVentilation{
    width: 245px;
}
.secVentilation .topArea .boxTxt{
    width: calc(100% - 245px - 94px);
}
.secVentilation .topArea .txtTit{
    font-size: 22px;
    letter-spacing: 0.08em;
    font-weight: 900;
}
.secVentilation .topArea .txtAbout{
    font-size: 18px;
    letter-spacing: 0.08em;
    margin-top: 23px;
}
.secVentilation .topArea .txtAboutSub{
    font-size: 12px;
    line-height: calc(24 / 12);
    letter-spacing: 0.05em;
    margin-top: 18px;
}
.secVentilation .underArea{
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 60px;
}
.secVentilation .underArea .boxVentilation{
    width: 540px;
    padding: 70px 30px 59px;
    border: 1px solid #fff;
    text-align: center;
    position: relative;
}
.secVentilation .underArea .iconSeason{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ae0000;
    border: 1px solid #656568;
    font-size: 22px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 30px;
    left: 30px;
}
.secVentilation .underArea .iconSeason.winter{
    background: #1f6194;
}
.secVentilation .underArea .imgVentilationEffect{
    margin-left:45px;
}
.secVentilation .underArea .boxNum{
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-top: 40px;
}
.secVentilation .underArea .txtNum{
    font-size: 120px;
    font-weight: 900;
}
.secVentilation .underArea .txtUnit{
    font-size: 50px;
    font-weight: 900;
}
.secVentilation .underArea .txtTit{
    font-size: 18px;
    font-weight: 900;
    margin-top: 31px;
}
.secVentilation .underArea .txtAbout{
    font-size: 16px;
    line-height: calc(36 / 16);
    margin-top: 16px;
}
@media screen and (max-width:767px){
    .secVentilation{
        padding-top: 34px;
        padding-bottom: 70px;
    }
    .secVentilation .topArea{
        max-width: 100%;
        padding: 20px 15px;
        gap: 21px;
        margin: 24px auto 0;
    }
    .secVentilation .topArea .imgVentilation{
        width: 87px;
    }
    .secVentilation .topArea .boxTxt{
        width: calc(100% - 87px - 21px);
    }
    .secVentilation .topArea .txtTit{
        font-size: 13px;
        line-height: calc(20 / 13);
        letter-spacing: 0;
    }
    .secVentilation .topArea .txtAbout{
        font-size: 11px;
        line-height: calc(18 / 11);
        letter-spacing: 0;
        margin-top: 3px;
    }
    .secVentilation .txtAboutSub{
        font-size: 9px;
        line-height: calc(18 / 9);
        letter-spacing: 0;
        margin-top: 11px;
    }
    .secVentilation .underArea{
        gap: 5px;
        margin-top: 25px;
    }
    .secVentilation .underArea .boxVentilation{
        width: 100%;
        padding: 44px 15px 27px;
    }
    .secVentilation .underArea .iconSeason{
        width: 30px;
        height: 30px;
        font-size: 12px;
        top: 15px;
        left: 15px;
    }
    .secVentilation .underArea .imgVentilationEffect{
        margin-left: 0;
    }
    .secVentilation .underArea .boxNum{
        gap: 1px;
        margin-top: 16px;
    }
    .secVentilation .underArea .txtNum{
        font-size: 40px;
    }
    .secVentilation .underArea .txtUnit{
        font-size: 22px;
    }
    .secVentilation .underArea .txtTit{
        font-size: 11px;
        line-height: calc(18 / 11);
        margin-top: 11px;
    }
    .secVentilation .underArea .txtAbout{
        font-size: 11px;
        line-height: calc(18 / 11);
        margin-top: 6px;
    }
}
/* ▼アニメーション */
.secVentilation .underArea .boxVentilation.jsShow.delay01{
    transition-delay: 0.1s;
}
.secVentilation .underArea .boxVentilation.jsShow.delay02{
    transition-delay: 0.5s;
}

/* secResult */
.secResult{
    padding-top: 151px;
    padding-bottom: 150px;
}
.secResult .underArea{
    margin-top: 60px;
}
.secResult .underArea .resultGraph{
    max-width: 1010px;
    width: 100%;
    margin: 0 auto;
    position: relative;
}
.secResult .underArea .resultGraph::after{
    content: "";
    width: 1px;
    height: 230px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 173px;
    transform: translateY(-50%);
}
.secResult .underArea .graphRow{
    display: flex;
    align-items: center;
    gap: 28px;
}
.secResult .underArea .graphRow + .graphRow{
    margin-top: 30px;
}
.secResult .underArea .graphLabel{
    width: 145px;
    font-size: 22px;
    letter-spacing: 0.08em;
    text-align: right;
    font-weight: 900;
    transform: translateY(-12px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.secResult .underArea .graphRow.type_takano .graphLabel{
    color: #f60a0a;
}
.secResult .underArea .graphBarWrap{
    width: calc(100% - 145px - 28px);
    display: flex;
    align-items: center;
    gap: 26px;
}
.secResult .underArea .graphBar{
    height: 60px;
    transform-origin: left center;
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.secResult .underArea .graphRow.type_standard .graphBar{
    width: min(640px, 100%);
    background: #fff;
}
.secResult .underArea .graphRow.type_takano .graphBar{
    width: min(80px, 100%);
    background: #f60a0a;
}
.secResult .underArea .graphValue{
    font-size: 70px;
    font-weight: bold;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(10px);
    transition: transform 0.9s ease, opacity 0.9s ease;
    padding-bottom: 5px;
}
.secResult .underArea .graphRow.type_takano .graphValue{
    color: #fff;
}
.secResult .underArea .graphValue .unit{
    font-size: 22px;
    margin-left:9px;
}

/* secResult graph animation sequence */
.secResult .underArea .resultGraph.is-animated .graphLabel{
    opacity: 1;
    transform: translateY(0);
}
.secResult .underArea .resultGraph.is-animated .graphRow.type_standard .graphBar{
    transform: scaleX(1);
    transition-delay: 0.9s;
}
.secResult .underArea .resultGraph.is-animated .graphRow.type_takano .graphBar{
    transform: scaleX(1);
    transition-delay: 0.9s;
}
.secResult .underArea .resultGraph.is-animated .graphRow.type_standard .graphValue{
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.5s;
}
.secResult .underArea .resultGraph.is-animated .graphRow.type_takano .graphValue{
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.5s;
}
@media screen and (max-width:767px){
    .secResult{
        padding-top: 40px;
        padding-bottom: 70px;
    }
    .secResult .underArea{
        margin-top: 35px;
    }
    .secResult .underArea .resultGraph{
        max-width: 100%;
    }
    .secResult .underArea .resultGraph::after{
        height: 90px;
        left: 78px;
    }
    .secResult .underArea .graphRow{
        gap: 10px;
    }
    .secResult .underArea .graphRow + .graphRow{
        margin-top: 10px;
    }
    .secResult .underArea .graphLabel{
        width: 70px;
        font-size: 11px;
        letter-spacing: 0;
        transform: translateY(-12px);
    }
    .secResult .underArea .graphBarWrap{
        width: calc(100% - 65px - 10px);
        gap: 8px;
    }
    .secResult .underArea .graphBar{
        height: 30px;
    }
    .secResult .underArea .graphRow.type_standard .graphBar{
        width: min(170px, 100%);
    }
    .secResult .underArea .graphRow.type_takano .graphBar{
        width: min(22px, 100%);
    }
    .secResult .underArea .graphValue{
        font-size: 30px;
        transform: translateY(10px);
        padding-bottom: 3px;
    }
    .secResult .underArea .graphValue .unit{
        font-size: 11px;
        margin-left: 5px;
    }
}

/* secDesign */
.secDesign{
    padding-top: 136px;
    padding-bottom: 64px;
}
.secDesign .underArea{
    margin-top: 48px;
}
.secDesign .underArea .boxList{
    display: flex;
    justify-content: center;
    gap: 40px;
}
.secDesign .underArea .txtTit{
    font-size: 18px;
    line-height: calc(36 / 18);
    letter-spacing: 0.1em;
    font-weight: 900;
    text-align: center;
    margin-top: 22px;
}
@media screen and (min-width:768px){
    .secDesign.lazyloaded{
        background: url(../img/technology/envelope/imgbgDesign.jpg) center top no-repeat #fff;
    }
}
@media screen and (max-width:767px){
    .secDesign{
        padding-top: 34px;
        padding-bottom: 67px;
    }
    .secDesign .underArea{
        margin-top: 34px;
    }
    .secDesign .underArea .boxList{
        flex-direction: column;
        gap: 10px;
    }
    .secDesign .underArea .item{
        display: flex;
        align-items: center;
        gap: 14px;
    }
    .secDesign .underArea .imgBox{
        width: 120px;
        height: 100px;
    }
    .secDesign .underArea .txtBox{
        width: calc(100% - 120px - 14px);
    }
    .secDesign .underArea .txtTit{
        font-size: 13px;
        line-height: calc(20 / 13);
        letter-spacing: 0;
        text-align: left;
        margin-top: 0;
    }
}
/* ▼アニメーション */
.secDesign .underArea .item.jsShow.delay01{
    transition-delay: 0.1s;
}
.secDesign .underArea .item.jsShow.delay02{
    transition-delay: 0.3s;
}
.secDesign .underArea .item.jsShow.delay03{
    transition-delay: 0.5s;
}

/* secMaterial */
.secMaterial{
    padding-top: 136px;
    padding-bottom: 241px;
}
.secMaterial .underArea{
    display: flex;
    justify-content: center;
    gap: 60px;
    margin-top: 48px;
}
.secMaterial .underArea .item{
    max-width: 520px;
}
.secMaterial .underArea .txtTit{
    font-size: 18px;
    letter-spacing: 0.1em;
    font-weight: 900;
    margin-top: 40px;
}
.secMaterial .underArea .txtAbout{
    font-size: 14px;
    line-height: calc(32 / 14);
    letter-spacing: 0.05em;
    margin-top: 21px;
}
@media screen and (max-width:767px){
    .secMaterial{
        padding-top: 34px;
        padding-bottom: 95px;
    }
    .secMaterial .underArea{
        flex-direction: column;
        gap: 34px;
        margin-top: 34px;
    }
    .secMaterial .underArea .item{
        max-width: 100%;
    }
    .secMaterial .underArea .txtTit{
        font-size: 13px;
        letter-spacing: 0;
        margin-top: 15px;
    }
    .secMaterial .underArea .txtAbout{
        font-size: 13px;
        line-height: calc(24 / 13);
        margin-top: 12px;
    }
}
@media screen and (max-width:340px){
    .secMaterial .underArea .txtTit{
        font-size: 12px;
    }
}
/* ▼アニメーション */
.secMaterial .underArea .item.jsShow.delay01{
    transition-delay: 0.1s;
}
.secMaterial .underArea .item.jsShow.delay02{
    transition-delay: 0.3s;
}