.pc-only {
    display: block;
}
.mbSp-only {
    display: none;
}
.double-gate-ttl {
    text-align: center;
    font-family: "Open Sans";
    font-size: 2.625rem;
    font-weight: 700;
    line-height: 1;
}
@media (max-width:1200px) {
    .pc-only {
        display: none;
    }
    .mbSp-only {
        display: block;
    }
}
.double-gate-subttl {
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1rem;
    font-weight: 400;
    margin-top: .5rem;
}
@media screen and (max-width: 768px) {
    .double-gate-subttl {
        margin-top: .2rem;
    }
}
/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
#double-gate .content-wrapper {
    padding: 0 12vw;
    padding: 0 12vw;
    display: flex;
    flex-direction: column;
    align-items: center;
}


#double-gate .header--second {
    background-color: transparent !important;
}

#double-gate .double-gate-fv {
        position: relative;
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: -10.2rem 5rem 0;
        z-index: 2;
        background-image: url('https://www.env-value.co.jp/wp/wp-content/themes/environment-site-w/src/assets/double-gate/fv/fv-bg-pc.svg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center center;
    }

.double-gate-fv-content {
    display: flex;
    padding: 15rem 4.8rem;
}

.angled-box {
    position: relative;
    display: flex;
    background: linear-gradient(to right, #004F8F, #0066A6); /* 左から右へのグラデーション */
    color: white; /* テキストを白に設定 */
    font-size: 32px;
    text-align: center;
    padding: 5px 30px;
    transform: skew(-45deg); /* ボックスを斜めにする */
    flex-wrap: nowrap;
    font-weight: bold;
}

#double-gate .ttl-banner {
    position: relative;
    display: inline-block;
    transform: skew(45deg); /* テキストを反対方向に傾けて水平にする */
    font-family: noto sans JP;
}

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

#double-gate .double-gate-fv {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: -10.2rem 5rem 0;
    z-index: 2;
    background-image: url('https://www.env-value.co.jp/wp/wp-content/themes/environment-site-w/src/assets/double-gate/fv/fv-bg-pc.svg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}


}

@media screen and (max-width: 768px) {
    #double-gate .ttl-banner {
        transform: skew(28deg); /* テキストを反対方向に傾けて水平にする */
        font-size: 1.2rem;
    }

    } 

.fv-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.double-gate-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    margin-top: 2rem;
}

.double-gate-logo-img {
    width: 500px;
    opacity: .15;
}

.logo-ttl-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    gap: 1rem;
    transform: translateX(-50%) translateY(-50%); /* 自身の幅分だけ左に戻す */
}
.double-gate-logo .logo-text-ttl {
    font-family: "gira-sans", sans-serif;
font-weight: 800;
font-style: normal;
    font-size: 130px;
    line-height: 85%; /* 6.75rem */
    letter-spacing: 0.25rem;
    color: #393636;
    margin-top: 1rem;
}
.double-gate-logo .logo-text-subttl {
    font-family: "Noto Sans JP";
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.3575rem;
    color: #393636;
}
.double-gate-text {
    margin-top: 2rem;
    font-family: Arial, sans-serif; /* Arialを指定し、フォールバックにsans-serifを設定 */
    color: #3E3A39;
    font-weight: 500;
}
.fv-right {
    position: relative;
    width: 100%;
}

.risk {
    width: 160px;
    height: 161px;
    position: absolute;
    top: -10%;
    left: 40%;
    background-image: url('https://www.env-value.co.jp/wp/wp-content/themes/environment-site-w/src/assets/double-gate/fv/fv-circle.svg');
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-family: noto sans JP;
    font-weight: bold;
    text-align: center;
    line-height: 110%;
    color: #3E3A39;
}

.compliance {
    width: 190px;
    height: 191px;
    position: absolute;
    top: 25%;
    left: 42%;
    background-image: url('https://www.env-value.co.jp/wp/wp-content/themes/environment-site-w/src/assets/double-gate/fv/fv-circle.svg');
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-family: noto sans JP;
    font-weight: bold;
    text-align: center;
    line-height: 110%;
    color: #3E3A39;
}
.education {
    width: 220px;
    height: 221px;
    position: absolute;
    top: 55%;
    left: 65%;
    background-image: url('https://www.env-value.co.jp/wp/wp-content/themes/environment-site-w/src/assets/double-gate/fv/fv-circle.svg');
    background-repeat: no-repeat;
    background-position: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    font-family: noto sans JP;
    font-weight: bold;
    text-align: center;
    line-height: 110%;
    color: #3E3A39;
}

@media screen and (max-width:1200px){
    #double-gate .fv {
        background-image: url('https://www.env-value.co.jp/wp/wp-content/themes/environment-site-w/src/assets/double-gate/fv/fv-bg-tbSp.svg');
    }
    .double-gate-fv-content {
        flex-direction: column;
        padding: 10rem 2.3rem 4rem;
    }
    .double-gate-logo-img {
        width: 70%;
    }   
    .double-gate-text {
        margin-top: 10rem;
        text-align: center;
    }
    .fv-right {
        height: 73vh;
    }
    .risk {
        width: 40%;
        height: 100%;
        top: 0%;
        left: 0;
        background-size: 80%;
    }
    
    .compliance {
        width: 40%;
        height: 100%;
        top: 40%;
        left: 50%;
        transform: translateX(-50%); /* 自身の幅分だけ左に戻す */
        background-size: 80%;
    }

    .education {
        width: 40%;
        height: 100%;
        top: 0%;
        left: 100%;
        transform: translateX(-100%); /* 自身の幅分だけ左に戻す */
        background-size: 80%;
    }
}

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

    .double-gate-fv-content {
        flex-direction: column;
        padding: 10rem 2.3rem 4rem;
    }
    
    .fv-right {
        height: 30vh;
    }

    .double-gate-text {
        margin-top: 5rem;
        text-align: center;
    }
}


@media screen and (max-width:768px){
    #double-gate .double-gate-fv {
        background-image: url('https://www.env-value.co.jp/wp/wp-content/themes/environment-site-w/src/assets/double-gate/fv/fv-bg-tbSp.svg');
        background-color: #FFF;
    }

    .double-gate-text {
        margin-top: 3rem;
        text-align: center;
        font-weight: 500;
        line-height: 180%;
    }
    .double-gate-fv-content {
        flex-direction: column;
        padding: 10rem 2.3rem 4rem;
    }
    .angled-box {
        width: 100%;
        font-size: 1.2rem;
        padding: 5px 30px;
        justify-content: center;  
        font-weight: bold;  
        transform: skew(-28deg); /* テキストを反対方向に傾けて水平にする */
        padding: 5px 0px;
    } 
    .double-gate-logo .logo-text-ttl {
        font-size: 70px;
        line-height: 85%; /* 6.75rem */
        letter-spacing: -1.5;
        color: #393636;
        margin-top: 3rem;
    }
    .double-gate-logo .logo-text-subttl {
        font-size: 1.25rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        letter-spacing: 0.3575rem;
        color: #393636;
    }
    .fv-right {
        height: 23vh;
    }
    .risk {
        font-size: 1rem;
        left:-7%;
        top: 7%;
    }
    .compliance {
        font-size: 1rem;
        top: 29%;
        left: 49%;
    }
    
    .education {
        font-size: 1rem;
        top:9%;
        left: 107%;
    }
    .double-gate-logo-img {
        width: 60vw;
    }   
    .double-gate-ttl {
        text-align: center;
        font-family: "Open Sans";
        font-size: 2.625rem;
        font-weight: 700;
        letter-spacing: normal;
        line-height: 1;
    }
}

