/* タブレットの幅 */
@media (min-width: 576px) {
	.filter,
	.sort,
	.adjutant,
	.message,
	.tk-name,
	.informations {
		font-size: 2em;
	}
	
	#checkAllCountry,
	#uncheckAllCountry,
	#checkAllWeapon,
	#uncheckAllWeapon,
	#checkAllBirthMonth,
	#uncheckAllBirthMonth,
	#checkAllConstellation,
	#uncheckAllConstellation,
	#checkAllRace,
	#uncheckAllRace {
		font-size: 1.3em;
	}
	#submitFilter {
		font-size: 1.5em;
	}
	.label-index {
		font-size: 2em;
	}
	
	.footer-info {
		font-size: 1.4em;
	}
	.footer-info img {
		width: 40px;
		height: 40px;
	}
	input[type="radio"][value="name"]+label:before,
	input[type="radio"][value="birthday"]+label:before,
	input[type="radio"][value="country"]+label:before,
	input[type="radio"][value="race"]+label:before,
	input[type="radio"][value="layer_all"]+label:before,
	input[type="radio"][value="layer_ss"]+label:before,
	input[type="radio"][value="layer_s"]+label:before,
	input[type="radio"][value="layer_debuted"]+label:before,
	input[type="radio"][value="layer_interval"]+label:before,
	input[type="radio"][value="asc"]+label:before,
	input[type="radio"][value="desc"]+label:before {
		background-size	: 70% !important;
	}
}

/* これより上はPCの幅 */
@media (min-width: 992px) {
	.filter,
	.sort,
	.races,
	.adjutant,
	.message,
	.tk-name,
	.informations {
		font-size: 1.2em;
	}

	#checkAllCountry,
	#uncheckAllCountry,
	#checkAllWeapon,
	#uncheckAllWeapon,
	#checkAllBirthMonth,
	#uncheckAllBirthMonth,
	#checkAllConstellation,
	#uncheckAllConstellation,
	#checkAllRace,
	#uncheckAllRace {
		font-size: 1em;
	}
	#submitFilter {
		font-size: 1em;
	}
	.label-index {
		font-size: 1.5em;
	}

	.footer-info {
		font-size: 1em;
	}
	.footer-info img {
		width: 16px;
		height: 16px;
	}
	input[type="radio"][value="name"]+label:before,
	input[type="radio"][value="birthday"]+label:before,
	input[type="radio"][value="country"]+label:before,
	input[type="radio"][value="race"]+label:before,
	input[type="radio"][value="layer_all"]+label:before,
	input[type="radio"][value="layer_ss"]+label:before,
	input[type="radio"][value="layer_s"]+label:before,
	input[type="radio"][value="layer_debuted"]+label:before,
	input[type="radio"][value="layer_interval"]+label:before,
	input[type="radio"][value="asc"]+label:before,
	input[type="radio"][value="desc"]+label:before {
		background-size	: 100% !important;
	}
}

.form-check:not(.races > .form-check) {
	padding-left: 0 !important;
}

/* チェックボックスを非表示にする (「種族」を除く) */
input[type="checkbox"]:not(input[name="race"]),
input[type="radio"] {
	display: none;
}

/* 画像によるチェックのための画像領域を確保する */
/* input[type="checkbox"]:not(input[name="race"])+label:before, */
input[type="checkbox"][name="country"]+label:before,
input[type="checkbox"][name="weapon"]+label:before,
input[type="checkbox"][name="birthMonth"]+label:before,
input[type="checkbox"][name="constellation"]+label:before,
.form-check input[type="radio"]+label:before {
	content				: "";
	display				: inline-block;
	background-size		: contain;
	width				: 3em;
	height				: 3em;
	background-repeat	: no-repeat;
}

