@charset "utf-8";

/*-----------------------------------------------
    Scroll-in（li 単位・既存 secMessage と同仕様）
-----------------------------------------------*/
@keyframes aboutFadeUp {
    from {
        opacity: 0;
        transform: translateY(3rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

.jsScrollFade {
    opacity: 0;
}

.jsScrollFade:not(.jsScrollFade--lite) {
    transform: translateY(3rem);
}

.jsScrollFade.is-visible {
    animation: aboutFadeUp 0.8s ease var(--fade-delay, 0s) forwards;
}

.jsScrollFade--lite.is-visible {
    animation: aboutFadeUpLite 0.8s ease var(--fade-delay, 0s) forwards;
}

/*-----------------------------------------------
    Main Visual (Hero)
-----------------------------------------------*/
.secMainVisual {
    position: relative;
}

.secMainVisual .imgMainBg {
    width: 100%;
    height: 65rem;
    object-fit: cover;
    object-position: center top;
    display: block;
    opacity: 0;
    transition: opacity 2s;
}
.secMainVisual .imgMainBg.loaded {
    opacity: 1;
}

@keyframes imgCopySlideIn {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

.secMainVisual .imgCopy {
    /* transform: translate(-50%, 0); */
    width: 100%;
    max-width: 62.5rem;
    pointer-events: none;
    text-align: center;
    margin-top: 1.8rem;
    animation: imgCopySlideIn 0.5s ease-out 1s both;
}

@media screen and (max-width: 1215px) {
    .secMainVisual .imgMainBg {
        height: 101.33vw;
    }

    .secMainVisual .imgCopy {
        bottom: auto;
        top: 10.93vw;
        width: 100%;
        max-width: 32.8rem;
        margin-top: 1.2rem;
        margin-left: 0.8rem;
    }
}
.secMainVisual .bg.lazyload {
    background: url("../../../img/front/about/imgHero.jpg") no-repeat center center / cover;
}
.secMainVisual .bg{
    height: 90rem;
}
.secMainVisual  .titMain{
    font-size: 4rem;
    font-weight: bold;
}
.secMainVisual .FvFlexBox{
    display: flex;
    margin-top: 8.3rem;
}
.secMainVisual .FvFlexItem{
    /* animation: imgCopySlideIn 0.5s ease-out 1s both; */
}
.secMainVisual .flexList{
    display: flex;
    width: 37rem;
}
.secMainVisual .Box1{
    width: calc((100% - 1rem) / 2);
    border: 0.1rem solid var(--color-main);
    background: var(--color-white);
    padding: 1.8rem 0;
    text-align: center;
    border-radius: 2.5rem;
}
.secMainVisual .Box1:nth-child(2){
    margin-left: 1rem;
}
.secMainVisual .titMain01{
    font-size: 1.4rem;
    color: var(--color-main);
    font-weight: bold;
    letter-spacing: 0.05em;
}
.secMainVisual .txtMain02{
    font-size: 1.4rem;
    line-height: 2;
    margin-top: 2.3rem;
}
.secMainVisual .BoxBtn{
    background: var(--color-purple);
    max-width: 30rem;
    border-radius: 2.5rem;
    margin-top: 3.3rem;
}
.secMainVisual .btnMore{
    font-size: 1.6rem;
    text-align: center;
    padding: 2.2rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
}
.secMainVisual .BoxImg{
    padding-left: 6.5rem;
    position: relative;
    top: -14rem;
    flex: 1;
}
.secMainVisual .BoxImg.jobGate{
    padding-left: 25.5rem;
    position: relative;
    top: -14rem;
    flex: 1;
    left: -8rem;
}
@media screen and (max-width: 1215px){
    .secMainVisual .bg.lazyload {
        background: url("../../../img/front/about/imgHero.jpg") no-repeat center center / cover;
    }
    .secMainVisual .bg{
        height: auto;
        padding-bottom: 6rem;
    }
    .secMainVisual  .titMain{
        font-size: 2.3rem;
        font-weight: bold;
    }
    .secMainVisual .FvFlexBox{
        display: block;
        margin: 0 auto;
        margin-top: 3.3rem;
        width: 92%;
    }
    .secMainVisual .FvFlexItem{
        /* animation: imgCopySlideIn 0.5s ease-out 1s both; */
        /* width: 95%; */
        margin: 0 auto;
        max-width: 34.5rem;
    }
    .secMainVisual .flexList{
        display: flex;
        width: 37rem;
    }
    .secMainVisual .Box1{
        width: 100%;
        padding: 0.9rem 0 1.1rem;
        text-align: center;
        border-radius: 2.5rem;
        max-width: 12rem;
    }
    .secMainVisual .Box1:nth-child(2){
        margin-left: 0.5rem;
    }
    .secMainVisual .titMain01{
        font-size: 1.1rem;
        letter-spacing: 0;
    }
    .secMainVisual .txtMain02{
        font-size: 1.2rem;
        line-height: 1.66;
        margin-top: 1.3rem;
    }
    .secMainVisual .BoxBtn{
        background: var(--color-purple);
        max-width: 20rem;
        border-radius: 1rem;
        margin-top: 2.3rem;
    }
    .secMainVisual .btnMore{
        font-size: 1.2rem;
        text-align: center;
        padding: 1.5rem 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-white);
    }
    .secMainVisual .BoxImg{
        padding-left: 0;
        position: relative;
        top: 0;
        flex: 1;
        max-width: 30.5rem;
        margin: 0 auto;
        margin-top: 3.2rem;
    }
    .secMainVisual .BoxImg.jobGate{
        padding-left: 0;
        position: relative;
        top: 0;
        flex: 1;
        max-width: 30.5rem;
        margin: 0 auto;
        margin-top: 3.2rem;
        left: 0;
    }
}
/*-----------------------------------------------
    secSkillGate
-----------------------------------------------*/
.secSkillGate {
    position: relative;
}
.secSkillGate:after {
    background: url("../../../img/front/about/icon_Top.png")  center center / cover;
    top: -96rem;
    left: -69px;
    width: 100%;
    height: 106.4rem;
    content: "";
    position: absolute;
    z-index: -1;
}
.secSkillGate .bgsSkill {
    height: auto;
    padding: 14.5rem 0 0;
}
.secSkillGate .titSkillGate{
    font-size: 4.5rem;
    font-weight: bold;
    letter-spacing: 0.01em;
    text-align: center;
}
.secSkillGate .skillFlexBox{
    margin-top: 3.4rem;
    display: flex;
    align-items: center;
} 
.secSkillGate .skillList{
    padding-left: 8.5rem;
    flex: 1;
}
.secSkillGate .skillTxt{
    font-size: 1.4rem;
    line-height: 2;
    color: var(--color-text);
}
.secSkillGate .sikllListbox.lazyloaded{
    background: url("../../../img/front/about/imgMainHero01.png") no-repeat center center / cover;
}
.secSkillGate .sikllListbox{
    height:101rem;
    padding-top: 12.6rem;
    margin-top: -9rem;
}
.secSkillGate .listSkillList{
    display: flex;
    align-items: flex-start;
}
.secSkillGate .listSkillList > .itemSkillList{
    width: calc((100% - 19.2rem) / 4);
    flex-shrink: 0;
}
.secSkillGate .itemSkillListGroup{
    flex: 1;
    min-width: 0;
    margin-left: 6.4rem;
}
.secSkillGate .listSkillListSub{
    display: flex;
}
.secSkillGate .listSkillListSub .itemSkillList{
    width: calc((100% - 12.8rem) / 3);
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 3rem 0 4.2rem;
    background-color: rgb(255, 255, 234);
    margin-left: 6.4rem;
    position: relative;
}
.secSkillGate .listSkillListSub .itemSkillList:first-child{
    margin-left: 0;
}
.secSkillGate .itemSkillList{
    border-radius: 1rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 3rem 0 4.2rem;
}
.secSkillGate .listSkillList > .itemSkillList:first-child{
    background: var(--color-white);
    position: relative;
    top: 12.5rem;
}
.secSkillGate .listSkillList > .itemSkillList,
.secSkillGate .listSkillListSub .itemSkillList:nth-child(-n+2){
    position: relative;
}
.secSkillGate .boxSkillCycle{
    margin-top: 0;
    text-align: center;
    position: relative;
    left: -0.5rem;
}
.secSkillGate .imgSkillCycle{
    display: block;
    width: 75.2rem;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}
.secSkillGate .iconSkillArrow{
    position: absolute;
    top: 50%;
    right: -2.7rem;
    transform: translate(50%, -50%);
    z-index: 2;
    margin: 0;
    line-height: 0;
}
.secSkillGate .listSkillList > .itemSkillList:first-child .iconSkillArrow{
    top: 19.3%;
}
.secSkillGate .iconSkillArrow img{
    display: block;
    width: 5.4rem;
    height: auto;
}
.secSkillGate .listSkillListSub .itemSkillList:last-child{
    justify-content: flex-start;
}
.secSkillGate .txtBox{
    text-align: center;
}
.secSkillGate .txtSkillTit{
    font-size: 2rem;
    font-weight: bold;
}
.secSkillGate .txtSkillTxt{
    font-size: 1.2rem;
    line-height:1.83;
    padding-top: 1.5rem;
}
.secSkillGate .txtBox{
    text-align: center;
    margin-top: 1.7rem;
}
.secSkillGate .linkBox{
    max-width: 16.2rem;
    border-radius: 2.5rem;
    background: var( --color-purple);
    width: 100%;
    margin: 0 auto;
    margin-top: 2.5rem;
}
.secSkillGate .listSkillListSub .itemSkillList:nth-child(1) .linkBox{
   background: var(--color-main);
}
.secSkillGate .listSkillListSub .itemSkillList:nth-child(2) .linkBox{
   background: var(--color-mint);
}
.secSkillGate .linkBox{
    max-width: 16.2rem;
    border-radius: 2.5rem;
    background: var( --color-purple);
    width: 100%;
    margin: 0 auto;
    margin-top: 2.5rem;
}
.secSkillGate .linkBox .btnMore01{
    width: 100%;
    padding: 2rem 0;
    color: var(--color-white);
    display: block;
    margin-top: 0rem;
}
.secSkillGate .img01{
    line-height: 0;
}
.secSkillGate .img01 img{
    display: block;
    width: 12rem;
    height: auto;
    margin: 0 auto;
}
@media screen and (max-width: 1215px){
    .secSkillGate {
        position: relative;
        /* padding: 10rem 0; */
    }
    .secSkillGate:after {
        background: url("../../../img/front/about/icon_Top.png")  center center / cover;
        top: -179rem;
        left: 137px;
        width: 100%;
        height: 100%;
        content: "";
        position: absolute;
        z-index: -1;
        display: none;
    }
    .secSkillGate .bgsSkill {
        height: auto;
        padding: 8rem 0 0;
    }
    .secSkillGate .titSkillGate{
        font-size: 2.4rem;
        font-weight: bold;
        letter-spacing: 0.01em;
        text-align: center;
    }
    .secSkillGate .skillFlexBox{
        margin-top: 3rem;
        display: block;
        align-items: center;
    } 
    .secSkillGate .img{
        max-width: 30.5rem;
        margin: 0 auto;
    }
    .secSkillGate .skillList{
        padding-left: 0;
        flex: 1;
        margin: 0 auto;
        margin-top: 0.5rem;
        padding: 0 0.0rem;
        max-width: 34.5rem;
    }
    .secSkillGate .skillTxt{
        font-size: 1.2rem;
        line-height: 1.66;
        color: var(--color-text);
    }
    .secSkillGate .sikllListbox.lazyloaded{
        background: url("../../../img/front/about/imgMainHero01_sp.png") no-repeat center top / cover;
    }
    .secSkillGate .sikllListbox{
        height: auto;
        padding: 2.8rem 0 4rem;
        margin-top: 0;
    }
    .secSkillGate .listSkillList{
        display: block;
        width: 97.187%;
        margin: 0 auto;
        max-width: 34.5rem;
    }
    .secSkillGate .listSkillList > .itemSkillList,
    .secSkillGate .listSkillListSub .itemSkillList{
        width: 100%;
        margin-left: 0;
        display: grid;
        grid-template-columns: 4.7rem 1fr;
        grid-template-rows: auto auto auto;
        column-gap: 1.2rem;
        align-items: start;
        justify-content: stretch;
        text-align: left;
        padding: 1.5rem 1.5rem 0;
        position: relative;
    }
    .secSkillGate .listSkillList > .itemSkillList{
        height: 13rem;
    }
    .secSkillGate .listSkillListSub .itemSkillList{
        max-width: 28.5rem;
        background-color: rgb(255, 255, 234);
    }
    .secSkillGate .listSkillListSub > .itemSkillList{
        margin-top: 2.5rem;
        padding-bottom: 1.8rem;
    }
    .secSkillGate .itemSkillListGroup{
        margin-left: 0;
        width: 100%;
    }
    .secSkillGate .listSkillListSub{
        display: block;
        position: relative;
        z-index: 1;
    }
    .secSkillGate .listSkillList > .itemSkillList:first-child{
        background: var(--color-white);
        top: 0;
    }
    .secSkillGate .img01{
        width: 5rem;
    }
    .secSkillGate .img01 img{
        width: 100%;
        margin: 0;
        border-radius: 50%;
        max-width: 5rem;
    }
    .secSkillGate .txtBox{
        grid-column: 2;
        /* grid-row: 1; */
        margin-top: 0;
        text-align: left;
        flex: 1;
    }
    .secSkillGate .linkBox{
        grid-column: 2;
        grid-row: 2;
        max-width: 9rem;
        margin: -0.4rem 0 0;
        width: 100%;
    }
    .secSkillGate .iconSkillArrow{
        grid-column: 1 / -1;
        grid-row: 3;
        position: absolute;
        top: auto;
        right: auto;
        left: calc(50% - 4rem);
        transform: none;
        justify-self: center;
        margin: 0.5rem 0 1.6rem;
        line-height: 0;
        z-index: 2;
        /* width: 2rem; */
    }
    .secSkillGate .iconSkillArrow img{
        display: block;
        width: 2rem;
        height: auto;
        /* transform: rotate(90deg); */
    }
    .secSkillGate .listSkillListSub .iconSkillArrow{

left: calc(50% - 1rem);

margin: 2rem 0;

}
    .secSkillGate .listSkillListSub .itemSkillList:last-child{
        padding-bottom: 1.6rem;
        margin-top: 2.8rem;
    }
    .secSkillGate .listSkillListSub .itemSkillList:last-child .iconSkillArrow{
        margin-bottom: 1.2rem;
        margin: 1.5rem 0;
    }
    .secSkillGate .txtSkillTit{
        font-size: 1.4rem;
        font-weight: bold;
        line-height: 1.4;
    }
    .secSkillGate .txtSkillTxt{
        font-size: 1.0rem;
        line-height: 1.66;
        padding-top: 0.4rem;
    }
    .secSkillGate .listSkillListSub .itemSkillList:nth-child(1) .linkBox{
        background: var(--color-main);
        margin-top: 0.61rem;
    }
    .secSkillGate .listSkillListSub .itemSkillList:nth-child(2) .linkBox{
        background: var(--color-mint);
        margin-top: 0.6rem;
    }
    .secSkillGate .linkBox .btnMore01{
        padding: 1.1rem 0;
        font-size: 1rem;
        text-align: center;
    }
    .secSkillGate .boxSkillCycle{
        margin-top: 0;
        text-align: center;
        position: relative;
        left: 0;
        width: calc(100% + 2rem);
        margin-left: -1rem;
        overflow: visible;
    }
    .secSkillGate .imgSkillCycle{
        display: block;
        width: 100%;
        max-width: 34.5rem;
        height: auto;
        margin: 0 auto;
        margin-top: -38.3rem;
    }
}
@media screen and (max-width: 372px){
    .secSkillGate .listSkillListSub .itemSkillList {
        max-width: 27.5rem;
    }
}
@media screen and (max-width: 346px){
    .secSkillGate .listSkillListSub .itemSkillList {
        max-width: 25.5rem;
    }
    .secSkillGate .imgSkillCycle {
        display: block;
        width: 100%;
        max-width: 32.5rem;
        height: auto;
        margin: 0 auto;
        margin-top: -36.3rem;
    }
}
@media screen and (max-width: 335px) {
    .secSkillGate .txtSkillTxt {
        font-size: 0.9rem;
    }
    .secSkillGate .listSkillListSub .itemSkillList {
        max-width: 24rem;
    }
    .secSkillGate .imgSkillCycle {
        display: block;
        width: 100%;
        max-width: 32.5rem;
        height: auto;
        margin: 0 auto;
        margin-top: -34.3rem;
    }
}
/*-----------------------------------------------
    Curve Content Section
-----------------------------------------------*/
.secGateList {
    margin-top: 1rem;
}
.secGateList .titBox1 {
    text-align: center;
}
.secGateList .titMain03 {
    font-size: 4.5rem;
    font-weight: bold;
    letter-spacing: 0;
}
.secGateList .listGateList {
    margin-top: 8rem;
}
.secGateList .itemGateList {
    background: var(--color-white);
    padding: 10rem 0 8.8rem;
    position: relative;
}
.secGateList .itemGateList:nth-child(odd) {
    margin-left: auto;
    max-width: 171rem;
    border-radius: 5rem 0 0 5rem;
    margin-top: 9.8rem;
}
.secGateList .itemGateList:first-child{
    margin-top: 0;
}
.secGateList .itemGateList:nth-child(even) {
    margin-right: auto;
    max-width: 171rem;
    border-radius: 0 5rem 5rem 0;
    margin-top: 9.8rem;
    padding-bottom: 10.7rem;
}
.secGateList .itemGateList:nth-child(3) {
    padding-bottom: 10.7rem;
}
.secGateList .itemGateList:nth-child(even) .boxGateIntroImg {
    position: relative;
}
.secGateList .itemGateList:nth-child(even) .boxGateIntroImg .imgGateNum {
    position: absolute;
    left: 0.3rem;
    top: -2.8rem;
    z-index: 1;
    margin-bottom: 0;
}
.secGateList .itemGateList:nth-child(even) .numGateStep {
    background-color: var(--color-main);
}
.secGateList .itemGateList:nth-child(even) .swiperGateStep .swiper-slide:not(:last-child)::after {
    border-left-color: var(--color-main);
    top: calc(50% - 3.3rem);
    /* left: -0.1rem; */
    right: -2.5rem;
}
.secGateList .itemGateList:nth-child(3) .numGateStep {
    background-color: var(--color-mint);
}
.secGateList .itemGateList:nth-child(3) .swiperGateStep .swiper-slide:not(:last-child)::after {
    border-left-color: var(--color-mint);
    top: calc(50% - 3.2rem);
}
.secGateList .itemGateList .wrapper1310 {
    position: relative;
}

/* 番号 */
.secGateList .imgGateNum {
    margin-bottom: 3rem;
    position: absolute;
    left: 0.3rem;
    top: -2.8rem;
}
.secGateList .imgGateNum img {
    width: 7.6rem;
    height: auto;
    /* opacity: 0.5; */
}
.secGateList .itemGateList:nth-child(2) .imgGateNum img {
    width: 9.3rem;
}
.secGateList .itemGateList:nth-child(3) .imgGateNum img {
    width: 9.2rem;
}

/* イントロ */
.secGateList .boxGateIntro {
    display: flex;
    align-items: center;
    gap: 8rem;
    position: relative;
}
.secGateList .boxGateIntroImg {
    flex: 0 0 60rem;
    max-width: 60rem;
}
.secGateList .boxGateIntroTxt {
    flex: 1;
}
.secGateList .itemGateList:nth-child(2) .boxGateIntroTxt {
    position: relative;
    left: 19.8rem;
}
.secGateList .titGateIntro {
    font-size: 5rem;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.32;
    margin-bottom: 2rem;
}
.secGateList .txtGateIntro {
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
}

/* 区切り */
.secGateList .boxGateDivider {
    position: relative;
    text-align: center;
    margin: 0 auto;
    margin: 6rem 0 4.8rem;
    max-width: 131rem;
}
.secGateList .boxGateDivider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--color-border);
}
.secGateList .itemGateList:nth-child(2) .boxGateDivider {
    margin-left: auto;
}
.secGateList .titGateDivider {
    display: inline-block;
    position: relative;
    z-index: 1;
    background-color: var(--color-white);
    padding: 0 3rem;
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 0.04em;
}

/* ステップ */
.secGateList .boxGateStepSlider {
    position: relative;
    padding-bottom: 0.5rem;
    max-width: 131rem;
}
.secGateList .itemGateList:nth-child(2) .boxGateStepSlider {
    margin-left: auto;
}
.secGateList .swiperGateStep {
    overflow: visible;
}
.secGateList .swiperGateStep .swiper-slide {
    height: auto;
}
.secGateList .swiperGateStep .swiper-slide:last-child{
    margin-right: 0 !important;
}
.secGateList .itemGateStep {
    position: relative;
    padding-top: 1.5rem;
}
.secGateList .numGateStep {
    position: absolute;
    top: 0;
    left: -0.8rem;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: var(--color-purple);
    color: var(--color-white);
    font-size: 2rem;
    font-weight: bold;
    line-height: 1;
}
.secGateList .boxGateStepImg {
    display: flex;
    align-items: center;
    justify-content: center;
    /* aspect-ratio: 292 / 200; */
    /* background-color: #e8e8e8; */
    border-radius: 2rem;
    margin-bottom: 1.2rem;
    position: relative;
}
.secGateList .txtGateStepPlaceholder {
    font-size: 1.2rem;
    color: var(--color-text-light);
    letter-spacing: 0.04em;
}
.secGateList .txtGateStep {
    font-size: 1.3rem;
    line-height: 1.77;
    letter-spacing: 0.04em;
    text-align: center;
}
.secGateList .txtGateStepNote {
    display: block;
    font-size: 1.1rem;
    margin-top: 0.5rem;
}

/* ステップ間矢印 */
.secGateList .swiperGateStep .swiper-slide {
    position: relative;
}
.secGateList .swiperGateStep .swiper-slide:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -2.7rem;
    z-index: 3;
    top: calc(50% - 4.3rem);
    width: 0;
    height: 0;
    border-top: 0.9rem solid transparent;
    border-bottom: 0.9rem solid transparent;
    border-left: 0.9rem solid var(--color-purple);
}

