@charset "UTF-8";

.restaurant {
	background: rgb(var(--restaurantBase)) url(../img/restaurantBg.svg) center top repeat-y;
	background-size: 100% auto;
	position: relative;
}

.restaurant .obj {
	position: absolute;
	z-index: 1;
}

.restaurant .obj.obj01 {
	width: 308px;
	top: 950px;
	left: 0;
}

.restaurant .obj.obj02 {
	width: 284px;
	top: 2200px;
	right: 0;
}

.restaurant .obj.obj03 {
	width: 230px;
	top: 4000px;
	left: 0;
}

.restaurant .obj.obj04 {
	width: 300px;
	top: 5700px;
	right: 0;
}

.restaurant .obj.obj05 {
	width: 368px;
	top: 7200px;
	right: 0;
}

.restaurant .obj.obj06 {
	width: 192px;
	top: 8800px;
	right: 0;
}

.restaurant .obj.obj07 {
	width: 266px;
	top: 9000px;
	left: 0;
}

.restaurant .obj.obj08 {
	width: 248px;
	top: 11150px;
	left: 0;
}

.restaurant .obj.obj09 {
	width: 320px;
	top: 11600px;
	right: 0;
}

.restaurant .main {
	margin: 0 auto;
	padding: 116px 0;
	width: 1000px;
	position: relative;
	z-index: 2;
}

.restaurant__title {
	margin-bottom: 40px;
	line-height: 1;
	color: rgb(var(--nvy));
	font-family: var(--forevs);
	font-size: 68px;
	letter-spacing: 0.05em;
}

.restaurant__lead {
	margin-bottom: 50px;
	font-size: 18px;
	font-weight: bold;
}

.restaurant__nav {
	margin-bottom: 80px;
}

.restaurant__nav--list {
	display: flex;
	justify-content: center;
}

.restaurant__nav--item {
	margin: 0 28px;
}

.restaurant__nav--item a {
	background: rgb(var(--nvy)) url(../img/navArrow.svg) left 60px bottom 18px no-repeat;
	background-size: 6px auto;
	width: 120px;
	height: 120px;
	color: rgb(var(--wht));
	text-decoration: none;
	border-radius: 120px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.restaurant__nav--item a .area {
	line-height: 1;
	font-family: var(--forevs);
	font-size: 21px;
	font-weight: 500;
	text-align: center;
	display: block;
}

.restaurant__article {
	margin-bottom: 120px;
	position: relative;
	z-index: 2;
}

.restaurant__article:last-of-type {
	margin-bottom: 60px;
}

.restaurant__article--title {
	line-height: 1;
	color: rgb(var(--nvy));
	font-family: var(--forevs);
	font-size: 56px;
	letter-spacing: 0.005em;
	position: relative;
	z-index: 2;
	bottom: -8px;
}

.restaurant__article--content {
	background: rgb(var(--wht));
	padding: 58px 55px;
	border-top: solid 10px rgb(var(--nvy));
	position: relative;
}

.restaurant__article--content::before {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	content: "";
}

.restaurant__section:not(:last-of-type) {
	margin-bottom: 58px;
	padding-bottom: 76px;
	border-bottom: solid 1px rgb(var(--nvy));
}

/* hokkaido */
#hokkaido .restaurant__article--content::before {
	background-image: url(../img/obj01.svg);
	width: 162px;
	height: 172px;
	top: -74px;
	right: 24px;
}

/* tokyo */
#tokyo .restaurant__article--content::before {
	background-image: url(../img/obj02.svg);
	width: 162px;
	height: 168px;
	top: -64px;
	right: 38px;
}

/* hakone */
#hakone .restaurant__article--content::before {
	background-image: url(../img/obj03.svg);
	width: 180px;
	height: 186px;
	top: -40px;
	right: 56px;
}

/* kansai */
#kansai .restaurant__article--content::before {
	background-image: url(../img/obj04.svg);
	width: 186px;
	height: 150px;
	top: 4px;
	right: 36px;
}

/* west */
#west .restaurant__article--content::before {
	background-image: url(../img/obj05.svg);
	width: 184px;
	height: 166px;
	top: -26px;
	right: 32px;
}

