@charset "utf-8";
/* =====================================================
   Webサイト制作 業種別LP シリーズ共通スタイル
   （建設・医療クリニック・不動産・製造・物流・SaaS の6本で共用）

   読み込み順： industry-lp-common/style.css
             → website-lp-common/style.css（本ファイル）
             → website-<業種>/style.css

   ※ industry-lp-common は LLMO業種別LP 6本も参照しているため変更しない。
     Webサイト制作シリーズで追加するセクションのスタイルは本ファイルに書く。
   ===================================================== */

/* -----------------------------------------------------
   0-1. セクションの外枠（既存LPと同じ 80px 上下余白）
   ----------------------------------------------------- */
.nw-wlp__sec {
  padding: 80px 0;
  background: #fff;
}
.nw-wlp__sec.is-pale {
  background: #ebf2fa;
}
.nw-wlp__sec.is-gray {
  background: #f7f7f7;
}
.nw-wlp__sec.is-mist {
  background: #f2f5f9;
}
@media (max-width: 768px) {
  .nw-wlp__sec {
    padding: 50px 0;
  }
}

/* -----------------------------------------------------
   0-2. KV見出しのサイズ
   業種名は小さく、サービス名（Webサイト制作）を大きく見せる
   ※LLMO版は業種名が最大。Webサイト制作シリーズは逆にする
   ----------------------------------------------------- */
.nw-ilp-wrap .internal_heroArea .nw-ilp__kv-main {
  margin-top: 20px;
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #1b76df !important;
  margin-bottom: 2px;
}
.nw-ilp-wrap .internal_heroArea .nw-ilp__kv-service {
  font-size: 54px;
  line-height: 1.2;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .nw-ilp-wrap .internal_heroArea .nw-ilp__kv-main {
    font-size: 16px;
  }
  .nw-ilp-wrap .internal_heroArea .nw-ilp__kv-service {
    font-size: 34px;
    line-height: 1.25;
    margin-bottom: 4px;
  }
}

/* -----------------------------------------------------
   0-3. リード文（H2直下の1行説明）
   ----------------------------------------------------- */
.nw-wlp__lead {
  text-align: center;
  font-size: 16px;
  line-height: 1.9;
  margin-top: 16px;
}
@media (max-width: 768px) {
  .nw-wlp__lead {
    font-size: 14px;
    text-align: left;
  }
}

/* -----------------------------------------------------
   1. 制作できるWebサイトの種類（6カード）
   ----------------------------------------------------- */
.nw-wlp__type-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  list-style: none;
  margin-top: 40px;
}
.nw-wlp__type-item {
  width: calc((100% - 48px) / 3);
  background: #fff;
  border: 0;
  border-radius: 8px;
  padding: 28px 24px;
  text-align: center;
}
.nw-wlp__type-icon {
  display: block;
  width: 76px;
  height: 76px;
  margin: 0 auto 16px;
}
@media (max-width: 768px) {
  .nw-wlp__type-icon {
    width: 64px;
    height: 64px;
  }
}
.nw-wlp__type-ttl {
  font-size: 18px;
  font-weight: 700;
  color: #1a294e;
  margin-bottom: 8px;
}
.nw-wlp__type-txt {
  font-size: 14px;
  line-height: 1.85;
  color: #4a5568;
  text-align: left;
}
@media (max-width: 768px) {
  .nw-wlp__type-list {
    gap: 16px;
  }
  .nw-wlp__type-item {
    width: calc((100% - 16px) / 2);
    padding: 20px 16px;
  }
  .nw-wlp__type-ttl {
    font-size: 16px;
  }
  .nw-wlp__type-txt {
    font-size: 13px;
  }
}

/* -----------------------------------------------------
   2. 費用・期間の目安（表）／料金プラン（表）
   ----------------------------------------------------- */