@media screen and (min-width: 1216px) {
    .secGateList .boxGateStepSlider .swiper-button-prev,
    .secGateList .boxGateStepSlider .swiper-button-next {
        display: none;
    }
}

/* 狭いPC（1920px未満）：角丸側の灰色確保・中身左右均等 */
@media screen and (min-width: 1216px) and (max-width: 1919px) {
    .secGateList .itemGateList:nth-child(odd) {
        --gate-curve-gap: clamp(5rem, 20rem, calc(100% - 131rem));
        margin-left: var(--gate-curve-gap);
        margin-right: 0;
        width: calc(100% - var(--gate-curve-gap));
        max-width: 171rem;
    }
    .secGateList .itemGateList:nth-child(even) {
        --gate-curve-gap: clamp(5rem, 20rem, calc(100% - 131rem));
        margin-right: var(--gate-curve-gap);
        margin-left: 0;
        width: calc(100% - var(--gate-curve-gap));
        max-width: 171rem;
    }
    .secGateList .boxGateIntro {
        width: 100%;
        max-width: 131rem;
        margin-inline: auto;
    }
    .secGateList .boxGateIntroImg,
    .secGateList .boxGateIntroTxt {
        flex: 1 1 0;
        min-width: 0;
    }
    .secGateList .boxGateIntroImg {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex: 1 1 0;
        max-width: none;
    }
    .secGateList .itemGateList:nth-child(even) .boxGateIntroImg {
        align-items: flex-end;
    }
    .secGateList .boxGateIntroImg > img,
    .secGateList .boxGateIntroImg > .img100 {
        width: 100%;
        max-width: 60rem;
    }
    .secGateList .itemGateList:nth-child(2) .boxGateIntroTxt {
        left: 0;
    }
    .secGateList .boxGateDivider {
        margin: 6rem auto 4.8rem;
    }
    .secGateList .itemGateList:nth-child(2) .boxGateDivider {
        margin-left: auto;
        margin-right: auto;
    }
    .secGateList .boxGateStepSlider {
        margin-inline: auto;
    }
    .secGateList .itemGateList:nth-child(2) .boxGateStepSlider {
        margin-left: auto;
        margin-right: auto;
    }
}

