/* ----------------------------------------------------
	header
---------------------------------------------------- */
.header {
	margin-bottom: min(16rem, 12.5vw);
	padding-top: min(7rem, 5.469vw);
}

.header__title {
	margin: 0 auto min(5.5rem, 4.297vw);
	padding-bottom: min(3rem, 2.344vw);
	width: min(52.6rem, 41.094vw);
	line-height: 2;
	font-size: min(2.6rem, 2.031vw);
	font-weight: 500;
	text-align: center;
	border-bottom: solid 1px rgb(var(--wht));
}

.header__lead--image {
	margin: 0 auto min(5rem, 3.906vw);
	width: min(52.6rem, 41.094vw);
}

.header__lead--text {
	margin-bottom: min(4.5rem, 3.516vw);
	line-height: 2.27;
	font-size: min(1.8rem, 1.406vw);
	text-align: center;
}

.header__lead--text .text:not(:last-of-type) {
	margin-bottom: 2em;
}

.header__lead--logo {
	margin: 0 auto min(6rem, 4.688vw);
	width: min(35.6rem, 27.813vw);
}

@media screen and (max-width: 768px) {
	.header {
		margin-bottom: 22.667vw;
		padding-top: 26.667vw;
	}

	.header__title {
		margin: 0 auto 10.667vw;
		padding: 0 4vw 6.4vw;
		width: calc(100% - 8vw);
		font-size: 4.8vw;
	}

	.header__lead {
		padding: 0 4vw;
		width: 100%;
	}

	.header__lead--image {
		margin-bottom: 6.4vw;
		width: 100%;
	}

	.header__lead--text {
		margin-bottom: 8vw;
		line-height: 2;
		font-size: 4vw;
		text-align: left;
	}

	.header__lead--text .text:not(:last-of-type) {
		margin-bottom: 0;
	}

	.header__lead--logo {
		margin-bottom: 10.133vw;
		width: 64.533vw;
	}
}

/* ---------------------------------------------------
	gnav
---------------------------------------------------- */
.gnav {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	left: auto;
	z-index: 999;
}

body.gnav-change .gnav {
	background-color: rgba(var(--brn), 0.5);
}

.gnav__list {
	height: min(8rem, 6.25vw);
	display: flex;
	align-items: center;
}

.gnav__list--item {
	padding-left: min(3.6rem, 2.813vw);
}

.gnav__list--item a {
	font-size: min(2rem, 1.563vw);
	text-decoration: none;
}

