@charset "UTF-8";

#works{
 padding: 100px 0 0px;
}
.flex{
 display: flex;
 flex-wrap: wrap;
}
.box{
 width: 31.3%;
 padding: 10px 10px 30px 10px;
 margin: 10px;
 background-color: #fff;
 border: 5px solid #F0F0F0;
}
.box figure img{
 width: 100%;
 height: 250px;
 object-fit: cover;
}
.box h4{
 font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
 color: #333;
 text-align: center;
 font-size: 1.3rem;
 margin: 20px 0 20px 0;
 line-height: 25px;
 font-weight: 600;
 letter-spacing: 1px;
}
.box p{
 padding: 0px 10px;
 color: #666;
 font-size: 0.95rem;
}

.topics{
 width: 95%;
 padding: 40px 80px;
 margin: 80px 10px 50px 10px;
 background-color: #fff;
 border: 20px solid #F3F3F3;
 position: relative;
}

.topics h5{
 font-family: futura-pt-condensed, sans-serif;
 font-weight: 500;
 font-style: normal;
 color: #EB4D00;
 position: absolute;
 top:-80px;
 left: 10px;
 font-size: 70px;
}

.topics ul li{
 font-size: 1.1rem; 
 margin-bottom: 10px;
 color: #333;
 font-weight: 600;
}

.topics ul li span{
 color: #EB4D00;
}

#se_contact {
 width: 100%;
 text-align: center;
 background-image: url("../img/img8.jpg");
 background-size: cover;
 background-repeat: no-repeat;
 color: #fff;
}
 @media screen and (max-width: 1050px) {
  
.box{
 width: 45%;
}
.box figure img{
 height: 300px;
}
.topics ul li{
 font-size: 1rem; 
}
 @media screen and (max-width: 700px) {
  
.box{
 width: 100%;
}
.box figure img{
 height: 300px;
}
.topics{
 width: 95%;
 padding: 20px 40px;
 margin: 80px 10px 50px 10px;
}
.topics h5{
 position: absolute;
 top:-60px;
 left: 10px;
 font-size: 60px;
}
.topics ul li{
 font-size: 0.9rem; 
 margin-bottom: 10px;
 font-weight: 600;
}
}