@charset "utf-8";
 .bx-wrapper {
max-width: 100%;
border: 0;
margin: 0;
padding: 0;
position: relative;
box-shadow: none;
background: transparent;
padding-top: 84px;
}
#mainimage{
width: 100%;
}
#mainimage img{
width:100%;
}
#mainimageBox .award{
position: absolute;
top: 100px;
left: 0;
width: 200px;
top: 85px;
left: 15px;
width: 230px;
} #pageIndex #message{
background: url(/recruit/assets/images/top_bg00.webp) no-repeat;
background-size: contain;
background-position: center top;
margin-top: -80px;
z-index: -1;
}
#pageIndex #message .contentBoxL{
padding:120px 0;
position: relative;
}
#pageIndex #message .img01,
#pageIndex #message .img02,
#pageIndex #message .img03{
position: absolute;
max-width: 320px;
width: 25vw;
z-index: 1;
}
#pageIndex #message .img01{
right: 1vw;
top: 20px;
}
#pageIndex #message .img02{
left: 1vw;
top: 30%;
}
#pageIndex #message .img03{
right: 4vw;
bottom: 10px;
}
#pageIndex #message p{
text-shadow: 0 0 10px rgba(255,255,255,1);
width: 60%;
margin: 0 auto;
padding: 0 5vw;
}
#companyLink a{
background: url(/recruit/assets/images/top_company.webp) no-repeat;
background-size: cover;
width:100%;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
}
#companyLink a p{
margin:0 auto;
}
#recruitLink{
border-bottom: 30px solid #e1d9d4;
}
#recruitLink .contentBoxL{
display: flex;
flex-wrap: wrap;
padding-bottom: 0;
}
#recruitLink .image{
flex-basis: 70%;
width: 70%;
object-fit: cover;
}
#recruitLink .textBox{
background:#e1d9d4;
flex-basis: 30%;
margin-top: 150px;
display: flex;
align-items: center;
align-content: center;
flex-wrap: wrap;
padding-top: 50px;
}
#recruitLink h1{
flex-basis: 100%;
}
#recruitLink .comment02{
flex-basis: 100%;
}
#recruitLink ul{
flex-basis: 100%;
} #aboutReform{
background:url(/recruit/assets/images/work_img01.webp) no-repeat;
background-size: 35%;
background-position: left 20px;
}
#aboutReform .contentBox{
background:url(/recruit/assets/images/bg02.png) no-repeat;
background-size: contain;
background-position: right bottom;
}
#aboutReform .contentBox{
display: flex;
justify-content: flex-end;
}
#aboutReform .textBox{
flex-basis: 33%;
}
#aboutReform .comment01{
}
#aboutReform .example{
flex-basis: 35%;
color: #4f4f4f;
}
#aboutReform .example .flame01{
width: 220px;
}
#aboutReform .example .flame02{
width: 220px;
margin-left: auto;
}
#aboutReform .example h2{
color: #fff;
font-size: 110%;
font-weight: 300;
line-height: 130%;
margin-bottom: 0.3em;
}
#aboutReform .example p{
font-size: 90%;
line-height: 150%;
}
.occupationList .header{
background-size: contain;
background-position: left top;
background-repeat: no-repeat;
padding: 80px 50px 80px 300px;
min-height: 430px;
display: flex;
flex-direction: column;
justify-content: center;
}
.occupationList#sales .header{
background-image: url(/recruit/assets/images/work_header01.webp);
}
.occupationList#construction .header{
background-image: url(/recruit/assets/images/work_header02.webp);
}
.occupationList#administrative .header{
background-image: url(/recruit/assets/images/work_header03.webp);
}
.occupationList .header h1{
font-size: 200%;
text-align: left;
margin-bottom: 1.5em;
}
.occupationList .header h1 .emphasis{
font-weight: 100;
padding:0.25em 0.6em;
} #environment .list05 .innerBox:nth-of-type(1){
top: -60px;
left: 20px;
}
#environment .list05 .innerBox:nth-of-type(2){
left: 20px;
}
#environment .list05 .innerBox:nth-of-type(3){
top: -40px;
}
#environment .list05 .innerBox:nth-of-type(4){
top: -20px;
}
#environment .list05 .innerBox:nth-of-type(5){
top: 50px;
}
#environment .list05 .innerBox:nth-of-type(6){
top: -20px;
}
#environment .list05 .innerBox:nth-of-type(7){
top: -10px;
left: 20px;
}
#environment .list05 .innerBox:nth-of-type(8){
left: 20px;
top: 30px;
}
#environment .list05 .innerBox:nth-of-type(9){
right: 10px;
} .employeeBox{
display: flex;
justify-content: space-between;
}
.employeeBox .leftBox{
flex-basis: calc(1200px* .28);
}
.employeeBox .rightBox{
flex-basis: calc(1200px* .65);
margin-top: 60px;
} #jobDescription #midCareer{
padding-top: 0;
}
#jobDescription .btBox01{
padding: 0;
} @media screen and (max-width: 1200px) {
#mainimageBox .award {
width: 20%;
top: 70px;
} #pageIndex #message {
background-size: 130%;
} .occupationList .header {
padding:80px 20px 80px 15vw;
background-position: -6vw top;
}
.occupationList .header h1 {
font-size: 170%;
}
.occupationList .header h1 .emphasis {
padding: 0.2em 0.4em;
margin: -0.2em;
}
} @media screen and (max-width: 1000px) { #pageIndex #message{
background-size: 140%;
background-position: center 100px;
}
#pageIndex #message .img01,
#pageIndex #message .img02,
#pageIndex #message .img03{
width: 30vw;
}
#pageIndex #message .img01{
right: -8vw;
top: 240px;
}
#pageIndex #message .img02{
left: -8vw;
top: 40%;
}
#pageIndex #message .img03{
right: 1vw;
bottom: 10px;
} #aboutReform{
background-size: 75%;
background-position: -30vw 20px;
}
#aboutReform .contentBox{
background-position: right bottom;
}
#aboutReform .contentBox{
flex-direction: column;
}
#aboutReform .textBox{
padding-left: 40vw;
}
#aboutReform .example{
padding-left: 20vw;
display: flex;
}
#aboutReform .example .flame01{
align-self: flex-start;
margin-left: 13vw;
}
#aboutReform .example .flame02{
margin-top: 20px;
margin-left: inherit;
}
.occupationList .header {
padding: 80px 20px 80px 24vw;
background-position: -8vw top;
position: relative;
}
.occupationList .header h1 .emphasis {
padding: 0.1em 0.4em;
margin: 0 0 0.2em 0;
display: block;
width:fit-content;
} .employeeBox .leftBox {
flex-basis: calc(1200px* .4);
}
.employeeBox .rightBox {
margin-top: 0;
flex-basis: calc(1200px* .5);
}
} @media screen and (max-width: 760px) {
#mainimageBox .award {
width: 22%;
top: 60px;
} #pageIndex #message {
background-size: 140%;
background-position: center 120px;
padding-bottom: 0;
}
#pageIndex #recruitLink .image {
flex-basis: 50%;
width: 50%;
object-position: 80%;
}
#pageIndex #recruitLink .textBox {
flex-basis: 50%;
margin-top: 70px;
}
#pageIndex #message .img03{
right: -7vw;
bottom: 10px;
} #aboutReform .example{
padding-left: 0;
}
#aboutReform .example .flame01{
align-self: flex-start;
margin-left: 13vw;
}
#aboutReform .example .flame02{
margin-top: 20px;
margin-left: inherit;
}
} @media screen and (max-width: 600px) {
#mainimageBox .award {
width: 20%;
top: 60px;
} #pageIndex #message {
padding-bottom: 40px;
}
#pageIndex #message p {
width: 60%;
margin: 0 auto 0 30px;
padding: 0;
}
#pageIndex #message .img01,
#pageIndex #message .img02,
#pageIndex #message .img03{
width: 40vw;
max-width: 180px;
}
#pageIndex #message .img01{
right: -9vw;
top: 160px;
}
#pageIndex #message .img02{
right: -9vw;
top: 48%;
left: inherit;
}
#pageIndex #message .img03{
right: 7vw;
bottom: -5px;
}
#pageIndex #recruitLink {
border-bottom:none;
}
#pageIndex #recruitLink .image {
flex-basis: 90%;
width: 90%;
height: 40vw;
object-position:center;
}
#pageIndex #recruitLink .textBox {
flex-basis: 100%;
margin-top: -70px;
z-index: -20;
padding-top: 80px;
}
#pageIndex #recruitLink .comment02 {
flex-basis: 100%;
text-align: center;
} #aboutReform {
background-size: 70%;
background-position: -30vw 20px;
}
#aboutReform .contentBox{
background-position: right 190px;
margin-bottom: 0;
}
#aboutReform .example {
padding-left: 0;
position: relative;
display: block;
margin-top: -30px;
font-size:90%;
}
#aboutReform .example .flame01{
width:200px;
position: absolute;
top: 0;
}
#aboutReform .example .flame02{
width: 200px;
margin-top: 100px;
margin-left: auto;
}
#aboutReform .example h2{
font-size: 110%;
position: relative;
z-index: 99;
}
.occupationList .header {
padding: 60px 20px 60px 24vw;
background-position: -24vw top;
position: relative;
background-size: cover;
z-index: 1;
}
.occupationList .header:before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,.3);
z-index: -1;
}
.occupationList .header h1 {
font-size: 160%;
line-height: 150%;
margin-bottom: 0.5em;
}
.occupationList .header h1 .emphasis {
padding: 0.1em 0.4em;
margin: 0 0 0.2em 0;
display: block;
width:fit-content;
} #environment .list05 .innerBox:nth-of-type(1){
top: 0px;
left: 5px;
}
#environment .list05 .innerBox:nth-of-type(2){
top: 40px;
left: -3%;
}
#environment .list05 .innerBox:nth-of-type(3){
top: 0;
left: 4%;
}
#environment .list05 .innerBox:nth-of-type(4){
top: 60px;
left: -3%;
}
#environment .list05 .innerBox:nth-of-type(5){
top: 20px;
}
#environment .list05 .innerBox:nth-of-type(6){
top: 60px;
}
#environment .list05 .innerBox:nth-of-type(7){
top: 30px;
left: 3%;
}
#environment .list05 .innerBox:nth-of-type(8){
top: 60px;
left: 0%;
}
#environment .list05 .innerBox:nth-of-type(9){
top: 10px;
left:20%;
} .employeeBox {
flex-direction: column;
}
.employeeBox .leftBox {
}
.employeeBox .title {
}
.employeeBox .scheduleBox{
}
.employeeBox .photoBox{
display: block;
justify-content: space-between;
}
.employeeBox .photoBox img:nth-of-type(1) {
left: auto;
}
.employeeBox .photoBox img {
width: 100%;
}
.employeeBox .rightBox {
margin-top: 0;
}
.employeeBox .photoBox .photoComment {
text-align: right;
padding-right: 2px;
}
.employeeBox .photoBox img:nth-of-type(1),
.employeeBox .photoBox .photoComment:nth-of-type(1) {
left: auto;
}
.employeeBox .interviewBox .interviewPhotoBox .photoComment {
padding-right: 2px;
} #jobDescription .btBox01{
padding: 0 20px;
}
} @media screen and (max-width: 460px) {
#mainimageBox .award {
width: 20%;
top: 60px;
} #pageIndex #message {
margin-top: 20px;
}
#pageIndex #message .contentBoxL {
background: url(/recruit/assets/images/top_bg00.webp) no-repeat;
background-position: center 50%;
background-size: 100%;
margin-top: 0;
padding: 0 0 250px 0;
}
#pageIndex #message .img01,
#pageIndex #message .img02,
#pageIndex #message .img03{
width: 40vw;
z-index: 10;
max-width: none;
}
#pageIndex #message .img01{
right: -4vw;
top: inherit;
bottom: 120px;
width: 35vw;
z-index: 12;
}
#pageIndex #message .img02{
left: 1vw;
top: inherit;
bottom:70px;
}
#pageIndex #message .img03{
right: 20vw;
bottom: 0;
width: 42vw;
}
#pageIndex #message p {
width: 90%;
}
#pageIndex #companyLink a {
height: 100px;
} #aboutReform .example .flame01{
margin-left: 0;
}
#aboutReform .example .flame02{
margin-top: 120px;
}
.occupationList .header {
padding: 40px 20px 40px 20vw;
background-position: -50vw top;
}
.occupationList .header:before {
background: rgba(255, 255, 255, .5);
}
.occupationList .header h1 {
font-size: 140%;
line-height: 140%;
}
}