@charset "UTF-8";

/* =====================
  01
===================== */
.tab-philosophy {
  .article[data-id='1'] {
    padding-block-end: 160px;

    @media (width <=768px) {
      padding-block-end: var(--nudge-9);
    }

    /* ==== catch ==== */
    .catch {
      display: block flex;
      inline-size: fit-content;
      padding-block-start: 89px;
      margin-inline: auto;

      @media (width <=768px) {
        display: block flex;
        flex-direction: column;
        inline-size: 100%;
        padding-block-start: var(--nudge-7);
        margin-inline: auto;
        text-align: center;
      }

      p {
        inline-size: fit-content;
        padding-inline-start: 75px;
        font-size: 60px;
        font-weight: 500;
        line-height: 190%;

        @media (width <=768px) {
          inline-size: 100%;
          padding-inline-start: 0;
          font-size: calc((100 / 390) * 31 * 1vw);
          text-align: center;
        }
      }

      img {
        margin-block-start: 65px;
        translate: -75px 0;

        @media (width <=768px) {
          display: block flow;
          max-inline-size: calc((100 / 390) * 250 * 1vw);
          margin-block-start: 8vw;
          margin-inline: auto;
          translate: none;
        }
      }
    }

    /* ==== comment ==== */
    .comment {
      margin-block-start: 101px;
      text-align: center;

      @media (width <=768px) {
        margin-block-start: var(--nudge-7);
      }

      p[data-id='1'] {
        font-size: 17px;
        line-height: 2.5;

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

      p[data-id='2'] {
        margin-block: 44px 10px;
        font-size: 17px;
        line-height: 2.5;

        @media (width <=768px) {
          margin-block: var(--nudge-4);
          font-size: calc((100 / 390) * 16 * 1vw);
        }

        strong {
          display: block flow;
          margin-block: 17px 7px;
          font-size: 30px;
          font-weight: 700;
          line-height: 2;

          @media (width <=768px) {
            margin-block: 0;
            font-size: calc((100 / 390) * 17 * 1vw);
          }
        }
      }

      p[data-id='3'] {
        margin-block-start: 43px;
        font-size: 17px;
        line-height: 2.5;

        @media (width <=768px) {
          margin-block: var(--nudge-4);
          font-size: calc((100 / 390) * 16 * 1vw);
        }
      }

      p[data-id='4'] {
        margin-block: 31px 10px;
        font-size: 17px;
        line-height: 2.5;

        @media (width <=768px) {
          margin-block: var(--nudge-4);
          font-size: calc((100 / 390) * 16 * 1vw);
        }

        strong {
          font-size: 30px;
          font-weight: 700;
          line-height: 2;

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

      .picture {
        display: block flex;
        margin-block: 116px 0;
        margin-inline: auto;

        @media (width <=768px) {
          margin-block: var(--nudge-4) 0;
        }
      }
    }

    /* ==== figure ==== */
    .figure {
      position: relative;
      inline-size: 710px;
      aspect-ratio: 1 / 1;
      margin-block-start: 114px;
      margin-inline: auto;

      @media (width <=768px) {
        inline-size: 100%;
        margin-block-start: var(--nudge-5);
      }

      &::before,
      &::after {
        position: absolute;
        display: block flow;
        content: '';
        background: #bebebe;
      }

      &::before {
        inset-block-start: 49.9%;
        inset-inline: 0;
        inline-size: 91%;
        block-size: 1px;
        margin-inline: auto;
      }

      &::after {
        inset-block-start: 4.3%;
        inset-inline: 0;
        inline-size: 1px;
        block-size: 91%;
        margin-inline: auto;
      }

      /* ==== inner ==== */
      .inner {
        position: relative;
        z-index: 2;
        display: block grid;
        grid-template-columns: repeat(2, 1fr);

        &::before {
          position: absolute;
          inset-block-start: 50%;
          inset-inline: 0;
          inline-size: 220px;
          aspect-ratio: 1 / 1;
          margin-inline: auto;
          content: '';
          background: white;
          border-radius: calc(infinity * 1px);
          translate: 0 -50%;

          @media (width <=768px) {
            inline-size: calc((100 / 390) * 90 * 1vw);
          }
        }

        &::after {
          position: absolute;
          inset-block-start: 50%;
          inset-inline: 0;
          inline-size: 136px;
          aspect-ratio: 136 / 126;
          margin-inline: auto;
          content: '';
          background-image: url('../img/company/philosophy/icon/logo.webp');
          background-repeat: no-repeat;
          background-position: center;
          background-size: contain;
          translate: 0 -50%;

          @media (width <=768px) {
            inline-size: 13vw;
          }
        }
      }

      /* ==== unit ==== */
      .unit {
        --radius: 50px;

        @media (width <=768px) {
          --radius: calc((100 / 390) * 25 * 1vw);
        }

        position: relative;
        display: block grid;
        gap: 12px;
        place-content: center;
        aspect-ratio: 1 / 1;

        @media (width <=768px) {
          gap: var(--nudge-2);
        }

        &::before {
          position: absolute;
          inline-size: 200px;
          aspect-ratio: 1 / 1;
          content: '';
          border-color: var(--gold);
          border-style: solid;

          @media (width <=768px) {
            inline-size: calc((100 / 390) * 60 * 1vw);
          }
        }

        &[data-id='1']::before {
          inset-block-start: 0;
          inset-inline-start: 0;
          border-width: 2px 0 0 2px;
          border-radius: var(--radius) 0 0;
        }

        &[data-id='2']::before {
          inset-block-start: 0;
          inset-inline-end: 0;
          border-width: 2px 2px 0 0;
          border-radius: 0 var(--radius) 0 0;
        }

        &[data-id='3']::before {
          inset-block-end: 0;
          inset-inline-start: 0;
          border-width: 0 0 2px 2px;
          border-radius: 0 0 0 var(--radius);
        }

        &[data-id='4']::before {
          inset-block-end: 0;
          inset-inline-end: 0;
          border-width: 0 2px 2px 0;
          border-radius: 0 0 var(--radius);
        }
      }

      /* ==== hgroup ==== */
      hgroup {
        gap: 10px;

        @media (width <=768px) {
          gap: 0.5vw;
        }

        [lang='en'] {
          margin-block: calc((1em - 1lh) / 2);
          font-size: 30px;

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

        .title {
          margin-block: calc((1em - 1lh) / 2);
          font-size: 14px;

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

      img {
        display: block flow;
        align-self: end;
        margin-inline: auto;
        object-fit: contain;
        object-position: center bottom;

        @media (width > 768px) {
          min-block-size: 87px;
          translate: 0 -16px;
        }

        @media (width <=768px) {
          block-size: calc((100 / 390) * 45 * 1vw);
        }
      }
    }
  }
}