/* ============================================================
   小西MIHO プロジェクト 共通スタイル
   index.html / works.html / profile.html の3ページで共有する。
   ここを直すと全ページに効くので注意。
   ============================================================ */

:root{
  --paper:#FAF8F4;      /* 紙 */
  --ink:#1A1A18;        /* 墨 */
  --ink-soft:#5A574F;   /* 薄墨 */
  --line:#DED8CC;       /* 罫 */
  --shu:#B3382F;        /* 朱 = 落款の色。価格とアクセントだけに使う */
  --shu-soft:#F2E4E1;
  /* 書体は端末にあるものを借りる方針（Webフォントは読み込まない／2026-08-12 Pちゃん判断）。
     Mac・iPhoneはヒラギノ明朝、Windowsは游明朝、Androidは大半がNoto Serif CJKで明朝になる。
     古いAndroidなど明朝を持たない端末ではゴシックに化けるが、その分読み込みはゼロ。
     全端末で表示を揃えたくなったら、Noto Serif JPをWebフォントで読み込む */
  --serif:"Hiragino Mincho ProN","Yu Mincho","YuMincho","Noto Serif JP",serif;
  --sans:"Hiragino Sans","Yu Gothic","YuGothic","Noto Sans JP",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--serif); line-height:1.9;
  font-size:16px; -webkit-font-smoothing:antialiased;
}
/* 左右の余白は .wrap、上下の余白は section が持つ。
   longhandで分けているのは、.wrap（クラス）の方が section（要素）より
   詳細度が高く、shorthandだと上下paddingを打ち消してしまうため */
.wrap{max-width:960px;margin:0 auto;padding-left:24px;padding-right:24px}
/* 本文の読み幅。中央寄せにすると、グリッドを持つセクション（.wrapのまま）と
   左端が揃わずガタつくので、左揃えにして全セクションの開始位置を一致させる */
.narrow{max-width:680px}
section{padding-top:96px;padding-bottom:96px;border-top:1px solid var(--line)}
section:first-of-type{border-top:none}

/* --- 見出し --- */
.label{
  font-family:var(--sans); font-size:11px; letter-spacing:.28em;
  color:var(--shu); text-transform:uppercase; margin-bottom:20px;
}
h2{font-size:28px;font-weight:400;letter-spacing:.06em;line-height:1.6;margin-bottom:36px}
h3{font-size:18px;font-weight:400;letter-spacing:.04em;margin-bottom:14px}
p{margin-bottom:1.4em}
p:last-child{margin-bottom:0}
.lead{font-size:18px;line-height:2.1}
.small{font-size:13px;color:var(--ink-soft);line-height:1.8}

/* --- ヒーロー --- */
.hero{padding-top:72px;padding-bottom:96px;text-align:center;border-top:none}
.hero-art{
  max-width:520px;margin:0 auto 56px;aspect-ratio:4/5;
}
/* ヒーローは3行構成。上から「事実 → 主張 → 誰の作品か」で役割が違うので、
   サイズ・書体・色をはっきり分けて、3行が同格に見えないようにする */
.hero-title{font-size:clamp(26px,5.6vw,44px);font-weight:400;letter-spacing:.1em;line-height:1.7;margin-bottom:24px}
.hero-thesis{font-size:clamp(17px,2.9vw,22px);color:var(--ink-soft);letter-spacing:.09em;line-height:1.8;margin-bottom:32px}
.hero-sub{
  font-family:var(--sans);font-size:14px;color:var(--ink-soft);
  letter-spacing:.16em;margin-bottom:64px;line-height:2;
}
.hero-title span,.hero-thesis span,.hero-sub span{display:inline-block}

