@charset "UTF-8";
:root{font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",system-ui,sans-serif;color:#24372e;background:#f5f3eb;line-height:1.9;font-size:16px;color-scheme:light;scroll-behavior:smooth}
*{box-sizing:border-box}body{margin:0}a{color:#285b45;text-underline-offset:4px}a:hover{color:#133724}a:focus-visible,summary:focus-visible{outline:3px solid #927329;outline-offset:5px}p,h1,h2,h3{margin:0}p+p{margin-top:16px}h2{font-size:clamp(24px,3vw,34px);line-height:1.5;letter-spacing:.02em;margin:6px 0 28px}h3{font-size:19px;line-height:1.6;margin-bottom:12px}section{scroll-margin-top:28px}strong{font-weight:750}.small{font-size:13px;color:#536257}.skip-link{position:absolute;top:8px;left:8px;transform:translateY(-180%);padding:8px 20px;background:#fff;z-index:20}.skip-link:focus{transform:translateY(0)}
.guide-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:1160px;margin:auto;padding:22px 28px;border-bottom:1px solid #d9ddd1;font-size:13px}.guide-nav span{font-size:11px;letter-spacing:.14em;color:#617362}.guide-wrap{max-width:1060px;margin:auto;padding:0 36px}.guide-hero{padding:72px 0 46px;position:relative}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;color:#547448}.guide-hero h1{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;font-size:clamp(34px,5vw,58px);line-height:1.55;letter-spacing:.06em;margin:18px 0 28px}.lead{color:#4c5f50;font-size:17px;line-height:2}.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px;margin:28px 0 18px}.button{display:inline-flex;align-items:center;justify-content:center;gap:24px;background:#2c513e;color:#fff;border-radius:10px;padding:14px 24px;text-decoration:none;font-size:15px;font-weight:700}.button:hover{background:#203e2e;color:#fff}.sub-link{font-size:14px}.flow{display:flex;align-items:center;gap:20px;margin-top:44px;padding-top:28px;border-top:1px solid #d6dacc;font-size:18px}.flow span{flex:1}.flow b{display:inline-block;font-size:13px;color:#526c47;margin-right:14px}.flow i{font-style:normal;color:#88957b}.contents{background:#e8eddf;padding:26px 30px;border-radius:14px}.contents h2{font-size:15px;margin:0 0 12px}.contents>div{display:flex;gap:12px 26px;flex-wrap:wrap}.contents a{font-size:14px}.section{padding:60px 0;border-bottom:1px solid #d6dacc}.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.steps article{padding:24px;background:#fffdf7;border:1px solid #dce1d4;border-radius:14px}.step-number{display:block;font-size:32px;line-height:1.3;font-family:Georgia,serif;color:#6d8a59;margin-bottom:16px}.steps p{font-size:14px}.tip{font-size:13px!important;padding-top:15px;margin-top:20px;border-top:1px solid #dce1d4;color:#4c6741}.note{border-left:3px solid #809764;background:#e9eddf;padding:20px 24px;margin-top:28px;font-size:14px}.note a{white-space:nowrap}.feature-list{margin:24px 0 0}.feature-list>div{display:grid;grid-template-columns:minmax(150px,.65fr) minmax(0,1.35fr);gap:28px;padding:20px 0;border-bottom:1px solid #e0e3d8}.feature-list dt{font-weight:700}.feature-list dd{margin:0;color:#4c5f50;font-size:15px}.reading-list{padding-left:24px;margin:24px 0 0}.reading-list li{padding-left:8px;margin:16px 0}.reading-list li::marker{color:#567844;font-weight:700}
.workspace-map{display:grid;grid-template-columns:1fr 2.2fr 1fr;gap:12px;padding:20px;background:#243d32;color:#eff4e9;border-radius:16px;font-size:12px}.map-top{grid-column:1/-1;display:flex;justify-content:space-between;padding:4px 8px 14px;color:#d3e3c6;border-bottom:1px solid #71866d}.map-library,.map-center,.map-edit{padding:14px;border:1px solid #6e856b;border-radius:8px}.workspace-map b{display:block;font-weight:600}.map-top b{display:inline}.workspace-map span{color:#b3d299;font-family:Georgia,serif}.workspace-map i{display:block;height:22px;background:#45604b;margin-top:12px;border-radius:4px}.workspace-map em{display:block;font-style:normal;color:#d0e1c5;padding-top:12px}.sample-window{background:#f4efdf;color:#334c35;padding:18px;border:1px solid #c9bd91;border-radius:7px;margin-top:18px;box-shadow:0 5px 10px #10231c33}.sample-window small{font-size:11px;color:#5d683d}.sample-window p{font-family:serif;font-size:13px;line-height:1.8;margin:8px 0 14px}.sample-window div{font-size:11px;padding:6px 12px;background:#4c6749;color:#fff;width:fit-content;border-radius:5px;margin-left:auto}
.css-example{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;margin:28px 0}.css-example>div{min-width:0}.css-example p{font-size:14px}.css-example pre{margin:20px 0 0;background:#243d32;color:#e0edd9;padding:24px;border-radius:12px;overflow:auto;font-size:13px;line-height:1.8}.css-demo{background:radial-gradient(ellipse at top,#d2dfc2,transparent),#e6e8d5;min-height:280px;padding:35px 26px;display:grid;align-content:center;border-radius:16px}.css-demo .sample-window{border-radius:24px;margin:0}.css-demo .sample-window div{letter-spacing:.08em}.css-demo>span{margin-top:20px;text-align:center;color:#516545;font-size:12px}code{font-family:Consolas,monospace;overflow-wrap:anywhere}li>code{background:#e6eadc;padding:2px 5px;border-radius:4px}.table-scroll{overflow-x:auto;margin:24px 0}table{width:100%;border-collapse:collapse;font-size:14px;text-align:left;min-width:540px}caption{text-align:left;font-size:13px;padding-bottom:12px;color:#536257}th,td{padding:16px 18px;border-bottom:1px solid #d9dece}thead{background:#e3e9d8}tbody th{font-weight:600}.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:28px}.inset{padding:26px;background:#fffdf7;border:1px solid #dce1d4;border-radius:12px}.inset p{font-size:14px}.subheading{margin-top:36px}#save>.small{margin-top:24px}details{border-bottom:1px solid #d6dacc}summary{cursor:pointer;min-height:58px;padding:20px 0;font-weight:650;font-size:16px}details p{padding:0 0 24px;font-size:15px}.guide-end{padding:60px 0 80px}.guide-end>p{font-size:23px;line-height:1.7}.guide-end>.small{display:inline-block;margin-top:24px}
@media(max-width:720px){.guide-wrap{padding:0 22px}.guide-nav{padding:16px 22px}.guide-nav span{order:3;width:100%}.guide-hero{padding:44px 0 32px}.lead{font-size:15px}.lead br{display:none}.hero-actions{gap:16px}.flow{gap:8px;font-size:15px}.flow b{margin-right:5px;font-size:11px}.contents{padding:22px}.contents>div{gap:12px 20px}.section{padding:42px 0}.steps,.two-col,.css-example{grid-template-columns:1fr;gap:18px}.steps article{padding:22px}.steps .step-number{font-size:26px}.feature-list>div{grid-template-columns:1fr;gap:6px;padding:18px 0}.note{padding:18px}.workspace-map{padding:12px;gap:6px;grid-template-columns:.8fr 1.7fr .8fr;font-size:10px}.map-library,.map-center,.map-edit{padding:8px}.workspace-map .sample-window{padding:10px;margin-top:12px}.workspace-map .sample-window p{font-size:10px}.workspace-map .sample-window div{font-size:9px;padding:5px}.workspace-map .sample-window small{font-size:9px}.map-top{gap:10px}.guide-end>p{font-size:20px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}}