@charset "utf-8";

/* ==========================================
COURSE/DRINK
========================================== */

.course-flex-area01 {
    max-width: 128rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin: 6rem auto 0;
}

.course-img-block01 {
    max-width: 60rem;
    width: 46.87%;
}

.course-text-block01 {
    max-width: 60rem;
    width: 46.87%;
    margin: 4rem 0 0;
}

.corse-text-box01 {
    text-align: center;
    margin: 6rem auto 0;
}

.course-plan {
    max-width: 160rem;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 6rem 5rem;
    margin: 6rem auto 0;
}

.course-plan-card {
    background: rgb(45 52 61 / 50%);
    color: var(--white);
    padding: 6rem 1.5rem;
}

.course-plan-title {
    font-size: 2.4rem;
    font-weight: normal;
    letter-spacing: 0.05em;
    line-height: 1.45em;
    text-align: center;
}

.course-plan-title > strong {
    font-size: 3.2rem;
    letter-spacing: 0.05em;
    line-height: 1.45em;
}

.course-plan-list {
    font-weight: normal;
    letter-spacing: 0.05em;
    line-height: 1.5em;
    text-align: center;
    margin: 4rem 0 0;
}

.course-plan-list > li:not(:first-child) {
    margin: 1rem 0 0;
}

.course-img-area01 {
    max-width: 160rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: auto;
}

.course-img01 {
    width: 52.5%;
}

.course-img02 {
    width: 45%;
    margin: 26rem 0 0;
}

.course-img-area02 {
    max-width: 128rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: -4rem auto 0;
}

.course-img03 {
    width: 50%;
    z-index: 1;
}

.course-img04 {
    width: 45.31%;
    margin: 38rem 0 0 -9rem;
}

.course-img-area03 {
    max-width: 160rem;
    width: 100%;
    margin: 6rem auto 0;
}

.course-img05 {
    width: 100%;
    text-align: center;
}

.course-img06 {
    max-width: 56rem;
    width: 80%;
    margin: 6rem auto 0;
}

.drink-title-area {
    max-width: 184rem;
    width: 100%;
    color: #B7BABE;
    padding: 10rem 1.5rem;
    margin: auto;
    position: relative;
}

.drink-title-bg {
    width: 100%;
    height: 100%;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}

.drink-title-bg > img {
    object-fit: cover;
    width: 100%;
    height: 100% !important;
}

.drink-title-bg:before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
    background: rgb(45 52 61 / 60%);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}

.drink-flex-area01 {
    max-width: 132rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    justify-content: space-between;
    margin: 8rem auto 0;
}

.drink-img-block01 {
    max-width: 60rem;
    width: 45.45%;
}

.drink-text-block01 {
    max-width: 60rem;
    width: 45.45%;
    margin: 4rem 0 0;
}

.drink-text-box01 {
    text-align: center;
    margin: 6rem auto 0;
}

.drink-menu {
    max-width: 114rem;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6rem 3.5%;
    margin: 6rem auto 0;
}

.drink-menu-card {
    width: 48.24%;
}

.drink-menu-title01 {
    width: 100%;
    font-size: 2rem;
    font-weight: normal;
    letter-spacing: 0.05em;
    line-height: 1.45em;
    text-align: center;
}

.drink-menu-list {
    margin: 4rem auto 0;
}

.drink-menu-list-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 0 1rem;
    border-bottom: solid 1px #B7BABE;
}

.drink-menu-list-item:not(:first-child) {
    margin: 2rem 0 0;
}

.drink-menu-list-name {
    flex: 1;
}

.drink-menu-list-price {
    margin: 0 0 0 1.5rem;
}

.drink-menu-card-fluid {
    width: 100%;
}

.drink-menu-title02 {
    text-align: center;
}

.drink-menu-notes {
    margin: 2rem 0 0 0;
}

.course-title01-decoration01, .course-title01-decoration02 {
    position: absolute;
}

