@media screen and (min-width:1025px) {
    body.is-ie .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table tbody .detail-list .text {
        padding: 15px 0 7px
    }
}

@media screen and (min-width:1025px) {
    body.is-ie .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table tbody .detail-list .head {
        padding: 15px 0 7px
    }
}

.Wrapper .Contents__wrapper .Contents .Rental:after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    background-size: 100% auto;
    background-repeat: no-repeat;
    margin-top: -8%;
    padding-top: 28.93333%;
    background-image: url(../img/material/rental_shape_sp.png)
}

@media only screen and (min-width:500px) {
    .Wrapper .Contents__wrapper .Contents .Rental:after {
        padding-top: 23%
    }
}

@media only screen and (min-width:500px) and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental:after {
        margin-top: 0;
        padding-top: 12.30342%;
        background-image: url(../img/material/rental_shape.png)
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner {
    width: 89.33333%;
    max-width: 500px;
    margin: 0 auto;
    margin-top: 42px
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner {
        width: 100%;
        max-width: 747px
    }
}

.Wrapper .Contents__wrapper .Contents .heading .text {
    margin-top: 10px;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 3.2vw;
    line-height: 1.75
}

@media screen and (min-width:500px) {
    .Wrapper .Contents__wrapper .Contents .heading .text {
        font-size: 1.6rem
    }
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .heading .text {
        font-size: 1.2rem
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental__member .detail {
    margin-top: 20px
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental__member .detail {
        margin-top: 31.5px
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental__price {
    margin-top: 50px
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental__price {
        margin-top: 60px
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental__price .detail {
    margin-top: 20px
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental__price .detail {
        margin-top: 31.5px
    }

    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental__price .detail+.detail {
        margin-top: 35px
    }
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental__price .detail table.row tbody {
        display: flex;
        justify-content: space-between
    }
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental__price .detail table.row tbody .detail-list {
        display: block;
        width: 186px
    }
}

@media screen and (max-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental__price .detail table.row tbody .detail-list+.detail-list {
        margin-top: 1px
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental__price .detail table.row tbody .detail-list .head {
    width: 29.85075%
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental__price .detail table.row tbody .detail-list .head {
        width: 100%
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental__price .detail table.row tbody .detail-list .text {
    width: 34.77612%
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental__price .detail table.row tbody .detail-list .text {
        width: 100%;
        margin-top: 1px
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_available {
    margin-top: 50px
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_available {
        margin-top: 60px
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_available .detail {
    margin-top: 20px
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_available .detail {
        margin-top: 31.5px
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_available .detail table.row tbody .detail-list+.detail-list {
    margin-top: 1px
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_available .detail table.row tbody .detail-list .head {
    width: 37.91045%
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_available .detail table.row tbody .detail-list .head {
        width: 308.5px
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_available .detail table.row tbody .detail-list .head+.head {
    width: 20.44776%
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_available .detail table.row tbody .detail-list .head+.head {
        width: 145px
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_available .detail table.row tbody .detail-list .text {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20.44776%
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_available .detail table.row tbody .detail-list .text {
        display: block;
        width: 145px
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_available .detail table.row tbody .detail-list .text.row-head {
    width: 37.91045%
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_available .detail table.row tbody .detail-list .text.row-head {
        width: 308.5px
    }
}

@media screen and (max-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_available .detail table.row tbody .detail-list .text.two-line {
        display: block;
        padding: 9px 0
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_locker {
    margin-top: 59px
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_locker .detail {
    margin-top: 21.5px
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_locker .detail {
        margin-top: 30px
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_locker .detail .row .detail-list .head {
    width: 37.91045%
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_locker .detail .row .detail-list .head {
        width: 186px
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_locker .detail .row .detail-list .head:nth-of-type(2) {
    width: 61.79104%
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_locker .detail .row .detail-list .head:nth-of-type(2) {
        width: 560px
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_locker .detail .row .detail-list .text {
    margin-top: 1px;
    width: 37.91045%
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_locker .detail .row .detail-list .text {
        width: 186px
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_locker .detail .row .detail-list .text:nth-of-type(2) {
    width: 61.79104%
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents.Rental_locker .detail .row .detail-list .text:nth-of-type(2) {
        width: 560px
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table.col tbody .detail-list {
    display: block
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table.col tbody .detail-list {
        display: flex;
        justify-content: space-between
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table.col tbody .detail-list+.detail-list {
    margin-top: 11px
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table.col tbody .detail-list+.detail-list {
        margin-top: 1px
    }
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table.col tbody .detail-list .head {
        width: 186px
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table.col tbody .detail-list .text {
    margin-top: 1px
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table.col tbody .detail-list .text {
        width: 560px;
        margin-top: 0
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table.row tbody .detail-list {
    display: flex;
    justify-content: space-between
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table tbody .detail-list {
    width: 100%;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 3.73333vw;
    text-align: center
}

@media screen and (min-width:500px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table tbody .detail-list {
        font-size: 1.86667rem
    }
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table tbody .detail-list {
        font-size: 1.8rem
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table tbody .detail-list .head {
    display: block;
    padding: 13px 0;
    background: #0d386b;
    color: #fff
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table tbody .detail-list .head {
        padding: 11px 0
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table tbody .detail-list .text {
    display: block;
    padding: 10px 0;
    background: #fff;
    line-height: 1.5
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table tbody .detail-list .text {
        padding: 11px 0;
        line-height: 1
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table tbody .detail-list .text .sub {
    font-size: 3.2vw
}

@media screen and (min-width:500px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table tbody .detail-list .text .sub {
        font-size: 1.6rem
    }
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table tbody .detail-list .text .sub {
        margin-left: 5px;
        font-size: 1.4rem
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail table tbody .detail-list .text .sub.star {
    margin-left: 5px
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail .attention {
    margin-top: 20px;
    font-size: 3.73333vw;
    font-family: fot-tsukuardgothic-std, sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1.71429
}

@media screen and (min-width:500px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail .attention {
        font-size: 1.86667rem
    }
}

@media screen and (min-width:1025px) {
    .Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail .attention {
        font-size: 1.4rem
    }
}

.Wrapper .Contents__wrapper .Contents .Rental .Rental__inner .Rental__contents .detail .attention span {
    color: #d32136
}

.cafe-menu {
    max-width: 100%;
    /* width: 800px; */
    margin: 20px auto;
    background-color: rgb(245, 244, 236);
    border: 1px solid rgb(245, 244, 236);
    padding: 20px;
}

.menu-section {
    display: flex;
    margin-bottom: 20px;
}

.menu-section>div {
    flex: 1;
}
.menu-section > div:nth-child(2) {
    flex: 0.4; /* 真ん中の列だけ幅を狭くする */
}
.menu-section {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start; /* これにより、子要素が上端に揃います */
}

.menu-item {
    display: flex;
    justify-content: flex-start;
    /* 左端から配置を始めます */
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 1.4rem
}
.menu-item {
    display: flex;
    align-items: center;
}

.menu-item img {
    width: 50px; /* アイコンとしての画像サイズ */
    height: 50px;
    margin-right: 10px; /* テキストとの間隔 */
}

.menu-item span:first-child {
    flex-grow: 1;
    /* メニュー名に利用可能な全スペースを使用させます */
    margin-right: 1em;
    /* メニュー名と価格の間に余白を設定します */
}

.menu-item .price {
    white-space: nowrap;
    /* 価格が改行されないようにします */
    width: 110px;
    /* 価格の幅を固定します */
    text-align: right;
    /* 価格を右寄せにします */
}


.menu-title {
    font-size: 24px;
    color: rgb(0, 125, 203);
    margin-bottom: 15px;
}

.price {
    font-weight: bold;
}

.image {
    display: flex;
    /* これにより子要素は横に並びます */
    align-items: center;
    /* 画像を垂直方向の中央に配置します */
    justify-content: center;
    /* 画像を水平方向の中央に配置します */
}

.image img {
    max-width: 100%;
    /* 画像の最大幅をコンテナの幅に合わせます */
    height: auto;
    /* 高さを自動調整してアスペクト比を維持します */
    object-fit: contain;
    /* 画像がコンテナに収まるようにします */
}

.image.scroll-in img {
    width: 150px;
    /* 画像の幅を固定します */
    height: 170px;
    /* 画像の高さを固定します */
    object-fit: contain;
    /* 画像がコンテナに収まるようにします */
}

/* 以下はスマホ向けの対応 */
@media only screen and (max-width: 768px) {
    .menu-section {
        flex-direction: column; /* メニューセクションを縦に並べ替えます */
    }

    .menu-section > div {
        flex: none; /* 子要素の幅の調整を解除します */
        width: 100%; /* 子要素を親要素の幅いっぱいに広げます */
        margin-bottom: 20px; /* 子要素同士の間隔を設定します */
    }

    .menu-item {
        font-size: 1.2rem; /* メニュー項目の文字サイズを調整します */
    }

    .menu-item .price {
        width: auto; /* 価格の幅の固定を解除します */
    }

    .image.scroll-in img {
        width: 100%; /* 画像の幅を親要素に合わせます */
        height: auto; /* 画像の高さを自動調整してアスペクト比を保持します */
        max-width: 100px; /* 画像の最大幅を設定します */
        margin: 0 auto; /* 画像を中央に配置します */
    }
}
