/* =========================================================================
   あみ ポートフォリオ — スタイル
   デザイン確定方向（崩さない）：純白背景 / 上品ミニマル / グラデなし
   角丸ほぼ0(2px) / 影は控えめ or なし / 作品の色は殺さない
   和文：Noto Sans JP（ゴシック）に統一 ／ 欧文見出し Cormorant Garamond は維持
   モック index-fv-v2.html のスタイルをそのまま移植（本実装の器）
   ========================================================================= */

:root{
  --bg:        #FFFFFF;   /* 純白（確定・生成りに戻さない） */
  --surface:   #FFFFFF;
  --ink:       #6f6f6f;   /* もう一段薄いグレー（あみさん指摘）。白背景で本文可読性の下限は維持 */
  --ink-sub:   #9e9e9e;   /* 主色より一段薄い無彩色グレー（主色との明度差を保持・薄すぎ回避） */
  --line:      #E6E2DC;
  --accent:    #93826A;   /* 低彩度グレージュ。微細な強調のみ */

  --radius:  2px;
  /* 作品サムネを白背景から「ごく薄く」浮かせる影（上品ミニマル軸を保つ最小値）。
     純黒ではなくインク寄りのグレージュにして白背景に馴染ませる。
     濃度調整はこの1箇所だけで全サムネに効く。 */
  --shadow: 0 1px 4px rgba(43,40,37,0.05);
  /* 欧文見出し用（Portfolio / Works / 01・02 / 矢印など）。和文は混ぜない */
  --serif:  "Cormorant Garamond", serif;
  /* 和文はすべて Noto Sans JP（ゴシック）に統一。旧 --mincho の指定箇所もこれに集約 */
  --mincho: "Noto Sans JP", system-ui, -apple-system, sans-serif;
  --sans:   "Noto Sans JP", system-ui, -apple-system, sans-serif;

  --maxw: 1200px;
  --gutter: max(7vw, 28px);
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  line-height:1.95;
  letter-spacing:0.02em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline:var(--gutter);
}

.tracked{ letter-spacing:0.28em; }

/* セクション番号（01 / 02） */
.secno{
  font-family:var(--serif);
  font-size:0.95rem;
  letter-spacing:0.2em;
  color:var(--accent);
}

/* READ MORE：細い横線＋小さい文字 */
.readmore{
  display:inline-flex; align-items:center; gap:1rem;
  font-size:0.72rem; letter-spacing:0.26em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; background:none; border:none; cursor:pointer;
  font-family:var(--sans);
}
.readmore::before{
  content:""; width:48px; height:1px; background:var(--accent);
  transition:width .3s ease;
}
.readmore:hover::before{ width:72px; }

/* ===== ヘッダー ===== */
header.site{
  position:fixed; top:0; left:0; right:0; z-index:30;
  background:rgba(255,255,255,0.82);
  backdrop-filter:saturate(120%) blur(8px);
}
header.site .wrap{
  display:flex; align-items:center; justify-content:space-between;
  height:80px;
}
.logo{ font-family:var(--serif); font-size:1.3rem; letter-spacing:0.14em; }
.gnav{ display:flex; align-items:center; gap:2.2rem; }
.gnav ul{ list-style:none; display:flex; gap:1.9rem; }
.gnav a{
  color:var(--ink-sub); text-decoration:none;
  font-size:0.74rem; letter-spacing:0.2em; text-transform:uppercase;
  transition:color .25s;
}
.gnav a:hover{ color:var(--ink); }
.entry{
  font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase;
  color:var(--ink); text-decoration:none;
  border:1px solid var(--ink); border-radius:var(--radius);
  padding:0.7rem 1.4rem; transition:border-color .25s, color .25s;
}
/* ホバーで墨地に反転していたのを廃止（地色主張を消す・あみさん指摘対応）。
   白背景のまま、枠線をアクセントに変える穏やかな反応に。 */
.entry:hover{ border-color:var(--accent); color:var(--accent); }

/* ===== HERO：代表作1点を大判で。これが画面の主役 =====
   左に大ビジュアル／右にタイトル。ヒーロー画像はグリッドのサムネより明確に大きい。 */
.hero{
  position:relative;
  min-height:88vh;              /* 縦の間延びを軽く抑える（100vh→88vh） */
  padding-top:80px;
}
.hero-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding-inline:var(--gutter);
  min-height:calc(88vh - 80px);
  display:grid;
  grid-template-columns:minmax(0, 0.9fr) minmax(0, 1.1fr);  /* 画像を絞った分、左を控え右の見出しに重心を寄せる */
  align-items:center;
  column-gap:clamp(40px, 6vw, 96px);
  padding-block:5vh;
}
/* 代表作ビジュアル（大判・主役）
   横長の代表作（例 work-60 = 約16:9）でも切らない。実比率のまま大きく見せる。
   画像が無いプレースホルダ時のみ aspect-ratio を効かせて枠を保つ。 */
