@charset "UTF-8";
/* CSS Document */
/*===============================================
採用共通
===============================================*/
.wf-loading body {
    opacity: 0;
}
.wf-active body,
.wf-inactive body {
    opacity: 1;
}
.rift {
    font-family: "rift", sans-serif;
    font-weight: bold;
}
.shuei {
    font-family: "dnp-shuei-gothic-kin-std", sans-serif;
    font-weight: 600;
    font-style: normal;
}
.cls-22,
.cls-28 {
    fill: #0045ac;
}
.cls-22,
.cls-23,
.cls-24 {
    opacity: .8;
}
.cls-25,
.cls-30 {
    fill: #fff;
}
.cls-26 {
    fill: none;
    stroke: #fff;
    stroke-miterlimit: 10;
    stroke-width: 2px;
}
.cls-23,
.cls-27 {
    fill: #046bc3;
}
.cls-27 {
    opacity: .5;
}
.cls-24 {
    fill: #00a5e0;
}
.cls-29 {
    fill: none;
}
.cls-29,
.cls-30 {
    stroke: #0045ac;
    stroke-miterlimit: 10;
    stroke-width: 2.55px;
}
#we_2,
#can_2,
#you_2,
#can__2 {
    opacity: 0;
}
.messageIcon.active #we,
.top_recinfo.active #we_2 {
    opacity: 0;
    -webkit-animation: wecanAnime 0.01s 1s linear forwards;
    animation: wecanAnime 0.01s 1s linear forwards;
}
.messageIcon.active #can_,
.top_recinfo.active #can__2 {
    opacity: 0;
    -webkit-animation: wecanAnime 0.01s 1.5s linear forwards;
    animation: wecanAnime 0.01s 1.5s linear forwards;
}
.messageIcon.active #you,
.top_recinfo.active #you_2 {
    opacity: 0;
    -webkit-animation: wecanAnime 0.01s 2s linear forwards;
    animation: wecanAnime 0.01s 2s linear forwards;
}
.messageIcon.active #can,
.top_recinfo.active #can_2 {
    opacity: 0;
    -webkit-animation: wecanAnime 0.01s 2.5s linear forwards;
    animation: wecanAnime 0.01s 2.5s linear forwards;
}
@-webkit-keyframes wecanAnime {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes wecanAnime {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
.slideAnime.active {
    -webkit-animation: slide 2s 2s forwards;
    animation: slide 2s 2s forwards;
}
@-webkit-keyframes slide {
    0% {
        -webkit-transform: translate(100%, -50%);
        transform: translate(100%, -50%);
        right: -2.1%;
        top: 50%;
    }
    100% {
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        right: -2.1%;
        top: 50%;
    }
}
@keyframes slide {
    0% {
        -webkit-transform: translate(100%, -50%);
        transform: translate(100%, -50%);
        right: -2.1%;
        top: 50%;
    }
    100% {
        -webkit-transform: translate(0, -50%);
        transform: translate(0, -50%);
        right: -2.1%;
        top: 50%;
    }
}
/*==============================================
メニュー
===============================================*/
#recruitSite .drop {
    background: rgba(0, 165, 224, 0.75);
}
#recruitSite .drop li a:hover {
    background-color: var(--sub);
}
#recruitSite .drop li:nth-child(1)::before {
    background-color: var(--sub);
}
#recruitSite .drop li.paragraph p{

}
#recruitSite .drop li.paragraph p::before{
	content: '';
	width: 1.2em;
	height: 1px;
	background-color: #fff;
	display: inline-block;
	margin-right: 0.5em;
	vertical-align: 0.35em;
}
/*===============================================
採用ヘッダー
===============================================*/
header .header_rec-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    padding: 0 2.5%;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    background-color: rgba(255, 255, 255, 1);
}
header .hd_rec-logo {
    margin-right: 5%;
    position: relative;
    z-index: 999999;
    width: 100%;
    max-width: 420px;
    min-width: 320px;
}
/*===============================================
採用トップ
===============================================*/
#recruit_wrap {
    width: 100%;
    margin: 100px auto 0;
    overflow: hidden;
}
#recruit_wrap .recruit_main {
    width: 100%;
    height: 90vh;
    position: relative;
}
#recruit_wrap .recruit_mainSlider {
    width: 80%;
    height: 100%;
    overflow: hidden;
}
#recruit_wrap .recruit_mainSlider li {
    width: 100%;
    height: 90vh;
}
#recruit_wrap ul.recruit_mainSlider li.recruit_mainSlider01 {
    background: url("../img/recruitMain01.jpg")no-repeat left 25% top / cover;
}
#recruit_wrap ul.recruit_mainSlider li.recruit_mainSlider02 {
    background: url("../img/recruitMain02.jpg")no-repeat right 35% bottom / cover;
}
#recruit_wrap ul.recruit_mainSlider li.recruit_mainSlider03 {
    background: url("../img/recruitMain03.jpg")no-repeat right 30% center / cover;
}
#recruit_wrap ul.recruit_mainSlider li.recruit_mainSlider04 {
    background: url("../img/recruitMain04.jpg")no-repeat right 40% center / cover;
}
#recruit_wrap ul.recruit_mainSlider li.recruit_mainSlider05 {
    background: url("../img/recruitMain05.jpg")no-repeat center center / cover;
}
#recruit_wrap .recruit_main .head_title {
    position: absolute;
    right: 0;
    bottom: 0;
    font-size: clamp(25px, (28vw/var(--pc)), 28px);
    color: var(--deep);
    font-weight: 700;
    letter-spacing: 5px;
    background-color: #fff;
    padding: 50px 100px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 40px 0 0;
    line-height: 1;
    z-index: 200;
}
#recruit_wrap .recruit_object {
    background-color: var(--sub);
    color: #fff;
    font-size: 7rem;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    position: absolute;
    right: 20%;
    bottom: 0;
    height: 80%;
    width: 85px;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
