/*--------------------*/
/* base
/*--------------------*/

li {
    list-style-type: none;
}

img {
    width: 100%;
}

a {
    text-decoration: none;
    color: #000;
}

html,
body {
    margin: 0;
    padding: 0;
    font-family: "Noto Sans JP", "メイリオ", "Meiryo", "ＭＳ ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN",
        sans-serif;
    background: url(../img/recruit/recruit_bg.png) 0% 0% / contain;
    background-repeat: no-repeat;
}

@media screen and (max-width: 768px) {
    html,
    body {
        background: none;
    }
}

@font-face {
    /* ① ここにfont-familyで指定したい名前を書く*/
    font-family: "HarenosoraMincho";
    /* フォントが置かれているパスを書く */
    src: url("/assets/font/Harenosora.otf") format("truetype");
}

@font-face {
    /* ① ここにfont-familyで指定したい名前を書く*/
    font-family: "athelas";
    /* フォントが置かれているパスを書く */
    src: url("/assets/font/Athelas-Bold.ttf") format("truetype");
}

@font-face {
    /* ① ここにfont-familyで指定したい名前を書く*/
    font-family: "Minion";
    /* フォントが置かれているパスを書く */
    src: url("/assets/font/Minion\ Pro\ Cond.otf") format("truetype");
}

@font-face {
    /* ① ここにfont-familyで指定したい名前を書く*/
    font-family: "EBG";
    /* フォントが置かれているパスを書く */
    src: url("/assets/font/EBGaramond08-Regular.ttf") format("truetype");
}

/* 基本設定
/*--------------------*/

html {
    font-size: 62.5%;
}

.btn {
    max-width: 17vw;
    width: 100%;
    background-color: #a18b55;
    padding: 2.5rem 3.5vw 2.5rem 2.2vw;
    font-size: 1.4vw;
    font-family: "Noto Serif JP", serif;
    font-weight: bold;
    border-radius: 50px;
    position: relative;
}

.btn a {
    color: #fff;
}

.btn a:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: transparent;
}

.btn::after {
    content: "";
    display: inline-block;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    top: 50%;
    right: 1.5vw;
    transform: translateY(-50%);
    border-style: solid;
    border-width: 10px 8px 0 8px;
    display: inline-block;
    width: 0;
    height: 0;
}

.util__title {
    font-size: 1.8vw;
    font-family: "Noto Serif JP", serif;
}

@media screen and (max-width: 768px) {
    .util__title {
        font-size: 4vw;
    }
}

@media screen and (max-width: 768px) {
    .sp {
        display: none;
    }

    .about a {
        color: #111;
    }
}

.mobail {
    display: none;
}

@media screen and (max-width: 768px) {
    .mobail {
        display: block;
    }

    .p__text {
        line-height: 1.5;
    }

    .similarity__main--img {
        margin-top: -13rem;
    }
}

@media screen and (max-width: 1440px) {
    .similarity__ttl {
        padding-top: 1rem;
        font-size: 9vw;
    }
}

@media screen and (max-width: 768px) {
    .similarity__ttl {
        padding-top: 1rem;
        font-size: 22vw;
    }
}

@media screen and (max-width: 1440px) {
    .similarity__main--img {
        margin-top: -11rem;
    }
}

@media screen and (max-width: 428px) {
    .similarity__main--img {
        margin-top: -5rem;
    }
}

.red01 {
    font-size: 1.8vw;
    color: #dd355c;
    font-family: "Noto Serif JP", serif;
    font-style: normal;
    margin-left: 1rem;
    font-weight: bold;
    padding-top: 3rem;
}

@media screen and (max-width: 768px) {
    .red01 {
        font-size: 4.2vw;
    }

    .none {
        display: none;
    }
}

.plan__area--text {
    font-size: 0.9vw;
    font-family: "ヒラギノ角ゴ ProN";
    margin-left: 0.7vw;
}

@media screen and (max-width: 768px) {
    .plan__area--text {
        display: none;
    }
}

.plan__area--img {
    max-width: 1.2vw;
    width: 100%;
}

@media screen and (max-width: 768px) {
    .plan__area--img {
        max-width: 3vw;
        width: 100%;
        margin-top: -4rem;
    }
}

