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

/*　貝殻フラワー収穫祭～波打ち際の奇跡～～*/


#shellflower{
	position:relative;
	display:block;
	width:100%;
	overflow:hidden;
	min-width: 1000px;
	background: url(/image/event/july2025/garden/bg_all.png);
	background-color: #d4f1f4;
   
}


#shellflower_board{   
    display:block;
    width:100%;
    margin: 0px auto;
}

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


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



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



/*-- メニュー*/



#shellflower ul.eventMenu{
	width: 728px;
	height: 54px;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 21px;
	z-index: 510;
	display: block;
}

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

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

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


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

#shellflower #event01 .goto_comp{
	width: 182px;
	height: 181px;
	position: absolute;
	display: block;
	left: -5px;
	top: 425px;
}



#shellflower #event01 .goto_item{
    position: absolute;
    display: block;
    width: 199px;
    height: 25px;
    top: 584px;
    left: 765px;
    z-index: 13;
}


#shellflower #event01 .goto_point{
    position: absolute;
    display: block;
    width: 199px;
    height: 25px;
    top: 615px;
    left: 765px;
    z-index: 13;
}

#shellflower #event01 .goto_buy{
    width: 368px;
    height: 66px;
    position: absolute;
    display: block;
    left: 251px;
    top: 843px;
}

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

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

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

#shellflower #event02 .goto_box{
    width: 355px;
    height: 64px;
    position: absolute;
    display: block;
    left: 154px;
    top: 670px;
}


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

#shellflower #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: 331px;
	top: 113px;
	color:#333333;
}

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

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



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

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

#shellflower .countArea01{
	color: #234223;
	font-weight: 400;
}

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

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

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

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

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


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

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



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

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

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


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

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

#shellflower .event07_bg{
	width:100%;
	height: 934px;
	margin:0 auto;
	padding-top: 30px;
	background: url(/image/event/july2025/garden/comp_bg.png) repeat top center;
	}

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

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


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

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

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

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

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

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


#shellflower #event07 .stamp08{
	width:71px;
	height:71px;
	position: absolute;
	display: block;
	left: 540px;
	top: 446px;
}
#shellflower #event07 .item_count{
	position: absolute;
	display: block;
	left: 808px;
	top: 473px;
	color:#fd6262;
	font-size: 42px;
font-weight: bold;}

#shellflower #event07 a{
    position: absolute;
    top: 765px;
    left: 421px;
}


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


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

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


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



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

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

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


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

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


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


#shellflower #item01 .gotoSynthetic{
	position: absolute;
	top: 847px;
	left: 525px;
}


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

}

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

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


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


#shellflower #item03{
	width:1000px;
	height: 690px;
	margin:0 auto;
	background:url(/image/event/july2025/garden/bg_item03.png) no-repeat top center;
	position:relative;
}




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


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

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

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

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

#shellflower #ranking01 .point{
	position: absolute;
	width:240px;
	top:39px;
	left:328px;
	color: #f3731d;
    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;

}

#shellflower #ranking01 .yourrank{
	position: absolute;
	width:240px;
	top:39px;
	left:660px;
	color: #f3731d;
    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;
}

#shellflower #ranking02{width:1000px;
	margin: 0 auto;}
#shellflower #ranking02 li{position: relative;}

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



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

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

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

#shellflower #ranking02 .rank01{
			width:467px;
	height: 89px;
	background:url("/image/event/common/gardenranking/rank01.png") no-repeat top center;
	z-index: 11;
	}

#shellflower #ranking02 .rank02{
			width:467px;
	height: 89px;
	background:url("/image/event/common/gardenranking/rank02.png") no-repeat top center;
	z-index: 11;}
	




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


#shellflower #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;
	
}

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


#shellflower #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;
	
}

#shellflower #ranking02 .rank03{
			width:467px;
	height: 89px;
	background:url("/image/event/common/gardenranking/rank03.png") no-repeat top center;
	z-index: 11;}



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

#shellflower #ranking02 .rank_list{
	width:467px;
	height: 89px;
	background:url("/image/event/common/gardenranking/rank_bg.png") no-repeat top center;
position:relative;
z-index: 11;}

#shellflower #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;
	
}


#shellflower #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;}


#shellflower #ranking02 .rankbg03{
	width:1000px;
	height: 130px;
background:url("/image/event/common/gardenranking/ranking_bg03.png") no-repeat top center;
z-index: 11;
}





#shellflower .note{
    position: absolute;
    top: 107px;
    left: 133px;
}



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

}

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

#shellflower .about_link li{
	position: relative;
}

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

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

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

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

/* ページトップへ戻る */
#shellflower .pageTop{
    position: relative;
    width: 100%;
    max-width: 1000px;
    height: 0;
    margin: 0 auto;
}
    
#shellflower .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;
}

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


#shellflower .pageTop img{
    width: 174px;
    height: 169px;
    max-width: none;
}

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


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


#shellflower #item03 #EdgeID{
	position: absolute;
	left: 20px;
	top: 126px;
	z-index: 10;
}
#shellflower #item03 #EdgeID2{
	position: absolute;
	left: 348px;
	top: 286px;
	z-index: 10;
}

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

#shellflower .countArea01 span{
    color: #b70b9f;
}

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


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