@charset "UTF-8";

/*==========================
Article header
==========================*/
.article__header {
    margin-top: 58px;
    padding: 60px 6.6%;
    background: radial-gradient(103.71% 66.18% at 50% 50%, #FFF1DB 0%, #FFFBFB 0.01%, #FFF 64.41%, #FFFEFE 75.34%, #FFF1DB 97.19%);
    position: relative;
}

.article__header::before {
    content: "";
    position: absolute;
    background-image: url(../img/item1.svg);
    background-size: cover;
    width: 125px;
    height: 113px;
    left: 57px;
    top: -4px;
    transform: translateX(-50%);
}

.article__header::after {
    content: "";
    position: absolute;
    background-image: url(../img/item2.svg);
    background-size: cover;
    width: 93px;
    height: 125px;
    right: -38px;
    bottom: -40px;
    transform: translateX(-50%);
}

.header__container {
    margin-top: 17px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.header__txt {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.header__title {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.header__txt--en {
    color: #454545;
    font-family: "Sorts Mill Goudy";
    font-size: 1.8rem;
    font-weight: 400;
}

.header__txt--ja {
    font-family: "Noto Serif JP";
    font-size: 2.4rem;
    font-weight: 500;
}

.header__txt--main {
    font-size: 1.8rem;
    font-weight: 400;
}

.header__txt--sub {
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.65;
    text-align: left;
}

.header__img {
    margin-top: 29px;
    width: 257px;
    height: 227px;
}

/* Article pc */
@media screen and (min-width:769px) {
    .article__header {
        margin-top: 111px;
        padding: 94px 13.4%;
        background: radial-gradient(103.71% 66.18% at 50% 50%, #FFF1DB 0%, #FFFBFB 0.01%, #FFF 64.41%, #FFFEFE 75.34%, #FFF1DB 97.19%);
    }

    .article__header::before {
        width: 166px;
        left: 78px;
        top: -26px;
        transform: translateX(-50%);
    }

    .article__header::after {
        width: 147px;
        height: 147px;
        right: -65px;
        bottom: -22px;
    }

    .header__container {
        flex-direction: row;
        justify-content: space-between;
    }

    .header__txt {
        justify-content: center;
        align-items: center;
    }

    .header__txt--en {
        font-size: 2.4rem;
    }

    .header__txt--ja {
        font-size: 3.2rem;
    }

    .header__txt--main {
        font-size: 2.8rem;
    }

    .header__txt--sub {
        font-size: 1.8rem;
    }

    .header__img {
        margin-top: 0;
        margin-left: 63px;
        width: 291px;
        height: 257px;
    }
}

/*==========================
Problem
==========================*/
.section--problem {
    padding: 40px 10.6% 107px;
    text-align: center;
}

.problem__txt {
    font-size: 2rem;
    font-weight: 400;
}

.problem {
    margin-top: 37px;
    display: flex;
    flex-direction: column;
    gap: 87px;
}

.problem__item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.problem__item-img {
    position: absolute;
    z-index: 2;
    top: 101%;
    left: 0%;
    transform: translateY(-50%);
    width: 73px;
}

.problem__item-img img {
    width: 100%;
}

.problem__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.problem__item-txt {
    font-size: 1.8rem;
    font-weight: 400;
    text-align: center;
    position: relative;
    padding: 60px 20px;
    background-image: url('../img/service/cycle.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    max-width: 300px;
    width: 221px;
    height: 199px;
    line-height: 1.5;
    z-index: 1;
}

.problem__item:nth-of-type(3) .problem__item-txt {
    padding: 72px 20px;
}

/* Problem pc */
@media screen and (min-width:769px) {
    .section--problem {
        padding: 60px 14.2% 150px;
    }

    .problem__txt {
        font-size: 2.8rem;
    }

    .problem {
        margin-top: 32px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 134px;
    }

    .problem__content {
        all: unset;
    }

    .problem__item-img {
        position: absolute;
        z-index: 2;
        top: 101%;
        left: 0%;
        transform: translateY(-50%);
        width: 73px;
    }
}

/*==========================
Solution
==========================*/
.section--solution {
    position: relative;
    padding: 92px 10.6% 10px;
    background-color: #FFF5F3;
}

.section--solution::before {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    content: "";
    width: 100%;
    height: 40px;
    background-color: #fff;
    clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
}

.solution__txt {
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.5;
}

.solution__img-sp {
    margin-top: 32px;
}

.solution__img-pc {
    display: none;
}

.spBr {
    display: none;
}

/* Solution pc */
@media screen and (min-width:769px) {
    .section--solution {
        padding: 135px 11.1% 60px;
    }
    
    .section--solution::before {
        height: 73px;
    }

    .solution__txt {
        font-size: 2.8rem;
        text-align: center;
        margin: 0 auto;
        width: 616px;
    }
    
    .solution__img-sp {
        display: none;
    }
    
    .solution__img-pc {
        display: block;
        margin-top: 32px;
    }

    .spBr {
        display: block;
    }
    
}

/*==========================
Service
==========================*/
.section--service {
    padding: 40px 10.6%;
    background-color: #FBFBFB;
}

.service__title {
    text-align: center;
    font-family: "Noto Serif JP";
    font-size: 2.4rem;
    font-weight: 500;
}

.service__txt {
    margin-top: 21px;
}

.service__txt-medium {
    text-align: center;
    font-size: 1.8rem;
    font-weight: 500;
}

.service__txt-small {
    margin-top: 10px;
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1.5;
}

.service {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /*gap: 32px;*/
    margin-top: 21px;
    border-radius: 45px;
    border: 1px solid #FF8484;
    background: #FFF;
}

.service__item {
    padding: 25px 10px;
    /*border-radius: 45px;
    border: 1px solid #FF8484;
    background: #FFF;*/
    width: 100%;
    max-width: 300px;
    box-sizing: border-box;
}

/*.service__item:first-child {
    margin-top: 21px;
}*/

.service__item-txt {
    margin-top: 14px;
    font-size: 2rem;
    font-weight: 400;
}

.list__container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
    width: 100%;
    padding-left: 35px;
}

.service__item:nth-of-type(3) .list__container {
    padding-left: 64px;
}

.seo-list {
    padding-left: 64px;
}

.targeted-container .list__container {
    padding-left: 60px;
}

.targeted-container .seo-list {
    padding-left: 64px;
}

.list {
    list-style: none;
    margin-top: 10px;
    padding: 0;
    width: 100%;
}

.list__txt {
    position: relative;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.5;
    padding-left: 35px;
    text-align: left;
    word-break: break-word;
}

.list__txt::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    background-color: #E88CA2;
    border-radius: 50%;
}

/* Service pc */
@media screen and (min-width:769px) {
    .section--service {
        padding: 60px 13%;
    }
    
    .service__title {
        font-size: 2.8rem;
    }

    .service__txt {
        margin-top: 52px;
    }
    
    .service__txt-medium {
        font-size: 2.4rem;
    }
    
    .service__txt-small {
        text-align: center;
        font-size: 1.8rem;
    }

    .service {
        flex-direction: row;
        align-items: stretch;
        gap: 32px;
        margin-top: 32px;
    }

    .service__item {
        padding: 25px 10px;
        /*border-radius: 45px;
        border: 1px solid #FF8484;
        background: #FFF;*/
        width: 100%;
        max-width: 300px;
        box-sizing: border-box;
    }

    .service__item:first-child {
        margin-top: 0;
    }

    .list__txt {
        font-size: 1.8rem;
    }
    
}