@media screen and (max-width: 428px) {
    .plan__area--img {
        margin-top: -2rem;
    }

    .e__img {
        margin-top: -4.5rem;
    }

    body.Android .e__img {
        margin-top: -2.5rem;
    }
}

.plan__area--sp {
    display: none;
}

@media screen and (max-width: 768px) {
    .plan__area--sp {
        display: block;
        font-size: 3vw;
        line-height: 2;
        font-weight: 200;
        font-family: "ヒラギノ丸ゴシック Pro";
        margin-left: 0.5rem;
        letter-spacing: -0.05em;
    }

    .plan__area--sp span {
        font-weight: bold;
    }
}

.line:nth-of-type(2) {
    background-color: inherit;
}

/* performance
/*--------------------*/

.performance__text {
    max-width: 51vw;
    width: 100%;
    top: 45%;
    left: 53%;
}

.common {
    margin-top: 7rem;
}

.common__title {
    letter-spacing: 0;
    font-size: 1.9vw;
}

@media screen and (max-width: 1600px) {
    .common__box {
        margin-top: 4.5rem;
    }
}

@media screen and (max-width: 1440px) {
    .common__box {
        margin-top: 4.5rem;
    }
}

@media screen and (max-width: 768px) {
    .common {
        padding: 0 6vw;
        margin-top: 3rem;
    }

    .common__title {
        letter-spacing: 0;
        font-size: 4vw;
    }

    .common__box {
        margin-top: 3rem;
    }

    .performance__text {
        max-width: 81vw;
        width: 100%;
        top: 50%;
        line-height: 2.7;
        left: 55%;
    }
}

@media screen and (max-width: 428px) {
    .common {
        padding: 0 8vw;
        margin-top: 3rem;
    }

    .common__title {
        letter-spacing: 0;
        font-size: 4vw;
    }

    .common__box {
        margin-top: 3rem;
        margin-left: -2vw;
    }

    .performance__text {
        max-width: 81vw;
        width: 100%;
        top: 50%;
        line-height: 2.2;
        left: 53%;
    }
}

.performance__text span {
    color: #ff0000;
}

/* evidence
/*--------------------*/

.evidence {
    margin-top: 17rem;
    position: relative;
}

@media screen and (max-width: 1600px) {
    .evidence {
        margin-top: 13rem;
    }
}

@media screen and (max-width: 1440px) {
    .evidence {
        margin-top: 13rem;
    }
}

@media screen and (max-width: 768px) {
    .evidence {
        margin-top: 11.1rem;
    }
}

@media screen and (max-width: 428px) {
    .evidence {
        margin-top: 5rem;
    }
}

.evidence::after {
    content: "";
    background: url(../img/recruit/recruit_object.png) no-repeat;
    display: inline-block;
    max-width: 24vw;
    width: 100%;
    height: 80rem;
    position: absolute;
    top: -12%;
    right: 0;
    z-index: -2;
    background-size: contain;
}

@media screen and (max-width: 1600px) {
    .evidence::after {
        top: -9%;
    }
}

@media screen and (max-width: 768px) {
    .evidence::after {
        content: inherit;
    }
}

.evidence .util__title {
    margin-left: 24.24vw;
}

@media screen and (max-width: 768px) {
    .evidence .util__title {
        margin-left: 0;
        text-align: center;
        z-index: 1;
        position: relative;
        font-size: 4.8vw;
    }
    .e__title {
        display: none;
    }
}

.e__title--sp {
    display: none;
}

@media screen and (max-width: 768px) {
    .e__title--sp {
        display: block;
    }
}

.evidence .util__title::after {
    content: "CostReduction";
    display: inline-block;
    position: absolute;
    top: -9rem;
    left: 14vw;
    color: #e6e1d3;
    font-size: 11.5vw;
    font-family: "cochin", serif;
    font-weight: 500;
    z-index: -1;
}

@media screen and (max-width: 1440px) {
    .evidence .util__title::after {
        top: -7rem;
    }
}

