@charset "UTF-8";

.pocket-203-body .pocket-203-page {
    --p203-wine: #793043;
    --p203-wine-dark: #58202f;
    --p203-gold: #98733d;
    --p203-gold-dark: #674b25;
    --p203-ink: #26343a;
    --p203-text: #313d40;
    --p203-muted: #6b7778;
    --p203-line: #ddd9cf;
    --p203-soft: #f4f3ef;
    --p203-warm: #fbf6ed;
    color: var(--p203-text);
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.9;
}
.pocket-203-body .pocket-203-page,
.pocket-203-body .pocket-203-page * { box-sizing: border-box; }
.pocket-203-body .pocket-203-page a { color: var(--p203-wine); text-decoration-thickness: 1px; text-underline-offset: .18em; }
.pocket-203-body .pocket-203-page a:hover,
.pocket-203-body .pocket-203-page a:focus-visible { color: var(--p203-wine-dark); }
.pocket-203-body .pocket-203-page a:focus-visible,
.pocket-203-body .pocket-203-page summary:focus-visible,
.pocket-203-body .pocket-203-table-wrap:focus-visible { outline: 3px solid rgba(152,115,61,.38); outline-offset: 3px; }

.pocket-203-body .pocket-203-hero { margin: 0 0 32px; overflow: hidden; border: 1px solid #d8d4ca; border-radius: 18px; background: #f1eee8; box-shadow: 0 14px 34px rgba(42,47,46,.13); }
.pocket-203-body .pocket-203-hero img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }

.pocket-203-body .pocket-203-lead { position:relative; margin:0 0 30px; padding:35px 39px 33px; overflow:hidden; border-left:6px solid var(--p203-gold); border-radius:0 18px 18px 0; background:linear-gradient(135deg,#fff 0%,#f6f3ec 100%); box-shadow:0 10px 28px rgba(53,52,47,.08); }
.pocket-203-body .pocket-203-lead::after { content:""; position:absolute; right:-48px; bottom:-72px; width:203px; height:203px; border:30px solid rgba(121,48,67,.055); border-radius:50%; }
.pocket-203-body .pocket-203-eyebrow,
.pocket-203-body .pocket-203-final-cta__label { margin:0 0 8px; color:var(--p203-gold-dark); font-family:"M PLUS 1 Code",monospace; font-size:13px; font-weight:700; letter-spacing:.12em; }
.pocket-203-body .pocket-203-lead h2 { position:relative; z-index:1; margin:0 0 18px; color:var(--p203-ink); font-size:clamp(26px,3.2vw,38px); line-height:1.45; }
.pocket-203-body .pocket-203-lead p { position:relative; z-index:1; margin:0 0 12px; }
.pocket-203-body .pocket-203-lead p:last-child { margin-bottom:0; }

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

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

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

.pocket-203-body .pocket-203-principle-grid,
.pocket-203-body .pocket-203-design-tips,
.pocket-203-body .pocket-203-use-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin:0 0 25px; }
.pocket-203-body .pocket-203-principle-grid article,
.pocket-203-body .pocket-203-design-tips article,
.pocket-203-body .pocket-203-use-grid article { min-width:0; padding:25px; border:1px solid var(--p203-line); border-radius:15px; background:#fff; }
.pocket-203-body .pocket-203-principle-grid article { border-top:4px solid var(--p203-gold); }
.pocket-203-body .pocket-203-principle-grid span,
.pocket-203-body .pocket-203-use-grid span { display:inline-block; margin-bottom:9px; color:var(--p203-gold-dark); font-family:"M PLUS 1 Code",monospace; font-size:12px; font-weight:700; letter-spacing:.09em; }
.pocket-203-body .pocket-203-principle-grid h3,
.pocket-203-body .pocket-203-design-tips h3,
.pocket-203-body .pocket-203-use-grid h3,
.pocket-203-body .pocket-203-steps h3,
.pocket-203-body .pocket-203-flow h3,
.pocket-203-body .pocket-203-checklist h3 { margin:0 0 9px; color:var(--p203-ink); font-size:20px; line-height:1.55; }
.pocket-203-body .pocket-203-principle-grid p,
.pocket-203-body .pocket-203-design-tips p,
.pocket-203-body .pocket-203-use-grid p { margin:0; }
.pocket-203-body .pocket-203-design-tips article { border-left:4px solid var(--p203-wine); }
.pocket-203-body .pocket-203-note,
.pocket-203-body .pocket-203-support-note { margin:22px 0 0; padding:18px 21px; border-left:4px solid var(--p203-gold); background:#faf7ef; }

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

.pocket-203-body .pocket-203-table-wrap { width:100%; margin:0 0 22px; overflow-x:auto; border:1px solid var(--p203-line); border-radius:14px; background:#fff; }
.pocket-203-body .pocket-203-compare-table { width:100%; min-width:760px; border-collapse:collapse; }
.pocket-203-body .pocket-203-compare-table th,
.pocket-203-body .pocket-203-compare-table td { padding:17px 18px; border-bottom:1px solid var(--p203-line); vertical-align:top; text-align:left; }
.pocket-203-body .pocket-203-compare-table thead th { background:var(--p203-ink); color:#fff; }
.pocket-203-body .pocket-203-compare-table tbody th { width:18%; background:#f1eee7; color:var(--p203-ink); }
.pocket-203-body .pocket-203-compare-table tbody tr:last-child th,
.pocket-203-body .pocket-203-compare-table tbody tr:last-child td { border-bottom:0; }

.pocket-203-body .pocket-203-flow { display:grid; gap:14px; }
.pocket-203-body .pocket-203-flow article { display:grid; grid-template-columns:56px minmax(0,1fr); gap:19px; padding:22px 24px; border:1px solid var(--p203-line); border-radius:14px; background:#fff; }
.pocket-203-body .pocket-203-flow b { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:var(--p203-gold); color:#fff; font-family:"M PLUS 1 Code",monospace; font-size:18px; }
.pocket-203-body .pocket-203-flow p { margin:0; }
.pocket-203-body .pocket-203-checklist { margin-top:24px; padding:25px 27px; border-radius:15px; background:var(--p203-ink); color:#fff; }
.pocket-203-body .pocket-203-checklist h3 { color:#fff; }
.pocket-203-body .pocket-203-checklist ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 24px; margin:0; padding:0; list-style:none; }
.pocket-203-body .pocket-203-checklist li { position:relative; padding-left:25px; }
.pocket-203-body .pocket-203-checklist li::before { content:"✓"; position:absolute; left:0; top:0; color:#e7ca91; font-weight:700; }

.pocket-203-body .pocket-203-product-grid,
.pocket-203-body .pocket-203-related-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.pocket-203-body .pocket-203-product-grid a,
.pocket-203-body .pocket-203-related-grid a { display:flex; flex-direction:column; min-width:0; padding:22px; border:1px solid var(--p203-line); border-radius:14px; background:#fff; color:var(--p203-text); text-decoration:none; box-shadow:0 8px 20px rgba(48,47,43,.05); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.pocket-203-body .pocket-203-product-grid a:hover,
.pocket-203-body .pocket-203-product-grid a:focus-visible,
.pocket-203-body .pocket-203-related-grid a:hover,
.pocket-203-body .pocket-203-related-grid a:focus-visible { color:var(--p203-text); border-color:var(--p203-gold); transform:translateY(-2px); box-shadow:0 12px 26px rgba(48,47,43,.11); }
.pocket-203-body .pocket-203-product-grid strong,
.pocket-203-body .pocket-203-related-grid strong { margin-bottom:7px; color:var(--p203-ink); font-size:18px; line-height:1.55; }
.pocket-203-body .pocket-203-product-grid span,
.pocket-203-body .pocket-203-related-grid span { color:var(--p203-muted); font-size:14px; }

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

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

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

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