@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;700&display=swap");
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Common
# Header
# Content
    ## Toppage
    ## Blog
# Footer
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Common
--------------------------------------------------------------*/
html {
  font-size: 2.13333vw;
}

@media (min-width: 768px) {
  html {
    font-size: 1.33333vw;
  }
}

@media (min-width: 1200px) {
  html {
    font-size: 16px;
  }
}

body {
  width: 100%;
  margin: 0 auto;
  font-family: "游明朝", "Yu Mincho", YuMincho, "Hiragino Mincho ProN", "Hiragino Mincho Pro", "HGS明朝E", "メイリオ", Meiryo, serif;
  font-size: 3.73333vw;
  line-height: 1.6;
  color: #000000;
  letter-spacing: 1px;
}

@media (min-width: 768px) {
  body {
    font-size: 1.16667vw;
  }
}

@media (min-width: 1200px) {
  body {
    font-size: 14px;
  }
}

ul, ol {
  list-style: none;
}

a {
  text-decoration: none;
  color: #000000;
}

img {
  max-width: 100%;
  width: auto;
  height: auto;
}

.aligncenter {
  display: block;
  margin: 0 auto 1.0rem;
}

@media (min-width: 768px) {
  .alignleft {
    float: left;
    margin: 0 1.0rem 1.0rem 0;
  }
}

@media (min-width: 768px) {
  .alignright {
    float: right;
    margin: 0 0 1.0rem 1.0rem;
  }
}

.hidden-phone {
  display: none;
}

@media (min-width: 768px) {
  .hidden-phone {
    display: inherit;
  }
}

.visible-phone {
  display: inherit;
}

@media (min-width: 768px) {
  .visible-phone {
    display: none;
  }
}

.inner {
  width: 92%;
  max-width: 1100px;
  margin: 0 auto;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
header {
  position: relative;
  background-color: #ffffff;
}

@media (max-width: 767px) {
  header {
    position: fixed;
    width: 100%;
    z-index: 10;
  }
}

header #logo {
  text-align: center;
  padding: 1.0rem 0;
}

header #logo a {
  display: inline-block;
}

header #logo img {
  display: block;
  width: 58.66667vw;
  margin: 0 auto;
}

@media (min-width: 768px) {
  header #logo img {
    width: 36.66667vw;
    max-width: 440px;
  }
}

header #menu {
  position: absolute;
  right: 1.0rem;
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
  width: 2.0rem;
  height: 2.0rem;
}

header #menu .inside {
  position: relative;
  height: 100%;
}

header #menu .inside span {
  display: block;
  background: #000;
  height: 3px;
  width: 100%;
  position: absolute;
  left: 0;
  transition-duration: 200ms;
}

header #menu .inside span:first-child {
  top: 0;
}

header #menu .inside span:last-child {
  bottom: 0;
}

header #menu .inside span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

nav#main-navi {
  position: absolute;
  font-family: "Cinzel", serif;
  font-weight: 500;
}

@media (max-width: 767px) {
  nav#main-navi {
    position: fixed;
    width: 100%;
    top: 14.4vw;
    left: 0;
    display: none;
    background-color: #ffffff;
    z-index: 10;
    font-size: 4vw;
  }
}

@media (min-width: 768px) {
  nav#main-navi {
    font-size: 1.5vw;
    top: 0;
    right: 0;
    display: table;
  }
}

@media (min-width: 1200px) {
  nav#main-navi {
    right: calc((100vw - 1200px) / 2);
    font-size: 18px;
  }
}

nav#main-navi ul.main-menu {
  border-top: #c9c9c9 1px solid;
}

@media (min-width: 768px) {
  nav#main-navi ul.main-menu {
    display: none;
  }
}

nav#main-navi ul.main-menu li {
  display: block;
  border-bottom: #c9c9c9 1px solid;
}

nav#main-navi ul.main-menu li a {
  display: block;
  color: #000000;
  padding: 1.0rem;
  text-align: center;
}

nav#main-navi #youtube {
  background-color: #ff0000;
}

@media (min-width: 768px) {
  nav#main-navi #youtube {
    display: table-cell;
    vertical-align: middle;
  }
}

nav#main-navi #youtube a {
  display: block;
  color: #ffffff;
  padding: 1.0rem;
  text-align: center;
}

nav#main-navi #reserve {
  background-color: #000000;
}

@media (min-width: 768px) {
  nav#main-navi #reserve {
    display: table-cell;
    vertical-align: middle;
  }
}

nav#main-navi #reserve a {
  display: block;
  color: #ffffff;
  padding: 1.0rem;
  text-align: center;
}

nav#pc-navi {
  display: none;
}

@media (min-width: 768px) {
  nav#pc-navi {
    display: block;
    border-top: 1px solid #000000;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
  }
}

nav#pc-navi ul li {
  display: inline-block;
  vertical-align: middle;
}

nav#pc-navi ul li a {
  font-family: 'Cinzel', serif;
  font-weight: 500;
  display: block;
  padding: 1.5em 1.0em;
  font-size: 1.5vw;
}

@media (min-width: 1200px) {
  nav#pc-navi ul li a {
    font-size: 18px;
  }
}

/*--------------------------------------------------------------
# main
--------------------------------------------------------------*/
main {
  max-width: 1200px;
  margin: 0 auto 3.0rem;
}

@media (max-width: 767px) {
  main {
    padding-top: 22.13333vw;
  }
}

@media (min-width: 768px) {
  main {
    margin-bottom: 6.0rem;
  }
}

/*--------------------------------------------------------------
# toppage
--------------------------------------------------------------*/
#top main #mv {
  width: 100%;
  margin-bottom: 2.0rem;
}

@media (min-width: 768px) {
  #top main #mv {
    margin-bottom: 4.0rem;
  }
}

#top main #special {
  border: 1px solid #000000;
  width: 100%;
  padding: 1.0em;
  margin: 0 auto 3.0rem;
}

@media (min-width: 768px) {
  #top main #special {
    width: 70%;
    padding: 2.0em;
    margin-bottom: 5.0rem;
  }
}

#top main #special h2 {
  text-align: center;
  color: #d90000;
  margin-bottom: 0.5em;
}

#top main ul#main-contents {
  margin-bottom: 4.0rem;
}

@media (min-width: 768px) {
  #top main ul#main-contents {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 7.0rem;
  }
  #top main ul#main-contents::after {
    content: '';
    width: 45%;
  }
}

#top main ul#main-contents li {
  width: 100%;
  margin: 0 auto 3.5rem;
  text-align: center;
}

@media (min-width: 768px) {
  #top main ul#main-contents li {
    width: 45%;
    margin: 0 0 4.0rem;
  }
}

#top main ul#main-contents li figure img {
  display: block;
  margin: 0;
}

#top main ul#main-contents li dl dt {
  line-height: 1.0;
  margin: 1.0rem 0 0.5rem;
  font-size: 6.4vw;
}

@media (min-width: 768px) {
  #top main ul#main-contents li dl dt {
    font-size: 2.5vw;
  }
}

@media (min-width: 1200px) {
  #top main ul#main-contents li dl dt {
    font-size: 30px;
  }
}

#top main ul#main-contents li dl dd {
  line-height: 1.0;
  font-size: 3.46667vw;
}

@media (min-width: 768px) {
  #top main ul#main-contents li dl dd {
    font-size: 1.08333vw;
  }
}

@media (min-width: 1200px) {
  #top main ul#main-contents li dl dd {
    font-size: 13px;
  }
}

#top main #column {
  margin-bottom: 7.0rem;
}

@media (min-width: 768px) {
  #top main #column {
    margin-bottom: 7.0rem;
  }
}

#top main #column h2 {
  text-align: center;
  font-weight: bold;
  margin-bottom: 1.5rem;
  font-size: 6.4vw;
}

@media (min-width: 768px) {
  #top main #column h2 {
    font-size: 2.5vw;
  }
}

@media (min-width: 1200px) {
  #top main #column h2 {
    font-size: 30px;
  }
}

@media (min-width: 768px) {
  #top main #column ul {
    display: flex;
    justify-content: space-between;
  }
}

#top main #column ul li {
  margin: 0 0 2.0rem;
}

@media (min-width: 768px) {
  #top main #column ul li {
    width: 32%;
  }
}

