@charset "UTF-8";
/* CSS Document */



/* beginning
--------------------- */
#beginning {
	background: url("../img/work/research-development/bg01.jpg") no-repeat center top / 100%;
}
	#beginning .txt {
		text-align: center;
		margin-top: 25px;
	}



/* areas-title
--------------------- */
#areas-title {
	margin-bottom: 50px;
}



/* areas
--------------------- */
#areas01 {
	background: #F5FAFF url("../img/work/research-development/bg02.jpg") no-repeat center top / 100%;
}
#areas03 {
	background: #F5FAFF url("../img/work/research-development/bg03.jpg") no-repeat center top / 100%;
}
	.areas .ttlhead {
		border-bottom: solid 1px #ddd;
		padding-bottom: 30px;
		margin-bottom: 15px;
	}
		.areas .ttlhead .ttl {
			display: flex;
			justify-content: flex-start;
			align-items: center;
		}
			.areas .ttlhead .ttl .icon {
				width: 70px;
			}

			.areas .ttlhead .ttl h2 {
				width: -webkit-calc(100% - 70px);
				width: calc(100% - 70px);
				padding-left: 15px;
			}
				.areas .ttlhead .ttl h2 .en {
					display: block;
					font-size: 1.5rem;
					font-weight: 400;
					line-height: 1;
					margin-bottom: 5px;
				}
				.areas .ttlhead .ttl h2 .jp {
					display: block;
					font-size: 3.0rem;
					font-weight: 700;
					line-height: 1.3em;
				}

		.areas .ttlhead .text h3 {
			font-size: 2.0rem;
			font-weight: 500;
			line-height: 1.3em;
			margin-bottom: 8px;
		}
		.areas .ttlhead .text .txt {
			font-size: 1.4rem;
		}


		#areas01 .ttlhead .ttl {
			width: 310px;
		}
		#areas01 .ttlhead .text {
			width: -webkit-calc(100% - 310px);
			width: calc(100% - 310px);
		}

		#areas02 .ttlhead .ttl {
			width: 280px;
		}
		#areas02 .ttlhead .text {
			width: -webkit-calc(100% - 280px);
			width: calc(100% - 280px);
		}

		#areas03 .ttlhead .ttl {
			width: 460px;
		}
		#areas03 .ttlhead .text {
			width: -webkit-calc(100% - 460px);
			width: calc(100% - 460px);
		}


		#areas04 .ttlhead .ttl {
			width: 340px;
		}
		#areas04 .ttlhead .text {
			width: -webkit-calc(100% - 340px);
			width: calc(100% - 340px);
		}


	.areas .list a.linkbox {
		width: 24.2%;
		display: block;
		background: #fff;
		border: solid 1px #ddd;
		border-radius: 5px;
		padding: 15px 10px 40px 10px;
		margin-top: 1%;
		margin-right: 1%;
		position: relative;
	}
	.areas .list a.linkbox:nth-child(4n) {
		margin-right: 0;
	}
	.areas .list a.linkbox:nth-last-child(1) {
		margin-right: 0;
	}
	.areas .list a.linkbox.off {
		pointer-events: none;
	}
		.areas .list a.linkbox h3 {
			font-size: 1.3rem;
			font-weight: 700;
			line-height: 1.3em;
			margin-bottom: 3px;
			transition: 0.3s;
			-webkit-transition: 0.3s;
		}
		.areas .list a.linkbox:hover h3 {
			color: #0e60df;
		}

		.areas .list a.linkbox p {
			font-size: 1.4rem;
			line-height: 1.6em;
		}

		.areas .list a.linkbox .more-arrow {
			position: absolute;
			bottom: 15px;
			right: 10px;
		}
		.areas .list a.linkbox.off .more-arrow {
			display: none;
			background: #ddd;
			border: #ddd;
		}



/* mv
--------------------- */
#mv .read {
	font-size: 1.5rem;
	line-height: 1.7em;
	text-align: center;
	margin-bottom: 60px;
}

