/* -------------------共通部分------------------- */
#wrapper{
    width: 1366px;
    margin: 0 auto; 
    padding: 0;
    box-sizing: border-box;
    background-color: #ffffff;
    font-size: 62.5%;
    line-height: 1.5;
    color: #000000;
    /* -----overflow-y:scroll;--- */
    font-family:'Noto Sans JP','Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
    }
    

    
    image{
    max-width: 100%;
    }
    
    #logo{
      
    }
    
    a{
      text-decoration: none;

    }
    
    a:link, a:visited, a:hover, a:active {
        color: #ffffff;
      }
    
    ul{
      width: 1000px;
    }
    
    #header_menu li{
      margin-right: 0px;
      margin-left: 60px;
    }


    li{
      list-style: none;
    }

    .hamburger-menu{
        display: none;
    }

       .title_decoration{
        width: 450px;
        margin: 0 auto;
        padding: 5px 0; 
        border-radius: 10px;
}
.title{
    font-size: 20px;
    margin-top: 0px;
    margin-bottom: 35px;
    letter-spacing: 0.22em;
    
   }



    .subtitle{
        font-size: 16px;
        margin-top: 0px;
        text-align: center;
        letter-spacing: 0.20em;
        margin-bottom: 35px;
    }

    .text{
        font-size: 13px;
        letter-spacing: 0.18em;
    }
  

    .flex{
        display: flex;
    }

    .space-between{
        justify-content: space-between;
   }
    

    .space-around{
        justify-content: space-around;
   }

   .parent {
    /*親要素はrelativeに*/
    position: relative;
  }

    .center{
        text-align: center;
    }

    .left{
        text-align: left;
    }
    .right{
        text-align: right;
    }




    .btn_w{
        width:430px;
        height:90px;
        line-height:90px;
        margin: 0 auto;
        margin-bottom: 150px;
    }
    .btn_w a{
        display:block;
        width:100%;
        height:100%;
        font-size: 20px;
        text-decoration: none;
        background:#000000;
        text-align:center;
        color:#ffffff;
        border-radius:5px;
        letter-spacing: 0.22em;
        border: solid 2px #000000;
        box-shadow: 0 0 0 4px #ffffff;
    }

    .btn_w a:hover{
        background-color: #000000;
        transform: scale(1.05,1.05);
    }
    
   

  
   
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mt30{margin-top: 30px;}
.mt40{margin-top: 40px;}
.mt50{margin-top: 50px;}
.mt60{margin-top: 60px;}
.mt70{margin-top: 70px;}
.mt80{margin-top: 80px;}

.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb25{margin-bottom: 25px;}
.mb30{margin-bottom: 30px;}
.mb40{margin-bottom: 40px;}
.mb50{margin-bottom: 50px;}
.mb60{margin-bottom: 60px;}
.mb70{margin-bottom: 70px;}
.mb80{margin-bottom: 80px;}
.mb90{margin-bottom: 90px;}
.mb100{margin-bottom: 100px;}



.mr5{margin-right: 5px;}
.mr10{margin-right: 10px;}
.mr20{margin-right: 20px;}
.mr30{margin-right: 30px;}
.mr40{margin-right: 40px;}
.mr50{margin-right: 50px;}

.pt5{padding-top: 5px;}
.pt10{padding-top: 10px;}
.pt20{padding-top: 20px;}
.pt30{padding-top: 30px;}
.pt40{padding-top: 40px;}
.pt50{padding-top: 50px;}
.pt60{padding-top: 60px;}
.pt70{padding-top: 70px;}
.pt80{padding-top: 80px;}
.pt90{padding-top: 90px;}
.pt100{padding-top: 100px;}
.pt110{padding-top: 220px;}



.pb5{padding-bottom: 5px;}
.pb10{padding-bottom: 10px;}
.pb20{padding-bottom: 20px;}
.pb30{padding-bottom: 30px;}
.pb40{padding-bottom: 40px;}
.pb50{padding-bottom: 50px;}
.pb60{padding-bottom: 60px;}
.pb70{padding-bottom: 70px;}
.pb80{padding-bottom: 80px;}
.pb90{padding-bottom: 90px;}
.pb100{padding-bottom: 100px;}
.pb110{padding-bottom: 110px;}

