/* 総合ページ（パロディの案）の「看板（事業）」の章
   札は何枚でも並ぶ（4列で下へ増える）。番号は並び順から自動で振る（書き直し不要）。
   乗せると：札が浮いて少し傾く・写真が大きくなる・ほかの札は暗くなる・大きな番号が金色に光る・
            金の角が伸びる・光の線が上から下へ走る・説明／できること／数字／住所が下からせり上がる。
   画面に入る時：真ん中に散らばって重なった写真が、広がって並ぶ（看板.js が散らばり方を決める） */

.jigyo { position: relative; padding: 120px 0 30px; }
.jigyo-atama { display: flex; align-items: flex-end; gap: 24px; }
.jigyo-dai { width: max-content; }
.jigyo-bun { margin-left: auto; font-size: 14px; color: #8A8A92; max-width: 44ch; font-weight: 300; }

.jigyo-ami { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
  margin-top: 36px; counter-reset: kb; }

/* ── 札 ── */
.kb { --okure: calc(var(--i, 0) * 70ms); position: relative; display: block; height: 500px; border-radius: 6px;
  color: #FFFFFF; isolation: isolate;
  transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  box-shadow: 0 0 0 1px rgba(255,255,255,.07);
  transition: scale .6s var(--yawaraka), filter .5s ease, box-shadow .5s ease, transform .35s ease-out; }
.kb:not(.kb-mada) { counter-increment: kb; }
.kb:hover { color: #FFFFFF; }
.kb-hako { position: absolute; inset: 0; border-radius: 6px; }
.kb-e { scale: 1.02; filter: brightness(1.1); transition: scale 1.4s var(--yawaraka), filter .8s ease; }
.kb-kage { position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(5,5,7,0) 30%, rgba(5,5,7,.6) 62%, rgba(5,5,7,.96) 100%); }
.kb-kage::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease;
  background: linear-gradient(180deg, rgba(5,5,7,.05) 0%, rgba(5,5,7,.35) 22%, rgba(5,5,7,.72) 46%, rgba(5,5,7,.9) 72%, rgba(5,5,7,.96) 100%); }

/* マウスの所だけ明るくなる光（看板.js が場所を渡す） */
.kb-kira { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .5s ease; mix-blend-mode: screen;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(255,214,10,.22), rgba(255,214,10,0) 60%); }
/* 乗せた時だけ出る札 */
.kb-kira::after { content: "ACCESS GRANTED"; position: absolute; left: 18px; top: 18px;
  font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 11px; letter-spacing: .28em;
  color: #0B0B0D; background: var(--kin); padding: 2px 9px; line-height: 1.6; opacity: 0; }
/* 上から下へ走る光の線 */
.kb-sen { position: absolute; left: 0; right: 0; top: 0; height: 90px; z-index: 2; opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,214,10,0) 0%, rgba(255,214,10,.16) 80%, rgba(255,214,10,.85) 100%);
  translate: 0 -100%; }

/* 金の角（左上と右下） */
.kb-waku { position: absolute; inset: -1px; z-index: 3; pointer-events: none; }
.kb-waku::before, .kb-waku::after { content: ""; position: absolute; width: 0; height: 0; border: 0 solid var(--kin);
  opacity: 0; transition: width .55s var(--yawaraka), height .55s var(--yawaraka), opacity .2s ease; }
.kb-waku::before { left: 0; top: 0; border-left-width: 3px; border-top-width: 3px; }
.kb-waku::after { right: 0; bottom: 0; border-right-width: 3px; border-bottom-width: 3px; }

/* 大きな番号（右上）。ふだんは線だけ、乗せると金で塗られて大きくなる */
.kb-ban { position: absolute; right: 16px; top: 4px; z-index: 3; font-size: 92px; line-height: 1; letter-spacing: 0;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.55); transform-origin: 100% 0;
  transition: color .45s ease, -webkit-text-stroke-color .45s ease, scale .7s var(--yawaraka), text-shadow .45s ease; }
.kb-ban::before { content: counter(kb, decimal-leading-zero); }

/* 文字 */
.kb-ji { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 20px 22px 22px; }
.kb-dare { font-size: 12px; line-height: 1.6; letter-spacing: .16em; font-weight: 700; color: var(--kin); }
.kb-file::before { content: "FILE " counter(kb, decimal-leading-zero) " ／ "; }
.kb-na { font-size: 25px; line-height: 1.4; margin-top: 4px; font-weight: 900; transition: scale .6s var(--yawaraka); transform-origin: 0 100%; }
.kb-hitokoto { font-size: 13px; line-height: 1.7; color: var(--usui); font-weight: 400; margin-top: 4px; max-height: 3.6em; overflow: hidden;
  transition: max-height .5s var(--yawaraka), opacity .3s ease, margin .5s var(--yawaraka); }

/* 下からせり上がる中身（高さ0→中身の高さ） */
.kb-ura { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--yawaraka); }
.kb-ura-naka { overflow: hidden; min-height: 0; }
.kb-ura-naka > * { opacity: 0; translate: 0 16px; transition: opacity .35s ease, translate .5s var(--yawaraka); }
.kb-setsumei { font-size: 12.5px; line-height: 1.75; color: #E4E4EA; margin-top: 12px; padding-top: 12px;
  border-top: 1px solid rgba(255,214,10,.45); }
.kb-dekiru { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12.5px; line-height: 1.55; }
.kb-dekiru li { position: relative; padding-left: 16px; margin-top: 3px; }
.kb-dekiru li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; background: var(--kin);
  clip-path: polygon(0 0, 100% 50%, 0 100%); }
