@charset "utf-8";

@font-face {
   /* タイトル太さ */
   font-family: "title";
   src: url("../fonts/SourceHanSansJP-Bold.otf") format("opentype");
 }
 @font-face {
   /* 通常盤 */
   font-family: "main";
   src: url("../fonts/SourceHanSansJP-Medium.otf") format("opentype");
 }

@font-face {
   font-family: "weak";
   src: url("../fonts/SourceHanSansJP-Light.otf") format("opentype");
}

 @media screen and (min-width:860px) {

body{
        width: 100%;
        height: auto;
 }
 
 header{
   width: 100%;
 }

 .font_color1{  
   /* 文字色カスタム 灰色 */
   color: #3B4043;
 }

 .font_color2{
   /* 文字色カスタム 白色 */
   color: white;
 }

 .font_color3{
   /* 文字色カスタム 黒色 */
   color:#3B4043;
 }


 .top_list{
    display: flex;
    height: 10%;
 }
 
 .header_logo {
    width: 15%;
    height: 80%;
    margin: 5px;
    }


 .header_title{
    display: flex;
    width: 42%;
    height: 30%;

 }

 .campany_name {
   text-align: center;
   margin-left: 3%;
   font-size: 300%;
   font-family: "title";
   margin-bottom: auto;
   margin-top: auto;

   }


.campany_name a {
text-decoration: none;
color: #3B4043;
}

 .header_right {
   width: 58%;
   margin-bottom: auto;
   margin-top: auto;
   height: 30%;
   font-size: x-large;

   }

   .header_list {
      display: flex;
      margin: auto;
      font-size: 100%;
      width: 100%;
      }
 
      .header_list ul {
         text-align: center;
         font-family: "main";
         width: 100%;
         padding: 0;
         margin-right: auto;
         margin-left: auto;
         }

         .header_list ul  a {
            text-decoration: none;
            color: #3B4043;
            }

.main_img img{
   width: 100%;

}

main{
   height: auto;
   margin-left:10%;
   margin-right: 10%;
  }

  .bs_block{
   display: flex;
   width: 100%;
  }

  .bs_block1, .bs_block2{
   width: 45%;
   background-color: #05A1BD;
   padding: 3%;
  }

  .bs_block1{
   margin-right: 5%;
  }

  .bs_block1 img, .bs_block2 img{
   width: 100%;
  }

  .bs_block1 h1, .bs_block2 h1{
   font-family: "title";
   font-size: 1.6rem;
   margin-bottom: 0;
   border-bottom: #ffffff 3px solid;
   
  }

  .bs_block1 p, .bs_block2 p{
   font-family: "main";
   font-size: 1rem;

  }

  .oder_ti h1{
   font-family: "title";
   font-size: 3rem;
   margin-bottom: 0;
  }

  .oder_ti p{
   font-family: "weak";
   font-size: 1rem;
   margin-top: 0;
  }


  .area_block{
   width: 100%;
   margin-top: 5%;
   display: flex;
   margin-bottom: 5%;
 }

 .area_block1 img, .area_block2 img,.area_block3 img,.area_block4 img{
   width: 100%;
   height: auto;
 }




 .area_block1, .area_block2,.area_block3,.area_block4{
   width: 20%;
   margin: auto;
   background-color:  #CDD6DD;

 }

 .area_block1_tx ,.area_block2_tx ,.area_block3_tx ,.area_block4_tx {
   padding-left: 5%;
   padding-bottom: 50%;
 }

 .area_block1_tx h1,.area_block2_tx h1,.area_block3_tx h1,.area_block4_tx h1{
   font-family: "title";
   font-size: 2rem;
   margin: 0;
   
 }

 .area_block1_tx p,.area_block2_tx p,.area_block3_tx p,.area_block4_tx p{
   font-family: "main";
   font-size: 1rem;
   margin: 0;
 }

footer{
   width: 100%;
   height: 460px;
   font-family: "main";
   text-decoration: none;
}

.footer_top{
   background-color: #00AC62;
   height:373px ;
   display: flex;
}

.campany_info{
   margin-left: 5%;
}

.campany_info_tx{
   display: block;
      margin-top: 5%;
   }


.campany_info_tx a{
   text-decoration: none;
}

.service_info_tx a {
   text-decoration: none;
}

.service_info_tx {
   margin-top: 5%;

}
.contact_info_tx{
   margin-top:5% ;
}


.footer_bottom{
   background-color: #05A1BD;
   height: 88px;
   
}

.campany_info,.service_info,.contact_info{
   width: 28%;
   display: block;

}

 }
