/* =========================================================
   IchouNet legacy → Responsive minimal overlay
   - 既存HTML/画像は極力そのまま
   - 本ファイルは“最後に”読み込む（後勝ち）
   ========================================================= */

/* -------------------------
   ベース
------------------------- */
html body {
  -webkit-text-size-adjust: 100%;
}

/* 画像はリキッド化（高さは比率保持） */
img,
iframe,
video {
  max-width: 100%;
  height: auto;
}

/* PC/SP表示切替ヘルパー */
.sp-only { display: none !important; }
.pc-only { display: block !important; }

@media (max-width: 1024px) {
  .sp-only { display: block !important; }
  .pc-only { display: none !important; }
  .sp-br { display: inline !important; }
}

@media (min-width: 768px) {
  .sp-br { display: none !important; }
}

/* -------------------------
   レイアウト（固定幅→可変）
   既存ID/構造はそのまま、幅指定だけ後勝ちで解消
------------------------- */
@media (max-width: 1024px) {
  #container,
  #header,
  #gnav,
  #wrapper,
  #contents,
  #side,
  #add_area,
  #footer {
    width: auto !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* SP時はコンテナに余白を持たせず、ヘッダーを端まで広げる */
@media (max-width: 1024px) {
  #container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}
/* メイン・サイドにだけ左右5pxの余白を付与（はみ出し防止のため border-box） */
@media (max-width: 1024px) {
  #contents,
  #side {
    padding-left: 10px;
    padding-right: 10px;
    box-sizing: border-box;
  }
}


/* メイン/サイドを縦積みに（float解除） */
@media (max-width: 1024px) {
  #contents:after {
    content: "";
    display: table;
    clear: both;
  }

  #contents,
  #important_news,
  #pickup,
  #search_study,
  #tab_area,
  #field_info,
  #side,
  #add_area {
    float: none !important;
    width: auto !important;
    max-width: 100% !important;
  }

  #side,
  #add_area {
    margin-top: 24px !important;
  }
}


/* グロナビがテーブル/横並びでも折り返せるように */
@media (max-width: 1024px) {
  #gnav ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px 12px;
  }

  #gnav li,
  #gnav a {
    display: block !important;
    max-width: 100%;
  }
}

/* パンくずの折り返し */
@media (max-width: 767px) {
  #breadcrumb {
    font-size: 0.875rem !important;
    line-height: 1.6;
    word-break: break-word;
  }
}

/* -------------------------
   タイポグラフィ最小整備（相対単位）
   ※ 文字サイズは txt_◯◯.css に任せる
------------------------- */
/* html の font-size は指定しない（txt_normal / txt_big / txt_bigger に委ねる） */
/* html { font-size: 16px; }  ← 削除 or コメントアウト */

@media (max-width: 767px) {
  body {
    /* font-size: 15px; ← これも削除 or コメントアウト */
    line-height: 1.8;   /* 行間だけ少し広げるなど、文字サイズに影響しない指定に留める */
  }
}


/* 旧・文字サイズ切替CSS(txt_*)との共存を阻害しないため、
   上記は控えめに。必要に応じて明示的にrem化する */

/* -------------------------
   テーブルの横スクロール（レイアウト用途のtableにも効く）
------------------------- */
@media (max-width: 1024px) {
  table {
    display: block;
    width: 100% !important;
    overflow-x: auto;
  }

  thead,
  tbody,
  tr {
    width: 100%;
  }
}

/* -------------------------
   画像背景のはみ出し抑止（スライダー等）
------------------------- */
/* 1024px以下：KVなどのビジュアルスライダーだけはみ出し抑止 */
@media (max-width: 1024px) {
  .kv,
  .slider,
  .visual {
    position: relative;
    overflow: hidden;
  }

  .kv img,
  .slider img,
  .visual img {
    width: 100% !important;
    height: auto !important;
    display: block;
  }
}


/* -------------------------
   汎用ユーティリティ（必要に応じてHTML側に付与）
------------------------- */
.u-mt-16 { margin-top: 16px !important; }
.u-mt-24 { margin-top: 24px !important; }
.u-mb-16 { margin-bottom: 16px !important; }
.u-mb-24 { margin-bottom: 24px !important; }

