@charset "utf-8";
/* ==============================
Article header
=============================== */
.logo__pc {
    display: none;
}

/* Article header pc */
@media screen and (min-width: 769px) {
    .logo__sp {
        display: none;
    }

    .logo__pc {
        display: inline;
    }
}

/* 760px pc */

/* ==============================
read
=============================== */
.section--read {
    padding: 36px 0 48px 0;
}

.topicUp {
    font-size: 3.2rem;
}

.topicUp::after {
    content: '';
    display: block;
    width: 248px;
    height: 1px;
    background-color: var(--main-black);
    margin: 0 auto;
    margin-top: 10px;
}

.topicDown {
    color: #FFF;
    background-color: var(--main-blue);
    width: 195px;
    height: 34px;
    padding: 5px 22px;
    margin: 16px auto 0;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
}

.mainCaption {
    width: var(--contentWidth);
    margin: 27px auto 0;
    font-size: 1.6rem;
    line-height: 1.3;
}

.mainCaption__txt {
    margin-top: 21px;
}

/* read pc */
@media screen and (min-width: 769px) {
    .topicUp {
        text-align: center;
        font-size: 3.2rem;
    }

    .section--read {
        display: flex;
        padding: 0 var(--contentPadding);
        margin: 80px auto;
        justify-content: center;
        align-items: center;
        gap: 73px;
    }

    .topic--read {
        padding: 50px 80px;
    }

    .mainCaption {
        margin: 0;
        font-size: 2rem;
    }

    .mainCaption__txt {
        margin-top: 0;
    }

    .mainCaption__txt:last-of-type {
        margin-top: 24px;
    }
}

/* pc 769px */

/* ==============================
reason
=============================== */
.section--reason {
    background-color: var(--main-lightBlue);
    padding: 36px var(--contentPadding) 48px var(--contentPadding);
}

.topic--reason {
    position: relative;
    z-index: 1;
}

.topic--reason::before {
    content: 'REASON';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    font-size: 7.2rem;
    color: rgba(255, 255, 255, 0.54);
    font-weight: 700;
    z-index: -1;
}

.reason__list {
    margin-bottom: -32px;
    width: 100%;
}

.reason__list:first-of-type {
    margin-top: 56px;
}

.listIcon {
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.reason__txt {
    display: grid;
    background-color: var(--main-white);
    width: 343px;
    max-width: 100%;
    margin: 0 auto;
    border-radius: 8px;
    padding: 80px 40px 30px 40px;
    transform: translateY(-70px)
}

.reasonUp {
    text-align: center;
    font-size: 1.6rem;
    line-height: normal;
    line-height: 1;
}

.reasonDown {
    text-align: center;
    font-size: 3.2rem;
    line-height: 2;
}

/* reason pc */
@media screen and (min-width: 769px) {
    .reason {
        display: flex;
        justify-content: center;
        gap: 48px;
        margin-top: 56px;
    }

    .reason__list:first-of-type {
        margin-top: 0;
    }

    .reason__list {
        width: 28%;
    }

    .btn--reason {
        margin: 16px auto;
    }

    .topic--reason::before {
        font-size: 12rem;
    }
}

/* 769px pc */

/* ==============================
service
=============================== */
.section--service {
    padding: 36px var(--contentPadding) 48px var(--contentPadding);
}

.topic--service {
    position: relative;
    z-index: 1;
}

.topic--service::before {
    content: 'SERVICE';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -55%);
    font-size: 7.2rem;
    color: rgba(212, 232, 254, 0.45);
    font-weight: 700;
    z-index: -1;
}

.buhinSp {
    margin-top: 16px;
}

.buhinPc {
    display: none;
}

.serviceTxt {
    font-size: 1.6rem;
    margin-top: 24px;
}

/* service pc */
@media screen and (min-width: 769px) {
    .buhinSp {
        display: none;
    }

    .buhinPc {
        display: inline;
        min-width: 390px;
        max-width: 670px;
        height: auto;
        width: 100%;
        z-index: 1;
        padding: 0 24px;
    }

    .topic--service {
        transform: translate(-39%, 416%);
    }

    .topic--service::before {
        content: 'SERVICE';
        position: absolute;
        top: 0%;
        left: 20%;
        transform: translate(43%, -100%);
        font-size: 15rem;
        }

    .service {
        display: flex;
        justify-content: space-around;
    }

    .serviceTxt {
        font-size: 2rem;
        margin-top: 160px;
        padding: 56px 16px;
    }
}