@charset "utf-8";
/* CSS Document */

html{
}

body{
	font-family:yu-mincho-pr6, serif;
	font-style: normal;
    font-feature-settings: "palt" 1;
	font-weight: 500;
	background: #fbfbf6;
	font-size: 14px;
	letter-spacing: 0.15em;
	font-smoothing:auto;
	color:#4d4d4d;
	line-height: 2;
	position: relative;
    overflow-x: hidden;
    width: 100vw;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

h1, h2, h3, h4, h5 {
    font-weight: 500;
}

a:link, a:visited, a:active, a:hover {
    text-decoration: none;
	color: #4d4d4d;
}

ul,ol{
	list-style: none;
	padding: 0;
}

p{
    text-align: justify;
    text-justify: inter-ideograph;
}

i{
	font-family:"FontAwesome" !important;
}

*, *::after, *::before {
  box-sizing: border-box;
}

img{
    width: 100%;
    height: auto;
	vertical-align: bottom;
}



[type="hidden"], [type="text"], [type="search"], [type="tel"], [type="url"], [type="email"], [type="password"], [type="datetime"], [type="date"], [type="month"], [type="week"], [type="time"], [type="datetime-local"], [type="number"], select, textarea {
    border: 1px solid #CCCCCC;
    border-radius: 0;
    padding: 10px 15px;
    line-height: 2;
	width: 100%;
}



#load_animation {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 100;
  background-color: #fbfbf6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#load_animation .loading_logo {
  padding: 50px 0;
}

#load_animation .loading_logo img {
	width: 280px;
    height: auto;
	animation-name: loading_logo;
	animation-duration: 1.4s;
	animation-timing-function: ease;
	animation-direction: normal;
	animation-fill-mode:forwards;
	opacity: 0;
}





@media screen and (min-width: 768px) and (max-width: 1024px) {
	#load_animation .loading_logo img {
	width: 200px;
	}
}

@media screen and (max-width: 767px) {
	#load_animation .loading_logo img {
	width: 160px;
	}
}

@keyframes loading_logo{
	0% {opacity: 0; transform: translateY(20px); filter: blur(10px);}
	100% {opacity: 1; transform: translateY(0); filter: blur(0);}
}







/* fadein */
.fadein{
    opacity : 0;
    transition : all 1.4s;
	transform: translateY(50px);
}

.fadein.fadein-on{
    opacity : 1;
	transform: translateY(0);
}

.fadein.to_right{
	transform: translateX(-50px);
}
.fadein.to_left{
	transform: translateX(50px);
}


.fadein.to_right.fadein-on,
.fadein.to_left.fadein-on{
	transform: translateX(0);
}








/* ページテンプレートPC */
@media screen and (min-width: 901px) {
	
	
	
/*　head　*/
header{
	width: 100%;
	position: fixed;
	top:0;
	left: 0;
	z-index: 10;
	padding: 30px 80px 0;
	display: flex;
	justify-content:space-between;
	transition: fill 0.7s, color 0.7s, padding 0.7s;
}
	
header.scroll-nav {
}

header h1{
	margin-right: 20px;
	line-height: 1;
}

header h1 img{
	width: 160px;
	height:auto;
	fill:#4d4d4d;
	transition: fill 0.7s;
}
		
	
	
	
.header_menu{
	display: flex;
}

.globalMenuSp {
	display: flex;
    align-items: center;
}

.globalMenuSp ul {
	display: flex;
  margin: 0 auto;
  padding: 0;
}

.globalMenuSp ul li {
  text-align: left;
  list-style-type: none;
  padding: 0 20px;
    line-height: 1.5;
}

.globalMenuSp ul li a {
	display: block;
	color: #4d4d4d;
	text-decoration :none;
	transition:color 0.7s;
    font-size: 18px;
}
    
.globalMenuSp ul li a span{
    display: block;
    font-size: 12px;
}

	
.hamburger_wrap {
  display : none;
}
	
.sp_menu{
	display: none;
}	

    
    
    h2{
        display: block;
        position: absolute;
        bottom: 60px;
        left: 0;
        z-index: 1;
        padding: 24px;
        font-size: 11px;
        line-height: 1.5;
        width: 100%;
        text-align: center;
    }
	
    
    
/* hero */

.hero{
	position: relative;
}


.swiper-slide{
	position: relative;
	height:100vh;
	max-height: 1000px;
}

.slide_content{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
	color: #fbfbf6;
	font-family: yu-mincho-pr6, sans-serif;
	font-style: normal;
	font-weight: 400;
	text-align: center;
	letter-spacing: normal;
}

.hero_title{
	font-size: 78px;
	line-height: 1.2;
}

.hero_sub_title{
	font-size: 34px;
	margin-bottom: 40px;
	line-height: 1.4;
}

.slide_content .underber_botton{
	letter-spacing: 0.2em;
	font-size: 20px;
}
	
.slide_content .underber_botton span{
	border-color: #fbfbf6;
}	
.slide_content .underber_botton:after{
background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.4 10.1"><path fill="%23fbfbf6" d="M37.4,10.1H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h33.9l-6.4-6.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l8.1,8.1 c0.3,0.3,0.4,0.7,0.2,1.1C38.1,9.8,37.8,10.1,37.4,10.1z"/></svg>');
}

.swiper-slide img{
    width: 100%;
    height: 100%;
	object-fit: cover;
}



.scroll_down {
  display: inline-block;
  position: absolute;
  right: 40px;
  bottom: 0;
  z-index: 2;
  padding: 10px 10px 140px;
  overflow: hidden;
  color: #fbfbf6 !important;
	font-weight: 300;
  font-size: 12px;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
	font-weight: 400;
}
.scroll_down::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 120px;
  background: #fbfbf6;
}
.scroll_down::after {
  animation: sdl 2.4s cubic-bezier(1, 0, 0, 1) infinite;
}
	



/* main */

