@charset "UTF-8";


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

	HTML

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

body {
	margin: 0;
	padding: 0;
	background: #F3AED1;
	font-family: sans-serif;
}

img {
	border: 0;
}

li {
	list-style: none;
}

ul {
	padding: 0;
}


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

	ID & CLASS

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


#page {
	width: 840px;
	margin: 0 auto 0 auto;
	background: url("../img/bg_page.gif") repeat-y;
}

#page .container {
	overflow: auto;
	width: 762px;
	margin: 0 auto 0 auto;
}

#page .foot {
	width: 840px;
	height: 50px;
	background: url("../img/bg_page_f.gif") no-repeat;
}

/*------------------------------------------------*/
/* #so */

#so {
	width: 840px;
	height: 389px;
	background: url("../img/bg_page_h.jpg") no-repeat;
}

/*------------------------------------------------*/
/* #navigation */

#navigation {
	float: left;
	width: 192px;
	color: #FFF;
}

#navigation .btn,
#navigation .hdg {
	margin-left: 14px;
	padding: 0 0 14px 0;
	background: url("../img/line_circle2.gif") no-repeat left bottom;
}

#navigation .btn img,
#navigation .hdg img {
	margin-left: -4px;
}

#navigation .btn {
	margin-bottom: 28px;
}

#navigation ul {
	margin: 11px 0 28px 14px;
}

#navigation li {
	width: 167px;
}

/* CSS HACK for IE6 */
* html #navigation li {
	margin-bottom: -3px;
}

/* CSS HACK for IE7 */
* +html #navigation li {
	margin-bottom: -3px;
}

#navigation li a {
	display: block;
	padding-left: 26px;
	font-size: 11px;
	line-height: 22px;
	text-decoration: none;
}

#navigation li a:link,
#navigation li a:visited {
	color: #FFF;
}

#navigation li a:hover,
#navigation li a:active {
	color: #87CAD7;
}

#navigation li a.eye:link,
#navigation li a.eye:visited {
	background: url("../img/icon_eye1.gif") no-repeat 2px 3px;
}

#navigation li a.eye:hover,
#navigation li a.eye:active {
	background: url("../img/icon_eye1_over.gif") no-repeat 2px 3px;
}

#navigation li a.heart:link,
#navigation li a.heart:visited {
	background: url("../img/icon_heart1.gif") no-repeat 6px 5px;
}

#navigation li a.heart:hover,
#navigation li a.heart:active {
	background: url("../img/icon_heart1_over.gif") no-repeat 6px 5px;
}

#navigation li a.particle1:link,
#navigation li a.particle1:visited {
	background: url("../img/icon_particle1.gif") no-repeat 5px 3px;
}

#navigation li a.particle1:hover,
#navigation li a.particle1:active {
	background: url("../img/icon_particle1_over.gif") no-repeat 5px 3px;
}

#navigation li a.particle2:link,
#navigation li a.particle2:visited {
	background: url("../img/icon_particle2.gif") no-repeat 5px 0;
}

#navigation li a.particle2:hover,
#navigation li a.particle2:active {
	background: url("../img/icon_particle2_over.gif") no-repeat 5px 0;
}

#navigation .bg_particle {
	width: 124px;
	height: 485px;
	margin-top: 8px;
	background: url("../img/bg_particle1.gif") no-repeat;
}

/*------------------------------------------------*/
/* #navigation > #profile */

#profile {
	height: 332px;
	padding: 19px 11px 0 14px;
	background: url("../img/bg_profile.gif") no-repeat;
}

#profile .img {
	text-align: center;
}

#profile .hdg {
	margin: 16px 0 16px 0;
	background: url("../img/line_circle1.gif") no-repeat left bottom;
}

#profile .hdg img {
	margin-left: -2px;
}

#profile p {
	margin: 4px 0;
	font-size: 10px;
	line-height: 14px;
}

/*------------------------------------------------*/
/* #navigation > #contact */

#contact {
	font-size: 11px;
}

#contact .hdg {
	margin-left: 10px;
	padding-bottom: 11px;
	background: url("../img/line_circle2.gif") no-repeat 4px bottom;
}

#contact .hdg div {
	padding-left: 18px;
	background: url("../img/icon_particle1.gif") no-repeat 0 3px;
	line-height: 22px;
}

#contact p {
	margin: 11px 0 0 28px;
	line-height: 14px;
}

#contact a {
	color: #FFF;
	text-decoration: none;
}

/*------------------------------------------------*/
/* #article */

#article {
	float: right;
	width: 566px;
}

#article .outer {
	width: 566px;
	margin-bottom: 24px;
}

#article .outer .head {
	width: 566px;
	height: 86px;
}

#article .outer .foot {
	width: 566px;
	height: 81px;
}

#article .blue {
	background: url("../img/bg_article_blue.gif") repeat-y;
}

