@charset "UTF-8";

/* =====================
  nav
===================== */
.nav {
  position: fixed;
  background: var(--red);
  display: block flex;
  padding-inline: 16px 0;
  padding-block: 19px 21px;
  color: white;
  border-radius: 16px 0 0 16px;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  align-items: flex-start;
  max-block-size: calc(100svh - 40px);
  gap: 8px;
  inline-size: 127px;
  inset-inline-end: 0;
  inset-block-start: 80px;
  z-index: 20;
  @media only screen and (width <= 768px) {
    inline-size: calc((100 / 390) * 64 * 1vw);
    inset-block-start: calc((100 / 390) * 80 * 1vw);
    padding-inline: 2.3vw 0;
    gap: 0.9vw;
    padding-block: 3.3vw 4.3vw;
    border-radius: calc((100 / 390) * 8 * 1vw) 0 0 calc((100 / 390) * 8 * 1vw);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    max-block-size: calc(100svh - 40px);
  }

  /* ==== p ==== */
  & p {
    font-size: 24px;
    font-weight: 900;
    word-break: break-word;
    inline-size: 23px;
    line-height: 1.083;
    font-feature-settings: 'vrt2' on;
    @media only screen and (width <= 768px) {
      inline-size: unset;
      line-height: 1.083;
      font-size: calc((100 / 390) * 12 * 1vw);
    }
  }

  /* ==== ul ==== */
  & ul {
    display: block grid;
    gap: 32px;
    max-block-size: calc(100svh - 120px);
    padding-inline-end: 16px;
    margin-block-start: 5px;
    /* overflow-y: auto; */

    @media only screen and (width <= 768px) {
      gap: 6.1vw;
      max-block-size: calc(100svh - 0px);
      padding-inline-end: 0;
      margin-block-start: 0.9vw;
    }

    /* ==== li ==== */
    & li {
      position: relative;
      transition: all 600ms ease 0s;
      @media (any-hover: hover) {
        &:hover {
          filter: brightness(0.5);
        }
      }

      /* ====  button ==== */
      & button {
        filter: drop-shadow(0 8px 4px rgba(0, 0, 0, 0.25));
        @media only screen and (width <= 768px) {
          inline-size: calc((100 / 390) * 32 * 1vw);
        }
      }

      &[data-icon='new']::before {
        content: '';
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
        background-image: url('../img/nav/new.webp');
        inline-size: 36px;
        position: absolute;
        z-index: 2;
        aspect-ratio: 36 / 13;
      }
      @media only screen and (width <= 768px) {
        &[data-icon='new']::before {
          inline-size: calc((100 / 390) * 18 * 1vw);
        }
      }
    }
  }
}

