@font-face {
font-family:Zen;
src:url('/assets/fonts/zen-gothic.woff2') format('woff2');
font-style:normal;
font-weight:400;
font-display:swap
}


@font-face {
font-family:Zen;
src:url('/assets/fonts/zen-gothic-bold.woff2') format('woff2');
font-style:normal;
font-weight:700;
font-display:swap
}

:root {
--ink:#1f3e55;
--muted:#526b7d;
--blue:#eaf4fc;
--paper:#fff;
--line:#ccdbe6;
--hover:#dcecf9;
--radius:14px;
--ease:cubic-bezier(.16,1,.3,1);
--body:zen,'Hiragino Kaku Gothic ProN',sans-serif;

scroll-behavior:smooth;
scroll-padding-top:24px
}

* {
box-sizing:border-box
}

body {
margin:0;
background:var(--paper);
color:var(--ink);
font:400 16px/1.9 var(--body);
-webkit-font-smoothing:antialiased
}

h1,h2,h3,p,figure {
margin:0
}

h1,h2,h3 {
font-weight:700;
line-height:1.4;
letter-spacing:-.025em;
text-wrap:balance
}

a {
color:inherit;
text-decoration-thickness:1px;
text-underline-offset:6px
}

button,input {
font:inherit
}

button {
color:inherit
}

a,button,label {
touch-action:manipulation
}

::selection {
background:var(--ink);
color:#fff
}

:focus-visible {
outline:3px solid var(--ink);
outline-offset:5px
}

::-webkit-scrollbar {
width:10px
}

::-webkit-scrollbar-thumb {
background:#b7cad9;
border:2px solid white;
border-radius:8px
}

.wrap {
width:min(1280px,calc(100% - 112px));
margin-inline:auto
}

.sr-only {
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap;
border:0
}

.skip {
position:fixed;
top:8px;
left:8px;
background:var(--ink);
color:white;
padding:12px 20px;
z-index:9;
transform:translateY(-160%)
}

.skip:focus {
transform:none
}

.header {
padding-block:27px
}

.nav a[aria-current="page"] {
text-decoration:underline;
text-decoration-thickness:2px
}

.header-inner {
display:flex;
align-items:center;
justify-content:space-between;
gap:32px
}

.brand {
display:flex;
gap:14px;
align-items:center;
text-decoration:none;
font-size:17px;
font-weight:700;
line-height:1.45;
white-space:nowrap
}

.brand svg {
width:29px;
height:36px;
flex:none
}

.brand small {
display:block;
font-size:12px;
font-weight:400;
letter-spacing:.035em;
margin-bottom:2px
}

.nav {
display:flex;
align-items:center;
gap:30px;
font-size:14px;
font-weight:700
}

.nav a {
display:flex;
align-items:center;
min-height:44px;
text-decoration:none
}

.nav a:hover {
color:var(--muted)
}

.nav .nav-contact {
background:var(--blue);
padding:0 19px;
border-radius:6px;
gap:20px
}

.arrow {
width:20px;
height:20px;
flex:none;
transition:transform .3s var(--ease)
}

a:hover .arrow {
transform:translateX(4px)
}

.hero {
padding-block:30px 76px
}

.hero-grid {
display:grid;
grid-template-columns:1.08fr 1fr;
align-items:center;
gap:58px
}

.hero-copy {
padding-block:16px 28px
}

.hero h1 {
font-size:clamp(44px,4.45vw,64px);
line-height:1.5;
letter-spacing:-.035em;
margin-bottom:30px
}

.hero h1 span {
display:block;
white-space:nowrap
}

.hero-description {
font-size:16px;
line-height:2.05;
max-width:34em;
margin-bottom:34px
}

.primary {
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:42px;
min-height:56px;
padding:13px 23px;
border-radius:6px;
background:var(--ink);
color:white;
text-decoration:none;
font-size:15px;
font-weight:700;
transition:background .25s var(--ease)
}

.primary:hover {
background:#315875
}

.hero-secondary {
display:block;
width:fit-content;
min-height:44px;
margin-top:16px;
padding-block:8px;
font-size:14px;
color:var(--muted)
}

