/* =====================================================
   RESPONSIVE BASE — コピペ用ベーススニペット
   新しいHPを作るときにこのファイルを参照・コピーする
   ===================================================== */

/* ===== テキスト改行（日本語対応）===== */
html {
  scroll-behavior: smooth;
}
body {
  line-break: strict;           /* 句読点・記号前後の不自然な改行を防ぐ */
  overflow-wrap: break-word;    /* 長い単語・URLのはみ出し防止 */
  word-break: auto-phrase;      /* Chrome 119+: 文節単位の自然な折り返し */
}
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;           /* 見出しの改行を均等バランスに */
}
p {
  text-wrap: pretty;            /* 段落末行に1文字だけ残るのを防ぐ */
}


/* ===== CSS変数（ブレークポイント）===== */
:root {
  --bp-sm:  480px;   /* スマホ横 */
  --bp-md:  768px;   /* タブレット */
  --bp-lg: 1024px;   /* タブレット横 / 小さいPC */
  --bp-xl: 1280px;   /* 標準PC */
}


/* ===== コンテナ ===== */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 64px); /* 画面幅に応じて自動調整 */
}


/* ===== レスポンシブ余白ユーティリティ ===== */
/* セクション縦余白: clampで画面幅に応じて自動スケール */
.section {
  padding-top:    clamp(40px, 7vw, 100px);
  padding-bottom: clamp(40px, 7vw, 100px);
}


/* ===== グリッド ===== */
/* 2〜4列グリッドをブレークポイントなしで自動折り返し */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(12px, 2vw, 32px);
}


/* ===== フォントサイズ（clamp推奨パターン）===== */
/*
  clamp(最小, 流動値, 最大) を使う。
  流動値は vw や cqi（コンテナクエリ）で指定。

  例:
    font-size: clamp(14px, 1.5vw, 20px);   本文
    font-size: clamp(20px, 3vw,  40px);   見出し中
    font-size: clamp(28px, 5vw,  72px);   大見出し
    font-size: clamp(40px, 8vw, 120px);   ヒーロータイトル
*/


/* ===== ブレークポイント別スタイル ===== */

/* モバイル (< 480px) */
@media screen and (max-width: 480px) {
  /* 例: 2列グリッドを1列に */
  /* .grid-2 { grid-template-columns: 1fr; } */
}

/* スマホ横〜タブレット (480px - 767px) */
@media screen and (min-width: 481px) and (max-width: 767px) {
  /* 例: 3列を2列に */
  /* .grid-3 { grid-template-columns: repeat(2, 1fr); } */
}

/* タブレット (768px - 1023px) */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  /* 例: PC4列を2列に */
  /* .grid-4 { grid-template-columns: repeat(2, 1fr); } */
}

/* PC (>= 1024px) */
@media screen and (min-width: 1024px) {
  /* PC専用スタイル */
}


/* ===== よくある不自然なレスポンシブ対策チェックリスト =====

  □ コンテナ横幅: max-width + padding でスマホでも余白確保
  □ 見出し: font-size に clamp() を使う（固定px禁止）
  □ 日本語テキスト: body に line-break:strict, word-break:auto-phrase
  □ 画像: width:100%; height:auto; object-fit:cover; を基本に
  □ グリッド: gap も clamp() でスマホ時に狭すぎないように
  □ ボタン: スマホで width:100% か十分なタップ領域(44px以上)
  □ テーブル: スマホではスクロール or カード形式に変換
  □ フォーム: input は width:100%; font-size:16px以上（ズーム防止）
  □ フッターナビ: スマホで2列以下に収める
  □ ヘッダー: スマホでハンバーガーメニューに切り替え

  ===================================================== */