@charset "UTF-8";

/* ==========================================================================
   出展者ページでできること（ja/exhibition/exhibitor-guide.html）専用
   ページ幅・見出し・ボタンなどの大枠は共通CSS（style.css / add.css）に任せ、
   ここにはこのページ固有の部品だけを置く。
   body class の .exhibitor-guide にスコープする。
   ========================================================================== */

/* ---------- 見出しルールの詳細度について ----------
   style.css の下層共通見出し（.under-content h3 / .under-h3 / h4 / h5 …）は
   環境によって :not(.exl-root *):not(.page_block_title) のように :not() が増えて
   詳細度 (0,4,0) 前後になる。このページの見出しサイズ指定がそれに負けないよう、
   font-size を触るセレクタは「.exhibitor-guide .under-content 〜 タグ.クラス」の形
   （詳細度 0,4,1 以上）で書く。 */

/* ---------- 共通見出しの padding-top を無効化 ----------
   style.css の .under-content h3 / .under-h3 が付ける padding-top:1.15em は、
   カード内・帯の直下など「先頭要素として上に余白を作りたくない」場面が多いこのページでは
   一律不要なため、ページ全体でまとめて打ち消す（個別要素側の margin/padding は
   各コンポーネントのルールに任せる） */
.exhibitor-guide .under-content h3:not(.exl-root *),
.exhibitor-guide .under-content .under-h3:not(.exl-root *) {
  padding-top: 0;
}

/* ---------- MV（ヒーロー） ----------
   .page_mv / .page_mv__media / .page_mv__inner / .page_mv__title / .page_mv__body は
   add.css 側の共通コンポーネント（コンファレンス プレビュー、一般展示等と共有）を
   そのまま使うため、ここでは定義しない。
   .page-preview 用のヘッダー下端の波の色差し替えだけ、ここに用意する
   （exhibition.css 側の同名ルールは exhibitor-guide.html では読み込んでいないため） */
.exhibitor-guide .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");
}

/* ---------- 本文中のテキストリンク ---------- */
.exhibitor-guide .exg_link {
  color: var(--lightblue);
  text-decoration: underline;
}

/* ==========================================================================
   3つの活用ポイント
   コンファレンス プレビューの「The Themes」（.conf-themes 一式、conference_preview.css）の
   見出し・余白・文字サイズを踏襲したテキストカード（写真なし）。
   番号（.exg_point_num）はアクセント色の数字そのものをカード上端の罫線にまたがせる（英字ラベルは無し）。
   各カードは下の活用方法1〜3へのページ内アンカーで、下部にアンカーナビと分かる
   「詳しく見る ＋ 丸囲み下矢印」ボタン（.exg_point_more、サイト共通 .nav_anc のアイコン語法）を置く。
   ========================================================================== */
.exhibitor-guide .exg_points {
  position: relative;
  overflow-x: hidden;
  margin-top: 48px;
  background: var(--color-white);
}

.exhibitor-guide .exg_points_inner {
  position: relative;
}

.exhibitor-guide .exg_points_head {
  display: grid;
  grid-template-areas: "stack";
  justify-items: center;
  align-items: center;
  width: 100%;
}

.exhibitor-guide .exg_points_bg,
.exhibitor-guide .under-content .exg_points_head h3.exg_points_title {
  grid-area: stack;
  justify-self: center;
  align-self: center;
}

.exhibitor-guide .exg_points_bg {
  margin: 0;
  margin-top: -30px;
  width: max-content;
  max-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: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}

/* 共通見出し（32px）を打ち消し、.conf-themes__title と同じ数値に揃える。
   padding-top はページ冒頭の一括ルールで既に0 */
.exhibitor-guide .under-content .exg_points_head h3.exg_points_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;
}

.exhibitor-guide .exg_points_title-num {
  font-size: 46px;
}

.exhibitor-guide .exg_points_desc {
  margin: 16px 0 0;
  color: var(--conf-text-body);
  font-size: 14px;
  line-height: 1.9;
  text-align: center;
}

/* 3列（.conf-themes__list は3列+2列だが、こちらは3件ぴったりなので常に3列） */
.exhibitor-guide .exg_points_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* 番号バッジがカード上端から 22px はみ出すので、行間と上マージンはそのぶん広く取る */
  row-gap: 40px;
  column-gap: 20px;
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
}