.showcase {
margin:0;
padding:0;
border:0;
min-width:0
}

.showcase-frame {
position:relative;
border-radius:var(--radius);
background:var(--blue);
padding:30px 28px 24px;
overflow:hidden
}

.panel {
display:none
}

.panel-top {
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:22px
}

.panel h2 {
font-size:23px
}

.status {
display:inline-flex;
align-items:center;
gap:7px;
font-size:12px;
font-weight:700;
line-height:1.5;
white-space:nowrap;
color:var(--muted)
}

.status.live {
color:var(--ink)
}

.status svg {
width:7px;
height:7px;
flex:none
}

.view {
height:388px;
position:relative;
display:flex;
align-items:flex-start;
justify-content:center;
overflow:hidden;
border-radius:10px;
background:#dceaf5
}

.view img {
display:block;
width:286px;
height:auto;
flex:none;
box-shadow:0 12px 28px rgb(31 62 85 / 13%)
}

.view.wide {
align-items:center;
background:var(--paper)
}

.view.wide img {
width:100%;
height:auto;
box-shadow:none
}

.panel-bottom {
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
margin-top:18px
}

.panel-bottom p {
font-size:14px;
line-height:1.7
}

.panel-bottom a {
font-size:12px;
min-height:44px;
display:flex;
align-items:center;
gap:5px;
white-space:nowrap
}

.panel-bottom .arrow {
width:14px;
height:14px
}

.screen-original {
display:inline-flex;
align-items:center;
gap:8px;
min-height:44px;
font-size:12px
}

.screen-original .arrow {
width:15px;
height:15px
}

.capture {
font-size:12px;
line-height:1.7;
color:var(--muted);
margin-top:9px
}

.selectors {
display:grid;
grid-template-columns:1fr 1fr 1fr;
gap:4px;
margin-top:12px
}

.selector {
position:relative;
display:block;
cursor:pointer;
min-height:56px;
padding:11px 5px;
text-align:center;
line-height:1.6;
border-radius:6px;
font-size:13px;
font-weight:700;
color:var(--muted);
transition:background .25s var(--ease),color .25s var(--ease)
}

.selector small {
display:block;
font-weight:400;
font-size:12px
}

.selector:hover {
background:var(--blue)
}

.radio {
position:absolute;
opacity:0;
width:1px;
height:1px
}

.showcase:has(#saidai:checked) .panel-saidai,.showcase:has(#shift:checked) .panel-shift,.showcase:has(#stele:checked) .panel-stele {
display:block;
animation:sheet .6s var(--ease)
}

.showcase:has(#saidai:checked) label[for="saidai"],.showcase:has(#shift:checked) label[for="shift"],.showcase:has(#stele:checked) label[for="stele"] {
color:var(--ink);
background:var(--blue)
}

.showcase:has(#saidai:focus-visible) label[for="saidai"],.showcase:has(#shift:focus-visible) label[for="shift"],.showcase:has(#stele:focus-visible) label[for="stele"] {
outline:3px solid var(--ink);
outline-offset:3px
}


@keyframes sheet {
from {
transform:translateY(12px);
clip-path:inset(0 0 8% 0)
}

to {
transform:translateY(0);
clip-path:inset(0)
}

}

.services {
padding-block:64px 88px
}

.section-heading {
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
margin-bottom:40px
}

.section-heading h2 {
font-size:34px
}

.text-link {
display:inline-flex;
align-items:center;
gap:18px;
min-height:44px;
font-size:14px;
text-decoration:none
}

.text-link:hover {
text-decoration:underline
}

.service-row {
display:grid;
grid-template-columns:1fr 1.32fr .58fr;
gap:48px;
align-items:center;
padding-block:32px
}

.service-name {
display:flex;
align-items:center;
gap:22px
}

.service-name h3 {
font-size:23px
}

.service-row p {
font-size:15px;
line-height:1.85
}

.service-row .text-link {
justify-self:end;
white-space:nowrap
}

.preparing {
display:flex;
align-items:baseline;
gap:24px;
margin-top:30px;
font-size:13px;
color:var(--muted)
}