.nw-wlp__table-wrap {
  overflow-x: auto;
  margin-top: 32px;
}
.nw-wlp__table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 15px;
}
.nw-wlp__table th,
.nw-wlp__table td {
  border: 1px solid #e3e3e3;
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
  line-height: 1.8;
}
.nw-wlp__table thead th {
  background: #1a294e;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}
.nw-wlp__table tbody th {
  background: #ebf2fa;
  color: #1a294e;
  font-weight: 700;
  white-space: nowrap;
}
.nw-wlp__table td.is-num {
  text-align: center;
  white-space: nowrap;
  font-weight: 700;
}
.nw-wlp__table-note {
  font-size: 13px;
  color: #6a7280;
  margin-top: 12px;
}
.nw-wlp__sub-ttl {
  font-size: 20px;
  font-weight: 700;
  color: #1a294e;
  text-align: center;
  margin-top: 56px;
}
.nw-wlp__sub-lead {
  font-size: 15px;
  line-height: 1.9;
  color: #1a294e;
  text-align: center;
  margin-top: 8px;
}
@media (max-width: 768px) {
  .nw-wlp__sub-lead {
    font-size: 14px;
    text-align: left;
  }
}
@media (max-width: 768px) {
  .nw-wlp__table {
    font-size: 13px;
    min-width: 640px;
  }
  .nw-wlp__table th,
  .nw-wlp__table td {
    padding: 12px 14px;
  }
  .nw-wlp__sub-ttl {
    font-size: 18px;
    margin-top: 40px;
  }
}

/* -----------------------------------------------------
   8. 制作体制（チーム図）
   左＝NWのプロジェクトチーム（担当ごとに角丸の枠）／右＝貴社
   その間を横線でつなぐ
   ----------------------------------------------------- */
.nw-wlp__team {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}
.nw-wlp__team-nw {
  flex: 1;
  min-width: 0;
  padding: 28px 28px 32px;
  background: #ebf2fa;
  border: 2px solid #1b76df;
  border-radius: 16px;
}
.nw-wlp__team-ttl {
  margin-bottom: 20px;
  color: #1a294e;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
}
.nw-wlp__team-members {
  display: flex;
  justify-content: center;
  gap: 16px;
  list-style: none;
}
.nw-wlp__team-members li {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.nw-wlp__team-role {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 66px;
  margin: 0 auto 10px;
  padding: 10px 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  text-align: center;
  background: #1b76df;
  border: 2px solid #1b76df;
  border-radius: 10px;
}
.nw-wlp__team-task {
  display: block;
  color: #4a5568;
  font-size: 12px;
  line-height: 1.6;
}
.nw-wlp__team-line {
  flex: none;
  width: 56px;
  height: 3px;
  background: #1b76df;
}
.nw-wlp__team-client {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 180px;
  min-height: 110px;
  padding: 20px 16px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  background: #02239b;
  border-radius: 12px;
}
.nw-wlp__team-note {
  margin: 20px auto 0;
  color: #6a7280;
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
}
@media (max-width: 768px) {
  .nw-wlp__team {
    display: block;
  }
  .nw-wlp__team-nw {
    max-width: none;
    padding: 20px 16px 24px;
  }
  .nw-wlp__team-members {
    flex-wrap: wrap;
    gap: 16px 8px;
  }
  .nw-wlp__team-members li {
    flex: none;
    width: calc(50% - 8px);
  }
  .nw-wlp__team-line {
    display: block;
    width: 3px;
    height: 32px;
    margin: 0 auto;
  }
  .nw-wlp__team-client {
    width: 160px;
    min-height: 76px;
    margin: 0 auto;
    font-size: 20px;
  }
  .nw-wlp__team-note {
    text-align: left;
  }
}

/* -----------------------------------------------------
   9. 関連するサービス（内部リンク）
   ----------------------------------------------------- */
.nw-wlp__linkmap {
  display: flex;
  gap: 24px;
  margin-top: 40px;
}
.nw-wlp__linkmap-col {
  flex: 1;
  background: #fff;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 24px 26px;
}
.nw-wlp__linkmap-ttl {
  font-size: 16px;
  font-weight: 700;
  color: #1a294e;
  padding-bottom: 10px;
  border-bottom: 2px solid #1b76df;
}
.nw-wlp__linkmap-list {
  list-style: none;
  margin-top: 14px;
}
.nw-wlp__linkmap-list li + li {
  margin-top: 10px;
}
/* リンクが多い列は2カラムに */
.nw-wlp__linkmap-col.is-wide {
  flex: 1.6;
}
.nw-wlp__linkmap-list.is-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
}
.nw-wlp__linkmap-list.is-2col li + li {
  margin-top: 0;
}
@media (max-width: 768px) {
  .nw-wlp__linkmap-list.is-2col {
    grid-template-columns: 1fr;
  }
}
.nw-wlp__linkmap-list a {
  font-size: 15px;
  line-height: 1.7;
  color: #1b76df;
  text-decoration: underline;
  display: inline-block;
}
@media (max-width: 768px) {
  .nw-wlp__linkmap {
    display: block;
  }
  .nw-wlp__linkmap-col + .nw-wlp__linkmap-col {
    margin-top: 20px;
  }
}

/* -----------------------------------------------------
   10. ご対応エリア
   ----------------------------------------------------- */
.nw-wlp__area {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  margin-top: 40px;
}
.nw-wlp__area-img {
  width: 44%;
  flex: none;
}
.nw-wlp__area-img img {
  width: 100%;
  height: auto;
  display: block;
}
.nw-wlp__area-body {
  flex: 1;
}
.nw-wlp__area-ttl {
  font-size: 18px;
  font-weight: 700;
  color: #1a294e;
}
.nw-wlp__area-ttl + .nw-wlp__area-txt {
  margin-top: 8px;
}
.nw-wlp__area-txt {
  font-size: 15px;
  line-height: 1.9;
}
.nw-wlp__area-txt + .nw-wlp__area-ttl {
  margin-top: 28px;
}
.nw-wlp__area-txt b {
  color: #1a294e;
}
@media (max-width: 768px) {
  .nw-wlp__area {
    display: block;
  }
  .nw-wlp__area-img {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 24px;
  }
}

/* -----------------------------------------------------
   11. 「〜とは？」内の箇条書き
   ----------------------------------------------------- */
.nw-wlp__about-box {
  margin: 20px 0 24px;
  padding: 26px 30px;
  background: #f1f6fc; /* #ebf2fa を白側へ30%寄せた濃さ */
  border-radius: 12px;
}
.nw-wlp__about-box-ttl {
  margin-bottom: 18px;
  color: #1a294e;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}
.nw-wlp__about-box .nw-wlp__about-list {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .nw-wlp__about-box {
    padding: 20px 18px;
  }
  .nw-wlp__about-box-ttl {
    font-size: 16px;
  }
}
.nw-wlp__about-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 36px;
  margin: 0 0 24px;
  padding: 0;
  font-size: 15px;
  line-height: 1.9;
  list-style: none;
}
.nw-wlp__about-list li {
  position: relative;
  padding-left: 18px;
}
.nw-wlp__about-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1b76df;
}
.nw-wlp__about-list b {
  color: #1a294e;
}
@media (max-width: 768px) {
  .nw-wlp__about-list {
    grid-template-columns: 1fr;
    gap: 8px;
    font-size: 14px;
  }
}

/* -----------------------------------------------------
   13. メンバー未確定枠（写真差し替え待ち）
   ----------------------------------------------------- */
.nw-wlp__member-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #ebf2fa;
  color: #b6c6dc;
  border-radius: 8px;
}
.nw-wlp__member-ph svg {
  width: 44%;
  height: auto;
}
.nw-wlp__member-tbd .seo-consulting_member_name {
  color: #8a94a6;
}

/* -----------------------------------------------------
   14. ユーティリティ
   ----------------------------------------------------- */
.u-mt40 {
  margin-top: 40px;
}

/* -----------------------------------------------------
   15. 制作事例（performanceSec）
   css/page-corporate-production/page-corporate-production.css から
   該当ルールをそのまま移植（値の変更なし）。
   ※ 課題／提案／成果の caseFlow 系は掲載データがないため未移植
   ----------------------------------------------------- */
