/* SEO記事共通: 色・文字・CTA・目次・FAQ・記事カード */
:root { --blue:#1a8cbb; --blue-dark:#0f6e9b; --pale:#ecf7fe; --green:#40a72e; --ink:#222; }
html { scroll-behavior:smooth; }
*,*::before,*::after { box-sizing:border-box; }
body { margin:0; color:var(--ink); font-family:"Noto Sans JP",sans-serif; line-height:1.85; }
a { color:var(--blue); }
img { max-width:100%; height:auto; }
figure { margin:0; }
.container { max-width:960px; margin:0 auto; padding:0 20px; }
.site-header { position:sticky; top:0; z-index:10; height:64px; background:#fff; border-bottom:1px solid #e0e0e0; }
.site-header .container { height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--blue); font-weight:700; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:8px; background:var(--blue); color:#fff; font-weight:900; }
.header-cta,.button { display:inline-block; padding:10px 22px; border-radius:7px; background:var(--blue); color:#fff; font-size:.88rem; font-weight:700; text-decoration:none; }
.breadcrumb { background:#f4f4f4; border-bottom:1px solid #e0e0e0; color:#666; font-size:.8rem; }
.breadcrumb .container { padding-top:9px; padding-bottom:9px; }
.hero { position:relative; overflow:hidden; padding:64px 0 56px; background:linear-gradient(150deg,#0f6e9b 0%,var(--blue) 55%,#1c9fd4 100%); color:#fff; }
.hero-decoration { position:absolute; border-radius:50%; pointer-events:none; }
.hero-decoration.top { top:-80px; right:-80px; width:480px; height:480px; background:rgba(255,255,255,.06); }
.hero-decoration.bottom { bottom:-100px; left:-60px; width:360px; height:360px; background:rgba(255,255,255,.04); }
.hero .hero-inner { position:relative; max-width:1440px; margin:0 auto; padding:0 20px; }
.hero-layout { display:grid; grid-template-columns:minmax(0,1fr) 600px; gap:40px; align-items:center; }
.hero-copy { min-width:0; }
.hero-thumbnail { overflow:hidden; border-radius:16px; box-shadow:0 14px 32px rgba(0,0,0,.2); }
.hero-thumbnail img { display:block; width:100%; }
.eyebrow { display:inline-block; margin:0 0 20px; padding:4px 14px; border:1px solid rgba(255,255,255,.35); border-radius:20px; background:rgba(255,255,255,.18); font-size:.78rem; font-weight:700; letter-spacing:.08em; }
.hero h1 { max-width:800px; margin:0 0 12px; font-size:clamp(1.65rem,3.2vw,2.6rem); line-height:1.45; }
.hero .hero-description { max-width:680px; margin:0 0 28px; color:rgba(255,255,255,.85); font-size:clamp(.9rem,1.3vw,1rem); }
.article-meta { margin:-16px 0 24px; color:rgba(255,255,255,.75); font-size:.78rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.hero-actions a { display:inline-flex; align-items:center; gap:8px; padding:13px 28px; border-radius:8px; font-size:.95rem; font-weight:700; text-decoration:none; }
.hero-actions .primary { background:#fff; color:var(--blue); box-shadow:0 4px 16px rgba(0,0,0,.18); }
.hero-actions .secondary { border:1.5px solid rgba(255,255,255,.5); background:rgba(255,255,255,.15); color:#fff; }
.hero-conclusion { display:flex; gap:14px; align-items:flex-start; max-width:740px; margin-top:36px; padding:22px 28px; border:1px solid rgba(255,255,255,.28); border-radius:14px; background:rgba(255,255,255,.11); }
.hero-conclusion .icon { flex-shrink:0; margin-top:2px; font-size:1.3rem; }
.hero-conclusion p { margin:0; color:rgba(255,255,255,.88); font-size:.9rem; line-height:1.8; }
.hero-conclusion .title { margin-bottom:6px; color:#fff; font-size:.95rem; font-weight:700; }
.section { padding:72px 0; }
.section.alt { background:var(--pale); }
.section.gray { background:#f4f4f4; }
.article { max-width:800px; }
.article h2 { margin:0 0 22px; font-size:clamp(1.45rem,3vw,2.05rem); line-height:1.45; }
.article h3 { margin:38px 0 12px; padding-left:14px; border-left:4px solid var(--blue); font-size:1.15rem; line-height:1.6; }
.article h4 { margin:30px 0 10px; color:var(--blue-dark); font-size:1rem; line-height:1.6; }
.article p { margin:0 0 18px; font-size:.95rem; }
.article li { margin-bottom:8px; font-size:.94rem; }
.lead { text-align:center; }
.lead .en { margin:0 0 8px; color:var(--blue); font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.lead p:last-child { max-width:690px; margin:0 auto; color:#555; }
.toc { margin-top:34px; padding:28px 32px; border-radius:16px; background:#fff; box-shadow:0 2px 14px rgba(0,0,0,.06); }
.toc p { margin:0 0 10px; color:var(--blue); font-size:.82rem; font-weight:700; letter-spacing:.08em; }
.toc ol { display:grid; gap:8px; margin:0; padding-left:20px; }
.toc a { color:#333; text-decoration:none; }
.notice { margin:26px 0; padding:20px 22px; border-left:4px solid var(--blue); border-radius:0 12px 12px 0; background:#eef8fb; color:#444; }
.notice strong { color:var(--blue-dark); }
.example { margin:14px 0; padding:16px 18px; border-left:3px solid #999; border-radius:12px; background:#f7f7f7; font-size:.92rem; }
.article-image { margin:30px auto; }
.article-image img { display:block; width:100%; border-radius:16px; box-shadow:0 10px 28px rgba(20,40,60,.12); }
.article-image figcaption { margin-top:8px; color:#777; font-size:.75rem; text-align:center; }
.marker-positive,.marker-negative { padding:0 .12em; font-weight:700; background-repeat:no-repeat; background-size:100% 100%; color:var(--ink); }
.marker-positive { background-image:linear-gradient(transparent 54%,#ccefb9 54%,#ccefb9 90%,transparent 90%); }
.marker-negative { background-image:linear-gradient(transparent 54%,#ffd0d5 54%,#ffd0d5 90%,transparent 90%); }
.service-checklist { margin:20px 0 24px; padding:22px 26px; border:1px solid #bfe3ee; border-radius:12px; background:var(--pale); box-shadow:0 5px 16px rgba(26,140,187,.08); }
.section.alt .service-checklist { background:#fff; }
.service-checklist ol { margin:0; padding-left:1.45em; }
.service-checklist li { margin:0 0 10px; padding-left:.25em; }
.service-checklist li:last-child { margin-bottom:0; }
.mid-cta { margin:42px 0; padding:34px 30px; border:1px solid #bfe3ee; border-radius:18px; background:#fff; box-shadow:0 8px 22px rgba(26,140,187,.12); text-align:center; }
.mid-cta h3 { margin:0 0 8px; padding:0; border:0; font-size:1.15rem; }
.mid-cta p { color:#555; }
.faq { display:grid; gap:14px; }
details { overflow:hidden; border:2px dashed #ccc; border-radius:20px; background:#fff; }
summary { display:flex; justify-content:space-between; gap:14px; cursor:pointer; padding:19px 24px; font-size:.94rem; font-weight:700; list-style:none; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"＋"; color:var(--blue); font-size:1.3rem; font-weight:400; }
details[open] summary::after { content:"−"; }
details p { margin:0; padding:16px 24px 20px; border-top:1px solid var(--pale); color:#555; font-size:.9rem; }
.final-cta { padding:72px 0; background:linear-gradient(145deg,#0b5e88,var(--blue),#1fa5d8); color:#fff; text-align:center; }
.final-cta h2 { margin:0 0 16px; font-size:clamp(1.5rem,3vw,2.1rem); line-height:1.5; }
.final-cta p { max-width:620px; margin:0 auto 30px; color:rgba(255,255,255,.9); }
.final-cta .button { padding:15px 38px; background:#fff; color:var(--blue); box-shadow:0 4px 20px rgba(0,0,0,.2); }
footer { padding:38px 0 25px; background:#1e1e1e; color:#888; font-size:.8rem; }
footer .container { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; }
footer .brand { color:#fff; }
footer a { margin-left:20px; color:#aaa; text-decoration:none; }
@media (max-width:1120px) { .hero-layout { grid-template-columns:1fr; gap:32px; } .hero-thumbnail { max-width:600px; } }
@media (max-width:600px) { .site-header { height:58px; } .brand span:last-child { font-size:.85rem; } .header-cta { padding:8px 12px; } .section { padding:54px 0; } .hero { padding:45px 0; } .hero-conclusion { padding:18px; } .hero-actions a { width:100%; justify-content:center; } .toc { padding:22px; } .article h3 { margin-top:32px; } summary { padding:16px 18px; } details p { padding-left:18px; padding-right:18px; } }