@charset "utf-8";

/*========================
header
========================*/
.header__topic {
    text-shadow: none;
}

.mainvisual_about_sp {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.mainvisual_about_pc {
    display: none;
}

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

    .mainvisual_about_pc {
        display: block;
        width: 100%;
        height: 500px;
        object-fit: cover;
    }
}/* pc 769px */

/*========================
about
========================*/
.section--about {
    padding: 60px 30px;
    max-width: 1440px;
}

.sub__topic {
    color: var(--primary-green);
    font-family: Montserrat;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.8px;
}

.mainCaption__txt {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1.6px;
    margin-top: 60px;
}

.mainCaptionImg01 {
    width: 60vw;
    height: 45vw;
    margin-top: 30px;
    object-fit: cover;
}

.concept {
    text-align: right;
}

.content__txt {
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.75px;
    margin-top: 30px;
    text-align: left;
}

.mainCaptionImg02 {
    width: 50vw;
    height: 70vw;
    margin-top: 30px;
    object-fit: cover;
}

.btn__about {
    display: block;
    width: 115px;
    height: 34px;
    padding: 9px 29px;
    border-radius: 50px;
    border: 1px solid;
    margin-top: 60px;
    text-align: left;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1.2px;
    position: relative;
}

.btn__about::after {
    display: block;
    content: '';
    width: 12px;
    height: 11px;
    background-image: url(../images/arrow_next.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    left: 70%;
    transform: translateY(-90%);
}

/* about pc */
@media screen and (min-width:769px) {
    .section--about {
        padding: 60px 180px;
        max-width: 1440px;
        margin: 0 auto;
    }

    .sub__topic {
        font-size: 3.2rem;
        letter-spacing: 1.6px;
    }

    .mainCaption {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mainCaption__txt {
        font-size: 3.6rem;
    }

    .mainCaptionImg01 {
        width: 35vw;
        height: 25vw;
        max-width: 500px;
        max-height: 350px;
        object-fit: cover;
    }

    .concept {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row-reverse;
        margin-top: 60px;
        gap: 30px;
    }

    .concept .content__txt {
        font-size: 2.4rem;
        line-height: 1.8;
        letter-spacing: 1.2px;
    }

    .mainCaptionImg02 {
        width: 30vw;
        max-width: 380px;
        height: 35vw;
        max-height: 500px;
        object-fit: cover;
    }

    .concept__content .btn__about {
        display: flex;
    }

    .btn__about {
        display: none;
    }

    .btn__about {
        width: 230px;
        height: 60px;
        font-size: 2.4rem;
        padding: 18px 67px;
    }

    .btn__about::after {
        width: 25px;
        height: 23px;
        top: 25px;
        transform: translateY(-25%);
    }
}/* pc 769px */

/*========================
point
========================*/
.section--point {
    padding: 60px 30px;
}

.point__item {
    display: flex;
    flex-direction: column;
    margin-top: 60px;
}

.pointImg {
    display: block;
    width: 100%;
    max-width: 450px;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

.point__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.point__number {
    color: var(--primary-green);
    text-align: center;
    font-family: Montserrat;
    font-size: 3.2rem;
    font-weight: 400;
    line-height: normal;
}

.point__name {
    color: var(--primary-green);
    text-align: center;
    font-family: "Noto Sans JP";
    font-size: 2rem;
    font-weight: 400;
    line-height: normal;
}

.point__item .content__txt {
    margin-top: 10px;
}

/* point pc */
@media screen and (min-width:769px) {
    .section--point {
        padding: 60px 180px;
        max-width: 1440px;
        margin: 0 auto;
    }

    .point {
        max-width: 1440px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }

    .point__item {
        width: 325px;
        height: 528px;
    }

    .pointImg {
        width: 325px;
        height: auto;
    }

    .point__number {
        font-size: 3.6rem;
    }

    .point__name {
        font-size: 2.4rem;
    }

    .point__txt .content__txt {
        font-size: 1.6rem;
    }
}/* pc 769px */

/*========================
best for
========================*/
.section--bestfor {
    display: flex;
    padding: 60px 30px;
    flex-direction: column;
    align-items: flex-start;
}

.topic__txt {
    font-family: "Noto Sans JP";
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.7px;
    margin-top: 10px;
}

.bestfor__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 30px;
}

.bestfoe__title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bestfor_icon {
    width: 25px;
    height: 25px;
}

.bestfor__name {
    font-family: "Noto Sans JP";
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.8px;
}

.bestfor__txt {
    display: flex;
    flex-direction: column;
    padding-left: 45px;
    margin-top: 10px;
}

.item__txt {
    font-family: "Noto Sans JP";
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.7px;
}

/* bestfor pc */
@media screen and (min-width:769px) {
    .section--bestfor {
        padding: 60px 180px 180px 180px;
        max-width: 1440px;
        margin: 0 auto;
    }

    .topic__txt {
        font-size: 2.4rem;
    }

    .bestfor__item {
        margin-top: 60px;
    }

    .bestfor_icon {
        width: 45px;
        height: 45px;
    }

    .bestfor__name {
        font-size: 2.4rem;
    }

    .bestfor__txt {
        flex-direction: row;
        padding-left: 0;
        gap: 20px;
    }

    .item__txt {
        font-size: 2rem;
        letter-spacing: 1px;
    }
}/* pc 769px */

/*==========================
fadeIn
==========================*/
.fadeIn {
    transform: translate(0, 50px);
    opacity: 0;
    transition: 0.8s;
}

.fadeIn.animated {
    transform: translate(0, 0);
    opacity: 1;
}