/*
 * MAIN hero / fully fixed desktop canvas + abrupt mobile switch (2026-08-16)
 *
 * 768px以上:
 * - 1920pxステージを常に実寸表示し、一切縮小しない。
 * - viewportが狭い場合は、中央を基準に左右をクロップする。
 * 768px以下:
 * - 同じDOMをモバイル専用の縦レイアウトへ一括で切り替える。
 */

/* 4機能帯もFVと同じ支給画像・同じコバルト系トーンへ統一する。 */
.fv4ref-functions {
  background-color: #0b4f9f;
  background-image:
    linear-gradient(98deg,
      rgba(4, 61, 146, .78) 0%,
      rgba(5, 85, 184, .58) 44%,
      rgba(8, 91, 196, .38) 72%,
      rgba(4, 43, 111, .54) 100%),
    url("hero-background-flow-supplied-20260817.png");
  background-image:
    linear-gradient(98deg,
      rgba(4, 61, 146, .78) 0%,
      rgba(5, 85, 184, .58) 44%,
      rgba(8, 91, 196, .38) 72%,
      rgba(4, 43, 111, .54) 100%),
    image-set(
      url("hero-background-flow-supplied-20260817-q90.webp") type("image/webp"),
      url("hero-background-flow-supplied-20260817.png") type("image/png")
    );
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, center bottom;
  background-size: 100% 100%, 1920px auto;
}

.fv4ref-layout-guides.is-hidden {
  display: none;
}

