
.second_nav a {

    cursor: pointer;
}
.second_nav a.nolink {
        pointer-events: none;
opacity:0.3;
} 

.dot.bg_white {opacity:0.8;}
.recruit_hero
.dot01 {left:55.20%;top:120px;}
.recruit_hero .dot02 {left:39.583%;top:170px;}
.recruit_hero .dot03 {right:60px;top:170px;}
.recruit_hero .dot04 {left:110px;top:220px;}
.recruit_hero .dot05 {right:21.354%;top:390px;}
.recruit_hero .dot06 {left:calc(55.20% + 50px);top:490px;}
.recruit_hero .dot07 {left:calc(55.20% - 50px);top:590px;}
.recruit_hero .dot08 {right:calc(21.354% - 150px);top:590px;}
.recruit_hero .dot09 {left:16.14583%;top:640px;}
.recruit_hero .dot10 {left:calc(55.20% - 200px);top:690px;}

.dot11 {left:26.5625%;top:0px;}
.dot12 {right:110px;top:200px;}
.dot13 {left:0px;top:870px;}
.dot14 {right:60px;top:970px;}
.dot15 {right:10.9375%;top:1520px;}
.dot16 {left:10.9375%;top:1570px;}
.dot17 {left:calc(10.9375% - 100px);top:1620px;}
.dot18 {left:calc(10.9375% + 100px);top:0;}
.dot19 {right:100px;top:150px;}
.dot20 {left:110px;top:780px;}
.dot21 {right:23.4375%;top:1070px;}


.hero_wrap {
    position:relative;
}
.hero_wrap:before {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    inset:0;
    background: url("../img/bg_hero_recruit.png") no-repeat;
    background-size: 100% auto;
    opacity:0.8;
}

#page_recruit_content {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.60) 10%, rgba(255, 255, 255, 1) 40%, rgba(255, 255, 255, 1) 60%, rgba(255, 255, 255, 0.00) 100%);
    padding-top:230px;
}
#page_recruit_content::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-image: linear-gradient(rgba(238, 238, 239, 0.6) 1px, transparent 1px), linear-gradient(to right, rgba(238, 238, 239, 0.6) 1px, transparent 1px);
    background-size: 100px 100px;
    background-color: transparent;
    background-position: center 25px;
    mix-blend-mode: overlay;
    opacity:0;
    transition:.5s var(--ease);
}
#page_recruit_content.js-bg_change::before {
    opacity: 0.2;
}
#page_recruit_content .inner {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap:20px;
    position:relative;
}

#message,#job {
    padding-bottom:180px;
}
.message_cont {
    grid-column: 2 / 9;
}
.message_cont h2 {
    display: flex;
    flex-direction: column;
    line-height: 1.42;
    margin-bottom:3.5em;
}
.message_cont h2 .en {
    font-size:1.5em;
}
.message_cont h2 .ja {
    font-size:3.5em;
}
.message_cont p {
    line-height: 2.25;
}
.message_cont p + p{
    margin-top:1em;
}
.message_cont .img_box{
    margin-top:var(--size80);
}


#job {
    background-color: white;
}
.job_cont{
    grid-column: 2 / 9;
}

.jobinfo_wrap{
    margin-top:var(--size60);
}
.jobinfo_menu {
    padding-left:0;
    display: grid;
    border:1px solid var(--black);
    grid-template-columns: repeat(4, 1fr);
    place-content:center;
}
.jobinfo_menu li {
    padding:10px;
    display: flex;
    align-items: center;
    justify-content:center;
    cursor: pointer;
    transition:all .3s var(--easeout);
    background-color: transparent;
}
.jobinfo_menu li.current span {
    transition:all .3s var(--easeout);
}
.jobinfo_menu li.current, .jobinfo_menu li:hover {
    background-color: var(--black);
}
.jobinfo_menu li.current span, .jobinfo_menu li:hover span {
    color:white;
}
.jobinfo_menu li:not(:last-child) {
    border-right:1px solid var(--black);
}
.jobinfo_contents_wrap{
     margin-top:var(--size60);
}
.jobinfo_content {
    display: none;
    opacity:0;
    transition:opacity .3s .3s var(--easeout);
}
.jobinfo_content.active {
    display: block;
    opacity: 1;
    transition:opacity .3s .3s var(--easeout);
} 
#job .outline_table table {
    width:100%;
    border-collapse: collapse;
    border:none;
}
#job .outline_table td,#job .outline_table th {
    padding:var(--size50) 0;
    border-bottom:1px solid #D8D8D8;
    border-width:0 0 1px 0;
}
#job .outline_table th{
    width:30%;
    text-align: left;
}

#entry {
    padding-top:var(--size80);
    padding-bottom:var(--size80);
    padding-inline:var(--size60);
    position:relative;
}
#entry:before {
    content:"";
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
    background: url("../img/bg_grad03.jpg") no-repeat;
    background-size:cover;
    mix-blend-mode: darken;
} 
 
