@charset "utf-8";
/* CSS Document */
.clearfix::after{
	clear:both;
	content:".";
	visibility:hidden;
	display:block;
	height:0;
}
/*メインビジュアル*/
#main_img {
	width: 100vw;
	background-image: url(../img/top.jpg);
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	line-height: 1.3;
}
#main_img p span.logo{
	font-size:200px;
}
#main_img p span.logo_top{
	line-height: 2.8;
}
/*main_img内テキストのアニメーションのcss*/
#main_img .anime-container{
    opacity: 0;
    transition: transform 1.5s .2s ease,opacity 1.5s .2s;
	transform: translate(0,0px);
}
/*アニメーションするプロパティの設定*/
#main_img .anime-container.active{
    opacity: 1;
	transform: translate(0,-30px);
}
#main_img .font_35{
	font-size: 40px;
}
.scroll{
	bottom:35px;
}
.scroll img{
	width:53px;
}
/* IE対処 */
@media screen\0 {
  .selector {
    property: value;
  }
.scroll{
	bottom:35px;
	left: 50%;
	transform: translate(0,-50%);
}
}
#main_img .scroll-container{
    opacity: 0;
    transition: transform 1.5s .8s ease,opacity 1.5s .8s;
	transform: translate(0,-50%);
}
#main_img .scroll-container.active{
    opacity: 1;
	transform: translate(0,0%);
}
 /* scroll アニメーション*/
.scroll:hover{
		/* アニメーションの設定 */
	-webkit-animation-name: badge_rotationY_2;
	animation-name: badge_rotationY_2;
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-timing-function: ease-in;
	animation-timing-function: ease-in;
	-webkit-animation-iteration-count: 1;
	animation-iteration-count: 1;
}
@keyframes badge_rotationY_2 {
  0% {
		-webkit-transform: translateY(0);
    transform: translateY(0);
  }
  10% {
		-webkit-transform: translateY(-8px);
  	transform: translateY(-8px);
  }
	30% {
		-webkit-transform: translateY(0);
    transform: translateY(0);
  }
	50% {
		-webkit-transform: translateY(-8px);
  	transform: translateY(-8px);
  }
	80% {
		-webkit-transform: translateY(0px);
  	transform: translateY(0px);
  }
  100% {
		-webkit-transform: translateY(0px);
  	transform: translateY(0px);
  }
}
/*top_txt内テキストとaboutのアニメーションのcss*/
#top_txt.anime-container,#about.anime-container{
    opacity: 0;
    transition: transform .9s .1s ease,opacity .9s .1s;
	transform: translate(0,30px);
}
/*アニメーションするプロパティの設定*/
#top_txt.anime-container.active,#about.anime-container.active{
    opacity: 1;
	transform: translate(0,-0px);
}
/*Salon*/
#Salon{
	margin-bottom: 140px;
	position: relative;
}
#Salon::after{
	display: inline-block;
    content: "";
    width: 100%;
    height: 40vh;
    background: #eaeaea;
    position: absolute;
    top: -20px;
	left:0;
	z-index: -1;
}
#Salon h2::before {
    display: inline-block;
    content: "";
    width: 40px;
    height: 1px;
    background: #b08d4f;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
