@charset "utf-8";

*{margin: 0px;padding: 0px;}
ol,ul{list-style: none;}
fieldset,img{border: none;}
q::before,q:after{content: "";}
br{letter-spacing: 0;}
header,footer,nav,main,section,article,aside{display: block;}

/*********************テキスト寄せ*********************/

.center{text-align: center;}
.left{text-align: left;}
.right{text-align: right;}

/*********************フォント、フォーム、画像*********************/

p+p{
	margin-top: 1.4em;
}

em{
	font-weight: normal;
	font-style: normal;
	background: linear-gradient(transparent 60%, #ffccdd 60%);
	color: #000000;}

small{
	font-size: 80%;
	line-height: 1.4em;}

.middle{
	font-size: 90%;
	line-height: 1.5em;
	letter-spacing: 0px;}

.red{
	color: #cc0000;
	font-weight: bold;}

input, textarea, select{
	background: #ffffff;
	border: 1px solid #cccccc;
	color: #333333;
	margin: 5px 5px 5px 5px;
	padding: 2px 4px;
	font-size: 100%;}

input[type="submit"]{
	background: #000000;
	border: 1px solid #990000;
	color: #eeeeee;
	font-size: 90%;
	padding: 3px 10px;
}

input[type="submit"]:hover{
	cursor: pointer;
	border: 1px solid #3333cc;
}

img{
	vertical-align: middle;
}

summary:hover{
	cursor : pointer;
	color: #990000;}

/*********************ボディ、リンク*********************/
	
body{
	color: #333333;
	font-size: 100%;
	line-height: 1.7em;
	font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', 'メイリオ', meiryo, sans-serif;
	background: url(img/body.png) #f3f3f3;
}

a:link, a:visited{
	color: #333333;
	text-decoration: none;
}

a:hover, a:active{
	color: #990000;
	text-decoration: none;
	position : relative;
	top : 1pt;
	left : 1pt;
}

/*********************本体共通レイアウト*********************/

#container{
	margin: 0px auto;
	padding: 0px;
	background: url(img/container2.png) repeat-x left top, url(img/container.png) #dddddd;
}

#table{
	max-width: 800px;
	text-align: left;
	margin: 0px auto;
	padding: 50px 0px 50px 0px;
	overflow: hidden;
} 


/*********************インデックス*********************/


#index header{
	text-align: center;
	margin: 0px 0px 40px 0px;
}

#index #description{
	font-size: 80%;
	line-height: 1.5em;
	padding: 20px 0px 0px 0px;
}

#index #headerflex{
	display: flex;
	justify-content: space-between;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	margin: 40px 0px 20px 0px;
}

#index nav{
	width: 100%;
	margin: 0px 30px 0px 0px;
}

#index nav ul li{
	margin: 0px 0px 20px 0px;
	background: #dddddd;
	color: #ffffff;
	line-height: 3em;
}

#index nav ul li a{
	display: block;
	min-width: 200px;
}

#index nav ul li a:link, #index nav ul li a:visited{
	background: #000000;
	color: #eeeeee;
}

#index nav ul li a:hover, #index nav ul li a:active{
	background: linear-gradient(135deg, #990000, #3333cc);
	color: #ffffff;
}

#index #update{
	height: 100px;
	width: 100%;
	padding: 10px;
	font-size: 90%;
	line-height: 1.5em;
	overflow-y: scroll;
	transform: translateZ(0);
	text-align: left;
	background: #ffffff;
	color: #666666;
}

#index #update ul li{
	padding: 3px 0px;
}

#index #update ul li:not(:last-child){
	border-bottom: 1px dashed #dddddd;
}

#index main h2{
	font-size: 100%;
	font-weight: normal;
	color: #eeeeee;
	background: #000000;
	line-height: 2em;
	text-align: center;
}

/*----------ピックアップスペース----------*/
#index #pickup{
	margin-bottom: 0px;
}
#index #pickup details div{
	text-align: left;
	margin:auto;
	border: 1px solid #cc0000;
	padding: 15px;
	margin-top: 10px;
	border-radius: 10px;
	font-size:95%;
	line-height: 1.5em;
	background: #ffffff;

}

/*------------------------------------------*/

#index #searchflex{
	display: flex;
	justify-content: space-between;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
}

#index #searchflex section{
	text-align: left;
	width: 100%;
	margin: 15px 0px 10px 0px;
}

