/* =================================================================
   main, 特徴
================================================================== */

.panel { position: relative; background-color: #ffffff;}
.panel-wrapper {
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 42px;
    padding: 0 8px;
    .section-title__lead{
        font-size: 14px;
        margin-bottom: 0;
    }
}
@media (max-width: 768px) {
    .panel-wrapper {
        .panel-img{
            width: 100vw;
        }
    }
    .with-itam{
        .step-wrapper.-box-blue{
            padding: 48px 16px;
        }
    }
    .with-helpdesk{
        .step-wrapper.-box-blue{
            padding: 24px 16px;
        }
    }
}

@media (min-width: 769px) {
    section.panel:nth-child(4){
        padding-bottom: 0;
    }
    section.panel:nth-child(4) .panel-img{
        margin-top: -75px;
        max-width: 718px;
    }
    section.panel:nth-child(4) .section-title__lead{
        position: relative;
        z-index: 10;
    }
    .panel-wrapper {
        .section-title__lead{
            font-size: 16px;
        }  
    }
    .with-itam{
       .section.step{
            padding-top: 72px;
        }
        .hero__img-tag{
            width: 775px;
            image-rendering: -webkit-optimize-contrast;
        }
    }
    .with-helpdesk{
        .section.step{
            padding-top: 72px;
        }
        .section.cando{
            padding-top: 30px;
        }
        .hero__img-tag{
            width: 790px;
            image-rendering: -webkit-optimize-contrast;
        }
    }

}


/* =================================================================
   できること
================================================================== */

.cando-wrapper{
    width: 100%;
    max-width: 1220px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    .text-md{
        font-size: 18px;
    }
}

@media (min-width: 769px) {
    .cando-wrapper{
        .card-grid{
            gap: 32px;
        }
    }
}
@media (min-width: 1280px) {
    .cando-wrapper{
        .card-grid{
            gap: 48px;
        }
        .card-item{
            padding: 48px 50px;
        }
        .text-md{
            font-size: 22px;
        }
    }
}

/* =================================================================
   特徴
================================================================== */






/* =================================================================
   STEPエリア
================================================================== */
.step-wrapper.-box-blue{
    gap: 120px;
}
.step-image img{
    box-shadow: 0px 12px 32px 10px rgba(214, 225, 235, 0.54);
    border-radius: 24px;
}
.step-note{
    margin-top: -48px;
}
@media (min-width: 769px) {
    .step-image img{
        max-width: 355px;
    }
    .step-wrapper.-box-blue{
        gap: 100px;
    }
    .step-note{
        margin-top: 50px;
    }
}