section.panel {
	padding: 40px 5% 0px 5%;
	@media (width < 550px) {
		padding: 40px 0% 0px 0%;
	}
	> div {
		max-width: 1920px;
		margin-inline: auto;
		display: grid;
		> picture {
			padding-inline: 4%;
			grid-area: 1/1/2/2;
			@media (width < 550px) {
				padding-inline: 0%;
			}
			> img {
				width: 100%;
				max-width: 100%;
			}
		}
		> div {
			grid-area: 1/1/2/2;
			justify-self: start;
            align-self: center;
			@media (width < 550px) {
				padding-left: 2%;
			}
			> figure {
				> img {
					width: 28vw;
					@media (width < 550px) {
						width: 30vw;
					}
				}
			}
			> p {
				display: inline-block;
				padding-block: 2px 4px;
				padding-inline: 40px;
				margin-top: 10px;
				margin-right: 4%;
				text-align: center;
				background: linear-gradient(to right,#4065ff,#48edfc);
				font-size: min(1.1rem, 6vw);
				line-height: 1.5;
				color: #fff;
				white-space: nowrap;
			}
		}
	}
}
section.breadcrumbs {
	padding-inline: 8.5vw;
	@media (width < 550px) {
		padding-inline: 5vw;
	}
}
section.link {
	padding: 60px 5% 60px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		column-gap: 40px;
		row-gap: 40px;
		> a {
			text-decoration: none;
			align-self: center;
			&:hover {
				opacity: 0.8;
			}
			&:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3) {
				> p {
					text-align: unset;
					background-image: url(./image/link02.svg);
					background-repeat: no-repeat;
					background-position: calc(100% - 15px) 50%;
				}
			}
			&:nth-of-type(2),&:nth-of-type(3) {
				> p {
					padding: 25px 30px;
				}
			}
			&:nth-of-type(1) {
				> p {
					padding: 12px 30px;
					line-height: 1.3;
				}
			}
			> p {
				padding: 25px 30px;
				min-height: 70px;
				min-width: 280px;
				user-select: none;
				background-color: var(--color-accent2);
				font-size: 1.1rem;
				line-height: 1.0;
				color: #fff;
			}
		}
	}
}
section.profile {
	background-color: #f1f1f1;
	padding: 60px 5% 60px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> h3 {
			font-size: min(3.0rem, 12vw);
			line-height: 1.0;
			color: #000;
			font-weight: 700;
			letter-spacing: 1px;
			text-align: center;
		}
		> p {
			margin-top: 10px;
            text-align: center;
            font-size: min(1.2rem, 6vw);
            color: var(--color-accent2);
            font-weight: 700;
            line-height: 2.0;
		}
		> div#headOfficeArea {
			> dl {
				padding-block: 50px;
				> div {
					min-height: 80px;
					display: grid;
					grid-template-columns: 200px 1fr;
					&:first-child {
						> dt {
							border-top: 1px solid #333;
							@media (width < 880px) {
								border-top: none;
							}
						}
						> dd {
							border-top: 1px solid #333;
							@media (width < 880px) {
								border-top: none;
							}
						}
					}
					@media (width < 880px) {
						grid-template-columns: 1fr;
						height: auto;
					}
					> dt {
						background-color: #b2d2e9;
						align-content: center;
						font-size: min(1.1rem,4.5vw);
						line-height: 1.3;
						color: #222;
						font-weight: 500;
						padding: 20px 30px 20px 30px;
						border-bottom: 1px solid #333;
						text-align-last: justify;
						@media (width < 880px) {
							border-bottom: none;
							text-align-last: unset;
							padding: 20px 15px 20px 15px;
							&:empty {
								border-top: 1px solid #333;
								border-bottom: none;
								padding: 0px 40px 0px 40px;
							}
						}
					}
					> dd {
						background-color: #fff;
						align-content: center;
						border-bottom: 1px solid #333;
						padding: 20px 30px 20px 30px;
						@media (width < 880px) {
							border: none;
							padding: 20px 15px 20px 15px;
						}
						&:has( > figure) {
							display: grid;
							grid-template-columns: auto 1fr;
							@media (width < 730px) {
								grid-template-columns: 1fr;
								row-gap: 20px;
							}
						}
						> p {
							color: #222;
							font-size: min(1.0rem,5vw);
							line-height: 1.8;
						}
						> figure {
							align-self: center;
							justify-self: end;
							@media (width < 730px) {
								justify-self: center;
							}
							> img {
								width: min(320px, 25vw);
								@media (width < 730px) {
									width: unset;
									max-width: 100%;
								}
							}
							> figcaption {
								color: #222;
								line-height: 1.3;
								font-size: min(0.9rem,4.5vw);
							}
						}
					}
				}
			}
		}
	}
}
section.history {
	padding: 100px 5% 120px 5%;
	background-image: url(./image/history_back.webp);
	background-repeat: no-repeat;
	background-position: -100px 0%;
	> div {
		max-width: 1100px;
		margin-inline: auto;
		> h2 {
			text-align: center;
			> div {
				font-size: 2.5rem;
				line-height: 1.3;
				color: #000;
				font-weight: 700;
			}
			> p {
				margin-top: 3px;
				font-size: 1rem;
				line-height: 1.3;
				color: var(--color-accent2);
				font-weight: 600;
			}
		}
		> div#historyArea {
			margin-top: 40px;
			> dl {
				border-top: solid 1px #ccc;
				> div {
					display: grid;
					grid-template-columns: 160px 1fr;
					border-bottom: solid 1px #ccc;
					padding-block: 15px;
					row-gap: 5px;
					@media (width < 700px) {
						grid-template-columns: 1fr;
					}
					> dt {
						font-size: min(1rem,5vw);
						line-height: 1.6;
						color: #222;
					}
					> dd {
						font-size: min(1rem,5vw);
						line-height: 1.6;
						color: #000;
					}
				}
			}
		}
	}
}
section.group {
	background-color: #f1f1f1;
	padding: 60px 5% 60px 5%;
	> div {
		max-width: 1000px;
		margin-inline: auto;
		> h3 {
			font-size: min(3.0rem, 12vw);
			line-height: 1.0;
			color: #000;
			font-weight: 700;
			letter-spacing: 1px;
			text-align: center;
		}
		> p {
			margin-top: 10px;
            text-align: center;
            font-size: min(1.2rem, 6vw);
            color: var(--color-accent2);
            font-weight: 700;
            line-height: 2.0;
		}
		> div#groupCompaniesArea {
			> dl {
				padding-block: 50px;
				> div {
					min-height: 80px;
					display: grid;
					grid-template-columns: 200px 1fr;
					&:first-child {
						> dt {
							border-top: 1px solid #333;
							@media (width < 880px) {
								border-top: none;
							}
						}
						> dd {
							border-top: 1px solid #333;
							@media (width < 880px) {
								border-top: none;
							}
						}
					}
					@media (width < 880px) {
						grid-template-columns: 1fr;
						height: auto;
					}
					> dt {
						background-color: #b2d2e9;
						align-content: center;
						font-size: min(1.1rem,4.5vw);
						line-height: 1.3;
						color: #222;
						font-weight: 500;
						padding: 20px 30px 20px 30px;
						border-bottom: 1px solid #333;
						text-align-last: justify;
						@media (width < 880px) {
							border-bottom: none;
							text-align-last: unset;
							padding: 20px 15px 20px 15px;
							&:empty {
								border-top: 1px solid #333;
								border-bottom: none;
								padding: 0px 40px 0px 40px;
							}
						}
					}
					> dd {
						background-color: #fff;
						align-content: center;
						border-bottom: 1px solid #333;
						padding: 20px 30px 20px 30px;
						@media (width < 880px) {
							border: none;
							padding: 20px 15px 20px 15px;
						}
						&:has( > figure) {
							display: grid;
							grid-template-columns: auto 1fr;
							@media (width < 730px) {
								grid-template-columns: 1fr;
								row-gap: 20px;
							}
						}
						> p {
							color: #222;
							font-size: min(1.0rem,5vw);
							line-height: 1.8;
						}
						> figure {
							align-self: center;
							justify-self: end;
							@media (width < 730px) {
								justify-self: center;
							}
							> img {
								width: min(320px, 25vw);
								@media (width < 730px) {
									width: unset;
									max-width: 100%;
								}
							}
							> figcaption {
								color: #222;
								line-height: 1.3;
								font-size: min(0.9rem,4.5vw);
							}
						}
					}
				}
			}
		}
	}
}