@charset "shift_jis";
@import url(http://fonts.googleapis.com/css?family=Bevan);

/* Original Template: 21-akazukin (http://klee.daa.jp/)
 * Copyright 2014 klee
 * Licensed under CC BY-NC-SA 4.0 (https://creativecommons.org/licenses/by-nc-sa/4.0/deed.ja) */
/* ブラウザスタイルの初期化 */
*{
	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: #de0000;
	}
a:hover,
a:active{
	color: #ef7300;
	}

/* 文書全体 */
body{
	background: #fff;
	}
.index{
	margin-top: 200px;
	}
.frame{
	margin: 50px auto 281px;
	}
/* ヘッダー */
#header{
	background: #fff;
	text-align: center;
	position: fixed;
	width:980px;
	left:50%;
	bottom: 0;
	margin-left:-490px;
	}
.col4{
	height: 271px;
	background-image: url(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: #de0000;
	}
#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;
	}
.novel, .novel a{
	line-height: 1.8em;
	font-size: 14px;
	}

/* ページリンク */
#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 10px 0;
	}
dl.long dd{
	padding-left: 10px;
	}
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: #de0000;
	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;
	}
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;
	}
.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-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{display: none;}
	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;}
	#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;}
	}