@charset "utf-8";
/* CSS Document */

/* =========================================================
　					でぃーえる農場
========================================================= */

div#dl_farm{
position:relative;
background-color: #eff1f7;
border: 1px solid #53617f;
padding:0 5px 10px;
width:148px;
-webkit-border-radius: 5px;
   -moz-border-radius: 5px;
		border-radius: 5px;
}

/* ----- メイン -----*/
div#dl_farm div.dl_farm_main{border:solid 1px #53617F;}

/* ----- タイトル -----*/
div#dl_farm h3{
background:url(../../../../images/event/dl_farm/common/dl_farm_title.png) no-repeat 0 0;
display:block;
width:123px;
height:0;
padding-top:21px;
overflow:hidden;
margin:10px 0;
}

div#dl_farm div.left_module_content{border:none;}

/* ----- ログイン時初期画面 ----- */

div#dl_farm div.dl_farm_main div.message_box_01{
position:absolute;
top:3px;
left:3px;
background:url(../../../../images/event/dl_farm/common/dl_farm_01.png) no-repeat 0 0;
width:140px;
height:60px;
}

p.arrow_anime_01,p.arrow_anime_02 {
position:absolute;
background:url(../../../../images/event/dl_farm/common/dl_farm_01.png) no-repeat -140px 0;
width:12px;
padding-top:15px;
height:0;
overflow:hidden;

-webkit-animation: arrow_anime 1s steps(2) infinite;
   -moz-animation: arrow_anime 1s steps(2) infinite;
	 -o-animation: arrow_anime 1s steps(2) infinite;
		animation: arrow_anime 1s steps(2) infinite;
}

p.arrow_anime_01{top:41px; left:25px;}
p.arrow_anime_02{top:41px; right:25px;}

@-webkit-keyframes arrow_anime {from {top:41px;} to {top:44px;}}
@-moz-keyframes arrow_anime {from {top:41px;} to {top:44px;}}
@-o-keyframes arrow_anime {from {top:41px;} to {top:44px;}}
@keyframes arrow_anime {from {top:41px;} to {top:44px;}}

/* ----- 未ログイン時初期画面 ----- */

div#dl_farm div.dl_farm_main div.message_box_02{
position:relative;
z-index:4000;
background:url(../../../../images/event/dl_farm/common/dl_farm_01.png) no-repeat 0 -283px;
width:146px;
height:180px;
}

div#dl_farm div.dl_farm_main div.message_box_02 a.dl_farm_login{
display:block;
background:url(../../../../images/event/dl_farm/common/btn_dl_farm.png) no-repeat 0 0;
position:absolute;
width:140px;
height:0;
padding-top:36px;
overflow:hidden;
bottom:20px;
left:3px;
}

/* ----- エラー表示 ----- */

div#dl_farm div.dl_farm_main div.message_box_03{
position:relative;
z-index:4000;
background:url(../../../../images/event/dl_farm/common/dl_farm_01.png) no-repeat 0 -463px;
width:146px;
height:180px;
}

div#dl_farm div.dl_farm_main div.message_box_03 p{
color:#fff;
font-size:12px;
line-height:1.3;
font-weight:bold;
padding:65px 5px 0;
}

/* ----- 本日の抽選は終了いたしました。（はずれの時のみ） ----- */

div#dl_farm div.dl_farm_main div.message_box_04{
position:relative;
z-index:4000;
background:url(../../../../images/event/dl_farm/common/dl_farm_01.png) no-repeat 0 -643px;
width:146px;
height:0;
padding-top:180px;
overflow:hidden;
}

/* ----- 当たり はずれ メッセージボックス ----- */

div#dl_farm div.dl_farm_main p.big_win,
div#dl_farm div.dl_farm_main p.win,
div#dl_farm div.dl_farm_main p.lose{
width:140px;
height:0;
padding-top:41px;
overflow:hidden;
position:absolute;
top:3px;
left:3px;
z-index:4000;
}