#recruit_wrap .recruit_object p {
    position: absolute;
    top: -3px;
    right: -5px;
}
#recruit_wrap .recruit_object::before {
    content: '';
    width: 100%;
    height: 55%;
    background-color: var(--main);
    position: absolute;
    bottom: 0;
}
#recruit_wrap .recruit_object::after {
    content: '';
    width: 100%;
    height: 27%;
    background-color: var(--deep);
    position: absolute;
    bottom: 0;
}
#recruit_wrap .recruit-intro {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 90%;
    margin: -120px auto clamp(100px, (120vw/var(--pc)), 120px);
    position: relative;
    z-index: 100;
}
#recruit_wrap .messageIcon {
    width: 50%;
    max-width: 750px;
}
#recruit_wrap .recruit-message {
    width: 45%;
    font-size: clamp(16px, (18vw/var(--pc)), 18px);
    line-height: 2.2;
    color: #0045ac;
    margin-top: 15%;
}
#recruit_wrap .recruit-message .title {
    font-size: clamp(55px, (68vw/var(--pc)), 68px);
    line-height: 1.6;
    margin-bottom: 50px;
    font-weight: bold;
}
#recruit_wrap .recruit-message .title span {
    display: block;
    color: var(--sub);
}
/* 仕事紹介 */
#top_job {
    position: relative;
    width: 100%;
}
.top_job_line {
    content: '';
    background: url("../img/kindLine.svg") no-repeat center bottom / cover;
    width: 1408px;
    height: 1678px;
    position: absolute;
    top: 10%;
    right: 0;
    z-index: 300;
    -webkit-transform: translate(99.9%, -100%);
    transform: translate(99.9%, -100%);
    opacity: 0;
}
#top_job.active .top_job_line {
    -webkit-animation: diagonalLoop 3s linear forwards;
    animation: diagonalLoop 3s linear forwards;
}
@-webkit-keyframes diagonalLoop {
    0% {
        -webkit-transform: translate(99.9%, -100%);
        transform: translate(99.9%, -100%);
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
}
@keyframes diagonalLoop {
    0% {
        -webkit-transform: translate(99.9%, -100%);
        transform: translate(99.9%, -100%);
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
}
.top_job {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto clamp(300px, (400vw/var(--pc)), 400px);
    position: relative;
}
.top_job::before {
    content: '';
    background: url("../img/kindBase.svg") no-repeat center bottom / cover;
    width: 600px;
    padding-top: 200%;
    position: absolute;
    top: 50px;
    right: 100px;
    z-index: 200;
}
.pageTitleBox {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 500;
}
.pageTitleBox .pageTitle {
    font-size: 1.8rem;
    color: #fff;
    background-color: var(--deep);
    text-align: center;
    padding: 20px 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    letter-spacing: 3px;
    line-height: 1;
}
.pageTitleBox .pageTitle.rift {
    font-size: clamp(65px, (85vw/var(--pc)), 85px);
    color: var(--deep);
    background-color: #fff;
    margin-bottom: 20px;
    padding: 10px 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.top_job .job_kinds {
    position: relative;
    margin-bottom: 90px;
    z-index: 400;
}
.job_kinds .imageBox {
    width: 70%;
    border-radius: 10px;
    position: relative;
}
.job_kinds .imageBox .image {
    line-height: 0;
    overflow: hidden;
    background-color: #000;
    border-radius: 10px;
    position: relative;
}
.job_kinds .imageBox .image .human img {
    -webkit-transition: 0.4s ease-in;
    transition: 0.4s ease-in;
}
.job_kinds .imageBox:hover .image .human img {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);
    opacity: 0.8;
}
.job_kinds .imageBox .image .type {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 75%;
    font-size: 2rem;
    color: #fff;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    background-color: #00008f;
    text-align: center;
    letter-spacing: 3px;
}
.job_kinds .imageBox .image .type.job01 {
    background-color: #1252b2;
}
.job_kinds .imageBox .image .type.job02 {
    background-color: var(--sub);
}
.job_kinds .imageBox .image .type.job03 {
    background-color: #00008f;
}
.job_kinds .imageBox .image .type.job04 {
    background-color: var(--main);
}
.job_kinds .imageBox .image .type.job05 {
    background-color: #4040ab;
}
.job_kinds .imageBox .image .type p {
    padding: 0 2em;
    margin-top: -1em;
}
.job_kinds .imageBox .image .type span {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 30px;
    background-color: blue;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
.job_system {
    font-size: 1.8rem;
    background-color: #fff;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    max-width: 400px;
    text-align: center;
    padding: 1em 0;
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
}
.rec_btnBox {
    width: 60%;
    max-width: 360px;
    position: absolute;
    right: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.rec_btn {
    color: #000;
    position: relative;
    font-size: clamp(16px, (18vw/var(--pc)), 18px);
    border-radius: 0 0 35px 0;
    background-color: #fff;
    text-align: center;
    width: 100%;
    display: inline-block;
    height: 70px;
    line-height: 70px;
    overflow: hidden;
    z-index: 10;
}
.rec_btn::before {
    content: "";
    width: 120%;
    height: 200%;
    position: absolute;
    top: -50%;
    right: 0;
    z-index: 0;
    background: #00008F;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.job_kinds .imageBox:hover .rec_btn::before {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.job_kinds:nth-child(5) .rec_btn {
    background-color: transparent;
}
.job_kinds:nth-child(5) .rec_btn::before {
    display: none;
}
.rec_btn p {
    margin-right: 35px;
    position: relative;
    z-index: 20;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.job_kinds .imageBox:hover .rec_btn p {
    color: #fff;
}
.rec_btn span.btn_circle {
    position: absolute;
    right: 0;
    top: 0;
    width: 70px;
}
.rec_btn span.btn_circle img {
    max-width: 70px;
    width: 100%;
    height: auto;
}
.rec_btn span.btn_arrow {
    position: absolute;
    right: 35px;
    top: calc(50% + 1px);
    -webkit-transform: translate(50%, -50%);
    transform: translate(50%, -50%);
    width: 100%;
}
.job_kinds .imageBox:hover .rec_btn span.btn_arrow img {
    -webkit-animation: arrow 0.5s 0s both;
    animation: arrow 0.5s 0s both;
    -webkit-animation-timing-function: cubic-bezier(0.5, 0.03, 0.5, 1);
    animation-timing-function: cubic-bezier(0.5, 0.03, 0.5, 1);
}
.rec_btn span.btn_arrow img {
    max-width: 19px;
    width: 100%;
    height: auto;
}
/* 社員インタビュー */
.top_person {
    position: relative;
    padding-top: 120px;
    width: 100%;
    margin-bottom: clamp(100px, (150vw/var(--pc)), 150px);
}
.top_person .pageTitleBox {
    position: absolute;
    right: inherit;
    top: 0;
    left: 10%;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
.top_person .pageTitleBox .pageTitle {
    color: #fff;
    background-color: var(--sub);
}
.top_person .pageTitleBox .pageTitle.rift {
    color: #fff;
    background: repeating-linear-gradient(45deg, #0045ac, #0045ac 55px, #00a5e0 55px, #00a5e0 110px, #0045ac 110px, #0045ac 165px, #046bc3 165px, #046bc3 220px, #4040ab 220px, #4040ab 275px);
}
.top_person::before {
    content: '';
    width: 80%;
    height: 240px;
    background-color: #99dbf3;
    position: absolute;
    right: 0;
    top: 0;
}
.top_person::after {
    content: '';
    width: 100%;
    height: 240px;
    background-color: #046bc3;
    position: absolute;
    right: 0;
    top: 300px;
    z-index: 5;
}
.personSlider {
    position: relative;
    z-index: 10;
    margin-bottom: 20rem;
}
.personSlider .person {
    -webkit-transform: scale(0.875);
    transform: scale(0.875);
    -webkit-transform-origin: center bottom;
    transform-origin: center bottom;
    text-align: center;
    position: relative;
}
.personSlider .slick-slide {
    -webkit-transition: -webkit-transform 1.5s ease;
    transition: -webkit-transform 1.5s ease;
    transition: transform 1.5s ease;
    transition: transform 1.5s ease, -webkit-transform 1.5s ease;
}
.personSlider .slick-center {
    -webkit-transform: scale(1);
    transform: scale(1);
}
.slider-wrap {
    position: relative;
}
.slider-arrow {
    position: absolute;
    bottom: -50px;
    right: 0;
    z-index: 10;
    background: none;
    border: none;
    cursor: pointer;
    width: 200px;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    padding: 0;
    -webkit-transition: 0.25s;
    transition: 0.25s;
}
.slider-arrow.prev {
    right: 200px;
}
.slider-arrow.next {
    right: 0;
}
.slider-arrow.prev:hover,
.slider-arrow.next:hover {
    -webkit-transform: translateY(90%);
    transform: translateY(90%);
}
.personSlider .person .image,
.list-wrap .person .image {
    position: relative;
    line-height: 0;
}
.personSlider .person .image .personImg,
.list-wrap .person .image .personImg {
    border-radius: 35% 35% 0 0;
    position: relative;
    -webkit-transition: 0.25s;
    transition: 0.25s;
}
.personSlider .person .copy,
.list-wrap .person .copy {
    font-size: 1.7rem;
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: left;
    width: 85%;
    z-index: 20;
}
.personSlider .person .copy p,
.list-wrap .person .copy p {
    margin-bottom: 10px;
    background-color: var(--deep);
    padding: 0.25em 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 2;
}
.personSlider .person .copy p:nth-last-child(1),
.list-wrap .person .copy p:nth-last-child(1) {
    margin-bottom: 0;
}
.personSlider .person .cross_logo,
.list-wrap .person .cross_logo {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 0;
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%);
    width: 100%;
    max-width: 270px;
    z-index: 20;
}
.personSlider .person .type,
.list-wrap .person .type {
    position: absolute;
    top: 15px;
    right: 0;
    font-size: clamp(45px, (55vw/var(--pc)), 55px);
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    color: var(--deep);
    background-color: #fff;
    letter-spacing: 10px;
    padding: 15px 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 1;
    z-index: 20;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.personSlider .person a:hover .type,
.list-wrap .person a:hover .type {
    top: -15px;
    color: #fff;
    background-color: var(--deep);
}
.personSlider .person.person03 .copy p,
.personSlider .person.person04 .copy p,
.list-wrap .person.person03 .copy p,
.list-wrap .person.person04 .copy p {
    background-color: var(--sub);
}
.personSlider .person.person03 .type,
.personSlider .person.person04 .type,
.list-wrap .person.person03 .type,
.list-wrap .person.person04 .type {
    color: var(--sub);
}
.personSlider .person.person03 a:hover .type,
.personSlider .person.person04 a:hover .type,
.list-wrap .person.person03 a:hover .type,
.list-wrap .person.person04 a:hover .type {
    color: #fff;
    background-color: var(--sub);
}
.personSlider .person.person05 .copy p,
.personSlider .person.person06 .copy p,
.list-wrap .person.person05 .copy p,
.list-wrap .person.person06 .copy p {
    background-color: #00008f;
}
.personSlider .person.person05 .type,
.personSlider .person.person06 .type,
.list-wrap .person.person05 .type,
.list-wrap .person.person06 .type {
    color: #00008f;
}
.personSlider .person.person05 a:hover .type,
.personSlider .person.person06 a:hover .type,
.list-wrap .person.person05 a:hover .type,
.list-wrap .person.person06 a:hover .type {
    color: #fff;
    background-color: #00008f;
}
.personSlider .person.person07 .copy p,
.list-wrap .person.person07 .copy p {
    background-color: var(--main);
}
.personSlider .person.person07 .type,
.list-wrap .person.person07 .type {
    color: var(--main);
    top: inherit;
    right: 0;
    bottom: 0;
}
.personSlider .person.person07 a:hover .type,
.list-wrap .person.person07 a:hover .type {
    color: #fff;
    background-color: var(--main);
    top: inherit;
    right: 0;
    bottom: 30px;
}
.personSlider .person .name,
.list-wrap .person .name {
    font-size: 2rem;
    padding: 40px 0 15px;
    background-color: #fff;
    width: 100%;
}
.personSlider .person .name span,
.list-wrap .person .name span {
    display: inline-block;
    margin-right: 1em;
}
/* TAKEUCHIを知る */
.top_company {
    margin-bottom: clamp(100px, (150vw/var(--pc)), 150px);
    position: relative;
}
.top_company::before {
    content: '';
    width: 100%;
    height: calc(100% + 300px);
    background-color: var(--main);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}
.top_company .image {
    line-height: 0;
}
.top_companyTitle {
    color: #fff;
    margin: 0 auto;
    text-align: center;
    position: absolute;
    bottom: 42.5px;
    left: 50%;
    -webkit-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%)
}
.top_companyTitle .pageTitle.rift {
    font-size: 8.5rem;
    margin-bottom: 0;
    line-height: 1;
}
.top_companyTitle .pageTitle {
    font-size: 2rem;
    letter-spacing: 5px;
}
.top_menu {
    width: 90%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto clamp(200px, (250vw/var(--pc)), 250px);
}
.top_menu .takeuchi_intro,
.top_menu .takeuchi_number,
.top_menu .takeuchi_person,
.top_menu .takeuchi_job {
    width: 47.5%;
    border-radius: 10px;
    text-align: center;
    position: relative;
}
.top_menu .takeuchi_intro img,
.top_menu .takeuchi_number img,
.top_menu .takeuchi_person img,
.top_menu .takeuchi_job img {
    border-radius: 10px;
}
.top_menu .image {
    margin-bottom: 50px;
    position: relative;
    line-height: 0;
}
.top_menu .title {
    font-size: 2rem;
    font-weight: bold;
    text-align: left;
    letter-spacing: 5px;
}
.top_menu .takeuchi_intro .image .title {
    position: absolute;
    left: 10%;
    bottom: 15%;
    color: #fff;
}
.top_recinfo {
    margin: 0 auto clamp(200px, (250vw/var(--pc)), 250px);
    position: relative;
    padding-top: 100px;
}
.top_recinfo .imageBox {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    line-height: 0;
}
.top_recinfo .imageSlide {
    overflow: hidden;
    border-radius: 500px 500px 0 0;
}
.top_recinfo .imageSlide img {
    margin: 0 auto;
}
.top_recinfo .wecan {
    width: 55%;
    max-width: 540px;
    position: absolute;
    top: -100px;
    right: 80px;
}
.top_recinfo .wecan_bg {
    position: absolute;
    top: clamp(200px, (250vw/var(--pc)), 250px);
    left: 0;
    width: 100%;
    z-index: -1;
}
/* 採用情報メニュー */
.top_recinfo .recinfo_title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 90%;
    max-width: 1000px;
    margin: 0 auto;
}
.recinfo_title .title_en {
    background-color: var(--sub);
    color: #fff;
    font-size: clamp(60px, (70vw/var(--pc)), 70px);
    line-height: 1;
    width: 60%;
    height: clamp(80px, (90vw/var(--pc)), 90px);
    position: relative;
}
.recinfo_title .title_en p {
    position: absolute;
    bottom: -9px;
    left: -3px;
    line-height: 1;
    z-index: 30;
}
.recinfo_title .title_en::before {
    content: '';
    width: 50%;
    height: clamp(80px, (90vw/var(--pc)), 90px);
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--main);
    z-index: 10;
}
.recinfo_title .title_en::after {
    content: '';
    width: 25%;
    height: clamp(80px, (90vw/var(--pc)), 90px);
    position: absolute;
    top: 0;
    right: 0;
    background-color: var(--deep);
    z-index: 20;
}
.recinfo_title .title_jp {
    font-size: 3rem;
    font-weight: bold;
    color: var(--deep);
    line-height: clamp(80px, (90vw/var(--pc)), 90px);
    margin-left: 50px;
    letter-spacing: 5px;
}
/* リクルートサブメニュー */
.top_recmenu {
    width: 90%;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-width: 1400px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: clamp(30px, (38vw/var(--pc)), 38px);
    color: #fff;
    height: 350px;
    margin-bottom: 400px;
}
.top_recmenu .recBanner {
    width: 47.5%;
    border-radius: 10px;
    text-align: center;
    position: relative;
}
.top_recmenu .recBanner::after {
    content: '';
    width: 180px;
    height: 180px;
    background-color: #fff;
    position: absolute;
    right: -1px;
    top: -1px;
    border-radius: 0 10px 0 0;
    -webkit-clip-path: polygon(100% 0, 15% 0, 100% 100%);
    clip-path: polygon(100% 0, 15% 0, 100% 100%);
}
.top_recmenu .recBanner .title p {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%)
}
.top_recmenu .graduates {
    background-color: var(--sub);
}
.top_recmenu .career {
    background-color: var(--main);
}
.top_recmenu .rec_btnBox {
    width: 80%;
    max-width: 550px;
    position: absolute;
    right: 0;
    bottom: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    height: 70px;
    overflow: hidden;
}
.top_recmenu a {
    display: inline-block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: #fff;
}
.top_recmenu a:hover .rec_btn::before {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}
.top_recmenu a:hover .rec_btn span.btn_arrow img {
    -webkit-animation: arrow 0.5s 0s both;
    animation: arrow 0.5s 0s both;
    -webkit-animation-timing-function: cubic-bezier(0.5, 0.03, 0.5, 1);
    animation-timing-function: cubic-bezier(0.5, 0.03, 0.5, 1);
}
.top_recmenu a:hover p {
    color: #fff;
}
.top_recmenu .rec_btnBox .rec_btn p {
    position: absolute;
    bottom: -9px;
    left: -5px;
    line-height: 1;
    font-size: clamp(55px, (70vw/var(--pc)), 70px);
}
.top_recmenu .graduates .rec_btnBox p {
    color: var(--sub)
}
.top_recmenu .career .rec_btnBox p {
    color: var(--main)
}
.top_recmenu .graduates a:hover .rec_btnBox p,
.top_recmenu .career a:hover .rec_btnBox p {
    color: #fff;
}
/*===============================================
社員一覧
===============================================*/
#personList {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-top: 100px;
}
#personList > .pageTitleBox {
    position: absolute;
    left: 0;
    top: 0;
    right: inherit;
    bottom: inherit;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
#personList > .pageTitleBox .pageTitle {
    color: #fff;
    background-color: var(--sub);
    padding: 40px 25px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#personList > .pageTitleBox .pageTitle.rift {
    color: #fff;
    background: repeating-linear-gradient(-45deg, #4040ab, #4040ab 70px, #046bc3 70px, #046bc3 140px, #0045ac 140px, #0045ac 210px, #00a5e0 210px, #00a5e0 280px, #0045ac 280px, #0045ac 350px);
    margin-bottom: 0;
    margin-left: 15px;
    padding: 40px 15px;
}
.list-wrap {
    max-width: 1000px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 45%);
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-top: 15px;
}
.list-wrap .person:last-child {
    grid-column: 1 / -1;
}
.list-wrap .person {
    margin-bottom: clamp(80px, (100vw/var(--pc)), 100px);
}
.list-wrap .person.person05,
.list-wrap .person.person06 {
    margin-bottom: clamp(150px, (200vw/var(--pc)), 200px);
}
.list-wrap .person.person07 {
    margin-bottom: clamp(150px, (200vw/var(--pc)), 200px);
}
.list-wrap .person .name {
    padding: 30px 0;
    position: relative;
}
.list-wrap .person .name .nameBox {
    width: 85%;
    text-align: center;
}
.list-wrap .person .name .arrow {
    width: 15%;
    height: 100%;
    background-color: #0045ac;
    position: absolute;
    right: 0;
    top: 0;
    max-width: 70px;
}
.list-wrap .person .name .arrow span {
    position: absolute;
    width: 45px;
    height: 45px;
    background-color: #fff;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border-radius: 100%;
}
.list-wrap .person.person03 .name .arrow,
.list-wrap .person.person04 .name .arrow {
    background-color: var(--sub);
}
.list-wrap .person.person05 .name .arrow,
.list-wrap .person.person06 .name .arrow {
    background-color: #00008f;
}
.list-wrap .person.person07 .name .arrow {
    background-color: var(--main);
}
.list-wrap .person .name .arrow img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 60%;
}
.list-wrap .person a:hover .name .nameBox {
    color: #0045ac;
}
.list-wrap .person.person03 a:hover .name .nameBox,
.list-wrap .person.person04 a:hover .name .nameBox {
    color: var(--sub);
}
.list-wrap .person.person05 a:hover .name .nameBox,
.list-wrap .person.person06 a:hover .name .nameBox {
    color: #00008f;
}
.list-wrap .person.person07 a:hover .name .nameBox {
    color: var(--main);
}
.list-wrap .person a:hover .name .arrow img {
    -webkit-animation: arrow3 0.5s 0s both;
    animation: arrow3 0.5s 0s both;
}
@-webkit-keyframes arrow3 {
    0% {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    49.9% {
        opacity: 0;
        -webkit-transform: translate(calc(-50% + 20px), -50%);
        transform: translate(calc(-50% + 20px), -50%);
    }
    50% {
        -webkit-transform: translate(calc(-50% - 20px), -50%);
        transform: translate(calc(-50% - 20px), -50%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}
@keyframes arrow3 {
    0% {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
    49.9% {
        opacity: 0;
        -webkit-transform: translate(calc(-50% + 20px), -50%);
        transform: translate(calc(-50% + 20px), -50%);
    }
    50% {
        -webkit-transform: translate(calc(-50% - 20px), -50%);
        transform: translate(calc(-50% - 20px), -50%);
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
    }
}
.list-wrap .person .type {
    font-size: clamp(35px, (40vw/var(--pc)), 40px);
    padding: 15px;
    max-width: 70px;
}
.list-wrap .person.person07 .image > img {
    border-radius: 25% 25% 0 0;
}
.list-wrap .person .copy {
    font-size: 1.6rem;
}
.list-wrap .person.person07 .copy {
    max-width: 450px;
    font-size: clamp(20px, (24vw/var(--pc)), 24px);
}
.list-wrap .person .nameBox span {
    line-height: 1.4;
}
.list-wrap .person.person07 .nameBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.list-wrap .person.person07 .nameBox p {
    margin: 0 30px;
}
.list-wrap .person.person07 .cross_logo {
    right: 10%;
    -webkit-transform: translateY(-25%);
    transform: translateY(-25%);
    max-width: 450px;
}
.person_img {
    margin-bottom: clamp(150px, (200vw/var(--pc)), 200px);
}
/*===============================================
インタビュー
===============================================*/
/* インタビュー*/
#person {
    width: 100%;
    overflow: hidden;
    margin-top: 100px;
}
#person .person_heder {
    margin-bottom: clamp(250px, (300vw/var(--pc)), 300px);
}
#person .header_img {
    background: url("../img/person_main-01.jpg")no-repeat center center / cover;
    width: 96%;
    height: clamp(750px, (850vw/var(--pc)), 850px);
    display: block;
    margin: 0 auto 50px;
    border-radius: 40px;
    position: relative;
}
#person.person02 .header_img {
    background: url("../img/person_main-02.jpg")no-repeat center center / cover;
}
#person.person03 .header_img {
    background: url("../img/person_main-03.jpg")no-repeat center center / cover;
}
#person.person04 .header_img {
    background: url("../img/person_main-04.jpg")no-repeat center center / cover;
}
#person.person05 .header_img {
    background: url("../img/person_main-05.jpg")no-repeat center center / cover;
}
#person.person06 .header_img {
    background: url("../img/person_main-06.jpg")no-repeat center center / cover;
}
#person.person07 .header_img {
    background: url("../img/person_main-07.jpg")no-repeat center center / cover;
}
#person .header_img .pageTitleBox {
    position: absolute;
    right: -2.1%;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
