@charset "utf-8";

@charset "utf-8";

/* フォント */
/* IE */
@font-face {
font-family: font_type01;
src:url("../font/HuiFont109.eot");
}
/* Firefox,Opera,Safari */
@font-face {
font-family: font_type01;
src:url("../font/HuiFont109.ttf") format("truetype");
}
/* IE */
@font-face {
font-family: font_type02;
src:url("../font/mplus-2p-heavy.eot");
}
/* Firefox,Opera,Safari */
@font-face {
font-family: font_type02;
src:url("../font/mplus-2p-heavy.ttf") format("truetype");
}

/* 共通設定 */
.clearfix:after {
	content: "";
	clear: both;
	display: block;
}
* {
	border: none;
	padding: 0;
	margin: 0;
	list-style-type: none;
	box-sizing: border-box;
	font-style: normal;
	text-decoration: none;
}

a {
}
a::before, a::after {
	position: absolute;
	z-index: -1;
	content: '';
}
a, a::before, a::after {
	-webkit-transition: all 0.4s;
	transition: all 0.4s;
}
a:hover {
	opacity: 0.5;
}

#page {
	width: 1200px;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	background-color: rgba(254,243,151,0.6);
	padding: 10px;
	margin: 0px auto;
}
@media(max-width:1199px) {
	#page {
	width: 100%;
	background-color: rgba(254,243,151,0.6);
	}
}
header {
	display: block;
	margin-bottom: 5px;
	font-size: 26px;
	background: #F60;
	color: #FFF;
	font-family: font_type02;
	text-align: center;
	padding: 10px;
}
@media(max-width:949px) {
	header {
		font-size: 18px;
	}
}
#topImg {
	margin-bottom: 10px;
}
#topImg img {
	width: 100%;
}
#page .info {
	margin-bottom: 10px;
	border: solid 1px #003399;
	border-radius: 5p;
	padding: 5px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	background-color: #FFF;
}



/* 各タイトル */
.blockTitle {
	margin-bottom: 10px;
	background-position: center center;
	background-repeat: repeat;
	padding: 0px 10px;
	background-color: #3b3b3b;
	border-radius: 10px;
   	-webkit-border-radius: 10px;
   	-moz-border-radius: 10px;
}
.blockTitle .text {
	display: table-cell;
	vertical-align: middle;
	height: 50px;
	font-size: 26px;
	/*
	font-weight: bold;
	*/
	font-family: font_type02;
	color: #FFF;
	text-shadow: 1px 1px 3px #000, -1px -1px 3px #000;
}
@media(max-width:949px) {
	.blockTitle .text {
		font-size: 20px;
		height: 50px;
		color: #FFF;
		text-shadow: 1px 1px 3px #000, -1px -1px 3px #000;
	}
}




/* リストエリア */
#list .box {
	padding: 0px;
}
@media(max-width:949px) {
	#list .box {
		padding: 0px;
	}
}
#list .block {
	margin: 0 0 10px 0;
	border: solid 5px #000000;
	border-radius: 5px;
	padding: 5px;
	background-color: rgba(255,255,255,0.7);
	border-color: #FC9;
	border-radius: 10px;
   	-webkit-border-radius: 10px;
   	-moz-border-radius: 10px;
}
@media(max-width:949px) {
	#list .block {
		border-radius: 0px;
		padding: 0px;
		border: none;
		border-radius: 10px;
 	  	-webkit-border-radius: 10px;
 	  	-moz-border-radius: 10px;		
	}
}
#list ul {
	display: block;
}
#list li {
	display: block;
	margin: 0px 0.8% 10px 0px;
	float: left;
	width: 16%;
	height: auto;
	position: relative;
	z-index: 1;
	border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;	
}
@media(min-width:950px) {
	#list li {
		/*
		border-radius: 8px;
		*/
		overflow: hidden;
		border: solid 2px rgba(0,0,0,0.6);
		background-color: rgba(0,0,0,0.6);
		border-radius: 10px;
    	-webkit-border-radius: 10px;
    	-moz-border-radius: 10px;
	}
	#list li:nth-child(6n) {
		margin: 0px 0px 10px 0px;
	}
}
@media(max-width:949px) {
	#list ul {
		width: 100%;
		padding: 0px 0px 10px 5%;
	}
	#list li {
		width: 30%;
		height: auto;
		padding: 2px;
		margin: 0px 3% 10px 0px;
		border: solid 1px rgba(0,0,0,0.6);
		background-color: rgba(0,0,0,0.6);
		border-radius: 10px;
    	-webkit-border-radius: 10px;
    	-moz-border-radius: 10px;
	}
}
@media(max-width:500px) {
	#list ul {
		width: 100%;
		padding: 0px 0px 10px 5%;
	}
	#list li {
		width: 45%;
		height: auto;
		padding: 2px;
		margin: 0px 5% 10px 0px;
		border-radius: 10px;
    	-webkit-border-radius: 10px;
    	-moz-border-radius: 10px;
	}
}