div#dl_farm div.dl_farm_main p.big_win{ background:url(../../../../images/event/dl_farm/common/dl_farm_01.png) no-repeat 0 -60px;}
div#dl_farm div.dl_farm_main p.win{ background:url(../../../../images/event/dl_farm/common/dl_farm_01.png) no-repeat 0 -101px;}
div#dl_farm div.dl_farm_main p.lose{ background:url(../../../../images/event/dl_farm/common/dl_farm_01.png) no-repeat 0 -142px;}


/* ----- ポイントゲット メッセージボックス また明日来てね ----- */

div#dl_farm div.dl_farm_main p.get_100pt,
div#dl_farm div.dl_farm_main p.get_10pt,
div#dl_farm div.dl_farm_main p.get_1pt,
div#dl_farm div.dl_farm_main p.see_you_tomorrow{
position:absolute;
width:140px;
height:25px;
bottom:3px;
left:3px;
z-index:4000;
}

div#dl_farm div.dl_farm_main p.get_100pt{ background:url(../../../../images/event/dl_farm/common/dl_farm_01.png) no-repeat 0 -183px;}
div#dl_farm div.dl_farm_main p.get_10pt{ background:url(../../../../images/event/dl_farm/common/dl_farm_01.png) no-repeat 0 -208px;}
div#dl_farm div.dl_farm_main p.get_1pt{ background:url(../../../../images/event/dl_farm/common/dl_farm_01.png) no-repeat 0 -233px;}

div#dl_farm div.dl_farm_main div.bg_lose p.see_you_tomorrow,
div#dl_farm div.dl_farm_main div.bg_win p.see_you_tomorrow{
background:url(../../../../images/event/dl_farm/common/dl_farm_01.png) no-repeat 0 -258px;
height:0;
padding-top:25px;
overflow:hidden;
}

div#dl_farm div.dl_farm_main div.bg_win p.see_you_tomorrow{top:3px;}

div#dl_farm div.dl_farm_main p.get_100pt a,
div#dl_farm div.dl_farm_main p.get_10pt a,
div#dl_farm div.dl_farm_main p.get_1pt a{
position:absolute;
top:5px;
cursor:pointer;
display:block;
width:16px;
height:16px;
}
div#dl_farm div.dl_farm_main p.get_100pt a{right:12px;}
div#dl_farm div.dl_farm_main p.get_10pt a{right:17px;}
div#dl_farm div.dl_farm_main p.get_1pt a{right:22px;}


/* ----- 当たり　はずれ（どくろ）　アイコン ----- */

div#dl_farm div.dl_farm_main p.good_icon_02,
div#dl_farm div.dl_farm_main p.good_icon_03,
div#dl_farm div.dl_farm_main p.good_icon_04,
div#dl_farm div.dl_farm_main p.good_icon_05{
position:absolute;
bottom:60px;
left:7px;
width:37px;
height:0;
padding-top:44px;
overflow:hidden;
}
div#dl_farm div.dl_farm_main p.good_icon_02{ background:url(../../../../images/event/dl_farm/common/icon_dl_farm_stamp.png) no-repeat 0 0;}
div#dl_farm div.dl_farm_main p.good_icon_03{ background:url(../../../../images/event/dl_farm/common/icon_dl_farm_stamp.png) no-repeat -41px 0;}
div#dl_farm div.dl_farm_main p.good_icon_04{ background:url(../../../../images/event/dl_farm/common/icon_dl_farm_stamp.png) no-repeat -80px 0;}
div#dl_farm div.dl_farm_main p.good_icon_05{ background:url(../../../../images/event/dl_farm/common/icon_dl_farm_stamp.png) no-repeat -182px 0;}

div#dl_farm div.dl_farm_main p.bad_icon{
position:absolute;
bottom:75px;
left:5px;
background:url(../../../../images/event/dl_farm/common/icon_dl_farm_stamp.png) no-repeat -124px 0;
width:52px;
height:0;
padding-top:61px;
overflow:hidden;
}

/* ----- ヘルプ ----- */

