@charset "UTF-8";

@font-face{
	font-family: "Noto Sans JP";
	font-display: swap;
	src: url("../fonts/NotoSansJP-Regular.woff") format("otf");
	font-weight: 400 700;
}
@font-face{
	font-family: "Outfit";
	font-display: swap;
	src: url("../fonts/Outfit-Regular.woff") format("otf");
	font-weight: 400 700;
}

*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
html{
	font-size: min(62.5%, .974658vw);
}
body{
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Noto Sans JP', sans-serif;
	font-weight: 500;
	font-size: 1.6rem;
	color: #222;
	position: relative;
	line-height: 1;
	-webkit-text-size-adjust: 100%;
	letter-spacing: .05em;
	word-break: normal;
	line-break: strict;
	word-wrap: break-word;
	overflow-wrap: break-word;
	background: #f3f9f9;
	min-height: 100vh;
}
body.opened{
	overflow: hidden;
}
.en{
	font-family: 'Outfit', sans-serif;
}
main{
	display: block;
}
img{
	border:none;
	-webkit-backface-visibility: hidden;
}
ul,ol{
	list-style: none;
}
li{
	list-style-type: none;
}

a{
	text-decoration: none;
	color: #222;
	transition: .3s all ease;
}

.logo *,
.block-img img,
.block-img picture,
.block-img source,
.block-img a{
	display: block;
	width: 100%;
}

table{
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
}
.outer{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	padding-left: 2.5vw;
	padding-right: 2.5vw;
	width: 100%;
}
.inner{
	width: 100%;
	max-width: 102.6rem;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}
table{
	border-collapse: collapse;
	table-layout: fixed;
}
a{
	transition: .3s all ease;
}
.parag{
	line-height: 2.5;
}
.pic img,
.pic picture,
.pic source,
.pic a,
.logo img{
	display: block;
	width: 100%;
}
.pic img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	font-family: "object-fit: cover;";
}

/* +++++++++header+++++++++ */
#header{
	position: relative;
	z-index: 9999;
}
#site-ttl{
	font-size: 1.2rem;
	height: min(4.8rem, 2.5vw);
	display: flex;
	align-items: center;
	position: relative;
	right: 0;
	top: 0;
	width: calc(100% - min(7.5vw, 14.4rem));
	margin-left: auto;
	margin-right: 0;
	padding-left: 2.4rem;
	font-weight: 500;
	line-height: 1.333;
}

#header .logo{
	width: min(7.5vw, 14.4rem);
	height: min(7.5vw, 14.4rem);
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	background: #fff;
	border-radius: 0 0 min(.83vw, 1.6rem) 0;
}
#header .logo img{
	display: block;
	width: min(8rem, 4.166vw);
	margin: 17% auto 0;
}

#header .reserve-btn01{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: min(40.5rem, 21.09vw);
	height: min(10.8rem, 5.625vw);
	background-image: linear-gradient(90deg, #ff700a, #ffa60a, #ff700a);
	background-size: 200% auto;
	background-position: right center;
	position: fixed;
	right: min(10.8rem, 5.625vw);
	top: 0;
	color: #fff;
	font-size: min(2rem, 1.041vw);
	border-radius: 0 0 0 min(1.92rem, 1vw);
	font-weight: 700;
	font-family: 'Outfit', "ヒラギノ角ゴ ProN W3", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 'Noto Sans JP', sans-serif;
	z-index: 99999;
}
#header .reserve-btn01 .fukidashi{
	font-size: min(1.5rem, .78125vw);
	padding-left: min(1.6rem, .833vw);
	padding-right: min(1.6rem, .833vw);
	position: relative;
	margin-bottom: min(1.6rem, .833vw);
}
#header .reserve-btn01 .fukidashi:before,
#header .reserve-btn01 .fukidashi:after{
	content: "";
	display: block;
	width: 0;
	height: 1.75em;
	border-left: .2rem dotted #fff;
	transform-origin: center top;
	position: absolute;
	top: 0;
}
#header .reserve-btn01 .fukidashi:before{
	transform: rotate(-20deg);
	left: 0;
}
#header .reserve-btn01 .fukidashi:after{
	transform: rotate(20deg);
	right: 0;
}
#header .reserve-btn01 .fukidashi span{
	font-size: 125%;
}
#header .reserve-txt{
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: min(2.6rem, 1.354vw);
	letter-spacing: .1em;
}
#header .reserve-txt:before{
	content: "";
	display: block;
	width: min(2.2rem, 1.041vw);
	height: 100%;
	background: url(../images/reserve-icon01-back.svg) no-repeat;
	background-size: 100% auto;
	background-position: center center;
	margin-right: .6em;
}
#header .reserve-txt:after{
	content: "";
	display: block;
	width: min(1.8rem, .9375vw);
	height: 100%;
	background: url(../images/arrow01.svg) no-repeat;
	background-size: 100% auto;
	background-position: center center;
	margin-left: .7em;
}
#header .reserve-btn01:hover{
	background-position: left center;
}
.reserve-btn-list li a:hover{
	background-position: left center !important;
}


