@charset "UTF-8";

:root{
  --navy:#061b3d;
  --blue:#086df3;
  --light-blue:#f3f8ff;
  --line:rgba(6,27,61,.12);
  --serif:"Noto Serif JP","Yu Mincho",serif;
  --sans:"Noto Sans JP","Yu Gothic",sans-serif;
}

*{
  box-sizing:border-box;
}

body{
  margin:0;
  color:var(--navy);
  background:#fff;
  font-family:var(--sans);
}

img{
  display:block;
  max-width:100%;
}

.formx-page{
  width:100%;
  max-width:1620px;
  overflow:hidden;
}

.formx-inner{
  width:100%;
  padding-right:52px;
  padding-left:52px;
}

.section-space{
  padding-bottom:10px;
}

.formx-title{
  position:relative;
  margin:20px 0 20px;
  color:var(--navy);
  font-family:var(--serif);
  font-size:30px;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.05em;
  text-align:center;
}

.formx-title::after{
  content:"";
  position:absolute;
  bottom:-13px;
  left:50%;
  width:46px;
  height:3px;
  border-radius:999px;
  background:var(--blue);
  transform:translateX(-50%);
}


/* HERO */

.formx-hero{
  position:relative;
  width:100%;
  min-height:520px;
  overflow:hidden;
  background:transparent;
}

/* AIアフィリエイト画面と同じく、左側の文字を読みやすくする白グラデーション */
.formx-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(255,255,255,1) 0%,
    rgba(255,255,255,.98) 34%,
    rgba(255,255,255,.65) 52%,
    rgba(255,255,255,0) 70%
  );
}

.formx-hero__inner{
  position:relative;
  z-index:1;
  width:100%;
  min-height:520px;
  padding-top:40px;
  padding-bottom:38px;
  display:flex;
  align-items:center;
}

.formx-hero__content{
  position:relative;
  z-index:3;
  width:49%;
  max-width:680px;
}

/* AIアフィリエイト画面と同じ、右側中央の独立画像配置 */
.formx-hero__visual{
  position:absolute;
  top:50%;
  right:40px;
  bottom:auto;
  z-index:1;
  width:min(54vw,850px);
  height:850px;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  overflow:visible;
  background:transparent;
  transform:translateY(-50%);
  pointer-events:none;
}

.formx-hero__visual img{
  width:100%;
  height:100%;
  max-width:none;
  max-height:480px;
  object-fit:contain;
  object-position:right center;
  background:transparent;
}

.formx-hero__visual::before{
  content:none;
}

.formx-kicker{
  margin:0 0 20px;
  color:#176ee9;
  font-size:15px;
  font-weight:700;
}

.formx-hero h1{
  margin:0;
  color:var(--navy);
  font-family:var(--serif);
  font-weight:500;
}

.formx-logo-text{
  display:block;
  margin-bottom:22px;
  font-size:86px;
  line-height:1;
  letter-spacing:-.04em;
}

.formx-logo-text span{
  color:#086df3;
}

.formx-hero h1 small{
  display:block;
  font-size:42px;
  line-height:1.55;
  font-weight:500;
}

.formx-hero__lead{
  max-width:620px;
  margin:24px 0 0;
  color:var(--navy);
  font-family:var(--serif);
  font-size:16px;
  line-height:2;
}


/* PROBLEM */

.problem-list{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}

.problem-item{
  min-width:0;
  padding:16px 30px 10px;
  display:flex;
  align-items:flex-start;
  gap:22px;
  border-right:1px solid var(--line);
}

.problem-item:last-child{
  border-right:none;
}

.problem-item img{
  width:74px;
  flex:0 0 74px;
}

.problem-item h3{
  margin:4px 0 12px;
  font-family:var(--serif);
  font-size:20px;
}

.problem-item p{
  margin:0;
  font-size:13px;
  line-height:1.9;
}


/* BEFORE AFTER */

.comparison{
  display:grid;
  grid-template-columns:1fr 70px 1fr;
  align-items:center;
  gap:24px;
  max-width:1050px;
  margin:0 auto;
}

.comparison-card{
  padding:18px;
  border:1px solid rgba(6,27,61,.16);
  border-radius:18px;
}

.comparison-photo{
  position:relative;
  overflow:hidden;
  border-radius:14px;
}

.comparison-photo img{
  width:100%;
  aspect-ratio:1.55 / 1;
  object-fit:cover;
}

.comparison-label{
  position:absolute;
  top:12px;
  left:12px;
  z-index:1;
  padding:6px 15px;
  border-radius:999px;
  color:#fff;
  background:#26324a;
  font-size:15px;
  font-weight:700;
}

.after-card .comparison-label{
  background:#086df3;
}

.comparison-card ul{
  padding:0;
  margin:18px 0 0;
  list-style:none;
}

.comparison-card li{
  position:relative;
  margin-top:13px;
  padding-left:38px;
  font-size:17px;
  line-height:1.7;
}

.comparison-card li::before{
  content:"×";
  position:absolute;
  top:1px;
  left:0;
  width:26px;
  height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  background:#526078;
  font-weight:700;
}

.after-card li::before{
  content:"✓";
  background:#086df3;
}

.comparison-arrow{
  color:#000000;
  font-size:64px;
  font-weight:700;
  text-align:center;
}



/* =========================================================
   NUMBERS
   数字で見るFormX
========================================================= */

.formx-numbers{
  position:relative;
}

.formx-numbers__grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  max-width:1220px;
  margin:38px auto 0;
}

.formx-number-card{
  min-width:0;
  padding:28px 28px 24px;
  border:1px solid rgba(6,27,61,.13);
  border-radius:18px;
  background:rgba(255,255,255,.82);
}

.formx-number-card__head{
  text-align:center;
}

.formx-number-card__eyebrow{
  display:block;
  margin-bottom:10px;
  color:var(--navy);
  font-size:14px;
  font-weight:700;
  letter-spacing:.03em;
}

.formx-number-card__value{
  display:block;
  color:var(--blue);
  font-family:var(--serif);
  font-size:54px;
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.03em;
}

.formx-number-card__value small{
  margin-left:4px;
  color:var(--navy);
  font-family:var(--sans);
  font-size:18px;
  font-weight:700;
}

.formx-number-card p{
  margin:18px 0 0;
  color:var(--navy);
  font-size:13px;
  line-height:1.9;
  text-align:center;
}

.formx-number-bars{
  height:94px;
  margin:24px 10px 0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:9px;
  border-bottom:1px solid rgba(6,27,61,.14);
}

.formx-number-bars span{
  width:24px;
  height:var(--bar);
  min-height:18px;
  border-radius:7px 7px 0 0;
  background:linear-gradient(180deg,#47a0ff 0%,#086df3 100%);
  box-shadow:0 8px 18px rgba(8,109,243,.12);
}


.formx-reply-compare{
  position:relative;
  min-height:118px;
  margin-top:14px;
  padding:18px 84px 18px 16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:14px;
  border:1px solid rgba(8,109,243,.14);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(243,248,255,.98),rgba(255,255,255,.98));
}

.formx-reply-compare__row{
  display:grid;
  grid-template-columns:92px 1fr;
  align-items:center;
  gap:12px;
}

