@charset "utf-8";
/* CSS Document */

/*Remote control App Block*/
                #romote {display: block;width: 100%; padding: 0; margin: 0;}
/*txt*/

 #romote  h2 {
    background: -webkit-gradient(linear, left top, left bottom, from(#222), color-stop(#666), color-stop(#999798), color-stop(#fff), color-stop(#999798), to(#666));
    background: -webkit-linear-gradient(#222, #666, #999798, #fff, #999798, #666);
    background: -o-linear-gradient(#222, #666, #999798, #fff, #999798, #666);
    background: linear-gradient(#222, #666, #999798, #fff, #999798, #666);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-family: "Aldrich", "DINCondMediumRegular", "bebas_neue_cyrillicregular", "BebasNeueTurkishSubset", "BebasNeuePolishSubset", sans-serif;
    font-size: 50px;
    text-transform: uppercase;
    text-align:left;
    margin-top: 16px; }
    @media (max-width: 768px) {
       #romote  h2 {
        font-size: 32px; } }


#romote  p {
    font-size: 18px;
    text-align:left;    
    margin: 0 auto;
     }


/*txt2*/

              
               #romote .imgbox {display: block; width: 100%; padding: 0; position: relative;}
             .hideSamll {display: block;}
                 #romote .imgbox img {position:relative; width: 100%; z-index: 0;}
                 #romote .imgbox .tBox {position: absolute; left: 10%; top:10%; width: 80%; display: flex;justify-content: space-between;z-index: 5; align-items: center;  align-self: center;}
                #romote .imgbox .tBox .item {width: 70%; padding-right: 15%; }
               
                #romote .imgbox .tBox .imgBox {width: 20%;}
                
                .qRcode {display: inline-flex;margin-top: 10%; flex-direction: row; align-items: center; width: 100%;}
                .qitem {width: 25%; margin-right: 8%;text-align: center; }
               #romote .qitem figure img{width: 65%;display: block; margin: 0 auto;}
               #romote .qitem figcaption {padding-top: 10px;font-size: 16px;line-height: 20px;}
               #romote  .popBtn {display: block;width: 40%; z-index: 10; }
               #romote .popBtn a {display: block; border: 2px solid #FFF; padding: 20px;color: #FF0000; font-size: 18px;line-height: 18px; text-align: center;text-transform: uppercase;}
                #romote .popBtn a:hover {background-color: #ff0000; color: #FFF;border-color: #FF0000;}
                
                .modal-backdrop { position: absolute;}
                #romote ul.support-listB {display: flex; width: 100%; margin: 0 auto;flex-wrap: wrap;  }
  
    
    ul.support-listB li {display: block; width: 50%; margin-bottom: 1px; }
    ul.support-listB li a {display: block; border: 1px solid; padding: 15px; text-align: center;}
    ul.support-listB li a:hover ,ul.support-listB li a:focus {border-color: #ff0000;}
    



@media (max-width:1200px){
    
    
    #romote .imgbox .tBox .item{padding-right: 0;}
    
}

/*modal*/
 
 .modal-content {
     background: #222;
 }
 
 .modal-header {
     padding: 15px 30px;
     border-bottom: 1px solid #444;
     background: #222;
     text-align: center;
     font-size: 24px;
 }
 
 .modal-body {
     position: relative;
     padding: 15px 60px;
     background: #222;
     color: #fff;
 }
 
 .modal-body hr {
     display: none;
 }
 
 .modal-conten {
     border: 0;
 }
 
 .modal-content p {
     margin: 15px 0;
     color: #ddd;
     font-family: "Meiryo UI", "メイリオ", Meiryo, Osaka, "小塚ゴシック Pro H", KozGoPr6N-Heavy, KozGoPro-Heavy, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
 }
 
 .modal-content ol,
 .modal-content li {
     color: #ddd;text-align: left;
 }
 
 .modal-content ol {
     padding-left: 20px;
 }
 
 .modal-content .h4,
 .modal-content h4 {
     font-weight: bold;
     font-size: 18px;
     color: red;
     font-family: "Meiryo UI", "メイリオ", Meiryo, Osaka, "小塚ゴシック Pro H", KozGoPr6N-Heavy, KozGoPro-Heavy, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif !important;
 }
 
 .modal-footer {
     padding: 15px;
     text-align: right;
     border-top: 1px solid #444;
     background: #222;
 }
 
 .modal-footer .btn-default {
     color: #fff;
     background-color: red;
     border-color: red;
 }
 
 .modal-content .close {
     float: right;
     font-size: 21px;
     font-weight: 700;
     line-height: 1;
     color: #fff;
     text-shadow: 0 1px 0 #fff;
     filter: alpha(opacity=20);
     opacity: 1;
 }
 
 .modal-content .close:focus,
 .modal-content .close:hover {
     color: #fff;
 }
 
 .error {
     color: #ff0000;
 }
 
 @media (max-width: 768px) {
     .modal-body {
         padding: 15px 20px;
     }
 }

    
    #romote .modal-dialog {
         top:2%;}
                @media (max-width:960px){
                   
                    #romote .imgbox .tBox{position: relative; flex-wrap: wrap;left: auto; top:auto; width: 90%; margin: 0 auto;}
                    #romote .imgbox .tBox .item{width: 100%; align-items: center;padding-right: 0;}
                    .qRcode{align-items: center;justify-content:space-around;}
                    .qitem { width: 40%; text-align: center;}
                    #romote .popBtn {width: 60%;}
                    
                    #romote .imgbox .tBox .imgBox{width: 40%; margin: 0 auto;}
                    
                    .hideSamll {display: none;}
                    
                }