@import url('../../cssjs/burger_menu3.css');

body { margin: 0; padding: 0;word-break:break-all; font-family:"メイリオ", Meiryo,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ＭＳ Ｐゴシック", sans-serif;}
.container { position: relative; width: 100%; min-width:320px;padding-bottom:50px;
    display: -ms-flexbox; display: -webkit-flex; display: flex;
    -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column;
    -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap;
    -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;
}
h1{ font-size:1.25em;}
#title{text-align: center; margin-bottom:0;
    -webkit-order: 0;-ms-flex-order: 0;order: 0;
	-webkit-flex: 0 0 auto;	-ms-flex: 0 0 auto;	flex: 0 0 auto;
    -webkit-align-self: auto;-ms-flex-item-align: auto;align-self: auto;
}
h2{text-align: center;font-size:0.875em; font-weight:200; margin-top:5px; margin-bottom:20px;}

.msg{ font-size:1em;}
#msg001{ border: 1px solid #b5cbaa; width:90%; max-width:800px; margin:15px 5% 20px 5%; font-size:1em;text-align: left;
    padding:20px 10px 20px 10px;border-radius:6px 6px 6px 6px / 6px 6px 6px 6px ;
    -webkit-order: 1;-ms-flex-order: 1;order: 1;
	-webkit-flex: 0 0 auto;	-ms-flex: 0 0 auto;	flex: 0 0 auto;
    -webkit-align-self: auto;-ms-flex-item-align: auto;align-self: auto;
}

.ads_Horizon{position:relative;/*border: 1px solid #b5cbaa;*/width:90%; min-height:90px; height:auto; text-align:center; margin: 20px 5% 0 5%;
    -webkit-order: 2;-ms-flex-order: 2;order: 2;
	-webkit-flex: 0 0 auto;	-ms-flex: 0 0 auto;	flex: 0 0 auto;
    -webkit-align-self: auto;-ms-flex-item-align: auto;align-self: auto;
}
.adstitle{position: absolute; width: 150px; text-align:center; height:20px; z-index: 1; top: -20px; left:50%; margin-left:-75px; font-size:0.75em;color:#c1c1c1; }

.bowl{/*border: 1px solid #b5cbaa;*/ width:100%; height: auto; margin:30px 0 30px 0;
	-webkit-order: 3;-ms-flex-order: 3;order: 3;
	-webkit-flex: 0 0 auto;	-ms-flex: 0 0 auto;	flex: 0 0 auto;
    -webkit-align-self: auto;-ms-flex-item-align: auto;align-self: auto;
    
    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{ position:relative; border: 1px solid #b5cbaa; width:96%; height:auto; margin:30px 0 30px 0;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
    
    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;    
}
       .boxtitle{ position: absolute; top:-33px;
   left:50%;transform:translateX(-50%); font-size:1.25em; background-color:#ababab; color:#ffffff; padding:0 20px 0 20px;border: 1px solid #222222;	
}

 .msgbox{ font-size:1em; width:48%; height:100%;/*border: 1px solid #0012ff;*/ padding:10px;}
 #demobtn{ position: relative;border: 1px solid #222222; font-size:1.125em; text-align:center; width:150px; margin:20px 0 20px 0; left:50%; margin-left:-75px;
  -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;}
 #demobtn:hover{ cursor:pointer; background-color:#ffc14d;}
 
 .adsbox{ width:48%; height: auto;/*border: 1px solid #0012ff;*/}

  #box01{ -webkit-order: 0; -ms-flex-order: 0; order: 0;}
  #box02{ -webkit-order: 1; -ms-flex-order: 1; order: 1;
  }
  #box03{ -webkit-order: 2; -ms-flex-order: 2; order: 2;}
  #box04{ -webkit-order: 3; -ms-flex-order: 3; order: 3;}
  #box05{ -webkit-order: 3; -ms-flex-order: 3; order: 3;}
  
  .gc{  /*border: 1px solid #b5cbaa;*/ margin:10px; padding:10px;
    -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto;
    -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;
}
  #gc01{  -webkit-order: 0; -ms-flex-order: 0; order: 0; background-repeat:no-repeat;
         background-image: url('../../images/06/0604_001.png');width:358px; height: 428px;
}
  #gc02{  -webkit-order: 1; -ms-flex-order: 1; order: 1;background-repeat:no-repeat;
	     background-image:url('../../images/06/0604_002.png');width:294px; height: 333px;
}
  #gc03{  -webkit-order: 2; -ms-flex-order: 2; order: 2;
	    width: auto; max-width:96%; height: auto;
}

  
  .codebox{border: 1px solid #0012ff; height:380px; width: calc(100% - 20px); margin:10px 10px 10px 10px;
}



#footer{ width:100%; height: 50px; left:0px; z-index: 5; bottom:0px; background-color:#000000; color:#ffffff;
  border-radius:0px 0px 467px 467px / 0px 0px 50px 50px;/*←→↑↓半径の値を、左上・右上・右下・左下*/ 
 }
  


#footer{ width:100%; height: 50px; left:0px; z-index: 5; bottom:0px; background-color:#000000; color:#ffffff;
  border-radius:467px 467px 0px 0px / 50px 50px 0px 0px;/*←→↑↓半径の値を、左上・右上・右下・左下*/ 
 }
  #footertitle{ position:relative; width: 230px; height: 27px; z-index: 1; top: 7px; left:50%; margin-left:-115px;padding:0 0 7px 0; text-align: center;}
  #footertitle a{ font-size: 22px; text-decoration:none; color:#ffffff;}
  #footertitle:hover{cursor:pointer;border-radius:3px 3px 3px 3px / 3px 3px 3px 3px;box-shadow:-1px -1px 1px #f2f2f2, 1px 1px 1px #4e4e4e;}


@media screen and (max-width:1023px){
   .msgbox{ width:100%;}
   .adsbox{ width:100%;}
}