/* SP：スライダー */
@media screen and (max-width: 1215px) {
    .secGateList {
        margin: 0 auto;
        margin-top: 3.3rem;
        max-width: 37.5rem;
        overflow: hidden;
    }
    .secGateList .titMain03 {
        font-size: 2.4rem;
        line-height: 1.2;
    }
    .secGateList .listGateList {
        margin-top: 3rem;
    }
    .secGateList .itemGateList {
        padding: 3rem 0 0rem;
        border-radius: 2rem 0 0 2rem;
    }
    .secGateList .itemGateList:nth-child(odd) {
        --gate-curve-gap: 0;
        margin-left: 0;
        margin-right: 0;
        width: auto;
        max-width: 100%;
        border-radius: 2rem;
        padding-bottom: 1rem;
        margin-top: 3rem;
    }
    .secGateList .itemGateList:nth-child(even) {
        --gate-curve-gap: 0;
        margin-left: 0;
        margin-right: 0;
        width: auto;
        border-radius: 2rem;
        max-width: 100%;
        margin-top: 3.1rem;
        padding-bottom: 3.5rem;
    }
    .secGateList .itemGateList:nth-child(even) .boxGateIntroImg .imgGateNum {
        top: -1rem;
    }
    .secGateList .imgGateNum {
        margin-bottom: 0;
        left: 2.7rem;
        top: -1.1rem;
    }
    .secGateList .imgGateNum img {
        width: 3.5rem;
    }
    .secGateList .boxGateIntro {
        flex-direction: column;
        gap: 1.5rem;
        max-width: none;
    }
    .secGateList .itemGateList:nth-child(even) .boxGateIntro {
        flex-direction: column-reverse;
        gap: 1.5rem;
    }
    .secGateList .boxGateIntroImg {
        display: block;
        flex: none;
        max-width: 30.5rem;
        width: 86%;
    }
    .secGateList .itemGateList:nth-child(even) .boxGateIntroImg {
        align-items: stretch;
    }
    .secGateList .boxGateIntroImg img {
        border-radius: 0 2rem 0 2rem;
    }
    .secGateList .titGateIntro {
        font-size: 2rem;
        margin-bottom: 0rem;
        line-height: 1.5;
    }
    .secGateList .txtGateIntro {
        font-size: 1.2rem;
        line-height: 1.83;
    }
    .secGateList .boxGateDivider {
        margin: 0 auto;
        margin: 2.6rem auto 1.8rem;
        max-width: 30.5rem;
    }
    .secGateList .titGateDivider {
        font-size: 1.4rem;
        padding: 0 1.5rem;
    }
    .secGateList .boxGateStepSlider {
        margin-bottom: 0;
        padding-bottom: 0;
        max-width: 30.5rem;
        margin-left: 2.3rem;
    }
    .secGateList .swiperGateStep .swiper-slide {
        width: 24rem;
    }
    .secGateList .numGateStep {
        width: 3rem;
        height: 3rem;
        font-size: 1.4rem;
    }
    .secGateList .txtGateStep {
        font-size: 1.1rem;
    }
    .secGateList .txtGateStepNote {
        font-size: 1rem;
    }
    .secGateList .boxGateStepSlider .swiper-button-prev,
    .secGateList .boxGateStepSlider .swiper-button-next {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto 0;
        z-index: 1;
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        box-shadow: 0 0 1.5rem rgba(0, 0, 0, 0.06);
        background: url("../../../img/front/common/arrow.png") #fff no-repeat center center / 1.2rem;
        display: none;
    }
    .secGateList .boxGateStepSlider .swiper-button-prev {
        left: -1rem;
        transform: scale(-1, 1);
    }
    .secGateList .boxGateStepSlider .swiper-button-next {
        right: -1rem;
    }
    .secGateList .boxGateStepSlider .swiper-button-prev::after,
    .secGateList .boxGateStepSlider .swiper-button-next::after {
        display: none;
    }
    .secGateList .boxGateStepSlider .swiper-button-next.swiper-button-disabled,
    .secGateList .boxGateStepSlider .swiper-button-prev.swiper-button-disabled {
        opacity: 0;
    }
    .secGateList .boxGateIntroTxt {
        flex: 1;
        padding: 0 2.3rem;
    }
    .secGateList .boxGateStepImg {
        margin-bottom: 1rem;
    }
    .secGateList .swiperGateStep .swiper-slide:not(:last-child)::after {
        content: '';
        position: absolute;
        right: -2rem;
        z-index: 3;
        top: calc(50% - 4.3rem);
        width: 0;
        height: 0;
        border-top: 0.9rem solid transparent;
        border-bottom: 0.9rem solid transparent;
        border-left: 0.9rem solid var(--color-purple);
        display: none;
    }
    .secGateList .itemGateList:nth-child(2) .imgGateNum img {
        width: 4.5rem;
        border-radius: 0;
    }
    .secGateList .itemGateList:nth-child(2) .boxGateStepSlider {
        margin-left: 2.3rem;
    }
    .secGateList .itemGateList:nth-child(even) .swiperGateStep .swiper-slide:not(:last-child)::after {
        top: calc(50% - 2.8rem);
        right: -1.6rem;
    }
    .secGateList .itemGateList:nth-child(even) .numGateStep {
        top: 0.5rem;
    }
    .secGateList .itemGateList:nth-child(3) .imgGateNum img {
        width: 4.5rem;
    }
    .secGateList .itemGateList:nth-child(3) .numGateStep {
        top: 0.5rem;
    }
    .secGateList .itemGateList:nth-child(3) {
        padding-bottom: 3.3rem;
    }
    .secGateList .swiperGateStep .swiper-slide:not(:last-child) .boxGateStepImg::after {
        content: '';
        position: absolute;
        right: -2rem;
        z-index: 3;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-top: 0.9rem solid transparent;
        border-bottom: 0.9rem solid transparent;
        border-left: 0.9rem solid var(--color-purple);
    }
    .secGateList .itemGateList:nth-child(even) .swiperGateStep .swiper-slide:not(:last-child) .boxGateStepImg::after {
        border-left-color: var(--color-main);
        right: -2rem;
    }
    .secGateList .itemGateList:nth-child(3) .swiperGateStep .swiper-slide:not(:last-child) .boxGateStepImg::after {
        border-left-color: var(--color-mint);
    }
    .secGateList .itemGateList:nth-child(2) .boxGateIntroTxt {
        position: relative;
        left: 0;
    }
}