/* --- 価格ボード（このサイトの主役） --- */
.price-board{
  border:1px solid var(--ink); background:#fff;
  max-width:460px;margin:0 auto;padding:36px 28px 30px;
}
.price-today-label{
  font-family:var(--sans);font-size:13px;letter-spacing:.26em;
  color:var(--ink-soft);margin-bottom:16px;
}
/* 金額はH1より大きくしない。ページの主役は作品と言葉であって価格ではないため */
.price-value{
  font-size:clamp(42px,10vw,56px);line-height:1;color:var(--shu);
  letter-spacing:.02em;font-feature-settings:"tnum";
}
.price-value .yen{font-size:.42em;margin-right:.14em;letter-spacing:0}
.price-note{font-family:var(--sans);font-size:14px;color:var(--ink-soft);margin-top:20px;letter-spacing:.05em}
.price-divider{height:1px;background:var(--line);margin:24px 0 20px}
.price-rows{display:flex;justify-content:center;gap:0}
.price-row{flex:1;padding:0 8px}
.price-row + .price-row{border-left:1px solid var(--line)}
.price-row dt{font-family:var(--sans);font-size:12px;letter-spacing:.12em;color:var(--ink-soft);margin-bottom:8px}
.price-row dd{font-size:21px;font-feature-settings:"tnum"}
.price-caption{
  font-family:var(--sans);font-size:14px;color:var(--ink-soft);
  margin-top:28px;letter-spacing:.05em;line-height:1.9;
}
.badge-open{
  display:inline-block;background:var(--shu-soft);color:var(--shu);
  font-family:var(--sans);font-size:13px;letter-spacing:.14em;
  padding:6px 14px;margin-bottom:22px;
}