/* このページ独自のアクセントカラー。3つの活用ポイント／3つの活用方法セクションに
   共通で使い、カード⇔本文セクションが同じ色で結びついていると分かるようにする。
   このページ専用の3色（ピンク → CEATEC ブルー → グリーン）。

   選定条件:
   - 白背景の文字色にも、白文字を載せる塗りにも使うため、白とのコントラスト比は
     いずれも 4.5:1 以上を確保する。色を差し替えるときは必ず両方向で確認すること
   - 展示エリアカラー（--global #00D2B4 / --conference #2E86C1 / --xpark #7C3AED）と
     見分けがつくこと。02 は「CEATEC ブルー」の指定だが、--conference は白との比が
     3.97:1 で不足するため、サイトの基準色である --ceatecblue（紺）を使う

   変更履歴（いずれもユーザー指定）:
     緑 #24b0a4 / 青 #2e85c7 / 紫 #805bcb（エリアカラーと似ていて不可）
     → 暖色 琥珀 #A05A00 / テラコッタ #C0491F / ローズ #A83E63（2026-08-23）
     → ピンク / CEATEC ブルー / グリーン（2026-08-23、現行）
     さらに旧: 緑 #0b8260 → #3f9d80 / 青 #2e86c1 → #4e97cf / 紫 #6e4cb3 → #8f73c8 */
.exhibitor-guide {
  --exg-accent-1: #C2185B;              /* お気に入り（レッド寄りピンク）白背景とのコントラスト 5.87:1 */
  --exg-accent-2: var(--ceatecblue);    /* コンタクト（CEATEC ブルー #0c1a49）   同 16.67:1 */
  --exg-accent-3: #2E7D32;              /* 製品・動画・資料（グリーン）          同 5.13:1 */
  /* ページ内の角丸は全部この値（3 POINTS カード、機能ブロック、画像、仮枠）。.btn の 8px とも揃う */
  --exg-radius: 8px;
}

.exhibitor-guide .exg_point:nth-child(1) { --exg-accent: var(--exg-accent-1); }
.exhibitor-guide .exg_point:nth-child(2) { --exg-accent: var(--exg-accent-2); }
.exhibitor-guide .exg_point:nth-child(3) { --exg-accent: var(--exg-accent-3); }

.exhibitor-guide .exg_point {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 calc(33.333% - 13.334px);
  background: var(--color-white);
  border: 1px solid color-mix(in srgb, var(--exg-accent) 28%, var(--conf-border));
  border-radius: var(--exg-radius);
  /* overflow:hidden は付けない（番号バッジがカード上端からはみ出すため） */
  transition: border-color 250ms ease, box-shadow 250ms ease;
}

.exhibitor-guide .exg_point:hover {
  border-color: color-mix(in srgb, var(--exg-accent) 60%, var(--conf-border));
  box-shadow: 0 6px 18px rgba(12, 26, 73, 0.10);
}

.exhibitor-guide .exg_point_link {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}

/* 番号: アクセント色の Montserrat イタリック数字を、カード上端の罫線にまたがる位置に絶対配置
   （基準は position:relative の .exg_point）。数字の背後だけ白地を敷いて罫線を抜き、
   線が数字を横切らないようにする */
.exhibitor-guide .exg_point_num {
  position: absolute;
  top: -22px;
  left: 10px;
  z-index: 1;
  padding: 0 8px;
  background: var(--color-white);
  color: var(--exg-accent);
  font-family: "Montserrat", sans-serif;
  font-size: 47px;
  font-weight: 600;
  font-style: italic;
  line-height: 1;
}

/* 本文の上パディングは数字の食い込み分（約18px）＋余白 */
.exhibitor-guide .exg_point_body {
  flex: 1 1 auto;
  padding: 30px 20px 14px;
}

/* 共通の .under-content h4（28px）のサイズだけ打ち消し、.conf-theme__title と同じ数値に揃える。
   色は同じカードの番号（.exg_point_num）と同じアクセント色にして、
   01/02/03 と見出しが一組であることが分かるようにする。
   ※ 3色とも白背景で 4.5:1 以上あるため、この用途でも可読性は確保できる */
.exhibitor-guide .under-content .exg_point h4.exg_point_title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.4;
  color: var(--exg-accent);
}

.exhibitor-guide .exg_point_desc {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--conf-text-muted);
  text-align: left;
}

/* ページ内アンカーだと分かるボタン。カード全体が <a> なので中身は <span>。
   丸囲みの下矢印はサイト共通のアンカーナビ（add.css .nav_anc li a::before）と同じ語法 */
.exhibitor-guide .exg_point_more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin: 0 20px 20px;
  padding: 6px 16px 6px 8px;
  border: 1px solid var(--exg-accent);
  border-radius: 999px;
  color: var(--exg-accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  transition: background-color 250ms ease, color 250ms ease;
}

.exhibitor-guide .exg_point_more::before {
  content: "arrow_downward";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: normal;
}

.exhibitor-guide .exg_point_link:hover .exg_point_more {
  background-color: var(--exg-accent);
  color: #fff;
}

/* ==========================================================================
   活用方法ブロック（大くくり）
   3 POINTS と同じアクセントカラーを見出しの左ボーダーに踏襲する。それ以外は
   通常の縦積みブロック（レール列・接続ラインは無し）
   ========================================================================== */
