.site-header { box-shadow: 0 1px 0 var(--color-hairline); }
.kw { font-weight: var(--fw-strong); }
.body { text-align: center; }

.page__inner { word-break: keep-all; overflow-wrap: anywhere; }

.bubble {
  position: relative; display: inline-block; justify-self: center; padding: 0.35em 1.2em;
  font-weight: var(--fw-strong); font-size: 1.05em; line-height: 1.3; letter-spacing: 0.08em;
  color: var(--color-ink); background: var(--color-base); border: 2.5px solid var(--color-ink); border-radius: var(--radius-pill);
}
.bubble::after {
  content: ""; position: absolute; left: 50%; bottom: -9px; width: 14px; height: 14px; translate: -50% 0; rotate: 45deg;
  background: var(--color-base); border-right: 2.5px solid var(--color-ink); border-bottom: 2.5px solid var(--color-ink);
}

.fv__ttl { display: grid; justify-items: center; }
.fv__ttl-img { display: flex; align-items: flex-end; justify-content: center; width: 100%; }
.fv__ttl-img img { width: auto; height: clamp(30px, 6.4dvh, 42px); }
.fv__body { display: grid; gap: var(--sp-p); }
.fv__year { font-weight: var(--fw-strong); font-size: 1.15em; }
.fv__street-box { position: relative; flex: 1 1 auto; min-height: clamp(110px, 22dvh, 150px); max-height: 300px; margin-inline: calc(var(--gutter) * -1); }
.fv__street { position: absolute; inset: 0; --pf-opacity: 1; --pf-size: 1px; }
.fv__street .pf-track { height: 100%; align-items: flex-end; }
.fv__street img { height: 100%; width: auto; max-width: none; }

.concept__ttl { display: grid; justify-items: center; }
.concept__ttl img { width: min(100%, 300px); height: auto; }
.concept__fig { position: relative; height: clamp(110px, 25dvh, 180px); }
.concept__sun { position: absolute; left: 50%; top: 6%; height: 88%; aspect-ratio: 1; translate: -78% 0; border-radius: 50%; background: var(--color-cream); }
.concept__man { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; translate: -50% 0; }
.concept__bub { position: absolute; top: 6%; width: 7.4em; height: 2.6em; }
.concept__bub--a { left: 0; }
.concept__bub--b { right: 0; top: 30%; }
.concept__bub .pf-diagram-pop__body {
  display: grid; place-items: center; font-weight: var(--fw-strong); font-size: max(var(--fs-min), 0.92em); color: var(--color-ink);
  position: relative; background: var(--color-base); border: 2px solid var(--color-ink); border-radius: 14px; box-shadow: var(--shadow-soft);
}

.concept__bub .pf-diagram-pop__body::after {
  content: ""; position: absolute; left: 14%; right: 14%; top: 50%; height: 2.5px; background: var(--color-ink);
  rotate: -4deg; transform: scaleX(0); transform-origin: left center;
}
.concept__bub.is-on .pf-diagram-pop__body::after { transform: scaleX(1); transition: transform 1100ms cubic-bezier(0.45, 0, 0.25, 1) var(--line-delay, 900ms); }
@media (prefers-reduced-motion: reduce) { .concept__bub .pf-diagram-pop__body::after { transform: scaleX(1); } }
.concept__done {
  position: absolute; right: 2%; bottom: 4%; display: inline-block; padding: 0.3em 0.8em;
  font-weight: 900; font-size: 1.15em; letter-spacing: 0.04em; color: var(--color-ink);
  background: var(--color-cream); border: 2.5px solid var(--color-ink); border-radius: var(--radius-btn); --pf-delay: 2650ms; --pf-dur: 520ms; --pf-from-scale: 3; --pf-from-rotate: -16deg;
}
.concept__body { display: grid; gap: var(--sp-p); }
.concept__strong { font-weight: 900; font-size: 1.45em; line-height: 1.4; text-align: center; letter-spacing: 0.06em; }

.strength__head { display: grid; justify-items: center; gap: 0.9em; }
.strength__ttl { width: min(100%, 300px); height: auto; filter: invert(1); }
.cards { display: grid; gap: 0.7em; }
.card {
  display: flex; align-items: center; gap: 0.9em; padding: 0.6em 1em;
  border-radius: var(--radius-card); background: var(--color-card-dark); border: 1px solid var(--color-card-dark-line);
}
.card__ico {
  flex: none; display: grid; place-items: center; width: clamp(48px, 10dvh, 72px); aspect-ratio: 1; border-radius: 50%; padding: 4px;
  --pf-on-bg: var(--color-cream); --pf-on-fg: var(--color-ink); --pf-off-bg: var(--color-base); --pf-off-fg: var(--color-ink); --pf-off-opacity: 0.85; --pf-dur: 4s;
}
.card__ico img { width: 100%; height: auto; border-radius: 50%; }
.card__txt { font-weight: var(--fw-strong); font-size: 1.08em; line-height: 1.5; color: var(--color-on-dark); }
@media (max-height: 600px) {
  .strength__head { gap: 0.6em; }
  .strength__ttl { width: min(100%, 250px); }
  .cards { gap: 0.5em; }
  .card { padding: 0.45em 0.9em; }
}