.preparing .status {
flex:none
}

.about {
padding:76px 0
}

.about-grid {
display:grid;
grid-template-columns:1fr 1fr;
gap:92px
}

.about h2 {
font-size:34px;
margin-bottom:22px
}

.about-copy>p {
font-size:16px;
line-height:1.9;
margin-bottom:26px;
max-width:30em
}

.facts {
margin:0;
font-size:14px;
font-variant-numeric:tabular-nums
}

.facts>div {
display:grid;
grid-template-columns:88px 1fr;
gap:24px;
padding:16px 0
}

.facts dt {
color:var(--muted)
}

.facts dd {
margin:0
}

.contact {
padding-block:72px
}

.contact-inner {
display:flex;
justify-content:space-between;
align-items:center;
gap:40px
}

.contact h2 {
font-size:34px;
margin-bottom:12px
}

.contact p {
color:var(--muted);
font-size:15px
}

.footer {
padding-block:28px 34px
}

.footer-inner {
display:flex;
justify-content:space-between;
align-items:center;
gap:24px
}

.footer p {
font-size:13px
}

.footer a {
min-height:44px;
display:inline-flex;
align-items:center;
font-size:12px;
color:var(--muted)
}


@media(width >=1550px) {
.hero h1 {
font-size:64px
}

}


@media(width <=1100px) {
.wrap {
width:calc(100% - 64px)
}

.hero-grid {
gap:32px;
grid-template-columns:1fr 1fr
}

.hero h1 {
font-size:clamp(35px,4.4vw,48px)
}

.hero-description {
font-size:15px
}

.nav {
gap:18px
}

.view {
height:330px
}

.view img {
width:250px
}

.showcase-frame {
padding:22px 20px
}

.panel-bottom {
gap:10px
}

.panel-bottom p {
font-size:13px
}

.panel h2 {
font-size:20px
}

.service-row {
gap:28px;
grid-template-columns:1.1fr 1.3fr .5fr
}

.service-name {
display:block
}

.service-name .status {
margin-top:6px
}

.about-grid {
gap:48px
}

.brand {
font-size:15px
}

}


@media(width <=760px) {
.wrap {
width:calc(100% - 40px)
}

.header {
padding-block:18px
}

.header-inner {
flex-wrap:wrap;
gap:12px
}

.brand {
font-size:16px
}

.nav {
width:100%;
justify-content:space-between;
gap:12px;
font-size:12px
}

.nav .nav-contact {
padding-inline:13px;
gap:9px
}

.hero {
padding-block:30px 44px
}

.hero-grid {
grid-template-columns:1fr;
gap:34px
}

.hero-copy {
padding:0
}

.hero h1 {
font-size:clamp(32px,8.7vw,54px);
line-height:1.5;
margin-bottom:20px
}

.hero-description {
font-size:15px;
margin-bottom:22px
}

.hero-secondary {
display:inline-flex;
margin-left:16px;
margin-top:0;
vertical-align:middle;
font-size:13px
}

.primary {
gap:22px;
font-size:14px;
padding-inline:19px;
min-height:52px
}

.showcase-frame {
padding:24px 20px 20px
}

.panel h2 {
font-size:23px
}

.panel-top {
margin-bottom:20px
}

.view {
height:340px
}

.view img {
width:256px
}

.panel-bottom {
gap:16px
}

.panel-bottom p {
font-size:13px
}

.panel-bottom a {
font-size:12px
}

.capture {
font-size:12px
}

.showcase {
display:flex;
flex-direction:column
}

.selectors {
order:-1;
margin:0 0 12px;
gap:0
}

.selector {
font-size:12px;
min-height:60px;
padding-inline:2px
}

.selector small {
font-size:12px
}

.services {
padding-block:44px 48px
}

.section-heading {
display:block;
margin-bottom:28px
}



.section-heading h2,.about h2,.contact h2 {
font-size:27px
}

.section-heading .text-link {
margin-top:10px;
font-size:12px;
gap:10px
}

.service-row {
grid-template-columns:1fr;
gap:12px;
padding-block:25px
}

.service-name {
display:flex;
gap:18px
}

.service-name h3 {
font-size:22px
}

.service-name .status {
margin:0
}

.service-row p {
font-size:14px
}

.service-row .text-link {
justify-self:start;
font-size:13px
}

.preparing {
gap:14px;
line-height:1.8;
align-items:flex-start
}

.about {
padding:44px 0
}

.about-grid {
grid-template-columns:1fr;
gap:30px
}

.about-copy>p {
font-size:15px;
margin-bottom:18px
}

.facts>div {
grid-template-columns:76px 1fr;
gap:16px;
padding:14px 0
}

.facts {
font-size:13px
}

.contact {
padding-block:44px
}

.contact-inner {
display:block
}

.contact p {
font-size:14px
}

.contact .primary {
margin-top:24px
}

.footer {
padding-block:22px
}

.footer-inner {
display:block
}

.footer p {
font-size:12px
}

.footer a {
margin-top:6px
}

}


