@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Murecho&family=Noto+Sans+JP:wght@400..700&display=swap');

:root {
	--width-inner01: 1400px;
	--width-inner02: calc((920 / 1400) * var(--width-inner01));
	--scale-ratio: 1px;
    --font-ratio: 1px;
}
.display-sp {
	display: none !important;
}

@media (width <= 1400px) {
	:root {
		--width-inner01: var(--width-vw);
		--scale-ratio: calc(var(--width-vw) / 1400);
		--font-ratio: max(0.8px, calc(var(--width-vw) / 1400));
	}
	.sec-inner {
		padding: 0 30px;
	}
}

/* ----------------------------------------------------------------------------------------------------
*  content-top
* --------------------------------------------------------------------------------------------------*/
.content-top {
	margin-bottom: calc(300 * var(--scale-ratio));
	.sec-inner {
		display: flex;
		gap: calc(25 * var(--scale-ratio));
	}
	.column-body {
		width: 50%;
	}
	.ttl-page {
		margin-bottom: calc(52 * var(--scale-ratio));
	}
	.ttl-top {
		.ja {
			width: calc(453 * var(--scale-ratio));
		}
		.en {
			font-size: calc(16 * var(--font-ratio));
		}
	}
	.txt {
		width: calc(495 * var(--scale-ratio));
	}
	.column-img {
		flex-shrink: 0;
		padding-top: calc(50 * var(--scale-ratio));
	}
	@media (width > 1800px) {
		.column-body {
			flex-shrink: 0;
		}
		.column-img {
				margin-right: calc(-150 * var(--scale-ratio));
		}
		.sub {
			display: none;
		}
	}
}



/* ----------------------------------------------------------------------------------------------------
*  anchor-link-area
* --------------------------------------------------------------------------------------------------*/
.anchor-link-area.-large {
	.txt-lead {
		width: calc(670 * var(--scale-ratio));
	}
	.anchor-link-list {
        gap: calc(30 * var(--scale-ratio));
		.anchor-link-item {
			.logo {
				&.-fsh {
					width: calc(450 * var(--scale-ratio));
				}
			}
			.arrow {
				width: calc(15 * var(--scale-ratio));
				height: calc(15 * var(--scale-ratio));
				line-height: 1;
			}
		}
    }
}

.anchor-link-area.-bar {
	height: calc(150 * var(--scale-ratio));
    transform: translateY(calc(-150 * var(--scale-ratio)));
	.anchor-link-list {
		position: absolute;
		left: 50%;
		bottom: calc(8 * var(--scale-ratio));
		transform: translateX(-50%);
		.anchor-link-item {
			.anchor-link-btn {
				width: calc(450 * var(--scale-ratio));
			}
			&:nth-child(1) {
				padding-right: calc(50 * var(--scale-ratio));
				.anchor-link-btn {
					padding-left: calc(126 * var(--scale-ratio));
				}
			}
			&:nth-child(2) {
				padding-left: calc(50 * var(--scale-ratio));
				position: relative;
				&::before {
					content: "";
					background: var(--color-gray03);
					position: absolute;
					left: 0;
					bottom: calc(12 * var(--scale-ratio));
					display: block;
					width: 1px;
					height: calc(110 * var(--scale-ratio));
					opacity: 0.25;
				}
			}
		}
	}
}


