@charset "utf-8";



@media screen and (min-width: 641px){


/*--------------------------------------
    div#main
--------------------------------------*/

#main {
}

.btn_text {
	display:block;
	background:url(../img/btn_text.png) top center no-repeat;
	text-align:center;
	font-size:16px;
	color:#FFF;
	font-weight:bold;
	padding:13px 0 17px 0;
	text-decoration:none;
}

.btn_text:hover{
	filter: alpha(style=0, opacity=80);
	-moz-opacity:0.80;
	opacity:0.80;
}



/*--------------------------------------
    div#feed
--------------------------------------*/

#feed {
	width:495px;
	margin-left:5px;
	padding-bottom:15px;
}


#feed a {
	color:#6699CC;
}

#feed h3 {
	font-size:15px;
	font-weight:bold;
	padding-top:0px;
}

#feed p.feeddate {
	font-size:12px;
	padding-bottom:5px;
}

#feed img {
	max-width:150px;
	max-height:150px;
	float:left;
	margin:10px 10px 0 0px;
	border:2px solid #EEEEEE;
}

#feed div {
	clear:both;
	border-top:1px solid #CCC;
	padding-bottom:10px;
	overflow:hidden;
}

.detail_more {
	float:right;
}



/*--------------------------------------
    div#detail
--------------------------------------*/

#detail {
	clear:both;
}

#main #detail h2 {
	margin:10px 0 0 0;
	padding-bottom:10px;
	border-bottom:none;
}

#detail h3 {
	margin:10px 5px;
}

#detail #feed h3 {
	margin:10px 5px 0px 5px;
}

#detail p {
}

#detail #detailleft {
	width:420px;
	float:left;
}

#detail #detailright {
	width:500px;
	float:right;
	margin-right:10px;
	padding-bottom:20px;
}

div.btn_open {
	width:100%;
	height:33px;
	margin-top:-38px;
	background:url(../img/btn_open_s.png) no-repeat top right;
	cursor:pointer;
	position:relative;
}

div.btn_open.active {
	background:url(../img/btn_close_s.png) no-repeat top right;
}


/*--------------------------------------
    div#story
--------------------------------------*/


#detail #story {
	clear:both;
}

#detail #story p#text {
	margin:0 10px;
}


/*--------------------------------------
    div#profile
--------------------------------------*/


#detail #profile {
	clear:both;
	margin-top:15px;
}

#detail #profile p.name {
	font-size:16px;
	font-weight:bold;
	margin:0 10px;
	line-height:1.0;
}

#detail #profile p.kana {
	margin:0 5px;
	font-size:10px;
}

#detail #profile img.picture {
	width:70px;
	float:left;
	margin:5px 10px 15px 10px;
}

#detail #profile p.text {
	padding:5px 5px 15px 5px;
	margin-left:85px;
}

#detail #profile p.link {
	padding:5px;
	float:right;
	margin-right:15px;
}

#detail #profile p.link a {
	background: url(../img/link_arrow.gif) no-repeat 0 4px;
	padding-left:12px;
}


/*--------------------------------------
    div#movie
--------------------------------------*/


#detail #movie {
	clear:both;
	margin-top:5px;
	padding-bottom:25px;
}

#detail #movie iframe {
	clear:both;
	margin-left:5px;
}


/*--------------------------------------
    div#gallery
--------------------------------------*/


#detail #gallery {
	clear:both;
	margin-top:15px;
}

#detail #gallery div.gallerypic {
	float:left;
	background:url(../img/gallery_bk.gif) no-repeat;
	width:92px;
	margin:5px 6px 0 6px;
	text-align:center;
}

#detail #gallery div.gallerypic:hover {
	background:url(../img/gallery_bk_o.gif) no-repeat;
}

#detail #gallery div.gallerypic img {
	margin:6px;
}

#detail #gallery div.gallerypic p {
	background:#FFF;
	text-align:center;
	padding:3px;
	font-size:10px;
}

#detail #gallery p.caption {
	clear:both;
	padding:10px 5px 5px 5px;
	color:#666;
}


