@charset "utf-8";
/* CSS Document */

/*-------------------------
highlight
-------------------------*/
.highlight{
  padding: 0 0 75px;
  text-align: center;
}
.highlight .block{
  margin: 0 auto;
  padding: 50px 4% 30px;
}
.highlight-title{
	margin-bottom: 0;
}
.highlight h4{
  margin: 20px 0;
  padding-bottom: 10px;
  border-bottom: solid 2px #ccc;
  font-size: 24px;
  font-weight: bold;
  text-align: left;
}
.highlight .image{
  margin-bottom: 20px;
}
.highlight .image img{
	width: 100%;
}
.highlight-list{
  display: flex;
  flex-wrap: wrap;
  overflow: hidden;
  margin: 0 -20px 0 0;
}
.highlight-list li{
  flex: 0 0 50%;
  max-width: calc(50% - 20px);
  margin: 0 20px 20px 0;
}
.highlight-list-02{
  margin-bottom: 20px;
}
.highlight-list img,
.highlight-list-02 img{
  width: 100%;
}
.highlight-list a + a{
  display: block;
  margin-top: 10px;
}

@media screen and (max-width: 768px){
  .highlight{
    padding: 0 0 75px;
  }
  .highlight .block{
    box-sizing: border-box;
  }
  .highlight-list,
  .highlight-list-02{
    display: block;
    margin: 0 0 20px 0;
  }
  .highlight-list li,
  .highlight-list-02 li{
    width: 70%;
    max-width: none;
    margin: 0 auto 20px;
    box-sizing: border-box;
  }
  .highlight-list a + a{
    margin-top: 20px;
  }
}
@media screen and (max-width: 480px){
  .highlight-list li,
  .highlight-list-02 li{
    width: 100%;
  }
}