@charset "UTF-8";

.pocket-192-body .pocket-192-page {
    --p192-navy: #173f5f;
    --p192-blue: #176e9f;
    --p192-blue-light: #eaf4f9;
    --p192-teal: #2c7c78;
    --p192-red: #b43839;
    --p192-red-dark: #8f292b;
    --p192-ink: #26323a;
    --p192-muted: #5e6c74;
    --p192-line: #d5dfe4;
    --p192-warm: #f7f3ea;
    color: var(--p192-ink);
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.85;
}
.pocket-192-body .pocket-192-page *,
.pocket-192-body .pocket-192-page *::before,
.pocket-192-body .pocket-192-page *::after { box-sizing: border-box; }
.pocket-192-body .pocket-192-page-title { margin-bottom: 24px; color: var(--p192-navy); line-height: 1.45; }
.pocket-192-body .pocket-192-hero { overflow: hidden; margin: 0 0 34px; border-radius: 14px; box-shadow: 0 14px 34px rgba(30,51,65,.14); }
.pocket-192-body .pocket-192-hero img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.pocket-192-body .pocket-192-lead,
.pocket-192-body .pocket-192-summary,
.pocket-192-body .pocket-192-section,
.pocket-192-body .pocket-192-related,
.pocket-192-body .pocket-192-final-cta { margin:0 0 54px; }
.pocket-192-body .pocket-192-page a { color:#075d91; text-decoration-thickness:1px; text-underline-offset:3px; }
.pocket-192-body .pocket-192-page a:hover,
.pocket-192-body .pocket-192-page a:focus-visible { color:#8c2b2d; }
.pocket-192-body .pocket-192-page a:focus-visible { outline:3px solid rgba(23,110,159,.25); outline-offset:3px; border-radius:3px; }

.pocket-192-body .pocket-192-lead { padding:32px 34px; border-left:6px solid var(--p192-blue); border-radius:0 14px 14px 0; background:linear-gradient(135deg,#f7fbfd 0%,#edf6fa 100%); }
.pocket-192-body .pocket-192-lead h2 { margin:4px 0 18px; color:var(--p192-navy); font-size:clamp(1.45rem,2.5vw,2rem); line-height:1.55; }
.pocket-192-body .pocket-192-lead p:last-child { margin-bottom:0; }
.pocket-192-body .pocket-192-kicker { margin:0; color:var(--p192-blue); font-size:.78rem; font-weight:800; letter-spacing:.14em; }

.pocket-192-body .pocket-192-summary { padding:28px 30px; border:1px solid var(--p192-line); border-radius:14px; background:#fff; box-shadow:0 6px 18px rgba(37,61,76,.06); }
.pocket-192-body .pocket-192-summary h2 { margin:0 0 14px; color:var(--p192-navy); font-size:1.42rem; }
.pocket-192-body .pocket-192-summary ul,
.pocket-192-body .pocket-192-checklist ul { margin:0; padding:0; list-style:none; }
.pocket-192-body .pocket-192-summary li,
.pocket-192-body .pocket-192-checklist li { position:relative; padding-left:30px; }
.pocket-192-body .pocket-192-summary li + li,
.pocket-192-body .pocket-192-checklist li + li { margin-top:10px; }
.pocket-192-body .pocket-192-summary li::before,
.pocket-192-body .pocket-192-checklist li::before { content:""; position:absolute; left:4px; top:.72em; width:10px; height:6px; border-left:3px solid var(--p192-blue); border-bottom:3px solid var(--p192-blue); transform:rotate(-45deg); }

.pocket-192-body .pocket-192-toc { margin:0 0 54px; padding:25px 28px; border-radius:14px; background:#f2f6f8; }
.pocket-192-body .pocket-192-toc > p { margin:0 0 13px; color:var(--p192-navy); font-weight:800; }
.pocket-192-body .pocket-192-toc ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 22px; margin:0; padding-left:1.3em; }
.pocket-192-body .pocket-192-toc a { color:var(--p192-ink); text-decoration:none; }
.pocket-192-body .pocket-192-toc a:hover,
.pocket-192-body .pocket-192-toc a:focus-visible { color:var(--p192-blue); text-decoration:underline; }
.pocket-192-body .anchor-target { scroll-margin-top:20px; }

.pocket-192-body .pocket-192-heading { display:flex; align-items:flex-start; gap:16px; margin-bottom:22px; padding-bottom:13px; border-bottom:2px solid var(--p192-line); }
.pocket-192-body .pocket-192-heading span { flex:0 0 auto; margin-top:5px; padding:4px 9px; border-radius:4px; background:var(--p192-blue); color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.09em; }
.pocket-192-body .pocket-192-heading h2 { margin:0; color:var(--p192-navy); font-size:clamp(1.4rem,2.4vw,1.9rem); line-height:1.5; }

.pocket-192-body .pocket-192-answer-box { margin:0 0 24px; padding:23px 25px; border:2px solid #7fb4ce; border-radius:12px; background:#f7fbfd; }
.pocket-192-body .pocket-192-answer-box strong { display:block; margin-bottom:7px; color:var(--p192-blue); font-size:1.06rem; }
.pocket-192-body .pocket-192-answer-box p { margin:0; font-weight:600; }

.pocket-192-body .pocket-192-factor-grid,
.pocket-192-body .pocket-192-choice-grid,
.pocket-192-body .pocket-192-design-grid,
.pocket-192-body .pocket-192-service-grid,
.pocket-192-body .pocket-192-related-grid { display:grid; gap:18px; }
.pocket-192-body .pocket-192-factor-grid { grid-template-columns:repeat(4,minmax(0,1fr)); margin:25px 0; }
.pocket-192-body .pocket-192-factor-grid section { position:relative; min-width:0; padding:25px 20px 21px; border:1px solid var(--p192-line); border-radius:12px; background:#fff; box-shadow:0 5px 16px rgba(36,58,71,.06); }
.pocket-192-body .pocket-192-factor-grid section > span { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; margin-bottom:13px; border-radius:50%; background:var(--p192-navy); color:#fff; font-size:.83rem; font-weight:800; }
.pocket-192-body .pocket-192-factor-grid h3,
.pocket-192-body .pocket-192-choice-grid h3,
.pocket-192-body .pocket-192-design-grid h3 { margin:0 0 9px; color:var(--p192-navy); font-size:1.06rem; line-height:1.55; }
.pocket-192-body .pocket-192-factor-grid p,
.pocket-192-body .pocket-192-choice-grid p,
.pocket-192-body .pocket-192-design-grid p { margin:0; color:var(--p192-muted); font-size:.94rem; }
.pocket-192-body .pocket-192-note { margin-top:24px; padding:20px 23px; border-left:5px solid var(--p192-teal); border-radius:0 10px 10px 0; background:#edf7f5; }
.pocket-192-body .pocket-192-note strong { color:#1f625f; }
.pocket-192-body .pocket-192-note p { margin:4px 0 0; }

.pocket-192-body .pocket-192-table-wrap { overflow-x:auto; margin:24px 0 28px; border:1px solid var(--p192-line); border-radius:12px; background:#fff; -webkit-overflow-scrolling:touch; }
.pocket-192-body .pocket-192-table { width:100%; min-width:760px; border-collapse:collapse; }
.pocket-192-body .pocket-192-table caption { padding:16px 18px; color:var(--p192-navy); font-weight:800; text-align:left; background:#f3f7f9; }
.pocket-192-body .pocket-192-table th,
.pocket-192-body .pocket-192-table td { padding:15px 16px; border-top:1px solid var(--p192-line); border-right:1px solid var(--p192-line); vertical-align:top; text-align:left; }
.pocket-192-body .pocket-192-table tr > *:last-child { border-right:0; }
.pocket-192-body .pocket-192-table thead th { background:var(--p192-navy); color:#fff; border-color:#315c79; }
.pocket-192-body .pocket-192-table tbody th { width:22%; color:var(--p192-navy); background:#f7fafb; }

.pocket-192-body .pocket-192-flow { padding:28px 30px; border-radius:14px; background:#eef5f8; }
.pocket-192-body .pocket-192-flow h3 { margin:0 0 18px; color:var(--p192-navy); }
.pocket-192-body .pocket-192-flow ol { margin:0; padding:0; list-style:none; }
.pocket-192-body .pocket-192-flow li { display:flex; gap:16px; align-items:flex-start; }
.pocket-192-body .pocket-192-flow li + li { margin-top:16px; padding-top:16px; border-top:1px solid #cadbe4; }
.pocket-192-body .pocket-192-flow li > span { flex:0 0 34px; height:34px; border-radius:50%; background:var(--p192-blue); color:#fff; font-weight:800; line-height:34px; text-align:center; }
.pocket-192-body .pocket-192-flow strong { color:var(--p192-navy); }
.pocket-192-body .pocket-192-flow p { margin:2px 0 0; color:var(--p192-muted); }

.pocket-192-body .pocket-192-choice-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin:24px 0; }
.pocket-192-body .pocket-192-choice-grid section { min-width:0; padding:23px 24px; border-radius:12px; border-top:5px solid var(--p192-blue); background:#f7fafb; }
.pocket-192-body .pocket-192-callout { padding:23px 25px; border-radius:12px; background:var(--p192-warm); }
.pocket-192-body .pocket-192-callout strong { display:block; margin-bottom:5px; color:#7d4c1f; }
.pocket-192-body .pocket-192-callout p { margin:0; }

.pocket-192-body .pocket-192-design-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:24px; }
.pocket-192-body .pocket-192-design-grid section { min-width:0; padding:24px; border:1px solid var(--p192-line); border-radius:12px; background:#fff; }
.pocket-192-body .pocket-192-design-grid a { display:inline-block; margin-top:12px; font-weight:700; }

.pocket-192-body .pocket-192-service-grid { grid-template-columns:repeat(3,minmax(0,1fr)); margin:24px 0; }
.pocket-192-body .pocket-192-service-grid > a,
.pocket-192-body .pocket-192-related-grid > a { display:block; min-width:0; padding:20px; border:1px solid var(--p192-line); border-radius:12px; background:#fff; color:var(--p192-ink); text-decoration:none; box-shadow:0 4px 14px rgba(35,62,78,.06); transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.pocket-192-body .pocket-192-service-grid > a:hover,
.pocket-192-body .pocket-192-service-grid > a:focus-visible,
.pocket-192-body .pocket-192-related-grid > a:hover,
.pocket-192-body .pocket-192-related-grid > a:focus-visible { color:var(--p192-ink); border-color:#86b4ce; box-shadow:0 10px 24px rgba(35,62,78,.12); transform:translateY(-2px); }
.pocket-192-body .pocket-192-service-grid strong,
.pocket-192-body .pocket-192-related-grid strong { display:block; color:var(--p192-navy); font-size:1.03rem; line-height:1.55; }
.pocket-192-body .pocket-192-service-grid span,
.pocket-192-body .pocket-192-related-grid span { display:block; margin-top:6px; color:var(--p192-muted); font-size:.9rem; }
.pocket-192-body .pocket-192-subnote { padding:18px 22px; border-radius:10px; background:#f4f7f8; }

.pocket-192-body .pocket-192-checklist { margin:22px 0 24px; padding:27px 29px; border-radius:14px; background:#f7f3ea; }
.pocket-192-body .pocket-192-checklist li::before { border-color:var(--p192-red); }

.pocket-192-body .pocket-192-faq details { border:1px solid var(--p192-line); border-radius:10px; background:#fff; }
.pocket-192-body .pocket-192-faq details + details { margin-top:12px; }
.pocket-192-body .pocket-192-faq summary { position:relative; padding:20px 54px 20px 22px; cursor:pointer; color:var(--p192-navy); font-weight:700; list-style:none; }
.pocket-192-body .pocket-192-faq summary::-webkit-details-marker { display:none; }
.pocket-192-body .pocket-192-faq summary::after { content:"＋"; position:absolute; right:20px; top:50%; color:var(--p192-blue); font-size:1.35rem; transform:translateY(-50%); }
.pocket-192-body .pocket-192-faq details[open] summary::after { content:"−"; }
.pocket-192-body .pocket-192-faq details p { margin:0; padding:0 22px 22px; }

.pocket-192-body .pocket-192-related { padding:30px; border-radius:16px; background:#f2f5f7; }
.pocket-192-body .pocket-192-related h2 { margin:0 0 20px; color:var(--p192-navy); font-size:1.5rem; }
.pocket-192-body .pocket-192-related-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.pocket-192-body .pocket-192-related-grid > a { padding:18px; box-shadow:none; }
.pocket-192-body .pocket-192-back-link { display:inline-block; margin-top:20px; font-weight:700; }

.pocket-192-body .pocket-192-final-cta { padding:38px 34px; border-radius:16px; background:linear-gradient(135deg,#173f5f 0%,#225f83 100%); color:#fff; text-align:center; }
.pocket-192-body .pocket-192-final-cta .pocket-192-kicker { color:#bde3f5; }
.pocket-192-body .pocket-192-final-cta h2 { margin:5px 0 14px; color:#fff; font-size:clamp(1.45rem,2.6vw,1.95rem); line-height:1.5; }
.pocket-192-body .pocket-192-final-cta p { max-width:760px; margin:0 auto; }
.pocket-192-body .pocket-192-cta-buttons { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-top:24px; }
.pocket-192-body .pocket-192-button { display:inline-flex; align-items:center; justify-content:center; min-width:240px; min-height:54px; padding:13px 24px; border:2px solid transparent; border-radius:8px; color:#fff; font-weight:800; line-height:1.4; text-decoration:none; transition:background-color .18s ease,color .18s ease,border-color .18s ease,transform .18s ease; }
.pocket-192-body .pocket-192-page a.pocket-192-button--sample { background-color:#b43839; color:#fff; }
.pocket-192-body .pocket-192-page a.pocket-192-button--estimate { background-color:#fff; color:#173f5f; border-color:#fff; }
.pocket-192-body .pocket-192-page a.pocket-192-button--sample:hover,
.pocket-192-body .pocket-192-page a.pocket-192-button--sample:focus-visible { background-color:#8f292b; color:#fff; border-color:#8f292b; transform:translateY(-1px); }
.pocket-192-body .pocket-192-page a.pocket-192-button--estimate:hover,
.pocket-192-body .pocket-192-page a.pocket-192-button--estimate:focus-visible { background-color:#eaf4fa; color:#173f5f; border-color:#eaf4fa; transform:translateY(-1px); }

@media screen and (max-width:1100px) {
    .pocket-192-body .pocket-192-factor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .pocket-192-body .pocket-192-service-grid,
    .pocket-192-body .pocket-192-related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media screen and (max-width:650px) {
    .pocket-192-body .pocket-192-page-title { font-size:1.55rem; }
    .pocket-192-body .pocket-192-hero { margin-bottom:26px; border-radius:10px; }
    .pocket-192-body .pocket-192-lead,
    .pocket-192-body .pocket-192-summary,
    .pocket-192-body .pocket-192-related,
    .pocket-192-body .pocket-192-final-cta { padding:24px 20px; }
    .pocket-192-body .pocket-192-toc { padding:22px 20px; }
    .pocket-192-body .pocket-192-toc ol,
    .pocket-192-body .pocket-192-factor-grid,
    .pocket-192-body .pocket-192-choice-grid,
    .pocket-192-body .pocket-192-design-grid,
    .pocket-192-body .pocket-192-service-grid,
    .pocket-192-body .pocket-192-related-grid { grid-template-columns:1fr; }
    .pocket-192-body .pocket-192-heading { display:block; }
    .pocket-192-body .pocket-192-heading span { display:inline-block; margin:0 0 8px; }
    .pocket-192-body .pocket-192-table-wrap::after { content:"表は横にスクロールできます"; display:block; padding:8px 12px; color:var(--p192-muted); font-size:.8rem; background:#f7fafb; }
    .pocket-192-body .pocket-192-flow { padding:24px 20px; }
    .pocket-192-body .pocket-192-cta-buttons { display:grid; grid-template-columns:1fr; }
    .pocket-192-body .pocket-192-button { width:100%; min-width:0; }
}
@media screen and (max-width:480px) {
    .pocket-192-body .pocket-192-page { overflow-wrap:anywhere; }
    .pocket-192-body .pocket-192-lead h2,
    .pocket-192-body .pocket-192-heading h2 { font-size:1.34rem; }
    .pocket-192-body .pocket-192-summary,
    .pocket-192-body .pocket-192-checklist { padding:21px 17px; }
    .pocket-192-body .pocket-192-flow li { gap:11px; }
}