.formx-reply-compare__label{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.formx-reply-compare__label span{
  color:#526078;
  font-size:11px;
  font-weight:700;
}

.formx-reply-compare__label strong{
  color:var(--navy);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.1;
}

.formx-reply-compare__row--formx .formx-reply-compare__label span,
.formx-reply-compare__row--formx .formx-reply-compare__label strong{
  color:var(--blue);
}

.formx-reply-compare__track{
  height:14px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(6,27,61,.08);
}

.formx-reply-compare__track span{
  display:block;
  width:var(--reply-width);
  height:100%;
  border-radius:inherit;
  background:#aeb9c8;
}

.formx-reply-compare__row--formx .formx-reply-compare__track span{
  background:linear-gradient(90deg,#49a5ff 0%,#086df3 100%);
  box-shadow:0 4px 12px rgba(8,109,243,.16);
}

.formx-reply-compare__badge{
  position:absolute;
  top:50%;
  right:14px;
  width:58px;
  height:58px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,#123f91 0%,#0874ed 100%);
  transform:translateY(-50%);
  box-shadow:0 10px 22px rgba(8,109,243,.20);
}

.formx-reply-compare__badge strong{
  font-family:var(--serif);
  font-size:18px;
  line-height:1;
}

.formx-reply-compare__badge span{
  margin-top:3px;
  font-size:9px;
  font-weight:700;
}




.formx-number-flow{
  min-height:118px;
  margin-top:14px;
  padding:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(243,248,255,.96),rgba(255,255,255,.96));
}

.formx-number-flow span,
.formx-number-flow strong{
  color:var(--navy);
  font-family:var(--serif);
  font-size:20px;
  font-weight:600;
}

.formx-number-flow strong{
  color:var(--blue);
}

.formx-number-flow b{
  color:rgba(6,27,61,.45);
  font-size:18px;
}

.formx-numbers__note{
  max-width:1220px;
  margin:14px auto 0;
  color:#526078;
  font-size:11px;
  line-height:1.7;
  text-align:right;
}


/* FEATURES */

.feature-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
}

.feature-item{
  padding:16px 20px 28px;
  border-right:1px solid var(--line);
  text-align:center;
}

.feature-item:last-child{
  border-right:none;
}

.feature-item img{
  width:76px;
  margin:0 auto 16px;
}

.feature-item h3{
  margin:0 0 10px;
  font-family:var(--serif);
  font-size:19px;
}

.feature-item p{
  margin:0;
  font-size:13px;
  line-height:1.8;
}


/* STEP */

.step-grid{
  display:grid;
  grid-template-columns:
    minmax(0,1fr) 38px
    minmax(0,1fr) 38px
    minmax(0,1fr) 38px
    minmax(0,1fr);
  align-items:center;
}

.step-item{
  text-align:center;
}

.step-number{
  display:block;
  margin-bottom:10px;
  color:#086df3;
  font-family:var(--serif);
  font-size:28px;
  font-weight:600;
}

.step-item img{
  width:84px;
  margin:0 auto 14px;
}

.step-item h3{
  margin:0 0 10px;
  font-family:var(--serif);
  font-size:19px;
}

.step-item p{
  margin:0;
  font-size:13px;
  line-height:1.8;
}

.step-arrow{
  color:#000000;
  font-size:42px;
  text-align:center;
}


/* USE CASE / REASON */

.formx-bottom__grid{
  display:grid;
  grid-template-columns:1.65fr 1fr;
  gap:48px;
}

.case-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}

.case-grid article img{
  width:100%;
  aspect-ratio:1.55 / 1;
  object-fit:cover;
  border-radius:12px;
}

.case-grid h3{
  margin:12px 0 6px;
  font-family:var(--serif);
  font-size:20px;
}

.case-grid p{
  margin:0;
  font-size:18px;
  line-height:1.8;
}

.formx-reasons{
  padding-left:44px;
  border-left:1px solid var(--line);
}

.formx-reasons ul{
  padding:10px;
  margin:0;
  list-style:none;
}

.formx-reasons li{
  position:relative;
  margin-bottom:22px;
  padding-left:48px;
  font-family:var(--serif);
  font-size:17px;
  line-height:1.8;
}

.formx-reasons li::before{
  content:"✓";
  position:absolute;
  top:0;
  left:0;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #086df3;
  border-radius:50%;
  color:#ffffff;
  background-color: #086df3;
  font-weight:700;
}


/* CTA */

.formx-cta{
  padding:26px 0 38px;
  background:
    linear-gradient(
      180deg,
      rgba(246,250,255,.76),
      rgba(230,243,255,.94)
    ),
    url("../img/FormX/formx-wave.png") center bottom / cover;
}

.formx-cta p{
  margin:0 0 18px;
  font-family:var(--serif);
  font-size:28px;
  text-align:center;
}

.formx-cta a{
  width:min(100%,520px);
  min-height:64px;
  margin:0 auto;
  padding:0 28px;
  display:grid;
  grid-template-columns:40px 1fr 30px;
  align-items:center;
  border-radius:50px;
  color:#fff;
  background:linear-gradient(100deg, #123f91 0%, #0874ed 100%);
  text-decoration:none;
  box-shadow:0 12px 28px rgba(6,75,190,.22);
}

.formx-cta a strong{
  font-family:var(--serif);
  font-size:24px;
  font-weight:500;
  text-align:center;
}

.formx-cta a span:last-child{
  font-size:30px;
}



/* SMARTPHONE */

@media screen and (max-width:1036px){

  .formx-page{
    padding-top:72px;
  }

  .formx-inner{
    padding-right:18px;
    padding-left:18px;
  }

  .section-space{
    padding-top:10px;
    padding-bottom:42px;
  }

  .formx-title{
    margin-bottom:36px;
    font-size:24px;
  }

  .formx-hero{
    min-height:auto;
  }

  .formx-hero__inner{
    min-height:auto;
    padding-top:30px;
    padding-bottom:36px;
    display:flex;
    flex-direction:column;
  }

  .formx-hero__content{
    width:100%;
    max-width:700px;
  }

  .formx-kicker{
    font-size:12px;
  }

  .formx-logo-text{
    font-size:64px;
  }

  .formx-hero h1 small{
    font-size:31px;
    line-height:1.55;
  }

  .formx-hero__lead{
    margin-top:22px;
    font-size:14px;
    line-height:1.9;
  }

  .formx-hero__lead br{
    display:none;
  }

  .formx-hero__visual{
    width:100%;
    margin-top:24px;
  }

  .formx-hero__visual img{
    width:100%;
  }

  .problem-list{
    grid-template-columns:1fr;
  }

  .problem-item{
    padding:24px 4px;
    border-right:none;
    border-bottom:1px solid var(--line);
  }

  .problem-item:last-child{
    border-bottom:none;
  }

  .problem-item img{
    width:76px;
    flex-basis:76px;
  }

  .problem-item h3{
    font-size:18px;
  }

  .comparison{
    grid-template-columns:1fr;
    gap:20px;
  }

  .comparison-arrow{
    transform:rotate(90deg);
    font-size:48px;
  }

  .comparison-card li{
    font-size:15px;
  }

  .feature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .feature-item{
    padding:22px 10px;
    border-right:1px solid var(--line);
    border-bottom:1px solid var(--line);
  }

  .feature-item:nth-child(2n){
    border-right:none;
  }

  .feature-item:nth-last-child(-n+2){
    border-bottom:none;
  }

  .step-grid{
    border:1px solid var(--line);
    grid-template-columns:1fr;
  }

  .step-item{
    padding:5px 16px;
    border-radius:16px;
  }

  .step-arrow{
    transform:rotate(90deg);
    font-size:34px;
  }

  .formx-bottom__grid{
    grid-template-columns:1fr;
    gap:44px;
  }

  .case-grid{
    grid-template-columns:1fr;
  }

  .formx-reasons{
    padding-left:0;
    border-left:none;
  }


  .formx-numbers__grid{
    grid-template-columns:1fr;
    gap:18px;
    max-width:720px;
  }

  .formx-number-card{
    padding:24px 20px;
  }

  .formx-number-card__value{
    font-size:48px;
  }

  .formx-numbers__note{
    max-width:720px;
    text-align:left;
  }

  .formx-cta p{
    font-size:21px;
    line-height:1.7;
  }

  .formx-cta a{
    min-height:58px;
  }

  .formx-cta a strong{
    font-size:19px;
  }
}
/* ========================================
   HERO：スマートフォン専用
   左テキスト／右ビジュアル
======================================== */

@media screen and (min-width:768px) and (max-width:1036px){

  .formx-hero,
  .formx-hero__inner{
    min-height:520px;
  }

  .formx-hero__inner{
    padding-top:30px;
    padding-bottom:30px;
    display:flex;
    flex-direction:row;
    align-items:center;
  }

  .formx-hero__content{
    width:52%;
    max-width:560px;
  }

  .formx-hero__visual{
    display:flex;
    top:50%;
    right:-40px;
    width:57vw;
    height:440px;
    margin:0;
    overflow:visible;
    transform:translateY(-50%);
  }

  .formx-hero__visual img{
    width:100%;
    height:100%;
    max-width:none;
    max-height:440px;
    object-fit:contain;
    object-position:right center;
  }
}

@media screen and (max-width:767px){

  .formx-hero{
    min-height:clamp(42px,8vw,470px);
    background:
      radial-gradient(
        circle at 92% 43%,
        rgba(8,109,243,.13),
        transparent 35%
      ),
      linear-gradient(
        145deg,
        #fff 0%,
        #fff 58%,
        #edf5ff 100%
      );
  }

  /* PC用の白グラデーションを解除 */
  .formx-hero::before{
    background:none;
  }

  .formx-hero__inner{
    position:relative;
    display:block;
    padding-top:24px;
    padding-bottom:10px;
  }

  /* 左側のテキスト */
  .formx-hero__content{
    position:relative;
    z-index:2;
    width:100%;
    max-width:none;
  }

  .formx-kicker{
    margin-bottom:14px;
    font-size:clamp(10px,2.8vw,12px);
    line-height:1;
    white-space:nowrap;
  }

  .formx-logo-text{
    margin-bottom:20px;
    font-size:clamp(50px,15.5vw,64px);
  }

  .formx-hero h1 small{
    width:84%;
    font-size:clamp(19px,5.7vw,24px);
    line-height:1.62;
    letter-spacing:-.02em;
    white-space:nowrap;
  }

  .formx-hero__lead{
    width:76%;
    max-width:280px;
    margin-top:22px;
    font-size:clamp(10px,2.8vw,12px);
    line-height:1.85;
  }

  /* HTMLで指定した3行を維持 */
  .formx-hero__lead br{
    display:block;
  }

  /* 右側の画像 */
  .formx-hero__visual{
    display:block;
    position:absolute;
    top:calc(
      24px +
      clamp(10px,2.8vw,12px) +
      14px
    );
    right:clamp(-105px,-22vw,-70px);
    bottom:auto;
    z-index:1;
    width:clamp(280px,88vw,380px);
    height:clamp(260px,78vw,340px);
    margin:0;
    overflow:hidden;
    background:transparent;
    transform:none;
    pointer-events:none;
  }

  .formx-hero__visual img{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:contain;
    object-position:74% center;
  }

  /* 画像の左側を白くぼかし、文字との境界を自然にする */
  .formx-hero__visual::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    background:linear-gradient(
      90deg,
      #fff 0%,
      rgba(255,255,255,.92) 12%,
      rgba(255,255,255,.38) 28%,
      rgba(255,255,255,0) 48%
    );
    pointer-events:none;
  }
}