/* ----------------------------------------------------------------------------------------------------
*  hotel-section
* --------------------------------------------------------------------------------------------------*/
.sec-block {
	.hotel-section {
		.information-area {
			gap: calc(100 * var(--scale-ratio));
			@media (width <= 1800px) {
				gap: calc(50 * var(--scale-ratio));
			}
			.ttl-information {
				font-size: calc(24 * var(--font-ratio));
			}
            .data {
				margin-top: calc(25 * var(--scale-ratio));
                dt {
                    font-weight: bold;
                }
                dt, dd {
                    line-height: 1.5;
					font-size: calc(20 * var(--font-ratio));
                }
				.note {
					padding-top: calc(10 * var(--scale-ratio));
					font-size: calc(15 * var(--font-ratio));
					line-height: 1.33;
					display: block;
				}
            }
		}
		.menu-area {
			gap: calc(100 * var(--scale-ratio));
			@media (width <= 1800px) {
				gap: calc(50 * var(--scale-ratio));
			}
			.txt-lead {
				margin-bottom: calc(50 * var(--scale-ratio));
				font-size: calc(20 * var(--font-ratio));
				line-height: 1.5;
			}
			.menu-box {
				dt, dd, li, p {
					font-size: calc(20 * var(--font-ratio));
					line-height: 1.5;
				}
				li, .glass, dl + .menu {
					margin-top: 1.5em;
				}
				.note {
					padding-top: calc(10 * var(--scale-ratio));
					font-size: calc(15 * var(--font-ratio));
					line-height: 1.33;
					display: block;
				}
			}
		}

		.reservation-area {
			.body-cover {
				padding: 0 calc(200 * var(--scale-ratio));
				position: absolute;
				left: 0;
				top: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
				height: 100%;
				@media (width <= 1800px) {
					padding: 0 calc(100 * var(--scale-ratio));
				}
			}
			.box {
				padding-bottom: calc(50 * var(--scale-ratio));
                & + .box {
					padding-top: calc(50 * var(--scale-ratio));
                    padding-bottom: 0;
                    &::before {
                        width: calc(1000 * var(--scale-ratio));
                    }
                }
			}
			.ttl, .txt {
				font-size: calc(20 * var(--font-ratio));
				line-height: 1.5;
			}
			.ttl {
				margin-bottom: calc(25 * var(--scale-ratio));
				width: auto;
			}
			.txt + .txt {
				margin-top: calc(25 * var(--scale-ratio));
			}
			.note {
				margin-top: calc(25 * var(--scale-ratio));
				font-size: calc(15 * var(--font-ratio));
				line-height: 1.33;
			}
			.btn {
				margin-top: calc(25 * var(--scale-ratio));
				width: calc(400 * var(--scale-ratio));
				height: calc(80 * var(--scale-ratio));
				.btn-txt {
					font-size: calc(20 * var(--font-ratio));
				}
				.arrow {
					right: calc(33 * var(--scale-ratio));
					width: calc(10 * var(--scale-ratio));
					height: calc(10 * var(--scale-ratio));
				}
			}
		}

		&.-lunch {
			.information-area {
				.image-block {
					width: calc(800 * var(--scale-ratio));
					.img {
                        height: calc(850 * var(--scale-ratio));
                    }
				}
			}
			.menu-area {
				flex-direction: row-reverse;
				.label {
					top: calc(-110 * var(--scale-ratio));
                    right: calc(-110 * var(--scale-ratio));
                    width: calc(435 * var(--scale-ratio));
					@media (width <= 1800px) {
						right: calc(-10 * var(--scale-ratio));
					}
				}
				.image-block {
					width: calc(600 * var(--scale-ratio));
					.img {
                        height: calc(900 * var(--scale-ratio));
                    }
				}
				.menu-box {
					.glass {
						margin-top: calc(50 * var(--scale-ratio));
					}
				}
			}
			.reservation-area {
				.label {
					top: calc(-75 * var(--scale-ratio));
					left: calc(-65 * var(--scale-ratio));
					width: calc(710 * var(--scale-ratio));
					@media (width <= 1800px) {
						left: calc(-10 * var(--scale-ratio));
					}
				}
			}
		}

		&.-dinner {
			.information-area {
				flex-direction: row-reverse;
				.image-block {
					width: calc(865 * var(--scale-ratio));
				}
			}
			.menu-area {
				.label {
                    top: calc(100 * var(--scale-ratio));
                    left: calc(50 * var(--scale-ratio));
                    width: calc(435 * var(--scale-ratio));
                    transform: rotate(-20deg);
				}
				.body-block {
					margin-left: auto;
					width: 50%;
				}
			}
			.reservation-area {
				.label {
                    top: calc(-70 * var(--scale-ratio));
                    right: calc(-65 * var(--scale-ratio));
                    width: calc(710 * var(--scale-ratio));
                    transform: rotate(8deg);
					@media (width <= 1800px) {
						right: calc(-10 * var(--scale-ratio));
					}
				}
			}
		}

		&.-fsh {
			.ttl {
				width: calc(909 * var(--scale-ratio));
			}
			.information-area {
				flex-direction: row-reverse;
				.image-block {
					width: calc(700 * var(--scale-ratio));
					.img {
                        height: calc(850 * var(--scale-ratio));
                    }
				}
			}
			.menu-area {
				.label {
                    top: calc(-75 * var(--scale-ratio));
                    right: calc(5 * var(--scale-ratio));
                    width: calc(435 * var(--scale-ratio));
				}
				.image-block {
					width: calc(600 * var(--scale-ratio));
					.img {
                        height: calc(800 * var(--scale-ratio));
                    }
				}
				.body-block {
					padding-top: calc(138 * var(--scale-ratio));
				}
			}
			.reservation-area {
				.label {
                    top: calc(-110 * var(--scale-ratio));
                    left: calc(-80 * var(--scale-ratio));
					width: calc(710 * var(--scale-ratio));
					@media (width <= 1800px) {
						left: calc(-10 * var(--scale-ratio));
					}
				}
			}
		}
	}
}

/* ----------------------------------------------------------------------------------------------------
*  reservation
* --------------------------------------------------------------------------------------------------*/
.sec-block.-reservation {
	.sec-inner {
		width: var(--width-inner02);
	}
	.reservation-ttl {
		margin-bottom: calc(100 * var(--scale-ratio));
		.ttl-ja {
			font-size: 30px;
		}
	}
	.ttl, .txt {
		font-size: calc(20 * var(--font-ratio));
		line-height: 1.5;
	}
	.attention {
		margin: calc(50 * var(--scale-ratio)) calc(20 * var(--scale-ratio)) calc(100 * var(--scale-ratio));
		.txt {
			font-size: calc(15 * var(--font-ratio));
			line-height: 1.33;
		}
	}
	.reservation-child {
		.ttl-child {
			margin-bottom: calc(25 * var(--scale-ratio));
			font-size: 30px;
			line-height: 1.33;
		}
        .txt {
            text-align: center;
        }
		.note-list{
			margin-top: calc(10 * var(--scale-ratio));
			li {
				text-align: center;
			}
		}
		.link-column-area {
			margin-top: calc(50 * var(--scale-ratio));
			width: calc(450 * var(--scale-ratio));
		}
		& + .reservation-child {
			margin-top: calc(100 * var(--scale-ratio));
		}
	}
}

/* ----------------------------------------------------------------------------------------------------
*  banner
* --------------------------------------------------------------------------------------------------*/
.sec-block.-banner a {
	margin: auto;
	display: block;
	width: calc(900 * var(--scale-ratio));
}

/* ----------------------------------------------------------------------------------------------------
*  content-ft
* --------------------------------------------------------------------------------------------------*/
.content-ft {
    padding: calc(154 * var(--scale-ratio)) 0 calc(200 * var(--scale-ratio));
	.note-list li {
		font-size: calc(15 * var(--font-ratio));
		line-height: 1.33;
		text-align: center;
	}
	#sns{
		margin-top: calc(200 * var(--scale-ratio));
		width: calc(1100 * var(--scale-ratio));
		.snsCap{
			p {
				font-size: calc(20 * var(--font-ratio));
			}
		}
	}
}