.hero-visual{
  width:100%;
  max-width:clamp(280px, 30vw, 400px);  /* 縦長アイコンを絞り、右の大見出しと重心を揃える */
  margin-inline:auto;                    /* 絞った分は左カラム内で中央寄せ */
  border-radius:var(--radius);
  overflow:hidden;
  background:transparent;       /* 透明PNGがページ背景の白に抜けるよう下地色を撤去（あみさん指摘対応） */
  display:flex; align-items:flex-start; justify-content:flex-start;
  cursor:pointer;
  position:relative;
}
/* 差し替え前プレースホルダ時のみフラットなベージュ色面＋縦枠を保つ（実画像時は白抜き） */
.hero-visual:not(:has(img)){ aspect-ratio:4/5; background:#D9C9B0; }
/* 縦長画像は max-height で縦の伸びを抑える。切り抜かず contain で全体を見せる */
.hero-visual img{
  width:100%; height:auto; max-height:clamp(360px, 56vh, 520px);
  object-fit:contain; display:block; margin-inline:auto;
}
.hero-visual .ph-label{
  font-family:var(--mincho); font-size:0.74rem; letter-spacing:0.12em;
  color:#555555; background:rgba(255,255,255,0.7);
  padding:0.4rem 0.85rem; margin:1rem; position:relative; z-index:1;
}
/* Featured Work バッジは右上へ（左下のタイトル帯と干渉させない）。
   地色（墨地に白抜き）は外し、白背景に墨文字＋細罫で成立させる（あみさん指摘対応）。
   ラベルは色で主張せず字間・サイズで存在感を出す。 */
.hero-badge{
  position:absolute; top:0; right:0;
  font-size:0.62rem; letter-spacing:0.22em; text-transform:uppercase;
  color:var(--ink); background:rgba(255,255,255,0.82);
  -webkit-backdrop-filter:saturate(110%) blur(3px);
  backdrop-filter:saturate(110%) blur(3px);
  border:1px solid var(--line);
  padding:0.35rem 0.85rem; margin:1rem; z-index:2;
}
/* 代表作タイトルもサムネと同じ白帯で左下に重ねる（見え方をそろえる） */
.hero-visual .overlay-meta{
  position:absolute; left:1rem; bottom:1rem; z-index:2;
  background:rgba(255,255,255,0.82);
  -webkit-backdrop-filter:saturate(110%) blur(3px);
  backdrop-filter:saturate(110%) blur(3px);
  border:1px solid rgba(255,255,255,0.7);
  border-radius:var(--radius);
  padding:0.5rem 0.9rem 0.55rem;
  max-width:calc(100% - 2rem);
}
.hero-visual .overlay-meta .cat{
  font-size:0.62rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--accent); margin-bottom:0.22rem; line-height:1.2;
}
.hero-visual .overlay-meta .ttl{
  font-family:var(--mincho); font-weight:500;
  font-size:1.02rem; line-height:1.4; letter-spacing:0.08em;
  color:var(--ink);
}

.hero-copy{ max-width:none; }
.hero-eyebrow{
  font-family:var(--serif);
  font-size:0.86rem; letter-spacing:0.34em; text-transform:uppercase;
  color:var(--ink-sub); margin-bottom:1.2rem;  /* グレージュを外し無彩色の墨グレーへ */
}
/* メインタイトル：「Design & Illustration」1行の上品な大見出し。
   旧2行目の Portfolio（hero-title-sub）はあみさん指示で削除。
   上の hero-eyebrow（小さい Portfolio）が同役割を担うため重複を解消した。
   色では差をつけない（墨色で統一）。メリハリは書体・サイズ・字間・余白で出す。 */
/* eyebrow → title → View Works の3要素構成（lead 削除後）。
   lead が抜けた分、title 下の余白で「タイトル」と「View Works（視線の終点）」の
   間に静かな“ため”を作る。eyebrow→title(1.2rem) より title→readmore を一段広く取り、
   上から下への視線誘導に緩急（ジャンプ）を出す。詰めると窮屈・空けすぎると間延びするため
   2.2rem に設定（旧 lead の margin-bottom と同値＝従来の重心を引き継ぐ）。 */
.hero-title{
  font-family:var(--mincho); font-weight:400;
  font-size:clamp(2.2rem, 4.4vw, 3.8rem);
  line-height:1.28; letter-spacing:0.12em;
  color:var(--ink);
  margin-bottom:2.2rem;
}
/* ヒーロー内 View Works の区切り線も色を外し墨の罫線色に（タイトル周りの色主張を消す） */
.hero-copy .readmore::before{ background:var(--ink); }

/* SCROLLインジケーター（文字＋縦線）は非表示（あみさん指示）。
   position:absolute で通常フローから外れているため、消してもヒーローの高さ・余白に影響なし。 */
.hero-scroll{
  display:none;
  position:absolute; left:var(--gutter); bottom:3vh;
  font-family:var(--serif); font-size:0.7rem; letter-spacing:0.24em;
  text-transform:uppercase; color:var(--ink-sub);
  align-items:center; gap:0.8rem;
}
.hero-scroll::after{ content:""; width:1px; height:40px; background:var(--line); }

