/**
 * J-CATのような「小さな英字ラベル・適度な明朝見出し・広い行間」を参考にした、
 * UFB DUAL全ページ共通の文字バランス調整です。
 */
:root {
  --ufb-font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --ufb-font-serif: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --ufb-font-en: "Crimson Pro", "Times New Roman", serif;
}

body {
  font-family: var(--ufb-font-ja);
  font-size: 17px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.section-index,
.hero-kicker,
.story-eyebrow,
.ufb-product__eyebrow,
.ufb-detail__label,
.ufb-promise__index,
.ufb-promise__kicker,
.ufb-promise__label,
.ufb-trust__header > p,
.ufb-trust__grid article > p,
.ufb-order-flow__header > p,
.meter-contact-eyebrow,
.simple-contact-index,
.guide-kicker,
.guide-label {
  font-family: var(--ufb-font-ja) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  letter-spacing: .16em !important;
}

.hero h1 {
  font-family: var(--ufb-font-serif) !important;
  font-size: clamp(38px, 5vw, 68px) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.22 !important;
  letter-spacing: .04em !important;
}

.hero-copy > p {
  margin-top: 34px !important;
  font-size: clamp(16px, 1.25vw, 18px) !important;
  line-height: 2 !important;
  letter-spacing: .14em !important;
}

.manifesto h2 {
  font-family: var(--ufb-font-serif) !important;
  font-size: clamp(28px, 3vw, 42px) !important;
  line-height: 1.55 !important;
  letter-spacing: .05em !important;
}

.manifesto div > p,
.story-text,
.ufb-promise__lead,
.ufb-promise__description,
.ufb-trust__header > span,
.ufb-order-flow__header > span,
.meter-contact-lead,
.simple-contact-lead {
  font-size: 17px !important;
  line-height: 2 !important;
  letter-spacing: .04em !important;
}

.story h2 {
  font-family: var(--ufb-font-serif) !important;
  font-size: clamp(30px, 3.6vw, 48px) !important;
  line-height: 1.45 !important;
  letter-spacing: .05em !important;
}

.story-number,
.ufb-promise__number {
  font-family: var(--ufb-font-en) !important;
  font-weight: 300 !important;
  letter-spacing: .03em !important;
}

.closing h2 {
  font-family: var(--ufb-font-en) !important;
  font-size: clamp(34px, 4.2vw, 56px) !important;
  font-weight: 300 !important;
  line-height: 1.02 !important;
  letter-spacing: .01em !important;
}

.closing > p:not(.section-index) {
  font-size: 17px !important;
  line-height: 2 !important;
  letter-spacing: .08em !important;
}

.ufb-promise__intro h2 {
  font-family: var(--ufb-font-serif) !important;
  font-size: clamp(32px, 4vw, 54px) !important;
  line-height: 1.38 !important;
  letter-spacing: .03em !important;
}

.ufb-promise__copy h3 {
  font-family: var(--ufb-font-serif) !important;
  font-size: clamp(23px, 2.4vw, 34px) !important;
  line-height: 1.55 !important;
  letter-spacing: .03em !important;
}

.ufb-product__reasons > h2,
.ufb-product__showcase > h2,
.ufb-detail__hero h1,
.ufb-detail__size-guide h2,
.ufb-detail__flow h2,
.ufb-detail__spec h2,
.ufb-detail__purchase h2,
.ufb-trust__header h2,
.ufb-order-flow__header h2,
.meter-contact-hero h1,
.meter-contact-content h2,
.meter-contact-security h2,
.simple-contact-hero h1,
.simple-contact-aside h2,
.simple-contact-form-panel h2,
.simple-contact-footer-note h2 {
  font-family: var(--ufb-font-serif) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  letter-spacing: .03em !important;
}

.ufb-product__reasons > h2 {
  font-size: clamp(21px, 2vw, 28px) !important;
  line-height: 1.45 !important;
}

.ufb-product__showcase > h2 {
  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1.15 !important;
}

.ufb-detail__hero h1 {
  font-family: var(--ufb-font-en) !important;
  font-size: clamp(54px, 6vw, 82px) !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
}

.ufb-detail__size-guide h2,
.ufb-detail__flow h2,
.ufb-detail__spec h2,
.ufb-detail__purchase h2,
.ufb-trust__header h2,
.ufb-order-flow__header h2,
.meter-contact-content h2,
.meter-contact-security h2,
.simple-contact-aside h2,
.simple-contact-form-panel h2,
.simple-contact-footer-note h2 {
  font-size: clamp(27px, 3vw, 40px) !important;
  line-height: 1.45 !important;
}

.meter-contact-hero h1,
.simple-contact-hero h1 {
  font-size: clamp(40px, 5.2vw, 68px) !important;
  line-height: 1.4 !important;
}

.ufb-product__reason h3,
.ufb-product__price strong,
.ufb-detail__hero-price strong,
.ufb-detail__checkout-price,
.ufb-detail__checkout h3,
.ufb-detail__size-grid h3 {
  font-family: var(--ufb-font-en) !important;
  font-weight: 300 !important;
  letter-spacing: .01em !important;
}

.ufb-product__price strong,
.ufb-detail__hero-price strong,
.ufb-detail__checkout-price {
  font-size: clamp(34px, 3.5vw, 48px) !important;
  line-height: 1.05 !important;
}

.ufb-detail__checkout .ufb-detail__checkout-price > small {
  display: inline !important;
  margin: 0 !important;
  font-family: var(--ufb-font-ja) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: .03em !important;
  white-space: nowrap !important;
}

.ufb-product__reason p,
.ufb-product__price em,
.ufb-trust__grid article > span,
.ufb-order-flow__steps p,
.ufb-detail__lead,
.ufb-detail__flow li p,
.ufb-detail__purchase > div > p:not(.ufb-detail__label),
.meter-photo-steps p,
.meter-contact-form-wrap header > p:last-child {
  font-family: var(--ufb-font-ja) !important;
  font-size: 15px !important;
  line-height: 1.9 !important;
  letter-spacing: .03em !important;
}

.ufb-trust__grid h3,
.ufb-order-flow__steps h3,
.ufb-detail__flow h3,
.meter-photo-steps h3 {
  font-family: var(--ufb-font-ja) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  letter-spacing: .04em !important;
}

.contact-cta h2,
.guide-hero h1,
.guide-intro h2,
.flow-section > h2,
.size-section > h2,
.decision-section > h2,
.meter-card h2,
.guide-note h2 {
  font-family: var(--ufb-font-serif) !important;
  font-size: clamp(30px, 3.5vw, 46px) !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: .04em !important;
}

@media (max-width: 600px) {
  body {
    font-size: 16px;
    line-height: 1.92;
  }

  .hero h1 {
    font-size: clamp(34px, 10vw, 44px) !important;
    line-height: 1.3 !important;
  }

  .manifesto h2,
  .story h2,
  .ufb-promise__intro h2,
  .meter-contact-hero h1,
  .simple-contact-hero h1 {
    font-size: clamp(27px, 8vw, 35px) !important;
    line-height: 1.5 !important;
  }

  .closing h2,
  .ufb-detail__hero h1 {
    font-size: clamp(34px, 10vw, 46px) !important;
  }

  .ufb-promise__copy h3,
  .ufb-detail__size-guide h2,
  .ufb-detail__flow h2,
  .ufb-detail__spec h2,
  .ufb-detail__purchase h2,
  .ufb-trust__header h2,
  .ufb-order-flow__header h2,
  .meter-contact-content h2,
  .meter-contact-security h2,
  .simple-contact-aside h2,
  .simple-contact-form-panel h2,
  .simple-contact-footer-note h2,
  .contact-cta h2,
  .guide-hero h1,
  .guide-intro h2,
  .flow-section > h2,
  .size-section > h2,
  .decision-section > h2,
  .guide-note h2 {
    font-size: clamp(25px, 7vw, 32px) !important;
    line-height: 1.5 !important;
  }

  .manifesto div > p,
  .story-text,
  .ufb-promise__lead,
  .ufb-promise__description,
  .ufb-trust__header > span,
  .ufb-order-flow__header > span,
  .meter-contact-lead,
  .simple-contact-lead {
    font-size: 16px !important;
    line-height: 1.92 !important;
  }
}

/*
 * 全ページ共通の見出しスケール。
 * 大きすぎる装飾見出しを抑え、参考画像のような読みやすい明朝体へ統一します。
 */
main h1,
.basic-page h1 {
  font-family: var(--ufb-font-serif) !important;
  font-size: clamp(36px, 4.5vw, 56px) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.5 !important;
  letter-spacing: .035em !important;
}

main h2 {
  font-family: var(--ufb-font-serif) !important;
  font-size: clamp(30px, 3.8vw, 48px) !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 1.55 !important;
  letter-spacing: .035em !important;
}

main h3 {
  font-size: clamp(22px, 2.5vw, 34px) !important;
  line-height: 1.55 !important;
}

/* 本文は高齢の方にも読みやすい16px以上を基本にします。 */
main p:not([class*="eyebrow"]):not([class*="index"]):not([class*="label"]):not(.hero-kicker),
main li,
main dt,
main dd,
main label,
.privacy-page p,
.privacy-page li {
  font-size: 16px !important;
  line-height: 2 !important;
}

main input,
main select,
main textarea,
main button {
  font-size: 16px !important;
}

.ufb-scroll-slide > p,
.ufb-detail__size-grid article > p,
.ufb-trust__grid article > p {
  font-size: 11px !important;
}

@media (max-width: 600px) {
  main h1,
  .basic-page h1 {
    font-size: clamp(30px, 9vw, 38px) !important;
    line-height: 1.5 !important;
  }

  main h2 {
    font-size: clamp(27px, 8vw, 34px) !important;
  }

  main h3 {
    font-size: clamp(21px, 6.5vw, 28px) !important;
  }
}

/*
 * 日本語見出しの不自然な改行を抑えます。
 * 対応ブラウザでは文節を優先し、未対応ブラウザでも文字が潰れないようにします。
 */
main h1,
main h2,
main h3,
.basic-page h1 {
  text-wrap: balance;
  line-break: strict;
  word-break: auto-phrase;
  overflow-wrap: normal;
}

@supports not (word-break: auto-phrase) {
  main h1,
  main h2,
  main h3,
  .basic-page h1 {
    word-break: normal;
    overflow-wrap: break-word;
  }
}

@media (max-width: 600px) {
  main h1,
  .basic-page h1 {
    max-width: 100%;
    font-size: clamp(29px, 8.2vw, 36px) !important;
    line-height: 1.48 !important;
    letter-spacing: .025em !important;
  }

  main h2 {
    max-width: 100%;
    font-size: clamp(25px, 7.2vw, 32px) !important;
    line-height: 1.55 !important;
    letter-spacing: .025em !important;
  }

  main h3 {
    font-size: clamp(20px, 5.7vw, 26px) !important;
    line-height: 1.6 !important;
  }
}

@media (max-width: 370px) {
  main h1,
  .basic-page h1 {
    font-size: 28px !important;
  }

  main h2 {
    font-size: 24px !important;
  }
}