/*
 * HERO redesign 2026-08-15
 * 支給のタブレット一体型画像を背景として使用し、旧HTMLタブレットと実績丸を外す。
 */
.fv4ref-stage {
  background: linear-gradient(105deg, #0E3D72 0%, #1658A0 76%, #1E8FC9 150%);
}

.fv4ref-main {
  height: 620px;
  overflow: hidden;
  background-color: #fff;
  background-image:
    linear-gradient(90deg,
      #fff 0%,
      rgba(255,255,255,1) 33%,
      rgba(255,255,255,.96) 36%,
      rgba(255,255,255,.5) 41%,
      rgba(255,255,255,.08) 46%,
      rgba(255,255,255,0) 52%),
    url("hero-bg-tablet-light-20260815.png");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, calc(100% - 120px) center;
  background-size: 100% 100%, auto 620px;
  box-shadow: inset 0 -22px 30px -26px rgba(22,88,160,.42);
}

/* 旧斜め紺背景と重複する前景端末を撤去する。 */
.fv4ref-navy,
.fv4ref-tablet {
  display: none !important;
}

/* 添付例のように、実績サークルをタブレット下辺へ横一列で重ねる。 */
.fv4ref-badges {
  left: calc(var(--fv4-body-right) - 504px);
  top: 442px;
  z-index: 7;
  display: flex !important;
  gap: 18px;
}
.fv4ref-badge {
  width: 156px;
  height: 156px;
  border: 2px solid transparent;
  padding: 14px;
  background:
    radial-gradient(circle at 48% 38%, rgba(255,255,255,.99) 0%, rgba(255,255,255,.94) 70%, rgba(236,247,253,.96) 100%) padding-box,
    linear-gradient(145deg, rgba(255,255,255,.95), var(--brand-accent), var(--brand-primary), rgba(255,255,255,.98)) border-box;
  box-shadow: 0 12px 25px -13px rgba(22,88,160,.58), 0 0 0 1px rgba(30,143,201,.16);
}
.fv4ref-badge .t1 {
  font-size: 14px;
  color: var(--brand-primary-deep);
}
.fv4ref-badge .t2 {
  margin-top: 4px;
  font-size: 49px;
  color: var(--brand-primary-deep);
}
.fv4ref-badge .t2 small {
  font-size: 18px;
}
.fv4ref-badge .t3 {
  font-size: 13px;
  color: var(--brand-primary-deep);
}
.fv4ref-badge:nth-child(2) .t2 {
  font-size: 45px;
}
.fv4ref-badge.is-subsidy .t1 {
  font-size: 12.5px;
}
.fv4ref-badge.is-subsidy img {
  width: 68px;
  margin-top: 5px;
}

/* 左側をひとつの読みやすい情報カラムとして再構成。 */
.fv4ref-industry-nav {
  left: var(--fv4-body-left);
  top: 30px;
  width: 552px;
  padding: 0 10px;
  border-radius: 4px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(4px);
}
.fv4ref-industry-nav::after {
  bottom: -20px;
  width: 575px;
  height: 3px;
}

.fv4ref-copy {
  left: var(--fv4-body-left);
  top: 0;
  width: 560px;
  height: 348px;
}
.fv4ref-lead {
  left: 0;
  top: 142px;
  font-size: 38px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: .06em;
}
.fv4ref-copy h1 {
  left: 0;
  top: 204px;
  align-items: baseline;
  letter-spacing: -.025em;
}
.fv4ref-copy h1 span {
  font-size: 94px;
  font-weight: 800;
}
.fv4ref-copy h1 small {
  margin-left: 7px;
  font-size: 46px;
  font-weight: 700;
}
.fv4ref-copy-line {
  left: -2px;
  top: 322px;
  width: 500px;
  height: 3px;
}

.fv4ref-product {
  left: var(--fv4-body-left);
  top: 0;
  width: 440px;
  height: 620px;
}
.fv4ref-product-sub {
  left: 0;
  top: 366px;
  width: 440px;
  height: 58px;
}
.fv4ref-product-row {
  left: 0;
  top: 446px;
  width: 440px;
  padding: 0 16px 0 22px;
}
.fv4ref-product-logo {
  width: 285px;
}
.fv4ref-product-ruby {
  margin-bottom: 6px;
  font-size: 10px;
}

/* 背景画像の光と本文の境界を自然につなぐ。 */
.fv4ref-main::after {
  content: "";
  position: absolute;
  left: var(--fv4-body-left);
  bottom: 0;
  z-index: 2;
  width: 510px;
  height: 92px;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,0), rgba(255,255,255,.92));
}
.fv4ref-industry-nav,
.fv4ref-copy,
.fv4ref-product {
  z-index: 4;
}

/* 下部の既存コンテンツは維持し、白背景からブランド面へ切り替える。 */
.fv4ref-logo-card.logo-slider-sec {
  top: 620px;
}
.fv4ref-functions {
  top: 816px;
}

@media (max-width: 1450px) {
  .fv4ref-main {
    background-position: 0 0, calc(100% - 155px) center;
  }
}