/* base.css
   リセット / デザイントークン（CSS変数）/ 要素の基本スタイル / ユーティリティ

   ブレークポイント（メディアクエリは従来の書き方だけで書く）
   範囲構文（幅を < や >= で比べる書き方）は iOS 16.3 以前の Safari で効かないので使わない。
   「未満」は 0.02px 引いた max-width（例 767.98px）で書き、境目の隙間と重なりをなくす。

     名前              書き方
     SP               (max-width: 767.98px)
     タブレット以上     (min-width: 768px)
     タブレット        (min-width: 768px) and (max-width: 1099.98px)
                      ヘッダーは 1100px 未満でハンバーガー
     タブレット未満     (max-width: 899.98px)   ← 900px。横スクロール一覧（c-card-grid--scroll）や
     ・以上            (min-width: 900px)         リスト表示（--list、c-post-card--row-narrow）が切り替わる幅
     SP + タブレット   (max-width: 1099.98px)
     PC               (min-width: 1100px)
     細かい調整        (min-width: 1200px) ヘッダー余白 / (min-width: 1280px) ヘッダーの間隔 /
                      (max-width: 359.98px) 320px前後の端末

   コンテナクエリ（幅の狭いタイル・図の中だけ）は、従来の書き方（(max-width: 180px) のように、幅を min- / max- で比べる）なら使ってよい。
   iOS 15 以前の Safari では、コンテナクエリも cqw（コンテナの幅の単位）も効かない。
   効かなくても崩れないよう、先に cqw を使わない既定値を書き、あとに cqw の値を重ねる
   （例：c-tile の padding は「padding: 22px 24px;」のあとに「padding: 6.4cqw 6.8cqw;」）。 */

:root {
  /* 色 */
  --c-white: #FFFFFF;
  --c-paper: #F5F2EC;            /* 交互に使う背景 */
  --c-ink: #161616;              /* 本文・強い線 */
  --c-ink-2: #4B4B4B;            /* 補足文 */
  --c-ink-3: #6B6B6B;            /* キャプション・出典 */
  --c-line-soft: #DDD8CE;        /* カードの枠・区切り線 */
  --c-accent: #D14710;           /* 朱。ボタンの地・大きい数字 */
  --c-accent-hover: #B53B0B;
  --c-accent-bright: #E14C0A;    /* ロゴの朱。装飾の線だけに使い、文字色には使わない */
  --c-accent-text: #A8380A;      /* 小さい朱色の文字は必ずこれ */
  --c-accent-soft: #FBEDE5;      /* 淡い朱の背景 */
  --c-dark: #1C1C1C;             /* CTAバンド・濃色セクション */
  --c-dark-2: #111111;           /* フッター */
  --c-on-dark: #F5F2EC;          /* 濃い背景の上の文字 */
  --c-on-dark-2: #B9B4AA;

  /* 追加トークン（濃色地の上で4.5:1を満たす朱の文字色と、濃色地の区切り線） */
  --c-accent-on-dark: #F0703C;
  --c-line-dark: rgba(245, 242, 236, .16);

  /* カードの面の色（--card-bg）と、その反対の色（--card-alt）。枠線を使わないので、地との色の差でまとまりを示す。
     白い地の上は面が紙色。紙色の地の上（l-section--paper・c-page-head）は、面を白・反対の色を紙色に切り替える。
     枠のないタグ（c-tag）の面も、この2色で決める（地の上のタグは --card-bg、カードの面の上のタグは --card-alt） */
  --card-bg: var(--c-paper);
  --card-alt: var(--c-white);

  /* 書体 */
  --ff-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  --ff-head: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --ff-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* 文字サイズ */
  --fs-body: 16px;
  --fs-h1: clamp(32px, 4vw, 54px);
  --fs-h2: clamp(26px, 2.6vw, 36px);
  --fs-h3: 20px;

  /* 寸法 */
  --container-max: 1200px;
  --container-pad: 32px;
  --section-pad: 120px;
  --section-pad-divider: 88px;   /* 区切り線つきセクションの上余白と、その直前のセクションの下余白 */
  --head-gap: 48px;
  --header-h: 80px;
  --radius-s: 2px;               /* ボタン・入力欄・チップ。角丸は 2px まで（ピル型・大きな丸みは使わない） */
  --radius-m: 2px;               /* カード・絵 */
}

/* タブレット以下（ヘッダーがハンバーガーに切り替わる幅） */
@media (max-width: 1099.98px) {
  :root {
    --header-h: 64px;
  }
}

/* SP */
@media (max-width: 767.98px) {
  :root {
    --fs-body: 15px;
    --fs-h3: 18px;
    --container-pad: 20px;
    --section-pad: 72px;
    --section-pad-divider: 56px;
    --head-gap: 32px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

/* sticky ヘッダーにアンカー先（#services など）が隠れないように。
   html に scroll-padding-top を付けると、ヘッダー内のリンクにフォーカスしたときに
   ページが勝手に上へスクロールしてしまうため、アンカー先の要素に付ける */
[id] {
  scroll-margin-top: var(--header-h);
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
  margin: 0;
}

body {
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: .04em;
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  word-break: auto-phrase;
  line-break: strict;
}

h1,
h2,
h3 {
  font-family: var(--ff-head);
  font-weight: 700;
  letter-spacing: .02em;
  /* 日本語が語の途中で折れにくくする */
  word-break: auto-phrase;
  line-break: strict;
}

h1 {
  font-size: var(--fs-h1);
  line-height: 1.4;
}

h2 {
  font-size: var(--fs-h2);
  line-height: 1.5;
  text-wrap: balance;
}

h3 {
  font-size: var(--fs-h3);
  line-height: 1.5;
  text-wrap: balance;
}

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

.u-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 句や語のまとまりを途中で折らない（見出しの中の「無料AI検索診断」など） */
.u-nowrap {
  white-space: nowrap;
}

/* PC（1100px以上）だけ有効な改行。タブレット・SPでは改行しない */
.u-br-pc {
  display: none;
}

@media (min-width: 1100px) {
  .u-br-pc {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}