/* お悩み(concern)＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

/* .concerns {    
} */


.concerns-bg-color {
    position: relative;
    z-index: 5;
    width: 100%;
    background: linear-gradient(90deg, #004C84 3.7%, #0073B1 51.31%, #096EAC 99.88%);
    border: none !important;
    clip-path: none;
    padding-top: 0;
}

.dg-triangle-wrapper {
    background-color: #F2F8FB;
    border: none !important;
    position: relative;
    z-index: 1;
    margin-top: -1px;
    padding-bottom: 2rem;
}
.dg-triangle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 4.5rem; /* 高さは自由に調整可 */
    position: relative;
    z-index: 2;
    filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.15));
}
.dg-triangle::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background: linear-gradient(90deg, #004C84 3.7%, #0073B1 51.31%, #096EAC 99.88%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}


.concerns-inner {
    position: relative;
    padding: 5.6rem 6.25rem 5.87rem;
}

.concerns-title {
    color: white;
    text-align: center;
    position: relative;
    font-family: "Noto Sans JP";
    font-size: 1.625rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.dg-step-apper-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
}
.dg-step-apper-wrapper.animate {
    animation-duration: 2s;
}
/* 強調文字用のスタイル */
.emphasis {
    position: relative; /* 疑似要素を文字の上に配置するため */
    display: inline-block; /* 要素の幅を文字に合わせる */
    font-size: 3rem;
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: 2.1875rem;
    font-weight: 700;
    padding: 0 0.25rem;
}

/* 疑似要素で「・・・」を上に表示 */
.emphasis::before {
    content: "・・・・・"; /* ドットを定義 */
    position: absolute;
    top: -2rem; /* 文字上に配置 */
    left: 50%;
    transform: translateX(-50%);
    letter-spacing: 0;
    color: #fff;
}

.concerns-grid {
    display: grid;
    grid-template-columns: repeat(4, 17rem);
    /* height: 18.75rem; */
    gap: 2rem;
    margin: 0 auto;
    justify-content: center;
    margin-top: 1.81rem;
}

.concern-card {
    background: white;
    border-radius: 10px;
    padding: 2rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    height: 20rem;
}

.concern-image {
    width: 10rem;
    height: 11rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.concern-image img {
    max-width: 100%;
    height: auto;
}

.concern-text {
    color: #011018;
    font-family: "Noto Sans JP";
    font-size: 1.0625rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: center;
}

@media (max-width: 1200px) {
    
    .concerns-grid {
        grid-template-columns: repeat(2, 17rem);
    }

    .concerns-inner {
        position: relative;
        padding: 5.6rem 6.25vw 8rem;
    }
    .concerns-bg-color {
        padding-top: 8rem;
    }
    #double-gate .concerns-bg-color {
        padding-top: 0;
    }
}

@media (max-width: 768px) {
    .concerns::after {
        bottom: -30px;
        height: 60px;
    }

    .concerns-title {
        margin-bottom: 2rem;
        font-size: 1.5rem;
    }

    .concerns-title::before {
        font-size: 0.8rem;
        top: -1.5rem;
    }

    .concerns-grid {
        gap: 1rem;
        grid-template-columns: repeat(1, 17rem);
        max-width: 400px;
    }

    .concern-card {
        gap: 1rem;
        padding: 1.5rem 1.88rem;
        height: 18rem;
        justify-content: center;
    }

    .concern-image {
        height: 10rem;
        width: 9rem;
    }

    .concern-text {
        line-height: 1.6;
        font-size: 1rem;
    }
    .emphasis {
        font-size: 1.75rem;
    }
}

  /* ダブルゲートサポート(5ステップ)＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

  .dg-fivestep {
    position: relative;
    text-align: center;
}

.dg-fivestep-bg-color {
    width: 100%;
    background: #F2F8FB;
    z-index: 5;
    position: relative;
}

.dg-fivestep-inner {
    position: relative;
    padding: 1.75rem 6.25rem 3.06rem;
}
.dg-fivestep .dg-triangle-wrapper {
    background-color: #fff;
}
.dg-fivestep .dg-triangle::before {
    background: #F2F8FB;
}
.dg-fivestep h1 {
    color: #004E81;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 95%;
    text-align: center;
    position: relative;
}

.dg-fivestep h1 span.dg-nara,
.dg-fivestep h1 span.dg-support {
    font-size: 1.875rem;
}

.dg-fivestep h1 span.dg-five {
    font-size: 2.8125rem;
}

.dg-diagram-container {
    position: relative;
    margin: 5.56rem auto 3.13rem;
    width: 100%;
    max-width: 1080px;
    height: calc(450px + 145px + 109px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.dg-center-diagram {
    width: 37%;
    height: auto;
    position: relative;
    z-index: 1;
}

.dg-step {
    position: absolute;
    text-align: left;
    z-index: 2;
    font-family: "Noto Sans JP", sans-serif;
}
.dg-step img {
    margin: 1rem 0 0 -4rem;
}

.dg-step h3 {
    color: #2B669F;
    margin: 0;
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: -0.075rem;
}

.dg-step h4 {
    color: #2B669F;
    font-size: 1.75rem;
    font-weight: 600;
    letter-spacing: 0.035rem;
    line-height: 1;
}

.dg-step p {
    line-height: 1;
    font-style: normal;
    font-size: 1.25rem;
    line-height: normal;
    font-weight: 400;
    letter-spacing: -0.05rem;
}

.dg-step-text {
    position: relative;;
}

.dg-step-text-step1 {
    margin: -3.3rem 0 0 2rem;
}

.dg-step-text-step2 {
    margin: -3.3rem 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.dg-step-text-step3 {
    margin: .5rem 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.dg-step-text-step4 {
    margin-left: 1.75rem;
    margin-top: .4rem ;
}

.dg-step-text-step4::before {
    left: -1.75rem;
}

.dg-step-text-step5 {
    margin: -2.5rem 0 0 2rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.dg-step-text p {
    margin-left: 1.75rem;
}

.dg-step-text::before {
        content: "";
        background-image: url('https://www.env-value.co.jp/wp/wp-content/themes/environment-site-w/src/assets/double-gate/five-steps/dg-checkmark.svg');
        background-size: 100%;
        background-repeat: no-repeat;
        position: absolute;
        top: 0.5rem;
        left: -1.75rem;
        width: 1.3rem;
        height: 100%;
        }

  /* ステップの位置調整 */
.dg-step1 {
    top: 0;
    left: 55%;
}
.dg-step1 img {
    width: 25rem;
}

.dg-step2 {
    top: 25%;
    right: 0;
}

.dg-step2 img {
    width: 21rem;
}

.dg-step3 {
    bottom: 6%;
    right: 0;
}

.dg-step3 img {
    width: 27rem;
    margin: -2.5rem 0 0 -4rem;
}

.dg-step4 {
    bottom: 11%;
    right: calc(100% - 26rem);
}

.dg-step4 img {
    width: 26rem;
    margin: -3rem 0 0 -4rem;
}

.dg-step5 {
    top: 25%;
    right: calc(96% - 17rem);
}

.dg-step5 img {
    width: 17rem;
    margin: 1rem 0 0 -2rem;
}

.dg-blue-box {
    background-color: #2B669F;
    color: white;
    padding: 15px;
    width: 34rem;
    margin: 0 auto;
    border-radius: 5px;
}

.dg-blue-box p {
    margin: 0;
    color: #FFF;
text-align: center;
font-family: "Noto Sans JP";
font-size: 1.5rem;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.dg-bottom-text {
    font-size: 16px;
    margin-top: 20px;
}

  /* レスポンシブ対応 */
@media (max-width: 1200px) {
    .dg-center-diagram {
        width: 45%;
    }
    .dg-step-text p {
        margin-left: 1.75rem;
    }
    
      /* ステップの位置調整 */
    .dg-step1 {
        top: -31%;
        left: 77%;
    }
    
    .dg-step2 {
        top: 10%;
        right: 2%;
    }
    
    .dg-step3 {
        top: 80%;
        right: 0;
    }
    
    .dg-step4 {
        top: 80%;
        left: 4%;
    }
    
    .dg-step5 {
        top: 11%;
        left: 8%;
    }
    
    .dg-step5 img {
        width: 17rem;
        margin: 1rem 0 0 -2rem;
    }
    .dg-blue-box {
        background-color: #2B669F;
        color: white;
        padding: 15px;
        width: 34rem;
        margin: 0 auto;
        border-radius: 5px;
    }
    
    .dg-blue-box p {
        margin: 0;
        font-size: 1.5rem;
    }
    
    .dg-bottom-text {
        font-size: 16px;
        margin-top: 20px;
    }
    .dg-diagram-container {
        height: auto;
    }

    .dg-diagram-container {
        margin: 2.875rem auto 7.13rem;
        width: 100%;
        max-width: 1200px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .dg-center-diagram {
        width: 60%;
    }
    .dg-step {
        display: none;
    }
}


@media (max-width: 1024px) {

    .dg-diagram-container {
        margin: 2.875rem auto 2rem;
    }

    .dg-fivestep-inner {
        position: relative;
        padding: 5.6rem 6.25rem 5rem;
    }
}


@media (max-width: 768px) {
    .dg-bottom-text {
        font-size: 1.125rem;
        margin-top: 1.25rem;
    }

    .dg-blue-box {
        background-color: #2B669F;
        color: white;
        padding: 15px;
        width: 100%;
        margin: 0 auto;
        border-radius: 5px;
    }
    
    .dg-blue-box p {
        margin: 0;
        font-size: 1.5rem;
    }

    .dg-center-diagram {
        width: 100%;
    }
        .dg-diagram-container {
            margin: 2.875rem auto 3.8rem;
            width: 100%;
            max-width: 1200px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .dg-fivestep-inner {
            position: relative;
            padding: .5rem 6.25vw 0rem;
        }
    .dg-fivestep h1 {
        font-size: 1.5rem;
        line-height: normal;
        
    }
    
    .dg-fivestep h1 span.dg-nara,
    .dg-fivestep h1 span.dg-support {
        font-size: 1.25rem;
        letter-spacing: -0.125rem;
    }
    
    .dg-fivestep h1 span.dg-five {
        font-size: 2.1875rem;
    }
    

    .dg-step img {
        margin: 1rem 0 0 -4rem;
    }
    
    .dg-step h3 {
        color: #2B669F;
        margin: 0;
        font-size: 1.25rem;
        font-weight: 400;
        letter-spacing: -0.075rem;
    }
    
    .dg-step h4 {
        color: #2B669F;
        font-size: 1.75rem;
        font-weight: 600;
        letter-spacing: 0.035rem;
        line-height: 1;
    }
    
    .dg-step p {
        line-height: 1;
        font-style: normal;
        font-size: 1.25rem;
        line-height: normal;
        font-weight: 400;
        letter-spacing: -0.05rem;
    }
}
/* 『Double Gate』5つのステップとは？============================ */
.about-fivestep {
    position: relative;
    /* z-index: 30; */
}

.about-bg-color {
    width: 100%;
    background: #fff;
    z-index: 5;
    position: relative;
}
.about-fivestep .dg-triangle-wrapper {
    background-color: #33709D;
}
.about-fivestep .dg-triangle::before {
    background: #fff;
}

.about-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 3.06rem 0 .56rem;
    margin: 0 auto;
    align-items: center;
    max-width: 1080px;
    width: 100%;
}

#about-fivestep .main-title {
    text-align: center;
    font-size: 2.5rem;
    line-height: 1.4;
}

.title-part1 {
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 3.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    background: linear-gradient(90deg, #004C84 3.59%, #1089CB 57.66%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.title-part2 {
    color: var(--text-color);
}

.step-container {
    margin-top: 5.31rem;
    /* max-width: 1200px; */
}

.step-content {
    display: flex;
}
.step-icon {
        width: 7.5rem;
        height: 7.5rem;
        background: white;
        margin-top: 3rem;
        border-radius: 50%;
        box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.20);
}
.step-icon.pc-only {
    display: flex !important;
        justify-content: center;
        align-items: center;
        flex-shrink: 1;
}
.step-icon img{
    width: 4rem;
    align-items: start;
    position: relative;
    margin-top: .5rem;
}

.step-info {
    flex-shrink: 1;
    width: 100%;
}

.step-label {
    width: 7.8125rem;
    height: 2.3rem;
    background: #004C84;
    color: white;
    padding: 0.2rem 1.5rem;
    border-radius: 1.25rem;
    font-weight: bold;
    margin:0 0 0 3rem;
    color: #FFF;
    font-family: "Noto Sans JP";
    font-size: 1.0625rem;
    font-weight: 700;
    font-style: normal;
    text-align: center;
}

.label-number {
    font-size: 1.25rem;
    padding: 0 0 .18rem .5rem;
}
.step-title {
    font-size: 2rem;
    color: #004C84;
    font-weight: bold;
    padding: 1.25rem 0 1.25rem 3rem;
    /* ボーダーにグラデーションを適用 */
    border-bottom: .0625rem solid transparent; /* ボーダーを透明にしてベースを設定 */
    border-image: linear-gradient(90deg, #004C84 3.59%, #1089CB 57.66%);
    border-image-slice: 1; /* ボーダー全体にグラデーションを適用 */
}
#about-fivestep .dg-step-content {
    width: 100%;
    padding: 1.25rem 0 0 3rem;
}
.dg-step-content-wrapper {
    display: flex;
    gap: 3.5rem;
    text-align: left;
    justify-content: flex-start;
}
.service-text {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}
#step1-risk .service-text {
    width: 60%;
}

.service-knowledge-text {
    margin-top: 3.75rem;
}
.service-summary-text {
    margin-top: 3.75rem;
}

.service-title {
    font-size: 1.5rem;
    color: var(--text-color);
}

#double-gate .service-card .service-description {
    color: #00547D;
font-family: "Noto Sans JP";
font-size: 0.9375rem;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.step-image {
    flex-shrink: 0;
    width: 18.75rem;
    height: 12.5rem;
    background: #f5f5f5;
    border-radius: 0.5rem;
    overflow: hidden;
}

.step-image img {
    width: 100%;
    /* height: 100%; */
    object-fit: cover;
}

.step-flow {
    width: 100%;
    /* text-align: end; */
    margin-top: 3.69rem;
}
.step-flow img {
    width: 100%;
}


@media (max-width:1024px) {
    .step-icon.pc-only {
        display: none !important;
    }

    #step1-risk .service-text {
        width: 100%;
    }
}