#person .header_img .pageTitleBox .pageTitle {
    font-size: 1.4rem;
    color: #fff;
    background-color: var(--deep);
    text-align: center;
    padding: 25px 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    letter-spacing: 3px;
    line-height: 1;
}
#person .header_img .pageTitleBox .pageTitle.rift {
    font-size: clamp(56.95px, (67vw/var(--pc)), 67px);
    margin-left: 20px;
    letter-spacing: 5px;
    margin-bottom: 0;
    width: 85px;
    line-height: 85px;
    padding: 25px 0;
}
#person .header_img .pageTitleBox span {
    background-color: #fff;
    font-size: clamp(34px, (40vw/var(--pc)), 40px);
    position: absolute;
    right: 0;
    bottom: 0;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    padding: 20px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 85px;
    letter-spacing: 10px;
    color: var(--deep);
    line-height: 85px;
}
#person.person03 .header_img .pageTitleBox .pageTitle,
#person.person04 .header_img .pageTitleBox .pageTitle {
    background-color: var(--sub);
}
#person.person03 .header_img .pageTitleBox span,
#person.person04 .header_img .pageTitleBox span {
    color: var(--sub);
}
#person.person05 .header_img .pageTitleBox .pageTitle,
#person.person06 .header_img .pageTitleBox .pageTitle {
    background-color: #00008f;
}
#person.person05 .header_img .pageTitleBox span,
#person.person06 .header_img .pageTitleBox span {
    color: #00008f;
}
#person .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
#person .person_heder .headerBox {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 100;
}
#person .person_heder .headerBox .nameCont {
    text-align: right;
    padding-right: 10%;
}
#person .person_heder .headerBox .nameBox {
    font-size: 1.5rem;
    text-align: right;
    display: inline-block;
    margin-left: auto;
}
#person .person_heder .headerBox .nameBox span {
    display: block;
}
#person .person_heder .headerBox .nameBox .affiliation {
    font-size: 1.5rem;
}
#person .person_heder .headerBox .nameBox .name {
    font-size: 2rem;
    font-weight: bold;
}
#person .person_heder .headerBox .title {
    font-size: clamp(35px, (40vw/var(--pc)), 40px);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    display: inline-block;
    padding: 70px 70px 70px 10%;
    border-radius: 0 40px 40px 0;
}
#person .person_contents {
    margin-bottom: clamp(150px, (200vw/var(--pc)), 200px);
}
#person.person07 .person_contents {
    margin-bottom: clamp(300px, (350vw/var(--pc)), 350px);
}
#person .person_contents .flex {
    margin-bottom: 100px;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}
#person .person_contents .image {
    width: 50%;
    line-height: 0;
}
#person .person_contents .image img {
    border-radius: 0 40px 40px 0;
}
#person .person_contents .flex:nth-child(even) .image {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
}
#person .person_contents .flex:nth-child(even) .image img {
    border-radius: 40px 0 0 40px;
}
#person .person_contents .flex:nth-child(even) .textBox {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}
#person .person_contents .textBox {
    width: 50%;
    padding: 5% 10%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 1.5rem;
    line-height: 2.2;
    font-weight: 500;
    text-align: justify;
	letter-spacing: 0.05em;
}
#person .person_contents .textBox .heading {
    font-size: 2.6rem;
    margin-bottom: 30px;
    font-weight: 500;
}
/* インタビュー ある日の一日 */
#person_day {
    margin-bottom: clamp(300px, (400vw/var(--pc)), 400px);
}
#person .person_day {
    background-color: #99dbf3;
    padding: 100px 5%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: clamp(80px, (100vw/var(--pc)), 100px);
}
#person .person_day .flex {
    max-width: 1000px;
    margin: 0 auto;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
#person .person_day .image {
    width: 50%;
    max-width: 500px;
}
#person .person_day .schedule {
    text-align: left;
    width: 45%;
    max-width: 400px;
    font-size: 1.8rem;
}
#person .person_day .scheduleBox {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    margin-bottom: 30px;
}
#person .scheduleBox .time {
    margin-right: 10px;
    width: 70px;
    background-color: #fff;
    text-align: center;
    border-radius: 50px;
    color: var(--main);
    font-weight: bold;
    position: relative;
    z-index: 10;
    line-height: 1;
    padding: 0.3em 0 0.5em;
    letter-spacing: 0;
}
#person .scheduleBox .text {
    font-size: 1.5rem;
    min-height: 3em;
    margin-top: 0.2rem;
    position: relative;
    text-align: justify;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
#person .scheduleBox .time::before {
    content: '';
    position: absolute;
    display: block;
    bottom: 0;
    left: 50%;
    -webkit-transform: translate(-50%, 100%);
    transform: translate(-50%, 100%);
    width: 6px;
    height: 100%;
    background-color: #59c4eb;
}
#person .scheduleBox:nth-last-child(1) .time::before {
    display: none;
}
#person .takeuchi_job .pageTitleBox {
    position: absolute;
    top: inherit;
    bottom: 0;
    right: 10%;
    left: inherit;
}
#person .takeuchi_job .pageTitle.rift {
    font-size: clamp(45px, (65vw/var(--pc)), 65px);
    line-height: 1;
    padding: 10px 30px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #0045ac;
    background-color: #fff;
}
#person .takeuchi_job .pageTitle {
    font-size: 1.8rem;
    padding: 10px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    color: #0045ac;
    font-weight: bold;
}
#person .duty {
    margin-left: 80px;
    font-size: 1.6rem;
    margin-bottom: 30px;
}
#person .duty span {
    color: var(--sub);
    margin-right: 0.25em;
}
/*営業インタビュー ------------------------------*/
#person.crosstalk .person_heder {
    margin-bottom: 50px;
    position: relative;
}
#person.crosstalk .header_img {
    margin: calc(5% + 220px) auto 150px;
    position: relative;
    z-index: 50;
}
#person.crosstalk .header_img .crossLogo {
    position: absolute;
    right: 15%;
    top: 0;
    -webkit-transform: translateY(-45%);
    transform: translateY(-45%);
    width: 50%;
    max-width: 600px;
}
#person.crosstalk .person_heder::before {
    content: '';
    width: 75%;
    height: 600px;
    background-color: var(--sub);
    position: absolute;
    left: 0%;
    bottom: 100px;
    z-index: 20;
}
#person.crosstalk .person_heder::after {
    content: '';
    width: 22%;
    height: 600px;
    background-color: #0045ac;
    position: absolute;
    left: 0%;
    bottom: 100px;
    z-index: 30;
}
#person.crosstalk .member {
    width: 90%;
    margin: 0 auto clamp(120px, (150vw/var(--pc)), 150px);
}
#person.crosstalk .member .titleBox {
    max-width: 600px;
    margin-left: auto;
    text-align: center;
    margin-bottom: 20px;
    color: var(--main);
}
#person.crosstalk .member .title_en {
    font-size: 3.6rem;
    line-height: 1;
}
#person.crosstalk .member .title_jp {
    font-size: 1.8rem;
}
#person.crosstalk .member .flex {
    max-width: 600px;
    margin-left: auto;
}
#person.crosstalk .member .list {
    width: 30%;
    margin-right: 5%;
    font-size: 1.5rem;
    text-align: center;
}
#person.crosstalk .member .list:nth-last-child(1) {
    margin-right: 0;
}
#person.crosstalk .member .list .image {
    border-radius: 100%;
    position: relative;
    margin-bottom: 20px;
}
#person.crosstalk .member .list .image img {
    border-radius: 100%;
    line-height: 0;
}
#person.crosstalk .member .list .image::before {
    content: '';
    width: 100%;
    height: 50%;
    background-color: #0045ac;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}
#person.crosstalk .member .list.member02 .image::before {
    background-color: var(--main);
}
#person.crosstalk .member .list.member03 .image::before {
    background-color: var(--sub);
}
#person.crosstalk .member .list .name {
    font-size: 2rem;
    font-weight: bold;
}
#person.crosstalk .person_contents .heading {
    text-align: center;
    position: relative;
    line-height: 2;
    padding: 30px 1em 60px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#person.crosstalk .person_contents .heading p {
    display: inline-block;
    margin: 0 auto;
    text-align: left;
}
#person.crosstalk .person_contents .textBox {
    padding: 0 10%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#person.crosstalk .person_contents .flex .heading::before {
    content: '';
    background: url("../img/bubble_left.svg")no-repeat center center / cover;
    width: 15%;
    height: 0;
    padding-top: 19%;
    position: absolute;
    left: 0;
    top: 0;
}
#person.crosstalk .person_contents .flex .heading::after {
    content: '';
    background: url("../img/bubble_right.svg")no-repeat center center / cover;
    width: 30%;
    height: 0;
    padding-top: 14%;
    position: absolute;
    right: 0;
    bottom: 0;
}
#person.crosstalk .person_contents .flex:nth-child(even) .heading::before {
    left: inherit;
    top: 0;
    right: 0;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
#person.crosstalk .person_contents .flex:nth-child(even) .heading::after {
    right: inherit;
    left: 0;
    bottom: 0;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
#person.crosstalk .person_contents .text > div {
    margin-bottom: 40px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
#person.crosstalk .person_contents .text span.icon {
    width: 20%;
    height: 20%;
    max-width: 100px;
    margin-right: 30px;
    border-radius: 100%;
    position: relative;
    line-height: 0;
}
#person.crosstalk .person_contents .answer span.icon::after {
    content: 'T.O.';
    font-size: 1.6rem;
    font-weight: bold;
    display: block;
    text-align: center;
    line-height: 1;
    margin-top: 15px;
    margin-left: 0.5em;
}
#person.crosstalk .person_contents .answer.member01 span.icon::after {
    content: 'T.O.';
}
#person.crosstalk .person_contents .answer.member02 span.icon::after {
    content: 'S.F.';
}
#person.crosstalk .person_contents .answer.member03 span.icon::after {
    content: 'N.I.';
}
#person.crosstalk .person_contents .text span.icon img {
    border-radius: 100%;
}
#person.crosstalk .person_contents .text p {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
#person .sales_img {
    margin-bottom: clamp(200px, (250vw/var(--pc)), 250px);
}
#person.crosstalk .person_contents .image {
    position: relative;
}
#person.crosstalk .person_contents .flex .image .voice {
    position: absolute;
    font-size: clamp(25px, (30vw/var(--pc)), 30px);
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
}
#person.crosstalk .person_contents .image .voice p {
    line-height: 1;
    padding: 1em 15px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    margin-left: 10px;
    border-radius: 30px;
    display: inline-block;
	letter-spacing: 3px;
}
#person.crosstalk .person_contents .flex:nth-child(1) .image .voice {
    top: -13%;
    right: 5%;
}
#person.crosstalk .person_contents .flex:nth-child(3) .image .voice {
    bottom: -20%;
    left: 5%;
}
#person.crosstalk .person_contents .flex:nth-child(7) .image .voice {
    bottom: -20%;
    left: 5%;
}
#person.crosstalk .person_contents .flex:nth-child(9) .image .voice {
    bottom: -20%;
    left: 5%;
}
#person.crosstalk .person_contents .flex:nth-child(1) .image .voice p.voice_1,
#person.crosstalk .person_contents .flex:nth-child(7) .image .voice p.voice_1 {
    background-color: #0045ac;
}
#person.crosstalk .person_contents .flex:nth-child(1) .image .voice p.voice_2,
#person.crosstalk .person_contents .flex:nth-child(3) .image .voice p.voice_2,
#person.crosstalk .person_contents .flex:nth-child(7) .image .voice p.voice_2,
#person.crosstalk .person_contents .flex:nth-child(9) .image .voice p.voice_2 {
    background-color: var(--main);
}
#person.crosstalk .person_contents .flex:nth-child(3) .image .voice p.voice_1,
#person.crosstalk .person_contents .flex:nth-child(9) .image .voice p.voice_1 {
    background-color: var(--sub);
}
#person.crosstalk .person_contents .flex:nth-child(3),
#person.crosstalk .person_contents .flex:nth-child(7),
#person.crosstalk .person_contents .flex:nth-child(9) {
    margin-bottom: clamp(200px, (250vw/var(--pc)), 250px);
}
/*===============================================
仕事紹介
===============================================*/
#rec_jpb .job_header {
    width: 100%;
    height: clamp(620px, (720vw/var(--pc)), 720px);
    background-color: var(--deep);
    position: relative;
    padding: 5% 10%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: clamp(200px, (250vw/var(--pc)), 250px);
}
#rec_jpb .pageTitle.rift {
    font-size: 8rem;
}
#rec_jpb .pageTitle {
    font-size: 2rem;
    letter-spacing: 5px;
    padding: 15px 60px;
}
.job_header .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    max-width: 1400px;
    margin: 0 auto;
}
.job_header .image {
    width: clamp(800px, (960vw/var(--pc)), 960px);
    margin-top: 150px;
}
.job_header .text {
    font-size: 2rem;
    text-align: justify;
    color: #fff;
    margin-left: -300px;
    line-height: 2.5;
    margin-top: 80px;
    white-space: nowrap;
}
.job_header .pageTitleBox {
    position: absolute;
    right: 10%;
    bottom: 0;
    top: inherit;
}
.job_header .pageTitleBox .pageTitle {
    background-color: #fff;
    color: var(--deep);
}
#technology {
    color: var(--deep)
}
.job_intro {
    width: 100%;
    margin: 0 auto clamp(200px, (250vw/var(--pc)), 250px);
}
.job_intro .explanation {
    max-width: 1200px;
    margin: 0 auto 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
.job_intro .title_en {
    font-size: clamp(50px, (55vw/var(--pc)), 55px);
    max-width: 500px;
    width: 42%;
    position: relative;
}
.job_intro .title_en span {
    display: block;
    width: 8px;
    height: 100%;
    border-radius: 100px;
    background-color: var(--deep);
    margin-left: -4px;
    position: absolute;
    right: 0;
    top: 0;
}
.job_intro .title_en span::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: -4px;
    background-color: var(--deep);
    width: 50px;
    height: 8px;
    border-radius: 100px;
    -webkit-transform: rotate(-35deg);
    transform: rotate(-35deg)
}
.job_intro .title_en p {
    padding-right: 50px;
    line-height: 1.1;
    padding-bottom: 30px;
}
.job_intro .title_en::after {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    border-radius: 100px;
    background-color: var(--deep);
}
.job_intro .title_jp {
    font-size: clamp(85px, (95vw/var(--pc)), 95px);
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    line-height: 1;
    letter-spacing: 10px;
}
.job_intro .title_jp p {
    padding: 0 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.job_intro .explanation .textBox {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    min-width: 400px;
}
.job_intro .explanation .textBox::before {
    content: '';
    display: block;
    width: 100%;
    height: 8px;
    border-radius: 100px;
    background-color: var(--deep);
}
.job_intro .textBox .title {
    font-size: clamp(24px, (26vw/var(--pc)), 26px);
    font-weight: bold;
    margin-bottom: 50px;
    padding-left: 70px;
    padding-top: 50px;
}
.job_intro .textBox .text {
    font-size: 1.7rem;
    padding-left: 70px;
    text-align: justify;
	letter-spacing: 0.05em;
}
.job_intro .rec_contentsBox {
    max-width: 1440px;
    margin: 0 auto;
}
.job_intro .rec_contents {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 100px;
}
.job_intro .rec_contents:nth-last-child(1) {
    margin-bottom: 0;
}
.job_intro .rec_contents .image {
    width: 42%;
    margin-right: 15px;
    line-height: 0;
}
.job_intro .rec_contents .image img {
    border-radius: 0 40px 40px 0;
}
.job_intro .rec_contents .system_name {
    font-size: 3.4rem;
    background-color: var(--deep);
    color: #fff;
    font-weight: bold;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    line-height: 1;
    width: 120px;
    position: relative;
    letter-spacing: 10px;
}
.job_intro .rec_contents .system_name::before {
    content: '';
    width: 100%;
    height: 238px;
    background-color: var(--main);
    position: absolute;
    bottom: 0;
    -webkit-clip-path: polygon(0 58%, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 58%, 100% 0, 100% 100%, 0% 100%);
}
.job_intro .rec_contents .system_name::after {
    content: '';
    width: 100%;
    height: 170px;
    background-color: var(--sub);
    position: absolute;
    bottom: 0;
    -webkit-clip-path: polygon(0 81.176%, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 81.176%, 100% 0, 100% 100%, 0% 100%);
}
.job_intro .rec_contents .system_name p {
    position: absolute;
    top: 40px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 500;
}
.job_intro .rec_contents .textBox {
    font-size: 1.5rem;
    color: #000527;
    width: 50%;
    padding: 0 5%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: auto auto 0;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.job_intro .rec_contents .textBox .text {
    max-width: 500px;
    margin: 0 auto;
    line-height: 2;
    margin-bottom: 70px;
    text-align: justify;
    padding-left: 0;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
}
.job_intro .rec_contents .textBox .btn.normal {
    margin-bottom: 40px;
}
.job_intro .rec_contents .textBox .btn.normal a {
    width: 100%;
    max-width: 370px;
    padding: 0 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    letter-spacing: 1px;
}
#technology,
#development,
#manufacturing,
#salesposition,
#management {
    padding-top: clamp(150px, (200vw/var(--pc)), 200px);
}
#development {
    color: var(--sub)
}
.job_intro #development .title_en::after {
    background-color: var(--sub);
}
.job_intro #development .title_en span {
    background-color: var(--sub);
}
.job_intro #development .title_en span::after {
    background-color: var(--sub);
}
.job_intro #development .explanation .textBox::before {
    background-color: var(--sub);
}
.job_intro #development .rec_contents .system_name {
    background-color: var(--sub);
}
.job_intro #development .rec_contents .system_name::after {
    background-color: var(--deep);
}
#manufacturing {
    color: #00008f;
}
.job_intro #manufacturing .title_en::after {
    background-color: #00008f;
}
.job_intro #manufacturing .title_en span {
    background-color: #00008f;
}
.job_intro #manufacturing .title_en span::after {
    background-color: #00008f;
}
.job_intro #manufacturing .explanation .textBox::before {
    background-color: #00008f;
}
.job_intro #manufacturing .explanation .textBox .text {
    margin-bottom: 50px;
}
.job_intro #manufacturing .rec_contents .system_name {
    background-color: #00008f;
}
.job_intro #manufacturing .rec_contents .system_name::after {
    background-color: var(--deep);
}
.job_intro #manufacturing .monozukuri {
    padding-left: 70px;
    margin-bottom: 30px;
    line-height: 0;
}
.job_intro #manufacturing .explanation .textBox .btn {
    padding-left: 70px;
}
#salesposition {
    color: var(--main);
}
.job_intro #salesposition .title_en::after {
    background-color: var(--main);
}
.job_intro #salesposition .title_en span {
    background-color: var(--main);
}
.job_intro #salesposition .title_en span::after {
    background-color: var(--main);
}
.job_intro #salesposition .explanation .textBox::before {
    background-color: var(--main);
}
.job_intro #salesposition .rec_contents .system_name {
    background-color: var(--main);
}
.job_intro #salesposition .rec_contents .system_name::before {
    background-color: var(--deep);
}
.job_intro #salesposition .rec_contents .system_name::after {
    background-color: #00008f;
}
#management {
    color: #4040ab;
}
.job_intro #management .title_en::after {
    background-color: #4040ab;
}
.job_intro #management .title_en span {
    background-color: #4040ab;
}
.job_intro #management .title_en span::after {
    background-color: #4040ab;
}
.job_intro #management .explanation .textBox::before {
    background-color: #4040ab;
}
.job_intro #management .rec_contents .system_name {
    background-color: #4040ab;
}
.job_intro #management .rec_contents .system_name::before {
    background-color: var(--sub);
}
.job_intro #management .rec_contents .system_name::after {
    background-color: #046bc3;
}
.jobType_menu {
    position: fixed;
    width: 100%;
    margin: 0 auto;
    bottom: 0;
    opacity: 0;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    visibility: hidden;
    z-index: 999;
    padding: 0 0 2.5% 0;
}
.jobType_menu::before {
    content: '';
    width: 100%;
    height: 75%;
    background-color: #fff;
    position: absolute;
    bottom: 0;
}
.jobType_menu.active {
    opacity: 1;
    visibility: inherit;
}
.jobType_menu ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    font-size: clamp(20px, (24vw/var(--pc)), 24px);
    width: 90%;
    max-width: 1440px;
    margin: 0 auto;
    line-height: 1;
}
.jobType_menu ul li {
    width: 18%;
    text-align: center;
}
.jobType_menu ul li a {
    display: block;
    background-color: #fff;
    padding: clamp(25px, (40vw/var(--pc)), 40px) 0;
    position: relative;
}
.jobType_menu ul li a span:nth-child(1) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--main);
    border-radius: 100px;
}
.jobType_menu ul li a span:nth-child(2) {
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background-color: var(--sub);
    border-radius: 100px;
}
.jobType_menu ul li a span:nth-child(2)::before {
    content: '';
    width: 20px;
    height: 4px;
    background-color: var(--sub);
    position: absolute;
    top: 8px;
    right: -2px;
    -webkit-transform: rotate(-55deg);
    transform: rotate(-55deg);
    border-radius: 100px;
}
.jobType_menu ul li:nth-child(1) a {
    color: #0045ac;
}
.jobType_menu ul li:nth-child(1) a span:nth-child(1),
.jobType_menu ul li:nth-child(1) a span:nth-child(2),
.jobType_menu ul li:nth-child(1) a span:nth-child(2)::before {
    background-color: var(--deep);
}
.jobType_menu ul li:nth-child(2) a {
    color: var(--sub);
}
.jobType_menu ul li:nth-child(2) a span:nth-child(1),
.jobType_menu ul li:nth-child(2) a span:nth-child(2),
.jobType_menu ul li:nth-child(2) a span:nth-child(2)::before {
    background-color: var(--sub);
}
.jobType_menu ul li:nth-child(3) a {
    color: #00008f;
}
.jobType_menu ul li:nth-child(3) a span:nth-child(1),
.jobType_menu ul li:nth-child(3) a span:nth-child(2),
.jobType_menu ul li:nth-child(3) a span:nth-child(2)::before {
    background-color: #00008f;
}
.jobType_menu ul li:nth-child(4) a {
    color: var(--main);
}
.jobType_menu ul li:nth-child(4) a span:nth-child(1),
.jobType_menu ul li:nth-child(4) a span:nth-child(2),
.jobType_menu ul li:nth-child(4) a span:nth-child(2)::before {
    background-color: var(--main);
}
.jobType_menu ul li:nth-child(5) a {
    color: #00008f;
}
.jobType_menu ul li:nth-child(5) a span:nth-child(1),
.jobType_menu ul li:nth-child(5) a span:nth-child(2),
.jobType_menu ul li:nth-child(5) a span:nth-child(2)::before {
    background-color: #00008f;
}
#rec_jpb .takeuchi_person .pageTitleBox {
    position: absolute;
    top: inherit;
    bottom: 0;
    right: inherit;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
