/*
section
----------------------------------------------------------------------------------------------------*/
section {
	width : 90%;
	max-width:1200px;
    text-align: left;
	margin-right: auto;
	margin-left: auto; 

}

.main_img{
    position: relative;
    width: 100%;
   height: auto;
    padding-top: 120px;
    
}
.main_img img{
    width: 95%;   
    margin-left: 5%;
    height: 550px;;
    object-fit: cover;
     
}
.catchcopy{
    position: absolute;
    top: -3px;
    left:0px;
    padding-top: 150px;
    margin-left: 10%;
    width: 100px;
    height: auto;
}

.catchcopy img{
    width: 90%;
    height: auto
}



@media only screen and (max-width: 950px) {
.main_img{
    position: relative;
    width: 100%;
   height: auto;
    padding-top: 90px;
    
}
.main_img img{
    width: 100%;   
    margin-left: 0%;
    height: 550px;
   
     object-fit: cover;
}
.catchcopy{
    position: absolute;
    top: -18px;
    left:70%;
    padding-top: 140px;
    margin-left: 5%;
    width: 90px;
    height: auto;
}
    .catchcopy img{
    width: 80%;
    height: auto
}
}

h1 {
	font-family: 'Kiwi Maru', serif;
    font-weight: 300;
	color: #ab9a8f;
    font-size: 30px;
    letter-spacing: 2px;
    line-height: 40px;
    margin-top: 40px;
    margin-bottom: 40px;
}

h2 {
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 300;
	height: 75px;
	color: #ab9a8f;
	font-size: 42px;
	letter-spacing: 3px;
	line-height: 70px;
	margin-bottom: 20px;
	padding-left: 85px;
	background-image: url("../img/top/mark.jpg");
	background-repeat: no-repeat;
	background-size: 75px auto;
}
h2 span{
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #ab9a8f;
    font-size: 30%;
    letter-spacing: 2px;
    line-height: 40px;
    margin-bottom: 20px;
    padding-left: 20px;
   vertical-align:middle;
}

@media only screen and (max-width: 768px) {
h1 {
    font-size: 24px;
}

h2 {
    font-size: 36px;
    height: 60px;
    background-size:60px auto;
    padding-left: 65px;
    }
}


		/*
outline
----------------------------------------------------------------------------------------------------*/
#outline{
   margin-top: 100px;
    margin-bottom: 20px;  
}
#outline .col2_1{
    position: relative;
    width: 43%;
    margin-top: 20px;
    margin-left: 7%;
    float: left;  
}
#outline .col2_1 .flower{
    position: absolute;
    top: -40px;
    left: -65px;
    width: 120px;
    height: 120px;
}
#outline .col2_2{
    width: 50%;
    float: left;
}
#outline .col2_2 img{
    width: 100%;
    height: auto;
}
#outline .col2_2 p{
    font-size: 80%;
    margin-top: 5px;
    color: #ab9a8f;
    text-align: right;
}
@media only screen and (max-width: 950px) {

   #outline .col2_1{
    position: relative;
    width: 43%;
    margin-top: 0px;
    margin-left: 3%;
    margin-right: 4%;   
    float: left;  
} 
}

@media only screen and (max-width: 768px) {
#outline{
   margin-top: 30px;
    margin-bottom: 20px; 
    margin-bottom: 30px;
}
#outline .col2_1{
        margin-top: 0px;
        width: 100%;
    margin-left: 0%;
        float: none;  
    }
#outline .col2_2{
    width: 100%;
    float: none;
    margin-top: 50px;
}
#outline .col2_1 .flower{
    position: absolute;
    top: -20px;
    left: 70%;
    right: 0;
    width: 120px;
    height: 120px;
    transform:rotate(-10deg);
}
			}


		/*
menu
----------------------------------------------------------------------------------------------------*/
#menu{
     
 font-size: 12px;
    line-height: 24px;
    margin-bottom: 80px;
}

#menu .col3_1, .col3_2{
	float: left;
	width: 30.66%;
    margin-right:4%;

		}
#menu .col3_3{
	float: left;
	width: 30.66%;
    margin-right:0;
		}
#menu img {	
	width: 100%;
	height:auto;
		}
