@charset "UTF-8";

/* #header
-------------------------------------------------- */
#header{
  display: flex;
	justify-content: space-between;
	align-items: flex-end;
  width: 100%;
  background: #f4f4ed;
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 0 1.2rem 1rem -1rem hsl(200 50% 20% / 20%);
  z-index: 2000;
}

#header .logo{
	display: inline-block;
}

#header .logo a{
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 10px;
		padding: 10px;
}

#header .logo a img{
	width: 90px;
	margin: 0;
}

#header .logo a p{
	line-height: 1;
	font-size: 1.3rem;
}

#header .logo a p span{
	display: block;
	font-size: 2.2rem;
	margin-top: 8px;
}

#header .logo a:hover{
	background: rgba(255,255,255,1);
}

#nav .nav1{
	display: flex;
	margin-bottom: 10px;
}

#nav .nav1 li{
	position: relative;
	border-left: 1px solid #ccc;
}

#nav .nav1 li a{
  display: block;
	padding: 12px 30px 15px 30px;
	line-height: 1;
	position: relative;
}

#nav .nav1 li a::before{
	content: "";
	display: block;
	width: 0%;
	position: absolute;
	left: 50%;
	bottom: 0;
	background: #558408;
	height: 3px;
	z-index: 0;
	transition: ease .3s;
}

.page-about #nav .nav1 li.nav_about a::before,
.page-flow #nav .nav1 li.nav_flow a::before,
.page-menu #nav .nav1 li.nav_menu a::before,
.page-set #nav .nav1 li.nav_set a::before,
.page-access #nav .nav1 li.nav_access a::before,
.page-faq #nav .nav1 li.nav_faq a::before,
#nav .nav1 li a:hover::before{
	width: 90%;
	left: 5%;
}

#nav .nav2{
	display: grid;
	grid-template-columns: 130px 130px;
	gap: 10px;
	position: fixed;
	top: 0;
	right: 10px;
}

#nav .nav2 li a{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
	line-height: 1;
  color: #fff;
  background: #806040;
  border-radius: 0 0 5px 5px;
}

.sns{
  display: flex;
}

#header .sns{
	justify-content: flex-end;
  position: absolute;
  top: 5px;
  right: 300px;
}

.sns li{
	flex: 0 1 30px;
	margin: 0 10px 0 0;
}

#header .sns li{
	margin: 0 0 0 10px;
}

#hamburger{
	display: none;
}

