@charset "UTF-8";

/* =====================
  components
===================== */
main {
  /* faq部分 */
  .c-accordion {
    display: grid;
    gap: 20px;
    max-inline-size: 1060px;
    margin-inline: auto;

    @media not all and (width >=768px) {
      gap: calc((100 / 750) * 40 * 1vw);
    }

    & details {
      padding-inline: 40px;
      background: #1a1717;
      border: 1px solid #666;
      border-radius: 10px;

      @media not all and (width >=768px) {
        padding-inline: calc((100 / 750) * 0 * 1vw);
        border-radius: calc((100 / 750) * 10 * 1vw);
      }
    }

    .container {
      display: grid;
      grid-template-rows: 0;
      overflow: hidden;
    }

    & details[open] {
      & summary::after {
        clip-path: polygon(45% 45%, 55% 45%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 55%, 55% 100%, 55% 55%, 0% 55%, 0% 45%, 45% 45%);
      }

      .container {
        grid-template-rows: 1fr;
      }
    }

    /* ==== 見出し部分 ==== */
    & summary {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 40px;
      align-items: center;
      padding-block: 39px;
      font-size: 20px;
      font-weight: bold;
      color: white;
      word-break: break-all;
      cursor: pointer;
      counter-increment: number;
      transition: top 250ms ease 100ms;
      will-change: top;

      &::-webkit-details-marker,
      &::marker {
        display: none;
      }

      @media not all and (width >= 768px) {
        gap: calc((100 / 750) * 20 * 1vw);
        padding-block: calc((100 / 750) * 28 * 1vw);
        padding-inline: calc((100 / 750) * 26 * 1vw);
        font-size: calc((100 / 750) * 28 * 1vw);
        line-height: 1.5;
      }

      &::before {
        font-family: var(--title);
        font-size: 40px;
        font-weight: 700;
        line-height: 1;
        color: var(--orange);
        content: 'Q';
        translate: 0 -1%;
      }

      @media not all and (width >= 768px) {
        &::before {
          font-size: calc((100 / 750) * 38 * 1vw);
        }
      }

      &::after {
        inline-size: 25px;
        aspect-ratio: 1 / 1;
        content: '';
        background: white;
        clip-path: polygon(45% 0%, 55% 0%, 55% 45%, 100% 45%, 100% 55%, 55% 55%, 55% 100%, 45% 100%, 45% 55%, 0% 55%, 0% 45%, 45% 45%);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        transition: clip-path 150ms ease 0s;
        will-change: clip-path;
      }

      @media not all and (width >= 768px) {
        &::after {
          inline-size: calc((100 / 750) * 35 * 1vw);
        }
      }
    }

    /* ==== 内容部分 ==== */
    .unit {
      display: grid;
      grid-auto-flow: column;
      gap: 40px;
      align-items: flex-start;
      justify-content: flex-start;
      padding-block: 10px 50px;

      @media not all and (width >=768px) {
        gap: calc((100 / 750) * 20 * 1vw);
        padding-block: calc((100 / 750) * 20 * 1vw) calc((100 / 750) * 50 * 1vw);
        padding-inline: calc((100 / 750) * 26 * 1vw);
      }

      &::before {
        font-family: var(--title);
        font-size: 40px;
        font-weight: 700;
        line-height: 1;
        color: white;
        content: 'A';
        translate: 0 -42%;
      }

      @media not all and (width >=768px) {
        &::before {
          font-size: calc((100 / 750) * 38 * 1vw);
        }
      }

      & p {
        padding-inline-end: 50px;
        margin-block: calc((1em - 1lh) / 2);

        @media not all and (width >=768px) {
          padding-inline-end: 0;
        }

        & a {
          color: var(--orange);
          text-decoration: underline;
          transition: all 250ms ease 0s;

          @media (any-hover: hover) {
            &:hover {
              color: var(--orange);
              text-decoration: underline;
            }
          }
        }
      }
    }
  }

  .faq-wrap {
    padding-block: 130px;

    .u-head {
      margin-block-end: 60px;

      @media not all and (width >=768px) {
        margin-block-end: calc((100 / 750) * 60 * 1vw);
      }
    }

    @media not all and (width >=768px) {
      padding-block: calc((100 / 750) * 160 * 1vw);
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }
  }

  .faq-wrap:nth-child(odd) {
    background: var(--gray);

    & details {
      background: #000;
    }
  }

  /* ==== c-nav ==== */
  .c-navigation {
    margin-block: 90px 0;

    @media not all and (width >=768px) {
      margin-block: calc((100 / 750) * 120 * 1vw) 0;
    }

    & ul {
      display: grid;
      grid-template-columns: repeat(3, 1fr);

      @media not all and (width >=768px) {
        grid-template-columns: repeat(1, 1fr);
      }

      & li {
        position: relative;
        display: grid;
        gap: 30px;
        border: 1px solid transparent;
        border-block-color: #333;

        &:nth-child(3n + 2) {
          border-inline-color: #333;
        }

        @media not all and (width >=768px) {
          gap: 0;
          border-block-end: none;
          border-inline: unset;

          &:last-child {
            border-block-end: 1px solid #333;
          }
        }

        &::after {
          position: absolute;
          bottom: 0;
          left: 50%;
          inline-size: 32px;
          aspect-ratio: 1 / 1;
          content: '';
          background-image: url('../img/common/arrow-circle.svg');
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          translate: -50% 50%;
        }

        @media not all and (width >=768px) {
          &::after {
            position: absolute;
            top: 50%;
            right: calc((100 / 750) * 20 * 1vw);
            left: unset;
            inline-size: calc((100 / 750) * 50 * 1vw);
            translate: 0 -50%;
          }
        }

        & button {
          display: grid;
          grid-template-rows: subgrid;
          grid-row: span 2;
          gap: 22px;
          place-content: center;
          padding-block: 30px 34px;
          text-align: center;
          transition: all 250ms ease 0s;

          @media not all and (width >=768px) {
            gap: calc((100 / 750) * 20 * 1vw);
            place-content: unset;
            justify-content: flex-start;
            padding-block: calc((100 / 750) * 32 * 1vw);
            padding-inline: calc((100 / 750) * 40 * 1vw) calc((100 / 750) * 80 * 1vw);
            text-align: left;
          }

          @media (any-hover: hover) {
            &:hover {
              background: rgb(255 255 255 / 15%);
            }
          }

          & [lang='en'] {
            font-family: var(--title);
            font-size: 28px;
            font-weight: 600;
            line-height: 1;
            letter-spacing: 1.68px;

            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 36 * 1vw);
              letter-spacing: calc((100 / 750) * 1.68 * 1vw);
            }
          }

          .title {
            margin-block: calc((1em - 1lh) / 2);
            font-family: var(--yumin);
            font-size: 15px;
            font-weight: bold;
            letter-spacing: 0.9px;

            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 26 * 1vw);
              letter-spacing: calc((100 / 750) * 0.9 * 1vw);
            }
          }
        }
      }
    }
  }
}

/* =====================
  introduction
===================== */
.u-bg {
  padding-block: 130px 0;

  @media not all and (width >=768px) {
    padding-block: calc((100 / 750) * 160 * 1vw);

    .contents {
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }
  }
}