@media(width <=360px) {
.wrap {
width:calc(100% - 32px)
}

.hero h1 {
font-size:29px
}

.hero-secondary {
display:block;
margin-left:0;
margin-top:8px
}

.showcase-frame {
padding-inline:16px
}

.panel-bottom {
display:block
}

.panel-bottom a {
width:fit-content
}

.panel-top {
gap:8px
}

.panel h2 {
font-size:21px
}

.section-heading {
align-items:flex-start
}

.section-heading .text-link {
white-space:nowrap;
font-size:12px;
gap:6px
}

.view img {
width:238px
}

}


/* Detail pages share the white reading surface. Blue grounds actual media only. */
.inner-page {
padding-bottom:64px;
min-height:65vh
}

.breadcrumb {
padding-top:28px;
margin-bottom:44px;
font-size:13px;
color:var(--muted)
}

.breadcrumb ol {
display:flex;
flex-wrap:wrap;
gap:12px;
list-style:none;
margin:0;
padding:0
}

.breadcrumb li+li::before {
content:"/";
margin-right:12px
}

.breadcrumb a {
display:inline-flex;
align-items:center;
min-height:44px
}

.page-title {
margin-bottom:64px
}

.inner-page h1 {
font-size:clamp(36px,4vw,52px);
line-height:1.5
}

.lead {
max-width:64ch;
margin-top:20px;
color:var(--muted)
}

.company-layout,.contact-layout {
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:80px;
margin-bottom:84px
}

.company-intro>p {
margin-top:20px;
color:var(--muted)
}

.company-layout .facts {
font-size:16px
}

.company-layout .facts>div {
grid-template-columns:112px 1fr;
padding-block:16px
}

.company-story {
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:80px;
margin-block:64px
}

.company-story h2 {
font-size:28px
}

.company-story h3 {
font-size:23px;
margin-bottom:16px
}

.founder-role {
font-size:14px;
font-weight:400;
color:var(--muted);
margin-left:12px
}

.prose {
max-width:70ch
}

.prose p+p {
margin-top:20px
}

.technical-details {
margin-top:24px;
color:var(--muted);
font-size:14px
}

.technical-details summary {
cursor:pointer;
min-height:44px;
display:list-item;
width:fit-content
}

.technical-details[open] summary {
margin-bottom:12px
}

.technical-details p {
max-width:64ch
}

.nowrap {
white-space:nowrap
}

.timeline {
padding:0;
list-style:none;
margin:0
}

.timeline li {
display:flex;
gap:30px
}

.timeline time {
white-space:nowrap;
font-variant-numeric:tabular-nums
}

.product-section {
margin-block:0 104px;
scroll-margin-top:30px
}

.service-intro {
display:grid;
grid-template-columns:1fr 1.32fr;
gap:80px
}

.service-intro h2 {
font-size:36px;
margin-bottom:12px
}

.service-intro .status {
margin-bottom:16px
}

.product-audience {
font-size:14px;
color:var(--muted);
max-width:28ch
}

.service-intro p {
max-width:64ch
}

.feature-list {
padding-left:1.3em;
margin-block:24px
}

.feature-list li {
padding-block:4px
}