#rec_jpb .takeuchi_person .pageTitle.rift {
    font-size: clamp(45px, (65vw/var(--pc)), 65px);
    line-height: 1;
    padding: 10px 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    background: repeating-linear-gradient(45deg, #0045ac, #0045ac 55px, #00a5e0 55px, #00a5e0 110px, #0045ac 110px, #0045ac 165px, #046bc3 165px, #046bc3 220px, #4040ab 220px, #4040ab 275px);
}
#rec_jpb .takeuchi_person .pageTitle {
    font-size: 1.8rem;
    padding: 20px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: var(--sub);
}
/*===============================================
武内プレスを知る
===============================================*/
#learn {
    overflow: hidden;
}
#learn .message {
    position: relative;
    overflow: hidden;
}
#learn .message .image {
    line-height: 0;
}
#learn .message .mainTitle {
    position: absolute;
    right: 5%;
    top: 150px;
    max-width: 240px;
}
#learn .message .messageBox {
    margin-top: -80px;
}
#learn .message .messageBox .title {
    margin: 0 auto 75px;
    max-width: 80px;
}
#learn .message .messageBox .flex {
    display: flex;
}
#learn .message .messageBox .flex .image {
    width: 40%;
	height: auto;
	background: url("../img/learnImg_01.jpg")no-repeat right 10% bottom 40% / cover;
}
#learn .message .text {
    font-size: 1.8rem;
    line-height: 2.3;
    display: inline-block;
    text-align: justify;
    max-width: 640px;
    flex: 1;
    margin: 0 auto;
    padding: 30px 100px clamp(150px, (200vw/var(--pc)), 200px);;
	letter-spacing: 0.05em;
}
#learn .message .text span {
    display: block;
}
#learn .message .text span:nth-of-type(1) {
    margin: 0.5em 0 0;
}
#learn .message .text span:nth-last-of-type(1) {
    margin: 0 0 0.5em;
}
#learn .message .text span::before {
    content: '';
    width: 20px;
    height: 1px;
    background-color: #000;
    display: inline-block;
    margin-right: 0.5em;
    vertical-align: 0.35em;
}
#learn .overview {
    background: url("../img/learnImg_02.jpg")no-repeat center center / cover;
    width: 100%;
    text-align: right;
    margin-bottom: clamp(100px, (150vw/var(--pc)), 150px);
}
#learn .overview .title {
    max-width: 80px;
    margin: 0 auto 60px;
}
#learn .overview .logo {
    width: 60%;
    max-width: 640px;
    margin-left: 10%;
    margin-bottom: 60px;
}
#learn .overview .text {
    font-size: clamp(18px, (20vw/var(--pc)), 20px);
    display: inline-block;
    width: 50%;
    margin-left: auto;
    text-align: left;
}
#learn .overview .text p {
    background-color: #fff;
    margin-bottom: 30px;
    display: block;
    padding: 30px 50px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#learn .overview .text p:nth-last-child(1) {
    margin-bottom: 0;
}
#learn .appeal {
    margin-bottom: clamp(200px, (250vw/var(--pc)), 250px);
    text-align: center;
}
#learn .appeal .title {
    max-width: 80px;
    margin: 0 auto 60px;
}
#learn .appeal .appealPoint {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    max-width: 1000px;
    margin: 0 auto;
}
#learn .appeal .appealPoint .point {
    width: 45%;
    margin-bottom: 10%;
    font-size: clamp(18px, (20vw/var(--pc)), 20px);
}
#learn .appeal .appealPoint .point:nth-child(odd) {
    margin-right: 10%;
}
#learn .appeal .appealPoint .point .text {
    text-align: left;
}
#learn .appeal .appealPoint .point:nth-child(3) .text {
    text-align: center;
}
#learn .appeal .appealPoint .point .image {
    border-radius: 100%;
    margin-bottom: 30px;
}
#learn .appeal .appealPoint .point .image img {
    border-radius: 100%;
}
#learn .profileBtn {
    font-size: 2rem;
    border: 1px solid #00008f;
    display: inline-block;
    margin: 0 auto;
    min-width: 320px;
}
#learn .profileBtn a {
    display: block;
    position: relative;
    padding: 1em 2em;
    box-sizing: border-box;
    color: #00008f;
    background-color: #fff;
    transition: 0.35s;
}
#learn .profileBtn a::before {
    content: '';
    background: url("../img/profileBtn_tp.svg")no-repeat center center / cover;
    width: 57px;
    height: 33px;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.35s;
}
#learn .profileBtn a::after {
    content: '';
    background: url("../img/profileBtn_arrow.svg")no-repeat center center / cover;
    width: 16px;
    height: 22px;
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.35s;
}
#learn .profileBtn a:hover {
    color: #fff;
    background-color: #00008f;
}
#learn .profileBtn a:hover::before {
    background: url("../img/profileBtn_tpW.svg")no-repeat center center / cover;
}
#learn .profileBtn a:hover::after {
    background: url("../img/profileBtn_arrowW.svg")no-repeat center center / cover;
}
.learn_entry {
    text-align: center;
}
#learn .learn_entry .pageTitleBox,
#graduate .learn_entry .pageTitleBox {
    position: relative;
    display: inline-block;
    margin: 0 auto;
}
#learn .learn_entry .pageTitleBox .pageTitle.rift,
#graduate .learn_entry .pageTitleBox .pageTitle.rift {
    color: #fff;
    background: repeating-linear-gradient(45deg, #0045ac, #0045ac 55px, #00a5e0 55px, #00a5e0 110px, #0045ac 110px, #0045ac 165px, #046bc3 165px, #046bc3 220px, #4040ab 220px, #4040ab 275px);
    margin-bottom: 0;
}
#learn .learn_entry .pageTitleBox .pageTitle,
#graduate .learn_entry .pageTitleBox .pageTitle {
    color: #fff;
    background-color: transparent;
    margin-bottom: 50px;
}
#graduate .top_recinfo {
    text-align: center;
    padding: 0 0 100px 0;
    position: relative;
}
.learn_bg {
    width: 100%;
    max-width: 1000px;
    margin: -60px auto;
    padding-bottom: 100px;
    position: relative;
}
.learn_bg::before {
    content: '';
    width: 100vw;
    height: 100%;
    position: absolute;
    left: 0;
    top: -60px;
    background-color: var(--sub);
    z-index: -10;
}
.learn_bg .mynavi {
    max-width: 200px;
    margin: 0 auto 100px;
}
.learn_bg .mynavi img {
    margin-bottom: 25px;
}
.learn_bg .text {
    font-size: 2.2rem;
    color: #fff;
}
.learn_bg_anime {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -5;
    width: 100%;
    -webkit-transform: translateX(80%);
    transform: translateX(80%);
    height: 0;
    overflow: hidden;
}
.learn_bg_anime.active {
    -webkit-animation: recruit_bg 2s 0.25s ease-out forwards;
    animation: recruit_bg 2s 0.25s ease-out forwards;
}
/*===============================================
新卒採用
===============================================*/
#graduate {
    overflow: hidden;
}
.graduate_header,
.career_header {
    text-align: center;
    margin-bottom: clamp(150px, (200vw/var(--pc)), 200px);
}
.graduate_header .image {
    width: 80%;
    margin: 0 auto;
}
.graduate_header .title,
.career_header .title {
    width: 90%;
    max-width: 700px;
    margin: 0 auto 100px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.graduate_header .graduates,
.career_header .graduates {
    background-color: var(--sub);
    width: 100%;
    max-width: 700px;
    height: 320px;
    margin: -160px auto 100px;
    position: relative;
    border-radius: 10px;
}
.graduate_header .graduates::after,
.career_header .graduates::after {
    content: '';
    width: 180px;
    height: 180px;
    background-color: #fff;
    position: absolute;
    right: -1px;
    top: -1px;
    border-radius: 0 10px 0 0;
    -webkit-clip-path: polygon(100% 0, 15% 0, 100% 100%);
    clip-path: polygon(100% 0, 15% 0, 100% 100%);
}
.graduate_header .graduates .title,
.career_header .graduates .title {
    font-size: 3.8rem;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    font-weight: 500;
}
.graduate_header .rec_btnBox,
.career_header .rec_btnBox {
    width: 80%;
    max-width: 550px;
    position: absolute;
    right: 0;
    bottom: 0;
    -webkit-transform: translateY(0);
    transform: translateY(0);
    height: 70px;
    overflow: hidden;
}
.graduate_header .rec_btnBox .rec_btn,
.career_header .rec_btnBox .rec_btn {
    border-radius: 0;
}
.graduate_header .rec_btnBox .rec_btn p,
.career_header .rec_btnBox .rec_btn p {
    position: absolute;
    bottom: -9px;
    left: -5px;
    line-height: 1;
    font-size: clamp(55px, (70vw/var(--pc)), 70px);
    color: var(--sub);
}
.graduate_header .text,
.career_header .text {
    font-size: 1.8rem;
    display: inline-block;
    max-width: 700px;
    margin: 0 auto 0;
    text-align: justify;
}
.guideline {
    width: 800px;
    margin: 0 auto clamp(120px, (150vw/var(--pc)), 150px);
}
.guideline .title {
    font-size: 3.2rem;
    margin-bottom: 70px;
    text-align: center;
}
.guideline .table {
    font-size: 1.5rem;
    text-align: justify;
}
.guideline .table tr {
    border-top: 2px solid #b2e4f6;
}
.guideline .table th {
    border-top: 4px solid #66c9ec;
    width: 1%;
    white-space: nowrap;
    vertical-align: text-top;
    padding: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 1.8rem;
}
.guideline .table td {
    padding: 80px 50px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.guideline .table td .textBlock {
    margin-bottom: 50px;
    font-weight: 500;
    letter-spacing: 1px;
}
.guideline .table td .textBlock:nth-last-child(1) {
    margin-bottom: 0;
}
.guideline .table td .textBlock p.headline {
    margin-bottom: 0.5em;
    font-weight: 700;
    font-size: 1.7rem;
}
.guideline .table td .textBlock p.headline span {
    color: #66c9ec;
    margin-right: 5px;
}
#flow {
    padding-top: 100px;
    margin-top: -100px;
}
.flow {
    width: 90%;
    max-width: 1000px;
    margin: 0 auto clamp(120px, (150vw/var(--pc)), 150px);
}
.flow .title {
    font-size: 3.2rem;
    margin-bottom: 70px;
    text-align: center;
}
.flow .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.flow .flex .text {
    font-size: 1.5rem;
    width: 45%;
    margin-right: 70px;
    line-height: 2;
    letter-spacing: 1px;
}
.flow .flex .image {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
#graduate .faq {
    margin: 0 auto;
    text-align: center;
    position: relative;
    background-color: #2981cc;
    padding: 80px 0 clamp(100px, (150vw/var(--pc)), 150px);
    z-index: 0;
    margin-bottom: clamp(150px, (250vw/var(--pc)), 250px);
}
#graduate .faq::before {
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    background-color: #2661b8;
    top: 0;
    right: 0;
    z-index: 10;
}
#graduate .faq .title {
    font-size: 3.2rem;
    color: #fff;
    margin-bottom: 50px;
    position: relative;
    z-index: 100;
}
#graduate .faq .title span {
    font-size: 10rem;
    display: block;
    line-height: 1;
    margin-bottom: 20px;
}
#graduate .faq .faqBox {
    font-size: 1.5rem;
    margin: 0 auto;
    max-width: 800px;
    text-align: justify;
    margin-bottom: 25px;
    position: relative;
    z-index: 100;
    border-radius: 10px;
    background-color: #fff;
}
#graduate .faq .faqBox .question {
    font-size: 1.8rem;
    padding: 35px 25px 35px 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
