@charset "UTF-8";

/* ==================================================================================================================
事前登録・フライングガチャ共通オーバーレイ
================================================================================================================== */
/*
	フラガチャ使い回しモーダル
		- 構成
		- オーバーレイタイトル
		- オーバーレイの中身
		- つぶやく
		- 出現カードリスト

	事前登録完了

	出現カードリスト

	ガチャ結果オーバーレイ
		- 構成
		- コンテンツ

	ガチャ演出（最新ブラウザのみ対応。ベンダープレフィックスは-webkit-のみ）
		- ガチャ筐体
		- ガチャ格納庫
		- ガチャレバー
		- クリック！
		- カプセル1個
		- ライティングエフェクト
		- カード本体ポップアップ
		- 回転集中線
		- カード背景明滅
		- レアリティテキスト
		- フレーバーテキスト、ボタンのフェードイン
		- もう一回まわす時

	その他
		- ローディング
		- ポップダウン通知
*/

/* ------------------------------------------------------------------------------------------------------------------
フラガチャ使い回しモーダル
------------------------------------------------------------------------------------------------------------------ */
/* 構成
---------------------------------------------------------- */
#grobalOverlay{
	background: rgba(255,255,255,0.8);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 600;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: none;
	opacity: 0;
	min-height: 500px;
}

.overlayContentWrap{
	text-align: left;
	padding: 13px 15px 15px;
	border-radius: 10px;
	background: #444343;
	width: 900px;
	position: absolute;
	top: 50px;
	bottom: initial;
	left: 0;
	right: 0;
	margin: 0 auto auto;
}


/* オーバーレイタイトル
---------------------------------------------------------- */
.overlayContentWrap .titleWrap01{
	padding: 0 45px 0 2px;
	margin: 0 0 12px;
	color: #fff;
	position: relative;
	display: block;
	min-height: 1%;
	height: 30px;
	line-height: 30px;
}

.overlayContentWrap .titleWrap01:after{
	clear: both;
	content:".";
	display: block;
	height: 0;
	visibility: hidden;
}

.overlayContentWrap .titleWrap01 .title01{
	float: left;
	font-size: 142.9%;
}

