@charset "UTF-8";
.pocket-218-body {
    --p218-ink:#16334b;
    --p218-blue:#176b93;
    --p218-blue-dark:#0f4d70;
    --p218-teal:#168b87;
    --p218-magenta:#b52c68;
    --p218-yellow:#d9a52b;
    --p218-text:#344b5c;
    --p218-muted:#657888;
    --p218-line:#d7e1e6;
    --p218-soft:#f4f8fa;
    --p218-warm:#fff9ed;
}
.pocket-218-body .pocket-218-page { color:var(--p218-text); font-family:"Noto Sans JP",sans-serif; font-size:16px; line-height:1.9; overflow-wrap:anywhere; }
.pocket-218-body .pocket-218-page *, .pocket-218-body .pocket-218-page *::before, .pocket-218-body .pocket-218-page *::after { box-sizing:border-box; }
.pocket-218-body .pocket-218-page a { color:var(--p218-blue); text-decoration:underline; text-underline-offset:3px; }
.pocket-218-body .pocket-218-page a:hover, .pocket-218-body .pocket-218-page a:focus-visible { color:#9b2458; }
.pocket-218-body .pocket-218-page img { max-width:100%; height:auto; }
.pocket-218-body .pocket-218-hero { margin:0 0 34px; overflow:hidden; border-radius:18px; background:#eef2f3; box-shadow:0 14px 35px rgba(18,48,68,.14); }
.pocket-218-body .pocket-218-hero img { display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }
.pocket-218-body .pocket-218-lead { margin:0 0 28px; padding:34px 36px; border-left:7px solid var(--p218-teal); border-radius:0 18px 18px 0; background:linear-gradient(135deg,#f4fbfb,#eef5f8); }
.pocket-218-body .pocket-218-eyebrow, .pocket-218-body .pocket-218-final-cta__label { margin:0 0 8px; color:var(--p218-teal); font-family:"M PLUS 1 Code",monospace; font-size:13px; font-weight:700; letter-spacing:.12em; }
.pocket-218-body .pocket-218-lead h2 { margin:0 0 18px; color:var(--p218-ink); font-size:clamp(26px,3vw,36px); line-height:1.55; }
.pocket-218-body .pocket-218-lead p:last-child { margin-bottom:0; }
.pocket-218-body .pocket-218-summary, .pocket-218-body .pocket-218-toc { margin:0 0 28px; padding:27px 30px; border:1px solid var(--p218-line); border-radius:16px; background:#fff; }
.pocket-218-body .pocket-218-summary h2 { margin:0 0 16px; color:var(--p218-ink); font-size:24px; }
.pocket-218-body .pocket-218-summary ul, .pocket-218-body .pocket-218-toc ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 26px; margin:0; padding-left:1.4em; }
.pocket-218-body .pocket-218-toc { background:var(--p218-soft); }
.pocket-218-body .pocket-218-toc__title { margin:0 0 12px; color:var(--p218-ink); font-weight:700; font-size:19px; }
.pocket-218-body .pocket-218-section { margin:52px 0; scroll-margin-top:95px; }
.pocket-218-body .pocket-218-section--soft { padding:38px 34px; border-radius:20px; background:var(--p218-soft); }
.pocket-218-body .pocket-218-heading { display:flex; align-items:flex-start; gap:16px; margin:0 0 22px; }
.pocket-218-body .pocket-218-heading > span { display:grid; place-items:center; min-width:44px; height:44px; border-radius:50%; background:var(--p218-ink); color:#fff; font-family:"M PLUS 1 Code",monospace; font-weight:700; }
.pocket-218-body .pocket-218-heading h2 { margin:0; color:var(--p218-ink); font-size:clamp(25px,3vw,32px); line-height:1.55; }
.pocket-218-body .pocket-218-table-wrap { width:100%; margin:24px 0; overflow-x:auto; border:1px solid var(--p218-line); border-radius:14px; background:#fff; }
.pocket-218-body .pocket-218-compare-table { width:100%; min-width:720px; border-collapse:collapse; }
.pocket-218-body .pocket-218-compare-table th, .pocket-218-body .pocket-218-compare-table td { padding:16px 18px; border-bottom:1px solid var(--p218-line); border-right:1px solid var(--p218-line); text-align:left; vertical-align:top; }
.pocket-218-body .pocket-218-compare-table th:last-child, .pocket-218-body .pocket-218-compare-table td:last-child { border-right:0; }
.pocket-218-body .pocket-218-compare-table tr:last-child th, .pocket-218-body .pocket-218-compare-table tr:last-child td { border-bottom:0; }
.pocket-218-body .pocket-218-compare-table thead th { background:var(--p218-ink); color:#fff; }
.pocket-218-body .pocket-218-compare-table thead th:nth-child(2) { background:#514a88; }
.pocket-218-body .pocket-218-compare-table thead th:nth-child(3) { background:#087f86; }
.pocket-218-body .pocket-218-compare-table tbody th { color:var(--p218-ink); background:#f7fafb; white-space:nowrap; }
.pocket-218-body .pocket-218-note { margin:24px 0 0; padding:23px 25px; border-left:5px solid var(--p218-yellow); border-radius:0 13px 13px 0; background:var(--p218-warm); }
.pocket-218-body .pocket-218-note strong { display:block; margin-bottom:7px; color:var(--p218-ink); font-size:18px; }
.pocket-218-body .pocket-218-note p { margin:0; }
.pocket-218-body .pocket-218-steps { display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.pocket-218-body .pocket-218-steps li { display:grid; grid-template-columns:92px minmax(0,1fr); gap:20px; padding:22px 24px; border:1px solid var(--p218-line); border-radius:14px; background:#fff; }
.pocket-218-body .pocket-218-steps li > span { display:grid; place-items:center; min-height:46px; border-radius:10px; background:var(--p218-blue); color:#fff; font-family:"M PLUS 1 Code",monospace; font-size:12px; font-weight:700; }
.pocket-218-body .pocket-218-steps h3, .pocket-218-body .pocket-218-check-grid h3, .pocket-218-body .pocket-218-mistake-list h3, .pocket-218-body .pocket-218-checklist h3 { margin:0 0 8px; color:var(--p218-ink); font-size:20px; line-height:1.55; }
.pocket-218-body .pocket-218-steps p { margin:0; }
.pocket-218-body .pocket-218-check-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:24px 0; }
.pocket-218-body .pocket-218-check-grid article { min-width:0; padding:23px; border:1px solid var(--p218-line); border-radius:14px; background:#fff; box-shadow:0 8px 22px rgba(22,51,75,.05); }
.pocket-218-body .pocket-218-check-grid span { display:inline-block; margin-bottom:8px; color:var(--p218-magenta); font-family:"M PLUS 1 Code",monospace; font-size:12px; font-weight:700; letter-spacing:.08em; }
.pocket-218-body .pocket-218-check-grid p { margin:0; }
.pocket-218-body .pocket-218-proof-box { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:25px 0 14px; }
.pocket-218-body .pocket-218-proof-box > div { padding:23px; border-radius:14px; background:linear-gradient(135deg,#17364e,#145e73); color:#fff; }
.pocket-218-body .pocket-218-proof-box strong { display:block; margin-bottom:8px; font-size:20px; }
.pocket-218-body .pocket-218-proof-box p { margin:0; }
.pocket-218-body .pocket-218-caution { margin:0; padding:18px 21px; border:1px solid #ebd5a1; border-radius:12px; background:#fff9e9; }
.pocket-218-body .pocket-218-mistake-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.pocket-218-body .pocket-218-mistake-list article { display:grid; grid-template-columns:48px minmax(0,1fr); gap:17px; padding:22px; border:1px solid var(--p218-line); border-radius:14px; background:#fff; }
.pocket-218-body .pocket-218-mistake-list b { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--p218-magenta); color:#fff; font-family:"M PLUS 1 Code",monospace; }
.pocket-218-body .pocket-218-mistake-list p { margin:0; }
.pocket-218-body .pocket-218-checklist { margin:0 0 22px; padding:27px; border-radius:17px; background:var(--p218-ink); color:#fff; }
.pocket-218-body .pocket-218-checklist h3 { color:#fff; }
.pocket-218-body .pocket-218-checklist ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; margin:0; padding:0; list-style:none; }
.pocket-218-body .pocket-218-checklist li { position:relative; padding-left:25px; }
.pocket-218-body .pocket-218-checklist li::before { content:"✓"; position:absolute; left:0; color:#72ddd2; font-weight:800; }
.pocket-218-body .pocket-218-support-grid, .pocket-218-body .pocket-218-related-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.pocket-218-body .pocket-218-support-grid a, .pocket-218-body .pocket-218-related-grid a { display:flex; flex-direction:column; min-width:0; padding:22px; border:1px solid var(--p218-line); border-radius:14px; background:#fff; color:var(--p218-text); text-decoration:none; box-shadow:0 8px 20px rgba(22,51,75,.05); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.pocket-218-body .pocket-218-support-grid a:hover, .pocket-218-body .pocket-218-support-grid a:focus-visible, .pocket-218-body .pocket-218-related-grid a:hover, .pocket-218-body .pocket-218-related-grid a:focus-visible { color:var(--p218-text); border-color:var(--p218-teal); transform:translateY(-2px); box-shadow:0 12px 26px rgba(22,51,75,.11); }
.pocket-218-body .pocket-218-support-grid strong, .pocket-218-body .pocket-218-related-grid strong { margin-bottom:7px; color:var(--p218-ink); font-size:18px; line-height:1.55; }
.pocket-218-body .pocket-218-support-grid span, .pocket-218-body .pocket-218-related-grid span { color:var(--p218-muted); font-size:14px; }
.pocket-218-body .pocket-218-faq { display:grid; gap:12px; }
.pocket-218-body .pocket-218-faq details { border:1px solid var(--p218-line); border-radius:13px; background:#fff; }
.pocket-218-body .pocket-218-faq summary { position:relative; padding:20px 54px 20px 23px; cursor:pointer; color:var(--p218-ink); font-weight:700; list-style:none; }
.pocket-218-body .pocket-218-faq summary::-webkit-details-marker { display:none; }
.pocket-218-body .pocket-218-faq summary::after { content:"＋"; position:absolute; right:22px; top:50%; transform:translateY(-50%); color:var(--p218-teal); font-size:22px; }
.pocket-218-body .pocket-218-faq details[open] summary::after { content:"−"; }
.pocket-218-body .pocket-218-faq details p { margin:0; padding:0 23px 22px; }
.pocket-218-body .pocket-218-related { margin:50px 0 38px; padding:32px; border:1px solid var(--p218-line); border-radius:20px; background:#f7fafc; }
.pocket-218-body .pocket-218-related > h2 { margin:0 0 22px; color:var(--p218-ink); font-size:27px; }
.pocket-218-body .pocket-218-back { margin:22px 0 0; text-align:center; }
.pocket-218-body .pocket-218-back a { font-weight:700; }
.pocket-218-body .pocket-218-final-cta { margin:0 0 44px; padding:39px 36px; border-radius:22px; background:linear-gradient(135deg,var(--p218-ink),var(--p218-blue-dark)); color:#fff; text-align:center; box-shadow:0 15px 34px rgba(22,51,75,.23); }
.pocket-218-body .pocket-218-final-cta__label { color:#76ddd2; }
.pocket-218-body .pocket-218-final-cta h2 { margin:0 0 14px; color:#fff; font-size:clamp(25px,3vw,34px); line-height:1.5; }
.pocket-218-body .pocket-218-final-cta p { margin:0 auto 24px; max-width:760px; }
.pocket-218-body .pocket-218-final-cta__buttons { display:flex; justify-content:center; flex-wrap:wrap; gap:13px; }
.pocket-218-body .pocket-218-button { display:inline-flex; align-items:center; justify-content:center; min-width:245px; 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; }
.pocket-218-body .pocket-218-button--primary, .pocket-218-body .pocket-218-button--primary:visited { background-color:#fff; color:var(--p218-blue-dark); border-color:#fff; }
.pocket-218-body .pocket-218-button--primary:hover, .pocket-218-body .pocket-218-button--primary:focus-visible { background-color:#daf4f0; color:#0a3f5d; border-color:#daf4f0; transform:translateY(-1px); }
.pocket-218-body .pocket-218-button--secondary, .pocket-218-body .pocket-218-button--secondary:visited { background-color:transparent; color:#fff; border-color:#fff; }
.pocket-218-body .pocket-218-button--secondary:hover, .pocket-218-body .pocket-218-button--secondary:focus-visible { background-color:#fff; color:var(--p218-ink); border-color:#fff; transform:translateY(-1px); }
@media (max-width:1100px) {
    .pocket-218-body .pocket-218-lead { padding:30px; }
}
@media (max-width:650px) {
    .pocket-218-body .pocket-218-hero { margin-bottom:23px; border-radius:12px; }
    .pocket-218-body .pocket-218-lead { padding:25px 21px; border-left-width:5px; border-radius:0 13px 13px 0; }
    .pocket-218-body .pocket-218-lead h2 { font-size:25px; }
    .pocket-218-body .pocket-218-summary, .pocket-218-body .pocket-218-toc, .pocket-218-body .pocket-218-related, .pocket-218-body .pocket-218-final-cta { padding:24px 20px; border-radius:14px; }
    .pocket-218-body .pocket-218-summary ul, .pocket-218-body .pocket-218-toc ol, .pocket-218-body .pocket-218-check-grid, .pocket-218-body .pocket-218-proof-box, .pocket-218-body .pocket-218-mistake-list, .pocket-218-body .pocket-218-checklist ul, .pocket-218-body .pocket-218-support-grid, .pocket-218-body .pocket-218-related-grid { grid-template-columns:1fr; }
    .pocket-218-body .pocket-218-section--soft { margin-left:-8px; margin-right:-8px; padding:31px 16px; border-radius:16px; }
    .pocket-218-body .pocket-218-heading { gap:12px; }
    .pocket-218-body .pocket-218-heading > span { min-width:38px; height:38px; }
    .pocket-218-body .pocket-218-heading h2 { font-size:24px; }
    .pocket-218-body .pocket-218-steps li { grid-template-columns:1fr; gap:12px; padding:20px; }
    .pocket-218-body .pocket-218-steps li > span { width:88px; min-height:38px; }
    .pocket-218-body .pocket-218-mistake-list article { padding:20px; }
    .pocket-218-body .pocket-218-checklist { padding:22px 20px; }
    .pocket-218-body .pocket-218-final-cta__buttons { display:grid; }
    .pocket-218-body .pocket-218-button { width:100%; min-width:0; }
}
@media (max-width:480px) {
    .pocket-218-body .pocket-218-lead h2, .pocket-218-body .pocket-218-heading h2 { overflow-wrap:anywhere; }
    .pocket-218-body .pocket-218-compare-table { min-width:690px; }
    .pocket-218-body .pocket-218-faq summary { padding:18px 48px 18px 18px; }
    .pocket-218-body .pocket-218-faq details p { padding:0 18px 19px; }
}