#graduate .faq .faqBox .question p {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    margin-right: 50px;
}
#graduate .faq .faqBox .question span.questionQ {
    font-size: 3rem;
    font-weight: 700;
    margin-right: 1em;
    color: #2981cc;
    line-height: 1;
}
#graduate .faq .faqBox .question span.questionBtn {
    width: 30px;
    height: 30px;
    background-color: #2981cc;
    border-radius: 100%;
    -ms-flex-item-align: center;
    align-self: center;
    position: relative;
}
#graduate .faq .faqBox .question span.questionBtn span:nth-child(1) {
    width: 15px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#graduate .faq .faqBox .question span.questionBtn span:nth-child(2) {
    width: 2px;
    height: 15px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-transition: 0.25s;
    transition: 0.25s;
}
#graduate .faq .faqBox .question.active span.questionBtn span:nth-child(2) {
    width: 2px;
    height: 15px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%)rotate(90deg);
    transform: translate(-50%, -50%)rotate(90deg);
}
#graduate .faq .faqBox .answer {
    display: none;
    padding: 0 50px 0 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#graduate .faq .faqBox .answer .flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}
#graduate .faq .faqBox .answer span.answerA {
    font-size: 3rem;
    font-weight: 700;
    margin-right: 1em;
    color: #00008f;
    line-height: 1;
}
#graduate .faq .faqBox .answer p {
    padding: 0 0 35px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#graduate .faq .faqBox .answer p a {
    text-decoration: underline;
    color: #00008f;
}
/*===============================================
キャリア採用
===============================================*/
#career_rec .guideline {
    margin-bottom: 0;
}
#career_rec .guideline .table tr {
    border-top: 2px solid #b3d2ed;
}
#career_rec .guideline .table th {
    border-top: 4px solid #68a6db;
}
#career_rec .guideline .table td .textBlock p.headline span {
    color: #68a6db;
}
.career_header .graduates {
    background-color: var(--main);
}
.career_header .rec_btnBox .rec_btn p {
    color: var(--main);
}
.achievements {
    max-width: 800px;
    margin: 0 auto clamp(120px, (150vw/var(--pc)), 150px);
}
.achievements .title {
    font-size: 1.5rem;
    margin-bottom: 20px;
    font-weight: 500;
}
.table2 {
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: clamp(120px, (150vw/var(--pc)), 150px);
}
.table2 tr:nth-child(n + 2) {
    border-bottom: 2px solid #b3d2ed
}
.table2 th {
    border-right: 2px solid #b3d2ed;
    width: 25%;
    background-color: #e5f0f9;
    padding: 0.5em 0;
}
.table2 th:nth-last-child(1) {
    border-right: none;
}
.table2 td {
    border-right: 2px solid #b3d2ed;
    width: 25%;
    padding: 0.5em 0;
}
.table2 td:nth-last-child(1) {
    border-right: none;
}
#career_rec .btn.normal a {
    width: auto;
    padding: 0 2em;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 240px;
}
/*===============================================
数字で見る武内
===============================================*/
.numbers_wrap {
    background-color: #bfe8f7;
    overflow: hidden;
    margin-bottom: clamp(120px, (150vw/var(--pc)), 150px);
}
.numbers_wrap .image {
    max-width: 680px;
    margin: 0 auto clamp(120px, (150vw/var(--pc)), 150px);
    padding-top: clamp(200px, (250vw/var(--pc)), 250px);
}
.numberPanel {
    margin: 0 auto;
    max-width: 1000px;
}
.data-tile {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(auto-fit, 1fr);
    grid-template-areas:
        "tile1 tile1 tile2"
        "tile1 tile1 tile2"
        "tile3 tile3 tile4"
        "tile5 tile5 tile6"
        "tile7 tile8 tile9"
        "tile10 tile11 tile12"
        "tile13 tile14 tile15";
    gap: 30px;
    width: 100%;
    margin-bottom: 200px;
}
.data-tile li {
    line-height: 0;
    width: 100%;
    background-color: #fff;
    border-radius: 20px;
}
.data-tile li img {
    width: 100%;
    height: auto;
    margin-top: -10px;
}
.tile1 {
    grid-area: tile1;
}
.tile2 {
    grid-area: tile2;
}
.tile3 {
    grid-area: tile3;
}
.tile4 {
    grid-area: tile4;
}
.tile5 {
    grid-area: tile5;
}
.tile6 {
    grid-area: tile6;
}
.tile7 {
    grid-area: tile7;
}
.tile8 {
    grid-area: tile8;
}
.tile9 {
    grid-area: tile9;
}
.tile10 {
    grid-area: tile10;
}
.tile11 {
    grid-area: tile11;
}
.tile12 {
    grid-area: tile12;
}
.tile13 {
    grid-area: tile13;
}
.tile14 {
    grid-area: tile14;
}
.tile15 {
    grid-area: tile15;
}
/*===============================================
ものづくりの現場
===============================================*/
#monozukuri {
    overflow: hidden;
}
#monozukuri .monozukuri_header {
    text-align: center;
}
#monozukuri .monozukuri_header .title {
    width: 70%;
    max-width: 640px;
    margin: -17% auto 80px;
}
#monozukuri .monozukuri_wrap {
    padding-bottom: clamp(150px, (200vw/var(--pc)), 200px);
    position: relative;
}
#monozukuri .monozukuri_wrap#part1 {
    padding-top: clamp(200px, (250vw/var(--pc)), 250px);
    position: relative;
}
#monozukuri .monozukuri_wrap#part1::before {
    content: '';
    width: 40%;
    max-width: 720px;
    background: url("../img/monozukuri_bg01.svg")no-repeat left top / contain;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}
#monozukuri .monozukuri_wrap#part1::after {
    content: '';
    width: 50%;
    max-width: 300px;
    background: url("../img/monozukuri_bg02.svg")no-repeat right bottom / contain;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
}
#monozukuri .monozukuri_wrap#part2 {
    padding-top: clamp(100px, (150vw/var(--pc)), 150px);
    position: relative;
}
#monozukuri .monozukuri_wrap#part2::before {
    content: '';
    width: 50%;
    max-width: 300px;
    background: url("../img/monozukuri_bg03.svg")no-repeat left bottom / contain;
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 0;
}
#monozukuri .monozukuri_wrap#part2::after {
    content: '';
    width: 50%;
    max-width: 720px;
    background: url("../img/monozukuri_bg04.svg")no-repeat right top / contain;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
}
#monozukuri .monozukuri_wrap#part3 {
    padding-top: clamp(200px, (250vw/var(--pc)), 250px);
    margin-bottom: clamp(200px, (250vw/var(--pc)), 250px);
}
#monozukuri .monozukuri_wrap#part3::before {
    content: '';
    width: 50%;
    max-width: 720px;
    background: url("../img/monozukuri_bg05.svg")no-repeat left top / contain;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
}
#monozukuri .monozukuri_wrap#part3::after {
    content: '';
    width: 50%;
    max-width: 620px;
    background: url("../img/monozukuri_bg06.svg")no-repeat right bottom / contain;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
}
#monozukuri .monozukuri_contaner {
    background-color: #fff;
    border-radius: 20px;
    padding: 50px 40px;
    box-sizing: border-box;
    margin: 0 auto clamp(100px, (150vw/var(--pc)), 150px);
    width: 90%;
    max-width: 720px;
    position: relative;
    z-index: 100;
}
#monozukuri .monozukuri_contaner:nth-last-of-type(1) {
    margin-bottom: 0;
}
#monozukuri .monozukuri_contaner .text {
    font-size: 1.6rem;
    margin-bottom: 50px;
	letter-spacing: 0.05em;
}
#monozukuri .monozukuri_contaner .image {
    line-height: 0;
    margin-bottom: 40px;
}
#monozukuri .monozukuri_contaner .image:nth-last-of-type(1) {
    margin-bottom: 0;
}
#monozukuri .monozukuri_image {
    line-height: 0;
    margin: 0 auto clamp(100px, (150vw/var(--pc)), 150px);
}
#monozukuri .monozukuri_image.image2 {
    margin: 0 auto;
}
.monozukuri_wrap#part1 .top_job_line,
.monozukuri_wrap#part3 .top_job_line {
    content: '';
    background: url("../img/kindLine.svg") no-repeat center bottom / cover;
    width: 1408px;
    height: 1678px;
    position: absolute;
    top: 10%;
    right: 0;
    z-index: 10;
    opacity: 1;
    -webkit-transform: translate(99.9%, -100%);
    transform: translate(99.9%, -100%);
}
.monozukuri_wrap#part2 .top_job_line {
    content: '';
    background: url("../img/kindLine2.svg") no-repeat center bottom / cover;
    width: 1440px;
    height: 1784px;
    position: absolute;
    top: 10%;
    left: 0;
    z-index: 10;
    opacity: 1;
    -webkit-transform: translate(-99.9%, -100%);
    transform: translate(-99.9%, -100%);
}
.monozukuri_wrap#part1.active .top_job_line,
.monozukuri_wrap#part3.active .top_job_line {
    -webkit-animation: diagonalLoop 2s linear forwards;
    animation: diagonalLoop 2s linear forwards;
}
.monozukuri_wrap#part2.active .top_job_line {
    -webkit-animation: diagonalLoop2 2s linear forwards;
    animation: diagonalLoop2 2s linear forwards;
}
@keyframes diagonalLoop2 {
    0% {
        -webkit-transform: translate(-99.9%, -100%);
        transform: translate(-99.9%, -100%);
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
        opacity: 1;
    }
}
#monozukuri .takeuchi_person .pageTitleBox {
    position: absolute;
    top: inherit;
    bottom: 0;
    right: inherit;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}
#monozukuri .takeuchi_person .pageTitle.rift {
    font-size: clamp(45px, (65vw/var(--pc)), 65px);
    line-height: 1;
    padding: 10px 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #fff;
    background: repeating-linear-gradient(45deg, #0045ac, #0045ac 55px, #00a5e0 55px, #00a5e0 110px, #0045ac 110px, #0045ac 165px, #046bc3 165px, #046bc3 220px, #4040ab 220px, #4040ab 275px);
}
#monozukuri .takeuchi_person .pageTitle {
    font-size: 1.8rem;
    padding: 20px 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: var(--sub);
}
/*===============================================
フッター
===============================================*/
#recruitSite .footer_menu {
    padding: 0;
}
#recruitSite .footer_menu.flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
#recruitSite .footer_menu .left {
    position: relative;
    height: 100%;
}
#recruitSite .footer_menu .left span {
    content: '';
    width: 10%;
    min-width: 100px;
    height: 100%;
    background-color: #0045ac;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1
}
#recruitSite .footer_menu .left span:nth-child(2) {
    height: 57%;
    background-color: var(--sub);
    z-index: 2
}
#recruitSite .footer_menu .left span:nth-child(3) {
    height: 25%;
    background-color: #00008f;
    z-index: 2
}
#recruitSite .footer_menu .left span:nth-child(1)::before {
    content: '';
    background: url("../img/footer_itemText.svg")no-repeat center center / cover;
    width: 58px;
    height: 239px;
    position: absolute;
    left: 0;
    top: 0;
}
#recruitSite .footer_menu .right {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: 350px;
}
#recruitSite .footer_menu .right .pageTitleBox {
    background-color: var(--sub);
    padding-right: 70px;
    padding-bottom: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    margin-bottom: 50px;
}
#recruitSite .footer_menu .right .pageTitleBox .pageTitle {
    color: #fff;
    background-color: transparent;
}
#recruitSite .footer_menu .right .pageTitleBox .pageTitle.rift {
    color: #fff;
    background: repeating-linear-gradient(45deg, #0045ac, #0045ac 55px, #00a5e0 55px, #00a5e0 110px, #0045ac 110px, #0045ac 165px, #046bc3 165px, #046bc3 220px, #4040ab 220px, #4040ab 275px);
}
#recruitSite .footer_menu .right .footer-mynavi {
    max-width: 130px;
    margin: 0 auto;
}
#recruitSite .footer_menu .right .footer-mynavi a {
    display: block;
    margin-bottom: 20px;
}
#recruitSite .footer_menu .tp-link {
    font-size: 2.5rem;
    color: #fff;
    position: relative;
}
#recruitSite .footer_menu .tp-link a {
    display: block;
    background-color: var(--sub);
    position: relative;
    -webkit-transition: 0.25s;
    transition: 0.25s;
}
#recruitSite .footer_menu .tp-link a:hover {
    background-color: #00008f;
}
#recruitSite .footer_menu .tp-link a::before {
    content: '';
    background: url("../img/arrow_7.svg")no-repeat center center /cover;
    width: 13px;
    height: 18px;
    position: absolute;
    right: 20px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