.overlayContentWrap .titleWrap01 .title02{
	float: right;
	font-size: 100%;
	padding: 4px 18px;
	background: #292929; /* Old browsers */
	background: -moz-linear-gradient(top,  #292929 0%, #383838 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#292929), color-stop(100%,#383838)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #292929 0%,#383838 100%); /* Chrome10+,Safari5.1+ */
	background: -ms-linear-gradient(top,  #292929 0%,#383838 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #292929 0%,#383838 100%); /* W3C */
	box-shadow: 0 -1px 0 rgba(255,255,255,.1) inset;
	border-radius: 20px;
}

/*----- 閉じるボタン -----*/
.overlayContentWrap .titleWrap01 .close{
	position: absolute;
	right: 0;
	top: 0;
}

.overlayContentWrap .titleWrap01 .close a{
	position: relative;
	display: block;
	height: 30px;
	width: 30px;
	overflow: hidden;
	text-indent: -9999px;
	background: url(../../../img/contents_pc/common/main_image_01.png) no-repeat 6px -383px #292929; /* Old browsers */
	background: url(../../../img/contents_pc/common/main_image_01.png) no-repeat 6px -383px, -moz-linear-gradient(top,  #292929 0%, #383838 100%); /* FF3.6+ */
	background: url(../../../img/contents_pc/common/main_image_01.png) no-repeat 6px -383px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#292929), color-stop(100%,#383838)); /* Chrome,Safari4+ */
	background: url(../../../img/contents_pc/common/main_image_01.png) no-repeat 6px -383px, -webkit-linear-gradient(top,  #292929 0%,#383838 100%); /* Chrome10+,Safari5.1+ */
	background: url(../../../img/contents_pc/common/main_image_01.png) no-repeat 6px -383px, -ms-linear-gradient(top,  #292929 0%,#383838 100%); /* IE10+ */
	background: url(../../../img/contents_pc/common/main_image_01.png) no-repeat 6px -383px, linear-gradient(to bottom,  #292929 0%,#383838 100%); /* W3C */
	box-shadow: 0 -1px 0 rgba(255,255,255,.1) inset;
}

.overlayContentWrap .titleWrap01 .close a:hover{
	position: relative;
	top: 1px;
	background: url(../../../img/contents_pc/common/main_image_01.png) no-repeat -34px -383px #2e2e2e; /* Old browsers */
	background: url(../../../img/contents_pc/common/main_image_01.png) no-repeat -34px -383px, -moz-linear-gradient(top,  #2e2e2e 0%, #3a3a3a 100%); /* FF3.6+ */
	background: url(../../../img/contents_pc/common/main_image_01.png) no-repeat -34px -383px, -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2e2e2e), color-stop(100%,#3a3a3a)); /* Chrome,Safari4+ */
	background: url(../../../img/contents_pc/common/main_image_01.png) no-repeat -34px -383px, -webkit-linear-gradient(top,  #2e2e2e 0%,#3a3a3a 100%); /* Chrome10+,Safari5.1+ */
	background: url(../../../img/contents_pc/common/main_image_01.png) no-repeat -34px -383px, -ms-linear-gradient(top,  #2e2e2e 0%,#3a3a3a 100%); /* IE10+ */
	background: url(../../../img/contents_pc/common/main_image_01.png) no-repeat -34px -383px, linear-gradient(to bottom,  #2e2e2e 0%,#3a3a3a 100%); /* W3C */
}


/* オーバーレイの中身
---------------------------------------------------------- */
.overlayContent{
	box-shadow: 0 0 3px rgba(0,0,0,.3) inset;
	background: #fcfcfc;
	height: -webkit-calc(100% - 40px);
	height: -moz-calc(100% - 40px);
	height: calc(100% - 40px);
}

.overlayContentInner{
	padding: 20px;
	font-size: 14px;
	line-height: 1.5;
}

.overlayContentInner iframe{border: none;}

/*----- 見出し -----*/
.overlayContentInner h4{
	background: #e5e5e5;
	margin: 30px 0 20px;
	padding: 5px 15px;
	border-radius: 5px;
	font-size: 16px;
	font-weight: bold;
}

.overlayContentInner h4:first-child{margin-top: 0;}

.overlayContentInner p{padding-bottom: 15px;}

.overlayContentInner p.txtCenter{text-align: center;}

/*----- 注意事項などのリスト -----*/
ul.noticeList{
	list-style: disc outside;
	padding: 0 0 0 30px;
}

ul.noticeList li{padding-bottom: 3px;}

/*----- 注意事項内のナンバリングリスト -----*/
ol.numbering{
	list-style: decimal outside;
	padding: 5px 0 0 30px;
}

ol.numbering li{padding-bottom: 3px;}

/*----- ボタン横並び -----*/
ul.overlayBtnList{
	width: 60%;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 1px;/* iframe対策 */
}

ul.overlayBtnList.positionL{margin: 0 auto 0 0; text-align: left;}
ul.overlayBtnList.positionR{margin: 0 0 0 auto; text-align: right;}

ul.overlayBtnList li{
	display: inline-block;
	width: 48%;
}

ul.overlayBtnList li:nth-of-type(1){margin-right:2%;}

.overlayBtn a,
.overlayBtn input{
	display: block;
	padding: 5px;
	height: 30px;
	outline: none;
	line-height: 30px;
	font-weight: bold;
	border-radius: 3px;
	text-align: center;
}

.overlayBtn input:active,
.overlayBtn input:focus{outline: none;}

/* グレーボタン */
.overlayBtn.btnGray a,
.overlayBtn.btnGray input{
	color: #4c4b4b;
	border: 1px solid #bdbbbb;
	text-shadow: 0 2px 2px rgba(255,255,255,.75);
	font-size: 16px;
	box-shadow: 0 1px 0 rgba(255,255,255,1) inset;
	background: #f4f4f4;
	background: -moz-linear-gradient(top, #f4f4f4 0%, #e0e0e0 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4f4f4), color-stop(100%,#e0e0e0));
	background: -webkit-linear-gradient(top, #f4f4f4 0%,#e0e0e0 100%);
	background: -ms-linear-gradient(top, #f4f4f4 0%,#e0e0e0 100%);
	background: linear-gradient(to bottom, #f4f4f4 0%,#e0e0e0 100%);
}

.overlayBtn.btnGray a:active,
.overlayBtn.btnGray input:active{
	background: -moz-linear-gradient(bottom, #f4f4f4 0%, #e0e0e0 100%);
	background: -webkit-gradient(linear, left bottom, left top, color-stop(0%,#f4f4f4), color-stop(100%,#e0e0e0));
	background: -webkit-linear-gradient(bottom, #f4f4f4 0%,#e0e0e0 100%);
	background: -ms-linear-gradient(bottom, #f4f4f4 0%,#e0e0e0 100%);
	background: linear-gradient(to top, #f4f4f4 0%,#e0e0e0 100%);
}

/* ピンクボタン */
.overlayBtn.btnPink a,
.overlayBtn.btnPink input{
	color: #fefefe;
	border: 1px solid #e94f81;
	text-shadow: 0 -1px 0 rgba(0,0,0,.3);
	font-size: 16px;
	box-shadow: 0 1px 1px rgba(36,45,51,.25), inset 0 0 0 1px rgba(255,255,255,.26);
	background-color: #e74b7f;
	background-image: -moz-linear-gradient(bottom, #e74b7f 0%, #ff95b8 100%);
	background-image: -o-linear-gradient(bottom, #e74b7f 0%, #ff95b8 100%);
	background-image: -webkit-gradient(linear,left bottom,left top, from(#e74b7f), to(#ff95b8));
	background-image: -webkit-linear-gradient(bottom, #e74b7f 0%, #ff95b8 100%);
	background-image: linear-gradient(to top, #e74b7f 0%, #ff95b8 100%);
}

.overlayBtn.btnPink a:active,
.overlayBtn.btnPink input:active{
	background-image: -moz-linear-gradient(top, #e74b7f 0%, #ff95b8 100%);
	background-image: -o-linear-gradient(top, #e74b7f 0%, #ff95b8 100%);
	background-image: -webkit-gradient(linear,left top,left bottom, from(#e74b7f), to(#ff95b8));
	background-image: -webkit-linear-gradient(top, #e74b7f 0%, #ff95b8 100%);
	background-image: linear-gradient(to bottom, #e74b7f 0%, #ff95b8 100%);
}

/* ブルーボタン */
.overlayBtn.btnBlue a,
.overlayBtn.btnBlue input{
	color: #fefefe;
	border: 1px solid #6aafe9;
	text-shadow: 0 -1px 0 rgba(0,0,0,.3);
	font-size: 16px;
	box-shadow: 0 1px 1px rgba(36,45,51,.25), inset 0 0 0 1px rgba(255,255,255,.26);
	background-color: #4eb0e8;
	background-image: -moz-linear-gradient(bottom, #4eb0e8 0%, #92cffe 100%);
	background-image: -o-linear-gradient(bottom, #4eb0e8 0%, #92cffe 100%);
	background-image: -webkit-gradient(linear,left bottom,left top, from(#4eb0e8), to(#92cffe));
	background-image: -webkit-linear-gradient(bottom, #4eb0e8 0%, #92cffe 100%);
	background-image: linear-gradient(bottom, #4eb0e8 0%, #92cffe 100%);
	background-image: linear-gradient(to bottom, #92cffe, #4eb0e8);
}

.overlayBtn.btnBlue a:active,
.overlayBtn.btnBlue input:active{
	background-image: -moz-linear-gradient(top, #4eb0e8 0%, #92cffe 100%);
	background-image: -o-linear-gradient(top, #4eb0e8 0%, #92cffe 100%);
	background-image: -webkit-gradient(linear,left top,left bottom, from(#4eb0e8), to(#92cffe));
	background-image: -webkit-linear-gradient(top, #4eb0e8 0%, #92cffe 100%);
	background-image: linear-gradient(top, #4eb0e8 0%, #92cffe 100%);
	background-image: linear-gradient(to top, #92cffe, #4eb0e8);
}

.overlayBtn a:hover,
.overlayBtn input:hover,
.overlayBtn a:active,
.overlayBtn input:active{
	opacity: 0.8;
	position: relative;
	top: 1px;
	margin-bottom: -1px;
	text-decoration: none;
}

/*----- タイムスケジュール -----*/
table.timeSchedule{
	font-size: 13px;
	margin: 15px auto;
	width: 70%;
}

table.timeSchedule th{
	width: 50px;
	text-align: center;
	position: relative;
	background: #EC649D;
	color: #fff;
	height: 30px;
	line-height: 30px;
	border: solid 1px #ccc;
}

table.timeSchedule td{
	color: #333;
	height: 30px;
	line-height: 30px;
	text-align: center;
	position: relative;
	letter-spacing: 2px;
	border: solid 1px #ccc;
}

table.timeSchedule tr td:last-child{
	font-weight: bold;
	color: #EC649D;
}

/*----- 通常より多く回せる時間帯を点滅 -----*/
table.timeSchedule td p.specialTime{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	background: #EC649D;
	color: #fff;
	height: 30px;
	line-height: 30px;
	opacity: 0;
	padding: 0;
	letter-spacing: normal;
	-webkit-animation: boxFade 5s ease 0s infinite both;
	animation: boxFade 5s ease 0s infinite both;
}

@-webkit-keyframes boxFade{
	0%,50%	{opacity: 0;}
	60%,90%	{opacity: 1;}
	100%	{opacity: 0;}
}
@keyframes boxFade{
	0%,50%	{opacity: 0;}
	60%,90%	{opacity: 1;}
	100%	{opacity: 0;}
}

/* つぶやく
---------------------------------------------------------- */
dl.accountInfo{
	min-height: 250px;
	position: relative;
	margin-bottom: 15px;
	text-align: left;
}

/*----- アカウントアイコン -----*/
dl.accountInfo dt{
	float: left;
	width: 120px;
	height: 120px;
}

/*----- アカウントid、アカウント名 -----*/
dl.accountInfo dd{
	margin-left: 140px;
	font-size: 26px;
}

dl.accountInfo dd.accountName{
	line-height: 1.3;
	margin-bottom: 5px;
}

dl.accountInfo dd.accountID{
	font-size: 16px;
	color: #aaa;
}

dl.accountInfo.withCard dd.accountName,
dl.accountInfo.withCard dd.accountID{
	width: 460px;
}

/*----- つぶやき内容 -----*/
dl.accountInfo dd:nth-of-type(3){
	clear: both;
	margin-left: 0;
	padding:30px 0 0;
}

div.balloon{
	background:#fff;
	padding: 20px;
	border-radius: 10px;
	border: solid 4px #55ACEE;
	position: relative;
}

div.balloon:before,
div.balloon:after{
	content: "";
	position: absolute;
	display: block;
	height: 0;
	width: 0;
	border: 20px solid transparent;
	left: 36px;
}

div.balloon:before{
	border-bottom-color: #fff;
	top: -34px;
	z-index: 70;
}

div.balloon:after{
	border-bottom-color: #55ACEE;
	top: -40px;
	z-index: 60;
}

div.balloon > div{
	font-family: 'Lucida Grande', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo,sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

/*----- ガチャ結果をつぶやく（カード表示あり） -----*/
.withCard div.balloon{
	display: table;
	width: 100%;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}

.withCard div.balloon > div,
.withCard div.balloon > p{
	display: table-cell;
	vertical-align: middle;
}

#grobalOverlay .withCard div.balloon > .gachaCard{
	width: 220px;
	padding-left: 30px;
	position: relative;
}

/* キラキラ */
#grobalOverlay .gachaCard:after{
	content: "";
	display: block;
	width: 300px;
	height: 360px;
	position: absolute;
	right: -40px;
	top: -200px;
	background: url(../../../img/contents_pc/reserve/default/bg_gacha_card_effect.png) no-repeat 0 0;
}

#grobalOverlay .gachaCard img{
	width: 100%;
	height: auto;
	margin-top: -170px;
	-webkit-transform:rotate(7deg);
	transform:rotate(7deg);
}


/* 出現カードリスト
---------------------------------------------------------- */
ul.gachaCardList{
	margin: 0 auto;
  font-size: 0;
	text-align: left;
}

/* clearfix */
ul.gachaCardList:after{
	content: " ";
	display: table;
	clear: both;
}

ul.gachaCardList li{
	display: inline-block;
	width: 15%;
	font-size: 12px;
	vertical-align: top;
	text-align: center;
	margin: 0 0 15px 1%;
}

ul.gachaCardList li img{width: 90%;}

ul.gachaCardList li p{
	text-align: center;
	font-size: 12px;
	padding: 5px 0 0;
}

/*----- 米印注意文 -----*/
ul.gachaNotice li{
	width: auto;
	text-align: left;
	list-style: none;
	text-indent:-1em;
	padding-left:1em;
}


/* ------------------------------------------------------------------------------------------------------------------
事前登録完了
------------------------------------------------------------------------------------------------------------------ */
#modalMask{background: rgba(255,255,255,0.8);}

#modalWindowWrap.gacha-modal{position: fixed;}

.gacha-modal #modalContentsWrap{
	background: url(../../../img/contents_pc/reserve/default/bg_reserve_complete.jpg) no-repeat center top;
	height: 400px;
}

.gacha-modal #modalContents{padding-top: 300px;}


/* ------------------------------------------------------------------------------------------------------------------
ガチャ結果オーバーレイ
------------------------------------------------------------------------------------------------------------------ */
/* 構成
-------------------------------------------- */
#gachaResultOverlay{
	background: rgba(0,0,0,0.8);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 600;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	opacity: 0;
	display: none;
}

.gachaResultOverlayInner{
	width: 0;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	overflow: hidden;
	opacity: 0;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#gachaResultOverlay.active .gachaResultOverlayInner{
	opacity: 1;
	width: 100%;
}


/* コンテンツ
-------------------------------------------- */
#gachaResultOverlay .gachaResult{
	width: 100%;
	height: 100%;
}

#gachaResultOverlay .gachaCard{
	width: 400px;
	height: 60%;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	opacity: 0;
}

#gachaResultOverlay .gachaCard img{
	width: auto;
	max-width: 400px;
	max-height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: 3;
}

/*----- 閉じる -----*/
.gachaResultClose{
	display: block;
	background: url(../../../img/contents_pc/common/main_image_01.png) no-repeat 11px -378px #000;
	height: 0;
	padding-top: 40px;
	line-height: 40px;
	overflow: hidden;
	width: 40px;
	border-radius: 23px;
	position: absolute;
	right: 10px;
	top: 10px;
	border: solid #bbb 3px;
	z-index: 20;
}

.gachaResultClose:hover{margin-top: 1px;}

.gachaResultClose::after{
	content: "";
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	background: rgba(255,255,255,0.3);
	width: 40px;
	height: 40px;
	border-radius: 20px;
}

.gachaResultClose:hover::after{display: block;}


/* ------------------------------------------------------------------------------------------------------------------
ガチャ演出
------------------------------------------------------------------------------------------------------------------ */
#gacha{
	width: 580px;
	height: 638px;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	margin: auto;
	cursor: pointer;
	z-index: 100;
}

.start #gacha{
	cursor: default;
	z-index: 1;
}


/* ガチャ筐体
-------------------------------------------- */
/*----- 台座 -----*/
.gachaPedestal{
	width: 100%;
	height: 100%;
	background: url(../../../img/contents_pc/reserve/default/pic_gacha_01.png) no-repeat center bottom;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

/*----- 各パーツ包括 -----*/
.gachaBody{
	width: 100%;
	height: 100%;
	position: relative;
}

.start .gachaPedestal,
.start .gachaBody{
	-webkit-animation: fadeOutBody 0.5s ease 2.5s 1 both;
	animation: fadeOutBody 0.5s ease 2.5s 1 both;
}

@-webkit-keyframes fadeOutBody{
	0%	{opacity: 1; -webkit-transform:translate(0,0) scale(1);}
	100%{opacity: 0; -webkit-transform:translate(0,-90px) scale(1.5);}
}
@keyframes fadeOutBody{
	0%	{opacity: 1; transform:translate(0,0) scale(1);}
	100%{opacity: 0; transform:translate(0,-90px) scale(1.5);}
}


/* カプセル格納庫
-------------------------------------------- */
.capsules{
	width: 295px;
	height: 295px;
	background: url(../../../img/contents_pc/reserve/default/pic_gacha_02.png) no-repeat 0 0;
	position: absolute;
	top: 72px;
	left: 0;
	right: 0;
	margin: auto;
}

/* ガチャレバーの動きに合わせてカプセルを微動 */
.start .capsules{
	-webkit-animation: capsules 0.2s ease 1s 1 both;
	animation: capsules 0.2s ease 1s 1 both;
}

@-webkit-keyframes capsules{
	0%		{-webkit-transform:rotate(0);}
	20%,50%	{-webkit-transform:rotate(5deg);}
	85%,100%{-webkit-transform:rotate(15deg);}
}
@keyframes capsules{
	0%	{transform:rotate(0);}
	100%{transform:rotate(15deg);}
}

/*----- ボディ -----*/
.containerBody{
	width: 100%;
	height: 100%;
	background: url(../../../img/contents_pc/reserve/default/pic_gacha_03.png) no-repeat center 0;
	position: absolute;
	top: 0;
}

.gachaBody::after{
	content: "";
	display: block;
	width: 218px;
	height: 88px;
	position: absolute;
	top: 360px;
	left: 0;
	right: 0;
	margin: auto;
	background: url(../../../img/contents_pc/reserve/default/pic_gacha_04.png) no-repeat 0 0;
}

/* ガチャレバー
-------------------------------------------- */
.gachaLever{
	width: 95px;
	height: 134px;
	background: url(../../../img/contents_pc/reserve/default/pic_gacha_05.png) no-repeat 0 0;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -28px auto 0 68px;
}

.start .gachaLever{
	-webkit-animation: lever 0.4s ease 0.6s 1 both;
	animation: lever 0.4s ease 0.6s 1 both;
	-webkit-transform-origin: left bottom;
	transform-origin: left bottom;
}

@-webkit-keyframes lever{
	0%	{-webkit-transform: rotate(0);}
	70%	{-webkit-transform: rotate(65deg);}
	100%{-webkit-transform: rotate(0);}
}
@keyframes lever{
	0%	{transform: rotate(0);}
	70%	{transform: rotate(65deg);}
	100%{transform: rotate(0);}
}


/* コイン挿入口
-------------------------------------------- */
.gachaCoinSlot{
	width: 39px;
	height: 38px;
	background: url(../../../img/contents_pc/reserve/default/pic_gacha_05.png) no-repeat -95px 0;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 46px auto 0 -210px;
	opacity: 0;
}

.start .gachaCoinSlot{
	-webkit-animation: CoinSlot 0.8s ease 0s 1 both;
	animation: CoinSlot 0.8s ease 0s 1 both;
}

@-webkit-keyframes CoinSlot{
	0%	{-webkit-transform: translate(0,0) rotate(-360deg); opacity: 0;}
	30%	{opacity: 1;}
	100%{-webkit-transform: translate(130px,45px) rotate(360deg); opacity: 1;}
}
@keyframes CoinSlot{
	0%	{transform: translate(0,0) rotate(-360deg); opacity: 0;}
	30%	{opacity: 1;}
	100%{transform: translate(130px,45px) rotate(360deg); opacity: 1;}
}


/* クリック！
-------------------------------------------- */
.gachaClick{
	width: 305px;
	height: 115px;
	background: url(../../../img/contents_pc/reserve/default/txt_click_01.png) no-repeat 0 0;
	position: absolute;
	top: 370px;
	left: 430px;
	-webkit-animation: click 1s ease 1s infinite both;
	animation: click 1s ease 1s infinite both;
}

@-webkit-keyframes click{
	0%		{-webkit-transform:translate(0,0);}
	10%		{-webkit-transform:translate(-5px,-5px);}
	20%		{-webkit-transform:translate(0,0);}
	30%		{-webkit-transform:translate(-5px,-5px);}
	40%,100%{-webkit-transform:translate(0,0);}
}
@keyframes click{
	0%{transform:translate(0,0);}
	10%{transform:translate(-5px,-5px);}
	20%{transform:translate(0,0);}
	30%{transform:translate(-5px,-5px);}
	40%,100%{transform:translate(0,0);}
}

.start .gachaClick{
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	opacity: 0;
}

/* カプセル1個
-------------------------------------------- */
.singleCapsule{
	width: 75px;
	height: 75px;
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin: 210px auto 0;
}

/* ガチャ筐体がフェードアウトした後に画面中央に移動 */
.start .singleCapsule{
	-webkit-animation: positionMove 0.5s ease 2.6s 1 both;
	animation: positionMove 0.5s ease 2.6s 1 both;
}

@-webkit-keyframes positionMove{
	0%	{-webkit-transform:translate(0,0) scale(1);}
	100%{-webkit-transform:translate(0,-250px) scale(2);}
}
@keyframes positionMove{
	0%	{transform:translate(0,0) scale(1);}
	100%{transform:translate(0,-250px) scale(2);}
}

.singleCapsule p{
	width: 150px;
	height: 150px;
	position: relative;
	margin: 0 auto;
	top: 50%;
	left: 50%;
	margin: -75px 0 0 -75px;
	opacity: 0;
	-webkit-transform: scale(0.5);
	transform: scale(0.5);
}

/* 落ちてバウンド、拡縮 */
.start .singleCapsule p{
	-webkit-animation: capsuleAnimation 2.8s ease 1.2s 1 both;
	animation: capsuleAnimation 2.8s ease 1.2s 1 both;
}

@-webkit-keyframes capsuleAnimation{
	0%		{-webkit-transform:translate(0,-200px) scale(0.4) rotate(-10deg); opacity: 0;}
	7%		{-webkit-transform:translate(0,-70px) scale(0.4) rotate(10deg); opacity: 1;}
	10%		{-webkit-transform:translate(0,-80px) scale(0.4) rotate(-5deg);}
	17%		{-webkit-transform:translate(0,-30px) scale(0.5) rotate(3deg);}
	20%		{-webkit-transform:translate(0,-40px) scale(0.5) rotate(-2deg);}
	27%,70%	{-webkit-transform:translate(0,0) scale(0.5) rotate(0deg);}
	74%		{-webkit-transform:translate(0,0) scale(0.55);}
	78%		{-webkit-transform:translate(0,0) scale(0.5);}
	82%		{-webkit-transform:translate(0,0) scale(0.55);}
	86%,100%{-webkit-transform:translate(0,0) scale(0.5); opacity: 1;}
}
@keyframes capsuleAnimation{
	0%		{transform:translate(0,-200px) scale(0.4) rotate(-10deg); opacity: 0;}
	7%		{transform:translate(0,-70px) scale(0.4) rotate(10deg); opacity: 1;}
	10%		{transform:translate(0,-80px) scale(0.4) rotate(-5deg);}
	17%		{transform:translate(0,-30px) scale(0.5) rotate(3deg);}
	20%		{transform:translate(0,-40px) scale(0.5) rotate(-2deg);}
	27%,70%	{transform:translate(0,0) scale(0.5) rotate(0deg);}
	74%		{transform:translate(0,0) scale(0.55);}
	78%		{transform:translate(0,0) scale(0.5);}
	82%		{transform:translate(0,0) scale(0.55);}
	86%,100%{transform:translate(0,0) scale(0.5); opacity: 1;}
}

/*----- カプセルの上、下 -----*/
.singleCapsule p::before,
.singleCapsule p::after{
	content: "";
	display: block;
	width: 150px;
	height: 150px;
	background: url(../../../img/contents_pc/reserve/default/pic_capsule_01.png) no-repeat center top;
	position: absolute;
	top: 0;
	left: 0
}

.rarity00.type01 .singleCapsule p::before{background: url(../../../img/contents_pc/reserve/default/pic_capsule_05.png) no-repeat center bottom;}/* ノーマル 黄 */
.rarity00.type02 .singleCapsule p::before{background: url(../../../img/contents_pc/reserve/default/pic_capsule_06.png) no-repeat center bottom;}/* ノーマル 赤 */
.rarity00.type03 .singleCapsule p::before{background: url(../../../img/contents_pc/reserve/default/pic_capsule_07.png) no-repeat center bottom;}/* ノーマル 紫 */
.rarity00.type04 .singleCapsule p::before{background: url(../../../img/contents_pc/reserve/default/pic_capsule_08.png) no-repeat center bottom;}/* ノーマル 桃 */
.rarity00.type05 .singleCapsule p::before{background: url(../../../img/contents_pc/reserve/default/pic_capsule_09.png) no-repeat center bottom;}/* ノーマル 青緑 */
.rarity00.type06 .singleCapsule p::before{background: url(../../../img/contents_pc/reserve/default/pic_capsule_10.png) no-repeat center bottom;}/* ノーマル 緑 */
.rarity00.type07 .singleCapsule p::before{background: url(../../../img/contents_pc/reserve/default/pic_capsule_11.png) no-repeat center bottom;}/* ノーマル 青 */
.rarity01 .singleCapsule p::before{background: url(../../../img/contents_pc/reserve/default/pic_capsule_04.png) no-repeat center bottom;}/* レア */
.rarity02 .singleCapsule p::before{background: url(../../../img/contents_pc/reserve/default/pic_capsule_03.png) no-repeat center bottom;}/* 激レア */
.rarity03 .singleCapsule p::before{background: url(../../../img/contents_pc/reserve/default/pic_capsule_02.png) no-repeat center bottom;}/* 超激レア */

/*----- カプセル開く（下へ） -----*/
.start .singleCapsule p::before{
	-webkit-animation: capsuleOpenDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 4s 1 both;
	animation: capsuleOpenDown 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 4s 1 both;
}

@-webkit-keyframes capsuleOpenDown{
	0%	{opacity: 1; -webkit-transform:translate(0,0) scale(1);}
	100%{opacity: 0; -webkit-transform:translate(0,800px) scale(1.5);}
}
@keyframes capsuleOpenDown{
	0%	{opacity: 1; transform:translate(0,0) scale(1);}
	100%{opacity: 0; transform:translate(0,800px) scale(1.5);}
}

/*----- カプセル開く（上へ） -----*/
.start .singleCapsule p::after{
	-webkit-animation: capsuleOpenUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 4s 1 both;
	animation: capsuleOpenUp 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) 4s 1 both;
}

@-webkit-keyframes capsuleOpenUp{
	0%	{opacity: 1; -webkit-transform:translate(0,0) scale(1);}
	100%{opacity: 0; -webkit-transform:translate(0,-800px) scale(1.5);}
}
@keyframes capsuleOpenUp{
	0%	{opacity: 1; transform:translate(0,0) scale(1);}
	100%{opacity: 0; transform:translate(0,-800px) scale(1.5);}
}


/* ライティングエフェクト
-------------------------------------------- */
/*----- カードまわりキラキラ -----*/
.blink{
	width: 600px;
	height: 800px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -400px 0 0 -300px;
	opacity: 0;
}

.start .blink{
	-webkit-animation: blinkVisible 0.1s ease 4s 1 both;
	animation: blinkVisible 0.1s ease 4s 1 both;
}

@-webkit-keyframes blinkVisible{
	0%	{opacity: 0;}
	100%{opacity: 1;}
}
@keyframes blinkVisible{
	0%	{opacity: 0;}
	100%{opacity: 1;}
}

.blink p{
	position: absolute;
	background: url(../../../img/contents_pc/reserve/default/pic_gacha_lighting_04.png) no-repeat 0 0;
	height: 0;
	width: 135px;
	padding-top: 114px;
	line-height: 114px;
	overflow: hidden;
	-webkit-animation: blink01 2s ease 0s infinite both;
	animation: blink01 2s ease 0s infinite both;
}

@-webkit-keyframes blink01{
	0%		{opacity: 1; -webkit-transform: scale(0.7);}
	30%,100%{opacity: 0; -webkit-transform: scale(0);}
}
@keyframes blink01{
	0%		{opacity: 1; transform: scale(0.7);}
	30%,100%{opacity: 0; transform: scale(0);}
}

/* 先頭から5個目まで */
.blink p:nth-child(-n+5){
	-webkit-animation: blink02 3s ease 0s infinite both;
	animation: blink02 3s ease 0s infinite both;
}

@-webkit-keyframes blink02{
	0%		{opacity: 1; -webkit-transform: scale(1);}
	30%,100%{opacity: 0; -webkit-transform: scale(0);}
}
@keyframes blink02{
	0%		{opacity: 1; transform: scale(1);}
	30%,100%{opacity: 0; transform: scale(0);}
}

.blink p:nth-of-type(1){
	left: 5%;
	top: 15%;
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

.blink p:nth-of-type(2){
	right: -2%;
	bottom: 22%;
	-webkit-animation-delay: 0.3s;
	animation-delay: 0.3s;
}

.blink p:nth-of-type(3){
	right: 0;
	bottom: 40%;
	-webkit-animation-delay: 0.9s;
	animation-delay: 0.9s;
}

.blink p:nth-of-type(4){
	right: -5%;
	top: 15%;
	-webkit-animation-delay: 1.5s;
	animation-delay: 1.5s;
}

.blink p:nth-of-type(5){
	left: -2%;
	bottom: 25%;
	-webkit-animation-delay: 1.6s;
	animation-delay: 1.6s;
}

.blink p:nth-of-type(6){
	right: 17%;
	top: 13%;
	-webkit-animation-delay: 0.2s;
	animation-delay: 0.2s;
}

.blink p:nth-of-type(7){
	left: 2%;
	bottom: 45%;
	-webkit-animation-delay: 0.6s;
	animation-delay: 0.6s;
}

.blink p:nth-of-type(8){
	right: -4%;
	top: 40%;
	-webkit-animation-delay: 1.1s;
	animation-delay: 1.1s;
}

.blink p:nth-of-type(9){
	left: 45%;
	top: 11%;
	-webkit-animation-delay: 1.3s;
	animation-delay: 1.3s;
}

.blink p:nth-of-type(10){
	left: 0;
	top: 30%;
	-webkit-animation-delay: 1.8s;
	animation-delay: 1.8s;
}

/*----- 閃光 -----*/
.lightingBurst{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

.start .lightingBurst{
	-webkit-animation: sparkle 0.5s linear 3.7s 1 both;
	animation: sparkle 0.5s linear 3.7s 1 both;
}

@-webkit-keyframes sparkle{
	0%	{background: rgba(255,255,255,0); opacity: 1;}
	70%	{background: rgba(255,255,255,1); opacity: 1;}
	100%{background: rgba(255,255,255,1); opacity: 0;}
}
@keyframes sparkle{
	0%	{background: rgba(255,255,255,0); opacity: 1;}
	70%	{background: rgba(255,255,255,1); opacity: 1;}
	100%{background: rgba(255,255,255,1); opacity: 0;}
}

/*----- ライティングバースト -----*/
.lightingBurst p{
	width: 748px;
	height: 748px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -374px 0 0 -374px;
	opacity: 0;
}

.lightingBurst p:nth-of-type(1){background: url(../../../img/contents_pc/reserve/default/pic_gacha_lighting_01.png) no-repeat center center;}
.lightingBurst p:nth-of-type(2){background: url(../../../img/contents_pc/reserve/default/pic_gacha_lighting_02.png) no-repeat center center;}
.lightingBurst p:nth-of-type(3){background: url(../../../img/contents_pc/reserve/default/pic_gacha_lighting_03.png) no-repeat center center;}

.start .lightingBurst p:nth-of-type(1){
	-webkit-animation: lightingBurst 1.2s linear 3s 1 both;
	animation: lightingBurst 1.2s linear 3s 1 both;
}
.start .lightingBurst p:nth-of-type(2){
	-webkit-animation: lightingBurst 0.9s linear 3.3s 1 both;
	animation: lightingBurst 0.9s linear 3.3s 1 both;
}
.start .lightingBurst p:nth-of-type(3){
	-webkit-animation: lightingBurst 0.6s linear 3.6s 1 both;
	animation: lightingBurst 0.6s linear 3.6s 1 both;
}

@-webkit-keyframes lightingBurst{
	0%	{opacity:0; -webkit-transform: scale(0) rotate(0);}
	80%	{opacity:1; -webkit-transform: scale(3.2) rotate(-80deg);}
	100%{opacity:0; -webkit-transform: scale(4) rotate(-100deg);}
}
@keyframes lightingBurst{
	0%	{opacity:0; transform: scale(0) rotate(0);}
	80%	{opacity:1; transform: scale(3.2) rotate(-80deg);}
	100%{opacity:0; transform: scale(4) rotate(-100deg);}
}

/* カード本体ポップアップ
-------------------------------------------- */
#gachaResultOverlay .gachaResult.start .gachaCard{
	-webkit-animation: cardPopUp 0.2s ease 4.2s 1 both;
	animation: cardPopUp 0.2s ease 4.2s 1 both;
}

@-webkit-keyframes cardPopUp{
	0%	{opacity: 0; -webkit-transform: scale(0);}
	70%	{opacity: 1; -webkit-transform: scale(1.2);}
	100%{opacity: 1; -webkit-transform: scale(1);}
}
@keyframes cardPopUp{
	0%	{opacity: 0; transform: scale(0);}
	70%	{opacity: 1; transform: scale(1.2);}
	100%{opacity: 1; transform: scale(1);}
}

/* 回転集中線
-------------------------------------------- */
#gachaResultOverlay .gachaCard::before{
	content: "";
	display: block;
	width: 200%;
	height: 200%;
	position: absolute;
	top: -50%;
	left: -50%;
	z-index: 2;
	opacity: 0.5;
	-webkit-animation: radialRotate 2s linear 0s infinite both;
	animation: radialRotate 2s linear 0s infinite both;
}

@-webkit-keyframes radialRotate{
	0%	{-webkit-transform: rotate(0);}
	100%{-webkit-transform: rotate(18deg);}
}
@keyframes radialRotate{
	0%	{transform: rotate(0);}
	100%{transform: rotate(18deg);}
}

/* カード背景明滅
-------------------------------------------- */
#gachaResultOverlay .gachaCard::after{
	content: "";
	display: block;
	width: 200%;
	height: 200%;
	position: absolute;
	top: -50%;
	left: -50%;
	z-index: 2;
	-webkit-animation: cardBackBlink 3s ease 0s infinite both;
	animation: cardBackBlink 3s ease 0s infinite both;
}

@-webkit-keyframes cardBackBlink{
	0%	{opacity: 1;}
	50%	{opacity: 0.7;}
	100%{opacity: 1;}
}
@keyframes cardBackBlink{
	0%	{opacity: 1;}
	50%	{opacity: 0.7;}
	100%{opacity: 1;}
}


/* レアリティテキスト
-------------------------------------------- */
.rarityTxt{
	height: 100px;
	width: 600px;
	position: absolute;
	top: 10%;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 10;
	text-align: center;
}

.rarityTxt i{
	display: inline-block;
	width: 120px;
	height: 100px;
	background: url(../../../img/contents_pc/reserve/default/txt_rarity_01.png) no-repeat 0 0;
	opacity: 0;
}

/* レア以下 */
.rarity00 .rarityTxt i:nth-of-type(1){background-position: 0 0;}
.rarity00 .rarityTxt i:nth-of-type(2){background-position: -120px 0;}
.rarity00 .rarityTxt i:nth-of-type(3){background-position: -240px 0;}
.rarity00 .rarityTxt i:nth-of-type(4){background-position: -360px 0;}
.rarity00 .rarityTxt i:nth-of-type(5){display: none;}

/* レア */
.rarity01 .rarityTxt i:nth-of-type(1){background-position: 0 -100px;}
.rarity01 .rarityTxt i:nth-of-type(2){background-position: -120px -100px;}
.rarity01 .rarityTxt i:nth-of-type(3){background-position: -240px -100px;}
.rarity01 .rarityTxt i:nth-of-type(4),
.rarity01 .rarityTxt i:nth-of-type(5){display: none;}

/* 激レア */
.rarity02 .rarityTxt i:nth-of-type(1){background-position: 0 -200px;}
.rarity02 .rarityTxt i:nth-of-type(2){background-position: -120px -200px;}
.rarity02 .rarityTxt i:nth-of-type(3){background-position: -240px -200px;}
.rarity02 .rarityTxt i:nth-of-type(4){background-position: -360px -200px;}
.rarity02 .rarityTxt i:nth-of-type(5){display: none;}

/* 超激レア */
.rarity03 .rarityTxt i:nth-of-type(1){background-position: 0 -300px;}
.rarity03 .rarityTxt i:nth-of-type(2){background-position: -120px -300px;}
.rarity03 .rarityTxt i:nth-of-type(3){background-position: -240px -300px;}
.rarity03 .rarityTxt i:nth-of-type(4){background-position: -360px -300px;}
.rarity03 .rarityTxt i:nth-of-type(5){background-position: -480px -300px;}

.start .rarityTxt i{
	-webkit-animation: rarityTxt 1s ease 4.5s 1 both;
	animation: rarityTxt 1s ease 4.5s 1 both;
}

@-webkit-keyframes rarityTxt{
	0%		{opacity: 0; -webkit-transform: scale(3) rotate(720deg) translate(0,0);}
	30%,70%	{opacity: 1; -webkit-transform: scale(1) rotate(0) translate(0,0);}
	80%		{opacity: 1; -webkit-transform: scale(1) rotate(0) translate(0,-40px);}
	90%,100%{opacity: 1; -webkit-transform: scale(1) rotate(0) translate(0,0);}
}
@keyframes rarityTxt{
	0%		{opacity: 0; transform: scale(3) rotate(720deg) translate(0,0);}
	30%,70%	{opacity: 1; transform: scale(1) rotate(0) translate(0,0);}
	80%		{opacity: 1; transform: scale(1) rotate(0) translate(0,-40px);}
	90%,100%{opacity: 1; transform: scale(1) rotate(0) translate(0,0);}
}

.start .rarityTxt i:nth-of-type(2){
	-webkit-animation-delay: 4.7s;
	animation-delay: 4.7s;
}

.start .rarityTxt i:nth-of-type(3){
	-webkit-animation-delay: 4.9s;
	animation-delay: 4.9s;
}

.start .rarityTxt i:nth-of-type(4){
	-webkit-animation-delay: 5.1s;
	animation-delay: 5.1s;
}

.start .rarityTxt i:nth-of-type(5){
	-webkit-animation-delay: 5.3s;
	animation-delay: 5.3s;
}


/* フレーバーテキスト、ボタンのフェードイン
-------------------------------------------- */
#gachaResultOverlay .cardInfo,
#gachaResultOverlay .btnWrap01{
	opacity: 0;
	position: absolute;
	bottom: 10%;
	left: 0;
	right: 0;
	margin: 0 auto;
	z-index: 10;
}

#gachaResultOverlay .cardInfo{margin-bottom: 100px;}

#gachaResultOverlay .start .cardInfo,
#gachaResultOverlay .start .btnWrap01{
	-webkit-animation: fadeInUp 1s ease 5.5s 1 both;
	animation: fadeInUp 1s ease 5.5s 1 both;
}

@-webkit-keyframes fadeInUp{
	0%	{opacity: 0;-webkit-transform: translate(0,50px);}
	100%{opacity: 1;-webkit-transform: translate(0,0);}
}
@keyframes fadeInUp{
	0%	{opacity: 0;transform: translate(0,50px);}
	100%{opacity: 1;transform: translate(0,0);}
}

/* もう一回まわす時
-------------------------------------------- */
.gachaAgain > *{
	-webkit-animation: fadeOutAll 0.3s ease 0s 1 both;
	animation: fadeOutAll 0.3s ease 0s 1 both;
}

@-webkit-keyframes fadeOutAll{
	0%	{opacity: 1; -webkit-transform: translate(0,0);}
	100%{opacity: 0; -webkit-transform: translate(-1000px,0);}
}
@keyframes fadeOutAll{
	0%	{opacity: 1; transform: translate(0,0);}
	100%{opacity: 0; transform: translate(-1000px,0);}
}

.gachaAgain #gacha{
	-webkit-animation: fadeInGacha 0.6s ease 0s 1 both;
	animation: fadeInGacha 0.6s ease 0s 1 both;
}

@-webkit-keyframes fadeInGacha{
	0%,50%	{opacity: 0; -webkit-transform: translate(1000px,0);}
	100%	{opacity: 1; -webkit-transform: translate(0,0);}
}
@keyframes fadeInGacha{
	0%,50%	{opacity: 0; transform: translate(1000px,0);}
	100%	{opacity: 1; transform: translate(0,0);}
}


/* animation非対応
-------------------------------------------- */
#gachaResultOverlay .skip .cardInfo,
#gachaResultOverlay .skip .btnWrap01,
.skip .rarityTxt i,
#gachaResultOverlay .skip .gachaCard{opacity: 1;}

.skip #gacha{opacity: 0;}


/* ------------------------------------------------------------------------------------------------------------------
その他
------------------------------------------------------------------------------------------------------------------ */
/* ローディング
-------------------------------------------- */
#loading{
	background: rgba(0,0,0,0.8);
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	opacity: 0;
	display: none;
}

#loading::after{
	content: "";
	width: 193px;
	height: 210px;
	background: url(../../../img/contents_pc/reserve/default/loading.gif) no-repeat 0 0;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

/* ポップダウン通知
-------------------------------------------- */
.popDownNotice{
	width: 240px;
	padding: 20px 20px;
	background: #fafafa;
	box-shadow: 0 2px 4px rgba(0,0,0,0.5);
	border: solid 1px #aaa;
	border-radius: 3px;
	text-align: center;
	color: #333;
	font-size: 14px;
	position: fixed;
	top: -300px;
	right: 0;
	left: 0;
	margin: 0 auto;
	z-index: 100;
	-webkit-animation: popDown 2.5s cubic-bezier(.4,-0.4,.6,1.4) 0s 1 both;
	animation: popDown 2.5s cubic-bezier(.4,-0.4,.6,1.4) 0s 1 both;
}

@-webkit-keyframes popDown{
	0%		{opacity: 0; -webkit-transform: translate(0,0);}
	20%,80%	{opacity: 1; -webkit-transform: translate(0,330px);}
	100%	{opacity: 0; -webkit-transform: translate(0,0);}
}
@keyframes popDown{
	0%		{opacity: 0; transform: translate(0,0);}
	20%,80%	{opacity: 1; transform: translate(0,330px);}
	100%	{opacity: 0; transform: translate(0,0);}
}