@charset "UTF-8";

/* index
----------------------------------------------- */
.salon-items { width: 100%; } 
.salon-items img { margin-bottom: 0; }
.salon-item { width: 100%; margin-bottom: 14vw; }
.salon-item-image { width: 100%; margin-bottom: 5vw; }
.salon-item-image img { width: 100%; }
.salon-item-text { width: 90vw; margin: 0 auto 6vw; }
.salon-item-head { margin-bottom: 4.5vw; border-bottom: 1px solid #e7d9bb; }
.salon-item-title { margin-bottom: 1vw; padding: 2vw 0 2vw 8vw; font-family: var(--mincho); background: url(../images/deco02.png) no-repeat center left; background-size: 5vw; }
.salon-item-title .small { font-size: 3.68vw; line-height: 1.4; display: block; }
.salon-item-title .big { font-size: 6.32vw; line-height: 1.4; display: block; }
.salon-item-address { margin-bottom: 1.5vw; font-size: 4.21vw; font-family: var(--mincho); line-height: 1.4; letter-spacing: 0.2vw; }
.salon-item-tel { margin-bottom: 3vw; color: #c19d52; font-size: 9.21vw; font-family: "baskerville-urw"; font-style: italic; letter-spacing: 0.2vw; }
.salon-item-tel:before { content: '\f095'; margin-right: 1vw; font-size: 75%; font-family: 'icon'; font-style: normal; display: inline-block; }
.salon-item-open { margin-bottom: 2vw; font-size: 3.68vw; line-height: 1.4; letter-spacing: 0.2vw; }
.salon-item-more { margin-left: 0; }

/* salon
----------------------------------------------- */
.midashi01 { text-align: left; }
.midashi01 .jp { color: var(--gold); }

img { width: 100%; margin-bottom: 6vw; }

.salon-social-items { margin-bottom: 1vw; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.salon-social-items li { margin-left: 2vw; font-size: 6vw; }
.salon-social-items .icon-hpb1 { color: #9f1547; }
.salon-social-items .icon-instagram-brands1 { color: #bf6ece; }

.map { margin: 0 auto 6vw; height: 300px; filter: saturate(0.6); }

.root { margin: 0 auto 6vw; text-align: center; }
.root li { width: 46%; margin: 0 1%; padding: 1% 0; display: inline-block; font-size: 3.4vw; text-align: center; background: #685d4d; border-radius: 50px; }
.root li a { padding: 10px; color: #fff; position: relative; }
.root li a:after { content: '\f105'; font-family: 'icon'; margin-left: 12%; display: inline; }
.root .googlemap a { letter-spacing: 0.1rem; }
.root .googlemap a:before { content: "\f041"; margin-right: 4%; font-family: icon; display: inline-block; }
.root .googleroot a:before { content: "\f183"; margin-right: 4%; font-family: icon; display: inline-block; }

.gallery {width: 100%;margin: 0 auto;}
.gallery ul {display:flex;flex-wrap:wrap;justify-content:space-between;margin: 0 auto 3%;}
.gallery ul li {width: 48%;position: relative;margin-bottom: 4%;}
.gallery li a:after { content: ''; display: inline-block; width: 24px; height: 24px; background-image: url(../images/zoom.jpg); background-size: contain; vertical-align: middle; position: absolute; right:0; bottom:0;}
.gallery ul li img { width:100%;}

/* =============================================
pc
================================================*/
@media screen and (min-width: 736px) {

/* index pc
----------------------------------------------- */
.salon-item { margin-bottom: 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; }
.salon-item-head { padding-bottom: 12px; margin-bottom: 20px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: flex-end; align-items: flex-end; }
.salon-item-title { margin-bottom: 0; padding: 5px 0 5px 36px; background-size: 24px; }
.salon-item-title .small { margin-bottom: 6px; font-size: 14px; }
.salon-item-title .big { font-size: 24px; }
.salon-social-items { margin-bottom: 5px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; }
.salon-social-items li { margin-left: 12px; font-size: 26px; }
.salon-social-items .icon-hpb1 { color: #9f1547; }
.salon-social-items .icon-instagram-brands1 { color: #bf6ece; }
.salon-item-address { margin-bottom: 12px; font-size: 16px; letter-spacing: 2px; }
.salon-item-tel { margin-bottom: 12px; font-size: 35px; letter-spacing: 2px; }
.salon-item-tel:before { margin-right: 4px; }
.salon-item-open { margin-bottom: 20px; font-size: 14px; letter-spacing: 2px; }

img { margin-bottom: 40px; }

.salon-social-items { margin-bottom: 5px; }
.salon-social-items li { margin-left: 15px; font-size: 26px; }

.map { height: 400px; margin: 0 auto 60px; }

.root { margin: 0 auto 40px; }
.root li { width: 30%; margin: 0 10px; padding: 4px; font-size: 14px; }
.root li a { padding: 18px; text-align: center; position: relative; }
.root li a::after { margin-left: 30px; font-size: 18px; position: absolute; top: 33%; right: 8%; }
.root .googlemap a { letter-spacing: 1px; }

.gallery ul:after{ content: ""; display: block; width:24%; }
.gallery ul li { width: 24%; margin-bottom: 15px; }
}

@media screen and (min-width: 900px) {
.salon-item-image { width: 50%; margin-bottom: 0; }
.salon-item:nth-child(odd) .salon-item-image { width: 50%; order: 1; }
.salon-item:nth-child(even) .salon-item-image { width: 50%; order: 0; }
.salon-item-text { width: 50%;  margin: 0 auto; padding: 0 20px; }
.salon-item:nth-child(odd) .salon-item-text { order: 0; }
.salon-item:nth-child(even) .salon-item-text { padding: 0 0 0 40px; }
}

@media screen and (min-width: 1200px) {
.salon-item { width: 1100px; margin: auto; }
.salon-item-title .small { font-size: 16px; }
.salon-item-title .big { font-size: 28px; }
}

/* =============================================
retina-size
================================================*/
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) {
.gallery li a:after {  background-image: url(../images/zoom@2x.jpg);}
}