@media (max-width:768px) {
    #step1-risk .step-icon {
        padding: 0.2rem 1.3rem 0.3rem 1rem;
}
#step1-risk .service-text {
    width: 100%;
}
.step-icon.pc-only {
    display: none !important;
}
.label-number {
    padding: 0 0 0.2rem .25rem;
}
}
/*STEP2 =============================================== */

/* #step2-legal .step-icon {
    width: 17.5%;
} */
#step2-legal .step-icon img {
    width: 4.5rem;
}
    
#step2-legal .service-description-wrapper {
    flex-direction: column;
}
#step2-legal .step-flow-knowledge img {
    width: 100%;
}
#step2-legal .step-flow-summary img {
    width: 70%;
}
@media (max-width:1024px) { 
    #step2-legal .step-flow-summary img {
        width: 100%;
    }
    #step2-legal .step-icon img {
        width: 2rem;
    }

}
@media (max-width:768px) {
    #step2-legal .step-icon {
        width: 4rem;
        height: 4rem;
        padding: 0.2rem 1.5rem 0.3rem 0.7rem;
}
#step2-legal .step-icon img {
    width: 2.5rem;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-top: 1rem;
}
#step2-legal .step-flow img {
    width: 100%;
}
.step-flow.mbSp-only{
    font-family: Noto Sans JP;
}
.step-info {
    flex-shrink: 1;
    width: 100%;
}
}
/* STEP3 =============================================== */

