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

#top {
background-image: url(images/top.jpg);
}
#patented h2 {
margin-bottom: 10px!important;
}
#patented .sub {
font-size: 24px;
margin-left: 20px;
margin-bottom: 20px;
}
#patented ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#patented li {
width: 48%;
margin-bottom: 50px;
}
#patented .box {
border: solid 1px #ccc;
padding: 16px;
}
#patented .box dl {
margin: 0;
display: flex;
flex-direction: column;
}
#patented .box dt ul li {
width: 100%;
height: 360px;
display: block;
overflow: hidden;
margin-bottom: 20px;
}
#patented .box dt ul li:nth-child(2) ,
#patented .box dt ul li:nth-child(3) ,
#patented .box dt ul li:nth-child(4) ,
#patented .box dt ul li:nth-child(5) {
display: none;
}
#patented .box dt ul li img{
object-fit: contain;
height: 360px;
}
#patented .box dt ul li a {
display: block;
width: 100%;
height: 100%;
}
#patented .box dt ul li a:hover {
opacity: 0.7;
}
#patented .box dd {
background-color: #f7f7f7;
padding: 16px;
margin: 0;
text-align: left;
line-height: 1.8em;
display: flex;
flex-direction: column;
align-items: stretch;
height: 360px;
}
#patented .box dd p {
flex-grow: 1;
margin-bottom: 20px;
}
#patented .box dd a.link {
margin-bottom: 20px;
display: block;
}
#patented .box dd a.more {
width: 70%;
margin-bottom: 20px;
display: block;
margin: 0 auto;
}
#patented .box dd a.more2 {
width: 70%;
margin-bottom: 20px;
margin: 0 auto;
border: solid 1px #333;
}

@media screen and (max-width:768px) { 

#patented li {
width: 100%;
}
#patented .box dt ul li {
height: auto;
}
#patented .box dt ul li img {
height: auto;
}
#patented .box dd {
height: auto;
}
#patented .box dd a.more {
width: 100%;
font-size: 16px;
}

}