.ttl { text-align: center; }
.field__opt { padding: 0.1em 0.5em; font-size: var(--fs-min); line-height: 1.4; color: var(--color-ink); background: var(--tag-gray); border-radius: var(--radius-s); }

@media (min-width: 960px) {
  .btn--fill { border-radius: var(--radius-btn); }
}

@media (min-height: 900px) {
  .fv__ttl-img img { height: 48px; }
  .fv .page__inner { gap: 2.2em; }
  .concept__fig { height: clamp(180px, 30dvh, 320px); }
  .concept__ttl img, .strength__ttl { width: min(100%, 340px); }
  .card { padding: 1em 1.2em; }
  .card__ico { width: 96px; }
  .cards { gap: 1em; }
  .family .page__inner, .people .page__inner, .company .page__inner { font-size: 1.08em; gap: 3.2dvh; }
  .job .page__inner { font-size: 1.1em; gap: 5.6dvh; }
  .checks { padding: 1.4em 1.2em; gap: 1em; }
  .shop { height: 8em; }
  .shop svg { width: 2.8em; height: 2.8em; }
  .tasks li { padding: 0.5em 1em; }
  .people__strip { height: 170px; }
  .company__fig { width: min(80%, 340px); }
}

.sec-head { display: grid; justify-items: center; gap: 0.8em; }
.sec-head__ttl { width: min(100%, 300px); height: auto; }
.sec-head__ttl--one { width: min(100%, 320px); }

.checks { display: grid; gap: 0.6em; padding: 0.9em 1em; background: var(--color-base); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); }
.checks__item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.75em; }
.checks__ico { width: 2.4em; height: 2.4em; padding: 0.35em; color: var(--color-ink); background: var(--tag-green); border-radius: 50%; }
.checks__txt { font-weight: var(--fw-strong); line-height: 1.5; }
.checks__ok { width: 1.6em; height: 1.6em; color: var(--color-ink); }
.eq { align-self: center; margin-block: -0.2em; font-weight: 900; font-size: 1.8em; line-height: 1; text-align: center; rotate: 90deg; }   
.star { padding: 0.6em 1em; font-weight: 900; font-size: 1.12em; line-height: 1.55; text-align: center; background: var(--color-cream); border: 2.5px solid var(--color-ink); border-radius: var(--radius-btn); }

.grow { background: var(--color-cream); }
.grow .page__inner { gap: 0.8em; }
.grow__fig { display: grid; justify-items: center; }
.grow__fig img { height: clamp(90px, 19dvh, 230px); width: auto; }
.grow .bubble { background: var(--color-base); }
.dcards { display: grid; gap: 0.45em; }
.dcard { display: flex; align-items: center; gap: 0.8em; padding: 0.55em 0.9em; font-weight: var(--fw-strong); line-height: 1.5; color: var(--color-on-dark); background: var(--color-ink); border-radius: var(--radius-card); }
.dcard__ico { flex: none; width: 2.3em; height: 2.3em; padding: 0.35em; color: var(--color-ink); background: var(--color-base); border-radius: 50%; }

.shops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6em; }
.shop { height: 5.6em; }
.shop .pf-diagram-pop__body { display: grid; place-items: center; align-content: center; gap: 0.3em; font-weight: var(--fw-strong); border-radius: var(--radius-s); }
.shop svg { width: 2.1em; height: 2.1em; color: var(--color-ink); }
.shop--green .pf-diagram-pop__body { background: var(--tag-green); }
.shop--peach .pf-diagram-pop__body { background: var(--tag-peach); }
.shop--gray .pf-diagram-pop__body { background: var(--tag-gray); }
.tasks { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45em; }
.tasks li { padding: 0.3em 0.8em; font-weight: var(--fw-strong); background: var(--tag-yellow); border-radius: var(--radius-s); }
.body--close { font-weight: var(--fw-strong); }

.works__view { display: grid; gap: 0.7em; margin-inline: calc(var(--gutter) * -1); }
.works__track {
  display: flex; gap: 12px; padding-inline: var(--gutter); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; outline: none;
}
.works__track::-webkit-scrollbar { display: none; }
.works__slide {
  flex: 0 0 calc(100% - var(--gutter) * 2); aspect-ratio: 4 / 3; max-height: 48dvh; margin: 0; scroll-snap-align: center;
  display: grid; place-items: center; background: var(--color-pale); border-radius: var(--radius-card); overflow: hidden;
}
.works__slide img { width: 100%; height: 100%; object-fit: contain; }
.works__nav { display: flex; align-items: center; justify-content: center; gap: 1.2em; font-weight: var(--fw-strong); }
.works__count b { font-size: 1.3em; }
.works__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; color: var(--color-on-dark); background: var(--color-ink); border: 0; border-radius: 50%; cursor: pointer; }
.works__btn svg { width: 20px; height: 20px; }
.works__btn--prev svg { rotate: 180deg; }