/* =========================================================
   SHARED TOP BACKGROUND
   TOP画面と同じ抽象ブルー背景をページ全体へ固定表示
========================================================= */
html{
  background:#f7fbff;
}

body{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  background:transparent!important;
}

body::before,
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
}

body::before{
  z-index:-2;
  background-image:url("../img/top/top-page-background-v1.png");
  background-image:image-set(
    url("../img/top/top-page-background-v1.webp") type("image/webp"),
    url("../img/top/top-page-background-v1.png") type("image/png")
  );
  background-position:center center;
  background-size:cover;
  background-repeat:no-repeat;
  opacity:.78;
}

body::after{
  z-index:-1;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.24) 0%,
    rgba(248,252,255,.34) 52%,
    rgba(255,255,255,.46) 100%
  );
}

@media(max-width:900px){
  body::before{
    background-position:72% center;
    opacity:.73;
  }

  body::after{
    background:linear-gradient(
      180deg,
      rgba(255,255,255,.32) 0%,
      rgba(248,252,255,.42) 52%,
      rgba(255,255,255,.54) 100%
    );
  }
}

@media(max-width:640px){
  body::before{
    background-position:84% center;
    opacity:.69;
  }
}


.formx-page,
.formx-problem,
.formx-before-after,
.formx-features,
.formx-steps,
.formx-bottom{
  background:transparent!important;
}
.problem-item,
.comparison-card,
.feature-item,
.step-item,
.case-grid article,
.formx-reasons{
  background-color:rgba(255,255,255,.76);
}

/* =========================================================
   GLOBAL FOOTER — browser zoom / scale stability
   ブラウザの表示倍率を変更してもフッターを画面幅いっぱいに維持
========================================================= */
html,
body{
  min-height:100%;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

body > #header{
  flex:0 0 auto;
}

body > main{
  width:100%;
  flex:1 0 auto;
}

body > #footer{
  position:relative;
  z-index:10;
  width:100%;
  max-width:none!important;
  margin-top:auto;
  margin-right:0!important;
  margin-left:0!important;
  align-self:stretch;
  flex:0 0 auto;
  box-sizing:border-box;
}

/* footer.htmlから読み込まれる一番外側の要素だけ固定幅を解除 */
body > #footer > *,
body > #footer > footer,
body > #footer > .footer{
  width:100%!important;
  max-width:none!important;
  margin-right:0!important;
  margin-left:0!important;
  box-sizing:border-box;
}

/* 内部コンテンツの中央寄せは維持 */
body > #footer .footer-inner,
body > #footer .footer__inner,
body > #footer .footer-container,
body > #footer .footer__container{
  margin-right:auto!important;
  margin-left:auto!important;
}

/* 縮小表示時の横スクロール発生を防ぐ */
body > #footer,
body > #footer > *{
  min-width:0;
}

/* =========================================================
   GLOBAL PAGE POSITION — zoom stability / left anchored
   ブラウザの表示倍率を下げても、ページ本体を中央へ移動させず、
   通常時と同じ左基準位置に維持する
========================================================= */
html,
body{
  width:100%;
  min-width:320px;
}

body{
  align-items:stretch;
}

/* 各ページの最外側ラッパーを左基準へ固定 */
.affiliate-page,
.article-page,
.formx-page,
.other-page,
.dr-growth-page,
.business-ai-page,
.strategy-page,
.page-image-wrap,
.page-image-cta-wrap{
  width:min(100%,1620px);
  max-width:1620px;
  margin-right:auto!important;
  margin-left:0!important;
}

/* 各ページ内の中央コンテナも、縮小時に画面中央へ移動しない */
.affiliate-inner,
.article-inner,
.formx-inner,
.formx-container,
.other-inner,
.dr-wide,
.business-ai-container,
.strategy-inner,
.privacy-inner{
  margin-right:auto!important;
  margin-left:0!important;
}

/* プライバシー・フォームなど main が直接レイアウトを持つページ */
body > main{
  max-width:1620px;
  margin-right:auto;
  margin-left:0;
}

/* お問い合わせ・資料請求 */
.diagnosis{
  margin-right:auto!important;
  margin-left:0!important;
}

/* フッターは背景だけ全幅、内容は元の左位置を維持 */
body > #footer{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}

body > #footer .footer{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
}

body > #footer .footer-info{
  margin-right:auto!important;
  margin-left:40px!important;
}

/* PCのみ位置固定。スマホでは既存レスポンシブ設定を優先 */
@media(max-width:1036px){
  .affiliate-page,
  .article-page,
  .formx-page,
  .other-page,
  .dr-growth-page,
  .business-ai-page,
  .strategy-page,
  .page-image-wrap,
  .page-image-cta-wrap,
  body > main{
    width:100%;
    max-width:none;
    margin-right:0!important;
    margin-left:0!important;
  }

  .affiliate-inner,
  .article-inner,
  .formx-inner,
  .formx-container,
  .other-inner,
  .dr-wide,
  .business-ai-container,
  .strategy-inner,
  .privacy-inner{
    margin-right:auto!important;
    margin-left:auto!important;
  }

  body > #footer .footer-info{
    margin-left:0!important;
  }
}


/* Vector hero rendering */
img[src$=".svg"]{
  image-rendering:auto;
}

/* MOBILE: hero bottom spacing */
@media screen and (max-width:767px){
  .formx-hero,.formx-hero__inner{min-height:clamp(300px,92vw,350px)}
  .formx-hero__inner{padding-bottom:0}
  .formx-problem.section-space{padding-top:0}
}

