/* Homepage character design and motion, 2026-10-05.
   Existing painted character brand, native typography and bounded animation. */
.about-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 56px; align-items: center; }
.company-motion { min-width: 0; margin: 0; }
.company-stage { position: relative; width: 100%; max-width: 580px; aspect-ratio: 5 / 4; min-height: 420px; margin: 0 auto 22px; }
.company-stage-label { font-family: var(--font-jp-round); font-size: 15px; font-weight: 700; text-align: center; }
.company-card { position: absolute; width: 87%; min-height: 110px; padding: 14px 54px 17px 22px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--paper); box-shadow: 3px 4px 0 rgba(29,27,26,.08); transform: rotate(var(--card-angle)); }
.company-card-base { --card-angle: -5deg; top: 15%; left: 3%; --card-accent: #36795f; }
.company-card-work { --card-angle: 4deg; top: 41%; left: 9%; --card-accent: #ae4330; }
.company-card-project { --card-angle: -3deg; top: 67%; left: 2%; --card-accent: #386b9a; padding-right: 85px; }
.company-fact-label { font-size: 11px; font-weight: 700; color: var(--card-accent); }
.company-card h3 { font-family: var(--font-jp-round); font-weight: 900; font-size: clamp(18px,1.8vw,23px); line-height: 1.45; margin: 6px 0 5px; }
.company-card p { font-size: 12px; line-height: 1.65; color: var(--ink-soft); }
.company-card-number { position: absolute; right: 16px; top: 13px; font-family: var(--font-serif); font-style: italic; color: var(--card-accent); font-size: 23px; }
.company-motion figcaption { font-size: 13px; line-height: 1.7; margin: 18px 0 10px; color: #655b51; text-align: center; }
.koko-sprite { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; }
.koko-sprite img { display: block; max-width: none; width: 300%; height: 100%; transform: translateX(-33.333333%); }
.company-guide { position: absolute; width: 85px; right: 0; bottom: -3%; z-index: 4; }
.motion-toggle, .motion-replay { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--ink); background: rgba(255,248,238,.9); border: 2px solid currentColor; border-radius: 50%; box-shadow: 3px 3px 0 currentColor; cursor: pointer; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.motion-toggle::before { content: 'Ⅱ'; font-family: system-ui,sans-serif; font-size: 15px; font-weight: 900; letter-spacing: -2px; transform: translateX(-1px); }
.motion-toggle[aria-pressed="true"]::before { content: '▶'; font-size: 14px; letter-spacing: 0; transform: translateX(1px); }
.motion-replay::before { content: '↻'; font-family: system-ui,sans-serif; font-size: 24px; font-weight: 800; line-height: 1; }
.motion-toggle:hover, .motion-replay:hover { background: var(--sunshine); transform: translate(-1px,-1px); box-shadow: 5px 5px 0 currentColor; }
.motion-toggle:focus-visible, .motion-replay:focus-visible { outline: 3px solid #3a86ff; outline-offset: 4px; }
.motion-toggle:disabled, .motion-replay:disabled { color: #655b51; cursor: default; opacity: .58; box-shadow: none; }
.company-motion > .motion-toggle { display: block; margin: 0 auto; }
.motion-ready .company-card { animation: company-paper 12s ease-in-out infinite; animation-play-state: paused; }
.motion-ready .company-card-work { animation-delay: -4s; }
.motion-ready .company-card-project { animation-delay: -8s; }
.motion-ready .company-guide { animation: company-guide 12s ease-in-out infinite; animation-play-state: paused; }
.company-motion.is-running .company-card, .company-motion.is-running .company-guide { animation-play-state: running; }
@keyframes company-paper { 0%,100% { transform: translate(0,0) rotate(var(--card-angle)); } 25% { transform: translate(8px,-10px) rotate(calc(var(--card-angle) + 2deg)); } 55% { transform: translate(-6px,5px) rotate(calc(var(--card-angle) - 1deg)); } 80% { transform: translate(3px,-4px) rotate(var(--card-angle)); } }
@keyframes company-guide { 0%,100% { transform: translate(0,0) rotate(0); } 28% { transform: translate(-10px,-6px) rotate(-4deg); } 66% { transform: translate(0,3px) rotate(3deg); } }
.services .container { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 40px 56px; align-items: start; }
.services .container > div:first-child { grid-column: 1 / -1; }
.services .service-row { display: block; min-width: 0; margin: 0; padding: 28px 0 32px; border-top: 2px solid var(--service-color); border-bottom: 0; }
.service-kind-web { grid-column: span 7; --service-color: #356c99; }
.service-kind-reservation { grid-column: span 5; --service-color: #866293; }
.service-kind-inventory { grid-column: span 5; --service-color: #36795f; }
.service-kind-automation { grid-column: span 7; --service-color: #ae4330; }
.service-heading { display: grid; grid-template-columns: minmax(0,1fr) 215px; gap: 18px; align-items: center; margin-bottom: 20px; min-height: 220px; }
.service-heading-copy { min-width: 0; }
.service-kind-reservation .service-heading { grid-template-columns: 155px minmax(0,1fr); }
.service-kind-reservation .service-object { grid-column: 1; grid-row: 1; }
.service-kind-reservation .service-heading-copy { grid-column: 2; grid-row: 1; }
.service-kind-inventory .service-heading { grid-template-columns: minmax(0,1fr) 175px; }
.service-kind-automation .service-heading { grid-template-columns: 220px minmax(0,1fr); }
.service-kind-automation .service-object { grid-column: 1; grid-row: 1; }
.service-kind-automation .service-heading-copy { grid-column: 2; grid-row: 1; }
.services .service-num { font-size: 14px; margin-bottom: 12px; }
.services .service-num b { font-size: 30px; color: var(--service-color); }
.service-purpose { font-family: var(--font-jp-round); font-weight: 700; font-size: 15px; margin-bottom: 12px; color: var(--service-color); }
.services .service-title { font-size: clamp(27px,2.8vw,36px); line-height: 1.22; margin: 8px 0 0; }
.services .service-desc { font-size: 15px; line-height: 1.9; max-width: none; }
.services .service-en { font-size: 15px; line-height: 1.4; color: var(--service-color); overflow-wrap: anywhere; }
.service-object, .strength-object, .process-scene { margin: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.service-object { width: 100%; transition: transform .25s ease; }
.service-object img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.strength-object img, .process-scene img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: contain; }
.service-row:hover .service-object, .service-row:focus-within .service-object { transform: translateY(-3px); }
.service-flow { font-size: 12px; font-weight: 700; line-height: 1.7; color: var(--service-color); margin: 0 0 18px; }
.strength-list { margin-top: 44px; border-top: 1px solid #fff8ee66; }
.strength-row { display: grid; grid-template-columns: 160px minmax(0,.85fr) minmax(0,1.15fr); align-items: center; gap: 28px; padding: 32px 0; border-bottom: 1px solid #fff8ee66; }
.strength-object { width: 100%; }
.strength-number { display: block; margin-bottom: 10px; font-family: var(--font-serif); font-style: italic; font-size: 28px; line-height: 1.1; padding-bottom: 2px; font-weight: 900; color: var(--sunshine); }
.strength-row h3 { font-family: var(--font-jp-round); font-weight: 900; font-size: clamp(21px,2.3vw,27px); line-height: 1.5; color: var(--paper); }
.strength-row p { font-size: 15px; line-height: 1.95; color: #fff8eecc; }

.process-wrap { max-width: 1100px; }
.process-line { left: 50%; transform: translateX(-50%) scaleY(var(--line-progress,1)); }
.process-step { grid-template-columns: minmax(0,1fr) 70px minmax(0,1fr); max-width: none; gap: 40px; margin-bottom: 56px; align-items: start; }
.process-step:nth-child(odd) .process-text-wrap { grid-column: 1; grid-row: 1; text-align: left; }
.process-step:nth-child(even) .process-text-wrap { grid-column: 3; grid-row: 1; text-align: left; }
.process-step .process-node { grid-column: 2; grid-row: 1; align-self: start; }
.process-step-desc { max-width: 42em; }
.process-scene { grid-column: 3; grid-row: 1; align-self: center; width: 100%; max-width: 280px; justify-self: center; }
.process-step:nth-child(even) .process-scene { grid-column: 1; }
.cta-play-stage { width: max-content; max-width: 100%; position: relative; padding: 100px 76px 0; margin: 0 auto 30px; }
.cta-play-stage .cta-title { font-size: clamp(32px,5.6vw,72px); line-height: 1.3; margin-bottom: 0; }
.cta-play-stage .play-word { display: inline-flex; white-space: nowrap; background: none; background-image: none; background-size: auto; }
.cta-play-stage .play-letter { display: inline-block; }
.cta-character { position: absolute; top: 0; left: 0; width: 88px; height: 88px; pointer-events: none; z-index: 2; transform: translate(12px,72px); }
.cta-play-controls { display: flex; justify-content: center; gap: 14px; margin-top: 20px; }
.reveal.visible .art-enter img { animation: illustration-arrive .72s cubic-bezier(.22,1,.36,1) .08s backwards; }
@keyframes illustration-arrive { from { opacity: .25; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media(max-width:1100px) {
 .about-grid { gap: 34px; }
 .company-stage { min-height: 420px; }
 .company-card { padding-left: 16px; }
 .company-card h3 { font-size: 19px; }
 .services .container { gap: 32px 36px; }
 .service-heading { grid-template-columns: minmax(0,1fr) 175px; }
 .service-kind-reservation .service-heading { grid-template-columns: 128px minmax(0,1fr); }
 .service-kind-inventory .service-heading { grid-template-columns: minmax(0,1fr) 140px; }
 .service-kind-automation .service-heading { grid-template-columns: 175px minmax(0,1fr); }
 .services .service-title { font-size: 29px; }
 .strength-row { grid-template-columns: 132px minmax(0,.9fr) minmax(0,1.1fr); gap: 24px; }
 .process-step { gap: 30px; }
}
@media(max-width:900px) {
 .about-grid { grid-template-columns: minmax(0,1fr); gap: 36px; }
 .company-motion { max-width: 600px; width: 100%; margin: 0 auto; }
 .company-stage { min-height: 420px; }
 .company-card h3 { font-size: 22px; }
 .services .container { gap: 28px 28px; }
 .service-kind-web,.service-kind-reservation,.service-kind-inventory,.service-kind-automation { grid-column: span 6; }
 .service-heading,.service-kind-reservation .service-heading,.service-kind-inventory .service-heading,.service-kind-automation .service-heading { grid-template-columns: minmax(0,1fr) 125px; gap: 12px; min-height: 205px; }
 .service-kind-reservation .service-object,.service-kind-automation .service-object { grid-column: 2; grid-row: 1; }
 .service-kind-reservation .service-heading-copy,.service-kind-automation .service-heading-copy { grid-column: 1; grid-row: 1; }
 .services .service-title { font-size: 27px; }
 .services .service-en { font-size: 13px; }
 .strength-row { grid-template-columns: 128px minmax(0,1fr); gap: 16px 28px; }
 .strength-object { grid-column: 1; grid-row: 1 / 3; }
 .strength-heading { grid-column: 2; }
 .strength-row p { grid-column: 2; }
 .process-step { gap: 24px; }
 .process-step-title { font-size: 25px; }
}
@media(max-width:760px) {
 .services .container { grid-template-columns: minmax(0,1fr); gap: 16px; }
 .service-kind-web,.service-kind-reservation,.service-kind-inventory,.service-kind-automation { grid-column: 1; }
 .service-heading,.service-kind-reservation .service-heading,.service-kind-inventory .service-heading,.service-kind-automation .service-heading { grid-template-columns: minmax(0,1fr) 180px; min-height: 180px; }
 .service-kind-reservation .service-heading,.service-kind-automation .service-heading { grid-template-columns: 180px minmax(0,1fr); }
 .service-kind-reservation .service-object,.service-kind-automation .service-object { grid-column: 1; }
 .service-kind-reservation .service-heading-copy,.service-kind-automation .service-heading-copy { grid-column: 2; }
 .services .service-title { font-size: 31px; }
 .process-line { left: 26px; transform: scaleY(var(--line-progress,1)); }
 .process-step { grid-template-columns: 52px minmax(0,1fr); gap: 16px; margin-bottom: 36px; }
 .process-step:nth-child(n) .process-text-wrap { grid-column: 2; grid-row: 1; text-align: left; }
 .process-step .process-node { grid-column: 1; width: 52px; height: 52px; font-size: 23px; }
 .process-step:nth-child(n) .process-scene { grid-column: 2; grid-row: 2; max-width: 230px; justify-self: start; }
 .cta-play-stage { padding: 78px 25px 0; }
 .cta-play-stage .cta-title { font-size: clamp(31px,6.8vw,46px); }
 .cta-character { width: 68px; height: 68px; }
}
@media(max-width:640px) {
 .company-stage { min-height: 420px; }
 .company-card { padding: 12px 36px 15px 14px; min-height: 106px; }
 .company-card h3 { font-size: 18px; }
 .company-card-project { padding-right: 58px; }
 .company-card p { font-size: 11px; }
 .company-guide { width: 66px; }
 .company-stage-label { font-size: 13px; }
 .service-heading,.service-kind-inventory .service-heading,.service-kind-web .service-heading { grid-template-columns: minmax(0,1fr) 137px; gap: 12px; }
 .service-kind-reservation .service-heading,.service-kind-automation .service-heading { grid-template-columns: 137px minmax(0,1fr); }
 .services .service-title { font-size: 27px; }
 .service-purpose { font-size: 13px; }
 .strength-row { grid-template-columns: 96px minmax(0,1fr); padding: 26px 0; gap: 14px 20px; }
 .strength-object { grid-row: 1; }
 .strength-row h3 { font-size: 21px; }
 .strength-number { font-size: 24px; margin-bottom: 6px; }
 .strength-row p { grid-column: 1 / -1; font-size: 14px; }
}
@media(max-width:360px) {
 .service-heading,.service-kind-inventory .service-heading,.service-kind-web .service-heading { grid-template-columns: minmax(0,1fr) 108px; gap: 8px; }
 .service-kind-reservation .service-heading,.service-kind-automation .service-heading { grid-template-columns: 108px minmax(0,1fr); }
 .services .service-title { font-size: 24px; }
 .company-card h3 { font-size: 16px; }
 .cta-play-stage { padding-left: 14px; padding-right: 14px; }
 .cta-play-stage .cta-title { font-size: 29px; }
 .strength-row { grid-template-columns: 78px minmax(0,1fr); gap: 12px 16px; }
}
@media(prefers-reduced-motion:reduce) {
 .motion-ready .company-card,.motion-ready .company-guide,.motion-ready .cta-character .koko-sprite img,.reveal.visible .art-enter img { animation: none; }
 .cta-character .koko-sprite img { transform: translateX(-33.333333%); }
 .service-object { transition: none; }
 .service-row:hover .service-object,.service-row:focus-within .service-object { transform: none; }
 .process-line { transform: translateX(-50%); }
}
@media(prefers-reduced-motion:reduce) and (max-width:760px) { .process-line { transform: none; } }

/* Reserve room until the motion controller is ready; no nonfunctional controls without JS. */
.motion-toggle,.motion-replay { visibility: hidden; }
.motion-ready .motion-toggle,.motion-ready .motion-replay { visibility: visible; }
@media(max-width:760px) { .cta { padding-left: 20px; padding-right: 20px; } }

/* Keep the CTA backdrop still so the controls stop all ongoing foreground motion. */
.cta::before,.cta::after { animation: none; }

/* Service characters: lightweight motion, controlled by the site motion switch. */
.motion-ready:not(.motion-paused) .service-kind-web .service-character img { animation: service-work-web 5.2s ease-in-out infinite; transform-origin: 50% 80%; }
.motion-ready:not(.motion-paused) .service-kind-reservation .service-character img { animation: service-work-bell 5.8s ease-in-out infinite; transform-origin: 50% 22%; }
.motion-ready:not(.motion-paused) .service-kind-inventory .service-character img { animation: service-work-carry 6.2s ease-in-out infinite; transform-origin: 50% 84%; }
.motion-ready:not(.motion-paused) .service-kind-automation .service-character img { animation: service-work-desk 4.8s ease-in-out infinite; transform-origin: 50% 82%; }
@keyframes service-work-web { 0%,22%,100%{transform:translate3d(0,0,0) rotate(0)} 29%{transform:translate3d(-2px,-2px,0) rotate(-.5deg)} 36%{transform:translate3d(2px,0,0) rotate(.5deg)} 43%{transform:translate3d(0,0,0) rotate(0)} }
@keyframes service-work-bell { 0%,38%,100%{transform:rotate(0)} 43%{transform:rotate(-1.4deg)} 48%{transform:rotate(1.4deg)} 53%{transform:rotate(-.7deg)} 58%{transform:rotate(0)} }
@keyframes service-work-carry { 0%,28%,100%{transform:translate3d(0,0,0)} 35%{transform:translate3d(4px,-4px,0)} 43%{transform:translate3d(-2px,-5px,0)} 51%{transform:translate3d(0,0,0)} }
@keyframes service-work-desk { 0%,20%,100%{transform:translate3d(0,0,0) scale(1)} 27%{transform:translate3d(0,-2px,0) scale(1.008)} 34%{transform:translate3d(2px,0,0) scale(1.006)} 41%{transform:translate3d(-1px,-1px,0) scale(1.004)} 48%{transform:translate3d(0,0,0) scale(1)} }
.motion-paused .service-character img { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .service-character img { animation: none !important; transform: none !important; } }