/* 兄弟要素の並び（nth-of-type等）に依存すると .exg_points（同じ<section>）の
   混在で数え間違えやすいため、id で確実に指定する */
.exhibitor-guide #usage01.exg_usage { --exg-accent: var(--exg-accent-1); }
.exhibitor-guide #usage02.exg_usage { --exg-accent: var(--exg-accent-2); }
.exhibitor-guide #usage03.exg_usage { --exg-accent: var(--exg-accent-3); }

.exhibitor-guide .exg_usage {
  margin-top: 72px;
  /* 固定ヘッダーの高さぶん、ページ内アンカーの着地位置を下げる */
  scroll-margin-top: 120px;
}

.exhibitor-guide .exg_usage_head {
  padding: 4px 0 4px 18px;
  border-left: 8px solid var(--exg-accent);
}

.exhibitor-guide .exg_usage_num {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--exg-accent);
}

/* padding-top はページ冒頭の一括ルールで既に0。ここではサイズだけ調整する */
.exhibitor-guide .under-content .exg_usage_head h3.exg_usage_title {
  font-size: 26px;
  line-height: 1.5;
}

.exhibitor-guide .exg_usage_lead {
  margin: 16px 0 28px;
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.9;
}

/* ==========================================================================
   機能ブロック（ヘッダー帯 + 左テキスト・右画像の2カラム）
   ========================================================================== */
.exhibitor-guide .exg_feature {
  margin-bottom: 24px;
  border: 1px solid #d7dbe6;
  border-radius: var(--exg-radius);
  background-color: #fff;
  overflow: hidden;
}

.exhibitor-guide .exg_feature:last-child {
  margin-bottom: 0;
}

/* 帯の背景はそのセクションのアクセント色の単色（--exg-accent は #usage01〜03 で定義）。
   当初はページタイトル帯（.page-title-2026）と同じ紺→青の固定グラデーションだったが、
   活用方法見出し（左ボーダー・ラベル）のアクセント色と色味がちぐはぐになるため、
   見出しと同じ色に揃えて活用方法1=緑・2=青・3=紫とする。
   グラデーション（紺を混ぜる／白を混ぜる）も試したが濁って見えるため単色に落ち着いた */
.exhibitor-guide .exg_feature_head {
  padding: 14px 28px 16px;
  background: var(--exg-accent);
  color: #fff;
}

.exhibitor-guide .exg_feature_en {
  margin: 0 0 2px;
  font-family: "Montserrat", sans-serif;
  font-size: 11px;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.75);
}

/* 共通の .under-content h4（28px・紺）を帯用サイズ・白に上書きする */
.exhibitor-guide .under-content .exg_feature_head h4.exg_feature_title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  line-height: 1.4;
  color: #fff;
}

.exhibitor-guide .exg_feature_title .material-icons {
  flex: 0 0 auto;
}

.exhibitor-guide .exg_feature_body {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.exhibitor-guide .exg_feature_text {
  padding: 28px;
}

/* 共通の h5（20px）に、このページ用の下線アクセントを足す。
   下線の色も帯と同じくセクションのアクセント色にして、ブロック内の色味を揃える */
.exhibitor-guide .under-content .exg_feature_text h5.exg_feature_sub {
  margin: 0 0 14px;
  color: var(--ceatecblue);
}

.exhibitor-guide .exg_feature_text p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.9;
}

.exhibitor-guide .exg_feature_text p:last-child {
  margin-bottom: 0;
}

.exhibitor-guide .exg_feature_note {
  font-size: 13px;
  color: #666;
}

/* 補足ノート（マイページ機能について の mg_note と同じ見た目） */
.exhibitor-guide .exg_note {
  margin: 0 0 14px;
  padding: 14px 18px;
  background-color: #f5f6fa;
  font-size: 14px;
  line-height: 1.8;
}

.exhibitor-guide .exg_btn_row {
  margin-top: 20px;
}

/* 公開前ボタン（2026-09-15 公開予定）。
   マークアップは a ではなく span.btn.ded（add.css のグレー配色）を使う。
   .btn:hover は要素種別を問わず transform で浮き上がるため、押せないボタンが
   動いてしまう。privacy.css の body.privacy .btn.ded と同じ考え方で止める */
.exhibitor-guide .btn.ded {
  pointer-events: none;
}