#top main #column ul li p.date, #top main #column ul li h4 {
  font-size: 90%;
  font-weight: normal;
}

#top main #column ul li h3 {
  font-size: 4vw;
}

@media (min-width: 768px) {
  #top main #column ul li h3 {
    font-size: 1.33333vw;
  }
}

@media (min-width: 1200px) {
  #top main #column ul li h3 {
    font-size: 16px;
  }
}

#top main #column p.more {
  text-align: center;
}

#top main #salons {
  margin-bottom: 4.0rem;
}

@media (min-width: 768px) {
  #top main #salons {
    margin-bottom: 7.0rem;
  }
}

#top main #salons h2 {
  text-align: center;
  font-size: 6.4vw;
}

@media (min-width: 768px) {
  #top main #salons h2 {
    font-size: 2.5vw;
  }
}

@media (min-width: 1200px) {
  #top main #salons h2 {
    font-size: 30px;
  }
}

#top main #salons h2 + p {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 3.46667vw;
}

@media (min-width: 768px) {
  #top main #salons h2 + p {
    font-size: 1.08333vw;
  }
}

@media (min-width: 1200px) {
  #top main #salons h2 + p {
    font-size: 13px;
  }
}

@media (min-width: 768px) {
  #top main #salons ul {
    display: flex;
    justify-content: space-between;
  }
}

#top main #salons ul li {
  text-align: center;
  margin-bottom: 3.0rem;
}

@media (min-width: 768px) {
  #top main #salons ul li {
    margin-bottom: 0;
    width: 47%;
  }
}

#top main #salons ul li figure {
  width: 100%;
  margin-bottom: 1.0rem;
}

#top main #salons ul li figure img {
  display: block;
  margin: 0;
}

#top main #salons ul li h3 {
  margin-bottom: 1.5rem;
  font-size: 4.26667vw;
}

@media (min-width: 768px) {
  #top main #salons ul li h3 {
    font-size: 1.66667vw;
  }
}

@media (min-width: 1200px) {
  #top main #salons ul li h3 {
    font-size: 20px;
  }
}

#top main #movie {
  width: 96%;
  max-width: 540px;
  margin: 0 auto 2.0rem;
}

@media (min-width: 768px) {
  #top main #movie {
    margin-bottom: 4.0rem;
  }
}

#top main #movie .movie_outer {
  width: 100%;
  height: 0;
  padding-bottom: 177.777777%;
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

@media (min-width: 768px) {
  #top main #movie .movie_outer {
    width: 540px;
  }
}

#top main #movie .movie_outer video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*--------------------------------------------------------------
# 下層ページ
--------------------------------------------------------------*/
body:not(#top) main > h2 {
  width: 100%;
  padding: 6.5rem 0;
  margin-bottom: 3.0rem;
  background-position: 50% 50%;
  background-size: auto 100%;
  text-align: center;
  color: #ffffff;
  font-family: "Cinzel", serif;
  font-weight: 700;
  font-size: 6.66667vw;
}

@media (min-width: 768px) {
  body:not(#top) main > h2 {
    padding: 5.0rem 0;
    margin-bottom: 5.0rem;
    background-size: 100% auto;
    font-size: 2.5vw;
  }
}

@media (min-width: 1200px) {
  body:not(#top) main > h2 {
    font-size: 30px;
  }
}

body:not(#top) main .content .wp-pagenavi {
  text-align: center;
}

body:not(#top) main .content .wp-pagenavi > * {
  display: inline-block;
  line-height: 1.0;
  padding: 0.5em;
  border-radius: 0.5rem;
  position: relative;
  background: #c9c9c9;
  color: #000000;
  text-decoration: none;
  vertical-align: middle;
  margin: 0 0.1em;
  font-size: 4.26667vw;
}

@media (min-width: 768px) {
  body:not(#top) main .content .wp-pagenavi > * {
    font-size: 1.41667vw;
  }
}

@media (min-width: 1200px) {
  body:not(#top) main .content .wp-pagenavi > * {
    font-size: 17px;
  }
}

body:not(#top) main .content .wp-pagenavi .current {
  background: #6A6A6A;
  color: #ffffff;
}

body:not(#top) main .content .pageNate {
  text-align: center;
}

body:not(#top) main .content .pageNate li {
  display: inline-block;
  line-height: 1.0;
  padding: 0.5em;
  border-radius: 0.5rem;
  position: relative;
  background: #c9c9c9;
  text-decoration: none;
  vertical-align: middle;
  margin: 0 0.1em;
  font-size: 4.26667vw;
}

@media (min-width: 768px) {
  body:not(#top) main .content .pageNate li {
    font-size: 1.41667vw;
  }
}

@media (min-width: 1200px) {
  body:not(#top) main .content .pageNate li {
    font-size: 17px;
  }
}

body:not(#top) main .content .pageNate li a {
  color: #000000;
}

body:not(#top) main .content .pageNate li.slick-active {
  background: #6A6A6A;
  color: #ffffff;
}

body:not(#top) main .content .pageNate li.slick-active a {
  color: #ffffff;
}

body:not(#top) main .content .btn a {
  display: block;
  background-color: #000000;
  color: #ffffff;
  line-height: 1.0;
  padding: 0.75em 0;
  text-align: center;
  font-size: 3.73333vw;
}

@media (min-width: 768px) {
  body:not(#top) main .content .btn a {
    font-size: 1.33333vw;
  }
}

@media (min-width: 1200px) {
  body:not(#top) main .content .btn a {
    font-size: 16px;
  }
}

body:not(#top) main .content .btn a i {
  content: '';
  display: inline-block;
  margin-right: 1.0em;
  height: 1.0em;
  width: 1.5em;
  vertical-align: middle;
  background-image: url("./images/icon_reserve.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%;
}

body:not(#top) main .content .btn a span {
  vertical-align: middle;
}

/*--------------------------------------------------------------
# MENU
--------------------------------------------------------------*/
#menu main > h2 {
  background-image: url("./images/menu_title.jpg");
}

#menu main .content > h3 {
  text-align: center;
  margin-bottom: 2.0rem;
  font-size: 6.66667vw;
}

@media (min-width: 768px) {
  #menu main .content > h3 {
    font-size: 2.66667vw;
  }
}

@media (min-width: 1200px) {
  #menu main .content > h3 {
    font-size: 32px;
  }
}

#menu main .content article {
  margin-bottom: 3.0rem;
}

@media (min-width: 768px) {
  #menu main .content article {
    max-width: 720px;
    margin: 0 auto 4.0rem;
  }
}

#menu main .content article h3 {
  background-color: #333333;
  color: #ffffff;
  line-height: 1.0;
  padding: 0.5em 4%;
  font-weight: normal;
  text-align: left;
  font-size: 3.73333vw;
}

@media (min-width: 768px) {
  #menu main .content article h3 {
    font-size: 1.16667vw;
    padding: 1.0rem 2.0rem;
  }
}

@media (min-width: 1200px) {
  #menu main .content article h3 {
    font-size: 14px;
  }
}

#menu main .content article h3 span {
  margin-right: 1.0em;
}

#menu main .content article > .notice {
  font-size: 90%;
  padding: 1.5rem 4% 0;
}

@media (min-width: 768px) {
  #menu main .content article > .notice {
    padding: 1.5rem 2.0rem 0;
  }
}

#menu main .content article ul li {
  border-bottom: 1px solid #999999;
  padding: 1.5rem 4%;
}

@media (min-width: 768px) {
  #menu main .content article ul li {
    padding: 1.5rem 2.0rem;
  }
}

#menu main .content article ul li dl {
  display: table;
  width: 100%;
}

#menu main .content article ul li dl dt {
  display: table-cell;
  vertical-align: top;
  text-align: left;
  font-weight: bold;
}

#menu main .content article ul li dl dd {
  display: table-cell;
  vertical-align: top;
  text-align: right;
  font-weight: bold;
}

#menu main .content article ul li .notice {
  color: #333333;
  font-size: 90%;
  padding-top: 1.0rem;
}

/*--------------------------------------------------------------
# COUPON
--------------------------------------------------------------*/
#coupon main > h2 {
  background-image: url("./images/coupon_title.jpg");
}

#coupon main .content > h3 {
  text-align: center;
  margin-bottom: 2.0rem;
  font-size: 6.66667vw;
}