#article .blue .head {
	background: url("../img/bg_article_blue_h.gif") no-repeat;
}

#article .blue .foot {
	background: url("../img/bg_article_blue_f.gif") no-repeat;
}

#article .pink {
	background: url("../img/bg_article_pink.gif") repeat-y;
}

#article .pink .head {
	background: url("../img/bg_article_pink_h.gif") no-repeat;
}

#article .pink .foot {
	background: url("../img/bg_article_pink_f.gif") no-repeat;
}

#article .gray {
	background: url("../img/bg_article_gray.gif") repeat-y;
}

#article .gray .head {
	background: url("../img/bg_article_gray_h.gif") no-repeat;
}

#article .gray .foot {
	background: url("../img/bg_article_gray_f.gif") no-repeat;
}

#article .inner {
	width: 450px;
	margin: 0 auto 0 auto;
}

/*------------------------------------------------*/
/* #article > .hdg_category */

#article .hdg_category {
	position: relative;
	width: 392px;
	margin: 0 29px 18px 29px;
	padding: 0 0 12px 0;
	background: url("../img/line_circle3.gif") no-repeat left bottom;
}

#article .hdg_category .bg_particle {
	position: absolute;
	top: -5px;
	left: 337px;
	width: 24px;
	height: 35px;
	margin: 0;
	background: url("../img/bg_particle2.gif") no-repeat;
}

#article .hdg_category h2 {
	margin: 0;
	padding: 8px 0 0 4px;
}

#article .hdg_category .date {
	position: absolute;
	width: 388px;
	padding: 0 4px 0 0;
	text-align: right;
	color: #DC1D7D;
	font-size: 12px;
	line-height: 36px;
}

#article .hdg_category h3 {
	margin: 0;
	padding: 0 0 0 4px;
	color: #DC1D7D;
	font-size: 16px;
	line-height: 36px;
}

/*------------------------------------------------*/
/* #article > .hdg_episode */

#article .hdg_episode1,
#article .hdg_episode2 {
	position: relative;
	width: 392px;
	margin: 0 29px 0 29px;
	padding: 0 0 60px 0;
	background: url("../img/line_ribon1.gif") no-repeat left bottom;
}

#article .hdg_episode2 {
	margin: 0 29px -60px 29px;
}

#article .hdg_episode1 .bg_particle,
#article .hdg_episode2 .bg_particle {
	position: absolute;
	top: -5px;
	left: 337px;
	width: 24px;
	height: 35px;
	margin: 0;
	background: url("../img/bg_particle2.gif") no-repeat;
}

#article .hdg_episode1 h2,
#article .hdg_episode2 h2 {
	margin: 0;
	padding: 8px 0 0 6px;
}

#article .hdg_episode1 h3,
#article .hdg_episode2 h3 {
	margin: 0;
	padding: 0 0 0 4px;
	color: #DC1D7D;
	font-size: 16px;
	line-height: 36px;
}

#article .hdg_episode1 h3 img,
#article .hdg_episode2 h3 img {
	vertical-align: middle;
}

/*------------------------------------------------*/
/* #article > .hdg_publicity */

#article .hdg_publicity {
	position: relative;
	width: 392px;
	margin: 0 29px -55px 29px;
	padding: 0 0 60px 0;
	background: url("../img/line_ribon1.gif") no-repeat left bottom;
}

#article .hdg_publicity .bg_particle {
	position: absolute;
	top: -5px;
	left: 337px;
	width: 24px;
	height: 35px;
	margin: 0;
	background: url("../img/bg_particle2.gif") no-repeat;
}

#article .hdg_publicity h2 {
	margin: 0;
	padding: 8px 0 0 6px;
}

#article .hdg_publicity h3 {
	margin: 0;
	padding: 0 0 0 4px;
	color: #DC1D7D;
	font-size: 16px;
	line-height: 36px;
}

/*------------------------------------------------*/
/* #article > .hdg_shop */

#article .hdg_shop_fd,
#article .hdg_shop_fdp {
	position: relative;
	width: 392px;
	margin: 0 29px -60px 29px;
	padding: 0 0 60px 0;
}

#article .hdg_shop_fd {
	background: url("../img/line_ribon1.gif") no-repeat left bottom;
}

#article .hdg_shop_fdp {
	background: url("../img/line_ribon2.gif") no-repeat left bottom;
}

#article .hdg_shop_fd .bg_particle,
#article .hdg_shop_fdp .bg_particle {
	position: absolute;
	top: -5px;
	left: 337px;
	width: 24px;
	height: 35px;
	margin: 0;
	background: url("../img/bg_particle2.gif") no-repeat;
}

#article .hdg_shop_fd h2,
#article .hdg_shop_fdp h2 {
	margin: 0;
	padding: 8px 0 0 6px;
}

