:root { --ink:#182225; --muted:#637176; --paper:#f4f0e8; --card:#fffdf8; --line:#d9d4c9; --brand:#0c766c; --brand-dark:#07534d; --accent:#d8623c; --code:#132225; --shadow:0 18px 50px rgba(24,34,37,.1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 8% 0%,rgba(12,118,108,.12),transparent 28rem),var(--paper); font-family:Inter,"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif; line-height:1.75; }
a { color:var(--brand-dark); }
img { display:block; }
.wrap { width:min(1120px,calc(100% - 36px)); margin-inline:auto; }
.anchor-target { display:block; scroll-margin-top:92px; }
.site-header { position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(217,212,201,.86); background:rgba(244,240,232,.9); backdrop-filter:blur(14px); }
.nav { min-height:68px; display:flex; align-items:center; gap:24px; }
.brand { color:var(--ink); font-size:1.1rem; font-weight:800; text-decoration:none; letter-spacing:-.02em; }
.brand span,.eyebrow { color:var(--brand); }
.nav-links { display:flex; align-items:center; gap:22px; margin-left:auto; }
.nav-links a { color:var(--ink); font-size:.9rem; font-weight:700; text-decoration:none; }
.lang { padding:7px 11px; border:1px solid var(--line); border-radius:999px; background:var(--card); }
.hero { padding:92px 0 72px; }
.hero-grid { display:grid; grid-template-columns:1.12fr .88fr; align-items:center; gap:64px; }
.hero-copy { min-width:0; }
.eyebrow { margin:0 0 12px; font-size:.78rem; font-weight:900; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(3.1rem,7vw,6.6rem); line-height:.92; letter-spacing:-.075em; }
.hero h1 { font-family:"IBM Plex Sans JP","Noto Sans JP",sans-serif; font-weight:700; }
.hero-title { display:flex; flex-direction:column; line-height:1.05; }
.hero-title-line { display:flex; align-items:center; min-height:1.05em; }
.hero-title-product { font-size:.56em; letter-spacing:-.045em; white-space:nowrap; }
.hero-benefit-title { font-size:clamp(2.85rem,5.5vw,5.15rem); letter-spacing:-.065em; }
.hero-benefit-title .hero-title-line { min-height:1.05em; }
.hero-title-accent { position:relative; z-index:0; width:max-content; max-width:100%; color:var(--brand); }
.hero-title-accent::after { content:""; position:absolute; z-index:-1; right:-.04em; bottom:.04em; left:-.03em; height:.13em; border-radius:999px; background:rgba(216,98,60,.4); transform:rotate(-1deg); }
.ja-hero-title .hero-title-context { font-size:.7em; letter-spacing:-.04em; white-space:nowrap; }
.ja-hero-title .hero-title-accent { font-size:.84em; white-space:nowrap; }
.en-hero-title { font-size:clamp(3rem,5.35vw,5.15rem); letter-spacing:-.07em; text-transform:uppercase; }
.hero-feature-list { display:flex; flex-wrap:wrap; gap:8px; margin:24px 0 0; padding:0; list-style:none; }
.hero-feature-list li { padding:6px 11px; border:1px solid rgba(12,118,108,.24); border-radius:999px; background:rgba(255,253,248,.72); color:var(--brand-dark); font-size:.76rem; font-weight:850; line-height:1.35; }
.hero-legacy { max-width:610px; margin:24px 0 0; padding-left:13px; border-left:2px solid var(--line); color:var(--muted); font-size:.78rem; line-height:1.6; }
.lead { max-width:680px; margin:28px 0 0; color:var(--muted); font-size:1.08rem; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 20px; border:1px solid var(--brand); border-radius:7px; background:var(--brand); color:#fff; font-weight:800; text-decoration:none; }
.button.secondary { border-color:var(--line); background:var(--card); color:var(--ink); }
.hero-mark { position:relative; width:100%; min-width:0; min-height:0; aspect-ratio:1; }
.hero-card { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; border:1px solid var(--line); border-radius:28px; background:var(--card); box-shadow:var(--shadow); transform:rotate(2deg); }
.hero-card img { width:100%; height:100%; max-width:100%; object-fit:contain; }
.notice { margin:0 auto 74px; padding:22px 26px; border-left:5px solid var(--accent); background:#fff8ee; }
.notice strong { color:#983d21; }
section { padding:78px 0; }
.section-head { display:grid; grid-template-columns:3fr 2fr; gap:48px; margin-bottom:38px; }
.section-head h2 { margin:0; font-size:clamp(2rem,4.2vw,3.6rem); line-height:1.08; letter-spacing:-.045em; }
.section-head p { margin:6px 0 0; color:var(--muted); }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.feature { min-height:190px; padding:26px; border:1px solid var(--line); border-radius:14px; background:var(--card); }
.feature b { display:block; margin-bottom:9px; font-size:1.12rem; }
.feature p { margin:0; color:var(--muted); font-size:.94rem; }
.feature .num { display:block; margin-bottom:26px; color:var(--accent); font-size:.75rem; font-weight:900; }
.gallery { display:grid; gap:26px; }
.shot-card { overflow:hidden; margin:0; border:1px solid var(--line); border-radius:18px; background:var(--card); box-shadow:var(--shadow); }
.shot { aspect-ratio:1.55; overflow:hidden; background:#e8e5df; }
.shot img { width:100%; height:100%; object-fit:cover; object-position:top left; }
.shot-card figcaption { padding:18px 22px 22px; }
.shot-card figcaption b { display:block; }
.shot-card figcaption span { color:var(--muted); font-size:.9rem; }
.gallery-pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.gallery-pair .shot { aspect-ratio:1.15; }
.steps { counter-reset:steps; display:grid; gap:14px; }
.step { position:relative; padding:25px 26px 25px 78px; border:1px solid var(--line); background:var(--card); }
.step::before { counter-increment:steps; content:counter(steps); position:absolute; left:24px; top:22px; display:grid; width:34px; height:34px; place-items:center; border-radius:50%; background:var(--brand); color:#fff; font-weight:900; }
.step h3 { margin:0 0 4px; font-size:1.05rem; }
.step p { margin:0; color:var(--muted); }
.code-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.code-card { overflow:hidden; border-radius:12px; background:var(--code); color:#d8e4e3; }
.code-card h3 { margin:0; padding:16px 20px; border-bottom:1px solid #294043; color:#fff; font-size:.92rem; }
pre { margin:0; padding:22px; overflow:auto; font:.88rem/1.7 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
.inline-code { padding:.14em .42em; border-radius:4px; background:#e5e1d8; }
.field-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.field-list a { display:flex; align-items:center; min-height:48px; padding:10px 15px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink); font-size:.9rem; font-weight:750; line-height:1.35; text-decoration:none; transition:border-color .18s,background .18s,color .18s,transform .18s; }
.field-list a::after { content:"→"; margin-left:auto; padding-left:10px; color:var(--brand); }
.field-list a:hover,.field-list a:focus-visible { border-color:var(--brand); background:#edf7f4; color:var(--brand-dark); transform:translateY(-1px); }
.field-list a.is-added { border-color:#e5a083; background:#fff1e8; color:#7f351e; }
.field-list a.is-added::before { content:"追加"; flex:none; margin-right:8px; padding:2px 6px; border-radius:999px; background:var(--accent); color:#fff; font-size:.62rem; font-weight:900; letter-spacing:.04em; }
html[lang="en"] .field-list a.is-added::before { content:"Added"; }
.field-list a.is-added:hover,.field-list a.is-added:focus-visible { border-color:var(--accent); background:#ffe5d6; color:#6d2c18; }
.field-legend { display:flex; align-items:center; gap:9px; margin:-14px 0 20px; color:var(--muted); font-size:.86rem; }
.field-legend span { width:15px; height:15px; border:1px solid #e5a083; border-radius:4px; background:#fff1e8; }

/* Output reference */
.docs-page { background:linear-gradient(180deg,rgba(12,118,108,.09),transparent 34rem),var(--paper); }
.docs-page .site-header { background:rgba(244,240,232,.94); }
.docs-hero { padding:86px 0 42px; }
.docs-hero h1 { max-width:760px; font-size:clamp(3.4rem,7vw,6.2rem); }
.docs-hero .lead { max-width:760px; }
.docs-field-list { margin-top:44px; padding:22px; border:1px solid var(--line); border-radius:18px; background:rgba(255,253,248,.78); box-shadow:0 12px 38px rgba(24,34,37,.07); }
.docs-page .notice { margin-bottom:38px; border:1px solid #ead7c7; border-left:5px solid var(--accent); border-radius:0 10px 10px 0; }
.reference-section { padding:0 0 72px; }
.toc { position:sticky; top:84px; z-index:10; display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:72px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:rgba(255,253,248,.94); box-shadow:0 8px 24px rgba(24,34,37,.07); backdrop-filter:blur(12px); }
.toc b { margin-right:5px; font-size:.8rem; letter-spacing:.08em; }
.toc a { padding:6px 11px; border-radius:999px; color:var(--muted); font-size:.82rem; font-weight:800; text-decoration:none; }
.toc a:hover,.toc a:focus-visible { background:#e2f1ed; color:var(--brand-dark); }
.reference-group { scroll-margin-top:150px; margin-bottom:92px; }
.reference-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:24px; padding-bottom:16px; border-bottom:2px solid var(--ink); }
.reference-heading .eyebrow { margin:0; order:2; }
.reference-heading h2 { margin:0; font-size:clamp(2rem,4vw,3.2rem); line-height:1; letter-spacing:-.045em; }
.reference-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.reference-grid.one-column { grid-template-columns:1fr; }
.reference-card { scroll-margin-top:150px; min-width:0; overflow:hidden; border:1px solid var(--line); border-radius:14px; background:var(--card); box-shadow:0 8px 24px rgba(24,34,37,.055); }
.reference-card.wide { grid-column:1/-1; }
.reference-card:target { border-color:var(--brand); box-shadow:0 0 0 4px rgba(12,118,108,.13),0 14px 34px rgba(24,34,37,.1); }
.card-title { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:20px 22px; border-bottom:1px solid var(--line); }
.card-title h3 { margin:0; font-size:1.12rem; line-height:1.35; }
.type { flex:none; padding:4px 9px; border-radius:999px; background:#e2f1ed; color:var(--brand-dark); font-size:.72rem; font-weight:850; }
.reference-card pre { padding:22px; background:var(--code); color:#dce9e7; font-size:.8rem; line-height:1.65; }
.example-label { margin:0; padding:13px 22px 10px; background:var(--code); color:#9fb3b1; font-size:.75rem; font-weight:850; letter-spacing:.04em; }
.example-label + pre { padding-top:6px; }
.reference-card pre + .example-label { border-top:1px solid #294043; }
.syntax-function { color:#69d6a5; font-weight:750; }
.syntax-get { color:#f1d36b; font-weight:750; }
.syntax-field { color:#f3a26f; font-weight:750; }
.code-legend { margin:0 0 20px; padding:12px 16px; border:1px solid var(--line); border-radius:8px; background:#f8f4ec; color:var(--muted); font-size:.88rem; line-height:1.7; }
.code-legend .svg-inline--fa { color:var(--brand); }
.code-legend-field { color:#d66f32; font-weight:800; }
.code-legend-escape { color:#21865c; font-weight:800; }
.card-note { margin:0; padding:15px 22px 17px; border-top:1px solid var(--line); background:#f8f4ec; color:var(--muted); font-size:.88rem; }
.card-note code,.docs-page .lead code,.docs-page .notice code,.layout-note code { padding:.1em .35em; border-radius:4px; background:#e5e1d8; color:var(--ink); }
.layout-note { scroll-margin-top:150px; padding:26px 28px; border:1px solid var(--line); border-left:5px solid var(--brand); border-radius:10px; background:var(--card); }
.layout-note h3 { margin:0 0 8px; }
.layout-note p { margin:0; color:var(--muted); }

/* Field group guide */
.guide-hero { padding-bottom:54px; }
.guide-hero h1 { display:flex; flex-direction:column; font-size:clamp(3rem,6.1vw,5.8rem); line-height:.96; }
.guide-hero h1 span { white-space:nowrap; }
.guide-jumps { display:flex; flex-wrap:wrap; gap:9px; margin-top:38px; }
.guide-jumps a { padding:8px 13px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink); font-size:.82rem; font-weight:800; text-decoration:none; }
.guide-jumps a:hover { border-color:var(--brand); color:var(--brand-dark); }
.guide-intro { padding:54px 0 84px; }
.guide-intro-grid { display:grid; grid-template-columns:.65fr 1.35fr; align-items:center; gap:54px; }
.guide-intro h2 { margin:0 0 18px; font-size:clamp(2rem,4vw,3.3rem); line-height:1.05; letter-spacing:-.045em; }
.guide-intro p { color:var(--muted); }
.guide-shot { overflow:hidden; margin:0; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); }
.guide-shot img { width:100%; aspect-ratio:1.6; object-fit:cover; object-position:top left; }
.guide-shot figcaption { padding:15px 20px; color:var(--muted); font-size:.86rem; }
.guide-content { padding:40px 0 80px; }
.guide-layout { display:grid; grid-template-columns:190px minmax(0,1fr); align-items:start; gap:54px; }
.guide-layout,.guide-main,.guide-step > div { min-width:0; }
.guide-side { position:sticky; top:92px; display:grid; padding:14px; border:1px solid var(--line); border-radius:12px; background:rgba(255,253,248,.92); }
.guide-side b { padding:6px 9px 10px; font-size:.76rem; letter-spacing:.08em; text-transform:uppercase; }
.guide-side a { padding:7px 9px; border-radius:6px; color:var(--muted); font-size:.82rem; font-weight:750; text-decoration:none; }
.guide-side a:hover { background:#e2f1ed; color:var(--brand-dark); }
.guide-main { display:grid; gap:26px; }
.guide-step { scroll-margin-top:92px; display:grid; grid-template-columns:58px minmax(0,1fr); gap:22px; padding:34px; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:0 8px 26px rgba(24,34,37,.05); }
.guide-number { display:grid; width:48px; height:48px; place-items:center; border-radius:50%; background:var(--brand); color:#fff; font-size:.8rem; font-weight:900; }
.guide-step h2 { margin:0 0 18px; font-size:clamp(1.8rem,3.4vw,2.75rem); line-height:1.08; letter-spacing:-.04em; }
.guide-step h3 { margin:28px 0 8px; }
.guide-step p,.guide-step li,.setting-list dd { color:var(--muted); }
.guide-step ol,.guide-step ul { padding-left:1.3em; }
.guide-step code { padding:.12em .38em; border-radius:4px; background:#e5e1d8; color:var(--ink); }
.guide-step .reference-card pre code { padding:0; border-radius:0; background:transparent; color:inherit; }
.setting-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.setting-list div { padding:17px; border:1px solid var(--line); border-radius:8px; background:#faf7f0; }
.setting-list dt { font-weight:850; }
.setting-list dd { margin:5px 0 0; font-size:.9rem; }
.guide-callout,.guide-warning,.guide-tip { margin-top:22px; padding:18px 20px; border-radius:8px; }
.guide-callout { border-left:4px solid var(--brand); background:#edf7f4; }
.guide-warning { border-left:4px solid var(--accent); background:#fff1e8; }
.guide-callout p,.guide-warning p { margin:5px 0 0; }
.guide-tip { background:#f1eee7; }
.structure-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.structure-grid section { padding:19px; border:1px solid var(--line); border-radius:8px; }
.structure-grid h3 { margin:0 0 7px; font-size:1rem; }
.structure-grid p { margin:0; font-size:.9rem; }
.rule-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:20px; }
.rule-grid span { padding:10px 12px; border:1px solid var(--line); border-radius:7px; background:#faf7f0; font-size:.84rem; font-weight:750; }
.faq { display:grid; gap:10px; }
details { border:1px solid var(--line); background:var(--card); }
summary { cursor:pointer; padding:18px 20px; font-weight:800; }
details p { margin:0; padding:0 20px 20px; color:var(--muted); }
.site-footer { margin-top:72px; padding:46px 0; border-top:1px solid var(--line); color:var(--muted); font-size:.88rem; }
.footer-grid { display:flex; justify-content:space-between; gap:30px; }
.footer-grid p { max-width:690px; margin:0; }
.footer-links { display:flex; gap:18px; white-space:nowrap; }
@media (max-width:820px) { .nav-links a:not(.lang){display:none}.hero{padding-top:64px}.hero-grid,.section-head,.guide-intro-grid{grid-template-columns:1fr;gap:38px}.hero-mark{width:min(100%,560px);margin-inline:auto}.hero-card{transform:none}.feature-grid,.code-grid,.gallery-pair,.reference-grid{grid-template-columns:1fr}.feature-grid{gap:10px}.field-list{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-card.wide{grid-column:auto}.toc{position:static;margin-bottom:54px}.guide-layout{grid-template-columns:1fr}.guide-side{position:static;display:flex;flex-wrap:wrap}.footer-grid{display:grid} }
@media (max-width:520px) { .wrap{width:min(100% - 24px,1120px)}h1{font-size:3.4rem}.example-page .docs-hero h1{font-size:2.45rem}section{padding:58px 0}.feature-grid{grid-template-columns:1fr}.field-list{grid-template-columns:1fr}.docs-hero{padding:56px 0 30px}.docs-field-list{margin-top:32px;padding:12px}.reference-heading{display:block}.reference-heading .eyebrow{margin-bottom:10px}.reference-card pre{padding:18px;font-size:.75rem}.card-title{align-items:flex-start;padding:17px 18px}.guide-step{grid-template-columns:1fr;padding:23px}.setting-list,.structure-grid,.rule-grid{grid-template-columns:1fr}.shot{aspect-ratio:1.1} }
i,
.svg-inline--fa {
	margin-right:8px;
}