@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap');


*,
*:before,
*:after {
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 font-feature-settings: "palt";
 letter-spacing: .1em;
}





body {
 margin: 0 auto;
 max-width: 2000px;
 font-size: 16px;
 font-family: "roboto", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
 font-feature-settings: "palt";
 color: #333;
}



ul,
ol {
 list-style-type: none;
 padding: 0;
 margin: 0;
}


a {
 transition: 0.3s;
 font-weight: 600;
 text-decoration: underline;
}

a:hover {}



p {
 margin-top: 20px;
 line-height: 1.6;
 color: #555;
}


.center {
 text-align: center;
}


img {
 max-width: 100%;
}



.drawer_menu {
 display: none;
}


.white {
 background: #fff;
 background-image: url(../img/rocky-wall-2.png);
 background-size: 200px 200px;
 background-blend-mode: multiply;
 position: relative;

}

.white-2 {
 background: #fefefe;
 background-image: url(../img/rocky-wall.png);
 background-size: 200px 200px;
 /* 粒の大きさ調整 */
 background-blend-mode: multiply;
 /* 背景色とブレンド */
 opacity: 0.95;
 position: relative;

}




.beige {
 background: #efe0be;
 background-image: url(../img/rocky-wall.png);
 background-size: 200px 200px;
 background-blend-mode: multiply;
 position: relative;

}


.gray {
 background: #ebe6dd;
 background-image: url(../img/rocky-wall.png);
 background-size: 200px 200px;
 /* 粒の大きさ調整 */
 background-blend-mode: multiply;
 /* 背景色とブレンド */
 opacity: 0.95;
 position: relative;
}





.large-logo {
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 margin: auto;
}


.large-logo.ex {
 position: absolute;
 top: inherit;
 left: 0;
 right: 0;
 bottom: 0;
 margin: auto;
}


.r-mark {
 font-size: 0.6em;
 vertical-align: super;
 margin-left: 0.05em;
}



/*----------------------------*/


.tn {
 background: #ddd;
 background-size: cover;
 background-position: 50%;
}

.tn.no1-1 {
 background-image: url(../img/model-image-3.jpg);
 background-position: 50% 30%;
}

.tn.no2-1 {
 background-image: url(../img/model-image-17.jpg);
 background-position: 50% 50%;
}

.tn.no2-2 {
 background-image: url(../img/model-image-16.jpg);
 background-position: 0% 0%;
 margin-top: 20px;
}

.tn.no2-3 {
 background-image: url(../img/model-image-18.jpg);
 background-position: 100% 50%;
}

.tn.no2-4 {
 background-image: url(../img/model-image-19.jpg);
 background-position: 70% 0%;
 margin-top: 20px;
}

.tn.no3-1 {
 background-image: url(../img/interview-3.jpg);
 background-position: 50% 0%;
}

.tn.no3-2 {
 background-image: url(../img/img-7.jpg);
 background-position: 50% 50%;
}


.tn.about-1 {
 background-image: url(../img/model-image-23.jpg);
 background-position: 50% 75%;
}

.tn.about-2 {
 background-image: url(../img/model-image-24.jpg);
 background-position: 50% 50%;
}


.tn.entry-1 {
 background-image: url(../img/model-image-20.jpg);
 background-position: 50% 75%;
}

.tn.entry-2 {
 background-image: url(../img/model-image-21.jpg);
 background-position: 50% 50%;
}



.tn.salon-light {
 background-image: url(../img/salon-light.jpg);
 background-position: 100% 100%;
}

.tn.salon-lucia {
 background-image: url(../img/salon-lucia.jpg);
 background-position: 90% 100%;
}

.tn.salon-puregreen {
 background-image: url(../img/salon-puregreen.jpg);
 background-position: 50% 50%;
}


.tn.salon-mahaloco {
 background-image: url(../img/salon-mahaloco.jpg);
 background-position: 50% 50%;
}


.tn.salon-roxyclub {
 background-image: url(../img/salon-roxyclub.jpg);
 background-position: 50% 50%;
}

