@charset "utf-8";
/* ------------------------------------------------
CSS Information
File name: ccs.css
Summary: ccs
--------------------------------------------------- */
/*デバイス切り替え*/
.pc {
	display: block !important;
}
.mb {
	display: none !important;
}
#ccs_new {
	text-align: left;
	margin-top: 80px;
	margin-bottom: 80px;
}
.area1 {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto 50px;
	padding: 0;
}
.area2 {
	background: #ffffe0;
	padding: 5px 0;
}
.area3 {
	background: #ffebeb;
	padding: 5px 0;
}
.area4 {
	max-width: 1200px;
	width: 100%;
	margin: 50px auto;
}
h1 {
	font-size: 26px;
	margin-bottom: 10px;
}
h2 {
	font-size: 24px;
	color: #3B3B3B;
	margin-top: 20px;
}
h3 {
	font-size: 23px;
	color: #3B3B3B;
}
h4 {
	font-size: 20px;
	color: #3B3B3B;
	margin-bottom: 20px;
}
p {
	font-size: 16px;
	color: #3B3B3B;
}
img {
	margin: auto;
	display: block;
}
.area1 a {
	font-size: 18px;
	padding: 1em 0;
	color: #0000ee;
	text-decoration: underline;
	display: flex;
	justify-content: flex-end;
}
.area1 a:hover {
	text-decoration: none;
}
.ttl01 {
	text-align: center;
	color: crimson;
	margin-top: 10px;
	margin-bottom: 30px;
	font-size: 30px;
	font-weight: bold;
}
.ttl02 {
	text-align: center;
	color: #3B3B3B;
	margin-top: 20px;
	font-weight: bold;
}
.ttl03_under {
	border-bottom: 2px solid #000;
	display: inline-block;
	padding-bottom: 8px;
	color: #3B3B3B;
}
.ttl04 {
	color: #004d86;
	font-weight: bold;
}
.sttl01 {
	align-items: center;
	display: flex;
	justify-content: center;
}
.sttl01:before, .sttl01:after {
	background-color: #3B3B3B;
	border-radius: 5px;
	content: "";
	height: 2px;
	width: 30px;
}
.sttl01:before {
	margin-right: 10px;
	transform: rotate(60deg);
}
.sttl01:after {
	margin-left: 10px;
	transform: rotate(-60deg);
}
.sttl02 {
	text-align: center;
	color: #3B3B3B;
	margin-top: 5px;
	font-weight: bold;
	font-size: 18px;
}
.sttl03 {
	border-left: 10px solid #4182eb;
	border-bottom: 1.5px solid #3B3B3B;
	padding: 5px 8px;
	margin-bottom: 50px;
	width: fit-content;
}
.sttl04 {
	position: relative;
	padding: 0.8rem;
	border-radius: 30px;
	background-color: crimson;
	color: white !important;
	font-weight: bold;
	font-size: 20px;
	width: fit-content;
}
.sttl04:before {
	position: absolute;
	top: 100%;
	left: 40px;
	height: 0;
	width: 0;
	border-style: solid;
	border-color: transparent;
	border-top-color: crimson;
	border-width: 8px;
	content: "";
}
.crim {
	color: crimson;
	font-weight: bold;
}
.item-box {
	border-radius: 20px;
	border: 1px solid #004d86;
	background: #fff;
	margin-top: 30px;
}
.item-box_ttl01 {
	background: #004d86;
	color: #fff;
	font-weight: bold;
	padding: 10px 20px;
	border-top-left-radius: 10px;
	border-top-right-radius: 20px;
	margin-top: 0px;
}
.item-box_ttl02 {
	color: #004d86;
	font-weight: bold;
	margin: 20px 30px 10px;
}
.card {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.items {
	width: 49%;
	border: 2px solid #3b3b3b;
	margin: 10px 0;
	padding: 20px;
}
.item1 {
	background: #ffffe0;
}
.item2 {
	background: #f5f5f5;
}
.item3 {
	background: #ffebeb;
}
.card p {
	font-size: 20px;
	font-weight: bold;
}
.card small {
	font-size: 15px;
	font-weight: bold;
}
.mT30 {
	margin-top: 30px;
}
.mT50 {
	margin-top: 50px;
}
.mT80 {
	margin-top: 80px;
}
.mB30 {
	margin-bottom: 30px;
}
table.ccs_new_list  {
	border-collapse: collapse;
	width:100%;
}
table.ccs_new_list th {
	padding: 5px;
	font-weight: bold;
	width: 16%;
}
table.ccs_new_list td {
	padding: 5px 5px 5px 8px;
	background: #fff;
	border-top: 2px solid #BDBDBD;
	border-bottom: 2px solid #BDBDBD;
	border-right: 2px solid #BDBDBD;
	height: 50px;
}
table.ccs_new_list a {
	color: #0000ee !important;
	text-decoration: underline !important;
}
table.ccs_new_list a:hover {
	text-decoration: none !important;
}
.ccs_list {
	margin-top: 20px;
	font-size: 18px;
}
.ccs_list1 {
	color: #fff;
	background: #008e6a;
	border-bottom: 2px solid #fff;
}
.ccs_list2 {
	color: #fff;
	background: #e50057;
	border-bottom: 2px solid #fff;
}
.ccs_list3 {
	color: #fff;
	background: #773dbd;
	border-bottom: 2px solid #fff;
}
.ccs_list4 {
	color: #fff;
	background: #982d8c;
	border-bottom: 2px solid #fff;
}
.ccs_list5 {
	color: #fff;
	background: #00a0e9;
	border-bottom: 2px solid #fff;
}
.ccs_list6 {
	color: #000;
	background: #ffe400;
	border-bottom: 2px solid #fff;
}
.ccs_list7 {
	color: #000;
	background: #f39627;
	border-bottom: 2px solid #fff;
}
.ccs_list8 {
	color: #fff;
	background: #824700;
	border-bottom: 2px solid #fff;
}
.ccs_list9 {
	color: #fff;
	background: #80bc00;
}
.scale {
	letter-spacing: -0.09em;
}
.c-link-group4 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 1100px;
	margin: 0 auto;
}
.c-link4 {
	width: 23%;
	text-align: center;
	overflow: hidden;
	margin: 0 10px 20px 10px;
}
.c-link4 img {
	width: 100%;
}
.c-link4 p {
	font-size: 15px;
	padding: 1em 0;
	color: #0000ee;
	text-decoration: underline;
}
.c-link4 p:hover {
	text-decoration: none;
}
.c-link4 a:hover {
	opacity: 1;
	transition: 0s ease-in-out;
}
.c-link-group4:before {
	display: block;
	content: "";
	width: 23%;
	order: 1;
}
.c-link-group4:after {
	display: block;
	content: "";
	width: 23%;
}
.c-link-group3 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 1100px;
	margin: 30px auto 10px;
	align-items: center;
}
.c-link3 {
	width: 31%;
	text-align: center;
	overflow: hidden;
	margin: 0 10px 20px 10px;
}
.c-link3 h5 {
	font-size: 18px;
	color: #0000ee;
	text-decoration: underline;
	text-align: center;
}
.c-link3 p {
	font-size: 15px;
	padding: 1em 0;
	color: #0000ee;
	text-decoration: underline;
}
.c-link3 p:hover {
	text-decoration: none;
}
.c-link3 a:hover {
	opacity: 1;
	transition: 0s ease-in-out;
}
.c-link-group3:after {
	display: block;
	content: "";
	width: 31%;
}
@media screen and (max-width: 599px) {
	.pc {
		display: none !important;
	}
	.mb {
		display: block !important;
	}
	.area1 {
		max-width: 100%;
		width: 95%;
	}
	.area4 {
		max-width: 100%;
		width: 95%;
		margin-top: 10px;
	}
	h1 {
		font-size: 22px !important;
		margin-bottom: 0px;
		margin-top: 12px;
		line-height: 1.3;
	}
	h2 {
		font-size: 20px !important;
		margin-top: 12px;
		line-height: 1.3;
	}
	h3 {
		font-size: 18px !important;
		line-height: 1.3;
	}
	h4 {
		font-size: 16px !important;
		margin-bottom: 0px;
		line-height: 1.3;
	}
	p {
		font-size: 16px !important;
		line-height: 1.3;
	}
	img {
		margin: auto;
		display: block;
	}
	.ttl01 {
		color: crimson !important;
		margin-top: 0px;
		margin-bottom: 0px;
	}
	.ttl02 {
		margin-top: 20px;
	}
	.ttl03_under {
		margin-top: 10px;
		border-bottom: 1.5px solid #000;
		display: inline;
		padding-bottom: 0px;
		color: #3B3B3B !important;
		line-height:1.5;
	}
	.ttl04 {
		color: #004d86;
		font-weight: bold;
	}
	.sttl01:before, .sttl01:after {
		background-color: #3B3B3B;
		border-radius: 5px;
		content: "";
		height: 2px;
		width: 30px;
	}
	.sttl01:before {
		margin-right: 10px;
		transform: rotate(60deg);
	}
	.sttl01:after {
		margin-left: 10px;
		transform: rotate(-60deg);
	}
	.sttl02 {
		margin-top: 10px;
	}
	.sttl03 {
		border-left: 10px solid #4182eb;
		border-bottom: 1.5px solid #3B3B3B;
		padding: 5px 8px;
		margin-bottom: 30px;
		width: fit-content;
	}
	.sttl04 {
		position: relative;
		padding: 5px;
		border-radius: 30px;
		background-color: crimson;
		color: white;
		font-weight: bold;
		font-size: 16px !important;
		width: fit-content;
	}
	.sttl04:before {
		position: absolute;
		top: 90%;
		left: 10px;
		height: 0;
		width: 0;
		border-style: solid;
		border-color: transparent;
		border-top-color: crimson;
		border-width: 8px;
		content: "";
	}
	.crim {
		color: crimson;
		font-weight: bold;
	}
	.item-box {
		border-radius: 20px;
		border: 1px solid #004d86;
		background: #fff;
	}
	.item-box_ttl01 {
		background: #004d86;
		color: #fff;
		font-weight: bold;
		padding: 10px 20px;
		border-top-left-radius: 10px;
		border-top-right-radius: 20px;
		margin-top: 0px;
	}
	.item-box_ttl02 {
		color: #004d86;
		font-weight: bold;
		margin: 10px;
	}
	.card {
		display: block;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.items {
		width: 100%;
		border: 2px solid #3b3b3b;
		margin: 10px 0;
		padding: 10px;
	}
	.item1 {
		background: #ffffe0;
	}
	.item2 {
		background: #f5f5f5;
	}
	.item3 {
		background: #ffebeb;
	}
	.card p {
		font-size: 18px;
		font-weight: bold;
	}
	.card small {
		font-size: 15px;
		font-weight: bold;
	}
	.mT30 {
		margin-top: 30px;
	}
	.mT50 {
		margin-top: 50px;
	}
	.mT80 {
		margin-top: 80px;
	}
	.mB30 {
		margin-bottom: 30px;
	}
	table.ccs_new_list {
		border-collapse: collapse;
	}
	table.ccs_new_list th {
		padding: 5px;
		font-weight: bold;
		display: block;
		width: 100%;
	}
	table.ccs_new_list td {
		padding: 5px 5px 5px 8px;
		background: #fff;
		border-top: 0px solid #BDBDBD;
		border-left: 2px solid #BDBDBD;
		height: auto;
		display: block;
		width: 100%;
		margin-bottom: 5px;
	}
	.ccs_list {
		margin-top: 20px;
		font-size: 16px;
		width: 100%;
	}
	.ccs_list1 {
		color: #fff;
		background: #008e6a;
		border-bottom: 0px solid #fff;
	}
	.ccs_list2 {
		color: #fff;
		background: #e50057;
		border-bottom: 0px solid #fff;
	}
	.ccs_list3 {
		color: #fff;
		background: #773dbd;
		border-bottom: 0px solid #fff;
	}
	.ccs_list4 {
		color: #fff;
		background: #982d8c;
		border-bottom: 0px solid #fff;
	}
	.ccs_list5 {
		color: #fff;
		background: #00a0e9;
		border-bottom: 0px solid #fff;
	}
	.ccs_list6 {
		color: #000;
		background: #ffe400;
		border-bottom: 2px solid #fff;
	}
	.ccs_list7 {
		color: #000;
		background: #f39627;
		border-bottom: 0px solid #fff;
	}
	.ccs_list8 {
		color: #fff;
		background: #824700;
		border-bottom: 0px solid #fff;
	}
	.ccs_list9 {
		color: #fff;
		background: #80bc00;
		border-bottom: 0px solid #fff;
	}
	.scale {
		letter-spacing: 0em;
	}
	.c-link-group4 {
		display: block;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		margin: 0 auto;
	}
	.c-link4 {
		width: 95%;
		text-align: center;
		overflow: hidden;
		margin: 0 10px 20px 10px;
	}
	.c-link4 img {
		width: 90%;
	}
	.c-link4 p {
		font-size: 14px !important;
		padding: 1em 0;
		color: #0000ee;
		text-decoration: underline;
	}
	.c-link4 p:hover {
		text-decoration: none;
	}
	.c-link4 a:hover {
		opacity: 1;
		transition: 0s ease-in-out;
	}
	.c-link-group4:before {
		display: block;
		content: "";
		width: 23%;
		order: 1;
	}
	.c-link-group4:after {
		display: block;
		content: "";
		width: 23%;
	}
	.c-link-group3 {
		display: block;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;
		margin: 30px auto 10px;
	}
	.c-link3 {
		width: 95%;
		text-align: center;
		overflow: hidden;
		margin: 0 10px 20px 10px;
	}
	.c-link3 h5 {
		font-size: 18px !important;
		color: #0000ee;
		text-decoration: underline;
	}
	.c-link3 p {
		font-size: 15px !important;
		padding: 1em 0;
		color: #0000ee;
		text-decoration: underline;
	}
	.c-link3 p:hover {
		text-decoration: none;
	}
	.c-link3 a:hover {
		opacity: 1;
		transition: 0s ease-in-out;
	}
	.c-link-group3:after {
		display: block;
		content: "";
		width: 31%;
	}
}