@charset "UTF-8";

/* 施工事例 */
#flexbox{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-box;
	display:-webkit-flexbox;
	display:-moz-flexbox;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	-js-display:flex;
	display:flex;
	-webkit-box-lines:multiple;
	-moz-box-lines:multiple;
	-webkit-flex-wrap:wrap;
	-moz-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
}

#subtitle{
	text-align:center;
}
#subtitle h3{
	font-family:'Avenir-Light';
	font-size:2.8rem;
	padding:0 0 10px;
	-webkit-animation: fadeInUp 0.5s ease-in-out;
    animation: fadeInUp 0.5s ease-in-out;
}
#subtitle h4{
	font-family:'Avenir-Medium';
	font-size:1.8rem;
	padding:0 0 10px;
	-webkit-animation: fadeInUp 0.5s ease-in-out;
    animation: fadeInUp 0.5s ease-in-out;
}
#subtitle p{
	font-family:'Verdana','游ゴシック','YuGothic','ヒラギノ角ゴ ProN W3','Hiragino Kaku Gothic ProN','メイリオ','Meiryo','ＭＳ Ｐゴシック','MS PGothic',sans-serif;
	-webkit-animation: fadeInUp 0.5s ease-in-out;
    animation: fadeInUp 0.5s ease-in-out;
}
@media (min-width: 414px) {
	br.br414{
		display:none;
	}
}
@media (min-width: 568px) {
	br.br568{
		display:none;
	}
}
@media (min-width: 768px) {
	#subtitle h3{
		font-size:3.0rem;
	}
	#subtitle h4{
		font-size:2.0rem;
	}
}
@media (min-width: 1200px) {
	#subtitle h3{
		font-size:3.2rem;
	}
	#subtitle h4{
		font-size:2.2rem;
	}
	#subtitle p{
		font-size:1.4rem;
	}
}

.photo{
	margin:7% 0 0;
	position:relative;
}
.photo img{
	-webkit-animation: fadeInUp 0.5s ease-in-out;
    animation: fadeInUp 0.5s ease-in-out;
}
.overlay{
    position: absolute;
    left: 14px;
    bottom: 15px;
    text-shadow: 1px 1px 1px #000;
    /*opacity: 0.7;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;*/
    -webkit-animation: fadeInUp 0.5s ease-in-out;
    animation: fadeInUp 0.5s ease-in-out;
}
.white{
	color:#FFF;
}
.overlay p{
	padding:0;
	margin:0;
	line-height:130%;
}
.item{
	text-align:left;
    -webkit-animation: fadeInUp 0.5s ease-in-out;
    animation: fadeInUp 0.5s ease-in-out;
}
.item p{
	padding:0;
	margin:0;
	line-height:130%;
}
.item p.place{
	font-family:'Avenir-Light';
	font-size:1.8rem;
	padding-top:3px;
}
.item p.before-after{
	font-family:'Avenir-Medium';
	font-size:1.4rem;
}
.before{
	width:70%;
}
@media (min-width: 375px) {
	.item p.place{
		font-size:2.2rem;
	}
}
@media (min-width: 768px) {
	.photo{
		float:left;
		width:46.5%;
	}
	.photo.full{
		width:100%;
	}
	.photo.even{
		margin-left:7%;
	}
	.photo.yohaku{
		margin-top:22.5%;
	}
	.photo.right{
		text-align:right;
	}
	.item p.place{
		font-size:2.0rem;
	}
	.item p.before-after{
		font-size:1.6rem;
	}
	.item.right{
		margin-left:30%;
	}
}
@media (min-width: 1500px) {
	.item p.place{
		font-size:2.3rem;
	}
	.item p.before-after{
		font-size:1.9rem;
	}
	
}