/* =============================================================
acts.css — 区画ごとの「動きの主役」と「背景の質感」
・HTML に data-bg（背景）と data-act（主役）を書くと acts.js が組み立てる
・既定は「最後の状態」。動かすのは html.acts-on のときだけ
・演出レイヤーはすべて pointer-events:none
============================================================= */
/* ---------- 土台 ---------- */
.has-acts-bg { position: relative; isolation: isolate; overflow: clip; }
.has-acts-bg > .container,
.has-acts-bg > .footer-inner { position: relative; z-index: 1; }
.acts-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.acts-bg > * { position: absolute; pointer-events: none; }
/* フィルムの粒（区画の中だけ） */
.acts-grain { inset: -60px; opacity: .08;
background-image: url("data:image/svg+xml;utf8,");
background-size: 160px 160px; }
.acts-on .acts-grain { animation: actsGrain .9s steps(6) infinite; }
@keyframes actsGrain {
0% { transform: translate(0, 0); } 20% { transform: translate(-22px, 14px); } 40% { transform: translate(18px, -26px); }
60% { transform: translate(-30px, -8px); } 80% { transform: translate(26px, 22px); } 100% { transform: translate(0, 0); }
}
/* 指（マウス）に寄ってくる光。スマホではゆっくり勝手に巡る */
.acts-light { left: 0; top: 0; width: 1040px; height: 1040px; margin: -520px 0 0 -520px; will-change: transform;
background: radial-gradient(circle, rgba(201,168,76,.15), transparent 62%); transform: translate3d(50vw, 30vh, 0); }
@media (hover: none) { .acts-on .acts-light { animation: actsWander 14s var(--ease-smooth) infinite alternate; } }
@keyframes actsWander { 0% { transform: translate3d(18vw, 20vh, 0); } 50% { transform: translate3d(82vw, 60vh, 0); } 100% { transform: translate3d(30vw, 110vh, 0); } }
/* --- 金の霧 --- */
.ab-fog { inset: 0; }
.ab-fog b { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; opacity: .9;
background: radial-gradient(circle, rgba(201,168,76,.24) 0%, rgba(139,105,20,.1) 38%, transparent 66%); }
.ab-fog b:nth-child(1) { left: -25vmax; top: -30vmax; }
.ab-fog b:nth-child(2) { right: -30vmax; top: 10%; width: 60vmax; height: 60vmax; }
.ab-fog b:nth-child(3) { left: 20%; bottom: -40vmax; width: 80vmax; height: 50vmax; }
.acts-on .ab-fog b:nth-child(1) { animation: actsFogA 19s var(--ease-smooth) infinite alternate; }
.acts-on .ab-fog b:nth-child(2) { animation: actsFogB 23s var(--ease-smooth) infinite alternate; }
.acts-on .ab-fog b:nth-child(3) { animation: actsFogA 27s var(--ease-smooth) infinite alternate-reverse; }
@keyframes actsFogA { to { transform: translate(18vmax, 12vmax) scale(1.25); } }
@keyframes actsFogB { to { transform: translate(-16vmax, -10vmax) scale(.8); } }
/* --- 光の筋（斜めに走る金の線） --- */
/* 背景の位置（background-position）を動かすと毎コマ描き直しになるので、
模様を貼った板そのものを transform で動かす（見え方は同じ） */
.ab-beams { inset: -20% -40%; transform: rotate(-24deg); opacity: .9; overflow: hidden; }
.ab-beams::before { content: ''; position: absolute; top: 0; bottom: 0; left: -1400px; right: 0;
background:
linear-gradient(90deg, transparent 0 18%, rgba(232,213,163,.17) 18.4%, transparent 19.4%,
transparent 46%, rgba(201,168,76,.26) 46.2%, transparent 46.8%,
transparent 71%, rgba(232,213,163,.13) 71.6%, transparent 73.4%);
background-size: 1400px 100%; }
.ab-beams::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 200%;
background: linear-gradient(90deg, transparent 40%, rgba(232,213,163,.14) 49.6%, rgba(255,246,220,.26) 50%, rgba(232,213,163,.14) 50.4%, transparent 60%);
background-size: 100% 100%; background-repeat: no-repeat; transform: translate3d(-80%, 0, 0); }
.acts-on .ab-beams::before { animation: actsBeams 26s linear infinite; }
.acts-on .ab-beams::after { animation: actsSweep 7s var(--ease-smooth) infinite; }
@keyframes actsBeams { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(1400px, 0, 0); } }
@keyframes actsSweep { 0%, 20% { transform: translate3d(-80%, 0, 0); } 80%, 100% { transform: translate3d(30%, 0, 0); } }
/* 画面の外にある区画の背景は中身ごと描かない（acts.js が is-off を付ける） */
.acts-bg.is-off > * { display: none; }
/* --- 活版（縦の段組み線＋上から下へ走る光の帯） --- */
.ab-press { inset: 0;
background:
repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(201,168,76,.13) calc(25% - 1px) 25%),
repeating-linear-gradient(0deg, transparent 0 47px, rgba(255,255,255,.018) 47px 48px); }
.ab-press::after { content: ''; position: absolute; left: 0; right: 0; height: 160px; top: -160px;
background: linear-gradient(180deg, transparent, rgba(201,168,76,.14) 70%, rgba(232,213,163,.5) 98%, transparent); }
.acts-on .ab-press::after { animation: actsScan 6.5s var(--ease-smooth) infinite; }
@keyframes actsScan { 0% { transform: translateY(0); } 100% { transform: translateY(calc(100vh + 1400px)); } }
/* --- 地紋（紙幣のような金の細線） --- */
.ab-guil { left: 50%; top: 50%; width: 1500px; height: 1500px; margin: -750px 0 0 -750px; opacity: .9; }
.ab-guil svg { width: 100%; height: 100%; display: block; }
.acts-on .ab-guil { animation: actsSpin 140s linear infinite; }
@keyframes actsSpin { to { transform: rotate(360deg); } }
/* --- 上からの照明と舞う金の塵 --- */
.ab-spot { inset: 0;
background: radial-gradient(60% 75% at 50% -8%, rgba(232,213,163,.26), rgba(201,168,76,.08) 45%, transparent 72%); }
.ab-spot b { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--gold-light); opacity: 0; box-shadow: 0 0 8px rgba(232,213,163,.9); }
.acts-on .ab-spot b { animation: actsMote var(--d, 9s) var(--ease-smooth) infinite; animation-delay: var(--dl, 0s); }
@keyframes actsMote { 0% { transform: translate(0, 0); opacity: 0; } 25% { opacity: .8; } 100% { transform: translate(var(--tx, 40px), 220px); opacity: 0; } }
/* --- 暗い写真（奥でゆっくり動く） --- */
.ab-photo { inset: -12% 0; background-size: cover; background-position: center; opacity: .34; filter: grayscale(.5) sepia(.6) brightness(.55) contrast(1.1); }
.ab-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--black) 0%, rgba(10,10,10,.55) 35%, rgba(10,10,10,.6) 65%, var(--black) 100%); }
/* --- 立ちのぼる火の粉 --- */
.ab-embers { inset: 0; }
.ab-embers b { position: absolute; bottom: -10px; left: var(--x, 50%); width: var(--s, 2px); height: var(--s, 2px); border-radius: 50%;
background: #f3dfa6; box-shadow: 0 0 10px 1px rgba(232,213,163,.8); opacity: 0; }
.acts-on .ab-embers b { animation: actsEmber var(--d, 8s) linear infinite; animation-delay: var(--dl, 0s); }
@keyframes actsEmber { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: .9; } 70% { opacity: .6; }
100% { transform: translate(var(--tx, 30px), -110vh); opacity: 0; } }
/* --- 遠近の金の格子（床） --- */
.ab-grid { left: -50%; right: -50%; bottom: -10%; height: 70%; transform-origin: 50% 100%; transform: perspective(500px) rotateX(64deg);
background-image: linear-gradient(rgba(201,168,76,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(201,168,76,.22) 1px, transparent 1px);
background-size: 64px 64px;
-webkit-mask-image: linear-gradient(0deg, #000 0%, transparent 85%); mask-image: linear-gradient(0deg, #000 0%, transparent 85%); }
.acts-on .ab-grid { animation: actsGrid 3.2s linear infinite; }
@keyframes actsGrid { to { background-position: 0 64px; } }
/* --- 地平線の光（フッター） --- */
.ab-horizon { left: 0; right: 0; bottom: 0; height: 100%;
background: radial-gradient(70% 55% at 50% 100%, rgba(201,168,76,.18), rgba(139,105,20,.06) 50%, transparent 75%); }
.ab-horizon::before { content: ''; position: absolute; left: 8%; right: 8%; bottom: 34%; height: 1px;
background: linear-gradient(90deg, transparent, rgba(232,213,163,.7), transparent); box-shadow: 0 0 22px 2px rgba(201,168,76,.45); }
.acts-on .ab-horizon::before { animation: actsBreath 5s var(--ease-smooth) infinite alternate; }
@keyframes actsBreath { from { opacity: .35; transform: scaleX(.7); } to { opacity: 1; transform: scaleX(1); } }
/* --- 横に流れる巨大な白抜き文字 --- */
.ab-word { left: 0; top: 50%; transform: translateY(-50%); white-space: nowrap;
font-family: var(--font-serif-en); font-weight: 300; font-size: clamp(110px, 22vw, 340px); letter-spacing: .08em; line-height: 1;
color: transparent; -webkit-text-stroke: 1px rgba(201,168,76,.26); }
/* ============================================================
主役
============================================================ */
/* 粒から組み上がる数字 */
.act-forge-cv { position: absolute; pointer-events: none; z-index: 2; }
[data-forge] { position: relative; }
/* 金の板（事業カード） */
.acts-on [data-act~="plates"] .pillar-grid { perspective: 1500px; }
.acts-on [data-act~="plates"] .pillar-card { will-change: transform; }
.act-sheen { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
background: linear-gradient(115deg, transparent 30%, rgba(232,213,163,.28) 47%, rgba(255,250,235,.4) 50%, rgba(232,213,163,.2) 53%, transparent 68%);
transform: translateX(-120%); }
.is-struck > .act-sheen { animation: actSheen 1.3s var(--ease-expo) forwards; }
@keyframes actSheen { 0% { opacity: 1; transform: translateX(-120%); } 100% { opacity: 1; transform: translateX(120%); } }
.pillar-card.is-struck::before { transform: scaleX(1); }
/* 写真の窓 */
.act-win { position: relative; }
.act-win-line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; z-index: 3; pointer-events: none;
background: linear-gradient(90deg, transparent, var(--gold-light), transparent); box-shadow: 0 0 18px 2px rgba(232,213,163,.7); transform: scaleX(0); opacity: 0; }
/* 1字ずつ組み上がる見出し */
.act-ch { display: inline-block; white-space: pre; }
/* assemble：お知らせの見出しが1字ずつ起き上がる（acts.js が asm-wait → asm-go を付ける） */
.asm-wait .act-ch { opacity: 0; transform: translateY(110%) rotateX(-80deg); transform-origin: 50% 100%; }
.asm-wait.asm-go .act-ch { animation: actAsm .55s var(--ease-expo) both; animation-delay: calc(var(--asm-row, 0s) + var(--asm-d, 0s)); }
@keyframes actAsm { from { opacity: 0; transform: translateY(110%) rotateX(-80deg); } to { opacity: 1; transform: none; } }
.acts-on [data-act-type] { perspective: 700px; }
/* 刷られるお知らせ */
.act-roller { position: absolute; top: 0; bottom: 0; width: 3px; left: 0; z-index: 3; pointer-events: none; opacity: 0;
background: linear-gradient(180deg, transparent, var(--gold-light), transparent); box-shadow: 0 0 20px 4px rgba(232,213,163,.55); }
.acts-on [data-act~="press"] .news-item { position: relative; }
/* 金の線で描かれる名刺と判子 */
.act-frame { position: absolute; inset: -18px; pointer-events: none; z-index: 0; }
.act-frame b { position: absolute; background: linear-gradient(90deg, var(--gold-dark), var(--gold-light), var(--gold)); }
.act-frame .t, .act-frame .b { height: 1px; left: 0; right: 0; }
.act-frame .l, .act-frame .r { width: 1px; top: 0; bottom: 0; background: linear-gradient(180deg, var(--gold-dark), var(--gold-light), var(--gold)); }
.act-frame .t { top: 0; transform-origin: 0 50%; } .act-frame .b { bottom: 0; transform-origin: 100% 50%; }
.act-frame .r { right: 0; transform-origin: 50% 0; } .act-frame .l { left: 0; transform-origin: 50% 100%; }
.act-frame i { position: absolute; width: 14px; height: 14px; border-color: var(--gold-light); border-style: solid; border-width: 0; }
.act-frame i:nth-of-type(1) { left: -5px; top: -5px; border-left-width: 2px; border-top-width: 2px; }
.act-frame i:nth-of-type(2) { right: -5px; top: -5px; border-right-width: 2px; border-top-width: 2px; }
.act-frame i:nth-of-type(3) { right: -5px; bottom: -5px; border-right-width: 2px; border-bottom-width: 2px; }
.act-frame i:nth-of-type(4) { left: -5px; bottom: -5px; border-left-width: 2px; border-bottom-width: 2px; }
[data-act~="seal"] .act-seal-host { position: relative; }
.act-seal { position: absolute; right: -4px; top: -78px; width: 92px; height: 92px; z-index: 2; pointer-events: none; transform: rotate(-12deg); color: var(--gold); }
.act-seal svg { width: 100%; height: 100%; overflow: visible; }
.act-seal .ring { fill: none; stroke: currentColor; }
.act-seal text { fill: currentColor; font-family: var(--font-label); }
.act-seal .ctr { font-family: var(--font-serif-en); font-size: 17px; letter-spacing: .12em; }
.acts-on [data-act~="seal"] .act-rowline { background: linear-gradient(90deg, rgba(232,213,163,.75), rgba(201,168,76,.15)) no-repeat 0 100% / var(--rw, 100%) 1px; }
@media (max-width: 720px) { .act-seal { width: 70px; height: 70px; top: -64px; right: 0; } .act-frame { inset: -12px -8px; } }
/* 配られて裏返るカード */
.act-back { display: none; }
.acts-on [data-act~="deal"] .tm-card { transform-style: preserve-3d; }
.acts-on [data-act~="deal"] .tm-card .tm-in { backface-visibility: hidden; -webkit-backface-visibility: hidden; transform: translateZ(1px); }
.acts-on [data-act~="deal"] .act-back { display: block; position: absolute; inset: 0; border-radius: 18px; transform: rotateY(180deg) translateZ(1px);
backface-visibility: hidden; -webkit-backface-visibility: hidden; pointer-events: none; overflow: hidden;
background:
repeating-linear-gradient(45deg, rgba(201,168,76,.22) 0 1px, transparent 1px 9px),
repeating-linear-gradient(-45deg, rgba(201,168,76,.22) 0 1px, transparent 1px 9px),
radial-gradient(circle at 50% 50%, #2a2210, #0d0b07 70%);
border: 2px solid var(--gold); }
.act-back span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 10px 6px; border: 1px solid var(--gold-light);
font-family: var(--font-serif-en); font-size: 15px; letter-spacing: .3em; color: var(--gold-light); background: #0d0b07; white-space: nowrap; }
/* 光が集まって灯るボタン */
.act-gather-cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
[data-gather] { position: relative; }
.acts-on [data-gather].is-lit { animation: actLit 1.6s var(--ease-expo) both; }
@keyframes actLit { 0% { box-shadow: 0 0 0 0 rgba(232,213,163,.9), 0 0 0 0 rgba(201,168,76,.6); }
40% { box-shadow: 0 0 0 10px rgba(232,213,163,.0), 0 0 46px 6px rgba(201,168,76,.55); }
100% { box-shadow: 0 0 0 0 rgba(232,213,163,0), 0 0 30px 0 rgba(201,168,76,.32); } }
.act-tel { margin-left: 14px; }
.act-tel svg { width: 16px; height: 16px; margin-right: 8px; vertical-align: -3px; }
@media (max-width: 560px) { .act-tel { margin: 14px 0 0; } }
/* 点が灯る箇条書き */
.acts-on [data-ignite] li.is-lit::before { box-shadow: 0 0 0 4px rgba(201,168,76,.18), 0 0 14px 2px rgba(232,213,163,.8); }
/* フッターの巨大な社名（下へ行くほど金が満ちる） */
.act-mark { position: relative; margin: 64px 0 0; text-align: center; line-height: .9; white-space: nowrap; user-select: none; pointer-events: none;
font-family: var(--font-serif-en); font-weight: 300; font-size: min(21vw, 260px); letter-spacing: .14em; padding-left: .14em;
color: transparent; -webkit-text-stroke: 1px rgba(201,168,76,.32); }
.act-mark::after { content: attr(data-t); position: absolute; inset: 0; padding-left: .14em; -webkit-text-stroke: 0;
background: linear-gradient(100deg, var(--gold-dark) 0%, var(--gold) 30%, #fff1c9 48%, var(--gold) 62%, var(--gold-dark) 100%);
background-size: 220% 100%; background-position: 100% 0;
-webkit-background-clip: text; background-clip: text; color: transparent;
clip-path: inset(0 calc(100% - var(--fill, 100%)) 0 0); }
.acts-on .act-mark::after { animation: actsShimmer 6s var(--ease-smooth) infinite; }
@keyframes actsShimmer { 0%, 30% { background-position: 100% 0; } 100% { background-position: -20% 0; } }
@media (max-width: 720px) { .act-mark { margin-top: 44px; } }
/* 番号カードの上辺に走る光 */
.act-edge-host { position: relative; }
.act-edge { position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; pointer-events: none; transform-origin: 0 50%;
background: linear-gradient(90deg, var(--gold-dark), var(--gold-light) 50%, transparent); box-shadow: 0 0 14px rgba(232,213,163,.55); }
/* 着いた後も：光が1行ずつなぞる */
.acts-on .is-glint { animation: actGlint 1.5s var(--ease-smooth); }
@keyframes actGlint { 0% { background-color: rgba(201,168,76,0); box-shadow: inset 2px 0 0 rgba(232,213,163,0); }
35% { background-color: rgba(201,168,76,.075); box-shadow: inset 2px 0 0 rgba(232,213,163,.9); }
100% { background-color: rgba(201,168,76,0); box-shadow: inset 2px 0 0 rgba(232,213,163,0); } }
/* フッター：見出しの下に金の線 */
.footer-nav-col h4 { position: relative; }
.acts-on .footer-nav-col h4::after { content: ''; position: absolute; left: 0; bottom: -8px; width: 28px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--ease-expo) .3s; }
.acts-on .footer-nav-col.is-lit h4::after { transform: scaleX(1); }
/* 質感のある区画の本文は一段明るく（黒地で読めるように） */
.has-acts-bg .value-card p, .has-acts-bg .pillar-desc, .has-acts-bg .pillar-list li, .has-acts-bg .svc-desc,
.has-acts-bg .flow-step p, .has-acts-bg .join-day-step p, .has-acts-bg .tm-lead, .has-acts-bg .section-lead,
.has-acts-bg .join-note, .has-acts-bg .evmel-stat-note { color: var(--gray-light); }
.has-acts-bg .pillar-note { color: #a9a9a9; }
.footer.has-acts-bg .footer-nav-col a, .footer.has-acts-bg .footer-tagline, .footer.has-acts-bg .footer-copy { color: #9a9a9a; }
/* 動きを減らす設定：主役も背景も止める（質感だけ残す） */
@media (prefers-reduced-motion: reduce) {
.acts-bg *, .acts-bg *::before, .acts-bg *::after, .act-mark::after { animation: none !important; }
}
/* 縦に長い見せ場の区画：背景は画面に貼り付ける */
.nw-type > .acts-bg, .join-story-pin > .acts-bg { position: sticky; top: 0; height: 100vh; height: 100svh; margin-bottom: -100vh; margin-bottom: -100svh; }
.nw-type > .nw-sticky { z-index: 1; }
.join-story-pin > .join-story-inner { z-index: 1; }
@media (prefers-reduced-motion: reduce) { .join-story-pin > .join-story-inner { position: relative; } }
/* スマホ・非力な端末：回り込むカードの背景ぼかしを外す（毎コマ描き直しになって重い） */
.fx-lite [data-act~="plates"] .pillar-card { -webkit-backdrop-filter: none; backdrop-filter: none; background: linear-gradient(150deg, #1d1b16 0%, #141414 60%, #17150f 100%); }
.fx-lite .acts-on .acts-grain, .fx-lite.acts-on .acts-grain { animation: none; }
/* ============ v4 ============ */
/* 数字：「1」が「I」に見えない書体に */
.num-d { font-family: 'Noto Serif JP', var(--font-serif-ja), serif; font-weight: 300; font-style: normal; letter-spacing: .02em; }
.value-num, .flow-num, .svc-num, .join-day-num, .stat-num, .evmel-stat-num, .join-num-val, .tm-no, .odo-drum {
font-family: 'Noto Serif JP', var(--font-serif-ja), serif; font-weight: 200; font-style: normal; }
/* 昇る太陽 */
.ab-sun { left: 50%; top: 18%; width: min(90vw, 620px); height: min(90vw, 620px); margin-left: calc(min(90vw, 620px) / -2); border-radius: 50%;
background: radial-gradient(circle, rgba(255,236,190,.42) 0%, rgba(232,213,163,.22) 22%, rgba(201,168,76,.10) 45%, transparent 68%); }
.ab-sun b { position: absolute; inset: -30%; border-radius: 50%;
background: repeating-conic-gradient(from 0deg, rgba(232,213,163,.10) 0deg 3deg, transparent 3deg 15deg);
-webkit-mask-image: radial-gradient(circle, #000 20%, transparent 62%); mask-image: radial-gradient(circle, #000 20%, transparent 62%); }
.acts-on .ab-sun b { animation: actsSpin 90s linear infinite; }
/* 価値観の大きな漢字 */
.act-glyph-host { position: relative; isolation: isolate; overflow: hidden; }
.act-glyph { position: absolute; right: -6%; top: -4%; width: 62%; aspect-ratio: 1; z-index: -1; pointer-events: none; }
.act-glyph svg { width: 100%; height: 100%; display: block; overflow: visible; }
.act-glyph text { font-family: 'Noto Serif JP', serif; font-weight: 300; font-size: 92px; fill: var(--gold); fill-opacity: .08; stroke: var(--gold); stroke-width: .7; stroke-opacity: .7; }
/* 道を進む光 */
.act-road-host { position: relative; }
.act-road { position: absolute; left: 0; top: 0; z-index: 0; pointer-events: none; overflow: visible; }
.act-road-host > .flow-step, .act-road-host > .join-day-step, .act-road-host > .flow-row, .act-road-host > .flow-arrow { position: relative; z-index: 1; }
.act-road .rd-base { fill: none; stroke: rgba(201,168,76,.18); stroke-width: 1; stroke-dasharray: 3 6; }
.act-road .rd-lit { fill: none; stroke: var(--gold-light); stroke-width: 2; filter: drop-shadow(0 0 6px rgba(232,213,163,.8)); }
.act-road .rd-dot circle { fill: #fff3d1; }
.act-road .rd-dot .halo { fill: rgba(232,213,163,.22); }
.act-road .rd-sun circle { fill: #ffe7b0; }
.act-road .rd-sun .halo { fill: rgba(255,226,160,.18); }
.act-road .rd-sun line { stroke: #ffe7b0; stroke-width: 2; stroke-linecap: round; }
.flow-step, .join-day-step, .flow-row { transition: box-shadow .6s var(--ease-expo), border-color .6s var(--ease-expo), background-color .6s var(--ease-expo); }
.acts-on .flow-step.is-pass, .acts-on .join-day-step.is-pass { border-color: rgba(232,213,163,.7) !important; box-shadow: 0 0 0 1px rgba(201,168,76,.45), 0 0 34px rgba(201,168,76,.16); background-color: rgba(201,168,76,.05); }
.acts-on .is-pass .flow-num, .acts-on .is-pass .join-day-num { color: var(--gold-light); text-shadow: 0 0 14px rgba(232,213,163,.7); }
/* お知らせの見出しが組み上がった後、下線に光 */
.acts-on [data-act~="assemble"] .news-item { position: relative; }
.acts-on [data-act~="assemble"] .news-item::after { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
background: linear-gradient(90deg, var(--gold-light), transparent); transition: transform 1.2s var(--ease-expo); pointer-events: none; }
.acts-on [data-act~="assemble"] .news-item.is-printed::after { transform: scaleX(1); }
/* 流れる見出しテープ */
.act-ticker { position: absolute; left: 0; right: 0; top: 26px; z-index: 1; overflow: hidden; white-space: nowrap; pointer-events: none;
border-top: 1px solid rgba(201,168,76,.25); border-bottom: 1px solid rgba(201,168,76,.25); padding: 9px 0; background: rgba(10,10,10,.55); }
.act-ticker .tk-track { display: inline-block; font-family: var(--font-sans); font-size: 13px; letter-spacing: .08em; color: var(--gold-light); }
.act-ticker .tk-track span { padding: 0 18px; }
.act-ticker .tk-track i { font-style: normal; color: var(--gold); font-size: 9px; }
.acts-on .act-ticker.is-run .tk-track { animation: actsTicker 38s linear infinite; }
@keyframes actsTicker { to { transform: translateX(-50%); } }
[data-act~="ticker"] > .container { padding-top: 40px; }
/* 回る数字のドラム */
.act-odo { display: flex; align-items: baseline; justify-content: center; gap: 10px; margin: 6px 0 30px; font-family: var(--font-serif-ja); color: var(--white); font-size: clamp(22px, 3vw, 30px); letter-spacing: .1em; }
.act-odo small { font-family: var(--font-label); font-size: 12px; color: var(--gold); letter-spacing: .2em; margin-left: 6px; }
.odo-drum { display: inline-block; height: 1.15em; line-height: 1.15em; overflow: hidden; font-size: clamp(64px, 10vw, 110px); color: var(--gold-light); vertical-align: -0.12em; }
.odo-col { display: flex; flex-direction: column; }
.odo-col b { font-weight: 200; height: 1.15em; }
/* 曜日の灯り */
.act-week { list-style: none; display: flex; justify-content: center; gap: 8px; margin: 8px auto 38px; padding: 0; }
.act-week li { position: relative; width: 42px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 2px;
font-family: var(--font-serif-ja); font-size: 16px; color: var(--gray-light); transition: all .6s var(--ease-expo); }
.act-week li[data-off] { border-color: var(--gold); color: var(--black); background: var(--gold-grad); box-shadow: 0 0 22px rgba(201,168,76,.45); }
.act-week li[data-off]::after { content: "\4F11"; position: absolute; bottom: -20px; font-size: 11px; color: var(--gold-light); }
.act-week.is-staged li[data-off]:not(.is-on) { border-color: rgba(255,255,255,.14); color: var(--gray-light); background: transparent; box-shadow: none; }
.act-week.is-staged li[data-off]:not(.is-on)::after { opacity: 0; }
@media (max-width: 400px) { .act-week { gap: 5px; } .act-week li { width: 38px; height: 50px; } }
/* 窓口の灯り */
.act-lamp svg { transition: color .6s, filter .6s; }
.acts-on .act-lamp:not(.is-on) svg { color: rgba(255,255,255,.25); }
.acts-on .act-lamp.is-on svg { color: var(--gold-light); filter: drop-shadow(0 0 8px rgba(232,213,163,.9)); }
.acts-on .act-lamp.is-on:first-child svg { animation: actsLamp 2.8s var(--ease-smooth) infinite; }
@keyframes actsLamp { 50% { filter: drop-shadow(0 0 2px rgba(232,213,163,.4)); } }
/* 種別で変わる背景 */
.ab-theme { inset: 0; opacity: 0; transition: opacity 1.2s var(--ease-smooth); }
.ab-theme.is-on { opacity: 1; }
.ab-theme b { position: absolute; left: -2%; top: 6%; font-family: var(--font-serif-en); font-weight: 300; font-size: clamp(90px, 18vw, 260px); line-height: 1; white-space: nowrap;
color: transparent; -webkit-text-stroke: 1px rgba(232,213,163,.22); }
.ab-theme.t0 { background: radial-gradient(70% 50% at 20% 20%, rgba(232,213,163,.16), transparent 70%); }
.ab-theme.t1 { background: radial-gradient(70% 50% at 80% 25%, rgba(214,150,70,.20), transparent 70%); }
.ab-theme.t2 { background: radial-gradient(70% 50% at 30% 35%, rgba(201,168,76,.18), transparent 70%), repeating-linear-gradient(0deg, transparent 0 31px, rgba(201,168,76,.06) 31px 32px); }
.ab-theme.t3 { background: radial-gradient(70% 50% at 70% 30%, rgba(255,226,180,.14), transparent 70%); }
.acts-on .ab-theme.is-on b { animation: actsThemeIn 1.4s var(--ease-expo) both; }
@keyframes actsThemeIn { from { transform: translateX(8%); opacity: 0; } to { transform: none; opacity: 1; } }
/* 事業の一覧：行の後ろの英語 */
.act-rowword { position: absolute; left: 0; top: 50%; margin-top: -.5em; line-height: 1; z-index: 0; pointer-events: none; white-space: nowrap;
font-family: var(--font-serif-en); font-weight: 300; font-size: clamp(60px, 12vw, 150px); color: transparent; -webkit-text-stroke: 1px rgba(201,168,76,.16); }
[data-act~="ledger"] .svc-row { position: relative; overflow: hidden; }
[data-act~="ledger"] .svc-row > :not(.act-rowword) { position: relative; z-index: 1; }
/* 会社情報の表：文字を枠の線から離す */
[data-seal] th:first-child, [data-seal] .join-term-row dt { padding-left: 18px !important; }
[data-seal] td:last-child, [data-seal] .join-term-row dd { padding-right: 18px !important; }
@media (max-width: 720px) { [data-seal] th, [data-seal] td, [data-seal] .join-term-row dt, [data-seal] .join-term-row dd { padding-left: 16px !important; padding-right: 16px !important; } }
/* 採用LP：3列の数字の説明が細切れにならないように（スマホは1列） */
@media (max-width: 600px) { .join-num-grid[style] { grid-template-columns: 1fr !important; } }
/* フッター：1種類・短く・読める濃さ */
.footer.has-acts-bg .footer-nav-col a, .footer.has-acts-bg .footer-tagline, .footer.has-acts-bg .footer-address, .footer.has-acts-bg .footer-copy { color: #bdbdbd; }
.act-mark { font-size: min(17vw, 210px); margin-top: 40px; }
@media (max-width: 720px) {
.footer.has-acts-bg { padding: 44px 0 24px; }
.footer.has-acts-bg .footer-grid { gap: 26px; padding-bottom: 24px; }
.footer.has-acts-bg .footer-nav-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.footer.has-acts-bg .footer-nav-col h4 { margin-bottom: 12px; }
.footer.has-acts-bg .footer-nav-col ul { gap: 4px; }
.footer.has-acts-bg .footer-nav-col a { font-size: 12px; line-height: 1.5; display: inline-block; padding: 6px 0; }
.footer.has-acts-bg .footer-bottom { padding-top: 18px; }
.act-mark { margin-top: 26px; }
}
/* 新着の見出し演出：止まっている間も見出しがゆっくり寄ってくる */
.acts-on .nw-type.is-type .nw-phrases { animation: actsNwBreath 6s var(--ease-smooth) infinite alternate; }
@keyframes actsNwBreath { from { scale: 1; } to { scale: 1.07; } }
/* ドラムが回る途中の数字は読めないように（最後の値だけはっきり） */
.odo-drum.is-rolling .odo-col { filter: none; opacity: 1; }
.odo-drum .odo-col { transition: filter .35s, opacity .35s; }
/* 種別の英字は下の方に、薄く（カードの字に重ねない） */
.ab-theme b { top: auto; bottom: 3%; -webkit-text-stroke-color: rgba(232,213,163,.13); }
/* ============ v5 ============ */
/* 名刺のふた */
.act-lid-host { position: relative; }
.act-lid { position: absolute; inset: -6px; z-index: 4; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
border: 1px solid var(--gold); border-radius: 3px; backface-visibility: hidden;
background:
repeating-linear-gradient(45deg, rgba(201,168,76,.10) 0 1px, transparent 1px 10px),
radial-gradient(circle at 50% 40%, #2a2210, #0d0b07 75%);
box-shadow: 0 30px 60px rgba(0,0,0,.6), inset 0 0 0 6px rgba(10,10,10,.6), inset 0 0 0 7px rgba(201,168,76,.4); }
.act-lid .lid-mark { font-family: var(--font-serif-en); font-weight: 300; font-size: clamp(34px, 8vw, 64px); letter-spacing: .4em; padding-left: .4em; color: var(--gold-light); }
.act-lid .lid-cap { font-family: var(--font-serif-ja); font-size: 13px; letter-spacing: .4em; color: var(--gold); }
.act-lid .lid-line { width: 46%; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-light), transparent); transform: scaleX(0); }
/* 1行ずつ打たれる表 */
.act-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -0.15em; background: var(--gold-light); box-shadow: 0 0 8px rgba(232,213,163,.9); animation: actsCaret .5s steps(2) infinite; }
@keyframes actsCaret { 50% { opacity: 0; } }
/* 入力欄の金の線 */
.acts-on .fl-group .fl-underline { transform: scaleX(0); }
.acts-on .fl-group.is-drawn .fl-underline { transform: scaleX(1); opacity: .42; transition: transform 1s var(--ease-expo), opacity .3s; }
.acts-on .fl-group.is-drawn:focus-within .fl-underline { opacity: 1; box-shadow: 0 0 12px rgba(232,213,163,.8); }
.acts-on .fl-group.is-drawn::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 40px; height: 5px; border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, rgba(255,240,205,.95), transparent); animation: actsRun 1.4s var(--ease-smooth) .2s 1 both; }
@keyframes actsRun { from { transform: translateX(-40px); opacity: 1; } 85% { opacity: 1; } to { transform: translateX(calc(100cqw + 40px)); opacity: 0; } }
.fl-group { container-type: inline-size; }
/* 紙飛行機 */
.act-plane { position: relative; height: 180px; margin: 36px auto 0; max-width: var(--container); width: 90%; pointer-events: none; }
.act-plane svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.act-plane .pl-trail { fill: none; stroke: var(--gold-light); stroke-width: 1.4; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(232,213,163,.8)); vector-effect: non-scaling-stroke; }
.act-plane .pl-ship { position: absolute; left: 0; top: 0; width: 24px; height: 24px; color: #fff3d1; filter: drop-shadow(0 0 8px rgba(232,213,163,.9)); }
.act-plane .pl-ship svg { position: static; width: 24px; height: 24px; }
.act-plane .pl-ship path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.act-plane .pl-msg { position: absolute; right: 0; top: -6px; font-family: var(--font-serif-ja); font-size: 14px; letter-spacing: .1em; color: var(--gold-light); opacity: 0; transition: opacity .6s; }
@media (max-width: 720px) { .act-plane { height: 150px; } .act-plane .pl-msg { font-size: 13px; top: -14px; } }
/* 種別の英字はやめて、光の色だけ変える */
.ab-theme b { display: none; }
/* 大きな漢字・行の英字は本文の邪魔をしない濃さに */
.act-glyph text { stroke-opacity: .38; fill-opacity: .045; }
.act-glyph { right: -10%; top: auto; bottom: -14%; width: 58%; }
.act-rowword { left: auto; right: -4%; top: auto; bottom: 4px; margin-top: 0; -webkit-text-stroke-color: rgba(201,168,76,.09); font-size: clamp(52px, 10vw, 130px); }
/* 背景の光の上に乗る文字は、文字の下だけ暗くする */
.has-acts-bg.cta .container > p, .has-acts-bg.cta .container > h2 { text-shadow: 0 0 14px rgba(10,10,10,.95), 0 0 3px rgba(10,10,10,.9); }
.has-acts-bg.cta .container > p { color: var(--gray-light); }
/* フッター：列がくっつかないように（スマホは2列＋お問い合わせを横並び） */
.ab-horizon::before { bottom: 3%; }
@media (max-width: 720px) {
.footer.has-acts-bg .footer-nav-grid { grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.footer.has-acts-bg .footer-nav-col:last-child { grid-column: 1 / -1; }
.footer.has-acts-bg .footer-nav-col:last-child ul { flex-direction: row; flex-wrap: wrap; gap: 4px 22px; }
}
/* 採用LP：数字を大きく、1つずつ */
@media (max-width: 600px) {
.join-num-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
.join-num-grid .join-num { padding: 26px 8px; border-width: 0 0 1px !important; }
.join-num-grid .join-num-val { font-size: 62px !important; }
}
/* ============ v6 ============ */
/* 語の途中で改行しない（文節で折り返す。対応していない端末はふつうの折り返し） */
p, li, td, th, dd, dt, h2, h3, .pillar-desc, .svc-desc, .news-title, .flow-text span, .join-note { word-break: auto-phrase; line-break: strict; }
/* ふた：ロゴは上寄せ（縦に長い表でも見えるところに） */
.act-lid { justify-content: flex-start; padding-top: 56px; background:
repeating-linear-gradient(45deg, rgba(201,168,76,.10) 0 1px, transparent 1px 10px),
linear-gradient(180deg, rgba(42,34,16,.97), rgba(13,11,7,.9) 40%, rgba(13,11,7,.55)); }
/* 数字：浮かび上がる形に（ドラムの枠は使わない） */
.odo-drum { height: auto; line-height: 1; overflow: visible; vertical-align: -0.08em; }
/* 連絡先などの箱：金の線が枠を一周する */
.act-trace { position: relative; }
.act-trace::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; padding: 1px;
background: conic-gradient(from var(--trace-a, 0deg), transparent 0deg, rgba(255,236,190,.95) 40deg, transparent 80deg, transparent 360deg);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; }
@property --trace-a { syntax: ''; inherits: false; initial-value: 0deg; }
.acts-on .act-trace.is-traced::before { animation: actsTrace 2.2s var(--ease-smooth) 1 both; }
@keyframes actsTrace { 0% { --trace-a: 0deg; opacity: 1; } 90% { opacity: 1; } 100% { --trace-a: 360deg; opacity: 0; } }
/* 紙飛行機：文は中央、余白を取る。通り道は文字の下 */
.act-plane { width: 86%; }
.act-plane .pl-msg { left: 0; right: 0; top: auto; bottom: -26px; text-align: center; z-index: 2; text-shadow: 0 0 10px #0a0a0a; }
.act-plane svg { z-index: 0; }
/* お問い合わせ：見出しの上を金の光がひと筋走る */
.contact-hero-inner { position: relative; }
.acts-on .contact-hero-inner::after { content: ''; position: absolute; left: -10%; right: -10%; top: 0; bottom: 0; pointer-events: none;
background: linear-gradient(105deg, transparent 40%, rgba(232,213,163,.16) 48%, rgba(255,240,210,.28) 50%, rgba(232,213,163,.16) 52%, transparent 60%);
background-size: 250% 100%; animation: actsHeroSweep 5s var(--ease-smooth) 1.2s infinite; }
@keyframes actsHeroSweep { 0% { background-position: 120% 0; } 45%, 100% { background-position: -40% 0; } }
@media (max-width: 720px) { .type-card span:not(.type-card-icon) { font-size: 13px !important; line-height: 1.5; } }
/* 新着：見出しの下に大きな日付（見出しと一緒に切り替わる） */
.nw-bigdate { position: absolute; left: 50%; top: calc(100% + 18px); transform: translateX(-50%); white-space: nowrap; font-style: normal; pointer-events: none;
font-family: 'Noto Serif JP', serif; font-weight: 200; font-size: clamp(90px, 30vw, 220px); line-height: 1; letter-spacing: .04em;
color: transparent; -webkit-text-stroke: 1px rgba(232,213,163,.32); }
.nw-type.is-type .nw-meta { position: static; }
/* 絞り込みのボタンは1行に */
@media (max-width: 480px) { .news-filter { flex-wrap: nowrap !important; gap: 6px !important; } .news-filter .filter-btn { padding: 8px 10px !important; font-size: 10px !important; letter-spacing: .12em !important; flex: 1 1 0; min-width: 0; } }
/* 採用LP：理念の文を大きく */
@media (max-width: 720px) { .join-story p { font-size: clamp(26px, 7.4vw, 40px); line-height: 1.9; } }
/* 会社概要の締め：価値観の3字 */
.act-kanji { font-family: var(--font-serif-ja); font-weight: 200; font-size: clamp(44px, 11vw, 84px); letter-spacing: .3em; padding-left: .3em; margin: 0 0 18px !important; line-height: 1.2;
background: linear-gradient(100deg, var(--gold-dark), var(--gold-light) 50%, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.act-kanji .act-ch { background: inherit; -webkit-background-clip: text; background-clip: text; }
/* ============ v7 ============ */
/* ヘッダー：不透明に、下に金の線 */
.nav.scrolled { background: #0b0b0b !important; border-bottom: 1px solid rgba(201,168,76,.35); }
/* なぞる光の行：文字を線から離し、光は細く */
[data-glint] .job-row { padding-left: 14px; }
@keyframes actGlint { 0% { background-color: rgba(201,168,76,0); box-shadow: inset 2px 0 0 rgba(232,213,163,0); }
35% { background-color: rgba(201,168,76,.035); box-shadow: inset 2px 0 0 rgba(232,213,163,.85); }
100% { background-color: rgba(201,168,76,0); box-shadow: inset 2px 0 0 rgba(232,213,163,0); } }
/* ふた：不透明（中の字と二重に見えないように） */
.act-lid { background:
repeating-linear-gradient(45deg, rgba(201,168,76,.10) 0 1px, transparent 1px 10px),
linear-gradient(180deg, #2a2210, #0d0b07 45%, #0d0b07); }
/* 曜日：光ったマスの字は黒 */
.act-week li[data-off].is-on, .act-week:not(.is-staged) li[data-off] { color: #0a0a0a !important; }
/* 会社概要の締めの3字：ゆっくり光が流れる */
.act-kanji { background-size: 220% 100%; }
.acts-on .act-kanji { animation: actsShimmer 5s var(--ease-smooth) infinite; }