/*
 * 説明ページ共通: ステップ型タイムライン・計算式ボックス・注記・強調文。
 * BEM風で、任意のコンテンツで再利用可（プレフィックス cg- = content guide）。
 */
.cg-timeline {
  display: table;
  width: 100%;
  margin: 1em 0;
  table-layout: fixed;
}

.cg-timeline-item {
  display: table-cell;
  border: 1px solid #8bc34a;
  border-left: 0;
  padding: 1em;
  vertical-align: top;
  background: #f8fff2;
}

.cg-timeline-item:first-child {
  border-left: 1px solid #8bc34a;
}

.cg-timeline-heading {
  display: block;
  margin-bottom: 0.5em;
  font-weight: bold;
  color: #4c8b1f;
}

.cg-note {
  margin-top: 0.8em;
  padding: 0.9em;
  border-left: 4px solid #8bc34a;
  background: #f8fff2;
}

.cg-emphasis {
  color: #d32f2f;
  font-size: 1.15em;
  font-weight: bold;
}

.cg-formula {
  margin: 1em 0;
  padding: 1em;
  border: 1px solid #e0e0e0;
  background: #fffdf7;
}

.cg-formula-title {
  margin-bottom: 0.8em;
  font-weight: bold;
}

.cg-formula-row {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.cg-formula-cell,
.cg-formula-op,
.cg-formula-result {
  display: table-cell;
  padding: 0.8em;
  text-align: center;
  vertical-align: middle;
}

.cg-formula-cell {
  border: 1px solid #8bc34a;
  background: #f8fff2;
}

.cg-formula-op {
  width: 3em;
  font-weight: bold;
}

.cg-formula-result {
  border: 1px solid #d32f2f;
  background: #fff3f3;
  color: #d32f2f;
  font-weight: bold;
}

.cg-formula-label {
  display: block;
  margin-bottom: 0.3em;
  color: #555;
  font-size: 0.9em;
}

@media (max-width: 767px) {
  .cg-timeline {
    display: block;
  }

  .cg-timeline-item {
    display: block;
    border-left: 1px solid #8bc34a;
    border-top: 0;
  }

  .cg-timeline-item:first-child {
    border-top: 1px solid #8bc34a;
  }

  .cg-formula-row {
    display: block;
  }

  .cg-formula-cell,
  .cg-formula-op,
  .cg-formula-result {
    display: block;
    width: auto;
  }

  .cg-formula-op {
    padding: 0.3em;
  }
}