@charset "UTF-8";

:root {
	--colorBk: #000;
	--colorWh: #fff;
	--colorNv: #343399;
}

#message {
	min-width: 1280px;
	background: url(../images/aboutus/message_bg_01.png) no-repeat left top/100vw auto, url(../images/aboutus/message_bg_02.jpg) no-repeat right bottom/100vw auto;
	padding: 110px 0 120px;
	.bl1 {
		width: 45%;
		.honbun {
			p {
				margin-bottom: 1em;
			}
		}
	}
}
#philosophy {
	min-width: 1280px;
	background: #dcf0fd;
	padding: 110px 0 120px;
	.bl1 {
		ol {
			display: flex;
			justify-content: space-between;
			li {
				width: calc(calc(100% - 80px) / 3);
				background: #fff;
				border-radius: 10px;
				padding: 45px;
				h3 {
					color: var(--colorNv);
					font-size: clamp(2.67rem, 4.27vw, 5rem);
					line-height: 1.2;
					border-bottom: solid 1px #8f8f8f;
					padding-bottom: 20px;
				}
			}
		}
	}
}
#history {
	padding: 110px 0 120px;
	.bl1 {
		dl {
			dt {
				float: left;
				clear: left;
			}
			dd {
				padding: 0 0 0 10em;
			}
		}
	}
}
#profile {
	min-width: 1280px;
	background: #ececec;
	padding: 110px 0 120px;
	.bl1 {
		dl {
			border-top: solid 1px #8f8f8f;
			padding-top: .8em;
			dt {
				float: left;
				clear: left;
			}
			dd {
				border-bottom: solid 1px #8f8f8f;
				margin-bottom: .8em;
				padding: 0 0 .8em 10em;
			}
		}
	}
}
#access {
	color: var(--colorWh);
	min-width: 1280px;
	background: var(--colorNv);
	padding: 110px 0 120px;
	.bl1 {
		.box {
			background: #fff;
			border-radius: 10px;
			padding: 40px;
			iframe {
				width: 100%;
				height: auto;
				aspect-ratio: 2.35 / 1;
			}
		}
	}
}


@media screen and (max-width:799px) {

	#message {
		min-width: initial;
		background: url(../images/aboutus/message_bg_01.png) no-repeat right top/100vw auto, url(../images/aboutus/message_bg_02.jpg) no-repeat left bottom/100vw auto;
		padding: 13vw 0 40vw;
		.bl1 {
			width: 100%;
		}
	}
	#philosophy {
		min-width: initial;
		padding: 13vw 0;
		.bl1 {
			ol {
				display: block;
				li {
					width: 100%;
					margin-bottom: 5vw;
					padding: 5vw;
				}
			}
		}
	}
	#history {
		padding: 13vw 0;
		.bl1 {
			dl {
				dd {
					padding-left: 7em;
				}
			}
		}
	}
	#profile {
		min-width: initial;
		padding: 13vw 0;
		.bl1 {
			dl {
				dd {
					padding-left: 7em;
				}
			}
		}
	}
	#access {
		min-width: initial;
		padding: 13vw 0;
		.bl1 {
			.box {
				padding: 5vw;
				iframe {
					aspect-ratio: 3 / 4;
				}
			}
		}
	}

}