@charset "shift_jis";

/********** 基本CSS **********/

#contentsArea {
	color:#000;
	font-family:"ヒラギノ丸ゴ Pro W4", "Hiragino maru Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO","Verdana","Osaka",sans-serif;
	font-size:13px;
	line-height:1.5;
    -webkit-box-shadow: inset 0px 4px 4px rgba(51, 51, 51,0.2);
    -moz-box-shadow: inset 0px 4px 4px rgba(51, 51, 51,0.2);
    -ms-box-shadow: inset 0px 4px 4px rgba(51, 51, 51,0.2);
    box-shadow: inset 0px 4px 4px rgba(51, 51, 51,0.2);
}

ul{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
ul li img{
	vertical-align: bottom;
}


.mr2
{
	margin-right: 2px;
}
.mb10
{
	margin-bottom: 10px;
}
.mb20
{
	margin-bottom: 20px;
}

.dispNone
{
	display: none;
}

	ul.btnList
	{
		width: 93%;
		margin: 0 auto 0 auto;
		background-color: #E2E3E4;
		padding: 7px 6px 4px 5px;
	}
		ul.btnList li
		{
			background: url("../img/bg_linkbtn.gif");
			-webkit-background-size: 320px 50px;
			background-size: 100% 100%;
			background-repeat:no-repeat;
			background-position:bottom left;
			width: 100%;
			font-weight: bold;
			box-sizing: border-box;
		}
		ul.btnList li span
		{
			padding-top: 4%;
			display: block;
			font-weight: bold;
			padding: 4% 0 4% 5%;
		}
		ul.btnList li.last
		{
			border-bottom: 1px solid #C9CCCD;
		}


.newBox,
.pickupBox
{
	position: relative;
	width: 20%;
}
	.newBox img,
	.pickupBox img
	{
		position: absolute;
		left:403%;
	}



/********** ヘッダー **********/

header {
	padding-right: 0;
	padding-top: 0;
	height: auto;
}

header p.openSearch
{
	margin-right: 0;
	margin-top:0;

}
header h1
{
	width: 77%;
	position: relative;
}
header h1 img
{
	margin-top: 12px;
}

.searchArea .searchBox
{
	padding: 20px 0 20px 0 !important;
	background-color: #BDBFC2;
}

.searchArea .searchBox .searchBoxInner
{
	padding: 10px 10px 10px 10px;
	box-sizing: border-box;
	background-color: #A5A7AA;
	width: 94%;
	margin: 0 auto 0 auto;
}



	@media only screen and (orientation : portrait)
	{
		/*縦向きの際に適用*/
		.searchArea .searchBox .searchBoxInner .floatRight .btn
		{
			display: block;
			margin-top: 5%;
		}
	}


	@media only screen and (orientation : landscape)
	{
		/*横向きの際に適用*/
		.searchArea .searchBox .searchBoxInner .floatRight .btn
		{
			display: block;
			margin-top: 13%;
		}
	}






.searchArea .searchBox dl
{
	padding-left: 0;
}

.searchArea input.textBox{
	margin-left: 0;
	margin-right: 5px;
}

.searchArea input.btn{
	margin-top: 0;
}



.searchArea .searchBox dl dd
{

}

/********** スライドショー **********/


.viewportOuter{
	width: 97%;
	background-color: #FFFFFF;
	position: relative;
}

.viewport
{
	background-color: #DBDDE0;
	border: 4px #FFFFFF solid;
	/*padding: 6px;*/
}


.textBox
{
	margin-top: 2%;
}
	.textBox .mainText
	{
		color:#404142;
	}
	.textBox .subText
	{
		color:#404142;
		font-size: 10px;
	}

.rankBox
{
	position: relative;
}

	.rankBox p
	{
		position: absolute;
		top:-2%;
		left: 3%;
		background: url("../img/ico_rank.png") no-repeat;
		background-size: 100% 100%;
		box-sizing: border-box;
	}


	@media only screen and (orientation : portrait)
	{
		/*縦向きの際に適用*/


		.splashArea
		{
			position: relative;
			/*width: 286px;*/
			height: 154px;
			overflow: hidden;
		}
			.splashArea .img1
			{
				position: absolute;
				top:0px;
				left:10px;
				width:17%;
				z-index: 2;
			}
			.splashArea .img2
			{
				position: absolute;
				top:0px;
				left:0px;
			}

			.splashArea .arrBox
			{
				position: absolute;
				top:104px;
				left:1px;
				width:98%;
				z-index: 2;
				height: 90px;
				overflow: hidden;
				padding-bottom:2%;
			}

			.splashArea .img3
			{
				position: absolute;
				top:0px;
				left:-270px;
				width:100%;
				display: none;
				z-index: 1;
			}
			.splashArea .img4
			{
				position: absolute;
				top:115px;
				left:53px;
				width:21.6%;
				display: none;
				z-index: 2;
			}
			.splashArea .img5
			{
				position: absolute;
				top:115px;
				left:120px;
				width:38.8%;
				display: none;
				z-index: 2;
			}
			.splashArea .img6
			{
				position: absolute;
				top:25px;
				left:45px;
				width:70%;
				display: none;
				z-index: 1;
			}
			.splashArea .img7
			{
				position: absolute;
				top:43px;
				left:86px;
				width:50%;
				display: none;

			}
			.splashArea .img8
			{
				position: absolute;
				top:0px;
				left:0px;
				display: none;
			}

		.viewportOuter{
			/*width: 308px;*/
			width:97%;
			height:223px;
			border: 6px #FF0000 solid;
		}

		.viewport {
			text-align:center;
			overflow: hidden;
			width: 97%;
			height:215px;
			/*width:300px;*/
			margin: 0 auto;
		}

		.flipsnap {
			/*width: 2142px;*/
		}
		ul.flipsnap {
			margin:0;
			padding:0;
			list-style:none;
		}
		ul.flipsnap li {
			float:left;
			/*width:286px;*/
			/*width:287px;*/
			width: 95%;
			/*height:206px;*/
			height:100%;
			padding: 9px 7px 5px 7px;
		}
		.viewport .pointer {
			text-align: center;
			background-color:#DBDDE0;
			padding: 5px 0 5px 0;
		}
		.viewport .pointer span {
			display: inline-block;
			width: 8px;
			height: 8px;
			border-radius: 8px;
			background-color: #B3B3B6;
			margin-right: 8px;
			margin-left: 8px;
			vertical-align: top;
		}
		.viewport .pointer span.current {
			background:#E6000D;
		}

		/*----- スライドボタン・ポインタ用 -----*/
		.slideTbl
		{
			/*width: 300px;*/
			/*width: 320px;*/
			width:100%;
			color: #FFFFFF;
		}
			.slideTbl .leftBtn
			{
				width: 35px;
			}
				.slideTbl .leftBtn img
				{
					width: 100%;
				}

			.slideTbl .pointer
			{
				width: 250px;
				vertical-align: middle;

			}
			.slideTbl .rightBtn
			{
				width: 35px;
			}
				.slideTbl .rightBtn img
				{
					width: 100%;
				}

		/*----- ランキング表示用 -----*/
		.rankBox p
		{
			width:30px;
			height:30px;
		}
		.rankBox p span.tenUnder
		{
			position:absolute;
			top:0%;
			left:10%;
			font-size: 18px;
			font-weight: bold;
			color: #FFFFFF;
		}
		.rankBox p span.rank
		{
			position:absolute;
			top:30%;
			left:58%;
			font-size: 10px;
			font-weight: bold;
			color: #FFFFFF;
		}

		.rankBox p span.tenOver
		{
			position:absolute;
			top:20%;
			left:5%;
			font-size:11px;
			font-weight: bold;
			color: #FFFFFF;
			display: inline-block;
			-moz-transform:    scale( 1, 1.6 );  /* Firefox */
			-webkit-transform: scale( 1, 1.6 );  /* Chrome,Safari */
			-o-transform:      scale( 1, 1.6 );  /* Opera */
			-ms-transform:     scale( 1, 1.6 );  /* IE */
			transform:         scale( 1, 1.6 );  /* CSS3 */
		}

		.viewportOuter .leftBtn
		{
			position: absolute;
			top:36.5%;
			left:0px;
			width: 65px;
		}
			.viewportOuter .leftBtn img
			{
				width: 50%;
			}

		.viewportOuter .rightBtn
		{
			position: absolute;
			top:36.5%;
			right:0%;
			text-align: right;
			width: 65px;
		}
			.viewportOuter .rightBtn img
			{
				width: 50%;
			}

	}


	@media only screen and (orientation : landscape)
	{
		/*横向きの際に適用*/

		.splashArea
		{
			position: relative;
			/*width: 506px;*/
			height: 280px;
			overflow: hidden;
		}
			.splashArea .img1
			{
				position: absolute;
				top:0px;
				left:21px;
				width:17%;
				z-index: 2;
			}
			.splashArea .img2
			{
				position: absolute;
				top:0px;
				left:0px;
			}
			.splashArea .arrBox
			{
				position: absolute;
				top:185px;
				left:2px;
				width:98%;
				z-index: 2;
				height: 80px;
				overflow: hidden;
				padding-bottom:2%;

			}

			.splashArea .img3
			{
				position: absolute;
				top:0px;
				left:-495px;
				width:100%;
				z-index: 1;
				display: none;
			}



			.splashArea .img4
			{
				position: absolute;
				top:203px;
				left:95px;
				width:21.6%;
				display: none;
				z-index: 2;
			}
			.splashArea .img5
			{
				position: absolute;
				top:203px;
				left:205px;
				width:38.8%;
				display: none;
				z-index: 2;
			}
			.splashArea .img6
			{
				position: absolute;
				top:46px;
				left:87px;
				width:66.5%;
				display: none;
				z-index: 1;
			}
			.splashArea .img7
			{
				position: absolute;
				width:51%;
				z-index: 1;
				display: none;

			}
			.splashArea .img8
			{
				position: absolute;
				top:0px;
				left:0px;
				display: none;
			}










		.viewportOuter{
			/*width: 544px;*/
			width:96%;
			border: 12px #FF0000 solid;
		}

		.viewport {
			text-align:center;
			overflow: hidden;
			width:97%;
			/*width: 606px*/
			margin: 0 auto;
		}

		.flipsnap {
			/*width: 3710px;*/
		}
		ul.flipsnap {
			margin:0;
			padding:0;
			list-style:none;
		}
		ul.flipsnap li {
			float:left;
			/*width:500px;*/
			width: 95%;
			/*height:276px;*/
			padding: 15px 15px 10px 15px;

		}
		.viewport .pointer {
			text-align: center;
			background-color:#DBDDE0;
			padding: 10px 0 10px 0;
		}
		.viewport .pointer span {
			display: inline-block;
			width: 16px;
			height: 16px;
			border-radius: 8px;
			background-color: #B3B3B6;
			margin-right: 15px;
			margin-left: 15px;
		}
		.viewport .pointer span.current {
			background:#E6000D;
		}

		/*----- スライドボタン・ポインタ用 -----*/
		.slideTbl
		{
			/*width: 565px;  ****/
			width:100%;
			color: #FFFFFF;
		}
			.slideTbl .leftBtn
			{
				width: 46px;
			}
			.slideTbl .pointer
			{
				/*width: 475px;*/
				width:450px;
				vertical-align: middle;
			}
			.slideTbl .rightBtn
			{
				width: 45px;
			}


		/*----- ランキング表示用 -----*/
		.rankBox p
		{
			width:59px;
			height:61px;
		}
		.rankBox p span.tenUnder
		{
			position:absolute;
			top:0%;
			left:15%;
			font-size: 37px;
			font-weight: bold;
			color: #FFFFFF;
		}
		.rankBox p span.rank
		{
			position:absolute;
			top:28%;
			left:58%;
			font-size: 21px;
			font-weight: bold;
			color: #FFFFFF;
		}
		.rankBox p span.tenOver
		{
			position:absolute;
			top:14%;
			left:5%;
			font-size: 25px;
			display: inline-block;
			color: #FFFFFF;
			-moz-transform:    scale( 1, 1.6 );  /* Firefox */
			-webkit-transform: scale( 1, 1.6 );  /* Chrome,Safari */
			-o-transform:      scale( 1, 1.6 );  /* Opera */
			-ms-transform:     scale( 1, 1.6 );  /* IE */
			transform:         scale( 1, 1.6 );  /* CSS3 */
		}

		.viewportOuter .leftBtn
		{
			position: absolute;
			top:35%;
			left:0px;
			width: 46px;
		}
			.viewportOuter .leftBtn img
			{
				/*width: 50%;*/
			}

		.viewportOuter .rightBtn
		{
			position: absolute;
			top:35.4%;
			/*left:86.3%;*/
			right:0%;
			text-align: right;
			width: 46px;
		}
			.viewportOuter .rightBtn img
			{
				width: 98.7%;
			}

	}



/********** コンテンツ **********/

section.slideList ul{
	display: none;
}

.menuBox
{
	margin-bottom: 20px;
	background-color:#D9DBDC;
}

.btnBox
{
	margin-bottom: 25px;
}
	.btnBox ul
	{
		width: 93%;
		margin: 0 auto 0 auto;
	}
		.btnBox ul li
		{
			background-color: #C0C3C5;
			padding: 4px 6px 4px 5px;
		}

section h2{
	margin: 0;
}
	section h2 img{
		cursor: pointer;
	}

	.listOff
	{
		background-image: url("../img/bg_products_menu.gif")
	}
	.listOn
	{
		background-image: url("../img/bg_products_menu_on.gif");
	}

	.drList
	{
		-webkit-background-size: 320px 50px;
		background-size: 100%;
		background-repeat:no-repeat;
		background-position:bottom left;
		width: 100%;
		box-sizing: border-box;
		border-bottom: 2px solid #D4D5D7;
	}
	.drList.first
	{
		border-top: 2px solid #D4D5D7;
	}

	.drList span
	{
		padding-left: 8%;
		padding-top: 3%;
		display: block;
	}


	@media only screen and (orientation : portrait)
	{
		/*縦向きの際に適用*/
		.drList
		{
			height:50px;
			font-size: 17px;
		}

		.slideList li{
			height:49px;
			font-size: 16px;
		}
	}


	@media only screen and (orientation : landscape)
	{
		/*横向きの際に適用*/
		.drList
		{
			height:88px;
			font-size: 34px;
		}

		.slideList li{
			font-size: 32px;
		}

	}
	.slideList ul{
		background-color:#D9DBDC;
	}

	.slideList li{
		-webkit-background-size: 320px 50px;
		background-size: 100%;
		background-repeat:no-repeat;
		background-position:bottom left;
		width: 100%;
		height:auto;
		border-bottom: 1px solid #FFFFFF;
	}

	.slideList li.last{
		border-bottom: none;
	}

	.slideList li p
	{
		background-image: url("../img/bg_submenu.gif");
		background-repeat:no-repeat;
		background-position: 98% 50%;
		font-weight: bold;
		padding-right: 10%;
		padding-left: 8%;
		margin-top: 5%;
		margin-bottom: 5%;
	}
	.slideList li p a
	{
		color: #000000;

	}

	.slideList li a
	{
		background-image: url("../img/bg_submenu.gif");
		background-repeat:no-repeat;
		background-position: 96% 50%;
		background-size: 4% auto;
		color: #000000;
		display: block;
		padding: 5% 10% 5% 8%;

	}




	.slideList li span
	{
		padding-top: 4%;
		display: block;
	}


/********** 新着情報 **********/

#newsListBox{}

	#newsListBox h2
	{
		margin: 0 0 10px 0;
	}
	#newsListBox ul
	{
		margin-left: 3.5%;
		margin-right: 3.7%;
	}
		#newsListBox ul li
		{
			margin-top: 2.5%;
		}
			#newsListBox ul li p.date
			{
				color: #363636;
			}
			#newsListBox ul li .text
			{
				border-bottom: 1px dotted;
				padding-bottom: 2.5%;
			}
			#newsListBox ul li .text.last
			{
				border-bottom: 0;
			}
			#newsListBox ul li a
			{
				text-decoration: underline;
			}









	#newsListBox .btnNextNews
	{
		width: 97%;
		margin: 2.5% auto 10% auto;
	}
		.btnNextNews .left
		{
			width: 30%;
			cursor: pointer;
			float: left;
			margin-right: 3%;
		}
		.btnNextNews .right
		{
			width: 66%;
			cursor: pointer;
			float: left;
		}




/********** その他のお知らせ **********/
.otherList
_{
	margin-bottom: 30px;
}

	.otherList .btnList a
	{
		color: #000000;
	}

	.otherList h2
	{
		margin: 0 0 15px 0;
	}

	.otherList .bnrBox
	{
		width: 93%;
		margin: 0 auto 20px auto;
		background-color: #E2E3E4;
		padding: 7px 6px 4px 5px;
	}

	.otherList .bnrBox table
	{
		width: 100%;
	}
		.otherList .bnrBox table td
		{
			background-color: #FFFFFF;
			box-sizing: border-box;
			width: 49.8%;
			padding: 10px 6px 10px 10px;
			margin-bottom: 2px;
			border-bottom: 1px solid #E2E3E4;
			text-align:center;
			vertical-align: middle;


		}
		.otherList .bnrBox table td.left
		{
			border-right: 1px solid #E2E3E4;
		}

	.otherList .bnrBox table td .bnr_top
	{
		position: relative;
	}
		.otherList .bnrBox table td .bnr_top ul
		{
			position: absolute;
			width: 63%
		}

	@media only screen and (orientation : portrait)
	{
		/*縦向きの際に適用*/
		.otherList .bnrBox table td .bnr_top ul
		{
			left: 17%;
			top: 69%;
		}
			.otherList .bnrBox table td .bnr_top ul li
			{
				margin-bottom: 1%;
			}
	}


	@media only screen and (orientation : landscape)
	{
		/*横向きの際に適用*/
		.otherList .bnrBox table td .bnr_top ul
		{
			left: 17%;
			top: 73%;
		}
			.otherList .bnrBox table td .bnr_top ul li
			{
				margin-bottom: 5%;
			}

	}





	.otherList ul.bnrList
	{
		border:1px solid
		width: 95%;
		margin: 0 auto 0 auto;
		background-color: #E2E3E4;
		padding: 0;
	}
	.otherList .bnrList li
	{
		float: left;
		background-color: #FFFFFF;
		box-sizing: border-box;
		width: 49.8%;
		padding: 10px 8px 10px 8px;
		margin-bottom: 2px;
		height:auto;
	}
	.otherList .bnrList li img
	{
		display: block;
		margin: 0 auto 0 auto;
	}


	.otherList .bnrList li.left
	{
		margin-right: 2px;
	}
	.otherList .bnrList li.right
	{

	}

/*********** ソーシャルメディア公式 **********/

.smList
{
	margin-bottom: 30px;
}
	.smList h2
	{
		margin: 0 0 15px 0;
	}
	.smList ul
	{
		width: 93%;
		margin: 0 auto 0 auto;
		background-color: #E2E3E4;
		padding: 7px 6px 4px 5px;
	}
		.smList ul li a
		{
			color: #000000;
			display: block;
			font-weight: bold;
		}

		.smList ul .twitterIco
		{
			background: url("../img/ico_twitter.gif") 3% center no-repeat;
			background-size:auto 50%;
			padding-left: 14%;
		}
		.smList ul .facebookIco
		{
			background: url("../img/ico_facebook.gif") 4% center no-repeat;
			background-size:auto 50%;
			padding-left: 14%;
		}




.toPcBox
{
	width: 45%;
	margin: 0 auto 15px auto;
}

footer nav ul li{
	font-size: 70%;
}


/*********** rank.html TOP部分 **********/
.rankTop
{
	background-color: #E4E4E4;
	padding-bottom: 5%;
	position: relative;

}
	.rankTop .left
	{
		width:30%;
		float: left;
		margin-left: 4%
	}
	.rankTop .right
	{
		width:61%;
		margin-left:4%;
		margin-right:1%;
		float: left;
		padding-top: 4%;
		font-weight: bold;
	}

	.rankTop .right .link
	{
		margin-top: 5%;
		text-align: right;
	}
	.rankTop .right .link a
	{
		background-image: url("../img/bg_rank_topLink.gif");
		background-repeat:no-repeat;
		background-position: 3% 100%;
		background-size: 8.5% auto;
		padding-left: 2%;
	}

	@media only screen and (orientation : portrait)
	{
		/*縦向きの際に適用*/

		.rankTop .right .link a
		{
			padding-left: 9%;
		}
	}


	@media only screen and (orientation : landscape)
	{
		/*横向きの際に適用*/

		.rankTop .right .link a
		{
			padding-left: 6%;
		}
	}

/*********** rank.html ランキング部分 **********/

@media only screen and (orientation : portrait)
{
	/*縦向きの際に適用*/

	.rankBodyTop
	{
		background: url("../img/bg_rankBodyTop.gif") no-repeat left top;
		background-size:100% 45px;
		padding-top:2%;
		padding-left:4%;
		padding-right:4%;
		height: 45px;
		box-sizing: border-box;
		margin-bottom: 3%;
	}
}


@media only screen and (orientation : landscape)
{
	/*横向きの際に適用*/

	.rankBodyTop
	{
		background: url("../img/bg_rankBodyTop.gif") no-repeat left top;
		background-size:100% 77px;
		padding-top:1.5%;
		padding-left:4%;
		padding-right:4.6%;
		height: 77px;
		box-sizing: border-box;
		margin-bottom: 3%;
	}
}

	.rankBodyTop .left
	{
		float: left;
		width:40%;
		margin-right:35%;
		margin-top:1%;
		text-align: left;
	}
	.rankBodyTop .rankListOpen
	{
		display: none;
	}
	.rankBodyTop .center
	{
		float: left;
		width: 10%;
		margin-right: 5%
	}
	.rankBodyTop .right
	{
		float: left;
		width: 10%
	}

.rankBody
{
	background-color: #FFFFFF;
	padding:3% 5% 10% 4%;
	color: #FFFFFF;
}
	.rankBody .rankList a
	{

	}

	.rankBody .rankList li
	{
		margin-bottom: 20px;
	}

		.rankBody .rankList li .textBox
		{
			background-color: #343434;
			padding:2% 0 2% 3%;
			box-sizing: border-box;
		}

		.rankBody .rankList li .imgArea
		{
			position: relative;
		}
			.rankBody .rankList li .imgArea p
			{
				position: absolute;
				top:-2%;
				left: 3%;
				background: url("../img/ico_rank.png") no-repeat;
				background-size: 100% 100%;
				box-sizing: border-box;
				font-weight: bold;
			}
			.rankBody .rankList li .imgArea .rankNewBox
			{
				position: absolute;
				top:-2%;
				left: 86%;
				width: 15%;
			}
			.rankBody .rankList li .imgArea .rankPickupBox
			{
				position: absolute;
				top:-2%;
				left: 86%;
				width: 15%;
			}



			@media only screen and (orientation : portrait)
			{
				/*縦向きの際に適用*/

				.rankBody .rankList li
				{
					border-bottom: 1px #C9CBD0 solid;
				}


				.rankBody .rankList li .imgArea p
				{
					width:30px;
					height:30px;
				}
				.rankBody .rankList li .imgArea p span.tenUnder
				{
					position:absolute;
					top:0%;
					left:10%;
					font-size: 18px;
					font-weight: bold;
				}
				.rankBody .rankList li .imgArea p span.rank
				{
					position:absolute;
					top:30%;
					left:58%;
					font-size: 10px;
					font-weight: bold;
				}

				.rankBody .rankList li .imgArea p span.tenOver
				{
					position:absolute;
					top:20%;
					left:5%;
					font-size:11px;
					font-weight: bold;
					display: inline-block;
					-moz-transform:    scale( 1, 1.6 );  /* Firefox */
					-webkit-transform: scale( 1, 1.6 );  /* Chrome,Safari */
					-o-transform:      scale( 1, 1.6 );  /* Opera */
					-ms-transform:     scale( 1, 1.6 );  /* IE */
					transform:         scale( 1, 1.6 );  /* CSS3 */
				}

			}

			@media only screen and (orientation : landscape)
			{
				/*横向きの際に適用*/
				.rankBody .rankList li
				{
					border-bottom: 2px #C9CBD0 solid;
				}

				.rankBody .rankList li .imgArea p
				{
					width:59px;
					height:61px;
				}
				.rankBody .rankList li .imgArea p span.tenUnder
				{
					position:absolute;
					top:0%;
					left:15%;
					font-size: 37px;
				}
				.rankBody .rankList li .imgArea p span.rank
				{
					position:absolute;
					top:28%;
					left:58%;
					font-size: 21px;
					font-weight: bold;
				}
				.rankBody .rankList li .imgArea p span.tenOver
				{
					position:absolute;
					top:14%;
					left:5%;
					font-size: 25px;
					display: inline-block;
					-moz-transform:    scale( 1, 1.6 );  /* Firefox */
					-webkit-transform: scale( 1, 1.6 );  /* Chrome,Safari */
					-o-transform:      scale( 1, 1.6 );  /* Opera */
					-ms-transform:     scale( 1, 1.6 );  /* IE */
					transform:         scale( 1, 1.6 );  /* CSS3 */
				}

			}


		.rankBody .rankList li .tenBox
		{
			/*background-color: #373737;*/

			background: -moz-linear-gradient(top, #E7E7E9, #DBDDE0);/* Firefox用 */
			background: -webkit-gradient(linear, left top, left bottom, from(#E7E7E9), to(#DBDDE0));/* Safari,Google Chrome用 */
			padding: 3% 2.5% 3% 2.5%;
		}

		.rankBody .rankList li .mainText
		{
			font-size: 120%;
			color: #404142;
		}

		.rankBody .rankList li .subText
		{
			color: #404142;
			font-size: 70%;
		}

		.rankBody .nextBtn
		{
			width: 67%;
			margin: 2% auto 0 auto;
			cursor: pointer;
		}
		.backBtn
		{
			cursor: pointer;
		}


	.rankBottomArea
	{
		background-color: #E4E4E4;
	}
	.rankBottom
	{
		width: 90%;
		margin: 0 auto 0 auto;
		padding: 5% 0 7% 0;
	}


/********** ローディングアニメーション CSS3 **********/

.loadingBox
{
	height: 20%;
	padding-top: 10%;
	padding-bottom: 10%;
}


#floatingBarsG
{
	position:relative;
	width:30px;
	height:37px;
	margin: 0 auto 0 auto;
}

.blockG{
position:absolute;
background-color:#FFFFFF;
width:5px;
height:12px;
-moz-border-radius:4px 4px 0 0;
-moz-transform:scale(0.4);
-moz-animation-name:fadeG;
-moz-animation-duration:0.72s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:4px 4px 0 0;
-webkit-transform:scale(0.4);
-webkit-animation-name:fadeG;
-webkit-animation-duration:0.72s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:4px 4px 0 0;
-ms-transform:scale(0.4);
-ms-animation-name:fadeG;
-ms-animation-duration:0.72s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:4px 4px 0 0;
-o-transform:scale(0.4);
-o-animation-name:fadeG;
-o-animation-duration:0.72s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:4px 4px 0 0;
transform:scale(0.4);
animation-name:fadeG;
animation-duration:0.72s;
animation-iteration-count:infinite;
animation-direction:linear;
}

#rotateG_01{
left:0;
top:13px;
-moz-animation-delay:0.27s;
-moz-transform:rotate(-90deg);
-webkit-animation-delay:0.27s;
-webkit-transform:rotate(-90deg);
-ms-animation-delay:0.27s;
-ms-transform:rotate(-90deg);
-o-animation-delay:0.27s;
-o-transform:rotate(-90deg);
animation-delay:0.27s;
transform:rotate(-90deg);
}

#rotateG_02{
left:4px;
top:5px;
-moz-animation-delay:0.36s;
-moz-transform:rotate(-45deg);
-webkit-animation-delay:0.36s;
-webkit-transform:rotate(-45deg);
-ms-animation-delay:0.36s;
-ms-transform:rotate(-45deg);
-o-animation-delay:0.36s;
-o-transform:rotate(-45deg);
animation-delay:0.36s;
transform:rotate(-45deg);
}

#rotateG_03{
left:13px;
top:1px;
-moz-animation-delay:0.45s;
-moz-transform:rotate(0deg);
-webkit-animation-delay:0.45s;
-webkit-transform:rotate(0deg);
-ms-animation-delay:0.45s;
-ms-transform:rotate(0deg);
-o-animation-delay:0.45s;
-o-transform:rotate(0deg);
animation-delay:0.45s;
transform:rotate(0deg);
}

#rotateG_04{
right:4px;
top:5px;
-moz-animation-delay:0.54s;
-moz-transform:rotate(45deg);
-webkit-animation-delay:0.54s;
-webkit-transform:rotate(45deg);
-ms-animation-delay:0.54s;
-ms-transform:rotate(45deg);
-o-animation-delay:0.54s;
-o-transform:rotate(45deg);
animation-delay:0.54s;
transform:rotate(45deg);
}

