@charset "UTF-8";

#mainvisual.top-variant-b {
  position: relative;
  height: 650px !important;
}

#mainvisual.top-variant-b .site_wrap {
  position: relative;
  z-index: 2;
  width: min(1170px, 100%);
  height: 100%;
  margin: 0 auto;
}

#mainvisual.top-variant-b .tt_mv {
  position: relative;
  width: 100%;
  height: calc(100% - 145px);
}

#mainvisual.top-variant-b .tt_mv > div {
  height: 100%;
}

#mainvisual.top-variant-b .tt_mv h2 {
  text-shadow: 1px 1px 5px rgba(0, 0, 0, .75);
}

#mainvisual.top-variant-b .top-variant-b__actions {
  position: absolute;
  z-index: 3;
  right: 30px;
  bottom: 30px;
  left: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
}

#mainvisual.top-variant-b .top-variant-b__actions a {
  display: block;
  width: calc(50% - 11px);
  max-width: 535px;
  aspect-ratio: 6.6 / 1;
  overflow: hidden;
  transition: opacity .2s ease;
}

#mainvisual.top-variant-b .top-variant-b__actions a:hover {
  opacity: .85;
}

#mainvisual.top-variant-b .top-variant-b__actions img {
  display: block;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  margin: -3px;
}

@media print, screen and (min-width: 768px) {
  #mainvisual.top-variant-b .tt_mv h2 {
    margin-top: 12%;
  }

  #mainvisual.top-variant-b .tt_mv h2.h1_mv2,
  #mainvisual.top-variant-b .tt_mv h2.h1_mv3,
  #mainvisual.top-variant-b .tt_mv h2.h1_mv4 {
    margin-left: 30px;
  }

  #mainvisual.top-variant-b .tt_mv h2.h1_mv5,
  #mainvisual.top-variant-b .tt_mv h2.h1_mv6 {
    max-width: 650px;
    margin-top: 12%;
    margin-right: 30px;
  }

  #mainvisual.top-variant-b .tt_mv h2 span {
    font-size: clamp(58px, 5vw, 76px);
  }

  #mainvisual.top-variant-b .tt_mv h2.h1_mv5 img,
  #mainvisual.top-variant-b .tt_mv h2.h1_mv6 img {
    float: none;
    width: 65%;
    height: auto;
    margin-top: 2%;
  }
}

@media only screen and (max-width: 767px) {
  #mainvisual.top-variant-b {
    height: 134vw !important;
    max-height: 760px;
  }

  #mainvisual.top-variant-b .tt_mv {
    height: calc(100% - 38vw);
  }

  #mainvisual.top-variant-b .tt_mv > div {
    top: 0;
    bottom: auto;
  }

  #mainvisual.top-variant-b .tt_mv h2.h1_mv6 span.mv_mb {
    position: relative;
    top: 27vw;
  }

  #mainvisual.top-variant-b .top-variant-b__actions {
    right: 5vw;
    bottom: 6vw;
    left: 5vw;
    display: block;
  }

  #mainvisual.top-variant-b .top-variant-b__actions a {
    width: 100%;
    max-width: none;
  }

  #mainvisual.top-variant-b .top-variant-b__actions a + a {
    margin-top: 3vw;
  }
}