#step3-create-system .step-icon img {
    margin-top: 0.4rem;
}
#step3-create-system .step-flow {
    width: 70%;
}

@media (max-width:768px) {
    #step3-create-system .step-icon {
        padding: 0.2rem 1.3rem 0.3rem 1rem;
}
#step3-create-system .step-icon img {
    margin-top: 0.8rem;
}
}
/* STEP4 =============================================== */

/* #step4-saitekika .step-icon {
    width: 33%;
} */
#step4-saitekika .step-flow {
    width: 80%;

}

@media (max-width:1024px) {
    #step4-saitekika .step-flow {
        width: 100%;
    }
}
@media (max-width:768px) {

#step4-saitekika .step-icon {
    width: 4rem;
    height: 4rem;
}
#step4-saitekika .step-icon img {
    margin: 0.5rem 0 0 0.3rem;
    width: 1.8rem;
}
#step4-saitekika .step-flow {
    width: 100%;
}
}
/* STEP5 =============================================== */

#step5-education .service-description-wrapper {
    gap: 5.38rem;
    }
    #double-gate .step5-last-service-content {
        display: flex;
        max-width: 1200px;
        margin-top: 7.19rem;
    }
    /* #step5-education .step-icon {
        width: 24%;
    } */
    @media (max-width:768px) {
        #step5-education .step-icon {
            width: 4rem;
            height: 4rem;
    }
    #step5-education .step-icon img {
        margin-top: 0.8rem;
    }}

/* step5の事例紹介＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
#double-gate .content-box {
    position: relative;
    flex-grow: 1;
    margin-left: 0;
    padding: 1.95rem 2.5rem 1.25rem 6rem;
    border-radius: 0.75rem;
    color: #FFFFFF;
    overflow: hidden;
    text-align: left;
    transition: height 0.3s ease, background 0.3s ease; /* 高さと背景色のアニメーションを追加 */
}

#double-gate .close-details {
    display: none;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0.5rem 0;
    margin-top: 1rem;
    font-size: 0.875rem;
}

/* Title Section Styles */
.title-section {
    text-align: center;
    padding: 5rem 1rem ;
    position: relative;
}

.title-container {
    max-width: 75rem;
    margin: 5rem auto 0;
    position: relative;
}

.title-section .main-title-statement {
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 2rem !important;
    font-style: normal;
    font-weight: 700;
    line-height: 3.25rem !important;
    margin: 0;
    position: relative;
    z-index: 1;
    background: linear-gradient(89deg, #004C84 -40.6%, #1089CB 125.64%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.title-decoration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 100px;
    background-image: url('path-to-wave-decoration.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.3;
    z-index: 0;
}
.service-title {
    color: #011018;
font-family: "Noto Sans JP";
font-size: 1.375rem;
font-style: normal;
font-weight: 700;
line-height: normal;
}

@media (max-width: 1200px) {

    .about-inner {
        padding: 6.25rem 5vw 5.44rem;
    }

    #double-gate .content-wrapper {
        padding: 0 2vw;
    }
    
    .step-container {
        padding: 1.25rem;
        margin-top: 0;
        }

    #about-fivestep .dg-step-content {
        padding: 0;
    }
    #about-fivestep .main-title {
        font-size: 1.875rem;
        margin-bottom: 2.5rem;
    }
    
    .title-part1 {
        font-size: 2rem;
    }
    
    .step-content {
        flex-direction: column;
        align-items: center;
    }
    
    .step-icon-label {
        display: flex !important;
        align-items: center;
        gap: .37rem;
    }
    .step-icon {
        margin-top: 0;
        background: white;
        padding: .5rem .8rem;
        border-radius: 50%;
        box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.20);
            width: 5rem;
            height: 5rem;
    }
    .step-icon img{
        width: 2rem;
        align-items: center;
        justify-content: center;
        position: relative;
            margin-top: 1rem;
    }
    
    .step-label {
        margin:0;
        height: 2rem;
        padding: 0 .87rem 0.13rem;
    }    

    .step-title {
        font-size: 1.5rem;
        padding: 1.56rem 0 .62rem 0;
        color: var(--, #004C84);
        text-align: center;
        font-family: "Noto Sans JP";
        font-size: 1.5625rem;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
}
.service-title {
        color: #011018;
text-align: center;
font-family: "Noto Sans JP";
font-size: 1.375rem;
font-style: normal;
font-weight: 700;
line-height: 1.875rem; /* 136.364% */
    }

    .service-description-wrapper {
        flex-direction: column;
        gap: 2.81rem;
        align-items: center;
        padding: 0;    
        margin: 0;
    }

    .step-image {
        width: 50%;
    }

    .step-flow {
        width: 50%;
        margin: 3.75rem auto 0;    
    }

    .step-flow img {
        width: 100%;
    }

    #step2-legal .step-flow {
        margin-bottom: 2rem;
    }
    #step3-create-system .step-flow {
        width: 50%;
    }
    #double-gate .step5-last-service-content {
        padding-left: 0;
            margin-top: 2.13rem;
        }
    .dg-step-content-wrapper {
        flex-direction: column;
    }
    .dg-step-service-title.inner-title {
        margin-top: 5.6rem;
    }

        .step-container {
            padding: 7.5rem 1.25rem 1.25rem;
            margin-top: 0;
        }
}

