@charset "UTF-8";
/*
  /rakurakucloud/gwtg/asset/css/object/module/m-fv.css
  ファーストビュー（キャッチコピー・メイン画像・タブナビ）
*/
.m-fv {
  /* padding: 40px 0 80px; */
  @media screen and (max-width: 840px) {
    padding: 0;
  }
}
.m-fv__inner {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding: 0 20px;
}
.m-fv__logo {
  display: block;
  width: 200px;
  margin:32px auto 64px 120px;
  @media screen and (max-width: 840px) {
    width: 130px;
    margin: 20px auto 48px 20px;
   
  }
}
.m-fv__catch {
  font-size: 40px;
  font-weight: 700;
  text-align: center;
  color: var(--black);
  max-width: 800px;
  @media screen and (max-width: 840px) {
    font-size: 24px;
    text-align: left;
  }
}
.m-fv__image-wrap {
  position: relative;
  margin: 64px 0 0;
  border-radius: 12px;
  box-shadow: var(--shadow-rcloud);
  overflow: hidden;
  @media screen and (max-width: 840px) {
    margin: 40px 0 0;
    border-radius: 8px;
  }
}
.m-fv__image {
  display: block;
  width: 100%;
  height: auto;
}
.m-fv__overlay {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 3;
  background-color: rgba(255, 255, 255, 0.4);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.m-fv__overlay--exec {
  left: 0;
}
.m-fv__overlay--field {
  right: 0;
}
/* アクティブ側のオーバーレイは消す（is-activeが付いた側＝クリア表示） */
.m-fv__overlay.is-active {
  opacity: 0;
}
/* ホバープレビュー中のオーバーレイも消す（JSがis-previewを付与） */
.m-fv__overlay.is-preview {
  opacity: 0;
}

/* 左右のホバー／クリック検知エリア（画像上に重ねる透明リンク） */
.m-fv__hover-area {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 2;
  cursor: pointer;
}
.m-fv__hover-area--exec {
  left: 0;
}
.m-fv__hover-area--field {
  right: 0;
}
/* ホバープレビュー：exec側にホバー → exec側オーバーレイを消す */
.m-fv__hover-area--exec:hover ~ .m-fv__overlay--exec {
  opacity: 0;
}
/* ホバープレビュー：field側にホバー → field側オーバーレイを消す */
.m-fv__hover-area--field:hover ~ .m-fv__overlay--field {
  opacity: 0;
}
.m-fv__tab-nav {
  display: flex;
  justify-content: center;
  gap: 120px;
  margin: 28px 0 0;
  @media screen and (max-width: 840px) {
    align-items: flex-start;
    gap: 64px;
    margin: 24px 0 0;
  }
  @media screen and (max-width: 600px) {
    gap: 22px;
  }
}