@charset "UTF-8";
/* --------------------------------------------
* 全体の基本設定
* -------------------------------------------- */
body {
	font-size: 16px;
	line-height: 150%;
	background: #f4f0eb;
	background-image: url("images/bg.png");
	color: #333;
	font-family: ArialMT, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",Meiryo, "メイリオ",  sans-serif;
}
a { color: #4169e1; 	-webkit-tap-highlight-color: transparent; }
	a:hover { color: #a0b4f0; }
img { border: none; vertical-align: bottom; }
/* --------------------------------------------
* レイアウト
* -------------------------------------------- */
header { height: 80px; line-height: 40px; margin-bottom: 25px; padding: 0 10px; }
#container { width: 980px; margin: 0 auto; margin-bottom: 25px; }
	#container:after { display: block; clear: both; height: 0; visibility: hidden; content: "."; }
#main { float: left; width: 650px; padding: 0 10px 25px; }
#side { float: right; width: 280px; }
#sitemap { width: 960px; margin: 0 auto; margin-bottom: 25px; }
footer { padding: 10px; }
/* --------------------------------------------
* カラー等
* -------------------------------------------- */
/*////////////////////////////// 背景色 ///*/
header, #main article .more a  { background: rgba(51, 166, 184, 0.5); }
#pank li a { background: #f4f0eb; }
#main, #menu, #fs, #sitemap { background: #fff; }
#main article h2, #sitemap h2, #menu h2, #menu h3,
#free h2, #main article .more a:hover { background: rgba(51, 166, 184, 0.8); }
#main article .btn a { background: rgba(204, 89, 71, 0.9); }
	#main article .btn a:hover { background: rgba(204, 89, 71, 0.5); }
footer { background: rgba(51, 51, 51, 0.9); }
/*////////////////////////////// 文字色 ///*/
header, footer, footer a { color: #f4f0eb; }
	footer a:hover { color: rgba(255, 255, 250, 0.5); }
#main article h2, #sitemap h2, #main article .btn a,
#main article .more a, #menu h2, #menu h3, #free h2 { color: #fff; }
#sitemap { color: rgb(51, 166, 184); }
	#main article h3 { color: rgba(51, 166, 184, 0.5); }
#menu ul li a, #pank li a { color: rgb(128, 128, 128); }
	#menu ul li a:hover, #pank li a:hover { color: rgba(128, 128, 128, 0.5); }
/*////////////////////////////// ボーダー ///*/
header {
	border-bottom-style: solid;
	border-bottom-width: 5px;
	border-bottom-color: rgba(51, 166, 184, 0.5);
}
#main, #menu, #fs, #sitemap {
	border-style: solid;
	border-width: 1px;
	border-color: rgba(51, 166, 184, 0.1);
}
#main article hr {
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: rgba(51, 166, 184, 0.1);
}
#menu ul.menu_page li, #menu ul li a.menu_cat  {
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-bottom-color: rgba(51, 166, 184, 0.1);
}
/* --------------------------------------------
* 一括設定
* -------------------------------------------- */
/*////////////////////////////// 角丸 ///*/
#pank li a, #main, #menu, #fs, #main article h2,
#sitemap h2, #main article .btn a, #main article .more a,
#sitemap, #menu h2, #menu h3, #free h2 {
 	border-radius: 5px;
 	-moz-border-radius: 5px;
 }

#main p {
	margin-bottom: 10px;
	padding: 15px 0px;
}
/*////////////////////////////// … ///*/
header h1, #main article h2, #sitemap h2, #menu h2, #menu h3,#free h2, #menu ul li a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* --------------------------------------------
* 細かい設定
* -------------------------------------------- */
/*////////////////////////////// ヘッダー ///*/
/* タイトル */
header h1 { font-size: 200%; }
/* パンくずリスト */
#pank li { float: left; margin-right: 15px; font-size: 80%; }
#pank li a { padding: 5px; text-decoration: none; }
	#pank ul:after { display: block; clear: both; height: 0; visibility: hidden; content: "."; }
/*////////////////////////////// メイン ///*/
/* メイン複数共通設定 */
#main article h2, #sitemap h2, #menu h2, #menu h3, #free h2 {
	height: 35px;
	line-height: 35px;
	margin-left: -15px;
	padding: 0 15px;
	font-size: 130%;
}
#main article h2, #sitemap h2 { width: 60%; }
#menu h2, #menu h3, #free h2 { width: 80%; }
#menu, #fs, #ad { margin-bottom: 25px; }
/* 左 */
#main article { margin-top: 25px; }
#main article h3 { margin: 20px 0; font-size: 115%; }
#main article img { max-width: 100%; }
#main article .btn a {
	display: block;
	width: 150px;
	margin: 10px auto;
	padding: 10px;
	text-decoration: none;
	text-align: center;
}
#main article .more {
	height: 35px;
	line-height: 35px;
	margin: 25px 0 0 565px;
	width: 100px;
	text-align: right;
	}
#main article .more a {
	display: block;
	padding-right: 15px;
	text-decoration: none;
	}
#main article .img-l { float: left; }
#main article .img-r { float: right; }
	#main article .img-lr:after { display: block; clear: both; height: 0; visibility: hidden; content: "."; }
/* 右 */
#side img { max-width: 100%; min-width: 100%; }
#menu { padding: 25px 10px 20px; }
#menu h2 {
	margin-bottom: 10px;
	font-size: 13.5px;
}
#menu h3 {
	margin-bottom: 10px;
	font-size: 13.5px;
}

