@charset "utf-8";


/*Joomlaのためのスタイル適宜変えてもらっても大丈夫です*/
/*ページタイトル*/
table.contentpaneopen {
	border-spacing: 0px;
	border-collapse: collapse;
	padding:0px;
}

th.contentpaneopen,
td.contentpaneopen {
	padding:0px;
}

td.contentheading{
	font-size: 26px;
	font-weight: bold;
	color: #333333;
}

/*参考リンク*/
/*参考リンクcs用200802*********************************************/

#maincont-r .moduletable-comicstyle{
	width: 165px;
	padding: 0px;
	background-repeat: no-repeat;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 8px;
	border: 1px solid #c0c0c0;
	background-color: #FFFFFF;
	color: #555555;
}

#maincont-r .moduletable-comicstyle th{
	font-size: 12px;
	font-weight: bold;
	padding-top: 5px;
	text-align: left;
	color: #FFFFFF;
	padding-left: 10px;
	background-repeat: no-repeat;
	padding-bottom: 5px;
	background-color: #ff418c;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #c0c0c0;
	padding-right: 5px;
}

#maincont-r table.moduletable-menu th {
	background-color:#8dadd2;
	background-image:url(../../../images/stories/products/comicstyle/mtable_headbg_blue.gif);
	}

#maincont-r .moduletable-comicstyle TD{	font-size: 12px;}
#maincont-r .moduletable-comicstyle	ul{margin: 10px;	padding: 0px;}
#maincont-r .moduletable-comicstyle li{	margin: 0px;
	list-style-type: none;
	padding: 3px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #c0c0c0;
	}

#maincont-r .moduletable-comicstyle a:link,
#maincont-r .moduletable-comicstyle a:visited{	
	color: #555555;
	display:block;
	}
	
#maincont-r .moduletable-comicstyle a:hover{	background-color: #F9E6E6;	}




/*Basic Styles ここから(場合によってコメントアウト)********************************************/
/*H1{
	padding-top: 2px;
	padding-bottom: 2px;
	padding-right: 0px;
	padding-left: 5px;
	font-size: 1.5em;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #5B7DA4;
	font-weight: bold;
	border-left-width: 5px;
	border-left-style: solid;
	border-left-color: #5B7DA4;
	margin: 0px;
	/*width: 610px;*/
	width: 99%;
}*/

/*H2{
	font-size: 14px;
	display: block;
	color: #333333;
	background-image: url(../global/images/h2header_bg.gif);
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 15px;
	font-weight: bold;
	background-repeat: no-repeat;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #CCCCCC;
	border-right-color: #333333;
	border-bottom-color: #333333;
	border-left-color: #CCCCCC;
	height: 24px;
	line-height: 24px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 3px;
	margin-left: 0px;
	width: auto;
}*/

/*H3 {
	margin-bottom: 0px;
	margin-top: 0px;
	font-size: 12px;
}
*/
/*タイトルヘッド表示部分*/
#maincont-center .contentheading{
	font-weight: bold;
	margin: 0px;
	font-size: 24px;
	color: #333333;
	width: 600px;
	background-repeat: repeat;
	padding-top: 0px;
	padding-right: 5px;
	padding-bottom: 0px;
	padding-left: 5px;
	border-left-width: 5px;
	border-left-style: solid;
	border-top-color: #5B7DA4;
	border-right-color: #5B7DA4;
	border-bottom-color: #5B7DA4;
	border-left-color: #5B7DA4;
	border-bottom-width: 1px;
	border-bottom-style: solid;
}

#maincont-center .buttonheading{
	margin: 0px;
	padding: 0px;
}

#maincont-center .contentheading a,
#maincont-center .contentheading a:link,
#maincont-center .contentheading a:visited{
	text-decoration: none;
	font-weight: bold;
	color: #333333;
	line-height: 120%;
	background-image: url(../global/images/cursor_r.gif);
	background-repeat: no-repeat;
	padding-left: 15px;
	display: block;
}

#maincont-center .contentheading a:hover{
	text-decoration: underline;
	color: #5C4827;
}
/*Basic Styles ここまで(場合によってコメントアウト)********************************************/


/*Custom Styles ここから********************************************/

body{
	font-family: Verdana,'メイリオ','Meiryo',"ＭＳ Ｐゴシック",Osaka,"ヒラギノ角ゴ Pro W3";
	background-color: #8dadd2;
}