#rotateG_05{
right:0;
top:13px;
-moz-animation-delay:0.63s;
-moz-transform:rotate(90deg);
-webkit-animation-delay:0.63s;
-webkit-transform:rotate(90deg);
-ms-animation-delay:0.63s;
-ms-transform:rotate(90deg);
-o-animation-delay:0.63s;
-o-transform:rotate(90deg);
animation-delay:0.63s;
transform:rotate(90deg);
}

#rotateG_06{
right:4px;
bottom:3px;
-moz-animation-delay:0.72s;
-moz-transform:rotate(135deg);
-webkit-animation-delay:0.72s;
-webkit-transform:rotate(135deg);
-ms-animation-delay:0.72s;
-ms-transform:rotate(135deg);
-o-animation-delay:0.72s;
-o-transform:rotate(135deg);
animation-delay:0.72s;
transform:rotate(135deg);
}

#rotateG_07{
bottom:0;
left:13px;
-moz-animation-delay:0.8099999999999999s;
-moz-transform:rotate(180deg);
-webkit-animation-delay:0.8099999999999999s;
-webkit-transform:rotate(180deg);
-ms-animation-delay:0.8099999999999999s;
-ms-transform:rotate(180deg);
-o-animation-delay:0.8099999999999999s;
-o-transform:rotate(180deg);
animation-delay:0.8099999999999999s;
transform:rotate(180deg);
}

