@charset "UTF-8";

/*
Hardboiled CSS3 Media Queries by Andy Clarke:
http://stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries/

Author: Andy Clarke
Web site: http://stuffandnonsense.co.uk
Twitter: http://twitter.com/malarkey

Hardboiled Web Design
Web site: http://hardboiledwebdesign.com
Twitter: http://twitter.com/itshardboiled

Version date : 30th September 2010
Version: 0.9

License: Creative Commons CC Zero Declaration. No Rights Reserved.

*/

/* reset */
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,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
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;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}legend{color:#000;}

/* base */
body {
	font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
	background-size: 100%;
	-webkit-text-size-adjust: none;
background:#FFF;
color: #333;
	}
a{ text-decoration:none;}
section{ margin-bottom:10px; margin-top:10px; clear:both;}


/*============================================================================
	PCouter
==============================================================================*/
#pcBox{
	width: 980px;
	margin: 0 auto;
	padding: 5px 0;
background-color: #FFF;
}

/*============================================================================
	header
==============================================================================*/
header {
	width: 100%;
	text-align: center;
	padding: 3px 0;
background-color: #006699;
}

/* logo */
header h1.logo{}
header h1.logo a{
	font-size: 110%;
color: #FFF;
}

/*============================================================================
	メイン
==============================================================================*/

h2{
	width:95%;
	font-size:100%;
color:#1256a5;
border: 1px #BBB solid;
background-color: #FFF;
	padding:5px;
	font-weight:normal;
	border-radius: 5px;
	margin:15px auto;
}

h3 {
	width:95%;
	font-size:100%;
	padding:5px;
	font-weight:normal;
	margin:15px auto;
}

select{font-size:100%;}

p.textFree{
	width:95%;
	margin:5px auto 10px auto;
	font-size: 90%;
	line-height:140%;
}
p.textRight{
	width:95%;
	text-align: right;
	margin:5px auto 10px auto;
	font-size: 90%;
	line-height:140%;
}

.bnFree{
	margin:5px auto;
	width: 100%;
	text-align: center;
}

/*============================================================================
	ナビゲーション
==============================================================================*/

.naviBox{
	width: 90%;
	margin: 10px auto;
}
.naviOne{
	width: 31%;
	padding: 8px;
	float: left;
	text-align: center;
	background-color: #f7f7f7;
	color: #888;
	border: 1px #EEE solid;
}
.naviNow{
	color: #333;
	background-color: #ffeeee;
}

/*============================================================================
	フォーム使用項目
==============================================================================*/

.hisu{
	float: right;
	display: block;
	text-align: center;
	width: 40px;
	padding: 2px;
	font-size: 80%;
	background-color: #FF0000;
	color: #FFF;
	border-radius: 3px;
	border: 1px solid #CC0000;
}
.nini{
	float: right;
	display: block;
	text-align: center;
	width: 40px;
	padding: 2px;
	font-size: 80%;
	background-color: #0099cc;
	color: #FFF;
	border-radius: 3px;
	border: 1px solid #006666;
}

