@charset "UTF-8";

/* word like air fixed
-------------------------------------------------------------*/
.wrap-sticky {
    width: 90%;
    max-width: 312px;
    height: calc(100vh + 550px);
    max-height:1150px;
    max-height:1250px;
    position:absolute;
    top:0px;
    left:50%;
    z-index:10;
    transform: translate(-50%, 0);
}
.cell-sticky {
    position: sticky;
    top: 0;
    height:298px;
    height:calc(100vh + 100px);
    height:100vh;
    max-height:550px;
    display:flex;
    align-items: center;
    justify-content: center;
}
.logo-front {
    width:260px;
    height:260px;
    background-color:rgba(255,255,255,0.8);
    background-color:transparent;
    display:flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease-in-out;
}
.logo-front.is-transformed {

    background-color:rgba(0,0,0,0.8);
    background-color:transparent;
    transition: background-color 0.2s ease-in-out;
}

.logo-front .logo-front-01,
.logo-front .logo-front-02,
.logo-front .logo-front-03,
.logo-front .logo-front-04 {
    opacity:0;
    pointer-events: none;
    display:none;
    position:relative;
    width:260px;
    height:260px;
}
.theme01 .logo-front .logo-front-01 {
    opacity:1;
    display:block;
}
.theme02 .logo-front .logo-front-02 {
    opacity:1;
    display:block;
}
.theme03 .logo-front .logo-front-03 {
    opacity:1;
    display:block;
}
.theme04 .logo-front .logo-front-04 {
    opacity:1;
    display:block;
}
.logo-front .logo-front-01 p,
.logo-front .logo-front-02 p,
.logo-front .logo-front-03 p,
.logo-front .logo-front-04 p {
    position:absolute;
/*    transition: top 0.8s ease-in-out,left 0.8s ease-in-out,right 0.8s ease-in-out,bottom 0.8s ease-in-out;*/
    transition: top 1.2s ease-in-out,left 1.2s ease-in-out,right 1.2s ease-in-out,bottom 1.2s ease-in-out;
}
.logo-front .logo-main{width:158px;top:76px;left:112px;}
.logo-front .logo-sub{width:158px;top:0px;left:32px;}
.logo-front .logo-title{width:204px;top:234px;left:24px;}
.logo-front .logo-eng{width:260px;top:10px;left:10px;}
.is-transformed.logo-front .logo-main{top:15px;left:-4px;}
.is-transformed.logo-front .logo-sub{top:142px;left:-4px;}
.is-transformed.logo-front .logo-title{top:-28.5px;left:28px;}
.is-transformed.logo-front .logo-eng{top:172px;left:-4px;}

.logo-front img {
    width:100%;
    height:auto;
}

@media only screen and (max-width:768px) {
    .wrap-sticky {
        height:700px;
        height: calc(100vh + 577px);
        height: calc(150vh + 577px);
        max-height:1627px;
    }
    .cell-sticky {
        max-height:700px;
    }
}

@media only screen and (min-width:769px) {
    .wrap-sticky {
        max-width: 400px;
        max-height:1150px;
    }
    .cell-sticky {
    }
    .wrap-sticky {
        height: calc(100vh + 756px);
        max-width: 400px;
        max-height:1150px;
        max-height:1556px;
    }
    .cell-sticky {
        max-height:800px;
    }
    .logo-front {
        width:390px;
        height:390px;
    }
    .logo-front .logo-front-01,
    .logo-front .logo-front-02,
    .logo-front .logo-front-03,
    .logo-front .logo-front-04 {
        width:390px;
        height:390px;
    }
    .logo-front .logo-main{width:237px;top:114px;left:168px;}
    .logo-front .logo-sub{width:237px;top:0px;left:56px;}
    .logo-front .logo-title{width:306px;top:351px;left:36px;}
    .logo-front .logo-eng{width:390px;top:15px;left:15px;}
    .is-transformed.logo-front .logo-main{top:-8px;left:-76px;}
    .is-transformed.logo-front .logo-sub{top:187px;left:-76px;}
    .is-transformed.logo-front .logo-title{top:-8px;left:160px;}
    .is-transformed.logo-front .logo-eng{top:230px;left:-76px;}
}