@media screen and (max-width: 1200px){
	#header .logo a p{
		font-size: 1.2rem;
	}
	#header .logo a p span{
		font-size: 2.2rem;
	}
	#nav .nav1 li a{
		padding: 12px 20px 15px 20px;
		font-size: 1.5rem;
	}
}
@media screen and (max-width: 1100px){
	#header .logo a img {
    width: 70px;
	}
	#header .logo a p span{
		font-size: 2rem;
	}
	#nav .nav1 li a{
		padding: 12px 15px 15px 15px;
		font-size: 1.4rem;
	}
}
@media screen and (max-width: 900px){
	#header .logo a p{
		font-size: 1rem;
	}
	#header .logo a p span{
		font-size: 1.8rem;
	}
	#nav .nav1 li a{
		padding: 12px 10px 15px 10px;
		font-size: 1.3rem;
	}
}
@media screen and (max-width: 767px) {
	#header{
		display: block;
	  padding: 0;
	  height: 54px;
	  box-shadow: none;
	}
	#header .logo{
	  width: 54px;
		width: calc(100% - 54px);
	  position: static;
	}
	#header .logo a{
		display: grid;
		grid-template-columns: 50px 1fr;
		gap: 10px;
		align-items: center;
		padding: 0;
	  background: none;
	  border-radius: 0;
	}
	#header .logo a img{
		width: 50px!important;
		margin: 0;
	}
	#header .logo a p{
		line-height: 1;
		font-size: 3vw;
	}
	#header .logo a p span{
		display: block;
		font-size: 4vw;
	margin-top: 4px;
	}
	#hamburger {
		display: block;
	  width: 54px;
	  height: 54px;
  	background: #806040;
	  position: fixed;
	  top: 0;
	  right: 0;
		cursor: pointer;
	  z-index: 9999;
	}
	#hamburger span {
	  width: 40%;
	  height: 2px;
		margin-left: auto;
		margin-right: auto;
	  background-color: #fff;
	  position: relative;
	  transition: ease .4s;
	  display: block;
	}
	#hamburger span:nth-child(1) {
	  top: 0;
	}
	#hamburger span:nth-child(2) {
	  margin: 6px auto;
	}
	#hamburger span:nth-child(3) {
	  top: 0;
	}
	#nav.active {
	  transform: translateX(0);
	}
	#hamburger.active span:nth-child(1) {
	  top: 7px;
	  transform: rotate(45deg);
	}
	#hamburger.active span:nth-child(2) {
	  opacity: 0;
	}
	#hamburger.active span:nth-child(3) {
	  top: -10px;
	  transform: rotate(-45deg);
	}
	#nav{
		display: block;
	  position: fixed;
	  right: 0;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100vh;
 		 min-height: 100svh;
  	overflow-y: scroll;
  	padding: 30vw 5vw 10vw 5vw;
	  transform: translateX(100%);
	  background-color: #fff;
	  transition: ease .4s;
		z-index: 2000;
	}
	#nav .nav1{
		display: block;
	}

	#nav .nav1 li{
		border: none;
	}
	#nav .nav1 li a{
	  display: block;
		padding: 15px 5vw 15px 26px;
		font-size: 2rem;
	}
	.page-about #nav .nav1 li.nav_about a,
	.page-flow #nav .nav1 li.nav_flow a,
	.page-menu #nav .nav1 li.nav_menu a,
	.page-set #nav .nav1 li.nav_set a,
	.page-access #nav .nav1 li.nav_access a,
	.page-faq #nav .nav1 li.nav_faq a{
		background: url(../img/icon_moon.svg) no-repeat left center / 18px auto;
	}
	#nav .nav1 li a::before{
		display: none!important;
	}
	#nav .nav2{
		margin: 5vw 0 10vw 0;
		grid-template-columns: 1fr 1fr;
		gap: 3vw;
		position: static;
	}
	#nav .nav2 li a{
	  padding: 12px 10px;
		color: #33250f;
	  border-radius: 0px;
		background: #e5c575;
	}
	#nav .nav2 li a::before{
		content: "";
		margin-right: 6px;
		width: 22px;
		height: 22px;
		background: #33250f;
		mask-repeat: no-repeat;
		mask-position: center;
		mask-image: url(../img/icon_res.svg);
		mask-size: contain;
	}
	#nav .nav2 li:last-child a::before{
		mask-image: url(../img/icon_mail.svg);
	}
	#nav .sns{
	  display: flex;
	  justify-content: center;
		position: static;
	}
	#nav .sns li{
		flex: 0 1 40px;
		margin: 0 20px!important;
	}
}

/* #footer
-------------------------------------------------- */
#footer{
	background: #f4f4ed;
}

#footer .inner{
	padding: 60px 20px;
	display: grid;
	grid-template-columns: auto auto 180px;
	gap: 3%;
}

#footer .add .salon_name{
	margin-bottom: 20px;
	display: grid;
	grid-template-columns: 110px 1fr;
	align-items: center;
	gap: 10px;
	line-height: 1;
	font-weight: 600;
}

#footer .add .salon_name p span{
	font-size: 2.8rem;
	display: block;
	margin-top: 8px;
}

#footer .add p.tel{
	margin-top: 10px;
	font-weight: bold;
}

#footer .add p.tel a{
	letter-spacing: 0.05em;
	font-size: 2.4rem;
	margin-left: 5px;
}

#footer .fnav li{
	margin: 0 0 10px 0;
}

#footer .fnav li a{
	position: relative;
	padding-left: 15px;
}

#footer .fnav li a:hover{
	opacity: 0.7;
}

#footer .fnav li a::before{
  content: "";
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 4px;
  border-top: 1px solid #558408;
  border-right: 1px solid #558408;
  transform: rotate(45deg) translateY(-50%);
}

.footer_sns{
  display: flex;
  justify-content: center;
}

.footer_sns li{
	flex: 0 1 32px;
	margin: 0 10px;
}

#footer .btn{
  margin-top: 20px;
}

#footer .btn a{
	text-align: left;
}

#footer small{
  display: flex;
  align-items: center;
  justify-content: center;
	height: 40px;
	color: #fff;
	text-align: center;
	font-size: 1rem;
	letter-spacing: 0.1em;
	background: #808060;
}

#footer_fit_btn{
	display: none;
}

