/* buddie.jp（マーケティングデザイン）のモバイル調整。
 *
 * このサイトのページはモックから変換した「自前のナビ・フッターを持つ完成HTML」で、
 * レイアウトは**すべてインラインstyle**で書かれている。そしてモックには
 * メディアクエリが1つも無い。そのため狭い画面ではPC用の寸法がそのまま効き、
 * ヘッダーのメニューが2〜3行に折り返してロゴと重なっていた（320pxでは3行）。
 *
 * 直し方の方針:
 * - インラインstyleを上書きするので `!important` が必要
 *   （作者スタイルの !important はインラインの非 !important 宣言に勝つ）。
 * - すべてメディアクエリの中に閉じる。**PC表示には一切影響しない。**
 * - 生成HTMLを書き換えないので、モックを再変換しても壊れない。
 * - 文言・配色・セクション構成は変えない（デザイン忠実の方針）。
 *
 * ⚠ セレクタに `.hm1` のような hover 生成クラスを使ってはいけない。
 *   あの番号はページを跨いで連番で振られるため、ページごとに別の名前になり、
 *   hover 指定が無いリンクにはクラスすら付かない。実測では
 *   / が hm1/hm2/hm3、/series/ が (無)/hm18/hm19、/company/ が hm34/(無)/hm35、
 *   /contact/ が hm44/hm45/(無) だった。**構造セレクタで指定する。**
 *
 * ナビの実体（全ページ共通・nav は各ページに1つだけ）:
 *   body > section > nav[display:flex; justify-content:space-between;
 *                        gap:16px; padding:24px clamp(20px,3.6vw,56px)]
 *     > a[href="/"]        … ロゴ（img 34px ＋ span 18px "Buddie"）
 *     > div[display:flex; gap:clamp(14px,2vw,30px)]
 *         > a ×2           … テキストリンク（13px）
 *         > a:last-child   … 丸ボタン「お問い合わせ」（padding:9px 17px）
 */

/* ── ヘッダーを1行に収める（航平さんの指定「文字は小さくてよい」） ──
 * 375px での実測: 変更前は 13px で右端が 400px（25pxはみ出し）だった。
 * 11px ＋ 詰めた余白で右端 349px に収まる。
 *
 * 上限は 479px。実測で PC 値（13px）のまま1行に収まる下限は 454px なので、
 * 480px 以上を縮めるのはモックを不必要に変えることになる。
 * （最初 720px にしていたが、480〜720px は崩れていないので締めた）
 *
 * ⚠ gap はこのブロック**だけ**で宣言する。同じセレクタ・同じ !important で
 *   別ブロックに書くと、特異度が同じなのでファイル後方が勝ち、
 *   ここで宣言した値が黙って無効になる（実際に一度そうなっていた）。 */
@media (max-width: 479px) {
  body > section > nav {
    padding: 16px 14px !important;
    gap: 8px !important;
  }
  /* ロゴ。縮めた分をメニューに回す。縮まないように flex-shrink は 0 のまま */
  body > section > nav > a {
    gap: 7px !important;
    flex: 0 0 auto !important;
  }
  body > section > nav > a img {
    width: 27px !important;
    height: 27px !important;
  }
  body > section > nav > a span {
    font-size: 15px !important;
    letter-spacing: 0.02em !important;
  }

  /* メニュー。折り返しを禁止して1行に固定する。
     gap は誤タップ防止のため 12px を確保する（当たり判定は下で44pxに広げる）。 */
  body > section > nav > div {
    gap: 12px !important;
    flex: 0 0 auto !important;
  }
  body > section > nav > div > a {
    font-size: 11px !important;
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    letter-spacing: 0 !important;
  }
  /* 「お問い合わせ」の丸ボタン */
  body > section > nav > div > a:last-child {
    padding: 7px 11px !important;
  }
}

/* 375px 未満（iPhone SE / 旧機種）。
 * ここでリンクを10pxまで落とすと実機で読めないため、**ロゴのワードマークを畳んで**
 * その分をメニューの文字サイズに回す。アイコンは残り alt="Buddie ホーム" も残るので、
 * ホームへの導線としての機能は失われない。これで 320px でも 11px を保てる。 */
@media (max-width: 374px) {
  body > section > nav {
    padding: 14px 10px !important;
    gap: 6px !important;
  }
  body > section > nav > a { gap: 0 !important; }
  body > section > nav > a img { width: 26px !important; height: 26px !important; }
  body > section > nav > a span { display: none !important; }
  body > section > nav > div { gap: 10px !important; }
  body > section > nav > div > a { font-size: 11px !important; }
  body > section > nav > div > a:last-child { padding: 7px 10px !important; }
}

