#wrapper {
background-image: url(../images/products/common/bg_02.jpg);
background-size: 130px 260px;
}

#wrapper main {
width: 1280px;
padding: 173px 0 130px 0;
margin: auto;
background-image: url(../images/products/common/bg_01.png);
background-size: 1280px 260px;
}

#wrapper .headline img {
width: 290px;
margin: auto;
}

#wrapper article {
width: 1000px;
margin: 0 auto 140px auto;
display: grid;
gap: 100px;
}

#wrapper article section {
display: flex;
gap: 50px;
}

#wrapper article section:nth-child(even) {
flex-direction: row-reverse;
}

#wrapper article section div {
width: 60%;
}

#wrapper article section div h3 {
font-family: "Montserrat", sans-serif;
font-size: 30px;
font-weight: 700;
color: var(--theme-color);
line-height: 1;
margin: 0 0 10px 0;
}

#wrapper article section div h4 {
font-size: 30px;
font-weight: 700;
margin: 0 0 10px 0;
}

#wrapper article section figure {
width: 40%;
}

#wrapper article section figure img {
padding: 30px 0;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
}

#wrapper article section figure figcaption a {
display: block;
font-size: 20px;
color: #fff;
text-align: center;
line-height: 1;
padding: 20px 0;
border: 1px solid #000;
background-color: var(--theme-color);
}

#wrapper article section figure figcaption a:hover {
color: var(--theme-color);
background-color: #fff;
}


#footage {
width: 1000px;
margin: auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
column-gap: 100px;
row-gap: 20px;
}

#footage figure figcaption {
font-size: 30px;
font-weight: 700;
color: var(--theme-color);
text-align: center;
padding: 10px 0 0 0;
}