@media(max-width:499px) {
	#list ul {
		width: 100%;
		padding: 0px 0px 10px 5%;
	}
	#list li {
		width: 45%;
		height: auto;
		padding: 2px;
		margin: 0px 5% 10px 0px;
		border-radius: 10px;
    	-webkit-border-radius: 10px;
    	-moz-border-radius: 10px;
	}
}

#list li img {
	width: 100%;
	border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;	
}
#list li .shop {
	position: absolute;
	z-index: 2;
	top: 5px;
	right: 5px;
	display: block;
	font-size: 12px;
	padding: 3px;
	height: 18px;
	font-weight: bold;
	color: #FFF;
	background: rgba(0,0,0,1.0);
	text-shadow: 0px 0px 2px #000000;
	border-radius: 3px;
}
#list li .shop:after {
	content: "";
}
@media(max-width:949px) {
	#list li .shop {
		font-size: 10px;
		padding: 2px;
		height: 18px;
		top: 3px;
		right: 3px;
	}
}
#list li .id_1 {
	background-color: #909;
}
#list li .id_2 {
	background-color: #09F;
}
#list li .id_3 {
	background-color: #60C;
}
#list li .id_4 {
	background-color: #F90;
}
#list li .id_5 {
	background-color: #00F;
}
#list li .id_6 {
	background-color: #F00;
}
#list li .id_7 {
	background-color: #BB6;
}
#list li .id_8 {
	background-color: #009;
}
#list li .id_9 {
	background-color: #9F0;
}
#list li .id_10 {
	background-color: #FFF;
}
#list li .id_12 {
	background-color: #900;
}
#list li .id_13 {
	background-color: #906;
}
#list li .id_14 {
	background-color: #006;
}
#list li .id_15 {
	background-color: #F0F;
}
#list li .id_16 {
	background-color: #3CF;
}
#list li .id_17 {
	background-color: #CF3;
}
#list li .id_18 {
	background-color: #9CF;
}
#list li .id_19 {
	background-color: #F06;
}
#list li .id_20 {
	background-color: #FC0;
}
#list li .id_21 {
	background-color: #C00;
}
#list li .id_22 {
	background-color: #F30;
}
#list li .id_23 {
	background-color: #F33;
}
#list li .id_24 {
	background-color: #CCCCFF;
}
#list li .id_25 {
	background-color: #CCCCFF;
}
#list li .id_29 {
	background-color: #FF00FF;
}
#list li .id_44 {
	background-color: #113366;
}
#list li .id_45 {
	background-color: #FFF70A;
}
#list li .id_47 {
	background-color: #F0F;
}

#list li .nameBox {
	position: absolute;
	z-index: 3;
	bottom: 26px;
	left: 4px;
	border-radius: 10px;
   	-webkit-border-radius: 10px;
   	-moz-border-radius: 10px;
}


#list li .name {
	display: table-cell;
	height: 24px;
	vertical-align: middle;
	background: rgba(0,0,0,0.6);
	font-family: font_type01;
	font-weight: bold;
	font-size: 18px;
	padding: 3px;
	color: #CCC;
	letter-spacing: -2px;
}

@media(max-width:499px) {
	#list li .nameBox {
		bottom: 30px;
	}
}
	