#recruitSite .footer_menu .tp-link a p {
    padding: 0.5em 0;
    position: relative;
}
#recruitSite .footer_menu .tp-link a p::before {
    content: '';
    background: url("../img/tp-white.svg")no-repeat center center /cover;
    width: 57px;
    height: 31px;
    display: inline-block;
    margin-right: 10px;
    vertical-align: -0.15em;
}
@media only screen and (max-width:1024px) {
    /*===============================================
採用ヘッダー
===============================================*/
    header .header_rec-wrap {
        padding: 0 15px 15px;
        position: fixed;
        z-index: 999999;
        background-color: rgba(255, 255, 255, 0.9)
    }
    header.active .header_rec-wrap {
        background-color: transparent;
    }
    header .hd_rec-logo {
        width: 50%;
        max-width: 400px;
        min-width: 260px;
    }
    /*===============================================
採用共通
===============================================*/
    #recruitSite .hd_menu {
        padding-top: 2.5%;
    }
    /*===============================================
採用トップ
===============================================*/
    #recruit_wrap {
        margin: 85px auto 0;
    }
    #recruit_wrap .recruit_main {
        height: 80vh;
    }
    #recruit_wrap .recruit_mainSlider {
        width: 100%;
    }
    #recruit_wrap .recruit_mainSlider li {
        height: 80vh;
    }
    #recruit_wrap ul.recruit_mainSlider li.recruit_mainSlider01 {
        background: url("../img/recruitMain01SP.jpg")no-repeat center center / cover;
    }
    #recruit_wrap ul.recruit_mainSlider li.recruit_mainSlider02 {
        background: url("../img/recruitMain02SP.jpg")no-repeat center top 10% / cover;
    }
    #recruit_wrap ul.recruit_mainSlider li.recruit_mainSlider03 {
        background: url("../img/recruitMain03SP.jpg")no-repeat center top 10% / cover;
    }
    #recruit_wrap ul.recruit_mainSlider li.recruit_mainSlider04 {
        background: url("../img/recruitMain04SP.jpg")no-repeat center top 10% / cover;
    }
    #recruit_wrap ul.recruit_mainSlider li.recruit_mainSlider05 {
        background: url("../img/recruitMain05SP.jpg")no-repeat center top 10% / cover;
    }
    #recruit_wrap .recruit_main .head_title {
        font-size: clamp(20px, (22vw / var(--sp)), 22px);
        letter-spacing: 2px;
        padding: 25px 40px 10px;
        border-radius: 20px 0 0;
        z-index: 50;
        display: none;
    }
    #recruit_wrap .recruit_object {
        font-size: 5.5rem;
        right: 0%;
        width: 60px;
        -webkit-transform: translateX(0);
        transform: translateX(0);
        height: 65%;
        display: none;
    }
    #recruit_wrap .recruit_object p {
        top: -2px;
        right: -10px;
    }
    #recruit_wrap .recruit-intro {
        display: block;
        width: 90%;
        margin: -20% auto clamp(80px, (100vw/var(--sp)), 100px);
        z-index: 100;
        position: relative;
    }
    #recruit_wrap .messageIcon {
        width: 90%;
        max-width: 500px;
        margin-bottom: 50px;
    }
    #recruit_wrap .recruit-message {
        width: 100%;
        font-size: clamp(15px, (22vw/var(--sp)), 22px);
        line-height: 2;
    }
    #recruit_wrap .recruit-message .title {
        font-size: clamp(34px, (45vw/var(--sp)), 45px);
        margin-bottom: 30px;
    }
    /* 仕事紹介 */
    .top_job {
        margin: 0 auto clamp(200px, (300vw/var(--sp)), 300px);
        text-align: right;
    }
    .top_job::before {
        display: none;
    }
    .pageTitleBox {
        position: relative;
        display: inline-block;
        margin-bottom: 50px;
        margin-right: 0;
    }
    .pageTitleBox .pageTitle {
        font-size: 1.5rem;
        padding: 10px 20px;
        color: #fff;
        background-color: var(--deep);
    }
    .pageTitleBox .pageTitle.rift {
        font-size: clamp(30px, (50vw/var(--sp)), 50px);
        margin-bottom: 15px;
        padding: 10px 20px;
        color: var(--deep);
        background-color: #fff;
    }
    .top_job .job_kinds {
        margin-bottom: 75px;
        position: relative;
    }
    .top_job .job_kinds:nth-child(2)::before {
        content: '';
        background: none;
        width: 100vw;
        height: 150px;
        padding-top: 0;
        position: absolute;
        top: -50px;
        right: 0;
        z-index: -10;
        background-color: var(--deep);
        margin: 0 calc(50% - 100vw);
    }
    .top_job .pageTitleBox .pageTitle.rift {
        color: #fff;
        background-color: var(--deep);
    }
    .job_kinds .imageBox {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
    }
    .job_kinds .imageBox:hover .image .human img {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
    .job_kinds .imageBox .image .type {
        height: 90%;
        font-size: 1.3rem;
        letter-spacing: 3px;
    }
    .job_kinds .imageBox .image .type p {
        margin-top: 0;
    }
    .job_kinds .imageBox .image .type span {
        height: 5px;
    }
    .job_system {
        font-size: 1.5rem;
        max-width: 400px;
        text-align: center;
        padding: 0.3em 0;
    }
    .rec_btnBox {
        width: 80%;
        max-width: 300px;
        -webkit-transform: translateY(-30%);
        transform: translateY(-30%);
    }
    .rec_btn {
        font-size: clamp(14px, (16vw/var(--sp)), 16px);
        height: 50px;
        line-height: 50px;
        border-radius: 0 0 25px 0;
    }
    .job_kinds .imageBox:hover .rec_btn::before {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    .job_kinds .imageBox:hover .rec_btn p {
        color: #000;
    }
    .rec_btn p {
        margin-right: 25px;
    }
    .rec_btn span.btn_circle {
        width: 50px;
    }
    .rec_btn span.btn_circle img {
        max-width: 50px;
    }
    .rec_btn span.btn_arrow {
        right: 25px;
    }
    .rec_btn span.btn_arrow img {
        max-width: 15px;
    }
    /* 社員インタビュー */
    .top_person {
        padding-top: 60px;
        margin-bottom: clamp(100px, (150vw/var(--sp)), 150px);
		z-index: 500;
    }
    .top_person .pageTitleBox {
        left: 5%;
    }
    .top_person .pageTitleBox .pageTitle.rift {
        background: repeating-linear-gradient(-45deg, #4040ab, #4040ab 30px, #046bc3 30px, #046bc3 60px, #0045ac 60px, #0045ac 90px, #00a5e0 90px, #00a5e0 120px, #0045ac 120px, #0045ac 150px);
    }
    .top_person::before {
        height: 150px;
    }
    .top_person::after {
        height: 150px;
        top: 150px;
    }
    .personSlider {
        margin-bottom: 10rem;
    }
    .personSlider .person {
        margin: 0;
    }
    .slider-arrow {
        bottom: 0;
        right: 0;
        width: 100px;
    }
    .slider-arrow.prev {
        right: 100px;
    }
    .slider-arrow.next {
        right: 0;
    }
    .slider-arrow.prev:hover,
    .slider-arrow.next:hover {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
    .personSlider .person .image .personImg,
    .list-wrap .person .image .personImg {
        border-radius: 20% 20% 0 0;
    }
    .personSlider .person .copy,
    .list-wrap .person .copy {
        font-size: clamp(14px, (17vw/var(--sp)), 17px);
        white-space: nowrap;
        display: none;
    }
    .personSlider .person .cross_logo,
    .list-wrap .person .cross_logo {
        width: 100%;
        max-width: 200px;
    }
    .personSlider .person .type,
    .list-wrap .person .type {
        font-size: clamp(25px, (32vw/var(--sp)), 32px);
        letter-spacing: 5px;
        padding: 15px 15px;
    }
    .personSlider .person a:hover .type,
    .list-wrap .person a:hover .type {
        top: 15px;
        color: var(--deep);
        background-color: #fff;
    }
    .list-wrap .person a:hover .type {
        top: 0;
    }
    .personSlider .person.person03 a:hover .type,
    .personSlider .person.person04 a:hover .type,
    .list-wrap .person.person03 a:hover .type,
    .list-wrap .person.person04 a:hover .type {
        color: var(--sub);
        background-color: #fff;
    }
    .personSlider .person.person05 a:hover .type,
    .personSlider .person.person06 a:hover .type,
    .list-wrap .person.person05 a:hover .type,
    .list-wrap .person.person06 a:hover .type {
        color: #00008f;
        background-color: #fff;
    }
    .personSlider .person.person07 a:hover .type,
    .list-wrap .person.person07 a:hover .type {
        color: var(--main);
        background-color: #fff;
    }
    .personSlider .person .name,
    .list-wrap .person .name {
        font-size: 1.3rem;
        padding: 25px 1em;
    }
    .personSlider .person .name {
        font-size: 1.3rem;
    }
    .personSlider .person .name span,
    .list-wrap .person .name span {
        font-size: 1.3rem;
        margin-right: 0;
    }
    .personSlider .person .name span {
        margin-right: 1em;
    }
    /* TAKEUCHIを知る */
    .top_company {
        margin-bottom: clamp(80px, (100vw/var(--sp)), 100px);
    }
    .top_company::before {
        height: calc(100% + 150px);
    }
    .top_companyTitle {
        color: #fff;
        margin: 0 auto;
        text-align: center;
        position: absolute;
        bottom: clamp(20px, (30vw/var(--sp)), 30px);
        left: 50%;
        -webkit-transform: translate(-50%, 100%);
        transform: translate(-50%, 100%)
    }
    .top_companyTitle .pageTitle.rift {
        font-size: clamp(40px, (60vw/var(--sp)), 60px);
        margin-bottom: 0;
        line-height: 1;
    }
    .top_companyTitle .pageTitle {
        font-size: 1.5rem;
    }
    .top_menu {
        width: 90%;
        max-width: 480px;
        display: block;
        margin: 0 auto clamp(80px, (100vw/var(--sp)), 100px);
    }
    .top_menu .takeuchi_intro,
    .top_menu .takeuchi_number,
    .top_menu .takeuchi_person,
    .top_menu .takeuchi_job {
        width: 100%;
        margin-bottom: 50px;
    }
    .top_menu .image {
        margin-bottom: 25px;
    }
    /* 採用情報 */
    .top_recinfo {
        margin: 0 auto clamp(120px, (150vw/var(--sp)), 150px);
        padding-top: clamp(80px, (100vw/var(--sp)), 100px);
    }
    .top_recinfo .imageBox {
        width: 90%;
        max-width: 720px;
    }
    .top_recinfo .wecan {
        top: -25%;
        right: 25px;
    }
    .top_recinfo .wecan_bg {
        position: absolute;
        top: clamp(200px, (250vw/var(--sp)), 250px);
        left: 0;
        width: 100%;
        z-index: -1;
    }
    .top_recinfo .recinfo_title {
        max-width: 720px;
    }
    .recinfo_title .title_en {
        font-size: 5rem;
        height: 5rem;
    }
    .recinfo_title .title_en p {
        position: absolute;
        bottom: -9px;
        left: -3px;
        line-height: 1;
        z-index: 30;
    }
    .recinfo_title .title_en::before {
        content: '';
        width: 50%;
        height: 5rem;
        position: absolute;
        top: 0;
        right: 0;
        background-color: var(--main);
        z-index: 10;
    }
    .recinfo_title .title_en::after {
        content: '';
        width: 25%;
        height: 5rem;
        position: absolute;
        top: 0;
        right: 0;
        background-color: var(--deep);
        z-index: 20;
    }
    .recinfo_title .title_jp {
        font-size: 2rem;
        height: 5rem;
        margin-left: 1em;
        letter-spacing: 3px;
        line-height: 5rem;
    }
    /* リクルートサブメニュー */
    .top_recmenu {
        display: block;
        max-width: 480px;
        font-size: clamp(20px, (24vw/var(--sp)), 24px);
        color: #fff;
        height: clamp(200px, (240vw/var(--sp)), 240px);
        margin-bottom: 350px;
    }
    .top_recmenu .recBanner {
        width: 100%;
        border-radius: 10px;
        margin-bottom: 50px;
        text-align: center;
        position: relative;
        height: clamp(200px, (240vw/var(--sp)), 240px);
    }
    .top_recmenu .recBanner::after {
        width: 100px;
        height: 100px;
    }
    .top_recmenu a:hover .rec_btn span.btn_arrow img {
        -webkit-animation: none;
        animation: none;
    }
    .top_recmenu .rec_btnBox .rec_btn p {
        font-size: 3.8rem;
        bottom: -5px;
        left: -2px;
    }
    .top_recmenu .rec_btnBox {
        max-width: 300px;
        height: 50px;
    }
    .top_recmenu a:hover .rec_btn::before {
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    .top_recmenu .graduates a:hover .rec_btnBox p {
        color: var(--sub)
    }
    .top_recmenu .career a:hover .rec_btnBox p {
        color: var(--main)
    }
    /*===============================================
社員一覧
===============================================*/
    #personList > .pageTitleBox {
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
        writing-mode: horizontal-tb;
        position: relative;
        margin: 25px 0 clamp(50px, (100vw/var(--sp)), 100px) 5%;
    }
    #personList > .pageTitleBox .pageTitle {
        padding: 15px 30px;
    }
    #personList > .pageTitleBox .pageTitle.rift {
        background: repeating-linear-gradient(-45deg, #4040ab, #4040ab 30px, #046bc3 30px, #046bc3 60px, #0045ac 60px, #0045ac 90px, #00a5e0 90px, #00a5e0 120px, #0045ac 120px, #0045ac 150px);
        padding: 15px 30px;
        margin-left: 0;
        margin-bottom: 15px;
    }
    .list-wrap {
        width: 90%;
        max-width: 720px;
        grid-template-columns: repeat(2, 48%);
        margin: 0 auto;
    }
    .list-wrap .person {
        margin-bottom: 50px;
    }
    .list-wrap .person.person05,
    .list-wrap .person.person06 {
        margin-bottom: clamp(80px, (100vw/var(--sp)), 100px);
    }
    .list-wrap .person.person07 {
        margin-bottom: clamp(50px, (100vw/var(--sp)), 100px);
    }
    .list-wrap .person .name {
        padding: 15px 1em;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .list-wrap .person .name .nameBox {
        width: 80%;
        text-align: left;
    }
    .list-wrap .person .name .arrow {
        width: 20%;
        max-width: 40px;
        min-height: 72px;
    }
    .list-wrap .person .name .arrow span {
        width: 25px;
        height: 25px;
    }
    .list-wrap .person .type {
        font-size: clamp(20px, (40vw/var(--sp)), 40px);
        padding: 10px;
        max-width: inherit;
        top: 0;
        letter-spacing: 1px;
    }
    .list-wrap .person.person07 .cross_logo {
        right: 8%;
        max-width: 300px;
        width: 50%;
    }
    .person_img {
        margin-bottom: clamp(80px, (100vw/var(--sp)), 100px);
    }
    .list-wrap .person .name,
    .list-wrap .person .name span {
        font-size: clamp(14px, (16vw/var(--sp)), 16px);
        letter-spacing: 1px;
    }
    .list-wrap .person .name span.sp-none {
        display: none;
    }
    /*===============================================
インタビュー
===============================================*/
    /* インタビュー*/
    #person .person_heder {
        margin-bottom: clamp(50px, (100vw/var(--sp)), 100px);
    }
    #person .header_img {
        background: url("../img/person_main-01.jpg")no-repeat right center / cover;
        width: 90%;
        height: clamp(400px, (700vw/var(--sp)), 700px);
        margin: 0 auto 10px;
    }
    #person.person01 .header_img {
        background: url("../img/person_main-01.jpg")no-repeat right 10% center / cover;
    }
    #person.person02 .header_img {
        background: url("../img/person_main-02.jpg")no-repeat right 12% center / cover;
    }
    #person.person03 .header_img {
        background: url("../img/person_main-03.jpg")no-repeat left 55% center / cover;
    }
    #person.person04 .header_img {
        background: url("../img/person_main-04.jpg")no-repeat right 25% center / cover;
    }
    #person.person05 .header_img {
        background: url("../img/person_main-05.jpg")no-repeat right 10% center / cover;
    }
    #person.person06 .header_img {
        background: url("../img/person_main-06.jpg")no-repeat center center / cover;
    }
    #person.person07 .header_img {
        background: url("../img/person_main-07SP.jpg")no-repeat right 40% bottom / cover;
    }
    #person.person07.crosstalk .header_img .pageTitleBox {
        top: 5%;
        bottom: inherit;
    }
    #person .header_img .pageTitleBox {
        top: 5%;
        right: -5.1%;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    #person .header_img .pageTitleBox .pageTitle {
        font-size: 1.2rem;
        padding: 20px 15px;
    }
    #person .header_img .pageTitleBox .pageTitle.rift {
        font-size: clamp(26px, (50vw/var(--sp)), 50px);
        margin-left: 10px;
        letter-spacing: 3px;
        width: 50px;
        line-height: 50px;
    }
    #person .header_img .pageTitleBox span {
        background-color: #fff;
        font-size: clamp(20px, (30vw/var(--sp)), 30px);
        width: 50px;
        letter-spacing: 4px;
        line-height: 50px;
    }
    #person .flex {
        display: block;
    }
    #person .person_heder .headerBox .nameCont {
        padding-right: 5%;
    }
    #person .person_heder .headerBox .nameBox {
        font-size: 1.4rem;
    }
    #person .person_heder .headerBox .nameBox .affiliation {
        font-size: 1.4rem;
    }
    #person .person_heder .headerBox .nameBox .name {
        font-size: 1.8rem;
    }
    #person .person_heder .headerBox .title {
        font-size: clamp(18px, (30vw/var(--sp)), 30px);
        padding: 30px 5%;
        border-radius: 0 40px 40px 0;
        letter-spacing: 1px;
    }
    #person .person_contents {
        margin-bottom: 0;
    }
    #person.person07 .person_contents {
        margin-bottom: clamp(200px, (250vw/var(--sp)), 250px);
    }
    #person .person_contents .flex {
        margin-bottom: 50px;
    }
    #person .person_contents .image {
        width: 85%;
    }
    #person .person_contents .flex:nth-child(even) .image {
        margin-left: auto;
    }
    #person .person_contents .textBox {
        width: 100%;
        padding: 10% 5% 5%;
        font-size: 1.4rem;
        line-height: 2;
        letter-spacing: 0.05em;
    }
    #person .person_contents .textBox .heading {
        font-size: clamp(16px, (20vw/var(--sp)), 20px);
        margin-bottom: 1.25em;
    }
    /* インタビュー ある日の一日 */
    #person_day {
        margin-bottom: clamp(150px, (250vw/var(--sp)), 250px);
    }
    #person .person_day {
        background-color: #99dbf3;
        padding: 50px 5% 25px;
        margin-bottom: clamp(80px, (100vw/var(--sp)), 100px);
    }
    #person .person_day .flex {
        max-width: 720px;
    }
    #person .person_day .image {
        width: 60%;
        max-width: 320px;
        margin: 0 auto 20px;
    }
    #person .person_day .schedule {
        width: 100%;
        max-width: 400px;
        font-size: 1.4rem;
        letter-spacing: 1px;
    }
