@charset "utf-8";

html {
background-image:url(../images/site_back.png);
width:100%;
}

body{
font: 14px/1.6 "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3",Hiragino Kaku Gothic Pro,"ＭＳ Ｐゴシック",MS PGothic,Sans-Serif;
color:#222;
margin: 0 auto;
width:100%;
}

img {
max-width: 100%;
}

a{color:#333;text-decoration:none;}
a:hover{color:#666;}
a:active, a:focus {outline: 0;}
img{border:0;}
.clear{clear:both;}

a img {
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
a:hover img {
opacity: 0.7;
}

#wrapper{
margin: 0 auto;
width: 1000px;
}

li{list-style:none;}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


/*ヘッダー*/

#header{
background:url(../images/mainimage.png) center top no-repeat;
margin:0;
padding:0;
}

#logo{
padding:40px 0;
text-align:center;}

.img_logo {
width:500px;
height:208px;
}


/*ナビ　ファースト*/

.firstnavi{
margin:0 auto;
width:870px;}

.navi_first{
padding-bottom:15px;}

.navi_first_middle{
text-align:center;
padding-bottom:15px;}

.navi_left{
float:left;
width:50%;}

.navi_right{
text-align:right;
float:left;
width:50%;}

ul#main_nav_box {
display:block;
width:1000px;
height:80px;
margin:10px 0 0 0;
padding:0;
}

ul#main_nav_box li {
float:left;
display:block;
width:250px;
margin:0;
padding:0;
}
ul#main_nav_box li span {
display:none;
}
ul#main_nav_box li, 
ul#main_nav_box li a {
display:block;
width:250px;
height:80px;
}
ul#main_nav_box li.mail a {
background:url(../images/mail.png) no-repeat;
}
ul#main_nav_box li.stl a {
background:url(../images/navi1.png) no-repeat;
}
ul#main_nav_box li.furusato a {
background:url(../images/navi2.png) no-repeat;
}
ul#main_nav_box li.inq a {
background:url(../images/navi3.png) no-repeat;
}		

ul#main_nav_box li.mail a, 
ul#main_nav_box li.stl a, 
ul#main_nav_box li.furusato a, 
ul#main_nav_box li.inq a {
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
ul#main_nav_box li.mail a:hover, 
ul#main_nav_box li.stl a:hover, 
ul#main_nav_box li.furusato a:hover, 
ul#main_nav_box li.inq a:hover {
opacity: 0.8;
}

/*コンテンツ*/

#contents{
padding:0 20px 10px 20px;
width:960px;
background-color:#FFF;
margin: 0 auto;}

#contents p a{
text-decoration:none;
color:#ff6600;}

#contents p a:hover{
text-decoration:underline;
color:#ff6600;}

#contents img{
padding:0 10px 30px 0;
float:left;}

.thum01 {
width:400px;
height:312px;
}
.thum02 {
width:255px;
height:181px;
}
#img_flow {
width:100%;
}
#img_flow_smp {
display:none;
}

/*フッター*/

#footer{
height:130px;
background-image:url(../images/footer_back.png)}

.footer_box{
text-align:center;
color:#FFF;
width:1000px;
height:130px;
background-image:url(../images/footer.png);
margin: 0 auto;}

.footer_box p{
margin:0;
padding-top:90px;
font-size:12px;
font-weight:normal;
}

/*テキスト*/

.tit01 {
width:950px;
font-size:24px;
color:#006600;
padding:5px 10px 0 0;
}
.tit02 {
width:890px;
font-size:20px;
color:#333333;
padding:6px 10px 6px 60px;
background:url(../images/check.png) no-repeat;
}
.tit01, 
.tit02 {
border-bottom:solid 3px #006600;
margin-top:30px;
font-weight:bold;
clear:both;
}

.red{
color:#ff0000;}

#p_top {
position:relative;
}
#goTop {
float: right;
position:absolute;
width:185px;
height:45px;
top:7px;
bottom: 15px;
_bottom: 5px;
right:164px;
background: transparent url(../images/p_top.png) top left no-repeat;
text-decoration:none;
}
#goTop span {
display: none;
}

