@charset "UTF-8";

/* -------------------------- */
/* pageHeader */
/* -------------------------- */

.txtBox {
	margin-top: 35px;
}
.contPictureBox {
	color: #fff;
}
	#pageTitle {
		margin-bottom: 27px;
		background: url(../images/top/tit_concept02.png) no-repeat;
	}


/* -------------------------- */
/* content */
/* -------------------------- */

#concept {
}
	.conceptBox {
		overflow: hidden;
	}
		.conceptBox .conceptTitle {
			overflow: hidden;
			cursor: pointer;
		}
		.conceptBox .conceptTitle:hover {
			opacity: 0.8;
		}
			.conceptBox .conceptTitle figure {
				position: relative;
				z-index: -1;
				line-height: 0;
			}
			.conceptBox .conceptTitle .titleInner {
				padding-left: 65px;
			}
			.conceptBox:nth-of-type(1) .conceptTitle .titleInner {
				height: 211px;
				margin-top: -211px;
				/*color: #fff;*/
			}
			.conceptBox:nth-of-type(2) .conceptTitle .titleInner {
				height: 373px;
				margin-top: -373px;
				color: #fff;
			}
			.conceptBox:nth-of-type(3) .conceptTitle .titleInner {
				height: 213px;
				margin-top: -213px;
				color: #fff;
			}
				.conceptBox .conceptTitle .titleInner h2 {
					height: 39px;
					margin: 0 0 35px 2px;
					text-indent: 150%;
					white-space: nowrap;
					overflow: hidden;
				}
					.conceptBox:nth-of-type(1) .conceptTitle .titleInner h2 {
						width: 231px;
						background: url(../images/concept/txt_concept01.png) no-repeat;
					}
					.conceptBox:nth-of-type(2) .conceptTitle .titleInner h2 {
						width: 263px;
						background: url(../images/concept/txt_concept02.png) no-repeat;
					}
					.conceptBox:nth-of-type(3) .conceptTitle .titleInner h2 {
						width: 355px;
						background: url(../images/concept/txt_concept03.png) no-repeat;
					}
				.conceptBox .conceptTitle .titleInner p {
					font-size: 2.0em;
					line-height: 1.6em;
				}
				.conceptBox .conceptTitle .titleInner .btn {
					width: 123px;
					height: 24px;
					margin: 20px 0 0 2px;
					padding: 2px 0 0 52px;
					text-indent: 150%;
					white-space: nowrap;
					overflow: hidden;
				}
					.conceptBox:nth-of-type(1) .conceptTitle .titleInner .btn {
						background: url(../images/concept/btn_open02.png) no-repeat;
					}					
					.conceptBox:nth-of-type(2) .conceptTitle .titleInner .btn,
					.conceptBox:nth-of-type(3) .conceptTitle .titleInner .btn {
						background: url(../images/concept/btn_open.png) no-repeat;
					}
					.conceptBox:nth-of-type(1) .open .titleInner .btn	{
						background: url(../images/concept/btn_close02.png) no-repeat;
					}
					.conceptBox:nth-of-type(2) .open .titleInner .btn,
					.conceptBox:nth-of-type(3) .open .titleInner .btn {
						background: url(../images/concept/btn_close.png) no-repeat;
					}
		.conceptBox .conceptTxt {
			overflow: hidden;
			padding: 44px 15px 70px 93px;
			display: none;
		}
		.conceptBox:last-child .conceptTxt {
			padding-bottom: 0;
		}
			.conceptBox .conceptTxt .ctxtBox {
				padding-right: 50px;
			}
				.conceptBox .conceptTxt .ctxtBox h3 {
					margin-bottom: 23px;
					padding-left: 30px;
					background: url(../images/concept/icon_concept01.gif) no-repeat;
					font-size: 1.8em;
				}
				.conceptBox .conceptTxt .ctxtBox .normalTxtSmall {
					text-align: justify;
				}




