/* =========================================================================
   no-smoking.jp B案 Stage R4 — ビジュアルデザイン強化
   コンセプト（制作指示・非掲載）：誠実×上質×現代的×デザイン性。
   「白い文書」ではなく、余白と色面の切り替えで構成された編集デザイン。
   ミュージアム・財団・研究機関・上質な年次報告書を参照（特定サイトの模倣ではない）。
   新規写真・イラスト・アイコン・文言は使用せず、CSSのみの抽象装飾（円・線・面）を使用。
   ========================================================================= */

:root {
  /* --- 5面構成のための配色。背景面の切り替えに使用し、色数は増やしすぎない --- */
  --base: #F7F5F1;        /* header-nav band などの控えめな面 */
  --paper: #FFFFFF;       /* 本文・ヘッダー上段 */
  --hero-bg: #F3EAD9;     /* ページタイトル領域（暖色系） */
  --band-bg: #EFEBE4;     /* Archives + LINK 領域（静かなウォームグレー） */
  --dark: #211D1A;        /* フッター背景（チャコール） */

  --brown: #5A3A1F;       /* ブランドアクセント（深いブラウン） */
  --brown-soft: rgba(90, 58, 31, 0.08);
  --brown-soft-2: rgba(90, 58, 31, 0.05);

  --ink: #262220;
  --ink-muted: #6D6259;
  --on-dark: #F2ECE3;
  --on-dark-muted: rgba(242, 236, 227, 0.68);

  --line: #E4DCCD;

  --measure: 780px;
  --header-max: 1160px;

  --sp-1: 8px;  --sp-2: 12px; --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px;

  --font-sans: -apple-system, "Yu Gothic Medium", "Yu Gothic", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, system-ui, sans-serif;
  --font-serif: "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "游明朝",
    "Noto Serif JP", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brown);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  background: var(--dark);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
  transition: top 0.15s ease;
  text-decoration: none;
}
.skip-link:focus { top: 8px; }

/* =========================================================================
   1. ヘッダー：ロゴ段（白）＋ナビ段（薄いオフホワイト）の二層構成
   ========================================================================= */
.site-header {
  background: var(--paper);
}

.header-top {
  max-width: var(--header-max);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
}

.brand { display: inline-flex; }
.brand img {
  width: 260px;
  height: auto;
}

.site-tagline {
  margin: var(--sp-3) 0 0;
  font-size: 0.85rem;
  color: var(--ink-muted);
  line-height: 1.7;
  max-width: 32em;
}

.header-nav-band {
  background: var(--base);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.header-nav-inner {
  max-width: var(--header-max);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

.primary-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.primary-nav li { display: flex; align-items: center; }
.primary-nav li + li { border-left: 1px solid var(--line); }
.primary-nav a,
.primary-nav .current {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 var(--sp-3);
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.primary-nav li:first-child a,
.primary-nav li:first-child .current { padding-left: 0; }
.primary-nav a:hover,
.primary-nav a:focus-visible {
  color: var(--brown);
  text-decoration: underline;
}
.primary-nav .current {
  color: var(--brown);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--brown);
}

/* --- ハンバーガー（details/summary：JS無しでも開閉可能） --- */
.nav-toggle { display: none; }

/* =========================================================================
   2. ページタイトル（ヒーロー）：暖色面＋CSSのみの抽象装飾（大きな円）
   ========================================================================= */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--hero-bg);
}

/* 装飾：右側からのぞく大きな円（意味を持たせない、テキストなし） */
.hero::before {
  content: "";
  position: absolute;
  right: -140px;
  top: 50%;
  transform: translateY(-50%);
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: var(--brown-soft);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute;
  right: 40px;
  bottom: -120px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 1px solid var(--brown-soft);
  background: transparent;
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--header-max);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-4) var(--sp-7);
}

.title-wrap {
  border-left: 4px solid var(--brown);
  padding-left: var(--sp-4);
  max-width: 30em;
}

