@charset "UTF-8";
/* ==========================================================================
   components.css — 再利用コンポーネント
   --------------------------------------------------------------------------
   サイト非依存レイヤー。HISPRO 固有の実装（ヘッダー・フッター等）は
   site.css に置くこと。このファイルは他サイトへそのまま持ち出せる状態を保つ。
   ========================================================================== */

/* ==========================================================================
   1. 基本要素
   ========================================================================== */

/* --- eyebrow ------------------------------------------------------------- */
.eyebrow{
  display:inline-block;
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--brand-green-mid);
}
.eyebrow.on-dark{ color:var(--brand-green); }

/* --- ボタン -------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-8);
  min-height:44px;                 /* タッチ操作の最小寸法 */
  padding:11px 22px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:600;
  line-height:1.3;
  border:1px solid transparent;
  border-radius:var(--r-full);
  cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-primary{ background:var(--brand-green); color:var(--on-primary); }
.btn-secondary{
  background:transparent;
  color:var(--ink);
  border-color:var(--hairline-strong);
}
.btn-on-dark{ background:var(--brand-green); color:var(--on-primary); }
.btn-secondary-dark{
  background:transparent;
  color:var(--on-dark);
  border-color:var(--hairline-dark);
}

@media (hover: hover){
  .btn-primary:hover,
  .btn-on-dark:hover{ color:var(--on-primary); background:var(--brand-green-mid); }
  .btn-secondary:hover{ color:var(--ink); background:var(--surface); }
  .btn-secondary-dark:hover{ color:var(--on-dark); background:var(--overlay-light); }
}

/* --- 文中のリンク --------------------------------------------------------
   a の既定は color:inherit・下線なし（base.css）。地の文の中では色と下線が
   無いとリンクだと分からないため、本文中のリンクには必ずこの体裁を与える。
   .prose の中は書き忘れても効くようにしておく                          */
.link-inline,
.prose a{
  color:var(--brand-green-dark);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-decoration-color:var(--brand-green-soft);
  text-underline-offset:3px;
}
@media (hover: hover){
  .link-inline:hover,
  .prose a:hover{ text-decoration-color:var(--brand-green-dark); }
}

/* --- テキストリンク ------------------------------------------------------ */
.link-green{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-8);
  font-size:14px;
  font-weight:600;
  color:var(--brand-green-dark);
}

/* --- バッジ -------------------------------------------------------------- */
.badge-soft{
  display:inline-flex;
  align-items:center;
  padding:4px 11px;
  background:var(--brand-green-soft);
  color:var(--brand-green-dark);
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
  border-radius:var(--r-full);
}
.badge-ver{
  display:inline-flex;
  align-items:center;
  padding:3px 9px;
  background:var(--surface-soft);
  color:var(--slate);
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  white-space:nowrap;
  border-radius:var(--r-full);
}

/* --- 矢印などの装飾記号 --------------------------------------------------
   aria-hidden="true" を付けて読み上げから外すこと。                        */
.deco{ color:var(--stone); }

/* ==========================================================================
   2. セクション見出し
   ========================================================================== */
.sec-head{ margin-bottom:var(--sp-40); }
.sec-head .kicker{
  display:flex;
  align-items:baseline;
  gap:14px;
}
.sec-head .kicker .no{
  font-family:var(--mono);
  font-size:26px;
  font-weight:600;
  line-height:1;
  color:var(--brand-green-mid);
}
.sec-head h2{
  font-size:clamp(25px, 3vw, 36px);
  line-height:1.25;
  letter-spacing:-.5px;
}
.sec-head .lead{
  max-width:var(--prose-width);
  margin-top:var(--sp-12);
  font-size:16px;
  line-height:1.75;
  color:var(--slate);
}
/* 見出しと本体（一覧など）の間に置く導入の散文 */
.section-intro{ margin-bottom:var(--sp-32); }

/* 見出しと右側リンクを両端に置く形 */
.sec-head.split{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--sp-24);
}

