@charset "UTF-8";

/* ゲームのエラーメッセージを上下中央にする */
#ErrorWrap p {
	position: relative;
	top: 50%;
	left: 0%;
	/* 要素の表示位置を移動させる */
	transform: translateY(-50%);
}

/* Twitter share */
.gameshare {
	display: none;
}

.gameshare a.twittershare {
    border-radius: 5px;
    margin-top:15px;
    display: inline-block;
    padding: 15px 15px 12px 40px;
    line-height: 1;
    box-shadow: none;
    color: #FFF;
    background: #51ABF1 url(/images/sns/twitter.png) left 10px center no-repeat;
    background-size:25px auto;
}


/* gamestart allGame */
.startGame {
	width:100%;
    min-height: 60.4vw;
	margin:0 auto;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.throwSelect {
    display:inline-block;
    border: 1px solid #d0d0d0;
    width: auto;
    margin: 3vw auto;
    padding: 0;
}
.throwSelect h3 {
    background-color: #ffffdc;
    color: #ffcd44;
    text-align: left;
    padding: 3vw;
}
.throwSelect .link {
    margin:0 auto;
    padding:3vw;
}
.throwSelect.gameOn {
    display:none;
}
.resultComment {
    border: 1vw solid #000000;
    width: 100%;
    margin: 0px auto;
    padding:5vw 2vw;
    color: #ea4b7d;
    font-size: 138.5%;
    font-weight:bold;
}
#innerGame #ErrorWrap {
    background-color: rgba(0,0,0,.5);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2000;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}
#innerGame #ErrorWrap a{color:orange;}


#gameErr {
    display:none;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background-color:rgba(0,0,0,0.8);
    color:#FFF;
    padding-top:32%;
}
.startGame.err #gameErr{
    display: block;
}
#innerGame #ruleBox {
    border-color: #d9d9d9;
    border-style: solid;
    border-width: 4px;
    margin: 5px auto 20px auto;
    max-width: 600px;
    text-align: left;
}
#innerGame #ruleBox .inner {
    padding: 12px;
}

/* ----------------------------------
    Game SILHOUETTE
----------------------------------- */
/* START */
.startSilhouette .startlight {
    position:absolute;
    top:10vw;
    left:20vw;
    mix-blend-mode: overlay;
    animation:rotelight 2s linear infinite ;
    width:60%;
}
.startSilhouette.gameOn .startlight {
    animation: rotelight 2s linear infinite,fadeOut 1s linear 3s 1 forwards;
}

.startSilhouette .chara {
    position:absolute;
    top:18vw;
    left:50%;
    opacity:.75;
    width:28%;
}
.startSilhouette .chara-a {margin-left:-37vw;}
.startSilhouette .chara-b {margin-left:-14vw;}
.startSilhouette .chara-c {margin-left:11vw;}
.startSilhouette .chara .no {
    position:absolute;
    top:0;
    left:50%;
    margin-left:-2.5vw;
    font-size:5vw;
    color:#FFF;
    font-weight:bold;
}
.startSilhouette.gameOn .chara.typeA {
    animation:fadeOut 1s linear 0s 1 forwards;
}
.startSilhouette.gameOn .chara {
    opacity:0;
}


/* RESULT */
.startSilhouette .ground2,
.startSilhouette .ground3 {
    position:absolute;
    top:0;
    left:0;
}
.startSilhouette.gameOn .ground2 {
    animation: upcurtain 6s ease-out 1s 1 forwards;
}
.startSilhouette #fubuki {
    display:block;
    position:absolute;
    opacity:0;
    top:0;
    left:0;
    width: 100%;
    height:400px;
}
.startSilhouette.gameOn.pointWin #fubuki {
    animation: fadeIn 0s linear 5s 1 forwards;
}
.startSilhouette .ribbon {
    position:absolute;
    top:-150vw;
    opacity: 0;
}
.startSilhouette.gameOn.pointWin .ribbon1 {
    left:22vw;
    transform-origin: top center;
    animation:fadeIn 0s linear 5s 1 forwards, down1 1s ease-in 4s 1 forwards,swing1 1s linear 4s infinite alternate;
    width:10vw;
}
.startSilhouette.gameOn.pointWin .ribbon2 {
    left: 35vw;
    transform-origin: top center;
    animation:fadeIn 0s linear 5s 1 forwards, down2 1s ease-in 4s 1 forwards,swing1 .5s linear 4s infinite alternate;
    width: 10vw;
    top:-150vw;
}
.startSilhouette.gameOn.pointWin .ribbon3 {
    left: 66vw;
    transform-origin: top center;
    animation:fadeIn 0s linear 5s 1 forwards, down3 .8s ease-in 4s 1 forwards,swing1 1.2s linear 4s infinite alternate;
    width: 9vw;
}
.startSilhouette.gameOn.pointWin .ribbon4 {
    top: 24vw;
    left: 77vw;
    opacity: 0;
    animation: fadeIn 0s linear 5s 1 forwards;
    width: 7vw;
    transform: rotate(34deg);
}
.startSilhouette.gameOn.pointWin .ribbon5 {
    top: 19vw;
    left: 11vw;
    animation: fadeIn 0s linear 5s 1 forwards;
    width: 6vw;
    transform: rotate(-10deg);
}
.startSilhouette.gameOn.pointWin .ribbon6 {
    top: 0vw;
    left: 50vw;
    animation: fadeIn 0s linear 5s 1 forwards,swing1 1.5s linear 4s infinite alternate;
}
.startSilhouette.gameOn.pointWin .ribbon6 img {
    width:8vw;
}
.startSilhouette.gameOn.pointWin .ribbon7 {
    top: 0;
    left: 0;
    animation: down4 3s linear 5s infinite;
}
.startSilhouette.gameOn.pointWin .ribbon7 img {
    width:3vw;
}
.startSilhouette.gameOn.pointWin .ribbon8 {
    top: 0;
    right: 0;
    animation: down5 4s linear 5s infinite;
}
.startSilhouette.gameOn.pointWin .ribbon8 img {
    width:3.4vw;
    transform: scale(-1, -1);
}
.startSilhouette.gameOn.pointWin .ribbon9 {
    top: 0;
    left: 40vw;
    animation: down6 3s linear 6s infinite;
}
.startSilhouette.gameOn.pointWin .ribbon9 img {
    width:3vw;
}
.startSilhouette.gameOn.pointWin .ribbon10 {
    top: 0;
    left: 60vw;
    animation: down7 4s linear 6s infinite;
}
.startSilhouette.gameOn.pointWin .ribbon10 img {
    width:3.4vw;
    transform: scale(-1, -1);
}

@keyframes down4 {
    0% { top:0;left: 0;opacity:1;transform: rotate(0deg); }
    50% { opacity:1;transform: rotate(-240deg); }
    51% { opacity:0; }
    100% { top:100vw;left:30vw;opacity:0;transform: rotate(0deg); }
}
@keyframes down5 {
    0% { top:0;right: 0;opacity:1;transform: rotate(0deg); }
    55% { opacity:1;transform: rotate(-180deg); }
    56% { opacity:0; }
    100% { top:100vw;right:40vw;opacity:0;transform: rotate(0deg); }
}
@keyframes down6 {
    0% { top:0;left: 40vw;opacity:1;transform: rotate(0deg); }
    50% { opacity:1;transform: rotate(-180deg); }
    51% { opacity:0; }
    100% { top:100vw;left:60vw;opacity:0;transform: rotate(0deg); }
}
@keyframes down7 {
    0% { top:0;left: 60vw;opacity:1;transform: rotate(0deg); }
    50% { opacity:1;transform: rotate(-240deg); }
    51% { opacity:0; }
    100% { top:100vw;left:30vw;opacity:0;transform: rotate(0deg); }
}
.startSilhouette .pinlight {
    position:absolute;
    top: 10vw;
    opacity:0;
    width:36%;
}
.startSilhouette.gameOn.pinLeft .pinlight {left: 6vw;}
.startSilhouette.gameOn.pinCenter .pinlight {left: 29vw;}
.startSilhouette.gameOn.pinRight .pinlight {left: 53vw;}

