/* ==========================================================
   志 KOKOROZASHI — デザインシステム v2
   design: ユイ（web-uiux） / build: カイト（web-frontend）
   原則: 8pxグリッド / フルードタイプスケール / コントラストAA /
         本文行長 全角38字以内 / prefers-reduced-motion 尊重
   ========================================================== */

:root {
  /* 色 */
  --ink-950: #171512;
  --ink: #211e19;
  --ink-700: #45413a;
  --ink-500: #6e695f;
  --muted: #857c6c;
  --paper: #ffffff;
  --paper-2: #f3f3f4;
  --white: #ffffff;
  --shu: #b3342b;
  --shu-600: #9c2b23;
  --shu-700: #85201a;
  --gold: #b08d3f;
  --line: #e3dccb;
  --line-strong: #d2c8b1;

  /* 書体：基本はゴシック（--sans）。明朝（--serif）は装飾の大きな筆漢字・引用符など“絵”としての用途だけに使う */
  --serif: "Shippori Mincho", "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;

  /* 余白（8pxグリッド） */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 48px; --s6: 64px; --s7: 96px; --s8: 128px;

  /* タイプスケール（フルード） */
  --fs-xs: 12px;
  --fs-s: 13.5px;
  --fs-base: clamp(15.5px, 1vw + 12px, 16.5px);
  --fs-l: clamp(17px, 1.2vw + 13px, 19px);
  --fs-h3: clamp(18px, 1.4vw + 13px, 20px);
  --fs-h2: clamp(22px, 2vw + 14px, 27px);
  --fs-title: clamp(25px, 3.2vw + 14px, 36px);
  --fs-display: clamp(32px, 4.8vw + 14px, 54px);

  --radius: 8px;
  --header-h: 72px;
  --shadow-1: 0 2px 8px rgba(23, 21, 18, 0.05);
  --shadow-2: 0 18px 40px -12px rgba(23, 21, 18, 0.18);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--ink);
  font-size: var(--fs-base);
  line-height: 2;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

::selection { background: rgba(179, 52, 43, 0.16); }

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

[id] { scroll-margin-top: calc(var(--header-h) + 24px); }

h1, h2, h3, .brand, .pull-quote, .foot-brand {
  font-family: var(--sans);
  font-weight: 700;
  font-feature-settings: "palt";
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--s3); }

/* ---------- スキップリンク ---------- */
.skip-link {
  position: fixed; top: -48px; left: var(--s2); z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 10px 18px; border-radius: 0 0 6px 6px;
  font-size: var(--fs-s); text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus-visible { top: 0; }

/* ---------- 読了プログレスバー ---------- */
.progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 120;
  pointer-events: none;
}
.progress span {
  display: block; height: 100%; background: var(--shu);
  transform: scaleX(0); transform-origin: 0 50%;
}

/* ---------- ヘッダー（墨色・選択型メニュー＋CTAボタン） ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(23, 21, 15, 0.94);
  backdrop-filter: saturate(1.2) blur(14px);
  -webkit-backdrop-filter: saturate(1.2) blur(14px);
  border-bottom: 1px solid rgba(247, 244, 237, 0.08);
  transition: box-shadow 0.3s;
}
.site-header.scrolled { box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.55); }
.site-header .inner {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--s3);
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--s3);
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand .mark {
  width: 42px; height: 42px; border-radius: 9px;
  background: var(--shu); color: var(--white);
  font-size: 26px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.brand .mark-img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  background: var(--paper); box-shadow: 0 0 0 1px rgba(247, 244, 237, 0.25);
}
/* ロゴ題字（マストヘッド）：本文はゴシックだが、ここだけ明朝の“題字”として仕立てる */
.brand-text { display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.brand .name {
  font-family: var(--serif); font-weight: 600;
  font-size: 20px; letter-spacing: 0.2em; line-height: 1;
  color: var(--paper); font-feature-settings: "palt";
}
.brand .name .z { color: #d9503f; font-weight: 700; }
.brand .romaji {
  font-family: var(--serif); font-weight: 500;
  font-size: 9px; letter-spacing: 0.34em; line-height: 1;
  color: rgba(210, 180, 120, 0.82);
  padding-top: 6px; border-top: 1px solid rgba(176, 141, 63, 0.35);
}

.global-nav { display: flex; gap: var(--s4); }
.global-nav a {
  text-decoration: none; font-size: var(--fs-s); letter-spacing: 0.12em;
  color: rgba(247, 244, 237, 0.82);
  padding: 8px 0; position: relative; transition: color 0.2s;
}
.global-nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 2px;
  height: 2px; background: var(--gold); transition: right 0.25s ease;
}
.global-nav a:hover, .global-nav a.current { color: var(--white); }
.global-nav a:hover::after, .global-nav a.current::after { right: 0; }
.global-nav .nav-cta { display: none; }

.header-cta {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; font-size: var(--fs-s); letter-spacing: 0.1em; font-weight: 500;
  background: var(--shu); color: #fff;
  padding: 11px 22px; border-radius: 5px;
  transition: background 0.2s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.header-cta:hover { background: var(--shu-600); transform: translateY(-1px); }

.nav-toggle {
  display: none;
  width: 44px; height: 44px; border: 1px solid rgba(247, 244, 237, 0.35); border-radius: 8px;
  background: transparent; position: relative;
}
.nav-toggle span {
  position: absolute; left: 12px; right: 12px; height: 2px; background: var(--paper);
  transition: transform 0.25s, top 0.25s;
}
.nav-toggle span:nth-child(1) { top: 17px; }
.nav-toggle span:nth-child(2) { top: 25px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { top: 21px; transform: rotate(-45deg); }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ==========================================================
   オープニングアニメーション（イントロ）
   ========================================================== */
.has-intro { overflow: hidden; }
.intro {
  position: fixed; inset: 0; z-index: 9999;
  background:
    radial-gradient(1100px 620px at 50% 42%, rgba(176, 141, 63, 0.08), transparent 60%),
    var(--ink-950);
  display: flex; align-items: center; justify-content: center;
  will-change: opacity, transform;
}
.intro-inner { text-align: center; padding: 0 var(--s3); }

/* 上に細い金のヘアラインが中央から伸びる */
.intro-rule {
  display: block; width: 0; height: 1px; margin: 0 auto var(--s5);
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
  animation: introRule 1.3s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.intro-title {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(30px, 6vw, 62px); letter-spacing: 0.3em;
  color: var(--paper); white-space: nowrap;
  padding-left: 0.3em; /* トラッキング分の視覚中央合わせ */
}
.intro-title span {
  display: inline-block; opacity: 0; transform: translateY(18px);
  animation: introChar 1s cubic-bezier(0.19, 1, 0.22, 1) forwards;
  animation-delay: calc(var(--i) * 0.075s + 0.5s);
}
.intro-title span.z { color: #d9503f; font-weight: 700; }

.intro-sub {
  margin-top: var(--s4); font-family: var(--serif); font-weight: 500;
  color: rgba(210, 180, 120, 0.85);
  font-size: clamp(11px, 1.2vw + 7px, 13px); letter-spacing: 0.34em;
  padding-left: 0.34em;
  opacity: 0; transform: translateY(8px);
  animation: introFade 1.4s cubic-bezier(0.22, 1, 0.36, 1) 1.7s forwards;
}

/* 静かにフェードして上へわずかに引き上げ、下のヒーローを上品に見せる */
.intro.done { animation: introOut 1s cubic-bezier(0.65, 0, 0.35, 1) forwards; }

@keyframes introRule { to { width: 200px; } }
@keyframes introChar { to { opacity: 1; transform: none; } }
@keyframes introFade { to { opacity: 1; transform: none; } }
@keyframes introOut { to { opacity: 0; transform: translateY(-32px); } }

/* ---------- ヒーロー（画像版）---------- */
.hero-visual { padding: 0; background: var(--ink-950); border-bottom: 1px solid var(--line); overflow: hidden; position: relative; }
/* トップ画像はアニメーションなしで静止表示する（呼吸ズーム・出現・金の光はすべて廃止） */
.hero-media { position: relative; }
.hero-visual img { width: 100%; height: auto; display: block; }
.hero-below { background: var(--white); border-top: 1px solid var(--line); }
.hero-below .inner {
  max-width: 1120px; margin: 0 auto; padding: var(--s4) var(--s3);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
}
.hero-below .lede { color: var(--ink-700); font-size: var(--fs-s); max-width: 44em; }
.hero-below .lede + .lede { margin-top: 6px; }
.hero-below .hero-cue { margin-top: 0; animation: none; flex-shrink: 0; }

/* ---------- ヒーロー ---------- */
.hero {
  background:
    radial-gradient(1100px 480px at 88% -12%, rgba(179, 52, 43, 0.08), transparent 62%),
    radial-gradient(700px 300px at -8% 108%, rgba(176, 141, 63, 0.07), transparent 60%),
    linear-gradient(180deg, var(--white) 0%, var(--paper) 100%);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero .inner {
  max-width: 1120px; margin: 0 auto; padding: var(--s8) var(--s3);
  display: grid; grid-template-columns: 1fr auto; gap: var(--s6); align-items: center;
}
.hero h1 {
  font-size: var(--fs-display);
  line-height: 1.5; letter-spacing: 0.06em; font-weight: 700;
  animation: hero-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero h1 .accent { color: var(--shu); }
.hero .lede {
  margin-top: var(--s3); max-width: 36em; color: var(--ink-700); font-size: var(--fs-base);
  animation: hero-in 0.9s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero .lede + .lede { margin-top: var(--s2); animation-delay: 0.25s; }

.hero-cue {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: var(--s5); text-decoration: none;
  font-size: var(--fs-s); letter-spacing: 0.2em; color: var(--shu-600);
  animation: hero-in 0.9s 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-cue .cue-line {
  width: 56px; height: 1px; background: var(--shu); position: relative; overflow: hidden;
}
.hero-cue .cue-line::after {
  content: ""; position: absolute; inset: 0; background: var(--gold);
  transform: translateX(-100%); animation: cue-slide 2.2s ease-in-out infinite;
}

.hero-kanji {
  writing-mode: vertical-rl;
  font-family: var(--serif);
  font-size: clamp(120px, 15vw, 200px); line-height: 1; font-weight: 700;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(179, 52, 43, 0.5);
  user-select: none;
  animation: hero-in 1.2s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.hero-kanji small {
  font-size: 13px; letter-spacing: 0.5em; margin-top: var(--s3);
  -webkit-text-stroke: 0; color: var(--muted); font-family: var(--sans);
}

@keyframes hero-in {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@keyframes cue-slide {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

/* ---------- スクロール登場 ---------- */
[data-reveal] {
  opacity: 0; transform: translateY(38px);
  filter: blur(6px);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
              transform 1s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.9s ease;
}
[data-reveal].in { opacity: 1; transform: none; filter: none; }
/* 方向・スケールのバリエーション（視線に変化をつける） */
[data-reveal="left"] { transform: translateX(-52px); }
[data-reveal="right"] { transform: translateX(52px); }
[data-reveal="scale"] { transform: scale(0.9); filter: blur(8px); }
[data-reveal="rise"] { transform: translateY(64px); }

/* ---------- セクション見出し ---------- */
.section { padding: var(--s7) 0; }
.section-head { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s5); }
.section-head h2 { font-size: var(--fs-h2); letter-spacing: 0.14em; font-weight: 700; display: flex; align-items: center; }
/* スクロールで朱の線がすっと伸びてから見出しが出る */
.section-head h2::before {
  content: ""; display: inline-block; width: 0; height: 2px; margin-right: 0;
  background: var(--shu); vertical-align: middle;
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s, margin-right 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}
.section-head.in h2::before { width: 38px; margin-right: 18px; }
.section-head .en {
  font-size: 11px; letter-spacing: 0.32em; color: var(--muted);
  opacity: 0; transform: translateX(-8px);
  transition: opacity 0.6s ease 0.5s, transform 0.6s ease 0.5s, letter-spacing 0.6s ease 0.5s;
}
.section-head.in .en { opacity: 1; transform: none; letter-spacing: 0.4em; }

/* ---------- 記事カード ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.card-grid.cols-2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.card-grid.cols-4 .thumb-title { font-size: 13px; inset: auto 12px 12px 12px; }
.card-grid.cols-4 .kanji { font-size: 56px; }
.card-grid.cols-4 .title { font-size: 13.5px; line-height: 1.6; }
.card-grid.cols-4 .body { padding: var(--s2) var(--s2) var(--s3); gap: 8px; }
@media (max-width: 980px) { .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .card-grid.cols-4 { grid-template-columns: repeat(2, 1fr); gap: var(--s2); } }

.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none; display: flex; flex-direction: column;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s, border-color 0.3s;
}
.card:hover, .card:focus-visible {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2);
  border-color: var(--line-strong);
}

.card .thumb {
  aspect-ratio: 16 / 9; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(420px 200px at 18% 105%, rgba(179, 52, 43, 0.32), transparent 66%),
    linear-gradient(135deg, #3a352c 0%, var(--ink-950) 74%);
}
.card .thumb .kanji {
  font-family: var(--serif); font-size: 72px; font-weight: 700;
  color: rgba(247, 244, 237, 0.15);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), color 0.5s;
}
.card:hover .thumb .kanji { transform: scale(1.12) rotate(-3deg); color: rgba(247, 244, 237, 0.24); }
.card .thumb .thumb-title {
  position: absolute; inset: auto var(--s2) 14px var(--s2);
  font-family: var(--sans); color: var(--paper); font-size: 15px; line-height: 1.7;
  text-shadow: 0 1px 8px rgba(23, 21, 18, 0.5);
}
.card .thumb .cat {
  position: absolute; top: 0; left: 0; z-index: 2; background: var(--shu); color: #fff;
  font-size: 11px; letter-spacing: 0.14em; padding: 6px 14px; border-radius: 0 0 6px 0;
}
/* heroImageをサムネに使うとき（記事のトップ画像と連動）＝バナーは2:1なので枠も2:1にして見切れさせない */
.card .thumb:has(.thumb-img) { aspect-ratio: 2 / 1; }
.card .thumb .thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card:hover .thumb .thumb-img { transform: scale(1.04); transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.card .body { padding: var(--s3) var(--s3) var(--s3); flex: 1; display: flex; flex-direction: column; gap: 10px; }
.card .title {
  font-family: var(--sans); font-size: 15px; font-weight: 700; line-height: 1.75; letter-spacing: 0.01em;
  transition: color 0.2s;
}
.card:hover .title { color: var(--shu-600); }
.card .excerpt { font-size: var(--fs-s); color: var(--ink-700); line-height: 1.9; }
.card .meta { margin-top: auto; padding-top: var(--s1); font-size: var(--fs-xs); color: var(--muted); display: flex; gap: var(--s2); }

/* ---------- ABOUT ---------- */
.about-media { background: var(--white); border-block: 1px solid var(--line); }
.about-media .cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); align-items: start; }
.about-media p { color: var(--ink-700); font-size: var(--fs-base); max-width: 36em; }
.about-media p + p { margin-top: var(--s2); }
/* KOKOROZASHIとは：本文の右にシンプルな線付きリンク */
.about-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 34%);
  gap: var(--s6); align-items: center;
}
.about-cue { margin-top: 0; animation: none; justify-self: center; }

/* 発行人メッセージ（代表写真＋想いを語るコメント） */
.about-lede { max-width: 42em; }
.about-lede p { color: var(--ink-700); font-size: var(--fs-base); }
.about-lede p + p { margin-top: var(--s2); }

.founder-message {
  margin-top: var(--s5);
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s5);
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s5); box-shadow: var(--shadow-1);
}
.founder-photo {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius);
}
.founder-photo.placeholder {
  background:
    radial-gradient(240px 160px at 20% 108%, rgba(179, 52, 43, 0.35), transparent 68%),
    linear-gradient(135deg, #3a352c 0%, var(--ink-950) 76%);
  color: var(--paper);
  font-family: var(--serif); font-weight: 700; font-size: 52px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
}
.founder-photo.placeholder .ph-note {
  font-family: var(--sans); font-weight: 400; font-size: 10px; letter-spacing: 0.3em;
  color: rgba(247, 244, 237, 0.5);
}
.founder-body { position: relative; }
.founder-body::before {
  content: "“"; position: absolute; top: -18px; left: -8px;
  font-family: var(--serif); font-size: 64px; line-height: 1; color: var(--gold); opacity: 0.55;
}
.founder-label {
  font-size: var(--fs-s); font-weight: 700; letter-spacing: 0.24em; color: var(--shu-600); margin-bottom: var(--s2);
}
.founder-quote {
  font-family: var(--sans); font-size: var(--fs-base); line-height: 2; letter-spacing: 0.02em;
  color: var(--ink); max-width: 38em;
}
.founder-quote + .founder-quote { margin-top: var(--s2); }
/* 署名。狭い画面で「杉／浦誠二」のように名前が割れないよう、
   役職と氏名をそれぞれ塊として扱い、入らなければ行ごと折り返す */
.founder-sign {
  margin-top: var(--s3); text-align: right;
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  align-items: baseline; gap: 4px 12px;
}
.founder-sign .founder-role { font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.founder-sign b {
  font-family: var(--sans); font-size: 19px; letter-spacing: 0.12em;
  white-space: nowrap;
}

/* ---------- 掲載メリット ---------- */
.merit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.merit {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s4); position: relative;
}
.merit-num {
  font-family: var(--sans); font-size: 40px; font-weight: 600; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px var(--gold);
  display: block; margin-bottom: var(--s2);
}
/* 見出し・本文とも、末尾数文字だけが次行に落ちる折り返しを避ける */
.merit h3 {
  font-family: var(--sans); font-size: var(--fs-h3); letter-spacing: 0.06em;
  margin-bottom: var(--s1); text-wrap: balance;
}
.merit p { font-size: var(--fs-s); color: var(--ink-700); line-height: 2; text-wrap: pretty; }

/* ---------- Pick Upカルーセル ---------- */
.pickup-section { padding-bottom: var(--s5); }
.pickup-track {
  display: flex; gap: var(--s3);
  overflow-x: auto;
  padding: 0 max(var(--s3), calc((100vw - 1120px) / 2 + var(--s3))) var(--s2);
  scrollbar-width: none; cursor: grab;
}
.pickup-track.dragging { cursor: grabbing; user-select: none; }
.pickup-track::-webkit-scrollbar { display: none; }

.pickup-card {
  position: relative; flex: 0 0 min(640px, 86%);
  aspect-ratio: 16 / 8; border-radius: var(--radius); overflow: hidden;
  text-decoration: none; -webkit-user-drag: none; user-select: none;
  background:
    radial-gradient(560px 260px at 16% 108%, rgba(179, 52, 43, 0.38), transparent 64%),
    linear-gradient(135deg, #3a352c 0%, var(--ink-950) 74%);
  display: flex; align-items: flex-end;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s;
}
.pickup-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
/* heroImage版＝記事のトップ画像（バナー）をそのまま表示 */
.pickup-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-thumb:has(.side-thumb-img) { aspect-ratio: 2 / 1; }
.side-thumb .side-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pickup-card .cat {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--shu); color: #fff;
  font-size: 11.5px; letter-spacing: 0.14em; padding: 7px 16px; border-radius: 0 0 6px 0;
}
.pickup-card .kanji {
  position: absolute; top: 50%; right: 6%; transform: translateY(-58%);
  font-family: var(--serif); font-size: clamp(96px, 12vw, 150px); font-weight: 700;
  color: rgba(247, 244, 237, 0.13); line-height: 1;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pickup-card:hover .kanji { transform: translateY(-58%) scale(1.08) rotate(-3deg); }
.pickup-overlay {
  position: relative; z-index: 1; padding: var(--s4);
  background: linear-gradient(180deg, transparent, rgba(13, 12, 9, 0.55) 40%);
  width: 100%;
}
.pickup-copy {
  font-family: var(--sans); color: var(--paper);
  font-size: clamp(19px, 2.2vw, 26px); line-height: 1.7; letter-spacing: 0.06em; font-weight: 600;
  text-shadow: 0 1px 10px rgba(13, 12, 9, 0.5);
}
.pickup-title { margin-top: 10px; color: rgba(247, 244, 237, 0.85); font-size: var(--fs-s); line-height: 1.7; }
.pickup-meta { margin-top: 6px; color: rgba(247, 244, 237, 0.55); font-size: var(--fs-xs); }


/* 記事が1本だけのときはカルーセルとして回らない（回す相手がいない）。
   88%幅のままだと「右に続きがある」ように見えて誤解を生むので、1枚を主役として見せる */
.pickup-track:has(.pickup-card:only-child) { cursor: default; }
.pickup-track .pickup-card:only-child { flex: 0 0 min(640px, 100%); }
@media (max-width: 880px) {
  .pickup-track .pickup-card:only-child { flex-basis: 100%; }
}
.pickup-dots { display: flex; gap: 8px; justify-content: center; margin-top: var(--s2); }
.pickup-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line-strong); transition: background 0.25s, transform 0.25s;
}
.pickup-dot.active { background: var(--shu); transform: scale(1.25); }

/* もっと見る */
.more-row { text-align: center; margin-top: var(--s5); }
.btn-more {
  display: inline-block; text-decoration: none;
  font-size: var(--fs-s); letter-spacing: 0.14em; font-weight: 500; color: var(--ink);
  border: 1px solid var(--ink-500); border-radius: 999px; padding: 14px 44px;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-more:hover { background: var(--ink-950); border-color: var(--ink-950); color: var(--paper); transform: translateY(-2px); }

/* ---------- インタビュー検索 ---------- */
.search-box {
  display: flex; align-items: center; gap: 12px;
  max-width: 560px; margin: var(--s4) auto 0;
  background: var(--white); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 4px 8px 4px 20px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-box:focus-within { border-color: var(--shu); box-shadow: 0 0 0 3px rgba(179, 52, 43, 0.1); }
.search-box svg {
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round;
}
.search-box input {
  flex: 1; border: 0; background: transparent; font: inherit; font-size: var(--fs-s);
  color: var(--ink); padding: 11px 0;
}
.search-box input:focus-visible { outline: none; }
.search-box input::placeholder { color: var(--muted); opacity: 0.7; }

.tag-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: var(--s2); }
.tag-chip {
  font-size: var(--fs-xs); letter-spacing: 0.08em; color: var(--ink-700);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 7px 18px; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.tag-chip:hover { border-color: var(--shu); color: var(--shu-600); }
.tag-chip.active { background: var(--shu); border-color: var(--shu); color: #fff; font-weight: 700; }

.search-count { font-size: var(--fs-s); color: var(--muted); margin-bottom: var(--s3); }
.search-empty { text-align: center; padding: var(--s6) 0; color: var(--muted); line-height: 2.2; }
.search-empty .empty-kanji {
  font-family: var(--serif); font-size: 64px; font-weight: 700;
  color: transparent; -webkit-text-stroke: 1px var(--line-strong);
  margin-bottom: var(--s2);
}

/* ---------- 志 AWARD 100 ---------- */
.award { background: var(--white); border-block: 1px solid var(--line); }
.award-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 44%);
  gap: var(--s6); align-items: center;
}
.award-lede { color: var(--ink-700); font-size: var(--fs-base); max-width: 36em; }
.award-sub {
  font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: 0.12em;
  color: var(--ink-950); margin: var(--s4) 0 var(--s2);
}
.award-sub::before { content: "─ "; color: var(--gold); }
.award-list { list-style: none; display: grid; gap: 10px; }
.award-list li {
  position: relative; padding-left: 28px;
  font-size: var(--fs-s); color: var(--ink); line-height: 1.9;
}
.award-list li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--gold); font-weight: 700;
}
/* 選考基準：金の番号を振った箇条書き */
.award-criteria { list-style: none; counter-reset: crit; display: grid; gap: var(--s2); }
.award-criteria li {
  counter-increment: crit; position: relative; padding-left: 42px;
  font-size: var(--fs-s); line-height: 1.9;
}
.award-criteria li::before {
  content: counter(crit, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--serif); font-size: 15px; letter-spacing: 0.04em;
  color: var(--gold);
}
.award-criteria b { display: block; color: var(--ink-950); letter-spacing: 0.04em; }
.award-criteria span { color: var(--ink-700); }
/* awardページでは囲みにして目立たせる。幅はバナーと揃える */
.award-criteria-box {
  max-width: 860px; margin: 0 auto;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s5);
}
.award-criteria-box .award-sub { margin-top: 0; margin-bottom: var(--s3); }
.award-criteria-box .award-criteria { gap: var(--s3); }

/* 選出者一覧の見出し（基準の囲みと一覧を分ける） */
.awardee-head {
  max-width: 860px; margin: var(--s7) auto var(--s4); text-align: center;
}
/* カード上の金バッジと同じ意匠にして、受賞者一覧であることを明示する */
.awardee-head-badge {
  display: inline-block; margin-bottom: var(--s2);
  font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--ink-950); background: linear-gradient(120deg, #e8d9ae, var(--gold));
  padding: 5px 14px; border-radius: 3px; box-shadow: var(--shadow-1);
}
.awardee-head h2 {
  font-family: var(--sans); font-size: var(--fs-h3); letter-spacing: 0.1em;
  margin-bottom: var(--s1);
}
.awardee-head p { font-size: var(--fs-s); color: var(--ink-700); }

.award-banner img {
  width: 100%; height: auto; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
}
.award-banner figcaption { font-size: var(--fs-xs); color: var(--muted); margin-top: 10px; text-align: center; }

/* ---------- 志 AWARD 100：選出者一覧ページ ---------- */
.award-cue { margin-top: var(--s2); animation: none; justify-content: center; display: flex; }

.award-page-banner { max-width: 860px; margin: 0 auto var(--s6); }
.award-page-banner img {
  width: 100%; height: auto; border-radius: var(--radius);
  border: 1px solid var(--line); box-shadow: var(--shadow-1);
}

.awardee-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4);
}
.awardee-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; text-decoration: none;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s;
}
a.awardee-card:hover, a.awardee-card:focus-visible {
  transform: translateY(-6px); box-shadow: var(--shadow-2);
}
.awardee-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-family: var(--sans); font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--ink-950); background: linear-gradient(120deg, #e8d9ae, var(--gold));
  padding: 4px 10px; border-radius: 3px; box-shadow: var(--shadow-1);
}
.awardee-photo {
  width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block;
}
.awardee-photo.placeholder {
  background:
    radial-gradient(240px 160px at 20% 108%, rgba(179, 52, 43, 0.3), transparent 68%),
    linear-gradient(135deg, #3a352c 0%, var(--ink-950) 76%);
  color: rgba(247, 244, 237, 0.55);
  font-family: var(--serif); font-weight: 700; font-size: 44px;
  display: flex; align-items: center; justify-content: center;
}
.awardee-body { padding: var(--s2) var(--s3) var(--s3); display: flex; flex-direction: column; gap: 4px; flex: 1; }
.awardee-name { font-family: var(--sans); font-weight: 700; font-size: 18px; letter-spacing: 0.08em; color: var(--ink-950); }
.awardee-company { font-size: var(--fs-xs); color: var(--ink-700); line-height: 1.7; }
.awardee-role { color: var(--muted); letter-spacing: 0.06em; }
.awardee-link { margin-top: auto; padding-top: 8px; font-size: var(--fs-xs); letter-spacing: 0.08em; color: var(--shu-600); font-weight: 700; }

.awardee-card.coming { opacity: 0.6; }
.awardee-card.coming .awardee-photo.placeholder { background: var(--paper-2); color: var(--muted); }

/* ---------- CTAバンド ---------- */
.cta-band {
  background:
    radial-gradient(700px 280px at 85% 120%, rgba(179, 52, 43, 0.25), transparent 65%),
    var(--ink-950);
  color: var(--paper);
}
.cta-band .inner { max-width: 860px; margin: 0 auto; padding: var(--s7) var(--s3); text-align: center; }
.cta-band h2 { font-size: var(--fs-h2); letter-spacing: 0.12em; margin-bottom: var(--s2); }
/* balance＝行の長さを揃えて折り返す。「ます。」だけが次行に落ちるのを防ぐ */
.cta-band p {
  color: rgba(247, 244, 237, 0.72); font-size: var(--fs-s);
  max-width: 36em; margin: 0 auto var(--s4); text-wrap: balance;
}
.cta-band h2 { text-wrap: balance; }

.cta-buttons { display: flex; gap: var(--s2); justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; font-size: var(--fs-s); letter-spacing: 0.1em; font-weight: 500;
  padding: 15px 32px; border-radius: 4px;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s, border-color 0.2s, box-shadow 0.25s;
}
.btn::after { content: "→"; font-family: var(--sans); transition: transform 0.25s; }
.btn:hover::after { transform: translateX(4px); }
.btn-primary { background: var(--shu); color: #fff; box-shadow: 0 6px 18px -6px rgba(179, 52, 43, 0.55); }
.btn-primary:hover { background: var(--shu-600); transform: translateY(-2px); }
.btn-ghost { border: 1px solid rgba(247, 244, 237, 0.45); color: var(--paper); }
.btn-ghost:hover { border-color: var(--paper); background: rgba(247, 244, 237, 0.08); transform: translateY(-2px); }

/* ---------- フッター ---------- */
.site-footer { background: var(--ink-950); color: #9d9484; font-size: var(--fs-s); }
.foot-main {
  max-width: 1120px; margin: 0 auto; padding: var(--s7) var(--s3) var(--s5);
  display: grid; grid-template-columns: 1fr auto; gap: var(--s6); align-items: start;
}
.foot-brand {
  color: var(--paper); text-decoration: none;
  display: inline-flex; align-items: center; gap: 12px;
}
/* ヘッダー題字と同じ：明朝＋赤いZ */
.foot-name {
  font-family: var(--serif); font-weight: 600;
  font-size: 20px; letter-spacing: 0.2em; line-height: 1;
  color: var(--paper); font-feature-settings: "palt";
}
.foot-name .z { color: #d9503f; font-weight: 700; }
.foot-kanji { color: var(--shu); }
.foot-mark {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  background: var(--paper); box-shadow: 0 0 0 1px rgba(247, 244, 237, 0.25);
}
.foot-tag { margin-top: var(--s2); font-size: var(--fs-xs); letter-spacing: 0.1em; color: #b3a893; }

.foot-cols { display: flex; gap: var(--s6); }
.foot-col { display: flex; flex-direction: column; gap: 12px; }
.foot-col-head {
  font-size: 10.5px; letter-spacing: 0.24em; color: #6e675a;
  margin-bottom: 2px; text-transform: uppercase;
}
.foot-col a { color: #cfc6b6; text-decoration: none; font-size: var(--fs-s); transition: color 0.2s; }
.foot-col a:hover { color: var(--paper); }

.foot-copy {
  max-width: 1120px; margin: 0 auto; padding: var(--s3) var(--s3) var(--s5);
  font-size: var(--fs-xs); color: #6e675a; border-top: 1px solid rgba(247, 244, 237, 0.08);
}

/* ==========================================================
   記事ページ
   ========================================================== */
.article-header { background: var(--white); border-bottom: 1px solid var(--line); }
.article-header .inner { max-width: 768px; margin: 0 auto; padding: var(--s6) var(--s3) var(--s5); }

.breadcrumb { font-size: var(--fs-xs); color: var(--muted); margin-bottom: var(--s3); display: flex; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { text-decoration: none; }
.breadcrumb a:hover { color: var(--shu); }

.cat-labels { display: flex; gap: 8px; margin-bottom: var(--s2); flex-wrap: wrap; }
.cat-label {
  font-size: 11.5px; letter-spacing: 0.12em; color: var(--shu-600);
  border: 1px solid rgba(179, 52, 43, 0.55); padding: 3px 12px; border-radius: 999px;
}

.article-title { font-size: var(--fs-title); line-height: 1.65; letter-spacing: 0.04em; font-weight: 700; }
.article-subtitle { margin-top: var(--s2); font-family: var(--sans); font-size: var(--fs-l); color: var(--shu-700); letter-spacing: 0.06em; line-height: 1.9; }
.article-meta { margin-top: var(--s3); font-size: var(--fs-s); color: var(--muted); display: flex; gap: var(--s3); flex-wrap: wrap; }

/* メインビジュアル（写真プレースホルダ） */
.article-visual { margin: 0 auto; max-width: 920px; padding: var(--s5) var(--s3) 0; }
.article-visual .ph {
  aspect-ratio: 21 / 9; border-radius: var(--radius); overflow: hidden; position: relative;
  background:
    radial-gradient(620px 280px at 18% 108%, rgba(179, 52, 43, 0.34), transparent 64%),
    linear-gradient(135deg, #3a352c 0%, var(--ink-950) 76%);
  display: flex; align-items: center; justify-content: center;
}
.article-visual .ph .kanji { font-family: var(--serif); font-size: clamp(72px, 12vw, 120px); font-weight: 700; color: rgba(247, 244, 237, 0.13); }
.article-visual .ph .note { position: absolute; bottom: 12px; right: 16px; font-size: 11px; color: rgba(247, 244, 237, 0.4); }
/* ヒーロー画像テンプレ＝2:1（1000×500px 基準。文字入りバナーを想定し切り抜かない） */
.article-visual .article-hero-img {
  width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: center;
  border-radius: var(--radius); display: block;
}
.article-visual figcaption { font-size: var(--fs-xs); color: var(--muted); margin-top: 10px; text-align: right; }

/* 本文中の画像 */
.article-img { margin: var(--s6) 0; }
.article-img img {
  width: 100%; height: auto; display: block; border-radius: 14px;
  box-shadow: 0 14px 34px -20px rgba(23, 21, 15, 0.4);
}
.article-img figcaption {
  margin-top: 12px; font-size: var(--fs-xs); color: var(--muted);
  line-height: 1.7; text-align: center; letter-spacing: 0.02em;
}

/* 本文シェル（本文＋目次の2カラム） */
.article-shell {
  max-width: 1180px; margin: 0 auto; padding: var(--s5) var(--s3) var(--s3);
  display: grid; grid-template-columns: minmax(0, 1fr); justify-content: center;
}

.article-body { max-width: 720px; margin: 0 auto; width: 100%; font-size: 15.5px; line-height: 1.9; }
.article-body > * + * { margin-top: var(--s3); }
.article-body p { max-width: 40em; }
/* 文中リンク（自動リンク化した裸URL含む）。ボタン（.btn）は除外 */
.article-body a:not(.btn), .company-table a, .profile-box dd a {
  color: var(--shu-600); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px; word-break: break-word;
  transition: color 0.2s;
}
.article-body a:not(.btn):hover, .company-table a:hover, .profile-box dd a:hover { color: var(--shu); }

/* 記事の導入（リード文）だけ明朝＋広めの行間で"読み物"の格を出す。
   本文（Q&A・地の文）はゴシックのまま＝モバイル可読性・速度を優先。 */
.article-body .lead {
  font-family: var(--sans); font-weight: 500;
  font-size: 16px; line-height: 1.95; letter-spacing: 0.02em; color: var(--ink);
}

.article-body { counter-reset: sec; }
/* 章見出し＝赤帯（テーマ帯） */
.article-body > h2 {
  font-size: var(--fs-h2); line-height: 1.55; letter-spacing: 0.04em;
  margin: var(--s7) 0 var(--s4); padding: 16px 24px;
  color: #fff; background: var(--shu); border-radius: 6px;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.14), 0 8px 20px -14px rgba(179, 52, 43, 0.75);
}
.article-body > h2#company {
  background: var(--paper-2); color: var(--ink); box-shadow: none;
  border-left: 4px solid var(--shu); border-radius: 0;
}
.article-body h3 {
  font-size: var(--fs-h3); letter-spacing: 0.05em; line-height: 1.8;
  margin-top: var(--s5); padding-left: 14px; border-left: 3px solid var(--shu);
}

/* Q&A：質問＝聞き手ラベル＋太字（囲みなし）、回答＝囲みボックス */
.qa-role {
  flex-shrink: 0; font-size: 11px; letter-spacing: 0.12em; font-weight: 700;
  padding: 4px 12px; border-radius: 999px; white-space: nowrap; line-height: 1;
}
.qa-role-q { background: var(--paper-2); color: var(--ink-700); border: 1px solid var(--line-strong); }
.qa-role-a { background: var(--shu); color: #fff; }

/* 質問（編集部） */
.qa-q { display: flex; align-items: baseline; gap: 10px; margin-top: var(--s5); }
.qa-q .qa-text { color: var(--ink); font-weight: 700; }

/* 回答（杉浦）＝囲みボックス。連続する回答・地の文は1つの囲みに繋げる */
.qa-a {
  margin-top: var(--s2); padding: 18px 22px;
  background: var(--white); border: 1px solid rgba(23, 21, 15, 0.1);
  border-left: 3px solid var(--shu); border-radius: 12px;
}
.qa-a .qa-role-a { display: inline-block; margin-bottom: 10px; }
.qa-a .qa-text { display: block; }
.qa-a.qa-cont {
  margin-top: 0; padding-top: 14px;
  border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0;
}
.qa-a:has(+ .qa-cont) {
  padding-bottom: 0; border-bottom: 0;
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}

/* 引き（プルクオート）＝濃紺の高級感ブロック */
.pull-quote {
  margin: var(--s7) 0; padding: clamp(32px, 6vw, 56px) clamp(24px, 5vw, 56px);
  border-radius: 18px; text-align: center; position: relative; overflow: hidden;
  border: 1px solid rgba(247, 244, 237, 0.09);
  background:
    radial-gradient(620px 320px at 8% -20%, rgba(179, 52, 43, 0.42), transparent 58%),
    radial-gradient(520px 280px at 104% 128%, rgba(176, 141, 63, 0.18), transparent 60%),
    linear-gradient(135deg, #2b2721 0%, var(--ink-950) 72%);
}
/* 背景に薄く「志」を透かす */
.pull-quote::after {
  content: "志"; position: absolute; right: -2%; bottom: -18%;
  font-family: var(--serif); font-size: clamp(140px, 22vw, 240px); font-weight: 700;
  color: rgba(247, 244, 237, 0.04); line-height: 1; pointer-events: none;
}
.pull-quote blockquote {
  position: relative; z-index: 1; max-width: 32em; margin: 0 auto;
  color: var(--paper); font-size: clamp(19px, 2.3vw, 27px);
  line-height: 1.95; letter-spacing: 0.05em; font-weight: 700;
  text-shadow: 0 1px 16px rgba(13, 12, 9, 0.4);
}

/* プロフィール */
.profile-box {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s4) var(--s4); margin-top: var(--s6); box-shadow: var(--shadow-1);
}
/* 志＝上部キャッチコピー（ラベルなしで映える） */
.profile-catch {
  padding-bottom: var(--s4); margin-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}
.profile-catch::before {
  content: ""; display: block; width: 44px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--shu), rgba(179, 52, 43, 0.2));
  margin-bottom: var(--s3);
}
.profile-catch-text {
  font-size: clamp(22px, 3vw, 31px); font-weight: 800; color: var(--shu-700);
  line-height: 1.5; letter-spacing: 0.01em; text-wrap: pretty;
}
/* 写真＋項目 */
.profile-body { display: flex; gap: var(--s5); align-items: flex-start; }
.profile-photo {
  width: 200px; aspect-ratio: 4 / 5; height: auto; flex-shrink: 0;
  border-radius: 14px; object-fit: cover; object-position: center 22%;
  box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.5);
}
.profile-info { flex: 1; min-width: 0; padding-top: 4px; }
.profile-box .label {
  font-size: 15px; letter-spacing: 0.2em; font-weight: 700; color: var(--shu-700);
  margin: 0 0 var(--s2); border: 0; padding: 0;
}
.profile-box .label::before { content: none; }
.profile-box dl { display: grid; grid-template-columns: 9em minmax(0, 1fr); row-gap: 12px; font-size: var(--fs-s); }
.profile-box dt { color: var(--muted); }
.profile-box dd { color: var(--ink); }
.profile-box dd a { color: var(--shu-600); }

/* 経歴＝独立した年表ブロック */
.profile-career {
  margin-top: var(--s4); padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.career-label {
  font-size: 15px; letter-spacing: 0.2em; font-weight: 700; color: var(--shu-700);
  margin-bottom: var(--s3);
}
.career-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.career-list li {
  display: grid; grid-template-columns: 5em minmax(0, 1fr); gap: 16px;
  font-size: var(--fs-s); line-height: 1.7; position: relative;
  padding-left: 18px;
}
.career-list li::before {
  content: ""; position: absolute; left: 3px; top: 8px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--shu);
}
.career-list li:not(:last-child)::after {
  content: ""; position: absolute; left: 6px; top: 15px; bottom: -12px;
  width: 1px; background: var(--line-strong);
}
.career-year { font-weight: 700; color: var(--shu-600); font-variant-numeric: tabular-nums; }
.career-text { color: var(--ink-700); }

/* プロフィール：写真＋その下のSNSリンク */
.profile-photo-col { flex-shrink: 0; display: flex; flex-direction: column; gap: var(--s3); }
.profile-sns {
  display: flex; gap: 7px; flex-wrap: wrap; justify-content: center;
  width: 200px; max-width: 100%;
}
.profile-sns .sns-icon { width: 34px; height: 34px; }

/* 会社概要 */
.company-table { width: 100%; border-collapse: collapse; background: var(--white); font-size: var(--fs-s); margin-top: var(--s3); }
.company-table th, .company-table td { border: 1px solid var(--line); padding: 12px 16px; text-align: left; vertical-align: top; }
.company-table th { width: 9em; background: var(--paper-2); font-weight: 600; font-family: var(--sans); }
.asof { font-size: var(--fs-xs); color: var(--muted); margin-top: var(--s1); }


/* 記事内CTA */
.article-cta {
  margin-top: var(--s7); border-radius: var(--radius); padding: var(--s6) var(--s4); text-align: center;
  background:
    radial-gradient(500px 220px at 85% 120%, rgba(179, 52, 43, 0.28), transparent 65%),
    var(--ink-950);
  color: var(--paper);
}
.article-cta h2 { font-size: var(--fs-h3); letter-spacing: 0.1em; margin: 0 0 var(--s2); border: 0; padding: 0; }
.article-cta h2::before { content: none; }
/* 文字幅は1文が1行に収まる幅を確保する（狭いと「す。」だけ次行に落ちる） */
.article-cta p {
  font-size: var(--fs-s); color: rgba(247, 244, 237, 0.72);
  margin: 0 auto; max-width: 620px; text-wrap: pretty;
}
/* 段落どうしは改行1つぶんに詰めて、ボタンの手前でまとめて空ける */
.article-cta p:not(.cta-note) + p:not(.cta-note) { margin-top: 2px; }
.article-cta .cta-buttons { margin-top: var(--s4); }
/* ボタン下の補足（1本CTAなので、迷いどころを一言だけ添える） */
.article-cta .cta-note {
  font-size: var(--fs-xs); color: rgba(247, 244, 237, 0.55);
  margin: var(--s3) auto 0; max-width: 620px;
}

/* シェア */
.share-box { margin-top: var(--s5); text-align: center; }
.share-label { font-size: var(--fs-s); letter-spacing: 0.2em; color: var(--muted); margin-bottom: var(--s2); }
.share-links { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.share-links button {
  font-size: var(--fs-xs); letter-spacing: 0.06em;
  border: 1px solid var(--line-strong); background: var(--white); color: var(--ink-700);
  padding: 10px 22px; border-radius: 999px; transition: 0.2s; min-height: 40px;
}
.share-links button:hover { border-color: var(--shu); color: var(--shu-600); transform: translateY(-2px); }

/* 編集部ノート（E-E-A-T） */
.editor-note {
  border-top: 1px solid var(--line); margin-top: var(--s6); padding-top: var(--s4);
  font-size: var(--fs-s); color: var(--ink-700); display: flex; gap: var(--s2); align-items: flex-start;
}
.editor-note .avatar {
  width: 52px; height: 52px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--shu), var(--shu-700));
  color: #fff; font-family: var(--serif); font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.editor-note b { display: block; font-size: 14px; color: var(--ink); margin-bottom: 4px; }
.editor-note .editor-lead { line-height: 2; }
/* クレジットは行ごとに区切り、上下に余白をとって読みやすく */
.editor-note .credit {
  margin-top: var(--s4); padding-top: var(--s4); border-top: 1px dashed var(--line);
  display: grid; gap: 0;
}
.editor-note .credit > div {
  display: flex; gap: var(--s2); align-items: baseline;
  padding: 10px 0;
}
.editor-note .credit > div + div { border-top: 1px solid var(--line); }
.editor-note .credit dt {
  flex: 0 0 auto; min-width: 9em; white-space: nowrap;
  font-size: var(--fs-xs); letter-spacing: 0.08em;
  color: var(--shu-600); font-weight: 700;
}
.editor-note .credit dd { font-size: var(--fs-s); color: var(--ink); line-height: 1.7; }

@media (max-width: 767px) {
  /* 狭い画面では見出しと内容を縦に積む */
  .editor-note .credit > div { flex-direction: column; gap: 4px; padding: 12px 0; }
  .editor-note .credit dt { min-width: 0; }
}

/* 本文冒頭のインライン目次ボックス */
.toc-inline {
  margin: 0 0 var(--s5); padding: var(--s4) var(--s4) var(--s2);
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.toc-inline-head {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: var(--fs-l); font-weight: 700; letter-spacing: 0.14em; color: var(--ink);
  padding-bottom: var(--s3); margin-bottom: var(--s2);
  border-bottom: 1px solid var(--line);
}
.toc-inline-head .toc-ico { color: var(--shu); }
.toc-inline-body { position: relative; overflow: hidden; transition: max-height 0.4s ease; }
.toc-inline:not(.open) .toc-inline-body { max-height: 340px; }
.toc-inline:not(.open) .toc-inline-body::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 96px; pointer-events: none;
  background: linear-gradient(180deg, rgba(247, 244, 237, 0), var(--paper) 82%);
}
.toc-list, .toc-sublist { list-style: none; margin: 0; padding: 0; }
.toc-item + .toc-item { margin-top: 4px; }
.toc-link {
  display: flex; align-items: baseline; gap: 2px; text-decoration: none;
  color: var(--ink-700); line-height: 1.7; padding: 5px 4px; border-radius: 6px;
  transition: color 0.2s, background 0.2s;
}
.toc-link:hover { color: var(--shu-600); background: var(--paper-2); }
.toc-num { flex-shrink: 0; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.toc-bar { flex-shrink: 0; color: var(--line-strong); margin: 0 2px; }
.toc-txt { font-size: var(--fs-s); }
.toc-list > .toc-item > .toc-link { font-size: var(--fs-base); }
.toc-list > .toc-item > .toc-link .toc-num { font-size: var(--fs-l); }
.toc-sublist { margin: 2px 0 6px; padding-left: 1.6em; }
.toc-sublist .toc-num { font-weight: 500; color: var(--muted); }
.toc-sublist .toc-txt { color: var(--ink-700); }
.toc-more {
  position: relative; display: block; margin: var(--s2) auto var(--s1);
  padding: 9px 26px; background: var(--white); color: var(--ink-700);
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-size: var(--fs-s); font-weight: 700; letter-spacing: 0.08em; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.toc-more:hover { background: var(--shu); color: #fff; border-color: var(--shu); }
.toc-more::before, .toc-more::after {
  content: ""; position: absolute; top: 50%; width: 44px; border-top: 1px dotted var(--line-strong);
}
.toc-more::before { right: 100%; margin-right: 14px; }
.toc-more::after { left: 100%; margin-left: 14px; }
.toc-more[hidden] { display: none; }
.toc-inline.open .toc-more::before, .toc-inline.open .toc-more::after { display: none; }

/* 記事サイド：新着記事（1180px以上で右カラムに表示） */
.side-latest { display: none; }
.side-head {
  display: flex; align-items: baseline; gap: 10px;
  font-size: var(--fs-base); font-weight: 700; letter-spacing: 0.1em; color: var(--ink);
  padding-bottom: 10px; margin-bottom: var(--s3); border-bottom: 2px solid var(--shu);
}
.side-head-en { font-size: 9px; letter-spacing: 0.24em; color: var(--muted); font-weight: 400; }
.side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.side-item { display: block; text-decoration: none; color: var(--ink); }
.side-thumb {
  position: relative; overflow: hidden; display: flex; align-items: flex-end;
  aspect-ratio: 16 / 9; border-radius: 8px; padding: 12px;
  background:
    radial-gradient(220px 120px at 16% 110%, rgba(179, 52, 43, 0.4), transparent 66%),
    linear-gradient(135deg, #3a352c 0%, var(--ink-950) 76%);
}
.side-cat {
  position: absolute; top: 0; left: 0; z-index: 2;
  background: var(--shu); color: #fff; font-size: 9px; letter-spacing: 0.08em;
  padding: 4px 10px; border-radius: 0 0 5px 0;
}
.side-kanji {
  position: absolute; top: 50%; right: 6%; transform: translateY(-52%);
  font-family: var(--serif); font-weight: 700; font-size: 58px; line-height: 1;
  color: rgba(247, 244, 237, 0.14);
}
.side-thumb-ttl {
  position: relative; z-index: 1; color: var(--paper);
  font-weight: 700; font-size: 12.5px; line-height: 1.55;
  text-shadow: 0 1px 8px rgba(13, 12, 9, 0.5);
}
.side-ttl {
  display: block; margin-top: 9px; font-size: var(--fs-s); line-height: 1.6;
  font-weight: 700; color: var(--ink); transition: color 0.2s;
}
.side-item:hover .side-thumb { box-shadow: var(--shadow-2); }
.side-item:hover .side-ttl { color: var(--shu-600); }

/* 関連記事 */
.related { padding: var(--s6) 0 var(--s7); }
.related h2 { font-family: var(--sans); font-size: var(--fs-h3); letter-spacing: 0.12em; margin-bottom: var(--s3); }
.related h2::before { content: "─ "; color: var(--shu); }

/* ==========================================================
   メンバー名鑑
   ========================================================== */
.page-hero { background: var(--white); border-bottom: 1px solid var(--line); }
.page-hero .inner { max-width: 1120px; margin: 0 auto; padding: var(--s6) var(--s3) var(--s5); }
/* 法務・フォーム系ページ：本文コンテナ（720px）と左端を揃える */
.page-hero .inner.narrow { max-width: 768px; }
/* 中央揃え版（本文が中央基準のページ用） */
.page-hero .inner.center { text-align: center; }
.page-hero .inner.center h1 { justify-content: center; }
.page-hero .inner.center .breadcrumb { justify-content: center; }
.page-hero .inner.center .page-lede { max-width: 40em; margin-left: auto; margin-right: auto; }
.page-hero h1 {
  font-size: var(--fs-title); letter-spacing: 0.1em; font-weight: 700;
  display: flex; align-items: baseline; gap: var(--s3);
}
.page-hero h1::before { content: "─ "; color: var(--shu); }
.page-hero h1 .en { font-size: 11px; letter-spacing: 0.32em; color: var(--muted); font-family: var(--sans); font-weight: 400; }
.page-hero .page-lede { margin-top: var(--s2); color: var(--ink-700); max-width: 38em; font-size: var(--fs-base); }

/* ---------- タイトルを主役にしたページヘッダー ---------- */
.page-hero-feature .inner { padding: var(--s6) var(--s3) var(--s5); }
.page-hero-feature .feature-title {
  display: block; position: relative; text-align: center;
  /* --fs-title（最大36px）を基準に、ページの顔として1段だけ上げる */
  font-size: clamp(26px, 3.4vw + 14px, 40px); font-weight: 800;
  letter-spacing: 0.16em; line-height: 1.3;
  /* 最後の1文字ぶんの字間が右に余るので、光学的に中央へ戻す */
  padding-left: 0.16em;
  padding-bottom: var(--s3); text-wrap: balance;
}
/* 規約・完了ページなど、文字数が多い or 主張を抑えたいページ */
.page-hero-feature .feature-title.compact { font-size: clamp(21px, 2vw + 14px, 28px); }
.page-hero-feature .feature-title::before { content: none; }
/* 下に朱の短い罫を1本だけ通す */
.page-hero-feature .feature-title::after {
  content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 56px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--shu), rgba(179, 52, 43, 0.2));
}
.page-hero-feature .feature-page {
  display: block; margin-top: var(--s2);
  font-family: var(--sans); font-size: 12px; font-weight: 400;
  letter-spacing: 0.24em; color: var(--muted); text-indent: 0;
}
.page-hero-feature .page-lede { margin-top: var(--s4); }

/* 挑戦者カード：フルワイド横型（左＝人物、右＝志と詳細） */
.member-list { display: grid; gap: var(--s4); }

.member-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s5);
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: var(--s5);
  box-shadow: var(--shadow-1);
}

.member-side {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px;
  padding-right: var(--s4); border-right: 1px solid var(--line);
}
.member-main > * + * { margin-top: var(--s3); }

/* 顔写真（主役）。img でも placeholder でも同じ円形 */
.member-photo {
  width: 148px; height: 148px; flex-shrink: 0; border-radius: 50%;
  object-fit: cover; border: 3px solid var(--white);
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-1);
}
.member-photo.placeholder {
  background:
    radial-gradient(140px 70px at 20% 110%, rgba(179, 52, 43, 0.4), transparent 70%),
    linear-gradient(135deg, #3a352c 0%, var(--ink-950) 76%);
  color: var(--paper);
  font-family: var(--serif); font-weight: 700; font-size: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  position: relative; line-height: 1;
}
.member-photo.placeholder .ph-note {
  font-family: var(--sans); font-weight: 400; font-size: 9px; letter-spacing: 0.2em;
  color: rgba(247, 244, 237, 0.5); margin-top: 6px;
}
.member-photo.placeholder.small { width: 72px; height: 72px; font-size: 24px; }

/* 掲載準備中のコンパクトなタイル */
.member-coming-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s3); margin-top: var(--s4); }
.member-coming {
  display: flex; align-items: center; gap: var(--s3);
  background: var(--paper); border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: var(--s3) var(--s4); opacity: 0.85;
}
.member-coming .member-photo.placeholder { background: var(--paper-2); color: var(--muted); box-shadow: none; border: 0; flex-shrink: 0; }
.coming-title { font-family: var(--sans); font-weight: 700; font-size: 16px; letter-spacing: 0.08em; color: var(--ink-700); }
.coming-text { font-size: var(--fs-xs); color: var(--muted); line-height: 1.8; }
.member-coming > div + .coming-title { margin: 0; }
.member-company-sub {
  font-size: 13px; color: var(--ink-700);
  display: flex; align-items: center; justify-content: center; gap: 8px; line-height: 1.6;
  margin-top: 6px; white-space: nowrap;
}
.member-name-main {
  font-family: var(--sans); font-weight: 700; font-size: 20px; line-height: 1.5;
  letter-spacing: 0.06em; white-space: nowrap;
}

/* TANEコミュニティのタグ */
.tane-badge {
  display: inline-block;
  font-family: var(--sans); font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em;
  color: #46603c; background: rgba(90, 125, 79, 0.1);
  border: 1px solid rgba(90, 125, 79, 0.38);
  padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}

/* 企業ロゴ（社名の隣にインライン。ある場合のみ表示） */
.member-logo-inline {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 7px;
  object-fit: contain; background: var(--white); border: 1px solid var(--line);
  padding: 3px;
}
.member-logo-inline.text {
  background:
    radial-gradient(70px 36px at 20% 110%, rgba(179, 52, 43, 0.35), transparent 70%),
    linear-gradient(135deg, #3a352c 0%, var(--ink-950) 76%);
  color: var(--paper); border: 0;
  font-family: var(--sans); font-weight: 700; font-size: 7.5px; letter-spacing: 0.04em;
  display: inline-flex; align-items: center; justify-content: center;
}

.member-note { margin-top: var(--s3); font-size: var(--fs-xs); color: var(--muted); text-align: right; }

.member-facts { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); row-gap: 10px; font-size: var(--fs-s); line-height: 1.9; }
.member-facts dt { color: var(--muted); }
.member-facts dd { color: var(--ink); }

.member-connect {
  background: var(--paper); border-left: 3px solid var(--shu); border-radius: 0 6px 6px 0;
  padding: var(--s2) var(--s3); font-size: var(--fs-s); line-height: 1.9; color: var(--ink);
}
.member-connect b {
  display: block; font-family: var(--sans); color: var(--shu-700);
  letter-spacing: 0.08em; margin-bottom: 4px; font-size: 14px;
}

/* 志＝カードのキャッチコピー（顔写真・社名の直下で最も目立たせる） */
/* 志のキャッチコピー＝カードの主役。記号に頼らず、朱の罫と字面の強さで見せる */
.member-catch {
  padding-bottom: var(--s3); border-bottom: 1px solid var(--line);
}
.member-catch::before {
  content: ""; display: block; width: 44px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--shu), rgba(179, 52, 43, 0.2));
  margin-bottom: var(--s2);
}
.member-catch p {
  font-family: var(--sans); font-weight: 800;
  font-size: clamp(20px, 1.9vw + 12px, 26px); line-height: 1.55; letter-spacing: 0.02em;
  color: var(--ink-950); text-wrap: pretty;
}

/* インタビューボタン＋SNSアイコン列 */
.btn-interview {
  display: block; width: 100%; max-width: 200px; margin-top: var(--s2);
  text-align: center; text-decoration: none;
  font-size: 13.5px; font-weight: 500; letter-spacing: 0.12em;
  background: var(--shu); color: #fff; padding: 13px 0; border-radius: 999px;
  box-shadow: 0 6px 16px -8px rgba(179, 52, 43, 0.6);
  transition: background 0.2s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-interview:hover { background: var(--shu-600); transform: translateY(-2px); }

.sns-row { display: flex; gap: 10px; justify-content: center; margin-top: 6px; }
.sns-icon {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: var(--white); color: var(--ink-500);
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  transition: color 0.2s, border-color 0.2s, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.sns-icon:hover { color: var(--shu-600); border-color: var(--shu); transform: translateY(-2px); }
.sns-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sns-icon svg.fill { fill: currentColor; stroke: none; }
.sns-icon span { font-size: 11px; font-weight: 700; }

/* ページ送り */
.pagination { display: flex; gap: 8px; justify-content: center; margin-top: var(--s5); }
.page-btn {
  min-width: 42px; height: 42px; padding: 0 8px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--white);
  text-decoration: none; font-size: var(--fs-s); color: var(--ink-700);
  transition: color 0.2s, border-color 0.2s;
}
a.page-btn:hover { color: var(--shu-600); border-color: var(--shu); }
.page-btn.current { background: var(--shu); border-color: var(--shu); color: #fff; font-weight: 700; }

.member-coming-note { font-size: var(--fs-s); color: var(--muted); }

/* ==========================================================
   取材のご依頼フォーム
   ========================================================== */
.wrap-form { max-width: 720px; margin: 0 auto; padding: 0 var(--s3); }

.contact-form {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--s5); box-shadow: var(--shadow-1);
}
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.form-row { margin-bottom: var(--s3); }
.form-row.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }

.contact-form label {
  display: block; font-size: var(--fs-s); font-weight: 700; color: var(--ink-700);
  letter-spacing: 0.04em;
}
.contact-form .req {
  display: inline-block; margin-left: 8px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.1em;
  color: var(--white); background: var(--shu); border-radius: 3px; padding: 2px 8px;
  vertical-align: 1px;
}
.contact-form input:not([type="hidden"]),
.contact-form select,
.contact-form textarea {
  display: block; width: 100%; margin-top: 8px;
  font: inherit; font-size: var(--fs-base); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 12px 16px;
  transition: border-color 0.2s, background 0.2s;
}
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: none; border-color: var(--shu); background: var(--white);
}
.contact-form textarea { resize: vertical; min-height: 96px; }
.contact-form ::placeholder { color: var(--muted); opacity: 0.7; }

