/* ============================================
 リセットCSS
 ブラウザのデフォルトスタイルを初期化し、表示差異を防ぐ共通設定。
============================================ */

/* paddingとborderを要素の幅・高さに含める（レイアウト崩れ防止） */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* スマホ回転時の文字サイズ自動調整防止 / スクロールバー着脱時の画面ガタつき防止 */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scrollbar-gutter: stable;
}

/* デフォルトのマージンを一括リセット */
body, h1, h2, h3, h4, h5, h6, p,
figure, blockquote, dl, dd, ul, ol {
  margin: 0;
}

/* リストのデフォルトスタイル（余白・黒ポチなど）をリセット */
ul, ol {
  padding: 0;
  list-style: none;
}

/* 長い英単語やURLによるレイアウト崩れを防ぎ、強制的に折り返す */
p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

/* リンクのデフォルトスタイル（青色・下線）をリセット */
a {
  text-decoration-skip-ink: auto;
  color: currentColor;
  text-decoration: none;
}

/* 画像や埋め込み要素の基本設定。iframeのデフォルト枠線も削除 */
img,
picture,
video,
canvas,
svg,
iframe {
  width: 100%;
  height: auto;
  display: block;
  border: none;
}
/* 【画像の運用方針】
  画像は親要素の幅に合わせて100%可変します。サイズの制御は親要素（divなど）で行ってください。

  ※注意: CMSの投稿本文など、親要素でラップできない生imgタグの巨大化を防ぐため、
  プロジェクト側のCSSで上書きが必要です。（例: .article-body img { width: auto; max-width: 100%; }）
*/

/* フォーム要素のリセット。OS標準のデザイン（iOSの丸みなど）を無効化し、フォントを継承 */
input, button, textarea, select {
  font: inherit;
  color: inherit;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
}

/* addressタグの斜体をリセット */
address {
  font-style: normal;
}


/* ============================================
 サイト全体の設定
 サイトごとに対応方針が異なるので調整してください
============================================ */

/* サイト共通のCSS変数 */
:root {
  --font-roboto:      "Roboto", serif;
  --font-noto-serif:  "Noto Serif JP", serif;
  --font-noto-sans:   "Noto Sans JP", sans-serif;

  --header-height: 10rem;
}

/* SP時のヘッダー高さの変数上書き */
@media screen and (max-width: 767px) {
  :root {
    --header-height: 7.5rem;
  }
}

/* ページ内リンク時のスクロール位置調整（固定ヘッダー被り防止） */
:target {
  scroll-margin-top: calc(var(--header-height));
}

/* 
   ※JSでスクロール制御を行う場合は競合するため scroll-behavior を削除してください。
*/
html {
  scroll-behavior: smooth;
}

/* サイト全体のベーススタイル。背景領域の確保（100vh）とフォントのアンチエイリアス処理 */
body {
  min-height: 100vh;
  line-height: 1.5;
  font-family: var(--font-noto-sans);
  color: #333333;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* リンクのホバーアニメーション設定 */
a {
  transition: opacity 0.2s ease;
}

/* タッチデバイスでの「ホバー状態残り」を防ぐため、マウス操作時のみ適用 */
@media (hover: hover) and (pointer: fine) {
  a:hover {
    opacity: 0.7;
  }
}


/* ============================================
  ユーティリティクラス
  詳細度負けを防ぐため !important を付与しています。
============================================ */

/* PCサイズ以上（768px〜）では非表示 */
@media screen and (min-width: 768px) {
  .sp {
    display: none !important;
  }
}

/* SPサイズ以下（〜767px）では非表示 */
@media screen and (max-width: 767px) {
  .pc {
    display: none !important;
  }
}