@charset "UTF-8";

/* 共通変数 */
:root {
	--contens-maxwidth: 1080px; /* コンテンツ幅 */
	--contens-padding: 0 20px; /* スマホサイズ時 コンテンツ幅 */

	--c-body: #413434; /* 本文 */
	--c-link: #896265; /* テキストリンク */
	--c-pink: #e5819a; /* アクセントなど */
	--c-logopink: #df3b62; /* アクセントなど */
	--c-green: #3eb1b4; /* アクセントなど */
	--c-brown: #550a10; /* 見出し・アクセント */
	--c-white: #fff; /* 見出し・背景など */
	--bg-gray: #efefef; /* 本文 */
	--bg-gradient-primary: linear-gradient(45deg,  rgba(252,226,231,0.5) 0%,rgba(252,228,238,0.5) 26%,rgba(203,242,244,0.5) 50%,rgba(253,218,225,0.5) 73%,rgba(255,237,244,0.5) 100%);
; /* グラデーション */
	--bg-gradient-reserve: linear-gradient(90deg, rgba(255, 198, 214, 1), rgba(230, 128, 155, 1) 50%, rgba(227, 86, 126, 1)), linear-gradient(175deg, rgba(244, 147, 174, 1), rgba(229, 107, 139, 1) 50%, rgba(227, 86, 126, 1)), linear-gradient(90deg, rgba(244, 147, 174, 1), rgba(229, 107, 139, 1) 50%, rgba(227, 86, 126, 1)); /* 予約ボタン用 グラデーション */
	--bg-hover-pink: #e5819a; /* ボタンホバー時 ピンク */
	--bg-hover-brown: #896265; /* ボタンホバー時 ブラウン */
	--opacity-hover: .7; /* ホバー時 透過 */

	--font-jp-base: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo,sans-serif; /* 本文フォント */
	--font-jp-mincyo: "Sawarabi Mincho", serif; /* 見出し用 フォント */
	--font-en: "Lato",sans-serif; /* 見出し用 英語フォント */

	--weight-regular: 400; /* フォント Regularー */
	--weight-medium: 500; /* フォント Medium */
	--weight-bold: 700; /* フォント Bold */

	--font-size-10px: 0.6rem;
	--font-size-11px: 0.6875rem;
	--font-size-12px: 0.75rem;
	--font-size-14px: 0.875rem;
	--font-size-16px: 1rem;
	--font-size-18px: 1.125rem;
	--font-size-20px: 1.25rem;
	--font-size-22px: 1.375rem;
	--font-size-24px: 1.5rem;
	--font-size-26px: 1.625rem;
	--font-size-28px: 1.75rem;
	--font-size-30px: 1.875rem;
	--font-size-32px: 2rem;
	--font-size-36px: 2.25rem;
	--font-size-40px: 2.5rem;
	--font-size-42px: 2.625rem;
	--font-size-46px: 2.875rem;

	--line-height-base: 1.5; /* 本文 行間 */
	--line-height-hi: 1.7; /* 長文 行間 */
	--letter-spacing-base: .04em; /* 本文 文字間 */
	--drop-shadow-base: drop-shadow(0px 3px 6px rgba(0, 0, 0, .16)); /* ドロップシャドウ デフォルト */
	--drop-shadow-pink: drop-shadow(0px 3px 4px rgba(223, 59, 98, .16)); /* ドロップシャドウ ピンク背景用 */
}

/* 基本 */
body {
	font-family: var(--font-jp-base); /* フォントファミリー */
	font-weight: var(--weight-medium); /* フォントウェイト */
	line-height: var(--line-height-base); /* 文字間 */
	font-size: var(--font-size-16px); /* サイズ指定時はrem */
	letter-spacing: var(--letter-spacing-base); /* 行間 */
	overflow-x: hidden; /* 横スクロール */
}

main {
	margin-bottom: 90px;
}

/* ボタン 基本フォント */
button {
	font-family: var(--font-jp-base);
}

