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

@media (min-width:1051px) {	
	/*共通*/
	.eng_ttl_style{font-size: clamp(40px, 2.8vw, 50px);color: #5b5250;font-weight: 500;letter-spacing: 2px;font-family: futura-pt, sans-serif;font-weight:300;font-style: normal;}
	
	
	/*メインイメージ*/
	#main_image{position: relative;width: 100%; height: 100vh; margin:0 auto;padding: 0;}	
	
	#main_image .bg{position: absolute;top:0%;left:0%; width:100%;height:150%;margin:0;padding: 0;background:url("../img/slide_bg.png") no-repeat;background-position: 50% 50%;background-size:100% 100%;}
	
	#main_image #slide_group{position: absolute;top:0%;right:0%;width:90%;height: 90%;margin:0;padding: 0;display: block;}	
	#main_image #slide_group .inner{position: relative; display: block;   width: 100%;    height: 100%;  }
	#main_image #slide_group .inner .image_slider {position:absolute;top: 0;left: 0;	width:100%;height: 100%;margin: 0;}	
	#main_image #slide_group .inner .image_slider div{width:100%;height:100%;margin: 0 auto;padding: 0;overflow: hidden}		
	#main_image #slide_group .inner .image_slider div img{width:100%;height:100%;margin: 0 ;padding: 0;object-fit: cover;}
	
	/* メインイメージ アクティブ直後だけ付くクラス */
	.image_slider .slick-slide img {  transform: scale(1.15);  transition: transform 2.8s cubic-bezier(0.33, 1, 0.68, 1);}
	.image_slider .slick-slide.zoom-effect img {  transform: scale(1);}
	.image_slider {  visibility: hidden;}
	.image_slider.slick-initialized {  visibility: visible;}
		
	#main_image #catchcopy{position: absolute;bottom:20%;right:5%;width:40%;max-width: 700px;min-width: 600px;margin:0;padding: 0;color: #7a7373;}
	#main_image #catchcopy .jpn{font-size: clamp(26px, 3.0vw, 40px);font-weight:normal}
	#main_image #catchcopy .eng{font-size: clamp(16px, 1.5vw, 28px);letter-spacing: 2px;}
	
	
	/*コンセプト*/
	#concept{margin: 0 auto 100px auto}
	#concept .container{width: 95%;max-width: 1800px;min-width: 1000px;aspect-ratio:2/1;margin: 0 auto;display: flex;justify-content: space-between;}
	
	#concept .container .photo_area{position:relative;width:50%;height:100%;}	
	#concept .container .photo_area figure{margin:0;padding: 0;height: 100%}
	#concept .container .photo_area figure img{width: 100%;height: 100%;object-fit: cover;}		
	#concept .container .photo_area .point{position:absolute;top:94%;left:40%;width:50%;max-width:600px;min-width:400px;}
	#concept .container .photo_area .point img{width: 100%;}
	
	#concept .container .text_area{width: 30%;min-width: 400px;transform: translateY(250px);margin-right:5%}
	#concept .container .text_area .inner h2{margin: 0 0 50px 0;padding: 0;}
	#concept .container .text_area .inner h3{margin: 0 auto 20px auto;padding: 0;font-size: clamp(20px, 2.0vw, 26px);color: #5b5250;font-weight: 500;}
	#concept .container .text_area .inner p{margin: 0 auto 20px auto;padding: 0;font-size: clamp(13px, 0.9vw, 18px);color: #5b5250;line-height: 2;font-weight: 200}

	/*サロン*/
	#salon{ margin: 0 auto 100px auto}
	#salon .container{width: 95%;max-width: 1800px;min-width: 1000px;aspect-ratio:2/1;margin: 0 auto;display: flex;justify-content: space-between;}
	#salon .container .photo_area{order: 2;position:relative;width: 60%;height: 80%;transform: translateY(100px);}
	#salon .container .photo_area figure{margin:0;padding: 0;height: 100%}
	#salon .container .photo_area figure img{width: 100%;height: 100%;object-fit: cover;}
	#salon .container .photo_area .point{position:absolute;top:85%;right:60%;width: 60%;max-width:700px;min-width: 500px;}
	#salon .container .photo_area .point img{width: 100%;}
	
	#salon .container .text_area{order: 1;width: 25%;min-width: 400px;margin-right: 3%}
	#salon .container .text_area .inner h2{margin: 0 0 0px 0;padding: 0;}
	#salon .container .text_area .inner h3{margin: 0 auto 50px auto;padding: 0;font-size: clamp(18px, 1.8vw, 22px);color: #5b5250;font-weight: 500;}
	#salon .container .text_area .inner p{margin: 0 auto 50px auto;padding: 0;font-size: clamp(13px, 0.9vw, 18px);color: #5b5250;line-height: 2;font-weight: 200}
	#salon .container .text_area .inner .banner{width:80%;margin: 0 auto 0 0}
	#salon .container .text_area .inner .banner a{position:relative;display: block;padding: 30px 0;text-decoration: none;font-size: clamp(18px, 1.6vw, 22px);letter-spacing: 2px;color: white;text-align: center;font-weight: 500;
		background: linear-gradient(90deg, #95cfff 0%,#ffbfb2 50%, #c785dc 100%);background-size:200% 200%;animation:salon_banner_bg 5s infinite alternate;overflow: hidden; transition: color 0.8s ease;}
	@keyframes salon_banner_bg { 		0%{background-position:0% 50%}    50%{background-position:100% 50%}    100%{background-position:0% 50%}	}
	
	#salon .container .text_area .inner .banner a::before{content:"";position:absolute;top:100%;left:0%;width:100%;  height:110%;background:linear-gradient(90deg, #e4bcff, #ffe9b6);transition: width 1.0s ease, top 0.6s ease;z-index: 0}
	#salon .container .text_area .inner .banner a:hover::before {  height: 100%;  top:0%;}
	
	#salon .container .text_area .inner .banner a span{ position:relative;}
	
	
	
	/*おすすめメニュー*/
	#recommend_menu{margin:0 auto 100px auto;}
	#recommend_menu .container{position: relative;width: 100%;aspect-ratio:2.0/1;min-height: 600px;margin: 0 auto;}
	
	#recommend_menu .shape{position: absolute;top: 0;right: 0;width: 80%;height: 100%;overflow: hidden;}
	#recommend_menu .shape span{display: block;width: 100%;height: 100%;background:#fffbf8;transition:all .6s ease 0.8s; transform:translateX(100%);}
	#recommend_menu .shape span.active{transform: translateX(0%);}
	
	#recommend_menu .primary_group{position: absolute;top: 50%;left:50%;transform: translate(-50%,-50%);width: 100%;}
	#recommend_menu .primary_group .title_area{text-align: center;}
	#recommend_menu .primary_group .title_area h2{margin: 0 auto 0px auto;padding: 0;}
	#recommend_menu .primary_group .title_area h3{margin: 0 auto 50px auto;padding: 0;font-size: clamp(18px, 1.8vw, 22px);color: #5b5250;font-weight: 500;}
	
	#recommend_menu .primary_group .list_area{}
	#recommend_menu .primary_group .list_area .carousel_slider .slick-slide {display: flex;  align-items: stretch;  /* height: auto;*/ aspect-ratio:2.8/1;overflow: hidden;transition: transform 0.5s ease, opacity 0.5s ease; transform: scale(0.8); box-shadow: 0px 0px 25px 0px rgba(230, 230, 230, 1);}
	#recommend_menu .primary_group .list_area .carousel_slider .slick-center {  transform: scale(0.95); /* 中央だけ拡大 */  opacity: 1; /* 中央だけはっきり表示 */}
	#recommend_menu .primary_group .list_area .carousel_slider .slick-slide.slick-current,
	#recommend_menu .primary_group .list_area .carousel_slider .slick-slide.is-active-next {		transform: scale(1);	}	
	
	#recommend_menu .primary_group .list_area .unit{position: relative;background: white;flex: 1;      display: flex !important;  flex-direction: column; justify-content: center;width: 100%; height: 100%;   box-sizing: border-box;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35);}
	#recommend_menu .primary_group .list_area .unit::before{content: '';  position: absolute;top: 0;left: 0;  width: 14%; height: 100%;background: url("../img/recommend_menu_icon.png") no-repeat;background-size: 100% auto;background-position: 0 0;}
	
	#recommend_menu .primary_group .list_area .unit .inner{position: relative;width: 92%;height:78%;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;}
	
	#recommend_menu .primary_group .list_area .unit .inner .photo_area{width: 40%;height: 100%}
	#recommend_menu .primary_group .list_area .unit .inner .photo_area img{width: 100%;height: 100%;object-fit:contain;}
	
	#recommend_menu .primary_group .list_area .unit .inner .text_area{width:55%;}
	#recommend_menu .primary_group .list_area .unit .inner .text_area .sub_title{margin: 0 auto 10px auto;padding: 0;font-size: clamp(14px, 0.8vw, 16px);color: #b3b3b3;font-weight: 500;letter-spacing: 0px;}
	#recommend_menu .primary_group .list_area .unit .inner .text_area h4{margin: 0 auto 30px auto;padding: 0;font-size: clamp(15px, 1.2vw, 22px);color:#bfa1a8;font-weight:300;letter-spacing: 1px;}
	#recommend_menu .primary_group .list_area .unit .inner .text_area h4 span{display:block;}
	#recommend_menu .primary_group .list_area .unit .inner .text_area p{margin: 0 auto 0px auto;padding: 0;font-size: clamp(13px, 0.7vw, 16px);font-weight: 200;letter-spacing: 1px;line-height: 1.5}
	
	#recommend_menu .point{position:absolute;top:75%;left:68%;width: 20%;max-width:600px;min-width: 300px;z-index:1}
	#recommend_menu .point img{width: 100%;}
	
	/*リクルート*/
	#recruit{}
	
	#recruit .container{position: relative;width: 100%;aspect-ratio:3/1;min-height: 600px;max-height: 800px;margin: 0 auto;}
	
	
	#recruit .bg_photo{position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden}
	#recruit .bg_photo img{width: 100%;height: 100%;object-fit: cover;object-position: center 70%}
	
	#recruit .bg_color{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
	#recruit .bg_color span{display:block;width:100%;height:100%;background: linear-gradient(90deg, rgba(225,170,255,0.7) 0%, rgba(255,192,131,0.7)50%,rgba(225,170,255,0.7) 100%);background-size: 200% 200%;animation:recruit_bg 8s infinite alternate;overflow: hidden; transition: color 2.3s ease;}	
	@keyframes recruit_bg { 0%{background-position:0% 50%}    50%{background-position:100% 50%}    100%{background-position:0% 50%}	}
	
	
	#recruit .primary_group{position: absolute;top: 50%;left:50%;transform: translate(-50%,-50%);width: 100%;text-align: center;}
	
	#recruit .primary_group h2{margin: 0 auto 10px auto;padding: 0;color: white}
	#recruit .primary_group h3{margin: 0 auto 50px auto;padding: 0;font-size: clamp(18px, 1.8vw, 22px);color: white;font-weight: 500;letter-spacing: 2px;}
	#recruit .primary_group p{margin: 0 auto 50px auto;padding: 0;font-size: clamp(13px, 0.9vw, 18px);color:white;line-height: 2;font-weight: 400;letter-spacing: 2px;}
	#recruit .primary_group .banner{width:30%;min-width: 300px;margin: 0 auto}
	#recruit .primary_group .banner a{position: relative;display: block;text-decoration: none;font-size: clamp(16px, 1.2vw, 22px);letter-spacing: 0px;color:white;text-align: center;}
	
	#recruit .primary_group .banner a .text{position: relative;display: block;padding: 40px 0;background: linear-gradient(45deg, #be96ff 5%,#ffb780 95%);overflow: hidden}
	#recruit .primary_group .banner a .text::before{content:"";position:absolute;top:100%;left:0%;width:100%;  height:110%;background:linear-gradient(90deg, #95cfff, #c785dc);transition: width 1.0s ease, top 0.6s ease;z-index: 0}
	#recruit .primary_group .banner a:hover .text::before {  height: 100%;  top:0%;}
	#recruit .primary_group .banner a .text span{ position:relative;}
	
	#recruit .primary_group .banner a .point{position:absolute;top:0%;left:0%;width:100%;height: 100%;display: block;}
	#recruit .primary_group .banner a .point span{position:absolute;top:20%;left:75%;width:40%;max-width:600px;min-width:200px;}
	#recruit .primary_group .banner a .point span img{width: 100%;}
	
	/*お問い合わせ*/
	#contact_index{padding:100px 0;background: url("../img/contact_bg.png") no-repeat;background-position: 50% 100%;background-size: 100% auto;}
	#contact_index .container{position:relative;width: 1000px;margin: 0 auto;padding: 100px 0;background: white;/*background: linear-gradient(90deg, #fef7ff 5%, #fff7f3 95%);*/;box-sizing: border-box;}
	#contact_index .container::before{content: '';position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;height:100%;background: linear-gradient(90deg, #d4deff 5%,#ffdedf 50%, #e2d2ff 95%);filter: blur(1.2rem);z-index: -1}
	
	#contact_index .container .point{position:absolute;bottom:85%;left:10%;width:30%;max-width:500px;min-width:200px;}
	#contact_index .container .point span img{width: 100%;}
	
	#contact_index .container .inner{width: 80%;margin: 0 auto; display: flex;justify-content: space-between;align-items: center}
	#contact_index .container .inner .text_area{width: 55%;color: #5b5250}
	#contact_index .container .inner .text_area h2{position:relative;margin: 0 auto 10px auto;padding: 0 0 0 50px;font-size: clamp(20px,1.6vw, 30px);font-weight: 100;letter-spacing: 1px;}
	#contact_index .container .inner .text_area h2::before{content: '';position:absolute;top: 50%;left: 0;transform: translateY(-50%);width: 40px;height:60px;background: url("../img/contact_icon.png") no-repeat;background-position:50% 50%;background-size: 100% auto;}
	#contact_index .container .inner .text_area p{margin: 0 auto 0px auto;padding: 0;font-size: 16px;letter-spacing: 1px;font-weight: 200}
	
	#contact_index .container .inner .banner_area{width: 45%;}	
	#contact_index .container .inner .banner_area a{position: relative;display: block;padding:30px 0;text-decoration: none;font-size: clamp(20px, 1.9vw, 26px);letter-spacing: 2px;color: #182c50;text-align:center;overflow: hidden;background: linear-gradient(45deg, #cbe8ff 5%, #fff4ff 50%,#eee7ff 95%); background-size: 200% 200%;animation:contact_index_bg 3s infinite alternate;transition: color 2.1s ease;}
	@keyframes contact_index_bg { 0%{background-position:0% 50%}    50%{background-position:100% 50%}    100%{background-position:0% 50%}	}
	
	#contact_index .container .inner .banner_area a span{position:relative;}
	
	#contact_index .container .inner .banner_area a::before{content:"";position:absolute;top:100%;left:0%;width:100%;  height:110%;background:linear-gradient(90deg, #ffbfb2, #ffe9b6);transition: width 1.0s ease, top 0.6s ease;z-index: 0;}
	#contact_index .container .inner .banner_area a:hover::before {  height: 100%;  top:0%;}
	#contact_index .container .inner .banner_area a:hover{color:white;}
	
	/*ブランド*/
	#brands{padding:100px 0;}
	#brands h2{margin: 0 auto 10px auto;padding: 0;text-align: center}
	#brands h3{margin: 0 auto 50px auto;padding: 0;font-size: clamp(18px, 1.8vw, 22px);color: #5b5250;font-weight: 500;text-align: center}
	#brands .list{width: 700px;margin: 0 auto;padding: 0;display: flex; flex-wrap:wrap; justify-content: space-between;font-size: 0}
	#brands .list .unit{width: 30%;}
	#brands .list .unit img{width: 100%}
	
}

@media screen and (min-width:701px) and ( max-width:1050px)  {
	/*共通*/
	.eng_ttl_style{font-size: clamp(30px, 4.5vw, 40px);color: #5b5250;font-weight: 500;letter-spacing: 2px;font-family: futura-pt, sans-serif;font-weight:300;font-style: normal;}
	
	
	/*メインイメージ*/
	#main_image{position: relative;width: 100%; height:100vh; margin:0 auto;padding: 0;}	
	
	#main_image .bg{position: absolute;top:0%;left:0%; width:100%;height:150%;margin:0;padding: 0;background:url("../img/slide_bg.png") no-repeat;background-position: 50% 50%;background-size:100% 100%;}
	
	#main_image #slide_group{position: absolute;top:10%;right:0%;width:95%;height: 75%;margin:0;padding: 0;display: block;}	
	#main_image #slide_group .inner{position: relative; display: block;   width: 100%;    height: 100%;  }
	#main_image #slide_group .inner .image_slider {position:absolute;top: 0;left: 0;	width:100%;height: 100%;margin: 0;}	
	#main_image #slide_group .inner .image_slider div{width:100%;height:100%;margin: 0 auto;padding: 0;overflow: hidden}		
	#main_image #slide_group .inner .image_slider div img{width:100%;height:100%;margin: 0 ;padding: 0;object-fit: cover;}
	
	/* メインイメージ アクティブ直後だけ付くクラス */
	.image_slider .slick-slide img {  transform: scale(1.15);  transition: transform 2.8s cubic-bezier(0.33, 1, 0.68, 1);}
	.image_slider .slick-slide.zoom-effect img {  transform: scale(1);}
	.image_slider {  visibility: hidden;}
	.image_slider.slick-initialized {  visibility: visible;}
		
	#main_image #catchcopy{position: absolute;bottom:12%;right:10%;width:55%;margin:0;padding: 0;color: #7a7373;}
	#main_image #catchcopy .jpn{font-size: clamp(20px, 3.5vw, 40px);font-weight:normal}
	#main_image #catchcopy .eng{font-size: clamp(16px, 1.8vw, 28px);letter-spacing: 2px;}
	
	
	/*コンセプト*/
	#concept{margin: 0 auto 100px auto}
	#concept .container{width: 100%;margin: 0 auto;}
	#concept .container .photo_area{position:relative;width: 90%;aspect-ratio:1.2/1;margin: 0 auto 50px 0}
	#concept .container .photo_area figure{margin:0;padding: 0;height: 100%}
	#concept .container .photo_area figure img{width: 100%;height: 100%;object-fit: cover;}
	#concept .container .photo_area .point{position:absolute;top:95%;right:-5%;width: 50%;}
	#concept .container .photo_area .point img{width: 100%;}
	
	#concept .container .text_area{position:relative;width: 80%;margin: 0 auto;}
	#concept .container .text_area .inner h2{margin: 0 0 40px 0;padding: 0;}
	#concept .container .text_area .inner h3{margin: 0 auto 20px auto;padding: 0;font-size: clamp(20px, 2.0vw, 26px);color: #5b5250;font-weight: 500;}
	#concept .container .text_area .inner p{margin: 0 auto 10px auto;padding: 0;font-size: clamp(13px, 0.9vw, 18px);color: #5b5250;line-height: 2;font-weight: 200}

	/*サロン*/
	#salon{ margin: 0 auto 100px auto}
	#salon .container{width: 100%;margin: 0 auto;margin: 0 auto;}
	#salon .container .photo_area{position:relative;width: 90%;aspect-ratio:1.2/1;margin: 0  0 50px auto}
	#salon .container .photo_area figure{margin:0;padding: 0;height: 100%}
	#salon .container .photo_area figure img{width: 100%;height: 100%;object-fit: cover;}
	#salon .container .photo_area .point{position:absolute;top:95%;right:5%;width: 60%;}
	#salon .container .photo_area .point img{width: 100%;}
	
	#salon .container .text_area{position:relative;width: 80%;margin: 0 auto;}
	#salon .container .text_area .inner h2{margin: 0 0 10px 0;padding: 0;}
	#salon .container .text_area .inner h3{margin: 0 auto 20px auto;padding: 0;font-size: clamp(18px, 1.8vw, 22px);color: #5b5250;font-weight: 500;}
	#salon .container .text_area .inner p{margin: 0 auto 20px auto;padding: 0;font-size: clamp(13px, 0.9vw, 18px);color: #5b5250;line-height: 2;font-weight: 200}
	#salon .container .text_area .inner .banner{width:100%;margin: 0 auto}
	
	
	#salon .container .text_area .inner .banner a{display: block;padding: 30px 0;text-decoration: none;font-size: clamp(16px, 2.3vw, 24px);letter-spacing: 2px;color: white;text-align: center;font-weight: 500;background: linear-gradient(45deg, #d4deff 5%,#ffdedf 50%, #e2d2ff 95%);background-size:200% 200%;animation:salon_banner_bg 5s infinite alternate;overflow: hidden; transition: color 0.8s ease;}
	
	#salon .container .text_area .inner .banner a{position:relative;display: block;padding: 30px 0;text-decoration: none;font-size: clamp(18px, 1.6vw, 22px);letter-spacing: 2px;color: white;text-align: center;font-weight: 500;
		background: linear-gradient(90deg, #95cfff 0%,#ffbfb2 50%, #c785dc 100%);background-size:200% 200%;animation:salon_banner_bg 5s infinite alternate;overflow: hidden; transition: color 0.8s ease;}
	@keyframes salon_banner_bg { 		0%{background-position:0% 50%}    50%{background-position:100% 50%}    100%{background-position:0% 50%}	}
	
	#salon .container .text_area .inner .banner a::before{content:"";position:absolute;top:100%;left:0%;width:100%;  height:110%;background:linear-gradient(90deg, #e4bcff, #ffe9b6);transition: width 1.0s ease, top 0.6s ease;z-index: 0}
	#salon .container .text_area .inner .banner a:hover::before {  height: 100%;  top:0%;}	
	#salon .container .text_area .inner .banner a span{ position:relative;}
	
	
	/*おすすめメニュー*/
	#recommend_menu{margin:0 auto 100px auto;}
	#recommend_menu .container{position: relative;width: 100%;margin: 0 auto;padding: 100px 0}
	
	#recommend_menu .shape{position: absolute;top: 0;right: 0;width: 80%;height: 100%;}
	#recommend_menu .shape span{display: block;width: 100%;height: 100%;background:#fffbf8;}
	
	#recommend_menu .primary_group{position: relative;width: 100%;}
	#recommend_menu .primary_group .title_area{text-align: center;margin: 0 auto 30px auto;}
	#recommend_menu .primary_group .title_area h2{margin: 0 auto 0px auto;padding: 0;}
	#recommend_menu .primary_group .title_area h3{margin: 0 auto 0px auto;padding: 0;font-size: clamp(18px, 1.8vw, 22px);color: #5b5250;font-weight: 500;}
	
	#recommend_menu .primary_group .list_area{}
	#recommend_menu .primary_group .list_area .carousel_slider .slick-slide{display:flex;align-items:stretch;overflow:hidden;transition:transform 0.5s ease, opacity 0.5s ease; transform: scale(0.8); box-shadow: 0px 0px 25px 0px rgba(230, 230, 230, 1);}
	#recommend_menu .primary_group .list_area .carousel_slider .slick-center {transform: scale(0.95);   opacity: 1; }
	#recommend_menu .primary_group .list_area .carousel_slider .slick-slide.slick-current,
	#recommend_menu .primary_group .list_area .carousel_slider .slick-slide.is-active-next {		transform: scale(1);	}	
	
	#recommend_menu .primary_group .list_area .unit{position: relative;background: white;flex: 1;      display: flex !important;  flex-direction: column; justify-content: center; height: 100%;   box-sizing: border-box;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35);}
	#recommend_menu .primary_group .list_area .unit::before{content: '';  position: absolute;top: 0;left: 0;  width: 18%; height: 100%;background: url("../img/recommend_menu_icon.png") no-repeat;background-size: 100% auto;background-position: 0 0;}
	
	#recommend_menu .primary_group .list_area .unit .inner{;position: relative;width: 85%;margin: 0 auto;padding: 50px 0;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
	
	#recommend_menu .primary_group .list_area .unit .inner .photo_area{width: 100%;aspect-ratio:1.5/1;margin: 0 auto 20px auto}
	#recommend_menu .primary_group .list_area .unit .inner .photo_area img{width: 100%;height: 100%;object-fit: cover;}
	
	#recommend_menu .primary_group .list_area .unit .inner .text_area{width:100%;}
	#recommend_menu .primary_group .list_area .unit .inner .text_area .sub_title{margin: 0 auto 10px auto;padding: 0;font-size: clamp(14px, 0.8vw, 16px);color: #b3b3b3;font-weight: 500;letter-spacing: 0px;}
	#recommend_menu .primary_group .list_area .unit .inner .text_area h4{margin: 0 auto 10px auto;padding: 0;font-size: clamp(18px, 1.0vw, 22px);color:#bfa1a8;font-weight:300;letter-spacing: 1px;}
	#recommend_menu .primary_group .list_area .unit .inner .text_area p{margin: 0 auto 0px auto;padding: 0;font-size: clamp(14px, 0.9vw, 16px);font-weight: 200;letter-spacing: 1px;line-height: 1.5}
	
	#recommend_menu .point{position:absolute;top:80%;right:5%;width:35%;z-index:1}
	#recommend_menu .point img{width: 100%;}
	
	/*リクルート*/
	#recruit{}
	#recruit .container{position: relative;width: 100%;margin: 0 auto;}
	#recruit .bg_photo{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
	#recruit .bg_photo img{width: 100%;height: 100%;object-fit: cover;object-position: center 100%}
	
	#recruit .bg_color{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
	#recruit .bg_color span{display:block;width:100%;height:100%;background: linear-gradient(90deg, rgba(225,170,255,0.7) 0%, rgba(255,192,131,0.7)50%,rgba(225,170,255,0.7) 100%);background-size: 200% 200%;animation:recruit_bg 8s infinite alternate;overflow: hidden; transition: color 2.3s ease;}	
	@keyframes recruit_bg { 0%{background-position:0% 50%}    50%{background-position:100% 50%}    100%{background-position:0% 50%}	}
	
	#recruit .primary_group{position: relative;width: 100%;text-align: center;padding: 150px 0;}
	
	#recruit .primary_group h2{margin: 0 auto 10px auto;padding: 0;color: white}
	#recruit .primary_group h3{margin: 0 auto 20px auto;padding: 0;font-size: clamp(18px, 1.8vw, 22px);color: white;font-weight: 500;letter-spacing: 2px;}
	#recruit .primary_group p{width: 90%;margin: 0 auto 50px auto;padding: 0;font-size: clamp(16px, 0.9vw, 20px);color:white;line-height: 1.5;font-weight: 300;letter-spacing: 1px}	
	#recruit .primary_group .banner{width:50%;margin: 0 auto}	
	#recruit .primary_group .banner a{position: relative;display: block;text-decoration: none;font-size: clamp(18px, 1.2vw, 22px);letter-spacing: 0px;color:white;text-align: center;}	
	#recruit .primary_group .banner a .text{position: relative;display: block;padding: 40px 0;background: linear-gradient(45deg, #be96ff 5%,#ffb780 95%);overflow: hidden}
	#recruit .primary_group .banner a .text::before{content:"";position:absolute;top:100%;left:0%;width:100%;  height:110%;background:linear-gradient(90deg, #95cfff, #c785dc);transition: width 1.0s ease, top 0.6s ease;z-index: 0}
	#recruit .primary_group .banner a:hover .text::before {  height: 100%;  top:0%;}
	#recruit .primary_group .banner a .text span{ position:relative;}	
	#recruit .primary_group .banner a .point{position:absolute;top:0%;left:0%;width:100%;height: 100%;display: block;}
	#recruit .primary_group .banner a .point span{position:absolute;top:20%;left:75%;width:40%;max-width:600px;min-width:200px;}
	#recruit .primary_group .banner a .point span img{width: 100%;}
	
	/*お問い合わせ*/
	#contact_index{padding:80px 0;background: url("../img/contact_bg.png") no-repeat;background-position: 50% 100%;background-size: 100% auto;}
	#contact_index .container{position:relative;width: 80%;margin: 0 auto;padding:40px 0;background: white;box-sizing: border-box;}	
	#contact_index .container::before{content: '';position:absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 100%;height:100%;background: linear-gradient(90deg, #d4deff 5%,#ffdedf 50%, #e2d2ff 95%);filter: blur(1.0rem);z-index: -1}
	#contact_index .container .point{position:absolute;bottom:85%;left:10%;width:35%;width:30%;max-width:500px;min-width:200px;}
	#contact_index .container .point span img{width: 100%;}
	
	#contact_index .container .inner{width:100%;margin: 0 auto}
	#contact_index .container .inner .text_area{color: #5b5250;margin: 0 auto 30px auto;text-align: center}
	#contact_index .container .inner .text_area h2{position:relative;margin: 0 auto 10px auto;padding:60px 0 0 0;font-size: clamp(22px, 2.0vw, 30px);font-weight: 500;letter-spacing: 1px;}
	#contact_index .container .inner .text_area h2::before{content: '';position:absolute;top: 0%;left:50%;transform: translateX(-50%);width: 40px;height:60px;background: url("../img/contact_icon.png") no-repeat;background-position: 50% 50%;background-size: 100% auto;}
	#contact_index .container .inner .text_area p{margin: 0 auto 0px auto;padding: 0;font-size: 13px;letter-spacing: 0px;font-weight: 200}
	
	#contact_index .container .inner .banner_area{width: 80%;margin: 0 auto}	
	#contact_index .container .inner .banner_area a{position: relative;display: block;padding:30px 0;text-decoration: none;font-size: clamp(20px, 1.9vw, 26px);letter-spacing: 2px;color: #182c50;text-align:center;overflow: hidden;background: linear-gradient(45deg, #cbe8ff 5%, #fff4ff 50%,#eee7ff 95%); background-size: 200% 200%;animation:contact_index_bg 3s infinite alternate;transition: color 2.1s ease;}
	@keyframes contact_index_bg { 0%{background-position:0% 50%}    50%{background-position:100% 50%}    100%{background-position:0% 50%}	}
	
	#contact_index .container .inner .banner_area a span{position:relative;}
	
	#contact_index .container .inner .banner_area a::before{content:"";position:absolute;top:100%;left:0%;width:100%;  height:110%;background:linear-gradient(90deg, #ffbfb2, #ffe9b6);transition: width 1.0s ease, top 0.6s ease;z-index: 0;}
	#contact_index .container .inner .banner_area a:hover::before {  height: 100%;  top:0%;}
	#contact_index .container .inner .banner_area a:hover{color:white;}	

	/*ブランド*/
	#brands{padding:100px 0;}
	#brands h2{margin: 0 auto 10px auto;padding: 0;text-align: center}
	#brands h3{margin: 0 auto 50px auto;padding: 0;font-size: clamp(18px, 1.8vw, 22px);color: #5b5250;font-weight: 500;text-align: center}
	#brands .list{width: 70%;margin: 0 auto;padding: 0;display: flex; flex-wrap:wrap; justify-content: space-between;font-size: 0}
	#brands .list .unit{width: 30%;}
	#brands .list .unit img{width: 100%}
	
}

@media (max-width: 700px) {
	/*共通*/
	.eng_ttl_style{font-size: clamp(30px, 4.5vw, 40px);color: #5b5250;font-weight: 500;letter-spacing: 2px;font-family: futura-pt, sans-serif;font-weight:300;font-style: normal;}
	
	
	/*メインイメージ*/
	#main_image{position: relative;width: 100%; height:100vh; margin:0 auto;padding: 0;}	
	
	#main_image .bg{position: absolute;top:0%;left:0%; width:100%;height:150%;margin:0;padding: 0;background:url("../img/slide_bg.png") no-repeat;background-position: 50% 50%;background-size:100% 100%;}
	
	#main_image #slide_group{position: absolute;top:12%;right:0%;width:100%;height: 65%;margin:0;padding: 0;display: block;}	
	#main_image #slide_group .inner{position: relative; display: block;   width: 100%;    height: 100%;  }
	#main_image #slide_group .inner .image_slider {position:absolute;top: 0;left: 0;	width:100%;height: 100%;margin: 0;}	
	#main_image #slide_group .inner .image_slider div{width:100%;height:100%;margin: 0 auto;padding: 0;overflow: hidden}		
	#main_image #slide_group .inner .image_slider div img{width:100%;height:100%;margin: 0 ;padding: 0;object-fit: cover;}
	
	/* メインイメージ アクティブ直後だけ付くクラス */
	.image_slider .slick-slide img {  transform: scale(1.15);  transition: transform 2.8s cubic-bezier(0.33, 1, 0.68, 1);}
	.image_slider .slick-slide.zoom-effect img {  transform: scale(1);}
	.image_slider {  visibility: hidden;}
	.image_slider.slick-initialized {  visibility: visible;}
		
	#main_image #catchcopy{position: absolute;bottom:12%;right:10%;width:80%;margin:0;padding: 0;color: #7a7373;}
	#main_image #catchcopy .jpn{font-size: clamp(20px, 3.5vw, 40px);font-weight:normal}
	#main_image #catchcopy .eng{font-size: clamp(16px, 1.8vw, 28px);letter-spacing: 1px;}
	
	
	/*コンセプト*/
	#concept{margin: 0 auto 100px auto}
	#concept .container{width: 100%;margin: 0 auto;}
	#concept .container .photo_area{position:relative;width: 90%;aspect-ratio:1.2/1;margin: 0 auto 50px 0}
	#concept .container .photo_area figure{margin:0;padding: 0;height: 100%}
	#concept .container .photo_area figure img{width: 100%;height: 100%;object-fit: cover;}
	#concept .container .photo_area .point{position:absolute;top:95%;right:-5%;width: 50%;}
	#concept .container .photo_area .point img{width: 100%;}
	
	#concept .container .text_area{position:relative;width: 80%;margin: 0 auto;}
	#concept .container .text_area .inner h2{margin: 0 0 40px 0;padding: 0;}
	#concept .container .text_area .inner h3{margin: 0 auto 20px auto;padding: 0;font-size: clamp(20px, 2.0vw, 26px);color: #5b5250;font-weight: 500;}
	#concept .container .text_area .inner p{margin: 0 auto 10px auto;padding: 0;font-size: clamp(13px, 0.9vw, 18px);color: #5b5250;line-height: 2;font-weight: 200}

	/*サロン*/
	#salon{ margin: 0 auto 100px auto}
	#salon .container{width: 100%;margin: 0 auto;margin: 0 auto;}
	#salon .container .photo_area{position:relative;width: 90%;aspect-ratio:1.2/1;margin: 0  0 50px auto}
	#salon .container .photo_area figure{margin:0;padding: 0;height: 100%}
	#salon .container .photo_area figure img{width: 100%;height: 100%;object-fit: cover;}
	#salon .container .photo_area .point{position:absolute;top:95%;right:5%;width: 60%;}
	#salon .container .photo_area .point img{width: 100%;}
	
	#salon .container .text_area{position:relative;width: 80%;margin: 0 auto;}
	#salon .container .text_area .inner h2{margin: 0 0 10px 0;padding: 0;}
	#salon .container .text_area .inner h3{margin: 0 auto 20px auto;padding: 0;font-size: clamp(18px, 1.8vw, 22px);color: #5b5250;font-weight: 500;}
	#salon .container .text_area .inner p{margin: 0 auto 20px auto;padding: 0;font-size: clamp(13px, 0.9vw, 18px);color: #5b5250;line-height: 2;font-weight: 200}
	#salon .container .text_area .inner .banner{width:100%;margin: 0 auto}
	
	
	#salon .container .text_area .inner .banner a{display: block;padding: 30px 0;text-decoration: none;font-size: clamp(16px, 2.3vw, 24px);letter-spacing: 2px;color: white;text-align: center;font-weight: 500;background: linear-gradient(45deg, #d4deff 5%,#ffdedf 50%, #e2d2ff 95%);background-size:200% 200%;animation:salon_banner_bg 5s infinite alternate;overflow: hidden; transition: color 0.8s ease;}
	
	#salon .container .text_area .inner .banner a{position:relative;display: block;padding: 30px 0;text-decoration: none;font-size: clamp(18px, 1.6vw, 22px);letter-spacing: 2px;color: white;text-align: center;font-weight: 500;
		background: linear-gradient(90deg, #95cfff 0%,#ffbfb2 50%, #c785dc 100%);background-size:200% 200%;animation:salon_banner_bg 5s infinite alternate;overflow: hidden; transition: color 0.8s ease;}
	@keyframes salon_banner_bg { 		0%{background-position:0% 50%}    50%{background-position:100% 50%}    100%{background-position:0% 50%}	}
	
	#salon .container .text_area .inner .banner a::before{content:"";position:absolute;top:100%;left:0%;width:100%;  height:110%;background:linear-gradient(90deg, #e4bcff, #ffe9b6);transition: width 1.0s ease, top 0.6s ease;z-index: 0}
	#salon .container .text_area .inner .banner a:hover::before {  height: 100%;  top:0%;}	
	#salon .container .text_area .inner .banner a span{ position:relative;}
	
	
	/*おすすめメニュー*/
	#recommend_menu{margin:0 auto 100px auto;}
	#recommend_menu .container{position: relative;width: 100%;margin: 0 auto;padding: 50px 0}
	
	#recommend_menu .shape{position: absolute;top: 0;right: 0;width:100%;height: 100%;}
	#recommend_menu .shape span{display: block;width: 100%;height: 100%;background:#fffbf8;}
	
	#recommend_menu .primary_group{position: relative;width: 100%;}
	#recommend_menu .primary_group .title_area{text-align: center;margin: 0 auto 30px auto;}
	#recommend_menu .primary_group .title_area h2{margin: 0 auto 0px auto;padding: 0;}
	#recommend_menu .primary_group .title_area h3{margin: 0 auto 0px auto;padding: 0;font-size: clamp(18px, 1.8vw, 22px);color: #5b5250;font-weight: 500;}
	
	#recommend_menu .primary_group .list_area{}
	#recommend_menu .primary_group .list_area .carousel_slider .slick-slide{display:flex;align-items:stretch;overflow:hidden;transition:transform 0.5s ease, opacity 0.5s ease; transform: scale(0.8); box-shadow: 0px 0px 25px 0px rgba(230, 230, 230, 1);}
	#recommend_menu .primary_group .list_area .carousel_slider .slick-center {transform: scale(0.95);   opacity: 1; }
	#recommend_menu .primary_group .list_area .carousel_slider .slick-slide.slick-current,
	#recommend_menu .primary_group .list_area .carousel_slider .slick-slide.is-active-next {		transform: scale(1);	}	
	
	#recommend_menu .primary_group .list_area .unit{position: relative;background: white;flex: 1;      display: flex !important;  flex-direction: column; justify-content: center; height: 100%;   box-sizing: border-box;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.35);}
	#recommend_menu .primary_group .list_area .unit::before{content: '';  position: absolute;top: 0;left: 0;  width: 18%; height: 100%;background: url("../img/recommend_menu_icon.png") no-repeat;background-size: 100% auto;background-position: 0 0;}
	
	#recommend_menu .primary_group .list_area .unit .inner{position: relative;width: 88%;margin: 0 auto;padding: 20px 0 30px 0;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;}
	
	#recommend_menu .primary_group .list_area .unit .inner .photo_area{width: 100%;aspect-ratio:1.5/1;margin: 0 auto 20px auto}
	#recommend_menu .primary_group .list_area .unit .inner .photo_area img{width: 100%;height: 100%;object-fit: cover;}
	
	#recommend_menu .primary_group .list_area .unit .inner .text_area{width:100%;}
	#recommend_menu .primary_group .list_area .unit .inner .text_area .sub_title{margin: 0 auto 0px auto;padding: 0;font-size: clamp(14px, 0.8vw, 16px);color: #b3b3b3;font-weight: 500;letter-spacing: 0px;}
	#recommend_menu .primary_group .list_area .unit .inner .text_area h4{margin: 0 auto 10px auto;padding: 0;font-size: clamp(15px, 0.9vw, 18px);color:#bfa1a8;font-weight:300;letter-spacing: 0px;line-height: 1.5}
	#recommend_menu .primary_group .list_area .unit .inner .text_area p{margin: 0 auto 0px auto;padding: 0;font-size: clamp(12px, 0.6vw, 14px);font-weight: 200;letter-spacing: 0px;line-height: 1.5}
	#recommend_menu .primary_group .list_area .unit .inner .text_area p.short{padding-bottom:50px;}
	
	#recommend_menu .point{position:absolute;top:95%;right:5%;width:55%;z-index:1}
	#recommend_menu .point img{width: 100%;}
	
	/*リクルート*/
	#recruit{}
	#recruit .container{position: relative;width: 100%;margin: 0 auto;}
	#recruit .bg_photo{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
	#recruit .bg_photo img{width: 100%;height: 100%;object-fit: cover;object-position: center 100%}
	
	#recruit .bg_color{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
	#recruit .bg_color span{display:block;width:100%;height:100%;background: linear-gradient(45deg, rgba(225,170,255,0.7) 0%, rgba(255,192,131,0.7)50%,rgba(225,170,255,0.7) 100%);background-size: 200% 200%;animation:recruit_bg 8s infinite alternate;overflow: hidden; transition: color 2.3s ease;}	
	@keyframes recruit_bg { 0%{background-position:0% 50%}    50%{background-position:100% 50%}    100%{background-position:0% 50%}	}
	
	#recruit .primary_group{position: relative;width: 100%;text-align: center;padding:80px 0;}
	
	#recruit .primary_group h2{margin: 0 auto 10px auto;padding: 0;color: white}
	#recruit .primary_group h3{margin: 0 auto 20px auto;padding: 0;font-size: clamp(18px, 1.8vw, 22px);color: white;font-weight: 500;letter-spacing: 2px;}
	#recruit .primary_group p{width: 80%;margin: 0 auto 30px auto;padding: 0;font-size: clamp(14px, 0.9vw, 16px);color:white;line-height: 1.5;font-weight: 300;letter-spacing: 1px;text-align: left;}	
	#recruit .primary_group .banner{width:70%;margin: 0 auto}	
	#recruit .primary_group .banner a{position: relative;display: block;text-decoration: none;font-size: clamp(15px, 0.9vw, 18px);letter-spacing: 0px;color:white;text-align: center;}	
	#recruit .primary_group .banner a .text{position: relative;display: block;padding: 30px 0;background: linear-gradient(45deg, #be96ff 5%,#ffb780 95%);overflow: hidden}
	#recruit .primary_group .banner a .text::before{content:"";position:absolute;top:100%;left:0%;width:100%;  height:110%;background:linear-gradient(90deg, #95cfff, #c785dc);transition: width 1.0s ease, top 0.6s ease;z-index: 0}
	#recruit .primary_group .banner a:hover .text::before {  height: 100%;  top:0%;}
	#recruit .primary_group .banner a .text span{ position:relative;}	
	#recruit .primary_group .banner a .point{position:absolute;top:0%;left:0%;width:100%;height: 100%;display: block;}
	#recruit .primary_group .banner a .point span{position:absolute;top:70%;left:60%;width:40%;}
	#recruit .primary_group .banner a .point span img{width: 100%;}
	
	/*お問い合わせ*/
	#contact_index{padding:0px 0 50px 0;background: url("../img/contact_bg.png") no-repeat;background-position: 50% 100%;background-size: 100% auto;}
	#contact_index .container{position:relative;width: 80%;margin: 0 auto;padding:40px 0 0 0;background: white;box-sizing: border-box;}	
	
	#contact_index .container .point{position:absolute;top:0%;left:10%;width:35%;}
	#contact_index .container .point span img{width: 100%;}
	
	#contact_index .container .inner{width:100%;margin: 0 auto}
	#contact_index .container .inner .text_area{color: #5b5250;margin: 0 auto 30px auto;text-align: center}
	#contact_index .container .inner .text_area h2{position:relative;margin: 0 auto 10px auto;padding:60px 0 0 0;font-size: clamp(22px, 2.0vw, 30px);font-weight: 500;letter-spacing: 1px;}
	#contact_index .container .inner .text_area h2::before{content: '';position:absolute;top: 0%;left:50%;transform: translateX(-50%);width: 40px;height:60px;background: url("../img/contact_icon.png") no-repeat;background-position: 50% 50%;background-size: 100% auto;}
	#contact_index .container .inner .text_area p{margin: 0 auto 0px auto;padding: 0;font-size: 13px;letter-spacing: 0px;font-weight: 200}
	
	#contact_index .container .inner .banner_area{width: 100%;margin: 0 auto}	
	#contact_index .container .inner .banner_area a{position: relative;display: block;padding:30px 0;text-decoration: none;font-size: clamp(20px, 1.9vw, 26px);letter-spacing: 2px;color: #182c50;text-align:center;overflow: hidden;background: linear-gradient(45deg, #cbe8ff 5%, #fff4ff 50%,#eee7ff 95%); background-size: 200% 200%;animation:contact_index_bg 3s infinite alternate;transition: color 2.1s ease;}
	@keyframes contact_index_bg { 0%{background-position:0% 50%}    50%{background-position:100% 50%}    100%{background-position:0% 50%}	}
	
	#contact_index .container .inner .banner_area a span{position:relative;}
	
	#contact_index .container .inner .banner_area a::before{content:"";position:absolute;top:100%;left:0%;width:100%;  height:110%;background:linear-gradient(90deg, #ffbfb2, #ffe9b6);transition: width 1.0s ease, top 0.6s ease;z-index: 0;}
	#contact_index .container .inner .banner_area a:hover::before {  height: 100%;  top:0%;}
	#contact_index .container .inner .banner_area a:hover{color:white;}
	
	/*ブランド*/
	#brands{padding:50px 0;}
	#brands h2{margin: 0 auto 10px auto;padding: 0;text-align: center}
	#brands h3{margin: 0 auto 20px auto;padding: 0;font-size: clamp(18px, 1.8vw, 22px);color: #5b5250;font-weight: 500;text-align: center}
	#brands .list{width: 70%;margin: 0 auto;padding: 0;display: flex; flex-wrap:wrap; justify-content: space-between;font-size: 0}
	#brands .list .unit{width: 44%;}
	#brands .list .unit img{width: 100%}
}