@media (min-width: 768px) {
  #coupon main .content > h3 {
    font-size: 2.66667vw;
  }
}

@media (min-width: 1200px) {
  #coupon main .content > h3 {
    font-size: 32px;
  }
}

#coupon main .content .nav ul {
  display: flex;
  justify-content: center;
  margin-bottom: 2.0rem;
}

@media (min-width: 768px) {
  #coupon main .content .nav ul {
    margin-bottom: 3.5rem;
  }
}

#coupon main .content .nav ul li {
  border: 1px solid #c9c9c9;
  margin: 0 0.5rem;
}

#coupon main .content .nav ul li a {
  display: block;
  padding: 1.0em 2.0em 1.0em 1.0em;
  line-height: 1.0;
  background-image: url("./images/arrow.png");
  background-position: calc(100% - 0.5em) center;
  background-repeat: no-repeat;
  background-size: 1em auto;
  font-size: 3.46667vw;
}

@media (min-width: 768px) {
  #coupon main .content .nav ul li a {
    font-size: 1.08333vw;
  }
}

@media (min-width: 1200px) {
  #coupon main .content .nav ul li a {
    font-size: 13px;
  }
}

#coupon main .content article {
  margin-bottom: 3.0rem;
}

@media (min-width: 768px) {
  #coupon main .content article {
    max-width: 720px;
    margin: 0 auto 4.0rem;
  }
}

#coupon main .content article ul.coupons > li {
  background-color: #F8F8F8;
  padding: 1.5rem 4%;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  #coupon main .content article ul.coupons > li {
    padding: 2.0rem 4.0rem;
    margin-bottom: 2.5rem;
  }
}

#coupon main .content article ul.coupons > li .label {
  background-color: #D1D1D1;
  text-align: center;
  color: #ffffff;
  font-weight: bold;
  line-height: 2.5;
  margin-bottom: 1.5rem;
  font-size: 4vw;
}

@media (min-width: 768px) {
  #coupon main .content article ul.coupons > li .label {
    font-size: 1.25vw;
  }
}

@media (min-width: 1200px) {
  #coupon main .content article ul.coupons > li .label {
    font-size: 15px;
  }
}

#coupon main .content article ul.coupons > li ul.icon {
  margin-bottom: 1.5rem;
}

#coupon main .content article ul.coupons > li ul.icon li {
  background-color: #E4393A;
  color: #ffffff;
  text-align: center;
  display: inline-block;
  line-height: 1.0;
  padding: 0.5em 1.0em;
  border-radius: 0.5em;
  font-size: 80%;
  margin-bottom: 0.5em;
}

#coupon main .content article ul.coupons > li ul.icon li:not(:last-child) {
  margin-right: 0.5em;
}

#coupon main .content article ul.coupons > li hgroup {
  margin-bottom: 2.0rem;
}

#coupon main .content article ul.coupons > li hgroup h3 {
  font-size: 4vw;
}

@media (min-width: 768px) {
  #coupon main .content article ul.coupons > li hgroup h3 {
    font-size: 1.25vw;
  }
}

@media (min-width: 1200px) {
  #coupon main .content article ul.coupons > li hgroup h3 {
    font-size: 15px;
  }
}

#coupon main .content article ul.coupons > li hgroup p {
  text-align: right;
}

#coupon main .content article ul.coupons > li dl {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

#coupon main .content article ul.coupons > li dl dt {
  width: 32%;
}

#coupon main .content article ul.coupons > li dl dd {
  width: 60%;
  font-size: 3.2vw;
}

@media (min-width: 768px) {
  #coupon main .content article ul.coupons > li dl dd {
    font-size: 1vw;
  }
}

@media (min-width: 1200px) {
  #coupon main .content article ul.coupons > li dl dd {
    font-size: 12px;
  }
}

/*--------------------------------------------------------------
# HAIR STYLE
--------------------------------------------------------------*/
#style main > h2 {
  background-image: url("./images/style_title.png");
}

#style main .intro {
  background-color: #F8F8F8;
  width: 92%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 4.0rem;
  padding: 3.0rem;
}

@media (min-width: 768px) {
  #style main .intro {
    padding: 3.0rem 4.5rem;
    margin-bottom: 7.0rem;
  }
}

#style main .intro dl dt {
  font-weight: bold;
  color: #6A6A6A;
  position: relative;
  margin-bottom: 1.0rem;
  font-size: 5.33333vw;
}

@media (min-width: 768px) {
  #style main .intro dl dt {
    font-size: 1.66667vw;
  }
}

@media (min-width: 1200px) {
  #style main .intro dl dt {
    font-size: 20px;
  }
}

#style main .intro dl dt::before {
  position: absolute;
  left: -0.5em;
  background: #6A6A6A;
  width: 0.25em;
  height: 1.5em;
  display: block;
  content: '';
}

#style main .intro dl dd ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 3.0rem;
}

#style main .intro dl dd ul li {
  text-align: center;
  width: 33.3333%;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  #style main .intro dl dd ul li {
    width: 20%;
  }
}

#style main .intro dl dd ul li a {
  font-size: 3.73333vw;
}

@media (min-width: 768px) {
  #style main .intro dl dd ul li a {
    font-size: 2.4vw;
  }
}

@media (min-width: 1200px) {
  #style main .intro dl dd ul li a {
    font-size: 18px;
  }
}

#style main .intro dl dd ul.tags {
  display: block;
}

#style main .intro dl dd ul.tags li {
  display: inline-block;
  padding: 0.5em;
  margin: 0 0.5em 1.0em 0;
  border: 1px solid #999999;
  width: auto;
  line-height: 1.0;
  font-size: 3.46667vw;
}

@media (min-width: 768px) {
  #style main .intro dl dd ul.tags li {
    font-size: 1.16667vw;
  }
}

@media (min-width: 1200px) {
  #style main .intro dl dd ul.tags li {
    font-size: 14px;
  }
}

#style main .intro dl.txtSearch dd .flex {
  display: flex;
}

#style main .intro dl.txtSearch dd .flex input, #style main .intro dl.txtSearch dd .flex button {
  display: block;
  line-height: 1.0;
}

#style main .intro dl.txtSearch dd .flex input {
  border: 1px solid #999999;
  padding: 0.25em 0.5em;
  flex-grow: 1;
  margin-right: 1.0rem;
}

#style main .intro dl.txtSearch dd .flex button img {
  height: 2.0em;
  width: auto;
}

#style main .catalog h2 {
  text-align: center;
  font-family: "Cinzel", serif;
  font-weight: 700;
  margin-bottom: 3.0rem;
  font-size: 6.66667vw;
}

@media (min-width: 768px) {
  #style main .catalog h2 {
    margin-bottom: 5.0rem;
    font-size: 2.5vw;
  }
}

@media (min-width: 1200px) {
  #style main .catalog h2 {
    font-size: 30px;
  }
}

#style main .catalog ul.styles {
  width: 92%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#style main .catalog ul.styles li {
  width: 32%;
  margin-bottom: 2.0rem;
  margin-right: 2%;
}

#style main .catalog ul.styles li:nth-of-type(3n) {
  margin-right: 0;
}

@media (min-width: 768px) {
  #style main .catalog ul.styles li {
    width: 23.5%;
    margin-right: 2%;
  }
  #style main .catalog ul.styles li:nth-of-type(3n) {
    margin-right: 2%;
  }
  #style main .catalog ul.styles li:nth-of-type(4n) {
    margin-right: 0;
  }
}

#style main .catalog ul.styles li dl dt {
  width: 100%;
  height: 0;
  overflow: hidden;
  position: relative;
  padding-bottom: 133.333333%;
  margin-bottom: 0.5rem;
}

#style main .catalog ul.styles li dl dt img {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  max-width: 9999px;
  height: 100%;
  transform: translateX(-50%);
}

#style main .catalog ul.styles li dl dd {
  font-size: 3.73333vw;
}

@media (min-width: 768px) {
  #style main .catalog ul.styles li dl dd {
    font-size: 1.33333vw;
  }
}

@media (min-width: 1200px) {
  #style main .catalog ul.styles li dl dd {
    font-size: 16px;
  }
}

#style.single main .content .summary {
  width: 100%;
  max-width: 760px;
  margin: 0 auto 3.0rem;
  padding: 0 10%;
}

