/* header */

header{
    display: flex;
    width: 96%;
    
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 10px 2%;
    box-shadow: 0px 10px 10px -6px rgba(0, 0, 0, 0.1);
    position: fixed;
    background-color: #fff;
    /* background-color: red; */
    z-index: 50;
    margin: 0;
    font-size: 15px;
    letter-spacing: 1.6px;
    top: 0;
    }
    
    
    
    h1{
        width: 290px;
        display: flex;
        font-size: 25px;
       align-items: center;
       font-weight: inherit;
       /* background-color: red; */
       letter-spacing: 3px;
    }
    
    
    h1 img{
      width: 80px;
      height: 50px;
      margin: 0 10px 0 0;
    }
    
    
    a{
      width: fit-content;
    }
    
    
    .top{
        position: relative;
        width: 100%;
        height: 100vh;
        background:black;
        top: 0;
        color: #fff;
    }
    
    
    .top h2{
        position: absolute;
        left: 50px;
        bottom: 50px;
        /* background-color: red; */
        /* text-align: center; */
        padding: 1em;
        background: -webkit-linear-gradient(to right, rgb(0, 0, 0), transparent);
        background: linear-gradient(to right, rgb(0, 0, 0), transparent);
        font-size: 50px;
        line-height: 25px;
        letter-spacing: 1px;
    }
    .top h2 span{
        font-size: 16px;
    }
    
    header ul a{
      /* background-color: pink; */
      margin: 0 20px;
    }
     .nav_a:hover{
      transition: all .3s ease-in-out;
      opacity: 0.6;
    }
    
    
    
    
    header ul li{
     
        /* background-color: red; */
    }
    
    
    header ul .h_btn{
       background-color: #03008F;
       color: #fff;
        /* height: 60px; */
        text-align: center;
        padding: 15px 30px;
        overflow:hidden;
    }
    
    
    
    
    .h_btn {
      border: none;
      display: block;
      text-align: center;
      cursor: pointer;
      text-transform: uppercase;
      outline: none;
      overflow: hidden;
      position: relative;
      color: #fff;
      font-weight: 700;
      font-size: 15px;
      padding: 17px 60px;
      margin: 0 auto 0 30px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.20);
    }
    
    .h_btn span {
      position: relative; 
      z-index: 2;
    }
    
    
    .h_btn:after {
      z-index: 1;
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 490%;
      width:200%;
      color: #fff;
      background: #5ab4f1;
      -webkit-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out;
      -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
      transform: translateX(-98%) translateY(-25%) rotate(45deg);
    }
    
    .h_btn:hover:after {
      -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
      transform: translateX(-9%) translateY(-25%) rotate(45deg);
    }
    
      
    
    
    .top .video{
      width: 100%;
      height: 100vh;
      object-fit: cover;
      position: fixed;
      z-index: -0;
    }
    
    
    
    
    
    
    .product{
        /* background-color: pink; */
        text-align: center;
        padding: 50px 0 80px;
        position: relative;
        background-color: #fff;
    }
    
    
    
    
    
    
    
    .sec_title{
        font-size: 34px;
        /* margin: auto; */
        width: 220px;
        text-align: center;
        line-height: 40px;
        border-bottom: 0.5px solid #333;
        margin: 40px auto 80px;
    }
    
    
    .sec_title span{
        font-size: 16px;
        /* background-color: pink; */
        
    }
    
    
    
    
    
    
    .top_content{
        display: flex;
        width: 1100px;
        margin: 20px auto 30px;
        justify-content: space-around;
    }
    
    .top_content_text{
      width: 500px;
      line-height: 40px;
      font-size: 16px;
      text-align: left;
      letter-spacing: 1.2px;
      text-align: center;
    }
    .top_content_text div{
      text-align: left;
    }
     .btn{
      text-align: center;
    background-color: #03008F;
    color: #fff;
    /* width: 200px; */
    /* height: 50px; */
    padding: 10px 100px;
    font-size: 18px;
    margin: 40px auto 0;
    display: inline-block; /* インラインブロックにすることで幅を調整 */
    
    }
    
    .top_content_img{
        width: 500px;
    }
    
    
    .btn:hover{
      opacity:0.8;
        transition:0.3s;
    }
    
    
    .business{
      position: relative;
        background-image: url("../img/business.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        padding: 40px 0 70px;
        text-align: center;
    }
    .business .sec_title{
      margin: 40px auto;
    }
    .business_text{
        width: 990px;
        text-align: left;
        line-height: 50px;
        letter-spacing:1.2px;
        margin: 50px auto;
    }
    
    .business .btn{
      padding: 20px 100px; 
    }
    
    .achievements{
      position: relative;
        padding: 60px 0  50px;
        background-color: #fff;
    }
    
    
    
    
    
    
    
    
    
    
    
     /*der
      faq */
      
     #faq{
      position: relative;
        /* margin:20px 0 0px 0; */
       padding: 70px 0 50px;
        background-image: url("../img/question.jpg");
        background-repeat: no-repeat;
        background-size: cover;
      }
      
      
      
      .faq-bg{
        position: relative;
        height: 55vh;
        background:url("../img/pict_05.jpg") no-repeat center;
        background-size:cover;
        margin: 0 0 200px 25%;
      }
      
      .faq-bg::after{
        content:'';
        position: absolute;
        top:20%;
        left:-32%;
        width:100%;
        height:55vh;
        background:#f3f3f3;
        z-index: -1;
      }
      
      @media screen and (max-width:768px) {
      
      .faq-bg,
      .faq-bg::after{
        height:35vh;
      }
      }
      
      @media screen and (max-width:550px) {
      #faq{
        /* margin:0 0 50px 0; */
      }
      
      
      
      .faq-bg{
        margin:0 0 100px 25%;
      }
      
      .faq-bg,
      .faq-bg::after{
        height:20vh;
      }
      }
      
      /*===========================================================*/
      /*機能編  9-2-2 任意の場所をクリックすると隠れていた内容が開き、先に開いていた内容が閉じる*/
      /*===========================================================*/
      
      /*アコーディオン全体*/
      .accordion-area{
        list-style: none;
        width: 86%;
        max-width: 900px;
        margin:40px  auto;
        padding: 0;
        /* background-color: red; */
        display: block;
      }
      
      .accordion-area li{
        margin: 15px 0;
      }
      
      .accordion-area section {
      border: 1px solid #ccc;
      }
      
      /*アコーディオンタイトル*/
      .title {
        position: relative;/*+マークの位置基準とするためrelative指定*/
        cursor: pointer;
        font-size:1rem;
        font-weight: normal;
        padding: 1% 4% 1% 70px;
        transition: all .5s ease;
      }
      
      @media screen and (max-width:768px) {
      .title {
        font-size:0.9rem;
      }
      }
      
      /*アイコンの＋と×*/
      .title::before,
      .title::after{
        position: absolute;
        content:'';
        width: 15px;
        height: 2px;
        background-color: #333;
        
      }
      .title::before{
        top:48%;
        left: 15px;
        transform: rotate(0deg);
        
      }
      .title::after{    
        top:48%;
        left: 15px;
        transform: rotate(90deg);
      
      }
      
      /*　closeというクラスがついたら形状変化　*/
      
      .title.close::before{
      transform: rotate(45deg);
      }
      
      .title.close::after{
      transform: rotate(-45deg);
      }
      
      /*アコーディオンで現れるエリア*/
      .box {
        display: none;/*はじめは非表示*/
        /* background: #f3f3f3; */
      margin:0 3% 3% 3%;
        padding: 3%;
      }
      
      #faq section .box{
        background-color: #ebebeb;
        width: 90%;
        margin: 10px auto;
        color: #333;
      }
      
      
      
      @media screen and (max-width:868px){
        .title {
          font-size:14px;
        }
        #faq section .box{
          font-size: 13px;
        }
      }
      
      
      
      .company{
        position: relative;
        /* background-image: url("../img/company.jpg");
        background-size: cover; */
        padding: 80px 0;
        border: 10px solid #03008F;
        color: #fff;
        text-align: center;
      }
      
      .company .sec_title{
    
        border-bottom: 0.5px solid #fff;
    }
      .company .btn{
        padding: 20px 100px; /* パディングの調整 */
        /* width: 300px; 自動調整 */
        display: inline-block; /* インラインブロックにすることで幅を調整 */
        margin: auto;
    
      }
    
      .Infomation {
        position: relative;
        background-color: #fff;
        padding: 30px 0;
      }
      .Infomation .top_content{
        justify-content: center;
        font-size: 14px;
        line-height: 25px;
      }
      .top_content_contact{
    margin: 50px 5px;
        padding: 50px;
        width: 400px;
        box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.2);
        text-align: center;
        /* background-color: red; */
      }
    
    
    
      .top_content_contact h2{
    margin:20px auto 30px;
      }
    
    
      .top_content_contact h3{
        font-size: 30px;
        margin: 50px auto;
      }
    
    
    
    
    
      /* footer */
    
      footer{
        position: relative;
        background-color: #fff;
        width: 100%;
        border-top: 1px solid #ebebeb ;
        text-align: center;
      }
    
    
      .flr{
        display: flex;
        justify-content: space-between;
        width: 90%;
        margin: auto;
      }
      footer h1 {
        padding: 0;
        display: flex;
      }
      footer h1{
        font-size: 25px;
        height: 70px;
        margin: 20px 0 0 0;
        align-items: center;
        /* background-color: pink; */
       
      }
     
      footer h1 a{
        align-items: center;
        display: flex;
      }
      footer h1 img{
        width: 70px;
        /* padding: 20px; */
        /* background-color: red; */
        height: fit-content;
      }
    
      .flt{
        font-size: 14px;
      }
      .footer_text{
        text-align: left;
    line-height: 28px;
    font-size: 14px;
    margin: 20px auto;
      }
    
    .fr{
      display: flex;
    }
    
      footer ul{
        margin: 50px 80px;
        display: block;
        line-height: 40px;
      }
    
      footer ul li{
        margin: 20px 0;
        text-align: left;
        font-size: 14px;
        align-items: center;
        width: fit-content;
      }
    
    
    
      footer i{
        margin: 0 10px 0 0;
      }
     
      .footer_bottom{
        background-color: #03008F;
        color: #fff;
        display: flex;
        width: 96%;
        padding: 15px 2%;
        justify-content: space-between;
        font-size: 12px;
      }
    
      footer .footer_tel a{
      background-color: #03008F;
      color: #fff;
      border-radius: 10px;
      padding: 15px 25px;
     width: fit-content;
      margin: 20px 0 0 0 ;
    }
    
    
    /* レスポンシブ */
    
    @media screen and (min-width:1150px){
      .openbtn{
        display: none;
      }
    }
    
    @media screen and (max-width:1150px){
    
    
    
    header{
      height: 35px;
      }
      
      h1{
          width: 250px;
          font-size: 23px;
      }
      
      h1 img{
        width: 50px;
        height: 35px;
      }
     
    
      header ul {
        display: none;
       }
    
    

    /*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
    .openbtn{
        /*ボタン内側の基点となるためrelativeを指定。
    追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
        position: relative;
        cursor: pointer;
        width: 40px;
        height:50px;
        border-radius: 5px;
      z-index: 80;
    }
    
    /*ボタン内側*/
    
    .openbtn .openbtn-area{
        transition: all .4s;
    }
    
    .openbtn span{
        display: inline-block;
        transition: all .4s;/*アニメーションの設定*/
        position: absolute;
        /* left: 14px; */
        height: 2px;
        border-radius: 1px;
        background:#03008F;
          width: 100%;
      }
    
    
    .openbtn span:nth-of-type(1) {
        top:15px;	
    }
    
    .openbtn span:nth-of-type(2) {
        top:23px;
    }
    
    .openbtn span:nth-of-type(3) {
        top:31px;
    }
    
    /*activeクラスが付与されると
    線と周りのエリアが回転して×になる*/
    
    .openbtn.active .openbtn-area{
        transform: rotateY(-360deg);
      /* background:#ffffff; */
    }
    
    .openbtn.active span:nth-of-type(1) {
        top: 16px;
        left: 5px;
        transform: translateY(6px) rotate(-135deg);
        width: 80%;
        background:#ffffff;
    }
    
    .openbtn.active span:nth-of-type(2) {
        opacity: 0;
    }
    
    .openbtn.active span:nth-of-type(3){
        top: 28px;
        left: 5px;
        transform: translateY(-6px) rotate(135deg);
        width: 80%;
        background:#ffffff;
    }
    
    
    
      .top h2{
          position: absolute;
          left: 40px;
          bottom: 40px;
          font-size: 34px;
          line-height: 15px;
      }
    
      .top h2 span{
          font-size: 13px;
      }
      
    
      
      
      .sec_title{
          font-size: 30px;
          width: 200px;
          line-height: 32px;
      }
      
      
      .sec_title span{
          font-size: 13px;
      }
      
      
      
      .top_content{
          width:fit-content;
          height: 620px;
          margin: 20px auto 30px;
          position: relative;
      }
      
      .top_content_text{
        width: 500px;
        line-height: 30px;
        font-size: 14px;
        position: absolute;
        bottom:0;
      }
      
    
     
      .top_content_img{
          width: 500px;
          position: absolute;
       top:0;
      }
      
      
    
      
      
      .business{
        position: relative;
          background-image: url("../img/business.jpg");
          background-repeat: no-repeat;
          background-size: cover;
          padding: 40px 0 70px;
      }
      .business .sec_title{
        margin: 40px auto;
      }
      .business_text{
          width: 75%;
          line-height: 40px;
          font-size: 14px;
      }
    
      
    
      
        
      .Infomation{
        height: 430px;
      }
        
      .Infomation .sec_title{
    font-size: 25px;
    line-height: 25px;
    
      }
        .Infomation .top_content{
          /* display: block; */
          margin: 50px auto 0px;
        }
        .top_content_contact{
          width:fit-content;
          height: 150px;
          font-size: 13px;
        }
      .top_content_contact{
        padding: 50px;
      }
      
        .top_content_contact h3{
          font-size: 25px;
        }
      
      
      
      
        footer{
          position: relative;
          background-color: #fff;
          width: 100%;
          border-top: 1px solid #ebebeb ;
          text-align: center;
        }
      
      
        .flr{
          display: block;
          /* align-items: center; */
          justify-content: space-between;
          width: 90%;
          margin: auto;
        }
      
      
      
       
        footer h1{
         width: fit-content;
          font-size: 23px;
          height: 80px;
        }
    
        footer h1 img{
          width: 50px;
        }
      
       
        .flt{
          text-align: left;
          font-size: 13px;
        }
        .footer_text{
          text-align: left;
      font-size: 13px;
        }
      
      .fr{
        display: block;
        margin: 40px 0;
      }
    
        footer ul{
          margin: 0;
        }
    
        footer ul li{
          margin: 20px 0;
        }
      
      
    
    
    }
    
    
    
    
    #g-nav{
      position:fixed;
      z-index: 8;
      top:0;
      background-color: #ffffff; 
      right: -120%;
      width:60%;
      color: #ffffff;
      height: 100vh;
      transition: all 0.6s;
      background-color: #03008F;
    }
    .mask{
      z-index: 3;
      top:0;
      right: -120%;
      position:fixed;
      background-color: #0000007a;
      width: 100%;
      height: 100vh;
    }
    
    .mask.panelactive{
      right: 0;
    }
    #g-nav ul {
       position: absolute;
       z-index: 99;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       -webkit-transform: translate(-50%, -50%);
       -ms-transform: translate(-50%, -50%);
       width: fit-content;
       /* background-color: red; */
       /* margin: 10px auto; */
       height: fit-content;
       /* color: #ffffff; */
       display: block;
       text-align: center;
       padding: 0;
       width: 100%;
    }
    
     #g-nav li{
       margin: 10px auto;
       color: #ffffff;
       border-bottom: 1px solid #ffffff;
       width: 80%;
       text-align: left;
       font-size: 16px;
       padding: 0px 5px 10px;
       /* background-color: red; */
       justify-content: space-between;
    }
    
    
    
    #g-nav li div{
      color: #ffffff;
      justify-content: space-between;
      display: flex;
    justify-content: space-between;
    }
    #g-nav li i{
     
    }
    #g-nav li img{
       width: 60px;
    }
    
    
    @media screen and (max-width:768px){
    
       /* #g-nav ul {
           position: relative;
           z-index: 998;
           top: 10px;
           width: 80%;
           margin: 200px auto 20px ;
       }
       #g-nav li{
           font-size: 1.rem;
       } */
    }
    
    #g-nav.panelactive{
       right: 0;
    }
    
    #g-nav.panelactive #g-nav-list{
       position: fixed;
       z-index: 998; 
       width: 100%;
       height: 100vh;
       overflow: auto;
       -webkit-overflow-scrolling: touch;
    }
    
    #g-nav .sitemap{
       font-size: 0.8rem;
    }
    
    #g-nav li a{
     color: #333;
     text-decoration: none;
     padding:10px;
     display: block;
     text-transform: uppercase;
     letter-spacing: 0.1em;
     font-weight: bold;
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    /* スマホのレスポンシブ */
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    @media screen and (max-width:550px){
    
    
        
    
      
    
    header{
      height: 35px;
      }
      
      h1{
          width: 250px;
          font-size: 23px;
      
      }
      
    
     
    
      header ul {
        display: none;
       }
    
     
     
      
    
      
      
        .top h2{
            font-size: 30px;
            left: 20px;
            bottom: 20px;
        }
          
        .sec_title{
            font-size: 25px;
            line-height: 30px;
            margin: 20px auto 40px;
        }
        
        .top_content{
            width:350px;
            height: 570px;
            margin: 0 auto;
        }
        
        .top_content_text{
          width: 100%;
          line-height: 32px;
          font-size: 13px;
        }
    
        .top_content_img{
            width: 100%;
        }
        .top_content .btn{
          margin: 20px auto;
          padding: 10px 90px;
    text-align: center;
        }
        
        .product{
          padding: 50px 0;
        }
        
        
        .business{
            padding: 50px 0 60px;
        }
        .business .sec_title{
          margin: 20px auto;
        }
        .business_text{
            width: 80%;
            line-height: 35px;
            font-size: 13px;
        }
      
        .business .btn{
          width: 200px;
          padding: 10px 20px;
          margin: 0px auto;
        }
    
        .achievements{
          padding: 50px 0;
        }
        
          
    #faq{
      padding: 50px 0;
    }
    
    
    .company .btn{
      width: 200px;
      padding: 10px 20px;
      margin: 0px auto;
    }
    
    
    
    
    
        .Infomation{
          height: 450px;
          padding: 10px 0 40px;
         
        }
          
        .Infomation .sec_title{
      font-size: 20px;
      line-height: 20px;
      width: 120px;
      margin: 0 auto 20px;
        }
    
          .Infomation .top_content{
          width: 350px;
         height: fit-content;
            display: block;
          }
          .Infomation  .top_content_contact{
            /* width:fit-content; */
            height: fit-content;
            font-size: 13px;
            width: 200px;
            margin: 20px auto;
          }
        .top_content_contact{
          padding: 50px;
        }
       
          .top_content_contact h3{
            font-size: 22px;
            margin: 0 auto 10px;
          }
        
       
          footer h1{
            font-size: 20px;
            height: 50px;
          }
          footer h1 img{
            width: 50px;
            height: 35px;
          }
         
          .flt{
            text-align: left;
            font-size: 10px;
          }
    
        
          footer ul li{
            margin: 10px 0;
          
      
      
      }
      
      
      
      
      #g-nav{
        position:fixed;
        z-index: 8;
        top:0;
        background-color: #ffffff; 
        right: -120%;
        width:70%;
        color: #ffffff;
        height: 100vh;
        transition: all 0.6s;
        background-color: #03008F;
      }
      .mask{
        z-index: 3;
        top:0;
        right: -120%;
        position:fixed;
        background-color: #0000007a;
        width: 100%;
        height: 100vh;
      }
      
      .mask.panelactive{
        right: 0;
      }
      #g-nav ul {
         position: absolute;
         z-index: 99;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         -webkit-transform: translate(-50%, -50%);
         -ms-transform: translate(-50%, -50%);
         width: fit-content;
         /* background-color: red; */
         /* margin: 10px auto; */
         height: fit-content;
         /* color: #ffffff; */
         display: block;
         text-align: center;
         padding: 0;
         width: 100%;
      }
      
       #g-nav li{
         margin: 10px auto;
         color: #ffffff;
         border-bottom: 1px solid #ffffff;
         width: 80%;
         text-align: left;
         font-size: 16px;
         padding: 0px 5px 10px;
         /* background-color: red; */
         justify-content: space-between;
      }
      
      #g-nav li div{
        display: flex;
      justify-content: space-between;
      }
      #g-nav li i{
       
      }
      #g-nav li img{
         width: 60px;
      }
      
      
      
      #g-nav.panelactive{
         right: 0;
      }
      
      #g-nav.panelactive #g-nav-list{
         position: fixed;
         z-index: 998; 
         width: 100%;
         height: 100vh;
         overflow: auto;
         -webkit-overflow-scrolling: touch;
      }
      
      #g-nav .sitemap{
         font-size: 0.8rem;
      }
      
      #g-nav li a{
       color: #333;
       text-decoration: none;
       padding:10px;
       display: block;
       text-transform: uppercase;
       letter-spacing: 0.1em;
       font-weight: bold;
      }
      
    }