@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:638px;
	margin:0 auto;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.throwSelect {
    display:inline-block;
        border: 1px solid #d0d0d0;
    width: auto;
    margin: 15px auto;
    padding: 0;
}
.throwSelect h3 {
    background-color: #ffffdc;
    color: #ffcd44;
    text-align: left;
    padding: 10px;
}
.throwSelect .link {
    margin:0 auto;
    padding:10px 10px 20px 10px;
}
.throwSelect.gameOn {
    display:none;
}
#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: 1.5rem;
    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:80px;
    left:100px;
    mix-blend-mode: overlay;
    animation:2s linear infinite rotelight;
}
.startSilhouette.gameOn .startlight {
    animation: rotelight 2s linear infinite,fadeOut 1s linear 3s 1 forwards;
}

.startSilhouette .chara {
    position:absolute;
    top:180px;
    left:50%;
    opacity:.75;
}
.startSilhouette .chara-a {margin-left:-245px;}
.startSilhouette .chara-b {margin-left:-85px;}
.startSilhouette .chara-c {margin-left:85px;}
.startSilhouette .chara .no {
    position:absolute;
    top:-50px;
    left:50%;
    margin-left:-15px;
    font-size:30px;
    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 4.9s 1 forwards;
}
.startSilhouette .ribbon {
    position:absolute;
    opacity:0;
}
.startSilhouette.gameOn.pointWin .ribbon {
    position:absolute;
    top:-350px;
}
.startSilhouette.gameOn.pointWin .ribbon1 {
    left:155px;
    transform-origin: top center;
    animation: fadeIn 0s linear 5s 1 forwards,down1 1s ease-in 4s 1 forwards,swing1 1s linear 4s infinite alternate;
}
.startSilhouette.gameOn.pointWin .ribbon1 img {
    transform: scale(-1, -1);
}
.startSilhouette.gameOn.pointWin .ribbon2 {
    left:245px;
    transform-origin: top center;
    animation: fadeIn 0s linear 5s 1 forwards,down2 1s ease-in 4s 1 forwards,swing1 .5s linear 4s infinite alternate;
}
.startSilhouette.gameOn.pointWin .ribbon3 {
    left:447px;
    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;
}
.startSilhouette.gameOn.pointWin .ribbon4 {
    top: 125px;
    left: 65px;
    animation: fadeIn 0s linear 5s 1 forwards;
}
.startSilhouette.gameOn.pointWin .ribbon5 {
    top: 90px;
    left: 510px;
    animation: fadeIn 0s linear 5s 1 forwards;
}
.startSilhouette.gameOn.pointWin .ribbon6 {
    top: 0;
    left: 400px;
    animation: fadeIn 0s linear 5s 1 forwards,swing1 1.5s linear 4s infinite alternate;
}
.startSilhouette.gameOn.pointWin .ribbon7 {
    top: 95px;
    left: 0;
    animation: down4 3s linear 5s infinite;
}
.startSilhouette.gameOn.pointWin .ribbon8 {
    top: 0px;
    right: 0;
    animation: down5 4s linear 5s infinite;
}
.startSilhouette.gameOn.pointWin .ribbon8 img {
    transform: scale(-1, -1);
}
.startSilhouette.gameOn.pointWin .ribbon9 {
    top: 0px;
    left: 200px;
    animation: down6 3s linear 6s infinite;
}
.startSilhouette.gameOn.pointWin .ribbon10 {
    top: 0px;
    left: 400px;
    animation: down7 4s linear 6s infinite;
}
.startSilhouette.gameOn.pointWin .ribbon10 img {
    transform: scale(-1, -1);
}
.startSilhouette .pinlight {
    position:absolute;
    top: 25px;
    left: 180px;
    opacity:0;
}
.startSilhouette.gameOn.pinLeft .pinlight {left: 20px;}
.startSilhouette.gameOn.pinCenter .pinlight {left: 180px;}
.startSilhouette.gameOn.pinRight .pinlight {left: 345px;}