@media screen and (max-width: 1280px) {
	.restaurant .obj.obj01 {
		width: 24.063vw;
		top: 74.219vw;
	}

	.restaurant .obj.obj02 {
		width: 22.188vw;
		top: 171.875vw;
	}

	.restaurant .obj.obj03 {
		width: 17.969vw;
		top: 312.5vw;
	}

	.restaurant .obj.obj04 {
		width: 23.438vw;
		top: 445.313vw;
	}

	.restaurant .obj.obj05 {
		width: 28.75vw;
		top: 562.5vw;
	}

	.restaurant .obj.obj06 {
		width: 15vw;
		top: 687.5vw;
	}

	.restaurant .obj.obj07 {
		width: 20.781vw;
		top: 703.125vw;
	}

	.restaurant .obj.obj08 {
		width: 19.375vw;
		top: 871.094vw;
	}

	.restaurant .obj.obj09 {
		width: 25vw;
		top: 906.25vw;
	}

	.restaurant .main {
		padding: 9.063vw 0;
		width: 78.125vw;
	}

	.restaurant__title {
		margin-bottom: 3.125vw;
		font-size: 5.313vw;
	}

	.restaurant__lead {
		margin-bottom: 3.906vw;
		font-size: 1.406vw;
	}

	.restaurant__nav {
		margin-bottom: 6.25vw;
	}

	.restaurant__nav--item {
		margin: 0 2.188vw;
	}

	.restaurant__nav--item a {
		background-position: left 4.688vw bottom 1.406vw;
		background-size: 0.469vw auto;
		width: 9.375vw;
		height: 9.375vw;
		border-radius: 9.375vw;
	}

	.restaurant__nav--item a .area {
		font-size: 1.641vw;
	}

	.restaurant__article {
		margin-bottom: 9.375vw;
	}

	.restaurant__article:last-of-type {
		margin-bottom: 4.688vw;
	}

	.restaurant__article--title {
		font-size: 4.375vw;
		bottom: -0.625vw;
	}

	.restaurant__article--content {
		padding: 4.531vw 4.297vw;
	}

	.restaurant__section:not(:last-of-type) {
		margin-bottom: 4.531vw;
		padding-bottom: 5.938vw;
	}

	/* hokkaido */
	#hokkaido .restaurant__article--content::before {
		width: 12.656vw;
		height: 13.438vw;
		top: -5.781vw;
		right: 1.875vw;
	}

	/* tokyo */
	#tokyo .restaurant__article--content::before {
		width: 12.656vw;
		height: 13.125vw;
		top: -5vw;
		right: 2.969vw;
	}

	/* hakone */
	#hakone .restaurant__article--content::before {
		width: 14.063vw;
		height: 14.531vw;
		top: -3.125vw;
		right: 4.375vw;
	}

	/* kansai */
	#kansai .restaurant__article--content::before {
		width: 14.531vw;
		height: 11.719vw;
		top: 0.313vw;
		right: 2.813vw;
	}

	/* west */
	#west .restaurant__article--content::before {
		width: 14.375vw;
		height: 12.969vw;
		top: -2.031vw;
		right: 2.5vw;
	}
}

@media screen and (max-width: 768px) {
	.restaurant .obj.obj01 {
		width: 32.853vw;
		top: 280vw;
	}

	.restaurant .obj.obj02 {
		width: 30.293vw;
		top: 409.6vw;
	}

	.restaurant .obj.obj03 {
		width: 24.533vw;
		top: 933.333vw;
	}

	.restaurant .obj.obj04 {
		width: 32vw;
		top: 1253.333vw;
	}

	.restaurant .obj.obj05 {
		width: 39.253vw;
		top: 1560vw;
	}

	.restaurant .obj.obj06 {
		width: 20.48vw;
		top: 1866.667vw;
	}

	.restaurant .obj.obj07 {
		width: 28.373vw;
		top: 1920vw;
	}

	.restaurant .obj.obj08 {
		width: 26.453vw;
		top: 2040vw;
	}

	.restaurant .obj.obj09 {
		width: 34.133vw;
		top: 2474.667vw;
	}

	.restaurant .main {
		padding: 18.667vw 0;
		width: calc(100% - 14.4vw);
	}

	.restaurant__title {
		margin-bottom: 6.4vw;
		font-size: 11.733vw;
	}

	.restaurant__lead {
		margin-bottom: 8vw;
		font-size: 4.267vw;
	}

	.restaurant__nav {
		margin-bottom: 10.667vw;
	}

	.restaurant__nav--list {
		flex-wrap: wrap;
	}

	.restaurant__nav--item {
		margin: 0 calc((100% - 23vw * 3) / 2) 0 0;
		width: 23vw;
	}

	.restaurant__nav--item:nth-child(3),
	.restaurant__nav--item:nth-child(5) {
		margin-right: 0;
	}

	.restaurant__nav--item a {
		background-position: left 11.2vw bottom 3.2vw;
		background-size: 1.067vw auto;
		width: 23vw;
		height: 23vw;
		border-radius: 23vw;
	}

	.restaurant__nav--item a .area {
		font-size: 4vw;
	}

	.restaurant__article {
		margin-bottom: 16vw;
	}

	.restaurant__article:last-of-type {
		margin-bottom: 8vw;
	}

	.restaurant__article--title {
		font-size: 9.6vw;
		bottom: -1.6vw;
	}

	.restaurant__article--content {
		padding: 10.667vw 6.4vw;
		border-top-width: 2.667vw;
	}

	.restaurant__section:not(:last-of-type) {
		margin-bottom: 8vw;
		padding-bottom: 10.667vw;
	}

	/* hokkaido */
	#hokkaido .restaurant__article--content::before {
		width: 27.648vw;
		height: 29.355vw;
		top: -11.2vw;
		right: -6.4vw;
	}

	/* tokyo */
	#tokyo .restaurant__article--content::before {
		width: 27.648vw;
		height: 28.672vw;
		top: -11.2vw;
		right: -6.4vw;
	}

	/* hakone */
	#hakone .restaurant__article--content::before {
		width: 30.72vw;
		height: 31.744vw;
		top: -11.2vw;
		right: -6.4vw;
	}

	/* kansai */
	#kansai .restaurant__article--content::before {
		width: 31.744vw;
		height: 25.6vw;
		top: -11.2vw;
		right: -6.4vw;
	}

	/* west */
	#west .restaurant__article--content::before {
		width: 31.403vw;
		height: 28.331vw;
		top: -11.2vw;
		right: -6.4vw;
	}
}