/* -------------------------
   既知の固定幅(例: 778px)を無効化（念のため）
------------------------- */
@media (max-width: 1024px) {
  [style*="width:778px"],
  [style*="width: 778px"] {
    width: auto !important;
  }
}

/* -------------------------
   フッターの詰まり緩和
------------------------- */
@media (max-width: 767px) {
  #footer {
    padding-top: 120px;
    padding-bottom: 16px;
	  padding-left: 10px;
	  padding-right: 10px;
  }
}

/* -------------------------
   ★ ここから：元HTMLの <style> で書かれていたルールを移設
------------------------- */

/* bxSlider 用ページャー位置 */
.bx-default-pager {
  width: 588px;
  position: absolute;
  bottom: 10px;
}

/* lineup 用フォントサイズサンプラ */
#lineup-font-size-sampler {
  position: absolute;
  top: 0;
  left: 0;
}

/* important_news 周り（フッター直前にあったスタイル） */
#important_tel {
  margin-bottom: 20px;
}

#important_tel h2 {
  padding: 14px 10px 10px 50px;
  background-image:url("../img/important_title_R.png"), url("../img/important_title_L.png")!important;
	background-position:top right,top left;
	background-repeat: no-repeat, no-repeat;
  font-size: 120%;
  font-weight: bold;
  color: #6a1917;
	width: 650px;
  box-sizing: unset;
}

#important_tel div {
  padding: 10px 15px;
  border: 1px solid #FF6F0F;
  border-top-width: 2px;
  background: #fff;
  width: 678px;
  box-sizing: unset;
}

#important_tel div.inner-tel-div {
  text-align: center;
  color: #c00;
  font-size: 150%;
  border-top: none;
  font-weight: bold;
  min-height: 120px;
  vertical-align: middle;
  margin-bottom: 20px;
  line-height: 160%;
}

.inner-tel-div span {
  margin: auto;
  min-height: 120px;
  display: table-cell;
  width: 710px;
  vertical-align: middle;
  padding-bottom: 20px;
}

#footer #info dt span {
  font-weight: bold;
  color: #6a1917;
  font-size: 120%;
}

@media (max-width: 1024px) {
#important_tel {margin-top: 30px;}
#important_tel h2 {
	width: 100%;
	box-sizing: border-box;
	padding-left: 50px!important;
	font-size: 95%;
}
#footer #fnav #pagetop {margin-bottom: 10px;}
}

/* =========================================================
   inline style 移設用クラス
   ========================================================= */

/* ヘッダーのキャッチコピー */
.header-copy {
  position: absolute;
  top: 85px;
  left: 200px;
  font-size: 16px;
  font-weight: bold;
  font-family: "HG丸ｺﾞｼｯｸM-PRO", sans-serif;
  color: #800000;
  z-index: 5;
}

/* 子ども向け情報の小ブロック */
.child-guide {
  display: block;
  border: none;
  padding: 0;
}

.child-guide__thumb {
  float: left;
}

.child-guide__text {
  border: none;
  padding: 0 10px;
}

/* サイドバナー（大阪市・生涯学習センター・視聴覚ライブラリ） */
.side-banner {
  float: left;
  margin: 5px 0;
}

/* 文字色ユーティリティ */
.c-blue {
  color: #0000ff;
}

.c-red {
  color: #ff0000;
}

/* 下線を消すリンク */
.no-underline {
  text-decoration: none;
}

/* JS で toggle される非表示要素 */
.is-hidden {
  display: none;
}
/* ピックアップスライダーの高さ
   → 常に中身に合わせて伸ばす */
.pickup-slider {
  height: auto;
}

/* SP 時の「一覧を見る」リンクだけ調整 */
@media (max-width: 767px) {
  #pickup p.more_list a {
    padding: 5px 0 5px 13px;
    font-size: 75%;
    letter-spacing: -0.1em;
    line-height: 23px;
  }
}


/* =========================================================
   SPヘッダー＆スライドナビ
   ========================================================= */

body.sp-nav-open {
  overflow: hidden;
}