@media (min-width: 768px) {
  #style.single main .content .summary {
    margin-bottom: 5.0rem;
  }
}

#style.single main .content .summary figure {
  margin: 0 2.0rem 0.5rem;
}

#style.single main .content .summary ul#thumbnail {
  display: flex;
  margin-bottom: 1.5rem;
}

#style.single main .content .summary ul#thumbnail li {
  width: 32%;
  margin-right: 2%;
}

#style.single main .content .summary ul#thumbnail li:nth-of-type(3n) {
  margin-right: 0;
}

#style.single main .content .summary dl dt {
  font-weight: bold;
  margin-bottom: 1.5rem;
  font-size: 4.8vw;
}

@media (min-width: 768px) {
  #style.single main .content .summary dl dt {
    font-size: 1.66667vw;
  }
}

@media (min-width: 1200px) {
  #style.single main .content .summary dl dt {
    font-size: 20px;
  }
}

#style.single main .content .summary dl dd {
  font-size: 3.46667vw;
}

@media (min-width: 768px) {
  #style.single main .content .summary dl dd {
    font-size: 1.08333vw;
  }
}

@media (min-width: 1200px) {
  #style.single main .content .summary dl dd {
    font-size: 13px;
  }
}

#style.single main .content .summary dl dd p {
  margin-bottom: 1.5em;
}

#style.single main .content .summary table {
  width: 100%;
  border-top: #c9c9c9 1px solid;
  border-collapse: collapse;
  margin-bottom: 2.0rem;
}

@media (min-width: 768px) {
  #style.single main .content .summary table {
    margin-bottom: 4.0rem;
  }
}

#style.single main .content .summary table th {
  text-align: left;
  color: #333333;
  border-bottom: #c9c9c9 1px solid;
  padding: 0.5em 1.0em;
  font-weight: bold;
  font-size: 4vw;
}

@media (min-width: 768px) {
  #style.single main .content .summary table th {
    font-size: 1.25vw;
  }
}

@media (min-width: 1200px) {
  #style.single main .content .summary table th {
    font-size: 15px;
  }
}

#style.single main .content .summary table td {
  text-align: left;
  color: #333333;
  border-bottom: #c9c9c9 1px solid;
  padding: 0.5em 1.0em;
  font-size: 4vw;
}

@media (min-width: 768px) {
  #style.single main .content .summary table td {
    font-size: 1.25vw;
  }
}

@media (min-width: 1200px) {
  #style.single main .content .summary table td {
    font-size: 15px;
  }
}

#style.single main .content .reccomend {
  width: 100%;
  max-width: 760px;
  margin: 0 auto 3.0rem;
  padding: 3.0rem 10%;
  background-color: #F8F8F8;
  color: #6A6A6A;
}

@media (min-width: 768px) {
  #style.single main .content .reccomend {
    margin-bottom: 5.0rem;
  }
}

#style.single main .content .reccomend h3 {
  margin-bottom: 1.0rem;
  font-size: 5.33333vw;
}

@media (min-width: 768px) {
  #style.single main .content .reccomend h3 {
    font-size: 2.16667vw;
  }
}

@media (min-width: 1200px) {
  #style.single main .content .reccomend h3 {
    font-size: 26px;
  }
}

#style.single main .content .reccomend dl {
  font-size: 4.8vw;
}

@media (min-width: 768px) {
  #style.single main .content .reccomend dl {
    font-size: 1.33333vw;
  }
}

@media (min-width: 1200px) {
  #style.single main .content .reccomend dl {
    font-size: 16px;
  }
}

#style.single main .content .reccomend dl dt {
  font-weight: bold;
}

#style.single main .content .reccomend dl.shape {
  border-bottom: #c9c9c9 1px solid;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
}

#style.single main .content .reccomend dl.shape dt {
  margin-right: 1.5rem;
}

#style.single main .content .reccomend dl.shape dd ul {
  display: flex;
  margin-bottom: 0;
}

#style.single main .content .reccomend dl.shape dd ul li {
  margin-right: 1.5rem;
}

#style.single main .content .reccomend dl.shape dd ul li img {
  height: 2.0em;
}

#style.single main .content .reccomend dl.length {
  border-bottom: #c9c9c9 1px solid;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

#style.single main .content .reccomend dl.length dt {
  margin-bottom: 1.0rem;
}

#style.single main .content .reccomend dl.length dd ul {
  display: flex;
  flex-wrap: wrap;
}

#style.single main .content .reccomend dl.length dd ul li {
  margin-right: 1.0rem;
  margin-bottom: 1.0rem;
  font-size: 3.73333vw;
}

@media (min-width: 768px) {
  #style.single main .content .reccomend dl.length dd ul li {
    font-size: 1.86667vw;
  }
}

@media (min-width: 1200px) {
  #style.single main .content .reccomend dl.length dd ul li {
    font-size: 14px;
  }
}

#style.single main .content .reccomend dl.length dd ul li::before {
  content: '';
  width: 1.0rem;
  height: 1.0rem;
  margin-right: 0.5rem;
  display: inline-block;
  background-color: #c9c9c9;
  vertical-align: middle;
}

@media (min-width: 768px) {
  #style.single main .content .reccomend dl.length dd ul li::before {
    width: 0.6rem;
    height: 0.6rem;
  }
}

#style.single main .content .reccomend dl.length dd ul li.on::before {
  background-color: #6A6A6A;
}

#style.single main .content .reccomend .wrap {
  border-bottom: #c9c9c9 1px solid;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
}

#style.single main .content .reccomend .wrap dl {
  width: calc(50% - 10px);
}

@media (min-width: 768px) {
  #style.single main .content .reccomend .wrap dl {
    width: 48%;
  }
}

#style.single main .content .reccomend .wrap dl dt {
  margin-bottom: 1.0rem;
}

#style.single main .content .reccomend .wrap dl dd {
  display: flex;
}

#style.single main .content .reccomend .wrap dl dd span {
  display: block;
  width: 24%;
  background: #c9c9c9;
  color: #000000;
  text-align: center;
  padding: 0.1em 0;
  margin: 0 1% 0 0;
  font-size: 3.2vw;
}

@media (min-width: 768px) {
  #style.single main .content .reccomend .wrap dl dd span {
    font-size: 1vw;
  }
}

@media (min-width: 1200px) {
  #style.single main .content .reccomend .wrap dl dd span {
    font-size: 12px;
  }
}

#style.single main .content .reccomend .wrap dl dd span.on {
  background-color: #999999;
}

#style.single main .content .reccomend .wrap dl dd span.label {
  text-align: left;
  background-color: transparent;
}

#style.single main .content .reccomend .wrap dl dd span.label:last-of-type {
  text-align: right;
}

#style.single main .content .staff {
  width: 100%;
  max-width: 760px;
  margin: 0 auto 3.0rem;
  padding: 3.0rem 10%;
}

@media (min-width: 768px) {
  #style.single main .content .staff {
    margin-bottom: 5.0rem;
    border: 2px solid #000000;
  }
}

#style.single main .content .staff .cont {
  display: flex;
  justify-content: space-between;
}

#style.single main .content .staff .cont figure {
  width: 33%;
}

#style.single main .content .staff .cont .info {
  width: 61%;
}

#style.single main .content .staff .cont .info h3 {
  margin-bottom: 1.0rem;
  font-size: 5.33333vw;
}

@media (min-width: 768px) {
  #style.single main .content .staff .cont .info h3 {
    font-size: 2.25vw;
  }
}

@media (min-width: 1200px) {
  #style.single main .content .staff .cont .info h3 {
    font-size: 27px;
  }
}

#style.single main .content .staff .cont .info dl {
  margin-bottom: 1.0rem;
}

#style.single main .content .staff .cont .info dl dt {
  color: #6A6A6A;
  font-size: 3.2vw;
}

@media (min-width: 768px) {
  #style.single main .content .staff .cont .info dl dt {
    font-size: 1vw;
  }
}

@media (min-width: 1200px) {
  #style.single main .content .staff .cont .info dl dt {
    font-size: 12px;
  }
}

#style.single main .content .staff .cont .info dl dd {
  font-size: 3.2vw;
}

@media (min-width: 768px) {
  #style.single main .content .staff .cont .info dl dd {
    font-size: 1vw;
  }
}

