B32;331;0cB*{
    margin                    : 0 0 0 0;
}

body{
    background-color          : #001820;
    background-image          : url(./indexbgload.png);
    color                     : #303030;
    background-attachment     : fixed ;
    background-size           : cover;
    image-rendering: optimizeSpeed;    /* Legal fallback */ 
    image-rendering: -moz-crisp-edges;   /* Firefox  */ 
    image-rendering: -o-crisp-edges;   /* Opera   */ 
    image-rendering: -webkit-optimize-contrast; /* Safari   */ 
    image-rendering: optimize-contrast;   /* CSS3 Proposed */ 
    image-rendering: crisp-edges;    /* CSS4 Proposed */ 
    image-rendering: pixelated;     /* CSS4 Proposed */ 
    -ms-interpolation-mode: nearest-neighbor; /* IE8+   */ 
    margin                    : 0 auto;
    background-position:80% 50%; 
    font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}

.hidden {
  display: none;
}


.body_box{
    
    margin                    : 0 auto; 
    height                    : 100%;
    width                    : 100%;
//    -webkit-box-shadow        : 6px 10px 6px -6px #36647d;
//       -moz-box-shadow        : 6px 10px 6px -6px #36647d;
//            box-shadow        : 6px 10px 6px -6px #36647d;
}

a {
    text-decoration: none;
    font-size                 : 16pt;
}


