@charset "utf-8";

/* ==========================================
menu01
========================================== */

.menu01 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
}

.menu01-title-container {
    max-width: 135rem;
    width: 100%;
    margin: 0 auto;
}

.menu01-title-box {
    width: 100%;
}

.menu01-title-box .title02 {
    padding: 0 0 0 4.5%;
}

.menu01-illust-box {
    margin: -3rem 0 0;
    max-width: 18.7rem;
    width: 13.9%;
}

.menu01-container {
    max-width: 192rem;
    width: 100%;
    margin: -3rem auto 0;
    padding: 4rem 1.5rem 4rem 0;
    background: var(--bg-secondary);
}

.menu01-area {
    max-width: 158rem;
    width: 100%;
    margin: 0 auto 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.menu01-img {
    max-width: 87.8rem;
    width: 55.6%;
}

.menu01-text-area {
    max-width: 63rem;
    width: 40%;
}

.menu01-text-area .text01 span {
	margin: 0 1%;
    padding: 1% 0.5% 1% 1%;
	font-size: 2.5rem;
}

.food .menu01-text-area .text01 span {
	background-color: var(--primary);
}

.drink .menu01-text-area .text01 span {
	background-color: var(--eighth);
}

/* ==========================================
food01
========================================== */

.food01 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
    padding: 13rem 0 0;
}

.food01-container {
    max-width: 138rem;
    width: 100%;
    margin: 0 auto;
}

.food01-container .common-title-box01 {
    align-items: center;
    text-align: center;
}

.food01-area {
    margin: 9rem 0 0;
}

.food01-block {
	margin: 12rem 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.food01-block:first-child {
	margin: 0;
}

.food01-block:nth-of-type(even) {
    flex-direction: row-reverse;
}

.food01-img-area {
    max-width: 74.7rem;
    width: 54.2%;
    position: relative;
}

.food01-img-box01 {
    width: 100%;
}

.food01-img-box02 {
    max-width: 69.5rem;
    width: 93%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}

.food01-text-area {
    max-width: 56.4rem;
    width: 45%;
}

.food01-text-area02 {
	display: flex;
}

.food01-title-area {
    display: flex;
    align-items: center;
}

.food01-title-box {
	width: 100%;
}

.food01-title-text {
	display: inline-block;
    padding: 1% 5% 1.5%;
    font-size: 2.8rem;
    font-weight: 700;
    font-family: var(--font-family02);
    letter-spacing: 0.05em;
    border-radius: 4.6rem;
	position: relative;
}

.food01 .food01-title-text {
	color: var(--white);
    background: var(--primary);
}

.food01 .food01-title-text::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 15%;
    bottom: -1.7rem;
    margin: auto;
    border-left: 0rem solid transparent;
    border-right: 3rem solid transparent;
    border-top: 2.2rem solid var(--primary);
}

.food01-title-illust {
    max-width: 10.5rem;
    width: 19%;
}

.food01-title-illust02 {
	margin: 4rem 0 0;
	max-width: 34.9rem;
	width: 69.5%;
}

.food01-text-box {
    margin: 5rem 0 0;
}

/* ==========================================
food02
========================================== */

.food02 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
    padding: 15rem 0;
}

.food02-container {
    max-width: 128rem;
    width: 100%;
    margin: 0 auto;
}

.food02-area {
    margin: 10rem 0 0;
}

.food02-block {
	margin: 10rem 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.food02-block:first-child {
	margin: 0;
}

.food02-block:nth-of-type(even) {
    flex-direction: row-reverse;
}

.food02-img-box {
    max-width: 56rem;
    width: 45.2%;
}

.food02 .food01-title-text {
    background: var(--secondary);
}

.food02 .food01-title-text::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    left: 15%;
    bottom: -1.7rem;
    margin: auto;
    border-left: 0rem solid transparent;
    border-right: 3rem solid transparent;
    border-top: 2.2rem solid var(--secondary);
}

/* ==========================================
menu02
========================================== */

.menu02 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
    padding: 10rem 0;
    background: var(--secondary);
}

.drink .menu02 {
	padding: 17rem 0 10rem;
}

.menu02-container {
    max-width: 124rem;
    width: 100%;
    margin: 0 auto;
}