.tn.salon-sakure {
 background-image: url(../img/salon-sakure.jpg);
 background-position: 50% 50%;
}


.tn.salon-amou {
 background-image: url(../img/salon-amou.jpg);
 background-position: 50% 50%;
}


.tn.salon-nina {
 background-image: url(../img/salon-nina.jpg);
 background-position: 100% 50%;
}


.tn.salon-taka {
 background-image: url(../img/salon-taka.jpg);
 background-position: 50% 50%;
}

.tn.salon-bonheur7 {
 background-image: url(../img/salon-bonheur7.jpg);
 background-position: 50% 50%;
}

.tn.salon-wish {
 background-image: url(../img/salon-wish.jpg);
 background-position: 50% 50%;
}


.tn.salon-mambo {
 background-image: url(../img/salon-mambo.jpg);
 background-position: 90% 50%;
}

.tn.salon-luz {
 background-image: url(../img/salon-luz.jpg);
 background-position: 0% 50%;
}


.tn.salon-becks {
 background-image: url(../img/salon-becks.jpg);
 background-position: 50% 50%;
}


.tn.salon-miles {
 background-image: url(../img/salon-miles.jpg);
 background-position: 50% 50%;
}


.tn.salon-inter-cut {
 background-image: url(../img/salon-inter-cut.jpg);
 background-position: 50% 50%;
}



.tn.salon-libela {
 background-image: url(../img/salon-libela.jpg);
 background-position: 50% 50%;
}



.tn.salon-felizio {
 background-image: url(../img/salon-felizio.jpg);
 background-position: 50% 50%;
}


.tn.salon-avancer {
 background-image: url(../img/salon-avancer.jpg);
 background-position: 0% 50%;
}


.tn.salon-infinite {
 background-image: url(../img/salon-infinite.jpg);
 background-position: 50% 50%;
}

.tn.salon-dada {
 background-image: url(../img/salon-dada.jpg);
 background-position: 50% 50%;
}

.tn.salon-mitaka {
 background-image: url(../img/salon-mitaka.jpg);
 background-position: 50% 50%;
}


.tn.salon-cowa {
 background-image: url(../img/salon-cowa.jpg);
 background-position: 50% 50%;
}


.tn.salon-spread {
 background-image: url(../img/salon-spread.jpg);
 background-position: 50% 50%;
}


.tn.salon-polka {
 background-image: url(../img/salon-polka.jpg);
 background-position: 50% 50%;
}

.tn.salon-eclat {
 background-image: url(../img/salon-eclat.jpg);
 background-position: 50% 50%;
}

.tn.salon-fleur {
 background-image: url(../img/salon-fleur.jpg);
 background-position: 0% 50%;
}



.tn.salon-vivi {
 background-image: url(../img/salon-vivi.jpg);
 background-position: 50% 50%;
}



/*----------------------------*/

.message-box {
 width: 750px;
 margin: 0 auto;
}

.message-box .tn {
 height: 450px;
 display: block;
 margin: 0 auto;
 border-radius: 20px;
}

.message-box .tn.iwakami {
 background-image: url(../img/interview-3.jpg);
 background-position: 50% 50%;
}


.message-box .head {
 text-align: center;
 margin-top: 30px;
}


.message-box .head p {
 margin-top: 0;
 font-weight: 600;
}

.message-box .profile {
 border: 1px solid #ddd;
 padding: 40px;
 margin-top: 20px;
}

.message-box .profile p {
 margin-top: 0;
}

.message-box article {
 width: 550px;
 margin: 0 auto;
}

.message-box article .title {
 margin-top: 45px;
}

.message-box article .title.ex {
 margin-top: 0;
}


.message-box article img {
 margin: 45px auto;
}


/*----------------------------*/


.salon-page {
 margin: 0 auto;
}

.salon-page .tn {
 width: 650px;
 height: 400px;
 background-image: url(../img/salon-4.jpg);
 background-position: 50% 50%;
 display: block;
 margin: 0 auto;
 border-radius: 20px;
}


.salon-page .tn.mahaloco {
 background-image: url(../img/salon-mahaloco.jpg);
 background-position: 50% 50%;
}






