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

/* character */
.chara-bg-image{
    width : 100%;
}

.chara-main-image{
	height:980px;
    position: absolute;
    bottom: 0px;
    right: 2%;
    z-index: 10;
    opacity: 0.0;
    transition-timing-function: ease-out;
    transition-duration: 0.5s;
    transform: translate(0px,0px) scale(1.0,1.0);
}

.chara-main-image[data-visible="show"]{
    transform: translate(0px,0px) scale(1.0,1.0);
    opacity: 1.0;
}
.chara-main-image[data-visible="hide"]{
    transform: translate(0px,0px) scale(1.1,1.1);
    opacity: 0.0;
}

.chara-voice-div{
    width:100%; 
    padding-left:5%; 
    padding-bottom:40px; 
    text-align: left; 
    z-index: 20;
	display: block;	/* lock */
}

.chara-icon-size{
    width:120px;
}

.chara-main-font{
    font-size: 1.5em; 
    color: #444444; 
	text-align: left;
	text-shadow: 0px 0px 10px #FFFFFF , 0px 0px 10px #FFFFFF;
}

.chara-main-info{
    position: absolute;
	bottom: 40px;
    left:5%;
    width:45%;
    z-index: 20;
}

.chara-sub-info{
    position: relative;
    width:65%;
    left:5%;
	z-index: 10;
}

.chara-sub-image{
    position: absolute;
    height:300px;
    right:10%;
	bottom:0%;
	z-index: 1;
}

.chara-sub-bg{
    background-color: #ffffff88;
	min-height: 450px !important;	/* おいおいおい */
}

.chara-button-change{
    position: absolute;
    bottom: 40px;
    right: 10%;
    z-index: 20;
}