@media screen and (max-width: 900px){
	#footer .add .salon_name{
		grid-template-columns: 90px 1fr;
	}
	#footer .add .salon_name p span{
		font-size: 2.4rem;
	}
}
@media screen and (max-width:767px){
	#footer .inner{
		padding: 8vw 5vw 5vw 5vw;
		display: block;
	}
	#footer .add .salon_name{
		margin-bottom: 10px;
		display: block;
		font-size: 1.6rem;
	}
	#footer .add .salon_name p span{
		display: inline-block;
		font-size: 1.6rem;
		margin: 0 6px 0 0.5em;
	}
	#footer .add p.tel{
		margin-top: 0;
		font-size: 1.6rem;
		font-weight: normal;
	}
	#footer .add p.tel a{
		font-size: 1.6rem;
	}
	#footer small{
		margin-bottom: 44px;
		padding: 10px;
		font-size: 2vw;
		letter-spacing: 0em;
	}
	#footer_fit_btn{
	display: grid;
	grid-template-columns: 50px 50px 1fr 1fr 1fr;
	  width: 100%;
	  position: fixed;
	  bottom: 0;
	  left: 0;
	  text-align: center;
	  line-height: 1;
	  border-top: 1px solid #806040;
	  z-index: 1000;
	}
	#footer_fit_btn > *{
		border-left: 1px solid #806040;
	}
	#footer_fit_btn > *:first-child{
		border-left: none;
	}
	#footer_fit_btn > * a{
	  display: flex;
	  align-items: center;
	  justify-content: center;
		flex-direction: column;
		height: 44px;
		padding: 5px;
	color: #806040;
		font-feature-settings: "palt";
		background: #f4f4ed;
	}
	#footer_fit_btn > * a img{
		width: 3.5vw;
		line-height: 1;
	}
	#footer_fit_btn > *.tel a img{
		width: 3vw;
	}
	#footer_fit_btn > *.insta a img,
	#footer_fit_btn > *.line a img{ 
		width: 60%;
	}
	#footer_fit_btn > * a span{
		display: block;
		margin-top: 3px;
		font-size: 3vw;
	}
}

#pageup{
	width: 60px;
  position: fixed;
  bottom: 10px;
  right: 10px;
  transition: ease-in-out .3s;
}

#pageup a{
  display: block;
  aspect-ratio: 1 / 1;
  background: url(../img/icon_pageup.svg) no-repeat center center #808060;
}

.grecaptcha-badge {
	visibility: hidden;
	bottom: 80px !important;
}

.page-contact .grecaptcha-badge {
	visibility: visible;
}

@media screen and (max-width: 767px) {
	#pageup{
		width: 44px;
	  bottom: 44px;
	  right: 0px;
	}
	#pageup a{
	  width: 44px;
	  padding: 10px;
	}

}

/* 
-------------------------------------------------- */
.mv{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
	text-align: center;
	height: 250px;
	position: relative;
	background: url(../img/mv_bg2.jpg) no-repeat center bottom / cover;
}

.mv h1, .mv p{
	color: #fff;
	font-size: 3rem;
	line-height: 1;
	letter-spacing: 0.1em;
	position: relative;
	z-index: 10;
	text-shadow: 0 0 5px rgba(64,28,9,0.8);
}

.mv h1 span, .mv p span{
	display: block;
	margin-top: 15px;
	font-weight: normal;
	font-size: 1.2rem;
	letter-spacing: 0.2em;
}

.page_body{
	padding: 60px 20px 150px 20px;
	position: relative;
	overflow: hidden;
}

.article_body{
	position: relative;
	overflow: hidden;
}

.article_body p{
	margin-top: 20px;
}

.article_body .ml40{ 
	margin-left: 0!important;
}

.sec{
	padding: 80px 0;
}

.page_body .sec:nth-of-type(1){
	padding-top: 0;
}

.ttl,
.page_body h2,
.article_body h2{
	margin: 0 0 40px 0;
	font-size: 2.8rem;
	text-align: center;
	color: #558408;
}

.flex_txt h2{
	text-align: left!important;
	margin: 0 0 20px 0!important;
}

.ttl2,
.page_body h3,
.article_body h3{
	margin: 40px 0 0px 0;
	font-size: 2.4rem;
	color: #558408;
}

.single_ttl{
	padding: 10px 20px;
	font-size: 2.4rem;
	line-height: 1.4;
	color: #fff;
	background: #806040;
	margin-bottom: 60px;
}