.salon-page .logo {
 display: block;
 margin: 50px auto;
 height: 100px;
}

.salon-page .head {
 display: flex;
 align-items: center;
 justify-content: center;
}

.salon-page .region {
 margin-right: 10px;
}


.salon-page .name {
 font-size: 40px;
 font-weight: 600;
 letter-spacing: 0;
}


.salon-page .overview {
 width: 80%;
 margin: 0 auto;
 margin-bottom: 90px;
}


.salon-page .title {
 text-align: center;
 margin: 60px auto;
 margin-bottom: 30px;
}

.salon-page .info {
 text-align: center;
 margin-top: 10px;
}

.salon-page .info p {
 margin-top: 0;
}

.salon-page .info .tel {
 font-size: 30px;
 font-weight: 600;
 letter-spacing: 0;
}

.salon-page .info .tel i {
 font-size: 28px;
 margin-right: 5px;
}

.salon-page .info .hp {
 font-size: 14px;
 font-weight: normal;
}





.salon-page .owner {
 width: 800px;
 margin: 0 auto;
 margin-top: 60px;
}


.salon-page .owner .item {
 display: flex;
 align-items: center;
 margin-bottom: 90px;
}

.salon-page .owner img {
 width: 200px;
 margin-right: 50px;
}



.salon-page .staff-name {
 font-size: 24px;
 font-weight: 600;
 margin-top: 0;
 line-height: 1;

}

.salon-page .staff-name span {
 font-size: 16px;
 font-weight: 600;
}

.salon-page .staff-name span.ex {
 display: block;
 font-size: 24px;
 font-weight: 600;
 margin-top: 10px;
 line-height: 1;
}




.salon-page .staff {
 display: flex;
 align-items: flex-start;
 justify-content: space-between;
 flex-wrap: wrap;
 margin-top: 45px;
}

.salon-page .staff .item {
 display: flex;
 align-items: flex-start;
 margin-bottom: 60px;
 width: 47%;
}

.salon-page .staff img {
 width: 130px;
 margin-right: 20px;
}





.salon-page .border {
 width: 50px;
 height: 1px;
 background: #ddd;
 margin: 60px auto;
}







.salon-page .career {
 margin-top: 0;
 font-size: 15px;
}


.salon-page .feature {
 margin: 0 auto;
 margin-top: 90px;

}


.cont-feature {
 width: 800px;
 margin: 0 auto;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}

.cont-feature .item {
 width: 380px;
 margin-top: 40px;
}

.cont-feature .item h3 {
 margin-top: 10px;
 font-size: 17px;
 font-weight: 600;
}



.cont-feature img {
 width: 380px;
 height: 250px;
 background: #ddd;
 object-fit: cover;
 border-radius: 20px;
 object-position: center;
}

.cont-feature .caption {
 font-size: 14px;
 line-height: 1.3;
 margin-top: 10px;
}






/*----------------------------*/

.header-top {
 height: 850px;
 background-image: url(../img/model-image-13-3.webp);
 background-size: 120%;
 background-position: 45% 40%;
 position: relative;
 padding: 30px;
 animation: zoomOut 15s linear forwards;
 transition: opacity 1.5s linear;
}




@keyframes zoomOut {
 0% {
  background-size: 150%;
 }

 100% {
  background-size: 120%;
 }
}

.fade-out {
 opacity: 0;
}

.fade-in {
 opacity: 1;
}



.header-top .catch {
 width: 1000px;
 position: absolute;
 top: 100px;
 bottom: 0;
 left: 0;
 right: 0;
 margin: auto;
}


.header-top .catch-2 {
 width: 100%;
 left: 0;
 right: 0;
 position: absolute;
 bottom: 0;
 margin: auto;
}


.header-top .menu {
 width: 300px;
}

.header-top .logo {
 width: 250px;
}

.header-top .menu a {
 display: block;
 margin-bottom: 20px;
 font-size: 18px;
 text-decoration: none;
 margin-left: 20px;
}


.header-top .menu a:first-child {
 margin-left: 0;
 margin-bottom: 30px;
}


