@font-face {

    font-family: 'banana';

    src: url('./fonts/bananaslipplus.otf') format('opentype');

}

body {
    font-family: sans-serif;
}


.toptitle_top h3,

.toptitle_bottom_text h3,

.toppage_middle_box h3,

.rare_title h3 {

    font-family: 'banana', sans-serif

}



html {

    margin: 0;

}



body {

    margin: 0;

}



.header {

    background-color: #FFDF5B;

    width: 100%;

    height: 80px;

    text-align: center;

}



.header img {

    width: 18%;

    padding-top: 25px;

}



.toppage_title {

    background-image: url(./image/toppage_titleback1.png);

    width: 100%;

    height: 700px;

    padding-top: 70px;

    background-size: cover;

    background-position: center bottom;

    background-repeat: no-repeat;

}



.top_title {

    background-image:

    radial-gradient(#fff 25%, transparent 25%);

    background-size: 25px 25px;

    width: 900px;

    max-width: 80%;

    text-align: center;

    margin: 0 auto;

    position: relative;

}



.toptitle_top {

    width: 390px;

    max-width: 80%;

    height: 42px;

    line-height: 47px;

    background-color: #3DBCD4;

    border: solid 3px #000;

    border-radius: 100vh;

    color: #000;

    text-align: center;

    margin: 0 auto;

    position: absolute;

    top: -10px;

    left: 50%;

    transform: translateX(-50%);

    -webkit-transform: translateX(-50%);

    -ms-transform: translateX(-50%);

}



.toptitle_top h3 {

    font-size: 2rem;

    margin: 0;

    line-height: 38px;

    font-weight: lighter;

    text-shadow: 0 0 1px #000;

}



.toptitle_middle img {

    width: 50%;

    text-align: center;

    margin: 50px 0 20px;

}



.toptitle_bottom {

    text-align: center;

    background-image: url(./image/toptitle_bottomribon.png);

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

    padding-bottom: 12px;

    width: 600px;

    max-width: 100%;

    height: 90px;

    margin: 0 auto;

}



.toptitle_bottom_text {

    display: flex;

    justify-content: center;

}



.toptitle_bottom_text h3 {

    font-size: 2.2rem;

    color: #000;

    margin: 0;

    line-height: 87px;

    font-weight: lighter;

    text-shadow: 0 0 1px #000;

}



.toptitle_bottom_text img {

    width: 10%;

    height: 60%;

    padding: 18px 0 0 5px;

}



.toptitle_bottom a {

    text-decoration: none;

}



.toppage_titleimg {

    text-align: center;

    padding-bottom: 20px;

    position: relative;

    top: -30px;

}



.toppage_titleimg img {

    width: 75%;

}



.toppage_middle {

    display: flex;

    width: 600px;

    max-width: 90%;

    text-align: center;

    margin: 0 auto;

}



.toppage_middle_box {

    background-image: url(./image/toppage_middleback.png);

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

    width: 100%;

    height: 215px;

    margin: 0 auto;

    display: flex;

    flex-flow: column;

    justify-content: center;

    align-items: center;

}



.toppage_middle_box h3 {

    font-size: 1.8rem;

    margin: 0;

    display: table-cell;

    vertical-align: middle;

    line-height: 2rem;

    font-weight: lighter;

    text-shadow: 0 0 1px #000;

}



.toppage_middle_box p {

    margin: 0;

    font-size: 0.9rem;

    padding-top: 3px;

}



.toppage_middle_boxcenter {

    padding-top: 10px;

}



.toppage_button {

    text-align: center;

    margin: 100px auto 80px;

    width: 600px;

    max-width: 90%;

}



.register_btn {

    display: inline-block;

    padding: 0.5em 1.8em 0.5em 12em;

    text-decoration: none;

    background: #FF8564;/*ボタン色*/

    color: #FFF;

    border: solid 3px #000;

    border-radius: 10px;

    text-align: center;

    position: relative;

}



.register_btn_text {

    display: flex;

    align-items: center;

}



.register_btn_text h3 {

    margin: 0;

    font-size: 1.8rem;

    letter-spacing: 5px;

    padding-right: 80px;

}



.register_btn_text img {

    width: 15%;

    height: 15%;

}



.register_btn::after {

    content: "";

    position: absolute;

    bottom: -10px;

    right: -10px;

    width: 100%;

    height: 80px;

    background-color: #fff;

    background-image: -webkit-radial-gradient(#000 15%, transparent 20%),

    -webkit-radial-gradient(#000 15%, transparent 20%);

    background-image: radial-gradient(#000 15%, transparent 20%),

    radial-gradient(#000 15%, transparent 20%);

    background-position: 0 0, 3px 3px;

    background-size: 6.5px 6.5px;

    z-index: -1;

    border-radius: 10px;

}



.video_block {

    text-align: center;

    background-color: #fff;

    background-image:

    radial-gradient(#E8E8E8 22%, transparent 22%);

    background-size: 15px 15px;

    position: relative;

}



.video_block video {

    width: 600px;

    max-width: 90%;

    padding: 50px 0;

}



.video_block img {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 7%;

}





.job_title {

    background-color: #FFDF5B;

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center bottom;

    justify-content: space-between;

    display: flex;

    margin: 0 auto;

    align-items: center;

    height: 120px;

    padding: 0 calc(50% - 300px);

    position: relative;

}



.job_title::after {

    content: "";

    background-image: url(./image/job_titlebg.png);

    position: absolute;

    width: 100%;

    height: 20px;

    bottom: -10%;

    left: 50%;

    transform: translateX(-50%);

    z-index: -2;

    background-position: center bottom;

    background-size: 100%;

    background-repeat: no-repeat;

}



.job_title img {

    height: 110%;

    position: relative;

    bottom: 5%;

    right: -2%;

}



.job_title_h3 {

    padding-right: 10px;

}



.job_title h3 {

    font-size: 1.8rem;

    letter-spacing: 4px;

    margin: 0;

    position: relative;

    padding-left: 20px;

    z-index: 1;

}



.job_title h3::after {

    content: "";

    position: absolute;

    background: #fff;

    width: calc(100% + 20px);

    margin-left: 10px;

    height: 20px;

    bottom: 10px;

    left: 50%;

    transform: translateX(-50%);

    z-index: -2;

}



.job_content {

    width: 600px;

    max-width: 90%;

    margin: 40px auto 0;

}



.job_content_boxes {

    display: flex;

    margin-bottom: 30px;

}



.job_content_box {

    border: 2.8px solid #000;

    text-align: center;

    font-weight: bold;

    letter-spacing: 2px;

    width: 280px;

}



.left_box {

    margin-right: 10px;

}



.right_box {

    margin-left: 10px;

}



.job_boxtitle {

    background-color: #3DBCD4;

    color: #fff;

    height: 70px;

    line-height: 70px;

    position: relative;

}



.job_content_boxes_under {

    margin-top: 45px;

}



.diamond_img {

    position: absolute;

    top: -5px;

    right: 13px;

    width: 18%;

}



.clock_img {

    position: absolute;

    top: -35px;

    left: -18px;

    width: 18%;

}



.wallet_img {

    position: absolute;

    bottom: -50px;

    right: -6px;

    width: 18%;

}



.cutlery_img {

    position: absolute;

    top: -30px;

    left: 5px;

    width: 18%;

}



.ticket_img {

    position: absolute;

    top: -5px;

    left: -15px;

    width: 18%;

}



.diamond_img img,

.clock_img img,

.wallet_img img,

.cutlery_img img,

.ticket_img img {

    width: 100%;

}



.job_boxtitle h3 {

    margin: 0 auto;

    font-size: 1.4rem;

}



.job_contbox {

    padding: 0 15px;

}



.job_box_cont img {

    width: 90%;

}



.job_box_cont > p {

    font-size: 1.1rem;

    margin: 30px auto 5px;

}



.job_box_salary {

    display: block;

    justify-content: center;

    align-items: baseline;

    width: 100%;

}



.job_box_salary p {

    margin: 0;

}



.salary_box {
    display: flex;
    align-items: baseline;
}



.job_box_salary .salary_word {

    font-size: 1.1rem;

    font-weight: bold;

    width: 20%;

    white-space: nowrap

}



.job_box_salary .number {

    font-size: 2rem!important;

    letter-spacing: 0!important;

}



.yellow_text {

    color: #FFDF5B;

    -webkit-text-stroke:1px #000;

    font-size: 1.6rem;

    font-weight: bold;

}



.job_box_more {

    border-top: 3px dashed #000;

    position: relative;

    height: 80px;

    line-height: 80px;

}



.job_box_more p {

    margin: 0;

    font-size: 1.4rem;

}



.job_box_more a {

    text-decoration: none;

    color: #000;

}



.job_more_yaji {

    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    right: -23px;

    width: 20%;

    height: 65%;

}



.job_more_yaji img {

    width: 100%;

}



.job_bottom {

    margin: 80px 0 120px;

}



.rare_title {

    background-color: #FF8564;

    color: #000;

    justify-content: center;

    height: 100px;

    line-height: 100px;

    display: flex;

    overflow: hidden;

}



.rare_title h3 {

    font-size: 3.5rem;

    font-weight: bold;

    margin: 0;

    letter-spacing: 3px;

    font-weight: lighter;

    text-shadow: 0 0 1px #000;

}



.rare_title i {

    line-height: 100px;

    font-size: 2.2rem;

}



.rare_title .left_slash {

    transform: rotate(25deg);

}



.rare_title .right_slash {

    transform: rotate(75deg);

}



.rare_title span {

    display: inline-block;

    color: #fff;

    -webkit-text-stroke:1.5px #000;

    position: relative;

}



.rare_title span::before {

    content: "";

    position: absolute;

    top: 14px;

    left: 50%;

    transform: translateX(-50%);

    background-color: #FFDF5B;

    border-radius: 50%;

    width: 8.2px;

    height: 8.2px;

    z-index: 2;

}



.rare_title span::after {

    content: "";

    position: absolute;

    top: 13px;

    left: 50%;

    transform: translateX(-50%);

    border: 1.5px solid #000;

    border-radius: 50%;

    width: 8px;

    height: 8px;

    z-index: 3;

}



.rare_contentbox {

    justify-content: center;

    background-image:

    radial-gradient(#fff5cc 22%, transparent 22%);

    background-size: 15px 15px;

    padding-bottom: 90px;

}



.rare_content {

    width: 600px;

    max-width: 90%;

    margin: 0 auto;

}



.rare_contbox {

    display: flex;

    padding: 80px 0;

    position: relative;

}



.rare_sarch {

    padding-top: 50px;

}



.rare_contentbox .rare_contbox_center {

    padding: 0;

    justify-content: right;

}



.rare_contbox img {

    width: 60%;

}



.rare_register .toppage_button {

    margin: 40px auto 0;

}

.height-150 {

  height: 150px;

  object-fit: cover;

}

.hukidashi_box {

    background-image: url(./image/hukidashi_box.png);

    background-repeat: no-repeat;

    background-size: contain;

    position: absolute;

}



.rare_contbox_center .hukidashi_box {

    background-image: url(./image/hukidashi_box2.png);

    background-repeat: no-repeat;

    background-size: contain;

}



.rare_contbox_top .hukidashi_box,

.rare_contbox_bottom .hukidashi_box {

    width: 300px;

    height: 160px;

}



.rare_contbox_center .hukidashi_box {

    width: 300px;

    height: 160px;

    top: 60%;

    left: 20px;

    transform: translateY(-60%);

}



.rare_contbox_top .hukidashi_box {

    bottom: 60px;

    right: 0;

}



.rare_contbox_bottom .hukidashi_box {

    top: 55px;

    right: 20px;

}



.hukidashi_box p {

    font-size: 0.85rem;

    font-weight: bold;

    line-height: 30px;

    letter-spacing: 2px;

    align-items: center;

}



.rare_contbox_top .hukidashi_box p,

.rare_contbox_bottom .hukidashi_box p {

    padding: 9px 0 10px 45px;

}



.rare_contbox_center .hukidashi_box p {

    padding: 1px 0 0 20px;

}



.footer {

    background-color: #C5E6F9;

    color: #000;

    text-align: left;

}



.footer p {

    margin: 0;

    font-weight: bold;
    
}



.footer_top {

    padding: 50px 0;

    border-bottom: 3px solid #000;

}



.footer_bottom {

    padding: 20px 0;
    text-align: center;

}



.footer_bottom p {

    font-size: 0.82rem;

}



.pc {

    display: block;

}



.sp {

    display: none;

}





	/* 480px以下に適用されるCSS（スマホ用） */

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

    .pc {

        display: none;

    }



    .sp {

        display: block;

    }



    .header {

        height: 50px;

    }



    .header img {

        width: 30%;

        padding-top: 17px;

    }



    .toppage_title {

        padding-top: 35px;

        height: 355px;

    }



    .toptitle_top {

        max-width: 70%;

    }



    .toptitle_top h3 {

        font-size: 1.5rem;

    }



    .top_title {

        max-width: 90%;

        background-size: 20px 20px;

    }



    .toptitle_middle img {

        width: 70%;

    }



    .toptitle_bottom {

        height: 45px;

    }



    .toptitle_bottom_text h3 {

        font-size: 1.25rem;

        line-height: 45px;

    }



    .toptitle_bottom_text img {

        width: 30px;

        height: 30px;

        padding: 10px 0 0 3px;

    }




    .toppage_titleimg img {

        width: 90%;

    }



    .toppage_middle {

        display: block;

    }



    .toppage_middle_box {

        width: 180px;

        height: 160px;

    }



    .sp_toppage_middle {

        display: flex;

    }



    .toppage_middle_boxcenter {

        margin-right: 10px;

        padding-top: 0;

    }



    .toppage_middle_boxcenter h3 {

        padding: 0;

    }



    .toppage_middle_box h3 {

        font-size: 1.5rem;

        line-height: 1.7rem;

        padding-bottom: 5px;

    }



    .toppage_middle_box p {

        padding: 0;

    }



    .toppage_button {

        margin: 50px auto;

    }



    .register_btn {

        padding: 0 0 0 80px;

        height: 55px;

    }



    .register_btn::after {

        height: 55px;

    }



    .register_btn_text h3 {

        padding: 0;

        line-height: 58px;

        font-size: 1.4rem;

    }



    .register_btn_text img {

        width: 13%;

        height: 13%;

        padding: 0 0 3px 10px;

    }



    .video_block video {

        max-width: 85%;

        padding: 40px 0;

    }



    .video_block img {

        width: 10%;

    }



    .job_title {

        height: 70px;

        justify-content: center;

    }



    .job_title h3 {

        font-size: 1.1rem;

        letter-spacing: 2px;

        padding-left: 20px;

    }

    .job_title img {
        bottom: 3%;
        right: 0%;
    }


    /* .job_title_h3 {
        padding-right: 0;
        margin-right: 10px;
    } */



    .job_title h3::after {

        height: 10px;

        bottom: 5px;

        width: 98%;

    }



    .job_content_boxes {

        display: block;

    }



    .job_content_box {

        max-width: 90%;

    }



    .left_box,

    .right_box {

        margin: 0 auto;

    }



    .left_box {

        margin-bottom: 45px;

    }



    .job_bottom {

        margin: 50px 0;

    }



    .job_bottom .toptitle_bottom_text h3,

    .rare_sarch .toptitle_bottom_text h3 {

        font-size: 1.4rem;

    }



    .rare_title h3 {

        font-size: 2rem;

    }



    .rare_title i {

        font-size: 1.4rem;

    }



    .rare_title span::before {

        top: 21px;

    }



    .rare_title span::after {

        top: 20px;

    }



    .rare_contbox img {

        width: 80%;

    }



    .rare_contbox_top {

        padding: 40px 0 100px;

    }



    .rare_contbox_top .hukidashi_box {

        bottom: 60px;

        right: 0;

    }



    .rare_contbox_center .hukidashi_box {

        top: 40px;

        left: 0;

    }



    .rare_contbox_bottom {

        padding: 60px 0;

    }



    .rare_contbox_bottom .hukidashi_box {

        top: 20px;

        right: 0;

    }



    .rare_sarch {

        padding-top: 0;

    }



    .rare_contentbox {

        padding-bottom: 60px;

    }



    .footer_top {

        padding: 40px 10px;
        font-size:0.9rem;

    }



}





	/* 959px以下に適用されるCSS（タブレット用） */

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


    .toppage_button {

        margin: 60px auto 80px;

    }



    .video_block img {

        width: 10%;

    }



    .job_bottom {

        margin: 60px 0 80px;

    }



    .rare_sarch {

        padding-top: 0;

    }

}
.container {
    display: flex;
    justify-content: center;
}
.container div {
    width: 30%;
    height: auto;
}
#center_lp {
    text-align: center;
}
}
}