@media (max-width: 1024px) {
    .step-container {
        padding: 3.75rem 1.25rem 1.25rem;
        margin-top: 0;
    }

    .about-inner {
        padding: 8.25rem 5vw 5.44rem;
    }

    .step-icon {
        padding: .5rem .8rem;
            width: 5rem;
            height: 5rem;
            display: flex;
            justify-content: center;
            align-items: center;
    }

    .step-icon img{
        width: 2rem;
            margin-top: 0;
    }

    .step-image {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .step-label.pc-only {
        display: none !important;
    }

    .step-flow {
        width: 100%;
        margin: 3.75rem auto 0;    
    }
    #step3-create-system .step-flow {
        width: 100%;
    }


    #double-gate .close-details {
        padding: 0 0 1.5rem !important;
        margin-top: 0 !important;
    }
    .title-section {
        padding: 3rem 1rem ;
    }
    .title-container {
        margin: 3rem auto 0;
    }
}

@media (max-width: 768px) {
    .step-image {
        width: 100%;
    }
    .step-flow {
        width: 100%;
        margin-top: 3rem !important;
    }
    .step-icon img{
            margin-top: 1rem;
    }

    #step3-create-system .step-flow {
        width: 100%;
    }

.content-box.show-details .content-details {
    display: block; /* 詳細表示時に内容を表示 */
}

.close-details {
    display: none; /* 初期状態では非表示 */
    padding: 0.5rem;
}

#double-gate .close-details {
    padding: 0.5rem 0 1.5rem !important;
    margin-top: 1rem !important;
}

.content-box.show-details .see-more {
    display: none; /* 詳細表示時に非表示ボタンを隠す */
}

.content-box.show-details .close-details {
    display: inline-block; /* 詳細表示時に閉じるボタンを表示 */
}
.title-section .main-title-statement {
    margin: 0;
    position: relative;
    z-index: 1;
    background: linear-gradient(89deg, #004C84 -40.6%, #1089CB 125.64%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-align: center;
font-family: "Noto Sans JP";
font-size: 1.25rem !important;
font-style: normal;
font-weight: 700;
line-height: normal !important;
}

#double-gate .service-card .service-description {
    text-align: center;
}
    .step-icon {
        width: 4rem;
        height: 4rem;
        display: block;
    }
        .title-container {
            max-width: 75rem;
            margin: 3.5rem auto 0;
            position: relative;
        }
        .title-section {
            padding: 3.5rem 1rem ;
        }
        #about-fivestep .main-title {
            margin-bottom: 0;
        }
}

#double-gate .case-study-container {
    max-width: 75rem;
    margin: 0 auto;
    padding-top: 5.38rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

#double-gate .case-content {
    position: relative;
    display: flex;
    align-items: center;
}

#double-gate .case-box {
    position: absolute;
    width: 13.8rem;
    background: #2B84BE;
    color: #FFFFFF;
    padding: 1.25rem;
    border-radius: 1.25rem;
    text-align: center;
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
    z-index: 2;
    left: 0;
    top: 50%;
    transform: translate(-50%, -50%);
}

#double-gate .case-label {
    color: #FFFFFF;
    font-family: "Noto Sans JP";
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}
.case-title{
    color: #FFF;
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.875rem; /* 136.364% */
}

#double-gate .content-box {
    position: relative;
    flex-grow: 1;
    margin-left: 0;
    padding: 2rem 2.5rem 2rem 6rem;
    border-radius: 0.75rem;
    color: #FFFFFF;
    overflow: hidden;
    text-align: left;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#double-gate .content-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('https://www.env-value.co.jp/wp/wp-content/themes/environment-site-w/src/assets/double-gate/five-steps/step5-bg-pc1.webp');    
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.7;
    z-index: 0;
}

#double-gate .content-box2::after {
    background-image: url('https://www.env-value.co.jp/wp/wp-content/themes/environment-site-w/src/assets/double-gate/five-steps/step5-bg-pc2.webp');
    background-position: 100% 80%;
}

#double-gate .content-box3::after {
    background-image: url('https://www.env-value.co.jp/wp/wp-content/themes/environment-site-w/src/assets/double-gate/five-steps/step5-bg-pc3.webp');
    background-position: 100% 55%;
}

#double-gate .content-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 0.75rem;
    opacity: 0.78;
    background: linear-gradient(87deg, #004C84 24.19%, #1089CB 93.82%);
    z-index: 1;
}

#double-gate .content-box > * {
    position: relative;
    z-index: 1;
}

#double-gate .content-title {
    color: #FFFFFF;
    font-family: "Noto Sans JP";
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.875rem;
    padding-left: 2.5rem;
    margin-bottom: 0;
}
#double-gate .content-title::after {
    height: 0;
}

#double-gate .content-subtitle {
    font-size: 1rem;
    font-size: 1.125rem;
    font-weight: 500;
    font-style: normal;
    padding-left: 2.5rem;
    line-height: normal;
    margin-top: .94rem;
}

#double-gate .content-details {
    padding: 2.37rem 1.25rem 0 2.5rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: .63rem;
}

#double-gate .details-title {
    display: inline-block;
    background: #FFFFFF;
    padding: 0.375rem 1rem;
    border-radius: 1.25rem;
    margin: 0;
    white-space: nowrap;
    color: #004C84;
font-family: "Noto Sans JP";
font-size: 1rem;
font-style: normal;
font-weight: 700;
line-height: normal;
}

