/*---------------------------------------------
hair-n.jp
name : n.css
date : 2018/06/16
---------------------------------------------*/
/* 共通 - タグ初期設定 */
html {font-size: calc(14px + 0.25vw); font-family: 'Frank Ruhl Libre',serif; line-height: 1.5; letter-spacing: .07em; color: #000;}
body {background-color: #fff;}
p {margin: 0; padding: 0;}
img {width: 100%;}
a {text-decoration: none;}
a:link,a:visited {color: #000; transition: color 0.4s;}
a:hover,a:active {color: #999; transition: color 0.4s;}
table {border-collapse: collapse;}
ul {list-style-type: none; list-style-position: outside; padding:0; margin:0;}

/* レイアウト */
#global_header {}
#container {position: relative; width: 100%;}
#main_visual {}
.block,.list,.nav-card,.access,.salon,.torc,.price,.nav-secondary,.nav-thumbnail,.nav-upperlayer,.detail-hair-photo,.detail-hair-info,.nav-card-staff,.detail-staff {max-width: 1000px; margin: 0 auto;}
.reservation-button {position: fixed; width: 100%; bottom: 0; box-shadow: 0 1px 14px #aaa;}
.footer {text-align: center;}



/* エレメント - セカンダリ ナビゲーション */
.nav-secondary__box {
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid #ddd;
}
.nav-secondary__item {
  display: inline-block;
}
.nav-secondary__link {
  display: block;
  letter-spacing: .2em;

}

/* エレメント - バック リンク */
.nav-upperlayer__box {
  padding-top: 2em;
}
.nav-upperlayer__item {
  padding-left: 0;
}
.nav-upperlayer__link {
  display: inline-block;
  padding: 1.5% 0;
}

/* エレメント - スポット リンク */
a.spot__link {margin:0 0.35em; text-decoration: underline;}

/* エレメント - 見出し */
.title-one {
  margin: 0 0 2em 0;
  padding: 2em 0 0 0;
  font-size: calc((14px + 0.25vw) * 1.25);
  font-weight: normal;
  letter-spacing: 0.2em;
  color: #999;
}
.title-two,.title-two--gray {
  margin-bottom: 1.35em;
  font-size: calc(14px + 0.25vw);
  font-weight: normal;
  letter-spacing: 0.2em;
}
.title-two--gray {
  color: #999;
}
.title-photo {
  margin: 0 0 .5em 0;
  padding: 0;
  font-size: calc(14px + 0.25vw);
  line-height: 0;
}

/* エレメント - ボタン */
.nav-button {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.nav-button__link--internal,.nav-button__link--external {
  display:block;
  width: 100%;
  height: 40px;
  margin: 0 auto;
  line-height: 40px;
  text-decoration: none;
  border: 1px solid #000;
}
.nav-button__link--internal:link,.nav-button__link--internal:visited {
  background-color: #fff;
  color: #000;
  transition: background-color 0.8s;
}
.nav-button__link--internal:hover,.nav-button__link--internal:active {
  background-color:#000;
  color: #fff;
  transition: background-color 0.4s;
}
.nav-button__link--external:link,.nav-button__link--external:visited {
  background-color: #000;
  color: #fff;
  transition: background-color 0.8s;
}
.nav-button__link--external:hover,.nav-button__link--external:active {
  background-color:#fff;
  color: #000;
  transition: background-color 0.4s;
}
.nav-button__label {
  display: block;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  font-size: calc((14px + 0.25vw) * 0.80);
  font-family: sans-serif;
  font-weight: bold;
  }

/* エレメント - リスト */
.list__item {
  border-top: 1px solid #eee;
}
.list__item:last-child {
  border-bottom: 1px solid #eee;
}
.list__link,.list__normal {
  display: block;
}


/* エレメント - リストカード */
.nav-card__box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.nav-card__item {
  border: 1px solid #000;
}
.nav-card__name {
  margin-bottom: 6%;
}
.nav-card__image {
  vertical-align: bottom;
  line-height: 0;
}

/* エレメント - リストカード スタッフ */
.nav-card-staff__box  {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.nav-card-staff__name {
  margin-top: 6%;
  text-align: center;
}
.nav-card-staff__position {
  font-size: calc((14px + 0.25vw) * 0.90);
}
.nav-card-staff__image {
  vertical-align: bottom;
  line-height: 0;
}

/* エレメント - リストサムネイル */
.nav-thumbnail__box  {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.nav-thumbnail__image {
  vertical-align: bottom;
  line-height: 0;
}

/* エレメント - ディテイル ヘア */
.detail-hair__photo__box {
  margin-bottom: 1.35em;
}
.detail-hair__photo__item {
  width: 100%;
  margin-bottom: .5em;
}
.detail-hair__photo__image {
  vertical-align: bottom;
  line-height: 0;
}
.detail-hair-info__title {
  margin: 0 1.35em .35em 0;
  font-size: calc(14px + 0.25vw);
  font-weight: normal;
  letter-spacing: 0.2em;
}
.detail-hair-info__desctiption {}
.detail-hair-info__link {
  text-decoration: underline;
}

/* エレメント - ディテイル スタッフ */
.detail-staff__name {
  margin: 0;
  padding-bottom: 0;
  text-align: center;
  font-size: calc((14px + 0.25vw) * 1.80);
  font-weight: normal;
  border-bottom: 1px solid #ddd;
}
.detail-staff__position {
  display: block;
}
.detail-staff__position,.detail-staff__name-en {
  font-size: calc(14px + 0.25vw);
}
.nav-instagram__link {
  height: 32px;
  text-decoration: underline;
}
.nav-instagram__icon::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 32px;
  background-image: url("/img/icon_instagram.png");
  background-size: contain;
  vertical-align: middle;
}

/* エレメント - ディテイル torc */
.detail-torc__box {
  margin-bottom: 3em;
}
.detail-torc__box:last-child {
  margin-bottom: 0;
}
.detail-torc__description {
  padding-left: 1.75em;
  word-wrap: break-word;
  line-height: 1.75;
}
.detail-torc__description--caption {
  display: block;
  padding-top: 0.7em;
}

/* エレメント - ディテイル salon */
.salon-map {
  margin-bottom: 4.1em;
}
.salon-origine {}
.salon-origine__box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.salon-origine__item {
  border: 1px solid #000;
}
.salon-origine__title {
  margin: 0;
  padding: 1.25em 0 1.75em 0 ;
  text-align: center;
  font-size: calc((14px + 0.25vw) * 1.25);
  font-weight: normal;
  letter-spacing: 0.2em;
}

/* エレメント - ディテイル price */
.price__box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.price__item {
  width: 48%;
  margin-bottom: 2.35em;
}
.price-value {
  width: 56%;
  font-style: italic;
}
.price-note__box {
  margin-left: 1.35em;
  list-style: disc;
  list-style-position: outside;
}
.price-note__item {
  margin-bottom: 1.35em;
}
.price-note__item:last-child {
  margin-bottom: 0;
}
.mark-yen {
  margin: 0 0.35em;
}


@media screen and (min-width: 0px) {

  /* レイアウト */
  #container {
    margin-top: 50px;
  }
  #main_visual {
    margin-bottom: 35px;
  }
  .block,.list,.nav-card,.access,.salon,.torc,.price,.nav-secondary,.nav-thumbnail,.nav-upperlayer,.detail-hair-info,.nav-card-staff  {
    padding: 0 .7em;
  }
  .home-information,.home-menu,.detail-staff,.datail-staff-blog {
    margin-bottom: 2.35em;
  }
  .footer {
    margin: 4.7em 0;
  }

  /* エレメント - セカンダリ ナビゲーション */
  .nav-secondary__box {
    padding: .6em 0 .5em 0;
  }
  .nav-secondary__item {
    margin: 0 .6em;
  }
  .nav-secondary__link {
    padding: .6em 0 .5em 0;
  }

  /* エレメント - 見出し */
  .title-one {
    margin: 0 0 0.7em 0;
  }
  .title-two,.title-two--gray {
    margin-bottom: 1.35em;
  }

  /* エレメント - リスト */
  .list__box {
    margin-bottom: 1.35em;
  }
  .list__link,.list__normal {
    padding: .6em 0 .4em 0;
  }
  .list__date,.list__title {
    display: block;
    font-size: calc((14px + 0.25vw) * 0.85);
  }

  /* エレメント - リストカード */
  .nav-card__item {
    width: 100%;
    margin-bottom: .7em;
    padding: 1.35em;
  }

  /* エレメント - リストカード スタッフ */
  .nav-card-staff__item {
    width: 48.25%;
    margin-bottom: 1.35em;
  }

  /* エレメント - リストサムネイル */
  .nav-thumbnail__item {
    width: 48.25%;
    margin-bottom: .7em;
  }

  /* エレメント - ボタン */
  .nav-button__item {
    width: 100%;
    margin-bottom: .7em;
  }

  /* エレメント - ディテイル スタッフ */
  .detail-staff__photo {
    margin-bottom: .7em
  }
  .detail-staff__info {
    padding: 0 .7em;
  }
  .detail-staff__position {
    margin-bottom: .7em
  }
  .detail-staff__name {
    margin-bottom: .7em;
    padding-bottom: .7em;
    font-size: calc((14px + 0.25vw) * 1.40);
  }
  .detail-staff__name-en {
    display: block;
  }
  .detail-staff__message {
    margin-bottom: 1em;
  }
  .nav-instagram {
    text-align: center;
  }
  .nav-instagram__icon::before {
    margin-right: .7em;
  }

  /* エレメント - ディテイル SALON */
  .salon-origine__item {
    width: 100%;
    margin-bottom: 0.7em;
    padding: 1.3em;
    padding-bottom: 1.2em;
    border: 1px solid #000;
  }
  /* エレメント - ディテイル price */
  .price__item {
    width: 100%;
  }

}





@media screen and (min-width: 480px) {

  /* レイアウト */
  #container {
    margin-top: 50px;
  }
  #main_visual {
    margin-bottom: 40px;
  }
  .block,.list,.nav-card,.access,.salon,.torc,.price,.nav-secondary,.nav-thumbnail,.nav-upperlayer,.detail-hair-info,.nav-card-staff  {
    padding: 0 .65em;
  }
  .home-information,.home-menu,.detail-staff,.datail-staff-blog {
    margin-bottom: 2.3em;
  }
  .footer {
    margin: 4.7em 0;
  }

  /* エレメント - セカンダリ ナビゲーション */
  .nav-secondary__box {
    padding: .6em 0 .5em 0;
  }
  .nav-secondary__item {
    margin: 0 1em;
  }
  .nav-secondary__link {
    padding: .6em 0 .5em 0;
  }

  /* エレメント - 見出し */
  .title-two,.title-two--gray {
    margin-bottom: 1.35em;
  }

  /* エレメント - リスト */
  .list__box {
    margin-bottom: 1.35em;
  }
  .list__link,.list__normal {
    padding: .6em 0 .4em 0;
  }
  .list__date,.list__title {
    display: inline;
    font-size: calc(14px + 0.25vw);
  }
  .list__date {
    margin-right: 1em;
  }

  /* エレメント - リストカード */
  .nav-card__item {
    width: 49%;
    margin-bottom: .7em;
    padding: .85em;
  }

  /* エレメント - リストカード スタッフ */
  .nav-card-staff__item {
    width: 49%;
    margin-bottom: 1.35em;
  }

  /* エレメント - リストサムネイル */
  .nav-thumbnail__item {
    width: 49%;
    margin-bottom: .7em;
  }

  /* エレメント - ボタン */
  .nav-button__item {
    width: 65%;
    margin-bottom: .7em;
  }

  /* エレメント - ディテイル スタッフ */
  .detail-staff__info {
    padding: 0 .6em;
  }
  .detail-staff__name {
    margin: 0 0 .6em 0;
    padding-bottom: .6em;
    font-size: calc((14px + 0.25vw) * 1.40);
  }
  .detail-staff__name-en {
    display: block;
    font-size: calc(14px + 0.25vw);
  }
  .detail-staff__message {
    margin-bottom: 1em;
  }
  .nav-instagram {
    text-align: center;
  }
  .nav-instagram__icon::before {
    margin-right: .7em;
  }

  /* エレメント - ディテイル SALON */
  .salon-origine__item {
    width: 49%;
    margin-bottom: 0.7em;
    padding: 1.35em;
    padding-bottom: 1.2em;
    border: 1px solid #000;
  }
  /* エレメント - ディテイル price */
  .price__item {
    width: 100%;
  }

}






@media screen and (min-width: 768px) {

  /* レイアウト */
  #container {
    margin-top: 50px;
  }
  #main_visual {
    margin-bottom: 50px;
  }
  .block,.list,.nav-card,.access,.salon,.torc,.price,.nav-secondary,.nav-thumbnail,.nav-upperlayer,.detail-hair-info,.nav-card-staff,.detail-staff  {
    padding: 0 .6em;
  }
  .home-information,.home-menu,.detail-staff,.datail-staff-blog {
    margin-bottom: 2.85em;
  }
  .footer {
    margin: 4.7em 0;
  }

  /* エレメント - セカンダリ ナビゲーション */
  .nav-secondary__box {
    padding: 1em 0 .75em 0;
  }
  .nav-secondary__item {
    margin: 0 1em;
  }
  .nav-secondary__link {
    padding: 1em 0 .75em 0;
  }

  /* エレメント - 見出し */
  .title-two,.title-two--gray {
    margin-bottom: 1.35em;
  }

  /* エレメント - リスト */
  .list__box {
    margin-bottom: 1.35em;
  }
  .list__link,.list__normal {
    padding: .6em 0 .4em 0;
  }
  .list__date,.list__title {
    display: inline;
    font-size: calc(14px + 0.25vw);
  }
  .list__date {
    margin-right: 1em;
  }

  /* エレメント - リストカード */
  .nav-card__box::after {
    content:"";
    display: block;
    width:32%;
  }
  .nav-card__item {
    width: 32%;
    margin-bottom: .9em;
    padding: .85em;
  }

  /* エレメント - リストカード スタッフ */
  .nav-card-staff__box::after {
    content:"";
    display: block;
    width:32%;
  }
  .nav-card-staff__item {
    width: 32%;
    margin-bottom: .9em;
  }

  /* エレメント - リストサムネイル */
  .nav-thumbnail__box::after {
    content:"";
    display: block;
    width:32%;
  }
  .nav-thumbnail__item {
    width: 32%;
    margin-bottom: .9em;
  }

  /* エレメント - ボタン */
  .nav-button__item {
    width: 32%;
    margin: 0 .75em;
  }

  /* エレメント - ディテイル スタッフ */
  .detail-staff__photo {
    float: left;
    margin-right: 2%;
    width: 32%;
  }
  .detail-staff__info {
    float: right;
    width: 66%;
  }
  .detail-staff__name {
    text-align: left;
  }
  .detail-staff__name-en {
    display: inline ;
    margin-left: .9em;
    font-size: calc(14px + 0.25vw);
  }
  .detail-staff__message {
    margin-bottom: .9em;
  }
  .nav-instagram {
    text-align: left;
  }
  .nav-instagram__icon::before {
    margin-right: .65em;
  }
  /* エレメント - ディテイル SALON */
  .salon-origine__item {
    width: 24%;
    padding: 1.3em;
    padding-bottom: 0.9em;
    border: 1px solid #000;
  }
  /* エレメント - ディテイル price */
  .price__item {
    width: 48%;
  }

}





@media screen and (min-width: 1024px) {
  /* レイアウト */
  #container {
    margin-top: 110px;
  }
  #main_visual {
    margin-bottom: 70px;
  }
  .home-information,.home-menu,.detail-staff,.datail-staff-blog {
    margin-bottom: 4.2em;
    padding: 0;
  }
  .footer {
    margin: 4.7em 0;
  }

  /* エレメント - セカンダリ ナビゲーション */
  .nav-secondary__box {
    padding: 1em 0 .75em 0;
  }
  .nav-secondary__item {
    margin: 0 1em;
  }
  .nav-secondary__link {
    padding: 1em 0 .75em 0;
  }

  /* エレメント - 見出し */
  .title-two,.title-two--gray {
    margin-bottom: 1.35em;
  }

  /* エレメント - リスト */
  .list__box {
    margin-bottom: 1.35em;
  }
  .list__link,.list__normal {
    padding: .6em 0 .4em 0;
  }
  .list__date,.list__title {
    display: inline;
    font-size: calc(14px + 0.25vw);
  }
  .list__date {
    margin-right: 1em;
  }

  /* エレメント - リストカード */
  .nav-card__box::after {
    content:"";
    display: block;
    width:32%;
  }
  .nav-card__item {
    width: 32%;
    margin-bottom: 1.1em;
    padding: 1.15em;
  }

  /* エレメント - リストカード スタッフ */
  .nav-card-staff__box::after {
    content:"";
    display: block;
    width:32%;
  }
  .nav-card-staff__item {
    width: 32%;
    margin-bottom: 2.25em;
  }

  /* エレメント - リストサムネイル */
  .nav-thumbnail__box::after {
    content:"";
    display: block;
    width:32%;
  }
  .nav-thumbnail__item {
    width: 32%;
    margin-bottom: 1.1em;
  }

  /* エレメント - ボタン */
  .nav-button__item {
    width: 32%;
    margin: 0 .75em;
  }

  /* エレメント - ディテイル スタッフ */
  .detail-staff {
    padding: 0;
  }
  .detail-staff__photo {
    float: left;
    margin-right: 2%;
    width: 32%;
  }
  .detail-staff__info {
    float: right;
    width: 66%;
  }
  .detail-staff__name {
    text-align: left;
  }
  .detail-staff__name-en {
    display: inline;
    margin-left: .85em;
    font-size: calc(14px + 0.25vw);
  }
  .detail-staff__message {
    margin-bottom: .85em;
  }
  .nav-instagram {
    text-align: left;
  }
  .nav-instagram__icon::before {
    margin-right: .55em;
  }
  /* エレメント - ディテイル SALON */
  .salon-origine__item {
    width: 24%;
    padding: 1.15em;
    padding-bottom: 0.85em;
    border: 1px solid #000;
  }
  /* エレメント - ディテイル price */
  .price__item {
    width: 48%;
  }

}




























