@charset "UTF-8";

/* トップページ */

	body {
		background-image: none;
	}

	#topImage {
		height: 500px;
		background: url(./img/topimage.jpg) no-repeat center;
		background-size: cover;
	}

	/* #region groupInformation */
		#groupInformation {
			position: relative;
			overflow: hidden;
		}

			#groupInformation .container {
				padding: 100px 100px;
			}

			#groupInformation .bg {
				position: absolute;
				width: 100%;
				height: 150%;
				top: 0;
				left: 0;
				z-index: 0;

				background: url(./img/bg.png);
			}

			#groupInformation .groupLogo {
				float: left;
			}

			#groupInformation .comment {
				margin-left: 260px;
				font-family: serif;
				font-size: 110%;
				font-weight: bold;
				line-height: 1.8;
				text-align: left;
			}
	/* #endregion */

	/* #region pageNavi */
		#pageNavi {
			background-color: #8ac7e6;
		}

			#pageNavi .pageLinkList {
				overflow: hidden;
			}

				#pageNavi li {
					float: left;
					width:33.3%;
					box-sizing: border-box;
					padding: 0 20px;
				}

					#pageNavi a {
						position: relative;
						display: block;
						padding: 100px 0;
						color: #fff;
						border: 4px solid #fff;
						overflow: hidden;
					}

						#pageNavi a span {
							position: relative;
							display: inline-block;
							padding: 15px 20px;
							font-size: 110%;
							border-top: 1px solid #fff;
							border-bottom: 1px solid #fff;
							z-index: 10;
						}

						#pageNavi a img {
							position: absolute;
							display: block;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							width: 100%;
							margin: auto;
							z-index: 0;
						}
	/* #endregion */

	/* #region companyInformation  */
		#companyInformation {
			overflow: hidden;
		}

		#companyInformation .container {
			padding: 80px 40px;
			text-align: left;
		}

		#companyInformation .comments {
			float: right;
			width: 520px;
			text-align: left;
		}

		#companyInformation .heading p {
			display: inline-block;
			margin-bottom: 20px;
			color: #005284;
			font-size: 155%;
			font-weight: bold;
			border-bottom: 4px solid #1ba1e6;
		}

			#companyInformation .heading span {
				font-size: 130%;
			}

		#companyInformation .comment {
			line-height: 1.8;
		}

		#companyInformation .contanctLink {
			padding-top: 20px;
			text-align: right;
		}

			#companyInformation .contanctLink a {
				position: relative;
				display: inline-block;
				padding: 10px 20px;
				padding-left: 30px;
				color: #005284;
				font-size: 90%;
				text-decoration: none;
				border: 1px solid #005284;
				overflow: hidden;
				transition: .2s;
			}

				#companyInformation .contanctLink a:hover {
					color: #fff;
				}

				#companyInformation .contanctLink a::before {
					content: '';
					position: absolute;
					top: 50%;
					left: 12px;
					margin-top: -4px;
					width: 7px;
					height: 7px;
					border-top: 1px solid #005284;
					border-left: 1px solid #005284;
					-webkit-transform: rotate(135deg);
							transform: rotate(135deg);
					transition: .2s;
				}
				#companyInformation .contanctLink a:hover::before {
					border-top-color: #fff;
					border-left-color: #fff;
				}

				#companyInformation .contanctLink a::after {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: -1;
				content: '';
				background: #005284;
				transform-origin: left bottom;
				transform: scale(1.1, 0);
				transition: transform .3s;
				}

				#companyInformation .contanctLink a:hover::after {
				transform-origin: left top;
				transform: scale(1.1, 1);
				}

	/* #endregion */

@media screen and (max-width: 767px) {
	#topImage {
		height: 300px;
	}

	/* #region groupInformation */
		#groupInformation .container {
			padding: 15px;
		}

		#groupInformation .groupLogo {
			float: none;
			width: 100px;
			margin: 0 auto;
			padding: 20px 0;
			text-align: center;
		}

		#groupInformation .comment {
			margin-left: 0px;
			font-size: 100%;
			line-height: 1.5;
		}
	/* #endregion */

	/* #region pageNavi */
		#pageNavi .pageLinkList {
		}

			#pageNavi li {
				float: none;
				width:100%;
				box-sizing: border-box;
				padding: 5px 0;
			}

				#pageNavi a {
					padding: 20px 0;
				}
	/* #endregion */

	/* #region companyInformation */
		#companyInformation .container {
			padding: 30px 10px;
		}

		#companyInformation .comments {
			float: none;
			width: 100%;
		}

		#companyInformation .heading {
			text-align: center;
		}

			#companyInformation .heading p {
				font-size: 120%;
			}

		#companyInformation .comment {
			line-height: 1.5;
		}

		#companyInformation .contanctLink {
			padding: 10px 0;
			text-align: center;
		}
	/* #endregion */
}