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

/*　しろくまと雪の魔法～クリスマス収穫祭～ */


#domeflower{
position: relative;
display: block;
width: 100%;
overflow: hidden;
min-width: 1000px;

background: url(/image/event/december2025/garden/bgall.png) no-repeat center center fixed;
background-size: cover;
background-color: #a2b2c9;
}

/* モバイル用の上書き */
@supports (-webkit-touch-callout: none) {
  #domeflower {
    background-attachment: scroll; /* iOSではfixedを無効化 */
  }

  #domeflower::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/image/event/december2025/garden/bgall.png) no-repeat center center;
    background-size: cover;
    background-color: #a2b2c9;
    z-index: -1; /* コンテンツの下に配置 */
  }
}

/* 雪のアニメーション */
.snowflake {
  position: fixed;
  top: -50px; /* 画面上から降り始める */
  width: 30px;
  height: 30px;
  background-size: contain;
  background-repeat: no-repeat;
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  pointer-events: none;
  z-index: 9;
  opacity: 0.9;
}

/* 画像の種類 */
.snow1 { background-image: url('/image/event/december2025/garden/snowflake01.png'); }
.snow2 { background-image: url('/image/event/december2025/garden/snowflake02.png'); }
.snow3 { background-image: url('/image/event/december2025/garden/snowflake03.png'); }

/* 落ちる動き */
@keyframes fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0.7;
  }
}



#domeflower a img{
	display:inline-block;
	opacity: 1;
	transition: opacity 0.6s ease-out;
}


#domeflower #title{
	width: 1000px;
	height: 265px;
	background: url(/image/event/december2025/garden/title.png) no-repeat center;
	position: relative;
	margin: 30px auto 0 auto;
}



#domeflower h2{
	display: none;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}



/*-- メニュー*/



#domeflower ul.eventMenu{
	width: 650px;
	height: 65px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 21px;
	z-index: 510;
	display: block;
}

#domeflower ul.eventMenu li{
	margin: 0;
	padding:0;
	width: 200px;
	text-align: center;
	float:left;
	box-sizing: border-box;
	display: block;
	
}

#domeflower ul.eventMenu li.nav1{ margin:0 25px 0 0; }

#domeflower ul.eventMenu li.nav2{ margin:0 25px 0 0; }


#domeflower #event01{
    width: 1000px;
    height: 1125px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
    background: url(/image/event/december2025/garden/bg_event01.png)no-repeat;
    position: relative;
    z-index: 10;
}

#domeflower #event01 .goto_comp{
	width: 182px;
    height: 181px;
    position: absolute;
    display: block;
    left: 35px;
    top: 65px;
}

#domeflower #event01 .goto_point{
    position: absolute;
	display: block;
	width:203px;
	height:29px;
    top: 595px;
    left: 765px;
	z-index: 13;
}

#domeflower #event01 .goto_item{
    position: absolute;
	display: block;
	width:203px;
	height:29px;
    top: 560px;
    left: 765px;
	z-index: 13;
}


#domeflower #event01 .goto_exterior{
    position: absolute;
	display: block;
	width:203px;
	height:29px;
    top: 630px;
    left: 765px;
	z-index: 13;
}


#domeflower #event01 .goto_buy{
    width: 237px;
    height: 56px;
    position: absolute;
    display: block;
    left: 316px;
    top: 956px;
}

#domeflower #event01_1{
    width: 1000px;
    height: 600px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0;
    background: url(/image/event/december2025/garden/bg_event01_1.png)no-repeat center;
    position: relative;
    z-index: 10;
}

#domeflower #event01_1 .get_seed{
    width: 190px;
    height: 53px;
    position: absolute;
    display: block;
    left: 524px;
    top: 460px;
}


#domeflower #event02{
	width:1000px;
	height:801px;
	margin:0 auto;
	background:url(/image/event/december2025/garden/bg_event02.png)  top no-repeat;
	position:relative;
	z-index: 10;
}

#domeflower #event02 .goto_buy_c{
    width: 159px;
    height: 23px;
    position: absolute;
    display: block;
    left: 170px;
    top: 403px;
}

#domeflower #event02 .goto_buy_p{
    width: 159px;
    height: 23px;
    position: absolute;
    display: block;
    left: 350px;
    top: 402px;
}

#domeflower #event02 .goto_box{
    width: 374px;
    height: 53px;
    position: absolute;
    display: block;
    left: 154px;
    top: 661px;
}


#domeflower #event03{
	width:1000px;
	height:283px;
	margin:0 auto;
	background:url(/image/event/december2025/garden/bg_event03.png) no-repeat center;
	position:relative;
	z-index: 10;
}