.page-title {
  margin: 0;
  font-family: var(--font-serif);
  color: var(--ink);
  line-height: 1.45;
}
.page-title .main {
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.page-title .sub {
  display: block;
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--ink-muted);
  margin-top: var(--sp-1);
}

.intro {
  margin: var(--sp-4) 0 0 calc(var(--sp-4) + 4px);
  max-width: var(--measure);
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--ink-muted);
}

/* =========================================================================
   3. 本文（記事一覧）：白面。編集デザイン（カード化しない）
   ========================================================================= */
.articles-band {
  background: var(--paper);
}
.page-body {
  max-width: var(--header-max);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}
.entries {
  padding: var(--sp-7) 0;
  max-width: var(--measure);
}

.entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.entry-list li {
  position: relative;
  padding: 18px 0 18px 24px;
  text-indent: -24px;
  border-left: 3px solid transparent;
  font-size: 1rem;
  line-height: 1.75;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.entry-list li:hover {
  background: var(--brown-soft-2);
  border-left-color: var(--brown);
}
.entry-list li::after {
  content: "";
  display: block;
  width: 48px;
  height: 1px;
  background: var(--line);
  margin: 16px 0 0 24px;
  text-indent: 0;
}
.entry-list li:last-child::after {
  display: none;
}

.entry-list .bullet {
  display: inline-block;
  width: 18px;
  text-indent: 0;
  color: var(--brown);
  font-size: 0.55em;
  vertical-align: 0.2em;
}

.entry-list a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  background-image: linear-gradient(var(--brown), var(--brown));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
}
.entry-list a:hover,
.entry-list a:focus-visible { color: var(--brown); }
.entry-list strong { font-weight: 700; color: var(--ink); }

/* =========================================================================
   4. Archives + LINK：静かなウォームグレー面としてひとつにまとめる
   ========================================================================= */
.support-band {
  background: var(--band-bg);
  border-top: 1px solid var(--line);
}

.archives {
  max-width: var(--header-max);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
}
.archives h2 {
  margin: 0 0 var(--sp-3);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  font-weight: 700;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.archives-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}
.archives-category {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink);
  padding-right: var(--sp-3);
  border-right: 1px solid var(--line);
}
.archives-body a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.archives-body a:hover,
.archives-body a:focus-visible {
  color: var(--brown);
  border-bottom-color: var(--brown);
}

.link-zone {
  max-width: var(--header-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
  border-top: 1px solid var(--line);
  text-align: center;
}
.link-zone h2 {
  margin: 0 0 var(--sp-5);
  line-height: 0;
}
.link-grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: calc(218px * 3 + 32px * 2);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 32px;
}
.link-grid li { display: flex; }
.link-grid a {
  display: inline-flex;
  line-height: 0;
  /* バナー自体には shadow / border-radius / filter / opacity変更を適用しない。 */
}
.link-grid img { width: 218px; height: 60px; }

/* =========================================================================
   5. フッター：深いブラウン/チャコール面
   ========================================================================= */
