@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@600;700&display=swap');

/* 【案件レイヤ】/ad-support/ (Web広告運用支援のLP) のページ固有CSS
   2026-09-19 L-11・C-129: 本文の<style>からこのファイルへ移した。本文のルート要素は .ns-adlp。
   旧版の本文はルートが .ns-adsvc なので、このCSSは旧版の本文には当たらない(配布と本文の入れ替えの順番で崩れない)。
   文字サイズは4段だけ使う: 見出し(--fs-h2) / 小見出し(--fs-h3) / 本文(--fs-body) / 注記(--fs-sm)。
   例外は h1 と、実績・計算結果の大きな数字(--fs-num)。
   色は「広告=青(--ad)」「Webサイト=赤(--web)」で塗り分け、節の背景は白・生成り・紺・濃紺で切り替える。
   CLAUDE.md 4-4: 赤背景のベタ塗り・border-left 装飾・英文eyebrow・装飾アイコンの散らし・::before/::after の文字content は使わない。 */

/* ページタイトル非表示と main の上下余白の除去(自前の全幅セクションで組むページ) */
.entry-header { display: none; }
.site-main { padding-block: 0; }
.swell-block-fullWide__inner > * { margin-bottom: 0 !important; }

.ns-adlp {
	--ink: #15181f;
	--ink2: #3a414c;
	--mut: #646c79;
	--line: #e2e5ea;
	--white: #ffffff;
	--cream: #f7f3ec;
	--cream-line: #e7dfd1;
	--gray: #f2f4f7;
	--navy: #1b2533;
	--navy2: #243145;
	--navy-line: #36445c;
	--red: #c0392b;
	--red-hi: #e8645a;
	--red-soft: #fbeeec;
	--red-line: #f0cfca;
	--ad: #2d5b8c;
	--ad-hi: #8fb4dd;
	--ad-soft: #e9f0f8;
	--ad-line: #cddbeb;
	--fs-h2: clamp(25px, 2.6vw, 34px);
	--fs-h3: clamp(18px, 1.5vw, 20px);
	--fs-body: 16px;
	--fs-sm: 13px;
	--fs-num: clamp(24px, 2.3vw, 30px);
	color: var(--ink);
	font-size: var(--fs-body);
	line-height: 1.85;
	letter-spacing: .02em;
	font-feature-settings: "palt";
	-webkit-font-smoothing: antialiased;
}
@media (max-width: 640px) {
	.ns-adlp { --fs-body: 15px; }
}
/* 初期化は :where() で優先度を「クラス1つ分」にとどめ、下の個別の指定(同じ優先度で後に書く)が必ず勝つようにする。
   .ns-adlp p のように書くと優先度が高くなり、.ns-adlp__lead などの余白が消える(2026-09-19 に実際に起きた) */