#Salon .hover-mask {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.5);
	opacity: 0;
}
#Salon .hover-mask {
	transition: all 0.8s ease;
	padding-bottom: 0;
}
#Salon .hover_txt {
	transition: all 0.8s ease;
	transition-delay: 0.2s;
	opacity: 0;
	transform : translate(-50%, -15%);
}
#Salon .hover-mask:hover{
	opacity: 1;
	padding-bottom: 30px;
}
#Salon .hover-mask:hover .hover_txt{
	opacity: 1;
	transform : translate(-50%, -30%);
}
#Salon .tel a{
	padding-bottom:10px;
}
/* IE対処 */
@media screen\0 {
  .selector {
    property: value;
  }
#Salon .tel a{
	padding-bottom:5px!important;
}
}
/*about*/
#about{
	margin-bottom:500px!important;
}
#about .about_us{
	margin-bottom:80px;
}
#about h2{
	position: relative;
	padding-left:50px;
}
#about .about_us h2::before{
	content: "";
	display:inline-block;
	width:30px;
	height:1px;
	background-color: #b08d4f;
	position: absolute;
	left:0;
	top:50%;
}
#about .elle{
	margin-top: 130px;
}
#about .elle h2::before{
	content: "";
	display:inline-block;
	width:30px;
	height:1px;
	background-color: #b08d4f;
	position: absolute;
	right:285px;
	top:50%;
}
#about .hover-mask {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,0.2);
	opacity: 0;
}
#about .hover-mask {
	transition: all 0.8s ease;
	padding-bottom: 0;
}
#about .hover_txt {
	transition: all 0.8s ease;
	transition-delay: 0.2s;
	opacity: 0;
	transform : translate(-50%, -20%);
}
#about .hover-mask:hover{
	opacity: 1;
	padding-bottom: 30px;
}
#about .hover-mask:hover .hover_txt{
	opacity: 1;
	transform : translate(-50%, -50%);
}
#about .about_us .txt{
	left:0;
	top:-20px;
	z-index: 2;
}
#about .about_us .box{
	background-color:rgba(255,255,255,0.7);
	box-shadow: -3px 3px 3px rgba(7,7,7,0.1);
}
#about .elle .txt{
	right:0;
	top:-20px;
	z-index: 2;
}
#about .elle .box{
	background-color:rgba(255,255,255,0.7);
	box-shadow: 3px 3px 3px rgba(7,7,7,0.1);
}
/*gallery*/
#gallery{
	margin-bottom: 140px;
}
#gallery h2::before {
    display: inline-block;
    content: "";
    width: 40px;
    height: 1px;
    background: #b08d4f;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
/*画像ホバー時のエフェクト*/
#gallery .box  {
	overflow:		hidden;
	position:		relative;	/* 相対位置指定 */
}
#gallery .box .caption {
	text-align: 		center;
	color:			#fff;
	transition: all 0.8s ease;
	transition-delay: 0.1s;
	opacity: 0;
	border: 1px solid rgba(255,255,255,0.7);
	width: 95%;
	height: 95%;
}
#gallery .box .mask {
	width:			100%;
	height:			100%;
	position:		absolute;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.8s ease;
	transition:		all 0.8s ease;
	-webkit-outline:solid 1px rgba(255,255,255,0);
	-webkit-outline-offset: -0.5em;
}
#gallery .box:hover .mask {
	opacity:		1;	/* マスクを表示する */
}
#gallery .box:hover .caption{
	opacity: 1;
}
/*recruit*/
#recruit{
	background-image: url(../img/recruit_bg.jpg);
	background-size: cover;
}
#recruit h2{
	line-height: 0.9;
	top: 80px;
}
#recruit .box .txt_box{
	background-color:rgba(255,255,255,0.9);
	box-shadow: 3px 3px 3px rgba(7,7,7,0.1);
	padding:5% 5% 4% 5%;
	padding-left:320px;
}
#recruit p.more{
	margin-left:auto;
	transition: all .3s;
}
#recruit p.more::after{
    display: inline-block;
    content: "";
    width: 80px;
    height: 1px;
    background: #4e4e4e;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: auto;
	-webkit-transition: all .3s;
	transition: all .3s;
}
#recruit p.more::before{
    display: inline-block;
    content: "";
    width: 8px;
    height: 1px;
    background: #4e4e4e;
    position: absolute;
    bottom: 3px;
    right: 20px;
    margin: auto;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: all .3s;
}
#recruit p.more:hover::after{
    padding-right: 10px;
	width: 100px;
}
#recruit p.more:hover::before{
    right: -10px;
}
/*blog*/
#blog{
	margin-bottom: 80px;
}
#blog h2::before {
    display: inline-block;
    content: "";
    width: 40px;
    height: 1px;
    background: #b08d4f;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
#blog .cate_box:last-of-type{
	border-bottom: 1px solid #eaeaea;
}
/*menu*/
#menu .hover_txt span.sab::before{
	display: inline-block;
    content: "";
    width: 25px;
    height: 1px;
    background: #fff;
    position: absolute;
	top:0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
#menu .hover-parent:hover img{
	transition: all 0.8s ease;
}
#menu .hover-mask {
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 1;
}
#menu .hover-mask {
	transition: all 0.8s ease;
	padding-bottom: 0;
	/*outline:solid 1px rgba(255,255,255,0);
	outline-offset: -0.5em;*/
	border: 1px solid rgba(255,255,255,0);
	width: 95%;
	height: 95%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