#entry .bg_contact {
    mix-blend-mode: color-burn;
    transition: all .3s var(--easeout);
    opacity:0.7;
}
#entry a:hover .bg_contact{
     opacity:1;
}
#entry .bg_contact img {
    width:100%;
    height:100%;
    object-fit: cover
}
#entry .contact_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
    gap:var(--size30);
    padding:120px 0 180px;
    position: relative;
}
.contact_box .section_tit_box h2.grad_mask {
    background-image: url(../img/bg_grad03.jpg);
    background-size: 100% auto;
    background-position: center;
    background-clip: text;
    color: rgb(255 255 255 / 0.6);
    mix-blend-mode: overlay;
    line-height: 1.2;
    transition: all .3s var(--easeout);
}
#entry a:hover .contact_box .section_tit_box h2.grad_mask {
    background-size: 150% auto;
    background-position: left;
}
#entry .contact_box .txt {
    color:white;
    font-size:2em;
}
#entry .contact_box .btn_entry{
    display: flex;
    background-color: transparent;
    position:relative;
    justify-content: center;
    align-items: center;
    padding:10px 2em;
    width:min(100%,750px);
}
#entry .contact_box .btn_entry span{
    color:#E155F6;
    font-size:2em;
    position:relative;
    mix-blend-mode: normal;
     transition: all .3s var(--easeout);
}
#entry .contact_box .btn_entry:before {
    content:"";
    width:100%;
    height:100%;
    background-color:rgb(255 255 255 /0.8);
    mix-blend-mode: overlay;
    position:absolute;
    left:0;
    top_:0;
    border:white 1px solid;
    transition: all .3s var(--easeout);
}
#entry a:hover .contact_box .btn_entry:before {
    mix-blend-mode: hard-light;
    background-color:rgb(255 255 255 /0.0);
}
#entry a:hover .contact_box .btn_entry span{
    mix-blend-mode: overlay;
    color:white;
}
.section_tit_box {
    display: flex;
    align-items: center;
    gap:160px;
}
.section_tit_box h2 {
    align-items: baseline;
    gap:30px;
    mix-blend-mode: overlay;
    color:white;
}
.section_tit_box h2 .en {
    font-size:10.42vw;
}
.section_tit_box h2 .ja {
font-size: var(--size30);
font-weight: 500;
line-height:1.06; /* 106.667% */
}

@media (max-width:1024px) {
    #page_recruit_content::before {
        background-image: linear-gradient(rgba(238, 238, 239, 0.5) 1px, transparent 1px), linear-gradient(to right, rgba(238, 238, 239, 0.5) 1px, transparent 1px);
        background-size: 50px 50px;
        background-color: transparent;
        background-position: center 12.5px;
        mix-blend-mode: normal;
        opacity:0;
        transition:.5s var(--ease);
    }
    #page_recruit_content.js-bg_change::before {
        opacity:1;
    }
    .recruit_hero .dot01 {
        left: auto;
        top: auto;
        bottom:0;
        right:22.9%;
        width: 50px;
        height: 50px;
    }
    .recruit_hero .dot02 {
        left: 14px;
        top: 111px;
        width: 50px;
        height: 50px;
    }
    .recruit_hero .dot03 {
        left: 114px;
        top: 178px;
        width: 50px;
        height: 50px;
    }
    .recruit_hero .dot04 {
        left: 0;
        top: 342px;
        width: 50px;
        height: 50px;
    }
    .recruit_hero .dot05 {
        left: auto;
        right:10.432%;
        top:143px;
        width: 50px;
        height: 50px;
    }
     .recruit_hero .dot06 {
        left: auto;
        right:0;
        top: 230px;
    }
    .recruit_hero .dot07 {
        left: 100px;
        top: 60%;
        background-color: white;
        opacity:0.8;
    }
    .recruit_hero .dot08 {
        left: 75px;
        top: calc(60% - 20px);
    }
    .recruit_hero .dot09 {
        left: auto;
        top: auto;
        bottom:0;
        right:calc(22.9% + 50px);
    }
    .recruit_hero .dot10 {
        left: 50px;
        top: auto;
        bottom:100px;
    }
    .recruit_hero .dot12 {
        left:auto;
        right:-40px;
        top: auto;
        bottom:175px;
    }
    .dot11.dot.dot_l {
        left: 26.5625%;
        top: 125px;
        opacity: 0.6;
        background: #EC6CD1;
        mix-blend-mode: darken;
        width:25px;
        height:25px;
    }
    .dot13.dot.dot_l {
        top: 225px;
        width:25px;
        height:25px;
        left:auto;
        right:10.423%;
    }
    .dot14 {
        left: 0;
        top: 21.5%;
    }
    .dot15 {
        right: 0;
        top: 15%;
    }
}
@media (max-width:768px)  {
    .hero_wrap {
        height: 100svh;
        padding-top: 90px;
        padding-bottom: 90px;
    }
    .hero_tit{
        padding-bottom:0;
        align-items: center;
        justify-content: center
    }
    .hero_tit .h2_hero{
        margin-top:1em;
        text-align: center;
        align-items: center;
    }
    #page_recruit_content .inner {
        display: block;
    }
    #page_recruit_content {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.60) 5%, rgba(255, 255, 255, 1) 20%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1) 100%);
        padding-top: 100px;
        
    }

    .message_cont{
        padding-top:80px;
    }
    .message_cont h2 .ja {
        font-size: 2.75em;
    }
    .message_cont p {
        font-size: 1.125em;
    }
    #job {
        background-color: transparent;
    }
    #message, #job {
        padding-bottom:80px;
    }
    .jobinfo_menu {
        grid-template-columns: repeat(2, 1fr);
    }
    .jobinfo_menu li:nth-of-type(2){
        border-right: none;
        border-bottom:1px solid var(--black);
    }
    .jobinfo_menu li:nth-of-type(1){
        border-bottom:1px solid var(--black);
    }
    #job .outline_table td, #job .outline_table th {
        padding: var(--size25) 0;
        display: block;
    }
    #job .outline_table th {
        border-bottom:none;
        padding-bottom:0;
    }
    #entry {
        padding-inline: var(--size40);
    }
    #entry:before {
        background: url(../img/bg_sp.jpg) no-repeat;
        background-size: cover;
        mix-blend-mode: multiply;
    }
    .section_tit_box h2 .en {
        font-size: 23vw;
    }
    #entry .contact_box .txt {
        font-size: 1.25em;
    }
    #entry .contact_box .btn_entry span{
        font-size: 1.0em;
    }

}
@media (max-width:499px) {

}
