@charset "UTF-8";
/* KAKERU Inc. 10th ANNIVERSARY — ポートフォリオ用架空サイト */

:root {
  --c-blk-1: #1F1F1F;
  --c-primary-1: #FF4400;
  --c-primary-2: #E63A00;
  --c-gray-1: #F2F2F2;
  --c-gray-2: #DBDBDB;
  --c-gray-3: #8F8F8F;
  --f-sans: "Noto Sans JP", sans-serif;
  --f-en: "Gabarito", "Noto Sans JP", sans-serif;
  --f-en2: "Fugaz One", "Noto Sans JP", sans-serif;
  --header-h: 70px;
  --fz: clamp(10px, calc(100vw / 1300 * 10), calc(1600 / 1300 * 10px));
  font-size: var(--fz);
}
@media (min-width: 768px) { :root { --header-h: 90px; } }
@media (max-width: 767px) { :root { --fz: calc(100 / 375 * 2.5vw + 7.5px); } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  font-family: var(--f-sans);
  color: var(--c-blk-1);
  background: #fff;
  line-height: 1.8;
  overflow-x: clip;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; background: none; border: none; cursor: pointer; color: inherit; }

/* ===== header ===== */
.pageheader {
  position: fixed; top: 0; left: 0; width: 100%; height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.4rem; z-index: 50;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(8px);
}
.pageheader__logo { display: flex; align-items: center; gap: 1rem; }
.logo-mark { width: auto; height: 5.4rem; }
.pageheader__nav { display: flex; gap: 2.4rem; }
.pageheader__nav a {
  font-family: var(--f-en); font-weight: 700; font-size: 1.4rem; letter-spacing: 0.06em;
  padding: 0.4em 0; border-bottom: 2px solid transparent; transition: 0.25s;
}
.pageheader__nav a:hover { color: var(--c-primary-1); border-bottom-color: var(--c-primary-1); }
@media (max-width: 767px) {
  .pageheader { padding: 0 1.4rem; }
  .pageheader__nav { gap: 1rem; }
  .pageheader__nav a { font-size: 1rem; }
  .logo-mark { height: 4.2rem; }
}

/* ===== KV ===== */
.kv-main {
  --w-sp: 390; --h-sp: 660; --w-pc: 1368; --h-pc: 768;
  width: 100%; height: 100lvh; overflow: clip; position: relative;
  visibility: hidden; background: #E9E9E9; /* 写真スタジオのグレーに合わせる */
}
.kv-main__bg__section {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  will-change: transform;
}
.kv-main .layer1 { z-index: 0; }
.kv-main .layer2 { z-index: 1; }
.kv-main .layer3 { z-index: 2; }
.kv-main .layer4 { z-index: 3; }
.kv-main .layer5 { z-index: 4; }
.kv-main [data-sec="2"], .kv-main [data-sec="3"], .kv-main [data-sec="4"],
.kv-main [data-sec="5"], .kv-main [data-sec="6"] { width: 200%; }
.kv-main [data-sec="7"] { width: 150%; }

/* キャッチ（白抜き文字・人物の後ろ） */
.kv-main__catch {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: calc(var(--header-h) - 20px) 16px 14px;
  font-weight: 900; line-height: 1.1; letter-spacing: 0.02em;
  color: #fff;
}
.kv-main__catch .catch-1 {
  font-size: clamp(4.4rem, 11vw, 14rem);
  align-self: center; margin-right: 16%;
  transform: skewX(-8deg); /* 前傾させて疾走感を出す */
}
.kv-main__catch .catch-2 {
  font-size: clamp(4.4rem, 11vw, 14rem);
  margin-top: auto; white-space: nowrap;
  transform: skewX(-8deg);
}
.kv-main__catch .catch-en {
  font-family: var(--f-en2); font-size: clamp(1.3rem, 1.8vw, 2rem);
  color: var(--c-primary-1); letter-spacing: 0.12em;
  margin-top: 0.6rem;
}
@media (max-width: 767px) {
  .kv-main__catch { max-width: none; max-height: 165vw; }
}

/* スナップ写真（ポラロイド風） */
.kv-main__ph {
  position: absolute;
  background: #fff; padding: 0.7rem 0.7rem 1.1rem;
  box-shadow: 0 6px 24px rgba(31, 31, 31, 0.18);
  rotate: var(--rot, 0deg);
  will-change: transform;
}
.kv-main__ph:nth-of-type(3n)   { --rot: -5deg; }
.kv-main__ph:nth-of-type(3n+1) { --rot: 4deg; }
.kv-main__ph:nth-of-type(3n+2) { --rot: -2deg; }

/* リード文（白帯） */
.kv-main__lead {
  font-size: clamp(18px, calc(24 / var(--w-pc) * 100vw), 24px);
  font-weight: 700; line-height: 1; width: max-content; z-index: 3;
  opacity: 0; transform: translateY(1.2em);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.kv-main__lead.is-view { opacity: 1; transform: translateY(0); }
.kv-main__lead > span {
  background-color: #fff; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  padding: 0 0.4em 0.15em; line-height: 1.5;
}
.kv-main__lead > span:not(.line-1) { padding-top: 0; }
.kv-main__lead > i { display: inline-block; }
@media (max-width: 767px) {
  .kv-main__lead { font-size: clamp(13px, calc(14 / var(--h-sp) * 100vh), 18px); }
}

/* --- 写真の配置（PC: width基準 min(px, vw)） --- */
@media (min-width: 768px) {
  .kv-main [data-sec="2"] .lead-1 { position: absolute; left: 20%; bottom: 40%; }
  .kv-main [data-sec="2"] .lead-2 { position: absolute; right: 10%; bottom: 25%; }
  .kv-main [data-sec="2"] .ph-0 { left: 10%; bottom: 4%;  width: min(200px, calc(200 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="2"] .ph-1 { left: 10%; bottom: 12%; width: min(300px, calc(300 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="2"] .ph-2 { left: 10%; top: 10%;    width: min(220px, calc(220 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="2"] .ph-3 { right: 60%; top: 5%;    width: min(160px, calc(160 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="2"] .ph-4 { right: 25%; top: 0;     width: min(160px, calc(160 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="2"] .ph-5 { right: -10%; bottom: 38%; width: min(230px, calc(230 / var(--w-pc) * 100vw)); }

  .kv-main [data-sec="3"] .kv-main__lead { position: absolute; left: 5%; bottom: 25%; }
  .kv-main [data-sec="3"] .ph-6 { left: -5%; top: 10%;    width: min(300px, calc(300 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="3"] .ph-7 { right: 20%; bottom: 13.5%; width: min(220px, calc(220 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="3"] .ph-8 { right: 50%; top: 35%;   width: min(200px, calc(200 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="3"] .ph-9 { right: 5%; top: 0;      width: min(160px, calc(160 / var(--w-pc) * 100vw)); }

  .kv-main [data-sec="4"] .lead-1 { position: absolute; bottom: 18%; left: -15%; }
  .kv-main [data-sec="4"] .lead-2 { position: absolute; bottom: 40%; left: 45%; }
  .kv-main [data-sec="4"] .ph-10 { left: 30%; bottom: 33%; width: min(300px, calc(300 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="4"] .ph-11 { left: -25%; bottom: 10%; width: min(150px, calc(150 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="4"] .ph-12 { left: 20%; top: 3%;    width: min(160px, calc(160 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="4"] .ph-13 { left: 65%; bottom: 0;  width: min(300px, calc(300 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="4"] .ph-14 { right: 30%; top: 12%;  width: min(300px, calc(300 / var(--w-pc) * 100vw)); }

  .kv-main [data-sec="5"] .kv-main__lead { position: absolute; left: 20%; bottom: 18%; }
  .kv-main [data-sec="5"] .ph-15 { left: -40%; bottom: -5%; width: min(200px, calc(200 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="5"] .ph-16 { left: 30%; top: 40%;   width: min(220px, calc(220 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="5"] .ph-17 { left: -20%; top: 25%;  width: min(200px, calc(200 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="5"] .ph-18 { left: 40%; top: 0;     width: min(160px, calc(160 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="5"] .ph-19 { right: 60%; top: 45%;  width: min(230px, calc(230 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="5"] .ph-20 { right: -80%; bottom: 5%; width: min(300px, calc(300 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="5"] .ph-21 { right: 5%; top: 2%;    width: min(160px, calc(160 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="5"] .ph-22 { right: 12%; top: 10%;  width: min(300px, calc(300 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="5"] .ph-23 { right: 30%; bottom: 20%; width: min(200px, calc(200 / var(--w-pc) * 100vw)); }

  .kv-main [data-sec="6"] .lead-1 { position: absolute; left: -5%; bottom: 35%; }
  .kv-main [data-sec="6"] .lead-2 { position: absolute; right: 5%; bottom: 26%; }
  .kv-main [data-sec="6"] .ph-24 { left: -15%; top: 11%;  width: min(170px, calc(170 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="6"] .ph-25 { left: 70%; bottom: 8%; width: min(300px, calc(300 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="6"] .ph-26 { left: 20%; bottom: -2%; width: min(200px, calc(200 / var(--w-pc) * 100vw)); }
  .kv-main [data-sec="6"] .ph-27 { right: 40%; top: -2%;  width: min(230px, calc(230 / var(--w-pc) * 100vw)); }
}

/* --- 写真の配置（SP: height基準 min(px, vh)） --- */
@media (max-width: 767px) {
  .kv-main [data-sec="2"] .lead-1 { position: absolute; left: 20%; bottom: 40%; }
  .kv-main [data-sec="2"] .lead-2 { position: absolute; right: -5%; bottom: 25%; }
  .kv-main [data-sec="2"] .ph-0 { left: 7%; bottom: 15%;  width: min(117px, calc(117 / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="2"] .ph-1 { left: 10%; bottom: 20%; width: min(180px, calc(180 / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="2"] .ph-2 { left: 10%; top: 10%;    width: min(132px, calc(132 / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="2"] .ph-3 { right: 50%; top: 15%;   width: min(66px,  calc(66  / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="2"] .ph-4 { right: 25%; top: 8%;    width: min(96px,  calc(96  / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="2"] .ph-5 { right: -20%; bottom: 42%; width: min(132px, calc(132 / var(--h-sp) * 100vh)); }

  .kv-main [data-sec="3"] .kv-main__lead { position: absolute; left: 17%; bottom: 25%; }
  .kv-main [data-sec="3"] .ph-6 { left: -5%; top: 15%;    width: min(180px, calc(180 / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="3"] .ph-7 { right: 5%; bottom: 21%; width: min(132px, calc(132 / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="3"] .ph-8 { right: 50%; top: 35%;   width: min(90px,  calc(90  / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="3"] .ph-9 { right: 5%; top: 11%;    width: min(96px,  calc(96  / var(--h-sp) * 100vh)); }

  .kv-main [data-sec="4"] .lead-1 { position: absolute; bottom: 20%; left: -6%; }
  .kv-main [data-sec="4"] .lead-2 { position: absolute; bottom: 40%; right: 0; }
  .kv-main [data-sec="4"] .ph-10 { left: 25%; bottom: 37%; width: min(180px, calc(180 / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="4"] .ph-11 { left: -5%; bottom: 30%; width: min(87px,  calc(87  / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="4"] .ph-12 { left: 20%; top: 10%;   width: min(96px,  calc(96  / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="4"] .ph-13 { right: -15%; bottom: 16%; width: min(180px, calc(180 / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="4"] .ph-14 { right: 25%; top: 15%;  width: min(180px, calc(180 / var(--h-sp) * 100vh)); }

  .kv-main [data-sec="5"] .kv-main__lead { position: absolute; left: 30%; bottom: 30%; }
  .kv-main [data-sec="5"] .ph-15 { left: -30%; bottom: 10%; width: min(118px, calc(118 / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="5"] .ph-16 { left: 35%; top: 45%;   width: min(132px, calc(132 / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="5"] .ph-17 { left: -10%; top: 20%;  width: min(118px, calc(118 / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="5"] .ph-18 { left: 50%; top: 10%;   width: min(96px,  calc(96  / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="5"] .ph-19 { right: 50%; top: 35%;  width: min(132px, calc(132 / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="5"] .ph-20 { right: -90%; bottom: 15%; width: min(180px, calc(180 / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="5"] .ph-21 { right: -15%; top: 10%; width: min(96px,  calc(96  / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="5"] .ph-22 { right: -12%; top: 15%; width: min(180px, calc(180 / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="5"] .ph-23 { right: 20%; bottom: 32%; width: min(118px, calc(118 / var(--h-sp) * 100vh)); }

  .kv-main [data-sec="6"] .lead-1 { position: absolute; left: 5%; bottom: 42%; }
  .kv-main [data-sec="6"] .lead-2 { position: absolute; right: -6%; bottom: 41%; }
  .kv-main [data-sec="6"] .ph-24 { left: 10%; top: 20%;   width: min(100px, calc(100 / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="6"] .ph-25 { left: 80%; bottom: 17%; width: min(180px, calc(180 / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="6"] .ph-26 { right: 60%; bottom: 15%; width: min(118px, calc(118 / var(--h-sp) * 100vh)); }
  .kv-main [data-sec="6"] .ph-27 { right: 30%; top: 8%;   width: min(136px, calc(136 / var(--h-sp) * 100vh)); }
}

/* --- KV内ラインの配置 --- */
.bgline { position: absolute; pointer-events: none; }
.bgline svg { width: 100%; height: auto; display: block; }
.kv-main__bg__section .bgline { z-index: 0; opacity: 0; }
.pos-kv1 { left: 12%; top: 12%; width: 85%; }
.pos-kv2 { left: 28%; top: -8%; width: 44%; }
.pos-kv3 { left: 8%; top: 18%; width: 80%; }
.pos-kv4 { left: 30%; top: 2%; width: 42%; }
.pos-kv5 { left: 12%; top: 20%; width: 80%; }
.pos-kv6 { left: 6%; top: 8%; width: 84%; }
.pos-kv7 { left: 10%; top: 30%; width: 84%; }
@media (max-width: 767px) {
  .pos-kv2, .pos-kv4 { width: 70%; left: 15%; }
  .bgline svg path { stroke-width: 40; }
}

/* 走る人々（画面中央に固定） */
.kv-main__people {
  position: absolute; top: 50%; left: 50%; translate: -54% -50%;
  aspect-ratio: 1295 / 968; opacity: 0;
  width: min(120%, 700px);
  pointer-events: none;
}
@media (min-width: 768px) {
  .kv-main__people {
    width: auto;
    height: min(calc(100% - 150px), 74vw);
    max-width: calc(100% - 100px);
  }
}
.kv-main__people img { position: absolute; }
.kv-main__people .people-rear {
  width: 64%; left: 10%; top: 4%;
  filter: brightness(0.97);
  animation: bob 0.42s ease-in-out infinite alternate;
}
.kv-main__people .people-front {
  width: 76%; left: 0; bottom: 0;
  animation: bob 0.38s ease-in-out infinite alternate 0.12s;
}
.kv-main__people .people-me {
  width: 40%; right: -2%; bottom: 0;
  filter: drop-shadow(0 14px 22px rgba(31, 31, 31, 0.22));
  animation: bob 0.36s ease-in-out infinite alternate 0.05s;
}
@keyframes bob { from { transform: translateY(-0.8%); } to { transform: translateY(0.6%); } }

/* SKIP・10thバッジ */
.kv-main__dvh { position: absolute; top: 0; left: 0; width: 100%; height: 100dvh; transition: height 0.3s; pointer-events: none; }
.kv-main__skip {
  position: absolute; bottom: 20px; left: 20px; width: 80px; height: 30px;
  background: #fff; border: 1px solid var(--c-primary-1); border-radius: 48px;
  font-family: var(--f-en); font-weight: 700; font-size: 1.3rem; color: var(--c-primary-1);
  z-index: 6; cursor: pointer; pointer-events: auto; transition: 0.25s;
}
.kv-main__skip:hover { background: var(--c-primary-1); color: #fff; }

/* スクロール誘導：細い線をオレンジの光が駆け下りる */
.kv-main__scroll {
  position: absolute; bottom: 105px; right: 28px; z-index: 6;
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
  transition: opacity 0.4s ease, translate 0.4s ease;
}
.kv-main__scroll.is-hidden { opacity: 0; translate: 0 1rem; }
@media (min-width: 768px) {
  .kv-main__scroll { bottom: 145px; right: 55px; }
}
.kv-main__scroll .txt {
  font-family: var(--f-en); font-weight: 700; font-size: 1.1rem;
  letter-spacing: 0.24em; text-indent: 0.24em; color: var(--c-blk-1);
}
.kv-main__scroll .bar {
  position: relative; overflow: hidden; border-radius: 2px;
  width: 2px; height: 3.6rem; background: rgba(31, 31, 31, 0.16);
}
.kv-main__scroll .bar::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 45%;
  background: var(--c-primary-1); border-radius: 2px;
  animation: scrollRun 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes scrollRun {
  0% { top: -45%; }
  100% { top: 100%; }
}
@media (max-width: 767px) {
  .kv-main__scroll .bar { height: 2.8rem; }
  .kv-main__scroll .txt { font-size: 1rem; }
}
.kv-main__10th {
  position: absolute; bottom: 20px; right: 20px;
  width: 70px; aspect-ratio: 1; border-radius: 50%;
  background: var(--c-primary-1); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  rotate: 8deg; box-shadow: 0 6px 18px rgba(230, 58, 0, 0.35);
}
.kv-main__10th .num { font-family: var(--f-en2); font-size: 2rem; line-height: 1; }
.kv-main__10th .txt { font-family: var(--f-en); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.08em; }
@media (min-width: 768px) { .kv-main__10th { width: 90px; bottom: 30px; right: 40px; } .kv-main__10th .num { font-size: 2.6rem; } .kv-main__10th .txt { font-size: 0.8rem; } }

/* ===== 各セクション共通 ===== */
.container-sec--bg { position: relative; padding: 12rem 2.4rem; overflow: clip; }
.container-sec--bg > *:not(.bgline) { position: relative; z-index: 1; }
.pos-intro   { left: 0; top: calc(4% - 1cm);  width: 100%; opacity: 0.9; }
.pos-member  { left: 0; bottom: 4%; width: 100%; opacity: 0.9; }
.pos-future  { left: 0; top: 2%;  width: 100%; opacity: 0.9; }
.pos-history { left: 0; bottom: 2%; width: 100%; opacity: 0.9; }
.pos-tech    { left: 0; top: 3%;  width: 100%; opacity: 0.9; }
.pos-works   { left: 0; top: 3%;  width: 100%; opacity: 0.9; }

/* ===== WORKS：スクロール連動で横に流れる ===== */
#works { padding-left: 0; padding-right: 0; overflow: clip; }
#works .heading-wrap { padding: 0 2.4rem; }
.page-works-outer { position: relative; }
/* 自動で流れつつ、指やボタンでも動かせる横スクロール領域 */
.page-works {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -ms-overflow-style: none;
  overscroll-behavior-x: contain;
}
.page-works::-webkit-scrollbar { display: none; }
.page-works__track { display: flex; width: max-content; padding: 1rem 0 2rem; }
.page-works__set { display: flex; gap: 3rem; padding-right: 3rem; }

/* 前後ボタン（左右の端に浮かせる） */
.works-nav {
  position: absolute; top: calc(50% - 4rem); translate: 0 -50%;
  width: 5.2rem; height: 5.2rem; border-radius: 50%;
  background: #fff; box-shadow: 0 6px 20px rgba(31, 31, 31, 0.18);
  display: flex; align-items: center; justify-content: center;
  transition: background 0.25s, transform 0.25s; z-index: 3;
}
.works-nav::after {
  content: ""; width: 1.1rem; height: 1.1rem;
  border-top: 2px solid var(--c-blk-1); border-right: 2px solid var(--c-blk-1);
  transition: border-color 0.25s;
}
.works-nav--prev { left: 2.4rem; }
.works-nav--next { right: 2.4rem; }
.works-nav--prev::after { rotate: -135deg; translate: 25% 0; }
.works-nav--next::after { rotate: 45deg; translate: -25% 0; }
.works-nav:hover { background: var(--c-primary-1); transform: scale(1.08); }
.works-nav:hover::after { border-color: #fff; }
.work-card {
  flex: none; width: clamp(280px, 34vw, 440px);
  display: block; color: inherit;
}
/* URL未設定のカードはクリックできないので、押せそうな見た目にしない */
.work-card.is-nolink { cursor: default; }
.work-card.is-nolink:hover .work-card__browser { transform: none; box-shadow: 0 10px 30px rgba(31, 31, 31, 0.14); }
/* リンクありのカードだけ「開けます」と分かる矢印を出す */
a.work-card .work-card__title::after {
  content: "↗"; display: inline-block; margin-left: 0.5em;
  font-size: 0.72em; color: var(--c-primary-1);
  transition: transform 0.25s;
}
a.work-card:hover .work-card__title::after { transform: translate(0.2em, -0.2em); }
/* ブラウザ風の枠 */
.work-card__browser {
  background: #fff; border-radius: 1.2rem; overflow: hidden;
  box-shadow: 0 10px 30px rgba(31, 31, 31, 0.14);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.work-card:hover .work-card__browser {
  transform: translateY(-0.8rem);
  box-shadow: 0 18px 44px rgba(31, 31, 31, 0.22);
}
.work-card__bar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 1rem 1.4rem; background: var(--c-gray-1);
  border-bottom: 1px solid var(--c-gray-2);
}
.work-card__bar span { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--c-gray-2); }
.work-card__bar span:first-child { background: var(--c-primary-1); opacity: 0.55; }
/* 画面キャプチャを枠いっぱいに表示（ホバーでの動きなし） */
.work-card__window { aspect-ratio: 16 / 11; overflow: hidden; background: #fff; }
.work-card__window img {
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center;
}
.work-card__info { padding: 1.8rem 0.4rem 0; }
.work-card__cat {
  display: inline-block; font-size: 1.1rem; font-weight: 700; color: var(--c-primary-1);
  border: 1px solid var(--c-primary-1); border-radius: 100px; padding: 0.1em 1em; margin-bottom: 0.9rem;
}
.work-card__title { font-size: 2rem; font-weight: 900; line-height: 1.4; }
.work-card__desc { font-size: 1.4rem; margin-top: 0.6rem; color: var(--c-gray-3); }
@media (max-width: 767px) {
  .page-works__set { gap: 1.8rem; padding-right: 1.8rem; }
  .work-card { width: 78vw; }
  .works-nav { width: 4.2rem; height: 4.2rem; }
  .works-nav--prev { left: 1rem; }
  .works-nav--next { right: 1rem; }
}

/* ===== TECHNOLOGY ===== */
#tech { background: var(--c-gray-1); }
.page-tech__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.4rem;
  max-width: 100rem; margin: 0 auto;
}
/* 5枚目（スマホ最適化）は2列ぶち抜きで中央に置く */
.page-tech__grid .tech-card:nth-child(5) { grid-column: 1 / -1; }
.tech-card {
  background: #fff; border-radius: 1.6rem; padding: 3.6rem 3rem;
  box-shadow: 0 6px 24px rgba(31, 31, 31, 0.07);
  transition: transform 0.35s, box-shadow 0.35s;
}
.tech-card:hover { transform: translateY(-0.6rem); box-shadow: 0 14px 34px rgba(31, 31, 31, 0.12); }
.tech-card__icon {
  display: flex; align-items: center; justify-content: center;
  width: 6.4rem; height: 6.4rem; border-radius: 50%;
  background: var(--c-primary-1); color: #fff; margin-bottom: 2rem;
}
.tech-card__icon svg { width: 3.2rem; height: 3.2rem; }
.tech-card__title { font-size: 2rem; font-weight: 900; margin-bottom: 1rem; }
.tech-card__text { font-size: 1.5rem; }
.page-tech__closing {
  text-align: center; margin-top: 5rem;
  font-size: clamp(1.8rem, 2.6vw, 2.8rem); font-weight: 900; line-height: 1.7;
}
.page-tech__closing em { font-style: normal; color: var(--c-primary-1); }
.sp-only { display: none; }

/* スマホ実機プレビュー */
.page-tech__device {
  max-width: 100rem; margin: 7rem auto 0;
  display: flex; align-items: center; gap: 5rem; flex-wrap: wrap; justify-content: center;
}
.device-copy { flex: 1; min-width: 30rem; }
.device-copy__en {
  font-family: var(--f-en); font-weight: 800; font-size: clamp(3rem, 4vw, 4.6rem);
  color: var(--c-primary-1); line-height: 1; letter-spacing: 0.02em;
}
.device-copy__title { font-size: clamp(2rem, 2.6vw, 2.6rem); font-weight: 900; margin: 1rem 0 1.6rem; }
.device-copy__text { font-size: 1.5rem; line-height: 1.9; }
.device-copy__note {
  font-size: 1.3rem; font-weight: 700; color: var(--c-primary-1);
  margin-top: 2rem; padding-left: 1.2rem; border-left: 3px solid var(--c-primary-1);
}
.dir-pc { display: inline; }
.dir-sp { display: none; }
.device-phone { flex: none; }
.device-phone__frame {
  position: relative; width: 300px; height: 620px;
  background: #1F1F1F; border-radius: 42px; padding: 12px;
  box-shadow: 0 24px 60px rgba(31, 31, 31, 0.28);
}
.device-phone__notch {
  position: absolute; top: 14px; left: 50%; translate: -50% 0;
  width: 120px; height: 22px; background: #1F1F1F; border-radius: 0 0 14px 14px; z-index: 2;
}
.device-phone__screen {
  width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: #fff;
}
/* iframe は実機幅で描画し、枠(幅276px×高さ596px)に合わせて縮小する。
   幅は「見せたい375px＋スクロールバー約16px」の391pxにして、縮小後にスクロールバーを
   枠の右外へはみ出させ overflow:hidden で隠す。高さも枠を埋めるよう余裕を持たせる */
.device-phone__screen iframe {
  width: 391px; height: 812px; border: 0;
  transform: scale(0.736); transform-origin: top left;
}
@media (max-width: 767px) {
  .page-tech__grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .tech-card { padding: 2.6rem 2.2rem; }
  .sp-only { display: block; }
  .page-tech__device { flex-direction: column; gap: 3.6rem; margin-top: 5rem; }
  .device-copy { flex: none; min-width: 0; width: 100%; max-width: 44rem; margin: 0 auto; text-align: center; }
  .device-copy__title { margin: 0.8rem 0 1.4rem; }
  .device-copy__text { font-size: 1.45rem; line-height: 1.95; text-align: left; }
  .device-copy__note { display: inline-block; text-align: left; }
  .dir-pc { display: none; }
  .dir-sp { display: inline; }
  /* スマホ: transform:scale を外して等倍表示にする。
     CSS変形された iframe はタッチでの中身スクロールが効かない（特に iOS）ため、
     枠いっぱいに実寸表示して指スクロールを復活させる */
  .device-phone__screen iframe {
    width: 100%; height: 100%; transform: none;
  }
}

.heading-wrap { text-align: center; margin-bottom: 5rem; }
.heading-enjp .en {
  display: block; font-family: var(--f-en); font-weight: 800;
  font-size: clamp(3.6rem, 5vw, 6rem); letter-spacing: 0.04em; line-height: 1.1;
  color: var(--c-primary-1);
}
.heading-enjp .jp { display: block; font-size: 1.5rem; font-weight: 700; margin-top: 0.8rem; }
.para-lead { font-size: 1.5rem; margin-top: 2rem; }

/* ===== INTRO ===== */
.page-top__intro { max-width: 88rem; margin: 0 auto; text-align: center; }
.page-top__intro__catch {
  font-size: clamp(2.6rem, 4.6vw, 5.2rem); font-weight: 900; letter-spacing: 0.04em;
  margin-bottom: 5rem;
}
.page-top__intro__catch em { font-style: normal; color: var(--c-primary-1); }
.page-top__intro__lead p { font-size: 1.6rem; font-weight: 500; margin-bottom: 2.6em; }
.page-top__intro__lead p:last-child { margin-bottom: 0; font-weight: 700; }
.nobr { white-space: nowrap; }
.sp-br { display: none; }   /* スマホのみ改行させる<br>。PCでは改行しない（sp.cssでinlineに上書き） */
@media (max-width: 767px) { .page-top__intro__lead p br { display: none; } }

/* ===== NEWS / お知らせ ===== */
.page-news { max-width: 92rem; margin: 0 auto; }
.news-list { list-style: none; border-top: 1px solid var(--c-gray-2); }
.news-item {
  display: grid;
  grid-template-columns: 12rem 8.5rem 1fr;
  align-items: center;
  gap: 1.8rem;
  padding: 2.2rem 0.8rem;
  border-bottom: 1px solid var(--c-gray-2);
  transition: background 0.2s;
}
.news-item:hover { background: var(--c-gray-1); }
.news-item__date {
  font-family: var(--f-en); font-weight: 700; font-size: 1.5rem;
  letter-spacing: 0.04em; color: var(--c-gray-3);
}
.news-item__cat {
  justify-self: start;
  display: inline-block; padding: 0.3em 1.2em;
  font-size: 1.2rem; font-weight: 700; line-height: 1.6;
  border-radius: 999px; color: #fff; white-space: nowrap;
}
.news-item__cat--works { background: var(--c-primary-1); }
.news-item__cat--blog  { background: #1F7A5A; }
.news-item__cat--info  { background: var(--c-blk-1); }
.news-item__cat--media { background: #5B57B8; }
.news-item__title { font-size: 1.5rem; font-weight: 500; }
.news-empty { text-align: center; color: var(--c-gray-3); padding: 4rem 0; }
@media (max-width: 767px) {
  .news-item {
    grid-template-columns: auto 1fr;
    grid-template-areas: "date cat" "title title";
    gap: 0.8rem 1.4rem;
    padding: 1.8rem 0.4rem;
  }
  .news-item__date { grid-area: date; align-self: center; }
  .news-item__cat  { grid-area: cat; justify-self: start; align-self: center; }
  .news-item__title { grid-area: title; }
}

/* ===== VIDEO WORKS / 動画制作実績 ===== */
.video-stats {
  list-style: none; display: flex; justify-content: center; flex-wrap: wrap;
  gap: 1.2rem 4.8rem; margin: 0 auto 5rem; padding: 2.4rem 2rem;
  max-width: 92rem; border-top: 1px solid var(--c-gray-2); border-bottom: 1px solid var(--c-gray-2);
}
.video-stat { text-align: center; }
.video-stat .num {
  display: block; font-family: var(--f-en); font-weight: 800; line-height: 1;
  font-size: clamp(3.2rem, 5vw, 4.6rem); color: var(--c-primary-1);
}
.video-stat .num em { font-style: normal; font-size: 0.42em; margin-left: 0.2em; }
.video-stat .lbl { display: block; margin-top: 0.6rem; font-size: 1.2rem; font-weight: 700; color: var(--c-gray-3); }
.video-subhead {
  max-width: 116rem; margin: 0 auto 2.4rem; padding-left: 1.4rem;
  border-left: 4px solid var(--c-primary-1); font-size: 2rem; line-height: 1.35;
}
.video-subhead small { display: block; font-size: 1.2rem; font-weight: 500; color: var(--c-gray-3); }

/* カード一覧：PCはグリッド。狭い画面では横スワイプに切り替える（下部SPセクション参照） */
.video-grid {
  list-style: none; display: grid; gap: 2.4rem 2rem;
  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
  max-width: 116rem; margin: 0 auto 6rem;
}
.video-grid--short, .video-grid--insta {
  grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr));
  max-width: 60rem; margin-left: auto; margin-right: auto;
}
.video-card__btn {
  display: block; width: 100%; text-align: left; padding: 0;
  background: none; border: 0; cursor: pointer; color: inherit;
}
.video-card__btn.is-nolink { cursor: default; }
.video-card__thumb {
  position: relative; display: block; overflow: hidden;
  border-radius: 1.2rem; background: var(--c-gray-1);
  aspect-ratio: 16 / 9; box-shadow: 0 4px 18px rgba(31, 31, 31, 0.12);
}
.video-grid--short .video-card__thumb,
.video-grid--insta .video-card__thumb { aspect-ratio: 4 / 5; }
.video-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.video-card__btn:not(.is-nolink):hover .video-card__thumb img { transform: scale(1.05); }
/* 再生ボタン（丸＋三角） */
.video-card__play {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 5.6rem; height: 5.6rem; border-radius: 50%;
  background: rgba(255, 68, 0, 0.92); transition: 0.25s;
}
.video-card__play::before {
  content: ""; position: absolute; top: 50%; left: 54%; translate: -50% -50%;
  border-style: solid; border-width: 1.1rem 0 1.1rem 1.8rem;
  border-color: transparent transparent transparent #fff;
}
.video-card__btn:hover .video-card__play { background: var(--c-primary-2); scale: 1.08; }
.video-card__cat {
  display: inline-block; margin-top: 1.4rem; padding: 0.25em 1em;
  font-size: 1.15rem; font-weight: 700; line-height: 1.6;
  color: var(--c-primary-1); border: 1px solid var(--c-primary-1); border-radius: 999px;
}
.video-card__client { display: block; margin-top: 0.9rem; font-size: 1.2rem; font-weight: 700; color: var(--c-gray-3); }
.video-card__title { display: block; margin-top: 0.4rem; font-size: 1.5rem; font-weight: 700; line-height: 1.6; }
.video-card__ext { display: block; margin-top: 0.6rem; font-size: 1.2rem; font-weight: 700; color: var(--c-primary-1); }

/* モーダル内の動画プレイヤー */
.modal-video__frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #000; border-radius: 0.8rem; overflow: hidden;
}
.modal-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.modal-video__title { margin-top: 1.6rem; font-size: 1.5rem; font-weight: 700; line-height: 1.6; }

/* ===== MEMBER ===== */
#member { padding-left: 0; padding-right: 0; }
.page-top__gallery { overflow: clip; }
.page-top__gallery__track {
  display: flex; width: max-content;
  animation: marquee 40s linear infinite;
}
.page-top__gallery__track:hover { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.page-top__gallery__inner { display: flex; gap: 1.6rem; padding-right: 1.6rem; }
.page-top__gallery__inner button {
  width: clamp(150px, 18vw, 240px); flex: none;
  background: #fff; padding: 0.7rem 0.7rem 2rem;
  box-shadow: 0 6px 20px rgba(31, 31, 31, 0.15);
  rotate: -2deg; transition: 0.3s;
}
.page-top__gallery__inner button:nth-child(2n) { rotate: 2.5deg; }
.page-top__gallery__inner button:hover { rotate: 0deg; scale: 1.05; }
.page-top__gallery__inner img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }

/* ===== MESSAGE ===== */
.page-message__main {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6rem;
  max-width: 110rem; margin: 0 auto;
}
.page-message__main__sec { padding: 18vh 0; }
.page-message__main__sec h3 {
  font-size: 2.4rem; font-weight: 900; margin-bottom: 2rem;
  border-left: 6px solid var(--c-primary-1); padding-left: 1.2rem; line-height: 1.3;
}
.page-message__main__sec p { font-size: 1.5rem; }
.page-message__main__sec .sign { margin-top: 3rem; font-size: 2rem; font-weight: 700; }
.page-message__main__sec .sign small { display: block; font-size: 1.2rem; font-weight: 500; color: var(--c-gray-3); }
.page-message__main__ph--sticky { position: relative; }
.page-message__main__ph--sticky .ph {
  position: sticky; top: calc(50vh - 22rem);
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 1rem; box-shadow: 0 10px 30px rgba(31, 31, 31, 0.18);
}
.page-message__main__ph--sticky .ph { position: absolute; top: 0; opacity: 0; }
/* 代表の写真は縦位置の原本なので、切り取らず全体を見せる */
.page-message__main__ph--sticky .ph[data-sec="1"] {
  object-fit: contain; background: var(--c-gray-1);
}
.page-message__main__ph--sticky { position: sticky; top: calc(50vh - 18rem); height: fit-content; aspect-ratio: 4 / 3; align-self: start; }
@media (max-width: 767px) {
  .page-message__main { grid-template-columns: 1fr; gap: 2rem; }
  .page-message__main__sec { padding: 8vh 0; }
  .page-message__main__ph--sticky { position: sticky; top: calc(var(--header-h) + 10px); z-index: 2; }
}

/* ===== FUTURE ===== */
#future { overflow: clip; }
.page-top__future__bg {
  position: absolute; top: 6rem; left: 0; width: 100%; overflow: clip; z-index: 0;
}
.page-top__future__bg .bg-inner { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.page-top__future__bg span {
  font-family: var(--f-en); font-weight: 800; font-size: clamp(8rem, 14vw, 16rem);
  line-height: 1; white-space: nowrap; color: transparent;
  -webkit-text-stroke: 1px var(--c-gray-2);
}
.carousel-heading {
  display: flex; align-items: flex-end; justify-content: space-between;
  max-width: 120rem; margin: 0 auto 3rem;
}
.carousel-heading .heading-wrap { text-align: left; margin-bottom: 0; }
.carousel-control { display: flex; gap: 1rem; }
.carousel-control .swiper-button-prev, .carousel-control .swiper-button-next {
  position: static; margin: 0; width: 4.4rem; height: 4.4rem;
  border: 1px solid var(--c-blk-1); border-radius: 50%; background: #fff; transition: 0.25s;
}
.carousel-control .swiper-button-prev::after, .carousel-control .swiper-button-next::after {
  font-size: 1.4rem; color: var(--c-blk-1); transition: 0.25s;
}
.carousel-control .swiper-button-prev:hover, .carousel-control .swiper-button-next:hover { background: var(--c-primary-1); border-color: var(--c-primary-1); }
.carousel-control .swiper-button-prev:hover::after, .carousel-control .swiper-button-next:hover::after { color: #fff; }
.carousel-article-window { max-width: 120rem; margin: 0 auto; margin-right: calc((100vw - min(120rem, 100vw - 4.8rem)) / -2); }
.article-thumb { display: block; }
.article-thumb__ph { overflow: clip; border-radius: 1rem; aspect-ratio: 16 / 10; }
.article-thumb__ph img { width: 100%; height: 100%; object-fit: cover; transition: scale 0.5s; }
.article-thumb:hover .article-thumb__ph img { scale: 1.06; }
.article-thumb__category {
  display: inline-block; font-size: 1.1rem; font-weight: 700; color: var(--c-primary-1);
  border: 1px solid var(--c-primary-1); border-radius: 100px; padding: 0.1em 1em; margin: 1.2rem 0 0.6rem;
}
.article-thumb__title { font-size: 1.5rem; font-weight: 700; line-height: 1.5; }
.page-top__more { text-align: center; margin-top: 5rem; }
.btn-link {
  display: inline-flex; align-items: center; gap: 1.4rem;
  font-family: var(--f-en); font-weight: 700; font-size: 1.6rem; letter-spacing: 0.06em;
}
.btn-link .icon-arrow {
  width: 4rem; height: 4rem; border-radius: 50%; background: var(--c-primary-1); position: relative; transition: 0.3s;
}
.btn-link .icon-arrow::after {
  content: ""; position: absolute; top: 50%; left: 50%; translate: -60% -50%; rotate: 45deg;
  width: 0.9rem; height: 0.9rem; border-top: 2px solid #fff; border-right: 2px solid #fff;
}
.btn-link:hover .icon-arrow { translate: 0.6rem 0; }

/* ===== HISTORY ===== */
.page-history__slot { text-align: center; }
.page-history__slot__machine {
  display: inline-flex; align-items: center; gap: 2rem;
  background: var(--c-blk-1); border-radius: 2rem; padding: 3rem;
  box-shadow: 0 16px 40px rgba(31, 31, 31, 0.3);
}
.machine-window {
  display: flex; gap: 1rem; background: #fff; border-radius: 1.2rem; padding: 1.4rem;
  border: 4px solid var(--c-primary-1);
}
.machine-reel {
  width: clamp(52px, 9vw, 96px); height: clamp(76px, 13vw, 140px);
  overflow: clip; border-radius: 0.6rem; background: var(--c-gray-1); position: relative;
}
.machine-reel::before, .machine-reel::after {
  content: ""; position: absolute; left: 0; width: 100%; height: 22%; z-index: 2; pointer-events: none;
}
.machine-reel::before { top: 0; background: linear-gradient(#fff9, transparent); }
.machine-reel::after { bottom: 0; background: linear-gradient(transparent, #fff9); }
.reel-strip { will-change: transform; }
.reel-cell {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-en2); font-size: clamp(4rem, 8vw, 8.6rem); color: var(--c-blk-1);
  line-height: 1;
}
.machine-lever { transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); transform-origin: 50% 90%; }
.machine-lever svg { width: clamp(44px, 6vw, 60px); height: auto; display: block; }
.machine-lever:hover { scale: 1.06; }
.machine-lever.is-pulled { transform: rotate(-14deg) translateY(1.2rem); }
.is-spinning .machine-lever { pointer-events: none; opacity: 0.7; }
.page-history__slot__note { margin-top: 2rem; font-size: 1.4rem; font-weight: 700; color: var(--c-gray-3); }

/* ===== footer ===== */
.pagefooter { background: var(--c-blk-1); color: #fff; text-align: center; padding: 6rem 2.4rem 4rem; }
.pagefooter__logo { display: inline-flex; }
/* 白ロゴPNGの黒背景を暗い地に溶け込ませる */
.footer-logo { width: auto; height: 9rem; mix-blend-mode: screen; }
.pagefooter__note { font-size: 1.2rem; color: var(--c-gray-2); max-width: 70rem; margin: 2.4rem auto 0; }
.pagefooter__copy { margin-top: 2rem; font-family: var(--f-en); font-size: 1.2rem; color: var(--c-gray-3); }

/* ===== モーダル ===== */
.modal { position: fixed; inset: 0; z-index: 100; display: none; }
.modal.is-open { display: block; }
.modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.3s; }
.modal.is-open .modal__overlay { opacity: 1; }
.modal__card {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: min(92vw, 72rem); max-height: 86vh; overflow: auto;
  background: #fff; border-radius: 1.6rem; padding: 4rem;
  opacity: 0; scale: 0.96; transition: opacity 0.3s, scale 0.3s;
}
.modal.is-open .modal__card { opacity: 1; scale: 1; }
.modal__close {
  position: absolute; top: 1.2rem; right: 1.6rem; font-size: 3.2rem; line-height: 1;
  color: var(--c-gray-3); z-index: 2;
}
.modal__close:hover { color: var(--c-primary-1); }

.modal-member { display: grid; grid-template-columns: 1fr 1.4fr; gap: 3rem; align-items: start; }
.modal-member__ph img { border-radius: 1rem; aspect-ratio: 3 / 4; object-fit: cover; }
.modal-member__role { font-size: 1.2rem; font-weight: 700; color: var(--c-primary-1); }
.modal-member__name { font-size: 2.6rem; font-weight: 900; line-height: 1.3; }
.modal-member__name small { font-size: 1.2rem; font-weight: 500; color: var(--c-gray-3); margin-left: 1em; }
.modal-member__qa { margin-top: 2rem; }
.modal-member__qa dt { font-weight: 700; color: var(--c-primary-1); font-size: 1.4rem; margin-top: 1.6rem; }
.modal-member__qa dd { font-size: 1.4rem; margin-top: 0.4rem; }
@media (max-width: 767px) { .modal-member { grid-template-columns: 1fr; } .modal__card { padding: 2.4rem; } }

.modal-history { text-align: center; }
.modal-history__year { font-family: var(--f-en2); font-size: 6rem; color: var(--c-primary-1); line-height: 1; }
.modal-history__title { font-size: 2.2rem; font-weight: 900; margin: 1.2rem 0 2rem; }
.modal-history__ph img { border-radius: 1rem; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.modal-history__txt { font-size: 1.5rem; text-align: left; margin-top: 2rem; }
.modal-history .slot-restart {
  margin-top: 3rem; display: inline-block;
  background: var(--c-primary-1); color: #fff; font-weight: 700; font-size: 1.5rem;
  border-radius: 100px; padding: 1.2rem 3.2rem; transition: 0.25s;
}
.modal-history .slot-restart:hover { background: var(--c-primary-2); }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .page-top__gallery__track, .page-top__future__bg .bg-inner,
  .kv-main__people img, .kv-main__scroll .bar::after { animation: none; }
}