@charset "utf-8";

.cursoll area {
    cursor: pointer;
    display:block;
}

.modal_open{
    display: inline-block;
    margin: 0;
    float: left;
}
 
.modal_box {
    position: absolute;
    z-index: 7777;
    display: none;
    width: 1040px;
	height:100%;
	top: 0;
  left: 0;
  right: 0;
  bottom: 0;
    margin: 0;
    padding: 0;
    border: none;
    text-align: center;
    background: none;
    box-sizing: border-box;
	
}
 
.modal_close {
    position: fixed;
    top: 0;
    right: 25px;
    display: block;
    width: 76px;
    font-size: 62px;
    color: #fff;
    line-height: 76px;
    text-align: right;
	z-index: 8888;
	transition: all 0.3s ease 0s;
}

.modal_close i {
    line-height: 76px;
    vertical-align: bottom;
	transition: all 0.3s ease 0s;
}
.modal_close i:hover {
  transform: rotateZ(90deg);
}

.modal_right {
    position: fixed;
    bottom: 50%;
    right: 25px;
    display: block;
    width: 70px;
    font-size: 52px;
    color: #fff;
    line-height: 70px;
    text-align: right;
	z-index: 8888;
	transition: all 0.3s ease 0s;
}
.modal_right:hover {
  transform: translateX(15px);
}

.modal_right i {
    line-height: 52px;
    vertical-align: bottom;
}

.modal_left {
    position: fixed;
    bottom: 50%;
    left: 25px;
    display: block;
    width: 70px;
    font-size: 52px;
    color: #fff;
    line-height: 70px;
    text-align: left;
	z-index: 8888;
	transition: all 0.3s ease 0s;
}
.modal_left:hover {
  transform: translateX(-15px);
}
 
.modal_left i {
    line-height: 52px;
    vertical-align: bottom;
}



 
.modal_bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6666;
    display: none;
    width: 100%;
    height: 120vh;
 background: url("../img/chara_bg.jpg");
}
 

@media screen and (max-width: 640px) {

.modal_box {
    position: absolute;
    z-index: 7777;
    display: none;
    width: 100%;
	height:100%;
	top: 0;
  left: 0;
	bottom: 0;
	right: 0;
    margin: 0;
    padding: 0;
    border: none;
    text-align: center;
    box-sizing: border-box; background: #000;
}
.modal_right {
    bottom: 10px;
}

.modal_left {
    bottom: 10px;
}
 

}

.cursoll { position: relative; }
.cursoll .charawakur { display:block; width:100px; height:100px;  position: absolute; background-size: cover; transition: all 0.3s ease 0s; background-color: #fff; }
.cursoll .charawakub { display:block; width:100px; height:100px;  position: absolute; background-size: cover; transition: all 0.3s ease 0s; background-color: #fff; }

a.charawakur img { transition: all 0.3s ease 0s; cursor: pointer; border:1px solid #cc0000;}
a.charawakur img:hover {  opacity: 0.7;  }
a.charawakub img { transition: all 0.3s ease 0s; cursor: pointer; border:1px solid #1273c3;}
a.charawakub img:hover {  opacity: 0.7;  }

.cursoll .charawakur2 { display:block; width:100px; height:100px;  position: absolute; background-size: cover; transition: all 0.3s ease 0s; background-color: #fff; }
.charawakur2 img { transition: all 0.3s ease 0s; cursor: pointer; border:1px solid #cc0000;}

.cha_reinhard { top:375px; left:302px; }
.cha_kircheis { top:375px; left:162px; }
.cha_yan { top:585px; left:599px; }
.cha_yurian { top:555px; left:749px; }
.cha_oberu { top:423px; left:21px; }
.cha_mitamaiya { top:545px; left:302px; }
.cha_roienta { top:545px; left:162px; }
.cha_kyazerunu { top:260px; left:660px; }
.cha_frederica { top:731px; left:460px; }
.cha_annerose { top:97px; left:307px; }
.cha_bittenf { top:731px; left:21px; }
.cha_kemp { top:731px; left:161px; }
.cha_rutu { top:888px; left:230px; }
.cha_waren { top:888px; left:89px; }
.cha_mekuring { top:731px; left:302px; }
.cha_freed { top:97px; left:162px; }
.cha_sitore { top:97px; left:471px; }
.cha_vukoc { top:97px; left:731px; }
.cha_greenhill { top:260px; left:488px; }
.cha_attenb { top:417px; left:749px; }
.cha_fisher { top:731px; left:599px; }
.cha_shencop { top:731px; left:737px; }
.cha_murai { top:887px; left:460px; }
.cha_patori { top:887px; left:599px; }
.cha_popran { top:887px; left:737px; }

.cha_rihiten { top:147px; left:15px; }