@charset "utf-8";

/***************************************************
page-about　会社概要 .company-outline
***************************************************/
.messageBox {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: 30px;
}

.messageBox .inner-right {
	width: 100%;
	aspect-ratio: 1/1.5;
}

.messageBox .inner-right img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mintyo {
	font-family: "Noto Serif JP", serif;
	font-size: 120%;
	text-align: right;
}

.mintyo span {
	font-size: 70%;
	letter-spacing: 0.2em;
}

@media screen and (max-width:768px) {
	.messageBox {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.messageBox .inner-right {
		aspect-ratio: 1 / 1;
	}
}


section.company {
	margin: 0 auto;
	width: 92vw;
	padding: 80px 0;
	box-sizing: border-box;
	max-width: 960px;
}

.company-outline {
	border: none;
	margin: 0 auto;
	width: 100%;
	border-collapse: collapse;
}

.company-outline dl {
	border-top: 1px solid #eee;
	display: grid;
	align-items: center;
	margin: 0;
	padding: 10px;
	gap: 0px;
	grid-template-columns: 140px 1fr;
}

.company-outline dl:last-child {
	border-bottom: 1px solid #eee;
}

.company-outline dt {
	padding: 15px 10px;
	text-align: center;
	color: var(--accent);
}

.company-outline dd {
	padding: 15px 10px 15px 30px;
	margin: 0;
}

.company-outline dd.company-ol_places {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.company-outline dd.company-ol_places div {
	display: flex;
	flex-direction: column;
	gap: 0px;
}

a.company-ol_googlemap {
    display: inline-block;
    font-size: 70%;
    padding: 6px;
    background-color: #aaa;
    max-width: 150px;
    text-align: center;
    color: #fff;
}

.Google-map {
	position: relative;
	width: 100%;
	padding-bottom: 40%;
	/* 56.25%が16:9 の比率 */
	height: 0;
	overflow: hidden;
	border-radius: 8px;
	/* 角丸必要なら */
}

.Google-map iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}



section#company-letters {
	background-color: var(--cream);
	/* padding: 50px; */
}

.letters-box {
	max-width: 860px;
	padding: 50px 0;
	margin: 0 auto;
	position: relative;
	width: 92vw;
}

.letters-txt {
	position: relative;
	z-index: 5;
}

.letters-txt h3 {
	color: var(--accent);
	margin-bottom: 1em;
}

.letters-bg {
	position: absolute;
	width: 20vw;
	bottom: -50px;
	right: 0;
	opacity: 0.2;
	z-index: 3;
}

@media screen and (max-width:768px) {
	.company-outline dl {
		grid-template-columns: 1fr;
		gap: 5px;
	}

	.company-outline dl dt {
		text-align: left;
		padding: 0;
	}

	.company-outline dd {
		padding: 0px;
		margin: 0;
	}

	.letters-bg {
		width: 180px;
	}
}


#company-kurasumu .company-outline dt {
	color: var(--muted);
}