/* ---------- Colors ----------*/
:root {
    --black: #2F3233;
    --white: #FFFFFF;
    --blue: #2861A3;
    --blue-hover: #3F75B3;
    --light-blue: #18A3FF;
    --green: #00B2BB;
}

/* ---------- Effects ----------*/
:root {
    --dropshadow: rgba(40,97,163,.3) 0 0 10px;
}

/* ---------- Fonts ----------*/
/* Site General */
* {
    font-size: 1.6rem;
    line-height: 175%;
    color: var(--black);
}
h1, h2, h3, p, ul, li, a {
    margin: 0;
    padding: 0;
}

.text__bold {
    font-weight: 700;
}
.text__blue {
    color: var(--blue);
}

/* Content General */
h2.title {
    font-family: "Oxanium", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-size: 4.0rem;
    line-height: 100%;
    letter-spacing: 0;
    color: var(--blue);
    margin: 0 0 29px;/*後ほど*/
}
p.subtitle {
    font-size: 2.4rem;
    line-height: 150%;
    letter-spacing: .01em;
    margin: 0;
    margin: 0 0 48px;/*後ほど*/
}

/* About Us */
#aboutus * {
    text-align: center;
}
#aboutus p.text,
#aboutus p.text span {
    font-size: 1.8rem;
    line-height: 200%;
    letter-spacing: 0;
}
@media screen and (max-width: 768px) {
    #aboutus p.text {
        text-align: left;
    }
}

/* Cards */
h3.card__title {
    font-size: 2.4rem;
    line-height: 150%;
    margin-bottom: 28px;/*後ほど*/
}

/* Education */
#education h2.title,
#education p.subtitle,
#education p.text {
    color: var(--white);
}
#education p.text {
    margin-bottom: 28px;
}
#education h3.card__title {
    text-align: center;
}

/* Flow */
#flow h3.card__title {
    margin-bottom: 32px;
}
#flow .card__list .card:nth-of-type(1) h3 {
    color: var(--green);
}
#flow .card__list .card:nth-of-type(3) h3 {
    color: var(--light-blue);
}
#flow .card__list .card:nth-of-type(5) h3 {
    font-size: 4.0rem;
    line-height: 160%;
    color: var(--white);
}
#flow .card__list .card:nth-of-type(5) p {
    color: var(--white);
}

/* Welfare */
#welfare * {
    text-align: center;
}
#welfare p.card__subtitle {
    font-size: 2.0rem;
    line-height: 100%;
    font-weight: 700;
    margin-bottom: 28px;/*後ほど*/
}
#welfare h3.card__title,
#welfare h3.card__title * {
    font-size: 2.8rem;
    line-height: 150%;
    color: var(--blue);
    margin: 0;
}
#welfare h3.card__title span.text__small {
    font-size: 1.8rem;
    font-weight: 700;
}

/* Footer */
p.copyright {
    font-size: 1.4rem;
    line-height: 100%;
    text-align: right;
}
@media  screen and (max-width: 768px) {
    p.copyright {
        text-align: left;
    } 
}

/* ---------- General ----------*/
#MouseStalker {
    display: none;
}
a:hover {
    cursor: pointer;
}
.container {
    padding-left: calc((100svw - 1280px)/2);
    padding-right: calc((100svw - 1280px)/2);
}
@media screen and (max-width: 1360px) {
    .container {
        padding-left: 40px;
        padding-right: 40px;
    }
}
@media screen and (max-width: 576px) {
    .container {
        padding-left: 3svw;
        padding-right: 3svw;
    }
}

/* ---------- br ---------- */
#aboutus .br__custom {
    display: block;
}
@media screen and (max-width: 768px) {
    #aboutus .br__custom {
        display: none;
    }
}

#flow .br__custom {
    display: none;
}
@media screen and (max-width: 992px) {
    #flow .br__custom {
        display: block
    }
}

