@charset "UFT-8";
:root {
    --primary-red: #A20000;
    --primary-black: #000;
    --primary-gold: #D2B48C;
    --primary-white:#FFE7E7;
}

.PC {
    display: none;
}


/* ==========
Reserve--top
========== */
.section--reserve--top {
    background-image: url(../images/TOP/back_image_y.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.reserve--top__title {
    font-size: 2.1rem;
    position: relative;
    text-align: center;
    padding: 50px 0 30px;
}

.reserve--top__title::before {
    content: '';
    width: 19px;
    height: 17px;
    display: block;
    position: absolute;
    background-image: url(../images/logo/icon.png);
    background-size: cover;
    background-repeat: no-repeat;
    top: 50%;
    left: 50%;
    transform: translateX(-700%);
}

.reserve--top__txt {
    padding: 0 8% 12px;
}

.reserve__tel {
    text-align: center;
    padding: 26px 0 71px 0;
    position: relative;
}

.reserve__tel::before {
    content: '';
    display: block;
    background-color: var(--primary-gold);
    width: 92%;
    height: 2px;
    position: absolute;
    left: 4%;
    transform: translateY(-13px);
}

.reserve__tel::after {
    content: '';
    display: block;
    background-color: var(--primary-gold);
    width: 92%;
    height: 2px;
    position: absolute;
    left: 4%;
    transform: translateY(13px);
}

.open__hour {
    letter-spacing: 0.1em;
    text-align: center;
    position: relative;
    padding-bottom: 10px;
}

.open__hour::before {
    content: '';
    width: 1.8px;
    height: 33px;
    display: block;
    position: absolute;
    background-color: var(--primary-black);
    top: -45px;
    left: 50%;
}

.close__day {
    text-align: center;
    letter-spacing: 0.1em;
    padding-bottom: 30px
}

.note {
    font-size: 1.3rem;
}

.reserve__content {
    padding: 40px 30px 30px;
    border: 6px solid var(--primary-gold);
    margin: 0 auto;
}

.reserve__content__title {
    font-size: 2.1rem;
    text-align: center;
    padding-bottom: 15px;
}

.reserve__dettail__txt {
    padding-bottom: 6px;
}

.reserve__dettail__txt:last-of-type {
    padding-bottom: 0;
}


@media screen and (min-width:769px) {
    .PC {
        display: block;
    }

    .SP {
        display: none;
    }

    .section--reserve--top {
        padding-bottom: 92px;
    }

    .reserve--top__title {
        font-size: 3.5rem;
        padding: 80px 0 55px;
    }

    .reserve--top__title::before {
        content: '';
        width: 30px;
        height: 28px;
        transform: translateX(-760%);
    }

    .reserve--top__txt {
        text-align: center;
        padding: 0;
        font-size: 1.8rem;
    }

    .reserve__tel {
        font-size: 2rem;
        letter-spacing: 0.3em;
        padding: 34px 0 83px 0;
    }

    .nav_tel_number {
        font-size: 3.3rem;
        letter-spacing: 0.22em;
    }

    .reserve__tel::before {
        width: 35%;
        left: 32.2%;
        transform: translateY(-16px);
    }

    .reserve__tel::after {
        width: 35%;
        left: 32.2%;
        transform: translateY(16px);
    }

    .open__hour {
        font-size: 2rem;
        letter-spacing: 0.3em;
        padding-bottom: 0;
    }

    .open__hour::before {
        width: 1.8px;
        height: 33px;
        top: -49px;
        left: 50%;
    }

    .close__day {
        font-size: 2rem;
        letter-spacing: 0.3em;
        padding-bottom: 80px;
    } 

    .note {
        font-size: 1.6rem;
        letter-spacing: 0;
    }

    .reserve__content {
        width: 51.6%;
        height: auto;
        padding: 50px 3%;

    }

    .reserve__content__title {
        font-size: 3.2rem;
        padding-bottom: 30px;
    }

    .reserve__dettail__txt {
        font-size: 1.8rem;
        padding-bottom: 10px;
    }    
}
/* 769px */


/* =============
クーポン情報
========== */
.section--coupon {
    background-image: url(../images/TOP/back_image_y.png);
    background-repeat: no-repeat;
    background-size: cover;
}

.coupon__title {
    font-size: 2.1rem;
    text-align: center;
    padding: 50px 0 73px;
    position: relative;
}

.coupon__title::before {
    content: '';
    width: 19px;
    height: 17px;
    display: block;
    position: absolute;
    background-image: url(../images/logo/icon.png);
    background-size: cover;
    background-repeat: no-repeat;
    left: 50%;
    transform: translate(-500%,50%);
}

.coupon__title::after {
    content: '';
    width: 2px;
    height: 33px;
    display: block;
    position: absolute;
    background-color: var(--primary-black);
    top: 91px;
    left: 50%;
}

.coupon__detail {
    padding: 0 8% 62px;
    position: relative;
}

.coupon__detail::after {
    content: '';
    width: 92%;
    height: 2px;
    display: block;
    position: absolute;
    background-color: var(--primary-gold);
    transform: translateY(30px);
    left: 4%;
}

.coupon__detail {
    padding: 0 8% 62px; 
}

.coupon__detail__title {
    font-size: 1.9rem;
    padding-bottom: 15px;
}

.coupon__detail__box {
    display: flex;
    justify-content: center;
    gap: 5%;
    padding-bottom: 10px;
}

.coupon__detail__box:last-of-type{
    padding-bottom: 0;
}

.coupon__condition {
    width: 27.3%;
    height: 40px;
    background-color: var(--primary-gold);
    text-align: center;
    line-height: 40px;
}

.coupon__txt {
    display: flex;
    align-items: center;
    width: 70%;
    height: auto;
}


@media screen and (min-width:769px) {
    .coupon__title {
        font-size: 3.2rem;
        letter-spacing: 0.3em;
        padding: 80px 0 105px;
    }

    .coupon__title::before {
        width: 30px;
        height: 28px;
        transform:translate(-597%,40%)
    }

    .coupon__title::after {
        top: 144px;
        left: 50%;
    }

    .coupon__detail {
        padding: 0 16.2% 74px;
    }

    .coupon__detail:last-of-type {
        padding-bottom: 150px;
    }

    .coupon__detail::after {
        transform: translateY(35px);
    }

    .coupon__detail__title {
        font-size: 2.6rem;
        letter-spacing: 0.15em;
        padding-bottom: 20px;
    }

    .coupon__detail__box {
        gap: 20px;
        justify-content: flex-start;
    }

    .coupon__condition {
        width: 10.7%;
        height: 40px;
    }



}