/* ==========================================
   ツクセカ - オンラインイベント機能 説明ページ専用スタイル
   （front_common.css / about.css / features.css を併用）
   ========================================== */

/* ── 導入リード文 ── */
.eg-lead {
  max-width: 820px;
  margin: 0 auto;
  font-size: 16px;
  line-height: 1.9;
  text-align: center;
  color: var(--gray-text);
}
.eg-lead strong { color: var(--primary-green); }

/* ── パンくず ── */
.eg-breadcrumb {
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: var(--spacing-md) var(--spacing-md) 0;
  font-size: 13px;
  opacity: 0.85;
}
.eg-breadcrumb a { color: var(--primary-green); }

/* ── 本文中のテキストリンクは常に下線表示（リンクと分かるように） ──
   ボタン（.btn）・ナビカード（.eg-card / .eg-cross__item）は対象外 */
.eg-breadcrumb a,
main a:not(.btn):not(.eg-card):not(.eg-cross__item) {
  text-decoration: underline;
}

/* ── タグ（[主催者向け] 等のバッジ） ── */
.eg-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--secondary-green);
  color: #33691e;
  margin-bottom: var(--spacing-sm);
}
.eg-tag--owner  { background: #FFE0B2; color: #e65100; }
.eg-tag--circle { background: #BBDEFB; color: #0d47a1; }
.eg-tag--guest  { background: #E1BEE7; color: #4a148c; }

/* ── トップページのナビカード ── */
.eg-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  margin-top: var(--spacing-lg);
}
.eg-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: var(--transition-base);
  color: var(--gray-text);
}
.eg-card:hover { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14); }
.eg-card__thumb {
  aspect-ratio: 16 / 10;
  background: #fff;
  overflow: hidden;
}
.eg-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.eg-card__body { padding: var(--spacing-md); display: flex; flex-direction: column; flex: 1; }
.eg-card__title { font-size: 20px; font-weight: 700; margin-bottom: var(--spacing-xs); }
.eg-card__text { font-size: 14px; line-height: 1.7; opacity: 0.9; flex: 1; }
.eg-card__more { margin-top: var(--spacing-sm); font-weight: 700; color: var(--primary-green); }

/* ── 画像つき解説（figure） ── */
.eg-figure {
  margin: 0;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
/* 画像は角丸なし・背景白（背景透過のスプライトシート画像が暗背景で潰れないように） */
.eg-figure img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #fff;
}
.eg-figure figcaption {
  padding: 12px 16px;
  font-size: 13px;
  color: #666;
  line-height: 1.7;
  border-top: 1px solid #eee;
  background: #fafafa;
}
.eg-figure figcaption strong { color: var(--gray-text); }

/* 横並びの図（各図を最大260px程度に抑え、はみ出さない・スマホで折り返す） */
.eg-figure-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-lg);
  justify-content: center;
  margin-top: var(--spacing-md);
}
.eg-figure-row .eg-figure { flex: 1 1 240px; max-width: 260px; }

/* feature-detail（features.css）併用時、画像枠の見た目を会場向けに統一（角丸なし・背景白） */
.eg-media__img {
  width: 100%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #fff;
}

/* ── コールアウト（注意・ヒント・ポイント） ── */
.eg-callout {
  border-radius: var(--radius-sm);
  padding: var(--spacing-md);
  margin: var(--spacing-md) 0;
  line-height: 1.8;
  background: #f8f9fa;
  border-left: 10px solid #ccc; /* 左アクセントは太め固定（細線は使わない） */
}
.eg-callout__title { font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.eg-callout--tip  { background: #f1f8e9; border-left-color: var(--primary-green); }
.eg-callout--info { background: #e3f2fd; border-left-color: #2196f3; }
.eg-callout--warn { background: #fff8e1; border-left-color: #ffb300; }

/* ── ペルソナ別セクション（feature ページ） ── */
.eg-persona {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}
.eg-persona__head { display: flex; align-items: center; gap: 14px; margin-bottom: var(--spacing-md); }
.eg-persona__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--light-beige);
}
.eg-persona__icon .svg-ico { width: 30px; height: 30px; color: var(--accent-brown); }
.eg-persona__name { font-size: 22px; font-weight: 700; }
.eg-persona__role { font-size: 13px; opacity: 0.75; }
.eg-persona__list { list-style: none; padding: 0; margin: 0; }
.eg-persona__list li {
  position: relative;
  padding: 10px 0 10px 28px;
  border-bottom: 1px solid #f0f0f0;
  line-height: 1.7;
}
.eg-persona__list li:last-child { border-bottom: none; }
.eg-persona__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 17px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--secondary-green);
}
.eg-persona__list strong { color: var(--gray-text); }

/* ── 手順ステップ ── */
.eg-steps { counter-reset: egstep; list-style: none; padding: 0; margin: var(--spacing-md) 0; }
.eg-steps li { position: relative; padding: 4px 0 18px 52px; line-height: 1.8; }
.eg-steps li::before {
  counter-increment: egstep;
  content: counter(egstep);
  position: absolute;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary-green);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── 仕様テーブル ── */
.eg-spec {
  width: 100%;
  border-collapse: collapse;
  margin: var(--spacing-sm) 0;
  background: #fff;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.eg-spec th, .eg-spec td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #eee; font-size: 14px; }
.eg-spec th { width: 40%; background: #f7f4ec; font-weight: 700; }
.eg-spec tr:last-child th, .eg-spec tr:last-child td { border-bottom: none; }

/* ── サンプル素材のダウンロードボタン ── */
.eg-dl { margin-top: var(--spacing-md); }
.eg-dl .btn { display: inline-flex; align-items: center; gap: 8px; }
.eg-dl__note { font-size: 12px; color: #888; margin-top: 6px; }

/* ── 下部クロスリンク ── */
.eg-cross {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}
.eg-cross__item {
  display: block;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  color: var(--gray-text);
  transition: var(--transition-base);
  border: 2px solid transparent;
}
.eg-cross__item:hover { border-color: var(--primary-green); transform: translateY(-3px); }
.eg-cross__label { font-size: 12px; font-weight: 700; color: var(--primary-green); }
.eg-cross__title { font-size: 16px; font-weight: 700; margin-top: 4px; }

/* ── CTAボタンの並び ── */
.eg-cta-row {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--spacing-lg);
}

@media (max-width: 768px) {
  .eg-persona { padding: var(--spacing-md); }
  .eg-steps li { padding-left: 46px; }
}