#domeflower #event03 .current_point{
	width:200px;
	height:70px;
	font-size: 31px;
	margin: 0;
	padding: 0;
	text-align: right;
	font-weight: bold;
	position: absolute;
	display: block;
	left: 401px;
	top: 112px;
	color:#48cdcd;
}

#domeflower #event04{
	width:1000px;
	height:681px;
	margin:0 auto;
	background:url(/image/event/december2025/garden/bg_event04.png) no-repeat top center;
	position:relative;
	z-index: 10;
}

#domeflower #event04 .exchange01{
	width:180px;
	height:53px;
	position: absolute;
	display: block;
	left: 0px;
	top: 517px;
}



#domeflower #event04{
	width:1000px;
	height:681px;
	margin:0 auto;
	background:url(/image/event/december2025/garden/bg_event04.png) no-repeat top center;
	position:relative;
}
#domeflower #event04 .btnArea01{
    position:absolute;
    top: 544px;
    left: -1px;
    width: 1020px;
}

#domeflower #event04 .btnArea01 li{
    float:left;
    width: 201px;
    height:52px;
    text-align:center;
}

#domeflower .countArea01{
	color: #233442;
	font-weight: 400;
}

#domeflower #event04 .countArea01{
    position:absolute;
    bottom: 67px;
    left: 0;
    width: 1001px;
}

#domeflower #event04 .countArea01 li{
    float:left;
    width: 200px;
    height:18px;
    text-align:center;
}

#domeflower #event05{
	width:1000px;
	height:549px;
	margin:0 auto;
	background:url(/image/event/december2025/garden/bg_event05.png) no-repeat top center;
	position:relative;
	z-index: 10;
}

#domeflower #event05 .btnArea01{
    position:absolute;
    top: 429px;
    left: 162px;
    width: 1020px;
}

#domeflower #event05 .btnArea01 li{
    float:left;
    width: 336px;
    height:52px;
    text-align:center;
}


#domeflower #event05 .countArea01{
    position:absolute;
    bottom: 57px;
    left: 160px;
    width: 1001px;
}

#domeflower #event05 .countArea01 li{
    float:left;
    width: 336px;
    height:18px;
    text-align:center;
}



#domeflower #event06{
	width:1000px;
	height:690px;
	margin:0 auto;
	background:url(/image/event/december2025/garden/bg_event06_01.png) no-repeat top center;
	position:relative;
	z-index: 10;
}

#domeflower #event06 .btnArea01{
    position:absolute;
    top: 545px;
    left: 54px;
    width: 1020px;
}

#domeflower #event06 .btnArea01 li{
    float:left;
    width: 454px;
    height:52px;
    text-align:center;
}


#domeflower #event06 .countArea01{
    position:absolute;
    bottom: 74px;
    left: 55px;
    width: 1001px;
}

#domeflower #event06 .countArea01 li{
    float:left;
    width: 454px;
    height:18px;
    text-align:center;
}

#domeflower .event07_bg{
	width:100%;
	height: 970px;
	margin:0 auto;
	background:url(/image/event/december2025/garden/comp_bg.png) repeat-x top center;}

#domeflower #event07{
	width:1000px;
	height: 887px;
	margin:0 auto;
	background:url(/image/event/december2025/garden/bg_event07.png) no-repeat top center;
	position:relative;
	z-index: 10;
}

#domeflower #event07 .stamp01{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 135px;
	top: 199px;
}


#domeflower #event07 .stamp02{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 254px;
	top: 199px;
}

#domeflower #event07 .stamp03{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 376px;
	top: 199px;
}

#domeflower #event07 .stamp04{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 500px;
	top: 199px;
}

#domeflower #event07 .stamp05{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 620px;
	top: 199px;
}

#domeflower #event07 .stamp06{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 738px;
	top: 199px;
}

#domeflower #event07 .stamp07{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 862px;
	top: 199px;
}


#domeflower #event07 .stamp08{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 600px;
	top: 616px;
}

#domeflower #event07 .item_count{
	position: absolute;
	display: block;
	left: 808px;
	top: 473px;
	color:#48cdcd;
	font-size: 42px;
font-weight: bold;}

#domeflower #event07 a{
    position: absolute;
    top: 765px;
    left: 420px;
}


#domeflower #event08{
	width:1000px;
	height: 381px;
	margin:0 auto;
	background:url(/image/event/december2025/garden/bg_event08.png) no-repeat top center;
	position:relative;
	z-index: 10;
}