#article .hdg_shop_fd .price,
#article .hdg_shop_fdp .price {
	position: absolute;
	width: 388px;
	/*height: 36px;*/
	padding: 18px 4px 0 0;
	text-align: right;
}

#article .hdg_shop_fd h3,
#article .hdg_shop_fdp h3 {
	/*height: 36px;*/
	margin: 0;
	padding: 10px 0 10px 4px;
}

#article .hdg_shop_fd h3,
#article .hdg_shop_fdp h3 {
	/*height: 36px;*/
	margin: 0;
	padding: 10px 0 10px 4px;
}

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

#article .img {
	margin: 12px 0 12px 0;
	text-align: center;
}

#article p {
	position: relative;
	width: 380px;
	margin: 24px auto 24px auto;
	color: #DC1B7D;
	font-size: 12px;
	line-height: 21px;
	/*background: #999;*/
}

/*
#article p.lead {
	position: relative;
	margin: -28px auto 24px auto;
}
*/

#article p.caption {
	margin: 12px auto 12px auto;
}

#article .bg_particle {
	width: 24px;
	height: 35px;
	margin: 0 0 0 36px;
	background: url("../img/bg_particle3.gif") no-repeat;
}

#article .bg_line {
	width:392px;
	height: 12px;
	margin: 12px auto 0 auto;
	line-height: 0;
}

#article .blue .bg_line,
#article .pink .bg_line {
	background: url("../img/line_circle3.gif") no-repeat left bottom;
}

#article .gray .bg_line {
	background: url("../img/line_circle4.gif") no-repeat left bottom;
}

#article .shopList {
	overflow: auto;
	width: 380px;
	margin: 0 auto 0 auto;
}

#article .shopList ul {
	float: left;
	width: 225px;
	margin: 0;
}

#article .shopList li {
	width:200px;
}

/* CSS HACK for IE6 */
* html #article .shopList li {
	margin-bottom: -3px;
}

/* CSS HACK for IE7 */
* +html #article .shopList li {
	margin-bottom: -3px;
}

#article .shopList a,
#article .shopList span {
	display: block;
	padding-left: 14px;
	font-size: 12px;
	line-height: 24px;
	text-decoration: none;
}

#article .pink .shopList a:link,
#article .pink .shopList a:visited,
#article .pink .shopList span {
	background: url("../img/icon_heart2.gif") no-repeat 0 7px;
	color: #DC1B7D;
}

#article .pink .shopList a:hover,
#article .pink .shopList a:active {
	background: url("../img/icon_heart2_over.gif") no-repeat 0 7px;
	color: #87CAD7;
}

#article .gray .shopList a:link,
#article .gray .shopList a:visited,
#article .gray .shopList span {
	background: url("../img/icon_heart3.gif") no-repeat 0 7px;
	color: #F5699B;
}

#article .gray .shopList a:hover,
#article .gray .shopList a:active {
	background: url("../img/icon_heart3_over.gif") no-repeat 0 7px;
	color: #999;
}

#article .shopList div {
	float: right;
	width: 155px;
	padding: 10px 0 0 0;
}

/*------------------------------------------------*/
/* add 2008.11 */

#article a {
	text-decoration: none;
}

#article a:link,
#article a:visited {
	color: #64AEBD;
}

#article a:hover,
#article a:active {
	color: #DC1B7E;
}

#article div.pageTopNavigation {
	width: 380px;
	margin: 24px auto 0 auto;
	color: #64AEBD;
	font-size: 12px;
	line-height: 21px;
	text-align: right;
}

/* for episode */

#article p img.icon {
	vertical-align: middle;
}

#article div.comp_img1 {
	margin: -24px 0 -36px 224px;
}

#article div.comp_img2 {
	margin: -66px 0 0 313px;
}

#article div.comp_img3 {
	margin: -50px 0 0 37px;
}

#article p.comp_txt1 {
	width: 283px;
	margin: -50px 0 30px 131px;
	/*background: #999;*/
}

#article div.pageNavigation {
	width: 380px;
	margin: 24px auto 0 auto;
	color: #64AEBD;
	font-size: 12px;
	line-height: 21px;
	text-align: center;
}

/*------------------------------------------------*/
/* #footerNavigation */

#footerNavigation {
	color: #FFF;
	font-size: 12px;
	line-height: 21px;
	text-align: center;
}

#footerNavigation a {
	text-decoration: none;
}

#footerNavigation a:link,
#footerNavigation a:visited {
	color: #FFF;
}

#footerNavigation a:hover,
#footerNavigation a:active {
	color: #EB7DB7;
}

/*------------------------------------------------*/
/* #copyright */

#copyright {
	padding: 10px 0 10px 0;
	text-align: center;
}


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

	SHARED CLASS

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


.container {}

.head {}

.foot {}

.outer {}

.inner {}

.hdg {}

.img {}

.btn {}

.over {}

.bg_particle {}