.site-footer {
  background: var(--dark);
  border-top: 4px solid var(--brown);
  padding: var(--sp-5) var(--sp-4);
}
.footer-inner {
  max-width: var(--header-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2);
}
.footer-policy { margin: 0; font-size: 0.85rem; }
.footer-policy a {
  color: var(--on-dark);
  text-decoration: underline;
}
.footer-policy a:hover,
.footer-policy a:focus-visible { color: #fff; }
.footer-copy {
  margin: 0;
  font-size: 0.72rem;
  color: var(--on-dark-muted);
}

/* =========================================================================
   レスポンシブ（〜700px：スマホ）
   ========================================================================= */
@media (max-width: 700px) {
  .site-header {
    position: relative;
    border-top: 3px solid var(--brown);
    background: var(--base);
  }
  .header-top {
    position: relative;
    padding: var(--sp-3) 60px var(--sp-2) var(--sp-3);
  }
  .logo-row { align-items: center; min-height: 56px; }
  .brand img { width: 180px; }
  .site-tagline { font-size: 0.8rem; padding-bottom: 0; }

  .header-nav-band { border-bottom: 1px solid var(--line); }

  .nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    position: absolute;
    top: 22px;
    right: var(--sp-3);
    cursor: pointer;
    list-style: none;
  }
  .nav-toggle::-webkit-details-marker { display: none; }
  .nav-toggle-bar,
  .nav-toggle-bar::before,
  .nav-toggle-bar::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 1.5px;
    background: var(--ink);
    transition: transform 0.15s ease, opacity 0.15s ease, top 0.15s ease;
  }
  .nav-toggle-bar { position: relative; }
  .nav-toggle-bar::before { top: -7px; left: 0; }
  .nav-toggle-bar::after { top: 7px; left: 0; }
  details[open] > .nav-toggle .nav-toggle-bar { background: transparent; }
  details[open] > .nav-toggle .nav-toggle-bar::before { top: 0; transform: rotate(45deg); }
  details[open] > .nav-toggle .nav-toggle-bar::after { top: 0; transform: rotate(-45deg); }

  .header-nav-inner { padding: 0 var(--sp-3); }
  .primary-nav ul {
    flex-direction: column;
    padding: var(--sp-1) 0;
  }
  .primary-nav li { width: 100%; }
  .primary-nav li + li { border-left: none; border-top: 1px solid var(--line); }
  .primary-nav a,
  .primary-nav .current { width: 100%; padding: var(--sp-2) 0; min-height: 48px; }
  .primary-nav li:first-child a { padding-left: 0; }
  .primary-nav .current {
    box-shadow: none;
    border-left: 3px solid var(--brown);
    padding-left: var(--sp-2);
  }

  .hero::before {
    width: 240px; height: 240px;
    right: -100px; top: -40px; transform: none;
  }
  .hero::after {
    width: 140px; height: 140px;
    right: -30px; bottom: -60px;
  }
  .hero-inner { padding: var(--sp-6) var(--sp-3) var(--sp-5); }
  .title-wrap { padding-left: var(--sp-3); max-width: 100%; }
  .page-title .main { font-size: 1.9rem; }
  .page-title .sub { font-size: 1rem; }
  .intro { font-size: 1rem; margin-left: calc(var(--sp-3) + 4px); }

  .page-body { padding: 0 var(--sp-3); }
  .entries { padding: var(--sp-5) 0; }
  .entry-list li { padding: 14px 0 14px 20px; text-indent: -20px; }
  .entry-list li::after { margin-left: 20px; }

  .archives { padding: var(--sp-5) var(--sp-3); }
  .archives-body { flex-direction: column; align-items: flex-start; }
  .archives-category { border-right: none; padding-right: 0; }

  .link-zone { padding: var(--sp-4) var(--sp-3) var(--sp-6); }
  .link-grid { max-width: 100%; flex-direction: column; align-items: center; gap: var(--sp-3); }

  .footer-inner { flex-direction: column; align-items: center; text-align: center; }
}

/* デスクトップ：details の開閉状態に関わらずナビを常時表示し、summaryは非表示 */
@media (min-width: 701px) {
  .nav-details > summary { display: none; }
  .nav-details > .primary-nav { display: block !important; }
}

/* =========================================================================
   全ページ展開（final）で追加した共通コンポーネント
   R4のトークン（色・余白・書体・罫線）をそのまま使用し、ページ種別ごとに
   必要な構造だけを追加する（Gate C: 統一したデザインシステムの一部）。
   ========================================================================= */

/* --- 日付＋説明の二列リスト（トップページの新着情報／更新履歴など） --- */
.dated-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dated-list li {
  display: flex;
  gap: var(--sp-4);
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  line-height: 1.75;
}
.dated-list .date {
  flex: 0 0 auto;
  width: 6.5em;
  color: var(--ink-muted);
  font-size: 0.9rem;
  white-space: nowrap;
  padding-top: 0.1em;
}
.dated-list .desc { flex: 1 1 auto; }
.dated-list .desc a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--brown), var(--brown));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
}
.dated-list .desc a:hover,
.dated-list .desc a:focus-visible { color: var(--brown); }
.dated-list .desc strong { font-weight: 700; color: var(--ink); }
.dated-list .accent-text {
  font-weight: 700;
  color: var(--brown);
}