#double-gate .details-list {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
    margin-top: 0;
}

#double-gate .details-list li {
    position: relative;
    padding-left: 1.25rem;
    line-height: 1.4;    
    font-style: normal;
    font-size: 0.9375rem;
    line-height: normal;
    font-weight: 500;
}

#double-gate .details-list li:last-child {
    margin-bottom: 0;
}

#double-gate .details-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #FFFFFF;
}
#double-gate .details-list li.no-dot::before {
    content: '';
    position: absolute;
    left: 0;
    color: #FFFFFF;
}
#double-gate .details-list li.no-dot {
    padding-left: 0;
}

#double-gate .see-more,
#double-gate .close-details {
    display: none;
    color: #FFFFFF;
    text-decoration: none;
    padding: 0.5rem 0;
    margin-top: 1rem;
    font-size: 0.875rem;
    transition: opacity 0.3s ease;
}

@media (max-width: 1200px) {
    #double-gate .case-study-container {
        padding: 1.25rem 0 1.25rem;
        margin-top: 3.13rem;
    }

    #double-gate .case-study-section {
        margin-top: 4rem;
        transition: margin 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #double-gate .case-content {
        flex-direction: column;
        min-height: 11.5625rem;
        cursor: pointer;
    }
    #double-gate .content-box2 .see-more,
    #double-gate .content-box3 .see-more{
        margin-top: 0;
    }

    #double-gate .case-box {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        left: 50%;
        top: -60px;
        transform: translateX(-50%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0;
    }

    #double-gate .content-box {
        width: 100%;
        height: 13.56rem;
        margin: 0;
        padding: 4rem 1.25rem 0.94rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    #double-gate .content-box.show-details {
        height: auto;
        min-height: 100%;
        padding-top: 4rem;
        padding-bottom: 0;
    }


    #double-gate .content-title {
        font-size: 1.5rem;
        padding: 0;
        margin-bottom: 0;
    }

    #double-gate .content-subtitle {
        font-size: 1rem;
        padding: 0;
        margin-bottom: 1rem;
    }

    #double-gate .content-details {
        display: none;
        flex-direction: column;
        align-items: center;
        padding: 1.25rem 0;
        text-align: left;
        width: 100%;
        /* margin-top: 1rem;
        margin-bottom: 1rem; */
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    #double-gate .content-box.show-details .content-details {
        display: block;
        opacity: 1;
        transform: translateY(0);
    }

    #double-gate .content-box::after {
        opacity: 0.3;
    }

    #double-gate .see-more {
        display: block;
        z-index: 10; /* 他の要素の上に配置 */
    }

    #double-gate .content-box.show-details .see-more {
        display: none;
    }

    #double-gate .content-box.show-details .close-details {
        display: inline-block;
        opacity: 0;
        animation: fadeIn 0.3s ease forwards 0.3s;
    }

    .case-title{
        font-size: 14px;
        line-height: normal; /* 136.364% */
    }
    #double-gate .details-title {
        display: inline-block;
        background: #FFFFFF;
        color: #1B4B8A;
        padding: 0.375rem 1rem;
        border-radius: 1.25rem;
        font-size: 0.875rem;
        margin: 0;
        white-space: nowrap;

        width: 100%;
        text-align: center;
    }
}

@media (max-width: 1024px){
    #double-gate .details-list {
        margin: 0.94rem 0 1.25rem;
    }

    #double-gate .content-box {
        width: 100%;
        height: 14.86rem;
        margin: 0;
        padding: 4.5rem 1.25rem 3rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #double-gate .case-box {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        left: 50%;
        top: -85px;
    }

    #double-gate .case-study-container {
        gap: 2.25rem;
    }
    #double-gate .content-details {
        padding: 1.25rem 0 0;
    }

}

@media (max-width: 768px){
#double-gate .content-title {
    color: #FFF;
text-align: center;
font-family: "Noto Sans JP";
font-size: 1.125rem;
font-style: normal;
font-weight: 700;
line-height: 1.6rem; /* 166.667% */
    margin-bottom: 0.5rem;
}
#double-gate .details-list {
    margin: 0.94rem 0 1.25rem;
}
#double-gate .details-list.details1 {
    margin-bottom: 0 !important;
}
#double-gate .details-list.details2 {
    margin-top: 0 !important;
}

#double-gate .content-box {
    width: 100%;
    height: 13.56rem;
    margin: 0;
    padding: 4rem 1.25rem 0.94rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#double-gate .case-box {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    left: 50%;
    top: -60px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
}

#double-gate .case-study-container {
    gap: 1.25rem;
    margin-top: 3.13rem;
}

#double-gate .content-details {
    padding: 1.25rem 0 ;
}

}


@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }

}


/* 事例（WORKS）＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

#double-gate .works-section {
    position: relative;
}

.works-bg-color {
    position: relative; 
    width: 100%;
    background: #33709D;
    z-index: 5;
}

.works-section .dg-triangle-wrapper {
    background-color: #D2ECF9;
}
.works-section .dg-triangle::before {
    background: #33709D;
}

.works-inner {
    position: relative;
    padding: 4.25rem 0 4.75rem; 
    max-width: 75rem;
    margin: 0 auto 0;
    max-width: 1080px;
    width: 100%;
}
.works-grid {
    margin-top: 4.38rem;
}

.works-title {
    color: #FFFFFF;
}
.works-subtitle {
    color: #FFFFFF;
}

.works-cards-pc {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 23.3125rem));
    gap: 1.5rem;
    margin-bottom: 3rem;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
}

.works-cards-sp {
    display: none;
}

.works-card {
    background: #FFFFFF;
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 100%;
}

.works-image {
    position: relative;
    width: 100%;
    aspect-ratio: 23.3125 / 15.625;
}

.works-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.works-image::after {
    content: '...';
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #FFFFFF;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
}

.works-content {
    height: 15rem;
    padding: 1rem;
}

.works-text {
    color: #011018;
    font-family: "Noto Sans JP";
    margin: 0 0 1rem;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.6875rem; /* 150% */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    height: calc(1.6875rem * 2); /* 2行分の高さを固定しておくと安定 */
}

.works-info {
    margin-top: 1rem;
}

