@charset "utf-8";

img { width: 100%; }
.inner { width: 100%; max-width: 1080px; margin: 0 auto; position: relative; } 

header { display: flex; justify-content: center; align-items: center; height: 250px; background-color: #ffffec; }
header a { display: block; }

.img-wrap { display: flex; flex-direction: column; gap: 80px; margin-top: 120px; }
.img-wrap .img-box { position: relative; }
.img-wrap .ico-box { position: absolute; }

.img-wrap .img3 .ico-box { top: -150px; right: -30px; }
.img-wrap .img4 .ico-box { top: 0; right: 50px; }
.img-wrap .img5 .ico-box { top:  -50px; left: -20px; }
.img-wrap .img6 .ico-box { top: 0; right: 10px; }

footer { height: 64px; margin-top: 100px; background-color: #009b4e; }

@media screen and (max-width:1080px){
    header { height: auto; padding: 20px 0; }
    .inner { padding: 0 20px; overflow-x: hidden; box-sizing: border-box; }
    .img-wrap { gap: 50px; margin-top: 10vw; }
    .img-wrap .img3 .ico-box { max-width: 28.1481481481vw; top: -23%; }
    .img-wrap .img4 .ico-box { max-width: 24.4444444444vw; right: 3%; }
    .img-wrap .img5 .ico-box { max-width: 8.89148148148vw; }
    .img-wrap .img6 .ico-box { max-width: 9.44444444444vw; right: 1%; }
}
@media screen and (max-width:640px){
    .inner { padding: 0 12px; }
    .img-wrap { gap: 30px; }
    footer { height: 40px; margin-top: 60px; }
}