@charset "UTF-8";

/* =====================
  animation
===================== */
@keyframes hover {
  0% {
    opacity: 0.1;
    filter: blur(0.2em);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

/* =====================
  u-mv
===================== */
.u-mv {
  & hgroup {
    @media (width > 768px) {
      gap: 24px;
      padding-block: 34px;
      padding-inline: 0 80px;

      & [lang='en'] {
        font-size: 56px;
      }
    }
  }
}

/* =====================
  c-head
===================== */
.c-head {
  position: relative;
  inline-size: fit-content;
  padding-inline-start: 22px;
  margin-block-end: 41px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.4;

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

  /* ==== has .sub ==== */
  &:has(.sub) {
    display: block flex;
    flex-wrap: wrap;
    grid-column: 1 / 3 !important;
    gap: 10px;
    align-items: center;

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

    @media (width > 768px) {
      white-space: nowrap;
    }
  }

  &::before {
    position: absolute;
    inset-block-start: 18px;
    inset-inline-start: 0;
    display: block flow;
    inline-size: 12px;
    aspect-ratio: 1 / 1;
    content: '';
    background-color: var(--primary);
    border-radius: calc(infinity * 1px);
  }

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

  /* ==== sub ==== */
  .sub {
    display: inline flex;
    gap: 10px;
    align-items: center;

    @media (width > 768px) {
      translate: 0 2px;
    }

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

    .label {
      padding-block: 9px;
      padding-inline: 16px;
      font-size: 20px;
      line-height: 1;
      color: white;
      background: var(--primary);

      @media only screen and (width <= 768px) {
        padding-block: calc((100 / 390) * 9 * 1vw);
        padding-inline: calc((100 / 390) * 14 * 1vw);
        font-size: calc((100 / 390) * 20 * 1vw);
        white-space: nowrap;
      }
    }

    .text {
      font-size: 20px;
      font-weight: 500;

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

/* =====================
  c-title
===================== */
.c-title {
  position: relative;
  padding-inline-start: 16px;
  margin-block-end: 18px;
  font-size: 20px;
  font-weight: 500;

  @media only screen and (width <= 768px) {
    padding-inline-start: calc((100 / 390) * 16 * 1vw);
    margin-block-end: calc((100 / 390) * 18 * 1vw);
    font-size: calc((100 / 390) * 20 * 1vw);
  }

  &::before {
    position: absolute;
    inset-block: auto;
    inset-block-start: 50%;
    inset-inline-start: 0;
    display: block flow;
    inline-size: 4px;
    block-size: 61%;
    content: '';
    background-color: var(--primary);
    translate: 0 -50%;
  }

  @media only screen and (width <= 768px) {
    &::before {
      inline-size: calc((100 / 390) * 4 * 1vw);
      block-size: 65%;
    }
  }

  &:has(+ .c-table) {
    margin-block-end: 11px;
  }
}

/* =====================
  c-list
===================== */
.c-list {
  display: block grid;
  inline-size: fit-content;

  @media (width > 768px) {
    max-inline-size: 600px;
  }

  /* ==== li ==== */
  & li {
    position: relative;
  }

  /* ==== number ==== */
  .number {
    position: absolute;
  }

  .body {
    padding-inline-start: 17.3px;
    word-break: normal;

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

    & p {
      margin-block-start: 1px;

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

  & > li {
    position: relative;

    & ol {
      margin-block-start: 1px;

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

      .number {
        translate: -1px 0;

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

      .body {
        padding-inline-start: 18px;

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

/* =====================
  c-unordered-list
===================== */
.c-unordered-list {
  display: block grid;
  inline-size: fit-content;

  @media (width > 768px) {
    max-inline-size: 600px;
  }

  & li {
    position: relative;
    padding-inline-start: 24px;
    word-break: normal;

    &::before {
      position: absolute;
      inset-block-start: 13px;
      inset-inline-start: 10px;
      display: block flow;
      inline-size: 4px;
      aspect-ratio: 1 / 1;
      content: '';
      background-color: currentcolor;
      border-radius: calc(infinity * 1px);
    }
  }
}

/* =====================
  c-scroll-table
===================== */
.c-scroll-table {
  @media only screen and (width <= 768px) {
    display: block flex;
    padding-block-end: 4vw;
    margin-inline: calc(50% - 50vw);

    &::after {
      display: block flow;
      flex-shrink: 0;
      inline-size: calc((100 / 390) * 40 * 1vw);
      content: '';
    }
  }

  @media only screen and (width <= 768px) {
    overflow-x: auto;

    & table {
      inline-size: 100vw;
    }
  }
}

/* =====================
  c-table
===================== */
.c-table {
  display: block grid;
  gap: 8px;

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

  /* ==== p ==== */
  & p {
    padding-inline-start: 8px;
    font-weight: 500;
    line-height: 1.6;

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

  /* ==== table ==== */
  & table {
    inline-size: 100%;

    & :where(td, th) {
      padding-block: 7.2px 7px;
      padding-inline: 7.2px;
      border: 1px solid var(--gray);

      @media only screen and (width <= 768px) {
        padding-block: 1.8vw;
        padding-inline: 5.3vw;
        white-space: nowrap;
      }

      &.tac {
        text-align: center;
      }

      &[data-size='middle'] {
        @media (width > 768px) {
          inline-size: 192.5px;

          & + [data-size='middle'] {
            inline-size: 173.5px;
          }
        }
      }
    }

    & th {
      font-weight: 500;
      background: rgb(31 48 145 / 10%);

      @media only screen and (width <= 768px) {
        min-inline-size: calc((100 / 390) * 194 * 1vw);
      }
    }
  }
}

/* =====================
  c-figure
===================== */
main .introduction section:has(.c-figure) {
  display: block grid;
  grid-auto-flow: column;
  gap: 0 36px;
  align-items: flex-start;
  justify-content: flex-start;

  @media only screen and (width <= 768px) {
    display: block flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    justify-content: center;
    margin-inline: auto;

    .c-figure + .c-figure {
      margin-block-start: 12.9vw;
    }
  }
}

.c-figure {
  display: block grid;
  gap: 12px;
  inline-size: fit-content;
  text-align: left;

  @media (width > 768px) {
    min-inline-size: 340px;
  }

  @media only screen and (width <= 768px) {
    gap: calc((100 / 390) * 12.4 * 1vw);
    inline-size: 100%;
    margin-block-start: calc((100 / 390) * (64 - 57) * 1vw);
    margin-inline: auto;
  }

  & img {
    display: block flow;
    margin-inline: auto;
  }

  figcaption {
    inline-size: fit-content;
    margin-inline: auto;
    line-height: 1.2;
  }
}

/* =====================
  c-img
===================== */
.c-img {
  display: block flow;
  margin-inline: auto;
  object-fit: contain;
}

/* =====================
  list
===================== */
body[data-type='list'] {
  position: relative;

  /* ==== article ==== */
  & article.list {
    position: relative;

    &::before {
      position: absolute;
      inset-block-start: -65px;
      inset-inline-end: 0;
      inline-size: 645px;
      block-size: 521px;
      pointer-events: none;
      content: '';
      background-image: url('../img/products/bg.webp');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
    }

    @media only screen and (width <= 768px) {
      &::before {
        inset-block-start: -14.8vw;
        inset-inline-end: 0;
        inline-size: calc((100 / 390) * 594 / 2 * 1vw);
        block-size: calc((100 / 390) * 524 / 2 * 1vw);
        background-image: url('../img/products/bg_sp.webp');
      }
    }

    .u-inner {
      position: relative;
      z-index: 2;
      display: block grid;
      max-inline-size: 1200px;
      padding-block: 102px 131px;
      margin-inline: auto;

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

      .u-hgroup {
        @media only screen and (width <= 768px) {
          gap: 3.2vw;
          padding-inline: 1.1vw;
        }
      }
    }

    & ol {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 51px 60px;
      align-items: center;
      margin-block-start: 93px;
      counter-reset: number;

      @media only screen and (width <= 768px) {
        display: block flex;
        flex-direction: column;
        gap: calc((100 / 390) * 49.7 * 1vw);
      }

      & li {
        position: relative;
        display: block grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        gap: 11.8px;
        align-items: center;
        inline-size: fit-content;
        transition: all 250ms ease 0s;

        @media (any-hover: hover) {
          &:hover {
            opacity: 0.7;
          }
        }

        @media only screen and (width <= 768px) {
          gap: calc((100 / 390) * 14.6 * 1vw);
          max-inline-size: calc((100 / 390) * 350 * 1vw);
        }
      }

      & h3 {
        display: block flex;
        gap: 8px;
        align-items: center;
        min-block-size: 2.7em;
        padding-inline: 8px;
        font-size: 18px;
        font-weight: 400;
        line-height: 1.4;

        @media only screen and (width <= 768px) {
          gap: calc((100 / 390) * 8 * 1vw);
          min-block-size: unset;
          padding-inline: calc((100 / 390) * 8 * 1vw);
          font-size: calc((100 / 390) * 18 * 1vw);
        }

        &:has(br) {
          align-items: flex-start;
        }

        &::before {
          flex-shrink: 0;
          font-family: var(--outfit);
          font-size: 25px;
          font-weight: 500;
          color: var(--primary);
          content: '0' counter(number) '.';
          counter-increment: number;
          translate: 0 3px;
        }
      }

      & img {
        block-size: 400px;
        object-fit: cover;
        border-radius: 8px;
      }

      & a::before {
        position: absolute;
        inset: 0;
        inline-size: 100%;
        block-size: 100%;
        content: '';
      }
    }
  }
}

/* =====================
  coke
===================== */
body[data-id='coke'] {
  .modal {
    & .inner {
      @media (width > 768px) {
        padding-block-start: 103px;

        .swiper-controller {
          inset-block-start: 376px;
        }

        .close {
          inset-block-start: 104px;
        }
      }
    }
  }
}

/* =====================
  vertical
===================== */
body[data-id='vertical'] {
  .modal {
    & .inner {
      @media (width > 768px) {
        padding-block-start: 140px;

        .swiper-controller {
          inset-block-start: 411px;
        }

        .close {
          inset-block-start: 140px;
        }
      }
    }
  }
}

/* =====================
  detail
===================== */
body[data-type='detail'] {
  /* ==== u-breadcrumb ==== */
  .u-breadcrumb {
    @media only screen and (width <= 768px) {
      .item {
        display: inline-flex;
        line-height: 1.2;

        &:has(br) {
          translate: 0 -2vw;
        }
      }
    }
  }

  /* ==== contents ==== */
  .contents {
    padding-block: 106px 104px;

    @media only screen and (width <= 768px) {
      padding-block: 23.6vw 26.9vw;
      overflow: hidden;
    }

    /* ==== u-inner ==== */
    .u-inner {
      max-inline-size: 1200px;

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

    /* ==== introduction ==== */
    .introduction {
      display: block grid;
      grid-template-rows: auto;
      grid-template-columns: 1fr auto;
      grid-auto-rows: min-content;
      align-items: start;
      justify-content: space-between;

      @media only screen and (width <= 768px) {
        display: block flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
      }

      /* ==== h1 ==== */
      & h1 {
        grid-row: 1 / 2;
        grid-column: 1 / 2;
        align-self: start;

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

      /* ==== img ==== */
      .img {
        display: block grid;
        grid-row: 1 / span 100;
        grid-column: 2 / 3;
        gap: 22px;
        align-self: start;
        max-inline-size: 556px;
        margin-block-start: 5px;

        @media only screen and (width <= 768px) {
          gap: calc((100 / 390) * 20.6 * 1vw);
          max-inline-size: 100%;
          margin-block: 0 12.4vw;
        }

        /* ==== button ==== */
        & button {
          transition: opacity 250ms ease 0s;

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

          @media (any-hover: hover) {
            &:hover {
              opacity: 0.7;
            }
          }
        }

        /* ==== figure ==== */
        & figure {
          display: block grid;
          gap: 13px;

          &.change {
            animation: hover 600ms var(--easeOutBounce) 0ms 1 normal none running;
          }

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

          & picture {
            display: block flow;

            & img {
              inline-size: 556px;
              block-size: 569px;
              object-fit: contain;
            }

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

          & figcaption {
            margin-block: calc((1em - 1lh) / 2);
            font-size: 18px;
            font-weight: 500;
            line-height: 1.44;
            text-align: center;

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

        /* ==== thumb ==== */
        .thumb {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 24px;

          @media only screen and (width <= 768px) {
            display: block flex;
            gap: calc((100 / 390) * 23.4 * 1vw);
            inline-size: 100%;
            padding-block: calc((100 / 390) * 1 * 1vw);
            padding-inline: calc((100 / 390) * 1 * 1vw) calc((100 / 390) * 20 * 1vw);
            overflow-x: auto;
          }

          & button {
            display: block flow;
            inline-size: 121px;
            block-size: 121px;
            overflow: clip;

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

            &.active {
              pointer-events: none;
              outline: 2px solid var(--primary);
              outline-offset: -1px;

              @media only screen and (width <= 768px) {
                outline: calc((100 / 390) * 2 * 1vw) solid var(--primary);
                outline-offset: calc((100 / 390) * -1 * 1vw);
              }
            }

            & img {
              inline-size: 121px;
              block-size: 121px;
              object-fit: cover;
              transition: scale 350ms ease 0s;
              will-change: scale;

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

              @media (any-hover: hover) {
                &:hover {
                  scale: 1.1;
                }
              }
            }
          }
        }
      }

      /* ==== section ==== */
      & section {
        @media only screen and (width <= 768px) {
          overflow: hidden;
        }

        grid-column: 1 / 2;
        align-self: flex-start;

        /* ==== has:c-img ==== */
        &:has(.c-img) {
          display: block grid;
          grid-column: 1 / 3;
          gap: 56px;

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

        & p {
          word-break: normal;
        }
      }

      & section + section {
        margin-block-start: 57px;

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

      & section:has(.c-table) {
        grid-column: 1 / 3;
        margin-block-start: 52px;

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

      /* ==== u-anchor ==== */
      .u-anchor {
        grid-column: 1 / 3;
        gap: 19px;
        padding-block: 22px;
        padding-inline: 43px 31px;
        margin-block-start: 79px;
        margin-inline: auto;

        @media only screen and (width <= 768px) {
          gap: calc((100 / 390) * 0 * 1vw);
          padding-block: calc((100 / 390) * 24 * 1vw);
          padding-inline: calc((100 / 390) * 46 * 1vw) calc((100 / 390) * 77 * 1vw);
          margin-block-start: calc((100 / 390) * 79 * 1vw);
        }

        &[target='_blank']::after {
          inset-block-start: 52%;
          inset-inline-end: calc((100 / 390) * 32 * 1vw);
        }
      }
    }
  }
}

/* =====================
  modal
===================== */
body.modal-on {
  overflow: hidden;

  .modal {
    z-index: 50;
    pointer-events: auto;
    opacity: 1;
  }
}

.modal {
  position: fixed;
  inset: 0 auto;
  z-index: -1;
  inline-size: 100%;
  block-size: 100vh;
  margin-inline: auto;
  overflow-y: auto;
  pointer-events: none;
  background: white;
  opacity: 0;
  transition: opacity 350ms ease 0s;

  /* ==== inner ==== */
  .inner {
    position: relative;
    inline-size: 986px;
    padding-block: 122px;
    margin-inline: auto;

    @media only screen and (width <= 768px) {
      inline-size: 100%;
      padding-block: calc((100 / 390) * 53.5 * 1vw) calc((100 / 390) * 169.5 * 1vw);
      padding-inline: calc((100 / 390) * 4 * 1vw);
    }
  }

  /* ==== head ==== */
  .head {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    letter-spacing: 0.96px;

    @media only screen and (width <= 768px) {
      font-size: calc((100 / 390) * 24 * 1vw);
      line-height: 1.2;
      letter-spacing: calc((100 / 390) * 0.96 * 1vw);
    }
  }

  /* ==== close ==== */
  .close {
    position: absolute;
    inset-block-start: 122px;
    inset-inline-end: -2px;
    inline-size: 39px;
    block-size: 35px;

    @media only screen and (width <= 768px) {
      inset-block-start: 4.2vw;
      inset-inline-end: 6.4vw;
      inline-size: calc((100 / 390) * 32 * 1vw);
      block-size: calc((100 / 390) * 32 * 1vw);
    }

    &::before {
      display: block flow;
      inline-size: 100%;
      block-size: 100%;
      content: '';
      background-color: var(--gray);
      mask-image: var(--icon-modal-close);
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
    }
  }

  /* ==== swiper ==== */
  .products-swiper {
    margin-block-start: 10px;
    margin-inline: auto;

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

    .swiper-wrapper {
      align-items: center;
    }

    & img {
      display: block flow;
      margin-inline: auto;
      pointer-events: none;
      object-fit: contain;

      @media (width > 768px) {
        block-size: 550px;
      }

      @media only screen and (width <= 768px) {
        max-inline-size: calc((100 / 390) * 315 * 1vw);
        block-size: calc((100 / 390) * 417 * 1vw);
        block-size: auto;
      }
    }
  }

  /* ==== products-thumbs-swiper ==== */
  .products-thumbs-swiper {
    z-index: 20;
    margin-block-start: 48px;

    @media (width > 768px) {
      margin-inline-start: 8px;
    }

    @media only screen and (width <= 768px) {
      margin-block-start: calc((100 / 390) * 40 * 1vw);
      margin-inline-start: calc((100 / 390) * 8 * 1vw);
    }

    .swiper-wrapper {
      flex-wrap: wrap;
      justify-content: center;
    }

    .swiper-slide {
      inline-size: 80px;
      block-size: 80px;
      aspect-ratio: 1 / 1;
      padding: 1px;
      cursor: pointer;

      & img {
        max-inline-size: 80px;
        max-block-size: 80px;
        object-fit: contain;
      }

      &.swiper-slide-thumb-active {
        outline: 1px solid var(--primary);
        outline-offset: -1px;
      }
    }
  }

  /* ==== swiper-controller ==== */
  .swiper-controller {
    position: absolute;
    inset-block-start: 395px;
    inset-inline-start: 50%;
    z-index: 2;
    inline-size: 100%;
    block-size: 57px;
    pointer-events: none;
    translate: -50% 0;

    @media only screen and (width <= 768px) {
      
      
      
      
      inset-block-start: 40%;
      inline-size: calc(100% - calc((100 / 390) * 9 * 1vw));
      block-size: calc((100 / 390) * 43.81 * 1vw);
      
      
      
      
    }

    & :where(.prev, .next) {
      position: absolute;
      inline-size: 34px;
      block-size: 57px;
      pointer-events: auto;

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

      &::before {
        display: block flow;
        inline-size: 100%;
        block-size: 100%;
        content: '';
        background-color: var(--gray);
        mask-image: var(--icon-modal-arrow);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
      }
    }

    .prev {
      inset-inline-start: 0;
    }

    .next {
      inset-inline-end: 0;
      rotate: 0 0 1 180deg;
    }
  }
}

/* =====================
  [data-id='vertical']
===================== */
body[data-id='vertical'] {
  & .contents {
    @media only screen and (width <= 768px) {
      padding-block: 27.4vw 26.9vw;
    }
  }
}

/* =====================
  [data-id='delacquering']
===================== */
body[data-id='delacquering'] {
  & .contents {
    @media only screen and (width <= 768px) {
      padding-block: 27.4vw 26.9vw;
    }
  }
}

/* =====================
  [data-id='removal']
===================== */
body[data-id='removal'] {
  /* ==== introduction ==== */
  .introduction {
    /* ==== c-head ==== */
    & h1.c-head {
      @media only screen and (width <= 768px) {
        display: block flow;

        .sub {
          display: block grid;
          margin-block-start: 3vw;

          .label {
            inline-size: fit-content;
            white-space: unset;
          }
        }
      }
    }

    /* ==== img ==== */
    .img {
      @media (width > 768px) {
        display: block flow;
        margin-block-start: 85px !important;
      }

      & figure {
        @media only screen and (width <= 768px) {
          gap: 7.7vw !important;
        }
      }

      & button {
        @media only screen and (width <= 768px) {
          block-size: 100% !important;
        }
      }

      & picture {
        @media only screen and (width <= 768px) {
          inline-size: 100%;
          block-size: calc((100 / 390) * 227 * 1vw) !important;
          margin-block-start: 9.7vw !important;
        }
      }

      & img {
        inline-size: 100% !important;
        block-size: 100% !important;
      }
    }
  }

  & .contents {
    @media only screen and (width <= 768px) {
      padding-block: 27.4vw 26.9vw;
    }

    & .u-inner {
      @media only screen and (width <= 768px) {
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }
    }
  }

  .c-head {
    @media (width > 768px) {
      margin-block-end: 16px;
    }

    @media only screen and (width <= 768px) {
      margin-block-end: 0 !important;
    }

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

  .c-figure + .c-figure {
    @media (width > 768px) {
      translate: 20px 0;
    }
  }
}

/* =====================
  [data-id='turn']
===================== */
body[data-id='turn'] {
  /* ==== modal ==== */
  .modal {
    .swiper-controller {
      @media only screen and (width <= 768px) {
        inset-block-start: 50%;
      }
    }
  }
}

/* =====================
  [data-id='lime']
===================== */
body[data-id='lime'] {
  & .contents {
    @media only screen and (width <= 768px) {
      padding-block: 27.3vw 26.9vw;
      container-type: inline-size;
      overflow: hidden;
    }
  }

  /* ==== popup-figure ==== */
  .popup-figure {
    @media only screen and (width <= 768px) {
      margin-inline: calc(50% - 50vw);
      overflow-x: auto;
    }

    .img {
      position: relative;
      inline-size: 1165px;
      block-size: 1478px;
      margin-block: 125px 13px;
      margin-inline: auto;
      background-image: url('../img/products/lime/feature.webp');
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      translate: -3px 0;

      @media only screen and (width <= 768px) {
        inline-size: calc((100 / 390) * 2330 / 2 * 1vw);
        block-size: calc((100 / 390) * 2955 / 2 * 1vw);
        margin-block: calc((100 / 390) * 127 * 1vw) calc((100 / 390) * 13 * 1vw);
        translate: unset;
      }
    }

    /* ==== button ==== */
    & button {
      position: absolute;
      padding-block: 13px;
      padding-inline: 20px;
      font-size: 17px;
      font-weight: 500;
      line-height: 1;
      color: var(--primary);
      letter-spacing: 0.51px;
      background: white;
      border: 2px solid var(--primary);
      border-radius: calc(infinity * 1px);
      transition: all 250ms ease 0s;

      @media only screen and (width <= 768px) {
        padding-block: calc((100 / 390) * 13 * 1vw);
        padding-inline: calc((100 / 390) * 20 * 1vw);
        font-size: calc((100 / 390) * 17 * 1vw);
        letter-spacing: calc((100 / 390) * 0.51 * 1vw);
        border: calc((100 / 390) * 3 * 1vw) solid var(--primary);
      }

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

      &[data-id='01'] {
        inset-block-start: 653px;
        inset-inline-start: 508px;

        @media only screen and (width <= 768px) {
          inset-block-start: calc((100 / 390) * 653 * 1vw);
          inset-inline-start: calc((100 / 390) * 508 * 1vw);
        }
      }

      &[data-id='02'] {
        inset-block-start: 766px;
        inset-inline-start: 375px;

        @media only screen and (width <= 768px) {
          inset-block-start: calc((100 / 390) * 766 * 1vw);
          inset-inline-start: calc((100 / 390) * 375 * 1vw);
        }
      }

      &[data-id='03'] {
        inset-block-start: 826px;
        inset-inline-start: 500px;

        @media only screen and (width <= 768px) {
          inset-block-start: calc((100 / 390) * 826 * 1vw);
          inset-inline-start: calc((100 / 390) * 499 * 1vw);
        }
      }

      &[data-id='04'] {
        inset-block-start: 933px;
        inset-inline-start: 344px;

        @media only screen and (width <= 768px) {
          inset-block-start: calc((100 / 390) * 933 * 1vw);
          inset-inline-start: calc((100 / 390) * 343 * 1vw);
        }
      }

      &::after {
        position: absolute;
        inset-block-end: -129%;
        inset-inline: 0;
        inline-size: 54px;
        block-size: 57px;
        margin-inline: auto;
        content: '';
        background-image: url('../img/_common/pin.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        filter: drop-shadow(0 2px 2px rgb(0 0 0 / 25%));
      }

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

/* =====================
  modal
===================== */
body.feature-modal-on {
  overflow: hidden;

  .feature-modal {
    z-index: 50;
    pointer-events: auto;
    opacity: 1;
  }
}

.feature-modal {
  position: fixed;
  inset: 0 auto;
  z-index: -1;
  inline-size: 100%;
  block-size: 100vh;
  margin-inline: auto;
  overflow-y: auto;
  pointer-events: none;
  background: white;
  opacity: 0;
  transition: opacity 350ms ease 0s;

  /* ==== inner ==== */
  .inner {
    position: relative;
    inline-size: 986px;
    padding-block: 122px;
    margin-inline: auto;

    @media only screen and (width <= 768px) {
      inline-size: 100%;
      padding-block: calc((100 / 390) * 192.5 * 1vw) calc((100 / 390) * 220.5 * 1vw);
      padding-inline: calc((100 / 390) * 4 * 1vw);

      &:has([data-id='02'].on) {
        padding-block: calc((100 / 390) * 207.5 * 1vw) calc((100 / 390) * 220.5 * 1vw);
      }
    }
  }

  /* ==== feature-item ==== */
  .feature-item {
    display: none;

    &.on {
      display: block flow;
    }

    .head {
      @media (width > 768px) {
        translate: -5px 0;
      }
    }

    & figure {
      inline-size: fit-content;
      margin-block-start: 8px;
      margin-inline: auto;

      @media (width > 768px) {
        translate: -5px 0;
      }

      @media only screen and (width <= 768px) {
        margin-block-start: 12.8vw;

        .img {
          display: block flow;
          inline-size: calc((100 / 390) * 315 * 1vw);
          block-size: calc((100 / 390) * 507 * 1vw);
          margin-block: calc((1em - 1lh) / 2);

          & img {
            inline-size: calc((100 / 390) * 315 * 1vw);
            block-size: calc((100 / 390) * 507 * 1vw);
            object-fit: contain;
          }
        }
      }
    }

    & figcaption {
      margin-block-start: 5px;
      font-weight: 350;
      line-height: 2.12;
      text-align: center;

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

    &[data-id='01'] {
      .head {
        @media (width > 768px) {
          translate: -5px 0;
        }
      }

      & figure {
        @media (width > 768px) {
          translate: -5px 0;
        }
      }
    }

    &[data-id='02'] {
      .head {
        @media (width > 768px) {
          padding-block-start: 5px;
          margin-block: calc((1em - 1lh) / 2);
          translate: -5px 0;
        }
      }
    }

    &[data-id='03'] {
      .head {
        @media (width > 768px) {
          translate: -5px 0;
        }
      }

      & figure {
        @media (width > 768px) {
          translate: -5px 0;
        }
      }
    }

    &[data-id='04'] {
      .head {
        @media (width > 768px) {
          translate: -5px 0;
        }
      }

      & figure {
        @media (width > 768px) {
          translate: -5px 0;
        }
      }
    }
  }

  /* ==== head ==== */
  .head {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    text-align: center;
    letter-spacing: 0.96px;

    @media only screen and (width <= 768px) {
      font-size: calc((100 / 390) * 24 * 1vw);
      line-height: 1.2;
      letter-spacing: calc((100 / 390) * 0.96 * 1vw);
    }
  }

  /* ==== close ==== */
  .close {
    position: absolute;
    inset-block-start: 111px;
    inset-inline-end: 60px;
    inline-size: 39px;
    block-size: 35px;

    @media only screen and (width <= 768px) {
      inset-block-start: 40.3vw;
      inset-inline-end: 9.6vw;
      inline-size: calc((100 / 390) * 32 * 1vw);
      block-size: calc((100 / 390) * 32 * 1vw);
    }

    &::before {
      display: block flow;
      inline-size: 100%;
      block-size: 100%;
      content: '';
      background-color: var(--gray);
      mask-image: var(--icon-modal-close);
      mask-repeat: no-repeat;
      mask-position: center;
      mask-size: contain;
    }

    @media only screen and (width <= 768px) {
      &::before {
        mask-image: var(--icon-modal-feature-close-sp);
      }
    }
  }

  &:has([data-id='01'].on) .close {
    @media (width > 768px) {
      inset-block-start: 112px;
      inset-inline-end: 53px;
    }
  }

  &:has([data-id='02'].on) .close {
    @media (width > 768px) {
      inset-block-start: 112px;
      inset-inline-end: 53px;
    }

    @media only screen and (width <= 768px) {
      inset-block-start: 44.3vw;
      inset-inline-end: 9.6vw;
    }
  }

  &:has([data-id='03'].on) .close {
    @media (width > 768px) {
      inset-block-start: 112px;
      inset-inline-end: 53px;
    }
  }

  &:has([data-id='04'].on) .close {
    @media (width > 768px) {
      inset-block-start: 112px;
      inset-inline-end: 53px;
    }
  }

  /* ==== swiper ==== */
  .products-swiper {
    margin-block-start: 0;
    margin-inline: auto;

    @media (width > 768px) {
      margin-block-start: 14px;
      margin-inline-start: -10px;
    }

    @media only screen and (width <= 768px) {
      margin-block-start: 11.4vw;
    }

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

    & img {
      display: block flow;
      margin-inline: auto;
      pointer-events: none;
      object-fit: contain;

      @media (width > 768px) {
        block-size: 550px;
      }

      @media only screen and (width <= 768px) {
        max-inline-size: calc((100 / 390) * 315 * 1vw);
        block-size: calc((100 / 390) * 507 * 1vw);
      }
    }

    & p {
      margin-block-start: 5px;
      line-height: 2.1;
      text-align: center;
      translate: -1px 0;
    }
  }

  /* ==== products-thumbs-swiper ==== */
  .products-thumbs-swiper {
    z-index: 20;
    margin-block-start: 48px;

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

    .swiper-wrapper {
      flex-wrap: wrap;
      justify-content: center;
    }

    .swiper-slide {
      inline-size: 80px;
      block-size: 80px;
      aspect-ratio: 1 / 1;
      padding: 1px;
      cursor: pointer;

      & img {
        max-inline-size: 80px;
        max-block-size: 80px;
        object-fit: contain;
      }

      &.swiper-slide-thumb-active {
        outline: 1px solid var(--primary);
        outline-offset: -1px;
      }
    }
  }

  /* ==== swiper-controller ==== */
  .swiper-controller {
    position: absolute;
    inset-block-start: 408px;
    inset-inline-start: 50%;
    z-index: 2;
    inline-size: 101%;
    block-size: 57px;
    pointer-events: none;
    translate: -50% 0;

    @media only screen and (width <= 768px) {
      inset-block-start: calc((100 / 390) * 512 * 1vw);
      inline-size: calc(100% - calc((100 / 390) * 9 * 1vw));
      block-size: calc((100 / 390) * 43.81 * 1vw);
    }

    & :where(.prev, .next) {
      position: absolute;
      inline-size: 34px;
      block-size: 57px;
      pointer-events: auto;

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

      &::before {
        display: block flow;
        inline-size: 100%;
        block-size: 100%;
        content: '';
        background-color: var(--gray);
        mask-image: var(--icon-modal-arrow);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
      }
    }

    .prev {
      inset-inline-start: 0;
    }

    .next {
      inset-inline-end: 0;
      rotate: 0 0 1 180deg;

      @media (width > 768px) {
        inset-inline-end: 10px;
      }
    }
  }
}

/* =====================
  List
===================== */
html[lang='en'] body[data-type='list'] {
  .u-mv {
    & hgroup {
      @media (width > 768px) {
        padding-block: 35.7px;
      }
    }
  }

  & article.list {
    & ol {
      margin-block-start: 82px;
    }

    & [data-url='removal'] h3 {
      @media (width > 768px) {
        white-space: nowrap;
      }

      @media only screen and (width <= 768px) {
        padding-inline-end: 14vw;
        word-break: normal;
      }
    }
  }
}

/* =====================
  List
===================== */
html[lang='en'] body[data-type='detail'] {
  .c-list {
    & li {
      padding-inline-end: 0.2vw;
    }
  }

  .u-mv {
    & hgroup {
      @media (width > 768px) {
        padding-block: 35.7px;
      }
    }
  }

  /* ==== popup-figure ==== */
  .popup-figure {
    margin-block-end: 10px;
    margin-inline: calc(50% - 50cqi);

    .img {
      margin-block-start: 122px;
      background-image: url('../img/products/lime/feature_en.webp');

      @media (width > 768px) {
        inline-size: 1163px;
        block-size: 1657px;
      }

      @media only screen and (width <= 768px) {
        inline-size: calc((100 / 390) * 2326 / 2 * 1vw);
        block-size: calc((100 / 390) * 3315 / 2 * 1vw);
        margin-block-start: calc((100 / 390) * 118 * 1vw);
        background-image: url('../img/products/lime/feature_en_sp.webp');
      }

      & [data-id='01'] {
        inset-block-start: 749px;
        inset-inline-start: 508px;

        @media only screen and (width <= 768px) {
          inset-block-start: calc((100 / 390) * 749 * 1vw);
          inset-inline-start: calc((100 / 390) * 506 * 1vw);
        }
      }

      & [data-id='02'] {
        inset-block-start: 880px;
        inset-inline-start: 332px;

        @media only screen and (width <= 768px) {
          inset-block-start: calc((100 / 390) * 879 * 1vw);
          inset-inline-start: calc((100 / 390) * 331 * 1vw);
        }
      }

      & [data-id='03'] {
        inset-block-start: 941px;
        inset-inline-start: 506px;

        @media only screen and (width <= 768px) {
          inset-block-start: calc((100 / 390) * 938 * 1vw);
          inset-inline-start: calc((100 / 390) * 502 * 1vw);
        }
      }

      & [data-id='04'] {
        inset-block-start: 1060px;
        inset-inline-start: 255px;

        @media only screen and (width <= 768px) {
          inset-block-start: calc((100 / 390) * 1059 * 1vw);
          inset-inline-start: calc((100 / 390) * 253 * 1vw);
        }
      }
    }
  }
}

@media only screen and (width <= 768px) {
  .swiper.swiper-horizontal {
    touch-action: auto;
  }
}