.form-note { font-size: var(--fs-xs); color: var(--muted); margin: var(--s3) 0 var(--s2); }
.form-submit { border: 0; cursor: pointer; width: 100%; justify-content: center; font-size: 15px; }
/* 同意チェックボックス */
.form-consent {
  display: flex !important; align-items: center; justify-content: center; gap: 10px;
  margin-bottom: var(--s3); font-size: var(--fs-s); font-weight: 500 !important;
  color: var(--ink) !important; cursor: pointer;
}
.form-consent input[type="checkbox"] {
  width: 20px; height: 20px; margin: 0; flex-shrink: 0;
  accent-color: var(--shu); cursor: pointer;
}
.form-consent a { color: var(--shu-600); font-weight: 700; }

.form-status { margin-top: var(--s2); font-size: var(--fs-s); color: var(--shu-600); font-weight: 700; text-align: center; min-height: 1em; }

/* 法務ページ（プライバシーポリシー等） */
.legal-body h2 {
  font-family: var(--sans); font-size: var(--fs-h3); letter-spacing: 0.06em;
  margin: var(--s5) 0 var(--s2); padding-left: 14px; border-left: 3px solid var(--shu);
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body p, .legal-body li { font-size: var(--fs-s); color: var(--ink-700); line-height: 2; }
.legal-body ul { padding-left: 1.4em; display: grid; gap: 6px; }
.legal-date { margin-top: var(--s5); text-align: right; color: var(--muted); }
.form-alt { margin-top: var(--s3); font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.form-alt a { color: var(--shu-600); }

/* ---------- レスポンシブ ---------- */
@media (min-width: 1180px) {
  .article-shell { grid-template-columns: minmax(0, 860px) 216px; gap: 48px; }
  .article-body { margin: 0; max-width: none; }
  .article-body p { max-width: none; }
  .side-latest {
    display: block; position: sticky; top: calc(var(--header-h) + 32px);
    align-self: start;
    max-height: calc(100vh - var(--header-h) - 64px); overflow-y: auto;
  }
}

@media (max-width: 880px) {
  .global-nav {
    position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--ink-950); border-bottom: 1px solid rgba(247, 244, 237, 0.12);
    padding: var(--s1) var(--s3) var(--s2);
    display: none;
  }
  .global-nav.open { display: flex; }
  .global-nav a { padding: 14px 4px; font-size: 15px; border-bottom: 1px solid rgba(247, 244, 237, 0.08); }
  .global-nav a::after { content: none; }
  .global-nav .nav-cta { display: block; color: var(--shu); font-weight: 700; border-bottom: 0; }
  .nav-toggle { display: block; }
  .header-cta { display: none; }

  .hero .inner { grid-template-columns: 1fr; padding: var(--s6) var(--s3) var(--s7); gap: var(--s4); }
  .hero-kanji { display: none; }

  .card-grid, .card-grid.cols-2 { grid-template-columns: 1fr; }
  /* 4:3にすると2:1のバナーが左右で見切れる。画像入りは比率を合わせて全体を見せる */
  .pickup-card { flex-basis: 88%; aspect-ratio: 4 / 3; }
  .pickup-card.pickup-card-img { aspect-ratio: 2 / 1; }
  .pickup-overlay { padding: var(--s3); }
  .foot-main { grid-template-columns: 1fr; gap: var(--s4); }
  .foot-cols { gap: var(--s4); flex-wrap: wrap; }
  .member-card { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s3); }
  .member-side { padding-right: 0; border-right: 0; padding-bottom: var(--s3); border-bottom: 1px solid var(--line); }
  .member-coming-grid { grid-template-columns: 1fr; }
  .merit-grid { grid-template-columns: 1fr; }
  .founder-message { grid-template-columns: 1fr; gap: var(--s3); padding: var(--s3); }
  .founder-photo { aspect-ratio: 3 / 2; }
  .about-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .award-grid { grid-template-columns: 1fr; gap: var(--s4); }
  .awardee-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s2); }
  .awardee-name { font-size: 16px; }
  .form-row.cols2 { grid-template-columns: 1fr; gap: 0; }
  .form-row.cols2 label + label { margin-top: var(--s3); }
  .contact-form { padding: var(--s3); }
  .about-media .cols { grid-template-columns: 1fr; gap: var(--s4); }
  .section { padding: var(--s6) 0; }

  .profile-box { padding: var(--s3); }
  .profile-body { flex-direction: column; align-items: center; }
  .profile-photo { width: 168px; }
  .profile-info { width: 100%; }
  .profile-box dl { grid-template-columns: 1fr; row-gap: 4px; }
  .profile-box dt { margin-top: var(--s2); }
  .qa-a { padding: 14px 16px; }
  .qa-q { gap: 8px; }
}

