@charset "utf-8";

/* ---------- fv ---------- */

.fv {
    position: relative;
}

.fv_text {
    position: absolute;
    bottom: 4%;
    left: 6%;
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 2;
    letter-spacing: 0.1em;
    color: #fff;
    z-index: 1;
}

@media screen and (min-width: 768px) {
    .fv_text {
        bottom: 4%;
        left: 12%;
        font-size: 2rem;
    }
}

@media screen and (min-width: 1024px) {
    .fv_text {
        font-size: 2.6rem;
    }
}

@media screen and (min-width: 1440px) {
    .fv_text {
        font-size: 3.6rem;
    }
}

@media screen and (min-width: 1920px) {
    .fv_text {
        font-size: 4.8rem;
    }
}

/* ---------- news ---------- */

.news {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 24px;
    padding: 10% 5%;
    background-image: url(../img/bg_1.png);
    background-position: center;
    background-size: auto;
}

.news .headline {
    margin: 0 auto 0 0;
    font-weight: 700;
    line-height: 1;
}

.news .headline_main::after {
    content: none;
}

.news .headline_sub {
    margin: 5% 0 0 0;
    font-size: 0.7em;
    font-weight: 500;
}

.news_contentArea {
    width: 100%;
    padding-left: 5%;
}

.news_content:not(:first-child) {
    margin-top: 5%;
}

.news_content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
}

.news_date,
.news_title {
    display: block;
    font-weight: 600;
}

@media screen and (min-width: 768px) {
    .news {
        flex-direction: row;
        align-items: flex-start;
        gap: 48px;
        padding: 5% 10%;
    }

    .news .headline {
        margin: 0;
        margin-top: -0.1em;
        font-size: 1.6rem;
    }

    .news_contentArea {
        width: fit-content;
        padding: 0;
    }

    .news_content {
        flex-direction: row;
        gap: 24px;
    }
}

@media screen and (min-width: 1024px) {}

@media screen and (min-width: 1440px) {
    .news {
        gap: 72px;
    }

    .news .headline {
        font-size: 2rem;
    }

    .news_content {
        gap: 36px;
    }

    .news_date,
    .news_title {
        font-size: 1.2rem;
    }
}

@media screen and (min-width: 1920px) {}

/* ---------- about ---------- */

.about {
    position: relative;
}

.about .headline {
    position: absolute;
    top: 2%;
    left: 50%;
    transform: translate(-50%, 0);
}

.about_text {
    position: absolute;
    top: 12%;
    left: 55%;
    transform: translate(-50%, 0);
    width: 75%;
    font-weight: 500;
    line-height: 2;
    letter-spacing: 0.1em;
    color: #fff;
}

.about_text_highlight {
    margin: 5%;
}

.about_text_highlight span {
    display: block;
    font-size: 2.4em;
    font-weight: 900;
    line-height: 1.5;
}

.about_text_highlight span:nth-of-type(1) {
    color: #477dfa;
}

.about_text_highlight span:nth-of-type(2) {
    color: #f1110b;
}

.about_text_highlight span:nth-of-type(3) {
    color: #ffd803;
}

.about .button {
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translate(-50%, 0);
}

@media screen and (min-width: 768px) {
    .about .headline {
        top: 2%;
        left: 20%;
    }

    .about .headline_sub {
        text-align: right;
    }

    .about_text {
        top: 5%;
        left: 62%;
        width: 65%;
        line-height: 1;
    }

    .about_text_highlight {
        margin: 0 0 0 5%;
    }

    .about .button {
        bottom: 4%;
        left: 50%;
    }
}

@media screen and (min-width: 1024px) {
    .about .headline {
        top: 5%;
        left: 20%;
    }

    .about_text {
        top: 10%;
        left: 62%;
        width: 65%;
        line-height: 1.5;
    }

    .about_text_highlight {
        margin: 5% 0 5% 5%;
    }
}