.sp-only {
	display: none;
}
.pc-only {
	display: block;
}

a[href^="tel:"] {
	pointer-events: none;
}

/*----------------------------------
	ヘッダー
----------------------------------*/
.head {
	width: 100%;
	background: linear-gradient(180deg, rgba(255,255,255,1) 0%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);
	border-top:10px solid #df3b62;
	padding-top: 30px;
	padding-bottom: 40px;
}

.head__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.head__top {
	margin-bottom: 40px;
	position: relative;
}
.logo {
	display: block;
	width: 100%;
	max-width: 174px;
	margin: 0 auto;
}

.head__reserve {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 240px;
	background: var(--bg-gradient-reserve);
	border-radius: 40px;
	text-align: center;
	font-size: var(--font-size-18px);
	color: var(--c-white);
	padding: 20px 0;
	position: absolute;
	top: 0;
	right: 0;
	transition: .3s ease;

	filter: var(--drop-shadow-pink);
}

.head__reserve:hover {
	opacity: .7;
}


/* ヘッダー内のナビゲーション
----------------------------------*/
.gnav__list {
	display: flex;
	justify-content: space-around;
	font-size: var(--font-size-18px);
	color: var(--c-brown);
}

.gnav__subitem {
	position: relative;
}

.gnav__content {
	visibility: hidden;
	width: 300px;
	background: rgba(255, 255, 255, .5);
	padding: 0 10px;
	position: absolute;
	top: 40px;
	left: 0;
	z-index: 999999;
	transition: .3s ease;
}

.gnav__content li {
	padding: 20px 0;
}

.gnav__subitem:hover .gnav__content {
	display: block;
	visibility: visible;
	opacity: 1;
}

.link {
	color: var(--c-brown);
	letter-spacing: .04em;
	position: relative;
}

.link::after, .foot-link::after {
	content: "";
	width: 100%;
	height: 1px;
	background: var(--c-brown);
	position: absolute;
	bottom: -5px;
	left: 0;
	transform: scale(0, 1);
	transform-origin: center top;
	transition: transform .3s ease;
}

.link:hover::after, .foot-link:hover::after {
	transform: scale(1, 1);
}

/*----------------------------------
	フッター
----------------------------------*/
.foot {
	background: var(--bg-gradient-primary);
}

.foot__inner {
	max-width: 1200px;
	text-align: center;
	padding: 80px 0;
	margin: 0 auto;
}

.foot__content {
	display: flex;
	justify-content: space-between;
	text-align: left;
	padding-bottom: 60px;
}

.foot__link-list {
	display: flex;
	justify-content: space-evenly;
}
.foot__list {
	padding-right: 10vw;
}

.foot__item {
	font-size: var(--font-size-16px);
	font-weight: var(--weight-regular);
	color: var(--c-brown);
	text-transform: uppercase;
}

.foot__item:not(:last-child) {
	padding-bottom: 40px;
}

.foot-link {
	color: var(--c-brown);
	letter-spacing: .04em;
	position: relative;
}

.foot__copyright {
	font-size:var(--font-size-14px);
	color: var(--c-brown);
}

.foot__logo {
	display: block;
	order: 1;
	width: 100%;
	max-width: 174px;
}

/*----------------------------------
	見出し・下層見出し
----------------------------------*/
.contents-ttl,.low-contents-ttl {
	display: flex;
	flex-direction: column;
	color: var(--c-brown);
	text-align: center;
	margin-bottom: 40px;
}

.low-contents-ttl {
	background: var(--bg-gradient-primary);
	padding: 30px 0;
	margin-bottom: 80px;
}
.contents-ttl::before,
.low-contents-ttl::before {
	content: "";
	width: 100%;
	height: 100%;
	background: url(/assets/images/common/bg_contents-ttl.svg);
	background-repeat: no-repeat;
	background-position: center;

}
.contents-ttl::before {padding-bottom: 30px;}
.low-contents-ttl::before {padding-bottom: 20px;}

