@charset "UTF-8";
/*
 * company.css
 *
 */

/* !社長挨拶
---------------------------------------------------------- */
.greeting {
	width:100%;
	padding:120px 50px 100px 50px;
}
	.greeting div.inner {
		width:100%;
		max-width:1100px;
		margin:0 auto;
		display: flex;
		flex-wrap: wrap;
	}
		.greeting div.inner div.left {
			width:30%;
		}
			.greeting div.inner div.left h2 {
				font-size:34px;
				font-weight: 700;
				color: #26353D;
				line-height: 1.6;
				letter-spacing: 0.04em;
				padding-left:1em;
				position: relative;
			}
				.greeting div.inner div.left h2:before {
					position: absolute;
					content: "";
					width:3px;
					height: 100%;
					background-color: #21A6D8;
					top:0;
					left:0;
					transform: rotate(20deg);
				}
		.greeting div.inner div.right {
			width:70%;
		}
			.greeting div.inner div.right p.read {
				line-height: 2.4;
				margin-bottom: 30px;
			}
			.greeting div.inner div.right p img.sign {
				display: block;
				width:160px;
				float: right;
				margin-top: 10px;
			}

@media screen and (max-width:1039px){
.greeting {
	padding:100px 30px 80px 30px;
}
			.greeting div.inner div.left h2 {
				font-size:28px;
				padding-left:0.8em;
			}
}

@media screen and (max-width:767px){
.greeting {
	padding:80px 25px 70px 25px;
}
		.greeting div.inner div.left {
			width:100%;
			margin-bottom: 30px;
		}
			.greeting div.inner div.left h2 {
				font-size:22px;
				line-height: 1.8;
			}
				.greeting div.inner div.left h2:before {
					width:2px;
				}
		.greeting div.inner div.right {
			width:100%;
		}
			.greeting div.inner div.right p.read {
				line-height: 2.2;
			}
			.greeting div.inner div.right p img.sign {
				width:120px;
				margin-top: 5px;
			}
}

/* !Mission&Vision
---------------------------------------------------------- */
.missionWrap {
	width:100%;
	background-color: #F3F4F5;
	position: relative;
}
.missionWrap div.bgTop {
	display: block;
	width:100%;
	position: absolute;
	top:0;
	left:0;
}
.missionWrap div.bgBtm {
	display: block;
	width:100%;
	position: absolute;
	bottom:-11px;
	left:0;
}
.mission {
	width:100%;
	padding:200px 50px 150px 50px;
}
	.mission div.inner {
		width:100%;
		max-width:1100px;
		margin:0 auto;
		position: relative;
	}
		.mission div.inner h2 {
			position: absolute;
			font-family: "Roboto", sans-serif;
			font-size:38px;
			font-weight: 700;
			color: #26353D;
			line-height: 1.4;
			padding-left:1em;
			top:0;
			left:0;
		}
			.mission div.inner h2:before {
				position: absolute;
				content: "";
				width:3px;
				height: 100%;
				background-color: #21A6D8;
				top:0;
				left:0;
				transform: rotate(20deg);
			}
		.mission div.inner ul {
			width:640px;
			margin-left:calc(100% - 640px);
		}
			.mission div.inner ul li {
				width:640px;
				height: 320px;
				background-position: 0 0;
				background-repeat: no-repeat;
				position: relative;
			}
			.mission div.inner ul li:first-child {
				background-image: url("../../company/img/mission_bg.png");
				background-size: cover;
				z-index: 2;
			}
			.mission div.inner ul li:last-child {
				background-image: url("../../company/img/vision_bg.png");
				background-size: cover;
				top:-40px;
				left:-280px;
				z-index: 1;
			}
				.mission div.inner ul li h3 {
					font-family: "Roboto", sans-serif;
					font-size:44px;
					font-weight: 700;
					color: #FFFF;
					line-height: 1.5;
					text-align: center;
				}
				.mission div.inner ul li:first-child h3 {
					padding-top: 80px;
					margin-bottom: 40px;
				}
				.mission div.inner ul li:last-child h3 {
					padding-top: 70px;
					margin-bottom: 20px;
				}
				.mission div.inner ul li p {
					font-size:20px;
					font-weight: 700;
					color: #FFF;
					line-height: 1.8;
					text-align: center;
				}

@media screen and (max-width:1039px){
.missionWrap div.bgBtm {
	bottom:-10px;
}
.mission {
	padding:160px 30px 120px 30px;
}
		.mission div.inner h2 {
			font-size:32px;
			padding-left:0.8em;
		}
		.mission div.inner ul {
			width:460px;
			margin-left:calc(100% - 460px);
		}
			.mission div.inner ul li {
				width:460px;
				height: 230px;
			}
			.mission div.inner ul li:last-child {
				top:-30px;
				left:-200px;
			}
				.mission div.inner ul li h3 {
					font-size:38px;
				}
				.mission div.inner ul li:first-child h3 {
					padding-top: 60px;
					margin-bottom: 30px;
				}
				.mission div.inner ul li:last-child h3 {
					padding-top: 45px;
					margin-bottom: 15px;
				}
				.mission div.inner ul li p {
					font-size:16px;
				}
}