/*
	hotel
------------------------------ */
.hotel__name {
	margin-bottom: 30px;
	line-height: 1;
	color: rgb(var(--nvy));
	font-family: var(--forevs);
	font-size: 44px;
	letter-spacing: 0.05em;
}

.hotel__name .jp {
	margin-top: 10px;
	font-family: var(--gothic);
	font-size: 20px;
	display: block;
}

.hotel__wrapper {
	position: relative;
}

.hotel__tab {
	width: 120px;
	position: absolute;
	top: 0;
	left: -55px;
}

.hotel__tab--item {
	padding-left: 1em;
	width: 100%;
	height: 40px;
	line-height: 1;
	color: rgb(var(--red));
	font-family: var(--forevs);
	font-size: 18px;
	border: solid 1px rgb(var(--red));
	border-left: none;
	border-radius: 0 40px 40px 0;
	display: flex;
	align-items: center;
	transition: all 0.5s ease 0s;
	cursor: pointer;
}

.hotel__tab--item:hover,
.hotel__tab--item.active {
	background: rgb(var(--red));
	color: rgb(var(--wht));
}

.hotel__tab--item:not(:last-of-type) {
	margin-bottom: 12px;
}

.hotel__content {
	margin-left: auto;
	width: 780px;
	opacity: 0;
	display: none;
	transition: opacity 0.5s ease;
}

.hotel__content.active {
	opacity: 1;
	display: block;
}

.hotel__image {
	margin-bottom: 20px;
	position: relative;
}

.hotel__image.collaboration::before {
	background: url(../img/collaboration.webp) center no-repeat;
	background-size: cover;
	width: 194px;
	height: 162px;
	position: absolute;
	right: -44px;
	bottom: -26px;
	content: "";
}

.hotel__content .title {
	line-height: 1.5;
	font-size: 26px;
	display: flex;
	align-items: flex-start;
}

.hotel__content .title .category {
	background: rgb(var(--gld));
	margin: 10px 10px 0 0;
	padding: 0 1em;
	height: 22px;
	color: rgb(var(--wht));
	font-size: 14px;
	border-radius: 22px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
}

.hotel__content .price {
	margin-bottom: 0;
	line-height: 1.5;
	font-size: 20px;
	font-weight: bold;
}

.hotel__content .price small {
	font-size: 0.7em;
}

.hotel__content .date {
	font-weight: bold;
}

.hotel__content .text {
	margin: 1em 0;
	font-size: 16px;
}

.hotel__content .place {
	margin-bottom: 16px;
	display: flex;
}

.hotel__content .place__inner {
	padding: 0.25em 1em;
	line-height: 1;
	font-size: 14px;
	font-weight: bold;
	border: solid 1px rgb(var(--blk));
	border-radius: 24px;
}

.hotel__content .place__inner:not(:last-of-type) {
	margin-right: 10px;
}

.hotel__content .linkBtn {
	margin-top: 50px;
}

.hotel__content .linkBtn a {
	background: rgb(var(--nvy));
	margin-left: auto;
	width: 240px;
}

.hotel__content .linkBtn a svg {
	stroke: rgb(var(--wht));
}