.startSilhouette .comment {
    position:absolute;
    top: 105px;
    left: 0;
    opacity:0;
}
.startSilhouette .resultTitle {
    position:absolute;
    bottom:55px;
    left:0;
    opacity:0;
    width:100%;
    text-align: center;
    color:#FFF;
    font-size: 38px;
    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:35px;
    left:0;
    opacity:0;
}
.startSilhouette.gameOn .nextchallenge {
    animation: fadeIn 1s linear 6.5s 1 forwards;
}

/* キャラ+コメント+ピンライト 組み合わせ */
.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 0s linear 7s 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 6s 1 forwards;
}
.startSilhouette.gameOn.pointLose .resultTitle {/*負けタイトル*/
    animation: fadeIn 1s linear 6s 1 forwards;
}
.link input[type=submit].selectSilhouette.current {
    background-color:#ff8f9b;
}

/* テスト用 START*/
.testGame {
    border:3px solid #ffcd44;
    position:fixed;
    bottom:0;
    left:0;
    text-align:left;
    z-index:9999;
    background-color:#FFF;
    padding:10px;
}
.testGame .testBtn.current {
    color:#FF0004;
}
/* テスト用 END*/

@keyframes rotelight{
  0%{ transform:rotate(0);top:0px;left:20px;}
  50%{ transform:rotate(180deg);top:80px;left:200px;}
  100%{ transform:rotate(360deg);top:0px;left:20px;}
}
@keyframes down1 {
    0% { top:-350px; }
    100% { top:35px; }
}
@keyframes down2 {
    0% { top:-350px; }
    100% { top:40px; }
}
@keyframes down3 {
    0% { top:-350px; }
    100% { top:0px; }
}
@keyframes down4 {
    0% { top:95px;left: 0;opacity:1;transform: rotate(0deg); }
    50% { opacity:1;transform: rotate(-240deg); }
    51% { opacity:0; }
    100% { top:680px;left:200px;opacity:0;transform: rotate(0deg); }
}
@keyframes down5 {
    0% { top:0px;right: 0;opacity:1;transform: rotate(0deg); }
    55% { opacity:1;transform: rotate(-180deg); }
    56% { opacity:0; }
    100% { top:680px;right:200px;opacity:0;transform: rotate(0deg); }
}
@keyframes down6 {
    0% { top:0px;left: 200px;opacity:1;transform: rotate(0deg); }
    50% { opacity:1;transform: rotate(-180deg); }
    51% { opacity:0; }
    100% { top:680px;left:350px;opacity:0;transform: rotate(0deg); }
}
@keyframes down7 {
    0% { top:0px;left: 400px;opacity:1;transform: rotate(0deg); }
    50% { opacity:1;transform: rotate(-240deg); }
    51% { opacity:0; }
    100% { top:680px;left:250px;opacity:0;transform: rotate(0deg); }
}
@keyframes swing1 {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}
@keyframes upcurtain{
  0%{ top:0;}
  100%{ top:-441px;}
}
@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:10px;
    left:-70px;
    width:70px;
}
.startKakurenBoo .cloud .cloudBoo {
    position:absolute;
    top:10px;
    left:20px;
    width:30px;
    height:24px;
    overflow: hidden;
    transform:rotate(180deg);
}
.startKakurenBoo .cloud .cloudBoo img {
    position: absolute;
    bottom:-24px;
    left:0;
}
.startKakurenBoo .cloud.cloud1 {
    animation: kakuBooCloud 20s linear 0s infinite;
}
.startKakurenBoo .cloud.cloud2 {
    animation: kakuBooCloud 25s linear 5s infinite;
    top:20px;
}
.startKakurenBoo .cloud.cloud3 {
    animation: kakuBooCloud 30s linear 10s infinite;
}

