@charset "utf-8";

/* ↓↓↓ common ↓↓↓ */
:root {
  --text-sans: 'Noto Sans JP', sans-serif;
  --text-zen: 'Zen Kaku Gothic New', sans-serif;
  --text-lato: 'Lato', sans-serif;
  --color-orange: #EF813A;
  --color-pink: #F48297;
}

body {
  position: relative;
  font-size: 1.6rem;
  font-family: var(--text-zen);
  background-color: #F8F3ED;
  background-image: url(../img/common/texture-bg.png);
  background-repeat: repeat-y;
  background-size: 100% auto;
  color: #313131;
  letter-spacing: 0.1em;
}

.-noscroll {
  overflow: hidden;
  height: 100vh;
}

.-pc {
  display: block;
}

.-sp {
  display: none;
}

@media (max-width: 768px) {
  .-pc {
    display: none;
  }

  .-sp {
    display: block;
  }
}

.-wb {
  display: inline-block;
}

/* ↑↑↑ common ↑↑↑ */

/* ↓↓↓ header ↓↓↓ */
header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  .logo {
    width: 22.8125vw;
    aspect-ratio: 292/125;
    border-radius: 0 0 1.875cqw 0;
    overflow: hidden;
    transition: opacity 300ms ease;
    @media (min-width: 769px) {
      &:hover {
        opacity: 0.7;
      }
    }
    @media (max-width: 768px) {
      width: 179px;
      aspect-ratio: 179/77;
      border-radius: 0 0 24px 0;
    }
  }
  .menu-btn {
    position: relative;
    margin: 2.5vw 2.8125vw 0 0;
    width: 5.625vw;
    height: fit-content;
    aspect-ratio: 1 / 1;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(170, 58, 58, 0.16);
    cursor: pointer;
    z-index: 1;
    transition: box-shadow 300ms ease;
    @media (max-width: 768px) {
      margin: 16px 16px 0 0;
      width: 55px;
    }
    span {
      position: absolute;
      translate: -50% 0;
      left: 50%;
      width: 2.65625cqw;
      height: 2px;
      border-radius: 999px;
      background-color: var(--color-orange);
      transition: translate 300ms ease, top 300ms ease, rotate 300ms ease;
      @media (max-width: 768px) {
        width: 27px;
        height: 2px;
      }
      &:nth-of-type(1) {
        top: 2.421875cqw;
        @media (max-width: 768px) {
          top: 23px;
        }
      }
      &:nth-of-type(2) {
        top: 3.046875cqw;
        @media (max-width: 768px) {
          top: 29px;
        }
      }
    }
    
    &.-active {
      box-shadow: 0 0 0 rgba(170, 58, 58, 0.16);
      span {
        position: absolute;
        translate: -50% -50%;
        &:nth-of-type(1) {
          top: 50%;
          rotate: 20deg;
        }
        &:nth-of-type(2) {
          top: 50%;
          rotate: -20deg;
        }
      }
    }
  }

  .menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 34.296875vw;
    aspect-ratio: 439/488;
    padding: 8.203125vw 5.625vw 6.25vw;
    border-radius: 0 0 0 1.875vw;
    box-shadow: 0 0 40px transparent;
    z-index: 0;
    overflow: hidden;
    visibility: hidden;
    transition: box-shadow 0s , visibility 0s 1000ms ease;
    @media (max-width: 768px) {
      width: 100vw;
      height: 455px;
      aspect-ratio: 375 / 455;
      border-radius: 0 0 0 24px;
      padding: 86px 68px 56px;
    }
    .bg {
      position: absolute;
      top: -50%;
      right: -50%;
      width: auto;
      height: 180%;
      aspect-ratio: 1 / 1;
      background-color: #fff;
      z-index: -1;
      border-radius: 50%;
      scale: 0;
      transform-origin: top right;
      box-shadow: 0 0 40px #D69F82;
      transition: scale 1000ms ease;
      @media (max-width: 768px) {
        width: 180%;
        height: auto;
      }
      @media (max-width: 512px) {
        width: auto;
        height: 180%;
      }
    }
    .list {
      opacity: 0;
      visibility: hidden;
      transition: opacity 300ms ease, visibility 0ms 300ms ease;
      .item {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        gap: 1.875vw;
        font-size: 1.5625vw;
        font-weight: 500;
        letter-spacing: 0.04em;
        padding-bottom: 1.875vw;
        border-bottom: 1px solid #FAF0E4;
        transition: opacity 300ms ease;
        @media (min-width: 769px) {
          &:hover {
            opacity: 0.7;
          }
        }
        @media (max-width: 768px) {
          gap: 16px;
          font-size: 1.6rem;
          padding-bottom: 24px;
        }
        .arrow {
          width: 1.25vw;
          height: 1.25vw;
          mask-image: url(../img/common/menu-arrow.svg);
          mask-repeat: no-repeat;
          mask-size: cover;
          background-color: var(--color-orange);
          @media (max-width: 768px) {
            width: 16px;
            height: 16px;
          }
        }
        + .item {
          padding-top: 1.875vw;
          @media (max-width: 768px) {
            padding-top: 24px;
          }
        }

        &:not([href]) {
          color: #BFBFBF;
          pointer-events: none;
          .arrow {
            background-color: #BFBFBF;
          }
        } 
      }
    }
    .other-link {
      margin-top: 2.34375vw;
      opacity: 0;
      visibility: hidden;
      transition: opacity 300ms ease, visibility 0ms 300ms ease;
      @media (max-width: 768px) {
        margin-top: 40px;
      }
      .link {
        position: relative;
        display: block;
        width: fit-content;
        font-size: 1.25vw;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-color: currentColor;
        transition: opacity 300ms ease;
        @media (min-width: 769px) {
          &:hover {
            opacity: 0.7;
          }
        }
        @media (max-width: 768px) {
          font-size: 1.5rem;
          margin-top: 40px;
        }

        + .link {
          margin-top: 0.3125vw;
          @media (max-width: 768px) {
            margin-top: 4px;
          }
        }

        &::after {
          content: '';
          position: absolute;
          translate: 0 -50%;
          top: 50%;
          right: -1.953125vw;
          width: 1.328125vw;
          height: 1.09375vw;
          background: url(../img/common/ex-link-deco.svg) no-repeat;
          background-size: cover;
          @media (max-width: 768px) {
            right: -25px;
            width: 17px;
            height: 14px;
          }
        }
      }
    }

    &.-active {
      visibility: visible;
      box-shadow: 0 0 40px #D69F82;
      transition: box-shadow 100ms 500ms ease;
      .bg {
        scale: 1;
      }
      .list,
      .other-link {
        opacity: 1;
        visibility: visible;
        transition: opacity 300ms 500ms ease;
      }
    }
  }
}
/* ↑↑↑ header ↑↑↑ */