a:link    { color: #efa24d; }
a:visited { color: #efa24d; }
a:hover   { color: #efa24d; }
a:active  { color: #efa24d; }

.fa-2x{
    font-size                 : 15pt;
    padding-left              : auto;
/*    padding-right             : 5px;*/
}

ul {
    list-style-type           : none;
    display                   : block;
    width                     : 0px;
    text-align                : center;
    margin-bottom             : 20px;
    padding-left : 2%;
    position:absolute;
    bottom:0%;
    left:0%;
}

ul.ulL{
    list-style-type           : none;
    display                   : block;
    width                     : 32px;
    text-align                : center;
    margin-bottom             : 20px;
    padding-left : 2%;
    position:absolute;
    bottom:0%;
    left:1%;
}

ul.ulR{
    list-style-type           : none;
    display                   : block;
    width                     : 32px;
    text-align                : center;
    margin-bottom             : 20px;
    padding-left : 3%;
    position:absolute;
    bottom:0%;
    left:60px;
}

li {
  list-style: none;
   overflow: hidden;
    
    /*display                   : -moz-inline-box; */
    display                   : inline-block; 
    font-size                 : 16pt;
    width                     : 32px;
    height                    : 32px;
     padding-top               : 10px;
    padding-bottom            : 10px;
    padding-right             : 10px;
    padding-left              : 10px;
    margin-bottom             : 18px;
    background-color          : rgba(0,0,0,0.8);
    text-align                : center;
    color                     : #ffffff;
    border-radius             : 12px;   /* CSS3草案 */  
    -webkit-border-radius     : 12px;   /* Safari,Google Chrome用 */  
    -moz-border-radius        : 12px;   /* Firefox用 */  
    animation: fadeIn 1s ease 0.3s 1 normal;
}

@keyframes fadeIn { /*animetion-nameで設定した値を書く*/
  0% {
   padding-left:0;
   opacity: 0} /*アニメーション開始時は不透明度0%*/
  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/
}

li:hover{
    background-color          : rgba(255,180,0,0.5);
}


.catchcopy{
     width                    : 100%;
     color                    : #bababa;
     font-size                : 12pt;
     text-align               : center;
     padding-top              : 40px;
     padding-bottom           : 80px;
}

.warn{
     height                   : autp;
     color                    : #bb0000;
     padding                  : 10px;
     font-size                : 8pt;
     text-align               : right;
}

.description{
     margin                   : 0 auto;
     width                    : 92%;
     color                    : #ffffff;
     text-align               : center;
}

.description p{
     height                   : auto;
     color                    : #ffffff;
     padding                  : 10px;
     font-size                : 11pt;
     text-align               : left;
}

h1{
     margin                   : 0 auto; 
     width                    : 92%;
     color                    : #ffffff;
     font-size                : 20pt;
     text-align               : left;
     //border-left              : 10px solid #ff0000;
     //border-bottom            : 2px solid #ff00ff;
     //border-left              : 30px solid #ffffff;
     border-bottom            :  2px solid #ffffff;
     margin-bottom            : 10px;
}


h2{
     //color                    : #ff0000;
     padding                  : 5px 5px;
     width                    : auto;
     //color                    : #000000;
     color                    : #ffffff;
     font-size                : 16pt;
     text-align               : left;
}

.shadow{
    margin                    : -35px 40px auto -20px; 
    width                     : auto;
    background-color          : #00aa99;
    //-webkit-box-shadow        : 0 10px 6px -6px #36647d;
    //   -moz-box-shadow        : 0 10px 6px -6px #36647d;
    //        box-shadow        : 0 10px 6px -6px #36647d;
}

.bg_red{
    border-left               : 14px solid #ff0000;
    border-bottom             :  1px solid #ff0000;
}

.bg_green{
    border-left               : 14px solid #00ff00;
    border-bottom             :  1px solid #00ff00;
}

.bg_blue{
    border-left               : 14px solid #0000ff;
    border-bottom             :  1px solid #0000ff;
}

.bg_yellow{
    border-left               : 14px solid #ffff00;
    border-bottom             :  1px solid #ffff00;
}

.bg_magenta{
    border-left               : 14px solid #ff00ff;
    border-bottom             :  1px solid #ff00ff;
}

.bg_cyan{
    border-left               : 14px solid #00ffff;
    border-bottom             :  1px solid #00ffff;
}

.badge{
     width                    : 40%;
     height                   : auto;
     padding                  : 0 4%;
}


.card_tile{
    display                   : inline-block;
    //background-color          : #550000;
    //max-width                 : 600px;
    margin                    : 0px auto;
    margin-top                : 10px;
    padding                   : 0;
    height                    : auto; 
    width                     : 100%;

}

.card_box{
    display                   : inline-block;
    margin-top                : 25px;
    margin-bottom             : 20px;
    padding-top               : 10px;
    padding-bottom            : 10px;
    padding-left              : 0px;
    padding-right             : 0px;
    min-width                 : 320px;
    width                     : 42%;
    height                    : 400px;
    //background-color          : #000040;
    background-color          : #ffffff;
    //border                    : solid 10px #ffffff ;
    border-radius             : 10px;        /* CSS3草案 */  
    -webkit-border-radius     : 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius        : 10px;   /* Firefox用 */  
}

.left_box{
    margin-left               : 6%;
    margin-right              : 2%;
}

.right_box{
    margin-left               : 2%;
    margin-right              : 6%;
}

.size_320{
     width                    : 300px;
     height                   : 300px;
}

.thmb_box{
     width                    : 100%;
     height                   : 320px;
     margin                   : 0 auto;
     padding                  : 0 0;
     text-align               : center;
}

.thmb_box img{
     margin                   : 10px auto;
//     -webkit-box-shadow       : 0 10px 6px -6px #36647d;
//       -moz-box-shadow        : 0 10px 6px -6px #36647d;
            //box-shadow        : 0 10px 6px -6px #36647d;
}

.thmb_box iframe{
//     -webkit-box-shadow       : 0 10px 6px -6px #36647d;
//       -moz-box-shadow        : 0 10px 6px -6px #36647d;
//            box-shadow        : 0 10px 6px -6px #36647d;
}

@media screen and (max-width:762px) { 
    .shadow{
      margin                    : -15px 40px auto -10px;
      //margin                    : 0px; 
      width                     : auto;
//      -webkit-box-shadow        : 0 10px 6px -6px #36647d;
//         -moz-box-shadow        : 0 10px 6px -6px #36647d;
//              box-shadow        : 0 10px 6px -6px #36647d;
    }
    
    .card_box{
      height                    : 360px;
      min-width                 : 280px;
      width                     : 92%;
    }
    
    
    /*　画面サイズが480pxからはここを読み込む　*/
    .left_box{
      margin-left               : 4%;
      margin-right              : 4%;
    }

    .right_box{
      margin-left               : 4%;
      margin-right              : 4%;
    }
    
   .size_320{
       width                    : 240px;
       height                   : 240px;
   }

   .thmb_box{
       width                    : 100%;
       height                   : 240px;
       padding                  : 0 0;
       text-align               : center;
  }
}

.card_box p{
     height                   : 60px;
     padding                  : 10px;
     font-size                : 11pt;
     text-align               : left;
}

.mainlogo{
    padding-left : 2%;
     width                    : 200px;
     height                   : 60px;
     color : rgba(255,255,255,1);
     animation: fadeInL 2s, ease 2s, 1 normal;
}

@keyframes fadeInL { /*animetion-nameで設定した値を書く*/
  0% {
   opacity: 0} /*アニメーション開始時は不透明度0%*/
  100% {opacity: 1} /*アニメーション終了時は不透明度100%*/
}


.size_100{
     width                    : 100%;
     height                   : auto;
}


.size_auto{
     width                    : auto;
     height                   : auto;
}

#info{
      width                   : 100%;
      height                  : 40%;
     //background-color         : #ffffff;
}


.left_div{
/*      float                   : left;*/
}

@media screen and (max-width:762px) { 
  .left_div{
        float                   : none;
  }
}

.clear_div{
      clear                   : both;
}

.clear_div:after{
      clear                   : both;
}

.twitter-timeline{
	 margin                   : 0;
}

.copyright{
      position:absolute;
      bottom:0%;
      left:0%;
      margin-top : 10px;
      margin-left : 10px;
      color : rgba(0,200,255,0.2);
      width                    : 100%;
      font-size                : 10pt;
      text-align               : right;
}

.text{
     font-size                : 10pt;
     width                    : 80%;
     margin                   : 10px auto;
     padding                  : 10px 10px;
     border                   : 1px solid #448799;
}