@charset "utf-8";
/* CSS Document */
@media screen and (min-width: 1025px){
/* 三洋商事株式会社の配送・営業職は？  start*/
.recruit-container{
    width: 100%;
}
.recruit-section{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: auto auto 10px auto;
}
.title{
    width: 70%;
    /*place-content: center;*/
    display: grid;
    grid-template-columns: 5fr 2fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "job level hiring";
    column-gap: 5%;
}
.job{
    grid-area: job;
    background-color: #2351a3;
    color: white;
    text-align: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.hiring{
    grid-area: hiring;
    background-color: #ff007b;
    color: white;
    text-align: center;
    border-radius: 10px;
}
.level{
    grid-area: level;
    background-color: #f4f4c2;
    place-content: center;
    border-radius: 10px;
}
.level img{
   display: block;
}
.job h1, .hiring h1{
    font-size: 1.2rem;
    color: white;
}
.recruit-section1{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: auto auto 110px auto;
}
.job-content{
    margin: 50px auto 100px auto;
    width: 95%;    
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "text     image"
    "timeline timeline"
    "schedule schedule";
    gap: 5%;
}
.job-text{
    grid-area: text;
}
.job-text p{
    margin: 10% 0%;
}
.job-image{
    grid-area: image;
}
.job-image img{
    margin: 50px;
}
.job-timeline{
    grid-area: timeline;
    width: 75%;
    margin: auto;
}
.job-schedule{
    grid-area: schedule;
    width: 75%;
    margin: auto;
}
.job-timeline-sp{
    display: none;
}
.job-schedule-sp{
    display: none;
}
.voice{
    margin: 80px auto;
    width: 90%;
    display: grid;
    grid-template-columns: 1fr 4fr;
    grid-template-rows: auto;
    grid-template-areas:
    "voice-icon voice-text";
    gap : 3%;
    align-items: center;
    border-radius: 30px;;
    background-color: white;
}
.voice-icon{
    grid-area: voice-icon;
    justify-items: center;
}
.voice-icon img{
    width: 70%;
    margin: auto;
    display: block;
}
.voice-text{
    grid-area: voice-text;
}
.voice-text p{
    margin: 20px;
}
}
@media screen and (min-width: 481px) and (max-width: 1024px){
.recruit-container{
    width: 100%;
}
.recruit-section{
    width: 90%;
    max-width: 1000px;
    margin: auto auto 10px auto;
}
.title{
    width: 95%;
    display: grid;
    grid-template-columns: 6fr 2fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "job level hiring";
    column-gap: 5%;
}
.job{
    grid-area: job;
    background-color: #2351a3;
    color: white;
    text-align: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.hiring{
    grid-area: hiring;
    background-color: #ff007b;
    color: white;
    text-align: center;
    border-radius: 10px;
    align-content: center;
}
.hiring h1{
    font-size: 1.0rem;
    color: white;
}
.level{
    grid-area: level;
    background-color: #f4f4c2;
    place-content: center;
    border-radius: 10px;
}
.level img{
   display: block;
}
.job h1{
    font-size: 1.2rem;
    color: white;
}
.recruit-section1{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: auto auto 50px auto;
    display: wrap;
}
.job-content{
    margin: 50px auto 100px auto;
    width: 95%;    
    display: grid wrap;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "text"  
    "image"
    "timeline"
    "schedule";
    gap: 5%;
    /*place-content: center;*/
}
.job-text{
    grid-area: text;
}
.job-text p{
    margin: 3% 0%;
}
.job-image{
    grid-area: image;
    width: 70%;
    margin: auto;
}
.job-image img{
}
.job-timeline{
    grid-area: timeline;
    width: 90%;
    margin: auto;
}
.job-schedule{
    grid-area: schedule;
    width: 95%;
    margin: 100px auto;
}
.job-timeline-sp{
    display: none;
}
.job-schedule-sp{
    display: none;
}
.voice{
    margin: 30px auto;
    width: 95%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "voice-icon"
    "voice-text";
    gap : 3%;
    /*align-items: center;*/
    border-radius: 30px;;
    background-color: white;
}
.voice-icon{
    grid-area: voice-icon;
    justify-items: center;
}
.voice-icon img{
    width: 30%;
    margin: auto;
    display: block;
}
.voice-text{
    grid-area: voice-text;
}
.voice-text p, .voice-text h2{
    margin: 40px;
}
}
@media screen and (max-width: 480px){
.recruit-container{
    width: 100%;
}
.recruit-section{
    width: 90%;
    max-width: 1000px;
    margin: auto auto 10px auto;
}
.title{
    width: 95%;
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "job job" "level hiring";
    /*gap: 5%;*/
}
.job{
    grid-area: job;
    background-color: #2351a3;
    color: white;
    text-align: center;
    margin-bottom: 5%;
    /*border-top-left-radius: 20px;
    border-top-right-radius: 20px;*/
}
.hiring{
    grid-area: hiring;
    background-color: #ff007b;
    color: white;
    text-align: center;
    border-radius: 10px;
    align-content: center;
}
.hiring h1{
    font-size: 1.0rem;
    color: white;
}
.level{
    grid-area: level;
    background-color: #f4f4c2;
    place-content: center;
    border-radius: 10px;
    margin-right: 5%;
}
.level img{
   display: block;
}
.job h1{
    font-size: 1.1rem;
    color: white;
}
.recruit-section1{
    width: 90%;
    max-width: 1000px;
    place-content: center;
    margin: auto auto 50px auto;
    display: wrap;
}
.job-content{
    margin: 50px auto 100px auto;
    width: 95%;    
    display: grid wrap;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "text"  
    "image"
    "timeline"
    "schedule";
    gap: 5%;
    /*place-content: center;*/
}
.job-text{
    grid-area: text;
}
.job-text p{
    margin: 3% 0%;
}
.job-image{
    grid-area: image;
    width: 100%;
    margin: auto;
}
.job-image img{
}
.job-timeline{
    display: none;
}
.job-schedule{
    display: none;
}
.job-timeline-sp{
    grid-area: timeline;
    width: 100%;
    margin: auto;
}
.job-schedule-sp{
    grid-area: schedule;
    width: 100%;
    margin: 100px auto;
}
.job-timeline h1,.job-schedule h1{
    font-size: 1.3rem;
}
.voice{
    margin: 50px auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:
    "voice-icon"
    "voice-text";
    gap : 3%;
    /*align-items: center;*/
    border-radius: 30px;;
    background-color: white;
    padding-bottom: 50px;
}
.voice-icon{
    grid-area: voice-icon;
    /*justify-items: center;*/
}
.voice-icon h2{
    text-align: center;
}
.voice-icon img{
    width: 40%;
    margin: auto;
    display: block;
}
.voice-text{
    grid-area: voice-text;
}
.voice-text p, .voice-text h2{
    margin: 20px;
}
}