@charset "utf-8";
:root {
	--color-beige01: #FFEBC9;
	--color-beige02: #F0EAD1;
	--color-green01: #C3CD81;
	--color-gray01: #444444;
	--color-gray02: #BBBBBB;
	--color-gray03: #6C6C6C;
	--color-gray04: #BABABA;
	--color-brown01: #9B883C;
	--color-bg-dhm01: #342E25;
	--color-bg-dhm02: #2C261D;
	--color-bg-dhm03: #413a2e;
	--color-bg-fsh01: #401414;
	--color-bg-fsh02: #330E0E;
	--color-bg-fsh03: #551919;
	--color-yellow01: #CAA000;
}

body{
	-webkit-highlight: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-user-select: text;
	-webkit-text-size-adjust: 100%;
	-webkit-overflow-scrolling: touch;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-moz-font-smoothing: antialiased;
	font-smoothing: antialiased;
}

.content-inner a{
	color: inherit;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
	text-decoration: underline;
}
.content-inner a:hover{
	opacity: .8;
	text-decoration: none;
}

.block {
	display: block;
}

.ta-center{
	text-align: center !important;
}
.ta-right {
	text-align: right !important;
}

.fw-normal {
	font-weight: normal;
}
.fw-bold {
	font-weight: bold;
}

.mt1em {
	margin-top: 1.5em;
}

/*--- parts ---*/
ul[class] {
	list-style: none;}
ul.note-list,
ul.note-list-m {
	clear:both;}
ul.note-list li,
ul.note-list-m li {
	/* text-indent: -1em;
	padding-left: 1em; */
	text-align: left;}

/* common layout */

.content-inner img{
	width: 100%;
	height: auto;
}
.content-inner * {
	box-sizing: border-box;
}

.wrap{
	overflow: hidden;
}

.content-inner {
	padding: 0;
	background: var(--color-beige01);
	color: var(--color-gray01);
	font-family: "Noto Serif JP", serif;
}

.sec-inner {
	margin: 0 auto 0;
	width: var(--width-inner01);
}

.ff-allura {
	font-family: "Allura", cursive;
}

button {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: top;
    background: transparent;
}

.sec-block em {
    font-weight: bold;
	font-style: normal;
}

.-slider-figure {
	overflow: hidden;
}
.-slider-figure img{
	height: 100%;
	width: 100%;
	object-fit: cover;
	object-position: center center;
	animation: img-pan 40s ease-in-out infinite alternate;
	will-change: object-position;
}
@keyframes img-pan{
	0%, 2.5%, 97.5%, 100% { object-position: left center; }
	47.5%, 50%, 52.5% { object-position: right center; }
}

/* ----------------------------------------------------------------------------------------------------
*  content-top
* --------------------------------------------------------------------------------------------------*/
.content-top {
	.column-body {
		padding-top: calc(100 * var(--scale-ratio));
	}
	.ttl-page {
		width: calc(222 * var(--scale-ratio));
	}
	.ttl-top {
		margin-bottom: calc(50 * var(--scale-ratio));
		.ja {
			margin-bottom: calc(25 * var(--scale-ratio));
		}
		.en {
			color: var(--color-brown01);
			letter-spacing: 0.15em;
			line-height: 1.625;
		}
	}
	.column-img {
		display: flex;
		gap: calc(25 * var(--scale-ratio));
		figure {
			width: calc(400 * var(--scale-ratio));
			&.img01 {
				margin-top: calc(50 * var(--scale-ratio));
			}
		}
	}
}


