/* ============================================================
   無料LLMO診断ページ (申込フォーム) リニューアル
   正本デザイン: Figma 569:4961 / 1440幅 / コンテンツ 1100px
   共通トークン: base.css / ヒーロー・見出し は service-detail.css を流用
   関連ページ は top-11-next.css を流用
   ============================================================ */

.nv-diag{
  --nv-latin:'Montserrat','Inter',var(--nv-font);
  --nv-svc-muted:#5B6B82;
  --nv-svc-line:#D9D9D9;
}

/* ============================================================
   2カラム (フォーム + 情報)
   ============================================================ */
.nv-diag-body{
  background:var(--nv-white);
  padding-block:64px;
}
.nv-diag-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 400px;
  gap:40px;
  align-items:start;
}

/* ---- フォームカード ---- */
.nv-diag-form{
  padding:36px;
  background:var(--nv-base);
  border-radius:14px;
}
.nv-diag-form__title{
  margin:0;
  font-size:26px;
  line-height:1.4;
  font-weight:700;
  color:var(--nv-text);
}
.nv-diag-form__lead{
  margin:12px 0 28px;
  font-size:14px;
  line-height:1.8;
  color:var(--nv-svc-muted);
}

/* 送信結果の通知 (contact-form.css の .nv-cform-notice と同トーン) */
.nv-diag-notice{
  margin:0 0 24px;
  padding:14px 20px;
  border-radius:8px;
  font-size:14px;
  line-height:1.7;
  letter-spacing:.02em;
}
.nv-diag-notice--ok{background:var(--nv-base);border:1px solid var(--nv-main);color:var(--nv-text)}
.nv-diag-notice--ng{background:#FDECEC;border:1px solid #E5484D;color:#B4232A}

/* フィールド (静的フォーム & CF7 共通) */
.nv-diag-field{margin-bottom:20px}
.nv-diag-label{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:8px;
  font-size:14px;
  font-weight:700;
  color:var(--nv-text);
}
.nv-diag-req{
  display:inline-flex;
  align-items:center;
  padding:1px 8px;
  border-radius:4px;
  background:var(--nv-main);
  color:var(--nv-white);
  font-size:11px;
  font-weight:700;
}
.nv-diag-opt{
  font-size:11px;
  font-weight:400;
  color:var(--nv-svc-muted);
}
.nv-diag-input,
.nv-diag-form .wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]){
  width:100%;
  height:53px;
  padding:0 16px;
  background:var(--nv-white);
  border:1px solid var(--nv-svc-line);
  border-radius:8px;
  font-family:var(--nv-font);
  font-size:15px;
  color:var(--nv-text);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.nv-diag-input::placeholder{color:#C0C0C0}
.nv-diag-input:focus,
.nv-diag-form .wpcf7-form-control:focus{
  outline:none;
  border-color:var(--nv-main);
  box-shadow:0 0 0 3px rgba(42,103,212,.12);
}
select.nv-diag-input{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232A67D4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  padding-right:44px;
  color:#7a869a;
}
.nv-diag-note{
  margin:6px 0 0;
  font-size:12px;
  line-height:1.6;
  color:var(--nv-svc-muted);
}

/* 同意チェック */
.nv-diag-consent{
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 0 24px;
  font-size:14px;
  color:var(--nv-text);
}
.nv-diag-consent input{width:20px;height:20px;accent-color:var(--nv-main)}
.nv-diag-consent a{color:var(--nv-main);text-decoration:underline}

/* 送信ボタン */
.nv-diag-submit,
.nv-diag-form .wpcf7-submit{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  height:72px;
  border:0;
  border-radius:10px;
  background:var(--nv-main);
  color:var(--nv-white);
  font-family:var(--nv-font);
  font-size:18px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.nv-diag-submit:hover,
.nv-diag-form .wpcf7-submit:hover{background:var(--nv-main-dark,#1f4fac);transform:translateY(-1px)}
.nv-diag-submit__note{
  margin:14px 0 0;
  text-align:center;
  font-size:12px;
  color:var(--nv-svc-muted);
}

/* ============================================================
   情報カード「無料診断で分かること」
   ============================================================ */
.nv-diag-info{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.nv-diag-info__head{
  display:flex;
  align-items:flex-start;
  gap:14px;
}
.nv-diag-info__title{
  position:relative;
  margin:0;
  padding-left:14px;
  font-size:24px;
  line-height:1.45;
  font-weight:700;
  color:var(--nv-text);
}
.nv-diag-info__title::before{
  content:"";
  position:absolute;left:0;top:4px;bottom:4px;
  width:4px;border-radius:4px;
  background:linear-gradient(180deg,#2A67D4,#4EB1EA);
}
/* イラストは Figma 書き出し (PC 144x88 / SP 96x59) */
.nv-diag-info__ico{margin-left:auto;flex-shrink:0}
.nv-diag-info__ico img{display:block;width:144px;height:auto}
.nv-diag-checks{
  display:flex;
  flex-direction:column;
}
.nv-diag-checks li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:14px 0;
  font-size:14px;
  line-height:1.6;
  color:var(--nv-text);
}
.nv-diag-checks li + li{border-top:1px solid #EEF1F4}
/* チェックは Figma 書き出し SVG (青丸ごと 24x24) */
.nv-diag-checks__ico{
  flex-shrink:0;
  display:inline-flex;
  width:24px;height:24px;
}
.nv-diag-checks__ico img{display:block;width:24px;height:24px}
/* 所要時間 ミニカード */
.nv-diag-time{
  padding:20px 22px;
  border:1px solid var(--nv-svc-line);
  border-radius:12px;
}
.nv-diag-time__h{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:700;
  color:var(--nv-svc-muted);
}
.nv-diag-time__h img{display:block;width:24px;height:24px} /* Figma 書き出し (PC 24 / SP 20) */
.nv-diag-time__v{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid #EEF1F4;
  font-size:15px;
  font-weight:700;
  color:var(--nv-text);
}
.nv-diag-time__num{
  font-family:var(--nv-latin);
  font-size:40px;
  font-style:italic;
  font-weight:700;
  color:var(--nv-main);
  line-height:1;
  margin-right:4px;
}

/* ============================================================
   FLOW 3ステップ (横並び + 矢印)
   ============================================================ */
.nv-diag-flow{
  background:#F1F2F4;
  padding-block:80px;
}
.nv-diag-flow__list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:stretch;
}
.nv-diag-step{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:32px 24px 28px;
  background:var(--nv-white);
  border-radius:12px;
  box-shadow:0 6px 18px rgba(31,58,95,.05);
}
/* カード間の矢印 (Figma 書き出し: 下向き 32x32 → PC は -90° で右向きに) */
.nv-diag-step:not(:last-child)::after{
  content:"";
  position:absolute;
  right:-28px;top:50%;
  width:32px;height:32px;
  background:url("../../images/diagnosis/flow-arrow.svg") no-repeat center/contain;
  transform:translateY(-50%) rotate(-90deg);
  z-index:1;
}
.nv-diag-step__no{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border-radius:50%;
  background:var(--nv-main);
  color:var(--nv-white);
  font-family:var(--nv-latin);
  font-size:15px;
  font-style:italic;
  font-weight:700;
}
.nv-diag-step__title{
  margin:16px 0 0;
  font-size:18px;
  font-weight:700;
  color:var(--nv-text);
}
.nv-diag-step__ico{
  display:inline-flex;
  margin:16px 0;
}
.nv-diag-step__ico img{display:block;width:48px;height:48px} /* Figma 書き出し (PC 48 / SP 32) */
.nv-diag-step__desc{
  font-size:13px;
  line-height:1.8;
  color:var(--nv-svc-muted);
}

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width:1024px){
  .nv-diag-body{padding-block:48px}
  .nv-diag-layout{grid-template-columns:1fr;gap:32px}
  .nv-diag-flow{padding-block:56px}
}
/* FLOW 見出しの SP 専用改行 (PC は 1 行) */
.nv-diag-br{display:none}

/* ---- SP: Figma 687:22474「無料LLMO診断 SP版」(390px / 20px ガター) の REST 実測 ---- */
@media (max-width:767px){
  .nv-diag-br{display:inline}
  .nv-diag-body{padding-block:40px}
  /* SP は「分かること」→「申込フォーム」の順 */
  .nv-diag-layout{gap:40px}
  .nv-diag-info{order:1;gap:16px}
  .nv-diag-form{order:2}

  /* ---- 分かること ---- */
  .nv-diag-info__head{align-items:center;gap:16px}
  .nv-diag-info__title{
    padding-left:16px;
    font-size:20px;
    line-height:1.5;
    letter-spacing:.8px;
  }
  .nv-diag-info__title::before{top:0;bottom:0;border-radius:0}
  .nv-diag-info__ico img{width:96px}
  .nv-diag-checks{margin-top:24px}
  .nv-diag-checks li{
    align-items:flex-start;
    gap:8px;
    padding:12px 0;
    border-bottom:2px solid var(--nv-svc-line);
    font-size:15px;
    line-height:1.5;
    letter-spacing:.6px;
  }
  .nv-diag-checks li:first-child{padding-top:0}
  .nv-diag-checks li + li{border-top:0}
  .nv-diag-checks__ico{width:24px;height:24px}

  /* 所要時間カード */
  .nv-diag-time{
    padding:16px;
    border-width:2px;
    border-radius:8px;
    text-align:center;
  }
  .nv-diag-time__h{
    justify-content:center;
    font-size:18px;
    letter-spacing:.72px;
    color:var(--nv-text);
  }
  .nv-diag-time__h img{width:20px;height:20px}
  .nv-diag-time__v{
    margin-top:8px;
    padding-top:8px;
    border-top:1px solid var(--nv-svc-line);
    font-size:16px;
    letter-spacing:.64px;
  }
  .nv-diag-time__num{
    margin-right:0;
    font-family:var(--nv-font);
    font-size:16px;
    font-style:normal;
    color:var(--nv-text);
  }
  .nv-diag-time__tail{
    font-size:15px;
    font-weight:400;
    letter-spacing:.6px;
  }

  /* ---- 申込フォーム ---- */
  .nv-diag-form{
    padding:24px 16px;
    border-radius:8px;
  }
  .nv-diag-form__title{font-size:20px;line-height:1.5;letter-spacing:.8px}
  .nv-diag-form__lead{
    margin:8px 0 24px;
    font-size:15px;
    line-height:1.5;
    letter-spacing:.6px;
    color:var(--nv-text);
  }
  .nv-diag-field{margin-bottom:12px}
  .nv-diag-label{
    margin-bottom:4px;
    font-size:15px;
    letter-spacing:.6px;
  }
  .nv-diag-req{height:18px;padding:0 8px;font-size:12px}
  .nv-diag-opt{display:none}      /* Figma SP は「(任意)」表記なし (必須バッジの有無で判別) */
  .nv-diag-input,
  .nv-diag-form .wpcf7-form-control:not(.wpcf7-submit):not([type="checkbox"]){
    height:45px;
    border-radius:4px;
    font-size:14px;
  }
  select.nv-diag-input{color:var(--nv-text)}
  .nv-diag-note{
    margin-top:4px;
    font-size:14px;
    line-height:1.5;
    letter-spacing:.56px;
    color:#828282;
  }
  .nv-diag-consent{
    align-items:center;
    gap:8px;
    margin:12px 0 24px;
    font-size:15px;
    letter-spacing:.6px;
  }
  .nv-diag-consent input{width:24px;height:24px}
  .nv-diag-submit,
  .nv-diag-form .wpcf7-submit{
    height:56px;
    border-radius:4px;
    font-size:16px;
    letter-spacing:.64px;
  }
  .nv-diag-submit svg{display:none}   /* Figma SP はテキストのみ */
  .nv-diag-submit__note{
    margin-top:4px;
    text-align:left;
    font-size:14px;
    letter-spacing:.56px;
    color:#828282;
  }

  /* ---- FLOW ---- */
  .nv-diag-flow{padding-block:40px}
  .nv-diag-flow__list{grid-template-columns:1fr;gap:32px}
  .nv-diag-step{
    align-items:flex-start;
    text-align:left;
    padding:16px;
    border-radius:8px;
  }
  .nv-diag-step__no{
    position:absolute;
    left:16px;
    top:16px;
  }
  .nv-diag-step__title{
    align-self:center;
    margin-top:8px;
    letter-spacing:.72px;
  }
  .nv-diag-step__ico{align-self:center;margin:8px 0}
  .nv-diag-step__ico img{width:32px;height:32px}
  .nv-diag-step__desc{
    font-size:14px;
    line-height:1.5;
    letter-spacing:.56px;
    color:var(--nv-text);
  }
  .nv-diag-step:not(:last-child)::after{
    right:50%;top:auto;bottom:-32px;
    transform:translateX(50%);   /* SP は書き出しのまま下向き */
  }
}