/* スマホ用CSS------------------------------------------------------------------------------- */

 @media screen and (max-width:859px){

   .font_color1{  
      /* 文字色カスタム 灰色 */
      color: #3B4043;
    }
   
    .font_color2{
      /* 文字色カスタム 白色 */
      color: white;
    }
   
    .font_color3{
      /* 文字色カスタム 黒色 */
      color:black;
    }
   
    .top_list{
      display: block;
      height: 10%;
   }
   .header_logo {
      width: 15%;
      height: 80%;
      margin: 5px;
      }

      .header_title{
         display: flex;
         width: 100%;
         height: 30%;
     
      }
      .campany_name {
         text-align: center;
         margin-left: 3%;
         font-size: 300%;
         font-family: "title";
         margin-bottom: auto;
         margin-top: auto;
      
         }
         .campany_name a {
            text-decoration: none;
            color: #3B4043;
            }

    .header_right {
       width: 100%;
       margin-bottom: auto;
       margin-top: auto;
       height: 30%;
       font-size: x-large;
            
               }
            
   .header_list {
   display: flex;
   margin: auto;
   font-size: 100%;
   width: 100%;
   background-color: #05A1BD;
   font-size: 1rem;
    }
    
   .header_list ul  a {
      text-decoration: none;
      color:white;
      }

      .header_list ul {
         text-align: center;
         font-family: "main";
         width: 100%;
         padding: 0;
         margin-right: auto;
         margin-left: auto;
        
         }
      
     .list2,.list3,.list4{
      border-left: white 3px solid;
     }

     .main_img img{
      width: 100%;
     }

     main{
      height: auto;
      margin-left:10%;
      margin-right: 10%;
     }

  

     .bs_block{
      display: block;
      width: 100%;
     }
   
     .bs_block1, .bs_block2{
      width: 100%;
      background-color: #05A1BD;
      padding: 3%;
     }
   
     .bs_block1{
      margin-bottom: 5%;
      margin-top: 5%;
     }
   
     .bs_block1 img, .bs_block2 img{
      width: 100%;
     }
   
     .bs_block1 h1, .bs_block2 h1{
      font-family: "title";
      font-size: 1.6rem;
      margin-bottom: 0;
      border-bottom: #ffffff 3px solid;
      
     }
   
     .bs_block1 p, .bs_block2 p{
      font-family: "main";
      font-size: 1rem;
   
     }

     .oder_ti{
      width: 100%;
      margin-bottom: 5%;
     }
   
     .oder_ti h1{
      font-family: "title";
      font-size: 3rem;
      margin-bottom: 0;
     }
   
     .oder_ti p{
      font-family: "weak";
      font-size: 1rem;
      margin-top: 0;
     }

     .area_block{
      width: 100%;
      margin-top: 5%;
      display: block;
      margin-bottom: 5%;
    }
   
    .area_block1 img, .area_block2 img,.area_block3 img,.area_block4 img{
      width: 100%;
      height: auto;
    }
   
   
   
   
    .area_block1, .area_block2,.area_block3,.area_block4{
      width: 100%;
      margin: auto;
      background-color:  #CDD6DD;
      margin-top: 5%;
   
    }
   
    .area_block1_tx ,.area_block2_tx ,.area_block3_tx ,.area_block4_tx {
      padding-left: 5%;
      padding-bottom: 15%;
    }
   
    .area_block1_tx h1,.area_block2_tx h1,.area_block3_tx h1,.area_block4_tx h1{
      font-family: "title";
      font-size: 2rem;
      margin: 0;
      
    }
   
    .area_block1_tx p,.area_block2_tx p,.area_block3_tx p,.area_block4_tx p{
      font-family: "main";
      font-size: 1rem;
      margin: 0;
    }
   
   /* フッター部分ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
   .footer_top{
      display: block;
      background-color: #00AC62;
      height: 30%;
     }

     .footer_bottom{
      background-color: #05A1BD;
      height: 50px;
     }
   
   .service_info,.campany_info,.contact_info{
      display: flex;
      
   }

   .campany_info_ti{
      margin-left:5% ;
      text-align: left;
      font-size: 1.2rem;
      text-decoration: none;
      font-family:"title";
      width: 45%;

   }
   
   .campany_info_tx{
      margin-left: 10% ;
      text-align: left;
      font-size: 1rem;
      text-decoration: none;
      font-family:"main";
      width: 35%;
   }

   .service_info_ti{
      margin-left:5% ;
      text-align: left;
      font-size: 1rem;
      text-decoration: none;
      font-family:"title";
      width: 45%;

   }
   
   .service_info_tx{
      margin-left: 10% ;
      text-align: left;
      font-size: 1rem;
      text-decoration: none;
      font-family:"main";
      width: 35%;
   }

   .contact_info_ti{
      margin-left:5% ;
      text-align: left;
      font-size: 1rem;
      text-decoration: none;
      font-family:"title";
      width: 45%;

   }
   
   .contact_info_tx{
      margin-left: 10% ;
      text-align: left;
      font-size: 1rem;
      text-decoration: none;
      font-family:"main";
      width: 35%;
   }
  
   

 }