@charset "UTF-8";

/*==========================
header
==========================*/
.header {
    position: relative;
    background-color: var(--primary-lightpink);
    isolation: isolate;
}

.header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../images/background.webp);
    background-size: cover;
    background-position: center;
    mix-blend-mode: multiply;
    background-repeat: no-repeat;
    opacity: 0.02;
    pointer-events: none;
    z-index: 0;
}

/*==========================
Article header
==========================*/

.section-how {
    position: relative;
    padding: 60px 7% 70.6%;
    background-color: var(--primary-lightpink);
    isolation: isolate; 
    clip-path: url(#clipBottomWave);
    -webkit-clip-path: url(#clipBottomWave);
}

.section-how::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url(../images/background.webp);
    background-size: cover;
    background-position: center;
    mix-blend-mode: multiply;
    background-repeat: no-repeat;
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}

.how__illustration {
    display: block;
    width: 88.2vw;
    aspect-ratio: 274/125;
    height: auto;
    margin: 0 auto;
    animation: fuwafuwa 2.5s ease-in-out infinite alternate;
    transition: 1.5s ease-in-out;
}

@keyframes fuwafuwa {
0% {
    transform:translate(0, -1px);
}
100% {
    transform:translate(0, 3px);
}
}

.title--how {
    color: var(--primary-black);
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: 2.4px;
    margin-top: 40px;
}

.pink {
    color: #E5797B;
}

.how__txt {
    color: var(--primary-black);
    font-size: 1.6rem;
    line-height: 2.2;
    letter-spacing: 2.2px;
    margin-top: 24px;
}

.how__imgsp {
    position: relative;
    display: block;
    margin: 40px auto 0;
    z-index: 20;
}

.how__imgbox {
    display: none;
}

/* Article header pc */
@media screen and (min-width: 479px){

    .section-how {
        padding: 60px 5.8vw 57%;
    }

    .title--how br:first-of-type{
        display: none;
    }
}

@media screen and (min-width: 622px){
    .section-how {
        padding: 60px 5.8vw 50%;
    }

    .title--how br {
       display: none;
    }
}

@media screen and (min-width: 769px){
    
    .title--how {
        color: var(--primary-black);
        font-size: clamp(2.4rem,5.3vw,3.5rem);
        font-weight: 500;
        line-height: 1.8;
        letter-spacing: 2.4px;
        margin-top: 40px;
        padding: 0 60px;
    }

    .how__txt {
        padding: 0 60px;
    }
}

@media screen and (min-width: 999px){
    .section-how {
        padding: 120px 0 23%;
    }

    .how__content {
        display: flex;
        justify-content: center;
        gap: 30px;
        max-width: 1280px;
        padding: 0 60px;
        margin: 0 auto;
        align-items: center;
    }

    .how__illustration {
        width: clamp(400px,38vw,548px);
        height: auto;
    }

    .title--how br:first-of-type{
        display: block;
    }

    .title--how br {
        display: block;
    }

    .title--how {
        font-size: 3.2rem;
        letter-spacing: 3.2px;
        margin-top: 0;
    }

    .how__txt {
        font-size: 1.8rem;
        letter-spacing: 2.7px;
        max-width: 1280px;
        padding: 0 60px;
        margin: 50px auto 0;
    }

    .how__imgsp {
        display: none;
    }

    .how__imgbox {
        display: flex;
        justify-content: space-between;
        max-width: 1280px;
        padding: 0 60px;
        margin: 50px auto 0;
    }

    .how__img {
        position: relative;
        width: clamp(280px,24.3vw,350px);
        height: auto;
        z-index: 10;
    }
}
/* pc 769px */

/*==========================
profile
==========================*/

.section-profile {
    margin-top: -150px;
    padding: 60px 7% 60px;
}

.profile__img {
    width: clamp(300px,83.7vw,400px);
    height: auto;
    display: block;
    margin: 0 auto;
}

.profile__title {
    color: var(--primary-black);
    font-size: 2.4rem;
    font-weight: 500;
    letter-spacing: 1.68px;
    text-align: center;
}

.profile__name {
    color: var(--primary-black);
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: 1.68px;
    text-align: center;
    margin-top: 20px;
}

.profile__txt {
    color: var(--primary-black);
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 2.5;
    margin: 0 auto;
    margin-top: 38px;
}


/* profile header pc */

@media screen and (min-width: 999px){
    .section-profile {
        padding: 80px 0 150px;
        margin-top: -35px;
    }

    .profile__content {
        display: flex;
        justify-content: center;
        gap: 40px;
        align-items: center;
        max-width: 1280px;
        padding: 0 60px;
        margin: 0 auto;
    }

    .profile__title {
        text-align: left;
    }

    .profile__name {
        text-align: left;
    }
}