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



/* TITLE */
.top-img{
width: 100%;
height: 400px;
background-image: url("../img/lashlift_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 {padding-bottom: 0;}
.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;
}
}

/*---subtitle---*/
h2.leftline{
position:relative;
font-family: 'Shippori Mincho', serif;
letter-spacing: 0.2rem;
line-height: 3rem;
text-align: left;
}
.leftline span{
position: absolute;
top: 0;
left: 0;
display: block;
color: #5c2920;
letter-spacing: 1rem;
white-space: nowrap;
}
.leftline span::before{
content: "";
display: inline-block;
width: 5em;
border-top: 1px solid #fff;
vertical-align: middle;
margin-right: 1em;
padding-bottom:4px;
}
.lead{
padding:0 2rem 0 20rem;
position: relative;
margin-top: 6rem;
font-family: 'Zen Kaku Gothic New', sans-serif;
font-weight: 400;
font-size: 1.6rem;
}
@media (max-width: 768px) {
h2.leftline{line-height: 3rem;letter-spacing: 0.1rem;}
.leftline span{
letter-spacing: 0.1rem;
font-size: 2rem;
}
.leftline span::before{
width: 2em;
margin-right: 1em;
}
}

/*---lashlift---*/
#lashlift{}
.pari{
margin: 8rem 0 1.5rem;
color: #5C2920;
}
.pari .leftline span::before{
border-top: 1px solid #E6D4C8;
}
.pari .container{
padding-top: 10rem;
}
.pari .container:first-child{
padding-top: 15rem;
}
.pari h3{
position: relative;
padding: 1rem 0 1.5rem;
border-bottom: 3px solid #CCB2A3;
font-size: 2.3rem;
letter-spacing: 0.rem;
}
.pari h3:before {
position: absolute;
bottom: -3px;
left: 0;
width: 40%;
height: 3px;
content: '';
background: #863748;
}
.pari .point{
display: block;
position: absolute;
top:-3rem;
right: 4rem;
width: 150px;
}
.pari p{
margin: 2rem 0 0;
font-size:1.8rem; 
line-height: 3.5rem;
}
.pari .row span{
color: #CC9386;
}
.pari video {
  max-width: 100%;/* はみ出ないように */
}
.video{
margin: 3rem auto 0;
text-align: center;
}
.pari .kouka h3:before {
background: #DE6D9C;
}
.pari .kouka .point{
display: block;
position: absolute;
top:-3rem;
right: 4rem;
width: 130px;
}
.pari .kouka span{
color: #DE6D9C;
}
.pari .main-title{
margin-left: auto;
margin-right: auto;
}
.pari .main-title h2{
font-size: 3.5rem;
letter-spacing: 0.3rem;
color: #CCB2A3;
margin-top: 7rem;
}
.pari table{
width: 100%;
font-size: 1.8rem;
}
.pari table th{
width: 50%;
background: #C6B7B3;
padding: 1.5rem 2rem;
}
.pari table td{
width: 50%;
border-top:1px solid #5C2920;
border-right:1px solid #5C2920;
border-bottom:1px solid #5C2920;
background: #fff;
padding: 1.5rem 2rem;
text-align: right;
}
.pari .price{
font-size: 1.5rem;
color: #CCB2A3;
line-height: 3rem;
}
.personal .kouka{
margin-top: 5rem;
}
.personal h2{
margin-top: 15rem;
}


@media (max-width: 768px) {
.pari .container{
padding: 5rem 3rem 0;
}
.pari h3{font-size: 1.5rem;}
.pari .point{
display: block;
position: absolute;
top:-2rem;
right: 0;
width: 80px;
}
.pari .kouka .point{
display: block;
position: absolute;
top:-2rem;
right: 0;
width: 80px;
}
.personal .point{
display: block;
position: absolute;
top:-3rem!important;
right: 0;
width: 80px;
}
.pari p{
margin: 2rem 0 0;
font-size:1.3rem; 
line-height: 2.5rem;
}
.pari table{
width: 100%;
font-size: 1.2rem;
line-height: 2rem;
}
.pari .price{
font-size: 1.3rem;
color: #CCB2A3;
line-height: 2rem;
}

}


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

.menu-outer h2{
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 h2: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;	
}
@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{
padding-bottom: 0;
}
.menu-outer h2{
font-size: 3rem;	
letter-spacing: 0.5rem;
color: #CCB2A3;
position: relative;
display: inline-block;
margin-bottom: 1em;		
}	
.menu-outer p{
font-size: 1.2rem;
}
}