@charset "UTF-8";
/************************** */
/*salon用CSS SP */
/**************************** */
/*****************************
 *
 *settings
 *
 ***************************** */
@media (max-width: 800px) {
  progress {
    z-index: 9999; }

  header.salon {
    height: 80px;
    transition: 0.4s ease; }
    header.salon nav .inner {
      padding: 0 30px; }
      header.salon nav .inner a.anchor {
        margin-bottom: 0; }
    header.salon .sns {
      background: none;
      width: 86px;
      padding: 15px;
      bottom: auto;
      left: 120px;
      top: 20px; }
    header.salon.v1 .spbtn {
      left: auto;
      right: 0;
      border-radius: 50px 0 0 50px; }
    header.salon.v1.scrolled .spbtn {
      box-shadow: none; }
  header.scrolled {
    background: #fff; }
  header .btm_btn.sp_content {
    display: -webkit-flex !important;
    display: -moz-flex !important;
    display: -ms-flex !important;
    display: -o-flex !important;
    display: flex !important; }
  header.salon .logo {
    width: 100px;
    margin: 13px 15px; }
    header.salon .logo h1 img {
      width: 100%; }
    header.salon .logo h1 i {
      font-size: 11px;
      margin-top: 3px; }
  header nav .inner .close {
    bottom: auto;
    top: 30px; }
  header nav .inner .tit {
    margin-bottom: 30px; }
  header nav .inner .reserve {
    padding: 30px;
    height: auto;
    width: 100%; }

  .back_main {
    display: none; }

  #content.salon_page h2 {
    text-align: center; }
  #content.salon_page #fv_salon {
    height: 400px; }
    #content.salon_page #fv_salon .fv_img {
      width: calc(100vw - 30px);
      height: calc(100% - 100px);
      top: 100px; }
    #content.salon_page #fv_salon h2 {
      font-size: 32px; }
  #content.salon_page #concept {
    padding-top: 0px; }
    #content.salon_page #concept .ib {
      padding: 70px 30px 120px; }
      #content.salon_page #concept .ib .l, #content.salon_page #concept .ib .r {
        width: 100%;
        padding: 0;
        border: none; }
        #content.salon_page #concept .ib .l a.btn, #content.salon_page #concept .ib .r a.btn {
          margin: 40px auto 20px; }
      #content.salon_page #concept .ib .l h2 {
        font-size: 40px;
        text-align: center; }
        #content.salon_page #concept .ib .l h2 span {
          font-size: 13px;
          display: none; }
      #content.salon_page #concept .ib .r p {
        font-size: 14px;
        line-height: 1.8; }
        #content.salon_page #concept .ib .r p br {
          display: none; }
  #content.salon_page .parallax {
    margin-top: 60px;
    height: 30vh; }
    #content.salon_page .parallax .img_cont {
      width: calc(100vw - 30px);
      left: 30px;
      height: 25vh; }
      #content.salon_page .parallax .img_cont:nth-of-type(2) {
        top: 14vh;
        width: calc(100vw - 30px);
        right: 30px; }
  #content.salon_page .salon_news {
    padding: 30px 30px 60px; }
    #content.salon_page .salon_news h2 {
      font-size: 32px; }
      #content.salon_page .salon_news h2 span {
        font-size: 13px; }
    #content.salon_page .salon_news .ib {
      padding: 30px 0; }
      #content.salon_page .salon_news .ib .slides_container .tabs {
        justify-content: center; }
      #content.salon_page .salon_news .ib h2 {
        font-size: 32px; }
        #content.salon_page .salon_news .ib h2 span {
          font-size: 13px; }
  #content.salon_page .salon_members .ib {
    padding: 270px 30px 30px; }
    #content.salon_page .salon_members .ib .staff_con {
      justify-content: space-between; }
      #content.salon_page .salon_members .ib .staff_con .staff_box {
        width: 49%;
        margin-right: 0;
        margin-bottom: 10px; }
        #content.salon_page .salon_members .ib .staff_con .staff_box .img {
          height: 150px; }
        #content.salon_page .salon_members .ib .staff_con .staff_box a.reserv {
          font-size: 12px;
          margin: 10px auto 0;
          display: block;
          float: none; }
        #content.salon_page .salon_members .ib .staff_con .staff_box h3 {
          font-size: 20px; }
          #content.salon_page .salon_members .ib .staff_con .staff_box h3 span, #content.salon_page .salon_members .ib .staff_con .staff_box h3 em {
            font-size: 13px; }
  #content.salon_page .salon_info .ib {
    padding: 30px 30px; }
    #content.salon_page .salon_info .ib h2 {
      font-size: 32px; }
      #content.salon_page .salon_info .ib h2 span {
        font-size: 13px; }
    #content.salon_page .salon_info .ib table, #content.salon_page .salon_info .ib tbody, #content.salon_page .salon_info .ib tr, #content.salon_page .salon_info .ib th, #content.salon_page .salon_info .ib td {
      display: block !important;
      width: 100% !important; }
    #content.salon_page .salon_info .ib table tr th {
      border: none;
      padding: 15px 15px;
      position: relative;
      background: #f1f1f1; }
    #content.salon_page .salon_info .ib table tr td {
      padding: 15px 0; }
  #content.salon_page .salon_map {
    height: 350px;
    padding: 30px 0;
    background: #fff; }
    #content.salon_page .salon_map .map_outer {
      width: 100%;
      height: 100%; }
  #content.salon_page .salon_instagram .ib {
    padding: 50px 30px; }
    #content.salon_page .salon_instagram .ib h2 {
      font-size: 32px; }
      #content.salon_page .salon_instagram .ib h2 s {
        font-size: 20px; }
  #content.salon_page .style_gallery .ib {
    padding: 60px 30px 40px; }
  #content.salon_page .style_gallery h2 {
    font-size: 32px; }
    #content.salon_page .style_gallery h2 span {
      font-size: 13px; }
  #content.salon_page .style_gallery .slide_wrapper {
    margin-bottom: 15px; }
    #content.salon_page .style_gallery .slide_wrapper a {
      width: 180px;
      height: 180px; }
  #content.salon_page .bland_book a.recruit {
    width: calc(100vw - 60px);
    margin: 40px auto;
    padding: 30px; }
  #content.salon_page .bland_book .ib {
    padding: 60px 30px 30px; }
    #content.salon_page .bland_book .ib .df {
      flex-wrap: wrap; }
      #content.salon_page .bland_book .ib .df .box {
        padding: 0;
        width: 100%; }
        #content.salon_page .bland_book .ib .df .box:nth-of-type(1) {
          padding-bottom: 30px;
          margin-bottom: 50px;
          border: none;
          border-bottom: 1px solid #212121; }
        #content.salon_page .bland_book .ib .df .box .img {
          width: 100%;
          height: 310px;
          margin: 35px auto; }
          #content.salon_page .bland_book .ib .df .box .img.logo {
            width: 130px;
            height: 130px;
            margin: 20px auto; }
        #content.salon_page .bland_book .ib .df .box h2 {
          font-size: 40px;
          margin-bottom: 40px; }
        #content.salon_page .bland_book .ib .df .box p {
          font-size: 14px;
          line-height: 1.9; }
          #content.salon_page .bland_book .ib .df .box p br {
            display: none; }

  #sm_content .head_tit {
    height: 260px;
    width: 100%;
    top: 0;
    margin-top: 80px; }
    #sm_content .head_tit h1 {
      width: 90%;
      left: 5%;
      font-size: 32px;
      top: 75px; }
    #sm_content .head_tit .panlist {
      height: auto;
      width: calc(100% - 25px); }
      #sm_content .head_tit .panlist .ib {
        padding: 20px 25px;
        font-size: 13px; }

  #content.salon_page.subpage {
    padding-top: 330px; }
    #content.salon_page.subpage .wp-pagenavi {
      flex-wrap: wrap; }
    #content.salon_page.subpage .blog_list .box .detail .date {
      margin-top: 0;
      font-size: 14px; }
    #content.salon_page.subpage .blog_list .box .detail h3 {
      font-size: 18px; }
    #content.salon_page.subpage .reservation {
      justify-content: center; }
      #content.salon_page.subpage .reservation a {
        margin: 0;
        margin-bottom: 20px; }
    #content.salon_page.subpage .ib {
      padding: 30px;
      width: 100%; }
    #content.salon_page.subpage .salon_members {
      margin-top: 0; }
    #content.salon_page.subpage .date {
      font-size: 14px;
      margin-top: 20px;
      margin-bottom: -20px; }
    #content.salon_page.subpage h2 {
      font-size: 30px;
      margin-bottom: 50px; }
      #content.salon_page.subpage h2 span {
        font-size: 14px;
        margin-top: 0; }
    #content.salon_page.subpage h3 {
      margin: 40px 0;
      font-size: 27px; }
    #content.salon_page.subpage p {
      font-size: 15px; }
    #content.salon_page.subpage .l_img {
      width: calc(100vw - 25px);
      margin-right: -25px;
      margin: 30px 0 30px;
      height: 270px; }
    #content.salon_page.subpage iframe {
      width: 100%;
      height: 320px;
      margin-top: 30px; }
    #content.salon_page.subpage table .menu_tit td {
      padding: 15px !important; }
    #content.salon_page.subpage table tr td {
      padding: 15px; }
      #content.salon_page.subpage table tr td span:nth-of-type(1) {
        font-size: 15px !important; }
    #content.salon_page.subpage table.design {
      width: calc(100% + 30px);
      margin-left: -30px;
      font-size: 14px;
      margin: 50px 0 50px -30px; }
      #content.salon_page.subpage table.design tr th {
        width: 33%;
        background: #f1f1f1;
        padding: 15px; }
      #content.salon_page.subpage table.design tr td {
        width: 67%;
        font-size: 15px; }
    #content.salon_page.subpage .bland .ib {
      padding: 30px; }
      #content.salon_page.subpage .bland .ib .bland_con .box {
        flex-wrap: wrap; }
        #content.salon_page.subpage .bland .ib .bland_con .box .img {
          width: 100%; }
        #content.salon_page.subpage .bland .ib .bland_con .box .detail {
          width: 100%; }

  #content.style main {
    width: 100%;
    display: block; }
    #content.style main .grid {
      flex-wrap: wrap;
      display: flex;
      justify-content: space-between; }
      #content.style main .grid a {
        width: 49%;
        height: 230px;
        margin-bottom: 5px; }
        #content.style main .grid a img {
          object-fit: cover;
          width: 100%;
          height: 100%; }

  .popup_staff .hide_box {
    width: calc(100% - 30px);
    left: 15px;
    top: 100px;
    height: calc(100% - 200px);
    border: none;
    overflow-y: scroll;
    padding: 20px; }
    .popup_staff .hide_box .close {
      font-size: 26px;
      top: 10px;
      right: 10px; }
    .popup_staff .hide_box .img {
      width: 150px;
      height: 150px; }
    .popup_staff .hide_box .detail {
      width: 100%;
      top: 30px;
      left: 0;
      position: relative; }
      .popup_staff .hide_box .detail h3 {
        font-size: 28px;
        padding-left: 145px;
        margin-bottom: 60px; }
        .popup_staff .hide_box .detail h3 span {
          margin-left: 0;
          font-size: 13px; }
      .popup_staff .hide_box .detail p {
        font-size: 12px;
        line-height: 1.8; }
    .popup_staff .hide_box p.comments {
      font-size: 14px;
      padding-top: 20px;
      margin-top: 20px; }

  footer.salon#footer .ib {
    padding: 60px 30px; }
    footer.salon#footer .ib p.copy {
      font-size: 11px;
      margin-top: 100px; }
    footer.salon#footer .ib nav .area_box {
      width: 100%; }
      footer.salon#footer .ib nav .area_box h3 {
        margin-bottom: 20px;
        margin-top: 20px !important; }
      footer.salon#footer .ib nav .area_box .shop_list p {
        margin: 10px 0; } }

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