a.dl_farm_help{
display:block;
background:url(../../../../images/event/dl_farm/common/icon_dl_farm_help.png) no-repeat 0 0;
padding-top:17px;
height:0;
width:16px;
overflow:hidden;
position:absolute;
top:14px;
right:5px;
}

a.dl_farm_help:hover{background:url(../../../../images/event/dl_farm/common/icon_dl_farm_help.png) no-repeat 0 -17px;}


/* ----- ポップアップガイド ----- */

.popup_box{
display:none;
position:absolute;
top:20px;
left:145px;
width:344px;
color:#333;
border:1px solid #536280;
background:#fff;
filter:progid:DXImageTransform.microsoft.dropshadow(color=#999999,offx=3 offy=2,positive=1);
z-index:4000;
}

.popup_title{
position:relative;
color:#fff;
font-weight:bold;
padding: 6px 10px;
background-color:#607194;
}

p.popup_close_button{
position:absolute;
top:6px;
right:6px;
width:13px;
height:13px;
}

p.popup_close_button a{
display:block;
text-indent:-9999px;
width:13px;
height:13px;
font-size:12px;
cursor:pointer;
background:url("../../../../images/web/home/icon_setting_shut.gif") left bottom no-repeat;
}

.popup_body{ padding:0 10px 10px;}

.popup_body strong{
display:block;
color:#333;
font-size:12px;
margin:10px 0 5px;
}

.popup_body p{
font-size:11px;
line-height:1.2;
margin:0 0 5px;
}
	
p.keyword_example{
line-height:1.5;
padding:5px 10px 10px;
margin:0;
background:#f2f2f2;
}

div#dl_farm_help_list table{margin:2px 0 5px;}

div#dl_farm_help_list table tr td{
font-size:11px;
line-height:1.2;
padding:0 10px 2px 0;
}


/* ----- アニメーション 下から上へ　○ポイントゲット また明日来てね のアニメーション ----- */
.bounceInUp {

-webkit-animation: bounceInUp 1s 1s both;/* name duration timing-function delay iteration-count direction fill-mode */
   -moz-animation: bounceInUp 1s 1s both;/* name duration timing-function delay iteration-count direction fill-mode */
	 -o-animation: bounceInUp 1s 1s both;/* name duration timing-function delay iteration-count direction fill-mode */
		animation: bounceInUp 1s 1s both;/* name duration timing-function delay iteration-count direction fill-mode */
}

@-webkit-keyframes bounceInUp {
0% { -webkit-transform: translateY(2000px);}
40% { -webkit-transform: translateY(-30px);}
60% { -webkit-transform: translateY(0);}
70% { -webkit-transform: translateY(-5px);}
80%,100% { -webkit-transform: translateY(0);}
}

@-moz-keyframes bounceInUp {
0% { -moz-transform: translateY(2000px);}
40% { -moz-transform: translateY(-30px);}
60% { -moz-transform: translateY(0);}
70% { -moz-transform: translateY(-5px);}
80%,100% { -moz-transform: translateY(0);}
}

@-o-keyframes bounceInUp {
0% { -o-transform: translateY(2000px);}
40% { -o-transform: translateY(-30px);}
60% { -o-transform: translateY(0);}
70% { -o-transform: translateY(-5px);}
80%,100% { -o-transform: translateY(0);}
}

@keyframes bounceInUp {
0% { transform: translateY(2000px);}
40% { transform: translateY(-30px);}
60% { transform: translateY(0);}
70% { transform: translateY(-5px);}
80%,100% { transform: translateY(0);}
}

/* ----- アニメーション 上から下へ ----- */
.bounceInDown {

-webkit-animation: bounceInDown 1s 1s both;/* name duration timing-function delay iteration-count direction fill-mode */
   -moz-animation: bounceInDown 1s 1s both;/* name duration timing-function delay iteration-count direction fill-mode */
	 -o-animation: bounceInDown 1s 1s both;/* name duration timing-function delay iteration-count direction fill-mode */
		animation: bounceInDown 1s 1s both;/* name duration timing-function delay iteration-count direction fill-mode */
}

