/* 会社サイト hamalu.co.jp — ③ 2026-10（本人 10/11「基本ベースあんたに作ってもらって、俺らの要素は入れれるもの入れて」）
   土台＝newpeace の作り（物差し・字の3役・見出しの型・頭・下の帯・ページの題・目次の箱・開け閉めの帯・表・足の段：career/site/ttp/otehon.md の C-2）
   入れたお前らの物＝ロゴ・図形8つ（newpeace の自前のイラストの役）・「ハマる」のアニメ・差し色 #db4720（newpeace の黄色の場所）・写真・今の文 */
:root {
  --ink: #282828;
  --accent: #d2431d;          /* お前らの差し色 #db4720 を、白い小さい字が読める濃さ（白との差 4.6:1・元は 4.3:1）にした。見た目はほぼ同じ */
  --accent-on-dark: #f3906f;  /* 黒い地の上の差し色の字（#db4720 のままだと読みにくい） */
  --tint: #fbeee9;            /* 差し色を薄めた地 */
  --gray: #ebebeb;
  --line: rgba(40,40,40,.2);
  --muted: rgba(40,40,40,.6);
  --paper: #fff;
  --serif: "Crimson Pro", "Times New Roman", serif;
  --en: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --ja: YuGothic, "游ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", Meiryo, sans-serif;
  --hd: 4.4375rem;
  --gut: 1.25rem;
  --out: cubic-bezier(.22,1,.36,1);
}
/* 物差し：スマホは 414px 幅の 16px を 1rem（newpeace と同じ）。PC は 1440px 幅の 16px */
html { font-size: 3.86473vw; -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
@media (min-width: 821px) { html { font-size: clamp(13px, 1.1111vw, 17px); } :root { --gut: 3.75rem; --hd: 5.5rem; } }
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ja); font-weight: 500; font-feature-settings: "palt"; font-size: .9375rem; line-height: 1.75; letter-spacing: .02em; -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere; overflow-x: clip; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.45; text-wrap: balance; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.ln { display: inline-block; max-width: 100%; text-wrap: balance; } /* 手の改行の1行ずつ（build.py の keep_lines） */
p, li, dd { text-wrap: pretty; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 頭：反対色で重なる（mix-blend-mode:difference）・スマホは下に送ると隠れる ---------- */
.hd { position: fixed; z-index: 600; top: 0; left: var(--gut); right: var(--gut); height: var(--hd); display: flex; align-items: center; justify-content: space-between; color: #d7d7d7; mix-blend-mode: difference; pointer-events: none; transition: transform .6s var(--out); }
.hd::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid rgba(255,255,255,.2); }
.hd.-hide { transform: translateY(-100%); }
.hd a { pointer-events: auto; }
.hd__logo svg { display: block; width: 7.8rem; height: 1.5rem; fill: currentColor; }
.hd__nav { display: none; }
@media (min-width: 821px) {
  .hd__logo svg { width: 8.4rem; height: 1.62rem; }
  .hd__nav { display: flex; gap: 2.25rem; font-size: .8125rem; font-weight: 700; }
  .hd__nav a { position: relative; padding-block: .5rem; }
  .hd__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: .2rem; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .4s var(--out); }
  .hd__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
}

