#caferestaurant-title-wrap {
    width          : 50%;
    display        : flex;
    flex-direction : row;
    align-items    : center;
    justify-content: space-around;
    margin         : 5% auto;
}

#caferestaurant-title-wrap img {
    width: 10em;
}

#caferestaurant-title-wrap div {
    display            : flex;
    flex-direction     : column;
    align-items        : center;
    justify-content    : center;
    background-image   : url(./img/kanban-bg-forrestauranttitle.png);
    background-repeat  : no-repeat;
    background-size    : 100%;
    background-position: center;
}

#caferestaurant-title-wrap #bird {
    margin-right: auto;
    width       : 2em;
}

#caferestaurant-title-wrap #lemon {
    margin-left: auto;
    width      : 2em;
}

#caferestaurant-title-wrap div p {
    font-family: "maru-maru-gothic-alr-stdn", sans-serif;
    font-weight: 600;
}

#caferestaurant-title-wrap div #title-text {
    font-size: 3em;
}

#introduction {
    display        : flex;
    flex-direction : row;
    justify-content: center;
    z-index        : 100;
    margin         : 0 auto;
    width          : 70%;
}

#introduction img {
    z-index: 100;
}

#ricebagsveggie {
    margin-left: 40%;
    height     : 20vh;
}

#bluebg {
    background-color: var(--lightblue);
    height          : 20vh;
    width           : 70%;
    position        : absolute;
    right           : 0;
    z-index         : 0;
    margin-top      : 3%;
}

#intro-text-wrap {
    z-index   : 100;
    position  : absolute;
    left      : 30%;
    margin-top: 2%;
}

#intro-text-wrap p {
    font-family   : "maru-maru-gothic-alr-stdn", sans-serif;
    font-weight   : 600;
    margin-bottom : 2em;
    letter-spacing: .1em;
    margin-left   : -3em;
}

#intro-text-wrap img {
    width      : 2em;
    margin-left: -6em;
}




#guides {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    height        : 40vh;
}

#guidebtns-wrap {
    display        : flex;
    margin-top     : 15%;
    align-items    : center;
    justify-content: space-around;
    width          : 60%;
}

.guide-btn {
    text-decoration: none;
}

.guide-btn div {
    display      : flex;
    align-items  : center;
    color        : black;
    line-height  : 3em;
    border       : none;
    border-radius: 1.5rem;
    width        : max-content;
    padding      : 0 1em;
    font-family  : "maru-maru-gothic-alr-stdn", sans-serif;
    font-weight  : 600;
}

#btn-restaurant {
    background-color: var(--yellow);
}

#btn-cafe {
    background-color: var(--lightblue);
}

#btn-dogcafe {
    background-color: var(--red);
    padding         : .5em 0;
}

#btn-dogcafe .btn-wrap p {
    font-family: "maru-maru-gothic-alr-stdn", sans-serif;
    font-weight: 600;
    line-height: 1em;
}

#btn-dogcafe .btn-wrap #small {
    font-size: .8em;
}

.guide-btn img {
    height      : 1.5em;
    margin-right: .5em;
}

#btn-dogcafe img {
    margin-left: .7em;
}

.btn-wrap {
    display       : flex;
    flex-direction: column;

}

#guidefordogowneruser {
    color      : black;
    font-family: "maru-maru-gothic-alr-stdn", sans-serif;
    font-weight: 600;
    margin-top : 2em;
    align-items: center;
}


/* restaurantcafe-section-wrap */

.restaurantcafe-section-wrap {
    display       : flex;
    flex-direction: column;
    align-items   : center;
}

.index-wrap {
    display        : flex;
    align-items    : center;
    justify-content: end;
    margin-bottom  : 5%;
    width          : 60%;
}

.index-wrap p {
    position      : absolute;
    font-family   : "maru-maru-gothic-alr-stdn", sans-serif;
    font-weight   : 600;
    letter-spacing: .2em;
}

.circle {
    width        : 60px;
    height       : 60px;
    border-radius: 50%;
}

#aboutrestaurant .circle {
    background: var(--yellow);
}

.restaurantcafe-main-wrap {
    display       : flex;
    flex-direction: column;
    align-items   : center;
}

.detail-wrap p,
h3,
a,
.message-wrap p {
    font-family: "maru-maru-gothic-alr-stdn", sans-serif;
    font-weight: 600;
}

