@import url("../css/variable.css");

/* トップのみかな？使い回す系 */
/* -------------------------

セクションのレイアウト

-------------------------*/
body,html {
    overflow-x: hidden;
}
#topPage section {
    padding:8.75rem  12.5rem 0; 
}


section#aboutUs,
section#fv,
section#mainMessage{
    padding:0 ;
}

section#client {
    margin-top: 8.75rem;
    padding: 0;
    /* gsapで */
    /* position: relative; */
}
section#ethical {
    margin-top: 8.75rem;
}

section#circle {
    margin-top: 8.75rem;
    
}

#topPage section.splide {
    padding: 0;
}


.section__content {
    margin-top: 8.75rem;
}

.section__content.kankyoBg {
	margin: 8.75rem calc(50% - 50vw) 0;
	width: 100vw;
}

.section__content.serviceList {
    padding-top: 15.75rem;
    display: grid;
    grid-template-columns: repeat(2, 50%);
    justify-content: flex-start;
    row-gap: 5rem;
}
.section__content.circle {
    margin-top: 3.75rem;
}

.section__content.client {
    padding:8.75rem  12.5rem 13rem;
}

.section__content.ethical {
    margin-top: 3.75rem;
}
.section__content.news {
    margin-top: 2.5rem;
}


/* 第二階層サービスページのCSS */

.second-wrapper .section__content.serviceList {
    padding-top: 0;
}

.second-wrapper .section__content.serviceList {
    margin-top: 0;
}


@media screen and (max-width: 1200px) {
    #topPage section {
        padding:8.75rem  3.75rem 0; 
    }
    .section__content.client {
        padding:0 1.3rem 10rem;
        margin-top: 0;
    }

    section#aboutUs,
section#fv,
section#mainMessage{
    padding:0 ;
}
    
}


/* タブレット用 */
@media screen and (max-width: 1024px) {


section#aboutUs,
section#fv,
section#mainMessage{
    padding:0 ;
}

.section__content.client {
    padding:8.75rem 5rem 10rem;
    margin-top: 0;
}

section#client {
    margin-top: 5rem;
    padding: 0;
    /* gsapで */
    /* position: relative; */
}

section#ethical {
    margin-top: 8.75rem;
}

section#circle {
    margin-top: 8.75rem;
    
}

#topPage section.splide {
    padding: 0;
}

.section__content.ethical {
    padding-right: 2.5rem;
    padding-left: 2.5rem;
}

.section__content.serviceList {
    padding-top: 20rem;
}



}
/* スマホ用 */
@media screen and (max-width: 768px) {

    #topPage section {
        padding:5rem  1.87rem 0; 
    }

    section#news {
        padding-bottom: 0;
    }

    section#aboutUs,
section#fv,
section#mainMessage{
    padding:0 ;
}






.section__content.client {
    padding:0;
    margin-top: 0;
}

section#ethical {
    margin-top: 11rem;
}
.section__content.ethical {
    padding-right: 0;
    padding-left: 0;
}

.section__content.serviceList {
    padding-top: 21.75rem;
    margin-top: 10rem;
}

#topPage section.splide {
    padding: 0;
    padding-top: 3rem;
}

.section__content.news {
    margin-top: 0rem;
}


}

/* -----------------------

セクションタイトル

-------------------------*/

/* wrapperが反部になる場合のレイアウト */
.section__wrapper {
    width: 100%;
}
.section__wrapper.half {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 50%;
}

.section__wrapper.center{
    margin: 0 auto;
    text-align: center;
    width: 70%;
}

.section__wrapper.flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.section__wrapper__flexBox {
    width: 70%;
}
.section__wrapper--title.sub {
color: var(--title--deco-navy);
font-family: var(--font--openSans);
font-weight: 700;
letter-spacing: 0.04rem;
font-size: 1rem;
}

.section__wrapper--title.oneline.sub {
    font-size: 1.25rem;
}
.section__wrapper--title.oneline.main {
    font-size: 3rem;
}
.section__wrapper--title.center {
    margin: 0 auto;
    text-align: center;
}
.section__wrapper--title.sub.blue {
    color: var(--title--deco-blue);
}
.section__wrapper--title.main {
color: var(--title-main-navy);
font-size: 2.5rem;
font-weight: 700;
line-height: 3.625rem; /* 145% */
letter-spacing: 0.05rem;
}

.section__wrapper--title span {
    display: block;
}
.section__wrapper--title.white.main {
    color: var(--text-color-w);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 2rem; /* 100% */
    letter-spacing: 0.1rem;
    margin-top: .6rem;
}

.section__wrapper--title.white.main.small {
    font-size: 2rem;
}

.section__wrapper--title.white.sub {
    color: var(--title--deco-lightBlue);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.0625rem;
}

.section__wrapper--title.white.sub.small {
    font-size: 0.87rem;
}

.section__wrapper--text {
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.625rem; /* 173.333% */
letter-spacing: 0.0375rem;
margin-top: 1rem;
}


.section__wrapper--textBold {
font-size: 1.375rem;
font-weight: 700;
line-height: 2rem; /* 145.455% */
letter-spacing: 0.01375rem;
margin-top: 2.5rem;
}
.section__wrapper--text.white,
.section__wrapper--textBold.white {
    color: var(--text-color-w);
}

.section__wrapper  .button-large {
    margin-top: 2.5rem;
}



