@charset 'UTF-8';

.section02 {
    background-color: #d8e0e8;
}

/*----------虫眼鏡、文字画像の配置----------*/
.img-area a {
    position: absolute;
}

/*夏編*/
.img-area a:nth-of-type(1) {/*窓*/
    top: 99px;
    left: 229px;
}

.img-area a:nth-of-type(2) {/*照明*/
    top: 75px;
    left: 503px;
}

.img-area a:nth-of-type(3) {/*エアコン*/
    top: 69px;
    left: 757px;
}

.img-area a:nth-of-type(4) {/*テレビ*/
    top: 246px;
    left: 503px;
}

.img-area a:nth-of-type(5) {/*掃除*/
    top: 426px;
    left: 803px;
}

/*冬編*/
.img-area a:nth-of-type(6) {/*こたつ*/
    top: 522px;
    left: 325px;
}

.img-area a:nth-of-type(7) {/*床*/
    top: 630px;
    left: 574px;
}

/*-----------テキスト、背景、ボタンカラー-----------*/
:root {
    --livingPage-color: #0075A2;
}

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

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

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

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

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



/*----------------夏と冬のタブの部分----------------*/
.living-tab-area {
    display: flex;
    column-gap: 10px;
}

.living-tab {
    padding: 5px 37px;
    font-size: 24px;
    font-weight: bold;
    align-items: center;
    filter: grayscale(100%);/*選択されていないタブは背景を白黒にしておく*/
    cursor: pointer;
}

/*夏タブのボーダー*/
.living-tab:nth-of-type(1) {
    border: solid 3px #AD0E28;
    border-bottom: none;
    color: #AD0E28;
}

/*冬タブのボーダー*/
.living-tab:nth-of-type(2) {
    border: solid 3px var(--livingPage-color);
    border-bottom: none;
    color: var(--livingPage-color);
}

/*夏タブの背景色*/
.living-tab.tab-active:nth-of-type(1) {
    background-color: #FFECEC;
}

/*冬タブの背景色*/
.living-tab.tab-active:nth-of-type(2) {
    background-color: #EAEFFF;
}

/*選択されているタブは色を付ける*/
.living-tab.tab-active {
    filter: grayscale(0);
}

/*冬版夏版の画像を消しておく*/
.img-area {
    display: none;
}

/*tab-activeクラスが追加された画像を表示させる*/
.img-area.tab-active {
    display: block;
}

.living-tab img {
    width: 32px;
    height: 100%;
    margin-left: 20px;
}

/*夏版の背景画像のボーダーの色*/
.summer-img-area .section02-bg {
    border: solid 4px #AD0E28;
}

/*夏版の背景画像のボーダーの色*/
.winter-img-area .section02-bg {
    border: solid 4px #0075A2;
}

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

.summer{/*クーラー1枚目（夏）*/
	display: block;
}

.winter{/*クーラー1枚目（冬）*/
	display: none;
}


/*----------画面幅500px以下----------*/
@media screen and (max-width: 500px) {

	/*夏編*/
    .img-area a:nth-of-type(1) {
        top: 42px;
        left: 99px;
    }

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

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

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

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

	/*冬編*/
    .img-area a:nth-of-type(6) {
        top: 223px;
        left: 142px;
    }

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