/*--------------------------------------
    div#chara
--------------------------------------*/


#detail #chara {
	clear:both;
	margin-top:15px;
}

#detail #chara h3 {
	margin:5px;
	padding-top:5px;
}

#detail #chara div.charapic {
	float:left;
	background:url(../img/chara_bk.gif) no-repeat;
	width:92px;
	margin:5px 6px 0 6px;
	text-align:center;
}

#detail #chara div.charapic:hover {
	background:url(../img/chara_bk.gif) no-repeat;
}

#detail #chara div.charapic img {
	margin:6px;
}

#detail #chara p {
	background:#FFF;
	text-align:left;
	padding:3px 2px;
	font-size:10px;
}

#detail #chara p strong {
	font-weight:bold;
	font-size:12px;
}

#detail #chara p.caption {
	clear:both;
	padding:10px 5px 5px 5px;
	color:#666;
}

#detail #chara div.charapic2 {
	float:left;
	background:url(../img/chara2_bk.gif) no-repeat;
	width:195px;
	margin:5px 6px 0 6px;
	text-align:center;
}

#detail #chara div.charapic2:hover {
	background:url(../img/chara2_bk.gif) no-repeat;
}

#detail #chara div.charapic2 img {
	margin:6px 6px 8px 6px;
}

#detail #chara div.charapic2 p {
	background:#FFF;
	text-align:left;
	padding:3px;
	font-size:10px;
}

#detail #chara div.charapic_s {
	background:url(../img/chara_bk.gif) no-repeat;
	margin:5px 6px 0 6px;
	clear:both;
	width:400px;
	padding:5px 5px 10px 5px;
	overflow:hidden;
}

#detail #chara div.charapic_s img {
	float:left;
}

#detail #chara div.charapic_s p {
	text-align:left;
	padding:0 3px;
	font-size:10px;
	margin-left:90px;
}


/*--------------------------------------
    div#webcomic
--------------------------------------*/


#detail #webcomic {
	clear:both;
	position:relative;
}

#detail #webcomic p.webcomictext {
	position:absolute;
	top:7px;
	left:142px;
	width:154px;
	text-align:center;
	font-size:10px;
	font-weight:bold;
	line-height:1.0;
	color:#FFF;
	background:#ff0088;
	padding:6px 0;
}

#detail #webcomic p.webcomictext2 {
	position:absolute;
	top:-3px;
	left:142px;
	width:154px;
	text-align:center;
	font-size:10px;
	font-weight:bold;
	line-height:1.2;
	color:#FFF;
	background:#ff0088;
	padding:6px 0;
}

#detail #webcomic img.webcomicimage {
	margin:5px 10px;
}

#detail #webcomic img.webcomicfree,
#detail #webcomic img.webcomicfree2 {
	position:absolute;
	top:-20px;
	left:290px;
}


/*--------------------------------------
    div#webcomic2
--------------------------------------*/


#detail #webcomic2 {
	clear:both;
	position:relative;
	margin-top:50px;
}

#detail #webcomic2 p.webcomictext {
	position:absolute;
	top:7px;
	left:142px;
	width:154px;
	text-align:center;
	font-weight:bold;
	line-height:1.0;
	color:#FFF;
	background:#ff0088;
	padding:6px 0 4px 0;
}

#detail #webcomic2 img.webcomicimage2 {
	margin:5px 10px;
}

#detail #webcomic2 img.webcomicfree2 {
	position:absolute;
	top:-25px;
	left:290px;
}



/*--------------------------------------
    div#comics
--------------------------------------*/


#detail #comics {
	margin-top:25px;
	clear:both;
}

#detail #comics p.title {
	font-size:16px;
	font-weight:bold;
	margin-left:168px;
	border-bottom:1px dotted #CCC;
	padding:0 5px;
}

#detail #comics p.name {
	margin-left:168px;
	padding:5px 5px 0 5px;
}

#detail #comics p.code {
	font-size:10px;
	line-height:1.3;
	margin-left:168px;
	padding:0 5px 5px 5px;
	border-bottom:1px dotted #CCC;
}

