/* ============================================================
   Monodsukuri Media — 固定ページ共通（page-templates/*）
   ============================================================ */

/* ---- Feature Cards（特徴・メリット 3カラム） ---------------- */
.feature-grid { margin-top: var(--sp-md); }

.feature-card {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: var(--sp-md);
  box-shadow: var(--shadow-sm);
}

.feature-card__num {
  display: block;
  font-family: var(--font-en);
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: .5em;
}

.feature-card__title {
  font-size: 1.1rem;
  margin-bottom: .6em;
}

.feature-card p {
  font-size: .9rem;
  color: var(--color-text-sub);
  line-height: 1.9;
}

/* ---- Flow List（流れ） ------------------------------------- */
.flow-list {
  counter-reset: flow;
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.flow-item {
  counter-increment: flow;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .2em;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: 1.1rem 1.4rem 1.1rem 4.4rem;
  box-shadow: var(--shadow-sm);
}

.flow-item::before {
  content: counter(flow, decimal-leading-zero);
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-en);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--color-primary);
}

.flow-item strong { font-size: 1.02rem; }

.flow-item span {
  font-size: .88rem;
  color: var(--color-text-sub);
}

/* ---- Check List ------------------------------------------- */
.check-list {
  max-width: 620px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.check-list li {
  position: relative;
  padding: .9rem 1.2rem .9rem 2.8rem;
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  font-weight: 500;
}

.check-list li::before {
  content: '✓';
  position: absolute;
  left: 1.1rem;
  color: var(--color-primary);
  font-weight: 900;
}

/* ---- Info Table（開催情報・運営者情報） --------------------- */
.info-table {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.info-table th,
.info-table td {
  padding: 1rem 1.4rem;
  border-bottom: 1px solid var(--color-border-light);
  text-align: left;
  font-size: .95rem;
  vertical-align: top;
}

.info-table tr:last-child th,
.info-table tr:last-child td { border-bottom: none; }

.info-table th {
  width: 9em;
  background: var(--color-bg-light);
  font-weight: 700;
  white-space: nowrap;
}

.info-table a { color: var(--color-accent-blue); text-decoration: underline; }

/* ---- FAQ --------------------------------------------------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-sm);
}

.faq-item {
  background: var(--color-bg);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.5rem;
  box-shadow: var(--shadow-sm);
}

.faq-item dt {
  position: relative;
  font-weight: 700;
  padding-left: 1.8em;
  margin-bottom: .5em;
}

.faq-item dt::before {
  content: 'Q';
  position: absolute;
  left: 0;
  font-family: var(--font-en);
  font-weight: 800;
  color: var(--color-primary);
}

.faq-item dd {
  position: relative;
  padding-left: 1.8em;
  font-size: .92rem;
  color: var(--color-text-sub);
}

.faq-item dd::before {
  content: 'A';
  position: absolute;
  left: 0;
  font-family: var(--font-en);
  font-weight: 800;
  color: var(--color-accent-blue);
}

/* ---- Contact Cards ----------------------------------------- */
.contact-grid { margin-top: var(--sp-md); }

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .6rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  padding: var(--sp-md);
  box-shadow: var(--shadow-sm);
}

.contact-card__title { font-size: 1.05rem; }

.contact-card p {
  font-size: .88rem;
  color: var(--color-text-sub);
  flex-grow: 1;
}

/* ---- Policy ------------------------------------------------ */
.policy-date {
  margin-top: 2.5em;
  font-size: .85rem;
  color: var(--color-text-sub);
  text-align: right;
}

@media (max-width: 600px) {
  .flow-item { padding-left: 3.6rem; }
  .flow-item::before { left: .9rem; }
  .info-table th { width: 7em; padding: .8rem .9rem; }
  .info-table td { padding: .8rem .9rem; }
}