@-webkit-keyframes bounceInDown {
0% { -webkit-transform: translateY(-2000px);}
40% { -webkit-transform: translateY(30px);}
60% { -webkit-transform: translateY(0);}
70% { -webkit-transform: translateY(5px);}
80%,100% { -webkit-transform: translateY(0);}
}

@-moz-keyframes bounceInDown {
0% { -moz-transform: translateY(-2000px);}
40% { -moz-transform: translateY(30px);}
60% { -moz-transform: translateY(0);}
70% { -moz-transform: translateY(5px);}
80%,100% { -moz-transform: translateY(0);}
}

@-o-keyframes bounceInDown {
0% { -o-transform: translateY(-2000px);}
40% { -o-transform: translateY(30px);}
60% { -o-transform: translateY(0);}
70% { -o-transform: translateY(5px);}
80%,100% { -o-transform: translateY(0);}
}

@keyframes bounceInDown {
0% { transform: translateY(-2000px);}
40% { transform: translateY(30px);}
60% { transform: translateY(0);}
70% { transform: translateY(5px);}
80%,100% { transform: translateY(0);}
}


/* ----- アニメーション 上から下へ そしてブランブラン　はずれのアニメーション ----- */
.lose_anime {
-webkit-transform-origin: 141px 3px;
   -moz-transform-origin: 141px 3px;
	 -o-transform-origin: 141px 3px;
		transform-origin: 141px 3px;


-webkit-animation: lose_anime 3s ease-in-out 1s both;/* name duration timing-function delay iteration-count direction fill-mode */
   -moz-animation: lose_anime 3s ease-in-out 1s both;/* name duration timing-function delay iteration-count direction fill-mode */
	 -o-animation: lose_anime 3s ease-in-out 1s both;/* name duration timing-function delay iteration-count direction fill-mode */
		animation: lose_anime 3s ease-in-out 1s both;/* name duration timing-function delay iteration-count direction fill-mode */
}

@-webkit-keyframes lose_anime {
0% { -webkit-transform: translateY(-2000px);}
15% { -webkit-transform: translateY(30px);}
20% { -webkit-transform: translateY(0);}
23% { -webkit-transform: translateY(5px);}
26% { -webkit-transform: translateY(0);}
70% { -webkit-transform: rotate(0);}
75% { -webkit-transform: rotate(-80deg);}
80% { -webkit-transform: rotate(-60deg);}
85% { -webkit-transform: rotate(-80deg);}
88% { -webkit-transform: rotate(-70deg);}
91% { -webkit-transform: rotate(-80deg);}
94% { -webkit-transform: rotate(-75deg);}
97% { -webkit-transform: rotate(-80deg);}
100%{ -webkit-transform: rotate(-78deg);}
}

@-moz-keyframes lose_anime {
0% { -moz-transform: translateY(-2000px);}
15% { -moz-transform: translateY(30px);}
20% { -moz-transform: translateY(0);}
23% { -moz-transform: translateY(5px);}
26% { -moz-transform: translateY(0);}
70% { -moz-transform: rotate(0);}
75% { -moz-transform: rotate(-80deg);}
80% { -moz-transform: rotate(-60deg);}
85% { -moz-transform: rotate(-80deg);}
88% { -moz-transform: rotate(-70deg);}
91% { -moz-transform: rotate(-80deg);}
94% { -moz-transform: rotate(-75deg);}
97% { -moz-transform: rotate(-80deg);}
100%{ -moz-transform: rotate(-78deg);}
}

@-o-keyframes lose_anime {
0% { -o-transform: translateY(-2000px);}
15% { -o-transform: translateY(30px);}
20% { -o-transform: translateY(0);}
23% { -o-transform: translateY(5px);}
26% { -o-transform: translateY(0);}
70% { -o-transform: rotate(0);}
75% { -o-transform: rotate(-80deg);}
80% { -o-transform: rotate(-60deg);}
85% { -o-transform: rotate(-80deg);}
88% { -o-transform: rotate(-70deg);}
91% { -o-transform: rotate(-80deg);}
94% { -o-transform: rotate(-75deg);}
97% { -o-transform: rotate(-80deg);}
100%{ -o-transform: rotate(-78deg);}
}