#menu .hover_txt {
	transition: all 0.8s ease;
	transition-delay: 0.2s;
	opacity: 1;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
}
#menu .hover-mask:hover{
	opacity: 1;
	background: rgba(0,0,0,0.1);
	border: 1px solid rgba(255,255,255,0.7);
}
#menu .hover-parent:hover img{
	-moz-filter: blur(1px);
	-webkit-filter: blur(1px);
	-o-filter: blur(1px);
	-ms-filter: blur(1px);
	filter: blur(1px);
}
/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
/*メインビジュアル*/
#main_img{
	background-image: url(../img/top_sp.jpg);
	background-position:right bottom!important;
}
#main_img p span.logo{
	font-size:130px;
}
#logo img {
    width: 100%;
}
#main_img .font_35{
	font-size: 30px;
}
.scroll{
	bottom:20px;
}
/*Salon*/
#Salon::after {
    height: 25vh;
}
#Salon .hover-mask {
	background: rgba(0,0,0,0.3);
	opacity: 1;
}
#Salon .hover_txt {
	opacity: 1;
	transform : translate(-50%, -65%);
}
#Salon .hover_txt::after {
	opacity: 1;
	transform : translate(-50%, -15%);
	position: relative;
}
#Salon .hover_txt::after {
	content: '';
    display: inline-block;
    width: 23px;
    height: 23px;
    background-image: url(../img/sp_more.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
	position: absolute;
	bottom:-60px;
	left: 40%;
	transform: translate(0,-46%);
	z-index: 2;
}
	
/*about*/
#about{
	margin-bottom:50px!important;
}
#about .about_us{
	margin-bottom:100px;
}
#about .hover_txt {
	position: relative;
	transform : translate(-50%, -70%);
}
#about .hover_txt::after {
	content: '';
    display: inline-block;
    width: 23px;
    height: 23px;
    background-image: url(../img/sp_more.png);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
	position: absolute;
	bottom:-45px;
	left: 45%;
	transform: translate(0,-45%);
	z-index: 2;
}
#about h2{
	position: relative;
	padding-left:50px;
}
#about .about_us h2::before{
	content: "";
	display:inline-block;
	width:30px;
	height:1px;
	background-color: #b08d4f;
	position: absolute;
	left:0;
	top:50%;
}
#about .elle{
	margin-top: 100px;
}
#about .elle h2::before{
	content: "";
	display:inline-block;
	width:30px;
	height:1px;
	background-color: #b08d4f;
	position: absolute;
	right:225px;
	top:50%;
}
#about .elle h2::before{
	left:0;
}
#about .elle .box {
    background-color: rgba(255,255,255,0.7);
    box-shadow: -3px 3px 3px rgba(7,7,7,0.0);
	margin-bottom: 30px;
}
#about .hover-mask {
	background: rgba(0,0,0,0.2);
	opacity: 1;
}
#about .hover_txt {
	opacity: 1;
	transform : translate(-50%, -70%);
}
/*gallery*/
#gallery {
    margin-bottom: 100px;
}
/*recruit*/
#recruit h2{
	line-height: 0.9;
	top: 0px;
}
#recruit .box .txt_box{
	padding-left:0px;
	padding:80px 5% 4% 5%;
}
}
/* ---------- スマートフォン ---------- */
@media screen and (max-width: 667px){
/*メインビジュアル*/
#main_img {
	background-image: url(../img/top_sp.jpg);
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	line-height: 1.3;
	background-position:center!important;
}
#main_img p span.logo{
	font-size:80px;
}
#main_img .anime-container.active{
	transform: translate(0,-20px);
}
#logo img {
    width: 100%;
}
#main_img .font_35{
	font-size: 18px;
}
.scroll{
	bottom:20px;
}
.scroll img{
	width:48px;
}
/*Salon*/
#Salon{
	margin-bottom: 80px;
}
#Salon::after {
    height: 40vh;
}
#Salon h2::before {
    display: inline-block;
    content: "";
    width: 40px;
    height: 1px;
    background: #b08d4f;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
/*about*/
#about .about_us .box {
    background-color: rgba(255,255,255,0);
    box-shadow: -3px 3px 3px rgba(7,7,7,0);
}
#about .elle .box {
    background-color: rgba(255,255,255,0);
    box-shadow: 3px 3px 3px rgba(7,7,7,0);
	margin-bottom: 0;
}
#about .elle h2::before{
	left:0;
}
#about .about_us {
    margin-bottom: 50px;
}
#about .elle {
	margin-top: 50px;
    margin-bottom: 50px;
}
/*gallery*/
#gallery {
    margin-bottom: 70px;
}
/*recruit*/
#recruit .box .txt_box {
    padding-left: 0px;
    padding: 50px 5% 8% 5%;
}
/*blog*/
#blog {
    margin-bottom: 70px;
}
}