#maincont-center {
	margin-bottom: 0px;
	width: 616px;
	padding: 0px;
	}


div.center {
	background-color: #8dadd2;
	background-image:url(../../../images/stories/products/comicstyle/MenuBackGround.png);
	background-repeat:repeat-x;
}

#main-container {
	color: #555555;
	width: 616px;
}

/* 全体のリンク動作設定*/
#main-container a,
#main-container a:link,
#main-container a:visited{
	color: #4E96D8;
	text-decoration: none;
	font-weight: bold;
}

#main-container a:hover{
	text-decoration: underline;
	color: #77AFE1;
}

#contents-frame-upper {
	background-image: url(../../../images/stories/products/comicstyle/contents-frame_upper.gif);
	background-repeat: no-repeat;
	height: 6px; 
	font-size: 2px;
}

#contents-frame {
	background-color: #FFFFFF;
	color: #555555;
	padding-top: 18px;
	padding-right: 18px;
	padding-bottom: 30px;
	padding-left: 18px;
	font-size: 12px;
	line-height: 140%;
	background-image: url(../../../images/stories/products/comicstyle/contents-frame_body.gif);
	background-repeat: repeat-y;
}

#contents-frame-lower {
	background-image: url(../../../images/stories/products/comicstyle/contents-frame_lower.gif);
	background-repeat: no-repeat;
	height: 9px; 
}

H1{
	color: #444444;
	font-size: 1.7em;
	margin: 0px;
	padding-top: 6px;
	padding-left: 18px;
	background-image: url(../../../images/stories/products/comicstyle/h1.gif);
	background-repeat: no-repeat;
	background-position: left top;
	height: 34px;
	line-height: 100%;
}

H2{
	font-size: 1.5em;
	font-weight: bold;
	color: #444444;
	margin-top: 40px;
	margin-bottom: 10px;
	margin-left: 0px;	
	line-height: 100%;
	background-image: url(../../../images/stories/products/comicstyle/h2.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 41px;	
}

H2 .pad {
	padding-top: 8px;
	padding-left: 45px;
	}
	
.cs H2 {
	font-size: 1.5em;
	font-weight: bold;
	color: #444444;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 0px;	
	line-height: 100%;
	background-image: url(../../../images/stories/products/comicstyle/cs_lineup.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 41px;	
}
.rnote H2 {
	font-size: 1.2em;
	font-weight: bold;
	color: #444444;
	margin-top: 20px;
	margin-bottom: 10px;
	margin-left: 5px;
	line-height: 100%;
	background-image: url(../../../images/stories/products/comicstyle/h2_rnote.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 26px;
}

.rnote H2 .pad {
	padding-top: 6px;
	padding-left: 14px;
}

H3{
	font-size: 1.3em;
	font-weight: bold;
	color: #555555;
	margin-top: 20px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 8px;
	padding-bottom: 2px;
	padding-left: 2px;
	border-bottom: 1px solid #999999;
}

H4{
	font-size: 1em;
	font-weight: bold;
	color: #ff418c;
	margin-left: 20px;
	margin-bottom: 0px;
	margin-top: 0px;
}

#csheader {
	background-image: url(../../../images/stories/products/comicstyle/cs_title_bg.jpg);
	background-repeat: no-repeat;
	width: 610px;
	height: 380px;
	margin-left: 3px;
}

#csheader .upper {
	margin-left: 227px;
	margin-top: 240px;
	float: left;
	display: inline;/*IEバグ対策*/
	}
	
#csheader .lower {
	margin-left: 247px;
	margin-top: 6px;
	float: left;
	display: inline;/*IEバグ対策*/
	}

#csheader .upper .menu01{
	width: 162px;
	height: 49px;
	float: left;
	display: inline;/*IEバグ対策*/
}

#csheader .upper .menu02{
	width: 162px;
	height: 49px;
	float: left;
	margin-left: 6px;
}

#csheader .lower .menu03{
	width: 162px;
	height: 49px;
	float: left;
	display: inline;/*IEバグ対策*/
}

#csheader .lower .menu04{
	width: 162px;
	height: 49px;
	float: left;
	margin-left: 6px;
}


#csheader .dl-btn {
	margin-top: 110px;
	margin-left: 10px;
	margin-bottom: 0px;
	width: 246px;
	height: 66px;
	float: left;
	display: inline;/*IEバグ対策*/
}

#p-header {
	width: 610px;
	margin-left: 3px;
}

