@charset "UTF-8";
html {
  font-size: 100%; /*必要*/
}

.wrapper {
  max-width: 960px;
  padding:0.4%;
  margin: 0 auto;
}

img {
  width: 100%;
}

/*ヘッダー*/
h1 {
  font-family: "游ゴシック";
  font-weight: bold;
  white-space: nowrap;  /* 改行を強制的に禁止する */
  margin-left:200;
}

.header ul {
display: flex;
}
.header {
  display: flex;
  justify-content: space-between;
  margin-top: 100px;
  align-items: center;
  max-width: 960px; /*最大幅を決めることで縮小しても同じサイズにできる*/
  margin: 0 auto;
  padding:0.4%
}
.header li {
  list-style: none;
  margin-left: 30px;
}

a {
  margin-left: 50px;
}
nav {
  display: flex;
  margin-left:300px;
}

@media screen and (max-width:600px){
.site-title {
  margin-top:20px;
}
.header{
  flex-direction: column;
  max-width: 100%;
  height: auto;/*中身の要素にピッタリの高さにする*/
}
.header li {
  margin-left: 20px;
  width: 10%;
}
.header li:first-child{
  margin-left: 0;
}
nav{
  margin-left: 150px;
}
.fa-brands{
  margin-left:50px;
}

}

/*mainvisual*/
.mainvisual {
  margin-top: 100px;
  margin-bottom: 80px;
}
.mainvisual img {
  width:100%;
  height:420px;
}

/*section abut*/
.about li {
 list-style: none;
}
.about li:first-child {
  margin-bottom: 30px;
}
.about ul {
  margin-bottom: 30px;
}
.about p {
  margin-bottom: 40px;
}
.section-title {
 text-align: center;
 margin-bottom:65px;
}


/*section works*/
.works ul{
  display: flex;
  flex-wrap: wrap; /*画像が大きすぎると折り返しができない？画像の大きさを小さくしてからやる方がいかも*/
  justify-content: space-between;
  margin-bottom: 50px;
}
.list-1{
  width:100%;
  height: 230px;
  object-fit: cover;/*バラバラのサイズを合わせたいときにつかう*/
  margin-bottom: 23px;
}
.works li{
width: 31%;
list-style: none;
margin-bottom: 23px;
}
@media screen and (max-width:600px){
  .works ul {
    flex-direction: column;
  }
  .works li{
    width:100%;/*画面の横幅をいっぱいに表示する*/
  }
}


/*section news*/
.news dl{/*ulはただのリスト。dl dt ddは説明リスト*/
  display: flex;
  flex-wrap: wrap;
  border-top: solid 1px #c8c8c8;
  margin-bottom: 40px;
}
.news dt{ /*dlタグに対してflex-wrap warapで折り返し設定を行う。そのまま行うと折り返し位置がおあかしくなるのでdt ddの横幅が100％になるようにそれぞれwidthを設定する*/
width: 20%;
border-bottom: solid 1px #c8c8c8;
padding: 15px;/*要素の内側の余白。修正する前はlineheightでやっていた。*/
}
.news dd{
  width: 80%;
  border-bottom: solid 1px #c8c8c8;
  padding: 15px;
}
@media screen and (max-width:600px){
  .news dl {
    flex-direction: column;
  }
  .news dt{
    width: 100%;
  }
}


/*contact*/
.contact dl{
  display: flex;
  flex-wrap: wrap;
}
.contact dt{
  width:15%;
}
.contact dd {
 width:85%;
 margin-bottom:
}
.contact dd input {
  border: solid 1px #c8c8c8;
  width: 100%;
  padding: 10px;
}
.contact dd textarea {
  border: solid 1px #c8c8c8;
  width: 100%;
  padding: 10px;
  height: 10rem;
}
.contact .button{
  text-align: center;
}
.contact .button input{
  width:200px;
  background-color:#24292e;
  color:#fff;
  border: solid 1px #24292e;
  padding:15px;
}
.contact .button input:hover{
  background:#fff;
  color:#24292;
}

/*input[type="text"] {
  border: 1px solid #dddddd;
  width: 700px;
  height: 45px;
  margin-left: 100px;
  margin-bottom: 10px;
}
input[type="email"] {
  border: 1px solid #dddddd;
  width: 700px;
  height: 45px;
  margin-left: 96px;
  margin-bottom: 10px;
}
textarea {
  border: 1px solid #dddddd;
  width: 700px;
  height: 135px;
  margin-left: 73px;
  margin-bottom:30px;
}
input[type="submit"]{
  margin-left: 650px;
  border: 1px solid #000000;
  background-color: #000000;
  color:#ffffff;
  width: 200px;
  height: 50px;
}
input[type="submit"]:hover {
  background-color: #ffffff;
  color: #000000;
}
.contact-1 {
  display: flex;
  margin-left: 350px;
}
.section-title1{
  text-align: center;
  margin-bottom: 80px;
}*/

  input[type="submit"]{
    margin-left: 100px;
  }
  input[type="submit"]:hover {
    background-color: #ffffff;
    color: #000000;
  }
}/*
/*footer */
.footer p {
  text-align: center;
  background-color: #000000;
  color:#ffffff;
  margin-top: 80px;
}