@charset "UTF-8";
h1{
	text-align: center;
	margin: 150px auto 100px;
	font-size: 30px;
	letter-spacing: 0.1em;
	
}

.wrapper {
    line-height: 1.6;
    clear: both;
}

.hair_list{
	/*background: #DD5759;*/
}
.hairst{
	margin-bottom: 100px;
}
.hairst h2{
    text-align: center;
	letter-spacing: 0.2em;
	font-size: 20px;
	padding: 20px 20px 0;
}
.subtitl{
	padding-left: 20px;
	padding-bottom: 30px;
	color: silver;
	border-top: 1px solid silver;
	
}
.hair_list ul{
	display: flex;
	flex-wrap: wrap;
	
}
.hair_list li{
	width: 50%;
	padding: 10px;
	box-sizing: border-box;
	/*background: #E2BCBD;*/
}
.hairimg{
	width: 100%;
	height: auto;
	/*background: silver;*/
}
.hairimg img{
	width: 100%;
	height: auto;
	object-fit: cover;
}
.hairtxt p{
	font-size: 10px;
	
}
.subhairtxt{
	color: silver;
	font-size: 12px !important;
}
.subhairtxt12{
	color: gray;
	font-size: 15px;
}

p.subhairtxt12:before{
	content:"";
	display:inline-block;
	width:1em;
	height:1em;
	background:url("")no-repeat;
	background-size:contain;
}




.haircatego{
	/*background: #93D3A0;*/
	width: 80%;
	margin: 0 auto;
}

.length{
	/*background: #EE95E8;*/
}
.length{
	padding: 10px;
}
.length_list li{
	display: flex;
	border-bottom: 0.1px solid gray ;
	/*justify-content: center;*/
	padding: 10px;
	font-size: 14px;
}

.hairbtn{
	/*background: #9298D9;*/
	padding: 15px;
	margin-top: 50px;
}
.hair_btn li{
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
	/*border: solid 0.1px gray;*/
	padding: 10px 60px;
	background-color:rosybrown;
	letter-spacing: 0.2em;
	color:white;
	font-weight: bold;
	font-size: 12px;
}



.hairbox1{
	width: 100%;
	height: auto;
	margin-top: 120px;
	
}
.hairbox1 img{
	width: 100%;
	height: auto;
	object-fit: cover;
}

.hairbox2{
	width: 100%;
	height: auto;
	
}
.hairbox2 img{
	width: 100%;
	height: auto;
	object-fit: cover;
}
.hairtxt1{
	padding: 30px;
}
.hairtxt1 h2{
	margin-bottom: 15px;
}

.hairtxt2{
	width: 50%;
	margin: 0 auto 60px;
	padding: 20px 0;
	
}
.hairtxt2 .btn {
	width: 100%;
	padding: 10px 0;
}
.htwrapper{
	background:#FFFBED ;
}
.stylistimg{
	width: 80%;
	height: auto;
	margin: 50px auto 0;
	
	
}
.stylistimg img{
	width: 100%;
	height: auto;
	
	object-fit: cover;
}
.name{
	font-size: 18px;
	border-bottom: 1px solid silver;
}
.shop{
	font-size: 12px;
	color: gray;
}

.no1img{
	width: 90%;
	height: auto;
	margin: 0 auto;
	
}
.no1img img{
	width: 100%;
	height: auto;
	object-fit: cover;
	
}

.no1txt{
	background:#EAEAEA;
	padding: 20px;
	word-wrap: break-word;
	margin-bottom: 60px;
}

.no2img{
	width: 60%;
	height: auto;
	margin: 0 auto;
	
}
.no2img img{
	width: 100%;
	height: auto;
	object-fit: cover;
	
}
.no2txt{
	width: 60%;
	
	margin: 0 auto;
}
.no2{
	margin-bottom: 50px;
}
.length{
	text-align: center;
	font-size: 18px;
}

.nagasa{
	text-align: center;
	border-top: silver solid 1px;
	color:dimgray;
	font-size: 14px;
}
/*newhair*/
.img1{
	width: 100%;
	height: auto;
}
.img1 img{
	width: 100%;
	height: auto;
}
.nhhwrapper3{
	margin-bottom: 200px;
}
.nhhwrapper2{
	background: #D0CECE;
	
}

.nhh2{
	text-align: center;
	padding: 20px;
	font-size: 25px;
	letter-spacing: 0.2em;
}
.img2{
	/*background: #CBCACA;*/
	display: flex;
	
	max-width: 1000px;
	margin: 50px auto 0;
}
.box1{
	width: 50%;
	height: auto;
	
}
.box1 img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}
.txt1{
	width: 50%;
	padding: 80px 15px;
	box-sizing: border-box;
	font-size: 11px;
	text-align: center;
	
}
.box2{
	width: 70%;
	height: auto;
	margin: 50px auto;
}
.box2 img{
	width: 100%;
	height: auto;
}
.img4{
	display: flex;
	max-width: 1000px;
	margin: 0 auto;
}