/* MOBILE: shared hero typography */
@media screen and (max-width:767px){
  .formx-kicker{font-size:12px;line-height:1.4;font-weight:600}
  .formx-logo-text{font-size:clamp(42px,12vw,52px);line-height:1.08;font-weight:500}
  .formx-hero h1 small{font-size:clamp(28px,7.5vw,36px);line-height:1.45;font-weight:500}
  .formx-hero__lead{font-size:13px;line-height:1.9;font-weight:500}
}

/* MOBILE: 数字で見るFormX */
@media screen and (max-width:767px){
  .formx-numbers__grid{
    margin-top:30px;
  }

  .formx-number-card{
    padding:22px 16px 20px;
  }

  .formx-number-card__eyebrow{
    font-size:13px;
  }

  .formx-number-card__value{
    font-size:42px;
  }

  .formx-number-card__value small{
    font-size:15px;
  }

  .formx-number-card p{
    font-size:12px;
  }

  .formx-number-flow{
    min-height:auto;
    padding:18px 10px;
  }

  .formx-reply-compare{
    min-height:auto;
    padding:18px 14px 82px;
  }

  .formx-reply-compare__row{
    grid-template-columns:78px 1fr;
    gap:10px;
  }

  .formx-reply-compare__badge{
    top:auto;
    right:50%;
    bottom:12px;
    width:58px;
    height:58px;
    transform:translateX(50%);
  }


  .formx-number-flow span,
  .formx-number-flow strong{
    font-size:17px;
  }

  .formx-numbers__note{
    font-size:10px;
    line-height:1.6;
  }
}

/* =========================================================
   FORM X HERO — final visual balance polish
   2026-08-12
========================================================= */
@media screen and (min-width:1101px){
  .formx-page{
    width:100%!important;
    max-width:none!important;
  }

  .formx-hero{
    min-height:540px;
    isolation:isolate;
    background:
      radial-gradient(circle at 79% 48%,rgba(63,162,255,.15) 0%,rgba(63,162,255,.07) 22%,rgba(63,162,255,0) 43%),
      linear-gradient(90deg,#fff 0%,#fff 41%,rgba(248,252,255,.97) 58%,rgba(236,247,255,.85) 100%);
  }

  .formx-hero::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background:
      repeating-linear-gradient(115deg,transparent 0 45px,rgba(8,109,243,.025) 45px 46px),
      linear-gradient(90deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.98) 37%,rgba(255,255,255,.80) 48%,rgba(255,255,255,.12) 66%,rgba(255,255,255,0) 78%);
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 66%,transparent 100%);
    mask-image:linear-gradient(90deg,#000 0%,#000 66%,transparent 100%);
    pointer-events:none;
  }

  .formx-hero::after{
    content:"";
    position:absolute;
    top:50%;
    right:clamp(40px,5vw,100px);
    z-index:0;
    width:clamp(500px,38vw,680px);
    aspect-ratio:1;
    border:1px solid rgba(8,109,243,.10);
    border-radius:50%;
    transform:translateY(-50%) rotate(-7deg);
    pointer-events:none;
  }

  .formx-hero__inner{
    min-height:540px;
    padding:42px clamp(54px,4.2vw,80px) 38px;
    display:flex;
    align-items:center;
  }

  .formx-hero__content{
    width:47%;
    max-width:720px;
  }

  .formx-kicker{
    margin-bottom:24px;
    font-size:16px;
    letter-spacing:.03em;
  }

  .formx-logo-text{
    margin-bottom:24px;
    font-size:88px;
  }

  .formx-hero h1 small{
    font-size:40px;
    line-height:1.58;
    letter-spacing:.01em;
  }

  .formx-hero__lead{
    margin-top:24px;
    font-size:16px;
    line-height:1.95;
  }

  .formx-hero__visual{
    position:absolute;
    top:50%;
    right:-4%;
    bottom:auto;
    left:45%;
    z-index:1;
    width:auto;
    height:540px;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
    transform:translateY(-50%);
    pointer-events:none;
  }

  .formx-hero__visual::before{
    content:"";
    position:absolute;
    top:50%;
    left:54%;
    z-index:0;
    width:clamp(390px,30vw,540px);
    aspect-ratio:1;
    border:1px solid rgba(8,109,243,.12);
    border-radius:50%;
    background:radial-gradient(circle,rgba(111,195,255,.18) 0%,rgba(111,195,255,.08) 38%,rgba(111,195,255,0) 70%);
    transform:translate(-50%,-50%) rotate(13deg);
    pointer-events:none;
  }

  .formx-hero__visual::after{
    content:"";
    position:absolute;
    top:50%;
    left:54%;
    z-index:0;
    width:clamp(300px,23vw,420px);
    aspect-ratio:1.18;
    border:1px solid rgba(8,109,243,.08);
    border-radius:50%;
    transform:translate(-50%,-50%) rotate(-18deg);
    pointer-events:none;
  }

  .formx-hero__visual img{
    position:relative;
    z-index:1;
    width:clamp(600px,36vw,680px);
    height:auto;
    max-width:none;
    max-height:none;
    object-fit:contain;
    object-position:center;
    background:transparent;
    filter:drop-shadow(0 24px 30px rgba(10,79,170,.10));
    transform:translateX(-2%);
  }
}

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

  .formx-hero{
    background:
      radial-gradient(circle at 84% 48%,rgba(63,162,255,.14),transparent 39%),
      linear-gradient(90deg,#fff 0%,#fff 44%,#eef7ff 100%);
  }

  .formx-hero::before{
    background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.98) 40%,rgba(255,255,255,.64) 58%,rgba(255,255,255,0) 77%);
  }

  .formx-hero__inner{
    padding:34px 30px 32px;
    display:flex;
    flex-direction:row;
    align-items:center;
  }

  .formx-hero__content{
    width:51%;
    max-width:560px;
  }

  .formx-logo-text{
    font-size:68px;
  }

  .formx-hero h1 small{
    font-size:31px;
  }

  .formx-hero__visual{
    position:absolute;
    top:50%;
    right:-7%;
    left:46%;
    width:auto;
    height:500px;
    margin:0;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:visible;
    transform:translateY(-50%);
  }

  .formx-hero__visual::before{
    content:"";
    position:absolute;
    top:50%;
    left:54%;
    width:430px;
    aspect-ratio:1;
    border:1px solid rgba(8,109,243,.10);
    border-radius:50%;
    background:radial-gradient(circle,rgba(111,195,255,.15),transparent 68%);
    transform:translate(-50%,-50%);
  }

  .formx-hero__visual img{
    width:clamp(500px,58vw,600px);
    height:auto;
    max-width:none;
    max-height:none;
    object-fit:contain;
    object-position:center;
    filter:drop-shadow(0 20px 26px rgba(10,79,170,.09));
    transform:translateX(-2%);
  }

  .formx-hero__lead br{
    display:block;
  }
}