.ns-adlp :where(*, *::before, *::after) { box-sizing: border-box; }
.ns-adlp :where(h1, h2, h3, h4) { margin: 0; padding: 0; border: 0; background: none; word-break: auto-phrase; }
.ns-adlp :where(p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
.ns-adlp :where(ul, ol) { list-style: none; }
.ns-adlp :where(a) { text-decoration: none; }
.ns-adlp :where(img) { display: block; max-width: 100%; height: auto; }
.ns-adlp__serif { font-family: 'Noto Serif JP', 'Yu Mincho', 'Hiragino Mincho ProN', serif; }
.ns-adlp__brsp { display: none; }

/* ---------- 共通の骨組みと文字 ---------- */
.ns-adlp__in { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); }
.ns-adlp__sec { padding: clamp(56px, 6vw, 88px) 0; }
.ns-adlp__sec--compact { padding: clamp(44px, 4.5vw, 64px) 0; }
.ns-adlp--white { background: var(--white); }
.ns-adlp--cream { background: var(--cream); }
.ns-adlp--gray { background: var(--gray); }
.ns-adlp--navy { background: var(--navy); color: #e6ebf2; }

.ns-adlp__h2 { font-size: var(--fs-h2); line-height: 1.45; font-weight: 700; letter-spacing: .03em; color: var(--ink); text-wrap: balance; }
/* 端末幅が変わっても必ず2行に収める見出し。行は本文の span で決め、長いほうの行が入る大きさまで文字を詰める
   (--h2max = 長い行の全角文字数。囲みの幅は親の container-type: inline-size で測る・2026-09-20) */
.ns-adlp__h2--fit { font-size: min(var(--fs-h2), calc(100cqi / (var(--h2max, 16) * 1.04))); text-wrap: nowrap; }
.ns-adlp__h2--fit .ln { display: block; white-space: nowrap; }
.ns-adlp__h3 { font-size: var(--fs-h3); line-height: 1.55; font-weight: 700; color: var(--ink); }
.ns-adlp__lead { margin-top: 14px; max-width: 40em; font-size: var(--fs-body); color: var(--ink2); }
.ns-adlp__cap { margin-top: 14px; font-size: var(--fs-sm); line-height: 1.75; color: var(--mut); }
.ns-adlp--navy .ns-adlp__h2,
.ns-adlp--navy .ns-adlp__h3 { color: #fff; }
.ns-adlp--navy .ns-adlp__lead { color: #c2cad6; }
.ns-adlp--navy .ns-adlp__cap { color: #97a3b4; }
.ns-adlp__inline { color: var(--red); font-weight: 700; border-bottom: 1px solid rgba(192, 57, 43, .4); }
.ns-adlp__inline:hover { border-bottom-color: var(--red); }
.ns-adlp--navy .ns-adlp__inline { color: #f3aaa2; border-bottom-color: rgba(243, 170, 162, .5); }

/* 白地の中の囲み(図解をまとめる枠) */
.ns-adlp__box { margin-top: clamp(28px, 3vw, 40px); background: var(--white); border: 1px solid var(--cream-line); border-radius: 20px; padding: clamp(22px, 2.6vw, 36px); }
.ns-adlp__box > p { margin-top: 12px; color: var(--ink2); }
.ns-adlp__box--dark { background: var(--navy2); border-color: var(--navy-line); }
.ns-adlp__box--dark > p { color: #c2cad6; }

/* ボタン */
html:has(#ns-adsvc-form) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(#ns-adsvc-form) { scroll-behavior: auto; } }
.ns-adlp__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 40px; border-radius: 999px; background: var(--red); color: #fff; font-size: var(--fs-body); font-weight: 700; letter-spacing: .05em; line-height: 1.4; text-align: center; box-shadow: 0 14px 28px -16px rgba(192, 57, 43, .85); transition: background .2s, transform .2s; }
.ns-adlp__btn:hover { background: #d24a3d; color: #fff; transform: translateY(-2px); }
.ns-adlp__btn--mid { margin-top: 26px; }

/* ---------- ファーストビュー ---------- */
.ns-adlp__hero { background: radial-gradient(120% 120% at 12% 0%, #232932 0%, #15181f 55%, #0e1116 100%); color: #eef0f3; }
.ns-adlp__hero > .ns-adlp__in:first-child { padding-top: clamp(40px, 5vw, 72px); }
.ns-adlp__hero > .ns-adlp__in:last-child { padding-bottom: clamp(40px, 5vw, 64px); }
.ns-adlp__herogrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 4vw, 60px); align-items: center; }
.ns-adlp__hkick { font-size: var(--fs-sm); font-weight: 700; letter-spacing: .14em; color: #f0a9a4; }
.ns-adlp__h1 { margin-top: 14px; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.35; font-weight: 700; letter-spacing: .03em; color: #fff; }
.ns-adlp__h1 .hl { color: var(--red-hi); white-space: nowrap; }
.ns-adlp__hsub { margin-top: 20px; max-width: 32em; font-size: var(--fs-body); line-height: 1.9; color: #c9ced6; }
.ns-adlp__hcta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 30px; }
.ns-adlp__hlink { color: #f3c2bd; font-size: var(--fs-body); font-weight: 700; border-bottom: 1px solid rgba(243, 194, 189, .5); padding-bottom: 2px; }
.ns-adlp__hlink:hover { color: #fff; border-bottom-color: #fff; }
.ns-adlp__heroimg { border-radius: 20px; overflow: hidden; background: #f4f2f0; box-shadow: 0 30px 60px -32px rgba(0, 0, 0, .75); }
.ns-adlp__heroimg img { width: 100%; aspect-ratio: 4 / 3; }
.ns-adlp__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: clamp(36px, 4vw, 52px); padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .13); }
.ns-adlp__stat .lab { display: block; font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; color: #aab1bc; }
.ns-adlp__stat .val { display: block; margin-top: 6px; font-size: var(--fs-num); font-weight: 700; line-height: 1.25; color: var(--red-hi); }
.ns-adlp__stat .note { display: block; margin-top: 6px; font-size: var(--fs-sm); line-height: 1.6; color: #8e96a2; }
.ns-adlp__hmeta { font-size: var(--fs-sm); line-height: 1.7; color: #a3aab5; }
.ns-adlp__stats + .ns-adlp__hmeta { margin-top: 28px; }
.ns-adlp__hmeta + .ns-adlp__hmeta { margin-top: 4px; }
.ns-adlp__hmeta b { margin-right: 14px; font-weight: 700; color: #e1e5ea; }

/* ---------- 掛け算の等式 ---------- */
.ns-adlp__eq { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(8px, 1.2vw, 16px); align-items: stretch; margin-top: 32px; }
.ns-adlp__eq .op { align-self: center; font-size: 28px; font-weight: 700; line-height: 1; color: var(--mut); }
.ns-adlp__eqc { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 16px; border: 1px solid var(--line); }
.ns-adlp__eqc .who { font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; }
.ns-adlp__eqc .ttl { font-size: var(--fs-h3); font-weight: 700; line-height: 1.5; color: var(--ink); }
.ns-adlp__eqc .dsc { font-size: var(--fs-sm); line-height: 1.75; color: var(--ink2); }
.ns-adlp__eqc--ad { background: var(--ad-soft); border-color: var(--ad-line); }
.ns-adlp__eqc--ad .who { color: var(--ad); }
.ns-adlp__eqc--web { background: var(--red-soft); border-color: var(--red-line); }
.ns-adlp__eqc--web .who { color: var(--red); }
.ns-adlp__eqc--out { background: var(--ink); border-color: var(--ink); }
.ns-adlp__eqc--out .who { color: #f0a9a4; }
.ns-adlp__eqc--out .ttl { color: #fff; }
.ns-adlp__eqc--out .dsc { color: #c6cbd3; }

/* ---------- 計算ボード(C-118) ---------- */
.ns-adlp__calc { margin-top: clamp(28px, 3vw, 40px); padding: clamp(20px, 2.6vw, 36px); background: var(--cream); border: 1px solid var(--cream-line); border-radius: 20px; scroll-margin-top: 72px; }
.ns-adlp__calc > .ns-adlp__cap:first-of-type { margin-top: 8px; }
.ns-adlp__ctrls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 18px); margin-top: 20px; }
.ns-adlp__ctrl { padding: 14px 16px 10px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; }
.ns-adlp__ctrl .cl { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ns-adlp__ctrl .cn { font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; color: var(--ink2); }
.ns-adlp__ctrl .cv { font-size: var(--fs-body); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* つまみは指でも動かせる大きさにする(2026-09-20: 小さくて動かしにくいという指摘) */
.ns-adlp__ctrl input[type="range"] { display: block; width: 100%; height: 36px; margin: 6px 0 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; }
.ns-adlp__ctrl input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: #e6e2dc; }
.ns-adlp__ctrl input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; margin-top: -10px; border-radius: 50%; background: var(--red); border: 3px solid #fff; box-shadow: 0 3px 10px -2px rgba(21, 24, 31, .45); }
.ns-adlp__ctrl input[type="range"]::-moz-range-track { height: 10px; border-radius: 999px; background: #e6e2dc; }
.ns-adlp__ctrl input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--red); border: 3px solid #fff; box-shadow: 0 3px 10px -2px rgba(21, 24, 31, .45); }
.ns-adlp__ctrl input[type="range"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (hover: hover) { .ns-adlp__ctrl input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.06); } }
.ns-adlp__derived { margin-top: 16px; font-size: var(--fs-sm); line-height: 1.9; color: var(--ink2); }
.ns-adlp__derived b { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ns-adlp__bep { margin-top: 16px; padding: clamp(16px, 1.8vw, 22px); background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.ns-adlp__bep .bepnums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.ns-adlp__bep .bn { display: flex; flex-direction: column; gap: 4px; min-width: 0; container-type: inline-size; }
/* ラベルは本文の <wbr> の位置だけで折り返す(語の途中で折れて最終行が1文字になるのを防ぐ・C-126) */
.ns-adlp__bep .bl { font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; color: var(--mut); word-break: keep-all; }
/* 金額は途中で折り返さず、列の幅に収まる大きさまで縮める(スマホで「1,200,000」と「円」が別の行に割れたため・2026-09-20) */
.ns-adlp__bep .bv { font-size: min(var(--fs-num), 13cqi); font-weight: 700; line-height: 1.25; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ns-adlp__bep .bn--key .bl,
.ns-adlp__bep .bn--key .bv { color: var(--red); }
.ns-adlp__bep .bepmsg { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); font-size: var(--fs-body); line-height: 1.85; color: var(--ink2); }
.ns-adlp__scen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(11px, 1.3vw, 17px); margin-top: 18px; }
.ns-adlp__sc { padding: clamp(16px, 1.6vw, 22px); background: var(--white); border: 1px solid var(--line); border-radius: 14px; }
.ns-adlp__sc .sh { display: block; font-size: var(--fs-body); font-weight: 700; line-height: 1.55; color: var(--ink); word-break: keep-all; }
.ns-adlp__sc--ad .sh { color: var(--ad); }
.ns-adlp__sc--best { border-color: var(--red); box-shadow: 0 18px 36px -30px rgba(192, 57, 43, .6); }
.ns-adlp__sc--best .sh { color: var(--red); }
.ns-adlp__sc dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 5px 10px; margin-top: 12px; }
.ns-adlp__sc dt { font-size: var(--fs-sm); line-height: 1.7; color: var(--mut); }
.ns-adlp__sc dd { font-size: var(--fs-body); font-weight: 700; line-height: 1.5; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.ns-adlp__sc dd.neg { color: var(--red); }
.ns-adlp__bar { height: 8px; margin-top: 13px; border-radius: 999px; background: #e9ebef; overflow: hidden; }
.ns-adlp__bar i { display: block; height: 100%; border-radius: 999px; background: #8d94a1; transition: width .45s cubic-bezier(.16, .7, .3, 1); }
.ns-adlp__sc--ad .ns-adlp__bar i { background: var(--ad); }
.ns-adlp__sc--best .ns-adlp__bar i { background: var(--red); }
@media (prefers-reduced-motion: reduce) { .ns-adlp__bar i { transition: none; } }
.ns-adlp__bl2 { margin-top: 7px; font-size: var(--fs-sm); line-height: 1.5; color: var(--mut); }
.ns-adlp__verdict { margin-top: 18px; padding: clamp(18px, 2vw, 24px); background: var(--ink); color: #eef0f3; border-radius: 14px; font-size: var(--fs-body); line-height: 1.85; }
.ns-adlp__verdict .v2 { display: block; margin-top: 10px; color: #c6cad2; }

/* ---------- 両輪(広告=青 / Webサイト=赤) ---------- */
.ns-adlp__pillars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 32px; }
.ns-adlp__pillar { background: var(--white); border: 1px solid var(--cream-line); border-radius: 20px; overflow: hidden; }
.ns-adlp__pillar > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #ebe8e5; }
.ns-adlp__pillar .body { padding: clamp(20px, 2.2vw, 30px); }
.ns-adlp__pillar .ns-adlp__h3 { margin-top: 12px; }
.ns-adlp__tag { display: inline-block; padding: 6px 12px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 700; line-height: 1.2; letter-spacing: .04em; }
.ns-adlp__tag--ad { background: var(--ad-soft); color: var(--ad); }
.ns-adlp__tag--web { background: var(--red-soft); color: var(--red); }
.ns-adlp__checks { display: grid; gap: 8px; margin-top: 14px; }
.ns-adlp__checks li { position: relative; padding-left: 28px; font-size: var(--fs-body); line-height: 1.7; color: var(--ink2); }
/* チェックの印(文字ではなく枠線で描く) */
.ns-adlp__checks li::before { content: ""; position: absolute; left: 4px; top: .42em; width: 7px; height: 12px; border: solid var(--ad); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.ns-adlp__pillar--web .ns-adlp__checks li::before { border-color: var(--red); }

/* 分断の図(担当が分かれているとき / ノーサイドのとき) */
.ns-adlp__split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.7vw, 22px); margin-top: 22px; }
.ns-adlp__spc { padding: clamp(18px, 2vw, 26px); background: var(--gray); border: 1px solid var(--line); border-radius: 14px; }
.ns-adlp__spc h4 { font-size: var(--fs-body); font-weight: 700; line-height: 1.6; color: var(--ink); }
.ns-adlp__spc > p { margin-top: 12px; font-size: var(--fs-sm); line-height: 1.8; color: var(--ink2); }
.ns-adlp__spc--ns { background: var(--ink); border-color: var(--ink); }
.ns-adlp__spc--ns h4 { color: #fff; }
.ns-adlp__spc--ns > p { color: #c6cad2; }
.ns-adlp__flow2 { display: grid; grid-template-columns: minmax(0, 1fr) 13px minmax(0, 1fr) minmax(0, 1fr); column-gap: 7px; row-gap: 8px; margin-top: 14px; }
.ns-adlp__own { word-break: keep-all; padding-bottom: 7px; font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; border-bottom: 2px solid currentColor; }
.ns-adlp__own--ad { color: var(--ad); }
.ns-adlp__own--web { color: var(--red); }
.ns-adlp__spc--ns .ns-adlp__own { color: #f0a9a4; }
.ns-adlp__bx { display: flex; align-items: center; justify-content: center; word-break: keep-all; padding: 11px 8px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; color: var(--ink); text-align: center; }
.ns-adlp__spc--ns .ns-adlp__bx { background: #262c36; border-color: #3a4250; color: #eef0f3; }
.ns-adlp__dv { background-image: repeating-linear-gradient(to bottom, #9aa3af 0 5px, transparent 5px 10px); background-position: center top; background-repeat: repeat-y; background-size: 2px 100%; }
.ns-adlp__flow2 .p1 { grid-column: 1; grid-row: 1; }
.ns-adlp__flow2 .b1 { grid-column: 1; grid-row: 2; }
.ns-adlp__flow2 .dv { grid-column: 2; grid-row: 1 / span 2; }
.ns-adlp__flow2 .p2 { grid-column: 3 / span 2; grid-row: 1; }
.ns-adlp__flow2 .b2 { grid-column: 3; grid-row: 2; }
.ns-adlp__flow2 .b3 { grid-column: 4; grid-row: 2; }
.ns-adlp__flow2 .pall { grid-column: 1 / span 4; grid-row: 1; }

/* 直し続ける輪(画像+3つの手順) */
.ns-adlp__cycle { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 44px); align-items: center; margin-top: clamp(20px, 2.4vw, 28px); padding: clamp(20px, 2.6vw, 36px); background: var(--white); border: 1px solid var(--cream-line); border-radius: 20px; }
.ns-adlp__cycle > img { border-radius: 14px; background: #e8e4e1; aspect-ratio: 4 / 3; width: 100%; }
.ns-adlp__steps3 { margin-top: 14px; }
.ns-adlp__steps3 li { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.ns-adlp__steps3 li:first-child { border-top: 0; padding-top: 4px; }
.ns-adlp__steps3 .n { grid-row: 1 / span 2; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: #fff; font-size: var(--fs-body); font-weight: 700; line-height: 1; }
.ns-adlp__steps3 b { font-size: var(--fs-body); font-weight: 700; line-height: 1.6; color: var(--ink); word-break: keep-all; }
.ns-adlp__steps3 .t { font-size: var(--fs-body); line-height: 1.75; color: var(--ink2); }

/* ---------- Webサイト側(濃紺の節) ---------- */
.ns-adlp__funnel { margin-top: 20px; }
.ns-adlp__fst { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr) 3.6em; align-items: center; gap: clamp(10px, 1.3vw, 18px); }
.ns-adlp__fst .fl { font-size: var(--fs-sm); font-weight: 700; line-height: 1.55; color: #e6ebf2; }
.ns-adlp__fst .fwrap { display: block; width: 100%; }
.ns-adlp__fst .fbar { display: block; height: 24px; min-width: 9px; border-radius: 5px; background: linear-gradient(90deg, var(--red), var(--red-hi)); }
.ns-adlp__fst .fn { font-size: var(--fs-body); font-weight: 700; line-height: 1.4; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.ns-adlp__fdrop { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: clamp(10px, 1.3vw, 18px); padding: 8px 0; }
.ns-adlp__fdrop .fd { grid-column: 2; font-size: var(--fs-sm); line-height: 1.75; color: #b7c0cd; }
.ns-adlp__fdrop .fd b { font-weight: 700; color: #f3aaa2; font-variant-numeric: tabular-nums; }

.ns-adlp__cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); margin-top: clamp(20px, 2.4vw, 28px); }
.ns-adlp__cards3 li { padding: clamp(20px, 1.8vw, 24px); background: var(--navy2); border: 1px solid var(--navy-line); border-radius: 16px; }
.ns-adlp__cards3 .n { background: #fff; color: var(--ink); }
.ns-adlp__cards3 p { margin-top: 10px; font-size: var(--fs-body); line-height: 1.8; color: #c2cad6; }

.ns-adlp__lanes { margin-top: 18px; }
.ns-adlp__src { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ns-adlp__src span { padding: 9px 5px; border-radius: 999px; background: var(--navy); border: 1px solid var(--navy-line); font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; color: #dfe4ea; text-align: center; }
.ns-adlp__src span:first-child { border-color: var(--ad-hi); color: #fff; }
.ns-adlp__down { display: flex; justify-content: center; padding: 7px 0; color: #97a3b4; }
.ns-adlp__down svg { width: 20px; height: 20px; }
.ns-adlp__dest { padding: clamp(14px, 1.7vw, 20px); border-radius: 13px; background: var(--white); color: var(--ink); font-size: var(--fs-body); font-weight: 700; line-height: 1.6; text-align: center; }

/* ---------- 任せられること(2列のメニュー) ---------- */
.ns-adlp__menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); margin-top: 32px; }
.ns-adlp__mcol { border-radius: 20px; overflow: hidden; border: 1px solid var(--ad-line); background: var(--white); }
.ns-adlp__mcol--web { border-color: var(--red-line); }
.ns-adlp__mhead { padding: 16px clamp(20px, 2.2vw, 28px); font-size: var(--fs-h3); font-weight: 700; line-height: 1.5; background: var(--ad-soft); color: var(--ad); }
.ns-adlp__mcol--web .ns-adlp__mhead { background: var(--red-soft); color: var(--red); }
/* テーマの reset.css の ul[class]{padding:0} より強くするため .ns-adlp を前に付ける */
.ns-adlp .ns-adlp__mlist { padding: 4px clamp(20px, 2.2vw, 28px) 10px; }
.ns-adlp__mlist li { padding: 16px 0; border-top: 1px solid var(--line); }
.ns-adlp__mlist li:first-child { border-top: 0; }
.ns-adlp__mlist b { display: block; font-size: var(--fs-body); font-weight: 700; line-height: 1.6; color: var(--ink); }
.ns-adlp__mlist .sub { display: block; font-size: var(--fs-sm); line-height: 1.6; color: var(--mut); }
.ns-adlp__mlist p { margin-top: 6px; font-size: var(--fs-body); line-height: 1.8; color: var(--ink2); }

/* ---------- 事例 ---------- */
.ns-adlp__caserow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); margin-top: 32px; }
.ns-adlp__cl { display: block; overflow: hidden; color: var(--ink); background: var(--white); border: 1px solid var(--cream-line); border-radius: 16px; transition: transform .3s cubic-bezier(.16, .7, .3, 1), box-shadow .3s; }
.ns-adlp__cl:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -32px rgba(21, 24, 31, .45); }
.ns-adlp__thumb { width: 100%; aspect-ratio: 768 / 429; object-fit: cover; background: #e9ebef; border-bottom: 1px solid var(--line); }
.ns-adlp__cl .cb { display: block; padding: clamp(18px, 1.9vw, 24px); }
.ns-adlp__cl .t { display: block; font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; color: var(--red); }
.ns-adlp__cl .h { display: block; margin-top: 8px; font-size: var(--fs-h3); font-weight: 700; line-height: 1.55; color: var(--ink); }
.ns-adlp__cl .d { display: block; margin-top: 8px; font-size: var(--fs-body); line-height: 1.75; color: var(--ink2); }
.ns-adlp__cl .go { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-size: var(--fs-sm); font-weight: 700; color: var(--red); }
.ns-adlp__cl .go svg { width: 15px; height: 15px; transition: transform .3s ease; }
.ns-adlp__cl:hover .go svg { transform: translateX(4px); }
.ns-adlp__after { margin-top: 24px; font-size: var(--fs-body); color: var(--ink2); }

/* ---------- ご依頼の流れ・お願いすること ---------- */
.ns-adlp__flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 18px); margin-top: 32px; counter-reset: none; }
.ns-adlp__flow li { padding: clamp(18px, 1.8vw, 24px); background: var(--gray); border-radius: 16px; }
.ns-adlp__flow .n { background: var(--ink); color: #fff; }
/* 手順の番号は見出しと同じ行に置く(大きな「01」を見出しの上に積む形はAIのテンプレートに見えるのでやめた・2026-09-19) */
.ns-adlp__cards3 li,
.ns-adlp__flow li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-content: start; }
.ns-adlp__cards3 .n,
.ns-adlp__flow .n { display: flex; align-items: center; justify-content: center; align-self: start; width: 26px; height: 26px; margin-top: calc((var(--fs-h3) * 1.55 - 26px) / 2); border-radius: 50%; font-size: var(--fs-sm); font-weight: 700; line-height: 1; }
.ns-adlp__cards3 .ns-adlp__h3,
.ns-adlp__flow .ns-adlp__h3 { text-wrap: pretty; }
.ns-adlp__cards3 p,
.ns-adlp__flow p { grid-column: 1 / -1; }
.ns-adlp__flow p { margin-top: 8px; font-size: var(--fs-body); line-height: 1.75; color: var(--ink2); }
.ns-adlp__ask { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); margin-top: clamp(20px, 2.4vw, 28px); }
.ns-adlp__askbox { padding: clamp(20px, 2.2vw, 30px); border: 1px solid var(--line); border-radius: 16px; background: var(--white); }
.ns-adlp__askbox--note { background: var(--ad-soft); border-color: var(--ad-line); }
.ns-adlp__askbox > p { margin-top: 10px; font-size: var(--fs-body); line-height: 1.8; color: var(--ink2); }
.ns-adlp__dots { margin-top: 12px; }
.ns-adlp__dots li { position: relative; padding: 5px 0 5px 18px; font-size: var(--fs-body); line-height: 1.7; color: var(--ink2); word-break: keep-all; }
.ns-adlp__dots li::before { content: ""; position: absolute; left: 2px; top: 1em; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }

/* ---------- 無料相談でお伝えすること ---------- */
.ns-adlp__consult { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.ns-adlp__consulttext { container-type: inline-size; }
.ns-adlp__consulttext .ns-adlp__h2--fit { --h2max: 12; }
.ns-adlp__consultimg { width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; background: #ebe7e4; }
.ns-adlp__consult .ns-adlp__steps3 { margin-top: 18px; }
.ns-adlp__consult .ns-adlp__steps3 li { border-top-color: var(--cream-line); }
.ns-adlp__consult .ns-adlp__steps3 .n { background: var(--red); }

/* ---------- 実務記事 ---------- */
.ns-adlp__blogcols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin-top: 24px; }
.ns-adlp__blogh { font-size: var(--fs-sm); font-weight: 700; line-height: 1.5; letter-spacing: .04em; color: var(--mut); }
.ns-adlp__blogs { display: flex; flex-direction: column; margin-top: 8px; }
.ns-adlp__bl { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body); font-weight: 700; line-height: 1.6; color: var(--ink); transition: color .2s; }
.ns-adlp__bl:hover { color: var(--red); }
.ns-adlp__bl svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--red); }

/* ---------- よくある質問(開閉) ---------- */
.ns-adlp__faq { margin-top: 28px; border-top: 1px solid var(--line); }
.ns-adlp__qa { border-bottom: 1px solid var(--line); }
.ns-adlp__qa summary { position: relative; display: block; padding: 20px 44px 20px 0; cursor: pointer; list-style: none; }
.ns-adlp__qa summary::-webkit-details-marker { display: none; }
.ns-adlp__qa summary h3 { display: flex; gap: 12px; align-items: baseline; font-size: var(--fs-body); font-weight: 700; line-height: 1.6; color: var(--ink); }
.ns-adlp__qa .q { flex: 0 0 auto; color: var(--red); }
/* 開閉の印(文字ではなく2本の線で描く) */
.ns-adlp__qa summary::before,
.ns-adlp__qa summary::after { content: ""; position: absolute; right: 12px; top: 50%; width: 14px; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--red); transition: transform .25s; }
.ns-adlp__qa summary::after { transform: rotate(90deg); }
.ns-adlp__qa[open] summary::after { transform: rotate(0deg); }
.ns-adlp__qa summary:hover h3 { color: var(--red); }
.ns-adlp__qa > p { padding: 0 44px 22px 30px; font-size: var(--fs-body); line-height: 1.85; color: var(--ink2); }

/* ---------- 末尾のフォーム(C-126: id="ns-adsvc-form" と data-ns-inline-form は変えない) ---------- */
.ns-adlp__formsec { background: radial-gradient(120% 150% at 50% 0%, #23272f 0%, #15181f 56%, #0b0d11 100%); color: #fff; scroll-margin-top: 56px; }
.ns-adlp__formgrid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 60px); align-items: start; }
.ns-adlp__formside { position: sticky; top: 104px; container-type: inline-size; }
.ns-adlp__formside .ns-adlp__h2--fit { --h2max: 15; }
.ns-adlp__formsec .ns-adlp__h2 { color: #fff; }
.ns-adlp__formsec .ns-adlp__lead { color: rgba(255, 255, 255, .88); }
.ns-adlp__formpts { margin-top: 26px; }
.ns-adlp__formpts li { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .16); font-size: var(--fs-sm); line-height: 1.8; color: #c6cad2; }
.ns-adlp__formpts li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .16); }
.ns-adlp__formpts b { display: block; margin-bottom: 2px; font-size: var(--fs-body); font-weight: 700; color: #fff; }
.ns-adlp__formnote { margin-top: 18px; font-size: var(--fs-sm); line-height: 1.8; color: rgba(255, 255, 255, .72); }
.ns-adlp__formcard { overflow: hidden; background: var(--white); border-radius: 16px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); color: var(--ink); line-height: 1.6; letter-spacing: normal; }
.ns-adlp__formcard .ns-form-header { display: none; }
/* 送信ボタンだけLPの赤にそろえる(入力欄のフォーカス色は共通の青のまま) */
.ns-adlp .ns-adlp__formcard .ns-submit-btn { background: linear-gradient(180deg, #d24a3d 0%, var(--red) 100%) !important; box-shadow: 0 4px 6px -1px rgba(192, 57, 43, .3), 0 2px 4px -1px rgba(192, 57, 43, .15) !important; }
.ns-adlp .ns-adlp__formcard .ns-submit-btn:hover { box-shadow: 0 10px 15px -3px rgba(192, 57, 43, .4) !important; }

/* ---------- 画面幅ごとの切り替え ---------- */
@media (max-width: 1000px) {
	.ns-adlp__cards3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
	.ns-adlp__herogrid { grid-template-columns: minmax(0, 1fr); }
	.ns-adlp__heroimg { max-width: 560px; }
	.ns-adlp__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
	.ns-adlp__eq { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.ns-adlp__eq .op { justify-self: center; }
	/* 縦に積んだときは = も縦向きにする(流れの向きに合わせる) */
	.ns-adlp__eq .op--eq { transform: rotate(90deg); }
	.ns-adlp__scen,
	.ns-adlp__pillars,
	.ns-adlp__split,
	.ns-adlp__cycle,
	.ns-adlp__menu,
	.ns-adlp__caserow,
	.ns-adlp__ask,
	.ns-adlp__consult,
	.ns-adlp__blogcols,
	.ns-adlp__formgrid { grid-template-columns: minmax(0, 1fr); }
	.ns-adlp__cycle > img { max-width: 480px; }
	.ns-adlp__consultimg { max-width: 560px; }
	.ns-adlp__formside { position: static; }
}
@media (max-width: 760px) {
	.ns-adlp__bep .bepnums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.ns-adlp__brsp { display: inline; }
	.ns-adlp__ctrls { grid-template-columns: minmax(0, 1fr); }
	.ns-adlp__flow2 { grid-template-columns: minmax(0, 1fr); row-gap: 7px; }
	.ns-adlp__flow2 > * { grid-column: 1 !important; grid-row: auto !important; }
	.ns-adlp__dv { display: none; }
	.ns-adlp__bx { justify-content: flex-start; padding: 10px 13px; text-align: left; }
	.ns-adlp__fst { grid-template-columns: minmax(0, 1fr) 3.4em; row-gap: 5px; }
	.ns-adlp__fst .fl { grid-column: 1 / span 2; }
	.ns-adlp__fst .fwrap { grid-column: 1; }
	.ns-adlp__fst .fn { grid-column: 2; }
	.ns-adlp__fdrop { grid-template-columns: minmax(0, 1fr); }
	.ns-adlp__fdrop .fd { grid-column: 1; }
	.ns-adlp__src { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ns-adlp__flow { grid-template-columns: minmax(0, 1fr); }
	.ns-adlp__btn { width: 100%; padding: 0 20px; }
	.ns-adlp__qa > p { padding: 0 8px 20px 30px; }
}
