@charset "utf-8";

/* ==================================== 
mainVisual
=====================================*/
.mainVisual {
    position: relative;
}

.mv__Sp1 {
    display: block;
    width: 100%;
    margin-top: 93px;
}

.mv__Sp2 {
    display: block;
    width: 100%;
    margin-top: 93px;
}

.mv__Sp3 {
    display: block;
    width: 100%;
    margin-top: 93px;
}

.mainVisual__pcBox {
    display: none;
}

.mainVisual__txt1 {
    position: absolute;
    top: 73.8%;
    left: 2.6%;
    width: 94.9%;
    height: 9.3%;
    font-family: "Noto Sans JP";
    font-size: 6.4vw;
    font-weight: 700;
    line-height: 1.5;
    background: var(--primary-sectionPink);
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

.mainVisual__txt2 {
    position: absolute;
    top: 84.8%;
    left: 2.6%;
    width: 88.5%;
    height: 9.3%;
    font-family: "Noto Sans JP";
    font-size: 6.4vw;
    font-weight: 700;
    line-height: 1.5;
    background: var(--primary-sectionPink);
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

@media screen and (min-width:769px) {
    .mainVisual {
        position: relative;
    }

    .mainVisual__spBox {
        display: none;
    } 

    .mainVisual__pcBox {
        display: block;
        margin-top: 115px;
        width: 91.6%;
        margin-left: auto;
        border-radius: 50px 0 0 50px;
    }

    .mv__Pc1 {
        display: block;
        border-radius: 50px 0 0 50px;
    }
    
    .mv__Pc2 {
        display: block;
        border-radius: 50px 0 0 50px;
    }
    
    .mv__Pc3 {
        display: block;
        border-radius: 50px 0 0 50px;
    }

    .mainVisual__txt1 {
        position: absolute;
        top: 65.5%;
        left: 4.1%;
        width: 40.2%;
        height: 12.6%;
        font-family: "Noto Sans JP";
        font-size: 2.7vw;
        font-weight: 700;
        line-height: 1.5;
        background: var(--primary-sectionPink);
        display: flex; 
        align-items: center; 
        justify-content: center; 
    }
    
    .mainVisual__txt2 {
        position: absolute;
        top: 80.9%;
        left: 4.1%;
        width: 37.5%;
        height: 12.6%;
        font-family: "Noto Sans JP";
        font-size: 2.7vw;
        font-weight: 700;
        line-height: 1.5;
        background: var(--primary-sectionPink);
        display: flex; 
        align-items: center; 
        justify-content: center; 
    }

}

/* ==================================== 
about-top
=====================================*/
.about-top {
    padding: 60px 4.2%;
}

.topic__aboutTop {
    max-width: 228px;
    position: relative;
}

.topic__aboutTop::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 0;
    width: 20px;
    height: 3px;
    background-color: var(--primary-orange);
}

.topic__aboutTop::after {
    position: absolute;
    top: 17px;
    right: 0;
    content: "";
    width: 20px;
    height: 3px;
    background-color: var(--primary-orange);
}

.top__aboutTxt {
    color: var(--primary-black);
    font-size: 1.4rem;
    line-height: 1.7;
    margin: 21px auto;
}

.top__aboutImg {
    margin-top: 21px;
}

@media screen and (min-width:769px) {
    .about-top {
        padding: 120px 20px;
        max-width: 1200px;
        margin: 0 auto;
    }

    .topic__aboutTop {
        max-width: 330px;
        position: relative;
    }

    .topic__aboutTop::before {
        top: 20px;
        width: 50px;
    }

    .topic__aboutTop::after {
        top: 20px;
        width: 50px;
    }

    .top__aboutTxt {
        font-size: 1.6rem;
    }

    .about__contentsTop {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 20px;
    }

    .about_txtBox {
        max-width: 489px;
    }
    
    .top__aboutImg {
        margin-top: 0;
        max-width: 471px;
    }

}

/* ==================================== 
service-top
=====================================*/
.service-top {
    background-color: var(--primary-sectionPink);
    padding: 60px 4.2%;   
}

.topic__serviceTop {
    max-width: 276px;
    position: relative;
}

.topic__serviceTop::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 0;
    width: 20px;
    height: 3px;
    background-color: var(--primary-orange);   
}

.topic__serviceTop::after {
    position: absolute;
    top: 17px;
    right: 0;
    content: "";
    width: 20px;
    height: 3px;
    background-color: var(--primary-orange);
}

.top__serviceTxt {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.7;
    margin-top: 30px;
}

