@charset "UTF-8";
/* CSS Document */
/*---all--*/
html,body {
position: relative;
height: 100%;
}
html{
font-size:62.5%;
scroll-behavior: smooth;
}
body {
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-size: 1.4rem;
line-height: 2.5rem;
letter-spacing: 0.1rem;
text-align: justify; /* 両端揃え */
text-justify: inter-ideograph;/* 両端揃えの種類win */
font-feature-settings: "palt" 1;/* カーニング */
line-break: strict;/* 禁則 */
}
p {
color: #5C2920;
}
hr {
height: 0;margin: 0;padding: 0;border: 0;
}
hr.line01 {
border-top:solid 0.03rem #CCB2A3;
width: 100%;
}
hr.line02 {
height: 1px;
background-color: #fff;
}
a {
outline: none;
}


@media (min-width: 992px) {
.container {max-width: 962px;}
}
@media (min-width: 1200px) {
.container {max-width: 1170px;}
}
@media (min-width: 768px) {
.pc-none{display: none;}
}
@media (max-width: 767.98px) {
.sp-none{display: none;}
}
.title-box{
max-width: 500px;
margin-right: auto;
margin-left: auto;
}
.row img{
width: 100%;
}

.textyellow{
color: #ffe603;
}

::selection {
background: #5C2920;
color: #fff;
}

a:hover {
text-decoration: none;
}




/* TITLE */
.top-box{
width: 100%;
padding: 2em 0em;
background-color: #5C2920;
text-align: center;
}
.top-box img{
width: 200px;
height: auto;
}


/*　nav　*/
nav{
background:#5C2920;
color:#fff;
text-align: left;
letter-spacing: 0.2em;
font-weight: 500;	
}

.collapse li{
padding-left: 2rem;
}

.i-sns img{
width: 4rem;
padding-right: 1rem;	
}


@media (max-width: 768px) {
.collapse li{
padding-left: 0rem;
}
.navbar-dark {
bottom: 2rem;
}
.top-box img{
width: 150px;
}
.i-sns img{
width: 3rem;
}	
	
}



/*　スライドショー　*/
.slide {
position: relative;
width: 100%;
height: 700px;
overflow: hidden;
background-color: #5c2920;	
}
@keyframes slideshow{
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  28%{
    opacity: 1
  }
  38%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}
.slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  opacity: 0;
  animation :slideshow 24s linear infinite;
	background-size: cover;
}
.slide img:nth-child(2){
  animation-delay: 8s;
}
.slide img:last-child{
  animation-delay: 16s;
}

@media (max-width: 1200px) {
.slide{	
background-size: cover;
height: 400px;}
}

@media (max-width: 768px) {
.slide{
background-size: cover;
height: 200px;
margin-top: -2rem;	
}
}





/*イントロ*/

.i-title{
background-color: #5c2920;
padding: 2rem 0rem;
text-align: center;
}

.i-title_inner{
padding: 2rem 0rem;
margin-top: 0.5rem;	
margin-bottom: 0.5rem;
background-color: #fff;	
}
.i-title_inner h1{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.3rem;
color: #5c2920;
margin-top: 1.5rem;	
}

.i-title_inner p{
letter-spacing: 0.1rem;
color: #5c2920;
margin-top: 2rem;	
}

@media (max-width: 768px) {
.i-title_inner h1{
letter-spacing: 0.2rem;
font-size: 2rem;
}
.i-title_inner p{
font-size: 1.2rem;
}	
}




/*---menu---*/
#top-menu{
background-color: #5C2920;
}
#top-menu h2{
color: #fff;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Shippori Mincho', serif;
font-size: 1.8rem;
letter-spacing: 0.3rem;
line-height: 3rem;
text-align: center;
margin: 0 auto;
}

.llbox{
padding: 7rem 0rem;
margin-bottom: 1.5rem;
}
.leftline{
position:relative;
}
.leftline span{
position: absolute;
top: 0;
left: 0;
display: block;
color: #fff;
letter-spacing: 1rem;	
white-space: nowrap;
font-size: 3.2rem;
}
.leftline span::before{
content: "";
display: inline-block;
width: 5em;
border-top: 1px solid #fff;
vertical-align: middle;
margin-right: 1em;
padding-bottom:4px;
}

.i-salonmenu{
padding-bottom: 15rem;
}
.i-salonmenu h3{
color: #fff;
font-size: 1.4rem;	
}

.menuinner img{
width: 100%;
text-align: center;
padding-top: 2rem;	
padding-bottom: 1rem;	
}