@media (min-width: 769px) {
  .fv4ref,
  .fv4ref-stage {
    height: 945px;
  }

  /*
   * ヒーロー調整用ガイド（確認中のみ表示）
   * 赤: 中央1220pxコンテナの左右端
   * ピンク: コピー／タブレット上部の水平基準
   * シアン: 「解決できます。」の下端基準
   * 蛍光グリーン: 製品訴求／3実績バッジの下端基準
   */
  .fv4ref-layout-guides {
    --fv-guide-left: 350px;
    --fv-guide-right: 1570px;
    --fv-guide-upper: 61px;
    --fv-guide-headline-bottom: 367px;
    --fv-guide-badges: 584px;
    position: absolute;
    inset: 0;
    z-index: 80;
    pointer-events: none;
  }

  .fv4ref-guide {
    position: absolute;
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .fv4ref-guide-v {
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ff1744;
    box-shadow: 0 0 5px rgba(255, 23, 68, .95);
  }

  .fv4ref-guide-v.is-left { left: var(--fv-guide-left); }
  .fv4ref-guide-v.is-right { left: var(--fv-guide-right); }

  .fv4ref-guide-h {
    left: 0;
    width: 100%;
    height: 2px;
  }

  .fv4ref-guide-h.is-upper {
    top: var(--fv-guide-upper);
    background: #ff2bd6;
    box-shadow: 0 0 6px rgba(255, 43, 214, .95);
  }

  .fv4ref-guide-h.is-headline-bottom {
    top: var(--fv-guide-headline-bottom);
    background: #00e5ff;
    box-shadow: 0 0 7px rgba(0, 229, 255, 1);
  }

  .fv4ref-guide-h.is-badges {
    top: var(--fv-guide-badges);
    background: #7cff00;
    box-shadow: 0 0 7px rgba(124, 255, 0, 1);
  }

  /* 先方確認用に選定された白→青の支給背景を、比率を保って中央トリミングする。 */
  .fv4ref-main {
    height: 656px;
    background-color: #fff;
    background-image:
      url("hero-background-flow-supplied-20260817.png"),
      linear-gradient(112deg, #fff 0%, #f6fbff 44%, #bcd9f5 67%, #0b4f9f 100%);
    background-image:
      image-set(
        url("hero-background-flow-supplied-20260817-q90.webp") type("image/webp"),
        url("hero-background-flow-supplied-20260817.png") type("image/png")
      ),
      linear-gradient(112deg, #fff 0%, #f6fbff 44%, #bcd9f5 67%, #0b4f9f 100%);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }

  /* 支給背景内に白い曲面が含まれるため、旧切り抜きレイヤーは重ねない。 */
  .fv4ref-main::before {
    content: none;
    display: none;
    background: none;
  }

  /* 左の製品訴求と右の実績円を、緑ガイドの共通下端608pxへ揃える。 */
  .fv4ref-product {
    top: 52px;
  }

  /* コピーは迫力を保ちながら、タブレットとの間に呼吸をつくる。 */
  .fv4ref-lead {
    top: 141px;
    font-size: 47px;
    font-weight: 650;
    letter-spacing: .045em;
  }

  /*
   * 画像右側の透明余白をガイド外へ逃がし、
   * タブレット右上の見た目を1220pxガイドへ合わせる。
   * 下側のスタンドだけはガイドをわずかに越える構図を許容する。
   */
  .fv4ref-tablet {
    left: calc(var(--fv-guide-right-stage) - 650px);
    top: 61px;
    width: 690px;
  }

  /* 拡大・下移動した端末と同じ重なり量を保って追従させる。 */
  .fv4ref-badges {
    /* 円内の見出し／数値・ロゴ／補足を固定する本体レイアウト値。 */
    --badge-row-top: 52px;
    --badge-row-middle: 96px;
    --badge-row-bottom: 129px;
    left: calc(var(--fv-guide-right-stage) - 540px);
    top: 402px;
    gap: 24px;
  }

  .fv4ref-copy h1 {
    top: 218px;
    align-items: flex-end;
    letter-spacing: -.035em;
  }

  .fv4ref-copy h1 span {
    font-size: 152px;
    letter-spacing: -.06em;
    transform: translateY(-2px);
  }

  .fv4ref-copy h1 small {
    margin-bottom: 0;
    margin-left: 20px;
    font-size: 64px;
    letter-spacing: -.02em;
    transform: none;
  }

  .fv4ref-copy-line {
    /* 初期承認状態の高い位置へ戻し、「解決」の字面へ深く沿わせる。 */
    top: 345px;
    width: 402px;
    height: 31px;
  }

  /* 2pxの細線に残っていた旧マスクを外し、対応業種ナビの下線を復元。 */
  .fv4ref-industry-nav::after {
    opacity: .78;
    -webkit-mask-image: none;
    mask-image: none;
  }

  /* 右3円の上端402pxへ、左POS帯の上端を揃える。 */
  .fv4ref-product-sub {
    top: 350px;
    width: 404px;
    height: 50px;
    padding: 0 20px;
    gap: 8px;
    box-shadow: none;
  }

  .fv4ref-product-sub .jp {
    font-size: 22px;
  }

  .fv4ref-product-sub strong {
    font-size: 32px;
  }

  .fv4ref-product-row {
    /* 右3円の中心484pxへ、公式ロゴの上端を揃える。 */
    top: 432px;
    justify-content: flex-start;
    gap: 14px;
  }

  .fv4ref-product-logo {
    width: 245px;
  }

  .fv4ref-product-ruby {
    margin: 0 0 14px;
    font-size: 12px;
    letter-spacing: .16em;
  }

  .fv4ref-badge {
    display: block;
    width: 164px;
    height: 164px;
    padding: 13px;
  }

  /* 3つの円を「見出し／数値・ロゴ／補足」の共通3行で整列する。 */
  .fv4ref-badge > .t1,
  .fv4ref-badge > .t2,
  .fv4ref-badge > .t3 {
    position: absolute;
    margin: 0;
  }

  .fv4ref-badge > .t1 {
    top: calc(var(--badge-row-top) - 4px);
    z-index: 31;
    right: 10px;
    left: 10px;
    transform: translateY(-50%);
  }

  .fv4ref-badge > .t2 {
    top: calc(var(--badge-row-middle) + 1px);
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* 数値本体の中心を円の中心に合わせ、単位は右へ逃がす。 */
  .fv4ref-badge > .t2 small {
    position: absolute;
    bottom: 2px;
    left: calc(100% + 3px);
    margin: 0;
    white-space: nowrap;
  }

  .fv4ref-badge > .t3 {
    top: calc(var(--badge-row-bottom) - 4px);
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* 画像内の上半ロゴを中央線、下表記を下段線に合わせる。 */
  .fv4ref-badge.is-subsidy > img {
    position: absolute;
    top: 69px;
    left: 50%;
    width: 70px;
    margin: 0;
    transform: translateX(-50%);
  }

  .fv4ref-badge::after {
    width: 106px;
  }

  .fv4ref-badge .t1 {
    font-size: 15.5px;
    font-weight: 800;
    line-height: 1.16;
  }

  /* 数値実績の2円は、見出しを一段大きくして可読性を上げる。 */
  .fv4ref-badge:not(.is-subsidy) .t1 {
    font-size: 17px;
    line-height: 1.1;
  }

  .fv4ref-badge.is-subsidy .t1 {
    font-size: 15.5px;
    line-height: 1.16;
  }

  .fv4ref-badge .t2 {
    font-size: 49px;
  }

  .fv4ref-badge:nth-child(2) .t2 {
    font-size: 44px;
  }

  /* 4機能帯は背景のみ全幅、内容は赤い1220pxガイド内へ均等配置する。 */
  .fv4ref-functions-card {
    width: 1220px;
    margin: 0 auto;
    padding: 0;
  }

  .fv4ref-function {
    gap: 16px;
    padding: 0 20px;
  }

  .fv4ref-function-icon {
    flex-basis: 64px;
    width: 64px;
    height: 64px;
  }

  .fv4ref-function img,
  .fv4ref-function:nth-child(2) img,
  .fv4ref-function:nth-child(3) img {
    width: 60px;
    height: 60px;
  }

  .fv4ref-function:nth-child(4) img {
    width: 56px;
    height: 56px;
  }

  .fv4ref-function strong {
    font-size: 25px;
    letter-spacing: 0;
  }

  .fv4ref-logo-card.logo-slider-sec {
    top: 656px;
  }

  .fv4ref-functions {
    top: 820px;
  }
}

/* 既存の巨大英字がスマホ時にページ全体を横へ押し広げないようにする。 */
@media (max-width: 768px) {
  section[data-sec="10 CASE お客様の声"] {
    overflow: hidden;
  }

  section[data-sec="10 CASE お客様の声"] .eyebrow {
    max-width: 100%;
    font-size: clamp(52px, 13vw, 76px);
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .fv4ref-layout-guides {
    display: none;
  }

  .fv4ref {
    width: 100%;
    height: 1222px !important;
    min-height: 0;
    overflow: hidden;
    background: #071e49;
  }

  .fv4ref-stage {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    min-width: 0;
    height: 1222px;
    margin: 0;
    overflow: hidden;
    transform: none !important;
  }

  .fv4ref-main {
    position: absolute;
    inset: 0 0 auto;
    width: 100%;
    height: 812px;
    overflow: hidden;
    background-image:
      url("hero-background-flow-supplied-20260817.png"),
      linear-gradient(145deg, #fff 0%, #eaf4fd 48%, #7db7ee 72%, #0b4f9f 100%);
    background-image:
      image-set(
        url("hero-background-flow-supplied-20260817-q90.webp") type("image/webp"),
        url("hero-background-flow-supplied-20260817.png") type("image/png")
      ),
      linear-gradient(145deg, #fff 0%, #eaf4fd 48%, #7db7ee 72%, #0b4f9f 100%);
    background-position: 62% 80%;
    background-size: auto 812px;
  }

  .fv4ref-main::before {
    background:
      linear-gradient(
        180deg,
        #fff 0%,
        rgba(255,255,255,1) 38%,
        rgba(255,255,255,.92) 48%,
        rgba(255,255,255,.42) 58%,
        rgba(255,255,255,0) 70%
      );
  }

  .fv4ref-industry-nav {
    top: 16px;
    left: 16px;
    width: calc(100% - 32px);
    height: 78px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 0;
  }

  .fv4ref-industry-nav a,
  .fv4ref-industry-nav a:nth-child(n) {
    width: auto;
    height: 39px;
    padding: 0 5px;
    border-right: 0;
    font-size: 11px;
  }

  .fv4ref-industry-nav a:nth-child(2),
  .fv4ref-industry-nav a:nth-child(6) {
    font-size: 10px;
  }

  .fv4ref-industry-nav::after {
    left: 0;
    bottom: -5px;
    width: 100%;
  }

  .fv4ref-copy {
    top: 0;
    left: 20px;
    width: calc(100% - 40px);
    height: 265px;
  }

  .fv4ref-lead {
    top: 126px;
    font-size: clamp(22px, 6.4vw, 25px);
    letter-spacing: .035em;
  }

  .fv4ref-copy h1 {
    top: 164px;
    left: 0;
  }

  .fv4ref-copy h1 span {
    padding-bottom: 12px;
    margin-bottom: -12px;
    font-size: clamp(64px, 18.5vw, 72px);
  }

  .fv4ref-copy h1 small {
    margin: 0 0 5px 6px;
    font-size: clamp(29px, 8.7vw, 34px);
  }

  .fv4ref-copy-line {
    top: 239px;
    left: -8px;
    width: 290px;
    height: 23px;
  }

  .fv4ref-product {
    top: 0;
    left: 16px;
    width: calc(100% - 32px);
    height: 390px;
  }

  .fv4ref-product-sub {
    top: 277px;
    left: 0;
    width: 100%;
    height: 43px;
    padding: 0 13px;
    gap: 6px;
  }

  .fv4ref-product-sub .jp {
    font-size: 15px;
  }

  .fv4ref-product-sub strong {
    font-size: 23px;
  }

  .fv4ref-product-row {
    top: 335px;
    left: 0;
    width: 100%;
    padding: 0 4px;
    justify-content: flex-start;
  }

  .fv4ref-product-logo {
    width: 205px;
  }

  .fv4ref-product-ruby {
    margin: 0 0 7px 12px;
    font-size: 9px;
  }

  .fv4ref-tablet {
    display: block !important;
    top: 394px;
    right: auto;
    left: 50%;
    width: 520px;
    max-width: none;
    transform: translateX(-50%);
  }

  .fv4ref-badges {
    top: 666px;
    right: auto;
    left: 50%;
    gap: 6px;
    transform: translateX(-50%);
  }

  .fv4ref-badge {
    width: clamp(92px, 27vw, 104px);
    height: clamp(92px, 27vw, 104px);
    border-width: 2px;
    padding: 7px;
  }

  .fv4ref-badge::after {
    bottom: 3px;
    width: 65px;
    height: 16px;
  }

  .fv4ref-badge .t1 {
    font-size: 9px;
    line-height: 1.2;
  }

  .fv4ref-badge .t2,
  .fv4ref-badge:nth-child(2) .t2 {
    margin-top: 1px;
    font-size: 31px;
  }

  .fv4ref-badge .t2 small { font-size: 11px; }
  .fv4ref-badge .t3 { margin-top: 1px; font-size: 9px; }
  .fv4ref-badge.is-subsidy .t1 { font-size: 8px; }
  .fv4ref-badge.is-subsidy img { width: 43px; margin-top: 3px; }

  .fv4ref-logo-card.logo-slider-sec {
    top: 812px;
    left: 0;
    width: 100%;
    height: 166px;
    padding: 16px 0 12px;
    border-radius: 0;
  }

  .fv4ref-logo-card .logo-lead {
    gap: 7px;
  }

  .fv4ref-logo-card .logo-lead span {
    font-size: clamp(13px, 3.8vw, 16px);
    white-space: nowrap;
  }

  .fv4ref-logo-card .logo-lead::before,
  .fv4ref-logo-card .logo-lead::after {
    font-size: 14px;
  }

  .fv4ref-logo-card .logo-scroll-wrapper {
    width: 100%;
    height: 82px;
    margin: 0;
  }

  .fv4ref-logo-card .logo-item {
    width: 134px;
    height: 80px;
  }

  .fv4ref-functions {
    top: 978px;
    left: 0;
    width: 100%;
    height: 244px;
  }

  .fv4ref-functions-card {
    height: 244px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, 1fr);
    padding: 8px 10px;
  }

  .fv4ref-function {
    gap: 8px;
    padding: 8px 10px;
  }

  .fv4ref-function:not(:last-child)::after {
    content: none;
  }

  .fv4ref-function:nth-child(-n+2) {
    border-bottom: 1px solid rgba(255,255,255,.35);
  }

  .fv4ref-function:nth-child(odd) {
    border-right: 1px solid rgba(255,255,255,.35);
  }

  .fv4ref-function-icon {
    flex-basis: 44px;
    width: 44px;
    height: 44px;
  }

  .fv4ref-function img,
  .fv4ref-function:nth-child(2) img,
  .fv4ref-function:nth-child(3) img {
    width: 42px;
    height: 42px;
  }

  .fv4ref-function:nth-child(4) img {
    width: 40px;
    height: 40px;
    transform: translateX(4px);
  }

  .fv4ref-function strong {
    font-size: 14px;
    white-space: normal;
  }
}