.lga { display: inline-flex; align-items: center; gap: 5px; line-height: 1; color: var(--color-ink); white-space: nowrap; }
.lga__ic { flex-shrink: 0; width: 25px; height: 19px; }
.lga__t { display: grid; gap: 0.32em; }
.lga__ja { font-family: var(--font-head); font-weight: 400; font-size: 18px; letter-spacing: -0.01em; }
.lga__en { font-family: var(--font-en); font-weight: 900; font-size: 15px; letter-spacing: 0.24em; color: var(--color-blue-deep); }
.lga__ensvg { display: block; width: 100%; height: auto; overflow: visible; }
.lga__ensvg text { font-family: var(--font-en); font-weight: 900; font-size: 9.4px; fill: var(--color-blue-deep); }
.site-header .lga__t { gap: 3px; }
.site-header .lga__ic { width: 30px; height: 23px; }
.hb { font-family: var(--font-body); }

.page__inner { container-type: inline-size; word-break: keep-all; overflow-wrap: anywhere; }
.cl { display: inline-block; max-width: 100%; }      
.head { display: grid; justify-items: start; gap: var(--sp-1); }
.hd { font-family: var(--font-head); font-weight: 400; font-size: var(--fs-head); line-height: var(--lh-head); letter-spacing: var(--ls-head); }
.tag {
  display: inline-block; padding: 0.3em 0.7em 0.25em; font-family: var(--font-en); font-weight: 800; font-size: var(--fs-ui); line-height: 1; letter-spacing: 0.12em;
  color: var(--color-ink); background: var(--color-accent); border: var(--line) solid var(--color-ink); border-radius: var(--radius-s); box-shadow: var(--shadow-tag);
}
.txt { display: grid; gap: var(--sp-p); }
.kw { font-weight: 900; }
.kw--band { padding: 0.06em 0.3em; color: var(--color-on-dark); background: var(--color-ink); -webkit-box-decoration-break: clone; box-decoration-break: clone; line-height: 1.7; }
.kw--tag { display: inline-block; margin-block: 0.35em; padding: 0.1em 0.55em; color: var(--color-ink); background: var(--color-accent); border: var(--line) solid var(--color-ink); border-radius: var(--radius-s); box-shadow: var(--shadow-tag); }
.kw--paint { background: linear-gradient(var(--color-accent), var(--color-accent)) 0 100% / 0 0.16em no-repeat; transition: background-size 0.9s var(--ease-line); }
.page.is-active .kw--paint { background-size: 100% 0.16em; transition-delay: 0.6s; }
.note { font-size: max(var(--fs-min), 0.8em); line-height: 1.5; }
.big { font-family: var(--font-head); font-weight: 400; font-size: min(1.5em, 6.6cqi); line-height: 1.2; }   
.close { font-size: 1.12em; line-height: 1.45; }

.page--blue { background: var(--color-blue); color: var(--color-ink); }
.page--dark .hd, .page--dark .big { color: var(--color-on-dark); }

.page:not(.page--hero)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: var(--pat, transparent); opacity: var(--pat-o, 0);
  -webkit-mask: url("assets/illust/pattern.svg") 0 0 / 150px 150px repeat; mask: url("assets/illust/pattern.svg") 0 0 / 150px 150px repeat;
}
.page--blue { --pat: var(--color-blue-deep); --pat-o: 0.4; }
.page--dark { --pat: var(--color-main-2); --pat-o: 0.4; }
.page--p3, .page--p6, .page--req, .page--entry { --pat: var(--color-blue); --pat-o: 0.13; }

.page--req::after, .page--entry::after {
  content: ""; position: absolute; left: 0; right: 0; top: var(--header-h); z-index: 1; height: 14px;
  background: repeating-linear-gradient(-45deg, var(--color-accent) 0 12px, var(--color-ink) 12px 24px);
}
.page--req .page__inner::after { content: ""; flex-shrink: 0; height: 14px; margin: 0.6em calc(var(--gutter) * -1) 0; background: repeating-linear-gradient(-45deg, var(--color-accent) 0 12px, var(--color-ink) 12px 24px); }

