@charset "UTF-8"; .onlyPC{ display: none;} .onlySP{ display: inline-block;} section.area{position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height: 160vw; overflow: hidden;overflow-y: auto; display: none;} video{ visibility: hidden;} video.show{ visibility: visible;} .clickBtn{ cursor: pointer; position: relative; display: inline-block;} .safaCover{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; outline: 0;} #forPC { display: none; position: fixed; z-index: 99900; top: 0; left: 0; width: 100%; height: 100%; background: #000; color: #fff;} #forPC .contentsWrap{ position: absolute; width: 100%; height: 100%; max-width: 1920px;background: url(../images/music_parade/shindan/pc/main.png) center center no-repeat; background-size: contain; } #forPC .copy{ position: fixed; bottom: 0; left: 0; width: 100%; height: 20px;background: url(../images/music_parade/shindan/common/shadow_footer.png) repeat-x; background-size: auto 100%;} #forPC .copy:after{ content: '' ; display: block; position: absolute; bottom: 0; left: 0; width: 99%; height: 100%;background: url(../images/music_parade/shindan/common/copyright.png) right center no-repeat; background-size: auto 80%; } .tate #forPC{ overflow-y: scroll; align-items: center;} .tate #forPC .contentsWrap{ position: relative; top: 0; left: 0; width: 100%; height: auto; max-width: none; transform: translate(0,0); background-size: auto 100%; } .tate #forPC .contentsWrap:after{ content: ''; display: block; width: 100%; height: 0; padding-top: 133.33333%;} .pcDevice #forPC{ display: grid;} #effectCover{display: none; position: fixed; z-index: 9900; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; } .section_shindanEntrance #effectCover{ pointer-events: none;} /* ----- #top ----- */ #bgBase{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #369; } #container{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/music_parade/shindan/bg/base.png) center center no-repeat; background-size: cover; } @supports (-webkit-touch-callout: none) { body { /* Safari用のハック */ height: -webkit-fill-available; } } #main{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;} .section_shindanResult #main{ overflow-y: scroll;-webkit-overflow-scrolling: touch;} #base{ position: relative; top: 0; left: 0; width: 100%; height: 100%; overflow: auto;} #siteCopy{ position: fixed; bottom: 0; left: 0; width: 100%; height: 3vw;background: url(../images/music_parade/shindan/common/shadow_footer.png) repeat-x; background-size: auto 100%;} #siteCopy:after{ content: '' ; display: block; position: absolute; bottom: 0; left: 0; width: 99%; height: 100%;background: url(../images/music_parade/shindan/common/copyright.png) right center no-repeat; background-size: auto 3vw; } #soundControl{ position: fixed; bottom: 3vw; left: 3vw; width: 10vw; height: 10vw; z-index: 9800; background: url(../images/music_parade/shindan/btn/btn_sound_off.png) no-repeat; background-size: contain; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 500ms ease-in-out 0ms; } .soundOn #soundControl{background: url(../images/music_parade/shindan/btn/btn_sound_on.png) no-repeat; background-size: contain;} .soundControlOn #soundControl{ opacity: 1; pointer-events: all;} .kvFinish #siteCopy{ display: none;} .section_shindanResult #siteCopy{ display: none;} /* ----- #bgUnit ----- */ #bgUnit{position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;} #bgUnit .star{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;} #bgUnit .star2{ background: url(../images/music_parade/shindan/bg/base_star.png) center center no-repeat; background-size: cover;} #bgUnit .deco{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/music_parade/shindan/bg/base_deco.png) center center no-repeat; background-size: cover; } #bgUnit .starDeco{ position: absolute; left: 0; width: 10vw; height: 10vw; background: url(../images/music_parade/shindan/anime/star.svg) center center no-repeat; background-size: contain; border: solid 0px #f30; } #bgUnit .starDeco{animation: star_anime_zoom 30.0s ease infinite alternate; transform: scale(0) } /* #bgUnit .starDeco{ position: absolute; left: 0; width: 10vw; height: 10vw; background: url(../images/music_parade/shindan/anime/star.png) center 0 no-repeat; background-size: 100% auto; border: solid 1px #f30; } #bgUnit.anim .starDeco{animation: star_anime 2.0s steps(60) 0s infinite; } */ .a{animation: star_kirakira 1.0s ease-in-out 0s infinite alternate;} /* #bgUnit .starDeco:nth-of-type(1) { top: 15vw; left: 85vw; animation-delay: 100ms;} #bgUnit .starDeco:nth-of-type(2) { top: 25vw; left: 90vw; animation-delay: 1500ms;} #bgUnit .starDeco:nth-of-type(3) { top: 30vw; left: 15vw; animation-delay: 3500ms;} #bgUnit .starDeco:nth-of-type(4) { top: 63vw; left: 25vw; animation-delay: 800ms;} #bgUnit .starDeco:nth-of-type(5) { top: 85vw; left: 65vw; animation-delay: 4200ms;} #bgUnit .starDeco:nth-of-type(6) { top: 5vw; left: 10vw; animation-delay: 600ms;} #bgUnit .starDeco:nth-of-type(7) { top: 60vw; left: 3vw; animation-delay: 1200ms;} #bgUnit .starDeco:nth-of-type(8) { bottom: 35vw; left: 15vw; animation-delay: 3400ms;} #bgUnit .starDeco:nth-of-type(9) { bottom: 10vw; left: 5vw; animation-delay: 100ms;} #bgUnit .starDeco:nth-of-type(10) { bottom: 10vw; left: 85vw; animation-delay: 2000ms;} #bgUnit .starDeco:nth-of-type(11) { bottom: 20vw; left: 80vw; animation-delay: 4300ms;} #bgUnit .starDeco:nth-of-type(12) { bottom: 10vw; left: 70vw; animation-delay: 1800ms;} #bgUnit .starDeco:nth-of-type(13) { top: 12vw; left: 40vw; animation-delay: 5200ms;} #bgUnit .starDeco:nth-of-type(14) { top: 40vw; left: 43vw; animation-delay: 4600ms;} #bgUnit .starDeco:nth-of-type(15) { bottom: 65vw; left: 25vw; animation-delay: 1500ms;} #bgUnit .starDeco:nth-of-type(16) { bottom: 30vw; left: 45vw; animation-delay: 800ms; } #bgUnit .starDeco:nth-of-type(17) { top: 50vw; left: 75vw; animation-delay: 2300ms; } #bgUnit .starDeco:nth-of-type(18) { bottom: 50vw; left: 75vw; animation-delay: 1200ms;} #bgUnit .starDeco:nth-of-type(19) { bottom: 20vw; left: 10vw; animation-delay: 3200ms;} #bgUnit .starDeco:nth-of-type(20) { bottom: 25vw; left: 90vw; animation-delay: 800ms; } */ #bgUnit .starDeco:nth-of-type(1) { top: 15vw; left: 85vw; animation-delay: 100ms;} #bgUnit .starDeco:nth-of-type(2) { top: 25vw; left: 90vw; animation-delay: 11500ms;} #bgUnit .starDeco:nth-of-type(3) { top: 30vw; left: 15vw; animation-delay: 3500ms;} #bgUnit .starDeco:nth-of-type(4) { top: 63vw; left: 25vw; animation-delay: 7300ms;} #bgUnit .starDeco:nth-of-type(5) { top: 85vw; left: 65vw; animation-delay: 16200ms;} #bgUnit .starDeco:nth-of-type(6) { top: 5vw; left: 10vw; animation-delay: 7600ms;} #bgUnit .starDeco:nth-of-type(7) { top: 60vw; left: 3vw; animation-delay: 2200ms;} #bgUnit .starDeco:nth-of-type(8) { bottom: 35vw; left: 15vw; animation-delay: 13400ms;} #bgUnit .starDeco:nth-of-type(9) { bottom: 10vw; left: 5vw; animation-delay: 600ms;} #bgUnit .starDeco:nth-of-type(10) { bottom: 10vw; left: 85vw; animation-delay: 24000ms;} #bgUnit .starDeco:nth-of-type(11) { bottom: 20vw; left: 80vw; animation-delay: 14300ms;} #bgUnit .starDeco:nth-of-type(12) { bottom: 10vw; left: 70vw; animation-delay: 5800ms;} #bgUnit .starDeco:nth-of-type(13) { top: 12vw; left: 40vw; animation-delay: 3200ms;} #bgUnit .starDeco:nth-of-type(14) { top: 40vw; left: 43vw; animation-delay: 14600ms;} #bgUnit .starDeco:nth-of-type(15) { bottom: 65vw; left: 25vw; animation-delay: 7500ms;} #bgUnit .starDeco:nth-of-type(16) { bottom: 30vw; left: 45vw; animation-delay: 2800ms; } #bgUnit .starDeco:nth-of-type(17) { top: 50vw; left: 75vw; animation-delay: 10300ms; } #bgUnit .starDeco:nth-of-type(18) { bottom: 50vw; left: 75vw; animation-delay: 2300ms;} #bgUnit .starDeco:nth-of-type(19) { bottom: 20vw; left: 10vw; animation-delay: 16200ms;} #bgUnit .starDeco:nth-of-type(20) { bottom: 25vw; left: 90vw; animation-delay: 1800ms; } #bgUnit .starDeco.shooting{border: solid 0px #f00; animation: star_fade_shooting 12s ease 0s infinite !important;} #bgUnit .starDeco.shooting_1 { bottom: -20vw; left:40vw; width: 4vw; height: 4vw; animation-delay: 1500ms !important; } #bgUnit .starDeco.shooting_2 { bottom: -40vw; left: -20vw; width: 4vw; height: 4vw;animation-delay: 3000ms !important;} #bgUnit .starDeco.shooting_3 { bottom: 100vw; left: -10vw; width: 4vw; height: 4vw; } .bgDecoUnit{position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; display: none; pointer-events: none;} .bgDecoUnit .star{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: solid 1px #f30;} .bgDecoUnit .starDeco{ position: absolute; left: 0; width: 10vw; height: 10vw; background: url(../images/music_parade/shindan/anime/star.svg) center center no-repeat; background-size: contain; border: solid 2px #f30; } .bgDecoUnit .starDeco2{animation: star_anime_zoom 30.0s ease infinite alternate; transform: scale(0) } .bgDecoUnit .starDeco:nth-of-type(1) { top: 15vw; left: 85vw; animation-delay: 100ms;} .bgDecoUnit .starDeco:nth-of-type(2) { top: 25vw; left: 90vw; animation-delay: 11500ms;} .bgDecoUnit .starDeco:nth-of-type(3) { top: 30vw; left: 15vw; animation-delay: 3500ms;} .bgDecoUnit .starDeco:nth-of-type(4) { top: 63vw; left: 25vw; animation-delay: 7300ms;} .bgDecoUnit .starDeco:nth-of-type(5) { top: 85vw; left: 65vw; animation-delay: 16200ms;} .bgDecoUnit .starDeco.shooting{border: solid 2px #f00; animation: star_fade_shooting 12s ease 0s infinite !important; } .bgDecoUnit .starDeco.shooting_1 { bottom: -20vw; left:40vw; width: 4vw; height: 4vw; animation-delay: 1500ms !important; } .bgDecoUnit .starDeco.shooting_2 { bottom: -40vw; left: -20vw; width: 4vw; height: 4vw;animation-delay: 3000ms !important;} .bgDecoUnit .starDeco.shooting_3 { bottom: 100vw; left: -10vw; width: 4vw; height: 4vw; } .bgWrap.title .bgDecoUnit{} .bgWrap.contents .bgDecoUnit{} .bgWrap.app .bgDecoUnit{} .bgWrap.app .bgDecoUnit .starDeco:nth-of-type(1) { top: 15vw; left: 85vw; animation-delay: 100ms;} .bgWrap.app .bgDecoUnit .starDeco:nth-of-type(2) { top: 25vw; left: 90vw; animation-delay: 11500ms;} .bgWrap.app .bgDecoUnit .starDeco:nth-of-type(3) { top: 30vw; left: 15vw; animation-delay: 3500ms;} .bgWrap.app .bgDecoUnit .starDeco:nth-of-type(4) { top: 63vw; left: 25vw; animation-delay: 7300ms;} .bgWrap.app .bgDecoUnit .starDeco:nth-of-type(5) { top: 85vw; left: 65vw; animation-delay: 16200ms;} /* ----- #kv ----- */ section#kv{ background: url(../images/music_parade/shindan/kv/key_visual.png) center center no-repeat #000; background-size: 100% auto; min-height: 90vh !important;} .kvStart section#kv{ display: block;} /* ----- #entrance ----- */ .nonKvStart section#entrance{ display: block;} section#entrance{ background: url(../images/music_parade/shindan/entrance/bg.png) center bottom no-repeat #000; background-size: 100% auto;} section#entrance .contentArea{ margin-top: -6vw;} section#entrance .titleArea{} section#entrance .logo{ width: 100vw; transition: all 1000ms ease-in-out 500ms; opacity: 0; transform: translate3d(0,0%,0);} section#entrance .title{width: 88vw; transition: all 1000ms ease-in-out 800ms;opacity: 0; transform: translate3d(-50%,0%,0); margin-bottom: 0;} section#entrance .soundSelectWrap{width: 74vw; text-align: center;margin:-5vw 0 3vw 0; } section#entrance .soundSelectWrap .text{ margin-bottom: 1vw;transition: all 1000ms ease-in-out 2500ms;opacity: 0; transform: translate3d(0%,0%,0);} section#entrance .soundSelect{ position: relative; display: inline-block; width: 20vw; height: 20vw; z-index: 5; background: url(../images/music_parade/shindan/btn/btn_sound_off.png) center center no-repeat ; background-size: contain;transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 2200ms , opacity 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 2200ms;opacity: 0; transform: translate3d(0%,0%,0) scale(0.5);} .soundOn section#entrance .soundSelect{background: url(../images/music_parade/shindan/btn/btn_sound_on.png) center center no-repeat ; background-size: contain;} section#entrance .btnArea{ transition: all 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 2300ms;opacity: 0; transform: translate3d(0,0%,0) scale(0.5); margin-bottom: 0; z-index: 5;} section#entrance .soundSelectWrap:before{ content: ''; display: none;position: absolute; z-index: 1; top: -2vw; left: 50%;width: 100vw; height: 100vw; transform: translate3d(-50%,0%,0) scale(1); background: url(../images/music_parade/shindan/entrance/5line.png) center center no-repeat; background-size: 100% auto; pointer-events: none; } section#entrance.in .logo{ opacity: 1; transform: translate3d(0,0,0);} section#entrance.in .title{ opacity: 1; transform: translate3d(-50%,0,0);} section#entrance.in .soundSelectWrap .text{ opacity: 1; transform: translate3d(0%,0,0);} section#entrance.in .soundSelect{ opacity: 1; transform: translate3d(0,0,0) scale(1);} section#entrance.in .btnArea{ opacity: 1; transform: translate3d(0,0,0) scale(1);} /* ----- #intro ----- */ section#intro{ } section#intro .title{width: 80vw; margin-bottom: 10vw; transition: all 1000ms ease-in-out 500ms; opacity: 0; } section#intro .lineFrame{ margin-bottom: 25vw; transition: all 1000ms ease-in-out 1000ms; opacity: 0; } section#intro .introText{ } section#intro .btnArea{ transition: all 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 2000ms;opacity: 0; transform: translate3d(0,0%,0) scale(0.5);} section#intro.in .title{ opacity: 1;} section#intro.in .lineFrame{ opacity: 1;} section#intro.in .btnArea{ opacity: 1; transform: translate3d(0,0,0) scale(1);} /* ----- #bubble ----- */ section#bubble{ } section#bubble .contentArea{ position: relative; z-index: 2; margin-top: -5vw;} section#bubble .titleWrap{transition: all 1000ms ease-in-out 2000ms; opacity: 0; } section#bubble.in .titleWrap{ opacity: 1;} section#bubble .readArea{transition: all 200ms ease-in-out;} section#bubble .tryArea{ position: absolute; top: 0; left: 0; opacity: 0; transition: all 200ms ease-in-out 0ms; opacity: 0; } section#bubble.selected .readArea{ opacity: 0;} section#bubble.selected .tryArea{ opacity: 1;} .bubbleSelect{ position: relative; border: solid 0px #f30; width: 100vw; height: 100vw; margin-top: -5vw; } .bubbleSelect .bubbleArea{ border: solid 0px #369; width: 100vw; height: 100vw;z-index: 3; } /* .bubbleSelect .bubbleArea{background: url(../images/music_parade/shindan/bubble/_guide.png) center center no-repeat; background-size: contain; } */ .bubbleSelect .bubbleItem{ position: absolute; z-index: 3; width: 48vw; height: 48vw;transition: all 400ms ease; transform: translate3d(-50%,-50%,0) scale(0.8);pointer-events: none; will-change: transform; } .bubbleSelect .bubbleItem .showWrap{position: absolute; top: 0; left: 0;width: 100%; height: 100%;transition: all 500ms cubic-bezier(0.34, 1.56, 0.64, 1) 0ms;transform: translate3d(0,0%,0) scale(0);} section#bubble.in .bubbleSelect .bubbleItem .showWrap{ transform: translate3d(0,0,0) scale(1);} .bubbleSelect .bubbleItem:nth-of-type(1) .showWrap{ transition-delay: 1000ms;} .bubbleSelect .bubbleItem:nth-of-type(2) .showWrap{ transition-delay: 1100ms;} .bubbleSelect .bubbleItem:nth-of-type(3) .showWrap{ transition-delay: 1200ms;} .bubbleSelect .bubbleItem:nth-of-type(4) .showWrap{ transition-delay: 1300ms;} .bubbleSelect .bubbleItem:nth-of-type(5) .showWrap{ transition-delay: 1400ms;} .bubbleSelect .bubbleItem:nth-of-type(6) .showWrap{ transition-delay: 1500ms;} .bubbleSelect .bubbleItem:nth-of-type(7) .showWrap{ transition-delay: 1600ms;} .bubbleSelect .bubbleItem:nth-of-type(8) .showWrap{ transition-delay: 1700ms;} .bubbleSelect .bubbleItem:nth-of-type(9) .showWrap{ transition-delay: 1800ms;} .bubbleSelect .bubbleItem .inWrap{position: absolute; top: 0; left: 0;width: 100%; height: 100%;border: solid 0px #369; animation: fuwafuwa_bubble_z 6s ease-in-out 0s infinite; pointer-events: none;} /* .bubbleSelect .bubbleItem .inWrap{position: absolute; top: 0; left: 0;width: 100%; height: 100%;border: solid 0px #369; animation: fuwafuwa_bubble 3s ease-in-out 0s infinite alternate; pointer-events: none;} */ .bubbleSelect .bubbleItem.active .inWrap{ pointer-events: all;} .bubbleSelect .bubbleItem:nth-of-type(1) .inWrap{ animation-delay: 0ms; } .bubbleSelect .bubbleItem:nth-of-type(2) .inWrap{ animation-delay: 2200ms;animation-duration: 7s;} .bubbleSelect .bubbleItem:nth-of-type(3) .inWrap{ animation-delay: 1200ms;} .bubbleSelect .bubbleItem:nth-of-type(4) .inWrap{ animation-delay: 600ms;animation-duration: 5s;} .bubbleSelect .bubbleItem:nth-of-type(5) .inWrap{ animation-delay: 1000ms;} .bubbleSelect .bubbleItem:nth-of-type(6) .inWrap{ animation-delay: 1500ms;animation-duration: 7s;} .bubbleSelect .bubbleItem:nth-of-type(7) .inWrap{ animation-delay: 200ms;} .bubbleSelect .bubbleItem:nth-of-type(8) .inWrap{ animation-delay: 900ms;animation-duration: 5s;} .bubbleSelect .bubbleItem:nth-of-type(9) .inWrap{ animation-delay: 2000ms;} .bubbleSelect .bubbleItem .swipeItem{position: absolute; top: 0; left: 0;z-index: 9;width: 100%; height: 100%;border: solid 0px #369; pointer-events: none;} .bubbleSelect .bubbleItem .swipeItem:after{ content: ''; display: none;position: absolute; top: 0; left: 0;width: 100%; height: 100%;background: url(../images/music_parade/shindan/bubble/bubble_effect.png) center 0 repeat-y; background-size: 100% auto; animation: bubble_effect_anime 0.5s steps(34) 0s infinite; opacity: 1; transform: scale(0.85);will-change: transform,animation,position;} .bubbleSelect .bubbleItem.paused .swipeItem:after{animation-play-state: paused;} section#bubble.selectedAnime .bubbleSelect .bubbleItem .swipeItem:after{animation-play-state: running !important;} .bubbleSelect .bubbleItem .swipeItem .bubbleBall{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.85);} /* .bubbleSelect .bubbleItem .swipeItem:after{ background: url(../images/music_parade/shindan/bubble/effect.png) center 0 no-repeat; background-size: 100% auto; animation: bubble_anime 0.7s steps(5) 0s infinite; opacity: 0.6;} */ .bubbleSelect .bubbleItem.active .swipeItem{ cursor: pointer;} .bubbleSelect .bubbleItem.active .swipeItem:after{opacity: 0.8;} .bubbleSelect .bubbleItem .clickArea{position: absolute; z-index: 10; top: 50%; left: 50%; width: 100%; height: 100%;transform: translate3d(-50%,-50%,0) scale(0.6); border-radius: 50%; pointer-events: all; cursor: pointer;} /* .bubbleSelect .bubbleItem.mickeyfriends { top: 38vw; left: -6vw;width: 46vw; height: 46vw;} .bubbleSelect .bubbleItem.littlemermaid { top: 30vw; left: 58vw;width: 45vw; height: 45vw;} .bubbleSelect .bubbleItem.aladdin { top: 24vw; left: 21vw;width: 35vw; height: 35vw;} .bubbleSelect .bubbleItem.alice { top: -1vw; left: -2vw;width: 37vw; height: 37vw;} .bubbleSelect .bubbleItem.cinderella { top: -1vw; left: 36vw;width: 45vw; height: 45vw;} .bubbleSelect .bubbleItem.snowwhite { top: 69vw; left: 68vw;width: 30vw; height: 30vw;} .bubbleSelect .bubbleItem.pooh { top: 46vw; left: 36vw;width: 30vw; height: 30vw;} .bubbleSelect .bubbleItem.lilostitch { top: 65vw; left: 40vw;width: 36vw; height: 36vw;} .bubbleSelect .bubbleItem.mulan { top: 68vw; left: 16vw;width: 30vw; height: 30vw;} .bubbleSelect .bubbleItem.frozen { top: 7vw; left: 69vw;width: 36vw; height: 36vw;} */ .bubbleSelect .bubbleItem.mickeyfriends { top: 61vw; left: 17vw;} .bubbleSelect .bubbleItem.littlemermaid { top: 54vw; left: 81vw;} .bubbleSelect .bubbleItem.aladdin { top: 43vw; left: 37vw;} .bubbleSelect .bubbleItem.alice { top: 21vw; left: 17vw} .bubbleSelect .bubbleItem.cinderella { top: 24vw; left: 58vw;} .bubbleSelect .bubbleItem.snowwhite { top: 28vw; left: 86vw;} .bubbleSelect .bubbleItem.pooh { top: 65vw; left: 55vw;} .bubbleSelect .bubbleItem.lilostitch { top: 85vw; left: 77vw;} .bubbleSelect .bubbleItem.mulan { top: 82vw; left: 34vw;} .bubbleSelect .bubbleItem.frozen { top: 87vw; left: 84vw;} /* .bubbleSelect .bubbleItem.mickeyfriends .swipeItem{ background: url(../images/music_parade/shindan/bubble/icon_Mickey.png) center center no-repeat; background-size: contain; } .bubbleSelect .bubbleItem.littlemermaid .swipeItem{ background: url(../images/music_parade/shindan/bubble/icon_Little_Mermaid.png) center center no-repeat; background-size: contain; } .bubbleSelect .bubbleItem.aladdin .swipeItem{ background: url(../images/music_parade/shindan/bubble/icon_Aladdin.png) center center no-repeat; background-size: contain; } .bubbleSelect .bubbleItem.alice .swipeItem{ background: url(../images/music_parade/shindan/bubble/icon_Alice.png) center center no-repeat; background-size: contain; } .bubbleSelect .bubbleItem.cinderella .swipeItem{ background: url(../images/music_parade/shindan/bubble/icon_Cinderella.png) center center no-repeat; background-size: contain; } .bubbleSelect .bubbleItem.snowwhite .swipeItem{ background: url(../images/music_parade/shindan/bubble/icon_Snow.png) center center no-repeat; background-size: contain; } .bubbleSelect .bubbleItem.pooh .swipeItem{ background: url(../images/music_parade/shindan/bubble/icon_Pooh.png) center center no-repeat; background-size: contain; } .bubbleSelect .bubbleItem.lilostitch .swipeItem{ background: url(../images/music_parade/shindan/bubble/icon_Lilo_Stitch.png) center center no-repeat; background-size: contain; } .bubbleSelect .bubbleItem.mulan .swipeItem{ background: url(../images/music_parade/shindan/bubble/icon_Muran.png) center center no-repeat; background-size: contain; } .bubbleSelect .bubbleItem.frozen .swipeItem{ } */ .bubbleSelect .bubbleItem.active{ top: 60%; left: 50%;transform: translate3d(-50%,-50%,0) scale(1.2); z-index: 100;} .bubbleSelect .bubbleItem.active .clickArea{ pointer-events: none;} .bubbleSelect .bubbleItem.active .swipeItem{ pointer-events: all; } .swipeItem.attack{ transition: all 500ms ease-out; transform: translate3d(0,-10vw,0); opacity: 0; } section#bubble.selected .bubbleItem:not(.active){ opacity: 0;z-index: 10;transition: all 400ms ease 0ms; transform: translate3d(-50%,-50%,0) scale(0);} .bubbleSelect .hole, .bubbleSelect .arrow, .bubbleSelect .btnArea{transition: all 200ms ease-in-out 200ms; opacity: 0; pointer-events: none;} .bubbleSelect .hole{ display: block; position: absolute; top: -20vw; left: 50%; width: 60vw; height: 60vw; transform: translate3d(-50%,0%,0) scale(2) ; z-index: 1;} .bubbleSelect .hole .flare, .bubbleSelect .hole .flareRight{position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate3d(-50%,-50%,0); } .bubbleSelect .arrow{ display: block; position: absolute; top: 25%; left: 50%;width: 20vw; height: 20vw; transform: translate3d(-50%,0%,0) ; background: url(../images/music_parade/shindan/bubble/arrow.png) center center no-repeat; background-size: contain; z-index: 5;} .bubbleSelect .btnArea{ display: block; position: absolute; bottom: 0%; left: 50%;transform: translate3d(-50%,50%,0) scale(0.7); z-index: 110;} section#bubble.selected .hole, section#bubble.selected .arrow, section#bubble.selected .btnArea{ opacity: 1;} section#bubble.selected .btnArea{ pointer-events: all;} section#bubble.selected_fixed .titleWrap, section#bubble.selected_fixed .hole, section#bubble.selected_fixed .arrow, section#bubble.selected_fixed .btnArea{ opacity: 0; pointer-events: none;} section#bubble.selected_fixed .arrow{ display: none;} .effectHole{ position: absolute; width: 100%; height: 100%; opacity: 0; z-index: 1;transition: all 300ms ease-in; overflow: hidden;} .effectHole video{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: auto; height: 100%; } #bubble.selected_fixed .effectHole{ opacity: 1; } .effectHole:before{ content: ''; position: absolute; top:50%; left: 50%; width: 100vw; height: 100vw; border-radius: 50vw; opacity: 0; background: #fff; transform: translate(-50%,-70%) scale(0);transition: all 500ms ease-in;filter: blur(20vw);} #bubble.selected_fixed .effectHole2{ animation: fade_in_out 2s ease-in 0ms forwards; } #bubble.selected_fixed .effectHole:before{transform: translate(-50%,-50%) scale(5); filter: blur(0vw); opacity: 1;} /* ----- #onpu ----- */ section#onpu{ } section#onpu .titleWrap{transition: all 500ms ease-in-out 2000ms; opacity: 0;} section#onpu .readArea{transition: all 200ms ease-in-out;} .onpuSelect{ position: relative; border: solid 0px #f30; width: 100vw; height: 100vw; } /* .onpuSelect{ pbackground: url(../images/music_parade/shindan/onpu/_guide.png) center center no-repeat; background-size: 100% auto} */ .onpuSelect .line5{position: absolute; top: 0; left: 0;z-index: 1; width: 0%; height: 100%;pointer-events: none; background: url(../images/music_parade/shindan/onpu/5line.png) 0 0vw no-repeat; background-size: auto 80vw;transition: all 800ms ease-out 500ms; } .onpuSelect .stars{position: absolute; top: 0; left: 0;z-index: 2; width: 100%; height: 100%;pointer-events: none; transform: translate(-10%,5%); transition: all 1500ms ease-out 0ms; opacity: 0; } .onpuSelect .onpuArea{ border: solid 0px #369; width: 100vw; height: 100vw;z-index: 3; } .onpuSelect .onpuItem{ position: absolute; z-index: 3; width: 34vw; height: 34vw; opacity:0;transform: translate3d(-100%,-20%,0) scale(0);transition: all 2000ms cubic-bezier(.15,1.26,.08,.98); pointer-events: none;} section#onpu.onpuIn .onpuSelect .onpuItem{ opacity: 1; transform: translate3d(-50%,-50%,0) scale(1);} .onpuSelect .onpuItem .inWrap{ position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; animation: fuwafuwa 2s ease-in-out 0s infinite alternate; } .onpuSelect .onpuItem .item{position: absolute; z-index: 1; top: 50%; left: 50%; width: 100%; height: 100%;transform: translate3d(-50%,-50%,0) ; transition: all 300ms ease-in-out;} .onpuSelect .onpuItem .deco{position: absolute; z-index: 2; top: 50%; left: 50%; width: 100%; height: 100%;transform: translate3d(-50%,-50%,0) ; transition: all 300ms ease-in-out; } .onpuSelect .onpuItem .deco:after{ content: ''; display: block; position: absolute; z-index: 1; top: 0%; left: 0%; width: 100%; height: 100%; opacity: 1; border: solid 0px #f30; animation: onpu_anime 2.0s steps(32) 0s infinite; } .onpuSelect .onpuItem .clickArea{ cursor: pointer; pointer-events: all; position: absolute; z-index: 10; top: 50%; left: 50%; width: 60%; height: 60%;transform: translate3d(-50%,-50%,0) scale(1); border-radius: 50%; cursor: pointer;} .onpuSelect .onpuItem.orange { top: 68vw; left: 13vw; transition-delay: 300ms;} .onpuSelect .onpuItem.pink { top: 43vw; left: 12vw; transition-delay: 400ms;} .onpuSelect .onpuItem.green { top: 60vw; left: 32vw; transition-delay: 400ms;} .onpuSelect .onpuItem.emerald { top: 38vw; left: 44vw; transition-delay: 500ms;} .onpuSelect .onpuItem.blue { top: 18vw; left: 59vw; transition-delay: 600ms;} .onpuSelect .onpuItem.yellow { top: 44vw; left: 63vw; transition-delay: 600ms;} .onpuSelect .onpuItem.red { top: 41vw; left: 85vw; transition-delay: 700ms;} .onpuSelect .onpuItem.purple { top: 15vw; left: 86vw; transition-delay: 700ms;} .onpuSelect .onpuItem.red .inWrap{ animation-delay: 0ms;} .onpuSelect .onpuItem.yellow .inWrap{ animation-delay: 900ms;} .onpuSelect .onpuItem.blue .inWrap{ animation-delay: 400ms;} .onpuSelect .onpuItem.green .inWrap{ animation-delay: 1600ms;} .onpuSelect .onpuItem.purple .inWrap{ animation-delay: 200ms;} .onpuSelect .onpuItem.orange .inWrap{ animation-delay: 700ms;} .onpuSelect .onpuItem.emerald .inWrap{ animation-delay: 1200ms;} .onpuSelect .onpuItem.pink .inWrap{ animation-delay: 200ms;} .onpuSelect .btnArea{ display: block; position: absolute; bottom: 5vw; left: 50%;transform: translate3d(-50%,0%,0) ; z-index: 110; pointer-events: none; opacity: 0; transition: all 500ms ease-in-out 2000ms;} .onpuSelect .btnArea .btnItem{transition: all 500ms cubic-bezier(0.34, 1.56, 0.64, 1) ;opacity: 0; transform: translate3d(0,0%,0) scale(0.5);} section#onpu.selected .onpuSelect .btnArea .btnItem{ pointer-events: all; opacity: 1; transform: translate3d(0,0%,0) scale(1);} .onpuSelect .onpuItem.active .item{transform: translate3d(-50%,-50%,0) scale(1.5); z-index: 100;} .onpuSelect .onpuItem.active .deco{transform: translate3d(-50%,-50%,0) scale(1.5); z-index: 101;} section#onpu.selected .onpuItem:not(.active) .item{ transform: translate3d(-50%,-50%,0) scale(0.9); opacity: 0.5;} section#onpu.selected .onpuItem:not(.active) .deco{ opacity: 0.5;} section#onpu.in .titleWrap{ opacity: 1;} section#onpu.in .onpuSelect .line5{ width: 100%;} section#onpu.in .onpuSelect .stars{ width: 100%; opacity: 1;transform: translate(0%,0);filter: blur(0vw); } section#onpu .onpuSelect .stars .starDeco{ position: absolute; left: 0; width: 10vw; height: 10vw; background: url(../images/music_parade/shindan/anime/star.svg) center center no-repeat; background-size: contain; border: solid 0px #f30; } section#onpu .onpuSelect .stars .starDeco{animation: star_anime_zoom 20.0s ease infinite alternate; transform: scale(0)} section#onpu .onpuSelect .stars .starDeco:nth-of-type(1) { top: 15vw; left: 65vw; animation-delay: 100ms;} section#onpu .onpuSelect .stars .starDeco:nth-of-type(2) { top: 25vw; left: 83vw; animation-delay: 11500ms;} section#onpu .onpuSelect .stars .starDeco:nth-of-type(3) { top: 35vw; left: 27vw; animation-delay: 3500ms;} section#onpu .onpuSelect .stars .starDeco:nth-of-type(4) { top: 63vw; left: 33vw; animation-delay: 7300ms;} section#onpu .onpuSelect .stars .starDeco:nth-of-type(5) { top: 47vw; left: 57vw; animation-delay: 16200ms;} section#onpu .onpuSelect .stars .starDeco:nth-of-type(6) { top: 35vw; left: 50vw; animation-delay: 7600ms;} section#onpu .onpuSelect .stars .starDeco:nth-of-type(7) { top: 48vw; left: 0vw; animation-delay: 2200ms;} section#onpu .onpuSelect .stars .starDeco:nth-of-type(8) { bottom: 42vw; left: 38vw; animation-delay: 13400ms;} section#onpu .onpuSelect .stars .starDeco:nth-of-type(9) { bottom: 54vw; left: 72vw; animation-delay: 600ms;} section#onpu .onpuSelect .stars .starDeco:nth-of-type(10) { bottom: 10vw; left: 85vw; animation-delay: 24000ms;} section#onpu.in .btnArea{opacity: 1;} /* ----- #username ----- */ section#username{ } section#username .titleWrap{transition: all 200ms ease-in-out; margin-bottom: 20vw;} section#username .inputArea{ position: absolute; top: 17vw; z-index: 10;} section#username .inputName{} section#username .inputArea input{ width: 50vw; font-size: 4vw; text-align: center; padding: 1vw; border: 0; background: none; outline: 0; color: #fff;} section#username .inputArea input::placeholder { color: #fff; } section#username .inputArea input:focus::placeholder { color: transparent; } section#username .inputArea .inputError{ position: absolute; bottom: -1.6em; font-size: 0.8em; color: #c00; white-space: nowrap; line-height: 1;} section#username .btnArea.count_2{} section#username .btnArea.count_2 .btnItem{ position: relative;} /* ----- #shindanEntrance ----- */ section#shindanEntrance{ overflow: hidden; cursor: pointer;} section#shindanEntrance.coverIn{ pointer-events: none;} section#shindanEntrance .bg{ width: 100%; height: 100%;position: absolute; z-index: 1;} section#shindanEntrance .videoWrap{ position: absolute;} section#shindanEntrance video{width: 100%; height: 100%;} section#shindanEntrance .contentArea{ height: 120vw; z-index: 2;} section#shindanEntrance .toonItem{ position: absolute; bottom: 0vw; width: 35vw;} section#shindanEntrance .hand{position: absolute; bottom: 10vw; right: 20vw; width: 10vw; transform: translate(-50%,-50%);} section#shindanEntrance .cover{ width: 100%; height: 100%; z-index: 5; background: #000; opacity: 0; transition: all 100ms ease-in-out; } section#shindanEntrance.coverIn .cover{ opacity: 1;} section#shindanEntrance .nextClickArea{ border: solid 0px #f30; position: absolute; width: 50vw; height: 60vw; top: 50%; left: 50%; transform: translate(-50%,0%); z-index: 10;} /* ----- #shindanMake ----- */ section#shindanMake2{background: url(../images/music_parade/shindan/make/bg.png) center bottom no-repeat; background-size: cover; } .section_shindanMake #container{background: url(../images/music_parade/shindan/make/bg.png) center bottom no-repeat; background-size: cover;} section#shindanMake .titleWrap{ margin-bottom: 10vw;width: 80vw; white-space: nowrap;} section#shindanMake .titleWrap .shindanMakeTitle{ visibility: hidden;} section#shindanMake .titleWrap .dataWrap{ text-align: center; width: 100%;} section#shindanMake .titleWrap .dataWrap img{ width: auto; height: 6.5vw;display: inline-block;} section#shindanMake .titleWrap .dataWrap .outputName{ display: inline-block; font-size: 1.35em; padding: 0 0.3em 0 0.4em; line-height: 0; transform: translate(0,-0.1em)} section#shindanMake .titleWrap .dataWrap .nonameImage{ display: none;} section#shindanMake .titleWrap.noname{} section#shindanMake .titleWrap.noname .dataWrap .yournameImage{ display: none;} section#shindanMake .titleWrap.noname .dataWrap .nonameImage{ display: inline-block;} section#shindanMake .contentArea{} section#shindanMake .messageArea{ position: relative; margin-bottom: 10vw; border: solid 0px #f30;} section#shindanMake .messageArea > img{ visibility: hidden;} section#shindanMake .messageTextWrap{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column;align-content: space-around;justify-content: center ; padding: 0; } section#shindanMake .messageTextWrap > .textCol{ position: relative; width: 100%; height: 7vw; margin: 0 0 3vw 0; } section#shindanMake .messageTextWrap > .textCol img{ width: 100vw; height: auto; position: relative; z-index: 1;} section#shindanMake .messageTextWrap > .textCol .imageWrap{position: relative; overflow: hidden;width: 100%; height: 7vw;} section#shindanMake .titleWrap .dataWrap, section#shindanMake .messageTextWrap > .textCol img{ opacity: 0; transition: all 1400ms ease-out;} section#shindanMake .messageTextWrap .text_5{ margin-bottom: 0 !important;} section#shindanMake .messageTextWrap .text_1 img{ transform: translate(0,-4vw);} section#shindanMake .messageTextWrap .text_2 img{ transform: translate(0,-15vw);} section#shindanMake .messageTextWrap .text_3 img{ transform: translate(0,-26vw);} section#shindanMake .messageTextWrap .text_4 img{ transform: translate(0,-37vw);} section#shindanMake .messageTextWrap .text_5 img{ transform: translate(0,-49vw);} section#shindanMake.col_3 .messageTextWrap .text_1 img{ transform: translate(0,-10vw);} section#shindanMake.col_3 .messageTextWrap .text_2 img{ transform: translate(0,-21vw);} section#shindanMake.col_3 .messageTextWrap .text_3 img{ transform: translate(0,-32vw);} section#shindanMake.col_3 .messageTextWrap .text_4 { display: none;} section#shindanMake.col_3 .messageTextWrap .text_5 { display: none;} section#shindanMake.col_4 .messageTextWrap .text_5 { display: none;} section#shindanMake.col_5 .messageTextWrap .text_1 img{ transform: translate(0,1vw);} section#shindanMake.col_5 .messageTextWrap .text_2 img{ transform: translate(0,-10vw);} section#shindanMake.col_5 .messageTextWrap .text_3 img{ transform: translate(0,-20vw);} section#shindanMake.col_5 .messageTextWrap .text_4 img{ transform: translate(0,-31vw);} section#shindanMake.col_5 .messageTextWrap .text_5 img{ transform: translate(0,-42vw);} /* section#shindanMake .messageArea.blue_1 .messageTextWrap .text_4, section#shindanMake .messageArea.blue_2 .messageTextWrap .text_4, section#shindanMake .messageArea.green_2 .messageTextWrap .text_4, section#shindanMake .messageArea.green_3 .messageTextWrap .text_4, section#shindanMake .messageArea.pink_2 .messageTextWrap .text_4, section#shindanMake .messageArea.purple_1 .messageTextWrap .text_4, section#shindanMake .messageArea.purple_2 .messageTextWrap .text_4, section#shindanMake .messageArea.red_1 .messageTextWrap .text_4, section#shindanMake .messageArea.red_2 .messageTextWrap .text_4, section#shindanMake .messageArea.red_3 .messageTextWrap .text_4, section#shindanMake .messageArea.yellow_1 .messageTextWrap .text_4, section#shindanMake .messageArea.yellow_2 .messageTextWrap .text_4, section#shindanMake .messageArea.yellow_3 .messageTextWrap .text_4{ display: block;} section#shindanMake .messageArea.green_1 .messageTextWrap .text_5{ display: block;} */ /* section#shindanMake .messageArea.green_1 .messageTextWrap .text_1 img{ transform: translate(0,1vw);} section#shindanMake .messageArea.green_1 .messageTextWrap .text_2 img{ transform: translate(0,-10vw);} section#shindanMake .messageArea.green_1 .messageTextWrap .text_3 img{ transform: translate(0,-20vw);} section#shindanMake .messageArea.green_1 .messageTextWrap .text_4 img{ transform: translate(0,-31vw);} section#shindanMake .messageArea.green_1 .messageTextWrap .text_5 img{ transform: translate(0,-42vw);} */ section#shindanMake .textCol:before{ content: ''; display: block; position: absolute; z-index: 10; top: 50%; left: 50%; width: 100vw; height: 13.333vw; background: url(../images/music_parade/shindan/make/lineEffect_S.png) center top no-repeat; background-size: 100% auto;} section#shindanMake .textCol.size_S:before{background: url(../images/music_parade/shindan/make/lineEffect_S.png?a=3) center top no-repeat; background-size: 100% auto;transform: translate(-50%,-50%) scale(1,1.2);} section#shindanMake .textCol.size_M:before{background: url(../images/music_parade/shindan/make/lineEffect_S.png?a=3) center top no-repeat; background-size: 100% auto;transform: translate(-50%,-50%) scale(1.8,1.2);} section#shindanMake .textCol.size_L:before{background: url(../images/music_parade/shindan/make/lineEffect_L.png?a=3) center top no-repeat; background-size: 100% auto;transform: translate(-50%,-50%) scale(1.2,1.2);} section#shindanMake .titleWrap .dataWrap{ transition-delay: 500ms;} section#shindanMake .messageTextWrap .text_1 img{ transition-delay: 1700ms;} section#shindanMake .messageTextWrap .text_2 img{ transition-delay: 2200ms;} section#shindanMake .messageTextWrap .text_3 img{ transition-delay: 2700ms;} section#shindanMake .messageTextWrap .text_4 img{ transition-delay: 3200ms;} section#shindanMake .messageTextWrap .text_5 img{ transition-delay: 3700ms;} section#shindanMake.in .titleWrap .dataWrap, section#shindanMake.in .messageTextWrap .text_1 img, section#shindanMake.in .messageTextWrap .text_2 img, section#shindanMake.in .messageTextWrap .text_3 img, section#shindanMake.in .messageTextWrap .text_4 img, section#shindanMake.in .messageTextWrap .text_5 img{opacity: 1;} section#shindanMake .messageTextWrap .text_1:before, section#shindanMake .messageTextWrap .text_2:before, section#shindanMake .messageTextWrap .text_3:before, section#shindanMake .messageTextWrap .text_4:before, section#shindanMake .messageTextWrap .text_5:before{} section#shindanMake .messageTextWrap .text_1:before{ animation-delay: 1500ms !important;} section#shindanMake .messageTextWrap .text_2:before{ animation-delay: 2000ms !important;} section#shindanMake .messageTextWrap .text_3:before{ animation-delay: 2500ms !important;} section#shindanMake .messageTextWrap .text_4:before{ animation-delay: 3000ms !important;} section#shindanMake .messageTextWrap .text_5:before{ animation-delay: 3500ms !important;} section#shindanMake.in .titleWrap:before, section#shindanMake.in .messageTextWrap .text_1:before, section#shindanMake.in .messageTextWrap .text_2:before, section#shindanMake.in .messageTextWrap .text_3:before, section#shindanMake.in .messageTextWrap .text_4:before, section#shindanMake.in .messageTextWrap .text_5:before{animation: col_anime 2.0s steps(88) forwards } section#shindanMake.in .messageTextWrap .text_1.size_L:before, section#shindanMake.in .messageTextWrap .text_2.size_L:before, section#shindanMake.in .messageTextWrap .text_3.size_L:before, section#shindanMake.in .messageTextWrap .text_4.size_L:before, section#shindanMake.in .messageTextWrap .text_5.size_L:before{animation: col_anime_long 2.0s steps(136) forwards } section#shindanMake .textWrap{opacity: 0; transition: all 1000ms ease-out;} section#shindanMake .btnArea {transition: all 500ms cubic-bezier(0.34, 1.56, 0.64, 1) ;opacity: 0; transform: translate3d(0,0%,0) scale(0.5);} section#shindanMake .textWrap{transition-delay: 5500ms !important;} section#shindanMake .btnArea{transition-delay: 5800ms !important} section#shindanMake.in .textWrap{ opacity: 1;} section#shindanMake.in .btnArea{ opacity: 1; transform: translate3d(0,0,0) scale(1);} section#shindanMake .messageArea .onpuDeco{ position: absolute; pointer-events: none;opacity: 0; transition: all 500ms ease-out;} section#shindanMake.in .messageArea .onpuDeco{opacity: 1;} section#shindanMake .messageArea .onpuDeco .image{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: solid 0px #fff; pointer-events: none;} /* section#shindanMake .messageArea .onpuDeco .image{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: solid 0px #fff;animation: fuwafuwa 2s ease-in-out 0s infinite alternate; pointer-events: none;} */ section#shindanMake .messageArea .deco_1{ bottom: -7vw; left: -2vw; width: 20vw; height: 20vw; transition-delay: 3000ms !important;} section#shindanMake .messageArea .deco_2{ top: -8vw; right: 0vw; width: 17vw; height: 17vw; transition-delay: 2000ms !important;} section#shindanMake .messageArea .deco_3{ bottom: -1vw; right: 3vw; width: 10vw; height: 10vw; transition-delay: 4000ms !important;} section#shindanMake .messageArea .deco_1 .image{} section#shindanMake .messageArea .deco_2 .image{ animation-delay: 500ms;} section#shindanMake .messageArea .deco_3 .image{ animation-delay: 1000ms;} section#shindanMake .messageArea.red .deco_1 .image{background: url(../images/music_parade/shindan/deco/onpu/1/red.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.red .deco_2 .image{background: url(../images/music_parade/shindan/deco/onpu/2/red.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.red .deco_3 .image{background: url(../images/music_parade/shindan/deco/onpu/3/red.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.yellow .deco_1 .image{background: url(../images/music_parade/shindan/deco/onpu/1/yellow.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.yellow .deco_2 .image{background: url(../images/music_parade/shindan/deco/onpu/2/yellow.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.yellow .deco_3 .image{background: url(../images/music_parade/shindan/deco/onpu/3/yellow.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.blue .deco_1 .image{background: url(../images/music_parade/shindan/deco/onpu/1/blue.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.blue .deco_2 .image{background: url(../images/music_parade/shindan/deco/onpu/2/blue.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.blue .deco_3 .image{background: url(../images/music_parade/shindan/deco/onpu/3/blue.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.green .deco_1 .image{background: url(../images/music_parade/shindan/deco/onpu/1/green.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.green .deco_2 .image{background: url(../images/music_parade/shindan/deco/onpu/2/green.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.green .deco_3 .image{background: url(../images/music_parade/shindan/deco/onpu/3/green.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.purple .deco_1 .image{background: url(../images/music_parade/shindan/deco/onpu/1/purple.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.purple .deco_2 .image{background: url(../images/music_parade/shindan/deco/onpu/2/purple.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.purple .deco_3 .image{background: url(../images/music_parade/shindan/deco/onpu/3/purple.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.orange .deco_1 .image{background: url(../images/music_parade/shindan/deco/onpu/1/orange.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.orange .deco_2 .image{background: url(../images/music_parade/shindan/deco/onpu/2/orange.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.orange .deco_3 .image{background: url(../images/music_parade/shindan/deco/onpu/3/orange.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.emerald .deco_1 .image{background: url(../images/music_parade/shindan/deco/onpu/1/emerald.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.emerald .deco_2 .image{background: url(../images/music_parade/shindan/deco/onpu/2/emerald.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.emerald .deco_3 .image{background: url(../images/music_parade/shindan/deco/onpu/3/emerald.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.emerald .deco_1 .image{background: url(../images/music_parade/shindan/deco/onpu/1/emerald.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.emerald .deco_2 .image{background: url(../images/music_parade/shindan/deco/onpu/2/emerald.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.emerald .deco_3 .image{background: url(../images/music_parade/shindan/deco/onpu/3/emerald.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.pink .deco_1 .image{background: url(../images/music_parade/shindan/deco/onpu/1/pink.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.pink .deco_2 .image{background: url(../images/music_parade/shindan/deco/onpu/2/pink.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea.pink .deco_3 .image{background: url(../images/music_parade/shindan/deco/onpu/3/pink.png) center center no-repeat; background-size: contain;} section#shindanMake .messageArea .onpuDeco .star{ position: absolute; left: 0; width: 10vw; height: 10vw; background: url(../images/music_parade/shindan/anime/star.png) center 0 no-repeat; background-size: 100% auto; border: solid 0px #f30;transform: scale(0) ; animation: star_anime_zoom_ 1.0s ease infinite alternate; } section#shindanMake .messageArea .deco_1 .star:nth-of-type(1) { position: absolute; top: 10vw; left: 1vw; animation-delay: 0ms !important;} section#shindanMake .messageArea .deco_1 .star:nth-of-type(2) { position: absolute; top: 0vw; left: 8vw; animation-delay: 300ms !important;} section#shindanMake .messageArea .deco_1 .star:nth-of-type(3) { position: absolute; top: 7vw; left: 9vw; animation-delay: 600ms !important;} section#shindanMake .messageArea .deco_2 .star:nth-of-type(1) { position: absolute; top: 8vw; left: 1vw; animation-delay: 0ms !important;} section#shindanMake .messageArea .deco_2 .star:nth-of-type(2) { position: absolute; top: -1vw; left: 3vw; animation-delay: 300ms !important;} section#shindanMake .messageArea .deco_2 .star:nth-of-type(3) { position: absolute; top: 5vw; left: 6vw; animation-delay: 600ms !important;} section#shindanMake .messageArea .deco_3 .star:nth-of-type(1) { position: absolute; top: 2vw; left: -2vw; animation-delay: 0ms !important;} section#shindanMake .messageArea .deco_3 .star:nth-of-type(2) { position: absolute; top: -2vw; left: 2vw; animation-delay: 300ms !important;} section#shindanMake .messageArea .deco_3 .star:nth-of-type(3) { position: absolute; top: 7vw; left: 9vw; animation-delay: 600ms !important;} section#shindanMake .messageArea .content{width: 65vw;} section#shindanMake .textWrap{ margin-bottom: 5vw; } section#shindanMake .textWrap .shindanMakeCome{ visibility: hidden;} section#shindanMake .textWrap .dataWrap{ text-align: center; width: 100%; line-height: 1.5;margin-top: -2vw;} section#shindanMake .textWrap .dataWrap img{ width: auto; height: 4vw;display: inline-block;} section#shindanMake .textWrap .dataWrap .shindanMakeCome_1{transform: translate(0,0.3em)} section#shindanMake .textWrap .dataWrap .outputName{ display: inline-block; font-size: 1.2em; padding: 0.5em 0.3em 0 0.4em; line-height: 1; transform: translate(0,0.2em)} section#shindanMake .textWrap .dataWrap .nonameImage{ display: none;} section#shindanMake .textWrap.noname{} section#shindanMake .textWrap.noname .dataWrap .yournameImage{ display: none;} section#shindanMake .textWrap.noname .dataWrap .nonameImage{ display: inline-block;} /* ----- #shindanResult ----- */ section#shindanResult{ overflow-y: auto;} section#shindanResult .contentArea{background:#000; background-size: 100% auto; min-height: 656vw;} body.campaign_end section#shindanResult .contentArea{ min-height: 535vw;} /* section#shindanResult .contentArea{background: url(../images/music_parade/shindan/result/_guide2.png) center top no-repeat; background-size: 100% auto; min-height: 656vw;} */ section#shindanResult .bgWrap{ position: relative;} section#shindanResult .bgWrap.title{background: url(../images/music_parade/shindan/result/bg_title.png) center top no-repeat; background-size: 100% auto; } section#shindanResult .bgWrap.contents{background: url(../images/music_parade/shindan/result/bg_contents.png) center top no-repeat; background-size: 100% auto; } section#shindanResult .bgWrap.app{background: url(../images/music_parade/shindan/result/bg_app.png) center bottom no-repeat #000; background-size: 100% auto; } section#shindanResult .readArea{margin-bottom: 0vw;} section#shindanResult .fullFrame{ position: relative;} section#shindanResult .fullFrame:before, section#shindanResult .fullFrame:after{content: ''; display: block; position: absolute;left: 0; width: 100%; height: 100%; z-index: 10;} section#shindanResult .fullFrame:before{ top: 0;background: url(../images/music_parade/shindan/result/ride_header.png) center top no-repeat; background-size: 100% auto; } section#shindanResult .fullFrame:after{ top: 0; background: url(../images/music_parade/shindan/result/ride_footer.png) center bottom no-repeat; background-size: 100% auto; } section#shindanResult .rideArea{ margin-bottom: 8vw;} section#shindanResult .finalFrameArea{ margin-bottom: 10vw;} section#shindanResult .rideImage{ width: 100%; height: 0; padding-top: 139%; position: relative; z-index: 5;} section#shindanResult .rideImage video{position: absolute;top:0;left: 0; width: 100%; height: 100%; } section#shindanResult .nowCheck{ margin-bottom: 10vw;} section#shindanResult .nowCheck img{ height: 11.7vw;} section#shindanResult .resultShare{ margin-bottom: 8vw;} section#shindanResult .resultShare img{ height: 11.7vw;} section#shindanResult .retryPlay{ margin-bottom: 12vw; position: relative;} section#shindanResult .retryPlay img{ height: 8vw;} section#shindanResult .bonusArea{ margin-top: -2vw;} section#shindanResult .allRide{ margin-bottom: 12vw; margin-top: -5vw; position: relative;} section#shindanResult .allRide:after{ content: '' ; display: block; position: absolute; bottom: 0; left: 50%; transform: translate(-50%,67%); width: 15vw; height: 20vw;background: url(../images/music_parade/shindan/result/arrow.png) center center no-repeat; background-size:contain; } section#shindanResult .appDownload{ position: relative;margin-bottom: 5vw; } section#shindanResult .appDownload .bannerWrap{ position: relative; top: auto;} section#shindanResult .resultShare_2{ margin-bottom: 5vw;} section#shindanResult .playArea{ position: relative;} section#shindanResult .coinArea{ margin-bottom: 8vw; position: relative;} section#shindanResult .coinArea .resultShare_3{ position: absolute;bottom: 15vw; margin-bottom: 0;} section#shindanResult .coinArea .resultShare_3 .resultShare{ margin-bottom: 0 !important;} section#shindanResult .coinArea .detailLink{ position: absolute; bottom: 5vw; margin-bottom: 0;} section#shindanResult .coinArea .detailLink a{ padding: 0.8em;} section#shindanResult .coinArea .detailLink img{ height: 5vw; width: auto;} section#shindanResult .appArea{ position: relative; margin-bottom: 0vw;} section#shindanResult .bannerWrap{ display: flex; flex-wrap: nowrap; justify-content: space-between; position: absolute; top: 119.5vw; left: 50%; width: 71vw; transform: translate(-50%,0); } section#shindanResult .appLink{ } section#shindanResult .appLink img{ width: auto; height: 10.8vw; } section#shindanResult .apple{ } section#shindanResult .google{ } section#shindanResult .scrollDown{ width: 20vw; height: 20vw; position: fixed; bottom: 5vw; left: 50%; z-index: 50; transform: translate(-50%,0%); border: solid 0px #f30;transition: all 500ms ease; opacity: 0; pointer-events: none;} section#shindanResult .scrollDown:before, section#shindanResult .scrollDown:after{ content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%;transform: translate(-50%,-50%); } section#shindanResult .scrollDown:before{background: url(../images/music_parade/shindan/common/scroll_down_arrow.png) center center no-repeat; background-size: 100% auto; animation: scroll_down 1s ease-in-out 0s infinite alternate; } section#shindanResult .scrollDown:after{background: url(../images/music_parade/shindan/common/scroll_down_text.png) center center no-repeat; background-size: 100% auto;} .scrollDownOn section#shindanResult .scrollDown{ opacity: 1;} body.campaign_end #shindanResult .musicArea{ padding-bottom: 10vw;} body.campaign_end #shindanResult .musicArea img{ position: relative; z-index: 2;} body.campaign_end #shindanResult .musicArea:before{ content: ''; display: block; width: 100vw; height: 20vw; position: absolute; bottom: -1vw; left: 0; z-index: 1; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,1+100 */ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ } /*----------footer------------*/ footer{ width: 100%; padding: 2.5em 0; color: #FFF; display: block; background: rgba(0,0,0,0.8); } footer > div{ max-width: 1560px; margin: auto; padding: 0 2em 1em; } /*タイトーリンク*/ ul.taitoLink{margin: 0; padding: 0 0 1.5em;} ul.taitoLink li{ font-size: 1.0em; margin-right: 1.0em; display: inline-block; } ul.taitoLink a{color: #FFF!important; text-decoration: none;} ul.taitoLink a:hover{color: #7ecef4!important;} footer p:last-child{ padding-top: 2.5em; font-size: 0.8em; color: #FFF; text-align: center; border-top: solid 1px #313131; } @media only screen and (max-width: 480px) {footer img{width: auto; height: 30px;} footer > div{padding: 0 1em 1em} ul.taitoLink li{font-size: 0.8em;}}