@keyframes lose_anime {
0% { transform: translateY(-2000px);}
15% { transform: translateY(30px);}
20% { transform: translateY(0);}
23% { transform: translateY(5px);}
26% { transform: translateY(0);}
70% { transform: rotate(0);}
75% { transform: rotate(-80deg);}
80% { transform: rotate(-60deg);}
85% { transform: rotate(-80deg);}
88% { transform: rotate(-70deg);}
91% { transform: rotate(-80deg);}
94% { transform: rotate(-75deg);}
97% { transform: rotate(-80deg);}
100%{ transform: rotate(-78deg);}
}


/* ----- アニメーション はずれ時のドクロのアニメーション ----- */
.skull_anime {
-webkit-animation: skull_anime 1s linear 0s infinite;/* name duration timing-function delay iteration-count direction fill-mode */
   -moz-animation: skull_anime 1s linear 0s infinite;/* name duration timing-function delay iteration-count direction fill-mode */
	 -o-animation: skull_anime 1s linear 0s infinite;/* name duration timing-function delay iteration-count direction fill-mode */
		animation: skull_anime 1s linear 0s infinite;/* name duration timing-function delay iteration-count direction fill-mode */

}

@-webkit-keyframes skull_anime {
0%,49.999%	{-webkit-transform: scale(1) rotate(0);}
50%,100%{-webkit-transform: scale(0.8) rotate(-10deg);}
}

@-moz-keyframes skull_anime {
0%,49.999%	{-moz-transform: scale(1) rotate(0);}
50%,100%{-moz-transform: scale(0.8) rotate(-10deg);}
}

@-o-keyframes skull_anime {
0%,49.999%	{-o-transform: scale(1) rotate(0);}
50%,100%{-o-transform: scale(0.8) rotate(-10deg);}
}

@keyframes skull_anime {
0%,49.999%	{transform: scale(1) rotate(0);}
50%,100%{transform: scale(0.8) rotate(-10deg);}
}

/* ----- 植物アニメーション ----- */
.anime_object{
position: absolute;
top: 0;
left: 0;
display: block;
width: 146px;
height: 0;
padding-top:180px;
overflow: hidden;
z-index:2000;
}

#plant_init{
background:url(../../../../images/event/dl_farm/common/plant_init.png) no-repeat 0px top;

-webkit-transform-origin: center bottom;
   -moz-transform-origin: center bottom;
	 -o-transform-origin: center bottom;
		transform-origin: center bottom;

-webkit-animation: anime-plant-init 4s ease infinite alternate;/* name duration timing-function delay iteration-count direction fill-mode */
   -moz-animation: anime-plant-init 4s ease infinite alternate;/* name duration timing-function delay iteration-count direction fill-mode */
	 -o-animation: anime-plant-init 4s ease infinite alternate;/* name duration timing-function delay iteration-count direction fill-mode */
		animation: anime-plant-init 4s ease infinite alternate;/* name duration timing-function delay iteration-count direction fill-mode */
}

/* 芽 */
@-webkit-keyframes anime-plant-init {
0%   {-webkit-transform: rotate(0deg);}
50%  {-webkit-transform: rotate(-3deg);}
100% {-webkit-transform: rotate(3deg);} 
}

@-moz-keyframes anime-plant-init {
0%   {-moz-transform: rotate(0deg);}
50%  {-moz-transform: rotate(-3deg);}
100% {-moz-transform: rotate(3deg);} 
}

@-o-keyframes anime-plant-init {
0%   {-o-transform: rotate(0deg);}
50%  {-o-transform: rotate(-3deg);}
100% {-o-transform: rotate(3deg);} 
}

@keyframes anime-plant-init {
0%   {transform: rotate(0deg);}
50%  {transform: rotate(-3deg);}
100% {transform: rotate(3deg);} 
}


/* はずれ */
#plant_loose{background:url(../../../../images/event/dl_farm/common/plant_loose.png) no-repeat 0px top;}