/* モン類ページ専用。全体へ展開するときは用途別ブロック単位で移植する。 */

/* ページ全体の文字サイズと縦方向の余白 */
.mon-type-page main {
  font-size: 14px;
  line-height: 1.7;
}

.mon-type-page .page-title {
  margin-bottom: 36px;
  font-size: 22px;
}

.mon-type-page .section-title {
  margin-bottom: 24px;
  font-size: 18px;
}

.mon-type-page .section > h3 {
  margin: 30px 0 14px;
  font-size: 15px;
  line-height: 1.5;
}

.mon-type-page .section > h3:first-of-type {
  margin-top: 8px;
}

/* 血統グループ */
.mon-type-page .mon-type-blood-group + .mon-type-blood-group {
  margin-top: 46px;
}

.mon-type-page .mon-type-blood-title {
  margin: 32px 0 20px;
  font-size: 16px;
  line-height: 1.5;
}

/* 血統ページへの導線。見た目はモンスター詳細の血統導線と同じ menu-link に任せ、
   ここでは位置と余白だけを持つ。見出しの横に並べるとSPで折り返しが乱れるため、
   PC・SPとも血統名の下の行に置く */
.mon-type-page .mon-type-blood-skill-nav {
  /* 1列だけの導線なので、style.css の auto-fill 1fr ではなく内容幅で止める。
     1fr のままだと列幅が足りずラベルが2行に折り返す */
  grid-template-columns: minmax(0, max-content);
  margin: 0 0 24px;
}

.mon-type-page .mon-type-grid {
  align-items: stretch;
}

.mon-type-page .mon-type-grid + .mon-type-grid {
  margin-top: 16px;
}

/* 副血統テキスト行。直前のバッジ行との間に余白を持たせる */
.mon-type-page .mon-type-card-meta {
  margin-top: 6px;
}

/* SP: 解説あり1列。解説なしの縦型カードは style.css の .mon-card-grid が3列を持つ */
@media (max-width: 640px) {
  .mon-type-page main {
    font-size: 13px;
  }

  .mon-type-page .page-title {
    margin-bottom: 30px;
    font-size: 18px;
  }

  .mon-type-page .section-title {
    margin-bottom: 20px;
    font-size: 16px;
  }

  .mon-type-page .section > h3 {
    margin: 26px 0 12px;
    font-size: 14px;
  }

  .mon-type-page .mon-type-blood-group + .mon-type-blood-group {
    margin-top: 38px;
  }

  .mon-type-page .mon-type-blood-title {
    margin: 28px 0 16px;
    font-size: 14px;
  }

  .mon-type-page .mon-type-blood-skill-nav {
    margin-bottom: 20px;
  }
}