@charset "shift_jis";
@import url(http://fonts.googleapis.com/css?family=Bevan);
/* ブラウザスタイルの初期化 */
*{
	margin: 0;
	padding: 0;
	background-color: transparent;
	color: #6c3524;
	font-size: 13px;
	font-family: Verdana, Arial,"メイリオ","ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック",sans-serif;
	}

/* リンク設定 */
a{
	text-decoration: none;
	color: #e57309;
	}
a:hover,
a:active{
	color: #ef7300;
	}

/* 文書全体 */
body{
	background: #fff;
	}
.index{
	margin-top: 100px;
	}
.frame{
	margin: 50px auto 281px;
	}
	
* html body{
overflow: auto;
height:100%;
} 

/* ヘッダー */
#header{
	background: #fff;
	text-align: center;
	position: fixed;
	width:980px;
	left:50%;
	bottom: 0;
	margin-left:-490px;
	}
.col4{
	height: 260px;
	background-image: url(img/img-top.gif);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	}
/* サイトタイトル */
h1, h1 a:link, h1 a:visited{
	font-family: 'Bevan', cursive;
	margin: 60px 0 10px;/* 説明書きの行数によって60pxを増減 */
	font-weight: normal;
	font-size: xx-large;
	}
/* メニュー */
div#menu{
	position: relative;
	}
#menu ul{
	margin: 0 auto 20px;
	list-style: none;
	position: relative;
	left: 50%;
	float: left;
	}
#menu ul li{
	position: relative;
	left: -50%;
	float: left;
	background: #e57309;
	}
#menu ul span {
	border: 1px dashed #eba1a3;
	border-right: none;
	display: inline-block;
	padding: 10px 20px;
	color: #eee;
	}
#menu ul li.last span{border-right: 1px dashed #eee;}
#menu ul li.first, li.first span{border-radius:20px 0px 0px 20px;padding-left: 3px;}
#menu ul li.last, li.last span{border-radius:0px 20px 20px 0px;padding-right: 3px;}
#menu ul li,#menu ul li a{
    padding: 3px 0;
	}
#menu ul li a:hover span, a:active span{
	color: #ffd600;
	}

#caption{
	margin: 0 auto;
	max-width: 500px;
	}

/* コンテンツ */
.content{
	line-height: 1.5em;
	padding: 20px;
	}
.illust{
	line-height: 1.5em;
	padding: 10px;
	}
.counter{
	line-height: 1.5em;
	padding: 0px 20px;
	}


.mainmenu{
	line-height: 1.5em;
	padding: 20px 5px;
	}
.novel, .novel a{
	line-height: 1.8em;
	font-size: 14px;
	}

.spe, .spe a{
	line-height: 1.5em;
	font-size: 14px;
	}

ul.tdftad {
	position: fixed;
	width:70%;
    max-width:800px;
	left:0;
	bottom: 0;
}


.mb1{
   margin-bottom: 1em;
    }
.mb2{
   margin-bottom: 2em;
    }
.mb3{
   margin-bottom: 3em;
    }



/* ページリンク */
#footer{
	text-align: center;
	padding: 0 10px 20px;
	}
#footer li{
	padding: 0 50px;
	display: inline;
	}

/* 展示リスト */
ul.text{
	list-style: none;
	}
.text li a{
	margin: 0 20px 0; 
	}
dl.long dd{
	padding-left: 20px;
	}

dl.hist dt {
	float: left;
	width: 6em;
	height:auto;
	}
dl.hist dd {
	margin: 0px 0px 15px 6em;
	padding-left: 1em;
	}

dl.d dt {
	float: left;
	width: 9em;
	height:auto;
	}
dl.d dd {
	margin: 0px 0px 5px 9em;
	padding-left: 1em;
	}
ul.short li{
	list-style: none;
	display: inline;
	border-right: 1px dashed;
	padding-right: 7px;
	margin-right: 5px;
	}
ul.short li.last{
	border: none;
	}

/* リンクページ */
.bkm{
	background: url(img-bkm.png) 90% 10% no-repeat;
	}
dl.link{
	clear: left;
	margin: 5px 0;
	}
dl.link.last{
	margin: 5px 0 20px;
	}
dl.link dt{
	float: left;
	margin: 0 10px 0 0;
	}
dl.link dd{
	margin-left: 210px;
	padding: 0 0 0 10px;
	border-left: 1px dashed;
	}
dl.link:after{
	visibility: hidden; display: block;font-size: 0;content: " ";clear: both;height: 0;
	}
ul.link{margin: 0 0 10px;}
ul.link li{
	display: inline;
	padding-right: 10px;
	}

/* メールフォーム */
textarea{
	width: 60%;
	padding: 4px;
	overflow:auto;
	}
