/* ==========================================================================
   ステップ3　── ヘッダーの高さと地　（プライムナンバーズを測り直した結果）
   2026-08-06 riho さん「プライムはヘッダーがもっと小さかった。いまは太い」

   ★測り直して分かったこと（https://primenumbers.co.jp/ ライブ計測）

     一番上          高さ150 ／ 地は 透明 ／ 線なし ／ 影なし
                     ロゴ 220×24（y60）／ メニュー y66・高さ44
     スクロール後     高さ 64 ／ 地は 白 ／ 線なし ／ 影なし
                     ロゴ y20 ／ メニュー y22
     切り替え        transition .3s ease-out

     → プライムは「上では帯が見えない。スクロールすると細い白帯になる」。
       こちらは いつでも 150px の白帯＋下に1pxの線 だったので、太く見えていた。

   直したこと
     ・地を 透明 にして、下の1pxの線を外した
     ・スクロールすると 高さ64・白 に縮むようにした（.is-small が付く）
     ・ヘッダーが浮くぶん、中身を150px下げた
     ・ロゴのダミーを 220×30 → 220×24（プライム実測）に

   ★文字の大きさ・太さ・字間、ボタンの色（ステップ1で決めたもの）は変えていない。
   ========================================================================== */

.mk-hdr{
  position:fixed;left:0;right:0;top:0;
  height:150px;
  background:transparent;
  border-bottom:0;
  box-shadow:none;
  transition:height .3s ease-out, background-color .3s ease-out;
}

/* スクロールしたら細い白帯になる（実測 64px・白・線なし・影なし） */
.mk-hdr.is-small{height:64px;background:#fff;}

/* ヘッダーが浮くので、中身をその高さぶん下げる（プライムも hero に同じ余白がある） */
body{padding-top:150px;}

@media (max-width:900px){
  .mk-hdr{height:64px;background:#fff;}
  .mk-hdr.is-small{height:64px;}
  body{padding-top:64px;}
}