/* 
─────────────────────────────────────────────────────────────────
Ｓ：メインビジュアル
───────────────────────────────────────────────────────────────── */
.main_visual {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: url("../../img/visual_company.webp") no-repeat center center;
  background-size: cover;
}

.main_visual::after {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
  content: "";
  background: hsl(240deg 100% 31% / 60%);
}

.main_visual_frame {
  position: relative;
  z-index: 3;
  max-width: 648px;
  margin: 0 auto;
}

.main_visual_contents {
  max-width: 600px;
  aspect-ratio: 2 / 1;
  margin: 0 24px;
}

/* 
───────────────────────────────────────────────────────────────── */
.main_visual_catch {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* 
───────────────────────────────────────────────────────────────── */
.main_visual_copy {
  color: #fff;
}

.main_visual_copy_title {
  text-align: center;
}

.main_visual_copy_title_sub {
  display: block;
  font-size: clamp(20px, calc(20px + (28 - 20) * ((100vw - 888px) / (1248 - 888))), 28px);
}

.main_visual_copy_title_main {
  display: block;
  font-size: clamp(32px, calc(32px + (48 - 32) * ((100vw - 888px) / (1248 - 888))), 48px);
}

.main_visual_copy_description {
  display: none;
}

/* 
─────────────────────────────────────────────────────────────────
横幅800px～
───────────────────────────────────────────────────────────────── */
@media screen and (width >= 888px) {
  /* 
  ─────────────────────────────────────────────────────────────────
  Ｌ：メインビジュアル
  ───────────────────────────────────────────────────────────────── */
  .main_visual {
    width: 100%;
  }

  .main_visual_frame {
    max-width: 1248px;
  }

  .main_visual_contents {
    max-width: 1200px;
    aspect-ratio: 4 / 1;
  }

  /* 
  ───────────────────────────────────────────────────────────────── */
  .main_visual_copy_description {
    display: block;
    margin: 2% 0 0;
  }

  /*
  ─────────────────────────────────────────────────────────────────
  ここまで
  ───────────────────────────────────────────────────────────────── */
}