@charset "UTF-8";

/* ----------　トップエリア ---------- */
.topArea{
    position: relative;
}
.topArea_main_image_sp{
    width: 89.3333vw;
    display: block;
}
.topArea_happy{
    position: absolute;
    width: 59.7333vw;
    top: 70.1333vw;
    right: 10px;
    z-index: 10;
}
.topArea p{
    width: 89.3333vw;
    margin: 29.6vw auto 0;
    background-image: url(../image/top_bg_net.svg);
    background-repeat: repeat;
    background-size: 15px, 15px;
    padding: 32px 35px;
    box-sizing: border-box;
    border-radius: 15px;
    font-size: 1.3rem;
    line-height: 1.5384;
    text-align: justify;
}
.scrollBtn {
    position: absolute;
    z-index: 10;
    top: 114.666vw;
    left: 5.86666vw;
    width: 40px;
    -webkit-transition: top 1.5s ease-out,opacity .5s;
    transition: top 1.5s ease-out,opacity .5s;
}
.scrollBtn.float {
    top: 120vw;
}
.scrollBtn img {
    width: 100%;
}

.fadeIn {
animation-name: fadeInAnime;/*アニメーションの定義名*/
animation-duration:0.5s;/*アニメーション変化時間 ※デフォルト*/
animation-fill-mode:forwards;/*アニメーションの開始と終了時の状態を指定*/
opacity:0;
}

