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

.occupationPage .mainContents .innerTitleWrap h1 img {
    max-width: 104px;
}
.occupationContents {
    position: relative;
    margin-top: -42px;
    padding-bottom: 120px;
}
.occupationContents .outline {
    padding: 0 3% 100px;
}
.occupationContents .outline .details {
    text-align: center;
    max-width: 1040px;
    margin: 0 auto;
    background: #f9f9f9;
    padding: 56px 3% 70px;
}
.occupationContents .outline .details h2 {
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 28px;
}
.occupationContents .outline .details h2 img {
    display: block;
    max-width: 70px;
    margin: 0 auto 25px;
}
.occupationContents .outline .details p {
    font-size: 1.6rem;
    letter-spacing: 1px;
    line-height: 1.8;
    padding-bottom: 48px;
}
.occupationContents .outline .details figure {
    max-width: 920px;
    margin: 0 auto;
}
.occupationContents .movie {
    text-align: center;
    padding: 0 0 100px 0;
}
.occupationContents .movie .movieContent {
    width: 100%;
}
.occupationContents .occupationTitle {
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 36px 3% 30px;
    color: #fff;
    text-align: center;
    background-image: -moz-linear-gradient( 0deg, rgb(75,126,191) 0%, rgb(108,189,198) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgb(75,126,191) 0%, rgb(108,189,198) 100%);
    background-image: -ms-linear-gradient( 0deg, rgb(75,126,191) 0%, rgb(108,189,198) 100%);
}
.occupationContents .occupationTitle img {
    display: block;
    max-width: 90px;
    margin: 0 auto 15px;
}
.occupationContents .occupation .block h2 {
    font-size: 2.2rem;
    font-weight: bold;
    letter-spacing: 2px;
    padding: 120px 3% 132px;
    color: #fff;
    text-align: center;
}
.occupationContents .occupation .block h2 img {
    display: block;
    margin: 0 auto 22px;
}
.occupationContents .occupation .block .intro {
    padding: 70px 3% 68px;
    margin-bottom: 66px;
}
.occupationContents .occupation .block .intro h3 {
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 1.5px;
    text-align: center;
    line-height: 1.7;
}
.occupationContents .occupation .block .intro p {
    font-size: 1.6rem;
    letter-spacing: 1.2px;
    max-width: 920px;
    margin: 30px auto 0;
    line-height: 1.8;
}
.occupationContents .occupation .block .description {
    padding: 0 3% 30px;
}
.occupationContents .occupation .block .description h3 {
    font-size: 2rem;
    letter-spacing: 1.5px;
    text-align: center;
    margin-bottom: 48px;
}
.occupationContents .occupation .block .description h3 span {
    font-weight: bold;
    display: inline-block;
    padding-bottom: 4px;
}
.occupationContents .occupation .block .description .details {
    max-width: 1040px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
.occupationContents .occupation .block .description .details .box {
    width: 31.2%;
    margin: 0 3.2% 35px 0;
}
.occupationContents .occupation .block .description .details .box:nth-of-type(3n) {
    margin-right: 0;
}
.occupationContents .occupation .block .description .details .box h4 {
    font-size: 2rem;
    letter-spacing: 1.5px;
    text-align: center;
    padding: 28px 0 20px;
    font-weight: bold;
}
.occupationContents .occupation .block .description .details .box p {
    font-size: 1.5rem;
    letter-spacing: 1.2px;
}
.occupationContents .occupation .block .typeOfBusiness {
    padding: 0 3% 50px;
}
.occupationContents .occupation .block .typeOfBusiness h3 {
    font-size: 2rem;
    letter-spacing: 1.5px;
    text-align: center;
    margin-bottom: 48px;
}
.occupationContents .occupation .block .typeOfBusiness h3 span {
    font-weight: bold;
    display: inline-block;
    padding-bottom: 4px;
}
.occupationContents .occupation .block .typeOfBusiness .details {
    max-width: 1040px;
    margin: 0 auto;
}
.occupationContents .occupation .block .typeOfBusiness .details .box {
    display: flex;
    align-items: center;
    margin-bottom: 32px;
}
.occupationContents .occupation .block .typeOfBusiness .details .box figure {
    width: 31.3%;
}
.occupationContents .occupation .block .typeOfBusiness .details .box .txtBox {
    width: 68.7%;
    padding-left: 3.5%;
}
.occupationContents .occupation .block .typeOfBusiness .details .box .txtBox h4 {
    font-size: 2rem;
    letter-spacing: 1.5px;
    padding-bottom: 20px;
    font-weight: bold;
}
.occupationContents .occupation .block .typeOfBusiness .details .box .txtBox p {
    font-size: 1.6rem;
    letter-spacing: 1.2px;
}
.occupationContents .occupation .block .pointBlock {
    padding: 0 3% 65px;
    text-align: center;
}
.occupationContents .occupation .block .pointBlock .details {
    max-width: 1040px;
    margin: 0 auto;
    padding: 42px 3% 50px;
    color: #fff;
}
.occupationContents .occupation .block .pointBlock .details h3 {
    max-width: 122px;
    margin: 0 auto;
}
.occupationContents .occupation .block .pointBlock .details h4 {
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    padding: 40px 0 30px;
    letter-spacing: 1.5px;
}
.occupationContents .occupation .block .pointBlock .details h4 span {
    background: #fff;
    display: inline-block;
    line-height: 1;
}
.occupationContents .occupation .block .pointBlock .details p {
    font-size: 1.6rem;
    letter-spacing: 1.2px;
    max-width: 800px;
    margin: 0 auto;
}
.occupationContents .occupation .block .employee {
    padding: 0 3% 36px;
}
.occupationContents .occupation .block .employee h3 {
    font-size: 2rem;
    letter-spacing: 1.5px;
    text-align: center;
    margin-bottom: 48px;
}
.occupationContents .occupation .block .employee h3 span {
    font-weight: bold;
    display: inline-block;
    padding-bottom: 4px;
}
.occupationContents .occupation .block .employee .details {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 1040px;
    margin: 0 auto;
}
.occupationContents .occupation .block .employee .details .box {
    width: 31.2%;
    margin: 0 3.2% 84px 0;
}
.occupationContents .occupation .block .employee .details .box.fadeAnime:nth-of-type(-n + 3) {
    opacity: 1;
    transform: translateY(0);
}
.occupationContents .occupation .block .employee .details .box.fadeIn:nth-of-type(-n + 3) {
    animation-name: none;
}
.occupationContents .occupation .block .employee .details .box:nth-of-type(3n),
.occupationContents .occupation .block .employee .details .box:last-of-type {
    margin-right: 0;
}
.occupationContents .occupation .block .employee .details .box a {
    display: block;
}
.occupationContents .occupation .block .employee .details .box a:hover {
    opacity: 1;
}
.occupationContents .occupation .block .employee .details .box a figure {
    overflow: hidden;
}
.occupationContents .occupation .block .employee .details .box a img {
    -webkit-transition: all .25s ease-in;
    transition: all .25s ease-in;
}
.occupationContents .occupation .block .employee .details .box a:hover img {
    transform:scale(1.1,1.1);
    transition: all .25s ease-in;
}
.occupationContents .occupation .block .employee .details.multiple {
    justify-content: space-between;
}
.occupationContents .occupation .block .employee .details.multiple .box {
    margin: 0;
}
.occupationContents .occupation .block .employee .details .nameBox {
    position: relative;
    z-index: 2;
    width: 71%;
    margin: -15% 0 0 auto;
    padding: 15px 2% 8px 7%;
    color: #fff;
    background-image: -moz-linear-gradient( 0deg, rgb(75,126,191) 0%, rgb(108,189,198) 100%);
    background-image: -webkit-linear-gradient( 0deg, rgb(75,126,191) 0%, rgb(108,189,198) 100%);
    background-image: -ms-linear-gradient( 0deg, rgb(75,126,191) 0%, rgb(108,189,198) 100%);
}
.occupationContents .occupation .block .employee .details .nameBox::after {
    content: "";
    position: absolute;
    width: 28px;
    height: 10px;
    right: 10px;
    bottom: 20px;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2256%22%20height%3D%2219.59%22%20viewBox%3D%220%200%2056%2019.59%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.cls-1%20%7B%20fill%3A%20none%3B%20stroke%3A%20%23fff%3B%20stroke-width%3A%201px%3B%20fill-rule%3A%20evenodd%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20id%3D%22namearrow%22%20data-name%3D%22namearrow%22%20class%3D%22cls-1%22%20d%3D%22M1311%2C1010.97l13%2C18h-55%22%20transform%3D%22translate(-1268.5%20-1010.47)%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-size: contain;
}
.occupationContents .occupation .block .employee .details .nameBox .type {
    font-size: 1.4rem;
    font-weight: bold;
}
.occupationContents .occupation .block .employee .details .nameBox .name {
    font-size: 2.2rem;
    font-weight: bold;
}
.occupationContents .occupation .block .employee .details .nameBox .name span {
    font-weight: normal;
    font-size: 1.3rem;
}
.occupationContents .occupation .block.block01 h2 {
    background: url(../img/occupation/title01_bg.webp) no-repeat right 0;
    background-size: cover;
}
.occupationContents .occupation .block.block01 h2 img {
    max-width: 54px;
}
.occupationContents .occupation .block.block01 .intro {
    background: #f5ebf6;
}
.occupationContents .occupation .block.block01 h3 span {
    border-bottom: 3px solid #d69fde;
}
.occupationContents .occupation .block.block01 h4 {
    color: #d69fde;
}
.occupationContents .occupation .block.block01 .pointBlock .details h4 span {
    color: #d69fde;
}
.occupationContents .occupation .block .pointBlock .details {
    background: #d69fde;
}
.occupationContents .occupation .block.block02 h2 {
    background: url(../img/occupation/title02_bg.webp) no-repeat right 0;
    background-size: cover;
}
.occupationContents .occupation .block.block02 h2 img {
    max-width: 149px;
}
.occupationContents .occupation .block.block02 .intro {
    background: #b3ccdb;
}
.occupationContents .occupation .block.block02 h3 span {
    border-bottom: 3px solid #78a8c6;
}
.occupationContents .occupation .block.block02 h4 {
    color: #b3ccdb;
}
.occupationContents .occupation .block.block02 .pointBlock .details h4 span {
    color: #78a8c6;
}
.occupationContents .occupation .block.block02 .pointBlock .details {
    background: #78a8c6;
}
.occupationContents .occupation .block.block03 h2 {
    background: url(../img/occupation/title03_bg.webp) no-repeat right 0;
    background-size: cover;
}
.occupationContents .occupation .block.block03 h2 img {
    max-width: 171px;
}
.occupationContents .occupation .block.block03 .intro {
    background: #cfefd3;
}
.occupationContents .occupation .block.block03 h3 span {
    border-bottom: 3px solid #99be9d;
}
.occupationContents .occupation .block.block03 h4 {
    color: #99be9d;
}
.occupationContents .occupation .block.block03 .pointBlock .details h4 span {
    color: #99be9d;
}
.occupationContents .occupation .block.block03 .pointBlock .details {
    background: #99be9d;
}
.occupationContents .occupation .block.block04 h2 {
    background: url(../img/occupation/title04_bg.webp) no-repeat right 0;
    background-size: cover;
}
.occupationContents .occupation .block.block04 h2 img {
    max-width: 41px;
}
.occupationContents .occupation .block.block04 .intro {
    background: #f5e1c6;
}
.occupationContents .occupation .block.block04 h3 span {
    border-bottom: 3px solid #dab380;
}
.occupationContents .occupation .block.block04 h4 {
    color: #dab380;
}
.occupationContents .occupation .block.block04 .pointBlock .details h4 span {
    color: #dab380;
}
.occupationContents .occupation .block.block04 .pointBlock .details {
    background: #dab380;
}
@media only screen and (max-width:900px) {
    .occupationContents .occupation .block .description .details .box h4,
    .occupationContents .occupation .block .typeOfBusiness .details .box .txtBox h4 {
        font-size: 1.7rem;
    }
    .occupationContents .occupation .block .typeOfBusiness .details .box .txtBox p {
        font-size: 1.4rem;
    }
    .occupationContents .occupation .block .employee .details .nameBox .type {
        font-size: 1rem;
    }
}
@media only screen and (max-width:800px) {
    .occupationContents .occupation .block .description .details .box h4,
    .occupationContents .occupation .block .typeOfBusiness .details .box .txtBox h4 {
        font-size: 1.6rem;
    }
    .occupationContents .occupation .block .typeOfBusiness .details .box .txtBox p {
        font-size: 1.3rem;
    }
 }
@media only screen and (max-width:749px) {
    .occupationPage .mainContents .innerTitleWrap h1 img {
        max-width: none;
        width: 24%;
    }
    .occupationContents {
        margin-top: 6%;
        padding-bottom: 10%;
    }
    .occupationContents .outline {
        padding: 0;
    }
    .occupationContents .outline .details {
        max-width: none;
        padding: 16% 0 17%;
    }
    .occupationContents .outline .details h2 {
        font-size: 4.8vw;
        margin-bottom: 5%;
    }
    .occupationContents .outline .details h2 img {
        max-width: none;
        width: 13%;
        margin: 0 auto 7%;
    }
    .occupationContents .outline .details p {
        font-size: 3.46vw;
        line-height: 1.7;
        padding-bottom: 13%;
    }
    .occupationContents .outline .details figure {
        max-width: none;
    }
    .occupationContents .movie {
        padding: 0;
    }
    .occupationContents .occupationTitle {
        font-size: 4.8vw;
        padding: 10% 0 9.5%;
    }
    .occupationContents .occupationTitle img {
        max-width: none;
        width: 21%;
        margin: 0 auto 3%;
    }
    .occupationContents .occupation .block h2 {
        font-size: 5.86vw;
        padding: 30% 0 37%;
    }
    .occupationContents .occupation .block h2 img {
        display: block;
        margin: 0 auto 6%;
    }
    .occupationContents .occupation .block .intro {
        padding: 15% 0 14%;
        margin-bottom: 14%;
    }
    .occupationContents .occupation .block .intro h3 {
        font-size: 5.33vw;
        line-height: 1.6;
        letter-spacing: 1px;
    }
    .occupationContents .occupation .block .intro p {
        font-size: 3.46vw;
        letter-spacing: 1px;
        max-width: none;
        margin: 8% 7% 0;
        line-height: 1.7;
    }
    .occupationContents .occupation .block .description {
        padding: 0 0 30px;
    }
    .occupationContents .occupation .block .description h3 {
        font-size: 5.33vw;
        letter-spacing: 1px;
        margin-bottom: 10%;
    }
    .occupationContents .occupation .block .description h3 span {
        padding-bottom: 1%;
    }
    .occupationContents .occupation .block .description .details {
        max-width: none;
        flex-wrap: nowrap;
        padding: 0 0 4.5% 7%;
        overflow-x: scroll;
        overflow-scrolling: touch;
        -webkit-overflow-scrolling: touch;
    }
    .occupationContents .occupation .block .description .details .box {
        width: 72%;
        min-width: 72%;
        margin: 0 7% 0 0;
    }
    .occupationContents .occupation .block .description .details .box:nth-of-type(3n) {
        margin-right: 7%;
    }
    .occupationContents .occupation .block .description .details .box:last-of-type {
        width: 79%;
        min-width: 79%;
        margin: 0;
        padding-right: 7%;
    }
    .occupationContents .occupation .block .description .details .box h4 {
        font-size: 4.53vw;
        letter-spacing: 1px;
        padding: 7% 0 5%;
    }
    .occupationContents .occupation .block .description .details .box p {
        font-size: 3.46vw;
        letter-spacing: 1px;
    }
    .occupationContents .occupation .block .typeOfBusiness {
        padding: 0 7% 6%;
    }
    .occupationContents .occupation .block .typeOfBusiness h3 {
        font-size: 5.33vw;
        letter-spacing: 1px;
        margin-bottom: 14%;
    }
    .occupationContents .occupation .block .typeOfBusiness h3 span {
        padding-bottom: 1%;
    }
    .occupationContents .occupation .block .typeOfBusiness .details {
        max-width: none;
    }
    .occupationContents .occupation .block .typeOfBusiness .details .box {
        display: block;
        margin-bottom: 14%;
    }
    .occupationContents .occupation .block .typeOfBusiness .details .box figure {
        width: 100%;
    }
    .occupationContents .occupation .block .typeOfBusiness .details .box .txtBox {
        width: 100%;
        padding: 7.5% 0 0;
    }
    .occupationContents .occupation .block .typeOfBusiness .details .box .txtBox h4 {
        font-size: 5.33vw;
        padding-bottom: 6%;
    }
    .occupationContents .occupation .block .typeOfBusiness .details .box .txtBox p {
        font-size: 3.46vw;
        letter-spacing: 1px;
        line-height: 1.7;
    }
    .occupationContents .occupation .block .pointBlock {
        padding: 0 0 16%;
    }
    .occupationContents .occupation .block .pointBlock .details {
        max-width: none;
        padding: 15% 0;
    }
    .occupationContents .occupation .block .pointBlock .details h3 {
        max-width: none;
        width: 30%;
    }
    .occupationContents .occupation .block .pointBlock .details h4 {
        font-size: 5.33vw;
        padding: 10% 0 6.5%;
        letter-spacing: 1.5px;
        line-height: 1.8;
    }
    .occupationContents .occupation .block .pointBlock .details p {
        font-size: 3.46vw;
        letter-spacing: 1px;
        max-width: none;
        line-height: 1.7;
        margin: 0 6%;
    }
    .occupationContents .occupation .block .employee {
        padding: 0 7% 13.5%;
    }
    .occupationContents .occupation .block .employee h3 {
        font-size: 5.33vw;
        letter-spacing: 1px;
        margin-bottom: 18%;
    }
    .occupationContents .occupation .block .employee h3 span {
        padding-bottom: 1%;
    }
    .occupationContents .occupation .block .employee .details {
        max-width: none;
    }
    .occupationContents .occupation .block .employee .details .box {
        width: 48.2%;
        margin: 0 3.6% 24% 0;
        position: relative;
        z-index: 2;
    }
    .occupationContents .occupation .block .employee .details .box:nth-child(3n) {
        margin-right: 3.6%;
    }
    .occupationContents .occupation .block .employee .details .box:nth-child(2n) {
        margin-right: 0;
    }
    .occupationContents .occupation .block .employee .details.multiple {
        flex-wrap: wrap;
        margin-bottom: -17.5%;
        position: relative;
    }
    .occupationContents .occupation .block .employee .details.multiple .box {
        margin: 0 0 24%;
    }
    .occupationContents .occupation .block .employee .details .nameBox {
        width: 92%;
        padding: 5.2% 3% 4.2% 8%;
        position: absolute;
        bottom: -13%;
        right: 0;
    }
    .occupationContents .occupation .block .employee .details .nameBox::after {
        width: 7.46vw;
        height: 2.66vw;
        right: 5%;
        bottom: 3vw;
    }
    .occupationContents .occupation .block .employee .details .nameBox .type {
        font-size: 2.93vw;
        padding-bottom: 6%;
    }
    .occupationContents .occupation .block .employee .details .nameBox .name {
        font-size: 4.26vw;
        line-height: 1;
    }
    .occupationContents .occupation .block .employee .details .nameBox .name span {
        font-size: 3.46vw;
    }
    .occupationContents .occupation .block.block01 h2 {
        background: url(../img/occupation/title01_bg_sp.webp) no-repeat right 0;
        background-size: cover;
    }
    .occupationContents .occupation .block.block01 h2 img {
        max-width: none;
        width: 13%;
    }
    .occupationContents .occupation .block.block02 h2 {
        background: url(../img/occupation/title02_bg_sp.webp) no-repeat right 0;
        background-size: cover;
    }
    .occupationContents .occupation .block.block02 h2 img {
        max-width: none;
        width: 40%;
    }
    .occupationContents .occupation .block.block03 h2 {
        background: url(../img/occupation/title03_bg.webp) no-repeat right 0;
        background-size: cover;
    }
    .occupationContents .occupation .block.block03 h2 img {
        max-width: 171px;
    }
    .occupationContents .occupation .block.block03 .intro {
        background: #cfefd3;
    }
    .occupationContents .occupation .block.block03 h3 span {
        border-bottom: 3px solid #99be9d;
    }
    .occupationContents .occupation .block.block03 h4 {
        color: #99be9d;
    }
    .occupationContents .occupation .block.block03 .pointBlock .details h4 span {
        color: #99be9d;
    }
    .occupationContents .occupation .block.block03 .pointBlock .details {
        background: #99be9d;
    }
    .occupationContents .occupation .block.block04 h2 {
        background: url(../img/occupation/title04_bg.webp) no-repeat right 0;
        background-size: cover;
    }
    .occupationContents .occupation .block.block04 h2 img {
        max-width: 41px;
    }
    .occupationContents .occupation .block.block04 .intro {
        background: #f5e1c6;
    }
    .occupationContents .occupation .block.block04 h3 span {
        border-bottom: 3px solid #dab380;
    }
    .occupationContents .occupation .block.block04 h4 {
        color: #dab380;
    }
    .occupationContents .occupation .block.block04 .pointBlock .details h4 span {
        color: #dab380;
    }
    .occupationContents .occupation .block.block04 .pointBlock .details {
        background: #dab380;
    }

}