#menu-btn{
	width: min(10.8rem, 5.625vw);
	height: min(10.8rem, 5.625vw);
	background: #fff;
	position: relative;
	cursor: pointer;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 99999;
}
#menu-btn .en{
	color: #108f88;
	font-size: min(1.8rem, .9375vw);
	text-align: center;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	padding-top: min(6.2rem, 3.3vw);
}
#menu-btn span{
	width: 33%;
	height: min(.3rem, .15625vw);
	border-radius: .15rem;
	background: #108f88;
	display: block;
	position: absolute;
	right: 0;
	left: 0;
	top: 36%;
	margin: auto;
	transition: .15s all ease;
}
#menu-btn span:nth-of-type(1){
	transform: translateY(max(-1rem, -.521vw));
}
#menu-btn span:nth-of-type(3){
	transform: translateY(min(1rem, .521vw));
}
.opened #menu-btn span:nth-of-type(1){
	transform: translateY(0) rotate(-45deg);
	width: 40%;
	left: 0;
	right: 0;
	margin: auto;
}
.opened #menu-btn span:nth-of-type(3){
	transform: translateY(0) rotate(45deg);
	width: 40%;
	left: 0;
	right: 0;
	margin: auto;
}
.opened #menu-btn span:nth-of-type(2){
	opacity: 0;
	filter: alpha(opacity=0);
	left: 0;
}

/* +++++++++global-navi+++++++++ */
nav{
	position: fixed;
	right: max(-51.3rem, -26.71875vw);
	top: 0;
	bottom: 0;
	height: 100vh;
	overflow-y: auto;
	letter-spacing: .1em;
	z-index: 9998;
	background: rgba(255,255,255,.85);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	width: min(51.3rem, 26.71875vw);
	transition: .2s all ease;
}
.opened nav{
	right: 0;
}

#global-navi{
	padding: min(12.8rem, 6.530vw) min(3.6rem, 1.875vw) min(4.8rem, 2.5vw);
}
#global-navi li{
	padding: min(2rem, 1.041vw);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
#global-navi a{
	font-size: min(2.4rem, 1.25vw);
	font-weight: 700;
	display: block;
}
#global-navi a:after{
	content: attr(data-en);
	display: block;
	font-family: 'Outfit', sans-serif;
	color: #108f88;
	font-size: 70%;
	margin-top: .5em;
}

/* +++++++++footer+++++++++ */
#footer{
	padding-top: 6rem;
	padding-bottom: 3.6rem;
	background: #fff;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	border-bottom: .1rem solid #eee;
	border-top: .1rem solid #eee;
}
#footer h2{
	font-size: 1.4rem;
	line-height: 1.5;
	font-weight: 500;
	margin-bottom: 1.2rem;
}
#footer .logo{
	width: 8rem;
}
.sns{
	display: flex;
	align-items: center;
	margin-top: 2.4rem;
}
.sns li{
	margin: 0 1rem;
	height: 2.8rem;
}
.sns li a,
.sns li img{
	display: block;
	height: 100%;
	width: auto;
}
.sns li a{
	transition: .2s all ease;
}
.sns li a:hover{
	opacity: .7;
}
.official-site-btn{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30rem;
	height: 5rem;
	border-radius: 2.5rem;
	border: .1rem solid #222;
	font-size: 1.4rem;
	margin: 2.4rem auto 3.6rem;
	transition: .2s all ease;
}
.official-site-btn:hover{
	background: #f3f9f9;
}
.official-site-btn:before{
	content: "";
	display: block;
	width: 1.3rem;
	height: 100%;
	margin-right: .6em;
	background: url(../images/new-window-icon03.svg) no-repeat;
	background-position: center center;
	background-size: 100% auto;
}
#footer .address{
	margin-top: 2.4rem;
	line-height: 1.5;
	font-size: 1.4rem;
}
.shop-info-detail{
	display: flex;
	align-items: flex-start;
}
.shop-info-detail dl{
	margin: 0 2rem;
	line-height: 1.8;
	font-size: 1.4rem;
	text-align: left;
}
.shop-info-detail dt{
	font-weight: 700;
}
#footer .tel{
	font-size: 2.2rem;
	margin-top: 1.2rem;
	display: flex;
	align-items: flex-end;
}
#footer .tel:before{
	content: attr(data-en);
	font-size: 75%;
	margin-right: .25em;
}