main{
	width: 100%;
	margin: 0 auto;
	padding:240px 0 0;
    background-image:url("../images/BG_pc.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
}
    
main.fadein{
	transform: translateY(0) !important;
}

main.content{
        opacity : 0;
        animation-name: main_content;
        animation-duration: 1.4s;
        animation-timing-function: ease;
        animation-direction: normal;
        animation-fill-mode:forwards;
        animation-delay: 2.8s;
	}
	
@keyframes main_content{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

    
    
main section{
	margin: 0 auto;
	padding:0 80px;
	max-width: 1460px;
	width: 100%;
}

main section h3{
	font-style: normal;
	font-weight: 700;
	text-align: center;
	font-size: 24px;
	margin-bottom: 20px;
}

main section.store_locator h3 {
    margin-bottom: 60px;
}
	
main section.store_locator h3:after {
    content: "　";
    width: 30px;
    border-bottom: 2px solid #4d4d4d;
    display: block;
    margin: auto;
}
    
.copy{
    font-size: 6rem;
    font-family: 'Rouge Script', cursive;
    letter-spacing: normal;
    display: inline-block;
    text-align: center;
    transform: rotate(-10deg);
    line-height: 1.5;
    color: #4d4d4d;
}
 
.arrow_link_wrap_left{
    text-align: left;
    width: 100%;
    padding: 20px 0;
}
.arrow_link_wrap_right{
    text-align: right;
    width: 100%;
    padding: 20px 0;
}

.arrow_link {
    display: block;
    margin-bottom: 20px;
}

    
.arrow_link span{
    border-bottom: 1px solid #4d4d4d;
    font-size: 1.3rem;
    padding-bottom: 0.5rem;
}
.arrow_link:after{
    display: inline-block;
    margin-left: 1rem;
    content: " ";
    width: 30px;
    height: 1rem;
    background-image: url("../images/arrow.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 30px;
}

/* CONCEPT */
    
.top_concept{
    padding-bottom: 150px;
} 
    
.top_concept_box{
    width: 1460px;
    max-width: 100%;
    display: grid;
    grid-template-columns:50% 50%;
    text-align: center;
    position: relative;
}
    
.top_concept_img {
    position: relative;
    width: 100%;
    padding-top:100%;
    padding-bottom: 15%;
}

 .top_concept_img img.top_concept_img_1{
    width: 70%;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;    
}
.top_concept_img img.top_concept_img_2{
    width: 50%;
    height: auto;
    padding-top: 30%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;    
}

    .top_concept_img_1.fadein{
        transform: translateX(50px);
    }    
    .top_concept_img_1.fadein.fadein-on {
        opacity: 1;
        transform: translateX(0);
    }   
    .top_concept_img_2.fadein{
        transform: translateX(-50px);
    }    
    .top_concept_img_2.fadein.fadein-on {
        opacity: 1;
        transform: translateX(0);
    }   
    


    .top_concept_description {
        text-align: left;
        padding-left:40px;
        position: relative;
        z-index: 2;
    }
    .top_concept_description > div{
        text-align: center;
    }
    .top_concept_description h1{
        font-size: 1.5rem;
        margin-bottom: 2rem;
        color: #286551;
        text-align: center;
        }

    .top_concept_description > div{
        font-size: 1rem;
    }
    .top_concept_description p {
        text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;
    }
    
.leaf {
    width: 50%;
    height: auto;
    position: absolute;
    z-index: 1;
    bottom: -280px;
    right: -12%;
}    
    
.leaf.fadein{
    transform: translateY(-100px) rotate(-5deg);
    transition-delay: 0.7s;
    filter: blur(10px);
}    
.leaf.fadein.fadein-on {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
    filter: blur(0px);
}   

    
.top_about{
    background: #f7f7f7;
    padding: 150px 0;
    max-width: 100%;
}    

 .top_about_box {
    padding: 0 80px;
    position: relative;
    max-width: 1460px;
    margin: auto;
}   

.top_about_box > div{
    position: absolute;
    top:50%;
    right: 80px;
    transform: translateY(-50%);
    width: 30%;
    text-align: center;
}
.top_about_box img{
    width: 70%;
    height: auto;
}

 
.top_about_box img.fadein{
    transform: translateX(-50px);
}    
.top_about_box img.fadein.fadein-on {
    opacity: 1;
    transform: translateX(0);
}   
    
    
 .top_course{
    padding: 150px 0;
    max-width: 100%;
}    

 .top_course_box {
    padding: 0 80px;
    position: relative;
    max-width: 1460px;
    margin: auto;
    text-align: right;
}   

.top_course_box > div{
    position: absolute;
    top:50%;
    left: 80px;
    transform: translateY(-50%);
    width: 30%;
    text-align: center;
}
.top_course_box img{
    width: 70%;
    height: auto;
}

 
.top_course_box img.fadein{
    transform: translateX(50px);
}    
.top_course_box img.fadein.fadein-on {
    opacity: 1;
    transform: translateX(0);
}   
    
   
    
    
/* STORE LOCATOR */
.tab_container {
		max-width: 1280px;
		width: 100%;
		padding:0 0 1em;
		margin: 0 auto;
		text-align: center;
	}

.tab_item {
	font-family: p22-underground, sans-serif;
	font-style: normal;
	font-weight: 500;
	margin: 0 10px;
	padding:0 0 5px;
	border-bottom: 2px solid transparent;
	color: #ddd ;
	display: inline-block;
	text-align: center;
	transition: all 0.5s ease;
	cursor: pointer;
}

.tab_item:hover {
  opacity: 0.75;
}
input[name="tab_item"] {
  display: none;
}
.tab_content {
	display: none;
	padding: 60px 0 30px;
	clear: both;
	overflow: hidden;
	text-align: left;
	transition: all 0.5s ease;
}



#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content,
#tab5:checked ~ #tab5_content,
#tab6:checked ~ #tab6_content  {
	display: block;
	animation-name: shop_list;
	animation-duration: 0.7s;
	animation-timing-function: ease;
	animation-direction: normal;
}


.tab_container input:checked + .tab_item {
  color: #9e958a;
  border-bottom: 2px solid #9e958a;
}

.tab_content_description{
	display: grid;
	grid-template-columns:repeat(3, 33.33%) ;
}
	
	

/* footer */

	.footer_image{
        width: 100%;
        height: 50vh;
        background-image: url(../images/footer_img-pc.jpg);
        background-size: cover;
        background-position: bottom;
    }

	.footer_top{
		background: #dbd5cf;
		color:#fbfbf6;
		padding: 90px 80px;
	}

	.footer_logo{
		text-align: center;
		margin-bottom: 40px;
	}
	.footer_logo img{
		width: 160px;
		height: auto;
	}

	.footer_top_menu{
		display: flex;
		justify-content: center;
		margin-bottom: 60px;
	}

	.footer_top_menu li{
		padding: 0 30px;
	}

	.footer_top_menu a{
		color:#4b4b4b;
        font-size: 18px;
        line-height: 1.5;
	}

	.footer_top_menu a span{
        display: block;
        font-size: 12px;

	}

	.footer_top_sns{
		display: flex;
		justify-content: center;
		font-family: p22-underground, sans-serif;
	}

	.footer_top_sns li{
		padding: 0 15px;
	}

	.footer_top_sns a{
		color:#fbfbf6;
	}
	.footer_top_sns a img{
		color:#fbfbf6;
		height: 16px;
		width: auto;
	}


	.footer_bottom{
		background: #9e958a;
		color:#fbfbf6;
		padding: 24px 80px;
		display: flex;
		justify-content: space-between;
		font-size: 0.7rem;
	}

	.footer_bottom_menu {
		display: flex;
	}
	.footer_bottom_menu li{
		margin-right: 40px;
	}
	.footer_bottom_menu a{
		color:#fbfbf6;
	}

	.footer_copyright{
		font-family: p22-underground, sans-serif;
		font-style: normal;
		font-weight: 300;
	}

	
	
	#footerbanner{
		position: fixed;
		bottom: 30px;
		right: 30px;
		z-index: 4;
        display: none !important;
	}
	
	#footerbanner a {
		display: block;
		width: 120px;
		height: 120px;
		border-radius: 60px;
		text-align: center;
		background: #9e958a;
		color: #fbfbf6;
		position: relative;
		line-height: 1.5;
		letter-spacing: 0.1em;
		font-size: 15px;
		font-weight: 100;
	}
	
	#footerbanner p{
		width: 100%;
		position: absolute;
		top:50%;
		transform: translateY(-50%);
        text-align: center;
	}	
	#footerbanner span{
		display: block;
	}	
}


/* ページテンプレート　tablet */
@media screen  and (min-width: 768px) and (max-width: 900px) {

body{
	font-size: 13px;
	letter-spacing: 0.1em;
}
	
	
/*　head　*/
header{
	width: 100%;
	position: fixed;
	top:0;
	left: 0;
	z-index: 10;
	padding: 30px 40px 0;
	display: flex;
	justify-content:space-between;
	transition:fill 0.7s, color 0.7s;
}

header.scroll-nav {
  padding:  30px 40px 0;
}
	
header h1{
	margin-right: 15px;
	line-height: 0;
}

header h1 img{
	width: 160px;
	height:auto;
}
	
	
.header_menu{
	display: flex;
}

.globalMenuSp {
	display: block;
}

.globalMenuSp ul {
	position: absolute;
	top:50%;
	width: 100%;
	display: none;
	margin: 0 auto;
	padding: 0;
	transform: translateY(-50%);
}
.globalMenuSp.active ul {
	display: block;
}
	
.globalMenuSp ul li {
	list-style-type: none;
	padding: 0 15px 1rem;
	text-align: center
}

.globalMenuSp ul li a {
	font-size: 24px;
	line-height: 1.5;
	display: block;
	color: #4d4d4d;
	opacity: 0;
}
    
.globalMenuSp ul li a span{
    display: block;
    font-size:14px;
    }
    

.globalMenuSp.active ul li a{
		animation-name: globalMenuSp;
		animation-duration: 1.4s;
		animation-timing-function: ease;
		animation-direction: normal;
		animation-fill-mode:forwards;
	}
@keyframes globalMenuSp{
	0% {transform:translateY(30px); opacity: 0;}
	100% {transform:translateY(0);  opacity: 1;}
}
	
.globalMenuSp.active ul li:first-child a{
	animation-delay: 0.2s;
}	
.globalMenuSp.active ul li:nth-child(2) a{
	animation-delay: 0.4s;
}	
.globalMenuSp.active ul li:nth-child(3) a{
	animation-delay: 0.6s;
}	
.globalMenuSp.active ul li:nth-child(4) a{
	animation-delay: 0.8s;
}	
.globalMenuSp.active ul li:nth-child(5) a{
	animation-delay: 1.0s;
}	
.globalMenuSp.active ul li:nth-child(6) a{
	animation-delay: 1.2s;
}	
	

	

.sp_menu {
    display: none;
}	
	
.hamburger {
  display : block;
  position: absolute;
	top:50px;
	right: 50px;
  z-index : 3;
  width : 30px;
  height: 30px;
  cursor: pointer;
  text-align: center;
}
	
.hamburger span {
  display : block;
  position: absolute;
  width   : 30px;
  height  : 2px ;
  left    : 0;
  background : #4d4d4d;
  transition :transform 0.3s ease-in-out, background 0.7s;
}
	
.hamburger span:nth-child(1) {
  top: 8px;
}
.hamburger span:nth-child(2) {
  top: 22px;
}

.sp_bottom_menu_title{
  display: none;
}

    
	
#fs_Top .hamburger span {
  background : #fbfbf6;	
}
	
#fs_Top header.scroll-nav .hamburger span {
  background : #4d4d4d;
}

	

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 12px;
  left: 0;
  background :#4d4d4d !important;
  transform : rotate(-45deg);
}

.hamburger.active span:nth-child(2) {
  top: 12px;
  background :#4d4d4d !important;
  transform : rotate(45deg);
}

    
nav.globalMenuSp {
	position: fixed;
	z-index : 2;
	top  : 0;
	left : 0;
	color: #4d4d4d;
	background: #fbfbf6;
	text-align: center;
	width: 0;
	height:0;
	opacity: 0;
	transition: opacity .6s ease, visibility .6s ease ,height .1s ease 1s ,width .1s ease 1s ;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  opacity: 100;
	width: 100%;
	height: 100vh;
	transition: opacity .6s ease .2s , visibility .6s ease .2s , height .1s ease ,width .1s ease;
}

	
    h2{
        display: block;
        position: absolute;
        bottom: 30px;
        left: 0;
        z-index: 1;
        padding: 24px;
        font-size: 10px;
        line-height: 1.5;
        width: 100%;
        text-align: center;
    }
	

/* hero */

.hero{
	position: relative;
}


.swiper-slide{
	position: relative;
	height:100vh;
}

.slide_content{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
	color: #fbfbf6;
	font-family: yu-mincho-pr6, sans-serif;
	font-style: normal;
	font-weight: 400;
	text-align: center;
	letter-spacing: normal;
}

.hero_title{
	font-size: 52px;
	line-height: 1.2;
}

.hero_sub_title{
	font-size: 24px;
	margin-bottom: 30px;
	line-height: 1.4;
}

