@charset "UTF-8";

@media (max-width:1200px) {
  #access{
    width: 90%;
  }
  #company .inner{
    width: 90%;
  }
  #top .flex{
    width: 95%;
  }
  #company nav .flex{
    flex-wrap: wrap;
  }
  #company nav li{
  width: 30%;
  padding-bottom: 110px;
}
#character .inner{
  width: 70%;
}
#seminar .flex{
  flex-direction: column-reverse;
}
.seminar-text{
  padding: 30px 0 0 0 ;
  width: 60%;
}
#overview .inner{
  width: 95%;
}
}

@media (max-width:1024px) {
  header .inner{
    width: 896px;
  }
  header nav .formlink-p{
    display: none;
  }
  .logo img,.company-left img{
    width: 70px;
    height: 60px;
  }
  h1,.company-left-top p{
    font-size: 16px;
  }
  header nav .formlink-p{
    padding: 13px 4px;
  }
  header nav .formlink{
    font-size: 14px;
  }
  header ul a{
    padding: 5px;
    margin: 10px;
  }
  header ul a::before{
    left: -10px;
  }
  header ul a:nth-last-child(1)::after{
    right: -10px;
  }
  .pd100{
    padding: 60px 0;
  }
  #top .flex{
    width: 85%;
  }
  #top h2{
    font-size: 35px;
  }
  #top .formlink{
    font-size: 20px;
  }
  #worry .inner > p:nth-child(1),#character .inner > p:nth-child(1),#seminar .inner > p,#members .inner > p,#overview .inner > p{
    font-size: 26px;
  }
  .inherit > p,.seminar-child > p{
    font-size: 20px;
  }
  .inherit > .flex li p,.seminar-text p{
    font-size: 14px;
  }
  #worry .inner > p:nth-last-child(1),.merit3 .flex-around p,#consult .inner > p,#flow >  p,#form .inner > p{
    font-size: 22px;
  }
  .flow-child p:nth-child(2),.fa-check-square{
    font-size: 16px;
  }
  .flow-child p:nth-child(3){
    font-size: 14px;
    width: 85%;
  }
  #company nav li{
    width: 33%;
  }
  #map{
    width: 350px;
    height: 300px;
  }
  .road{
    width: 60%;
  }
  #overview table td:nth-child(1){
    padding: 0 60px;
  }
  #overview table td:nth-child(2){
    padding-right: 60px;
  }
  #form table td:nth-child(1){
    padding: 0 5px;
  }
  #form table td:nth-child(2){
    padding-right: 60px;
  }
  #form table{
    width: 95%;
  }
  .members .flex-center{
    justify-content: space-around;
  }
  .members li::after{
    width: 100%;
  }
}

