@charset "UTF-8";

/* family */
@import url(../settings.less);
/*================================================*/
#intro {
	.pic {
		@media screen and ( max-width: @break-max-width ) {
			text-align: center;
			img {
				width: 60%;
			}
		}
	}
	.heading03 {
		@media screen and ( max-width: @break-max-width ) {
			font-size: 1.8rem;
		}
	}
	.signature {
		text-align: center;
		i {
			margin-right: 10px;
			font-weight: bold;
			@media screen and ( max-width: @break-max-width ) {
				font-size: 1.4rem;
			}
		}
		i, img {
			vertical-align: middle;
		}
		img {
			@media screen and ( max-width: @break-max-width ) {
				height: 24px;
			}
		}
	}
}

#voices {
	h2 {
		background: #ED8782;
		color: #fff;
		font-size: 3.0rem;
		padding: 12px;
		text-align: center;
		@media screen and ( max-width: @break-max-width ) {
			font-size: 1.5rem;
		}
	}
	.cover {
		padding: 30px;
		border: none;
		background-image: url(../../_images/family/bg.jpg);
		background-size: cover;
		@media screen and ( max-width: @break-max-width ) {
			padding: 20px;
		}
		.voice_part {
			margin-bottom: 40px;
			@media screen and ( max-width: @break-max-width ) {
				margin-bottom: 20px;
			}
			.voice_area {
				padding: 40px 40px 10px 40px;
				background: rgba(255,255,255,0.8);
				border-radius: 20px;
				-moz-border-radius: 20px;
				-webkit-border-radius: 20px;
				width: 550px;
				box-sizing: border-box;
				text-align: left;
				@media screen and ( max-width: @break-max-width ) {
					padding: 20px 20px 10px 20px;
					width: 100%;
				}
				p {
					font-size: 1.8rem;
					@media screen and ( max-width: @break-max-width ) {
						font-size: 1.4rem;
					}
					span.right {
						display: block;
						text-align: right;
						@media screen and ( max-width: @break-max-width ) {
							text-align: left;
						}
					}
				}
				li {
					font-size: 1.8rem;
					@media screen and ( max-width: @break-max-width ) {
						font-size: 1.4rem;
					}
				}
			}
			.inner {
				display: inline-block;
				position: relative;
			}
			.illust {
				position: absolute;
				bottom: 0;
				@media screen and ( max-width: @break-max-width ) {
					img {
						zoom: 50%;
					}
				}
			}
		}
		.voice_part.image_left {
			text-align: right;
			.inner {
				padding-left: 170px;
				@media screen and ( max-width: @break-max-width ) {
					padding: 0;
					padding-bottom: 80px;
				}
				.illust {
					z-index: 10;
					left: 0;
					@media screen and ( max-width: @break-max-width ) {
						right: 0;
						bottom: 0;
					}
				}
				.voice_area {
					float: left;
					margin-left: -20px;
					@media screen and ( max-width: @break-max-width ) {
						margin: 0;
					}
				}
			}
			.inner_01 {
				@media screen and ( max-width: @break-max-width ) {
					padding: 0;
					padding-bottom: 40px;
				}
			}
		}
		.voice_part.image_right {
			text-align: left;
			.inner {
				padding-right: 170px;
				@media screen and ( max-width: @break-max-width ) {
					padding: 0;
					padding-bottom: 80px;
				}
				.illust {
					z-index: 10;
					right: 0;
					@media screen and ( max-width: @break-max-width ) {
						left: 0;
						bottom: 0;
					}
				}
				.voice_area {
					float: right;
					margin-right: -20px;
					@media screen and ( max-width: @break-max-width ) {
						margin: 0;
					}
					span.right {
						@media screen and ( max-width: @break-max-width ) {
							text-align: right;
						}
					}
				}
			}
		}
	}
}

@media screen and ( max-width: @break-max-width ) {

}
/*==================================================

	[ utility ] $clearfix

==================================================*/
.clearfix:after,
.voice_part:after {
	content:" ";
	display:block;
	clear:both;
}