.bgc_navy{
    background-color: #182987;
    }

    .bgc_blue{
        background-color: #1d2088;
        }

        .bgc_gray{
            background-color: #efefef;
        }

    .c_white{
        color: #ffffff;
    }
    .c_gray{
        color: #595757;
    }
    .c_blue{
        color:#00a0e9;
    }

    .v_line_right{
        border-right: solid #ffffff 1px;
        padding-right: 100px;
      }

 
      .l_img{
        width: 720px;
        margin: 0 auto;
     }
    
        .img{
            width: 100%;
            }
    /* -------------------header------------------- */
.header_wrap{
    height: 100%;
}

    header a{
        color: #ffffff;
    }
    
    .header_logo{
        width: 80px;
        position: absolute;
        top: 30px;
        left: 720px;
    }

   
 /* -------------------main------------------- */
   .main{
    width: 850px;
    margin: 0 auto;
   }
    /* -------------------mainview------------------- */
    #top{
        width: 405px;
        position: absolute;
        top: 170px;
        left: 250px;
    }
    #top_text{
        font-size: 20px;
        color: #1d2088;
        font-weight: bold;
        letter-spacing : 0.10em;
        position: absolute;
        top: 220px;
        left: 830px;
    }

    .mainview{
        height: 480px;
        background-image: url(../image/mainview.jpg);
        background-repeat: no-repeat; 
        margin-bottom: 200px;
    }
   

 /* -------------------movie------------------- */
 .movie{
    margin-bottom: 200px;
 }

 .movie .l_iframe{
    width: 850px;
    height: 472px;
    margin: 0 auto;
 }
.movie iframe{
    width: 100%;
    height: 100%;
}


/* -------------------section------------------- */
.section{
    margin-bottom: 250px;
}

.section_img{
    width: 475px;
}

.section .flex{
    margin-bottom: 35px;
}

#section_text1{
    position: relative; /* relativeを指定 */
    top: 80px; /* 上から10px移動 */
    left: 30px; /* 左から20px移動 */
    letter-spacing : 0.10em;
}
#section_text2{
    position: relative; /* relativeを指定 */
    top: 80px; /* 上から10px移動 */
    right: 30px; /* 右から20px移動 */
    letter-spacing : 0.10em;
}




 /* -------------------feature------------------- */
 .feature{
    margin-bottom: 250px;
 }

    
    #feature_img1{
        margin-bottom: 90px;
    }


    #feature_img2{
        width: 422px;
        height: 205px;
    }

    .feature .text{
        padding: 8px 70px;
        padding-top: 20px;
        }

    .feature .l_text{
        background-color: #f4f1ed;
        width: 320px;
        height: 368px;
        border-radius: 10px;
    }


/* ------------------function------------------- */
   .function{
    margin-bottom: 250px;
   }

   #function_img1{
    width: 180px;
   }

   #function_img2{
    width: 505px;
   }

   /* ------------------ir------------------- */
   #ir_img1{
    margin-bottom: 250px;
   }
   .ir .l_img{
    width: 720px;
    margin: 0 auto;
 }

      /* ----------------durability------------------ */
      .durability{
        margin-bottom: 250px;
      }
      .durability .l_img{
        width: 720px;
        margin: 0 auto;
     }
      #durability_img1{
        margin-bottom: 35px;
       }

       .durability .text{
        width: 720px;
        margin: 0 auto;
       }

/* ----------------demo------------------ */
.demo{
    margin-bottom: 250px;
  }
  .demo .l_img{
    width: 720px;
    margin: 0 auto;
 }
/* ----------------nvr------------------ */
.nvr{
    margin-bottom: 250px;
  }
  .nvr .l_img{
    width: 720px;
    margin: 0 auto;
 }
 #nvr_img1,#nvr_img2{
    margin-bottom: 35px;
 }