.startSilhouette .comment {
    position:absolute;
    top: 17vw;
    left: 0;
    opacity:0;
}
.startSilhouette.gameOn .resultTitle {
    position:absolute;
    bottom:5vw;
    left:0;
    opacity:0;
    width:100%;
    text-align: center;
    color:#FFF;
    font-size: 7vw;
    font-weight:bold;
}
.startSilhouette.pointWin .resultTitle {
    text-shadow:2px 2px 0 #800000, -2px -2px 0 #800000,-2px 2px 0 #800000, 2px -2px 0 #800000,0px 2px 0 #800000, 0 -2px 0 #800000,-2px 0 0 #800000, 2px 0 0 #800000, 0 0 20px #FF0;
    color: #fff516;
}
.startSilhouette.pointLose .resultTitle {
    text-shadow:2px 2px 0 #1f3d7a, -2px -2px 0 #1f3d7a,-2px 2px 0 #1f3d7a, 2px -2px 0 #1f3d7a,0px 2px 0 #1f3d7a, 0 -2px 0 #1f3d7a,-2px 0 0 #1f3d7a, 2px 0 0 #1f3d7a, 0 0 20px #000;
    color: #789eea;
    font-family: serif;
}

.startSilhouette .nextchallenge {
    position:absolute;
    bottom:3vw;
    left:0;
    opacity:0;
}
/* キャラ+コメント+ピンライト 組み合わせ */
.startSilhouette.gameOn.pinLeft .chara-a.typeB,
.startSilhouette.gameOn.pinLeft .chara-b.typeC,
.startSilhouette.gameOn.pinLeft .chara-c.typeC,
.startSilhouette.gameOn.pinCenter .chara-a.typeC,
.startSilhouette.gameOn.pinCenter .chara-b.typeB,
.startSilhouette.gameOn.pinCenter .chara-c.typeC,
.startSilhouette.gameOn.pinRight .chara-c.typeB,
.startSilhouette.gameOn.pinRight .chara-a.typeC,
.startSilhouette.gameOn.pinRight .chara-b.typeC {/*キャラ出現*/
    animation:fadeIn 1s linear 0s 1 forwards;
}

.startSilhouette.gameOn.pointWin .pinlight {/*勝ち照明*/
    animation: fadeIn 0s linear 5s 1 forwards;
}
.startSilhouette.gameOn.pointLose .pinlight {/*負け照明*/
    animation: fadeIn 1s linear 6s 1 forwards;
}

.startSilhouette.gameOn.pinLeft.pointWin .comment.posiA,
.startSilhouette.gameOn.pinCenter.pointWin .comment.posiB,
.startSilhouette.gameOn.pinRight.pointWin .comment.posiC {/*勝ちコメント*/
    animation: fadeIn 0s linear 6s 1 forwards;
}

.startSilhouette.gameOn.pointWin .resultTitle {/*勝ちタイトル*/
    animation: fadeIn 0s linear 6s 1 forwards,pointget .5s linear 5s 1 forwards;
}
.startSilhouette.gameOn.pointLose1 .resultTitle ,
.startSilhouette.gameOn.pointLose2 .resultTitle ,
.startSilhouette.gameOn.pointLose .resultTitle {/*負けタイトル*/
    animation: fadeIn 1s linear 6s 1 forwards;
}
.startSilhouette.gameOn .nextchallenge {
    animation: fadeIn .5s linear 6.5s 1 forwards;
}




.link input[type=submit].selectSilhouette.current {
    background-color:#ff8f9b;
}

/* テスト用 START*/
.testGame {
    border:1vw solid #ffcd44;
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    text-align:left;
    z-index:9999;
    background-color:#FFF;
    padding:3vw;
}
.testGame div {
    display:inline-block;
    font-size:4vw;
}
.testGame .testBtn.current {
    color:#FF0004;
}
/* テスト用 END*/

@keyframes rotelight{
  0%{ transform:rotate(0);top:0px;left:5vw;}
  50%{ transform:rotate(180deg);top:10vw;left:40vw;}
  100%{ transform:rotate(360deg);top:0;left:5vw;}
}
@keyframes down1 {
    0% { top:-150vw; }
    100% { top:-10vw; }
}
@keyframes down2 {
    0% { top:-150vw; }
    100% { top:0; }
}
@keyframes down3 {
    0% { top:-150vw; }
    100% { top:-10vw; }
}
@keyframes swing1 {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}
@keyframes upcurtain{
  0%{ top:0;}
  100%{ top:-70vw;}
}
@keyframes pointget {
	0% {opacity: 0;transform: scale(1, 1);}
	1% {opacity: 0;transform: scale(0.1, 0.1);}
	50% {opacity: 1;transform: scale(2, 2);}
	70% {opacity: 1;transform: scale(0.5, 0.5);}
	90% {opacity: 1;transform: scale(1.5, 1.5);}
	100% {opacity: 1;transform: scale(.95, .95);}
}

/* ----------------------------------
    Game KakurenBoo
----------------------------------- */
/* KakurenBoo BASE*/
.startKakurenBoo .ground {
    background-image: url(/images/game/kakurenboo/bg.jpg);
    background-position-x: 15%;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 64.0625%;
    width: 100%;
    overflow: hidden;
    position: relative;
    transition: all .5s ease-out;
}
.startKakurenBoo .cloud {
    display:block;
    position:absolute;
    top:3vw;
    left:-30vw;
    width:12vw;
}
.startKakurenBoo .cloud .cloudBoo {
    position:absolute;
    top: 2vw;
    left: 2vw;
    width: 8vw;
    height: 5vw;
    overflow: hidden;
    transform: rotate(180deg);
}
.startKakurenBoo .cloud .cloudBoo img {
    position: absolute;
    bottom:-5vw;
    left:0;
}
.startKakurenBoo .cloud.cloud1 {
    animation: kakuBooCloud 20s linear 0s infinite;
}
.startKakurenBoo .cloud.cloud2 {
    animation: kakuBooCloud 25s linear 5s infinite;
    top:5vw;
}
.startKakurenBoo .cloud.cloud3 {
    animation: kakuBooCloud 30s linear 10s infinite;
}

.startKakurenBoo .fountain {
    position:absolute;
    top:12vw;
    left: 0;
}
.startKakurenBoo .boo {
	position:absolute;
    top: 34vw;
    left: 55vw;
    width: 12vw;
    height: 8vw;
}
.startKakurenBoo .bubble {
	position:absolute;
    top: 20vw;
    left: 62vw;
    width: 24vw;
}
.startKakurenBoo .startBtn {
	position:absolute;
    top: 50vw;
    left: 50%;
    margin-left: -15vw;
    cursor: pointer;
    width: 30vw;
}

