/*  newemployee2023 data
=============================================== */

.newemployee2022 #con-body { background:url(../img/data/bg.png); top center repeat-y; background-size:100% auto; }

.ne-box { width:960px; margin:auto; padding:1px 0 10px 0; }

.box-2col:after {content:"";clear:both;display:block;}

/* ---- Media Queries ---- */

@media all and (max-width: 979px) {

.ne-box { width:94%; margin:0 3%; }

}


/* mainttl
-------------------------------- */

@keyframes data-fade {
  0% { opacity:0; transform:scale(0.98); filter:blur(1.5rem); }
  100% { opacity:1;  transform:scale(1.0); filter:blur(0); }
}

.newemployee2022 #mainttl-area { padding:152px 0 80px 0; }
.newemployee2022 #mainttl { margin:0 auto 55px auto; width:715px; /* for animation */ opacity:0; animation: data-fade 1s 0s forwards; }
.newemployee2022 #mainttl h1 { position:relative; width:100%; height:0; padding-top:23.8179669030733%; }
.newemployee2022 #mainttl h1 span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-image:url(../img/data/mainttl.png); background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }
.newemployee2022 #mainttl-copy { margin:0 auto; width:950px; /* for animation */ opacity:0; animation: data-fade 1s 0s forwards; }
.newemployee2022 #mainttl-copy p { position:relative; width:100%; height:0; padding-top:13.3742911153119%; }
.newemployee2022 #mainttl-copy p span { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-image:url(../img/data/pc/copy.png); background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }

/* ---- Media Queries ---- */

@media all and (max-width: 979px) {

.newemployee2022 #mainttl-area { padding:70px 0; }
.newemployee2022 #mainttl { margin:0 auto 5.6% auto; width:88.8%; }
.newemployee2022 #mainttl h1 { padding-top:23.8179669030733%; }
.newemployee2022 #mainttl-copy { margin:45px 8.93333333333333% auto; width:82.1333333333333%; }
.newemployee2022 #mainttl-copy p { padding-top:46.1828463713478%; }
.newemployee2022 #mainttl-copy p span { background-image:url(../img/data/smp/copy.png); }

}


/* subttl
-------------------------------- */

.subttl-area { margin:0 auto 40px auto; }
.subttl-area .subttl { position:relative; width:100%; height:0; }
.subttl-area .subttl h2 { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }
#schoollife .subttl-area { width:375px; }
#schoollife .subttl-area .subttl { padding-top:8.76712328767123%; }
#schoollife .subttl-area .subttl h2 { background-image:url(../img/data/subtitle_schoollife.png); }
#jobhunting .subttl-area { width:375px; }
#jobhunting .subttl-area .subttl { padding-top:9.24617196702002%; }
#jobhunting .subttl-area .subttl h2 { background-image:url(../img/data/subtitle_jobhunting.png); }
#other .subttl-area { width:175px; }
#other .subttl-area .subttl { padding-top:14.7129186602871%; }
#other .subttl-area .subttl h2 { background-image:url(../img/data/subtitle_other.png); }
#fuan .subttl-area { width:773px; }
#fuan .subttl-area .subttl { padding-top:24.5954692556634%; }
#fuan .subttl-area .subttl h2 { background-image:url(../img/data/subtitle_fuan.png); }

/* ---- Media Queries ---- */

@media all and (max-width: 979px) {

#schoollife .subttl-area { width:64%; margin:0 18% 4%; }
#jobhunting .subttl-area { width:71.7333333333333%; margin:0 14.1333333333333% 4%; }
#other .subttl-area { width:35.7333333333333%; margin:0 32.1333333333333% 4%; }
#fuan .subttl-area { width:82.6666666666667%; margin:0 10.66666666666666% 4% 6.66666666666666%; }
			
}


/* dgm
-------------------------------- */

