/* 削減シミュレーターの使い方ページ（page-simulator-guide.php）。図は、app-page-c.css の部品を、操作できない見本として並べたもの */
body.page-template-page-simulator-guide { background: var(--sh-bg, #f1f2f3); }
body.page-template-page-simulator-guide .site-main { max-width: none !important; width: 100% !important; padding-inline: 0 !important; }
.apg .ai-hero__grid { grid-template-columns: 1fr; }
.apg .ai-sec { padding-bottom: 110px; }
.apg-go { margin: 32px 0 0; }

/* 図の中の目印（番号・A／B） */
.apg-pin { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 8px; border-radius: 50%; background: var(--apc-pink, #e96a8f); color: #fff; font-size: 12px; font-style: normal; font-weight: 700; line-height: 1; vertical-align: middle; box-shadow: 0 3px 8px rgba(233, 106, 143, .4); }
.apc-sum .apg-pin { margin: 0 8px 0 0; }
.apg-pinrow { margin: 14px 0 10px; line-height: 1; }

/* 全体の流れ */
.apg-flow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0; padding: 0; list-style: none; }
.apg-flow li { position: relative; padding: 28px 24px 26px; border-radius: 24px; background: #fff; box-shadow: 0 12px 32px rgba(0, 48, 64, .08); }
.apg-flow li > b { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 14px; border-radius: 50%; background: var(--apc-grad, linear-gradient(45deg, #e96a8f, #009ada)); color: #fff; font-size: 18px; }
.apg-flow h3 { margin: 0 0 8px; font-size: 18px; letter-spacing: .05em; }
.apg-flow p { margin: 0; font-size: 13.5px; line-height: 1.9; letter-spacing: .04em; font-weight: 500; color: #3d525c; }
.apg-flow__out { background: linear-gradient(135deg, #eaf6fc, #fff4f7); }
.apg-note { margin: 22px 0 0; padding: 16px 22px; border-radius: 16px; background: #fff4f7; font-size: 14.5px; line-height: 1.9; letter-spacing: .05em; }
.apg-note b { color: #c0476b; }

/* 手順（左：説明／右：画面の図） */
.apg-step { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.apg-step__no { margin: 0 0 8px; font-size: 14px; font-weight: 700; letter-spacing: .24em; color: var(--apc-blue, #0599d9); }
.apg-step__no b { margin-left: 6px; font-size: 40px; letter-spacing: 0; background: var(--apc-grad, linear-gradient(45deg, #e96a8f, #009ada)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.apg-step__txt h2 { margin: 0 0 18px; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.5; font-weight: 700; letter-spacing: .04em; }
.apg-step__txt h3 { display: flex; align-items: center; gap: 10px; margin: 22px 0 6px; font-size: 17px; letter-spacing: .05em; }
.apg-step__txt h3 span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--apc-pink, #e96a8f); color: #fff; font-size: 13px; }
.apg-step__txt p { margin: 0 0 10px; font-size: 15px; line-height: 2; letter-spacing: .05em; font-weight: 500; }
.apg-step__txt p b, .apg-tips b { font-weight: 700; color: #0b4f73; }
.apg-tips { margin: 14px 0 0; padding: 0; list-style: none; }
.apg-tips li { position: relative; padding: 4px 0 4px 26px; font-size: 14.5px; line-height: 1.9; letter-spacing: .04em; font-weight: 500; color: #3d525c; }
.apg-tips li::before { content: "✓"; position: absolute; left: 0; top: 4px; color: var(--apc-pink, #e96a8f); font-weight: 700; }
.apg-step__fig { position: relative; padding: 52px 32px 30px; border-radius: 28px; background: #f4f9fc; box-shadow: 0 16px 44px rgba(0, 48, 64, .1), 0 0 0 1px rgba(5, 153, 217, .12); pointer-events: none; user-select: none; }
.apg-tag { position: absolute; left: 22px; top: 18px; margin: 0; padding: 3px 12px; border-radius: 30px; background: #dbe6ed; color: #5b6e77; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.apg-step__fig .apc-q { margin-bottom: 0; }
.apg-step__fig .apc-preset { cursor: default; }
.apg-lab { display: block; margin-bottom: 8px; font-size: 13.5px; font-weight: 700; letter-spacing: .05em; color: #0b4f73; }
.apg-input { display: block; flex: 1; min-width: 0; padding: 13px 16px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1.5px #cfe3ee; font-size: 15px; font-weight: 600; letter-spacing: .03em; }
.apc-free__go { display: grid; place-items: center; }
.apg-num { font-size: 32px; line-height: 1; color: var(--apc-blue, #0599d9); }
.apc-step__v { cursor: default; }
.apg-adv-sum { margin: 0 0 18px; font-size: 14px; font-weight: 700; letter-spacing: .05em; color: #0b4f73; }
.apg-adv-sum span { display: inline-block; width: 1.4em; color: var(--apc-pink, #e96a8f); }
.apg-adv-sum small { font-size: 12px; font-weight: 500; color: #6d8089; }
.apg-bar { grid-area: 2 / 1 / 3 / 3; display: block; height: 8px; margin: 10px 0 4px; border-radius: 8px; background: #dbe6ed; }
.apg-bar i { position: relative; display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #e96a8f, #009ada); }
.apg-bar i::after { content: ""; position: absolute; right: -13px; top: -9px; width: 26px; height: 26px; box-sizing: border-box; border: 4px solid #fff; border-radius: 50%; background: var(--apc-pink, #e96a8f); box-shadow: 0 3px 10px rgba(0, 48, 64, .3); }

/* 結果の見方 */
.apg-res { display: grid; grid-template-columns: 6fr 5fr; gap: 48px; align-items: start; }
.apg-res__fig { padding-top: 56px; }
.apg-res__fig .apc-big b { font-size: clamp(48px, 6vw, 76px); }
.apg-res__fig .apc-big .apg-pin, .apg-res__fig .apc-why__t .apg-pin, .apg-res__fig .apc-kpi .apg-pin { vertical-align: 4px; }
.apg-legend { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.apg-legend li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; margin-bottom: 20px; }
.apg-legend li > b { display: grid; place-items: center; width: 30px; height: 30px; margin-top: 2px; border-radius: 50%; background: var(--apc-pink, #e96a8f); color: #fff; font-size: 14px; }
.apg-legend h3 { margin: 0 0 4px; font-size: 16.5px; letter-spacing: .05em; }
.apg-legend p { margin: 0; font-size: 14px; line-height: 1.9; letter-spacing: .04em; font-weight: 500; color: #3d525c; }

.apg-notice { padding: 28px 34px; border-radius: 24px; background: #fff; box-shadow: 0 12px 32px rgba(0, 48, 64, .08); }
.apg-notice ul { margin: 0; padding: 0; list-style: none; }
.apg-notice li { position: relative; padding: 5px 0 5px 22px; font-size: 14.5px; line-height: 1.95; letter-spacing: .04em; font-weight: 500; }
.apg-notice li::before { content: "※"; position: absolute; left: 0; color: var(--apc-pink, #e96a8f); }
.apg-notice b { color: #0b4f73; }
.apg-contact { margin: 22px 0 0; font-size: 14.5px; line-height: 1.9; letter-spacing: .05em; text-align: center; }
.apg-contact a { color: var(--apc-blue, #0599d9); font-weight: 700; }

@media (max-width: 1024px) {
	.apg-flow { grid-template-columns: repeat(2, 1fr); }
	.apg-step, .apg-res { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 700px) {
	.apg-flow { grid-template-columns: 1fr; }
	.apg-step__fig { padding: 50px 18px 22px; }
	.apg-notice { padding: 22px 20px; }
}

/* 図の部品は <span> で作っているため、本物の <button> が持つ「文字を中央に寄せる」性質を、ここで補う */
.apg-step__fig .apc-step__b { display: grid; place-items: center; line-height: 1; padding-bottom: 2px; }
.apg-step__fig .apc-seg__b { display: grid; place-items: center; text-align: center; }
.apg-step__fig .apc-preset { display: inline-flex; align-items: center; }
.apc-step__v .apg-num { font-size: 32px; line-height: 1; }