/* KakurenBoo GAME START BASE */
.startKakurenBoo .goldBoo0 {
    display:none;
	position:absolute;
    top: 34vw;
    left: 55vw;
    width: 12vw;
    height: 8vw;
    overflow: hidden;
}
.startKakurenBoo .goldBoo0 img {
    position: absolute;
    bottom:-8vw;
    left:0;
}
.startKakurenBoo .backBoo1 {
    display:none;
    position: absolute;
    top: 26vw;
    left: 33vw;
    transform: rotate(-45deg);
    width: 12vw;
    height: 10vw;
    overflow: hidden;
}
.startKakurenBoo .backBoo1 img {
    position: absolute;
    bottom:-10vw;
    left:0;
}
.startKakurenBoo .backBoo2 {
    display:none;
    position: absolute;
    top: 25vw;
    left: 49vw;
    transform: rotate(45deg);
    width: 12vw;
    height: 10vw;
    overflow: hidden;
}
.startKakurenBoo .backBoo2 img {
    position: absolute;
    bottom:-10vw;
    left:0;
}
.startKakurenBoo .runBoo1 {
    position: absolute;
    top: 22vw;
    left: 140vw;
    width: 14vw;
}
.startKakurenBoo .runBoo2 {
    position: absolute;
    top: 40vw;
    left: -30vw;
    transform:rotateY(180deg);
    width:30vw;
}
.startKakurenBoo .clickarea {
    display:none;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}
