@charset "UTF-8";
.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    background-image: url('../img/company/mv.png');
  }

  /* =====================
    message
  ===================== */
  .message {
    position: relative;
    padding-block-start: 92px;
    padding-block-end: 93px;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 64 * 1vw);
      padding-block-end: calc((100 / 390) * 64 * 1vw);
    }

    .u-inner {
      padding-inline: 38px 47px;

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

      .u-h2-title {
        margin-inline-start: 10px;

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

      .wrap {
        display: block flex;
        justify-content: space-between;
        gap: 57px;
        margin-block-start: 56px;

        @media (width <= 768px) {
          flex-direction: column;
          gap: calc((100 / 390) * 16 * 1vw);
          margin-block-start: calc((100 / 390) * 32 * 1vw);
        }

        .message_img {
          display: block flow;
          flex-shrink: 0;
          border-radius: 10px;

          @media (width <= 768px) {
            margin-inline: auto;
            inline-size: 100%;
            border-radius: calc((100 / 390) * 10 * 1vw);
          }
        }
        .unit {
          .description {
            margin-block-start: 32px;

            @media (width <= 768px) {
              margin-block-start: 0;
            }
          }
          .name-set {
            margin-block-start: 14px;
            display: block flex;
            align-items: baseline;
            justify-content: flex-end;
            gap: 32px;

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

            & dd {
              font-size: 32px;
              font-family: var(--name);
              font-weight: bold;

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

  /* =====================
    policy
  ===================== */
  .policy {
    position: relative;
    padding-block-start: 112px;
    padding-block-end: 112px;
    background-repeat: no-repeat;
    background-size: 300px auto;
    background-position: right center;
    background-image: url('../img/company/policy_bg.png');

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 64 * 1vw);
      padding-block-end: calc((100 / 390) * 64 * 1vw);
      background-image: unset;
    }

    .u-inner {
      padding-inline: 40px 480px;

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

      .wrap {
        & h3.title {
          position: relative;
          font-family: var(--serif);
          font-size: 20px;
          font-weight: 500;
          padding-block-end: 7px;

          @media (width <= 768px) {
            font-size: calc((100 / 390) * 18 * 1vw);
            padding-block-end: calc((100 / 390) * 8 * 1vw);
          }

          &::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            inline-size: 100%;
            block-size: 1px;
            background: linear-gradient(180deg, #1990bc 0%, #4ae296 100%);
          }
        }

        &[data-id='1'] {
          margin-block-start: 66px;

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

          .p_wrap {
            margin-block-start: 40px;
            padding-inline-end: 40px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 390) * 16 * 1vw);
              padding-inline-end: 0;
            }

            .description {
              font-family: var(--serif);
              font-size: 18px;
              font-weight: 500;

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

              + .description {
                margin-block-start: 23px;

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

        &[data-id='2'] {
          margin-block-start: 64px;

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

          .list {
            margin-block-start: 40px;

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

            .item_unit {
              & h4.title {
                color: var(--primary);
                border-block-end: 1px solid #e0e0e0;
                padding-inline-start: 16px;
                padding-block-end: 8px;

                @media (width <= 768px) {
                  padding-inline-start: 0;
                  padding-block-end: calc((100 / 390) * 4 * 1vw);
                }
              }

              .item-list {
                margin-block-start: 8px;
                margin-inline-start: 16px;

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

                .item {
                  & h5 {
                    position: relative;
                    display: block flex;
                    align-items: center;
                    gap: 8px;

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

                    &::before {
                      content: '';
                      inline-size: 8px;
                      block-size: 8px;
                      background: linear-gradient(180deg, #1990bc 0%, #4ae296 100%);
                      border-radius: 50rem;
                    }

                    @media (width <= 768px) {
                      &::before {
                        inline-size: calc((100 / 390) * 6 * 1vw);
                        block-size: calc((100 / 390) * 6 * 1vw);
                      }
                    }
                  }
                  & + .item {
                    margin-block-start: 8px;
                  }
                }
              }
              & + .item_unit {
                margin-block-start: 24px;

                .item {
                  .description {
                    color: #575757;
                    margin-inline-start: 16px;
                  }
                }
              }

              &[data-id='1'] {
                .item-list {
                  display: block flex;
                  gap: 40px;

                  @media (width <= 768px) {
                    flex-wrap: wrap;
                    gap: 0 calc((100 / 390) * 16 * 1vw);
                  }

                  .item + .item {
                    margin-block-start: 0;
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  /* =====================
    Outline
  ===================== */
  .outline {
    padding-block-start: 113px;
    padding-block-end: 112px;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 64 * 1vw);
      padding-block-end: calc((100 / 390) * 64 * 1vw);
    }

    .u-inner {
      padding-inline: 40px;

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

      .outline_wrap {
        background-color: #fff;
        padding-block-start: 80px;
        padding-block-end: 80px;

        @media (width <= 768px) {
          padding-inline: calc((100 / 390) * 16 * 1vw);
          padding-block-start: calc((100 / 390) * 48 * 1vw);
          padding-block-end: calc((100 / 390) * 48 * 1vw);
        }

        .u-table {
          margin-block-start: 63px;

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

  /* =====================
    History
  ===================== */
  .history {
    padding-block-start: 112px;
    padding-block-end: 112px;

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 64 * 1vw);
      padding-block-end: calc((100 / 390) * 64 * 1vw);
    }

    .u-inner {
      padding-inline: 40px;

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

      .history_wrap {
        padding-block-start: 80px;
        padding-block-end: 80px;

        @media (width <= 768px) {
          padding-inline: calc((100 / 390) * 16 * 1vw);
          padding-block-start: calc((100 / 390) * 48 * 1vw);
          padding-block-end: calc((100 / 390) * 48 * 1vw);
        }

        .u-table {
          margin-block-start: 63px;

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

  /* =====================
    access
  ===================== */
  .access {
    position: relative;
    padding-block-start: 104px;
    padding-block-end: 104px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../img/company/access_bg.png');

    @media (width <= 768px) {
      padding-block-start: calc((100 / 390) * 64 * 1vw);
      padding-block-end: calc((100 / 390) * 64 * 1vw);
    }
    .inner {
      inline-size: 1440px;
      margin-inline: auto;
      display: block grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: repeat(3, max-content);
      align-items: start;
      gap: 0px 100px;

      @media (width <= 768px) {
        inline-size: 100%;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, max-content);
        gap: 0;
        padding-inline: calc((100 / 390) * 16 * 1vw);
      }

      & iframe {
        grid-area: 1/1/4/2;
        inline-size: 980px;
        block-size: 370px;

        @media (width <= 768px) {
          grid-area: 2/1/3/2;
          inline-size: 100%;
          block-size: calc((100 / 390) * 280 * 1vw);
          margin-block-start: calc((100 / 390) * 24 * 1vw);
        }
      }

      .u-h2-title {
        grid-area: 1/2/2/3;
        justify-content: start;
        margin-inline: 0;
        margin-block-start: 18px;

        @media (width <= 768px) {
          grid-area: 1/1/2/2;
          margin-block-start: 0;
        }
      }

      & address {
        grid-area: 2/2/3/3;

        @media (width <= 768px) {
          grid-area: 3/1/4/2;
          margin-block-start: calc((100 / 390) * 16 * 1vw);
        }
      }
      .u-anchor {
        grid-area: 3/2/4/3;

        @media (width <= 768px) {
          margin-inline: auto;
          grid-area: 4/1/5/2;
          margin-block-start: calc((100 / 390) * 16 * 1vw);
        }
      }
    }
  }
}