.startKakurenBoo .fountain {
    position:absolute;
    top:80px;
    left: 0;
}
.startKakurenBoo .boo {
	position:absolute;
    top: 220px;
    left: 380px;
}
.startKakurenBoo .bubble {
	position:absolute;
    top: 120px;
    left: 400px;
}
.startKakurenBoo .startBtn {
	position:absolute;
    top: 340px;
    left: 50%;
    margin-left: -90px;
    cursor: pointer;
}
/* KakurenBoo CURSOR */
.startKakurenBoo.gameOn,
.startKakurenBoo.gameOn a:hover {
    cursor: none;
}
.startKakurenBoo.gameOn.gameKakureResult,
.startKakurenBoo.gameOn.gameKakureResult a:hover {
    cursor:default;
}
.startKakurenBoo #cursor {
    position: fixed;
    width: 90px;
    height: 90px;
    margin: -45px 0 0 -45px;
    z-index: 2;
    pointer-events: none;
    transition: transform 0.1s;
    opacity: 0;
}
/* KakurenBoo GAME START BASE */
.startKakurenBoo .goldBoo0 {
    display:none;
	position:absolute;
    top: 220px;
    left: 380px;
    width:80px;
    height:56px;
    overflow: hidden;
}
.startKakurenBoo .goldBoo0 img {
    position: absolute;
    bottom:-56px;
    left:0;
}
.startKakurenBoo .backBoo1 {
    display:none;
    position: absolute;
    top: 175px;
    left: 220px;
    transform: rotate(-45deg);
    width:80px;
    height:56px;
    overflow: hidden;
}
.startKakurenBoo .backBoo1 img {
    position: absolute;
    bottom:-56px;
    left:0;
}
.startKakurenBoo .backBoo2 {
    display:none;
    position: absolute;
    top: 175px;
    left: 340px;
    transform: rotate(45deg);
    width:80px;
    height:56px;
    overflow: hidden;
}
.startKakurenBoo .backBoo2 img {
    position: absolute;
    bottom:-56px;
    left:0;
}
.startKakurenBoo .runBoo1 {
    position: absolute;
    top: 160px;
    left: 720px;
}
.startKakurenBoo .runBoo2 {
    position: absolute;
    top: 240px;
    left: -180px;
    width:160px;
    transform:rotateY(180deg);
}
.startKakurenBoo .clickarea {
    display:none;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}
.startKakurenBoo .kakureResult {
    display:none;
}

/* 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 1;
}
.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 .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.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:345px;
    margin-left:-94px;
    animation: fadeIn .3s ease-out 1.2s 1 forwards;
}
.startKakurenBoo .gfound,
.startKakurenBoo .found,
.startKakurenBoo .lose {
    display:none;
}

/* KakurenBoo GAME RESULT kakureGWin */
.startKakurenBoo.kakureGWin .gfound {
    display:block;
}
.startKakurenBoo.kakureGWin .gfound .goundBg {
    position:absolute;
    top:-20px;
    left:0;
}
.startKakurenBoo.kakureGWin .gfound .title {
    opacity:0;
    position:absolute;
    top:5px;
}
.startKakurenBoo.kakureGWin .gfound .title.title1 {
    left:100px;
    animation: foundText 1s linear 0s 1 forwards;
}
.startKakurenBoo.kakureGWin .gfound .title.title2 {
    left:225px;
    animation: foundText 1s linear .5s 1 forwards;
}
.startKakurenBoo.kakureGWin .gfound .title.title3 {
    left:350px;
    animation: foundText 1s linear 1.5s 1 forwards;
}
.startKakurenBoo.kakureGWin .gfound .title.title4 {
    left:475px;
    animation: foundText 1s linear 2s 1 forwards;
}
.startKakurenBoo.kakureGWin .gfound .text {
    opacity:0;
    position:absolute;
    top:130px;
    left:140px;
    animation: foundText 1s linear 1s 1 forwards;
}
.startKakurenBoo.kakureGWin .gfound .booFound {
    position:absolute;
    top:170px;
    left:240px;
}

/* KakurenBoo GAME RESULT kakureWin */
.startKakurenBoo.kakureWin .found {
    display:block;
}
.startKakurenBoo.kakureWin .found .title {
    opacity:1;
    position:absolute;
    top: 20px;
    left: 50%;
    margin-left: -150px;
    animation: kakureWinbounce .5s ease-out 0s 1 forwards;
}
.startKakurenBoo.kakureWin .found .booFound {
    position:absolute;
    top:170px;
    left:200px;
}
/* KakurenBoo GAME RESULT kakureLose */
.startKakurenBoo.kakureLose .lose {
    display:block;
}

