html{margin:0; padding:0; font-size:12px; font-family:"游ゴシック", Verdana, Osaka, sans-serif;}

h1{margin:1em auto; text-align:center;}
h2, h3{margin:.5rem auto; text-align:center;}
h4{margin:.5em auto; padding:0 1em; border-style:solid; border-width:0 0 1px .5em; border-color:black;}
ul{padding-left:2em;}

#contents{position:relative; margin:0 auto; width:100%;}
#contact{width:100%; text-align:center;}

#changeModeToPasswordList,
#changeModeToDevilSearch{display:block; margin:1rem auto;}

#sourceDevilSearch{display:block;}
#devilPasswordList{display:none;}

#searchSetting,
#enumSetting{width:100%;}
.mode{display:flex; flex-wrap:wrap; justify-content:space-between;}
.input-parts{display:block; margin:.5em 0; width:100%; box-sizing: border-box; font-size:large;}
.search-type,
.enum-type{padding:.5rem; width:100%; box-sizing:border-box; text-align:center;}
.searchByList{background-color:mistyrose;}
.searchByName{background-color:lightcyan;}
.searchBySkill{background-color:wheat;}
.searchOptions{width:100%; background-color:palegreen; text-align: center;}
.enumByRaceFrame{background-color:mistyrose;}
.enumByLvFrame{background-color:lightcyan;}

#result{margin-top:1rem;}

#devilData{width: 100%; margin:1rem auto; display:none;}
#devilData span.warning{color:red;}

#devilBasicData{display: flex; flex-direction: row;}
#devilBasicData>div {display: inline-block;}
#devilDetailData{display: flex; flex-direction: column; justify-content: space-between;}

#devilLv{flex: 1 1 2em;}
#devilRace{flex: 1 1 2em;}
#devilName{flex: 5 1 0%;}
#devilAttribute{flex: 1 1 6em; text-align:center;}

#devilParam,
#devilResistant{margin:.5em auto; padding:0;}
#devilParam>div,
#devilResistant>div {display:inline-block; border:solid 1px gray; text-align:center;}
#devilParam span,
#devilResistant span{width:32px; height:32px; display:inline-block; background-color:black; color:white;}

#devilNotes{margin:1rem 0;}
#devilNotes dt{font-weight:bold; font-size:small;}
#devilNotes dd{padding-left:2em;}

#searchAllDevil{width:100%; line-height: 2em;}

#passwordList{width:100%;}
#passwordList th{padding: 0 .5rem; background-color: lightgray;}
#passwordList td{padding: 0 .5rem;}
#passwordList tr{background-color: whitesmoke;}
#passwordList tr:hover{background-color: pink;}

.warning{color:red;}
.law{display:inline; color:blue;}
.chaos{display:inline; color:red;}
.neutral{display:inline; color:black;}
.self{display:inline; font-weight:bold;}

.searchOption{font-size:large;}

.linkName{display:inline; cursor:pointer;}
.linkName:hover{text-decoration:underline;}

.password{font-size:large; font-weight:bold;}
.nowrapPassword{white-space: nowrap;}

.resultGroup{width: 100%; padding-left: 2em; box-sizing:border-box;}

@media screen and (min-width: 960px) {
	html{font-size:14px;}
	ul{padding-left: 4em;}
	#contents{width: 960px;}
	.search-type{width:calc(100% / 3);}
	.enum-type{width:calc(100% / 2);}
	#devilData{width: 640px;}
	#devilDetailData{display: flex; flex-direction: row;}
	#devilNotes dd{padding-left:4em;}
	.resultGroup{padding-left: 8em;}
}