/* 各国のエンブレムを配置する */
input[type="checkbox"][id="countryStIris"]+label:before {
	background-image:	url(/static/images/emblems/StIris.png);
}
input[type="checkbox"][id="countryNishiki"]+label:before {
	background-image:	url(/static/images/emblems/Nishiki.png);
}
input[type="checkbox"][id="countryEisengrad"]+label:before {
	background-image:	url(/static/images/emblems/Eisengrad.png);
}
input[type="checkbox"][id="countryVerforet"]+label:before {
	background-image:	url(/static/images/emblems/Verforet.png);
}
input[type="checkbox"][id="countryFlamarine"]+label:before {
	background-image:	url(/static/images/emblems/Flamarine.png);
}
input[type="checkbox"][id="countryMetroStIris"]+label:before {
	background-image:	url(/static/images/emblems/MetroStIris.png);
}
input[type="checkbox"][id="countryMetroNishiki"]+label:before {
	background-image:	url(/static/images/emblems/MetroNishiki.png);
}
input[type="checkbox"][id="countryMetroEisengrad"]+label:before {
	background-image:	url(/static/images/emblems/MetroEisengrad.png);
}
input[type="checkbox"][id="countryMetroVerforet"]+label:before {
	background-image:	url(/static/images/emblems/MetroVerforet.png);
}
input[type="checkbox"][id="countryMetroFlamarine"]+label:before {
	background-image:	url(/static/images/emblems/MetroFlamarine.png);
}
input[type="checkbox"][id="countryFteraBrucke"]+label:before {
	background-image:	url(/static/images/emblems/FteraBrucke.png);
}
input[type="checkbox"][id="countryNordWeiss"]+label:before {
	background-image:	url(/static/images/emblems/NordWeiss.png);
}
input[type="checkbox"][id="countryOther"]+label:before {
	background-image:	url(/static/images/emblems/Other.png);
}

/* 武器のアイコンを配置する */
input[type="checkbox"][value="sword"]+label:before {
	background-image:	url(/static/images/weapons/sword.png);
}
input[type="checkbox"][value="axe"]+label:before {
	background-image:	url(/static/images/weapons/axe.png);
}
input[type="checkbox"][value="artifact"]+label:before {
	background-image:	url(/static/images/weapons/artifact.png);
}
input[type="checkbox"][value="fist"]+label:before {
	background-image:	url(/static/images/weapons/fist.png);
}
input[type="checkbox"][value="whip"]+label:before {
	background-image:	url(/static/images/weapons/whip.png);
}
input[type="checkbox"][value="staff"]+label:before {
	background-image:	url(/static/images/weapons/staff.png);
}
input[type="checkbox"][value="spear"]+label:before {
	background-image:	url(/static/images/weapons/spear.png);
}
input[type="checkbox"][value="bow"]+label:before {
	background-image:	url(/static/images/weapons/bow.png);
}
input[type="checkbox"][value="gun"]+label:before {
	background-image:	url(/static/images/weapons/gun.png);
}
input[type="checkbox"][value="sword"]+label:before,
input[type="checkbox"][value="axe"]+label:before,
input[type="checkbox"][value="artifact"]+label:before,
input[type="checkbox"][value="fist"]+label:before,
input[type="checkbox"][value="whip"]+label:before,
input[type="checkbox"][value="staff"]+label:before,
input[type="checkbox"][value="spear"]+label:before,
input[type="checkbox"][value="bow"]+label:before,
input[type="checkbox"][value="gun"]+label:before {
	background-size:	 80%;
	background-repeat:	 no-repeat;
	background-position: center;
}