.contents-ttl__ja,
.low-contents-ttl__ja {
	font-family: var(--font-jp-mincyo);
	letter-spacing: .06em;
}
.contents-ttl__ja {font-size: var(--font-size-20px);}
.low-contents-ttl__ja {font-size: var(--font-size-18px);}

.contents-ttl__en,
.low-contents-ttl__en {
	width: 100%;
	font-family: var(--font-en);
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-top: -5px;
}

.contents-ttl__en {font-size: var(--font-size-46px);}
.low-contents-ttl__en {font-size: var(--font-size-42px);}

.contents-ttl--wh,
.low-contents-ttl--wh {
	color: var(--c-white);
}

.contents-ttl--wh::before,
.low-contents-ttl--wh::before {
	filter: invert(97%) sepia(100%) saturate(0%) hue-rotate(341deg) brightness(111%) contrast(101%);
}

.txt-space {
	padding: 0 10px;
}

/*----------------------------------
	リンクボタン
----------------------------------*/
.contents-btn,
.low-contents-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 400px;
	height: 66px;
	background-color: var(--c-white);
	border: 2px solid var(--c-link);
	border-radius: 33px;
	font-size: var(--font-size-16px);
	font-weight: var(--weight-bold);
	color: var(--c-link);
	position: relative;
	transition: .3s ease;
}

.contents-btn {
	margin: 0 auto;
}

.low-btn-wrapper {
	margin-top: 90px;
	display: flex;
	justify-content: center;
}

.contents-btn::before,
.low-contents-btn::before {
	content: "";
	width: 14px;
	height: 2px;
	background-color: var(--c-link);
	border-radius: 2px;
	position: absolute;
	top: 50%;
	transition: .3s ease;
}

.contents-btn::before {
	right: 19px;
	transform: translateY(calc(-50% - 3px)) rotate(30deg);
}

.low-contents-btn::before {
	left: 19px;
	transform: translateY(calc(-50% - 3px)) rotate(-30deg);
}

.contents-btn::after,
.low-contents-btn::after {
	content: "";
	width: 26px;
	height: 2px;
	background-color: var(--c-link);
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	transition: .3s ease;
}

.contents-btn::after {right: 20px;}
.low-contents-btn::after{left: 20px;}

.contents-btn:hover::before {
	background-color: var(--c-white);
	right: 14px;
}

.low-contents-btn:hover::before {
	background-color: var(--c-white);
	left: 14px;
}

.contents-btn:hover::after {
	background-color: var(--c-white);
	right: 15px;
}

.low-contents-btn:hover::after {
	background-color: var(--c-white);
	left: 15px;
}

.contents-btn:hover,
.low-contents-btn:hover {
	background-color: var(--c-link);
	color: var(--c-white);
}

/* タブレットサイズ */
@media screen and (max-width: 1199px) {
	/*----------------------------------
		ヘッダー
	----------------------------------*/
	.head__inner {
		padding: 0 10px;
	}
	.gnav__list {
		font-size: var(--font-size-16px);
	}

	/*----------------------------------
		フッター
	----------------------------------*/
	.foot__inner {
		padding: 80px 10px;
	}
}

