@charset "UTF-8";


.area_img .item_pre_registration {
  position: absolute;
  bottom: 0;
  right: 0;
}

@media screen and (max-width: 880px) {
  .area_img .item_pre_registration {
    bottom: 0;
  }
}

.list_area {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-top: 25px;
}

.list_area .list_area_item a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 25px;
  height: 100%;
  border: 5px solid #f2f2f2;
}
.list_area .list_area_item a p {
  margin-bottom: auto;
}
.list_area .list_area_item a .btn {
  margin-top: 15px;
  margin-right: 0;
  margin-bottom: 0;
}
.list_area .list_area_item:nth-child(1) {
  /* リンク無しタイプ 
  padding: 25px;
  border-radius: 5px;
  border: 5px solid #f2f2f2;*/
  color: var(--ceatecblue);
  background-color: rgba(43, 65, 143, 0.1);
}
.list_area .list_area_item:nth-child(2) a {
  color: var(--xpark);
  background: linear-gradient(43deg, #dae0fb 0%, #e5f2f7 55%, #fad9f2 100%);
}

.list_area .list_area_item:nth-child(3) a {
  color: var(--xpark);
  background-color: rgba(183, 138, 0, 0.08);
}

.list_area .list_area_item:nth-child(4) a {
  color: var(--next);
  background-color: rgba(252, 232, 236, 0.3);
}

.list_area .list_area_item:nth-child(5) a {
  color: var(--global);
  background-color: rgba(96, 0, 213, 0.04);
}

.list_area .list_area_item:nth-child(6) a {
  color: var(--conference);
  background-color: #f8eeed;
}
.page_content .page_block .list_area .list_area_item h4 {
  margin-bottom: 5px;
  padding: 0;
  padding-left: 25px;
  line-height: 1.3;
  font-size: 20px;
  position: relative;
  background-color: transparent;
}

.list_area .list_area_item h4:before {
  content: "place";
  width: 20px;
  height: 20px;
  text-align: center;
  display: inline-block;
  line-height: 20px;
  position: absolute;
  left: 0;
  top: 0;
}

.list_area .list_area_item p {
  font-size: 16px;
}

@media screen and (max-width: 840px) {
  .list_area {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 640px) {
  .page_content .page_block .list_area .list_area_item h4 {
    font-size: 16px;
  }
  .list_area {
    grid-template-columns: 1fr;
  }
}

/* 新しいマップページ用スタイル -------------------------------------------- */
/* PC表示：マップ画像とmap-gridを横並びレイアウト */
/* #sec01 section {
  display: flex;
  flex-direction: row-reverse;
  gap: 40px;
  align-items: flex-start;
} */

/* .area_img {
  flex: 0 0 50%;
  max-width: 50%;
} */

.exhibition.top .sec_flex {
  display: grid;
  gap: 30px;
  margin-top: 30px;
}

.exhibition.top .nav_list_contentslinks ul{
  grid-template-columns: 1fr;
}

/* PC版（1100px以上）で2列グリッド：左map-grid、右area_img+include縦並び */
@media screen and (min-width: 1101px) {
  .exhibition.top .sec_flex {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
      "map-grid area_img"
      "map-grid include";
  }
  .exhibition.top .map-grid {
    grid-area: map-grid;
  }
  .exhibition.top .area_img {
    grid-area: area_img;
  }
  .exhibition.top .sec_flex > *:last-child {
    grid-area: include;
  }
}

@media screen and (max-width: 1100px) {
  .exhibition.top .sec_flex {
    grid-template-columns: 1fr;
    grid-template-areas:
      "area_img"
      "map-grid" 
      "include";
      gap: 10px;
  }
  .exhibition.top .map-grid {
    grid-area: map-grid;
    align-self: start;
    gap: 20px;
  }
  .exhibition.top .area_img {
    grid-area: area_img;
  }
  .exhibition.top .sec_flex > *:last-child {
    grid-area: include;
  }
}

@media screen and (max-width: 767px) {
  .exhibition.top .nav_list_contentslinks ul{
    grid-template-columns: 1fr;
  }
}

.map-grid {
  /* flex: 1; */
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  gap: 15px;
}

.list_area_item{
  padding:0;
  display:flex;
  flex-direction:row;
  overflow:hidden;
  height: 100%;
}

.list_area_item a {
  padding:0;
  display:flex;
  flex-direction:row;
  overflow:hidden;
  width: 100%;
  height: 100%;
}

.card-exhibits a {
  width: auto;
  height: auto;
}

/* タイトル画像 */
.list_area_item img:not(.photo img),
.list_area_item a img:not(.photo img) { 
  margin:auto; /* 水平・垂直方向の中央配置 */
  padding:15px;
  flex:0 0 120px; /* 固定幅でタイトル部分を統一 */
  display:block;
  height: 100px;
  width: 90px;
  object-fit: contain; /* 画像の縦横比を保持 */
}

/* タイトル・本文 */
.list_area_item h3,
.list_area_item a h3{ 
  margin:0; 
  font-size:clamp(16px,1.6vw,20px); 
  padding:20px;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  font-weight:bold;
  min-width: 0; /* テキストの折り返しを許可 */
  word-wrap: break-word; /* 長いテキストの改行 */
}
.list_area_item p,
.list_area_item a p { 
  margin:0; 
  font-size:clamp(13px,1.4vw,16px); 
  background:#fff;
  color:#333;
  padding:10px 20px;
  flex:1;
  display:flex;
  flex-direction: column;
  justify-content:center;
}

/* カラーごとの指定 */
.card-conf     { background:#F18B00; color:#fff; border: 1px solid #F18B00; }
.card-ax       { background:#43BCEB; color:#fff; border: 1px solid #43BCEB; }
.card-partners { background:#FFEA00; color:#222; border: 1px solid #FFEA00; }
.card-next     { background:#E00083; color:#fff; border: 1px solid #E00083; }
.card-exhibits { background:#37376E; color:#fff; border: 1px solid #37376E; }

/* 写真用 */
.photo{
  position:relative; 
  overflow:hidden; 
  grid-column: 1; /* 写真用 */
}
.photo img{ width:100%; height:100%; object-fit:cover; display:block; }

.underline_link {
  text-decoration: underline;
}

.text_red {
  color: #e00083;
}

/* グリッドアイテムの個別配置 - PC表示では縦並び（1列）レイアウト */
.map-grid .card-exhibits { grid-column: 1; grid-row: 1; }
.map-grid .card-partners { grid-column: 1; grid-row: 2; }
.map-grid .card-ax { grid-column: 1; grid-row: 3; }
.map-grid .card-next { grid-column: 1; grid-row: 4; }
.map-grid .card-conf { grid-column: 1; grid-row: 5; }

/* レスポンシブ対応 - タブレット・スマートフォンでは縦1列表示 */
@media screen and (max-width: 1100px) {
  /* 横並びレイアウトを解除 */
  /* #sec01 section {
    display: block;
  } */
  
  /* .area_img {
    flex: none;
    max-width: none;
  } */
  
  /* .map-grid {
    flex: none;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, auto);
    gap: 10px;
    margin-top: 30px;
  } */
  
  .photo {
    grid-column: 1;
    grid-row: 2;
    height: 200px;
  }
  
  .map-grid .card-exhibits { grid-column: 1; grid-row: 1; }
  .map-grid .card-partners { grid-column: 1; grid-row: 2; }
  .map-grid .card-ax { grid-column: 1; grid-row: 3; }
  .map-grid .card-next { grid-column: 1; grid-row: 4; }
  .map-grid .card-conf { grid-column: 1; grid-row: 5; }
  
  /* スマホサイズでのarticleサイズ調整 */
  .list_area_item img:not(.photo img),
  .list_area_item a img:not(.photo img) { 
    padding: 10px;
    flex: 0 0 80px;
    height: 70px;
    width: 60px;
  }
  
  .list_area_item p,
  .list_area_item a p { 
    padding: 15px 15px;
    font-size: 12px;
  }
}

/* sec02 画像ギャラリー -------------------------------------------- */
#sec02 ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x: visible;
}

#sec02 ul li {
  flex: 1;
  min-width: 0;
}

#sec02 ul li img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* カスタムドット非表示（PC） */
.ex-slider-dots {
  display: none;
}

/* スマホ表示時のスライダー */
@media screen and (max-width: 768px) {
  /* Slick未初期化時のスタイル（フォールバック） */
  #sec02 ul:not(.slick-initialized) {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px;
    margin: 0 -20px;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
  }

  #sec02 ul:not(.slick-initialized)::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  
  #sec02 ul:not(.slick-initialized) li {
    flex: 0 0 280px;
    scroll-snap-align: start;
  }
  
  #sec02 ul:not(.slick-initialized) li img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }

  /* Slickスライダー用のスタイル調整 */
  #sec02 ul.slick-initialized {
    display: block;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }

  /* Slickスライダーのトラック部分 */
  #sec02 ul.slick-initialized .slick-track {
    display: flex;
    align-items: center;
  }

  #sec02 ul.slick-initialized .slick-slide {
    width: auto;
    padding: 0 10px;
  }

  #sec02 ul.slick-initialized .slick-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  /* カスタムドット表示（スマホ） - バー形式 */
  .ex-slider-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin: 20px 0 0 0;
    padding: 0;
    gap: 8px;
  }

  .ex-slider-dots .dot {
    width: 60px;
    height: 4px;
    border-radius: 2px;
    background-color: #ddd;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  .ex-slider-dots .dot.active {
    background-color: #37376E;
  }
}