/* タブレット用 */
@media screen and (max-width: 1024px) {

    /* 二行タイトル */
    .section__wrapper--title.main {
        font-size: 2.5rem;
        }

        /* 一行タイトル */
        .section__wrapper--title.oneline.main {
            font-size: 2.5rem;
        }
        .section__wrapper--title.oneline.sub {
            font-size: 1.125rem;
        }

        /* 白タイトル */
        .section__wrapper--title.white.main {
            font-size: 2.5rem;
        }
        .section__wrapper--title.white.main.small {
            font-size: 1.75rem;
        }

        .section__wrapper--title.white.sub {
            color: var(--title--deco-lightBlue);
            font-size: 0.875rem;
            line-height: 0.875rem;
        }



        /* タイトルコンテンツt 大見出し */
        .section__wrapper--textBold {
            font-size: 1.25rem;
            margin-top: 1rem;
            color: #002C44;
            line-height: 1.75rem; /* 140% */
            }
        
            .section__wrapper--text {
                margin-top: .6rem;
                padding: 0;
                padding-right:1rem;
            }


            .section__wrapper__flexBox {
                width: 60%;
            }

        
}
/* スマホ用 */
@media screen and (max-width: 768px) {

    #aboutUs .section__wrapper.half {
        width: 100%;
    }

    .section__wrapper.center,
    .section__wrapper.half {
        width: 100%;
    }
    .section__wrapper__flexBox {
        width: 100%;
    }

          /* タイトルコンテンツt 大見出し */
          .section__wrapper--textBold {
            margin-top: 1rem;

            }

            .section__wrapper--text {
                padding: 0;
                margin-top: 1rem;
            }

            .section__wrapper--text.margin {
                margin-top: 2rem;
            }


            .section__wrapper--title.main {
                line-height: 2.3rem; 
            }

}





/* ---

トップページニュース 

----*/
.card__content.top-news  {
    padding: 1.25rem;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    border-bottom: var(--card--borderBottom);
}

.card__content.top-news a {
    display: flex;
    flex-direction: row;
    column-gap: 2.5rem;
    width: 100%;
}

.card__content.top-news  .card__img__wrapper img {

width: 100%;
height: 7.27831rem;
object-fit: cover;
aspect-ratio: 5 / 3;
}


/* タブレット用 */
@media screen and (max-width: 1024px) {
    .card__content.top-news  .card__img__wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    }

    .card__content.top-news  {
        padding-bottom: 1.25rem;
    }
    .card__content.top-news a {
        column-gap: 1.25rem;
    }
    #news .card__content .card__inner {
        width: 100%;
    }

}

/* スマホ用 */
@media screen and (max-width: 768px) {
    .card__content.top-news {
        justify-content: center;
    }
    .card__content.top-news a {
        flex-direction: column;
    }
    .card__content.top-news  .card__img__wrapper {
        height: 13rem;
    }
    .card__content.top-news  .card__img__wrapper img {
        width: 100%;
        height: 100%;
    object-fit: cover;
    }

    .card__content.top-news {
        padding: 2rem 0 2.5rem;
    }

    #news .card__content .card__inner {
        row-gap: .61rem;
        width: 100%;
    }
}



      
    
/* ------------------


FV SECTION

--------------------*/

        #fv {
            position: relative;
            top: 0;
            width: 100%;
            height: 100vh;
            overflow: hidden;
        
        }

#fv .fv__messageContent {
    position: absolute;
    top: 68%;
    left: 0;
    transform: translateY(-50%);
    text-align: left;
    z-index: 200;

}
#fv .fv__messageContent.open {
    display: none;
}

#fv .fv__messageContent--main  {
    padding-left: 5.8rem;
    height: 11.6rem;

}

#fv .fv__messageContent--main.pc  {
    display: block;
}
#fv .fv__messageContent--main.sp  {
    display: none;
}

#fv.fv__messageContent--main .js-fadeUp-txt{
    font-size: 4.37rem;
    font-weight: 700;
    color: var(--text-color-w);
    display: flex;
    align-items: center;
}

.js-fadeUp-txt {
    opacity: 0;
}
.js-fadeUp-txt.active {
    opacity: 1;
}

#fv .js-fadeUp-txt {
    overflow: hidden;
}

#fv .js-fadeUp span {
    display:inline-block;
    overflow: hidden;
    font-weight: 700;
    font-size: 4.37rem;
    color: var(--text-color-w);
}

#fv .fv__messageContent--main .title-sp {
    display: none;
}


#fv .js-fadeUp span.active{
    animation: fadeUp-txt .8s  ease forwards;
text-shadow: 4px 4px 16px rgba(0, 44, 68, 0.35);
letter-spacing: 0.30625rem;

   }
   
   @keyframes fadeUp-txt {
   0% {
       transform: translateY(70%);
       opacity: 0;
   
   }

   
   100% {
       transform: translateY(0);
       opacity: 1;

   }
       
   }


#fv .fv__messageContent--sub.hiddenUp-txt {
    margin-top: 7rem;
    text-align: left;
    width: 100%;
    overflow: hidden;

    p {
        padding-left: 6.5rem;
        font-family: var(--font--openSans);
        color: var(--text-color-w);
        font-weight: 400;
        font-size: 1rem;
        font-style: normal;
        letter-spacing: 0.22rem;
        line-height: 0.9;
        opacity: 0;


    }

    .border {
        background: var(--color--white);
        width: 100%;
        height: .5px;
        transform-origin: left;
        opacity: 0;

    }


}

#fv .fv__messageContent--sub.hiddenUp-txt.active {

    p {
        animation: slideIn-txt .8s 1.5s ease forwards;
    }

    .border {
        animation: draw-line .6s .8s ease forwards;
    }
}



@keyframes slideIn-txt {
    0% {

        transform: translateY(150%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    
    }
    
}

@keyframes draw-line {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }
    100% {
        transform: scaleX(100%);
        opacity: 1;
    }
    
}


/* ファーストビュー */
#fv.fv--img {
    transform: scale(1.1);
        width: 100%;
        position: relative;
}
#fv .fv--img.pc {
    display: block;
    height: auto;
    width: 100%;
}
#fv .fv--img.tab,
#fv .fv--img.sp {
    display: none;
}


.fv--img.active {
    transform: scale(1.1);
    animation: imgZoom 3s 4s ease forwards;
}

@keyframes imgZoom {
    0% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1.0);
    }
}

#fv::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(to right, 
    rgba(128, 128, 128, 0) 0%, 
    rgba(28, 68, 94, 0.47) 22%, 
    rgba(41, 86, 109, 0.81) 40%, 
    rgba(49, 76, 94, 0.29) 55%, 
    rgba(49, 76, 94, 0) 60%
);
width: 100%;
height: 100vh;
z-index: 5;
opacity: .5;
}