#domeflower #event08 .btnArea01{
    position:absolute;
    top: 254px;
    left: 59px;
    width: 867px;
}

#domeflower #event08 .btnArea01 li{
    float:left;
    width: 216px;
    height:52px;
    text-align:center;
}


#domeflower #event09{
	width:1000px;
	height: 395px;
	margin:0 auto;
	background:url(/image/event/december2025/garden/bg_event09.png) no-repeat top center;
	position:relative;
	z-index: 10;
}



#domeflower #event10{
	width:1000px;
	height: 366px;
	margin:0 auto;
	background:url(/image/event/december2025/garden/bg_event10.png) no-repeat top center;
	position:relative;
	z-index: 10;
}

#domeflower #event10 .note{
    position: absolute;
    top: 66px;
    left: 123px;
	color: #595959;
}

#domeflower #event10 .note li{
margin: 10px 0 0 0;
}


/*--合成アイテム--*/

#domeflower #item01{
    width: 1000px;
    height: 1055px;
    margin: 0 auto 0 auto;
    background: url(/image/event/december2025/garden/bg_item01.png) no-repeat top center;
    position: relative;
    top: 0;
    z-index: 10;
}


#domeflower #item01 .gotoShop{
    width: 471px;
    height: 71px;
    position: absolute;
    display: inline-block;
    left: 268px;
    bottom: 60px;
    z-index: 10;
}


#domeflower #item01 .gotoSynthetic{
	position: absolute;
	top: 815px;
	left: 60px;
}


#domeflower #item02{
    width: 1000px;
    height: 370px;
    margin: 0 auto;
    background: url(/image/event/december2025/garden/bg_item02.png) no-repeat top center;
    position: relative;
	z-index: 10;

}

#domeflower #item02 img{
    position: absolute;
    left: 162px;
    top: 210px;
}

#domeflower #item02 img{
    width: 220px;
    height: 48px;
    position: absolute;
    display: block;
    left: 242px;
    top: 231px;
}


#domeflower #item02 img.recipe_r{
    left: 666px;
}


#domeflower #item03{
	width:1000px;
	height: 640px;
	margin:0 auto;
	background:url(/image/event/december2025/garden/bg_item03.png) no-repeat top center;
	position:relative;
	z-index: 10;
}




#domeflower #item04{
	width:1000px;
	height:340px;
	margin:0 auto;
	position:relative;
	background:url(/image/event/december2025/garden/bg_item04.png) no-repeat top center;
	z-index: 10;
}


#domeflower #item05{
	width:1000px;
	height:401px;
	margin:0 auto;
	position:relative;
	background:url(/image/event/december2025/garden/bg_item05.png) no-repeat top center;
	z-index: 10;
}

#domeflower #item05 .recipe_n{ 
	position: absolute;
top:277px;
right:55px;}

/*--ランキング--*/

#domeflower #ranking01{width:1000px;
	height: 135px;
	margin: 0 auto;
background:url("/image/event/december2025/garden/ranking01.png") no-repeat top center;
position: relative;
z-index: 10;}

#domeflower #ranking01 .point{
	position: absolute;
	width:240px;
	top:39px;
	left:328px;
	color: #d289ff;
    font-family: 'Meiryo', 'メイリオ', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Osaka', 'MS PGothic', arial, helvetica, sans-serif;
	text-align: right;
    font-size: 24px;
	font-weight: bold;
}

#domeflower #ranking01 .yourrank{
	position: absolute;
	width:240px;
	top:39px;
	left:660px;
	color: #d289ff;
    font-family: 'Meiryo', 'メイリオ', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Osaka', 'MS PGothic', arial, helvetica, sans-serif;
	text-align: right;
    font-size: 24px;
	font-weight: bold;
}

#domeflower #ranking02{width:1000px;
	margin: 0 auto;}

#domeflower #ranking02 li{position: relative; z-index: 11;}

#domeflower #ranking02 .rankbg01{
	width:1000px;
	height: 97px;
background:url("/image/event/december2025/garden/ranking_bg01.png") no-repeat top center;
}



#domeflower #ranking02 .rankbg02{
	width:1000px;
	height: 1039px;
background:url("/image/event/december2025/garden/ranking_bg02.png") no-repeat top center;
}

#domeflower #ranking02 .rank_left{width: 470px; float: left; margin-left: 25px; margin-top:30px;}
#domeflower #ranking02 .rank_right{width: 470px; float: left; margin-left: 10px; margin-top:30px;}

#domeflower #ranking02 li{margin-bottom: 5px;}