@media screen and (max-width: 480px) {
  #sec02 ul:not(.slick-initialized) li {
    flex: 0 0 250px;
  }
  
  #sec02 ul:not(.slick-initialized) li img {
    height: auto;
  }

  #sec02 ul.slick-initialized .slick-slide img {
    height: auto;
  }
}

/* aタグを相対位置にして虫眼鏡を内包 -------------------------------------------- */
.area_img a {
  position: relative;
  display: block;
}

/* 外国語対応-------------------------------------------- */

.mBooth_langList {
  display: flex;
  gap: 3%;
  justify-content: flex-start;
  /* background: #dbedff; */
  padding: 10px;
  margin-bottom: 30px;
}

.mBooth_langList .flex {
  display: flex;
  align-items: center;
  font-weight: bold;
}

.mBooth_langList .flex dd {
  font-weight: bold;
  margin-left: 5px;
}

.mBooth_langList .flex dt img {
  max-width: 40px;
}

/* テーブル全体のスタイル */
.multilingual .tbstyle {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 5px;
  font-size: 1rem;
}

/* ヘッダー行のスタイル */
.multilingual .tbstyle thead th {
  background-color: #dbedff;
  padding: 10px;
  text-align: left;
  border-bottom: 2px solid #e4e4e4;
  border-right: 1px solid #ffffff;
  border-left: 1px solid #e4e4e4;
  font-size: 0.7rem;
  font-weight: bold;
  vertical-align: middle;
  /* width: 18%; */
}

.multilingual .tbstyle thead tr:nth-child(2n) {
  width: 15%;
}

/* データ行のスタイル */
.multilingual .tbstyle td,
.multilingual .tbstyle th {
  border-bottom: 1px solid #e4e4e4;
  /* border-right: 1px solid #e4e4e4; */
  padding: 10px;
  font-size: 0.8rem;
  text-align: left;
  vertical-align: middle;
  /* border-left: 1px solid #e4e4e4; */
}

.multilingual .tbstyle tbody tr:nth-child(odd) th,
.multilingual .tbstyle tbody tr:nth-child(odd) td {
  border-right: 2px solid #f2f2f2;
  border-left: 1px solid #e4e4e4;
}

.multilingual .tbstyle tbody tr:nth-child(even) {
  background-color: #f2f2f2;
  border-right: 2px solid #f2f2f2;
}

.multilingual .tbstyle tbody tr:nth-child(even) th,
.multilingual .tbstyle tbody tr:nth-child(even) td {
  border-right: 1px solid #ffffff;
  border-left: 1px solid #e4e4e4;
}

.multilingual .tbstyle tbody tr td:last-of-type {
  /* border-right: none; */
}

.multilingual .tbstyle th a {
  color: #3170a9;
}

/* Booth No.multilingual . 列のスタイル */
.multilingual .boothno {
  width: 10%;
  font-weight: bold;
}

/* Company Name 列のスタイル */
.multilingual .comname {
  width: 20%;
}

/* リンクのスタイル */
.multilingual .comname a {
  text-decoration: none;
  color: #007bff;
}

/* 言語アイコンのスタイル */
.multilingual .tbstyle img {
  width: 30px;
  margin-right: 5px;
}

.multilingual .tbstyle td img:last-of-type {
  margin-right: 0;
}

.multilingual tbody th {
  font-weight: bold;
}

.multilingual tbody td {
  text-align: center !important;
}

@media screen and (max-width: 850px) {
  .multilingual .tbstyle {
    min-width: 750px;
  }
}

@media screen and (max-width: 480px) {
  .mBooth_langList {
    gap: 1%;
    flex-wrap: wrap;
  }

  .mBooth_langList .flex {
    width: 49%;
    justify-content: flex-start;
  }

  .mBooth_langList .flex:last-child {
    margin-top: 5px;
  }
}

/* ex_event */

.ex_event .nav_anc ol {
  justify-content: center;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ex_event .nav_anc ol li {
      margin-left: 0px;/*打ち消し*/
  width: calc((100% / 4) - 10px);
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 5px 28px 3px 12px;
  border: 1px solid #c2c7ef;
  background-color: #fff;
  border-radius: 100px;
  font-size: 1.15rem;
  position: relative;
  cursor: pointer;
  font-weight: 700;
}
.ex_event .nav_anc ol li:hover {
  border: 1px solid #c2c7ef;
  background-color: #ddd;
}
.ex_event .nav_anc ol li.active {
  border: 1px solid var(--ceatecblue);
  background-color: var(--ceatecblue);
  color: #fff;
  padding-left: 1.5em;
}
.ex_event .nav_anc li::after {
  content: "keyboard_double_arrow_right";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  font-size: 14px;
}
.ex_event .nav_anc li.active::after {
  color: #fff;
  content: "fmd_good";
  right: auto;
  left: 10px;
}

.ex_event .page_block .page_block_title span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: black;
  border-radius: 100px;
  color: #fff;
  font-size: 14px;
  width: 4em;
  height: 4em;
}
.ex_event .page_block ul .item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.ex_event .page_block {
  display: none;
}

.ex_event .page_block.show {
  display: block;
}