.slide_content .underber_botton{
	letter-spacing: 0.1em;
	font-size: 16px;
	display: inline-block;
}
	
.slide_content .underber_botton span{
	border-bottom: 2px solid #fbfbf6;
}	
.slide_content .underber_botton:after{
	background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.4 10.1"><path fill="%23fbfbf6" d="M37.4,10.1H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h33.9l-6.4-6.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l8.1,8.1 c0.3,0.3,0.4,0.7,0.2,1.1C38.1,9.8,37.8,10.1,37.4,10.1z"/></svg>');
}

.swiper-slide img{
    width: 100%;
    height: 100%;
	object-fit: cover;
}


.scroll_down {
  display: inline-block;
  position: absolute;
  right: 40px;
  bottom: 0;
  z-index: 2;
  padding: 0 0 100px;
  overflow: hidden;
  color: #fbfbf6 !important;
	font-weight: 300;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
	font-weight: 400;
}
	
.scroll_down::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 80px;
  background: #fbfbf6;
}
.scroll_down::after {
  animation: sdl 2.4s cubic-bezier(1, 0, 0, 1) infinite;
}
	



/* maiu */

main{
	width: 100%;
	margin: 0 auto;
	padding:160px 0 0;
    background-image:url("../images/BG_tablet.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
}
    
main.fadein{
	transform: translateY(0) !important;
}

main.content{
        opacity : 0;
        animation-name: main_content;
        animation-duration: 1.4s;
        animation-timing-function: ease;
        animation-direction: normal;
        animation-fill-mode:forwards;
        animation-delay: 2.8s;
	}
	
@keyframes main_content{
	0% {opacity: 0;}
	100% {opacity: 1;}
}


main section{
	margin: 0 auto;
    padding:0 60px;
}

main section h2{
	font-family: p22-underground, sans-serif;
	font-style: normal;
	font-weight: 700;
	text-align: center;
	font-size: 24px;
	margin-bottom: 66px;
}

main section.store_locator h3 {
    margin-bottom: 40px;
}
main section.store_locator h3:after {
    content: "　";
    width: 30px;
    border-bottom: 2px solid #4d4d4d;
    display: block;
    margin: auto;
}

    .copy{
        font-size: 5rem;
        font-family: 'Rouge Script', cursive;
        letter-spacing: normal;
        display: inline-block;
        text-align: center;
        transform: rotate(-10deg);
        line-height: 1.5;
        color: #4d4d4d;
    }    

    .main section h3{
        font-size: 1rem;
    }    
    
    .arrow_link_wrap_left{
        text-align: left;
        width: 100%;
        padding: 20px 0;
    }    
    .arrow_link_wrap_right{
        text-align: right;
        width: 100%;
        padding: 20px 0;
    }    
    .arrow_link {
        display: block;
        margin-bottom: 10px;
    }
    
    .arrow_link span{
        border-bottom: 1px solid #4d4d4d;
        font-size: 1.1rem;
        padding-bottom: 0.5rem;
    }
    .arrow_link:after{
        display: inline-block;
        margin-left: 1rem;
        content: " ";
        width: 30px;
        height: 1rem;
        background-image: url("../images/arrow.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 30px;
    }
   
/* CONCEPT */
    
.top_concept {
    padding-bottom: 100px;
}
    
.top_concept_box{
    max-width: 100%;
    display: grid;
    grid-template-columns:100%;
    text-align: center;
    position: relative;
}
    
    
.top_concept_img {
    position: relative;
    width: 80%;
    padding-top: 90%;
    padding-bottom: 0%;
    margin: 0 auto 2rem;
    }

 .top_concept_img img.top_concept_img_1{
    width: 70%;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;    
}
.top_concept_img img.top_concept_img_2{
    width: 50%;
    height: auto;
    padding-top: 30%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;    
}
    
    .top_concept_img_1.fadein{
        transform: translateX(50px);
    }    
    .top_concept_img_1.fadein.fadein-on {
        opacity: 1;
        transform: translateX(0);
    }   
    .top_concept_img_2.fadein{
        transform: translateX(-50px);
    }    
    .top_concept_img_2.fadein.fadein-on {
        opacity: 1;
        transform: translateX(0);
    }   
    


.top_concept_description {
    width: 80%;
    text-align: left;
    display: block;
    margin: auto;
}
.top_concept_description > div{
    text-align: center;
    }

.top_concept_description h1{
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: #286551;
    font-weight: bold;
    text-align: center;
}
    
.leaf {
    width: 50%;
    height: auto;
    position: absolute;
    z-index: 3;
    bottom: -220px;
    right: -15%;
}    
    
.leaf.fadein{
    transform: translateY(-100px) rotate(-5deg);
    transition-delay: 0.7s;
    filter: blur(10px);
}    
.leaf.fadein.fadein-on {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
    filter: blur(0px);
}   

 
    
.top_about{
    padding: 100px 0;
    background: #f7f7f7;
}    
    
 .top_about_box {
    padding: 0 ;
     position: relative;
}   

.top_about_box > div{
    position: absolute;
    top:50%;
    right: 60px;
    transform: translateY(-50%);
    width: 30%;
    margin-top: 60px;
    text-align: center;
}
    
.top_about_box img{
    width: 70%;
    height: auto;
}
 
.top_about_box img.fadein{
    transform: translateX(-50px);
}    
.top_about_box img.fadein.fadein-on {
    opacity: 1;
    transform: translateX(0);
}   
    
.top_about_description .copy,
.top_about_description h3{
        text-align: center;
    }    

    .top_about_description .copy{
    line-height: 1;
}
    
    
 .top_course{
    padding: 100px 0;
    max-width: 100%;
}    

 .top_course_box {
    padding: 0;
    position: relative;
    margin: auto;
    text-align: right;
}   

.top_course_box > div{
    position: absolute;
    top:50%;
    left: 60px;
    transform: translateY(-50%);
    width: 30%;
    margin-top: 60px;
    text-align: center;
}
    
.top_course_box img{
    width: 70%;
    height: auto;
}

 
.top_course_box img.fadein{
    transform: translateX(50px);
}    
.top_course_box img.fadein.fadein-on {
    opacity: 1;
    transform: translateX(0);
}   
    
.top_course_description .copy,
.top_course_description h3{
        text-align: center;
    }    
.top_course_description .copy{
    line-height: 1;
}
 
    
/* STORE LOCATOR */
.tab_container {
		max-width: 1280px;
		width: 100%;
		padding:0 0 1em;
		margin: 0 auto;
		text-align: center;
	}

.tab_item {
	font-family: p22-underground, sans-serif;
	font-style: normal;
	font-weight: 500;
	margin: 0 5px;
	padding:0 0 5px;
	border-bottom: 2px solid transparent;
	color: #ddd ;
	display: inline-block;
	text-align: center;
	transition: all 0.5s ease;
	cursor: pointer;
	letter-spacing: 0.1em;
	font-size: 13px;
}

.tab_item:hover {
  opacity: 0.75;
}
input[name="tab_item"] {
  display: none;
}
.tab_content {
	display: none;
	padding: 60px 0 30px;
	clear: both;
	overflow: hidden;
	text-align: left;
	transition: all 0.5s ease;
}



#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content,
#tab5:checked ~ #tab5_content,
#tab6:checked ~ #tab6_content  {
	display: block;
	animation-name: shop_list;
	animation-duration: 0.7s;
	animation-timing-function: ease;
	animation-direction: normal;
}


.tab_container input:checked + .tab_item {
  color: #9e958a;
  border-bottom: 2px solid #9e958a;
}

.tab_content_description{
	display: grid;
	grid-template-columns:repeat(2, 50%) ;
}






/* footer */

	.footer_image{
		width: 100%;
		height: 50vh;
        max-height: 380px;
        background-image: url(../images/footer_img-pc.jpg);
        background-size: cover;
        background-position: bottom;
	}

	.footer_top{
		background: #dbd5cf;
		color:#fbfbf6;
		padding:60px 0;
	}

	.footer_logo{
		text-align: center;
		margin-bottom: 40px;
	}
	.footer_logo img{
		width: 132px;
		height: auto;
	}

	.footer_top_menu{
		display: flex;
		justify-content: center;
		margin-bottom: 40px;
		font-family: p22-underground, sans-serif;
	}

	.footer_top_menu li{
		padding: 0 15px;
	}

	.footer_top_menu a{
		color:#fbfbf6;
	}

	.footer_top_sns{
		display: flex;
		justify-content: center;
		font-family: p22-underground, sans-serif;
	}

	.footer_top_sns li{
		padding: 0 15px;
	}

	.footer_top_sns a{
		color:#fbfbf6;
	}
	.footer_top_sns a img{
		color:#fbfbf6;
		height: 15px;
	}


	.footer_bottom{
		background: #9e958a;
		color:#fbfbf6;
		padding: 15px 40px;
		display: flex;
		justify-content: space-between;
		font-size: 10px;
		letter-spacing: 0.1em;
	}

	.footer_bottom_menu {
		display: flex;
		letter-spacing: normal;
	}
	
	.footer_bottom_menu li{
		margin-right: 20px;
	}
    
	.footer_top_menu a{
        color: #4d4d4d;
        padding: 0 0 14px;
        display: block;
        font-size: 16px;
        line-height: 1.4;
	}

	.footer_top_menu a span{
        display: block;
        font-size: 11px;
    }

	.footer_copyright{
		font-family: p22-underground, sans-serif;
		font-style: normal;
		font-weight: 300;
	}

	#footerbanner{
        display: none !important;
		position: fixed;
		bottom: 60px;
		right: 40px;
		z-index: 2;
	}
	
	#footerbanner a {
		display: block;
		width: 120px;
		height: 120px;
		border-radius: 60px;
		text-align: center;
		background: #9e958a;
		color: #fbfbf6;
		position: relative;
		line-height: 1.5;
		letter-spacing: 0.1em;
		font-size: 15px;
		font-weight: 100;
	}
	
	#footerbanner p{
		width: 100%;
        text-align: center;
		position: absolute;
		top:50%;
		transform: translateY(-50%);
	}	
	#footerbanner span{
		display: block;
	}	
	
	
}






