@charset "utf-8";

/* ----------------------- */

#top{
    position: relative;
    user-select: none;
}
.top-wrap{
    height: 100vh;
}
.top-visual{
    width: 100%;
    padding-bottom: 108rem;
    overflow: hidden;
    position: relative;
}
.top-visual-themes{
    width: 192rem;
    height: 219.8rem;
    overflow: hidden;
    position: absolute;
    top: 76%;
    left: 50%;
    transform: translate(-50%, -50%);
}

h1{
    width: 11.1rem;
    position: absolute;
    top: 0;
    left: 1rem;
    box-shadow: 0px 0.3rem 0.7rem 0rem rgba(0, 0, 0, 0.15);
    border-radius: 0 0 1rem 1rem;
}


@media (max-width: 1024px) {
    .top-visual{
        padding-bottom: 177.866%;
    }
    .top-visual-themes{
        width: 193.6%;
        top: 0;
        transform: translate(-50%, 0) scale(1.19);
        transform-origin: top center;
        margin-top: -23.6%;
    }
}

.area-light, .area-dark{
    opacity: 0;
    filter: blur(1rem);
    transition: var(--transition-theme);
}
.theme-light #top .area-light, .theme-dark #top .area-dark{
    opacity: 1;
    filter: blur(0);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/****************************************
トップメニュー
****************************************/
nav{
    position: relative;
    z-index: 3;
}
nav a{
    width: 12.708%;
    display: block;
    position: absolute;
    z-index: 5;
}
nav a img{
    transform: translate(0, 0);
}
.loaded .nav-about img{ animation: keyframe-shake 7.5s 0s linear infinite; }
.loaded .nav-features img{ animation: keyframe-shake 7.5s 0.5s linear infinite; }
.loaded .nav-company img{ animation: keyframe-shake 7.5s 1s linear infinite; }
@keyframes keyframe-shake{
    0% { transform: translate(0, 0); }
    50% { transform: translate(0, 0); }
    51% { transform: translate(-0.2rem, 0); }
    51.75% { transform: translate(0.2rem, 0); }
    52.5% { transform: translate(-0.2rem, 0); }
    53.25% { transform: translate(0.2rem, 0); }
    54% { transform: translate(-0.2rem, 0); }
    54.75% { transform: translate(0.2rem, 0); }
    55.5% { transform: translate(-0.2rem, 0); }
    56.25% { transform: translate(0.2rem, 0); }
    57% { transform: translate(0, 0); }
    100% { transform: translate(0, 0); }
}

.nav-about{ margin: 22.864% 0 0 55%; }
.nav-features{ margin: 40.989% 0 0 28.645%; }
.nav-company{ margin: 49.218% 0 0 46.197%; }

nav a img{
    position: relative;
    z-index: 2;
}
nav a:before{
    content: "";
    display: block;
    position: absolute;
    pointer-events: none;
}
.nav-about:before{
    width: 19.262%;
    padding-bottom: 33.606%;
    background: url("../images/top/common/nav-about-line.png") no-repeat center bottom / 100% auto;
    top: 70%;
    left: 32%;
}
.nav-features:before{
    width: 6.557%;
    padding-bottom: 37.295%;
    background: url("../images/top/common/nav-features-line.png") no-repeat center bottom / 100% auto;
    top: 66%;
    left: 55%;
}
.nav-company:before{
    width: 19.262%;
    padding-bottom: 33.606%;
    background: url("../images/top/common/nav-company-line.png") no-repeat center bottom / 100% auto;
    top: 64%;
    left: 31.8%;
}


/****************************************
オブジェクトの位置（モード共通） 
****************************************/
.top-objects > div{ position: absolute; pointer-events: none; }
.theme-light .area-light .top-objects > div{ pointer-events: initial; }
.theme-dark .area-dark .top-objects > div{ pointer-events: initial; }

