@charset "UTF-8";
/* コーポレートITサポート（service-corporate-it.html）固有。共通部品は service-detail.css */
.ci .ib { display: inline-block; }
.ci .svcTtl span.ib { display: inline-block; margin-bottom: 0; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; }

/* ===== 導入（コーポレートITとは） ===== */
.ciIntro { margin-top: calc(204 / var(--screen-w) * 100vw); padding: calc(104 / var(--screen-w) * 100vw) calc(112 / var(--screen-w) * 100vw) calc(82 / var(--screen-w) * 100vw) calc(113 / var(--screen-w) * 100vw); }
.ciIntro-txt { width: calc(411 / var(--screen-w) * 100vw); margin-top: calc(-7 / var(--screen-w) * 100vw); }
.ciIntro h2 em { color: #1048a8; }
.svcIntro.ciIntro p { width: auto; margin-top: calc(60 / var(--screen-w) * 100vw); color: var(--txt); letter-spacing: 0; line-height: 2.12; }
.ciScope { position: relative; width: calc(756 / var(--screen-w) * 100vw); padding: calc(40 / var(--screen-w) * 100vw) calc(35 / var(--screen-w) * 100vw) calc(18 / var(--screen-w) * 100vw); border: 1.5px solid var(--btn); border-radius: calc(8 / var(--screen-w) * 100vw); }
.ciScope-ttl { position: absolute; top: calc(-16 / var(--screen-w) * 100vw); left: calc(33 / var(--screen-w) * 100vw); padding: 0 calc(4 / var(--screen-w) * 100vw); background: #fff; color: var(--btn); font-size: calc(26 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.5; }
.ciScope-row { grid-template-columns: 1fr 1fr; gap: calc(22 / var(--screen-w) * 100vw); }
.ciScope-box { overflow: hidden; border: 1px solid #cbd6e7; border-radius: calc(4 / var(--screen-w) * 100vw); background: #fff; }
.ciScope-box h4 { background: #e9edf5; color: #334b6d; font-size: calc(17 / var(--fs-w) * 100vw); font-weight: 500; line-height: calc(49 / var(--screen-w) * 100vw); text-align: center; }
.ciScope-box ul { padding: calc(11 / var(--screen-w) * 100vw) calc(10 / var(--screen-w) * 100vw) calc(10 / var(--screen-w) * 100vw) calc(25 / var(--screen-w) * 100vw); }
.ciScope-box li { position: relative; color: #37465c; font-size: calc(17 / var(--fs-w) * 100vw); line-height: calc(30 / var(--screen-w) * 100vw); }
.ciScope-box li::before { content: ""; position: absolute; top: 50%; left: calc(-11 / var(--screen-w) * 100vw); width: calc(4 / var(--screen-w) * 100vw); height: calc(5 / var(--screen-w) * 100vw); border-radius: 50%; background: #7593bd; transform: translateY(-50%); }
.ciScope-box.-dark h4 { background: #2854a0; color: #fff; }
.ciScope-corp { position: relative; margin: calc(38 / var(--screen-w) * 100vw) calc(-19 / var(--screen-w) * 100vw) 0 calc(-21 / var(--screen-w) * 100vw); padding: calc(46 / var(--screen-w) * 100vw) calc(19 / var(--screen-w) * 100vw) calc(22 / var(--screen-w) * 100vw) calc(21 / var(--screen-w) * 100vw); background: #edf1f9; }
.ciScope-sub { position: absolute; top: calc(-16 / var(--screen-w) * 100vw); left: calc(24 / var(--screen-w) * 100vw); color: #2854a0; font-size: calc(24 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.5; }
.ciScope-box.-base { margin-top: calc(13 / var(--screen-w) * 100vw); }
.ciScope-box.-base h4 { background: #dce5f4; font-size: calc(18 / var(--fs-w) * 100vw); line-height: calc(44 / var(--screen-w) * 100vw); }
.ciScope-box.-base ul { gap: calc(36 / var(--screen-w) * 100vw); padding: calc(7 / var(--screen-w) * 100vw) calc(10 / var(--screen-w) * 100vw) calc(9 / var(--screen-w) * 100vw) calc(36 / var(--screen-w) * 100vw); }

/* ===== お悩み（見えにくいコーポレートIT / すれ違い） ===== */
.ciIssue { position: relative; padding: calc(122 / var(--screen-w) * 100vw) 0 calc(175 / var(--screen-w) * 100vw); background: var(--btn); }
.ciIssue::after { content: ""; position: absolute; top: calc(100% - 1px); left: calc(50% - calc(66 / var(--screen-w) * 100vw)); width: calc(132 / var(--screen-w) * 100vw); height: calc(45 / var(--screen-w) * 100vw); background: var(--btn); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.ciIssue-card { width: calc(1449 / var(--screen-w) * 100vw); margin: 0 auto; padding: calc(69 / var(--screen-w) * 100vw) 0 calc(49 / var(--screen-w) * 100vw); border-radius: calc(20 / var(--screen-w) * 100vw); background: #fff; }
.ciIssue-card + .ciIssue-card { margin-top: calc(40 / var(--screen-w) * 100vw); padding: calc(63 / var(--screen-w) * 100vw) 0 calc(64 / var(--screen-w) * 100vw); }
.ciIssue-lead { width: calc(827 / var(--screen-w) * 100vw); margin: calc(37 / var(--screen-w) * 100vw) auto 0; font-size: calc(17 / var(--fs-w) * 100vw); line-height: 2.12; }
/* 見えにくさの図: 同じ幅の4層（下ほど薄い）。下半分はグラデーション。表示されたら上から順に出る（common.js の data-inview → is-in） */
.ciPyr { position: relative; width: calc(1173 / var(--screen-w) * 100vw); height: calc(629 / var(--screen-w) * 100vw); margin: 0 auto; }
.ciPyr::before { content: ""; position: absolute; top: calc(31 / var(--screen-w) * 100vw); left: 0; right: 0; height: calc(598 / var(--screen-w) * 100vw); border-radius: calc(20 / var(--screen-w) * 100vw); background: linear-gradient(#fff 26%, #bbc7d9 60%, #7189b0 99%); }
.ciPyr-axis::before { content: ""; position: absolute; top: calc(61 / var(--screen-w) * 100vw); left: calc(126.7 / var(--screen-w) * 100vw); width: calc(186.3 / var(--screen-w) * 100vw); height: calc(113.5 / var(--screen-w) * 100vw); border: solid #7590b7; border-width: 0 0 calc(1.68 / var(--screen-w) * 100vw) calc(1.68 / var(--screen-w) * 100vw); }
.ciPyr-axis li { position: absolute; top: 0; left: calc(74 / var(--screen-w) * 100vw); display: flex; align-items: center; justify-content: center; width: calc(107 / var(--screen-w) * 100vw); height: calc(107 / var(--screen-w) * 100vw); border-radius: 50%; background: #d0d8eb; font-size: calc(17 / var(--fs-w) * 100vw); line-height: 1.5; }
.ciPyr-axis li + li { top: calc(121 / var(--screen-w) * 100vw); }
.ciPyr-list { position: absolute; top: calc(80 / var(--screen-w) * 100vw); left: calc(313 / var(--screen-w) * 100vw); width: calc(537 / var(--screen-w) * 100vw); height: calc(521 / var(--screen-w) * 100vw); padding: calc(20 / var(--screen-w) * 100vw) calc(21 / var(--screen-w) * 100vw) 0; border: 1px dashed #c9c9c9; border-radius: calc(7 / var(--screen-w) * 100vw); }
.ciPyr-list li { overflow: hidden; height: calc(109 / var(--screen-w) * 100vw); border: 1px solid #d5dfed; border-radius: calc(4 / var(--screen-w) * 100vw); background: #f5f7fb; text-align: center; }
.ciPyr-list li + li { margin-top: calc(13 / var(--screen-w) * 100vw); }
.ciPyr-list li:nth-child(2) { background: rgba(245, 247, 251, .75); }
.ciPyr-list li:nth-child(3) { margin-top: calc(12 / var(--screen-w) * 100vw); background: rgba(245, 247, 251, .65); }
.ciPyr-list li:nth-child(4) { background: rgba(245, 247, 251, .55); }
.ciPyr-list h3 { background: #2854a0; color: #fff; font-size: calc(18 / var(--fs-w) * 100vw); font-weight: 500; line-height: calc(37 / var(--screen-w) * 100vw); }
.ciPyr-list li:nth-child(2) h3 { background: #3d64a2; }
.ciPyr-list li:nth-child(3) h3 { background: #5776a8; }
.ciPyr-list li:nth-child(4) h3 { background: #7189b0; }
.ciPyr-list p { padding: calc(11 / var(--screen-w) * 100vw) calc(10 / var(--screen-w) * 100vw) 0; font-size: calc(17 / var(--fs-w) * 100vw); line-height: 1.41; }
.ciPyr-note { position: absolute; top: calc(80 / var(--screen-w) * 100vw); left: calc(936 / var(--screen-w) * 100vw); display: flex; align-items: center; justify-content: center; width: calc(151 / var(--screen-w) * 100vw); height: calc(151 / var(--screen-w) * 100vw); border-radius: 50%; background: #d0d8eb; color: #2854a0; font-size: calc(17 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.53; text-align: center; }
.ciPyr-note::after { content: ""; position: absolute; top: calc(113 / var(--screen-w) * 100vw); left: calc(66 / var(--screen-w) * 100vw); width: calc(19 / var(--screen-w) * 100vw); height: calc(374 / var(--screen-w) * 100vw); background: url(../img/service-corporate-it/arrow-down-w.svg) center top / 100% 100% no-repeat; transform-origin: top; }
.ciPyr.is-wait li, .ciPyr.is-wait .ciPyr-note { opacity: 0; }
.ciPyr.is-wait .ciPyr-note::after { transform: scaleY(0); }
.ciPyr.is-in li { animation: ciLayerIn .8s cubic-bezier(.22, 1, .36, 1) backwards; }
.ciPyr.is-in li:nth-child(2) { animation-delay: .35s; }
.ciPyr.is-in li:nth-child(3) { animation-delay: .7s; }
.ciPyr.is-in li:nth-child(4) { animation-delay: 1.05s; }
.ciPyr.is-in .ciPyr-note { animation: ciFade .8s .2s backwards; }
.ciPyr.is-in .ciPyr-note::after { animation: ciGrowDown 1.6s .6s cubic-bezier(.45, 0, .2, 1) backwards; }
@keyframes ciLayerIn { from { opacity: 0; transform: translateY(calc(-16 / var(--screen-w) * 100vw)); } }
@keyframes ciFade { from { opacity: 0; } }
@keyframes ciGrowDown { from { transform: scaleY(0); } }
.ciIssue-tags { justify-content: center; gap: calc(5 / var(--screen-w) * 100vw); margin-bottom: calc(14 / var(--screen-w) * 100vw); }
.ciIssue-tags li { width: calc(182 / var(--screen-w) * 100vw); border-radius: calc(4 / var(--screen-w) * 100vw); background: #e9edf6; color: #2854a0; font-size: calc(20 / var(--fs-w) * 100vw); font-weight: 500; line-height: calc(36 / var(--screen-w) * 100vw); text-align: center; }
.ciCycle-wrap { width: calc(1246 / var(--screen-w) * 100vw); margin: calc(57 / var(--screen-w) * 100vw) auto 0; }
.ciCycle { position: relative; aspect-ratio: 1246 / 515; background: url(../img/service-corporate-it/cycle.svg) 0 0 / 100% 100% no-repeat; color: #34465f; font-size: calc(18 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.42; text-align: center; }
.ciCycle > p { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.ciCycle-gap { top: calc(1 / 515 * 100%); left: calc(614 / 1246 * 100%); color: #2854a0; font-size: calc(21 / var(--fs-w) * 100vw); }
.ciCycle-trust { top: calc(203 / 515 * 100%); left: calc(626.5 / 1246 * 100%); color: #2854a0; font-size: calc(19.2 / var(--fs-w) * 100vw); line-height: 1.3; }
.ciCycle-ttl { top: calc(232 / 515 * 100%); left: calc(349 / 1246 * 100%); color: #233d66; font-size: calc(22 / var(--fs-w) * 100vw); line-height: 1.23; }
.ciCycle-ttl.-mg { left: calc(879.5 / 1246 * 100%); }
.ciCycle-same { top: calc(414 / 515 * 100%); left: calc(614 / 1246 * 100%); color: #426391; font-size: calc(20 / var(--fs-w) * 100vw); }
.ciCycle li { position: absolute; display: flex; align-items: center; justify-content: center; width: calc(119 / 1246 * 100%); aspect-ratio: 1; border-radius: 50%; background: #e9edf6; white-space: nowrap; }
.ciCycle li.-dark { background: #2854a0; color: #fff; }
.ciCycle .c1 { top: calc(39 / 515 * 100%); left: calc(288 / 1246 * 100%); }
.ciCycle .c2 { top: calc(207 / 515 * 100%); left: calc(456 / 1246 * 100%); }
.ciCycle .c3 { top: calc(368 / 515 * 100%); left: calc(288 / 1246 * 100%); }
.ciCycle .c4 { top: calc(204 / 515 * 100%); left: calc(124 / 1246 * 100%); }
.ciCycle .c5 { top: calc(39 / 515 * 100%); left: calc(820 / 1246 * 100%); }
.ciCycle .c6 { top: calc(204 / 515 * 100%); left: calc(985 / 1246 * 100%); }
.ciCycle .c7 { top: calc(368 / 515 * 100%); left: calc(820 / 1246 * 100%); }
.ciCycle .c8 { top: calc(207 / 515 * 100%); left: calc(670 / 1246 * 100%); }
.ciCycle .c9 { top: calc(9 / 515 * 100%); left: calc(1102 / 1246 * 100%); width: calc(141 / 1246 * 100%); }
.ciCycle .c10 { top: calc(387 / 515 * 100%); left: 0; width: calc(128 / 1246 * 100%); }
/* 負のサイクルの矢じり: 円周上の4つを、表示されたらゆっくり時計回りに回す */
.ciCycle-flow { position: absolute; inset: 0; width: 100%; height: 100%; fill: #5277af; }
.ciCycle-flow g { transform-box: view-box; transform-origin: 349.5px 263px; }
.ciCycle-flow g.-mg { transform-origin: 879.5px 263px; }
.ciCycle.is-in .ciCycle-flow g { animation: ciSpin 14s linear infinite; }
@keyframes ciSpin { to { transform: rotate(1turn); } }
/* 外側の2本（→会社を離脱する／→別のデジタル推進部門を作る）は、矢じりが曲線に沿って進む（11/10 Figmaコメント） */
.ciCycle-out { offset-distance: 0%; offset-rotate: auto; opacity: 0; }
.ciCycle.is-in .ciCycle-out { animation: ciOut 3.5s ease-in-out infinite; }
@keyframes ciOut { 0% { offset-distance: 4%; opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { offset-distance: 92%; opacity: 0; } }

/* ===== サービス内容 ===== */
.ciService { padding: calc(123 / var(--screen-w) * 100vw) 0 calc(166 / var(--screen-w) * 100vw); }
.ciService > .svcTtl em { color: var(--btn); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: calc(14 / var(--screen-w) * 100vw); }
.ciService-lead { margin-top: calc(32 / var(--screen-w) * 100vw); font-size: calc(18 / var(--fs-w) * 100vw); line-height: 1.4; text-align: center; }
/* 現状 / 目指す姿: PCは配置を固定（Figma 641:5833 の座標）。真ん中の矢印「会話が回る伴走支援」と、目指す姿の中央の「会話が回る」の回転矢印 */
.ciCompare { position: relative; width: calc(1330 / var(--screen-w) * 100vw); height: calc(491 / var(--screen-w) * 100vw); margin: calc(76 / var(--screen-w) * 100vw) auto 0; }
.ciCompare-now, .ciCompare-goal { position: absolute; top: calc(16 / var(--screen-w) * 100vw); left: 0; width: calc(380 / var(--screen-w) * 100vw); height: calc(475 / var(--screen-w) * 100vw); border: 1px dashed #797979; border-radius: calc(8 / var(--screen-w) * 100vw); text-align: center; }
.ciCompare-goal { left: calc(397 / var(--screen-w) * 100vw); width: calc(933 / var(--screen-w) * 100vw); border: 2px solid #315daa; }
.ciCompare h3 { position: absolute; top: calc(-14 / var(--screen-w) * 100vw); left: 50%; padding: 0 calc(7 / var(--screen-w) * 100vw); background: #fff; color: #010101; font-size: calc(24 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.42; transform: translateX(-50%); white-space: nowrap; }
.ciCompare-goal h3 { top: calc(-18 / var(--screen-w) * 100vw); left: calc(493 / var(--screen-w) * 100vw); padding: 0 calc(6 / var(--screen-w) * 100vw); color: var(--btn); font-size: calc(23 / var(--fs-w) * 100vw); line-height: 1.57; }
.ciCompare-card { position: absolute; top: calc(41 / var(--screen-w) * 100vw); left: calc(28 / var(--screen-w) * 100vw); width: calc(322 / var(--screen-w) * 100vw); height: calc(154 / var(--screen-w) * 100vw); padding-top: calc(25 / var(--screen-w) * 100vw); border-radius: calc(10 / var(--screen-w) * 100vw); background: #e4eef9; }
.ciCompare-now .ciCompare-card + .ciCompare-gap + .ciCompare-card { top: calc(279 / var(--screen-w) * 100vw); }
.ciCompare h4 { color: var(--btn); font-size: calc(22 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.5; }
.ciCompare h4 img { position: absolute; top: calc(15 / var(--screen-w) * 100vw); left: calc(26 / var(--screen-w) * 100vw); width: calc(41 / var(--screen-w) * 100vw); }
.ciCompare p { margin-top: calc(13.5 / var(--screen-w) * 100vw); color: #010101; font-size: calc(17 / var(--fs-w) * 100vw); line-height: 1.65; }
.ciCompare-gap { position: absolute; top: calc(207 / var(--screen-w) * 100vw); left: calc(19 / var(--screen-w) * 100vw); width: calc(340 / var(--screen-w) * 100vw); margin: 0 !important; border: 1px dashed #3160b1; border-radius: calc(29 / var(--screen-w) * 100vw); color: var(--btn) !important; font-size: calc(22 / var(--fs-w) * 100vw) !important; font-weight: 500; line-height: calc(55 / var(--screen-w) * 100vw) !important; }
.ciCompare-arrow { position: absolute; top: calc(98 / var(--screen-w) * 100vw); left: calc(341 / var(--screen-w) * 100vw); z-index: 1; display: flex; align-items: center; justify-content: center; width: calc(102 / var(--screen-w) * 100vw); height: calc(275 / var(--screen-w) * 100vw); margin: 0 !important; padding-right: calc(10 / var(--screen-w) * 100vw); background: #2854a0; clip-path: polygon(0 0, 89.6% 0, 100% 50%, 89.6% 100%, 0 100%); color: #fff !important; font-size: calc(22 / var(--fs-w) * 100vw) !important; font-weight: 500; line-height: 1 !important; writing-mode: vertical-rl; letter-spacing: .05em; }
.ciCompare-card.-top { top: calc(50 / var(--screen-w) * 100vw); left: calc(313 / var(--screen-w) * 100vw); width: calc(361 / var(--screen-w) * 100vw); padding-top: calc(28 / var(--screen-w) * 100vw); border: 1px solid #cbd9ee; }
.ciCompare-card.-top h4 img { top: calc(20 / var(--screen-w) * 100vw); left: calc(33 / var(--screen-w) * 100vw); }
.ciCompare-card.-top h4 img + img, .ciCompare-pair .ciCompare-card + .ciCompare-card h4 img { left: auto; right: calc(25 / var(--screen-w) * 100vw); }
.ciCompare p.ciCompare-key { display: table; margin: 0 auto; padding: 0 calc(3 / var(--screen-w) * 100vw); border-bottom: 1px solid #010101; font-size: calc(20 / var(--fs-w) * 100vw); line-height: 1.5; }
.ciCompare-key + p { margin-top: calc(12 / var(--screen-w) * 100vw) !important; line-height: 1.5 !important; }
.ciCompare-pair .ciCompare-card { top: calc(284 / var(--screen-w) * 100vw); left: calc(89 / var(--screen-w) * 100vw); width: calc(377 / var(--screen-w) * 100vw); padding-top: calc(24 / var(--screen-w) * 100vw); border-radius: calc(12 / var(--screen-w) * 100vw); }
.ciCompare-pair .ciCompare-card + .ciCompare-card { left: calc(520 / var(--screen-w) * 100vw); }
.ciCompare-pair h4 img { top: calc(19 / var(--screen-w) * 100vw); left: calc(30 / var(--screen-w) * 100vw); }
.ciCompare-pair p.ciCompare-key { margin-top: calc(2 / var(--screen-w) * 100vw); }
.ciCompare-loop { position: absolute; top: calc(212 / var(--screen-w) * 100vw); left: calc(427 / var(--screen-w) * 100vw); z-index: 1; display: flex; align-items: center; justify-content: center; width: calc(126 / var(--screen-w) * 100vw); height: calc(126 / var(--screen-w) * 100vw); border-radius: 50%; background: #2854a0; color: #fff; font-size: calc(22 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.5; }
/* 矢印の輪の中心は画像の (89, 87.4)。そこを円の中心 (63, 63) に重ね、回転の軸にもする（11/10 Figmaコメント） */
.ciCompare-loop img { position: absolute; top: calc(-24.4 / var(--screen-w) * 100vw); left: calc(-26 / var(--screen-w) * 100vw); width: calc(172 / var(--screen-w) * 100vw); max-width: none; transform-origin: 51.74% 51.11%; }
.ciCompare-loop.is-in img { animation: ciSpin 9s linear infinite; }
.ciService-ttl { margin-top: calc(110 / var(--screen-w) * 100vw); }
.ciService-ttl em { color: var(--btn); }

/* 支援範囲マトリクス */
.ciMatrix { display: grid; grid-template-columns: calc(273 / var(--screen-w) * 100vw) calc(342 / var(--screen-w) * 100vw) calc(347 / var(--screen-w) * 100vw) calc(368 / var(--screen-w) * 100vw); grid-template-rows: calc(74 / var(--screen-w) * 100vw) calc(120 / var(--screen-w) * 100vw) calc(20 / var(--screen-w) * 100vw) calc(148 / var(--screen-w) * 100vw) calc(18 / var(--screen-w) * 100vw) calc(120 / var(--screen-w) * 100vw) calc(14 / var(--screen-w) * 100vw); width: calc(1330 / var(--screen-w) * 100vw); margin: calc(26 / var(--screen-w) * 100vw) auto 0; }
.ciMatrix-rows { display: contents; }
.ciMatrix-rows li { grid-column: 1 / -1; grid-row: 2; display: flex; align-items: center; margin-right: calc(55 / var(--screen-w) * 100vw); padding-left: calc(45 / var(--screen-w) * 100vw); border-radius: calc(5 / var(--screen-w) * 100vw); background: #ebf1fb; font-size: calc(22 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.5; }
.ciMatrix-rows li:nth-child(2) { grid-row: 4; }
.ciMatrix-rows li:nth-child(3) { grid-row: 6; }
.ciMatrix-col { grid-row: 1 / -1; grid-column: 4; display: grid; grid-template-rows: subgrid; position: relative; z-index: 1; padding: 0 calc(18 / var(--screen-w) * 100vw) 0 calc(30 / var(--screen-w) * 100vw); background: url(../img/service-corporate-it/phase.svg) 0 0 / 100% 100% no-repeat; color: #010101; font-size: calc(17 / var(--fs-w) * 100vw); line-height: calc(27 / var(--screen-w) * 100vw); text-align: center; }
.ciMatrix-col.-first { grid-column: 2; width: calc(362 / var(--screen-w) * 100vw); padding: 0 calc(71 / var(--screen-w) * 100vw) 0 calc(41 / var(--screen-w) * 100vw); background-image: url(../img/service-corporate-it/phase-first.svg); }
.ciMatrix-col.-first + .ciMatrix-col { grid-column: 3; width: calc(368 / var(--screen-w) * 100vw); padding: 0 calc(38 / var(--screen-w) * 100vw) 0 calc(30 / var(--screen-w) * 100vw); }
.ciMatrix-col h4 { align-self: start; width: calc(298 / var(--screen-w) * 100vw); margin: calc(16 / var(--screen-w) * 100vw) 0 0 calc(-7 / var(--screen-w) * 100vw); border-radius: calc(19 / var(--screen-w) * 100vw); background: var(--btn); color: #fff; font-size: calc(20 / var(--fs-w) * 100vw); font-weight: 500; line-height: calc(38 / var(--screen-w) * 100vw); }
.ciMatrix-col.-first h4 { margin-left: calc(-24 / var(--screen-w) * 100vw); }
.ciMatrix-col ul { display: contents; }
.ciMatrix-col li { grid-row: 2; display: flex; align-items: center; justify-content: center; }
.ciMatrix-col li:nth-child(2) { grid-row: 4; }
.ciMatrix-col li:nth-child(3) { grid-row: 6; }
.ciMatrix-col li.-wide { line-height: 2; }
.ciMatrix-all { grid-row: 2 / 7; display: flex; align-items: center; justify-content: center; margin-bottom: calc(10 / var(--screen-w) * 100vw); border-radius: calc(11 / var(--screen-w) * 100vw); background: radial-gradient(circle, #d6d9df calc(1.3 / var(--screen-w) * 100vw), transparent calc(1.8 / var(--screen-w) * 100vw)) calc(3.5 / var(--screen-w) * 100vw) calc(-3 / var(--screen-w) * 100vw) / calc(9 / var(--screen-w) * 100vw) calc(9 / var(--screen-w) * 100vw); }
.ciMatrix-all { background-color: #fff; }

/* コーポレートIT診断 */
.ciDiag { overflow: hidden; width: calc(1650 / var(--screen-w) * 100vw); margin: calc(127 / var(--screen-w) * 100vw) auto 0; padding-top: calc(62 / var(--screen-w) * 100vw); border: 3px solid #a4b7d9; border-radius: calc(48 / var(--screen-w) * 100vw); background: #eaeff8; }
.ciDiag h3 { color: var(--btn); font-family: var(--min); font-size: calc(36 / var(--fs-w) * 100vw); font-weight: 400; line-height: 1.53; text-align: center; }
.ciDiag h4 { margin: calc(59 / var(--screen-w) * 100vw) 0 0 calc(226 / var(--screen-w) * 100vw); font-size: calc(20 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.8; }
.ciDiag-img { align-items: flex-start; width: calc(1194 / var(--screen-w) * 100vw); margin: calc(18 / var(--screen-w) * 100vw) 0 0 calc(225 / var(--screen-w) * 100vw); }
.ciDiag-img img { width: calc(633 / var(--screen-w) * 100vw); }
.ciDiag-img img + img { width: calc(526 / var(--screen-w) * 100vw); margin-top: calc(14 / var(--screen-w) * 100vw); }
.ciDiag-note { width: calc(1194 / var(--screen-w) * 100vw); margin: calc(23 / var(--screen-w) * 100vw) 0 0 calc(225 / var(--screen-w) * 100vw); font-size: calc(14 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.6; text-align: right; }
.ciDiag-msg { margin: calc(33 / var(--screen-w) * 100vw) -3px -3px; padding: calc(37 / var(--screen-w) * 100vw) calc(20 / var(--screen-w) * 100vw) calc(40 / var(--screen-w) * 100vw); background: var(--btn); color: #fff; font-family: var(--min); font-size: calc(32 / var(--fs-w) * 100vw); line-height: 1.56; text-align: center; }

/* ===== 選ばれる理由（共通部品の調整） ===== */
.ci .svcStrength { padding: calc(92 / var(--screen-w) * 100vw) 0 calc(117 / var(--screen-w) * 100vw); }
.ci .svcStrength-list { margin-top: calc(145 / var(--screen-w) * 100vw); }
.ci .svcStrength-list p { color: var(--txt); line-height: 2.24; }
.ci .svcStrength-list li:first-child div { width: calc(689 / var(--screen-w) * 100vw); }
.ci .svcStrength .btn { margin-top: calc(96 / var(--screen-w) * 100vw); }

/* ===== 解決事例（共通部品の調整） ===== */
.ci .svcCase { padding-top: calc(283 / var(--screen-w) * 100vw); }
.ci .svcCase-item { min-height: calc(553 / var(--screen-w) * 100vw); margin-top: calc(28 / var(--screen-w) * 100vw); padding-top: calc(43 / var(--screen-w) * 100vw); padding-bottom: calc(42 / var(--screen-w) * 100vw); }
.ci .svcCase-head + .svcCase-item { margin-top: calc(50 / var(--screen-w) * 100vw); }
.ci .svcCase-item h3 { margin-top: calc(12 / var(--screen-w) * 100vw); }
.ci .svcCase-card { min-height: calc(468 / var(--screen-w) * 100vw); }
.ci .svcCase-card p { line-height: 1.69; }
.ci .svcCase-card + .svcCase-card h4 { margin: calc(16 / var(--screen-w) * 100vw) calc(-12 / var(--screen-w) * 100vw) 0 calc(-1 / var(--screen-w) * 100vw); line-height: 1.53; }
.ci .svcCase-client { margin-top: calc(11 / var(--screen-w) * 100vw); }
.ci .svcCase-card + .svcCase-card p { margin-top: calc(4 / var(--screen-w) * 100vw); line-height: 1.5625; }

/* ===== 費用 ===== */
.ciPrice { padding: calc(173 / var(--screen-w) * 100vw) 0 calc(140 / var(--screen-w) * 100vw); text-align: center; }
.ciPrice > p { margin-top: calc(43 / var(--screen-w) * 100vw); font-size: calc(17 / var(--fs-w) * 100vw); line-height: 2.24; }
.ciPrice .btn { margin-top: calc(84 / var(--screen-w) * 100vw); text-align: left; }

/* ===== 簡易診断・支援の流れ ===== */
.ciGrad { background: url(../img/service-it-capability/flow-bg.webp) center bottom / 100% auto no-repeat, linear-gradient(#fff calc(230 / var(--screen-w) * 100vw), #8ea8c3 calc(1500 / var(--screen-w) * 100vw)); }
.ciTrial { position: relative; padding: calc(62 / var(--screen-w) * 100vw) 0 calc(59 / var(--screen-w) * 100vw); color: #fff; text-align: center; }
.ciTrial::before { content: ""; position: absolute; inset: 0 calc(92 / var(--screen-w) * 100vw) 0 0; z-index: 0; border-radius: 0 calc(251 / var(--screen-w) * 100vw) calc(251 / var(--screen-w) * 100vw) 0; background: var(--btn); }
.ciTrial > * { position: relative; z-index: 1; }
.ciTrial-badge { position: absolute !important; top: calc(43 / var(--screen-w) * 100vw); left: calc(20 / var(--screen-w) * 100vw); width: calc(197 / var(--screen-w) * 100vw); height: calc(144 / var(--screen-w) * 100vw); padding: calc(5 / var(--screen-w) * 100vw) calc(77 / var(--screen-w) * 100vw) 0 0; background: url(../img/service-corporate-it/curve.svg) 0 0 / 100% 100% no-repeat; font-size: calc(23 / var(--fs-w) * 100vw); font-weight: 700; line-height: 1.34; }
.ciTrial-label { font-size: calc(32 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.19; }
.ciTrial h2 { display: inline-block; margin-top: calc(14 / var(--screen-w) * 100vw); padding: 0 calc(12 / var(--screen-w) * 100vw); border-radius: calc(5 / var(--screen-w) * 100vw); background: #fff; color: #29292a; font-family: var(--min); font-size: calc(38 / var(--fs-w) * 100vw); font-weight: 400; line-height: calc(54 / var(--screen-w) * 100vw); }
.ciTrial-txt { margin-top: calc(42 / var(--screen-w) * 100vw); font-size: calc(17 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.82; }
.ciTrial.-bottom .ciTrial-txt { font-size: calc(16 / var(--fs-w) * 100vw); line-height: 1.94; }
.ciTrial .btn { margin-top: calc(22 / var(--screen-w) * 100vw); text-align: left; }
.ci .svcFlow { margin-top: calc(184 / var(--screen-w) * 100vw); padding-bottom: calc(273 / var(--screen-w) * 100vw); }
.ciFlow-head { width: calc(513 / var(--screen-w) * 100vw); }
.ciFlow-head > p { margin-top: calc(22 / var(--screen-w) * 100vw); color: #010101; font-size: calc(16 / var(--fs-w) * 100vw); line-height: 2.625; }
.ci .svcFlow-list { padding: calc(30 / var(--screen-w) * 100vw) calc(25 / var(--screen-w) * 100vw) calc(32 / var(--screen-w) * 100vw) calc(34 / var(--screen-w) * 100vw); }
.ci .svcFlow-list li { padding: calc(32 / var(--screen-w) * 100vw) calc(20 / var(--screen-w) * 100vw) calc(35.5 / var(--screen-w) * 100vw) calc(128 / var(--screen-w) * 100vw); }
.ci .svcFlow-list li:first-child { padding-top: calc(28 / var(--screen-w) * 100vw); }
.ci .svcFlow-list li + li { border-top: 1px solid #d3d6db; }
.ci .svcFlow-list li::before, .ci .svcFlow-list li::after { left: calc(8 / var(--screen-w) * 100vw); }
.ci .svcFlow h3 { font-size: calc(22 / var(--fs-w) * 100vw); font-weight: 500; line-height: 1.16; }
.ci .svcFlow-list p { margin-top: calc(12 / var(--screen-w) * 100vw); color: #414141; font-size: calc(17 / var(--fs-w) * 100vw); line-height: 1.76; }

.ciTrial.-bottom { margin-bottom: calc(161 / var(--screen-w) * 100vw); }
.ciTrial.-bottom::before { inset: 0 calc(203 / var(--screen-w) * 100vw) 0 calc(204 / var(--screen-w) * 100vw); border-radius: calc(54 / var(--screen-w) * 100vw); }
.ci #voice { padding-bottom: calc(177 / var(--screen-w) * 100vw); }

/* ===== よくあるご質問 ===== */
.ci .svcFaq { padding: calc(113 / var(--screen-w) * 100vw) 0 calc(137 / var(--screen-w) * 100vw); }
.ci .svcFaq-list, .ci .svcFaq details { border-color: #c9c9c9; border-style: solid; }
.ci .svcFaq summary { font-size: calc(18 / var(--fs-w) * 100vw); line-height: 1.42; }

/* ===== 1600以下: 図（サイクル・ピラミッド）は枠が固定なので、文字も幅に比例させて円・帯からはみ出さないようにする ===== */
@media (max-width: 1600px) {
  .ciCycle { font-size: calc(18 / var(--screen-w) * 100vw); }
  .ciCycle-gap { font-size: calc(21 / var(--screen-w) * 100vw); }
  .ciCycle-trust { font-size: calc(19.2 / var(--screen-w) * 100vw); }
  .ciCycle-ttl { font-size: calc(22 / var(--screen-w) * 100vw); }
  .ciCycle-same { font-size: calc(20 / var(--screen-w) * 100vw); }
  .ciPyr-list h3 { font-size: calc(18 / var(--screen-w) * 100vw); }
  .ciPyr-axis li, .ciPyr-note, .ciPyr-list p { font-size: calc(17 / var(--screen-w) * 100vw); }
  .ciScope-box h4, .ciScope-box li { font-size: calc(17 / var(--screen-w) * 100vw); }
  .ciScope-box.-base h4 { font-size: calc(18 / var(--screen-w) * 100vw); }
  .ciCompare h4 { font-size: calc(22 / var(--screen-w) * 100vw); }
  .ciCompare p { font-size: calc(17 / var(--screen-w) * 100vw); }
  .ciCompare p.ciCompare-key { font-size: calc(20 / var(--screen-w) * 100vw); }
  .ciCompare-gap, .ciCompare-arrow, .ciCompare-loop { font-size: calc(22 / var(--screen-w) * 100vw) !important; }
  /* 左上の「まずは無料で簡易診断」は曲線の枠ごと文字と同じ比率で大きくする（文字だけ大きくなって角に詰まるのを防ぐ） */
  .ciTrial-badge { top: calc(43 / var(--fs-w) * 100vw); left: calc(20 / var(--fs-w) * 100vw); width: calc(197 / var(--fs-w) * 100vw); height: calc(144 / var(--fs-w) * 100vw); padding: calc(5 / var(--fs-w) * 100vw) calc(77 / var(--fs-w) * 100vw) 0 0; }
}
@media (max-width: 1280px) {
  .ciIntro h2 { font-size: calc(31 / var(--fs-w) * 100vw); }
  .ciScope-box h4 { font-size: calc(13.5 / var(--fs-w) * 100vw); }
  .ciScope-box li { font-size: calc(13 / var(--fs-w) * 100vw); }
  .ciIssue-tags li { width: auto; padding: 0 calc(12 / var(--screen-w) * 100vw); }
  .ciCycle { font-size: calc(13 / var(--fs-w) * 100vw); }
  .ciCycle-gap, .ciCycle-ttl { font-size: calc(17 / var(--fs-w) * 100vw); }
  .ciCycle-trust, .ciCycle-same { font-size: calc(15 / var(--fs-w) * 100vw); }
  .ciCompare h4 { font-size: calc(17 / var(--fs-w) * 100vw); }
  .ciCompare h4 img { width: calc(30 / var(--screen-w) * 100vw); left: calc(14 / var(--screen-w) * 100vw) !important; }
  .ciCompare-card.-top h4 img + img, .ciCompare-pair .ciCompare-card + .ciCompare-card h4 img { left: auto !important; right: calc(14 / var(--screen-w) * 100vw); }
  .ciCompare-gap, .ciCompare-arrow, .ciCompare-loop { font-size: calc(15 / var(--fs-w) * 100vw) !important; }
  .ciPyr-axis li, .ciPyr-note, .ciPyr-list p { font-size: calc(14 / var(--fs-w) * 100vw); }
  .ciPyr-list h3 { font-size: calc(15 / var(--fs-w) * 100vw); }
  .ciCompare p { font-size: calc(13 / var(--fs-w) * 100vw); }
  .ciCompare p.ciCompare-key { font-size: calc(16 / var(--fs-w) * 100vw); }
  .ciMatrix-rows li { padding-left: calc(30 / var(--screen-w) * 100vw); font-size: calc(18 / var(--fs-w) * 100vw); }
  .ciMatrix-col { font-size: calc(14 / var(--fs-w) * 100vw); }
  .ciMatrix-col h4 { font-size: calc(17 / var(--fs-w) * 100vw); }
}

/* ===== 1080以下（文字が相対的に大きいので、図は位置固定をやめて中身に合わせて伸ばす） ===== */
@media (max-width: 1080px) {
  /* 左の文章列が細く縦に伸び、図の枠の下が空くので、文章→図の縦並びにする */
  .ciIntro { display: block; }
  .ciIntro-txt { width: auto; }
  .ciScope { width: auto; margin-top: calc(90 / var(--screen-w) * 100vw); }
  /* 左上の丸いバッジと見出しが重ならないよう、見出しを下げる */
  .ciTrial:not(.-bottom) { padding-top: calc(150 / var(--fs-w) * 100vw); }
  /* サイクル図は白い枠いっぱいまで広げ、文字はデザインと同じ比率で拡大（円からはみ出さない） */
  .ciCycle-wrap { width: calc(1380 / var(--screen-w) * 100vw); }
  .ciCycle { font-size: calc(19.9 / var(--screen-w) * 100vw); }
  .ciCycle-gap { font-size: calc(23.2 / var(--screen-w) * 100vw); }
  .ciCycle-trust { font-size: calc(21.2 / var(--screen-w) * 100vw); }
  .ciCycle-ttl { font-size: calc(24.4 / var(--screen-w) * 100vw); }
  .ciCycle-same { font-size: calc(22.1 / var(--screen-w) * 100vw); }
  .ciPyr { height: auto; padding: calc(80 / var(--screen-w) * 100vw) 0 calc(40 / var(--screen-w) * 100vw) calc(313 / var(--screen-w) * 100vw); }
  .ciPyr::before { bottom: 0; height: auto; }
  .ciPyr-list { position: relative; top: auto; left: auto; height: auto; padding-bottom: calc(20 / var(--screen-w) * 100vw); }
  .ciPyr-list li { height: auto; padding-bottom: calc(10 / var(--screen-w) * 100vw); }
  .ciPyr-list h3 { font-size: calc(14 / var(--fs-w) * 100vw); line-height: 1.8; }
  .ciPyr-list p { font-size: calc(13 / var(--fs-w) * 100vw); }
  .ciCompare { display: flex; gap: calc(70 / var(--screen-w) * 100vw); height: auto; }
  .ciCompare-now, .ciCompare-goal { position: relative; top: auto; left: auto; flex: 0 0 calc(440 / var(--screen-w) * 100vw); height: auto; padding: calc(50 / var(--screen-w) * 100vw) calc(26 / var(--screen-w) * 100vw) calc(30 / var(--screen-w) * 100vw); }
  .ciCompare-goal { flex: 1; }
  .ciCompare-goal h3 { left: 50%; }
  .ciCompare-card, .ciCompare-card.-top, .ciCompare-pair .ciCompare-card { position: relative; top: auto !important; left: auto !important; width: auto; height: auto; padding: calc(26 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw) calc(28 / var(--screen-w) * 100vw); }
  .ciCompare-gap { position: static; width: auto; margin: calc(16 / var(--screen-w) * 100vw) 0 !important; }
  .ciCompare-arrow { top: calc(50% - calc(137 / var(--screen-w) * 100vw)); left: calc(calc(440 / var(--screen-w) * 100vw) - calc(16 / var(--screen-w) * 100vw)); }
  .ciCompare-loop { position: relative; top: auto; left: auto; margin: calc(56 / var(--screen-w) * 100vw) auto; }
  .ciCompare-pair { gap: calc(20 / var(--screen-w) * 100vw); }
  .ciCompare-pair .ciCompare-card { flex: 1; }
}
/* ===== SP ===== */
@media (max-width: 900px) {
  .ci .svcStrength-list li:first-child div { width: 100%; }
  .ciIntro { display: block; margin-top: calc(32 / var(--screen-w) * 100vw); padding: calc(40 / var(--screen-w) * 100vw) calc(20 / var(--screen-w) * 100vw); }
  .ciIntro-txt { width: auto; padding: 0; }
  .svcIntro.ciIntro p { margin-top: calc(16 / var(--screen-w) * 100vw); line-height: 2; }
  .ciScope { width: auto; margin-top: calc(44 / var(--screen-w) * 100vw); padding: calc(32 / var(--screen-w) * 100vw) calc(12 / var(--screen-w) * 100vw) calc(12 / var(--screen-w) * 100vw); }
  .ciScope-ttl { top: calc(-15 / var(--screen-w) * 100vw); left: calc(10 / var(--screen-w) * 100vw); font-size: calc(18 / var(--fs-w) * 100vw); }
  .ciScope-row { grid-template-columns: 1fr; gap: calc(10 / var(--screen-w) * 100vw); }
  .ciScope-box h4 { font-size: calc(14 / var(--fs-w) * 100vw); line-height: calc(38 / var(--screen-w) * 100vw); }
  .ciScope-box ul { padding: calc(6 / var(--screen-w) * 100vw) calc(10 / var(--screen-w) * 100vw) calc(6 / var(--screen-w) * 100vw) calc(24 / var(--screen-w) * 100vw); }
  .ciScope-box li { font-size: calc(13 / var(--fs-w) * 100vw); line-height: calc(26 / var(--screen-w) * 100vw); }
  .ciScope-corp { margin: calc(30 / var(--screen-w) * 100vw) calc(-6 / var(--screen-w) * 100vw) 0; padding: calc(30 / var(--screen-w) * 100vw) calc(6 / var(--screen-w) * 100vw) calc(6 / var(--screen-w) * 100vw); }
  .ciScope-sub { top: calc(-12 / var(--screen-w) * 100vw); left: calc(10 / var(--screen-w) * 100vw); font-size: calc(17 / var(--fs-w) * 100vw); }
  .ciScope-box.-base { margin-top: calc(10 / var(--screen-w) * 100vw); }
  .ciScope-box.-base h4 { font-size: calc(14 / var(--fs-w) * 100vw); line-height: calc(36 / var(--screen-w) * 100vw); }
  .ciScope-box.-base ul { flex-wrap: wrap; gap: 0 calc(24 / var(--screen-w) * 100vw); padding-left: calc(24 / var(--screen-w) * 100vw); }
  .ciIssue { padding: calc(48 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw) calc(56 / var(--screen-w) * 100vw); }
  .ciIssue::after { left: calc(50% - calc(40 / var(--screen-w) * 100vw)); width: calc(80 / var(--screen-w) * 100vw); height: calc(28 / var(--screen-w) * 100vw); }
  .ciIssue-card, .ciIssue-card + .ciIssue-card { width: auto; padding: calc(36 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw) calc(32 / var(--screen-w) * 100vw); border-radius: calc(12 / var(--screen-w) * 100vw); }
  .ciIssue-card + .ciIssue-card { margin-top: calc(24 / var(--screen-w) * 100vw); }
  .ciIssue-lead { width: auto; margin-top: calc(16 / var(--screen-w) * 100vw); font-size: calc(14 / var(--fs-w) * 100vw); line-height: 2; }
  .ciPyr { width: auto; height: auto; margin-top: calc(24 / var(--screen-w) * 100vw); padding: calc(16 / var(--screen-w) * 100vw) calc(12 / var(--screen-w) * 100vw) calc(20 / var(--screen-w) * 100vw); }
  .ciPyr::before { top: 0; bottom: 0; height: auto; border-radius: calc(12 / var(--screen-w) * 100vw); }
  .ciPyr-axis { display: none; }
  .ciPyr-list { position: relative; top: auto; left: auto; width: auto; height: auto; padding: calc(10 / var(--screen-w) * 100vw); }
  .ciPyr-list li { height: auto; }
  .ciPyr-list li + li, .ciPyr-list li:nth-child(3) { margin-top: calc(8 / var(--screen-w) * 100vw); }
  .ciPyr-list h3 { padding: calc(6 / var(--screen-w) * 100vw) calc(8 / var(--screen-w) * 100vw); font-size: calc(13 / var(--fs-w) * 100vw); line-height: 1.5; }
  .ciPyr-list p { padding: calc(8 / var(--screen-w) * 100vw) calc(10 / var(--screen-w) * 100vw); font-size: calc(12 / var(--fs-w) * 100vw); line-height: 1.6; text-align: left; }
  .ciPyr-list p span { display: block; padding-left: 1em; text-indent: -1em; }
  .ciPyr-list p br { display: none; }
  .ciPyr-note { position: relative; top: auto; left: auto; width: auto; height: auto; margin-top: calc(16 / var(--screen-w) * 100vw); padding: calc(8 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw) calc(8 / var(--screen-w) * 100vw) calc(36 / var(--screen-w) * 100vw); border-radius: calc(24 / var(--screen-w) * 100vw); font-size: calc(13 / var(--fs-w) * 100vw); }
  .ciPyr-note br { display: none; }
  .ciPyr-note::after { top: 50%; left: calc(16 / var(--screen-w) * 100vw); width: calc(10 / var(--screen-w) * 100vw); height: calc(26 / var(--screen-w) * 100vw); background-image: url(../img/service-corporate-it/arrow-down.svg); transform: translateY(-50%); }
  .ciPyr.is-wait .ciPyr-note::after { transform: translateY(-50%) scaleY(0); }
  .ciIssue-tags { margin-bottom: calc(12 / var(--screen-w) * 100vw); }
  .ciIssue-tags li { width: auto; padding: 0 calc(10 / var(--screen-w) * 100vw); font-size: calc(13 / var(--fs-w) * 100vw); line-height: calc(28 / var(--screen-w) * 100vw); }
  .ciCycle-wrap { width: auto; margin: calc(24 / var(--screen-w) * 100vw) calc(-16 / var(--screen-w) * 100vw) 0; padding: 0 calc(16 / var(--screen-w) * 100vw) calc(8 / var(--screen-w) * 100vw); overflow-x: auto; }
  .ciCycle { width: calc(760 / var(--screen-w) * 100vw); font-size: calc(11 / var(--fs-w) * 100vw); }
  .ciCycle-gap { font-size: calc(13 / var(--fs-w) * 100vw); }
  .ciCycle-trust { font-size: calc(12 / var(--fs-w) * 100vw); }
  .ciCycle-ttl { font-size: calc(13.5 / var(--fs-w) * 100vw); }
  .ciCycle-same { font-size: calc(12 / var(--fs-w) * 100vw); }
  .ciService { padding: calc(64 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw) calc(56 / var(--screen-w) * 100vw); }
  .ciService > .svcTtl em { text-decoration-thickness: 1px; text-underline-offset: calc(6 / var(--screen-w) * 100vw); }
  .ciService-lead { margin-top: calc(14 / var(--screen-w) * 100vw); font-size: calc(14 / var(--fs-w) * 100vw); line-height: 1.8; text-align: left; }
  .ciCompare { display: block; width: auto; height: auto; margin-top: calc(36 / var(--screen-w) * 100vw); }
  .ciCompare-now, .ciCompare-goal { position: relative; top: auto; left: auto; width: auto; height: auto; padding: calc(32 / var(--screen-w) * 100vw) calc(12 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw); }
  .ciCompare h3, .ciCompare-goal h3 { top: calc(-14 / var(--screen-w) * 100vw); left: 50%; font-size: calc(17 / var(--fs-w) * 100vw); line-height: 1.5; }
  .ciCompare-card, .ciCompare-card.-top, .ciCompare-pair .ciCompare-card { position: relative; top: auto !important; left: auto !important; width: auto; height: auto; padding: calc(14 / var(--screen-w) * 100vw) calc(10 / var(--screen-w) * 100vw); }
  .ciCompare h4 { font-size: calc(16 / var(--fs-w) * 100vw); }
  .ciCompare h4 img, .ciCompare-card.-top h4 img, .ciCompare-pair h4 img, .ciCompare-pair .ciCompare-card + .ciCompare-card h4 img { position: static; width: calc(24 / var(--screen-w) * 100vw); margin-right: calc(6 / var(--screen-w) * 100vw); vertical-align: middle; }
  .ciCompare-card.-top h4 img + img { margin: 0 0 0 calc(6 / var(--screen-w) * 100vw); }
  .ciCompare p { margin-top: calc(8 / var(--screen-w) * 100vw); font-size: calc(13 / var(--fs-w) * 100vw); line-height: 1.7; }
  .ciCompare p.ciCompare-key { margin-top: calc(4 / var(--screen-w) * 100vw); font-size: calc(15 / var(--fs-w) * 100vw); }
  .ciCompare-gap { position: static; width: auto; margin: calc(10 / var(--screen-w) * 100vw) 0 !important; border-radius: calc(20 / var(--screen-w) * 100vw); font-size: calc(14 / var(--fs-w) * 100vw) !important; line-height: calc(38 / var(--screen-w) * 100vw) !important; }
  .ciCompare-arrow { position: relative; top: auto; left: auto; width: 70%; height: calc(56 / var(--screen-w) * 100vw); margin: calc(12 / var(--screen-w) * 100vw) auto calc(28 / var(--screen-w) * 100vw) !important; padding: 0 0 calc(12 / var(--screen-w) * 100vw); clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); font-size: calc(15 / var(--fs-w) * 100vw) !important; writing-mode: horizontal-tb; }
  .ciCompare-loop { position: relative; top: auto; left: auto; width: calc(90 / var(--screen-w) * 100vw); height: calc(90 / var(--screen-w) * 100vw); margin: calc(28 / var(--screen-w) * 100vw) auto; font-size: calc(14 / var(--fs-w) * 100vw); }
  .ciCompare-loop img { top: calc(-17.5 / var(--screen-w) * 100vw); left: calc(-18.6 / var(--screen-w) * 100vw); width: calc(123 / var(--screen-w) * 100vw); }
  .ciCompare-pair { display: block; }
  .ciCompare-pair .ciCompare-card + .ciCompare-card { margin-top: calc(16 / var(--screen-w) * 100vw); }
  .ciService-ttl { margin-top: calc(56 / var(--screen-w) * 100vw); }
  .ciMatrix { display: block; width: auto; margin-top: calc(28 / var(--screen-w) * 100vw); }
  .ciMatrix-rows { display: none; }
  .ciMatrix-col, .ciMatrix-col.-first, .ciMatrix-col.-first + .ciMatrix-col { display: block; width: auto; padding: calc(16 / var(--screen-w) * 100vw); border: 1px solid var(--btn); background: #fff; font-size: calc(13 / var(--fs-w) * 100vw); line-height: 1.7; }
  .ciMatrix-col + .ciMatrix-col { position: relative; margin-top: calc(28 / var(--screen-w) * 100vw); }
  .ciMatrix-col + .ciMatrix-col::before { content: ""; position: absolute; bottom: calc(100% + calc(8 / var(--screen-w) * 100vw)); left: calc(50% - calc(12 / var(--screen-w) * 100vw)); border: solid transparent; border-width: calc(10 / var(--screen-w) * 100vw) calc(12 / var(--screen-w) * 100vw) 0; border-top-color: var(--btn); }
  .ciMatrix-col h4, .ciMatrix-col.-first h4 { width: auto; margin: 0 0 calc(12 / var(--screen-w) * 100vw); font-size: calc(15 / var(--fs-w) * 100vw); line-height: calc(34 / var(--screen-w) * 100vw); }
  .ciMatrix-col ul { display: block; }
  .ciMatrix-col li, .ciMatrix-col li.-wide { display: block; padding: calc(10 / var(--screen-w) * 100vw) calc(12 / var(--screen-w) * 100vw); border-radius: calc(5 / var(--screen-w) * 100vw); background: #ebf1fb; line-height: 1.7; }
  .ciMatrix-col li + li { margin-top: calc(6 / var(--screen-w) * 100vw); }
  .ciMatrix-col li::before { content: attr(data-row); display: block; margin-bottom: calc(2 / var(--screen-w) * 100vw); color: var(--btn); font-size: calc(12 / var(--fs-w) * 100vw); font-weight: 500; }
  .ciMatrix-all { margin: 0; padding: calc(16 / var(--screen-w) * 100vw) 0; }
  .ciDiag { width: auto; margin-top: calc(48 / var(--screen-w) * 100vw); padding-top: calc(32 / var(--screen-w) * 100vw); border-width: 2px; border-radius: calc(20 / var(--screen-w) * 100vw); }
  .ciDiag h3 { padding: 0 calc(12 / var(--screen-w) * 100vw); font-size: calc(19 / var(--fs-w) * 100vw); line-height: 1.6; }
  .ciDiag h4 { margin: calc(20 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw) 0; font-size: calc(14 / var(--fs-w) * 100vw); }
  .ciDiag-img { display: block; width: auto; margin: calc(12 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw) 0; }
  .ciDiag-img img, .ciDiag-img img + img { display: block; width: 100%; margin: 0; }
  .ciDiag-img img + img { margin-top: calc(12 / var(--screen-w) * 100vw); }
  .ciDiag-note { width: auto; margin: calc(8 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw) 0; font-size: calc(11 / var(--fs-w) * 100vw); }
  .ciDiag-msg { margin: calc(20 / var(--screen-w) * 100vw) -2px -2px; padding: calc(20 / var(--screen-w) * 100vw) calc(12 / var(--screen-w) * 100vw); font-size: calc(15 / var(--fs-w) * 100vw); line-height: 1.7; }
  .ciPrice { padding: calc(56 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw) calc(56 / var(--screen-w) * 100vw); }
  .ciPrice > p { margin-top: calc(20 / var(--screen-w) * 100vw); font-size: calc(14 / var(--fs-w) * 100vw); line-height: 2; text-align: left; }
  .ciPrice > p br { display: none; }
  .ciPrice .ib { display: inline; }
  .ciPrice .btn { margin-top: calc(28 / var(--screen-w) * 100vw); }
  .ciGrad { background-size: 200% auto, auto; background-image: url(../img/service-it-capability/flow-bg.webp), linear-gradient(#fff calc(200 / var(--screen-w) * 100vw), #e1e8ef calc(500 / var(--screen-w) * 100vw), #8ea8c3 calc(1800 / var(--screen-w) * 100vw)); }
  .ciTrial, .ciTrial:not(.-bottom) { padding: calc(88 / var(--screen-w) * 100vw) calc(20 / var(--screen-w) * 100vw) calc(44 / var(--screen-w) * 100vw); }
  .ciTrial::before { inset: 0 calc(16 / var(--screen-w) * 100vw) 0 0; border-radius: 0 calc(40 / var(--screen-w) * 100vw) calc(40 / var(--screen-w) * 100vw) 0; }
  .ciTrial.-bottom { padding: calc(44 / var(--screen-w) * 100vw) calc(32 / var(--screen-w) * 100vw) calc(44 / var(--screen-w) * 100vw); margin-bottom: calc(56 / var(--screen-w) * 100vw); }
  .ciTrial.-bottom::before { inset: 0 calc(16 / var(--screen-w) * 100vw); border-radius: calc(20 / var(--screen-w) * 100vw); }
  .ci #voice { padding-bottom: calc(48 / var(--screen-w) * 100vw); }
  .ciTrial-badge { top: calc(16 / var(--screen-w) * 100vw); left: calc(8 / var(--screen-w) * 100vw); width: auto; height: auto; padding: 0 calc(24 / var(--screen-w) * 100vw) calc(10 / var(--screen-w) * 100vw) calc(8 / var(--screen-w) * 100vw); font-size: calc(14 / var(--fs-w) * 100vw); text-align: left; }
  .ciTrial-badge br { display: none; }
  .ciTrial-badge { background: none; }
  .ciTrial-label { font-size: calc(17 / var(--fs-w) * 100vw); line-height: 1.5; }
  .ciTrial h2 { margin-top: calc(6 / var(--screen-w) * 100vw); padding: calc(4 / var(--screen-w) * 100vw) calc(10 / var(--screen-w) * 100vw); font-size: calc(19 / var(--fs-w) * 100vw); line-height: 1.5; }
  .ciTrial-txt, .ciTrial.-bottom .ciTrial-txt { margin-top: calc(18 / var(--screen-w) * 100vw); font-size: calc(13 / var(--fs-w) * 100vw); line-height: 1.8; text-align: left; }
  .ciTrial-txt br { display: none; }
  .ciTrial-txt .ib { display: inline; }
  .ciTrial .btn { margin-top: calc(20 / var(--screen-w) * 100vw); }
  .ci .svcFlow { margin-top: calc(64 / var(--screen-w) * 100vw); padding-bottom: calc(64 / var(--screen-w) * 100vw); }
  .ciFlow-head { width: auto; text-align: center; }
  .ciFlow-head > p { margin-top: calc(12 / var(--screen-w) * 100vw); font-size: calc(13 / var(--fs-w) * 100vw); line-height: 1.9; }
  .ci .svcFlow-list { padding: calc(8 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw); }
  .ci .svcFlow-list li, .ci .svcFlow-list li:first-child { padding: calc(24 / var(--screen-w) * 100vw) 0 calc(20 / var(--screen-w) * 100vw) calc(64 / var(--screen-w) * 100vw); }
  .ci .svcFlow-list li::before, .ci .svcFlow-list li::after { left: 0; }
  .ci .svcFlow h3 { font-size: calc(16 / var(--fs-w) * 100vw); line-height: 1.6; }
  .ci .svcFlow-list p { margin-top: calc(6 / var(--screen-w) * 100vw); font-size: calc(13 / var(--fs-w) * 100vw); line-height: 1.85; }
  .ci .svcFaq summary { font-size: calc(14 / var(--fs-w) * 100vw); line-height: 1.6; }
  .ci .svcStrength { padding: calc(56 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw) calc(64 / var(--screen-w) * 100vw); }
  .ci .svcStrength-list { margin-top: calc(40 / var(--screen-w) * 100vw); }
  .ci .svcStrength .btn { margin-top: calc(40 / var(--screen-w) * 100vw); }
  .ci .svcCase { padding-top: calc(56 / var(--screen-w) * 100vw); }
  .ci .svcCase-item { min-height: 0; margin-top: calc(20 / var(--screen-w) * 100vw); padding: calc(28 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw) calc(20 / var(--screen-w) * 100vw); }
  .ci .svcCase-head + .svcCase-item { margin-top: calc(24 / var(--screen-w) * 100vw); }
  .ci .svcCase-item h3 { margin-top: 0; }
  .ci .svcCase-client { margin-top: calc(12 / var(--screen-w) * 100vw); }
  .ci .svcCase-card { min-height: 0; }
  .ci .svcCase-card + .svcCase-card h4 { margin: calc(14 / var(--screen-w) * 100vw) 0 0; }
  .ci .svcCase-card + .svcCase-card p { margin-top: calc(10 / var(--screen-w) * 100vw); line-height: 1.69; }
  .ci .svcFaq { padding: calc(56 / var(--screen-w) * 100vw) calc(16 / var(--screen-w) * 100vw) calc(64 / var(--screen-w) * 100vw); }
}
@media (max-width: 600px) {
  .ciCycle { width: calc(640 / var(--screen-w) * 100vw); font-size: calc(9.5 / var(--fs-w) * 100vw); }
  .ciCycle-gap { font-size: calc(11 / var(--fs-w) * 100vw); }
  .ciCycle-trust, .ciCycle-same { font-size: calc(10 / var(--fs-w) * 100vw); }
  .ciCycle-ttl { font-size: calc(11.5 / var(--fs-w) * 100vw); }
}

/* 動きを減らす設定: 図は最初から完成形で表示し、回転もしない（矢じりは止まった位置で見せる） */
@media (prefers-reduced-motion: reduce) {
  .ciPyr.is-wait li, .ciPyr.is-wait .ciPyr-note { opacity: 1; }
  .ciPyr.is-wait .ciPyr-note::after { transform: none; }
  .ciPyr.is-in li, .ciPyr.is-in .ciPyr-note, .ciPyr.is-in .ciPyr-note::after, .ciCycle.is-in .ciCycle-flow g, .ciCompare-loop.is-in img, .ciCycle.is-in .ciCycle-out { animation: none; }
  .ciCycle-out { offset-distance: 88%; opacity: 1; }
}