/* タブレット用 */
@media screen and (max-width: 1024px) {
    #fv .fv--img.tab {
        display: block;
        transform: scale(1.1);
    }
    #fv .fv--img.pc,
    #fv .fv--img.sp {
        display: none;
    }


    #fv {
        position: relative;
        top: 0;
        width: 100%;
        height: 100%;
    
    }
    #fv .fv__messageContent {
        position: absolute;
        top: 70%;
        left: 0;
        transform: translateY(-50%);
        text-align: left;
        z-index: 200;
    }

    #fv .js-fadeUp span {
        font-size: 3rem;
    }

    #fv .fv__messageContent--sub.hiddenUp-txt {
        margin-top: 5rem;
    }



    
}

/* スマホ用 */
@media screen and (max-width: 768px) {

    #fv .fv--img.sp {
        display: block;
        width: 100%;
        transform: scale(1.1);
        height: 100vh;
    }
    #fv .fv--img.pc,
    #fv .fv--img.tab {
        display: none;
    }


#fv .fv__messageContent--main.pc  {
    display: none;
}
#fv .fv__messageContent--main.sp  {
    display: block;
}

    #fv .fv__messageContent {
        position: absolute;
        top: 54%;
        left: -5%;
        transform: translateY(-50%);
        text-align: left;
        z-index: 200;
    }
    #fv .fv__messageContent--main  {
        padding-left: 3rem;
    }

    #fv .fv__messageContent--main .title-pc {
        display: none;
    }
    #fv .fv__messageContent--main .title-pc {
        display: block;
    }

    #fv .fv__messageContent--sub.hiddenUp-txt p {
        padding-left: 3.5rem;
    }

    #fv .fv__messageContent--sub.hiddenUp-txt {
        margin-top: 12rem;
    }

    #fv .js-fadeUp span.active{
    letter-spacing: 1px;
    line-height: 1.3
    ;
       }


       #fv .js-fadeUp span.active{
    text-shadow: 2px 2px 10px rgba(0, 44, 68, 0.35);
       
}
}


/* -------------

メインメッセージセクション

----------------*/

section#mainMessage {
    display: block;
    height: 70svh;
    background-color: #FFF;
    position: relative;
}



#mainMessage .gsap-PinscrollWrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    max-width: 1200px;
    margin: 0 auto;
    height:    100%;
    padding: 0 ;
    position: relative;
    overflow: visible; 
}

#mainMessage .gsap-PinscrollWrap__fixedTxt {
    width: 60rem;
    height: 100%;
    padding-top: 0;
    position: sticky;
    top: 35%;
    left: 10%;


}
#mainMessage .gsap-PinscrollWrap__fixedTxt::after {
    content: "";
    width: 100%;
    height: 14rem;
    position: absolute;
    top: 50%;
    left: -20%;
    transform: translateY(-50%);
 
}

#mainMessage .scrollTxt {
    margin-top: 8rem;
    width: 39%;
}
#mainMessage .scrollTxt p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
    color:var(--text-color-normal);
    font-family:  "noto-sans-cjk-jp", sans-serif;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.8125rem; 
}



#mainMessage .scrollTxt__inner {
    transform-origin: top;
}


#mainMessage .fadeIn {
    opacity: 0;
    -webkit-transition: all 1s ease-in;
    transition: all 1s ease-in;
    display: block;
}
#mainMessage .fadeIn.active {
    opacity: 1;   
}
#mainMessage .messageInner__content {
    font-size: 7rem;
    position: absolute;
    top: 50%;
    padding-left: 7%;
    transform: translateY(-50%);
}
#mainMessage .messageInner__content--text.main {
    color: var(--color--normal);
    font-family:  "noto-sans-cjk-jp", sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 3.625rem; /* 145% */
    letter-spacing: 0.05rem;
}

#mainMessage .messageInner__content--text.main span {
    display: block;
}

#mainMessage .messageInner__content--text.sub {
    color: #00547D;
font-size: 1rem;
font-style: normal;
font-weight: 700;
letter-spacing: 0.04rem;
display: block;

}


@media screen and (max-width: 1500px) {

    section#mainMessage {
        display: block;
        height: 100%;
        background-color: #FFF;
        position: relative;
    }
    

    #mainMessage .gsap-PinscrollWrap {
        justify-content: space-between;
        height: 100%;
    }
    
    #mainMessage .scrollTxt {
        margin-top: 7em;
        width: 40%;
    }

    #mainMessage .gsap-PinscrollWrap__fixedTxt {
        width: 60rem;
        height: 100%;
        padding-top: 0;
        position: static;
        top: 30%;
        left: 43%;
        padding-left: 5rem;
    
    
    }

    #mainMessage .gsap-PinscrollWrap__fixedTxt::after {
        content: "";
        display: block;
        background:url('https://test-evalue.com/wordpress/wp-content/themes/env-coporatesite/src/img/top/mainText.svg') no-repeat;
        width: 100%;
        height: 14rem;
        top: 50%;
        left: -3%;
        transform: translateY(-50%);
     
    }

    #mainMessage .messageInner__content {
        font-size: 7rem;
        position: absolute;
        top: 50%;
    }
}

@media screen and (max-width: 1200px) {
#mainMessage .gsap-PinscrollWrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    padding: 0 1rem 0 0rem;
    position: relative;
    overflow: visible; 
}

#mainMessage .scrollTxt {
    padding-right: 2rem;
}

#mainMessage .scrollTxt p {
    margin-bottom: 2rem;
}

#mainMessage .gsap-PinscrollWrap__fixedTxt {
    width: 75%;
}
}

/* タブレット用 */
@media screen and (max-width: 1024px) {
    section#mainMessage  {
        margin-top: 0;
        height: 100%;
        width: 100%;
    }

    #mainMessage .messageInner__content--text.main {
        font-family:  "noto-sans-cjk-jp", sans-serif;
        font-size: 2rem;
        padding-left: -6rem;
    }

    /* make new standard */

    #mainMessage .gsap-PinscrollWrap::after {
        content: "";
        display: block;
        background:url('https://test-evalue.com/wordpress/wp-content/themes/env-coporatesite/src/img/top/MAKE_NEW_STANDARD-tab.svg') no-repeat;
        width:40rem;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 40%;
        transform: translate(-50%,-50%);
        margin-top: 6rem;
    }
 
    #mainMessage .gsap-PinscrollWrap__fixedTxt::after {
        display: none;
     
    }

    #mainMessage .scrollTxt {
        width: 50%;
    }

    #mainMessage .messageInner__content {
        top: 50%;
        padding-left: 0
        ;
    }


}