.startKakurenBoo .kakureResult {
    display:none;
}
.startKakurenBoo #cursor {
    display:none;
}
.startKakurenBoo + .spMessage {
    font-size:120%;
    background: #ffffff;
    background: -moz-linear-gradient(top,  #ffffff 0%, #f1f1f1 50%, #e1e1e1 51%, #f6f6f6 100%);
    background: -webkit-linear-gradient(top,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
    background: linear-gradient(to bottom,  #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
    border:1px solid #f1f1f1;
}

/* KakurenBoo GAME ACTIVE */
.startKakurenBoo.gameOn .startBtnKakurenBoo,
.startKakurenBoo.gameOn .boo,
.startKakurenBoo.gameOn .bubble {
    display:none;
}
.startKakurenBoo.gameOn .goldBoo0 {
    display:block;
}
.startKakurenBoo.gameOn .cloud .cloudBoo {
    display:block;
}
.startKakurenBoo.gameOn .backBoo1,
.startKakurenBoo.gameOn .backBoo2 {
    display:block;
}
.startKakurenBoo.gameOn .clickarea {
    display:block;
}

/* KakurenBoo GAME ACTIVE GOLDBOO */
.startKakurenBoo.gameOn .goldBoo0.gBoo.appear img {
    animation: kakuBooGold .5s linear 0s 2 alternate;
}
.startKakurenBoo.gameOn .cloud .cloudBoo.gBoo.appear img {
    animation: kakuBooCloudGold .5s linear 0s 2 alternate;
}
.startKakurenBoo.gameOn .runBoo1.gBoo.appear {
    animation: runBoo1 1s linear 0s 2;
}
.startKakurenBoo.gameOn .backBoo1.gBoo.appear img ,
.startKakurenBoo.gameOn .backBoo2.gBoo.appear img {
    animation: kakuBooGold .5s linear 0s 2 alternate;
}
.startKakurenBoo.gameOn .runBoo2.gBoo.appear {
    animation: runBoo2 1.5s linear 0s 1;
}

/* KakurenBoo GAME RESULT BASE */
.startKakurenBoo.gameKakureResult .kakureResult {
    display:block;
}
.startKakurenBoo.gameKakureResult .ground {
    background-position-x: 85%;
}
.startKakurenBoo.gameKakureResult .goldBoo0,
.startKakurenBoo.gameKakureResult .cloudBoo,
.startKakurenBoo.gameKakureResult .cloudBoo img,
.startKakurenBoo.gameKakureResult .backBoo1,
.startKakurenBoo.gameKakureResult .backBoo2,
.startKakurenBoo.gameKakureResult .runBoo1,
.startKakurenBoo.gameKakureResult .runBoo2,
.startKakurenBoo.gameKakureResult .fountain {
    display:none;
}
.startKakurenBoo.gameKakureResult .restartBtnkakuBoo {
    opacity:0;
    top:50vw;
    margin-left: -15vw;
    animation: fadeIn .3s ease-out 1.2s 1 forwards;
}
.startKakurenBoo.gameKakureResult .point {
    display: none;
    border-color: #000000;
    border-style: solid;
    border-width: 6px;
    color: #ea0063;
    font-size: 197%;
    font-weight: bold;
    line-height: 1.6em;
    text-align: center;
    margin-top: 5px;
}
.startKakurenBoo .gfound,
.startKakurenBoo .found,
.startKakurenBoo .lose {
    display:none;
}

/* KakurenBoo GAME RESULT kakureGWin */
.startKakurenBoo.kakureGWin .gfound {
    display:block;
}

.startKakurenBoo.kakureGWin .gfound .goundBg {
    position:absolute;
    top:-10vw;
    left:0;
}
.startKakurenBoo.kakureGWin .gfound .title {
    opacity:0;
    position:absolute;
    top:1vw;
    width:auto;
    height:20vw;
}
.startKakurenBoo.kakureGWin .gfound .title.title1 {
    left:10vw;
    animation: foundText 1s linear 0s 1 forwards;
}
.startKakurenBoo.kakureGWin .gfound .title.title2 {
    left:31vw;
    animation: foundText 1s linear .5s 1 forwards;
}
.startKakurenBoo.kakureGWin .gfound .title.title3 {
    left:52vw;
    animation: foundText 1s linear 1.5s 1 forwards;
}
.startKakurenBoo.kakureGWin .gfound .title.title4 {
    left:73vw;
    animation: foundText 1s linear 2s 1 forwards;
}
.startKakurenBoo.kakureGWin .gfound .text {
    opacity: 0;
    position: absolute;
    top: 21vw;
    left: 50%;
    width: 70vw;
    animation: foundText 1s linear 1s 1 forwards;
    margin-left: -35vw;
}
.startKakurenBoo.kakureGWin .gfound .booFound {
    position: absolute;
    top: 28vw;
    left: 36vw;
    width: 41vw;
}
/* KakurenBoo GAME RESULT kakureWin */
.startKakurenBoo.kakureWin .found {
    display:block;
}
.startKakurenBoo.kakureWin .found .title {
    opacity: 1;
    position: absolute;
    top: 3vw;
    left: 50%;
    margin-left: -30vw;
    animation: kakureWinbounce .5s ease-out 0s 1 forwards;
    width: 60vw;
}
.startKakurenBoo.kakureWin .found .booFound {
    position: absolute;
    top: 28vw;
    left: 50%;
    width: 40vw;
    margin-left: -13vw;
}
/* KakurenBoo GAME RESULT kakureLose */
.startKakurenBoo.kakureLose .lose {
    display:block;
}

.startKakurenBoo.kakureLose .lose .goundBg {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.startKakurenBoo.kakureLose .lose .title {
    opacity: 0;
    position: absolute;
    top: 5vw;
    width: auto;
    height: 13vw;
}
.startKakurenBoo.kakureLose .lose .title.title1 {
    left:8vw;
    animation: fadeIn .1s ease-out 0s 1 forwards;
}
.startKakurenBoo.kakureLose .lose .title.title2 {
    left:25vw;
    animation: fadeIn .1s ease-out .3s 1 forwards;
}
.startKakurenBoo.kakureLose .lose .title.title3 {
    left:41vw;
    animation: fadeIn .1s ease-out .6s 1 forwards;
}
.startKakurenBoo.kakureLose .lose .title.title4 {
    left:57vw;
    animation: fadeIn .1s ease-out .9s 1 forwards;
}
.startKakurenBoo.kakureLose .lose .title.title5 {
    left:68vw;
    animation: fadeIn .1s ease-out 1.2s 1 forwards;
}
.startKakurenBoo.kakureLose .lose .text {
    position: absolute;
    top: 35vw;
    left: 50%;
    margin-left: -25vw;
    width: 50vw;
}


@keyframes kakuBooCloud {
	0% {left:-30vw;}
	100% {left:140vw;}
}
@keyframes runBoo1 {
	0% {left:140vw;}
	100% {left:-30vw;}
}
@keyframes runBoo2 {
	0% {left:-30vw;}
	100% {left:140vw;}
}
@keyframes foundText {
	0% {opacity:0;transform: scale(4, 4);}
	100% {opacity:1;transform: scale(1, 1);}
}
@keyframes kakuBooCloudGold {
	0% {bottom:-5vw;}
	80% {bottom:0;}
	100% {bottom:0;}
}
@keyframes kakuBooGold {
	0% {bottom:-56px;}
	80% {bottom:0;}
	100% {bottom:0;}
}
@keyframes kakureWinbounce {
	0% {opacity: 0;transform: scale(1, 1);}
	1% {opacity: 0;transform: scale(0.1, 0.1);}
	50% {opacity: 1;transform: scale(2, 2);}
	70% {opacity: 1;transform: scale(0.5, 0.5);}
	90% {opacity: 1;transform: scale(1.5, 1.5);}
	100% {opacity: 1;transform: scale(1, 1);}
}

/* ----------------------------------
    Game GOLF
----------------------------------- */
.startGolf .pose {
    opacity:0;
    position:absolute;
    top: 24vw;
    left: 23vw;
    width: 25vw;
}
.startGolf .pose.pose1 {opacity:1;}
.startGolf .pose.pose2 {left:22vw;}
.startGolf .pose.pose3 {left:16vw;}
.startGolf .tee {
    position:absolute;
    top: 46vw;
    left: 50%;
    margin-left: -1.5vw;
    width: 3vw;
}
.startGolf .ball {
	position:absolute;
    top: 43vw;
    left: 50%;
    margin-left: -1.5vw;
    width: 3vw;
}
.startGolf .startBtnGolf {
	position:absolute;
    top: 50vw;
    left: 50%;
    margin-left: -15vw;
    cursor: pointer;
    width: 30vw;
}

/* GOLF ゲームスタート */
.startGolf.gameOn .pose.pose1 {opacity:0;}
.startGolf.gameOn .pose.pose2 {animation: fadeIn .5s step-start .0s 1 backwards;}
.startGolf.gameOn .pose.pose3 {animation: fadeIn .5s step-start .5s 1 forwards;}
.startGolf.gameOn .ball {animation: golfBall 1s linear .5s 1 forwards;}
.startGolf.gameOn .startBtn {opacity:0;}

/* GOLF 結果 */
.startGolf.golfWin .startBtnGolf,
.startGolf.golfLose .startBtnGolf {
    display:none;
}
.startGolf .golfResult {
    display:none;
}
.startGolf.golfWin .golfResult,
.startGolf.golfLose .golfResult {
    display:block;
}
.startGolf .golfResult .golfWin,
.startGolf .golfResult .golfLose {
    display:none;
}
.startGolf.golfWin .golfResult .golfWin,
.startGolf.golfLose .golfResult .golfLose {
    display:block;
}
.startGolf .restartBtnGolf {
	position:absolute;
    top: 50.5vw;
    left: 50%;
    margin-left: -20vw;
    cursor: pointer;
    width: 40vw;
    opacity:0;
    animation: fadeIn .3s ease-out 2.5s 1 forwards;
}
.startGolf .golfResult .ground2 {
    position:absolute;
    top:0;
    left:0;
}

/* GOLF 結果 ホールインワン */
.startGolf .golfResult .sun {
    opacity:0;
    position:absolute;
    top:0;
    left:0;
    transform: scale(1.5, 1.5);
    animation: fadeIn .5s ease-out 1.5s 1 forwards;
}
.startGolf.golfWin .golfResult .ball2 {
    position:absolute;
    top: 31vw;
    left:0;
    width: 5vw;
    animation: golfBallWin 1.5s ease-out 0s 1 forwards;
}
.startGolf .golfResult .baloon {
    opacity:0;
    position:absolute;
    top:-2vw;
    left:0;
    animation: holeInOne .6s ease-in-out 1.5s 1 forwards;
}
.startGolf .golfResult .booWin {
	opacity: 0;
    position:absolute;
    top: 38vw;
    left: 60vw;
    width: 34vw;
    animation: fadeIn .5s ease-out 1.5s 1 forwards;
}
/* GOLF 結果 残念 */
.startGolf .golfResult .ground3 {
    opacity: 0;
    position:absolute;
    top:0;
    left:0;
    animation: fadeIn .5s ease-out 1.5s 1 forwards;
}
.startGolf.golfLose .golfResult .ball2 {
    position:absolute;
    top: 31vw;
    left:0;
    width: 5vw;
    animation: golfBallLose 1.5s ease-out 0s 1 forwards;
}
.startGolf .golfResult .golfLose .title {
    opacity: 0;
    position:absolute;
    top:2vw;
    left:2vw;
    width: 52%;
    animation: fadeIn .5s ease-out 2s 1 forwards;
}
.startGolf .golfResult .golfLose .booLose {
    opacity: 0;
    position:absolute;
    top:26vw;
    left:30vw;
    width:30vw;
    animation: fadeIn .5s ease-out 2s 1 forwards;
}

@keyframes golfBall {
	0% {top:43vw;opacity:1;transform: scale(1, 1);}
	50% {top:3vw;opacity:1;transform: scale(.7, .7);}
	98% {top:20vw;opacity:1;transform: scale(.3, .3);}
	100% {top:20vw;opacity:0;transform: scale(.3, .3);}
}
@keyframes golfBallWin {
	0% {left:0;}
	98% {left:58vw;top:31vw;opacity:1;}
	100% {left:58vw;top:33vw;opacity:0;}
}
@keyframes golfBallLose {
	0% {left:0;}
	100% {left:51vw;}
}
@keyframes holeInOne {
	0% {opacity: 0;transform: scale(1, 1);}
	1% {opacity: 0;transform: scale(0.1, 0.1);}
	50% {opacity: 1;transform: scale(2, 2);}
	70% {opacity: 1;transform: scale(0.5, 0.5);}
	90% {opacity: 1;transform: scale(1.5, 1.5);}
	100% {opacity: 1;transform: scale(.95, .95);}
}

/* ----------------------------------
    Game BASEBALL
----------------------------------- */
.startBaseball .pitcher {
    position:absolute;
    top: 14vw;
    left: 41vw;
    width: 11vw;
}
.startBaseball img {
    width:100%;
    height:auto;
}
.startBaseball .pitcher.pitcher2 {opacity:0;}
.startBaseball .ball {
    opacity:0;
	position:absolute;
    top: 17vw;
    right: 45vw;
    width: 3vw;
}
.startBaseball .batter {
    position:absolute;
    top: 26vw;
    left: 20vw;
    width: 33vw;
}

.startBaseball .batter.batter2 {opacity:0;}

.startBaseball.gameOn .pitcher.pitcher1 {animation: fadeIn .5s ease 0s 1 reverse forwards;}
.startBaseball.gameOn .pitcher.pitcher2 {animation: fadeIn 1s step-start .4s 1 forwards;}
.startBaseball.gameOn .ball {animation: throwball .7s linear .7s 1 forwards;}
.startBaseball.gameOn .batter.batter1 {animation: fadeIn .2s ease 1s 1 reverse forwards;}
.startBaseball.gameOn .batter.batter2 {animation: fadeIn 1s step-start 1.2s 1 forwards;}

.resultGame {
	width:100%;
	margin:0 auto;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.resultGame .fx {
	width:100%;
	margin:0 auto;
	position:absolute;
	top:0;
	left:0;
	opacity:0;
}
/* Game RESULT BASEBALL */
 .throwSelect.gameOn {
    display:none;
}
#baseballIntro.gameResult{
}
 .startBaseball .result {
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.resultBox {
    display:none;
}
.resultGame {
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.startBaseball.gameOn.rhit .resultGame.rhit,
.startBaseball.gameOn.r2hit .resultGame.r2hit,
.startBaseball.gameOn.r3hit .resultGame.r3hit,
.startBaseball.gameOn.homerun .resultGame.homerun,
.startBaseball.gameOn.m_homerun .resultGame.m_homerun,
.startBaseball.gameOn.out .resultGame.out,
.resultBox.gameResult {
    display:block;
}

.resultGame.rhit .title,
.resultGame.r2hit .title,
.resultGame.r3hit .title {
	animation: fadeIn .2s ease 1s 4 normal forwards;
}
.resultGame.rhit .chara {
	position:absolute;
	top:17vw;
	right: 48vw;
	width: 28vw;
	animation: GoBase .7s ease 0s 1 alternate forwards;
}

.resultGame.r2hit .chara {
	position:absolute;
	top:15vw;
	right: -40vw;
	width: 90vw;
	animation: Go2Base .7s ease-out 0s 1 alternate forwards;
}
.resultGame.r3hit .chara {
	position:absolute;
	top:15vw;
	right: -40vw;
	width: 90vw;
	animation: Go2Base .7s ease 0s 1 alternate forwards;
}

.resultGame.out .title {animation: baseBounce .7s linear 2s 1 forwards;}
.resultGame.out .chara {
    position: absolute;
    top: 11vw;
    right: 1vw;
    width: 52vw;
    opacity: 0;
}
.resultGame.out .chara.out1,
.resultGame.out .chara.out2 {
    top: 6vw;
}
.resultGame.out .chara.out1 {animation: fadeIn .5s step-start 0s 1 reverse backwards;;}
.resultGame.out .chara.out2 {animation: fadeIn 1.2s step-start .5s 1;}
.resultGame.out .chara.out3 {animation: fadeIn 1s step-start 1.7s 1 forwards;}
.resultGame.out .chara img {width:100%;height:auto;}
.resultGame.out .shadow {
	display:block;
	width:100%;
	height:200px;
	background:linear-gradient( 180deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, 0));
	animation: fadeIn .5s ease 1s 1 alternate forwards;
}
.resultGame.out .ball {
	position:absolute;
	top:50vw;
	left: 48vw;
	width: 4vw;
	animation: outball 1s ease .5s 1 alternate forwards;
}

.resultGame.homerun .title {	animation: homerun 1.6s ease 1.4s 1 normal forwards;}
.resultGame.homerun .count {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
    height:100%;
	opacity:0;
	animation: fadeIn .7s ease 1.4s 1 normal forwards;
}
.resultGame.homerun .count img {width:100%;height:auto;}

.resultGame.homerun .ball img {width:100%;height:auto;}
.resultGame.homerun .fw1 {animation: fadeIn .4s ease 1.8s 1 backwards;}
.resultGame.homerun .fw2 {animation: fadeIn .4s ease 2.0s 1 backwards;}
.resultGame.homerun .fw3 {animation: fadeIn .4s ease 2.2s 1 backwards;}
.resultGame.homerun .fw4 {animation: fadeIn .4s ease 2.4s 1 backwards;}

.resultGame.m_homerun .sun1 {animation: fadeIn .3s linear 1.4s 4 normal backwards;}
.resultGame.m_homerun .sun2 {animation: fadeIn .3s linear 1.6s 4 normal forwards;}
.resultGame.m_homerun .bliz1 {animation: fadeIn .3s linear 1.4s 4 normal backwards;}
.resultGame.m_homerun .bliz2 {animation: fadeIn .3s linear 1.6s 4 normal backwards;}

.resultGame.m_homerun .title {animation: homerun 1.2s ease 1.0s 1 normal forwards;}
.resultGame.m_homerun .count {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
    height:100%;
	opacity:0;
	animation: fadeIn .7s ease 1.4s 1 normal forwards;
}
.resultGame.m_homerun .count img {width:100%;height:auto;}
.resultGame.homerun .ball,
.resultGame.m_homerun .ball {
	position:absolute;
	top:-10vw;
	right: 47vw;
	width: 2vw;
	animation: mballrun 1s linear 0s 1 normal forwards;
}
.resultGame.m_homerun .ball img {width:100%;height:auto;}
.resultGame.m_homerun .fw1 {animation: fadeIn .4s ease 1.8s 2 backwards;}
.resultGame.m_homerun .fw2 {animation: fadeIn .4s ease 1.9s 2 backwards;}
.resultGame.m_homerun .fw3 {animation: fadeIn .4s ease 2.0s 2 backwards;}
.resultGame.m_homerun .fw4 {animation: fadeIn .4s ease 2.1s 2 backwards;}
.resultGame.m_homerun .fw5 {animation: fadeIn .4s ease 2.2s 2 backwards;}
.resultGame.m_homerun .fw6 {animation: fadeIn .4s ease 2.3s 2 backwards;}

@keyframes throwball {
	0% {top:17vw;opacity:0;}
	90% {top:42vw;opacity:1;}
	100% {top:42vw;opacity:0;}
}
@keyframes GoBase {
	0% {right: -50vw;}
	100% {right: 48vw;}
}
@keyframes Go2Base {
	0% {right: -150vw;}
	100% {right: -40vw;}
}

@keyframes baseBounce {
	0% {top:-200px;opacity:0;}
	50% {top:0px;}
	60% {top:20px;}
	70% {top:0px;}
	80% {top:20px;}
	90% {top:10px;}
	100% {top:20px;opacity:1;}
}
@keyframes outball {
	0% {top:50vw;opacity:1;}
	50% {top:30vw;opacity:1;}
	100% {top:-10vw;opacity:0;}
}
@keyframes ballrun {
	0% {left:100vw;top:-10vw;opacity:0;}
	60% {left:25vw;top:25vw;opacity:1;}
	100% {left:10vw;top:45vw;opacity:0;}
}
@keyframes homerun {
	0% {opacity:0;transform: scale(0, 0);}
	40% {opacity:1;transform: scale(1.0, 1.0);}
	50% {opacity:.5;}
	60% {opacity:1;}
	70% {opacity:.5;}
	80% {opacity:1;}
	90% {opacity:.5;}
	100% {opacity:1;}
}
@keyframes mballrun {
	0% {top:-10vw;opacity:1;}
	70% {top:40vw;opacity:1;}
	100% {top:42vw;opacity:0;}
}

/* RESULT TEXT */
#innerGame .baseball .resultBox {
    display:none;
	background-image: none;
	background-position: right center;
	background-repeat: no-repeat;
	background-size: 100% auto;
	border:1vw solid  #000000;
	height: 16vw;
	max-width: 100%;
	margin: 2vw auto 0 auto;
}
#innerGame .resultBox.gameResult {
    display:block;
    max-width: 100%;
}
#innerGame .resultBox.gameResult.rhit,
#innerGame .resultBox.gameResult.r2hit,
#innerGame .resultBox.gameResult.r3hit {
	background-image: url(/images/game/baseball/bg_hit.gif);
}
#innerGame .resultBox.gameResult.homerun {
background-image: url(/images/game/baseball/bg_homerun.gif);
}
#innerGame .resultBox.gameResult.m_homerun {
background-image: url(/images/game/baseball/bg_m_homerun.gif);
}
#innerGame .resultBox.gameResult.out {
	background-image:none;
}
#innerGame .baseball .resultBox .inner {
	padding: 5vw 30vw 5vw 5vw;
}
#innerGame .baseball .resultBox.out .inner {
	padding: 5vw;
}
#innerGame .baseball .resultBox .caption {
	background-image: none;
	color: #ea4b7d;
	font-size: 120%;
	font-weight: bold;
	line-height: 1em;
	text-align: center;
	max-width: 100%;
}
#innerGame .baseball .resultBox .point {
	color: #ea0063;
	font-size: 150%;
	font-weight: bold;
	height: 1em;
	line-height: 1em;
	text-align: center;
	max-width: 100%;
}

