@charset "utf-8";

/* スマホ縦 */
@media screen and (max-width: 450px) {
  /* btn */
  .btn_wrap {
    margin: 6.25vw 0 0 0;
    justify-content: center;
  }

  /* common */
  .link > .link {
    bottom: calc(6.25vw / 1);
    left: calc(6.25vw / 1);
  }

  /* header */
  header .logo > li:nth-of-type(1) { padding: 20px 0 0 0; }
  header .logo > li:nth-of-type(1) img { width: 80px; }
  header .logo > li:nth-of-type(2) { padding: 20px 0 0 0; }
  header .gnav { display: none; }

  /* .expansion > dd */
  .expansion > dd .inner { align-items: center; }

  /* hnav */
  #hnav > dd .inner2 > div { display: block; }
  #hnav > dd nav:nth-of-type(2) {
    margin: 1em 0 0 0;
    padding: 1em 0 0 0;
    border-top: 1px dashed rgba(0,0,0,.25);
  }
  #hnav > dd nav:nth-of-type(3) {
    margin: 1em 0 0 0;
    padding: 1em 0 0 0;
    border-top: 1px dashed rgba(0,0,0,.25);
  }

  /* footer */
  footer {
    & > .inner {
      height: 75vh;
      height: calc(var(--vh, 1vh) * 75);
    }
    & .text_wrap {
      display: block;
      padding: 6.25vw;
    }
    & .left {
      padding: 0 0 3em 0;
    }
  }

  /* mv */
  .mv {
    & .logotype {
      & img {
        width: calc(6.25% * 10);
      }
    }
    & .scroll {
      height: 40px;
    }
    & .content_wrap {
      & .text_wrap {
        width: calc(6.25% * 14);
      }
      & .img_wrap {
        width: calc(6.25% * 14);
      }
    }
  }

  /* layout_outline */
  .layout_outline {
    & .text_wrap {
      width: calc(6.25% * 16);
      padding: calc(6.25vw * 2) 6.25vw;
      & p {
        text-align: left;
      }
    }
  }

  /* layout_main */
  .layout_main > .inner { padding: calc(6.25vw * 2) 0 calc(6.25vw * 2 + 60px) 0; }
  .layout_main .slick-slider .slick-slide { width: calc(6.25vw * 14 / 1); }
  .layout_main .slick-slider .slick-slide .text_wrap { margin: calc(6.25vw / 1) 0 0 0; }

  /* layout_half */
  .layout_half {
    & > .inner {
      padding: calc(6.25vw * 2) 0;
      & > ul {
        gap: calc(6.25vw * 2);
        & > li {
          display: block;
          & .img_wrap {
            width: calc(6.25vw * 16);
            padding: 0 6.25vw;
          }
          & .text_wrap {
            width: calc(6.25vw * 16);
            padding: 6.25vw 6.25vw 0 6.25vw;
            & > div {
              & h3 {
                justify-content: center;
              }
              & p {
                &.outline {
                  text-align: center;
                }
                &.spec {
                  text-align: center;
                }
              }
              & .tag {
                justify-content: center;
              }
            }
          }
        }
      }
    }
  }

  /* layout_common */
  .layout_common {
    & > .inner {
      width: calc(6.25% * 16);
      padding: calc(6.25vw * 2) 6.25vw;
      & > .title_wrap {
        .title {
          padding: 0 0 calc(6.25vw / 1) 0;
        }
      }
      & > .img_wrap {
        max-width: calc(6.25vw * 10);
      }
      & > .salon_menu {
        font-size: 12rem;
        & > h5 {
          padding: calc(6.25vw / 1) 0 8px 0;
        }
      }
    }
  }

  /* layout_list */
  .layout_list {
    & > .inner {
      padding: calc(6.25vw * 2) 6.25vw;
      & > ul {
        grid-template-columns: auto;
        gap: 6.25vw;
        & > li {
          & .img_wrap {
            width: calc(6.25vw * 8);
            margin: 0 auto
          }
        }
      }
    }
  }

  /* layout_faq */
  .layout_faq {
    & > .inner {
      width: 87.5vw;
      margin: 0 auto calc(6.25vw * 2) auto;
      & .accordion {
        line-height: 1.75;
      }
    }
    & .title {
      margin: calc(6.25vw * 2) 0 6.25vw 0;
    }
  }

  /* layout_news */
  .layout_news > .inner { padding: calc(6.25vw * 2) 0; }
  .layout_news .title { padding: 0 6.25vw calc(6.25vw / 1) 6.25vw; }
  .layout_news .slick-slider .slick-slide { width: calc(6.25vw * 14 / 1); }
  .layout_news .slick-slider .slick-slide dd > div { padding: 0 0 0 1em; }

  /* layout_plan  */
  .layout_plan > .inner { padding: calc(6.25vw * 2) 0 calc(6.25vw * 2 + 60px) 0; }
  .layout_plan .title { padding: 0 6.25vw calc(6.25vw / 1) 6.25vw; }
  .layout_plan .slick-slider .slick-slide { width: calc(6.25vw * 14 / 1); }
  .layout_plan .slick-slider .slick-slide .text_wrap { margin: calc(6.25vw / 2) 0 0 0; }

  /* layout_map */

  /* layout_access */
  .layout_access {
    & > .inner {
      padding: 12.5vw 0;
      & .access_detail_wrap {
        & .access_detail {
          width: 100%;
          max-width: 100%;
          padding: calc(6.25vw / 1) 0 0 0;
          & .title {
            margin: 0;
          }
          & li:nth-of-type(even),
          & li:nth-of-type(even).x2,
          & li:nth-of-type(even).x3 {
            height: auto;
            min-height: 75px;
            padding: 1em 0 1em 32px;
            font-size: 12rem;
          }
          .train & {
            & li.x2:nth-of-type(even)::before,
            & li.x2:nth-of-type(even)::after,
            & li.x3:nth-of-type(even)::before,
            & li.x3:nth-of-type(even)::after {
              height: auto;
              min-height: 75px;
            }
          }
        }
        & .accordion {
          pointer-events: auto;
        }
      }
      & .note {
        width: calc(6.25vw * 14);
        margin: calc(6.25vw / 1) auto 0 auto;
        padding: 6.25vw;
      }
    }
  }

  /* layout_pagenav */
  .layout_pagenav {
    & > .inner {
      padding: calc(6.25vw * 2) 6.25vw;
      & > ul {
        grid-template-columns: repeat(auto-fit, calc((100% - (3.125vw * 1)) / 2));
        gap: 6.25vw calc(6.25vw / 2);
        & > li {
          & .text_wrap {
            padding: 8px 0 0 0;
            & p {
              display: none;
            }
          }
        }
      }
    }
  }

  /* layout_bnr */
  .layout_bnr {
    & > .inner {
      padding: calc(6.25vw * 2) 6.25vw;
      & > ul {
        & > li {
          & .text_wrap {
            & p {
              font-size: 12rem;
            }
          }
        }
      }
    }
  }

  .insta li { width: calc(6.25vw * 7); }
  .insta ul > li:nth-of-type(3) { display: none; }
  .insta li.logo {
    border-radius: 0 5px 5px 0;
    padding: 10px;
  }
  .insta li.logo .text_wrap .pict i {
    width: 20px;
    height: 20px;
  }
  .insta li.logo .text_wrap .title { font-size: 16rem; }

}