/* スマホ用 */
@media screen and (max-width: 768px) {

    #mainMessage .messageInner__content {
        font-size: 4.3rem;
        display: block;
        position: static;
        top: 0;
        left: 0;
        transform: translateY(0);
        margin-left: 0;
      
    }
    #mainMessage .messageInner__content--text.main {
        font-family:  "noto-sans-cjk-jp", sans-serif;
        line-height:2.3rem;
        font-size: 2rem;

    }

    section#mainMessage {
        margin-top: 3.56rem;
        padding:0  1.88rem;
        height: auto;
    }

    #mainMessage .gsap-PinscrollWrap {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        height: auto;
        padding: 0;
        position: relative;
        overflow: visible; 
    }

    #mainMessage .gsap-PinscrollWrap::after {
        content: "";
        display: block;
        background: url('https://test-evalue.com/wordpress/wp-content/themes/env-coporatesite/src/img/top/main-message-sp-MAKE_NEW_STANDARD..svg') no-repeat;
        background-size: 100%;
        width: 120%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        margin-top:0;
    }


    #mainMessage .gsap-PinscrollWrap__fixedTxt {
        position: initial;
        width: 100%;
        height: auto;
        padding-left: 0rem;
    
    
    }

    #mainMessage .scrollTxt p {
        margin-bottom: 2rem;
    }

    #mainMessage .scrollTxt {
        width:100%;
    }

}



/* ーーーーーーーーーーーー

about us SECTION

ーーーーーーーーーーーーーーー*/
section#aboutUs {
    display: flex;
    align-items: center;
    margin-top: 2rem;
    width: calc(100% - 6rem);
    margin-left: 6rem;
    padding: 4.8rem 1.9rem 4.8rem 7.5rem;
    border-radius: 4rem 0rem 0rem 4rem;
    background: linear-gradient(270deg, rgba(245, 205, 159, 0.60) 0%, rgba(214, 225, 222, 0.60) 50%, rgba(198, 236, 255, 0.60) 100%);
    transition: all 2s ease;
    position: relative;
}

section#aboutUs::after {
    content: "";
    background: #FFF;
    width: 100%;
    height: 100%;
    transform: scaleX(100%);
    transform-origin: left;
    transition: all 1s ease-in;
    position: absolute;
    top: 0;
    right: 0;
}

section#aboutUs.active::after {
    transform: scaleX(0);
}


#aboutUs .button-large {
    margin-top: 2.5rem;
}

.splide {
    height: auto;

}


/* タブレット用 */

@media screen and (max-width: 1500px) {
    section#aboutUs {
        display: flex;
        align-items: center;
        margin-top: 10rem;
        width: calc(100% - 6rem);
        margin-left: 6rem;
        padding: 4.8rem 1.9rem 4.8rem 7.5rem;
        border-radius: 4rem 0rem 0rem 4rem;
        background: linear-gradient(270deg, rgba(245, 205, 159, 0.60) 0%, rgba(214, 225, 222, 0.60) 50%, rgba(198, 236, 255, 0.60) 100%);
        transition: all 2s ease;
        position: relative;
    }
}
@media screen and (max-width: 1024px) {

    section#aboutUs {
        display: flex;
        align-items: center;
        margin-top: 0rem;
        width: calc(100% - 2.56rem);
        margin-left: 2.56rem;
        padding: 4.8rem 1.25rem 4.8rem 4.52rem;
    }
    
}
/* スマホ用 */
@media screen and (max-width: 768px) {
    section#aboutUs {
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin-top: 5rem;
        width: 100%;
        margin-left: 0;
        padding: 4.8rem 1.25rem 4.8rem 2.56rem;
    }
    #aboutUs .button-large {
    margin-top: 2.5rem;
    width: 100%;
    text-align: center;
}
.splide {
    height: auto ;

}

#aboutUs .section__wrapper--title.main {
    font-size: 2rem;
}
}
/* -----------------------

service SECTION

--------------------------*/

#service .section__content.kankyoBg .section__wrapper {
    margin-top: 0;
}

#service .service__imgContent {
    padding-top: 2.5rem;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    transform: translateY(20%);

    /* width: 41.34431rem;
    height: 44.91594rem; */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(198, 223, 239, 0.22) 49.5%, rgba(198, 223, 239, 0.16) 73.5%, rgba(255, 255, 255, 0.00) 100%);

    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#service .service__imgContent::before {
    content: "";
    display: block;
    background: url('https://test-evalue.com/wordpress/wp-content/themes/env-coporatesite/src/img/top/img-service-traiangle.png')no-repeat;
    background-size: contain;
    background-position:center ;
    width: 26%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
}

#service .service__imgContent__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

#service .service__imgContent__inner.right,
#service .service__imgContent__inner.left {
    row-gap: 1.22rem;
}

#service .service__imgContent__inner.center {
    row-gap: 17rem;
    transform: translateY(-60%);
    align-self: flex-start;
}

#service .service__imgContent__inner--circle {
    border-radius: 50%;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
width: 11rem;
height: 11rem;
}
#service .service__imgContent__inner--circle img {
    width: auto;
    max-height: 6.5rem;
    margin-bottom: .5rem;
}
#service .service__imgContent__inner--circle.active {
    box-shadow: 2px 2px 10px rgba(0, 74, 130, 0.20);
}

#service .service__imgContent__inner--circle.creative {
    transform: translateX(30%);
}

#service .service__imgContent__inner--circle.hourei {
    transform: translateX(-30%);
}

/* ーーーーーー
hover　イメージ 
ーーーーーーーーーー*/

#service .serviceList__wrapper:hover .circle__button {
    transform: scale(1.2);
}
#service .serviceList__wrapper:hover .circle__button img {
    transform: translate(30%,0);
}

#service .serviceList__wrapper:hover .serviceList__title__inner,
#service .serviceList__wrapper:hover .serviceList__textContent
 {
    opacity: 0.8;
}