/* ---------- スマホの下の固定の帯「Menu｜求人を見る」・PC は右下の丸 ---------- */
.fc { position: fixed; z-index: 1100; right: var(--gut); bottom: 0; display: flex; height: calc(3.75rem + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--ink); border-radius: .3125rem .3125rem 0 0; transition: opacity .3s cubic-bezier(.61,1,.88,1), transform .6s var(--out); }
.fc.-hide { opacity: 0; transform: translateY(3.125rem); pointer-events: none; }
.fc__menu, .fc__cta { display: flex; align-items: center; justify-content: space-between; height: 3.75rem; padding: 0 1.5625rem; color: #fff; }
.fc__menu { width: 7.8125rem; font: 400 .75rem/1 var(--en); letter-spacing: .04em; transition: width .2s var(--out); }
.fc__menu .ic { display: inline-flex; flex-direction: column; justify-content: space-between; width: 1.125rem; height: .3125rem; }
.fc__menu .ic i { display: block; height: 1px; background: #fff; transition: transform .6s var(--out); }
.fc__menu[aria-expanded="true"] { width: 15.5625rem; }
.fc__menu[aria-expanded="true"] .ic i:nth-child(1) { transform: translateY(2px) rotate(15deg); }
.fc__menu[aria-expanded="true"] .ic i:nth-child(2) { transform: translateY(-2px) rotate(-15deg); }
.fc__cta { width: 7.8125rem; justify-content: center; gap: .625rem; border-left: 1px solid #000; font-size: .75rem; font-weight: 700; color: var(--accent-on-dark); }
.fc__menu[aria-expanded="true"] + .fc__cta { display: none; }
.entry { display: none; }
@media (min-width: 821px) {
  .fc { display: none; }
  .entry { position: fixed; z-index: 1100; right: 2.5rem; bottom: 2.5rem; width: 7rem; height: 7rem; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; text-align: center; font-size: .8125rem; font-weight: 700; line-height: 1.4; transition: transform .5s var(--out), opacity .3s; }
  .entry:hover { transform: scale(1.08); }
  .entry small { display: block; font: 500 .625rem/1 var(--en); letter-spacing: .08em; opacity: .85; margin-bottom: .3rem; }
  .entry.-hide { opacity: 0; transform: scale(.6); pointer-events: none; }
}

/* ---------- 全画面のメニュー（スマホ）：0.2秒待って下から 0.5秒で開く・閉じる 0.46秒 ---------- */
.menu { position: fixed; inset: 0; z-index: 1000; pointer-events: none; }
.menu__bk { position: absolute; inset: 0; background: rgba(0,0,0,0); transition: background .4s; }
.menu__ct { position: absolute; left: var(--gut); right: var(--gut); bottom: 0; height: calc(100% - 4.375rem); overflow-y: auto; padding: 3.125rem 2.5rem calc(5.5rem + env(safe-area-inset-bottom, 0px)); background: var(--ink); color: #fff; border-radius: .3125rem .3125rem 0 0; clip-path: inset(100% 0 0 0); transition: clip-path .46s cubic-bezier(.65,0,.35,1); }
.menu.-open { pointer-events: auto; }
.menu.-open .menu__bk { background: rgba(0,0,0,.4); }
.menu.-open .menu__ct { clip-path: inset(0 0 0 0); transition: clip-path .5s .2s cubic-bezier(.65,0,.35,1); }
.menu__ls { border-bottom: 1px solid rgba(255,255,255,.2); }
.menu__ls a { display: flex; align-items: center; justify-content: space-between; height: 3.3125rem; border-top: 1px solid rgba(255,255,255,.2); font-size: .9375rem; }
.menu__ls a span { font: 400 .625rem/1 var(--en); letter-spacing: .06em; color: rgba(255,255,255,.55); }
.menu__sub { margin-top: 1.5625rem; display: grid; gap: .625rem; font-size: .6875rem; color: rgba(255,255,255,.7); }
.menu__mail { margin-top: 1.5625rem; font-size: .8125rem; }
.menu__mail a { color: var(--accent-on-dark); }
html.lock { overflow: hidden; }
@media (min-width: 821px) { .menu { display: none; } }

/* ---------- パンくず・ページの題（明朝の英字が横に流れる） ---------- */
.bread { display: flex; justify-content: flex-end; gap: 1.5625rem; padding: 5.3125rem var(--gut) 0; font-size: .625rem; color: rgba(40,40,40,.5); }
.bread li { position: relative; white-space: nowrap; }
.bread li + li::before { content: ""; position: absolute; left: -1.09rem; top: .55em; width: .5rem; height: 1px; background: rgba(40,40,40,.5); }
.bread li:last-child { color: var(--ink); max-width: 13rem; overflow: hidden; text-overflow: ellipsis; }
.ptl { position: relative; margin-top: -.5rem; }
/* 題の後ろで回る球（今のサイトの見出し動画から字を抜いた物）。地は白なので掛け合わせで溶かす＝パンくずや写真の上でも白い箱が出ない */
.orb { position: absolute; z-index: 0; right: -3rem; top: -2.5rem; width: 17rem; aspect-ratio: 1; pointer-events: none; mix-blend-mode: multiply; filter: brightness(1.03); } /* 掛け合わせは .orb に付ける（送ると動かす transform で .orb が囲いになり、中の video に付けても溶けない）。動画の白は圧縮で (252,254,251) くらいに沈む＝3%明るくして白に戻す（枠が見えない） */
.orb video, .orb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ptl > .mq, .ptl > .ptl__ja, .ptl > .still { z-index: 1; }
.ptl > .ptl__ja { position: relative; }
@media (min-width: 821px) { .orb { right: 8%; top: -5rem; width: 28rem; } }
.mq { position: relative; overflow: hidden; white-space: nowrap; font: 500 7.8125rem/1 var(--serif); height: 8.28125rem; }
.mq__in { display: inline-flex; will-change: transform; }
.mq__t { display: block; padding-right: .5em; transform: scaleX(1.05); transform-origin: left center; letter-spacing: -.02em; }
.ptl__ja { font-size: 2.5rem; line-height: 1.3; margin: 1.75rem var(--gut) 0 1.125rem; letter-spacing: -.04em; }
@media (min-width: 821px) { .bread { padding-top: 8rem; } .mq { font-size: 11rem; height: 11.6rem; } .ptl__ja { font-size: 2.75rem; margin-top: 1.25rem; margin-left: var(--gut); } }

/* ---------- 動きを止める（流れ続ける物・繰り返す動画に付ける＝WCAG 2.2.2。「動きを減らす」の端末は最初から止める） ---------- */
.still { position: absolute; z-index: 5; right: var(--gut); bottom: .5rem; width: 2rem; height: 2rem; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 1px 4px rgba(0,0,0,.18); display: grid; place-items: center; }
.still::before { content: ""; width: .5rem; height: .625rem; border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); }
.still[aria-pressed="true"]::before { width: 0; height: 0; border: 0; border-left: .55rem solid var(--ink); border-top: .33rem solid transparent; border-bottom: .33rem solid transparent; margin-left: .15rem; }
@media (min-width: 821px) { .still { width: 2.25rem; height: 2.25rem; } }

/* ---------- 節の見出しの型：日本語＋小さい英字＋細い線（newpeace） ---------- */
.sec { padding: 5rem var(--gut) 0; }
.st { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .5rem; border-bottom: 1px solid var(--line); padding-bottom: .625rem; }
.st h2 { font-size: 1.5625rem; line-height: 1.25; }
.st span { font: 400 .625rem/1 var(--en); letter-spacing: .02em; }
.big { font-size: 2.25rem; line-height: 1.45455; letter-spacing: .01em; }
.poem p { font-size: 1.2rem; line-height: 1.66667; }
.poem p + p { margin-top: .9rem; }
.prose p { font-size: .9375rem; line-height: 1.86; }
.prose p + p { margin-top: 1.1em; }
.mt-l { margin-top: 2.9375rem; } .mt-m { margin-top: 1.75rem; } .mt-s { margin-top: .875rem; }
@media (max-width: 820px) { .row2 > * + * { margin-top: 2.5rem; } }
@media (min-width: 821px) {
  .sec { padding-top: 9rem; }
  .st h2 { font-size: 1.75rem; } .st span { font-size: .75rem; }
  .big { font-size: 3rem; }
  .poem p { font-size: 1.25rem; }
  .prose { max-width: 40em; }
  .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }
  .row2 > * { min-width: 0; }
}

/* 写真：片側だけ画面の端まで出す（newpeace の最初の写真・挨拶・募集の写真） */
.ph { overflow: hidden; isolation: isolate; background: var(--gray); }
.ph img { width: 100%; height: 100%; object-fit: cover; }
.ph--r { margin-left: var(--gut); margin-right: calc(var(--gut) * -1); border-radius: .3125rem 0 0 .3125rem; }
.ph--l { margin-right: var(--gut); margin-left: calc(var(--gut) * -1); border-radius: 0 .3125rem .3125rem 0; }
.ph--wide { aspect-ratio: 24.625 / 18; }
.ph--sq { aspect-ratio: 1; }
.ph--box { border-radius: .3125rem; aspect-ratio: 3 / 2; }
@media (min-width: 821px) { .row2 .ph--r, .row2 .ph--l { margin-inline: 0; border-radius: .3125rem; } }

/* 錠剤のボタン（newpeace のサービスの黄色の錠剤 → 黒地。応募だけ差し色） */
.pill { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-width: 14rem; height: 2.8125rem; padding: 0 .5rem 0 1.5rem; border-radius: 999px; background: var(--ink); color: #fff; font-size: .8125rem; font-weight: 700; }
.pill i { position: relative; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: #fff; overflow: hidden; flex: none; }
.pill i::before, .pill i::after { content: "→"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); font: 700 .8125rem/1 var(--en); font-style: normal; transition: transform .6s var(--out); }
.pill i::after { transform: translateX(-160%); }
.pill:hover i::before { transform: translateX(160%); }
.pill:hover i::after { transform: translateX(0); }
.pill--accent { background: var(--accent); }
.pill--accent i::before, .pill--accent i::after { color: var(--accent); }
.pill--wide { width: 100%; height: 3.375rem; }

/* ---------- 目次の箱（newpeace の最初の写真の左上） ---------- */
.kv { position: relative; padding-top: 2rem; }
.anc { position: relative; z-index: 3; width: fit-content; max-width: calc(100% - var(--gut)); background: var(--gray); padding: 1.125rem 1.75rem 1rem var(--gut); border-radius: 0 .3125rem .3125rem 0; }
.anc__h { font: 400 .625rem/1 var(--en); color: rgba(40,40,40,.5); letter-spacing: .04em; }
.anc ul { display: grid; gap: .5rem; margin-top: .8125rem; }
.anc a { display: flex; align-items: center; gap: .3125rem; font-size: .875rem; line-height: 1.43; }
.anc a::after { content: "↓"; flex: none; width: 1rem; height: 1rem; border: 1px solid #c4c4c4; border-radius: 50%; display: grid; place-items: center; font: 400 .5rem/1 var(--en); }
.anc a:hover { color: var(--accent); }
.kv > .ph--r { margin-top: -2.8125rem; margin-right: 0; }
@media (min-width: 821px) { .kv { display: grid; grid-template-columns: 22rem 1fr; align-items: start; padding-top: 3rem; } .kv > .ph--r { margin-top: 3rem; margin-left: 0; } }

/* ---------- トップの最初の演出（newpeace：色一面に線が描かれて、幕が上がる）＝差し色一面に白い線でロゴを描く ---------- */
.op { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: #db4720; color: #fff; }
.op__logo { width: min(62vw, 26rem); height: auto; overflow: visible; fill: currentColor; fill-opacity: 0; stroke: currentColor; stroke-width: 3; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.no-js .op, .op.-gone { display: none; }

/* ---------- トップの最初の画面：英字の合言葉＋図形8つが落ちてきて積み重なる（newpeace の「絵が主役で動く」の役） ---------- */
.kv2 { position: relative; height: 100svh; min-height: 34rem; overflow: hidden; }
.kv2__copy { position: relative; z-index: 2; padding: 6.25rem var(--gut) 0; pointer-events: none; }
.kv2__en { font: 500 5.6rem/.92 var(--serif); letter-spacing: -.035em; white-space: nowrap; }
.kv2__l { display: block; transform: scaleX(1.05); transform-origin: left; }
.kv2__l + .kv2__l { padding-left: .62em; }
.kv2__en .c { display: inline-block; white-space: pre; color: var(--c, var(--ink)); }
.js .kv2__en .c { opacity: 0; transform: translateY(12%); transition: opacity .5s, transform .8s var(--out), color .9s; }
.js .kv2__en .c.-in { opacity: 1; transform: none; }
.js .kv2__en .c.-ink { color: var(--ink); }
.kv2__ja { margin-top: 1.5rem; font-size: 1.375rem; font-weight: 700; line-height: 1.5; letter-spacing: .02em; }
.js .kv2__ja { opacity: 0; transform: translateY(.75rem); transition: opacity .8s, transform 1s var(--out); }
.js .kv2__ja.-in { opacity: 1; transform: none; }
.pit { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.pit__b { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 50% 50%; will-change: transform; user-select: none; -webkit-user-drag: none; pointer-events: auto; cursor: grab; visibility: hidden; }
.pit__b.-on { visibility: visible; }
.pit__b.-grab { cursor: grabbing; }
.kv2__scroll { position: absolute; z-index: 2; left: var(--gut); bottom: 1.5rem; font: 400 .625rem/1 var(--en); letter-spacing: .08em; display: flex; align-items: center; gap: .5rem; }
.kv2__scroll::after { content: ""; width: 2.5rem; height: 1px; background: var(--ink); }
.kv2 .still { right: auto; left: calc(var(--gut) + 5.5rem); bottom: .9rem; }
@media (min-width: 821px) {
  .kv2__copy { padding-top: 9rem; }
  .kv2__en { font-size: 10rem; }
  .kv2__ja { font-size: 1.75rem; }
  .kv2 .still { left: calc(var(--gut) + 6.5rem); bottom: 1.1rem; }
}

/* ---------- トップの下の並び（newpeace のトップ：career/site/ttp/otehon.md の C-9） ---------- */
/* 基本理念：「ハマる」のアニメが、小さい枠から画面いっぱいに広がる（送った量で決まる・JS が --p を 0→1 で渡す） */
.zoom { position: relative; height: 190svh; margin-top: 2rem; }
.zoom__stage { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.zoom__box { --p: 0; --e: calc(var(--p) * var(--p) * (3 - 2 * var(--p))); position: relative; overflow: hidden; background: #fff;
  width: calc(100% - 2 * var(--gut) * (1 - var(--e))); height: calc((100vw - 2 * var(--gut)) * .5625 * (1 - var(--e)) + 100svh * var(--e)); /* スマホは図形を縦に並べ直した動画（hero-sp.mp4）で画面いっぱいまで */
  border-radius: calc(.625rem * (1 - var(--e))); }
.zoom__box video, .zoom__box img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1 + .14 * var(--z, 0))); }
.zoom__box picture { display: contents; }
.zoom .still { right: auto; left: .75rem; bottom: .75rem; } /* 右下はスマホの「Menu｜求人を見る」の帯と PC の「求人を見る」の丸 */
.-still .zoom, .no-js .zoom { height: auto; }
.-still .zoom__stage, .no-js .zoom__stage { position: static; height: auto; padding-inline: var(--gut); }
.-still .zoom__box, .no-js .zoom__box { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: .625rem; }
@media (max-width: 820px) { .-still .zoom__box, .no-js .zoom__box { aspect-ratio: 3 / 4; } }

@media (min-width: 821px) { .zoom__box { width: calc(56% + 44% * var(--e)); height: calc(56vw * .5625 * (1 - var(--e)) + 100svh * var(--e)); } }
/* JS がある時：箱は最初から画面いっぱい・枠なし。字の所だけ動画で見せ、図形は canvas で字の後ろから飛び出す（site.js の burstDraw）。止めた時は上の普通の箱に戻る */
.zoom__cv { display: none; }
:root:not(.-still) .zoom.-burst .zoom__box { width: 100%; height: 100%; border-radius: 0; background: none; }
:root:not(.-still) .zoom.-burst .zoom__cv { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
:root:not(.-still) .zoom.-burst video { position: relative; z-index: 1; object-fit: contain; transform: none; }
.-still .zoom video { clip-path: none !important; }

.intro__body { position: relative; padding: 4.5rem var(--gut) 0; overflow: hidden; }
.intro__vw, .vw { position: absolute; z-index: -1; right: -.5rem; top: 2.5rem; font: 500 9rem/1 var(--serif); color: transparent; -webkit-text-stroke: 1px #d9d9d9; writing-mode: vertical-rl; white-space: nowrap; letter-spacing: -.02em; pointer-events: none; }
.sec--vw { position: relative; isolation: isolate; overflow: hidden; padding-bottom: 2rem; }
.lbl { display: flex; align-items: center; gap: .75rem; }
.lbl h2 { order: 2; font-size: .75rem; font-weight: 700; color: var(--muted); }
.lbl span { font: 400 .75rem/1 var(--en); letter-spacing: .04em; display: flex; align-items: center; gap: .75rem; }
.lbl span::after { content: ""; width: 5rem; height: 1px; background: var(--line); }
.intro__big { margin-top: 1.5rem; font-size: 2.25rem; font-weight: 700; line-height: 1.45; letter-spacing: .01em; }
@media (min-width: 821px) { .intro__body { padding-top: 8rem; padding-left: calc(var(--gut) + 8%); } .intro__vw, .vw { font-size: 16rem; right: 4%; } .intro__big { font-size: 3.25rem; } }

/* 大事にしていること：大きい英字＋手描きの円4つと矢印（入ると線が描かれる） */
.vals__en { font: 500 4.75rem/1 var(--serif); letter-spacing: -.03em; transform: scaleX(1.05); transform-origin: left; }
.vals__ja { margin-top: 1rem; font-size: 1.0625rem; }
.ring { position: relative; margin: 2.5rem auto 0; max-width: 34rem; aspect-ratio: 1; }
.ring__ls { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "a b" "c d"; } /* 4つは順番でなく並び立つ物＝矢印も番号も付けない（本人 10/12「valueはこういう順路みたいなものではない」） */
.ring__ls li { position: relative; display: grid; place-content: center; justify-items: center; text-align: center; padding: 1rem; }
.ring__ls li:nth-child(1) { grid-area: a; } .ring__ls li:nth-child(2) { grid-area: b; } .ring__ls li:nth-child(3) { grid-area: c; } .ring__ls li:nth-child(4) { grid-area: d; }
.ring__c { position: absolute; inset: -9%; width: 118%; height: 118%; overflow: visible; fill: none; stroke: var(--ink); stroke-linecap: round; }
.ring__c path { stroke-width: 1.1; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: .75; }
.ring__c path + path { stroke-width: .7; opacity: .35; }
.ring__ls b { font-size: 1.75rem; line-height: 1.2; }
.ring__ls .t { display: block; margin-top: .5rem; font-size: .6875rem; line-height: 1.6; }
.ring__ls .t span { display: block; }
.js .ring.rv { opacity: 1; transform: none; }
.no-js .ring__c path { stroke-dashoffset: 0; } /* JS がある時は送った量で描く（site.js の ringSet）＝止めた時は描いた形 */
.js .ring li > :not(svg) { opacity: 0; }
@media (min-width: 821px) {
  .vals { display: grid; grid-template-columns: 1fr 1.1fr; gap: 4rem; align-items: center; }
  .vals__en { font-size: 9rem; } .vals__ja { font-size: 1.5rem; }
  .ring { margin-top: 0; width: 100%; } .ring__ls b { font-size: 2.25rem; } .ring__ls .t { font-size: .875rem; }
}

/* 重なっていくカード（newpeace のサービスの節）：1枚ずつ上に貼りつき、次のカードが上に重なる。下のカードは少し縮んで暗くなる */
.stack { margin-top: 6rem; padding-bottom: 1px; }
.sk { position: sticky; top: var(--sk-top, 0px); border-radius: .875rem .875rem 0 0; overflow: hidden; transform-origin: center top; padding-bottom: 3rem; }
.sk + .sk { margin-top: 40vh; } /* 前のカードが貼りついてから、画面の4割ぶん送ると次のカードが上がってくる（10/12 本人「次のファイルが上がってくるのが早すぎる」・元は 2.5rem）。間は透明＝前のカードがそのまま見えている */
.sk--a { background: #f7e1d3; }
.sk--b { background: var(--ink); color: #fff; }
.sk--c { background: var(--accent); color: #fff; padding-bottom: 5rem; }
.sk__shade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.sk__mq { overflow: hidden; white-space: nowrap; padding-top: 1.25rem; border-bottom: 1px solid currentColor; border-color: rgba(127,127,127,.35); }
.sk__t { display: inline-flex; align-items: center; gap: .6em; padding-right: .6em; font: 500 6.25rem/1.15 var(--serif); letter-spacing: -.02em; }
.sk__t img { width: .9em; height: auto; }
.sk__body { padding: 2rem var(--gut) 0; }
.sk__body > * + * { margin-top: 2rem; }
.sk .st { border-color: rgba(127,127,127,.35); }
.sk--b .pill:not(.pill--accent), .sk--c .pill:not(.pill--white) { background: var(--ink); }
.sk--c .pill:not(.pill--white) i::before, .sk--c .pill:not(.pill--white) i::after { color: var(--ink); }
.pill--white { background: #fff; color: var(--ink); }
.pill--white i { background: var(--ink); }
.pill--white i::before, .pill--white i::after { color: #fff; }
.sk--c .person__mini { background: rgba(255,255,255,.14); }
@media (min-width: 821px) {
  .stack { margin-top: 9rem; padding-inline: calc(var(--gut) / 2); }
  .sk__t { font-size: 9rem; }
  .sk__body { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; padding-top: 3rem; }
  .sk__body > * + * { margin-top: 0; }
  .sk { padding-bottom: 4rem; }
}

/* 写真の列（newpeace の「We are NEWPEACE」）：黒い地に写真と図形の列が上下に逆向きに動き、ロゴが線で描かれる */
.we { position: relative; height: 38rem; overflow: hidden; background: var(--ink); display: grid; place-items: center; }
.we::after { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(closest-side, rgba(0,0,0,.42), rgba(0,0,0,.12)); pointer-events: none; } /* ロゴの線が明るい写真の上でも読めるように */
.we__grid { position: absolute; left: 50%; top: 50%; width: 150%; display: grid; grid-template-columns: repeat(3, 1fr); gap: .625rem; transform: translate(-50%, -50%); }
.we__col { display: grid; gap: .625rem; align-content: start; will-change: transform; }
.we__col:nth-child(2) { margin-top: -6rem; }
.we__t { overflow: hidden; border-radius: .5rem; aspect-ratio: 3 / 4; background: #3a3a3a; }
.we__t img { width: 100%; height: 100%; object-fit: cover; }
.we__sh { display: grid; place-items: center; width: 100%; height: 100%; background: var(--bg); }
.we__sh img { width: 62%; height: auto; object-fit: contain; }
.we__logo { position: relative; z-index: 2; width: min(80%, 44rem); height: auto; overflow: visible; fill: #fff; fill-opacity: 0; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 10px rgba(0,0,0,.35)); }
.we__logo path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.we.-in .we__logo path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--out); }
.we.-in .we__logo path:nth-child(2) { transition-delay: .1s; } .we.-in .we__logo path:nth-child(3) { transition-delay: .2s; } .we.-in .we__logo path:nth-child(4) { transition-delay: .3s; } .we.-in .we__logo path:nth-child(5) { transition-delay: .4s; } .we.-in .we__logo path:nth-child(6) { transition-delay: .5s; } .we.-in .we__logo path:nth-child(7) { transition-delay: .6s; }
.we.-in .we__logo { fill-opacity: 1; transition: fill-opacity .6s 1.4s; }
.no-js .we__logo path { stroke-dashoffset: 0; } .no-js .we__logo { fill-opacity: 1; }
@media (min-width: 821px) { .we { height: 46rem; } .we__grid { width: 90%; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .we__col { gap: 1rem; } .we__t { aspect-ratio: 4 / 3; } }

.sec + .we { margin-top: 6rem; }
@media (min-width: 821px) { .sec + .we { margin-top: 9rem; } }
.news__more { display: flex; justify-content: center; margin-top: 2rem; }

/* 面談でお話しする人（newpeace の代表の挨拶の形） */
.person__name { margin-top: 2.5rem; }
.person__name b { display: block; font-size: 1.0625rem; }
.person__name small { display: block; font: 400 .75rem/1 var(--en); opacity: .6; padding-top: .5rem; }
.person__role { display: block; font-size: .75rem; color: var(--muted); margin-bottom: .25rem; }
.person__mini { display: flex; gap: 1rem; align-items: center; margin-top: 2rem; padding: 1rem; border-radius: .3125rem; background: var(--gray); }
.person__mini img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; flex: none; }
.person__mini p { font-size: .8125rem; line-height: 1.7; }

/* ---------- 募集の帯（開け閉め・開いた帯は頭の下に貼りつく） ---------- */
.jobs { position: relative; margin-top: 1rem; }
.job { position: relative; width: 23.375rem; max-width: calc(100% + var(--gut)); margin-left: auto; margin-right: calc(var(--gut) * -1); margin-top: -4rem; }
.job + .job { margin-top: 0; }
.jt { position: relative; z-index: 4; display: flex; justify-content: space-between; align-items: center; gap: 1rem; width: 100%; padding: 1.3125rem var(--gut) 1.25rem; background: var(--accent); color: #fff; text-align: left; border-radius: .3125rem 0 0 0; transition: top .5s var(--out); }
.jt.-open { position: sticky; top: var(--hd); }
body.-scroll .jt.-open { top: 0; }
.jt__n { font-size: 1.125rem; line-height: 1.5; font-weight: 700; }
.jt__n small { display: block; font: 400 .625rem/1.2 var(--en); letter-spacing: .04em; opacity: .8; margin-bottom: .3rem; }
.jt__ic { position: relative; flex: none; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--ink); transition: transform .2s; }
.jt__ic::before, .jt__ic::after { content: ""; position: absolute; left: 50%; top: 50%; width: .75rem; height: 1px; margin-left: -.375rem; background: #fff; transition: transform .3s; }
.jt__ic::after { transform: rotate(90deg); }
.jt.-open .jt__ic { transform: rotate(90deg); }
.jt.-open .jt__ic::after { transform: rotate(90deg) scaleX(0); }
.jc { overflow: hidden; height: 0; background: var(--tint); }
.no-js .jc, .jc.-static { height: auto; }
.jc__in { padding: 1.5rem var(--gut) 2rem; }
.jc__tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: 1rem; }
.tag { display: inline-block; font-size: .6875rem; line-height: 1; padding: .375rem .625rem; border-radius: 999px; border: 1px solid var(--ink); font-weight: 700; }
.tag--on { background: var(--accent); border-color: var(--accent); color: #fff; }
.jc .pill { margin-top: 1.5rem; }
@media (min-width: 821px) { .job { width: 60%; margin-top: -6rem; } }

/* 流れ（番号は本当の順番）：手描きの円を差し色の矢印でつなぐ（トップの「大事にしていること」と同じ線）。スマホは縦、PC は横に4つ */
.steps { margin-top: 2rem; }
.steps li { display: grid; grid-template-columns: 5.5rem 1fr; grid-template-rows: auto 1fr; column-gap: 1.25rem; }
.steps__m { position: relative; grid-area: 1 / 1; display: grid; place-items: center; width: 5.5rem; aspect-ratio: 1; font: 500 1.75rem/1 var(--serif); color: var(--accent); }
.steps__c { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--ink); stroke-linecap: round; }
.steps__c path { stroke-width: 2.6; stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: .75; }
.steps__c path + path { stroke-width: 1.6; opacity: .35; }
.steps__a { grid-area: 2 / 1; align-self: center; justify-self: center; width: 2.5rem; height: 2.5rem; margin: .375rem 0; overflow: visible; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.steps__a .-r { display: none; }
.steps__a path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.steps__a .h { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; }
.steps__t { grid-area: 1 / 2 / 3 / 3; padding: 1.5rem 0 1.75rem; }
.steps h3 { font-size: 1.0625rem; }
.steps p { margin-top: .375rem; font-size: .875rem; line-height: 1.8; }
.js .steps.rv { opacity: 1; transform: none; }
.steps li { --i: 0; }
.steps.-in .steps__c path, .no-js .steps__c path, .no-js .steps__a path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--out) calc(var(--i) * .35s); }
.steps.-in .steps__c path + path { transition-delay: calc(var(--i) * .35s + .2s); }
.steps.-in .steps__a path { stroke-dashoffset: 0; transition: stroke-dashoffset .45s var(--out) calc(var(--i) * .35s + .75s); }
.steps.-in .steps__a .h, .no-js .steps__a .h { opacity: 1; transition: opacity .2s calc(var(--i) * .35s + 1.1s); }
.js .steps__m span, .js .steps__t { opacity: 0; transition: opacity .8s calc(var(--i) * .35s + .3s); }
.steps.-in .steps__m span, .steps.-in .steps__t { opacity: 1; }
@media (min-width: 821px) {
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  .steps li { position: relative; display: block; }
  .steps__m { width: 7rem; font-size: 2.25rem; }
  .steps__c path { stroke-width: 2; } .steps__c path + path { stroke-width: 1.3; }
  .steps__a { position: absolute; left: calc(50% + 2.5rem); top: 1.5rem; width: 4rem; height: 4rem; margin: 0; }
  .steps__a .-d { display: none; } .steps__a .-r { display: inline; }
  .steps__t { padding: 1.5rem 0 0; }
}

/* よくある質問（開け閉め） */
.faq { margin-top: 1.75rem; border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1.5rem 1fr 1.875rem; gap: .5rem; align-items: start; padding: 1.25rem 0; font-size: .9375rem; font-weight: 700; line-height: 1.6; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; font: 500 1.375rem/1.1 var(--serif); color: var(--accent); }
.faq summary::after { content: "+"; display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; background: var(--gray); font: 400 1rem/1 var(--en); transition: transform .3s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 2.375rem 1.5rem 2rem; font-size: .875rem; line-height: 1.85; }

/* 会社概要の表（左に項目・右に中身・区切り線） */
.dl { margin-top: 1.75rem; border-bottom: 1px solid var(--line); }
.dl div { display: grid; grid-template-columns: 6.25rem 1fr; gap: 1rem; padding: 1.125rem 0; border-top: 1px solid var(--line); }
.dl dt { font-size: .7375rem; color: var(--muted); padding-top: .15em; }
.dl dd { font-size: .85rem; font-weight: 700; line-height: 1.75; }
.dl dd a { color: var(--accent); border-bottom: 1px solid currentColor; }
@media (min-width: 821px) { .dl div { grid-template-columns: 12rem 1fr; } .dl dt { font-size: .8125rem; } .dl dd { font-size: .9375rem; } }

/* 求人ページ（/3/◯◯/・build.py の job_pages）：上に条件の表、下に Airワークの原稿をそのまま（行・記号も原稿のまま） */
.jd { max-width: 48rem; }
.jd__h { font-size: 1.25rem; line-height: 1.6; font-weight: 700; text-wrap: balance; }
.gk { padding: 1.5rem 1.25rem; border: 1px solid var(--line); border-radius: .875rem; font-size: .875rem; line-height: 1.85; }
.gk p { margin: 0; overflow-wrap: anywhere; }
.gk__sp { height: .9em; }
.gk__rule { white-space: nowrap; overflow: hidden; color: var(--muted); line-height: 1.2; } /* 罫線の行は1行に収めて端で切る（字は消さない） */
.jd__more { margin-top: 3rem; font-size: .875rem; }
.jd__more p { font-weight: 700; } .jd__more ul { margin-top: .5rem; display: grid; gap: .375rem; } .jd__more a, .jobl a { color: var(--accent); border-bottom: 1px solid currentColor; }
.jobl { margin: 1rem 0 1.25rem; display: grid; gap: .5rem; font-size: .875rem; font-weight: 700; }
/* LINE の友だち追加（リンクと手元で作った QR の絵だけ・LINE のスクリプトは読まない）。QR はスマホでは出さない＝同じ画面で読めないので */
.lineb { margin-top: 2.5rem; padding: 1.5rem 1.25rem; border-radius: .875rem; background: #f7e1d3; display: flex; align-items: center; gap: 1.5rem; }
.lineb__t { flex: 1; min-width: 0; } .lineb .pill { max-width: 22rem; } .lineb__t p { font-size: .875rem; line-height: 1.8; margin-bottom: 1rem; } .lineb__t p a { color: var(--accent); border-bottom: 1px solid currentColor; }
.lineb__qr { display: none; width: 8rem; height: 8rem; background: #fff; border-radius: .5rem; padding: .375rem; flex: none; }
@media (min-width: 821px) { .jd__h { font-size: 1.625rem; } .gk { padding: 2.5rem; font-size: .9375rem; } .lineb { padding: 2rem 2.5rem; } .lineb__qr { display: block; } }

/* 職種のイメージ（お前らの写真・横に送る） */
.roles { display: flex; gap: .75rem; overflow-x: auto; margin: 2.5rem calc(var(--gut) * -1) 0; padding: 0 var(--gut) 1rem; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut); }
.roles figure { flex: none; width: 13rem; scroll-snap-align: start; }
.roles img { border-radius: .3125rem; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.roles figcaption { margin-top: .5rem; font: 500 .625rem/1 var(--en); letter-spacing: .08em; }

/* 価値観の一覧（/1） */

/* お知らせの一覧 */
.news { margin-top: 1.75rem; border-bottom: 1px solid var(--line); }
.news a { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1rem; align-items: center; padding: 1.25rem 0; border-top: 1px solid var(--line); }
.news time { font: 500 .75rem/1 var(--en); letter-spacing: .04em; }
.news .tag { justify-self: start; }
.news b { grid-column: 1 / -1; font-size: .9375rem; line-height: 1.6; }
.news a:hover b { color: var(--accent); }
.more { display: flex; justify-content: flex-end; margin-top: 1.25rem; }
.more a { font: 500 .75rem/1 var(--en); letter-spacing: .06em; display: inline-flex; align-items: center; gap: .5rem; }
.more a::after { content: "→"; }

/* 記事・ポリシーの本文 */
.doc { padding: 2.5rem var(--gut) 0; max-width: 46rem; margin-inline: auto; }
.doc__meta { display: flex; gap: .75rem; align-items: center; font: 500 .75rem/1 var(--en); }
.doc h1 { font-size: 1.5625rem; margin-top: 1rem; }
.doc h2 { font-size: 1.0625rem; margin-top: 2.5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.doc p { font-size: .9375rem; line-height: 1.9; margin-top: 1em; }
.doc ul { list-style: disc; padding-left: 1.4em; margin-top: .75em; }
.doc ul li { font-size: .9375rem; line-height: 1.85; }
.doc img { border-radius: .3125rem; margin-top: 1.5rem; }
.doc .sign { margin-top: 3rem; text-align: right; font-size: .8125rem; }
.doc .note { font-size: .8125rem; color: var(--muted); }
.doc .closed { margin-top: 1.5rem; padding: 1.5rem; border-radius: .3125rem; background: var(--gray); }
.doc a:not(.pill) { color: var(--accent); border-bottom: 1px solid currentColor; }
/* 決算公告の貸借対照表（科目と金額の2列・金額は桁をそろえる） */
.doc .bs-wrap { margin-top: 1rem; overflow-x: auto; }
.doc .bs { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.6; font-variant-numeric: tabular-nums; }
.doc .bs caption { text-align: right; font-size: .75rem; color: var(--muted); padding-bottom: .25rem; }
.doc .bs th, .doc .bs td { padding: .4rem .25rem; border-bottom: 1px solid var(--line); text-align: left; font-weight: 500; }
.doc .bs td { text-align: right; white-space: nowrap; }
.doc .bs .h th { padding-top: 1.25rem; font-weight: 700; border-bottom-color: var(--ink); }
.doc .bs .s th, .doc .bs .s2 th, .doc .bs .s3 th { color: var(--muted); }
.doc .bs .s2 th, .doc .bs .r th, .doc .bs .t th { padding-left: 1em; }
.doc .bs .s3 th { padding-left: 2em; }
.doc .bs .r3 th { padding-left: 3em; }
.doc .bs .g th, .doc .bs .g td { font-weight: 700; }
.doc .bs-ni { text-align: right; font-weight: 700; }
.back { display: inline-flex; gap: .5rem; margin-top: 3rem; font: 500 .75rem/1 var(--en); letter-spacing: .04em; }
.back::before { content: "←"; }

/* ---------- 足：上の段（流れる英字・色のカード2枚・Follow）が奥へ沈み、下の段（差し色の板）がせり上がる ---------- */
footer { overflow: hidden; background: var(--ink); } /* 上の段が沈んだ奥に見える色 */
.mqw { position: relative; }
.foot-cv { position: relative; z-index: 0; padding: 6.25rem 0 3.75rem; background: var(--paper); transform-origin: center 12.5rem; }
.foot-cv__shade { position: absolute; inset: 0; z-index: 9; background: #000; opacity: 0; pointer-events: none; }
.cards { display: grid; gap: .75rem; padding: 2rem var(--gut) 0; }
.card { position: relative; display: block; min-height: 11.5rem; padding: 1.5rem 1.5rem 1.25rem; border-radius: .3125rem; overflow: hidden; color: #fff; }
.card--entry { background: var(--accent); }
.card--contact { background: var(--ink); }
.card__en { position: relative; z-index: 2; font: 500 2.5rem/1 var(--serif); letter-spacing: -.01em; }
.card__ja { position: relative; z-index: 2; display: block; margin-top: .5rem; font-size: .875rem; font-weight: 700; }
.card__p { position: relative; z-index: 2; margin-top: .75rem; font-size: .75rem; line-height: 1.7; max-width: 15rem; }
.card__mail { position: relative; z-index: 2; margin-top: .75rem; font-size: .8125rem; font-weight: 700; }
.card__mail a { color: var(--accent-on-dark); border-bottom: 1px solid currentColor; }
.card__go { position: absolute; z-index: 2; right: 1.25rem; bottom: 1.25rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; font: 700 .875rem/1 var(--en); }
.card > img { position: absolute; right: -1rem; top: -1.5rem; width: 6.5rem; transform: rotate(12deg); transition: transform .8s var(--out); }
.card:hover > img { transform: rotate(0deg) scale(1.06); }
.card__links { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: 1rem; font-size: .75rem; }
.card__links a { border-bottom: 1px solid rgba(255,255,255,.5); }
.follow { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding: 2rem var(--gut) 0; font: 500 .75rem/1 var(--en); }
.follow b { font-size: .625rem; letter-spacing: .08em; color: var(--muted); margin-right: .5rem; font-weight: 500; }
@media (min-width: 821px) { .cards { grid-template-columns: 1fr 1fr; } .card { min-height: 17rem; padding: 2.25rem; } .card__en { font-size: 3.75rem; } .card > img { width: 9rem; } }
.foot { position: relative; z-index: 1; background: var(--accent); color: #fff; padding: 3.75rem var(--gut) calc(6rem + env(safe-area-inset-bottom, 0px)); transform-origin: center -6.25rem; }
.foot__logo svg { width: 100%; height: auto; fill: #fff; display: block; }
.foot__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; margin-top: 3rem; }
.foot__nav a { display: block; font-size: .8125rem; font-weight: 700; }
.foot__nav a span { display: block; font: 400 .625rem/1 var(--en); letter-spacing: .06em; margin-bottom: .35rem; }
.foot__sub { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.35); font-size: .6875rem; }
.foot__copy { margin-top: 1.25rem; font: 400 .625rem/1 var(--en); letter-spacing: .04em; }
.foot__top { position: absolute; right: var(--gut); top: 1.25rem; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); display: grid; place-items: center; font: 400 .875rem/1 var(--en); }
@media (min-width: 821px) { .foot { padding: 5rem var(--gut) 3rem; } .foot__logo svg { width: 70%; } .foot__nav { grid-template-columns: repeat(5, auto); justify-content: start; gap: 2.5rem; } }

/* 文字に走る色（押せる英字に指を乗せると1字ずつ色が走る） */
.run .c { display: inline-block; transition: color .6s; }
.run .c.-on { color: var(--accent); transition-duration: .3s; }
.card--entry .run .c.-on { color: var(--ink); }
.card--contact .run .c.-on { color: var(--accent-on-dark); }

/* 大きい字（ページの題・大きいコピー）：1字ずつ差し色4色で出て、地の字の色に落ち着く（JS で字を分けた時だけ隠す） */
.pop.-split .c { opacity: 0; }
.pop.-split.-in .c { animation: pop 1.5s var(--out) calc(var(--k) * min(.06s, 1.2s / var(--n))) both; }
.sk--c .pop.-split.-in .c { animation-name: pop-plain; } /* 差し色の地では色が消えるので、出るだけ */
@keyframes pop { 0% { opacity: 0; color: var(--c); } 15% { opacity: 1; color: var(--c); } 45% { color: var(--c); } 100% { opacity: 1; } }
@keyframes pop-plain { 0% { opacity: 0; } 100% { opacity: 1; } }
.-still .pop .c { opacity: 1 !important; animation: none !important; }

/* スクロールで現れる（JS がある時だけ隠しておく） */
.js .rv { opacity: 0; transform: translateY(1.5rem); transition: opacity .9s var(--out), transform .9s var(--out); }
.js .rv.-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .rv { opacity: 1; transform: none; transition: none; }
  .js .kv2__en .c, .js .kv2__ja { opacity: 1; transform: none; transition: none; color: var(--ink); }
  .hd, .fc, .menu__ct, .jt { transition: none; }
  .ring__c path, .we__logo path { stroke-dashoffset: 0 !important; transition: none !important; }
  .js .ring li > :not(svg) { opacity: 1 !important; transition: none !important; }
  .we__logo { fill-opacity: 1 !important; transition: none !important; }
  .steps__c path, .steps__a path { stroke-dashoffset: 0 !important; transition: none !important; }
  .steps__a .h, .js .steps__m span, .js .steps__t, .pop .c { opacity: 1 !important; transition: none !important; animation: none !important; }
}