@charset "utf-8";


/**************************************************50
 * main
 **************************************************/
#main{
}
#mains{
}
#mains > li{
	display: inline-block;
	vertical-align: top;
}
#mains > li picture{
}
#mains > li picture img{
	width: 100%;
}
#mains > li p{
	background-color: #005F4B;
	color: #FFFFFF;
	line-height: 1.5;
	padding: 0.25em;
	text-align: center;
}
@media screen and (max-width:319px){
	#mains > li{
		width: 93.75%;
	}
}
@media screen and (min-width:320px) and (max-width:359px){
	#mains > li p{
		font-size: 75%;
	}
}
@media screen and (min-width:320px) and (max-width:639px){
	#mains > li{
		width: -webkit-calc((100% - (3.125% * 3)) / 2);
		width: calc((100% - (3.125% * 3)) / 2);
	}
}
@media screen and (min-width:360px) and (max-width:413px){
	#mains > li p{
		font-size: 87.5%;
	}
}
@media screen and (min-width:640px) and (max-width:767px){
	#mains > li{
		width: -webkit-calc((100% - (3.125% * 4)) / 3);
		width: calc((100% - (3.125% * 4)) / 3);
	}
}
@media screen and (max-width:767px){
	#main{
		margin-bottom: 6.25%;
	}
	#mains{
		margin-bottom: 3.125%;
	}
	#mains > li{
		margin-left: 3.125%;
		margin-bottom: 3.125%;
	}
}
@media screen and (min-width:768px){
	#main{
		margin-bottom: 50px;
	}
	#mains{
	}
	#mains > li{
		margin-bottom: 50px;
		width: 23.5%;
	}
	#mains > li:not(:nth-child(4n+1)){
		margin-left: 2%;
	}
}
@media screen and (min-width:768px) and (max-width:939px){
	#mains > li p{
		font-size: 87.5%;
	}
}
@media screen and (min-width:940px) and (max-width:1023px){
	#mains > li p{
		font-size: 93.75%;
	}
}


/**************************************************50
 * other
 **************************************************/
#other{
	background-color: #CDEAC1;
}
#others{
}
#others > li{
	background-color: #FFFFFF;
	border: 1px solid #059450;
	border-radius: 5px;
	color: #059450;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
}
#others > li p{
}
@media screen and (max-width:319px){
	#others > li{
		width: 93.75%;
	}
}
@media screen and (min-width:320px) and (max-width:479px){
	#others > li{
		font-size: 87.5%;
		width: calc((100% - (3.125% * 3)) / 2);
	}
}
@media screen and (min-width:480px) and (max-width:639px){
	#others > li{
		font-size: 87.5%;
		width: calc((100% - (3.125% * 4)) / 3);
	}
}
@media screen and (min-width:640px) and (max-width:767px){
	#others > li{
		font-size: 87.5%;
		width: calc((100% - (3.125% * 5)) / 4);
	}
}
@media screen and (max-width:767px){
	#other{
		padding-bottom: 12.5%;
	}
	#others{
		margin-top: -3.125%;
	}
	#others > li{
		margin-top: 3.125%;
		margin-left: 3.125%;
	}
}
@media screen and (min-width:768px){
	#other{
		padding-bottom: 100px;
	}
	#others{
		margin-top: -20px;
	}
	#others > li{
		margin-top: 20px;
	}
}
@media screen and (min-width:768px) and (max-width:1023px){
	#others > li{
		width: 24.25%;
	}
	#others > li:not(:nth-child(4n+1)){
		margin-left: 1%;
	}
}
@media screen and (min-width:1024px){
	#others > li{
		width: 19%;
	}
	#others > li:not(:nth-child(5n+1)){
		margin-left: 1.25%;
	}
}
@media screen and (min-width:1200px){
	#others > li{
		font-size: 125%;
	}
}