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

@media only screen and (min-width:960px){ /* PC */
}

/* --------------------------------------------- */
/*	contents
/* --------------------------------------------- */
.headline {
	font-size:2.5rem;
}

@media only screen and (min-width:960px){ /* PC */
	.headline {
		font-size:4rem;
	}
}

/* COMPANY 薩摩水道について 
/* --------------------------------------------- */
/* あいさつ */
.message .sec-inner {
	margin:auto 8%;
	overflow:auto;
}

.message .com_photo {
	float:right;
	position:relative;
	width:40%;
}

.message .com_photo figcaption {
	text-align:center;
	margin-top:10px;
}

.message .com_photo figcaption span {
	white-space:nowrap;
}

/* 薩摩水道って？ */
.about .com_photo {
	position:relative;
}

.about .com_photo img {
	width:100vw;
	position:relative;
	left:-10%;
}

/* 会社概要・沿革 */
.outline .com_photo {
	margin:auto;
	margin-bottom:30px;
	width:80%;
}

.outline-list > dt,
.history-list > dt {
	color:#218ab4;
	margin-bottom:5px;
}

.outline-list > dd,
.history-list > dd {
	border-bottom:1px solid #218ab4;
	margin-bottom:20px;
	padding-bottom:20px;
}

.outline-list > dd dl {
		display:flex;
		align-items:center;
		flex-wrap:wrap;
}

.outline-list > dd dl dt {
	margin-bottom:10px;
	width:15em;
}

.outline-list > dd dl dd {
	margin-bottom:10px;
	width:calc(100% -15em);
}

@media only screen and (min-width:960px){ /* PC */
	.message .sec-inner {
		margin:auto;
	}
	.message .com_photo {
		margin-top:10px;
		width:20%;
	}
	.about .sec-inner {
		display:flex;
		align-items:center;
		flex-wrap:wrap;
		justify-content:space-between;
	}
	.about .sec-inner h2 {
		width:100%;
	}
	.about .com_photo {
		margin:0;
		width:40%;
	}
	.about .com_text {
		width:55%;
	}
	.about .com_photo img {
		width:100%;
		left:0;
	}
	.outline-list,
	.history-list {
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
	}
	.outline-list > dt,
	.history-list > dt {
		border-bottom:1px solid #231f20;
		margin-bottom:20px;
		padding-bottom:20px;
		width:30%;
	}
	.outline-list > dd,
	.history-list > dd {
		width:70%;
	}
	.outline-list > dd dl {
		gap:0 10px;
	}
	.outline-list > dd dl dt {
		width:20em;
	}
	.outline-list > dd dl dd {
		width:(100% - 20em);
	}
	.outline .com_photo {
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		margin-bottom:50px;
		width:80%;
	}
	.outline .com_photo img {
		width:30%;
	}
}

/* CASE 施工実績
/* --------------------------------------------- */
.portfolio-list {
	padding:0 5%;
}

.portfolio-list li {
	margin-bottom:20px;
	padding-left:2em;
	position:relative;
}

.portfolio-list li::before {
	content:"\f152";
	color:#00aeef;
	font-family:"Font Awesome 6 Free";
	font-size:1.4rem;
	font-weight:400;
	position:absolute;
	left:0;
}

@media only screen and (min-width:960px){ /* PC */
	.portfolio-list {
		display:flex;
		align-items:center;
		flex-wrap:wrap;
		justify-content:space-between;
		padding:0;
	}
	.portfolio-list li {
		width:48%;
	}
	.portfolio-list li::before {
		font-size:1.6rem;
	}
}

/* CONTACT お問い合わせ
/* --------------------------------------------- */
.contact {
	background:#d7eef5;
}

.contact .note {
	background:rgb(255, 255, 255, .3);
	margin:auto;
	margin-bottom:40px;
	padding:20px 30px 5px;
}

.contact dt {
	color:#5f433d;
	font-weight:700;
	margin-bottom:5px;
}

.contact dd {
	margin-bottom:20px;
}

.contact input,
.contact textarea {
	border:none;
	padding:8px;
	width:100%;
}

.contact .btn {
	margin:auto;
	text-align:center;
}

.contact .btn input {
	background:#218ab4;
	cursor:pointer;
	color:#fff;
	display:inline-block;
	padding:10px 20px;
	transition:all 0.5s ease;
	width:30%;
}

.contact .btn input:hover {
	background:#00aeef;
}

@media only screen and (min-width:960px){ /* PC */
	.contact .note {
		margin-bottom:80px;
		width:80%;
	}
	.contact dl {
		display:flex;
		flex-wrap:wrap;
		justify-content:space-between;
		margin:auto;
		margin-bottom:20px;
		width:80%;
	}
	.contact dt {
		width:35%;
	}
	.contact dd {
		margin-bottom:40px;
		width:65%;
	}
}