/* =====================
  footer
===================== */
.footer {
  gap: 3px 24px;
  border-radius: 40px 40px 0 0;
  padding-block: 41px 20px;
  margin-block-start: -40px;
  padding-inline: 80px;
  background: var(--gray);
  z-index: 2;
  position: relative;
  display: block grid;
  text-align: left;
  grid-template-columns: auto 1fr auto;
  @media (width > 1441px) {
    padding-block: 41px;
  }
  @media only screen and (width <= 768px) {
    gap: 0;
    border-radius: calc((100 / 390) * 20 * 1vw) calc((100 / 390) * 20 * 1vw) 0 0;
    padding-block: 16vw;
    margin-block-start: -5.9vw;
    padding-inline: calc((100 / 390) * 23 * 1vw);
    display: block flex;
    flex-direction: column;
  }

  /* ==== logo ==== */
  .logo {
    inline-size: fit-content;
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    @media only screen and (width <= 768px) {
      inline-size: calc((100 / 390) * 318 * 1vw);
      margin-inline: auto;
    }
  }

  /* ==== text ==== */
  .text {
    grid-row: 1 / 3;
    grid-column: 2 / 3;
    display: block grid;
    gap: 5px;
    translate: 0 -3px;
    @media only screen and (width <= 768px) {
      gap: 1.2vw;
      margin-block-start: 6.1vw;
      translate: 0 0;
    }

    & h2 {
      font-size: 18px;
      letter-spacing: 0.54px;
      font-weight: 700;
      @media only screen and (width <= 768px) {
        font-size: calc((100 / 390) * 18 * 1vw);
        letter-spacing: calc((100 / 390) * 0.54 * 1vw);
      }
    }

    & address {
      letter-spacing: 0.48px;
      font-size: 16px;
      font-weight: 400;
      display: block grid;
      gap: 1px;
      @media only screen and (width <= 768px) {
        gap: calc((100 / 390) * 2.6 * 1vw);
        letter-spacing: calc((100 / 390) * 0.48 * 1vw);
        font-size: calc((100 / 390) * 16 * 1vw);
      }
    }

    .tel {
      display: block flex;
      gap: 34px;
      margin-block: calc((1em - 1lh) / 2);
      @media only screen and (width <= 768px) {
        gap: 8.6vw;
      }

      & span {
        display: block flex;
        gap: 8px;
        @media only screen and (width <= 768px) {
          gap: 2.4vw;
        }
      }
      @media only screen and (width <= 768px) {
        & a[href^='tel'] {
          text-decoration: underline;
          color: var(--primary);
        }
      }
    }
  }

  /* ==== anchor ==== */
  .anchor {
    grid-row: 1 / 2;
    grid-column: 3 / 4;
    display: block flex;
    color: var(--primary);
    margin-block: calc((1em - 1lh) / 2);
    font-weight: 700;
    margin-inline: auto 3px;
    gap: 19px;
    translate: 0 -2px;
    font-size: 16px;
    align-items: center;
    @media only screen and (width <= 768px) {
      margin-inline: auto 1vw;
      gap: 5.2vw;
      margin-block-start: 11.8vw;
      translate: 0 0;
      font-size: calc((100 / 390) * 16 * 1vw);
    }

    &::after {
      content: '';
      inline-size: 18px;
      aspect-ratio: 1 / 1;
      mask-repeat: no-repeat;
      mask-size: contain;
      mask-position: center;
      mask-image: var(--icon-blank);
      background-color: #000;
    }
    @media only screen and (width <= 768px) {
      &::after {
        inline-size: calc((100 / 390) * 18 * 1vw);
      }
    }
  }

  /* ==== small ==== */
  & small {
    grid-row: 2 / 3;
    translate: 0 -20px;
    font-size: 16px;
    align-self: flex-end;
    color: #000;
    grid-column: 3 / 4;
    @media (width > 1441px) {
      translate: 0 0;
    }
    @media only screen and (width <= 768px) {
      translate: 0 0;
      margin-block-start: 8.7vw;
      font-size: calc((100 / 390) * 16 * 1vw);
      padding-inline-end: 1vw;
    }
  }

  /* ==== to-top ==== */
  .to-top {
    position: absolute;
    inset-inline-end: 79px;
    inset-block-start: -179px;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
    @media only screen and (width <= 768px) {
      inset-inline-end: 6vw;
      inset-block-start: -19.5vw;
      inline-size: calc((100 / 390) * 103.2 * 1vw);
      block-size: calc((100 / 390) * 119.4 * 1vw);
    }
  }
}