/* ===== 01 WORKS：タブ絞り込み＋サムネグリッド ===== */
.works{ padding-block:14vh 12vh; border-top:1px solid var(--line); }
.sec-head{ position:relative; margin-bottom:5vh; }
.sec-head .secno{ display:block; margin-bottom:0.6rem; }
.sec-head .big-en{
  /* Works はあみさんの指示で Noto Sans JP（和文ゴシック）に。英字もラテングリフで表示される */
  font-family:var(--sans); font-weight:400;
  /* ヒーロー大見出し（.hero-title）と同一サイズに統一（あみさん指示：Design & Illustration と同ポイント） */
  font-size:clamp(2.2rem, 4.4vw, 3.8rem);
  line-height:1.15; letter-spacing:0.08em; color:var(--ink);
}
.sec-head .sub-ja{
  font-family:var(--mincho); font-size:0.92rem; letter-spacing:0.18em;
  color:var(--ink-sub); margin-top:1rem;
}

/* ----- カテゴリタブ（絞り込みUI） ----- */
.work-tabs{
  display:flex; flex-wrap:wrap; gap:0.4rem 0.6rem;
  margin-bottom:6vh;
  border-bottom:1px solid var(--line);
  padding-bottom:1.4rem;
}
.work-tab{
  font-family:var(--sans); font-weight:300;
  font-size:0.78rem; letter-spacing:0.14em;
  color:var(--ink-sub); background:none; border:1px solid transparent;
  border-radius:var(--radius);
  padding:0.5rem 1.1rem; cursor:pointer;
  transition:color .2s, border-color .2s, background .2s;
}
.work-tab:hover{ color:var(--ink); }
.work-tab[aria-selected="true"]{
  color:var(--ink);
  border-color:var(--ink);
}
.work-tab .en{
  font-family:var(--serif); font-size:0.66rem; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--accent); margin-left:0.5rem;
}

/* ----- サムネグリッド（CSS Grid：左上に代表作の大判タイル＋通常タイルを周りに） -----
   作品比率がバラバラ（2.5:1の細長バナー多数＋正方形・縦長が混在）。
   旧実装は column マソンリーだったが、「各カテゴリの代表作を左上に明確に大きく」
   という要件は column では成立しない（縦方向に流れるため左上に大枠を固定できない／
   column-span はブラウザ差が大きく横長と相性が悪い）。
   そこで CSS Grid（3カラム）に組み替え：
     ・代表タイル .work-item.is-lead → grid-column/​row span 2 で左上の大枠
     ・通常タイルは grid-auto-flow:dense で空いた枠（右・下）に詰める
   トリミングはしない（画像は実比率のまま height:auto / object-fit:contain）。
   行は auto なので各タイルの高さは画像比率に追従し、横長も縦長も切れない。
   JSが吐くDOM（.work-grid > .work-item > .thumb > img + .overlay-meta）は無改修で成立。 */
.work-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:auto;
  grid-auto-flow:dense;        /* 大判で空いた枠に通常タイルを詰めて隙間を減らす */
  gap:clamp(20px, 2.4vw, 38px);
  align-items:start;           /* 各タイルは上端そろえ（高さは実比率に追従） */
}
@media (min-width:1500px){
  .work-grid{ grid-template-columns:repeat(3, 1fr); } /* 余白主役：広い画面でも増やしすぎない */
}
/* 1作品＝1ボタン（クリックで拡大）。 */
.work-item{
  display:block; width:100%; text-align:left;
  background:none; border:none; padding:0; cursor:pointer;
  font-family:var(--sans);
}

/* ----- 代表タイル（大判・左上）-----
   たくみくん実装条件：代表作の .work-item に `is-lead` を付け、
   表示中カテゴリの「DOM先頭（grid の最初の子）」に描画する。
   grid-auto-flow:dense + order なしなら、DOM先頭の span2x2 がそのまま左上に乗る。
   2カラム×2行ぶんの大枠を占有 → 通常タイル（1枠）との対比でジャンプ率を出す。
   画像はトリミングせず実比率のまま大きく見せる（height:auto）。 */
/* 大判は「どのビューでも is-lead が付いたタイル」に効かせる（All 含む全カテゴリ統一ルール）。
   All 表示でも代表作（販促バナー＝フルーツかき氷）を左上に大判で見せる方針に変更。
   各ビューで is-lead が1点だけ付く（同時に複数の大判が出ない）制御は、たくみくんが
   main.js 側で行う（絞り込み時に、そのビューの代表作1点にだけ is-lead を付与）。
   CSS は「is-lead＝大判」を常に効かせるだけ。grid-auto-flow:dense + order なしなので、
   DOM 先頭の span2 がそのまま左上に乗る。 */
.work-grid .work-item.is-lead{
  grid-column:span 2;   /* 幅2カラム占有＝通常タイルの約2倍。左上で明確に大きい */
  /* grid-row は span 指定しない（=高さは画像の実比率に追従）。
     代表作は横長（2.5:1 のバナー等）が中心のため、固定2行ぶんを確保すると
     画像の下に空白が出て間延びする。幅2倍だけで主役のジャンプ率は十分に出る。
     縦の主張は grid-auto-flow:dense が右側に通常タイルを2枚詰めることで成立する。 */
}
.work-grid .work-item.is-lead .thumb .overlay-meta{ padding-top:1.1rem; }
.work-grid .work-item.is-lead .thumb .overlay-meta .cat{ font-size:0.66rem; letter-spacing:0.22em; }
.work-grid .work-item.is-lead .thumb .overlay-meta .ttl{ font-size:1.18rem; letter-spacing:0.06em; }
/* .thumb は「画像エリア＋下キャプション」を内包する素のコンテナ。
   枠線なし・背景なし・overflowなし（あみさん意図：まず素の状態を確認）。
   tone背景・角丸・トリミング枠は画像表示エリア側だけに効かせ、
   下のキャプションは白背景（=ページ背景）の上に出す。 */
