@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{
      margin-left: 10%;
      margin-right: 10%;
     }

     .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;
     }

     .oder_block{
      display: flex;
      margin-bottom: 5%;
     }

     .block1, .block2, .block3{
      width: 30%;
      background-color: #05A1BD;
      padding: 3%;
     }

     .block1 h2, .block2 h2{
      
      font-family: "main";
      font-size: 1.8rem;
     }

     .block3 h2{
      font-family: "main";
      font-size: 1.5rem;
     }

     .block1 h3, .block2 h3, .block3 h3{
      font-family: "main";
      font-size: 1.5rem;


     }

     .block1 p, .block2 p{
      font-family: "weak";
      font-size: 1rem;
      border-bottom:white 1px solid ;
     }

     .block3 p{
      font-size: 0.8rem;
      font-family: "weak";
      border-bottom:white 1px solid ;
     }
     .block2{
      margin-left: 5%;
      margin-right: 5%;
     }

     .con_button{
    
     text-align: center;
     margin-top: 40%;
     
   }
   
   .con_button a{
      padding-left: auto;
      padding-right: auto;
      
   }
   
   .btn-square {
      display: inline-block;
      padding: 0.5em 2em;
      text-decoration: none;
      background: #ffffff;/*ボタン色*/
      color: #3B4043;
      border-bottom: solid 4px #627295;
      border-radius: 3px;
      font-family: "main";
      font-size: 1.5rem;
    }
    .btn-square:active {
      /*ボタンを押したとき*/
      -webkit-transform: translateY(4px);
      transform: translateY(4px);/*下に動く*/
      border-bottom: none;/*線を消す*/
    }

    .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_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.5rem;
      text-decoration: none;
      font-family:"title";
      width: 45%;

   }
   
   .campany_info_tx{
      margin-left: 15% ;
      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: 1.5rem;
      text-decoration: none;
      font-family:"title";
      width: 45%;

   }
   
   .service_info_tx{
      margin-left: 15% ;
      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: 1.5rem;
      text-decoration: none;
      font-family:"title";
      width: 45%;

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

 }

 /* スマホ用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%;
  }

.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;
  }

  .oder_block{
   display: block;
   margin-bottom: 5%;
  }

  .block1, .block2, .block3{
   width:100%;
   background-color: #05A1BD;
   padding: 3%;
  }

  .block1 h2, .block2 h2{
   
   font-family: "main";
   font-size: 2rem;
   margin-bottom: 0;

  }

  .block3 h2{
   font-family: "main";
   font-size: 2rem;
   margin-bottom: 0;
  }

  .block1 h3, .block2 h3, .block3 h3{
   font-family: "main";
   font-size: 1.5rem;
   margin-top: 0;


  }

  .block1 p, .block2 p{
   font-family: "weak";
   font-size: 1rem;
   border-bottom:white 1px solid ;
  }

  .block3 p{
   font-size: 0.8rem;
   font-family: "weak";
   border-bottom:white 1px solid ;
  }
  .block2{
   margin-top: 5%;
   margin-bottom: 5%;
  }

  .con_button{
 
  text-align: center;
  margin-top: 5%;
  
}

.con_button a{
   padding-left: auto;
   padding-right: auto;
   
}

.btn-square {
   display: inline-block;
   padding: 0.5em 2em;
   text-decoration: none;
   background: #ffffff;/*ボタン色*/
   color: #3B4043;
   border-bottom: solid 4px #627295;
   border-radius: 3px;
   font-family: "main";
   font-size: 1.5rem;
 }
 .btn-square:active {
   /*ボタンを押したとき*/
   -webkit-transform: translateY(4px);
   transform: translateY(4px);/*下に動く*/
   border-bottom: none;/*線を消す*/
 }

 .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%;
}



}