@charset "UTF-8";

/* ==========================================================================
   谷本龍心 ポートフォリオ ─ 基盤スタイル
   カラートークン / リセット / タイポグラフィ / ヘッダー / フッター
   ========================================================================== */

:root{
  color-scheme: light;

  /* --- 年表の14段カラーランプ ---------------------------------------------
     暖色（原点）から寒色（現在）へ、年表の上から下へなめらかに繋がる。
     -ink は白背景でコントラスト比4.6:1以上を確保した派生色。
     円やリボンなど「面」には鮮やかな方、見出しやリンクなど「文字」には -ink を使う。 */
  --c1:#F0A03C; --c1-ink:#A9630D;
  --c2:#EB8847; --c2-ink:#BC5714;
  --c3:#E6714F; --c3-ink:#CE451D;
  --c4:#DF5E62; --c4-ink:#D8393D;
  --c5:#D75178; --c5-ink:#D23A66;
  --c6:#C4559E; --c6-ink:#BF4695;
  --c7:#A65BB6; --c7-ink:#A355B3;
  --c8:#7F68C3; --c8-ink:#7D65C2;
  --c9:#5D79C7; --c9-ink:#5471C4;
  --c10:#3F90C8; --c10-ink:#317AAD;
  --c11:#2C9FB2; --c11-ink:#237F8E;
  --c12:#29A595; --c12-ink:#208376;
  --c13:#33A775; --c13-ink:#28835C;
  --c14:#4FA85A; --c14-ink:#3D8346;

  /* --- 中立色（わずかに寒色寄り） --- */
  --paper:#FFFFFF;
  --ground:#F4F6F9;
  --ground-2:#EDF1F5;
  --ink:#1B2029;
  --ink-2:#39414F;
  --muted:#616B7A;
  --faint:#98A1AF;
  --rule:#E1E6ED;
  --rule-2:#CFD6E0;

  --shadow-sm:0 1px 2px rgba(27,32,41,.06);
  --shadow-md:0 2px 6px rgba(27,32,41,.06), 0 12px 28px -16px rgba(27,32,41,.22);
  --shadow-lg:0 4px 12px rgba(27,32,41,.07), 0 24px 48px -24px rgba(27,32,41,.28);

  --wrap:1080px;
  --radius:10px;

  --font-jp:"Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-head:"Zen Kaku Gothic New", var(--font-jp);
  --font-num:"Barlow Condensed", "Arial Narrow", var(--font-jp);
}

/* --------------------------------------------------------------------------
   リセット
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--font-jp);
  font-size:16px;
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%; height:auto; display:block}
ul,ol{margin:0; padding:0; list-style:none}
figure{margin:0}
/* word-break:auto-phrase は日本語を文節単位で折り返す（対応外のブラウザでは無視される）。
   「ワークショッ／プ」のような不自然な改行を防ぐため。 */
h1,h2,h3,h4{
  margin:0; font-family:var(--font-head); font-weight:700; line-height:1.45;
  text-wrap:balance; word-break:auto-phrase;
}
p{margin:0}

a{color:var(--ink); text-decoration-color:var(--rule-2); text-underline-offset:3px}
a:hover{text-decoration-color:currentColor}

:focus-visible{outline:3px solid var(--c8); outline-offset:3px; border-radius:3px}

/* 数字は等幅で桁を揃える */
.num{font-family:var(--font-num); font-variant-numeric:tabular-nums; letter-spacing:.01em}

/* --------------------------------------------------------------------------
   レイアウト部品
   -------------------------------------------------------------------------- */
.wrap{width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px}
.wrap--narrow{max-width:760px}

.section{padding-block:72px}
.section--tint{background:var(--paper)}

.section-head{margin-bottom:36px}
.eyebrow{
  font-family:var(--font-num); font-size:15px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  margin-bottom:6px;
}
.section-head h2{font-size:clamp(24px,3.4vw,32px); letter-spacing:.01em}
.section-head p{margin-top:12px; color:var(--muted); font-size:15px; max-width:62ch}

/* --------------------------------------------------------------------------
   ヘッダー
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--rule);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  height:62px;
}
.brand{display:flex; align-items:baseline; gap:10px; text-decoration:none; font-weight:700}
.brand b{font-family:var(--font-head); font-size:17px; letter-spacing:.02em}
.brand span{font-family:var(--font-num); font-size:13px; letter-spacing:.14em; color:var(--faint); text-transform:uppercase}

.site-nav ul{display:flex; gap:4px; align-items:center}
.site-nav a{
  display:block; padding:7px 12px; border-radius:999px;
  font-size:13.5px; font-weight:500; color:var(--ink-2); text-decoration:none;
}
.site-nav a:hover{background:var(--ground-2); color:var(--ink)}

.nav-toggle{
  display:none; width:40px; height:40px; padding:0;
  border:1px solid var(--rule); border-radius:8px; background:var(--paper);
  cursor:pointer; align-items:center; justify-content:center;
}
.nav-toggle span{
  display:block; width:17px; height:2px; background:var(--ink); border-radius:2px;
  position:relative;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:17px; height:2px; background:var(--ink); border-radius:2px;
}
.nav-toggle span::before{top:-5.5px}
.nav-toggle span::after{top:5.5px}

@media (max-width:860px){
  .nav-toggle{display:flex}
  .site-nav{
    position:absolute; inset-inline:0; top:100%;
    background:var(--paper); border-bottom:1px solid var(--rule);
    box-shadow:var(--shadow-md);
    padding:8px 16px 14px;
  }
  .site-nav[hidden]{display:none}
  .site-nav ul{flex-direction:column; align-items:stretch; gap:0}
  .site-nav a{padding:11px 8px; border-radius:6px; font-size:15px}
}

/* --------------------------------------------------------------------------
   ボタン / タグ
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 20px; border-radius:999px;
  font-size:14px; font-weight:700; text-decoration:none;
  border:1.5px solid var(--ink); color:var(--ink); background:transparent;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
.btn:hover{background:var(--ink); color:var(--paper)}
.btn:active{transform:translateY(1px)}
.btn--accent{border-color:var(--accent-ink,var(--ink)); color:var(--accent-ink,var(--ink))}
.btn--accent:hover{background:var(--accent-ink,var(--ink)); color:var(--paper)}
.btn .arw{font-family:var(--font-num); font-size:16px; line-height:1}

.tags{display:flex; flex-wrap:wrap; gap:7px}
.tag{
  font-size:12px; font-weight:500; line-height:1.9;
  padding:1px 11px; border-radius:999px;
  background:var(--ground-2); color:var(--ink-2); border:1px solid var(--rule);
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   フッター
   -------------------------------------------------------------------------- */
.site-footer{
  background:var(--paper); border-top:1px solid var(--rule);
  padding-block:40px 32px; margin-top:0;
}
.site-footer__inner{display:flex; flex-wrap:wrap; gap:20px 40px; justify-content:space-between; align-items:flex-start}
.site-footer small{color:var(--muted); font-size:12.5px; line-height:1.8; display:block}
.site-footer .brand{margin-bottom:6px}

/* --------------------------------------------------------------------------
   スクロール演出（JS無効時・reduced-motion時は最初から表示）
   -------------------------------------------------------------------------- */
.js .reveal{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease}
.js .reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1 !important; transform:none !important; transition:none}
}

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:100;
  background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:0 0 8px 8px;
  font-size:14px; font-weight:700; text-decoration:none; transition:top .18s ease;
}
.skip-link:focus{top:0}