body{

                font-family: 'Nunito Sans', "Hiragino Kaku Gothic ProN","メイリオ",sans-serif;
                font-size: 13px;
                margin: 0px;
                text-align: left;
                background-color:  #181818;;
            }

            canvas
            {
                display: block;
                position: absolute;
                pointer-events: none;

                top: 0px;
                left: 0px;
            }

            #canvas_bg{
                display: block;
                position: fixed;

                top:  0;
                left: 0;

                z-index: 1;
            }

            #container
            {
                display: block;
                position: fixed;

                top:  0;
                left: 0;

                z-index: 1;

                pointer-events: none;
            }

            #container.ready
            {

                left: 0;

            }


            *{
                margin:  0;
                padding: 0;

                box-sizing: border-box;
            }

            .scroll_container
            {
                display: block;
                position: absolute;
                width:  100%;
                height: 100vh;

                top: 0;
                left: 0;

                overflow: hidden;
            }

            .scroll_inner_container
            {
                 display: block;
                 position:absolute;
                 width: 100%;
                 height: 100%;
                 overflow: hidden;
            }


            .view_container
            {
                display: block;
                position: absolute;
                width:  100%;
                height: 100%;

                min-height: 500px;
                background-color: #181818;

                transition: background-color 0.46s linear;
                z-index: -1;
            }

            .view_container.anim1
            {
                animation-name: anim_bg1;
                animation-duration: 1.0s;
                animation-timing-function: linear;
            }

            @keyframes anim_bg1{
                0%{
                    background-color:  #181818;
                }

                33%{
                     background-color:  #000000;                   
                }

                66%{
                     background-color:  #000000; 
                }

                100%{
                     background-color:  #181818;                   
                }
            }

            .inner_container
            {
                display: block;
                position: absolute;

                top:  30px;
                left: 30px;

                width: calc(100% - 60px);
                height:calc(100% - 60px);

                background-color: #181818;
                background-color: #232222;
                background-color: #132222;

                transition: background-color 0.46s linear,top 0.1s ease-out;
            }

            .scroll_container
            {
                display: block;
                position: absolute;
                width:  100%;
                height: 100vh;
                top: 0;
                left: 0;
                overflow: hidden;
            }

            .scroll_inner_container{
                 display: block;
                 position:absolute;
                 width: 100%;
            }

            .contents
            {
                display: block;
                position: relative;
                width:  100%;
                height: 100vh;
                min-height: 660px;

            }

            .author_container
            {
                display: block;
                position: absolute;

                font-size: 8px;
                color: #000;

                left: 5%;
                top:  5%;

                letter-spacing: 1px;

                color: rgba(55,55,55,0.8);
            }

            .credits
            {
                display: block;
                position: absolute;

                font-size: 8px;
                color: #000;
                color: rgba(55,55,55,0.8);
                letter-spacing: 1px;

                right: 5%;
                top:  5%;
                transform-origin: right center;
                transform: rotate(-90deg);
            }

            /*  以下、追加部分　*/
            .title_logo
            {
                display: block;
                position: absolute;
                width: 50%;

                top:  50%;
                left: -5%;

                transform: translateY(-50%) scale(1.2);
            }

            .title_logo_shogun
            {
                display: block;
                position: absolute;
                width: 64%;

                top:50%;
                right:  5%;

                transform: translateY(-50%);
            }

            .title_logo_egypt
            {
                display: block;
                position: absolute;
                width: 70%;

                top:50%;
                left: 0%;

                transform: translateY(-50%);
            }

            .title_logo_odin
            {
                display: block;
                position: absolute;
                width: 63%;

                top:50%;
                right:  5%;

                transform: translateY(-50%);
            }

            .title_logo_aztech
            {
                display: block;
                position: absolute;
                width: 70%;

                top:50%;
                left: 0%;

                transform: translateY(-50%);
            }


            .title_light
            {
                display: block;
                position: absolute;
                width: 90%;
                left: 0;
                bottom: 0;
            }

            .title_landscape_catsle
            {
                display: block;
                position: absolute;

                width: 38%;

                bottom: 0;
                right: 0;
            }

            .title_landscape_jp2
            {
                display: block;
                position: absolute;

                width: 40%;

                top: 0;
                right:  0;
            }

            .title_landscape_jp1
            {
                display: block;
                position: absolute;

                width: 39%;

                bottom: 0;
                left: 0;
            }

            .title_landscape_egypt
            {
                display: block;
                position: absolute;

                width: 39%;

                bottom: 0;
                right:  0;           
            }

            .title_landscape_odin
            {
                display: block;
                position: absolute;

                width: 39%;

                bottom: 0;
                left: 0;
            }

            .title_landscape_aztech
            {
                display: block;
                position: absolute;

                width: 39%;

                bottom: 0;
                right:  0;           
            }

            .top_subtitle_container_mage{
                display: block;
                position: absolute;
                top:16%;
                right: -20%;

                transition: right 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
                opacity: 0;
            }

            .top_subtitle_container_mage.anim
            {
                right: 15%;
                opacity: 1;
            }




            .top_subtitle_container_mage div
            {
             
                font-size: 10px;
                color:#954f44;
                letter-spacing: 2px;
                margin-bottom: 7px;
            }
            

            .top_item_container
            {
                display: block;
                position: absolute;
                width: 37%;

                top:   52%;
                right: 13%;

                transform:translateY(-50%);
            }

            .top_item_container_shogun
            {
                display: block;
                position: absolute;
                width: 37%;


                top:52%;
                left: 13%;

                transform:translateY(-50%);
            }

            .top_subtitle_container_shogun{
                display: block;
                position: absolute;
                top:20%;
                left: -20%;
                opacity: 0;
                transition: left 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
            }

            .top_subtitle_container_shogun div
            {
             
                font-size: 10px;
                color:#eea641;
                letter-spacing: 2px;
                margin-bottom: 7px;    
            }
            
            .top_subtitle_container_shogun.anim{
                left: 13%;
                opacity: 1;
            }

            .top_subtitle_container_egypt{
                display: block;
                position: absolute;
                top:16%;
                right:-20%;
                opacity: 0;
                transition: right 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
            }

            .top_subtitle_container_egypt div
            {
           
                font-size: 10px;
                color:#6781c1;
                letter-spacing: 2px;
                margin-bottom: 7px;    
            }

            .top_subtitle_container_egypt.anim{
                right: 13%;
                opacity: 1;
            }

            .top_item_container_odin
            {
                display: block;
                position: absolute;
                width: 37%;


                top:52%;
                left: 13%;

                transform:translateY(-50%);
            }


            .top_subtitle_container_odin{
                display: block;
                position: absolute;
                top:20%;
                left: -20%;
                opacity: 0;
                transition: left 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
            }

            .top_subtitle_container_odin div
            {   
                font-size: 10px;
                color:#00a79d;
                letter-spacing: 2px;
                margin-bottom: 7px;    
            }
            
            .top_subtitle_container_odin.anim{
                left: 13%;
                opacity: 1;
            }

            .top_subtitle_container_aztech{
                display: block;
                position: absolute;
                top:16%;
                right:-20%;
                opacity: 0;
                transition: right 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
            }

            .top_subtitle_container_aztech div
            {
           
                font-size: 10px;
                color:#6781c1;
                letter-spacing: 2px;
                margin-bottom: 7px;    
            }

            .top_subtitle_container_aztech.anim{
                right: 13%;
                opacity: 1;
            }


            /* Cover Emperor */

            .top_item_container_emperor{
                display: block;
                position: absolute;
                width: 37%;

                top:52%;
                left: 13%;

                transform:translateY(-50%);
            }

            .top_subtitle_container_emperor{
                display: block;
                position: absolute;
                top:20%;
                left: -20%;
                opacity: 0;
                transition: left 0.6s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
            }

            .top_subtitle_container_emperor div{
                font-size: 10px;
                color:#000;
                letter-spacing: 2px;
                margin-bottom: 7px;    
            }
            
            .top_subtitle_container_emperor.anim{
                left: 13%;
                opacity: 1;
            }



            /* Cover Top End */




            .top_item_title
            {
                position:relative;
                font-size: 24px;
                letter-spacing: 4px;
                font-weight: bold;
                color: #fff;
                text-align: left;
                line-height: 1.7;
            }

            .top_item_title .en{
                font-size: 27px;
 
            }

            .top_item_description
            {
                position: relative;
                margin-top: 30px;
                font-size: 10px;
                color: #fff;
                text-align: left;
                letter-spacing: 2px;
            }

            .top_item_btn
            {
                display: block;
                position: relative;
                width: 150px;
                height:30px;

                text-align: center;

                line-height: 30px;

                /* border-radius: 15px; */

                font-weight: bold;
                letter-spacing: 2px;
                font-size: 12px;

                margin-top: 30px;

                background-color: #fff;

                z-index: 5;
                 opacity: 1.0;

                 cursor: pointer;

            }

            .top_item_btn:hover{
                opacity: 0.5;
            }

            #info
            {
                color: #fff;
                position: absolute;
                top: 10px;
                width: 100%;
            }

            .page_container
            {
                display: block;
                position: relative;

                width:  100%;
                height: 100%;

                overflow: hidden;
            }

            .grunge_pic
            {
                display:block;
                position:relative;
                width: 100%;
                height:100%;

                opacity: 0.7;
                background-image: url('./img/grunge1_1.jpg');
                background-size: 100% auto;
                mix-blend-mode: multiply;
            }

            .pagenation_container
            {
                display: block;
                position: absolute;
                right: 50px;
                top:50%;
                transform: translate(-50%,-50%);

                transition: top 0.8s ease-out;

                z-index: 100;

                cursor: pointer;
            }

            .pagenation_container.top75{
           
            }

            .pagenation_container .box
            {
                display: block;
                position: relative;
                width: 20px;
                height:30px;
            }

            .pagenation_container .rhomboid
            {
                display: block;

                width: 8px;
                height:8px;
                margin: auto;

                transform: rotate(45deg);

                background-color: #ffffff;

            }

            .rhomboid.king
            {
                background-color: #9f4b40;
            }

            .rhomboid.shogun
            {
                background-color: #eea641;                
            }

            .rhomboid.pharaoh
            {
                background-color: #6781c1;
            }

            .rhomboid.odin
            {
                background-color: #00a79d;
            }

            .rhomboid.aztech
            {
                background-color: #97248f;
            }

            .rhomboid.emperor
            {
                background-color: #fff;
            }

            .pagenation_container .circle
            {
                display: block;

                width: 8px;
                height:8px;
                margin: auto;

                border-radius: 4px;

                background-color: rgba(255,255,255,0.2);
            }

            .card_shadow
            {
                display: block;
                position: absolute;

                top: 50%;
                left: 12%;

                width: 40%;

                transform: translate(0%,-50%);
            }

            .card_shadow_right
            {
                display: block;
                position: absolute;

                top: 50%;
                right: 12%;

                width: 40%;

                opacity: 0.7;

                transform: translate(0%,-50%);           
            }

        .back_btn_container
        {
            display: block;
            position: absolute;

            top: 0px;
            left: 0px;

            width: 60px;
            height: 60px;

            background-color: #181818;

      
        }

        #back_btn_article{
            position: absolute;
            top:50%;
            transform: translateY(-50%);
        }

        .back_btn_container .arrow_text
        {
            display: block;
            position: absolute;

            color: #fff;
            font-size: 8px;
            letter-spacing: 2px;

            left: 50%;
            bottom: 10%;

            transform: translateX(-50%);

        }

        .arrow img
        {
            display: block;
            position: absolute;
            width: 8px;

            top: 50%;
            left: 50%;

            transform: translate(-50%,-50%);
          
        }

            #title_logo_mage.anim
            {
                animation-name: anim_title_logo_mage;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #title_logo_mage.hideanim
            {
                animation-name: anim_title_logo_mage_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_title_logo_mage
            {
                0%
                {
                    left: -20%;
                    opacity: 0.0;
                
                transform: translateY(-50%) scale(1.2);
           
                }

                100%
                {
                    left: -5%;
                    opacity: 1.0;
                   transform: translateY(-50%) scale(1.0);
                }
            }

            @keyframes anim_title_logo_mage_hide
            {
                0%
                {
                    left: -5%;
                    opacity: 1.0;

                }

                100%
                {
                    left: -20%;
                    opacity: 0.0;

                }
            }

            #title_logo_mage
            {
                left: -20%;
                opacity: 0.0;
            }

            #credits_mage.anim{

            }

            @keyframes anim_credits_mage{
                
            }

            #title_landscape_catsle_mage.anim
            {
                animation-name: anim_title_landscape_catsle_mage;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #title_landscape_catsle_mage.hideanim
            {
                animation-name: anim_title_landscape_catsle_mage_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_title_landscape_catsle_mage
            {
                0%
                {
                    bottom: -20%;
                    right: -30%;
                    opacity: 0.0;
                    transform: scale(2.0);
                }

                100%
                {
                    bottom: 0%;
                    right: 0%;
                    opacity: 1.0;
                    transform: scale(1.0);
                }
            }

            @keyframes anim_title_landscape_catsle_mage_hide
            {
                0%
                {
                    bottom: 0%;
                    right: 0%;
                    opacity: 1.0;

                }

                100%
                {
                    bottom: -20%;
                    right: -30%;
                    opacity: 0.0;
                }   
            }

            #title_landscape_catsle_mage
            {
                bottom: -20%;
                right: -30%;
                opacity: 0.0;
            }

            #card_shadow_mage.anim{
                animation-name: anim_card_shadow_mage;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #card_shadow_mage.hideanim{
                animation-name: anim_card_shadow_mage_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_card_shadow_mage
            {
                0%{
                    opacity: 0.0;
                }

                100%{
                    opacity: 1.0;   
                }

                
            }

            @keyframes anim_card_shadow_mage_hide
            {
                0%{
                    opacity: 1.0;     
                }

                100%
                {
                    opacity: 0.0;
                }
            }

            #card_shadow_mage
            {
                opacity: 0.0;
            }

            #top_item_title_mage.anim
            {
                animation-name: anim_top_item_title_mage;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                
                animation-delay: 0.0s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);

            }

            #top_item_title_mage.hideanim
            {
                animation-name: anim_top_item_title_mage_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                
                animation-delay: 0.0s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);

            }

            @keyframes anim_top_item_title_mage
            {
                0%
                {
                    left: 100%;
                    opacity: 0.0;
                }

                100%
                {
                    left: 0%;
                    opacity: 1.0;
                }
            }

            @keyframes anim_top_item_title_mage_hide
            {
                0%
                {
                    left: 0%;
                    opacity: 1.0;
                }

                100%
                {
                    left: 100%;
                    opacity: 0.0;
                }
            }

            #top_item_title_mage{
                left: 100%;
                opacity: 0.0;
            }

            #top_item_description_mage.anim
            {
                animation-name: anim_top_item_description_mage;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.1s;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #top_item_description_mage.hideanim
            {
                animation-name: anim_top_item_description_mage_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.1s;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }
            
            @keyframes anim_top_item_description_mage
            {
                0%
                {
                    left: 100%;
                    opacity: 0.0;
                }

                100%
                {
                    left: 0%;
                    opacity: 1.0;
                }
            }

            @keyframes anim_top_item_description_mage_hide
            {
                0%
                {
                    left: 0%;
                    opacity: 1.0;

                }

                100%
                {
                    left: 100%;
                    opacity: 0.0;

                }
                
            }

            #top_item_description_mage
            {
                left: 100%;
                opacity: 0.0;  
            }


            #top_item_btn_mage.anim
            {
                animation-name: anim_top_item_btn_mage;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.2s;

                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #top_item_btn_mage.hideanim
            {
                animation-name: anim_top_item_btn_mage_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.2s;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_top_item_btn_mage
            {
                0%
                {
                    left: 100%;
                    opacity: 0.0;
                }

                100%
                {
                    left: 0%;
                    opacity: 1.0;
                }
            }

            @keyframes anim_top_item_btn_mage_hide
            {
                0%
                {
                    left: 0%;
                    opacity: 1.0;
                }

                100%
                {
                    left: 100%;
                    opacity: 0.0;
                }
            }

            #top_item_btn_mage
            {
                left: 100%;
                opacity: 0.0;   
            }


            /* Shogun */
            #title_logo_shogun
            {

                right:  -20%;
                opacity: 0.0;
            }

            #title_logo_shogun.anim
            {
                animation-name: anim_title_logo_shogun;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.1s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #title_logo_shogun.hideanim
            {
                animation-name: anim_title_logo_shogun_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_title_logo_shogun
            {
                0%{
                    right:  -20%;
                    opacity: 0.0;
                    transform: translateY(-50%) scale(1.2);
                }

                100%{
                    right: -1%;
                    opacity: 1.0;
                    transform: translateY(-50%) scale(1.0);
                }
            }

            @keyframes anim_title_logo_shogun_hide
            {
                0%
                {
                    right: -1%;
                    opacity: 1.0;
                }

                100%
                {
                    right:  -20%;
                    opacity: 0.0;
                }
            }

            #credits_shogun.anim
            {

            }

            @keyframes anim_credits_shogun{
                
            }

            #title_landscape_jp2_shogun{
                    top: 0;
                    opacity: 0.0;               
            }

            #title_landscape_jp2_shogun.anim
            {
                animation-name: anim_title_landscape_jp2_shogun;
                animation-duration: 0.7s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.2s;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #title_landscape_jp2_shogun.hideanim
            {
                animation-name: anim_title_landscape_jp2_shogun_hide;
                animation-duration: 0.7s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.2s;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_title_landscape_jp2_shogun
            {
                0%
                {
                    top: -20%;
                    right: -10%;
                    opacity: 0.0;
                }

                100%
                {
                    top: 0;
                    right:  0;
                    opacity: 1.0;
                }

            }

            @keyframes anim_title_landscape_jp2_shogun_hide
            {
                0%
                {
                    top: 0;
                    right:  0;
                    opacity: 1.0;
                }

                100%
                {      
                    top: -20%;
                    right: -10%;
                    opacity: 0.0;
                }
                
            }

            #title_landscape_jp1_shogun
            {
                bottom: -20%;
                opacity: 0.0;
            }            

            #title_landscape_jp1_shogun.anim
            {
                animation-name: anim_title_landscape_jp1_shogun;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #title_landscape_jp1_shogun.hideanim
            {
                animation-name: anim_title_landscape_jp1_shogun_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }
            @keyframes anim_title_landscape_jp1_shogun
            {
                0%
                {
                    bottom: -20%;
                    left: -20%;
                    opacity: 0.0;
                    transform: scale(2.0);
                }

                100%
                {
                    bottom: 0%;
                    left:0;
                    opacity: 1.0;
                    transform: scale(1.0);
                }
                
            }

            @keyframes anim_title_landscape_jp1_shogun_hide
            {
                0%{
                    bottom: 0%;
                    left:0;
                    opacity: 1.0;
                }

                100%{
                    bottom: -20%;
                    left: -20%;
                    opacity: 0.0;
                }    
            }

            #card_shadow_shogun{
                opacity: 0.0;
            }

            #card_shadow_shogun.anim{
                animation-name: anim_card_shadow_shogun;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #card_shadow_shogun.hideanim{
                animation-name: anim_card_shadow_shogun_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_card_shadow_shogun{
                0%{
                    opacity: 0.0; 
                    
                }

                100%{
                    opacity: 1.0;
                }
            }

            @keyframes anim_card_shadow_shogun_hide
            {
                0%{
                    opacity: 1.0; 
                    
                }

                100%{
                    opacity: 0.0;
                }
            }

            #top_item_title_shogun{
                left: -100%;
                opacity: 0.0;  
            }

            #top_item_title_shogun.anim
            {
                animation-name: anim_top_item_title_shogun;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                
                animation-delay: 0.1s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

           #top_item_title_shogun.hideanim
            {
                animation-name: anim_top_item_title_shogun_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.1s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_top_item_title_shogun
            {
                0%
                {
                    left: -100%;
                    opacity: 0.0;
                }

                100%
                {
                    left: 0%;
                    opacity: 1.0;
                }
            }

            @keyframes anim_top_item_title_shogun_hide
            {
                0%
                {
                    left: 0%;
                    opacity: 1.0;
                }

                100%
                {
                
                    left: -100%;
                    opacity: 0.0;
                }
            }

            #top_item_description_shogun
            {
                    left: -100%;
                    opacity: 0.0;
            }

            #top_item_description_shogun.anim
            {
                animation-name: anim_top_item_description_shogun;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.2s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #top_item_description_shogun.hideanim
            {
                animation-name: anim_top_item_description_shogun_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.2s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_top_item_description_shogun
            {    
                0%
                {
                    left: -100%;
                    opacity: 0.0;
                }

                100%
                {
                    left: 0%;
                    opacity: 1.0;
                }   
            }

            @keyframes anim_top_item_description_shogun_hide
            {    
                0%
                {
                   left: 0%;
                    opacity: 1.0;
                }

                100%
                {
                
                    left: -100%;
                    opacity: 0.0;
                }   
            }

            #top_item_btn_shogun{
                left: -100%;
                opacity: 0.0;
            }

            #top_item_btn_shogun.anim
            {
                animation-name: anim_top_item_btn_shogun;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.3s;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #top_item_btn_shogun.hideanim
            {
                animation-name: anim_top_item_btn_shogun_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.3s;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_top_item_btn_shogun
            {
                0%
                {
                    left: -100%;
                    opacity: 0.0;
                }

                100%
                {
                    left: 0%;
                    opacity: 1.0;
                }   
            }

            @keyframes anim_top_item_btn_shogun_hide
            {
                0%
                {
                    left: 0%;
                    opacity: 1.0;
                }

                100%
                {
                    left: -100%;
                    opacity: 0.0;
                }   
            }

            /* Egypt */

            #title_logo_egypt
            {
                left: -20%;
                opacity: 0.0;
            }
            
            #title_logo_egypt.anim
            {
                animation-name: anim_title_logo_egypt;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_title_logo_egypt
            {
                0%
                {
                    left: -20%;
                    opacity: 0.0;
                     transform: translateY(-50%) scale(1.2);
                }

                100%
                {
                    left: -5%;
                    opacity: 1.0; 
                     transform: translateY(-50%) scale(1.0);
                }
            }

            #credits_egypt.anim{

            }

            @keyframes anim_credits_egypt
            {

            }

            #title_landscape_egypt{
                bottom: -20%;
                opacity: 0.0;
            }

            #title_landscape_egypt.anim
            {
                animation-name: anim_title_landscape_egypt;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_title_landscape_egypt
            {
                0%
                {
                    bottom: -20%;
                    opacity: 0.0;
                    transform: scale(2.0);
                }

                100%
                {
                    bottom: 0%;
                    opacity: 1.0;
                    transform: scale(1.0);
                }
                
            }

            #card_shadow_egypt
            {
                opacity: 0.0;
            }

            #card_shadow_egypt.anim
            {

                animation-name: anim_card_shadow_egypt;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
              
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            
            }

            @keyframes anim_card_shadow_egypt
            {
                0%{
                    opacity: 0.0;
                }

                100%{
                    opacity: 1.0;  
                }

                
            }

            #top_item_title_egypt
            {
                left: 20%;
                opacity: 0.0;
            }

            #top_item_title_egypt.anim
            {
                animation-name: anim_top_item_title_egypt;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                
                animation-delay: 0.2s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);

            }
            @keyframes anim_top_item_title_egypt{
             0%
                {
                    left: 20%;
                    opacity: 0.0;

                }

                100%
                {
                    left: 0%;
                    opacity: 1.0;

                }
                
            }

            #top_item_description_egypt
            {
                left: 20%;
                opacity: 0.0;
            }

            #top_item_description_egypt.anim{
                animation-name: anim_top_item_description_egypt;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.4s;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);

            }
            @keyframes anim_top_item_description_egypt{
                
                0%
                {
                    left: 20%;
                    opacity: 0.0;
                }

                100%
                {
                    left: 0%;
                    opacity: 1.0;
                }
                
            }

            #top_item_btn_egypt
            {
                left: 20%;
                opacity: 0.0;
            }

            #top_item_btn_egypt.anim
            {
                animation-name: anim_top_item_btn_egypt;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.6s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_top_item_btn_egypt
            {
                0%
                {
                    left: 20%;
                    opacity: 0.0;
                }

                100%
                {
                    left: 0%;
                    opacity: 1.0;
                }   
            }

            .effect
            {
                display: block;
                position: absolute;
                
                top:  0;
                left: 0;
                
                width:   100%;
                height: 100vh;

                background-color: transparent;
            }

            .egypt_hiero
            {
                display: block;
                position: absolute;
                width: 100%;
                height: 100%;

                object-fit: cover;

                top:50%;

                transform: translate(0%,-50%) scale(1.3);

                opacity: 0;

                transition: opacity 0.8s ease-out, transform 1.8s cubic-bezier(0,.56,.2,.98);

            }

            .egypt_hiero.anim{
                display: block;
                opacity: 0.05;
                transform: translate(0%,-50%) scale(1.0);
            }

            /*  Odin*/
            #title_logo_odin
            {
                right:  -20%;
                opacity: 0.0;
            }

            #title_logo_odin.anim
            {
                animation-name: anim_title_logo_odin;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.1s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #title_logo_odin.hideanim
            {
                animation-name: anim_title_logo_odin_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_title_logo_odin
            {
                0%
                {
                    right:  -20%;
                    opacity: 0.0;
                     transform: translateY(-50%) scale(1.2);
                }

                100%
                {
                    right: -1%;
                    opacity: 1.0;
                     transform: translateY(-50%) scale(1.0);
                }
            }

            @keyframes anim_title_logo_odin_hide
            {
                0%
                {
                    right: -1%;
                    opacity: 1.0;
                }

                100%
                {
                    right:  -20%;
                    opacity: 0.0;
                }
            }

            #title_landscape_odin{
                bottom: -20%;
                opacity: 0.0;
            }

            #title_landscape_odin.anim
            {
                animation-name: anim_title_landscape_odin;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #title_landscape_odin.hideanim
            {
                animation-name: anim_title_landscape_odin_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_title_landscape_odin
            {
                0%{
                    bottom: -20%;
                    left: -20%;
                    opacity: 0.0;
                    transform: scale(2.0);
                }

                100%{
                    bottom: 0%;
                    left:0;
                    opacity: 1.0;
                    transform: scale(1.0);
                }
            }

            @keyframes anim_title_landscape_odin_hide
            {
                0%{
                    bottom: 0%;
                    left:0;
                    opacity: 1.0;
                }

                100%{
                    bottom: -20%;
                    left: -20%;
                    opacity: 0.0;
                }    
            }

            #card_shadow_odin{
                opacity: 0.0;
            }


            #card_shadow_odin.anim{
                animation-name: anim_card_shadow_odin;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #card_shadow_odin.hideanim{
                animation-name: anim_card_shadow_odin_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_card_shadow_odin
            {
                0%{
                    opacity: 0.0; 
                    
                }

                100%{
                    opacity: 1.0;
                }
            }

            @keyframes anim_card_shadow_odin_hide
            {
                0%{
                    opacity: 1.0; 
                    
                }

                100%{
                    opacity: 0.0;
                }
            }

            #top_item_title_odin{
                left: -100%;
                opacity: 0.0;  
            }

            #top_item_title_odin.anim
            {
                animation-name: anim_top_item_title_odin;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                
                animation-delay: 0.1s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

           #top_item_title_odin.hideanim
            {
                animation-name: anim_top_item_title_odin_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.1s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_top_item_title_odin
            {
                0%
                {
                    left: -100%;
                    opacity: 0.0;
                }

                100%
                {
                    left: 0%;
                    opacity: 1.0;
                }
            }

            @keyframes anim_top_item_title_odin_hide
            {
                0%{
                    left: 0%;
                    opacity: 1.0;
                }

                100%{
                    left: -100%;
                    opacity: 0.0;
                }
            }

            #top_item_description_odin
            {
                    left: -100%;
                    opacity: 0.0;
            }

            #top_item_description_odin.anim
            {
                animation-name: anim_top_item_description_odin;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.2s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #top_item_description_odin.hideanim
            {
                animation-name: anim_top_item_description_odin_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.2s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_top_item_description_odin
            {    
                0%
                {
                    left: -100%;
                    opacity: 0.0;
                }

                100%
                {
                    left: 0%;
                    opacity: 1.0;
                }   
            }

            @keyframes anim_top_item_description_odin_hide
            {    
                0%
                {
                   left: 0%;
                    opacity: 1.0;
                }

                100%
                {
                
                    left: -100%;
                    opacity: 0.0;
                }   
            }

            #top_item_btn_odin{
                left: -100%;
                opacity: 0.0;
            }

            #top_item_btn_odin.anim
            {
                animation-name: anim_top_item_btn_odin;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.3s;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #top_item_btn_odin.hideanim
            {
                animation-name: anim_top_item_btn_odin_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.3s;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_top_item_btn_odin
            {
                0%{
                    left: -100%;
                    opacity: 0.0;
                }

                100%
                {
                    left: 0%;
                    opacity: 1.0;
                }   
            }

            @keyframes anim_top_item_btn_odin_hide
            {
                0%{
                    left: 0%;
                    opacity: 1.0;
                }

                100%
                {
                    left: -100%;
                    opacity: 0.0;
                }   
            }

            /* Aztech　*/
            #title_logo_aztech
            {
                left: -20%;
                opacity: 0.0;
            }
            
            #title_logo_aztech.anim
            {
                animation-name: anim_title_logo_egypt;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_title_logo_aztech
            {
                0%
                {
                    left: -20%;
                    opacity: 0.0;
                     transform: translateY(-50%) scale(1.2);
                }

                100%
                {
                    left: -5%;
                    opacity: 1.0; 
                     transform: translateY(-50%) scale(1.0);
                }
            }

            #credits_aztech.anim{

            }

            @keyframes anim_credits_aztech
            {

            }

            #title_landscape_aztech{
                bottom: -20%;
                opacity: 0.0;
            }

            #title_landscape_aztech.anim
            {
                animation-name: anim_title_landscape_aztech;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_title_landscape_aztech
            {
                0%
                {
                    bottom: -20%;
                    opacity: 0.0;
                    transform: scale(2.0);
                }

                100%
                {
                    bottom: 0%;
                    opacity: 1.0;
                    transform: scale(1.0);
                }    
            }

            #card_shadow_aztech
            {
                opacity: 0.0;
            }

            #card_shadow_aztech.anim
            {

                animation-name: anim_card_shadow_aztech;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
              
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            
            }

            @keyframes anim_card_shadow_aztech
            {
                0%{
                    opacity: 0.0;
                }

                100%{
                    opacity: 1.0;  
                }

                
            }

            #top_item_title_aztech
            {
                left: 20%;
                opacity: 0.0;
            }

            #top_item_title_aztech.anim
            {
                animation-name: anim_top_item_title_aztech;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                
                animation-delay: 0.2s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);

            }
            @keyframes anim_top_item_title_aztech{
             0%
                {
                    left: 20%;
                    opacity: 0.0;

                }

                100%
                {
                    left: 0%;
                    opacity: 1.0;

                }
            }

            #top_item_description_aztech{
                left: 20%;
                opacity: 0.0;
            }

            #top_item_description_aztech.anim{
                animation-name: anim_top_item_description_egypt;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.4s;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);

            }

            @keyframes anim_top_item_description_aztech{
                
                0%{
                    left: 20%;
                    opacity: 0.0;
                }

                100%
                {
                    left: 0%;
                    opacity: 1.0;
                }
                
            }

            #top_item_btn_aztech
            {
                left: 20%;
                opacity: 0.0;
            }

            #top_item_btn_aztech.anim
            {
                animation-name: anim_top_item_btn_aztech;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.6s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_top_item_btn_aztech
            {
                0%
                {
                    left: 20%;
                    opacity: 0.0;
                }

                100%
                {
                    left: 0%;
                    opacity: 1.0;
                }   
            }

            /* Emperor*/
            #title_logo_emperor
            {
                width: 64%;
                position: absolute;
                top: 57%;
                right:  -20%;
                opacity: 0.0;
            }

            #title_logo_emperor.anim{
                animation-name: anim_title_logo_emperor;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.1s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #title_logo_emperor.hideanim{
                animation-name: anim_title_logo_emperor_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_title_logo_emperor
            {
                0%
                {
                    right:  -20%;
                    opacity: 0.0;
                     transform: translateY(-50%) scale(1.2);
                }

                100%
                {
                    right: -1%;
                    opacity: 1.0;
                     transform: translateY(-50%) scale(1.0);
                }
            }

            @keyframes anim_title_logo_emperor_hide
            {
                0%
                {
                    right: -1%;
                    opacity: 1.0;
                }

                100%
                {
                    right:  -20%;
                    opacity: 0.0;
                }
            }

            #title_landscape_emperor{
                display: block;
                position: absolute;
                width: 55%;
                bottom: -20%;
                opacity: 0.0;
            }

            #title_landscape_emperor.anim
            {
                animation-name: anim_title_landscape_emperor;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #title_landscape_emperor.hideanim
            {
                animation-name: anim_title_landscape_emperor_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_title_landscape_emperor
            {
                0%{
                    bottom: -20%;
                    left: -20%;
                    opacity: 0.0;
                    transform: scale(2.0);
                }

                100%{
                    bottom: 0%;
                    left:0;
                    opacity: 1.0;
                    transform: scale(1.0);
                }
            }

            @keyframes anim_title_landscape_emperor_hide
            {
                0%{
                    bottom: 0%;
                    left:0;
                    opacity: 1.0;
                }

                100%{
                    bottom: -20%;
                    left: -20%;
                    opacity: 0.0;
                }    
            }

            #card_shadow_emperor{
                opacity: 0.0;
            }


            #card_shadow_emperor.anim{
                animation-name: anim_card_shadow_emperor;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #card_shadow_emperor.hideanim{
                animation-name: anim_card_shadow_emperor_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_card_shadow_emperor
            {
                0%{
                    opacity: 0.0; 
                    
                }

                100%{
                    opacity: 1.0;
                }
            }

            @keyframes anim_card_shadow_emperor_hide
            {
                0%{
                    opacity: 1.0; 
                    
                }

                100%{
                    opacity: 0.0;
                }
            }

            #top_item_title_emperor{
                left: -100%;
                opacity: 0.0;  
            }

            #top_item_title_emperor.anim
            {
                animation-name: anim_top_item_title_emperor;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                
                animation-delay: 0.1s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

           #top_item_title_emperor.hideanim
            {
                animation-name: anim_top_item_title_emperor_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.1s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_top_item_title_emperor
            {
                0%
                {
                    left: -100%;
                    opacity: 0.0;
                }

                100%
                {
                    left: 0%;
                    opacity: 1.0;
                }
            }

            @keyframes anim_top_item_title_emperor_hide
            {
                0%{
                    left: 0%;
                    opacity: 1.0;
                }

                100%{
                    left: -100%;
                    opacity: 0.0;
                }
            }

            #top_item_description_emperor
            {
                    left: -100%;
                    opacity: 0.0;
            }

            #top_item_description_emperor.anim
            {
                animation-name: anim_top_item_description_emperor;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.2s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #top_item_description_emperor.hideanim
            {
                animation-name: anim_top_item_description_emperor_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.2s;
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_top_item_description_emperor
            {    
                0%
                {
                    left: -100%;
                    opacity: 0.0;
                }

                100%
                {
                    left: 0%;
                    opacity: 1.0;
                }   
            }

            @keyframes anim_top_item_description_emperor_hide
            {    
                0%
                {
                   left: 0%;
                    opacity: 1.0;
                }

                100%
                {
                
                    left: -100%;
                    opacity: 0.0;
                }   
            }

            #top_item_btn_emperor{
                left: -100%;
                opacity: 0.0;
            }

            #top_item_btn_emperor.anim
            {
                animation-name: anim_top_item_btn_emperor;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.3s;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            #top_item_btn_emperor.hideanim
            {
                animation-name: anim_top_item_btn_emperor_hide;
                animation-duration: 0.8s;
                animation-fill-mode: forwards;
                animation-iteration-count: 1;
                animation-delay: 0.3s;
                
                animation-timing-function: cubic-bezier(0,.56,.2,.98);
            }

            @keyframes anim_top_item_btn_emperor
            {
                0%{
                    left: -100%;
                    opacity: 0.0;
                }

                100%
                {
                    left: 0%;
                    opacity: 1.0;
                }   
            }

            @keyframes anim_top_item_btn_emperor_hide
            {
                0%{
                    left: 0%;
                    opacity: 1.0;
                }

                100%
                {
                    left: -100%;
                    opacity: 0.0;
                }   
            }

            /* Emperor End */

            .effect
            {
                display: block;
                position: absolute;
                
                top:  0;
                left: 0;
                
                width:   100%;
                height: 100vh;

                background-color: transparent;
            }

            .egypt_hiero
            {
                display: block;
                position: absolute;
                width: 100%;
                height: 100%;

                object-fit: cover;

                top:50%;

                transform: translate(0%,-50%) scale(1.3);

                opacity: 0;

                transition: opacity 0.8s ease-out, transform 1.8s cubic-bezier(0,.56,.2,.98);

            }

            .egypt_hiero.anim{
                display: block;
                opacity: 0.05;
                transform: translate(0%,-50%) scale(1.0);
            }

            .dark_layer
            {
                display: block;
                position: absolute;

                top:  0;
                left: 0;

                background-color: #000;

                width:  100%;
                height: 100vh;
                opacity:1.0;

                transition: opacity 0.6s ease-out;
            }

            .dark_layer.anim{
                opacity:0.0;
            }

            /* INFO PAGE */
            
            .info_page_title_container
            {
                display: inline-block;
                position: absolute;

                top:50%;
                left:25%;

                transform:translate(-50%,-50%);
                text-align: left;
      
            }

            .info_page_title_container h1{
                color: #fff;
                font-size: 16px;
                letter-spacing: 10px;

                line-height: 2;


            }

            .info_page_title_container h2{
                color: #fff;
                font-size: 16px;
                letter-spacing: 3px;
                letter-spacing: 10px;
            }

            .info_page_scroll_container
            {
                display: block;
                position: absolute;

                bottom: 0;
                left: 45%;

                width: 40px;
                height: 100px;

                z-index: 20;

                cursor: pointer;
            }
            
            .info_page_scroll_btn_container
            {
                display: block;
                position: absolute;

                left:0;
                bottom: 0;

                transform: translate(0%,0);

                width: 100%;
                height: 60px;

                background-color: #9a4b40;

               text-align: center;

                     z-index: 20;
            }

            .info_page_scroll_container_title
            {
                color: #fff;
         
                letter-spacing: 3px;

                font-size: 8px;
            }

            .info_page_scroll_btn_container img{
                width: 16px;

                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);

          
            }

            .info_page_news_container
            {
                display: block;
                position: absolute;

                width: 50%;
                max-height: 50%;

                overflow-y: scroll;

                left: 45%;
                top:50%;

                transform:translateY(-50%);

                z-index: 16;
            }

            .info_page_news_date
            {
                font-size: 14px;
                color: #9a4b40;
       
                letter-spacing: 6px;
                margin-bottom: 10px;

            }

            .info_page_news_body{

                font-size: 12px;
                letter-spacing: 3px;
                color: #fff;

            }

            .info_page_news_more_btn_container{
                display: block;
                position: relative;

                width: 100%;
                height: 18px;

                margin-top: 10px;
                margin-bottom: 10px;
            }

            .info_page_news_more_btn_container span
            {
                position: absolute;
                right: 0;

                background-color: #121212;
                color: #ccc;

                font-size: 9px;
                letter-spacing: 2px;

                text-align: center;
                line-height: 18px;
                height: 18px;
                padding-left: 24px;
                padding-right: 24px;

            }

            .info_page_news_row{
                display: block;
                position: relative;
                width: 80%;

                overflow: hidden;

                margin-bottom: 15px;

                opacity: 1.0;
                transition: opacity 0.5s ease-out;

                cursor: pointer;
            }

            .info_page_news_row:hover
            {

                opacity: 0.5;
            }

            #container{
                opacity: 0.0;
                transition: opacity 0.5s ease-out;
            }

            #container.visible
            {
                opacity: 1.0;
            }

            #info_news_container.ready
            {
                opacity: 0;
                transform:translate(50vw,-50%);
                transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0,.56,.2,.98);

            }

            #info_news_container.anim
            {
                transform:translate(0vw,-50%);
                opacity: 1;
            }

             #english_info.ready.active{
                display: block;
             }

            #english_info.ready.active
            {
                opacity: 0;
                transform:translate(50vw,-50%);
                transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0,.56,.2,.98);

            }

            #english_info.anim.active
            {
                transform:translate(0vw,-50%);
                opacity: 1;
            }

            #english_info{
                opacity: 0.0;
                display: none;
            }


            #info_page_scroll_container.ready{

                transform:translateY(100%);
                opacity: 0;

                transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0,.56,.2,.98);

            }


            #info_page_scroll_container.anim{
                transform:translateY(0%);
                opacity: 1;
            }

            #info_news_container.en{
                opacity: 0 !important;
                display: none !important;
            }

            #info_title1.ready
            {
                transform:translateX(-50vw);
                opacity: 0;
                transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0,.56,.2,.98);
            }
            #info_title1.anim{
                transform:translateX(0vw);
                opacity: 1;
            }


            #info_title2.ready{
                transform:translateX(-50vw);
                opacity: 0;
              
                transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0,.56,.2,.98);
                transition-delay: 0.1s;
            }

          
            #info_title2.anim{
                transform:translateX(0vw);
                opacity: 1;
            }

            .br_sp
            {
                display: none;
            }

            /* ARTICLE */

            .info_page_article_container{
                display: block;
                position: relative;
                width: 100%;
                height: 100vh;
                z-index: 14;
            }

            .article_container
            {
                display:  block;
                position: absolute;
                width: 80%;
                
                top:50%;
                left: 50%;

                transform: translate(-50%,-50%);

                max-width: 700px;

                z-index: 120;

                overflow-y: scroll;
            }

            .article_date
            {
                font-size: 14px;
                color: #9a4b40;

                letter-spacing: 6px;
            }

            .article_title
            {
                font-size: 22px;
                letter-spacing: 4px;
                color: #fff;
            }

             .article_body
            {
                margin-top: 40px;
                font-family: sans-serif;
                font-size: 12px;
                color: #fff;
                line-height: 1.8;
            }

            .article_body a{
                color: #f781b6;
            }

            span.pc{
                    display: inlin;
            }

            .article_body img{
                margin-top: 20px;
                height: 300px;
            }

            /* language */
            .lang_container{
                display: block;

                position: absolute;
                top:50px;
                right: 50px;
                width: auto;
                height: auto;
             

                font-size: 20px;

                color: #fff;



                cursor: pointer;
                z-index: 15;
            }

            .lang_container span
            {
                opacity: 0.3;
                color: #fff;

                padding-right: 7px;
                cursor: pointer;

            }

            .lang_container span.selected
            {
                opacity: 1.0;
                cursor: pointer;
            }

            /* mobile */
            @media screen and (max-width: 600px)
            {
                br{
                    display: none;
                }

                span.pc{
                    display: none;
                }

                .info_page_news_container{
                    max-height: 210px;
                }

                 /* ARTICLE */
                .article_container
                {
                    display:  block;
                    position: absolute;
                    width: 80%;

                    padding-left: 20%;
                    padding-top: 15%;

                    
                    top: 0%;
                    left:0%;

                    transform: translate(0%,0%);

                    max-width: 700px;
                    
                }

                .article_title{
                    font-size: 18px;
                }

                .br_sp
                {
                    display: inline;
                }

                .top_subtitle_container_mage{
                    display: none;
                }

                .top_subtitle_container_shogun{
                    display: none;
                }

                .top_subtitle_container_egypt{
                    display: none;
                }

                .top_subtitle_container_odin{
                    display: none;
                }

                .top_subtitle_container_aztech{
                    display: none;
                }

                .title_logo{
                    top:30%;
                    width: 90%;
                }

                .title_logo_shogun{
                    top:30%;
                    width: 90%;
                }

                .title_logo_egypt{
                    top:30%;
                    width: 80%;
                }

                .title_logo_odin{
                    top:30%;
                    width: 80%;
                }
                .title_logo_aztech{
                    top:30%;
                    width: 80%;
                }


                .title_landscape_catsle{
                    width: 80%;
                }

                .title_landscape_jp1{
                    width: 80%;
                }

                .title_landscape_egypt{
                    width: 80%;
                }

                .title_landscape_aztech{
                    width: 80%;
                }

                .top_item_container{
                    width: 84%;
                    right: 8%;
                 
                    z-index: 10;
                    top:66%;

                    top:auto;
                    right:auto;

                    bottom: 10%;
                    left:10%;

                    /*
                    text-shadow: 0px 1px 6px #000; */

                    transform: initial;

                }

                .top_item_container_shogun{
                    width: 84%;
                    right: 8%;
                    z-index: 10;

                    top:66%;

                    top:auto;
                    right:auto;

                    bottom: 10%;
                    left:10%;
/*
                    text-shadow: 0px 1px 6px #000; */

                    transform: initial;
                }

                .top_item_container_egypt{
                    width: 84%;
                    right: 8%;

                    z-index: 10;
                    top:66%;

                    top:auto;
                    right:auto;

                    bottom: 10%;
                    left:10%;

                    /*
                    text-shadow: 0px 1px 6px #000; */

                    transform: initial;

                }

                .top_item_container_odin{
                    width: 84%;
                    right: 8%;
                    z-index: 10;

                    top:66%;

                    top:auto;
                    right:auto;

                    bottom: 10%;
                    left:10%;

                   

                    transform: initial;
                }

                .top_item_container_aztech{
                    width: 84%;
                    right: 8%;

                    z-index: 10;
                    top:66%;

                    top:auto;
                    right:auto;

                    bottom: 10%;
                    left:10%;

                    /*
                    text-shadow: 0px 1px 6px #000; 
                    */

                    transform: initial;

                }

                .top_item_container_emperor{
                    transform: initial;

                    top:auto;
                    right:auto;

                    bottom: 10%;
                    left:10%;

                    width: 84%;
                    z-index: 10;
                }


                #top_item_btn_mage{
                    text-shadow: none;
                }
                #top_item_btn_shogun{
                   text-shadow: none;
                
                }

                #top_item_btn_egypt{
                   text-shadow: none;
                }
                #top_item_btn_aztech{
                   text-shadow: none;
                }


                .top_item_title
                {
                    font-size: 18px;
                    line-height: 19px;
                }

                .top_item_btn{
                    margin-top: 15px;
                }

                .view_container{
                    min-height: 360px;
                }

                .info_page_news_row{
                    margin-left:  auto;
                    margin-right: auto;
                }

                .info_page_news_container{
                    display: block;
          
                    width: 80%;
                    height: 100%;

                    left: 10%;

                    top: 60%;

                    z-index: 15;
                }

                .info_page_title_container{
                    display: block;
  
                    top: 20%;
                    left: 50%;
                    transform: translate(-50%,-50%);
                }

                .pagenation_container{
                    right: 8%;
                }

                .info_page_news_body{
                    font-size: 10px;
                }

                .info_page_news_more_btn_container span{
                    right: auto;
                    left: 0;
                    font-family: sans-serif;
                }

                .top_item_description
                {
            
                    margin-top: 15px;

          
                
                }

                .inner_container{
                    top: 15px;
                    left: 15px;
                    width: calc(100% - 30px);
                    height: calc(100% - 30px);
                }

                .back_btn_container{

                    width:40px;
                    height: 40px;

                }

                .arrow img{
                    width: 6px;
                }

                canvas{
                    display: block;
                    position: absolute;
                    top: 10vh;
                    left: 0px;
                }

                #top_subtitle_container_emperor{
                    display: none;
                }

                #top_item_title_shogun{
                    text-align: right;
                }
                #top_item_description_shogun{
                    text-align: right;
                }

                #top_item_title_odin{
                    text-align: right;
                }
                #top_item_description_odin{
                    text-align: right;
                }

                #top_item_title_emperor{
                    text-align: right;
                }
                #top_item_description_emperor{
                    text-align: right;
                }

                #top_item_btn_shogun{
                    float: right;
                }

                #top_item_btn_odin{
                    float: right;
                }


                #top_item_btn_emperor{
                    float: right;
                }

                #title_landscape_emperor{
                    width: 100%;
                }

                #title_logo_emperor{
                    top: 40%;
                    width: 100%;
                }

                #title_logo_aztech{
                    width: 100%;
                }

                #title_logo_odin{
                    width: 100%;
                }

                #title_logo_egypt{
                    width: 100%;   
                }
                #title_logo_shogun{
                    width: 100%;
                }

                #title_logo_mage{
                    width: 100%;
                }


            }