@charset "UTF-8";

html,body {height: 100%;}

* {
	margin: 0px;
	padding: 0px;
  letter-spacing: 0.1em;
}

a{text-decoration: none;}

.inner{
  max-width: 1000px;
  margin: 0 auto;
}



img{
  width: 100%;
  height: 100%;
}

h1{
  text-align: center;
  color: #616161;
}


h2{
  text-align: center;
  margin: 100px 0 50px;
  background-color: #6DADE3;
  color: #fff;
  line-height: 2.5;
  font-size: 25px;
}

p{
  font-size: 18px;
  text-align: left;
  line-height: 1.8;
  color: #616161;
}

.blue{
  font-size: 40px;
  color: #48a0e9;
  line-height: 1;
}
.pink{
  font-size: 40px;
  color:rgb(222, 153, 16);
}

.center{text-align: center;}

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

  p{font-size: 14px;}

  h2{
    margin-top: 70px;
    margin-bottom: 20px;
    font-size: 20px;
  }

  .inner{
    padding: 0 5%;
  }
  .blue{
    font-size: 25px;
  }
  .pink{
    font-size: 25px;
}
}



/*------ナビ-----*/
header{
  display: flex;
  justify-content: space-between;
}

header p{
  margin: 20px 00px 10px 20px;
  font-size: 20px;
}

ul{
  display: flex;
  justify-content: flex-end;
  margin: 20px 50px 10px auto;
  height: 30px;
}

ul li{
  list-style: none;
  margin-left: 50px;
  font-weight: 300;
  font-size: 20px;
}

ul li a{
  color: #616161;
  transition: 0.3s;
}

ul li a:hover{
  color: #caae53;
  font-size: 25px;
  font-weight: 500;
}

.now{
  color: #caae53;
  font-weight: 500;
}

@media screen and (max-width: 767px){
  ul{
    display: block;
    margin-bottom: 20px;
    margin-right: 20px;
    text-align: right;
    height: 170px;
  }
  ul li{
    margin-bottom: 7px;
  }
}


/*------メインビジュアル-----*/

.top_image{
  width: 100%;
	height:800px;
	background: url(../img/top.jpg) no-repeat center center / cover;
}

.company_image{
  width: 100%;
	height:700px;
	background: url(../img/company.jpg) no-repeat center center / cover;
}

.service_image{
  width: 100%;
	height:700px;
	background: url(../img/plan.jpg) no-repeat center center / cover;
}

.recruit_image{
  width: 100%;
	height:700px;
	background: url(../img/recruit.jpg) no-repeat center center / cover;
}

.contact_image{
  width: 100%;
	height:700px;
	background: url(../img/contact.jpg) no-repeat center center / cover;
}


.title{
  margin-top: -100px;
  margin-bottom: 100px;
}

.ander{
  margin-top: 150px;
  margin-bottom: 60px;
}

.title p{
  font-size: 30px;
  text-align: center;
  margin-bottom: 10px;
}

h1{
  font-size: 80px;
  font-weight: lighter;
  letter-spacing: 0em;
}

.title h2{
  font-size: 60px;
  font-weight: lighter;
  letter-spacing: 0.2em;
  background-color: #fff;
  color: #616161;
  margin: 0;
}

.line{
  margin: 0 auto;
  width: 200px;
  border-top: solid 6px #6DADE3;

}

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

  .top_image, .company_image, .service_image, .contact_image, .recruit_image{height: 300px;}

  .title{
    margin-top: -40px;
    margin-bottom: 80px;
  }

  .title p{
    font-size: 16px;
    margin-bottom: 0;
  }
  .title h1{font-size: 40px;}

  .title h2{font-size: 30px;}

  .ander{
    margin-top: 100px;
    margin-bottom: 30px;
  }
  

}



/*------トップ-----*/

.content{
  display: flex;
  justify-content: space-between;
  margin-bottom: 150px;
}

.content img{
  width: 40%;
  height: 100%;
}