.work-item .thumb{
  border:none;
  background:none;
  position:relative;
}
/* 画像本体：角丸はここに。高さは実比率に追従（切れない）。
   ホバーで軽く沈める（枠線がない分の触感）。 */
.work-item img{
  width:100%; height:auto; display:block;
  border-radius:var(--radius);
  box-shadow:var(--shadow);     /* (B) ごく薄い影を1段。枠線なしのまま白背景から軽く浮かせる */
  transition:opacity .25s, box-shadow .25s;
}
.work-item:hover img{ opacity:0.88; box-shadow:none; }  /* ホバーで沈む触感に合わせ影を引く */

/* ----- 通常タイルの画像：固定高さで「確実に揃えて」並べる（あみさん選択：高さを揃える）-----
   背景：一覧は切り抜かない方針で各画像を実比率表示しているため、3カラムで横幅が同じだと
   横長バナーは低く・正方形/縦長は高く出て、正方形・縦長だけが大きく見えてしまう。
   以前は max-height:220px で上限を付けていたが、width:100%＋height:auto との組み合わせでは
   ビューポート環境によって実表示高さ（約430px）が抑えられず、正方形・縦長が突出したまま
   左右余白だけ付く状態になっていた（あみさん指摘）。
   対策：max-height をやめ「definite height（固定 height）」に変更。height は max-height と違い
   必ず効くため、通常タイルの画像エリアは全タイル同じ高さに揃う。切り抜きはせず
   object-fit:contain で収めるので、横長バナーは上下にわずかな余白、正方形・縦長は左右に余白
   （いずれも白背景）が出る形になり、突出しない。
   固定値 200px の根拠：max-width 1200px・3カラム・ガター clamp(20px,2.4vw,38px) のとき
   通常タイル1カラム幅は約375px。横長バナー（約2.5:1）の実表示高さは約150px。横長と段差が
   付きすぎず、正方形・縦長を横長寄りの高さに揃える重心として 200px に設定。
   :not(.is-lead) で大判は対象外（大判は別途、固定高さを当てず主役の実比率を保つ）。
   specificity：.work-item:not(.is-lead) img は (0,2,1)。base の .work-item img は (0,1,1) なので
   この固定 height が base の height:auto に確実に勝つ（!important 不要）。 */
.work-item:not(.is-lead) img{
  height:200px;             /* definite height。max-height と違い必ず効き、全タイルで高さが揃う */
  width:100%;
  object-fit:contain;       /* 切り抜かない。固定高さの枠内に全体を収める */
  object-position:center;   /* 左右・上下に出る余白を均等に（中央寄せ） */
}
/* 画像が無い差し替え前のプレースホルダ枠だけ tone背景＋高さを持たせる（潰れ防止）。
   実画像が入ると画像が枠を満たすため tone背景は見えない。 */
.work-item .thumb:not(:has(img)){
  min-height:180px;
  border-radius:var(--radius);
  overflow:hidden;
  display:flex; flex-direction:column; align-items:flex-start;
}

/* ----- キャプションは画像の「下」に出す（.cap パターン）-----
   JS（main.js）は .thumb の中の最後に .overlay-meta（cat+ttl）を吐く。
   触れない領域なので、CSS側で .thumb 内 .overlay-meta の絶対配置・白帯を解除し、
   画像の下に通常フローで並べる＝「画像 → 下にキャプション」の縦並びにする。
   カテゴリ＝小さくアクセント色／タイトル＝明朝。余白で品を出す。 */
.work-item .thumb .overlay-meta{
  position:static;
  background:var(--bg);          /* キャプションはページ背景（白）の上に。.thumb の tone 地色を透けさせない */
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border:none;
  border-radius:0;
  padding:0.9rem 0.1rem 0.2rem;
  max-width:100%;
}
.work-item .thumb .overlay-meta .cat{
  font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase;
  /* 極小＋字間広め＋大文字のため、薄グレージュ(--accent)だと白背景で潰れて読めない。
     同系のグレージュをワントーン濃くしてラベル感を保ちつつ視認性を確保（あみさん指摘対応） */
  color:#6E5F4B; margin-bottom:0.3rem; line-height:1.2;
}
.work-item .thumb .overlay-meta .ttl{
  font-family:var(--mincho); font-weight:500;
  font-size:0.92rem; line-height:1.5; letter-spacing:0.05em;
  color:var(--ink);
}
/* プレースホルダ枠（画像なし・tone面）内ではキャプションを枠端に合わせて余白調整。
   差し替え前は tone 色面の上に文字を直接乗せる（白ブロックで囲わない）ので背景は透かす */
