@charset 'utf-8';

/* -----------------------------------------------------------
CSS Information

File name:      event2013_07.css
Update:         2013/07/12
Style Info:     2013年7月イベント用CSS

	01. 全体用
	02. イベントページ用

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



/* ----------------------------------------------------------------------
  01. 全体用
---------------------------------------------------------------------- */

/* import style
------------------------------------------------------------------- */
@import url('../mod_default.css');
@import url('../mod_layout.css');
@import url('../mod_headerfooter.css');
@import url('../mod_common.css');



/* body
---------------------------------------------------------------------- */
body{
	color: #333;
	font-family: 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', sans-serif;
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	font-weight: normal;
}



/* This page style
---------------------------------------------------------------------- */
#eventContentsArea {
	margin: 0px 0 0 0;
	padding: 0;
	width: 810px;
	text-align: left;
}

#eventContentsArea img {
	vertical-align: bottom;
}


/* footer
---------------------------------------------------------------------- */
#eventContentsArea #footerArea {
	width: 830px;
	height: 100px;
	padding-top: 25px;
}

#eventContentsArea #footerArea p#corpLogo,
#eventContentsArea #footerArea address {
	float: left;
	margin-left: 10px;
	color: #5b5d12;
	font-size: 10px;
	font-style: normal;
	font-weight: normal;
	font-family: Verdana, sans-serif;
}

#eventContentsArea #footerArea p#corpLogo {
	padding-left: 160px;
}

#eventContentsArea #footerArea address span {
	font-weight: bold;
}



/* clearfix
------------------------------------------- */
#eventContentsArea #footerArea:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}



/* ----------------------------------------------------------------------
  02. イベントページ用
---------------------------------------------------------------------- */
/* イベントトップ用
------------------------------------------- */
#eventContentsArea.event .mainArea-outer{
	padding:0px;
	margin:0;
	overflow:hidden;
}



/* 6月イベント下層用
------------------------------------------- */
#eventContentsArea{
	position:relative;
}


/* 最大6個はいるとき-------------- */
#eventContentsArea .eventArea-outer ul#eventMenu{
	position:absolute;
	top:10px;
	left:184px;
	width:626px;
}

#eventContentsArea .eventArea-outer ul#eventMenu li{
    float: left;
	margin-right:4px;
}

#eventContentsArea .eventArea-outer ul#eventMenu li.bnnMrg{
	margin:0 18px 0 0px;
}

#eventContentsArea .eventArea-outer ul#eventMenu li.bnnlast{
	margin:0px;
}


/* 最大1個はいるとき-------------- */

#eventContentsArea .eventArea-outer ul#eventMenu1 {
	position:absolute;
	top:10px;
	left:184px;
	width:626px;
}

#eventContentsArea .eventArea-outer ul#eventMenu1 li{
	/* ボタンがトップだけの時のみ-------------- */
	margin:0px;
	float: right;
}

/* 最大2個はいるとき-------------- */

#eventContentsArea .eventArea-outer ul#eventMenu2 {
	position:absolute;
	top:21px;
	right:0px;
	width:212px;
}

#eventContentsArea .eventArea-outer ul#eventMenu2 li{
    float: left;
	margin-right:4px;
}

#eventContentsArea .eventArea-outer ul#eventMenu2 li.bnnlast{
	float:right;
	margin:0px;
}

/* 最大3個はいるとき-------------- */

#eventContentsArea .eventArea-outer ul#eventMenu3 {
	position:absolute;
	top:21px;
	right:0px;
	width:320px;
}
#eventContentsArea .eventArea-outer ul#eventMenu3 li{
    float: left;
	margin-right:4px;
}

#eventContentsArea .eventArea-outer ul#eventMenu3 li.bnnMrg{
	margin:0 18px 0 0px;
}

#eventContentsArea .eventArea-outer ul#eventMenu3 li.bnnlast{
	float:right;
	margin:0px;
}

/* 最大4個はいるとき-------------- */

#eventContentsArea .eventArea-outer ul#eventMenu4 {
	position:absolute;
	top:21px;
	right:0;
	width:428px;
}
#eventContentsArea .eventArea-outer ul#eventMenu4 li{
    float: left;
	margin-right:4px;
}