/* ==========================================================================
   3. メニューカード
   ========================================================================== */
.menu-card{
  display:flex;
  flex-direction:column;
  gap:var(--sp-16);
  min-height:228px;
  padding:28px;
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.menu-card .ico{
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  background:var(--surface-feature);
  border:1px solid var(--brand-green-soft);
  border-radius:var(--r-md);
}
.menu-card .ico svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:var(--brand-green-dark);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.menu-card h3{
  font-size:21px;
  line-height:1.3;
}
.menu-card .en{
  margin-top:-10px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.02em;
  color:var(--stone);
}
.menu-card p{
  font-size:14px;
  line-height:1.7;
  color:var(--slate);
}
.menu-card .go{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-8);
  margin-top:auto;
  font-size:14px;
  font-weight:600;
  color:var(--brand-green-dark);
}
@media (hover: hover){
  .menu-card:hover{
    box-shadow:var(--e2);
    transform:translateY(-2px);
    color:inherit;
  }
}

/* ==========================================================================
   4. ニュース / 更新履歴
   ========================================================================== */
.news-list{
  display:flex;
  flex-direction:column;
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.news-row{
  display:flex;
  align-items:center;
  gap:22px;
  padding:20px 26px;
  border-bottom:1px solid var(--hairline-soft);
  transition:background var(--dur) var(--ease);
}
.news-row:last-child{ border-bottom:none; }
.news-row .date{
  flex:0 0 auto;
  width:96px;
  font-family:var(--mono);
  font-size:13px;
  color:var(--steel);
}
.news-row .cat{
  flex:0 0 auto;
  width:84px;
  text-align:center;
}
.news-row .txt{
  flex:1 1 auto;
  font-size:15px;
  line-height:1.6;
  color:var(--charcoal);
}
.news-row .chev{ flex:0 0 auto; }
@media (hover: hover){
  a.news-row:hover{ background:var(--surface); color:inherit; }
  a.news-row:hover .txt{ color:var(--brand-green-dark); }
}

/* ==========================================================================
   4.5 コラム記事カード
   --------------------------------------------------------------------------
   1件＝1枚。日付・分類・表題・リード文・続きを読む、の5つを持つ。
   .news-row（日付＋バッジ＋本文1行）では見出しレベルとリード文が持てず、
   .menu-card はアイコンと英字見出しが前提で日付の置き場が無いため分けた。

   マークアップは <ul><li><a class="column-card"> の入れ子にすること
   （理由は 8.5 と同じ。CSS が届かなくても縦に積まれる状態を保つ）。

   件数が増えたら Django が同じマークアップで行を出力する。
   ページ送りはこの器の外側の問題として、その時点で設計する。
   ========================================================================== */
.column-list{
  display:flex;
  flex-direction:column;
  gap:var(--sp-16);
}
.column-card{
  display:flex;
  flex-direction:column;
  gap:var(--sp-12);
  padding:24px 26px;
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  transition:box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* 日付と分類。表題より先に読ませる情報なので上に置く */
.column-card .meta{
  display:flex;
  align-items:center;
  gap:var(--sp-12);
  flex-wrap:wrap;
}
.column-card .date{
  font-family:var(--mono);
  font-size:13px;
  color:var(--steel);
}
.column-card h3{
  font-size:20px;
  line-height:1.4;
}
.column-card p{
  font-size:14.5px;
  line-height:1.8;
  color:var(--slate);
}
.column-card .go{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-8);
  margin-top:var(--sp-4);
  font-size:14px;
  font-weight:600;
  color:var(--brand-green-dark);
}
@media (hover: hover){
  a.column-card:hover{
    box-shadow:var(--e2);
    transform:translateY(-2px);
    color:inherit;
  }
  a.column-card:hover h3{ color:var(--brand-green-dark); }
}

/* 記事末尾から一覧へ戻る導線。本文との間隔だけを与える */
.article-back{ margin-top:var(--sp-40); }

/* ==========================================================================
   5. 資料・リンクリスト — 本サイトで最も重要なコンポーネント
   --------------------------------------------------------------------------
   1行＝1つの行き先。PDF（.pdf バッジ）でも外部サイト（.ext バッジ）でも使う。
   ========================================================================== */
.doc-list{
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.doc{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-16);
  padding:20px 24px;
  border-bottom:1px solid var(--hairline-soft);
  transition:background var(--dur) var(--ease);
}
.doc:last-child{ border-bottom:none; }
/* 種別バッジ。文字を入れる .pdf と、アイコンを入れる .ext で体裁を共有する */
.doc .pdf,
.doc .ext{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  background:var(--surface-feature);
  border:1px solid var(--brand-green-soft);
  border-radius:var(--r-md);
  font-family:var(--mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--brand-green-dark);
}
.doc .ext svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:var(--brand-green-dark);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.doc .body{
  flex:1 1 auto;
  min-width:0;
}
.doc .ttl{
  display:block;
  font-size:15.5px;
  font-weight:600;
  line-height:1.55;
  color:var(--ink);
}
.doc .note{
  display:block;
  margin-top:var(--sp-8);
  font-size:13px;
  line-height:1.75;
  color:var(--slate);
}
.doc .metaline{
  display:flex;
  align-items:center;
  gap:var(--sp-8);
  margin-top:var(--sp-12);
  flex-wrap:wrap;
}
.doc .go{
  flex:0 0 auto;
  margin-top:var(--sp-12);
  font-size:15px;
  color:var(--stone);
}
@media (hover: hover){
  a.doc:hover{ background:var(--surface); color:inherit; }
  a.doc:hover .ttl{ color:var(--brand-green-dark); }
}

/* --- 入れ子の関連文書 ---------------------------------------------------- */
.subdocs{
  display:flex;
  flex-direction:column;
  gap:var(--sp-8);
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed var(--hairline);
}
.subdoc{
  display:flex;
  align-items:center;
  gap:var(--sp-12);
  font-size:13.5px;
  line-height:1.6;
  color:var(--charcoal);
}
.subdoc .dot{
  flex:0 0 auto;
  width:5px;
  height:5px;
  background:var(--brand-green-mid);
  border-radius:var(--r-full);
}
/* 種別の小ラベル（PDF など） */
.pill{
  flex:0 0 auto;
  padding:2px 6px;
  background:var(--brand-green-soft);
  color:var(--brand-green-dark);
  font-family:var(--mono);
  font-size:10px;
  font-weight:600;
  border-radius:var(--r-xs);
}

/* ==========================================================================
   5.5 署名（挨拶文の差出人）
   ========================================================================== */
.signature{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:var(--sp-4);
  max-width:var(--prose-width);
  margin-top:var(--sp-40);
  padding-top:var(--sp-24);
  border-top:1px solid var(--hairline);
  text-align:right;
}
.signature .org{
  font-size:14px;
  line-height:1.6;
  color:var(--slate);
}
.signature .who{
  display:flex;
  align-items:baseline;
  gap:var(--sp-12);
}
.signature .role{
  font-size:14px;
  color:var(--slate);
}
.signature .name{
  font-size:18px;
  font-weight:600;
  color:var(--ink);
}

@media (max-width:560px){
  .signature{ align-items:flex-start; text-align:left; }
}

/* ==========================================================================
   6. 番号付きリスト（事業内容など）
   ========================================================================== */
.numbered-list{
  display:flex;
  flex-direction:column;
  gap:var(--sp-12);
}
.numbered-list li{
  display:flex;
  align-items:flex-start;
  gap:var(--sp-16);
  padding:16px 18px;
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--r-md);
}
.numbered-list .n{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  width:26px;
  height:26px;
  margin-top:1px;
  background:var(--surface-feature);
  color:var(--brand-green-dark);
  font-family:var(--mono);
  font-size:13px;
  font-weight:600;
  border-radius:var(--r-full);
}
.numbered-list .txt{
  font-size:15px;
  line-height:1.7;
  color:var(--charcoal);
}