.content p{
  width: 55%;
}

.inner > .content:last-child {
  flex-direction: row-reverse; 
}

@media screen and (max-width: 767px){
  .content{
    display: block;
    margin-bottom: 40px;
  }
  .content img, .content p{width: 100%;}
}



/*----会社概要-----*/

table{
  width: 100%;
  font-size: 18px;
  color:#616161;
  border: 1px solid #616161;
  border-collapse: collapse;
  line-height: 2;
}

th{
  width: 25%;
  border: 1px solid #616161;
  background-color: #EFFBFF;
  font-weight: normal;
  padding: 30px 10px;
}

td{
  border: 1px solid #616161;
  padding: 30px 20px;
}

.hp{
  display: block;
  width: 75%;
  margin: 80px auto 180px;
  line-height: 4;
  text-align: center;
  font-size: 18px;
  background-color: #4DA327;
  color: #fff;
  border-radius: 5px;
  transition: 0.3s;
}

.hp:hover{
  width: 77%;
  font-size: 20px;
  background-color: #3e7bad;
  color:yellow
}

@media screen and (max-width: 767px){
  table{font-size: 14px;}
  .hp{
    width: 100%;
    font-size: 14px;
  }
}




/*----サービス内容-----*/

h4{
  font-size: 20px;
  color:#616161;
  margin: 80px 0 15px;
  padding: 10px;
  border: 1px solid #616161;
  text-align: center;
  font-weight: normal;
}

section{
  margin-top: 150px;
}

h5{
  font-size: 20px;
  color:#616161;
  padding: 10px;
  border: 1px solid #616161;
  text-align: center;
  font-weight: normal;
}

.try{
  font-size: 30px;
  color: #6DADE3;
  text-align: center;
  margin: 10px 0;
}

@media screen and (max-width: 767px){
  h4, h5{font-size: 15px;}
  h4{margin-top: 60px;}
}





/*----求人-----*/
.copy{
  text-align: center;
  font-size: 25px;
  font-weight: lighter;
  line-height: 2;
}

.support{
  display: flex;
  justify-content: space-between;
}
.support-box{
  width: 31%;
  height: 100%;
}


.top{margin-top: 100px;}

.line-contact{
  display: inline-block;
  text-align: center;
  max-width: 700px;
  line-height: 4;
  background-color: #1ed440;
  border-radius: 10px;
  color:#fff;
  transition: 0.3s ;
}

.line-contact:hover{
  background-color: rgb(16, 119, 0);
  color:#fff;
}

@media screen and (max-width: 767px){
  .copy{font-size: 18px;}
  .support{display: block;}
  .support-box{width: 100%; margin-bottom: 20px;}
}







/*--お問い合わせ--*/
.f-text{
  margin: 60px 0 40px;
  text-align: left;
}

.f-text span {
background-color: #C50018;
font-size: 11px;
padding: 5px 5px;
color: #fff;
white-space: nowrap;
line-height: 14px;
  margin-right: 2px;
}

.form > p {
text-align: center;
font-size: 14px;
line-height: 2;
margin-bottom: 3em;
}

.f_table {
border-bottom: 1px solid #b6b6b6;
font-size: 14px;
margin-bottom: 50px;
}

.f_table .tr {
width: 100%;
display: flex;
border-top: 1px solid #b6b6b6;
}

.f_table .th {
width: 250px;
padding: 30px 25px;
background-color: #EFFBFF;
line-height: 1.5;
display: flex;
align-items: center;
}

.f_table span {
background-color: #C50018;
font-size: 11px;
padding: 2px 5px;
color: #fff;
white-space: nowrap;
margin-left: 15px;
line-height: 14px;
}

.f_table .td {
width: calc( 100% - 250px );
padding: 30px 25px;
line-height: 1.5;
text-align: left;
}

.f_table input[type='radio']{
margin: 0 3px 15px 15px;
}

