@charset 'UTF-8';

.section02 {
    background-color: #e4e9ea;
}

/*----------虫眼鏡の配置----------*/
.img-area a {
    position: absolute;
}

.img-area a:nth-of-type(1) {
    top: 424px;
    left: 258px;
}

.img-area a:nth-of-type(2) {
    top: 424px;
    left: 446px;
}

.img-area a:nth-of-type(3) {
    top: 424px;
    left: 749px;
}

.img-area a:nth-of-type(4) {
    top: 656px;
    left: 73px;
}

.img-area a:nth-of-type(5) {
    top: 656px;
    left: 367px;
}

.img-area a:nth-of-type(6) {
    top: 656px;
    left: 607px;
}

.img-area a:nth-of-type(7) {
    top: 656px;
    left: 818px;
}

.img-area a:nth-of-type(8) {
    top: 656px;
    left: 961px;
}

/*-----------テキスト、背景、ボタンカラー-----------*/
:root {
    --housePage-color: #008EC1;
}

.section01 h2 {
    color: var(--housePage-color);
}

.section02 p {
    background-color: var(--housePage-color);
}

.section02 p::after {
    border-top: solid 36px var(--housePage-color);
}

.section02-bg {
    border: solid 4px var(--housePage-color);
}

.btn input {
    background-color: var(--housePage-color);
}

/*----------画面幅500px以下----------*/
@media screen and (max-width: 500px) {
	
    .img-area a:nth-of-type(1) {
        top: 183px;
        left: 115px;
    }
    
    .img-area a:nth-of-type(2) {
        top: 183px;
        left: 198px;
    }
    
    .img-area a:nth-of-type(3) {
        top: 183px;
        left: 323px;
    }
    
    .img-area a:nth-of-type(4) {
        top: 283px;
        left: 40px;
    }
    
    .img-area a:nth-of-type(5) {
        top: 283px;
        left: 160px;
    }
    
    .img-area a:nth-of-type(6) {
        top: 283px;
        left: 268px;
    }
    
    .img-area a:nth-of-type(7) {
        top: 283px;
        left: 352px;
    }
    
    .img-area a:nth-of-type(8) {
        top: 283px;
        left: 414px;
    }

    .section02-bg {
        border: solid 3px var(--housePage-color);
    }
}