.thin, .band, .railband { overflow: hidden; white-space: nowrap; }
.thin__track, .band__track { display: flex; width: max-content; animation: flow var(--t, 30s) linear infinite; }
.thin__track > span, .band__track > span { flex: 0 0 auto; padding-right: 0.4em; }
@keyframes flow { to { transform: translateX(-50%); } }
.thin {
  flex-shrink: 0; margin-inline: calc(var(--gutter) * -1); padding: 0.35em 0; font-family: var(--font-en); font-weight: 800; font-size: var(--fs-ui); line-height: 1; letter-spacing: 0.1em;
  color: var(--color-on-dark); background: var(--color-ink);
}

.spray { position: absolute; z-index: 3; font-family: var(--font-spray); font-weight: 400; line-height: 1; letter-spacing: 0.02em; clip-path: inset(-20% 100% -40% -10%); pointer-events: none; }
.page.is-active .spray { animation: paint var(--dur-paint) cubic-bezier(0.6, 0, 0.3, 1) var(--delay-paint) both; }
.page.is-active .spray.is-repaint { animation: paint var(--dur-paint) cubic-bezier(0.6, 0, 0.3, 1) both; }
@keyframes paint { from { clip-path: inset(-20% 100% -40% -10%); } to { clip-path: inset(-20% -10% -40% -10%); } }

.fl { animation: fuwa var(--dur-float) ease-in-out infinite alternate; }
@keyframes fuwa { from { translate: 0 0; rotate: -1.5deg; } to { translate: 0 -6px; rotate: 1.5deg; } }
@keyframes swing { from { rotate: -7deg; } to { rotate: 7deg; } }
@keyframes pan { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes pan-x { from { background-position-x: 0%; } to { background-position-x: 100%; } }   

.page--p1 { --sp-g: 0.6em; --sp-p: 0.5em; }   
.hero1 { position: relative; flex-shrink: 0; height: clamp(240px, 44dvh, 440px); margin-inline: calc(var(--gutter) * -1); }
.hero1__word { position: absolute; inset: 0 0 auto; text-align: center; font-family: var(--font-en); font-weight: 900; font-size: 24cqi; line-height: 0.82; letter-spacing: -0.04em; color: var(--color-ink); }   
.hero1__men { position: absolute; inset: 15% 0 13%; z-index: 2; }   
.hero1__man { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; width: auto; margin-inline: auto; }   
.page.is-active .hero1__man { animation: jump-in 0.7s var(--ease-pop) both, fuwa var(--dur-float) ease-in-out 0.8s infinite alternate; }
@keyframes jump-in { from { translate: 0 60%; scale: 0.6; opacity: 0; } to { translate: 0 0; scale: 1; opacity: 1; } }
.hero1__ttl {
  position: absolute; left: 0; right: 0; bottom: 0; height: 15%; z-index: 3; display: grid; place-items: center; padding-top: 0.15em;
  font-family: var(--font-head); font-weight: 400; font-size: min(10.4cqi, 2.4em); line-height: 1; letter-spacing: -0.02em; color: var(--color-on-dark);
  background: var(--color-ink); border-radius: 50% 50% 0 0 / 40% 40% 0 0;
}
.says { display: grid; gap: var(--sp-1); }
.says--side { position: absolute; inset: 34% 0 auto; z-index: 3; display: flex; justify-content: space-between; align-items: flex-start; padding-inline: 4px; pointer-events: none; }
.says--side .say { max-width: 38%; padding: 0.4em 0.55em; font-size: max(var(--fs-min), 0.78em); line-height: 1.35; word-break: keep-all; }   
.says--side .say--r { margin-top: 2.6em; }
.says--side .say--l::after { left: auto; right: -9px; top: 40%; border-width: var(--line) var(--line) 0 0; }
.says--side .say--r::after { right: auto; left: -9px; top: 40%; border-width: 0 0 var(--line) var(--line); }
.say {
  position: relative; max-width: 90%; padding: 0.4em 0.75em; font-size: var(--fs-sub); font-weight: 700; line-height: 1.4;
  background: var(--color-base); border: var(--line) solid var(--color-ink); border-radius: 14px; box-shadow: var(--shadow-tag);
}
.say::after { content: ""; position: absolute; top: -9px; width: 14px; height: 14px; background: var(--color-base); border: solid var(--color-ink); border-width: var(--line) 0 0 var(--line); }
.say--l { justify-self: start; }
.say--l::after { left: 18%; transform: rotate(45deg); }
.say--r { justify-self: end; }
.say--r::after { right: 18%; transform: rotate(45deg); }

.page--p2 { --sp-g: max(0.8em, 4dvh); }
@media (max-height: 600px) { .page--p2 { --sp-g: 0.55em; } .page--p2 .hd { font-size: 11.4cqi; } }   
.checks { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.3em; }   
.boss { width: auto; height: clamp(96px, 21dvh, 250px); margin-right: -0.4em; transform-origin: 50% 100%; animation: look 2.4s ease-in-out infinite alternate; }
@keyframes look { from { rotate: -3deg; } to { rotate: 3deg; translate: 0 -3px; } }
.hlist { display: grid; gap: 0.25em; font-size: var(--fs-sub); font-weight: 700; line-height: 1.4; }
.hlist li { position: relative; padding-left: 1.7em; }
.hlist li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 1.3em; height: 1em; background: var(--color-ink); -webkit-mask: url("assets/illust/helmet.svg") center / contain no-repeat; mask: url("assets/illust/helmet.svg") center / contain no-repeat; }

