:root {
  --paper: #f7f7f4;
  --ink: #1b1b1f;
  --ink-2: #52545a;
  --rule: #ced1d2;
  --c: #00a0e9;
  --m: #e4007f;
  --m-text: #c2006b;
  --c-text: #00739f;
  --y: #ffe100;
  --k: var(--ink);
  --skin: #fffafb;
  --step-0: .78rem;
  --step-1: .94rem;
  --step-2: 1.12rem;
  --step-3: clamp(1.45rem, 3vw, 2.25rem);
  --step-4: clamp(2.65rem, 6vw, 5.6rem);
  --mono: "M PLUS 1 Code", monospace;
  --body: "Zen Kaku Gothic New", sans-serif;
  --display: "Zen Maru Gothic", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 320px; margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: var(--step-1); line-height: 1.8; }
a { color: inherit; }
button { font: inherit; }
::selection { background: var(--y); color: var(--ink); }
.top-slug, .bottom-slug { width: min(1180px, calc(100% - 40px)); margin: auto; color: var(--ink-2); font: 400 .66rem/1.35 var(--mono); letter-spacing: .035em; }
.top-slug { padding: 14px 0 8px; border-bottom: 1px solid var(--rule); }
.site-header, .hero, .section, footer { width: min(1080px, calc(100% - 40px)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 17px 0 25px; }
.brand { display: block; width: 116px; color: var(--ink); }
.brand svg { display: block; width: 100%; }
.brand text, .footer-brand text { font: 700 16px var(--display); letter-spacing: -1px; }
.header-contact, .text-link { font-weight: 700; text-underline-offset: 5px; }
.print-link { transition: text-shadow .15s ease, transform .15s ease; }
.print-link:hover { text-shadow: 1.5px 0 var(--c), -1.5px 0 var(--m); }
.print-link:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--c-text); outline-offset: 4px; }
.hero { padding: clamp(1rem, 3vw, 2rem) 0 clamp(4.5rem, 10vw, 8.5rem); }
.proof-sheet { position: relative; min-height: 560px; padding: clamp(3.8rem, 10vw, 7.6rem) clamp(2rem, 9vw, 8rem) clamp(5rem, 10vw, 7.5rem); border: 1px solid var(--rule); }
.proof-sheet::before { position: absolute; inset: 11px; border: 1px solid #e2e3e2; content: ""; pointer-events: none; }
.crop { position: absolute; width: 42px; height: 42px; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 1.5; }
.crop-tl { top: -1px; left: -1px; }.crop-tr { top: -1px; right: -1px; transform: rotate(90deg); }.crop-bl { bottom: -1px; left: -1px; transform: rotate(-90deg); }.crop-br { right: -1px; bottom: -1px; transform: rotate(180deg); }
.register { position: absolute; width: 24px; fill: none; stroke: var(--ink); stroke-width: 1.5; }.reg-top { top: -13px; left: calc(50% - 12px); }.reg-right { top: calc(50% - 12px); right: -13px; }.reg-bottom { bottom: -13px; left: calc(50% - 12px); }.reg-left { top: calc(50% - 12px); left: -13px; }
.hero-copy { position: relative; z-index: 1; max-width: 62%; }.hero-mochi { position: absolute; z-index: 0; top: 50%; right: clamp(1.5rem, 6vw, 5rem); width: clamp(260px, 30vw, 340px); transform: translateY(-50%); color: var(--ink); }
.folio { margin: 0 0 .65rem; color: var(--ink-2); font: 500 var(--step-0)/1.4 var(--mono); letter-spacing: .06em; }
h1, h2, h3, p { margin-top: 0; } h1, h2, h3 { text-wrap: balance; }
h1 { margin-bottom: 1.2rem; font: 900 var(--step-4)/1.2 var(--display); letter-spacing: -.055em; animation: registration-settle .8s ease-out both; }
.hero-lead { max-width: 33em; margin-bottom: 1.5rem; color: var(--ink-2); font-size: var(--step-2); }.signature { margin-bottom: 2rem; font-size: var(--step-1); font-weight: 700; }.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.7rem; }
.button { display: inline-block; padding: .78rem 1.15rem; border: 2px solid var(--ink); background: var(--ink); color: var(--paper); font-weight: 700; text-decoration: none; }.text-link { text-decoration-thickness: 1px; }
.color-bar { display: flex; height: 10px; }.color-bar i, .color-bar b { display: block; flex: 1; }.color-bar i:nth-child(1) { background: var(--c); }.color-bar i:nth-child(2) { background: var(--m); }.color-bar i:nth-child(3) { background: var(--y); }.color-bar i:nth-child(4) { background: var(--k); }.color-bar b:nth-of-type(1) { background: #3a3a3d; }.color-bar b:nth-of-type(2) { background: #76777a; }.color-bar b:nth-of-type(3) { background: #aaa; }.color-bar b:nth-of-type(4) { background: #d8d8d5; }.hero-bar { position: absolute; right: 11px; bottom: 11px; left: 11px; }
.section { padding: clamp(4.5rem, 9vw, 8rem) 0; }.section-intro { max-width: 580px; margin-bottom: clamp(2.5rem, 6vw, 5rem); }.section-intro h2 { margin-bottom: .8rem; font: 900 var(--step-3)/1.25 var(--display); letter-spacing: -.04em; }.section-intro > p:last-child { max-width: 36em; color: var(--ink-2); }.services, .flow { border-top: 1px solid var(--ink); }
.service { display: grid; grid-template-columns: minmax(0, .88fr) minmax(300px, 1.12fr); gap: clamp(2.5rem, 9vw, 8rem); align-items: center; padding: clamp(3.8rem, 8vw, 7rem) 0; border-top: 1px solid var(--rule); }.service:first-of-type { border-top: 0; }.service.reverse .service-copy { order: 2; }.service.reverse .specimen { order: 1; }.service-number { margin-bottom: .55rem; color: var(--m-text); font: 500 var(--step-0)/1 var(--mono); }.service h3 { margin-bottom: .7rem; font: 900 var(--step-3)/1.3 var(--display); letter-spacing: -.04em; }.service-copy > p:not(.service-number) { max-width: 34em; color: var(--ink-2); }.service ul { margin: 1.15rem 0 0; padding: 0; list-style: none; font-weight: 700; }.service li { border-top: 1px solid var(--rule); padding: .55rem .1rem; }.service li:last-child { border-bottom: 1px solid var(--rule); }
.specimen { position: relative; min-width: 0; min-height: 280px; padding: 1.8rem; overflow: hidden; border: 1px solid var(--ink); background: linear-gradient(135deg, transparent 49.8%, #e4e5e3 50%, transparent 50.2%), var(--skin); }.spec-label { position: absolute; right: 1rem; bottom: .65rem; left: 1rem; margin: 0; border-top: 1px solid var(--rule); padding-top: .45rem; color: var(--ink-2); font: 400 .61rem/1.4 var(--mono); letter-spacing: .03em; }
.paper-specimen { height: 345px; }.sheet { position: absolute; background: #fff; border: 1px solid var(--ink); }.flyer { top: 32px; left: 13%; z-index: 2; width: 145px; height: 215px; padding: 18px 14px; transform: rotate(-7deg); }.flyer em { display: block; color: var(--m-text); font: 500 .55rem var(--mono); font-style: normal; }.flyer strong { display: block; margin-top: 12px; font: 900 1.25rem/1.25 var(--display); }.flyer i { display: block; height: 61px; margin: 11px 0 8px; background: linear-gradient(135deg, var(--y), var(--c)); }.flyer b { display: block; height: 3px; margin-top: 5px; background: #c5c7c8; }.flyer b:nth-of-type(2) { width: 82%; }.flyer b:nth-of-type(3) { width: 67%; }
.mini-crop { position: absolute; width: 12px; height: 12px; border-color: var(--ink); border-style: solid; }.mini-crop.one { top: -5px; left: -5px; border-width: 1px 0 0 1px; }.mini-crop.two { right: -5px; bottom: -5px; border-width: 0 1px 1px 0; }.book { position: absolute; right: 9%; bottom: 50px; display: flex; width: 205px; height: 145px; border: 1px solid var(--ink); background: #fff; transform: rotate(6deg); }.book > div { position: relative; width: 50%; padding: 15px; }.book > div + div { border-left: 1px solid var(--ink); }.book em { color: var(--c-text); font: 500 .62rem var(--mono); font-style: normal; }.book i { display: block; height: 43px; margin: 8px 0; background: var(--y); }.book > div + div i { background: var(--c); }.book b { display: block; height: 3px; margin-top: 5px; background: #c5c7c8; }.book b:last-child { width: 62%; }
.image-specimen { height: 345px; padding: 0; }.landscape-wrap { position: relative; height: 225px; overflow: hidden; }.landscape-wrap::after { position: absolute; inset: 0; background: #5f96c7; content: ""; opacity: 0; pointer-events: none; transition: opacity .25s ease; }.landscape { display: block; width: 100%; max-width: 100%; height: 100%; transition: filter .25s ease; }.landscape-wrap.is-before::after { opacity: .12; }.landscape-wrap.is-before .landscape { filter: brightness(.78) saturate(.55) contrast(.92); }.image-toggle { position: absolute; z-index: 2; top: 15px; right: 15px; border: 1px solid var(--ink); background: var(--paper); padding: .38rem .6rem; color: var(--ink); font-size: .78rem; font-weight: 700; cursor: pointer; }.icon-samples { position: absolute; bottom: 34px; left: 20px; display: flex; gap: 10px; }.icon-samples svg { width: 35px; fill: #fff; stroke: var(--ink); stroke-width: 2; }.image-specimen .spec-label { background: var(--skin); }
.web-specimen svg, .pc-specimen svg { display: block; width: 100%; max-width: 100%; height: 245px; }.web-specimen text, .pc-specimen text { fill: var(--ink); font: 500 13px var(--mono); }.pc-specimen svg { height: 250px; }
.flow .section-intro { margin-bottom: 2rem; }.flow-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin: 0; padding: 0; list-style: none; }.flow-list li { position: relative; min-height: 145px; border-top: 3px solid var(--ink); padding: 1rem .5rem .5rem 0; }.flow-list li:not(:last-child)::after { position: absolute; top: -1rem; right: -.45rem; background: var(--paper); padding-left: .35rem; color: var(--m-text); content: "→"; }.flow-list span { display: block; margin-bottom: .6rem; color: var(--m-text); font: 500 .7rem var(--mono); }.flow-list strong { font-size: var(--step-2); }.flow-list p { margin: .35rem 0 0; color: var(--ink-2); font-size: var(--step-0); line-height: 1.65; }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; align-items: end; border-top: 1px solid var(--ink); }.contact h2 { margin: 0; font: 900 var(--step-3)/1.3 var(--display); letter-spacing: -.04em; }.contact-actions { position: relative; min-width: min(100%, 360px); }.contact-mail { display: block; overflow-wrap: anywhere; font: 700 clamp(1.12rem, 2.5vw, 1.65rem)/1.35 var(--body); text-decoration-thickness: 1px; text-underline-offset: 7px; }.copy-button { margin-top: 1.15rem; border: 1px solid var(--ink); background: transparent; padding: .45rem .85rem; color: var(--ink); font-weight: 700; cursor: pointer; }.copy-status { min-height: 1.8em; margin: .3rem 0 0; color: var(--ink-2); font-size: var(--step-0); }
footer { position: relative; display: flex; align-items: center; gap: 1.5rem; padding: 0 0 2.8rem; border-top: 1px solid var(--rule); color: var(--ink-2); font-size: var(--step-0); }.footer-brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); }.footer-brand svg { width: 72px; }.footer-brand span { font-weight: 700; }.bottom-slug { flex: 1; text-align: right; }.footer-bar { position: absolute; right: 0; bottom: 0; left: 0; height: 5px; }.footer-bar b { display: none; }
@keyframes registration-settle { from { text-shadow: 4px 0 var(--c), -4px 0 var(--m); } to { text-shadow: 0 0 transparent; } }
@media (min-width: 701px) and (max-width: 960px) { .hero-copy { max-width: 56%; }.hero-mochi { width: 200px; } }
@media (min-width: 701px) { .section { padding: clamp(3.15rem, 6.3vw, 5.6rem) 0; }.section-intro { margin-bottom: clamp(1.75rem, 4.2vw, 3.5rem); }.service { padding: clamp(2.66rem, 5.6vw, 4.9rem) 0; } }
@media (max-width: 700px) { .top-slug, .bottom-slug { width: min(100% - 32px, 1080px); font-size: .58rem; }.site-header, .hero, .section, footer { width: min(100% - 32px, 1080px); }.site-header { padding-bottom: 20px; }.proof-sheet { min-height: 500px; padding: 3.6rem 1.6rem 5rem; }.hero-copy { max-width: none; }.hero-mochi { position: relative; top: auto; right: auto; display: block; width: 160px; margin: .5rem 1.25rem .5rem auto; transform: none; }.service, .service.reverse { grid-template-columns: 1fr; gap: 1.8rem; }.service.reverse .service-copy, .service.reverse .specimen { order: initial; }.specimen { min-height: 265px; }.flow-list { grid-template-columns: repeat(2, 1fr); }.flow-list li:nth-child(2)::after { display: none; }.contact { grid-template-columns: 1fr; gap: 2rem; }.contact-actions { min-width: 0; }.bottom-slug { display: none; } }
@media (max-width: 420px) { .brand { width: 98px; }.header-contact { font-size: .83rem; }.proof-sheet { padding-right: 1.25rem; padding-left: 1.25rem; }.hero-actions { flex-direction: column; align-items: flex-start; gap: 1rem; }.paper-specimen { height: 310px; }.flyer { left: 5%; transform: scale(.82) rotate(-7deg); transform-origin: top left; }.book { right: 1%; transform: scale(.75) rotate(6deg); transform-origin: bottom right; }.web-specimen, .pc-specimen { padding: 1rem; }.web-specimen svg, .pc-specimen svg { height: 220px; }.flow-list { grid-template-columns: 1fr; }.flow-list li { min-height: auto; }.flow-list li:not(:last-child)::after { display: none; } footer { flex-wrap: wrap; gap: .5rem 1rem; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } h1 { animation: none; text-shadow: none; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }