/* === mononoki を全体に適用（woff2 → ttf フォールバック） === */
@font-face {
  font-family: 'mononoki';
  src: url('fonts/MononokiNerdFont-Regular.woff2') format('woff2'),
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'mononoki';
  src: url('fonts/MononokiNerdFont-Bold.woff2') format('woff2'),
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --bg1:#0b1220;--bg2:#0b1020;--fg:#e2e8f0;--muted:#94a3b8;--ring:rgba(255,255,255,.1);
  /* 追加：モダンなグラデのアクセント色 */
  --ac1:#60a5fa; /* sky-400 */
  --ac2:#a78bfa; /* violet-400 */
  --ac3:#34d399; /* emerald-400 */
}
@media (prefers-color-scheme: light){:root{--bg1:#f8fafc;--bg2:#eef2ff;--fg:#0f172a;--muted:#475569;--ring:rgba(0,0,0,.06)}}

*{box-sizing:border-box}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:'mononoki', monospace; font-size:16px; line-height:1.6; color:var(--fg);
  background:linear-gradient(120deg,var(--bg1),var(--bg2)) fixed;
}
button,input,select,textarea{font:inherit}
h1,h2,h3,h4,h5,h6,code,pre,.headline,.tablink{font-family:'mononoki', monospace}

/* 背景のぼかしオーブ */
.bg-orbs::before,.bg-orbs::after{content:"";position:fixed;inset:auto;filter:blur(60px);z-index:-1;border-radius:9999px}
.bg-orbs::before{top:-60px;left:-40px;width:280px;height:280px;background:rgba(16,185,129,.18)}
.bg-orbs::after{bottom:-80px;right:-60px;width:320px;height:320px;background:rgba(99,102,241,.16)}

/* フルスクリーンの巨大プレビュー */
.preview{
  position:relative; width:100vw; height:100vh; overflow:hidden; background:#082b4b;
}
.media, .media img, .media video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

/* 3行見出し（縦中央寄せ・縦引き伸ばし・行間確保） */
.headline{
  position:absolute; left:1vw; top:0; bottom:0; z-index:3; pointer-events:none;
  display:flex; flex-direction:column; justify-content:center;
  font-weight:900; letter-spacing:-.02em; color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.55);
  margin:0; padding:0;
}
.headline span{
  display:block; text-align:left;
  font-size:clamp(28px, 12vh, 22vh);
  line-height:1;
  margin:4vh 0; padding:0;
  transform:scaleY(1.5); transform-origin:left center; /* 縦に引き伸ばす */
}

/* 下部グラデで可読性UP */
.fade{position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(0deg,rgba(0,0,0,.45),transparent)}

/* セクション */
.section{
  min-height:100vh; display:flex; align-items:center;
  border-top:1px solid var(--ring);
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.04));
}
.container{max-width:1100px; margin:0 auto; padding:6vh 20px;}
.section h3{margin:0 0 12px; font-size:clamp(24px, 5vw, 40px); font-weight:900;}
.section p{margin:0; color:var(--muted)}
.desc{max-width:1100px;margin:10px auto 32px;padding:0 20px;opacity:.8}

/* === Projects grid === */
.proj-controls{ display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 16px; }
.chip{ appearance:none; border:1px solid var(--ring); background:transparent; color:inherit; padding:6px 10px; border-radius:999px; cursor:pointer; font-weight:700; }
.chip.active{ background:linear-gradient(135deg, var(--ac1), var(--ac2)); color:#fff; border-color:transparent; }
.proj-grid{ display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); }
.proj-card{ position:relative; overflow:hidden; border-radius:16px; background:rgba(255,255,255,.03); border:1px solid var(--ring); box-shadow:0 10px 22px var(--ring); }
.proj-card img{ width:100%; height:180px; object-fit:cover; display:block; filter:saturate(1.02); transition: transform .35s ease; }
.proj-card:hover img{ transform: scale(1.05); }
.proj-info{ padding:10px 12px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.proj-title{ font-weight:900; letter-spacing:-.01em; }
.proj-tags{ display:flex; gap:6px; flex-wrap:wrap; opacity:.8; }
.tag{ font-size:12px; border:1px solid var(--ring); border-radius:999px; padding:2px 6px; }
.proj-actions{ display:flex; gap:8px; }
.btn.small{ padding:6px 10px; border-radius:10px; font-weight:800; }

/* === Contact links === */
.contact-links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; justify-content:center; }
.icon-link{ display:inline-flex; align-items:center; justify-content:center; gap:0; padding:10px; width:42px; height:42px; border-radius:12px; border:1px solid var(--ring); background:rgba(255,255,255,.03); color:inherit; text-decoration:none; box-shadow:0 10px 22px var(--ring); }
.icon-link:hover{ background:linear-gradient(135deg, var(--ac1), var(--ac2)); color:#fff; border-color:transparent; }
.icon{ width:20px; height:20px; display:block; }

/* Compact contact section */
#contact{ min-height:auto; }
#contact .container{ padding:22px 20px; }
#contact h3{ font-size:clamp(18px,2.8vw,24px); margin-bottom:8px; }
.contact-links{ gap:12px; }
.icon-link{ padding:10px; width:80px; height:80px; border-radius:12px; box-shadow:0 8px 18px var(--ring); }
.icon{ width:70px; height:77px; }
/* small text under icons */
.contact-column{ display:flex; flex-direction:column; align-items:center; gap:48px; margin-top:8px; }
.contact-meta{ margin-top:0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:40px; }
.contact-line{ margin:0; font-size:.8rem; font-weight:400; opacity:.9; }
.contact-credit{ margin:0; font-size:.9rem; opacity:.75; }
.mail-link{ color:inherit; text-decoration:none; border-bottom:1px dotted currentColor; font-size:1rem; font-weight:600; }
.mail-link:hover{ text-decoration:underline; }

/* スクロール時に出現するタブ（A: スライドダウン＋フェード） */
.sticky-tabs{
  position:fixed; top:12px; left:50%; transform:translate(-50%, -12px);
  display:flex; gap:8px;
  background:rgba(15,23,42,.55);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border:1px solid var(--ring); padding:8px; border-radius:999px; z-index:10;

  opacity:0; pointer-events:none;
  transition:transform .35s cubic-bezier(.22,.61,.36,1), opacity .25s ease;
}
.sticky-tabs.visible{ transform:translate(-50%, 0); opacity:1; pointer-events:auto; }

.tablink{
  appearance:none; border:0; border-radius:999px; padding:8px 14px;
  color:#fff; background:transparent; font-weight:800; cursor:pointer;
}
.tablink:hover{background:rgba(255,255,255,.08)}
.tablink:focus{outline:2px solid rgba(255,255,255,.35); outline-offset:2px}

.tablink.active{
  background: linear-gradient(135deg, var(--ac1), var(--ac2), var(--ac3));
  color:#fff;
  box-shadow:
    0 6px 18px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.18) inset;
  transform: translateY(-1px);
}

/* 低モーション設定への配慮 */
@media (prefers-reduced-motion: reduce){
  .sticky-tabs, .sticky-tabs.visible, .tablink{ transition:none !important; transform:none !important; filter:none !important; }
}

/* プレースホルダ */
.placeholder{ width:100%; height:100%; background:linear-gradient(135deg, rgba(148,163,184,.25), rgba(226,232,240,.35)); }

/* === About me layout === */
.about-grid{ display:grid; grid-template-columns:1fr; gap:18px; align-items:center; }
@media(min-width:900px){ .about-grid{ grid-template-columns: 1.1fr 1.3fr; } }
.about-media{ width:100%; }
.about-frame{ position:relative; border-radius:20px; overflow:hidden; background:linear-gradient(135deg,#111827,#0b0f1a); box-shadow:0 16px 40px var(--ring); aspect-ratio:4/3; }
.about-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.02); }
.about-text{ padding:8px 6px; }
.about-kicker{ margin:0 0 6px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:.7; }
.about-title{ margin:.1rem 0 10px; font-size:clamp(24px,3vw,36px); font-weight:900; letter-spacing:-.02em; }
.about-card{ border:1px solid var(--ring); border-radius:14px; padding:14px 16px; background:rgba(255,255,255,.03); box-shadow:0 6px 16px var(--ring); }
@media (prefers-color-scheme: light){ .about-card{ background:rgba(15,23,42,.03); } }
.about-name{ margin:.2rem 0 .2rem; font-size:clamp(18px,2.2vw,24px); font-weight:800; }
.about-role{ margin:0 0 .6rem; opacity:.8; font-size:.95rem; }
.about-bio{ margin:.2rem 0 1rem; line-height:1.7; opacity:.95; }