@media (min-width: 1200px) {
  #style.single main .content .staff .cont .info dl dd {
    font-size: 12px;
  }
}

#style.single main .content .staff .cont .info p {
  margin-bottom: 2.0rem;
  font-size: 3.46667vw;
}

@media (min-width: 768px) {
  #style.single main .content .staff .cont .info p {
    font-size: 1.08333vw;
  }
}

@media (min-width: 1200px) {
  #style.single main .content .staff .cont .info p {
    font-size: 13px;
  }
}

#style.single main .content .staff .view {
  text-align: center;
  margin: 0 auto;
  width: 8.0em;
  background-color: #000000;
  line-height: 2.4;
}

#style.single main .content .staff .view a {
  color: #ffffff;
  display: block;
}

/*--------------------------------------------------------------
# STAFF
--------------------------------------------------------------*/
#staff main > h2 {
  background-image: url("./images/staff_title.jpg");
}

#staff main .content > h3 {
  text-align: center;
  margin-bottom: 2.0rem;
  font-size: 6.66667vw;
}

@media (min-width: 768px) {
  #staff main .content > h3 {
    font-size: 2.66667vw;
  }
}

@media (min-width: 1200px) {
  #staff main .content > h3 {
    font-size: 32px;
  }
}

#staff main .content article {
  width: 100%;
  margin-bottom: 3.0rem;
}

@media (min-width: 768px) {
  #staff main .content article {
    max-width: 760px;
    margin: 0 auto 4.0rem;
  }
}

#staff main .content article h4 {
  border-top: 1px solid #6A6A6A;
  border-bottom: 1px solid #6A6A6A;
  text-align: center;
  font-family: "Cinzel", serif;
  font-weight: 500;
  padding: 1.0rem 0;
  margin-bottom: 1.5rem;
  line-height: 1.0;
  font-size: 5.33333vw;
}

@media (min-width: 768px) {
  #staff main .content article h4 {
    font-size: 1.75vw;
  }
}

@media (min-width: 1200px) {
  #staff main .content article h4 {
    font-size: 21px;
  }
}

#staff main .content article ul.staff_list {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

#staff main .content article ul.staff_list::after {
  content: '';
  display: block;
  width: 40%;
}

#staff main .content article ul.staff_list li {
  width: 40%;
  margin-bottom: 2.0rem;
  text-align: center;
}

#staff main .content article ul.staff_list li figure {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 133.333333%;
  margin-bottom: 1.0rem;
}

#staff main .content article ul.staff_list li figure img {
  position: absolute;
  width: auto;
  height: 100%;
  max-width: 9999px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

#staff main .content article ul.staff_list li p.name {
  margin-bottom: 0.5rem;
  font-size: 6.4vw;
}

@media (min-width: 768px) {
  #staff main .content article ul.staff_list li p.name {
    font-size: 2.25vw;
  }
}

@media (min-width: 1200px) {
  #staff main .content article ul.staff_list li p.name {
    font-size: 27px;
  }
}

#staff main .content article ul.staff_list li p.rome {
  color: #6A6A6A;
  font-size: 3.46667vw;
}

@media (min-width: 768px) {
  #staff main .content article ul.staff_list li p.rome {
    font-size: 1.16667vw;
  }
}

@media (min-width: 1200px) {
  #staff main .content article ul.staff_list li p.rome {
    font-size: 14px;
  }
}

#staff main .content article ul.staff_list li p.job {
  font-size: 3.73333vw;
}

@media (min-width: 768px) {
  #staff main .content article ul.staff_list li p.job {
    font-size: 1.33333vw;
  }
}

@media (min-width: 1200px) {
  #staff main .content article ul.staff_list li p.job {
    font-size: 16px;
  }
}

#staff main .cal_outer {
  max-width: 760px;
  min-width: 300px;
  margin: 2.0rem auto;
}

#staff.single .content .summary {
  width: 100%;
  margin-bottom: 3.0rem;
  padding: 0 6%;
  text-align: center;
}

@media (min-width: 768px) {
  #staff.single .content .summary {
    max-width: 760px;
    margin: 0 auto 4.0rem;
  }
}

#staff.single .content .summary figure {
  margin-bottom: 2.0rem;
}

@media (min-width: 768px) {
  #staff.single .content .summary figure {
    margin-bottom: 3.0rem;
  }
}

#staff.single .content .summary h3 {
  margin-bottom: 0.5rem;
  font-size: 6.4vw;
}

@media (min-width: 768px) {
  #staff.single .content .summary h3 {
    font-size: 2.25vw;
  }
}

@media (min-width: 1200px) {
  #staff.single .content .summary h3 {
    font-size: 27px;
  }
}

#staff.single .content .summary p.rome {
  color: #6A6A6A;
  font-size: 3.46667vw;
}

@media (min-width: 768px) {
  #staff.single .content .summary p.rome {
    font-size: 1.16667vw;
  }
}

@media (min-width: 1200px) {
  #staff.single .content .summary p.rome {
    font-size: 14px;
  }
}

#staff.single .content .summary p.job {
  font-size: 3.73333vw;
}

@media (min-width: 768px) {
  #staff.single .content .summary p.job {
    font-size: 1.33333vw;
  }
}

@media (min-width: 1200px) {
  #staff.single .content .summary p.job {
    font-size: 16px;
  }
}

#staff.single .content .detail {
  width: 100%;
  margin-bottom: 3.0rem;
  padding: 3.0rem 6%;
  background-color: #F8F8F8;
}

@media (min-width: 768px) {
  #staff.single .content .detail {
    max-width: 760px;
    margin: 0 auto 4.0rem;
  }
}

#staff.single .content .detail h3 {
  text-align: center;
  margin-bottom: 1.0rem;
  font-size: 6.66667vw;
}

@media (min-width: 768px) {
  #staff.single .content .detail h3 {
    font-size: 2.66667vw;
  }
}

@media (min-width: 1200px) {
  #staff.single .content .detail h3 {
    font-size: 32px;
  }
}

#staff.single .content .detail h4 {
  text-align: center;
  margin-bottom: 2.0rem;
  font-size: 5.33333vw;
}

@media (min-width: 768px) {
  #staff.single .content .detail h4 {
    font-size: 1.66667vw;
  }
}

@media (min-width: 1200px) {
  #staff.single .content .detail h4 {
    font-size: 20px;
  }
}

#staff.single .content .detail .comment {
  margin-bottom: 2.0rem;
}

#staff.single .content .detail dl dt {
  border-bottom: 1px solid #c9c9c9;
  padding-left: 0.5rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 4.53333vw;
}

@media (min-width: 768px) {
  #staff.single .content .detail dl dt {
    font-size: 1.5vw;
  }
}

@media (min-width: 1200px) {
  #staff.single .content .detail dl dt {
    font-size: 18px;
  }
}

#staff.single .content .detail dl dd {
  padding-left: 0.5rem;
  margin-bottom: 1.5rem;
}

#style.single main .content .catalog, #staff.single main .content .catalog {
  width: 92%;
  max-width: 760px;
  margin: 0 auto 3.0rem;
}

@media (min-width: 768px) {
  #style.single main .content .catalog, #staff.single main .content .catalog {
    margin-bottom: 5.0rem;
  }
}

#style.single main .content .catalog hgroup, #staff.single main .content .catalog hgroup {
  text-align: center;
  margin-bottom: 2.0rem;
}

@media (min-width: 768px) {
  #style.single main .content .catalog hgroup, #staff.single main .content .catalog hgroup {
    margin-bottom: 4.0rem;
  }
}

#style.single main .content .catalog hgroup h3, #staff.single main .content .catalog hgroup h3 {
  font-size: 5.33333vw;
}

@media (min-width: 768px) {
  #style.single main .content .catalog hgroup h3, #staff.single main .content .catalog hgroup h3 {
    font-size: 2.16667vw;
  }
}

@media (min-width: 1200px) {
  #style.single main .content .catalog hgroup h3, #staff.single main .content .catalog hgroup h3 {
    font-size: 26px;
  }
}

#style.single main .content .catalog hgroup p, #staff.single main .content .catalog hgroup p {
  font-size: 3.46667vw;
}

@media (min-width: 768px) {
  #style.single main .content .catalog hgroup p, #staff.single main .content .catalog hgroup p {
    font-size: 1.08333vw;
  }
}

