/* =============================================================
   ViFight — ポートフォリオ（制作事例ギャラリー）
   白基調・スクリーンショットが主役のミニマルなギャラリー
   ============================================================= */
:root {
  --pf-bg: #ffffff;
  --pf-bg-soft: #f6f6f4;
  --pf-line: #e8e6e1;
  --pf-line-strong: #d6d3cd;
  --pf-ink: #14120f;
  --pf-ink-mid: #5f5b54;
  --pf-ink-soft: #8f8a81;
  --pf-accent: #0f9d6e;
  --font-en: 'Inter', sans-serif;
  --font-jp: 'Noto Sans JP', 'Inter', sans-serif;
  --ease-out: cubic-bezier(0.16,1,0.3,1);
}
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body.pf-page {
  font-family: var(--font-jp);
  background: var(--pf-bg);
  color: var(--pf-ink);
  line-height: 1.85;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.pf-page a { color: inherit; text-decoration: none; }
body.pf-page button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img { max-width:100%; display:block; }
ul { list-style:none; }
.pc-br { display:inline; }
@media (max-width:680px){ .pc-br{ display:none; } }
::selection { background: var(--pf-ink); color:#fff; }

/* ---------- header ---------- */
.pf-header {
  position: sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding: 15px clamp(16px,4vw,44px);
  background: rgba(255,255,255,0.88);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--pf-line);
}
.pf-logo { font-family:var(--font-en); font-weight:600; font-size:21px; letter-spacing:-0.5px; }
.pf-nav { display:flex; align-items:center; gap: clamp(12px,3vw,26px); }
.pf-nav a { font-size:13.5px; color:var(--pf-ink-mid); }
.pf-nav a:hover { color:var(--pf-ink); }
.pf-nav-cta {
  padding:9px 20px; border-radius:100px; font-weight:700; font-size:13.5px;
  background: var(--pf-ink); color:#fff !important;
  transition: background .3s;
}
.pf-nav-cta:hover { background: var(--pf-accent); }
@media (max-width:520px){ .pf-nav .pf-nav-hide { display:none; } }

/* ---------- hero ---------- */
.pf-hero { padding: clamp(44px,7vw,92px) clamp(18px,4vw,44px) clamp(24px,3vw,40px); max-width:1400px; margin:0 auto; }
.pf-eyebrow {
  font-family:var(--font-en); letter-spacing:0.24em; text-transform:uppercase;
  font-size:11.5px; color:var(--pf-accent); margin-bottom:14px; font-weight:600;
}
.pf-title { font-size: clamp(28px,5.2vw,58px); font-weight:700; line-height:1.28; letter-spacing:-0.015em; word-break:keep-all; }
.pf-lead { margin-top: clamp(14px,2vw,20px); max-width:660px; color:var(--pf-ink-mid); font-size: clamp(13.5px,1.5vw,15.5px); line-height:1.95; }
.pf-stats { display:flex; flex-wrap:wrap; gap: clamp(18px,4vw,48px); margin-top: clamp(22px,3vw,36px); }
.pf-stat-num { font-family:var(--font-en); font-size: clamp(26px,3.6vw,40px); font-weight:600; line-height:1; letter-spacing:-0.02em; }
.pf-stat-label { font-size:12px; color:var(--pf-ink-soft); letter-spacing:0.03em; margin-top:5px; }

/* ---------- filter ---------- */
.pf-filter {
  position: sticky; top:58px; z-index:50;
  display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
  padding: 12px clamp(16px,4vw,44px) 14px;
  max-width:1400px; margin:0 auto;
  background: var(--pf-bg);
  border-bottom: 1px solid var(--pf-line);
  -webkit-overflow-scrolling:touch;
}
.pf-filter::-webkit-scrollbar { display:none; }
.pf-chip {
  flex:0 0 auto; padding:7px 16px; border-radius:100px;
  border:1px solid var(--pf-line-strong); background:#fff;
  color:var(--pf-ink-mid); font-size:13px; letter-spacing:0.02em;
  transition: border-color .25s, background .25s, color .25s;
}
.pf-chip:hover { border-color: var(--pf-ink); color: var(--pf-ink); }
.pf-chip.is-active { background: var(--pf-ink); color:#fff; border-color: var(--pf-ink); font-weight:600; }

/* ---------- grid (SANKOU!-like) ---------- */
.pf-grid {
  display:grid; gap: clamp(28px,3.2vw,44px) clamp(18px,2.2vw,28px);
  grid-template-columns: 1fr;
  max-width:1400px; margin:0 auto;
  padding: clamp(26px,3.4vw,44px) clamp(16px,4vw,44px) clamp(60px,8vw,110px);
  scroll-margin-top: 120px;
}
@media (min-width:640px){ .pf-grid { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1080px){ .pf-grid { grid-template-columns: repeat(3,1fr); } }

.pf-card { display:block; width:100%; text-align:left; }
.pf-card:focus-visible { outline:2px solid var(--pf-accent); outline-offset:4px; border-radius:4px; }

/* サムネイル：サイトのスクリーンショットが主役 */
.pf-thumb {
  position:relative; display:block; overflow:hidden;
  aspect-ratio: 16/10; border-radius:6px;
  background: linear-gradient(135deg, var(--c1,#333) 0%, var(--c2,#111) 100%);
  border:1px solid var(--pf-line);
  box-shadow: 0 1px 2px rgba(20,18,15,0.04);
  transition: box-shadow .5s var(--ease-out), transform .5s var(--ease-out);
}
.pf-card:hover .pf-thumb { box-shadow: 0 18px 44px rgba(20,18,15,0.15); transform: translateY(-4px); }
.pf-thumb-img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit: cover; object-position: top center;
  transition: transform 1.1s var(--ease-out);
}
.pf-card:hover .pf-thumb-img { transform: scale(1.035); }
/* 画像が無い案件のフォールバック（ブランド色＋案件名） */
.pf-thumb-name {
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:18px;
  font-family:var(--font-en); font-weight:700; letter-spacing:-0.01em; line-height:1.2;
  font-size: clamp(19px,2.6vw,26px); color: var(--ct,#fff); text-align:center;
  text-shadow: 0 2px 16px rgba(0,0,0,0.25); word-break:keep-all;
}
.pf-thumb-img + .pf-thumb-name { display:none; }
.pf-thumb-sub { font-family:var(--font-jp); font-size:11px; font-weight:500; letter-spacing:0.1em; opacity:0.78; }

.pf-body { padding-top: 14px; }
.pf-name { font-size: 15.5px; font-weight:700; line-height:1.55; letter-spacing:0.01em; }
.pf-card:hover .pf-name { color: var(--pf-accent); }
.pf-desc {
  margin-top:6px; font-size:13px; line-height:1.8; color:var(--pf-ink-mid);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pf-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.pf-tag {
  font-size:11px; letter-spacing:0.02em; padding:3px 10px; border-radius:3px;
  background: var(--pf-bg-soft); color: var(--pf-ink-soft); border:1px solid var(--pf-line);
}

/* ---------- modal (詳細) ---------- */
.pf-modal { position:fixed; inset:0; z-index:200; display:none; }
.pf-modal.open { display:block; }
.pf-modal-backdrop { position:absolute; inset:0; background:rgba(20,18,15,0.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.pf-modal-dialog {
  position:relative; z-index:2; max-width:820px; margin:0 auto;
  height:100dvh; overflow-y:auto; overscroll-behavior:contain;
  background: #fff;
  animation: pfUp .42s var(--ease-out) both;
}
@keyframes pfUp { from { opacity:0; transform: translateY(20px); } to { opacity:1; transform:none; } }
.pf-modal-close {
  position:fixed; top:16px; right:16px; z-index:5; width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--pf-line-strong); color:var(--pf-ink);
  box-shadow:0 4px 16px rgba(20,18,15,0.14);
}
.pf-modal-close svg { width:21px; height:21px; }
.pf-modal-close:hover { background: var(--pf-ink); color:#fff; border-color: var(--pf-ink); }

.pf-m-hero { position:relative; aspect-ratio:16/10; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg, var(--c1,#333), var(--c2,#111)); }
.pf-m-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position: top center; }
.pf-m-hero-name { position:relative; z-index:1; font-family:var(--font-en); font-weight:700; font-size:clamp(22px,4vw,36px); color:var(--ct,#fff); text-align:center; padding:20px; text-shadow:0 2px 18px rgba(0,0,0,0.3); word-break:keep-all; }
.pf-m-hero-img + .pf-m-hero-name { display:none; }

.pf-m-body { padding: clamp(24px,4vw,44px); }
.pf-m-cat { font-family:var(--font-en); font-size:11px; letter-spacing:0.14em; color:var(--pf-accent); text-transform:uppercase; font-weight:600; }
.pf-m-title { font-size: clamp(21px,3.2vw,30px); font-weight:700; line-height:1.45; margin:9px 0 6px; letter-spacing:-0.01em; }
.pf-m-year { font-size:12.5px; color:var(--pf-ink-soft); }
.pf-m-desc { margin-top:18px; color:var(--pf-ink-mid); font-size:14px; line-height:2.05; }
.pf-m-sec { margin-top: clamp(26px,3.6vw,38px); }
.pf-m-sec h3 {
  font-size:12px; letter-spacing:0.1em; color:var(--pf-ink-soft); text-transform:uppercase;
  font-family:var(--font-en); font-weight:600; margin-bottom:14px;
  padding-bottom:9px; border-bottom:1px solid var(--pf-line);
}
.pf-points { display:flex; flex-direction:column; gap:12px; }
.pf-point { padding: 16px 18px; border-radius:6px; background: var(--pf-bg-soft); border-left:2px solid var(--pf-accent); }
.pf-point-h { font-weight:700; font-size:14px; margin-bottom:5px; }
.pf-point-p { font-size:13px; line-height:1.9; color:var(--pf-ink-mid); }
.pf-feat { display:flex; flex-direction:column; gap:8px; }
.pf-feat li { position:relative; padding-left:18px; font-size:13px; line-height:1.85; color:var(--pf-ink-mid); }
.pf-feat li::before { content:''; position:absolute; left:2px; top:0.75em; width:5px; height:5px; border-radius:50%; background:var(--pf-accent); }
.pf-m-stack { display:flex; flex-wrap:wrap; gap:7px; }
.pf-m-stack span { font-size:12px; padding:5px 12px; border-radius:4px; background:var(--pf-bg-soft); border:1px solid var(--pf-line); color:var(--pf-ink-mid); }
.pf-m-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top: clamp(28px,4vw,40px); }
.pf-m-btn {
  display:inline-flex; align-items:center; gap:9px; padding:14px 28px; border-radius:100px;
  background: var(--pf-ink); color:#fff; font-weight:700; font-size:14px;
  transition: background .3s, transform .3s var(--ease-out), gap .3s;
}
.pf-m-btn:hover { background: var(--pf-accent); transform: translateY(-2px); gap:13px; }
.pf-m-btn--ghost { background:#fff; border:1px solid var(--pf-line-strong); color:var(--pf-ink); }
.pf-m-btn--ghost:hover { background: var(--pf-bg-soft); color:var(--pf-ink); }

/* ---------- CTA / footer ---------- */
.pf-cta { text-align:center; max-width:720px; margin:0 auto; padding: clamp(44px,6vw,76px) clamp(20px,5vw,40px); border-top:1px solid var(--pf-line); }
.pf-cta h2 { font-size: clamp(19px,2.8vw,28px); font-weight:700; line-height:1.55; word-break:keep-all; letter-spacing:-0.01em; }
.pf-cta p { margin:14px 0 24px; color:var(--pf-ink-mid); font-size: clamp(13.5px,1.5vw,15px); line-height:1.9; }
.pf-cta-btn {
  display:inline-flex; align-items:center; gap:10px; padding:16px 36px; border-radius:100px;
  background: var(--pf-ink); color:#fff; font-weight:700;
  transition: background .3s, transform .35s var(--ease-out), gap .3s;
}
.pf-cta-btn:hover { background: var(--pf-accent); transform:translateY(-2px); gap:14px; }
.pf-footer { border-top:1px solid var(--pf-line); padding:28px clamp(16px,4vw,40px); text-align:center; color:var(--pf-ink-soft); font-size:12.5px; display:flex; flex-direction:column; gap:12px; align-items:center; }
.pf-footer-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; }
.pf-footer-nav a:hover { color:var(--pf-ink); }

/* ---------- reveal ---------- */
.pf-reveal { opacity:0; transform: translateY(20px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.pf-reveal.is-in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
  .pf-reveal { opacity:1; transform:none; }
}