#detail #comics p.text {
	margin-left:168px;
	padding:5px;
	display:none;
}

#detail #comics div.btn {
	text-align:right;
	padding:3px 0;
}

#detail #comics div.btn img {
	vertical-align:middle;
}

#detail #comics img.picture {
	margin-left:10px;
	width:150px;
	float:left;
}

#detail #comics .past {
	margin-top:20px;
	width:245px;
	float:left;
}

#detail #comics .past p.title {
	font-size:12px;
	font-weight:bold;
	margin-left:75px;
	border-bottom:1px dotted #CCC;
	padding:0 5px;
}

#detail #comics .past p.text {
	display:none;
}

#detail #comics .past p.name {
	margin-left:75px;
	padding:3px 5px 0 5px;
}

#detail #comics .past p.code {
	margin-left:75px;
	padding:0 5px 5px 5px;
	border-bottom:none;
}

#detail #comics .past img.picture {
	margin-left:10px;
	width:60px;
	float:left;
}

#detail #comics .past div.btn {
	clear:both;
}



/*--------------------------------------
    div#download
--------------------------------------*/

#download {
	padding-top:20px;
}

#download .download_ad {
	text-align:center;
	margin-top:10px;
}

#download .download_ad_image {
	background:url(../img/dot.gif);
	padding:6px;
	position:relative;
}

#download .download_ad_image:after {
	content: url(../img/detail_zoom.png);
	position:absolute;
	bottom:6px;
	right:6px;
}

#download .download_ad_image img {
	width:100%;
}

#download .download_ad_pdfbtn {
	margin:8px 0;
}

#download .download_ouen {
	background:url(../img/detail_download_ouen.png) no-repeat top center;
	margin-top:15px;
	padding-top:32px;
}

#download .download_pop {
	width:50%;
	text-align:center;
	float:left;
	position:relative;
}

#download p.download_pop_image {
	position:relative;
}

#download p.download_pop_image img {
	width:168px;
}

#download p.download_pop_image:after {
	content: url(../img/detail_zoom.png);
	position:absolute;
	bottom:5px;
	right:45px;
}

#download img.download_pop_pdfbtn {
	margin:5px 0;
}

#download .download_pop_name {
	font-size:16px;
	font-weight:bold;
	padding:5px 15px 0 15px;
	text-align:left;
}

#download .download_pop_name span {
	font-size:10px;
	font-weight:normal;
	padding-left:3px;
	display:inline-block;
	vertical-align:top;
	padding-top:3px;
}

#download .download_pop_text {
	text-align:left;
	font-size:10px;
	padding:2px 15px;
}

#download h4 {
	font-size:16px;
	font-weight:bold;
	padding:5px 0 0 0;
	color:#333;
	clear:both;
}

#download .download_wallpaper {
	text-align:center;
	margin-top:10px;
}

#download .download_wallpaper_image {
	background:url(../img/dot.gif);
	padding:6px;
	position:relative;
}

#download .download_wallpaper_image img {
	width:100%;
}

#download .download_wallpaper .size {
	padding-top:6px;
}

#download .download_icon {
	text-align:center;
	margin-top:10px;
	float:left;
}

#download .download_icon_image {
	background:url(../img/dot.gif);
	padding:6px;
	position:relative;
}

#detailleft #download .download_icon_image img {
	width:87px;
}

#detailleft #download .download_icon {
	margin-left:5px;
}

#download .download_wallpapers {
	text-align:center;
	margin-top:10px;
	float:left;
}

#download .download_wallpapers_image {
	background:url(../img/dot.gif);
	padding:6px;
	position:relative;
}

#download .download_wallpapers_image img {
	height:268px;
}

#detailleft #download .download_wallpapers_image img {
	width:390px;
	height:312px;
}

#detailleft #download .download_wallpapers {
	margin-left:5px;
}

#download .download_wallpapers .size {
	padding-top:6px;
}


/*--------------------------------------
    div#link
--------------------------------------*/


#detail #link {
	clear:both;
	padding-top:5px;
}



}













































































