body{margin: 0;font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ＭＳ Ｐゴシック", sans-serif; } 
 #container{position: relative; background-color:#fdfae8; width:100%; height: auto; min-height:600px; z-index: 1; top: 0px; left:0px;
  display: flex; 
  flex-direction: row; 
  flex-wrap: nowrap; 
  justify-content: center; 
  align-content: stretch; 
  align-items: flex-start; }
 #header{border: 1px solid #9b9b9b; position:absolute ; top:0px; height:65px; width: 90%; background-color:#c4cec5;}
 h1{ font-size:1em;}
 #title{ text-align: center; margin-bottom:0; }
 h2{ text-align: center;font-size:0.875em; font-weight:200; margin-top:5px; margin-bottom:10px; }
 .rtunbtn{ position: absolute; border: 1px solid #d5af00;background-color:#ffd89b;font-size:0.875em; margin-top:70px; width:180px; left:50%; margin-left:-90px; 
 text-align:center;	border-radius:3px 3px 3px 3px / 3px 3px 3px 3px;}
.rtunbtn a{ text-decoration:none;}
.rtunbtn:hover, .rtunbtn:focus, .rtunbtn:active { cursor:pointer;}
.rtunbtn:hover a{color:#ff0000;}
 #box_A{border: 1px solid #ff7474; background-color:#ffdbdb; width:calc(60% - 10px); height: auto; margin:100px 5px 60px 5px;
	order: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: stretch;
    align-items: flex-start;
}
 #box_B{border: 1px solid #ff7474;background-color:#ffdbdb; width:calc(40% - 10px); height:auto;margin:100px 5px 60px 5px;
	order: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: center;
}
  .boxA{border: 1px solid #2e9f00; background-color:#e0ffd4;
    width:300px; height:auto; min-height:500px; margin:10px 5px 0 5px; padding:20px 0 0 20px;
    flex: 0 1 auto;
    align-self: auto;
}
  .boxB{border: 1px solid #6373fb;background-color:#d4d9ff;
    width:80%; height:auto;min-height:300px; margin:10px 5px 10px 5px;padding:20px 0 0 20px;
    flex: 0 1 auto;
    align-self: auto;
}
  #a_01{ order: 0;}
  #a_02{ order: 1;}
  #a_03{ order: 2;}
  #a_04{ order: 3;}
  #a_05{ order: 4;}
  #a_06{ order: 5;}

  #b_01{ order: 0;}
  #b_02{ order: 1;}
  #b_03{ order: 2;}
  #b_04{ order: 3;}
#footer{ border: 1px solid #9b9b9b; position:absolute; width:90%; height: 40px; z-index: 5; bottom:0px; background-color:#999999;
   color:#ffffff; text-align:center; padding:15px 0 0 0;
}
@media screen and (max-width:1140px){
 #container{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: stretch;
    align-items: center; }
 #box_A{width:calc(100% - 10px); margin:100px 5px 20px 5px;}
 #box_B{width:calc(100% - 10px); margin:30px 5px 60px 5px;}
}