.ok{
	float: right;
	display: block;
	text-align: center;
	width: 20px;
	padding: 5px;
	font-size: 80%;
	color: #333;
	font-weight: bold;
	text-shadow: 0px 1px 0px rgba(255,255,255,0.8);
	border-radius: 15px;
	border: 1px solid #517474;
background: #feffff; /* Old browsers */
background: -moz-linear-gradient(top, #feffff 0%, #ddf1f9 35%, #a0d8ef 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#feffff), color-stop(35%,#ddf1f9), color-stop(100%,#a0d8ef)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #feffff 0%,#ddf1f9 35%,#a0d8ef 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #feffff 0%,#ddf1f9 35%,#a0d8ef 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #feffff 0%,#ddf1f9 35%,#a0d8ef 100%); /* IE10+ */
background: linear-gradient(to bottom, #feffff 0%,#ddf1f9 35%,#a0d8ef 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#a0d8ef',GradientType=0 ); /* IE6-9 */
}
.ng{
	float: right;
	display: block;
	text-align: center;
	width: 20px;
	padding: 5px;
	font-size: 80%;
	color: #FFF;
	text-shadow: 0px -1px 0px rgba(0,0,0,0.8);
	border-radius: 15px;
	border: 1px solid #990000;
background: #ff3019; /* Old browsers */
background: -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3019), color-stop(100%,#cf0404)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff3019 0%,#cf0404 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff3019 0%,#cf0404 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
}

input {
padding: 2px;
margin: 0 3px;
}
input:focus {
background-color: #ccffff;
border-color: aqua;
}
.formBox:focus {
background-color: #ccffff;
border-color: aqua;
}

.come{
	display: block;
	padding: 2px;
	font-size: 80%;
	color: #666;
}
.err{
	display: block;
	padding: 2px;
	font-size: 80%;
	color: #FF0000;
}

.listTable table {
	width: 90%;
	margin: 10px auto;
	border-collapse: separate;
	border-spacing: 0px;
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
}

.listTable th, .listTable td {
	padding: 8px 5px;

}

.listTable th {
	text-align: left;
	width: 200px;
	vertical-align: top;
	color: #444;
	font-weight: normal;
background-color: #e0edf1;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.listTable td{
	text-align: left;
	vertical-align: top;
background-color: #fafafa;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.listTable td a{
	color: #0066ff;
	text-decoration: underline;
}

.listTable td.errRed{
background-color: #ffeeee;
}


/*============================================================================
	footer
==============================================================================*/

/* 矢印つきリスト2列 */
.list20 ul{
	margin-top: 15px;
	border-bottom:1px solid #000033;}
.list20 ul li{
	background-color:#006699;
	border-top: 1px solid #000033;
	border-left: 1px solid #000033;
	margin: 0px;
	width: 49.9%;
	float: left;
	margin: 0px;}
.list20 ul li a{
	background: url(/image/list_mark20.png) no-repeat 1% 50%;
	color: #FFF;
	font-size: 70%;
	display: block;
	margin: 0px;
	overflow: hidden;
	padding: 8px 4px 8px 15px;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-decoration: none;
	font-weight:bold;
}
.list20 ul li a:hover {
	background-color:#0099cc;
}

/* TOPへボタン */
a.btn1{
	width:60%;
	font-size: 70%;
	text-align:center;
	display: block;
	padding: 2px;
	margin: 5px auto;
	color:#999;
	text-decoration: none;
	border: 1px solid #999;
}

footer{
background-color: #f0eded;
	border-top: #FFF 1px solid;
	padding: 10px;
	clear: both;
}
footer p.copyright {
	text-align: center;
	font-size: 90%;
	color: #333;
	text-shadow: 0px 1px 0px #fff;
}

/*============================================================================
	ボタン
==============================================================================*/

.btnNormal{
	width:90%;
	clear: both;
	text-align:center;
	padding: 15px;
	margin: 5px auto;
	color:#333;
	display: block;
	text-decoration: none;
	text-shadow: 0px 1px 0px rgba(255,255,255,0.8);
	border-radius: 3px;
	border: 1px solid #8cb44e;
	font-size: 110%;
	font-weight:bold;
	line-height: 100%;
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */
	}
.btnNormal:hover{
background: #e6f0a3; /* Old browsers */
background: -moz-linear-gradient(top, #e6f0a3 0%, #d2e638 50%, #c3d825 51%, #dbf043 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e6f0a3), color-stop(50%,#d2e638), color-stop(51%,#c3d825), color-stop(100%,#dbf043)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* IE10+ */
background: linear-gradient(to bottom, #e6f0a3 0%,#d2e638 50%,#c3d825 51%,#dbf043 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6f0a3', endColorstr='#dbf043',GradientType=0 ); /* IE6-9 */
	}


/*============================================================================
	common
==============================================================================*/

/* 画像右
---------------------------------*/
.imgR {
	float: right;
	padding: 0 0 10px 10px;
}

/* 画像中央
---------------------------------*/
.imgC {
	display: block;
	margin: auto;
}

/* 画像左
---------------------------------*/
.imgL {
	float: left;
	padding: 0 15px 10px 0;
}

/* clearfix
---------------------------------*/
.clear {clear: both;}

.clearfix:after {
	content: "."; display: block; visibility: hidden; height: 0.1px; font-size: 0.1em; line-height: 0; clear: both;
}

/*============================================================================
	テキスト サイズ
==============================================================================*/

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

 10px = 77%     11px = 85%     12px = 93%     13px = 100%
 14px = 108%    15px = 116%    16px = 123.1%  17px = 131%
 18px = 138.5%  19px = 146.5%  20px = 153.9%? 21px = 161.6%
 22px = 167%    23px = 174%    24px = 182%    25px = 189%
 26px = 197%

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

.std10 { font-size: 77%; }
.std11 { font-size: 85%; }
.std12 { font-size: 93%; }
.std13 { font-size: 100%; }
.std14 { font-size: 108%; }
.std15 { font-size: 116%; }
.std16 { font-size: 123.1%; }
.std17 { font-size: 131%; }
.std18 { font-size: 138.5%; }
.std19 { font-size: 146.5%; }
.std20 { font-size: 153.9%; }
.std21 { font-size: 161.6%; }
.std22 { font-size: 167%; }
.std23 { font-size: 174%; }
.std24 { font-size: 182%; }
.std25 { font-size: 189%; }
.std26 { font-size: 197%; }


/*============================================================================
	テキスト カラー
==============================================================================*/

.white { color: #FFFFFF; }
.black { color: #000000; }
.gray { color: #666666; }
.lgray { color: #999999; }
.red { color: #990000; }
.pink { color: #FF3366; }
.green { color: #006600; }
.orange { color: #FF6600; }
.blue { color: #0066CC; }
.lblue { color: #0099FF; }
.yellow { color: #FFFF00; }
.gold { color: #996633; }