@media screen and (max-width:767px){
  .formx-hero,
  .formx-hero__inner{
    min-height:420px;
  }

  .formx-hero{
    background:
      radial-gradient(circle at 103% 48%,rgba(54,157,255,.18) 0%,rgba(54,157,255,.08) 28%,transparent 54%),
      linear-gradient(145deg,#fff 0%,#fff 59%,#edf6ff 100%);
  }

  .formx-hero::before{
    background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.98) 44%,rgba(255,255,255,.44) 67%,rgba(255,255,255,0) 100%);
    -webkit-mask-image:none;
    mask-image:none;
  }

  .formx-hero__inner{
    min-height:420px;
    padding:24px 18px 18px;
  }

  .formx-hero__content{
    width:100%;
    max-width:none;
  }

  .formx-kicker{
    margin-bottom:14px;
    font-size:12px;
    line-height:1.4;
  }

  .formx-logo-text{
    margin-bottom:17px;
    font-size:clamp(46px,13vw,54px);
  }

  .formx-hero h1 small{
    width:100%;
    font-size:clamp(22px,6.2vw,25px);
    line-height:1.55;
    letter-spacing:-.02em;
    white-space:nowrap;
  }

  .formx-hero__lead{
    position:relative;
    z-index:3;
    width:64%;
    max-width:248px;
    margin-top:18px;
    font-size:12px;
    line-height:1.85;
  }

  .formx-hero__lead br{
    display:block;
  }

  .formx-hero__visual{
    position:absolute;
    top:205px;
    right:clamp(-96px,-22vw,-74px);
    bottom:auto;
    left:auto;
    z-index:1;
    width:clamp(250px,71vw,285px);
    height:clamp(250px,71vw,285px);
    margin:0;
    display:block;
    overflow:visible;
    transform:none;
  }

  .formx-hero__visual::before{
    content:"";
    position:absolute;
    inset:9%;
    z-index:0;
    border:1px solid rgba(8,109,243,.10);
    border-radius:50%;
    background:radial-gradient(circle,rgba(111,195,255,.12),transparent 68%);
    pointer-events:none;
  }

  .formx-hero__visual::after{
    content:none;
  }

  .formx-hero__visual img{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:contain;
    object-position:center;
    filter:drop-shadow(0 16px 22px rgba(10,79,170,.08));
  }

  .formx-hero__visual::before{
    background:
      linear-gradient(90deg,#fff 0%,rgba(255,255,255,.98) 18%,rgba(255,255,255,.72) 38%,rgba(255,255,255,.14) 62%,rgba(255,255,255,0) 78%),
      radial-gradient(circle,rgba(111,195,255,.12),transparent 68%);
  }
}

/* =========================================================
   FORM X HERO — mobile full-icon display
   アイコンを右端で切らず、文字の後ろに全体表示する最終上書き
========================================================= */
@media screen and (max-width:767px){
  .formx-hero__content{
    position:relative;
    z-index:3;
  }

  .formx-hero__visual{
    top:54px;
    right:0;
    bottom:auto;
    left:auto;
    z-index:1;
    width:clamp(238px,74vw,296px);
    height:auto;
    aspect-ratio:1 / 1;
    overflow:visible;
    transform:none;
  }

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

  .formx-hero__visual img{
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:contain;
    object-position:center;
    opacity:1;
    filter:drop-shadow(0 16px 22px rgba(10,79,170,.08));
    -webkit-mask-image:none;
    mask-image:none;
  }
}

@media screen and (max-width:360px){
  .formx-hero__visual{
    top:56px;
    right:0;
    width:clamp(226px,72vw,248px);
    height:auto;
  }
}

/* =========================================================
   FORM X HERO — mobile gap reduction
   HEROアイコンと「こんなお悩みありませんか？」の間を縮める
========================================================= */
@media screen and (max-width:767px){
  .formx-hero,
  .formx-hero__inner{
    min-height:clamp(310px,90vw,360px);
  }

  .formx-hero__inner{
    padding-bottom:0;
  }

  .formx-problem.section-space{
    padding-top:0;
  }

  .formx-problem .formx-title{
    margin-top:8px;
  }
}

/* =========================================================
   FLOW COMPARE
   一般的なフォーム送信例とFormXの違い
========================================================= */

.formx-flow-compare{
  position:relative;
  padding-top:20px;
  padding-bottom:42px;
}

.formx-flow-compare__lead{
  margin:34px auto 26px;
  color:var(--navy);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.8;
  text-align:center;
}

.formx-flow-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 165px;
  gap:26px;
  align-items:stretch;
  max-width:1500px;
  margin:0 auto;
}

.formx-flow-lanes{
  min-width:0;
  display:grid;
  gap:26px;
}

.formx-flow-lane{
  position:relative;
  min-width:0;
  padding:54px 14px 14px;
  border:1px solid rgba(6,27,61,.13);
  border-radius:18px;
  background:rgba(255,255,255,.80);
}

.formx-flow-lane--formx{
  border-color:rgba(8,109,243,.35);
  background:linear-gradient(100deg,rgba(245,250,255,.92),rgba(255,255,255,.86));
}

.formx-flow-lane__label{
  position:absolute;
  top:-1px;
  left:-1px;
  min-width:180px;
  padding:10px 20px;
  border-radius:10px 10px 10px 0;
  color:#fff;
  background:#505a68;
  font-size:17px;
  font-weight:700;
  letter-spacing:.02em;
  text-align:center;
}