/* ----------------------------------
    Game BOWLING
----------------------------------- */
.startBowling img {
    width:100%;
    height:auto;
}
.startBowling .ground2 {
    position:absolute;
    top:0;
    left:0;
}
.startBowling .pose {
    opacity:0;
    position:absolute;
    top: 25vw;
    left: 15vw;
    width: 30vw;
}
.startBowling .pose.pose3 {width:35vw;left: 13vw;}
.startBowling .pose.pose4 {width:30vw;}
.startBowling .bowl {
    opacity:0;
    position:absolute;
    top: 30vw;
    left: 42vw;
    width: 10vw;
}
/* GAME START */
.startBowling.gameOn .ground2 {animation: fadeOut .3s step-start .2s 1 forwards;}
.startBowling.gameOn .pose.pose2 {animation: fadeIn .5s step-start .3s 1;}
.startBowling.gameOn .pose.pose3 {animation: fadeIn .5s step-start .8s 1;}

.gameBowling .throwSelect.gameOn {
    display:none;
}

/* Game RESULT BOWLING */
#bowlingIntro.gameResult{
}
.gameBowling .resultBox {
    display:none;
}
.gameBowling .resultBox.gameResult {
    display:block;
}
.gameBowling .resultBox .caption {
    opacity:0;
}
.gameBowling .resultBox.gameResult .caption {
    font-size:4vw!important;
    animation: fadeIn .5s ease 0.5s 1 forwards;
}