/*アニメーションの開始から終了までを指定する*/
@keyframes fadeInAnime{
  from {
    opacity: 0;
  transform: translateX(-60px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}


@media print, screen and (min-width: 768px) {
    .topArea_main_image_sp{
        display: none;
    }
    .topArea_main_image_pc_container{
        position: relative;
        left: 0;
        width: 61.481%;
        height: 490px;
        z-index: 10;
    }
    .topArea_main_image_pc{
        position: absolute;
        width: 97.587481%;
        height: 469px;
        background: url(../image/topArea_main_image_pc.jpg);
        background-size: cover;
        background-position: top right;
        border-radius: 0 50px 50px 0;
        z-index: 5;
    }
    .topArea_main_bg_pc{
        position: absolute;
        top: 19px;
        width: 100%;
        height: 469px;
        background-image: url(../image/top_bg_pink.png);
        background-size: 15px, 15px;
        background-repeat: repeat;
        border-radius: 0 50px 50px 0;
        z-index: 1;
    }
    .topArea_happy{
        position: absolute;
        width: 358px;
        top: 30px;
        left: 64.07%;
        z-index: 10;
    }
    .topArea p{
        position: absolute;
        top: 414px;
        left: calc((100% - 1024px) / 2);
        width: 863px;
        height: 300px;
        margin: 0;
        background-size: 30px, 30px;
        padding: 120px 42px 52px;
        border-radius: 30px;
        font-size: 1.6rem;
        line-height: 1.625;
    }
    .scrollBtn {
        position: absolute;
        z-index: 10;
        top: 517px;
        left: 91.28%;
        width: 40px;
        -webkit-transition: top 1.5s ease-out,opacity .5s;
        transition: top 1.5s ease-out,opacity .5s;
    }
    .scrollBtn.float {
        top: 545px;
    }
    .scrollBtn img {
        width: 100%;
    }
}



/* ---------- コンテンツ共通 ---------- */
.employmentCont {
    padding-bottom: 60px;
}
@media print, screen and (min-width: 768px) {
    .employmentCont {
        width: 1024px;
        margin: 0 auto;
        padding-bottom: 100px;
    }
}


/* ---------- 仕事 JOB ---------- */
.jobArea {
    width: 89.3%;
    margin: 50px auto 0;
}
.jobArea p {
    color: #000000;
    font-size: 1.4rem;
    line-height: 1.6428;
    margin-top: 20px;
}
.jobArea .buttonPink {
    margin-top: 20px;
}

@media print, screen and (min-width: 768px) {
    .jobArea {
        width: 100%;
        margin: 314px auto 0;
    }
    .jobArea p {
        font-size: 1.6rem;
        line-height: 1.0;
        text-align: center;
        margin: 30px 0 0;
    }
    .jobArea .buttonPink {
        width: 324px;
        margin: 40px auto 0;
    }
}


/* ---------- インタビュー INTERVIEW ---------- */
.interviewArea {
    width: 89.3%;
    margin: 55px auto 0;
}
.interviewArea .interviewDiscription {
    color: #000000;
    font-size: 1.4rem;
    line-height: 1.6428;
    margin-top: 20px;
}
.interviewBlock a{
    display: block;
    margin-top: 25px;
    text-decoration: none;
}
.interview_image{
    position: relative;
    width: 100%;
    height: 52vw;
}
.interview_image img{
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 52vw;
    border-radius: 1.866666vw;
}
.interview_image:before{
    content: '';
    position: absolute;
    background-image: url(../image/top_bg_pink.png);
    background-size: 10px, 10px;
    background-repeat: repeat;
    width: 100%;
    height: 52vw;
    border-radius: 1.866666vw;
    bottom: -7px;
    right: -7px;
    z-index: 0;
}
.interview_image .fa-chevron-right {
    position: absolute;
    right: 8px;
    bottom: 6px;
    color: #000;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    z-index: 5;
}
.interviewBlock_text01{
    display: inline-block;
    margin-top: 16px;
    font-size: 1.2rem;
    color: #FFF;
    line-height: 1;
    text-align: center;
    background-color: #07219B;
    padding: 7px 12px;
    border-radius: 20px;
    white-space: nowrap;
}
.interviewBlock_text01.interviewBlock_text01_sp_wide{
    padding: 7px 4px;
    letter-spacing: -0.14em;
}
.interviewBlock_text02{
    display: block;
    margin-top: 7px;
    font-size: 1.3rem;
    line-height: 1;
    color: #323232;
}
.interviewBlock_text02 > span{
    font-size: 1.1rem;
    vertical-align: 0.1rem;
}

@media print, screen and (min-width: 768px) {
    .interviewArea {
        width: 100%;
        margin: 93px auto 0;
    }
    .interviewArea .interviewDiscription {
        color: #000000;
        font-size: 1.6rem;
        line-height: 1;
        margin-top: 30px;
        text-align: center;
    }
    .interviewBlock{
        margin-top: 40px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 40px 0;
    }
    .interviewBlock a{
        margin-top: 0px;
        transition: 0.5s;
    }
    .interviewBlock a:hover{
        opacity: 0.4;
    }
    .interview_image{
        position: relative;
        width: 500px;
        height: 290px;
    }
    .interview_image img{
        width: 500px;
        height: 290px;
        border-radius: 10px;
    }
    .interview_image:before{
        width: 500px;
        height: 290px;
        border-radius: 10px;
        bottom: -10px;
        right: -10px;
        background-size: 15px, 15px;
    }
    .interview_image .fa-chevron-right {
        position: absolute;
        right: 13px;
        bottom: 10px;
        font-size: 1.8rem;
    }
    .interviewBlock_text01{
        margin-top: 27px;
        font-size: 1.4rem;
        padding: 6px 15px;
        letter-spacing: 0em;
        border-radius: 13px;
    }
    .interviewBlock_text01.interviewBlock_text01_sp_wide{
        padding: 6px 15px;
        letter-spacing: 0em;
    }
    .interviewBlock_text02{
        display: block;
        margin-top: 13px;
        font-size: 1.6rem;
        line-height: 1;
        color: #323232;
    }
    .interviewBlock_text02 > span{
        font-size: 1.2rem;
        vertical-align: 0.2rem;
    }

}


/* ---------- 募集要項 INFORMATION ---------- */
.informationArea {
    width: 89.3%;
    margin: 60px auto 0;
    font-size: 0;
}
.information_image{
    position: relative;
    width: 100%;
    height: 40vw;
    margin-top: 25px;
}
.information_image img{
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 40vw;
    border-radius: 1.866666vw;
}
.information_image:before{
    content: '';
    position: absolute;
    background-image: url(../image/top_bg_pink.png);
    background-size: 10px, 10px;
    background-repeat: repeat;
    width: 100%;
    height: 40vw;
    border-radius: 1.866666vw;
    bottom: -7px;
    right: -7px;
    z-index: 0;
}
.information_newGraduate{
    margin-top: 45px;
    position: relative;
    background-image: url(../image/top_bg_net.svg);
    background-repeat: repeat;
    background-size: 15px, 15px;
    border-radius: 1.866666vw;
    padding: 42px 20px 20px;
}
.information_newGraduate h3 img{
    width: 215px;
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
}
.information_newGraduate_text01{
    font-size: 1.3rem;
    line-height: 1.5384;
    text-align: center;
}
.information_newGraduate .buttonPink{
    width: 235px;
    margin: 20px auto 0;
}
.information_entryBox{
    position: relative;
    margin: 33px auto 0;
    background-color: #FFF;
    padding: 26px 0 20px;
    border-radius: 1.866666vw;
}
.information_entryBox:before{
    position: absolute;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7px 9px 7px;
    border-color: transparent transparent #FFFFFF transparent;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
}
.information_entryBox p{
    font-size: 1.3rem;
    line-height: 1.5384;
    text-align: center;
}
.information_entryBox .information_entryBtn{
    position: relative;
    display: block;
    width: 235px;
    margin: 0 auto;
    background-image: url(../image/top_bg_pink.png);
    background-size: 8px, 8px;
    background-repeat: repeat;
    padding: 23px 0;
    color: #FFF;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1;
    text-align: center;
    border-radius: 30px;
}
.information_entryBox .information_entryBtn > span{
    display: inline-block;
    font-size: 1.2rem;
    vertical-align: 0.1rem;
    margin-left: -5px;
}
.information_entryBox .information_entryBtn > span:after{
    content: '';
    display: inline-block;
    width: 20px;
    height: 18px;
    background-image: url(../../common/image/common_icon_window_white.svg);
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: -0.4rem;
    margin-left: -1px;
}
.information_entryBox .information_entryBtn .fa-chevron-right{
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}
.information_careerRecruitment{
    margin-top: 45px;
    position: relative;
    background-color: #F3F3F3;
    border-radius: 1.866666vw;
    padding: 42px 20px 20px;
}
.information_careerRecruitment h3 img{
    width: 215px;
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
}
.information_careerRecruitment_text01{
    font-size: 1.3rem;
    line-height: 1.5384;
    text-align: center;
}
.careerRecruitment_cmsBlock{
    position: relative;
    margin: 33px auto 0;
    background-color: #FFF;
    padding: 13px 16px 15px;
    border-radius: 1.866666vw;
}
.careerRecruitment_cmsBlock:before{
    position: absolute;
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7px 9px 7px;
    border-color: transparent transparent #FFFFFF transparent;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
}

/* 募集中 */
.careerRecruitment_cmsBlock .recruiting {
    display: none;
}
.careerRecruitment_cmsBlock .recruiting a{
    display: block;
    padding: 12px 0;
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.5384;
    color: #000000;
}
.careerRecruitment_cmsBlock .recruiting a:nth-of-type(n + 2){
    border-top: 1px solid #DFDFDF;
}
.careerRecruitment_cmsBlock .recruiting a .icon:before{
    content: '';
    display: inline-block;
    width: 20px;
    height: 18px;
    background-image: url(../../common/image/common_icon_window_black.svg);
    background-repeat: no-repeat;
    background-size: contain;
    vertical-align: -0.4rem;
    margin-left: 8px;
}
.careerRecruitment_cmsBlock .recruiting a .icon .fa-chevron-right{
    display: inline-block;
    margin-left: 8px;
}

/* 募集を行ってない場合 */
.careerRecruitment_cmsBlock .not_recruiting{
    padding: 48px 0;
}
.careerRecruitment_cmsBlock .not_recruiting p{
    font-size: 1.3rem;
    font-weight: bold;
    line-height: 1.4;
    color: #787878;
    text-align: center;
}


@media print, screen and (min-width: 768px) {
    .informationArea {
        width: 100%;
        margin: 86px auto 0;
    }
    .information_block{
        display: flex;
        justify-content: space-between;
        margin-top: 50px;
    }
    .information_image{
        width: 476px;
        height: 867px;
        margin-top: 0px;
    }
    .information_image img{
        width: 476px;
        height: 867px;
        border-radius: 20px;
    }
    .information_image:before{
        background-size: 15px, 15px;
        width: 476px;
        height: 867px;
        border-radius: 20px;
        bottom: -10px;
        right: -10px;
    }
    .information_newGraduate{
        width: 508px;
        margin-top: 0px;
        border-radius: 10px;
        padding: 55px 33px 33px;
        box-sizing: border-box;
        background-size: 30px, 30px;
    }
    .information_newGraduate h3 img{
        width: 236px;
        top: -20px;
    }
    .information_newGraduate_text01{
        font-size: 1.6rem;
        line-height: 1.625;
    }
    .information_newGraduate .buttonPink{
        width: 324px;
    }
    .information_entryBox{
        position: relative;
        margin: 40px auto 0;
        background-color: #FFF;
        padding: 20px 0 33px;
        border-radius: 10px;
    }
    .information_entryBox:before{
        border-width: 0 10px 13px 10px;
        top: -12px;
    }
    .information_entryBox p{
        font-size: 1.6rem;
        line-height: 1.625;
    }
    .information_entryBox .information_entryBtn{
        display: block;
        width: 324px;
        margin: 20px auto 0;
        background-size: 15px, 15px;
        padding: 34px 0;
        font-size: 1.8rem;
        border-radius: 42px;
        transition: 0.5s;
    }
    .information_entryBox .information_entryBtn .fa-chevron-right{
        right: 18px;
    }
    .information_entryBox .information_entryBtn:hover{
        text-decoration: none;
        opacity: 0.4;
    }
    .information_entryBox .information_entryBtn > span{
        font-size: 1.4rem;
        vertical-align: 0.2rem;
        margin-left: -5px;
    }
    .information_entryBox .information_entryBtn > span:after{
    }
    .information_careerRecruitment{
        margin-top: 71px;
        width: 508px;
        border-radius: 10px;
        padding: 55px 33px 33px;
        box-sizing: border-box;
    }
    .information_careerRecruitment h3 img{
        width: 236px;
        top: -20px;
    }
    .information_careerRecruitment_text01{
        font-size: 1.6rem;
        line-height: 1.625;
    }
    .careerRecruitment_cmsBlock{
        position: relative;
        margin: 40px auto 0;
        background-color: #FFF;
        padding: 13px 34px 18px;
        border-radius: 10px;
    }
    .careerRecruitment_cmsBlock:before{
        border-width: 0 10px 13px 10px;
        top: -12px;
    }

    /* 募集中 */
    .careerRecruitment_cmsBlock .recruiting a{
        padding: 14px 0;
        font-size: 1.8rem;
        transition: 0.5s;
    }
    .careerRecruitment_cmsBlock .recruiting a .icon:before{
        vertical-align: -0.3rem;
    }
    .careerRecruitment_cmsBlock .recruiting a .icon .fa-chevron-right{
        display: inline-block;
        margin-left: 8px;
    }
    .careerRecruitment_cmsBlock .recruiting a:hover{
        text-decoration: none;
        cursor: pointer;
        opacity: 0.4;
    }

    /* 募集を行ってない場合 */
    .careerRecruitment_cmsBlock .not_recruiting{
        padding: 57px 0 55px;
    }
    .careerRecruitment_cmsBlock .not_recruiting p{
        font-size: 1.8rem;
    }

}


/* ---------- よくあるご質問 FAQ ---------- */
.faq {
	width: 89.3%;
	margin: 55px auto 0;
}
.faq .faq_text01 {
    font-size: 1.3rem;
    line-height: 1.5384;
    margin-top: 20px;
}
.faq dl {
    margin: 20px 0 0;
}
.faq dl:first-of-type {
    margin: 22px 0 0;
}
.faq dt {
    background:
        url("../faq/image/faq_icn01.svg"),
        url("../faq/image/faq_icn03.svg"),
        linear-gradient(90deg,#F20C90 0px,#F20C90 35px,#fff 35px,#fff 100%);
	background-repeat:
        no-repeat,
        no-repeat,
        repeat;
	background-position:
        left 10px center,
        right 15px center,
        left center;
	background-size:
        15px 19px,
        18px 11px,
        100%;
    border: solid 1px #c8c8c8;
    border-radius: 10px;
    box-sizing: border-box;
    color: #323232;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    line-height: 1.64;
    padding: 13px 40px 13px 47px;
    width: 100%;
    text-align: justify;
}
.faq dt.up {
    background:
        url("../faq/image/faq_icn01.svg"),
        url("../faq/image/faq_icn04.svg"),
        linear-gradient(90deg,#F20C90 0px,#F20C90 35px,#fff 35px,#fff 100%);
	background-repeat:
        no-repeat,
        no-repeat,
        repeat;
	background-position:
        left 10px center,
        right 15px center,
        left center;
	background-size:
        15px 19px,
        18px 11px,
        100%;
}
.faq dd {
    display: none;
    background:
        url("../faq/image/faq_icn02.svg"),
        linear-gradient(90deg,#07219B 0px,#07219B 35px,#f0f0f0 35px,#f0f0f0 100%);
	background-repeat:
        no-repeat,
        repeat;
	background-position:
        left 11.5px center,
        left center;
	background-size:
        13px 16px,
        100%;
    border-radius: 10px;
    box-sizing: border-box;
    color: #323232;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
    line-height: 1.64;
    padding: 17px 14px 17px 47px;
    margin: 15px 0 0;
    width: 100%;
    text-align: justify;
}
.faq .buttonPink {
    margin: 25px auto 0;
}

@media print, screen and (min-width: 768px) {
    .faq {
        width: 100%;
        margin: 80px auto 0;
    }
    .faq .faq_text01 {
        font-size: 1.6rem;
        line-height: 1;
        text-align: center;
        margin: 30px 0 0;
    }
    .faq dl,
    .faq dl:first-of-type {
        margin: 35px 0 0;
    }
    .faq dt {
        background:
            url("../faq/image/faq_icn01.svg"),
            url("../faq/image/faq_icn03.svg"),
            linear-gradient(90deg,#F20C90 0px,#F20C90 44px,#fff 44px,#fff 100%);
        background-repeat:
            no-repeat,
            no-repeat,
            repeat;
        background-position:
            left 13px center,
            right 23px center,
            left center;
        background-size:
            20px 25px,
            22px 12px,
            100%;
        cursor: pointer;
        font-size: 1.6rem;
        letter-spacing: 0.05em;
        line-height: 1.625;
        padding: 18px 80px 18px 63px;
        width: 100%;
    }
    .faq dt.up {
        background:
            url("../faq/image/faq_icn01.svg"),
            url("../faq/image/faq_icn04.svg"),
            linear-gradient(90deg,#F20C90 0px,#F20C90 44px,#fff 44px,#fff 100%);
        background-repeat:
            no-repeat,
            no-repeat,
            repeat;
        background-position:
            left 13px center,
            right 23px center,
            left center;
        background-size:
            20px 25px,
            22px 12px,
            100%;
    }
    .faq dd {
        background:
            url("../faq/image/faq_icn02.svg"),
            linear-gradient(90deg,#07219B 0px,#07219B 44px,#f0f0f0 44px,#f0f0f0 100%);
        background-repeat:
            no-repeat,
            repeat;
        background-position:
            left 15px center,
            left center;
        background-size:
            16px 19px,
            100%;
        font-size: 1.6rem;
        letter-spacing: 0.05em;
        line-height: 1.625;
        padding: 18px 80px 18px 63px;
        margin: 13px 0 0;
        width: 100%;
        text-align: justify;
    }
    _:-ms-lang(x)::-ms-backdrop, .faq dt, .faq dd {/*  IE11用のハック */
		padding: 20px 80px 16px 63px;
	}
    .faq .buttonBlack {
        width: 275px;
    }
    .faq .buttonPink {
        width: 324px;
        margin: 40px auto 0;
    }
}