/* ── ヘッダーのタップ領域 ──
 * 1行化のためにリンクを11pxまで落としたので、素のインライン要素だと
 * 当たり判定＝文字の行ボックス（高さ約16px）になり、隣を誤タップする。
 * 疑似要素を絶対配置で重ねると、**レイアウトを1pxも動かさずに**当たり判定だけ
 * 44px に広げられる（＝1行化と両立する）。 */
@media (max-width: 720px) {
  body > section > nav > div > a { position: relative; }
  body > section > nav > div > a::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
  /* ⚠ ここで gap を宣言しないこと。上のブロックと同特異度・同 !important のため
     後方のこちらが勝ってしまい、上で決めた値が無効になる。 */
}

/* ── 本文の既定フォント ──
 * モックは要素ごとにインラインで font-family を当てる作りで、body に既定が無い。
 * iOS Safari の既定は明朝系なので、指定漏れの本文だけ明朝で描かれ、
 * ゴシックの見出しと文字種が混在する（PCの既定はゴシックなので気づけない）。 */
@media (max-width: 720px) {
  body { font-family: 'Zen Kaku Gothic New', system-ui, -apple-system, 'Hiragino Kaku Gothic ProN', sans-serif; }
}

/* ── フォーカス表示の復活 ──
 * 入力欄はインラインで outline:none。モックのフォーカス表現は style-focus 属性で
 * 書かれており変換時に捨てられるため、フォーカス表示が一切残っていない。
 * どこを入力中か分からないのは実害なので、モックと同系の枠を戻す。 */
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible {
  outline: 2px solid #6b46c1 !important;
  outline-offset: 1px !important;
}

/* ── 小さすぎる文字の下限を上げる ──
 * モックは装飾ラベルに 10px を使っている箇所がある（SCROLL／開発中 など）。
 * 実機では読めないため 11px を下限にする。装飾なので拡大しても行数は増えない。
 * ナビのリンクはインラインが 13px なのでこの指定には掛からない。 */
@media (max-width: 720px) {
  body [style*="font-size:10px"] { font-size: 11px !important; }
  body [style*="font-size:10.5px"] { font-size: 11px !important; }
}

/* ── grid の下限を安全にする（メディアクエリの外・全幅で有効） ──
 * モックは `repeat(auto-fit,minmax(NNNpx,1fr))` をインラインstyleで使う。
 * auto-fit は列数を減らすだけで下限 NNNpx は効き続けるため、コンテナが
 * NNNpx より狭いと必ずはみ出す。下限を min(NNNpx, 100%) に読み替えると、
 * 余裕があるときの挙動は素の指定と完全に同じ（PC不変）で、狭いときだけ縮む。
 * 破綻する幅はコンテナ依存でビューポート幅から決められないため、
 * あえてメディアクエリに入れない。 */
[style*="repeat(auto-fit,minmax(220px,1fr))"] { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)) !important; }
[style*="repeat(auto-fit,minmax(240px,1fr))"] { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)) !important; }
[style*="repeat(auto-fit,minmax(260px,1fr))"] { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important; }
[style*="repeat(auto-fit,minmax(280px,1fr))"] { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)) !important; }
[style*="repeat(auto-fit,minmax(300px,1fr))"] { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)) !important; }
[style*="repeat(auto-fit,minmax(320px,1fr))"] { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)) !important; }
[style*="repeat(auto-fill,minmax(300px,1fr))"] { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)) !important; }

/* ── 横方向のはみ出しの保険 ──
 * モック由来の固定寸法が残っていても、ページ全体が横スクロールしないようにする。 */
@media (max-width: 720px) {
  html, body { overflow-x: hidden; }
  body img, body svg, body video, body iframe { max-width: 100% !important; }
  /* 長い英数字（メールアドレス・URL）が箱を突き抜けないようにする */
  body a[href^="mailto:"] { overflow-wrap: anywhere; }
}

/* ── フォームの意図しないズーム防止（iOS） ──
 * 入力欄の文字が16px未満だと、iOS Safari はフォーカス時にページを拡大する。
 * 拡大されるとレイアウトが崩れて見えるため、入力欄だけ16pxを保証する。 */
@media (max-width: 720px) {
  body input, body select, body textarea { font-size: 16px !important; }
}

