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

#top {
background-image: url(images/top.jpg);
}
#product h2 span {
font-size: 18px;
margin-left: 20px;
}
#product ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#product li {
width: 48%;
margin-bottom: 50px;
}
#product .box {
border: solid 1px #ccc;
padding: 16px;
}
#product .box dl {
margin: 0;
display: flex;
flex-direction: column;
}
#product .box dt ul li {
width: 100%;
height: 360px;
display: block;
overflow: hidden;
margin-bottom: 20px;
}
#product .box dt ul li:nth-child(2) ,
#product .box dt ul li:nth-child(3) ,
#product .box dt ul li:nth-child(4) ,
#product .box dt ul li:nth-child(5) {
display: none;
}
#product .box dt ul li img{
object-fit: contain;
height: 360px;
}
#product .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;
}
#product .box dd p {
flex-grow: 1;
margin-bottom: 20px;
}
#product .box dd a.link {
margin-bottom: 20px;
display: block;
text-decoration: underline;
cursor: pointer;
}
#product .box dd a.link:hover {
text-decoration: none;
}
#product .box dd a.more {
width: 70%;
margin-bottom: 20px;
display: block;
margin: 0 auto;
}
#product .box dd a.more2 {
width: 70%;
border: solid 1px #333;
margin: 0 auto;
}

@media screen and (max-width:768px) { 
#product li {
width: 100%;
height: auto;
margin-bottom: 30px;
}
#product .box dt ul li {
height: auto;
}
#product .box dd {
height: auto;
}
}

@media screen and (min-width:769px) and ( max-width:1024px) {
#product ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#product li {
width: 48%;
margin-bottom: 50px;
}
#product .box dd {
height: auto;
}

}


#patented {
padding-top: 80px!important;
background-color: #E4EBF2;
}
#patented .title {
margin-bottom: 80px;
}
#patented .title dt {
font-size: 36px;
margin-bottom: 40px;
display: flex;
align-items: center;
text-align: center;
font-weight: normal;
}
#patented .title dt:before,
#patented .title dt:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #666;
}
#patented .title dt:before {
    margin-right: 1rem;
}
#patented .title dt:after {
    margin-left: 1rem;
}
#patented .title dd {
font-size: 20px;
text-align: center;
}
#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: #fff;
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;
}

}