@import url('/fonts.css');

body {
	width: clamp(500px, 99%, 1000px);
	margin: auto;
	padding: 5px 0px;
	font-family: "Noto Sans JP", "Noto Sans TC", sans-serif;
}

.center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.preface {
	border: 2px dotted black;
	text-align: center;
	color: red;
	width: 50%
}

.grid_table > div {
	display: flex;
	align-items: center;
	justify-content: center;
}

span {
	vertical-align: middle;
}

img {
	vertical-align: middle;
}

.item-id {
	color: transparent;
}

.item-id + table {
	border: 1px solid black;
}

table {
	border-collapse: collapse;
	table-layout: fixed;
	border-style: hidden;
}

table:is(.goods, .pluscan), .pet_skill > table, .upgradeStatus {
	table-layout: auto;
}

td, th {
	border: 1px solid black;
	padding: 0px;
	text-align: center; 
	vertical-align: middle;
}

.item_icon {
	padding: 0px;
	width: 96px;
	height: 96px;
}

.item_icon img:nth-child(1) {
	width: 96px;
	height: 96px;
}

.item_icon2 {
	position: relative;
}

.item_icon2  > img:nth-child(1) {
	position: relative;  
	z-index: 1;
}

.item_icon2  > img:nth-child(2) {
	position: absolute;  
	z-index: 2; 
	left: 0; 
	bottom: 0;
}

.item_name a {
	color: black;
	text-decoration: none;
}

.item_skill_icon, .item_skill_icon img {
	width: 25px;
}

.character .item_name div {
	display: inline;
}

.character .item_name div:after {
	content: "";
	display: block;
}

table:not(.weapon) .equipment_effect {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	place-items: center;
}

table.goods .equipment_effect {
	grid-template-columns: 1fr 1fr;
}

.equipment_effect img {
	width: 20px;
}

.equipment_effect > div, .attrIcon {
	position: relative;
}

.searchable_text {
	position: absolute;
	color: transparent;
	font-size: 200vw;
	word-break: break-all;
	line-height: 0px;
	overflow: hidden;
	width: 100%;
	height: 100%;
	top: 0;
	z-index: -1;
}

.special_material, .special_material img {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center; 
}

.pet_type {
	writing-mode: vertical-lr;
	text-orientation: upright;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center; 
	width: 100%;

}

 .pet_skill_val:empty {
	display: none;
 }
 
.add_area, .pet_status, .pet_skill, .weap_leader {
	padding: 0px;
}

.pet_skill_text {
	text-align: left; 
	padding-left: 5px;
}

.pet_evo {
	display: grid;
	grid-template-columns: 96px auto 96px;
	place-items: center;
}

.pet_evo_material {
	display: flex;
	align-items: center;
	flex-direction: column;
	text-align: center;
	outline: 1px solid black;
	padding: 10px;
}

.book_Result {
	display: grid;
	grid-template-columns: 1fr 10% 1fr;
	place-items: center;
	padding: 5px 0;
}

.book_Result > div {
	flex-direction: column;
}

.book_GreatSuccess_odds {
	text-align: center;
	outline: 1px solid black;
	padding: 5px;
}

.book_GreatSuccess_odds:empty {
	visibility:hidden;
}

.book_Material {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(calc(100% / 12), 1fr));
	place-items: center;
	padding: 0px;
	width: 100%;
}

.book_Material:not(:has(:nth-child(4))) {
	grid-template-columns: repeat(4, 1fr);
}

.book_Material > div {
	flex-direction: column;
	padding: 10px 0;
}

.book_Material_item {
	flex-direction: column;
}

.book_Material_item > img {
	width: 80%;
}
/*
.book_Material_item > a {
	line-height: 0.8;
	padding-top: 5px;
}*/

.book_Material_num {
	position: absolute;  
	z-index: 2; 
	right: calc(10% + 2px); 
	bottom: calc(10px + 2px);
	line-height: 1em;
	font-size: 1.3em;
	font-family: "Rubik";
	color: white;
	-webkit-text-stroke: 2px black;
}

.tooltip_popup {
	position: relative;
}

.tooltip_content {
	display: none;
	position: absolute;
	z-index: 999;
}

.tooltip_popup:hover .tooltip_content {
	display: block;
}