.page--p3 .page__inner { text-align: center; }
.page--p3 .head { justify-items: center; }
.page--p3 .hd { font-size: 11.6cqi; }
.nums { position: relative; display: grid; gap: 0.15em; }
.num { display: grid; justify-items: center; }
.num__lb { display: flex; align-items: center; gap: 0.6em; width: 100%; font-weight: 900; font-size: var(--fs-sub); }
.num__lb::before, .num__lb::after { content: ""; flex: 1; border-top: 3px solid var(--color-ink); }
.num__v { font-family: var(--font-en); font-weight: 900; font-size: min(20cqi, 4.4em); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.num__v small { font-family: var(--font-head); font-weight: 400; font-size: 0.4em; letter-spacing: 0; }
.coin { position: absolute; right: -0.7em; top: -0.2em; width: 4.6em; transform-origin: 50% 0; animation: swing var(--dur-swing) ease-in-out infinite alternate; }
.coin::before { content: ""; display: block; width: var(--line); height: 1.2em; margin-inline: auto; background: var(--color-ink); }
.coin__img { display: block; width: 100%; height: auto; animation: spin 4.8s ease-in-out infinite; }
@keyframes spin { 0%, 60% { transform: rotateY(0); } 80% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.hop { position: absolute; left: -0.9em; top: 0.9em; width: 5.2em; height: auto; animation: hop 1.1s cubic-bezier(0.3, 0, 0.5, 1) infinite alternate; }
@keyframes hop { from { translate: 0 0.6em; scale: 1.06 0.94; } to { translate: 0 -0.5em; scale: 0.97 1.04; } }
.spray--p3 { right: -0.3em; top: -0.9em; font-size: 0.62em; color: var(--color-blue-deep); rotate: -9deg; }

.page--p4 { --sp-g: max(0.7em, 3.2dvh); --sp-p: max(0.45em, 1.6dvh); }
.payset { display: grid; }
.pay { display: grid; gap: var(--sp-p); }
.pay li { display: grid; gap: 0.1em; }
.pay__who { font-size: var(--fs-sub); font-weight: 700; }
.pay__v { font-family: var(--font-head); font-weight: 400; font-size: 1.3em; line-height: 1.1; white-space: nowrap; }
.pay__v em { font-family: var(--font-en); font-weight: 900; font-size: 1.7em; letter-spacing: -0.03em; color: var(--color-accent); }

.film {
  position: relative; flex-shrink: 0; margin: 15px calc(var(--gutter) * -1 - 24px); padding: 16px 0; rotate: -4deg; overflow: hidden;   
  background: var(--color-base); border-block: 3px solid var(--color-base);
}
.film::before, .film::after {
  content: ""; position: absolute; left: 0; right: 0; height: 7px; z-index: 1;
  background: repeating-linear-gradient(90deg, var(--color-ink) 0 9px, transparent 9px 20px);
}
.film::before { top: 4px; }
.film::after { bottom: 4px; }
.film__track { display: flex; width: max-content; animation: flow var(--t, 30s) linear infinite; }
.film__set { display: flex; gap: 6px; padding-right: 6px; }
.film__f { display: block; width: auto; height: clamp(58px, 12.5dvh, 150px); border: 3px solid var(--color-ink); border-radius: 6px; }

.page--p5 { --sp-g: max(0.6em, 4.8dvh); --sp-p: max(0.5em, 2dvh); }
.page--p5 .hd { font-size: 10cqi; }
.band { position: relative; flex-shrink: 0; overflow-x: clip; overflow-y: visible; margin-inline: calc(var(--gutter) * -1); padding: 0.06em 0 0; border-block: 4px solid var(--color-blue); font-family: var(--font-en); font-weight: 900; font-size: max(2.7em, 7.5dvh); line-height: 1.02; letter-spacing: -0.03em; color: var(--color-on-dark); }
.spray--band { right: 3%; top: -0.78em; font-size: 0.42em; color: var(--color-accent); rotate: -10deg; }
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45em; }
.card {
  display: grid; align-content: start; gap: 0.25em; padding: 0.45em 0.5em 0.55em; font-weight: 900; font-size: max(var(--fs-min), 0.8em); line-height: 1.4;
  color: var(--color-ink); background: var(--color-base); border-radius: var(--radius-m);
}
.card__no { font-family: var(--font-en); font-weight: 900; font-size: 1.5em; line-height: 1; color: var(--color-blue-deep); }
.page.is-active .card { animation: slide-in 0.5s var(--ease-out) both; animation-delay: calc(0.5s + var(--i, 0) * 0.12s); }
.card:nth-child(2) { --i: 1; }
.card:nth-child(3) { --i: 2; }
@keyframes slide-in { from { opacity: 0; translate: 60px 0; } to { opacity: 1; translate: 0 0; } }

.page--p6 { --gutter: 44px; }
.page--p6 .page__inner { text-align: center; }
.page--p6 .head { justify-items: center; }
.hd--paint { position: relative; margin-top: 0.45em; }   
.spray--hd { right: -1.1em; top: -1.05em; font-size: 0.8em; color: var(--color-blue-deep); rotate: -10deg; }
.hang { position: absolute; top: calc(var(--header-h) - 4px); width: 28px; height: auto; transform-origin: 50% 0; animation: swing var(--dur-swing) ease-in-out infinite alternate; }
.hang--l { left: 8px; }
.hang--r { right: 8px; animation-delay: -1.6s; }
.p6end { display: flex; align-items: flex-start; justify-content: center; gap: 0.5em; }   
.p6end__l { flex-shrink: 0; width: auto; height: clamp(76px, 18dvh, 200px); }
.p6end__l { transform-origin: 50% 100%; animation: cheer 0.9s ease-in-out infinite alternate; }
@keyframes cheer { from { rotate: -5deg; } to { rotate: 5deg; translate: 0 -4px; } }
.bubble {
  position: relative; align-self: flex-start; margin-top: 1.2em; padding: 0.5em 0.9em; white-space: nowrap; font-family: var(--font-head); font-weight: 400; font-size: max(var(--fs-min), min(1.12em, 5.2cqi)); line-height: 1.3;   
  background: var(--color-blue); border: var(--line) solid var(--color-ink); border-radius: 2em;
}
.bubble::after { content: ""; position: absolute; left: -10px; top: 0.9em; width: 16px; height: 16px; background: var(--color-blue); border: solid var(--color-ink); border-width: 0 0 var(--line) var(--line); transform: rotate(45deg); }

.page--p7 { --sp-g: 0.55em; --sp-p: 0.5em; }
.ears { position: relative; flex-shrink: 0; height: clamp(44px, 12dvh, 150px); margin-inline: calc(var(--gutter) * -1); clip-path: inset(calc(var(--pad-y) * -1 - 2px) 0 0 0); }   
.ears__scene { position: absolute; left: 0; right: 0; bottom: 0; top: calc(var(--pad-y) * -1); background: url("assets/scene_22.jpg?v=20261025a") 50% 40% / cover; }
.ears__ear { position: absolute; bottom: -1px; height: 100%; fill: var(--color-blue); transform-origin: 50% 100%; scale: 0.2 0; transition: scale 0.8s var(--ease-pop); }
.ears__ear--l { left: -4%; width: 42%; rotate: -10deg; }
.ears__ear--c { left: 33%; width: 34%; height: 78%; }
.ears__ear--r { right: -4%; width: 42%; rotate: 10deg; }
.ears__band { fill: var(--color-base); stroke: var(--color-base); stroke-width: 7; }
.ears__mach { position: absolute; left: 30%; bottom: 4%; width: 46%; height: auto; scale: -1 1; translate: 0 130%; opacity: 0; }
.page.is-active .ears__mach { translate: 0 0; opacity: 1; transition: translate 0.8s var(--ease-pop) 0.45s, opacity 0.2s linear 0.45s; }   
.ears::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18%; background: var(--color-blue); }
.page.is-active .ears__ear { scale: 1 1; }
.page.is-active .ears__ear--c { transition-delay: 0.15s; }
.page.is-active .ears__ear--r { transition-delay: 0.08s; }
.hd--xl { font-size: min(16cqi, 3.6em); line-height: 1; }
.page--p7 .head { position: relative; }
.picker { position: absolute; right: -0.6em; bottom: -0.4em; width: auto; height: 7.2em; transform-origin: 40% 100%; animation: pick 0.7s cubic-bezier(0.5, 0, 0.3, 1) infinite alternate; }
@keyframes pick { from { rotate: -10deg; } to { rotate: 6deg; translate: 0 2px; } }
.works { display: grid; gap: var(--sp-1); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35em; }
.tile {
  display: flex; align-items: center; gap: 0.4em; padding: 0.26em 0.5em; font-weight: 900; font-size: max(var(--fs-min), 0.86em); line-height: 1.3;
  background: var(--color-base); border: var(--line) solid var(--color-ink); border-radius: 10px; box-shadow: var(--shadow-tag);
}
.tile:last-child { grid-column: 1 / -1; justify-content: center; }
.tile__ic { flex-shrink: 0; width: 1.9em; height: 1.9em; color: var(--color-blue-deep); }
.page.is-active .tile { animation: jelly 0.6s var(--ease-pop) both; animation-delay: calc(0.5s + var(--i, 0) * 0.09s); }
.tile:nth-child(2) { --i: 1; }
.tile:nth-child(3) { --i: 2; }
.tile:nth-child(4) { --i: 3; }
.tile:nth-child(5) { --i: 4; }
@keyframes jelly { 0% { opacity: 0; scale: 0.5; } 60% { opacity: 1; scale: 1.08 0.94; } 80% { scale: 0.97 1.03; } 100% { opacity: 1; scale: 1; } }
.big--q { font-size: min(7cqi, 1.7em); }
@media (max-height: 600px) { .page--p7 .ears { height: 40px; } .page--p7 .hd--xl { font-size: 13cqi; } }   

