@charset "utf-8";

.page_mokuteki h3#H3PageTitle {
	display: none;
}
.mokuteki-head {
	margin: 0 auto 3em auto;
	text-align: center;
}
.mokuteki-head .img {

}
.mokuteki-head .txt {
	margin-top: 0.5em;
	font-size: 1.5em;
	font-weight: 600;
}
.mokuteki-head .txt.about span {color: #eb66a2;}
.mokuteki-head .txt.event span {color: #efa40f;}
.mokuteki-head .txt.study span {color: #0095cd;}
.mokuteki-head .txt.work span {color: #9257ce;}
.mokuteki-head .txt.support span {color: #5faf28;}

ul.mokutekiList {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(31%, 1fr));
	gap: 20px;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
	@media screen and (max-width: 1024px) {
		ul.mokutekiList {
			grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
		}
	}
	@media screen and (max-width: 480px) {
		ul.mokutekiList {
			grid-template-columns: repeat(auto-fit, minmax(100%, 1fr));
		}
	}

ul.mokutekiList li {
}
ul.mokutekiList li a {
	position: relative;
	display: block;
	padding: 1.5em 2.1em 1.5em 1em;
	border: solid 5px #f1f1f1;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	font-size: 1.25em;
	font-weight: bold;
	text-decoration: none;
	color: #000;
}
ul.mokutekiList li a span {
	display: block;
	font-size: 0.9em;
	font-weight: normal;
}
ul.mokutekiList li a::after {
	position: absolute;
	top: 50%;
	right: 1em;
	margin-top: -.85em;
	font-family: "FontAwesome";
	content: '\f061';
	font-size: 1em;
	font-weight: normal;
	color: #fff;
	clear: both;
}
ul.mokutekiList.about li a::after {color: #eb66a2;}
ul.mokutekiList.event li a::after {color: #efa40f;}
ul.mokutekiList.study li a::after {color: #0095cd;}
ul.mokutekiList.work li a::after {color: #9257ce;}
ul.mokutekiList.support li a::after {color: #5faf28;}
ul.mokutekiList li a:hover {
	color: #fff;
}
ul.mokutekiList li a:hover::after: {color: #fff;}
ul.mokutekiList.about li a:hover::after {color: #fff;}
ul.mokutekiList.event li a:hover::after {color: #fff;}
ul.mokutekiList.study li a:hover::after {color: #fff;}
ul.mokutekiList.work li a:hover::after {color: #fff;}
ul.mokutekiList.support li a:hover::after {color: #fff;}

ul.mokutekiList.about li a:hover {
	border-color: #eb66a2;
	background: #eb66a2;
}
ul.mokutekiList.event li a:hover {
	border-color: #efa40f;
	background: #efa40f;
}
ul.mokutekiList.study li a:hover {
	border-color: #0095cd;
	background: #0095cd;
}
ul.mokutekiList.work li a:hover {
	border-color: #9257ce;
	background: #9257ce;
}
ul.mokutekiList.support li a:hover {
	border-color: #5faf28;
	background: #5faf28;
}

/* == フットメニュー == */
ul.MokutekiMenu{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18%, 1fr));
	gap: 20px;
	width: 100%;
	margin: 4em auto 0 auto;
	padding: 0;
	list-style: none;
}
ul.MokutekiMenu li{
}
ul.MokutekiMenu li a{
	background-color: #fff;
	border-radius: 20px;
	width: 100%;
	display: block;
	text-align: center;
	padding: 1.5em 1em;
	text-decoration: none;
	color: #000;
}
ul.MokutekiMenu li a:hover{
	transition: all 0.4s ease 0s;
	box-shadow: 0 0 8px #ccc;
}
ul.MokutekiMenu li .inner{
	display: flex;
	flex-direction: column;
	align-items: center;
}
ul.MokutekiMenu li img{
	width: auto;
	height: 55px;
}
ul.MokutekiMenu li a .txt{
	margin-top: 1em;
	font-size: 0.9em;
	font-weight: 600;
}
ul.MokutekiMenu li .about span{
	color: #eb66a2;
}
ul.MokutekiMenu li .event span{
	color: #efa40f;
}
ul.MokutekiMenu li .study span{
	color: #0095cd;
}
ul.MokutekiMenu li .work span{
	color: #9257ce;
}
ul.MokutekiMenu li .support span{
	color: #5faf28;
}

	@media screen and (max-width: 1024px) {

	}
	@media screen and (max-width: 896px) {
		ul.MokutekiMenu {
			grid-template-columns: repeat(auto-fit, minmax(31%, 1fr));
		}
	}
	@media screen and (max-width: 480px) {
		ul.MokutekiMenu {
			grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
			gap: 10px;
		}
		ul.MokutekiMenu li a{
			padding: 1em 0.5em;
		}
		ul.MokutekiMenu li .img {
			width: 25%;
		}
		ul.MokutekiMenu li .img img {
			width: 100%;
			height: auto;
		}
		ul.MokutekiMenu li .txt {
			width: 70%;
		}
	}