@charset "UTF-8";
/* CSS Document */

#contents{
margin-top: 0;
}
/* 中身-モバイルファースト======================================================================================================== */

#introduction{
padding-top: 20vw;
position: relative;
}
#introduction::before,
#introduction::after{
content: "";
display: block;
background-repeat: no-repeat;
background-position: left top;
background-size: 100% auto;
width: 40%;
height: auto;
aspect-ratio: 1/1;
position: absolute;
top: 0;
z-index: -10;
}
#introduction::before{
background-image: url(../images/bg_tree-r.jpg);
background-image: -webkit-image-set(url(../images/bg_tree-r.jpg) 1x, url(../images/bg_tree-r@2x.jpg) 2x);
right: 0;
}
#introduction::after{
background-image: url(../images/bg_tree-l.jpg);
background-image: -webkit-image-set(url(../images/bg_tree-l.jpg) 1x, url(../images/bg_tree-l@2x.jpg) 2x);
left: 0;
}
#introduction h2{
font-size: 14vw;
font-weight: 700;
line-height: 1.4;
text-align: center;
position: relative;
margin-bottom: 10px;
}
#introduction h2::before{
content: "";
display: block;
width: auto;
height: 120%;
aspect-ratio: 1/1;
background: #cae6ad;
background: radial-gradient(circle,#cae6ad 0%, rgba(255,255,255,0) 70%);
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
margin: auto;
z-index: -1;
}


#job article{
background: #C7CACD;
background-image: -webkit-image-set(url(../images/bg.png) 1x, url(../images/bg@2x.png) 2x),radial-gradient(circle, #fff 0%, #C7CACD 200%);
background-repeat: no-repeat, no-repeat;
background-size: 130% auto, auto;
padding-bottom: 20vw;
margin-bottom: 5px;
}
#job article:nth-child(odd){ background-position: -50% -100%, left top; }
#job article:nth-child(even){ background-position: 150% -100%, left top; }

#job article .info{
display: flex;
flex-direction: column-reverse;
}
#job article .info .photo{
width: 80vw;
position: relative;
z-index: 10;
}
#job article:nth-child(odd) .info .photo{
clip-path: polygon(0% 0%, 100% 0%, calc(100% - 8vw) 100%, 0% 100%);
}
#job article:nth-child(even) .info .photo{
clip-path: polygon(8vw 0%, 100% 0%, 100% 100%, 0% 100%);
margin-left: auto;
}
#job article .info .text{
padding: 5vw;
text-align: left;
}
#job article .info .text h3{
font-size: 8vw;
text-shadow:0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff;
}
#job article .info .text p{
text-shadow:0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff;
}

#job article .interview{
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
grid-column-gap: 10px;
grid-row-gap: 0px;
padding-top: 5vw;
border-top: solid 1px rgba(0, 0, 0, .1);
}
#job article .interview .common_title { grid-area:  1 / 1 / 2 / 3; }
#job article .interview .text { grid-area: 2 / 1 / 3 / 2; }
#job article .interview .common_btn { grid-area: 3 / 1 / 4 / 3; }
#job article .interview .photo { grid-area: 2 / 2 / 3 / 3; }

#job article .interview .common_title{
text-shadow:0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff;
}
#job article .interview .common_title .en{
color: #555;
font-size: 8vw;
}
#job article .interview .common_title h4{
font-size: 4vw;
}
#job article .interview .text{
text-shadow:0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff, 0px 0px 10px #fff;
}
#job article .interview .text em{
display: block;
font-size: 20px;
}
#job article .interview .photo{
}


/* PCのみ======================================================================================================== */
@media print, screen and (min-width: 751px){

#introduction{
padding-top: 10vw;
}
#introduction::before,
#introduction::after{
width: 25%;
display: block;
}
#introduction .contents_size{
text-align: center;
}
#introduction h2{
width: auto;
font-size: 7vw;
margin-bottom: 40px;
}
#introduction h2::before{
}
#introduction p{
font-size: 24px;
}

#job article{
background-size: auto, auto;
padding-bottom: 12vw;
}
#job article:nth-child(odd){ background-position: 150% -500px, left top; }
#job article:nth-child(even){ background-position: -2% -500px, left top; }
#job article .info{
display: flex;
align-items: center;
padding-bottom: 8vw;
}
#job article:nth-child(odd) .info{ flex-direction: row-reverse; }
#job article:nth-child(even) .info{ flex-direction: row; }

#job article .info .photo{
width: 50%;
margin-right: 0 !important;
margin-left: 0 !important;
}
#job article .info .photo img{
width: 100%;
}
#job article .info .text{
width: 50%;
}
#job article:nth-child(odd) .info .text{ padding-right: 12vw; padding-left: 2vw; }
#job article:nth-child(even) .info .text{ padding-right: 2vw; padding-left: 12vw; }
#job article .info .text h3{
font-size: 3.5vw;
}
#job article .info .text p{
font-size: 20px;
}

#job article .interview{
grid-column-gap: 4vw;
}
#job article .interview .common_title { grid-area: 1 / 1 / 2 / 2; }
#job article .interview .text { grid-area: 2 / 1 / 3 / 2; }
#job article .interview .common_btn { grid-area: 3 / 1 / 4 / 2; }
#job article .interview .photo { grid-area: 1 / 2 / 4 / 3; }

#job article .interview .common_title .en{
font-size: 4vw;
margin-bottom: 1vw;
}
#job article .interview .common_title h4{
font-size: 2vw;
}
#job article .interview .text em{
font-size: 32px;
}
#job article .interview .text p{
font-size: 20px;
}
#job article .interview .common_btn{
text-align: left;
margin-top: 20px;
}



}