.header-top .logo {
 width: 250px;
}

.header-top .menu i {
 margin-right: 10px;
 transition: margin-right 0.3s ease;
}

.header-top .menu a:hover i {
 margin-right: 5px;
 transition: margin-right 0.3s ease;
 /* スムーズなアニメーション */
}



/*----------------------------*/


.header-under .nav {
 display: flex;
 align-items: center;
 padding: 10px 15px;
}




.header-under .logo {
 width: 200px;
 margin-right: 20px;
}

.header-under a {
 margin-right: 30px;
 text-decoration: none
}



.under-visual {
 height: 150px;
 text-align: center;
 line-height: 150px;
 font-size: 30px;
 font-weight: 600;
 position: relative;
}

.under-visual img {
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 margin: auto;
 height: 90px;
}


.under-visual img.ex {
 top: 10px;
 height: 110px;
}









/*----------------------------*/


.btn-circle-wrap {
 display: flex;
 flex-direction: column;
 align-items: center;
 position: fixed;
 right: 30px;
 top: 30px;
 z-index: 2;
}




.btn-circle {
 display: flex;
 width: 150px;
 height: 150px;
 background: #fff;
 border-radius: 50%;
 text-align: center;
 align-items: center;
 justify-content: center;
 text-decoration: none;
 margin-bottom: 20px;
 border: 1px solid #ddd;
}



.btn-circle:hover {
 transform: scale(1.08);
 background: #735000;
 color: #fff;
}


.btn-circle.ex {
 width: 100px;
 height: 100px;
}


.btn-circle i {
 display: block;
 font-size: 45px;
 margin-bottom: 2px;
}

.btn-circle.ex i {
 font-size: 30px;
}


.btn-circle span {
 display: block;
 font-size: 16px;
 letter-spacing: 0px;
}


.btn-circle.ex span {
 font-size: 14px;
}



.btn-wrap {
 margin: 60px auto;
 display: flex;
 justify-content: center;
}


.btn-wrap.ex {
 margin-top: 30px;
 margin-bottom: 0;
 justify-content: flex-start;
}


.btn-border {
 text-align: center;
 display: block;
 width: 220px;
 height: 50px;
 line-height: 50px;
 background: #fff;
 text-decoration: none;
 border: 1px solid #000;
 border-radius: 20px;
}

.btn-border.small {
 width: 150px;
 height: 40px;
 line-height: 40px;
 font-size: 14px;
 margin-top: 12px;
}



.btn-border i {
 padding-left: 5px;
 transition: padding-left 0.3s ease;
 /* 通常時にも適用 */
}

.btn-border:hover i {
 padding-left: 10px;
 transition: padding-left 0.3s ease;
 /* スムーズなアニメーション */
}







.btn-bnr {
 background: #fff;
 text-decoration: none;
 padding: 15px 20px;
 border: 1px solid #000;
 border-radius: 10px;
 display: flex;
 justify-content: center;
 align-items: center;
 width: 310px;
 position: absolute;
 top: 600px;
}

.btn-bnr .info {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-left: 20px;
}

.btn-bnr i {
 margin-left: 20px;
}

.btn-bnr img {
 height: 40px
}



.btn-bnr.ex {
 width: auto;
 top: 690px;
}

.btn-bnr.ex img {
 height: 80px;
 position: absolute;
 left: 10px;
 bottom: 0;
}


.btn-bnr.ex .info {
 display: flex;
 flex-direction: column;
 align-items: center;
 margin-left: 125px;
}

.btn-bnr i {
 margin-left: 20px;
}


.relatve {
 position: relative;
}


.btn-entry {
 background: #fff;
 text-decoration: none;
 padding: 30px 0px;
 border-radius: 60px;
 display: flex;
 justify-content: center;
 align-items: center;
 width: 750px;
 margin: 0 auto;
 margin-top: 90px;
 background: #efe0be;
 background-image: url(../img/dark-mosaic.png);
 background-size: 200px 200px;
 background-blend-mode: multiply;
 position: relative;
}


