body{margin: 0;font-family: "メイリオ", Meiryo,"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ＭＳ Ｐゴシック", sans-serif;
     background-color: #010088;}
 #container{ position:relative; width: 100%; height: 100%; z-index: 1;top: 0px;left: 0px; overflow:hidden;
    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; 
 }
 .flexitem{
    -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;
 }
 #titlebox{ -webkit-order: 0; -ms-flex-order: 0; order: 0;
   margin-top:30px/*3.75*/; width: auto; height: auto; z-index: 2;
 }
 .rtunbtn{-webkit-order: 1; -ms-flex-order: 1; order: 1;
   background-color:#ffd89b;font-size:0.875em; margin-top:15px/*1.875*/; margin-bottom:15px/*1.875*/; width:180px;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;}
 
 #subtitle{ -webkit-order: 2; -ms-flex-order: 2; order: 2;
   width: 100%; max-width:500px/*62.5*/;	height: 30px/*3.75*/;z-index: 5; margin-top:0px;
   color: #ffb700; text-align:center; font-size:26px;
   text-shadow: 2px/*0.25*/ 2px 6px/*0.75*/ rgba(0, 0, 0, 1);	
 }
 #mainimage{ -webkit-order: 3; -ms-flex-order: 3; order: 3;
   position: relative; border: 1px solid #ff0000; width: auto;height: auto; z-index: 4; margin-top:20px/*2.5*/;
 }
 #mainimageBG{ -webkit-order: 4; -ms-flex-order: 4; order: 4;
   position: relative; border: 1px solid #ff0000; width: 800px/*100*/;height: 760px/*95*/; margin-top:30px/*3.75*/; background-image: url('../images/Blessed5.jpg');z-index: 4;
   background-repeat:no-repeat;background-size:contain;
 }
 #mainimageBG2{ -webkit-order: 5; -ms-flex-order: 5; order: 5;
   position: relative;border: 1px solid #ff0000; width: 800px;height: 760px; margin-top:30px; background-image: url('../images/Blessed5.jpg');z-index: 4;
   background-repeat:no-repeat;background-size:contain;
 }
  #pre{ position: absolute; width:96%; height: 5%;z-index: 6; top: 2%;left:2%;color:#ffffff; text-align: left;font-size:20px/*2.5*/;
  }
  #pre3{ position: absolute; width:96%; height: 5%;z-index: 6; top: 2%;left:2%;color:#ffffff; text-align: left;font-size:20px;
  }
  #dragncopyright{ position: absolute; width: 97%;	height: 22px;z-index: 7;
    right:3%; bottom:1%;color:#6608FF; text-align: right;font-size:16px; font-weight:500; text-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
  }
  #dragncopyright3{ position: absolute; width: 97%;	height: 22px;z-index: 7;
    right:3%; bottom:1%;color:#6608FF; text-align: right;font-size:16px; font-weight:500; text-shadow: 2px 2px 3px rgba(0, 0, 0, 1);
  }
 #ads{-webkit-order: 6; -ms-flex-order: 6; order: 6;
    width:96%; height:auto; min-height:100px; text-align:center; margin-top:10px;
 }
@media screen and (max-width: 800px){
  #titlebox{ width:41.75%; height: 5.75vw; margin-top: 3.75vw;}
  #titlebox img{width:100%; }
  .rtunbtn{margin-top:1.875vw; margin-bottom:1.875vw;}
  #subtitle{font-size:3vw;height: 3.75vw;}
  #mainimage{margin-top:2.5vw;}    
  #mainimageBG{ width:99.75vw;height: 95vw; margin-top:3.75vw;}
  #ads{width:100%;}
  #mainimage img{ width:100%;}
  #pre{font-size:2.5vw; }
}
@media screen and (max-width: 500px){
  #dragncopyright{ height: 4.4vw; font-size:3.2vw; text-shadow: 0.4vw 0.4vw 0.6vw rgba(0, 0, 0, 1);}
}