.startKakurenBoo.kakureLose .lose .goundBg {
    position: absolute;
    top: 0;
    left: 0;
}
.startKakurenBoo.kakureLose .lose .title {
    opacity:0;
    position:absolute;
    top: 20px;
}
.startKakurenBoo.kakureLose .lose .title.title1 {
    width:98px;
    left:76px;
    animation: fadeIn .1s ease-out 0s 1 forwards;
}
.startKakurenBoo.kakureLose .lose .title.title2 {
    width:89px;
    left:192px;
    animation: fadeIn .1s ease-out .3s 1 forwards;
}
.startKakurenBoo.kakureLose .lose .title.title3 {
    width:82px;
    left:299px;
    animation: fadeIn .1s ease-out .6s 1 forwards;
}
.startKakurenBoo.kakureLose .lose .title.title4 {
    width:58px;
    left:405px;
    animation: fadeIn .1s ease-out .9s 1 forwards;
}
.startKakurenBoo.kakureLose .lose .title.title5 {
    width:96px;
    left:473px;
    animation: fadeIn .1s ease-out 1.2s 1 forwards;
}
.startKakurenBoo.kakureLose .lose .text {
    position:absolute;
    top:235px;
    left:50%;
    margin-left:-150px;
}

@keyframes kakuBooCloud {
	0% {left:-120px;}
	100% {left:720px;}
}
@keyframes runBoo1 {
	0% {left:720px;}
	100% {left:-120px;}
}
@keyframes runBoo2 {
	0% {left:-180px;}
	100% {left:780px;}
}
@keyframes foundText {
	0% {opacity:0;transform: scale(4, 4);}
	100% {opacity:1;transform: scale(1, 1);}
}
@keyframes kakuBooCloudGold {
	0% {bottom:-24px;}
	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:150px;
    left:145px;
}
.startGolf .pose.pose1 {opacity:1;}
.startGolf .pose.pose2 {left:137px;}
.startGolf .pose.pose3 {left:100px;}
.startGolf .tee {
    position:absolute;
    top:300px;
    left: 50%;
    margin-left: -10px;
}
.startGolf .ball {
	position:absolute;
    top: 285px;
    left: 50%;
    margin-left: -10px;
}
.startGolf .startBtn {
	position:absolute;
    top: 344px;
    left: 50%;
    margin-left: -90px;
    cursor: pointer;
}

/* 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 .startBtn.restartBtnGolf {
    opacity:0;
    margin-left: -110px;
    animation: fadeIn .3s ease-out 2.2s 1 forwards;
}
/* GOLF 結果 ホールインワン */
.startGolf .golfResult .ground2 {
    position:absolute;
    top:0;
    left:0;
}
.startGolf.golfWin .golfResult .ball2 {
    position:absolute;
    top:215px;
    left:0;
    animation: golfBallWin 1.5s ease-out 0s 1 forwards;
}
.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 .golfResult .baloon {
    opacity:0;
    position:absolute;
    top:-30px;
    left:0;
    animation: holeInOne .6s ease-in-out 1.5s 1 forwards;
}
.startGolf .golfResult .booWin {
    opacity: 0;
    position:absolute;
    top:255px;
    left:418px;
    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:215px;
    left:0;
    animation: golfBallLose 1.5s ease-out 0s 1 forwards;
}
.startGolf .golfResult .golfLose .title {
    opacity: 0;
    position:absolute;
    top:20px;
    left:20px;
    animation: fadeIn .5s ease-out 2s 1 forwards;
}
.startGolf .golfResult .golfLose .booLose {
    opacity: 0;
    position:absolute;
    top:200px;
    left:220px;
    animation: fadeIn .5s ease-out 2s 1 forwards;
}

@keyframes golfBall {
	0% {top:285px;opacity:1;transform: scale(1, 1);}
	50% {top:40px;opacity:1;transform: scale(.7, .7);}
	98% {top:120px;opacity:1;transform: scale(.3, .3);}
	100% {top:120px;opacity:0;transform: scale(.3, .3);}
}
@keyframes golfBallWin {
	0% {left:0;}
	98% {left:400px;top:215px;opacity:1;}
	100% {left:400px;top:230px;opacity:0;}
}
@keyframes golfBallLose {
	0% {left:0;}
	100% {left:360px;}
}
@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:118px;
    left:290px;
}
.startBaseball .pitcher.pitcher2 {opacity:0;}

