@charset "utf-8";

/* ↓↓↓ common ↓↓↓ */
:root {
  --text-sans: 'Noto Sans JP', sans-serif;
  --grad01: linear-gradient(90deg, #f0ba7e 0%, #e3695e 50%, #5e39f2 84%, #4121b7 100%);
  --grad02: linear-gradient(270deg, #f0ba7e 0%, #e3695e 50%, #5e39f2 84%, #4121b7 100%);
}

body {
  font-size: 1.6rem;
}

.-noscroll {
  overflow: hidden;
}

.-pc {
  display: block;
}

.-sp {
  display: none;
}

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

  .-sp {
    display: block;
  }
}

.-wb {
  display: inline-block;
}

main {
  font-family: var(--text-sans);
}

/* ↑↑↑ common ↑↑↑ */

/* ↓↓↓ header ↓↓↓ */
header {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: min(28px, 2.1875vw) min(32px, 2.5vw);
  z-index: 10;

  @media (max-width: 768px) {
    padding: 16px;
  }

  .logo {
    display: block;
    width: min(252px, 19.6875vw);
    transition: opacity 300ms ease;

    @media (max-width: 768px) {
      width: 194px;
    }

    picture {
      display: block;
      width: 100%;
    }

    @media (min-width: 769px) {
      &:hover {
        opacity: 0.7;
      }
    }
  }
  .list {
    width: fit-content;
    display: flex;
    gap: min(8px, 0.625vw);
    
    .item {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: min(152px, 11.875vw);
      aspect-ratio: 152 / 48;
      font-size: min(1.4rem, 1.09375vw);
      color: #fff;
      border: 1px solid #fff;
      border-radius: 24px;
      padding-right: min(1.4rem, 1.09375vw);
      overflow: hidden;
      z-index: 0;
      transition: border 300ms ease;

      &::after {
        content: '';
        position: absolute;
        top: min(21px, 1.640625vw);
        right: min(1.4rem, 1.09375vw);
        width: min(10px, 0.78125vw);
        height: min(6px, 0.46875vw);
        background: url(../img/common/nav-arrow.svg) no-repeat;
        background-size: cover;
        z-index: 1;
      }

      &::before {
        content: '';
        position: absolute;
        translate: -50% -50%;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        background-image: var(--grad02);
        z-index: -1;
        opacity: 0;
        transition: opacity 300ms ease;
      }

      @media (min-width: 769px) {
        &:hover {
          border: 1px solid transparent;
          &::before {
            opacity: 1;
          }
        }
      }
    }
  }
  
  .menu-btn {
    @media (max-width: 768px) {
      position: relative;
      width: 40px;
      height: 40px;
      border: 1px solid #fff;
      border-radius: 50%;

      span {
        position: absolute;
        translate: -50% 0;
        left: 50%;
        width: 12px;
        height: 1px;
        background-color: #fff;
        transition: top 300ms ease, width 300ms ease, rotate 300ms ease;
        &:nth-of-type(1) {
          top: 13px;
        }

        &:nth-of-type(2) {
          top: 19px;
        }

        &:nth-of-type(3) {
          top: 25px;
        }
      }

      &.-active {
        span {
          width: 17px;
          &:nth-of-type(1) {
            top: 50%;
            rotate: 45deg;
          }

          &:nth-of-type(2) {
            display: none;
          }

          &:nth-of-type(3) {
            top: 50%;
            rotate: -45deg;
          }
        }
      }
    }
  }
}

nav {
  @media (max-width: 768px) {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    opacity: 0;
    visibility: hidden;
    background: url(../img/top/fv-bg_sp.png) no-repeat;
    background-size: cover;
    transition: opacity 300ms ease 50ms, visibility 0ms linear 300ms;
    z-index: 5;

    &.-active {
      opacity: 1;
      visibility: visible;
      transition: opacity 300ms ease 50ms, visibility 0ms;
    }

    .list {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 15px;
      
      .item {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 184px;
        aspect-ratio: 184 / 48;
        font-size: 1.4rem;
        color: #fff;
        border: 1px solid #fff;
        border-radius: 24px;
        padding-right: 14px;
        z-index: 0;
        transition: border 300ms ease;

        &::after {
          content: '';
          position: absolute;
          top: 21px;
          right: 14px;
          width: 10px;
          height: 6px;
          background: url(../img/common/nav-arrow.svg) no-repeat;
          background-size: cover;
          z-index: 1;
        }
      }
    }
  }
}
/* ↑↑↑ header ↑↑↑ */

/* ↓↓↓ footer ↓↓↓ */
footer {
  width: 100%;
  height: 104px;
  border-top: 1px solid #d8ae5e;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #212121;
  @media (max-width: 768px) {
    height: 80px;
  }

  .copyright {
    font-size: 1.4rem;
    letter-spacing: 0.025em;
    color: #d8ae5e;

    @media (max-width: 768px) {
      font-size: 1.2rem;
    }
  }
}
/* ↑↑↑ footer ↑↑↑ */

/* ↓↓↓ common ↓↓↓ */
/* ↑↑↑ common ↑↑↑ */

/* ↓↓↓ common ↓↓↓ */
/* ↑↑↑ common ↑↑↑ */

/* ↓↓↓ common ↓↓↓ */
/* ↑↑↑ common ↑↑↑ */

@media (min-width: 1281px) {}

@media (max-width: 1280px) {}

@media (max-width: 768px) {}

@media (max-width: 480px) {}

@media (max-width: 375px) {}