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

html {
scroll-behavior: smooth;
}

#top {
background-image: url(images/top.jpg);
}
#technology h2 {
padding-top: 100px; /* 調整したい高さ（固定ヘッダーの高さ） */
margin-top: -100px; /* heightと同じ分のネガティブマージン */
}
#technology .list {
margin-bottom: 50px;
}
#technology ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
#technology ul:after {
    content: "";
    display: block;
    width: 30%;  
    height: 0;
}
#technology li {
width: 30%;
margin-bottom: 30px;
}
#technology dt {
display: flex;
flex-wrap: wrap;
line-height: 1.5em;
margin-bottom: 10px;
height: 50px;
}
#technology dt:before {
content: url("images/point.png");
margin-right: 10px;
position: relative;
top: 2px;
}
#technology dd {
position: relative;
height: 216px;
width: 100%;
overflow: hidden;
}
#technology dd img {
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
#technology dd:hover img{
  transform: scale(1.1);
}
#technology dd span {
width: 20%;
height: auto;
position: absolute;
z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 /*
=============================================================
sp設定
=============================================================
*/
@media screen and (max-width: 768px) {

#technology li {
width: 100%;
margin-bottom: 50px;
}
#technology dt {
height: auto;
}
#technology dd {
width: 100%;
}
#technology dd {
height: auto;
}
#technology dd button {
width: 100%;
}

}

  /*
=============================================================
pad設定
=============================================================
*/
@media screen and (min-width:820px) and ( max-width:1024px) {

#technology .list {
margin-bottom: 40px;
}
#technology dd {
height: auto;
}
#technology dd a {
display: block;
height: 17vw;
}
#technology dd a img {
height: 100%;
}

}