@charset "utf-8"; 

/* =======================================
	Top_sp CSS
========================================== */

/*スライダー表示規制*/
.pc_only{
    display:none;
}

/* ビジュアル背景 */
#visual {
}

/* ビジュアルインナー */
#visualInner {
}

/* 左・中央・右カラム */
#topL {
	width: 90%;
	margin: 20px auto 0;
}
#topC {
	width: 90%;
	margin: 0 auto;
}
#topR {
	width: 90%;
	margin: 0 auto;
}

.nodisp_sp {
	display: none;
}

/* 左カラム：
------------------------------ */
/* twitterタイムライン */
.twitter {
	display: none;
}

/* ピックアップ */
.pickup {
	margin: 0 0 20px 0;
}
.pickup img {
	width: 100%;
	height: auto;
}

/* facebookタイムライン */
.facebook {
	display: none;
}
.facebook div {
	width: 100%;
}

/* 中央カラム：
------------------------------ */
/* ランキング */
#rankingTtl {
	/* background: url(../../img_top/ranking_sp.jpg) no-repeat 10px 4px #fff; */
	padding: 0px 0 10px 0px;
	/* border: solid #CCC; */
	border-width: 4px 4px 0 4px;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.0;
	font-family: あおぞら明朝 Medium;
}

#ranking {
	/* background: #EEE; */
	margin-bottom: 20px;
	/* border: solid #CCC; */
	border-width: 0 4px 4px 4px;
	width: 110%;
	margin-left: -5%;
        font-family: あおぞら明朝 Medium;
}

.h3Ranking {
	margin: 0 auto;
    width: 90%;
	font-size: 16px;
	font-weight: bold;
	padding: 0 0 0 20px;
	background: url(../../img/arrowPurple2.jpg) no-repeat 10px 10px;
	border-bottom: 1px dotted #666666;
}

.rank1 {
	width: 30%;
	float: left;
	padding: 10px 0 15px 3%;
	text-align: center;
}
.rank1 h4 {
	color: #D80000;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.0;
}
.rank1 h4 span {
	font-size: 20px;
}
.rank2 {
	width: 30%;
	float: left;
	padding: 10px 2% 15px;
	text-align: center;
}
.rank2 h4 {
	color: #D86C00;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.0;
}
.rank2 h4 span {
	font-size: 20px;
}
.rank3 {
	width: 30%;
	float: left;
	padding: 10px 3% 15px 0;
	text-align: center;
}
.rank3 h4 {
	color: #A1A400;
	font-size: 15px;
	font-weight: bold;
	line-height: 1.0;
}
.rank3 h4 span {
	font-size: 20px;
}
#ranking img.cast {
	width: 100%;
	height: auto;
	border: 1px solid #CCC;
	margin: 4px 0;
}

/* 中央カラム：バナー */
.centerbanner img {
	width: 100%;
	height: auto;
	margin: 0 0 20px 0;
}

.twitter_sp {
	width: 100%;
	margin: 0 0 20px 0;
}

/* 右カラム：
------------------------------ */
/* 右カラム：バナー */
#topR img {
	width: 100%;
	height: auto;
	margin: 0 0 20px 0;
}

.pano {
	margin: -25px 0 20px 0;
}

/* 右カラム：はじめてのお客様へ */
.newCustomer img {
	width: 100%;
}

/* スマホ用facebook */
.facebook_sp {
	width: 100%;
	margin: 0 auto 20px;
}

.fb-page{
	width: 100%;}

#sp_img {
	width:100%;
}

.rightbanner {
display:none;	
	}

/*タブ切り替えスタイル*/

.tab li{
  width: calc(45%);
  margin: 5px;
  height: 50px;
  padding-top: 13px;
  border-bottom: 3px solid #666666;
  background-color: #fff;
  line-height: 20px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}

.area ul {
  display: none;
}
.area ul.show {
  display: block;
}

.tab li.active {
    opacity: 0.75;
    background-color: #565656;
    color: #fff;
    border-bottom: 3px solid #E0E0E0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.opacitymonth {
	opacity: 0.15;
    position: absolute;
    font-size: 60px;
    right: 35px;
    top: 5px;
    letter-spacing: -10px;
}

#lastmonth_sales {
	margin: 0 auto;
}

.rank1 {
	 width: calc(30%);
}

.rank2 {
	 width: calc(30%);
}

.rank3 {
	 width: calc(30%);
}