@charset "UTF-8";

.pocket-211-body {
    --p211-ink:#17334b;
    --p211-blue:#15658c;
    --p211-blue-dark:#0d4665;
    --p211-teal:#188c8b;
    --p211-teal-soft:#e9f6f4;
    --p211-sky:#edf6fb;
    --p211-text:#354b5b;
    --p211-muted:#617585;
    --p211-line:#d4e1e8;
    --p211-paper:#fbfcfd;
}
.pocket-211-body .pocket-211-page { color:var(--p211-text); font-family:"Noto Sans JP",sans-serif; font-size:16px; line-height:1.95; }
.pocket-211-body .pocket-211-page * { box-sizing:border-box; }
.pocket-211-body .pocket-211-page a { color:var(--p211-blue-dark); text-underline-offset:3px; }
.pocket-211-body .pocket-211-page a:hover,
.pocket-211-body .pocket-211-page a:focus-visible { color:#8b3f21; }
.pocket-211-body .pocket-211-hero { margin:0 0 32px; overflow:hidden; border-radius:18px; background:#edf2f4; box-shadow:0 14px 34px rgba(22,51,75,.14); }
.pocket-211-body .pocket-211-hero img { display:block; width:100%; height:auto; }

.pocket-211-body .pocket-211-lead { margin:0 0 28px; padding:34px 38px; border-left:7px solid var(--p211-teal); border-radius:0 18px 18px 0; background:linear-gradient(135deg,#f9fcfd,var(--p211-sky)); }
.pocket-211-body .pocket-211-eyebrow,
.pocket-211-body .pocket-211-final-cta__label { margin:0 0 9px; color:var(--p211-teal); font-family:"M PLUS 1 Code",monospace; font-size:12px; font-weight:700; letter-spacing:.11em; }
.pocket-211-body .pocket-211-lead h2 { margin:0 0 18px; color:var(--p211-ink); font-size:clamp(25px,3vw,34px); line-height:1.55; }
.pocket-211-body .pocket-211-lead p:last-child { margin-bottom:0; }

.pocket-211-body .pocket-211-summary,
.pocket-211-body .pocket-211-toc { margin:0 0 28px; padding:27px 30px; border:1px solid var(--p211-line); border-radius:16px; background:#fff; }
.pocket-211-body .pocket-211-summary h2,
.pocket-211-body .pocket-211-toc__title { margin:0 0 15px; color:var(--p211-ink); font-size:22px; font-weight:700; }
.pocket-211-body .pocket-211-summary ul,
.pocket-211-body .pocket-211-toc ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px 28px; margin:0; padding:0; list-style:none; }
.pocket-211-body .pocket-211-summary li { position:relative; padding-left:25px; }
.pocket-211-body .pocket-211-summary li::before { content:"✓"; position:absolute; left:0; color:var(--p211-teal); font-weight:800; }
.pocket-211-body .pocket-211-toc li { counter-increment:p211-toc; }
.pocket-211-body .pocket-211-toc ol { counter-reset:p211-toc; }
.pocket-211-body .pocket-211-toc a { display:block; position:relative; padding:8px 8px 8px 34px; border-radius:8px; text-decoration:none; }
.pocket-211-body .pocket-211-toc a::before { content:counter(p211-toc,decimal-leading-zero); position:absolute; left:7px; color:var(--p211-teal); font-family:"M PLUS 1 Code",monospace; font-size:12px; font-weight:700; }
.pocket-211-body .pocket-211-toc a:hover,
.pocket-211-body .pocket-211-toc a:focus-visible { background:var(--p211-sky); color:var(--p211-blue-dark); }

.pocket-211-body .pocket-211-section { margin:0 0 48px; }
.pocket-211-body .pocket-211-anchor { scroll-margin-top:28px; }
.pocket-211-body .pocket-211-section--soft { margin-left:-18px; margin-right:-18px; padding:38px 32px; border-radius:20px; background:linear-gradient(135deg,#f6fbfd,#eef7f7); }
.pocket-211-body .pocket-211-heading { display:flex; gap:16px; align-items:flex-start; margin:0 0 23px; }
.pocket-211-body .pocket-211-heading > span { display:grid; place-items:center; min-width:46px; height:34px; border-radius:999px; background:var(--p211-ink); color:#fff; font-family:"M PLUS 1 Code",monospace; font-size:12px; font-weight:700; }
.pocket-211-body .pocket-211-heading h2 { margin:0; color:var(--p211-ink); font-size:clamp(25px,3vw,32px); line-height:1.55; }
.pocket-211-body .pocket-211-note { margin:22px 0 0; padding:18px 21px; border-left:4px solid var(--p211-teal); background:var(--p211-teal-soft); }

.pocket-211-body .pocket-211-table-wrap { width:100%; margin:24px 0; overflow-x:auto; border:1px solid var(--p211-line); border-radius:14px; background:#fff; }
.pocket-211-body .pocket-211-template-table { width:100%; min-width:760px; border-collapse:collapse; }
.pocket-211-body .pocket-211-template-table th,
.pocket-211-body .pocket-211-template-table td { padding:16px 17px; border-bottom:1px solid var(--p211-line); vertical-align:top; text-align:left; }
.pocket-211-body .pocket-211-template-table thead th { background:var(--p211-ink); color:#fff; }
.pocket-211-body .pocket-211-template-table tbody th { width:30%; background:#f1f7fa; color:var(--p211-ink); }
.pocket-211-body .pocket-211-template-table tbody tr:last-child th,
.pocket-211-body .pocket-211-template-table tbody tr:last-child td { border-bottom:0; }
.pocket-211-body .pocket-211-template-table td:last-child { white-space:nowrap; }
.pocket-211-body .pocket-211-template-table a { font-weight:700; }

.pocket-211-body .pocket-211-prepare-grid,
.pocket-211-body .pocket-211-check-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.pocket-211-body .pocket-211-check-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.pocket-211-body .pocket-211-prepare-grid article,
.pocket-211-body .pocket-211-check-grid article { min-width:0; padding:23px; border:1px solid var(--p211-line); border-radius:14px; background:#fff; box-shadow:0 8px 22px rgba(22,51,75,.05); }
.pocket-211-body .pocket-211-prepare-grid span,
.pocket-211-body .pocket-211-check-grid span { display:inline-block; margin-bottom:8px; color:var(--p211-teal); font-family:"M PLUS 1 Code",monospace; font-size:12px; font-weight:700; letter-spacing:.08em; }
.pocket-211-body .pocket-211-prepare-grid h3,
.pocket-211-body .pocket-211-check-grid h3,
.pocket-211-body .pocket-211-steps h3,
.pocket-211-body .pocket-211-mistake-list h3,
.pocket-211-body .pocket-211-do-dont h3,
.pocket-211-body .pocket-211-checklist h3 { margin:0 0 9px; color:var(--p211-ink); font-size:20px; line-height:1.55; }
.pocket-211-body .pocket-211-prepare-grid p,
.pocket-211-body .pocket-211-check-grid p { margin:0; }

.pocket-211-body .pocket-211-steps { display:grid; gap:14px; margin:0; padding:0; list-style:none; }
.pocket-211-body .pocket-211-steps li { display:grid; grid-template-columns:92px minmax(0,1fr); gap:20px; padding:22px 24px; border:1px solid var(--p211-line); border-radius:14px; background:#fff; }
.pocket-211-body .pocket-211-steps li > span { display:grid; place-items:center; min-height:46px; border-radius:10px; background:var(--p211-blue); color:#fff; font-family:"M PLUS 1 Code",monospace; font-size:12px; font-weight:700; }
.pocket-211-body .pocket-211-steps p { margin:0; }

.pocket-211-body .pocket-211-do-dont { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:24px; }
.pocket-211-body .pocket-211-do-dont > div { padding:24px; border-radius:15px; }
.pocket-211-body .pocket-211-do-dont__good { border:1px solid #b9ddd8; background:#eef9f7; }
.pocket-211-body .pocket-211-do-dont__bad { border:1px solid #e7c7bc; background:#fff5f1; }
.pocket-211-body .pocket-211-do-dont ul { margin:0; padding-left:1.35em; }
.pocket-211-body .pocket-211-do-dont li + li { margin-top:7px; }

.pocket-211-body .pocket-211-mistake-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; }
.pocket-211-body .pocket-211-mistake-list article { display:grid; grid-template-columns:48px minmax(0,1fr); gap:17px; padding:22px; border:1px solid var(--p211-line); border-radius:14px; background:#fff; }
.pocket-211-body .pocket-211-mistake-list b { display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:var(--p211-teal); color:#fff; font-family:"M PLUS 1 Code",monospace; }
.pocket-211-body .pocket-211-mistake-list p { margin:0; }

.pocket-211-body .pocket-211-checklist { margin:0 0 22px; padding:27px; border-radius:17px; background:var(--p211-ink); color:#fff; }
.pocket-211-body .pocket-211-checklist h3 { color:#fff; }
.pocket-211-body .pocket-211-checklist ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; margin:0; padding:0; list-style:none; }
.pocket-211-body .pocket-211-checklist li { position:relative; padding-left:25px; }
.pocket-211-body .pocket-211-checklist li::before { content:"✓"; position:absolute; left:0; color:#69d6c7; font-weight:800; }

.pocket-211-body .pocket-211-support-grid,
.pocket-211-body .pocket-211-related-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.pocket-211-body .pocket-211-support-grid a,
.pocket-211-body .pocket-211-related-grid a { display:flex; flex-direction:column; min-width:0; padding:22px; border:1px solid var(--p211-line); border-radius:14px; background:#fff; color:var(--p211-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-211-body .pocket-211-support-grid a:hover,
.pocket-211-body .pocket-211-support-grid a:focus-visible,
.pocket-211-body .pocket-211-related-grid a:hover,
.pocket-211-body .pocket-211-related-grid a:focus-visible { color:var(--p211-text); border-color:var(--p211-teal); transform:translateY(-2px); box-shadow:0 12px 26px rgba(22,51,75,.11); }
.pocket-211-body .pocket-211-support-grid strong,
.pocket-211-body .pocket-211-related-grid strong { margin-bottom:7px; color:var(--p211-ink); font-size:18px; line-height:1.55; }
.pocket-211-body .pocket-211-support-grid span,
.pocket-211-body .pocket-211-related-grid span { color:var(--p211-muted); font-size:14px; }

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

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

.pocket-211-body .pocket-211-final-cta { margin:0 0 44px; padding:39px 36px; border-radius:22px; background:linear-gradient(135deg,var(--p211-ink),var(--p211-blue-dark)); color:#fff; text-align:center; box-shadow:0 15px 34px rgba(22,51,75,.23); }
.pocket-211-body .pocket-211-final-cta__label { color:#78d7ce; }
.pocket-211-body .pocket-211-final-cta h2 { margin:0 0 14px; color:#fff; font-size:clamp(25px,3vw,34px); line-height:1.5; }
.pocket-211-body .pocket-211-final-cta p { margin:0 auto 24px; max-width:760px; }
.pocket-211-body .pocket-211-final-cta__buttons { display:flex; justify-content:center; flex-wrap:wrap; gap:13px; }
.pocket-211-body .pocket-211-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-211-body .pocket-211-button--primary,
.pocket-211-body .pocket-211-button--primary:visited { background-color:#fff; color:var(--p211-blue-dark); border-color:#fff; }
.pocket-211-body .pocket-211-button--primary:hover,
.pocket-211-body .pocket-211-button--primary:focus-visible { background-color:#dff4f1; color:#0a3f5d; border-color:#dff4f1; transform:translateY(-1px); }
.pocket-211-body .pocket-211-button--secondary,
.pocket-211-body .pocket-211-button--secondary:visited { background-color:transparent; color:#fff; border-color:#fff; }
.pocket-211-body .pocket-211-button--secondary:hover,
.pocket-211-body .pocket-211-button--secondary:focus-visible { background-color:#fff; color:var(--p211-ink); border-color:#fff; transform:translateY(-1px); }

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