.formx-flow-lane--formx .formx-flow-lane__label{
  background:linear-gradient(100deg,#123f91 0%,#0874ed 100%);
}

.formx-flow-lane__steps{
  display:flex;
  align-items:stretch;
  gap:8px;
}

.formx-flow-card{
  position:relative;
  min-width:0;
  min-height:220px;
  flex:1 1 0;
  padding:18px 10px 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  border:1px solid rgba(6,27,61,.18);
  border-radius:14px;
  background:rgba(255,255,255,.94);
  text-align:center;
}

.formx-flow-lane--formx .formx-flow-card{
  border-color:rgba(8,109,243,.38);
}

.formx-flow-card--human{
  flex:1.45 1 0;
  justify-content:center;
  background:rgba(245,247,250,.94);
}

.formx-flow-card__number{
  position:absolute;
  top:11px;
  left:11px;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  background:#606a78;
  font-size:13px;
  font-weight:700;
}

.formx-flow-lane--formx .formx-flow-card__number{
  background:var(--blue);
}

.formx-flow-card img{
  width:66px;
  height:66px;
  margin:10px auto 11px;
  object-fit:contain;
}

.formx-flow-card h3{
  margin:0 0 8px;
  color:var(--navy);
  font-family:var(--serif);
  font-size:16px;
  line-height:1.45;
}

.formx-flow-card p{
  margin:0;
  color:#26324a;
  font-size:11px;
  line-height:1.7;
}

.formx-flow-card ul{
  padding:0;
  margin:6px 0 0;
  list-style:none;
  color:#26324a;
  font-size:11px;
  line-height:1.8;
  text-align:left;
}

.formx-flow-card ul li::before{
  content:"・";
}

.formx-flow-arrow{
  align-self:center;
  flex:0 0 24px;
  color:#7d8794;
  font-size:28px;
  font-weight:700;
  line-height:1;
  text-align:center;
}

.formx-flow-lane--formx .formx-flow-arrow{
  color:var(--blue);
}

.formx-flow-meeting{
  position:relative;
  min-width:0;
  padding:24px 14px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(6,27,61,.24);
  border-radius:18px;
  background:rgba(255,255,255,.90);
  text-align:center;
}

.formx-flow-meeting::before,
.formx-flow-meeting::after{
  content:"";
  position:absolute;
  left:-27px;
  width:27px;
  height:2px;
  background:rgba(6,27,61,.28);
}

.formx-flow-meeting::before{
  top:29%;
}

.formx-flow-meeting::after{
  top:71%;
  background:rgba(8,109,243,.55);
}

.formx-flow-meeting h3{
  margin:0 0 22px;
  color:var(--navy);
  font-family:var(--serif);
  font-size:25px;
}

.formx-flow-meeting img{
  width:82px;
  height:82px;
  margin-bottom:20px;
  object-fit:contain;
}

.formx-flow-meeting p{
  margin:0;
  color:var(--navy);
  font-size:13px;
  line-height:1.8;
  font-weight:700;
}

.formx-flow-compare__point{
  max-width:1500px;
  margin:24px auto 0;
  padding:14px 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  border:1px solid rgba(8,109,243,.28);
  border-radius:16px;
  color:var(--blue);
  background:rgba(255,255,255,.86);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.8;
  text-align:center;
}

.formx-flow-compare__bulb{
  flex:0 0 auto;
  font-size:24px;
}

@media screen and (max-width:1280px){
  .formx-flow-layout{
    grid-template-columns:minmax(0,1fr) 140px;
    gap:20px;
  }

  .formx-flow-lane__steps{
    gap:5px;
  }

  .formx-flow-card{
    min-height:205px;
    padding-right:7px;
    padding-left:7px;
  }

  .formx-flow-card img{
    width:56px;
    height:56px;
  }

  .formx-flow-card h3{
    font-size:14px;
  }

  .formx-flow-card p,
  .formx-flow-card ul{
    font-size:10px;
  }

  .formx-flow-arrow{
    flex-basis:18px;
    font-size:23px;
  }
}

@media screen and (max-width:1036px){
  .formx-flow-compare{
    padding-top:10px;
    padding-bottom:42px;
  }

  .formx-flow-compare__lead{
    margin-top:28px;
    font-size:14px;
  }

  .formx-flow-layout{
    grid-template-columns:1fr;
    gap:18px;
    max-width:720px;
  }

  .formx-flow-lane{
    padding:54px 14px 16px;
  }

  .formx-flow-lane__steps{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  .formx-flow-card{
    min-height:auto;
    padding:17px 14px;
  }

  .formx-flow-card--human{
    min-height:auto;
  }

  .formx-flow-card img{
    width:60px;
    height:60px;
    margin-top:4px;
  }

  .formx-flow-card h3{
    font-size:16px;
  }

  .formx-flow-card p,
  .formx-flow-card ul{
    font-size:12px;
  }

  .formx-flow-arrow{
    width:100%;
    transform:rotate(90deg);
    font-size:24px;
  }

  .formx-flow-meeting{
    padding:22px 18px;
  }

  .formx-flow-meeting::before,
  .formx-flow-meeting::after{
    display:none;
  }

  .formx-flow-meeting img{
    width:70px;
    height:70px;
  }

  .formx-flow-compare__point{
    padding:13px 16px;
    font-size:14px;
  }
}

@media screen and (max-width:767px){
  .formx-flow-compare__lead{
    margin-bottom:20px;
    font-size:13px;
    text-align:left;
  }

  .formx-flow-lane__label{
    min-width:160px;
    font-size:14px;
  }

  .formx-flow-meeting h3{
    font-size:22px;
  }

  .formx-flow-meeting p{
    font-size:12px;
  }

  .formx-flow-compare__point{
    align-items:flex-start;
    font-size:13px;
    text-align:left;
  }
}



/* =========================================================
   RESPONSE RATE
   反応率で見るFormX
========================================================= */

.formx-response{
  position:relative;
  padding-top:18px;
  padding-bottom:44px;
}

.formx-response__lead{
  margin:34px 0 26px;
  color:var(--navy);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.8;
  text-align:center;
}

.formx-response__grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:30px;
  max-width:1450px;
  margin:0 auto;
  align-items:stretch;
}

.formx-response-chart{
  position:relative;
  min-width:0;
  padding:30px 32px 28px;
  border:1px solid rgba(6,27,61,.13);
  border-radius:20px;
  background:rgba(255,255,255,.88);
}

.formx-response-chart__label{
  display:inline-block;
  margin-bottom:26px;
  padding:9px 18px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(100deg,#123f91 0%,#0874ed 100%);
  font-size:15px;
  font-weight:700;
}

.formx-response-chart__body{
  position:relative;
  padding-right:138px;
}

.formx-response-rate{
  display:grid;
  grid-template-columns:185px minmax(0,1fr);
  align-items:end;
  gap:20px;
  margin-bottom:30px;
}

.formx-response-rate__text span{
  display:block;
  margin-bottom:8px;
  color:#526078;
  font-size:17px;
  font-weight:700;
}

.formx-response-rate__text strong{
  display:block;
  color:#53606f;
  font-family:var(--serif);
  font-size:68px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.04em;
}

.formx-response-rate--formx .formx-response-rate__text span,
.formx-response-rate--formx .formx-response-rate__text strong{
  color:var(--blue);
}

.formx-response-rate__text small{
  margin-left:4px;
  font-family:var(--sans);
  font-size:24px;
  font-weight:700;
}

.formx-response-rate__bar-wrap{
  padding-bottom:8px;
}

.formx-response-rate__bar{
  position:relative;
  height:34px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(6,27,61,.08);
}

.formx-response-rate__bar span{
  display:block;
  width:var(--rate-width);
  height:100%;
  min-width:18px;
  border-radius:inherit;
  background:#aeb9c8;
}

.formx-response-rate--formx .formx-response-rate__bar span{
  background:linear-gradient(90deg,#086df3 0%,#28a8ff 100%);
  box-shadow:0 6px 16px rgba(8,109,243,.16);
}

.formx-response-axis{
  margin-left:205px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  color:#526078;
  font-size:11px;
}

.formx-response-axis span{
  position:relative;
  text-align:center;
}

.formx-response-axis span::before{
  content:"";
  position:absolute;
  top:-170px;
  left:50%;
  width:1px;
  height:155px;
  background:rgba(6,27,61,.08);
}

.formx-response-multiplier{
  position:absolute;
  top:50%;
  right:4px;
  width:122px;
  height:122px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,#123f91 0%,#0874ed 100%);
  transform:translateY(-50%);
  box-shadow:0 14px 30px rgba(8,109,243,.18);
  text-align:center;
}

.formx-response-multiplier small{
  font-size:11px;
  font-weight:700;
}

.formx-response-multiplier strong{
  margin:4px 0 2px;
  font-family:var(--serif);
  font-size:27px;
  line-height:1;
}

.formx-response-multiplier span{
  font-size:17px;
  font-weight:700;
}

.formx-response-strength{
  min-width:0;
  display:grid;
  gap:18px;
}

.formx-response-strength__copy{
  padding:20px 4px 8px;
}

.formx-response-strength__copy h3{
  margin:0 0 15px;
  color:var(--navy);
  font-family:var(--serif);
  font-size:25px;
  line-height:1.5;
}

.formx-response-strength__copy p{
  margin:0;
  color:var(--navy);
  font-size:15px;
  line-height:2;
}

.formx-response-strength__copy strong{
  color:var(--blue);
}

.formx-response-process{
  padding:22px 18px 20px;
  border:1px solid rgba(8,109,243,.18);
  border-radius:16px;
  background:rgba(247,251,255,.82);
}

.formx-response-process h3{
  margin:0 0 18px;
  color:var(--blue);
  font-size:15px;
  text-align:center;
}

.formx-response-process__steps{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:6px;
}

.formx-response-process__steps div{
  min-width:0;
  flex:1 1 0;
  text-align:center;
}

.formx-response-process__steps img{
  width:52px;
  height:52px;
  margin:0 auto 8px;
  object-fit:contain;
}

.formx-response-process__steps span{
  display:block;
  color:var(--navy);
  font-size:10px;
  line-height:1.55;
  font-weight:700;
}

.formx-response-process__steps b{
  flex:0 0 auto;
  color:var(--blue);
  font-size:18px;
}

.formx-response-quality{
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:16px;
  border:1px solid rgba(8,109,243,.18);
  border-radius:16px;
  background:rgba(255,255,255,.86);
}

.formx-response-quality__icon{
  width:54px;
  height:54px;
  flex:0 0 54px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,#123f91 0%,#0874ed 100%);
  font-size:27px;
  font-weight:700;
}

.formx-response-quality p{
  margin:0;
  color:var(--navy);
  font-size:13px;
  line-height:1.8;
}

.formx-response-quality strong{
  color:var(--blue);
}

.formx-response-conclusion{
  max-width:1450px;
  margin:24px auto 0;
  padding:18px 26px;
  display:flex;
  align-items:center;
  gap:20px;
  border:1px solid rgba(8,109,243,.20);
  border-radius:17px;
  background:rgba(255,255,255,.86);
}

.formx-response-conclusion__icon{
  width:58px;
  height:58px;
  flex:0 0 58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,#123f91 0%,#0874ed 100%);
  font-size:24px;
}

.formx-response-conclusion p{
  margin:0;
  color:var(--navy);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.85;
}

.formx-response-conclusion strong{
  color:var(--blue);
  font-size:21px;
}

@media screen and (max-width:1100px){
  .formx-response__grid{
    grid-template-columns:1fr;
    max-width:820px;
  }

  .formx-response-chart__body{
    padding-right:128px;
  }

  .formx-response-strength,
  .formx-response-conclusion{
    max-width:820px;
  }
}

@media screen and (max-width:767px){
  .formx-response{
    padding-top:8px;
    padding-bottom:42px;
  }

  .formx-response__lead{
    margin:28px 0 20px;
    font-size:14px;
    text-align:left;
  }

  .formx-response-chart{
    padding:22px 14px 20px;
  }

  .formx-response-chart__label{
    margin-bottom:22px;
    font-size:12px;
  }

  .formx-response-chart__body{
    padding-right:0;
  }

  .formx-response-rate{
    grid-template-columns:1fr;
    gap:10px;
    margin-bottom:24px;
  }

  .formx-response-rate__text span{
    font-size:14px;
  }

  .formx-response-rate__text strong{
    font-size:48px;
  }

  .formx-response-rate__text small{
    font-size:18px;
  }

  .formx-response-rate__bar{
    height:24px;
  }

  .formx-response-axis{
    margin-left:0;
    font-size:9px;
  }

  .formx-response-axis span::before{
    top:-125px;
    height:112px;
  }

  .formx-response-multiplier{
    position:relative;
    top:auto;
    right:auto;
    width:auto;
    height:auto;
    margin:22px 0 0;
    padding:12px 18px;
    flex-direction:row;
    gap:6px;
    border-radius:999px;
    transform:none;
  }

  .formx-response-multiplier strong{
    font-size:22px;
  }

  .formx-response-multiplier span{
    font-size:14px;
  }

  .formx-response-strength__copy{
    padding:4px 0;
  }

  .formx-response-strength__copy h3{
    font-size:20px;
  }

  .formx-response-strength__copy p{
    font-size:13px;
  }

  .formx-response-process{
    padding:18px 12px;
  }

  .formx-response-process__steps{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  .formx-response-process__steps b{
    transform:rotate(90deg);
  }

  .formx-response-process__steps img{
    width:56px;
    height:56px;
  }

  .formx-response-process__steps span{
    font-size:12px;
  }

  .formx-response-quality{
    align-items:flex-start;
  }

  .formx-response-quality p{
    font-size:12px;
  }

  .formx-response-conclusion{
    padding:16px;
    align-items:flex-start;
    gap:12px;
  }

  .formx-response-conclusion__icon{
    width:44px;
    height:44px;
    flex-basis:44px;
    font-size:18px;
  }

  .formx-response-conclusion p{
    font-size:13px;
  }

  .formx-response-conclusion strong{
    font-size:16px;
  }
}

/* =========================================================
   FORM X CAPABILITIES
   FormXでできること
========================================================= */

.formx-capabilities{
  position:relative;
  padding-top:18px;
  padding-bottom:44px;
}

.formx-capabilities__lead{
  margin:34px auto 26px;
  color:var(--navy);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.8;
  text-align:center;
}

.formx-capabilities__panel{
  max-width:1500px;
  margin:0 auto;
  padding:20px 18px 18px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 18px;
  border:1px solid rgba(8,109,243,.14);
  border-radius:20px;
  background:rgba(255,255,255,.86);
}

.formx-capabilities__phase{
  padding:9px 16px;
  border-radius:10px;
  font-family:var(--serif);
  font-size:17px;
  font-weight:700;
  text-align:center;
}

.formx-capabilities__phase--prepare{
  color:#0b4fa7;
  background:linear-gradient(90deg,rgba(225,239,255,.95),rgba(239,247,255,.95));
}

.formx-capabilities__phase--sales{
  color:#fff;
  background:linear-gradient(100deg,#123f91 0%,#0874ed 100%);
}

.formx-capabilities__steps{
  grid-column:1 / -1;
  display:flex;
  align-items:stretch;
  gap:8px;
}

.formx-capability-card{
  position:relative;
  min-width:0;
  min-height:300px;
  flex:1 1 0;
  padding:18px 12px 16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  border:1px solid rgba(8,109,243,.18);
  border-radius:16px;
  background:rgba(255,255,255,.94);
  text-align:center;
}

.formx-capability-card--sales{
  border-color:rgba(8,109,243,.34);
}

.formx-capability-card__number{
  position:absolute;
  top:12px;
  left:12px;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  background:#176ee9;
  font-size:14px;
  font-weight:700;
}

.formx-capability-card img{
  width:74px;
  height:74px;
  margin:16px auto 14px;
  object-fit:contain;
}

.formx-capability-card h3{
  margin:0 0 14px;
  color:var(--navy);
  font-family:var(--serif);
  font-size:16px;
  line-height:1.45;
}

.formx-capability-card p{
  margin:auto 0 0;
  color:#26324a;
  font-size:11px;
  line-height:1.8;
}

.formx-capabilities__arrow{
  align-self:center;
  flex:0 0 20px;
  color:#176ee9;
  font-size:26px;
  font-weight:700;
  text-align:center;
}

.formx-capabilities__arrow--phase{
  color:#086df3;
}

.formx-capabilities__arrow--goal{
  color:#086df3;
}

.formx-capabilities__goal{
  position:relative;
  min-width:145px;
  flex:0 0 145px;
  padding:22px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(8,109,243,.25);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(247,251,255,.96),rgba(255,255,255,.96));
  text-align:center;
}

.formx-capabilities__goal-check{
  position:absolute;
  top:16px;
  right:16px;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #086df3;
  border-radius:50%;
  color:#086df3;
  background:#fff;
  font-size:22px;
  font-weight:700;
}

.formx-capabilities__goal img{
  width:76px;
  height:76px;
  margin:10px auto 10px;
  object-fit:contain;
}

.formx-capabilities__goal strong{
  color:var(--blue);
  font-family:var(--serif);
  font-size:24px;
}

.formx-capabilities__goal p{
  margin:14px 0 0;
  color:var(--navy);
  font-size:11px;
  line-height:1.7;
  font-weight:700;
}

.formx-capabilities__message{
  max-width:1500px;
  margin:22px auto 0;
  padding:16px 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  border:1px solid rgba(8,109,243,.22);
  border-radius:16px;
  background:rgba(255,255,255,.88);
}

.formx-capabilities__message-icon{
  width:52px;
  height:52px;
  flex:0 0 52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:linear-gradient(145deg,#123f91 0%,#0874ed 100%);
  font-size:24px;
}

.formx-capabilities__message p{
  margin:0;
  color:var(--navy);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.8;
}

.formx-capabilities__message strong{
  color:var(--blue);
  font-size:21px;
}

@media screen and (max-width:1250px){
  .formx-capability-card{
    min-height:280px;
    padding-right:8px;
    padding-left:8px;
  }

  .formx-capability-card img{
    width:62px;
    height:62px;
  }

  .formx-capability-card h3{
    font-size:14px;
  }

  .formx-capability-card p{
    font-size:10px;
  }

  .formx-capabilities__arrow{
    flex-basis:14px;
    font-size:21px;
  }

  .formx-capabilities__goal{
    min-width:120px;
    flex-basis:120px;
  }
}

@media screen and (max-width:1036px){
  .formx-capabilities{
    padding-top:10px;
    padding-bottom:42px;
  }

  .formx-capabilities__lead{
    margin-top:28px;
    font-size:14px;
  }

  .formx-capabilities__panel{
    max-width:720px;
    grid-template-columns:1fr;
    gap:10px;
  }

  .formx-capabilities__phase{
    display:none;
  }

  .formx-capabilities__steps{
    grid-column:auto;
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
  }

  .formx-capability-card{
    min-height:auto;
    padding:18px 14px;
  }

  .formx-capability-card img{
    width:64px;
    height:64px;
    margin-top:8px;
  }

  .formx-capability-card h3{
    font-size:17px;
  }

  .formx-capability-card p{
    margin-top:0;
    font-size:12px;
  }

  .formx-capabilities__arrow{
    width:100%;
    transform:rotate(90deg);
    font-size:24px;
  }

  .formx-capabilities__goal{
    min-width:0;
    width:100%;
    min-height:auto;
    padding:22px 18px;
  }

  .formx-capabilities__goal img{
    width:68px;
    height:68px;
  }

  .formx-capabilities__message{
    max-width:720px;
  }
}

@media screen and (max-width:767px){
  .formx-capabilities__lead{
    margin-bottom:20px;
    font-size:13px;
    text-align:left;
  }

  .formx-capabilities__panel{
    padding:14px 12px;
  }

  .formx-capability-card h3{
    font-size:16px;
  }

  .formx-capability-card p{
    font-size:11px;
  }

  .formx-capabilities__message{
    align-items:flex-start;
    padding:14px;
    gap:12px;
  }

  .formx-capabilities__message-icon{
    width:44px;
    height:44px;
    flex-basis:44px;
    font-size:20px;
  }

  .formx-capabilities__message p{
    font-size:13px;
  }

  .formx-capabilities__message strong{
    font-size:16px;
  }
}

/* =========================================================
   FORM X 4STEP — sales journey update
========================================================= */

.formx-steps__lead{
  max-width:980px;
  margin:34px auto 26px;
  color:var(--navy);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.8;
  text-align:center;
}

.formx-steps .step-grid{
  max-width:1320px;
  margin:0 auto;
  grid-template-columns:
    minmax(0,1fr) 42px
    minmax(0,1fr) 42px
    minmax(0,1fr) 42px
    minmax(0,1fr);
  gap:0;
  align-items:stretch;
}

.formx-steps .step-item{
  min-width:0;
  min-height:300px;
  padding:24px 18px 22px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  border:1px solid rgba(8,109,243,.18);
  border-radius:18px;
  background:rgba(255,255,255,.84);
}

.formx-steps .step-number{
  margin-bottom:14px;
  color:var(--blue);
  font-family:var(--sans);
  font-size:15px;
  font-weight:800;
  letter-spacing:.04em;
}

.formx-steps .step-item img{
  width:82px;
  height:82px;
  margin:0 auto 16px;
  object-fit:contain;
}

.formx-steps .step-item h3{
  margin:0 0 14px;
  color:var(--navy);
  font-family:var(--serif);
  font-size:20px;
  line-height:1.5;
}

.formx-steps .step-item p{
  margin:auto 0 0;
  color:#26324a;
  font-size:13px;
  line-height:1.85;
  text-align:center;
}

.formx-steps .step-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--blue);
  font-size:36px;
  font-weight:700;
}

.formx-steps__point{
  max-width:1320px;
  margin:22px auto 0;
  padding:16px 20px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  border:1px solid rgba(8,109,243,.18);
  border-radius:14px;
  background:rgba(247,251,255,.86);
  text-align:center;
}

.formx-steps__point strong{
  color:var(--blue);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.7;
}

.formx-steps__point span{
  color:var(--navy);
  font-size:13px;
  line-height:1.8;
}

@media screen and (max-width:1036px){
  .formx-steps__lead{
    margin-top:28px;
    font-size:14px;
  }

  .formx-steps .step-grid{
    max-width:720px;
    grid-template-columns:1fr;
    gap:10px;
    border:none;
  }

  .formx-steps .step-item{
    min-height:auto;
    padding:20px 16px;
  }

  .formx-steps .step-arrow{
    transform:rotate(90deg);
    font-size:28px;
  }

  .formx-steps .step-item p{
    margin-top:0;
    font-size:12px;
  }

  .formx-steps__point{
    max-width:720px;
  }
}

@media screen and (max-width:767px){
  .formx-steps__lead{
    margin-bottom:20px;
    font-size:13px;
    text-align:left;
  }

  .formx-steps .step-item h3{
    font-size:18px;
  }

  .formx-steps .step-item p{
    font-size:11px;
  }

  .formx-steps__point{
    align-items:flex-start;
    padding:14px;
    text-align:left;
  }

  .formx-steps__point strong{
    font-size:15px;
  }

  .formx-steps__point span{
    font-size:12px;
  }
}

/* =========================================================
   FORM X REASONS — text-only final
========================================================= */

.formx-reasons{
  padding-left:44px;
  border-left:1px solid var(--line);
}

.formx-reasons__list{
  padding:8px 0 0;
  margin:0;
  list-style:none;
}

.formx-reasons__item{
  position:relative;
  margin-bottom:28px;
  padding-left:58px;
}

.formx-reasons__item::before{
  content:"✓";
  position:absolute;
  top:2px;
  left:0;
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,#123f91 0%,#0874ed 100%);
  font-size:21px;
  font-weight:700;
  box-shadow:0 8px 18px rgba(8,109,243,.14);
}

.formx-reasons__content h3{
  margin:0 0 8px;
  color:var(--blue);
  font-family:var(--serif);
  font-size:20px;
  line-height:1.55;
}

.formx-reasons__content p{
  margin:0;
  color:var(--navy);
  font-size:14px;
  line-height:1.9;
}

@media screen and (max-width:1036px){
  .formx-reasons{
    padding-left:0;
    border-left:none;
  }

  .formx-reasons__item{
    margin-bottom:24px;
    padding-left:54px;
  }

  .formx-reasons__item::before{
    width:40px;
    height:40px;
    font-size:20px;
  }

  .formx-reasons__content h3{
    font-size:18px;
  }

  .formx-reasons__content p{
    font-size:13px;
  }
}

@media screen and (max-width:767px){
  .formx-reasons__item{
    margin-bottom:22px;
    padding-left:50px;
  }

  .formx-reasons__item::before{
    width:36px;
    height:36px;
    font-size:18px;
  }

  .formx-reasons__content h3{
    font-size:16px;
  }

  .formx-reasons__content p{
    font-size:12px;
    line-height:1.8;
  }
}

/* =========================================================
   FINAL CTA
   人が動くのは、商談から。
========================================================= */

.formx-cta--final{
  padding:52px 0 54px;
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.78) 0%,
      rgba(244,250,255,.88) 44%,
      rgba(229,242,255,.96) 100%
    ),
    url("../img/FormX/formx-wave.png") center bottom / cover;
}

.formx-cta--final .formx-cta__message{
  max-width:1050px;
  margin:0 auto 28px;
  text-align:center;
}

.formx-cta--final .formx-cta__message h2{
  position:relative;
  margin:0 0 34px;
  color:var(--navy);
  font-family:var(--serif);
  font-size:clamp(34px,3.2vw,54px);
  font-weight:500;
  line-height:1.45;
  letter-spacing:.04em;
}

.formx-cta--final .formx-cta__message h2::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-14px;
  width:72px;
  height:4px;
  border-radius:999px;
  background:var(--blue);
  transform:translateX(-50%);
}

