/* スケジュールサイドリスト */
/* 月 */
.monthList {
	position: fixed;
    top: 100px;
    right: 0%;
    display: block;
}

/* 制御 */
.iconList {
	position: fixed;
    bottom: 30px;
    right: 0%;
    display: block;
}

/* メインボタン */
.mainBtn {
	position		: relative;
	width			: 40px;
	height			: 40px;
	box-sizing		: border-box;
	background		: #333;
	border-radius	: 10%;
	cursor			: pointer;
}
.mainBtn:before {
	position		: absolute;
	content			:'';
	width			: 85%;
	height			: 85%;
	top				: 50%;
	left			: 50%;
	border			: 2px solid #000;
	border-radius	: 10%;
	-webkit-transform:translateX(-50%)translateY(-50%);
	   -moz-transform:translateX(-50%)translateY(-50%);
	        transform:translateX(-50%)translateY(-50%);
}
.mainBtn:after {
	position		: absolute;
	content			:'';
	width			: 75%;
	height			: 75%;
	top				: 50%;
	left			: 50%;
	border			: 2px solid #555;
	border-radius	: 10%;
	-webkit-transform:translateX(-50%)translateY(-50%);
	   -moz-transform:translateX(-50%)translateY(-50%);
	        transform:translateX(-50%)translateY(-50%);
}

/* 背景色変更用の追加クラスたち */
.mainBtn.favo:after {
	background: #4a4a4a;
}

.favoCount {
	color: #eee;
}

/* 追加：中のアイコンを前面に出すための設定 */
.mainBtn > * {
	position: relative;
	z-index: 1;
}

/* サイドボタン */
.sideBtn {
	position		: relative;
	width			: 40px;
	height			: 40px;
	box-sizing		: border-box;
	background		: #333;
	border-radius	: 10% 0% 0% 10%;
	opacity			: 0.7;
	cursor			: pointer;
}
.sideBtn:before {
	position		: absolute;
	content			:'';
	width			: 85%;
	height			: 85%;
	top				: 50%;
	left			: 50%;
	border-top		: 2px solid #000;
	border-bottom	: 2px solid #000;
	border-left		: 2px solid #000;
	border-radius	: 10% 0% 0% 10%;
	-webkit-transform:translateX(-50%)translateY(-50%);
	   -moz-transform:translateX(-50%)translateY(-50%);
	        transform:translateX(-50%)translateY(-50%);
}
.sideBtn:after {
	position		: absolute;
	content			:'';
	width			: 75%;
	height			: 75%;
	top				: 50%;
	left			: 50%;
	border			: 2px solid #555;
	border-radius	: 10%;
	-webkit-transform:translateX(-50%)translateY(-50%);
	   -moz-transform:translateX(-50%)translateY(-50%);
	        transform:translateX(-50%)translateY(-50%);
	z-index			: 0;
}

/* アイコン縦スペース */
.iconSpace {
	height: 3px;
}

/* アイコンポジション指定 */
.iconPosi {
	position		: absolute;
	top				: 50%;
	left			: 50%;
	-webkit-transform:translateX(-50%)translateY(-50%);
	   -moz-transform:translateX(-50%)translateY(-50%);
	        transform:translateX(-50%)translateY(-50%);
}

/* 円アイコン */
.circleIcon {
	width			: 75%;
	height			: 75%;
	border-radius	: 50%;
	background		: #000;
}

/* 虫眼鏡アイコン */
.searchIcon {
	width			: 40%;
	height			: 40%;
	top				: 46%;
	left			: 46%;
	border			: solid 3px #ccc;
	border-radius	: 10px;
}
.searchIcon::before {
	position		: absolute;
	content			: '';
	width			: 75%;
	height			: 25%;
	top				: 100%;
	left			: 80%;
	background-color: #ccc;
	border-radius	: 3px;
	-webkit-transform:rotate(45deg);
	   -moz-transform:rotate(45deg);
	        transform:rotate(45deg);
}

/* 虫眼鏡チェックアイコン */
.checkIcon {
	position		: absolute;
	width			: 20%;
	height			: 10%;
	top				: 35%;
	left			: 33%;
	border-bottom	: solid 3px #ccc;
	border-left		: solid 3px #ccc;
	border-radius	: 3px;
	-webkit-transform:rotate(-45deg);
	   -moz-transform:rotate(-45deg);
	        transform:rotate(-45deg);
}