@media screen and (min-width: 1440px) {
    .about .headline {
        top: 5%;
        left: 20%;
    }

    .about_text {
        top: 10%;
        left: 58%;
        width: 55%;
        font-size: 1.2rem;
        line-height: 2;
    }

    .about_text_highlight {
        margin: 2% 0 2% 5%;
    }

    .about_text_highlight span {
        font-size: 3.6em;
        font-weight: 900;
        line-height: 1.5;
    }

    .about .button {
        bottom: 4%;
        left: 50%;
        font-size: 1.2rem;
    }
}

@media screen and (min-width: 1920px) {
    .about_text {
        top: 10%;
        left: 55%;
        width: 50%;
        font-size: 1.4rem;
    }

    .about .button {
        bottom: 5%;
        left: 50%;
        font-size: 1.4rem;
    }
}

/* ---------- service ---------- */

.service {
    position: relative;
}

.service .headline {
    position: absolute;
    top: 12%;
    left: 50%;
    transform: translate(-50%, 0);
}

.service_text_1 {
    position: absolute;
    top: 22%;
    left: 50%;
    transform: translate(-50%, 0);
    display: block;
    width: 80%;
    text-align: center;
    font-family: "Zen Old Mincho", serif;
    font-size: 1.6rem;
    color: #fff;
}

.service_text_2 {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, 0);
    display: block;
    width: 80%;
    text-align: left;
    line-height: 2;
    color: #fff;
}

.service_word {
    color: #fff;
}

.service_word_1 {
    position: absolute;
    bottom: 38.5%;
    left: 20%;
}

.service_word_2 {
    position: absolute;
    bottom: 36.5%;
    left: 61%;
}

.service_word_3 {
    position: absolute;
    bottom: 23.5%;
    left: 20%;
}

.service_word_4 {
    position: absolute;
    bottom: 21.5%;
    left: 58%;
}

@media screen and (min-width: 768px) {
    .service .headline {
        position: absolute;
        top: 6%;
        left: 10%;
        transform: none;
    }

    .service_text_1 {
        position: absolute;
        top: 20%;
        left: 16%;
        transform: none;
        width: auto;
        text-align: initial;
        font-size: 1.2rem;
    }

    .service_text_2 {
        position: absolute;
        top: 30%;
        left: 16%;
        transform: none;
        width: 45%;
        font-size: 0.7rem;
        line-height: 2;
    }

    .service_word_1 {
        position: absolute;
        bottom: 25%;
        left: 14%;
    }

    .service_word_2 {
        position: absolute;
        bottom: 20%;
        left: 35%;
    }

    .service_word_3 {
        position: absolute;
        bottom: 25%;
        left: 57%;
    }

    .service_word_4 {
        position: absolute;
        bottom: 20%;
        left: 74%;
    }
}

@media screen and (min-width: 1024px) {
    .service_text_1 {
        position: absolute;
        top: 20%;
        left: 16%;
        font-size: 1.4rem;
    }

    .service_text_2 {
        position: absolute;
        top: 30%;
        left: 16%;
        font-size: 0.8rem;
    }

    .service_word_1 {
        position: absolute;
        bottom: 26%;
        left: 15%;
    }

    .service_word_2 {
        position: absolute;
        bottom: 21%;
        left: 36%;
    }

    .service_word_3 {
        position: absolute;
        bottom: 26%;
        left: 58%;
    }

    .service_word_4 {
        position: absolute;
        bottom: 21%;
        left: 75%;
    }
}

@media screen and (min-width: 1440px) {
    .service_text_1 {
        position: absolute;
        top: 20%;
        left: 16%;
        font-size: 1.8rem;
    }

    .service_text_2 {
        position: absolute;
        top: 30%;
        left: 16%;
        font-size: 1rem;
    }

    .service_word {
        font-size: 1.4rem;
    }

    .service_word_1 {
        position: absolute;
        bottom: 26%;
        left: 15%;
    }

    .service_word_2 {
        position: absolute;
        bottom: 21%;
        left: 36%;
    }

    .service_word_3 {
        position: absolute;
        bottom: 26%;
        left: 58%;
    }

    .service_word_4 {
        position: absolute;
        bottom: 21%;
        left: 75%;
    }
}

