@charset "utf-8";

:root {
	--pageTemplateBorder: #ccc 1px solid;
	--pageContentTitleFontColor: #000;
	--pageContentTitleFontSize: 40px;
	--pageContentSubtitleFontColor: var(--pageContentTitleFontColor);
	--pageContentSubtitleFontSize: 18px;
	--pageContentTextFontColor: var(--pageContentTitleFontColor);
	--pageContentTextFontSize: 16px;
}


.userContent {
  color: var(--pageContentTextFontColor); font-size: var(--pageContentTextFontSize); line-height: 2em;
}
.userContent img {
	max-width: 100% !important;
}
.contentTitle {
	text-align: left; font-weight: bold; width: 100%; border-bottom: #CCC 1px solid; font-size: 1.5em; color: #000;
}
.pageContent {
	margin: 40px 100px 40px 100px;
	transition: opacity 1s 0.3s ease-in, transform 0.5s 0.3s ease-in; opacity: 1; transform: translate(0, 0);
}
.pageContent.onload {
	opacity: 0; transform: translate(0, 20px);
}
.homeContent {

}


.moveContent {
	transition: transform 0.5s 0s ease-in; transform: translate(0, 0);
}
.moveContent.hide {
	transform: translate(0, 20px);
}


.pageHeader {
	width: 100%; margin: 0; box-sizing: border-box;
	display: flex; align-items: flex-start; justify-content: center;
	transition: opacity 1s 0s ease-in, transform 0.5s 0s ease-in; opacity: 1; transform: translate(0, 0);
}
.pageHeader.onload {
	opacity: 0; transform: translate(0, 20px);
}
.pageHeader > div {
	width: 1280px; margin: 0; padding: 40px 0 40px 20px; box-sizing: border-box;
}
.pageHeader .subtitle {
	padding: 0 0 10px 180px; max-width: 700px;
	color: var(--pageContentSubtitleFontColor); font-size: var(--pageContentSubtitleFontSize); line-height: 2em; font-weight: bold;
}
.pageHeader .title {
	padding: 0 0 40px 180px; max-width: 700px;
	color: var(--pageContentTitleFontColor); font-size: var(--pageContentTitleFontSize); line-height: 1em; font-weight: bold;
}
.pageHeader .image {
	display: inline-block; width: 35%; box-sizing: border-box; vertical-align: top; margin: 20px 0 0 0;
}
.pageHeader .image img {
	max-width: 90%;
}
.pageHeader .text {
	display: inline-block; width: 55%;  box-sizing: border-box;
	color: var(--pageContentTextFontColor); font-size: var(--pageContentTextFontSize); line-height: 2em;
}


.aboutContent {
	margin: 40px 100px; line-height: 2em;
}

.grid5Box {
	display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; margin: 60px 100px 0 100px;
}
.grid5Box > div {
	padding: 30px 60px; margin: 0; border-right: var(--pageTemplateBorder);
}
.grid5Box > div:nth-child(5n+1) {
	border-left: var(--pageTemplateBorder);
}
.grid5Box > div:first-child {
	border-left: var(--pageTemplateBorder);
}
.grid5Box .text {
	margin: 0;
}
.grid5Box .subtitle {
	font-size: 24px; font-weight: bold; margin: 0 0 40px 0;
}

@media only screen and (max-width:1300px) {
	.grid5Box {
		grid-template-columns: 1fr 1fr 1fr;
	}
	.grid5Box > div:nth-child(5n+1) {
		border-left: none;
	}
	.grid5Box > div:nth-child(3n+1) {
		border-left: var(--pageTemplateBorder);
	}
	.pageHeader > div {
		width: 100%;
	}
}

@media only screen and (max-width:960px) {
	.pageContent {
		margin: 60px 20px 60px 20px;
	}
	.grid5Box {
		margin: 60px 20px 0 20px;
	}
	.aboutContent {
		margin: 20px 20px;
	}
	.pageHeader > div {
		padding: 30px 0 60px 20px;
	}
	.pageHeader .subtitle,
	.pageHeader .title {
		padding: 0 0 20px 20px;
	}
	.pageHeader .image {
		display: block; width: 100%; padding: 0 60px;
	}
	.pageHeader .text {
		display: block; width: 100%; padding: 0 60px;
	}
}

@media only screen and (max-width:760px) {
	.grid5Box {
		grid-template-columns: 1fr 1fr;
	}
	.grid5Box > div:nth-child(3n+1) {
		border-left: none;
	}
	.grid5Box > div:nth-child(2n+1) {
		border-left: var(--pageTemplateBorder);
	}
	.grid5Box > div:first-child {
		border-left: var(--pageTemplateBorder);
	}
}

@media only screen and (max-width:500px) {
	.pageContent {
		margin: 10px 20px 60px 20px;
	}
	.grid5Box {
		grid-template-columns: 1fr;
	}
	.grid5Box > div {
		padding: 30px 0;
	}
	.grid5Box > div,
	.grid5Box > div:nth-child(2n+1),
	.grid5Box > div:first-child {
		border: none;
	}
	.grid5Box .subtitle {
		margin: 0 0 20px 0;
	}
	.pageHeader > div {
		padding: 20px 0 20px 0;
	}
	.pageHeader .image {
		padding: 0 20px;
	}
	.pageHeader .text {
		padding: 0 20px;
	}
}