@charset "utf-8";

.ttlCategory {
    margin: 20px auto;
}
.ttlCategory .ttl{
	font-size: 28px;
	font-weight: bold;
	color: #17a1e6;
	letter-spacing: 1px;
	line-height: 1;
}
.ttlCategory .txt{
	font-size: 20px;
	color: #17a1e6;
	margin-top: 15px;
	letter-spacing: 3px;
}

@media screen and (max-width: 767px) {
	.ttlCategory .ttl{
		font-size: 40px;
		text-align: left;
		letter-spacing: 0;
	}
	.ttlCategory .txt{
		font-size: 16px;
		letter-spacing: 1px;
	}
}


/* company */
#company .contsIn{
	margin-bottom:50px ;
}
.companyBox{
	width: 49%;
	position: relative;
}
.companyBox .imgBox{
	margin-bottom: 0;
}
.companyBox .imgBox img{
	border-radius: 10px;
}
.companyBox .imgBox.sdgs img{
	border: 1px solid #cccccc;
}
.companyBox .txtBox{
	margin: auto;
}
.companyBox .txtBox .txtBoxWrap{
	display: block;
	padding: 15px 0 30px 0;
}
.companyBox .companyTtl{
	color: #17a1e6;
	font-size: 34px;
	text-align: center;
	letter-spacing: 4px;
	margin-bottom: 20px;
}
.companyBox .companyTxt{
	letter-spacing: 3px;
	margin-bottom: 35px;
}

.companyBox .txtBox .btnOval{
	width: 80%;
}

.companyBox .txtBox .btnOval.sdgs{
	padding: 9px 30px 9px 30px;
}
.companyBox .txtBox:hover .btnOval{
	opacity: 0.7;
}


@media screen and (max-width: 767px) {
	#company{
		margin-top: 25px;
		padding-bottom: 30px;
	}
	#company .contsIn {
			width: 100%;
	}
	#company .spContIn {
		width: 92%;
	}

	.companyBox{
		margin-top: 15px;
	}

	.companyBox .txtBox .txtBoxWrap{
		padding: 15px 0;
	}
	.companyBox .txtBox{
		width: 91%;
		top: -25px;
	}
	.companyBox .companyTtl{
		font-size: 21px;
		margin-bottom: 15px;
	}
	.companyBox .companyTxt{
		margin-bottom: 25px;
	}

	.companyBox .txtBox .btnOval{
		width: 100%;
	}
	.companyBox .txtBox .btnOval.sdgs{
		padding: 12px 25px 12px 25px;
	}

}

/* now */
#now{
	background: #fffaeb;
	border-top: #7dcdf4 6px solid;
	padding: 80px 0;
	margin-bottom: 90px;
}
.nowTtlArea{
	text-align: center;
	margin-bottom: 50px;
}
.nowTtlArea .nowTtlImg{
	width: 280px;
	margin: auto;
}
.nowTtlArea .nowTtlTxt{
	font-size: 20px;
	color: #17a1e6;
	margin-top: 15px;
}
.nowTopik{
	margin-bottom: 45px;
}
.nowTopik.clm3 .clmIn{
	padding-right: 10px;
}
.clm3 .clmIn:nth-child(3n){
	padding-right: 0;
}
.nowTopik.clm3 .clmIn:nth-child(2),
.nowTopik.clm3 .clmIn:nth-child(3n),
.nowTopik.clm3 .clmIn:nth-child(5n){
	padding-left: 10px;
}
.nowTopik .nowTopikTtl{
	border-radius: 5px;
	text-align: center;
	color: #ffffff;
	line-height: 1;
	padding: 8px;
	margin-bottom: 15px;
}
.nowTopik .nowTopikCatch{
	font-weight: bold;
	line-height: 1.5;
	margin-bottom: 15px;
	font-size: 15px;
}
.nowTopik .nowTopikCatch .em{
	font-size: 17px;
}
.nowTopikCaption{
	font-size: 15px;
}
.nowTopik ._blue .nowTopikTtl{
	background: #1884ba;
}
.nowTopik ._green .nowTopikTtl{
	background: #69be28;
}
.nowTopik ._yellow .nowTopikTtl{
	background: #f8b500;
}
.nowTopik .TopikCol2{
	display: table;
	width: 100%;
}
.nowTopik .TopikCol2 .TopikImg{
	display: table-cell;
	width: 95px;
	vertical-align: top;
}
.nowTopik .TopikCol2 .TopikTxt{
	display: table-cell;
	padding-left: 10px;
	vertical-align: top;
}
.nowTopik .TopikCol2 .topik .vol{
	font-size: 14px;
}
.nowTopik .TopikCol2 .topik .link{
	text-decoration: underline;
}
.nowTopik .TopikCol2 .TopikTxt .message{
	font-size: 13px;
	margin-top: 15px;
}
#now .kumon_now_area{
	min-height: 237px;
}

@media screen and (max-width: 767px) {
	#now{
		padding: 40px 0 60px;
		margin-bottom: 50px;
	}
	.nowTtlArea{
		margin-bottom: 23px;
	}
	.nowTtlArea .nowTtlImg{
		width: 62%;
	}
	.nowTtlArea .nowTtlTxt{
		font-size: 16px;
		text-align: center;
	}
	.nowTopik.clm3 .clmIn{
			width: 100%;
			float: none;
			padding-right: 0;
			margin-bottom: 42px;
	}
	.nowTopik .nowTopikCatch{
		font-weight: normal;
		font-size: 17px;
	}
	.nowTopik .nowTopikCatch .em{
		font-size: 28px;
		font-weight: bold;
	}
	.nowTopik .TopikCol2 .topik .vol{
		display: inline-block;
		margin-bottom: 5px;
	}
	#now .kumon_now_area{
		min-height: auto;
	}
}


/* mediaroom */
#mediaroom,
#mediaroom .bnr{
	margin-bottom: 40px;
}
#mediaroom .bnr:last-child{
	margin-bottom: 0;
}
#mediaroom .bnr:hover{
	opacity: 0.7;
}

@media screen and (max-width: 767px) {
	#mediaroom{
		margin-top: 30px;
		margin-bottom: 30px;
	}
	#mediaroom .bnr{
		margin-bottom: 30px;
	}
}


/* banner */
#banner{
	margin-top: 90px;
}
#banner .bnr{
	margin-bottom: 40px;
}
#banner .bnr:last-child{
	margin-bottom: 0;
}
#banner .bnr:hover{
	opacity: 0.7;
}

@media screen and (max-width: 767px) {
	#banner{
		margin-top: 45px;
	}
	#banner .bnr{
		margin-bottom: 30px;
	}
}


/* footer */
#footer .footerWrap{ border-top: 3px solid #81d5fa;}

@media screen and (max-width: 767px) {
	#footer{
		margin-top: 45px;
	}
	#footer .footerWrap{
		border: none;
	}
}