@charset "UTF-8";
.top-salon { padding: 16vw 0 6vw; background: #fff; }
.top-salon-title { margin-bottom: 6vw; text-align: center; }
.top-salon-title .en { margin-bottom: 2vw; color: var(--pink01); font-size: 15vw; font-family: "futura-pt"; font-weight: 400; letter-spacing: 0.4vw; display: block; }
.top-salon-title .jp { font-size: 4.2vw; display: block; }
.top-salon-items { width: 100%; }
.top-salon-item { width: 100%; margin-bottom: 10vw; }
.top-salon-item-image { width: 100%; margin-bottom: 6vw; }
.top-salon-item-text { width: 90vw; margin: 0 auto; }
.top-salon-item-title { padding: 1vw 0 1vw 18vw; margin-bottom: 3.5vw; font-family: var(--mincho); font-weight: 600; background: url(../images/logo-mark.png) no-repeat center left; background-size: auto 100%; }
.top-salon-item-title .sub { margin-bottom: 1.5vw; font-size: 3.6vw; display: block; }
.top-salon-item-title .title { font-size: 6.6vw; display: block; }
.top-salon-item-address { margin-bottom: 2.5vw; font-size: 4.2vw; line-height: 1.6; letter-spacing: 0.1vw; }
.top-salon-item-tel { margin-bottom: 4vw; color: var(--pink01); font-size: 7.63vw; font-family: "futura-pt"; font-weight: 400; letter-spacing: 0.2vw; display: table; }
.top-salon-item-tel:before { content: '\f095'; margin-right: 1vw; font-size: 70%; font-family: 'icon'; display: inline-block; }
.top-salon-item-links { 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; }
.top-salon-item-more { margin-left: 0; }
.top-salon-social-items li { margin: 0 1.5vw; font-size: 7.8vw; }
.top-salon-social-items li.instagram a { color: #cb9fd3; }
.top-salon-social-items li.hpb a { color: #c6839b; }


.salon .photo {margin: 0 auto 8vw;}
.salon .photo img {width: 100%;}

.salon .message {margin: 0 auto 7vw;} 
.salon .message .lead {font-family: var(--mincho);color: var(--pink01);font-size: 5vw;margin-bottom: 5vw;display: block;letter-spacing: .06em;text-align: center;line-height: 1.6;}

.salon .logo {margin: 0 auto 4vw;}

.salon .social-items {margin: 0 auto;}
.salon .social-items li{position: relative;transition : .5s;width: 100%;margin: 0 auto 4vw;font-size: 4.2vw;text-align: center;font-family: "futura-pt";font-feature-settings: "palt";letter-spacing: .04em;font-weight: 400;border-radius: 60px;}
.salon .social-items li:after {content: "\f105";font-family: icon;font-size: 88%;display: inline-block;position: absolute;top: 50%;right: 16px;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);}
.salon .social-items li.line{border:1px solid #7eb790; }
.salon .social-items li.hpb{border:1px solid #c6829b; }
.salon .social-items li.insta{border:1px solid #a89cbf; }
.salon .social-items li.tiktok{border:1px solid #7F7F80; }
.salon .social-items li.line a,.salon .social-items li.line:after {color: #7eb790;}
.salon .social-items li.hpb a,.salon .social-items li.hpb:after {color: #c6829b;}
.salon .social-items li.insta a,.salon .social-items li.insta:after {color: #a89cbf;}
.salon .social-items li.tiktok a,.salon .social-items li.tiktok:after {color: #7F7F80;}
.salon .social-items i { margin-right: 5px;}
.salon .social-items li a {display: block;padding: 3.8vw 0;}
.salon .social-items li a:hover {color:#fff;}
.salon .social-items li:hover { transition : .5s;}
.salon .social-items li.line:hover{background: #7eb790; color: #fff;}
.salon .social-items li.hpb:hover{background: #c6829b; color: #fff;}
.salon .social-items li.insta:hover{background: #a89cbf; color: #fff;}
.salon .social-items li.tiktok:hover{background: #7F7F80; color: #fff;}
.salon .social-items li:hover:after { opacity: 0.8; color:#fff;}

.top-salon-gallery-items { width: 100%; }
.top-salon-gallery-item { width: 75vw; }
.top-salon-gallery-item img { width: 100%; }

.tel:before{ content: '\f095'; margin-right: 1vw; font-size: 70%; font-family: 'icon'; display: inline-block;}

.map { margin: 0 auto 4vw; height: 280px;}

.route { margin:0 auto; text-align: center; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;align-items:center;
-webkit-justify-content: space-between; justify-content: space-between;}
.route li {width: 48%;display: inline-block;font-size: 3.3vw;text-align: center;font-weight: 400;letter-spacing: 0.1em;border-radius: 60px;padding: 1vw 0;border: 1px solid var(--pink01);color: var(--pink01);}
.route li a {padding: 2.4vw;color: var(--pink01);position: relative;}
.route li a:after { content: '>'; margin-left: 2%; display: inline;}
.route .googlemap a:before { content: "\f041"; margin-right: 4%; font-family: icon; display: inline-block; }
.route .googleroute a:before { content: "\f183"; margin-right:4%; font-family: icon; display: inline-block; }



/* ========================================
 pc
==========================================*/
@media screen and (min-width: 736px) { 
.top-salon { padding: 120px 0; }
.top-salon-title { margin-bottom: 50px; }
.top-salon-title .en { margin-bottom: 10px; font-size: 70px; letter-spacing: 2px; }
.top-salon-title .jp { font-size: 16px; }
.top-salon-items { width: 960px; margin: 0 auto; }
.top-salon-item { padding: 40px 0; margin: 0; border-bottom: 1px solid #dededc; 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-start; align-items: flex-start; }
.top-salon-item:last-child { border-bottom: none;}
.top-salon-item:nth-child(2) { -moz-transition-delay: 0.1s; -o-transition-delay: 0.1s; -webkit-transition-delay: 0.1s; transition-delay: 0.1s; }
.top-salon-item:nth-child(3) { -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.top-salon-item:nth-child(4) { -moz-transition-delay: 0.3s; -o-transition-delay: 0.3s; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; }
.top-salon-item-image { width: 450px; margin: 0; order: 1; }
.top-salon-item-text { width: 450px; margin: 0; position: relative; order: 0; }
.top-salon-item-title { padding: 5px 0 5px 80px; margin-bottom: 15px; }
.top-salon-item-title .sub { margin-bottom: 5px; font-size: 15px; }
.top-salon-item-title .title { font-size: 28px; display: block; }
.top-salon-item-address { margin-bottom: 12px; font-size: 16px; letter-spacing: 1px; }
.top-salon-item-tel { margin-bottom: 25px; font-size: 28px; letter-spacing: 1px; }
.top-salon-item-tel:before { margin-right: 5px; font-size: 70%; }
.top-salon-social-items { margin: 0; position: absolute; top: 0; right: 0; }
.top-salon-social-items li { margin: 0 6px; font-size: 34px; }

.salon .photo { margin:0 auto 80px; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;align-items:center;
justify-content:center; width: 1200px;}
.salon .photo img {width: 50%;}

.salon .logo {margin: 0 auto 14px;}
.salon .message {margin: 0 auto 50px;text-align: center;} 
.salon .message .lead {margin-bottom: 20px;font-size: 170%;} 

.salon .social-items {margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;align-items:center;justify-content:center;}
.salon .social-items li{width: 23%;font-size: 18px;margin: 0 10px;}
.salon .social-items li a{padding: 20px;}
.salon .social-items i { margin-right: 5px;}

.top-salon-gallery-item { width: 580px; }

.tel:before{ margin-right: 10px;}

.map { margin: 0 auto 30px; height: 460px;}
.route { margin:0 auto ; width:800px; }
.route li {font-size: 15px;margin: 0 10px;padding: 4px;width: 380px;}
.route li a {padding: 15px;}
}


/* ========================================
 retina
==========================================*/
@media screen and (min-width: 736px) and (-webkit-min-device-pixel-ratio: 2), screen and (min-width: 736px) and (min-resolution: 2dppx) { 
.top-salon-item-title { background: url(../images/logo-mark@2x.png) no-repeat center left; background-size: auto 100%; }
}