.course-title01-decoration01 {
    max-width: 15rem;
    width: 9.74%;
    top: 55%;
    transform: translateY(-55%);
    left: 33%;
}

.course-title01-decoration02 {
    max-width: 13rem;
    width: 8.44%;
    top: 55%;
    transform: translateY(-55%);
    right: 30%;
}

.course-title02-decoration01, .course-title02-decoration02 {
    position: absolute;
}

.course-title02-decoration01 {
    max-width: 8rem;
    width: 11.86%;
    top: 50%;
    transform: translateY(-50%);
    left: 33%;
}

.course-title02-decoration02 {
    max-width: 6rem;
    width: 8.9%;
    top: 30%;
    transform: translateY(-30%);
    right: 33%;
}

.drink-title01-decoration01, .drink-title01-decoration02 {
    position: absolute;
}

.drink-title01-decoration01 {
    max-width: 11rem;
    width: 9.57%;
    top: 55%;
    transform: translateY(-55%);
    left: 27%;
    opacity: 0.3;
}

.drink-title01-decoration02 {
    max-width: 15rem;
    width: 12.05%;
    top: 30%;
    transform: translateY(-30%);
    right: 26%;
}

.drink-title02-decoration01, .drink-title02-decoration02 {
    position: absolute;
}

.drink-title02-decoration01 {
    max-width: 7rem;
    width: 9.77%;
    top: 55%;
    transform: translateY(-55%);
    left: 31%;
}

.drink-title02-decoration02 {
    max-width: 8rem;
    width: 11.17%;
    top: 45%;
    transform: translateY(-45%);
    right: 30%;
}

.course-decoration01, .course-decoration02, .course-decoration03, .course-decoration04, .course-decoration05 {
    position: absolute;
    margin: auto;
}

.course-inner03 {
    position: relative;
}

.course-decoration01 {
    max-width: 33.1rem;
    width: 17.23%;
    top: 4%;
    right: 0;
}

.course-wrapper03 {
    position: relative;
}

.course-decoration02 {
    max-width: 39.6rem;
    width: 20.62%;
    top: 22%;
    left: 0;
}