/*-----------------------------------------------
    Member Entry Section
-----------------------------------------------*/
.secMemberEntry {
    margin-top: 18rem;
}
.secMemberEntry .memberBg {
    padding: 8.7rem 0 9rem;
    min-height: 47rem;
}
.secMemberEntry .memberBg.lazyloaded {
    background: url("../../../img/front/about/meberBg.jpg") no-repeat center center / cover;
}
.secMemberEntry .boxMemberEntry {
    width: 100%;
    margin: 0 auto;
    max-width: 84rem;
}
.secMemberEntry .titMemberEntry {
    text-align: center;
    font-size: 3.6rem;
    font-weight: bold;
    color: var(--color-white);
    letter-spacing: 0.04em;
    margin-bottom: 4.2rem;
}
.secMemberEntry .boxMemberRegister {
    display: flex;
    align-items: center;
    gap: 5rem;
    background-color: var(--color-white);
    border-radius: 0.6rem;
    padding: 2.7rem 2.8rem 3.2rem;
}
.secMemberEntry .boxMemberRegisterImg {
    /* flex: 0 0 28%; */
    width: 23rem;
    /* max-width: 50rem; */
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 230 / 160;
    /* background-color: #e8e8e8; */
    border-radius: 2rem;
}
.secMemberEntry .txtMemberRegisterPlaceholder {
    font-size: 1.2rem;
    color: var(--color-text-light);
    letter-spacing: 0.04em;
}
.secMemberEntry .boxMemberRegisterBody {
    flex: 1;
    position: relative;
    top: 1rem;
}
.secMemberEntry .listMemberRegister {
    list-style: none;
    margin: 0 0 3rem;
    padding: 0;
}
.secMemberEntry .itemMemberRegister {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.secMemberEntry .itemMemberRegister + .itemMemberRegister {
    margin-top: 0rem;
}
.secMemberEntry .numMemberRegister {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--color-text);
    color: var(--color-white);
    font-size: 1.2rem;
    font-weight: bold;
    line-height: 1;
}
.secMemberEntry .txtMemberRegister {
    flex: 1;
    font-size: 1.4rem;
    line-height: 1.71;
    letter-spacing: 0.04em;
    margin: 0;
    padding-top: 0;
}
.secMemberEntry .btnMemberRegister {
    display: block;
    width: 100%;
    max-width: 33rem;
    margin: 0 auto 0 0;
    padding: 2rem;
    border-radius: 0.5rem;
    background: linear-gradient(90deg, #ff5e99 0%, #ff7676 100%);
    color: var(--color-white);
    font-size: 1.6rem;
    font-weight: bold;
    letter-spacing: 0.04em;
    text-align: center;
    text-decoration: none;
    /* transition: opacity 0.3s, transform 0.3s; */
    position: relative;
    top: -2rem;
}
.secMemberEntry .btnMemberRegister:hover {
    opacity: 0.85;
}

@media screen and (max-width: 1215px) {
    .secMemberEntry {
        margin-top: 8rem;
    }
    .secMemberEntry .memberBg.lazyloaded {
        background: url(../../../img/front/about/meberBg_sp.jpg) no-repeat center center / cover;
    }
    .secMemberEntry .memberBg {
        padding: 5rem 0 5.1rem;
        min-height: 0;
    }
    .secMemberEntry .boxMemberEntry {
        width: 100%;
        margin: 0 auto;
        max-width: 34.5rem;
    }
    .secMemberEntry .titMemberEntry {
        font-size: 2rem;
        margin-bottom: 2.5rem;
    }
    .secMemberEntry .boxMemberRegister {
        position: relative;
        flex-direction: column;
        gap: 0;
        padding: 2rem 2rem 2rem;
        border-radius: 0.6rem;
        margin-top: 6rem;
    }
    .secMemberEntry .boxMemberRegisterImg {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        flex: none;
        width: auto;
        max-width: none;
        aspect-ratio: auto;
        border-radius: 2rem;
        padding: 0.5rem 1.2rem;
        /* background-color: #e8e8e8; */
        width: 12.5rem;
        height: 8.5rem;
    }
    .secMemberEntry .txtMemberRegisterPlaceholder {
        font-size: 1.1rem;
        line-height: 1.45;
        text-align: center;
        color: var(--color-text);
    }
    .secMemberEntry .boxMemberRegisterBody {
        top: 0;
        width: 100%;
    }
    .secMemberEntry .listMemberRegister {
        margin-bottom: 2rem;
        padding: 3.2rem 3.2rem 0;
    }
    .secMemberEntry .itemMemberRegister {
        gap: 0.8rem;
    }
    .secMemberEntry .itemMemberRegister + .itemMemberRegister {
        margin-top: 0.2rem;
    }
    .secMemberEntry .numMemberRegister {
        width: 2rem;
        height: 2rem;
        font-size: 1.2rem;
    }
    .secMemberEntry .txtMemberRegister {
        font-size: 1.2rem;
        line-height: 1.5;
        padding-top: 0;
    }
    .secMemberEntry .btnMemberRegister {
        max-width: none;
        width: 100%;
        margin: 0;
        top: -0.2rem;
        font-size: 1.4rem;
        padding: 1.9rem 0 2rem;
        border-radius: 0.5rem;
        box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.12);
    }
}

