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

/* reset styles */
html, body, div, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, address,
ul, ol, li, dl, dt, dd,
table, th, td,
form, fieldset {
	margin: 0;
	padding: 0;
	font-family:"Sawarabi Mincho", YuMincho,'Yu Mincho',"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro",serif;

	/*font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;*/
	/*font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*
	/*font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
}

/* HTML5の新要素 */
section, nav, article, aside, header, footer, 
hgroup, figure, figcaption, summary {
	display: block;
	margin: 0;
	padding: 0;
	font-family:"Sawarabi Mincho", YuMincho,'Yu Mincho',"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro",serif;

	/*font-family:"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;*/
	/*font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*
	/*font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;*/
}
*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
/*------------------------------------------------------------------
共通スタイル
-------------------------------------------------------------------*/
html,body{
    width: 100%;
	height:100%;
}
body{
	font-size:16px;	
	text-align:center;
	color:#000;
	background:#fff;
	line-height:1.6rem;
}
.clear{
	overflow:hidden;	
}
ul{
	list-style:none;	
}
img{
    vertical-align:bottom;
	border:none;
	max-width:100%;
}
span.red{
	color:red;	
}
span.underline{
	text-decoration:underline;	
}
*:focus {
   outline:none;
}
a{
	color:#221815;
}
a:hover{
	color:#B5B5B5;
}
a:hover img{
	opacity: 0.8;	
}


@media screen and (min-width:768px){
	a[href^="tel:"] {
		pointer-events: none;
	}
}

.wf-sawarabigothic { font-family: "Sawarabi Gothic"; }
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }
/**mac用リセットCSS**/
/*input{
	-webkit-appearance: none;	
}*/
/*------------------------------------------------------------------
共通スタイルcontainer
-------------------------------------------------------------------*/
/*.container{
	width:900px;
	margin:0 auto;*/
	/* box-shadow */
	/*-moz-box-shadow:0px 0px 6px 3px #cccccc;
	-webkit-box-shadow:0px 0px 6px 3px #cccccc;	
	box-shadow:0px 0px 6px 3px #cccccc;
}
.container{
	background:url(../images/bg.png) repeat-y center top;
}*/
/*------------------------------------------------------------------
共通スタイルbox
-------------------------------------------------------------------*/
/*.box{
	min-width:1200px;
	_display: inline;
	_zoom:1;
}*/
/*------------------------------------------------------------------
共通スタイルheader
-------------------------------------------------------------------*/
header{
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	background: #4c1628;
}
header div{
	width: 30%;
}
header div:first-of-type{
    order: 1;
    flex-grow: 2;
}
header div:last-of-type{
	order: 3;
	flex-grow: 2;
}
header h1{
width: 25%;
    order: 2;
    flex-grow: 5;
    padding: 20px;
}
/*------------------------------------------------------------------
共通スタイルbox01
-------------------------------------------------------------------*/
.box01{
	background: url("../images/bg.png") left top;
	padding-bottom: 50px;
}
.box01 .wrap{
	width: 1112px;
	margin: 0 auto;
	overflow: hidden;
	padding-top: 40px;
}
.box01 .wrap img{
	box-shadow:0px 5px 0px 0px rgba(179,179,166,0.5);
}
.box01 .wrap01{
	padding-top: 50px;
}
.box01 .wrap .image,
.box01 .wrap .text{
	width: 50%;
}
.box01 .wrap01 .image,
.box01 .wrap01 .text,
.box01 .wrap02 .image,
.box01 .wrap02 .text{
	margin-bottom: 10px;
}
.box01 .wrap01 .text,
.box01 .wrap02 .text{
	background: #4c1628;
	color: #fff;
	text-align: left;
	padding: 50px 30px;
	min-height: 371px;
	box-shadow:0px 5px 0px 0px rgba(179,179,166,0.5);
}
.box01 .wrap01 .image{
	float: left;
}
.box01 .wrap01 .text{
	float: right;
	margin-top: 50px;
}
.box01 .wrap02 .image{
	float: right;
	margin-top: 50px;
}
.box01 .wrap02 .text{
	float: left;
}
@media screen and (max-width:1132px){
	.box01 .wrap{
		width: 96%;
	}
}
@media screen and (max-width:1000px){
	.box01 .wrap01 .text,
	.box01 .wrap02 .text{
		min-height: auto;
	}
}
@media screen and (max-width:815px){
	.box01 .wrap01 .image,
	.box01 .wrap01 .text,
	.box01 .wrap02 .image,
	.box01 .wrap02 .text{
		float: none;
		width: 100%;
		margin-top: 0;
	}
}