@media (max-width:896px) {
  header{
    background: #fff;
  }
  header .inner{
    width: 100%;
  }
  .header-left{
    padding: 1%;
  }
  .header-left p{
    display: none;
  }
  .header-left img,.company-left-top img{
    width: 55px;
    height: 45px;
  }
  h1{
    font-size: 12px;
  }
  .company-left-top p,#company nav a{
    font-size: 13px;
  }
  header ul a{
    display: none;
  }
  #hamburger{
    display: block;
  }
  header .reception{
    padding-top: 0;
  }
  header nav div > p,.company-left a,.fax,.mail{
    font-size: 13px;
  }
  #top .flex{
    width: 100%;
    justify-content: center;
  }
  #top ul{
    width: 95%;
  }
  .top-left{
    width: 45%;
  }
  #top .formlink-p{
    padding: 5px 4px;
  }
  #top .formlink{
    width: 330px;
    font-size: 16px;
    padding: 15px 20px;
  }
  #worry .inner > p:nth-child(1),#character .inner > p:nth-child(1),#seminar .inner > p,#members .inner > p,#overview .inner > p,.member-left p{
    font-size: 22px;
  }
  .inherit > p,.seminar-child > p{
    font-size: 18px;
  }
  #worry .inner > p:nth-last-child(1),.merit3 .flex-around p,#consult .inner > p,#flow >  p,#form .inner > p{
    font-size: 20px;
  }
  .inherit > .flex li p,#character li p,.seminar-text p{
    font-size: 14px;
  }
  .merit3 img{
    width: 105px;
    height: 124px;
  }
  #character .inner > p:nth-child(2){
    margin: 30px 0;
  }
  #consult .flex-center{
    flex-wrap: wrap;
    flex-direction: column;
    align-items: center;
  }
  .consult-box{
    width: 90%;
  }
  .company-left{
    width: 40%;
  }
  .company-left > p:nth-child(2),.reception{
    font-size: 13px;
  }
  .road p:nth-child(1),.qual{
    font-size: 16px;
  }
  .road p:nth-child(2),#overview table,#form table,li:nth-child(1) .member-left p::after,li:nth-child(2) .member-left p::after,li:nth-child(3) .member-left p::after,li:nth-child(4) .member-left p::after,li:nth-child(5) .member-left p::after,.member-prf,#conf table,#send p{
    font-size: 14px;
  }
  #character .flex{
    flex-wrap: wrap;
    align-items: center;
    flex-direction: column;
  }
  #character .flex li{
    border-radius: 10px;
    height: 100px;
    width: 90%;
    margin-bottom: 15px;
  }
  #flow{
    padding-bottom: 60px;
  }
  #seminar .flex{
    width: 400px;
    margin: 0 auto;
  }
  .seminar-text{
    align-self: baseline;
    width: 100%;
  }
  .members li{
    padding: 0;
  }
  #overview table td:nth-child(1){
    padding: 0 30px;
  }
  #overview table td:nth-child(2){
    padding-right: 30px;
  }
  #form table td:nth-child(1){
    width: 175px;
  }
  #form table td:nth-child(2){
    padding-right: 15px;
  }
  #form .text{
    width: 90%;
    height: 40px;
  }
  #form textarea{
    width: 90%;
  }
  .map{
    height: 300px;
  }
  .members li::after{
    top: 30px;
  }
  .members .flex-center{
    justify-content: space-between;
  }
}
@media (max-width:670px) {
  .top-left{
    width: 90%;
    margin-right: 0;
  }
  #top .formlink-p{
    display: none;
  }
  #form .text{
    width: 95%;
    height: 40px;
  }
  #form textarea{
    width: 95%;
  }
  #access .flex{
    flex-wrap: wrap;
    flex-direction: column;
  }
  .road{
    padding-top: 20px;
  }
  .members .flex-center{
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .member-left{
    margin: 0 auto;
    padding: 0;
  }
  .member-left{
    width: 300px;
  }
  .member-prf{
    margin: 0 auto;
    padding-top: 10px;
    width: 300px;
  }
  .member-prf a{
    padding-bottom: 10px;
  }
  #company nav{
    width: 55%;
  }
  #company nav li{
    width: 35%;
    padding: 0 1px 30px;
  }
  #company nav .flex{
    justify-content: space-around;
  }
}
@media (max-width:480px) {
  .pd100{
    padding: 40px 0;
  }
  #flow{
    padding-bottom: 40px;
  }
  h1{
    white-space: nowrap;
  }
  #hamburger{
    margin: 10px;
  }
  header nav > div{
    display: none;
  }
  #top{
    height: 550px;
  }
  #top ul{
    width: 90%;
  }
  #worry .flex-around{
    flex-wrap: wrap;
    flex-direction: column;
  }
  #worry .inner{
    width: 95%;
  }
  #worry .inner > p:nth-child(1),#character .inner > p:nth-child(1),.member-left p{
    font-size: 18px;
  }
  .inherit > p,#worry .inner > p:nth-last-child(1),.merit3 .flex-around p,#consult .inner > p,#flow >  p,#form .inner > p{
    font-size: 16px;
  }
  #worry .inner > p:nth-last-child(1){
    width: 80%;
    margin: 0 auto;
  }
  .fa-arrow-alt-circle-down{
    font-size: 40px;
    padding: 30px 0;
  }
  #character .inner{
    width: 95%;
  }
  .flow-child{
    width: 95%;
  }
  .road{
    width: 90%;
  }
  .road p:nth-child(1),.overview > p{
    font-size: 14px;
  }
  .road p:nth-child(2),#overview table,#form table,.member-prf,.qual,#conf table,#send p{
    font-size: 14px;
  }
  #seminar .inner{
    width: 95%;
  }
  .seminar-child{
    width: 100%;
  }
  #seminar .inner > p,.seminar-child > p{
    padding-left: 40px;
  }
  .seminar-text{
    width: 100%;
  }
  #seminar .flex{
    width: 90%;
    padding: 30px 0;
  }
  .seminar-child img{
    width: 100%;
  }
  #seminar .inner > p{
    margin-bottom: 20px;
  }
  #members .inner{
    width: 95%;
  }
  .members li{
    margin-bottom: 40px;
  }
  .members li:nth-last-child(1){
    margin-bottom: 20px;
  }
  #overview table td:nth-child(2){
    padding: 15px;
  }
  #form table td:nth-child(1){
    width: 130px;
  }
  #form table td:nth-child(2){
    padding: 10px;
  }
  #overview .img,#members .img,#form .img,#seminar .img{
    margin-bottom: 30px;
  }
  #overview .img  p,#members .img p,#form .img p,#seminar .img p{
    font-size: 28px;
  }
  .members li::after{
    top: 25px;
    height: 2px;
  }
  #company nav li{
    width: 90%;
    padding:0 0 15px 30px;
  }
  #company nav li a{
    font-size: 12px;
  }
  .submit{
    margin-top: 30px;
    font-size: 16px;
  }
  #top h2{
    font-size: 26px;
  }
  #conf{
    padding: 30px 0;
  }
  #conf table{
    width: 95%;
  }
  #conf table td:nth-child(1){
    padding: 5px;
  }
  #conf table td:nth-child(2){
    padding: 15px;
  }
  .figure{
    width: 90%;
  }
  .css-br::before{
  content: "\A";
  white-space: pre;
}
#hamleft{
  display: block;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#hamleft i,#hamleft p{
  display: block;
}
#menu li{
  font-size:  19px;
}
}