/* ===== テスト自動化ソリューション 固有 ===== */
/* 課題（.reason流用） */

#pain .reason :is(h3,h4,h5,h6){font-size:var(--fs-cardsub);line-height:1.75}
#pain .reason p{text-wrap:pretty}
.shikashi{text-align:center;font-size:calc(30px * var(--fs-k));font-weight:900;margin:calc(40px * var(--sp-k)) 0 calc(24px * var(--sp-k));letter-spacing:.04em}
.wall{border:1px solid var(--line);max-width:920px;margin:0 auto;background:#fff;border-radius:var(--rd-lg);box-shadow:var(--sh-1);padding:calc(36px * var(--sp-k)) calc(40px * var(--sp-k));text-align:center}
.wall h3{font-size:calc(22px * var(--fs-k));font-weight:900;line-height:1.7;text-wrap:balance}
.wall p{font-size:var(--fs-body);color:var(--ink-soft);margin-top:calc(14px * var(--sp-k));line-height:2;font-weight:500}
/* 空白地帯図 */
.gapfig2 .fig-close{margin-top:calc(4px * var(--sp-k))}

.gapbox{background:#fff;border:1px solid var(--line);border-radius:10px;padding:calc(22px * var(--sp-k)) calc(20px * var(--sp-k));text-align:center}
.gapbox .si{width:38px;height:38px;border-radius:10px;background:var(--sol-soft);display:flex;align-items:center;justify-content:center;margin:0 auto calc(12px * var(--sp-k))}
.gapbox .si svg{width:20px;height:20px;stroke:var(--sol);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.gapbox.mute .si{background:var(--bg-soft)}
.gapbox.mute .si svg{stroke:var(--ink-mute)}
.gapbox :is(h3,h4,h5,h6){font-size:var(--fs-cardsub);font-weight:900}
.gapbox.mute :is(h3,h4,h5,h6){color:var(--ink-soft)}
.gapbox p{font-size:var(--fs-body);color:var(--ink-soft);text-align:left;line-height:1.85;margin-top:calc(10px * var(--sp-k));font-weight:500}
.gapbox .u{font-weight:800;color:var(--ink);border-bottom:2px solid var(--sol);padding-bottom:1px}
.gapbox.hole{border:2px dashed var(--sol);background:var(--sol-soft)}
/* 基本構造図 */
.bstruct{border:1px solid var(--line);display:grid;grid-template-columns:1fr 110px 1fr;align-items:center;max-width:940px;margin:0 auto;background:#fff;border-radius:var(--rd-lg);box-shadow:var(--sh-1);padding:calc(38px * var(--sp-k)) calc(40px * var(--sp-k))}
.bs-pc{background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;padding:calc(16px * var(--sp-k)) calc(18px * var(--sp-k))}
.bs-pc .t{font-family:"Roboto Condensed",sans-serif;font-size:var(--fs-sub);font-weight:700;color:var(--ink-soft);letter-spacing:.08em;margin-bottom:calc(10px * var(--sp-k))}
.bs-tool{background:var(--navy);color:#fff;border-radius:8px;padding:calc(13px * var(--sp-k)) calc(10px * var(--sp-k));text-align:center;font-weight:800;font-size:var(--fs-sub);line-height:1.6}
.bs-arr{display:flex;flex-direction:column;align-items:center;gap:2px;padding:calc(9px * var(--sp-k)) 0;font-size:var(--fs-label);font-weight:700;color:var(--ink-soft)}
.bs-arr svg{width:16px;height:16px;fill:none;stroke:var(--ink-soft);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bs-sim{background:#fff;border:2px solid var(--sol);color:var(--sol);border-radius:8px;padding:calc(11px * var(--sp-k)) calc(10px * var(--sp-k));text-align:center;font-weight:900;font-size:var(--fs-sub)}
.bs-link{border-top:2px dashed var(--ink-mute);position:relative;align-self:end;margin:0 0 calc(38px * var(--sp-k)) calc(-21px * var(--sp-k))}
.bs-link::before,.bs-link::after{content:"";position:absolute;top:-4.5px;width:7px;height:7px;border-radius:50%;background:var(--ink-mute)}
.bs-link::before{left:-2px}
.bs-link::after{right:-4px}
.bs-tgt{border:2px solid var(--navy);border-radius:12px;padding:calc(24px * var(--sp-k)) calc(18px * var(--sp-k));text-align:center;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.bs-tgt b{display:block;font-size:var(--fs-body);font-weight:900;line-height:1.8}
.bs-tgt span{display:block;font-size:var(--fs-label);color:var(--ink-soft);font-weight:600;margin-top:calc(4px * var(--sp-k))}
/* 構成イメージ図 */
.cfg{border:1px solid var(--line);background:#fff;border-radius:var(--rd-lg);box-shadow:var(--sh-1);padding:calc(30px * var(--sp-k)) calc(34px * var(--sp-k))}/* 幅は .w-lg（広い図）。生max-width廃止 2026-08-16 */
.cfg-note{grid-column:4/7;grid-row:1;justify-self:center;width:max-content;white-space:nowrap;font-size:var(--fs-body);font-weight:800;color:var(--sol);text-align:center;padding-top:calc(20px * var(--sp-k));position:relative;z-index:1}
.cfg-arr{grid-column:5;grid-row:2;display:flex;align-items:center;margin:calc(8px * var(--sp-k)) calc(4px * var(--sp-k)) calc(12px * var(--sp-k));position:relative;z-index:1}
.cfg-arr svg{width:100%;height:auto;display:block;fill:none;stroke:var(--sol);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cfg-row{display:grid;grid-template-columns:1fr 34px 1fr 34px 1.4fr 34px 1fr;grid-template-rows:auto auto auto;gap:0 calc(6px * var(--sp-k));align-items:stretch;position:relative}
.cfg-zone{grid-column:3/6;grid-row:1/4;background:color-mix(in oklab,var(--sol) 6%,#fff);border-radius:12px;margin:0 calc(-20px * var(--sp-k));position:relative}
.cfg-zone::after{content:"テスト対象領域";position:absolute;left:16px;bottom:10px;font-size:calc(12.5px * var(--fs-k));font-weight:800;color:var(--sol);letter-spacing:.04em}
.cfg-row>.c1{grid-column:1}.cfg-row>.c2{grid-column:2}.cfg-row>.c3{grid-column:3}.cfg-row>.c4{grid-column:4}.cfg-row>.c5{grid-column:5}.cfg-row>.c6{grid-column:6}.cfg-row>.c7{grid-column:7}
.cfg-row>:not(.cfg-note):not(.cfg-arr):not(.cfg-zone){grid-row:3;z-index:1}
.cfg .nd{display:flex;flex-direction:column;align-items:center;gap:calc(10px * var(--sp-k));padding:calc(6px * var(--sp-k)) calc(4px * var(--sp-k)) calc(36px * var(--sp-k))}
.bubs{display:flex;gap:calc(8px * var(--sp-k));flex-wrap:wrap;justify-content:center;align-items:flex-end;align-content:flex-end;min-height:88px}
.bubs.low{min-height:0;align-items:flex-start;margin-top:2px}
.bub{border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);padding:calc(10px * var(--sp-k)) calc(13px * var(--sp-k));text-align:center;max-width:158px}
.bub b{display:block;font-size:var(--fs-sub);font-weight:900}
.bub span{display:block;font-size:var(--fs-label);color:var(--ink-soft);line-height:1.55;margin-top:calc(3px * var(--sp-k));font-weight:600}
.bub.d{background:var(--sol);border-color:var(--sol)}
.bub.d b{color:#fff}
.bub.d span{color:color-mix(in oklab,var(--sol) 18%,#fff)}
.c5 .bubs{flex-wrap:nowrap}
.c5 .bubs .bub{flex:0 1 auto;max-width:139px;min-width:0;padding:calc(8px * var(--sp-k)) calc(9px * var(--sp-k))}
.c3 .bub{max-width:200px}
.cfg .nd .ic{width:46px;height:46px}
.cfg .nd .ic svg{width:100%;height:100%;fill:none;stroke:var(--sol);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cfg .nd .lb{font-size:var(--fs-body);font-weight:900}
.cfg .ar{display:flex;align-items:center;justify-content:center;align-self:start;margin-top:calc(114px * var(--sp-k));height:26px}
.cfg .ar svg{width:26px;height:26px;fill:none;stroke:var(--navy);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* どこまで自動化 */
.howfar{display:grid;grid-template-columns:0.92fr 1.08fr;gap:calc(24px * var(--sp-k));align-items:start}/* 幅は .w-md（2カラム＝基本1080）。生max-width廃止 2026-08-16 */
.hf-media{aspect-ratio:4/3;width:100%;object-fit:cover;border-radius:14px;display:block}

/* なぜ実現できるのか（.reason流用） */

.reason .more{margin-top:calc(4px * var(--sp-k));font-size:var(--fs-sub)}/* 補足参照リンク｜本体は共通 .more.sol */
.reason .more svg{width:13px;height:13px}
/* 段階導入（stage-flow流用） */
/* .steps-sf の幅指定は廃止（.cards.c3 に .w-lg を付与） 2026-08-16 */
.steps-sf .stage{display:flex;flex-direction:column;width:100%;flex:1}
.steps-sf .stage .ok{align-self:stretch;text-align:center;margin-top:auto;font-size:var(--fs-label);padding:calc(6px * var(--sp-k)) calc(10px * var(--sp-k))}
.steps-sf .stage ul{margin-bottom:calc(16px * var(--sp-k))}
/* 提供範囲（ゾーン背面重ね） */
.scope-panel{max-width:1160px;margin:0 auto}
.ta-flow{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-end;gap:calc(6px * var(--sp-k)) 0;margin-top:calc(28px * var(--sp-k))}
.ta-flow .step{font-size:var(--fs-sub);padding:calc(13px * var(--sp-k)) calc(20px * var(--sp-k)) calc(13px * var(--sp-k)) calc(24px * var(--sp-k));margin-left:calc(-4px * var(--sp-k))}
.ta-flow .step:first-child,.ta-zone .step:first-child{margin-left:0}
.ta-flow .step.e{background:color-mix(in oklab,var(--navy) 80%,#fff);margin-bottom:calc(12px * var(--sp-k))}
.ta-flow .step.d{background:var(--sol)}
.ta-flow .step:first-child{padding-left:calc(14px * var(--sp-k))}
.ta-zone{display:flex;flex-wrap:nowrap;gap:0;background:var(--sol-soft);border:1px dashed color-mix(in oklab,var(--sol) 40%,#fff);border-radius:12px;padding:calc(42px * var(--sp-k)) calc(12px * var(--sp-k)) calc(12px * var(--sp-k));position:relative;margin-left:calc(3px * var(--sp-k))}
.ta-zone::before{content:"テスト自動化の範囲";position:absolute;top:13px;left:0;right:0;text-align:center;font-size:calc(14px * var(--fs-k));font-weight:800;color:var(--sol);letter-spacing:.05em}
.scope-panel .sec-note{margin:calc(26px * var(--sp-k)) auto 0}
.scope-panel .dom-s{margin-bottom:calc(6px * var(--sp-k))}@media(max-width:1100px){.cfg-row{grid-template-columns:1fr 26px 1fr 26px 1.4fr 26px 1fr}}@media(max-width:980px){.howfar{grid-template-columns:1fr}.hf-media{max-width:560px;margin:0 auto;width:100%}}@media(max-width:900px){
.ta-flow{flex-direction:column;align-items:stretch;gap:calc(8px * var(--sp-k))}
.ta-flow .step{text-align:center;margin-left:0}
.ta-flow .step.e{margin-bottom:0}
.ta-zone{flex-direction:column;align-items:stretch;margin-left:0;padding:calc(38px * var(--sp-k)) calc(10px * var(--sp-k)) calc(10px * var(--sp-k))}

.cfg-row{display:flex;flex-direction:column;gap:calc(4px * var(--sp-k));align-items:stretch}
.cfg-arr{display:none}
.cfg-note{white-space:normal;width:auto;justify-self:auto;align-self:center;padding-top:0;margin:0 0 calc(8px * var(--sp-k))}
.cfg-zone{display:none}
.cfg .ar svg{transform:rotate(90deg)}
.cfg .ar{align-self:center;margin-top:0;height:auto}
.cfg .nd{padding-bottom:calc(10px * var(--sp-k))}
.bubs{min-height:0}
.bstruct{grid-template-columns:1fr;padding:calc(28px * var(--sp-k)) calc(24px * var(--sp-k))}
.bs-link{width:2px;height:44px;border-top:none;border-left:2px dashed var(--ink-mute);margin:calc(-12px * var(--sp-k)) auto calc(6px * var(--sp-k));align-self:center}
.bs-link::before{left:-4.5px;top:-2px}
.bs-link::after{right:auto;left:-4.5px;top:auto;bottom:-2px}
.shikashi{font-size:calc(24px * var(--fs-k))}
}@media(max-width:640px){.defs{grid-template-columns:1fr}}