.service__btnGroup {
    margin-top: 30px;
    gap: 20px;
}

.btn__serviceTop {
    display: block;
    margin-top: 20px;
}

@media screen and (min-width:769px) {
    .service-top {
        padding: 120px 0;  
    }

    .topic__serviceTop {
        max-width: 390px;
    }

    .topic__serviceTop::before {
        top: 20px;
        width: 50px;
    }

    .topic__serviceTop::after {
        top: 20px;
        width: 50px;
    }

    .top__serviceTxt {
        font-size: 1.6rem;
        line-height: 2;
        max-width: 861px;
        padding: 0 20px;
        margin: 30px auto 0;
    }

    .service__btnGroup {
        margin-top: 30px;
        display: flex;
        margin: 30px auto 0;
        max-width: 480px;
    }

    .btn__serviceTop {
        margin-top: 0;
    }
}

/* ==================================== 
menuBox-top
=====================================*/
.menuBox-top {
    padding: 60px 4.2%;   
}

.menu__item {
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--primary-btnPink);
    background: #FFF;
    margin: 12px auto 0;
}

.menu__item:first-of-type {
    margin-top: 0;
}

.topic__flowTop {
    max-width: 204px;
    position: relative;
}

.topic__flowTop::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 0;
    width: 20px;
    height: 3px;
    background-color: var(--primary-orange);   
}

.topic__flowTop::after {
    position: absolute;
    top: 17px;
    right: 0;
    content: "";
    width: 20px;
    height: 3px;
    background-color: var(--primary-orange);
}

.top__flowImg img {
    display: block;
    width: 100%;
    margin-top: 12px;
}

.top__flowTxt {
    color: var(--primary-black);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.7; 
    margin: 12px 0;
}

.topic__campanyTop {
    max-width: 240px;
    position: relative;
}

.topic__campanyTop span {
    font-size: 1.8rem;
}

.topic__campanyTop::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 39px;
    width: 20px;
    height: 3px;
    background-color: var(--primary-orange);   
}

.topic__campanyTop::after {
    position: absolute;
    top: 17px;
    right: 39px;
    content: "";
    width: 20px;
    height: 3px;
    background-color: var(--primary-orange);
}

.top__companyImg img {
    display: block;
    width: 100%;
    margin-top: 12px;
}

.top__companyTxt {
    color: var(--primary-black);
    font-size: 1.4rem;
    line-height: 1.7;
    font-weight: 400;
    margin: 12px 0;
}
 
.topic__recruitmentTop {
    max-width: 240px;
    position: relative;    
}

.topic__recruitmentTop span {
    font-size: 1.8rem;
}

.topic__recruitmentTop::before {
    content: "";
    position: absolute;
    top: 17px;
    left: 39px;
    width: 20px;
    height: 3px;
    background-color: var(--primary-orange);   
}

.topic__recruitmentTop::after {
    content: "";
    position: absolute;
    top: 17px;
    right: 39px;
    width: 20px;
    height: 3px;
    background-color: var(--primary-orange);   
}

.top__recruitmentImg img {
    display: block;
    width: 100%;
    margin: 12px auto 0;
}

.top__recruitmentTxt {
    color: var(--primary-black);
    font-size: 1.4rem;
    line-height: 1.7;
    margin: 12px 0;
}

@media screen and (min-width:769px) {
    .menuBox-top {
        padding: 120px 0;   
    }

    .menuBox__list {
        display: flex;
        justify-content: center;
        gap: 24px;
    }

    .menu__item {
        max-width: 343px;
        margin: 0 ;
    } 

    .topic__flowTop {
        max-width: 204px;
        position: relative;
        font-size: 2.4rem;
    }

    .topic__flowTop span {
        font-size: 2.4rem;
    }

    .top__flowTxt {
        font-size: 1.6rem;
    }

    .topic__campanyTop {
        max-width: 240px;
        position: relative;
        font-size: 2.4rem;
    }

    .topic__campanyTop span {
        font-size: 2.2rem;
    }

    .top__companyImg img {
        display: block;
        margin-top: 12px;
    }

    .top__companyTxt {
        font-size: 1.6rem;
    }

    .topic__recruitmentTop {
        max-width: 240px;
        position: relative;  
        font-size: 2.4rem;  
    }

    .topic__recruitmentTop span {
        font-size: 1.9rem;
    }

    .top__recruitmentImg img {
        width: 100%;
        margin: 12px auto 0;
    }

    .top__recruitmentTxt {
        font-size: 1.6rem;
    }
}