.catch, .catch_b{
	text-align: center;
	margin-bottom: 40px;
}

.catch_b{
	font-size: 2.2rem;
}

@media screen and (max-width: 767px) {
	.mv{
		height: 30vw;
	}
	.mv h1, .mv p{
		font-size: 2.2rem;
	line-height: 1.3;
	}
	.mv h1 span{
		margin-top: 8px;
		font-size: 1rem;
	}
	.page_body{
		padding: 8vw 5vw 14vw 5vw;
	}
	.page_body h2,
	.article_body h2{
		margin: 0 0 30px 0;
		font-size: 2rem;
	}
	.sec{
		padding: 40px 0;
	}
	.catch{
		text-align: left;
		margin-bottom: 30px;
	font-size: 1.8rem;
	}
	.article_body h2{
		text-align: left!important;
	}
}

/* TOPページ
-------------------------------------------------- */
.home{
	background: url(../img/wall.webp) repeat 0 0;
}

#mv_wrap{
  width: 100%;
  height: calc(100vh - 110px);
  position: relative;
}

#mv_wrap::before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.3);
	background-image: radial-gradient(rgba(0,0,0,0.2) 30%, transparent 31%), radial-gradient(rgba(0,0,0,0.2) 30%, transparent 31%);
	background-size: 4px 4px;
	background-position: 0 0, 2px 2px;
	z-index: 10;
}

#mv_wrap p{
	width: min(90%, 500px);
	padding: 50px;
	aspect-ratio: 1 / 1;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 20;
}

#mv_wrap p::before, #mv_wrap p::after{
	content: "";
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
}

#mv_wrap p::before{
	background: rgba(255,255,255,.6);
	filter: blur(20px);
	z-index: 2;
}

#mv_wrap p::after{
	width: 60%;
	background: rgba(255,255,255,.7);
	filter: blur(20px);
	z-index: 1;
}

#mv_wrap p img{
	position: relative;
	z-index: 3;
}

#scrolldown_wrap{
	width: 100px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0%);
  z-index: 30;
}

#scrolldown{
  text-align: center;
  transform: translateY(30%);
  z-index: 2;
}

#scrolldown a{ 
  display: block;
  height: 140px;
  font-size: 1.2rem;
  color: #fff;
  font-family: trajan-pro-3,serif;
  font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  position: relative;
}

#scrolldown a::before,
#scrolldown a::after{
  content: '';
  display: block;
  position: absolute;
  top: 30px;
  left: 50%;
  width: 1px;
  height: 120px;
  background: #94744B;
}

#scrolldown a::after{
  background: rgba(255, 255, 255, 1);
  animation: sdl 1.5s cubic-bezier(1, 0, 0, 1) infinite;
}

@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  50.1% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

@media screen and (max-width: 767px) {
	#mv_wrap{
	  width: 100%;
	  height: 100vh;
	  height: calc(100vh - 94px)!important;
	  position: relative;
	}
	#mv_wrap::before{
		height: calc(100vh - 94px)!important;
	}
  #scrolldown{
    transform: translateY(-20px);
  }
  #scrolldown a{
    height: 60px;
  }
  #scrolldown a::before,
  #scrolldown a::after{
    height: 40px;
  }
}

#concept{
	padding: 120px 40px 60px 40px;
}

#concept .inner{
  display: flex;
  align-items: center;
  justify-content: center;
}

#concept .inner .img{
	flex: 0 1 300px;
	min-width: 300px;
	order: -2;
	margin-right: 6%;
	position: relative;
}

#concept .inner .img::before{
	content: "";
	display: block;
	width: 150px;
	aspect-ratio: 1 / 1;
	background: url(../img/leaf.webp) no-repeat center center / contain;
	position: absolute;;
	top: -10%;
	right: -6%;
	transform: scale(-1, 1);
}

#concept .inner .img img{
	border-radius: 50%;
}

#concept .inner .txt{
	line-height: 2.2;
	font-size: 1.8rem;
}

@media screen and (max-width: 767px){
	#concept{
		padding: 80px 5vw 0 5vw;
	}
	#concept .inner{
	  display: block;
	}
	#concept .inner .img{
		width: 80%;
		min-width: auto;
		margin: 12vw auto 0 auto;
	}
	#concept .inner .txt{
		line-height: 2;
		font-size: 1.6rem;
	}
}

#index_about{
	padding: 80px 40px;
}

