@charset "utf-8";

@media (max-width: 890px) {
  .menu_common {
    display: none;
  }
}

header .h_logo-group {
  .h_logo_link {
    .h_name {
      @media (max-width: 890px) {
        color: #15479E;
      }
    }
  }
}

.overflow_wrap {
  overflow-y: clip;
}
/* ↓↓↓ main_wrap ↓↓↓ */
.main_wrap {
  display: flex;
  align-items: center;
  flex-direction: column;
  width: calc(100vw - 230px);
  padding-block: 96px 120px;
  margin-left: auto;
  padding-right: 40px;
  padding-left: 20px;

  @media (max-width: 1024px) {
    padding-right: 30px;
    padding-left: 10px;
  }

  @media (max-width: 890px) {
    width: 100%;
    padding-inline: 16px;
  }

  @media (max-width: 768px) {
    width: 100%;
    padding: 80px 16px 96px
  }

  .container {
    position: relative;
    width: calc(869px + 48px * 2);
    max-width: 100%;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow02);
    transform: translateZ(0px);
    overflow: clip;
    padding: 56px 48px 136px;

    @media (max-width: 1024px) {
      width: 100%;
    }

    @media (max-width: 890px) {
      width: 100%;
      max-width: 730px;
      border-radius: 12px;
      padding: 56px 16px 77px;
      margin: 0 auto;
    }

    @media (max-width: 768px) {
      width: 100%;
      border-radius: 12px;
      padding: 32px 16px 77px;
      margin: 0 auto;
    }

    .en_deco {
      position: absolute;
      width: 100%;
      left: 0;

      @media (max-width: 768px) {
        gap: 8px;
      }

      &.top {
        top: max(-0.75rem, (var(--vw) * -12));

        @media (max-width: 768px) {
          top: -8px;
        }
      }

      &.bottom {
        bottom: max(-0.625rem, (var(--vw) * -10));

        @media (max-width: 768px) {
          bottom: -8px;
        }
      }

      .splide__list {
        display: flex;
        will-change: transform;
        transition-timing-function: linear;
        transform: translateZ(0);
      }

      .en {
        /* width: fit-content; */
        font-size: 80px;
        font-family: var(--lato);
        font-weight: 900;
        line-height: 1;
        letter-spacing: 0;
        color: rgba(243, 246, 255, .56);

        @media (max-width: 768px) {
          font-size: 48px;
        }
      }
    }

    .main_ttl {
      font-family: var(--shingoB);
      font-size: 40px;
      text-align: center;
      line-height: 1.25;

      @media (max-width: 768px) {
        font-size: 28px;
        line-height: 1.2857;
      }
    }

    .content_box {
      padding: 55px 48px 48px;
      margin-top: 40px;
      background-color: #F3F6FF;
      border-radius: 12px;

      @media (max-width: 768px) {
        padding: 39px 16px 24px;
        margin-top: 24px;
        border-radius: 16px;
      }

      .ttl_group {
        .en {
          width: fit-content;
          font-size: 12px;
          font-family: var(--lato);
          font-weight: 900;
          color: #003256;
          background-color: #9CCAFF;
          padding: 2px 8px;
          border-radius: 4px;
          margin: 0 auto;

          @media (max-width: 768px) {
            font-size: 12px;
            padding: 2px 8px;
            border-radius: 4px;
          }
        }

        .ttl {
          font-size: 32px;
          font-family: var(--shingoB);
          text-align: center;
          margin-top: 6px;

          @media (max-width: 768px) {
            font-size: 24px;
            margin-top: 15px;
            line-height: 1.3;
          }
        }
      }

      .list {
        margin-top: 48px;
        @media (max-width: 768px) {
          margin-top: 30px;
        }
        .item {
          position: relative;
          display: flex;
          align-items: center;
          gap: 9px 32px;
          padding-bottom: 32px;

          @media (max-width: 890px) {
            gap: 12px;
            align-items: flex-start;
            padding-bottom: 24px;
          }

          & + .item {
            padding-top: 32px;

            @media (max-width: 890px) {
              padding-top: 24px;
            }

            &::before {
              content: '';
              position: absolute;
              width: 100%;
              height: 3px;
              mask-image: url(/recruit/assets/img/fair-recruitment/dots.svg);
              mask-repeat: repeat-x;
              mask-position: left center;
              mask-size: contain;
              background-color: #62B0FC;
              top: 0;
              left: 0;

              @media (max-width: 768px) {
                height: 3px;
              }
            }
          }

          .num {
            position: relative;
            width: 52px;
            height: fit-content;
            aspect-ratio: 1/1;
            font-size: 20px;
            font-family: var(--lato);
            font-weight: 900;
            line-height: 1;
            letter-spacing: 0;
            border-radius: 4px;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            filter: drop-shadow(2px 3px 0px #D0E4FF);
            flex-shrink: 0;

            @media (max-width: 768px) {
              width: 32px;
              font-size: 18px;
            }
          }

          .conts_txt {
            flex: 1;
            font-size: 16px;
            font-weight: 400;
            line-height: 1.8571428571428572;
            letter-spacing: 0.05em;
            text-align: justify;
            word-break: break-all;

            @media (max-width: 768px) {
              font-size: 14px;
            }
          }
        }
      }

      .contact {
        margin-top: 30px;
        padding: 0px 48px 32px;
        background-color: #fff;
        border-radius: 12px;

        @media (max-width: 768px) {
          margin-top: 36px;
          padding: 0 16px 32px;
          border-radius: 12px;
        }

        .contact_head {
          width: fit-content;
          font-size: 20px;
          font-family: var(--shingoB);
          color: #003256;
          padding: 8px 64px 5px;
          background-color: #9CCAFF;
          margin: 0 auto;
          border-radius: 0 0 12px 12px;

          @media (max-width: 768px) {
            font-size: 16px;
            padding: 5px 40px;
            border-radius: 0 0 8px 8px;
          }
        }

        .contact_txt {
          font-size: 14px;
          letter-spacing: 0.05em;
          line-height: 2;
          text-align: center;
          margin-top: 36px;

          @media (max-width: 768px) {
            margin-top: 24px;
          }
        }

        .block {
          display: flex;
          gap: 64px;
          margin-top: 32px;

          @media (max-width: 1024px) {
            flex-direction: column;
            gap: 48px;
            margin-top: 23px;
          }

          .card {
            position: relative;
            width: 43.427%;
            @media (max-width: 1024px) {
              width: 100%;
            }
            &::after {
              content: '';
              position: absolute;
              top: 0;
              right: -10.205%;
              width: 3px;
              height: 100%;
              background: url(/recruit/assets/img/fair-recruitment/dots02.svg) repeat-y;
              @media (max-width: 1024px) {
                top: unset;
                bottom: -24px;
                right: 0;
                width: 100%;
                height: 3px;
                background: url(/recruit/assets/img/fair-recruitment/dots.svg) repeat-x;
              }
            }
            +.card {
              width: 46.974%;
              @media (max-width: 1024px) {
                width: 100%;
              }
              &::after {
                display: none;
              }
            }
            
            .flex {
              width: 100%;
              @media (max-width: 768px) {
                display: flex;
                align-items: center;
                max-width: 380px;
                margin: 0 auto;
              }
              .card_image {
                width: 140px;
                margin: 0 auto;
                @media (max-width: 768px) {
                  width: 100px;
                }
              }
              .txt_wrap {
                flex: 1;
                .card_txt01 {
                  line-height: 1;
                  font-size: 24px;
                  font-family: var(--shingoB);
                  letter-spacing: 0.05em;
                  text-align: center;

                  @media (max-width: 768px) {
                    font-size: 20px;
                  }
                }

                .card_txt02 {
                  font-size: 20px;
                  font-family: var(--shingoB);
                  letter-spacing: 0.05em;
                  margin-top: 5px;
                  text-align: center;
                  @media (max-width: 768px) {
                    font-size: 16px;
                    margin-top: 0;
                  }
                }
              }
            }
            .mail {
              position: relative;
              padding-left: 30px;
              margin: 4px auto 0;
              width: fit-content;
              @media (max-width: 768px) {
                padding-left: 22px;
              }
              .icon {
                position: absolute;
                display: block;
                top: 8px;
                left: 0;
                width: 20px;
                height: 13px;
                @media (max-width: 768px) {
                  top: 4px;
                  width: 16px;
                  height: 11px;
                }
                img {
                  display: block;
                  width: 100%;
                  height: 100%;
                }
              }
              .mail_txt {
                width: fit-content;
                word-break: break-all;
                font-size: 14px;
                letter-spacing: 0.03em;
                @media (max-width: 768px) {
                  flex: unset;
                  font-size: 12px;
                  line-height: 1.4;
                }
              }
            }
          }
        }
        .contact_read_wrap {
          position: relative;
          width: fit-content;
          padding: 12px 32px 12px 66px;
          background-color: #F3F6FF;
          border-radius: 12px;
          margin: 40px auto 0;
          @media (max-width: 768px) {
            padding: 10px 24px 10px 46px;
            border-radius: 12px;
            margin: 28px auto 0;
          }
          .icon {
            position: absolute;
            translate: 0 -50%;
            top: 50%;
            left: 29px;
            display: block;
            width: 24px;
            height: 24px;
            @media (max-width: 768px) {
              left: 12px;
            }
            img {
              display: block;
              width: 100%;
              height: 100%;
            }
          }
          .contact_read {
            font-size: 18px;
            font-family: var(--shingoB);
            color: #0062A1;
            line-height: 1.4;
            text-align: center;
            @media (max-width: 768px) {
              width: fit-content;
              font-size: 16px;
              line-height: 1.5;
            }
          }
        }
      }
    }
  }
}

footer {
  margin-top: 0;
}

.menu_common {
  &::before {
    height: 150%;
  }
  &::after {
    display: none;
  }
}

/* ↑↑↑ main_wrap ↑↑↑ */