/* SP ヘッダーをシンプルなロゴ＋ハンバーガーに */
@media (max-width: 1024px) {
  #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    background: #fff;
    border-bottom: 1px solid #ccc;
    padding: 8px 10px;
  }
/* SPヘッダー固定用にコンテンツ側に余白を付ける */
@media (max-width: 1024px) {
  #wrapper {
    padding-top: 98px; /* ヘッダーの高さに応じて調整可 */
  }
}


  #header .inline {
    position: relative;
    display: flex;
    align-items: center;
	width: 100%;
  }

  #header #logo {
    margin: 0;
  }

  #header #logo img {
    max-width: 230px;
    height: auto;
  }

  /* 既存ナビ＆コピーは非表示 */
  #header .header-copy,
  #header #navi_area,
  #header #gnav {
    display: none !important;
  }

  /* ハンバーガーボタン */
  .sp-menu-btn {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    transform: translateY(-50%);
    cursor: pointer;
  }

  .sp-menu-btn__bar,
  .sp-menu-btn__bar::before,
  .sp-menu-btn__bar::after {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
    background: #000;
    content: "";
  }

  .sp-menu-btn__bar {
    top: 50%;
    transform: translateY(-50%);
  }

  .sp-menu-btn__bar::before {
    top: -8px;
  }

  .sp-menu-btn__bar::after {
    top: 8px;
  }
}

/* スライドインナビ */
@media (max-width: 1024px) {
  .sp-global-nav {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
  }

  .sp-global-nav__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.25s ease;
  }

  .sp-global-nav__panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 320px;
    height: 100%;
    background: #fff;
    box-shadow: none; /* 閉じているときは影ナシ */
    transform: translateX(100%);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
  }

  .sp-global-nav.is-open {
    pointer-events: auto;
  }

  .sp-global-nav.is-open .sp-global-nav__overlay {
    opacity: 1;
  }

  .sp-global-nav.is-open .sp-global-nav__panel {
    transform: translateX(0);
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15); /* 開いたときだけ影を付ける */
  }

  .sp-global-nav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid #ddd;
  }

  .sp-global-nav__logo img {
    max-width: 220px;
    height: auto;
  }

  .sp-menu-close {
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
  }

  .sp-global-nav__nav {
    padding: 8px 16px;
    flex: 1 1 auto;
    overflow-y: auto;
  }

  .sp-global-nav__nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .sp-global-nav__nav li {
    border-bottom: 1px solid #eee;
	  font-size: 16px;
    font-weight: bold;
    padding: 6px;
  }

  .sp-global-nav__nav a {
    display: block;
    padding: 10px 0;
    text-decoration: none;
    color: #267240;
  }

  .sp-global-nav__nav a::before {
    content: "\25B8";
    margin-right: 0.5em;
  }

  /* PCヘッダーと同じテイストの検索ボックス */
  .sp-global-nav__search {
    padding: 12px 16px 0;
  }

  .sp-global-nav__search #sp-search {
    display: flex;
    align-items: center;
    margin: 0;
  }

  .sp-global-nav__search #sp-search dt {
    margin: 0 6px 0 0;
    font-size: 0.875rem;
    white-space: nowrap;
  }

  .sp-global-nav__search #sp-search dd {
    margin: 0;
    padding: 0;
  }

  .sp-global-nav__search #sp-search .keyword {
    flex: 1 1 auto;
    height: 34px;
    padding: 3px;
    background: url("../common/img/search_bg.jpg") left top no-repeat;
    background-size: 100% 34px;
    box-sizing: border-box;
  }

  .sp-global-nav__search #sp-search .keyword input {
    width: 100%;
    height: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    vertical-align: middle;
    box-sizing: border-box;
  }

  .sp-global-nav__search #sp-search .button {
    width: 58px;
    height: 34px;
    margin-left: 0px;
    flex: 0 0 auto;
  }

  .sp-global-nav__search #sp-search .button input {
    height: 34px;
    border: 0;
    vertical-align: middle;
  }

  /* サイトマップ／このサイトの使い方リンクをPCヘッダー風に */
  .sp-global-nav__sub {
    list-style: none;
    margin: 12px 16px 16px;
    padding: 0;
    font-size: 0.875rem;
  }

  .sp-global-nav__sub li {
    display: inline-block;
    margin-right: 12px;
    padding: 3px 0 3px 20px;
    background: url("../common/img/icon_arrow01.png") left 6px no-repeat;
  }

  .sp-global-nav__sub li + li {
    margin-top: 0;
  }

  .sp-global-nav__sub a {
    color: #3366CC;
    text-decoration: underline;
  }

  .sp-global-nav__sub a:hover {
    color: #666;
    text-decoration: none;
  }

}
/* body に .is-sp-nav-open が付いている間は背景をスクロールさせない */
.is-sp-nav-open {
  overflow: hidden;
}

