/* =========================================================
   固定ページ「辛子明太子の公正マークとは？」専用CSS

   対象ページ：
   /kiwamentai-kosei-mark/

   対象class：
   sanraku-kosei-mark

   共通部分：
   /assets/css/sanraku-common.css
   ========================================================= */


/* ------------------------------
   ヒーロー見出し
------------------------------ */

/*
 * 「辛子明太子の」と「公正マークとは？」を
 * それぞれ独立した行として表示する。
 *
 * 共通CSSでは960px以下でinlineへ変更されるため、
 * このページだけblockへ戻す。
 */
.sanraku-kosei-mark .sr-hero-title-line,
.sanraku-kosei-mark .sr-hero-title-brand {
  display: block;
}

/*
 * 「公正マークとは？」が
 * 「公正マークと／は？」に分かれるのを防ぐ。
 */
.sanraku-kosei-mark .sr-hero-title-brand {
  margin-top: 4px;
  font-size: clamp(32px, 3.2vw, 48px);
  letter-spacing: 0.04em;
  white-space: nowrap;
}


/* ------------------------------
   公正競争規約の三つの基準
------------------------------ */

/*
 * PCだけ横3列にする。
 *
 * 960px以下は共通CSSの1列表示をそのまま使用するため、
 * このファイルでは重複して指定しない。
 */
@media (min-width: 961px) {
  .sanraku-kosei-mark .sr-brand-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}