.box01 .wrap h2{
	font-size: 2rem;
	font-weight: normal;
	letter-spacing: 3px;
	padding-bottom: 30px;
}
.box01 .wrap01 h2{
	font-size: 2.5rem;
}
.box01 h2.svgtitle{
	width: 208px;
	margin: 0 auto;
	padding-top: 80px;
}
.box01 .wrap03{
	width: 850px;
	margin: 0 auto;
	display: flex;
	flex-flow: row wrap;
	justify-content:space-between;
}
.box01 .wrap03 .map{
	width: 48%;
	order: 1;
	margin-bottom: 10px;
}
.box01 .wrap03 .text{
	width: 48%;
	order: 2;
	text-align: left;
	letter-spacing: 2px;
}
.box01 .wrap03 .text a{
	color: #0b76ad;
	text-decoration: none;
}
.box01 .wrap03 .text div{
	padding-bottom: 20px;
}
.box01 .wrap03 .text span{
	display: block;
}
.box01 .wrap03 .text .tel span:first-of-type{
	font-size: 2rem;
	padding-bottom: 5px;
}
.box01 .wrap03 .text .open dl{
	display: flex;
	flex-flow: row wrap;
	
}
.box01 .wrap03 .text .open dl dt{
	width: 90px;
	font-family: "Sawarabi Gothic";
}
.box01 .wrap03 .text .open dl dd{
	font-family: "Sawarabi Gothic";
}
@media screen and (max-width:870px){
	.box01 .wrap03{
		width: 96%;
	}
}
@media screen and (max-width:600px){
	.box01 .wrap03{
		display: block;
	}
	.box01 .wrap03 .map,
	.box01 .wrap03 .text{
		width: 70%;
		margin: 0 auto;
	}
}
@media screen and (max-width:400px){
	.box01 .wrap03 .map,
	.box01 .wrap03 .text{
		width: 90%;
		margin: 0 auto;
	}
	.box01 .wrap h2{
		font-size: 1.6rem;	
	}
}

.box01 h2.svgtitle2{
	width: 160px;
	margin: 0 auto;
	padding-top: 80px;
}
.box01 .wrap04 p,
.box01 .wrap04 ul li{
	font-family: "Sawarabi Gothic";
}
.box01 .wrap04 p:first-of-type{
	padding-bottom: 2rem;
	font-size: 1.1rem;
}
.box01 .wrap04 ul{
	max-width: 550px;
	margin: 1.5rem auto 0;
	text-align: left;
}
.box01 .wrap04 ul li{
	padding-bottom: 1rem;
	position: relative;
	padding-left: 1rem;
}
.box01 .wrap04 ul li:last-of-type{
	padding-bottom: 0;
}
.box01 .wrap04 ul li:before{
	content: "・";
	position: absolute;
	left: 0;
	top: 0;
}
@media screen and (max-width:570px){
	.box01 .wrap04 p:last-of-type br{
		display: none;
	}
}
/*------------------------------------------------------------------
共通スタイルbox02
-------------------------------------------------------------------*/
.box02{
	background: #fbf1ec;
	padding: 0 ;
}
.box02 h2.svgtitle{
	width: 163px;
	margin: 0 auto;
	padding-top: 80px;
}
.box02 .tax{
	padding-top: 10px;
}
.box02 .wrap01{
	width: 1076px;
	margin: 0 auto;
	display: flex;
	flex-flow: row wrap;
	justify-content:space-between;
	text-align: left;
	padding-top: 10px;
}

.box02 .wrap01 div{
	padding-bottom: 20px;
}
.box02 .wrap01 .perm{
	width: 49%;
	padding-top: 30px;
}
.box02 .wrap01 .color{
	width: 49%;
	padding-top: 30px;
}
.box02 .wrap01 .cut{
	width: 30%;
	padding-top: 30px;
}
.box02 .wrap01 .treatment{
	width: 68%;
	padding-top: 30px;
}
.box02 .wrap01 .treatment .inner{
	display: flex;
	flex-flow: row wrap;
	justify-content:space-between;
}	
.box02 .wrap01 .treatment .inner .long{
	width:58%;	
}	
.box02 .wrap01 .treatment .inner .short{
	width:40%;	
}		
.box02 .wrap01 h2{
	color: #732034;
	font-size: 1.4rem;
	font-weight: normal;
	border-bottom: 1px #732034 solid;
	padding-bottom: 3px;
	margin-bottom: 20px;
}
.box02 .wrap01 h2 span{
	display: block;
	border-bottom: 2px #732034 solid;
	padding-bottom: 3px;
}
.box02 .wrap01 dl{
	border-bottom: 1px #231815 dashed;
	display: flex;
	flex-flow: row wrap;
	justify-content:space-between;
	align-items:flex-end;
	padding:0 10px 5px;
}

