@charset "utf-8";
/*工事・リフォーム-construction*/
.contentBox01.cf li img,.contentBox02.cf li img {
	display:block;
	width:100%;
}

.contentBox01.cf li {
	float: left;
	width: 48.67%;
	margin-left: 0.65%;
	margin-left: 0.65%;
	margin-bottom: 10px;
	margin-right: 0.65%;
}
.contentBox02.cf li {
	float: left;
	width:31.73%;
	margin-right:0.8%;
	margin-left:0.8%;
	margin-bottom:10px;
}
#section03 #ttl03 {
	background-image: url(../images/generation/bg_01.gif);
	background-repeat: repeat-x;
	height: 40px;
	margin-bottom:15px;
}
#section03 #ttl03 img {
	display: block;
	margin: auto;
	padding-top: 10px;
}

#section03 .cf .imgL01 {
	width: 60%;
	float: left;
}
#section03 .cf .txtR01 {
	float:right;
	width: 40%;
}

#section03 .cf .txtR01_sp {
	display:none;
}



#section03 .cf .imgL02 {
	width:44.66%;
	float: left;
	margin-right:2.66%;
	position: relative;
}
#section03 .cf .imgR02 {
	width:52.66%;
	float: right;
	position: relative;
}

@media only screen and (max-width:640px) {
#section03 .ttl01 img {
	display: block;
	margin: auto;
	width:90%;
	max-width:337px;
	padding-top: 10px;
}
.contentBox01.cf li {
	float: none;
	width:100%;
	margin-right:0;
	margin-bottom:10px;
}
.contentBox02.cf li {
	float: left;
	width:48.4%;
	margin-right:0.8%;
	margin-left:0.8%;
	margin-bottom:10px;
}



#section03 .cf .imgL01 {
	width: 100%;
	float: none;
	margin-bottom:15px;
}
#section03 .cf .txtR01 {
	display:none;
}

#section03 .cf .txtR01_sp {
	display:block;

}


#section03 .cf .imgL02 {
	width:100%;
	float: none;
}
#section03 .cf .imgR02 {
	width:100%;
	float: none;
}
}

.balloon{
	width: 100%;
}
.balloon img{
	max-width:86%;
	position: absolute;
	top: 10%;
	left: 0;
	right: 0;
	margin: auto;
}
.balloon .voicecomment {
	transform-origin: center bottom;
	animation: balloonAnime 3s ease-out 0s infinite normal both;
}
@keyframes balloonAnime {
	0% { transform: scale(1); }
	10% { transform: scale(1.1); }
	20% { transform: scale(1); }
	30% { transform: scale(1.2); }
	40% { transform: scale(1); }
	100% { transform: scale(1); }
}

.ab_box{
	width: 100%;
}
.ab_box img{
	max-width:70%;
	position: absolute;
	top: 10%;
	left: 0;
	right: 0;
	margin: auto;
}
.ab_box .animation{
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 1.5s;
}
.ab_box .keyframe3{
	animation-name: anim_s;
	transform: rotate(10deg);
	animation-duration: 5s;
}

@keyframes anim_s {
50% {
	transform: rotate(-10deg);
}
100% {
	transform: rotate(10deg);
}
}

@media only screen and (max-width:640px) {
.balloon .voicecomment {
	transform-origin: center bottom;
	animation: none;
}
.ab_box .animation{
	animation:none;
}
.ab_box .keyframe3{
	animation:none;
	transform: rotate(0deg);
}
}