/* ↓↓↓ footer ↓↓↓ */
footer {
  width: 100%;
  .block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background-color: #fff;
    padding: 1.09375vw 10.15625vw 1.015625vw 7.890625vw;
    @media (max-width: 768px) {
      flex-direction: column;
      padding: 5.866666666666666vw 16vw 8vw;
    }
    .logo {
      width: 22.5vw;
      transition: opacity 300ms ease;
      @media (max-width: 768px) {
        width: 62.4vw;
      }
      @media (min-width: 768px) {
        &:hover {
          opacity: 0.7;
        }
      }
    }
    .other-link {
      display: flex;
      gap: 7.03125vw;
      @media (max-width: 768px) {
        flex-direction: column;
        align-items: center;
        gap: 1.6vw;
      }
      .link {
        position: relative;
        display: block;
        width: fit-content;
        font-size: 1.25vw;
        font-weight: 500;
        letter-spacing: 0.1em;
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-color: currentColor;
        transition: opacity 300ms ease;
        @media (min-width: 769px) {
          &:hover {
            opacity: 0.7;
          }
        }
        @media (max-width: 768px) {
          font-size: 4.266666666666667cqw;
        }
        &::after {
          content: '';
          position: absolute;
          translate: 0 -50%;
          top: 50%;
          right: -1.953125vw;
          width: 1.328125vw;
          height: 1.09375vw;
          background: url(../img/common/ex-link-deco.svg) no-repeat;
          background-size: cover;
          @media (max-width: 768px) {
            right: -6.666666666666667vw;
            width: 4.533333333333333vw;
            height: 3.733333333333334vw;
          }
        }
      }
    }
  }
  .coryright {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1280 / 40;
    background-color: var(--color-orange);
    font-size: 0.9375vw;
    font-family: var(--text-lato);
    font-weight: 500;
    color: #fff;
    @media (max-width: 768px) {
      aspect-ratio: 375 / 40;
      font-size: 3.2vw;
    }
  }
}
/* ↑↑↑ footer ↑↑↑ */