/* ページテンプレート　sp */
@media screen and (max-width: 767px) {

	
body{
	font-size: 14px;
	letter-spacing: 0.05rem;
	line-height: 2;
    padding-bottom: 60px;
    position: relative;
    overflow-x: hidden;
    width: 100vw;
}

[type="hidden"], [type="text"], [type="search"], [type="tel"], [type="url"], [type="email"], [type="password"], [type="datetime"], [type="date"], [type="month"], [type="week"], [type="time"], [type="datetime-local"], [type="number"], select, textarea {
    border: 1px solid #CCCCCC;
    border-radius: 0;
    padding: 5px 10px;
    line-height: 2;
	width: 100%;
}	

	
	
/*　head　*/
header{
	width: 100%;
	}
	
	
header h1{
    position: fixed;
    top:10px;
    left: 15px;
	z-index: 10;
}

header h1 a {
    padding: 5px;
    display: inline-block;
    box-sizing: content-box;
}
	
header h1 img{
	width: 120px;
	height:auto;
}
	
	
.header_menu{
	display: flex;
}

.globalMenuSp {
	display: block;
}

.globalMenuSp ul {
	position: absolute;
	top:100px;
	width: 100%;
	display: none;
	margin: 0 auto;
	padding: 0;
}
.globalMenuSp.active ul {
	display: block;
}

.globalMenuSp ul li {
	list-style-type: none;
	padding: 0 15px 1.2rem;
	text-align: center;
}

	
	
	
.globalMenuSp ul li a {
	font-size: 18px;
	line-height: 1.5;
	display: block;
	color: #4d4d4d;
	text-decoration :none;
	opacity: 0;
}
	
.globalMenuSp.active ul li a{
		animation-name: globalMenuSp;
		animation-duration: 1.4s;
		animation-timing-function: ease;
		animation-direction: normal;
		animation-fill-mode:forwards;
	}

.globalMenuSp.active ul li a span{
    display: block;
    font-size: 14px;
    }
    
.globalMenuSp.active ul li:first-child a{
	animation-delay: 0.2s;
}	
.globalMenuSp.active ul li:nth-child(2) a{
	animation-delay: 0.4s;
}	
.globalMenuSp.active ul li:nth-child(3) a{
	animation-delay: 0.6s;
}	
.globalMenuSp.active ul li:nth-child(4) a{
	animation-delay: 0.8s;
}	
.globalMenuSp.active ul li:nth-child(5) a{
	animation-delay: 1.0s;
}	
.globalMenuSp.active ul li:nth-child(6) a{
	animation-delay: 1.2s;
}	
	
@keyframes globalMenuSp{
	0% {transform:translateY(30px); opacity: 0;}
	100% {transform:translateY(0);  opacity: 1;}
}
	




.sp_menu {
    position: fixed;
    bottom: 0;
    z-index: 4;
    display: grid;
    padding-left: 80px;
    width: 100%;
    grid-template-columns: 50% 50%;
}
.sp_menu div a{
    display: block;
    height: 60px;
    line-height: 60px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: #fbfbfb;
    }

    
.sp_menu div a.booking{
    background-color: #286551;
}

.sp_menu div a.open_map{
    background-color: #9fae71;
}
    
 .sp_menu div a i{
     margin-right: 0.5rem;
    }

    .hamburger_wrap{
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 5;
        width: 80px;
        height: 60px;
        background: #e7e7e7;
    }    
    
.hamburger {
    position: relative;
    cursor: pointer;
    text-align: center;
    box-sizing: border-box;
    margin: auto;
    display: block;
    width: 40px;
    height: 40px;
}
	
.hamburger span {
  display : block;
  position: absolute;
  width   : 20px;
  height  : 1px ;
  left    : 5px;
  background : #4d4d4d;
  transition : background 0.7s ease ,transform 0.3s ease-in-out,top 0.3s ease-in-out;
}
	
.hamburger span:nth-child(1) {
  top: 15px;
  left: 10px;
}
    
.hamburger span:nth-child(2) {
  top: 23px;
  left: 10px;
}
    
.sp_bottom_menu_title{
    display: block;
    position: absolute;
    width: 100%;
    bottom: 10px;
    line-height: 1;
    left: 0;
    text-align: center;
    font-size: 12px;
 }
	

	

/* ナビ開いてる時のボタン */
.hamburger.active span:nth-child(1) {
  top : 20px;
  background :#4d4d4d !important;
  transform : rotate(-45deg);
}

.hamburger.active span:nth-child(2) {
  top: 20px;
  background :#4d4d4d !important;
  transform : rotate(45deg);
}

nav.globalMenuSp {
	position: fixed;
	z-index : 5;
	top  : 0;
	left : 0;
	color: #4d4d4d;
	background: #fbfbf6;
	text-align: center;
	width: 0;
	height:0;
	opacity: 0;
	transition: opacity .6s ease, visibility .6s ease ,height .1s ease 1s ,width .1s ease 1s ;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  opacity: 100;
	width: 100%;
	height: 100vh;
    padding-bottom: 60px;
	transition: opacity .6s ease .2s , visibility .6s ease .2s , height .1s ease ,width .1s ease;
}


    
h2{
    display: block;
    position: absolute;
    bottom: 100px;
    left: 0;
    z-index: 1;
    padding: 24px;
    font-size: 10px;
    line-height: 1.5;
}
	

/* hero */

.hero{
	position: relative;
	animation-name: hero;
	animation-duration: 1.4s;
	animation-timing-function: ease;
	animation-direction: normal;
	animation-fill-mode:forwards;
	animation-delay: 0.4s;
	opacity: 0;
    height: calc(100vh - 60px);
}

@keyframes hero{
	0% {opacity: 0;}
	100% {opacity: 1;}
}

    .swiper-container{
        height: 100%;
    }
.swiper-slide{
	position: relative;
	height: 100%;
}

.slide_content{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
	color: #fbfbf6;
	font-family: yu-mincho-pr6, sans-serif;
	font-style: normal;
	font-weight: 400;
	text-align: center;
	letter-spacing: normal;
	width: 100%;
}

.hero_title{
	font-size: 48px;
	line-height: 1.2;
}

.hero_sub_title{
	font-size: 20px;
	margin-bottom: 20px;
	line-height: 1.5;
}

.slide_content .underber_botton{
	letter-spacing: 0.1em;
	font-size: 14px;
}
.slide_content .underber_botton span{
	border-bottom: 2px solid #fbfbf6;
}	
.slide_content .underber_botton:after{
	background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 38.4 10.1"><path fill="%23fbfbf6" d="M37.4,10.1H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h33.9l-6.4-6.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l8.1,8.1 c0.3,0.3,0.4,0.7,0.2,1.1C38.1,9.8,37.8,10.1,37.4,10.1z"/></svg>');
}

.swiper-slide img{
    width: 100%;
    height: 100%;
	object-fit: cover;
}



.scroll_down {
  display: inline-block;
  position: absolute;
  right: 20px;
  bottom: 0;
  z-index: 2;
  padding: 0 0 100px;
  overflow: hidden;
  color: #fbfbf6 !important;
	font-weight: 300;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  writing-mode: vertical-lr;
	font-weight: 400;
}
	
.scroll_down::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 80px;
  background: #fbfbf6;
}
.scroll_down::after {
  animation: sdl 2.4s cubic-bezier(1, 0, 0, 1) infinite;
}
	



/* maiu */