.service-intro .button {
margin-top:24px
}

.button {
display:inline-flex;
align-items:center;
justify-content:space-between;
gap:28px;
min-height:56px;
padding:13px 23px;
background:var(--ink);
color:white;
border-radius:6px;
font-size:15px;
font-weight:700;
text-decoration:none;
transition:background .25s var(--ease)
}

.button:hover {
background:#315875
}

.button::after {
content:"";
width:18px;
height:18px;
background:currentcolor;
mask:url('/assets/arrow.svg') center/contain no-repeat;
flex:none
}

.product-screen-pair {
display:grid;
grid-template-columns:1fr 1.32fr;
gap:80px;
align-items:center;
margin-top:48px
}

.screen-context h3 {
font-size:25px;
margin-bottom:16px
}

.screen-context p {
max-width:40ch
}

.note {
font-size:13px;
color:var(--muted);
margin-top:18px
}

.product-screen {
padding:32px;
background:var(--blue);
border-radius:14px;
margin:48px 0 0;
min-width:0
}

.product-screen-pair .product-screen {
margin:0
}

.product-screen img {
max-width:100%;
height:auto;
display:block;
margin-inline:auto
}

.product-screen-mobile img {
width:300px;
box-shadow:0 12px 28px rgb(31 62 85 / 13%)
}

.product-screen figcaption {
font-size:13px;
color:var(--muted);
margin-top:22px;
text-align:center
}

.screen-link {
min-height:44px;
text-decoration:underline
}

.screen-scroll {
overflow-x:auto;
scrollbar-color:var(--muted) var(--blue);
scrollbar-width:thin
}

.screen-scroll img {
max-width:none;
width:1060px
}

.screen-scroll-hint {
font-size:13px;
color:var(--muted);
margin-bottom:16px
}

.preparing-notice {
display:grid;
grid-template-columns:1fr 1.32fr;
gap:80px;
align-items:start;
margin-block:64px 32px
}

.preparing-notice h2 {
font-size:24px
}

.preparing-notice p {
font-size:15px;
color:var(--muted)
}

.contact-layout {
min-height:330px
}

.contact-panel {
display:grid;
gap:40px;
padding-top:8px
}

.contact-hint {
font-size:13px;
color:var(--muted);
margin-top:12px
}

.mail-address {
display:inline-flex;
align-items:center;
min-height:44px;
font-size:20px;
font-weight:700;
overflow-wrap:anywhere
}

.privacy-wrap {
max-width:920px
}

.privacy-wrap .prose {
max-width:70ch
}

.policy-date {
font-size:13px;
color:var(--muted);
margin-bottom:36px
}

.privacy-wrap h2 {
font-size:24px;
line-height:1.6;
margin:48px 0 18px
}

.privacy-wrap h2:first-child {
margin-top:0
}

.error-content {
padding-block:100px 120px
}

.error-code {
font-size:64px;
font-weight:700;
color:var(--muted);
margin-bottom:16px
}

.error-content .button {
margin-top:32px
}


@media(width <=1100px) {
.company-layout,.contact-layout,.company-story,.service-intro,.product-screen-pair,.preparing-notice {
gap:48px
}

.service-intro h2 {
font-size:30px
}

}


