/* =========================================
   about.css v1 2026-07-16
   /about/index.html（しくみ）用。
   見た目は feature-block（ufs_feature.jsp の style）に寄せる。
   スコープ: .ww-about （feature-block と併存しても衝突しない）
   TOCオフセット計算のJSと目次アンカーは JSP 側。
   ========================================= */

:root{
  --ww-accent:#F28C00; --ww-accent-ink:#7a3f00;
  --ww-text:#1f2937; --ww-muted:#6b7280;
  --ww-bg:#fff; --ww-bg-alt:#fafafa;
  --ww-border:#e5e7eb;
  --ww-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.05);
  --ww-radius:14px; --ww-gap:24px; --ww-max:1170px;
}

/* ---- 骨格（feature と同値） ---- */
.ww-about .container{max-width:var(--ww-max);margin:0 auto}
.ww-about .section{padding:28px 0}
.ww-about .section.bg-alt{background:var(--ww-bg-alt)}

/* ---- ヒーロー（小ラベル＋h1＋リード） ---- */
.ww-about .eyebrow{font-size:14px;font-weight:700;letter-spacing:.08em;color:#000;margin:0 0 10px}
.ww-about .page-title{color:#000;line-height:1.25;margin:.2rem 0 1rem}
@media (min-width:980px){ .ww-about .page-title{font-size:30px} }
@media (max-width:979.98px){ .ww-about .page-title{font-size:clamp(22px,4.2vw,28px)} }
.ww-about .lead{font-size:15px;color:#555;font-weight:normal;line-height:1.9;margin-bottom:0}
@media (max-width:640px){ .ww-about .lead{font-size:1rem} }

/* ---- 見出し ---- */
/* h2: feature の .pz-headline-l0 h2 と同形（アクセント下線） */
.ww-about h2{
  font-weight:500;font-size:clamp(1.25rem,2.1vw,1.6rem);line-height:1.3;
  margin:0 0 18px;padding-bottom:15px;border-bottom:2px solid var(--ww-accent);
}
/* h3: feature の .ww-fck-body h3 と同形（左ボーダー） */
.ww-about h3{
  font-size:15px;font-weight:600;color:#111;line-height:1.5;
  margin:1.6em 0 .5em;padding-left:12px;border-left:3px solid var(--ww-accent);
}
.ww-about h3:first-child{margin-top:0}

/* ---- 本文 ---- */
.ww-about p{font-size:14px;line-height:1.9;color:#555;margin:0 0 1em}
.ww-about p:last-child{margin-bottom:0}
.ww-about p strong,.ww-about b,.ww-about strong{color:#000;font-weight:500}

/* ---- 表 ----
   renderMarkdown 経由（.table.table-bordered.table-striped 付与）と
   素の table の両方に効かせる */
.ww-about table{width:100%;border-collapse:collapse;margin:8px 0 24px;font-size:14px;line-height:1.7}
.ww-about table th,
.ww-about table td{border:1px solid var(--ww-border);padding:10px 12px;text-align:left;color:#555}
.ww-about table th{background:var(--ww-bg-alt);color:#111;font-weight:600;vertical-align:top}
.ww-about table tbody tr:nth-child(even) td{background:#fcfcfc}
@media (max-width:640px){
  .ww-about table{display:block;overflow-x:auto;white-space:nowrap}
}

/* ---- 図表（SVG/画像の置き場） ---- */
.ww-about .ww-figure{margin:8px 0 40px;text-align:center}
.ww-about .ww-figure img,
.ww-about .ww-figure svg{max-width:100%;height:auto}
.ww-about .ww-figure figcaption{font-size:12.5px;color:var(--ww-muted);margin-top:8px}
.ww-about .ww-svg-title,.ww-about .ww-svg-t{display:none}

/* ---- 結語 ---- */
.ww-about .ww-close{border-top:1px solid var(--ww-border);margin-top:32px;padding-top:24px}
.ww-about .ww-close p{color:#000}
.ww-about .ww-close a{color:#1f2937;text-decoration:underline dotted}
.ww-about .ww-close a:hover{color:var(--ww-accent)}

/* =========================================
   目次（TOC）バー — feature の .ww-toc-v2 をそのまま移植
   （クラス名共通のため feature 側と同一定義。二重読込時も無害）
   ========================================= */
.ww-toc-v2{position:sticky;top:var(--toc-top,72px);z-index:2;display:flex;flex-wrap:wrap;gap:10px 12px;padding:12px 6px;margin:14px 0;border-bottom:1px solid #eee;background:#fff}
.ww-toc-v2.is-stuck{padding:16px 6px}
.ww-toc-v2 a{display:inline-block;font-size:13.5px;font-weight:400;line-height:1.2;padding:8px 14px;border:1px solid #e9ecef;border-radius:9999px;color:#111;text-decoration:none;background:#fff;transition:.15s}
.ww-toc-v2 a:hover{background:#fff6ec;border-color:#f5c089}
.ww-toc-v2 a.is-active{background:#e67e22;border-color:#e67e22;color:#fff}
@media (min-width:1025px){
  .ww-toc-v2 a{margin-top:10px}
  .ww-toc-v2 a:nth-child(-n+5){margin-top:0}
}
@media (max-width:1024px){
  .ww-toc-v2{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-width:100%}
  .ww-toc-v2 a{white-space:nowrap;flex:0 0 auto}
  .ww-toc-v2::-webkit-scrollbar{height:6px}
  .ww-toc-v2::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:3px}
}
@media (max-width:640px){
  .ww-toc-v2{position:static;top:auto;overflow:visible;gap:8px 10px;padding:10px 4px}
  .ww-toc-v2 a{font-size:12.5px;padding:7px 12px}
  :root{--toc-offset:72px}
}

/* ---- アンカー位置（TOCで飛んだときのズレ防止・featureと同一） ---- */
html{scroll-behavior:smooth}
:root{--toc-offset:120px}
:where(h1[id],h2[id],h3[id],h4[id],[data-anchor]){scroll-margin-top:var(--toc-offset)}
:where(h1[id],h2[id],h3[id],h4[id],[data-anchor])::before{content:"";display:block;height:var(--toc-offset);margin-top:calc(var(--toc-offset)*-1)}


.ww-about p{font-size:16px;line-height:2.0}   /* 14px→16px、行間も1.9→2.0 */
.ww-about h3{font-size:17px}                   /* 15px→17px（本文より大きく保つ） */
.ww-about table{font-size:15px}                /* 14px→15px */

.ww-about .container{max-width:900px}


.ww-about p{font-size:15px;line-height:1.8;color:var(--ww-text)}
.ww-about table th,
.ww-about table td{color:var(--ww-text)}