/* スマホサイズ */
@media screen and (max-width: 767px) {

	main {
		margin-bottom: 50px;
	}

	.sp-only {
		display: block;
	}
	.pc-only {
		display: none;
	}


	a[href^="tel:"] {
		pointer-events: auto;
	}
	/*----------------------------------
		ヘッダー
	----------------------------------*/
	.head {
		border-top: 8px solid #df3b62;
		padding-top: 7px;
	}

	.head__inner {
		padding: 0 20px;
	}

	.head__top {
		margin-bottom: 0;
	}

	.logo {
		max-width: 95px;
		padding-top: 12px;
		margin-left: 0;
	}

	.head__reserve {
		right: 78px;
		padding: 16px 0;
	}

	.head__reserve, .head__menu {
		width: 64px;
		height: 64px;
		border-radius: 10px;
	}

	.head__reserve, .hamburger__txt {
		font-size: var(--font-size-10px)
	}

	.head__menu {
		background-color: #896265;
		border: none;
		padding: 0;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 999998;
	}

	.head__menu:hover {
		opacity: .7;
	}

	.head__menu__icon {
		display: block;
		width: 22px;
		height: 2px;
		background-color: #fff;
		position: relative;
		left: 50%;
		-webkit-transform: translateX(-50%);
		        transform: translateX(-50%);
		transition: .2s linear;
	}

	.head__menu__icon::before, .head__menu__icon::after {
		content: "";
		display: block;
		width: 22px;
		height: 2px;
		background-color: #fff;
		position: absolute;
		transition: .2s ease-in;
	}

	.head__menu__icon::before {
		top: 8px;
	}
	.head__menu__icon::after {
		top: -8px;
	}
	.head__menu__icon.active {
		background-color: #896265;
	}
	.head__menu__icon.active::before {
		transform: translateY(0) rotate(45deg);
	}
	.head__menu__icon.active::after {
		transform: translateY(16px) rotate(-45deg);
	}
	.head__menu__txt {
		display: inline-block;
		font-size: var(--font-size-10px);
		color: #fff;
		transition: .2s ease-in;
	}

	.head__menu__txt::after {
		content: "MENU";
		position: relative;
		top: 10px;
		left: 0;
	}

	.head__menu__txt.active::after {
		content: none;
	}

	.gnav {
		display: block;
		visibility: hidden;
		width: 100%;
		height: 100vh;
		background-color: #fff2f5;
		position: fixed;
		top: 0;
		right: 0;
		z-index: 2;
		opacity: 0;
		transition: opacity .3s ease;

	}

	.gnav.active {
		visibility: visible;
		opacity: 1;
		overflow-y: scroll;
	}

	.gnav__list {
		flex-direction: column;
		font-size: var(--font-size-16px);
		padding-top: 80px;
	}

	.gnav__item {
		border-bottom: 1px solid #550a10;
		text-align: center;
		padding: 22px 0;
	}

	.gnav__subitem {
		display: none;
	}

	.link::after {
		content: none;
	}

	body.scroll-y-off {
		overflow-y: hidden;
	}

	/*----------------------------------
		フッター
	----------------------------------*/
	.foot__inner {
		width: 100%;
		padding: 60px 20px;
		margin: 0 auto;
	}

	.foot__content {
		flex-direction: column;
		padding-bottom: 40px;
	}

	.foot__logo {
		order: 0;
		max-width: 95px;
		padding-bottom: 50px;
		margin: 0 auto;
	}

	.foot__link-list {
		display: flex;
		flex-direction: column;
		margin: auto;
	}

	.foot__list {
		display: flex;
		flex-wrap: wrap;
	}

	.foot__list {
		padding-right: 0;
	}

	.foot__item {
		width: 50%;
		font-size: var(--font-size-14px);
		padding-bottom: 40px;
	}

	.foot__list:last-child .foot__item {
		padding-bottom: 0;
	}

	.long-link {
		width: 100%;
	}

	.foot__copyright {
		font-size: var(--font-size-12px);
	}

	/*----------------------------------
		見出し
	----------------------------------*/
	.low-contents-ttl {
		margin-bottom: 40px;
	}

	.contents-ttl__ja {font-size: var(--font-size-16px);}
	.low-contents-ttl__ja {font-size: var(--font-size-14px);}

	.contents-ttl__en {
		font-size: var(--font-size-36px);
		top: 60px;
	}
	.low-contents-ttl__en {font-size: var(--font-size-32px);}

	/*----------------------------------
		リンクボタン
	----------------------------------*/
	.contents-btn,.low-contents-btn {
		width: 100%;
		max-width: 330px;
		height: 54px;
		font-size: var(--font-size-14px);
	}

	.low-btn-wrapper {
		margin-top: 50px;
	}
}