@charset "utf-8";
/* CSS Document */

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
共通
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
body {
  #contents_wrap {
    padding: 12rem 2rem;
    @media screen and (max-width: 768px) {
      padding: 6rem 2rem;
    }

    .contents {
      max-width: 1200px;
      margin: auto;

      /* タイトル */
      .page_title {
        text-align: center;
        margin-bottom: 9.6rem;
        @media screen and (max-width: 768px) {
          margin-bottom: 4.8rem;
        }
        .en {
          font-size: 4.8rem;
          font-weight: 700;
          @media screen and (max-width: 480px) {
            font-size: 3.2rem;
          }
        }
        .ja {
          font-size: var(--fsize_s);
          letter-spacing: 0.1em;
          font-weight: 500;
          margin-top: 1em;
          padding: 1em 0 0 0.1em;
          position: relative;
          &::before {
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 4.8em;
            height: 1px;
            background-color: #000;
          }
        }
      }

      /* 本文 */
      p {
        font-size: var(--fsize_m);
        line-height: 2;
        letter-spacing: 0.05em;
      }
    }
  }
}
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
お問い合わせ
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
body.contact_form {
  #contents_wrap {
    .contents {
      .otoiawase_wrap {
        display: flex;
        justify-content: space-between;
        @media screen and (max-width: 768px) {
          flex-direction: column;
          gap: 4rem;
        }
        .item {
          width: 48%;
          max-width: 580px;
          box-sizing: border-box;
          @media screen and (max-width: 768px) {
            width: 100%;
            margin: auto;
          }
          &.sns {
            p {
              text-align: center;
            }
            background-color: #eee;
            padding: 3.2rem 2rem;

            .button_wrap {
              margin: 3.2rem 0 6.4rem;
              @media screen and (max-width: 768px) {
                margin: 2.4rem 0 4.8rem;
              }
            }
            .list-sns_button {
              margin-top: 3.2rem;
              @media screen and (max-width: 768px) {
                margin-top: 2.4rem;
              }
              li {
                margin: 1rem 0;
                a {
                  display: flex;
                  border: 1px solid #000;
                  background-color: #fff;
                  align-items: center;
                  justify-content: center;
                  height: 6.4rem;
                  max-width: 36rem;
                  margin: auto;
                  font-size: var(--fsize_m);
                  gap: 1em;
                  border-radius: 0.4em;
                  @media screen and (max-width: 768px) {
                    height: 4.8rem;
                  }
                  .icon {
                    width: 3.2rem;
                    @media screen and (max-width: 768px) {
                      width: 2.8rem;
                    }
                  }
                  .text {
                    width: 8em;
                  }
                }
              }
            }
          }
          &.mail {
            h3 {
              font-size: var(--fsize_l);
              font-weight: 700;
              letter-spacing: 0.05em;
              line-height: 1;
              border-left: 4px solid #000;
              padding: 0 0 0.5em 0.5em;
              margin: 1.5em 0 1em;
              @media screen and (max-width: 480px) {
              }
            }
          }
        }
      }
    }
  }
}
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
よくある質問
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
body.post-type-archive-faq {
  #contents_wrap {
    .contents {
      .faq_wrap {
        display: flex;
        justify-content: space-between;
        @media screen and (max-width: 768px) {
          flex-direction: column;
          gap: 4rem;
        }
        /* 項目リスト */
        .faq-term-list_wrap {
          width: 35%;
          position: relative;
          @media screen and (max-width: 768px) {
            width: 100%;
          }
          .faq-term-list {
            position: sticky;
            top: 12rem;
            @media screen and (max-width: 768px) {
              position: static;
              display: flex;
              flex-wrap: wrap;
            }
            .faq-term-list__item {
              margin-bottom: 1.2rem;
              @media screen and (max-width: 768px) {
                margin-bottom: 1.2rem;
                width: 50%;
              }
              a {
                display: block;
                border-left: 0.5em solid #000;
                font-size: 2rem;
                font-weight: 700;
                letter-spacing: 0.1em;
                padding: 1em 0 1em 0.75em;
                @media screen and (max-width: 768px) {
                  font-size: var(--fsize_m);
                  padding: 0.5em 0 0.5em 0.5em;
                  span.yajirushi {
                    padding-right: 1em;
                    &::after {
                      transform: translateY(-25%) rotate(90deg);
                    }
                  }
                }
              }
            }
          }
        }
        /* 回答 */
        .faq-term-entries_wrap {
          width: 60%;
          @media screen and (max-width: 768px) {
            width: 100%;
          }
          h3.faq-term-title {
            font-size: 2rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            line-height: 1.5;
            margin-bottom: 1.2em;
            @media screen and (max-width: 768px) {
              font-size: var(--fsize_l);
            }
          }
          .faq-term-wrap {
            margin-bottom: 6.4rem;
            @media screen and (max-width: 768px) {
              margin-bottom: 4.8rem;
            }
            dl.faq-item {
              margin-bottom: 0.8rem;
              border: 1px solid #000;

              dt.faq-item__question {
                padding: 2.4rem 7.4rem;
                position: relative;
                cursor: pointer;
                @media screen and (max-width: 768px) {
                  padding: 1.6rem 4.8rem;
                }
                &::before,
                &::after {
                  content: "";
                  position: absolute;
                  width: 1.8rem;
                  height: 2px;
                  background-color: #000;
                  right: 2.4rem;
                  top: 50%;
                  transition: all 0.2s ease-out;
                }
                &::before {
                  transform: rotate(90deg);
                }
                @media screen and (max-width: 768px) {
                  &::before,
                  &::after {
                    width: 1.2rem;
                    right: 1.6rem;
                  }
                }
                &.open {
                  &::before {
                    transform: rotate(0);
                  }
                }

                div {
                  position: relative;
                  font-size: 2rem;
                  line-height: 1.5;
                  font-weight: 500;
                  letter-spacing: 0.1em;
                  @media screen and (max-width: 768px) {
                    font-size: var(--fsize_m);
                  }
                  &::before {
                    content: "Q";
                    font-size: 3.2rem;
                    font-weight: 500;
                    position: absolute;
                    font-family: "Lexend Deca", sans-serif;
                    left: -5rem;
                    top: -1rem;
                  }
                  @media screen and (max-width: 768px) {
                    &::before {
                      font-size: 2.4rem;
                      left: -3.2rem;
                      top: -0.8rem;
                    }
                  }
                }
              }
              dd.faq-item__answer {
                padding: 2.4rem 3.2rem 2.4rem 7.4rem;
                border-top: 1px dashed #000;
                display: none;
                @media screen and (max-width: 768px) {
                  padding: 1.6rem 2rem;
                }
                h4 {
                  font-size: var(--fsize_m);
                  line-height: 1.5;
                  margin: 1em 0;
                }
                p {
                  margin: 1em auto;
                  a {
                    text-decoration: underline;
                  }
                  &.step {
                    padding: 0 0 2em 1em;
                    position: relative;
                    &::after {
                      content: "";
                      position: absolute;
                      display: block;
                      width: 1em;
                      height: 1em;
                      background-image: url(../img/common/icon-yajirushi-black.svg);
                      background-repeat: no-repeat;
                      background-size: contain;
                      background-position: center center;
                      bottom: 0;
                      left: 50%;
                      transform: translateX(-50%) rotate(90deg);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
店舗情報
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
body.shop-info {
  #contents_wrap {
    .contents {
      .shop-info_wrap {
        display: flex;
        justify-content: space-between;
        margin-bottom: 12rem;
        @media screen and (max-width: 768px) {
          flex-direction: column-reverse;
          margin-bottom: 8rem;
        }
        section {
          width: 49%;
          max-width: 580px;
          @media screen and (max-width: 768px) {
            width: 100%;
            max-width: 100%;
          }
          &.photo {
            @media screen and (max-width: 768px) {
              max-width: 600px;
              margin: 4rem auto 0;
            }
            .img_wrap {
              display: flex;
              flex-wrap: wrap;
              gap: 1.6rem;
              .img-item {
                width: calc(50% - 0.8rem);
                &.img-01 {
                  width: 100%;
                }
              }
            }
          }
          &.data {
            p.lead_copy {
              margin-bottom: 6.4rem;
              @media screen and (max-width: 768px) {
                margin-bottom: 4.8rem;
              }
            }

            .gankyo_wrap {
              margin: 4.8rem 0;
              @media screen and (max-width: 768px) {
                margin: 3.2rem 0;
              }
            }
            h3 {
              font-size: var(--fsize_l);
              line-height: 1.5;
              letter-spacing: 0.1em;
              margin-bottom: 1em;
              @media screen and (max-width: 768px) {
                margin-bottom: 2.4rem;
              }
            }
            p {
              font-size: var(--fsize_s);
              word-break: break-all;
              margin-bottom: 1em;
              &.brand {
                margin-bottom: 4.8rem;
                @media screen and (max-width: 768px) {
                  margin-bottom: 3.2rem;
                }
              }
            }
            .payment {
              margin-bottom: 4.8rem;
              @media screen and (max-width: 768px) {
                margin-bottom: 3.2rem;
              }
              h4.aripaylogo {
                width: 14rem;
                margin-bottom: 1.6rem;
                @media screen and (max-width: 768px) {
                  width: 12rem;
                  margin: auto;
                }
              }
              dl {
                dt {
                  font-size: var(--fsize_m);
                  font-weight: 500;
                  color: #666;
                  margin-bottom: 0.5em;
                }
                dd:first-of-type {
                  margin-bottom: 1.6rem;
                }
              }
              @media screen and (max-width: 768px) {
                .payment-img-sp {
                  width: 80%;
                  margin: auto;
                  min-width: 320px;
                }
              }
              @media screen and (max-width: 320px) {
                width: 100%;
                min-width: 100%;
              }
            }
          }
        }
      }

      /* Googleマップ */
      .google_map_wrap {
        width: 100%;
        height: 46rem;
        @media screen and (max-width: 480px) {
          height: 100vw;
        }
        iframe {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
靴
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
body {
  &.post-type-archive-shoes,
  &.shoes {
    #contents_wrap {
      .contents {
        h1.shoes_title {
          max-width: 54rem;
          width: 70%;
          margin: auto auto 7.2rem;
          @media screen and (max-width: 768px) {
            margin: auto auto 4.8rem;
            max-width: 40rem;
          }
        }
        /* メインスライダー */
        .shoes_main_slider_wrap {
          position: relative;
          .slider_title {
            top: 8.8rem;
            position: absolute;
            z-index: 10;
            color: #fff;
            width: 100%;
            text-align: center;
            @media screen and (max-width: 768px) {
              top: 1.6rem;
            }
            h2 {
              font-size: 4.8rem;
              font-weight: 200;
              padding-left: 0.2em;
              letter-spacing: 0.2em;
              margin-bottom: 1.1em;
              @media screen and (max-width: 768px) {
                font-size: var(--fsize_xl);
                margin-bottom: 0.4em;
              }
            }
            .copy {
              font-size: var(--fsize_ll);
              font-weight: 300;
              letter-spacing: 0.1em;
              padding-left: 0.1em;
              line-height: 1.5;
              @media screen and (max-width: 768px) {
                font-size: var(--fsize_s);
              }
            }
          }
        }
        /* キャッチコピー */
        .shoes_catch_wrap {
          margin: 6.4rem auto 12rem;
          text-align: center;
          font-size: 3.6rem;
          line-height: 2;
          letter-spacing: 0.2em;
          padding-left: 0.2em;
          @media screen and (max-width: 768px) {
            font-size: var(--fsize_l);
            letter-spacing: 0.1em;
            padding-left: 0.1em;
            margin: 3.2rem auto 4.8rem;
          }
        }
        /* ショップデータ */
        .about_yamamura_wrap {
          margin-bottom: 18rem;
          @media screen and (max-width: 768px) {
            margin-bottom: 9rem;
          }
          .shop_info_wrap {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12rem;
            @media screen and (max-width: 768px) {
              flex-direction: column;
              gap: 4rem;
              margin-bottom: 8rem;
            }
            .box {
              width: 48%;
              max-width: 580px;
              @media screen and (max-width: 768px) {
                width: 100%;
                max-width: 100%;
              }
            }
            .text_box {
              h3 {
                font-size: var(--fsize_xxl);
                font-weight: 400;
                letter-spacing: 0.2em;
                margin-bottom: 1.5em;
              }
              p {
                margin-bottom: 3em;
              }
              h4 {
                font-size: var(--fsize_m);
                letter-spacing: 0.05em;
                margin-bottom: 0.75em;
              }
              address {
                font-style: normal;
                ul {
                  line-height: 2;
                  font-size: var(--fsize_m);
                  letter-spacing: 0.05rm;
                  font-weight: 500;
                  li {
                    &.tel {
                      margin: 1.5em 0;
                    }
                    &.sns {
                      vertical-align: bottom;
                      margin-top: 1rem;
                      .icon {
                        display: inline-block;
                        width: 2.4rem;
                        margin-right: 0.75em;
                      }
                      .web {
                        vertical-align: bottom;
                        display: inline-block;
                        height: 2.4rem;
                        padding: 0 1.25em;
                        background-color: #000;
                        font-size: var(--fsize_ss);
                        font-weight: 500;
                        letter-spacing: 0.1em;
                        color: #fff;
                        border-radius: 0.6em 0 0.6em 0;
                      }
                    }
                  }
                }
              }
            }
          }
          .tokutyo_wrap {
            display: flex;
            gap: 5%;
            @media screen and (max-width: 768px) {
              flex-direction: column;
              gap: 3rem;
              align-items: center;
            }
            .item {
              width: 30%;
              box-sizing: border-box;
              padding: 3.6rem 3.8rem 3.2rem;
              border: 1px solid #000;
              border-radius: 1.2rem 0 1.2rem 0;
              position: relative;
              @media screen and (max-width: 768px) {
                width: 100%;
                max-width: 500px;
              }
              h4 {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                font-size: var(--fsize_xl);
                text-align: center;
                transform: translateY(-50%);
                font-weight: 500;
                @media screen and (max-width: 768px) {
                  font-size: var(--fsize_l);
                }
                span {
                  display: inline-block;
                  background-color: #fff;
                  box-sizing: border-box;
                  padding: 0 1em;
                }
              }
              p {
                line-height: 1.75;
                font-size: var(--fsize_l);
                letter-spacing: 0;
                @media screen and (max-width: 768px) {
                  font-size: var(--fsize_m);
                }
              }
            }
          }
        }
        /* ラインナップ */
        .linup_wrap {
          .shoes_post_list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin-bottom: 18rem;
            @media screen and (max-width: 768px) {
              margin-bottom: 6rem;
            }
            .entry_item {
              width: 49%;
              max-width: 580px;
              a {
                display: block;
                .entry_title_wrap {
                  text-align: center;
                  line-height: 1.5;
                  letter-spacing: 0.1em;
                  margin-bottom: 4.8rem;
                  position: relative;
                  @media screen and (max-width: 768px) {
                    margin-bottom: 3.2rem;
                  }
                  &::after {
                    content: "";
                    display: block;
                    width: 1px;
                    height: 6.4rem;
                    background-color: #000;
                    position: absolute;
                    bottom: 0;
                    left: 50%;
                    transform: translate(-50%, 120%);
                  }
                  @media screen and (max-width: 768px) {
                    &::after {
                      height: 4.8rem;
                    }
                  }
                  h3 {
                    font-size: var(--fsize_xl);
                    margin-bottom: 1rem;
                    padding-left: 0.1em;
                    @media screen and (max-width: 768px) {
                      font-size: var(--fsize_ll);
                    }
                  }
                  p {
                    font-size: var(--fsize_l);
                    font-weight: 500;
                    padding-left: 0.1em;
                    line-height: 1.5;
                    @media screen and (max-width: 768px) {
                      font-size: var(--fsize_m);
                    }
                  }
                }
                .thumb {
                  aspect-ratio: 58/80;
                }
              }
            }
          }
        }
        /* エントリー一覧 */
        .shoes_enty_wrap {
          .entry_contents {
            display: flex;
            justify-content: space-between;
            margin-bottom: 18rem;
            &:last-child {
              margin-bottom: 0;
            }
            @media screen and (max-width: 768px) {
              flex-direction: column;
              gap: 3rem;
              margin-bottom: 9rem;
            }
            .box {
              width: 48.5%;
              max-width: 580px;
              box-sizing: border-box;
              @media screen and (max-width: 768px) {
                width: 100%;
                max-width: 100%;
              }
              &.text_box {
                h3 {
                  font-size: var(--fsize_ll);
                  font-weight: 500;
                  line-height: 1.5;
                  margin-bottom: 1em;
                }
                .price {
                  font-size: var(--fsize_xl);
                  margin-bottom: 1.3125em;
                  em {
                    font-style: normal;
                  }
                  span {
                    font-size: var(--fsize_s);
                    display: inline-block;
                    font-weight: 300;
                  }
                }
                h4 {
                  font-size: var(--fsize_m);
                  font-weight: 600;
                  line-height: 1.5;
                  letter-spacing: 0.1em;
                  margin-bottom: 0.75em;
                }
                p.zaiko {
                  font-size: var(--fsize_s);
                  line-height: 1.5;
                  margin: 1em auto;
                  color: #666;
                }
                /* サイズ */
                .shoe-sizes-list {
                  display: flex;
                  flex-wrap: wrap;
                  gap: 0.5rem;
                  margin-bottom: 3.2rem;
                  li {
                    font-size: var(--fsize_s);
                    font-weight: 500;
                    width: 4em;
                    height: 2em;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    border: 1px solid #000;
                    box-sizing: border-box;
                    position: relative;

                    &.out-of-stock {
                      color: #999;
                      border-color: #999;
                      &::after {
                        content: "";
                        display: block;
                        width: 1px;
                        height: 4.4em;
                        background-color: #999;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%) rotate(65deg);
                      }
                    }
                  }
                }
                /* 詳細 */
                dl {
                  dt {
                    font-size: var(--fsize_m);
                    font-weight: 600;
                    line-height: 1.5;
                    letter-spacing: 0.1em;
                    margin-bottom: 0.75em;
                  }
                  dd {
                    font-size: var(--fsize_m);
                    line-height: 2;
                    margin-bottom: 1.6rem;
                    margin-bottom: 3.2rem;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
眼鏡
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
body {
  &.post-type-archive-glasses,
  &.tax-glasses_tax,
  &.single-glasses {
    #contents_wrap {
      .contents {
        .entry_contents_wrap {
          .glass_wrap {
            display: flex;
            justify-content: space-between;
            margin-bottom: 18rem;

            @media screen and (max-width: 768px) {
              flex-direction: column;
              gap: 3rem;
              margin-bottom: 9rem;
            }
            .box {
              width: 48.5%;
              max-width: 580px;
              box-sizing: border-box;
              @media screen and (max-width: 768px) {
                width: 100%;
                max-width: 100%;
              }
              &.text_box {
                h3 {
                  font-size: var(--fsize_ll);
                  font-weight: 500;
                  line-height: 1.5;
                  margin-bottom: 1em;
                }
                .price {
                  font-size: var(--fsize_xl);
                  margin-bottom: 1.3125em;
                  em {
                    font-style: normal;
                  }
                  span {
                    font-size: var(--fsize_s);
                    display: inline-block;
                    font-weight: 300;
                  }
                }
                /* BASEのボタン */
                .base_button_wrap {
                  margin-bottom: 6.4rem;
                  @media screen and (max-width: 768px) {
                    margin-bottom: 3.2rem;
                  }
                  a {
                    display: block;
                    border: 1px solid #999;
                    text-align: center;
                    padding: 0.8rem;
                    span {
                      display: inline-block;
                      vertical-align: baseline;
                      &.logo {
                        width: 10rem;
                      }
                      &.text {
                        font-size: var(--fsize_l);
                        margin-left: 0.2em;
                        vertical-align: 0.45em;
                      }
                    }
                  }
                }

                /* サイズ */
                .shoe-sizes-list {
                  display: flex;
                  flex-wrap: wrap;
                  gap: 0.5rem;
                  margin-bottom: 3.2rem;
                  li {
                    font-size: var(--fsize_s);
                    font-weight: 500;
                    width: 4em;
                    height: 2em;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    border: 1px solid #000;
                    box-sizing: border-box;
                    position: relative;

                    &.out-of-stock {
                      color: #999;
                      border-color: #999;
                      &::after {
                        content: "";
                        display: block;
                        width: 1px;
                        height: 4.4em;
                        background-color: #999;
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%) rotate(65deg);
                      }
                    }
                  }
                }
                /* 詳細 */
                dl {
                  dt {
                    font-size: var(--fsize_m);
                    font-weight: 600;
                    line-height: 1.5;
                    letter-spacing: 0.1em;
                    margin-bottom: 0.75em;
                  }
                  dd {
                    font-size: var(--fsize_m);
                    line-height: 2;
                    margin-bottom: 1.6rem;
                    margin-bottom: 3.2rem;
                  }
                }
              }
            }
          }
          #the_content {
            margin-bottom: 18rem;
            @media screen and (max-width: 768px) {
              margin-bottom: 9rem;
            }
          }
        }
      }
    }
  }
}
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
お知らせ
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
article.entry_contents_wrap.news_wrap {
  .entry_data_wrap {
    margin-bottom: 9.6rem;
    letter-spacing: 0.1em;
    text-align: center;
    @media screen and (max-width: 768px) {
      margin-bottom: 4.8rem;
    }
    .postdate {
      font-size: var(--fsize_l);
      padding-left: 0.1em;
      font-weight: 500;
      margin-bottom: 4.2rem;
      @media screen and (max-width: 768px) {
        font-size: var(--fsize_s);
        margin-bottom: 2.4rem;
      }
    }
    h1 {
      font-size: var(--fsize_xxl);
      line-height: 1.5;
      font-weight: 600;
      margin-bottom: 1em;
      @media screen and (max-width: 768px) {
        font-size: var(--fsize_xl);
      }
    }
  }
  #the_content {
    margin-bottom: 12rem;
    @media screen and (max-width: 768px) {
      margin-bottom: 6rem;
    }
  }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
トップページ
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
body.home {
  #page_wrap {
    padding-top: 0;
  }
  /* バナー */
  .banner-float {
    position: fixed;
    bottom: 0;
    right: 0;
    max-width: 32rem;
    width: 28%;
    z-index: 100;
    visibility: visible;
    opacity: 1;
    transition: all 0.3s ease-in;
    &.on {
      visibility: hidden;
      opacity: 0;
    }
    @media screen and (max-width: 768px) {
      width: 38%;
    }
    @media screen and (max-width: 480px) {
      width: 70%;
    }
  }
  #frontpage_wrap {
    /* タイトル */
    .page_title {
      text-align: center;
      margin-bottom: 4.8rem;
      @media screen and (max-width: 768px) {
        margin-bottom: 4.8rem;
      }
      .en {
        font-size: var(--fsize_xxl);
        font-weight: 700;
        @media screen and (max-width: 480px) {
          font-size: var(--fsize_xl);
        }
      }
      .ja {
        font-size: var(--fsize_s);
        letter-spacing: 0.1em;
        font-weight: 500;
        margin-top: 1em;
        padding: 1em 0 0 0.1em;
        position: relative;
        &::before {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 4.8em;
          height: 1px;
          background-color: #000;
        }
      }
    }
    /* ショップ */
    section.shop-info_wrap {
      margin: 18rem 0 12rem;
      @media screen and (max-width: 768px) {
        margin: 9rem 0 6rem;
      }
      .inner {
        max-width: 1200px;
        display: flex;
        justify-content: space-between;
        padding: 0 2rem;
        gap: 2rem;
        margin: auto;
        @media screen and (max-width: 768px) {
          flex-direction: column;
          gap: 4rem;
        }

        .shop_wrap {
          display: flex;
          align-items: flex-start;
          gap: 2rem;
          @media screen and (max-width: 768px) {
            flex-direction: column;
            align-items: stretch;
          }
          .shop_img {
            width: 26.5rem;
            aspect-ratio: 265/185;
            @media screen and (max-width: 768px) {
              width: 100%;
              margin: auto;
              overflow: hidden;
            }
          }
        }
        .calendar_wrap {
          .xo-event-calendar {
            .xo-months {
              .xo-month-wrap {
                font-size: var(--fsize_s);
              }
            }
            .holiday-titles {
              .holiday-title {
                font-size: var(--fsize_ss) !important;
              }
            }
          }
        }
      }
      .button_wrap {
        margin-top: 6.4rem;
        @media screen and (max-width: 768px) {
          margin-top: 3.2rem;
        }
      }
    }
    /* 眼鏡製作技師 */
    .gankyo_wrap {
      justify-content: center;
      margin: 12rem 2rem 18rem;
      @media screen and (max-width: 768px) {
        margin: 6rem 2rem;
      }
    }
    /* 山村製靴店 */
    .shoew_wrap {
      max-width: 1200px;
      padding: 0 2rem;
      margin: 18rem auto;
      position: relative;
      @media screen and (max-width: 768px) {
        margin: 6rem auto;
        padding-bottom: 10rem;
      }
      @media screen and (max-width: 480px) {
        padding-bottom: 7rem;
      }
      .img_wrap {
        position: relative;
        z-index: 1;
      }
      h2 {
        position: absolute;
        max-width: 34.7rem;
        width: 50%;
        z-index: 10;
        top: 6.4rem;
        left: 50%;
        transform: translateX(-50%);
        @media screen and (max-width: 768px) {
          top: 2rem;
        }
      }
      .button_wrap {
        position: absolute;
        z-index: 20;
        width: 100%;
        left: 0;
        top: 20rem;
        @media screen and (max-width: 768px) {
          top: auto;
          bottom: 0;
          .button-marukaku {
            &.white {
              background-color: #000;
              span {
                color: #fff;
                &.yajirushi {
                  &::after {
                    background-image: url(../img/common/icon-yajirushi-white.svg);
                  }
                }
              }
            }
          }
        }
      }
    }
    /* インスタ */
    .instagram_wrap {
      margin: 9.6rem auto 18rem;
      padding: 0 2rem;
      @media screen and (max-width: 768px) {
        margin: 6rem auto;
      }
    }
    /* 新着情報 */
    .news_wrap {
      padding: 0 2rem;
      .post_list {
        max-width: 1200px;
        margin: auto auto 2.4rem;
      }
    }
    /* 取扱ブランド */
    .brands_wrap {
      background-color: #eaf0f6;
      padding: 9.6rem 2rem;
      margin: 0 0 9.6rem;
      @media screen and (max-width: 768px) {
        padding: 4.8rem 2rem;
        margin: 0 0 6rem;
      }

      .brands_logo {
        max-width: 1200px;
        margin: auto auto 6.4rem;
        @media screen and (max-width: 768px) {
          max-width: 480px;
          margin: auto auto 4.8rem;
        }
      }
    }
    /* メインイメージ */
    .man_img_wrap {
      width: 100%;
      min-height: 100vh;
      min-height: 100lvh;
      display: flex;
      align-items: center;
      position: relative;
      box-sizing: border-box;
      @media screen and (max-width: 768px) {
        padding-top: 4.8rem;
        align-items: flex-start;
        min-height: 120vw;
      }
      @media screen and (max-width: 480px) {
        flex-direction: column;
        height: 100vh;
        height: 100lvh;
        min-height: 60rem;
      }
      .main_slider_wrap {
        max-width: 1000px;
        width: 70%;
        @media screen and (max-width: 768px) {
          width: 100%;
        }
      }

      h1.glash_title {
        position: absolute;
        text-align: center;
        left: min(70%, 924px);
        width: calc(98% - min(70%, 1000px));
        font-size: 11vw;
        bottom: 50%;
        transform: translate(0, 50%);
        @media screen and (max-width: 768px) {
          width: 100%;
          left: 0;
          bottom: 20%;
          transform: none;
          font-size: 10rem;
        }
        @media screen and (max-width: 480px) {
          position: static;
          transform: none;
          font-size: 8rem;
        }
        span {
          display: block;
          &.glash {
            font-weight: 100;
          }
          &.optique {
            font-size: 0.18125em;
            font-weight: 400;
            letter-spacing: 0.05em;
          }
        }
      }
      .scroll_wrap {
        position: absolute;
        left: 50%;
        bottom: 10%;
        transform: translate(-50%, 0);
        font-size: var(--fsize_ll);
        letter-spacing: 0.05em;
        padding-left: 0.05em;
        &::after {
          content: "";
          display: block;
          width: 0.6em;
          position: absolute;
          aspect-ratio: 10/16;
          background-image: url(../img/common/icon-yajirushi-black.svg);
          background-repeat: no-repeat;
          background-size: contain;
          bottom: 0;
          left: 50%;
          transform: translate(-50%, 120%) rotate(90deg);
          animation-name: scroll_anime;
          animation-duration: 2s;
          animation-iteration-count: infinite;
        }
        @media screen and (max-width: 480px) {
          bottom: auto;
          top: 70%;
        }
      }
    }
  }
}
@keyframes scroll_anime {
  0% {
    transform: translate(-50%, 120%) rotate(90deg);
  }

  50% {
    transform: translate(-50%, 160%) rotate(90deg);
  }
  100% {
    transform: translate(-50%, 120%) rotate(90deg);
  }
}