@charset "UTF-8";

/* salon
----------------------------------------------- */
.tab{display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;margin-bottom: 8vw;}
.tab li{width: 49%;position: relative;}
.tab li:after {content: "\f107";font-family: icon;color: #fff;position: absolute;top: 50%;right: 7%;-moz-transform: translateY(-50%);-ms-transform: translateY(-50%);-webkit-transform: translateY(-50%);transform: translateY(-50%);}
.tab li a{padding: 5%;background: var(--blue);color: #fff;text-align: center;font-weight: bold;}

.name{padding: 0;}
.name .ttl{color: var(--blue);font-size: 5vw;margin-bottom: 2vw;border-left: 3px solid var(--blue);padding-left: 3vw;line-height: 1.5;margin-bottom: 4vw;}

.tbl {width: 100%;}
.tbl th,.tbl td {vertical-align:middle;line-height: 1.6;letter-spacing: .04em;}
.tbl th {text-align:center;width: 30%;font-weight: 600;padding: 3% 3% 3% 0;color: var(--brown);}
.tbl tr:first-child {border-top: 1px solid #e6e3dc;}
.tbl td {width: 70%;padding: 3% 0;}
.tbl tr{border-bottom: 1px solid #e6e3dc;}
.tbl tr:last-child { border-bottom: none;}
.tbl td .tel {font-size: 5.6vw;display: inline-block;font-family: "Marcellus";font-weight: 400;}
.tbl td .tel span:before {margin-right: 3px;font-family:icon;content:'\f095';font-size: 80%;}

.tbl tr.access-text ul{margin-bottom: 6vw;}
.tbl tr.access-text ul:last-child{margin-bottom: 0;}
.tbl tr.access-text li {font-size: 3.3vw;}
.tbl tr.access-text li:first-child{background: var(--bluebg);text-align: center;padding: 2%;margin-bottom: 3vw;font-weight: bold;}
.tbl tr.access-text li:last-child{margin-bottom: 0;}
.tbl tr.access-text li a{font-weight: bold;text-decoration: underline;display: inline-block;}
.tbl tr.access-text li a:after {content: "\f08e";margin: 0 4px;font-family:icon;display: inline-block; }

.map {margin: 0 auto 6%;height: 240px;}
.root {display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;margin-bottom: 10vw;}
.root li {border-radius: 40px;width: 49%;text-align: center;background: #555;font-weight: 300;letter-spacing: .09em;margin-bottom: 1vw;}
.root li a {padding: 4vw;color: #fff;position: relative;}
.root li a:after {content: "\f105";margin-left: 10px;font-weight: normal;font-family: 'icon';}
.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%;}


/* modal
----------------------------------------------- */
#modal-sakae01,#modal-sakae02,#modal-nagoya01{display:none;}
.modal-salon {padding: 8vw 0;}
.modal-salon .ttl{font-size: 5vw;margin-bottom: 4vw;text-align: center;}
.modal-salon .modal-wrap{height: 70vh;overflow-y: scroll;padding: 0 8vw;}
.modal-salon li{margin-bottom: 7vw;}
.modal-salon li img{width: 100%;margin-bottom: 2vw;}
.modal-salon li p{font-weight: bold;margin: -5vw 0 0;position: relative;z-index: 1;line-height: 1.4;}
.modal-salon li p span{font-weight: bold;background: var(--blue);color: #fff;font-family: "Marcellus";font-weight: 400;letter-spacing: 0.04em;padding: 2% 4%;display: table;margin-bottom: 2vw;}

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

.tab{margin-bottom: 60px;}
.tab li{width: 49%;position: relative;}
.tab li:after {right: 20px;}
.tab li a{padding: 20px;}

.name{padding: 0;}
.name .ttl{font-size: 24px;margin-bottom: 20px;padding-left: 14px;}


.salon-name{margin-bottom: 40px;}
.salon-name .en{margin-bottom: 4px;font-size: 40px;}
.salon-name .jp{font-size: 16px;}

.info{margin-bottom: 60px;}
.info img {width: 100%; margin-bottom: 60px;}

.tbl td {width: 77%;padding: 18px 0;}
.tbl th {text-align:center;width: 20%;padding: 18px 10px;position: relative;}
.tbl td .tel {font-size: 26px;}

.tbl tr.access-text ul{margin-bottom: 26px;}
.tbl tr.access-text li {font-size: 14px;}
.tbl tr.access-text li:first-child{padding: 10px 10px 10px 12px;margin-bottom: 10px;text-align: left;}


.map{height: 300px;margin-bottom: 4vw;}

.bnr{width: 100%;margin: 0 auto;}
.bnr a{padding: 20px 0;font-size: 18px;width: 33%;}
.bnr a small{display:block;font-size:80%;letter-spacing:2px;}
.bnr a i{margin-right: 10px;}

.map {margin-bottom: 30px;height: 400px;}
.root {display: -webkit-flex;display: flex;-webkit-justify-content: space-between;justify-content: space-between;width: 70%;margin: 0 auto 60px;}
.root li {margin-bottom: 0;width: 49%;}
.root li a {padding: 14px;}

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


/* modal
----------------------------------------------- */
.modal-salon {padding: 40px 0;}
.modal-salon .ttl{font-size: 24px;margin-bottom: 20px;}
.modal-salon .modal-wrap{height: auto;padding: 0 40px;}
.modal-salon ul{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;gap: 0 16px;}
.modal-salon li{margin-bottom: 30px;width: -webkit-calc((100% - 60px) / 4);width: calc((100% - 32px) / 3);}
.modal-salon li img{margin-bottom: 20px;}
.modal-salon li p{margin: -40px 0 0;}
.modal-salon li p span{padding: 4px 16px;margin-bottom: 10px;}


}