html {
  font-size: 62.5%; }

* {
  box-sizing: border-box; }

body {
  font-family: 'Noto Sans JP', sans-serif; }

body a img {
  transition: all 0.5s; }
body a:hover {
  opacity: 0.5; }

.btn {
  display: block;
  width: 90%;
  max-width: 400px;
  border: 1px solid #000;
  text-align: center;
  color: #000;
  margin: 3em auto;
  padding: 10px; }
  @media (min-width: 768px) {
    .btn {
      font-size: 22px;
      font-size: 2.2rem;
      line-height: 1.5909090909; } }
  @media (max-width: 767px) {
    .btn {
      font-size: 20px;
      font-size: 2rem;
      line-height: 1.75; } }
  .btn span {
    display: block;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 2;
    font-weight: 500; }

.bottom_img {
  width: 100%; }

.top_visual {
  position: relative;
  width: 100%;
  background: url(../images/top/top_back.jpg) no-repeat center;
  background-size: cover; }
  @media (min-width: 768px) {
    .top_visual {
      margin-top: 82px;
      height: calc(100vh - 70px);
      max-height: 700px; } }
  @media (max-width: 767px) {
    .top_visual {
      margin-top: 60px;
      height: 300px; } }
.top_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); }
  @media (min-width: 768px) {
    .top_logo {
      width: 250px; } }
  @media (max-width: 767px) {
    .top_logo {
      width: 150px; } }

@media (min-width: 768px) {
  .about {
    margin: 4em auto; } }
@media (max-width: 767px) {
  .about {
    margin: 2em auto; } }
.about h2 {
  font-weight: 200;
  margin-bottom: 1em;
  letter-spacing: 0.1em; }
  @media (min-width: 768px) {
    .about h2 {
      font-size: 35px;
      font-size: 3.5rem;
      line-height: 1.7142857143; } }
  @media (max-width: 767px) {
    .about h2 {
      font-size: 25px;
      font-size: 2.5rem;
      line-height: 2; } }
@media (min-width: 768px) {
  .about p {
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 2.5; } }

.gallery {
  background: #EFEFEF; }
  .gallery .insta_btn {
    margin: 1em auto;
    display: block;
    max-width: 70px; }

.information_wrap {
  margin: 2em auto; }
  @media (min-width: 768px) {
    .information_wrap {
      display: flex;
      justify-content: space-around; } }
@media (min-width: 768px) {
  .information ul {
    width: 50%;
    max-width: 300px;
    padding: 1em; } }
.information ul li {
  margin-bottom: 1em; }
  .information ul li h4 {
    display: block;
    position: relative;
    letter-spacing: 0.1em;
    padding: 1em 0;
    font-weight: 200; }
    .information ul li h4::after {
      content: '';
      position: absolute;
      top: 50%;
      width: 100%;
      height: 1px;
      background: #000;
      z-index: 0; }
    .information ul li h4 span {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      background: #fff;
      padding-right: 1em;
      z-index: 1; }

.menu {
  background: #EFEFEF; }
  .menu_wrap {
    margin: 2em auto; }
    @media (min-width: 768px) {
      .menu_wrap {
        display: flex;
        justify-content: center; } }
    @media (min-width: 768px) {
      .menu_wrap ul {
        width: 50%;
        padding: 1em; } }
    .menu_wrap ul li {
      margin-bottom: 3em; }

.stylist {
  margin-top: 3em; }
  .stylist ul {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.5em; }
    @media (min-width: 768px) {
      .stylist ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        grid-gap: 50px; } }
    @media (max-width: 767px) {
      .stylist ul {
        width: 90%; } }
    @media (min-width: 768px) {
      .stylist ul li {
        width: calc((100% - 100px) / 3);
        min-width: 240px; } }
    @media (max-width: 767px) {
      .stylist ul li {
        margin-bottom: 3em; } }
    .stylist ul li .name {
      margin: 1em 0; }
      .stylist ul li .name h4 {
        font-size: 24px;
        font-size: 2.4rem;
        line-height: 1.6666666667;
        font-weight: 200;
        display: flex;
        justify-content: space-between;
        align-items: flex-end; }
        .stylist ul li .name h4 span {
          font-size: 15px;
          font-size: 1.5rem;
          line-height: 2; }

.product {
  max-width: 1200px;
  margin: 3em auto; }
  .product ul {
    margin: 2em auto;
    display: flex;
    flex-wrap: wrap;
    grid-gap: 30px; }
    @media (min-width: 768px) {
      .product ul li {
        width: calc((100% - 90px) / 4); } }
    @media (max-width: 767px) {
      .product ul li {
        width: calc((100% - 30px) / 2); } }
    .product ul li img {
      width: 100%;
      margin-bottom: 1em; }
    .product ul li span {
      font-family: "Noto Sans JP", sans-serif;
      font-weight: 500; }

.access {
  margin-top: 2em; }
  .access iframe {
    margin: 2em auto;
    width: 100%;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%); }