/* ===== Footer（2026-10-30 / 参考：footer.design turion-space をオレンジで再構成） =====
   上＝白から始まり、下へ行くほど夕焼けのオレンジに沈む。最下部に巨大な AZUR、
   その手前に制作実績の画面がスクロールに合わせて浮かぶ。 */
footer.sf {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 0; margin: 0; border: 0; text-align: left;
  color: #0A0A0A;
  background:
    linear-gradient(180deg,
      #FFFFFF 0%,
      #FCEFE6 12%,
      #F7B88C 32%,
      #F37A35 52%,
      #F25F1A 70%,
      #C9430A 100%);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
/* 粒子感（写真のような質感。動かない） */
footer.sf::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .22; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
footer.sf a { color: inherit; text-decoration: none; opacity: 1; }

.sf-in { position: relative; padding: 112px 32px 0; }

/* リンク列 */
.sf-nav {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.6fr);
  gap: 32px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
}
.sf-col { display: flex; flex-direction: column; gap: 12px; }
.sf-h { color: rgba(10,10,10,.42); margin-bottom: 2px; }
.sf-col a { position: relative; width: max-content; max-width: 100%; }
.sf-col a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.sf-col a:hover::after { transform: scaleX(1); transform-origin: left; }
.sf-mute a { color: rgba(10,10,10,.55); }
.sf-mute a:hover { color: #0A0A0A; }
.sf-social { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.sf-social .sf-col { gap: 12px; }
.sf-ja { text-transform: none; letter-spacing: .02em; font-family: 'Noto Sans JP', sans-serif; font-size: 12px; }

/* コピーライト行 */
.sf-meta {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  margin-top: 120px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(10,10,10,.6); position: relative; z-index: 3;
}
.sf-meta-r { display: flex; gap: 40px; color: #0A0A0A; }
.sf-meta .sf-ja { font-size: 11px; }

/* 巨大ワードマーク */
.sf-mark {
  position: relative; z-index: 1; margin: 10px 0 0; padding: 0;
  font-family: 'Bricolage Grotesque', 'Inter', sans-serif; font-weight: 800; font-style: italic;
  font-size: var(--sf-fs, 34vw); line-height: .74; letter-spacing: -.055em;
  color: #0A0A0A; white-space: nowrap; text-align: center;
  padding-bottom: .03em;
  user-select: none;
}
.sf-mark span { display: inline-block; }

/* 浮かぶ実績カード（ワードマークの範囲を基準に置く） */
.sf-stage { position: relative; }
.sf-float { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sf-card {
  position: absolute; display: block; pointer-events: auto;
  width: var(--w); left: var(--x); top: var(--y);
  aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  background: #111;
  box-shadow: 0 40px 80px -24px rgba(60,16,0,.55), 0 12px 24px -12px rgba(60,16,0,.45), 0 0 0 1px rgba(255,255,255,.18) inset;
  transform: translate3d(var(--mx, 0px), calc(var(--py, 0px) + var(--my, 0px)), 0) rotate(var(--r));
  transition: box-shadow .4s;
  will-change: transform;
}
.sf-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.sf-card:hover img { transform: scale(1.05); }
.sf-card .sf-tag {
  position: absolute; left: 10px; bottom: 9px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: #fff; background: rgba(10,10,10,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  padding: 4px 8px; border-radius: 999px; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s;
}
.sf-card:hover .sf-tag { opacity: 1; transform: none; }

/* 出現：カードは下から浮き上がる */
.sf-js .sf-card { opacity: 0; }
.sf-js .sf-card img { transform: scale(1.12); }
.sf-on .sf-card { opacity: 1; transition: opacity 1.2s cubic-bezier(.2,.8,.2,1) var(--d, 0s), transform 1.1s cubic-bezier(.2,.8,.2,1); }
.sf-on .sf-card img { transform: scale(1); transition: transform 1.6s cubic-bezier(.2,.8,.2,1) var(--d, 0s); }
.sf-on .sf-card:hover img { transform: scale(1.05); transition-duration: .8s; transition-delay: 0s; }
.sf-js .sf-mark span { transform: translateY(30%); opacity: 0; }
.sf-on .sf-mark span { transform: none; opacity: 1; transition: transform 1.4s cubic-bezier(.2,.8,.2,1), opacity .8s; }
.sf-on .sf-mark span:nth-child(2) { transition-delay: .06s; }
.sf-on .sf-mark span:nth-child(3) { transition-delay: .12s; }
.sf-on .sf-mark span:nth-child(4) { transition-delay: .18s; }

/* スマホ */
@media (max-width: 900px) {
  .sf-in { padding: 72px 20px 0; }
  .sf-nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 48px; column-gap: 16px; font-size: min(13px, 3.55vw); letter-spacing: .02em; }
  .sf-col > * { white-space: nowrap; }
  .sf-social { display: contents; }
  .sf-meta { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 56px; }
  .sf-meta-r { gap: 24px; flex-wrap: wrap; }
  .sf-card { border-radius: 6px; width: var(--wm, var(--w)); left: var(--xm, var(--x)); top: var(--ym, var(--y)); }
  .sf-card[data-desk] { display: none; }
  .sf-mark { margin-top: 40px; }
  .sf-card .sf-tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-js .sf-card, .sf-js .sf-mark span { opacity: 1 !important; transform: rotate(var(--r)) !important; }
  .sf-js .sf-mark span { transform: none !important; }
  .sf-js .sf-card img { transform: none !important; }
}