#index #searchflex section h3{
	font-size: 100%;
	color: #000000;
	background: url(img/h3index.png) no-repeat left;
	padding: 5px 0px 0px 23px;
	text-shadow: #ffffff 1px 1px 0px, #ffffff -1px 1px 0px, #ffffff 1px -1px 0px, #ffffff -1px -1px 0px;	/*縁取り*/
	filter:dropshadow(color=#ffffff,offX= 0,offY=-1)	/*IE縁取り*/
	dropshadow(color=#ffffff,offX= 1,offY= 0)			/*IE縁取り*/
	dropshadow(color=#ffffff,offX= 0,offY= 1)			/*IE縁取り*/
	dropshadow(color=#ffffff,offX=-1,offY= 0);		/*IE縁取り*/ 
}

#index #searchflex form, #index #searchflex ul{
	margin: 0px 0px 0px 8px;
	border-left: 2px dashed #cccccc;
	padding: 5px 8px;
}

#searchflex section#free{width:35%;}
#searchflex section#category{width:40%;}
#searchflex section#status{width:25%;}

#searchflex section#category ul{
	display: flex;
	flex-wrap: wrap;
	-ms-flex-wrap: wrap;
}

#searchflex section#category ul li{
	width: 40%;
}

/*********************インデックスじゃないページ*********************/

#noindex header{
	background: url(img/header.png) no-repeat left bottom #000000;
	text-align: right;
	padding: 5px 10px;
	display: flex;
	justify-content: space-between;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	align-items: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	color: #666666;
}

#noindex header a:link, #noindex header a:visited{
	color: #eeeeee;
	text-shadow: #990000 1px 1px 0px, #990000 -1px 1px 0px, #990000 1px -1px 0px, #990000 -1px -1px 0px;	/*縁取り*/
	filter: dropshadow(color=#990000,offX= 0,offY=-1)	/*IE縁取り*/
	dropshadow(color=#990000,offX= 1,offY= 0)			/*IE縁取り*/
	dropshadow(color=#990000,offX= 0,offY= 1)			/*IE縁取り*/
	dropshadow(color=#990000,offX=-1,offY= 0);		/*IE縁取り*/ 
}

#noindex header a:hover, #noindex header a:active{
	text-shadow: #3333cc 1px 1px 0px, #3333cc -1px 1px 0px, #3333cc 1px -1px 0px, #3333cc -1px -1px 0px;	/*縁取り*/
	filter: dropshadow(color=#3333cc,offX= 0,offY=-1)	/*IE縁取り*/
	dropshadow(color=#3333cc,offX= 1,offY= 0)			/*IE縁取り*/
	dropshadow(color=#3333cc,offX= 0,offY= 1)			/*IE縁取り*/
	dropshadow(color=#3333cc,offX=-1,offY= 0);		/*IE縁取り*/ 
}

#noindex header nav ul li{
	display: inline-block;
	line-height: 1;
	padding: 0px 10px;
	border-left: 1px dashed #cccccc;
}

#noindex main section{
	margin: 20px 15px;
}

#noindex main  h2{
	font-size: 120%;
	margin: 60px -15px 30px -15px;
	background: #000000;
	padding: 4px 7px;
	border-left: 5px solid #990000;
	border-right: 5px solid #3333cc;
	color: #eeeeee;
	letter-spacing: 1px;
}

#noindex main section:first-of-type h2{
	margin-top: 0px;
}

#noindex main section h3{
	font-size: 110%;
	color: #000000;
	text-shadow: #ffffff 1px 1px 0px, #ffffff -1px 1px 0px, #ffffff 1px -1px 0px, #ffffff -1px -1px 0px;	/*縁取り*/
	filter:dropshadow(color=#ffffff,offX= 0,offY=-1)	/*IE縁取り*/
	dropshadow(color=#ffffff,offX= 1,offY= 0)			/*IE縁取り*/
	dropshadow(color=#ffffff,offX= 0,offY= 1)			/*IE縁取り*/
	dropshadow(color=#ffffff,offX=-1,offY= 0);		/*IE縁取り*/ 
	margin: 25px 0px 15px 0px;
	border-bottom: 2px dashed #000000;
}

#noindex main section ul li{
	margin: 0px 0px 8px 0px;
	background: url(img/list.png) no-repeat left 0.2em;
	padding-left: 23px;
}

/*------------------------------------------about*/

#noindex main.about section dl.link{
	line-height: 1.6em;
}

#noindex main.about section dl.link dt{
	margin-top: 5px;
}

#noindex main.about section dl.link dd{
	margin-left: 30px;
}

#noindex main.about section dl.link dd img{
	vertical-align: bottom;
	margin: 5px 0px;
}