/* ==========================================================================
   7. 手順ステップ
   ========================================================================== */
.flow{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}
.flow .step{
  display:flex;
  flex-direction:column;
  gap:var(--sp-8);
  padding:22px;
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
}
.flow .step .n{
  font-family:var(--mono);
  font-size:12px;
  font-weight:600;
  color:var(--brand-green-mid);
}
.flow .step h3{ font-size:17px; line-height:1.4; }
.flow .step p{ font-size:13.5px; line-height:1.75; color:var(--slate); }

/* ==========================================================================
   8. 強調バンド
   ========================================================================== */
.feature-band{
  display:flex;
  align-items:center;
  gap:30px;
  padding:28px 32px;
  background:var(--surface-feature);
  border:1px solid var(--brand-green-soft);
  border-radius:var(--r-lg);
}
.feature-band .mini{
  display:flex;
  flex:0 0 auto;
  flex-direction:column;
  align-items:center;
  gap:var(--sp-8);
}
.feature-band .mini img{
  width:88px;
  height:auto;
}
.feature-band .mini .num{
  font-family:var(--mono);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.03em;
  color:var(--ink);
}
.feature-band .copy h3,
.feature-band .copy h4{
  margin-bottom:var(--sp-8);
  font-size:18px;
}
.feature-band .copy p{
  font-size:14px;
  line-height:1.75;
  color:var(--slate);
}