.gameBowling .resultGame {
    display:none;
	width:100%;
    height:100%;
	overflow: hidden;
    position: absolute;
    top:0;
    left:0;
}
.gameBowling.startBowling.gameOn.strike .resultGame.bStrike,
.gameBowling.startBowling.gameOn.spare .resultGame.bSpare,
.gameBowling.startBowling.gameOn.gutter .resultGame.bGarter {
    display:block;
}
.gameBowling .resultGame .fx {
    width:100%;
    height:100%;
	position:absolute;
	top:0;
	left:0;
	opacity:0;
}

/* STRIKE & SPARE */

.startBowling.gameOn.strike .pose.pose4,
.startBowling.gameOn.spare .pose.pose4 {animation: pose4 2s ease -.2s 1 forwards;}

.startBowling.gameOn.strike .bowl,
.startBowling.gameOn.spare .bowl {animation: throwbowl 2s linear 0s 1;}

@keyframes pose4 {
	0% {opacity:1;}
	100% {opacity:1;}
}

@keyframes throwbowl {
	0% {top:30vw;opacity:0;}
	1% {opacity:1;}
	100% {top:18vw;opacity:1;transform: scale(.6, .6);}
}

.rBowling .sun {
	animation: fadeIn .5s ease 2.5s 4 forwards;
}
.rBowling .baloon {
    width:100%;
    height:auto;
	animation: zoomOver .3s ease 2.5s 1 forwards;
}
.rBowling .pin {
	position:absolute;
	width:6vw;
    opacity:0;
}
.rBowling .pin img {width:100%;height:auto;}
.rBowling .pin.pin1 {
	transform:rotate(45deg);
	filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.5));
	animation: pin1 .5s ease 2.6s 1 forwards;
    width: 8vw;
}
.rBowling .pin.pin2 {
	transform:rotate(-75deg);
	filter: drop-shadow(-10px 10px 10px rgba(0,0,0,0.5));
	animation: pin2 .5s ease 2.6s 1 forwards;
}
.rBowling .pin.pin3 {
	transform:rotate(-50deg);
	filter: drop-shadow(-10px 10px 10px rgba(0,0,0,0.5));
	animation: pin3 .4s ease 3.1s 1 forwards;
}
.rBowling .pin.pin4 {
	transform:rotate(-35deg);
	filter: drop-shadow(0 10px 10px rgba(0,0,0,0.5));
	animation: pin4 .4s ease 3.1s 1 forwards;
    width: 8vw;
}
.rBowling .pin.pin5 {
	transform:rotate(110deg);
	filter: drop-shadow(10px 0 10px rgba(0,0,0,0.5));
	animation: pin5 .4s ease 3.1s 1 forwards;
    width: 7vw;
}
.rBowling .pin.pin6 {
	transform:rotate(45deg);
	animation: pin6 .4s ease 3.3s 1 forwards;
}
.rBowling .pin.pin7 {
	transform:rotate(-40deg);
	animation: pin7 .4s ease 3.3s 1 forwards;
}
.rBowling .pin.pin8 {
	transform:rotate(225deg);
	animation: pin8 .4s ease 3.3s 1 forwards;
}
.rBowling .pin.pin9 {
	transform:rotate(-210deg);
	animation: pin9 .4s ease 3.3s 1 forwards;
}
.rBowling .pin.pin10 {
	transform: rotate(-48deg);
	animation: pin10 .4s ease 3.3s 1 forwards;
	width: 7vw;
}
.rBowling .cracker {
	animation: zoom .3s ease 3.3s 1 forwards;
}
.rBowling .title {
	animation: zoomOver .3s ease 3s 1 normal forwards;
	
}
.rBowling .text {
	filter: drop-shadow(0px 0px 10px rgba(255,255,255,1));
	animation: blink 1s ease 3.4s 1 normal forwards;
}

@keyframes blink {
	0% {opacity:0;transform: scale(0, 0);}
	40% {opacity:1;transform: scale(1.0, 1.0);}
	50% {opacity:0;}
	60% {opacity:1;}
	70% {opacity:0;}
	80% {opacity:1;}
	90% {opacity:0;}
	100% {opacity:1;}
}
.bStrike .shadow {
	width:100%;
	height:100%;
	background:rgba(255,0,120,.5);
	animation: fadeIn .6s ease 2.2s 1 forwards;
}
.bStrike .resulbowl {
	position:absolute;
	top: 17vw;
    left: 76vw;
    width: 13vw;
	opacity:0;
	animation: strikeBowl .3s ease 3.2s 1 normal forwards;
}
.bSpare .shadow {
	width:100%;
	height:50%;
	background:rgba(255,220,0,.5);
	animation: fadeIn .6s ease 2.2s 1 forwards;
}
.bSpare .resulbowl {
	position:absolute;
	top: 8vw;
    left: 38vw;
    width: 13vw;
	opacity:0;
	animation: spareBowl .3s ease 3.2s 1 normal forwards;
}
.resulbowl img {width:100%;height:auto;}

@keyframes zoomOver {
	0% {transform: scale(0.4, 0.4);opacity: 0;}
	90% {transform: scale(1.4, 1.4);opacity: 1;}
	100% {transform: scale(1, 1);opacity: 1;}
}