.startBaseball .ball {
    opacity:0;
	position:absolute;
	top:150px;
	right: 305px;
	width: 23px;
}

.startBaseball .batter {
    position:absolute;
    top:160px;
    left:115px;
}
.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:638px;
	margin:0 auto;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.resultGame .fx {
	position:absolute;
	top:0;
	left:0;
	opacity:0;
}

/* Game RESULT BASEBALL */
 .throwSelect.gameOn {
    display:none;
}
 .startBaseball .result {
    display:none;
    position:absolute;
    top:0;
    left:0;
}
.resultGame {
    display:none;
    position:absolute;
    top:0;
    left:0;
}

.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 {
    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:115px;
	right: -183px;
	width: 183px;
	animation: GoBase .7s ease 0s 1 alternate forwards; 
}

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

.resultGame.out .title {animation: baseBounce .7s linear 2s 1 forwards;}
.resultGame.out .chara {
	position:absolute;
	top:60px;
	right: 30px;
	opacity:0;
}
.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 .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:415px;
	right: 305px;
	width: 23px;
	animation: outball 1s ease .5s 1 alternate forwards;
}

.resultGame.homerun .title {
    animation: homerun 1.6s ease 1.4s 1 forwards;
}
.resultGame.homerun .count {
	position: absolute;
	top: 0;
	left: 0;
	opacity:0;
	animation: fadeIn .7s ease 1.4s 1 normal forwards;
}
.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;
	left: 0;
	top: 0;
	opacity:0;
	animation: fadeIn .7s ease 1.4s 1 normal forwards;
}
.resultGame.homerun .ball,
.resultGame.m_homerun .ball {
	position:absolute;
	left: 314px;
	top:287px;
	width: 9px;
	animation: mballrun 1s linear 0s 1 normal forwards;
}

.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:150px;opacity:0;}
	90% {top:290px;opacity:1;}
	100% {top:290px;opacity:0;}
}
@keyframes GoBase {
	0% {right: -183px;}
	100% {right: 300px;}
}
@keyframes Go2Base {
	0% {right: -600px;}
	100% {right: -280px;}
}

@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:415px;opacity:1;}
	50% {top:150px;opacity:1;}
	100% {top:-50px;opacity:0;}
}
@keyframes ballrun {
	0% {left:300px;top:-9px;opacity:0;}
	30% {left:250px;top:9px;}
	40% {left:140px;top:68px;}
	50% {left:128px;top:100px;}
	60% {left:115px;top:138px;opacity:1;}
	70% {left:106px;top:172px;}
	80% {left:99px;top:206px;opacity:1;}
	90% {left:94px;top:242px;}
	100% {left:90px;top:275px;opacity:0;}
}

@keyframes homerun {
	0% {opacity:0;transform: scale(1, 1);}
	1% {opacity:0;transform: scale(0, 0);}
	40% {opacity:1;transform: scale(1, 1);}
	50% {opacity:.5;}
	60% {opacity:1;}
	70% {opacity:.5;}
	80% {opacity:1;}
	90% {opacity:.5;}
	100% {opacity:1;}
}
@keyframes mballrun {
	0% {top:-9px;opacity:1;}
	70% {top:250px;opacity:1;}
	100% {top:280px;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:6px solid  #000000;
	height: 108px;
	max-width: 628px;
	margin: 5px auto 0 auto;
}
#innerGame .resultBox.gameResult {
    display:block;
}
#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: 35px 130px 35px 25px;
}
#innerGame .baseball .resultBox.out .inner {
	padding: 35px 25px;
}
*/


/* ----------------------------------
    Game BOWLING
----------------------------------- */
.startBowling .ground2 {
    position:absolute;
    top:0;
    left:0;
}
.startBowling .pose {
    opacity:0;
    position:absolute;
    top:170px;
    left:110px;
}
.startBowling .bowl {
    opacity:0;
	position:absolute;
	top:200px;
	left: 290px;
}