#mv .cell {
	border-bottom: solid 1px #ddd;
	padding-bottom: 40px;
	margin-bottom: 40px;
}
#mv .cell:nth-last-child(1) {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}
	#mv .cell .head {
		width: 260px;
	}
		#mv .cell .head .en {
			font-size: 1.5rem;
			line-height: 1;
			margin-bottom: 8px;
		}
		#mv .cell .head h3 {
			font-size: 1.8rem;
			font-weight: 700;
			line-height: 1.5em;
		}

	#mv .cell .text {
		width: -webkit-calc(100% - 260px);
		width: calc(100% - 260px);
	}
		#mv .cell .text h4 {
			font-size: 2.4rem;
			font-weight: 700;
			line-height: 1.5em;
			margin-bottom: 25px;
		}
		#mv .cell .text p {
			font-size: 1.8rem;
			font-weight: 700;
			line-height: 1.8em;
		}



/* business
--------------------- */
#business {
	background: #F5FAFF url("../img/work/intellectual-property/bg01.jpg") no-repeat center top / 100%;
}
	#business .read {
		font-size: 1.5rem;
		line-height: 1.7em;
		text-align: center;
		margin-bottom: 60px;
	}

	#business .cell {
		margin-bottom: 80px;
	}
	#business .cell:nth-last-child(1) {
		margin-bottom: 0;
	}
		#business .cell .ttl {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding-bottom: 20px;
			margin-bottom: 40px;
			border-bottom: solid 1px #ddd;
		}
			#business .cell .ttl h3 {
				width: 150px;
				font-size: 3.0rem;
				font-weight: 700;
				line-height: 1;
			}

			#business .cell .ttl p {
				width: -webkit-calc(100% - 150px);
				width: calc(100% - 150px);
				font-size: 1.5rem;
			}

		#business .cell .text .icon {
			width: 106px;
		}

		#business .cell .text ul.list {
			width: -webkit-calc(100% - 106px);
			width: calc(100% - 106px);
			padding-left: 40px;
		}
			#business .cell .text ul.list li {
				font-size: 1.6rem;
				line-height: 1.6em;
				margin-bottom: 10px;
				margin-right: 20px;
				padding-left: 20px;
				text-indent: -20px;
			}
				#business .cell .text ul.list li span {
					padding-right: 5px;
					color: #005EB8;
				}


	#business .btn {
		margin: 0 auto;
	}







/* 1300px */
@media screen and (max-width: 1300px) {






}





/* 1024px */
@media screen and (max-width: 1024px) {



/* areas-title
--------------------- */
#areas-title {
	margin-bottom: 40px;
}



/* areas
--------------------- */
.areas .ttlhead {
	padding-bottom: 25px;
	margin-bottom: 12px;
}
	.areas .ttlhead .ttl .icon {
		width: 60px;
	}

	.areas .ttlhead .ttl h2 {
		width: -webkit-calc(100% - 60px);
		width: calc(100% - 60px);
		padding-left: 12px;
	}
		.areas .ttlhead .ttl h2 .en {
			font-size: 1.3rem;
		}
		.areas .ttlhead .ttl h2 .jp {
			font-size: 2.6rem;
		}


	.areas .ttlhead .text h3 {
		font-size: 1.8rem;
	}
	.areas .ttlhead .text .txt {
		font-size: 1.3rem;
	}


	#areas01 .ttlhead .ttl {
		width: 260px;
	}
	#areas01 .ttlhead .text {
		width: -webkit-calc(100% - 260px);
		width: calc(100% - 260px);
	}

	#areas02 .ttlhead .ttl {
		width: 240px;
	}
	#areas02 .ttlhead .text {
		width: -webkit-calc(100% - 240px);
		width: calc(100% - 240px);
	}

	#areas03 .ttlhead .ttl {
		width: 390px;
	}
	#areas03 .ttlhead .text {
		width: -webkit-calc(100% - 390px);
		width: calc(100% - 390px);
	}


	#areas04 .ttlhead .ttl {
		width: 280px;
	}
	#areas04 .ttlhead .text {
		width: -webkit-calc(100% - 280px);
		width: calc(100% - 280px);
	}


.areas .list a.linkbox.technology {
	width: 21.8%;
}
.areas .list a.linkbox.human {
	width: 15%;
}
	.areas .list a.linkbox h3 {
		font-size: 1.1rem;
	}

	.areas .list a.linkbox p {
		font-size: 1.3rem;
	}



/* mv
--------------------- */
#mv .read {
	font-size: 1.4rem;
	line-height: 1.6em;
	margin-bottom: 50px;
}