/* ---------- Header ---------- */
header {
    width: 100%;
    border: none;
    background-color: rgba(0,0,0,0);
    position: fixed;
    top: 0;
    left: 0;
    padding: 15px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
header:hover {
    cursor: default;
    opacity: 1;
}

.header__logo-company {
    width: auto;
    height: 44px;
    object-fit: contain;
}

.header__link {
    background: var(--blue);
    color: var(--white);
    font-weight: 700;
    padding: 16px 20px;
    transition: all ease-in-out .2s;
    white-space: nowrap;
    display: inline-block;
    text-align: center;
}
.header__link::after {
    content: "";
    background-image: url(../images/recruit-engineer/external_link_white.png);
    background-repeat: no-repeat;
    display: inline-block;
    width: 16px;
    height: 14px;
    background-size: contain;
    margin-left: 8px;
}
.header__link:hover {
    cursor: pointer;
    background: var(--blue-hover);
}
@media screen and (max-width: 768px) {
    .header__logo-company {
        height: 32px;
    }
    .header__link {
        font-size: 1.4rem;
        padding: 12px 20px;
    }
}
@media screen and (max-width: 576px) {
    .header__logo-company {
        height: 28px;
    }
    .header__link {
        font-size: 1.2rem;
        padding: 8px 12px;
    }
    .header__link:after {
        width: 12px;
        height: 10px;
        margin-left: 4px;
    }
    header {
        padding-left: 2svw;
        padding-right: 2svw;
    }
}
@media screen and (max-width: 400px) {
    header {
        gap: 24px;
    }
    .header__wrapper {
        flex-direction: column;
        justify-content: flex-start;
        gap: 2px;
    }
    .header__wrapper a,
    .header__wrapper img {
        align-self: flex-start;
    }
    .header__logo-company {
        height: 20px;
    }
}

/* ---------- KV ---------- */
.kv__wrapper {
    width: 100svw;
    height: 100svh;
    background-image: url(../images/recruit-engineer/kv.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right bottom;
}

.kv__text {
    height: 50svh;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 12px;
}
.kv__text-small,
.kv__text-large {
    margin: 0;
    color: var(--blue);
    align-self: flex-start;
    padding: 0px 20px;
    background: rgba(255,255,255,.9);
}
.kv__text-small {
    font-size: 4vmin;
    font-weight: 700;
}
.kv__text-large {
    font-size: 5vmin;
    font-weight: 700;
}
@media screen and (min-width: 769px) {
    @media screen and (max-height: 600px) {
        .kv__text {
            height: 100svh;
            justify-content: center;
        }
    }
}

@media screen and (max-width: 768px) {
    .kv__wrapper {
        background-image: url(../images/recruit-engineer/kv_sp.jpg);
    }
    .kv__text {
        justify-content: center;
    }
    @media screen and (max-height: 880px) {
        .kv__text {
        justify-content: flex-end;
        }
    }
    @media screen and (max-height: 600px) {
        .kv__text {
            height: 100svh;
            justify-content: center;
        }
    }
}
@media screen and (max-width: 576px) {
    .kv__wrapper {
        height: 80svh;
        background-image: url(../images/recruit-engineer/kv_sp.jpg);
    }
    .kv__text-small {
        font-size: 6vmin;
    }
    .kv__text-large {
        font-size: 7vmin;
    }
    @media  screen and (max-height: 768px) {
        .kv__wrapper {
            height: 100svh;
        }
        .kv__text {
            height: 45svh;
            justify-content: flex-end;
        }
    }
    @media  screen and (max-height: 660px) {
        .kv__text {
            height: 100svh;
            justify-content: center;
        }
    }
}

/* --------- Cards ---------- */
/* General */
.card__list {
    display: flex;
    justify-content: space-between;
}
.card {
    box-shadow: var(--dropshadow);
}
/* Education */
#education .card {
    width: calc((100% - 28px*2)/3);
    padding: 28px 20px;
    border-radius: 20px;
    background-color: rgba(255,255,255,.85);
    box-shadow: var(--dropshadow);
}
#education .card__icon {
    width: auto;
    height: 100px;
    display: block;
    margin: 0 auto 40px;
}
@media screen and (max-width: 992px) {
    #education .card__list {
        flex-direction: column;
        gap: 28px;
    }
    #education .card {
        width: 100%;
    }
}
/* Flow */
#flow .card__list {
    flex-direction: column;
    align-items: center;
    gap: 0;
}
#flow .card {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    border-radius: 20px;
    padding: 36px;
    background-color: var(--white);
}
#flow .card__img {
    width: 30svw;
    height: auto;
    border-radius: 10px;
}
#flow .card__list .card:nth-of-type(1) {
    border: solid 2px var(--green);
}
#flow .card__list .card:nth-of-type(3) {
    border: solid 2px var(--light-blue);
}
#flow .card__list .card:nth-of-type(5) {
    background-color: var(--blue);
    color: var(--white);
}
#flow .card__list .card__line:nth-of-type(2) {
    width: 8px;
    height: 28px;
    background: linear-gradient(var(--green), var(--light-blue));
}
#flow .card__list .card__line:nth-of-type(4) {
    width: 8px;
    height: 28px;
    background: linear-gradient(var(--light-blue), var(--blue));
}
@media screen and (max-width: 768px) {
    #flow .card {
        flex-direction: column;
        padding: 36px 20px;
    }
    #flow .card__img {
        width: 100%;
    }
}
/* Welfare */
#welfare .card__list {
    gap: 28px;
}
#welfare .card {
    width: calc((100% - 28px*3)/4);
    border: solid 4px var(--blue);
    border-radius: 20px;
    padding: 32px 20px;
    background-color: var(--white);
}
#welfare .card__content-wrapper{
    height: 100%;
    display: flex;
    flex-direction: column;
}
#welfare .card__img {
    width: 100%;
    height: 100%;
    max-height: 124px;
    object-fit: contain;
    margin: 0 0 28px;
}
#welfare .card__title-wrapper {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
@media screen and (max-width: 992px) {
    #welfare .card__list {
        flex-wrap: wrap;
    }
    #welfare .card {
        width: calc((100% - 28px)/2);
        border: solid 4px var(--blue);
        border-radius: 20px;
        padding: 32px 20px;
    }
}
@media screen and (max-width: 768px) {
    #welfare .card__list {
        flex-wrap: nowrap;
        flex-direction: column;
    }
    #welfare .card {
        width: 100%;
    }
}
/* News */
#news .card__list {
    margin-bottom: 12px;
    justify-content: flex-start;
    gap: 28px;
}
#news .card {
    width: calc((100% - 56px)/3);
    padding: 16px 16px 24px;
    border-radius: 20px;
    background-color: var(--white);
    transition: all ease-in-out .2s;
}
#news .card:hover,
#news .card:hover * {
    cursor: pointer;
}
#news .card:hover {
    opacity: .8;
}
#news .card__img {
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    margin: 0 0 12px;
}
#news .card__title {
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
@media screen and (max-width: 768px) {
    #news .card__list {
        flex-direction: column;
        justify-content: center;
        gap: 28px;
    }
    #news .card {
        width: 100%;
    }
}