.detail-wrap {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    margin-bottom : 5%;
    margin-top    : 5%;
}

.detail-wrap h3 {
    background-image   : url(./img/yellowunderline.png);
    background-size    : 100% auto;
    width              : 100%;
    background-repeat  : no-repeat;
    background-position: bottom;
    font-size          : 1.5em;
    padding-left       : 1em;
    margin-bottom      : 2%;
}



.title-wrap {
    margin-right  : 40%;
    display       : flex;
    flex-direction: column;
    align-items   : center;

}

.title-bgline {
    color              : white;
    font-family        : "Chivo", sans-serif;
    font-optical-sizing: auto;
    font-weight        : 900;
    font-style         : normal;
    font-size          : 3.5em;
    margin             : 0;
    padding            : 0 .5em;
    letter-spacing     : .03em;
    line-height        : 1em;
}

#restaurantcafe-pizza .title-bgline {
    background-color: var(--yellow);
}


.title-wrap img {
    width        : 50%;
    margin-bottom: 5%;
}

.main-img {
    width    : 70%;
    max-width: 1600px;
}

.message-wrap {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    margin-bottom : 3em;
    width         : 60%;
    line-height   : 2;
}

.message-wrap p {
    font-size: 1.2em;
}


/* kodawari wrap */
.kodawari-wrap {
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
}

.kodawari-wrap .wavy-beige-top {
    width: 100%;

}

#korawari-content-wrap {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    background-color: var(--whitebeige);
    margin-top      : -2%;
}

#kodawari-title {
    display        : flex;
    flex-direction : row;
    align-items    : center;
    justify-content: space-around;
    width          : 400px;
    height         : 6em;
    margin         : 5% 0;
}

#kodawari-title #pizza,
#meal {
    height: 3em;
}

#kodawari-title #pizza {
    margin-bottom: auto;
}

#kodawari-title #meal {
    margin-top: auto;
}

.title-text-wrap {
    display       : flex;
    flex-direction: column;
    align-items   : center;
}

.title-text-wrap h3 {
    font-size: 1.5em;
}

.title-text-wrap img {
    height    : 10px;
    margin-top: .5em;
}


.kodawari-item-wrap {
    display        : flex;
    flex-direction : row;
    align-items    : start;
    justify-content: space-around;
    margin         : 5% 0;
    width          : 70%;
}

#imgright {
    flex-direction: row-reverse;
}

.kodawari-item-wrap img {
    width: 40%;
}

.kodawari-item {
    width: 40%;
}

.kodawari-item h4,
p {
    font-family: "maru-maru-gothic-alr-stdn", sans-serif;
    font-weight: 600;
}

.kodawari-item h4 {
    padding      : .5em 0;
    border-bottom: solid 2px black;
    font-weight  : bold;
    position     : relative;
    margin-bottom: 1em;
}

.kodawari-item h4:after {
    content      : '';
    border-bottom: solid 2px black;
    width        : 100%;
    position     : absolute;
    bottom       : -.3em;
    left         : 0;
}



/* pizza menu btn */
#pizzakodawari-wrap .guide-btn div {
    display         : flex;
    align-items     : center;
    color           : white;
    line-height     : 3em;
    border          : none;
    border-radius   : 1.5rem;
    width           : max-content;
    padding         : 0 2em;
    font-family     : "maru-maru-gothic-alr-stdn", sans-serif;
    font-weight     : 600;
    text-decoration : none;
    background-color: var(--red);
    margin-top      : 10%;
}

#btn-onigiri {
    background-color: var(--younggreen);
    margin-top      : 30%;
    color           : white;
}

.icon-endsection {
    height: 4em;
    margin: 10% 0;
}

#pizza-end {
    transform: rotate(180deg);
}

/* onigiri */
#restaurantcafe-onigiri {
    align-items: center;
}

#restaurantcafe-onigiri .title-bgline {
    background-color: var(--younggreen);
    font-family     : "Zen Antique", serif;
    font-weight     : 600;
    font-style      : normal;
    padding         : .1em .5em;
    letter-spacing  : .01em;
    line-height     : 1em;
}

#onigiri-dessert {
    width: 30%;
}

#onigiri-withdessert {
    width      : 15%;
    margin-left: 30%;
}

.detail-wrap {
    display       : flex;
    flex-direction: column;
    align-items   : center;
    margin-bottom : 5%;
    margin-top    : 5%;
}