#service .serviceList__wrapper:hover .serviceList__img img {
    opacity: 0.8;
    transform: scale(1.1);
}

/* サービスページできるまでhoverさせない */
#service #creaitive.serviceList__wrapper:hover .serviceList__img img,
#service #human-resources.serviceList__wrapper:hover .serviceList__img img {
    opacity: 1;
    transform: scale(1.0);
}


#service .serviceList__wrapper:hover .serviceList__img.system img{
    opacity: 0.8;
    /* transform: scale(1.1) translateY(-16%); */
}


@media screen and (max-width: 1500px) {
    #service .service__imgContent::before {
        content: "";
        display: block;
        background: url('https://test-evalue.com/wordpress/wp-content/themes/env-coporatesite/src/img/top/img-service-traiangle.png')no-repeat;
        background-size: contain;
        background-position:center ;
        width: 35%;
        height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
}

/* タブレット用 */
@media screen and (max-width: 1024px) {
    #service .service__imgContent__inner--circle {
        width: 11.54238rem;
        height: 11.29638rem;
    }

    #service .service__imgContent {
        margin-top: 1.5rem;
    }

    #service .service__imgContent::before {
        width: 55%;
    }
    #service .service__imgContent__inner.center {
        row-gap: 12rem;
    }
}
/* スマホ用 */
@media screen and (max-width: 768px) {

    #service .service__imgContent__inner--circle {
        width: 7.05369rem;
        height: 6.90338rem;
    }
    #service .service__imgContent::before {
        width: 75%;
    }
    #service .service__imgContent__inner.center {
        row-gap: 9.5rem;
    }

    #service .service__imgContent {
        padding-top: 2rem;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        transform: translateY(5%);
    }    

    
    #service .service__imgContent__inner.right,
#service .service__imgContent__inner.left {
    row-gap: 1rem;
}


#service .service__imgContent__inner--circle img {
    width: auto;
    max-height: 4.5rem;
    margin-bottom: .5rem;
}


#service .service__imgContent__inner--circle.creative {
    transform: translateX(30%);
}

#service .service__imgContent__inner--circle.hourei {
    transform: translateX(-30%);
}


}

/* -------------------

環境コンサルティングからのレイアウト

-------------------------*/
#service .section__content.kankyoBg   {
    position: relative;
    height: 27rem;
}
#service .section__content.kankyoBg .parallaxImg__wrapper {
    overflow: hidden;
    width: 100vw;
    height: 27rem;
    position: relative;

 
}
#service .section__content.kankyoBg .parallaxImg__wrapper img {
    height: auto;
    object-position: center;
    object-fit: cover; 
    transform: scale(1.3);;     

  }

  #service .section__content.kankyoBg .parallaxImg__wrapper::after {
    content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(18, 60, 80, 0.84) 0.73%, #2F363A 10.4%, rgba(12, 61, 85, 0) 50%, rgba(255, 255, 255, 0.00) 50%);
  

  z-index: 1;
  pointer-events: none;

  }

#service .section__content.kankyoBg .section__wrapper {
    position: absolute;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
    width: 40%;
    z-index: 3;
  }


  /* support list content */

  #service  .section__content.kankyoBg .supportList__content {
    padding:2.5rem 12.5rem ;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: solid 1px #D7D7D7;
    column-gap: 1rem;
  }

  #service .section__content.kankyoBg .support__item {
    display: grid;
    place-items: center left;
    grid-template-columns: repeat(1, auto);
    flex:1fr;
    align-self: flex-start;
    list-style: '・';
  }

  #service .section__content.kankyoBg .support__item_doubleGate {
    display: flex;
    flex-direction: column;
  }

  #service .section__content.kankyoBg .support__item_doubleGate ul {
    list-style: '・';
  }
  #service .section__content.kankyoBg .support__item_doubleGate p {
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5625rem;
    letter-spacing: 0.01875rem;
  }

  #service .section__content.kankyoBg .suppprt__title {
font-size: 1.25rem;
font-weight: 700;
letter-spacing: 0.025rem;
  }
  #service .section__content.kankyoBg .support__item p {
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.5625rem; /* 166.667% */
letter-spacing: 0.01875rem;
  }


  @media screen and (max-width: 1300px) {
        /* サービス一覧のリスト　レイアウト */
    #service  .section__content.kankyoBg .supportList__content {
        padding:2.5rem 5rem ;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        row-gap: 1.25rem;
        column-gap: 1rem;
    }
  }


/* タブレット用 */
@media screen and (max-width: 1024px) {
    #service .section__content.kankyoBg   {
        height: 30.875rem;
    }
    #service .section__content.kankyoBg .parallaxImg__wrapper {
        height: 30.875rem;
    }

    /* 環境コンサルティングの中身 */
    #service .section__content.kankyoBg .section__wrapper {
        left: 8%;
      }

      #service .section__content.kankyoBg .support__item {
        grid-template-columns: repeat(2, 1fr);
        place-items: flex-start;
        column-gap: .8rem;
        width: 40%;
      }
      
}
/* スマホ用 */
@media screen and (max-width: 768px) {
    #service .section__content.kankyoBg   {
        position: relative;
        margin-top: 5rem;
        height: 51rem;
    }


    #service .section__content.kankyoBg .parallaxImg__wrapper {
        height: 51rem;
    }

    #service .section__content.kankyoBg .parallaxImg__wrapper img {
        transform: scale(1.2) translateY(40%);  
        height: 51rem;  
      }

      #service .section__content.kankyoBg .section__wrapper {
        position: absolute;
        top: 27%;
        left: 10%;
        transform: translateY(-50%);
        width: 80%;
        z-index: 3;
      }

      #service .section__content.kankyoBg .parallaxImg__wrapper::after {
      background: linear-gradient(to bottom, #2F363A 0%,  rgba(12, 61, 85, 0.30) 25%, rgba(255, 255, 255, 0.00) 100%);    
      }

      #service .section__content.kankyoBg .support__item {
        grid-template-columns: repeat(1, 1fr);
        align-self: center;
        width: 90%;
      }
      #service .section__content.kankyoBg .support__item_doubleGate {
        width: 90%;
      }
      #service  .section__content.kankyoBg .supportList__content {
        padding:2.5rem 1rem ;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        row-gap: 1.25rem;
        width: 100%;
        margin: 0 auto;
      }

}

  /* ---------------------
  
  service list CONTENT
  
  -------------------------*/

  #service .section__content.serviceList {
    /* display: grid;
    grid-template-columns: repeat(2, 50%);
    justify-content: flex-start;
    row-gap: 5rem; */

  }