#copyrights{
	font-size: 1.2rem;
	margin-top: 4.8rem;
}
#fixed-banner{
	position: fixed;
	right: 0;
	bottom: 1.8rem;
	margin: auto;
	z-index: 9997;
	width: 100%;
	max-width: 70rem;
	visibility: hidden;
	opacity: 0;
	transition: .2s all ease;
}
#fixed-banner *{
	display: block;
	width: 100%;
}
#fixed-banner a{
	transition: .2s all ease;
}
#fixed-banner a:hover{
	opacity: .7;
}
#page-top{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 6rem;
	height: 6rem;
	border-radius: 50%;
	background: linear-gradient(180deg, #108f88,#2bb1a9, #108f88);
	background-position: center top;
	background-size: auto 200%;
	position: fixed;
	right: 2.5vw;
	bottom: calc(18.1rem + .75vw);
	transition: .2s all ease;
	z-index: 999;
	visibility: hidden;
	opacity: 0;
}
#page-top.active:hover{
	background-position: center bottom;
	opacity: 1;
}
#page-top img{
	display: block;
	width: 30%;
}
#page-top.active{
	visibility: visible;
	opacity: .6;
}
#fixed-banner.active{
	visibility: visible;
	opacity: 1;
}

/* +++++++++++++.sec++++++++++++++ */
.sec{
	padding-top: 14.4rem;
	padding-bottom: 14.4rem;
}


/* +++++++++++++.sec-ttl01+++++++++++++ */
.sec-ttl01{
	font-size: 5.4rem;
	font-weight: 700;
	color: #000;
	letter-spacing: .175em;
	margin-bottom: 7.2rem;
	position: relative;
	text-align: center;
	width: 100%;
}

.sec-ttl01 span{
	position: relative;
	z-index: 9;
}

/* +++++++++++++++++.btn01++++++++++++++ */
.btn01{
	display: flex;
	width: 28.8rem;
	height: 6rem;
	justify-content: center;
	align-items: center;
	border-radius: 3rem;
	margin: 4rem auto 0;
	color: #fff;
	background: linear-gradient(-90deg, #108f88,#2bb1a9, #108f88);
	background-size: 200% auto;
	background-position: right center;
	font-size: 1.6rem;
	font-weight: 700;
	letter-spacing: .1em;
	position: relative;
}
.btn01:after{
	position: absolute;
	right: 2.5rem;
	top: 0;
	height: 0;
	content: "";
	display: block;
	width: 1.4rem;
	height: 100%;
	background: url(../images/arrow01.svg) no-repeat;
	background-size: 100% auto;
	background-position: center center;
}
.btn01:hover,
.btn02:hover{
	background-position: left center;
}

/* +++++++++++++++++.btn02++++++++++++++ */
.btn02{
	display: flex;
	width: 18rem;
	height: 4rem;
	justify-content: center;
	align-items: center;
	border-radius: 2rem;
	margin: 1.6rem 0 3.2rem;
	color: #fff;
	background: linear-gradient(-90deg, #108f88,#2bb1a9, #108f88);
	background-size: 200% auto;
	background-position: right center;
}

@media screen and (max-width: 768px){
	html{
		font-size: 2.666vw;
	}
	body{
		font-size: 1.6rem;
	}
	.outer{
		padding-left: 2rem;
		padding-right: 2rem;
	}
	.inner{
		max-width: 100%;
	}
	.parag{
		line-height: 2.25;
	}

/* +++++++++header+++++++++ */
	#site-ttl{
		font-size: 1rem;
		height: 3rem;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		right: auto;
		top: auto;
		width: 100%;
		background: #fff;
		border-bottom: .1rem solid #eee;
		padding-left: 0;
		position: relative;
		z-index: 9999;
		text-align: center;
	}
	#header{
		position: sticky;
		left: 0;
		top: 0;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
	}
	#header .logo{
		width: 8rem;
		height: 8rem;
		border-radius: 0 0 1rem 0;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
	}
	#header .logo img{
		display: block;
		width: 60%;
		margin: 0;
	}

	#header .reserve-btn01{
		width: 11rem;
		height: 6rem;
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		bottom: auto;
		font-size: 1.7rem;
		border-radius: 0 0 0 1rem;
		margin-left: auto;
		padding-bottom: .3rem;
	}
	#header .reserve-btn01 .pc-none{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	#header .reserve-btn01 .pc-none:before{
		content: "";
		display: block;
		width: 2.4rem;
		height: 100%;
		background: url(../images/reserve-icon01-back.svg) no-repeat;
		background-position: center center;
		background-size: auto 100%;
		margin-right: .6rem;
	}
	#header .reserve-btn01 .fukidashi{
		font-size: 1.2rem;
		padding-left: 1.4rem;
		padding-right: 1.4rem;
		margin-bottom: .5rem;
		text-align: center;
		line-height: 1.333;
	}
	#header .reserve-btn01 .fukidashi:before,
	#header .reserve-btn01 .fukidashi:after{
		height: 3em;
		border-left: .3rem dotted #fff;
	}
	#header .reserve-btn01 .fukidashi span{
		font-size: 120%;
	}
	#header .reserve-txt{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 1.8rem;
		letter-spacing: .05em;
	}
	#header .reserve-txt:before{
		width: 1.4rem;
	}
	#header .reserve-txt:after{
		width: 1.4rem;
	}

	#menu-btn{
		width: 6rem;
		height: 6rem;
		position: relative;
		right: auto;
		top: auto;
	}
	#menu-btn .en{
		font-size: 1.4rem;
		padding-top: 3.5rem;
	}
	#menu-btn span{
		width: 33%;
		height: .2rem;
		border-radius: .1rem;
		top: 36%;
	}
	#menu-btn span:nth-of-type(1){
		transform: translateY(-.6rem);
	}
	#menu-btn span:nth-of-type(3){
		transform: translateY(.6rem);
	}

