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


header{
	display:none;
}


#hero{
	position:relative;
	overflow:hidden;
	text-align:center;
}


/*背景ズーム*/
@keyframes animationZoom {
	50%{ transform:scale(1.1); }
}


#hero h1 img{
	width:100vw;
	height:100vh;
	object-fit:cover;
	object-position:22%;
	animation: animationZoom 10s ease-in-out 0s infinite normal;
}

#hero #inner{
	width:90%;
	max-width:840px;
	position:absolute;
	top: 53%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

#hero #inner img{
	max-width:/*515*/400px;
	width:/*80*/70%;
}


#hero #inner ul{
	margin-top:/*150*/50px;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
}

#hero #inner ul li{
	/*width:30%;
	font-size:40px;
	letter-spacing:3px;*/
	width:20%;
	font-size:/*30*/23px;
	letter-spacing:3px;
	margin:0 10px;
}

#hero #inner ul li a{
	color:#fff;
	padding:15px 0;
	display:block;
}

/*---------ボタン アニメーション--------------*/
.button {
  /* border: 1px solid #eee; */
  padding: 10px 40px;
  position: relative;
}
.change-border01::after,
.change-border01::before,
.change-border01__inner::after,
.change-border01__inner::before {
  background-color: #fff;
  content: '';
  display: block;
  position: absolute;
  z-index: 10;
  transition: all .3s ease;
  -webkit-transition: all .3s ease;
}
/* 左上へ配置 */
.change-border01::after {
    height: 1px;
    left: -1px;
    top: -1px;
    width: 0px;
}
/* 右下へ配置 */
.change-border01::before {
  bottom: -1px;
  height: 1px;
  right: -1px;
  width: 0px;
}
/* 左下へ配置 */
.change-border01__inner::after {
  bottom: -1px;
  height: 0px;
  left: -1px;
  width: 1px;
}
/* 右下へ配置 */
.change-border01__inner::before {
  height: 0px;
  right: -1px;
  top: -1px;
  width: 1px;
}

/* hover */
.change-border01:hover::after,
.change-border01:hover::before {
  width: 100%;
  width: calc(100% + 1px);
}
.change-border01:hover .change-border01__inner::after,
.change-border01:hover .change-border01__inner::before {
  height: 100%;
  height: calc(100% + 1px);
}



/*-------------
スクロール
-------------------*/
#hero p{
	position:absolute;
	bottom:17%;
	color:#fff;
	width:50%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	font-size:30px;
}

#hero p a{
	color:#fff;
}

#hero p a:after{
	content: "";
	width: 25px;
	height: 25px;
	border-top: solid 1px #fff;
	border-right: solid 1px #fff;
	-ms-transform: rotate(135deg);
	-webkit-transform: rotate(135deg) translateX(-50%);
	transform: rotate(135deg) translateX(-50%);
	position: absolute;
	left:50%;
	/* bottom:-50px; */
	margin-left:-25px;
	display:block;
    animation: moveY 2s infinite alternate linear;
    -ms-animation: moveY 2s infinite alternate linear;
    -webkit-animation: moveY 2s infinite alternate linear;
    -moz-animation: moveY 2s infinite alternate linear;
}

/*----スクロール アニメーション--------*/
@keyframes moveY {
0% {bottom:-30px;}
50% {	bottom:-40px;}
100% {bottom:-30px;}
}

@-ms-keyframes moveY {
0% {bottom:-30px;}
50% {	bottom:-40px;}
100% {bottom:-30px;}
}

@-webkit-keyframes moveY /* Safari and Chrome */
{
0% {bottom:-30px;}
50% {	bottom:-40px;}
100% {bottom:-30px;}
}

@-moz-keyframes moveY /* Firefox */
{
0% {bottom:-30px;}
50% {	bottom:-40px;}
100% {bottom:-30px;}
}