.f_table input[type='checkbox']{
margin: 0 3px 15px 15px;
}

.f_table input[type='text'], .f_table textarea {
border: 1px solid #ccc;
min-width: 100%;
height: 46px;
padding: 5px;
transition: all 0.3s ease;
border-radius: none !important;
line-height: 1.5;
}

.f_table input[type='text']:focus, .f_table textarea:focus {
background-color: #f5f5f5;
border: 1px solid #999;
  min-width: 100%;
}

.f_table textarea {
min-height: 200px;
}

h5{
margin: 0 0 20px;
font-size: 20px;
text-align: center;
}

.privacy {
background-color: #f5f5f5;
padding: 30px;
font-size: 14px;
line-height: 1.5;
text-align: center;
margin: 40px auto 50px;
}

.privacy div {
font-weight: bold;
}

.form input[type='submit'] {
width: 100%;
max-width: 320px;
height: 70px;
color: #fff;
background-color: #ef7a1b;
  border-radius: 5px;
font-size: 16px;
border: none;
margin: 0 auto 60px;
font-weight: bold;
cursor: pointer;
transition: opacity 0.3s ease;
border-radius: none !important;
display: block;
}

.form input[type='submit']:hover {
opacity: 0.6;
}

iframe{
  width: 100%;
  margin: 20px auto;
}


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

#form{padding: 0 20px 20px 30px; }

.f-text{margin: 50px 0 30px;}

.form > p {
  text-align: left;
  font-size: 12px;
  margin-bottom: 3em;
}

.f_table {
  font-size: 13px;
  margin-bottom: 0;
  border: none;
  padding-right: 3%;
}

.f_table .tr {
  display: block;
  border: none;
}

.f_table .th {
  width: 100%;
  background-color: transparent;
  padding: 0;
  display: block;
}

.f_table span {
  font-size: 10px;
  padding: 2px 5px;
  margin-left: 10px;
  line-height: 12px;
}

.f_table .td {
  width: 100%;
  padding: 10px 0 30px;
}

.f_table input[type='text'], .f_table textarea {
  height: 36px;
  padding: 5px;
}

.f_table textarea {
  height: 200px;
}

h5{font-size: 16px;}

.privacy {
  max-width: 480px;
  padding: 20px 10px;
  font-size: 13px;
  margin: 30px auto 30px;
}


.form input[type='submit'] {
  width: 100%;
  max-width: 240px;
  font-size: 14px;
  margin-bottom: 100px;
  border-radius: 5px;
}

}






/*--サンクス--*/
.thanks h1{margin: 150px 0 50px;}
.thanks p{
	padding: 5%;
	text-align: center;
	border: 1px solid #0789ed;
}
.thanks a{
max-width: 320px;
line-height: 5;
text-align: center;
color: #fff;
background-color: #0789ed;
  border-radius: 5px;
font-size: 16px;
margin: 50px auto 100px;
font-weight: bold;
cursor: pointer;
transition: 0.3s;
display: block;
}

.thanks a:hover{background-color: #7ec45d;}





/*-----フッター-----*/

footer{
  background-color: #6DADE3;
  padding: 30px 5%;
  margin-top: 150px;
  color: #ffffff;
  text-align: center;
}


footer p{
  text-align: center;
  line-height: 1.3;
  margin: 5px 0;
  color: #ffffff;
}

h3{font-size: 25px; line-height: 1.3;}


.mail{
  display: block;
  max-width: 700px;
  margin: 20px auto;
  line-height: 4;
  background-color: #fff;
  border-radius: 10px;
  color:#6DADE3;
  transition: 0.3s ;
}

.mail:hover{
  background-color: rgb(79, 119, 180);
  color:#fff;
}

cap{
  font-size: 14px;
  margin-top: 20px;
  color: #fff;
}

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

  footer{
    margin-top: 80px;
  }

  .tel{
    display: block;
  }

  .mail{
    font-size: 20px;
  }

  h3{font-size: 25px;}
}