/*-----------------------------------------------
    Worries (FAQ) Section
-----------------------------------------------*/
.secworries {
    background-color: #e8e8e8;
    padding: 16.8rem 0 0rem;
}
.secworries .titWorries {
    text-align: center;
    font-size: 4.5rem;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 1.33;
    color: var(--color-text);
    margin-bottom: 5rem;
}
.secworries .listWorries {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.secworries .itemWorries {
    background-color: var(--color-white);
    border-radius: 4rem;
    padding: 3.6rem 5rem 3.6rem;
}
.secworries .itemWorries:nth-child(9) {
    padding: 3.6rem 5rem 3.6rem;
}
.secworries .txtWorriesQ {
    font-size: 2.2rem;
    font-weight: bold;
    line-height: 1.6;
    letter-spacing: 0;
    color: var(--color-text);
    margin: 0 0 0.5rem;
}
.secworries .lblWorriesQ {
    color: var(--color-main);
    margin-right: 0.3em;
}
.secworries .txtWorriesA {
    font-size: 1.4rem;
    line-height: 2;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
    margin: 0;
    position: relative;
    left: 3rem;
}

@media screen and (max-width: 1215px) {
    .secworries {
        padding: 7.4rem 0 0rem;
    }
    .secworries .titWorries {
        font-size: 2.4rem;
        letter-spacing: 0;
        margin-bottom: 3rem;
        line-height: 1.2;
    }
    .secworries .listWorries {
        gap: 0.5rem;
        max-width: 34.5rem;
        margin: 0 auto;
    }
    .secworries .itemWorries {
        border-radius: 0.8rem;
        padding: 1.7rem 2rem 1.7rem;
    }
    .secworries .txtWorriesQ {
        font-size: 1.3rem;
        line-height: 1.57;
        margin-bottom: 0rem;
        display: inline-flex;
    }
    .secworries .txtWorriesA {
        font-size: 1.2rem;
        line-height: 1.66;
        left: 0;
    }
    .secworries .itemWorries:nth-child(9) {
        padding: 1.7rem 2rem 1.6rem;
    }
}

/*-----------------------------------------------
    secBtn (CTA)
-----------------------------------------------*/
.secBtn{
    background-color: #e8e8e8;
    padding: 10.2rem 2rem 16rem;
    text-align: center;
}
.secBtn .btnMore.shine{
    display: block;
    max-width: 50rem;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    background: var(--color-purple);
    color: var(--color-white);
    border-radius: 2.5rem;
    padding: 3.4rem 2rem;
    box-sizing: border-box;
}
.secBtn .btnMore.shine .txtBtnMain{
    display: block;
    position: relative;
    z-index: 1;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.05em;
}
.secBtn .btnMore.shine .txtBtnSub{
    display: block;
    position: relative;
    z-index: 1;
    margin-top: 0.4rem;
    font-size: 1.4rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
}
.secBtn .btnMore.shine::after{
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: -100%;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0) 44%, rgba(255, 255, 255, 0.35) 48%, rgba(255, 255, 255, 0.35) 52%, rgba(255, 255, 255, 0) 56%);
    animation: aboutBtnShine 4s linear infinite;
    pointer-events: none;
}
@keyframes aboutBtnShine{
    0%{
        transform: translateX(0);
    }
    10%{
        transform: translateX(200%);
    }
    100%{
        transform: translateX(200%);
    }
}

