/* =========================================================
   Lab A：分野紹介（/support/<分野>/）
   - すべて .a-main--support の中に限定（TOP・サービス詳細・他の仮想ページへ波及させない）
   - A 案の配色・文字の階層・余白は a.css のものを使う
   ========================================================= */

/* ---------- FV：制作物の見本（2〜3 点） ---------- */
.a-main--support .a-sfv-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; }
.a-main--support .a-sfv { margin: 0; }
.a-main--support .a-sfv-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 16px; }
.a-main--support .a-spec { min-width: 0; display: grid; gap: 6px; align-content: start; }
.a-main--support .a-spec--0 { grid-column: 1 / -1; }
.a-main--support .a-spec-in { position: relative; overflow: hidden; border-radius: 12px; max-height: 300px; pointer-events: none; }
.a-main--support .a-spec--1 .a-spec-in, .a-main--support .a-spec--2 .a-spec-in { max-height: 210px; }
.a-main--support .a-spec-in::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(180deg, rgba(250, 250, 247, 0), var(--a-paper)); }
.a-main--support .a-spec-cap { font-size: 12px; color: var(--a-sub); line-height: 1.5; }
.a-main--support .a-sfv-col--2 .a-spec--1 { grid-column: 1 / -1; }

/* ---------- 目的から選ぶ：サービスカード ---------- */
.a-main--support .a-ssel .a-head--row { align-items: flex-end; }
.a-main--support .a-scards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.a-main--support .a-scards--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.a-main--support .a-scard { display: grid; grid-template-rows: auto 1fr; height: 100%; text-decoration: none; color: var(--a-ink); background: #fff; border: 1px solid var(--a-line-strong); border-radius: 16px; overflow: hidden; transition: border-color .2s, box-shadow .25s var(--a-ease), transform .25s var(--a-ease); }
.a-main--support .a-scard:hover, .a-main--support .a-scard:focus-visible { border-color: var(--a-ink); box-shadow: 0 18px 40px rgba(18, 32, 60, .14); transform: translateY(-3px); }
.a-main--support .a-scard:focus-visible { outline: 3px solid var(--a-blue); outline-offset: 3px; }
.a-main--support .a-scard-thumb { position: relative; display: block; height: 230px; overflow: hidden; background: #F1F2EC; border-bottom: 1px solid var(--a-line); padding: 14px 14px 0; pointer-events: none; }
.a-main--support .a-scards--6 .a-scard-thumb { height: 200px; }
.a-main--support .a-scard-thumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 48px; background: linear-gradient(180deg, rgba(241, 242, 236, 0), #F1F2EC); }
.a-main--support .a-scard-thumb > .a-v { transition: transform .45s var(--a-ease); transform-origin: top center; }
.a-main--support .a-scard:hover .a-scard-thumb > .a-v, .a-main--support .a-scard:focus-visible .a-scard-thumb > .a-v { transform: translateY(-14px); }
.a-main--support .a-scard-body { display: grid; gap: 6px; align-content: start; padding: 16px 18px 18px; }
.a-main--support .a-scard-purpose { font-family: var(--a-display); font-weight: 700; font-size: 18px; line-height: 1.5; }
.a-main--support .a-scard-title { font-size: 13px; font-weight: 700; color: var(--a-navy); }
.a-main--support .a-scard-out { font-size: 13px; color: var(--a-sub); }
.a-main--support .a-scard-go { margin-top: 6px; font-size: 13.5px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.a-main--support .a-scard[aria-busy="true"] .a-scard-go::after { content: "　移動しています…"; font-weight: 500; color: var(--a-mute); text-decoration: none; }
.a-main--support .a-ssel-more { margin-top: 24px; text-align: center; }

/* ---------- 費用 ---------- */
.a-main--support .a-cost--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.a-main--support .a-cost-row--sup { grid-template-columns: minmax(0, 1fr); }

/* ---------- 主役ビジュアル：共通の部品 ---------- */
.a-main--support .a-sv { position: relative; }
.a-main--support .a-svt { font: 600 12px/1.4 var(--a-mono); letter-spacing: .06em; color: var(--a-blue); margin-bottom: 8px; }
.a-main--support .a-svb { background: #fff; border: 1px solid var(--a-line-strong); border-radius: 10px; padding: 9px 12px; display: grid; gap: 2px; }
.a-main--support .a-svb b { font-size: 14px; }
.a-main--support .a-svb span { font-size: 12px; color: var(--a-sub); }
.a-main--support .a-svb-tag { font: 600 10px/1.4 var(--a-mono); color: var(--a-blue) !important; }
.a-main--support .a-svs { font-size: 12px; }
.a-main--support .a-svs-in { padding: 10px; display: grid; gap: 6px; }
.a-main--support .a-svs-b { border: 1px solid var(--a-line); border-radius: 6px; padding: 6px 8px; display: grid; gap: 1px; background: #fff; }
.a-main--support .a-svs-b b { font-size: 12px; line-height: 1.45; }
.a-main--support .a-svs-b span { font-size: 11px; color: var(--a-sub); }
.a-main--support .a-svs-b--hero { background: var(--a-sky); border-color: transparent; }
.a-main--support .a-svs-b--hero b { font-family: var(--a-display); font-size: 13.5px; }
.a-main--support .a-svs-b--table { background: repeating-linear-gradient(180deg, #fff 0 16px, #F4F5F0 16px 17px); }
.a-main--support .a-svs-b--cards span { display: block; }
.a-main--support .a-svs-b--form { border-style: dashed; border-color: var(--a-navy); }
.a-main--support .a-svs-b--form b::after { content: "送信"; margin-left: 8px; font-size: 10px; background: var(--a-yellow); border-radius: 999px; padding: 1px 8px; }
.a-main--support .a-svs-b--img { grid-template-columns: 54px 1fr; column-gap: 8px; align-items: center; }
.a-main--support .a-svs-b--img .a-svs-art { grid-row: 1 / 3; width: 54px; height: 34px; background: #EEF0EA; border-radius: 4px; color: #49525A; }
.a-main--support .a-sv-arrow { display: grid; place-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--a-navy); text-align: center; line-height: 1.35; }
.a-main--support .a-sv-arrow::after { content: ""; width: 100%; min-width: 28px; height: 0; border-top: 2px solid var(--a-navy); }
.a-main--support .a-sv-mark { display: inline-grid; place-items: center; min-width: 20px; height: 20px; border-radius: 4px; background: var(--a-red); color: #fff; font: 600 11px/1 var(--a-mono); padding: 0 4px; }

/* ---------- content：疑問 → 記事・資料（根拠）→ 入口 ---------- */
.a-main--support .a-svq { display: grid; grid-template-columns: 220px minmax(0, 1fr) 200px; grid-template-areas: "q works next" "ai ai ai"; gap: 28px 34px; align-items: start; }
.a-main--support .a-svq-q { grid-area: q; }
.a-main--support .a-svq-works { grid-area: works; display: grid; gap: 14px; }
.a-main--support .a-svq-next { grid-area: next; }
.a-main--support .a-svq-ai { grid-area: ai; }
.a-main--support .a-svq-col { position: relative; }
.a-main--support .a-svq-t { font: 600 12px/1.4 var(--a-mono); letter-spacing: .06em; color: var(--a-blue); margin-bottom: 10px; }
.a-main--support .a-svq-q ul { display: grid; gap: 12px; }
.a-main--support .a-svq-bubble { position: relative; background: #fff; border: 1.5px solid var(--a-ink); border-radius: 14px 14px 14px 4px; padding: 10px 12px; display: grid; gap: 2px; }
.a-main--support .a-svq-bubble span { font-weight: 700; font-size: 14px; line-height: 1.5; }
.a-main--support .a-svq-bubble small { font-size: 11.5px; color: var(--a-mute); }
.a-main--support .a-svq-q::after, .a-main--support .a-svq-next::before { content: ""; position: absolute; top: 120px; width: 24px; height: 0; border-top: 2px solid var(--a-navy); }
.a-main--support .a-svq-q::after { right: -30px; }
.a-main--support .a-svq-next::before { left: -30px; }
.a-main--support .a-svq-specs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.a-main--support .a-svq-spec { position: relative; padding-top: 22px; }
.a-main--support .a-svq-kind { position: absolute; top: 0; left: 0; font-size: 11px; font-weight: 700; color: #fff; background: var(--a-ink); border-radius: 4px; padding: 1px 8px; }
.a-main--support .a-svq-spec .a-v { max-height: 420px; overflow: hidden; border-radius: 10px; }
.a-main--support .a-svq-spec .a-v--spread .a-spr-pages { grid-template-columns: minmax(0, 1fr); }
.a-main--support .a-svq-spec .a-v--spread .a-spr-pages::before { display: none; }
.a-main--support .a-svq-spec .a-v--spread .a-spr-right { border-top: 1px dashed var(--a-line-strong); }
.a-main--support .a-svq-src { position: relative; border: 2px dashed var(--a-green); border-radius: 12px; padding: 12px 14px; background: #F2F8F4; }
.a-main--support .a-svq-src::before { content: "↑ 根拠として使う"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; color: var(--a-green); background: var(--a-paper); padding: 0 8px; }
.a-main--support .a-svq-src .a-svq-t { color: var(--a-green); }
.a-main--support .a-svq-src ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.a-main--support .a-svq-src li { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; align-items: center; font-size: 12px; }
.a-main--support .a-svq-src li .a-icon { grid-row: 1 / 3; width: 22px; height: 22px; color: var(--a-green); }
.a-main--support .a-svq-src li b { font-size: 13px; }
.a-main--support .a-svq-src li span { color: var(--a-sub); }
.a-main--support .a-svq-next ul { display: grid; gap: 10px; }
.a-main--support .a-svq-next li { background: #fff; border: 1px solid var(--a-line-strong); border-radius: 10px; padding: 10px 12px; display: grid; gap: 2px; }
.a-main--support .a-svq-next li b { font-size: 14px; }
.a-main--support .a-svq-next li span { font-size: 12px; color: var(--a-sub); }
.a-main--support .a-svq-next li.is-main { background: var(--a-yellow); border-color: var(--a-yellow); }
.a-main--support .a-svq-ai { background: var(--a-navy); color: #fff; border-radius: 14px; padding: 14px 18px; display: grid; gap: 8px; }
.a-main--support .a-svq-ai .a-svq-t { color: var(--a-yellow); margin: 0; }
.a-main--support .a-svq-graph { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.a-main--support .a-svq-graph li { position: relative; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .35); border-radius: 10px; padding: 8px 10px; display: grid; gap: 1px; }
.a-main--support .a-svq-graph li:not(:last-child)::after { content: ""; position: absolute; right: -24px; top: 50%; width: 22px; border-top: 2px solid var(--a-yellow); }
.a-main--support .a-svq-graph b { font-size: 14px; }
.a-main--support .a-svq-graph span { font-size: 11.5px; opacity: .85; }
.a-main--support .a-svq-graph em { font-style: normal; font-size: 10.5px; color: var(--a-yellow); }
.a-main--support .a-svq-ainote { font-size: 12px; opacity: .85; }

/* ---------- 動き（分野紹介：一度だけ。動きを減らす設定では a-motion が付かない） ---------- */
.a-motion .a-main--support .a-spec { animation: a-up .6s var(--a-ease) both; animation-delay: calc(.15s + var(--i, 0) * .14s); }
.a-motion .a-main--support [data-a-reveal]:not(.is-in) .a-scards > li { opacity: 0; }
.a-motion .a-main--support [data-a-reveal].is-in .a-scards > li { animation: a-up .5s var(--a-ease) both; animation-delay: calc(.1s + var(--i, 0) * 90ms); }
.a-motion .a-main--support [data-a-reveal].is-in .a-scard-thumb > .a-v { animation: a-sup-peek 1.2s var(--a-ease) both; animation-delay: calc(.5s + var(--i, 0) * 90ms); }
@keyframes a-sup-peek { 0% { transform: translateY(0); } 45% { transform: translateY(-18px); } 100% { transform: translateY(0); } }
.a-motion .a-main--support [data-a-reveal]:not(.is-in) :is(.a-svq-bubble, .a-svq-spec, .a-svq-src, .a-svq-next li, .a-svq-ai) { opacity: 0; }
.a-motion .a-main--support [data-a-reveal].is-in .a-svq-bubble { animation: a-up .45s var(--a-ease) both; animation-delay: calc(var(--i, 0) * 120ms); }
.a-motion .a-main--support [data-a-reveal].is-in .a-svq-src { animation: a-up .45s var(--a-ease) .45s both; }
.a-motion .a-main--support [data-a-reveal].is-in .a-svq-spec { animation: a-up .5s var(--a-ease) .7s both; }
.a-motion .a-main--support [data-a-reveal].is-in .a-svq-spec + .a-svq-spec { animation-delay: .85s; }
.a-motion .a-main--support [data-a-reveal].is-in .a-svq-next li { animation: a-up .4s var(--a-ease) both; animation-delay: calc(1.05s + var(--i, 0) * 100ms); }
.a-motion .a-main--support [data-a-reveal].is-in .a-svq-ai { animation: a-up .5s var(--a-ease) 1.3s both; }
.a-motion .a-main--support [data-a-reveal].is-in :is(.a-svq-q::after, .a-svq-next::before) { animation: a-draw .4s var(--a-ease) both; }

/* ---------- タブレット ---------- */
@media (max-width: 1024px) {
	.a-main--support .a-sfv-grid { grid-template-columns: minmax(0, 1fr); }
	.a-main--support .a-scards--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.a-main--support .a-svq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "q next" "works works" "ai ai"; }
	.a-main--support .a-svq-q::after, .a-main--support .a-svq-next::before { display: none; }
	.a-main--support .a-svq-graph { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.a-main--support .a-svq-graph li:nth-child(2)::after { display: none; }
}

/* ---------- SP ---------- */
@media (max-width: 767px) {
	.a-main--support .a-sfv-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 10px; }
	.a-main--support .a-spec-in { max-height: 240px; }
	.a-main--support .a-spec--1 .a-spec-in, .a-main--support .a-spec--2 .a-spec-in { max-height: 150px; }
	.a-main--support .a-spec-cap { font-size: 11px; }
	.a-main--support .a-scards, .a-main--support .a-scards--6 { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.a-main--support .a-scard-thumb, .a-main--support .a-scards--6 .a-scard-thumb { height: 180px; }
	.a-main--support .a-scard-purpose { font-size: 17px; }
	.a-main--support .a-ssel .a-head--row > .a-textlink { display: none; }
	.a-main--support .a-cost--3 { grid-template-columns: minmax(0, 1fr); }
	.a-main--support .a-svq { grid-template-columns: minmax(0, 1fr); grid-template-areas: "q" "works" "next" "ai"; gap: 30px; }
	.a-main--support .a-svq-works::before, .a-main--support .a-svq-next::after { content: "↓"; display: block; text-align: center; font-weight: 900; color: var(--a-navy); margin: -26px 0 0; }
	.a-main--support .a-svq-next::after { margin: 8px 0 -26px; content: ""; }
	.a-main--support .a-svq-specs { grid-template-columns: minmax(0, 1fr); }
	.a-main--support .a-svq-spec .a-v { max-height: 360px; }
	.a-main--support .a-svq-src ul { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.a-main--support .a-svq-graph { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.a-main--support .a-svq-graph li:not(:last-child)::after { right: auto; left: 20px; top: auto; bottom: -14px; width: 0; height: 12px; border-top: 0; border-left: 2px solid var(--a-yellow); display: block; }
}


/* ---------- website：ページの役割と更新画面 ---------- */
.a-main--support .a-svw { display: grid; gap: 26px; }
.a-main--support .a-svw-pages { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 58px; align-items: start; }
.a-main--support .a-svw-page { position: relative; display: grid; gap: 8px; padding: 4px; }
.a-main--support .a-svw-role { display: grid; gap: 1px; }
.a-main--support .a-svw-role b { font-family: var(--a-display); font-size: 16px; }
.a-main--support .a-svw-role span { font-size: 12px; color: var(--a-sub); }
.a-main--support .a-svw-arrow { position: absolute; right: -58px; top: 110px; width: 56px; display: grid; place-items: center; font-size: 10.5px; font-weight: 700; color: var(--a-navy); line-height: 1.3; text-align: center; z-index: 1; }
.a-main--support .a-svw-arrow::before { content: "→"; font-size: 20px; line-height: 1; }
.a-main--support .a-svw-page .a-svs-in { min-height: 170px; }
.a-main--support .a-svw-update { position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; border: 2px dashed var(--a-line-strong); border-radius: 14px; padding: 16px; background: #F4F5F0; }
.a-main--support .a-svw-uhead ul { display: grid; gap: 6px; }
.a-main--support .a-svw-uhead li { font-size: 13px; font-weight: 700; display: flex; gap: 6px; align-items: center; }
.a-main--support .a-svw-uhead li span { color: var(--a-blue); font-weight: 900; }

/* ---------- ec：購入画面と運営側 ---------- */
.a-main--support .a-sve { position: relative; display: grid; gap: 12px; }
.a-main--support .a-sve-lane { font: 600 12px/1.4 var(--a-mono); letter-spacing: .06em; }
.a-main--support .a-sve-lane--buy { color: var(--a-blue); }
.a-main--support .a-sve-lane--ops { display: none; }
.a-main--support .a-sve-ops::before { content: "運営側の画面"; font: 600 10px/1.4 var(--a-mono); letter-spacing: .06em; color: #AEB7BE; }
.a-main--support .a-sve-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.a-main--support .a-sve-col { display: grid; grid-template-rows: auto auto 1fr; gap: 0; }
.a-main--support .a-sve-buy { position: relative; display: grid; gap: 8px; padding: 4px; }
.a-main--support .a-sve-col:not(:last-child) .a-sve-buy::after { content: "→"; position: absolute; right: -24px; top: 110px; font-size: 20px; font-weight: 900; color: var(--a-ink); }
.a-main--support .a-sve-step { display: flex; gap: 8px; align-items: baseline; }
.a-main--support .a-sve-step b { font-family: var(--a-display); font-size: 16px; }
.a-main--support .a-sve-step span { font-size: 12px; color: var(--a-sub); }
.a-main--support .a-sve-buy .a-svs-in { min-height: 150px; }
.a-main--support .a-sve-link { position: relative; display: grid; justify-items: center; padding: 30px 0 30px; }
.a-main--support .a-sve-link::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 50%; border-left: 2px dashed var(--a-navy); }
.a-main--support .a-sve-link span { position: relative; font-size: 12px; font-weight: 700; background: var(--a-yellow-soft); border: 1px solid #E6D46A; border-radius: 999px; padding: 3px 12px; text-align: center; }
.a-main--support .a-sve-ops { position: relative; background: #2B3138; color: #E6ECF0; border-radius: 10px; padding: 12px 14px; display: grid; gap: 6px; align-content: start; }
.a-main--support .a-sve-ops b { font-size: 13px; }
.a-main--support .a-sve-ops dl { display: grid; gap: 4px; }
.a-main--support .a-sve-ops dl > div { display: grid; grid-template-columns: 70px 1fr; gap: 6px; }
.a-main--support .a-sve-ops dt { font-size: 11px; color: #AEB7BE; }
.a-main--support .a-sve-ops dd { font-size: 12px; background: rgba(255, 255, 255, .1); border-radius: 4px; padding: 1px 6px; }
.a-main--support .a-sve-ops.is-active { background-color: #2B3138; }
.a-main--support .a-sve-note { font-size: 13px; color: var(--a-sub); }

/* ---------- lp：広告→LP→申込と受付 ---------- */
.a-main--support .a-svl { display: grid; grid-template-columns: minmax(0, 1fr) 360px minmax(0, .9fr); gap: 32px; align-items: start; }
.a-main--support .a-svl-ads { display: grid; gap: 12px; position: relative; }
.a-main--support .a-svl-match { display: flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--a-navy); background: var(--a-sky); border-radius: 8px; padding: 6px 10px; }
.a-main--support .a-svl-match span { font-size: 18px; font-weight: 900; }
.a-main--support .a-svl-lp .a-lp { width: 100%; }
.a-main--support .a-svl-done { position: relative; display: grid; gap: 8px; padding: 4px; }
.a-main--support .a-svl-done ol { display: grid; gap: 16px; }
.a-main--support .a-svl-done li { position: relative; background: #fff; border: 1px solid var(--a-line-strong); border-radius: 10px; padding: 8px 12px; display: grid; gap: 1px; }
.a-main--support .a-svl-done li:not(:last-child)::after { content: "↓"; position: absolute; left: 18px; bottom: -17px; font-weight: 900; }
.a-main--support .a-svl-done li small { font-size: 10.5px; font-weight: 700; color: var(--a-mute); }
.a-main--support .a-svl-done li b { font-size: 14px; }
.a-main--support .a-svl-done li.is-ok { border: 2px solid var(--a-green); background: #EFF7F2; }
.a-main--support .a-svl-done li.is-ok small { color: var(--a-green); }
.a-main--support .a-svl-dnote { font-size: 12.5px; color: var(--a-red); font-weight: 700; }

/* ---------- ads：媒体→広告→遷移先→記録 ---------- */
.a-main--support .a-sva { display: grid; gap: 14px; }
.a-main--support .a-sva-zones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; align-items: start; }
.a-main--support .a-sva-z { position: relative; display: grid; gap: 8px; align-content: start; padding: 4px; }
.a-main--support .a-sva-z:not(:last-child)::after { content: ""; position: absolute; right: -32px; top: 92px; width: 28px; border-top: 2px solid var(--a-ink); }
.a-main--support .a-sva-z:not(:last-child)::before { content: ""; position: absolute; right: -34px; top: 87px; border: 6px solid transparent; border-left: 9px solid var(--a-ink); border-right: 0; }
.a-main--support .a-sva-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.a-main--support .a-sva-chips span { font-size: 12px; font-weight: 700; background: var(--a-ink); color: #fff; border-radius: 999px; padding: 2px 10px; }
.a-main--support .a-sva-dl { display: grid; gap: 4px; background: #fff; border: 1px solid var(--a-line-strong); border-radius: 10px; padding: 10px 12px; }
.a-main--support .a-sva-dl > div { display: grid; grid-template-columns: 62px 1fr; gap: 6px; font-size: 12px; }
.a-main--support .a-sva-dl dt { color: var(--a-mute); font-weight: 700; }
.a-main--support .a-sva-go { justify-self: start; font-size: 11.5px; font-weight: 700; color: var(--a-navy); background: var(--a-sky); border-radius: 999px; padding: 2px 10px; }
.a-main--support .a-sva-rec { width: 100%; border-collapse: collapse; background: #fff; font-size: 12px; border: 1px solid var(--a-line-strong); }
.a-main--support .a-sva-rec th, .a-main--support .a-sva-rec td { border: 1px solid var(--a-line); padding: 6px; text-align: center; }
.a-main--support .a-sva-rec thead th { background: #F1F2EC; font-size: 11px; }
.a-main--support .a-sva-rec tbody th { text-align: left; }
.a-main--support .a-sva-rec td { color: var(--a-mute); }
.a-main--support .a-sva-rnote { font-size: 12px; color: var(--a-sub); }
.a-main--support .a-sva-back { position: relative; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; border: 2px dashed var(--a-red); border-radius: 12px; padding: 12px 16px; background: #FCF5F2; }
.a-main--support .a-sva-back b { font-size: 14px; margin-left: auto; }
.a-main--support .a-sva-back b::before { content: "← "; color: var(--a-red); }
.a-main--support .a-sva-legend { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--a-sub); }
.a-main--support .a-sva-legend i { width: 28px; border-top: 2px solid var(--a-ink); }
.a-main--support .a-sva-legend i.is-dash { border-top: 2px dashed var(--a-red); }

/* ---------- marketing：接点の関係と優先順位 ---------- */
.a-main--support .a-svm { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.a-main--support .a-svm-map { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.a-main--support .a-svm-st { position: relative; padding: 4px; }
.a-main--support .a-svm-st:not(:last-child)::after { content: "→"; position: absolute; right: -19px; top: 60px; font-weight: 900; font-size: 16px; }
.a-main--support .a-svm-st ul { display: grid; gap: 8px; }
.a-main--support .a-svm-st li { position: relative; background: #fff; border: 1px solid var(--a-line-strong); border-radius: 8px; padding: 8px 10px; font-size: 13px; font-weight: 700; line-height: 1.45; }
.a-main--support .a-svm-st li.is-gap { border: 2px dashed var(--a-red); background: #FCF5F2; }
.a-main--support .a-svm-st li .a-sv-mark { position: absolute; top: -9px; right: -7px; }
.a-main--support .a-svm-pri { position: relative; background: #fff; border: 1px solid var(--a-line-strong); border-radius: 12px; padding: 14px; }
.a-main--support .a-svm-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.a-main--support .a-svm-table th, .a-main--support .a-svm-table td { border-bottom: 1px solid var(--a-line); padding: 7px 6px; text-align: left; vertical-align: top; }
.a-main--support .a-svm-table thead th { font-size: 11px; color: var(--a-mute); border-bottom: 2px solid var(--a-ink); }

/* ---------- social-video ---------- */
.a-main--support .a-svs2 { display: grid; grid-template-columns: minmax(0, 1.3fr) 34px 260px minmax(0, .8fr); grid-template-areas: "board arrow post entries" "lanes lanes lanes lanes"; gap: 22px 18px; align-items: start; }
.a-main--support .a-svs2-board { grid-area: board; position: relative; padding: 4px; }
.a-main--support .a-svs2-arrow { grid-area: arrow; align-self: center; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--a-navy); }
.a-main--support .a-svs2-arrow::after { content: "→"; font-size: 22px; font-weight: 900; line-height: 1; }
.a-main--support .a-svs2-post { grid-area: post; position: relative; padding: 4px; }
.a-main--support .a-svs2-entries { grid-area: entries; position: relative; padding: 4px; }
.a-main--support .a-svs2-lanes { grid-area: lanes; position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 4px; }
.a-main--support .a-svs2-frames { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.a-main--support .a-svs2-frames li { display: grid; gap: 4px; }
.a-main--support .a-svs2-frames .a-sb-frame { aspect-ratio: 9 / 14; }
.a-main--support .a-svs2-frames .a-sb-art { inset: 20% -30% 24%; }
.a-main--support .a-svs2-frames p { font-size: 12px; font-weight: 700; line-height: 1.45; }
.a-main--support .a-svs2-phone { padding: 12px; display: grid; gap: 8px; }
.a-main--support .a-svs2-phone .a-so-grid { margin: 0 -12px -12px; }
.a-main--support .a-svs2-entries ul { display: grid; gap: 8px; }
.a-main--support .a-svs2-entries li { background: #fff; border: 1px solid var(--a-line-strong); border-radius: 10px; padding: 8px 12px; display: grid; }
.a-main--support .a-svs2-entries li b { font-size: 14px; }
.a-main--support .a-svs2-entries li span { font-size: 12px; color: var(--a-sub); }
.a-main--support .a-svs2-entries li.is-main { background: var(--a-yellow); border-color: var(--a-yellow); }
.a-main--support .a-svs2-lane { background: #fff; border: 1px solid var(--a-line-strong); border-radius: 12px; padding: 12px 14px; display: grid; gap: 8px; }
.a-main--support .a-svs2-lane > b { font-size: 14px; }
.a-main--support .a-svs2-lane ol { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.a-main--support .a-svs2-lane li { position: relative; font-size: 12.5px; background: var(--a-sky); border-radius: 6px; padding: 3px 8px; }
.a-main--support .a-svs2-lane li:not(:last-child)::after { content: "→"; position: absolute; right: -16px; top: 50%; transform: translateY(-50%); font-weight: 900; }
.a-main--support .a-svs2-lane--ops li:last-child::after { content: "↺"; right: -18px; color: var(--a-blue); }

/* ---------- operations：管理表と対象画面 ---------- */
.a-main--support .a-svo { display: grid; gap: 22px; }
.a-main--support .a-svo-board { position: relative; background: #fff; border: 1px solid var(--a-line-strong); border-radius: 12px; padding: 14px; }
.a-main--support .a-svo-row { display: grid; grid-template-columns: 34px 1fr 1fr 1.2fr 1fr 90px; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 1px solid var(--a-line); font-size: 13px; }
.a-main--support .a-svo-th { font-size: 11px; font-weight: 700; color: var(--a-mute); border-bottom: 2px solid var(--a-ink); }
.a-main--support .a-svo-row [role="rowheader"] { font-weight: 700; }
.a-main--support .a-svo-st em { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--a-sky); color: var(--a-navy); white-space: nowrap; }
.a-main--support .a-svo-row:nth-child(3) .a-svo-st em { background: var(--a-yellow-soft); color: #5B4A00; }
.a-main--support .a-svo-row:nth-child(4) .a-svo-st em { background: #EEF0EA; color: var(--a-sub); }
.a-main--support .a-svo-specs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.a-main--support .a-svo-specs > li { display: grid; gap: 8px; align-content: start; padding: 4px; }
.a-main--support .a-svo-sh { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 700; }
.a-main--support .a-svo-spec { max-height: 260px; overflow: hidden; border-radius: 10px; position: relative; pointer-events: none; }
.a-main--support .a-svo-spec::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(180deg, rgba(250, 250, 247, 0), var(--a-paper)); }

/* ---------- analytics：計測と観察 ---------- */
.a-main--support .a-svn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
.a-main--support .a-svn-half { display: grid; gap: 14px; align-content: start; padding: 16px; border-radius: 16px; }
.a-main--support .a-svn-half--m { background: var(--a-sky); }
.a-main--support .a-svn-half--o { background: #F4F2E8; }
.a-main--support .a-svn-h { font-family: var(--a-display); font-weight: 900; font-size: 18px; margin-bottom: 10px; }
.a-main--support .a-svn-measure, .a-main--support .a-svn-verify, .a-main--support .a-svn-observe, .a-main--support .a-svn-improve { position: relative; padding: 4px; }
.a-main--support .a-svn-path { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 18px; }
.a-main--support .a-svn-path li { position: relative; background: #fff; border: 1px solid var(--a-line-strong); border-radius: 8px; padding: 8px; text-align: center; font-size: 13px; font-weight: 700; }
.a-main--support .a-svn-path li:not(:last-child)::after { content: "→"; position: absolute; right: -15px; top: 50%; transform: translateY(-50%); font-weight: 900; }
.a-main--support .a-svn-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; position: relative; }
.a-main--support .a-svn-outs::before { content: ""; position: absolute; left: 16%; right: 16%; top: -12px; border-top: 2px solid var(--a-ink); }
.a-main--support .a-svn-outs li { position: relative; background: #fff; border: 1px solid var(--a-line-strong); border-radius: 8px; padding: 6px 8px; display: grid; gap: 1px; }
.a-main--support .a-svn-outs li::before { content: ""; position: absolute; left: 50%; top: -12px; height: 12px; border-left: 2px solid var(--a-ink); }
.a-main--support .a-svn-outs li b { font-size: 13px; } .a-main--support .a-svn-outs li span { font-size: 11px; color: var(--a-sub); }
.a-main--support .a-svn-outs li.is-ok { border: 2px solid var(--a-green); background: #EFF7F2; }
.a-main--support .a-svn-outs li.is-ng { border-color: #D7B1A4; background: #FCF5F2; }
.a-main--support .a-svn-outs li.is-drop { border-style: dashed; }
.a-main--support .a-svn-page ol { padding: 10px; display: grid; gap: 6px; }
.a-main--support .a-svn-page li { position: relative; display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--a-line); border-radius: 6px; padding: 8px 10px; font-size: 12.5px; }
.a-main--support .a-svn-page li em, .a-main--support .a-svn-marks em { font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--a-red); color: #fff; font: 600 11px/1 var(--a-mono); flex: none; }
.a-main--support .a-svn-marks { display: grid; gap: 6px; margin-top: 10px; }
.a-main--support .a-svn-marks li { display: flex; gap: 8px; align-items: center; font-size: 12.5px; }
.a-main--support .a-svn-table { width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; }
.a-main--support .a-svn-table th, .a-main--support .a-svn-table td { border: 1px solid var(--a-line); padding: 6px; text-align: left; vertical-align: top; }
.a-main--support .a-svn-table thead th { font-size: 11px; background: #F1F2EC; }
.a-main--support .a-svn-rec { font-size: 13px; font-weight: 700; display: flex; gap: 8px; align-items: center; }
.a-main--support .a-svn-rec span { font-size: 11px; color: #fff; background: var(--a-ink); border-radius: 4px; padding: 1px 8px; }
.a-main--support .a-svn-privacy { grid-column: 1 / -1; font-size: 13px; color: var(--a-sub); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.a-main--support .a-svn-privacy b { font-size: 11px; color: #fff; background: var(--a-ink); padding: 1px 8px; border-radius: 4px; }

/* ---------- systems：状態から相談先へ ---------- */
.a-main--support .a-svy { display: grid; gap: 22px; }
.a-main--support .a-svy-states { position: relative; padding: 4px; }
.a-main--support .a-svy-btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.a-main--support .a-svy-btn { font: inherit; font-size: 14px; font-weight: 700; text-align: left; line-height: 1.5; background: #fff; border: 1.5px solid var(--a-ink); border-radius: 12px; padding: 12px 14px 12px 36px; position: relative; cursor: pointer; color: var(--a-ink); transition: background-color .2s, box-shadow .2s; }
.a-main--support .a-svy-btn::before { content: ""; position: absolute; left: 12px; top: 16px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--a-ink); }
.a-main--support .a-svy-btn[aria-pressed="true"] { background: var(--a-yellow); box-shadow: 0 8px 20px rgba(23, 27, 31, .12); }
.a-main--support .a-svy-btn[aria-pressed="true"]::before { background: var(--a-ink); box-shadow: inset 0 0 0 3px var(--a-yellow); }
.a-main--support .a-svy-btn:focus-visible { outline: 3px solid var(--a-blue); outline-offset: 2px; }
.a-main--support .a-svy-groups { display: grid; grid-template-columns: minmax(0, 2.3fr) minmax(0, 1.5fr); gap: 0; border-top: 2px solid var(--a-ink); }
.a-main--support .a-svy-dev > div > .a-v { width: 125%; transform: scale(.8); transform-origin: top left; }
.a-main--support .a-svy-g { padding: 16px 16px 4px; display: grid; gap: 14px; align-content: start; }
.a-main--support .a-svy-g--dev { border-left: 2px dashed var(--a-line-strong); background: #F4F5F0; }
.a-main--support .a-svy-gh { font-family: var(--a-display); font-weight: 900; font-size: 17px; }
.a-main--support .a-svy-g--dev .a-svy-gh::after { content: "（引き継ぎ・復旧の流れとは別）"; font-family: var(--a-body); font-size: 12px; font-weight: 500; color: var(--a-sub); margin-left: 4px; }
.a-main--support .a-svy-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.a-main--support .a-svy-route { display: grid; gap: 6px; align-content: start; background: #fff; border: 1px solid var(--a-line-strong); border-radius: 12px; padding: 12px; transition: box-shadow .25s, border-color .25s, opacity .25s; }
.a-main--support .a-svy-state { font-size: 13px; font-weight: 700; }
.a-main--support .a-svy-check { font-size: 12px; color: var(--a-sub); padding-left: 14px; position: relative; }
.a-main--support .a-svy-check::before { content: "↓"; position: absolute; left: 0; color: var(--a-navy); font-weight: 900; }
.a-main--support .a-svy-svc { font-size: 13px; font-weight: 700; color: var(--a-navy); text-decoration: underline; text-underline-offset: 3px; }
.a-main--support .a-svy.has-pick .a-svy-route { opacity: .45; }
.a-main--support .a-svy.has-pick .a-svy-route.is-pick { opacity: 1; border: 2px solid var(--a-ink); box-shadow: 0 0 0 4px var(--a-yellow); }
.a-main--support .a-svy-rel, .a-main--support .a-svy-dev { position: relative; padding: 4px; }
.a-main--support .a-svy-hub { display: grid; grid-template-columns: 90px 1fr; gap: 16px; align-items: center; }
.a-main--support .a-svy-center { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--a-navy); color: #fff; font-size: 14px; }
.a-main--support .a-svy-hub ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.a-main--support .a-svy-hub li { position: relative; background: #fff; border: 1px solid var(--a-line-strong); border-radius: 8px; padding: 6px 10px; display: grid; }
.a-main--support .a-svy-hub li::before { content: ""; position: absolute; left: -16px; top: 50%; width: 14px; border-top: 2px dashed var(--a-navy); }
.a-main--support .a-svy-hub li b { font-size: 13px; } .a-main--support .a-svy-hub li span { font-size: 11.5px; color: var(--a-sub); }
.a-main--support .a-svy-dev > div { max-height: 300px; overflow: hidden; border-radius: 10px; }

/* ---------- 9 分野の図の動き（一度だけ） ---------- */
.a-motion .a-main--support [data-a-reveal]:not(.is-in) :is(.a-svw-page, .a-svw-update, .a-sve-buy, .a-sve-link, .a-sve-ops, .a-svl-ads, .a-svl-lp, .a-svl-done li, .a-sva-z, .a-sva-back, .a-svm-st li, .a-svm-pri tbody tr, .a-svs2-frames li, .a-svs2-post, .a-svs2-entries li, .a-svs2-lane, .a-svo-row:not(.a-svo-th), .a-svo-specs > li, .a-svn-path li, .a-svn-outs li, .a-svn-page li, .a-svn-table tbody tr, .a-svy-btn, .a-svy-route) { opacity: 0; }
.a-motion .a-main--support [data-a-reveal].is-in :is(.a-svw-page, .a-sve-buy, .a-sva-z, .a-svs2-frames li, .a-svn-path li, .a-svy-btn) { animation: a-up .45s var(--a-ease) both; animation-delay: calc(var(--i, 0) * 160ms); }
.a-motion .a-main--support [data-a-reveal].is-in .a-sve-link { animation: a-tick .45s ease-out both; animation-delay: calc(.4s + var(--i, 0) * 120ms); }
.a-motion .a-main--support [data-a-reveal].is-in .a-sve-col .a-sve-link { animation-delay: .5s; }
.a-motion .a-main--support [data-a-reveal].is-in :is(.a-sve-ops, .a-svw-update, .a-sva-back, .a-svs2-post, .a-svl-lp, .a-svm-pri) { animation: a-up .5s var(--a-ease) .75s both; }
.a-motion .a-main--support [data-a-reveal].is-in :is(.a-svl-ads) { animation: a-up .5s var(--a-ease) both; }
.a-motion .a-main--support [data-a-reveal].is-in :is(.a-svl-done li, .a-svm-st li, .a-svs2-entries li, .a-svo-row:not(.a-svo-th), .a-svn-outs li, .a-svn-page li, .a-svy-route) { animation: a-up .4s var(--a-ease) both; animation-delay: calc(.6s + var(--i, 0) * 110ms); }
.a-motion .a-main--support [data-a-reveal].is-in :is(.a-svm-pri tbody tr, .a-svn-table tbody tr) { animation: a-up .4s var(--a-ease) both; animation-delay: calc(1s + var(--i, 0) * 120ms); }
.a-motion .a-main--support [data-a-reveal].is-in :is(.a-svs2-lane, .a-svo-specs > li) { animation: a-up .45s var(--a-ease) both; animation-delay: calc(1s + var(--i, 0) * 120ms); }
.a-motion .a-main--support .a-svm-st li.is-gap { transition: box-shadow .3s; }
.a-motion .a-main--support [data-a-reveal].is-in .a-svm-st li.is-gap .a-sv-mark { animation: a-pop .45s var(--a-ease) 1.2s both; }

@media (max-width: 1024px) {
	.a-main--support .a-svw-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.a-main--support .a-svw-page:nth-child(2) .a-svw-arrow { display: none; }
	.a-main--support .a-svl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
	.a-main--support .a-svl-done { grid-column: 1 / -1; }
	.a-main--support .a-sva-zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.a-main--support .a-sva-z:nth-child(2)::after, .a-main--support .a-sva-z:nth-child(2)::before { display: none; }
	.a-main--support .a-svm { grid-template-columns: minmax(0, 1fr); }
	.a-main--support .a-svs2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "board board" "post entries" "lanes lanes"; }
	.a-main--support .a-svs2-arrow { display: none; }
	.a-main--support .a-svn { grid-template-columns: minmax(0, 1fr); }
	.a-main--support .a-svy-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.a-main--support .a-svy-groups { grid-template-columns: minmax(0, 1fr); }
	.a-main--support .a-svy-g--dev { border-left: 0; border-top: 2px dashed var(--a-line-strong); }
}
@media (max-width: 767px) {
	.a-main--support .a-svw-pages { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.a-main--support .a-svw-arrow { right: auto; left: 50%; top: auto; bottom: -32px; width: auto; transform: translateX(-50%); grid-auto-flow: column; gap: 4px; display: grid !important; }
	.a-main--support .a-svw-arrow::before { content: "↓"; font-size: 16px; }
	.a-main--support .a-svw-page:last-child .a-svw-arrow { display: none !important; }
	.a-main--support .a-svw-page .a-svs-in { min-height: 0; }
	.a-main--support .a-svw-update { grid-template-columns: minmax(0, 1fr); }
	.a-main--support .a-sve-lane--ops { display: none; }
	.a-main--support .a-sve-cols { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.a-main--support .a-sve-col:not(:last-child) .a-sve-buy::after { display: none; }
	.a-main--support .a-sve-col:not(:last-child)::after { content: "↓ 次の画面へ"; font-size: 12px; font-weight: 700; color: var(--a-sub); text-align: center; margin-top: 10px; }
	.a-main--support .a-sve-link { padding: 18px 0; }
	.a-main--support .a-sve-buy .a-svs-in { min-height: 0; }
	.a-main--support .a-svl { grid-template-columns: minmax(0, 1fr); }
	.a-main--support .a-svl-lp .a-lp { max-width: 340px; margin: 0 auto; }
	.a-main--support .a-sva-zones { grid-template-columns: minmax(0, 1fr); gap: 34px; }
	.a-main--support .a-sva-z:not(:last-child)::after { right: auto; left: 24px; top: auto; bottom: -28px; width: 0; height: 22px; border-top: 0; border-left: 2px solid var(--a-ink); display: block !important; }
	.a-main--support .a-sva-z:not(:last-child)::before { right: auto; left: 19px; top: auto; bottom: -33px; border: 6px solid transparent; border-top: 9px solid var(--a-ink); border-bottom: 0; display: block !important; }
	.a-main--support .a-sva-back b { margin-left: 0; }
	.a-main--support .a-svm-map { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 16px; }
	.a-main--support .a-svm-st:not(:last-child)::after { display: none; }
	.a-main--support .a-svm-table thead { display: none; }
	.a-main--support .a-svm-table tr { display: grid; grid-template-columns: 28px 1fr; gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--a-line); }
	.a-main--support .a-svm-table th, .a-main--support .a-svm-table td { border: 0; padding: 0; }
	.a-main--support .a-svm-table th { grid-row: 1 / 4; }
	.a-main--support .a-svm-table td::before { content: attr(data-k) "："; font-size: 11px; font-weight: 700; color: var(--a-mute); }
	.a-main--support .a-svs2 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "board" "post" "entries" "lanes"; }
	.a-main--support .a-svs2-frames { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.a-main--support .a-svs2-post .a-svs2-phone { max-width: 300px; margin: 0 auto; }
	.a-main--support .a-svs2-lanes { grid-template-columns: minmax(0, 1fr); }
	.a-main--support .a-svo-th { display: none; }
	.a-main--support .a-svo-row { grid-template-columns: 28px minmax(0, 1fr); gap: 3px 8px; align-items: start; }
	.a-main--support .a-svo-row > .a-svo-mark { grid-row: 1 / 7; }
	.a-main--support .a-svo-row > [role="cell"]:not(.a-svo-mark)::before { content: attr(data-k) "："; font-size: 11px; font-weight: 700; color: var(--a-mute); }
	.a-main--support .a-svo-specs { grid-template-columns: minmax(0, 1fr); }
	.a-main--support .a-svn-half { padding: 12px; }
	.a-main--support .a-svn-path li { font-size: 12px; padding: 6px 4px; }
	.a-main--support .a-svn-outs { grid-template-columns: minmax(0, 1fr); margin-top: 14px; }
	.a-main--support .a-svn-outs::before, .a-main--support .a-svn-outs li::before { display: none; }
	.a-main--support .a-svn-table thead { display: none; }
	.a-main--support .a-svn-table tr { display: grid; gap: 2px; padding: 8px; border-bottom: 1px solid var(--a-line); }
	.a-main--support .a-svn-table td { border: 0; padding: 0; }
	.a-main--support .a-svn-table td::before { content: attr(data-k) "："; font-size: 11px; font-weight: 700; color: var(--a-mute); }
	.a-main--support .a-svy-btns { grid-template-columns: minmax(0, 1fr); }
	.a-main--support .a-svy-hub { grid-template-columns: minmax(0, 1fr); }
	.a-main--support .a-svy-center { aspect-ratio: auto; border-radius: 8px; padding: 6px; }
	.a-main--support .a-svy-hub li::before { display: none; }
}

/* ---------- 見本の見せ方（縮小しすぎず、意味のある部分から見せる） ---------- */
.a-main--support .a-spec--1 .a-spec-in > .a-v, .a-main--support .a-spec--2 .a-spec-in > .a-v { width: 125%; transform: scale(.8); transform-origin: top left; }
.a-main--support .a-scard-thumb .a-doc-head, .a-main--support .a-scard-thumb .a-doc-site, .a-main--support .a-scard-thumb .a-spr-p, .a-main--support .a-scard-thumb .a-lk-head { display: none; }
.a-main--support .a-spec .a-doc-lead, .a-main--support .a-spec .a-spr-p { display: none; }
@media (max-width: 767px) {
	.a-main--support .a-spec--1 .a-spec-in > .a-v, .a-main--support .a-spec--2 .a-spec-in > .a-v { width: 150%; transform: scale(.667); }
}
@media (max-width: 420px) {
	.a-main--support .a-spec--1 .a-spec-in > .a-v, .a-main--support .a-spec--2 .a-spec-in > .a-v { width: 180%; transform: scale(.556); }
}
/* 2.2: 縮小見本の工程図は2列にして、語の途中で折れないようにする */
.a-main--support :is(.a-scard-thumb, .a-spec-in) .a-flow-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.a-main--support :is(.a-scard-thumb, .a-spec-in) .a-flow-mini li { box-shadow: none; padding: 9px 10px; }
.a-main--support .a-flow-mini .a-flow-role { margin-left: 4px; font-size: 10px; }
/* 2.2: 縮小見本の資料見開きは左ページ（比較表）だけを見せ、表の文字が縦に折れないようにする */
.a-main--support :is(.a-scard-thumb, .a-spec--1, .a-spec--2) .a-spr-book { grid-template-columns: minmax(0, 1fr); }
.a-main--support :is(.a-scard-thumb, .a-spec--1, .a-spec--2) .a-spr-cover,
.a-main--support :is(.a-scard-thumb, .a-spec--1, .a-spec--2) .a-spr-right,
.a-main--support :is(.a-scard-thumb, .a-spec--1, .a-spec--2) .a-spr-pages::before { display: none; }
.a-main--support :is(.a-scard-thumb, .a-spec--1, .a-spec--2) .a-spr-pages { grid-template-columns: minmax(0, 1fr); }
/* 2.2: 縮小見本の絵コンテは字幕帯を省き、場面の絵と字幕（下帯）だけで読めるようにする */
.a-main--support :is(.a-scard-thumb, .a-spec-in) .a-sb-overlay { display: none; }
.a-main--support :is(.a-spec--1, .a-spec--2) .a-sb-shot { display: none; }
.a-main--support :is(.a-scard-thumb, .a-spec-in) .a-sb-cap { display: none; }
.a-main--support :is(.a-scard-thumb, .a-spec-in) .a-sb-frame:not(.is-diagram) .a-sb-art { inset: 16% 10% 8%; }
.a-main--support :is(.a-scard-thumb, .a-spec-in) .a-sb--v .a-sb-frame:not(.is-diagram) .a-sb-art { inset: 18% -24% 10%; }
@media (max-width: 767px) {
	.a-main--support :is(.a-spec--1, .a-spec--2) .a-sb-scenes { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.a-main--support :is(.a-spec--1, .a-spec--2) .a-sb-scene:nth-child(n+3) { display: none; }
}
/* 2.2: スマホでは試作画面が縦積みになるため、概算結果まで切らずに見せる */
@media (max-width: 767px) {
	.a-main--support .a-svy-dev > div { max-height: none; overflow: visible; }
	.a-main--support .a-svy-dev > div > .a-v { width: auto; transform: none; }
}
/* 2.2: 縮小見本のLPは、見出しと広告との対応が先に見えるよう画像の帯を省く */
.a-main--support :is(.a-scard-thumb, .a-spec-in) .a-lp .a-blk--hero > .a-blk-art { display: none; }
.a-main--support :is(.a-scard-thumb, .a-spec-in) .a-lp .a-blk--hero:has(> .a-blk-art) { grid-template-areas: "tx"; }