/* screens smaller than 820 */
@media only screen and (max-width:820px) {

#img_flow_smp {
max-width:95%;
}

html {
background-image:none;
background-color:#fff;
}

body{
width:100%;
}

#wrapper{
margin:0;
width: 100%;
}

li{list-style:none;}

/*ヘッダー*/

#header{
background:url(../images/mainimage.png) center top no-repeat;
margin:0;
padding:0;
}

#logo{
padding:20px 0 10px 0;
text-align:center;}

.img_logo {
width:250px;
height:104px;
}


/*ナビ　ファースト*/

.firstnavi{
margin:0 auto;
width:100%;}

.navi_first{
text-align:center;
padding-bottom:3px;}

.navi_first_middle{
text-align:center;
padding-bottom:3px;}

.navi_left{
float:none;
text-align:center;
width:100%;
padding-bottom:3px;}

.navi_right{
float:none;
text-align:center;
width:100%;}

ul#main_nav_box {
display:block;
width:100%;
height:163px;
margin:0;
padding:0;
}

ul#main_nav_box li {
float:none;
display:block;
width:100%;
margin:0;
padding:0;
}
ul#main_nav_box li span {
display:none;
}
ul#main_nav_box li, 
ul#main_nav_box li a {
display:block;
width:100%;
height:40px;
margin-bottom:1px;
}
ul#main_nav_box li.mail a {
background:rgba(60,30,10,0.4) url(../images/mail_smp.png) top center no-repeat;
}
ul#main_nav_box li.stl a {
background:rgba(30,50,20,0.3) url(../images/navi1_smp.png) top center no-repeat;
}
ul#main_nav_box li.furusato a {
background:rgba(60,100,40,0.2) url(../images/navi2_smp.png) top center no-repeat;
}
ul#main_nav_box li.inq a {
background:rgba(120,200,80,0.2) url(../images/navi3_smp.png) top center no-repeat;
}		

ul#main_nav_box li.mail a, 
ul#main_nav_box li.stl a, 
ul#main_nav_box li.furusato a, 
ul#main_nav_box li.inq a {
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
ul#main_nav_box li.mail a:hover, 
ul#main_nav_box li.stl a:hover, 
ul#main_nav_box li.furusato a:hover, 
ul#main_nav_box li.inq a:hover {
opacity: 0.8;
}

/*コンテンツ*/

#contents{
padding:0 0 10px 0;
width:98%;
background-color:#FFF;
margin:0 auto;}

#contents p a{
text-decoration:none;
color:#ff6600;}

#contents p a:hover{
text-decoration:underline;
color:#ff6600;}

#contents img{
margin:0 auto;
text-align:center;
padding-bottom:10px;
float:left;}

.thum01 {
width:200px;
height:auto;
}
.thum02 {
width:200px;
height:auto;
}
#img_flow {
display:none;
}
#img_flow_smp {
display:block;
width:360px;
margin:0 auto 10px auto;
padding:0 0 10px 0;
}


/*フッター*/

#footer{
height:100px;
background-image:url(../images/footer_back.png)}

.footer_box{
text-align:center;
color:#FFF;
width:100%;
height:100px;
background:url(../images/footer_back_smp.png) repeat-x;
margin: 0 auto;}

.footer_box p{
margin:0;
padding-top:60px;
font-size:12px;
font-weight:normal;
}

/*テキスト*/

.tit01, 
.tit02 {
border-bottom:solid 3px #006600;
margin-top:30px;
font-weight:bold;
clear:both;
}
.tit01 {
width:100%;
font-size:24px;
color:#006600;
padding:5px 0 0 0;
}
.tit02 {
width:100%;
text-indent:3em;
font-size:20px;
color:#333333;
padding:6px 0 6px 0;
background:url(../images/check.png) no-repeat;
}

#p_top {
width:185px;
height:42px;
}
#goTop {
float: none;
left:10px;
width:185px;
height:45px;
background: transparent url(../images/p_top.png) top left no-repeat;
text-decoration:none;
}
#goTop span {
display: none;
}

}