@charset "utf-8";
/* ====================================================================================================

	company.css

==================================================================================================== */

/* ----------------------------------------------------------------------------------------------------
	explanation
---------------------------------------------------------------------------------------------------- */
#explanation {
	margin:0;
	}
	#explanation figure {
		display:flex;
		flex-direction:column-reverse;
		gap:50px;
		}
		#explanation figure div {
			width:100%;
			height:auto;
			background:#efefef;
			aspect-ratio:300 / 91;
			}
		#explanation figure figcaption {
			text-align:left;
			}

@media screen and (max-width:1040px) {
	#explanation figure {
		flex-direction:column-reverse;
		}
		#explanation figure div {
			width:100%;
			height:auto;
			}
		#explanation figure figcaption {
			width:100%;
			text-align:left;
			}
}


/* ----------------------------------------------------------------------------------------------------
	message
---------------------------------------------------------------------------------------------------- */
#message {
	margin:80px 0 0 0;
	}
	#message .inner {
		width:100% !important;
		max-width:initial !important;
		}
	#message figure {
		display:grid;
		align-items:start;
		justify-content:space-between;
		grid-template-areas:"title photo"
							"text  photo";
		grid-template-columns:auto auto;
		grid-template-rows:auto 1fr;
		grid-column-gap:50px;
		width:min(100%,1000px);
		margin:0 auto;
		}
		#message figure h2 {
			grid-area:title;
			align-self:start;
			text-align:left !important;
			}
		#message figure div {
			grid-area:photo;
			align-self:start;
			width:280px;
			height:auto;
			aspect-ratio:45 / 44;
			}
			#message figure div > img {
				width:100%;
				height:auto;
				}
			#message figure div p {
				font-size:14px;
				text-align:center;
				white-space:pre-wrap;
				word-break:keep-all;
				margin:15px 0 0 0;
				}
				#message figure div p > img {
					width:120px;
					margin:0 0 0 25px;
					}
		#message figure figcaption {
			grid-area:text;
			align-self:start;
			width:100%;
			text-align:left;
			}
			#message figure figcaption p {
				white-space:pre-wrap;
				word-break:keep-all;
				margin:0 0 15px 0;
				}
			#message figure figcaption p:last-child {
				margin:0;
				}
		#message .inner > p {
			text-align:left;
			}

		#message .inner article {
			position:relative;
			background:#f7f7f7 url("../image/layout/bg01.jpg") center top / auto repeat;
			margin:50px 0 0 0;
			padding:60px 30px;
			transition:none;
			}
			#message .inner article .container {
				position:relative;
				max-width:1200px;
				margin:0 auto;
				z-index:122;
				transition:none;
				}
				#message .inner article .container p:nth-of-type(1) {
					color:#2a71cd;
					font-size:30px;
					font-weight:700;
					text-align:center;
					white-space:pre-wrap;
					word-break:keep-all;
					}
				#message .inner article .container ul {
					display:flex;
					gap:40px;
					margin:40px 0 0 0;
					list-style:none;
					}
					#message .inner article .container ul li {
						display:flex;
						flex-direction:column;
						gap:20px;
						width:calc((100% - 80px) / 3);
						text-align:center;
						white-space:pre-wrap;
						word-break:keep-all;
						background:#ffffff;
						padding:26px;
						}
					#message .inner article .container ul li::before {
						content:"";
						display:block;
						width:90%;
						aspect-ratio:120 / 77;
						margin:0 auto;
						}
					#message .inner article .container ul li:nth-of-type(1)::before { background:transparent url("../image/contents/company/illust01.png") center bottom / 100% auto no-repeat; }
					#message .inner article .container ul li:nth-of-type(2)::before { background:transparent url("../image/contents/company/illust02.png") center bottom / 100% auto no-repeat; }
					#message .inner article .container ul li:nth-of-type(3)::before { background:transparent url("../image/contents/company/illust03.png") center bottom / 100% auto no-repeat; }
				#message .inner article .container p:nth-of-type(2),
				#message .inner article .container p:nth-of-type(3) {
					font-size:20px;
					text-align:center;
					white-space:pre-wrap;
					word-break:keep-all;
					}
				#message .inner article .container p:nth-of-type(2) {
					margin:40px 0 0 0;
					}
				#message .inner article .container p:nth-of-type(3) {
					margin:0;
					}

@media screen and (max-width:1260px) {
		#message .inner article {
			margin:60px -30px 0 -30px;
			}
}

