@charset "UTF-8";
/* ==========================================================================
   座長・演者へのご案内（chair-speaker.html）専用
   ========================================================================== */

/* 座長・演者へのご案内：演題登録ページ（general.html）と同じ土台に、
   見出しと囲みの見た目をこのページの中だけで足す（.cs-page 配下に限定） */

/* ---------- 大見出し（座長へのご案内／演者へのご案内／参加登録について） ----------
   ページ見出し h2（灰色の帯＋茶の縦線・サイト共通）と見分けがつくよう、
   縦線は使わず、淡い茶色の角丸の帯＋茶の丸アイコン＋茶の文字にする */
.abstract-note.cs-page h3 {
  font-weight: 600;
  line-height: 1.5;
  margin-top: 35px;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  background: #f8f0ed;
  color: #7a2f1d;
  border: 1px solid #ead5ce;
  border-radius: 6px;
  font-size: 17px;
  letter-spacing: 0.12rem;
  padding: 0.55em 1em !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.abstract-note.cs-page h3 .cs-h3-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2em;
  margin-right: 0.65em;
  border-radius: 50%;
  background: #8b3622;
  color: #fff;
  font-size: 0.8em;
  letter-spacing: 0;
}

/* ---------- 中見出し（1．口演発表座長へのご案内 など） ---------- */
.abstract-note.cs-page h4 {
  font-weight: 600;
  line-height: 1.5;
  position: relative;
  font-size: 1.05rem;
  color: #212529;
  padding: 0.4em 0 0.5em !important;
  margin: 30px 0 0 !important;
  border-bottom: 2px solid #ece3e0;
}
.abstract-note.cs-page h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 4em;
  height: 2px;
  background: #8b3622;
}
.abstract-note.cs-page h4 .cs-num { color: #8b3622; margin-right: 0.1em; }

/* ---------- タブ（上段：座長／演者） ----------
   JavaScript が動いたときだけ .cs-js が付き、タブを出して中身を切り替える。
   動かない環境では全部を縦に並べて表示する（従来どおり） */
.cs-tabs,
.cs-subtabs { display: none; }
.cs-js .cs-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin: 0 0 1.4rem; }
.cs-tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.4rem;
  padding: 0.65em 0.8em;
  background: #fff;
  color: #7a2f1d;
  border: 2px solid #d9c2bb;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08rem;
  line-height: 1.4;
  cursor: pointer;
  /* 色の切り替えは瞬時に（アニメーションさせると、アイコンの丸だけ先に変わる中途半端な状態が一瞬出る） */
}
.cs-tab:hover { border-color: #8b3622; }
.cs-tab:focus { outline: none; box-shadow: 0 0 0 3px rgba(139, 54, 34, 0.25); }
.cs-tab .cs-tab-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9em;
  height: 1.9em;
  margin-right: 0.55em;
  border-radius: 50%;
  background: #8b3622;
  color: #fff;
  font-size: 0.8em;
  letter-spacing: 0;
}
.cs-tab.is-active { background: #8b3622; border-color: #8b3622; color: #fff; }
.cs-tab.is-active .cs-tab-icon { background: #fff; color: #8b3622; }
/* 選ばれているタブから下の中身へつながる三角 */
.cs-tab.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  margin-left: -8px;
  border-width: 8px 8px 0;
  border-style: solid;
  border-color: #8b3622 transparent transparent;
}

/* ラベルは途中で折り返さない（「…ご案 / 内」のような段落ちを出さない） */
.cs-tab .cs-tab-label { white-space: nowrap; }
/* スマホ：1行に収まるよう字間・余白・アイコンを詰める */
@media (max-width: 575px) {
  .cs-js .cs-tabs { gap: 0.5rem; }
  .cs-tab { padding: 0.55em 0.45em; font-size: 0.95rem; letter-spacing: 0; }
  .cs-tab .cs-tab-icon { width: 1.75em; height: 1.75em; margin-right: 0.4em; }
}
/* さらに狭い画面は、アイコンを文字の上に置いて文字の幅を確保する */
@media (max-width: 359px) {
  .cs-tab { flex-direction: column; min-height: 4.2rem; padding: 0.5em 0.3em; }
  .cs-tab .cs-tab-icon { margin: 0 0 0.25em; }
}

/* ---------- タブ（下段：口演発表／ポスター発表） ---------- */
.cs-js .cs-subtabs { display: flex; margin: 0.2rem 0 0.4rem; border-bottom: 2px solid #dee2e6; }
.cs-subtab {
  flex: 0 1 auto;
  padding: 0.6em 1.4em;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  color: #5b636b;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06rem;
  line-height: 1.4;
  cursor: pointer;
}
.cs-subtab:hover { color: #0c6577; }
.cs-subtab:focus { outline: none; background: #eef7f9; }
.cs-subtab.is-active { color: #0c6577; border-bottom-color: #17a2b8; }
@media (max-width: 575px) {
  .cs-subtab { flex: 1 1 0; padding: 0.6em 0.4em; }
}

/* タブで切り替えている間は、タブと同じ内容の見出しを出さない */
.cs-js .cs-panel-h3,
.cs-js .cs-sub-h4 { display: none !important; }

/* 印刷するときはタブを使わず全部を出す */
@media print {
  .cs-js .cs-tabs,
  .cs-js .cs-subtabs { display: none !important; }
  .cs-tabpanel[hidden],
  .cs-subpanel[hidden] { display: block !important; }
  .cs-js .cs-panel-h3 { display: flex !important; }
  .cs-js .cs-sub-h4 { display: block !important; }
}

/* ---------- 小見出し（1）発表時間 など） ---------- */
.cs-sub {
  display: flex;
  align-items: baseline;
  font-weight: 700;
  color: #0c6577;
  background: #eaf6f8;
  border-left: 4px solid #17a2b8;
  border-radius: 0 4px 4px 0;
  padding: 0.4em 0.8em;
  margin: 1.9rem 0 0.7rem !important;
  line-height: 1.5;
}
.cs-sub:first-child { margin-top: 0 !important; }
.cs-sub .cs-sub-num { flex: 0 0 auto; margin-right: 0.15em; }

/* ---------- ＜ ＞ で囲まれた見出し ---------- */
.cs-block {
  font-weight: 700;
  color: #212529;
  margin: 1.7rem 0 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px dashed #cfd4da;
  line-height: 1.6;
}

/* 発表時間：区分名と時間を1組ずつ */
.cs-times { margin: 0.25rem 0 0; }
.cs-times dt { font-weight: 600; margin: 0.6rem 0 0; line-height: 1.6; }
.cs-times dt:first-child { margin-top: 0; }
.cs-times dd { margin: 0.1rem 0 0 1em; line-height: 1.6; }

/* 本文の段落 */
.cs-p { margin: 0 0 0.35rem; line-height: 1.75; }

/* ---------- PC受付の表 ---------- */
.cs-rec-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin: 1rem 0 1rem; }
@media (min-width: 768px) {
  .cs-rec-grid { grid-template-columns: 1fr 1fr; }
}
.cs-rec-ttl { font-weight: 700; margin: 0 0 0.4rem; line-height: 1.5; }
.cs-table { width: 100%; margin: 0; background: #fff; }
.cs-table th,
.cs-table td { vertical-align: middle; padding: 0.55rem 0.75rem; line-height: 1.6; font-size: 0.95rem; }
.cs-table th { width: 5.5em; background: #f7f7f7; white-space: nowrap; font-weight: 600; text-align: center; letter-spacing: 0.1rem; }
.cs-table-time th { width: 9em; letter-spacing: 0; }
.cs-rec-label { font-size: 0.9rem; font-weight: 600; color: #555; margin: 0.75rem 0 0.3rem; line-height: 1.5; }

/* 書体の囲み */
.cs-box { line-height: 1.75; }

/* ダウンロードボタン */
.cs-dl { text-align: center; margin: 0.9rem 0 0.4rem; }
.cs-dl .btn { white-space: normal; }

/* ---------- 生成AI使用有無の開示（カード） ---------- */
.cs-ai {
  background: #fff6f6;
  border: 1px solid #f2c4c9;
  border-left: 5px solid #dc3545;
  border-radius: 4px;
  padding: 0.9rem 1rem 0.85rem;
  margin: 1.7rem 0 1.2rem;
}
.cs-ai-ttl { font-weight: 700; color: #b21f2d; margin: 0 0 0.55rem; line-height: 1.5; }
.cs-ai-ttl i { margin-right: 0.4em; }
.cs-ai-lead { margin: 0 0 0.35rem; line-height: 1.75; color: #212529; }
.cs-ai-items { list-style: none; margin: 0.6rem 0 0.25rem; padding: 0; display: flex; flex-wrap: wrap; }
.cs-ai-items li {
  background: #fff;
  border: 1px solid #efb3ba;
  color: #a71d2a;
  border-radius: 999px;
  padding: 0.2em 0.85em;
  margin: 0 0.45rem 0.45rem 0;
  font-size: 0.92rem;
  line-height: 1.5;
  white-space: nowrap;
}
.cs-ai .ab-note { margin-left: 0; }

/* ポスターの掲示時間の表 */
.cs-poster-table th { white-space: nowrap; }
.cs-poster-table td { line-height: 1.75; }

/* ---------- ポスターパネル：文章と寸法図 ---------- */
.cs-panel-fig { text-align: center; margin: 0.5rem 0 0.75rem; }
@media (min-width: 768px) {
  .cs-panel { display: flex; align-items: flex-start; }
  .cs-panel-text { flex: 1 1 auto; min-width: 0; }
  .cs-panel-fig { flex: 0 0 auto; margin: 0 0 0 1.5rem; }
}
.cs-zoom {
  display: inline-block;
  padding: 0.4rem;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: #fff;
  cursor: zoom-in;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.cs-zoom:hover,
.cs-zoom:focus { border-color: #17a2b8; box-shadow: 0 0 0 3px rgba(23, 162, 184, 0.2); outline: none; }
/* 寸法図の表示幅（元画像 309x633 を 280px で表示。スマホは画面幅まで） */
.cs-zoom img { display: block; width: 280px; max-width: 100%; height: auto; }
.cs-zoom-hint { display: block; margin-top: 0.35rem; font-size: 0.85rem; color: #0c6577; font-weight: 600; }

/* 拡大表示
   スマホ幅ではサイトのヘッダーが sticky / z-index:9999、準備中モーダル(.modalArea)が 99999。
   それより手前に出さないと × がヘッダーの裏に隠れる */
.cs-lightbox {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.2rem 1rem 1rem;
  cursor: zoom-out;
}
.cs-lightbox[hidden] { display: none !important; }
.cs-lightbox img {
  /* 図は透過PNGなので、暗い背景でも線が見えるよう白地を敷く */
  background: #fff;
  padding: 12px;
  border-radius: 4px;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  cursor: default;
}
.cs-lightbox-close {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: #212529;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
body.cs-noscroll { overflow: hidden; }