/* =========================================================
   SP時は固定幅980pxを解除
   ========================================================= */
@media (max-width: 1020px) {
  html,
  body {
    min-width: 0;
    width: 100%;
  }

  #container,
  #wrapper {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

#header .inline {
  width: 100%;
}
	#footer .inner {
  width: 100%;
}
	#copyright .inner {
  width: 100%;
}
#copyright #chara {
	visibility: hidden;
}
}
.header-copy {
  position: relative;
  top: 85px;
  left: -325px;
}

/* =========================================================
   SP時 FOOTER調整
   ========================================================= */
@media (max-width: 1024px) {
#add_area { margin-left: 10px!important; margin-right: 10px!important; }
#important_tel h2 {
  padding: 14px 10px;
}
#important_tel div {
  padding: 10px 10px;
	width: 100%;
	box-sizing: border-box;
}
#footer #info dl {
  white-space: normal;
	margin-right: 0px;
font-size: 90%;
}
}

/* =========================================================
   見出し背景 Responsive対応
   ========================================================= */
#important_news h2 {
	background-image:url("../img/important_title_R.png"), url("../img/important_title_L.png")!important;
	background-position:top right,top left;
	background-repeat: no-repeat, no-repeat;
}
#pickup h2 {
  background-image:url("../img/pickup_title_R.png"), url("../img/pickup_title_L.png")!important;
	background-position:top right,top left;
	background-repeat: no-repeat, no-repeat;
}
#search_study h2 {
  background-image:url("../img/pickup_title_R.png"), url("../img/search_study_title_L.png")!important;
	background-position:top right,top left;
	background-repeat: no-repeat, no-repeat;
}
#field_info h2 {
  background-image:url("../img/field_info_title_R.png"), url("../img/field_info_title_L.png")!important;
	background-position:top right,top left;
	background-repeat: no-repeat, no-repeat;
}
#magazine h2 {
  background-image:url("../img/magazine_title_L.png"),url("../img/magazine_title_R.png")!important;
	background-position:top left,top right;
	background-repeat: no-repeat, no-repeat;
}
#child_info h2 {
  background-image:url("../img/child_info_title_L.png"),url("../img/magazine_title_R.png")!important;
	background-position:top left,top right;
	background-repeat: no-repeat, no-repeat;
}
#mailmg h2 {
  background-image:url("../img/mailmg_title_L.png"),url("../img/magazine_title_R.png")!important;
	background-position:top left,top right;
	background-repeat: no-repeat, no-repeat;
}
#question h2 {
	 background-image:url("../img/question_title_L.png"),url("../img/question_title_R.png")!important;
	background-position:top left,top right;
	background-repeat: no-repeat, no-repeat;
}
#teacher h2 {
	background-image:url("../img/teacher_title_L.png"),url("../img/question_title_R.png")!important;
	background-position:top left,top right;
	background-repeat: no-repeat, no-repeat;
}
#recruitment h2 {
	background-image:url("../img/recruitment_title_L.png"),url("../img/question_title_R.png")!important;
	background-position:top left,top right;
	background-repeat: no-repeat, no-repeat;
}
#ranking h2 {
	background-image:url("../img/ranking_title_L.png"),url("../img/ranking_title_R.png")!important;
	background-position:top left,top right;
	background-repeat: no-repeat, no-repeat;
}
@media (max-width: 1024px) {
#tab_nav li a {
  background-image:url("../img//tab_bg_off_R.png"),url("../img//tab_bg_off_L.png")!important;
	background-position:top right,top left;
	background-repeat: no-repeat, no-repeat;
}
	#tab_nav li.active a {
  background-image:url("../img//tab_bg_on_R.png"),url("../img//tab_bg_on_L.png")!important;
	background-position:top right,top left;
	background-repeat: no-repeat, no-repeat;
}
	}

