@charset "utf-8";
/* CSS Document */

img{
    width: 100%;
}
.sp-only{
    display: none;
}
body{
    background: #17233c;
    color: #FFF;
}

.main{
    width: 88.69048vw;
    margin: 0 auto;
    position: relative;
}
.main .main-img{
    display: block;
    position: inherit;
    opacity: 1;
}
h1{
    margin: 0 auto clamp(30px, 21.379px + 2.299vw, 60px);
    text-align: center;
    font-size: clamp(25px, 20.690px + 1.149vw, 40px);
    line-height: 1.6;
}
h1 span{
    font-size: clamp(18px, 14.552px + 0.92vw, 30px);
    font-weight: 500;
}

.sec2{
    border: none;
    padding-top: 0;
    padding-bottom: 0;
}

.sec2 h2{
    font-size: clamp(25px, 22.126px + 0.766vw, 35px);
    text-align: center;
    margin: 0 0 clamp(30px, 21.379px + 2.299vw, 60px);
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap;
}
.sec2 h2::before, .sec2 h2::after {
    content: "";
    display: inline-block;
    background-color: #FFF; /* 横線の色 */
    height: 1.5px; /* 横線の高さ */
    width: 100%; /* 横線の長さ */
}
.sec2 h2::before {
    margin-right: clamp(40px, 34.253px + 1.533vw, 60px); /* 文字との余白 */
}
.sec2 h2::after {
    margin-left: clamp(40px, 34.253px + 1.533vw, 60px); /* 文字との余白 */
}
.sec2 .drink-menu .drink h3{
    font-size: clamp(20px, 17.126px + 0.766vw, 30px);
}
.sec2 h4{
    margin: 0;
    font-size: clamp(16px, 13.414px + 0.69vw, 25px)
}
.sec2 h4 span{
    font-size: clamp(12px, 11.138px + 0.23vw, 15px);
}
.mt-30{
    margin-top: clamp(20px, 17.126px + 0.766vw, 30px)!important;
}
.mb-30{
    margin-bottom: clamp(20px, 17.126px + 0.766vw, 30px) !important;
}
.mt-60{
    margin-top: clamp(30px, 21.379px + 2.299vw, 60px) !important;
}
.mb-60{
    margin-bottom: clamp(30px, 21.379px + 2.299vw, 60px) !important;
}
.sec2 a{
    color: #fff;
    text-decoration: none;
}
.sec2 a:hover{
    text-decoration: underline;
}
.sec2 .dinner-time, .sec2 .lunch-time{
    font-size: clamp(18px, 14.552px + 0.92vw, 30px);
    text-align: center;
    color: #fff;
    margin-bottom: clamp(30px, 14.694px + 4.082vw, 80px);
}
.sec2 .dinner-time .min{
    font-size: clamp(12px, 8.264px + 0.996vw, 25px);
}
.sec2 .lunch-time{
    line-height: 1.8;
}

.sec2 .menu-list{
    text-align: center;
    margin: clamp(100px, 79.885px + 5.364vw, 170px) auto 0;
}
.sec2 .menu-list.recs{
    position: relative;
    z-index: 1;
    margin: clamp(100px, 77.011px + 6.13vw, 180px) auto 0;
}
.sec2 .menu-list.recs .recs-icon{
    background: #927e32;
    border-radius: 100px;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: -20px;
    left: calc(50% - 245px);
    z-index: -1;
}
.sec2 .menu-list .ub{
    margin: 0 auto clamp(50px, 41.379px + 2.299vw, 80px);
    position: relative;
}
.sec2 .menu-list .ub::before{
    content: '';
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    bottom: clamp(-25px, -20.690px + -1.149vw, -40px);/*線の上下位置*/
    display: inline-block;
    width: 35px;/*線の長さ*/
    height: 1.5px;/*線の太さ*/
    background-color: #fff;/*線の色*/
}
.sec2 p.ub{
    font-size: clamp(14px, 12.851px + 0.307vw, 18px);
}

.sec2 .img-01{
    margin: clamp(80px, 57.011px + 6.13vw, 160px) auto 0;
    width: 100%;
}

.sec2 .img-02{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: clamp(25px, 17.816px + 1.916vw, 50px);
}
.sec2 .img-02 img{
    width: 33.3%;
}
.sec2 .flex{
    margin: clamp(70px, 49.885px + 5.364vw, 140px) auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 80%;
}
.sec2 .flex div{
    width: 45%;
    margin-bottom: clamp(50px, 41.379px + 2.299vw, 80px);
}

.sec2 .flex div:last-of-type, .sec2 .flex div:nth-last-of-type(2){
    margin-bottom: 0;
}

.sec2 .flex .menu{
/*    font-size: clamp(16px, 14.851px + 0.307vw, 20px);*/
    position: relative;
    margin: 0 0 20px;
}
.sec2 .price{
    font-size: clamp(20px, 17.126px + 0.766vw, 30px);
    margin: 0;
}
.sec2 .price span{
    font-size: 0.8rem;
}


.sec2 .drink-menu .drink h3{
    margin: 0;
}
.sec2 .drink-list{
    padding: 0;
    margin: 0 0 clamp(50px, 41.379px + 2.299vw, 80px);
}
.sec2 .drink-item{
    margin-bottom: 15px;
}
.sec2 .drink-item dt, .sec2 .drink-item dd {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    position: relative;
    font-weight: normal;
    font-size: clamp(15px, 14.138px + 0.23vw, 18px);
}
.sec2 .drink-item dd{
    font-size: clamp(12px, 11.425px + 0.153vw, 14px);
    margin-left: 10px;
}

.sec2 .drink-item .price {
    white-space: nowrap;
    font-size: clamp(15px, 14.138px + 0.23vw, 18px);
}
.sec2 .min-txt{
    font-size: 12px
}

.sec2 .txt{
    font-size: clamp(13px, 11.563px + 0.383vw, 18px);
    margin: 0;
/*    margin: clamp(100px, 91.379px + 2.299vw, 130px) 0 clamp(50px, 44.253px + 1.533vw, 70px);*/
    line-height: 2;
}
.sec2 .caution-txt{
    margin: 0 auto clamp(80px, 59.885px + 5.364vw, 150px);
    display: flex;
    justify-content: center;
    font-size: clamp(12px, 10.851px + 0.307vw, 16px);
    line-height: 1.6;
}
.sec2 .caution-txt a{
    font-size: clamp(18px, 15.989px + 0.536vw, 25px);
}

ul{
    padding: 0;
    list-style-type: none;
    font-size: clamp(15px, 14.138px + 0.23vw, 18px);
    line-height: 1.8;
}
footer{
    color: #000;
}

@media screen and (max-width: 768px){
    .sp-only{
        display: block;
    }
    .pc-only{
        display: none;
    }

    .main{
        padding: 0 20px;
    }
    .main .main-rogo{
        top: -16%;
        right: 5%;
    }

    .main .main-img img{
        object-fit: cover;
        height: auto;
    }
    .sec2 .drink-item .price {
        width: 100%;
        text-align: end;
    }
}