/*
 * PREM-523: LegacyPageLayout 補完スタイル
 *
 * 旧 global.css は "body #contents .p-unione" セレクタでフォント等を設定しているが、
 * このページ構成には #contents ラッパーがないため適用されない。
 * 同等のスタイルをここで補完する。
 */
.p-unione {
  --_font-regular: "HondaGlobalFontJP-Regular", sans-serif;
  --_font-bold: "HondaGlobalFontJP-Bold", sans-serif;
  font-family: "HondaGlobalFontJP-Light", sans-serif;
  font-weight: 300;
}

.p-unione .u-sr-none {
  display: none;
}

@media only screen and (min-width: 1024px) {
  .p-unione .u-sr-none {
    display: block;
  }
  .p-unione .u-pc-none {
    display: none;
  }
}

.p-unione #how-to-ride {
  scroll-margin-top: 16vw;
}

@media only screen and (min-width: 769px) {
  .p-unione #how-to-ride {
    scroll-margin-top: 108px;
  }
}

/*
 * rem 値の補正:
 * 旧 HTML の CSS は html { font-size: 16px } 基準（1rem = 16px）で書かれているが、
 * 本プロジェクトは html { font-size: 62.5% }（1rem = 10px）のため
 * rem を使っている箇所が小さく表示されてしまう。px で上書きして補正する。
 */

/* faq/index.css: .p-unione .c-faq-card { margin-bottom: 1rem } */
.p-unione .c-faq-card {
  margin-bottom: 16px;
}

/* faq/index.css: .p-unione .c-faq-card .c-faq-card__question div { gap: .5rem } */
.p-unione .c-faq-card .c-faq-card__question div {
  gap: 8px;
}

/* single/index.css: .t-post-contents .tk-heading:where(h1,...,h6) { font-size: 1rem } */
.t-post-contents .tk-heading:where(h1, h2, h3, h4, h5, h6) {
  font-size: 16px;
}