main{
	width: 100%;
	margin: 0 auto;
	padding:100px 0 0;
    background-image:url("../images/BG_sp.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top;
    overflow-x: hidden;
}
    
main.fadein{
	transform: translateY(0) !important;
}

main.content{
        opacity : 0;
        animation-name: main_content;
        animation-duration: 1.4s;
        animation-timing-function: ease;
        animation-direction: normal;
        animation-fill-mode:forwards;
        animation-delay: 2.8s;
	}
	
@keyframes main_content{
	0% {opacity: 0;}
	100% {opacity: 1;}
}


main section{
	margin: 0 auto;
	padding:0 24px;
}

main section h3{
	font-style: normal;
	font-weight: 700;
	text-align: center;
	font-size: 18px;
	margin-bottom: 10px;
}
    
    
main section.store_locator h3 {
    margin-bottom: 24px;
}
main section.store_locator h3:after {
    content: "　";
    width: 30px;
    border-bottom: 2px solid #4d4d4d;
    display: block;
    margin: auto;
}

    .copy{
        font-size: 3.5rem;
        font-family: 'Rouge Script', cursive;
        letter-spacing: normal;
        display: inline-block;
        text-align: center;
        transform: rotate(-10deg);
        line-height: 1.5;
        color: #4d4d4d;
    }    

    .arrow_link_wrap_left{
        text-align: left;
        width: 100%;
        padding: 10px 0 0;
    }    
    
    .arrow_link_wrap_right{
        text-align: right;
        width: 100%;
        padding: 10px 0 0;
    } 
    
    .arrow_link {
        display: block;
        margin-bottom: 10px;
    }    
    .arrow_link span{
        border-bottom: 1px solid #4d4d4d;
        font-size: 0.9rem;
        padding-bottom: 0.5rem;
    }
    .arrow_link:after{
        display: inline-block;
        margin-left: 1rem;
        content: " ";
        width: 30px;
        height: 0.9rem;
        background-image: url("../images/arrow.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: 30px;
    }

/* CONCEPT */

    .top_concept{
        padding-bottom: 60px;
    }    
.top_concept_box{
    width: 100%;
    display: grid;
    grid-template-columns:100%;
    text-align: center;
    position: relative;
}
    
    
.top_concept_img {
    position: relative;
    width: calc(100% - 20px);
    padding: 100% 0px 10%;
    margin: 0 auto 1rem;
}

 .top_concept_img img.top_concept_img_1{
    width: 70%;
    height: auto;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;    
}
.top_concept_img img.top_concept_img_2{
    width: 50%;
    height: auto;
    padding-top: 30%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;    
}
    
    .top_concept_img_1.fadein{
        transform: translateX(50px);
    }    
    .top_concept_img_1.fadein.fadein-on {
        opacity: 1;
        transform: translateX(0);
    }   
    .top_concept_img_2.fadein{
        transform: translateX(-50px);
    }    
    .top_concept_img_2.fadein.fadein-on {
        opacity: 1;
        transform: translateX(0);
    }   

    .top_concept_description {
        display: block;
        padding: 0 10px;
        position: relative;
    }
    
    .top_concept_description p{
    } 
    
.top_concept_description h1{
    font-weight: bold;
    padding-bottom: 10px;
    font-size: 16px;
    color: #286551;
}
	
	
.leaf {
    width: 70%;
    height: auto;
    position: absolute;
    z-index: 1;
    bottom: -140px;
    right: -15%;
}    
    
.leaf.fadein{
    transform: translateY(-100px) rotate(-20deg);
    transition-delay: 0.7s;
    filter: blur(10px);
}    
.leaf.fadein.fadein-on {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
    filter: blur(0px);
}   


    
.top_about{
    padding: 60px 0;
    background: #f7f7f7;
}    
    
 .top_about_box {
    padding: 0 24px;
     width: 100%;
     position: relative;
}   

.top_about_description{
    width: 90%;
    margin-left: 10%;
}
  
.top_about_description > div{
    text-align: end;
    margin-top: -30px;
}    
    .top_about_description .copy{
        display: inline-block;
        line-height: 1;
    }
    .top_about_description h3{
        text-align: end;
        margin-bottom: 0;
    }
    
.top_about_box img{
    width: 90%;
    height: auto;
}
 
.top_about_box img.fadein{
    transform: translateX(-50px);
}    
.top_about_box img.fadein.fadein-on {
    opacity: 1;
    transform: translateX(0);
}   

    
    
.top_course{
    padding: 60px 0;
    text-align: right;
}    
    
 .top_course_box {
    padding: 0 24px;
     width: 100%;
     position: relative;
}   

.top_course_description{
    width: 90%;
    margin-right: 10%;
    
}
  
.top_course_description > div{
    text-align: left;
    margin-top: -30px;
}    
    .top_course_description .copy{
        display: inline-block;
        line-height: 1;
    }
    .top_course_description h3{
        text-align: left;
        margin-bottom: 0;
    }
    
.top_course_box img{
    width: 90%;
    height: auto;
}
 
.top_course_box img.fadein{
    transform: translateX(-50px);
}    
.top_course_box img.fadein.fadein-on {
    opacity: 1;
    transform: translateX(0);
}   
    
    .top_course_box .arrow_link{
        text-align: left;
    }    
    
    
/* STORE LOCATOR */
.tab_container {
		width: 100%;
		padding:0 0 1em;
		margin: 0 auto ;
		text-align: center;
	}

.tab_item {
	font-family: p22-underground, sans-serif;
    font-style: normal;
    font-weight: 500;
    margin: 0 10px 20px;
    padding: 0;
    border-bottom: 2px solid transparent;
    color: #ddd;
    display: inline-block;
    text-align: center;
    transition: all 0.5s ease;
    cursor: pointer;
    letter-spacing: 0;
}

.tab_item:hover {
  opacity: 0.75;
}
input[name="tab_item"] {
  display: none;
}
	
.tab_content {
	display: none;
	padding: 20px 0 0;
	clear: both;
	overflow: hidden;
	text-align: left;
	transition: all 0.5s ease;
}



#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content,
#tab5:checked ~ #tab5_content,
#tab6:checked ~ #tab6_content  {
	display: block;
	animation-name: shop_list;
	animation-duration: 0.7s;
	animation-timing-function: ease;
	animation-direction: normal;
}


.tab_container input:checked + .tab_item {
  color: #9e958a;
  border-bottom: 2px solid #9e958a;
}

.tab_content_description{
	display: block;
}
		
/* footer */

	.footer_image{
		width: 100%;
		height: 30vh;
        background-image: url(../images/footer_img-sp.jpg);
        background-size: cover;
	}

	.footer_top{
		background: #dbd5cf;
		color:#4d4d4d;
		padding:60px 24px 80px;
	}

	.footer_logo{
		text-align: left;
		margin-bottom: 20px;
	}
	.footer_logo img{
		width: 120px;
		height: auto;
	}

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

	.footer_top_menu li{
		padding: 0;
	}

	.footer_top_menu a{
        color: #4d4d4d;
        padding: 0 0 14px;
        display: block;
        font-size: 16px;
        line-height: 1.4;
	}

	.footer_top_menu a span{
        display: block;
        font-size: 11px;
    }
    
    
	.footer_top_sns{
		display: flex;
		justify-content: flex-start;
	}

	.footer_top_sns li{
		padding: 0 15px 0 0 ;
	}

	.footer_top_sns a{
		color:#4d4d4d;
	}
	.footer_top_sns a img{
		color:#fbfbf6;
		height:18px;
	}


	.footer_bottom{
		background: #9e958a;
		color: #fbfbf6;
		padding: 0;
		display: block;
		justify-content: space-between;
		font-size: 11px;
		letter-spacing: 0.1em;
	}

	.footer_bottom_menu {
		display: block;
		background: #dbd5cf;
		padding:20px 24px 50px;
	}
	.footer_bottom_menu li{
		margin-right: 0;
	}
	.footer_bottom_menu a{
		color:#fbfbf6;
		display: block;
		padding: 3px 0;
	}

	.footer_copyright{
		font-style: normal;
		font-weight: 300;
		padding: 20px;
		text-align: center;
		font-size: 10px;
		line-height: 1;
	}

	
	#footerbanner{
		position: fixed;
		bottom: 70px;
		right: 10px;
		z-index: 3;
        display: none !important;
	}
	
	#footerbanner a {
		display: block;
		width: 90px;
		height: 90px;
		border-radius: 60px;
		text-align: center;
		background: #9e958a;
		color: #fbfbf6;
		position: relative;
		line-height: 1.5;
		letter-spacing: 0.1em;
		font-size: 12px;
		font-weight: 100;
	}
	
	#footerbanner p{
		width: 100%;
        text-align: center;
		position: absolute;
		top:50%;
		transform: translateY(-50%);
	}	
	#footerbanner span{
		display: block;
	}	
	
	
	
}