/* ----------------------------------------------------------------------------------------------------
*  anchor-link-area
* --------------------------------------------------------------------------------------------------*/
.anchor-link-area.-large {
	margin-bottom: calc(300 * var(--scale-ratio));
	.txt-lead {
        margin: 0 auto calc(50 * var(--scale-ratio));
	}
	.anchor-link-list {
		display: flex;
		.anchor-link-item {
			height: calc(850 * var(--scale-ratio));
			.anchor-link-btn {
				position: relative;
			}
			.img {
				position: relative;
				img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
			.logo {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				&.-dhm {
					width: calc(324 * var(--scale-ratio));
				}
			}
			.arrow {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: calc(50 * var(--scale-ratio));
				img {
					vertical-align: top;
				}
			}
		}
	}
}

.anchor-link-area.-bar {
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5000;
	width: 100%;
	transition: transform .5s;
	&.-fixed {
		transform: translateY(0);
	}
	.sec-inner {
		height: 100%;
	}
	nav {
		position: relative;
		display: flex;
		align-items: center;
		height: 100%;
	}
	.ttl-page {
		width: calc(145 * var(--scale-ratio));
	}
	.anchor-link-list {
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
}


/* ----------------------------------------------------------------------------------------------------
*  hotel-section
* --------------------------------------------------------------------------------------------------*/
.sec-block.-dhm {
	padding-bottom: calc(300 * var(--scale-ratio));
	background: var(--color-bg-dhm01);
	.logo {
		height: calc(120 * var(--scale-ratio));
	}
	.information-area {
		color: var(--color-gray02);
	}
	.menu-box {
		background: var(--color-bg-dhm02);
	}
}

.sec-block.-fsh {
	padding-bottom: calc(300 * var(--scale-ratio));
	background: var(--color-bg-fsh01);
	.logo {
		height: calc(145 * var(--scale-ratio));
	}
	.information-area {
		color: #fff;
	}
	.menu-box {
		background: var(--color-bg-fsh02);
	}
}

.sec-block {
	.hotel-section {
		padding-top: calc(300 * var(--scale-ratio));
		color: var(--color-gray04);
		.logo{
			margin-bottom: calc(150 * var(--scale-ratio));
			img {
				width: auto;
				height: 100%;
			}
		}
		.ttl {
			margin-bottom: calc(100 * var(--scale-ratio));
		}
		.information-area {
			margin-bottom: calc(200 * var(--scale-ratio));
			display: flex;
			.image-block {
				flex-shrink: 0;
			}
			.ttl-information {
				color: var(--color-yellow01);
				font-weight: bold;
				letter-spacing: 0.15em;
				line-height: 1.125;
			}
            .data {
                dt {
                    font-weight: bold;
                }
				dd + dd {
					margin-top: calc(25 * var(--font-ratio));
				}
				th {
					padding-right: calc(25 * var(--font-ratio));
					font-weight: normal;
					text-align: left;
				}
            }
		}

		.menu-area {
			margin-bottom: calc(200 * var(--scale-ratio));
			position: relative;
			display: flex;
			&::before {
				content: "";
				border-radius: 50%;
				background: var(--color-bg-dhm03);
				position: absolute;
				z-index: 1;
				pointer-events: none;
				width: calc(615 * var(--scale-ratio));
				height: calc(341 * var(--scale-ratio));
				filter: blur(calc(50 * var(--scale-ratio)));
			}
			.label {
				position: absolute;
				z-index: 10;
			}
			.image-block {
				flex-shrink: 0;
			}
			.menu-box {
				padding: calc(50 * var(--scale-ratio));
				.menu-month {
					display: flex;
					dt {
						flex-shrink: 0;
					}
				}
			}
			.image-block, .body-block {
				position: relative;
				z-index: 2;
			}
		}

		.reservation-area {
			position: relative;
			&::before {
				content: "";
				border-radius: 50%;
				background: var(--color-bg-dhm03);
				position: absolute;
				z-index: 1;
				pointer-events: none;
				width: calc(900 * var(--scale-ratio));
				height: calc(341 * var(--scale-ratio));
				filter: blur(calc(50 * var(--scale-ratio)));
			}
			.label {
				position: absolute;
				z-index: 10;
			}
			.img {
				position: relative;
				z-index: 5;
			}
			.body-cover {
				position: relative;
				z-index: 7;
			}
			.ttl, em {
				color: #fff;
				font-weight: bold;
			}
			.box + .box {
				position: relative;
				&::before {
					content: "";
					background: var(--color-yellow01);
					position: absolute;
					top: 0;
					left: 50%;
					transform: translateX(-50%);
					height: 1px;
				}
			}
			.btn {
				margin: auto;
				border: 1px solid var(--color-yellow01);
				background: rgb(0,0,0,.25);
				text-decoration: none;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				.btn-txt {
					color: var(--color-yellow01);
					letter-spacing: 0.15em;
				}
				.arrow {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					line-height: 1;
					img {
						vertical-align: top;
					}
				}
			}
		}

		&.-lunch {
			.ttl {
				width: calc(576 * var(--scale-ratio));
			}
			.menu-area {
				&::before {
					top: calc(-161 * var(--scale-ratio));
					right: calc(-84 * var(--scale-ratio));
				}
			}
			.reservation-area {
				&::before {
					top: calc(-163 * var(--scale-ratio));
					left: calc(-200 * var(--scale-ratio));
				}
			}
		}

		&.-dinner {
			.ttl {
				margin-left: auto;
				width: calc(643 * var(--scale-ratio));
			}
			.menu-area {
				&::before {
					top: calc(39 * var(--scale-ratio));
					left: calc(-30 * var(--scale-ratio));
				}
			}
			.reservation-area {
				&::before {
					top: calc(-126 * var(--scale-ratio));
					right: calc(-100 * var(--scale-ratio));
				}
			}
		}

		&.-fsh {
			.menu-area {
				&::before {
					background: var(--color-bg-fsh03);
					top: calc(-161 * var(--scale-ratio));
					right: calc(-84 * var(--scale-ratio));
				}
			}
			.reservation-area {
				&::before {
					background: var(--color-bg-fsh03);
					top: calc(-163 * var(--scale-ratio));
					left: calc(-200 * var(--scale-ratio));
				}
			}
		}
	}
}


/* ----------------------------------------------------------------------------------------------------
*  reservation
* --------------------------------------------------------------------------------------------------*/
.sec-block.-reservation {
	padding: calc(330 * var(--scale-ratio)) 0 calc(300 * var(--scale-ratio));
	.reservation-ttl {
		.ttl-en {
			margin: 0 auto calc(50 * var(--scale-ratio));
			width: calc(710 * var(--scale-ratio));
		}
		.ttl-ja {
			line-height: 1;
		}
	}
	.attention {
		padding: calc(50 * var(--scale-ratio));
		border: 1px solid var(--color-gray02);
        .ttl {
            margin-bottom: 1em;
        }
	}
	.reservation-child {
		.note-list li {
			font-size: calc(20 * var(--font-ratio));
			line-height: 1.5;
		}
		.link-column {
			display: flex;
			gap: calc(20 * var(--scale-ratio));
		}
		.link-column-area {
			margin: auto;
			position: relative;
			.img {
				position: relative;
			}
			.link-column-area-body {
				position: absolute;
				top: 0;
				left: 0;
				display: flex;
				flex-direction: column;
				width: 100%;
				height: 100%;
				.hotel {
					margin: auto;
					&.-dhm {
						margin-top: calc(100 * var(--scale-ratio));
						margin-bottom: calc(55* var(--scale-ratio));
						width: calc(304 * var(--scale-ratio));
					}
					&.-fsh {
						margin-top: calc(91 * var(--scale-ratio));
						margin-bottom: calc(25* var(--scale-ratio));
						width: calc(252 * var(--scale-ratio));
					}
				}
				.restaurant {
					color: var(--color-beige02);
					font-size: calc(30 * var(--font-ratio));
				}
				.btn-box {
					margin-top: auto;
					margin-bottom: calc(100 * var(--scale-ratio));
					.btn {
						margin: auto;
						border: 1px solid #ffffff;
						background: rgb(0,0,0,0.3);
						text-decoration: none;
						display: flex;
						justify-content: center;
						align-items: center;
						width: calc(300 * var(--scale-ratio));
						height: calc(60 * var(--scale-ratio));
						.btn-txt {
							color: #ffffff;
							font-size: calc(20 * var(--font-ratio));
							letter-spacing: 0.15em;
						}
						.arrow {
							line-height: 1;
							img {
								aspect-ratio: 1;
								vertical-align: top;
							}
						}
					}
					.txt-att {
						margin-top: calc(7 * var(--scale-ratio));
						color: var(--color-beige02);
						font-size: calc(15 * var(--font-ratio));
					}
				}
			}
		}
	}
}

/* ----------------------------------------------------------------------------------------------------
*  banner
* --------------------------------------------------------------------------------------------------*/
.sec-block.-banner {
	padding: calc(100 * var(--scale-ratio)) 0;
	background: var(--color-green01);
}

/* ----------------------------------------------------------------------------------------------------
*  content-ft
* --------------------------------------------------------------------------------------------------*/
.content-ft #sns .snsBtn {
	display: block;
}

#sns{
    margin: calc(100 * var(--scale-ratio)) auto 0;
	padding: calc(100 * var(--scale-ratio)) 0;
	border: 1px solid var(--color-gray02);
    font-weight: normal;
    .snsBtn{
        margin-bottom: calc(55 * var(--scale-ratio));
		font-size: 0;
		text-align: center;
        li{
            width: calc(60 * var(--scale-ratio));
			display: inline-block;
            img{
				max-width: calc(60 * var(--scale-ratio));
                width: 100%;
            }
        }
		li + li {
			margin-left: calc(50 * var(--scale-ratio));
		}
    }
    .snsCap{
        text-align: center;
        p{
            margin-bottom: 1em;
            color: var(--color-gray01);
			font-weight: bold;
            text-align: center;
            letter-spacing: 0.025em;
        }
    }
}

.content-ft .note-list {
	li {
		color: var(--color-gray01);
		font-size: 58.33%;
		line-height: 2;
		letter-spacing: 0.025em;
	}
}