.nvr .text{
    width: 720px;
    margin: 0 auto;
   }

  .nvr .l_text{
    margin-bottom: 110px;
  }

/* -------------------spec------------------- */
.spec_title{
    font-size: 16px;
    font-weight: 600;
    margin-top: 30px;
}

.spec .subtitle{
    font-size: 20px;
}

.spec{
    margin: 0 auto;
    margin-bottom: 100px;
}
.spec table{
    font-size: 13px;
    width: 800px;
    border: none;
    text-align: left;
}

.spec_text2{
    margin-bottom: 50px;
}

.spec th{
    border: none;
    width: 250px;
    height: 35px;
    line-height: 3.4;
}
.spec td{
    border: none;
    border-bottom: solid #333 1px;
    height: 35px;
    width: 250px;
    line-height: 2.4;
}
.spec .l_img{
    width: 400px;
    margin: 0 auto;
 }
 /* -------------------footer------------------- */
 .footer_sns_inner{
     width: 700px;
    margin: 0 auto;
     
 }   
 
 .footer_logo{
        width: 50px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .footer_menu_inner{
        width: 800px;
        margin: 0 auto;
    }
    .shop_text{
        font-size: 20px;
        text-align: center;
    }
        /*-----------------------------900px以下----------------------------*/
        @media(max-width:900px){

            /*----------------------------共通部分---------------------------*/
                    #wrapper{
                        width: 800px;
                        }
                        .header_logo{
                            width: 100px;
                            position: absolute;
                            top: 50px;
                            left: 400px;
                        }
 /* -------------------mainview------------------- */
    #top{
        width: 330px;
        position: absolute;
        top: 150px;
        left: 90px;
    }
    #top_text{
        font-size: 20px;
        color: #1d2088;
        font-weight: bold;
        letter-spacing : 0.10em;
        position: absolute;
        top: 220px;
        left: 480px;
    }

    .mainview{
        height: 400px;
        background-image: url(../image/mainview.jpg);
        background-repeat: no-repeat; 
        margin-bottom: 200px;
    }
    /* -------------------main------------------- */
    .main{
        width: 800px;
        margin: 0 auto;
       }
    
/* -------------------footer------------------- */

.footer_logo{
       width: 30px;
       margin-top: 30px;
       margin-bottom: 30px;
   }

   .footer_menu_inner{
       width: 720px;
       margin: 0 auto;
   }

   .footer_menu_inner p{
    padding-bottom: 10px;
    font-size: 10px;
}
.v_line_right{
    border-right: solid #ffffff 0px;
  }
  
   }

                    
    /*-----------------------------420px以下----------------------------*/
    @media(max-width:420px){

/*----------------------------共通部分---------------------------*/
        #wrapper{
            width: 370px;
            margin: 0 auto;
            }
        
            .header_logo{
                width: 100px;
                position: absolute;
                top: 30px;
                left: 145px;
            }
            .title_decoration{
                width: 370px;
                margin: 0 auto;
                margin-bottom: 30px;
                padding: 5px 0; 
                border-radius: 10px;
                font-size: 18px;
        }
 /* -------------------mainview------------------- */
 #top{
    width: 300px;
    position: absolute;
    top: 100px;
    left: 30px;
}
#top_text{
    font-size: 20px;
    color: #1d2088;
    font-weight: bold;
    letter-spacing : 0.10em;
    position: absolute;
    top: 380px;
    left: 50px;
}

.mainview{
    height: 470px;
    background-image: url(../image/mainview.jpg);
    background-repeat: no-repeat; 
    margin-bottom: 150px;
}
 /* -------------------main------------------- */
 .main{
    width: 370px;
    margin: 0 auto;
   }

 /* -------------------movie------------------- */
 .movie{
    margin-bottom: 200px;
 }

 .movie .l_iframe{
    width: 370px;
    height: 215px;
    margin: 0 auto;
 }




   /* -------------------section------------------- */
.section{
    margin-bottom: 150px;
}