@media screen and (max-width: 640px){


/*--------------------------------------
    div#main
--------------------------------------*/

#main {
}

.btn_text {
	display:block;
	background:url(../img/btn_text.png) top center no-repeat;
	text-align:center;
	font-size:16px;
	color:#FFF;
	font-weight:bold;
	padding:13px 0 17px 0;
	text-decoration:none;
}

.btn_text:hover{
	filter: alpha(style=0, opacity=80);
	-moz-opacity:0.80;
	opacity:0.80;
}



/*--------------------------------------
    div#feed
--------------------------------------*/

#feed {
	width:100%;
	margin-left:5px;
	padding-bottom:15px;
}


#feed a {
	color:#6699CC;
}

#feed h3 {
	font-size:15px;
	font-weight:bold;
	padding-top:0px;
	position:relative;
	z-index:0;
}

#feed p.feeddate {
	font-size:12px;
	padding-bottom:5px;
}

#feed img {
	max-width:150px;
	max-height:150px;
	float:left;
	margin:10px 10px 0 0px;
	border:2px solid #EEEEEE;
}

#feed div {
	clear:both;
	border-top:1px solid #CCC;
	padding-bottom:10px;
	overflow:hidden;
}

.detail_more {
	float:right;
	margin-bottom:-21px;
	position:relative;
	z-index:10;
}



/*--------------------------------------
    div#detail
--------------------------------------*/

#detail {
	clear:both;
}

#main #detail h2 {
	margin:10px 0 0 0;
	padding-bottom:10px;
	border-bottom:none;
	text-align:center;
}

#detail h3 {
	margin:10px 5px;
}

#detail #feed h3 {
	margin:10px 5px 0px 5px;
}

#detail p {
}

#detail #detailleft {
	width:100%;
}

#detail #detailright {
	width:100%;
	margin-right:10px;
	padding-bottom:20px;
}

div.btn_open {
	width:100%;
	height:33px;
	margin-top:-38px;
	background:url(../img/btn_open_s.png) no-repeat top right;
	cursor:pointer;
	position:relative;
}

div.btn_open.active {
	background:url(../img/btn_close_s.png) no-repeat top right;
}


/*--------------------------------------
    div#story
--------------------------------------*/


#detail #story {
	clear:both;
}

#detail #story p#text {
	margin:0 10px;
}


/*--------------------------------------
    div#profile
--------------------------------------*/


#detail #profile {
	clear:both;
	margin-top:15px;
}

#detail #profile p.name {
	font-size:16px;
	font-weight:bold;
	margin:0 10px;
	line-height:1.0;
}

#detail #profile p.kana {
	margin:0 5px;
	font-size:10px;
}

#detail #profile img.picture {
	width:70px;
	float:left;
	margin:5px 10px 15px 10px;
}

#detail #profile p.text {
	padding:5px 5px 15px 5px;
	margin-left:85px;
}

#detail #profile p.link {
	padding:5px;
	float:right;
	margin-right:15px;
}

#detail #profile p.link a {
	background: url(../img/link_arrow.gif) no-repeat 0 4px;
	padding-left:12px;
}


/*--------------------------------------
    div#movie
--------------------------------------*/


#detail #movie {
	clear:both;
	margin-top:5px;
	padding-bottom:25px;
}

#detail #movie iframe {
	clear:both;
	margin-left:5px;
	width:98%;
	height:auto;
}


/*--------------------------------------
    div#gallery
--------------------------------------*/


#detail #gallery {
	clear:both;
	margin-top:15px;
}

#detail #gallery div.gallerypic {
	float:left;
	background:url(../img/gallery_bk.gif) no-repeat;
	width:92px;
	margin:5px 6px 0 6px;
	text-align:center;
}

#detail #gallery div.gallerypic:hover {
	background:url(../img/gallery_bk_o.gif) no-repeat;
}

#detail #gallery div.gallerypic img {
	margin:6px;
}

#detail #gallery div.gallerypic p {
	background:#FFF;
	text-align:center;
	padding:3px;
	font-size:10px;
}

