﻿/*---------------------------------------
	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;
} 

@media only screen and (max-width: 767px) {
	#counter .hline01{
		font-size:28px;
	}
	#counter .hline02{
		font-size:22px;
	}
	#counter p{
		font-size:16px;
	}
	#counter .junl-wide {
		display:none;
	}
}