@media screen and (max-width: 768px) {
    .evidence .util__title::after {
        content: "CostDownn";
        top: -4.5rem;
        left: 50%;
        transform: translate(-50%);
        font-size: 16.5vw;
        z-index: -99;
        overflow: hidden;
    }
}

@media screen and (max-width: 428px) {
    .evidence .util__title::after {
        content: "CostDown";
        top: -2.5rem;
        left: 50%;
        transform: translate(-50%);
        font-size: 16vw;
    }
}

.evidence__box {
    background: url(../img/performance/evidence-bg.png);
    margin-top: 1.5rem;
    position: relative;
    z-index: 2;
    padding: 10rem 0 15rem;
    background-size: contain;
}

@media screen and (max-width: 768px) {
    .evidence__box {
        padding: 6rem 5.3vw 7rem;
        margin-top: 1rem;
    }
}

@media screen and (max-width: 428px) {
    .evidence__box {
        padding: 4rem 5.3vw 5rem;
        margin-top: 0.5rem;
    }
}

.evidence__item {
    background-color: #fff;
    max-width: 72.72vw;
    width: 100%;
    margin: 0 auto;
    position: relative;
    padding-top: 7rem;
    padding-bottom: 10rem;
}

@media screen and (max-width: 1800px) {
    .evidence__item {
        padding: 5rem 0 4rem;
    }
}

@media screen and (max-width: 1440px) {
    .evidence__item {
        padding: 5rem 0 4rem;
    }
}

@media screen and (max-width: 768px) {
    .evidence__item {
        max-width: 86.6vw;
        position: relative;
        padding-top: 6rem;
    }
}

@media screen and (max-width: 428px) {
    .evidence__item {
        padding-top: 2rem;
    }
}

.evidence__item:not(:first-child) {
    margin-top: 10rem;
}

@media screen and (max-width: 768px) {
    .evidence__item:not(:first-child) {
        margin-top: 6rem;
    }
}

@media screen and (max-width: 428px) {
    .evidence__item:not(:first-child) {
        margin-top: 4rem;
    }
}

.evidence__logo {
    font-size: 5.5vw;
    font-family: "STIX Two Text", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: italic;
    margin-left: 1.6vw;
    position: absolute;
    top: -3rem;
}

@media screen and (max-width: 768px) {
    .evidence__logo {
        font-size: 10.6vw;
        margin-left: 1.4rem;
        top: -2rem;
    }
}

@media screen and (max-width: 428px) {
    .evidence__logo {
        top: -1rem;
    }
}

.evidence__logo span {
    color: #dd355c;
}

.evidence__title {
    font-size: 1.8vw;
    background-color: #3a3a3a;
    color: #fff;
    padding: 2.8rem 0 2.8rem 4vw;
    margin: 0.5rem 4rem 0 -2vw;
    font-family: "Noto Serif JP", serif;
}

@media screen and (max-width: 1600px) {
    .evidence__title {
        margin: 0 4rem 0 -2vw;
    }
}

@media screen and (max-width: 768px) {
    .evidence__title {
        font-size: 3.7vw;
        padding: 1.9rem 0 1.5rem 5.2vw;
        margin: 1rem 2.6rem 0 -2.6vw;
    }
}

@media screen and (max-width: 428px) {
    .evidence__title {
        padding: 1rem 0 1rem 5.2vw;
        margin-top: 1.5rem;
    }
}

.sp__e {
    display: none;
}

@media screen and (max-width: 768px) {
    .sp__e {
        display: block;
    }

    .pc__e {
        display: none;
    }
}

.evidence__text {
    font-size: 0.9vw;
    margin: 4rem 2vw 0 2vw;
    line-height: 3;
    color: #111;
    font-family: "ヒラギノ丸ゴシック Pro";
}

@media screen and (max-width: 1440px) {
    .evidence__text {
        margin: 3rem 0 0 2vw;
    }
}

@media screen and (max-width: 768px) {
    .evidence__text {
        font-size: 3.2vw;
        margin: 0 2.6vw 2rem 2.6vw;
        line-height: 2.5;
    }
}

@media screen and (max-width: 428px) {
    .evidence__text {
        margin: 2rem 2.6vw 2rem 2.6vw;
    }
}

.e__text {
    margin-top: 5.7rem;
}