.box02 .wrap01 dl dt,
.box02 .wrap01 dl dd,
.box02 .wrap01 p{
	font-family: "Sawarabi Gothic";
}
.box02 .wrap01 dl dt{
	line-height: 1.3rem;
	padding-bottom: 5px;
	flex-grow: 2;
}
.box02 .wrap01 dl dd{
	font-family: 'Great Vibes', cursive;
	font-size: 1.5rem;
	flex-grow: 1;
	text-align: right;
}
.box02 .wrap01 dl dd span{
	font-size: 1rem;
	font-family:YuMincho,'Yu Mincho',"ＭＳ Ｐ明朝", "MS PMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro",serif;
}
.box02 .wrap01 p{
	padding:5px 10px 0;
	font-size: 0.8rem;
	line-height: 1.1rem;
}
@media screen and (max-width:1096px){
	.box02 .wrap01{
		width: 96%;	
	}
}
@media screen and (max-width:980px){
	.box02 .wrap01 .treatment .inner .long dl dt{
		/*width:78%;*/
		flex-grow: 2;
	}
	.box02 .wrap01 .treatment .inner .long dl dd{
		/*width: 20%;*/
		flex-grow: 1;
		text-align: right;
	}
	.box02 .wrap01 .treatment .inner .short dl dt{
		/*width:60%;*/
		flex-grow: 2;
	}
	.box02 .wrap01 .treatment .inner .short dl dd{
		/*width: 38%;*/
		flex-grow: 1;
		text-align: right;
	}
}
@media screen and (max-width:920px){
	.box02 .wrap01 .treatment .inner .long{
		padding-bottom:0;
	}
	.box02 .wrap01 .treatment .inner .long,
	.box02 .wrap01 .treatment .inner .short{
		width:100%;
	}
}
@media screen and (max-width:830px){
	.box02 .wrap01 .treatment .inner{
		display:block;	
	}
	.box02 .wrap01 .treatment .inner .long dl dt{
		width:auto;
	}
	.box02 .wrap01 .treatment .inner .long dl dd{
		width:auto;
	}
	.box02 .wrap01 .treatment .inner .short dl dt{
		width:auto;
	}
	.box02 .wrap01 .treatment .inner .short dl dd{
		width:auto;
	}
}
@media screen and (max-width:700px){
	.box02 .wrap01{
		display: block;
		padding-top: 25px;
	}
	.box02 .wrap01 .perm{
		width: 100%;
		padding-top: 15px;
	}
	.box02 .wrap01 .color{
		width: 100%;
		padding-top: 15px;
	}
	.box02 .wrap01 .cut{
		width: 100%;
		padding-top: 15px;
	}
	.box02 .wrap01 .treatment{
		width: 100%;
		padding-top: 15px;
	}
}
@media screen and (max-width:440px){
	.box02 .wrap01 dl{
		align-items:flex-end;
	}
	/*.box02 .wrap01 dl dt{
		width:76%;
		flex-grow: 2;
	}
	.box02 .wrap01 dl dd{
		width: 22%;
		flex-grow: 1;
		text-align: right;
	}*/
}
/*------------------------------------------------------------------
共通スタイルパーツbox03
-------------------------------------------------------------------*/

.box03{
	background: url("../images/bg.png") left top;
	padding: 0 0 50px;
}
.box03 h2.svgtitle{
	width: 535px;
	margin: 0 auto 40px;
	padding-top: 80px;
}
.box03 h2.svgtitle .sp{
	display: none;
}
@media screen and (max-width:555px){
	.box03 h2.svgtitle{
		width:300px;	
	}
	.box03 h2.svgtitle .sp{
		display: block;
	}
	.box03 h2.svgtitle .pc{
		display: none;
	}
}