/* ── 見出しの clamp 最小値をモバイル用に下げる ───────────────
 * モックはPC専用（メディアクエリ0件）で、clamp の最小値は「PCの窓を少し狭めたとき」
 * 用の値。走査した全 clamp で vw項が最小値を超えるのは最小480pxからなので、
 * 320〜414px では例外なく最小値がそのまま使われ、見出しが2〜4行に割れて
 * 1〜2文字の孤立行が出ていた（航平さん指摘の「文字の大きさと改行」）。
 *
 * 479px 以下では元々 vw が効いていないため、ここでの上書きは
 * **480px 以上の描画を1pxも変えない**（PC・タブレットは完全に不変）。
 * インラインstyleに勝つため !important。書式は配信HTMLの実体に合わせる。 */
@media (max-width: 479px) {
  [style*="clamp(80px,12vw,170px)"] { font-size: 38px !important; line-height: 1.15 !important; }   /* 667px以上で vw が勝つ */
  [style*="clamp(80px,12vw,160px)"] { font-size: 38px !important; line-height: 1.15 !important; }   /* 667px以上で vw が勝つ */
  [style*="clamp(80px,10vw,140px)"] { font-size: 38px !important; line-height: 1.15 !important; }   /* 800px以上で vw が勝つ */
  [style*="clamp(76px,11vw,150px)"] { font-size: 38px !important; line-height: 1.15 !important; }   /* 691px以上で vw が勝つ */
  [style*="clamp(72px,10vw,140px)"] { font-size: 38px !important; line-height: 1.15 !important; }   /* 720px以上で vw が勝つ */
  [style*="clamp(64px,9vw,120px)"] { font-size: 38px !important; line-height: 1.15 !important; }   /* 711px以上で vw が勝つ */
  [style*="clamp(56px,7vw,84px)"] { font-size: 38px !important; line-height: 1.15 !important; }   /* 800px以上で vw が勝つ */
  [style*="clamp(56px,7vw,96px)"] { font-size: 38px !important; line-height: 1.15 !important; }   /* 800px以上で vw が勝つ */
  [style*="clamp(40px,6vw,80px)"] { font-size: 27px !important; }   /* 667px以上で vw が勝つ */
  [style*="clamp(40px,6vw,96px)"] { font-size: 27px !important; }   /* 667px以上で vw が勝つ */
  [style*="clamp(40px,5vw,64px)"] { font-size: 27px !important; }   /* 800px以上で vw が勝つ */
  [style*="clamp(38px,5.6vw,78px)"] { font-size: 27px !important; }   /* 679px以上で vw が勝つ */
  [style*="clamp(36px,5vw,64px)"] { font-size: 25px !important; }   /* 720px以上で vw が勝つ */
  [style*="clamp(34px,5vw,68px)"] { font-size: 25px !important; }   /* 680px以上で vw が勝つ */
  [style*="clamp(34px,5vw,64px)"] { font-size: 25px !important; }   /* 680px以上で vw が勝つ */
  [style*="clamp(32px,5vw,72px)"] { font-size: 23px !important; }   /* 640px以上で vw が勝つ */
  [style*="clamp(30px,4.2vw,58px)"] { font-size: 23px !important; }   /* 714px以上で vw が勝つ */
  [style*="clamp(28px,3.8vw,52px)"] { font-size: 22px !important; }   /* 737px以上で vw が勝つ */
  [style*="clamp(28px,4vw,56px)"] { font-size: 22px !important; }   /* 700px以上で vw が勝つ */
  [style*="clamp(28px,3.4vw,46px)"] { font-size: 22px !important; }   /* 824px以上で vw が勝つ */
  [style*="clamp(26px,3.6vw,48px)"] { font-size: 21px !important; }   /* 722px以上で vw が勝つ */
  [style*="clamp(26px,3.4vw,46px)"] { font-size: 21px !important; }   /* 765px以上で vw が勝つ */
  [style*="clamp(26px,2.6vw,38px)"] { font-size: 21px !important; }   /* 1000px以上で vw が勝つ */
  [style*="clamp(26px,3.2vw,42px)"] { font-size: 21px !important; }   /* 812px以上で vw が勝つ */
  [style*="clamp(24px,3.2vw,42px)"] { font-size: 20px !important; }   /* 750px以上で vw が勝つ */
  [style*="clamp(24px,3vw,40px)"] { font-size: 20px !important; }   /* 800px以上で vw が勝つ */
  [style*="clamp(24px,4vw,64px)"] { font-size: 20px !important; }   /* 600px以上で vw が勝つ */
}