@charset "UTF-8";

#pageHeader::before {
	content: "";
	background-image: url(../images/page_icon_about-us.svg);
}

#introduction {
	background-repeat: no-repeat;
	& > * + * { margin-top: 2em; }
	@media screen and (min-width:1145px), print {
		text-align: center;
		padding-bottom: 190px;
		background-image: url(../images/about_us/cloud_pc.svg);
		background-size: auto 200px;
		background-position: center 35px;
	}
	@media screen and (max-width:1144px) {
		padding-inline: 25px;
		padding-bottom: 245px !important;
		background-image: url(../images/about_us/cloud_sp.svg);
		background-size: auto 100px;
		background-position: center bottom 125px;
	}
}

#concept {
	margin-top: 0 !important;
	.title {
		line-height: 1;
		text-align: center;
		span { display: inline-block; }
		.ja { font-weight: 600; }
	}
	.items {
		dl {
			dt {
				font-weight: 500;
				border-bottom: 1px solid #fff;
			}
		}
	}
	@media screen and (min-width:1145px), print {
		padding-block: 100px 95px;
		.title {
			.ja {
				font-size: 27px;
				margin-bottom: 10px;
			}
		}
		.items {
			&::after {
				content: "";
				display: block;
				clear: both;
			}
			dl {
				margin-top: 85px;
				width: calc(50% - 50px);
				&:nth-child(odd) { float: left; }
				&:nth-child(even) { float: right; }
				dt {
					font-size: 20px;
					line-height: 32px;
					padding-bottom: 10px;
					margin-bottom: 30px;
				}
			}
		}
	}
	@media screen and (max-width:1144px) {
		padding-block: 76px 68px !important;
		.title {
			.ja {
				font-size: 21px;
				margin-bottom: 9px;
			}
		}
		.items {
			margin-top: 70px;
			dl + dl { margin-top: 62px; }
			dl {
				dt {
					font-size: 17.5px;
					line-height: 28px;
					margin-bottom: 26px;
					padding-bottom: 14px;
				}
			}
		}
	}
}

#messages {
	#director {
		.image img { border-radius: 50%; }
		.text p + p { margin-top: 2em; }
	}
	#mariYamazaki .image { text-align: right; }
	.title, .cTitle { font-weight: 500; }
	@media screen and (min-width:1145px), print {
		margin-top: 190px !important;
		& > * + * { margin-top: 190px; }
		.title {
			font-size: 20px;
		}
		.columns {
			display: flex;
			p:empty { display: none; }
		}
		#tadaoAndo {
			.title { margin-bottom: 40px; }
		}
		#mariYamazaki {
			.columns {
				gap: 100px;
				margin-top: 35px;
				& > * { width: calc(50% - 50px) }
				.image {
					img { width: 438px; }
					figcaption { margin-top: 7px; }
				}
			}
		}
		#director {
			.columns {
				gap: 65px;
				margin-top: 40px;
				.image {
					width: 290px;
					flex-shrink: 0;
				}
				.cTitle {
					font-size: 20px;
					margin-block: -0.5em 30px;
				}
			}
		}
	}
	@media screen and (max-width:1144px) {
		padding-top: 90px !important;
		.title {
			font-size: 17.5px;
			margin-bottom: 42px;
		}
		#tadaoAndo {}
		#mariYamazaki {
			margin-top: 94px;
			.columns {
				display: flex;
				flex-direction: column-reverse;
				.image { margin-bottom: 43px; }
			}
		}
		#director {
			margin-top: 83px;
			.cTitle {
				font-size: 17.5px;
				line-height: 28px;
				margin-block: 43px 38px;
			}
			.image {
				max-width: 250px;
				margin-inline: auto;
			}
		}
	}
}

#logoDesign {
	border-block: 1px solid #000;
	&::before {
		content: "";
		display: block;
		aspect-ratio: 29 / 25;
		background: url(../images/logo_color.svg) no-repeat center center;
		background-size: auto 100%;
	}
	.title { font-weight: 500; }
	@media screen and (min-width:1145px), print {
		display: flex;
		align-items: flex-start;
		padding-block: 65px;
		margin-top: 190px !important;
		&::before {
			width: 290px;
			flex-shrink: 0;
			margin-right: 65px;
		}
		.title {
			font-size: 22px;
			margin-bottom: 30px;
		}
	}
	@media screen and (max-width:1144px) {
		margin-inline: 25px;
		padding-block: 50px 42px !important;
		&::before {
			width: 174px;
			margin-inline: auto;
		}
		.title {
			font-size: 17.5px;
			margin-block: 35px 34px;
		}
	}
}

#history {
	background-color: var(--bg-gray);
	.title {
		line-height: 1;
		text-align: center;
		span { display: inline-block; }
		.ja { font-weight: 600; }
	}
	#histories {
		border-left: 1px solid #000;
		dl {
			padding-top: 1px;
			.ad_year {
				flex-shrink: 0;
				font-weight: 500;
				position: relative;
				margin-top: -0.6em;
				border-bottom: 1px solid #000;
				&::before {
					content: "";
					left: 0;
					bottom: 0;
					display: block;
					position: absolute;
					border-radius: 50%;
					aspect-ratio: 1 / 1;
					transform: translate(-50%,50%);
					background-color: var(--bg-gray);
					border-style: solid;
					border-color: var(--color-green);
				}
			}
			.jp_year { color: var(--color-green); }
			dd {
				background-color: #fff;
				box-sizing: border-box;
			}
		}
	}
	@media screen and (min-width:1145px), print {
		padding-block: 100px;
		.title {
			.ja {
				font-size: 27px;
				line-height: 1.5;
				margin-block: -6px 2px;
				&:is(.lang-en .ja) { width: 90%; }
				small {
					font-size: 20px;
					&:is(.lang-en .ja small) { margin-left: 0.5em; }
				}
			}
		}
		#histories {
			margin-top: 100px;
			li + li { padding-top: 40px; }
			dl {
				display: flex;
				dt {
					width: 210px;
					& > * { padding-left: 20px; }
					.ad_year {
						font-size: 20px;
						&::before {
							width: 7px;
							border-width: 6px;
						}
					}
					.jp_year {
						font-size: 14px;
						margin-top: 2px;
					}
				}
				dd {
					width: calc(100% - 210px);
					padding: 30px 40px 35px;
				}
			}
		}
	}
	@media screen and (max-width:1144px) {
		margin-top: 100px;
		padding-block: 68px 0 !important;
		.title {
			margin-bottom: 75px;
			.ja {
				font-size: 21px;
				line-height: 32px;
				small { font-size: 15px; }
			}
		}
		#histories {
			li + li { padding-top: 33px; }
			li:last-child { padding-bottom: 75px; }
			dl {
				dt {
					& > * { padding-left: 18px; }
					.ad_year {
						font-size: 17px;
						&::before {
							width: 6px;
							border-width: 5px;
						}
					}
					.jp_year {
						font-size: 12px;
					}
				}
				dd {
					margin-top: 8px;
					margin-left: 18px;
					padding: 18px 25px 19px;
				}
			}
		}
	}
}

#member {
	.text {
		border-top: 1px solid #000;
		& > * + * { margin-top: 2em; }
		.list {
			li {
				padding-left: 1em;
				text-indent: -1em;
				& > * { text-indent: 0; }
			}
		}
	}
	@media screen and (min-width:1145px), print {
		.text { padding-top: 30px; }
	}
	@media screen and (max-width:1144px) {
		padding-top: 100px !important;
		.text { padding-top: 43px; }
	}
}