.exhibitor-guide .exg_soon_note {
  margin: 8px 0 0;
  color: var(--conf-text-sub, #5a6a8a);
  font-size: 12px;
  line-height: 1.6;
}

/* ---------- 画像カラム ---------- */
.exhibitor-guide .exg_feature_fig {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 24px;
  background-color: #f5f6fa;
}

.exhibitor-guide .exg_feature_fig img {
  display: block;
  width: 100%;
  height: auto;
  /* border: 1px solid #d7dbe6; */
  border-radius: var(--exg-radius);
  background-color: #fff;
}

.exhibitor-guide .exg_feature_fig figcaption {
  margin-top: 8px;
  font-size: 13px;
  color: #666;
  text-align: center;
}

/* キャプチャ配置までの仮枠 */
.exhibitor-guide .exg_fig_placeholder {
  width: 100%;
  padding: 56px 24px;
  border-radius: var(--exg-radius);
  background-color: #fff;
  color: #8a90a2;
  font-size: 14px;
  line-height: 1.8;
  text-align: center;
  box-sizing: border-box;
}

/* ==========================================================================
   CTA
   ========================================================================== */
.exhibitor-guide .exg_cta_wrap {
  margin: 56px 0 0;
  text-align: center;
}

.exhibitor-guide .exg_cta {
  margin: 0;
}

.exhibitor-guide .exg_cta_btn {
  display: inline-block;
  width: 100%;
  max-width: 420px;
  padding: 14px 24px;
  font-size: 17px;
}

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media screen and (max-width: 1024px) {
  /* 3カラムだとカードが窮屈になるため、先に画像カラムを縦積みへ */
  .exhibitor-guide .exg_feature_body {
    grid-template-columns: 1fr;
  }

  .exhibitor-guide .exg_feature_fig {
    border-left: none;
    border-top: 1px solid #e6e9f2;
  }
}

/* .conf-themes と同じ 1119px ブレークポイント。見出しまわりの数値は .conf-themes に合わせるが、
   カードは 3 件なので「2列＋1列（1件だけ孤立）」にはせず、3列が入らなくなった時点で縦1列に落とす */
@media screen and (max-width: 1119px) {
  .exhibitor-guide .exg_points_bg {
    font-size: 80px;
  }

  .exhibitor-guide .under-content .exg_points_head h3.exg_points_title {
    font-size: 24px;
  }

  .exhibitor-guide .exg_points_title-num {
    font-size: 32px;
  }

  .exhibitor-guide .exg_point {
    flex-basis: 100%;
  }
}

@media screen and (max-width: 767px) {
  /* .conf-themes の767px以下（縦1列）と同じ数値 */
  .exhibitor-guide .exg_points {
    margin-top: 0;
  }

  .exhibitor-guide .exg_points_inner {
    padding: 0;
  }

  .exhibitor-guide .exg_points_bg {
    font-size: 48px;
    margin-top: -15px;
  }

  .exhibitor-guide .under-content .exg_points_head h3.exg_points_title {
    line-height: 1.2;
  }

  .exhibitor-guide .exg_points_desc {
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.8;
  }

  .exhibitor-guide .exg_points_list {
    row-gap: 26px;
    margin-top: 32px;
  }

  .exhibitor-guide .exg_point {
    flex-basis: 100%;
  }

  .exhibitor-guide .exg_point_num {
    top: -19px;
    font-size: 34px;
  }

  .exhibitor-guide .exg_point_body {
    padding-top: 26px;
  }

  .exhibitor-guide .exg_usage {
    margin-top: 56px;
    scroll-margin-top: 90px;
  }

  .exhibitor-guide .under-content .exg_usage_head h3.exg_usage_title {
    font-size: 21px;
  }

  .exhibitor-guide .exg_usage_lead {
    padding-left: 0;
    font-size: 15px;
  }

  .exhibitor-guide .exg_feature_head {
    padding: 12px 20px 14px;
  }

  .exhibitor-guide .under-content .exg_feature_head h4.exg_feature_title {
    font-size: 16px;
  }

  .exhibitor-guide .exg_feature_text {
    padding: 20px;
  }

  .exhibitor-guide .exg_feature_fig {
    padding: 20px;
  }
}

/* スマホ（450px以下）だけ有効にする改行。見出し「出展者ページ3つの活用方法」を
   「出展者ページ」で折り返すために使う。それ以外の幅では改行しない。
   ※ この2ルールを消すと <br class="exg_br-sp"> が全幅で改行してしまうので残すこと */
.exhibitor-guide .exg_br-sp {
  display: none;
}

@media screen and (max-width: 450px) {
  .exhibitor-guide .exg_br-sp {
    display: inline;
  }
}

@media screen and (max-width: 480px) {
  /* 活用方法の見出し。767px以下のブロックでも 21px にしているが、
     480px以下では必ず 21px になるようここでも明示する（ユーザー指定） */
  .exhibitor-guide .under-content .exg_usage_head h3.exg_usage_title {
    font-size: 21px;
  }

  .exhibitor-guide .exg_note {
    padding: 12px 14px;
    font-size: 13px;
  }

  .exhibitor-guide .exg_cta_btn {
    font-size: 15px;
  }

  .exhibitor-guide .exg_points_bg {
    margin-top: -40px;
  }
}