#eventContentsArea .eventArea-outer ul#eventMenu4 li.bnnMrg{
	margin:0 18px 0 0px;
}

#eventContentsArea .eventArea-outer ul#eventMenu4 li.bnnlast{
	float:right;
	margin:0px;    
}

/* 最大5個はいるとき-------------- */

#eventContentsArea .eventArea-outer ul#eventMenu5 {
	position:absolute;
	top:21px;
	left:274px;
	width:536px;
}
#eventContentsArea .eventArea-outer ul#eventMenu5 li{
    float: left;
	margin-right:4px;
}

#eventContentsArea .eventArea-outer ul#eventMenu5 li.bnnMrg{
	margin:0 18px 0 0px;
}

#eventContentsArea .eventArea-outer ul#eventMenu5 li.bnnlast{
	float:right;
	margin:0px;
}

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

#eventContentsArea .eventArea-outer .eventtop{
	position:absolute;
	top:1px;
	right:3px;
	margin-bottom:11px;
}

#eventContentsArea .eventArea-outer .eventtop a{
	color:#978356;
}




/*　6/26～ 海開きイベント用
------------------------------------------- */
#eventContentsArea .eventArea-outer h2.opensea0626Tit{
	background:url(../../image/event/july2013/town/tit_event0626.gif) no-repeat bottom left;
	width:415px;
	height:25px;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	padding: 10px 0 0;
}

#eventContentsArea #openseaevent{
	border:1px #ddddde solid;
	background-color:#70b4c1;
	
}

#eventContentsArea #openseaevent #seaArea01{
	background:url(../../image/event/july2013/town/img_opensea01.jpg) no-repeat;
	width:810px;
	height:499px;
	position:relative;
}

#eventContentsArea #openseaevent #seaArea01 .nav01{
	position:absolute;
	top:419px;
	left:8px;
}

#eventContentsArea #openseaevent #seaArea01 .nav02{
	position:absolute;
	top:419px;
	left:210px;
}

#eventContentsArea #openseaevent #seaArea01 .nav03{
	position:absolute;
	top:419px;
	left:411px;
}

#eventContentsArea #openseaevent #seaArea01 .nav04{
	position:absolute;
	top:419px;
	left:611px;
}

#eventContentsArea #openseaevent #seaArea02{
	margin:15px 0 0 14px;	
}

#eventContentsArea #openseaevent .btnBeach{
	margin:28px 0 0 252px;	
}

#eventContentsArea #openseaevent #seaArea03{
	background:url(../../image/event/july2013/town/img_opensea03.jpg) no-repeat;
	width:780px;
	height:487px;
	position:relative;
	margin:44px 0 0 15px;
}

#eventContentsArea #openseaevent #seaArea03 .buyc{
	position:absolute;
	top:365px;
	left:40px;
}

#eventContentsArea #openseaevent #seaArea03 .buyp{
	position:absolute;
	top:365px;
	left:426px;
}

#eventContentsArea #openseaevent #seaArea04{
	background:url(../../image/event/july2013/town/img_opensea04.jpg) no-repeat;
	width:780px;
	height:449px;
	position:relative;
	margin:44px 0 0 15px;
}

#eventContentsArea #openseaevent #seaArea04 .buyTyuuou{
	position:absolute;
	top:381px;
	left:119px;
}

#eventContentsArea #openseaevent #seaArea04 .buyBusstop{
	position:absolute;
	top:381px;
	left:492px;
}

#eventContentsArea #openseaevent #seaArea05{
	margin:44px 0 0 15px;
}

#eventContentsArea #openseaevent #seaArea06{
	margin:44px 0 45px 15px;
}


/*　6/27～ ガーデンイベント用
------------------------------------------- */
#eventContentsArea .eventArea-outer h2.gardenTit{
	background:url(../../image/event/july2013/garden/tit_gardenevent0627.gif) no-repeat bottom left;
	width:400px;
	height:60px;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	padding:8px 0 0;
}

#eventContentsArea #gardenseed #gardenArea01{
	background:url(../../image/event/july2013/garden/img_gardenseed0627_2.jpg) no-repeat;
	width:810px;
	height:808px;
	position:relative;
}

#eventContentsArea #gardenseed #gardenArea01 .btnMix_normal{
	position:absolute;
	top:376px;
	left:72px;
}