.ex_event .list_event {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media screen and (max-width: 640px) {
  .ex_event .nav_anc ol li {
      margin-left: 0px;/*打ち消し*/
  width: calc((100% / 2) - 10px);
  }
  .ex_event .list_event {
    grid-template-columns: 1fr;
  }
}

.ex_event .list_event .event_item {
  background-color: #fff;
  padding: 30px;
  padding-top: 60px;
  box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.3);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ex_event .list_event .event_item::after {
  font-family: "LINE Seed JP", sans-serif;
  content: "イベント開催 出展者情報";
  display: block;
  color: #e4318c;
  position: absolute;
  top: 35px;
  left: 60px;
  font-weight: 700;
}
.en.ex_event .list_event .event_item::after {
  content: "Events Exhibitor Information";
}

.ex_event .list_event .event_item::before {
  content: "festival";
  position: absolute;
  top: 25px;
  left: 30px;
  color: #e4318c;
  font-size: 25px;
}
.ex_event .list_event .event_item h5.event_title {
  margin-top: 0.5em;
}

.ex_event .list_event .event_item figure.images_event {
  margin: 10px 0;
  padding: 0;
  line-height: 1;
  max-height: 250px;
  position: relative;
  overflow: hidden;
}
.ex_event .list_event .event_item figure.images_event img {
  height: 100%;
  object-fit: contain;
}

.ex_event .list_event .event_item h5.event_title::before,
.ex_event .list_event .event_item h5.event_title::after {
  background-color: #e4318c;
}
.ex_event .list_event .event_item .event_description {
  display: flex;
  flex-direction: column;
  margin-top: 0.5em;
  margin-bottom: auto;
}
.ex_event .list_event .event_item .event_description .time {
  margin-top: 0em;
  order: 2;
}
.ex_event .list_event .event_item .event_description .day {
  order: 1;
  display: flex;
  align-items: center;
}
.ex_event .list_event .event_item .event_description .day li {
  background-color: #e9e9e9;
  border-radius: 7px;
  padding: 2px 6px;
  margin-right: 5px;
}
.ex_event .list_event .event_item .event_description .description {
  order: 3;
  margin-top: 0.5em;
  font-size: 83%;
}
.ex_event .list_event .event_item .event_description .time,
.ex_event .list_event .event_item .event_description .day {
  position: relative;
  padding-left: 4em;
  font-size: 18px;
  min-height: 1em;
}
.ex_event .list_event .event_item .event_description .time::before,
.ex_event .list_event .event_item .event_description .day::before {
  font-family: "LINE Seed JP", sans-serif;
  content: "開催時間";
  display: inline-block;
  position: absolute;
  top: 2px;
  left: 0px;
  font-size: 14px;
  font-weight: bold;
  font-weight: 700;
}
.ex_event .list_event .event_item .event_description .day::before {
  content: "開催日";
}
.en.ex_event .list_event .event_item .event_description .time::before,
.en.ex_event .list_event .event_item .event_description .day::before {
  content: "time";
}
.en.ex_event .list_event .event_item .event_description .day::before {
  content: "date";
}

.ex_event .list_event .event_item .event_exhibitor {
  margin-top: 5px;
}
.ex_event .list_event .event_item .event_booth {
  text-align: right;
  font-weight: 700;
  font-size: 83%;
  margin-top: 0.5em;
}
.ex_event .list_event .event_item .event_booth span {
  font-size: 125%;
  background-color: #000;
  color: #fff;
  padding-left: 5px;
  padding-right: 5px;
}
.ex_event .list_event .event_item .btn {
  margin-top: 1em;
}

/* CEATEC for Students-------------------------------------------- */
/* Card Link */
.card_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;          /* カード間スペース */
  list-style: none;
  padding: 0;
  margin: 0;
}

.card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  /* ホバー挙動の値は add.css（サイト共通）のトークンを参照 */
  transition:
    transform var(--panel-hover-duration) var(--panel-hover-easing),
    box-shadow var(--panel-hover-duration) var(--panel-hover-easing);
}
.card:hover {
  transform: translateY(var(--panel-hover-lift));
  box-shadow: var(--panel-hover-shadow);
}

.card > a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
  padding: 24px;
}

.card .ttl { font-weight: 700; margin-bottom: 8px; }
.card p     { flex: 1 1 auto;  margin-bottom: 20px; }

.c_btn {
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  padding: 10px 30px 10px 20px;
}

.card_list .ttl .text12 {
  display: block;
  line-height: 1.2;
}

/* ======= inner_nav 共通レイアウト ======= */
.inner_nav ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 3列×2段 */
  gap: 8px 20px;
  list-style: none;
  padding: 0;
  margin: 0;
  margin-bottom: 50px;
}

/* ======= カードリンク（画像） ======= */
.inner_nav .card_link a {
  display: block;
  height: 100%;
  padding: 20px 40px;
  border-radius: 7px;
  font-weight: 700;
  text-decoration: none;
  /*color: #fff;*/
  background: var(--bg) center / cover no-repeat;
  position: relative;
  overflow: hidden;
  /* ホバー挙動の値は add.css（サイト共通）のトークンを参照 */
  transition:
    transform var(--panel-hover-duration) var(--panel-hover-easing),
    box-shadow var(--panel-hover-duration) var(--panel-hover-easing);
  border: 2px solid #e0e0e0;
}
.inner_nav .card_link a:hover {
  transform: translateY(var(--panel-hover-lift));
  box-shadow: var(--panel-hover-shadow);
}

/* ======= テキストリンク ======= */
.nav_link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    text-decoration: none;
    padding: 20px 40px;
    position: relative;
    transition: all 400ms ease;
    font-weight: 700;
    border-bottom: 1px solid #0c1a49;
}

.nav_link::after {
    font-family: 'Material Icons Round';
    content: "arrow_right_alt";
    display: inline-flex;
    vertical-align: middle;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    font-size: 16px;
    transition: all 400ms ease;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   本文リード文（太字・やや大きめ）
   旧 under-2026.css / add.css に置いていたものを exhibition フォルダへ集約。
   exhibition/index.html でのみ使用しているため exhibition.css 側に一本化する。
   ========================================================================== */
.under-main-p {
  font-weight: 700;
  font-size: 18px;
  margin-top: 1em;
  line-height: 2;
}


/* ==========================================================================
   展示エリアページ（general-exhibits / x-park / nextgen-park / global-park）専用
   .page_mv 等の共通見た目は add.css 側（Conferenceと共有）を使う。ここに置くのは
   このカテゴリでしか使わないもの（ヘッダー波の色、Sessions at ○○ Stage カルーセルの
   矢印・メタ情報、事前来場登録CTA）だけ。
   ========================================================================== */

/* 展示エリアページも .page_mv（紺）が最上部に来るため、theme.html/index.html と同じ
   ヘッダー下端の波の色差し替えが必要（元の定義は conference_preview.css 側にもある）。
   exhibition.css は exhibition/index.html・exhibitor-list.php など白背景のページでも
   読み込まれるため、.page-preview（page_mv を持つ4エリアページの body class）に
   スコープし、白背景ページの波（既定＝白）を巻き込まないようにする */
.page-preview .header-title-2026__wave::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3600 200' preserveAspectRatio='none'%3E%3Cpath fill='%230a1a4a' d='M0,120 C400,102 400,102 800,120 C1300,142.5 1300,142.5 1800,120 C2250,99.75 2250,99.75 2700,120 C3150,140.25 3150,140.25 3600,120 L3600,200 L0,200 Z'/%3E%3C/svg%3E");
}

/* 展示エリアページの「会場図面」セクション用。exhibition/index.html の
   .venue__map（exhibition_index.css）と同じ見た目をこのカテゴリでも使う */
.venue__map {
  max-width: 1200px;
  margin: 32px auto 0;
}

/* 「会場図面」セクションだけ、素の .conf-sessions グラデーション背景を外す */
.conf-sessions--plain {
  background: none;
}

/* --------------------------------------------------------------------------
   展示エリアページ下部CTA:「ほかのエリアを見る」カード3枚
   ja/conference/theme.html の「ほかのテーマを見る」（.conf-themes.theme-others /
   .conf-theme、conference_theme.css・conference_preview.css）と同じ見た目に揃える。
   展示エリア系ページは conference_theme.css / conference_preview.css を読み込まないため、
   同じ設計をここに複製している（クラス名は .area-others 系で衝突を避ける）。
   ナンバリング（ピンバッジ）は無し（ユーザー指示）。
   -------------------------------------------------------------------------- */
.area-others {
  background: var(--color-white);
}

.area-others__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 40px 64px;
  box-sizing: border-box;
}

.area-others__title {
  margin: 0;
  color: var(--ceatecblue);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.area-others__kicker {
  display: block;
  margin: 0 0 4px;
  color: var(--conf-heading);
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: normal;
  font-style: italic;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.area-others__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.area-others__item {
  display: flex;
  flex-direction: column;
  flex: 0 0 calc(33.333% - 13.334px);
  background: var(--color-white);
  border: 1px solid var(--conf-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.area-others__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px var(--conf-shadow-hover);
}

.area-others__link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}

.area-others__figure {
  margin: 0;
}

.area-others__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--conf-placeholder);
}

.area-others__body {
  padding: 16px 20px 20px;
}

.area-others__label {
  margin: 0;
  color: var(--conf-heading);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
}

@media screen and (max-width: 1119px) {
  .area-others__item {
    flex: 0 0 calc(50% - 10px);
  }
}

@media screen and (max-width: 767px) {
  .area-others__inner {
    padding: 40px 20px 48px;
  }

  .area-others__item {
    flex: 0 0 100%;
  }
}


/* 見出しは他セクション（Sessions at E Stage / Exhibitors）と同じ英字表記に揃え、
   直後に小さな日本語訳を添える（「会場図面」は Sessions/Exhibitors と違い
   一目で意味が伝わる語ではないため） */
