body{margin: 0;word-break:break-all;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: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row;
    -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap;
    -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;
    -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch;
    -webkit-align-items: flex-start; -ms-flex-align: start; 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;
	-webkit-border-radius: 3px 3px 3px 3px / 3px 3px 3px 3px; -o-border-radius: 3px 3px 3px 3px / 3px 3px 3px 3px; -ms-border-radius: 3px 3px 3px 3px / 3px 3px 3px 3px; 
	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;
	-webkit-order: 0; -ms-flex-order: 0; order: 0;
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
 #box_B{border: 1px solid #ff7474;background-color:#ffdbdb; width:calc(40% - 10px); height:auto;margin:100px 5px 60px 5px;
	-webkit-order: 1; -ms-flex-order: 1; order: 1;
	display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    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;
	-webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: 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;
	-webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}
  #a_01{-webkit-order: 0; -ms-flex-order: 0; order: 0;}
  #a_02{-webkit-order: 1; -ms-flex-order: 1; order: 1;}
  #a_03{-webkit-order: 2; -ms-flex-order: 2; order: 2;}
  #a_04{-webkit-order: 3; -ms-flex-order: 3; order: 3;}
  #a_05{-webkit-order: 4; -ms-flex-order: 4; order: 4;}
  #a_06{-webkit-order: 5; -ms-flex-order: 5; order: 5;}

  #b_01{-webkit-order: 0; -ms-flex-order: 0; order: 0;}
  #b_02{-webkit-order: 1; -ms-flex-order: 1; order: 1;}
  #b_03{-webkit-order: 2; -ms-flex-order: 2; order: 2;}
  #b_04{-webkit-order: 3; -ms-flex-order: 3; 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: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-align-items: center;
    -ms-flex-align: center;
    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;}
}