:root {
  --main-color: #004080;
  --accent-color: #007acc;
  --bg-color: #f9f9f9;
  --font-family: 'Helvetica Neue', sans-serif;
}

/* ===== Base ===== */
* { box-sizing: border-box; }

html {
  max-width: 100vw;
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-family);
  background: var(--bg-color);
  color: #333;
  line-height: 1.7;
  font-size: clamp(15px, 2.2vw, 17.6px);
  max-width: 100vw;
  overflow-x: hidden;
}

h1, h2, h3, p, li, div { overflow-wrap: anywhere; }
h1, h2 { margin-top: 0; }

.container {
  width: min(100%, 1200px);
  margin-inline: auto;
  padding: 1em clamp(12px, 4vw, 24px);
}

/* ===== Header ===== */
header.site-header {
  position: relative;
  color: #fff;
  background: url("../../../images/risanken_logo_16x9_noname.png") center / cover no-repeat;
  min-height: clamp(180px, 20vw, 420px);
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: clamp(24px, 6vw, 56px);
}
header.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.35));
}
header.site-header > * { position: relative; z-index: 1; }
header.site-header h1 {
  margin: 0;
  color: #fff;
  font-weight: bold;
  font-size: clamp(1.6rem, 4.5vw, 2.5rem);
}
.header-sub {
  margin: 2em 0 0;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
  color: #fff;
  background: rgba(0,0,0,0.5);
  padding: .5em 1em;
  border-radius: 8px;
  display: inline-block;
}

/* ===== Sections ===== */
.about {
  background: #f0f4f8;
  padding: 1em;
  margin-bottom: 2em;
  border-radius: 8px;
}
main .about:first-of-type { margin-top: 0; }
.about h2 { margin: 0; }
.about p { margin: .5em 0 0; }

/* ===== Program (speakers) ===== */
.speaker { padding: .7em 1em; }
.speaker:nth-child(even) { background: #dbe9fe; }  /* 水色 */
.speaker:nth-child(odd)  { background: #ffffff; }  /* 白 */

/* 座長行 */
.chair-line {
  margin: 0 0 .35em 0;
  font-style: italic;
  color: #444;
}

/* ── 2列グリッド：時間 | (名前行 / タイトル+ボタン行) ── */
.speaker-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  grid-auto-rows: auto;
  align-items: start;
  column-gap: 14px;
  row-gap: 4px;
}

.speaker-time {
  grid-column: 1;
  grid-row: 1 / span 2;
  white-space: nowrap;
  font-weight: 600;
  margin: 0;
}

.speaker-name {
  grid-column: 2;
  grid-row: 1;
  font-weight: 600;
  margin: 0;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

/* ▼ 2段目：タイトルとボタンを横並びに */
.title-with-actions {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between; /* ← 左右に振り分け */
  /*--flex-wrap: nowrap;*/
  min-width: 0;
}

.speak-title {
  margin: 0;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
}
.speak-title::after,
.speak-title[aria-expanded="true"]::after { content: none; }

.talk-actions {
  display: inline-flex;
  gap: 8px;
  flex: 0 0 auto;
  margin-left: 12px;
}

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  font: inherit;
  font-size: 0.85rem;      /* 小さめ */
  line-height: 1.3;
  padding: .2em .55em;     /* コンパクト */
  border-radius: 6px;
  border: 1px solid #aaa;  /* 控えめなグレー */
  background: #fff;
  text-decoration: none;
  color: #333;
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .06s, opacity .15s;
}
.btn:hover,
.btn:focus-visible {
  background: #f2f2f2;
  border-color: #666;
  outline: none;
}
.btn:active { transform: translateY(1px); }

.btn-slide {
  border-color: var(--main-color);
  color: var(--main-color);
  font-weight: 500;
}

/* 概要ボタンもスライドボタンと同じ色に */
.btn-abs {
  border-color: var(--main-color);
  color: var(--main-color);
}

/* ホバー／フォーカス時もテーマ色のままにしたい場合はこれも追加 */
.btn-abs:hover,
.btn-abs:focus-visible,
.btn-slide:hover,
.btn-slide:focus-visible {
  border-color: var(--main-color);
}

/* Aタグの既訪問色でズレるのを防ぐ（念のため） */
.btn-slide:link,
.btn-slide:visited {
  color: var(--main-color);
}

.btn[disabled],
.btn.is-disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}

/* 概要開閉部分 */
.speak-detail {
  margin-top: .5em;
  padding: .7em 1em;
  background: #f8f8f8;
  border-left: 4px solid #b5e1f0;
  display: none;
}

/* ===== Access ===== */
.access-flex {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(12px, 3vw, 24px);
  align-items: start;
}
.access-map .map-wrap {
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.access-map .map-wrap iframe { width: 100%; height: 100%; border: 0; }
.access-map  { max-width: 600px; }
.access-text { max-width: 600px; }

/* ===== Footer ===== */
footer {
  background: var(--main-color);
  color: #fff;
  box-shadow: 0 -1px 0 rgba(255,255,255,.18) inset;
  border-bottom: 0;
}
.footer-grid {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 16px;
  padding-block: 14px;
}
.footer-link {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  padding: .6em 1em;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 12px;
  transition: background .2s, border-color .2s, transform .06s;
}
.footer-link:hover,
.footer-link:focus-visible {
  background: rgba(255,255,255,.12);
  border-color: #fff;
  outline: none;
}
.footer-link:active { transform: translateY(1px); }
.copyright { margin: 0; font-size: .95em; opacity: .9; }

.info-large:last-of-type,
.about:last-of-type { margin-bottom: 8px; }

/* ===== Timetable ===== */
.timetable-block { text-align: center; margin: 1em 0 2em; }
.timetable-header { margin-bottom: .5em; font-weight: bold; font-size: 1.2rem; }
.timetable-header a { color: var(--main-color); text-decoration: none; }
.timetable-header a:hover { text-decoration: underline; }
.timetable-img {
  display: block;
  margin: 0 auto 1em;
  max-width: 50%;
  height: auto;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .access-flex { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .speaker-row {
    grid-template-columns: 92px 1fr;
    column-gap: 10px;
  }
  .speaker-name {
    white-space: normal;
    word-break: normal;
  }
  .title-with-actions {
    gap: 6px;
    flex-wrap: wrap;
  }
  .speak-title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    flex: 1 1 auto;
    min-width: 60%;
  }
  .talk-actions { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .footer-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .footer-link { width: 100%; text-align: center; }
}

@media (max-width: 600px) {
  body { font-size: 90%; }
}