/* components/section-heading.css — セクション見出し（Figma: SectionHeading）
   中央寄せ。見出し上に積み木4色アイコンの装飾。 */

/* 見出し→次要素の余白はコンポーネント側で持たず、各セクションのレイアウトに委ねる
   （flex/grid の gap で管理。gap を持たないブロック組みのセクションのみ、各ページCSSで
   `<container> > .c-heading { margin-bottom }` を付与する）。
   ※ かつて margin-block:0 32px を持っていたが、gap レイアウトの節で gap に加算され
   　 二重に余白が出る不具合があったため撤去した。 */
.c-heading {
  text-align: center;
}

/* 積み木4色クレヨン（heading-crayon.png・共通素材）。Figma忠実版。 */
.c-heading__icons {
  display: inline-block;
  width: 88px; height: 57px; /* heading-crayon.png 175×114 の比率 */
  margin-bottom: var(--space-16);
  background: url("../../images/common/heading-crayon.png") center / contain no-repeat;
  vertical-align: bottom;
}

/* 英語の小ラベル（"Instagram" 等の英字見出し用） */
.c-heading__eyebrow {
  display: block;
  color: var(--color-accent);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-8);
}

.c-heading__title {
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-brown-text);
  margin: 0;
}

/* タイトルをリンク化した場合（例: トップの Instagram 見出し）。
   見出しの見た目は保ち、ホバーで軽く反応させる。 */
.c-heading__title-link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.c-heading__title-link:hover,
.c-heading__title-link:focus-visible {
  opacity: 0.7;
}

.c-heading__lead {
  margin-top: var(--space-16);
  margin-bottom: 0;
  color: var(--color-brown-text);
  font-weight: var(--font-weight-bold); /* Figma: 18.29_bold（Noto Sans JP Bold/700）*/
}

/* --- SP（〜768px）共通: 見出しをトップページ SP に合わせて縮小 -------------
   トップは .top スコープで同値を持つが、全ページで統一感を出すため共通化する。
   Figma SP: セクション見出し＝18.29px（h3）／積み木アイコン＝64×42px。 */
@media (max-width: 768px) {
  .c-heading__title { font-size: var(--font-size-h3); }      /* 32px → 18.29px */
  .c-heading__icons {
    width: 64px;
    height: 42px;
    margin-bottom: var(--space-4);
  }
  .c-heading__lead { font-size: var(--font-size-h5); }       /* リード文も小さく */
}