/* --- 問い合わせ誘導 ------------------------------------------------------ */
.cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  flex-wrap:wrap;
  padding:30px 34px;
  background:var(--surface-feature);
  border:1px solid var(--brand-green-soft);
  border-radius:var(--r-lg);
}
.cta h2,
.cta h3{ font-size:20px; }
.cta p{
  max-width:620px;
  margin-top:var(--sp-8);
  font-size:14px;
  line-height:1.75;
  color:var(--slate);
}

/* ==========================================================================
   8.5 資料アーカイブ（同種の資料を大量に並べ、年度で絞り込む）
   --------------------------------------------------------------------------
   活動報告のように、同じ形の資料が100件超あるページのための一式。
   必ず1列の縦リストにする。横に並べると視線が行ったり来たりして読みにくい。
   分類ごとに「初期は最新5件」＋「その分類の年度で絞り込む」。

   マークアップは <ul><li><a class="doc-row"> の入れ子にすること。
   CSS が届かなくても li が縦に積まれ、一覧として成立する。
   （a のままだと CSS 未適用時にインライン要素として横に流れてしまう）

   HTML には常に全件を書く。JS は表示・非表示を切り替えるだけで、
   行を生成しない。JS が動かなくても全件がそのまま読める状態を保つこと。
   ========================================================================== */

/* --- 余白 ----------------------------------------------------------------
   節の中の縦の間隔は「見出し⇄リード文」（--sp-12）に統一し、
   見出しから操作列までを一つの塊として読ませる。
   .sec-head の既定（40px）は他ページ用なので、ここでだけ上書きする。
   節と節の間だけは広げ、分類の切れ目が分かるようにする              */
.doc-group .sec-head{ margin-bottom:var(--sp-12); }
.doc-group + .doc-group{ margin-top:var(--sp-72); }

/* --- 1行 ----------------------------------------------------------------- */
/* 罫線は li 側に置く。末尾の罫線は枠線と重なるため消すが、絞り込みで行が
   隠れると :last-child が実際の末尾とずれるので、JS が .is-last を付け直す。
   直下の li だけを対象にする（行の中に入れ子のリストが来ることがある） */
.doc-list > li{ border-bottom:1px solid var(--hairline-soft); }
.doc-list > li:last-child,
.doc-list > li.is-last{ border-bottom:none; }