@media screen and (max-width: 768px) {
    .e__text {
        margin-top: 4.7rem;
    }
}

@media screen and (max-width: 428px) {
    .e__text {
        margin-top: 2rem;
    }
}

.evidence__area {
    display: block;
    background: url(../img/performance/value-bg01.png) no-repeat;
    margin: 7rem 2vw 0;
    background-size: contain;
    padding: 4rem 2vw 10rem;
    background-position: 50% 80%;
}

@media screen and (max-width: 1600px) {
    .evidence__area {
        padding: 6rem 2vw 8rem;
    }
}

.e__area {
    padding: 4rem 2vw 6rem;
    background-position: 80% 50%;
}

@media screen and (max-width: 1600px) {
    .e__area {
        padding: 6rem 2vw 4rem;
    }
}

@media screen and (max-width: 1600px) {
    .evidence__area {
        margin-top: 3.5rem;
    }
}

@media screen and (max-width: 1440px) {
    .evidence__area {
        margin-top: 3.5rem;
    }
}

@media screen and (max-width: 1024px) {
    .evidence__area {
        margin-top: 3rem;
    }
}

@media screen and (max-width: 768px) {
    .evidence__area {
        background: url(../img/performance/evidence_bgsp.png) no-repeat;
        padding: 5.1rem 2vw 5.5rem;
        background-size: cover;
    }

    .e__area {
        display: none;
    }
}

@media screen and (max-width: 428px) {
    .evidence__area {
        margin-top: 2rem;
        padding: 1rem 2vw 2.4rem;
        background-size: contain;
    }

    .e__area {
        padding: 1rem 1vw 1.5rem;
    }
}

@media screen and (max-width: 376px) {
    .evidence__area {
        margin-top: 2rem;
        padding: 0.5rem 2vw 2.2rem;
        background-size: contain;
    }

    .e__area {
        padding: 0.5rem 2vw 2.3rem;
    }

    body.Android .e__area {
        background-size: contain;
    }
}

.evidence__box--title {
    max-width: 12vw;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 2rem;
}

@media screen and (max-width: 768px) {
    .evidence__box--title {
        display: none;
    }
}

.evidence__box--area {
    display: flex;
    align-items: center;
}

.evidence__box--area:not(:first-child) {
    margin-top: 4rem;
}

@media screen and (max-width: 1600px) {
    .evidence__box--area:not(:first-child) {
        margin-top: 1.5rem;
    }
}

@media screen and (max-width: 768px) {
    .e__area .evidence__box--area:not(:first-child) {
        margin-top: 1rem;
    }
}

.evidence__img--area {
    display: none;
}

@media screen and (max-width: 768px) {
    .evidence__img--area {
        display: block;
        padding: 0 2.5vw;
    }
}

/* performance
/*--------------------*/

.performance__sub {
    font-size: 0.9vw;
    margin-top: 6.2rem;
    line-height: 3.5;
    font-family: "ヒラギノ丸ゴシック Pro";
    text-align: center;
}

@media screen and (max-width: 768px) {
    .performance__sub {
        font-size: 3.2vw;
        margin-top: 7rem;
        line-height: 3;
        padding: 0 10vw;
        text-align: left;
    }
}

@media screen and (max-width: 428px) {
    .performance__sub {
        margin-top: 2rem;
        padding: 0 8vw;
        line-height: 2.5;
        letter-spacing: -0.07em;
    }
}

.performance__btn {
    text-align: center;
    margin-top: 10rem;
}

@media screen and (max-width: 1440px) {
    .performance__btn {
        margin-top: 6rem;
    }
}

@media screen and (max-width: 768px) {
    .performance__btn {
        text-align: center;
        margin-top: 6rem;
    }
}

@media screen and (max-width: 520px) {
    .performance__btn {
        margin-top: 4rem;
    }
}

.p__link {
    padding: 4.8rem 1.3vw 4.8rem 4.4vw;
    max-width: 27.77vw;
    width: 100%;
    border: #242424 solid 1px;
    border-radius: 10rem;
    background-color: #fff;
    font-size: 1.6vw;
    font-family: "Noto Serif JP", serif;
    letter-spacing: -0.05em;
    position: relative;
    transition: all 0.5s;
}