/* --- ページ本文中の見出し（新着情報／更新履歴など、記事一覧より小さい） --- */
.content-subhead {
  margin: var(--sp-6) 0 var(--sp-3);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ink);
}
.entries > .content-subhead:first-child { margin-top: 0; }

/* --- 導入文中の署名行（右寄せ、既存レイアウトの意図を維持） --- */
.intro .signature-line {
  display: block;
  text-align: right;
  margin-top: var(--sp-3);
}

/* --- トップページ固有の動画ブロック（レガシーなWMP embed。ロジック・値は無変更） --- */
.video-block {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}
.video-block object { max-width: 100%; }
.video-block .video-detail {
  margin-top: var(--sp-2);
  text-align: center;
}

@media (max-width: 700px) {
  .dated-list li { gap: var(--sp-2); }
  .dated-list .date { width: 5.2em; font-size: 0.82rem; }
}

/* =========================================================================
   Phase 3：通常静的ページ（company / policy / info通常記事）用の本文スタイル
   原本の #main 内容を可能な限りそのまま流用し、非推奨マークアップのみ
   クラス化している。R4トークン（色・余白・書体・罫線）を踏襲。
   ========================================================================= */
.article-body {
  max-width: var(--measure);
  padding: var(--sp-7) 0;
  font-size: 1rem;
  line-height: 1.9;
  color: var(--ink);
}
.article-body strong { font-weight: 700; color: var(--ink); }
.article-body a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--brown), var(--brown));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 2px;
}
.article-body a:hover,
.article-body a:focus-visible { color: var(--brown); }

/* 原本は <img><img><br /> のインライン並びを想定しているため、R4基底の
   img{display:block} をこの領域だけ上書きしてインラインフローへ戻す。 */
.article-body img {
  display: inline-block;
  vertical-align: top;
  max-width: 100%;
  height: auto;
  margin: 0 var(--sp-2) var(--sp-3) 0;
}
.article-body img.fl-left {
  float: left;
  margin: var(--sp-1) var(--sp-4) var(--sp-2) 0;
  max-width: 50%;
}
.article-body img.fl-right {
  float: right;
  margin: var(--sp-1) 0 var(--sp-2) var(--sp-4);
  max-width: 50%;
}
.article-body .ta-right { text-align: right; }
.article-body .ta-center { text-align: center; }
.article-body .ta-left { text-align: left; }

.article-body blockquote {
  margin: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--brown);
  background: var(--brown-soft-2);
}

/* データ表：R4トークンで整える。セル内容・順序・結合は無変更。 */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--sp-4) 0;
}
.data-table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.95rem;
  line-height: 1.7;
}
.data-table td,
.data-table th {
  border: 1px solid var(--line);
  padding: var(--sp-2) var(--sp-3);
  vertical-align: top;
  text-align: left;
}
.data-table th { background: var(--band-bg); font-weight: 700; }
.data-table td[nowrap] { white-space: nowrap; }