.dl-btn {
	margin-bottom: 30px;
	text-align: right;
	margin-right: 10px;
}

/*p{
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	letter-spacing: 0.05em;
}*/

hr {
	border-top-style: solid;
	border-top-color: #999999;
	display: none;
}

#contents-frame ul {
	margin-top: 12px;
	}

#contents-frame li,
#contents-frame ol{
	margin-top: 0px;
	margin-bottom: 0px;
	line-height: 180%;
	}

#contents-frame li,
#contents-frame ol,
#contents-frame ul {
	margin-top: 0em;
	margin-bottom: 0em;
	padding-top: 0em;
	padding-bottom: 0em;
	}

#contents-frame ul li,
#contents-frame ol li{
	margin-left: -25px;
	line-height: 160%;
	}
	
.nomark{
	 display:block; /*で消えなきゃならないけど、IEはきえてくれないので */
	list-style-type:none; /*を書いておく */
}
	
.key {
	color: #ff418c;
}

.keyy {
	color: #ffae00;
}

.keyp {
	font-weight: bold;
}


.h1text {
 font-size: 1.2em;
 line-height: 170%;
}

a:hover img {
	filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
	}
	
.clear {
	clear: both;
	line-height: 0%;
	}

#contents-frame tr,
#contents-frame td {
	color: #555555;
	font-size: 12px;
  line-height: 160%;
}

.outline {
	margin-top: 10px;
	line-height: 150%;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 5px;
}

.outline-s {
	margin-top: 5px;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	letter-spacing: 0.05em;
}

.outline-cs {
	margin-top: 10px;
	line-height: 150%;
	margin-left: 20px;
	margin-right: 20px;
	margin-bottom: 30px;
}

.contents {
	margin-left: 30px;
	margin-right: 30px;
	margin-bottom: 10px;
}

.contents-line {
	margin-left: 15px;
	margin-right: 15px;
	border: 1px solid #999999;
	padding: 10px;
	padding-bottom: 5px;
}

.contents-w {
	margin-left: 15px;
	margin-right: 15px;
	padding-bottom: 10px;
}

.rengine {
	margin-top: 20px;
	margin-right: 21px;
	margin-left: 21px;
	border: 1px solid #ff418c;
	padding: 8px;
}

.colle {
	margin-top: 0px;
	margin-right: 20px;
	margin-left: 20px;
	padding: 6px;
	margin-top: 30px;
	background-color: #C4D2DD;
}

.colle2 {
	background-color: #FFFFFF;
	padding: 12px;
}

.colle2 .title {
	font-size: 1.4em;
	font-weight: bold;
	color: #3399FF;
}

.line {
	margin-top: 10px;
	margin-bottom: 10px;
	height: 1px;
	background-color: #FFFFFF;
}

.overview {
	width: 220px;
	float: left;
	margin-left: 50px;
	display: inline;/*IEバグ対策*/
}

.overview-r {
	width: 220px;
	float: right;
	margin-right: 50px;
	display: inline;/*IEバグ対策*/
}

.overview .title,
.overview-r .title {
	border-left: 5px solid #0066CC;
	font-weight: bold;
	padding: 2px 4px;
	margin-bottom: 2px;
	color: #0066CC;
}

.overview .text,
.overview-r .text {
	margin: 2px;
	line-height: 140%;
	margin-top: 4px;
}

.point-header {
	margin-right: 12px;
	margin-left: 12px;
	background-image: url(../../../images/stories/products/comicstyle/point_header.gif);
	background-repeat: no-repeat;
	font-size: 1.6em;
	font-weight: bold;
	height: 46px;
}

.point-header2 {
	padding: 18px 0px 0px 20px;
}

.point {
	padding: 10px 20px 0 20px;
	margin-right: 12px;
	margin-left: 12px;
	background-image: url(../../../images/stories/products/comicstyle/point_middle.gif);
	background-repeat: repeat-y;
}

.point img {
	margin-left: 15px;
}

.point-footer {
	margin-right: 12px;
	margin-left: 12px;
	background-image: url(../../../images/stories/products/comicstyle/point_footer.gif);
	background-repeat: no-repeat;
	height: 20px;
}

.point .line {
	border-bottom: 1px solid #CCCCCC;
	}

.point .lbox {
	float:left;
	width: 204px;
	display: inline;
}

.point .rbox {
	float:left;
	width: 302px;
	margin-left: 10px;
}