@media (min-width: 1200px) {
  #style.single main .content .catalog hgroup p, #staff.single main .content .catalog hgroup p {
    font-size: 13px;
  }
}

#style.single main .content .catalog #style-slide .styles, #staff.single main .content .catalog #style-slide .styles {
  width: 92%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

#style.single main .content .catalog #style-slide .styles .item, #staff.single main .content .catalog #style-slide .styles .item {
  width: 32%;
  margin-bottom: 2.0rem;
  margin-right: 2%;
}

#style.single main .content .catalog #style-slide .styles .item:nth-of-type(3n), #staff.single main .content .catalog #style-slide .styles .item:nth-of-type(3n) {
  margin-right: 0;
}

@media (min-width: 768px) {
  #style.single main .content .catalog #style-slide .styles .item, #staff.single main .content .catalog #style-slide .styles .item {
    width: 23.5%;
    margin-right: 2%;
  }
  #style.single main .content .catalog #style-slide .styles .item:nth-of-type(3n), #staff.single main .content .catalog #style-slide .styles .item:nth-of-type(3n) {
    margin-right: 2%;
  }
  #style.single main .content .catalog #style-slide .styles .item:nth-of-type(4n), #staff.single main .content .catalog #style-slide .styles .item:nth-of-type(4n) {
    margin-right: 0;
  }
}

#style.single main .content .catalog #style-slide .styles .item a, #staff.single main .content .catalog #style-slide .styles .item a {
  display: block;
  width: 100%;
  height: 0;
  overflow: hidden;
  position: relative;
  padding-bottom: 133.333333%;
  margin-bottom: 0.5rem;
}

#style.single main .content .catalog #style-slide .styles .item a img, #staff.single main .content .catalog #style-slide .styles .item a img {
  position: absolute;
  top: 0;
  left: 50%;
  width: auto;
  max-width: 9999px;
  height: 100%;
  transform: translateX(-50%);
}

/*--------------------------------------------------------------
# STYLE RANKING
--------------------------------------------------------------*/
#ranking main > h2 {
  background-image: url("./images/style_title.png");
}

#ranking main .content > h3 {
  text-align: center;
  margin-bottom: 2.0rem;
  font-size: 6.66667vw;
}

@media (min-width: 768px) {
  #ranking main .content > h3 {
    font-size: 2.66667vw;
  }
}

@media (min-width: 1200px) {
  #ranking main .content > h3 {
    font-size: 32px;
  }
}

#ranking main .content .summary {
  margin-bottom: 3.0rem;
}

#ranking main .content ul {
  width: 92%;
  max-width: 760px;
  margin: 0 auto 3.0rem;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

#ranking main .content ul li {
  width: 46%;
  margin: 0 2% 2.0em;
}

@media (min-width: 768px) {
  #ranking main .content ul li {
    width: 20%;
    margin: 0 2.5% 3.0em;
  }
}

#ranking main .content ul li h3 {
  margin-bottom: 0.5rem;
  font-size: 3.73333vw;
}

@media (min-width: 768px) {
  #ranking main .content ul li h3 {
    font-size: 1.16667vw;
  }
}

@media (min-width: 1200px) {
  #ranking main .content ul li h3 {
    font-size: 14px;
  }
}

#ranking main .content ul li h4 {
  margin-bottom: 1.0rem;
  font-size: 3.73333vw;
}

@media (min-width: 768px) {
  #ranking main .content ul li h4 {
    font-size: 1.16667vw;
  }
}

@media (min-width: 1200px) {
  #ranking main .content ul li h4 {
    font-size: 14px;
  }
}

#ranking main .content ul li .text {
  margin-bottom: 1.0rem;
}

#ranking main .content ul li a.photo {
  display: block;
  width: 100%;
  height: 0;
  padding-bottom: 133.333333%;
  overflow: hidden;
  position: relative;
  margin-bottom: 0.5rem;
}

#ranking main .content ul li a.photo img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  max-width: 9999px;
  height: 100%;
}

#ranking main .content ul li a.detail {
  display: block;
  width: 100%;
  background: #000000;
  color: #ffffff;
  border-radius: 0.25em;
  text-align: center;
  padding: 0.25em 0;
  text-decoration: none;
  font-size: 90%;
}

#ranking main .content ul li:nth-of-type(-n+3) {
  width: 100%;
  margin: 0 0 2.0em;
}

@media (min-width: 768px) {
  #ranking main .content ul li:nth-of-type(-n+3) {
    width: 31.333333%;
    margin: 0 1.0% 3.0em;
  }
}

#ranking main .content ul li:nth-of-type(-n+3) h3 {
  font-size: 4.8vw;
}

@media (min-width: 768px) {
  #ranking main .content ul li:nth-of-type(-n+3) h3 {
    font-size: 1.66667vw;
  }
}

@media (min-width: 1200px) {
  #ranking main .content ul li:nth-of-type(-n+3) h3 {
    font-size: 20px;
  }
}

#ranking main .content ul li:nth-of-type(1) h3 {
  color: #bea032;
}

#ranking main .content ul li:nth-of-type(2) h3 {
  color: #a0a0a0;
}

#ranking main .content ul li:nth-of-type(3) h3 {
  color: #be5332;
}

/*--------------------------------------------------------------
# RESERVE
--------------------------------------------------------------*/
#reserve main > h2 {
  background-image: url("./images/reserve_title.jpg");
}

#reserve main .content {
  width: 92%;
  margin: 0 auto 3.0rem;
}

@media (min-width: 768px) {
  #reserve main .content {
    max-width: 760px;
    margin: 0 auto 4.0rem;
  }
}

#reserve main .content h3 {
  border-top: 1px solid #6A6A6A;
  border-bottom: 1px solid #6A6A6A;
  text-align: center;
  font-family: "Cinzel", serif;
  font-weight: 500;
  padding: 1.0rem 0;
  margin-bottom: 1.5rem;
  line-height: 1.0;
  font-size: 5.33333vw;
}

@media (min-width: 768px) {
  #reserve main .content h3 {
    font-size: 1.75vw;
  }
}

@media (min-width: 1200px) {
  #reserve main .content h3 {
    font-size: 21px;
  }
}

#reserve main .content p {
  margin-bottom: 2.0rem;
}

#reserve main .content p.center {
  text-align: center;
  font-size: 4.8vw;
}

@media (min-width: 768px) {
  #reserve main .content p.center {
    font-size: 1.5vw;
  }
}

@media (min-width: 1200px) {
  #reserve main .content p.center {
    font-size: 18px;
  }
}

#reserve main .content p.btn {
  width: 100%;
  max-width: 640px;
  margin: 0 auto 2.0rem;
  padding: 0.5rem;
  background-color: #000000;
}

#reserve main .content p.btn a {
  display: block;
  border: 2px solid #ffffff;
  text-align: center;
  line-height: 1.0;
  padding: 1.5em 0;
  color: #ffffff;
  font-size: 5.33333vw;
}

@media (min-width: 768px) {
  #reserve main .content p.btn a {
    font-size: 1.66667vw;
  }
}

@media (min-width: 1200px) {
  #reserve main .content p.btn a {
    font-size: 20px;
  }
}

#reserve main .content ul {
  width: 22.0em;
  margin: 0 auto 2.0em;
  list-style: disc;
}

/*--------------------------------------------------------------
# BLOG,COLUMN,INFO
--------------------------------------------------------------*/
#blog main > h2 {
  background-image: url("./images/blog_title.png");
}

#blog main .flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 960px;
}

#blog main .flex .content {
  width: 100%;
  margin-bottom: 3.0rem;
}

@media (min-width: 768px) {
  #blog main .flex .content {
    width: 67%;
  }
}

#blog main .flex .content h3 {
  text-align: center;
  margin-bottom: 2.0rem;
  font-size: 5.33333vw;
}

@media (min-width: 768px) {
  #blog main .flex .content h3 {
    font-size: 2.08333vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex .content h3 {
    font-size: 25px;
  }
}

#blog main .flex .content ul.articles {
  margin: 0 auto 2.0rem;
  width: 90%;
}

@media (min-width: 768px) {
  #blog main .flex .content ul.articles {
    width: 100%;
  }
}

#blog main .flex .content ul.articles li {
  margin-bottom: 1.5rem;
}

#blog main .flex .content ul.articles li a {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

