@charset "UTF-8";

/* =========================================================
   FORMLINK HERO — RADIAL GRADIENT ONLY
   ワームホール、重力網、ガラス層は描画しない。
   元のHERO画像の背面に、中心から広がる淡い放射背景だけを置く。
   ========================================================= */

.formx-vortex-library,
.formx-gravity-field,
.formx-hero__approved-vortex{
  display:none!important;
}

.formx-hero{
  position:relative!important;
  min-height:720px!important;
  overflow:hidden!important;
  isolation:isolate!important;
  background:
    radial-gradient(ellipse at 70% 51%,
      rgba(20,143,241,.34) 0%,rgba(48,169,248,.255) 15%,
      rgba(94,194,254,.16) 32%,rgba(153,218,255,.085) 54%,
      rgba(215,242,255,.035) 78%,rgba(255,255,255,0) 100%),
    linear-gradient(90deg,#fff 0%,#fff 18%,#f8fcff 34%,#e9f7ff 100%)!important;
}

/* 中心から外へ伸びる、ごく薄い放射グラデーション。円・穴・渦は作らない。 */
.formx-hero::before{
  content:""!important;
  position:absolute!important;
  z-index:0!important;
  inset:-28%!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  border:0!important;
  border-radius:0!important;
  background:
    repeating-conic-gradient(from -4deg at 70% 51%,
      transparent 0deg 7.4deg,
      rgba(15,129,229,.075) 7.55deg 7.82deg,
      transparent 8deg 15deg),
    radial-gradient(ellipse at 70% 51%,
      rgba(28,151,245,.30) 0%,rgba(67,181,251,.205) 18%,
      rgba(116,205,255,.125) 38%,rgba(177,227,255,.062) 58%,
      rgba(219,243,255,.025) 80%,rgba(255,255,255,0) 100%)!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:.92!important;
  transform:none!important;
  -webkit-mask-image:radial-gradient(ellipse 96% 94% at 70% 51%,#000 0 32%,rgba(0,0,0,.90) 56%,rgba(0,0,0,.52) 82%,transparent 100%)!important;
  mask-image:radial-gradient(ellipse 96% 94% at 70% 51%,#000 0 32%,rgba(0,0,0,.90) 56%,rgba(0,0,0,.52) 82%,transparent 100%)!important;
  pointer-events:none!important;
}

/* 左側コピーの可読性を保つ白いフェード。 */
.formx-hero::after{
  content:""!important;
  position:absolute!important;
  z-index:1!important;
  inset:0!important;
  display:block!important;
  width:auto!important;
  height:auto!important;
  border:0!important;
  border-radius:0!important;
  background:linear-gradient(90deg,
    #fff 0%,#fff 25%,rgba(255,255,255,.99) 27%,
    rgba(255,255,255,.80) 30%,rgba(255,255,255,.34) 33%,
    rgba(255,255,255,.06) 36%,rgba(255,255,255,0) 39%)!important;
  box-shadow:none!important;
  filter:none!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:none!important;
}

.formx-hero__inner{
  position:relative!important;
  z-index:2!important;
  min-height:720px!important;
}

.formx-hero__content{
  position:relative!important;
  z-index:3!important;
}

.formx-hero__visual{
  position:relative!important;
  z-index:2!important;
  inset:auto!important;
  width:100%!important;
  height:620px!important;
  min-height:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
  background:transparent!important;
  transform:translateX(-13%)!important;
  pointer-events:none!important;
}

.formx-hero__visual::before,
.formx-hero__visual::after{
  content:none!important;
  display:none!important;
}

.formx-hero__visual .formx-hero__desktop-original{
  position:relative!important;
  z-index:2!important;
  width:min(50vw,760px)!important;
  max-width:none!important;
  height:auto!important;
  max-height:590px!important;
  margin:0!important;
  display:block!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  filter:drop-shadow(0 22px 28px rgba(7,91,178,.10))!important;
  opacity:1!important;
  transform:none!important;
  pointer-events:none!important;
  user-select:none!important;
}

@media screen and (min-width:768px) and (max-width:1100px){
  .formx-hero,
  .formx-hero__inner{
    min-height:630px!important;
  }

  .formx-hero::before{
    background:
      repeating-conic-gradient(from -4deg at 71% 51%,
        transparent 0deg 8.2deg,
        rgba(16,130,229,.070) 8.35deg 8.65deg,
        transparent 8.85deg 16.5deg),
      radial-gradient(ellipse at 71% 51%,
        rgba(29,153,245,.285) 0%,rgba(77,187,252,.19) 27%,
        rgba(145,216,255,.085) 59%,transparent 100%)!important;
  }

  .formx-hero::after{
    background:linear-gradient(90deg,
      #fff 0%,#fff 25%,rgba(255,255,255,.99) 28%,
      rgba(255,255,255,.78) 31%,rgba(255,255,255,.31) 34%,
      rgba(255,255,255,.05) 38%,transparent 41%)!important;
  }

  .formx-hero__visual{
    height:550px!important;
    transform:translateX(-15%)!important;
  }

  .formx-hero__visual .formx-hero__desktop-original{
    width:min(53vw,650px)!important;
    max-height:530px!important;
  }
}

@media screen and (max-width:767px){
  .formx-hero{
    min-height:0!important;
    background:linear-gradient(180deg,#fff 0%,#fff 45%,#f1faff 68%,#e2f4ff 100%)!important;
  }

  .formx-hero::before,
  .formx-hero::after{
    content:none!important;
    display:none!important;
  }

  .formx-hero__inner{
    min-height:0!important;
  }

  .formx-hero__visual{
    display:none!important;
  }

  .formx-hero__visual-mobile.service-reveal-mobile-visual{
    position:relative!important;
    z-index:1!important;
    width:100%!important;
    height:clamp(180px,26svh,250px)!important;
    min-height:165px!important;
    margin:10px auto 6px!important;
    padding:0!important;
    display:flex!important;
    flex:0 1 auto!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:visible!important;
    isolation:isolate!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }

  .formx-hero__visual-mobile.service-reveal-mobile-visual::before{
    content:""!important;
    position:absolute!important;
    z-index:0!important;
    inset:-20% -30%!important;
    display:block!important;
    border:0!important;
    border-radius:0!important;
    background:
      repeating-conic-gradient(from -5deg at 50% 52%,
        transparent 0deg 9deg,
        rgba(14,126,226,.070) 9.2deg 9.55deg,
        transparent 9.8deg 18deg),
      radial-gradient(ellipse at 50% 52%,
        rgba(26,149,243,.28) 0%,rgba(70,181,251,.18) 27%,
        rgba(132,210,255,.09) 60%,transparent 100%)!important;
    opacity:.92!important;
    -webkit-mask-image:radial-gradient(ellipse at center,#000 0 58%,rgba(0,0,0,.56) 80%,transparent 100%)!important;
    mask-image:radial-gradient(ellipse at center,#000 0 58%,rgba(0,0,0,.56) 80%,transparent 100%)!important;
    pointer-events:none!important;
  }

  .formx-hero__visual-mobile.service-reveal-mobile-visual::after{
    content:none!important;
    display:none!important;
  }

  .formx-hero__visual-mobile.service-reveal-mobile-visual .formx-hero__mobile-original{
    position:relative!important;
    z-index:1!important;
    width:100%!important;
    height:100%!important;
    max-width:470px!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    display:block!important;
    object-fit:contain!important;
    object-position:center!important;
    background:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    filter:drop-shadow(0 18px 22px rgba(6,27,61,.10))!important;
    transform:none!important;
    opacity:1!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    pointer-events:none!important;
    user-select:none!important;
  }
}

@media screen and (max-width:390px){
  .formx-hero__visual-mobile.service-reveal-mobile-visual{
    height:clamp(165px,24svh,215px)!important;
    min-height:155px!important;
    margin-top:8px!important;
  }
}

/* =========================================================
   2026-09-11 | FORMLINK HERO — APPROVED BACKGROUND IMAGE
   完成見本から抽出した背景をPC版HEROの最背面へ配置。
   旧CSS放射・重力レイヤーは重複描画を避けるため停止する。
   ========================================================= */
@media screen and (min-width:768px){
  .formx-hero{
    isolation:isolate!important;
    background-color:#fff!important;
    background-image:url("../img/vector/formlink-hero-background.png")!important;
    background-repeat:no-repeat!important;
    background-position:center center!important;
    background-size:cover!important;
  }

  .formx-hero::before,
  .formx-hero::after,
  .formx-hero__visual::before,
  .formx-hero__visual::after{
    content:none!important;
    display:none!important;
    background:none!important;
  }

  .formx-vortex-library,
  .formx-gravity-field,
  .formx-hero__approved-vortex{
    display:none!important;
  }

  .formx-hero__inner{
    position:relative!important;
    z-index:1!important;
  }

  .formx-hero__content{
    position:relative!important;
    z-index:3!important;
  }

  .formx-hero__visual,
  .formx-hero__visual img{
    z-index:2!important;
  }
}

/* =========================================================
   2026-09-11 | FORMLINK HERO — REFERENCE-EXACT DESKTOP ALIGNMENT
   Reference canvas: 1536 × 560 (supplied image: 2048 × 746)
   The enlarged HERO image is locked to the background focal point.
   ========================================================= */
@media screen and (min-width:1101px){
  .formx-hero{
    height:clamp(560px,36.426vw,746px)!important;
    min-height:0!important;
    background-position:0 0!important;
    background-size:100% 100%!important;
  }

  .formx-hero__inner{
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0 52px!important;
    display:grid!important;
    grid-template-columns:minmax(0,56%) minmax(0,44%)!important;
    gap:38px!important;
    align-items:center!important;
  }

  .formx-hero__content{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    align-self:center!important;
  }

  .formx-hero__visual{
    position:absolute!important;
    left:71.12%!important;
    top:57.31%!important;
    right:auto!important;
    bottom:auto!important;
    width:min(51.416vw,1053px)!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    min-height:0!important;
    margin:0!important;
    display:block!important;
    overflow:visible!important;
    transform:translate(-50%,-50%)!important;
    pointer-events:none!important;
  }

  .formx-hero__visual .formx-hero__desktop-original{
    position:relative!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    display:block!important;
    object-fit:contain!important;
    object-position:center!important;
    transform:none!important;
  }
}

/* =========================================================
   2026-09-12 | FORMLINK SP HERO — PC BACKGROUND UNIFICATION FINAL
   PC版で採用している formLink HERO背景をSP版HERO全体にも使用。
   SP版のロゴ / コピー / HERO画像 / CTA / SCROLLレイアウトは維持。
   ========================================================= */
@media screen and (max-width:767px){
  .formx-hero{
    position:relative!important;
    isolation:isolate!important;
    background-color:#fff!important;
    background-image:url("../img/vector/formlink-hero-background.png")!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    background-position:72% center!important;
  }

  /* SP専用で重ねていたCSS背景演出を停止し、PC採用背景をそのまま見せる */
  .formx-hero::before,
  .formx-hero::after,
  .formx-hero__visual-mobile.service-reveal-mobile-visual::before,
  .formx-hero__visual-mobile.service-reveal-mobile-visual::after{
    content:none!important;
    display:none!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
    filter:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }

  /* 旧重力・メッシュ系の背景レイヤーはSPでは停止 */
  .formx-vortex-library,
  .formx-gravity-field,
  .formx-gravity-surface,
  .formx-hero__approved-vortex{
    display:none!important;
  }

  /* 現行SP HERO画像をそのまま前面に残す */
  .formx-hero__visual-mobile.service-reveal-mobile-visual{
    position:relative!important;
    z-index:2!important;
    background:transparent!important;
  }

  .formx-hero__visual-mobile.service-reveal-mobile-visual > img,
  .formx-hero__visual-mobile.service-reveal-mobile-visual .formx-hero__mobile-original{
    display:block!important;
    position:relative!important;
    z-index:2!important;
    opacity:1!important;
    visibility:visible!important;
    background:transparent!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }

  .formx-hero__content{
    position:relative!important;
    z-index:3!important;
  }

  .formx-kicker,
  .formx-brand-logo-frame,
  .formx-hero h1,
  .formx-hero__lead,
  .formx-hero__text,
  .formx-hero__visual-mobile,
  .formx-hero__cta,
  .service-reveal-scroll{
    position:relative!important;
    z-index:4!important;
  }
}

@media screen and (max-width:390px){
  .formx-hero{
    background-position:76% center!important;
  }
}

/* =========================================================
   2026-09-12 | FORMLINK SP HERO — SILVER × BLUE CSS BACKGROUND PREVIEW
   - 白〜銀〜青グラデーション
   - 右側に大きな円弧 / 同心円
   - 星 / 粒 / ノード / 追加装飾なし
   - 青い台座なし
   - 既存SPレイアウト / HERO画像 / CTA / SCROLLは維持
   ========================================================= */
@media screen and (max-width:767px){
  .formx-hero{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    background-image:none!important;
    background:
      radial-gradient(
        ellipse 115% 92% at 18% 34%,
        rgba(255,255,255,1) 0%,
        rgba(255,255,255,.98) 32%,
        rgba(241,246,251,.94) 50%,
        rgba(220,234,246,.84) 66%,
        rgba(180,214,241,.64) 80%,
        rgba(117,183,232,.46) 100%
      ),
      linear-gradient(
        118deg,
        #ffffff 0%,
        #fbfdff 34%,
        #eef4f9 55%,
        #d7e8f6 72%,
        #acd3ef 87%,
        #78b9e7 100%
      )!important;
  }

  .formx-hero::before{
    content:""!important;
    position:absolute!important;
    z-index:0!important;
    width:148vw!important;
    height:148vw!important;
    right:-90vw!important;
    top:6%!important;
    display:block!important;
    border:2px solid rgba(255,255,255,.78)!important;
    border-radius:50%!important;
    background:transparent!important;
    box-shadow:
      0 0 0 18px rgba(255,255,255,.10),
      0 0 0 54px rgba(255,255,255,.055),
      0 0 0 96px rgba(126,189,235,.050)!important;
    transform:none!important;
    opacity:1!important;
    filter:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    pointer-events:none!important;
  }

  .formx-hero::after{
    content:""!important;
    position:absolute!important;
    z-index:0!important;
    width:116vw!important;
    height:116vw!important;
    right:-64vw!important;
    top:23%!important;
    display:block!important;
    border:1.5px solid rgba(255,255,255,.72)!important;
    border-radius:50%!important;
    background:
      radial-gradient(
        ellipse at center,
        rgba(255,255,255,.08) 0%,
        rgba(255,255,255,.04) 49%,
        rgba(255,255,255,0) 69%
      )!important;
    box-shadow:
      0 0 0 1px rgba(128,190,235,.14),
      0 0 0 32px rgba(255,255,255,.045),
      0 0 0 66px rgba(255,255,255,.028)!important;
    transform:none!important;
    opacity:1!important;
    filter:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    pointer-events:none!important;
  }

  .formx-vortex-library,
  .formx-gravity-field,
  .formx-gravity-surface,
  .formx-hero__approved-vortex{
    display:none!important;
  }

  .formx-hero__visual-mobile.service-reveal-mobile-visual::before,
  .formx-hero__visual-mobile.service-reveal-mobile-visual::after{
    content:none!important;
    display:none!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
    filter:none!important;
  }

  .formx-hero__inner{
    position:relative!important;
    z-index:1!important;
    background:transparent!important;
  }

  .formx-hero__content{
    position:relative!important;
    z-index:2!important;
    background:transparent!important;
  }

  .formx-kicker,
  .formx-brand-logo-frame,
  .formx-hero h1,
  .formx-hero__lead,
  .formx-hero__text,
  .formx-hero__visual-mobile,
  .formx-hero__cta,
  .service-reveal-scroll{
    position:relative!important;
    z-index:3!important;
  }

  .formx-hero__visual-mobile.service-reveal-mobile-visual{
    background:transparent!important;
  }

  .formx-hero__visual-mobile.service-reveal-mobile-visual > img,
  .formx-hero__visual-mobile.service-reveal-mobile-visual .formx-hero__mobile-original{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    background:transparent!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
}

@media screen and (max-width:390px){
  .formx-hero::before{right:-96vw!important;}
  .formx-hero::after{right:-70vw!important;}
}

/* =========================================================
   2026-09-12 | FORMLINK SP HERO — BACKGROUND IMAGE FINAL
   - 背景画像のみ差し替え
   - 現行SPの横幅 / 文言 / ロゴ / HERO画像 / CTA / SCROLL配置は変更しない
   - 星 / 粒 / ノード / 青い台座なし
   ========================================================= */
@media screen and (max-width:767px){
  .formx-hero{
    position:relative!important;
    isolation:isolate!important;
    overflow:hidden!important;
    background-color:#fff!important;
    background-image:url("../img/vector/formlink-sp-background-silver-blue.png")!important;
    background-repeat:no-repeat!important;
    background-size:cover!important;
    background-position:center center!important;
  }

  .formx-hero::before,
  .formx-hero::after,
  .formx-hero__visual-mobile.service-reveal-mobile-visual::before,
  .formx-hero__visual-mobile.service-reveal-mobile-visual::after{
    content:none!important;
    display:none!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
    filter:none!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }

  .formx-vortex-library,
  .formx-gravity-field,
  .formx-gravity-surface,
  .formx-hero__approved-vortex{
    display:none!important;
  }

  .formx-hero__inner,
  .formx-hero__content,
  .formx-hero__visual-mobile.service-reveal-mobile-visual{
    background:transparent!important;
  }

  .formx-hero__visual-mobile.service-reveal-mobile-visual > img,
  .formx-hero__visual-mobile.service-reveal-mobile-visual .formx-hero__mobile-original{
    display:block!important;
    opacity:1!important;
    visibility:visible!important;
    background:transparent!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
}