/* =============================================================
   about-motion.css — 会社概要だけ（2026-10-14 第3段）
   既定（JSなし・動きを減らす設定）：章の文が縦に並ぶ普通の区画。紋章は静止画。
   .is-film（JS が付ける）：画面を止めて、紋章が姿を変える映画の形。
   ============================================================= */
.ab-film { position: relative; background: var(--black); border-bottom: 1px solid var(--gold-border); }
.ab-sticky { position: relative; padding: 96px 0; }
.ab-stage { position: relative; margin: 0 auto 40px; text-align: center; }
.ab-year { display: inline-block; font-family: var(--font-serif-en); font-weight: 300; font-size: clamp(96px, 16vw, 220px); line-height: 1; letter-spacing: .04em;
  background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold);
  filter: drop-shadow(0 0 30px rgba(201,168,76,.22)); }
.ab-chs { list-style: none; margin: 0 auto; padding: 0; width: 90%; max-width: 720px; display: grid; gap: 56px; }
.ab-ch .ab-idx { display: block; font-family: var(--font-label); font-size: 11px; letter-spacing: .38em; color: var(--gold); text-transform: uppercase; margin-bottom: 14px; }
.ab-ch .ab-idx b { font-weight: 400; color: var(--gold-light); margin-right: 10px; }
.ab-ch h2 { font-family: var(--font-serif-ja); font-weight: 300; font-size: clamp(26px, 2.8vw, 40px); line-height: 1.55; letter-spacing: .08em; color: var(--white); margin: 0 0 18px; }
.ab-ch h2 em { font-style: normal; color: var(--gold-light); }
.ab-ch p { font-size: 16px; line-height: 2; letter-spacing: .05em; color: var(--gray-light); margin: 0; max-width: 34em; }
.ab-ch ul { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 8px; }
.ab-ch li { font-size: 15px; color: var(--gray-light); padding-left: 22px; position: relative; letter-spacing: .06em; }
.ab-ch li::before { content: ''; position: absolute; left: 0; top: .85em; width: 12px; height: 1px; background: var(--gold); }
.ab-progress { display: none; }

/* ---------- 映画の形 ---------- */
.ab-film.is-film { height: 460vh; }
.ab-film.is-film .ab-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding: 0; overflow: hidden; }
.ab-film.is-film .ab-stage { position: absolute; inset: 0; width: auto; margin: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 8vw; }
.ab-film.is-drawn .ab-year { opacity: 0; transition: opacity .8s var(--ease-smooth); }
.ab-gl, .ab-2d { position: absolute; inset: 0; width: 100% !important; height: 100% !important; pointer-events: none; display: block; }
.ab-film.is-gl .ab-2d { opacity: 0; transition: opacity .9s var(--ease-smooth); }
.ab-film.is-film .ab-sticky::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, rgba(10,10,10,.92) 0%, rgba(10,10,10,.6) 34%, transparent 58%),
              radial-gradient(ellipse at 70% 50%, transparent 40%, rgba(10,10,10,.55) 100%); }
.ab-film.is-film .ab-chs { position: absolute; z-index: 2; left: max(5vw, calc((100vw - var(--container)) / 2)); top: 50%; transform: translateY(-50%);
  width: min(560px, 42vw); max-width: none; margin: 0; display: block; }
.ab-film.is-film .ab-ch { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(calc(-50% + 18px)); opacity: 0; visibility: hidden;
  transition: opacity .35s var(--ease-smooth), transform .35s var(--ease-smooth), visibility 0s .35s; }
.ab-film.is-film .ab-ch.on { opacity: 1; visibility: visible; transform: translateY(-50%);
  transition: opacity .7s var(--ease-smooth) .3s, transform .9s var(--ease-expo) .3s, visibility 0s .3s; }
.ab-film.is-film .ab-progress { display: block; position: absolute; z-index: 2; left: max(5vw, calc((100vw - var(--container)) / 2)); bottom: 7vh; width: 160px; height: 1px; background: rgba(255,255,255,.12); }
.ab-film.is-film .ab-progress i { display: block; height: 100%; background: var(--gold); transform-origin: left; transform: scaleX(0); }
.ab-film.is-film .ab-hint { position: absolute; z-index: 2; right: 5vw; bottom: 6vh; font-family: var(--font-label); font-size: 10px; letter-spacing: .32em; color: var(--gray); }

/* スマホ・縦長：紋章を上、章の文を下 */
@media (max-width: 860px), (max-aspect-ratio: 1/1) {
  .ab-film.is-film { height: 400vh; }
  .ab-film.is-film .ab-stage { justify-content: center; align-items: flex-start; padding: calc(var(--nav-h) + 8vh) 0 0; }
  .ab-year { font-size: clamp(88px, 26vw, 150px); }
  .ab-film.is-film .ab-sticky::after { background: linear-gradient(0deg, rgba(10,10,10,.96) 0%, rgba(10,10,10,.75) 38%, transparent 62%); }
  .ab-film.is-film .ab-chs { left: 6vw; right: 6vw; width: auto; top: auto; bottom: 12vh; transform: none; height: 42vh; }
  .ab-film.is-film .ab-ch { top: auto; bottom: 0; transform: translateY(18px); }
  .ab-film.is-film .ab-ch.on { transform: none; }
  .ab-ch h2 { font-size: 26px; }
  .ab-ch p { font-size: 15px; }
  .ab-film.is-film .ab-progress { bottom: 6vh; left: 6vw; }
  .ab-film.is-film .ab-hint { display: none; }
}
@media (max-width: 860px) { body .ab-film.is-film { margin-bottom: 0; } }


/* 下の見出しが1字だけ次の行に落ちないように（このページだけ） */
.about-intro h2, .mission-content h2 { font-size: clamp(26px, 3.1vw, 42px); }