#domeflower #ranking02 .rank01{
			width:467px;
	height: 89px;
	background:url("/image/event/december2025/garden/rank01.png") no-repeat top center;
	}

#domeflower #ranking02 .rank02{
			width:467px;
	height: 89px;
	background:url("/image/event/december2025/garden/rank02.png") no-repeat top center;}




#domeflower #ranking02 .charaimg{
position: absolute;
	top:13px;
	left:67px;
	width:64px;
	height:64px;
}


#domeflower #ranking02 .charaname{
	position: absolute;
	top:36px;
	left:137px;
	width:170px;
	color: #978356;
    font-family: 'Meiryo', 'メイリオ', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Osaka', 'MS PGothic', arial, helvetica, sans-serif;
    font-size: 16px;
	font-weight: bold;
	
}

#domeflower #ranking02 .charaname span{
  font-size: 12px;
}


#domeflower #ranking02 .charapoint{
	position: absolute;
	top:48px;
	left:319px;
	width:140px;
	color: #646464;
    font-family: 'Meiryo', 'メイリオ', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', 'Osaka', 'MS PGothic', arial, helvetica, sans-serif;
    font-size: 14px;
	font-weight: bold;
	text-align: center;
}

#domeflower #ranking02 .rank03{
	width:467px;
	height: 89px;
	background:url("/image/event/december2025/garden/rank03.png") no-repeat top center;
}



#domeflower #ranking02 .rank01 p,
#domeflower #ranking02 .rank02 p,
#domeflower #ranking02 .rank03 p{
	display: none;}

#domeflower #ranking02 .rank_list{
	width:467px;
	height: 89px;
	background:url("/image/event/december2025/garden/rank_bg.png") no-repeat top center;
position:relative;}

#domeflower #ranking02 .rank_list p{display: block;
	position: absolute;
	width:54px;
	height: 20px;
	font-size: 16px;
	font-weight: bold;
	color:#fff;
	top :34px;
	left:0;
	text-align: center;
	
}


#domeflower #ranking02 .rankbg_pager{
		width:585px;
	height: 38px;
background-color: #fff;
	opacity: 0.8;
border-radius: 9px;
text-align: center;
padding: 1px 0 0 0;
margin: 20px auto;}


#domeflower #ranking02 .rankbg03{
	width:1000px;
	height: 130px;
background:url("/image/event/december2025/garden/ranking_bg03.png") no-repeat top center;
}





#domeflower .note{
    position: absolute;
    top: 87px;
    left: 133px;
}



#domeflower .note li{
	position: relative;
	color: #635026;

}

#domeflower .note li::before{
	content: "※";
	position: absolute;
	top: 0;
	left: -16px;
}

#domeflower .about_link li{
	position: relative;
}

#domeflower .about_link li::before{
	content: "≫";
	position: absolute;
	top: 0;
	left: -16px;
}

#domeflower .about_link{
	position: absolute;
	font-weight: bold;
	left: 762px;
	top: 218px;
    z-index: 10;
	color: #635026;
}

#domeflower .about_link a{
	color: #635026;
}

/*-------------------------------------- */ 

/* ページトップへ戻る */
#domeflower .pageTop{
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 0;
    margin: 0 auto;
}
    
#domeflower .pageTop a{
    left: auto;
    display: block; 
    margin-left: 980px;
    margin-top: 0;
    padding:1em 0 0 2px;
    z-index:800;
    animation:moveY 2s ease-in-out infinite alternate;
}

#domeflower .pageTop a:hover{
    opacity: 8;
}


#domeflower .pageTop img{
    width: 115px;
    height: 148px;
    max-width: none;
}

@keyframes moveY {
    0% {margin-bottom: -20px}   
    100% {margin-bottom: 20px}
}


/*--アニメーション--*/


#domeflower #item03 #EdgeID{
	position: absolute;
	left: 430px;
	top: 116px;
	z-index: 10;
}
#domeflower #item03 #EdgeID2{
	position: absolute;
	left: 687px;
	top: 115px;
	z-index: 10;
}


/*--ボタン カウント--*/
#domeflower .countArea01{
    width:144px;
    height:12px;
    color: #ffffff;
    font-weight: bold;
}

#domeflower .countArea01 span{
    color: #ceff09;
}

#domeflower a,
#domeflower #colorbox a,
#domeflower .pop-box a{
    display:inline-block;
    opacity: 1;
    transition: 0.2s ;
    text-decoration: none;
}


#domeflower #colorbox a:hover,
#domeflower .pop-box a:hover,
#domeflower .howtodo02 a:hover,
#domeflower .howtodo03 a:hover
{
    opacity: 0.6;
}