@media screen and (max-width: 1215px){
    .secBtn{
        padding: 5.1rem 2rem 15rem;
    }
    .secBtn .btnMore.shine{
        padding: 2rem 1.5rem;
        border-radius: 1.5rem;
        max-width: 30.5rem;
    }
    .secBtn .btnMore.shine .txtBtnMain{
        font-size: 1.6rem;
    }
    .secBtn .btnMore.shine .txtBtnSub{
        font-size: 1.2rem;
    }
}
.cmnFooter {
    margin: 0rem 0 0;
}


/* JobGet */

.JobGet .secMainVisual .bg.lazyload {
    background: url(../../../img/front/about/imgHero_Job.jpg) no-repeat center center / cover;
}
.JobGet .secMainVisual .Box1 {
    border: 0.1rem solid var(--color-mint);
    background: var(--color-white);
}
.JobGet .secMainVisual .Box1:first-child{
    width: 25rem;
}
.JobGet .secMainVisual .Box1:nth-child(2) {
    width: 18rem;
}
.JobGet .secMainVisual .titMain01 {
    color: var(--color-mint);
}
.JobGet .secMainVisual .BoxBtn {
    background: var(--color-mint);
}
.JobGet .secMainVisual .flexList {
    width: 51rem;
}
.JobGet .secGateList .boxGateIntroImg {
    flex: 0 0 85rem;
    max-width: 85rem;
    left: -1.9rem;
    top: 10px;
    position: relative;
}
.JobGet .secGateList .itemGateList {
    padding: 10rem 0 11rem;
}
.JobGet .secGateList .boxGateIntro {
    gap: 1rem;
}
.JobGet .secGateList .titGateIntro {
    margin-bottom: 1rem;
}
.JobGet .secGateList .boxGateStepSlider {
    max-width: 97.4rem;
    margin-left: 16.5rem;
}
.JobGet .secGateList .numGateStep {
    background-color: var(--color-mint);
}
.JobGet .secGateList .swiperGateStep .swiper-slide:not(:last-child)::after {
    border-left: 0.9rem solid var(--color-mint);
    top: calc(50% - 3.7rem);
    right: -3rem;
}
.JobGet .secMemberEntry .btnMemberRegister {
    background: linear-gradient(90deg, var(--color-btn-jobgate) 0%, var(--color-main) 100%);
    position: relative;
    top: -2rem;
}
.JobGet .secMemberEntry .memberBg.lazyloaded {
    background: url(../../../img/front/about/meberBg_Job.jpg) no-repeat center center / cover;
}
.JobGet .secBtn {
    padding: 10.1rem 2rem 20rem;
}
.JobGet .secBtn .btnMore.shine {
    background-color: rgb(1, 184, 191);
}
@media screen and (max-width: 1919px){
    .JobGet .secGateList .boxGateIntroImg {
        flex: 0 0 63rem;
        max-width: 85rem;
    }
}
@media screen and (max-width: 1215px){
    .JobGet .secMainVisual .bg.lazyload {
        background: url(../../../img/front/about/imgHero_Job_sp.jpg) no-repeat center center / cover;
    }
    .JobGet .secMainVisual .Box1 {
        border: 0.1rem solid var(--color-mint);
        background: var(--color-white);
    }
    .JobGet .secMainVisual .Box1:first-child{
        width: 100%;
        max-width: 17rem;
        padding: 1.1rem 0.2rem;
    }
    .JobGet .secMainVisual .Box1:nth-child(2) {
        width: 100%;
        margin-left: 0.5rem;
    }
    .JobGet .secMainVisual .flexList {
        width: 30rem;
    }
    .JobGet .secSkillGate .bgsSkill {
        padding: 5.4rem 0 0;
    }
    .JobGet .secSkillGate .titSkillGate {
        line-height: 1.3;
    }
    .JobGet .secGateList {
        margin-top: 0rem;
    }
    .JobGet .secGateList .listGateList {
        margin-top: 1.7rem;
    }
    .JobGet .secGateList .boxGateIntroImg {
        flex: none;
        max-width: 29rem;
        left: 0;
        top: 10px;
        position: relative;
        margin-bottom: 2.3rem;
    }
    .JobGet .secGateList .itemGateList {
        padding: 4rem 0 3.2rem;
        margin-top: 2.5rem;
    }
    .JobGet .secGateList .txtGateIntro {
        line-height: 1.66;
    }
    .JobGet .secGateList .boxGateIntro {
        gap: 1rem;
    }
    .JobGet .secGateList .titGateIntro {
        margin-bottom: 0.5rem;
    }
    .JobGet .secGateList .boxGateStepSlider {
        max-width: 30.5rem;
        margin-left: 2.3rem;
    }
    .JobGet .secGateList .numGateStep {
        background-color: var(--color-mint);
    }
    .JobGet .secGateList .swiperGateStep .swiper-slide:not(:last-child)::after {
        border-left: 0.9rem solid var(--color-mint);
        top: calc(50% - 3.2rem);
        right: -1.7rem;
    }
    .JobGet .secGateList .swiperGateStep .swiper-slide:not(:last-child) .boxGateStepImg::after {
        border-left-color: var(--color-mint);
        right: -2rem;
    }
    .JobGet .secMemberEntry .btnMemberRegister {
        background: linear-gradient(90deg, var(--color-btn-jobgate) 0%, var(--color-main) 100%);
        position: relative;
        top: 0;
    }
    .JobGet .secMemberEntry .memberBg.lazyloaded {
        background: url(../../../img/front/about/meberBg_Job_sp.jpg) no-repeat center center / cover;
    }
    .JobGet .secBtn {
        padding: 5.1rem 2rem 10rem;
    }
    .JobGet .secBtn .btnMore.shine {
        background-color: rgb(1, 184, 191);
    }
    .JobGet .secworries {
        padding: 7.8rem 0 5.1rem;
    }
    .JobGet .secworries .titWorries {
        font-size: 2.4rem;
        letter-spacing: 0;
        margin-bottom: 2.7rem;
        line-height: 1.2;
    }
    .JobGet .secworries .itemWorries {
        border-radius: 0.8rem;
        padding: 1.7rem 1.8rem 1.7rem;
    }
}
/* JOB GATE：ステップ3つ（about.js の slidesPerView:4 を CSS で上書き） */
@media screen and (min-width: 1216px) {
    .boxGateStepSlider--cols3 .swiperGateStep .swiper-slide {
        width: calc((100% - 88px) / 3) !important;
    }
    .boxGateStepSlider--cols3 .swiperGateStep .swiper-slide:nth-child(3) {
        margin-right: 0 !important;
    }
}
.secworries .linkWorries{
    display: inline-block;
    color: var(--color-main);
}
.JobGet .secworries .linkWorries{
    display: inline-block;
    color: var( --color-mint);
}