#list li .sexal {
	/*
	display: table-cell;
	height: 24px;
	vertical-align: middle;
	text-align: center;
	background: rgba(0,0,0,0.6);
	width: 24px;
	font-family: font_type02;
	color: #FFF;
	font-size: 18px;
	*/
	display: none;
}
#list li .sexal.gay {
	background: rgba(255,0,0,0.6);
}
#list li .sexal.gay:after {
	content: "G";
}
#list li .sexal.bi {
	background: rgba(255,0,255,0.6);
}
#list li .sexal.bi:after {
	content: "B";
}
#list li .sexal.nonke {
	background: rgba(0,0,255,0.6);
}
#list li .sexal.nonke:after {
	content: "N";
}
#list li .name:after {
	content: "君";
	font-size: 14px;
}
#list li .overlay {
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 12px;
	color: #000;
	position: absolute;
	z-index: 5;
	top: 0px;
	left: 0px;
}
#list li .overlay:hover {
	background-color: #FFF;
	text-indent: inherit;
}
#list li .overlay canvas {
	display: none;
}
#list li .kikan {
	height: 20px;
	font-size: 15px;
	font-weight: bold;
	color: #FFF;
	text-shadow: 0px 0px 2px #000000;
	display: block;
	vertical-align: middle;
	padding: 0 10px;
	text-align: right;
}
#list li .kikan:before {
	content: "";
}

/*
#list li .overlay span:before {
	content: "クリックで詳細が開きます";
}
*/
@media(max-width:949px) {
	#list li .overlay {
		width: 100%;
		height: auto;
		top: 0px;
		left: 0px;
	}
	#list li .overlay canvas {
		display: inherit;
		width: 100%;
		height: auto;
	}
	#list li .overlay span {
		display: none;
	}
	#list li .kikan {
		font-size: 15px;
}
}

#list .block#group_A {
	border-color: #0F0;
}
#list .block#group_A .blockTitle {
	background-color: #0F0;
}
#list .block#group_B {
	border-color: #F90;
}
#list .block#group_B .blockTitle {
	background-color: #F90;
}
#list .block#group_C {
	border-color: #00F;
}
#list .block#group_C .blockTitle {
	background-color: #00F;
}





/* リンクボタンエリア */
.linkBtBox {
	display: block;
	margin-bottom: 10px;
}
.linkBtBox .linkBt {
	display: block;
	width: 90%;
	text-align: center;
	padding: 10px 0px;
	color: #FFF;
	font-family: font_type02;
	background-color: #C00;
	border-radius: 5px;
	font-size: 24px;
	line-height: 26px;
	margin: 0px auto;
}



/* バナーエリア */
#bannerArea ul {
	display: block;
}
#bannerArea li {
	display: block;
	width: 49.5%;
	margin: 0px 1% 4px 0px;
	float: left;
	padding: 8px;
	background-color: #FC9;
	border-radius: 5px;
}
#bannerArea li:nth-child(2n) {
	margin-right: 0px;
}
#bannerArea li div {
	font-size: 14px;
	font-weight: bold;
	color: #FFF;
}
#bannerArea li img {
	width: 100%;
	border: solid 4px #FFFFFF;
}
@media(max-width:700px) {
	#bannerArea li div {
		font-size: 12px;
	}
}
@media(max-width:640px) {
	#bannerArea li,
	#bannerArea li:nth-child(2n) {
		width: 100%;
		margin: 0px 0px 10px 0px;
		float: none;
	}
}




.imageBt {
	display: none;
}
@media(max-width:949px) {
	.imageBt {
		display: block;
		text-align: right;
		background: #F00;
		color: #FFF;
		margin-bottom: 5px;
		line-height: 20px;
	}
}
.banner {
	margin-bottom: 10px;
}
.banner img {
	display: block;
	width: 100%;
	margin: 0px auto 10px;
}
@media(max-width:949px) {
	.banner img {
		width: 96%;
	}
}
.spTap {
	display: none;
}
@media(max-width:949px) {
	.spTap {
		display: block;
		width: 100%;
		margin-bottom: 10px;
	}
}
.rsvInfo {
	margin: 0px 0px 10px;
	border: dotted 1px #000000;
	padding: 5px;
	font-size: 14px;
	line-height: 18px;
}


