:root{--navy: #1e3a5f;--navy-deep: #13253b;--gold: #c49a38;--gold-soft: #e8d9b5;--paper: #f7f3ea;--paper-bright: #fbf8f2;--ink: #1a1a1a;--muted: #5d6b7a;--line: rgba(30, 58, 95, .15);--font-display: "Shippori Mincho B1", "Noto Serif JP", serif;--font-body: "Noto Sans JP", system-ui, sans-serif}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);line-height:1.9;font-size:16px}img{max-width:100%;height:auto}a{color:var(--navy)}.wrap{max-width:1040px;margin:0 auto;padding:0 20px}.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:10}.muted{color:var(--muted)}.small{font-size:13px}.site-header{background:var(--navy-deep);color:var(--paper);position:sticky;top:0;z-index:5}.header-inner{display:flex;align-items:center;gap:20px;min-height:64px;flex-wrap:wrap}.logo{font-family:var(--font-display);font-weight:700;font-size:20px;color:var(--paper);text-decoration:none;letter-spacing:.04em;margin:0}.nav{list-style:none;display:flex;gap:18px;margin:0;padding:0;flex-wrap:wrap;flex:1}.nav a{color:#f7f3eacc;text-decoration:none;font-size:14px}.nav a:hover,.nav a[aria-current=page]{color:var(--gold)}.btn{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--navy-deep);text-decoration:none;font-weight:500;padding:14px 26px;border-radius:4px;font-size:15px}.btn:hover{opacity:.9}.btn-sm{padding:8px 16px;font-size:13px}.link-arrow{color:var(--gold);text-decoration:none;border-bottom:1px dotted currentColor}.hero{background:var(--navy-deep);color:var(--paper);padding:96px 0 88px}.kicker{font-size:12px;letter-spacing:.3em;color:var(--gold);margin:0 0 20px}.hero h1{font-family:var(--font-display);font-size:clamp(34px,6vw,60px);font-weight:500;line-height:1.35;margin:0 0 24px}.hero .lead{max-width:640px;color:#f7f3eacc;margin:0 0 28px}.badge{display:inline-block;border:1px solid var(--gold);color:var(--gold);border-radius:999px;padding:4px 14px;font-size:13px;margin:0 0 24px}.cta-row{display:flex;gap:16px 24px;align-items:center;flex-wrap:wrap}.hero .link-arrow{color:var(--paper)}.section{padding:72px 0}.section.alt{background:var(--paper-bright)}.section.dark{background:var(--navy-deep);color:var(--paper);text-align:center}.label{font-size:11px;letter-spacing:.3em;color:var(--gold);margin:0 0 8px}.section h2{font-family:var(--font-display);font-weight:500;font-size:clamp(24px,3.4vw,32px);margin:0 0 32px;line-height:1.5}.page-head{background:var(--navy-deep);color:var(--paper);padding:64px 0 48px}.page-head h1{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,4.4vw,42px);margin:0 0 12px}.page-head p{color:#f7f3eacc;margin:0;max-width:680px}.prose{max-width:760px}.prose h2{margin-top:48px}.grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));list-style:none;padding:0;margin:0}.card{background:#fff;border:1px solid var(--line);padding:28px;border-radius:4px}.card h3{font-family:var(--font-display);font-size:19px;font-weight:700;margin:0 0 8px;color:var(--navy)}.card p{margin:0;color:var(--muted);font-size:15px}.checks{list-style:none;padding:0;margin:0}.checks li{padding:14px 0 14px 1.6em;border-bottom:1px dotted var(--line);position:relative}.checks li:before{content:"—";position:absolute;left:0;color:var(--gold)}.steps{list-style:none;padding:0;margin:0;display:grid;gap:12px}.steps li{display:grid;grid-template-columns:56px 1fr;gap:16px;background:#fff;border:1px solid var(--line);padding:20px;border-radius:4px}.steps .num{font-family:var(--font-display);font-size:26px;color:var(--gold);line-height:1.2}.steps h3{margin:0 0 4px;font-size:17px;color:var(--navy)}.steps p{margin:0;color:var(--muted);font-size:15px}.steps .who{display:block;font-size:13px;color:var(--muted)}.steps .who b{color:var(--navy);font-weight:500}.flow{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 24px}.flow li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 16px;font-size:14px}.table{width:100%;border-collapse:collapse;background:#fff}.table th,.table td{padding:16px;border-bottom:1px solid var(--line);text-align:left;font-weight:400}.table td.price{text-align:right;white-space:nowrap;font-weight:500;color:var(--navy)}.notice{background:#fff;border:1px solid var(--gold);padding:24px;border-radius:4px;margin:0 0 40px}.notice strong{color:var(--gold)}.faq dt{font-weight:500;color:var(--navy);margin-top:28px}.faq dd{margin:8px 0 0;color:var(--ink)}.site-footer{background:var(--navy-deep);color:var(--paper);padding:48px 0}.footer-inner{display:grid;gap:20px}.footer-links{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;padding:0;margin:0}.footer-links a{color:#f7f3eacc;text-decoration:none;font-size:14px}.site-footer .muted{color:#f7f3ea99}@media(max-width:720px){.nav{display:none}.header-inner{justify-content:space-between}.hero{padding:64px 0}.section{padding:56px 0}.steps li{grid-template-columns:40px 1fr}}.hero-layout{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center;max-width:1280px}.hero-layout h1{font-size:clamp(34px,4.5vw,58px)}.hero-purpose{color:var(--paper);max-width:34em;margin:0 0 24px}.hero-example{margin:0;min-width:0}.hero-example>a{display:block;border:1px solid rgba(232,217,181,.4);border-radius:10px;overflow:hidden;box-shadow:0 24px 64px #0005}.hero-example img{display:block;width:100%}.hero-example figcaption{font-family:var(--font-display);margin-top:18px;font-size:20px}.hero-example figcaption span{font-family:var(--font-body);font-size:13px;color:var(--gold-soft)}.browser-bar{display:flex;gap:5px;align-items:center;background:#e9e6df;padding:9px 12px;color:#56616d;font-size:10px;line-height:1.4;font-family:var(--font-body)}.browser-bar i{width:6px;height:6px;background:#a9a9a4;border-radius:50%;flex-shrink:0}.browser-bar>span{margin-left:8px}.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:30px 0 18px}.portfolio-card{min-width:0;background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden;transition:box-shadow .2s}.portfolio-card:hover{box-shadow:0 8px 28px #13253b14}.portfolio-shot{display:block;overflow:hidden}.portfolio-shot img{display:block;width:100%;aspect-ratio:1.44;object-fit:cover;object-position:top}.portfolio-caption{padding:22px}.portfolio-caption h3{margin:0 0 10px;color:var(--navy);font-family:var(--font-display);font-size:21px}.portfolio-caption p:not(.label){font-size:14px;color:var(--muted)}.portfolio-caption a{font-size:13px;text-underline-offset:5px}.example-note{margin-top:48px;padding:28px;border-left:3px solid var(--gold);background:var(--paper-bright)}.example-note h3{font-family:var(--font-display);color:var(--navy);margin-top:0}.creation-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:0;list-style:none;gap:24px;margin:28px 0}.creation-flow li{position:relative;padding:24px 18px;background:#fff;border:1px solid var(--line);border-radius:8px}.creation-flow li:not(:last-child):after{content:"→";position:absolute;right:-23px;top:72px;color:var(--navy)}.flow-number{display:block;color:var(--muted);font-size:11px;letter-spacing:.15em;margin-bottom:12px}.creation-flow svg{color:var(--navy);display:block;margin-bottom:16px}.creation-flow h3{font-family:var(--font-display);font-size:23px;color:var(--navy);margin:0 0 12px}.creation-flow p{font-size:14px;color:var(--muted);margin:0}a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.section .link-arrow,.example-note .link-arrow{color:var(--navy)}@media(max-width:900px){.hero-layout{grid-template-columns:1fr;gap:40px;max-width:760px}.portfolio-grid{gap:14px}.portfolio-caption{padding:16px}.creation-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.creation-flow li:nth-child(2):after{display:none}}@media(max-width:600px){.portfolio-grid{grid-template-columns:1fr;gap:24px}.creation-flow{grid-template-columns:1fr;gap:26px}.creation-flow li{display:grid;grid-template-columns:64px 1fr;gap:6px 20px;padding:22px}.flow-number{grid-column:1;margin:0}.creation-flow svg{grid-column:1;grid-row:2 / 4;margin:0}.creation-flow h3{grid-column:2;grid-row:1 / 3;margin:0}.creation-flow p{grid-column:2}.creation-flow li:not(:last-child):after{content:"↓";display:block;right:50%;top:auto;bottom:-27px}.hero .badge{font-size:12px}}@media(prefers-reduced-motion:reduce){.portfolio-card{transition:none}}