@charset "UTF-8";

/*------------------------------------------------------------
  common
------------------------------------------------------------ */
@import url("../../common/css/default.css");
@import url("../../common/css/common.css");


/*------------------------------------------------------------
  overlay
------------------------------------------------------------ */
#suntory_contents #overlay {
	width: 100%;
	height: 100%;
	/*background: rgba(255,255,255,.5);*/
	z-index: 1000;
	position: fixed;
	top: 0;
	left: 0;
}
*html #overlay {
	position: absolute;
	top: expression(eval(document.documentElement.scrollTop+0));
}

#suntory_contents #overlayEnd {
	width: 100%;
	height: 100%;
	z-index: 1000;
	position: fixed;
	top: 0;
	left: 0;
}
*html #overlayEnd {
	position: absolute;
	top: expression(eval(document.documentElement.scrollTop+0));
}

/*------------------------------------------------------------
  funContainer
------------------------------------------------------------ */
#contents #funContainer {
	width:968px;
	height:646px;
	background:url(../img/bg_fun_container.png) no-repeat;
	position: relative;
}

/*------------------------------------------------------------
  title
------------------------------------------------------------ */
#contents #title {
	width:396px;
	height:204px;
	background:url(../img/title.png) no-repeat;
	position: absolute;
	top: 39px;
	left: 59px;
}
#contents #title h1,
#contents #title h2,
#contents #title p {
	text-indent: -9999px;
}


/*------------------------------------------------------------
  draglist
------------------------------------------------------------ */
#contents .dragparts01 {
	position: absolute;
	top: 290px;
	left: 104px;
	z-index: 100;
}
#contents .dragparts02 {
	position: absolute;
	top: 290px;
	left: 311px;
	z-index: 100;
}
#contents .dragparts03 {
	position: absolute;
	top: 357px;
	left: 211px;
	z-index: 100;
}
#contents .dragparts04 {
	position: absolute;
	top: 418px;
	left: 100px;
	z-index: 100;
}
#contents .dragparts05 {
	position: absolute;
	top: 418px;
	left: 315px;
	z-index: 100;
}


/*------------------------------------------------------------
  area
------------------------------------------------------------ */
#contents #area {
	width: 422px;
	height: 572px;
	background:url(../img/area.png) no-repeat;
	position: absolute;
	top: 41px;
	left: 507px;
}

#contents #areaSpring {
	width:376px;
	height:116px;
	position: absolute;
	top: 20px;
	left: 23px;
	z-index: 10;
}
#contents #areaSummer {
	width:376px;
	height:116px;
	position: absolute;
	top: 168px;
	left: 23px;
	z-index: 10;
}
#contents #areaAutumn {
	width:376px;
	height:116px;
	position: absolute;
	top: 314px;
	left: 23px;
	z-index: 10;
}
#contents #areaWinter {
	width:376px;
	height:116px;
	position: absolute;
	top: 462px;
	left:23px;
}



/*------------------------------------------------------------
  default
------------------------------------------------------------ */
#suntory_contents #correctStrawberry,
#suntory_contents #correctCherry,
#suntory_contents #correctPeach,
#suntory_contents #correctGrape,
#suntory_contents #correctOrange,
#suntory_contents #clear,
#suntory_contents #overlay,
#suntory_contents #overlayEnd,
#suntory_contents #wrong {
	display: none;
}

