@charset "UTF-8";
/* CSS Document */
/* ---------- PCSP共通 ---------- */
header {
  border-bottom: 1px solid #646464; }
  header #siteinfo #tittle h1 br.sp480 {
    display: none; }

/* タイトル */
#tittle {
  line-height: 150%; }

#tittle h1 {
  display: inline;
  font-weight: normal;
  font-size: 12px;
  text-align: left; }

/* ロゴ */
#logo > a {
  width: 228px; }

#logo img {
  max-width: 228px; }

/* 電話 */
#tel p {
  margin-left: 0px;
  font-family: 'Lato', sans-serif;
  display: inline; }

.fa-phone {
  color: #221814;
  font-size: 20px; }

/* ナビ */
#menu_pc li a {
  font-family: 'Lato', sans-serif;
  color: #221814; }

.mv-area {
  padding-top: 200px; }
  .mv-area .bx-wrapper::after {
    content: '';
    display: block;
    width: 425px;
    height: 182px;
    background: url("../img/mv_txt.png") no-repeat;
    background-size: 425px;
    position: absolute;
    bottom: 60px;
    left: calc((100% - 1090px) / 2);
    pointer-events: none;
    z-index: 99; }
  .mv-area .bx-wrapper .bxsliderimg {
    transform: scale(1) translate(0, 0); }
    .mv-area .bx-wrapper .bxsliderimg.anime1 {
      transform: scale(1.3) translate(50px, 50px);
      transition: transform 10s 0s ease-in; }
    .mv-area .bx-wrapper .bxsliderimg.anime2 {
      transform: scale(1.3) translate(-50px, 50px);
      transition: transform 10s 0s ease-in; }
    .mv-area .bx-wrapper .bxsliderimg.anime3 {
      transform: scale(1.3) translate(50px, -50px);
      transition: transform 10s 0s ease-in; }
    .mv-area .bx-wrapper .bxsliderimg.anime4 {
      transform: scale(1.3) translate(-50px, -50px);
      transition: transform 10s 0s ease-in; }

/* ---------- PCメニュー ---------- */
@media (min-width: 768px) {
  /* ヘッダー */
  header {
    position: fixed;
    width: 100%;
    max-height: 201px;
    background: white;
    z-index: 9999;
    transition: background .5s, height .5s;
    /* height: 140px; */ }
    header.fixed {
      position: fixed;
      top: 0;
      z-index: 99999999;
      background: rgba(255, 255, 255, 0.9);
      width: 100%;
      height: auto; }
      header.fixed #menu_pc_outer {
        background: none; }
      header.fixed #siteinfo {
        padding-top: 16px; }
      header.fixed #logo > a {
        width: 150px;
        transition: all .3s; }
      header.fixed #tittle {
        top: 12px;
        right: auto;
        left: 180px;
        animation: fadeAnime .3s; }
      header.fixed #menu_pc_outer {
        margin-top: -20px;
        height: 40px; }
      header.fixed #menu_pc ul {
        width: calc(100% - 200px);
        padding-left: 180px; }
      header.fixed #menu_pc li a {
        height: 40px; }
      header.fixed #menu_pc li {
        height: 40px; }
      header.fixed #tel {
        position: absolute;
        right: 0;
        bottom: -21px; }
      header.fixed #reserve {
        width: 170px; }

  #menu_pc_outer {
    /* position: absolute; */
    width: 100%;
    max-width: 1090px;
    /* top: 80px; */
    height: 80px;
    margin: 36px auto 0;
    /* background-color: rgba(255,255,255,0.9);  */ }

  /*スマホ用メニュー消す */
  #menubtn,
  #menu_sp_outer {
    display: none; }

  /* インフォ */
  #siteinfo {
    position: relative;
    padding-top: 27px;
    text-align: left; }

  #tittle {
    display: inline-block;
    position: absolute;
    top: 17px;
    right: 0;
    line-height: 1; }

  /* #logo{
  } */
  #logo > a {
    display: inline-block; }

  #tel {
    margin-top: 36px;
    float: right; }

  #tel p {
    margin-left: 5px;
    font-size: 20px;
    letter-spacing: 3px; }

  #reserve {
    width: 200px; }

  .reserve:link {
    font-weight: bold;
    font-size: 16px;
    color: #fff;
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }

  .reserve:visited {
    color: #fff; }

  .reserve:hover {
    color: #fff; }

  .reserve:active {
    color: #fff; }

  /* ナビ */
  #menu_pc {
    display: block; }

  #menu_pc ul {
    list-style: none;
    display: flex;
    width: calc(100% - 250px);
    justify-content: space-around; }

  #menu_pc li a {
    font-size: 15px;
    text-decoration: none;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 80px; }

  #menu_pc li {
    display: table;
    width: auto;
    text-align: center;
    height: 80px; }

  #menu_pc li a:hover {
    color: #96cac3; }

  #menu_pc lic.current-menu-item a {
    color: #96cac3 !important; } }