#eventContentsArea #gardenseed #gardenArea01 .btnMix_rare{
	position:absolute;
	top:376px;
	left:441px;
}



#eventContentsArea #gardenseed #gardenArea02{
	background:url(../../image/event/july2013/garden/img_gardenseed0627_4.jpg) no-repeat;
	width:810px;
	height:284px;
	position:relative;
}


#eventContentsArea #gardenseed #gardenArea02 .txtNote02{
	position:absolute;
	top:195px;
	left:501px;
	width:250px;
	font-size:12px;
	line-height:1.6;
	color:#9a7759;
	text-align:right;
}

#eventContentsArea #gardenseed #gardenArea02 .txtNote02 a,
#eventContentsArea #gardenseed #gardenArea02 .txtNote02 a:link,
#eventContentsArea #gardenseed #gardenArea02 .txtNote02 a:visited{
	text-decoration:underline;
	color:#9a7759;
}

#eventContentsArea #gardencomp #gardenArea02 .txtNote02 a:hover{
	text-decoration:none;
}



/*　7/9～ レア魚イベント用
------------------------------------------- */
#eventContentsArea .eventArea-outer h2.tsuri0709Tit{
	background:url(../../image/event/july2013/tsuri/tit_tsurievent0709.jpg) no-repeat bottom left;
	width:810px;
	height:50px;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	padding: 10px 0 0;
}

#eventContentsArea #tsurievent #tsuriArea01{
	width:810px;
	height:50px;
	position:relative;
}

#eventContentsArea #tsurievent #tsuriArea02{
	background:url(../../image/event/july2013/tsuri/img_tsurievent_02.jpg) no-repeat;
	width:810px;
	height:256px;
	position:relative;
}

#eventContentsArea #tsurievent #tsuriArea03{
	background:url(../../image/event/july2013/tsuri/img_tsurievent_03.jpg) no-repeat;
	width:810px;
	height:528px;
	position:relative;
}

#eventContentsArea #tsurievent #tsuriArea04{
	background:url(../../image/event/july2013/tsuri/img_tsurievent_04.jpg) no-repeat;
	width:810px;
	height:140px;
	position:relative;
}



#eventContentsArea #tsurievent #tsuriArea04 .btnTsuri{
	position:absolute;
	top:36px;
	left:138px;
}

#eventContentsArea #tsurievent #tsuriArea04 .btnTsuri li{
	float:left;
	width:220px;
	height:42px;
	left:138px;
	margin-right:98px;
}

#eventContentsArea #tsurievent #tsuriArea04 .bnTown{
	position:absolute;
	top:8px;
	left:50px;
}


/*　7/11～ タウンイベント用
------------------------------------------- */
#eventHeaderArea{
	background: url("../../image/event/july2013/game/bg_naviheader.jpg") repeat-x;
	position:relative;
	margin: -10px 0 0 0;
	height:83px;
}

#eventHeaderArea .headerTitle{
	background:url(../../image/event/july2013/game/bg_gameevent_title.gif) no-repeat bottom left;
	width:276px;
	height:83px;
}


#eventHeaderArea h2.townevent0711Tit{
	background:url(../../image/event/july2013/game/tit_event0711.gif) no-repeat bottom left;
	width:269px;
	height:51px;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
	padding:24px 0 0 0;
	margin-left:7px;
}


#eventHeaderArea ul#eventMenu5 {
	position:absolute;
	top:36px;
	left:286px;
	width:536px;
}
#eventHeaderArea ul#eventMenu5 li{
    float: left;
	margin-right:4px;
}

#eventHeaderArea ul#eventMenu5 li.bnnMrg{
	margin:0 18px 0 0px;
}

#eventHeaderArea ul#eventMenu5 li.bnnlast{
	float:right;
	margin:0px;
}

#eventHeaderArea .eventtop{
	position:absolute;
	top:14px;
	left:572px;
	margin-bottom:11px;
	width:250px;
	text-align:right;
}

#eventHeaderArea .eventtop a{
	color:#ffffff;
}

#mainevent #prologueArea01{
	background:url(../../image/event/july2013/game/img_gameprologue_01.png) no-repeat;
	width:782px;
	height:414px;
	position:relative;
	margin:6px 0 0 20px;
}