@media(width <=760px) {
.inner-page {
padding-bottom:32px
}

.breadcrumb {
padding-top:20px;
margin-bottom:28px;
font-size:12px
}

.page-title {
margin-bottom:44px
}

.inner-page h1 {
font-size:34px
}

.privacy-page h1 {
font-size:28px
}

.company-layout,.contact-layout,.company-story,.service-intro,.product-screen-pair,.preparing-notice {
grid-template-columns:1fr;
gap:28px
}

.company-layout,.contact-layout {
margin-bottom:52px
}

.company-story {
margin-block:48px;
gap:20px
}

.company-story h2 {
font-size:25px
}

.company-layout .facts {
font-size:14px
}

.company-layout .facts>div {
grid-template-columns:90px 1fr;
gap:16px;
padding-block:13px
}

.timeline li {
display:block
}

.timeline time {
display:block;
color:var(--muted);
font-size:14px;
margin-bottom:8px
}

.product-section {
margin-bottom:72px
}

.service-intro h2 {
font-size:29px
}

.service-intro {
gap:20px
}

.product-audience {
max-width:none
}

.product-screen-pair {
margin-top:32px
}

.product-screen {
padding:24px 20px;
margin-top:32px
}

.product-screen-mobile img {
width:270px
}

.screen-context h3 {
font-size:23px
}

.feature-list {
margin-block:20px
}

.technical-details {
margin-top:20px
}

.preparing-notice {
margin-block:48px 20px;
gap:14px
}

.contact-layout {
min-height:0
}

.contact-panel {
gap:32px
}

.mail-address {
font-size:18px
}

.privacy-wrap h2 {
font-size:21px;
margin-top:36px
}

.error-content {
padding-block:60px 100px
}

.error-content h1 {
font-size:30px
}

.button {
min-height:52px;
padding-inline:19px;
font-size:14px
}

.prose,.service-intro>div>p {
font-size:15px
}


}


/* Company purpose and factual information share the same reading surface. */
.company-opening {
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:80px;
margin-bottom:104px
}

.company-jumps {
display:flex;
flex-wrap:wrap;
gap:6px 28px;
margin-top:24px;
font-size:14px
}

.company-jumps a {
display:inline-flex;
align-items:center;
min-height:44px
}

.mvv-row {
display:grid;
grid-template-columns:.8fr 1.2fr;
gap:80px;
margin-block:0 100px;
scroll-margin-top:40px
}

.mvv-row h2 {
font-size:24px;
padding-top:12px
}

.mission-statement {
font-size:clamp(36px,3.85vw,56px);
line-height:1.55;
font-weight:700;
letter-spacing:-.035em
}

.mission-statement > span,.vision-statement > span {
display:block
}

.mission-statement .phrase {
display:inline-block;
white-space:nowrap
}

.mvv-explanation {
max-width:70ch;
margin-top:26px
}

.mvv-explanation p+p {
margin-top:12px
}

.vision-statement {
font-size:clamp(28px,2.7vw,38px);
line-height:1.65;
font-weight:700;
letter-spacing:-.025em
}

.values-list {
list-style:none;
padding:0;
margin:0
}

.values-list li+li {
margin-top:36px
}

.values-list h3 {
font-size:24px;
margin-bottom:10px
}

.values-list p {
max-width:70ch
}

.company-overview {
scroll-margin-top:32px;
margin-top:116px
}

.company-overview .facts {
font-size:15px
}

.company-overview .facts>div {
grid-template-columns:112px 1fr
}

.company-overview h3 {
margin-bottom:22px
}

.about-copy .home-mission {
font-size:24px;
font-weight:700;
line-height:1.7;
letter-spacing:-.025em;
text-wrap:balance
}

.home-company-summary .text-link {
margin-top:14px
}

.home-mission .phrase {
display:inline-block;
white-space:nowrap
}

@media(width <=1100px) {
.company-opening,.mvv-row {
gap:48px
}
}

@media(width <=760px) {
.company-opening,.mvv-row {
grid-template-columns:1fr;
gap:22px
}

.company-opening {
margin-bottom:64px
}

.company-jumps {
margin-top:16px
}

.mvv-row {
margin-bottom:64px
}

.mvv-row h2 {
font-size:21px;
padding:0
}

.mission-statement {
font-size:clamp(28px,8vw,44px)
}

.vision-statement {
font-size:clamp(25px,6.5vw,32px)
}

.mvv-explanation {
margin-top:20px;
font-size:15px
}

.values-list h3 {
font-size:22px
}

.values-list p {
font-size:15px
}

.values-list li+li {
margin-top:30px
}

.company-overview {
margin-top:76px
}

.company-overview .facts {
font-size:14px
}

.company-overview .facts>div {
grid-template-columns:90px 1fr;
gap:16px
}

.about-copy .home-mission {
font-size:22px
}
}

@media(prefers-reduced-motion:reduce) {
:root {
scroll-behavior:auto
}

*,*::before,*::after {
animation:none!important;
transition:none!important
}

}