@charset "UTF-8";

.intro {margin-bottom: 10vw;}
.intro .ttl{line-height: 1;margin-bottom: 4vw;}
.intro .ttl .en{font-family: trajan-pro-3;font-optical-sizing: auto;font-weight: 400;display: block;color: var(--pink);margin-bottom: 2vw;}
.intro .ttl .jp{font-size: 5.4vw;font-family: var(--mincho);}

.map{margin-bottom: 10vw;}
.map-in img{width: 100%;margin: 0vw 0 0vw;}

.map_link{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;}
.map_link dl{margin-bottom: 2vw;width: 100%;}

.map_link dt {position: relative;padding: 2vw;cursor: pointer;line-height: 1.5;font-size: 3.6vw;font-weight: bold;background: var(--pink);color: #fff;}
.map_link dt:before, .map_link dt:after {content: '';background: #fff;position: absolute;top: 0;right: 0;}
.map_link dt:before {width: 10px;height: 2px;top: calc(50% - 0px);right: 12px;}
.map_link dt:after {width: 2px;height: 10px;top: calc(50% - 7px);right: 16px;-webkit-transition: 0.3s;transition: 0.3s;transform: translate(0, 3px);}
.map_link dt.open:after {-moz-transform: rotate(90deg) translate(3px, 0);-ms-transform: rotate(90deg) translate(3px, 0);-webkit-transform: rotate(90deg) translate(3px, 0);transform: rotate(90deg) translate(3px, 0);}
.map_link dd {display: none;padding: 3%;border: 1px solid var(--pink);background: var(--pink02);}
.map_link dd div{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: flex-start;justify-content: flex-start;}
.map_link dd a{font-weight: bold;margin-right: 0;display: inline-block;}
.map_link dd a:after{content: "|";margin-left: 1.5vw;color: #5f5f5f;}
.map_link dd a:last-child:after{content: none;}

.online{margin-bottom: 12vw;}
.online img{width: 100%;}


/* modal
----------------------------------------------- */
.modal-wrap{display:none;}
.modaal-content-container {padding: 6vw 8vw 8vw;height: 80vh;overflow-y: scroll;padding: 0 8%;}
.modaal-content-container img{width: 50%;border-radius: 50%;margin: 0 auto 2vw;}
.modaal-content-container p{font-size: 3.5vw;line-height: 1.8;font-feature-settings: "palt";letter-spacing: .06em;text-align: justify;margin-bottom: 4vw;}
.modaal-content-container p:last-child{margin-bottom: 0;}
.modaal-content-container .ttl{font-size: 5vw;display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;justify-content: center;-webkit-justify-content: center;align-items: center;-webkit-align-items: center;letter-spacing: .04em;margin-bottom: 5vw;font-family: baskerville-urw;}
.modaal-content-container .ttl .icon{margin-right: 2vw;color: var(--brown);font-size: 5vw;}

/* stylist_wrap
----------------------------------------------- */
.stylist_wrap{margin-bottom: 10vw;}
.stylist_wrap dl{display: -webkit-flex;display: flex;-webkit-justify-content: flex-start;justify-content: flex-start;-webkit-align-items: center;align-items: center;margin-bottom: 8vw;}
.stylist_wrap dt{width: 32%;margin: 0 3vw 0 0;}
.stylist_wrap dt img{width: 100%;}
.stylist_wrap dd{font-size: 5vw;font-family: var(--mincho);display: block;margin-bottom: 1vw;line-height: 1.4;}

.stylist_list{display: -webkit-box;display: -webkit-flex;display: flex;-webkit-justify-content: flex-start;justify-content: flex-start;-webkit-align-items: flex-start;align-items: flex-start;-webkit-flex-wrap: wrap;flex-wrap: wrap;gap: 0 1vw;}
.stylist_list li{margin-bottom: 4vw;width: calc((100% - 3vw) / 3);width: calc((100% - 3vw) / 3);}
.stylist_list a{display: table;}
.stylist_list img{width: 80%;border-radius: 50%;margin: 0 auto 2vw;}
p.stylist_list_name{text-align: center;font-weight: bold;margin-bottom: 1vw;font-size: 3.6vw;}
p.stylist_list_name span{position: relative;border: 1px solid #b8b8b8;padding: 1.5% 3%;margin-right: 1.5vw;font-size: 80%;border-radius: 20px;}
p.stylist_list_address{text-align: center;}
p.stylist_list_batch{color: #fff;text-align: center;font-weight: bold;padding: 1%;}
/* バッチのカラー */
p.stylist_list_batch.diamond{background: #a6b8e5;}
p.stylist_list_batch.platinum{background: #a9b5b5;}
p.stylist_list_batch.gold{background: #b4a981;}
p.stylist_list_batch.silver{background: #b1b5b5;}
p.stylist_list_batch.bronze{background: #a18f7d;}
.stylist_list_link{	display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: flex-start;justify-content: flex-start;-webkit-align-items: flex-start;align-items: flex-start;}
.stylist_list_link a{margin: 0 20px 0 0;}



.modal-wrap .stylist_list_name{font-size: 4vw;}

/* 一覧
----------------------------------------------- */
.top-menu .top-menu-items{display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;}
.top-menu .top-menu-items li {width: 48%;margin-bottom: 10vw;}
.top-menu .top-menu-item-image {width: 100%;margin: 0 auto 2vw;position: relative;}
.top-menu .top-menu-item-image .image { width: 100%; }
.top-menu .top-menu-item-image .badge { padding: 1vw 1.5vw; color: #fff; font-size: 3.4vw; background: var(--pink); position: absolute; top: 0; left: 0; }

.top-menu .top-menu-item-title {margin-bottom: 2.5vw;color: var(--pink);font-size: 4vw;font-family: var(--mincho);font-weight: 600;line-height: 1.4;}
.top-menu .top-menu-item-comment { margin-bottom: 4vw; }
.top-menu .top-menu-item-comment p { font-size: 3.6vw; text-align: justify; text-justify: inter-ideograph; font-feature-settings: "palt"; line-height: 1.8; letter-spacing: 0.04em; }
.modaal-container .stylist_list_name{font-size: 4vw;margin-bottom: 3vw;}



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

.intro{margin-bottom: 60px;}
.intro .ttl{margin-bottom: 20px;}
.intro .ttl .en{margin-bottom: 12px;}
.intro .ttl .jp{font-size: 24px;}

.map{margin-bottom: 10vw;/* width: clamp(730px, 90%, 900px); */margin: 0 auto 80px;}
.map img{width: 100%;max-width: 600px;margin: 0 0 0 auto;}
.map-in{position: relative;}

.map_link:nth-of-type(1){position: absolute;top: 30px;left: 0;width: 60%;max-width: 600px;}

.map_link dl{margin-bottom: 10px;width: 49%;}

.map_link dt {padding: 12px;font-size: 15px;}
.map_link dt:before, .map_link dt:after {content: '';background: #fff;position: absolute;top: 0;right: 0;}
.map_link dt:before {width: 10px;height: 2px;top: calc(50% - 0px);right: 12px;}
.map_link dt:after {width: 2px;height: 10px;top: calc(50% - 7px);right: 16px;-webkit-transition: 0.3s;transition: 0.3s;transform: translate(0, 3px);}
.map_link dt.open:after {-moz-transform: rotate(90deg) translate(3px, 0);-ms-transform: rotate(90deg) translate(3px, 0);-webkit-transform: rotate(90deg) translate(3px, 0);transform: rotate(90deg) translate(3px, 0);}
.map_link dd {padding: 10px 0 10px 10px;background: #fff;display: block;}
.map_link dd a{font-size: 14px;margin-right: 6px;}
.map_link dd a:after{margin-left: 6px;}
.map_link dd a:last-child:after{content: none;}

.map_link dl:nth-of-type(1){top: calc(50% - 400px);left: 0;}
.map_link dl:nth-of-type(2){top: calc(50% - 400px);left: calc(50% - 360px);}
.map_link dl:nth-of-type(3){top: calc(50% - 340px);left: 0;}
.map_link dl:nth-of-type(4){top: calc(50% - 340px);left: calc(50% - 360px);}
.map_link dl:nth-of-type(5){top: calc(50% - -110px);left: calc(50% - 220px);}
.map_link dl:nth-of-type(6){top: calc(50% - -160px);left: calc(50% - 470px);}
.map_link dl:nth-of-type(7){top: calc(50% - -340px);left: calc(50% - 270px);}
.map_link dl:nth-of-type(8){top: calc(50% - -420px);left: calc(50% - 550px);}

.online{margin-bottom: 12vw;width: 100%;max-width: 900px;margin: 0 auto 120px;}
.online img{width: 100%;}

/* modal
----------------------------------------------- */
.modal-wrap{display:none;}
.modaal-content-container {padding: 40px 40px 40px;height: 500px;}
.modaal-content-container img{width: 140px;margin: 0 auto 20px;}
.modaal-content-container p{font-size: 15px;margin-bottom: 24px;}
.modaal-content-container p:last-child{margin-bottom: 0;}
.modaal-content-container .ttl{font-size: 5vw;display: -webkit-box;display: -moz-box;display: -webkit-flex;display: box;display: flex;justify-content: center;-webkit-justify-content: center;align-items: center;-webkit-align-items: center;letter-spacing: .04em;margin-bottom: 5vw;font-family: baskerville-urw;}
.modaal-content-container .ttl .icon{margin-right: 2vw;color: var(--brown);font-size: 5vw;}
.modaal-container{width: 600px;padding: 40px 0;}

/* stylist_wrap
----------------------------------------------- */
.stylist_wrap{margin-bottom: 50px;}
.stylist_wrap dl{margin-bottom: 40px;}
.stylist_wrap dt{width: 140px;margin: 0 20px 0 0;}
.stylist_wrap dd{font-size: 24px;margin-bottom: 10px;}

.stylist_list{gap: 0 10px;}
.stylist_list li{margin-bottom: 20px;width: -webkit-calc((100% - 60px) / 4);width: calc((100% - 60px) / 7);}
.stylist_list a{display: table;}
.stylist_list img{width: 80%;margin: 0 auto 10px;}
p.stylist_list_name{margin-bottom: 10px;font-size: 16px;text-align: center;}
p.stylist_list_name span{position: relative;margin-right: 10px;padding: 6px 12px;font-size: 15px;}
p.stylist_list_batch{padding: 0;}
p.stylist_list_batch span{padding: 2px 7px;font-size: 12px;margin-bottom: 6px;}
.stylist_list_link{	display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: flex-start;justify-content: flex-start;-webkit-align-items: flex-start;align-items: flex-start;}
.stylist_list_link a{margin: 0 20px 0 0;}




/* 一覧
----------------------------------------------- */
.top-menu .top-menu-items {display: -webkit-box;display: -webkit-flex;display: flex;-webkit-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: space-between;justify-content: space-between;gap: 0 30px;}
.top-menu .top-menu-items:before { content: ''; width: 380px; order: 1; }
.top-menu .top-menu-items:after { content: ''; width: 380px; }
.top-menu .top-menu-items li {margin-bottom: 30px;position: relative;width: calc((100% - 90px) / 4);}
.top-menu .top-menu-items li:nth-child(3n+2) { -moz-transition-delay: 0.2s; -o-transition-delay: 0.2s; -webkit-transition-delay: 0.2s; transition-delay: 0.2s; }
.top-menu .top-menu-items li:nth-child(3n) { -moz-transition-delay: 0.4s; -o-transition-delay: 0.4s; -webkit-transition-delay: 0.4s; transition-delay: 0.4s; }
.top-menu .top-menu-item-image {margin-bottom: 14px;}
.top-menu .top-menu-item-image .badge {padding: 2px 8px;font-size: 12px;}
.top-menu .top-menu-item-title {margin-bottom: 5px;font-size: 16px;}
.top-menu .top-menu-item-comment { margin: 0; }
.top-menu .top-menu-item-comment p { font-size: 15px; }
.top-menu .top-menu-item-more { position: absolute; right: 0; bottom: 0; }
.modaal-container .stylist_list_name{font-size: 20px;margin-bottom: 20px;}



}