.people .page__inner { gap: 0.9em; }
.people__strip { flex: none; margin-inline: calc(var(--gutter) * -1); height: clamp(70px, 14dvh, 150px); --pf-opacity: 1; --pf-size: 1px; --pf-speed: 40s; }
.people__strip .pf-track { height: 100%; gap: 10px; }
.people__strip img { height: 100%; width: auto; max-width: none; border-radius: var(--radius-card); }
.persona { position: relative; display: grid; gap: 0.3em; padding: 0.7em 1em; background: var(--color-base); border: 2.5px solid var(--color-ink); border-radius: var(--radius-card); }
.persona__ttl { font-weight: 900; font-size: 1.08em; line-height: 1.45; }
.persona__voice { font-weight: var(--fw-strong); line-height: 1.6; }
.persona__txt { font-weight: var(--fw-body); line-height: 1.7; }

.company__label { align-self: center; font-weight: 900; font-size: 1.4em; letter-spacing: 0.2em; color: var(--color-ink); }
.co { display: grid; gap: 0.5em; }
.co__row { display: grid; grid-template-columns: 6em 1fr; gap: 0.8em; padding-bottom: 0.5em; border-bottom: 1px solid var(--color-line); }
.co dt { font-weight: var(--fw-strong); }
.tel { align-self: center; display: inline-flex; align-items: center; gap: 0.6em; padding: 0.55em 1.3em; font-weight: 900; font-size: 1.15em; background: var(--tag-green); border-radius: var(--radius-pill); }
.tel svg { width: 1.3em; height: 1.3em; }
.tel__k { font-weight: var(--fw-strong); }
.company__fig { width: min(78%, 300px); aspect-ratio: 1; align-self: center; }
.company__fig img { width: 100%; height: 100%; object-fit: contain; }
@media (max-height: 700px) {
  .company__fig { width: min(56%, 220px); }
  .grow .sec-head { gap: 0.5em; }
  .grow .sec-head__ttl { width: min(100%, 220px); }
  .grow__fig img { height: clamp(70px, 13dvh, 120px); }
  .dcard { padding: 0.4em 0.8em; }
  .people .sec-head__ttl { width: min(100%, 230px); }
  .people .page__inner { gap: 0.6em; }
  .people__strip { height: clamp(56px, 10dvh, 90px); }
  .persona { padding: 0.5em 0.9em; gap: 0.15em; }
}

@media (min-width: 960px) {
  .rail { background: url("assets/img/street2.webp") repeat-x left bottom / auto 34%; }
}
@media (min-height: 1000px) {
  .job .page__inner { gap: 7.2dvh; }
  .family .page__inner { font-size: 1.22em; gap: 4.6dvh; }
  .family .sec-head__ttl { width: min(100%, 380px); }
}

@media (max-width: 959px) {
  .fv__street-box { max-height: 240px; }
}

.concept__bub.is-on {
  animation: pf-diagram-pop-float var(--pf-float-dur) ease-in-out var(--pf-float-phase) infinite alternate,
             bub-struck 650ms cubic-bezier(0.36, 0.07, 0.19, 0.97) calc(var(--line-delay, 900ms) + 1100ms) both;
}
@keyframes bub-struck {
  0%   { transform: none; opacity: 1; }
  15%  { transform: translateX(-9px) rotate(-7deg) scale(1.08); }
  30%  { transform: translateX(8px) rotate(6deg) scale(1.04); }
  45%  { transform: translateX(-6px) rotate(-4deg); }
  60%  { transform: translateX(4px) rotate(3deg); }
  80%  { transform: translateX(-2px) rotate(-1deg); }
  100% { transform: translateY(4px) rotate(-3deg) scale(0.94); opacity: 0.55; }
}
.concept.is-active .concept__man {
  animation: man-in 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 0ms both,
             man-jolt 420ms ease-out 2950ms both;
}
@keyframes man-in {
  0%   { transform: translateY(40px) scale(0.9); opacity: 0; }
  60%  { transform: translateY(-10px) scale(1.03); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
@keyframes man-jolt {
  0%   { transform: none; }
  20%  { transform: translate(-6px, 3px) rotate(-2deg); }
  40%  { transform: translate(6px, -2px) rotate(2deg); }
  60%  { transform: translate(-4px, 1px) rotate(-1deg); }
  80%  { transform: translate(2px, 0) rotate(0.5deg); }
  100% { transform: none; }
}
.concept.is-active .concept__sun { animation: sun-pulse 500ms ease-out 2950ms both; }
@keyframes sun-pulse { 0% { scale: 1; } 40% { scale: 1.12; } 100% { scale: 1; } }
@media (prefers-reduced-motion: reduce) {
  .concept__bub.is-on, .concept.is-active .concept__man, .concept.is-active .concept__sun { animation: none; }
}

.bg-marquee { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; z-index: 0; pointer-events: none;
  --pf-size: clamp(72px, 16dvh, 150px); --pf-opacity: 0.07; --pf-color: var(--color-ink); --pf-speed: 50s; font-weight: 900; letter-spacing: 0.02em; }
.bg-marquee .pf-track > span { padding-right: 0.4em; }
.works .bg-marquee { --pf-speed: 40s; top: 22%; }