/* animation */
@keyframes sdl {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  30% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  70% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

@keyframes shop_list{
	0% {opacity:0; }
	100% {opacity: 1; }
}




/* TOP PAGE ショップ PC*/
@media screen and (min-width: 901px) {


.shop_info{
    display: grid;
    grid-template-columns: 50% 50%;
    background: #f7f7f7;
    }

.g_map{
    width: 100%;
    height: 80vh;
    max-height: 660px;
    min-height: 600px;
    border: none;
}

.shop_detail_wrap {
    position: relative;
}    

.shop_detail {
    position: absolute;
    padding: 0 15%;
    top: 50%;
    transform: translateY(-50%);
}    

.shop_info img {
    width: 200px;
    height: auto;
    margin-bottom: 20px;
}    
    
.shop_name{
	font-weight:400;
	font-size: 20px;
	margin-bottom: 5px;
}

.shop_link_wrap {
    display: grid;
    grid-gap: 1rem;
    margin-top: 3rem;
    grid-template-columns: 1fr 1fr;
}    
 
.shop_link_wrap div:first-child {
    grid-column: 1 / 3;
}    
    .shop_detail p{
        display: flex;
        line-height: 2;
    } 
    .shop_detail p>i{
        line-height: 2;
    }
    
.shop_detail p>i,
.shop_detail a>i{
    display: inline-block;
    margin-right: 0.5rem;
}  
    
.shop_detail a{
    display:block;
    color: #fbfbf6;
    padding: 0 1rem;
    line-height: 3rem;
    border-radius: 10px;
    background: #4d4d4d;
    max-width: 100%;
    font-weight: bold;
    text-align: center;
}

.shop_detail .shop_introduction{
    display:block;
    color: #4d4d4d;
    padding: 0 2rem;
    line-height: 3rem;
    border-radius: 10px;
    background: #fbfbf6;
    max-width: 100%;
    font-weight: bold;
    border: 1px solid #4d4d4d;
}
    
.shop_detail a.reservation{
    background-color: #286551;
}

.shop_detail a.open_map{
    background-color: #9fae71;
}

}


/* TOP PAGE ショップ タブレット*/
@media screen  and (min-width: 768px) and (max-width: 900px) {

.shop_info{
    display: grid;
    grid-template-columns: 50% 50%;
    background: #f7f7f7;
    }

.g_map{
    width: 100%;
    height: 100%;
    border: none;
}

.shop_detail_wrap {
}    

.shop_detail {
    padding: 15%;
}    

.shop_info img {
    width: 160px;
    height: auto;
    margin-bottom: 1rem;
}    
    
.shop_name{
	font-weight:bold;
	font-size: 16px;
	margin-bottom: 5px;
    letter-spacing: normal;
}

.shop_link_wrap {
    display: grid;
    grid-gap: 1rem;
    margin-top: 2rem;
    grid-template-columns: 1fr 1fr;
}    
 
.shop_link_wrap div:first-child {
    grid-column: 1 / 3;
}    

    .shop_detail p{
        display: flex;
        line-height: 2;
    } 
    .shop_detail p>i{
        line-height: 2;
    }
.shop_detail p>i,
.shop_detail a>i{
    display: inline-block;
    margin-right: 0.5rem;
}  
 
    
.shop_detail a{
    display:block;
    color: #fbfbf6;
    padding: 0;
    line-height: 3rem;
    border-radius: 10px;
    background: #4d4d4d;
    max-width: 100%;
    font-weight: bold;
    text-align: center;
}

.shop_detail .shop_introduction{
    display:block;
    color: #4d4d4d;
    padding: 0;
    line-height: 3rem;
    border-radius: 10px;
    background: #fbfbf6;
    max-width: 100%;
    font-weight: bold;
    border: 1px solid #4d4d4d;
}
    
.shop_detail a.reservation{
    background-color: #286551;
}

.shop_detail a.open_map{
    background-color: #9fae71;
}

}

/* TOP PAGE ショップ SP*/
@media screen  and (max-width: 767px) {

.shop_info{
    display: grid;
    grid-template-columns: 100%;
    background: #f7f7f7;
    }

.g_map{
    width: 100%;
    height: 40vh;
    border: none;
}

.shop_detail_wrap {

}    

.shop_detail {
    padding: 3rem 2rem;
}    

.shop_info img {
    width: 160px;
    height: auto;
    margin:0 auto 20px;
    display: block;
}    
    
.shop_name{
	font-weight:bold;
	font-size: 16px;
	margin-bottom: 1rem;
    letter-spacing: normal;
}

.shop_link_wrap {
    display: grid;
    grid-gap: 1rem;
    margin-top: 2rem;
    grid-template-columns: 1fr 1fr;
}    
 
.shop_link_wrap div:first-child {
    grid-column: 1 / 3;
}    
    .shop_detail p{
        display: flex;
        line-height: 2;
    } 
    .shop_detail p>i{
        line-height: 2;
    }
    
    
.shop_detail p>i,
.shop_detail a>i{
    display: inline-block;
    margin-right: 0.5rem;
}  
    
.shop_detail a{
    display:block;
    color: #fbfbf6;
    padding: 0;
    line-height: 3rem;
    border-radius: 10px;
    background: #4d4d4d;
    max-width: 100%;
    font-weight: bold;
    text-align: center;
}

.shop_detail .shop_introduction{
    display:block;
    color: #4d4d4d;
    padding: 0;
    line-height: 3rem;
    border-radius: 10px;
    background: #fbfbf6;
    max-width: 100%;
    font-weight: bold;
    border: 1px solid #4d4d4d;
}
    
.shop_detail a.reservation{
    background-color: #286551;
}

.shop_detail a.open_map{
    background-color: #9fae71;
}

}



/* contents page PC */
@media screen and (min-width: 901px){
    
    .page_title{
        text-align: center;
        margin-bottom: 3rem;
    }
    .page_title h3 {
        font-style: normal;
        font-weight: 700;
        text-align: center;
        font-size: 24px;
        margin-bottom: 20px;
    }

    .content_top_image_wrap{
        padding: 0 80px;
        width: 100%;
    }

    .content_top_image{
        display: block;
        position: relative;
        height: 70vh;
        width: 100%;
        overflow: hidden;
        box-sizing: content-box;
    }
    
    .content_top_image img{
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit:cover;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    
    .content_wrap{
        margin: 0 auto;
        padding: 150px 80px;
        width: 100%;
        max-width: none;
    }

    .sub_title{
        font-size: 2rem;
        font-weight: bold;
    }
    
    .content_top_description{
        margin: auto;
        font-size: 1rem;
        max-width: 1000px;
        width: 90%;
        padding: 0;
        display: grid;
        grid-gap: 40px;
    }
    
    .yosa_leaf {
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: #f0e9e2;
        max-width: none;
    } 
    
    .yosa_leaf_img{
        position: relative;
        width: 100%;
        height: 100%;
    }
    .yosa_leaf_img img{
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    
    .yosa_leaf_description{
        margin: auto;
        font-size: 1rem;
        padding: 150px 100px;
        display: grid;
        grid-gap: 40px;
    } 
    
    
    .yosa_material{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 60px;
        padding: 150px 0;
    }
    
    .yosa_material > div{
        position: relative;
    }
   
    .yosa_material h4{
        grid-column: 1/4;
    }
    
    .yosa_material h5 {
        font-size: 1.5rem;
        font-weight: bold;
        padding: 10px 0;
    }
    
    .yosa_material p {
        font-size: 1rem;
    }
    
    .yosa_material span{
       position: absolute;
        right: 0;
        bottom: 100px;
        font-size: 9rem;
        color: rgba(240,233,226,0.8);
        line-height: 9rem;
        z-index: 1;
    }
    
    .yosa_material > div:nth-child(2){
        transition-delay: 0.3s;
    }
    
    .yosa_material > div:nth-child(3){
        transition-delay: 0.6s;
    }
    
    .yosa_material > div:nth-child(4){
        transition-delay: 0.9s;
    }
    
    .yosa_material > div:nth-child(5){
        transition-delay: 1.2s;
    }
    
    .yosa_material > div:nth-child(6){
        transition-delay: 1.5s;
    }
    
    .yosa_material > div:nth-child(7){
        transition-delay: 1.8s;
    }
    
    
    .yosa_process_wrap{
        position: relative;
    }
    .yosa_process_bg{
        position: absolute;
        width: 50%;
        height: 100%;
        display: block;
        background: #f0e9e2;
        top: 0;
        left: 0;
        z-index: -1;
    }
    
    .yosa_process {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        grid-gap: 0;
        padding: 80px 60px 0 60px ;
    }
    
    .yosa_process > div {
        position: relative;
    }
    
    .yosa_process > div:nth-child(1),
    .yosa_process > div:nth-child(2),
    .yosa_process > div:nth-child(3){
        padding-right: 100px;
        padding-bottom: 100px;
    }
   
    .yosa_process > div:nth-child(4),
    .yosa_process > div:nth-child(5),
    .yosa_process > div:nth-child(6){
        padding-left: 100px;
        padding-bottom: 0;
    }
   
    
    .yosa_process .step_allow{
        display: inline-block;
        width: 60px;
        height: calc(100% - 100px);
        background-image: url("../images/arrow.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 0;
    }

    .yosa_process > div:nth-child(1) .step_allow,
    .yosa_process > div:nth-child(2) .step_allow,
    .yosa_process > div:nth-child(3) .step_allow{
        right: 20px;
    }
    
    .yosa_process > div:nth-child(4) .step_allow,
    .yosa_process > div:nth-child(5) .step_allow,
    .yosa_process > div:nth-child(6) .step_allow{
        right: -80px;
    }
    
    
    .yosa_process .step_no {
        position: absolute;
        font-size: 3.4rem;
        line-height: 1;
        color: #9fae71;
    }    
    
    .yosa_process > div:nth-child(1) .step_no,
    .yosa_process > div:nth-child(2) .step_no,
    .yosa_process > div:nth-child(3) .step_no{
        top: -30px;
        left: -20px;
    }
    
    .yosa_process > div:nth-child(4) .step_no,
    .yosa_process > div:nth-child(5) .step_no,
    .yosa_process > div:nth-child(6) .step_no{
        top: -30px;
        left: 80px;
    }
    
    
    
    .yosa_process p {
        font-size: 1rem;
        padding: 1rem 0;
    }    

    
    
    .course_title{
        font-size: 2rem;
        font-weight: bold;
        border-bottom: 1px solid #4d4d4d;
        margin-bottom: 20px;
    }
    
    .course_box{
        margin: auto;
        font-size: 1rem;
        max-width: 1200px;
        width: 90%;
        padding: 80px 100px;
        background-color: #f0e9e2;
        margin-bottom: 60px;
    }
    
    .course_info{
        display: flex;
        justify-content: space-between;
        margin-bottom: 40px;
    }
    .course_text{
        font-size: 1.2rem;
    }
    .course_price{
        font-size: 2rem;
        line-height: 2rem;
    }
    .course_detail {
        display: flex;
    }
     .course_detail li {
        background: #fbfbf6;
        padding: 0px 20px;
        line-height: 40px;
        border-radius: 30px;
        margin-right: 10px;
        border: 1px solid #9e958a;
        font-size: 0.9rem;
    }   
    

    
    
    
    
    .salon_gallery{
        padding: 0 80px 150px;
    }  
    .spotlight-group{
        display: grid;
        grid-gap: 30px;
        grid-template-columns: repeat(4 , 1fr);
    }
    .spotlight-group a{
        display: block;
        width: 100%;
        padding-top: 100%;
        position: relative;
        overflow: hidden;

    }
    
    .spotlight-group img{
        object-fit: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 100%;
        height: 100%;
    }  
    
    .spotlight-group a:nth-child(2){
        transition-delay: 0.3s;
    }
    .spotlight-group a:nth-child(3){
        transition-delay: 0.6s;
    }
    .spotlight-group a:nth-child(4){
        transition-delay: 0.9s;
    }
    .spotlight-group a:nth-child(6){
        transition-delay: 0.3s;
    }
    .spotlight-group a:nth-child(7){
        transition-delay: 0.6s;
    }
    .spotlight-group a:nth-child(8){
        transition-delay: 0.9s;
    }
    .spotlight-group a:nth-child(10){
        transition-delay: 0.3s;
    }
    .spotlight-group a:nth-child(11){
        transition-delay: 0.6s;
    }
    .spotlight-group a:nth-child(12){
        transition-delay: 0.9s;
    }
    
  
    
.salon_info{
    display: block;
    padding: 0 80px 150px;
    }

.salon_info .g_map{
    width: 100%;
    max-height: 500px;
    min-height: 500px;
    border: none;
    margin-bottom: 60px;
}

.salon_detail_wrap {
    display: flex;
    justify-content:flex-end;
}   

.salon_detail {
    padding-left: 60px;
}    

.salon_info img {
    width: 200px;
    height: auto;
    margin-bottom: 20px;
}    
    
.salon_detail_wrap h4{
	font-weight:400;
	font-size: 20px;
	margin-bottom: 5px;
}

    
.salon_detail p{
    display: flex;
    line-height: 2;
} 
.salon_detail p>i{
    line-height: 2;
}
    
.salon_detail p>i,
.salon_detail a>i{
    display: inline-block;
    margin-right: 0.5rem;
}  
    

    
    .booking_wrap{
        display: block;
        padding: 0 0 150px;
        margin-bottom: 150px;
    }
    
     .booking_box {
        display: grid;
        grid-gap: 60px;
        grid-template-columns: 1fr 1fr;
        text-align: center;
    }   
    .booking_box > div{
        padding:60px 80px;
                background: #f0e9e2;

        
    }
    .booking_title {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    
    .booking_box a{
        margin-bottom: 40px;
        display: block;
    }
    
    .hpb span:first-child {
        display: block;
        background: #ae2d5b;
        padding: 20px 70px;
        max-width: 320px;
        border-radius: 20px;
        margin: auto;
        margin-bottom: 10px;
    }
    .hpb span:nth-child(2) {
        font-size: 1rem;
    }
    
    .tel_booking{
        font-size: 2.4rem;
        pointer-events: none;
    }
    
}


/* contents page tablet */
@media screen and (min-width: 768px) and (max-width: 900px) {
    
    .page_title{
        text-align: center;
        margin-bottom: 3rem;
    }
    .page_title h3 {
        font-style: normal;
        font-weight: 700;
        text-align: center;
        font-size: 1.4rem;
        margin-bottom: 20px;
    }

    .content_top_image_wrap{
        padding: 0 60px;
        width: 100%;
    }

    .content_top_image{
        display: block;
        position: relative;
        height: 70vh;
        width: 100%;
        overflow: hidden;
        box-sizing: content-box;
    }
    
    .content_top_image img{
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit:cover;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    
    .content_wrap{
        margin: 0 auto;
        padding: 100px 60px;
        width: 100%;
        max-width: none;
    }

    .sub_title{
        font-size: 1.4rem;
        font-weight: bold;
    }
    
    .content_top_description{
        margin: auto;
        font-size: 1rem;
        max-width: 1000px;
        width: 90%;
        padding: 0;
        display: grid;
        grid-gap: 40px;
    }
    
    .yosa_leaf {
        padding: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: #f0e9e2;
        max-width: none;
    } 
    
    .yosa_leaf_img{
        position: relative;
        width: 100%;
        height: 100%;
    }
    .yosa_leaf_img img{
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    
    .yosa_leaf_description{
        margin: auto;
        padding:60px 50px;
        display: grid;
        grid-gap: 20px;
    } 
    
    
    .yosa_material{
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 60px;
        padding: 100px 0;
    }
    
    .yosa_material > div{
        position: relative;
    }
   
    .yosa_material h4{
        grid-column: 1/3;
    }
    
    .yosa_material h5 {
        font-size: 1.2rem;
        font-weight: bold;
        padding: 10px 0;
    }
    
    .yosa_material p {
    }
    
    .yosa_material span{
       position: absolute;
        right: 0;
        bottom: 100px;
        font-size: 6rem;
        color: rgba(240,233,226,0.8);
        line-height: 9rem;
        z-index: 1;
    }
    
    .yosa_material > div:nth-child(2),
    .yosa_material > div:nth-child(4),
    .yosa_material > div:nth-child(6){
        transition-delay: 0.3s;
    }
    
    .yosa_material > div:nth-child(3),
    .yosa_material > div:nth-child(5),
    .yosa_material > div:nth-child(7){
        transition-delay: 0.6s;
    }
    
    
    
    .yosa_process_wrap{
        position: relative;
    }
    .yosa_process_bg{
        position: absolute;
        width: 50%;
        height: 100%;
        display: block;
        background: #f0e9e2;
        top: 0;
        left: 0;
        z-index: -1;
    }
    
    .yosa_process {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        grid-gap: 0;
        padding: 80px 20px 0;
    }
    
    .yosa_process > div {
        position: relative;
    }
    
    .yosa_process > div:nth-child(1),
    .yosa_process > div:nth-child(2){
        padding-right: 60px;
        margin-bottom: 60px;
    }
   
    .yosa_process > div:nth-child(3),
    .yosa_process > div:nth-child(4){
        padding:0 30px;
        margin-bottom: 60px;
    }
    
    .yosa_process > div:nth-child(5),
    .yosa_process > div:nth-child(6){
        padding-left: 60px;
        margin-bottom: 0;
    }
   
    
    .yosa_process .step_allow{
        display: inline-block;
        width: 50px;
        height: 50px;
        background-image: url("../images/arrow.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        top: 25%;
    }

    .yosa_process > div:nth-child(1) .step_allow,
    .yosa_process > div:nth-child(2) .step_allow{
        right: 20px;
    }
    
    .yosa_process > div:nth-child(3) .step_allow,
    .yosa_process > div:nth-child(4) .step_allow{
        right: -10px;
    }
    
    .yosa_process > div:nth-child(5) .step_allow,
    .yosa_process > div:nth-child(6) .step_allow{
        right: -40px;
    }
    
    
    .yosa_process .step_no {
        position: absolute;
        font-size: 2.5rem;
        line-height: 1;
        color: #9fae71;
    }    
    
    .yosa_process > div:nth-child(1) .step_no,
    .yosa_process > div:nth-child(2) .step_no{
        top: -15px;
        left: -15px;
    }
    
   .yosa_process > div:nth-child(3) .step_no,
   .yosa_process > div:nth-child(4) .step_no{
        top: -15px;
        left: 15px;
    }
    
    .yosa_process > div:nth-child(5) .step_no,
    .yosa_process > div:nth-child(6) .step_no{
        top: -15px;
        left: 45px;
    }
    
    
    
    .yosa_process p {
        padding: 1rem 0;
    }    

    
    
    .course_title{
        font-size: 1.8rem;
        font-weight: bold;
        border-bottom: 1px solid #4d4d4d;
        margin-bottom: 20px;
    }
    
    .course_box{
        margin: auto;
        font-size: 1rem;
        padding: 40px 60px;
        background-color: #f0e9e2;
        margin-bottom: 60px;
    }
    
    .course_info{
        display: grid;
        grid-gap: 10px;
        margin-bottom:20px;
    }
    .course_text{
        font-size: 1.2rem;
        order: 2;
    }
    .course_price{
        font-size: 1.8rem;
        line-height: 1.8rem;
        text-align: right;
        order: 1;
    }
    .course_detail {
        display: flex;
        flex-wrap: wrap;
    }
     .course_detail li {
        background: #fbfbf6;
        padding: 0px 20px;
        line-height: 40px;
        border-radius: 30px;
        margin-right: 10px;
         margin-bottom: 10px;
        border: 1px solid #9e958a;
        font-size: 0.9rem;
    }   
    
   
    
    
    
    
    .salon_gallery{
        padding: 0 60px 100px;
    }  
    .spotlight-group{
        display: grid;
        grid-gap: 20px;
        grid-template-columns: repeat(3 , 1fr);
    }
    .spotlight-group a{
        display: block;
        width: 100%;
        padding-top: 100%;
        position: relative;
        overflow: hidden;

    }
    
    .spotlight-group img{
        object-fit: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 100%;
        height: 100%;
    }  
    
    .spotlight-group a:nth-child(2){
        transition-delay: 0.3s;
    }
    .spotlight-group a:nth-child(3){
        transition-delay: 0.6s;
    }
    .spotlight-group a:nth-child(5){
        transition-delay: 0.3s;
    }
    .spotlight-group a:nth-child(6){
        transition-delay: 0.6s;
    }
    .spotlight-group a:nth-child(8){
        transition-delay: 0.3s;
    }
    .spotlight-group a:nth-child(9){
        transition-delay: 0.6s;
    }
    .spotlight-group a:nth-child(11){
        transition-delay: 0.3s;
    }
    .spotlight-group a:nth-child(12){
        transition-delay: 0.6s;
    }
    
  
    
.salon_info{
    display: block;
    padding: 0 60px 100px;
    }

.salon_info .g_map{
    width: 100%;
    min-height: 360px;
    border: none;
    margin-bottom: 40px;
}

.salon_detail_wrap {
    display: grid;
    grid-gap: 30px;
}   

.salon_info img {
    width: 200px;
    height: auto;
    margin-bottom: 20px;
}    
    
.salon_detail_wrap h4{
	font-weight:400;
	font-size: 16px;
	margin-bottom: 5px;
}

    
.salon_detail p{
    display: flex;
    line-height: 2;
} 
.salon_detail p>i{
    line-height: 2;
}
    
.salon_detail p>i,
.salon_detail a>i{
    display: inline-block;
    margin-right: 0.5rem;
}  

    
    
    .booking_wrap{
        display: block;
        margin-bottom: 150px;
    }
    
     .booking_box {
        display: grid;
        grid-gap: 60px;
        grid-template-columns: 1fr;
        text-align: center;
         font-size: 1rem;
    }   
    .booking_box > div{
        padding:60px 80px;
                background: #f0e9e2;

        
    }
    .booking_title {
        font-size: 2rem;
        margin-bottom: 30px;
    }
    
    .booking_box a{
        margin-bottom: 40px;
        display: block;
    }
    
    .hpb span:first-child {
        display: block;
        background: #ae2d5b;
        padding: 20px 70px;
        max-width: 320px;
        border-radius: 20px;
        margin: auto;
        margin-bottom: 10px;
    }
    .hpb span:nth-child(2) {
        font-size: 1rem;
    }
    
    .tel_booking{
        font-size: 2.4rem;
        pointer-events: none;
    }
    
    
}
/* contents page sp */
@media screen and (max-width: 767px) {
    .page_title{
        text-align: center;
        margin-bottom: 2rem;
        line-height: 1;
    }
    .page_title h3 {
        font-style: normal;
        font-weight: 700;
        text-align: center;
        font-size: 18px;
        margin-bottom: 20px;
    }

    .content_top_image_wrap{
        padding: 0 24px;
        width: 100%;
    }

    .content_top_image{
        display: block;
        position: relative;
        height: 70vh;
        width: 100%;
        overflow: hidden;
        box-sizing: content-box;
    }
    
    .content_top_image img{
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit:cover;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    
    .content_wrap{
        margin: 0 auto;
        padding: 60px 24px;
        width: 100%;
        max-width: none;
    }

    .sub_title{
        font-size: 1.3rem;
        font-weight: bold;
    }
    
    .content_top_description{
        margin: auto;
        width: 100%;
        padding: 0;
        display: grid;
        grid-gap: 20px;
    }
    
    .yosa_leaf {
        padding: 0;
        display: block;
        background: #f0e9e2;
        max-width: none;
    } 
    
    .yosa_leaf_img{
        position: relative;
        width: 100%;
        height: 40vh;
    }
    .yosa_leaf_img img{
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    
    .yosa_leaf_description{
        margin: auto;
        padding:60px 24px;
        display: grid;
        grid-gap: 20px;
    } 
    
    
    .yosa_material{
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 20px;
        padding: 60px 0;
    }
    
    .yosa_material > div{
        position: relative;
        padding-bottom: 20px;
    }
   
    .yosa_material h4{
    }
    
    .yosa_material h5 {
        font-size: 1.2rem;
        font-weight: bold;
        padding: 10px 0 0;
    }
    
    .yosa_material p {
    }
    
    .yosa_material span{
       position: absolute;
        right: 0;
        top: 180px;
        font-size: 6rem;
        color: rgba(240,233,226,0.8);
        line-height: 6rem;
        z-index: 1;
    }
    
    .yosa_material > div:nth-child(2),
    .yosa_material > div:nth-child(4),
    .yosa_material > div:nth-child(6){
        transition-delay: 0.3s;
    }
    
    .yosa_material > div:nth-child(3),
    .yosa_material > div:nth-child(5),
    .yosa_material > div:nth-child(7){
        transition-delay: 0.6s;
    }
    
    
    
    .yosa_process_wrap{
        position: relative;
    }
    .yosa_process_bg{
        position: absolute;
        width: 60%;
        height: 100%;
        display: block;
        background: #f0e9e2;
        top: 0;
        left: 0;
        z-index: -1;
    }
    
    .yosa_process {
        display: grid;
        grid-template-columns: 1fr;
        grid-gap: 40px;
        padding: 60px 20px 0;
    }
    
    
    .yosa_process > div {
        position: relative;
        margin-bottom: 30px;
    }
    
    
    .yosa_process > div:nth-child(6){
        margin-bottom: 0;
    }
   
    .yosa_process img {
        width: 80%;
        height: auto;
    }
    
    .yosa_process .step_allow{
        display: block;
        width: 40px;
        height: 30px;
        background-image: url("../images/arrow.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        bottom: 0;
        left: 0;
    }
    
    .yosa_process .step_allow.fadein.to_right{
        transform: translateY(-50px) rotate(90deg) !important;        
    }
    
    .yosa_process .step_allow.fadein.to_right.fadein-on{
         transform: translateY(0) rotate(90deg) !important;     
    }
    
    .yosa_process .step_allow{
        display: block;
        width: 40px;
        height: 30px;
        background-image: url("../images/arrow.svg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
        position: absolute;
        bottom: 0;
        left: 0;
        transform: translateY(0) rotate(90deg);
    }

    .yosa_process > div:nth-child(1) .step_allow,
    .yosa_process > div:nth-child(2) .step_allow{
        right: 20px;
    }
    
    .yosa_process > div:nth-child(3) .step_allow,
    .yosa_process > div:nth-child(4) .step_allow{
        right: -10px;
    }
    
    .yosa_process > div:nth-child(5) .step_allow,
    .yosa_process > div:nth-child(6) .step_allow{
        right: -40px;
    }
    
    
    .yosa_process .step_no {
        position: absolute;
        font-size: 2.5rem;
        line-height: 1;
        color: #9fae71;
        top: -20px;
        left: -15px;
    }    
    

    
    .course_title{
        font-size: 1.2rem;
        font-weight: bold;
        border-bottom: 1px solid #4d4d4d;
        margin-bottom: 10px;
    }
    
    .course_box{
        margin: auto;
        padding: 20px 30px;
        background-color: #f0e9e2;
        margin-bottom: 40px;
    }
    
    .course_info{
        display: grid;
        grid-gap: 10px;
        margin-bottom:20px;
    }
    .course_text{
        order: 2;
    }
    .course_price{
        font-size: 1.4rem;
        line-height: 1.4rem;
        text-align: right;
        order: 1;
    }
    .course_detail {
        display: flex;
        flex-wrap: wrap;
    }
     .course_detail li {
        background: #fbfbf6;
        padding: 0px 15px;
        line-height: 36px;
        border-radius: 30px;
        margin-right: 10px;
        margin-bottom: 10px;
        border: 1px solid #9e958a;
        font-size: 11px;
    }   
    
   
    
    
    
    
    
    .yosa_process p {
        padding: 1rem 0 0 20%;
        width: 100%;
    }    

    
    .salon_gallery{
        padding: 0 20px 60px;
    }  
    .spotlight-group{
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(3 , 1fr);
    }
    .spotlight-group a{
        display: block;
        width: 100%;
        padding-top: 100%;
        position: relative;
        overflow: hidden;

    }
    
    .spotlight-group img{
        object-fit: cover;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 100%;
        height: 100%;
    }  
    
    .spotlight-group a:nth-child(2){
        transition-delay: 0.3s;
    }
    .spotlight-group a:nth-child(3){
        transition-delay: 0.6s;
    }
    .spotlight-group a:nth-child(5){
        transition-delay: 0.3s;
    }
    .spotlight-group a:nth-child(6){
        transition-delay: 0.6s;
    }
    .spotlight-group a:nth-child(8){
        transition-delay: 0.3s;
    }
    .spotlight-group a:nth-child(9){
        transition-delay: 0.6s;
    }
    .spotlight-group a:nth-child(11){
        transition-delay: 0.3s;
    }
    .spotlight-group a:nth-child(12){
        transition-delay: 0.6s;
    }
    
  
    
.salon_info{
    display: block;
    padding: 0 20px 60px;
    }

.salon_info .g_map{
    width: 100%;
    min-height: 40vh;
    border: none;
    margin-bottom: 40px;
}

.salon_detail_wrap {
    display: grid;
    grid-gap: 30px;
}   

.salon_info img {
    width: 200px;
    height: auto;
    margin-bottom: 20px;
}    
    
.salon_detail_wrap h4{
	font-weight:400;
	font-size: 16px;
	margin-bottom: 5px;
}

    
.salon_detail p{
    display: flex;
    line-height: 2;
} 
.salon_detail p>i{
    line-height: 2;
}
    
.salon_detail p>i,
.salon_detail a>i{
    display: inline-block;
    margin-right: 0.5rem;
}  
    
    .booking_wrap{
        display: block;
        margin-bottom: 150px;
    }
    
     .booking_box {
        display: grid;
        grid-gap: 60px;
        grid-template-columns: 1fr;
        text-align: center;
    }   
    .booking_box > div{
        padding:40px;
        background: #f0e9e2;
    }
    .booking_title {
        font-size: 1.5rem;
        margin-bottom: 20px;
    }
    
    .booking_box a{
        margin-bottom: 20px;
        display: block;
    }
    
    .hpb span:first-child {
        display: block;
        background: #ae2d5b;
        padding: 20px 50px;
        border-radius: 20px;
        margin: auto;
        margin-bottom: 10px;
    }
    .hpb span:nth-child(2) {
        font-size: 1rem;
    }
    
    .tel_booking{
        font-size: 1.8rem;
    }
    
    
}