@charset "utf-8";
/* CSS Document */
/*リセットCSS*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
/* remember to define focus styles! */
:focus {
	outline: 0;
}
 
/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

html{
	background-image:url(back/.png);
	font-size : 75%; 
}

 
@media screen and (min-width : 768px){
    html{ font-size : 87.5%;} 
}
 
@media screen and (min-width : 1024px) {
    html{ font-size : 100%}; 
}

body {
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/*なびげーしょん*/

.menu{
	margin:0;
	padding:0;
}

.salon{
	padding-top:120px;
	display: block;
    margin-left: auto;
    margin-right: auto;
	max-width:1000px;
	color:#57525d;
}

.salon img{
	width:100%;
}

#product {
	padding-top:50px;
	padding-bottom:30px;
	display: block;
    margin-left: auto;
    margin-right: auto;
	max-width:1000px;
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}

#product h1{
	padding-top:60px;
	font-size:200%;
	text-align:center;
	color:#C7B370;
}

#product p{
	line-height: 150%;
	margin-left: auto;
    margin-right: auto;
	width:80%;
	padding-top:15px;
	padding-bottom:15px;
	color:#85765C;
	text-align:center;
}

.estheprolabo-top{
	max-width:100%;
}

.product-text{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	text-align:left;
	margin:10px;
	padding:15px;
	line-height:30px;
}

/*サロン*/

.text{
	width:1000px;
	text-aligin:center;
}

/*ヴィラロドラ*/

.product-text h3{
	padding-top:10px;
	font-size:140%;
	text-align:center;
	color:#C7B370;
	font-size: calc((112.5% + 0.25vw) * 2);
}

.product-text p{
	line-height: 150%;
	margin-left: auto;
    margin-right: auto;
	width:90%;
	padding-top:15px;
	padding-bottom:20px;
	text-align:left;
	color:#85765C;
}

#product-main {
	padding-bottom:30px;
	text-align:center;
	max-width:1000px;
	margin-left: auto;
    margin-right: auto;
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}

#product-main img{
   width:100%;
   max-width: 100%;
   height: auto;
}

.villalodola-img{
	max-width:100%;
}

.product-text{
	max-width:500px;
	max-height:250px;
	margin-bottom:0px;
	padding-bottom:10px;
}	

.product ul{
	list-style: none outside none;
    padding-left:0;
}

.product li {
	padding-bottom:10px;
	margin:10px;
	margin-bottom:0px;
	margin-top:10px;
}
	
.product inline-block{
	text-align:center;
}

.product inline-block li{
	display:inline-block;
}

.ul{
	list-style: none outside none;
    padding-left:0;
}

.li {
	padding-bottom:50px;
}
	
.inline-block{
	text-align:center;
}

.inline-block li{
	display:inline-block;
}

/*オーガニックカラー*/

#villalodola {
	padding-top:10px;
	display: block;
    margin-left: auto;
    margin-right: auto;
	max-width:1000px;
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}

#villalodola img{
	width:100%;
    max-width: 100%;
    height: auto;
}

.villalodola-img{
	max-width:100%
}

.product-text h3{
	padding-top:10px;
	font-size:140%;
	text-align:center;
	color:#C7B370;
}

.product-text p{
	line-height: 150%;
	margin-left: auto;
    margin-right: auto;
	width:90%;
	padding-top:15px;
	padding-bottom:20px;
	text-align:left;
	color:#85765C;
}

.villalodola ul{
	list-style: none outside none;
    padding-left:0;
}

.villalodola li {
	padding-bottom:10px;
	margin:10px;
	margin-bottom:0px;
	margin-top:10px;
}
	
.villalodola inline-block{
	text-align:center;
}

.villalodola inline-block li{
	display:inline-block;
}

.ul{
	list-style: none outside none;
    padding-left:0;
}

.li {
	padding-bottom:10px;
	padding-top:10px;
}
	
.inline-block{
	text-align:center;
}

.inline-block li{
	display:inline-block;
}



/*ヴィラ*/

#villalodola_pro{
	padding-top:10px;
	display: block;
    margin-left: auto;
    margin-right: auto;
	max-width:1000px;
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}

#villalodola_pro img{
	width:100%;
    max-width: 100%;
    height: auto;
}

.Promotion li {
	padding-bottom:10px;
	margin:15px;
	margin-bottom:0px;
	margin-top:10px;
}

.villalodola-img{
	max-width:100%
}
	


/*予約・取扱店*/

#reservation {
	padding-top:50px;
	max-width:1000px;
	margin-left: auto;
    margin-right: auto;
	font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
}


#reservation h1{
	padding-top:50px;
	padding-bottom:50px;
	font-size:200%;
	text-align:center;
	color:#C7B370;
}

#reservation p{
	line-height: 150%;
	margin-left: auto;
    margin-right: auto;
	width:80%;
	padding-top:15px;
	padding-bottom:50px;
	color:#FFF;
}

.store-img{
	max-width:300px;
	text-align:center;	
	transition-property: all;
    transition: 0.3s linear;
}

.store-img a;hover{
	background:blue;
}

.text h2{
	line-height: 150%;
	max-width:300px;
	color:#e0c38c;
}

.text{
	padding-top:30px;
	padding-bottom:50px;
	line-height: 150%;
	pading-top:20px;
	max-width:300px;
	color:#FFF;
}

.reservation_menu ul{
	list-style: none outside none;
    padding-left:0;
}

.reservation_menu li {
	padding-bottom:10px;
	margin:10px;
	margin-bottom:0px;
	margin-top:0px;
}
	
.reservation_menu inline-block{
	text-align:center;
}

.reservation_menu inline-block li{
	display:inline-block
}

.ul{
	list-style: none outside none;
    padding-left:0;
}

.li {
	padding-bottom:50px;
}
	
.inline-block{
	text-align:center;
}

.inline-block li{
	display:inline-block;
}

.img-info:hover{
	opacity:0.5;
	fiilter: alpha(opacity="50");
}

.button {
	display: inline-block;
	width: 300px;
	height: 55px;
	text-align: center;
	text-decoration: none;
	line-height: 54px;
	outline: none;
}
.button::before,
.button::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button,
.button::before,
.button::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
}

.button {
	background-color: #333;
	border: 2px solid #333;
	color: #fff;
	line-height: 50px;
}
.button:hover {
	background-color: #fff;
	border-color: #CC7EB1;
	color: #CC7EB1;
}