@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv {
    &::before {
      background-image: url('../img/company/mv.png');
    }
    @media (width <= 768px) {
      &::before {
        background-image: url('../img/company/mv_2x.png');
      }
    }
  }
  /* =====================
    代表挨拶
  ===================== */
  .message {
    padding-block: 101px 104px;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 80 * 1vw) calc((100 / 750) * 90 * 1vw);
    }

    .message_wrap {
      border: solid 4px #ffed00;
      padding-inline: 50px;
      padding-block: 33px 18px;
      display: block grid;
      grid-template-columns: max-content auto;
      align-items: center;
      column-gap: 60px;

      @media (width <= 768px) {
        grid-template-columns: auto;
        padding-inline: calc((100 / 750) * 38 * 1vw);
        padding-block: calc((100 / 750) * 35 * 1vw) calc((100 / 750) * 29 * 1vw);
        column-gap: 0;
      }

      .picture {
        display: block flow;
        flex-shrink: 0;
        grid-column: 1/2;
        grid-row: 1/4;

        @media (width <= 768px) {
          grid-column: 1/2;
          grid-row: 2/3;
          text-align: center;
          margin-block-start: calc((100 / 750) * 35 * 1vw);

          & img {
            width: calc((100 / 750) * 512 * 1vw);
          }
        }
      }

      .u-h2-title {
        grid-column: 2/3;
        grid-row: 1/2;

        @media (width <= 768px) {
          grid-column: 1/2;
          grid-row: 1/2;
        }
      }

      .description_wrap {
        grid-column: 2/3;
        grid-row: 2/3;
        margin-block-start: 9px;

        @media (width <= 768px) {
          grid-column: 1/2;
          grid-row: 3/4;
        }

        .description {
          margin-block-start: 30px;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 750) * 32 * 1vw);
          }
          & + .description {
            @media (width <= 768px) {
              margin-block-start: calc((100 / 750) * 48 * 1vw);
            }
          }
        }
      }

      .name-set {
        display: block flex;
        align-items: baseline;
        justify-content: flex-end;
        gap: 27px;
        margin-block-start: 25px;
        grid-column: 2/3;
        grid-row: 3/4;
        & dd {
          font-family: var(--yumin);
          font-size: 32px;
          font-weight: 600;
        }

        @media (width <= 768px) {
          grid-column: 1/2;
          grid-row: 4/5;
          margin-block-start: calc((100 / 750) * 18 * 1vw);
          gap: calc((100 / 750) * 27 * 1vw);

          & dd {
            font-size: calc((100 / 750) * 48 * 1vw);
          }
        }
      }
    }
  }

  /* =====================
    会社概要
  ===================== */
  .profile {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url('../../assets/img/_common/bg.png');
    inline-size: 100%;
    min-block-size: 1671px;
    background-color: #ffed00;
    padding-block: 90px;

    @media (width <= 768px) {
      background-image: url('../../assets/img/_common/bg_2x.png');
      min-block-size: calc((100 / 750) * 2698 * 1vw);
      padding-block: calc((100 / 750) * 90 * 1vw);
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }
    .u-inner {
      background-color: #fff;
      padding-block: 60px;
      padding-inline: 80px;

      @media (width <= 768px) {
        padding-block: calc((100 / 750) * 39 * 1vw) calc((100 / 750) * 61 * 1vw);
        padding-inline: calc((100 / 750) * 40 * 1vw);
      }

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

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

        & dd {
          @media (width <= 768px) {
            .sp {
              margin-block-start: calc((100 / 750) * 50 * 1vw);
              .u-hover {
                &::after {
                  display: none;
                }
              }
            }
          }
          .sub {
            display: block flex;
            & > dt {
              flex-shrink: 0;
              inline-size: 128px;
              padding-inline: 0;
              padding-block: 0;
              font-weight: normal;
              border-block-start: unset;
            }
            & > dd {
              padding-block: 0;
              padding-inline: 0;
              border-block-start: unset;
              .u-hover {
                &::after {
                  display: none;
                }
              }
            }
            &[data-id='1'] {
              margin-block-start: 29px;
            }

            @media (width <= 768px) {
              display: none;
            }
          }
          .address_wrap {
            display: block flex;
            align-items: center;
            gap: 49px;
            margin-block-start: calc((100 / 750) * 10 * 1vw);

            @media (width <= 768px) {
              display: block flow;
              margin-block-start: 0;

              & picture {
                display: block flow;
                margin-block-start: calc((100 / 750) * 21 * 1vw);
                & img {
                  width: calc((100 / 750) * 400 * 1vw);
                }
              }
            }

            .address {
              & span {
                font-weight: bold;
              }
            }
            &[data-id='2'] {
              margin-block: 40px 16px;

              @media (width <= 768px) {
                margin-block: calc((100 / 750) * 30 * 1vw) 0;
              }
            }
          }
          .wrap {
            & span {
              font-weight: bold;
            }
            &[data-id='2'] {
              margin-block-start: 32px;

              @media (width <= 768px) {
                margin-block-start: calc((100 / 750) * 48 * 1vw);
              }
            }
          }
        }
        .tr[data='address'] {
          & > dt {
            place-content: unset;
            padding-block-start: 124px;

            @media (width <= 768px) {
              place-content: start;
              padding-block-start: calc((100 / 750) * 28.6 * 1vw);
            }
          }
        }
      }
    }
  }

  /* =====================
    アクセスマップ
  ===================== */
  .access {
    padding-block: 102px;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 105 * 1vw) calc((100 / 750) * 131 * 1vw);
    }
    & section {
      margin-block-start: 80px;

      @media (width <= 768px) {
        margin-block-start: calc((100 / 750) * 80 * 1vw);
      }
      .address {
        display: block flex;
        justify-content: space-between;
        align-items: center;
        margin-block-start: 28px;

        @media (width <= 768px) {
          display: block flow;
          margin-block-start: calc((100 / 750) * 26 * 1vw);
        }
        .unit {
          & h4 {
            font-size: 20px;
            font-weight: bold;

            @media (width <= 768px) {
              font-size: calc((100 / 750) * 32 * 1vw);
            }
          }
          & address {
            margin-block-start: 8px;

            @media (width <= 768px) {
              margin-block-start: calc((100 / 750) * 3 * 1vw);
            }
          }
        }
        .u-anchor {
          @media (width <= 768px) {
            margin-block-start: calc((100 / 750) * 41 * 1vw);
          }
        }
      }
      & iframe {
        @media (width <= 768px) {
          inline-size: 100%;
          block-size: calc((100 / 750) * 430 * 1vw);
        }
      }
    }
  }

  /* =====================
    沿革
  ===================== */
  .history {
    padding-block: 90px;
    background-color: #fffde3;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 90 * 1vw) calc((100 / 750) * 90 * 1vw);
      padding-inline: calc((100 / 750) * 40 * 1vw);
    }

    .u-inner {
      background-color: #fff;
      padding-block: 60px;
      padding-inline: 80px;

      @media (width <= 768px) {
        padding-block: calc((100 / 750) * 39 * 1vw) calc((100 / 750) * 63 * 1vw);
        padding-inline: calc((100 / 750) * 40 * 1vw);
      }

      .u-h2-title {
        @media (width <= 768px) {
          & > span[lang='en'] {
            color: #999;
          }
        }
      }

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

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

          .tr {
            & dt {
              text-align: right;
              place-content: start center;
              padding-inline: 0 calc((100 / 750) * 52 * 1vw);
            }
            & dd {
              place-content: center start;
            }
          }
        }
      }
    }
  }
  /* =====================
    グループ会社
  ===================== */
  .group {
    padding-block: 129px 64px;

    @media (width <= 768px) {
      padding-block: calc((100 / 750) * 149 * 1vw) calc((100 / 750) * 78 * 1vw);
    }
    .inner {
      inline-size: 1140px;
      margin-inline: auto;

      @media (width <= 768px) {
        inline-size: 100%;
        padding-inline: calc((100 / 750) * 40 * 1vw);
      }
      .u-h2-title {
        position: relative;

        &::before {
          content: '';
          background-repeat: no-repeat;
          background-size: contain;
          background-position: center;
          background-image: url('../img/company/group.jpg');
          inline-size: 152px;
          block-size: 179px;
          position: absolute;
          top: -72px;
          left: -128px;
          z-index: -1;
          pointer-events: none;
        }

        @media (width <= 768px) {
          &::before {
            inline-size: calc((100 / 750) * 152 * 1vw);
            block-size: calc((100 / 750) * 179 * 1vw);
            top: calc((100 / 750) * -57 * 1vw);
            left: calc((100 / 750) * -129 * 1vw);
          }
        }
      }
      & section {
        border-block-start: solid 2px #d9d9d9;
        display: block grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 26px;
        row-gap: 24px;
        padding-block: 40px 38px;
        @media (width > 768px) {
          &:has(> .unit:nth-child(-n + 1):last-child) {
            grid-template-columns: auto;
          }
        }

        @media (width <= 768px) {
          grid-template-columns: 1fr;
          row-gap: calc((100 / 750) * 32 * 1vw);
          padding-block: calc((100 / 750) * 74 * 1vw) calc((100 / 750) * 63 * 1vw);
        }

        .unit {
          .title {
            font-size: 24px;
            font-weight: bold;
            padding-inline: 16px;
            border-inline-start: solid 2px #999;

            @media (width <= 768px) {
              border-inline-start: solid calc((100 / 750) * 4 * 1vw) #999;
              font-size: calc((100 / 750) * 32 * 1vw);
              padding-inline: calc((100 / 750) * 12 * 1vw) 0;
              line-height: 1.2;
            }
          }
          & ul {
            margin-block-start: 8px;

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

            & li {
              position: relative;
              letter-spacing: -0.8px;
              display: block flex;

              &::before {
                content: '';
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius: 50rem;
                background-color: #d9d9d9;
                margin-inline: 6px;
                margin-block-start: 10px;
                flex-shrink: 0;
              }

              @media (width <= 768px) {
                letter-spacing: calc((100 / 750) * -1.3 * 1vw);

                &::before {
                  width: calc((100 / 750) * 16 * 1vw);
                  height: calc((160 / 750) * 10 * 1vw);
                  margin-inline: calc((100 / 750) * 8 * 1vw);
                  margin-block-start: calc((100 / 750) * 16 * 1vw);
                }
              }
              & address {
                display: inline-block;
                letter-spacing: -0.16px;

                @media (width <= 768px) {
                  letter-spacing: calc((100 / 750) * -0.26 * 1vw);
                }
              }
              & + li {
                margin-block-start: 8px;

                @media (width <= 768px) {
                  margin-block-start: 0;
                }
              }
            }
          }
          .u-anchor {
            margin-block-start: 16px;

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

              .btn-txt {
                padding-inline: calc((100 / 750) * 85 * 1vw);
              }
            }
          }
        }
        &[data-id='1'] {
          margin-block-start: 38px;
          border-block-start: unset;

          @media (width <= 768px) {
            margin-block-start: calc((100 / 750) * 12 * 1vw);
            .unit:first-of-type {
              .u-anchor {
                margin-block-end: calc((100 / 750) * 10 * 1vw);
              }
            }
          }
        }

        &[data-id='2'] {
          @media (width <= 768px) {
            row-gap: calc((100 / 750) * 41 * 1vw);
          }
        }

        &[data-id='3'] {
          @media (width <= 768px) {
            row-gap: calc((100 / 750) * 50 * 1vw);
            .unit[data-id='1'] {
              & ul {
                margin-block-start: calc((100 / 750) * 17 * 1vw);
                & li + li {
                  margin-block-start: calc((100 / 750) * 8 * 1vw);
                }
              }
            }
            .unit[data-id='3'],
            .unit[data-id='4'] {
              & ul {
                margin-block-start: calc((100 / 750) * 25 * 1vw);
                & li + li {
                  margin-block-start: calc((100 / 750) * 17 * 1vw);
                }
              }
            }
          }
        }
        &[data-id='5'] {
          & h2 {
            font-size: 24px;
            font-weight: bold;
            color: #999;
            grid-column: 1/3;

            @media (width <= 768px) {
              font-size: calc((100 / 750) * 36 * 1vw);
              grid-column: 1/2;
            }
          }

          @media (width <= 768px) {
            padding-block: calc((100 / 750) * 62 * 1vw) calc((100 / 750) * 50 * 1vw);
            row-gap: calc((100 / 750) * 29 * 1vw);
            .unit {
              .u-anchor {
                margin-block-start: calc((100 / 750) * 35 * 1vw);
              }
              &[data-id='2'] {
                margin-block-start: calc((100 / 750) * 13 * 1vw);
              }
            }
          }
        }
      }
    }
  }
}