#person .person_day .scheduleBox {
    margin-bottom: 15px;
}
    #person .scheduleBox .time {
        margin-right: 10px;
        width: 55px;
        font-size: 1.4rem;
    }
    #person .scheduleBox .text {
        font-size: 1.4rem;
    }
    #person .takeuchi_job .pageTitleBox {
        top: 0;
        bottom: inherit;
        right: 0%;
        left: inherit;
    }
    #personList .takeuchi_job .pageTitleBox {
        top: 0;
        bottom: inherit;
        right: 0%;
        left: inherit;
        position: absolute;
    }
    #person .takeuchi_job .pageTitle.rift {
        font-size: clamp(30px, (40vw/var(--sp)), 40px);
    }
    #person .takeuchi_job .pageTitle {
        font-size: 1.4rem;
        background-color: var(--deep);
        color: #fff;
    }
    #person .duty {
        margin-left: 65px;
        font-size: 1.6rem;
        margin-bottom: 30px;
    }
    #person .duty span {
        color: var(--sub);
        margin-right: 0.25em;
    }
    /*営業インタビュー ------------------------------*/
    #person.crosstalk .header_img {
        margin: 100px auto 80px;
    }
    #person.crosstalk .header_img .crossLogo {
        position: absolute;
        right: inherit;
        left: 5%;
        top: 0;
        -webkit-transform: translateY(-45%);
        transform: translateY(-45%);
        width: 60%;
        max-width: 280px;
    }
    #person.crosstalk .header_img .pageTitleBox {
        top: inherit;
        bottom: 0;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    #person.crosstalk .person_heder::before {
        height: 350px;
    }
    #person.crosstalk .person_heder::after {
        height: 350px;
    }
    #person.crosstalk .member {
        width: 90%;
        margin: 0 auto clamp(80px, (100vw/var(--sp)), 100px);
    }
    #person.crosstalk .member .titleBox {
        max-width: 280px;
    }
    #person.crosstalk .member .flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        max-width: 280px;
    }
    #person.crosstalk .member .title_en {
        font-size: 3rem;
        line-height: 1;
    }
    #person.crosstalk .member .title_jp {
        font-size: 1.5rem;
    }
    #person.crosstalk .member .list {
        font-size: 1.2rem;
        width: 48%;
        margin-right: 2%;
        margin-bottom: 5%;
    }
    #person.crosstalk .member .list:nth-last-cbhild(1) {
        margin-right: 0;
    }
    #person.crosstalk .member .list:nth-child(2n) {
        margin-right: 0;
    }
    #person.crosstalk .member .list .image {
        margin-bottom: 15px;
    }
    #person.crosstalk .member .list .name {
        font-size: 1.4rem;
    }
    #person.crosstalk .person_contents .heading {
        padding: 30px 7.5% 50px 7.5%;
        margin-bottom: 25px;
        text-align: center;
        min-height: 2em;
    }
    #person.crosstalk .person_contents .heading p {
        display: inline-block;
        margin: 0 auto;
        text-align: left;
    }
    #person.crosstalk .person_contents .textBox {
        padding: 0 5%;
        max-width: 580px;
    }
    #person.crosstalk .person_contents .text > div {
        margin-bottom: 25px;
    }
    #person.crosstalk .person_contents .text span.icon {
        margin-right: 15px;
    }
    #person.crosstalk .person_contents .answer span.icon::after {
        font-size: 1.4rem;
        margin-top: 5px;
    }
    #person .sales_img {
        margin-bottom: clamp(120px, (150vw/var(--sp)), 150px);
    }
    #person.crosstalk .person_contents .image {
        margin-bottom: 50px;
    }
    #person.crosstalk .person_contents .flex .image .voice {
        font-size: clamp(18px, (25vw/var(--sp)), 25px);
    }
    #person.crosstalk .person_contents .flex:nth-child(3) .image .voice {
        bottom: -5%;
        left: 5%;
    }
    #person.crosstalk .person_contents .flex:nth-child(7) .image .voice {
        bottom: -5%;
        left: 5%;
    }
    #person.crosstalk .person_contents .flex:nth-child(9) .image .voice {
        bottom: -5%;
        left: 5%;
    }
    #person.crosstalk .person_contents .flex:nth-child(3),
    #person.crosstalk .person_contents .flex:nth-child(7),
    #person.crosstalk .person_contents .flex:nth-child(9) {
        margin-bottom: clamp(50px, (100vw/var(--sp)), 100px);
    }
    /*===============================================
仕事紹介
===============================================*/
    #rec_jpb .job_header {
        height: auto;
        padding: 100px 5% 150px;
        margin-bottom: 0;
        overflow: hidden;
    }
    #rec_jpb .pageTitle.rift {
        font-size: 4rem;
        background-color: #fff;
        color: #0045AC;
    }
    #rec_jpb .pageTitle {
        font-size: 1.6rem;
        letter-spacing: 3px;
        padding: 10px 60px;
    }
    .job_header .flex {
        display: block;
    }
    .job_header .image {
        width: 100%;
        max-width: 640px;
        margin-top: 5%;
        min-width: 540px;
    }
    .job_header .text {
        font-size: clamp(16px, (20vw/var(--sp)), 20px);
        margin-left: 0;
        margin-top: -120px;
        max-width: 480px;
        white-space: normal;
        line-height: 1.8;
    }
    .job_header .pageTitleBox {
        position: absolute;
        right: 0;
        bottom: 0;
        top: inherit;
        margin-bottom: 0;
    }
    .job_intro {
        width: 90%;
        max-width: 640px;
        margin: 0 auto clamp(100px, (150vw/var(--sp)), 150px);
    }
    .job_intro .explanation {
        max-width: 640px;
        margin: 0 auto 50px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .job_intro .title_en {
        font-size: clamp(28px, (45vw/var(--sp)), 45px);
        max-width: inherit;
        width: 78%;
    }
    .job_intro .title_en span::after {
        width: 30px;
        height: 8px;
        left: 0px;
        white-space: nowrap;
    }
    .job_intro .title_en p {
        padding-right: 50px;
        line-height: 1.1;
        padding-bottom: 30px;
    }
    .job_intro .title_jp {
        font-size: clamp(55px, (65vw/var(--sp)), 65px);
        letter-spacing: 5px;
        width: 22%;
        position: relative;
        -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
        writing-mode: vertical-lr;
    }
    .job_intro .title_jp p {
        padding: 0 0 50px 0.25em;
        white-space: nowrap;
        letter-spacing: 5px;
    }
    .job_intro .explanation .textBox {
        width: 100%;
        min-width: inherit;
        max-width: 640px;
        margin-top: 25px;
    }
    .job_intro .explanation .textBox::before {
        display: none;
    }
    .job_intro .textBox .title {
        font-size: clamp(18px, (24vw/var(--sp)), 24px);
        margin-bottom: 1em;
        padding-left: 0;
        padding-top: 0;
    }
    .job_intro .textBox .text {
        font-size: 1.5rem;
        padding-left: 0;
        line-height: 1.8;
    }
    .job_intro .rec_contents {
        margin-bottom: 50px;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .job_intro .rec_contents .image {
        width: 95%;
        margin-right: 0;
    }
    .job_intro .rec_contents .system_name {
        font-size: clamp(18px, (25vw/var(--sp)), 25px);
        width: clamp(65px, (100vw/var(--sp)), 100px);
    }
    .job_intro .rec_contents .textBox {
        font-size: 1.5rem;
        width: 50%;
        padding: 5%;
    }
    .job_intro .rec_contents .textBox .text {
        max-width: inherit;
        margin: 0 auto;
        line-height: 1.8;
        margin-bottom: 30px;
        font-size: 1.4rem;
    }
    .job_intro .rec_contents .textBox .btn.normal {
        margin-bottom: 20px;
    }
    .job_intro .rec_contents .textBox .btn.normal a {
        padding: 0 20px;
        width: 100%;
        letter-spacing: 0px;
        max-width: 250px;
    }
    #technology,
    #development,
    #manufacturing,
    #salesposition,
    #management {
        padding-top: clamp(100px, (120vw/var(--sp)), 120px);
    }
    .jobType_menu {
        bottom: 0;
        padding: 0;
    }
    .jobType_menu::before {
        display: none;
    }
    .jobType_menu ul {
        font-size: clamp(12px, (20vw/var(--sp)), 20px);
        width: 100%;
    }
    .jobType_menu ul li {
        width: 20%;
        letter-spacing: 0;
    }
    .jobType_menu ul li a {
        padding: clamp(20px, (25vw/var(--sp)), 25px) 0;
    }
    .jobType_menu ul li a span:nth-child(1) {
        height: 3px;
    }
    .jobType_menu ul li a span:nth-child(2) {
        width: 3px;
    }
    .jobType_menu ul li a span:nth-child(2)::before {
        width: 15px;
        height: 3px;
        top: 6.5px;
        right: -2px;
    }
    #rec_jpb .takeuchi_person .pageTitleBox {
        margin-bottom: 0;
    }
    #rec_jpb .takeuchi_person .pageTitle.rift {
        font-size: clamp(25px, (30vw/var(--sp)), 30px);
        padding: 10px 20px;
        background: repeating-linear-gradient(-45deg, #4040ab, #4040ab 30px, #046bc3 30px, #046bc3 60px, #0045ac 60px, #0045ac 90px, #00a5e0 90px, #00a5e0 120px, #0045ac 120px, #0045ac 150px);
    }
    #rec_jpb .takeuchi_person .pageTitle {
        font-size: 1.5rem;
        padding: 10px 20px;
        color: #fff;
        white-space: nowrap;
    }
    .job_intro #manufacturing .monozukuri {
        padding-left: 0;
        max-width: 400px;
        margin: 0 auto 30px;
    }
    .job_intro #manufacturing .explanation .textBox .btn {
        padding-left: 0;
    }
    /*===============================================
武内プレスを知る
===============================================*/
    #learn {
        overflow: hidden;
        margin-top: 80px;
    }
    #learn .message .mainTitle {
        position: absolute;
        right: 5%;
        top: 20px;
        max-width: 200px;
        width: 25%;
    }
    #learn .message .messageBox {
        margin-top: -50px;
    }
    #learn .message .messageBox .title {
        margin: 0 auto 50px;
        max-width: 60px;
    }
    #learn .message .messageBox .flex {
        display: flex;
		flex-direction: column;
    }
    #learn .message .messageBox .flex .image {
		width: 100%;
		height: clamp(250px, (400vw/var(--sp)), 400px);
		order: 2;
    }
    #learn .message .text {
        font-size: 1.5rem;
        line-height: 2;
        max-width: 640px;
        margin: 0 auto 50px;
        padding: 0 5%;
        letter-spacing: 0.05em;
		order: 1;
    }
    #learn .overview {
        margin-bottom: clamp(100px, (150vw/var(--sp)), 150px);
    }
    #learn .overview .title {
        width: 12%;
        margin: 0 auto 50px;
        max-width: 50px;
    }
    #learn .overview .logo {
        max-width: 640px;
        margin-left: 5%;
        margin-bottom: 60px;
    }
    #learn .overview .text {
        font-size: clamp(14px, (20vw/var(--sp)), 20px);
        width: 80%;
        max-width: 420px;
        line-height: 1.6;
    }
    #learn .overview .text p {
        margin-bottom: 20px;
        padding: 1em 1.5em;
    }
    #learn .appeal {
        margin-bottom: clamp(100px, (150vw/var(--sp)), 150px);
    }
    #learn .appeal .title {
        width: 12%;
        max-width: 50px;
    }
    #learn .appeal .appealPoint {
        max-width: 640px;
        margin: 0 auto 50px;
        width: 90%;
    }
    #learn .appeal .appealPoint .point {
        width: 46%;
        margin-bottom: 5%;
        font-size: clamp(14px, (18vw/var(--sp)), 18px);
        line-height: 1.6;
    }
    #learn .appeal .appealPoint .point:nth-child(odd) {
        margin-right: 8%;
    }
    #learn .appeal .appealPoint .point:nth-child(3) .text {
        text-align: left;
    }
    #learn .appeal .appealPoint .point .image {
        margin-bottom: 10px;
    }
    #learn .profileBtn {
        font-size: 1.6rem;
        min-width: 240px;
    }
    #learn .profileBtn a::before {
        width: 40px;
        height: 23px;
        left: 10px;
    }
    #learn .profileBtn a::after {
        width: 14px;
        height: 19px;
        right: 15px;
    }
    #graduate .pageTitleBox .pageTitle.rift {
        background: repeating-linear-gradient(-45deg, #4040ab, #4040ab 30px, #046bc3 30px, #046bc3 60px, #0045ac 60px, #0045ac 90px, #00a5e0 90px, #00a5e0 120px, #0045ac 120px, #0045ac 150px);
    }
    #learn .learn_entry .pageTitleBox .pageTitle,
    #graduate .learn_entry .pageTitleBox .pageTitle {
        margin-bottom: 20px;
    }
    #learn .top_recinfo,
    #graduate .top_recinfo {
        padding: 0;
        margin: 0 auto 50px;
    }
    #learn .learn_bg,
    #graduate .learn_bg {
        width: 100%;
        max-width: 1000px;
        margin: -30px auto;
        padding-bottom: 100px;
        position: relative;
    }
    #learn .top_menu {
        margin: 0 auto clamp(120px, (250vw/var(--sp)), 250px);
    }
    .learn_bg::before {
        content: '';
        width: 100vw;
        height: 100%;
        position: absolute;
        left: 0;
        top: -60px;
        background-color: var(--sub);
        z-index: -10;
    }
    .learn_bg .mynavi {
        width: 50%;
        max-width: 160px;
        margin: 0 auto 30px;
    }
    .learn_bg .text {
        font-size: 1.8rem;
        width: 80%;
        margin: 0 auto;
        text-align: left;
    }
    .learn_bg_anime {
        -webkit-transform: translateX(35%);
        transform: translateX(35%);
    }
    .learn_bg_anime.active {
        -webkit-animation: recruit_bg 2s 0.25s ease-out forwards;
        animation: recruit_bg 2s 0.25s ease-out forwards;
    }
    #learn .pageTitleBox,
    #graduate .pageTitleBox {
        top: 0;
        right: 0;
        left: inherit;
        bottom: inherit;
        position: absolute;
    }
    /*===============================================
新卒採用
===============================================*/
    .graduate_header {
        text-align: center;
        margin-top: 85px;
        margin-bottom: clamp(100px, (150vw/var(--sp)), 150px);
    }
    .graduate_header .image {
        width: 100%;
        max-width: 720px;
    }
    .graduate_header .image,
    .career_header .image {
        width: 100%;
        margin: 0 auto;
    }
    .graduate_header .title,
    .career_header .title {
        width: 70%;
        max-width: 420px;
        margin: 0 auto;
        -webkit-transform: translateY(-35%);
        transform: translateY(-35%);
    }
    .graduate_header .text,
    .career_header .text {
        font-size: 1.6rem;
        line-height: 1.8;
        max-width: 540px;
        width: 90%;
    }
    .guideline {
        width: 90%;
        max-width: 640px;
        margin: 0 auto clamp(80px, (100vw/var(--sp)), 100px);
    }
    .guideline .title {
        font-size: clamp(20px, (24vw/var(--sp)), 24px);
        margin-bottom: 1em;
    }
    .guideline .table {
        font-size: 1.4rem;
        line-height: 1.6;
        letter-spacing: 1px;
    }
    .guideline .table tr {
        border-top: none;
    }
    .guideline .table th {
        border-top: 2px solid #b2e4f6;
        width: 100%;
        padding: 1em 0 0.5em 0;
        font-size: 1.6rem;
        display: block;
        position: relative;
    }
    .guideline .table th::before {
        content: '';
        width: 5em;
        height: 4px;
        position: absolute;
        left: 0;
        top: -3px;
        background-color: #66c9ec;
    }
    .guideline .table tr:nth-child(1) th {
        padding: 1.5em 0 0.5em 0;
    }
    .guideline .table td {
        padding: 0 0 1em 0;
        display: block;
        width: 100%;
    }
    .guideline .table td .textBlock {
        margin-bottom: 25px;
    }
    .guideline .table td .textBlock p.headline {
        margin-bottom: 0;
        font-size: 1.4rem;
    }
    .guideline .table td .textBlock p.headline span {
        margin-right: 0.25em;
    }
    .flow {
        width: 90%;
        max-width: 640px;
        margin: 0 auto clamp(80px, (100vw/var(--sp)), 100px);
    }
    .flow .title {
        font-size: clamp(20px, (24vw/var(--sp)), 24px);
        margin-bottom: 1em;
    }
    .flow .flex {
        display: block;
    }
    .flow .flex .text {
        font-size: 1.4rem;
        width: 100%;
        margin-right: 0;
        line-height: 1.6;
        margin-bottom: 25px;
    }
    .flow .flex .image {
        width: 100%;
        max-width: 400px;
    }
    #graduate .faq {
        padding: 50px 0;
        margin-bottom: clamp(150px, (200vw/var(--sp)), 200px);
    }
    #graduate .faq .title {
        font-size: clamp(18px, (24vw/var(--sp)), 24px);
        margin-bottom: 30px;
    }
    #graduate .faq .title span {
        font-size: clamp(45px, (55vw/var(--sp)), 55px);
        margin-bottom: 10px;
    }
    #graduate .faq .faqBox {
        width: 90%;
        font-size: 1.4rem;
        max-width: 640px;
        line-height: 1.6;
    }
    #graduate .faq .faqBox .question {
        font-size: 1.4rem;
        padding: 1em;
    }
    #graduate .faq .faqBox .question p {
        margin-right: 25px;
    }
    #graduate .faq .faqBox .question span.questionQ {
        font-size: 2.5rem;
        margin-right: 15px;
    }
    #graduate .faq .faqBox .question span.questionBtn {
        width: 20px;
        height: 20px;
    }
    #graduate .faq .faqBox .question span.questionBtn span:nth-child(1) {
        width: 10px;
        height: 1px;
    }
    #graduate .faq .faqBox .question span.questionBtn span:nth-child(2) {
        width: 1px;
        height: 10px;
    }
    #graduate .faq .faqBox .question.active span.questionBtn span:nth-child(2) {
        width: 1px;
        height: 10px;
    }
    #graduate .faq .faqBox .answer {
        display: none;
        padding: 1em 1em 0 1em;
    }
    #graduate .faq .faqBox .answer span.answerA {
        font-size: 2.5rem;
        margin-right: 15px;
    }
    #graduate .faq .faqBox .answer p {
        padding: 0 0 1em 0;
    }
    /*===============================================
キャリア採用
===============================================*/
    .career_header {
        margin-top: 85px;
        margin-bottom: clamp(50px, (100vw/var(--sp)), 100px);
    }
    #career_rec .guideline {
        margin-bottom: 0;
    }
    #career_rec .guideline .table {
        margin-bottom: 25px;
    }
    #career_rec .guideline .table tr {
        border-top: none;
    }
    #career_rec .guideline .table th {
        border-top: 2px solid #68a6db;
    }
    .achievements {
        width: 90%;
        max-width: 640px;
        margin: 0 auto clamp(120px, (150vw/var(--pc)), 150px);
    }
    .achievements .title {
        font-size: 1.4rem;
        margin-bottom: 5px;
    }
    .table2 {
        font-size: 1.2rem;
        margin-bottom: 50px;
    }
    .table2 tr:nth-child(n + 2) {
        border-bottom: 2px solid #b3d2ed
    }
    .table2 th {
        border-right: 2px solid #b3d2ed;
        background-color: #e5f0f9;
        padding: 0.5em 0;
        width: 29%;
        letter-spacing: 1px;
    }
    .table2 th:nth-child(1),
    .table2 td:nth-child(1) {
        width: 13%;
    }
    /*===============================================
数字で見る武内
===============================================*/
    .numbers_wrap {
        margin-bottom: clamp(80px, (100vw/var(--sp)), 100px);
    }
    .numbers_wrap .image {
        max-width: 420px;
        width: 75%;
        margin: 0 auto clamp(80px, (100vw/var(--sp)), 100px);
        padding-top: clamp(120px, (200vw/var(--sp)), 200px);
    }
    .numberPanel {
        width: 90%;
        margin: 0 auto;
        max-width: 640px;
    }
    .data-tile {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 20px;
        column-gap: 10px;
        margin-bottom: clamp(80px, (100vw/var(--sp)), 100px);
    }
    .data-tile li {
        border-radius: 10px;
    }
    #numbers .pageTitleBox {
        top: 0;
        right: 0;
        left: inherit;
        bottom: inherit;
        position: absolute;
    }
    /*===============================================
ものづくりの現場
===============================================*/
    #monozukuri .monozukuri_header .title {
        width: 70%;
        max-width: 420px;
        margin: -25% auto 30px;
    }
    #monozukuri .monozukuri_wrap {
        padding-bottom: clamp(50px, (100vw/var(--sp)), 100px);
    }
    #monozukuri .monozukuri_wrap#part1 {
        padding-top: clamp(80px, (120vw/var(--sp)), 120px);
    }
    #monozukuri .monozukuri_wrap#part1::before {
        background: url("../img/monozukuri_bg01SP.svg")no-repeat left top / contain;
    }
