@charset "UTF-8";
/* ========about=============== */

.topic__txt{
    color: var(--primary-red);
    text-align: center;
    font-size: 1.2rem;
    font-weight: 500;
    letter-spacing: 0.24rem;
}

.logo__aboutSp{
    padding: 0;
    margin-top: 24px;
}

.topic__about{
    padding-top: 22px;
}

.topic__txt__about{
    margin: 7px 0 4px;
}

.btn--about{
    margin: 40px auto 40px;
}

.logo__pc{
    display: none;
}

.about__txt{
    text-align: center;
    font-size: 1.6rem;
    line-height: 2.7;
    padding: 0 16px;
    margin: 40px 0 64px;
}

.red{
    color: var(--primary-red);
    font-weight: 700;
}

/* ========about=============== */

@media screen and (min-width:769px) {
    .logo__pc{
        display: block;
    }

    .logo__sp{
        display: none;
    }
    
    .topic__txt{
        font-size: 2rem;
        font-weight: 700;
        letter-spacing: 0.8rem;
    }

    .logo__aboutPc{
        padding: 0 75px;
        margin-top: 46px;
    }

    .topic__about{
        padding-top: 0px;
    }

    .topic__txt__about{
        margin-top: 16px;
        line-height: 1.5;
    }

    .btn--about{
        margin: 114px auto 70px;
    }

    .logo__sp{
        display: none;
    }

    .about__txt{
        margin-top: 64px;
        font-size: 2.4rem;
        line-height: 2.5;
    }

}

/* ========about pc=============== */

/* =======================
story
======================== */

.section--story{
    padding: 40px 16px;
    background-image: url(../images/bg__storySp.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

.topic__story{
    color: var(--primary-white);
    text-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
    font-family: "Klee One";
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.5;
}

.story__txt{
    margin-top: 34px;
    color: var(--primary-white);
    text-align: center;
    text-shadow: 0px 8px 8px rgba(0, 0, 0, 0.25);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2.2; 
}

.story__txt2, .story__txt3{
    margin-top: 32px;
}

.bg__story{
    width: 343px;
    height: 674px;
    padding-top: 16px;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.35);
}

/* ===story pc==========*/

@media screen and (min-width:769px) {
    .section--story{
        padding: 126px 0;
        background-image: url(../images/bg__storyPc.png);
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
    }
    
    .topic__story{
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        font-size: 4rem;
        font-weight: 600;
        line-height: 1.5;
        letter-spacing: 0.8rem;
    }   
    
    .story__txt{
        font-size: 2rem;
        font-weight: 500;
        line-height: 2.4;
        letter-spacing: 0.4rem;
        margin-top: 38px;
    }

    .bg__story{
        width: 1056px;
        height: 689px;
        padding: 34px 16px 31px;
        margin: 0 auto;
    }

    .story__txt2, .story__txt3{
        margin-top: 40px;
    }
}
/* =====story pc fin==== */

/* ==================
kodawari
===================== */

.section--kodawari{
    padding: 32px 4.2%;
}

.kodawari__content{
    margin-top: 24px;
}

.point__item{
    padding: 10px 16px 21px;
    background-color: var(--primary-white);
    border-radius: 10px;
}

.topic__kodawari{
    color: var(--primary-red);
    font-family: "Zen Antique Soft";
    font-size: 2.4rem;
    line-height: 1.5;
    letter-spacing: 2.2px;
}

.point__title1{
    font-size: 1.8rem;
    font-family: "Klee One";
    font-weight: 500;
    line-height: 1.5;
}

.img__point01{
    width: 55px;
    height: 61px;
    margin: -8px 8px 0 0;
    display: inline-block;
    vertical-align: middle;
}

/* .point1__sp{
    width: 310px;
    height: 260px;
} */

.point1__txt1{
    margin: 8px;
}

.point1__txt{
    font-size: 1.6rem;
    line-height: 2;
}

.point1__txt2, .point1__txt3{
    margin-top: 32px;
}

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

.point__title2{
    font-size: 1.8rem;
    font-family: "Klee One";
    font-weight: 500;
    line-height: 1.5;
}

.point2__txt1{
    margin: 8px;
}

.img__point02{
    width: 55px;
    height: 61px;
    margin: -8px 8px 0 0;
    display: inline-block;
    vertical-align: middle;
}

.point2__sp{
    width: 310px;
    height: 260px;
}

.point2__txt{
    font-size: 1.6rem;
    line-height: 2;
}

.point2__txt2, .point2__txt3{
    margin-top: 32px;
}

.underline{
    text-decoration: underline;
    text-decoration-thickness: 0.5em;
    text-decoration-color: var(--primary-blue,0.50);
    text-underline-offset: -0.2em;
    text-decoration-skip-ink: none;
}

/* ====kodawari pc===== */

@media screen and (min-width:769px) {
    .section--kodawari{
        padding: 64px 9.7%;
    }
    
    .topic__kodawari{
        font-size: 4.8rem;
        letter-spacing: 4.8px;
    }

    .img__point01{
        width: 83px;
        height: 94px;
        margin: -8px 20px 0 0;
        display: inline-block;
        vertical-align: middle;
    }

    .point__title1{
        font-size: 3.2rem;
    }

    .point__item{
        padding: 14px 54px 32px;
        background-color: var(--primary-white);
        border-radius: 10px;
    }

    .point01{
        display: flex;
        max-width: 1048px;
        gap: 0 35px;
    }

    .point__title2{
        font-size: 3.2rem;
        font-family: "Klee One";
        font-weight: 500;
        line-height: 1.5;
    }

    .point1__pc{
        max-width: 52.7%;
    }

    .point1__txt{
        font-size: 2rem;
        line-height: 2.2;
    }

    .point1__txt1{
        margin: 0px;
    }

    .point__item:last-of-type{
        margin-top: 48px;
    }

    .point01{
        display: flex;
        max-width: 1048px;
        gap: 0 35px;
    }

    .point1__pc{
        max-width: 550px;
        max-height: 462px;
        margin: 16px;
    }

    .point1__txt{
        font-size: 2rem;
        line-height: 2.2;
    }

    .point01{
        display: flex;
        max-width: 1048px;
        gap: 0 35px;
    }

    .point1__txt{
        font-size: 2rem;
        line-height: 2.2;
    }

    .point1__txt1{
        margin: 0px;
    }

    .point__item:last-of-type{
        margin-top: 48px;
    }

    .img__point02{
        width: 83px;
        height: 94px;
        margin: -8px 20px 0 0;
        display: inline-block;
        vertical-align: middle;
    }

    .point02{
        display: flex;
        max-width: 1048px;
        gap: 0 35px;
    }

    .point02{
        display: flex;
        max-width: 1048px;
        gap: 0 35px;
    }

    .point2__pc{
        width: 530px;
        height: 469px;
        margin: 16px;
    }

    .point2__txt{
        font-size: 2rem;
        line-height: 2.2;
    }

    .point02{
        display: flex;
        max-width: 1048px;
        gap: 0 35px;
    }

    .point2__txt{
        font-size: 2rem;
        line-height: 2.2;
    }

    .point2__txt1{
        margin: 0px;
    }

    .point2__txt2{
        margin: 0px;
    }

}

@media screen and (max-width:1025px) {
    .point01{
        display: block;
    }

    .point1__pc{
        margin: 16px auto;
    }

    .point02{
        display: block;
    }

    .point2__pc{
        margin: 16px auto;
    }


}