@charset "UTF-8";

/* 出展者ページでできること（epg_ = exhibitor guide） */

.epg {
  padding: 0 0 48px;
}

/* ---------------------------------
   Hero
---------------------------------- */
.epg_hero {
  margin-bottom: 30px;
}

.epg_lead {
  margin: 0;
  max-width: 760px;
  line-height: 1.8;
  font-size: 15px;
  color: #444;
}

/* ---------------------------------
   3 POINTS ナビ
---------------------------------- */
.epg_points {
  margin-bottom: 56px;
  background: #fff8ef;
  padding: 30px 20px;
  border-radius: 10px;
}

.epg_points_title {
  margin: 0 0 32px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-yellow);
}

.epg_points_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.epg_points_item {
  position: relative;
}

.epg_points_item a {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 28px 20px 68px;
  background: #fff;
  border: 1px solid #ffe3bf;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
  text-decoration: none;
  color: inherit;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
}

.epg_points_item a:hover,
.epg_points_item a:focus-visible {
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.epg_points_num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--color-yellow);
  /* border: 2px solid var(    --color-yellow); */
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}

/* 画像は仮パス（後日、背景透過の差し替え画像を配置） */
.epg_points_icon {
  display: block;
  height: 72px;
  margin: 16px 0 18px;
}

.epg_points_icon img {
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.epg_points_h {
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-yellow);
}

.epg_points_txt {
  flex-grow: 1;
  margin-bottom: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #555;
  text-align: left;
}

.epg_points_btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 26px;
  border: 1.5px solid var(--color-yellow);
  border-radius: 50px;
  background: #fff;
  color: var(--color-yellow);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.3s ease, color 0.3s ease;
}

.epg_points_btn i {
  transform: rotate(90deg);
}

.epg_points_item a:hover .epg_points_btn,
.epg_points_item a:focus-visible .epg_points_btn {
  background: var(--color-yellow);
  color: #fff;
}

/* ---------------------------------
   活用方法（usage）ブロック
---------------------------------- */
.epg_usage_wrap {
  margin-bottom: 8px;
}

.epg_usage {
  margin-bottom: 56px;
  scroll-margin-top: 100px;
}

.epg_usage:last-child {
  margin-bottom: 0;
}

/* 活用方法ごとのアクセントカラー */
.epg_usage--blue {
  --usage-accent: var(--color-blue);
  --usage-accent-soft: #7db2f5;
  --usage-tint: #f7fbff;
}

.epg_usage--green {
  --usage-accent: var(--color-green);
  --usage-accent-soft: #5bd6ac;
  --usage-tint: #f8fffd;
}

.epg_usage--pink {
  --usage-accent: var(--color-pink);
  --usage-accent-soft: #f49ac2;
  --usage-tint: #fffafd;
}

.epg_usage_head {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 18px;
}

.epg_usage_num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  background: var(--color-primary);
  border-radius: 50%;
}

.epg_usage_num_label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
}

.epg_usage_num_digit {
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

.epg_usage_h {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-primary);
}

.epg_usage_lead {
  margin: 0 0 24px;
  line-height: 1.8;
  font-size: 15px;
  color: #444;
}

.epg_usage_lead a {
  color: var(--color-blue);
  text-decoration: underline;
}

/* ---------------------------------
   機能（feature）ブロック
---------------------------------- */
.epg_feature {
  margin-bottom: 20px;
  padding: 32px;
  background: var(--usage-tint, #f7fbff);
  border: 1px solid var(--usage-accent, var(--color-blue));
  border-radius: 10px;
}

.epg_feature:last-child {
  margin-bottom: 0;
}

.epg_feature_top {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 3px solid var(--usage-accent-soft, var(--color-blue));
}

.epg_feature_body {
  display: grid;
  grid-template-columns: 6fr 4fr;
  align-items: center;
  gap: 25px;
}

.epg_feature_text {
  display: flex;
  flex-direction: column;
}

.epg_feature_h {
  display: flex;
  align-items: center;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--usage-accent, var(--color-primary));
}

.epg_feature_h i {
  margin-right: 0.5em;
  flex-shrink: 0;
}

.epg_feature_text p.epg_feature_h2 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: #333;
}

.epg_feature_text p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.8;
  color: #444;
}

.epg_feature_note {
  font-size: 12px;
  color: #888;
}

.epg_feature_links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.epg_feature_btn {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5em;
  margin-top: 6px;
  padding: 10px 24px;
  border-radius: 50px;
  background: var(--usage-accent, var(--color-primary));
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity 0.2s;
}

.epg_feature_btn:hover {
  opacity: 0.85;
}

/* 公開前（close）: グレー表示・矢印非表示・押下不可 */
.epg_feature_btn.is-close,
.epg_feature_btn.is-close:hover {
  background: #bdbdbd;
  color: #fff;
  opacity: 1;
  cursor: default;
  pointer-events: none;
}

.epg_feature_btn.is-close i {
  display: none;
}

.epg_feature_fig {
  margin: 0;
}

.epg_feature_fig img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14);
}

/* ---------------------------------
   コントロールパネル説明
---------------------------------- */
.epg_panel {
  margin: 56px 0;
  padding: 48px 24px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 12px;
}

.epg_panel_inner {
  max-width: 1000px;
  margin: 0 auto;
}

.epg_panel_title {
  margin: 0 0 16px;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
}

.epg_panel_lead {
  margin: 0 0 32px;
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
  color: #d7dee8;
}

.epg_panel_lead strong {
  color: var(--color-yellow);
}

/* コントロールパネルのデザインイメージ（別途デザインしたものを画像で差し込む想定） */
.epg_panel_visual {
  margin: 0 0 8px;
}

.epg_panel_visual img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* /ja/forvisitors/mypage_guide/ の .mg_overview_note と同じ扱い */
.epg_panel_visual_note {
  margin: -4px 0 24px;
  text-align: right;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.55);
}

.epg_panel_features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* .exb26-glass-card（TOP/出展メリットで使用しているリキッドガラス）に、
   左のカラーバーだけこちら独自で追加 */
.epg_panel_feature {
  padding: 18px 22px;
  border-left: 5px solid var(--color-yellow);
}

.epg_panel_feature h4 {
  display: flex;
  align-items: center;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-yellow);
}

.epg_panel_feature h4 i {
  margin-right: 0.5em;
}

.epg_panel_feature p {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: #e2e7ee;
}

/* ---------------------------------
   関連リンク
---------------------------------- */
.epg_related {
  padding-top: 32px;
  border-top: 1px solid #eee;
}

.epg_related_title {
  margin: 0 0 16px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
}

.epg_related_list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.epg_related_list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 700;
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;
}

.epg_related_list a:hover {
  background: #f5f7fa;
}

/* ----------------------------
レスポンシブ調整
----------------------------- */
@media screen and (max-width: 900px) {
  .epg_points_list {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .epg_feature_body {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .epg_panel_features {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 600px) {
  .epg_usage_lead {
    padding-left: 0;
  }

  .epg_feature {
    padding: 20px;
  }

  .epg_panel {
    padding: 32px 16px;
  }

  .epg_related_list {
    grid-template-columns: 1fr;
  }
}