/* =====================
  mv
===================== */
.mv {
  position: relative;
  padding-block: 64px 23px;
  overflow: clip;
  @media only screen and (width <= 768px) {
    padding-block: calc((100 / 390) * 80 * 1vw) 0;
  }

  /* ==== deco ==== */
  &::before,
  &::after {
    content: '';
    position: absolute;
    inset-block-start: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
    z-index: 1;
  }
  &::before {
    background-image: url('../img/mv/illust-l.webp');
    inline-size: 566px;
    block-size: 800px;
    inset-inline-start: -68px;
  }
  @media (width > 1441px) {
    &::before {
      inset-inline-start: 1px;
    }
  }
  @media only screen and (width <= 768px) {
    &::before {
      background-image: url('../img/mv/illust-l_sp.webp');
      inline-size: calc((100 / 390) * 600 / 2 * 1vw);
      block-size: calc((100 / 390) * 960 / 2 * 1vw);
      inset-inline-start: 0;
    }
  }
  &::after {
    background-image: url('../img/mv/illust-r.webp');
    inline-size: 566px;
    block-size: 800px;
    inset-inline-end: -70px;
  }
  @media (width > 1441px) {
    &::after {
      inset-inline-end: 1px;
    }
  }
  @media only screen and (width <= 768px) {
    &::after {
      background-image: url('../img/mv/illust-r_sp.webp');
      inline-size: calc((100 / 390) * 600 / 2 * 1vw);
      block-size: calc((100 / 390) * 960 / 2 * 1vw);
      inset-inline-end: 0;
    }
  }

  /* ==== catch ==== */
  .catch {
    display: block flex;
    justify-content: center;
    flex-direction: row-reverse;
    gap: 49px;
    position: relative;
    z-index: 3;
    @media only screen and (width <= 768px) {
      gap: calc((100 / 390) * 24 * 1vw);
    }

    & span {
      display: block flow;
      color: white;
      block-size: fit-content;
      padding-inline: 7px;
      font-size: 40px;
      inline-size: 80px;
      border-radius: 16px;
      font-weight: 900;
      line-height: 1.1;
      word-break: break-word;
      @media only screen and (width <= 768px) {
        padding-inline: unset;
        font-size: calc((100 / 390) * 24 * 1vw);
        line-height: 1.09;
        inline-size: fit-content;
        padding-block: 3.9vw;
        letter-spacing: 0.5vw;
        padding-inline: 3.1vw 6vw;
        text-align: left;
        border-radius: calc((100 / 390) * 8 * 1vw);
      }

      &[data-id='1'] {
        @media (width > 768px) {
          padding-block: 14px 0;
        }
        background: var(--red);
        @media only screen and (width <= 768px) {
          text-align: left;
          padding-inline: 3.1vw 0;
        }
      }

      &[data-id='2'] {
        @media (width > 768px) {
          padding-block: 14px 19px;
        }
        background: #009708;
      }
      &[data-id='3'] {
        background: var(--blue2);

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

  /* ==== img ==== */
  .img {
    position: relative;
    z-index: 2;
    margin-block-start: -110px;
    @media only screen and (width <= 768px) {
      margin-block-start: -7.2vw;
    }

    & img {
      display: block flow;
      margin-inline: auto;
      pointer-events: none;
      @media only screen and (width <= 768px) {
        inline-size: calc((100 / 390) * 334 * 1vw);
      }
    }

    /* ==== unit1 ==== */
    .unit[data-id='1'] {
      position: relative;
      z-index: 2;
      inline-size: fit-content;
      margin-inline: auto;

      & [data-id='1'] {
        position: relative;
        z-index: 2;
      }

      & [data-id='2'] {
        position: absolute;
        inset-inline-start: 749px;
        inset-block-end: -181px;
        z-index: 1;
        @media (width > 1441px) {
          inset-inline-start: 816px;
        }
        @media only screen and (width <= 768px) {
          inline-size: calc((100 / 390) * 347 * 1vw);
          block-size: calc((100 / 390) * 200 * 1vw);
          inset-inline-start: 57.2vw;
          inset-block-end: -34.9vw;
        }
      }
    }

    /* ==== unit2 ==== */
    .unit[data-id='2'] {
      position: relative;
      z-index: 2;
      margin-block-start: -106px;
      translate: -6px 0;
      @media only screen and (width <= 768px) {
        margin-block-start: -9.8vw;
        translate: 0;
        inline-size: calc((100 / 390) * 172 * 1vw);
      }
    }

    /* ==== deco ==== */
    &::before {
      content: '';
      position: absolute;
      inset-inline: 0;
      inset-block-start: 169px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center bottom;
      background-image: url('../img/mv/white.svg');
      inline-size: 100%;
      block-size: 420px;
      pointer-events: none;
      z-index: 1;
    }

    @media (width > 1441px) {
      &::before {
        background-image: url('../img/mv/white_full.svg');
        inset-block-start: 29px;
        block-size: 560px;
      }
    }
    @media only screen and (width <= 768px) {
      &::before {
        background-image: url('../img/mv/white_sp.svg');
        inset-block-start: 7.2vw;
        block-size: calc((100 / 390) * 194 * 1vw);
      }
    }
  }

  /* ==== logo ==== */
  .logo {
    position: absolute;
    z-index: 10;
    inset-block-start: 0;
    inset-inline-end: 144px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('../img/_common/logo-bg.webp');
    inline-size: 323px;
    block-size: 117px;
    padding-inline-start: 55px;
    padding-block-start: 11px;
    filter: drop-shadow(0 0 13.008px rgba(0, 136, 255, 0.2));
    @media (width > 1441px) {
      inset-inline-end: 416px;
    }
    @media only screen and (width <= 768px) {
      inset-inline: 0;
      margin-inline: auto;
      padding-inline-start: 8.6vw;
      background-position: center top;
      padding-block-start: 2.2vw;
      inline-size: calc((100 / 390) * 209 * 1vw);
      block-size: calc((100 / 390) * 80 * 1vw);
    }

    & a {
      inline-size: 218px;
      display: block flow;
      @media only screen and (width <= 768px) {
        inline-size: calc((100 / 390) * 141.789 * 1vw);
      }
    }
  }
}

/* =====================
  design
===================== */
.design {
  position: relative;
  overflow: clip;
  z-index: 2;
  margin-block-start: -75px;
  padding-block: 78px 86px;
  @media (width > 1440px) {
    padding-block-end: 24px;
  }
  @media only screen and (width <= 768px) {
    padding-block: 18vw 24vw;
    margin-block-start: calc((100 / 390) * 75 * -1 * 1vw);
  }

  /* ==== deco ==== */
  &::before {
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('../img/_common/01.webp');
    inline-size: 695px;
    inset-inline-start: -380px;
    block-size: 723px;
    position: absolute;
    inset-block-start: 0;
  }
  @media (width > 1441px) {
    &::before {
      inset-inline-start: -240px;
    }
  }

  @media only screen and (width <= 768px) {
    &::before {
      background-image: url('../img/_common/01_sp.webp');
      inline-size: calc((100 / 390) * 131 * 1vw);
      inset-inline-start: 0;
      block-size: calc((100 / 390) * 240 * 1vw);
      inset-block-start: 43.3vw;
    }
  }
  &::after {
    z-index: 1;
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('../img/_common/02.webp');
    inline-size: 695px;
    block-size: 723px;
    position: absolute;
    pointer-events: none;
    inset-inline-end: -255px;
    inset-block-end: -1px;
  }
  @media only screen and (width <= 768px) {
    &::after {
      background-image: url('../img/_common/02_sp.webp');
      inline-size: calc((100 / 390) * 131 * 1vw);
      inset-inline-end: 0;
      block-size: calc((100 / 390) * 240 * 1vw);
      inset-block-end: -0.6vw;
    }
  }

  /* =====================
    introduction
  ===================== */
  .introduction {
    position: relative;

    /* ==== head ==== */
    .head {
      margin-block-end: 16px;
      @media only screen and (width <= 768px) {
        margin-block-end: calc((100 / 390) * 16 * 1vw);
      }
    }

    /* ==== body ==== */
    .body {
      font-size: 20px;
      inline-size: fit-content;
      margin-inline: auto;
      font-weight: 400;
      line-height: 2;
      margin-block-start: 58px;
      @media only screen and (width <= 768px) {
        font-size: calc((100 / 390) * 16 * 1vw);
        margin-block-start: 7.9vw;
      }

      & strong {
        font-weight: 700;
        color: #ff1b32;
      }
    }
  }

  /* =====================
    wrapper
  ===================== */
  .wrapper {
    background: var(--white);
    margin-block-start: 80px;
    max-inline-size: 1120px;
    padding-inline: 80px;
    padding-block: 88px 80px;
    gap: 112px;
    margin-inline: auto;
    text-align: left;
    position: relative;
    z-index: 2;
    display: block grid;
    @media (width > 1441px) {
      max-inline-size: 1200px;
      padding-inline: 120px;
    }
    @media only screen and (width <= 768px) {
      border-radius: calc((100 / 390) * 6 * 1vw);
      margin-block-start: 10.5vw;
      max-inline-size: calc((100 / 390) * 376 * 1vw);
      padding-inline: calc((100 / 390) * 14 * 1vw);
      padding-block: 5.5vw 3.4vw;
      gap: 15.6vw;
    }

    /* ==== head ==== */
    & section > .head {
      color: #000;
      font-size: 24px;
      line-height: 1.6;
      margin-block: calc((1em - 1lh) / 2);
      font-weight: 700;
      @media only screen and (width <= 768px) {
        font-size: calc((100 / 390) * 16 * 1vw);
      }

      .tr {
        padding-inline-start: 19px;
        padding-block: 6px;
        gap: 14px;
        border-inline-start: 4px solid var(--blue2);
        display: block grid;
        @media only screen and (width <= 768px) {
          padding-inline-start: 2vw;
          padding-block: 0.7vw 1.7vw;
          gap: 2.7vw;
          border-inline-start: 4px solid var(--blue2);
        }
      }
      & :where(dt, dd) {
        margin-block: calc((1em - 1lh) / 2);
      }
      @media only screen and (width <= 768px) {
        :where(dt) {
          line-height: 1.6;
        }
      }
    }

    /* ==== contents ==== */
    .contents {
      box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.25);
      margin-block-start: 48px;
      padding-inline: 40px;
      padding-block: 45px 40px;
      @media only screen and (width <= 768px) {
        box-shadow: 0 0 calc((100 / 390) * 8 * 1vw) 0 rgba(0, 0, 0, 0.25);
        margin-block-start: 5.2vw;
        padding-inline: calc((100 / 390) * 12 * 1vw) calc((100 / 390) * 10 * 1vw);
        padding-block: 4vw 3.4vw;
      }

      /* ==== unit ==== */
      .unit {
        display: block flex;
        gap: 80px;
        @media only screen and (width <= 768px) {
          gap: 7.1vw;
          flex-direction: column;
        }

        /* ==== item ==== */
        .item {
          display: block grid;
          grid-template-rows: repeat(auto-fit, minmax(0, min-content));
          gap: 50px;
          @media only screen and (width <= 768px) {
            gap: 11.5vw;
          }

          &[data-id='1'] .img:first-child figcaption {
            @media only screen and (width <= 768px) {
              font-size: calc((100 / 390) * 14.57 * 1vw);
            }
          }
          &[data-id='1'] .img:not(:first-child) {
            @media only screen and (width <= 768px) {
              gap: 3.5vw;
            }
          }
          &[data-id='1'] .picture {
            @media (width > 768px) {
              block-size: 240px;
            }
          }
          &[data-id='2'] .img {
            @media (width > 768px) {
              gap: 10px;
            }
          }
        }

        /* ==== .picture ==== */
        .img {
          display: block grid;
          gap: 8px;
          @media only screen and (width <= 768px) {
            gap: 3.1vw;
          }

          & figcaption {
            font-size: 16px;
            font-weight: 700;
            line-height: 1.6;
            color: #000;
            margin-block: calc((1em - 1lh) / 2);
          }

          & .picture {
            translate: 0 5px;
            @media only screen and (width <= 768px) {
              translate: unset;
            }
          }
        }
      }

      /* ==== box ==== */
      .box {
        margin-block-start: 45px;
        border-radius: 24px;
        padding-block: 40px;
        padding-inline: 39px;
        border: 1px solid #b7b7b7;
        @media only screen and (width <= 768px) {
          margin-block-start: calc((100 / 390) * 40 * 1vw);
          border-radius: calc((100 / 390) * 16 * 1vw);
          padding-block: 4vw;
          padding-inline: 4vw;
          inline-size: calc((100 / 390) * 324 * 1vw);
        }

        /* ==== head ==== */
        .head {
          color: #000;
          font-size: 16px;
          font-weight: 700;
          margin-block-end: 11px;
          @media only screen and (width <= 768px) {
            margin-block-end: calc((100 / 390) * 12.5 * 1vw);
            font-size: calc((100 / 390) * 16 * 1vw);
          }
        }

        /* ==== p ==== */
        & p {
          color: #000;
          font-size: 16px;
          @media only screen and (width <= 768px) {
            font-size: calc((100 / 390) * 16 * 1vw);
          }

          & + p {
            margin-block-start: 32px;
            @media only screen and (width <= 768px) {
              margin-block-start: 8vw;
            }
          }
        }
      }
    }

    /* =====================
      risuhazumu
    ===================== */
    & [data-id='risuhazumu'] .contents .unit {
      @media (width > 768px) {
        padding-inline: 42px;
      }
      @media only screen and (width <= 768px) {
        padding-block-start: 0.4vw;
        gap: 11.3vw;

        .item[data-id='1'] .img:first-child figcaption {
          font-size: calc((100 / 390) * 16 * 1vw);
        }
      }
    }

    /* =====================
      kachofugetsu
    ===================== */
    & [data-id='kachofugetsu'] .contents .unit {
      @media (width > 768px) {
        padding-inline: 42px;
      }
      @media only screen and (width <= 768px) {
        padding-block-start: 0.4vw;
        gap: 11.3vw;

        .item[data-id='1'] .img:first-child figcaption {
          font-size: calc((100 / 390) * 16 * 1vw);
        }
      }
    }
  }
}

/* =====================
  company
===================== */
.company {
  position: relative;
  z-index: 1;
  margin-block-start: -70px;
  @media only screen and (width <= 768px) {
    margin-block-start: -20.2vw;
    z-index: 2;
  }

  /* ==== deco ==== */
  &::before {
    content: '';
    position: relative;
    display: block flow;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    background-image: url('../img/company/bg.webp');
    inline-size: 100%;
    block-size: 383px;
  }
  @media (width > 1441px) {
    &::before {
      background-image: url('../img/company/bg_full.png');
      block-size: calc((100 / 1920) * 453 * 1vw);
    }
  }
  @media only screen and (width <= 768px) {
    &::before {
      background-image: url('../img/company/bg_sp.webp');
      block-size: calc((100 / 390) * 338 / 2 * 1vw);
      background-size: contain;
      background-position: center top;
    }
  }

  /* ==== inner ==== */
  .inner {
    padding-block-end: 30px;
    position: relative;
    background: var(--white);
    z-index: 2;
    padding-block: 1px 120px;
    @media only screen and (width <= 768px) {
      padding-block-end: 0;
      padding-block: 0;
    }

    /* ==== decoration ==== */
    .decoration {
      position: absolute;
      pointer-events: none;

      &[data-id='1'] {
        inset-inline-start: 0;
        inset-block-start: -247px;
        @media only screen and (width <= 768px) {
          inset-block-start: -36.9vw;
          inline-size: calc((100 / 390) * 190 * 1vw);
        }
      }
      &[data-id='2'] {
        inset-inline-end: 0;
        inset-block-start: -263px;
        @media only screen and (width <= 768px) {
          inset-block-start: -33vw;
          inline-size: calc((100 / 390) * 96 * 1vw);
        }
      }
    }

    /* ==== contents ==== */
    .contents {
      overflow: clip;
      position: relative;
      @media only screen and (width <= 768px) {
        padding-block-start: 8.3vw;
      }

      /* ==== decoration ==== */
      .decoration {
        position: absolute;
        inset-inline-end: -35px;
        inset-block-end: 220px;
        @media only screen and (width <= 768px) {
          display: none;
        }
      }

      /* ==== body ==== */
      .body[data-id='1'] {
        position: relative;
        z-index: 2;
        font-weight: 400;
        margin-block-start: 58px;
        @media only screen and (width <= 768px) {
          margin-block-start: 8vw;
        }

        & strong {
          color: var(--red);
          font-weight: 700;
        }
      }

      /* ==== body ==== */
      .body[data-id='2'] {
        margin-block-start: 78px;
        position: relative;
        z-index: 2;
        @media only screen and (width <= 768px) {
          margin-block-start: 10.2vw;
        }
      }
    }
  }
}

/* =====================
  ceremony
===================== */
.ceremony {
  background: var(--white);
  overflow: clip;
  position: relative;
  padding-block: 79px 95px;
  @media only screen and (width <= 768px) {
    padding-block: 20vw 15vw;
  }

  /* ==== inner ==== */
  .inner {
    overflow: clip;
    position: relative;
    padding-block-start: 40px;
    @media only screen and (width <= 768px) {
      padding-block-start: 0;
    }
  }

  /* ==== deco ==== */
  &::before,
  &::after {
    content: '';
    pointer-events: none;
    display: block flow;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
  }

  &::before {
    inset-inline-start: -380px;
    inset-block-start: 39px;
    background-image: url('../img/_common/01.webp');
    inline-size: 695px;
    block-size: 723px;
  }
  @media only screen and (width <= 768px) {
    &::before {
      inset-inline-start: 0;
      inset-block-start: 10vw;
      background-image: url('../img/_common/01_sp.webp');
      inline-size: calc((100 / 390) * 131 * 1vw);
      block-size: calc((100 / 390) * 240 * 1vw);
    }
  }
  &::after {
    z-index: 1;
    inset-inline-end: -312px;
    inset-block-end: 56px;
    background-image: url('../img/_common/02.webp');
    inline-size: 695px;
    block-size: 723px;
  }
  @media only screen and (width <= 768px) {
    &::after {
      inset-inline-end: 0;
      inset-block-end: 5vw;
      background-image: url('../img/_common/02_sp.webp');
      inline-size: calc((100 / 390) * 262 / 2 * 1vw);
      block-size: calc((100 / 390) * 480 / 2 * 1vw);
    }
  }

  /* ==== head ==== */
  .head {
    position: relative;
    z-index: 2;
  }

  /* ==== body ==== */
  .body {
    text-align: center;
    font-weight: 400;
    margin-block-start: 45px;
    @media only screen and (width <= 768px) {
      margin-block-start: 5.2vw;
    }

    & strong {
      color: var(--red);
      font-weight: 700;
    }
  }

  /* ==== picture ==== */
  .picture {
    display: block flow;
    margin-block-start: 68px;
    @media only screen and (width <= 768px) {
      margin-block-start: 8vw;
      inline-size: calc((100 / 390) * 358 * 1vw);
      margin-inline: auto;
    }
  }

  /* ==== img ==== */
  .img {
    display: block flow;
    margin-inline: auto;
    margin-block-start: 80px;
    @media only screen and (width <= 768px) {
      margin-block-start: 10.5vw;
      inline-size: calc((100 / 390) * 326 * 1vw);
    }
  }

  /* ==== u-note ==== */
  .u-note {
    position: relative;
    z-index: 2;
    margin-block-start: 80px;
    max-inline-size: 828px;
    @media only screen and (width <= 768px) {
      max-inline-size: calc((100 / 390) * 358 * 1vw);
      margin-block-start: 10vw;
      .pc-none {
        display: none;
      }
    }
  }
}

/* =====================
  release
===================== */
.release {
  position: relative;
  padding-block: 103px 0;
  @media only screen and (width <= 768px) {
    padding-block: 10vw 0;
  }

  /* ==== deco ==== */
  &::after {
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    position: absolute;
    background-image: url('../img/_common/01.webp');
    inline-size: 695px;
    block-size: 723px;
    inset-inline-start: -381px;
    inset-block-start: -56px;
  }
  @media only screen and (width <= 768px) {
    &::after {
      background-image: url('../img/_common/01_sp.webp');
      inline-size: calc((100 / 390) * 131 * 1vw);
      block-size: calc((100 / 390) * 240 * 1vw);
      inset-inline-start: 0;
      inset-block-start: -5vw;
    }
  }

  /* ==== .inner ==== */
  .inner {
    overflow: clip;
    @media only screen and (width <= 768px) {
      padding-block-start: 15.3vw;
    }
  }

  &::before {
    content: '';
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('../img/release/00.png');
    inline-size: 157px;
    block-size: 77px;
    position: absolute;
    inset-inline: 0;
    margin-inline: auto;
    inset-block-start: 0;
  }
  @media only screen and (width <= 768px) {
    &::before {
      background-image: url('../img/release/00_sp.png');
      inline-size: calc((100 / 390) * 154 / 2 * 1vw);
      block-size: calc((100 / 390) * 77 / 2 * 1vw);
    }
  }

  /* ==== head ==== */
  .head {
    position: relative;
    z-index: 2;
  }

  /* ==== body ==== */
  .body {
    margin-block-start: 45px;
    text-align: center;
    @media only screen and (width <= 768px) {
      margin-block-start: calc((100 / 390) * 20 * 1vw);
    }

    & strong {
      color: var(--red);
      font-weight: 700;
    }
  }

  /* ==== picture ==== */
  .picture {
    margin-inline: auto;
    display: block flow;
    margin-block-start: 67px;
    translate: 2px 0;
    @media (width > 1440px) {
      padding-block-end: 96px;
    }
    @media only screen and (width <= 768px) {
      margin-block-start: calc((100 / 390) * 32 * 1vw);
      translate: 0;
      inline-size: calc((100 / 390) * 372 * 1vw);
    }
  }
}

/* =====================
  concept
===================== */
.concept {
  position: relative;
  z-index: 2;
  margin-block-start: -142px;
  overflow: clip;
  @media only screen and (width <= 768px) {
    margin-block-start: 10vw;
  }

  &::before {
    content: '';
    position: relative;
    display: block flow;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
    background-image: url('../img/company/bg.webp');
    inline-size: 100%;
    block-size: 383px;
  }
  @media (width > 1441px) {
    &::before {
      background-image: url('../img/company/bg_full.png');
      block-size: calc((100 / 1920) * 453 * 1vw);
    }
  }
  @media only screen and (width <= 768px) {
    &::before {
      background-image: url('../img/concept/bg_sp.webp');
      block-size: calc((100 / 390) * 338 / 2 * 1vw);
      background-size: contain;
      background-position: center top;
    }
  }

  /* ==== unit1 ==== */
  .unit[data-id='1'] {
    position: relative;
    margin-inline: auto;
    margin-block-start: -244px;
    z-index: 2;
    inline-size: fit-content;
    @media only screen and (width <= 768px) {
      margin-block-start: -44.1vw;
    }

    & [data-id='1'] {
      position: relative;
      z-index: 2;
      @media only screen and (width <= 768px) {
        inline-size: calc((100 / 390) * 358 * 1vw);
      }
    }
    & [data-id='2'] {
      z-index: 1;
      display: block;
      position: absolute;
      inset-inline-start: 579px;
      max-inline-size: 587px;
      inline-size: 587px;
      inset-block-end: -127px;
      @media only screen and (width <= 768px) {
        inset-inline-start: 60.7vw;
        max-inline-size: calc((100 / 390) * 347 * 1vw);
        inline-size: calc((100 / 390) * 347 * 1vw);
        inset-block-end: -38vw;
      }
    }
  }

  /* ==== inner ==== */
  .inner {
    background: white;
    margin-block-start: -105px;
    padding-block-end: 68px;
    padding-block-start: 78px;
    @media only screen and (width <= 768px) {
      margin-block-start: -14.7vw;
      padding-block-end: 18.3vw;
      padding-block-start: 18.3vw;
    }

    /* ==== body ==== */
    .body {
      margin-block-start: 45px;
      @media only screen and (width <= 768px) {
        margin-block-start: 5.4vw;
      }

      & strong {
        color: var(--red);
        font-weight: 700;
      }
    }
  }
}

/* =====================
  gallery
===================== */
.gallery {
  pointer-events: none;
  background: var(--white);
  overflow: clip;
  .img {
    display: block flex;
    inline-size: 100vw;
    margin-inline: calc(50% - 50vw);
    block-size: 320px;
    @media (width > 1441px) {
      block-size: 480px;
    }
    @media only screen and (width <= 768px) {
      block-size: calc((100 / 390) * 160 * 1vw);
    }

    &::before,
    &::after {
      display: block flow;
      flex-shrink: 0;
      inline-size: 1800px;
      block-size: inherit;
      content: '';
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      background-image: url('../img/gallery/01.webp');
      animation: marquee 80s linear 0s infinite normal none running;
    }
    @media (width > 1441px) {
      &::before,
      &::after {
        inline-size: 2700px;
      }
    }
    @media only screen and (width <= 768px) {
      &::before,
      &::after {
        inline-size: calc((100 / 390) * 900 * 1vw);
      }
    }
  }
}

/* =====================
  parallax
===================== */
:root {
  --_transition: transform 1.2s ease, opacity 0.4s ease;
}

.js-parallax {
  opacity: 0;
  transform: translateY(1rem);
  transition: var(--_transition);
  transition-delay: var(--_delay, 200ms), var(--_delay, 200ms);
  will-change: transform, opacity;

  &.on {
    opacity: 1;
    transform: translateY(0);
  }
}