@charset "UTF-8";

/* =====================
  introduction
===================== */
.introduction {
  padding-block: 86px;

  @media only screen and (width <= 768px) {
    padding-block: calc((100 / 390) * 54 * 1vw);
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
  }

  /* ==== body ==== */
  .body {
    line-height: 2;
    text-align: center;

    @media only screen and (width <= 768px) {
      font-size: calc((100 / 390) * 15 * 1vw);
      text-align: left;
    }
  }
}

/* =====================
  local-nav
===================== */
.local-nav {
  display: block flex;
  gap: 13.33px;
  justify-content: center;
  counter-reset: number;

  @media only screen and (width <= 768px) {
    
    
    
    
    flex-direction: column;
    gap: 3.8vw;
    padding-inline: calc((100 / 390) * 16 * 1vw);
    padding-block-end: 2vw;
    
    
    
    
  }

  & button {
    position: relative;
    display: block flex;
    gap: 8px;
    align-items: center;
    min-inline-size: 310px;
    padding-block: 18px;
    padding-inline: 25px;
    margin-block: calc((1em - 1lh) / 2);
    font-weight: 500;
    line-height: 1;
    background: var(--bg_gray);
    border-radius: 8px;
    transition: all 250ms ease 0s;

    @media only screen and (width <= 768px) {
      gap: calc((100 / 390) * 10 * 1vw);
      align-items: center;
      min-inline-size: 100%;
      padding-block: 4.8vw;
      padding-inline: calc((100 / 390) * 25 * 1vw);
      font-size: calc((100 / 390) * 15 * 1vw);
      border-radius: calc((100 / 390) * 8 * 1vw);
    }

    @media (any-hover: hover) {
      &:hover {
        color: white;
        background: var(--lightblue);
      }
    }

    &::before {
      margin-block: calc((1em - 1lh) / 2);
      font-family: var(--en);
      font-size: 24px;
      font-weight: 400;
      line-height: 1;
      color: var(--lightblue);
      content: '0' counter(number);
      counter-increment: number;
      translate: 0 1.25px;
      transition: all 250ms ease 0s;
    }

    @media only screen and (width <= 768px) {
      &::before {
        font-size: calc((100 / 390) * 22 * 1vw);
      }
    }

    @media (any-hover: hover) {
      &:hover {
        &::before {
          color: white;
        }
      }
    }

    &::after {
      position: absolute;
      inset-block: auto;
      inset-inline-end: 24px;
      inline-size: 47px;
      block-size: 29px;
      content: '';
      background-image: url('../img/_common/nav.svg');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      transition: all 250ms ease 0s;
    }

    @media only screen and (width <= 768px) {
      &::after {
        inset-inline-end: calc((100 / 390) * 24 * 1vw);
        inline-size: calc((100 / 390) * 45 * 1vw);
        block-size: calc((100 / 390) * 26 * 1vw);
      }
    }

    @media (any-hover: hover) {
      &:hover {
        &::after {
          opacity: 0.5;
          filter: invert(1) brightness(2);
        }
      }
    }
  }
}

/* =====================
  article
===================== */
.main article {
  padding-block: 121px 0;
  counter-increment: title;

  @media only screen and (width <= 768px) {
    padding-block: 17.2vw 0;
  }

  &:last-child {
    padding-block-end: 22px;

    @media only screen and (width <= 768px) {
      padding-block-end: 4.2vw;
    }
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    gap: 45px;

    @media only screen and (width <= 768px) {
      gap: calc((100 / 390) * 31 * 1vw);
    }
  }

  /* ==== mv ==== */
  .mv {
    & img {
      border-radius: 20px;

      @media only screen and (width <= 768px) {
        border-radius: calc((100 / 390) * 20 * 1vw);
      }
    }
  }

  /* ==== title ==== */
  .title {
    position: relative;
    padding-inline-start: 47px;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.8;

    @media only screen and (width <= 768px) {
      padding-inline-start: 11.4vw;
      font-size: calc((100 / 390) * 22 * 1vw);
    }

    &::before {
      position: absolute;
      inset-block-start: -7px;
      inset-inline-start: 0;
      font-family: var(--en);
      font-size: 36px;
      font-weight: 400;
      color: var(--lightblue);
      content: '0' counter(title);
    }

    @media only screen and (width <= 768px) {
      &::before {
        inset-block-start: -2vw;
        inset-inline-start: 0;
        font-size: calc((100 / 390) * 34 * 1vw);
      }
    }
  }

  /* ==== body ==== */
  .body {
    margin-block-start: -8px;
    line-height: 2;

    @media only screen and (width <= 768px) {
      
      
      
      
      
      
      
      
      margin-block-start: -2.1vw;
      font-size: calc((100 / 390) * 15 * 1vw);
      
      
      
      
      
      
      
      
    }
  }

  /* ==== list ==== */
  .list {
    display: block grid;
    gap: 7.3px;
    padding-block: 21px;
    padding-inline: 30px;
    margin-block-start: -6px;
    counter-reset: number;
    border: 2px solid var(--lightblue, #327dba);
    border-radius: 10px;

    @media only screen and (width <= 768px) {
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      border: calc((100 / 390) * 2 * 1vw) solid var(--lightblue, #327dba);
      border-radius: calc((100 / 390) * 10 * 1vw);
      gap: 0;
      padding-block: 3.3vw 4.2vw;
      padding-inline: 3.8vw;
      font-size: calc((100 / 390) * 15 * 1vw);
      margin-block-start: -2.1vw;
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    }

    & li {
      position: relative;
      padding-inline-start: 14px;
      counter-increment: number;

      @media only screen and (width <= 768px) {
        padding-inline-start: calc((100 / 390) * 13 * 1vw);line-height: 2;
      }

      &::before {
        position: absolute;
        inset-block-start: 6px;
        inset-inline-start: 0;
        font-size: 16px;
        font-weight: 400;
        line-height: 1;
        color: var(--lightblue);
        content: counter(number) '.';
      }

      @media only screen and (width <= 768px) {
        &::before {
          font-size: calc((100 / 390) * 15 * 1vw);
        }
      }
    }
  }

  /* ==== gallery ==== */
  .gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin-block-start: 12px;

    @media only screen and (width <= 768px) {
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      grid-template-columns: repeat(2, 1fr);
      gap: calc((100 / 390) * 16 * 1vw);
      margin-block-start: 2.3vw;
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
      
    }
  }
}