.conf-sessions__title-ja {
  display: block;
  margin-top: 4px;
  color: var(--conf-text-sub);
  font-size: 16px;
  font-weight: 700;
}

/* 「Sessions at ○○ Stage」は Conference側のセッションデータを表示しているため、
   theme.html の Pickup Sessions（.theme-page .conf-sessions）と同じ単色の
   Conferenceカラー背景にする。直下の見出し・説明文・カード文字は白系に切り替える。
   下の「Exhibitors」セクション（Exhibition側データ）は対象外＝エリアごとの
   色を薄く敷く（.exl-area-tint、このブロックの下） */
.js-areastage-section {
  background: var(--conf-blue);
}

.js-areastage-section .conf-sessions__title {
  color: var(--color-white);
}

.js-areastage-section .conf-sessions__desc {
  color: var(--conf-white-90);
}

/* 展示エリアページの「Sessions at ○○ Stage」一覧（セッションID昇順・全件）。
   2列グリッド、各カードは左にタイトル・日時等、右にサムネイル。 */
.session-list {
  display: grid;
  /* 1fr は minmax(auto, 1fr) 相当。長いタイトル／概要の min-content で列が割れる */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

.session-list__item {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 16px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  text-decoration: none;
  transition: all 400ms ease;
}

/* .btn:hover と同じ「ふわっと浮く」モーション（サイト共通の a:hover{opacity:.7} を打ち消す） */
.session-list__item:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.14);
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0px 8px 18px 0px rgba(0, 0, 0, 0.35);
}

.session-list__body {
  flex: 1;
  min-width: 0;
}

.session-list__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0;
  color: var(--color-white);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}

.session-list__meta {
  display: block;
  margin: 6px 0 0;
  color: var(--conf-white-80);
  font-size: 12px;
  line-height: 1.5;
}

.session-list__desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 6px 0 0;
  color: var(--conf-white-80);
  font-size: 12px;
  line-height: 1.6;
}

.session-list__thumb {
  flex-shrink: 0;
  width: 128px;
  margin: 0;
  overflow: hidden;
}

.session-list__thumb img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--conf-placeholder);
}

@media screen and (max-width: 767px) {
  .session-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .session-list__thumb {
    width: 96px;
  }
}

/* 「Exhibitors」セクションの背景は、素の .conf-sessions グラデーションではなく
   各エリアのブランドカラーを20%の薄さで敷く（style.css の --xxx-rgb を使用）。
   一般展示は --ceatecblue（サイトの基本ブランドカラー）を使用。
   --exl-area-color は同じエリアカラーを不透明のまま使いたい箇所
   （.exl-tile__booth-num など）向けに、あわせて定義しておく */
.exl-area-tint--general {
  --exl-area-color: var(--ceatecblue);
  --exl-area-color-rgb: var(--ceatecblue-rgb);
  background: rgba(var(--ceatecblue-rgb), 0.2);
}

.exl-area-tint--xpark {
  --exl-area-color: var(--xpark);
  --exl-area-color-rgb: var(--xpark-rgb);
  background: rgba(var(--xpark-rgb), 0.2);
}

.exl-area-tint--nextgen {
  --exl-area-color: var(--next);
  --exl-area-color-rgb: var(--next-rgb);
  background: rgba(var(--next-rgb), 0.2);
}

.exl-area-tint--global {
  --exl-area-color: var(--global);
  --exl-area-color-rgb: var(--global-rgb);
  background: rgba(var(--global-rgb), 0.2);
}

/* .page_mv__kicker（Hall番号バッジ）は展示4エリアページで、エリアカラーのベタ塗り＋白文字に統一する。
   base の見た目（theme.html の Session Theme 0X 用）は add.css 側のまま変えず、
   このカテゴリだけに付く --xxx 修飾クラスで上書きする */
.page_mv__kicker--general,
.page_mv__kicker--xpark,
.page_mv__kicker--nextgen,
.page_mv__kicker--global {
  display: inline-block;
  color: var(--color-white);
  padding: 4px 12px;
  border-radius: 20px;
}

.page_mv__kicker--general {
  background: var(--ceatecblue);
}

.page_mv__kicker--xpark {
  background: var(--xpark);
}

.page_mv__kicker--nextgen {
  background: var(--next);
}

.page_mv__kicker--global {
  background: var(--global);
}

/* --------------------------------------------------------------------------
   事前来場登録CTA（include/cta_qr.php）のCSSは add.css に移設した。

   .regist-cta / .area-regist-cta は Conference（/{ja,en}/conference/）でも
   使うが、conference 配下は exhibition.css を読み込まないため無装飾に崩れていた。
   全ページ共通で読まれる add.css を唯一の定義元にする。修正は add.css 側で行うこと。
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   エリア内の企画紹介（左：本文 / 右：画像1枚）
   ネクストジェネレーションパークのコミュニケーションラウンジで使用。

   概要のテーブルはサイト共通の .unit_table（add.css）をそのまま使う。
   .area-feature__body の中（本文の直下）に置くと左カラムに回り込み、
   .area-feature の外に置くと従来どおり全幅になる。
   画像未入稿の間は .area-feature__figure を .area-feature__figure--empty に
   して、add.css の .area-regist-cta__qr と同じ破線プレースホルダを出す。
   実画像に差し替える際は中の <span> 2行を <img> に置き換え、修飾クラスを外す。
   -------------------------------------------------------------------------- */
.area-feature {
  /* 見出しのアクセント色。いまはネクストジェネレーションパークだけで使うので
     --next を既定にしている。他エリアで使うときはこの1行を上書きする */
  --area-feature-accent: var(--next);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 50%);
  gap: 32px;
  align-items: start;
  margin-top: 24px;
}

/* NOTE: セレクタを2クラスにしているのは、下の .area-feature__body p（0,1,1）に
   負けて font-size が効かなくなるため。単独の .area-feature__lead では勝てない */
.area-feature__body .area-feature__lead {
  margin: 0 0 16px;
  color: var(--area-feature-accent);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
}

.area-feature__body p {
  margin: 0 0 12px;
  color: var(--conf-text);
  font-size: 15px;
  line-height: 1.9;
}

.area-feature__body p:last-child {
  margin-bottom: 0;
}

.area-feature__figure {
  margin: 0;
}

.area-feature__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--exl-radius-md, 8px);
}

/* 画像未入稿のプレースホルダ */
.area-feature__figure--empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 240px;
  border: 1px dashed var(--conf-line);
  border-radius: var(--exl-radius-md, 8px);
  background: var(--conf-panel);
  color: var(--conf-text-sub);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

.area-feature__table {
  margin-top: 24px;
}