/* ---------- モーション配慮 ---------- */
/* オーナー方針：オープニング・スクロール演出とも全員に再生する。
   （reduce-motion でも動く。強すぎる無限アニメは元々使っていない） */

/* ---------- スマートフォンのファーストビュー ----------
   トップの画像ヒーローを、スクロール前の画面いっぱいに表示する。
   縦長のスマホ用ビジュアル（hero-mobile.jpg）を picture で出し分けている。 */
@media (max-width: 767px) {
  /* リード文（hero-below）はファーストビューの外へ。画像だけで1画面を占める */
  .hero-visual { height: auto; display: block; }
  .hero-visual .hero-media {
    /* 枠は「最低でも1画面ぶん」とだけ決め、画像は高さ auto の普通のブロックで置く。
       単位は svh（スクロールしても値が変わらない）。dvh は使わないこと。 */
    min-height: calc(100vh - var(--header-h));
    min-height: calc(100svh - var(--header-h));
    height: auto;
    /* 画像を下端に寄せ、余りは上の無地部分に回す */
    display: flex;
    align-items: flex-end;
    position: relative;
    /* 画像の紙色と同じ。余った上部がこの色で埋まり、継ぎ目が見えなくなる */
    background: var(--hero-paper, #f0ebe7);
  }
  .hero-visual picture {
    display: block;
    width: 100%;
  }
  .hero-visual img {
    width: 100%;
    /* auto＝画像本来の高さ */
    height: auto;
    display: block;
  }

  /* 画像とリード文が離れて見えていた原因＝白帯の余白。詰めて一続きに見せる */
  .hero-below .inner {
    padding: var(--s3) var(--s3);
    gap: var(--s2);
  }
  .hero-below .lede { font-size: var(--fs-xs); line-height: 1.9; }
  .hero-below .hero-cue { margin-top: var(--s1); }
}

/* 横向き（ランドスケープ）で高さが足りないときは、全画面をやめて画像を素直に置く */
@media (max-width: 767px) and (orientation: landscape) {
  .hero-visual .hero-media { height: auto; }
  .hero-visual img { height: auto; object-fit: contain; }
}

/* ---------- 折り返しの品質 ----------
   日本語は単語の区切りがないため、行末に「す。」「い。」だけが取り残されやすい。
   短い塊は balance（行の長さを揃える）、長い本文は pretty（末尾の孤立を避ける）で処理する。 */
/* auto-phrase＝日本語の文節を見て改行位置を決める。
   「掲載／されます」のような不自然な切れ方と、行末の孤立を大きく減らす。
   非対応ブラウザでは従来どおりの折り返しになるだけで、崩れはしない */
.lede, .page-lede, .about-lede, .award-lede, .founder-quote,
.section-head h2, .card h3, .awardee-head p, .hero-below .lede,
.founder-message p, .about-body p, .article-body p, .award-list li,
.member-facts dd, .member-connect, .qa-a p, .qa-cont p, .cta-band p,
.article-body h2, .article-body h3, .qa-q, .article-img figcaption,
.profile-box dd, .awardee-company, .member-facts dt {
  word-break: auto-phrase;
}
/* 短い塊は行の長さを揃える */
.lede, .page-lede, .about-lede, .award-lede,
.section-head h2, .card h3, .awardee-head p, .hero-below .lede,
.founder-message .founder-quote,
.article-body h2, .article-body h3, .qa-q, .article-img figcaption,
.awardee-company, .profile-box dd, .company-table td {
  text-wrap: balance;
}
/* 長い本文は末尾の孤立行を避ける */
.founder-message p:not(.founder-quote), .about-body p, .article-body p,
.award-list li, .member-facts dd, .member-connect {
  text-wrap: pretty;
}

/* 規約・プライバシーポリシーの本文（箇条書きが多く、行末の孤立が出やすい） */
.legal-body p, .legal-body li, .legal-body h2, .legal-body h3,
.policy p, .policy li, .article-shell li {
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* ---------- 右下のスクロールボタン（最上部・最下部へ一気に移動） ---------- */
.scroll-nav {
  position: fixed; right: 16px; bottom: 16px; z-index: 40;
  display: flex; flex-direction: column; gap: 8px;
  /* 初期は非表示。少しスクロールしたら .show で出す */
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  /* ホームインジケーターを避ける */
  margin-bottom: env(safe-area-inset-bottom, 0px);
}
.scroll-nav.show { opacity: 1; transform: none; pointer-events: auto; }
.scroll-btn {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink-950); color: var(--paper);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 14px -4px rgba(23,21,18,0.5);
  cursor: pointer; transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}
.scroll-btn:hover { background: var(--shu); transform: translateY(-2px); }
.scroll-btn:active { transform: translateY(0); }
/* 端にいる方向のボタンは隠す（押しても動かないボタンを見せない） */
.scroll-nav.at-top [data-scroll="top"],
.scroll-nav.at-bottom [data-scroll="bottom"] {
  opacity: 0; pointer-events: none; height: 0; width: 0; border: 0; margin: 0; overflow: hidden;
}
@media (max-width: 767px) {
  .scroll-nav { right: 12px; bottom: 12px; }
  .scroll-btn { width: 40px; height: 40px; }
}