@keyframes zoom {
	0% {transform: scale(0.4, 0.4);opacity: 0;}
	100% {transform: scale(1, 1);opacity: 1;}
}
@keyframes strikeBowl {
	0% {top:25vw;left:120vw;opacity:0;}
	100% {top:17vw;left:76vw;opacity:1;}
}
@keyframes spareBowl {
	0% {top:12vw;left:40vw;opacity:0;}
	100% {top:9vw;left:50vw;opacity:1;}
}
@keyframes gutterBowl {
	0% {top:38vw;left:42vw;opacity:0;}
	40% {top:25vw;left:22vw;opacity:1;transform: scale(.9, .9);}
	80% {top:15vw;left:30vw;opacity:1;transform: scale(.9, .9);}
	100% {top:15vw;left:30vw;opacity:0;transform: scale(.7, .7);}
}
@keyframes gutterfadeIn {
	0% {opacity: 1;top:27vw;right: 24vw;} 
	100% {opacity:1;top:25vw;right: 18vw;}
}
@keyframes pin1 {
	0% {left:34vw;top:14vw;opacity: 0;} 
	100% {left:15vw;top:37vw;opacity: 1;}
}
@keyframes pin2 {
	0% {left:48vw;top:14vw;opacity: 0;} 
	100% {left:80vw;top:2vw;opacity: 1;}
}
@keyframes pin3 {
	0% {left:35vw;top:14vw;opacity: 0;} 
	100% {left:14vw;top:6vw;opacity: 1;}
}
@keyframes pin4 {
	0% {left:35vw;top:14vw;opacity: 0;} 
	100% {left:77vw;top:30vw;opacity: 1;}
}
@keyframes pin5 {
	0% {left:35vw;top:14vw;opacity: 0;} 
	100% {left:45vw;top:36vw;opacity: 1;}
}
@keyframes pin6 {
	0% {left:35vw;top:14vw;opacity: 0;} 
	100% {left:18vw;top:6vw;opacity: 1;}
}
@keyframes pin7 {
	0% {left:35vw;top:14vw;opacity: 0;} 
	100% {left:9vw;top:28vw;opacity: 1;}
}
@keyframes pin8 {
	0% {left:35vw;top:14vw;opacity: 0;} 
	100% {left:81vw;top:24vw;opacity: 1;}
}
@keyframes pin9 {
	0% {left:35vw;top:14vw;opacity: 0;} 
	100% {left:49vw;top:34vw;opacity: 1;}
}
@keyframes pin10 {
	0% {left:35vw;top:14vw;opacity: 0;} 
	100% {left:43vw;top:0vw;opacity: 1;}
}

/* GUTTER */

.startBowling.gameOn.gutter .pose.pose4 {animation: pose4 2s ease -.2s 1 forwards,fadeOut .1s ease 2s 1 forwards;}
.startBowling.gameOn.gutter .bowl {animation: gutterBowl 2.5s linear 0s 1;}

@keyframes gutterBowl {
	0% {top:30vw;left:42vw;opacity:0;}
	1% {opacity:1;}
	50% {top:14vw;left:26vw;transform: scale(.6, .6);}
	90% {opacity:1;}
	100% {top:12vw;left:31vw;opacity:0;transform: scale(.4, .4);}
}

.startBowling.gameOn.gutter .bGarter .chara.out2,
.startBowling.gameOn.gutter .bGarter .chara.out3 {
	position:absolute;
	top:25vw;
	right: 28vw;
	opacity:0;
	width:34vw;
}
.bGarter .chara img {width:100%;height:auto;}
.startBowling.gameOn.gutter .bGarter .chara.out2 {animation: fadeIn 1s step-start 2s 1;}
.startBowling.gameOn.gutter .bGarter .chara.out3 {animation: fadeIn .1s step-start 3s 1 forwards;}

.startBowling.gameOn.gutter .bGarter .shadow {
	display:block;
	width:100%;
	height:60vw;
	background:linear-gradient( 180deg, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
	animation: fadeIn .5s ease 2.8s 1 alternate forwards;
}

.startBowling.gameOn.gutter .bGarter .title {animation: bowlBounce .7s linear 3s 1 forwards;}
.startBowling.gameOn.gutter .bGarter .text {animation: bowlBounce .7s linear 3.4s 1 forwards;}

@keyframes bowlBounce {
	0% {top:-100vw;opacity:0;}
	50% {top:0px;}
	60% {top:5vw;}
	70% {top:0px;}
	80% {top:5vw;}
	90% {top:1vw;}
	100% {top:5vw;opacity:1;}
}

/* ----------------------------------
    Game DARTS
----------------------------------- */
.startDarts .pose {
    opacity:0;
    position:absolute;
    top: 17vw;
    left: 17vw;
    width: 43vw;
}
.startDarts .pose.pose1 {opacity:1;}
.startDarts .ground2 {
    opacity:0;
    position:absolute;
    top:0;
    left:0;
}
.startDarts .arrow {
    opacity:0;
	position:absolute;
        top: 17vw;
    left: 57vw;
    width: 12vw;
}
.startDarts.gameOn .pose.pose1 {animation: fadeIn .1s ease .3s 1 reverse forwards;}
.startDarts.gameOn .pose.pose2 {animation: fadeIn .5s step-start .4s 1 backwards;}
.startDarts.gameOn .pose.pose3 {animation: fadeIn .5s step-start .9s 1 forwards;}
.startDarts.gameOn .ground2 {animation: fadeIn .5s ease 1.2s 1 forwards;}
.startDarts.gameOn .arrow {animation: dartsArrow 3s ease-out 1.4s 1 forwards;}

.throwSelect.gameOn {
    display:none;
}
#dartsIntro.gameResult{

}
.startDarts .result {
    display:none;
    position:absolute;
    top:0;
    left:0;
}
.startDarts.gameOn.result5 .result.score5,
.startDarts.gameOn.result4 .result.score10,
.startDarts.gameOn.result3 .result.score20,
.startDarts.gameOn.result2 .result.score30,
.startDarts.gameOn.result1 .result.score50,
.startDarts.gameOn.score5 .result.score5,
.startDarts.gameOn.score10 .result.score10,
.startDarts.gameOn.score20 .result.score20,
.startDarts.gameOn.score30 .result.score30,
.startDarts.gameOn.score50 .result.score50 {
    display:block;
}

/*
#ruleBox,
.resultBox {
    display:none;
}

#ruleBox.gameResult,
.resultBox.gameResult{
    display:block;
}
*/

/* +++++++ */

/* GambooDarts */
#innerGame .GambooDarts .resultBox {background-image: url(/images/game/darts/bg.gif);background-position: top left;background-repeat: no-repeat;border:none;height: auto;max-width: 638px;margin: 0px auto;background-size: cover;}
#innerGame .GambooDarts .resultBox .inner {padding: 20px 0px 0 20px;}
#innerGame .GambooDarts .resultBox .caption {background-image: none;background-position: left top;background-repeat: no-repeat;color: #FFF;font-size: 200%;font-weight: bold;/* height: 40px; */line-height: 40px;text-align: center;padding: 0px;width: 100%;letter-spacing: 0.1em;text-shadow: 0px 0px 15px #3c3c3c;}
#innerGame .GambooDarts .resultBox .caption2 {font-size: 110%;position: relative;width: 100%;/* float: left; */line-height: 1.5em;text-align: left;height: auto;}
#innerGame .GambooDarts .resultBox .caption2 span {
    display: block;
    float: left;
    margin-top: 0.5em;
    text-align: left;
    margin-left: 5em;
}
#innerGame .GambooDarts .resultBox .caption2 dl{
    /* float: right; */
    margin-right: 13px;
}
#innerGame .GambooDarts .resultBox .caption2 dd{font-weight: bold;line-height: 1.1em;text-align:center;}
#innerGame .GambooDarts .resultBox .caption2 em{
float:right;
font-weight: bold;
}

#innerGame .GambooDarts .resultBox .point {
color: #ea0063;
font-size: 197%;
font-weight: bold;
/*height: 43px;*/
line-height: 43px;
text-align: center;
max-width: 456px;
}
#innerGame .GambooDarts .resultBox .caption {padding-left: 4.5em;}
#innerGame .GambooDarts .resultBox .caption2 {padding-left: 0;}


/* +++++++ */
#innerGame .GambooDarts .resultBox .caption2 span {
    margin-left:0!important;
    width:100%;
    float:none!important;
    text-align: center!important
        ;}