.txt3{
	width: 40%;
	padding: 80px 10px;
	box-sizing: border-box;
	font-size: 13px;
	text-align: center;
}
.box3{
	width: 60%;
	height: auto;
	
}
.box3 img{
	width: 100%;
	height: auto;
	vertical-align: bottom;
	
}

.hairsub{
	display: flex;
	flex-direction: column;
	margin-top: 20px;
	margin-bottom: 30px;
}
.hairshopbtn{
	padding: 5px 10px ;
	border: 1px solid #DDAB8C;
	font-size: 13px;
	/*margin-right: 10px;*/
	text-align: center;
	margin-bottom: 10px;
}
.ins{
	padding: 5px 10px ;
	border: 1px solid #DDAB8C;
	text-align: center;
}
.txt-no1{
	font-size: 13px;
}
.sohotxt{
	width: 70%;
	height: auto;
	margin: 0 0 0 auto;
}
.sohotxt img{
	width: 100%;
	height: auto;
}



.aboutsalonimg{
	margin-top: 100px;
	margin-bottom: 50px;
}
.aboutsalonimg img{
	width: 100%;
	height: auto;
	
}



.recbox{
	/*background: #D5D3D3;*/
	height: auto;
	padding: 10px ;
	width: 80%;
	max-width: 1100px;
	box-sizing: border-box;
	animation: fadein 3s;
	margin: 0 auto;
	
}
 


.recbox img{
	width: 100%;
	height: auto;
	object-fit: cover;
}
@media(min-width:481px){
	
	.hairtxt p{
	font-size: 16px;
	
}
	
}




@media(min-width:769px){
	.nhhwrapper{
		max-width: 800px;
		margin: 0 auto;
	}
	.nhh2{
	margin: 30px 0;
	padding: 20px;
	font-size: 35px;
	letter-spacing: 0.2em;
}
	.haircatego{
		width: 50%;
		margin: 120px  auto 0;
		max-width: 500px;
	}
	.hairst .wrapper{
		max-width: 900px;
		margin: 0 auto;
		
	}
	.hairtxt2{
		width: 40%;
	/*margin: 80px auto 60px;*/
	padding: 20px 0 80px;
	}
	.hairtxt2 .btn {
		width: auto;
		padding: 10px 30px;
	}
	
	.hair_list li{
	width: 33.333%;
	padding: 10px;
	box-sizing: border-box;
	/*background: #E2BCBD;*/
}
	.yt{
		display: flex;
	}
	.hairtxt1 {
    padding: 60px;
		margin-top: 100px;
}
	.htwrapper {
   
    width: 80%;
    margin: 0 auto;
}
	.txt1{
	
	font-size: 25px;
		padding-top: 200px;
	
}
	.txt3{
		font-size: 30px;
		padding-top: 200px;
	}
	
}


/* alignment --------------- */
.tCenter {
  text-align: center; }

.tLeft {
  text-align: left !important; }

.tRight {
  text-align: right !important; }

.container {
    padding: 0;
}

/* -----------------------------------------------------------
 ボタン
----------------------------------------------------------- */
/*== ボタン共通設定 */
.btn {
  /*アニメーションの起点とするためrelativeを指定*/
  position: relative;
  overflow: hidden;
  /*ボタンの形状*/
  background: #333;
  text-decoration: none;
  display: inline-block;
  border: 1px solid #333;
  /* ボーダーの色と太さ */
  padding: 10px 30px;
  text-align: center;
  outline: none;
  /*アニメーションの指定*/
  transition: ease .2s; }

/*ボタン内spanの形状*/
.btn > span {
  position: relative;
  z-index: 3;
  /*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color: #fff; }

.btn:hover > span {
  color: #333; }

/*== 背景が流れる（左から右） */
.bgleft:before {
  content: '';
  /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  /*色や形状*/
  width: 100%;
  height: 100%;
  /*アニメーション*/
  transition: transform 0.6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: right top; }

/*hoverした際の形状*/
.bgleft:hover:before {
  transform-origin: left top;
  transform: scale(1, 1); }

.btn_color1 {
  background: #DDAB8C;
  border: 1px solid #DDAB8C !important; }
  .btn_color1 > span {
    color: #fff; }
  .btn_color1:hover > span {
    color: #DDAB8C; }
  .btn_color1::before {
    background: #fff; }

.btn_color2 {
  background: transparent;
  border: 1px solid #DDAB8C !important; }
  .btn_color2 > span {
    color: #2C2B2B; }
  .btn_color2:hover > span {
    color: #fff; }
  .btn_color2::before {
    background: #DDAB8C; }

.btn_color3 {
  background: #2C2B2B;
  border: 1px solid #2C2B2B !important; }
  .btn_color3 > span {
    color: #fff; }
  .btn_color3:hover > span {
    color: #2C2B2B; }
  .btn_color3::before {
    background: #fff; }

.btn_color4 {
  background: transparent;
  border: 1px solid #2C2B2B !important; }
  .btn_color4 > span {
    color: #2C2B2B; }
  .btn_color4:hover > span {
    color: #fff; }
  .btn_color4::before {
    background: #2C2B2B; }