.point .title {
	margin-bottom: 5px;
	border-top: 1px solid #CCCCCC;
	margin-top: 10px;
	padding-top: 10px;
}

.point .title2 {
	margin-bottom: 5px;
	margin-top: 10px;
}

.point .title strong,
.point .title2 strong,
.point .title b,
.point .title2 b {
	color: #ff418c;
	font-size: 1.5em;
}

.point li,
.contents li {
	color: #ff418c;
}

.point .txtcl,
.contents .txtcl {
	color: #555555;
}

#sample {
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 10px;
	border: 1px solid #999999;
	padding: 10px;
}

#sample .title  {
	border-bottom: 1px solid #0066CC;
	font-weight: bold;
	margin-bottom: 4px;
	margin-left: 10px;
	height: 20px;
	color: #0066CC;
}

#sample .text{
	font-size: 0.85em;
	line-height: 140%;
	width: 195px;
	margin-left: 10px;
}

.dl-off {
	font-size: 0.85em;
	line-height: 120%;
}

.preset,
.preset-r {
	float: left;
	width: 168px;
	font-size: 0.8em;
	line-height: 140%;
	color: #666666;
	margin-bottom: 20px;
	display: inline;/*IEバグ対策*/
}

.preset-r {
	margin-left: 12px;
}

.preset .title,
.preset-r .title {
	font-weight: bold;
	text-align: center;
	margin: 3px 0px;
	color: #0066CC;
}

.preset .exp {
	background-color: #FF418C;
	font-weight: bold;
	font-size: 0.8em;
}

#footerMenu{
	background-color: #333333;
	border-top-width: 2px;
	border-bottom-width: 2px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #333333;
	border-bottom-color: #CCCCCC;
	padding-top: 20px;
	padding-right: 30px;
	padding-bottom: 20px;
	padding-left: 30px;
	color:#ccc;
	font-size: 12px;
	height: 100%;
}

#related{
	float: right;
	width: 200px;
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #666666;
	padding-left: 20px;
}
#buy{
	width: 310px;
}

.youtube {
	border: 1px solid #999999;
}

.new {
	margin-left: 6px;
	/*padding-bottom: 1px;*/
	line-height: 100%;
	height: 15px;
	}
	
.icon-15 {
	line-height: 100%;
	height: 15px;
	margin-left: 6px;
	}


/*メニュー*/
#csmenu {
	height: 38px;
	width: 616px;
	margin-top: 20px;
	}

.mm01 {
	width: 158px;
	background-image: url(../../../images/stories/products/comicstyle/menu.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	height: 38px;
	float: left;
	}
.mm01 a,
.mm01-on a {
	display: block;
	height: 38px;
	}
.mm02 {
	width: 115px;
	background-image: url(../../../images/stories/products/comicstyle/menu.jpg);
	background-repeat: no-repeat;
	background-position: -158px 0px;
	height: 38px;
	float: left;
	}
.mm02 a,
.mm02-on a {
	display: block;
	height: 38px;
	}
.mm03 {
	width: 113px;
	background-image: url(../../../images/stories/products/comicstyle/menu.jpg);
	background-repeat: no-repeat;
	background-position: -273px 0px;
	height: 38px;
	float: left;
	}
.mm03 a,
.mm03-on a {
	display: block;
	height: 38px;
	}
.mm04 {
	width: 113px;
	background-image: url(../../../images/stories/products/comicstyle/menu.jpg);
	background-repeat: no-repeat;
	background-position: -386px 0px;
	height: 38px;
	float: left;
	}
.mm04 a,
.mm04-on a {
	display: block;
	height: 38px;
	}
.mm05 {
	width: 117px;
	background-image: url(../../../images/stories/products/comicstyle/menu.jpg);
	background-repeat: no-repeat;
	background-position: -499px 0px;
	height: 38px;
	float: left;
	}
.mm05 a,
.mm05-on a {
	display: block;
	height: 38px;
	}

.mm01 a:hover {
	background-image: url(../../../images/stories/products/comicstyle/menu.jpg);
	background-repeat: no-repeat;
	background-position: 0px -38px;
	}
.mm02 a:hover {
	background-image: url(../../../images/stories/products/comicstyle/menu.jpg);
	background-repeat: no-repeat;
	background-position: -158px -38px;
	}
.mm03 a:hover {
	background-image: url(../../../images/stories/products/comicstyle/menu.jpg);
	background-repeat: no-repeat;
	background-position: -273px -38px;
	}
.mm04 a:hover {
	background-image: url(../../../images/stories/products/comicstyle/menu.jpg);
	background-repeat: no-repeat;
	background-position: -386px -38px;
	}
.mm05 a:hover {
	background-image: url(../../../images/stories/products/comicstyle/menu.jpg);
	background-repeat: no-repeat;
	background-position: -499px -38px;
	}
.mm01-on {
	width: 158px;
	background-image: url(../../../images/stories/products/comicstyle/menu.jpg);
	background-repeat: no-repeat;
	background-position: 0px -76px;
	height: 38px;
	float: left;
	}
.mm02-on {
	width: 115px;
	background-image: url(../../../images/stories/products/comicstyle/menu.jpg);
	background-repeat: no-repeat;
	background-position: -158px -76px;
	height: 38px;
	float: left;
	}
.mm03-on {
	width: 113px;
	background-image: url(../../../images/stories/products/comicstyle/menu.jpg);
	background-repeat: no-repeat;
	background-position: -273px -76px;
	height: 38px;
	float: left;
	}
.mm04-on {
	width: 113px;
	background-image: url(../../../images/stories/products/comicstyle/menu.jpg);
	background-repeat: no-repeat;
	background-position: -386px -76px;
	height: 38px;
	float: left;
	}
.mm05-on {
	width: 117px;
	background-image: url(../../../images/stories/products/comicstyle/menu.jpg);
	background-repeat: no-repeat;
	background-position: -499px -76px;
	height: 38px;
	float: left;
	}
	
#maincont-r {
	width: 170px;
}

