@charset "UTF-8";
#header span.tel { font-size: 1.8em; font-weight: bold; vertical-align: middle; margin-right: 1em; margin-left: 5px; letter-spacing: 2px; }

#header a.h-con { display: inline-block; padding: .5em 1em; border-radius: 30px; border: 1px solid #2c75d9; color: #2c75d9; -webkit-transition: 1s all ease; transition: 1s all ease; }

#header a.h-con:hover { background: #2c75d9; color: #fff; }

#header a.h-con i { padding-right: 10px; font-size: 1.2em; }

#mainImg p.catchcopy { position: absolute; width: 50%; left: 0; right: 0; top: 12%; color: #3e396f; padding: 10% 0; line-height: 1.8; margin: auto; z-index: 999; font-size: 1.3em; font-size: 1.3vw; font-weight: bold; background: url(../images/main_top.png) no-repeat top center, url(../images/main_bottom.png) no-repeat bottom center; }

#mainImg p.catchcopy span { font-size: 1.5em; }

.section { padding: 3em 0; }

.section h2.title, .section h3 { text-align: center; font-weight: bold; margin-bottom: 2em; }

.section h2.title span, .section h3 span { padding-bottom: 5px; border-bottom: 3px solid #2c75d9; }

.section p.btn { text-align: center; }

.section p.btn a { display: inline-block; padding: .5em 3em; margin-top: 2em; background: #2c75d9; color: #fff; text-shadow: 1px 1px 1px #666; }

.section p.btn a:hover { opacity: .8; }

.section.greeting { padding-bottom: 3em; }

.section.greeting p { width: 80%; margin: 0 auto; }

.section.t-about .inner-box { position: relative; }

.section.t-about .inner-box .inner-text { position: absolute; width: 45%; height: 80%; right: 5%; top: 0; bottom: 0; margin: auto; padding: 2em; -webkit-box-sizing: border-box; box-sizing: border-box; background: #fff; }

.section.t-torikumi .inner-box { position: relative; }

.section.t-torikumi .inner-box .inner-text { position: absolute; width: 45%; height: 80%; left: 5%; top: 0; bottom: 0; margin: auto; padding: 2em; -webkit-box-sizing: border-box; box-sizing: border-box; background: #fff; }

.section.t-news { background: #f4f4f4; }

.section.t-access .map { margin-bottom: -5em; }

.section.t-access .t-contact { max-width: 1060px; width: 85%; margin: 0 auto; position: relative; padding: 3em 5em; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #ccc; background: #fff; }

.section.t-access .t-contact > p { text-align: center; margin-bottom: 2em; }

.section.t-access .t-contact table th { font-weight: bold; width: 30%; text-align: center; padding: 5px 0; }

.section.t-access .t-contact span.tel { font-size: 2.5em; font-weight: bold; vertical-align: middle; letter-spacing: 5px; margin-left: 5px; }

a.scrollbtn {
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-decoration: none;
  color: #fff;
}
a.scrollbtn {
  padding-top: 60px;
}
a.scrollbtn span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 30px;
  height: 50px;
  margin-left: -15px;
  border: 2px solid #fff;
  border-radius: 50px;
  box-sizing: border-box;
}
a.scrollbtn span::before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 6px;
  height: 6px;
  margin-left: -3px;
  background-color: #fff;
  border-radius: 100%;
  -webkit-animation: sdb 2s infinite;
  animation: sdb 2s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* 下層 */
.breadcrumbs { padding-bottom: 30px; }

.page h2.title.first, .archive h2.title.first, .single h2.title.first { margin-bottom: 1em; padding: 0.5em 0; font-size: 1.8em; color: #fff; padding-left: 20px; background:#2c75d9; }

.page ol, .archive ol, .single ol { margin-left: 1.5em; }

.page ol li, .archive ol li, .single ol li { padding: 10px 0; }

.page ul, .page ol, .archive ul, .archive ol, .single ul, .single ol { padding-bottom: 15px; }

.page div.flex_box div.flex, .archive div.flex_box div.flex, .single div.flex_box div.flex { padding-bottom: 15px; text-align: center; }

.page div.flex_box div.flex img, .archive div.flex_box div.flex img, .single div.flex_box div.flex img { display: block; margin: 5px auto; }

.page caption, .archive caption, .single caption { text-align: left; font-weight: bold; margin-bottom: 10px; }

/* salon list */
.loop_box{
  margin-bottom: 1em;
  border: 2px solid #ccc;
}
.loop_box h3{
  padding: 5px;
  background: #2c75d9;
  color: #fff;
}
.loop_box dl{
  width: 100%;
  display: table;
  padding: 5px;
}
.loop_box dl dt,
.loop_box dl dd{
  display: table-cell;
  vertical-align: middle;
}
.loop_box dl dt{
  border-right: 1px solid #ccc;
  vertical-align: text-top;
  width: 180px;
}
.loop_box dl dd{
  padding-left: 1em;
}
.loop_box a{
  color: #2c75d9;
  text-decoration: underline;
}
.list_area a:hover{
  text-decoration: none;
}
.list_area a.backBtn{
  display: table;
  margin: 1em auto;
  height: 50px;
  line-height: 50px;
  width: 98%;
  max-width: 300px;
  text-align: center;
  background-color: #2c75d9;
  color: #fff;
  -moz-transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  transition: 0.3s ease;
}
.loop_box a.backBtn:hover{
  background-color: #333;
}
.search_area ul.list{
  width: 100%;
}
.search_area ul.list li{
  display: inline-block;
}
.search_area ul.list li input[type="submit"]{
  color: #fff;
}
.search_area .title{
  padding-left: 1em;
  font-weight: bold;
  color: #2c75d9;
}
.search_area input[type="submit"]{
  margin: 5px;
  padding: 5px;
  border-radius: 5px;
}