.works-labels {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.works-label-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.works-label-title {
    min-width: 6rem;
    padding: 0.4rem 1rem;
    background-color: #004C84;
    color: #FFFFFF;
    border-radius: 2rem;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
}

.works-label-content {
    color: #333333;
    font-size: 0.875rem;
}

.works-company {
    margin-top: 1rem;
    color: #666666;
    font-size: 0.875rem;
}

.works-more {
    text-align: center;
    margin-top: 3rem;
}


.works-more-link {
    display: inline-flex;
    align-items: center;
    color: #004C84;
    text-decoration: none;
    font-family: "Noto Sans JP";
    font-size: 1rem;
    padding: 0.75rem 2rem;
    background-color: #FFFFFF;
    border: 2px solid #FFFFFF;
    border-radius: 2rem;
    transition: all 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
.works-more-link:hover {
    background-color: #004C84;
    color: #FFFFFF;
}
}

/* Splide カスタマイズ */
.splide__pagination {
    bottom: -2rem;
}

.splide__pagination__page {
    background: #FFFFFF;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.splide__pagination__page.is-active {
    background: #FFFFFF;
    opacity: 1;
    transform: none;
}

@media (max-width: 1200px) {
    .works-inner {
        padding: 6.09rem 6rem 4.75rem;
    }

    .works-cards-pc {
        grid-template-columns: repeat(2, minmax(0, 23.3125rem));
        gap: 1.5rem;
    }
	
	.works-cards-pc .works-card:last-child {
		display: none;
}
.works-grid {
    margin-top: 3.75rem;
}

    }
    @media (max-width: 1024px) {
        .works-inner {
            padding: 6.09rem 6rem 4.75rem;
        }
    }

    
@media (max-width: 768px) {
    .works-inner {
        padding: 1.7rem 1.25rem 4.75rem;
    }

    .works-cards-pc {
        display: none;
    }


    .works-cards-sp {
        display: block;
    }

    .works-title {
        font-size: 2rem;
        line-height: 1;
    }

    .works-subtitle {
        font-size: 0.875rem;
        margin-bottom: 2rem;
    }

    .works-label-group {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    .works-label-title {
        min-width: 6rem;
        width: auto;
    }

    .works-card {
        width: 100%;
        height: 30rem;
        margin: 0 auto;
    }

    .works-image::after {
        display: none;
    }
    #double-gate .content-subtitle {
        color: #FFF;
        font-family: "Noto Sans JP";
        font-size: 0.9375rem;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin: .31rem 0 0 ;
    }
        #double-gate .works-section {
            padding: 0;
            margin:  0 auto;
        }
        .step-container {
            padding: 5.5rem 1.25rem 1.25rem;
            margin-top: 0;
        }
        .works-section .splide__pagination {
            bottom: 9rem;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 32px; /* ドットの間隔 */
        }
        .works-section .works-more {
            margin-top: -8rem;
        }
}

/* 流れ（FLOW）=====================================- */
.flow {
    display: flex;
    flex-direction: column;
    background-color: #D2ECF9;
    align-items: center;
    padding: 4.25rem 7vw 5.44rem ;
}
.flow-title {
    color: #004C84;
}

.flow-subtitle {
    color: #011018;
}
.flow-figure {
    width: 100%;
    max-width: 1080px;
    margin-top: 5.13rem;
}
#flow .cta-button {
    margin-top: 4.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.2rem 5rem;
    background-color: #FF8900;
    color: white;
    text-decoration: none;
    border-radius: 50px;
    position: relative;
    font-size: 1.125rem;
    font-family: "Noto Sans JP";
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0.045rem;
    line-height: 1.4375rem; /* 127.778% */
}
@media (hover: hover) and (pointer: fine) {
#flow .cta-button:hover {
    background-color: #ff9f2a;
    transform: translateY(-2px);
}
}