#blog main .flex .content ul.articles li a figure {
  width: 45%;
  height: calc(92vw * 0.9 * 0.45 * 0.75);
  overflow: hidden;
  position: relative;
}

@media (min-width: 768px) {
  #blog main .flex .content ul.articles li a figure {
    width: 24.33333vw;
    height: 18.25vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex .content ul.articles li a figure {
    width: 292px;
    height: 219px;
  }
}

#blog main .flex .content ul.articles li a figure img {
  position: absolute;
  width: 100%;
  height: auto;
  max-height: 999px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#blog main .flex .content ul.articles li a dl {
  width: 50%;
}

@media (min-width: 768px) {
  #blog main .flex .content ul.articles li a dl {
    width: calc(100% - 26.83333vw);
  }
}

@media (min-width: 1200px) {
  #blog main .flex .content ul.articles li a dl {
    width: calc(100% - 322px);
  }
}

#blog main .flex .content ul.articles li a dl dt {
  color: #6A6A6A;
  margin-bottom: 0.5rem;
  font-size: 4.26667vw;
}

@media (min-width: 768px) {
  #blog main .flex .content ul.articles li a dl dt {
    font-size: 1.66667vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex .content ul.articles li a dl dt {
    font-size: 20px;
  }
}

#blog main .flex .content ul.articles li a dl dd {
  color: #333333;
  font-size: 4.26667vw;
}

@media (min-width: 768px) {
  #blog main .flex .content ul.articles li a dl dd {
    font-size: 1.66667vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex .content ul.articles li a dl dd {
    font-size: 20px;
  }
}

#blog main .flex .content .blogCont {
  padding: 0 12%;
  margin-bottom: 4.0rem;
  font-size: 3.46667vw;
}

@media (min-width: 768px) {
  #blog main .flex .content .blogCont {
    font-size: 1.33333vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex .content .blogCont {
    font-size: 16px;
  }
}

#blog main .flex .content .blogCont .date {
  margin-bottom: 1.0rem;
  text-align: center;
  color: #999999;
  font-size: 4.26667vw;
}

@media (min-width: 768px) {
  #blog main .flex .content .blogCont .date {
    font-size: 1.66667vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex .content .blogCont .date {
    font-size: 20px;
  }
}

#blog main .flex .content .blogCont h2 {
  text-align: center;
  color: #333333;
  margin-bottom: 2.0rem;
  font-size: 4.8vw;
}

@media (min-width: 768px) {
  #blog main .flex .content .blogCont h2 {
    font-size: 1.83333vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex .content .blogCont h2 {
    font-size: 22px;
  }
}

#blog main .flex .content .blogCont h3 {
  border-top: solid 1px #c9c9c9;
  border-bottom: solid 1px #c9c9c9;
  background: #F8F8F8;
  margin: 1.0em 0;
  padding: 0.5em;
  font-size: 4.8vw;
}

@media (min-width: 768px) {
  #blog main .flex .content .blogCont h3 {
    font-size: 1.5vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex .content .blogCont h3 {
    font-size: 18px;
  }
}

#blog main .flex .content .blogCont h4 {
  margin: 1.0em 0.5em;
  padding: 0.5em 0;
  border-bottom: dashed 1px #c9c9c9;
  font-size: 4.26667vw;
}

@media (min-width: 768px) {
  #blog main .flex .content .blogCont h4 {
    font-size: 1.33333vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex .content .blogCont h4 {
    font-size: 16px;
  }
}

#blog main .flex .content .blogCont p {
  margin-bottom: 1.5em;
  overflow-wrap: break-word;
}

#blog main .flex .content .recent h2 {
  background: #D1D1D1;
  color: #ffffff;
  text-align: center;
  padding: 1.0rem;
  margin-bottom: 3.0rem;
  font-size: 4.53333vw;
}

@media (min-width: 768px) {
  #blog main .flex .content .recent h2 {
    font-size: 1.66667vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex .content .recent h2 {
    font-size: 20px;
  }
}

#blog main .flex .content .coupon {
  margin-bottom: 0px;
  padding: 1.0rem 8.66667% 1.5rem;
  background: #F8F8F8;
}

@media (min-width: 768px) {
  #blog main .flex .content .coupon {
    margin-bottom: 3.0rem;
    padding: 3.0rem 8.66667%;
  }
}

#blog main .flex .content .coupon .label {
  background: #D1D1D1;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  padding: 0.5rem;
  margin-bottom: 1.0rem;
  font-size: 2.93333vw;
}

@media (min-width: 768px) {
  #blog main .flex .content .coupon .label {
    font-size: 1.5vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex .content .coupon .label {
    font-size: 18px;
  }
}

#blog main .flex .content .coupon ul.icon li {
  display: inline-block;
  background: #E4393A;
  border-radius: 0.5rem;
  margin-left: 1.0em;
  margin-bottom: 1.0rem;
  color: #ffffff;
  padding: 0.5em 1.0em;
  font-size: 2.93333vw;
}

@media (min-width: 768px) {
  #blog main .flex .content .coupon ul.icon li {
    font-size: 1vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex .content .coupon ul.icon li {
    font-size: 12px;
  }
}

#blog main .flex .content .coupon ul.icon li:first-child {
  margin-left: 0;
}

#blog main .flex .content .coupon .hgroup:after {
  content: '';
  display: block;
  clear: both;
}

#blog main .flex .content .coupon .hgroup:after h2 {
  margin-bottom: 0;
  display: inline-block;
  font-weight: bold;
  font-size: 4vw;
}

@media (min-width: 768px) {
  #blog main .flex .content .coupon .hgroup:after h2 {
    font-size: 1.66667vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex .content .coupon .hgroup:after h2 {
    font-size: 20px;
  }
}

#blog main .flex .content .coupon .hgroup:after p {
  margin-bottom: 0;
  float: right;
  font-size: 4vw;
}

@media (min-width: 768px) {
  #blog main .flex .content .coupon .hgroup:after p {
    font-size: 1.66667vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex .content .coupon .hgroup:after p {
    font-size: 20px;
  }
}

#blog main .flex .content .coupon dl {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.0rem;
}

#blog main .flex .content .coupon dl dt {
  width: 31%;
}

#blog main .flex .content .coupon dl dt img {
  display: block;
  margin-left: 0;
}

#blog main .flex .content .coupon dl dd {
  width: 63%;
  font-size: 3.46667vw;
}

@media (min-width: 768px) {
  #blog main .flex .content .coupon dl dd {
    font-size: 1.33333vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex .content .coupon dl dd {
    font-size: 16px;
  }
}

#blog main .flex .content .staff {
  padding: 0 12%;
  margin-bottom: 3.0rem;
  padding-top: 3.0rem;
  padding-bottom: 0;
}

@media (min-width: 768px) {
  #blog main .flex .content .staff {
    padding: 0 16%;
    margin-bottom: 6.0rem;
    padding-bottom: 3.0rem;
  }
}

#blog main .flex .content .staff .cont {
  margin-bottom: 0;
}

#blog main .flex .content .staff .cont a {
  display: flex;
  justify-content: space-between;
}

#blog main .flex .content .staff .cont a figure {
  width: 25%;
}

#blog main .flex .content .staff .cont a .info {
  width: 70%;
}

#blog main .flex .content .staff .cont a .info h3 {
  text-align: left;
  margin-bottom: 0.5rem;
  font-size: 4.53333vw;
}

@media (min-width: 768px) {
  #blog main .flex .content .staff .cont a .info h3 {
    font-size: 2.25vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex .content .staff .cont a .info h3 {
    font-size: 27px;
  }
}

#blog main .flex .content .staff .cont a .info dl {
  margin-bottom: 1.5rem;
}

#blog main .flex .content .staff .cont a .info dl dt {
  color: #6A6A6A;
  font-size: 3.2vw;
}

@media (min-width: 768px) {
  #blog main .flex .content .staff .cont a .info dl dt {
    font-size: 1.16667vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex .content .staff .cont a .info dl dt {
    font-size: 14px;
  }
}

#blog main .flex .content .staff .cont a .info dl dd {
  font-size: 3.2vw;
}

@media (min-width: 768px) {
  #blog main .flex .content .staff .cont a .info dl dd {
    font-size: 1.33333vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex .content .staff .cont a .info dl dd {
    font-size: 16px;
  }
}

