@charset "UTF-8";
/* ===============
common
================== */
:root{
    --primary-white: #fdfdfd;
    --primary-beige: #fdfbe2;
    --primary-brown: #5b4721;
    --primary-blue: #c7fffd;
    --primary-pink: #ffdddd;
    --primary-yellow: #fff694;
    --contentPadding: 2.6%;
    --contentPadding__sp: 14%;
    --contentPadding__pc: 3.4%;
    --contentPadding__pctxt: 15%;
}

span{
    font-family: "Quicksand";
    font-weight: 500;   
}

.header__topic--sub,
.nav__topic--sub{
    font-family: "Kiwi Maru";
    font-weight: 400;
}
/* ===============
main
================== */
/* flow */
.section--flow{
    padding: 0 var(--contentPadding);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mainCaption{
    max-width: 355px;
}

.topic--flow{
    margin-top: 50px;
}

.hoken__contain{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0 10px;
}

.hoken__title{
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.6;
}

.kaigo{
    margin-top: 30px;
}

.kaigo__contain{
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0 10px;
    margin-top: 20px;
}

.youkaigo,
.yousien{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.kaigo__list{
    max-width: 110px;
    padding: 15px 0;
    background-color: var(--primary-pink);
    border-radius: 30px;
}

.listone{
    padding: 15px 10px;
}

.kaigo__title{
    text-align: center;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 2;
}

.kaigo__txt{
    text-align: center;
    font-size: 1rem;
    line-height: 1.4;
}

.flow__img{
    width: 1px;
}

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

.iryou__list{
    max-width: 110px;
    padding: 14px 0;
    margin-top: 20px;
    background-color: var(--primary-blue);
    border-radius: 30px;
}

.iryou__txt{
    text-align: center;
    font-size: 1rem;
    line-height: 1.4;
}

.iryou__txt:last-child{
    margin-top: 5px;
}

.flow__contain{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.flow__txt{
    width: 100%;
    padding: 10px 0;
    background-color: var(--primary-beige);
    border-radius: 50px;
    text-align: center;
    font-size: 1.5rem;
    line-height: 2;
}
/* flowlist */
.flow__list{
    max-width: 355px;
}

.flow__item{
    margin-top: 30px;
    display: flex;
    align-items: center;
    gap: 0 15px;
    font-size: 1.5rem;
    line-height: 2;
}

.flow__item img{
    width: 40px;
    transform: rotate(-20deg);
}

/* cost */
.section--cost{
    margin-top: 100px;
    padding: 0 var(--contentPadding);
}

.cost__contain{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.episode{
    max-width: 355px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
    padding: 20px;
    border: solid 1px var(--primary-brown);
    border-radius: 50px;
}

.episode img{
    max-width: 200px;
    margin-bottom: 10px;
    transform: scale(-1, 1);
}

.episode__title{
    text-align: center;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.6;
}

.episode__sub{
    margin-top: 10px;
    text-align: center;
    font-size: 1.8rem;
    line-height: 1.6;
}

.episode__txt{
    margin-top: 10px;
    font-size: 1.5rem;
    line-height: 1.6;
}

.episode__item{
    max-width: 355px;
    margin-top: 30px;
    padding: 20px;
    background-color: var(--primary-beige);
    border-radius: 50px;

}

.attention{
    margin-top: 20px;
    font-size: 1.5rem;
    line-height: 1.6;
    padding: 0 20px;
    max-width: 355px;
}

/* pc */
@media screen and (min-width: 769px){
/* ===============
main
================== */
/* flow */
.section--flow{
    padding: 0 var(--contentPadding__pc);
}

.mainCaption{
    max-width: 1000px;
}

.hoken__contain{
    gap: 0 50px;
}

.hoken__title{
    font-size: 3rem;
}

.kaigo{
    margin-top: 100px;
}

.kaigo__contain{
    gap: 0 50px;
    margin-top: 30px;
}

.kaigo__list{
    max-width: 300px;
    padding: 70px 40px;
    background-color: var(--primary-pink);
    border-radius: 30px;
}

.listone{
    padding: 70px 60px;
}

.kaigo__title{
    font-size: 2.8rem;
    line-height: 2.5;
}

.kaigo__txt{
    font-size: 2rem;
}

.flow__img{
    width: 2px;
}

.iryou{
    margin-top: 100px;
}

.iryou__list{
    max-width: 300px;
    padding: 70px 40px;
    margin-top: 30px;
}

.iryou__txt{
    font-size: 2rem;
}

.iryou__txt:last-child{
    margin-top: 15px;
}

.flow__txt{
    width: 100%;
    padding: 20px 0;
    font-size: 2.5rem;
    line-height: 2.5;
}

.br__sp{
    display: none;
}
/* flowlist */
.flow__list{
    max-width: 1000px;
    margin-top: 60px;
}

.flow__item{
    margin-top: 25px;
    gap: 0 20px;
    font-size: 2.5rem;
}

.flow__item img{
    width: 70px;
}

/* cost */
.section--cost{
    margin-top: 200px;
}

.episode{
    max-width: 450px;
    margin-top: 0;
}

.episode img{
    max-width: 300px;
}

.episode__title{
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.8;
}

.episode__sub{
    font-size: 2.3rem;
    line-height: 1.8;
}

.episode__txt{
    font-size: 2rem;
    line-height: 1.8;
}

.cost__contain{
    margin-top: 100px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0 100px;
}

.episode__item{
    margin-top: 30px;
    padding: 20px;
    background-color: var(--primary-beige);
    border-radius: 50px;
    max-width: 450px;
}

.attention{
    margin-top: 30px;
    font-size: 1.5rem;
    line-height: 2;
    max-width: 450px;
}

}