/* ================================================================================================================================================================================== */
/* mobile */
/* ================================================================================================================================================================================== */

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* max-768 */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media only screen and (min-width:481px) and (max-width:768px) {

.txtBox {
	margin-top: 0;
}
.contPictureBox {
	color: inherit;
}

.conceptBox .conceptTitle {
}
	.conceptBox .conceptTitle figure {
	}
		.conceptBox .conceptTitle figure img {
			width: auto;
			height: 350px;
		}
	.conceptBox .conceptTitle .titleInner {
		padding-left: 30px;
	}
	.conceptBox:nth-of-type(1) .conceptTitle .titleInner {
		height: 250px;
		margin-top: -250px;
		padding-right: 30px;
	}
	.conceptBox:nth-of-type(2) .conceptTitle .titleInner {
		height: 315px;
		margin-top: -315px;
		padding-right: 30px;
		padding-top: 50px;
	}
	.conceptBox:nth-of-type(3) .conceptTitle .titleInner {
		height: 265px;
		margin-top: -265px;
		padding-right: 30px;
	}
		.conceptBox .conceptTitle .titleInner h2 {
			margin-bottom: 20px;
		}
.conceptBox .conceptTxt {
	overflow: hidden;
	padding: 40px 25px;
}
	.conceptBox .conceptTxt .ctxtBox {
		padding-right: 0;
	}
	.conceptBox .conceptTxt .ctxtBox:not(:last-child) {
		margin-bottom: 30px;
	}
		.conceptBox .conceptTxt .ctxtBox h3 {
			margin-bottom: 15px;
		}

}



/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* max-480 */
/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media only screen and (min-width:320px) and (max-width:480px) {

.txtBox {
	margin-top: 0;
}
.contPictureBox {
	color: inherit;
}

.conceptBox .conceptTitle {
}
	.conceptBox .conceptTitle figure {
		z-index: 0;
	}
	.conceptBox:not(:first-child) .conceptTitle figure {
		margin-top: 40px;
	}
		.conceptBox .conceptTitle figure img {
			width: 100%;
			height: auto;
		}
	.conceptBox .conceptTitle .titleInner ,
	.conceptBox:nth-of-type(1) .conceptTitle .titleInner ,
	.conceptBox:nth-of-type(2) .conceptTitle .titleInner ,
	.conceptBox:nth-of-type(3) .conceptTitle .titleInner {
		height: auto;
		margin-top: 25px;
		padding-left: 0;
		color: #323232;
	}
		.conceptBox .conceptTitle .titleInner h2 {
			height: 30px;
			margin: 0 0 15px 2px;
		}
			.conceptBox:nth-of-type(1) .conceptTitle .titleInner h2 {
				background: url(../images/concept/txt_concept01.png) no-repeat;
				background-size: auto 30px;
			}
			.conceptBox:nth-of-type(2) .conceptTitle .titleInner h2 {
				background: url(../images/concept/txt_concept02_b.png) no-repeat;
				background-size: auto 30px;
			}
			.conceptBox:nth-of-type(3) .conceptTitle .titleInner h2 {
				background: url(../images/concept/txt_concept03_b.png) no-repeat;
				background-size: auto 30px;
			}
		.conceptBox .conceptTitle .titleInner p {
			font-size: 1.6em;
			line-height: 1.6em;
		}
		.conceptBox .conceptTitle .titleInner .btn {
			width: 123px;
			height: 24px;
			margin: 20px 0 0 2px;
			padding: 2px 0 0 52px;
			text-indent: 150%;
			white-space: nowrap;
			overflow: hidden;
		}
			.conceptBox:nth-of-type(1) .conceptTitle .titleInner .btn ,
			.conceptBox:nth-of-type(2) .conceptTitle .titleInner .btn,
			.conceptBox:nth-of-type(3) .conceptTitle .titleInner .btn {
				background: url(../images/concept/btn_open02.png) no-repeat;
			}
			.conceptBox:nth-of-type(1) .open .titleInner .btn ,
			.conceptBox:nth-of-type(2) .open .titleInner .btn,
			.conceptBox:nth-of-type(3) .open .titleInner .btn {
				background: url(../images/concept/btn_close02.png) no-repeat;
			}
.conceptBox .conceptTxt {
	overflow: hidden;
	padding: 0;
	margin-left: 4px;
}
.conceptBox:last-child .conceptTxt {
	padding-bottom: 0;
}
	.conceptBox .conceptTxt .ctxtBox {
		margin-top: 20px;
		padding-right: 15px;
		border-top: 1px dashed #323232;
	}
		.conceptBox .conceptTxt .ctxtBox h3 {
			margin: 20px 0 13px 0;
			padding: 2px 0 0 30px;
			font-size: 1.6em;
		}
		.conceptBox .conceptTxt .ctxtBox p {
			line-height: 1.6em;
		}
}