.menuinner a:hover{
opacity:0.7;
transition:0.3s;
}


@media (max-width: 768px) {
#top-menu h2{font-size: 1.2rem; line-height: 2rem; text-align: center;}
.leftline span::before{
width: 2em;
margin-right: 1em;
}
.llbox{
padding: 4rem 0rem;
margin-bottom: 1rem;
}
.leftline span{
font-size: 2em;
}	
}



/*---はじめての方へ---*/
.i-first{
padding: 6rem 0;
background-color: #fff;
width: 90%;
text-align: center;
margin: 0 auto;
border: solid 0.1rem #5C2920;
margin-top: -5rem;	
}

.i-first h1{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.3rem;
color: #5c2920;
position: relative;
display: inline-block;
margin-bottom: 1em;	
}

.i-first h1:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;/*線の上下位置*/
  display: inline-block;
  width: 60px;/*線の長さ*/
  height: 1px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #CCB2A3;/*線の色*/
  border-radius: 0.1px;/*線の丸み*/
}



.btn_m {
border-radius: 0;
color: #fff;	
background: #ccb2a3;
padding: 1.2rem 0;
margin-top: 1rem;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Shippori Mincho', serif;	
}
.btn_m:hover{
background-color: #5C2920;
color: #fff;	
}


@media (max-width: 768px) {
	.i-first p{
	font-size: 1.2rem;
	text-align: left;
	}
}




/* アバウト */
.i-about{
background-image: url("../img/back01.jpg");
background-size: cover;
background-attachment: fixed;
margin-top:5rem;
margin-bottom: 10rem;	
padding: 8rem 0rem 15rem;
}
.i-aboutbox{
position: relative;	
}
.i-about h1{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.3rem;
color: #5c2920;
text-align: center;
}
.about-box-l{
background-color: #fff;
padding: 7rem 8rem;	
vertical-align: middle;
background-image: url("../img/i-about2.png");
background-repeat: no-repeat;
background-position: top 4rem left 2rem;
background-size: 100px;
}
.about-text{
text-align: left;
font-size: 1.3rem;
padding: 2rem 0;
line-height: 3rem;		
}

.about-box-r{
text-align: center;
position: absolute;
top:8rem;
right: 0px;
}
.about-box-r img{
width: 90%;
box-shadow:10px 10px 0px #CCB2A3;		
}


@media (max-width: 992px) {
.about-box-l{padding: 2rem 2rem;}
.about-text{
font-size: 1.2rem;
padding: 2rem 0;
line-height: 2rem;		
}
}

@media (max-width: 768px) {
.i-about{padding-bottom: 5rem; background-size:contain;}	
.about-box-l{ width: 100%;}	
.about-box-r{position: static; margin-top: 2rem;}
.mx-auto{width: 80%}	
}



 

/* スクール */
.i-school-title{
padding-left: 20%;
margin-bottom: -3rem;
margin-top: 3rem;	
}
.i-school-title h1{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Shippori Mincho', serif;
letter-spacing: 1rem;
color: #5c2920;	
font-size: 5rem;
}