input{
	padding: 3px 5px;
	}
input.btn{
	margin-top: 5px;
	}
textarea,input{
	border: 1px solid;
	}

/* 見出しなど */
h2{
	font-weight: normal;
	font-size: 14px;
	margin: 0 auto 12px;
	}
h2:first-letter{
	background: #e57309;
	color: #eee;
	font-size: 16px;
	padding: 3px 5px;
	margin-right: 2px;
	}
h3{
	margin: 3px 0;
	}
strong{}
em{
	font-style: normal;
	border-bottom: 2px dashed ;
	}
.box{
	border: 2px dashed;
	border-radius:20px;
	padding: 10px;
	}

.box2{
    float:left;
	border: 2px dashed;
	border-radius:20px;
	padding: 10px;
	}


hr{
	border: none;
	border-bottom: 1px dashed;
	margin: 10px 0;
	}

/* 著作権表示 */
#copy{
	width: 99%;
	margin: 10px 0;
	text-align: center;
	font-size: 9pt;
	}
#copy,#copy a{
	color: #6c3524;
	font-size: 9pt;
	text-decoration: none;
	}

/* 骨組み */

#container {
	position: relative;
	margin: 0 auto;
	padding: 0 0 0 1%;
	max-width: 880px;
	}

#screen{
	position:absolute;
    top: 0%;
    left: 0%;
    width:100%;
    height:100%;
    overflow-x:auto;
    overflow-y:hidden;
}

#sideber {
    /*position: fixed !important;*/
    position: absolute;
    top: 0;
    left: 0;
    height:100%;
    width:280px;
    background-color : #eee ;
    overflow: auto; 
	margin: 0 auto;
	padding: 0 0 0 1%;
}

#mainarea {
    position: absolute;
    overflow:auto;
	height:100%;
    width:calc(90% - 280px);
	margin-left: 280px;
	padding: 0;}

img.picwaku {max-width: 60%;
	max-height:85%;}


.onerow {
	clear: both;
	padding: 0 10px;
	}
.onerow:after, #menu:after{
	visibility: hidden; display: block;font-size: 0;content: " ";clear: both;height: 0;
	}

.col3, .col8, .col9, .col12 {
	float: left;
	margin: 0 1% 0 0;
}
.col4{
	float: right;
	margin: 0 1% 0 0;
	}
.col3.last, .col4.last, .col8.last, .col3.last, .col12 {
	margin: 0;
}

.col3 {
	width: 22.5%;
	background-image: url(img/img-index.gif);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height: 260px;
	}
	

.col4 { width: 31%; }
.col8 { width: 65%; }
.col9 { width: 73.5%; }
.col12 { width: 99%; margin: 0; }

/* 小さい画面での表示 */
@media all and (max-width: 768px) {
	.onerow {
	padding: 0 10px;
	}
	.col3, .col4, .col8, .col9, #header {
	float: none;
	width: 99%;
	}
	
	.index, .frame, {margin: 20px auto;}
	.col3{	background-image: url(img/img-index.gif);
	background-repeat: no-repeat;
	background-position: 50% 50%;
	min-height: 130px;}
	h1, h1 a:link, h1 a:visited{margin: 0 0 10px;font-size: x-large;}
	#caption{width: 95%;margin: 0 auto 20px;}
	.content{padding: 20px 3px;}
	.counter{padding: 0px 3px;}
	#footer li{padding: 0 30px;}
	#header{position: relative;top: 0;left: 0;margin-left: 0;}
	#menu ul span {padding: 10px 8px;}
	#menu ul{left: 0;}#menu ul li{left: 0;}
	#menu ul,#menu ul li{float: none;}
	#menu ul li{display: inline-block;margin-left: -5px;}

	#sideber {width:100%;}
	#mainarea {
        position: absolute;
        padding:0;
        margin:0%;
        top: 0%;
        left: 0%;
        width:100%;
        height:100%;
        z-index:10;
        background-color:rgba(255,255,255,0.8);
        overflow:auto;
    }
    #mainarea[data-popup="false"] { display: none;}
	.onerow {
	clear: both;
	padding: 0 5px;}
	.mainmenu{
	line-height: 1.5em;
	padding: 20px 0px;}
    img.picwaku {
        margin:3%;
        max-width: 94%;
        max-height:unset;
        height: auto;
    }
.illust {
		text-align: center;
	}
	#piccomment {
        margin:0 3% 3%;
	text-align: left;
}
    #container{
	    position:absolute;
        top: 0%;
        left: 0%;
        width:100%;
        height:100%;
        overflow:auto;
    }
    ul.tdftad {
	    position:absolute;
	    width:100%;
        max-width:unset;
	    left:0;
	    top:90%;
    }
}