.doc-row{
  display:flex;
  align-items:center;
  gap:var(--sp-16);
  min-height:44px;                 /* タッチ操作の最小寸法 */
  padding:12px 20px;
  font-size:15px;
  line-height:1.6;
  color:var(--charcoal);
  transition:background var(--dur) var(--ease);
}
.doc-row .ttl{ flex:1 1 auto; min-width:0; }
.doc-row .go{ flex:0 0 auto; font-size:15px; color:var(--stone); }
@media (hover: hover){
  a.doc-row:hover{ background:var(--surface); color:var(--brand-green-dark); }
}

/* --- 更新履歴の1行 --------------------------------------------------------
   日付ひとつに対して更新項目が複数ぶら下がる。日付を左の固定列に置き、
   項目は入れ子のリストにする（1件だけでもリストのままにして形を揃える） */
.history-row{
  display:flex;
  gap:22px;
  padding:18px 24px;
}
.history-row .date{
  flex:0 0 auto;
  width:96px;
  padding-top:2px;
  font-family:var(--mono);
  font-size:13px;
  color:var(--steel);
}
.history-items{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  gap:var(--sp-8);
  min-width:0;
  font-size:14.5px;
  line-height:1.7;
  color:var(--charcoal);
}
.history-items li{ display:flex; gap:var(--sp-8); }
.history-items li::before{
  content:"";
  flex:0 0 auto;
  width:5px;
  height:5px;
  margin-top:.75em;
  background:var(--brand-green-mid);
  border-radius:var(--r-full);
}

/* --- 一覧の下の操作列（JS が組み立てる） ---------------------------------
   「全て表示」と年度の絞り込みを横一列に並べる。どちらも同じ形にして、
   ボタンが並んでいるように見せる。年度の絞り込みは
   data-filter="year" を持つ分類にだけ出る（毎年1件の分類には不要）  */
.doc-controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--sp-16);                /* ボタン同士は少し離す */
  margin-top:var(--sp-12);
}

/* --- ボタンの形をしたセレクト ---------------------------------------------
   ブラウザ既定の見た目はサイトから浮くため appearance を切り、.btn を被せる。
   矢印は擬似要素の文字。画像にすると配色差し替えに追従しない            */
.select-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
}
.select-btn::after{
  content:"▾";
  position:absolute;
  right:18px;
  font-size:11px;
  line-height:1;
  color:var(--slate);
  pointer-events:none;             /* 矢印の上でもセレクトを開けるように */
}
select.btn{
  appearance:none;
  -webkit-appearance:none;
  padding-right:40px;              /* 右は矢印のぶん空ける */
  background:var(--canvas);
  line-height:1.3;
  /* .btn は background と color しか遷移させないため、枠線ぶんを足す */
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
@media (hover: hover){
  select.btn:hover{ border-color:var(--brand-green-mid); }
}
select.btn:focus{
  border-color:var(--brand-green-mid);
  outline:none;                    /* 枠線の変化で示すため既定の輪郭は消す */
}
select.btn:focus-visible{
  outline:2px solid var(--brand-green-dark);
  outline-offset:2px;
}

/* ==========================================================================
   8.6 評価結果カード
   --------------------------------------------------------------------------
   1件＝1サービス。名称を見出しに、残りの項目を定義リスト（dl）で並べる。
   項目名と値の対応が本質なので、見た目の表ではなく dl でマークアップする。
   広い画面では項目名を左の固定列に、768px 以下では縦積みにする。
   ========================================================================== */
.result-card{
  padding:26px 28px;
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
}
.result-card + .result-card{ margin-top:var(--sp-16); }
.result-card h3{
  padding-bottom:var(--sp-16);
  border-bottom:1px solid var(--hairline);
  font-size:18px;
  line-height:1.5;
}
.result-fields{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:var(--sp-12) var(--sp-24);
  margin-top:var(--sp-16);
  font-size:14px;
  line-height:1.75;
}
.result-fields dt{
  font-weight:600;
  color:var(--slate);
}
.result-fields dd{ color:var(--charcoal); }
/* 評価番号は機械的に採番された値。太さで他の項目と区別する */
.result-fields .num{
  font-weight:600;
  letter-spacing:.02em;
  color:var(--ink);
}

/* --- 掲載がまだ無いとき -------------------------------------------------- */
.empty-state{
  padding:32px 28px;
  background:var(--surface);
  border:1px dashed var(--hairline-strong);
  border-radius:var(--r-lg);
  font-size:15px;
  line-height:1.8;
  color:var(--slate);
  text-align:center;
}

/* ==========================================================================
   8.7 データ表
   --------------------------------------------------------------------------
   レイアウト目的では使わない。役員一覧のような「本物の表」にだけ使う。
   角丸を効かせるため border-collapse は separate にする
   （collapse では border-radius と overflow:hidden が効かない）。
   ========================================================================== */
.data-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
  font-size:14.5px;
  line-height:1.7;
}
.data-table th,
.data-table td{
  padding:12px 18px;
  text-align:left;
  vertical-align:middle;
  border-bottom:1px solid var(--hairline-soft);
}
.data-table thead th{
  background:var(--surface);
  font-size:13px;
  font-weight:600;
  color:var(--slate);
  white-space:nowrap;
}
/* 行見出し（役職など）。縦罫で値と分ける */
.data-table tbody th{
  width:7em;
  border-right:1px solid var(--hairline-soft);
  font-weight:600;
  color:var(--slate);
  white-space:nowrap;
}
.data-table tbody td{ color:var(--charcoal); }
.data-table tr:last-child th,
.data-table tr:last-child td{ border-bottom:none; }

