@charset "UTF-8";

/* Page 281: scoped styles for the swing POP durability and replacement guide */

.swing-288-body .swing-288-page {
    --s288-red: #a96d2f;
    --s288-red-dark: #74451d;
    --s288-teal: #47766d;
    --s288-teal-dark: #315b54;
    --s288-blue: #617c72;
    --s288-navy: #344943;
    --s288-text: #2b3b40;
    --s288-muted: #68787c;
    --s288-line: #d7e0dd;
    --s288-soft: #eef5f4;
    --s288-warm: #f6f0ea;
    color: var(--s288-text);
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.9;
}
.swing-288-body .swing-288-page,
.swing-288-body .swing-288-page * { box-sizing: border-box; }
.swing-288-body .swing-288-page a { color: var(--s288-teal); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.swing-288-body .swing-288-page a:hover,
.swing-288-body .swing-288-page a:focus-visible { color: var(--s288-teal-dark); }
.swing-288-body .swing-288-page a:focus-visible,
.swing-288-body .swing-288-page summary:focus-visible,
.swing-288-body .swing-288-table-wrap:focus-visible { outline: 3px solid rgba(57,118,111,.34); outline-offset: 3px; }

.swing-288-body .swing-288-hero { margin: 0 0 32px; overflow: hidden; border: 1px solid #d7dedb; border-radius: 18px; background: #f4f2ed; box-shadow: 0 14px 34px rgba(32,54,57,.12); }
.swing-288-body .swing-288-hero img { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: cover; }

.swing-288-body .swing-288-lead { position: relative; margin: 0 0 30px; padding: 34px 38px 32px; overflow: hidden; border-left: 6px solid var(--s288-red); border-radius: 0 18px 18px 0; background: linear-gradient(135deg,#fff 0%,#f4f8f6 100%); box-shadow: 0 10px 28px rgba(40,61,62,.08); }
.swing-288-body .swing-288-lead::after { content:""; position:absolute; right:-50px; bottom:-70px; width:197px; height:197px; border:30px solid rgba(57,118,111,.07); border-radius:50%; }
.swing-288-body .swing-288-eyebrow,
.swing-288-body .swing-288-kicker,
.swing-288-body .swing-288-final-cta__label { margin:0 0 8px; color:var(--s288-red); font-family:"M PLUS 1 Code",monospace; font-size:13px; font-weight:700; letter-spacing:.12em; }
.swing-288-body .swing-288-lead h2 { position:relative; z-index:1; margin:0 0 18px; color:var(--s288-navy); font-size:clamp(26px,3.2vw,38px); line-height:1.45; }
.swing-288-body .swing-288-lead p { position:relative; z-index:1; margin:0 0 12px; }
.swing-288-body .swing-288-lead p:last-child { margin-bottom:0; }

.swing-288-body .swing-288-summary { margin:0 0 30px; padding:27px 31px; border:1px solid var(--s288-line); border-radius:16px; background:#fff; }
.swing-288-body .swing-288-summary h2 { margin:0 0 13px; color:var(--s288-navy); font-size:23px; }
.swing-288-body .swing-288-summary ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 22px; margin:0; padding:0; list-style:none; }
.swing-288-body .swing-288-summary li { position:relative; padding-left:26px; }
.swing-288-body .swing-288-summary li::before { content:""; position:absolute; left:2px; top:.72em; width:10px; height:6px; border-left:2px solid var(--s288-red); border-bottom:2px solid var(--s288-red); transform:rotate(-45deg); }

.swing-288-body .swing-288-toc { margin:0 0 42px; padding:28px 30px; border-radius:16px; background:var(--s288-navy); color:#fff; }
.swing-288-body .swing-288-toc__title { margin:0 0 13px; font-weight:700; letter-spacing:.05em; }
.swing-288-body .swing-288-toc ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 26px; margin:0; padding-left:1.35em; }
.swing-288-body .swing-288-toc a,
.swing-288-body .swing-288-toc a:hover,
.swing-288-body .swing-288-toc a:focus-visible { color:#fff; }

.swing-288-body .swing-288-section { margin:0 0 44px; padding:4px 0; }
.swing-288-body .swing-288-section--soft,
.swing-288-body .swing-288-section--warm { padding:42px 24px; border-radius:22px; }
.swing-288-body .swing-288-section--soft { background:var(--s288-soft); }
.swing-288-body .swing-288-section--warm { background:var(--s288-warm); }
.swing-288-body .swing-288-anchor { scroll-margin-top:110px; }
.swing-288-body .swing-288-heading { display:flex; align-items:flex-start; gap:17px; margin:0 0 23px; }
.swing-288-body .swing-288-heading > span { flex:0 0 auto; min-width:48px; padding-top:6px; border-top:3px solid var(--s288-red); color:var(--s288-red); font-family:"M PLUS 1 Code",monospace; font-weight:700; letter-spacing:.08em; }
.swing-288-body .swing-288-heading h2 { margin:0; color:var(--s288-navy); font-size:clamp(25px,3vw,34px); line-height:1.45; }

.swing-288-body .swing-288-definition-grid,
.swing-288-body .swing-288-choice-grid,
.swing-288-body .swing-288-caution-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:0 0 26px; }
.swing-288-body .swing-288-definition-grid article,
.swing-288-body .swing-288-choice-grid article,
.swing-288-body .swing-288-caution-grid article { min-width:0; padding:25px; border:1px solid var(--s288-line); border-radius:15px; background:#fff; }
.swing-288-body .swing-288-definition-grid article:first-child { border-top:5px solid var(--s288-blue); }
.swing-288-body .swing-288-definition-grid article:last-child { border-top:5px solid var(--s288-red); }
.swing-288-body .swing-288-definition-grid h3,
.swing-288-body .swing-288-choice-grid h3,
.swing-288-body .swing-288-caution-grid h3,
.swing-288-body .swing-288-template-flow h3,
.swing-288-body .swing-288-checklist h3 { margin:0 0 10px; color:var(--s288-navy); font-size:21px; line-height:1.55; }
.swing-288-body .swing-288-definition-grid p,
.swing-288-body .swing-288-choice-grid p,
.swing-288-body .swing-288-caution-grid p { margin:0; }
.swing-288-body .swing-288-choice-grid article > span { display:inline-block; margin-bottom:9px; padding:4px 10px; border-radius:999px; background:#e6f1ee; color:var(--s288-teal-dark); font-size:12px; font-weight:700; }
.swing-288-body .swing-288-caution-grid article { border-left:4px solid var(--s288-red); }

.swing-288-body .swing-288-table-wrap { width:100%; margin:0 0 22px; overflow-x:auto; border:1px solid var(--s288-line); border-radius:14px; background:#fff; }
.swing-288-body .swing-288-compare-table { width:100%; min-width:680px; border-collapse:collapse; }
.swing-288-body .swing-288-compare-table th,
.swing-288-body .swing-288-compare-table td { padding:17px 18px; border-bottom:1px solid var(--s288-line); vertical-align:top; text-align:left; }
.swing-288-body .swing-288-compare-table thead th { background:var(--s288-navy); color:#fff; }
.swing-288-body .swing-288-compare-table tbody th { width:22%; background:#eef4f2; color:var(--s288-navy); }
.swing-288-body .swing-288-compare-table tbody tr:last-child th,
.swing-288-body .swing-288-compare-table tbody tr:last-child td { border-bottom:0; }
.swing-288-body .swing-288-note { margin:22px 0 0; padding:18px 21px; border-left:4px solid var(--s288-teal); background:#f3f7f6; }

.swing-288-body .swing-288-steps { display:grid; gap:15px; margin:0; padding:0; list-style:none; counter-reset:s288step; }
.swing-288-body .swing-288-steps li { display:grid; grid-template-columns:92px minmax(0,1fr); gap:20px; align-items:start; padding:22px 24px; border:1px solid var(--s288-line); border-radius:14px; background:#fff; }
.swing-288-body .swing-288-steps li > span { display:grid; place-items:center; min-height:46px; border-radius:10px; background:var(--s288-teal); color:#fff; font-family:"M PLUS 1 Code",monospace; font-size:12px; font-weight:700; letter-spacing:.05em; }
.swing-288-body .swing-288-steps h3 { margin:0 0 7px; color:var(--s288-navy); font-size:20px; }
.swing-288-body .swing-288-steps p { margin:0; }
.swing-288-body .swing-288-alert { display:grid; gap:5px; margin-top:22px; padding:20px 22px; border:1px solid #e4c9a1; border-radius:14px; background:#fffaf1; }
.swing-288-body .swing-288-alert strong { color:#8a4f12; }

.swing-288-body .swing-288-product-grid,
.swing-288-body .swing-288-related-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.swing-288-body .swing-288-product-grid a,
.swing-288-body .swing-288-related-grid a { display:flex; flex-direction:column; min-width:0; padding:22px; border:1px solid var(--s288-line); border-radius:14px; background:#fff; color:var(--s288-text); text-decoration:none; box-shadow:0 8px 20px rgba(38,57,59,.05); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.swing-288-body .swing-288-product-grid a:hover,
.swing-288-body .swing-288-product-grid a:focus-visible,
.swing-288-body .swing-288-related-grid a:hover,
.swing-288-body .swing-288-related-grid a:focus-visible { color:var(--s288-text); border-color:var(--s288-teal); transform:translateY(-2px); box-shadow:0 12px 26px rgba(38,57,59,.11); }
.swing-288-body .swing-288-product-grid strong,
.swing-288-body .swing-288-related-grid strong { margin-bottom:7px; color:var(--s288-navy); font-size:18px; line-height:1.55; }
.swing-288-body .swing-288-product-grid span,
.swing-288-body .swing-288-related-grid span { color:var(--s288-muted); font-size:14px; }
.swing-288-body .swing-288-template-flow,
.swing-288-body .swing-288-checklist { margin-top:23px; padding:25px 27px; border-radius:15px; background:var(--s288-navy); color:#fff; }
.swing-288-body .swing-288-template-flow h3,
.swing-288-body .swing-288-checklist h3 { color:#fff; }
.swing-288-body .swing-288-template-flow ul,
.swing-288-body .swing-288-checklist ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; margin:0; padding:0; list-style:none; }
.swing-288-body .swing-288-template-flow li,
.swing-288-body .swing-288-checklist li { position:relative; padding-left:25px; }
.swing-288-body .swing-288-template-flow li::before,
.swing-288-body .swing-288-checklist li::before { content:"✓"; position:absolute; left:0; top:0; color:#a8e1d6; font-weight:700; }

.swing-288-body .swing-288-faq { display:grid; gap:12px; }
.swing-288-body .swing-288-faq details { border:1px solid var(--s288-line); border-radius:13px; background:#fff; }
.swing-288-body .swing-288-faq summary { position:relative; padding:20px 54px 20px 23px; cursor:pointer; color:var(--s288-navy); font-weight:700; list-style:none; }
.swing-288-body .swing-288-faq summary::-webkit-details-marker { display:none; }
.swing-288-body .swing-288-faq summary::after { content:"＋"; position:absolute; right:22px; top:50%; transform:translateY(-50%); color:var(--s288-red); font-size:22px; }
.swing-288-body .swing-288-faq details[open] summary::after { content:"−"; }
.swing-288-body .swing-288-faq details p { margin:0; padding:0 23px 22px; }

.swing-288-body .swing-288-related { margin:50px 0 38px; padding:32px; border:1px solid var(--s288-line); border-radius:20px; background:#f8faf9; }
.swing-288-body .swing-288-related > h2 { margin:0 0 22px; color:var(--s288-navy); font-size:27px; }
.swing-288-body .swing-288-back { margin:22px 0 0; text-align:center; }
.swing-288-body .swing-288-back a { font-weight:700; }

.swing-288-body .swing-288-final-cta { margin:0 0 44px; padding:39px 36px; border-radius:22px; background:linear-gradient(135deg,var(--s288-navy),#245c64); color:#fff; text-align:center; box-shadow:0 15px 34px rgba(24,59,72,.2); }
.swing-288-body .swing-288-final-cta__label { color:#bde2da; }
.swing-288-body .swing-288-final-cta h2 { margin:0 0 14px; color:#fff; font-size:clamp(25px,3vw,34px); line-height:1.5; }
.swing-288-body .swing-288-final-cta p { margin:0 auto 24px; max-width:760px; }
.swing-288-body .swing-288-final-cta__buttons { display:flex; justify-content:center; flex-wrap:wrap; gap:13px; }
.swing-288-body .swing-288-button { display:inline-flex; align-items:center; justify-content:center; min-width:240px; min-height:54px; padding:14px 24px; border:2px solid transparent; border-radius:999px; font-weight:700; text-decoration:none; transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease; }
.swing-288-body .swing-288-button--primary,
.swing-288-body .swing-288-button--primary:visited { background-color:#fff; color:var(--s288-red-dark); border-color:#fff; }
.swing-288-body .swing-288-button--primary:hover,
.swing-288-body .swing-288-button--primary:focus-visible { background-color:#f7e6ea; color:#6f1222; border-color:#f7e6ea; transform:translateY(-1px); }
.swing-288-body .swing-288-button--secondary,
.swing-288-body .swing-288-button--secondary:visited { background-color:transparent; color:#fff; border-color:#fff; }
.swing-288-body .swing-288-button--secondary:hover,
.swing-288-body .swing-288-button--secondary:focus-visible { background-color:#fff; color:var(--s288-navy); border-color:#fff; transform:translateY(-1px); }

@media (max-width:1100px) {
    .swing-288-body .swing-288-lead { padding:30px; }
    .swing-288-body .swing-288-definition-grid,
    .swing-288-body .swing-288-choice-grid,
    .swing-288-body .swing-288-caution-grid,
    .swing-288-body .swing-288-product-grid,
    .swing-288-body .swing-288-related-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:650px) {
    .swing-288-body .swing-288-hero { margin-bottom:23px; border-radius:12px; }
    .swing-288-body .swing-288-lead { padding:25px 21px; border-left-width:5px; border-radius:0 13px 13px 0; }
    .swing-288-body .swing-288-lead h2 { font-size:25px; }
    .swing-288-body .swing-288-summary,
    .swing-288-body .swing-288-toc,
    .swing-288-body .swing-288-related,
    .swing-288-body .swing-288-final-cta { padding:24px 20px; border-radius:14px; }
    .swing-288-body .swing-288-summary ul,
    .swing-288-body .swing-288-toc ol,
    .swing-288-body .swing-288-definition-grid,
    .swing-288-body .swing-288-choice-grid,
    .swing-288-body .swing-288-caution-grid,
    .swing-288-body .swing-288-product-grid,
    .swing-288-body .swing-288-related-grid,
    .swing-288-body .swing-288-template-flow ul,
    .swing-288-body .swing-288-checklist ul { grid-template-columns:1fr; }
    .swing-288-body .swing-288-section--soft,
    .swing-288-body .swing-288-section--warm { margin-left:-8px; margin-right:-8px; padding:31px 16px; border-radius:16px; }
    .swing-288-body .swing-288-heading { gap:12px; }
    .swing-288-body .swing-288-heading > span { min-width:38px; }
    .swing-288-body .swing-288-heading h2 { font-size:24px; }
    .swing-288-body .swing-288-steps li { grid-template-columns:1fr; gap:12px; padding:20px; }
    .swing-288-body .swing-288-steps li > span { width:88px; min-height:38px; }
    .swing-288-body .swing-288-definition-grid article,
    .swing-288-body .swing-288-choice-grid article,
    .swing-288-body .swing-288-caution-grid article { padding:21px; }
    .swing-288-body .swing-288-template-flow,
    .swing-288-body .swing-288-checklist { padding:22px 20px; }
    .swing-288-body .swing-288-final-cta__buttons { display:grid; }
    .swing-288-body .swing-288-button { width:100%; min-width:0; }
}
@media (max-width:480px) {
    .swing-288-body .swing-288-lead h2,
    .swing-288-body .swing-288-heading h2 { overflow-wrap:anywhere; }
    .swing-288-body .swing-288-compare-table { min-width:620px; }
    .swing-288-body .swing-288-faq summary { padding:18px 48px 18px 18px; }
    .swing-288-body .swing-288-faq details p { padding:0 18px 19px; }
}

/* Page 288 color-analysis accents */
.swing-288-body .swing-288-definition-grid article:nth-child(1){border-top:4px solid #1788aa}.swing-288-body .swing-288-definition-grid article:nth-child(2){border-top:4px solid #d4515c}.swing-288-body .swing-288-choice-grid article:nth-child(1){border-top:4px solid #eead32}.swing-288-body .swing-288-choice-grid article:nth-child(2){border-top:4px solid #24364a}.swing-288-body .swing-288-choice-grid article:nth-child(3){border-top:4px solid #6f4f8b}.swing-288-body .swing-288-choice-grid article:nth-child(4){border-top:4px solid #2f8c69}.swing-288-body .swing-288-hero{background:#f6f3ef}.swing-288-body .swing-288-eyebrow{color:#8f332d}.swing-288-body .swing-288-heading>span{background:#6f4f8b}.swing-288-body .swing-288-steps li>span{background:#6f4f8b}.swing-288-body a:focus-visible{outline:3px solid #e9a739;outline-offset:3px}.swing-288-body .swing-288-table-wrap:focus-visible{outline:3px solid #6f4f8b;outline-offset:3px}