/*
Theme Name: Royal2020 Child
Template: royal2020
Description: Royal Spoon カスタム用 子テーマ
Version: 1.0
*/

/* =========================================================
   Mobile / Tablet: 右側に余白が見える問題の対策（安全版）
   - 外枠の固定幅/最小幅/余白の影響を抑える
   - 本文エリア（entry-body）内で <p> が細くなる問題を補正
   ========================================================= */
@media (max-width: 768px) {
  html, body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  /* よくある“固定幅の外枠”候補をスマホでは解除 */
  #wrapper, #wrap, #page, #container, #content, #main,
  .wrapper, .wrap, .container, .inner, .site, .site-content {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* 画像や埋め込み要素が原因で幅計算が崩れるのを予防 */
  img, video, iframe, embed, object {
    max-width: 100% !important;
    height: auto !important;
  }

  /* 本文（entry-body）内で <p> が不自然に細くなる問題を補正 */
  .entry-body,
  .entry-body p {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
  }

  .entry-body p {
    display: block !important;
    box-sizing: border-box !important;
  }

  /* clearfix が古い定義で効きすぎる場合の保険 */
  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }
}

/* =========================================================
   641px〜768px: PCメニューが表示される帯域で 1px はみ出し対策
   - #menu li の border-right が積み上がって 100% を超えるのを防ぐ
   ========================================================= */
@media screen and (min-width: 641px) and (max-width: 768px) {
  #menu li,
  #menu li.gr1,
  #menu li.gr2,
  #menu li.gr3,
  #menu li.gr4 {
    box-sizing: border-box;
  }

  /* 念のため：最後の項目の右線は消しておく（1pxはみ出し予防） */
  #menu li:last-child {
    border-right: 0;
  }
}