.menu02-main-title-box {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.menu02-main-title-box::before {
    content: "";
    display: block;
    width: 100%;
    height: 0.1rem;
    background: var(--bg-tertiary);
    flex: 1;
}

.menu02-main-title-box::after {
    content: "";
    display: block;
    width: 100%;
    height: 0.1rem;
    background: var(--bg-tertiary);
    flex: 1;
}

.menu02-main-title-box .title02 {
    margin: 0 2%;
}

.menu02-sub-title-box {
    margin: 5rem 0 0;
    text-align: center;
}

.menu02-area {
    max-width: 113.4rem;
    width: 100%;
    margin: 4rem auto 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.menu02-block {
    max-width: 53.2rem;
    width: 48%;
}

.menu02-item {
    margin: 4rem 0 0;
}

.menu02-item:first-child {
    margin: 0;
}

.menu02-title-box {
    padding: 1% 2%;
    position: relative;
    text-align: center;
}

.food .menu02-title-box {
    background: var(--primary);
}

.drink .menu02-title-box {
    background: var(--eighth);
}

.menu02-title {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: var(--font-family02);
    letter-spacing: 0.05rem;
	color: var(--white);
}

.menu02-illust {
    max-width: 6rem;
    width: 11.3%;
    position: absolute;
    top: -40%;
    right: 10%;
    margin: auto;
}

.menu02-text-box {
    margin: 2rem 0 0;
}

.menu02-text {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 2em;
}

.menu02-img-box {
    max-width: 80.5rem;
    width: 100%;
    margin: 4rem auto 0;
}

.menu02-charge-area {
    padding: 2rem 1.5rem 4rem;
    background: var(--fifth);
}

.menu02-charge-box {
    max-width: 45rem;
    width: 100%;
    margin: 0 auto;
}

.menu02-charge-title {
    font-size: 3rem;
    font-weight: 700;
    font-family: var(--font-family02);
    letter-spacing: 0.05em;
    text-align: center;
}

.menu02-charge-text-box {
    margin: 2rem 0 0;
}

.menu02-charge-text {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 2em;
}

.menu02-charge-container {
    max-width: 113.4rem;
    width: 100%;
    margin: 6rem auto 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
	gap: 3rem;
}

.menu02-charge-area {
    max-width: 53.2rem;
    width: 48%;
}

/* ==========================================
menu03
========================================== */

.menu03 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto;
    padding: 12rem 0;
}

.menu03-container {
    max-width: 65rem;
    width: 100%;
    margin: 0 auto;
}

.menu-banner {
    padding: 1rem;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
	color: var(--fifth);
	position: relative;
	transition: all .3s;
}

.menu-banner::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background: rgba(51, 51, 51, 54%);
	transition: all .3s;
}

.menu-banner:hover::before {
	background: rgba(51, 51, 51, 20%);
}

.menu-banner-area {
	padding: 2rem 1.5rem 3rem;
    width: 100%;
    height: 100%;
    text-align: center;
	border: 0.1rem solid var(--fifth);
	position: relative;
	z-index: 1;
}

.food .menu-banner {
	background: url(../../../../uploads/drink_banner.jpg)center center / cover no-repeat;
}

.drink .menu-banner {
	background: url(../../../../uploads/food_banner.jpg)center center / cover no-repeat;
}

.menu-banner .title02 {
	text-shadow: 0 0.3em 0.4rem rgba(0, 0, 0, 16%);
	margin: 0 2rem 0 0;
    line-height: 1.37em;
    text-decoration: underline;
    text-decoration-thickness: 1.5rem;
    text-decoration-color: var(--eighth);
    text-underline-offset: -0.4rem;
    text-decoration-skip-ink: none;
    position: relative;
    top: 0.6rem;
}

.menu-banner-text01 {
    margin: 1rem 0 0;
    font-size: 2.7rem;
    font-weight: 700;
    letter-spacing: 0.05rem;
    text-shadow: 0 0.3em 0.4rem rgba(0, 0, 0, 16%);
}

/* ==========================================
drink01
========================================== */

.drink01 {
    max-width: 192rem;
    width: 100%;
    margin: 0 auto -5.5%;
    padding: 2rem 0 0;
}

.drink01-container {
    max-width: 140rem;
    width: 100%;
    margin: 0 auto;
}

.drink01-area {
    max-width: 61.2rem;
    width: 100%;
    padding: 2% 4%;
    background: var(--white);
    border-radius: 40rem;
    text-align: center;
	position: relative;
}

.drink01-area::before {
	content: "";
    display: block;
    width: 0;
    height: 0;
    position: absolute;
    right: -4%;
    top: 5rem;
    margin: auto;
    border-left: 0rem solid transparent;
    border-right: 3rem solid transparent;
    border-top: 2.7rem solid var(--white);
    transform: rotate(-10deg);
}

.drink01-text-box {
    margin: 1rem 0 0;
}

