@charset "UTF-8";

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

.aboutTitle {
	display: flex;
	align-items: center;
	max-width: 1200px;
	height: 250px;
	margin: 20px auto 0;
	/* background: url(/images/about/bg_mainImg_2.jpg) no-repeat center center/cover; */
	background: url(/images/top/pic_mainImg_240913.jpg) no-repeat center center/cover;
	border: none;
}
	.aboutTitle .pageTitle {
		margin-top: -60px;
		margin-bottom: 0;
		padding-left: 15px;
		border: none;
		text-align: left;
	}
	.aboutTitle .pageTitle::after {
		margin: 0;
		background: #ffffff;
	}

.aboutBox {
	padding: 30px 0;
	display: flex;
	align-items: center;
	max-width: 1200px;
	height: 300px;
	margin: 0 auto;
}
.aboutBox .container {
	width: 100%;
}
	.aboutBox .sectionTitle {
		text-align: left;
	}
	.aboutBox .txt_about {
		margin-bottom: 15px;
		font-family: "Zen Old Mincho";
		line-height: 1.6;
	}
	.aboutBox .btn_about {
		padding: 15px 30px;
		border: 1px solid #000;
		color: #000;
		display: block;
		position: relative;
	}
	.aboutBox .btn_about:hover {
		background: #000;
		color: #fff;
		opacity: 1;
	}
		.aboutBox .btn_about .icon {
			width: 15px;
			height: 15px;
			position: absolute;
			margin: auto;
			top: 0;
			bottom: 0;
			right: 10px;
		}
		.aboutBox .btn_about:hover .icon {
			fill: #fff;
		}

