@charset "utf-8";
/*===========================
add
===========================*/

/* 基本カラー  */

:root {
	--basic-color:#286FB5;
}


/*===========================
listbox01
===========================*/
.listbox01{
	display: flex;
	flex-wrap: wrap;
}

.listbox01 li{
	width: 24%;
	margin:0 1.3% 14px 0;
}

.listbox01 li a,
.listbox01 li p{
	text-decoration: none;
	text-align: center;
	background-color: var(--basic-color);
	color: #fff;
	display: block;
	padding: 8px 10px;
	transition: 0.3s;
	position: relative;
}

.listbox01 li a:hover{
	background-color: #76ace2;
}

.listbox01 li a::after{
	content: '';
	position: absolute;
	top: 0;
  bottom: 0;
  right: 10px;
  width: 7px;
  height: 7px;
  margin: auto;
  border-top: 2px solid #85bcf0;
  border-right: 2px solid #85bcf0;
  transform: rotate(45deg);
  box-sizing: border-box;
}
@media screen and (min-width: 769px) {
	.listbox01 li:nth-child(4n){
		margin-right: 0 !important;
	}
}

@media screen and (min-width: 601px) and (max-width: 768px) {
	.listbox01 li{
			width: 32%;
			margin:0 2% 14px 0;
			font-size: 0.8em;
	}

	.listbox01 li:nth-child(3n){
		margin-right: 0;
	}
}

@media screen and (max-width: 600px) {
	.listbox01 li{
			width: 48%;
			margin:0 2% 10px 0;
			font-size: 0.8em;
			line-height: 180%;
	}

	.listbox01 li a{
		padding: 8px 20px 8px 10px;
	}

	.listbox01 li:nth-child(2n){
		margin-right: 0 !important;
	}
}



/*===========================
width
===========================*/
@media screen and (max-width: 768px) {
	.w100Tablet{
		width: 100% !important;
		box-sizing: border-box;
	}

	.w80Tablet{
		width: 80% !important;
		box-sizing: border-box;
	}

	.w50Tablet{
		width: 50% !important;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 600px) {
	.w100sp,
	.w80Tablet{
		width: 100% !important;
		box-sizing: border-box;
	}

	.w70sp{
		width: 70% !important;
		box-sizing: border-box;
	}
}



/*===========================
font
===========================*/
.fw-b{font-weight: bold;}