/*** レイヤー1 ***/
/* 背景 */
.obj-bg { width: 100%; }
/* 壁（左） */
.obj-wall-card{ width: 8.802%; margin: 22.083% 0 0 4.375%; }
.obj-wall-poster{ width: 7.343%; margin: 40.989% 0 0 6.666%; }
.obj-wall-calender{ width: 9.010%; margin: 21.041% 0 0 16.822%; }
/* 窓 */
.obj-window{ width: 36.562%; margin: -7.708% 0 0 45.312%; }
.obj-window > img{ position: relative; z-index: 2; }
.obj-window-landscape{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: #111337;
    margin: -16% 0 0 0;
    transform: rotateX(-28.6deg) rotateY(-34deg);
    z-index: 1;
    overflow: hidden;
}
.obj-window-landscape-rain:before,
.obj-window-landscape-rain:after{
    content: "";
    display: block;
    width: 140%;
    height: 140%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url("../images/top/animation/window/rain.png");
    background-size: 40% auto;
    background-position: 0rem 0rem;
    animation: keyframe-window-rain 20s linear infinite;
    opacity: 0;
    rotate: 20deg;
}
.obj-window-landscape-rain{
    position: relative;
    width: 100%;
    height: 100%;
}
.obj-window-landscape-rain:after{ transform: translate(-15rem, -10rem); }
@keyframes keyframe-window-rain{
    0% { background-position: 0rem 0rem; opacity: 0; }
    45% { background-position: 0rem 0rem; opacity: 0; }
    50% { opacity: 1; }
    95% { opacity: 1; }
    100% { background-position: 0rem 500rem; opacity: 0; }
}
/* 棚（左） */
.obj-onboard-left{ width: 16.354%; margin: 19.947% 0 0 40.416%; }
.obj-onboard-hard{ width: 8.020%; margin: 17.291% 0 0 42.656%; }
.obj-onboard-leaf{ width: 5.052%; margin: 18.906% 0 0 50.260%; }
.obj-onboard-figures{ width: 6.041%; margin: 22.083% 0 0 44.895%; }
/* 棚（右） */
.obj-board-deck{ width: 24.895%; margin: 22.864% 0 0 59.843%; }
.obj-onboard-right{ width: 12.135%; margin: 31.302% 0 0 70.885%; }
.obj-onboard-books{ width: 8.281%; margin: 24.427% 0 0 72.604%; }
.obj-onboard-backlight{ width: 10.260%; margin: 31.718% 0 0 70.572%; }
.obj-onboard-controller{ width: 5.833%; margin: 38.072% 0 0 71.666%; }
/* 壁（右） */
.obj-wall-pink{ width: 4.375%; margin: 28.802% 0 0 86.041%; }
.obj-wall-green{ width: 4.375%; margin: 33.072% 0 0 91.718%; }
.obj-wall-blue{ width: 4.375%; margin: 39.114% 0 0 87.656%; }
.obj-gitter{ width: 15.104%; margin: 54.895% 0 0 83.020%; }
/* キャビネット */
.obj-cabinet{ width: 23.489%; margin: 47.760% 0 0 18.020%; }
.obj-cabinet-figure{ width: 2.239%; margin: 58.333% 0 0 21.25%; }
/* 机下 */
.obj-roomshoes{ width: 10.416%; margin: 72.604% 0 0 45.677%; }
.obj-desktop{ width: 19.062%; margin: 62.395% 0 0 58.020%; }

/*** レイヤー2 ***/
/* 机 */
.obj-desk{ width: 72.187%; margin: 32.552% 0 0 12.031%; }
.obj-cable-left{ width: 9.322%; margin: 27.864% 0 0 28.281%; }
.obj-cable-right{ width: 22.760%; margin: 46.510% 0 0 45.885%; }
/* スタンド */
.obj-stand{ width: 34.739%; margin: 34.010% 0 0 33.072%; }
.obj-speaker{ width: 12.395%; margin: 44.218% 0 0 64.791%; }
.obj-monitor-left{ width: 21.145%; margin: 22.395% 0 0 29.635%; }
.obj-monitor-left-tool{ width: 34.729%; margin: 22.395% 0 0 29.635%; position: absolute; top: 0; left: 0; z-index: 1; margin: 37.5% 0 0 11%; }
.obj-monitor-right{ width: 20.416%; margin: 24.635% 0 0 50.781%; }
.obj-monitor-mini{ width: 5.312%; padding-bottom: 7.708%; margin: 38.645% 0 0 45.885%; }
.obj-monitor-mini img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.loaded .obj-monitor-mini02{ animation: keyframe-monitor-mini 2s 1s linear infinite; opacity: 0; }
@keyframes keyframe-monitor-mini{
    0% { opacity: 1; }
    49.999% { opacity: 1; }
    50% { opacity: 0; }
    99.999% { opacity: 0; }
    100% { opacity: 1; }
}
.obj-softs{ width: 6.302%; margin: 41.041% 0 0 50.260%; }
/* 机右側 */
.obj-lightstand{ width: 12.864%; margin: 19.062% 0 0 21.822%; }
.obj-hard-gray{ width: 11.406%; margin: 38.593% 0 0 21.354%; }
.obj-earphone{ width: 6.718%; margin: 49.218% 0 0 18.281%; }
/* 机中央 */
.obj-mousepad{ width: 37.968%; margin: 46.197% 25.781%; }
.obj-keyboard-left{ width: 10.156%; margin: 47.135% 0 0 27.864%; }
.obj-controller-arcade{ width: 15%; margin: 51.458% 0 0 36.562%; }
.obj-cards{ width: 17.031%; margin: 52.083% 0 0 59.166%; }
.obj-keyboard-right{ width: 11.458%; margin: 55.989% 0 0 51.406%; }
.obj-mouse{ width: 3.281%; margin: 62.812% 0 0 51.093%; }
/* 机左側 */
.obj-hard-large{ width: 7.656%; margin: 36.145% 0 0 75.885%; }
.obj-sticker{ width: 3.385%; margin: 57.864% 0 0 68.229%; }
.obj-tablet{ width: 10.677%; margin: 58.802% 0 0 61.718%; }
/* 椅子 */
.obj-chair{ width: 21.822%; margin: 55.729% 0 0 25.937%; }