@media screen and (max-width: 767px){
	#index_about{
		padding: 80px 5vw 0 5vw;
	}
	#index_about .flex_img img{
		max-width: 60%!important;
	}
}

#index_menu{
	margin: 150px auto;
	display: grid;
	grid-template-columns: 1fr  1fr 1fr;
	gap: 10px;
}

#index_menu li{
  background: url(../img/home/index_menu1.jpg) no-repeat center center / cover;
	outline: 1px solid rgb(255, 255, 255, .4);
	outline-offset: -10px;
}
#index_menu li:nth-child(2){	background-image: url(../img/home/index_menu2.jpg);}
#index_menu li:nth-child(3){ background-image: url(../img/home/index_menu3.jpg);}

#index_menu li a{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 20px;
  position: relative;
}

#index_menu li a::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: #000;
	opacity: 0.3;
	position: absolute;
	top: 0;
	left: 0;
	transition: ease .4s;
}

#index_menu li a:hover::before{
	opacity: 0;
}

#index_menu li a span{
	display: block;
	width: 90%;
	height: 100%;
	text-align: center;
	font-size: 2.2rem;
	padding: 10px;
	color: #65171c;
	background: url(../img/bg1.jpeg) repeat center center / cover;
	position: relative;
	z-index: 2;
}

@media screen and (max-width: 767px){
	#index_menu{
		margin: 80px 0 40px 0;
		gap: 0;
	}
#index_menu li{
  background: url(../img/home/index_menu1.jpg) no-repeat center center / cover;
	outline: 1px solid rgb(255, 255, 255, 0);
	outline-offset: 0px;
}
	#index_menu li a{
	  padding: 5vw;
	}
#index_menu li a::before{
	opacity: 0;
}
	#index_menu li a span{
 	 display: flex;
	  align-items: center;
	  justify-content: center;
		width: 100%;
		aspect-ratio: 1 / 1;
		line-height: 1.3;
		font-size: 3.5vw;
		padding: 0;
	}
}

#insta .aaa{
	text-align: center;
	padding: 190px 10px;
	background: #ccc;
}

@media screen and (max-width: 767px){
	#insta .aaa{
		padding: 120px 10px;
	}
}

@media screen and (max-width: 767px){
	#index_price{
		padding: 40px 5vw 20vw 5vw;
	}
}

/* access
------------------------------------------------------------- */
.access_wrap{
	display: grid;
	grid-template-columns: 35% 1fr;
	gap: 6%;
}

.access_wrap .txt{
	order: 2;
}

.access_wrap .tel a{
	font-size: 2.6rem;
	font-weight: bold;
}

.access_wrap .sns{
	margin-top: 15px;
}
.access_wrap .sns li{
	flex: 0 1 50px;
}

.parking_wrap .flex_img{
	flex: 0 1 40%;
	margin-left: 50px;
}
	
@media screen and (max-width: 767px){
	.access_wrap{
		display: block;
	}
	.access_wrap h3{
		font-size: 2.2rem;
	}
	.access_wrap .txt{
		margin-bottom: 6vw;
	}
	.access_wrap .tel a{
		font-size: 2.6rem;
		font-weight: bold;
	}
	.access_wrap .img img{
		width: 80%;
		margin: 0 auto;
	}
	.parking_wrap .flex_img{
		flex: 0 1 40%;
		margin-left: 0;
	}
	.parking_wrap .flex_img img{
		max-width: none!important;

	}
}

/* よくある質問（faq）
-------------------------------------------------- */
.faq_list{
  font-family: "Noto Sans JP", sans-serif;
}

.faq_list dd + dt{
  margin-top: 40px;
}

.faq_list dt{
  position: relative;
  padding: 20px 40px 20px 90px;
	font-size: 1.8rem;
  background: #f4f4ed;
}

.faq_list dt::before{
  content: "Q";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 100%;
  color: #fff;
  background: #558408;
  position: absolute;
  top: 50%;
  left: 30px;
  transform: translateY(-50%);
}

.faq_list dd{
  position: relative;
  background: #fff;
  padding: 30px 40px;
}

