@charset "utf-8";


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


/*--------------------------------------
    reset
--------------------------------------*/

/*
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}legend{color:#000}


/*
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0

フォントサイズ回りの設定はすべてこのcssで行います。（%指定のみ）
ピクセルサイズと%の関係は以下の通り。
- - - - - - - - 
px  %
- - - - - - - - 
10 	77
11 	85
12 	93 (was 93)
13 	100
14 	108 (was 107)
15 	116 (was 114)
16 	123.1 (was 122)
17 	131 (was 129)
18 	138.5 (was 136)
19 	146.5 (was 144)
20 	153.9 (was 152)
21 	161.6 (was 159)
22 	167
23 	174
24 	182
25 	189
26 	197 
- - - - 

*/
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small}select,input,textarea,button{font:99% arial,helvetica,clean,sans-serif}table{font-size:inherit;font:100%}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%}



/* clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix{
	zoom: 1;
}
 /* IE7 */
*:first-child+html .clearfix {zoom: 1;}


/*--------------------------------------
    structure
--------------------------------------*/

body {
	font-size:12px;
	text-align: center;
	line-height: 1.5;
	font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background:url(../img/bk_line.png);
}

a {
	color:#ff3366;
}

#main a:hover img{
	filter: alpha(style=0, opacity=70);
	-moz-opacity:0.70;
	opacity:0.70;
}

#main a:hover img.webcomicfree,
#main a:hover img.webcomicfree2{
	filter: alpha(style=0, opacity=100);
	-moz-opacity:1.00;
	opacity:1.00;
}

#container {
	width:980px;
	margin:0 auto;
	background:#FFF;
	text-align:left;
}


.imgL {
	float:left;
	margin:0 20px 10px 0;
}

.linkbox {
	cursor:pointer;
}

header#spnav {
	display:none;
}

.btn_enquete {
	float:right;
	margin-top:-3px;
	margin-right:10px;
}

#main img.btn_enquete:hover {
	filter: alpha(style=0, opacity=70);
	-moz-opacity:0.70;
	opacity:0.70;
}

.bntokudas img {
	margin-bottom:5px;
}



/*--------------------------------------
    div#header
--------------------------------------*/

#header {
	width:100%;
	background:#ff01a1;
}
#header #header_container {
	width:980px;
	margin:0 auto;
	position:relative;
	text-align:left;
	padding: 8px 10px;
	box-sizing: border-box;
}
#header #header_container h1{
	width:160px;
}
#header #header_container p{
	color:#fff;
	font-size: 14px;
	font-weight:bold;
	position: absolute;
	top: 28px;
	left: 190px;
}
#sp_header {
	display:none;
}



/*--------------------------------------
    div#header
--------------------------------------*/

#header #header_navi {
	position:absolute;
	top:22px;
	right:340px;
}

#header #header_navi ul li {
	float:left;
	padding:0 15px;
	text-align:center;
}
#header #header_navi ul li:last-child{
	padding-right:0;
}
#header #header_navi ul li a{
	display: inline-block;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	letter-spacing: 1px;
	text-decoration: none;
	transition:0.5s ease;
}
#header #header_navi ul li a span{
	display: block;
	font-size: 11px;
	letter-spacing: 2px;
	margin-bottom: -2px;
	color: #fffb00;
	transition:0.5s ease;
}
#header #header_navi ul li a:hover,
#header #header_navi ul li a:hover span{
	color: #ff97d8;
	opacity:1.0;
}
/* #header #header_navi li > span {
	background:#ffff00;
	height:5px;
	display:block;
} */

#header #header_navi ul li#header_navi_home {
	padding:0 0px;
	width:1px;
}



/*--------------------------------------
    div#menu
--------------------------------------*/

#menu {
	display:none;
}

#menu ul {
	border-left:1px dotted #CCC;
	height:18px;
	margin-top:15px;
	margin-left:20px;
}

#menu ul li {
	float:left;
	border-right:1px dotted #CCC;
	height:18px;
}



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

#main {
	clear:both;
	margin:0 20px;
	padding-top:10px;
	background:#FFF;
}

#main h2 {
	border-bottom:1px solid #EEEEEE;
	margin:0 0 20px 0;
	clear:both;
}

#snsbutton {
	text-align:right;
	float:right;
	height:28px;
}

#snsbutton div {
	display:inline-block;
	margin:0 3px;
	vertical-align:top;
}

.topicpath {
	float:left;
	color:#666;
}

.topicpath strong {
	font-weight:bold;
}