.formx-cta--final .formx-cta__message p{
  margin:0;
  color:var(--navy);
  font-family:var(--serif);
  font-size:18px;
  line-height:2;
  text-align:center;
}

.formx-cta--final > .formx-inner > a{
  width:min(100%,650px);
  min-height:80px;
  margin:0 auto;
  padding:0 34px;
  display:grid;
  grid-template-columns:42px 1fr 36px;
  align-items:center;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(100deg,#123f91 0%,#0874ed 100%);
  text-decoration:none;
  box-shadow:0 14px 30px rgba(6,75,190,.22);
  transition:transform .2s ease, box-shadow .2s ease;
}

.formx-cta--final > .formx-inner > a:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(6,75,190,.28);
}

.formx-cta--final > .formx-inner > a strong{
  font-family:var(--serif);
  font-size:28px;
  font-weight:500;
  text-align:center;
}

.formx-cta--final > .formx-inner > a span:last-child{
  font-size:34px;
}

@media screen and (max-width:767px){
  .formx-cta--final{
    padding:38px 0 42px;
  }

  .formx-cta--final .formx-cta__message{
    margin-bottom:24px;
  }

  .formx-cta--final .formx-cta__message h2{
    margin-bottom:30px;
    font-size:clamp(27px,8vw,34px);
  }

  .formx-cta--final .formx-cta__message h2::after{
    width:54px;
    height:3px;
  }

  .formx-cta--final .formx-cta__message p{
    font-size:13px;
    line-height:1.9;
  }

  .formx-cta--final .formx-cta__message p br{
    display:none;
  }

  .formx-cta--final > .formx-inner > a{
    min-height:62px;
    padding:0 22px;
    grid-template-columns:28px 1fr 26px;
  }

  .formx-cta--final > .formx-inner > a strong{
    font-size:20px;
  }

  .formx-cta--final > .formx-inner > a span:last-child{
    font-size:28px;
  }
}