@media screen and (max-width:1040px) {
	
			#message figure figcaption p {
				white-space:normal;
				word-break:normal;
				}
		#message .inner > p {
			text-align:left;
			}
				#message .inner article .container p:nth-of-type(1) {
					font-size:clamp(25px,3.906vw,30px);
					}
				#message .inner article .container p:nth-of-type(2),
				#message .inner article .container p:nth-of-type(3) {
					font-size:clamp(17px,2.656vw,20px);
					}
				#message .inner article .container ul {
					flex-direction:column;
					gap:20px;
					}
					#message .inner article .container ul li {
						flex-direction:row;
						width:100%;
						text-align:left;
						padding:20px;
						}
					#message .inner article .container ul li::before {
						flex-basis:200px;
						flex-shrink:0;
						margin:0;
						}
						#message .inner article .container ul li span {
							display:flex;
							align-items:center;
							}

}

@media screen and (max-width:950px) {
	#message figure {
		grid-template-areas:"title"
							"photo"
							"text";
		grid-column-gap:0;
		width:100%;
		}
		#message figure h2 {
			text-align:center !important;
			}
		#message figure div {
			width:100%;
			height:273px;
			text-align:center;
			background:#ecebe9;
			margin:0 0 80px 0;
			}
			#message figure div > img {
				width:auto;
				height:100%;
				}
		#message figure figcaption {
			width:100%;
			}
}

@media screen and (max-width:640px) {
		#message .inner article {
			margin:60px -20px 0 -20px;
			padding:60px 20px;
			}
				#message .inner article .container p:nth-of-type(1) {
					font-size:clamp(20px,6.25vw,25px) !important;
					}
				#message .inner article .container p:nth-of-type(2),
				#message .inner article .container p:nth-of-type(3) {
					font-size:clamp(15px,4.687vw,17px);
					}
					#message .inner article .container ul li {
						flex-direction:column;
						text-align:center;
						}
					#message .inner article .container ul li::before {
						flex-basis:auto;
						max-width:200px;
						margin:0 auto;
						}
						#message .inner article .container ul li span {
							display:inline;
							}
}


/* ----------------------------------------------------------------------------------------------------
	company_overview
---------------------------------------------------------------------------------------------------- */
#company_overview {
	margin:80px 0 0 0;
	}
	#company_overview .inner {
		}
		#company_overview .inner .container {
			display:flex;
			justify-content:space-between;
			gap:40px;
			}
			#company_overview .inner .container article {
				position:relative;
				width:calc((100% - 40px) / 2);
				}
				#company_overview .inner .container article h3 {
					max-width:593px;
					color:#0066b0;
					font-size:22px;
					font-weight:bold;
					}
				#company_overview .inner .container article table {
					width:100%;
					font-size:17px;
					margin:20px 0 0 0;
					}
					#company_overview .inner .container article table tbody {
						}
						#company_overview .inner .container article table tbody tr {
							border-top:1px solid #e5e5e5;
							}
						#company_overview .inner .container article table tbody tr:nth-of-type(1) {
							border:none;
							}
							#company_overview .inner .container article table tbody tr th,
							#company_overview .inner .container article table tbody tr td {
								letter-spacing:1px;
								padding:10px 0;
								}
							#company_overview .inner .container article table tbody tr th {
								width:8em;
								color:#0067c6;
								font-weight:700;
								}
							#company_overview .inner .container article table tbody tr td {
								}
								#company_overview .inner .container article table tbody tr td ul {
									list-style:none;
									}
									#company_overview .inner .container article table tbody tr td ul li {
										text-indent:-1em;
										padding:0 0 0 1em;
										}
									#company_overview .inner .container article table tbody tr td ul li::before {
										content:"・";
										}
				#company_overview .inner .container article iframe {
					height:100%;
					}

@media screen and (max-width:1260px) {
		#company_overview .inner .container {
			flex-direction:column;
			justify-content:flex-start;
			gap:40px;
			}
			#company_overview .inner .container article {
				width:100%;
				}
				#company_overview .inner .container article iframe {
					width:100%;
					height:400px;
					}
}

@media screen and (max-width:640px) {
				#company_overview .inner .container article table {
					display:flex;
					}
					#company_overview .inner .container article table tbody {
						display:flex;
						flex-direction:column;
						width:100%;
						}
						#company_overview .inner .container article table tbody tr {
							display:flex;
							flex-direction:column;
							width:100%;
							}
							#company_overview .inner .container article table tbody tr th,
							#company_overview .inner .container article table tbody tr td {
								width:100%;
								/*
								white-space:pre-wrap;
								word-break:keep-all;
								*/
								}
							#company_overview .inner .container article table tbody tr th {
								padding:17px 0 5px 0;
								}
							#company_overview .inner .container article table tbody tr td {
								padding:0 0 17px 0;
								}
}