#mv .cell {
	padding-bottom: 35px;
	margin-bottom: 35px;
}
	#mv .cell .head {
		width: 140px;
	}
		#mv .cell .head .en {
			font-size: 1.3rem;
		}
		#mv .cell .head h3 {
			font-size: 1.6rem;
		}

	#mv .cell .text {
		width: -webkit-calc(100% - 140px);
		width: calc(100% - 140px);
	}
		#mv .cell .text h4 {
			font-size: 2.2rem;
			margin-bottom: 20px;
		}
		#mv .cell .text p {
			font-size: 1.6rem;
		}



/* business
--------------------- */
#business .read {
	font-size: 1.4rem;
	line-height: 1.6em;
	margin-bottom: 50px;
}

#business .cell {
	margin-bottom: 60px;
}
	#business .cell .ttl {
		margin-bottom: 30px;
	}
		#business .cell .ttl h3 {
			width: 140px;
			font-size: 2.6rem;
		}

		#business .cell .ttl p {
			width: -webkit-calc(100% - 140px);
			width: calc(100% - 140px);
			font-size: 1.4rem;
		}

	#business .cell .text .icon {
		width: 100px;
	}

	#business .cell .text ul.list {
		width: -webkit-calc(100% - 100px);
		width: calc(100% - 100px);
		padding-left: 30px;
	}
		#business .cell .text ul.list li {
			font-size: 1.5rem;
			margin-bottom: 8px;
			margin-right: 20px;
			padding-left: 20px;
			text-indent: -20px;
		}









}





/* max 768px */
@media screen and (max-width: 768px) {



/* beginning
--------------------- */
#beginning .txt {
	text-align: left;
	margin-top: 20px;
}



/* areas
--------------------- */
.areas .ttlhead {
	display: block;
	padding-bottom: 25px;
	margin-bottom: 12px;
}
	.areas .ttlhead .ttl h2 .en {
		font-size: 1.2rem;
	}
	.areas .ttlhead .ttl h2 .jp {
		font-size: 2.4rem;
	}

	.areas .ttlhead .text h3 {
		margin-top: 12px;
	}
	.areas .ttlhead .text .txt {
		font-size: 1.2rem;
	}


	#areas01 .ttlhead .ttl {
		width: 100%;
	}
	#areas01 .ttlhead .text {
		width: 100%;
	}

	#areas02 .ttlhead .ttl {
		width: 100%;
	}
	#areas02 .ttlhead .text {
		width: 100%;
	}

	#areas03 .ttlhead .ttl {
		width: 100%;
	}
	#areas03 .ttlhead .text {
		width: 100%;
	}


	#areas04 .ttlhead .ttl {
		width: 100%;
	}
	#areas04 .ttlhead .text {
		width: 100%;
	}


.areas .list {
	display: block;
}
.areas .list a.linkbox {
	width: 100%;
	margin-right: 0;
	margin-top: 2%;
}
.areas .list a.linkbox:nth-child(2n) {
	margin-right: 0;
}



/* mv
--------------------- */
#mv .read {
	font-size: 1.3rem;
	text-align: left;
	margin-bottom: 40px;
}

#mv .cell {
	display: block;
	padding-bottom: 30px;
	margin-bottom: 30px;
}
	#mv .cell .head {
		width: 100%;
		margin-bottom: 10px;
	}
		#mv .cell .head .en {
			font-size: 1.2rem;
		}
		#mv .cell .head h3 {
			font-size: 1.5rem;
		}

	#mv .cell .text {
		width: 100%;
	}
		#mv .cell .text h4 {
			font-size: 2.0rem;
			margin-bottom: 15px;
		}
		#mv .cell .text p {
			font-size: 1.5rem;
		}



/* business
--------------------- */
#business .read {
	font-size: 1.3rem;
	margin-bottom: 40px;
}

#business .cell {
	margin-bottom: 40px;
}
	#business .cell .ttl {
		display: block;
		margin-bottom: 30px;
	}
		#business .cell .ttl h3 {
			width: 100%;
			font-size: 2.2rem;
			padding-right: 0;
			margin-bottom: 12px;
		}

		#business .cell .ttl p {
			width: 100%;
			font-size: 1.3rem;
		}

	#business .cell .text {
		display: block;
	}
		#business .cell .text .icon {
			width: 120px;
			margin: 0 auto 20px auto;
		}

		#business .cell .text ul.list {
			width: 100%;
			padding-left: 0;
		}
			#business .cell .text ul.list li {
				font-size: 1.4rem;
			}




}