/* +++++++++global-navi+++++++++ */
	nav{
		right: -100%;
		width: 100%;
	}

	#global-navi{
		padding: 9rem 0 2rem;
	}
	#global-navi li{
		padding: 2.4rem 2rem;
	}
	#global-navi a{
		font-size: 2.2rem;
	}
	#global-navi a:after{
		margin-top: .5em;
	}


/* +++++++++footer+++++++++ */
	#footer{
		padding-top: 4.8rem;
		padding-bottom: 10.6rem;
	}
	#footer h2{
		font-size: 1.2rem;
		margin-bottom: 1.2rem;
	}
	#footer .logo{
		width: 6rem;
	}
	#footer .tel{
		font-size: 2.4rem;
	}
	.official-site-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 27rem;
		height: 4.5rem;
		border-radius: 2.25rem;
		margin: 2.4rem auto;
	}

	.shop-info-detail{
		display: block;
	}
	.shop-info-detail dl{
		margin: 0 auto 1.5rem;
	}

	#copyrights{
		font-size: 1.2rem;
		margin-top: 2.4rem;
	}
	#page-top{
		width: 5rem;
		height: 5rem;
		right: 2rem;
		bottom: 10.6rem;
	}
#fixed-banner{
	padding: 0;
	bottom: 0;
}
/* ++++++++++++++.sec+++++++++++++ */
	.sec{
		padding-top: 10.8rem;
		padding-bottom: 10.8rem;
	}

/* +++++++++++++.sec-ttl01+++++++++++++ */
	.sec-ttl01{
		font-size: 3.6rem;
		margin-bottom: 4rem;
		line-height: 1.4;
		letter-spacing: .1em;
	}
	.sec-ttl01:before {
		font-size: 175%;
		width: 300vw;
		text-align: center;
		left: -100vw;
		right: auto;
	}

/* +++++++++++++++++.btn01++++++++++++++ */
	.btn01{
		display: flex;
		width: 20rem;
		height: 4.2rem;
		border-radius: 2.1rem;
		font-size: 1.5rem;
		margin-top: 3rem;
	}
	.btn01:after{
		position: relative;
		right: auto;
		top: auto;
		height: 100%;
		width: 1.2rem;
		margin-left: .6em;
	}


/* +++++++++++++++++.btn02++++++++++++++ */
	.btn02{
		display: flex;
		width: 20rem;
		height: 4.2rem;
		border-radius: 2.1rem;
	}
}

@media screen and (min-width: 769px){
	.pc-none{
		display: none !important;
	}
	.pc-event-none{
		pointer-events: none;
	}
}
@media screen and (max-width: 768px){
	.sp-none{
		display: none !important;
	}
}