@charset "shift_jis";

/*-----------------------------------すべての要素を初期化*/
/*  
Copyright (c) 2006, Yahoo! Inc. All rights reserved.  
Code licensed under the BSD License:  
http://developer.yahoo.net/yui/license.txt  
version: 0.10.0  
*/  
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}  
html { height: 100%; margin-bottom: 1px; }
html {overflow-y:scroll;}
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;}  
ol,ul {list-style:none;}  
caption {text-align:left;}
input,textarea,select { font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; }
input,textarea,select { *font-size: 100%; }
input { _margin: -1px 0; }  
sup,sub { vertical-align: baseline; position: relative; }
sup { top: -4px }
sub { top: 4px }
th { vertical-align: top;s font-weight: normal; text-align: left; }
td { vertical-align: top; }
h1,h2,h3,h4,h5,h6{font-size:100%; font-weight:normal;}
q:before,q:after{content:'';}
hr { display: none;}
.clearBoth { clear: both; }
/*--------------------
イメージオーバー指マーク
--------------------*/
.imgover { cursor:pointer; }

/*--------------------
イメージの下の隙間をなくす
--------------------*/
img { vertical-align:bottom; }

/*--------------------
基本
--------------------*/
body{ font-family: "Verdana", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS P Gothic", sans-serif; color: #333; font-size: 15px;}
table { font-size:inherit; }
a { outline : 0 ;}
a { color: #333; text-decoration: underline; padding-bottom: 2px; }
a:hover {text-decoration: none; color: #8cc63f;}
li,p,dl,dd { line-height: 1.6; }
td,th,h1,h2,h3,h4{ line-height: 1.5; }
strong,em { font-weight: bold; }
address { line-height: 1.5; }

/*--------------------
マージン
--------------------*/
.marT5 { margin-top: 5px; }
.marT10 { margin-top: 10px; }
.marT15 { margin-top: 15px; }
.marT20 { margin-top: 20px; }
.marT30 { margin-top: 30px; }
.marB10 { margin-bottom: 10px; }
.marB20 { margin-bottom: 20px; }
.marR10 { margin-right: 10px; }
.marR20 { margin-right: 20px; }
.marL5 { margin-left: 5px; }
.marL10 { margin-left: 10px; }

.marL20 { margin-left: 20px; }
/*--------------------
線
--------------------*/
.border01 { padding-top: 20px; margin-top: 20px; border-top: 2px dotted #9e9e9e; }

/*--------------------
テキスト位置
--------------------*/
.fRight { float: right;}
.fLeft { float: left;}
.txtLeft { text-align: left; }
.txtRight { text-align: right; }
.center { text-align: center; }
.middle {vertical-align: middle; }
.bottom {vertical-align: bottom; }
.attention { text-indent: -1em; margin-left: 1em; }

/*--------------------
リスト
--------------------*/
.list01 li{	list-style-position: outside; list-style-type: decimal; margin: 0 0 5px 25px; line-height:1.5; }
.list02 li{	list-style-position: outside; list-style-type: disc; margin: 5px 0 0 15px; line-height:1.4; }
.listcaution li:before { content: "※"; color: #ff0000; padding-right: 10px }
/*--------------------
リンク
--------------------*/
.link { text-align: right;}
.link img{ margin-right: 10px;}
.link01 a { color: #333; text-align:right; }
.link01 a { background:url(../images/arrow.png) no-repeat right; text-decoration: none; padding-right: 20px; font-weight: bold; font-size: 15px; }
.link01 a:hover { text-decoration: underline; padding-right: 20px; }
/*--------------------

フォント設定
--------------------*/
.normal { color: #333; font-weight: normal; font-size:13px; }
.small { font-size: 13px; }
.large { font-size: 16px;  }
.xlarge { font-size: 18px;  }
.color01 { color:#ff0000; }
.color02 { color: #849C23; }

/*--------------------
外枠
--------------------*/
#wrapper {
	max-width: 900px;
	padding: 0 2%;
	margin: 0 auto;
	position: relative;
}
/*--------------------
ヘッダー設定
--------------------*/
header { 
	padding: 0 2%;
	position: relartive;
}
#logo {position: absolute; top: 20px; right: 2%;  }
h1 {font-size: 12px; margin: 10px 0;}
header h2 { font-size: 30px; }
@media screen and (max-width:767px){
	#logo {position: relative; top: 0px; right: 0px;  }
	header h2 { font-size: 25px; margin-top: 10px; }
}

/*--------------------
メインナビ
--------------------*/
#nav {
	font-size: 17px;
	padding: 10px;
	margin: 20px 0;
	background:#8cc63f;
	filter:alpha(opacity=80);
	opacity:0.8;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	behavior: url(common/css/PIE.htc);
}
#nav li {float: left;text-align: center; padding: 0 15px;}
#nav li a { color: #333; text-decoration: none; padding-bottom: 2px; font-weight: bold; }
#nav li a:hover {text-decoration: none; color: #fff;}
#nav li.hit a { color: #fff;}

/*--------------------
メイン
--------------------*/
.subtitle { font-weight: bold; font-size: 18px; margin: 15px 0; border-bottom: 1px solid #666; }
.lead { font-weight: bold; font-size: 18px;}
.image { float: left; margin: 0 20px 10px 0; }
.image02 { float: left; width: 40%; }
.text { float: right; width: 58%;  }
@media screen and (max-width: 479px) {
.image { float: none; margin: 0 20px 10px 0; }
.image02 { float: none; width: 100%; margin-bottom: 10px; }
.text { float: none; width: 100%; }
}

.article { margin-bottom: 30px; }
#melit { background:url(../images/melit.jpg) no-repeat left top; padding: 0 0 0 100px; }
#melit h3 { color: #8cc63f;font-weight: bold; font-size: 18px; }
#demelit { background:url(../images/demelit.jpg) no-repeat left top; padding: 0 0 0 100px; margin-top: 20px;}
#demelit h3 { color: #ff0000;font-weight: bold; font-size: 18px; }
.flow { margin-bottom: 30px; }
.flow h3 {
	float: left;
	font-size: 25px;
	padding: 10px;
	color: #fff;
	font-weight: bold;
	text-align:center;
	width: 280px;
	background:#8cc63f;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	behavior: url(common/css/PIE.htc);
}
.flow .text { float: right; width: 570px; }
.box { border: 1px solid #999; padding: 10px 10px 0 10px; }

#hourtable { width: 100%; margin: 20px 0 10px 0; border-top: 1px solid #999; border-right: 1px solid #999;}
#hourtable th { padding: 5px; text-align:center; border-bottom: 1px solid #999; border-left: 1px solid #999; background:#f0f0f0;}
#hourtable td { padding: 5px; text-align:center; border-bottom: 1px solid #999; border-left: 1px solid #999;}

/*--------------------
フッター
--------------------*/
footer { border-top: 1px solid #999; color: #3c3c3c; padding: 10px 0 50px; font-size: 13px; margin-top: 30px;}
#copy { text-align: right; font-weight: bold }

/*--------------------
スマホ
--------------------*/
img{
max-width: 100%;
height: auto;
width /***/:auto;　
}

@media screen and (max-width: 479px) {
body{
  -webkit-text-size-adjust: 100%;
}
}
/*--------------------
clearfix
--------------------*/
#wrapper:after,
.article:after,
#nav:after,
.clear:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
#wrapper,
.article,
#nav,
.clear {display: inline-block;}
/* Hides from IE-mac \*/
* html #wraper,
* html .article,
* html #nav,
* html .clear {height: 1%;}
#wrapper,
.article,
#nav,
.clear {display: block;}
/* End hide from IE-mac */
/*
|--------------------------------------------------------------------------
| スクロールしたらトップへ戻る矢印が表示されるスクリプト用CSS
| UItoTop jQuery Plugin 1.1
| http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
|--------------------------------------------------------------------------
*/

#page-top {
	position: fixed;
	bottom: 10px;
	right: 10px;
	font-size: 13px;
}
#page-top a {
	background: #8cc63f;
	text-decoration: none;
	color: #fff;
	padding: 10px;
	text-align: center;
	display: block;
	border-radius: 5px;
}
#page-top a:hover {
	text-decoration: none;
	background: #CECECE;
}