/* バナーエリア */
#bannerArea ul {
	display: block;
}
#bannerArea li {
	display: block;
	width: 49.5%;
	margin: 0px 1% 4px 0px;
	float: left;
	padding: 8px;
	background-color: #6b6b6b;
	border-radius: 5px;
}
#bannerArea li:nth-child(2n) {
	margin-right: 0px;
}
#bannerArea li div {
	font-size: 14px;
	font-weight: bold;
	color: #FFF;
}
#bannerArea li img {
	width: 100%;
	border: solid 4px #FFFFFF;
}
@media(max-width:700px) {
	#bannerArea li div {
		font-size: 12px;
	}
}
@media(max-width:640px) {
	#bannerArea li,
	#bannerArea li:nth-child(2n) {
		width: 100%;
		margin: 0px 0px 10px 0px;
		float: none;
	}
}
/* バナーエリア2 */
#bannerArea2 ul {
	display: block;
}

#bannerArea2  {
	margin: 0 0 10px 0;
	border: solid 5px #3b3b3b;
	border-radius: 5px;
	padding: 5px;
	background-color: rgba(255,255,255,0.7);
	border-color: #3b3b3b;
	border-radius: 10px;
   	-webkit-border-radius: 10px;
   	-moz-border-radius: 10px;
}
#bannerArea2 :nth-child(2n) {
	margin-right: 0px;
}
#bannerArea2  div {
	font-size: 14px;
	font-weight: bold;
	color: #FFF;
}
#bannerArea2 img {
	width: 100%;
	border: solid 4px #FFFFFF;
}
@media(max-width:700px) {
	#bannerArea2  div {
		border-radius: 0px;
		padding: 0px;
		border: none;
		border-radius: 10px;
 	  	-webkit-border-radius: 10px;
 	  	-moz-border-radius: 10px;		
	}
}
@media(max-width:640px) {
	#bannerArea2 ,
	#bannerArea2 :nth-child(2n) {
		width: 100%;
		margin: 0px 0px 10px 0px;
		float: none;
	}
}




.imageBt {
	display: none;
}
@media(max-width:949px) {
	.imageBt {
		display: block;
		text-align: right;
		background: #FFF;
		color: #FFF;
		margin-bottom: 5px;
		line-height: 20px;
	}
}
.banner {
	margin-bottom: 10px;
}
.banner img {
	display: block;
	width: 100%;
	margin: 0px auto 10px;
}
@media(max-width:949px) {
	.banner img {
		width: 96%;
	}
}
#link {
	width: 100%;
}
@media(max-width:949px) {
	#link {
		width: 100%;
	}
}

#shop {
	width: 900px ;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
}

#shop ul{
	width: 100%;
	overflow: hidden;
	display: block;
	list-style-type: none;
}

#shop li{
	width:25%;
	padding:9px;
	float:left;
}

#shop li{
	width:23%;
}

#shop li a{
	float:left;
	width:100%;
}

#shop li img{
	width:100%;
	height:auto;
	border-radius:8px;
	float:left;
	-moz-box-shadow: 0 0 3px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.5);
	box-shadow: 0 0 3px rgba(0,0,0,0.5);
	border:solid 1px #999\9;
}

#shop li img:hover{
	width:100%;
	height:auto;
	border-radius:8px;
	float:left;
	-moz-box-shadow: 0 0 3px 2px rgba(0,0,0,0.7);
	-webkit-box-shadow: 0 0 3px 2px rgba(0,0,0.7);
	box-shadow: 0 0 3px 2px rgba(0,0,0,0.7);
	border:solid 1px #2792ff\9;

}
#shop li font{
	font-size:32px;
	color:#FF3300;
	line-height:33px;
	text-shadow: 2px 2px 1px #FFF,
    			-2px 2px 1px #FFF,
    			2px -2px 1px #FFF,
    			-2px -2px 1px #FFF;
}
/*---*/
@media(max-width:500px){
#shop {
	width: 100% ;
	margin-top: 5px;
}
#shop li{
		width:48%;
		padding:2px;
}
}