/* =========================================================
   PICKUP スライド：562px以下で画像とテキストを縦積み
   ========================================================= */
@media (max-width: 562px) {

  /* スライドカード内の画像ブロックを縦並び用にリセット */
  #pickup .bxslider .slidecard p.img {
    float: none;
    width: 100%;
    margin: 0 0 10px;
    text-align: center;
  }

  #pickup .bxslider .slidecard p.img img {
    display: inline-block;
  }

  /* テキスト部分（dl）も float されている可能性があるので念のため解除 */
  #pickup .bxslider .slidecard dl {
    float: none;
    width: 100%;
  }
}

/* =========================================================
   PICKUP スライド：画像下にキャプションをセンター配置
   ========================================================= */

#pickup .bxslider .slidecard p.img {
  text-align: center;            /* p 内の内容を中央寄せ */
}

#pickup .bxslider .slidecard p.img a {
  display: inline-block;         /* 画像＋キャプションをひと塊に */
}

#pickup .bxslider .slidecard p.img img {
  display: block;                /* 画像をブロック化 → 次の要素は必ず下に来る */
  margin: 0 auto;
}

#pickup .bxslider .slidecard p.img span {
  display: block;                /* キャプションを画像の「下」に強制 */
  margin-top: 4px;               /* 画像とのすき間（お好みで調整） */
}

@media (max-width: 1024px) {
/* bxSlider 用ページャー位置 */
.bx-default-pager {
  width: 100%!important;
	position: relative!important;
}
#pickup div span {
  width: 100%;
  text-align: center;
}
	#pickup div .img {
  width: 40%;
}
	#pickup div dl {
  float: right;
  width: 60%;
}
}


/* =========================================================
   SEARCH STUDY AREA
   ========================================================= */

@media (max-width: 1024px) {
  #search_study div {
    padding: 10px;
  }

  /* main / sub の li をSP時は2列に */
  #search_study ul.main,
  #search_study ul.sub {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 8px;
    margin: 0 0 8px;
    padding: 0;
  }

  #search_study ul.main li,
  #search_study ul.sub li {
    width: calc(50% - 4px);      /* 2列 */
    float: none !important;      /* 既存floatを無効化 */
    list-style: none;
    box-sizing: border-box;
  }

  #search_study ul.main li a,
  #search_study ul.sub li a {
    display: block;              /* 全体クリックしやすく */
  }

  /* legacyの clear クラスを無効化 */
  #search_study li.clear {
    clear: none !important;
  }
	#search_study ul li {
  float: left;
  margin: 0;
}
	#search_study ul.main li a {
  padding: 22px 24px 22px 55px;
  border: none;
  color: #fff;
  font-size: 100%;
  font-weight: bold;
}
#search_study ul.sub li a {
  border: none;
  font-size: 100%;
}
	
	
#search_study ul.sub li {
  background: #378845 url(../img/btn_bg02.jpg) right top no-repeat;
}
	#search_study ul.sub li:hover {
	background-image: url(../img/btn_bg02_on.jpg);
}
	
#search_study ul.main li {
  background: #378845 url(../img/btn_bg01.jpg) right top no-repeat;
}
	#search_study ul.main li:hover {
	background-image: url(../img/btn_bg01_on.jpg);
}
}

/* =========================================================
   TAB AREA（SP：横スクロールタブ）
   ========================================================= */

@media (max-width: 1024px) {
  /* タブナビ全体を横スクロール領域に */
  #tab_nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 0 0 0 0;  /* コンテンツ左右10pxとそろえる想定 */
    box-sizing: border-box;
  }

  /* li を横一列に並べる（既存 float を殺す） */
  #tab_nav li {
    flex: 0 0 auto;
    float: none !important;
    list-style: none;
    margin: 0;
	  width: 145px;
	  margin-right: 18px;
  }

  /* タブリンクの高さを揃え、折り返さずスクロールさせる */
  #tab_nav li a.tab {
    display: block;
    padding: 16px 8px 8px;
    height: 30px !important;       /* inline style="height:xxpx" を無効化 */
    white-space: nowrap;           /* テキストは1行のまま */
	  width: 145px;
	  font-size: 90%;
    letter-spacing: -0.1em;
  }