#noindex main.about section form{
	margin: 10px 0px;
}

#noindex main.about section form textarea{
	width: 90%;
	max-width: 400px;
	height: 60px;
	margin: 0px;
}

/*------------------------------------------regist*/

#noindex main.regist section ul.require{
	margin: 10px 0px;
	padding: 10px 0px;
}

#noindex main.regist h3.caution{
	border: none;
	color: #990000;
	margin-bottom: 0px;
}

#noindex main.regist p.caution{
	border: 2px solid #990000;
	padding: 15px;
	background: rgba(252,252,252,0.5);
	border-radius: 5px;
}

#noindex main.regist div.go{
	margin: 50px 0px;
	text-align: center;
	font-size: 130%;
}

/*------------------------------------------info*/

#noindex main.info{
	width: 100%;
	padding-top: 50px;
}

#noindex main.info h2{
	display: none;
}

#noindex main.info article{
	max-width: 700px;
	padding: 0px 0px 0px 0px;
	margin: 0px auto 80px auto;
}

#noindex main.info article h3{
	font-size: 180%;
	font-family: Georgia;
	text-align: center;
	text-shadow: #ffffff 1px 1px 0px, #ffffff -1px 1px 0px, #ffffff 1px -1px 0px, #ffffff -1px -1px 0px;	/*縁取り*/
	border-bottom: 2px dashed #000000;
}


#noindex main.info article div.info_text{
	margin: 30px auto 0px auto;
	width: 95%;
}


/*********************フッター*********************/

footer{
	background: url(img/body.png) #000000;
	color: #999999;
	line-height: 1.5em;
	text-align: center;
	padding: 30px 0px;
}

footer a:link, footer a:visited{
	color: #999999;
}

/*--------------------------------------トップに戻るボタン*/

footer #pagetop{
	position: fixed;
	right: 10px;
	bottom: 100px;
	background: #000000;
	opacity: 0.6;
}

footer #pagetop a{
	padding: 15px 20px;
	position: relative;
	display: block;
}

/*********************レスポンシブ*********************/

@media screen and ( max-width:599px )
{
	img{
		max-width: 100%;
		height: auto;
		width : auto;}
	#table{
		padding: 20px 0px;}
	#index #headerflex{
		display: block;
		margin-top: 30px;}
	#index #headerflex nav{
		margin: 0px auto 30px auto;
		width: 80%;}
	#index #headerflex #update{
		margin: 0px auto 0px auto;
		width: 80%;}
	#index #pickup{
		margin-bottom: 40px;
		padding: 0px 10px;}
	#index #searchflex{
		display: block;}
	#index #searchflex section#free, #index #searchflex section#category, #index #searchflex section#status{
		width:100%;}
	#index #searchflex section:not(:last-child){
		border-bottom: dashed 2px #333333;
		padding-bottom: 10px;}
	#index #searchflex section h3{
		margin-left: 5px;}
	#index #searchflex form, #index #searchflex ul{
		margin: 0px;
		border: none;
		padding: 5px 10px;}
	#noindex header{
		display: none;}
	#noindex main section{
		margin: 0px auto;
		width: 95%;}
	#noindex main  h2{
		margin: 60px 0px 20px 0px;
		padding: 3px;
		text-align: center;}
	#noindex main section h2:first-letter{
		font-size: 100%;
		color: #eeeeee;}
	#noindex main section h3{
		font-size: 100%;
		border-bottom: 1px dashed #000000;}
	#noindex main.about section img{
		margin-bottom: 5px;}
	#noindex main.about section form{
		width: 90%;}
	#noindex #infoflex{
		display: block;
		padding-top: 20px;}
	#noindex #infoflex main.info h2{
		display: block;
		margin-top: 0px;}
	#noindex #infoflex main.info article h3{
		font-size: 150%;}
	#noindex #infoflex aside.info{
		width: 100%;
		margin: 40px 0px 0px 0px;}
	#noindex #infoflex aside.info ul{
		margin: 0px;}
	#noindex #infoflex aside.info ul li{
		display: inline-block;
		font-size: 90%;
		width: 45%;
		vertical-align: top;}
	#noindex #infoflex aside.info ul li a img{
		width: 50px;}
}

/*********************Lunalys*********************/

#lunalys{
	position:absolute;visibility:hidden;
}