#rotateG_08{
left:4px;
bottom:3px;
-moz-animation-delay:0.9s;
-moz-transform:rotate(-135deg);
-webkit-animation-delay:0.9s;
-webkit-transform:rotate(-135deg);
-ms-animation-delay:0.9s;
-ms-transform:rotate(-135deg);
-o-animation-delay:0.9s;
-o-transform:rotate(-135deg);
animation-delay:0.9s;
transform:rotate(-135deg);
}

@-moz-keyframes fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@-webkit-keyframes fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@-ms-keyframes fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@-o-keyframes fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}

@keyframes fadeG{
0%{
background-color:#000000}

100%{
background-color:#FFFFFF}

}


/********** detailBox **********/
#detailBox
{
	position: relative;
}

	#detailBox .closeBtnBox
	{
		position: absolute;
		top:1.3%;
		left: 88.5%;
		width: 10%;
	}

	@media only screen and (orientation : portrait)
	{
		/*縦向きの際に適用*/
		#detailBox .twitterBtnBox
		{
			position: absolute;
			top:82.8%;
			left: 51.9%;
			width: 13%;
		}
		#detailBox .facebookBtnBox
		{
			position: absolute;
			top:82.8%;
			left: 36%;
			width: 13%;
		}
	}

	@media only screen and (orientation : landscape)
	{
		/*横向きの際に適用*/
		#detailBox .twitterBtnBox
		{
			position: absolute;
			top:82.8%;
			left: 51.9%;
			width: 12.6%;
		}
		#detailBox .facebookBtnBox
		{
			position: absolute;
			top:82.8%;
			left: 36%;
			width: 12.6%;
		}
	}

/********** メンテナンス **********/
.viewportOuterMente{
	width: 100%;
	background-color: #000000;
}
	.viewportOuterMente .viewportMente
	{
		background-color: #DBDDE0;
	}

	@media only screen and (orientation : portrait)
	{
		/*縦向きの際に適用*/
		.viewportOuterMente .viewportMente
		{
			padding-top: 15%;
			padding-bottom: 15%;
		}

		.viewportOuterMente .viewportMente #floatingMente
		{
			width: 70%;
			margin: 0 auto 0 auto;
		}
	}

	@media only screen and (orientation : landscape)
	{
		/*横向きの際に適用*/
		.viewportOuterMente .viewportMente
		{
			padding-top: 15%;
			padding-bottom: 15%;
		}

		.viewportOuterMente .viewportMente #floatingMente
		{
			width: 70%;
			margin: 0 auto 0 auto;
		}
	}

/* clearfix
------------------------------------------------------------*/
.clf:before,
.clf:after{content:"";display:table;}
.clf:after{clear:both;}



.yokochoBtn
{
	margin: 0 auto 20px auto;
	width: 90%;
}