@media (max-width: 1024px) {
    .flow-figure.pc-only {
        width: 100%;
        display: block !important;
        margin-top: 3.75rem;
    }
}
@media (max-width: 768px) {

    #flow .cta-button {
        color: #FFF;
        font-family: "Noto Sans JP";
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 500;
        line-height: 1.4375rem; /* 127.778% */
        letter-spacing: 0.045rem;
        padding: 1.2rem 2.25rem;
        width: 100%;
    }
    .flow-figure.pc-only {
        width: 100%;
        display: none !important;
    }
}
/* サービス（SERVICE）＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.services {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
    padding: 6.25rem 10vw 6rem;
}

.services-title {
    color: #004C84;
}

.services-subtitle {
    color: #011018;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, auto);
    column-gap: 1.25rem;
    row-gap: 1.5rem;
    margin-top: 4.5rem;
}

.service-card {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: row;
    height: 11rem;
}
.services .card-content {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
@media (hover: hover) and (pointer: fine) {
.service-card:hover {
    transform: translateY(-5px);
  }
}
  .service-image {
    position: relative;
    width: 35%;
    flex: 0 0 35%;
  }
  
  .service-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .service-content {
    width: 65%;
    padding: 2rem 1.5rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .dg-step-service-description {
    color: #00547D;
    font-family: "Noto Sans JP";
    font-size: 0.9375rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0 0 0.75rem 0;
  }

.dg-step-service-description-white {
    color: #011018;
font-family: "Noto Sans JP";
font-size: 1.125rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
  
  .dg-step-service-title {
    color: #011018;
    font-family: "Noto Sans JP";
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
  }
  .service-title-prime{
    color: #011018;
    font-family: "Noto Sans JP";
    font-size: 1.375rem;
    font-style: normal;
    font-weight: 700;
    line-height: normal; 
  }
  #double-gate .view-all-button,
  #matching .view-all-button,
  #field-investigation-service .view-all-button {
    width: 20rem;
    background: #fff;
    border: 1px solid #00547D;
    color: #00547D;
    margin-top: 0;
}
#double-gate .learn-more-btn.slide-up-down-text {
    margin-left: 4rem;
    color: #00547D;
}
#matching .learn-more-btn.slide-up-down-text {
    margin-left: 4rem;
    }

#double-gate.right-arrow,
#matching.right-arrow,
#field-investigation-service.right-arrow {
    color: #00547D;
}
#flow .view-all-button {
    background: #FF8900;
    border: 1px solid #FF8900;
    color: #fff;
}
#flow .learn-more-btn.slide-up-down-text {
    margin-left: 3rem;
    color: #fff !important;
}
@media screen and (max-width: 1200px) {
    #double-gate .learn-more-btn.slide-up-down-text,
#matching .learn-more-btn.slide-up-down-text{
    margin-left: 3rem;
    color: #00547D;
}
}
@media (max-width: 1024px) {
    .dg-step-service-title {
        margin-top: 1.5rem;
    }

    .dg-step-service-description-white {
        margin-top: 1.5rem;
    }
    .services-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        margin-top: 3rem;
      }

      .services {
        padding: 4rem 10vw 6rem;
        width: 100%;
    }
}


  @media (max-width: 768px) {
    .services {
      padding: 3.13rem 1.25rem 7rem;
    }
    
    .services-grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      margin-top: 2.5rem;
    }

    .service-card {
      flex-direction: column;
      height: auto;
    }
  
    .service-image {
      position: relative;
      width: 100%;
      flex: 0 0 200px;
    }
  
    .service-content {
      width: 100%;
      flex: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: .62rem;
      
    }
    .dg-step-service-title {
        color: #011018;
font-family: "Noto Sans JP";
font-size: 1.125rem;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-top: 1.25rem;
    }
    .flow-title {
        color: #004C84;
text-align: center;
font-family: "Open Sans";
font-size: 2rem;
font-style: normal;
font-weight: 700;
line-height: 1;
    }
    .flow-subtitle {
        color: var(--, #011018);
font-family: "Noto Sans JP";
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: normal;
    }
    .dg-step-service-description-white {
        margin-top: 1.125rem;
    }
    .service-title-prime {
        color: #011018;
        font-family: "Noto Sans JP";
        font-size: 1.125rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin-top: 1.25rem;
    }
    #step5-education .service-description-wrapper {
        gap: 2.44rem;
    }
    .services-title {
        color: #004C84;
        font-size: 2rem;
    }
    
    .services-subtitle {
        color: #011018;
        font-family: "Noto Sans JP";
        font-size: 0.875rem;
        margin-bottom: 2rem;
    }
}
#double-gate .service-image,
#matching .service-image,
#field-investigation-service .service-image {
    position: relative;
    width: 100%;
}
#double-gate .service-content,
#matching .service-content,
#field-investigation-service .service-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

#double-gate .card.animate1.card-wide.card-wide-other,
#matching .card.animate1.card-wide.card-wide-other,
#field-investigation-service .card.animate1.card-wide.card-wide-other {
    display: flex;
    align-items: center;
    width: 61.5rem;
    max-width: 1080px;
    height: 240px;
    margin-top: 3.75rem;
}
@media (hover: hover) and (pointer: fine) {
#double-gate .card.animate1.card-wide.card-wide-other:hover .card-content .view-all-button-text,
#matching .card.animate1.card-wide.card-wide-other:hover .card-content .view-all-button-text,
#field-investigation-service .card.animate1.card-wide.card-wide-other:hover .card-content .view-all-button-text {
    animation: slideUpDown 0.65s cubic-bezier(0.46,0.03,0.52,0.96);
}
#double-gate .card.animate1.card-wide.card-wide-other:hover .card-content .right-arrow,
#matching .card.animate1.card-wide.card-wide-other:hover .card-content .right-arrow,
#field-investigation-service .card.animate1.card-wide.card-wide-other:hover .card-content .right-arrow {
    animation: slideArrow 0.5s ease;
}
#double-gate .card.animate1.card-wide.card-wide-other:hover .card-bg-img-other img,
#matching .card.animate1.card-wide.card-wide-other:hover .card-bg-img-other img,
#field-investigation-service .card.animate1.card-wide.card-wide-other:hover .card-bg-img-other img {
    transform: scale(1.1);
    transition: transform 0.3s ease;

}

}

#double-gate .card-bg-img-other,
#matching .card-bg-img-other,
#field-investigation-service .card-bg-img-other {
    width: 100%;
}
#double-gate .card-bg-img-other img,
#matching .card-bg-img-other img,
#field-investigation-service .card-bg-img-other img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    object-fit: cover;
}
#double-gate .card:before,
#matching .card:before,
#field-investigation-service .card:before {
    height: inherit;
}
#double-gate .service-intro-mainttl,
#matching .service-intro-mainttl,
#field-investigation-service .service-intro-mainttl {
    font-size: 1.6875rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.1; 
}

#double-gate .card-content-txt-wrapper p,
#matching .card-content-txt-wrapper p,
#field-investigation-service .card-content-txt-wrapper p {
    font-size: 1rem;
    font-weight: 500;
    margin-top: 1rem;
}

#double-gate .card-content .view-all-button,
#matching .card-content .view-all-button,
#field-investigation-service .card-content .view-all-button {
width: 9rem;
height: 2.1875rem;
padding: 0.75rem 1.4rem;
align-items: center;
color: #FFF;
background-color: transparent;
border: 1px solid #FFF;
}
#double-gate .card-content .view-all-button .view-all-button-text,
#matching .card-content .view-all-button .view-all-button-text,
#field-investigation-service .card-content .view-all-button .view-all-button-text {
    margin-left: 0;
}
#double-gate .card-content .view-all-button .right-arrow,
#matching .card-content .view-all-button .right-arrow,
#field-investigation-service .card-content .view-all-button .right-arrow {
    margin-left: 2rem;
}
@media screen and (max-width: 1200px) {
    #double-gate .card.animate1.card-wide.card-wide-other,
#matching .card.animate1.card-wide.card-wide-other,
#field-investigation-service .card.animate1.card-wide.card-wide-other {
    width: 100%;
}

#double-gate .card-bg-img-other img,
#matching .card-bg-img-other img,
#field-investigation-service .card-bg-img-other img {
    transform: translate(73px, -15px) scale(1.3);
    object-position: right;
}

@media (hover: hover) and (pointer: fine) {
    #double-gate .card.animate1.card-wide.card-wide-other:hover .card-bg-img-other img,
    #matching .card.animate1.card-wide.card-wide-other:hover .card-bg-img-other img,
    #field-investigation-service .card.animate1.card-wide.card-wide-other:hover .card-bg-img-other img {
        transform: translate(73px, -15px) scale(1.4);
        transition: transform 0.3s ease;
    
    }
    }
}
@media screen and (max-width: 768px) {
    #double-gate .card-bg-img-other img,
    #matching .card-bg-img-other img,
    #field-investigation-service .card-bg-img-other img {
    transform: translate(0, 0) scale(1);
    object-position: center;
}
    #double-gate .card-bg-img-other img,
    #matching .card-bg-img-other img,
    #field-investigation-service .card-bg-img-other img {
        height: auto;
        transform: translate3d(0,0,0);
    }
    #double-gate .card-content,
    #matching .card-content,
    #field-investigation-service .card-content {
        padding: 1.75rem;
        text-align: start;
        width: 100%;
    }
    #double-gate .service-intro-mainttl,
    #matching .service-intro-mainttl,
    #field-investigation-service .service-intro-mainttl {
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.75rem; /* 116.667% */
}
#double-gate .card-content .view-all-button .view-all-button-text,
#matching .card-content .view-all-button .view-all-button-text,
#field-investigation-service .card-content .view-all-button .view-all-button-text {
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.34169rem; /* 165.128% */
}

#double-gate .card-content-txt-wrapper p,
#matching .card-content-txt-wrapper p,
#field-investigation-service .card-content-txt-wrapper p {
    margin-top: 0.75rem;
}
#double-gate .card-content .view-all-button, 
#matching .card-content .view-all-button, 
#field-investigation-service .card-content .view-all-button {
    width: 7.5rem;
    height: 1.875rem;
    padding: 0.4rem 0.94rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.34169rem; /* 165.128% */
}
#double-gate .card.animate1.card-wide.card-wide-other,
#matching .card.animate1.card-wide.card-wide-other,
#field-investigation-service .card.animate1.card-wide.card-wide-other {
    height: auto;
}
}

#services .card-content {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 2.5rem;
    height: 100%;
}
@media screen and (max-width: 768px) {
    #services .card-content {
        padding: 1.75rem;
    }
}