#pathway,
#pathway a {
	color: #FFFFFF;
}

#pathway a:hover {
	color: #EEEEEE;
	}

/*更新エリア*/
#update-area {
	border-top: 0px solid #FFFFFF;
	border-bottom: 0px solid #FFFFFF;
	padding-top: 20px;
}
	
#update-area table.update{
	border-collapse: collapse;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: #202020;
	border-right-color: #202020;
	border-bottom-color: #202020;
	border-left-color: #202020;
	width: 616px;
	background-image: url(../../../images/stories/products/comicstyle/contents-frame_body.gif);
	background-position: center;
}

#update-area table.update th{
	text-align: left;
	color: #FF418C;
	margin: 0px;
	font-size: 12px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0pt;
	padding-left: 40px;
	font-weight: bold;
	background-image: url(../../../images/stories/products/comicstyle/Update.png);
	background-repeat: no-repeat;
	background-position: 10px center;
	vertical-align: middle;
	height: 35px;
	border: 1px none #333333;
	line-height: 35px;
}

#update-area table.update td{
	border: 1px none #333333;
	color: #333333;
	font-size: 10px;
	padding-top: 15px;
	padding-right: 19px;
	padding-bottom: 5px;
	padding-left: 19px;
}

#update-area table.update td a:link,
#update-area table.update td a:visited,
#update-area table.update td a:active{
	text-decoration: underline;
	font-size: 10px;
}

#update-area table.update td a:hover{
	text-decoration: underline;
	font-size: 10px;
}
#update-area dl{
	margin-top: 0px;
	margin-bottom: 0px;
	width: 100%;
	margin-right: 0px;
	margin-left: 0px;
}

#update-area dt{
	margin-bottom: 2px;
	font-size: 10px;
	margin-top: 0px;
	background-color: #F9F9F9;
	line-height: 130%;
	color: #333333;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 5px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #333333;
	border-right-color: #333333;
	border-bottom-color: #FF82BD;
	border-left-color: #FF4791;
	padding-top: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 5px;
}
#update-area dt strong{
	color: #F38BB3;
}

#update-area dt span.new{
	color: #FE428C;
	font-weight: bold;
	margin-left: 5px;
}

#update-area dt span.entry{
	color: #E18700;
}
.update-frame-upper {
	background-image: url(../../../images/stories/products/comicstyle/update-frame_upper.gif);
	background-repeat: no-repeat;
	height: 9px;
	font-size: 2px;
}
.update-frame-lower {
	background-image: url(../../../images/stories/products/comicstyle/contents-frame_lower.gif);
	background-repeat: no-repeat;
	height: 9px;
	font-size: 2px;
}
.font-L{
 font-size: 16px;
}

.font-M{
 font-size: 12px;
}

.font-S{
 font-size: 10px;
}