#tab_nav li a span {
  font-size: 80%;
  letter-spacing: -0.1em;
}
	
#tab_content table td {
  background: url(../img/icon_arrow02.png) left center no-repeat;
}
}

/* =========================================================
   FIELD INFO AREA（〜690px：地図センター寄せ＋3列リスト）
   ========================================================= */
@media (max-width: 690px) {

  /* 地図画像を中央寄せ */
  #field_info .clearfix > p {
    text-align: center;
    margin-bottom: 10px;
  }

  #field_info img.maphilighted,
  #field_info img[usemap] {
    display: inline-block;
    height: auto;
    max-width: 100%;
  }

  /* 下の区リストULはすべて幅100%で回り込み解除 */
  #field_info .clearfix ul {
    float: none !important;
    width: 100% !important;
    margin: 0 0 8px;
    padding: 0;
    box-sizing: border-box;
  }

  #field_info .clearfix ul::after {
    content: "";
    display: block;
    clear: both;
  }

  /* 各liを3列のZ型レイアウトに */
  #field_info .clearfix ul li {
    float: left;
    width: 33.3333%;
    list-style: none;
    box-sizing: border-box;
  }

  #field_info .clearfix ul li a {
    display: block;
    padding: 4px 2px;
  }
}



/* =========================================================
   RANKING AREA（〜690px：地図センター寄せ＋3列リスト）
   ========================================================= */
@media (max-width: 1024px) {
#ranking div dd {
  display: inline-block;
  width: 82%;
}
}


/* =========================================================
   SIDE BANNER AREA
   ========================================================= */
@media (max-width: 1024px) {

#banner {
    grid-column: 1 / -1;
    grid-row: 6;
  }

	
	.side-banner {width: 45%; margin-right: 5%;}
	
.side-banner img {
  width: 100%;
  height: auto;
}

}

/* =========================================================
   SIDE AREA LAYOUT
   1024px以下：2カラム（child_info / mailmg / question / teacher / recruitment）
   520px以下：1カラム
   ========================================================= */

/* 521〜1024px：#side をグリッドにして2列レイアウト＋高さ揃え */
@media (min-width: 521px) and (max-width: 1024px) {

  /* サイド全体をグリッド化 */
  #side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
    row-gap: 10px;
  }

  /* 既存の float / width 指定の影響を消す */
  #side > div,
  #side > p {
    float: none;
    width: auto;
    margin: 0;
    box-sizing: border-box;
  }

  /* 1行目：magazine（全幅） */
  #side #magazine {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /* 2行目：子ども向け情報 / メルマガ（左 / 右） */
  #side #child_info {
    grid-column: 1;
    grid-row: 2;
  }

  #side #mailmg {
    grid-column: 2;
    grid-row: 2;
  }

  /* 3〜4行目：
     左：question が2行分を縦にまたいで高いカラム
     右上：teacher
     右下：recruitment
  */
  #side #question {
    grid-column: 1;
    grid-row: 3 / span 2;   /* 3〜4行目を占有 */
    border: 1px solid #CCC;
    border-top: none;
    background: #fff;
  }

  #side #question > div {
    border: none;
    border-top: none;
  }

  #side #teacher {
    grid-column: 2;
    grid-row: 3;
  }

  #side #recruitment {
    grid-column: 2;
    grid-row: 4;
  }

  /* 5行目：スタートルバナー（全幅） */
  #side p.bnr {
    grid-column: 1 / -1;
    grid-row: 5;
  }

  /* 6行目：ランキング（全幅） */
  #side #ranking {
    grid-column: 1 / -1;
    grid-row: 6;
  }

  /* 7行目以降：SIDE BANNER AREA（.side-banner）
     → 行番号は自動で 7, 8, 9… と順に下へ。
       列は常に全幅（1〜2列ぶち抜き）にする。
  */
  #side .side-banner {
    grid-column: 1 / -1;
    width: auto;          /* 既存の side-banner 幅指定を上書き */
    margin-right: 0;
  }

  /* 子ども向け情報 / メルマガ：2カラム時に高さを揃える（#side 用） */
  #side #child_info,
  #side #mailmg {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
  }

  #side #child_info > div,
  #side #mailmg > div {
    flex: 1 1 auto;
    height: 100%;
  }
	#side .bnr {
  text-align: center;
}
	
	  /* SIDE BANNER：SP時は2列のZ型レイアウト */
  #banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  #banner .side-banner {
    float: none;                 /* 既存の float を解除 */
    width: calc(50% - 5px);      /* 2列表示 */
    margin: 0 0 10px;
  }

  #banner .side-banner img {
    width: 100%;
    height: auto;
    display: block;
  }

	
}