/* 誕生月のアイコンを配置する */
input[type="checkbox"][id="birthJan"]+label:before {
	background-image:	url(/static/images/months/01.png);
}
input[type="checkbox"][id="birthFeb"]+label:before {
	background-image:	url(/static/images/months/02.png);
}
input[type="checkbox"][id="birthMar"]+label:before {
	background-image:	url(/static/images/months/03.png);
}
input[type="checkbox"][id="birthApr"]+label:before {
	background-image:	url(/static/images/months/04.png);
}
input[type="checkbox"][id="birthMay"]+label:before {
	background-image:	url(/static/images/months/05.png);
}
input[type="checkbox"][id="birthJun"]+label:before {
	background-image:	url(/static/images/months/06.png);
}
input[type="checkbox"][id="birthJul"]+label:before {
	background-image:	url(/static/images/months/07.png);
}
input[type="checkbox"][id="birthAug"]+label:before {
	background-image:	url(/static/images/months/08.png);
}
input[type="checkbox"][id="birthSep"]+label:before {
	background-image:	url(/static/images/months/09.png);
}
input[type="checkbox"][id="birthOct"]+label:before {
	background-image:	url(/static/images/months/10.png);
}
input[type="checkbox"][id="birthNov"]+label:before {
	background-image:	url(/static/images/months/11.png);
}
input[type="checkbox"][id="birthDec"]+label:before {
	background-image:	url(/static/images/months/12.png);
}
input[type="checkbox"][id="birthUnknown"]+label:before {
	background-image:	url(/static/images/months/00.png);
}

/* 星座のアイコンを配置する */
input[type="checkbox"][id="Aries"]+label:before {
	background-image:	url(/static/images/constellations/Aries.png);
}
input[type="checkbox"][id="Taurus"]+label:before {
	background-image:	url(/static/images/constellations/Taurus.png);
}
input[type="checkbox"][id="Gemini"]+label:before {
	background-image:	url(/static/images/constellations/Gemini.png);
}
input[type="checkbox"][id="Cancer"]+label:before {
	background-image:	url(/static/images/constellations/Cancer.png);
}
input[type="checkbox"][id="Leo"]+label:before {
	background-image:	url(/static/images/constellations/Leo.png);
}
input[type="checkbox"][id="Virgo"]+label:before {
	background-image:	url(/static/images/constellations/Virgo.png);
}
input[type="checkbox"][id="Libra"]+label:before {
	background-image:	url(/static/images/constellations/Libra.png);
}
input[type="checkbox"][id="Scorpius"]+label:before {
	background-image:	url(/static/images/constellations/Scorpius.png);
}
input[type="checkbox"][id="Sagittarius"]+label:before {
	background-image:	url(/static/images/constellations/Sagittarius.png);
}
input[type="checkbox"][id="Capricornus"]+label:before {
	background-image:	url(/static/images/constellations/Capricornus.png);
}
input[type="checkbox"][id="Aquarius"]+label:before {
	background-image:	url(/static/images/constellations/Aquarius.png);
}
input[type="checkbox"][id="Pisces"]+label:before {
	background-image:	url(/static/images/constellations/Pisces.png);
}
input[type="checkbox"][id="UnknownCstl"]+label:before {
	background-image:	url(/static/images/constellations/unknown.png);
}


/* ソート条件のアイコン */
input[type="radio"][value="name"]+label:before {
	background-image	: url(/static/images/icons/alphabet.png);
}
input[type="radio"][value="birthday"]+label:before {
	background-image	: url(/static/images/icons/birthday.png);
}
input[type="radio"][value="country"]+label:before {
	background-image	: url(/static/images/icons/country.png);
}
input[type="radio"][value="race"]+label:before {
	background-image	: url(/static/images/icons/race.png);
}
input[type="radio"][value="layer_all"]+label:before {
	background-image	: url(/static/images/icons/layer.png);
}
input[type="radio"][value="layer_ss"]+label:before {
	background-image	: url(/static/images/icons/layer_ss.png);
}
input[type="radio"][value="layer_s"]+label:before {
	background-image	: url(/static/images/icons/layer_s.png);
}
input[type="radio"][value="layer_debuted"]+label:before {
	background-image	: url(/static/images/icons/from_debuted.png);
}
input[type="radio"][value="layer_interval"]+label:before {
	background-image	: url(/static/images/icons/interval.png);
}