.i-school{
width: 80%;
text-align: center;
margin: 0 auto;
margin-bottom: 13rem;	
}
.i-scool_eye{
background-image: url("../img/s-back01.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
padding: 6rem 0;
}
.i-scool_esthe{
background-image: url("../img/s-back02.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
padding: 6rem 0;
}

.i-school h2{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.3rem;
color: #5c2920;
position: relative;
display: inline-block;
margin-bottom: 1em;	
}

.i-school h2:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -15px;/*線の上下位置*/
  display: inline-block;
  width: 60px;/*線の長さ*/
  height: 1px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #CCB2A3;/*線の色*/
  border-radius: 0.1px;/*線の丸み*/
}

.i-school p{
margin-top: 1em;
}

.btn_p {
border-radius: 0;
color: #fff;	
background: #DFB9BE;
padding: 1.2rem 0;
margin-top: 1rem;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Shippori Mincho', serif;	
}
.btn_p:hover{
background-color: #D68289;
color: #fff;	
}


@media (max-width: 767.98px) {
.i-school-title{
padding-left: 10%;
margin-bottom: -2rem;
}	
.i-school-title h1{
letter-spacing: 0.8rem;
font-size: 4rem;
}
.i-school h2{font-size: 1.6rem;}	
.i-school{
width: 90%;
margin-bottom: 8rem;
}
.i-school p{
font-size: 1.2rem;
text-align: left;	
}
.i-scool_eye,.i-scool_esthe{padding: 6rem 2rem;}
}





/*ブログ*/
.i-blog-title{
padding-left: 30%;
margin-bottom: -5rem;
margin-top: 3rem;	
}
.i-blog-title h1{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Shippori Mincho', serif;
letter-spacing: 1rem;
color: #5c2920;	
font-size: 5rem;
padding-bottom: 1.5rem;	
}

.i-blog{
width: 75%;
background-color: #D8BDAA;
padding: 5rem 4rem;
margin-right: 0;
margin-left: auto;	
}
.i-blog p{
color: #fff;
}
.i-blog a{}
.i-blog a:hover{
opacity:0.7;
transition:0.3s;
}
.b-inner{
margin-top: 1.5rem;
}
.b-inner .top-thumbnail{
background-position: center center;
background-size: cover;
height: 100px;
}

.blog-btn,.btn,.btn-block,.btn-lg{
  margin:0 0 0 auto;

}
.btn_b {
border-radius: 0;
color: #fff;	
background: #5C2920;
padding: 1.2rem 0;
margin-top: 1rem;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Shippori Mincho', serif;
width: 7rem;
}
.btn_b:hover{
background-color: #fff;
color: #5C2920;	
}


@media (max-width: 992px) {
.i-blog{
width: 90%;
}
}

@media (max-width: 768px) {
.i-blog{
width: 100%;
padding: 5rem 2rem;	
}
.b-inner{
padding-right:2rem;
}
.b-inner:nth-of-type(even){
padding-left: 2rem;
}
.b-inner p{
margin: 0;
}

.i-blog-title h1{font-size: 4rem;}	
.i-blog-title{
padding-left: 10%;
margin-bottom: -3.3rem;
}	
}



/*アクセス*/
.access{
margin-bottom: 1rem;
margin-top: 15rem;	
}
.access h1{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Shippori Mincho', serif;
letter-spacing: 1rem;
color: #5c2920;	
font-size: 5rem;
}

.mapbox{
margin-top: 20px;
margin-bottom: 30px;	
}

@media (max-width: 768px) {
.access{
margin-top: 13rem;	
}
.access h1{font-size: 4rem;}	
.access p{font-size: 1.2rem;}	
}	



/* FOOTER */
.copy{
padding: 10px 0;	
background: #5C2920;
font-size: 0.6em;
}
.copy p{
color: #fff;
}



/*メニューをページ下部に固定*/
#sp-fixed-menu1{
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   opacity: 0.9;
   z-index: 99;
margin-bottom: 5.5rem;	
}

/*メニューを横並びにする*/
#sp-fixed-menu1 ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;	
}


#sp-fixed-menu1 li{
   justify-content: center;
   align-items: center;
 width: 50%;
   padding:0;
   margin:0;
   font-size: 1.8rem;
   border-right: 1px solid #fff;
}


/*左側メニューを緑色に*/
#sp-fixed-menu1 li:first-child{
background: #CCB2A3;
background-image: url("../img/voice.png");	
background-position: bottom center;
background-repeat: no-repeat;	
background-size: 80%;	
}

/*右側メニューをオレンジ色に*/
#sp-fixed-menu1 li:last-child{
   background: #CCB2A3;
background-image: url("../img/coupon.png");	
background-position: bottom center;
background-repeat: no-repeat;
background-size: 80%;	
}

/*ボタンを調整*/
#sp-fixed-menu1 li a{
   color: #fff;
   text-align: center;
   display:block;
   width: 100%;
   padding:15px;
}




#sp-fixed-menu2{
   position: fixed;
   width: 100%;
   bottom: 0px;
   font-size: 0;
   opacity: 0.9;
   z-index: 99;
}
#sp-fixed-menu2 img{
width: 20px;
margin-right: 1rem;	
}

#sp-fixed-menu2 ul{
   display: flex;
   list-style: none;
   padding:0;
   margin:0;
   width:100%;
}

#sp-fixed-menu2 li{
   justify-content: center;
   align-items: center;
 width: 100%;
   padding:0;
   margin:0;
   font-size: 14px;
   border-right: 1px solid #fff;
 font-size: 1.8rem;	
background-color: #D78F97;
background-image: url("../img/reser.png");	
background-position: bottom right;
background-repeat: no-repeat;
background-size: 40%;	
}


/*ボタンを調整*/
#sp-fixed-menu2 li a{
   color: #fff;
   text-align: center;
   display:block;
   width: 100%;
   padding:15px;
}


@media (min-width: 768px) {
   .for-sp{
      display:none;
    }
}