/* アニメーション チャットツール */
.obj-monitor-left-animation{
    width: 48.275%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 12% 0 0 28%;
    transform: rotateX(-14deg) rotateY(-16deg);
}
.obj-monitor-left-animation-area{
    width: 58.2%;
    height: 86.2%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 11.2% 0 0 41.5%;
    overflow: hidden;
}
.obj-monitor-left-animation-area div{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-left: 3.478%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: end;
}
.obj-monitor-left-animation-area div > img{
    margin-bottom: 7%;
}
.obj-monitor-left-animation-area-msg1{ width: 79.279%; }
.obj-monitor-left-animation-area-msg2{ width: 65.765%; }
.obj-monitor-left-animation-area-msg3{ width: 65.765%; }
.obj-monitor-left-animation-area-msg4{ width: 70.270%; }

/* アニメーション ゲーム */
.obj-monitor-right-animation{
    width: 92%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 23% 0 0 3%;
    transform: rotateX(-32deg) rotateY(-33deg);
}
.animation-game-hp > div{
    background-color: #fff;
    position: absolute;
    width: 36.697%;
    padding-bottom: 4.128%;
    margin-top: 9.174%;
    top: 0;
    overflow: hidden;
}
.animation-game-hp-left{
    left: 0;
    margin-left: 5.275%;
}
.animation-game-hp-right{
    right: 0;
    margin-right: 5.275%;
}
.animation-game-hp-left:before,
.animation-game-hp-right:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}
.animation-game-hp-left:before{
    background-color: #4aaa3f;
    
}
.play .animation-game-hp-left:before{ animation: keyframe-game-hp-left 10s linear infinite; }
@keyframes keyframe-game-hp-left{
    0% { right: 0; }
    32% { right: 0; }
    37% { right: 30%; }
    55% { right: 30%; }
    60% { right: 0; }
    100% { opacity: 1; }
}
.animation-game-hp-right:before{
    background-color: #c35800;
    left: 70%;
}
.animation-game-chara > div{
    position: absolute;
    top: 0;
}
.animation-game-chara-left{
    width: 23.623%;
    left: 0;
    margin: 42.201% 0 0 8.256%;   
}
.play .animation-game-chara-left{ animation: keyframe-game-chara-left 10s linear infinite; }
@keyframes keyframe-game-chara-left{
    0% { opacity: 1; }
    29% { opacity: 1; }
    30% { opacity: 0.6; }
    30.5% { opacity: 1; }
    31% { opacity: 0.6; }
    31.5% { opacity: 1; }
    32% { opacity: 0.6; }
    32.5% { opacity: 1; }
    100% { opacity: 1; }
}
.animation-game-chara-right{
    width: 24.541%;
    right: 0;
    margin-top: 37.844%;
    margin-right: 6.880%;
    transform: rotate(0deg);
    transform-origin: bottom right;
}
.play .animation-game-chara-right{ animation: keyframe-game-chara-right 10s linear infinite; }
@keyframes keyframe-game-chara-right{
    0% { transform: rotate(0deg); }
    5% { transform: rotate(10deg); }
    10% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}