@media screen and (min-width: 1920px) {
    .service_text_1 {
        font-size: 2.4rem;
    }

    .service_text_2 {
        font-size: 1.2rem;
    }

    .service_word {
        font-size: 2rem;
    }
}

/* ---------- works ---------- */

.works {
    position: relative;
    padding: 15% 0;
    background-image: url(../img/bg_2.png);
}

.works .button {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, 0);
}

@media screen and (min-width: 768px) {
    .works {
        padding: 0;
        background-image: none;
    }

    .works .headline {
        position: absolute;
        top: 35%;
        left: 10%;
    }

    .works .button {
        position: absolute;
        top: 55%;
        left: 8%;
        transform: none;
    }
}

@media screen and (min-width: 1024px) {
    .works .headline {
        top: 35%;
        left: 10%;
    }

    .works .button {
        top: 55%;
        left: 9.5%;
    }
}

@media screen and (min-width: 1440px) {
    .works .headline {
        top: 35%;
        left: 10%;
    }

    .works .button {
        top: 50%;
        left: 9.5%;
        font-size: 1.2rem;
    }
}

@media screen and (min-width: 1920px) {
    .works .button {
        top: 50%;
        left: 11%;
    }
}

/* ---------- recruit ---------- */

.recruit {
    position: relative;
}

.recruit .headline {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0);
}

.recruit .button {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translate(-50%, 0);
}

.recruit_text {
    color: #fff;
}

.recruit_text_1 {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 90%;
    text-align: center;
    font-size: 1.4rem;
}

.recruit_text_2 {
    position: absolute;
    top: 72.5%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 90%;
    line-height: 1.5;
}

@media screen and (min-width: 768px) {
    .recruit .headline {
        position: absolute;
        top: 20%;
        left: 75%;
        transform: none;
    }

    .recruit .button {
        position: absolute;
        top: 58%;
        left: 74%;
        transform: none;
    }

    .recruit_text {
        color: #fff;
    }

    .recruit_text_1 {
        position: absolute;
        top: 20%;
        left: 20%;
        transform: none;
        width: auto;
        text-align: center;
        font-size: 1.2rem;
    }

    .recruit_text_2 {
        position: absolute;
        top: 40%;
        left: 20%;
        transform: none;
        width: 45%;
        font-size: 0.8rem;
    }
}

@media screen and (min-width: 1024px) {
    .recruit .headline {
        top: 25%;
        left: 75%;
    }

    .recruit .button {
        top: 60%;
        left: 75.75%;
    }

    .recruit_text_1 {
        top: 25%;
        left: 30%;
    }

    .recruit_text_2 {
        top: 40%;
        left: 30%;
        width: 35%;
    }
}

@media screen and (min-width: 1440px) {
    .recruit .headline {
        top: 30%;
        left: 75%;
    }

    .recruit .button {
        top: 60%;
        left: 76.5%;
        font-size: 1.2rem;
    }

    .recruit_text_1 {
        top: 30%;
        left: 30%;
        font-size: 1.6rem;
    }

    .recruit_text_2 {
        top: 45%;
        left: 30%;
        font-size: 1rem;
    }
}

@media screen and (min-width: 1920px) {
    .recruit .headline {
        top: 30%;
        left: 75%;
    }

    .recruit .button {
        top: 60%;
        left: 77.25%;
    }

    .recruit_text_1 {
        top: 30%;
        left: 30%;
        font-size: 2.2rem;
    }

    .recruit_text_2 {
        top: 45%;
        left: 30%;
        font-size: 1.2rem;
    }
}

/* ---------- フッター ---------- */

.footer {}

@media screen and (min-width: 768px) {
    .footer {
        background-size: cover;
    }
}

@media screen and (min-width: 1024px) {}

@media screen and (min-width: 1440px) {}

@media screen and (min-width: 1920px) {}

/* ----------  ---------- */



@media screen and (min-width: 768px) {}

@media screen and (min-width: 1024px) {}

@media screen and (min-width: 1440px) {}

@media screen and (min-width: 1920px) {}