#service .serviceList__wrapper {
    width:90%;
}

#service .serviceList__wrapper a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: 1rem;
    width: 100%;
    /* リンク入れたら削除する */
    cursor: auto;

}
#service .serviceList__wrapper.left {
    justify-self: start; /* 左寄せ */
}
#service .serviceList__wrapper.right {
    justify-self: end; /* 左寄せ */
}

#service  .serviceList__wrapper  .serviceList__title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }

  #service .serviceList__title__inner {
    width: 80%;
  }

  #service .serviceList__title__inner  .serviceList__title--deco {
    color: var(--titleService--deco);
    font-family: var(--font--openSans);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.0175rem;
  }

  #service .serviceList__title__inner h3 {
font-size: 2rem;
font-weight: 700;
line-height: 2rem; /* 100% */
letter-spacing: 0.08rem;
margin-top: .5rem;
  }



  #service .serviceList__wrapper .serviceList__img {
    border-radius: 0.5rem;
    width: 100%;
/*     max-height: 16rem; */
	  aspect-ratio: 5 / 3; /* 固定のアスペクト比を設定 */
    overflow: hidden;
    box-shadow: var(--dropShadow--card);

  }

  #service .serviceList__wrapper .serviceList__img .degital::after {
    content: "";
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(90deg, rgba(0, 84, 125, 0.80) 0%, rgba(0, 84, 125, 0.30) 60.64%, rgba(0, 84, 125, 0.50) 100%);

  }


  #service .serviceList__wrapper .serviceList__img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: .3s ease all;
  }
  /* #service .serviceList__wrapper .serviceList__img.system img{
        transform: translateY(-16%);
  } */
  #service .serviceList__textContent {
    flex-grow: 1;
  }
  #service .serviceList__textContent--title  {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 2rem; /* 145.455% */
    letter-spacing: 0.01375rem;
    margin-bottom: .3rem;
  }
  #service .serviceList__textContent--detail {
font-size: 0.9375rem;
font-weight: 400;
line-height: 1.625rem; /* 173.333% */
  }


  /* タブレット用 */
@media screen and (max-width: 1024px) {
    #service .serviceList__wrapper a {
        row-gap: .75rem;
        width: 100%;
    }

    #service .serviceList__title__inner {
        min-height: 5rem;
    }
  #service .serviceList__title__inner h3 {
    font-size: 1.75rem;
    margin-top: 0;
      }

      #service .serviceList__title__inner  .serviceList__title--deco {
        font-size: 0.75rem;
      }

      #service .serviceList__wrapper .serviceList__img.system img{
        transform: translateY(0);
  }
}
/* スマホ用 */
@media screen and (max-width: 768px) {

    #service .section__content.serviceList {
        display: grid;
        grid-template-columns: repeat(1, 100%);
        justify-content: center;
        align-items: flex-start;
        row-gap: 3.75rem;
        column-gap: 5rem;
    
      }
      #service .serviceList__title__inner {
        min-height: auto;
    }
      #service .serviceList__wrapper.left,
      #service .serviceList__wrapper.right {

        justify-self: center; /* 左寄せ */
      }

      #service .serviceList__wrapper .serviceList__img {
        margin-bottom: .5rem;
      }

      #service .serviceList__wrapper {
        width:100%;
    }


    #service .serviceList__textContent--title  {
        font-size: 1.25rem;
      }




}



  /* ----------------------
  
  client SECTION        
  
  -------------------------*/

  #client {
    background:  url('https://test-evalue.com/wordpress/wp-content/themes/env-coporatesite/src/img/top/BG-client2.webp') ;
    mix-blend-mode: multiply;
    background-repeat: no-repeat;
    border-radius: 4rem 4rem 0rem 0rem;
    background-size: cover;
    background-position: bottom center;
    width: 100%;
    height: 100%;
    position: relative;
  }


  #client .section__content.client  {
    width: 100%;

  }


#client .clientLogo__content {
    margin-top: 3.75rem;
    width: inherit;
    margin-bottom: 13.19rem;
}

#client .clientLogo__content .clientLogo__content--inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    row-gap: .75rem;
    place-items: center; 

}
#client .clientLogo__content--inner .clientLogo__wrapper {
    background: #FFF;
    width: 90%;
    height: 5rem;
    box-shadow: var(--dropShadow-logo);
    display: flex;
    align-items: center;
    justify-content: center;
}
#client .clientLogo__content .clientLogo__content--inner  .clientLogo__wrapper img {
    max-width: 11rem;
    height: 2.3rem;
    object-fit: contain;
    box-shadow: none;
}


#client .makenewImg.pc{
    display: block;
    position: absolute;
    bottom: -10%;
    left: 0;
}

#client .makenewImg.sp {
    display: none;
}


/* タブレット用 */
@media screen and (max-width: 1024px) {
    #client .clientLogo__content .clientLogo__content--inner {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    
        row-gap: .75rem;
        place-items: center; 
    
    }

    #client .clientLogo__content {
        margin-bottom: 8rem;
    }
    

}
/* スマホ用 */
@media screen and (max-width: 768px) {

    #client {
        border-radius: 2rem 2rem 0rem 0rem;
    }

    #client .section__wrapper.flex  {
        flex-direction: column;
        align-items: center;
    }

    #client .clientLogo__content .clientLogo__content--inner {
        grid-template-columns: repeat(2, 1fr);
        row-gap: .62rem;   
        column-gap: .62rem;
    }

    #client .clientLogo__content--inner .clientLogo__wrapper {
        background: #FFF;
        width: 100%;
        height: 5rem;
    }


#client .clientLogo__content {
    margin-top: 2.5rem;
}