/* GAME START */
.startBowling.gameOn .ground2 {animation: fadeOut .3s step-start 0s 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 {
    animation: fadeIn .5s ease 0.5s 1 forwards;
}

.gameBowling .resultGame {
    display:none;
	width:638px;
    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 {
	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:200px;opacity:0;}
	1% {opacity:1;}
	100% {top:120px;opacity:1;transform: scale(.6, .6);}
}

.rBowling .sun {
	animation: fadeIn .5s ease 2.5s 4 forwards;
}
.rBowling .baloon {
    width:638px;
    height:407px;
	animation: zoomOver .3s ease 2.5s 1 forwards;
}
.rBowling .pin {
	position:absolute;
    opacity:0;
}
.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;
}
.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;
}
.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;
}
.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(-35deg);
	animation: pin10 .4s ease 3.3s 1 forwards;
}
.rBowling .cracker {
	animation: zoom .3s ease 3.3s 1 forwards;
}
.rBowling .title {
    width:638px;
    height:407px;
	animation: zoomOver .3s ease 3s 1 forwards;
}
.rBowling .text {
    width:638px;
    height:407px;
	filter: drop-shadow(0px 0px 10px rgba(255,255,255,1));
	animation: blink 1s ease 3.4s 1  forwards;
}

.bStrike .shadow {
	width:100%;
	height:407px;
	background:rgba(255,0,120,.5);
	animation: fadeIn .6s ease 2.2s 1 forwards;
}
.bStrike .resulbowl {
	position:absolute;
	top:124px;
	left:480px;
	opacity:0;
	animation: strikeBowl .3s ease 3.2s 1 normal forwards;
}
.bSpare .shadow {
	width:100%;
	height:407px;
	background:rgba(255,220,0,.5);
	animation: fadeIn .6s ease 2.2s 1 forwards;
}
.bSpare .resulbowl {
	position:absolute;
	top:55px;
	left:320px;
	opacity:0;
	animation: spareBowl .3s ease 3.2s 1 normal forwards;
}

@keyframes zoomOver {
	0% {opacity: 0;transform: scale(1, 1);}
	1% {opacity: 0;transform: scale(0.1, 0.1);}
	90% {opacity: 1;transform: scale(1.4, 1.4);}
	100% {opacity: 1;transform: scale(1, 1);}
}
@keyframes zoom {
	0% {transform: scale(0.4, 0.4);opacity: 0;}
	100% {transform: scale(1, 1);opacity: 1;}
}
@keyframes strikeBowl {
	0% {top:187px;left:680px;opacity:0;}
	100% {top:124px;left:480px;opacity:1;}
}
@keyframes spareBowl {
	0% {top:100px;left:300px;opacity:0;}
	100% {top:55px;left:320px;opacity:1;}
}
@keyframes pin1 {
	0% {left:247px;top:158px;opacity:0;}
	100% {left:90px;top:240px;opacity:1;}
}
@keyframes pin2 {
	0% {left:447px;top:58px;opacity:0;} 
	100% {left:500px;top:10px;opacity:1;}
}
@keyframes pin3 {
	0% {left:183px;top:123px;opacity:0;} 
	100% {left:90px;top:40px;opacity:1;}
}
@keyframes pin4 {
	0% {left:330px;top:130px;opacity:0;} 
	100% {left:500px;top:230px;opacity:1;}
}
@keyframes pin5 {
	0% {left:254px;top:188px;opacity:0;} 
	100% {left:270px;top:230px;opacity:1;}
}
@keyframes pin6 {
	0% {left:194px;top:100px;opacity:0;}
	100% {left:109px;top:44px;opacity:1;}
}
@keyframes pin7 {
	0% {left:150px;top:135px;opacity:0;}
	100% {left:50px;top:170px;opacity:1;}
}
@keyframes pin8 {
	0% {left:360px;top:90px;opacity:0;}
	100% {left:510px;top:150px;opacity:1;}
}
@keyframes pin9 {
	0% {left:270px;top:90px;opacity:0;}
	100% {left:290px;top:210px;opacity:1;}
}
@keyframes pin10 {
	0% {left:300px;top:100px;opacity:0;}
	100% {left:300px;top:0px;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:200px;left:280px;opacity:0;}
	40% {top:120px;left:180px;opacity:1;transform: scale(.8, .8);}
	100% {top:70px;left:220px;opacity:0;transform: scale(.7, .7);}
}