.giant {
  margin-top: 0.15em; font-family: var(--font-en); font-weight: 900; font-size: 22cqi; line-height: 0.9; letter-spacing: -0.04em; text-align: center;
  
  color: transparent; background: url("assets/scene_31.jpg?v=20261025a") 0% 92% / 130% auto; -webkit-background-clip: text; background-clip: text;
  animation: pan-x 8s ease-in-out infinite alternate;
  -webkit-mask: radial-gradient(circle at 50% 100%, transparent 0.12em, var(--color-ink) 0.13em) 50% 0 / 0.5em 100%;
  mask: radial-gradient(circle at 50% 100%, transparent 0.12em, var(--color-ink) 0.13em) 50% 0 / 0.5em 100%;
}
.req--company { padding: 0.2em 1em; color: var(--color-ink); background: var(--color-base); border-radius: var(--radius-m); }
.req--company .req__row:last-child { border-bottom: 0; }

.page--req .hd { color: var(--color-ink); }
.jobtabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6em; }
.jobtabs__btn {
  display: grid; place-items: center; min-height: 46px; font: inherit; font-family: var(--font-body); cursor: pointer; font-weight: 900; font-size: 1.05em; letter-spacing: 0.06em;
  color: var(--color-ink); background: var(--color-base); border: var(--line) solid var(--color-ink); border-radius: var(--radius-s); box-shadow: var(--shadow-tag);
}
.jobtabs__btn.is-on { color: var(--color-ink); background: var(--color-accent); }
.jobpanel { display: grid; gap: var(--sp-g); }
.jobpanel[hidden] { display: none; }
.req dd { font-weight: 700; }
.page--req .req__row { grid-template-columns: 1fr; gap: 0.25em; }   
.page--req .req dd .ln { white-space: nowrap; }
.req__note { font-size: max(var(--fs-min), 0.86em); color: var(--color-main-2); }
.req__gap { margin-top: 0.6em; }
.req__in { padding-left: 1em; }
.req__in2 { padding-left: 2.2em; }
.tagbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; justify-self: center; min-width: 70%; min-height: 54px; margin-top: 0.4em;
  font-family: var(--font-head); font-weight: var(--fw-head); color: var(--color-ink); background: var(--color-accent); border: var(--line) solid var(--color-ink); border-radius: var(--radius-s); box-shadow: var(--shadow-tag);
}
.tagbtn svg { width: 1.1em; height: 1.1em; }