.box03 dl{
	width:850px;
	margin:30px auto 5px;
	display: flex;
	flex-flow: row wrap;
	justify-content:space-between;	
}	
.box03 dl dt{
	width:20%;
}	
.box03 dl dd{
	width:77%;
	text-align:left;
	font-family: "Sawarabi Gothic";
}
.box03 dl dt img{
	box-shadow:0px 5px 0px 0px rgba(179,179,166,0.5);
	width: 100%;
}	
.box03 dl dd span{
	display:block;
	color:#732034;	
}
@media screen and (max-width:870px){
	.box03 dl{
		width:90%;
	}
}
@media screen and (max-width:480px){
	.box03 dl dt{
		display: none;	
	}
	.box03 dl dd{
		width: 100%;	
	}
}
/*------------------------------------------------------------------
共通スタイルパーツbox04
-------------------------------------------------------------------*/

.box04{
	background: #f9ecef;
	padding: 0 0 20px;
}
.box04 h2.svgtitle{
	width: 420px;
	margin: 0 auto 50px;
	padding-top: 80px;
}
.box04 h2.svgtitle .sp{
	display: none;
}

@media screen and (max-width:440px){
	.box04 h2.svgtitle{
		width:225px;	
	}
	.box04 h2.svgtitle .sp{
		display: block;
	}
	.box04 h2.svgtitle .pc{
		display: none;
	}

}
.box04 .wrap01{
	width:1036px;
	margin:0 auto;
	display: flex;
	flex-flow: row wrap;
}
.box04 dl{
	width: 25%;
	padding: 0 0.5rem 30px;
}
.box04 dt img{
	box-shadow:0px 5px 0px 0px rgba(179,179,166,0.5);
}
.box04 dd{
	padding-top: 10px;
	font-family: "Sawarabi Gothic";
	font-size: 0.9rem;
}
@media screen and (max-width:1056px){
	.box04 .wrap01{
		width: 96%;
	}
}
@media screen and (max-width:750px){
	.box04 dl{
		width: 33.333%;	
	}
}
@media screen and (max-width:520px){
	.box04 dl{
		width: 50%;	
	}
}
@media screen and (max-width:340px){
	.box04 dl{
		width:90%;	
		margin: 0 auto;
	}
}
/*------------------------------------------------------------------
共通スタイルパーツbox05
-------------------------------------------------------------------*/

.box05{
	background: url("../images/bg.png") left top;
	padding: 0 0 50px;
}
.box05 h2.svgtitle{
	width: 410px;
	margin: 0 auto 30px;
	padding-top: 80px;
}
.box05 h2.svgtitle .sp{
	display: none;
}
@media screen and (max-width:430px){
	.box05 h2.svgtitle{
		width: 235px;
	}
	.box05 h2.svgtitle .sp{
		display: block;
	}
	.box05 h2.svgtitle .pc{
		display: none;
	}
}

.box05 ul li{
	padding: 10px 3%;
	font-family: "Sawarabi Gothic";
}
.box05 ul li a{
	color: #158abb;
}


/*------------------------------------------------------------------
共通スタイルfooter
-------------------------------------------------------------------*/
footer{
	color: #010101;
	padding-top: 20px;
	padding-bottom: 10px;
	font-family: "Sawarabi Gothic";
	font-size: 0.9rem;
}

/*------------------------------------------------------------------
共通スタイルremodal
-------------------------------------------------------------------*/

.remodal{
	text-align: left;
}
.remodal img{
	display: block;
	width: 50%;
	margin: 0 auto 30px;
	text-align: center;
	box-shadow:0px 5px 0px 0px rgba(179,179,166,0.5);
}
.remodal h2{
	padding: 30px 0 10px;
	font-family: "Sawarabi Gothic";
	font-size: 1.2rem;
}
.remodal dl{
	display: flex;
	flex-flow: row wrap;
}
.remodal dt{
	width: 25%;
	font-weight: bold;
}
.remodal dd{
	width: 75%;
}
.remodal dt,
.remodal dd{
	font-family: "Sawarabi Gothic";
}



@media screen and (max-width:450px){
	.remodal img{
		width: 80%;
	}
	.remodal dl{
		display: block;
	}
	.remodal dt,
	.remodal dd{
		width: 100%;
	}
}

/*------------------------------------------------------------------
共通スタイルpage_top
-------------------------------------------------------------------*/

#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 0;
  bottom: 0;
  background: #732034;
  opacity: 0.6;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
/*------------------------------------------------------------------
共通スタイルcart_ec
-------------------------------------------------------------------*/
#cart_ec{
  width: 120px;
  height: 120px;
  position: fixed;
  right: 0;
  top: 0;
  background: #a54f63;
}
#cart_ec a{
  display: block;
  text-decoration: none;
  padding: 0.5rem;
}
@media screen and (max-width:417px){
	#cart_ec{
	  width: 90px;
	  height: 90px;
	}
}