@media screen and (max-width: 767px) {
  .faq_list{
    font-size: 1.6rem;
  }
  .faq_list dd + dt{
    margin-top: 20px;
  }
  .faq_list dt{
  	cursor: pointer;
  	line-height: 1.4;
  	font-size: 1.6rem;
    padding: 15px 40px 15px 50px;
  }
  .faq_list dt::before{
    width: 24px;
    height: 24px;
    left: 15px;
  }
.faq_list dt::after{
	  content: "";
    width: 18px;
  	aspect-ratio: 1 / 1;
	  background: url(../img/icon_plus.svg) no-repeat center center / 100% auto;
	  position: absolute;
	  top: 50%;
	  right: 10px;
	  transform: translateY(-50%);
	}
	.faq_list dt.active::after{
	  background-image: url(../img/icon_minus.svg);
	}
  .faq_list dd{
    display: none;
    position: relative;
    padding: 20px;
  }
}

/* menu
------------------------------------------------------------- */
table.menu_tb{
	width: min(100%, 500px);
	margin: 0 auto;
	border-top: 1px dashed #A3A3A3;
	font-size: 2rem;
}

table.menu_tb th{
	padding-left: 10px;
}

table.menu_tb td{
	text-align: right;
	padding-right: 10px;
}

table.menu_tb td span{
	font-size: 120%;
	margin-left: 3px;
}

.discount_tickets{
	display: block;
	width: min(100%, 500px);
	margin: 30px auto 0 auto;
}

@media screen and (max-width: 767px) {
	table.menu_tb{
		border-top: none;
		width: 100%;
		font-size: 1.8rem;
		text-align: center;
	}
	table.menu_tb th{
		text-align: center;
	}
	table.menu_tb td{
		text-align: center;
	}
}

/* about
------------------------------------------------------------- */
.type_list{
	margin-top: 50px;
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: 30px;
	align-items: center;
	padding: 20px 30px 20px 0;
	border: 10px solid #f4f4ed;
	font-size: 2rem;
	border-radius: 10px;
}

.type_list h3{
	font-size: 4rem;
	margin: 0;
}

@media screen and (max-width: 767px){
	.type_list{
		margin-top: 40px;
		grid-template-columns: 1fr;
		gap: 0;
		padding: 5vw;
		font-size: 1.6rem;
	}
	.type_list h3{
		font-size: 2.4rem;
		text-align: center;
	}
	.type_list img{
		width: 60vw;
		margin: 0 auto;
	}
}

/* flow
------------------------------------------------------------- */
.flow_list > li{
	margin-bottom: 60px;
	position: relative;
	display: grid;
	grid-template-columns:  1fr 260px;
	gap: 40px;
	padding: 40px;
	background: #fff6e2;
	border-radius: 10px;
}

.flow_list > li:last-child{
	margin-bottom: 0;
}

.flow_list > li::after{
	content: "";
	display: inline-block;
	width:0;
	height:0;
	border-style:solid;
	border-width: 20px 40px 0 40px;
	border-color: #FF8F00 transparent transparent transparent;
	position: absolute;
	bottom: -40px;
	left: 50%;
	transform: translateX(-50%);
}

.flow_list > li:last-child::after{
	display: none;
}

.flow_list > li h3{
	margin: 0 0 15px 0;
	font-size: 2.8rem;
	color: #FF8F00;
	border-bottom: 2px dotted #FF8F00;
}

.flow_list > li p{
	font-size: 2rem;
}

.flow_list > li a{
	color: #eb6d74;
	text-decoration: underline;
}

.flow_list > li a:hover{
	text-decoration: none;
}

@media screen and (max-width: 767px){
	.flow_list > li{
		margin-bottom: 60px;
		grid-template-columns:  1fr;
		gap: 20px;
		padding: 5vw;
	}
	.flow_list > li h3{
		margin: 0 0 10px 0;
		font-size: 2rem;
	}
	.flow_list > li p{
		font-size: 1.5rem;
	}
}

.zaki_wrap + .zaki_wrap{
	margin-top: 100px;
}

.column_list{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:  20px;
}

.column_list li{
	border: 5px solid #f4f4ed;
}

.column_list li a{
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 20px;
	align-items: center;
}

.column_list li a .img{
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.column_list li a .img img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	overflow: hidden;
}

.column_list li a p{
	padding: 10px 10px 10px 0;
	line-height: 1.4;
	font-size: 1.8rem;
	font-weight: bold;
}

@media screen and (max-width: 767px) {
	.column_list{
		display: grid;
		grid-template-columns: 1fr ;
		gap:  20px;
	}
}

.menu{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 20px;
	margin-bottom: 80px; 
}