.btn-entry img {
 height: 130px;
 position: absolute;
 left: 45px;
 bottom: 0;
}

.btn-entry .info {
 margin-left: 180px;
 margin-right: 20px;
}


.btn-entry span {
 display: block;
 text-align: center;
}


.btn-entry span:last-child {
 display: block;
 text-align: center;
 font-size: 24px;
 margin-top: 5px;
}



.btn-entry i {
 font-size: 24px;
}




/*----------------------------*/

.wrap-basic {
 width: 1100px;
 margin: 0 auto;
 padding: 90px 0;
}


.wrap-basic.ex {
 padding-top: 0;
}


.wrap-mid {
 width: 1200px;
 margin: 0 auto;
 padding: 90px 0;
}


.wrap-wide {
 width: 1400px;
 margin: 0 auto;
 padding: 90px 0;
}


.wrap-mid-2 {
 width: 800px;
 margin: 0 auto;
 padding: 90px 0;
}


.wrap-slim {
 width: 650px;
 margin: 0 auto;
 padding: 90px 0;
}


/*----------------------------*/


.cont-1 {
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 90px;
}

.cont-1.ex {
 flex-direction: row-reverse;
 margin-bottom: 0;
}


.cont-1 .tn {
 width: 46%;
 height: 350px;
 border-radius: 20px;
}

.cont-1 .info {
 width: 48%;
}

.cont-1.map {
 width: 900px;
 margin: 0 auto;
 flex-direction: row-reverse;
 margin-top: 60px;
 margin-bottom: 60px;
}

.cont-1.map .map-img {
 width: 58%;
 position: relative;
 background: inherit;

}

.map-img {
 position: absolute;
 top: 0;
 right: 0;
 width: 90%;
}

.map-img .badge {
 width: 150px;
 position: absolute;
 top: 5%;
 left: 20%;
}

.map-img .badge.ex {
 left: inherit;
 right: 5%;
 top: 65%;
}


.map-img .badge-2 {
 width: 150px;
 position: absolute;
 bottom: 0;
 right: 3%;
}




.map-img .pin {
 position: absolute;
 top: 10%;
 left: -5%;
 width: 90%;
}




.map-img .info {
 width: 40%;
}


.cont-2 {
 width: 1000px;
 margin: 0 auto;
 display: flex;
 justify-content: space-between;
}

.cont-2 .item {
 width: 22%;
}


.cont-2 .tn {
 height: 200px;
 border-radius: 20px;
}


.cont-3 {
 width: 800px;
 margin: 0 auto;
}

.cont-3 .item {
 display: flex;
 align-items: center;
}

.cont-3 .info {
 width: calc(100% - 300px);
}



.cont-3 .tn {
 width: 250px;
 height: 250px;
 border-radius: 20px;
 margin-right: 50px;
}


.cont-4 {
 margin: 0 auto;
 display: flex;
 justify-content: center;
 align-items: center;
 width: 700px;
 height: 550px;
 position: relative;
 margin-top: 90px;
}



.cont-pref {
 margin-top: 130px;
}

.cont-pref.ex {
 margin-top: 60px;
}



.cont-salon {
 display: flex;
 margin: 0 auto;
 flex-wrap: wrap;
 margin-bottom: 60px;
}


.cont-salon .item {
 padding-top: 60px;
 width: 520px;
 display: flex;
 justify-content: space-between;

}



.cont-salon .item:nth-child(2n) {
 margin-left: 60px;
}


.cont-salon .region {
 background: transparent;
}


.cont-salon .tn {
 width: 250px;
 height: 250px;
 border-radius: 20px;
}



.cont-salon .info {
 margin-top: 10px;
 margin-left: 20px;
 width: 250px;
}

.cont-salon .name {
 font-size: 20px;
 font-weight: 600;
 margin-top: 13px;
 margin-bottom: 10px;
}

.cont-salon p {
 display: block;
 font-size: 14px;
 color: #444;
 margin-top: 5px;
 line-height: 1.3;
}

.cont-salon .tel {
 font-size: 17px;
 font-weight: bold;
}

.cont-salon .tel i {}

.booking {
 display: block;
 font-size: 15px;
 font-weight: 500;
 margin-top: 5px;
}

.booking.ex {
 font-size: 18px;
 font-weight: 500;
 margin-bottom: 15px;
}


.booking i {
 margin-right: 3px;
}



/*----------------------------*/


.title-border {
 display: inline-block;
 font-weight: 600;
 font-size: 20px;
 padding-top: 10px;
 border-top: 1px solid #000;
 padding-bottom: 10px;
 border-bottom: 1px solid #000;
 padding-left: 10px;
 padding-right: 10px;
 margin-bottom: 30px;
}

.title-border.ex {
 margin-bottom: 0;
}



.title-large {
 letter-spacing: 0;
 font-size: 35px;
 font-weight: 600;
 line-height: 1.3;
}

.title-large.ex {
 margin-bottom: 60px;
}



.title-medium {
 letter-spacing: 0;
 font-size: 28px;
 font-weight: 600;
 line-height: 1.3;
}

.title-small {
 letter-spacing: 0;
 font-size: 18px;
 font-weight: 600;
 line-height: 1.3;
}



.txt-box {
 width: 650px;
 margin: 0 auto;
}


/*----------------------------*/

.fukidashi-wrap {
 margin: 60px auto;
 display: flex;
 justify-content: center;
 flex-wrap: wrap;
}



.fukidashi-wrap .item {
 width: 25%;
}


.fukidashi-wrap .head {
 width: 250px;
 margin-top: 30px;
 position: relative;
}

.fukidashi-wrap .fukidashi {
 width: 130px;
 position: absolute;
 top: -50px;
 left: -40px;
}

.fukidashi-wrap .woman {
 height: 150px;
 display: block;
 margin: 0 auto;
}

.fukidashi-wrap .info {
 text-align: center;
 margin-top: 20px;
}


.fukidashi-wrap .name {
 font-weight: 600;
 margin-bottom: 15px;
 font-size: 18px;
}


.fukidashi-wrap span {
 font-size: 14px;
}



.fukidashi-wrap-2 {
 width: 900px;
 margin: 60px auto;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}


.fukidashi-wrap-2.ex {
 margin-top: 0;
}



.fukidashi-wrap-2 .item {
 width: 46%;
 margin-bottom: 60px;
}




.fukidashi-wrap-2 .head {
 width: 330px;
 position: relative;
 margin-top: 30px;
 margin-left: 30px;
}

.fukidashi-wrap-2 .fukidashi {
 width: 140px;
 position: absolute;
 top: -20px;
 left: -50px;
}

.fukidashi-wrap-2 .woman {
 height: 230px;
 display: block;
 margin: 0 auto;
}

.fukidashi-wrap-2 .info {
 text-align: center;
 margin-top: 20px;
}

.fukidashi-wrap-2 .info p {
 text-align: left;
 font-size: 15px;
}



.fukidashi-wrap-2 .name {
 font-weight: 600;
 margin-bottom: 15px;
 font-size: 18px;
}


.fukidashi-wrap-2 span {
 font-size: 14px;
}










/*----------------------------*/


.question-wrap {
 margin: 60px auto;
 width: 650px;
}

.question-wrap.ex {
 margin-top: 0;
}


.question-wrap .item:not(:last-child) {
 margin-bottom: 60px;
}




.question-wrap span {
 font-size: 22px;
 font-weight: 600;
}

.question-wrap i {
 margin-right: 5px;
}


/*----------------------------*/


footer {
 padding: 30px 50px;
}


footer .inner {}

footer .logo {
 display: block;
 width: 250px;
}

footer .menu {
 margin-top: 30px;
 margin-left: auto;
}

footer .menu a {
 margin-right: 20px;
}


.copyright {
 font-size: 13px;
 letter-spacing: 0;
 color: #555;
}




iframe {
 width: 700px;
 height: 400px;
 display: block;
 margin: 0 auto;
}





i.bi-caret-down-fill {
 display: block;
 text-align: center;
 font-size: 30px;
 margin: 20px auto;
}



.area-list {
 width: 370px;
 position: absolute;
 top: -20px;
 left: 0;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}

.area-tag {
 display: block;
 width: 180px;
 height: 40px;
 text-align: center;
 line-height: 40px;
 border: 1px solid #000;
 border-radius: 10px;
 text-decoration: none;
 background: #fff;
 margin-bottom: 20px;
}

.area-tag i {
 padding-left: 5px;
}





table {
 width: 800px;
 margin: 0 auto;
 table-layout: fixed;
 word-break: break-all;
 word-wrap: break-all;
 border-collapse: separate;
 border-spacing: 20px 0px;
 padding-bottom: 60px;
 line-height: 1.5;
}



table th {
 border-bottom: solid 1px #313131;
 width: 30%;
 vertical-align: middle;
 text-align: center;
}

table td {
 border-bottom: solid 1px #EAEAEA;
 padding: 40px 60px;
 vertical-align: middle;
}



table td p {
 margin-bottom: 20px;
}



p.form {
 width: 600px;
 margin: 0 auto;
}


form {
 width: 75%;
 margin: 0 auto;
 font-size: 17px;
 margin-top: 30px;
}

form label {
 width: 100%;
 background: #efe0be;
 background-image: url(../img/rocky-wall.png);
 background-size: 200px 200px;
 background-blend-mode: multiply;
 text-align: center;
 height: 100px;
 font-weight: 600;
 display: flex;
 justify-content: center;
 align-items: center;
 width: 45%;
}

form .item {
 display: flex;
 margin: 0 auto;
 margin-bottom: 30px;
}

.item.message,
.item.radio {
 align-items: flex-start;
 height: auto;
}


form input {
 width: 55%;
 background: #fff;
 padding: 0 20px;
}

textarea {
 width: 55%;
 height: 200px;
 padding: 10px;
 font-size: 16px;
 background: #fff;
}


::placeholder {
 font-size: 16px;
 color: #bbb;
}

.message.label {
 height: 200px;
}


.label-btn {
 display: block;
 width: 40px;
 height: 20px;
 line-height: 20px;
 background: red;
 color: #fff;
 font-size: 12px;
 border-radius: 3px;
 margin-left: 10px;
}

.label-btn.ex {
 background: #eee;
 color: #999;
}


.radio .inner {
 width: 55%;
 padding: 30px 20px;
 font-weight: 500;
 background: #fff;
 height: 160px;
}

.radio .inner.ex {
 height: 240px;
}



.radio .inner div {
 display: flex;
 align-items: center;
 margin-bottom: 20px;
}

.radio .inner div:last-child {
 margin-bottom: 0;
}


.radio .inner input {
 display: block;
 width: 25px;
 background: #ddd;
}

.radio span {
 margin-left: 5px;
}


.radio.label {
 height: 160px;
}

.radio.label.ex {
 height: 240px;
}


form button {
 text-align: center;
 display: block;
 margin: 0 auto;
 background: #735000;
 color: #fff;
 width: 300px;
 height: 60px;
 font-size: 16px;
 font-weight: 500;
 border-radius: 50px;
 cursor: pointer;
 border: 0px;
 font-size: 18px;
 margin-top: 30px;
}


.pankuzu {
 padding-top: 30px;
 padding-left: 30px;
 color: #444;
}





img.entry {
 display: block;
 width: 800px;
 margin: 0 auto;
 margin-top: 30px;
 border-radius: 20px;
}





/*----------------------------*/

.anm-text span {
 opacity: 0;
 display: inline-block;
}


.anm-fade_up,
.anm-fade_left,
.anm-fade_right,
.anm-fade_down,
.anm-fade_here {
 opacity: 0;
}

.animated {
 opacity: 1;
}

.anm-fade_up {
 transform: translateY(30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}

.anm-fade_left {
 transform: translateX(-30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}

.anm-fade_right {
 transform: translateX(30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}

.anm-fade_down {
 transform: translateY(-30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}

.anm-fade_here {
 transform: translate(0);
 transition: opacity 0.8s ease, transform 0.8s ease;
}


.animated.anm-fade_up,
.animated.anm-fade_left,
.animated.anm-fade_right,
.animated.anm-fade_down,
.anm-fade_here {
 transform: translateY(0);

}

.animated.anm-fade_left {
 transform: translateX(0);
}

.animated.anm-fade_right {
 transform: translateX(0);
}

.animated.anm-fade_down {
 transform: translateY(0);
}







/*----------------------------*/



.under-line {
 position: relative;
 display: inline-block;
 text-decoration: none;
}

.under-line.ex {
 position: relative;
 display: inline-block;
 text-decoration: none;
}

.under-line::after {
 position: absolute;
 bottom: -9px;
 left: 0;
 content: '';
 width: 100%;
 height: 2px;
 background: #000;
 transform: scale(0, 1);
 transform-origin: center top;
 transition: transform .2s;
}

.under-line.ex::after {
 background: #000;
}

.under-line:hover::after {
 transform: scale(1, 1);
}




/*----------------------------*/


#pageTop {
 position: fixed;
 bottom: 20px;
 right: 20px;
 z-index: 9999;
}

#pageTop a {
 display: flex;
 justify-content: center;
 align-items: center;
 margin: 0;
 padding: 0;
 width: 50px;
 height: 50px;
 background: #532113;
 color: #fff;
 text-decoration: none;
 text-align: center;
 border-radius: 30px;
}

#pageTop i {
 font-size: 18px;
 font-weight: bold;
 margin-left: 3px;
}

#pageTop a:hover {
 text-decoration: none;
 opacity: 0.7;
}


/*----------------------------*/





.swiper {
 width: 100%;
 position: absolute;
 overflow: hidden;
 top: -50px;
 left: 0;
}

.swiper.ex2 {
 margin-bottom: 60px;
}

.swiper-wrapper {
 transition-timing-function: linear;
}

.swiper-slide {
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 text-align: center;
 text-decoration: none;
}

.swiper-slide img {
 display: block;
 height: 150px;
 width: 150px;
 object-fit: cover;
 border-radius: 50%;
 margin-bottom: 10px;
 background: #ddd;
}

.swiper-slide .salon-name {
 margin-top: 10px;
 font-size: 15px;
 font-weight: 400;
}



.region {
 font-size: 13px;
 border: 1px solid #000;
 background: #fff;
 padding: 2px 10px;
 padding-top: 4px;
 margin-top: -20px;
 color: #000;
 font-weight: 400;
}

.region.ex {
 font-size: 14px;
 margin-top: 5px;
}





.cta-box {
 width: 100%;
 margin: 0 auto;
 display: flex;
 justify-content: space-between;
 margin-top: 70px;
}


.cta-box .item {
 width: 48%;
 border: 5px solid #000;
 border-radius: 30px;
 padding: 60px;
 text-align: center;
 background-color: rgba(255, 255, 255, 0.6);
}


.cta-box .item img {
 display: block;
 margin: 30px auto;
}

.cta-box .item img.ex {
 max-width: 80%;
 margin-bottom: 0;
}




.cta-box .item p {
 text-align: left;
}

.cta-box .item p span {
 font-size: 13px;
}


.cta-box .item .link {
 margin-top: 30px;
}

.cta-box .item .link a {
 display: block;
 margin-bottom: 15px;
}

.cta-box .item .link a:last-child {
 margin-bottom: 0;
}



.thanks .wrap {
 width: 500px;
 height: 500px;
 position: absolute;
 top: 0;
 left: 0;
 bottom: 0;
 right: 0;
 margin: auto;
 color: #fff;
 display: flex;
 justify-content: center;
 align-items: center;

}

.thanks .inner {
 text-align: center;
}

.thanks .inner img {
 width: 70%;
 margin-top: 60px;
}

.thanks .inner h2 {
 font-size: 40px;
 font-weight: bold;
 color: #000;
}

.thanks .inner a {
 display: block;
 font-weight: bold;
 margin-top: 20px;
 color: #000;
}









.sp {
 display: none;
}

.tab {
 display: none;
}

.pc {
 display: block;
}