#mainevent #prologueArea01 .btn_Story{
	position:absolute;
	top:338px;
	left:467px;
}

#mainevent #prologueArea01 .btn_Game{
	position:absolute;
	top:271px;
	left:642px;
}

#mainevent #prologueArea02{
	margin:25px 0 0 36px
}

#mainevent #prologueArea03{
	margin:25px 0 0 36px;
	padding-bottom:30px;
}


#mainevent #entryArea01{
	padding:25px 0 0 36px;
}

#mainevent #entryArea02{
	margin:15px 0 0 76px;
	background:url(../../image/event/july2013/game/img_gameentry_02.png) no-repeat;
	width:660px;
	height:266px;
	position:relative;
}

#mainevent #entryArea02 .btn_buyc{
	position:absolute;
	top:217px;
	left:87px;
}

#mainevent #entryArea02 .btn_buyp{
	position:absolute;
	top:217px;
	left:356px;
}

#mainevent #entryArea03{
	margin:25px 0 0 36px;
	background:url(../../image/event/july2013/game/img_gameentry_03.png) no-repeat;
	width:750px;
	height:556px;
	position:relative;
}

#mainevent #entryArea03 .btn_buyp02{
	position:absolute;
	top:487px;
	left:226px;
}

#mainevent #entryArea03 .btn_buyp02 a{
	display:block;
	width:301px;
	height:38px;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}

#mainevent #entryArea04{
	padding:23px 0 0 36px;
}

#mainevent #entryArea05{
	padding:23px 0 0 36px;
}

#mainevent #entryArea06{
	padding:23px 0 0 36px;
}

#mainevent #entryArea07{
	margin:17px 0 0 227px;
	padding-bottom:27px;
}




#mainevent #presentArea01{
	margin :12px 0 0 36px;
	height:696px
}

#mainevent #presentArea02{
	margin :0 0 0 36px;
	padding-bottom:30px;
}


#mainevent #helpitemArea01{
	margin :34px 0 0 58px;
}

#mainevent #helpitemArea02{
	margin :22px 0 0 36px;
	height:770px;
}

#mainevent #helpitemArea03{
	margin :0 0 0 36px;
	height:552px;
}

#mainevent #helpitemArea04{
	margin :0 0 0 36px;
	height:451px;
}

#mainevent #helpitemArea05{
	margin :12px 0 0 36px;	
}

#mainevent #helpitemArea06{
	position: relative;
	height:410px;
}

#mainevent #helpitemArea06 .item{
	border:1px #e8e8e8 solid;
	width:200px;
	height:280px;
	position:absolute;
	top:15px;
	left:312px;
}

#mainevent #helpitemArea06 .txt{
	position:absolute;
	top:307px;
	left:340px;
}

#mainevent #helpitemArea07{
	margin :12px 0 0 36px;
	padding-bottom:10px;
}






#mainevent #bg_seaArea1{
	background:url(../../image/event/july2013/game/bg_gameevent_01.png) repeat-y;

}

#mainevent #bg_seaArea2{
	background:url(../../image/event/july2013/game/bg_gameevent_02.png) no-repeat;
}

#mainevent #bg_seaArea3{
	background:url(../../image/event/july2013/game/bg_gameevent_03.png) no-repeat;
}

#mainevent #bg_seaArea4{
	background:url(../../image/event/july2013/game/bg_gameevent_04.jpg) repeat-x;
}


/* 海底ダイビングページ-------------- */
#flashwrapper {
	position: relative;
	width: 822px;
	background: #fff;
}

#flashwrapper #eventContentsArea {
	margin: 0px 0 0 0;
	padding: 0;
	width: 822px;
	text-align: left;
}

#eventContentsArea #flashgameArea{
	background-color: #a7e9f8;
	padding: 12px 10px;
	min-height:600px;
}








/*　共通footer※基本触らない */
/* clearfix
------------------------------------------- */
#eventContentsArea.event #mainArea ul.eventNavi:after,
#eventContentsArea.event #mainArea ul.seapuzzleMenu:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}


/* footer
------------------------------------------- */
#eventContentsArea.event #footerArea {
	background: url("/image/event/festival2009/event/bg_footer.gif") no-repeat;
}

#eventContentsArea.event #footerArea p#corpLogo,
#eventContentsArea.event #footerArea address {
	color: #777;
}