#menu h3 {
	font-family: 'Kiwi Maru', serif;
	font-weight: 300;
	color: #ab9a8f;
	font-size: 24px;
	line-height: 24px;
    margin-top: 25px;
	margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
    #menu{
     
 font-size: 14px;
   line-height: 28px;

}
#menu .col3_1, .col3_2{
	float: none;
	width: 100%;
    margin-left:0%;
    margin-right:0%;
		}
    #menu .col3_3{
	float: none;
	width: 100%;
    margin-left:0%;
    margin-right:0%;
		}
    #menu h3 {
        font-size: 18px;
    }
    #menu p{
        margin-bottom: 30px;
}
}
		/*
epilator
----------------------------------------------------------------------------------------------------*/
#epilator{
   margin-top: 100px;
    margin-bottom: 80px;  
}
#epilator .col2_1{
    position: relative;
    width: 54%;
    margin-top: 0px;
    margin-right: 6%;
    float: left;  
}
#epilator .col2_1 .flower{
    position: absolute;
    top: -40px;
    left: -65px;
    width: 120px;
    height: 120px;
}
#epilator .col2_2{
    width: 40%;
    float: left;
}
#epilator .col2_2 img{
    width: 100%;
    height: auto;
}
#epilator .col2_2 p{
    font-size: 80%;
    margin-top: 5px;
    color: #ab9a8f;
    text-align: right;
}
#epilator h3 {
	font-family: 'Kiwi Maru', serif;
	font-weight: 300;
	color: #ab9a8f;
	font-size: 24px;
	line-height: 24px;
    margin-top: 30px;
	margin-bottom: 20px;
}
@media only screen and (max-width: 768px) {
#epilator{
   margin-top: 0px;
    margin-bottom: 80px;  
}
   #epilator .col2_1{
    position: relative;
    width: 100%;
    margin-top: 0px;
    margin-right: 0;
    float: none;  
} 
    #epilator .col2_1 p{
        margin-bottom: 30px;
        
    }
    #epilator .col2_2{
    width: 100%;
    float: none;
}
        #epilator h3 {
        font-size: 18px;
    }
}
		/*
plan
----------------------------------------------------------------------------------------------------*/

#plan{
     position: relative;
}
#plan .flower{
    position: absolute;
    top: 0px;
    right: 20px;
    width: 70px;
    height: 130px;
}
#plan h3 {
	font-family: 'Kiwi Maru', serif;
	font-weight: 300;
	color: #ab9a8f;
	font-size: 24px;
	line-height: 24px;
    margin-top: 30px;
	margin-bottom: 20px;
}

#plan h4 {
	font-weight: bold;
	line-height: 24px;
    margin-top: 30px;
	margin-bottom: 10px;
}
.top_bdr{
    width: 100%;
	border-top: 1px solid #AA998E;
   
}

#plan table{
    font-size: 16px;
    width: 100%;
    border-top: 1px solid #AA998E;
     border-left: 1px solid #AA998E;
    text-align: center;
   
}
#plan table p{
    text-align: left;
    font-size: 14px;
    line-height: 24px;
}
#plan table th,
#plan table td {
  width : 29.33%;
  padding: 14px 3% 14px 3%;
    box-sizing: border-box;
    border-right: 1px solid #AA998E;
     border-bottom: 1px solid #AA998E;
    vertical-align: middle;
}
#plan table th{
    background-color: #f9f1cc;
}

@media only screen and (max-width: 768px) {
    #plan table{
    font-size: 14px;
   
}
}
		/*
staff
----------------------------------------------------------------------------------------------------*/
#staff{
   margin-top: 60px;
    margin-bottom: 20px;  
}
#staff .col2_1{
    position: relative;
    width: 55%;
    margin-top: 0px;
    margin-left: 3%;
    margin-right: 7%;
    float: left;  
}
#staff .col2_1 .name{
    margin-top: 50px;
    font-size: 30px;
    letter-spacing: 4px;
    margin-bottom: 10px;
}
#staff .col2_1 .license{
    font-size: 14px;
    color: #ab9a8f;
    margin-bottom: 30px;
}
#staff .col2_2{
    width: 35%;
    float: left;
}
#staff .col2_2 img{
    width: 100%;
    height: auto;
}
#staff .col2_2 p{
    font-size: 80%;
    margin-top: 5px;
    color: #ab9a8f;
    text-align: right;
}
@media only screen and (max-width: 768px) {
   #staff .col2_1{
    position: relative;
    width: 100%;
    margin-top: 0px;
    margin-left: 0%;
    margin-right: 0%;
       margin-bottom: 30px;
    float: none;  
} 
#staff .col2_2{
    width: 100%;
    float: none;
}
    }

/*
map
------------------------------------------------------------------------------------*/
#map{
    width: 100%;
    	max-width:none;
   margin-top: 100px;
    text-align: center;
}
#map iframe{
    width: 100%;
    height:400px;
     vertical-align: bottom;
    margin-bottom: 50px;
}
#map .salon img{
    width: 420px;
    height: auto;
    margin: auto;
    margin-bottom: 20px;
    
}
#map .tel img{
    width: 350px;
    height: auto;
    margin-bottom: 20px;
}

#map .office{
    margin-bottom: 30px;
}

@media only screen and (max-width: 768px) {
   #map .salon img{
    width: 70%;
    height: auto;
    margin: auto;
    margin-bottom: 20px;
}
    #map .tel img{
    width: 80%;
    height: auto;
    margin-bottom: 20px;
}
    
}