/*---------------------------------------
	counter
----------------------------------------*/

body {
	overflow-wrap: anywhere; /* 収まらない場合に折り返す */
	word-break: normal; /* 単語の分割はデフォルトに依存 */
	line-break: strict; /* 禁則処理を厳格に適用 */
	text-autospace: normal; /* 和文中の英数字に余白 */
}

#counter {
}
#counter .hline01{
	font-size:38px;
	font-weight:600;
	text-align:center;
	line-height:1.8;
}
#counter .hline02{
	font-size:28px;
	font-weight:600;
	text-align:center;
	line-height:1.8;
}
#counter p{
	font-size:16px;
	line-height:1.6;
}
#counter p.intro{
	padding:0.5em 0.5em 1em;
	text-align:center;
}
#counter .hero {
	width:100%;
	max-width:1000px;
	height:auto;
	margin:10px auto;
}
#counter .hope-flex {
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	gap:8px 5px;
}
#counter .hope-flex img {
	width:100%;
	max-width:323px;
	height:auto;
}
#counter .junl-flex {
	margin:30px auto;
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
	gap:20px;
}
#counter .junl-flex dl {
	width:100%;
	max-width:480px;
	margin:0;
	padding:0;
}
#counter .junl-flex dl.long {
	max-width:1000px;
}
#counter .junl-flex dl dt {
	margin:0;
	padding:0;
	text-align:center;
	font-size:20px;
	font-weight:600;
}
#counter .junl-flex img {
	width:100%;
	max-width:480px;
	height:auto;
}
#counter .junl-flex dl.long img {
	width:100%;
	max-width:1000px;
	height:auto;
}

#counter .junl-wide {
	width:100%;
	max-width:1000px;
	margin:24px auto;
}
#counter .junl-wide dt {
	margin:0;
	padding:0;
	text-align:left;
	font-size:20px;
	font-weight:600;
}

#counter .contacta-area {
	position: relative;
	width:100%;
	background:#D3D3D3;
	color:#000;
	margin:50px auto 40px;
	padding:32px 16px;
}
#counter .contacta-area:before {
	content: "CONTACT";
	position: absolute;
	text-align:center;
	font-size:60px;
	font-weight:600;
	top:-30px;
	left:0;
	right:0;
	margin:0 auto;
}
#counter .contacta-area p {
	text-align:center;
}
#counter .contacta-area .flex {
	margin:1em;
	padding:0;
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
}
#counter .contacta-area .flex .item {
	margin:1em;
	padding:0;
	display:flex;
	justify-content: center;
	align-items: center;
}

#counter .contacta-area a.btn {
	width:100%;
	min-width:320px;
	max-width:340px;
	display: block;
	text-align: center;
	font-weight: bold;
	padding: 12px 10%;
	transition: color 0.25s ease;
	color: #fff !important;
	line-height:1.8;
	background-color: #333;
	border: #333 1px solid;
}
#counter .contacta-area a.btn:hover {
	background-color: #fff;
	border-color: #333;
	color:#333 !important;
} 

/* ----------------------------------------------------------
   納品事例バナー（メイン写真下）
   ---------------------------------------------------------- */
#counter .case-banner {
	display        : flex;
	flex-direction : row;
	align-items    : center;
	justify-content: center;
	text-align     : center;
	gap            : 20px;
	padding        : 32px 40px;
	margin-top     : 48px;
	margin-bottom  : 48px;
	max-width      : 680px;
	margin-left    : auto;
	margin-right   : auto;
	background     : #1c1c1c;
	text-decoration: none;
	transition     : background .25s, transform .25s;
}

#counter .case-banner:hover {
	background: #5f6a4d;
	transform : translateY(-3px);
	opacity   : 1 !important;
}

#counter .case-banner__icon {
	width          : 56px;
	height         : 56px;
	border         : 1px solid rgba(255,255,255,0.35);
	display        : flex;
	align-items    : center;
	justify-content: center;
	background     : #1c1c1c;
	flex-shrink    : 0;
}

#counter .case-banner:hover .case-banner__icon {
	background: #1c1c1c;
}

#counter .case-banner__icon span {
	color         : #fff;
	font-size     : 11px;
	font-weight   : 700;
	letter-spacing: .05em;
	line-height   : 1.4;
	text-align    : center;
	display       : block;
}

#counter .case-banner__title {
	font-size     : 25px;
	font-weight   : 700;
	color         : #fff;
	letter-spacing: 0.05em;
}

@media only screen and (max-width: 767px) {
	#counter .case-banner {
		padding      : 24px 20px;
		margin-top   : 36px;
		margin-bottom: 36px;
	}
	#counter .case-banner__title {
		font-size: 19px;
	}
}

@media only screen and (max-width: 767px) {
	#counter .hline01{
		font-size:24px;
		line-height:1.4;
	}
	#counter .hline02{
		font-size:20px;
		line-height:1.4;
	}
	#counter .contacta-area:before {
		font-size:40px;
		font-weight:600;
		top:-20px;
		left:0;
		right:0;
		margin:0 auto;
	}
	#counter p{
		font-size:16px;
	}
	#counter .junl-flex dl {
		padding:0 1em;
	}
	#counter .junl-flex dt {
		font-size:18px;
	}
	#counter .junl-wide {
		padding:0 1em;
	}
	#counter .junl-wide dt {
		font-size:18px;
	}
}