/* 閉じるアイコン */
.closeIcon {
	width	: 70%;
	height	: 70%;
	color	: #ccc;
}
.closeIcon::before {
	position		: absolute;
	content			: '';
	width			: 100%;
	height			: 15%;
	top				: 45%;
	background-color: currentColor;
	border-radius	: 3px;
	-webkit-transform:rotate(-45deg);
	   -moz-transform:rotate(-45deg);
	        transform:rotate(-45deg);
}
.closeIcon::after {
	position		: absolute;
	content			: '';
	width			: 100%;
	height			: 15%;
	top				: 45%;
	background-color: currentColor;
	border-radius	: 3px;
	-webkit-transform: rotate(45deg);
	        transform: rotate(45deg);
}

/* メニューアイコン */
.menuIcon
,.menuIcon:before
,.menuIcon:after {
	position		: absolute;
	content			: '';
	display			: block;
	width			: 55%;
	height			: 9%;
	border-radius	: 3px;
	background		: #ccc;
	border-radius	: 3px;
}
.menuIcon:before {
	top		: 220%;
	width	: 100%;
	height	: 100%;
}
.menuIcon:after {
	top		: -220%;
	width	: 100%;
	height	: 100%;
}

/* 最初へアイコン */
.toStartIcon {
	width	: 30%;
	height	: 30%;
	color	: #ccc;
}
.toStartIcon::before {
	position		: absolute;
	content			: '';
	width			: 100%;
	height			: 100%;
	top				: 10%;
	left			: -10%;
	border-top: solid 3px currentColor;
	border-right: solid 3px currentColor;
	border-radius: 3px;
	-webkit-transform:rotate(-45deg);
	   -moz-transform:rotate(-45deg);
	        transform:rotate(-45deg);
}

/* 最後へアイコン */
.toEndIcon {
	width	: 30%;
	height	: 30%;
	color	: #ccc;
}
.toEndIcon::before {
	position		: absolute;
	content			: '';
	width			: 100%;
	height			: 100%;
	top				: -30%;
	left			: -10%;
	border-bottom: solid 3px currentColor;
	border-left: solid 3px currentColor;
	border-radius: 3px;
	-webkit-transform:rotate(-45deg);
	   -moz-transform:rotate(-45deg);
	        transform:rotate(-45deg);
}

/* 上へアイコン */
.toTopIcon {
	width	: 30%;
	height	: 30%;
	color	: #ccc;
}
.toTopIcon::before {
	position		: absolute;
	content			: '';
	width			: 100%;
	height			: 100%;
	top				: 10%;
	left			: -10%;
	border-top: solid 3px currentColor;
	border-right: solid 3px currentColor;
	border-radius: 3px;
	-webkit-transform:rotate(-45deg);
	   -moz-transform:rotate(-45deg);
	        transform:rotate(-45deg);
}

/* 下へアイコン */
.toBottomIcon {
	width	: 30%;
	height	: 30%;
	color	: #ccc;
}
.toBottomIcon::before {
	position		: absolute;
	content			: '';
	width			: 100%;
	height			: 100%;
	top				: -30%;
	left			: -10%;
	border-bottom: solid 3px currentColor;
	border-left: solid 3px currentColor;
	border-radius: 3px;
	-webkit-transform:rotate(-45deg);
	   -moz-transform:rotate(-45deg);
	        transform:rotate(-45deg);
}

/* 戻るアイコン */
.prevIcon {
	width	: 30%;
	height	: 30%;
	color	: #ccc;
}
.prevIcon::before {
	position		: absolute;
	content			: '';
	width			: 100%;
	height			: 100%;
	top				: 10%;
	right			: -30%;
	border-top: solid 3px currentColor;
	border-left: solid 3px currentColor;
	border-radius: 3px;
	-webkit-transform:rotate(-45deg);
	   -moz-transform:rotate(-45deg);
	        transform:rotate(-45deg);
}