/* ==========================================================================
   8.8 組織図
   --------------------------------------------------------------------------
   入れ子の <ul> で階層を記述し、CSS の罫線で図に見せる。
   絶対配置で描かない。画面幅や文字サイズが変わっても崩れず、
   読み上げでも階層がそのまま伝わることを最優先する。
   ========================================================================== */
/* 最上位（社員総会）には親が無いので罫線を引かない。
   2階層目以降にだけ縦線と横線を描く */
.org-chart ul ul{
  margin-left:22px;
}
.org-chart ul ul > li{
  position:relative;
  padding-top:var(--sp-12);
  padding-left:28px;
}
/* 親から下りてくる縦線。最後の子は分岐点で止める */
.org-chart ul ul > li::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:1px;
  background:var(--hairline-strong);
}
.org-chart ul ul > li:last-child::before{
  bottom:auto;
  height:32px;
}
/* 分岐点から箱へ渡る横線。32px は箱の1行目の中心にあたる */
.org-chart ul ul > li::after{
  content:"";
  position:absolute;
  left:0;
  top:32px;
  width:28px;
  height:1px;
  background:var(--hairline-strong);
}

.org-node{
  display:inline-flex;
  flex-direction:column;
  gap:var(--sp-4);
  padding:10px 16px;
  background:var(--canvas);
  border:1px solid var(--hairline-strong);
  border-radius:var(--r-md);
}
.org-node .name{
  font-size:15px;
  font-weight:600;
  line-height:1.4;
  color:var(--ink);
}
.org-node .role{
  font-size:12.5px;
  line-height:1.6;
  color:var(--slate);
}
/* 議決機関（社員総会・理事会）を強調する */
.org-node.is-primary{
  background:var(--surface-feature);
  border-color:var(--brand-green-soft);
}

/* 上下ではなく横に結ぶ関係（社員総会 ⇔ 社員） */
.org-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
}
.org-tie{
  width:28px;
  height:1px;
  background:var(--hairline-strong);
}

/* ==========================================================================
   9. 注記リスト
   ========================================================================== */
/* 直前の内容への補足として置く。単独では使わないため上マージンを持たせる */
.notes{
  display:flex;
  flex-direction:column;
  gap:var(--sp-8);
  margin-top:var(--sp-24);
  font-size:13px;
  line-height:1.75;
  color:var(--slate);
}
.notes li{ display:flex; gap:var(--sp-8); }
.notes li::before{
  content:"";
  flex:0 0 auto;
  width:5px;
  height:5px;
  margin-top:.7em;
  background:var(--brand-green-mid);
  border-radius:var(--r-full);
}