.modalBox {
	display: none;
}
	.modaal-wrapper .modaal-close {
		width: 140px;
		height: 45px;
		background: #fff;
		border-radius: 0;
		color: #000;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: "Zen Old Mincho";
		position: absolute;
		right: inherit;
		left: 50%;
		top: inherit;
		bottom: -80px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	.modaal-wrapper .modaal-close:hover {
		background: #f9a3b0;
		color: #fff;
	}
	.modaal-wrapper .modaal-close::before,
	.modaal-wrapper .modaal-close::after {
		display: none;
	}
		.modaal-wrapper .modaal-close .icon {
			position: absolute;
			right: 15px;
		}
		.modaal-wrapper .modaal-close:hover .icon {
			fill: #fff;
		}
		.modaal-content-container {
			padding: 0;
		}
	.modalBox_inner {
		padding: 15px;
	}
		.modalBox_inner .sectionTitle {
			margin-bottom: 15px;
			text-align: left;
		}
		.modalBox_inner .normalTxt:not(:last-of-type) {
			margin-bottom: 15px;
		}
			.modalBox_inner .normalTxt br {
				display: none;
			}

.aboutBox01,
.modalBox_inner01 {
	background: url(/images/about/bg_about01.jpg) no-repeat center center/cover;
}
	.aboutBox01 .txt_about + .btn_aboutBox {
		margin-bottom: 10px;
	}
	.modalBox_inner01_02 {
		background: #edf8fe url(/images/about/bg_about01_modal.jpg) no-repeat center center/cover;
	}
	.modalBox_inner01_02 .sectionTitle,
	.modalBox_inner01_02 .normalTxt {
		text-shadow:
			rgba(255,255,255,0.7) 1px 1px 0, rgba(255,255,255,0.7) -1px -1px 0,
			rgba(255,255,255,0.7) -1px 1px 0, rgba(255,255,255,0.7) 1px -1px 0,
			rgba(255,255,255,0.7) 0px 1px 0, rgba(255,255,255,0.7)  0-1px 0,
			rgba(255,255,255,0.7) -1px 0 0, rgba(255,255,255,0.7) 1px 0 0;
	}
		.aboutBox01 .txt_about + .btn_aboutBox a {
			background: #f9a3b0;
			border-color: #f9a3b0;
			color: #fff;
		}
		.aboutBox01 .txt_about + .btn_aboutBox a:hover {
			background: #000;
			border-color: #000;
		}
		.aboutBox01 .txt_about + .btn_aboutBox a .icon {
			fill: #fff
		}

.aboutBox02 {
	background: #edf8fe url(/images/about/bg_about02.jpg) no-repeat center center/cover;
}
.aboutBox02 .sectionTitle,
.aboutBox02 .txt_about {
	text-shadow: 0 0 5px #edf8fe, 0 0 5px #edf8fe;
}
	.modalBox_inner02 {
		background: #edf8fe url(/images/about/bg_about02_modal.jpg) no-repeat center center/cover;
	}
	.modalBox_inner02 .sectionTitle,
	.modalBox_inner02 .normalTxt {
		text-shadow: 0 0 3px #edf8fe, 0 0 3px #edf8fe;
	}
.aboutBox03 {
	margin-bottom: 20px;
}
.aboutBox03,
.modalBox_inner03 {
	background: url(/images/about/bg_about03.jpg) no-repeat center center/cover;
	color: #fff;
	position: relative;
}
.aboutBox03::before,
.modalBox_inner03::before {
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.15);
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
	.aboutBox03 .container,
	.modalBox_inner03 .sectionTitle,
	.modalBox_inner03 .normalTxt {
		position: relative;
		z-index: 1;
	}
	.aboutBox03 .btn_about {
		background: rgba(2,71,3,0.3);
		border-color: #fff;
		color: #fff;
	}
	.aboutBox03 .btn_about:hover {
		border-color: #000;
	}
		.aboutBox03 .btn_about .icon {
			fill: #fff;
		}


/* ================================================================================================================================================================================== */
/* tablet */
/* ================================================================================================================================================================================== */

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

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

.aboutTitle {
	height: 340px;
}
	.aboutTitle .pageTitle {
		padding-left: 30px;
	}

.aboutBox {
	height: 340px;
	padding: 60px 0;
}
	.aboutBox .sectionTitle {
		width: 50%;
		text-align: left;
	}
	.aboutBox .txt_about {
		width: 50%;
	}
	.aboutBox .btn_aboutBox {
		width: 50%;
	}
		.aboutBox .btn_about {
			width: 50%;
		}
			.aboutBox .btn_about .icon {
				width: 20px;
				height: 20px;
			}

.aboutBox01 {
}
	.aboutBox01 .txt_about + .btn_aboutBox {
		margin-bottom: 0;
	}
	.aboutBox01 .btn_aboutBox {
		width: 25%;
		display: inline-block;
	}
		.aboutBox01 .btn_aboutBox .btn_about {
			width: 100%;
		}

.aboutBox02 {
}
	.aboutBox02 .sectionTitle,
	.aboutBox02 .txt_about {
		margin-left: auto;
		text-shadow: none;
	}
	.aboutBox02 .btn_aboutBox {
		margin-left: auto;
	}

.modalBox {
}
	.modalBox_inner {
	}
		.modalBox_inner .normalTxt {
		}
			.modalBox_inner .normalTxt br {
				display: block;
			}
	.modalBox_inner {
		padding: 30px;
	}


}


/* ================================================================================================================================================================================== */
/* tablet */
/* ================================================================================================================================================================================== */

@media only screen and (min-width: 1024px) {

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

.aboutTitle {
	height: 470px;
}

.aboutBox {
	height: 470px;
}
	.aboutBox .txt_about {
		margin-bottom: 30px;
		font-size: 1.6rem;
		line-height: 1.8;
	}
	.aboutBox .btn_about {
		width: 180px;
	}

.aboutBox01 {
}
	.aboutBox01 .btn_aboutBox {
		width: 180px;
	}
	.aboutBox01 .txt_about + .btn_aboutBox {
		margin-right: 10px;
	}

.modaal-container {
	width: 900px;
}
.modalBox {
}
	.modalBox_inner {
		padding: 60px;
	}
		.modalBox_inner .sectionTitle {
			margin-bottom: 30px;
		}


}


/* ================================================================================================================================================================================== */
/* pc */
/* ================================================================================================================================================================================== */

@media only screen and (min-width: 1280px) {

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

.aboutTitle {
}
	.aboutTitle .pageTitle {
		width: 100%;
		max-width: 1300px;
		margin: -100px auto 0;
		padding: 0 50px;
	}

.modaal-container {
	width: 1000px;
}


}


/* ================================================================================================================================================================================== */
/* pc */
/* ================================================================================================================================================================================== */

@media only screen and (min-width: 1500px) {

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



}