/* 520px以下：1カラム縦積みに戻す */
@media (max-width: 520px) {

  #side {
    display: block;
  }

  #side > div,
  #side > p {
    float: none;
    width: auto;
    margin: 0 0 10px;
    box-sizing: border-box;
  }

  .bnr img {
    height: auto;
  }

  /* SIDE BANNER：SP時は2列のZ型レイアウト */
  #banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  #banner .side-banner {
    float: none;                 /* 既存の float を解除 */
    width: calc(50% - 5px);      /* 2列表示 */
    margin: 0 0 10px;
  }

  #banner .side-banner img {
    width: 100%;
    height: auto;
    display: block;
  }
		#side .bnr {
  margin-bottom: 15px;
  text-align: center;
}
}
/* =========================================================
   SIDE BANNER AREA
   1024px以下：2列（Z型）
   380px以下：1列に戻す
   ========================================================= */

/* 1024px以下：Z型 2列レイアウト */
@media (max-width: 1024px) {

  #banner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;                 /* バナー間のすき間（お好みで調整） */
  }

  #banner .side-banner {
    float: none;               /* 既存のfloatを無効化 */
    width: calc(50% - 5px);    /* 2列分の幅 */
    margin: 0;
  }

  #banner .side-banner img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* 380px以下：1列レイアウトに戻す */
@media (max-width: 380px) {

  #banner {
    display: block;
  }

  #banner .side-banner {
    width: 100%;
    margin: 0 0 10px;
  }
}

/* =========================================================
   #contents 内 magazine / child_info / mailmg レイアウト
   521〜1024px：magazine全幅＋child_info / mailmg を2列＆高さ揃え
   ========================================================= */
@media (min-width: 521px) and (max-width: 1024px) {

  /* メインカラム全体をflexコンテナに */
  #contents {
    display: flex;
    flex-wrap: wrap;
    column-gap: 10px;
    row-gap: 10px;
    align-items: stretch;
  }

  /* デフォルトでは #contents 直下の各ブロックを全幅扱いにする */
  #contents > * {
    flex: 0 0 100%;
    box-sizing: border-box;
  }

  /* MAGAZINE（SP用）は1行目を全幅で使用 */
  #contents #magazine.sp-only {
    flex: 0 0 100%;
  }

  /* 子ども向け情報 / メルマガを2列（50%ずつ）に */
  #contents #child_info.sp-only,
  #contents #mailmg.sp-only {
    flex: 0 0 calc(50% - 5px);  /* 2列にする */
    display: flex;
    flex-direction: column;
  }

  /* 中身のdivを伸ばして高さ揃え */
  #contents #child_info.sp-only > div,
  #contents #mailmg.sp-only > div {
    flex: 1 1 auto;
    height: auto;               /* 80%指定は不要なので解除 */
  }

  /* メルマガ側だけ内側余白を少し整える */
  #contents #mailmg.sp-only > div {
    padding: 10px;
  }
	
	#mailmg div {
  height: 80% !important;
}

}
@media (max-width: 1024px) {
	#child_info ul li {
  width: 100%;
  margin-bottom: 3px;
  border: 1px solid #60A42B;
  background: url(../img/btn_bg03.jpg) left top no-repeat;
}
	#child_info ul li:hover {
	background-image: url(../img/btn_bg03_on.jpg);
}
}