/* ==========================================================================
   10. 図版
   --------------------------------------------------------------------------
   既製の図（原寸のビットマップ）を本文中に置く器。
   図の中の文字は縮小すると読めなくなるため、狭い画面では縮めずに
   横スクロールさせる（下のレスポンシブ指定）。拡大表示への導線を
   figcaption に置くこと。
   ========================================================================== */
.figure{
  margin-top:var(--sp-32);
  padding:var(--sp-16);
  background:var(--canvas);
  border:1px solid var(--hairline);
  border-radius:var(--r-lg);
}
/* 横スクロールの器。キーボードでも送れるよう tabindex="0" を付ける */
.figure .frame{ overflow-x:auto; }
.figure .frame:focus-visible{
  outline:2px solid var(--brand-green-mid);
  outline-offset:2px;
}
.figure img{
  display:block;
  width:100%;
  max-width:794px;
  height:auto;
  margin-inline:auto;
  border-radius:var(--r-sm);
}
/* 横スクロールの案内。図が縮んで収まる広い画面では出さない */
.figure .hint{ display:none; }
.figure figcaption{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:var(--sp-8) var(--sp-16);
  margin-top:var(--sp-12);
  font-size:13px;
  line-height:1.75;
  color:var(--slate);
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width:1024px){
  .flow{ grid-template-columns:repeat(2, 1fr); }
}

/* 図を器の幅に合わせると図中の文字が読めなくなる。原寸のまま横スクロールする */
@media (max-width:768px){
  .figure img{ width:794px; max-width:none; }
  .figure .hint{ display:inline; }
}

/* 項目名を左に置く幅が無くなるため、項目名と値を縦に積む */
@media (max-width:768px){
  .result-fields{
    grid-template-columns:1fr;
    gap:var(--sp-4);
  }
  .result-fields dt{ margin-top:var(--sp-12); }
  .result-fields dt:first-of-type{ margin-top:0; }
}

@media (max-width:560px){
  .sec-head{ margin-bottom:var(--sp-32); }
  .sec-head.split{ flex-direction:column; align-items:flex-start; }
  .flow{ grid-template-columns:1fr; }

  /* 操作列は縦積みにし、それぞれ幅いっぱいに広げる */
  .doc-controls{ flex-direction:column; align-items:stretch; }
  .doc-controls .btn{ justify-content:center; }
  .doc-controls .select-btn{ width:100%; }
  .doc-controls select.btn{ width:100%; }

  .doc-row{ padding:12px 16px; font-size:14px; }

  /* 横線を引く幅が無くなるため、横並びをやめて縦に積む。
     関係は各ノードの説明文で読み取れるようにしてある */
  .org-row{ flex-direction:column; align-items:flex-start; gap:var(--sp-8); }
  .org-tie{ display:none; }
  .org-chart ul ul{ margin-left:10px; }
  .org-chart ul ul > li{ padding-left:18px; }
  .org-chart ul ul > li::after{ width:18px; }
  .org-node{ padding:10px 14px; }

  .data-table th,
  .data-table td{ padding:10px 12px; }
  .data-table tbody th{ width:5.5em; }

  /* 日付を左に置く幅が無くなるため、日付を項目の上に重ねる */
  .history-row{
    flex-direction:column;
    gap:var(--sp-8);
    padding:16px 18px;
  }
  .history-row .date{ width:auto; padding-top:0; }
  .history-items{ font-size:14px; }

  .news-row{
    flex-wrap:wrap;
    gap:var(--sp-8) 14px;
    padding:16px 18px;
  }
  .news-row .txt{ flex-basis:100%; order:3; font-size:14px; }
  .news-row .chev{ display:none; }

  .column-card{ padding:20px 18px; }
  .column-card h3{ font-size:18px; }

  .doc{ padding:18px; }

  .feature-band{
    flex-direction:column;
    align-items:center;
    text-align:center;
  }
  .cta{ flex-direction:column; align-items:flex-start; }
}