.book_Material_name, .special_material_name, .pet_evo_material_name, .dress_dress_dropName {
	top: -5px;
	left: 50%;
	transform: translate(-50%, -50%);
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 0px 5px;
	border-radius: 5px;
	white-space: nowrap;
}

.special_material_name {
	top: -15px;
}

.characteristic_info {
	font-size: 0.9em;
	bottom: 2em;
	left: 0px;
	background: gray;
	border: 1px solid black;
	color: white;
	padding: 0px 3px;
	max-width: 25vw;
	width: max-content;
	border-radius: 5px;
}

:is(.characteristic_release, .characteristic_plus11) .characteristic_info {
	right: 0px;
	left: auto;
}

.book_Result, .book_Name {
	position: relative;
}
			
.book_GreatSuccess_branch {
	visibility : hidden;
	display: grid;
	grid-template-columns: 32px 1fr 1fr 1fr;
	align-items: center;
	position: absolute;
	bottom: 5px;
	width: 250px;
	height: 96px;
}

.book_GreatSuccess_branch img {
	width: 25px;
}

.book_GreatSuccess_branch_yes:hover .book_GreatSuccess_branch {
	visibility : visible;
}

.book_GreatSuccess_branch_yes:hover > img {
	visibility : hidden;
}

.book_Cost {
	position: absolute;
	right: 0px;
	bottom: 0px;
	padding: 2px;
	margin: 2px;
	display: flex;
	border: 1px solid black;
	align-items: center;
	justify-content: center;
}

.book_Cost img {
	height: 1em;
}

.job_name {
	font-weight: bold;
}

.skill_description, .characteristic_area {
	text-align: left;
	padding: 5px;
}

.equitUpPowVal {
	font-family: "Arial";
}

.characteristic_container {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
}

.characteristic {
	display: flex;
	align-items: center;
	border: 1px solid;
	border-radius: 1em;
	padding: 0px 0.5em;
	flex: 0 auto;
}

.characteristic_release {
	display: grid;
	grid-template-columns: 1fr 1fr;
	place-items: center;
	border: 1px solid black;
	margin-left: auto;
	width: 20%;
	min-width: 300px;
	padding: 5px;
	gap: 5px;
}

.characteristic_plus11 {
	display: flex;
	border: 1px solid black;
	align-items: center;
	margin-left: auto;
	min-width: 300px;
	padding: 5px;
	gap: 5px;
}

.characteristic_plus11 > div:first-child {
	flex-grow: 1;
	align-items: center;
	width: 200px;
}

.members_group_title {
	display: block;
	width: 80%;
	background-color: #FFFF99;
	text-align: center;
	margin: 1em auto 2em auto;
}

hr {
	margin: 2em 0;
}

.members_group_title.sub_group {
	background-color: #39C5BB;
	width: 60%;
	margin-top: 2.5em;
}

.collabo_partner {
	font-size: 1.3em;
	font-weight: bold;
}

.group_list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 5px;
	margin: 2em 0;
}

.group_list > a {
	flex-grow: 1;
	background-color: LightPink;
	border: 1px solid DarkViolet;
	border-radius: 10px;
	color: black;
	text-decoration: none;
	padding: 5px;
}

.battle_skill {
	border: 1px solid black;
	float: right;
	max-width: 600px;
	min-width: 350px;
}

.bs_kicks_base {
	font-size: 0.5em;
}

.placeholder_field {
	border-left: none;
}

td:has(+ .placeholder_field) {
	border-right: none;
}

.skill_name_trans {
	border: 1px solid black;
	width: 50%;
	max-width: 300px;
	text-align: center;
	margin: 0 auto 5px auto;
}

.skill_name_trans > div:nth-child(odd) {
	text-align: left;
	font-size: 0.8em;
}

.stoneWorth, .itemWorth {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	place-items: center;
}

:is(.stoneWorth, .itemWorth) img {
	height: 24px;
}

.stone_group {
	text-align: center;
}

table +h2 {
	margin-top: 2em;
}

.pluscan_use {
	display: grid;
	grid-template-columns: minmax(200px,15%) auto;
	place-items: center start;
	text-align: left;
	width: 100%;
	margin-left: 5px;
}

