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

body{
    overflow-x: hidden;
    position:relative;
}
h3{
    margin-bottom:5px;
}
/*.bg_diagonal{
    width: 100%;
    margin: 0;
height:650px;
    background:blue;
    position: absolute;
   bottom:0;
    right:0;
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
}*/
.bg_diagonal{
    background:url("../images/bg_purple_tryangle.png") no-repeat bottom right;
width:100%;
height:1000px;
position: absolute;
   bottom:0;
    right:0;}
.curtain{
    width:100%;
    position: relative;
    height:100%;
    min-width: 1200px;
    z-index: 2;
    
}
.curtain__right{
  top:0;
    right:0;
}
.curtain__left{
  top:0;
    left:0;
    transform: scale(-1, 1);
}
/*charaBox*/
.charaBox {
  position: relative;
  width: 1000px;
  margin: 350px auto 0px auto;
    height: 1180px;
}

.charaBox__word {
  height: 500px;
  width: 60px;
  position: absolute;
  top: 20px;
  right: 20px;
}
.profBox {
  position: absolute;
  top: 0;
  width: 500px;
   
  z-index: 2;
  display: flex;
}
.profBox__chatch {}
.profBox__dataBox {
  margin-left: 40px;
}
.profBox__name {
  margin-left: -10px;

}
.profBox__cv {
  margin-top: 20px;
    padding-left: 50px;
  font-size: 20px;
  font-weight: bold;
     background:url("../character/character_cv_icon.png") no-repeat 0px 10px;
    background-size: 43px 22px;
}
.profBox__voice ul {
  display: flex;
  margin-top: 10px;
	margin-bottom:25px;
}
.profBox__voice li {
  width: 75px;
}

.profBox__prof {
  font-size: 16px;
  text-align: justify;
        text-shadow:0px 0px 1px #fff, 0px 0px 3px #fff, 0px 0px 3px #fff, 0px 0px 3px #fff, 0px 0px 5px #fff;
}
.charaBox__tachie, .charaBox__tachieBg  {
  position: absolute;
  top: -240px;
  margin-left:270px;
  width:945px;
  height: 1350px;
}
.charaBox__tachie img, .charaBox__tachieBg img{
    max-width:100%;
    height:auto;
} 
.profBox__work {
    width:490px;
  margin-top: 20px;
   border:solid 16px;
border-image-source:url("../images/line_base.png");
border-image-slice:32;
padding:5px 0px;
font-size: 12px;}

.profBox__work dl{
  display: flex;
}
.profBox__work dt{
  padding-right: 20px;
    color: #BDA556;
    font-weight: bold;
}
.profBox__work dd {
}
.charaBox__tachie div {
  position: relative;
  opacity: 0;
}
.charaBox__tachie img {
  position: absolute;
  top: 0;
  left: 0;
}
.charaBox__tachie .fadein {
  transition: 1s;
  opacity: 1;
}
.charaBox__costume {
  margin-top: 20px;
}
.charaBox__costume ul {
  display: flex;
  justify-content: flex-start;
    flex-wrap: wrap;
    width:400px;
}
.charaBox__costume ul li {
  position: relative;
  width: 80px;
  height: 80px;
  margin-right: 15px;
    margin-bottom:35px;
}
.charaBox__costume .newmark {
 top:-2px;
 left:-2px;
}
.charaBox__costume ul li div {
  position: absolute;
  top: 0;
  left: 0;
}
.charaBox__costume .btnOn {
  opacity: 0;
  cursor: pointer;
}
.charaBox__costume .btnNow {
  opacity: 1;
  cursor: default;
}
.charaBox__costume p {
    color:#BDA556;
    font-size:9px;
    font-weight: bold;
    text-align: center;
 margin-top:84px;
    border-top:1px solid #BDA556;
    border-bottom:1px solid #BDA556;
    line-height: 1.3;
}
.charaBox__face {
     width:430px;
  margin-top:20px;
    position:relative;
}
.profBox__sd{
    position:absolute;
    top:-40px;
    left:320px;
}
.charaBox__face ul {
  display: flex;
    
}
.charaBox__face li {
  margin-right: 10px;
    width:120px;
    
}
.charaBox__face li img{
    max-width:120px;
    height:auto;
}
.charaBox__face li:last-child {
  margin-right: 0px;
}
.charaBox__kumo_leftBig {
  left: -150px;
  top: -5px;
  animation: 3s ease-in-out infinite alternate fuwafuwa;
}
.charaBox__kumo_rightSmall {
  right: 330px;
  top: 110px;
  animation: 5s ease-in-out infinite alternate fuwafuwa;
}
.charaBox__kumo_rightBig {
  right: -100px;
  top: 250px;
  transform: scale(-1, -1);
  animation: 2s ease-in-out infinite alternate fuwafuwa;
}
.charaSub .charaBox__bigObj {
  background: url("../character/images/chara_bg_bigobj_sub.png");
  background-size: 678px 678px;
  width: 678px;
  height: 678px;
  position: absolute;
  top: -270px;
  right: -200px;
}
.onLink::before {
  background: url("../character/images/chara_costume_btn_on.png") no-repeat;
  background-size: 80px 80px;
  background-position: center center;
}
.onLink:hover::before {
  opacity: 1;
}