html,body {
	min-width: 280px; /*これ以上狭くすると、横スクロールバーが出る */
	/* max-width: 1720px; 2023/3/14 試しに、上限なしに広げてみるか*/
  margin: 0 auto;  /* 左右のマージンを自動にしてセンタリング */
  background-color: rgba(252, 248, 240,0.3); /*2023/3/23 真っ白はちょっとやだなぁ・・・*/
  /* background-color: rgb(255,255,255); 2023/3/23 真っ白はちょっとやだなぁ・・・*/
}
#container {
	width: 100%;
  position: relative;
}

#content {
  /* ヘッダーを載せた後の、コンテンツ表示の枠
　　　基本的には、不動のフレーム枠を想定 */
    clear: both;
    margin-top: 280px; /* 8/18 変更TOPの隙間を詰めたい 
                          8/19 でも、125pxでは詰めすぎ。140に
													9/27 chrome で見るとダブルので、150に
                          9/29 さくらをもっと見たいので、350に 
                          11/22 さらに微調整して320に
													1/14 もろもろ合って、350に戻す
													2/2  グロナビ外出し対応で、280に*/
    overflow: hidden; 
    z-index: -100;

    display: block;
    /* display: -webkit-flex;
    display: flex; */


    /*
    border: solid 1px #f00;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    margin-top: 40px; 
    margin-top: 20vh;
    margin-bottom: 120px;
  */
  }

.content_margin {
  margin-top: 150px !important;
}

/* 最大幅700pxでの設定  (11/22) */
@media (max-width: 700px) {
  #content {
    margin-top: 180px; /* 2/2 150⇒180*/
  }
}
/* 最大幅600pxでの設定  (11/24) */
@media (max-width: 600px) {
  #content {
    margin-top: 130px;
  }
}
@media print {
  #content {
    margin-top: 60px; /* 10/25 60 ⇒ 120 に変更 */
    position: relative;
    top:0px;
  }
}

  
/* センタリングする固定幅のコンテンツ */
.l-content-fixed {
  max-width: 1080px;  /* 2023/3/27 上限設定に戻す。 */
  margin: 0 auto;  /* 左右のマージンを自動にしてセンタリング */
  padding: 0;
}

/* ページフレームの枠用（l-content-fixedを改造） */
.l-content-pageframe {
  max-width: 1080px;  /* 2023/3/27 上限設定に戻す */
  margin: 0 auto;  /* 左右のマージンを自動にしてセンタリング */
  padding: 0 0 0 20px;

  /* display: flex;  2023/6/1 flexは不要（というより邪魔）になったので消す */
}

/* 2023/3/27 上限設定解除のクラスでコントロールしてみる */
.l-release-max {
  max-width: none;
}

/* メニューを表示するための枠 */
/* メニュー幅250＋マージン30 ⇒ 10/4 サイドバー廃止の方向
   いえいえ、上下ボタンの通り道として、40pxを確保したい。　*/
.l-sidebar {
  /* width: 280px; 
	display:block;
  flex:0 0 270px; */
  width: 0px;  /* 2023/6/1 廃止に向けて、40px　⇒ 0px*/
  order:2;
}

.l-framemain {
  flex:1 1 800px;
  order:1;
  max-width: 95%;
  margin: 0 50px 30px 20px; /* 2023/6/1 slidebar 廃止準備で、margin-right: 10px ⇒ 50px */
/* l-content-expanded から */ 

}




.l-main {
  flex:1 1 800px;
  order:1;
  max-width: 95%;
  margin-top: 0;
/* 姑息な手段は、やめよう 
  border: solid 2px #0f0;
	margin-right: 270px; */
	margin-bottom: 30px;
	margin-left: 10px;
}



/* コンテナの幅に合わせる可変幅のコンテンツ */
.l-content-expanded {
  width: auto;
  margin: 0; /* マージン0の設定なので、基本は左上寄せ */
}

/* コンテナの幅いっぱいに、マルチカラムを並べる */
.l-multicolumn {
  display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	margin: 50px -20px; /* 全体として左右に20pxはみ出す */
}

.l-2column{
  display: flex;
  flex-wrap: wrap;
}

.l-2column > .l-column {
  width: 49%;
/*  width: calc(100% / 2); ギリギリの設計だと、floatでバッティングするので。*/
	padding: 0 20px;
  border:　dotted 1px #ccc;
}

/* 最大幅700pxでの設定  (10/08) */
@media (max-width: 700px) {
  .l-2column > .l-column {
    width: 98%;
    padding: 20px 10px; 
  }
}



/* 900px以下での設定 */
@media (max-width: 900px) {
	.l-sidebar {
/*		display:none; */
		width: 40px;
	}
	.l-main {
	  max-width: 95%;
	  margin-top: 0;
		margin-right: auto;
		margin-bottom: 30px;
		margin-left: auto;
	}
}



/* 最大幅600pxでの設定 */
@media (max-width: 600px) {
  .l-content-fixed,
  .l-main,
  .l-sidebar {
    width:auto;
  }
  .l-main,
  .l-sidebar {
    max-width: 100%;
  }
  .l-main {
    margin-right: 0;
  }
  .l-content-fixed {
    padding: 0 1rem;
  }
  #content {
    display: block;
  }
  .l-sidebar {
    margin-top: 5rem;
  }
}

/* 最大幅400pxでの設定 */
@media (max-width: 400px) {

  .l-content-fixed {
    padding-left: 5px;
  }
	.l-framemain {
		margin-left:5px;
	}

}