/*--------------------------------------
    div#footer
--------------------------------------*/
#footer{
	background: #6c2104;
	text-align: center;
	clear: both;
}
#footer .pagetop {
	text-align: center;
	padding: 20px 0 10px;
	background: url(../img/bk_line.png) #fff;
}
#footer .pagetop a img{
	width: 63px;
}
#footer .copyright{
	color: #fff;
	font-size: 10px;
	letter-spacing: 1px;
	padding: 15px;
}




/*--------------------------------------
    lightBox
--------------------------------------*/


/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}



}













































































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


/*--------------------------------------
    reset
--------------------------------------*/

/*
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0
*/
html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}legend{color:#000}


/*
Copyright (c) 2011, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 2.9.0

フォントサイズ回りの設定はすべてこのcssで行います。（%指定のみ）
ピクセルサイズと%の関係は以下の通り。
- - - - - - - - 
px  %
- - - - - - - - 
10 	77
11 	85
12 	93 (was 93)
13 	100
14 	108 (was 107)
15 	116 (was 114)
16 	123.1 (was 122)
17 	131 (was 129)
18 	138.5 (was 136)
19 	146.5 (was 144)
20 	153.9 (was 152)
21 	161.6 (was 159)
22 	167
23 	174
24 	182
25 	189
26 	197 
- - - - 

*/
body{font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small}select,input,textarea,button{font:99% arial,helvetica,clean,sans-serif}table{font-size:inherit;font:100%}pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%}



/* clearfix */
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix{
	zoom: 1;
}
 /* IE7 */
*:first-child+html .clearfix {zoom: 1;}


/*--------------------------------------
    structure
--------------------------------------*/

body {
	font-size:12px;
	text-align: center;
	line-height: 1.5;
	font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background:none;
	padding-top:61px;
}

a {
	color:#ff3366;
}

#main a:hover img{
	filter: alpha(style=0, opacity=70);
	-moz-opacity:0.70;
	opacity:0.70;
}

#main a:hover img.webcomicfree,
#main a:hover img.webcomicfree2{
	filter: alpha(style=0, opacity=100);
	-moz-opacity:1.00;
	opacity:1.00;
}

#container {
	width:100%;
	margin:0 auto;
	background:#FFF;
	text-align:left;
}


.imgL {
	float:left;
	margin:0 20px 10px 0;
}

.linkbox {
	cursor:pointer;
}


img {
	max-width:100%;
}

header {
	display:block;
}

h2 img {
	position:relative;
	z-index:0;
}

h2 img.btn_enquete {
	float:right;
	margin-top:-13%;
	margin-bottom:10px;
	z-index:100;
	max-width:25%;
}

.bntokudas img {
	margin-bottom:5px;
}



/*--------------------------------------
    div#header
--------------------------------------*/

#header {
	display:none;
}

#sp_header {
	position:fixed;
	background:#ff02a0;
	top:0;
	width:100%;
	border-bottom:1px solid #ccc;
	z-index:100;
	height:60px;
	overflow:hidden;
}
#sp_header .logo{
	text-align: left;
	margin: 15px 10px 0;
}
#sp_header .logo img {
	width:90px;
}
#sp_header .catch{
	position: absolute;
	top: 24px;
	right: 70px;
	color: #fff;
	font-weight:bold;
}
@media screen and (max-width: 374px){
	#sp_header .catch{
		font-size: 10px;
	}
}


/*--------------------------------------
    div#menu
--------------------------------------*/

#menu {
	display:none;
}



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

#main {
	clear:both;
	margin:0 10px;
	padding-top:10px;
	background:#FFF;
}

#main h2 {
	border-bottom:1px solid #EEEEEE;
	margin:0 0 20px 0;
	clear:both;
}

#snsbutton {
	text-align:center;
}

#snsbutton div {
	display:inline-block;
	margin:0 3px;
	vertical-align:top;
}

.topicpath {
	float:left;
	color:#666;
	display:none;
}

.topicpath strong {
	font-weight:bold;
}


/*--------------------------------------
    div#footer
--------------------------------------*/
#footer{
	background: #6c2104;
	text-align: center;
}
#footer .pagetop {
	text-align: center;
	padding: 20px 0 10px;
	background:#fff;
}
#footer .pagetop a img{
	width: 63px;
}
#footer .copyright{
	color: #fff;
	font-size: 10px;
	letter-spacing: 1px;
	padding: 15px;
}






/*--------------------------------------
    lightBox
--------------------------------------*/


/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CCAttribution-ShareAlike 2.5 Brazil - http://creativecommons.org/licenses/by-sa/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	zoom: 1;
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}


}



.pconly {
	display:block;
}

.sponly {
	display:none;
}


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

.pconly {
	display:none;
}

.sponly {
	display:block;
}

}




#footermenu{
	clear: both;
}