@charset "UTF-8";
/*
 * 90%表示の設定（ブラウザの表示幅が640px〜1300pxのときだけ適用）
 *
 * 元に戻す方法：header.php の「90%表示」読み込み行を削除してください。
 * 縮小だけ一時的に無効にする場合：下の zoom: 0.9 を zoom: 1 に変更してください。
 * ナビの余白調整も含めて元に戻す場合は、上記の読み込み行を削除してください。
 * 縮小率の変更例：0.95 = 95%、0.9 = 90%、1 = 100%。
 *
 * 文字・画像・余白をまとめて縮小します。
 * メディアクエリは元のブラウザ幅で判定するため、既存のレスポンシブ切替は維持します。
 * 640pxちょうどでは既存のスマホレイアウトを90%表示します。
 * 印刷時と指定幅の範囲外では適用しません。
 */
@media screen and (min-width: 640px) and (max-width: 1300px) {
  html {
    zoom: 0.9;
  }

  /* 既存の100vhも縮小されるため、上下端の指定で画面全体を覆います。 */
  .popup_bg {
    height: auto;
  }
}

/*
 * 90%表示時のナビ間隔（添付の通常表示と同じ余白を復元）
 * addstyle.css の1300px以下の margin-right: 0 を、この専用ファイルで上書きします。
 * 640px以下はスマホメニューのため対象外です。
 */
@media screen and (min-width: 641px) and (max-width: 1300px) {
  .nav ul li {
    margin-right: 1.3em;
  }

  .nav ul li.instagram {
    margin-right: 1.1em;
  }
}