@charset "UTF-8";
/* CSS Document */
*{
font-family: 'Saira Semi Condensed', sans-serif;}
#top {
 /*   background-image: url(../images/topback.png);
    background-repeat: no-repeat;
    background-size: cover;*/
    z-index: -1;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    color: #000;
    background-color: #fff;
}

#start {

}
#mainContents {
    position: relative;
    background-image: url(../images/haikei.jpg);
    z-index: -10;
    background-repeat: no-repeat;
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
/*-----------------------------piero------------------------------------------------*/
.girl {
    animation-duration: 3s;animation-name: slide;animation-timing-function: linear;animation-iteration-count: infinite;
    position: absolute;
    top: 86%;
}
@keyframes slide {
 0% {margin-left: 15%;}50% {margin-left: 25%;}100% {margin-left: 15%;}
}
/*-------------------------------mon----------------------------------------------*/
.girl2 {
    animation-duration: 1s;animation-name: slide2;animation-timing-function: linear;animation-iteration-count: infinite;
    position: absolute;
    top: 78%;
}
@keyframes slide2 {
 0% {margin-left: 30%;}50% {margin-left: 40%;}100% {margin-left: 30%;}
}
/*--------------------------------vam---------------------------------------------*/
.girl3 {
    animation-duration: 2s;animation-name: slide3;animation-timing-function: linear;animation-iteration-count: infinite;
    position: absolute;
    top: 22%;
}
@keyframes slide3 {
 0% {margin-left: 10%;}50% {margin-left: 15%;}100% {margin-left: 10%;}
}
/*--------------------------------doll---------------------------------------------*/
.girl4 {
    position: absolute;
    top: 60%;
    left: 15%;
}
/*---------------------------------nurse--------------------------------------------*/
.girl5 {
    animation-duration: 6s;animation-name: slide5;animation-timing-function: linear;animation-iteration-count: infinite;
    position: absolute;
    top: 60%;
}
@keyframes slide5 {
 0% {margin-left: 55%;}50% {margin-left: 60%;}100% {margin-left: 55%;}
}
/*---------------------------------asia--------------------------------------------*/
.girl6 {
    animation-duration: 5s;animation-name: slide6;animation-timing-function: linear;animation-iteration-count: infinite;
    position: absolute;
    top: 79%;
}
@keyframes slide6 {
 0% {margin-left: 70%;}50% {margin-left: 80%;}100% {margin-left: 70%;}
}
/*-----------------------------------sis------------------------------------------*/
.girl7 {
    animation-duration: 5s;animation-name: slide7;animation-timing-function: linear;animation-iteration-count: infinite;
    position: absolute;
    top: 86%;
}
@keyframes slide7 {
 0% {margin-left: 45%;}50% {margin-left: 65%;}100% {margin-left: 45%;}
}
/*-------------------------------------pira----------------------------------------*/
.girl8 {
    animation-duration: 4s;animation-name: slide8;animation-timing-function: linear;animation-iteration-count: infinite;
    position: absolute;
    top: 38%;
}
@keyframes slide8 {
 0% {margin-left: 83%;}50% {margin-left: 80%;}100% {margin-left: 83%;}
}
/*------------------------------------witch-----------------------------------------*/
.girl9 {
    animation-duration: 4s;animation-name: slide9;animation-timing-function: linear;animation-iteration-count: infinite;
    position: absolute;
    top: 54%;
}
@keyframes slide9 {
 0% {margin-left: 27%;}50% {margin-left: 30%;}100% {margin-left: 27%;}
}
/*-------------------------------------man----------------------------------------*/
.boy {
    animation-duration: 6s;animation-name: slide5;animation-timing-function: linear;animation-iteration-count: infinite;
    position: absolute;
    top: 13%;
}
/*-----------------------------------------------------------------------------*/

/*紹介BOXのスタイリング*/
.chara {
    border-radius: 20px;
    width: 800px;
    height: 600px;
    background:rgba(93,255,190,0.8);
    text-align: center;
    line-height: 1.2em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -400px;
    margin-top: -300px;
}
.charapic img{
    width: 50%;
    float: left;
    margin-top: 60px;
    margin-left: 20px;
}
.contents {
    width: 45%;
    float: right;
    overflow: hidden;
}
.charatext p {

    text-align: left;
}
.name {
        margin-top: 45%;
    font-size: 30px;
    letter-spacing: 0.1em;
}

.text {
    margin-top: 20%;
    font-size: 15px;
    line-height: 2.5em;
}

.return{
    text-align: right;
    font-size: 15px;
    margin-top: 80px;
}
/*------------------------------------------------------------*/
#deco1{
    z-index: -10;
    position: absolute;
    top:0%;
    left: 100%;
    margin-top: -255px;
    margin-left: -255px;
}
#deco2{
    z-index: -10;
    position: absolute;
    top:100%;
    left: 0%;
    margin-top: -150px;
    margin-left: -150px;
}