* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/**************************************
*               Header                *
***************************************/
.site-header {position: fixed; top: 0; left: 0; width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; z-index: 1100; padding: 0 10px;}
/* Hamburger Button */
.menu-btn {position: absolute; left: 10px; top: 0; width: 60px; height: 60px; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer;}
/* Logo */
.site-logo {font-size: 20px; font-weight: bold; text-decoration: none;}

/**************************************
*           Side Navigation           *
***************************************/
.side-menu {width: 300px; height: calc(100vh - 60px); overflow-y: auto; position: fixed; top: 60px; left: -300px; margin-top: 60px; transition: left 0.3s ease; z-index: 1000;}
.side-menu.open {left: 0;}
.side-menu ul {list-style: none;}
.side-menu a, .submenu-toggle {display: flex; align-items: center; gap: 8px; text-decoration: none; padding: 15px; border: none; width: 100%; text-align: left; font-size: 16px; cursor: pointer;}
/* Submenu */
.submenu {max-height: 0; overflow: hidden; transition: max-height 0.3s ease;}
.submenu.open { max-height: 500px;}
.submenu a {padding-left: 30px;}
/* Arrow */
.arrow { transition: transform 0.3s ease;}
.submenu-toggle.open .arrow { transform: rotate(90deg);}

.badge {background-color: #00b3b3; color: white; font-size: 0.7em; padding: 0.2em 0.5em; border-radius: 3px; margin-left: 0.4em; vertical-align: middle; font-weight: bold;}
/**************************************
*               Content               *
***************************************/
.content :not(h1) {line-height: 1.625;}
.content {flex: 1; padding: 20px; margin-left: 0; margin-top: 60px; transition: margin-left 0.3s ease;}
.side-menu.open ~ .content {margin-left: 300px;}

.alert-b, .alert-r {font-weight: bold;}
/* Notice about time zone */
.timezone-note {text-align: right; font-weight: bold; margin-bottom: 1em;}
.journal-name {font-style: italic;}
.right {text-align: right;}

/**************************************
*                Index                *
***************************************/
.sponsors li, .table-of-contents li, .news li {list-style-type: none; margin-left: 1em;}
.index-page .journal {width: 90%; margin: 30px auto; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}

/**************************************
*      Plenary & Invited Speakers     *
***************************************/
/* Default (desktop/tablet) layout using floats */
.bio {margin-top: 1em; margin-bottom: 1em; display: flex; align-items: flex-start; gap: 1em; padding: 1em;}
.speaker-image {width: 20%;}
.speaker-image img {max-width: 100%; height: auto;}
.speaker-info {width: 75%;}
.speaker-name {font-weight: bold; display: inline-block; font-size: 2.8em; margin-right: 0.5em;}
.speaker-affiliation {font-size: 1.2em; line-height: 2em;}
.talk-title {font-size: 2em; margin: 0.5em auto;}
.speaker-info h3 {margin: 1em auto;}

/**************************************
*               Topics                *
***************************************/
.responsive-list3 {padding: 0; margin: 0; display: flex; flex-direction: column;}
.responsive-list3 li {margin-left: 1.5rem;}

/**************************************
*              Committees             *
***************************************/
.committees ul {margin-bottom: 1em;}
.committees li {list-style-type: none; line-style: none; margin-left: 1em;}

/**************************************
*           Call for Papers           *
***************************************/
.deadline {display: flex; flex-wrap: wrap; margin-left: 1em; margin-bottom: .5em;}
.deadline .label {font-weight: bold; margin-right: 0.5em;}
.deadline .dates {white-space: nowrap;}

/**************************************
*                Venue                *
***************************************/

.venue .venue-section, .venue .access-section, .venue .bus-section {max-width: 900px; margin: 2em auto; padding: 0 1em;}
.venue .venue-img {max-width: 100%; height: auto; display: block; margin: 1em auto;}
.venue .map-frame {width: 100%; height: 450px; border: 0; display: block; margin: 2em 0;}
.venue .map-image {text-align: center; margin-bottom: 2em;}
.venue .map-image img {max-width: 100%; height: auto;}
.venue .access-table {width: 100%; border-collapse: collapse; margin-bottom: 2em;}
.venue .access-table th, .venue .access-table td {padding: 0.5em; text-align: center;}
.venue .bus-info {list-style: none; padding: 0;}
.venue .bus-info li {margin-bottom: 1em;}
.venue .bus-info span {margin-left: 1em; display: block;}

/**************************************
*        Submission Guidelines        *
***************************************/
.guidelines ol {margin-left: 1em;}
.section-title {font-size: 1.5rem; font-weight: bold; margin-bottom: 0.5rem; padding-bottom: 0.25rem; margin-top: 1.5rem;}
.sub-section-title {font-size: 1.2rem; font-weight: bold; margin-bottom: 0.5rem; padding-bottom: 0.25rem; margin-top: 1.5rem;}
.list-item {margin-left: 1.5rem; list-style-type: disc;}
.list-item-number {margin-left: 1.5rem;}
.note {padding: 1rem; margin: 1rem 0;}
.alert {display: block; padding: 0.75rem 1rem; margin-top: 1rem; font-size: 0.95rem; line-height: 1.5;}
.alert p {margin: 0 0 0.6rem 0;}
.alert p:last-child {margin-bottom: 0;}
/**************************************
*            Registration             *
***************************************/
.registration table {border-collapse: collapse; margin: 1rem auto;}
.registration table td, .registration table th {padding: 0.2em; text-align: center;}
.btn-primary {
  display: inline-block;
  padding: 0.6em 1.2em;
  background-color: #0074a2;
  color: #fff;
  font-weight: bold;
  border-radius: 6px;
  text-decoration: none;
}
.btn-primary:hover {
  background-color: #005f82;
}

/**************************************
*             Contact Us              *
***************************************/
.contact-us table {border-collapse: collapse;}
.contact-us table td, .contact-us table th {padding: 0.2em; text-align: center;}

/**************************************
*     Footer (Copyright) & Clock      *
***************************************/

footer {margin-left: 300px; padding: 15px 0; text-align: center; font-size: 0.9em; position: relative; margin-top: auto; z-index: 1000;}
#utc-time {position: fixed; bottom: 10px; right: 10px; padding: 6px 12px; font-family: monospace; font-size: 14px; border-radius: 4px; z-index: 1200; pointer-events: none;}


/**************************************
*               Awards                *
***************************************/
.awards-container {display: flex; gap: 2%; margin-bottom: 2em; flex-wrap: wrap;}
.award-box {padding: 1em; flex: 1; min-height: 8em; box-sizing: border-box;}
.award-box h3 {margin-top: 0;}

.accordion {width: 100%; max-width: 900px; margin: auto; font-family: sans-serif;}
.accordion-panel {margin-bottom: 0.5em;}
.accordion-tab {padding: 1em; cursor: pointer; font-weight: bold;}
.accordion-content {max-height: 0; overflow: hidden; transition: max-height 0.4s ease; padding: 0 1em;}
.accordion-panel.open .accordion-content {max-height: none; padding: 1em;}
.accordion-content ul {font-weight:bold;}
.accordion-content ul ul {font-weight:normal; margin-left: 1em; margin-bottom: 1em;}
.accordion-content li {list-style: none;}


/**************************************
*              Timetable              *
***************************************/
.timetable {page-break-after: always; margin: 2rem 0; font-size: 0.9rem;}
.timetable table {border-collapse: collapse; border: 1px solid #077; width: 100%; table-layout: fixed; background-color: #fff;}
.timetable th, .timetable td {border: 1px solid #000; padding: 0.4em 0.5em; vertical-align: top;}
.timetable th {width: 10%; font-size: 0.8em; font-weight: normal; text-align: left; background-color: #f5fafa; color: #333;}
.tt_room td {text-align: center; font-weight: bold;}
.tt_floor td {background: #999; color: #fff;}
.tt_rooms td {background: #aaa; color: #fff;}
.tt_center {text-align: center;}

.timetable td {line-height: 1.4;}
.td_o {background-color: #F4E4D7;}
.td_ss_o, .td_ss2_o {background-color: #F6EDD9;}
.td_g {background-color: #DCE7F5;}
.td_p {background-color: #C8E8D2; text-align: center; font-weight: bold;}
.td_b {background-color: #EEE; text-align: center; font-style: italic;}
.td_bl {background-color: #666;}
.td_c {background-color: #f0fbfb; text-align: center; font-weight: bold;}
.td_i {background-color: #edf2f2; text-align: center;}
.td_wt {background-color: #eff; height: 10em; text-align: center;}
.td_g span, .td_o span, .td_ss_o span, .td_p span, .td_i span {display: block; margin: 0.3em 0 0.4em; font-style: italic; font-weight: bold;}
.timetable a {color: #077; text-decoration: none;}
.timetable a:hover {text-decoration: underline;}

.timetable-note {margin-top: 0.5rem; text-align: right; font-size: 0.8em; color: #666;}

/*-----------program.html(technical index)-----------*/

.presentations h3 {
  font-size: 1.5em;
  padding: 0;
  color:  #077;
}

.presentations h4 {
  font-size: 1.3em;
  padding: 0;
  color: #088;
}

.presentations h5 {
  font-size: 1.1em;
  margin: 0.7em 0 0.3em;
  line-height: 1.4;
}

.presentations a {
  text-decoration: none;
}

.paper-list {
  list-style: none;
  padding: 0;
  margin: 1em 0 0;
}

.paper-item {
  display: grid;
  grid-template-columns: 5em 1fr; /* 左: ID / 右: タイトル */
  column-gap: 0em;
  margin-bottom: 1em;
  line-height: 1.4;
}

.paper-id {
  font-weight: bold;
  white-space: nowrap;  /* OS3-2 などを改行させない */
}

.paper-title {
  font-style: italic;
  display: block;       /* ブロック化して右カラムいっぱい使う */
  margin-bottom: 0.3em;
}

.authors {
  grid-column: 2;       /* 右カラム側に配置 */
  margin-left: 0;
  font-size: 0.95em;
}

/**************************************
*      For Responsive Web Design      *
***************************************/
/* Header & Side Navigation */
@media (min-width: 769px) {
  .menu-btn {display: none;}
  .site-header {justify-content: flex-start;}
  .site-logo {margin-left: 20px;}
  .menu-btn {display: none;}
  .side-menu {left: 0; top: 0; height: 100vh;}
  .content {margin-left: 300px;}
}

/* Plenary & Invited Speakers */
@media screen and (max-width: 768px) {
  .speaker-image, .speaker-info {float: none; width: 100%;}
  .speaker-image {text-align: center; margin-bottom: 1em;}
  .speaker-image img {width: 80%; max-width: 250px;}
  footer {margin-left: 0;}
}

@media (max-width: 768px) {
  .bio {flex-direction: column; align-items: center; text-align: center;}
  .speaker-image, .speaker-info {width: 100%;}
  .speaker-name {font-size: 2em;}
  .talk-title {font-size: 1.5em;}
  .speaker-info p {text-align: left;}
}

@media (max-width: 480px) {
  #utc-time {display: none;}
}

/* Topics */
@media screen and (min-width: 768px) {
  .responsive-list3 {flex-direction: row; flex-wrap: wrap;}
  .responsive-list3 li {width: calc(33% - 3em);}
}

/* Call for Papers */
@media screen and (max-width: 480px) {
  .deadline {flex-direction: column;}
  .deadline .dates {margin-left: 0;}
}

/* Venue */
@media (max-width: 600px) {
  .venue .map-frame {height: 300px;}
}

/* Awards */
@media (max-width: 768px) {
  .awards-container {flex-direction: column;}
  .awards-container fieldset {width: 100%;}
}

@media print {
  .site-header, #utc-time {display: none;}
}

/* Headings */
h1 {margin-bottom: 1em;}
h2 {margin-top: .5em;}
h3 {}
h4 {}

/**************************************
*           Color settings            *
***************************************/

h1 {color: #088;}

/* Header */
.site-header {background-color: #333;}
.menu-btn {background: #666;}
.site-logo {color: white;}

/* Side Navigation */
.side-menu {background: #666; color: white;}
.side-menu a, .submenu-toggle {color: white;}
.side-menu li {border-bottom: 1px solid #aaa;}
.submenu-toggle {background: #666;}
.submenu-toggle:hover {background: #077;}
.submenu-toggle.open {background: #066;}
.submenu {color: white;}
.submenu a {background: #888;}
.submenu a:hover {background: #088;}

/* Awards */
.accordion-tab {background-color: #6cc; transition: background-color 0.2s;}
.accordion-tab:hover {background-color: #8ee;}
.award-box {border: 1px solid #ccc;}
.accordion-panel {border: 1px solid #ccc;}

.timezone-note {color: red;}

.alert-r {color: red;}

/* Venue */
.venue .bus-info span {color: #333;}
.venue .access-table th {background-color: #dee;}
.venue .access-table th, .venue .access-table td {border: 1px solid #ccc;}

/* Submission Guidelines */
.section-title {color: #2D3748; border-bottom: 2px solid #099;}
.sub-section-title {color: #2D3748; border-bottom: 2px dashed #099;}
.note {background-color: #EDF2F2; border-left: 4px solid #099;}
.alert {background-color: #ffffff; border-left: 4px solid #066;}

/* Registration */
.registration table td, .registration table th {border: 1px solid #077;}

/* Contact Us */
.contact-us table td, .contact-us table th {border: 1px solid #077;}

#utc-time {background-color: rgba(0, 0, 0, 0.7); color: white;}
footer {color: #666; background: white;}
footer a {color: #aaa;}

/**************************************
*   Decision News (namespaced: ec-)   *
***************************************/
.ec-wrap { max-width: 900px; margin: 32px auto; padding: 0 20px; }

.ec-card {
  background: #fff;
  border: 1px solid #d4d4d4;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  overflow: hidden;
}

.ec-header {
  padding: 18px 22px;
  border-bottom: 1px solid #e5e5e5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.ec-badge {
  background: #e0f7f7;            /* 淡いティール系 */
  border: 1px solid #7adede;
  color: #066;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.ec-title {
  flex: 1 1 auto;
  font-size: 1.35rem;
  font-weight: 700;
  color: #222;
}

.ec-meta { font-size: .9rem; color: #666; }

.ec-body { padding: 18px 22px; display: grid; gap: 18px; }

.ec-section {
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 14px 18px;
}
.ec-section h3 { margin: 0 0 6px 0; font-size: 1rem; color: #222; }
.ec-section p { margin: 6px 0; }

.ec-list { margin: 6px 0 0 1em; padding: 0; }
.ec-list li { margin: 4px 0; }

.ec-grid { display: grid; gap: 12px; }
@media (min-width: 700px) {
  .ec-grid { grid-template-columns: 1fr 1fr; }
}

.ec-alert {
  background: #f0fdf4;
  border-left: 4px solid #22c55e;
  border: 1px solid #d1fadf;
  padding: 12px;
  border-radius: 8px;
  font-size: .95rem;
}
.ec-alert.ec-warn {
  background: #fff8e6;
  border-left-color: #f59e0b;
  border-color: #ffecb5;
}

.ec-footer {
  padding: 14px 22px;
  background: #fafafa;
  border-top: 1px solid #e5e5e5;
  font-size: .9rem;
  color: #666;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* 小要素の見た目微調整（コード等） */
.ec-section code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }

/* === Organized Session Info (独自スタイル) === */
.os-session-block {
  border-left: 4px solid #099;
  background-color: #EDF2F2; /* noteクラスに合わせた淡いグレー */
  padding: 1em 1.5em;
  margin: 2em 0;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.os-session-block h2 {
  margin-top: 0;
  color: #088; /* h1と同系統 */
  font-size: 1.4em;
  border-bottom: 1px solid #099;
  padding-bottom: 0.3em;
}

.os-session-time {
  color: #077;
  font-weight: bold;
  font-size: 1.1em;
  margin-bottom: 0.5em;
}

.os-session-table {
  margin-top: 0.5em;
  border-collapse: collapse;
  width: 100%;
}

.os-session-table td {
  padding: 0.2em 0.5em;
  vertical-align: top;
}

.os-session-table th {
  width: 7em;
  font-weight: bold;
  color: #333;
}

.os-session-note {
  font-style: italic;
  margin-top: 0.8em;
  color: #077;
}