.main {
    width: 100%;
    max-width: 192rem;
    font-family: "Zen Maru Gothic", sans-serif;
    background-color: #F9EDF0;
}
._inner {
    width: 110rem;
    margin: 0 auto;
}

.flow__title,
.schedule__title,
.food__title {
    margin: 0 auto 6rem;
    width: fit-content;
}

.flow__title img,
.schedule__title img,
.food__title img {
    width: auto;
    height: 8.9rem;
}

.hero {
    padding-top: 4.8rem;
}

.hero__img {
    position: relative;
    display: block;
    width: 110rem;
    height: 45.1rem;
    border-radius: 4rem;
    overflow: hidden;
}

.hero__title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #3A3A3A;
    line-height:calc(42 /28);
    letter-spacing: calc(2.8 /10 * 1rem);
}

.hero__title-box {
    position: relative;
    text-align: center;
    justify-content: center;
    background-color: #F9EDF0;
    width: 57.3rem;
    height: 12.4rem;
    border-radius: 4rem;
    margin: -9rem auto 0;
    padding: 3.9rem;
    z-index: 2;
}

.breadcrumbs__list {
    display: flex;
    margin-bottom: 3.9rem;
}

.breadcrumbs__item {
    font-size: 2rem;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    line-height: calc(30/20);
    color: #707070;
}

.breadcrumbs__item a{
    color: #707070;
}

.breadcrumbs__item a::after {
    content: "\003e";
    padding-right: 1rem;
    margin-left: 1rem;
}

.flow {
    padding: 0 0 10rem;
}

.flow__box,
.flow__img {
    width: 107.1rem;
    height: 106.6rem;
}

.schedule {
    background-color: #F6E9CE;
    padding: 15rem 0;
}

.schedule__img {
    width: 110rem;
    height: auto;
    margin:  8rem auto;
}

.schedule__container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5rem 1rem;
    width: 100%;
}

.schedule__content{
    flex-basis: 100%;
    width: 100%;
}

.schedule__box{
    display: flex;
    align-items: center;
    gap: 0;
    justify-content: space-between;
}

.schedule__month {
    display: flex;
    align-items: center;
    font-size: 3rem;
    width: 15rem;
    line-height: 1;
    font-weight: 400;
    vertical-align: bottom;
    text-align: center;
}


.schedule__month span {
    font-size: 15rem;
    font-weight: 500;
}
.schedule__month--october span,
.schedule__month--november span,
.schedule__month--december span {
    letter-spacing: calc(-10 /10 * 1rem);
}

.schedule__list {
    align-content: center;
    font-size: 1.3rem;
    line-height: calc(20/13);
    list-style: disc;
    padding-left: 1.5rem;
    width: 11rem;
}

.schedule__item {
    margin-bottom: 0.5rem;
}

.schedule__item:last-child {
    margin-bottom: 0;
}

.schedule__month--april,
.schedule__month--may,
.schedule__month--march {
    color: #cd5696;
}

.schedule__month--june,
.schedule__month--july,
.schedule__month--august {
    color: 	#81add4;
}

.schedule__month--september,
.schedule__month--october,
.schedule__month--november {
    color: #ea601c;
}

.schedule__month--december,
.schedule__month--january,
.schedule__month--february {
    color: 	#48a442;
}


.food {
    padding: 0;
    margin-bottom: 14.6rem;
}

.food__btns {
    display: flex;
    gap: 5.8rem;
    width: fit-content;
    margin: 0 auto;
}

.food__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.2rem;
    font-weight: 800;
    width: 52rem;
    height: 20rem;
    line-height: calc(40/32);
    letter-spacing: calc(3.2 /10 * 1rem);
    border-radius: 4rem;
    color: #fff;
}

.food__btn.food__btn--pink {
    background-color: #D86597;
}

.food__btn.food__btn--orange {
    background-color: #E28973;
}

@media screen and (max-width:699.98px) {
    .main {
        width: 37.5rem;
    }

    .flow__title,
    .gallery__title {
        margin: 0 auto 1.7rem;
    }

    .food__title {
        margin: 0 auto 3.9rem;
    }

    .flow_title img,
    .schedule__title img,
    .food__title img {
        width: auto;
        height: 8.9rem;
    }

    ._inner {
        width: 100%;
    }

    .hero {
        padding: 0;
    }

    .hero__img {
        width: 37.5rem;
        height: 23.4rem;
        border-radius: 0;
    }

    .hero__img img {
        object-position: center right;
    }

    .hero__title-box {
        width: 33.6rem;
        height: 8.9rem;
        margin-top: -3rem;
        padding: 2.2rem;
    }

    .hero__title {
        font-size: 2.8rem;
        line-height:calc(41 /28);
        letter-spacing: calc(2.8 /10 * 1rem);
    }

    .breadcrumbs__list {
        width: 34.9rem;
        margin: 0 auto;
    }

    .flow {
        padding: 2rem 0 3rem;
    }

    .flow__text {
        font-size: 2rem;
        font-weight: 500;
        line-height: calc(40/20);
        letter-spacing: calc(2 / 10 * 1rem);
        width: 32.1rem;
        margin: 1rem auto 1rem 2rem;
        color: #D86597;
    }

    .flow__box {
        width: 34.5rem;
        margin: 0 auto;
        overflow: auto;
    }
    
    .schedule {
        padding: 4.8rem 0 1.7rem;
        margin: 0;
    }

    .schedule__img {
        width:32.9rem;
        height: 5.5rem;
        margin: 3.2rem auto;
    }

    .schedule__container {
        grid-template-columns: 1fr;
        gap: 4rem;
        width: 35rem;
        margin: 0 auto;
    }
    
    .schedule__month {
        width: 7.5rem;
        font-size: 1.5rem;
        justify-content: right;
    }

    .schedule__month span {
        font-size: 7.7rem;
        margin-right: 0.5rem;
    }

    .schedule__content {
        justify-content: start;
    }
    
    .schedule__box {
        gap: 1rem;
    }

    .schedule__content {
        width: 100%;
        margin: 0;
    }

    .schedule__list {
        width: 26rem;
        font-size: 1.9rem;
        line-height: calc(20/19);
    }

    .food {
        padding: 2.1rem 0 3.3rem;
        margin: 0 0 2.9rem;
    }

    .food__btns {
        flex-direction: column;
        gap: 5rem;
    }

    .food__btn {
        width: 32.3rem;
        height: 12.4rem;
        font-size: 2.4rem;
    }
    

}