#menu ul li { line-height: 35px; }
#menu ul li a { display: block; text-decoration: none; }
#menu ul.menu_page { margin-bottom: 15px; }
#menu ul.menu_page li { padding-left: 15px; }
#fs { padding: 25px 10px;  }
#fs h2 {	margin-bottom: 15px; }
/* サイトマップ */
#sitemap { padding: 25px 10px; }
#sitemap ul { line-height: 40px; margin-left: 15px; }
#sitemap ul li { list-style-type: disc; }
#sitemap ul.smap_page li { list-style-type: circle; }
/*////////////////////////////// フッター ///*/
#copy { margin-top: 10px; font-size: 80%; }
/* --------------------------------------------
* タブレット用設定
* -------------------------------------------- */
@media screen and (max-width:768px){
	#pank a { display: inline; }
	#container { width: 700px; margin: 0 auto; }
	#main { float: none; width: 678px; }
	#main article .more { margin-left: 593px; }
	#side { float: none; width: 100%; margin-top: 25px; }
	#menu { width: 678px; }
	#menu h2 { width: 70%; }
	#menu h3 { width: 70%; }
	#menu ul li { line-height: 45px; }
	#free { margin-left: -20px; width: 720px; }
	#fs, #ad { float: left; margin-left: 20px; }
	#ad { width: 220px; }
	#fs { width: 198px; }
		#free:after { display: block; clear: both; height: 0; visibility: hidden; content: "."; }
	#sitemap { width: 680px; }
}
/* --------------------------------------------
* スマホ用設定
* -------------------------------------------- */
@media screen and (max-width:640px){
	#main article h2 {font-size: 13px;}
	#container { width: 300px; }
	#main, #menu { width: 278px;  }
	#main article .more { width:80px;  margin-left: 213px; }
	#side { display: inline; }
	#menu { margin-top: 25px;}
	#free { margin-left: 0; width: 300px; }
	#fs, #ad { float: none; margin-left: 0; }
	#ad { width: 300px; }
	#fs { width: 278px; }
	#sitemap { width: 280px; }
}
/* --------------------------------------------
* 個別設定
* -------------------------------------------- */
/* margin 個別設定 */
.m_10 { margin: 10px; }
.mt_10 { margin-top: 10px; }
.mr_10 { margin-right: 10px; }
.ml_10 { margin-left: 10px; }
.mb_10 { margin-bottom: 10px; }
.m_20 { margin: 20px; }
.mt_20 { margin-top: 20px; }
.mr_20 { margin-right: 20px; }
.ml_20 { margin-left: 20px; }
.mb_20 { margin-bottom: 20px; }
/* 行揃え */
.center { text-align: center; }
.right { text-align: right; }
/* 文字色 */
.gray { color: gray; }
.blue { color: mediumblue; }
.green { color: green; }
.yellow { color: gold; }
.orange { color: darkorange; }
.red { color: crimson; }
.pink { color: lightpink; }
.purple { color: mediumorchid; }
/* 文字のサイズ */
.fsize_50 { font-size: 50%; }
.fsize_60 { font-size: 60%; }
.fsize_70 { font-size: 70%; }
.fsize_80 { font-size: 80%; }
.fsize_90 { font-size: 90%; }
.fsize_110 { font-size: 110%; }
.fsize_120 { font-size: 120%; }
.fsize_130 { font-size: 130%; }
.fsize_140 { font-size: 140%; }
.fsize_150 { font-size: 150%; }

/* ボタンリンク。必要であれば。 */
#adbtn a.btn {
	margin: 30px 0;
	display:block;
	width:250px;
	margin: 15px auto 0;
	margin-bottom: 20px;
	padding: 10px;
	background: #FF5A36;
	color: #f5f5f5;
	font-size: 120%;
	font-weight: bold;
	text-decoration: none;
	border: 3px solid #f5f5f5;
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	box-shadow: 0px 0px 5px #808080;
	-webkit-box-shadow: 0px 0px 5px #808080;
	-moz-box-shadow: 0px 0px 5px #808080;
	text-align:center;
}

/* バナータグ用 */
#banner{
	text-align: center;
}

#banner a{
	display: block;
	color: #0066FF;
	font-size: 16px;
	text-decoration: underline;
	padding: 10px 0 10px 0;
}

/* セクション */
#about {
	margin: 10px 0px 10px 0px;
	padding: 10px;
	border: 3px solid #dddddd;
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	background: #fff;
}	

#about_any {
	margin: 10px 0px 10px 0px;
	padding: 10px;
	border:1px solid #dddddd;
	border-radius: 4px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dddddd));
	background: -moz-linear-gradient(#fff,#dddddd);
	-webkit-box-shadow:3px 3px 3px rgba(000,000,000,0.2);
	-moz-box-shadow:3px 3px 3px rgba(000,000,000,0.2);
}	
#about_any a{
	color: #666;
	text-decoration: none;
}

#about_any p{
        padding: 5px; 
}

/*/ HR/*/
hr {
	margin-bottom: 1em;
	border: 1px dashed #ff8040;
}


div.pankuzu {
	font-size: 60%;
	padding : 5px;
	background-color: #CCCCCC;
}

/* マーカー */
.ylw{
	background-color:#FFE566;
	font-weight:bold;
	padding:2px;
}


/* ボックス */

.nmlbox,.dottbox,.ylwbox,.graybg{
	padding:15px;
	margin-top: 10px;
	margin-bottom: 10px;
	clear:both;
}

.graybg{
	background-color:#EBEBEB;
}

.dottbox{
	border:dotted 1px #666;
}
.nmlbox {
	border: 2px solid #CCCCCC;
}
.ylwbox {
	background-color: #FFFFD2;
	border: 2px solid #CC0000;
}

.txt-img img {
	margin:0 10px 10px;
}