@media screen and (max-width: 767px) {
  .area-feature {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .area-feature__body .area-feature__lead {
    font-size: 18px;
  }

  .area-feature__figure--empty {
    min-height: 180px;
  }
}

/* --------------------------------------------------------------------------
   展示エリアページ: 出展者ミニグリッド（.exl-tile、area-exhibitors-mini.php）

   本体の出展者一覧（exhibitor-list.php）とは別の、画像上・社名・見どころ・
   ブース番号を並べたパネル型タイル。PCは6列固定、幅が狭くなるにつれて
   列数を落とす。色・角丸・余白のトークンは components/assets/style.css の
   --exl-* 変数を流用する（両CSSを読み込むページでのみ使う想定）。
   -------------------------------------------------------------------------- */
.exl-tiles {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 1.5em;
}

.exl-tile {
  display: flex;
  flex-direction: column;
  background: var(--exl-surface, #fff);
  border: 1px solid var(--exl-line, #e7e5e4);
  border-radius: var(--exl-radius-md, 8px);
  overflow: hidden;
}

/* 詳細ページが公開されている出展者だけ、タイル全体がリンクになる
   （area-exhibitors-mini.php）。持ち上げと全面クリック領域は add.css の共通
   .panel-hover / .panel-hover__link に任せ、ここでは枠線のホバー色だけ指定する */
.exl-tile.panel-hover {
  --panel-hover-border-color: var(--ceatecblue);
}

.exl-tile__figure {
  margin: 0;
  aspect-ratio: 4 / 3;
  background: var(--exl-ink-100, #fff);
  padding: 8px 8px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.exl-tile__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* logo の読み込みに失敗した場合（onerror）、img を隠して代わりの表示に切り替える */
.exl-tile__figure.is-noimg .exl-tile__img {
  display: none;
}

.exl-tile__noimg {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

.exl-tile__noimg-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.exl-tile__noimg-num {
  font-size: 16px;
  font-weight: 800;
}

.exl-tile__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
}

.exl-tile__name {
  margin: 0;
  color: var(--exl-ink-900, #1c1917);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}

/* ブース番号はエリアカラーのタグにする。塗りは同じ色の薄いティント。
   margin-top: auto で .exl-tile__body（flex縦積み）の残り余白を吸収し、
   見どころ文の有無で高さが違うカードでも、常にボックス下端に固定する。
   margin-left: auto があるため align-items: stretch が効かず、内容幅のまま右へ寄る */
.exl-tile__booth {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: auto 0 0 auto;
  padding: 4px 10px;
  border-radius: 999px;
  /* エリアカラーは .exl-area-tint 修飾クラスが供給する。
     修飾クラスが付いていないページ向けにサイト基本色をフォールバックに置く */
  background: rgba(var(--exl-area-color-rgb, 12, 26, 73), 0.1);
  line-height: 1.2;
}

/* 番号との差は文字サイズと太さだけで付ける。
   opacity で薄くすると、グローバルパーク(--global)のような明るいエリア色で
   薄い塗りに埋もれて読めなくなるため使わない */
.exl-tile__booth-label {
  color: var(--exl-area-color, var(--ceatecblue));
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.exl-tile__booth-num {
  color: var(--exl-area-color, var(--ceatecblue));
  font-size: 12px;
  font-weight: 800;
}

@media screen and (max-width: 1119px) {
  .exl-tiles {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .exl-tiles {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

@media screen and (max-width: 480px) {
  .exl-tiles {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --------------------------------------------------------------------------
   X（Transformation）パーク: 8つの変革テーマ / 主催者企画パビリオン
   （x-park/index.html の静的セクション）
   -------------------------------------------------------------------------- */
.xpark-themes {
  display: grid;
  /* minmax(0, 1fr): 中身の最小幅で列が押し広げられて横スクロールが出るのを防ぐ */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 1.5em 0 0;
  padding: 0;
  list-style: none;
}

/* カード自体をテーマ別の出展者ブロック（#theme-xx）へのリンクにする。
   ホバー挙動はサイト共通の .panel-hover（add.css）に任せる */
.xpark-theme {
  --panel-hover-shadow: 0 8px 20px rgba(var(--xpark-rgb), 0.28);
  --panel-hover-border-color: var(--xpark);
  display: flex;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
}

.xpark-theme__link {
  padding: 16px 18px;
}

.xpark-theme__name {
  margin: 0;
  color: var(--xpark);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}

.xpark-theme__keywords {
  margin: 8px 0 0;
  color: #57534e;
  font-size: 13px;
  line-height: 1.7;
}

/* 「出展者を見る →」はキーワードの量が違ってもカード下端に揃える */
.xpark-theme__more {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 12px 0 0;
  color: var(--xpark);
  font-size: 12px;
  font-weight: 700;
}

.xpark-theme__link .xpark-theme__more {
  margin-top: auto;
  padding-top: 12px;
}

.xpark-theme__more .material-icons {
  font-size: 16px;
}

/* 国・地域パビリオン / 主催者企画パビリオンの紹介カード。
   x-park・global-park で共用し、アクセント色だけ --area-accent で差し替える */
.area-pavilions {
  --area-accent: var(--ceatecblue);
  --area-accent-rgb: var(--ceatecblue-rgb);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 1.5em 0 0;
  padding: 0;
  list-style: none;
}

.area-pavilions--xpark {
  --area-accent: var(--xpark);
  --area-accent-rgb: var(--xpark-rgb);
}

.area-pavilions--global {
  --area-accent: var(--global);
  --area-accent-rgb: var(--global-rgb);
}

/* x-park のパビリオンカードは、館ごとのブランドカラーで色分けする。
   --area-accent はリスト側で一括指定しているので、カード単位で上書きする */
.area-pavilion--living {
  --area-accent: var(--living);
  --area-accent-rgb: var(--living-rgb);
}

.area-pavilion--marine {
  --area-accent: var(--marine);
  --area-accent-rgb: var(--marine-rgb);
}

.area-pavilion--space {
  --area-accent: var(--space);
  --area-accent-rgb: var(--space-rgb);
}

.area-pavilion--mobility {
  --area-accent: var(--mobility);
  --area-accent-rgb: var(--mobility-rgb);
}

/* カード名は白背景に載るので、明るいブランド色でも読めるよう紺を混ぜる */
.area-pavilion--living .area-pavilion__name,
.area-pavilion--marine .area-pavilion__name,
.area-pavilion--space .area-pavilion__name,
.area-pavilion--mobility .area-pavilion__name,
.area-pavilion--living .area-pavilion__more,
.area-pavilion--marine .area-pavilion__more,
.area-pavilion--space .area-pavilion__more,
.area-pavilion--mobility .area-pavilion__more {
  color: color-mix(in srgb, var(--area-accent) 65%, var(--ceatecblue));
}

.area-pavilion {
  --panel-hover-shadow: 0 8px 20px rgba(var(--area-accent-rgb), 0.28);
  --panel-hover-border-color: var(--area-accent);
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.area-pavilion__figure {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.area-pavilion__figure img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
}

.area-pavilion__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px 16px 16px;
}

.area-pavilion__name {
  margin: 0;
  /* --area-accent は明るい色もあり白背景では読みにくいため、紺を混ぜて可読性を確保する */
  color: color-mix(in srgb, var(--area-accent) 65%, var(--ceatecblue));
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
}

.area-pavilion__desc {
  margin: 8px 0 0;
  color: #57534e;
  font-size: 13px;
  line-height: 1.7;
}

.area-pavilion__more {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: auto 0 0;
  padding-top: 12px;
  color: color-mix(in srgb, var(--area-accent) 65%, var(--ceatecblue));
  font-size: 12px;
  font-weight: 700;
}

.area-pavilion__more .material-icons {
  font-size: 16px;
}

/* リンクを持たないカード（global-park の国・地域パビリオン）は、
   .panel-hover__link の代わりにこのラッパで中身を縦に積む */
.area-pavilion__inner {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* 画像が未登録・読み込み失敗のときに出す代替表示（onerror で is-noimg を付ける）。
   画像ファイルを images/ に置けば、HTML を変えずにそのまま差し替わる */
.area-pavilion__figure.is-noimg img {
  display: none;
}

.area-pavilion__noimg {
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background: rgba(var(--area-accent-rgb), 0.08);
  color: rgba(var(--area-accent-rgb), 0.45);
}

.area-pavilion__noimg .material-icons {
  font-size: 48px;
}

.area-pavilion__figure.is-noimg .area-pavilion__noimg {
  display: flex;
}

/* 「Eステージ」「一般展示」など、他エリアに出展する場合の所在地 */
.area-pavilion__where {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  align-self: flex-start;
  margin: 8px 0 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(var(--area-accent-rgb), 0.12);
  color: var(--area-accent);
  font-size: 11px;
  font-weight: 700;
}

.area-pavilion__where .material-icons {
  font-size: 13px;
}

/* 出展が未確定のパビリオン */
.area-pavilion--tbd {
  border-style: dashed;
}

.area-pavilion--tbd .area-pavilion__figure {
  opacity: 0.55;
}

.area-pavilion__tbd {
  align-self: flex-start;
  margin: 8px 0 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1efee;
  color: #78716c;
  font-size: 11px;
  font-weight: 700;
}

/* 写真・国名も含めて未定のパビリオン（例: ウクライナ）。
   カード全体を「Coming Soon」のみのプレースホルダにする */
.area-pavilion__comingsoon {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 16px;
  color: #78716c;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

@media screen and (max-width: 1119px) {
  .xpark-themes {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 539px) {
  .xpark-themes {
    grid-template-columns: 1fr;
  }
}

/* パビリオンカードは「4列で横並び、溢れたら下段」を基本にする。
   4列を保てなくなったら 3 → 2 → 1 と段階的に落とし、
   どの段でもカードの横幅が急に倍にならないようにする */
@media screen and (max-width: 1023px) {
  .area-pavilions {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 767px) {
  .area-pavilions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

@media screen and (max-width: 479px) {
  .area-pavilions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   出展者ミニグリッドのテーマ別グルーピング（area-exhibitors-mini.php）
   -------------------------------------------------------------------------- */
.exl-groups {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 1.5em;
}

/* アンカーで飛んだときに、固定ヘッダーの下に見出しが潜らないようにする */
.exl-group {
  scroll-margin-top: 120px;
}

.exl-group__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0 0 8px;
  border-bottom: 2px solid var(--exl-area-color, var(--xpark));
  color: var(--exl-area-color, var(--xpark));
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
}

.exl-group__count {
  color: #57534e;
  font-size: 13px;
  font-weight: 700;
}

/* グループ見出しのあとに続くタイルグリッドの余白 */
.exl-group > .exl-tiles {
  margin-top: 20px;
}

/* --------------------------------------------------------------------------
   スポンサーランク（プラチナ / ゴールド）の強調
   タイル上端に細いヘッダー帯 ＋ 枠線の色替えだけに留め、一覧の中で浮きすぎない
   ようにする
   -------------------------------------------------------------------------- */
.exl-tile__rank {
  margin: 0;
  padding: 3px 8px;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  line-height: 1.4;
}

.exl-tile--platinum {
  border-color: #a8b0bd;
}

.exl-tile--platinum .exl-tile__rank {
  background: linear-gradient(90deg, #9aa3b2 0%, #ccd3dd 100%);
  color: #2b3240;
}

.exl-tile--gold {
  border-color: #d9a93a;
}

.exl-tile--gold .exl-tile__rank {
  background: linear-gradient(90deg, #d9a93a 0%, #f2d78f 100%);
  color: #4a3505;
}

/* --------------------------------------------------------------------------
   主催者企画パビリオンの下層ページ（x-park/pavilion-*）
   -------------------------------------------------------------------------- */

/* メインビジュアルが未入稿・読み込み失敗のときの代替（onerror で is-noimg を付ける）。
   画像を置けば HTML を変えずにそのまま差し替わる */
.page_mv__media.is-noimg img {
  display: none;
}

.page_mv__media.is-noimg {
  background:
    radial-gradient(120% 140% at 20% 15%, rgba(var(--pavilion-color-rgb, var(--xpark-rgb)), 0.9) 0%, rgba(var(--pavilion-color-rgb, var(--xpark-rgb)), 0) 60%),
    linear-gradient(135deg, #1b2560 0%, #0c1a49 100%);
}

/* 本文まとまり（「〜とは」の説明文など） */
.pavilion-text {
  margin: 1.2em 0 0;
  font-size: 16px;
  line-height: 2;
  color: #44403c;
}

/* About の本文＋右側の写真の2列組み */
.pavilion-about {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin: 1.2em 0 0;
}

.pavilion-about .pavilion-text {
  flex: 1 1 auto;
  margin-top: 0;
}

.pavilion-about__figure {
  flex: 0 0 40%;
  margin: 0;
  overflow: hidden;
}

.pavilion-about__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 1023px) {
  .pavilion-about {
    flex-direction: column;
  }

  .pavilion-about__figure {
    flex-basis: auto;
    width: 100%;
  }
}

/* 参画事業者リスト。1社1パネルで、左に詳細・右にロゴの2列に組む */
/* PC は横2列。1社ぶんのパネル幅が狭くなるので、
   ロゴ枠はフル幅1列だったときより絞る */
.pavilion-orgs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 横に並ぶ2社のパネルの高さを揃える。説明文の量は社ごとに違うが、
     白いパネルの下端が不揃いになるより、高さを合わせて整列させる */
  align-items: stretch;
  gap: 16px;
  margin: 1.5em 0 0;
  padding: 0;
  list-style: none;
}

/* 社名＋テーマをロゴと横並びにし、説明文だけ全幅に落とす。
   .pavilion-org__body は display:contents で読み飛ばし、
   中の見出し・段落を直接このグリッドのアイテムにする */
.pavilion-org {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  grid-template-areas:
    "name  figure"
    "theme figure"
    "msg   msg"
    "link  link";
  column-gap: 20px;
  align-items: start;
  padding: 20px 24px;
  background: #fff;
}

.pavilion-org__body {
  display: contents;
}

.pavilion-org__name {
  grid-area: name;
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--pavilion-ink, var(--xpark));
}

/* 出展テーマ。社名より一段小さく、本文より目立たせる */
.pavilion-org__theme {
  grid-area: theme;
  margin: 10px 0 0;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--ceatecblue);
}

.pavilion-org__msg {
  grid-area: msg;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.95;
  color: #57534e;
}

/* 出展者ID。テーマ文言と同じ枠（grid-area: theme）を使うので、
   テーマ未入稿のパビリオンでも1・2列レイアウトはそのまま自動で切り替わる */
.pavilion-org__id {
  grid-area: theme;
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #78716c;
}

/* 出展者詳細ページへの導線。パネル最下段に全幅で置く。
   テーマ・説明がある社でも重ならないよう専用の行（grid-area: link）を使う */
.pavilion-org__link {
  grid-area: link;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid #efedec;
  font-size: 12px;
}

.pavilion-org__link-id {
  color: #78716c;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pavilion-org__link a {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: var(--pavilion-ink, var(--xpark));
  font-weight: 700;
}

.pavilion-org__link a:hover {
  text-decoration: underline;
}

.pavilion-org__link .material-icons {
  font-size: 14px;
}

/* テーマ・説明がまだ入稿されていない（社名とロゴだけの）パビリオンは、
   1社1行のままだと縦に間延びするので 2列に組んで高さも詰める。
   説明文が1件でも入った時点で通常の1列レイアウトへ自動的に戻る */
/* テーマ・説明がまだ入稿されていない（社名とロゴだけの）パビリオンは、
   縦の空きが目立つのでパネルの高さを詰める */
.pavilion-orgs:not(:has(.pavilion-org__msg)) .pavilion-org {
  grid-template-columns: minmax(0, 1fr) 140px;
  padding: 16px 20px;
}

.pavilion-orgs:not(:has(.pavilion-org__msg)) .pavilion-org__name {
  font-size: 16px;
}

.pavilion-orgs:not(:has(.pavilion-org__msg)) .pavilion-org__figure {
  min-height: 72px;
  padding: 10px;
}

.pavilion-orgs:not(:has(.pavilion-org__msg)) .pavilion-org__logo {
  max-height: 72px;
}

/* タブレット以下は1列。パネル内も縦積みにしてロゴを上に出す */
@media screen and (max-width: 1023px) {
  .pavilion-orgs {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ロゴ枠。ロゴは縦横比がばらばらなので contain で収める。
   grid-area で社名＋テーマの2行ぶんに重ね、その高さの中で縦中央に置く */
.pavilion-org__figure {
  display: flex;
  grid-area: figure;
  align-self: center;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 120px;
  padding: 16px;
  border: 1px solid #efedec;
  background: #fff;
}

.pavilion-org__logo {
  display: block;
  width: 100%;
  max-height: 120px;
  object-fit: contain;
}

.pavilion-org__figure.is-noimg .pavilion-org__logo {
  display: none;
}

.pavilion-org__noimg {
  display: none;
  color: rgba(var(--pavilion-color-rgb, var(--xpark-rgb)), 0.45);
}

.pavilion-org__figure.is-noimg .pavilion-org__noimg {
  display: block;
}

.pavilion-org__noimg .material-icons {
  font-size: 44px;
}

/* 会場図面が未入稿・読み込み失敗のときの代替（onerror で is-noimg を付ける） */
.venue__map.is-noimg img {
  display: none;
}

.venue__map.is-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  border: 1px dashed #d6d3d1;
  border-radius: 8px;
  background: rgba(var(--pavilion-color-rgb, var(--xpark-rgb)), 0.06);
  color: rgba(var(--pavilion-color-rgb, var(--xpark-rgb)), 0.45);
}

.venue__map-noimg {
  display: none;
}

.venue__map.is-noimg .venue__map-noimg {
  display: block;
}

.venue__map-noimg .material-icons {
  font-size: 56px;
}

/* 会場図面の下に置く「会場全体を見る」導線 */
.pavilion-maplink-wrap {
  margin: 16px 0 0;
  text-align: center;
}

/* 注目プログラムのミニ MV（背景画像＋グラデーション）。会場図面と同じ is-noimg フォールバックパターン */
.pavilion-program-mv {
  position: relative;
  overflow: hidden;
  margin: 20px 0 0;
  aspect-ratio: 16 / 6;
  background: var(--conf-navy);
}

.pavilion-program-mv img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pavilion-program-mv::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--conf-navy-deep-rgb), 0) 45%, rgba(var(--conf-navy-deep-rgb), 0.6) 100%);
  pointer-events: none;
}

.pavilion-program-mv.is-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: auto;
  min-height: 200px;
  border: 1px dashed #d6d3d1;
  background: rgba(var(--pavilion-color-rgb, var(--xpark-rgb)), 0.06);
}

.pavilion-program-mv.is-noimg img {
  display: none;
}

.pavilion-program-mv.is-noimg::after {
  content: none;
}

/* 注目プログラム（出展者共創企画等）: 見出し＋画像＋本文＋CTAボタンを縦に並べる、
   通常の記事レイアウト。画像はリンクではないので角丸をつけない */
.program_inner {
  margin-top: 20px;
}

.pavilion-program__title {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--pavilion-ink, var(--xpark));
}

.program_inner .program_body {
  display: flex;
  align-items: flex-start;
  gap: 30px;
  margin: 20px 0 0;
}

.program_inner .program_main {
  flex: 1 1 auto;
  min-width: 0;
}

.program_inner .program_desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

.program_inner .program_org {
  margin: 16px 0 0;
  padding: 0;
}

.program_inner .program_org_item {
  display: flex;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: #777;
}

.program_inner .program_org_item + .program_org_item {
  margin-top: 4px;
}

.program_inner .program_org_item dt {
  flex-shrink: 0;
  margin: 0;
  font-weight: 400;
  color: #888;
}

.program_inner .program_org_item dd {
  margin: 0;
  color: #777;
}

.program_inner .program_img {
  flex: 0 0 280px;
  margin: 0;
}

.program_inner .program_img img {
  display: block;
  width: 100%;
  height: auto;
}

.program_inner .program_sns {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.program_inner .program_sns a {
  color: var(--pavilion-ink, var(--xpark));
  font-weight: 700;
  text-decoration: underline;
}

.program_inner .link_area {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 24px 0 0;
}

/* .btn は margin-left/right:auto を持つため、flex の中に2つ以上並べると
   余white を吸って左右の端まで引き離されてしまう。中央にまとめるため打ち消す */
.program_inner .link_area .btn {
  margin-left: 0;
  margin-right: 0;
}

@media screen and (max-width: 767px) {
  .program_inner .program_body {
    flex-direction: column;
    gap: 20px;
  }

  .program_inner .program_img {
    flex: none;
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .pavilion-program-mv {
    aspect-ratio: 4 / 3;
  }

  .pavilion-org {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "figure"
      "name"
      "theme"
      "msg";
    padding: 20px;
  }

  /* 社名だけのパネルも SP では縦積みに揃える
     （.pavilion-orgs:not(:has(...)) の指定の方が詳細度が高いので個別に打ち消す） */
  .pavilion-orgs:not(:has(.pavilion-org__msg)) .pavilion-org {
    grid-template-columns: minmax(0, 1fr);
  }

  /* SP はロゴを先頭に出して、どの社の記事かひと目で分かるようにする。
     grid-template-areas 側で先頭に並べたので order は不要 */
  .pavilion-org__figure {
    min-height: 96px;
    margin-bottom: 16px;
  }

  .pavilion-org__name {
    font-size: 18px;
  }
}

/* --------------------------------------------------------------------------
   主催者企画パビリオンのテーマカラー
   <main class="pavilion-page pavilion-page--living"> のように付けると、
   そのページのパビリオン系コンポーネントが館ごとの色に切り替わる。
   未指定のページは従来どおり X パークの紫にフォールバックする。

   --pavilion-color … 罫線・背景・バッジなど「面」に使うブランド色そのまま
   --pavilion-ink   … 文字に使う色。ブランド色は明るく白背景で読みづらいものが
                       あるため、紺を混ぜて可読性を確保した派生色
   -------------------------------------------------------------------------- */
.pavilion-page {
  --pavilion-color: var(--xpark);
  --pavilion-color-rgb: var(--xpark-rgb);
  --pavilion-ink: color-mix(in srgb, var(--pavilion-color) 65%, var(--ceatecblue));
}

.pavilion-page--living {
  --pavilion-color: var(--living);
  --pavilion-color-rgb: var(--living-rgb);
}

.pavilion-page--marine {
  --pavilion-color: var(--marine);
  --pavilion-color-rgb: var(--marine-rgb);
}

.pavilion-page--space {
  --pavilion-color: var(--space);
  --pavilion-color-rgb: var(--space-rgb);
}

.pavilion-page--mobility {
  --pavilion-color: var(--mobility);
  --pavilion-color-rgb: var(--mobility-rgb);
}

/* パビリオン色を薄く敷くセクション（.exl-area-tint--xpark の館別版） */
.pavilion-tint {
  background: rgba(var(--pavilion-color-rgb), 0.12);
}

/* MV の「主催者企画パビリオン」バッジ */
.pavilion-page .page_mv__kicker--xpark {
  background: var(--pavilion-color);
  color: #fff;
}

/* --------------------------------------------------------------------------
   パビリオン下層ページ先頭の「ほかの主催者企画パビリオン」カードリンク
   （include/pavilion_nav.php が nav_2026.php の第三階層から自動生成）
   ja/conference/theme.html の「ほかのテーマを見る」と同じカード型に揃えている
   -------------------------------------------------------------------------- */
.pavilion-switch {
  padding: 40px 0;
}

.pavilion-switch__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
}

.pavilion-switch__title {
  margin: 0;
  color: var(--ceatecblue);
  font-size: 24px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

/* 見出しの上に乗せる小さな英字 */
.pavilion-switch__kicker {
  display: block;
  margin: 0 0 4px;
  color: #1c4d8d;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: normal;
  font-style: italic;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.pavilion-switch__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 20px;
  column-gap: 20px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

/* 自分以外の3件が1行に収まる幅 */
.pavilion-switch__item {
  display: flex;
  flex: 0 0 calc(33.333% - 13.334px);
}

.pavilion-switch__link {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--panel-hover-duration) var(--panel-hover-easing),
    box-shadow var(--panel-hover-duration) var(--panel-hover-easing);
}

@media (hover: hover) {
  a.pavilion-switch__link:hover {
    /* サイト共通の a:hover{opacity:.7} は写真が濁るので打ち消す */
    opacity: 1;
    transform: translateY(var(--panel-hover-lift));
    box-shadow: var(--panel-hover-shadow);
  }
}

.pavilion-switch__figure {
  margin: 0;
}

.pavilion-switch__figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #eef1f5;
}

/* 画像未登録でも 16:9 の枠が残るようにしておく */
.pavilion-switch__figure:empty {
  aspect-ratio: 16 / 9;
  background: #eef1f5;
}

.pavilion-switch__body {
  padding: 16px 20px 20px;
}

.pavilion-switch__num {
  display: block;
  margin: 0;
  color: #738ba3;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  font-weight: normal;
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pavilion-switch__name {
  margin: 4px 0 0;
  color: #1c4d8d;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
}

/* まだ公開していないパビリオン（nav_2026.php の 'live' => false） */
.pavilion-switch__link.is-comingsoon {
  background: #fafaf9;
}

.pavilion-switch__link.is-comingsoon .pavilion-switch__figure img {
  opacity: 0.5;
}

.pavilion-switch__link.is-comingsoon .pavilion-switch__name {
  color: #a8a29e;
}

.pavilion-switch__soon {
  display: inline-block;
  margin: 8px 0 0;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f1efee;
  color: #78716c;
  font-size: 11px;
  font-weight: 700;
}

@media screen and (max-width: 1023px) {
  .pavilion-switch__item {
    flex-basis: calc(50% - 10px);
  }
}

@media screen and (max-width: 599px) {
  .pavilion-switch {
    padding: 28px 0;
  }

  .pavilion-switch__inner {
    padding: 0 20px;
  }

  .pavilion-switch__item {
    flex-basis: 100%;
  }

  .pavilion-switch__name {
    font-size: 17px;
  }
}

/* --------------------------------------------------------------------------
   パビリオン下層ページ: The Themes（3つの切り口カード）
   -------------------------------------------------------------------------- */
.pavilion-themes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 1.5em 0 0;
  padding: 0;
  list-style: none;
}

.pavilion-theme {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border: 1px solid #e0e0e0;
  border-top: 3px solid var(--pavilion-color, var(--xpark));
  border-radius: 8px;
  background: #fff;
}

.pavilion-theme__name {
  margin: 0;
  color: var(--pavilion-ink, var(--xpark));
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
}

.pavilion-theme__lead {
  margin: 10px 0 0;
  color: var(--ceatecblue);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}

.pavilion-theme__desc {
  margin: 12px 0 0;
  color: #57534e;
  font-size: 14px;
  line-height: 1.9;
}

/* --------------------------------------------------------------------------
   パビリオン下層ページ: Featured Session（注目セッション1件の紹介）
   カードはセッション詳細ページへのリンク（<a>）。左に情報、右にサムネイル画像を
   置く2カラム構成。左端の色線（border-left）は縦積みの本文と喧嘩して見えたため、
   .area-pavilion 等ほかのパビリオンカードと同じ「枠線のみ・hoverで色付く」形に統一
   -------------------------------------------------------------------------- */
.pavilion-session {
  --panel-hover-shadow: 0 8px 20px rgba(var(--pavilion-color-rgb, var(--xpark-rgb)), 0.28);
  --panel-hover-border-color: var(--pavilion-color, var(--xpark));
  display: flex;
  align-items: stretch;
  gap: 32px;
  margin: 1.5em 0 0;
  padding: 28px 32px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  color: inherit;
}

.pavilion-session__body {
  flex: 1 1 auto;
  min-width: 0;
}

.pavilion-session__title {
  margin: 0;
  color: var(--ceatecblue);
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
}

/* 日時・場所。ラベル幅を固定して値の頭を揃える */
.pavilion-session__meta {
  display: grid;
  grid-template-columns: 5em 1fr;
  gap: 6px 16px;
  margin: 16px 0 0;
}

.pavilion-session__meta dt {
  color: #78716c;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
}

.pavilion-session__meta dd {
  margin: 0;
  color: #1c1917;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
}

.pavilion-session__desc {
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 1px solid #efedec;
  color: #57534e;
  font-size: 14px;
  line-height: 1.95;
}

.pavilion-session__more {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 16px 0 0;
  color: var(--pavilion-ink, var(--xpark));
  font-size: 13px;
  font-weight: 700;
}

.pavilion-session__more .material-icons {
  font-size: 16px;
}

.pavilion-session__figure {
  display: flex;
  flex: 0 0 320px;
  align-items: center;
  justify-content: center;
  margin: 0;
  border-radius: 8px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: rgba(var(--pavilion-color-rgb, var(--xpark-rgb)), 0.06);
}

.pavilion-session__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pavilion-session__figure.is-noimg img {
  display: none;
}

.pavilion-session__noimg {
  display: none;
  color: rgba(var(--pavilion-color-rgb, var(--xpark-rgb)), 0.45);
}

.pavilion-session__figure.is-noimg .pavilion-session__noimg {
  display: block;
}

.pavilion-session__noimg .material-icons {
  font-size: 44px;
}

/* 参画事業者セクション内の小見出し（詳細紹介の下に置く出展者一覧など） */
.pavilion-orgs-sub {
  margin: 48px 0 0;
  color: var(--pavilion-ink, var(--xpark));
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

.pavilion-orgs-sub + .exl-tiles {
  margin-top: 16px;
}

/* 出展者一覧の静的テキストリスト。ロゴを持たないぶん、社名だけを2〜3列で並べる。
   社名の右に出展者IDを添える（詳細ページはIDで引くため、突き合わせに使える） */
.pavilion-orgs-list {
  columns: 3;
  column-gap: 32px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.pavilion-orgs-list li {
  /* 段組みの途中で1項目が分断されないようにする */
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 8px 0;
  border-bottom: 1px solid #efedec;
  font-size: 14px;
  line-height: 1.6;
}

.pavilion-orgs-list a {
  color: var(--conf-text, #1f2f59);
  font-weight: 700;
}

.pavilion-orgs-list a:hover {
  color: var(--pavilion-ink, var(--xpark));
  text-decoration: underline;
}

.pavilion-orgs-list__id {
  color: #78716c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

@media screen and (max-width: 1023px) {
  .pavilion-orgs-list {
    columns: 2;
  }
}

@media screen and (max-width: 639px) {
  .pavilion-orgs-list {
    columns: 1;
  }
}

/* 「（五十音順）」のような一覧の並び順の注記。見出しが中央寄せなので合わせる */
.pavilion-orgs-note {
  margin: 10px 0 0;
  color: #78716c;
  font-size: 12px;
  text-align: center;
}

@media screen and (max-width: 1023px) {
  .pavilion-themes {
    grid-template-columns: minmax(0, 1fr);
  }

  .pavilion-session {
    flex-direction: column;
  }

  .pavilion-session__figure {
    flex-basis: auto;
    width: 100%;
    aspect-ratio: 16 / 9;
  }
}

@media screen and (max-width: 767px) {
  .pavilion-session {
    padding: 20px;
  }

  .pavilion-session__title {
    font-size: 17px;
  }

  .pavilion-session__meta {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  .pavilion-session__meta dd {
    margin-bottom: 8px;
  }
}

/* --------------------------------------------------------------------------
   セクション見出し（大きな英字を背面に敷くタイプ）
   ja/conference/ の .conf-themes__head と同じ見た目。あちらの定義は
   conference_preview.css にあり、展示エリア系ページは読み込んでいないため、
   同じ設計をこちらにも持たせている（クラス名は衝突しないよう別にする）
   -------------------------------------------------------------------------- */
.sec-head {
  display: grid;
  grid-template-areas: "stack";
  /* minmax(0, 1fr): 列幅を「中で一番広い要素（＝nowrap の英字）」ではなく
     コンテナ幅に固定する。これが無いと長いラベルのとき列が広がり、
     見出しまで右へずれてはみ出す */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  width: 100%;
}

.sec-head__bg,
.sec-head__title {
  grid-area: stack;
  justify-self: center;
  align-self: center;
}

/* 背面の英字。装飾なので読み上げ対象から外す（HTML 側で aria-hidden） */
.sec-head__bg {
  margin: 0;
  margin-top: -20px;
  /* 「Participating Organizations」のような長いラベルは 1 行だと見切れるので、
     コンテナ幅で折り返して全文が読めるようにする（nowrap にしないこと） */
  width: 100%;
  color: rgba(31, 47, 89, 0.09);
  font-family: "Montserrat", sans-serif;
  font-size: 120px;
  font-weight: 300;
  font-style: italic;
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-align: center;
  pointer-events: none;
  z-index: 0;
}

.sec-head__title {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 2em 0 0;
  color: var(--ceatecblue);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.55;
  text-align: center;
}

/* 英語は見出しが長くなりがちなので、折り返し幅を絞って重なりを避ける */
.en .sec-head__title {
  max-width: min(920px, 100%);
}

.en .sec-head__bg {
  margin-top: -40px;
}

/* 見出し直下の説明文も中央寄せに合わせる */
.sec-head + .conf-sessions__desc {
  margin-top: 16px;
  text-align: center;
}

@media screen and (max-width: 1119px) {
  .sec-head__bg {
    font-size: 80px;
  }

  .sec-head__title {
    font-size: 24px;
  }
}

@media screen and (max-width: 767px) {
  .sec-head__bg {
    margin-top: -32px;
    /* 一番長い単語（Organizations）が 360px 幅でも 1 行に収まるよう、
       狭い画面では文字サイズをビューポート追従にする */
    font-size: min(48px, 12vw);
  }

  .sec-head__title {
    margin-top: 1.4em;
    font-size: 20px;
  }
}