@media screen and (max-width: 1280px) {
	.hotel__name {
		margin-bottom: 2.344vw;
		font-size: 3.438vw;
	}

	.hotel__name .jp {
		margin-top: 0.781vw;
		font-size: 1.563vw;
	}

	.hotel__tab {
		width: 9.375vw;
		left: -4.297vw;
	}

	.hotel__tab--item {
		height: 3.125vw;
		font-size: 1.406vw;
		border-radius: 0 3.125vw 3.125vw 0;
	}

	.hotel__tab--item:not(:last-of-type) {
		margin-bottom: 0.938vw;
	}

	.hotel__content {
		width: 60.938vw;
	}

	.hotel__image {
		margin-bottom: 1.563vw;
	}

	.hotel__image.collaboration::before {
		width: 15.156vw;
		height: 12.656vw;
		right: -3.438vw;
		bottom: -2.031vw;
	}

	.hotel__content .title {
		font-size: 2.031vw;
	}

	.hotel__content .title .category {
		margin: 0.781vw 0.781vw 0 0;
		height: 1.719vw;
		font-size: 1.094vw;
		border-radius: 1.719vw;
	}

	.hotel__content .price {
		font-size: 1.563vw;
	}

	.hotel__content .text {
		font-size: 1.25vw;
	}

	.hotel__content .place {
		margin-bottom: 1.25vw;
	}

	.hotel__content .place__inner {
		font-size: 1.094vw;
		border-radius: 1.875vw;
	}

	.hotel__content .place__inner:not(:last-of-type) {
		margin-right: 0.781vw;
	}

	.hotel__content .linkBtn {
		margin-top: 3.906vw;
	}

	.hotel__content .linkBtn a {
		width: 18.75vw;
	}
}

@media screen and (max-width: 768px) {
	.hotel__name {
		margin-bottom: 6.4vw;
		font-size: 8vw;
		letter-spacing: 0;
	}

	.hotel__name .jp {
		margin-top: 2.667vw;
		font-size: 4.8vw;
	}

	.hotel__wrapper {
		position: relative;
	}

	.hotel__tab {
		width: 100%;
		position: static;
		display: flex;
		flex-wrap: wrap;
	}

	.hotel__tab--item {
		padding-left: 0;
		width: 22.4vw;
		height: 10.667vw;
		font-size: 3.733vw;
		text-align: center;
		border-left: solid 1px rgb(var(--red));
		border-radius: 10.667vw;
		justify-content: center;
	}

	.hotel__tab--item:not(:last-of-type) {
		margin-bottom: 0;
	}

	.hotel__tab--item:not(:nth-child(3n)) {
		margin-right: calc((100% - 22.4vw * 3) / 2);
		margin-bottom: calc((100% - 22.4vw * 3) / 2);
	}

	.hotel__content {
		width: 100%;
	}

	.hotel__image {
		margin-bottom: 5.333vw;
	}

	.hotel__image.collaboration::before {
		width: 26.133vw;
		height: 21.867vw;
		right: -5.867vw;
		bottom: -4.267vw;
	}

	.hotel__content .title {
		font-size: 4.8vw;
		flex-direction: column;
	}

	.hotel__content .title .category {
		margin: 0 0 2.667vw;
		height: 5.333vw;
		font-size: 3.733vw;
		border-radius: 5.333vw;
	}

	.hotel__content .price {
		font-size: 4.267vw;
	}

	.hotel__content .date {
		font-size: 3.2vw;
	}

	.hotel__content .text {
		font-size: 3.733vw;
	}

	.hotel__content .place {
		margin-bottom: 16px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.hotel__content .place__inner {
		padding: 0.25em 1em;
		line-height: 1.25;
		font-size: 3.733vw;
		border-radius: 6.4vw;
	}

	.hotel__content .place__inner:not(:last-of-type) {
		margin-right: 0;
		margin-bottom: 1.6vw;
	}

	.hotel__content .linkBtn {
		margin-top: 8vw;
	}

	.hotel__content .linkBtn a {
		margin-left: 0;
		width: 51.733vw;
	}
}

/* ----------------------------------------------------
	restaurant__link
---------------------------------------------------- */
.restaurant__link.linkBtn a {
	background: rgb(var(--aqu));
	margin: 0 auto;
	width: 330px;
	color: rgb(var(--nvy));
}

.restaurant__link.linkBtn a svg {
	stroke: rgb(var(--nvy));
}

@media screen and (max-width: 1280px) {
	.restaurant__link.linkBtn a {
		width: 25.781vw;
	}
}

@media screen and (max-width: 768px) {
	.restaurant__link.linkBtn a {
		width: 100%;
	}
}