.animation-game-attack{
    width: 12.385%;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 0;
    margin: 46.788% 33.486% 0 0;
    margin-top: 46.788%;
    margin-right: 33.486%;
    
}
.play .animation-game-attack{ animation: keyframe-game-attack 10s linear infinite; }
@keyframes keyframe-game-attack{
    0% { opacity: 0; }
    9% { opacity: 0; }
    10% { opacity: 1; margin-right: 33.486%; }
    30% { opacity: 1; margin-right: 56.486%; }
    31% { opacity: 0; }
    100% { margin-right:33.486%; }
}
.animation-game-effect > div{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
}
.animation-game-effect-leaf_left{
    width: 3.669%;
    margin: 38.761% 0 0 4.128%;
    
}
.play .animation-game-effect-leaf_left{ animation: keyframe-game-effect 10s 0.1s linear infinite; }
.animation-game-effect-leaf_right{
    width: 6.192%;
    margin: 32.568% 0 0 30.963%;
    
}
.play .animation-game-effect-leaf_right{ animation: keyframe-game-effect 10s linear infinite; }
.animation-game-effect-kira{ width: 3.211%; }
.animation-game-effect-kira.--1{ margin: 47.477% 0 0 5.275%; }
.animation-game-effect-kira.--2{ margin: 35.779% 0 0 22.935%; }
.animation-game-effect-kira.--3{ margin: 49.082% 0 0 31.651%; }
.play .animation-game-effect-kira.--1{ animation: keyframe-game-effect 10s 0.2s linear infinite; }
.play .animation-game-effect-kira.--2{ animation: keyframe-game-effect 10s linear infinite; }
.play .animation-game-effect-kira.--3{ animation: keyframe-game-effect 10s 0.1s linear infinite; }
@keyframes keyframe-game-effect{
    0% { opacity: 0; }
    44% { opacity: 0; }
    45% { opacity: 1; }
    47% { opacity: 0.5; }
    49% { opacity: 1; }
    51% { opacity: 0.5; }
    53% { opacity: 1; }
    55% { opacity: 0; }
    100% { opacity: 0; }
}

/* アニメーション スマートフォン */
.obj-smartphone{
    width: 4.114%;
    top: 0;
    left: 0;
    margin: 45.2% 0 0 42%;
    transform: rotate(-24deg);
}
.obj-smartphone:after{
    content: "";
    display: block;
    width: 87.8%;
    height: 93%;
    background: #565656;
    position: absolute;
    top: 48%;
    left: 52%;
    transform: translate(-50%, -50%);
    border-radius: 0.5rem;
    opacity: 0;
}
.loaded .obj-smartphone:after{ animation: keyframe-smartphone-frame 10s linear infinite; }
@keyframes keyframe-smartphone-frame{
    0% { opacity: 1; }
    40% { opacity: 1; }
    42% { opacity: 0; }
    98% { opacity: 0; }
    100% { opacity: 1; }
}
.obj-smartphone-clock > div{
    position: absolute;
    top: 0;
    left: 0;
}
.obj-smartphone-sep{ width: 2.531%; margin: 38% 0 0 50.04%; }
.obj-smartphone-clock1{ width: 11.392%; margin: 38% 0 0 25%; }
.obj-smartphone-clock2{ width: 11.392%; margin: 38% 0 0 37%; }
.obj-smartphone-clock3{ width: 11.392%; margin: 38% 0 0 54%; }
.obj-smartphone-clock4{ width: 11.392%; margin: 38% 0 0 66%; }
.obj-smartphone-notice > div{
    position: absolute;
    top: 0;
    left: 0;
    scale: 0;
}
.obj-smartphone-notice1{ width: 74.683%; margin: 57% 0 0 14.6%; }
.obj-smartphone-notice2{ width: 74.683%; margin: 85% 0 0 14.6%; }
.loaded .obj-smartphone-notice1{ animation: keyframe-smartphone-msg 10s ease infinite; }
.loaded .obj-smartphone-notice2{ animation: keyframe-smartphone-msg 10s 1.5s ease infinite;  }
@keyframes keyframe-smartphone-msg{
    0% { opacity: 0; }
    44% { scale: 0; }
    45% { scale: 1; }
    100% { scale: 1; }
}




@media (max-width: 1024px) {
    h1{
        left: 0;
    }
    nav a{
        width: 14%;
    }
    .nav-about {
        margin: 20.2% 0 0 56.3%;
    }
    .nav-features{
        margin: 41.4% 0 0 30.6%;
    }
    .nav-company {
        margin: 49.4% 0 0 50.4%;
    }

    .nav-about:before{
        top: 72%;
        left: 12%;
    }
    .nav-features:before{
        width: 25.409%;
        padding-bottom: 29.098%;
        background: url("../images/top/common/nav-features-line-sp.png") no-repeat center bottom / 100% auto;
        top: 64%;
        left: 37%;
    }
    .nav-company:before{
        width: 30.737%;
        padding-bottom: 24.180%;
        background: url("../images/top/common/nav-company-line-sp.png") no-repeat center bottom / 100% auto;
        top: 71%;
        left: -10%;
    }
}