/* 進むアイコン */
.nextIcon {
	width	: 30%;
	height	: 30%;
	color	: #ccc;
}
.nextIcon::before {
	position		: absolute;
	content			: '';
	width			: 100%;
	height			: 100%;
	top				: 10%;
	right			: 10%;
	border-right: solid 3px currentColor;
	border-bottom: solid 3px currentColor;
	border-radius: 3px;
	-webkit-transform:rotate(-45deg);
	   -moz-transform:rotate(-45deg);
	        transform:rotate(-45deg);
}

/* リンクボタン */
.linkBtn {
	position		: relative;
	width			: 20px;
	height			: 20px;
	box-sizing		: border-box;
	border-radius	: 10%;
	background		: #333;
	text-align		: right;
	cursor			: pointer;
}

/* リンクアイコン */
.linkIcon {
	width	: 70%;
	height	: 70%;
	color	: #ccc;
}
.linkIcon::before {
	position		: absolute;
	content			: '';
	width			: 100%;
	height			: 100%;
	top				: 70%;
	left			: -100%;
	border-right: solid 3px currentColor;
	border-bottom: solid 3px currentColor;
	border-radius: 3px;
	-webkit-transform:rotate(-45deg);
	   -moz-transform:rotate(-45deg);
	        transform:rotate(-45deg);
}
.linkIcon::after {
	position		: absolute;
	content			: '';
	width			: 100%;
	height			: 100%;
	top				: 70%;
	left			: -40%;
	border-right: solid 3px currentColor;
	border-bottom: solid 3px currentColor;
	border-radius: 3px;
	-webkit-transform:rotate(-45deg);
	   -moz-transform:rotate(-45deg);
	        transform:rotate(-45deg);
}

/* 透明ボタン */
.transBtn {
	position		: relative;
	width			: 30px;
	height			: 30px;
	box-sizing		: border-box;
	cursor			: pointer;
}

/* ソーシャルボタン */
.socialBtn {
	position		: relative;
	width			: 30px;
	height			: 30px;
	box-sizing		: border-box;
	border-radius	: 3px;
	cursor			: pointer;
	background		: #333;
}

/* ソーシャルアイコン */
.socialIcon {
	position		: absolute;
	top				: 50%;
	left			: 50%;
	width			: 24px;
	height			: 24px;
	content			: "";
	-webkit-transform:translateX(-50%)translateY(-50%);
	   -moz-transform:translateX(-50%)translateY(-50%);
	        transform:translateX(-50%)translateY(-50%);
}

.homeIcon {
	background		: url("../icon_imgs/home.png") no-repeat;
	background-size	: contain;
}

.blogIcon {
	background: url("../icon_imgs/blog.png") no-repeat;
	background-size	: contain;
}

.twitterIcon {
	background: url("../icon_imgs/twitter.png") no-repeat;
	background-size	: contain;
}

.musicChampIcon {
	background: url("../icon_imgs/musicChamp.png") no-repeat;
	background-size	: contain;
}

.instaIcon {
	background: url("../icon_imgs/instagram.png") no-repeat;
	background-size	: contain;
}

.youtubeIcon {
	background: url("../icon_imgs/youtube.png") no-repeat;
	background-size	: contain;
}

.facebookIcon {
	background: url("../icon_imgs/facebook.png") no-repeat;
	background-size	: contain;
}

.bigoliveIcon {
	background: url("../icon_imgs/bigolive.png") no-repeat;
	background-size	: contain;
}

.twitcastingIcon {
	background: url("../icon_imgs/twitcasting.png") no-repeat;
	background-size	: contain;
}

.loadingGearIcon {
	background: url("../icon_imgs/loadingGear.svg") no-repeat;
	background-size	: contain;
}

.btn-green{
  padding: 0.5em;
  margin: 10px 0;
  display: block;
  color: #fff !important;
  background: #fff;
  text-decoration: none;
  font-weight: bold;
  font-size:16px;
  border-radius: 3px;
  text-align:center;
  text-decoration:none !important;
}
.btn-green:before {
  content: "";
  display: inline-block;
  width: 24px;
  height: 24px;
  margin: -3px 5px 0 0;
  background: url("../icon_imgs/blog.png") no-repeat;
  background-size: contain;
  vertical-align: middle;
}