.main_visual__frame {
/*
  max-width: 1300px;
*/
}
.main_visual__frame:before {
  content: "";
  display: block;
  padding-top: 50%;
}
#main_visual img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
/*
  max-width: 1300px;
  min-height: 320px;
*/
  animation: show 18s infinite;
  -webkit-animation: show 18s infinite;
  opacity: 0;
  object-fit: cover;
}

/*アニメーション*/

@keyframes show {
  0% {opacity:0}
  8% {opacity:1}
  33% {opacity:1}
  42% {opacity:0}
  100% {opacity:0}
 }

@-webkit-keyframes show {
  0% {opacity:0}
  8% {opacity:1}
  33% {opacity:1}
  42% {opacity:0}
  100% {opacity:0}
}

/*各画像のアニメーションの開始時間をずらす*/

#main_visual img:nth-of-type(1) {
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
}

#main_visual img:nth-of-type(2) {
    animation-delay: 6s;
    -webkit-animation-delay: 6s;
}

#main_visual img:nth-of-type(3) {
    animation-delay: 12s;
    -webkit-animation-delay: 12s;
}

#main_visual img:nth-of-type(4) {
    animation-delay: 18s;
    -webkit-animation-delay: 18s;
}

#main_visual img:nth-of-type(5) {
    animation-delay: 24s;
    -webkit-animation-delay: 24s;
}
#main_visual img:nth-of-type(6) {
    animation-delay: 30s;
    -webkit-animation-delay: 30s;
}

#map_container {
  position: relative;
  padding-top: 50%;
  margin-bottom: 1.35em;
}
#map {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}


/* table */
.table {
  margin-bottom: 1.35em;
  width: 100%;
  border-bottom: 1px solid #eee;
}
.table__title {
  padding-bottom: .625em;
  text-align: left;
  font-weight: normal;
  letter-spacing: 0.2em;
}
.table__item {
  padding: .6em .5em .4em .5em;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid #eee;
}
.table__item--caption {
  display: block;
  padding-top: .5em;
}


/* reservation button */
.reservation-button__link {
  display:block;
  height: 50px;
  line-height: 50px;
  text-decoration: none;
}
.reservation-button__link:link,.reservation-button__link:visited {
  background-color:#fff;
  transition: background-color 0.8s;
  color: #000;
}
.reservation-button__link:hover,.reservation-button__link:active {
  background-color:#222;
  transition: background-color 0.2s;
  color: #fff;
}
.reservation-button__label {
  display: block;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  font-family: sans-serif;
}


/* clearfix */
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
  display: inline-table;
}
.clearfix {
  >height: 1%;
}
.clearfix {
  display: block;
}