/**************************************************
秋コレポイントシステム用 akicolle_point.css
ver. 2020.08.23
**************************************************/

/** ポイント表示枠 *******************************/

div.colle_point {
	display: block;
	margin: 0;
	text-align: center;
}


/** ブログポイント表示 ***************************/

p#blog_point {
	margin: 0em;
}
p#blog_point span{
	font-size: xx-large;
	font-weight: bold;
}


/** 残りコレポイント表示 *************************/

p#left_point {
	margin: 0em;
	font-size: large;
}

p#left_point span{
	font-weight: bold;
}



/** ボタン ***************************************/

div.colle_button {
	width: auto;
	margin: 0 auto;
}

ul.colle_btn_list {
	display: flex;
	justify-content: center;
	margin: 1em auto;
	padding-left: 0;
}

li.btn_post {
	display: block;
	height: 30px;
	width: 90px;
	margin: 0 0.5em;
	padding: 0;
}

li.btn_post button {
	margin: 0;
	height: 30px;
	width: 90px;
	font-size: normal;
	font-weight: bold;
	border-radius: 15px;
	text-align: center;
	cursor :pointer;
	outline: none;
}
li.btn_post button.btn_dummy {
	background-color: #888;
	border: 1px solid #888;
	color: #000;
}

/* 1番目のボタン */
li.btn_post button#colle_btn_a {
	background-color: #f00;
	border: 1px solid #f00;
	color: #fff;
}
li.btn_post button#dummy_btn_a {
	display :none;
}

/* 2番目のボタン */
li.btn_post button#colle_btn_b {
	background-color: #f90;
	border: 1px solid #f90;
	color: #000;
}
li.btn_post button#dummy_btn_b {
	display :none;
}

/* 3番目のボタン */
li.btn_post button#colle_btn_c {
	background-color: #ff0;
	border: 1px solid #ff0;
	color: #000;
}
li.btn_post button#dummy_btn_c {
	display :none;
}

/* 4番目のボタン */
li.btn_post button#colle_btn_d {
	background-color: #0f0;
	border: 1px solid #0f0;
	color: #000;
}
li.btn_post button#dummy_btn_d {
	display :none;
}

/* 5番目のボタン */
li.btn_post button#colle_btn_e {
	background-color: #00f;
	border: 1px solid #00f;
	color: #fff;
}
li.btn_post button#dummy_btn_e {
	display :none;
}

/* 使えないボタン */
li.btn_post button#colle_btn_z {
	background-color: #888;
	border: 1px solid #888;
	color: #fff;
}
li.btn_post button#dummy_btn_z {
	display :none;
}

/* ボタンを押し続けている間 */
li.btn_post button.btn_colle:active {
	background-color: #888;
}

/* loading */
li.btn_post span.load_colle {
	display: none;
	margin: 0 30px;
	height: 30px;
	width: 30px;
}


/** スマホ ***************************************/

@media screen and (max-width: 760px) {

	ul.colle_btn_list {
		flex-wrap: wrap;
	}

	ul.colle_btn_list {
		margin: 0.5em auto;
	}

	li.btn_post {
		padding: 0.5em 0;
	}

}


/** END ******************************************/