.startBowling.gameOn.gutter .bGarter .chara.out2,
.startBowling.gameOn.gutter .bGarter .chara.out3 {
	position:absolute;
	top:150px;
	left: 240px;
	opacity:0;
}
.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:300px;
	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: bounce .7s linear 3s 1 forwards;}
.startBowling.gameOn.gutter .bGarter .text {animation: bounce .7s linear 3.4s 1 forwards;}

@keyframes bounce {
	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 blink {
	0% {opacity:0;transform: scale(1, 1);}
	1% {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;}
}
/*
#innerGame .GambooBowling .resultBox .inner {
	padding: 35px 25px;
}
*/
/* ----------------------------------
    Game DARTS
----------------------------------- */
.startDarts .pose {
    opacity:0;
    position:absolute;
    top:110px;
    left:110px;
}
.startDarts .pose.pose1 {opacity:1;}
.startDarts .ground2 {
    opacity:0;
    position:absolute;
    top:0;
    left:0;
}
.startDarts .arrow {
    opacity:0;
	position:absolute;
    top: 70px;
    left: 450px;
}

.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 1s 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:118px;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;}
#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;
}
/* +++++++ */

@keyframes dartsArrow {
	0% {top:70px;left: 450px;opacity:1;transform: scale(1, 1);}
	1% {top:70px;left: 450px;opacity:1;transform: scale(1.5, 1.5);}
	90% {top:110px;left: 380px;opacity:1;transform: scale(1, 1);}
	100% {top:110px;left: 380px;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 {
    position:absolute;
    top:20px;
    left:25px;
    transform: translate3d(0,0,0);
    animation: cloudBounce 2s linear 0s infinite alternate;
}

@keyframes cloudBounce {
    0% {top:20px;}
    100% {top:40px;}
}

.startLovery .couple {
    position:absolute;
    top:-10px;
}
.startLovery .couple.charaM {
    left:-10px;
    background-image: url("/images/game/LovelyGamboo/bucky_m.svg");
    background-size: auto 300px;
    background-repeat: no-repeat;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    animation: smile .5s steps(2) alternate infinite;
}
.startLovery .couple.charaF {
    left:320px;
    background-image: url("/images/game/LovelyGamboo/bucky_f.svg");
    background-size: auto 300px;
    background-repeat: no-repeat;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    animation: smile .5s steps(2) alternate infinite;
}
@keyframes smile {
    0% {background-position: -0 0;}
    100% {background-position: -600px 0;}
}

.startLovery .bbl {
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    width:180px;
    height:110px;
    background-repeat:no-repeat;
    background-size:auto 110px;
}
.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;
}

/* ゲームスタート */
#innerGame .throwSelect.gameOn {
    display:none;
}
.startLovery.gameOn .couple.charaM {
    left:55px;
    animation: movemen 2s ease 0s 1 forwards;
}
@keyframes movemen {
	0% {left:-10px;}
	100% {left:55px;}
}

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


/* 告白失敗 */

.startLovery.failure .couple.charaF {
    opacity:0;
    background-position: -900px 0;
    animation: failureFrau 1s ease 0s 1 forwards;
    left: 425px;
    top: 50px;
}
@keyframes failureFrau {
    0% {left: 400px;opacity:0;}
    1% {left: 400px;opacity:1;}
	100% {left: 425px;opacity:1;}
}
.startLovery.failure .bbl.bblF {
    top: 60px;
    left:435px;
    background-position: -360px 0;
    animation: fadeIn .5s ease 5s 1 forwards;
}
.startLovery.failure .bbl.bblM {
    top: 60px;
    left:35px;
    background-position: -360px 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: -900px 0;left: -60px;top: 50px;}
}
@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: -600px 0;}
}
@keyframes successFem {
	100% {background-position: -600px 0;}
}

.startLovery.success .bbl.bblF {
    opacity:0;
    top: 135px;
    left:467px;
    background-position: -180px 0;
    animation: fadeIn .5s step-end 5s 1 forwards;
}
.startLovery.success .bbl.bblM {
    opacity:0;
    top: 135px;
    left:10px;
    background-position: -180px 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: 638px;
    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;}