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



/* TITLE */
.top-img{
width: 100%;
height: 400px;
background-image: url("../img/self_main.jpg");
background-repeat: no-repeat;
background-size:cover;
background-position: center top;
}


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


/*イントロ*/
.main-title{
padding: 2rem 0rem;
text-align: center;
}
.main-title h1{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Shippori Mincho', serif;
font-size: 4.5rem;	
letter-spacing: 1.3rem;
color: #5c2920;
margin-top: 7rem;	
margin-bottom: 1rem;	
}
.main-title h2{
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.3rem;
font-size: 1.6rem;	
color: #5c2920;
position: relative;
display: inline-block;
margin-bottom: 1.5em;	
}
.main-title h2:before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -20px;/*線の上下位置*/
  display: inline-block;
  width: 60px;/*線の長さ*/
  height: 1px;/*線の太さ*/
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);/*位置調整*/
  background-color: #CCB2A3;/*線の色*/
  border-radius: 0.1px;/*線の丸み*/
}
.main-title p{
letter-spacing: 0.1rem;
color: #5c2920;
margin-top: 2rem;	
}

@media (max-width: 768px) {
.main-title h1{
letter-spacing: 0.8rem;
font-size: 3rem;
margin-top: 3rem;	
}
.main-title p{
font-size: 1.2rem;
text-align: left;
padding: 0 3rem;	
}	
}





/*---脱毛トップ---*/
.llbox h2{
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: left;
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: #5c2920;
letter-spacing: 1rem;	
white-space: nowrap;
font-size: 3.2rem;
}
.leftline span::before{
content: "";
display: inline-block;
width: 5em;
border-top: 1px solid #5c2920;
vertical-align: middle;
margin-right: 1em;
padding-bottom:4px;
}
.subtitle{
font-size: 1.2rem;
margin-top: 1rem;
text-indent: 16em;	
}

.hair-box{
background-image:url( "../img/self-back.png");
background-position: right;
background-repeat: no-repeat;
background-size: 70%;	
text-align: left;
padding-bottom: 6rem;
padding-top: 10rem;	
height: 350px;	
}
.hair-box p{
line-height: 3.4rem;
letter-spacing: 0.6rem;
font-size: 1.7rem;
}


@media (max-width: 768px) {
.hair-box{
background-repeat: no-repeat;
background-size: 100%;	
text-align: left;
padding: 8rem 2rem;
margin-top: -5rem;	
margin-bottom: -10rem;	
}	
.hair-box p{
line-height: 3rem;
letter-spacing: 0.3rem;
font-size: 1.3rem;
margin-top: 3rem;	
}
	
}



/*---セルフ脱毛の特徴---*/

.feature{
text-align: center;
margin-top: 15rem;	
}

.feature h1{
font-size: 4rem;	
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.5rem;
color: #CCB2A3;
position: relative;
display: inline-block;
margin-bottom: 1em;	
}

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

.fea-box{
background: #E6D4C8;
margin-top: 3rem;
padding: 5rem 0rem;	
}
.fea-box h2{
margin-top: -6.3rem;
margin-bottom: 2rem;
font-size: 2.4rem;
font-weight: bold;
letter-spacing: 0.5rem;	
color: #5c2920;	
}

.fea-box img{
width: 30%;
margin: 3rem 0;	
}
.fea-box p{
line-height: 3rem;
text-align: left;
}
.fea-title{
font-weight: bold;
font-size: 2rem;
color: #5c2920;	
text-align: center;
letter-spacing: 0.3rem;	
}
.fea-inner{
padding: 0 6rem;
}
.fea-inner2{
margin-top: 5rem;
}

@media (max-width: 768px) {
.llbox h2{font-size: 1.2rem; line-height: 2rem; text-align:left;}
.leftline span::before{
width: 2em;
margin-right: 1em;
}
.llbox{
padding: 4rem 0rem;
margin-bottom: 1rem;
}
.leftline span{
font-size: 2em;
}
.subtitle{
text-indent: 6em;	
}
.bust-box{
padding-bottom: 3rem;	
}	
.bust-box p{
font-size: 1.2rem; text-align: left;}	
}