#client .makenewImg.pc{
    display: none;
}
#client .makenewImg.sp{ 
    display: block;
    position: absolute;
    bottom: -10%;
    left: 50%;
    width: 90%;
    transform: translateX(-50%);
}

#client .clientLogo__content .clientLogo__content--inner img {
    width: 90%;
}

#client .clientLogo__content .clientLogo__content--inner  .clientLogo__wrapper img {
    /* max-width: 9rem; */
    height: 1.7rem;
    object-fit: contain;
    box-shadow: none;
}


}



/* ---------------------------

ethical SECTION

---------------------------*/
#ethical .section__content.ethical {
    display: grid;
    height: auto;
    grid-template-columns: 1fr 1fr;    
    grid-column-gap: 2.5rem;
}


#ethical  .card__content.main {
    grid-row: span 3; 
    justify-content: flex-start;
}

#ethical  .section__content.ethical .card__content__right {  
    display: grid;
    grid-template-rows: 1fr;
    grid-row-gap: 1.5rem;

}

#ethical  .section__content.ethical .card__content__right .card__content .card__inner {
    width: 50%;
}

#ethical .card__content__right .card__content a {
    display: flex;
    flex-direction: row;
    column-gap: 1.25rem;
    width: 100%;


}

#ethical .card__content__right .card__content a  img {
    width: 100%;
    height: 7.27831rem;
    object-fit: cover;
    aspect-ratio: 5 / 3;
}

#ethical .card__content__right .card__content {
    border-bottom: var(--card--borderBottom);
    padding-bottom: 2.5rem;
}

#ethical .button-large  {
    margin: 3.75rem auto 0;
    display: block;
    text-align: center;
}


/* タブレット用 */
@media screen and (max-width: 1024px) {
    #ethical .section__content.ethical {
        display: grid;
        height: auto;
        grid-template-columns: 1fr;    
        grid-column-gap: 2.5rem;
        grid-row-gap: 2.5rem;
    }

    #ethical  .section__content.ethical .card__content__right {  
        grid-row-gap: 1.5rem;
    
    }
    

    #ethical .card__content__right .card__content {
        padding: 0 1.25rem 1.5rem;

    }

    #ethical  .card__content__right .card__content .card__img__wrapper {
        width: 40%;
    }
    #ethical .card__content__right .card__content a  img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    
 
}
/* スマホ用 */
@media screen and (max-width: 768px) {
    #ethical .card__content__right .card__content a {
        display: flex;
        flex-direction: column;
    }
    #ethical .card__content__right .card__content .card__img__wrapper {
        width: 100%;
        height: 13rem;
    }


#ethical  .section__content.ethical .card__content__right .card__content .card__inner {
    width: 100%;
}
}#ethical .card__content__right .card__content  {
    padding: 0 0 1.5rem;
}


/* -----------------------


circle SECTION

-------------------------------*/

section#circle {
    margin-right: 5rem;
    width: calc(100% - 5rem);
    padding: 8.75rem 7.5rem  8.75rem 12.5rem;
    border-radius: 0rem 4rem 4rem 0rem;
    background: rgba(2, 151, 224, 0.10);
    position: relative;
}
section#circle::after {
    content: "";
    background: #FFF;
    width: 100%;
    height: 100%;
    transform: scaleX(100%);
    transform-origin: right;
    transition: all 1s ease-in;
    position: absolute;
    top: 0;
    left: 0;
}

section#circle.active::after {
    transform: scaleX(0);
}

#circle .section__content.circle {
    max-width: 1200px;
    /* width: 100%; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    column-gap: 3%;
}

#circle .circle__wrap{
    height: 32.65419rem;
    width: calc(100% / 3);
    border-radius: var(--circleCard--borderRadius);
    box-shadow: var(--dropShadow--card);
    overflow: hidden;
    position: relative;
}

#circle .circle__wrap__BG {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: .3s ease all;
}
#circle .circle__wrap:hover .circle__wrap__BG {
    transform: scale(1.1);
}

#circle .circle__wrap .circle__button{
    transition-delay: .3s;
}
#circle .circle__wrap:hover .circle__button {
    transform: scale(1.2);
}

#circle .circle__wrap:hover .circle__button img {
    transform: translate(30%,0);
}

@media screen and (max-width: 1500px) {
    #circle .circle__wrap{
        height: 26.65419rem;
        width: calc(100% / 3);
        border-radius: var(--circleCard--borderRadius);
        box-shadow: var(--dropShadow--card);
        overflow: hidden;
        position: relative;
    }
}

/* タブレット用 */
@media screen and (max-width: 1024px) {
    section#circle {
        margin-right: 2.56rem;
        width: calc(100% - 2.56rem);
        padding: 8.75rem 3.75rem;
    }


    #circle .section__content.circle {
        width: calc(100% - 3%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        column-gap: 3%;
        row-gap: 2.5rem;
    }


    #circle .circle__wrap{
        height: 26.65419rem;
        width: calc(100% / 2 - 3%);
        border-radius: var(--circleCard--borderRadius);
        overflow: hidden;
        position: relative;
    }

    #circle  .circle__wrap {
        flex: 1 1 calc(50% - 1.5%); /* 2つを横並びにする */
        max-width: calc(50% - 1.5%); /* 横幅を50%に調整 */
      }
    
      /* 最後の1つを下に持ってきて中央寄せ */
      #circle .circle__wrap:nth-child(3) {
        flex: 1 1 calc(100% / 2 - 3%); /* 上と同じサイズ */
        max-width: calc(100% / 2 - 3%);
        margin-left: auto; /* 左右中央寄せ */
        margin-right: auto;
      }

}
/* スマホ用 */
@media screen and (max-width: 768px) {
    section#circle {
        margin-right: 5rem;
        width: 100%;
        padding: 6.25rem 2.5rem ;
   
    }
    #circle  .circle__wrap {
        flex: none;
        max-width: 100%;
      }
      #circle .circle__wrap:nth-child(3) {
        flex: none;
        max-width: 100%;
      }

    #circle .section__content.circle {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        column-gap: 0;
        row-gap: 2.5rem;
    }

    #circle .circle__wrap{
        height: 26.65419rem;
        width: 100%;
        border-radius: var(--circleCard--borderRadius);
        overflow: hidden;
        position: relative;
    }
    
}