@media only screen and (max-width:768px) {
	
#hero #inner img{
	max-width:300px;
	width:60%;
}

	
	#hero #inner ul{
		margin-top:25px;
	}
	
	#hero #inner{
	top: 63%;
	-webkit-transform: translate(-50%, -60%);
	transform: translate(-50%, -60%);
}

#hero #inner ul li{
	width:45%;
	margin:-7px 10px;
}

#hero p{
	font-size:13px;
}
}


/*
コンテンツ中身
------------------------------------------------------------------------------------*/

#top_bnr iframe{
	width:100%;
}


#sp_bnr{
	display:none;
}





/*
コラムiframe
-------------------------------------------------------------------------------------------*/

#column_wrap {
  max-width: 850px;
  margin: 80px auto;
}

#column_wrap iframe{
	width:100%;
}

#column_wrap .btn{
    width: 80%;
    max-width: 420px;
    margin: 60px auto 0;
}

#column_wrap .btn a{
    display: block;
    padding: 25px 0;
    border: 1px solid #000;
}






/*--------インスタ中--------*/

#insta_post{
	margin:0;
	background:url(../img/top/bg.jpg) no-repeat;
	/**/ background-size:cover; 
	color:#fff;
	padding-top:80px;
}

#insta_post h2{
	margin-bottom:20px;
}

#insta_post ul{
	width:95%;
	max-width:1000px;
	margin:0 auto 10px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	font-size:13px;
}

#insta_post ul p{
	width:100%;
	text-align:left;
	margin-bottom:5px;
}

#insta_post ul li{
	width:23%;
	border:1px solid #fff;
	margin:0 0 10px 0;
}

#insta_post ul::before,
#insta_post ul::after {
	display: block;
	content:"";
	width:23%;
}

#insta_post ul::before{
	order:1;
}


#insta_post ul li a{
	color:#fff;
	display:block;
	padding:5px 0;
}




#insta{
	width:100%;
	margin:50px auto 0;
	text-align:center;
	height:auto;
	font-size:0;
	line-height:0;
}

#insta ol li{
	width : 16.663% ; /* 未対応ブラウザ用フォールバック */
	width : -webkit-calc(100% / 6) ;
	width : calc(100% / 6);
	display:inline-block;
}

#insta ol li img{
    width: 100%;
}

/* .instagram {
	margin: 0;
	overflow:hidden;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}

.instagram-placeholder{
  width: 16.66%;
  width : -webkit-calc(100% / 6) ;
  width : calc(100% / 6);
  height: 100%;
  max-width: 480px;
  position: relative;
  display:inline-block;
}
.instagram-placeholder::before{
  content: "";
  display: block;
  padding-top: 100%;
}
.instagram-placeholder a{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.instagram-placeholder img{
  height: 100%;
  width:100%;
  line-height: 0;
  position: absolute;
  bottom: 0;
  left:0;
  object-fit:cover;
} */




@media only screen and (max-width:1000px) { 
#insta ol li{
	width : 25% ; /* 未対応ブラウザ用フォールバック */
	width : -webkit-calc(100% / 4) ;
	width : calc(100% / 4);
}
 
/* .instagram-placeholder{
  width: 25%;
  width : -webkit-calc(100% / 4) ;
  width : calc(100% / 4);
} */
}


@media only screen and (max-width:640px) { 

    #insta_post ul li{
        width:30%;
        margin-bottom:3%;
    }

    #insta_post ul::before{
      content:"";
      display: block;
      width:30%;
      order:1;
    }




    #insta ol li{
      width: 33.3333333%;
      width : -webkit-calc(100% / 3) ;
      width : calc(100% / 3);
    }


    #column_wrap .btn a{
        padding: 20px 0;
    }



}



#special{
	background:#333;
	position:relative;
	width:100%;
	height:700px;
	text-align:center;
	color:#fff;
}

#special a{
	color:#fff;
}

#special dl{
	width:90%;
	max-width:1000px;
	position:absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}