.dgm-box { position:relative; width:100%; margin-bottom:4%; }
.dgm-box .dgm { position:relative; width:100%; height:0; background-color:#fff; box-shadow:0px 0px 20px rgba(0,0,0,0.07); }
.dgm-pic { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; border-radius:7px; }
.dgm-pic.v2023 { z-index:1; opacity:0; }
.dgm-pic.v2022 { z-index:2; opacity:0; }
.dgm-pic.v2023.show,
.dgm-pic.v2022.show { opacity:1; }

/* schoollife */

#schoollife_dgm1.dgm-box .dgm { padding-top:68.36%; }
#schoollife_dgm1 .dgm-pic.v2023 { background-image:url(../img/data/pc/schoollife_dgm1_2023_2.png); }
#schoollife_dgm1 .dgm-pic.v2022 { background-image:url(../img/data/pc/schoollife_dgm1_2022.png); }

#schoollife_dgm2.dgm-box { float:left; width:47%; margin-right:6%; }
#schoollife_dgm2.dgm-box .dgm { padding-top:132.666666667%; }
#schoollife_dgm2 .dgm-pic.v2023 { background-image:url(../img/data/pc/schoollife_dgm2_2023_2.png); }
#schoollife_dgm2 .dgm-pic.v2022 { background-image:url(../img/data/pc/schoollife_dgm2_2022_2.png); }

#schoollife_dgm3.dgm-box { float:left; width:47%; }
#schoollife_dgm3.dgm-box .dgm { padding-top:132.666666667%; }
#schoollife_dgm3 .dgm-pic.v2023 { background-image:url(../img/data/pc/schoollife_dgm3_2023_2.png); }
#schoollife_dgm3 .dgm-pic.v2022 { background-image:url(../img/data/pc/schoollife_dgm3_2022_2.png); }

#schoollife_dgm4.dgm-box .dgm { padding-top:59.0625%; }
#schoollife_dgm4 .dgm-pic.v2023 { background-image:url(../img/data/pc/schoollife_dgm4_2023_2.png); }
#schoollife_dgm4 .dgm-pic.v2022 { background-image:url(../img/data/pc/schoollife_dgm4_2022_2.png); }

/* ---- Media Queries ---- */

@media all and (max-width: 979px) {

#schoollife_dgm1.dgm-box .dgm { padding-top:261.624649859944%; }
#schoollife_dgm1 .dgm-pic.v2023 { background-image:url(../img/data/smp/schoollife_dgm1_2023_2.png); }
#schoollife_dgm1 .dgm-pic.v2022 { background-image:url(../img/data/smp/schoollife_dgm1_2022.png); }

#schoollife_dgm2.dgm-box { float:none; width:100%; }
#schoollife_dgm2.dgm-box .dgm { padding-top:112.605042016807%; }
#schoollife_dgm2 .dgm-pic.v2023 { background-image:url(../img/data/smp/schoollife_dgm2_2023_2.png); }
#schoollife_dgm2 .dgm-pic.v2022 { background-image:url(../img/data/smp/schoollife_dgm2_2022_2.png); }

#schoollife_dgm3.dgm-box { float:none; width:100%; }
#schoollife_dgm3.dgm-box .dgm { padding-top:108.683473389356%; }
#schoollife_dgm3 .dgm-pic.v2023 { background-image:url(../img/data/smp/schoollife_dgm3_2023_2.png); }
#schoollife_dgm3 .dgm-pic.v2022 { background-image:url(../img/data/smp/schoollife_dgm3_2022_2.png); }

#schoollife_dgm4.dgm-box .dgm { padding-top:207.563025210084%; }
#schoollife_dgm4 .dgm-pic.v2023 { background-image:url(../img/data/smp/schoollife_dgm4_2023_2.png); }
#schoollife_dgm4 .dgm-pic.v2022 { background-image:url(../img/data/smp/schoollife_dgm4_2022_2.png); }

}

/* jobhunting */

#jobhunting_dgm1.dgm-box .dgm { padding-top:62.5%; }
#jobhunting_dgm1 .dgm-pic.v2023 { background-image:url(../img/data/pc/jobhunting_dgm1_2023_2.png); }
#jobhunting_dgm1 .dgm-pic.v2022 { background-image:url(../img/data/pc/jobhunting_dgm1_2022_2.png); }

#jobhunting_dgm2.dgm-box .dgm { padding-top:63.5416666666667%; }
#jobhunting_dgm2 .dgm-pic.v2023 { background-image:url(../img/data/pc/jobhunting_dgm2_2023_2.png); }
#jobhunting_dgm2 .dgm-pic.v2022 { background-image:url(../img/data/pc/jobhunting_dgm2_2022_2.png); }

#jobhunting_dgm3.dgm-box .dgm { padding-top:54.5833333333333%; }
#jobhunting_dgm3 .dgm-pic { background-image:url(../img/data/pc/jobhunting_dgm3.png); }

#jobhunting_dgm4.dgm-box .dgm { padding-top:57.7083333333333%; }
#jobhunting_dgm4 .dgm-pic.v2023 { background-image:url(../img/data/pc/jobhunting_dgm4_2023.png); }
#jobhunting_dgm4 .dgm-pic.v2022 { background-image:url(../img/data/pc/jobhunting_dgm4_2022.png); }

/* ---- Media Queries ---- */

@media all and (max-width: 979px) {

#jobhunting_dgm1.dgm-box .dgm { padding-top:221.848739495798%; }
#jobhunting_dgm1 .dgm-pic.v2023 { background-image:url(../img/data/smp/jobhunting_dgm1_2023_2.png); }
#jobhunting_dgm1 .dgm-pic.v2022 { background-image:url(../img/data/smp/jobhunting_dgm1_2022_2.png); }

#jobhunting_dgm2.dgm-box .dgm { padding-top:195.518207282913%; }
#jobhunting_dgm2 .dgm-pic.v2023 { background-image:url(../img/data/smp/jobhunting_dgm2_2023_2.png); }
#jobhunting_dgm2 .dgm-pic.v2022 { background-image:url(../img/data/smp/jobhunting_dgm2_2022_2.png); }

#jobhunting_dgm3.dgm-box .dgm { padding-top:111.484593837535%; }
#jobhunting_dgm3 .dgm-pic { background-image:url(../img/data/smp/jobhunting_dgm3.png); }

#jobhunting_dgm4.dgm-box .dgm { padding-top:217.366946778711%; }
#jobhunting_dgm4 .dgm-pic.v2023 { background-image:url(../img/data/smp/jobhunting_dgm4_2023.png); }
#jobhunting_dgm4 .dgm-pic.v2022 { background-image:url(../img/data/smp/jobhunting_dgm4_2022.png); }

}

/* other */

#other_dgm1.dgm-box .dgm { padding-top:54.5833333333333%; }
#other_dgm1 .dgm-pic { background-image:url(../img/data/pc/other_dgm1.png); }
#other_dgm2.dgm-box .dgm { padding-top:55.2083333333333%; }
#other_dgm2 .dgm-pic { background-image:url(../img/data/pc/other_dgm2.png); }

/* ---- Media Queries ---- */

@media all and (max-width: 979px) {

#other_dgm1.dgm-box .dgm { padding-top:178.711484593838%; }
#other_dgm1 .dgm-pic { background-image:url(../img/data/smp/other_dgm1.png); }
#other_dgm2.dgm-box .dgm { padding-top:150.700280112045%; }
#other_dgm2 .dgm-pic { background-image:url(../img/data/smp/other_dgm2.png); }

}

/* fuan */

#fuan .dgm-box .dgm { background:transparent; box-shadow:none; }

#fuan_dgm1.dgm-box { width:765px; margin:0 0 0 0; }
#fuan_dgm1.dgm-box .dgm { padding-top:61.4276358873608%; }
#fuan_dgm1 .dgm-pic { background-image:url(../img/data/pc/fuan_t1.png); }
#fuan_dgm2.dgm-box { width:826px; margin:0 0 0 135px; }
#fuan_dgm2.dgm-box .dgm { padding-top:44.8818897637795%; }
#fuan_dgm2 .dgm-pic { background-image:url(../img/data/pc/fuan_t2.png); }
#fuan_dgm3.dgm-box { width:678px; margin:-50px 0 0 0; }
#fuan_dgm3.dgm-box .dgm { padding-top:40.4444444444444%; }
#fuan_dgm3 .dgm-pic { background-image:url(../img/data/pc/fuan_t3.png); }
#fuan_dgm4.dgm-box { width:594px; margin:-25px 0 0 366px; }
#fuan_dgm4.dgm-box .dgm { padding-top:53.3751962323391%; }
#fuan_dgm4 .dgm-pic { background-image:url(../img/data/pc/fuan_t4.png); }
#fuan_dgm5.dgm-box { width:734px; margin:-75px 0 0 0; }
#fuan_dgm5.dgm-box .dgm { padding-top:52.4298425735797%; }
#fuan_dgm5 .dgm-pic { background-image:url(../img/data/pc/fuan_t5.png); }
#fuan_dgm6.dgm-box { width:860px; margin:-45px 0 0 100px; }
#fuan_dgm6.dgm-box .dgm { padding-top:41.2790697674419%; }
#fuan_dgm6 .dgm-pic { background-image:url(../img/data/pc/fuan_t6.png); }
#fuan_dgm7.dgm-box { width:807px; margin:-5px 0 0 0; }
#fuan_dgm7.dgm-box .dgm { padding-top:46.625%; }
#fuan_dgm7 .dgm-pic { background-image:url(../img/data/pc/fuan_t7.png); }

/* ---- Media Queries ---- */

@media all and (max-width: 979px) {

#fuan.ne-box { width:100%; margin:0; overflow:hidden; }

#fuan_dgm1.dgm-box { width:94.6666666666667%; margin:50px 2.13333333333333% 50px 3.2%; }
#fuan_dgm1.dgm-box .dgm { padding-top:89.7368421052632%; }
#fuan_dgm1 .dgm-pic { background-image:url(../img/data/smp/fuan_t1.png); }
#fuan_dgm2.dgm-box { width:97.8666666666667%; margin:0 2.13333333333333% 40px 0%; }
#fuan_dgm2.dgm-box .dgm { padding-top:64.621409921671%; }
#fuan_dgm2 .dgm-pic { background-image:url(../img/data/smp/fuan_t2.png); }
#fuan_dgm3.dgm-box { width:92.5333333333333%; margin:0 7.46666666666667% 20px 0%; }
#fuan_dgm3.dgm-box .dgm { padding-top:61.8320610687023%; }
#fuan_dgm3 .dgm-pic { background-image:url(../img/data/smp/fuan_t3.png); }
#fuan_dgm4.dgm-box { width:78.4%; margin:0 4.8% 30px 16.8%; }
#fuan_dgm4.dgm-box .dgm { padding-top:84.8765432098765%; }
#fuan_dgm4 .dgm-pic { background-image:url(../img/data/smp/fuan_t4.png); }
#fuan_dgm5.dgm-box { width:87.4666666666667%; margin:0 8.26666666666667% 0 4.26666666666667%; }
#fuan_dgm5.dgm-box .dgm { padding-top:83.0409356725146%; }
#fuan_dgm5 .dgm-pic { background-image:url(../img/data/smp/fuan_t5.png); }
#fuan_dgm6.dgm-box { width:100%; margin:0 0% 30px 0%; }
#fuan_dgm6.dgm-box .dgm { padding-top:71.501272264631%; }
#fuan_dgm6 .dgm-pic { background-image:url(../img/data/smp/fuan_t6.png); }
#fuan_dgm7.dgm-box { width:90.4%; margin:0 6.4% 40px 3.2%; }
#fuan_dgm7.dgm-box .dgm { padding-top:70.9766162310867%; }
#fuan_dgm7 .dgm-pic { background-image:url(../img/data/smp/fuan_t7.png); }

}


/* switch
-------------------------------- */

.switch-box { position:absolute; z-index:4; bottom:3%; width:100%; text-align:center; }
.switch { position:relative; width:232px; margin:auto; padding:4px; box-sizing:border-box; border-radius:1000px; background-color:#e4e5e6; }
.switch i { display:block; content:""; margin:0; font-size:1%; line-height:1%; position:absolute; z-index:2; top:8.333%; left:1.724%; width:112px; height:40px; border-radius:1000px; background-color:#0000FF; }
.switch ul { display:flex; justify-content:center; width:100%; }
.switch li { position:relative; width:112px; height:40px; }
.switch li a { position:absolute; z-index:3; top:0; left:0; display:block; width:100%; height:100%; border-radius:1000px; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }
@media (hover: hover) { .switch li a:hover { opacity:0.5; } }
.switch li.active:nth-child(1) a { background-image:url(../img/data/switch_btn2023_1.png); }
.switch li.active:nth-child(2) a { background-image:url(../img/data/switch_btn2022_1.png); }
.switch li::after { position:absolute; z-index:1; top:0; left:0; display:block; content:""; width:100%; height:100%; border-radius:1000px; background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }
.switch li:nth-child(1)::after { background-image:url(../img/data/switch_btn2023_2.png); }
.switch li:nth-child(2)::after { background-image:url(../img/data/switch_btn2022_2.png); }

/* ---- Media Queries ---- */

@media all and (max-width: 979px) {

.switch-box { bottom:2%; }
#schoollife_dgm2 .switch-box,
#schoollife_dgm3 .switch-box { bottom:4%; }
.switch { width:52.8571428571429vw; padding:0.857142857142857vw; }
.switch i { width:25.5172413793104vw; height:9.14285714285714vw; }
.switch li { width:25.5172413793104vw; height:9.14285714285714vw; }

}