@media (max-width: 1089px) {
  header #tittle {
    right: 16px; }
  header #logo > a {
    max-width: 160px; }
    header #logo > a img {
      max-width: 100%; }
  header #siteinfo {
    padding-left: 16px; }
  header #tel {
    margin-top: 0; }
  header #menu_pc_outer {
    margin-top: 0; }
  header.fixed #menu_pc ul {
    width: calc(100% - 190px); }
    header.fixed #menu_pc ul li a {
      font-size: 0.8rem; }

  .mv-area {
    padding-top: 147px; }
    .mv-area .bx-wrapper::after {
      width: 40%;
      height: calc(182 / 425 * 100vw * 0.4);
      background: url("../img/mv_txt.png") no-repeat;
      background-size: 100%;
      left: 16px;
      bottom: 10%; }

  .container {
    padding: 0 16px; }
    .container .separation {
      width: calc(100% + 32px);
      margin-left: -16px; }
    .container #fourmenu {
      margin: 90px 4px 50px 4px; }
    .container #pickup-area .pickup-wrap .pickup {
      width: calc((100% - 32px) / 3); }
    .container #blog-area .blog-wrap ul li.clm2 .elm-l {
      width: 50%; }
    .container #blog-area .blog-wrap ul li.clm2 .elm-r {
      width: 44%; } }
/* ---------- SP メニュー ---------- */
@media (max-width: 767px) {
  header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 3;
    background-color: rgba(255, 255, 255, 0.9);
    height: 50px; }
    header #siteinfo > #tel {
      display: none; }

  #menu_pc_outer {
    display: none; }

  #logo {
    position: absolute;
    left: 8px;
    top: 11px !important;
    width: 125px;
    height: auto; }

  #tittle h1 {
    text-align: left;
    line-height: 1.4;
    position: absolute;
    top: 10px;
    left: 145px;
    font-size: 10px; }

  .fa-phone {
    position: absolute;
    top: 10px;
    right: 60px;
    font-size: 30px !important;
    color: #221814; }

  .fa-phone:hover {
    color: #221814; }

  #tel a {
    text-decoration: none; }

  #tel p, .reserve {
    display: none; }

  /* トグルボタン */
  #menubtn {
    padding: 10px 12px;
    border: none;
    background-color: transparent;
    position: absolute;
    top: 0px;
    right: 3px;
    cursor: pointer; }

  #menubtn:focus {
    outline: none; }

  .fa-bars {
    color: #221814;
    font-size: 30px !important; }

  .fa-bars:hover {
    color: #221814; }

  #menubtn span {
    display: inline-block;
    text-indent: -9999px; }

  /* ナビ */
  #menu_sp {
    display: none; }

  #menu_sp ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    background-color: #fff;
    z-index: 1; }

  #menu_sp ul {
    float: none; }

  #menu_sp .menu-menu-container li:nth-child(1) {
    padding-top: 50px;
    margin-right: 0;
    background-color: #fff; }

  #menu_sp li:nth-child(2),
  #menu_sp li:nth-child(3),
  #menu_sp li:nth-child(4),
  #menu_sp li:nth-child(5),
  #menu_sp li:nth-child(6),
  #menu_sp li:nth-child(7) {
    margin-right: 0;
    background-color: #fff; }

  #menu_sp li a {
    display: block;
    padding: 15px;
    font-size: 14px;
    text-decoration: none;
    font-family: 'Lato', sans-serif; }

  #menu_sp li {
    text-align: center;
    margin: 0 auto;
    float: none; }

  #menu_sp .menu-salon-container li a {
    color: #221814; }

  #menu_sp .menu-menu-container li:nth-child(1):hover,
  #menu_sp li:nth-child(2):hover,
  #menu_sp li:nth-child(3):hover,
  #menu_sp li:nth-child(4):hover,
  #menu_sp li:nth-child(5):hover,
  #menu_sp li:nth-child(6):hover,
  #menu_sp li:nth-child(7):hover {
    border-bottom: none; }

  #menu_sp .menu_sp_reserve > a {
    color: #fff;
    font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; }

  #menu_sp .menu_sp_reserve {
    width: 100%;
    background: #96cac3; }

  .mv-area {
    padding-top: 0; } }
@media (max-width: 480px) {
  header {
    border-bottom: 1px solid #646464; }
    header #siteinfo #tittle h1 {
      left: 125px; }
      header #siteinfo #tittle h1 br.sp480 {
        display: inline; }

  #logo {
    position: absolute;
    left: 6px;
    top: 12px !important;
    width: 110px; } }
@media (max-width: 374px) {
  .smart374 {
    display: none; } }
@keyframes fadeAnime {
  0% {
    opacity: 0; }
  50% {
    opacity: 0; }
  100% {
    opacity: 1; } }