#innerGame .GambooDarts .resultBox .caption2 dl {
    width:100%;
    margin:0 auto;
    text-align:center;
    display: block;
    /* height: 200px; */
}
#innerGame .GambooDarts .resultBox .caption2 dl dd:nth-of-type(1) {
    display:inline-block;
    width:40%;
    text-align: right!important;
}
#innerGame .GambooDarts .resultBox .caption2 dl dd {
    display:inline-block;
    width:40%;
    text-align: left!important;
    padding-left:10px;
    margin-bottom: 1em;
}

@keyframes dartsArrow {
	0% {top:5vw;left: 70vw;opacity:1;transform: scale(1, 1);}
	1% {top:5vw;left: 70vw;opacity:0;transform: scale(1.5, 1.5);}
	90% {top: 17vw;left: 57vw;opacity:1;transform: scale(1, 1);}
	100% {top: 17vw;left: 57vw;opacity:1;transform: scale(1, 1);}
}

/* ----------------------------------
    Game LOVERY
----------------------------------- */

.startLovery .resultGame {display:none;}

.startLovery .ground {
    background: linear-gradient(180deg, rgba(40,196,255,1) 0%, rgba(255,255,255,1) 100%);
}
.startLovery .ground2 {
    position:absolute;
    top:0;
    left:0;
}
.startLovery .clouds {    
    width:90%;
    position:absolute;
    top:3vw;
    left:5%;
    transform: translate3d(0,0,0);
    animation: cloudBounce 2s linear 0s infinite alternate;
}

@keyframes cloudBounce {
    0% {top:3vw;}
    100% {top:5vw;}
}

.startLovery .couple {
    position:absolute;
    top: -2vw;
    width: 44vw;
    height:44vw;
    background-size: auto 44vw;
    background-repeat: no-repeat;
    margin: 0 auto;
}

.startLovery .couple.charaM {
    left: 2vw;
    background-image: url("/images/game/LovelyGamboo/bucky_m.svg");
    animation: smile .5s steps(2) alternate infinite;
}
.startLovery .couple.charaF {
    left:47vw;
    background-image: url("/images/game/LovelyGamboo/bucky_f.svg");
    animation: smile .5s steps(2) alternate infinite;
}
@keyframes smile {
    0% {background-position: -0 0;}
    100% {background-position: -88vw 0;}
}

.startLovery .bbl {
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    width:25vw;
    height:15.3vw;
    background-repeat:no-repeat;
    background-size:auto 15.3vw;
}
.startLovery .bbl.bblM {
    background-image: url("/images/game/LovelyGamboo/bubbleM.svg");
}
.startLovery .bbl.bblF {
    background-image: url("/images/game/LovelyGamboo/bubbleF.svg");
}
.startLovery .title,
.startLovery .heart,
.startLovery .dmy {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    opacity:0;
}


/* ゲームスタート */
.gameLovery .throwSelect.gameOn {
    display:none;
}
.startLovery.gameOn .couple.charaM {
    left:8vw;
    animation: movemen 2s ease 0s 1 forwards;
}
@keyframes movemen {
	0% {left:2vw;}
	100% {left:8vw;}
}

.startLovery.gameOn .bbl.bblM {
    top: 1vw;
    left:16vw;
    animation: fadeIn .5s ease 2s 1 forwards,fadeOut .5s ease 4s 1 forwards;
}
.startLovery.gameOn .bbl.bblF {/*Lastanime*/
    top: 2vw;
    left:56vw;
    animation: fadeIn .5s ease 3s 1 forwards,fadeOut .5s ease 4s 1 forwards;
}
.startLovery.gameOn .dmy {
    animation: fadeIn .5s ease 4s 1 forwards;
}

/* 告白失敗 */
.startLovery.failure .couple.charaF {
    opacity:0;
    background-position: -132vw 0;
    animation: failureFrau 1s ease 0s 1 forwards;
    left: 60vw;
    top: 10vw;
}
@keyframes failureFrau {
    0% {left: 60vw;opacity:0;}
    1% {left: 60vw;opacity:1;}
	100% {left: 64vw;opacity:1;}
}
.startLovery.failure .bbl.bblF {
    top: 12vw;
    left:67vw;
    background-position: -50vw 0;
    animation: fadeIn .5s ease 5s 1 forwards;
}
.startLovery.failure .bbl.bblM {
    top: 18vw;
    left:0vw;
    background-position: -50vw 0;
    animation: fadeIn .5s ease 7s 1 forwards;
}
.startLovery.failure .couple.charaM {
    animation: failureMen .5s step-end .5s 1 forwards;
}
.startLovery.failure .title.failure {
    animation: fadeIn 1s ease 1.5s 1 forwards;
}
.startLovery.failure .ground {
    animation: failureBG 1s linear 1s 1 forwards;
}
.startLovery.failure .ground img {
    animation: failureFlower 1s linear 1s 1 forwards;
}
.startLovery.failure .clouds img {
    animation: failureCloud 1s linear 1s 1 forwards;
}
@keyframes failureMen {
	100% {background-position: -132vw 0;left: -7vw;top: 12vw;}
}
@keyframes failureBG {
	0% {background: linear-gradient(180deg, rgba(40,196,255,1) 0%, rgba(255,255,255,1) 100%);}
	100% {background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(51,51,51,1) 100%);}
}
@keyframes failureFlower {
	100% {filter: grayscale(100%);opacity:.5;}
}
@keyframes failureCloud {
	100% {opacity:.2;}
}

/* 告白成功 */
.startLovery.success .couple.charaM {
    animation: successMen .5s step-end 0s 1 forwards;
}
.startLovery.success .couple.charaF {
    animation: successFem .5s step-end 0s 1 forwards;
}

@keyframes successMen {
	100% {background-position: -88vw 0;}
}
@keyframes successFem {
	100% {background-position: -88vw 0;}
}

.startLovery.success .bbl.bblF {
    opacity:0;
    top: 20vw;
    left:69vw;
    background-position: -25vw 0;
    animation: fadeIn .5s step-end 5s 1 forwards;
}
.startLovery.success .bbl.bblM {
    opacity:0;
    top: 20vw;
    left:0;
    background-position: -25vw 0;
    animation: fadeIn .5s step-end 5s 1 forwards;
}

.startLovery.success .ground {
    animation: successBG 1s linear 0s 1 forwards;
}

.startLovery.success .heart {
    animation: fadeIn .5s ease 1s 1 forwards;
}
.startLovery.success .title.success {
    animation: fadeIn 1s ease 1s 1 forwards;
}

@keyframes successBG {
	0% {background: linear-gradient(180deg, rgba(40,196,255,1) 0%, rgba(255,255,255,1) 100%);}
	100% {background: linear-gradient(180deg, rgba(255,179,210,1) 0%, rgba(255,226,235,1) 100%);}
}

/* 結果テキスト */
.gameLovery .resultBox {
    margin-top:25px;
}
.gameLovery .resultBox .point {
    opacity:0;
    color: #ea0063;
    font-size: 197%;
    font-weight: bold;
    line-height: 1.6em;
    text-align: center;
    animation: fadeIn .5s linear 1s 1 forwards;
}
.gameLovery .resultBox.failure .point {
    display:none;
}



/* ----------------------------------
    COMMON
----------------------------------- */
@keyframes fadeIn {
	0% {opacity: 0;} 
	100% {opacity:1;}
}
@keyframes fadeOut {
	0% {opacity: 1;} 
	100% {opacity:0;}
}




.gameAllResult {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    position: relative;
    overflow: hidden;}
.gameAllResultBox {
    background-image: none;
    background-position: right center;
    background-repeat: no-repeat;
    border-color: #000000;
    border-style: solid;
    border-width: 6px;
    max-width: 628px;
	padding: 20px;
    margin: 10px auto 0 auto;
    background-size: contain;
    color: #ea0063;
    font-size: 197%;
    font-weight: bold;
    line-height: 1.6em;
    text-align: center;}