#monozukuri .monozukuri_wrap#part1 span{
	position: absolute;
    left: 0;
    top: 1px;
    z-index: -1;
	width: 39.9%;
	background-color: #0045AC;
	height: 100%;
}
    #monozukuri .monozukuri_wrap#part1::after {
        width: 30%;
        background: url("../img/monozukuri_bg02SP.svg")no-repeat right bottom / contain;
    }
    #monozukuri .monozukuri_wrap#part2 {
        padding-top: clamp(80px, (120vw/var(--sp)), 120px);
    }
    #monozukuri .monozukuri_wrap#part2::before {
        width: 40%;
        background: url("../img/monozukuri_bg03SP.svg")no-repeat left bottom / contain;
    }
    #monozukuri .monozukuri_wrap#part2::after {
        width: 40%;
        background: url("../img/monozukuri_bg04SP.svg")no-repeat right top / contain;
		background-color: #046BC3;
    }
    #monozukuri .monozukuri_wrap#part3 {
        padding-top: clamp(80px, (120vw/var(--sp)), 120px);
        margin-bottom: clamp(80px, (120vw/var(--sp)), 120px);
    }
    #monozukuri .monozukuri_wrap#part3::before {
        width: 40%;
        background: url("../img/monozukuri_bg05SP.svg")no-repeat left top / contain;
    }
#monozukuri .monozukuri_wrap#part3 span{
	position: absolute;
    left: 0;
    top: 1px;
    z-index: -1;
	width: 39.9%;
	background-color: #0045AC;
	height: 100%;
}
    #monozukuri .monozukuri_wrap#part3::after {
        width: 40%;
        background: url("../img/monozukuri_bg06SP.svg")no-repeat right bottom / contain;
    }
    #monozukuri .monozukuri_contaner {
        border-radius: 10px;
        padding: 30px 5%;
        margin: 0 auto clamp(50px, (100vw/var(--sp)), 100px);
        max-width: 560px;
    }
    #monozukuri .monozukuri_contaner .text {
        font-size: 1.4rem;
        margin-bottom: 25px;
    }
    #monozukuri .monozukuri_contaner .image {
        margin-bottom: 20px;
    }
    #monozukuri .monozukuri_image {
        line-height: 0;
        margin: 0 auto clamp(80px, (120vw/var(--sp)), 120px);
    }
    #monozukuri .takeuchi_person .pageTitleBox {
        margin-bottom: 0;
    }
    #monozukuri .takeuchi_person .pageTitle.rift {
        font-size: clamp(25px, (30vw/var(--sp)), 30px);
        padding: 10px 20px;
        background: repeating-linear-gradient(-45deg, #4040ab, #4040ab 30px, #046bc3 30px, #046bc3 60px, #0045ac 60px, #0045ac 90px, #00a5e0 90px, #00a5e0 120px, #0045ac 120px, #0045ac 150px);
    }
    #monozukuri .takeuchi_person .pageTitle {
        font-size: 1.5rem;
        padding: 10px 20px;
        color: #fff;
        white-space: nowrap;
    }
    /*===============================================
フッター
===============================================*/
    #recruitSite .footer_right .footer_menu {
        background-color: var(--sub);
    }
    #recruitSite .footer_menu .left {
        display: none;
    }
    #recruitSite .footer_menu .right {
        max-width: 300px;
    }
    #recruitSite .footer_menu .right .pageTitleBox {
        padding-right: 0;
        padding-bottom: 50px;
        background-color: var(--main);
        margin-bottom: 0;
    }
    #recruitSite .footer_menu .right .pageTitleBox .pageTitle.rift {
        background: repeating-linear-gradient(-45deg, #4040ab, #4040ab 30px, #046bc3 30px, #046bc3 60px, #0045ac 60px, #0045ac 90px, #00a5e0 90px, #00a5e0 120px, #0045ac 120px, #0045ac 150px);
    }
    #recruitSite .footer_menu .tp-link {
        font-size: 2rem;
    }
    #recruitSite .footer_menu .tp-link a:hover {
        background-color: var(--sub);
    }
    #recruitSite .footer_menu .tp-link a p {
        padding-right: 25px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    #recruitSite .footer_menu .tp-link a p::before {
        width: 46px;
        height: 25px;
        vertical-align: -0.25em;
    }
}