@charset "utf-8";
/* sponsor css */

/*=========================================
		スポンサー一覧
=========================================*/
#sponsor { 
	padding-top: 5rem;
	padding-bottom: 2rem;
}
#sponsor .box { margin-top: 8rem; }
#sponsor .box:first-of-type { margin-top: 0; }
#sponsor ul { 
	justify-content: center;
	flex-wrap: wrap;
}
#sponsor ul li {    
    background: #fff;    
    font-size: 0;
    margin-top: 3rem;
    box-shadow: 0 0 9px 1px rgba(0,0,0,0.2);
}
#sponsor ul li a { 
	display: inline-block;
	position: relative;
}
#sponsor ul li a:hover .img-autosize {
	transform: scale(1.1);
	transition: all .5s ease;
}
#sponsor ul li a:hover:before {
	content: "";
    background: rgba(255,255,255,.75);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
}
#sponsor ul li a:after {
    content: "公式サイトへ";
    position: absolute;
    z-index: 2;
    padding: 0.5rem 4rem 0.5rem 2rem;
    border: 1px solid #02414C;;
    color: #02414C;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
    opacity: 0;
    white-space: nowrap;
	font-size: 14px;
	font-size: 1.4rem;
	transition: all .5s ease;
	background:  url(../img/common/i-window.png) no-repeat;
	background-position: right 1.5rem center;
	background-size: 2rem;
}
#sponsor ul li a:hover:after {  opacity: 1; }



@media screen and (min-width: 768px) {
	#sponsor ul li {
		width: calc((100% / 3) - 4rem);
		margin-left: 5rem;
	}
	#sponsor ul li:nth-of-type(3n+1) { margin-left: 0; }
	#sponsor ul li .img-autosize {
		max-width:28rem;
		margin: 7rem auto;
		padding-bottom: 16rem;
	}
	#sponsor ul li .img-autosize.min {
		max-width: 34rem;
	}
}



@media screen and (max-width: 767px) {
	#sponsor { padding-top: 3rem; }
	#sponsor .box { margin-top: 5rem; }
	#sponsor ul li {
		width: calc((100% / 2) - 2rem);
		margin-top: 2rem;
	}
	#sponsor ul li:nth-of-type(odd) { margin-right: 2rem; }
	#sponsor ul li .img-autosize {
		max-width:70%;/*14rem*/
		margin: 2rem auto;
		padding-bottom: 12rem;
	}
}



@media screen and (max-width: 400px) {
	#sponsor ul li .img-autosize {
		padding-bottom: 20vw;
	}
}