@media screen and (max-width: 768px) {
	.gnav {
		background-color: rgb(var(--brn));
		padding-top: 22.667vw;
		height: 100%;
		overflow: auto;
		display: block;
		transform: translateX(-100%);
		transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	body.gnav-change .gnav {
		background-color: rgb(var(--brn));
	}

	.gnav__list {
		padding: 0 8.533vw;
		display: block;
	}

	.gnav__list--item {
		padding: 0;
	}

	.gnav__list--item a {
		line-height: 2.25;
		font-size: 6.4vw;
		text-decoration: none;
	}

	.gnav__list--item a:hover {
		opacity: 0.6;
	}

	.overlay {
		background: rgba(var(--blk), 0.75);
		width: 100vw;
		height: 100vh;
		opacity: 0;
		visibility: hidden;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 998;
		content: "";
	}

	/* is-open */
	body.is-open {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		position: fixed;
		top: 0;
		left: 0;
	}

	.is-open .gnav {
		z-index: 999;
		transform: translateX(0);
	}

	.is-open .overlay {
		opacity: 1;
		visibility: visible;
		cursor: pointer;
	}
}

/*
	toggle
------------------------------ */
.toggle {
	display: none;
}

@media screen and (max-width: 768px) {
	.toggle {
		width: 8.267vw;
		height: 4.8vw;
		display: block;
		position: fixed;
		top: 6.4vw;
		left: 8vw;
		z-index: 1000;
	}

	.toggle__inner {
		width: 100%;
		height: 100%;
		position: relative;
		cursor: pointer;
	}

	.toggle__inner--item {
		background: rgb(var(--wht));
		width: 100%;
		height: 0.533vw;
		display: block;
		position: absolute;
		left: 50%;
		transition: all 0.6s;
	}

	body.gnav-change .toggle__inner--item {
		background: rgb(var(--brn));
	}

	.toggle__inner--item:nth-child(1) {
		top: 0;
		transform: translateX(-50%);
	}

	.toggle__inner--item:nth-child(2) {
		bottom: 0;
		transform: translateX(-50%);
	}

	/* is-open */
	.is-open .toggle__inner--item {
		background: rgb(var(--wht));
		transform-origin: 0 0;
	}

	.is-open .toggle__inner--item:nth-child(1) {
		top: 50%;
		transform: rotate(45deg) translate(-50%, -50%);
	}

	.is-open .toggle__inner--item:nth-child(2) {
		top: 50%;
		bottom: auto;
		transform: rotate(-45deg) translate(-50%, -50%);
	}
}

/* ----------------------------------------------------
	footer
---------------------------------------------------- */
.footer {
	background-color: rgb(var(--wht));
	padding: min(10rem, 7.813vw) 0 min(5rem, 3.906vw);
	color: rgb(var(--blk));
}

@media screen and (max-width: 768px) {
	.footer {
		padding: 12vw 0;
	}
}

/* 
	ucc 
------------------------------ */
.ucc {
	margin-bottom: min(7rem, 5.469vw);
	color: rgb(var(--brn));
	text-align: center;
}

.ucc__title {
	margin-bottom: min(1.6rem, 1.25vw);
	line-height: 1;
	font-family: var(--garamond);
	font-size: min(4.5rem, 3.516vw);
	font-style: italic;
	font-weight: 500;
}

.ucc__logo img {
	width: min(22.2rem, 17.344vw);
}

.ucc__logo figcaption {
	margin-top: min(2rem, 1.563vw);
	font-size: min(2.3rem, 1.797vw);
}

@media screen and (max-width: 768px) {
	.ucc {
		margin-bottom: 12vw;
	}

	.ucc__title {
		margin-bottom: 2.667vw;
		font-size: 9.6vw;
	}

	.ucc__logo img {
		width: 48.533vw;
	}

	.ucc__logo figcaption {
		margin-top: 4vw;
		font-size: 4vw;
	}
}

/* 
	hotels 
------------------------------ */
.hotels {
	margin-bottom: min(5rem, 3.906vw);
	color: rgb(var(--brn));
	font-size: min(1.8rem, 1.406vw);
	text-align: center;
}

.hotels__logo {
	margin-bottom: min(3.6rem, 2.813vw);
}

.hotels__logo img {
	width: min(15.8rem, 12.344vw);
}

.hotels__name {
	font-size: min(1.8rem, 1.406vw);
	font-weight: 400;
}

.hotels address {
	margin-bottom: min(3rem, 2.344vw);
	display: block;
}

.hotels__map {
	margin-top: min(7rem, 5.469vw);
}

.hotels__map iframe {
	width: 100%;
	height: min(45rem, 35.156vw);
}

.hotels .link-button {
	background: rgb(var(--link));
	color: rgb(var(--brn));
	border: solid 1px rgb(var(--brn));
}

.hotels .link-button:hover {
	background: rgb(var(--link-hover));
	color: rgb(var(--wht));
}

.hotels .link-button svg {
	fill: rgb(var(--brn));
}

.hotels .link-button:hover svg {
	fill: rgb(var(--wht));
}

@media screen and (max-width: 768px) {
	.hotels {
		margin-bottom: 6.4vw;
		font-size: 4vw;
	}

	.hotels__logo {
		margin-bottom: 6.4vw;
	}

	.hotels__logo img {
		width: 29.333vw;
	}

	.hotels__name {
		font-size: 4vw;
	}

	.hotels address {
		margin-bottom: 8vw;
	}

	.hotels__map {
		margin-top: 22.933vw;
	}

	.hotels__map iframe {
		height: 120.8vw;
	}
}

/* 
	footer__note 
------------------------------ */
.footer__note {
	margin: 0 auto min(6.5rem, 5.078vw);
	width: min(94rem, 73.438vw);
}

@media screen and (max-width: 768px) {
	.footer__note {
		margin-bottom: 12vw;
		padding: 0 4vw;
		width: 100%;
	}
}

/* 
	hotel-nav 
------------------------------ */
.footer .hotel-nav {
	margin-bottom: min(2rem, 1.563vw);
	line-height: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer .hotel-nav::before,
.footer .hotel-nav__item::after {
	content: "|";
}

.footer .hotel-nav__item a {
	padding: 0 1em;
	font-size: min(1.6rem, 1.25vw);
	text-decoration: none;
}

@media screen and (max-width: 768px) {
	.footer .hotel-nav {
		margin-bottom: 8vw;
		padding: 0 4vw;
		font-size: 2.667vw;
		text-align: center;
		display: block;
	}

	.footer .hotel-nav::before,
	.footer .hotel-nav__item::after {
		content: "";
	}

	.footer .hotel-nav__item:not(:last-of-type) {
		margin-bottom: 4vw;
	}

	.footer .hotel-nav__item a {
		padding: 0;
		line-height: 1.5;
		font-size: 4.267vw;
	}
}

/* 
	copy
------------------------------ */
.footer .copy {
	font-size: min(1.7rem, 1.328vw);
	text-align: center;
}

@media screen and (max-width: 768px) {
	.footer .copy {
		font-size: 2.667vw;
	}
}

/* ----------------------------------------------------
	main
---------------------------------------------------- */
.main .section {
	position: relative;
}

.main .section__title {
	margin-bottom: min(1.6rem, 1.25vw);
	line-height: 1;
	font-family: var(--garamond);
	font-style: italic;
	font-weight: 500;
}

.main .section__container {
	position: relative;
	z-index: 2;
}

.main .contBg {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

.main .contBg .contBg_clip {
	height: 100%;
	overflow: hidden;
	position: relative;
	clip-path: inset(0 0 0 0);
}

.main .contBg .contBg_clip img {
	width: 100%;
	min-height: 100vh;
	height: auto;
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
}

@media screen and (max-width: 768px) {
	.main .section__title {
		margin-bottom: 8vw;
	}
}

/* ----------------------------------------------------
	yoined
---------------------------------------------------- */
.yoined .section__container {
	margin: 0 auto;
	padding: min(24rem, 18.75vw) 0 min(9rem, 7.031vw);
	width: min(110.8rem, 86.563vw);
}

.yoined__title {
	margin-bottom: min(2.4rem, 1.875vw);
	width: min(19rem, 14.844vw);
}

.yoined__text {
	margin-bottom: min(3rem, 2.344vw);
	line-height: 2.27;
	font-size: min(1.8rem, 1.406vw);
}

.yoined .link-button {
	margin: 0;
}

@media screen and (max-width: 768px) {
	.yoined .section__container {
		padding: 32vw 4vw;
		width: 100%;
	}

	.yoined__title {
		margin-bottom: 6.4vw;
		width: 50.667vw;
	}

	.yoined__text {
		margin-bottom: 8vw;
		line-height: 2;
		font-size: 4vw;
	}
}

/* ----------------------------------------------------
	cocktails
---------------------------------------------------- */
.cocktails {
	background-color: rgb(var(--brn));
	padding-top: min(7rem, 5.469vw);
}

.cocktails .section__title {
	margin-bottom: min(5.5rem, 4.297vw);
	line-height: 1.2;
	line-height: normal;
	font-size: min(5.5rem, 4.297vw);
	text-align: center;
}

.cocktails .section__title small {
	font-size: min(4.4rem, 3.438vw);
	display: block;
}

.cocktails .section__container--item {
	display: flex;
}

.cocktails .section__container--item:nth-child(even) {
	flex-direction: row-reverse;
}

.cocktails__content,
.cocktails__image {
	width: 50%;
}

.cocktails__content {
	background-color: rgb(var(--beg));
	color: rgb(var(--blk));
	display: flex;
	align-items: center;
}

.cocktails__content--inner {
	padding: 0 min(5.5rem, 4.297vw);
	max-width: min(64rem, 50vw);
	width: 100%;
}

.cocktails .section__container--item:nth-child(odd) .cocktails__content {
	justify-content: flex-end;
}

.cocktails__title {
	margin-bottom: min(2rem, 1.563vw);
	line-height: normal;
	color: rgb(var(--title));
	font-family: var(--garamond);
	font-size: min(6rem, 4.688vw);
	font-weight: 500;
	font-style: italic;
}

.cocktails__title .jp {
	font-family: var(--mincho);
	font-size: min(2rem, 1.563vw);
	font-weight: 600;
}

.cocktails__title--small {
	font-size: min(3rem, 2.344vw);
	font-weight: 600;
	display: block;
}

.cocktails__title--small small {
	font-size: min(2rem, 1.563vw);
	display: block;
}

.cocktails__title--small small .price {
	font-size: min(2.5rem, 1.953vw);
	display: block;
}

.cocktails__text {
	color: rgb(var(--brn));
	line-height: 2;
	font-size: min(1.5rem, 1.172vw);
}

.cocktails__detail {
	margin-top: min(2.5rem, 1.953vw);
}

.cocktails__detail--title {
	background-position: center left;
	background-repeat: no-repeat;
	line-height: normal;
	color: rgb(var(--title));
	font-family: var(--garamond);
	font-size: min(4rem, 3.125vw);
	font-size: min(4.5rem, 3.516vw);
	font-weight: 500;
	font-style: italic;
}

.coffee .cocktails__detail--title {
	background-image: url(../img/icon-coffee.svg);
	background-size: min(5.8rem, 4.531vw) auto;
	padding-left: min(7rem, 5.469vw);
}

.profile .cocktails__detail--title {
	background-size: min(13.4rem, 10.469vw) auto;
	margin-bottom: min(1rem, 0.781vw);
	padding-left: min(15rem, 11.719vw);
	height: min(13.4rem, 10.469vw);
	text-align: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.cocktails__detail--title .jp {
	font-family: var(--mincho);
	font-size: min(2rem, 1.563vw);
	font-weight: 600;
}

.section__container--item:nth-child(odd) .profile .cocktails__detail--title {
	background-image: url(../img/profile01.webp);
}

.section__container--item:nth-child(even) .profile .cocktails__detail--title {
	background-image: url(../img/profile02.webp);
}

.cocktails__detail--title small {
	font-size: min(3rem, 2.344vw);
	font-weight: 600;
	display: block;
}

.espresso {
	margin: min(10rem, 7.813vw) auto 0;
	width: min(74rem, 57.813vw);
}

.espresso__title {
	line-height: normal;
	font-family: var(--garamond);
	font-size: min(6.2rem, 4.844vw);
	font-style: italic;
	font-weight: 500;
	text-align: center;
}

.espresso__title .jp {
	font-family: var(--mincho);
	font-size: min(2.4rem, 1.875vw);
	display: block;
}

.espresso__title--name {
	font-size: min(3.7rem, 2.891vw);
	font-weight: 600;
	display: flex;
	justify-content: center;
	align-items: center;
}

.espresso__title--name svg {
	margin: 0 min(2rem, 1.563vw);
	width: min(3.2rem, 2.5vw);
}

.espresso__price {
	margin: 1em 0 2em;
	line-height: normal;
	font-family: var(--garamond);
	font-size: min(2.5rem, 1.953vw);
	font-style: italic;
	font-weight: 600;
	text-align: center;
}

.espresso__image {
	margin-bottom: min(3rem, 2.344vw);
}

.espresso__text {
	line-height: 2;
	font-size: min(1.6rem, 1.25vw);
}

@media screen and (max-width: 768px) {
	.cocktails {
		padding-top: 13.333vw;
	}

	.cocktails .section__title {
		margin-bottom: 13.333vw;
		font-size: 8vw;
	}

	.cocktails .section__title small {
		font-size: 6.667vw;
	}

	.cocktails__title .jp {
		margin-bottom: 1em;
		line-height: 1;
		font-size: 4.8vw;
		display: block;
	}

	.cocktails__title--small small .price {
		font-size: 7.2vw;
	}

	.cocktails .section__container--item,
	.cocktails .section__container--item:nth-child(even) {
		flex-direction: column-reverse;
	}

	.cocktails__content,
	.cocktails__image {
		width: 100%;
	}

	.cocktails__content {
		display: block;
	}

	.cocktails__content--inner {
		padding: 21.333vw 4vw;
		max-width: 100%;
		width: 100%;
	}

	.cocktails .section__container--item:nth-child(odd) .cocktails__content--inner,
	.cocktails .section__container--item:nth-child(even) .cocktails__content--inner {
		margin: 0;
	}

	.cocktails__title {
		margin-bottom: 4vw;
		font-size: 16vw;
	}

	.cocktails__title--small {
		font-size: 7.2vw;
	}

	.cocktails__title--small small {
		font-size: 5.333vw;
	}

	.cocktails__text {
		font-size: 4vw;
	}

	.cocktails__detail {
		margin-top: 12vw;
	}

	.cocktails__detail--title {
		font-size: 8vw;
	}

	.coffee .cocktails__detail--title {
		background-size: 13.333vw auto;
		padding-left: 16vw;
	}

	.profile .cocktails__detail--title {
		background-size: 28.8vw auto;
		margin-bottom: 4.267vw;
		padding-left: 34.133vw;
		height: 28.8vw;
	}

	.cocktails__detail--title .jp {
		font-size: 0.5em;
		display: block;
	}

	.cocktails__detail--title small {
		font-size: 5.333vw;
	}

	.espresso {
		margin-top: 13.333vw;
		padding: 0 4vw;
		width: 100%;
	}

	.espresso__title {
		font-size: 10.667vw;
	}

	.espresso__title--name {
		margin-bottom: 4vw;
		font-size: 5.6vw;
		flex-direction: column;
	}

	.espresso__title .jp {
		margin-top: 0.25em;
		font-size: 0.5em;
	}

	.espresso__title--name svg {
		margin: 0;
		width: 6.4vw;
	}

	.espresso__price {
		font-size: 7.2vw;
	}

	.espresso__image {
		margin-bottom: 4.8vw;
	}

	.espresso__text {
		font-size: 4vw;
	}
}

/* ----------------------------------------------------
	collaboration
---------------------------------------------------- */
.collaboration {
	background-color: rgb(var(--brn));
	padding-top: min(10rem, 7.813vw);
}

.collaboration__image {
	margin-bottom: min(12rem, 9.375vw);
}

.collaboration__title {
	margin-bottom: min(7rem, 5.469vw);
	line-height: normal;
	font-family: var(--garamond);
	font-size: min(6.1rem, 4.766vw);
	font-style: italic;
	font-weight: 500;
	text-align: center;
}

.collaboration .section__container {
	margin: 0 auto;
	padding-bottom: min(12rem, 9.375vw);
	width: min(101rem, 78.906vw);
	display: flex;
	justify-content: space-between;
}

.collaboration .section__container--item {
	width: 50%;
}

.collaboration .section__container--item:nth-child(odd) {
	padding-right: min(3.2rem, 2.5vw);
}

.collaboration .section__container--item:nth-child(even) {
	padding-left: min(3.2rem, 2.5vw);
}

.collaboration__name {
	margin-bottom: 1em;
	line-height: normal;
	font-size: min(3.1rem, 2.422vw);
	font-weight: 400;
}

.collaboration__name .en {
	font-size: min(2.5rem, 1.953vw);
	display: block;
}

.collaboration__post {
	height: min(9.8rem, 7.656vw);
	font-size: min(1.8rem, 1.406vw);
}

.collaboration__text {
	margin-top: 2em;
	line-height: 2;
	font-size: min(1.5rem, 1.172vw);
}

@media screen and (max-width: 768px) {
	.collaboration {
		padding-top: 16vw;
	}

	.collaboration__image {
		margin-bottom: 12vw;
	}

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

	.collaboration .section__container {
		padding: 0 4vw 16vw;
		width: 100%;
		display: block;
	}

	.collaboration .section__container--item {
		width: 100%;
	}

	.collaboration .section__container--item:not(:last-of-type) {
		margin-bottom: 12vw;
	}

	.collaboration .section__container--item:nth-child(odd),
	.collaboration .section__container--item:nth-child(even) {
		padding: 0;
	}

	.collaboration__name {
		font-size: 6.4vw;
	}

	.collaboration__name .en {
		font-size: 4.8vw;
	}

	.collaboration__post {
		height: auto;
		font-size: 4.267vw;
	}

	.collaboration__text {
		font-size: 3.733vw;
	}
}

/* ----------------------------------------------------
	reservations
---------------------------------------------------- */
.reservations {
	background-color: rgb(var(--beg));
	padding: min(10rem, 7.813vw) 0;
	color: rgb(var(--brn));
}

.reservations .section__container {
	margin: 0 auto;
	width: min(101rem, 78.906vw);
}

.reservations .section__title {
	margin-bottom: min(6rem, 4.688vw);
	color: rgba(47, 18, 13, 1);
	font-size: min(4.5rem, 3.516vw);
	text-align: center;
}

.reservations__list {
	margin-bottom: min(4.5rem, 3.516vw);
	padding-bottom: min(4.5rem, 3.516vw);
	border-bottom: solid 1px rgb(var(--brn));
	display: flex;
	justify-content: space-between;
}

.reservations__list--item {
	width: min(46.7rem, 36.484vw);
}

.reservations__image {
	margin-bottom: min(2rem, 1.563vw);
}

.reservations__logo {
	margin-bottom: min(1rem, 0.781vw);
	height: min(10.5rem, 8.203vw);
	display: flex;
	justify-content: center;
	align-items: center;
}

.shop01 .reservations__logo img {
	width: min(19.8rem, 15.469vw);
}

.shop02 .reservations__logo img {
	width: min(17rem, 13.281vw);
}

.reservations__content {
	color: rgba(47, 18, 13, 1);
	text-align: center;
}

.reservations__content--name {
	margin-bottom: min(2rem, 1.563vw);
	font-size: min(2rem, 1.563vw);
}

.reservations__content--detail {
	font-size: min(1.5rem, 1.172vw);
}

.reservations__table {
	margin: 0 auto;
	text-align: left;
}

.reservations__table--th {
	padding-right: 1em;
}

.reservations__tel {
	color: rgba(47, 18, 13, 1);
	text-align: center;
}

.reservations__tel--title {
	font-size: min(2.5rem, 1.953vw);
}

.reservations__tel--number {
	line-height: 1.5;
	font-size: min(4.7rem, 3.672vw);
}

.reservations__tel--number small {
	font-size: min(1.8rem, 1.406vw);
	display: block;
}

@media screen and (max-width: 768px) {
	.reservations {
		padding: 21.333vw 0;
	}

	.reservations .section__container {
		padding: 0 4vw;
		width: 100vw;
	}

	.reservations .section__title {
		margin-bottom: 9.6vw;
		font-size: 8vw;
	}

	.reservations__list {
		margin-bottom: 9.6vw;
		padding-bottom: 9.6vw;
		display: block;
	}

	.reservations__list--item {
		width: 100%;
	}

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

	.reservations__image {
		margin-bottom: 5.333vw;
	}

	.reservations__logo {
		margin-bottom: 4vw;
		height: auto;
	}

	.shop01 .reservations__logo img {
		width: 40.8vw;
	}

	.shop02 .reservations__logo img {
		width: 40vw;
	}

	.reservations__content--name {
		margin-bottom: 0;
		font-size: 4.8vw;
	}

	.reservations__content--detail {
		font-size: 3.467vw;
	}

	.reservations__tel--title {
		font-size: 4vw;
	}

	.reservations__tel--number {
		font-size: 7.467vw;
	}

	.reservations__tel--number small {
		font-size: 3.467vw;
	}
}