/*---メニュー---*/
.menu-outer{
padding: 6rem 0 3rem;
background-color: #fff;
width: 90%;
text-align: center;
margin: 0 auto;
}

.menu-outer h1{
font-size: 4rem;	
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.5rem;
color: #CCB2A3;
position: relative;
display: inline-block;
margin-bottom: 1em;	
}

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



table {
width: 70%;
border-collapse: collapse;
border-spacing: 0;
font-size: 14px;
margin: 0 auto;
margin-top: 4rem;
margin-bottom: 3rem;	
text-align: center;			
}
table th {
width: 40%;
background: #CEBEBC;
border: 1px solid #fff;
box-sizing: border-box;
padding: 15px;
vertical-align: middle;
font-weight: bold;
text-align: left;
color: #5C2920;
}
table td {
background: #fff;
border: 1px solid #CEBEBC;
box-sizing: border-box;
padding: 15px;
vertical-align: top;
text-align: right;
color: #5C2920;	
vertical-align: middle;	
}
table p{
font-size: 1.2rem;
font-weight: lighter;
margin-bottom: 0;	
}

@media all and (max-width: 767px) {
table{width: 100%;}	
table th, table td {
display: block;
width: 100%;
border-bottom: none;
text-align: center;
}
table tr:last-child td:last-child {
border-bottom: 1px solid #ccc;
}
}


@media (max-width: 768px) {
.menu-outer h1{
font-size: 3rem;	
letter-spacing: 0.5rem;
color: #CCB2A3;
position: relative;
display: inline-block;
margin-bottom: 1em;		
}	
.menu-outer p{
font-size: 1.2rem;
}
}




#flow{
background-image: url("../img/self_flowback.jpg");
background-repeat: no-repeat;
background-size: cover;	
margin-top: 10rem;
padding: 3rem 3rem 10rem 3rem;  	
}

.flow-outer{
background: url("../img/se_flow1.png") no-repeat left 20% top 4%/150px; 
padding-top: 2rem;	
}
.flow-inner{
margin-top: 5rem;
}

.flow-inner h1{
font-size: 3rem;	
font-family: 'M PLUS Rounded 1c', sans-serif;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.5rem;
color: #5c2920;
text-align: center;
}
.flow-inner h2{
color: #fff;
font-size: 13rem;
letter-spacing: 2rem;	
margin-bottom: -4rem;	
text-align: center;
}

.flowbox{
background-color: #fff;
padding: 5rem 5rem;
margin-top: 3rem;
border: solid 0.5px #5c2920;
vertical-align: middle;	
box-shadow:10px 10px 0px #F0E6DF;			
}

.step{
text-align: center;
vertical-align: middle;
width: 54%;	
margin: 0 auto;	
}

.stepin{
text-align: center;
display: flex;
align-items: center;
}
.stepin h3{
color: #5C2920;
font-size: 2rem;	
}
.stepin span{
font-size: 5rem;
letter-spacing: 0.4rem;	
}
.stepwrit{
margin-top: 4rem;
}
.stepin h4{
color: #5C2920;
font-size: 2.2rem;
letter-spacing: 0.5rem;	
margin-top: 0.8rem;	
}

hr{
border: none;
border-bottom: 1px solid #5C2920;
margin: 0;	
}

.arrow{
text-align: center;
margin: 3rem 0;	
}
.arrow img{
width: 50px;
}

@media (max-width: 1200px) {
.step{width: 90%;	}

}


@media (max-width: 768px) {
#flow{padding: 0rem 3rem 10rem 3rem;  }	
.flow-outer{
background: url("../img/se_flow1.png") no-repeat left 6% top 1%/120px; 
padding-top: 2rem;	
}
.flow-inner{
margin-top: 3rem;
}	
.flow-inner h1{
font-size: 2rem;	
letter-spacing: 0.5rem;
}
.flow-inner h2{
font-size: 9rem;
letter-spacing: 2rem;	
margin-bottom: -2rem;	
}
.flowbox{
padding: 5rem 2rem;
margin-top: 3rem;
}	
.step{width: 100%;padding: 0;	text-align: center; margin: 0 auto;}
}