*{
  padding:0;
  margin:0;
}
ul, li{
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
list-style:none;
}
button{
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
padding: 0;
appearance: none;
}


html{
  scroll-behavior:smooth;
}

/*ここからヘッダー*/
header{
  height:65px;
  background-color:#282c3f;
  width:100%;
  position:fixed;
  top:0;
  z-index:10;
}

.left-header{
  float:left;
}

.logo{
 width:80px;
 padding-left: 50px;
 padding-top:7px;
 opacity:0.9;
}

.right-header{
  float:right;
}

.right-header ul{
  display:flex;
}

.right-header li{
  padding:20px 7px 20px 7px;
  list-style: none;
}

.right-header a{
  text-decoration: none;
  color:white;
  opacity:0.8;
  font-size:14px;
}

.right-header a:hover{
  cursor: default;
  opacity:1;
}

.header-last{
color:#f4d03f;
}

.right-header li:last-child {
	padding-right:50px;
}

/*ここからトップ*/

.top{
height:480px;
background-image: url("../img/AdobeStock_157331626.jpg");
background-size:cover;
}

.top-container{
  width:100%;
  text-align:left;
  color:white;
  padding-top:200px;
  }

.top-words{
  opacity:0.9;
  padding-left:50px;
}

.top-words h1{
 font-size:35px;
 padding-bottom:10px;
}

.top-words h2{
 font-size:20px;
}

.top-contact{
  margin-left:50px;
  font-size:14px;
  display:inline-block;
  padding:6px 25px;
  margin-top:50px;
  color:white;
  border-radius:3px;
  opacity:0.8;
  background-color:#f4d03f;
  text-decoration:none;
}

.top-contact:hover{
  opacity:1;
}

@media (max-width: 700px) {
  .top{
background-size:cover;
height:400px;}

.top-words h1{
 font-size:18px;
 padding-bottom:5px;
}

.top-words h2{
 font-size:14px;
}

.gnav li a{
  font-size:10px;
}
}

/*ここからサービス*/
.services{
  text-align:center;
  background-color:#f7f7f7;
  padding-bottom:110px;
  box-sizing:border-box;
}

h3{
  text-align:center;
  font-size:30px;
  padding-top:80px;
  padding-bottom:70px;
}

.service-flex{
display:flex;
justify-content: center;
}

.english{
font-size:12px;
padding-bottom:2px;
}

.research img, .local img{
  margin-top:40px;
  margin-bottom:20px;
}

.name-services{
  font-size:16px;
}

.text{
  font-size:12px;
  padding:20px 35px 40px 35px;
}

.research{
  width:50%;
  max-width:350px;
  background-color:#0c9bbd;
  color:white;
  margin-right:40px;
  margin-left:70px;
}


.local{
  width:50%;
  max-width:350px;
  background-color:#282c3f;
  color:white;
  margin-right:70px;
}


/*ここからアバウト*/
.message{
  padding-bottom:50px;
  text-align:center;
}

.message-flex{
  display:flex;
  justify-content:center;
}

.about{
  padding-right:30px;
  margin-left:50px;
  box-sizing:border-box;
  width:50%;
  line-height:35px;
  font-size:14px;
}

.message-title{
  font-size:30px;
  padding-bottom:80px;
  font-weight:bold;
  background: linear-gradient( to right,  rgba(69,179,224,1) 25%, rgba(102,51,153,1) 75% );
 -webkit-background-clip: text;
 color: transparent;
}

.about-title{
  padding-bottom:20px;
}

.about-message{
  text-align: left;
}


/*ここからtimeline */

.timeline{
  width:50%;
}

.timeline-title{
  display:inline-block;
  font-size:14px;
  padding-bottom:35px;
}

.timeline li {
    display: flex;
    font-size: 14px;
    margin:0 auto;
}

.timeline-item .date {
    width: 80px;
    padding:0 20px;
    color: #888888;
    font-weight: bold;
}

.timeline-item .content{
    text-align:left;
    position: relative;
    padding: 0 30px 40px 30px;
    border-left: 1px solid #aaaaaa;
}

.timeline-item .content::before {
    content: "";
    position: absolute;
    top: 0;
    left: -8px;
    width: 16px;
    height: 16px;
    background-color: #00c2bc;
    border-radius: 10px;
}

.timeline-last{
      border-left: 1px dotted #aaaaaa;
}
@media (max-width: 700px) {
  .message-flex{
    display:flex;
    flex-direction:column;
    justify-content:center;}

   .about{
    width:90%;
    }
}
/*ここからworks*/

.balloon{
  position: relative;
  background: #ffffff;
  padding: 2em;
}

.balloon:before{
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #ffffff transparent transparent transparent;
  border-width: 20px 20px 0 20px;
}

.examples{
  background-color:#f7f7f7;
  padding-bottom:100px;
}