.section_img{
    width: 200px;
}
#section_text1{
    position: relative; /* relativeを指定 */
    top: 25px; /* 上から10px移動 */
    left: 0px; /* 左から20px移動 */
    letter-spacing : 0.10em;
    font-size: 10px;
}
#section_text2{
    position: relative; /* relativeを指定 */
    top: 25px; /* 上から10px移動 */
    right: 0px; /* 右から20px移動 */
    letter-spacing : 0.10em;
    font-size: 10px;
}
   /* -------------------feature------------------- */
   .feature{
    margin-bottom: 150px;
 }

    
    #feature_img1{
        margin-bottom: 90px;
        width: 365px;
    }


    #feature_img2{
        width: 365px;
        height: 150px;
        margin-bottom: 10px;
    }

    .feature .text{
        padding: 15px 70px;
        padding-top: 10px;
        }

    .feature .l_text{
        background-color: #f4f1ed;
        width: 320px;
        height: 310px;
        margin: 0 auto;
    }

    .feature .flex{
        display: block;
    }
/* ------------------function------------------- */
.function{
    margin-bottom: 150px;
   }

   #function_img1{
    width: 200px;
    margin-bottom: 30px;
   }

   #function_img2{
    width: 360px;
   }

   .function .flex{
    display: block;
    text-align: center;
   }

    /* ------------------ir------------------- */
    .ir .l_img{
        width: 360px;
        margin: 0 auto;
     }
    
    
    #ir_img1{
        margin-bottom: 150px;
       }
/* ----------------durability------------------ */
      .durability{
        margin-bottom: 150px;
      }

      .durability .l_img{
        width: 360px;
        margin: 0 auto;
     }
      
      #durability_img1{
        margin-bottom: 30px;
       }

       .durability .text{
        width: 360px;
        margin: 0 auto;
       }
/* ----------------demo------------------ */
.demo{
    margin-bottom: 150px;
  }

  .demo .l_img{
    width: 360px;
    margin: 0 auto;
 }

  

  /* ----------------nvr------------------ */
.nvr{
    margin-bottom: 150px;
  }

  .nvr .l_img{
    margin: 0 auto;
    width: 360px;
  }

 #nvr_img1,#nvr_img2{
    margin: 0 auto;
    margin-bottom: 30px;
 }

.nvr .text{
    width: 360px;
    margin: 0 auto;
   }

  .nvr .l_text{
    margin-bottom: 100px;
  }

  /* -------------------spec------------------- */
  .spec table{
    font-size: 14px;
    width: 360px;
    border: none;
    text-align: left;
}
.spec .l_img{
    width: 300px;
    margin: 0 auto;
 }
 .spec{
    margin: 0 auto;
    margin-bottom: 50px;
}
  /* -------------------btn_w------------------ */


  .btn_w{
    width:350px;
    height:80px;
    line-height:80px;
    margin: 0 auto;
    margin-bottom: 80px;
}
.btn_w a{
    display:block;
    width:100%;
    height:100%;
    font-size: 16px;
    text-decoration: none;
    background:#000000;
    text-align:center;
    color:#ffffff;
    border-radius:5px;
    letter-spacing: 0.22em;
    border: solid 2px #000000;
    box-shadow: 0 0 0 4px #ffffff;
}

.btn_w a:hover{
    background-color: #000000;
    transform: scale(1.05,1.05);
}


/* -------------------footer------------------ */
footer{
    width: 375px;
}


.footer_sns_inner{
    width: 360px;
   margin: 0 auto;
    
}   
#content04 .shop_text{
    font-size: 10px;
    text-align: center;
    margin-bottom: 10px;
}
.footer_logo{
       width: 30px;
       margin-top: 30px;
       margin-bottom: 30px;
   }

   .footer_menu_inner{
       width: 360px;
       margin: 0 auto;
       display: block;
   }

   .footer_menu_inner p{
    padding-bottom: 10px;
    font-size: 10px;
}
.v_line_right{
    border-right: solid #ffffff 0px;
  }
   }