#special dt{
	font-size:80px;
	margin-bottom:50px;
	font-weight:300;
}

#special dd{
	font-size:16px;
	line-height:2;
}

#special dd a{
	display:block;
	max-width:300px;
	border:1px solid #fff;
	margin:60px auto;
	padding:10px 0;
	position:relative;
}

@media only screen and (max-width:460px) { 
#special{
	height:580px;
}

#special dt{
	font-size:40px;
}
#special dd a{
	margin-bottom:10px;
}
}






#sdgs{
	background:#000;
	position:relative;
	width:100%;
	height:700px;
	text-align:center;
}

#sdgs dl{
	width:80%;
	position:absolute;
	top: 60%;
	left: 50%;
	-webkit-transform: translate(-50%, -60%);
	transform: translate(-50%, -60%);
}

#sdgs dd{
	width:90%;
	max-width:850px;
	margin:80px auto 0;
	color:#fff;
	line-height:1.8;
}

#sdgs dd span{
	font-size:18px;
	font-weight:bold;
}


#sdgs dd:last-child{
	width:90%;
	max-width:200px;
	margin:20px auto 0;
	border:1px solid #fff;
}

#sdgs dd a{
	color:#fff;
	display:block;
	padding:10px 0;
}

#sdgs .fa, .fas {
    font-weight: 900;
	font-size:17px;
	margin-left:3px;
}

@media only screen and (max-width:460px) { 
#sdgs{
	height:580px;
}
#sdgs dl{
	top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width:85%;
}

#sdgs dd{
	width:100%;

}
}

/*
求人
----------------------------------------------------------------------------
#recruit {
    width: 90%;
    max-width:1000px;
}

#recruit p.ttl{
    border-bottom: 2px solid #9e9e9e;
    margin: 60px auto 25px;
    font-size: 18px;
    padding-bottom: 15px;
    vertical-align: top;
	text-align:left;
}

#recruit .inner{
	width:43%;
	display:inline-block;
	vertical-align:top;
	margin:0 3% 30px;
}

#recruit .box{
	width:90%;
	border:1px solid #D9D9D9;
	padding:20px 1%;
	text-align:left;
	font-size:14px;
	margin:0 1% 30px;
	vertical-align:top;
	position:relative;
}

#recruit .box dt{
	width:96%;
	font-size:16px;
	margin:0 auto 10px;
	background:#f3f3f3;
	text-indent:10px;
}

#recruit .box dd{
	margin:0 0 8px 12px;
}

#recruit .box p{
	text-align:right;
}

#recruit .box dl:after{
	content:"〉";
	text-align:right;
	display:block;
	font-size:25px;
	position:absolute;
	bottom:15%;
	right:3%;
}




@media only screen and (max-width:640px) {
#recruit .inner{
	width:100%;
	margin:0 auto 30px;
}
	
}

--------*/



#contents{
	display:none;
}


#notice{
	width:90%;
	max-width:800px;
	margin:60px auto;
	text-align:center;
}

#notice iframe{
	width:100%;
	height:300px;
}




/* #notice dl{
	display:flex;
	flex-wrap:wrap;
	text-align:left;
}


#notice dt{
	width:25%;
	margin:0 3% 15px 0;
}

#notice dt span{
	display:inline-block;
	border:1px solid #ccc;
	padding:0 10px;
	margin-right:15px;
	font-size:13px;
	width:85px;
	text-align:center;
}	

#notice dd{
	width:72%;
	margin-bottom:15px;
}

 */
 
 
 
 
 


/*サロンリスト DM追加*/
#salon #salon_dm{
text-align: center;
margin-top: 20px;
font-size: 17px;
}

#salon #salon_dm br{
display: none;
}


@media only screen and (max-width:680px) { 

    #salon #salon_dm{
    width: 90%;
    margin: 0  auto;
    }

    #salon #salon_dm br{
    display: block;

    }
}