@charset "utf-8";
/* CSS Document */

/* PC */

/* ────────────────────────────
	correlation
──────────────────────────── */

.head.while {
	color: #fff;
	border-bottom: solid 1px #fff;
}
body#correlation {
	background-color: #000;
}
body#correlation .container {
	margin-top: 200px;
}
body#correlation .field {
	position: relative;
	width: 1000px;
	margin: 0 auto 50px auto;
}
body#correlation .field a {
	position: absolute;
}
body#correlation .field > div img {
	width: 100px;
}
body#correlation .field > div {
	position: absolute;
	width: 100px;
}
body#correlation .field a.link {
	transition: .3s;
}
body#correlation .field a.link:hover {
	transform: scale(1.1);
}


body#correlation .field > div > .slide-up {
	position: relative;
	display: block;
	width: 100px;
	height: 100px;
	overflow: hidden;
}
body#correlation .field > div > .slide-up img {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
body#correlation .field > div > .slide-up span {
	position: absolute;
	display: block;
	height: 100px;
	width: 100px;
	box-sizing: border-box;
	color: #fff;
	font-size: 0.7em;
	background-color: rgba(0,0,0,0.7);
	z-index: 2;
	opacity: 0;
	transition: .3s;
	transform: translateY(100%);
}
body#correlation .field > div > .slide-up:hover span {
	opacity: 1;
	transform: translateY(0);
}

body#correlation .field > div.popup {
	position: absolute;
	width: 50px;
	height: 50px;
	cursor: pointer;
	background-image: url(../img/chara/correlation/icon_fukidashi.png);
	background-repeat: no-repeat;
}
body#correlation .field > div.popup:hover {
	background-image: url(../img/chara/correlation/icon_fukidashi_on.png);
}
body#correlation .field > div.popup > div {
	display: none;
}

body#correlation .field > div#modal-win {
	position: absolute;
	background-color: rgba(255,255,255,0.95);
	padding: 10px;
	width: 300px;
	border-radius: 5px;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.8);
	z-index: 2;
	opacity: 0;
}
body#correlation .field > div#modal-win h3 {
	margin: 0 0 10px 0;
	font-weight: normal;
	font-size: 1.2em;
	border-bottom: solid 1px #999;
	font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", sans-serif;
}
body#correlation .field > div#modal-win p {
	font-size: 0.9em;
}

/* ────────────────────────────
	Sen2
*/
body#correlation .sen2 #rufus {
	top: 92px;
	left: 105px;
}
body#correlation .sen2 #cayenne {
	top: 92px;
	left: 225px;
}
body#correlation .sen2 #aurelia {
	top: 265px;
	left: 50px;
}
body#correlation .sen2 #wallace {
	top: 315px;
	left: 50px;
}


body#correlation .sen2 #altina2 {
	top: 368px;
	left: 245px;
}

body#correlation .sen2 #regnitz {
	top: 93px;
	left: 735px;
}
body#correlation .sen2 #osborne {
	top: 93px;
	left: 610px;
}
body#correlation .sen2 #rufus2 {
	top: 273px;
	left: 550px;
}
body#correlation .sen2 #lecter {
	top: 273px;
	left: 660px;
}
body#correlation .sen2 #millium {
	top: 273px;
	left: 770px;
}
body#correlation .sen2 #claire {
	top: 273px;
	left: 880px;
}
body#correlation .sen2 #altina {
	top: 413px;
	left: 590px;
}
body#correlation .sen2 #sechs {
	top: 430px;
	left: 805px;
}
body#correlation .sen2 #craig {
	top: 475px;
	left: 805px;
}

body#correlation .sen2 #xeno {
	top: 760px;
	left: 55px;
}
body#correlation .sen2 #leonidas {
	top: 875px;
	left: 55px;
}

body#correlation .sen2 #clotilde {
	top: 760px;
	left: 217px;
}
body#correlation .sen2 #mcburn {
	top: 875px;
	left: 217px;
}
body#correlation .sen2 #blbranc {
	top: 990px;
	left: 217px;
}
body#correlation .sen2 #dubarry {
	top: 1105px;
	left: 217px;
}

body#correlation .sen2 #crow {
	top: 760px;
	left: 375px;
}
body#correlation .sen2 #scarlet {
	top: 875px;
	left: 375px;
}
body#correlation .sen2 #vulcan {
	top: 990px;
	left: 375px;
}
body#correlation .sen2 #gideon {
	top: 1105px;
	left: 375px;
}

body#correlation .sen2 #rean {
	top: 690px;
	left: 595px;
}
body#correlation .sen2 #alisa {
	top: 690px;
	left: 705px;
}
body#correlation .sen2 #eliot {
	top: 805px;
	left: 595px;
}
body#correlation .sen2 #laura {
	top: 805px;
	left: 705px;
}
body#correlation .sen2 #jusis {
	top: 920px;
	left: 595px;
}
body#correlation .sen2 #machias {
	top: 920px;
	left: 705px;
}
body#correlation .sen2 #emma {
	top: 1035px;
	left: 595px;
}
body#correlation .sen2 #fie {
	top: 1035px;
	left: 705px;
}
body#correlation .sen2 #gaius {
	top: 1150px;
	left: 595px;
}
body#correlation .sen2 #sara {
	top: 1150px;
	left: 705px;
}

body#correlation .sen2 #olivert {
	top: 690px;
	left: 865px;
}
body#correlation .sen2 #alfin {
	top: 805px;
	left: 865px;
}

body#correlation .sen2 #tovar {
	top: 1105px;
	left: 865px;
}

/* popup */
body#correlation .sen2 #kizoku {
	top: -5px;
	left: 295px;
}
body#correlation .sen2 #kakushin {
	top: -5px;
	left: 840px;
}
body#correlation .sen2 #daisan {
	top: 585px;
	left: 955px;
}
body#correlation .sen2 #kouzoku {
	top: 785px;
	left: 955px;
}
body#correlation .sen2 #nishikaze {
	top: 620px;
	left: 130px;
}
body#correlation .sen2 #ouroboros {
	top: 620px;
	left: 290px;
}
body#correlation .sen2 #sensen {
	top: 620px;
	left: 450px;
}