.kb-suji { display: flex; gap: 18px; margin-top: 12px; }
.kb-suji > div { display: flex; flex-direction: column; }
.kb-suji b { font-weight: 400; font-size: 26px; line-height: 1.1; color: var(--kin); }
.kb-suji small { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: 11px; margin-left: 2px; }
.kb-suji span { font-size: 10.5px; color: #A8A8B0; line-height: 1.5; }
.kb-saki { display: inline-flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 13px; letter-spacing: .08em;
  font-weight: 700; color: #0B0B0D; background: var(--kin); padding: 5px 14px 5px 16px; }
.kb-saki i { font-style: normal; transition: translate .4s var(--yawaraka); }
.kb-saki-mi { background: transparent; color: #9A9AA2; border: 1px solid #45454D; }

/* ── 乗せた時（キーで選んだ時も同じ） ── */
.kb:not(.kb-mada):is(:hover, :focus-visible) { scale: 1.07; z-index: 5; outline: none;
  box-shadow: 0 34px 70px rgba(0,0,0,.7), 0 0 0 1px rgba(255,214,10,.9), 0 0 46px rgba(255,214,10,.22); }
.kb:is(:hover, :focus-visible) .kb-e { scale: 1.2; filter: brightness(1.02) saturate(1.1); }
.kb:is(:hover, :focus-visible) .kb-kage::after { opacity: 1; }
.kb:is(:hover, :focus-visible) .kb-kira { opacity: 1; }
.kb:is(:hover, :focus-visible) .kb-kira::after { animation: kb-hiraku .5s steps(1) .15s both; }
.kb:is(:hover, :focus-visible) .kb-sen { animation: kb-hashiru 1s cubic-bezier(.4, 0, .2, 1) both; }
.kb:is(:hover, :focus-visible) .kb-waku::before,
.kb:is(:hover, :focus-visible) .kb-waku::after { width: 44px; height: 44px; opacity: 1; }
.kb:is(:hover, :focus-visible) .kb-ban { color: var(--kin); -webkit-text-stroke-color: var(--kin); scale: 1.18;
  text-shadow: 0 0 28px rgba(255,214,10,.55); }
.kb:is(:hover, :focus-visible) .kb-na { scale: 1.08; }
.kb:not(.kb-mada):is(:hover, :focus-visible) .kb-hitokoto { max-height: 0; opacity: 0; margin-top: 0; }
.kb:is(:hover, :focus-visible) .kb-ura { grid-template-rows: 1fr; }
.kb:is(:hover, :focus-visible) .kb-ura-naka > * { opacity: 1; translate: 0 0; }
.kb:is(:hover, :focus-visible) .kb-ura-naka > :nth-child(1) { transition-delay: .12s; }
.kb:is(:hover, :focus-visible) .kb-ura-naka > :nth-child(2) { transition-delay: .19s; }
.kb:is(:hover, :focus-visible) .kb-ura-naka > :nth-child(3) { transition-delay: .26s; }
.kb:is(:hover, :focus-visible) .kb-ura-naka > :nth-child(4) { transition-delay: .33s; }
.kb:is(:hover, :focus-visible) .kb-saki i { translate: 5px 0; }
/* ほかの札は暗く、少し小さく */
.jigyo-ami:has(.kb:not(.kb-mada):is(:hover, :focus-visible)) .kb:not(:hover):not(:focus-visible) { filter: brightness(.38) saturate(.35); scale: .96; }

@keyframes kb-hashiru { 0% { opacity: 1; translate: 0 -100%; } 85% { opacity: 1; } 100% { opacity: 0; translate: 0 500px; } }
@keyframes kb-hiraku { 0% { opacity: 1; } 20% { opacity: 0; } 40% { opacity: 1; } 60% { opacity: .2; } 100% { opacity: 1; } }

/* ── 準備中の空き札 ── */
.kb-mada { border: 1.5px dashed rgba(255,214,10,.45); box-shadow: none; display: flex; align-items: flex-end;
  background: repeating-linear-gradient(135deg, rgba(255,214,10,.05) 0 14px, rgba(255,214,10,0) 14px 28px); }
.kb-mada-naka { padding: 20px 22px 22px; }
.kb-mada-ban { font-size: 64px; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgba(255,214,10,.6); margin-bottom: 14px; }
.kb-mada .kb-hitokoto { color: #8A8A92; }

/* ── 画面に入る時：真ん中に重なった写真が広がって並ぶ ── */
.ugoku .jigyo .kb { opacity: 0; translate: var(--dx, 0px) var(--dy, 80px); rotate: var(--rot, 0deg);
  transition: opacity .8s ease var(--okure), translate 1.4s var(--yawaraka) var(--okure), rotate 1.4s var(--yawaraka) var(--okure),
    scale .6s var(--yawaraka), filter .5s ease, box-shadow .5s ease, transform .35s ease-out; }
.ugoku .jigyo.mieta .kb { opacity: 1; translate: 0 0; rotate: 0deg; }

/* 指で触る機械では、中身をはじめから開いておく */
@media (hover: none) {
  .kb:not(.kb-mada) .kb-ura { grid-template-rows: 1fr; }
  .kb .kb-ura-naka > * { opacity: 1; translate: 0 0; }
  .kb .kb-kage::after { opacity: 1; }
  .kb:not(.kb-mada) { height: auto; min-height: 500px; display: flex; align-items: flex-end; }
  .kb:not(.kb-mada) .kb-ji { position: relative; padding-top: 150px; }
}