/* ソート方向のアイコン */
input[type="radio"][value="asc"]+label:before {
	background-image:	url(/static/images/icons/asc.png);
}
input[type="radio"][value="desc"]+label:before {
	background-image:	url(/static/images/icons/desc.png);
}

input[type="radio"][value="name"]+label:before,
input[type="radio"][value="birthday"]+label:before,
input[type="radio"][value="country"]+label:before,
input[type="radio"][value="race"]+label:before,
input[type="radio"][value="layer_all"]+label:before,
input[type="radio"][value="layer_ss"]+label:before,
input[type="radio"][value="layer_s"]+label:before,
input[type="radio"][value="layer_debuted"]+label:before,
input[type="radio"][value="layer_interval"]+label:before,
input[type="radio"][value="asc"]+label:before,
input[type="radio"][value="desc"]+label:before {
	background-repeat	: no-repeat;
	background-position	: center;
}

/* 選択時に、画像に枠を表示する */
input[type="checkbox"]:not(:checked)+label::before{
	opacity: 0.3;
	filter: grayscale(100%);
}
input[type="radio"]:checked+label::before{
	border: 2px solid #FF0000;
}

.filter summary,
.sort summary {
	display			: flex;
	justify-content	: space-between;
	align-items		: center;
	position		: relative;
	padding			: 0.5em 1em;
	border-radius	: 5px;
	color			: white;
	font-weight		: bold;
	cursor			: pointer;
}
.filter summary {
	background		: #0033CC;
}
.sort summary {
	background		: #009933;
}
.adjutant {
	text-align: center;
}
.adjutant img {
	width:  80%;
	height: auto;
}

/* 副官のコメントをフキダシ調にする */
.message {
	position: relative;
	display: inline-block;
	padding: 7px 10px;
	min-width: 120px;
	max-width: 100%;
	color: #555;
	background: #ffd2f4;
}
.message::before {
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
	margin-top: -15px;
	border: 15px solid transparent;
	border-right: 15px solid #ffd2f4;
}

.n-tks {
	font-size: 2em;
}

/* フィルター条件 全選択／全解除 ボタンの横幅指定 */
#checkAllCountry,
#uncheckAllCountry,
#checkAllWeapon,
#uncheckAllWeapon,
#checkAllBirthMonth,
#uncheckAllBirthMonth,
#checkAllConstellation,
#uncheckAllConstellation,
#checkAllRace,
#uncheckAllRace {
	width: 5em;
}

.hr-deco {
	/* 線の上下の空間 */
	/* margin: 1em auto; */
	/* 要素がはみ出しても表示される */
	overflow: visible;
}

.hr-deco::after {
	position: relative;
	/* 文字を線の中央に持ってくる */
	top: -1rem;
	padding: 0 1rem;
	background: #ffffff;
	color: #0000FF;
	line-height: 2rem;
}

.hr-head-and-search::after {
	content: "名前で検索";
}

.hr-search-and-filter::after {
	content: "条件検索";
}

.tk {
	position: relative;
}

.bubble {
	display: none;
	position: absolute;
	margin-top:   10px !important;
	padding: 2px 5px;
	background: #0000CC;
	color: #FFFFFF;
	white-space: nowrap;
	overflow: visible;
	font-size: 1.2em;
	font-weight: bold;
	width: max-content;	/* 幅を、文字列の長さに合わせる */
	text-align: center;
	margin: auto;
	z-index: 2;
}

/* マウスオーバーで画像を拡大する transitionを指定するとアニメーションになる */
.tk-circle img:hover{
	transform:scale(1.4, 1.4);
	transition:0.1s all;
}
/* マウスが離れた時のアニメーション表示 */
.tk-circle img{
	transform:scale(1.0, 1.0);
	transition:0.1s all;
}
/* マウスが乗ったまるアイコンに隣接しているbubbleを表示させる */
.tk:hover + .bubble{
	display: inline-block;
}