.performanceSec {padding:80px 0;line-height:1;background:#f2f5f9}
@media(max-width: 768px) {
  .performanceSec {padding:50px 0}
}
.performanceSec__caseImgArea {display:flex;justify-content:space-between;align-items:flex-end;gap:60px;padding-left:60px}
.performanceSec__caseImgArea img {width:52%;object-fit:contain}
@media(max-width: 768px) {
  .performanceSec__caseImgArea img {width:100%}
}
@media(max-width: 768px) {
  .performanceSec__caseImgArea {flex-direction:column-reverse;padding-left:0}
}
.performanceSec__caseTtl {font-weight:700;font-size:16px;border:1px solid #1b76df;border-radius:30px;overflow:hidden;display:flex;align-items:center;color:#1b76df;width:fit-content;padding-right:14px;margin-bottom:20px}
.performanceSec__caseTtl span {font-size:16px;margin-right:14px;display:block;background:#1b76df;color:#fff;padding:4px 14px}
@media(max-width: 768px) {
  .performanceSec__caseTtl span {font-size:10px}
}
@media(max-width: 768px) {
  .performanceSec__caseTtl {font-size:10px}
}
.performanceSec__caseTtlMain {font-size:26px;font-weight:700;margin-bottom:30px;line-height:1.7}
@media(max-width: 768px) {
  .performanceSec__caseTtlMain {font-size:16px}
}
.performanceSec__caseCommentArea {padding:60px 70px;border-radius:15px;background:#fff}
@media(max-width: 768px) {
  .performanceSec__caseCommentArea {padding:40px 20px}
}
.performanceSec__caseComment {margin-bottom:40px;font-size:18px;font-weight:700}
@media(max-width: 768px) {
  .performanceSec__caseComment {font-size:15px}
}
.performanceSec__caseCompanyList {width:45%;max-width:370px;margin-bottom:10px}
@media(max-width: 768px) {
  .performanceSec__caseCompanyList {width:100%;max-width:100%}
}
.performanceSec__caseCompanyItem {margin-bottom:10px}
.performanceSec__caseCompanyItem:not(:first-child) {border-radius:15px;background:#fff;padding:20px}
.performanceSec__caseCompanyItem:not(:first-child) .performanceSec__caseCompanyTtl {font-weight:bold;font-size:16px;margin-bottom:5px;width:auto;height:auto;border:none;color:#000;display:block}
@media(max-width: 768px) {
  .performanceSec__caseCompanyItem:not(:first-child) .performanceSec__caseCompanyTtl {font-size:14px}
}
.performanceSec__caseCompanyItem:not(:first-child) .performanceSec__caseCompanyTxt {font-size:14px;font-weight:normal}
@media(max-width: 768px) {
  .performanceSec__caseCompanyItem:not(:first-child) .performanceSec__caseCompanyTxt {font-size:12px}
}
.performanceSec__caseCompanyTtl {color:#1b75de;width:145px;height:25px;display:flex;align-items:center;justify-content:center;font-size:12px;border:1px solid #1b75de;border-radius:15px;margin-bottom:5px}
@media(max-width: 768px) {
  .performanceSec__caseCompanyTtl {font-size:10px;width:fit-content;padding:0 15px}
}
.performanceSec__caseCompanyTxt {font-size:20px;font-weight:700}
@media(max-width: 768px) {
  .performanceSec__caseCompanyTxt {font-size:16px}
}
.performanceSec .internal_tips_btn_link {border-color:#1b75de;border-radius:80px}
@media(max-width: 768px) {
  .performanceSec .internal_tips_btn_link {min-width:280px}
}
.performanceSec .internal_tips_btn_text {color:#1b75de;line-height:1.5;border-radius:80px}
/* industry-lp-common がテキスト側に水色ボーダーを当てているため、事例側の青に揃える */
.nw-ilp-wrap .performanceSec .internal_tips_btn_text {border-color:#1b75de}
/* 掲載キャプチャが 1320×580 と既存LP（1146×580）より横長で、52%では小さく見えるため
   左の余白を詰めて画像幅を広げる（右のメタ情報は既存と同じ370pxを維持） */
/* 見出し（caseTtlMain）を載せないため、CASE1タグの位置を120px下げる */
/* CASE1タグを、右のメタ情報1行目（クライアント）と同じ高さに揃える。
   画像は下揃えで上に余白ができるため、その空きにタグを重ねる */
.nw-ilp-wrap .performanceSec__case01 {position:relative}
.nw-ilp-wrap .performanceSec__caseTtl {position:absolute;top:0;left:0;margin:0;z-index:2}
.nw-ilp-wrap .performanceSec .sec-ttl {margin-bottom:60px}
@media (max-width: 768px) {
  .nw-ilp-wrap .performanceSec__caseTtl {position:static;margin:0 0 12px}
}
.nw-ilp-wrap .performanceSec__caseImgArea {padding-left:0;gap:16px}
.nw-ilp-wrap .performanceSec__caseImgArea img {width:67%}
.nw-ilp-wrap .performanceSec__caseCompanyList {max-width:430px}
@media (max-width: 768px) {
  .nw-ilp-wrap .performanceSec__caseImgArea img {width:100%}
}
/* 課題／提案／成果を載せないため、コメント下の余白を詰める */
.performanceSec__caseComment:last-child {margin-bottom:0}
.performanceSec .internal_tips_btn_text span {font-size:16px}
.performanceSec .internal_tips_btn_link::before {background:linear-gradient(to right, #52a0fd 0%, #1B75DE 80%, #1B75DE 100%)}

/* -----------------------------------------------------
   15-2. 「もっと見る」系ボタンの上余白を30pxで統一
   ----------------------------------------------------- */
.nw-ilp-wrap .internal_tips_btn_box {
  margin-top: 30px;
}
.u-mt30 {
  margin-top: 30px;
}

/* -----------------------------------------------------
   15-3. 関連ブログ：見出し上の余白を他セクションと揃える
   ----------------------------------------------------- */
.nw-ilp-wrap .internal_tips {
  padding-top: 80px;
}
@media (max-width: 768px) {
  .nw-ilp-wrap .internal_tips {
    padding-top: 50px;
  }
}

/* -----------------------------------------------------
   16. 制作会社の選び方（バインダーに挟んだ紙）
   ----------------------------------------------------- */
.nw-wlp__binder {
  position: relative;
  max-width: 980px;
  margin: 46px auto 0;
  padding: 40px 22px 22px;
  background: #1a294e;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(26, 41, 78, 0.22);
}
.nw-wlp__binder-clip {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 260px;
  height: 22px;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}
.nw-wlp__binder-clip svg {
  display: block;
  width: 100%;
  height: 100%;
}
.nw-wlp__binder-paper {
  position: relative;
  padding: 36px 40px 32px;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.nw-wlp__binder-paper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0));
}
.nw-wlp__binder-ttl {
  margin-bottom: 20px;
  padding-bottom: 14px;
  color: #1a294e;
  font-weight: 700;
  font-size: 22px;
  text-align: center;
  border-bottom: 2px dashed #cfd8e4;
}
.nw-wlp__check-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 32px;
  list-style: none;
}
.nw-wlp__check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 4px;
  border-bottom: 1px solid #e6ecf4;
}
.nw-wlp__check-icon {
  width: 24px;
  height: 24px;
  flex: none;
  margin-top: 2px;
}
.nw-wlp__check-body {
  display: block;
}
.nw-wlp__check-ttl {
  display: block;
  color: #1a294e;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.6;
}
.nw-wlp__check-txt {
  display: block;
  margin-top: 4px;
  color: #4a5568;
  font-size: 16px;
  line-height: 1.8;
}
/* 2カラムの最終行は下線を出さない */
.nw-wlp__check-item:nth-last-child(-n + 2) {
  border-bottom: none;
}
@media (max-width: 768px) {
  .nw-wlp__binder {
    margin-top: 46px;
    padding: 22px 12px 14px;
  }
  .nw-wlp__binder-clip {
    top: 8px;
    width: 190px;
    height: 18px;
  }
  .nw-wlp__binder-paper {
    padding: 24px 18px 20px;
  }
  .nw-wlp__binder-ttl {
    font-size: 19px;
  }
  .nw-wlp__check-list {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .nw-wlp__check-item {
    padding: 14px 0;
    border-bottom: 1px solid #e6ecf4;
  }
  .nw-wlp__check-item:last-child {
    border-bottom: none;
  }
  .nw-wlp__check-ttl {
    font-size: 16px;
  }
}

/* -----------------------------------------------------
   17. 他社との違い（既存LPの difference と同デザイン）
   ヘッダーの補足行と、3表の行高さ揃えのみ追加
   ----------------------------------------------------- */
.nw-ilp-wrap .difference {
  background: #fff;
}
/* NW列を当シリーズのキーカラーに差し替え（whitehat.cssの既定は赤） */
.nw-ilp-wrap .difference .nw {
  border-color: #1b76df;
}
.nw-ilp-wrap .difference .nw .tbl-ttl {
  background: #1b76df;
}
.nw-ilp-wrap .difference .nw tr:nth-child(2n + 1) td {
  background: rgba(27, 118, 223, 0.06);
}
.nw-wlp__th-sub {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
}
/* 見出しは flex のため、補足行が横並びにならないよう縦積みにする */
.nw-ilp-wrap .difference .tbl-ttl {
  flex-direction: column;
  padding: 8px 10px;
  line-height: 1.4;
}
/* ◎○△× アイコンを120%に */
.nw-ilp-wrap .difference .maru1,
.nw-ilp-wrap .difference .maru2,
.nw-ilp-wrap .difference .sankaku,
.nw-ilp-wrap .difference .batsu {
  padding-left: 42px;
  min-height: 29px;
  background-size: 29px auto !important;
  background-position: 0 1px !important;
}
.nw-ilp-wrap .difference .tbl-wrap td.line2 {
  height: 104px;
}
.nw-ilp-wrap .difference .tbl-wrap td.line3 {
  height: 96px;
}
.nw-ilp-wrap .difference .tbl-wrap td.line4 {
  height: 88px;
}
.nw-ilp-wrap .difference .tbl-wrap td.line5 {
  height: 96px;
}
.nw-ilp-wrap .difference .tbl-wrap td.line6 {
  height: 88px;
}
.nw-ilp-wrap .difference .all-ttl td {
  line-height: 1.6;
}
.nw-wlp__compare-note {
  margin-top: 16px;
  color: #6a7280;
  font-size: 13px;
  line-height: 1.8;
}

/* -----------------------------------------------------
   18. 料金プラン：アコーディオンの＋アイコンを出さない
   （このシリーズは開閉しないため）
   ----------------------------------------------------- */
/* -----------------------------------------------------
   18. 料金プラン（1つの表・1プラン＝1行）
   色味と文字サイズは既存の料金プランを踏襲。
   01（SEO強化プラン）だけ行を大きく見せる。
   ----------------------------------------------------- */
.nw-wlp__plan-scroll {
  overflow-x: auto;
  margin-top: 32px;
}
.nw-wlp__plan-table {
  min-width: 900px;
  background: #fff;
  border: 1px solid #d5e0ef;
  border-radius: 8px;
  overflow: hidden;
}
.nw-wlp__plan-row {
  display: flex;
  align-items: stretch;
  border-top: 1px solid #d5e0ef;
}
.nw-wlp__plan-row:first-child {
  border-top: 0;
}
.nw-wlp__plan-col {
  padding: 20px 22px;
}
.nw-wlp__plan-col--name {
  width: 210px;
  flex: none;
  background: #d3e2f5;
  border-right: 1px solid #d5e0ef;
}
.nw-wlp__plan-col--content {
  flex: 1;
  border-right: 1px solid #d5e0ef;
}
.nw-wlp__plan-col--cost {
  width: 250px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid #d5e0ef;
}
.nw-wlp__plan-col--period {
  width: 160px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* 見出し行 */
.nw-wlp__plan-row--head {
  border-bottom: 3px solid #02239b;
}
.nw-wlp__plan-row--head .nw-wlp__plan-col {
  padding: 12px 22px;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
  background: #1b76df;
  border-right-color: rgba(255, 255, 255, 0.35);
}
.nw-wlp__plan-row--head .nw-wlp__plan-col--period {
  border-right: 0;
}

/* プラン名 */
.nw-wlp__plan-no {
  display: block;
  margin-bottom: 4px;
  color: #1b76df;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
}
.nw-wlp__plan-name {
  display: block;
  color: #1a294e;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
}

/* サービス内容 */
.nw-wlp__plan-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  list-style: none;
}
.nw-wlp__plan-items li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #1a294e;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.6;
}
.nw-wlp__plan-items li::before {
  content: "";
  flex: none;
  display: block;
  width: 10px;
  height: 10px;
  margin-top: 6px;
  background: #1b76df;
  border-radius: 50%;
}
.nw-wlp__plan-desc {
  margin-top: 12px;
  color: #1a294e;
  font-size: 13px;
  line-height: 1.7;
}

/* 費用・契約期間 */
.nw-wlp__plan-price {
  color: #f23160;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}
.nw-wlp__plan-price em {
  font-style: normal;
  font-size: 32px;
  line-height: 1;
}
.nw-wlp__plan-note {
  margin-top: 6px;
  color: #1a294e;
  font-size: 12px;
  line-height: 1.5;
}
.nw-wlp__plan-period {
  color: #02239b;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
}
.nw-wlp__plan-period em {
  font-style: normal;
  font-size: 24px;
  line-height: 1;
}

/* 01 SEO強化プランの行を大きく */
.nw-wlp__plan-row.is-main {
  border-top: 0;
  box-shadow: inset 0 0 0 3px #02239b;
}
.nw-wlp__plan-row.is-main .nw-wlp__plan-col {
  padding-top: 28px;
  padding-bottom: 28px;
}
.nw-wlp__plan-row.is-main .nw-wlp__plan-col--name {
  background: #02239b;
  border-right-color: rgba(255, 255, 255, 0.35);
}
.nw-wlp__plan-row.is-main .nw-wlp__plan-no {
  color: #f8ef00;
  font-size: 14px;
}
.nw-wlp__plan-row.is-main .nw-wlp__plan-name {
  color: #fff;
  font-size: 20px;
}
.nw-wlp__plan-row.is-main .nw-wlp__plan-items li {
  font-size: 15px;
}
.nw-wlp__plan-row.is-main .nw-wlp__plan-price {
  font-size: 16px;
}
.nw-wlp__plan-row.is-main .nw-wlp__plan-price em {
  font-style: normal;
  font-size: 42px;
  line-height: 1;
}
.nw-wlp__plan-row.is-main .nw-wlp__plan-period {
  font-size: 16px;
}
.nw-wlp__plan-row.is-main .nw-wlp__plan-period em {
  font-style: normal;
  font-size: 42px;
  line-height: 1;
}

@media (max-width: 768px) {
  .nw-wlp__plan-scroll {
    overflow-x: visible;
  }
  .nw-wlp__plan-table {
    min-width: 0;
  }
  .nw-wlp__plan-row {
    flex-wrap: wrap;
  }
  .nw-wlp__plan-row--head {
    display: none;
  }
  .nw-wlp__plan-col {
    padding: 16px 18px;
  }
  .nw-wlp__plan-col--name {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid #d5e0ef;
    padding: 12px 18px;
  }
  .nw-wlp__plan-col--content {
    width: 100%;
    flex: none;
    border-right: 0;
    border-bottom: 1px solid #d5e0ef;
  }
  .nw-wlp__plan-col--cost {
    width: 60%;
    flex: none;
  }
  .nw-wlp__plan-col--period {
    width: 40%;
    flex: none;
  }
  .nw-wlp__plan-items {
    gap: 4px 14px;
  }
  .nw-wlp__plan-row.is-main .nw-wlp__plan-col {
    padding-top: 18px;
    padding-bottom: 18px;
  }
  .nw-wlp__plan-row.is-main .nw-wlp__plan-col--name {
    padding: 12px 18px;
  }
  .nw-wlp__plan-row.is-main .nw-wlp__plan-price em,
  .nw-wlp__plan-row.is-main .nw-wlp__plan-period em {
    font-size: 32px;
  }
  .nw-wlp__plan-price em {
    font-size: 26px;
  }
  .nw-wlp__plan-period em {
    font-size: 20px;
  }
}

/* -----------------------------------------------------
   19. メンバー紹介：1名のみ掲載時
   カードのデザインは既存のまま。並びの幅だけカード1枚分に絞る
   ----------------------------------------------------- */
.nw-ilp-wrap .seo-consulting_member_list.is-left3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 768px) {
  .nw-ilp-wrap .seo-consulting_member_list.is-left3 {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------------
   20. 追従サイドCTAのフォーム（静的プレビュー用のダミー表示）
   実装時は formrun 埋め込みに差し替えるため本番CSSには不要
   ----------------------------------------------------- */
.nw-wlp__mockform {
  background: #fff;
  padding: 16px 14px 18px;
  text-align: left;
}
.nw-wlp__mockform-field {
  margin-bottom: 10px;
}
.nw-wlp__mockform-label {
  display: block;
  margin-bottom: 4px;
  color: #1a294e;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
}
.nw-wlp__mockform-label em {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  color: #fff;
  font-style: normal;
  font-size: 9px;
  background: #f23160;
  border-radius: 2px;
}
.nw-wlp__mockform-input {
  display: block;
  padding: 8px 10px;
  color: #aab2bd;
  font-size: 12px;
  line-height: 1.4;
  background: #f7f8fa;
  border: 1px solid #d8dee7;
  border-radius: 3px;
}
.nw-wlp__mockform-input.is-select {
  position: relative;
}
.nw-wlp__mockform-btn {
  display: block;
  margin-top: 14px;
  padding: 12px 8px;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  background: #60c202;
  border-radius: 4px;
  box-shadow: 0 3px 0 #4a9702;
}
.nw-wlp__mockform-note {
  margin-top: 10px;
  color: #8a94a6;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

/* -----------------------------------------------------
   21. お客様の声（recruit_voice）
   css/recruit-production/style.css から該当ルールをそのまま移植
   （採用サイト制作LP／BtoBサイト制作LP／オウンドメディアLPと同じ3カラムカード）
   ----------------------------------------------------- */
.whitehat-wrap .recruit_voice {padding-top:120px;padding-bottom:72px;background:#ebf2fa}
@media(max-width: 768px) {
  .whitehat-wrap .recruit_voice {padding-top:60px}
}
.whitehat-wrap .recruit_voice figcaption {color:#1b76de;font-size:14px;font-weight:700;text-align:center;margin-bottom:30px}
.recruit_voiceList {display:flex;gap:24px}
@media(max-width: 768px) {
  .recruit_voiceList {flex-direction:column}
}
.recruit_voiceItem {background:#fff;width:calc((100% - 24px)/3)}
@media(max-width: 768px) {
  .recruit_voiceItem {width:100%}
}
.recruit_voiceItem a {transition:.4s}
.recruit_voiceItem a:hover {opacity:.6}
.recruit_voiceListName {padding:30px}
.recruit_voiceListTxt {font-weight:700;font-size:14px;color:#000}

/* 掲載画像の縦横比がバラつくため、既存LPと同じ2:1に揃える */
.recruit_voiceListFig img {
  width: 100%;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  display: block;
}
.recruit_voiceListIcon img {
  max-height: 40px;
  width: auto;
  margin: 0 auto 8px;
  display: block;
}

/* -----------------------------------------------------
   22. ご提供の流れ：末尾のOPTION（is-last）が
   セクションからはみ出して次のCTAに重なるのを防ぐ
   ----------------------------------------------------- */
.nw-ilp-wrap .p-nwlp__flow__list {
  display: flow-root;
}
.nw-ilp-wrap .internal_flow.u-bottom {
  padding-bottom: 100px;
}
/* is-last は clear:both のため margin-top が効かない。
   最後のステップ側の下マージンを外して上の余白を詰める */
.nw-ilp-wrap .p-nwlp__flow ul.is-flow_main li:last-child {
  margin-bottom: 0;
}
@media (max-width: 768px) {
  .nw-ilp-wrap .internal_flow.u-bottom {
    padding-bottom: 50px;
  }

}

/* -----------------------------------------------------
   23. ① 参考費用表を料金表のデザインに揃える
   ----------------------------------------------------- */
.nw-wlp__table-wrap.is-plan {
  border: 1px solid #d5e0ef;
  border-radius: 15px;
  /* 角丸のクリップ用。横スクロールは親の .nw-wlp__table-scroll が持つ */
  overflow: hidden;
  background: #fff;
}
.nw-wlp__table.is-plan {
  border-collapse: collapse;
}
.nw-wlp__table.is-plan th,
.nw-wlp__table.is-plan td {
  border: 1px solid #d5e0ef;
  border-top: 0;
  vertical-align: middle;
}
.nw-wlp__table.is-plan thead th {
  background: #1b76df;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
  text-align: center;
}
/* 見出し行の左右端に白い線が出ないように */
.nw-wlp__table.is-plan thead th:first-child {
  border-left: 0;
}
.nw-wlp__table.is-plan thead th:last-child {
  border-right: 0;
}
.nw-wlp__table.is-plan tbody th {
  background: #d3e2f5;
  color: #1a294e;
}
.nw-wlp__table.is-plan tbody th:first-child {
  border-left: 0;
}
.nw-wlp__table.is-plan tbody td:last-child {
  border-right: 0;
}
.nw-wlp__table.is-plan td.is-num {
  color: #1a294e;
}
/* 2段目以降の行区切りを濃く2pxに */
.nw-wlp__table.is-plan tbody tr + tr th,
.nw-wlp__table.is-plan tbody tr + tr td {
  border-top: 2px solid #a5c3e8;
}

/* -----------------------------------------------------
   24. 料金プラン：既存カードを2カラム×3段で並べる
   1件目も他と同じ幅・同じ開閉アイコンにする
   ----------------------------------------------------- */
.nw-ilp-wrap .seo-consulting_price_item:first-child {
  width: calc(50% - 16px);
}
.nw-ilp-wrap .seo-consulting_price_item:first-child .title::before,
.nw-ilp-wrap .seo-consulting_price_item:first-child .title::after {
  display: block;
}
.nw-ilp-wrap .seo-consulting_price_item .title {
  cursor: pointer;
}
@media (max-width: 768px) {
  .nw-ilp-wrap .seo-consulting_price_item:first-child {
    width: 100%;
  }
}

/* -----------------------------------------------------
   25. 料金プランカードの中身
   ・既存CSSの :nth-child(1) li 幅指定（旧マークアップ用）を打ち消す
   ・料金はピンクに
   ----------------------------------------------------- */
.nw-ilp-wrap .seo-consulting_price_item:nth-child(1) li:nth-child(2n-1) {
  width: auto;
}
.nw-ilp-wrap .seo-consulting_price_item .content {
  text-align: left;
}
.nw-ilp-wrap .seo-consulting_price_item .content ul {
  display: block;
  width: 100%;
  margin-bottom: 20px;
}
.nw-ilp-wrap .seo-consulting_price_item li {
  line-height: 1.7;
}
.nw-ilp-wrap .seo-consulting_price_item .price {
  color: #f23160;
}
@media (max-width: 768px) {
  .nw-ilp-wrap .seo-consulting_price_item .content ul {
    display: block;
    width: 100%;
    margin: 0 0 20px;
  }
}

/* -----------------------------------------------------
   26. 料金プラン（p-price-list）
   css/lp/writing.css のベース＋css/ai-writing/style.css の上書きを移植し、
   rem を px に、キーカラーを本シリーズの青に置き換え
   ----------------------------------------------------- */
.l-price-listWrap {
  margin-top: 32px;
}
.p-price-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
}
/* 同じ段の3枚で「価格」「サービス内容」「説明文」「ボタン」の行を揃える */
.p-price-listItem {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  row-gap: 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: none;
}
.p-price-listItemTitle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 61px;
  overflow: hidden;
  text-align: center;
  background: #1b76df;
  border: none;
  border-radius: 10px 10px 0 0;
}
.p-price-listItemTitle span {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #f8ef00;
  font-weight: 700;
  font-size: 14px;
}
/* h3の子なのでpからspanに変更（HTML仕様）。
   .p-price-listItemTitle span（番号バッジ用のabsolute）を拾ってしまうため打ち消す */
.p-price-listItemTitle .p-price-listItemTitleTxt {
  position: static;
  display: block;
}
.p-price-listItemTitleTxt {
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.56;
}
.p-price-listItemPrice {
  padding: 24px 20px 0;
}
.p-price-listItemInnerTitle {
  color: #f23160;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  margin-bottom: 8px;
}
.p-price-listItemInnerTitle strong {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 36px;
  line-height: inherit;
}
.p-price-listItemInnerTitle strong small {
  font-size: 90%;
  font-weight: inherit;
}
.p-price-listItemInnerTerm {
  color: #02239b;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
}
.p-price-listItemInnerList {
  list-style: none;
  margin: 0 20px 14px;
  padding-bottom: 14px;
  border-bottom: 1px dashed #cfd8e4;
}
.p-price-listItemInnerList li {
  position: relative;
  padding-left: 16px;
  color: #1a294e;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  text-align: left;
}
.p-price-listItemInnerList li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1b76df;
}
.p-price-listItemInnerList li + li {
  margin-top: 4px;
}
.p-price-listItemInnerTxt {
  padding: 0 20px;
  color: #363636;
  font-size: 14px;
  font-weight: 300;
  line-height: 1.9;
  text-align: left;
}
.nw-ilp-wrap .l-price-listWrap .btn-cv-wrap {
  align-self: end;
  padding-top: 0;
}
.nw-ilp-wrap .l-price-listWrap .btn-cv-wrap .btn-cv.u-bottom {
  width: 240px;
  height: 53px;
  margin-bottom: 20px;
}
.nw-ilp-wrap .l-price-listWrap .btn-cv-wrap .btn-cv.u-bottom .btn-cv-inner {
  font-size: 14px;
  line-height: 20px;
  padding: 0 16px;
}
.nw-ilp-wrap .l-price-listWrap .btn-cv-wrap .btn-cv.u-bottom::after {
  display: block;
  content: "";
  width: 100%;
  height: 53px;
}
@media (max-width: 768px) {
  .p-price-list {
    display: block;
  }
  .p-price-listItem {
    display: block;
    margin-bottom: 18px;
  }
  .p-price-listItemTitle {
    height: auto;
    padding: 14px 17px;
  }
  .p-price-listItemTitleTxt {
    font-size: 17px;
    line-height: 1.4;
  }
  .p-price-listItemInner {
    padding-bottom: 25px;
  }
  .p-price-listItemInnerTitle strong {
    font-size: 40px;
  }
}

/* -----------------------------------------------------
   27. お悩みカード：中央揃え／1行目と2行目の間を16px詰める
   （LLMO版は5枚・1〜2行混在のため lead に min-height:46px が入っている。
     本シリーズは4枚とも1行なので高さ固定を解除する）
   ----------------------------------------------------- */
.nw-ilp-wrap .internal_worries_comments p {
  align-items: center;
  text-align: center;
}
.nw-ilp-wrap .internal_worries_comments span {
  text-align: center;
}
.nw-ilp-wrap .internal_worries_comments .nw-ilp__worries-lead {
  align-items: center;
  text-align: center;
  min-height: 0;
  margin-bottom: 2px;
}

/* -----------------------------------------------------
   28. 自社実績（見出し・リード・本文・図をひとつの囲みに）
   数値はグラフ画像内にあるためテキストでは繰り返さない
   ----------------------------------------------------- */
.nw-wlp__proof {
  margin-top: 0;
  padding: 40px;
  text-align: left;
}
.nw-wlp__proof .nw-ilp__result-banner-sub {
  text-align: center;
  font-size: 24px;
  margin-bottom: 4px;
}
.nw-wlp__proof .nw-ilp__result-desc {
  text-align: center;
  margin-top: 0;
  margin-bottom: 24px;
}
.nw-wlp__proof .nw-ilp__result-text {
  margin-bottom: 24px;
}
.nw-wlp__proof .nw-ilp__result-text p {
  font-size: 14px;
  line-height: 1.9;
  color: #1a294e;
}
.nw-wlp__proof .nw-ilp__result-text p + p {
  margin-top: 12px;
}
.nw-wlp__proof .nw-ilp__result-graph {
  margin: 0;
}
@media (max-width: 768px) {
  .nw-wlp__proof {
    margin-top: 0;
    padding: 24px 20px;
  }
  .nw-wlp__proof .nw-ilp__result-banner-sub {
    font-size: 19px;
  }
}

/* -----------------------------------------------------
   29. 建設業のWebサイトで押さえるべき設計（一般論の解説）
   ----------------------------------------------------- */
.nw-wlp__design {
  margin-top: 40px;
}
.nw-wlp__design-item {
  padding: 24px 28px;
  background: #fff;
  border-left: 5px solid #1b76df;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 2px 10px rgba(26, 41, 78, 0.06);
}
.nw-wlp__design-item + .nw-wlp__design-item {
  margin-top: 20px;
}
.nw-wlp__design-ttl {
  margin-bottom: 8px;
  color: #1a294e;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
}
.nw-wlp__design-txt {
  color: #4a5568;
  font-size: 15px;
  line-height: 1.95;
}
@media (max-width: 768px) {
  .nw-wlp__design-item {
    padding: 18px 18px;
  }
  .nw-wlp__design-ttl {
    font-size: 16px;
  }
  .nw-wlp__design-txt {
    font-size: 14px;
  }
}

/* -----------------------------------------------------
   30. 「〜とは？」内のサブ見出し（h3）
   LLMO版は中央揃えだが、本シリーズは読み物として左揃え＋青い縦棒にする
   ----------------------------------------------------- */
.nw-ilp-wrap .seo-consulting_about .nw-ilp__sub-ttl {
  margin: 56px 0 16px;
  padding-left: 14px;
  border-left: 5px solid #1b76df;
  text-align: left;
  line-height: 1.5;
}
@media (max-width: 768px) {
  .nw-ilp-wrap .seo-consulting_about .nw-ilp__sub-ttl {
    margin-top: 40px;
    padding-left: 12px;
  }
}

/* -----------------------------------------------------
   31. 「〜とは？」の開閉
   本シリーズは本文量が多く、共通CSSの max-height:2000px では収まらないため広げる
   ----------------------------------------------------- */
.nw-ilp-wrap .nw-ilp__about-readmore.is-open {
  max-height: 6000px;
}
/* 「閉じる」ボタンの上に余白 */
.nw-ilp-wrap .nw-ilp__about-more-wrap {
  margin-top: 40px;
}

/* -----------------------------------------------------
   32. 「〜とは？」の段落間を半分に
   共通CSSは上下40px（＝改行2回分）で空きすぎるため20pxに
   ----------------------------------------------------- */
.nw-ilp-wrap .seo-consulting_about .seo-consulting_about_text {
  margin-top: 20px;
  margin-bottom: 20px;
}
.nw-ilp-wrap .seo-consulting_about .nw-ilp__sub-ttl + .seo-consulting_about_text {
  margin-top: 20px;
}

/* -----------------------------------------------------
   33. 「〜とは？」本文の強調
   共通CSSは20pxに拡大されるが、本シリーズは本文と同じサイズのまま赤太字にする
   ----------------------------------------------------- */
.nw-ilp-wrap .seo-consulting_about .seo-consulting_about_text span {
  font-size: inherit;
}

/* -----------------------------------------------------
   34.「押さえるべき設計」の小見出し（b）を本文より2px大きく
   ----------------------------------------------------- */
.nw-ilp-wrap .seo-consulting_about .seo-consulting_about_text b {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 18px;
  color: #1a294e;
}

/* -----------------------------------------------------
   35. サービスの特徴：段落間の余白を半分に
   （従来は <br><br> で行2つ分あいていた）
   ----------------------------------------------------- */
.nw-ilp-wrap .internal_advantages_info p + p {
  margin-top: 20px;
}

/* -----------------------------------------------------
   34. SP（〜768px）調整
   ----------------------------------------------------- */
@media (max-width: 768px) {
  /* 「〜とは？」本文：行間を詰める（共通CSSの29pxは開きすぎ） */
  .nw-ilp-wrap .seo-consulting_about .seo-consulting_about_text {
    line-height: 27px;
  }
  .nw-ilp-wrap .seo-consulting_about .seo-consulting_about_text span {
    line-height: 27px;
  }
  /* 「〜とは？」内の小見出し -4px */
  .nw-ilp-wrap .seo-consulting_about .nw-ilp__sub-ttl {
    font-size: 18px;
  }
  /* 「閉じる」ボタン上の余白 40px → 16px */
  .nw-ilp-wrap .nw-ilp__about-more-wrap {
    margin-top: 16px;
  }
  /* 中間CTAの見出し -2px（改行が多く1行が窮屈なため） */
  .nw-ilp-wrap .cv .cv-ttl {
    font-size: 20px;
  }
  /* 実績のリード文を左揃え */
  .nw-wlp__proof .nw-ilp__result-desc {
    text-align: left;
  }
  /* お悩みカードのテキストを左揃え */
  .nw-ilp-wrap .internal_worries_comments p,
  .nw-ilp-wrap .internal_worries_comments .nw-ilp__worries-lead {
    align-items: flex-start;
    text-align: left;
  }
  .nw-ilp-wrap .internal_worries_comments span {
    text-align: left;
  }
  /* 費用・料金プランのリード文：左右の余白を他セクションと揃える */
  .nw-ilp-wrap .seo-consulting_price .seo-consulting_price_text {
    padding-left: 0;
    padding-right: 0;
  }
  /* 制作事例：見出しの左余白を本文と揃え、文字サイズを調整 */
  .nw-ilp-wrap .performanceSec__caseCompanyItem:nth-child(n+2) .performanceSec__caseCompanyTtl {
    padding-left: 0;
    padding-right: 0;
    font-size: 16px;
  }
  .nw-ilp-wrap .performanceSec__caseCompanyItem:nth-child(n+2) .performanceSec__caseCompanyTxt {
    font-size: 14px;
  }
  /* サイトの種類カード：見出しが語中で折れないよう収める */
  .nw-wlp__type-item {
    padding-left: 14px;
    padding-right: 14px;
  }
  .nw-wlp__type-ttl {
    font-size: 14px;
    letter-spacing: -0.04em;
  }
  /* ブログ一覧ボタン：「もっと見る」が折れないよう1行に収める */
  .nw-ilp-wrap .internal_tips_btn_text {
    font-size: 15px;
  }
  /* 語中での改行を避け、文節で折り返す */
  .nw-ilp-wrap .internal_hero_lead,
  .nw-ilp-wrap .internal_advantages_info h3,
  .nw-ilp-wrap .nw-ilp__publication-text h3,
  .nw-ilp-wrap .internal_publication_info h3,
  .nw-ilp-wrap .tbl-ttl,
  .nw-wlp__th-sub,
  .nw-wlp__type-ttl {
    word-break: auto-phrase;
  }
  /* 他社との違いの表：本文を12pxに上げ、見出し列を広げて改行を減らす
     4つのテーブルを横並びにする構造のため、行の高さを揃え直している */
  .nw-ilp-wrap .difference .tbl-all-ttl-heads {
    width: 100px;
    min-width: 100px;
    flex: none;
  }
  .nw-ilp-wrap .difference td,
  .nw-ilp-wrap .difference td span {
    font-size: 12px;
  }
  .nw-ilp-wrap .difference .tbl-all-ttl-heads td,
  .nw-ilp-wrap .difference .tbl-all-ttl-heads td span {
    font-size: 14px;
    word-break: auto-phrase;
  }
  .nw-ilp-wrap .difference .tbl-wrap td.line1 { height: 64px; }
  .nw-ilp-wrap .difference .tbl-wrap td.line2 { height: 144px; }
  .nw-ilp-wrap .difference .tbl-wrap td.line3 { height: 144px; }
  .nw-ilp-wrap .difference .tbl-wrap td.line4 { height: 120px; }
  .nw-ilp-wrap .difference .tbl-wrap td.line5 { height: 144px; }
  .nw-ilp-wrap .difference .tbl-wrap td.line6 { height: 126px; }
}

/* -----------------------------------------------------
   35. KVキャッチの黄色マーカー
   既存の .line（youtube/style.css）と同じ #ffd526 を使う
   ----------------------------------------------------- */
.nw-ilp-wrap .nw-ilp__kv-catch .nw-wlp__marker {
  padding-bottom: 1px;
  background: linear-gradient(
    to top,
    #ffd526 0%,
    #ffd526 8px,
    transparent 8px,
    transparent 100%
  );
}
@media (max-width: 768px) {
  .nw-ilp-wrap .nw-ilp__kv-catch .nw-wlp__marker {
    background: linear-gradient(
      to top,
      #ffd526 0%,
      #ffd526 6px,
      transparent 6px,
      transparent 100%
    );
  }
}

/* -----------------------------------------------------
   36. KVカルーセルフォーム：リード文と入力欄の間を詰める
   共通CSS（industry-lp-common）は form 上20px + リスト上20px で計40px
   ----------------------------------------------------- */
.nw-ilp-wrap .s-carousel-form {
  padding-top: 10px;
  padding-bottom: 40px;
}
.nw-ilp-wrap .s-carousel-form__list {
  margin-top: 8px;
}
/* 「戻る／入力項目①②③」の行：上下の余白を20px→12pxに */
.nw-ilp-wrap .s-carousel-form__returnBox {
  margin-top: -8px;
  margin-bottom: 12px;
}

/* -----------------------------------------------------
   37. メンバー紹介の写真に角丸
   旧素材(PNG)は画像自体に角丸が焼き込まれていたが、
   JPGに差し替えたためCSSで付ける
   ----------------------------------------------------- */
.nw-ilp-wrap .seo-consulting_member_img {
  /* 右側はフラット、左側だけ角丸。
     カード(.seo-consulting_member_item)の角丸が15pxなので同じ値にする。
     8pxだとカードの丸みより小さく、角がはみ出して直角に見えていた */
  border-radius: 15px 0 0 15px;
}

/* -----------------------------------------------------
   38. お悩み／解決のイラストまわりの調整（PCのみ）
   お悩み: 表示枠 85% → 76.5%（90%）／カード間 12px → 20px
   解決  : 表示枠は元の168pxのまま、8px左へ寄せる
   SP側の指定（お悩み100px・解決120px）を上書きしないよう min-width で囲む
   ----------------------------------------------------- */
@media (min-width: 769px) {
  .nw-ilp-wrap .internal_worries_comments li img {
    max-width: 76.5%;
  }
}
/* お悩みカードの間隔を12px→20pxに（+8px） */
.nw-ilp-wrap .internal_worries_comments ul {
  gap: 20px;
}
/* 解決のイラストは元のサイズ(168px)のまま、8px左へずらす */
@media (min-width: 769px) {
  .nw-ilp-wrap .internal_worries_benefits_item img {
    margin-left: -8px;
  }
}

/* -----------------------------------------------------
   39. 中間CTAの高さを縮める（PCのみ）
   共通CSSは min-height 440px。上下20pxずつ詰めて400pxに
   SPの360pxは据え置き
   ----------------------------------------------------- */
@media (min-width: 769px) {
  .nw-ilp-wrap .cv {
    min-height: 360px;
  }
}

/* -----------------------------------------------------
   40. 費用・料金プラン：パックプラン非表示時の案内文
   （料金体系の確定後、パックプランを戻す際はこのブロックごと削除可）
   ----------------------------------------------------- */
.nw-wlp__price-note {
  max-width: 820px;
  margin: 40px auto 0;
  color: #1a294e;
  font-size: 16px;
  line-height: 2;
  text-align: center;
}
@media (max-width: 768px) {
  .nw-wlp__price-note {
    margin-top: 28px;
    font-size: 14px;
    line-height: 1.9;
    text-align: left;
  }
}

/* -----------------------------------------------------
   41. 関連ブログ：サムネイルの比率を揃える
   記事ごとにアイキャッチの比率が違い（3:2 と 16:9 が混在）、
   カードの高さがバラつくため 3:2 に統一する。
   industry-lp-common 側に object-fit: cover はあるが
   高さ指定が無く効いていないので、ここで比率だけ足す。
   ----------------------------------------------------- */
.nw-ilp-wrap .internal_tips_item img {
  aspect-ratio: 3 / 2;
}

/* -----------------------------------------------------
   42. ご提供の流れ：右列を24px上げる
   2・4・6・8（偶数）が右カラム。左右を互い違いに見せるため上へずらす。
   レイアウトに影響しないよう transform で動かす（margin だと後続がつられる）
   ----------------------------------------------------- */
@media (min-width: 769px) {
  .nw-ilp-wrap .is-flow_main > li:nth-child(even) {
    transform: translateY(-24px);
  }
}

/* -----------------------------------------------------
   43. メンバー写真：角丸を写真そのものに効かせる
   industry-lp-common が img に padding-left:68px（SP 60px）を当てており、
   写真の中身はその分だけ内側に描かれる。border-radius は外枠にかかるため、
   丸めても写真の角には届かず直角に見えていた。
   padding を同値の margin に置き換えて「要素の箱＝写真」にする。
   width を同じだけ減らすので、表示位置とサイズは変わらない。
   ----------------------------------------------------- */
.nw-ilp-wrap .seo-consulting_member_img {
  padding-left: 0;
  margin-left: 68px;
  width: calc(100% - 68px);
}
@media (max-width: 768px) {
  .nw-ilp-wrap .seo-consulting_member_img {
    margin-left: 60px;
    width: calc(100% - 60px);
  }
}

/* -----------------------------------------------------
   44. メンバー紹介の本文：行間180%／名前との間を10px詰める
   元は line-height 1.7、本文の padding-top 10px。
   padding-top を 0 にして、名前からの余白を 30px → 20px に。
   ----------------------------------------------------- */
.nw-ilp-wrap .seo-consulting_member_txt {
  line-height: 1.8;
  padding-top: 0;
}

/* -----------------------------------------------------
   45. 参考費用表：SPは枠ごと画面端まで動かす
   スクロールを親(.nw-wlp__table-scroll)に移し、枠(.is-plan)は中身として動かす。
   SPでは親を l_inner の左右padding(20px)分はみ出させ、内側に同じ20pxを持たせる。
   これで「開始時は左に余白 → スクロール中は画面端まで → 右端で右に余白」になる。
   余白はスクロール領域の内側なので、枠の中が白く伸びることはない。
   ----------------------------------------------------- */
.nw-wlp__table-scroll {
  overflow-x: auto;
}
.nw-wlp__table-wrap.is-plan {
  /* max-content だとセル内が折り返さず1301pxまで広がるので min-content。
     従来どおり表は640px幅で折り返す。PCは min-width:100% で枠いっぱい */
  width: min-content;
  min-width: 100%;
}
@media (max-width: 768px) {
  .nw-wlp__table-scroll {
    margin: 0 -20px;
    padding: 0 20px;
  }
  /* 表とスクロールバーの間を16px空ける */
  .nw-wlp__table-wrap.is-plan {
    margin-bottom: 16px;
  }
  /* スクロールバーも左右20px内側に収める
     （透明ボーダー＋background-clip で塗りだけを内側に寄せる） */
  .nw-wlp__table-scroll::-webkit-scrollbar {
    height: 6px;
  }
  .nw-wlp__table-scroll::-webkit-scrollbar-track,
  .nw-wlp__table-scroll::-webkit-scrollbar-thumb {
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
  }
  .nw-wlp__table-scroll::-webkit-scrollbar-track {
    background-color: #e3ecf7;
  }
  .nw-wlp__table-scroll::-webkit-scrollbar-thumb {
    background-color: #a5c3e8;
  }
}