.menu li a{
	display: block;
	padding: 15px 10px;
	line-height: 1.3;
	text-align: center;
	border: 2px solid #c2cfb4;
	position: relative;
}

.menu li a::after{
	content: "";
	displauy: block;
	width:0;
	height:0;
	border-style:solid;
	border-width: 10.4px 6px 0 6px;
	border-color: #558408 transparent transparent transparent;
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	transition: ease .3s;
}

.page-about .menu li:nth-child(1) a,
.page-type .menu li:nth-child(2) a,
.page-flow .menu li:nth-child(3) a,
.page-zaki .menu li:nth-child(4) a,
.menu li a:hover{
	color: #558408;
	font-weight: 600;
	background: #f4f4ed;
	border: 2px solid #558408;
}

.page-about .menu li:nth-child(1) a::after,
.page-type .menu li:nth-child(2) a::after,
.page-flow .menu li:nth-child(3) a::after,
.page-zaki .menu li:nth-child(4) a::after,
.menu li a:hover::after{
	opacity: 1;
}

.menu li a br{
	display: none;
}

@media screen and (max-width: 1000px){
	.menu{
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 10px;
		margin-bottom: 80px; 
	}
	.menu li a br{
		display: initial;
	}
	.menu li a{
		padding: 10px;
	}
}
@media screen and (max-width: 767px){
	.menu{
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 3px;
		margin-bottom: 50px; 
	}
	.menu li a{
		padding: 5px 1vw;
	font-size: 3vw;
	}
	.menu li a span{
		display: none;
	}
}

/* contact
------------------------------------------------------------- */
.contact_body .inner,
.contact-confirm_body .inner,
.contact-thanks_body .inner{
	max-width: 600px;
}

.contact_wrap .wrap p.tel a{
	letter-spacing: 0.05em;
	font-size: 2.4rem;
	margin-left: 5px;
}

.contact_form_warp table{
	margin-top: 20px;
	border-top: 1px dashed #A3A3A3;
}

.thanks_wrap .btn{
	margin-top: 50px;
}

.set_detail{
	margin: 80px 0;
}

.set_detail h3{
	margin: 0 0 30px 0;
}

.set_detail .yen{
	margin-top: 60px;
	text-align: right;
	font-weight: bold;
	font-size: 120%;
}

li strong.marker{
	background: linear-gradient(transparent 80%, #f7ebbd 20%);
}

@media screen and (max-width: 767px){
	.set_detail{
		margin: 60px 0;
	}
	.set_detail h3{
		margin: 30px 0 20px 0;
	}
}

/* Alelia
------------------------------------------------------------- */
.amelia-app-booking #amelia-booking-wrap #am-step-booking .am-confirm-booking .am-confirm-booking-form .am-confirmation-booking-details, .amelia-app-booking #amelia-booking-wrap .am-step-booking-catalog .am-confirm-booking .am-confirm-booking-form .am-confirmation-booking-details {
	justify-content: flex-start!important;
}
.am-confirmation-booking-details div{
		margin-right: 20px!important;
		padding: 10px 20px!important;
		font-weight: bold!important;
		border: 1px solid #0454a2!important;
		border-radius: 5px;
}
.am-confirmation-booking-details div p.am-semi-strong{
	font-size: 2rem!important;
	font-weight: bold!important;
}
.am-confirmation-booking-details div:nth-child(1),
.am-confirmation-booking-details div:nth-child(4){
	display: none!important;
}
.am-confirmation-booking-cost{
	display: none!important;
}

.open_wrap{
	text-align: center;
}

.open_time{
	width: min(100%, 500px);
	margin: 0 auto 30px auto;
	text-align: center;
	padding: 30px 50px;
	border: 3px solid #e7e7d9;
}

.open_time h2{
	margin: 0 0 20px 0;
	line-height: 1;
	font-size: 2.2rem;
}

.open_wrap ul{
	display: inline-block;
}

.open_wrap ul li{
	text-align: left;
	font-size: 1.5rem;
	font-family: "Noto Sans JP", sans-serif;
}

.open_wrap ul.open_att li{
	list-style: disc;
	margin-left: 1em;
}

.open_wrap ul.open_att li .marker{
	font-weight: bold;
	background: linear-gradient(transparent 50%, #ffff00 50%);
}

.open_wrap ul.open_att{
	margin-bottom: 40px;
}

@media screen and (max-width: 767px){
	.open_time{
		width: 100%;
		padding: 5.3vw 4vw;
	}
}