/*------------------------------------------------------------
  correct
------------------------------------------------------------ */
#suntory_contents #correctStrawberry,
#suntory_contents #correctCherry,
#suntory_contents #correctPeach,
#suntory_contents #correctGrape,
#suntory_contents #correctOrange {
	margin-left: -211px;
	width:422px;
	height:386px;
	position: absolute;
	top: 395px;
	left: 50%;
	z-index: 1000;
}
#suntory_contents #correctStrawberry h3,
#suntory_contents #correctCherry h3,
#suntory_contents #correctPeach h3,
#suntory_contents #correctGrape h3,
#suntory_contents #correctOrange h3 {
	text-indent: -9999px;
}
#suntory_contents #correctStrawberry p a,
#suntory_contents #correctCherry p a,
#suntory_contents #correctPeach p a,
#suntory_contents #correctGrape p a,
#suntory_contents #correctOrange p a {
	width:124px;
	height:32px;
	background:url(../img/btn_close.png) no-repeat 0 0;
	position: absolute;
	top: 324px;
	left: 149px;
	display: block;
	text-indent: -9999px;
}
#suntory_contents #correctStrawberry p a:hover,
#suntory_contents #correctCherry p a:hover,
#suntory_contents #correctPeach p a:hover,
#suntory_contents #correctGrape p a:hover,
#suntory_contents #correctOrange p a:hover {
	background:url(../img/btn_close.png) no-repeat 0 -32px;
}
#suntory_contents #correctStrawberry h4,
#suntory_contents #correctCherry h4,
#suntory_contents #correctPeach h4,
#suntory_contents #correctGrape h4,
#suntory_contents #correctOrange h4 {
	width:355px;
	height:276px;
	position: absolute;
	top: 22px;
	left: 33px;
	text-indent: -9999px;
}
#suntory_contents #correctStrawberry h4 {
	background:url(../img/msg_strawberry.png) no-repeat 0 0;
}
#suntory_contents #correctCherry h4 {
	background:url(../img/msg_cherry.png) no-repeat 0 0;
}
#suntory_contents #correctPeach h4 {
	background:url(../img/msg_peach.png) no-repeat 0 0;
}
#suntory_contents #correctGrape h4 {
	background:url(../img/msg_grape.png) no-repeat 0 0;
}
#suntory_contents #correctOrange h4 {
	background:url(../img/msg_orange.png) no-repeat 0 0;
}
#suntory_contents #correctStrawberry h5,
#suntory_contents #correctCherry h5,
#suntory_contents #correctPeach h5,
#suntory_contents #correctGrape h5,
#suntory_contents #correctOrange h5 {
	text-indent: -9999px;
}


/*------------------------------------------------------------
  wrong
------------------------------------------------------------ */
#suntory_contents #wrong {
	margin-left: -211px;
	width:422px;
	height:386px;
	position: absolute;
	top: 395px;
	left: 50%;
	z-index: 1000;
}
#suntory_contents #wrong p a {
	width:342px;
	height:63px;
	background:url(../img/btn_retry.png) no-repeat 0 0;
	position: absolute;
	top: 256px;
	left: 40px;
	display: block;
	text-indent: -9999px;
}
#suntory_contents #wrong p a:hover {
	background:url(../img/btn_retry.png) no-repeat 0 -63px;
}



/*------------------------------------------------------------
  clear
------------------------------------------------------------ */
#suntory_contents #clear {
	margin-left: -257px;
	width:514px;
	height:470px;
	position: absolute;
	top: 395px;
	left: 50%;
	z-index: 1000;
}
#suntory_contents #clear p a {
	width:149px;
	height:39px;
	background:url(../img/btn_close_clear.png) no-repeat 0 0;
	position: absolute;
	top: 393px;
	left: 183px;
	display: block;
	text-indent: -9999px;
}
#suntory_contents #clear p a:hover {
	background:url(../img/btn_close_clear.png) no-repeat 0 -39px;
}


/*------------------------------------------------------------
  clear
------------------------------------------------------------ */
#suntory_contents #preloadedImages {
	width: 0px;
	height: 0px;
	display: inline;
	background-image: url(../img/msg_orange.png); 
	background-image: url(../img/msg_cherry.png);
	background-image: url(../img/msg_grape.png);
	background-image: url(../img/msg_peach.png);
	background-image: url(../img/msg_strawberry.png);
	background-image: url(../img/correct.png);
	background-image: url(../img/clear.png);
	background-image: url(../img/wrong.png);
	background-image: url(../img/btn_close.png);
	background-image: url(../img/btn_close_clear.png);
	background-image: url(../img/btn_retry.png);
}