#detail #gallery p.caption {
	clear:both;
	padding:10px 5px 5px 5px;
	color:#666;
}


/*--------------------------------------
    div#chara
--------------------------------------*/


#detail #chara {
	clear:both;
	margin-top:15px;
}

#detail #chara h3 {
	margin:5px;
	padding-top:5px;
}

#detail #chara div.charapic {
	float:left;
	width:45%;
	margin:5px 6px 0 6px;
	text-align:center;
}

#detail #chara div.charapic:hover {
}

#detail #chara div.charapic img {
	margin:6px 6px 8px 6px;
}

#detail #chara p {
	background:#FFF;
	text-align:left;
	padding:3px;
	font-size:10px;
}

#detail #chara p strong {
	font-weight:bold;
	font-size:12px;
}

#detail #chara p.caption {
	clear:both;
	padding:10px 5px 5px 5px;
	color:#666;
}

#detail #chara div.charapic2 {
	float:left;
	width:45%;
	margin:5px 6px 0 6px;
	text-align:center;
}

#detail #chara div.charapic2:hover {
}

#detail #chara div.charapic2 img {
	margin:6px 6px 8px 6px;
}

#detail #chara div.charapic2 p {
	background:#FFF;
	text-align:left;
	padding:3px;
	font-size:10px;
}

#detail #chara div.charapic_s {
	background:url(../img/chara_bk.gif) no-repeat;
	margin:5px 6px 0 6px;
	clear:both;
	width:100%;
	padding:5px 5px 10px 5px;
	overflow:hidden;
}

#detail #chara div.charapic_s img {
	float:left;
}

#detail #chara div.charapic_s p {
	text-align:left;
	padding:0 3px;
	font-size:10px;
	margin-left:90px;
}


/*--------------------------------------
    div#webcomic
--------------------------------------*/


#detail #webcomic {
	clear:both;
	position:relative;
	text-align:center;
}

#detail #webcomic p.webcomictext {
	position:absolute;
	top:7px;
	left:142px;
	width:154px;
	text-align:center;
	font-size:10px;
	font-weight:bold;
	line-height:1.0;
	color:#FFF;
	background:#ff0088;
	padding:6px 0;
	display:none;
}

#detail #webcomic p.webcomictext2 {
	position:absolute;
	top:-3px;
	left:142px;
	width:154px;
	text-align:center;
	font-size:10px;
	font-weight:bold;
	line-height:1.2;
	color:#FFF;
	background:#ff0088;
	padding:6px 0;
	display:none;
}

#detail #webcomic img.webcomicimage {
}

#detail #webcomic img.webcomicfree,
#detail #webcomic img.webcomicfree2 {
	position:absolute;
	top:-20px;
	left:290px;
	display:none;
}

#detail #webcomic h3 {
	display:none;
}


/*--------------------------------------
    div#webcomic2
--------------------------------------*/


#detail #webcomic2 {
	clear:both;
	position:relative;
	margin-top:50px;
}

#detail #webcomic2 p.webcomictext {
	position:absolute;
	top:7px;
	left:142px;
	width:154px;
	text-align:center;
	font-weight:bold;
	line-height:1.0;
	color:#FFF;
	background:#ff0088;
	padding:6px 0 4px 0;
}

#detail #webcomic2 img.webcomicimage2 {
	margin:5px 10px;
}

#detail #webcomic2 img.webcomicfree2 {
	position:absolute;
	top:-25px;
	left:290px;
}



/*--------------------------------------
    div#comics
--------------------------------------*/


#detail #comics {
	margin-top:25px;
	clear:both;
}

#detail #comics p.title {
	font-size:14px;
	font-weight:bold;
	margin-left:118px;
	border-bottom:1px dotted #CCC;
	padding:0 5px;
}

#detail #comics p.name {
	margin-left:118px;
	padding:5px 5px 0 5px;
}

#detail #comics p.code {
	font-size:10px;
	line-height:1.3;
	margin-left:118px;
	padding:0 5px 5px 5px;
	border-bottom:1px dotted #CCC;
}

#detail #comics p.text {
	margin-left:118px;
	padding:5px;
	display:none;
}