#onigiri-teikyobi {
    width        : max-content;
    font-size    : 1.5em;
    padding-right: 1em;
}


/* cafe */
#cafekodawari-wrap {
    margin-top: 10%;
}

#aboutcafe .circle {
    background-color: var(--lightblue);
}

#cafe-teikyobi {
    width        : max-content;
    padding-right: 1em;
}

#restaurantcafe-cafe .title-bgline {
    background-color: var(--lightblue);
    font-family     : "Zen Antique", serif;
    font-weight     : 600;
    font-style      : normal;
    padding         : .1em .5em;
    letter-spacing  : .01em;
    line-height     : 1em;
}


/* dogcafe */

#aboutdogcafe .circle {
    background-color: var(--red);
}


#restaurantcafe-dogcafe .title-bgline {
    background-color: var(--red);
    font-family     : "maru-maru-gothic-alr-stdn", sans-serif;
    font-weight     : 600;
    padding         : .1em .5em;
    letter-spacing  : .01em;
    line-height     : 1em;
}

#restaurantcafe-dogcafe .title-bgline span {

    font-family        : "Chivo", sans-serif;
    font-optical-sizing: auto;
    font-weight        : 900;
    font-style         : normal;
}



@media screen and (max-width:1300px) {
    #caferestaurant-title-wrap {
        width: 80%;
    }

    .index-wrap {
        width: 100%;
    }

    #ricebagsveggie {
        margin-left: 60%;
    }

    #guidebtns-wrap {
        width: 90%;
    }

    #onigiri-dessert {
        width: 50%;
    }

    #onigiri-withdessert {
        width: 25%;
    }
}

@media screen and (max-width:1000px) {
    #caferestaurant-title-wrap {
        width: 90%;
    }

    #caferestaurant-title-wrap img {
        width: 7em;
    }

    #intro-text-wrap {
        position: relative;
        margin  : 0 auto;
        left    : 0;
    }

    #intro-text-wrap p {
        margin: 1em 0;
    }

    #intro-text-wrap img {
        margin-left: -3em;
    }

    #introduction {
        flex-direction: column;
        margin        : 0 auto;
        width         : 80%;
    }

    #ricebagsveggie {
        margin: 0 auto;
        height: auto;
        width : 60%;
    }
}

@media screen and (max-width:700px) {
    #caferestaurant-title-wrap div #title-text {
        font-size: 2.5em;
    }

    #guides {
        height: fit-content;
    }

    #guidefordogowneruser {
        margin-bottom: 15%;
    }

    #guidebtns-wrap {
        flex-direction: column;
    }

    .index-wrap {
        margin: 10% 0;
    }

    .guide-btn {
        margin: 1em 0;
    }

    .kodawari-item-wrap,
    #imgright {
        display       : flex;
        flex-direction: column;
        align-items   : center;
        margin        : 0;
        width         : 90%;
        margin-bottom : 10%;
    }

    .message-wrap {

        width: 70%;
    }

    .kodawari-item-wrap img {
        width: 70%;
    }

    .kodawari-item {
        width : 80%;
        margin: 10% 0;
    }

    .title-wrap {
        margin-left : -20%;
        margin-right: 0;
    }

    .title-wrap img {
        margin-bottom: .5em;
    }

    .title-bgline {
        font-size: 3em;
    }
}

@media screen and (max-width:600px) {
    #caferestaurant-title-wrap img {
        width: 5em;
    }

    .message-wrap p {
        font-size: 1em;
        margin   : 10% 0;
    }
}

@media screen and (max-width:500px) {
    #caferestaurant-title-wrap div #title-text {
        font-size: 2em;
    }

    #caferestaurant-title-wrap img {
        width: 4em;
    }

    #title-onigiri div,
    #title-dogcafe div {
        font-size: 2.3em
    }

    #guidefordogowneruser {
        margin-bottom: 30vh;
    }

    #roundsubtitle-pizza {
        height: 1.5em;
        width : auto;
    }

    #restaurantcafe-pizza {
        margin-bottom: 10vh;
    }

    .icon-endsection {
        margin-top   : 20vh;
        margin-bottom: 20vh;
    }
}

@media screen and (max-width:400px) {
    #caferestaurant-title-wrap {
        width        : 100%;
        margin-bottom: 10%;
    }

    .index-wrap {
        margin-bottom: 10vh;
    }
}