/* ---------- Content ---------- */
/* About Us */
#aboutus {
    margin: 120px 0;
}
/* Education */
#education {
    margin: 120px 0;
}
#education .content__wrapper {
    background-image: url("../images/recruit-engineer/education_bg.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-right: calc(50% - 50svw);
    padding-left: 40px;
    padding-right: calc((100svw - 1280px)/2);
    padding-top: 80px;
    padding-bottom: 80px;
    border-radius: 60px 0 0 60px;
}
@media screen and (max-width: 1360px) {
    #education .content__wrapper {
        padding-right: 40px;
    }
}
@media screen and (max-width: 576px) {
    #education {
        background-image: url("../images/recruit-engineer/education_bg.jpg");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        padding-top: 80px;
        padding-bottom: 80px;
    }
    #education .content__wrapper {
        background-image: none;
        margin: 0;
        padding: 0;
    }
}
/* Flow */
#flow {
    margin: 120px 0;
}

/* Welfare */
#welfare {
    margin: 120px 0;
}

/* News */
#news {
    margin: 120px 0;
}
.seeall__link {
    color: var(--blue);
    border-bottom: solid 1px var(--blue);
    margin: 12px 0 0;
    transition: all ease-in-out .2s;
}
.seeall__link::after {
    content: "";
    background-image: url("../images/recruit-engineer/external_link_blue.png");
    background-repeat: no-repeat;
    display: inline-block;
    width: 16px;
    height: 14px;
    background-size: contain;
    margin-left: 8px;
}
.seeall__link:hover {
    opacity: .7;
}

/* Contact */
#contact {
    margin: 120px 0 0;
    padding: 180px 0;
    background-image: url("../images/recruit-engineer/contact_bg.jpg");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
}
#contact .container {
    text-align: center;
}
.contact__link {
    width: 30%;
    background: var(--blue);
    color: var(--white);
    font-weight: 700;
    padding: 16px 20px;
    transition: all ease-in-out .2s;
    white-space: nowrap;
    display: inline-block;
    text-align: center;
}
.contact__link::after {
    content: "";
    background-image: url("../images/recruit-engineer/external_link_white.png");
    background-repeat: no-repeat;
    display: inline-block;
    width: 16px;
    height: 14px;
    background-size: contain;
    margin-left: 8px;
}
.contact__link:hover {
    cursor: pointer;
    background: var(--blue-hover);
}
@media screen and (max-width: 768px) {
    .contact__link {
        width: 50%;
    }
}
@media screen and (max-width: 576px) {
    #contact {
        margin: 100px 0 0;
        padding: 170px 0;
        background-image: url("../images/recruit-engineer/contact_bg_sp.jpg");
        background-position: center center;
    }
    .contact__link {
        width: 100%;
    }
}

/* Footer */
footer {
    --grid-size: none;
    --grid-strength: none;
    --grid-dash: ;
    --grid-gap: none;
    --grid-color: none;
    --paper-color: none;
    background-color: none;
    background-size: none;
    background-image: none;
    background-color: var(--blue);
    padding-top: 60px;
    padding-bottom: 30px;
}
footer * {
    color: var(--white);
}
.footer__wrapper {
    display: flex;
    justify-content: space-between;
    gap: 72px;
}

.footer__logo-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
}
.footer__logo-company {
    width: auto;
    height: 44px;
    object-fit: contain;
}

ul.footer__link li {
    text-align: right;
    margin-bottom: 16px;
}
ul.footer__link li a {
    font-weight: 700;
}
ul.footer__link li a::after {
    content: "";
    background-image: url(../images/recruit-engineer/external_link_white.png);
    background-repeat: no-repeat;
    display: inline-block;
    width: 16px;
    height: 14px;
    background-size: contain;
    margin-left: 8px;
}
@media screen and (max-width: 768px) {
    .footer__wrapper {
        flex-direction: column;
        gap: 28px;
    }
    .footer__logo-company {
        height: 32px;
    }
    ul.footer__link li {
        text-align: left;
    }
    p.copyright {
        margin-top: 40px;
    }
}
@media screen and (max-width: 576px) {
    .footer__logo-company {
        height: 28px;
    }
}
@media screen and (max-width: 450px) {
    .footer__logo-company {
        width: 100%;
        height: auto;
    }
}