/* --- ボタン --- */
.btn{
  display:inline-block;font-family:var(--sans);font-size:13px;letter-spacing:.14em;
  padding:16px 40px;border:1px solid var(--ink);color:var(--ink);
  text-decoration:none;transition:.25s;background:transparent;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn-shu{border-color:var(--shu);color:#fff;background:var(--shu)}
.btn-shu:hover{background:#8E2B23;border-color:#8E2B23;color:#fff}
.btn-wrap{text-align:center;margin-top:44px}

/* --- 画像プレースホルダー（本番画像が入ったら自動で消える） --- */
.ph{
  width:100%;height:100%;min-height:120px;
  background:repeating-linear-gradient(45deg,#EFEBE3,#EFEBE3 8px,#E8E3D9 8px,#E8E3D9 16px);
  border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:11px;color:#9C978B;letter-spacing:.08em;
  text-align:center;padding:12px;gap:4px;
}
.ph strong{font-weight:600;color:#7E796D;font-size:11px}
/* 画像は絶対に切らない。枠に収まらない場合は余白ができる方を選ぶ。
   cover にすると作品や人物の端が黙って切り落とされるため */
img.art{width:100%;height:100%;object-fit:contain;display:block}

/* --- 作品グリッド --- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.work{text-decoration:none;color:inherit;display:block}
.work-img{aspect-ratio:3/4;overflow:hidden;background:#fff;border:1px solid var(--line)}
.work-img .ph{border:none}
.work-meta{margin-top:10px;font-family:var(--sans);font-size:12px;color:var(--ink-soft);letter-spacing:.04em}
.work-title{font-family:var(--serif);font-size:14px;color:var(--ink);margin-bottom:2px}
.work.sold .work-img{opacity:.4}
.work.sold .work-title::after{content:"　SOLD";color:var(--shu);font-size:11px;font-family:var(--sans);letter-spacing:.1em}

/* 主要作品は絵そのものを切らずに見せたいので、正方形の枠に収める（contain）。
   クロッキーのグリッドとは別扱い */
.grid-major .work-img{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;padding:10px}
.grid-major img.art{object-fit:contain;width:100%;height:100%}

/* --- 2カラム --- */
.two-col{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:start}
/* 縦横比を固定すると、横長の写真で上下に白帯が出る。
   枠は画像の形に合わせる */
.portrait{border:1px solid var(--line);background:#fff;line-height:0}

/* --- 経歴リスト --- */
/* 「学歴」「個展」「プロデュース」の3ブロックに分ける。
   1本の時系列だと個展の数が体感できず、後半のプロデュース業に埋もれて
   画家としてフェードアウトしたように読めてしまうため */
.cv-head{
  font-family:var(--sans);font-size:12px;letter-spacing:.2em;color:var(--ink);
  margin:34px 0 2px;padding-bottom:10px;border-bottom:1px solid var(--ink);
}
.cv-head:first-of-type{margin-top:26px}
.cv{list-style:none;font-size:14px;line-height:1.9}
/* 役職や補足は2行目に落として薄墨・小さめに。太字は固有名（会場名・イベント名）だけに使い、
   「総合プロデューサー」などの肩書きは強調しない */
.cv .role{display:block;color:var(--ink-soft);font-size:13px;line-height:1.75;margin-top:1px}
.lifespan{
  font-family:var(--sans);font-size:13px;color:var(--ink-soft);
  letter-spacing:.1em;margin-bottom:36px;
}
/* 経歴は全部で22項目あり、そのまま出すと作家紹介が本文より長くなる。
   読みたい人だけ開ける形にして、本文の流れを止めないようにする */
.cv-fold{border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:34px}
.cv-fold>summary{
  padding:18px 0;cursor:pointer;list-style:none;
  font-family:var(--sans);font-size:13px;letter-spacing:.14em;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.cv-fold>summary::-webkit-details-marker{display:none}
.cv-fold>summary::after{content:"＋";color:var(--shu);font-size:13px}
.cv-fold[open]>summary::after{content:"−"}
.cv-fold[open]{padding-bottom:24px}
.cv-fold .cv-head:first-of-type{margin-top:8px}
.cv li{display:flex;gap:18px;padding:10px 0;border-bottom:1px solid var(--line)}
.cv li:last-child{border-bottom:none}
.cv .yr{font-family:var(--sans);font-size:12px;color:var(--shu);flex:0 0 76px;letter-spacing:.06em;padding-top:3px}

/* --- ロードマップ --- */
.road{list-style:none}
.road li{
  display:grid;grid-template-columns:96px 1fr 104px;gap:20px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line);font-size:15px;
}
.road .date{font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:var(--ink-soft)}
.road .amt{text-align:right;font-feature-settings:"tnum";color:var(--shu);font-size:15px}
.road li.goal{background:var(--shu-soft);margin:0 -16px;padding:20px 16px;border-bottom:none}
.road li.goal .date,.road li.goal .amt{color:var(--shu)}
.road li.done{opacity:.45}
.phase2{margin-top:56px;padding-top:34px;border-top:1px solid var(--line)}
.phase2 h3{color:var(--shu);letter-spacing:.06em;margin-bottom:18px}

/* --- FAQ --- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  padding:20px 0;cursor:pointer;list-style:none;font-size:16px;
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";color:var(--shu);font-size:14px;flex:0 0 auto}
.faq details[open] summary::after{content:"−"}
.faq .a{padding:0 0 22px;font-size:14px;color:var(--ink-soft);line-height:1.95}

/* --- フッター --- */
footer{padding-top:64px;padding-bottom:80px;border-top:1px solid var(--line);font-family:var(--sans);font-size:12px;color:var(--ink-soft);letter-spacing:.05em;line-height:2}
footer a{color:var(--ink-soft)}

/* --- 編集メモ（公開前に消す） --- */
.todo{
  background:#FFF8E1;border-left:3px solid #E0B341;padding:14px 18px;
  font-family:var(--sans);font-size:12px;color:#7A6420;line-height:1.8;margin:20px 0;
}
.todo b{color:#5C4A12}

@media(max-width:720px){
  section{padding-top:64px;padding-bottom:64px}
  .grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .two-col{grid-template-columns:1fr;gap:28px}
  .portrait{max-width:280px}
  .road li{grid-template-columns:1fr;gap:4px;padding:16px 0}
  .road .amt{text-align:left}
  h2{font-size:23px;margin-bottom:28px}
  .price-board{padding:28px 20px 24px}
}

/* ============================================================
   グローバルナビ（3ページ共通）
   ============================================================ */
.nav{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;flex-wrap:wrap;
  padding-top:26px;padding-bottom:22px;
  border-bottom:1px solid var(--line);
}
.nav-home{
  font-family:var(--serif);font-size:16px;letter-spacing:.16em;
  color:var(--ink);text-decoration:none;white-space:nowrap;
}
.nav-links{display:flex;gap:26px;flex-wrap:wrap}
.nav-links a{
  font-family:var(--sans);font-size:12.5px;letter-spacing:.12em;
  color:var(--ink-soft);text-decoration:none;padding-bottom:2px;
  border-bottom:1px solid transparent;transition:.2s;white-space:nowrap;
}
.nav-links a:hover{color:var(--ink)}
/* 現在地は朱色＋下線 */
.nav-links a.is-current{color:var(--shu);border-bottom-color:var(--shu)}
/* ナビがある場合、直下のヒーローの上余白を詰める */
.nav + .hero{padding-top:56px}

@media(max-width:600px){
  .nav{padding-top:18px;padding-bottom:16px;gap:10px}
  .nav-home{font-size:15px}
  .nav-links{gap:18px}
  .nav-links a{font-size:11.5px;letter-spacing:.08em}
}

/* ============================================================
   作品ページ（works.html）
   ============================================================ */
.series-nav{display:flex;gap:26px;flex-wrap:wrap;margin-top:34px}
.series-nav a{
  font-family:var(--sans);font-size:12.5px;letter-spacing:.12em;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
  padding-bottom:5px;transition:.2s;
}
.series-nav a:hover{border-bottom-color:var(--shu);color:var(--shu)}

/* グリッドの各作品はクリックで拡大するのでbutton。見た目はリセットする */
.work-btn{
  background:none;border:none;padding:0;margin:0;
  font:inherit;color:inherit;text-align:left;cursor:pointer;width:100%;
}
.work-btn .work-img{transition:opacity .2s}
.work-btn:hover .work-img{opacity:.78}
.work-meta .coll{color:var(--shu)}

/* 拡大表示 */
.lightbox{
  position:fixed;inset:0;z-index:100;
  background:rgba(26,26,24,.94);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:40px 24px;
}
.lightbox[hidden]{display:none}
.lightbox img{max-width:min(1100px,92vw);max-height:82vh;object-fit:contain}
.lb-cap{
  font-family:var(--serif);font-size:14px;color:#E8E3D9;letter-spacing:.1em;margin:0;
}
.lb-close{
  position:absolute;top:18px;right:24px;
  background:none;border:none;color:#E8E3D9;font-size:30px;line-height:1;
  cursor:pointer;padding:8px;
}

/* ============================================================
   プロフィールページ（profile.html）
   ============================================================ */
.portrait img.art{width:100%;height:auto;object-fit:contain;display:block}
.doc-group{margin-bottom:44px}
.doc-label{
  font-family:var(--sans);font-size:12px;letter-spacing:.16em;color:var(--ink);
  padding-bottom:9px;border-bottom:1px solid var(--line);margin-bottom:18px;
}
.doc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.doc-shot{aspect-ratio:4/3;overflow:hidden;background:#fff;border:1px solid var(--line)}
.doc-shot img{width:100%;height:100%;object-fit:contain;display:block;background:#fff}
@media(max-width:720px){ .doc-grid{grid-template-columns:repeat(2,1fr);gap:10px} }

/* 一覧の続きを別ページへ送るリンク */
.cv-more{margin-top:22px}
.cv-more a, .more-link a{
  font-family:var(--sans);font-size:12.5px;letter-spacing:.12em;
  color:var(--shu);text-decoration:none;
  border-bottom:1px solid var(--shu);padding-bottom:4px;transition:.2s;
}
.cv-more a::after, .more-link a::after{content:"　→"}
.cv-more a:hover, .more-link a:hover{opacity:.65}
.more-link{margin-top:30px;text-align:center}

/* ヒーローの作品画像。絵は切らずに全体を見せる */
.hero-art{display:flex;align-items:center;justify-content:center}
.hero-art img.art{object-fit:contain;width:100%;height:100%}

/* ヒーロー画像のキャプション。発表済みの作品を出しているので、
   販売中の五百点と取り違えられないよう明示する */
.hero-cap{
  font-family:var(--sans);font-size:11.5px;color:var(--ink-soft);
  letter-spacing:.1em;margin:-38px 0 44px;
}

/* 語の途中で改行されると読みにくい箇所は、spanで折り返し位置を固定する */
.price-caption span,.hero-cap span{display:inline-block}

@media(max-width:720px){
  /* ヒーロー下96px＋セクション上64pxで空きすぎるので詰める */
  .hero{padding-bottom:56px}
  .hero-art{margin-bottom:44px}
  .hero-cap{margin-top:-30px;margin-bottom:36px}
}

/* ============================================================
   日本語の折り返し
   何も指定しないと「〜ひと／つ。」のように語や句の途中で改行され、
   1文字だけが次の行に落ちる。auto-phrase は文節単位で折り返す指定。
   未対応のブラウザでは単に無視されるので、入れて損はない。
   ============================================================ */
body{word-break:auto-phrase;line-break:strict}
h1,h2,h3,p,li,summary,dt,dd{word-break:auto-phrase}

@media(max-width:720px){
  /* 「なぜ、毎日値上がりするのか。」が23pxだと340px必要で1行に収まらないため */
  h2{font-size:21px}
  /* 導入段落の強調は文字サイズだけで足りる。行間の倍率まで変えると
     本文と揃っていないように見えるので、行間は本文と同じ1.9に合わせる */
  .lead{font-size:18px;line-height:1.9}
}

/* ボタンが2つ以上並ぶ場合、inline-blockのままだと折り返したときに
   縦の隙間がゼロになって重なって見える。flexにして間隔を持たせる */
.btn-wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.btn-wrap--left{justify-content:flex-start}
.btn-wrap .small{flex:0 0 100%}

@media(max-width:720px){
  /* ポートレートは280px上限のままだと列の中で左に寄って見えるので中央に置く */
  .portrait{margin-left:auto;margin-right:auto}
  /* 幅の狭い画面ではボタンを縦積みにして、押し間違いを防ぐ */
  .btn-wrap{flex-direction:column;align-items:stretch}
  .btn{text-align:center}
}




/* 作品グリッドは「形」ごとに別のグリッドへ分けて、同じ縦横比のものだけを並べる。
   ただし枠の大きさは全グループで共通（正方形）にする。
   枠ごとに比率を変えると、縦長の作品だけが極端に大きく表示されて
   ページ全体のバランスが崩れるため。絵は枠の中に収める（contain）。
   グループの並び順は works-manifest.json 側で決定：
   ①列数に満たないものは最後 ②行がぴったり埋まるものを先頭 ③残りは広い順 */
.grid-major + .grid-major{margin-top:20px}
.grid-major .work-img{aspect-ratio:1/1;padding:10px;min-height:0}
.grid-major img.art{width:100%;height:100%;object-fit:contain;max-height:none}

/* 中国語題など、作家がつけたもう一つの題 */
.work-meta .alt{color:var(--ink-soft)}

/* クロッキー会の記録写真。本文の「描くことはやめませんでした」を裏づける */
.croquis-set{margin:8px 0 1.4em}
.croquis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.croquis-grid img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff;border:1px solid var(--line);display:block}
.croquis-set figcaption{
  font-family:var(--sans);font-size:12px;color:var(--ink-soft);
  letter-spacing:.05em;margin-top:9px;line-height:1.8;
}
@media(max-width:720px){ .croquis-grid{grid-template-columns:1fr;gap:8px} }

/* 見出し（ラベル・h2）はセクションの左端に置いたまま、本文だけを内側へ寄せる。
   本文ブロックが左右中央に来るので、中央揃えのヒーローと同じ軸に乗る。
   文字自体は左揃えのまま（日本語の長文は中央揃えだと読みにくいため） */
.narrow{margin-left:auto;margin-right:auto}
@media(max-width:860px){
  /* 幅が狭いと寄せる意味がなくなるので、左端に戻す */
  .narrow{margin-left:0;margin-right:0}
}

/* ============================================================
   中央軸に統一（試作）
   ヒーローと価格ボードが中央なので、以降の見出しも中央に置いて
   ページを貫く軸を1本にする。本文の文字は左揃えのまま
   ============================================================ */
section > .label,
section > h2,
header.wrap > .label,
header.wrap > h2{text-align:center}
.lifespan{text-align:center}
.cv-more,.more-link{text-align:center}
.series-nav{justify-content:center}

/* ロードマップの表は幅いっぱいに広げると、内容と金額が離れすぎて
   目線が横に飛ぶ。本文と同じ読み幅に収めて中央に置く */
.road{max-width:660px;margin-left:auto;margin-right:auto}
.road li{grid-template-columns:88px 1fr auto;gap:16px}
.road .amt{min-width:76px}
@media(max-width:720px){
  .road{max-width:none}
  .road li{grid-template-columns:1fr}
}

/* ロードマップの列見出し。右端の金額が何の値段か分かるようにする */
.road li.head{
  font-family:var(--sans);font-size:11px;letter-spacing:.14em;
  color:var(--ink-soft);padding:0 0 10px;border-bottom:1px solid var(--ink);
}
.road li.head span:last-child{text-align:right}

/* ============================================================
   公開点数の約束（500点の10% ＝ 50点 ＝ 10点×5回）
   数字そのものを見せたいので、朱色の大きな数字で組む
   ============================================================ */
.promise{
  max-width:660px;margin:0 auto 44px;padding:30px 28px 26px;
  border:1px solid var(--ink);background:#fff;text-align:center;
}
.promise-lead{
  font-family:var(--sans);font-size:13px;color:var(--ink-soft);
  letter-spacing:.1em;margin-bottom:16px;
}
.promise-nums{
  display:flex;align-items:baseline;justify-content:center;
  gap:16px;flex-wrap:wrap;margin-bottom:18px;
}
.promise-nums .pn{font-size:17px;letter-spacing:.04em;white-space:nowrap}
.promise-nums .pn b{
  font-size:40px;font-weight:400;color:var(--shu);
  letter-spacing:.02em;font-feature-settings:"tnum";margin:0 2px;
}
.promise-nums .po{color:var(--line);font-size:20px}
.promise-note{
  font-family:var(--sans);font-size:13px;color:var(--ink-soft);
  line-height:1.95;letter-spacing:.04em;margin:0;
  padding-top:18px;border-top:1px solid var(--line);
}
.promise-note strong{color:var(--ink)}

/* 第一ウェーブの販売グリッドは10点。5列×2行でぴったり収める。
   作品ページの3列とは役割が違う（売り場）ので、意図的に分ける */
#workGrid{grid-template-columns:repeat(5,1fr);gap:14px}
@media(max-width:900px){ #workGrid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:600px){
  #workGrid{grid-template-columns:repeat(2,1fr);gap:10px}
  .promise{padding:24px 18px 20px}
  .promise-nums{gap:10px}
  .promise-nums .pn b{font-size:32px}
}

/* 収蔵とメディア実績は経歴の裏づけになる情報なので、本文注記より1段大きく */
.credits{font-size:14px;line-height:1.95}
.credits strong{color:var(--ink)}

/* 看板は「名前＋何をしているか」の2段。
   MANDARAは母が2007/2008に上海で立ち上げたアートイベントの名前を継いだもの */
.nav-home{display:block;line-height:1.35}
.nh-name{
  display:block;font-family:var(--sans);font-size:15px;
  letter-spacing:.22em;color:var(--ink);
}
.nh-sub{
  display:block;font-family:var(--serif);font-size:11.5px;
  letter-spacing:.06em;color:var(--ink-soft);margin-top:3px;
}
@media(max-width:600px){
  .nh-name{font-size:14px;letter-spacing:.18em}
  .nh-sub{font-size:10.5px}
}

/* フッターのプロジェクト名。看板では主張しないが、識別子としては残す */
.foot-proj{
  font-family:var(--sans);font-size:11.5px;letter-spacing:.14em;
  color:var(--ink-soft);display:inline-block;margin-top:5px;
}