/*
	標準的な外見のイメージ チェックボックス

	使い方
	
	input と label タグを用意し、その周りを、image-checkbox クラスを持つタグで囲む。
	ボタンの大きさは、外側のタグの font-size スタイルで調整。

    <div class="image-checkbox" style="font-size:20pt">
        <input type="checkbox" id="image-checkbox-1">
        <label for="image-checkbox-1">イメージチェックボックス</label>
    </div>

	ボタン画像を変更する場合は、star1-image-checkbox を参考に、差し替え画像用のクラスを作成し、
	input タグに作成したクラスを追加する。

    <div class="image-checkbox" style="height:4em">
        <input type="checkbox" id="image-checkbox-4" class="star1-image-checkbox">
        <label for="image-checkbox-4"></label>
    </div>
*/

.image-checkbox input[type=checkbox] {
	display: none;
}
.image-checkbox input[type=checkbox] + label {
	cursor: pointer;
	display: inline-block;
	position: relative;
	padding-left: 1.3em;
	margin-right: 1em;
}
.image-checkbox input[type=checkbox] + label:before {
	content: '';
    width: 1em;
    height: 1em;
	position: absolute;
	left: 0;
	
	background-image: url(./img/ezo-unchecked.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	margin-top: 0.2em;
}
.image-checkbox input[type=checkbox]:checked + label:before {
	background-image: url(./img/ezo-checked.png);
}

/*
	星1から5 イメージ チェックボックス
*/

.star1-image-checkbox input[type=checkbox] {
	display: none;
}
.star1-image-checkbox input[type=checkbox] + label {
	cursor: pointer;
	display: inline-block;
	position: relative;
	padding-left: 4.3em;
	/* margin-right: 1em; */
    height: 2em;
}
.star1-image-checkbox input[type=checkbox] + label:before {
	content: '';
    width: 4em;
    height: 2em;
	position: absolute;
	left: 0;
	
	background-image: url(./img/star1_unchecked.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	/* margin-top: 0.2em; */
}
.star1-image-checkbox input[type=checkbox]:checked + label:before {
	background-image: url(./img/star1_checked.png);
}


.star2-image-checkbox input[type=checkbox] {
	display: none;
}
.star2-image-checkbox input[type=checkbox] + label {
	cursor: pointer;
	display: inline-block;
	position: relative;
	padding-left: 4.3em;
	/* margin-right: 1em; */
    height: 2em;
}
.star2-image-checkbox input[type=checkbox] + label:before {
	content: '';
    width: 4em;
    height: 2em;
	position: absolute;
	left: 0;
	
	background-image: url(./img/star2_unchecked.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	/* margin-top: 0.2em; */
}
.star2-image-checkbox input[type=checkbox]:checked + label:before {
	background-image: url(./img/star2_checked.png);
}


.star3-image-checkbox input[type=checkbox] {
	display: none;
}
.star3-image-checkbox input[type=checkbox] + label {
	cursor: pointer;
	display: inline-block;
	position: relative;
	padding-left: 4.3em;
	/* margin-right: 1em; */
    height: 2em;
}
.star3-image-checkbox input[type=checkbox] + label:before {
	content: '';
    width: 4em;
    height: 2em;
	position: absolute;
	left: 0;
	
	background-image: url(./img/star3_unchecked.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	/* margin-top: 0.2em; */
}
.star3-image-checkbox input[type=checkbox]:checked + label:before {
	background-image: url(./img/star3_checked.png);
}


.star4-image-checkbox input[type=checkbox] {
	display: none;
}
.star4-image-checkbox input[type=checkbox] + label {
	cursor: pointer;
	display: inline-block;
	position: relative;
	padding-left: 4.3em;
	/* margin-right: 1em; */
    height: 2em;
}
.star4-image-checkbox input[type=checkbox] + label:before {
	content: '';
    width: 4em;
    height: 2em;
	position: absolute;
	left: 0;
	
	background-image: url(./img/star4_unchecked.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	/* margin-top: 0.2em; */
}
.star4-image-checkbox input[type=checkbox]:checked + label:before {
	background-image: url(./img/star4_checked.png);
}

.star5-image-checkbox input[type=checkbox] {
	display: none;
}
.star5-image-checkbox input[type=checkbox] + label {
	cursor: pointer;
	display: inline-block;
	position: relative;
	padding-left: 4.3em;
	/* margin-right: 1em; */
    height: 2em;
}
.star5-image-checkbox input[type=checkbox] + label:before {
	content: '';
    width: 4em;
    height: 2em;
	position: absolute;
	left: 0;
	
	background-image: url(./img/star5_unchecked.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	/* margin-top: 0.2em; */
}
.star5-image-checkbox input[type=checkbox]:checked + label:before {
	background-image: url(./img/star5_checked.png);
}