.pluscan_targets {
	display: flex;
	align-items: center;
	justify-content: start;
	gap: 10px;
	padding: 10px;
	flex-wrap: wrap;
}

.pluscan_targets img {
	width: 80px;
}

.pluscan_target_char {
	position: relative;
}
.pluscan_target_name {
	position: absolute;
	display: none;
	z-index: 999;
	align-items: center;
	justify-content: center;
	text-align: center;
	left: 50%;
    transform: translateX(-50%);
	box-sizing: border-box;
	min-width: 80px;
	height: 80px;
	border-radius: 5px;
	white-space: nowrap;
	font-size: 0.8em;
	background: rgba(0, 0, 0, 0.6);
	color: white;	
}

.pluscan_target_char:hover .pluscan_target_name {
	display: flex;
}

.weap_charSpecific {
	display: grid;
	grid-template-columns: 96px 96px auto 96px;
	place-items: center;
}

.weap_charSpecific > div:first-child {
	writing-mode: vertical-lr;
}

.singleEquipment, .singleCharacter, .singleSupporter {
	table-layout: auto;
	margin-top: 30px;
}

h3 {
	margin-top: 3.5em;
}

h3 > div {
	font-weight: normal;
	font-size: small;
}


.singleEquipment, .extraSkill, .upgradeStatus, .singleCharacter, .specialWeapon, .singleSupporter, .pet_skill_single {
	border: 1px solid black;
}

.upgradeStatus th:first-child {
	width: 50px;
}

.upgradeStatus img {
	width: 20px;
}

.auto_weapon {
	display: grid;
	grid-template-columns: 1fr 1fr; 
	gap: 10px;
}

.auto_weapon > div:only-child {
	grid-column: 1 / -1;
}

.auto_weapon > div {
	display: grid;
	grid-template-columns: 80px 1fr auto;
	place-items: center;
	padding: 5px;
	border: 1px solid black;
}

.auto_weapon img {
	width: 80px;
}

.specialWeapon {
	margin-bottom: 0.5em;
}

.charScore {
	border: 1px solid black;
	width: 200px;
}

.charScore td:first-child {
	width: 75px;
	white-space: nowrap;
}

.upgradeStatus :is(td, th) {
	white-space: nowrap;
	padding: 0 1em;
}
  
th img {
	display: block;
	margin: auto;
}
 
.pet_lvTitle {
	width: 50px;
	padding: 0 0.5em;
}

.pet_totalExp {
	border: 1px solid black;
	line-height: 1em;
	padding: 1px;
	margin: 2px;
	display: inline-block;
}

.pet_skillVal_list {
	display: grid;
	grid-template-columns: 10% repeat(5, 1fr);
	grid-template-rows: auto auto;
	place-items: center;
}

.pet_skillVal_list > div:first-child {
	grid-row: 1 / -1;
}

.pet_sepcialGrowMaterial_area {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start;
	text-align: center;
	gap: 5px;
}

.pet_sepcialGrowMaterial {
	display: grid;
	grid-template-columns: minmax(100px, max-content) 100px;
	grid-template-rows: auto 2fr 3fr;
	place-items: center;
	border: 1px solid black;
	width: max-content;
	text-align: center;
}

.pet_sepcialGrowMaterial > div:first-child {
	grid-column: 1 / -1;
}

.pet_sepcialGrowMaterial img {
	grid-row: 2 / -1;
	width: 72px;
}

.pet_sepcialGrowMaterial > div:last-child {
	line-height: 1;
}

.pet_evoRelationship {
	display: grid;
	grid-template-columns: 96px 30px max-content 30px auto 96px;
	place-items: center;
	border: 1px solid black;
	text-align: center;
}

.pet_evoCost {
	display: grid;
	grid-template-rows: auto auto;
	place-items: center;
	height: 100%;
	margin: 0 5px;
}

.pet_evoCost > div:first-child {
	border: 1px solid black;
	padding: 2px;
	margin: 2px;
}

.pet_evoDirection {
	writing-mode: vertical-lr;
}

.dress_dream_condition {
	display: inline-block;
	border: 1px solid black;
	padding: 0 5px;
}

.dress_dress_drop {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	padding: 5px 0;
}

.dress_dress_drop img {
	width: 80px;
}

.dress_dress_dropName {
	top: -15px;
}