/* === ズーム対応レスポンシブ修正 ===
 * PCでブラウザの表示倍率を変えた際の中間サイズ(701px〜1100px)のレイアウト調整
 */

/* ---- 全画面サイズ共通: コンテナからのはみ出し防止 ----
 * event_content に max-width: 1200px がある一方、
 * 内側要素が vw 指定のため大画面で親要素を超えてしまう問題を修正
 */
.event_name,
.event_text {
  max-width: 100%;
  box-sizing: border-box;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.original_sub_events {
  width: calc(100% - 3em);
}

.button_event a {
  max-width: calc(100% - 3em);
  box-sizing: border-box;
}

/* ---- 〜1100px: 全般的な余白・テキスト幅の調整 ---- */
@media screen and (max-width: 1100px) and (min-width: 701px) {
  /* ロゴを少し縮小 */
  .logo {
    width: 110px;
  }

  /* ABOUTテキストの幅を広げる（45vwが狭くなりすぎる） */
  .text_sub {
    width: 80vw;
  }

  /* セクション内パディングを縮小 */
  .about_content,
  .servise_content {
    padding: 20px;
  }

  /* ABOUTセクション上部の余白を縮小（13vwは大きすぎる） */
  .top_about {
    padding-top: 6vw;
  }

  /* SERVICEセクション上部の余白を縮小 */
  .top_servise {
    padding-top: 4vw;
  }

  /* フッターの左右パディングを縮小（15vwが大きすぎる） */
  .footer_info {
    padding: 4vw 4vw;
  }
}

/* ---- 〜900px: さらに狭い帯での調整 ---- */
@media screen and (max-width: 900px) and (min-width: 701px) {
  /* カテゴリボタンを少し小さくして2列に収める */
  .category a {
    width: 170px;
    height: 80px;
    margin: 12px 1vw;
  }

  .category a div {
    font-size: 0.85em;
  }

  /* イベントタイトル・テキスト・ボタンを広げる */
  .event_name {
    width: 85vw;
    font-size: 1.6em;
  }

  .event_text {
    width: 85vw;
  }

  .button_event a {
    width: 85vw;
  }

  /* ニュース一覧を広げる */
  .news_content {
    width: 92vw;
  }

  /* オリジナルイベントのサブカードを広げる */
  .original_sub_events {
    width: 85vw;
  }

  /* メインタイトルのフォントサイズを縮小 */
  .text_mein {
    font-size: 1.6em;
  }
}