*{
  box-sizing: border-box;
}
ul{
  list-style: none;
  margin-right: 100px;
  /* これないと下に空間できる */
  margin-bottom: 0;
}
li{
  float:left;
  font-weight: bold;
  padding:0 10px;
}


.site-header{
  width:100%;
  height:50px;
  background:rgba(255,255,255,0.5);
  position: fixed;
  display:flex;
  justify-content: space-between;
  z-index: 10;
  /*border-bottom: solid 0px;*/
  box-shadow: 1px 1px 2px -1px rgba(0, 0, 0, 0.6);
  padding:0px;
}
header .menu{
  display: flex;
  align-items: center;
}
/* .site-header.transform{
  height:50px;
  background:rgba(255,255,255,1.0);
  padding:0px:
} */
header a{
  color:black;
  text-decoration: none;
    transition: all 0.5s ease 0s;
}
header a:hover{

  opacity: 0.9;
  text-decoration: none;
}
.menu a:hover{
    color:#00f;
}
header .logo{
  display: flex;
  align-items: center;
  font-size: 25px;
  font-weight: bold;
  opacity: 0.8;
  padding-left: 100px;
}

.top-section{
  width:100%;
  height:400px;
  color:white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #AAA;
  background-image: url(https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/jquery/advanced/first_view.jpg);
  background-size: cover;
}
.title-section{
  display:block;
  opacity: 0.8;
}
.title-section h1{
  font-size: 40px;
  padding:20px 0px;
}


.slider{
  width:100%;
  height:600px;
  text-align: center;
  background-color: white;
  padding:30px 0;
}
.slider h2{

}
.slide-text{
  opacity: 0.7;
}

.swiper-container{
  width:70%;
  height:400px;
  margin-bottom:2px;
}
.swiper-wrapper{
  padding:0;
  margin:0;
}

.swiper-slide{
  height:200px;
  /*これがないとBulletがかぶった*/
  padding:0;
  margin:0;
}


.swiper-button-prev,
.swiper-button-next {
  width: 32px;
  height: 32px;
  margin-top: -16px;
  opacity:0.6;
}

.swiper-pagination-bullet{
  width:12px;
  height:12px;
  background:#9acd32;
  opacity:0.5;
}

.swiper-pagination-bullet-active{
  width:11px;
  height:11px;
  background:#ffd700;
  opacity:0.8;
}

/*.swiper-button-prev {
    background: url(https://haniwaman.com/wp-content/uploads/2018/05/swiper3.png) no-repeat center center / contain;
}
.swiper-button-next {
    background: url(https://haniwaman.com/wp-content/uploads/2018/05/swiper4.png) no-repeat center center / contain;
}*/

.interview{
  width:100%;
  /*height:800px;*/
  background-color: #FFF;
}

.interview-upper{
  margin:0 auto;
  background-color:#EEE;
  position: relative;
  height:350px;
  padding-top:40px;
}
.interview h2{
  text-align: center;
}

.interview-upper img{
  position:absolute;
  display:block;
  top:100px;
  left:50%;
  transform: translate(-50%);
  margin: 0 auto;
  width:280px;
  height:280px;
  border-radius: 50%;
}

.interview-footer{
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding-top:100px;
  padding-left: 100px;
  padding-right: 100px;
  padding-bottom: 50px;
}

.interview-footer .qa{
  padding:40px 40px 0 40px;
}
.q{
  font-size: 18px;
}
.a{
  opacity: 0.7;
}

@@media screen and (max-width:767px) {
  .interview-footer{
      flex-direction: column;
  }
  .interview-footer .qa{
    width:100%;
  }
}

.interview-footer .qa{
  width:50%;
}

.contact{
  width:100%;
  height:650px;
  padding:25px 100px;
  text-align: center;
  background-color: #EEE;
}
.contact-form{
  height:500px;
  width:50%;
  float:left;
  background-color:#eee;
  text-align: left;
}
.form{
  display: block;
  width:80%;
  padding:10px 10px;
  margin-top:30px;
  background-color: #ddd;
  border:none;
}
.submit{
  width:100px;
  height:60px;
  margin-top: 20px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  background-color: #48f;
  border: none;
  border-radius: 5px;
}


.contact-about{
  height:500px;
  width:50%;
  padding-left: 80px;
  text-align: left;
  float:right;
  background-color: #eee;
}

.about{
  height: 50%;
  background-color: #eee
}
.adress{
  height:50%;
  background-color: #eee

}
.contact-about h3{
  margin-bottom: 20px;
}
.contact-about p{
  opacity: 0.8;
}

.adress i{
  margin-right: 7px;
}
/*  回転できない
.phone-date:before{
  font-family: "Font Awesome 5 Free";
  content:'\f095';
  font-weight:900;
}
*/

footer{
  width:100%;
  /*height:400px;*/
  color:white;
  padding:50px 0;
  text-align: center;
  background-color: #111;
  display:block;
}
footer p{
  margin-top:30px;
}
#social-icon a{
  display: inline-block;
  /*float: left;*/
  color: #fff;
  margin:0 35px 5px 0;
  padding: 0px;
}
#social-icon i{
  width:50px;
  height:50px;
  margin:0;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  background-color: #00a1e9;
  opacity:0.7;
}
#social-icon i:before{
  padding 0;
  line-height: 50px;
}
#social-icon a:hover i{
  background: #00a1e9;
  font-size: 20px;
  opacity:1.0;
}