.main {
background: url(imgs/main01.png) no-repeat center center;
background-size: 100% auto;
}

.tp-color_flex {
	width: 795px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 20px;
}

.tp-color_flex a {
width: calc(50% - 3px);
margin-bottom: 6px;
}


.tp-color_flex a div {
display: table;
width: 100%;
box-sizing: border-box;
position: relative;
}

.tp-color_flex a div h3{
text-align: center;
display: table-cell;
height: 250px;
vertical-align: middle;
color: #fff;
z-index: 9;
}

.tp-color_flex a:nth-child(1) div{
background: #cecbc5;
background: url("imgs/c_trend.png") no-repeat top center;
background-size: 100% auto;
}
.tp-color_flex a:nth-child(2) div{
background: #ccc;
background: url("imgs/c_proposal.png") no-repeat top center;
background-size: 100% auto;
}
.tp-color_flex a:hover:nth-child(1) div{
background: url(imgs/c_trend.png) no-repeat top center;
background-color: rgba(255, 255, 255, 0.3); /* 白を70%透過 */
background-size: 100% auto;
}

.tp-color_flex a:hover:nth-child(2) div{
background: url("imgs/c_proposal.png") no-repeat top center;
background-color: rgba(255, 255, 255, 0.3); /* 白を70%透過 */
background-size: 100% auto;
}


@media only screen and (max-width:840px){
.tp-color_flex {
	width: 96%;
	}
.tp-color_flex a div h3{
height: 150px;
}
}

@media only screen and (max-width:480px){
.tp-color_flex {
width: 90%;
display: block;
}
.tp-color_flex a div{
margin-bottom: 10px;
}
}