.work_examples{
text-align: center;
display: block;
}


.work_examples ul{
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  display: inline-block;
}

.work_examples li{
  text-align: left;
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

.work_examples li:before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f138";/*アイコンの種類*/
  position: absolute;
  left : 0.5em;/*左端からのアイコンまでの距離*/
  color: #00c2bc;/*アイコン色*/
}


/*ここからnews*/
.news{
padding-bottom:110px;
}

.dl{
 margin:0 auto;
}

dt{
  font-weight:bold;
  padding:10px 5px 5px 5px;
  margin-left:50px;
}
dd{
  border-bottom:1px solid #ccc;
  margin-left:50px;
  padding:10px 0 20px 0;
}

.news-blog a{
  text-decoration:none;
  color:black;
}

.news-topic{
  color:#2fbdbd;
  display:inline-block;
  margin-left: 15px;
  text-decoration:none;
}

.news_title{
padding:10px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 50%, rgba(244,208,63, 1) 50%);
background-position: 0 0;
background-size: 200% auto;
transition: .3s;
}

.news_title:hover {
  background-position: -100% 0;
  color: #fff;
}


/*ここからcontact*/
.overview{
  background-color:#282c3f;
  text-align:center;
  padding-top:80px;
  padding-bottom:100px;
}

.contact-flex{
  display:flex;
  width:100%;
}

.company{
  text-align:left;
  padding:0 50px;
  color:white;
  opacity:0.8;
}

.company-text-0{
  font-size:20px;
  font-weight:bold;
  padding-bottom:20px;
}
.company-text-01{
  display:inline-block;
  font-size:12px;
}

.company-text-02{
  font-size:16px;
  font-weight:bold;
  padding:30px 0 3px 0;
}

.contact-container {
  width:500px;
  margin: 0 auto;
  text-align:center;
  border-radius:3px;
  background-color:#FAFAFA;
  padding:30px 0;
}

.overview h3 {
  text-align:left;
  padding-bottom:30px;
  color:white;
  font-size:20px;
}

input {
  margin-bottom:10px;
}
textarea {
  height:150px;
  margin-bottom:10px;
}

input:first-of-type
{
  margin-top:20px;
}

input, textarea {
  font-size: 14px;
  padding: 15px 10px 10px;
  border: 1px solid #cecece;
  background: #d7d7d7;
  color:black;
  border-radius: 2px;
  background-clip: padding-box;
  box-sizing: border-box;
  width: 80%;
  max-width: 600px;
}

.contact-container input[type="submit"]{
  font-size:14px;
  margin-top:15px;
  margin-bottom:25px;
  background-color:#2ABCA7;
  padding:12px 0;
  border-radius: 5px;
  border: 1px solid #2ABCA7;
  transition: .5s;
  display: inline-block;
  cursor: pointer;
  width:30%;
  color:#fff;
}

.contact-container input[type="submit"]:hover{

  background:#19a08c;
}
label.error {
    font-size:1em;
    display:block;
    padding-top:10px;
    padding-bottom:10px;
    background-color:#d89c9c;
    width: 80%;
    margin:auto;
    color: #FAFAFA;
    border-radius:6px;
}
/* media queries */
@media (max-width: 700px) {
  .contact-flex{
    display:flex;
    flex-direction:column;
  }

  .contact-container{
    margin-top:30px;
    width:80%;
  }

  input, textarea {
    width: 90%;
  }
  .submit {
    width:90%;
  }
}

.contact-message {
    font-size:1.1em;
    display:none;
    padding-top:10px;
    padding-bottom:10px;
    background-color:#2ABCA7;
    width: 80%;
    margin:auto;
    color: #FAFAFA;
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
}

/*ここからフッター*/
footer{
  background-color:#f7f7f7;
  width:100%;
}

.footer-container{
  text-align:center;
  padding-bottom:50px;
  font-size:14px;
}

.logo-02{
   width:100px;
   padding:80px 0 50px 0;
  }

  .footer-02 ul{
    display:flex;
    justify-content:center;
  }

  .footer-02 a{
    padding:20px;
    color:#0d0d0d;
    text-decoration: none;
  }

 .privacy-policy{
  text-decoration:none;
  color:#0d0d0d;
  display:inline-block;
  padding-bottom:60px;
 }
.footer-02 a:hover,.privacy-policy:hover{
  cursor: default;
  color: #f4d03f;
}

.legal{
  margin-top:30px;
}

/*ここからアニメーション*/
.research{
  opacity: 0;
  transform: translate(-20px,0);
  transition: all 1s 0s ease-out;
}

.local {
   opacity: 0;
   transform: translate(20px,0);
   transition: all 1s 0s ease-out;
 }

 .slide-bottom{
 opacity: 0;
 transform: translate(0, 20px);
 transition: all 1.5s ease-out;
}