.p__link:hover {
    background-color: #242424;
}

.p__link a:hover {
    color: #fff;
}

.p__link a:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: auto;
    content: "";
    background-color: transparent;
}

@media screen and (max-width: 1600px) {
    .p__link {
        padding: 3rem 1.5vw 4rem 5vw;
    }
}

@media screen and (max-width: 1440px) {
    .p__link {
        padding: 3rem 1vw 3.5rem 4.5vw;
    }
}

@media screen and (max-width: 768px) {
    .p__link {
        padding: 4.5rem 6.4vw 4.5rem 10.1vw;
        max-width: 73vw;
        width: 100%;
        font-size: 3.4vw;
    }
}

@media screen and (max-width: 428px) {
    .p__link {
        padding: 2rem 6.4vw 2rem 10.1vw;
        margin-bottom: 2rem;
    }
}

.p__link:not(:first-child) {
    margin-left: 4.2vw;
}

@media screen and (max-width: 768px) {
    .p__link:not(:first-child) {
        margin: 4rem 0 0;
    }
}

@media screen and (max-width: 520px) {
    .p__link:not(:first-child) {
        margin: 1rem 0 0;
    }
}

.arrow {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 2px;
    margin: 16.3px 0;
    border-radius: 9999px;
    background-color: #000000;
    margin-left: 2vw;
}

.p__link a:hover .arrow {
    right: -1.5rem;
    background-color: #fff;
}

.p__link a:hover .arrow::before,
.p__link a:hover .arrow::after {
    background-color: #fff;
}

@media screen and (max-width: 1650px) {
    .arrow {
        width: 40px;
        height: 2px;
        top: 0.5rem;
    }
}

@media screen and (max-width: 1440px) {
    .arrow {
        width: 35px;
        margin: 8px 2rem;
        height: 1px;
        top: 0;
    }
}

@media screen and (max-width: 768px) {
    .arrow {
        width: 35px;
        height: 2px;
        margin: 0;
        top: -1rem;
        margin-left: 8.4vw;
    }
}

@media screen and (max-width: 428px) {
    .arrow {
        width: 20px;
        height: 1px;
        top: -0.5rem;
        margin-left: 10vw;
    }
}

.arrow::before,
.arrow::after {
    content: "";
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    width: 22px;
    height: 2px;
    border-radius: 9999px;
    background-color: #000000;
    transform-origin: calc(100% - 1px) 50%;
}

@media screen and (max-width: 1650px) {
    .arrow::before,
    .arrow::after {
        width: 15px;
        height: 2px;
    }
}

@media screen and (max-width: 1440px) {
    .arrow::before,
    .arrow::after {
        width: 12px;
        height: 1px;
    }
}

@media screen and (max-width: 768px) {
    .arrow::before,
    .arrow::after {
        content: "";
        position: absolute;
        top: calc(50% - 1px);
        right: 0;
        width: 20px;
        height: 2px;
        border-radius: 9999px;
        background-color: #000000;
        transform-origin: calc(100% - 1px) 50%;
    }
}

@media screen and (max-width: 428px) {
    .arrow::before,
    .arrow::after {
        width: 10px;
        height: 1px;
        content: "";
        position: absolute;
        top: calc(50% - 1px);
        right: 0;
        border-radius: 9999px;
        background-color: #000000;
        transform-origin: calc(100% - 1px) 50%;
    }
}

.arrow::before {
    transform: rotate(45deg);
}

.arrow::after {
    transform: rotate(-45deg);
}
.p__flow {
    margin-top: 12.8rem;
    position: relative;
}

@media screen and (max-width: 768px) {
    .p__flow {
        margin-top: 11rem;
    }
}

@media screen and (max-width: 428px) {
    .p__flow {
        margin-top: 8rem;
    }
}

.flow::after {
    content: "";
    background-image: url(../img/performance/performance__bg.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -26%;
    left: 0;
    display: inline-block;
    z-index: -2;
    max-width: 25vw;
    width: 100%;
    height: 67rem;
}

@media screen and (max-width: 768px) {
    .flow::after {
        top: -8%;
        left: 0;
    }
}