/* Web service opening: shared brand palette, portfolio in a wide laptop. */
.wf-page .wf-web-hero{position:relative;isolation:isolate;overflow:clip;background:#241530;color:#fff}
.wf-web-hero::before{content:'';position:absolute;z-index:-2;inset:0;background:radial-gradient(ellipse at 0 100%,#9568b1 0,transparent 63%),linear-gradient(118deg,#5b3973 0%,#342144 48%,#17121e 100%)}
.wf-web-hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.11;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath filter='url(%23g)' opacity='.65' d='M0 0h180v180H0z'/%3E%3C/svg%3E");background-size:180px 180px}
.wf-web-hero__inner{--web-hero-height:clamp(720px,max(calc(100svh - 105px),50vw),1080px);position:relative;max-width:2400px;margin-inline:auto;min-height:var(--web-hero-height);display:flex;align-items:center;padding:64px 0 72px}
.wf-web-hero__copy{position:relative;z-index:2;width:46%;padding-inline:3vw;text-align:center}
.wf-page .wf-web-hero__eyebrow{margin:0 0 25px;color:#e6d5f0;font:500 12px/1.5 var(--en);letter-spacing:.18em}
.wf-web-hero__eyebrow span{font-family:var(--ja);letter-spacing:.04em;margin-left:16px}
.wf-page .wf-web-hero__headline{font-family:"Shippori Mincho",serif;font-size:clamp(26px,2.65vw,54px);font-weight:500;line-height:1.65;letter-spacing:-.065em;margin:28px 0 0;color:#fff;overflow-wrap:normal}
.wf-web-hero__headline>span{display:block;white-space:nowrap}
.wf-page .wf-web-hero__subtitle{margin:12px 0 0;font:500 clamp(11px,.86vw,14px)/1.5 var(--ja);letter-spacing:.12em;color:#eee5f3}
.wf-web-hero__accent{color:#dfc6ef;font-style:normal}
.wf-web-hero__benefits{display:table;margin:36px auto 23px;padding:0;text-align:left;list-style:none}
.wf-web-hero__benefits li{display:block;font-size:clamp(14px,1.12vw,21px);font-weight:500;line-height:1.7}
.wf-web-hero__benefits li+li{margin-top:8px}
.wf-web-hero__team{position:relative;isolation:isolate;display:inline-block;white-space:nowrap}
.wf-web-hero__team::after{content:'';position:absolute;z-index:-1;inset:auto 0 .3em;height:.4em;background:#dfc6ef;opacity:.55;transform:scaleX(1);transform-origin:left center}
.wf-web-hero[data-team-reveal="pending"] .wf-web-hero__team::after{transform:scaleX(0)}
.wf-web-hero[data-team-reveal="revealing"] .wf-web-hero__team::after{animation:web-team-underline 1.8s cubic-bezier(.4,0,.2,1) .15s both}
@keyframes web-team-underline{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.wf-web-hero[data-team-reveal] .wf-web-hero__team::after{animation:none}}

.wf-page .wf-web-hero__description{font-size:clamp(13px,1.05vw,19px);line-height:1.9;color:#eee5f3;margin:0}
.wf-web-hero__actions{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:40px}
.wf-page .wf-web-hero__primary{width:min(100%,440px);min-height:76px;display:flex;align-items:center;justify-content:center;gap:20px;padding:10px 24px 10px 30px;border-radius:999px;background:#fff;color:#492e60;text-decoration:none;font-size:clamp(13px,1.05vw,18px);font-weight:600;box-shadow:0 8px 25px #130c2320;transition:background .2s,transform .2s}
.wf-page .wf-web-hero__primary img{width:42px;height:59px;object-fit:cover;transform:rotate(-9deg);box-shadow:3px 5px 9px #26173535;flex:none;margin-block:-14px}
.wf-web-hero__primary>svg{flex:none;width:23px;height:23px;margin-left:auto}
.wf-page .wf-web-hero__primary:hover{background:#eee4f4;color:#342144;transform:translateY(-2px)}
.wf-page .wf-web-hero__secondary{display:inline-flex;align-items:center;gap:15px;font-size:16px;font-weight:500;color:#fff;text-decoration:none;border-bottom:1px solid #e9ddf080;padding-bottom:4px;min-height:40px}
.wf-page .wf-web-hero__secondary:hover{color:#ead3f8;border-color:#ead3f8}
.wf-web-hero__secondary span{display:grid;place-items:center;background:#fff;color:#604177;border-radius:50%;width:23px;height:23px;font:18px/1 var(--en)}
.wf-page .wf-web-hero a:focus-visible{outline-color:#e7cafa;outline-offset:7px}
.wf-web-hero__visual{position:absolute;left:49%;top:26px;transform:none;width:calc(var(--web-hero-height) * 1.44 - 113px);max-width:none;margin:0}
.wf-page .wf-web-hero__laptop{position:relative;display:block;color:inherit;text-decoration:none;filter:drop-shadow(0 26px 27px #10081b66)}
.wf-web-hero__screen{position:relative;padding:2.3% 1.7% 2.2%;background:linear-gradient(130deg,#1c1b20,#030305 65%,#262429);border:2px solid #77727e;box-shadow:inset 0 0 0 2px #151419,0 0 0 1px #342e3a;border-radius:28px 28px 6px 6px;overflow:hidden}
.wf-page .wf-web-hero__viewport>img{display:block;width:100%;height:auto;border-radius:9px 9px 0 0;aspect-ratio:1440/930;object-fit:cover}
.wf-web-hero__camera{position:absolute;top:1.25%;left:50%;width:5px;height:5px;border-radius:50%;background:#36313e;box-shadow:inset 0 0 2px #000}
.wf-web-hero__base{position:relative;width:108%;height:28px;margin-left:-4%;margin-top:-1px;border:1px solid #7a7480;border-radius:2px 2px 45% 45%/2px 2px 70% 70%;background:linear-gradient(#d3d0d7 0%,#928b9a 23%,#c7c3cc 44%,#57505f 84%,#24202a 100%);box-shadow:0 3px 3px #0006}
.wf-web-hero__base>span{position:absolute;top:-1px;left:40%;width:20%;height:8px;border-radius:0 0 12px 12px;background:linear-gradient(90deg,#716b79,#bdb8c5 12%,#c7c1cd 86%,#716b79);box-shadow:inset 0 -1px 2px #fff9}
.wf-web-hero__visual figcaption{display:none;align-items:center;gap:18px;margin-top:24px;color:#e4d8ec;font-size:12px;line-height:1.7}
.wf-web-hero__visual figcaption>span{font-family:var(--en);font-size:10px;letter-spacing:.12em}
.wf-page .wf-web-hero__visual figcaption a{color:#eee4f4;text-decoration:none}
.wf-page .wf-web-hero__visual figcaption a:hover{color:#fff;text-decoration:underline}
@media(min-width:1800px){.wf-web-hero__copy{padding-left:3vw}.wf-web-hero__actions{margin-top:48px}.wf-web-hero__primary{max-width:480px}}
@media(min-width:901px) and (max-height:800px){.wf-web-hero__inner{padding-block:54px}.wf-web-hero__benefits{margin-top:27px}.wf-web-hero__actions{margin-top:30px}}
@media(max-width:1100px) and (min-width:901px){.wf-web-hero__copy{width:47%;padding-left:2vw;padding-right:2vw}.wf-web-hero__primary{gap:12px;padding-inline:24px}.wf-web-hero__eyebrow{margin-bottom:20px}}
@media(max-width:900px){.wf-web-hero__inner{min-height:0;display:flex;flex-direction:column;gap:48px;padding:48px 24px 40px}.wf-web-hero__copy{width:100%;max-width:620px;padding:0}.wf-page .wf-web-hero__headline{font-size:clamp(22px,5.4vw,36px);letter-spacing:-.065em;line-height:1.65}.wf-page .wf-web-hero__eyebrow{font-size:10px;margin-bottom:20px}.wf-web-hero__benefits{margin-top:27px;margin-bottom:20px}.wf-web-hero__benefits li{font-size:clamp(12px,2.6vw,17px)}.wf-page .wf-web-hero__description{font-size:clamp(12px,2.6vw,16px)}.wf-web-hero__actions{margin-top:30px;gap:15px}.wf-page .wf-web-hero__primary{width:min(100%,420px);min-height:68px;font-size:14px;gap:16px;padding-inline:24px}.wf-page .wf-web-hero__secondary{font-size:14px}.wf-web-hero__visual{position:relative;left:auto;top:auto;transform:none;width:94%;max-width:760px}.wf-web-hero__screen{border-radius:17px 17px 3px 3px}.wf-web-hero__base{height:17px}.wf-web-hero__base>span{height:5px}.wf-web-hero__camera{width:3px;height:3px}.wf-web-hero__visual figcaption{display:flex;justify-content:center;flex-wrap:wrap;gap:3px 12px;margin-top:20px;font-size:10px}.wf-web-hero__visual figcaption>span{font-size:9px}}
@media(max-width:380px){.wf-web-hero__inner{padding-inline:18px}.wf-page .wf-web-hero__headline{font-size:21px}.wf-page .wf-web-hero__primary{font-size:12px;gap:12px;padding-inline:20px}.wf-web-hero__primary img{width:36px;height:51px}}
@media(prefers-reduced-motion:reduce){.wf-page .wf-web-hero__primary{transition:none}.wf-page .wf-web-hero__primary:hover{transform:none}}

/* PHOTO-sized printed glitch, using the same shared signal treatment. */
.wf-page .wf-web-hero__title h1{display:flex;justify-content:center;gap:.015em;margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:min(8.5vw,144px);font-weight:700!important;line-height:.9;letter-spacing:0;color:#fff;overflow-wrap:normal}
.wf-web-hero__title .type-face{display:block;padding-right:0;filter:url('#web-type-glitch')!important}
.wf-web-hero__letter:nth-child(2) .type-face,.wf-web-hero__letter:nth-child(2) .type-face::before{animation-delay:-.17s}
.wf-web-hero__letter:nth-child(2) .type-face::after{animation-delay:-.57s}
.wf-web-hero__letter:nth-child(3) .type-face::before{animation-delay:-.39s}
.wf-web-hero__letter:nth-child(3) .type-face::after{animation-delay:-.82s}
.wf-web-hero__viewport{position:relative;overflow:hidden;aspect-ratio:1440/970;border-radius:9px 9px 0 0;background:#fff}
.wf-web-hero__preview{position:absolute;left:0;top:0;width:1440px;height:970px;border:0;max-width:none;transform:scale(var(--web-preview-scale,0));transform-origin:0 0;pointer-events:none;opacity:0;transition:opacity .25s}
.wf-web-hero[data-preview-ready="true"] .wf-web-hero__preview{opacity:1}
.wf-web-hero__motion{position:absolute;bottom:20px;left:24px;z-index:3;display:grid;place-items:center;width:36px;height:36px;padding:9px;border:1px solid #ffffff70;border-radius:50%;background:#2c1e4670;color:#fff;cursor:pointer}
.wf-web-hero__motion[hidden]{display:none}.wf-web-hero__motion svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.wf-web-hero__motion .play-icon{display:none}.wf-web-hero__motion[data-paused="true"] .play-icon{display:block}.wf-web-hero__motion[data-paused="true"] .pause-icon{display:none}
.wf-web-hero__motion:focus-visible{outline:2px solid #fff;outline-offset:4px}
.wf-web-hero:not([data-web-motion="running"]) .type-face{animation-play-state:paused!important;filter:none!important}
.wf-web-hero:not([data-web-motion="running"]) .type-face::before,.wf-web-hero:not([data-web-motion="running"]) .type-face::after{display:none}
@media(max-width:900px){.wf-page .wf-web-hero__title h1{font-size:min(17vw,120px)}.wf-page .wf-web-hero__headline{margin-top:25px}.wf-web-hero__motion{left:auto;right:14px;bottom:12px;width:30px;height:30px;padding:6px}}
@media(prefers-reduced-motion:reduce){.wf-web-hero .type-face{animation:none!important;filter:none!important}.wf-web-hero .type-face::before,.wf-web-hero .type-face::after{display:none}.wf-web-hero__preview{transition:none}}

/* Keep each original glyph's width while the TOP-style signal resolves into Japanese. */
.wf-web-hero__copy-accessible { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.wf-web-hero__glyph { position: relative; display: inline-block; white-space: pre; vertical-align: baseline; }
.wf-web-hero__glyph-metric { visibility: hidden; }
.wf-web-hero__glyph::after { content: attr(data-glyph); position: absolute; inset: 0; white-space: pre; pointer-events: none; }
.wf-web-hero [data-reveal-state="revealing"] .wf-web-hero__glyph::before {
  content: attr(data-glyph); position: absolute; inset: 0; white-space: pre; pointer-events: none;
  color: #9162a8; text-shadow: -1px 0 #b58acb; opacity: 0;
  animation: web-copy-signal 460ms steps(1, end) infinite;
}
.wf-web-hero [data-reveal-state="revealing"] .wf-web-hero__glyph::after { animation: web-copy-twitch 460ms steps(1, end) infinite; }
@keyframes web-copy-signal {
  0%, 19%, 31%, 60%, 76%, 100% { opacity: 0; transform: none; }
  20%, 25% { opacity: .85; transform: translateX(3px); clip-path: inset(22% 0 52%); }
  26%, 30% { opacity: .65; transform: translateX(-2px); clip-path: inset(64% 0 16%); }
  61%, 67% { opacity: .8; transform: translateX(-3px); clip-path: inset(40% 0 35%); }
  68%, 75% { opacity: .5; transform: translateX(2px); clip-path: inset(12% 0 70%); }
}
@keyframes web-copy-twitch {
  0%, 23%, 29%, 63%, 70%, 100% { transform: none; text-shadow: none; }
  24%, 28% { transform: translateX(-1px); text-shadow: 1px 0 #9162a8; }
  64%, 69% { transform: translateX(1px); }
}