body{
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #333333;
  background: #FFFFFF;/*"colorを省略することで複数の設定が可能"*/
}

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

a:hover{/*hoverはカーソルを合わせたとき*/
  opacity: 0.5;/*opacity透明度を0.5半分にする*/
}

.content{
  max-width: 1100px;
  padding:0 4%;
  margin: auto;
}

.header_top{
  height: 100px;
  font-weight: 700;
  display: flex;/*"中の要素を横並びにする"*/
  justify-content: space-between;/*"flexした際にのみ使用できるサブプロパティ（横方向を制御）"*/
  align-items: center;/*"flexした際にのみ使用できるサブプロパティ（縦方向を制御）"*/
}
.header_top p{ /*"半角スペースで.header_topの中のpタグを選択しています"*/
  font-size: 40px;
}
.header_top ul{ /*"半角スペースで.header_topの中のulを選択しています"*/
  display: flex;
  gap: 40px;
  font-size: 20px;
}

.kv{
  color: #FFFFFF;
  font-weight: 700;
  font-size: 40px;
  height: 50vw;/*vwは画面の幅を取得する単位。100vwで画面100%幅になる*/
  text-align: center; /*text-alignは文字列の左右方向の制御をする*/
  background-image: url(../img/kv.jpg);
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kv h1{
  font-size: 80px;
}

main section{
  padding: 80px 0;
}
section h2{
  text-align: center;
  font-weight: 700;
  font-size: 30px;
  padding-bottom: 60px;
}

.about_wrap{
  display: flex;
  gap: 80px;
  max-width: 662px;
  margin: auto;/*横幅が決まっているもの*/
  align-items: center;
}

.about_wrap figure{
  width: 200px;
}

.about_wrap div{
  width: calc(100% - 280px);  /*計算式は数字の前後に必ずスペースを入れること*/
}

.about_wrap h3{
  font-weight: 700;
  padding-bottom: 40px;/*paddingのみだと対象の全方位にスペースが入ってしまうので注意*/
}

.list_beans{
  display: flex;
  gap: 2%;/**/
}

.list_beans li{
  width: 32%;
}

.list_beans h3{
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  padding: 20px 0;/*2項目だと1項目は上下･2項目は左右の要素を決める　3項目は上･左右･下　4項目は上右下左の順*/
}

.btn{
  margin-top: 60px;
}

.btn a{
  font-weight: 700;
  font-size: 20px;
  text-align: center;
  border: 1px solid #707070;
  display: block;/*inline要素を属性を変える*/
  line-height: 60px;
  width: 300px;
  margin: auto;
}

footer{
  font-size: 14px;
  font-weight: 700;
  color:#FFFFFF;
  text-align: center;
  background: #815633;
  line-height: 100px;
}

@media screen and (max-width:750px) {
  .header_top{height: 70px;}
  .header_top p{font-size: 20px;}
  .header_top nav ul{gap: 20px;}
  .header_top nav ul a{font-size: 16px;}

  .kv{background-image: url(../img/kv-sp.jpg); height: 121vw;}
  .kv div h1{font-size: 40px; padding-bottom: 20px; line-height: 1;}
  .kv div p{font-size: 20px;}
  
  main section{padding: 60px 0;}
  main section#about{padding-bottom: 0;}

  section h2{padding-bottom: 32px;}

  .about_wrap{width: 100%; gap: 20px 0; flex-wrap: wrap;}
  .about_wrap div{width: 100%;}
  .about_wrap figure{margin: auto;}
  .about_wrap h3{padding-bottom: 11px; text-align: center;}

  .list_beans{gap: 40px 0; flex-direction: column;}
  .list_beans li{width: 100%;}

  footer{height: 80px; line-height: 80px;}
  .btn{margin-top: 40px;}
}