@charset "UTF-8";

/* #### ribon ####*/
#ribon {
	width: 100%;
	background-image: url(../img/con_back.jpg);
	position: relative;
}

/* ## index.php ## */
.pgBox {
	width: 25%;
	height: auto;
	box-sizing: border-box;
	text-align: center;
	margin-bottom: 4px;
	float: left;
	position: relative;
}
.pgBox:before {
	content: "";
	display: block;
	padding-top: 66.5%;
}
.pgBox .inner {
	width: 96%;
	height: 96%;
	box-sizing: border-box;
	text-align: center;
	position: absolute;
	top: 0; 
	left: auto;
	right: auto;
}
.pgBox a {
	width: 100%;
	height: 100%;
	display: block;
}
.pgBox a img {
	width:auto;
	height:auto;
	max-width:100%;
	max-height:100%;
}


/* #### width 359px以下の場合の設定 (for SP Only) #### */
@media (max-width: 359px) {

/* ## index.php ## */
.pgBox {
	width: 50%;
	margin-bottom: 4px;
}

}

/* #### width 360px～500pxの場合の設定 (for SP Wide Only) #### */
@media (min-width: 360px) and (max-width: 500px) {

/* ## index.php ## */
.pgBox {
	width: 50%;
	margin-bottom: 4px;
}

}

/* ## width 501px～767pxの場合の設定 (for Tub Only) ## */
@media (min-width: 501px) and (max-width: 767px) {

/* ## index.php ## */
.pgBox {
	width: 33%;
	margin-bottom: 4px;
}


}

/* #### width 767px 以下の場合の設定 (for All Mobile Dvices) #### */
@media (max-width: 767px) {

/* ## index.php ## */
.pgBox a:active {
	opacity: 0.74;
}

}


/* #### width 768px 以上の場合の設定 (for PC) #### */
@media (min-width: 768px) {

/* ## index.php ## */
.pgBox {
	width: 33%;
	margin-bottom: 4px;
}
.pgBox a:hover {
	opacity: 0.74;
}

}

/* #### width 980px 以上の場合の設定 #### */
@media (min-width: 980px) {

/* ## index.php ## */
.pgBox {
	width: 25%;
	margin-bottom: 4px;
}

}


/* #### width 1200px 以上の場合の設定 #### */
@media (min-width: 1200px) {



}