@media screen and (max-width:767px){
.missionWrap div.bgBtm {
	bottom:-9px;
}
.mission {
	padding:100px 25px 100px 25px;
}
		.mission div.inner h2 {
			position: inherit;
			font-size:24px;
			line-height: 1.6;
			margin-bottom: 40px;
		}
			.mission div.inner h2:before {
				width:2px;
			}
		.mission div.inner ul {
			width:320px;
			margin:0 auto;
		}
			.mission div.inner ul li {
				width:320px;
				height: 160px;
				margin-bottom: 20px;
			}
			.mission div.inner ul li:last-child {
				margin-bottom: 0;
			}
			.mission div.inner ul li:last-child {
				top:0;
				left:0;
			}
				.mission div.inner ul li h3 {
					font-size:24px;
				}
				.mission div.inner ul li:first-child h3 {
					padding-top: 40px;
					margin-bottom: 20px;
				}
				.mission div.inner ul li:last-child h3 {
					padding-top: 20px;
					margin-bottom: 15px;
				}
				.mission div.inner ul li p {
					font-size:12px;
				}
}

@media screen and (max-width:359px){
		.mission div.inner ul {
			width:280px;
			margin:0 auto;
		}
			.mission div.inner ul li {
				width:280px;
				height: 140px;
				margin-bottom: 20px;
			}
			.mission div.inner ul li:last-child {
				margin-bottom: 0;
			}
			.mission div.inner ul li:last-child {
				top:0;
				left:0;
			}
				.mission div.inner ul li h3 {
					font-size:22px;
				}
				.mission div.inner ul li:first-child h3 {
					padding-top: 35px;
					margin-bottom: 20px;
				}
				.mission div.inner ul li:last-child h3 {
					padding-top: 15px;
					margin-bottom: 15px;
				}
				.mission div.inner ul li p {
					font-size:10px;
				}
}

/* !基本情報
---------------------------------------------------------- */
.profile {
	width:100%;
	padding:100px 50px 120px 50px;
}
	.profile div.inner {
		width:100%;
		max-width:1100px;
		margin:0 auto;
		display: flex;
		flex-wrap: wrap;
	}
		.profile div.inner div.left {
			width:30%;
		}
			.profile div.inner div.left h2 {
				font-size:34px;
				font-weight: 700;
				color: #26353D;
				line-height: 1.6;
				letter-spacing: 0.04em;
				padding-left:1em;
				position: relative;
			}
				.profile div.inner div.left h2:before {
					position: absolute;
					content: "";
					width:3px;
					height: 100%;
					background-color: #21A6D8;
					top:0;
					left:0;
					transform: rotate(20deg);
				}
		.profile div.inner div.right {
			width:70%;
		}
		.profile div.inner div.map {
			width:100%;
			margin-top: 70px;
			margin-bottom: 80px;
		}
		.profile div.inner ul.linkBnr {
			width:100%;
			display: flex;
			justify-content: space-between;
		}
			.profile div.inner ul.linkBnr li {
				width:48%;
			}
				.profile div.inner ul.linkBnr li a {
					display: block;
					width:100%;
					height: 140px;
					font-size:20px;
					font-weight: 700;
					text-align: center;
					color: #FFF;
					line-height: 140px;
					border: 1px solid #DDD;
					transition: .6s;
					position: relative;
				}
				.profile div.inner ul.linkBnr li:first-child a {
					background: url("../../company/img/branch_bnr.jpg") 50% 50% no-repeat;
					background-size:cover;
				}
				.profile div.inner ul.linkBnr li:last-child a {
					background: url("../../company/img/onm_bnr.jpg") 50% 50% no-repeat;
					background-size:cover;
				}
					.profile div.inner ul.linkBnr li a:hover {
						opacity:.8;
					}
					.profile div.inner ul.linkBnr li a span {
						position: absolute;
						display: inline-block;
						vertical-align: middle;
						color: #FFF;
						line-height: 1;
						width: 0.8em;
						height:0.8em;
						border: 0.1em solid currentColor;
						border-left: 0;
						border-bottom: 0;
						box-sizing: border-box;
						transform: translateX(-25%) rotate(45deg);
						top:45%;
						right:40px;
						transition: .25s;
					}
						.profile div.inner ul.linkBnr li a:hover span {
							right:30px;
						}

@media screen and (max-width:1039px){
.profile {
	padding:80px 30px 100px 30px;
}
			.profile div.inner div.left h2 {
				font-size:28px;
				padding-left:0.8em;
			}
				.profile div.inner ul.linkBnr li a {
					height: 120px;
					font-size:18px;
					line-height: 120px;
				}
					.profile div.inner ul.linkBnr li a:hover {
						opacity:1;
					}
					.profile div.inner ul.linkBnr li a span {
						border: 0.14em solid currentColor;
						border-left: 0;
						border-bottom: 0;
						top:44%;
						right:30px;
					}
}

@media screen and (max-width:767px){
.profile {
	width:100%;
	padding:70px 25px 100px 25px;
}
	.profile div.inner {
		flex-wrap: wrap;
	}
		.profile div.inner div.left {
			width:100%;
			margin-bottom: 30px;
		}
			.profile div.inner div.left h2 {
				font-size:22px;
				line-height: 1.8;
			}
				.profile div.inner div.left h2:before {
					width:2px;
				}
		.profile div.inner div.right {
			width:100%;
		}
		.profile div.inner div.map {
			margin-top: 60px;
		}
	
		.profile div.inner ul.linkBnr {
			width:100%;
			flex-wrap: wrap;
		}
			.profile div.inner ul.linkBnr li {
				width:100%;
				max-width:360px;
				margin:0 auto 20px auto;
			}
			.profile div.inner ul.linkBnr li:last-child {
				margin-bottom: 0;
			}
				.profile div.inner ul.linkBnr li a {
					height: 100px;
					font-size:17px;
					line-height: 100px;
				}
					.profile div.inner ul.linkBnr li a span {
						right:25px;
					}
						.profile div.inner ul.linkBnr li a:hover span {
							right:25px;
						}
}