.course-decoration03 {
    max-width: 54.9rem;
    width: 28.59%;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.course-decoration04 {
    max-width: 78rem;
    width: 40.62%;
    bottom: 5%;
    right: 0;
}

.course-decoration05 {
    max-width: 45.4rem;
    width: 23.64%;
    bottom: 0;
    left: 0;
}

/* ==========================================
ご予約・お問い合わせ
========================================== */

.reserve-area {
    max-width: 114rem;
    width: 100%;
    padding: 6rem 1.5rem;
    margin: auto;
    background: rgb(255 255 255 / 50%);
}

.reserve-text-box {
    text-align: center;
    margin: 6rem 0 0;
}

.reserve-btn-block {
    max-width: 58rem;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    margin: 6rem auto 0;
}

.tel-btn01-dark {
    background: var(--black) url(../../../../uploads/reserve_btn_bg01.png) no-repeat center top / cover;
    color: var(--white);
}

.tel-btn01-dark:before {
    background: url(../../../../uploads/tel_icon_white.svg) no-repeat center / contain;
}

.reserve-btn01-dark > a {
    background: var(--black) url(../../../../uploads/reserve_btn_bg01.png) no-repeat center top / cover;
    color: var(--white);
}

.reserve-btn01-dark > a:before {
    background: url(../../../../uploads/calendar_icon_white.svg) no-repeat center / contain;
}

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1920px) {

	

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1550px) {



}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 1024px) {

	/* ==========================================
	COURSE/DRINK
	========================================== */
	
	.course-flex-area01 {
	    margin: 4rem auto 0;
	}
	
	.corse-text-box01 {
	    margin: 4rem auto 0;
	}
	
	.course-plan {
	    gap: 4rem 2.5rem;
	    margin: 4rem auto 0;
	}

	.course-plan-card {
	    padding: 4rem 1.5rem;
	}

	.course-plan-card {
	    padding: 4rem 1.5rem;
	}
	
	.course-plan-title {
	    font-size: 2.2rem;
	}

	.course-plan-title > strong {
	    font-size: 2.8rem;
	}

	.course-plan-list {
	    margin: 2rem 0 0;
	}
	
	.course-plan-list > li:not(:first-child) {
	    margin: 0.5rem 0 0;
	}

	.course-img02 {
	    margin: 15rem 0 0;
	}
	
	.course-img04 {
	    margin: 20rem 0 0 -4.5rem;
	}
	
	.course-img-area03 {
	    margin: 4rem auto 0;
	}
	
	.course-img06 {
	    margin: 4rem auto 0;
	}

	.drink-title-area {
	    padding: 5rem 1.5rem;
	}
	
	.drink-flex-area01 {
	    margin: 4rem auto 0;
	}
	
	.drink-text-box01 {
	    margin: 4rem auto 0;
	}
	
	.drink-menu {
	    gap: 4rem 3.5%;
	    margin: 4rem auto 0;
	}
	
	.drink-menu-list {
	    margin: 2rem auto 0;
	}
	
	.drink-menu-list-item:not(:first-child) {
	    margin: 1.5rem 0 0;
	}
	
	.drink-menu-list-item {
	    padding: 0 0 0.5rem;
	}

	/* ==========================================
	ご予約・お問い合わせ
	========================================== */
	
	.reserve-area {
	    padding: 4rem 1.5rem;
	}
	
	.reserve-text-box {
	    margin: 4rem 0 0;
	}

	.reserve-btn-block {
	    gap: 1.5rem;
	    margin: 4rem auto 0;
	}
	
}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 768px) {

	/* ==========================================
	COURSE/DRINK
	========================================== */

	.course-title01-decoration01 {
	    width: 15%;
	    left: 25%;
	}
	
	.course-title01-decoration02 {
	    width: 13%;
	    right: 22%;
	}
	
	.course-flex-area01 {
	    display: block;
	}
	
	.course-img-block01 {
	    width: 100%;
	    margin: auto;
	}

	.course-title02-decoration01 {
	    width: 15%;
	    left: 25%;
	}
	
	.course-title02-decoration02 {
	    width: 13%;
	    right: 25%;
	}
	
	.course-text-block01 {
	    width: 100%;
	    margin: 2rem auto 0;
	}

	.course-plan-card {
	    padding: 4rem 1.5rem;
	}
	
	.course-plan-title {
	    font-size: 2.2rem;
	}
	
	.course-plan-title > strong {
	    font-size: 2.8rem;
	}
	
	.corse-text-box01 {
	    text-align: left;
	}
	
	.course-plan {
	    grid-template-columns: repeat(1, 1fr);
	    gap: 4rem 0;
	}

	.drink-title01-decoration01 {
	    width: 11%;
	}
	
	.drink-title01-decoration02 {
	    width: 15%;
	}
	
	.drink-flex-area01 {
	    display: block;
	}
	
	.drink-img-block01 {
	    width: 100%;
	    margin: auto;
	}
	
	.drink-text-block01 {
	    width: 100%;
	    margin: 2rem auto 0;
	}

	.drink-menu {
	    flex-direction: column;
	    gap: 4rem 0;
	}
	
	.drink-menu-card {
	    width: 100%;
	}

	.drink-menu-title01 {
	    font-size: 1.8rem;
	}
	
	.drink-title02-decoration01 {
	    width: 13%;
	    left: 25%;
	}
	
	.drink-title02-decoration02 {
	    width: 15%;
	    right: 25%;
	}

	/* ==========================================
	ご予約・お問い合わせ
	========================================== */

	.reserve-btn-block {
	    max-width: 28rem;
	    display: grid;
	    grid-template-columns: repeat(1, 1fr);
	}

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 576px) {

	

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */

/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */
/* ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★ */

@media screen and (width <= 414px) {

	

}

/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */
/* ☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆ */