@charset "UTF-8";
/*///////////////////////////////////////////////////////////// BOTTOM COMMON */



/* TOP VISUAL */

#topvisual{
  background-color: #fffef5;
  width: 100% ;
  height: auto;
  display: block;
}
#topvisual #visual-logo{
  text-align: center;
  padding: 7% 0;
}
#topvisual #visual-logo img{
  width: 50%;
  height: auto;
  max-width: 270px;
}

/* message */

section#message{
	margin-bottom: 50px;
}
section#message #message-txt{
  background-image:url(/common/images/bgs.jpg);
  background-repeat:repeat;
  background-position:bottom center;
  padding: 5%;
  box-sizing: border-box;
}
#notes section#message,
#contact section#message{
  margin-bottom: 0px;
}
#contact section#message #message-txt{
  background-image:url(/common/images/bgs4_.gif);
}
#contact #backtop,
#notes #backtop{
  padding: 50px 0;
  background-color: #dfd7cb;
}
#contact #backtop #btns,
#notes #backtop #btns {
  width: 250px;
  margin: 0 auto;
  text-align: center;
}
#contact #backtop #btns a,
#notes #backtop #btns a{
  background-color: #21b3ca;
  color: #ffffff;
  text-decoration: none;
  padding:20px 0;
  display: block;
  border-radius: 10px;
  border: solid 1px #21b3ca;
}
#contact #backtop #btns a:hover,
#notes #backtop #btns a:hover{
  color: #ffffff;
  text-decoration: underline;
  background-color: #5dd2e4;
  border: solid 1px #21b3ca;
  text-decoration: none;
}
#contact  #contactinner{
  background-color: #fff;
  padding:2%;
  max-width: 1082px;
  margin: 0 auto
}
#notes section#message #message-txt{
  background-image:url(/common/images/bgs3.gif);
}

section#message #message-txt #txt{
  text-align: center;
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 5%;
  max-width: 750px;
  height: 100% auto;
  margin: 0 auto;
  border-radius: 10px;
}
section#message #message-txt #txt .txtbox{
  font-size: clamp(14px, 1vw, 16px);
  letter-spacing: 0.15em;
  line-height: 2.2em;
  margin-bottom: 5%;
}



#notes section#message #message-txt .notesbox{
  background-color: #ffffff;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 5%;
  max-width: 750px;
  height: 100% auto;
  margin: 0 auto;
  border-radius: 10px;
}
#notes section#message #message-txt .notesbox p{
  letter-spacing: 0.15em;
  font-size: clamp(18px, 1vw, 22px);
  line-height: 2em;
  margin-bottom: 30px;
}
#notes section#message #message-txt .notesbox .notes-cat{
  font-weight: bold;
  margin-bottom: 20px;
  font-size: clamp(18px, 1vw, 22px);
  background-color: #790a0a;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 5px;
  color: #ffffff;
  letter-spacing: 0.1em;
}
#notes section#message #message-txt .notesbox ul {
  padding-left: 20px;
}
#notes section#message #message-txt .notesbox ul li{
  list-style-type: disc;
  list-style-position: outside;
  margin-bottom: 20px;
  line-height: 1.3em;
}
/* Information */

section#information #info-block{
  width: 96%;
  margin: 0 auto;
  /*font-size: clamp(12px, 2vw, 14px);*/
  line-height: 1.8em;
}

#info-block dl{
  width: 96%;
  border-bottom: dotted 1px #000;
  display: block;
  padding-bottom: 30px;
  margin:0 auto 30px;

}
#info-block dl dt{
  width: 100%;
  padding-bottom: 30px;
}
#info-block dl dt .infodays{
  font-weight: bold;
  box-sizing: border-box;
  margin-bottom: 10px;
}
#info-block dl dt .infotit{
  font-weight: bold;
  letter-spacing: 0.1em;
}
#info-block dl dd{
  display: block;
  clear: both;
}
#info-block dl dd .inbnr{
  padding: 20px 0;
}
#info-block dl dd .inbnr img{
  max-width: 500px;
  width: 100%;
  height: auto
}

#about-salon  .as-info{
  width: 90%;
  margin: 0 auto;
}
#therapist{
  width: 100%;
  margin-bottom:50px;
  text-align: center;
}
#therapist #ph-therapist {
  text-align: center;
  margin-bottom: 20px;
}
#therapist #ph-therapist img{
  width: 50%;
  height: auto;
  max-width: 270px;
}
#therapist dl#about-therapist{
  text-align: center;
}
#therapist dl#about-therapist dt{
  padding-bottom: 10px;
}
#about-salon  .as-info table{
  width: 100%;
  border:solid 1px #000;
  border-collapse: collapse;
  margin-bottom: 50px;
}
#about-salon  .as-info table th{
  width: 30%;
  padding: 2%;
  box-sizing: border-box;
  text-align: center;
  background-color: #dfd7cb;
  border-bottom:solid 1px #000;
  border-right:solid 1px #000;
  vertical-align: middle;
}
#about-salon  .as-info table td{
  width: 70%;
  padding: 2%;
  box-sizing: border-box;
  text-align: left;
  border-bottom:solid 1px #000;
  line-height: 1.4em
}
#about-salon  .as-info table td #imgpay img{
  width: 100%;
  max-width: 600px;
  height: auto;
}
/* bnr */
section#bnrarea{
  margin-bottom: 50px;
}
section#bnrarea ul{
  width: 100%;
}
section#bnrarea ul li {
  width: 90%;
  margin: 0 auto 15px;
}
section#bnrarea ul li,
section#bnrarea ul li a{
  display: block;
  border-radius: 3px;
}
section#bnrarea ul li img,
section#bnrarea ul li a img{
  width: 60%;
  height: 0 auto;
  display: block;
  margin: 0 auto;
}

/* menu */

#area-lomi{
   background-image:url(/common/images/bg_lomilomi.gif); 
}
#area-netra{
   background-image:url(/common/images/bg_netra.gif); 
}
#area-head{
   background-image:url(/common/images/bg_head.gif); 
}
.menuarea{
  width:100%;
  background-repeat:repeat;
  background-position:bottom center;
  box-sizing: border-box;
  padding-bottom: 50px
}
.menuarea .areatit{
  text-align: center;
  font-size: clamp(40px, 3vw, 50px);
  padding: 30px 0;
  border-top:solid 2px #fff;
  border-bottom:solid 2px #fff;
}
#area-lomi .areatit{
  background-color: #06dabc;
}
#area-netra .areatit{
  background-color: #ea7500;
}
#area-head .areatit{
  background-color: #f08686;
}
.menuarea .areatit .areatit-t{
  /*font-family: "balloon-urw", sans-serif;*/
  letter-spacing: 1px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #fff
}
.menuarea .areatit .areatit-b{
  font-size: clamp(18px, 3vw, 20px);
  color: #fff
}
section#menu .menubox{
  width: 96%;
  max-width: 1082px;
  margin:50px auto 0;
  letter-spacing: 0.15em;
  line-height: 1.4em;
  background-color: #ffffff;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 50px 0;
}

section#menu .menubox .menu-info{
  width: 90%;
  margin: 0 auto 20px;
  font-size: clamp(14px, 2vw, 16px);
  letter-spacing: 0.3em;
  line-height: 2.2em;
}
section#menu .menubox .menutitbox h3.menutitle{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: clamp(38px, 2vw, 60px);
  font-weight: bold;
  letter-spacing: 0.15em;
  transform: translate(-50%,-50%);
}

section#menu .menubox .menulist{
  width: 92%;
  margin: 0 auto 20px;
  padding-bottom: 30px;
  text-align: center;
  background-color: #f0eb45;
  padding:2% 0;
  border-radius: 3px;
  box-sizing: border-box;
}
section#menu .menubox .menulist .list-detail{
  font-size: clamp(16px, 2vw, 18px);
  font-weight: bolder;
  letter-spacing: 1px;
}
section#menu .menubox .menulist .list-info{
  width: 90%;
  margin:30px auto 0; 
  font-size: clamp(12px, 2vw, 14px);
  line-height: 1.8em;
}
section#menu .menubox ul.menu-eff{
  width: 90%;
  margin:30px auto; 

}
section#menu .menubox ul.menu-eff li{
  display: inline-block;
  list-style: none;
  color: #ffffff;
  background-color:#ef488d;
  padding: 5px;
  margin-bottom: 5px;
  border-radius: 3px;
}
section#menu .menubox .menu-notes{
  width: 90%;
  margin:30px auto;
  border:solid 1px #333333;
  padding:2%;
  box-sizing: border-box;
  border-radius: 3px;
  background-color: red;
}
section#menu .menubox .menu-notes .notestit{
  font-size: clamp(16px, 2vw, 18px);
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 40px;
  text-align: center;
}
section#menu .menubox .menu-notes .notestit span{
  padding: 0 0 0.2em 0.2em;
  border-bottom: solid 1px #000;
}
section#menu .menubox .menu-notes ul li{
  font-size: clamp(14px, 2vw, 16px);
  display: block;
  margin-bottom: 15px;
  line-height: 1.8em;
  list-style-type: disc;
  list-style-position: inside;
}

section#reservation{
    background-color: #21b3ca;
    color: #ffffff;
    padding: 50px 0;
}
section#reservation #res-inner{
    width: 96%;
    max-width: 1082px;
    margin: 0 auto;
    letter-spacing: 0.15em;
    line-height: 1.8em;
    padding: 1% 0;
    text-align: center;
    font-size: clamp(18px, 2vw, 22px);
}
section#reservation #res-inner a{
  color:#8f0084
}


section .icon-tit{
  width: 100%;
  text-align: center;
}
section .icon-tit img{
  width: 35px;
  height: auto;
}

.bp10{
  padding-bottom: 10px;
}
.bp20{
  padding-bottom: 20px;
}
.tp10{
  padding-top: 10px;
}
.tp20{
  padding-top: 20px;
}
.txt-c{
  text-align: center;
}

.spbr{
    display: none;
}

/*square form*/

#square-form{
  width: 94%;
  margin: 0 auto;
  border: solid 1px #fff;
  border-radius: 10px;
  padding: 3%;
  box-sizing: border-box;
}

@media screen and (max-width:585px) {

  #square-form{
    width: 96%;
    margin: 0 auto
    border: solid 1px #fff;
    border-radius: 10px;
    padding: 2%;
    box-sizing: border-box;
  }
}


/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:585px) {
    .spbr{
        display: block;
    }
    .sptxt{
        display: block;
    }
    section#reservation #res-list{
      width: 100%;
    }
    section#reservation #res-list ul li{
      width: 100%;
      text-align: center;
      float: none;
      box-sizing: border-box;
    }
}