.work-item .thumb:not(:has(img)) .overlay-meta{
  background:none;
  padding:0.7rem 0.7rem 0.8rem;
  margin-top:auto;
}
/* 作品の色を殺さない：低彩度だが色味を残す色面（実画像で置換） */
.thumb.tone-a{ background:#C9D2CC; }
.thumb.tone-b{ background:#E2CFC4; }
.thumb.tone-c{ background:#CBC9D6; }
.thumb.tone-d{ background:#D8D2C2; }
.thumb.tone-e{ background:#C6CDD2; }
.thumb.tone-f{ background:#E0D4C0; }
.thumb.tone-g{ background:#D2CEC4; }
.thumb.tone-h{ background:#CDD6CF; }
/* 実画像が入ったタイルの画像エリアは tone仮色を出さず白（ページ背景）にする。
   object-fit:contain で出る上下・左右の余白に tone地色（ベージュ/ラベンダー等）が
   透けて見える問題への対応（あみさん指摘）。
   :has(img) を後置きし、specificity (0,3,0) で .thumb.tone-x (0,2,0) に確実に勝つ。
   プレースホルダ（:not(:has(img))）はこのルールに該当しないため tone仮色を維持する。 */
.work-item .thumb:has(img){ background:var(--bg); }
/* 差し替え用プレースホルダ表記は上寄せ。左下のタイトル帯と重ならない（.thumb は flex-start） */
.thumb .ph-label{
  font-family:var(--mincho); font-size:0.66rem; letter-spacing:0.08em;
  color:#555555; background:rgba(255,255,255,0.7);
  padding:0.28rem 0.6rem; margin:0.6rem; position:relative; z-index:1;
}
/* 絞り込みで隠す作品 */
.work-item.is-hidden{ display:none; }

.work-empty{
  display:none;
  color:var(--ink-sub); font-size:0.9rem; padding:4vh 0;
}
.work-empty.is-shown{ display:block; }

/* ===== ライトボックス（クリック拡大） ===== */
.lightbox{
  position:fixed; inset:0; z-index:50;
  background:rgba(43,40,37,0.92);
  display:none; align-items:center; justify-content:center;
  padding:max(5vw, 32px);
}
.lightbox.is-open{ display:flex; }
/* 既定（縦積み）：画像の下に説明文。横長作品に最適（画像幅を最大に使える）。
   JSが比率判定できない場合のフォールバックもこの形（安全側）。 */
.lightbox-figure{
  max-width:min(960px, 92vw); max-height:88vh;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center;
  min-height:0;                       /* flex子が縮めるように（画像のはみ出し＝上切れを防ぐ要） */
  /* overflow:auto を外した。flex+center+overflow:auto は内容が高いと先頭(画像上部)が
     枠外へ押し出されて切れ、スクロールでも戻せない＝今回の「上が見切れる」バグの正体。
     代わりに画像の max-height を「figure(88vh) − caption取り分」の安全値で抑え、
     画像＋説明が必ず figure 内に収まるようにした（下の .lightbox-media を参照）。 */
}
.lightbox-media{
  width:100%;
  flex:0 1 auto;                      /* 自然な高さ。長い説明があっても下の min-height:0 で縮める */
  min-height:0;                       /* 縮小を許可（これが無いと画像が枠を突き破り上が切れる） */
  /* 画像高さの上限：figure(88vh) から caption の取り分(最大34vh)＋余白を引いた安全値。
     これで「画像＋説明」が必ず figure 内に収まり、overflow による上切れが原理的に起きない。
     caption が短ければ画像はこの上限まで大きく表示される。 */
  max-height:calc(88vh - 40vh);
  border-radius:var(--radius);
  overflow:hidden;
  background:#D9C9B0;
  display:flex; align-items:center; justify-content:center;
}
/* 実比率で表示。枠の内側に contain で必ず収める（上下左右どこも切れない） */
.lightbox-media img{
  max-width:100%; max-height:calc(88vh - 40vh);
  width:auto; height:auto; object-fit:contain; display:block;
}
.lightbox-media:not(:has(img)){ aspect-ratio:4/5; } /* 差し替え前のみ枠を保つ */
.lightbox-media .ph-label{
  font-family:var(--mincho); font-size:0.9rem; letter-spacing:0.1em; color:#555555;
  background:rgba(255,255,255,0.9); padding:0.6rem 1.1rem;
}
.lightbox-caption{
  color:#F4F1EC; margin-top:1.4rem; text-align:center;
  max-width:64ch;                     /* 説明文の行長を品よく抑える */
  flex:0 0 auto;                      /* 自然な高さを確保し、その分だけ画像が縮む */
  max-height:34vh; overflow-y:auto;   /* 極端な長文だけキャプション内スクロール（画像は切らない） */
}
.lightbox-caption .cat{
  font-size:0.64rem; letter-spacing:0.24em; text-transform:uppercase;
  color:#C9BBA4; margin-bottom:0.4rem;
}
.lightbox-caption .ttl{
  font-family:var(--mincho); font-weight:400; font-size:1.15rem; letter-spacing:0.1em;
}
/* Notion説明文。空のときは丸ごと非表示＝説明が無い作品でも不格好にならない */
.lightbox-caption .desc{
  font-family:var(--sans); font-weight:300;
  font-size:0.9rem; line-height:1.75; letter-spacing:0.02em;
  color:#E5E0D9; margin-top:1rem;
  white-space:pre-line;   /* 説明文の\n改行を表示に反映（連続空白は畳む） */
}
.lightbox-caption .desc:empty{ display:none; }
/* 説明だけ無くタイトルもギリギリのときの余白詰め（titleのみでも収まりよく） */

/* ===== 横長作品：説明文は画像の下（既定と同じ縦積みを明示） ===== */
.lightbox-figure.is-landscape{ flex-direction:column; }
.lightbox-figure.is-landscape .lightbox-caption{ text-align:center; }

/* ===== 縦長・正方形作品：説明文を画像の横（右）に置く =====
   縦長は高さを使うので横に余白ができる。そこへ説明を回すと画像を大きく保てる。 */
.lightbox-figure.is-portrait{
  flex-direction:row; align-items:center;
  gap:clamp(24px, 3vw, 48px);
  max-width:min(1040px, 94vw);
}
.lightbox-figure.is-portrait .lightbox-media{
  flex:0 1 auto;                      /* 横並びでは画像が主。横方向に伸ばさない */
  width:auto; max-width:min(58vw, 560px); height:auto;
  max-height:86vh;   /* 横配置は説明が隣＝縦をたっぷり使える。figure(88vh)内に確実に収める */
}
.lightbox-figure.is-portrait .lightbox-media img{ max-height:86vh; }
.lightbox-figure.is-portrait .lightbox-caption{
  margin-top:0; text-align:left;
  max-width:34ch; flex:0 1 34ch;
  max-height:88vh;                    /* 横配置では縦に余裕。画像と同じ枠高で十分読める */
}
/* スマホは横並びを解除して必ず縦積み（横に置く余地がないため）。
   縦積みでは画像の下に説明文が来るので、画像高さを下げて「画像＋説明」を1画面に収める。 */
@media (max-width:700px){
  /* スマホは縦長も縦積みに切替。画像は flex:1 で“残り高さ”に収め、固定vhは使わない
     （固定vhだと画像＋説明が1画面を超え、上が見切れていた＝work37スマホのバグ） */
  .lightbox-figure.is-portrait{ flex-direction:column; align-items:center; }
  .lightbox-figure.is-portrait .lightbox-media{
    width:100%; max-width:100%; flex:0 1 auto; min-height:0;
    max-height:calc(88vh - 40vh);   /* 縦積み：画像＋説明が1画面に収まる安全値（上切れ防止） */
  }
  .lightbox-figure.is-portrait .lightbox-media img{ max-height:calc(88vh - 40vh); }
  .lightbox-figure.is-portrait .lightbox-caption{
    text-align:center; max-width:64ch; margin-top:1.4rem;
    max-height:34vh; overflow-y:auto;   /* 縦積みでは画像と高さを取り合うので説明は上限＋内部スクロール */
  }
}
.lightbox-close{
  position:fixed; top:24px; right:28px;
  background:none; border:none; cursor:pointer;
  color:#F4F1EC; font-family:var(--serif); font-size:1.6rem; line-height:1;
  letter-spacing:0.1em;
}

/* ===== 複数画像ナビ（前へ／次へ）＝いろは仕上げ =====
   設計方針：
   - 主役は作品画像。矢印は控えめなグレー基調（#9e9e9e）で、ホバー時のみ #6f6f6f へ。
   - マークアップ上は .lightbox-figure 内の兄弟だが、横長(column)/縦長(row)どちらの
     レイアウトでも“画面の左右端・縦中央”という一定位置に置きたいので position:fixed で
     ビューポート基準に固定する。figure の overflow:auto（長文スクロール）にも影響されない。
   - is-single（1枚）のとき非表示。複数(is-multi)のときだけ表示。
   ※ JS仕様：go(±1) は循環（最後→最初／最初→最後）。disabled は「1枚かどうか」で
     切り替わり、端で個別に無効化はされない（main.js applyNavState）。よって複数枚の間は
     prev/next とも常に活性。:disabled スタイルは 1枚時（=is-single で非表示）の安全網だが、
     端で押せない運用に変えた場合の薄表示の備えとして残す。 */
.lightbox-nav{
  position:fixed; top:50%; transform:translateY(-50%);
  z-index:51;                         /* オーバーレイ(50)より前、close と同層 */
  width:64px; height:64px;            /* ヒットエリアを一回り拡大（押しやすさ＋存在感） */
  display:flex; align-items:center; justify-content:center;
  padding:0;
  background:rgba(43,40,37,0.55);     /* 半透明の暗色円。暗背景上でも矢印の輪郭が立つ */
  border:1px solid rgba(244,241,236,0.22);
  border-radius:50%;                  /* 円形ヒットエリア */
  cursor:pointer;
  color:#F4F1EC;                      /* 矢印グリフは明色：ホバー前から十分視認できる */
  font-family:var(--serif);
  font-size:2.6rem; line-height:1; font-weight:400;   /* グリフ自体を大きめに */
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
  -webkit-tap-highlight-color:transparent;
}
/* ‹ › グリフの光学中心を枠の中央へ微調整（セリフ矢印は上にズレやすい） */
.lightbox-nav > span{ display:block; transform:translateY(-0.06em); }
.lightbox-prev{ left:max(2.2vw, 18px); }
.lightbox-next{ right:max(2.2vw, 18px); }
.lightbox-nav:hover{
  background:rgba(43,40,37,0.78); color:#FFFFFF;       /* ホバーで円を濃く・矢印を白へ */
  border-color:rgba(244,241,236,0.45);
}
.lightbox-nav:focus-visible{
  outline:none; color:#FFFFFF;
  box-shadow:0 0 0 2px rgba(244,241,236,0.7);
}
.lightbox-nav:disabled{
  opacity:0.3; cursor:default;   /* 端：押せないことが薄さで伝わる（循環運用では実質未使用） */
}
/* 1枚だけの作品はナビを出さない（is-single）。複数(is-multi)のときだけ表示。 */
.lightbox-figure.is-single .lightbox-nav{ display:none; }

/* ===== 現在位置カウンター（例「2 / 5」） =====
   caption 内・タイトル直下に小さく。:empty（1枚以下）で自動非表示。
   主役の邪魔をしないよう副色グレーで控えめに。 */
.lightbox-counter{
  font-family:var(--serif);
  font-size:0.74rem; letter-spacing:0.22em;
  color:#9e9e9e;
  margin-top:0.6rem;
}
.lightbox-counter:empty{ display:none; }
/* 縦長レイアウトでは caption が左寄せなのでカウンターも左に揃う（継承でOK） */

/* スマホ：端に寄せつつ、押しやすさのため 48px は確保（タップ最小サイズ）。 */
@media (max-width:700px){
  .lightbox-nav{ width:50px; height:50px; font-size:2.1rem; }
  .lightbox-prev{ left:6px; }
  .lightbox-next{ right:6px; }
}

/* ===== 02 SERVICES（対応可能業務）=====
   旧 About セクションを廃止し、同位置に新設（DOM・ナビとも takumi が差し替え済み）。
   見出し様式は Works の .sec-head（secno / big-en / sub-ja）をそのまま流用しているので、
   ここではセクションの“枠”（上罫線・縦パディング）だけ Works と揃え、トーンを統一する。
   上品ミニマル・余白主役：箇条書きは派手な行頭記号を使わず、細い罫線で項目を静かに区切る。 */
.services{ padding-block:14vh 12vh; border-top:1px solid var(--line); }

/* Design / Others の2グループを横並び（2カラム）。
   余白主役のため列間は広め（clamp 上限 96px）。狭幅では下の @media で1カラムに落とす。
   align-items:start で各グループは上端そろえ（項目数が違っても見出しの高さが揃う）。 */
.services-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(32px, 6vw, 96px);
  align-items:start;
  max-width:760px;   /* 項目が短いので器を絞り、余白を主役に。間延び・横間伸びを防ぐ */
}

/* グループ見出し（Design / Others）：欧文。本文（和文リスト）とジャンプ率の対比を作る。
   サイズは控えめ（sub-ja より一段上）に留め、Works 大見出しと競合させない＝器は静かに。
   下の細罫で「見出し｜リスト」の区切りを示し、装飾を足さずに構造を伝える。 */
.service-group-title{
  font-family:var(--serif); font-weight:500;
  font-size:1.5rem; letter-spacing:0.12em;
  color:var(--ink);
  padding-bottom:1rem; margin-bottom:1.4rem;
  border-bottom:1px solid var(--line);
}

/* 箇条書き：行頭の「・」「-」等の派手な記号は使わない（list-style:none）。
   項目ごとに極薄の罫線で静かに区切り、余白（縦リズム）で読ませる。
   文字色は本文インク、字間はサイト基調にそろえ可読性を確保。 */
.service-list{ list-style:none; }
.service-list > li{
  font-family:var(--sans); font-weight:300;
  font-size:0.96rem; line-height:1.9; letter-spacing:0.04em;
  color:var(--ink);
  padding:0.7rem 0;
  border-bottom:1px solid var(--line);
}
.service-list > li:last-child{ border-bottom:none; }

/* 狭幅（スマホ・小型タブレット）では2カラムを解除して1カラムに。
   2グループが縦に積まれ、Design → Others の順で並ぶ。
   ブレークポイント 700px：これ以下だと各列が窮屈になり字間・余白の品が出ないため、
   横並びを解いて全幅で1列ずつ読ませる。グループ間は縦に余白（gap）で間を取る。 */
@media (max-width:700px){
  .services-grid{ grid-template-columns:1fr; gap:clamp(28px, 8vw, 48px); }
}

/* ===== 03 INFORMATION ===== */
.info{ padding-block:12vh 8vh; border-top:1px solid var(--line); }
.info .sec-head{ margin-bottom:5vh; }
.info-list{ border-top:1px solid var(--line); }
.info-row{
  display:grid;
  grid-template-columns: 120px 88px 1fr auto;
  gap:1.6rem; align-items:center;
  padding:1.5rem 0;
  border-bottom:1px solid var(--line);
}
.info-row .date{ font-family:var(--serif); font-size:0.86rem; letter-spacing:0.1em; color:var(--ink-sub); }
/* 種別タグ：地色（墨地に白抜き）を外し、白背景・墨文字＋細罫で成立（あみさん指摘対応）。
   色で差をつけず、字間・小サイズ・罫線で「ラベルらしさ」を残す。 */
.info-row .tag{
  justify-self:start;
  font-size:0.62rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--ink); background:none;
  border:1px solid var(--line);
  padding:0.28rem 0.7rem; border-radius:var(--radius);
}
.info-row .txt{ font-size:0.92rem; color:var(--ink); }
.info-row .arrow{ font-family:var(--serif); color:var(--accent); }

/* ===== フッター注記（モック用） ===== */
.mocknote{
  border-top:1px solid var(--line);
  padding-block:2.4rem;
  color:var(--ink-sub); font-size:0.72rem; letter-spacing:0.06em; text-align:center;
}

/* ===== レスポンシブ ===== */
@media (max-width:900px){
  .gnav ul{ display:none; }
  /* HERO：縦積み（画像→テキスト） */
  .hero-inner{ display:flex; flex-direction:column; min-height:auto; padding-bottom:8vh; }
  .hero-visual{ width:100%; max-width:300px; margin:4vh auto 0; }
  /* 縦積み時は画面高に依存させず、絞った幅基準で縦の伸びを抑える */
  .hero-visual img{ max-height:420px; }
  .hero-copy{ max-width:100%; margin-top:5vh; }
  .hero-scroll{ display:none; }
  .hero{ min-height:auto; }

  /* グリッド：タブレットは2列。代表大判は2列ぶん＝ほぼ全幅で主役を保つ。
     高さ方向は span2 のままだと縦に伸びすぎるので span1（高さは実比率追従）に戻す。 */
  .work-grid{ grid-template-columns:repeat(2, 1fr); }
  .work-grid .work-item.is-lead{ grid-column:span 2; grid-row:auto; }
  /* 2カラムはカラム幅が広がる（約540px、横長バナー実高約216px）。PCの固定200pxより少し高く
     して横長との段差を抑える。max-height ではなく固定 height で確実に高さを揃える（切り抜かない）。 */
  .work-grid .work-item:not(.is-lead) img{ height:220px; }

  .info-row{ grid-template-columns: 96px 1fr; grid-template-areas: "date tag" "txt txt"; row-gap:0.6rem; }
  .info-row .date{ grid-area:date; } .info-row .tag{ grid-area:tag; justify-self:end; }
  .info-row .txt{ grid-area:txt; } .info-row .arrow{ display:none; }
}
@media (max-width:560px){
  /* スマホ：等幅2列に統一する（あみさん要望：左右の幅を揃える）。
     【不具合の原因】以前は grid-template-columns:1fr（1列）にしていたが、代表作タイルが
     grid-column:span 2 を持つため Grid が暗黙の2列目を生成し、結果として
     実測 約103px / 約196px の不等幅2列になっていた（左列が右列の約半分）。
     さらに大判解除を .work-item.is-lead（詳細度 0,2,0）で書いていたため、
     大判定義 .work-grid .work-item.is-lead（詳細度 0,3,0）に負けて span2 が残っていた。
     対策：(1) 明示的に等幅2列を指定 repeat(2, minmax(0,1fr))。
           (2) is-lead の大判化を、大判定義と同じ詳細度のセレクタで確実に解除（span1扱い）。
     これで全タイルが同一カラム幅＝左右等幅になる。 */
  .work-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  /* 大判定義 .work-grid .work-item.is-lead と同じ詳細度で上書き＝確実に通常タイル化（span1）。
     これにより暗黙列が生成されず、2列とも minmax(0,1fr) で等幅になる。 */
  .work-grid .work-item.is-lead{ grid-column:auto; grid-row:auto; }
  /* 2列（375px幅でカラム幅 約160px）。全タイル同じ固定高さで高さも揃える。
     max-height ではなく固定 height で確実に揃える（切り抜かない＝object-fit:contain 維持）。
     ★スマホでは代表作 .is-lead の大判扱いを「画像高さ」まで完全解除し、全タイル均一にする。
       従来 :not(.is-lead) 限定だったため .is-lead 画像だけ base の height:auto / object-fit:fill
       のまま残り、横長バナーが約60pxに縮んで通常タイル(150px)と段差が出ていた（実測差90px）。
       通常タイルは 768px版 .work-grid .work-item:not(.is-lead) img（詳細度 0,3,1, height:220px）と
       同じセレクタで上書きして 150px に。代表作も同じ詳細度 .work-grid .work-item.is-lead img で
       150px を当て、全タイル完全に均一（150px / object-fit:contain）にする。
       PC・タブレットの大判レイアウト（>560px）は別ブレークポイントなので影響しない。 */
  .work-grid .work-item:not(.is-lead) img,
  .work-grid .work-item.is-lead img{ height:150px; object-fit:contain; object-position:center; }
  /* 大判用に上げていたキャプションのジャンプ率も通常に戻す（2列では過剰になるため）。
     詳細度を大判定義 .work-grid .work-item.is-lead .thumb ... に合わせて確実に上書きする。 */
  .work-grid .work-item.is-lead .thumb .overlay-meta .ttl{ font-size:0.92rem; letter-spacing:0.05em; }
  .work-grid .work-item.is-lead .thumb .overlay-meta .cat{ font-size:0.6rem; letter-spacing:0.2em; }
}