#blog main .flex .content .staff .cont a .info p {
  font-size: 3.73333vw;
}

@media (min-width: 768px) {
  #blog main .flex .content .staff .cont a .info p {
    font-size: 1.33333vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex .content .staff .cont a .info p {
    font-size: 16px;
  }
}

#blog main .flex #sidebar {
  width: 100%;
  margin-bottom: 3.0rem;
  padding: 1.0rem;
  border: 1px solid #000000;
}

@media (min-width: 768px) {
  #blog main .flex #sidebar {
    width: 30%;
  }
}

#blog main .flex #sidebar h3 {
  text-align: center;
  margin-bottom: 1.0rem;
  font-family: "Cinzel", serif;
  font-size: 4.26667vw;
}

@media (min-width: 768px) {
  #blog main .flex #sidebar h3 {
    font-size: 1.66667vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex #sidebar h3 {
    font-size: 20px;
  }
}

#blog main .flex #sidebar .pickup {
  margin-bottom: 2.0rem;
}

#blog main .flex #sidebar .pickup .control {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.0rem;
}

#blog main .flex #sidebar .pickup .control a {
  width: calc(50% - 0.5em);
  border: 1px solid #000000;
  color: #000000;
  line-height: 2.0;
  text-align: center;
  cursor: pointer;
  font-size: 3.73333vw;
}

@media (min-width: 768px) {
  #blog main .flex #sidebar .pickup .control a {
    font-size: 1.16667vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex #sidebar .pickup .control a {
    font-size: 14px;
  }
}

#blog main .flex #sidebar .pickup .control a.active {
  background-color: #000000;
  color: #ffffff;
}

#blog main .flex #sidebar .pickup ul {
  display: none;
}

#blog main .flex #sidebar .pickup ul.active {
  display: block;
}

#blog main .flex #sidebar .pickup ul#popular li {
  border-bottom: 1px solid #000000;
  padding-bottom: 1.0rem;
  margin-bottom: 1.0rem;
}

#blog main .flex #sidebar .pickup ul#popular li a {
  display: flex;
  align-items: flex-start;
}

#blog main .flex #sidebar .pickup ul#popular li a figure {
  width: 30%;
  margin-right: 3%;
}

#blog main .flex #sidebar .pickup ul#popular li a .cont {
  width: 67%;
}

#blog main .flex #sidebar .pickup ul#popular li a .cont .meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  font-size: 3.2vw;
}

@media (min-width: 768px) {
  #blog main .flex #sidebar .pickup ul#popular li a .cont .meta {
    font-size: 1.08333vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex #sidebar .pickup ul#popular li a .cont .meta {
    font-size: 13px;
  }
}

#blog main .flex #sidebar .pickup ul#popular li a .cont p.date {
  font-size: 3.2vw;
}

@media (min-width: 768px) {
  #blog main .flex #sidebar .pickup ul#popular li a .cont p.date {
    font-size: 1.08333vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex #sidebar .pickup ul#popular li a .cont p.date {
    font-size: 13px;
  }
}

#blog main .flex #sidebar .category, #blog main .flex #sidebar .keyword {
  margin-bottom: 2.0rem;
}

#blog main .flex #sidebar .category h3, #blog main .flex #sidebar .keyword h3 {
  text-align: left;
  border-bottom: 1px solid #000000;
}

#blog main .flex #sidebar .category h4, #blog main .flex #sidebar .keyword h4 {
  border-left: 5px solid #999999;
  padding-left: 0.75rem;
  line-height: 1.0;
  margin-bottom: 0.5rem;
  font-weight: normal;
  text-align: left;
  font-size: 3.46667vw;
}

@media (min-width: 768px) {
  #blog main .flex #sidebar .category h4, #blog main .flex #sidebar .keyword h4 {
    font-size: 1.08333vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex #sidebar .category h4, #blog main .flex #sidebar .keyword h4 {
    font-size: 13px;
  }
}

#blog main .flex #sidebar .category ul, #blog main .flex #sidebar .keyword ul {
  margin-bottom: 1.5rem;
}

#blog main .flex #sidebar .category ul li, #blog main .flex #sidebar .keyword ul li {
  font-size: 3.46667vw;
}

@media (min-width: 768px) {
  #blog main .flex #sidebar .category ul li, #blog main .flex #sidebar .keyword ul li {
    font-size: 1.08333vw;
  }
}

@media (min-width: 1200px) {
  #blog main .flex #sidebar .category ul li, #blog main .flex #sidebar .keyword ul li {
    font-size: 13px;
  }
}

#blog main .flex #sidebar .category ul.keywords li, #blog main .flex #sidebar .keyword ul.keywords li {
  display: inline-block;
  margin-bottom: 0.5rem;
  margin-right: 0.5rem;
}

#blog main .flex #sidebar .category form, #blog main .flex #sidebar .keyword form {
  display: flex;
  align-items: center;
}

#blog main .flex #sidebar .category form input[type="text"], #blog main .flex #sidebar .keyword form input[type="text"] {
  border: 1px solid #999999;
  width: 84%;
  margin-right: 1%;
  height: 2.2em;
}

#blog main .flex #sidebar .category form button, #blog main .flex #sidebar .keyword form button {
  width: 15%;
}

#blog main .flex #sidebar .category form button img, #blog main .flex #sidebar .keyword form button img {
  display: block;
  margin: 0;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

footer #salon_data h2 {
  font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  margin-bottom: 1.0rem;
  width: 92%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  font-size: 4.26667vw;
}

@media (min-width: 768px) {
  footer #salon_data h2 {
    text-align: center;
    font-size: 1.5vw;
  }
}

@media (min-width: 1200px) {
  footer #salon_data h2 {
    font-size: 18px;
  }
}

footer #salon_data .salon_item {
  margin-bottom: 3.0rem;
}

footer #salon_data .salon_item h3 {
  width: 100%;
  background-color: #333333;
  color: #ffffff;
  line-height: 1.0;
  padding: 0.5em 4%;
  margin-bottom: 1.0rem;
  font-size: 4.26667vw;
}

@media (min-width: 768px) {
  footer #salon_data .salon_item h3 {
    font-size: 1.5vw;
    padding: 0.5em 1.0rem;
  }
}

@media (min-width: 1200px) {
  footer #salon_data .salon_item h3 {
    font-size: 18px;
  }
}

footer #salon_data .salon_item h3 ~ * {
  width: 92%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  line-height: 2.0;
}

@media (min-width: 768px) {
  footer #salon_data .salon_item h3 ~ * {
    margin-left: 1.0rem;
    margin-right: 1.0rem;
  }
}

footer #salon_data .salon_item a {
  display: block;
}

footer #salon_data .salon_item p.address {
  font-size: 4vw;
}

@media (min-width: 768px) {
  footer #salon_data .salon_item p.address {
    font-size: 1.33333vw;
  }
}

@media (min-width: 1200px) {
  footer #salon_data .salon_item p.address {
    font-size: 16px;
  }
}

footer #salon_data .salon_item a.tel {
  font-size: 4.26667vw;
}

@media (min-width: 768px) {
  footer #salon_data .salon_item a.tel {
    font-size: 1.5vw;
  }
}

@media (min-width: 1200px) {
  footer #salon_data .salon_item a.tel {
    font-size: 18px;
  }
}

footer #salon_data .salon_item .detail {
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  padding: 1.5rem 0;
  margin: 1.5rem auto;
}

@media (min-width: 768px) {
  footer #salon_data .salon_item .detail {
    margin-left: 1.0rem;
    margin-right: 1.0rem;
  }
}

footer #salon_data .salon_item .detail p:not(:last-of-type) {
  margin-bottom: 1.5rem;
}

footer #salon_data .salon_item .card ul li {
  display: inline-block;
  margin-right: 1.0rem;
}

footer address {
  display: block;
  margin: 0 auto;
  padding: 1.5rem 0;
  text-align: center;
  font-style: normal;
  font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, sans-serif;
  font-size: 2.93333vw;
}

@media (min-width: 768px) {
  footer address {
    font-size: 1vw;
  }
}

@media (min-width: 1200px) {
  footer address {
    font-size: 12px;
  }
}

/*# sourceMappingURL=style.css.map */