#detail #comics div.btn {
	clear:both;
	text-align:center;
	padding:5px 0;
}

#detail #comics div.btn img {
	vertical-align:middle;
}

#detail #comics img.picture {
	margin-left:10px;
	width:100px;
	float:left;
}

#detail #comics .past {
	margin-top:20px;
	width:100%;
	float:left;
}

#detail #comics .past p.title {
	font-size:14px;
	font-weight:bold;
	margin-left:118px;
	border-bottom:1px dotted #CCC;
	padding:0 5px;
}

#detail #comics .past p.text {
	display:none;
}

#detail #comics .past p.name {
	margin-left:118px;
	padding:5px 5px 0 5px;
}

#detail #comics .past p.code {
	font-size:10px;
	line-height:1.3;
	margin-left:118px;
	padding:0 5px 5px 5px;
	border-bottom:1px dotted #CCC;
}

#detail #comics .past img.picture {
	margin-left:10px;
	width:100px;
	float:left;
}

#detail #comics .past div.btn {
	clear:both;
	text-align:center;
	padding:5px 0;
}



/*--------------------------------------
    div#download
--------------------------------------*/

#download {
	padding-top:20px;
}

#download .download_ad {
	text-align:center;
	margin-top:10px;
}

#download .download_ad_image {
	background:url(../img/dot.gif);
	padding:6px;
	position:relative;
}

#download .download_ad_image:after {
	content: url(../img/detail_zoom.png);
	position:absolute;
	bottom:6px;
	right:6px;
}

#download .download_ad_image img {
	width:100%;
}

#download .download_ad_pdfbtn {
	margin:8px 0;
}

#download .download_ouen {
	background:url(../img/detail_download_ouen.png) no-repeat top center;
	margin-top:15px;
	padding-top:32px;
}

#download .download_pop {
	width:50%;
	text-align:center;
	float:left;
	position:relative;
}

#download p.download_pop_image {
	position:relative;
}

#download p.download_pop_image img {
	width:168px;
}

#download p.download_pop_image:after {
	content: url(../img/detail_zoom.png);
	position:absolute;
	bottom:5px;
	right:45px;
}

#download img.download_pop_pdfbtn {
	margin:5px 0;
}

#download .download_pop_name {
	font-size:16px;
	font-weight:bold;
	padding:5px 15px 0 15px;
	text-align:left;
}

#download .download_pop_name span {
	font-size:10px;
	font-weight:normal;
	padding-left:3px;
	display:inline-block;
	vertical-align:top;
	padding-top:3px;
}

#download .download_pop_text {
	text-align:left;
	font-size:10px;
	padding:2px 15px;
}

#download h4 {
	font-size:16px;
	font-weight:bold;
	padding:5px 0 0 0;
	color:#333;
	clear:both;
}

#download .download_wallpaper {
	text-align:center;
	margin-top:10px;
}

#download .download_wallpaper_image {
	background:url(../img/dot.gif);
	padding:6px;
	position:relative;
}

#download .download_wallpaper_image img {
	width:100%;
}

#download .download_wallpaper .size {
	padding-top:6px;
}

#download .download_icon {
	text-align:center;
	margin-top:10px;
	float:left;
}

#download .download_icon_image {
	background:url(../img/dot.gif);
	padding:6px;
	position:relative;
}

#detailleft #download .download_icon_image img {
	width:87px;
}

#detailleft #download .download_icon {
	margin-left:5px;
}

#download .download_wallpapers {
	text-align:center;
	margin-top:10px;
	float:left;
}

#download .download_wallpapers_image {
	background:url(../img/dot.gif);
	padding:6px;
	position:relative;
}

#download .download_wallpapers_image img {
}

#detailleft #download .download_wallpapers_image img {
}

#detailleft #download .download_wallpapers {
	margin-left:5px;
	padding-bottom:30px;
}

#download .download_wallpapers .size {
	padding-top:6px;
}


/*--------------------------------------
    div#link
--------------------------------------*/


#detail #link {
	clear:both;
	padding-top:5px;
}


}