.drink01-text {
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.75em;
}

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

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


}

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

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

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

	.menu01-text-area .text01 span {
		font-size: 2.2rem;
	}

}

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

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

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

	.menu01-container {
		padding: 4rem 1.5rem;
	}

	.menu01-area {
		flex-direction: column;
		justify-content: center;
	}

	.menu01-img {
		max-width: 100%;
		width: 100%;
	}

	.menu01-text-area {
		margin: 2rem 0 0;
		max-width: 100%;
		width: 100%;
	}

	/* ==========================================
	food01
	========================================== */

	.food01 {
		padding: 10rem 0 0;
	}

	.food01-area {
		margin: 8rem 0 0;
	}
	
	.food01-block {
		margin: 10rem 0 0;
	}

	.food01-title-text {
		font-size: 2.2rem;
	}

	/* ==========================================
	food02
	========================================== */

	.food02 {
		padding: 10rem 0;
	}

	.food02-area {
		margin: 8rem 0 0;
	}

	.food02-block {
		margin: 8rem 0 0;
	}

	/* ==========================================
	menu02
	========================================== */

	.menu02 {
		padding: 8rem 0;
	}

	.drink .menu02 {
		padding: 13rem 0 8rem;
	}
	
	/* ==========================================
	menu03
	========================================== */

	.menu03 {
		padding: 10rem 0;
	}

	.menu-banner-text01 {
		font-size: 2.2rem;
	}

	/* ==========================================
	drink01
	========================================== */

	.drink01-text {
		font-size: 1.8rem;
	}

}

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

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

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

	/* ==========================================
	food01
	========================================== */

	.food01 {
		padding: 8rem 0 0;
	}

	.food01-area {
		margin: 6rem 0 0;
	}
	
	.food01-block {
		margin: 8rem 0 0;
		flex-direction: column;
		justify-content: center;
	}

	.food01-block:nth-of-type(even) {
		flex-direction: column;
		justify-content: center;
	}

	.food01-img-area {
		margin: 0 auto;
		width: 100%;
	}

	.food01-text-area {
		margin: 4rem auto 0;
		width: 100%;
	}

	.food01-text-box {
		margin: 1rem 0 0;
	}

	.food01-title-text {
		font-size: 1.8rem;
	}

	.food01-title-illust02 {
		margin: 4rem 0 0;
		max-width: 34.9rem;
		width: 29.5%;
	}

	/* ==========================================
	food02
	========================================== */

	.food02 {
		padding: 8rem 0;
	}

	.food02-area {
		margin: 6rem 0 0;
	}

	.food02-block {
		margin: 6rem 0 0;
		flex-direction: column;
		justify-content: center;
	}

	.food02-block:nth-of-type(even) {
		flex-direction: column;
		justify-content: center;
	}

	.food02-img-box {
		margin: 0 auto;
		width: 100%;
	}

	/* ==========================================
	menu02
	========================================== */

	.drink .menu02 {
		padding: 10rem 0 8rem;
	}

	.menu02-title {
		font-size: 1.8rem;
	}

	.menu02-text {
		font-size: 1.2rem;
	}

	.menu02-charge-title {
		font-size: 2.6rem;
	}

	/* ==========================================
	menu03
	========================================== */

	.menu03 {
		padding: 8rem 0;
	}

	.menu-banner-text01 {
		font-size: 1.8rem;
	}

	/* ==========================================
	drink01
	========================================== */

	.drink01-area {
		margin: 0 auto;
	}

	.drink01-area::before {
		right: 0;
		left: 0;
		top: -2rem;
		margin: auto;
		border-left: 1.5rem solid transparent;
		border-right: 1.5rem solid transparent;
		border-top: 0;
		border-bottom: 2rem solid var(--white);
		transform: unset;
	}

	.drink01-text {
		font-size: 1.8rem;
	}

}

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

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

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

	.menu01-text-area .text01 span {
		font-size: 1.6rem;
	}

	.menu01-container {
		margin: -2rem auto 0;
	}

	/* ==========================================
	food01
	========================================== */

	.food01-title-text {
		margin: 0 0 2rem;
		font-size: 1.4rem;
	}

	/* ==========================================
	menu02
	========================================== */

	.drink .menu02 {
		padding: 8rem 0;
	}

	.menu01-illust-box {
		margin: -2rem 0 0;
	}

	.menu02-area {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.menu02-block {
		margin: 4rem 0 0;
		max-width: 100%;
		width: 100%;
	}

	.menu02-block:first-child {
		margin: 0;
	}

	.menu02-charge-title {
		font-size: 2.2rem;
	}

	.menu02-charge-text {
		font-size: 1.3rem;
	}

	.menu02-charge-container {
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.menu02-charge-area {
		width: 100%;
	}

	/* ==========================================
	menu03
	========================================== */

	.menu-banner-text01 {
		font-size: 1.4rem;
	}

	/* ==========================================
	drink01
	========================================== */

	.drink01-text {
		font-size: 1.4rem;
	}

}

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

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

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


	/* ==========================================
	food01
	========================================== */

	/* ==========================================
	food02
	========================================== */


}

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