@charset "UTF-8";

@font-face {
  font-family: "NotoSerifJP";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/NotoSerifJP-Regular.woff2") format("woff2"),
       url("../fonts/NotoSerifJP-Regular.eot");
}
@font-face {
  font-family: "NotoSerifJP";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/NotoSerifJP-Bold.woff2") format("woff2"),
       url("../fonts/NotoSerifJP-Bold.eot");
}

html {
  font-size: 1rem;
}

body {
  font-family: "NotoSerifJP", "游明朝", "Yu Mincho", "游明朝体", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.05em;
  color: #333333;
}

img {
  max-width: 100%;
}

.sp {
  display: none;
}
@media screen and (max-width: 767px) {
  .sp {
    display: block;
  }
}

.pc {
  display: block;
}
@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}

.c-heading {
  font-size: 1.5rem;
}

.l-section {
  margin-top: 3.75rem;
}

@media screen and (min-width: 1024px) {
  .c-heading {
    font-size: 1.875rem;
  }

  .l-section {
    margin-top: 7.5rem;
  }
}

.l-main-visual {
  width: 100%;
  height: 100dvh;
  position: relative;
  &::before {
    content: '';
    width: 100%;
    min-height: 100vh;
    min-height: 100svh;
    background: url("../img/main-bg.webp") no-repeat center / cover;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
  }
  .title {
    width: 60%;
    max-width: 19.375rem;
    aspect-ratio: 1;
    background-color: rgba(255, 255, 255, 0.7);
    position: absolute;
    inset: 0;
    margin: auto;
    backdrop-filter: blur(12px);
    display: grid;
    place-content: center
  }
  .logo {
    display: grid;
    justify-content: center;
    img {
      width: 136px;
      aspect-ratio: 21 / 5;
      display: block;
    }
  }
}

@media screen and (min-width: 1024px) {
  .l-main-visual {
    width: 40%;
    height: 100vh;
    position: fixed;
    &::before {
      content: '';
      width: 40%;
      height: 100vh;
      min-height: 37.5rem;
    }
    .title {
      max-width: 18.75rem;
    }
    .logo {
      width: 8.125rem;
    }
  }
}


.l-main-content {
  width: 100%;
  background-color: #f2f2f2;
  padding: 4rem 1.25rem 1rem;
}

@media screen and (min-width: 1024px) {
  .l-main-content {
    width: 60%;
    margin-left: auto;
    padding: 4rem min(10%, 5%) 1rem;
  }
}

.p-top-main {
  max-width: 30rem;
  margin: 0 auto
}

@media screen and (min-width: 1024px) {
  .p-top-main {
    max-width: 40rem;
  }
}

.p-top-concept {
  .catch {
    width: 80%;
    max-width: 21.875rem;
    margin-top: 1.875rem;
  }
  .title {
    font-size: 	1.25rem;
    margin-top: 1.25rem;
  }
  .text {
    line-height: 2.2;
    margin-top: 1.875rem;
  }
  .photo {
    margin-top: 1.875rem;
  }
}

@media screen and (min-width: 1024px) {
.p-top-concept {
  .title {
    font-size: 	1.5rem;
  }
  .text {
    line-height: 2.2;
  }
  .photo {
    margin-top: 1.875rem;
  }
}
}

.p-top-online {
  .lead {
    margin-top: 1.25rem;
  }
  .link {
    margin-top: 1.25rem;
    a {
      color: #6f501e;
      border-bottom: 1px solid #6f501e;
      padding: 0 2rem 0.5rem 0;
      position: relative;
      transition: 0.3s;
      &:hover {
        padding-right: 2.3rem;
        opacity: 0.8;
      }
      &::before {
        content: '';
        width: 20px;
        height: 1px;
        background-color: #6f501e;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        display: inline-block;
        margin: auto 0;
      }
      &::after {
        content: "";
        position: absolute;
        top: calc(50% - 2px);
        right: 0;
        width: 10px;
        height: 1px;
        background-color: #6f501e;
        transform: rotate(45deg);
        transform-origin: calc(100% - 2px) 50%;
      }
    }
  }
}

@media screen and (min-width: 1024px) {
  .p-top-online {
    .link {
      margin-top: 1.875rem;
    }
  }
}

.p-top-shop {
  .list {
    margin-top: 1.25rem;
    display: grid;
    gap: 3.125rem;
    li {
      display: grid;
      justify-content: center;
    }
    .detail {
      margin-top: 0.625rem;
    }
    .title {
      font-size: 1.125rem;
      font-weight: bold;
    }
    .address {
      font-size: 0.875rem;
      margin-top: 0.625rem;
    }
    .info {
      font-size: 0.875rem;
    }
    .map {
      margin-top: 0.625rem;
      a {
        width: 7.5rem;
        line-height: 1.875rem;
        font-size: 0.8125rem;
        font-weight: bold;
        text-align: center;
        color: #666666;
        background-color: white;
        display: block;
      }
    }
  }
}

@media screen and (min-width: 1024px) {
  .p-top-shop {
    .list {
      gap: 3.125rem;
      li {
        grid-template-columns: 11.25rem 1fr;
        gap: 1.875rem;
      }
      .detail {
        margin-top: 0;
      }
      .title {
        line-height: normal;
      }
      .map {
        a {
          transition: 0.3s;
          &:hover {
            color: white;
            background-color: #666666;
          }
        }
      }
    }
  }
}

.p-top-member {
  padding: 1.25rem;
  background-color: #d3d3d3;
  .lead {
    margin-top: 0.625rem;
  }
  .wrap {
    margin-top: 1.25rem;
    padding: 1.5625rem;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.4);
    .point {
      display: grid;
      gap: 1.25rem;
      .item {
        text-align: center;
        padding: 1.25rem 	0.625rem;
        border-radius: 10px;
        background-color: white;
        img {
          max-width: 6.25rem;
          max-height: 6.25rem;
        }
      }
      .lead {
        font-size: 0.8125rem;
        margin-top: 0.625rem;
      }
      .member-link {
        color: white;
        background-color: #666666;
        .title {
          padding: 1.25rem 0;
        }
      }
    }
    .dl {
      margin-top: 1.875rem;
      display: grid;
      gap: 1.875rem;
      div + div {
        border-top: 1px dashed #666666;
        padding-top: 1.875rem;
      }
      dd {
        font-size: 0.9375rem;
        letter-spacing: normal;
        margin-top: 0.625rem;
      }
    }
  }
}

@media screen and (min-width: 1024px) {
  .p-top-member {
    padding: 1.875rem;
    .lead {
      margin-top: 0.625rem;
    }
    .wrap {
      padding: 1.875rem;
      .point {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
        .item {
          padding: 1.25rem 	0.625rem;
          display: grid;
          justify-content: center;
          img {
            max-width: 5rem;
            max-height: 5rem;
            margin: 0 auto;
          }
        }
        .lead {
          margin-top: auto;
        }
        .member-link {
          transition: 0.3s;
          cursor: pointer;
          &:hover {
            opacity: 0.7;
          }
        }
      }
      .dl {
        margin-top: 2.5rem;
      }
    }
  }
}


.l-footer {
  margin-top: 12.5rem;
  text-align: center;
  .insta {
    width: 3.125rem;
    margin: 0 auto 3.125rem;
    a {
      transition: .3s;
      &:hover {
        opacity: 0.7;
      }
    }
  }
}