.page--entry .hd { color: var(--color-ink); }
.page--entry .field__input { border: var(--line) solid var(--color-ink); }
.foot { display: grid; gap: 0.6em; padding-bottom: 1.2em; color: var(--color-on-dark); background: var(--color-ink); }
.thin--foot { margin-inline: 0; background: var(--color-blue); color: var(--color-ink); }
.foot__c { font-family: var(--font-en); font-weight: 700; font-size: var(--fs-min); text-align: center; letter-spacing: 0.12em; }

@media (min-width: 960px) {
  .lga--rail { gap: 12px; }
  .lga--rail .lga__ic { width: 66px; height: 50px; }
  .lga--rail .lga__ja { font-size: 44px; }
  .rail { overflow: hidden; }
  .railband {
    position: absolute; left: -16%; right: 0; bottom: 16%; z-index: 0;    padding: 0.1em 0; rotate: -6deg; font-family: var(--font-en); font-weight: var(--fw-head); font-size: 64px; line-height: 1.1;
    color: var(--color-ink); background: var(--color-blue); border-block: 3px solid var(--color-ink);
  }
  
  .railband::before {
    content: "SATSUKI DOBOKU ● SHAPE THE LAND ● SATSUKI DOBOKU ● SHAPE THE LAND ● SATSUKI DOBOKU ● SHAPE THE LAND ● SATSUKI DOBOKU ● SHAPE THE LAND ● ";
    display: block; width: max-content; animation: flow 52s linear infinite;
  }
  .rail-logo, .rail-side { position: relative; z-index: 2; }
  .rail-man { position: absolute; z-index: 1; bottom: 2%; left: 8%; width: auto; height: auto; max-width: 70%; max-height: min(42vh, 380px); }   
  .rail-man--r { left: auto; right: 14%; }
}