/*  ---
シャイナーズ背景
------------------ */

#circle .circle__wrap.shiners .circle__wrap__BG {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://test-evalue.com/wordpress/wp-content/themes/env-coporatesite/src/img/second/img-cicle-shiners.webp') no-repeat;

    background-size: cover;
    /* background-size: 200%; */
    background-position: 50% 80%;
    transition: .3s ease all;
}
#circle .circle__wrap.shiners .circle__wrap__BG::after {
    content: "";
    display: block;
    background: linear-gradient(to right, rgba(59, 22, 22, 0.1) 0%, rgba(84, 24, 24, 0.27) 44%, rgba(49, 15, 15, 0.5) 69%, rgba(255, 255, 255,0) 100%);
    background-blend-mode: multiply;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transition: .3s ease all;
}

#circle .circle__wrap.shiners:hover .circle__wrap__BG::after {
    opacity: 0.7;
}

/* -------
ランナーズ背景 
-----------------*/
#circle .circle__wrap.run .circle__wrap__BG {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://test-evalue.com/wordpress/wp-content/themes/env-coporatesite/src/img/second/secibd-bottomImg-circle.webp') no-repeat;
    background-position: 70% 50%;
    background-size: cover;
    transition: .3s ease all;
    
}

#circle .circle__wrap.run .circle__wrap__BG::after {
    content: "";
    display: block;
    opacity: 0.4;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(145, 199, 228, 0.15) 24%, rgba(83, 167, 212, 0.05) 59.1%, rgba(36, 118, 180, 1) 100%);
    mix-blend-mode: multiply;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transition: .3s ease all;
}
#circle .circle__wrap.run:hover .circle__wrap__BG::after {
    opacity: 0.9;
}
/*-------
 一歩千金　背景 
 -------------------*/
#circle .circle__wrap.ippu .circle__wrap__BG {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://test-evalue.com/wordpress/wp-content/themes/env-coporatesite/src/img/second/img-circle-ippusenkin.webp') no-repeat;
    background-size: 350%;
    background-position: 48% 70%;
    transition: .3s ease all;
}

#circle .circle__wrap.ippu .circle__wrap__BG::after {
    content: "";
    display: block;
    opacity: 0.5;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #021018 100%);
    mix-blend-mode: multiply;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    transition: .3s ease all;
}

#circle .circle__wrap.ippu:hover .circle__wrap__BG::after {
    opacity: 0.7;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #021018 100%);
}

#circle .circle__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between; 
    height: 100%;
}

#circle .circle__wrap a {
    padding: var(--circleCard--padding);
    display: block;
    height: 100%;
    width: 100%;
}
#circle .circle__content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#circle .circle__content--text span{
    display: block;
    color: var(--text-color-w);

}
#circle .circle__content--text span:first-child {
font-size: 0.875rem;
font-weight: 500;
line-height: 0.875rem; /* 100% */
letter-spacing: 0.035rem;
}
#circle .circle__content--text span:last-child {
    margin-top: .2rem;
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 2rem; /* 145.455% */
    letter-spacing: 0.01375rem;
    }

/* -----------------------


news SECTION

---------------------------*/

#news .section__content.news {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    column-gap: 2.5rem;
}

#news .button-large {
    width: 20%;
}

#news .content__wrapper__news {
    width: 80%;
}
#news .card__img__wrapper {
    aspect-ratio: 5 / 3;
}

/* タブレット用 */
@media screen and (max-width: 1024px) {

    #news .section__content.news {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        column-gap: 2.5rem;
        row-gap: 3.75rem;
    }

    #news .content__wrapper__news {
        display: flex;
        flex-direction: column;
        grid-template-rows: repeat(5, 1fr);
        padding: 0 2.5rem;
        width: 98%;
    }

    #news .card__img__wrapper {
        width: 40%;
    }

    #news .button-large {
        width: auto;
    }
}
/* スマホ用 */
@media screen and (max-width: 768px) {
    #news .card__img__wrapper {
        width: 100%;
    }
    #news .content__wrapper__news {
        padding: 0;
        width: 100%;
    }
}



/* ---------------------

banner SECTION

-----------------------*/
.banner__content {
    position: relative;
    transition: .3s ease all;
}
.banner__imgWrapper {
    overflow: hidden;
    border-radius: 0.5rem;
    width: 100%;
    height: 19rem;
    position: relative;
    cursor: pointer;
    margin:  0 auto;
}

.banner__imgWrapper img {
    width: 100%;
    transition: .3s ease all;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -40%);
    


}

.banner__imgWrapper::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: .3s ease all;
    pointer-events: none;
   
}

.banner__content .section__wrapper {
    padding-bottom: 1rem;
}


.banner__content:hover img {
    transform: translate(-50%, -40%) scale(1.1);
}
.banner__content:hover .button-large.white {
    background: var(--button-bg-white-hover);
    color: var(--text-color-normal);
    border: solid 1.5px var(--button-border-white);
  }


    
  .banner__content:hover .button-large span::after{
    background: url('https://test-evalue.com/wordpress/wp-content/themes/env-coporatesite/src/img/common/icon-arrow-navy.svg')no-repeat;
    background-position: center center;
    background-size: contain;
    width: 1rem;
    height: 1rem;
    transform: translate(30%,0);
  }

.banner__content .banner__body {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;

}


.banner__content .button-large {
    margin-top: 1rem;
}



/* タブレット用 */
@media screen and (max-width: 1024px) {

    #banner .banner__content .banner__body {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #banner .banner__body .button-large.white {
        display: inline-flex;
        width: auto;
    }

}





/* layerd animationのCSS */

.js-section {
    position: relative;
    width: 100%;
  }
  

  .js-section.is-active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
  }
  

 #service .section-inner {
    width: 100%;

  }

  #client {
    position: relative;
    z-index: 10; /* serviceの固定要素より前面に表示 */
  }
  



    /* Fade In Animation */
    .fade-in {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease, transform 0.6s ease;
      }
      
      .fade-in.visible {
        opacity: 1;
        transform: translateY(0);
      }