@charset "UTF-8";

.main {
  /* =====================
    MV
  ===================== */
  .u-mv-recruit {
    background-image: url('../../img/recruit/culture/mv.png');
  }

  /* =====================
    welfare
  ===================== */
  .welfare {
    position: relative;
    padding-block: 120px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: cover;
    background-image: url('../../img/recruit/culture/welfare_bg.png');

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

    &::before {
      content: '';
      position: absolute;
      background-repeat: repeat-x;
      background-size: contain;
      background-position: bottom center;
      background-image: url('../../img/recruit/culture/welfare_dot.png');
      inline-size: 100%;
      min-block-size: 1133px;
      bottom: 0;
      left: 0;
    }

    @media only screen and (width <= 768px) {
      &::before {
        min-block-size: unset;
      }
    }

    .u-inner {
      .wrap {
        margin-inline: 50px;

        @media only screen and (width <= 768px) {
          margin-inline: 0;
        }

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

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

          .item {
            position: relative;
            border-radius: 20px;
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.9);
            display: block grid;
            grid-template-columns: 118px 288px 1fr;
            align-items: center;
            padding-inline: 80px;
            padding-block: 32px;

            @media only screen and (width <= 768px) {
              border-radius: calc((100 / 390) * 20 * 1vw);
              -webkit-backdrop-filter: blur(calc((100 / 390) * 10 * 1vw));
              backdrop-filter: blur(calc((100 / 390) * 10 * 1vw));
              grid-template-columns: max-content 1fr;
              align-items: center;
              padding-inline: calc((100 / 390) * 32 * 1vw);
              padding-block: calc((100 / 390) * 32 * 1vw);
              row-gap: calc((100 / 390) * 24 * 1vw);
            }

            .icon {
              inline-size: 118px;
              block-size: 118px;
              display: block grid;
              place-content: center;
              border-radius: 50rem;
              background: var(--gradation);

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

            .title {
              font-size: 20px;
              font-weight: 500;
              color: var(--primary);
              margin-inline-start: 67px;

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

            .description {
              @media only screen and (width <= 768px) {
                grid-area: 2/1/3/3;
              }
            }

            & + .item {
              margin-block-start: 16px;
            }
          }
        }
      }
    }
  }

  /* =====================
    Location
  ===================== */
  .location {
    position: relative;
    padding-block: 120px;

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

        @media only screen and (width <= 768px) {
          margin-inline: 0;
        }

        .unit {
          display: block flex;
          align-items: center;
          gap: 64px;

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

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

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

          .item {
            background-color: #f3ffff;
            border-radius: 20px;
            padding-inline: 80px;
            padding-block: 52px 56px;

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

            .address {
              h3.title {
                position: relative;
                font-size: 24px;
                font-weight: 500;
                color: var(--primary);
                display: block flex;
                align-items: center;
                gap: 14px;

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

                &::before {
                  content: '';
                  display: block;
                  background-repeat: no-repeat;
                  background-size: contain;
                  background-position: center;
                  background-image: url('../../img/_common/icon_pin.svg');
                  inline-size: 16px;
                  aspect-ratio: 14/21;
                  flex-shrink: 0;
                }

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

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

            & iframe {
              inline-size: 100%;
              block-size: 310px;
              margin-block-start: 24px;

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

            .img-list {
              display: block flex;
              gap: 10px;
              margin-block-start: 32px;

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

            & + .item {
              margin-block-start: 43px;

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