@charset "UTF-8";
.venue__map {
    max-width: 1000px;
    margin: 32px auto 0;
}
/* 展示エリア一覧: 3列 / 3列 / 2列（残り1列ぶんは空白）（エリアごとのテーマカラーを枠線・背景色に反映） */
.list_area {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}

.list_area > li {
  --area-color: var(--ceatecblue);
  position: relative;
  border: 1px solid color-mix(in srgb, var(--area-color) 20%, #fff);
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--area-color) 3%, #fff);
}

.list_area > li:nth-child(1) { --area-color: #0c1a49; } /* 一般展示 */
.list_area > li:nth-child(2) { --area-color: #7C3AED; } /* X（Transformation）パーク */
.list_area > li:nth-child(3) { --area-color: #E53ABC; } /* ネクストジェネレーションパーク */
.list_area > li:nth-child(4) { --area-color: #00D2B4; } /* グローバルパーク */
.list_area > li:nth-child(5) { --area-color: #2E86C1; } /* コンファレンス */

/* 画像は枠の縁ギリギリまで（padding無し）。説明文側だけに padding をつける。
   角丸のクリップは画像側だけに掛け、ピンバッジ（li 基準で配置）が
   上にはみ出しても切れないようにする */
.list_area__figure {
  margin: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
}

.list_area__figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.list_area__body {
  padding: 12px 24px 24px;
}

/* エリア番号バッジ: 地図ピンの形を SVG で塗りつぶし描画（Material Icons の
   place は中心が丸くくり抜かれているため不採用）、円形の頭の部分に
   01 / 02 ... の数字を重ねる。色はエリアカラーを踏襲。
   ピンは元サイズ（44px）の4倍。数字書体は ja/about/ の Pillars と同じ
   （Montserrat / 300 / italic / 72px）に合わせる */
.list_area__num {
  display: contents;
}

.list_area__num-pin {
  position: absolute;
  top: -10px;
  left: 5px;
  display: block;
  width: 65px;
  height: 100px;
  fill: var(--area-color);
  /* filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); */
}

.list_area__num-text {
  position: absolute;
  top: 10px;
  left: 0px;
  width: 70px;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  font-size: 36px;
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  color: #fff;
}

/* under-content 配下の共通見出しスタイル（style.css）は
   ".under-content h3" 相当のセレクタでも掛かってくるため、
   .under-h3 クラスに頼らず、ツリー構造で詳細度を上げて打ち消す */
.under-content .list_area .list_area__body h3 {
  padding-top: 0;
  font-size: 20px;
  font-weight: 800;
  color: var(--area-color);
  word-break: keep-all;
}
.list_area .under-h3 .nowrap,
.list_area h3 .nowrap {
  white-space: nowrap;
}

.under-content .list_area .list_area__body h4 {
  font-size: 16px;
  font-weight: 800;
  color: var(--ceatecblue);
  margin: 0.7em 0 0.25em;
}

/* 3列化でカード自体が狭いため、.unit_table（主催者企画パビリオン）は
   ビューポート幅ではなくこのカードの中では常に1カラム（縦積み）にする。
   カードが狭いぶん余白も詰めて罫線も無しにする。
   style.css の全体リセット（html, body, ... dl, dt, dd, ... { font-size:16px }）が
   dt/dd に直接 font-size を効かせているため、.unit_table（親）側に指定しても
   継承では勝てない。dt/dd を直接指定して打ち消す */
.list_area .unit_table {
  grid-template-columns: 1fr;
}
.under-content .list_area .list_area__body .unit_table dt,
.under-content .list_area .list_area__body .unit_table dd {
  font-size: 14px;
  border-bottom: none;
}
.list_area .unit_table dt {
  padding: 8px 0 2px;
}
.list_area .unit_table dd {
  padding: 0 0 8px;
}

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

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