/* supplemental（旧menu2）のサブナビ */
.archives-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
}
.archives-links li { display: flex; align-items: center; }
.archives-links a,
.archives-links .current {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.archives-links a:hover,
.archives-links a:focus-visible {
  color: var(--brown);
  border-bottom-color: var(--brown);
}
.archives-links .current {
  color: var(--brown);
  font-weight: 700;
}

@media (max-width: 700px) {
  .article-body { padding: var(--sp-5) 0; }
  .article-body img.fl-left,
  .article-body img.fl-right { float: none; max-width: 100%; margin: var(--sp-3) 0; }
  .archives-links { flex-direction: column; gap: 0; }
  .archives-links a,
  .archives-links .current { width: 100%; }
}

/* =========================================================================
   Phase 4：info特殊ページ（iframe親／WMP object／埋め込み内部）用
   R4トークンのみ使用。iframe src / object内容 / JS / リンクは無変更。
   ========================================================================= */

/* --- iframe親ページ内の iframe ラッパー（原本 width/height/style は要素側で維持） --- */
.iframe-wrap {
  margin: var(--sp-4) 0;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.iframe-wrap iframe {
  max-width: 100%;
  display: block;
}

/* --- レガシー動画（WMP object）ラッパー。object の classid/param/属性は無変更 --- */
.legacy-media {
  margin: var(--sp-4) 0;
  max-width: 100%;
  overflow-x: auto;
}
.legacy-media object { max-width: 100%; }

/* =========================================================================
   埋め込み専用内部ページ（iframe の中で表示。親のヘッダー/ナビ/LINK/フッターは付けない）
   ========================================================================= */
.embedded-content {
  font-family: var(--font-sans);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.7;
  padding: var(--sp-3);
}
.embedded-content strong { font-weight: 700; color: var(--ink); }
.embedded-content a {
  color: var(--brown);
  text-decoration: underline;
}
.embedded-content img { max-width: 100%; height: auto; }
.embedded-content table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}
.embedded-content td { vertical-align: top; padding: var(--sp-1); }
.embedded-content input[type="submit"] {
  font: inherit;
  color: var(--ink);
  background: var(--band-bg);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
}
.embedded-content input[type="submit"]:hover { border-color: var(--brown); color: var(--brown); }

@media (max-width: 520px) {
  .embedded-content table,
  .embedded-content tbody,
  .embedded-content tr,
  .embedded-content td { display: block; width: 100% !important; height: auto !important; }
  .embedded-content td { text-align: left !important; }
  .embedded-content td img { margin: var(--sp-2) auto; }
}

/* =========================================================================
   Phase 4B: legacy PHP quiz pages (info/200812/2/*.php)
   Shown inside the iframe of info/200812/index2.html — embedded-content only,
   no site chrome. The PHP/markup is unchanged; this only restyles it.
   ========================================================================= */
.legacy-quiz { max-width: 520px; margin: 0 auto; }
.legacy-quiz [align="center"] { text-align: center; }
.legacy-quiz [align="right"] { text-align: right; }
.legacy-quiz br { line-height: 1.7; }
.legacy-quiz table { margin: var(--sp-3) 0; }
.legacy-quiz td { padding: var(--sp-2); }
.legacy-quiz td img { max-width: 100%; height: auto; }
.legacy-quiz input[type="submit"] {
  font: inherit;
  min-height: 44px;
  margin: 4px 0;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  white-space: normal;
  line-height: 1.35;
}
.legacy-quiz input[type="submit"]:hover { border-color: var(--brown); color: var(--brown); }
.legacy-quiz a img { border: 0; }
.legacy-quiz .result {
  color: #cc0000;
  font-weight: 700;
  line-height: 1.1;
  margin: var(--sp-3) 0;
}

@media (max-width: 520px) {
  .legacy-quiz table,
  .legacy-quiz tbody,
  .legacy-quiz tr,
  .legacy-quiz td { display: block; width: 100% !important; height: auto !important; }
  .legacy-quiz td { text-align: left !important; }
  .legacy-quiz td img { margin: var(--sp-2) 0; }
  .legacy-quiz input[type="submit"] { width: 100% !important; }
}
/* (.legacy-media — the WMP <object> wrapper used by info/200905 & info/201011 —
   is already defined above; no redefinition needed here.) */

/* =========================================================================
   Phase 5: legacy form pages (contact / entry / shibu — 12 PHP files)
   The <div id="main"> form markup (table layout, bgcolor/nowrap/align
   attributes, every PHP-embedded value="<? ... ?>" / style="<? ... ?>",
   hidden inputs, submit/reset buttons, select/option, textarea) is untouched
   verbatim HTML — this block restyles it with attribute/tag selectors only,
   never by adding a class into PHP-generated output.
   ========================================================================= */
.form-wrap {
  max-width: 820px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}
.form-wrap table {
  width: 100% !important;
  border-collapse: collapse;
  margin: 0;
  font-size: 0.95rem;
}
.form-wrap th[bgcolor] {
  background: var(--band-bg) !important;
  color: var(--ink);
  font-weight: 700;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.form-wrap td[bgcolor] {
  background: var(--hero-bg) !important;
  color: var(--brown);
  font-weight: 600;
  white-space: normal;
  width: 30%;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.form-wrap td:not([bgcolor]) {
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  line-height: 1.7;
}
.form-wrap th:last-child,
.form-wrap tr:last-child td { border-bottom: none; }
.form-wrap .dred { color: #b3221f; font-weight: 600; line-height: 1.7; }
.form-wrap .blue {
  color: var(--brown);
  font-weight: 600;
  line-height: 1.8;
  white-space: pre-wrap;
  word-break: break-word;
}
.form-wrap input[type="text"],
.form-wrap textarea,
.form-wrap select {
  font: inherit;
  font-size: 1rem;
  max-width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--base);
  color: var(--ink);
}
.form-wrap textarea { width: 100%; resize: vertical; line-height: 1.6; }
.form-wrap input[type="submit"],
.form-wrap input[type="reset"] {
  font: inherit;
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  margin: 6px 6px 0 0;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--brown);
  border-radius: 4px;
  cursor: pointer;
}
.form-wrap input[type="submit"]:hover,
.form-wrap input[type="reset"]:hover { background: var(--band-bg); }

@media (max-width: 640px) {
  .form-wrap table,
  .form-wrap tbody,
  .form-wrap tr,
  .form-wrap th,
  .form-wrap td { display: block; width: 100% !important; }
  .form-wrap th[colspan] { text-align: center; }
  .form-wrap td[bgcolor] { border-bottom: none; padding: 12px 16px 4px; }
  .form-wrap td:not([bgcolor]) { padding: 0 16px 14px; border-bottom: 1px solid var(--line); }
  .form-wrap input[type="text"],
  .form-wrap textarea,
  .form-wrap select { width: 100%; }
  .form-wrap input[type="submit"],
  .form-wrap input[type="reset"] { width: 100%; margin: 6px 0 0; }
}

/* =========================================================================
   Phase 6F: list（公開リスト）ページの既存セマンティッククラス。
   base.css は最終ページからリンクを外しているため、原本が使っていた
   .caution / .dred のスタイルをR4トーンで再定義するのみ（HTML側は無変更）。
   .form-wrap 配下（.dred）は既に定義済みだが、.caution は index2/index3 等
   フォームを含まないページの地の文にも登場するためスコープなしで定義する。
   ========================================================================= */
.caution { color: #b3221f; font-weight: 600; }
.article-body .dred { color: #b3221f; font-weight: 600; }
/* =========================================================================
   Phase 10A: 理事長挨拶（company/index7.html）プロフィールブロック。
   新規デザインシステムは作らず、既存R4トークンのみで最小追加。
   デスクトップ：写真 左 / 挨拶文 右。モバイル（700px以下、既存ブレークポイント
   踏襲）：写真→役職氏名→キャッチ→本文の縦並び。
   ========================================================================= */
.chairman-profile {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  margin-top: var(--sp-2);
}
.chairman-photo {
  flex: 0 0 300px;
  margin: 0;
}
.chairman-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
}
.chairman-message { flex: 1 1 auto; min-width: 0; }
.chairman-role {
  margin: 0 0 var(--sp-2);
  font-weight: 700;
  color: var(--ink);
}
.chairman-catch {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-serif);
  font-size: 1.25rem;
  line-height: 1.6;
  color: var(--brown);
}
.chairman-sign { margin-top: var(--sp-4); }

@media (max-width: 700px) {
  .chairman-profile { flex-direction: column; gap: var(--sp-4); }
  .chairman-photo { flex: none; width: 78%; max-width: 320px; margin: 0 auto; }
  .chairman-role, .chairman-catch, .chairman-sign { text-align: left; }
}