@charset "UTF-8";
/*
 * 文字（書体と文字サイズの例外）。公開画面とブロックエディターの両方で読み込む（functions.php の enqueue_block_assets）。
 *
 * - 通常の文字サイズは functions.php の editor-font-sizes（7段階）で選ぶ。ここに書くのは段階の外の大きさだけ。
 * - 書体の指定は .editor-styles-wrapper 付きなので、公開画面では何もしない（公開画面の書体は style.css）。
 * - @media は公開画面ではウィンドウ幅、エディターではキャンバス幅に応じる。
 */

/* ============================================================
   1. エディターの書体。公開画面の見出しと同じ表示書体にする
   ============================================================ */

.editor-styles-wrapper :is(.hd-system-section .wp-block-heading,.hd-heading,.hd-fv-title,.hd-callout,.hd-card__problem,.hd-showcase-card__title,.hd-principle__number,.hd-stat__value,.hd-price-row__price,.hd-support-card__price,.hd-step .swell-block-step__title,.hd-step .swell-block-step__number){
  font-family:"Google Sans Flex","Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",sans-serif;
}
.editor-styles-wrapper :is(.hd-system-section .wp-block-heading,.hd-heading,.hd-fv-title){ font-weight:650 }
.editor-styles-wrapper .hd-case-title{
  font-family:"Google Sans Flex","Zen Kaku Gothic New",sans-serif;
  font-weight:650;
}

/* ============================================================
   2. 文字サイズの例外（段階の外の大きさ）
   ============================================================ */

/* 制作例のh1。PCは32〜48px */
.hd-case-section .hd-case-title,
.editor-styles-wrapper .hd-case-title{
  font-size:clamp(2rem,4vw,3rem) !important;
}

/* トップ冒頭のタイトル。1100px以下は冒頭区画が縦並びになる（820pxで文と図が重なる対策）ので、幅に合わせる */
@media(max-width:1100px){
  .hd-system-section .hd-fv-title,
  .editor-styles-wrapper .hd-fv-title{
    font-size:clamp(2.25rem,10vw,2.75rem) !important;
  }
}

/* スマホ */
@media(max-width:781px){
  /* 狭い画面で一文字だけ折り返さず、見出しを自然に読める幅へ。 */
  .hd-system-section .hd-heading,
  .editor-styles-wrapper .hd-heading{
    word-break:normal;
    overflow-wrap:anywhere;
    text-wrap:pretty;
  }
  .hd-system-section .hd-fv-title,
  .editor-styles-wrapper .hd-fv-title{
    font-size:clamp(1.7rem,7.2vw,2.25rem) !important;
  }
  .hd-case-section .hd-case-title,
  .editor-styles-wrapper .hd-case-title{
    font-size:clamp(1.85rem,7.5vw,2.4rem) !important;
  }
  .hd-case-section .hd-case-heading,
  .editor-styles-wrapper .hd-case-heading{
    font-size:1.4rem !important;
  }
}