/* スマホ閲覧時のトップページのイベントバナーとグループ校バナーの位置入れ替え */

/* --- PC向けの配置（画面幅 768px 以上で左右に分ける） --- */
@media ( max-width:523px) {
  /* さらに外側に全体を囲む親要素があれば、そこにGridを当てるか、
     またはボディに対して以下のように配置を定義します */
  
  #contents {
    display: grid;
    grid-template-columns: 2fr 1fr; /* 左2:右1 の比率 */
    width: 100%;
  }
  
  #main { grid-column: 1 / 2; } /* 左側に配置 */
  #sub  { grid-column: 2 / 3; 
          width: 50%;
    } /* 右側に配置 */
  
  #top_main_bottom_info {
    grid-column: 1 / 3; /* 1から3まで＝左端から右端までぶち抜き */
    width: 100%;
  }
}


@media (max-width: 522px) {

/* --- スマホ向けの配置（縦一列に並べる） --- */  
/* ① 通常時：速報エリアが存在しないページの配置（デフォルト） */
#contents {
  display: grid;
  grid-template-areas:
    "news"
    "news2"
    "sub"
    "bn"
    "bottom";
}

/* ② 速報エリアが存在する場合のみ、エリアを追加して上書きする */
#contents:has(#breaking_news),
#contents:has(#breaking_newsArea) {
  grid-template-areas:
    "breaking_news"
    "breaking_newsArea"
    "news"
    "news2"
    "sub"
    "bn"
    "bottom";
}

  /* スマホ時の中間親要素はレイアウトを邪魔しないように解除 */
#main {
  display: contents; 
}

/* 各要素の配置場所を指定 */
#breaking_news { grid-area: breaking_news; }
#breaking_newsArea { grid-area: breaking_newsArea; }
#news { grid-area: news; } 
#topnews { grid-area: news2; } 
#sub { grid-area: sub; }
.bottom_bn { grid-area: bn; }
.top_main_bottom_info { grid-area: bottom; }
}

/* spで横幅を一杯に */

    @media (max-width: 522px) {
        #topnews {
            grid-area: news2;
            width: 150%;
        }

        #sub {
            grid-area: sub;
            width: 150%;
        }

        .bottom_bn {
        	width:150%;
        }
    }