/* IMPORT RESET */
@import url("reset.css");

/* Utility */
@import url("utility.css");

/* IMPORT 12 COLUMN RESPONSIVE GS */
@import url("responsive.gs.12col.css");

/* ICOMOON */
@import url("icomoon.css");

/* TOP */
@import url("top.css");

/* Font Awesome */
@import url("https://use.fontawesome.com/releases/v5.6.1/css/all.css");
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css");

/* Content */
@import url("content.css");


/*	EXAMPLE STYLES */
body {
	font-family: Meiryo,"メイリオ","ＭＳ Ｐゴシック",Osaka,sans-serif;
	color: #333;
	font-size: 13px;
	background:#f7f6f1;
}

/* ----------   header  --------------------- */
header {
	padding-bottom:0px;
}


.h_bg01{
	background-image:url(../common_img/bg_header.png);
	background-position: center 0;
	background-repeat: no-repeat;
}

.h_bg02{
	background-image:url(../common_img/bg_header02.png);
	background-position: center 95%;
	background-repeat: no-repeat;
	background-color:#c0d43c;
	background-size:cover;
	padding:40px 0px 30px ;
}

/* ----------   article  --------------------- */

article {
	margin:0px 0 10px;
}

main{
padding:0px 0px 30px 0px ;
}

@media only screen and (max-width: 768px) {
main{
padding:10px 8px 30px 8px ;
}
}

/* ----------   section  --------------------- */
section {

}

aside {
	margin:0px 0 10px;
}



/* ----------   footer  --------------------- */
footer {
	padding:0px 0px 0px;
}

#link_area{
text-align:center;
margin:10px 0;
}


#link_area img{
margin:5px 0;
}


/* ----------   メインイメージ系  --------------------- */

#main_img {
	text-align:center;
	margin:0px 0 0px;
	padding:0px 0 0px 0;
}

#main_img h2{
	text-align:center;
	padding:50px 0 220px 0;
}


#main_img h2 span{
	font-size:80%;
}



@media only screen and (max-width: 768px) {

.h_bg01{
	background-image:url(../images/main.png);
	background-position:center bottom;
	background-repeat:no-repeat;
	background-size:cover;
	background-color:#000;
}

#main_img h2{
	text-align:center;
	padding:10px 0 105px 0;
}

.h_bg02{
	padding:5px 0px 10px ;
}

}

@media only screen and (max-width: 480px) {}

.nak_tt{
background:url(../images/main.png) no-repeat center bottom,url(../images/main_02.png) repeat-x center bottom;
background-size:950px,auto 30px;
}

.nak_tt h2{
font-weight:bold;
padding:4% 2% 4%;
font-size:180%;
color:#000;
text-shadow:1px 1px 1px #fff,-1px -1px 1px #fff,1px 1px 1px #fff,-1px -1px 1px #fff,1px 1px 1px #fff,-1px -1px 1px #fff;
}


@media only screen and (max-width: 959px) {

.nak_tt{
margin:0px 0px 0px ;
background-size:100%;
}

.nak_tt h2{
font-weight:bold;
padding:6% 2% 6%;
font-size:140%;
text-shadow:1px 1px 1px #fff,-1px -1px 1px #fff,1px 1px 1px #fff,-1px -1px 1px #fff,1px 1px 1px #fff,-1px -1px 1px #fff;
}


}



/* ----------   menu  --------------------- */

#menu-box{
  margin:30px 0px 30px 0px ;
  padding:0px 0px 0px 0px ;
  position: relative;
}

#menu{
  margin: 0px 0 0px;
  padding: 0;
  background:#005fea url(../common_img/bg_menu.png) repeat-x 0 0;
  border:solid 1px #007eff;
  -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}
#menu li{
  float: left;
  text-align:center;
  line-height:1.2;
  width: 20.0%;
  margin: 0;}


#menu li a{
  display: block;
  padding: 10px 0px 10px;
  color: #fff;
  text-align: center;
  font-weight:normal;
  font-size:120%;
  text-decoration: none;
  background:url(../common_img/g_nav_li.png) no-repeat right center;
}
#menu li:last-child a{
  background:none;
}

#menu li a span{
  color: #feffa8;
  font-size:80%;
  font-weight:normal;
}

#menu li a:hover{
  color: #fff;
  background-color:#0066ff;
}

#menu li a:hover span{
  color: #fff;
}

#menu li dd{ display:none; position: absolute; z-index:100; top:64px;padding:0; border:solid 1px #fff;background:#004ec0;}


#menu li ul.sub_nav { padding:0 0 0;display:block; overflow: hidden;margin:0;font-size:90%;} 
#menu li ul.sub_nav li { width:300px;float: none; color:#fff; padding:0 0px; margin-bottom:1px; height:auto; list-style:none; }
#menu li ul.sub_nav li a { background:none!important;color:#fff; text-align:left; padding:10px 20px 10px 20px; height:auto;text-decoration:none;border-bottom:dotted 1px #fff;}
#menu li ul.sub_nav li a:hover { background:#9b374d!important;color:#fff; text-align:left;}
#menu li ul.sub_nav li a:before { content:'\f0a9'; margin-right:15px;font-family:'FontAwesome';color:#fff;}

#menu li ul.sub_nav li a {
	opacity:0.9;
	filter: alpha(opacity=90);
	-ms-filter: "alpha( opacity=90 )";
}

#menu li ul.sub_nav li a:hover {
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha( opacity=100 )";
	-webkit-transition: opacity linear 0.4s; -moz-transition: opacity linear 0.4s; transition: opacity linear 0.4s;
}


#toggle{ 
 display: none;
}


@media only screen and (max-width: 768px) {
  #menu{
    display: none;
  }

#menu-box{
  background:none;
  margin:0px 0px 0px 0px ;
  padding:0px 0px 0px 0px ;
}

  #menu li{
    width: 100%;
    background:#fff;
    border-bottom:dotted 1px #ccc;
  }


  #menu li.nak{
    width: 100%;
    border-bottom:dotted 1px #fff;
    background:none;
  }
  #menu li.hom{
    width: 100%;
    border-bottom:dotted 1px #fff;
  }

#menu li a{
  display: block;
  padding: 10px 0px 10px;
  color: #0066ff;
  background:none;
}
#menu li a:hover{
  background:#0066ff;
}

#menu li:last-child a{
  display: block;
  padding: 10px 0px 10px;
  color: #0066ff;
  background:none;
}
#menu li:last-child a:hover{
 background:#176300;
 color:#fff;
}
#menu li a span{
  color: #333;
  font-size:80%;
  font-weight:normal;
}

  #toggle{
    display: block;
    position: relative;
    width: 100%;
    background:#0066ff;
    border-bottom:solid 1px #fff;
  }

  #toggle a{
    display: block;
    position: relative;
    padding: 10px 0 8px;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }
  #toggle:before{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    background: #fff;
  }
  #toggle a:before, #toggle a:after{
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 20px;
    height: 4px;
    background: #0066ff;
  }
  #toggle a:before{
    margin-top: -6px;
  }
  #toggle a:after{
    margin-top: 2px;
  }

#menu li dt{ position: relative;}
#menu li dd.ue{ display:none; position: absolute; z-index:100; top:171px;padding:0; border:none;width:100%;}
#menu li dd.si{ display:none; position: absolute; z-index:100; top:235px;padding:0; border:none;width:100%;}
#menu li ul.sub_nav { padding:0 0 0;display:block; overflow: hidden;margin:0;font-size:100%;} 
#menu li ul.sub_nav li { width:100%;float: none; color:#fff; padding:0 0px; margin-bottom:1px; height:auto; list-style:none; }
#menu li ul.sub_nav li a { background:#0066ff!important;color:#fff; text-align:left; padding:10px 20px 10px 20px; height:auto;text-decoration:none;}
#menu li ul.sub_nav li a:hover { background:#b6596e!important;color:#fff; text-align:left;}
#menu li ul.sub_nav li a:before { content:'\f0a9'; margin-right:15px;font-family:'FontAwesome';color:#fff;}

}





.btn01 {}


.btn01 a{
	color:#fffbe9;
	font-weight:bold;
	text-decoration:none;
	font-size:100%;
	display:block;
	padding:5px 0px;
	background:#cd7d00;
	text-align:center;
	-webkit-border-radius:5px; -moz-border-radius: 5px; border-radius:5px;
}

.btn01 a:hover{
	background:#2eafe6;　/* Firefox用 */  
}


.link_box{
-webkit-transition: opacity linear 0.4s; -moz-transition: opacity linear 0.4s; transition: opacity linear 0.4s;
}

.bl-hover{
	opacity:0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha( opacity=60 )";
	background: #fff;
	-webkit-transition: opacity linear 0.4s; -moz-transition: opacity linear 0.4s; transition: opacity linear 0.4s;
}

/* ----------   バナー  --------------------- */


.banner{
margin:40px auto 30px;
background-color:#fff;
width:680px;
border:solid 3px #afd5b9;
position:relative;
}

.banner dl{
margin:0px ;
}

.banner dl dt{
padding:15px 10px 15px 10px ;
font-weight:bold;
line-height:1.3;
color:#fff;
font-size:110%;
background:#00ab39;
}

.banner dl dt span{
font-size:80%;
padding:0px 0px 0px 15px ;
}


.banner figure{
position:absolute;
right:0px;
bottom:0px;
}

.banner dl dd{
padding:10px 10px 0px 10px ;
}

.banner dl dd span{
color:#000;
font-weight:bold;
}


@media only screen and (max-width: 960px) {

.banner{
margin:20px auto 30px;
width:95%;
}


.banner figure{
display:none;
}

.banner dl dt br{
display:none;
}

.banner dl dd{
text-align:center;
}

.banner dl dd span br{
display:none;
}


}


/* ----------   右サイド  --------------------- */

.side_box{
border:3px #e3ddcf solid;
background:#fff;
}

.side_box h3{
background:url(../common_img/side_bg.png) no-repeat 0 0px;
background-size:100%;
text-align:center;
font-weight:bold;
padding:8px 10px;
color:#fff;
font-size:120%;
margin:0px auto 5px;
}

.add{
padding:10px 0 10px;
margin-bottom:15px;
border-bottom:solid 1px #ccc;
color:#6a2b1c;
font-size:85%;
}
.add span{
font-weight:bold;
}


@media only screen and (max-width: 768px) {

.side_box{
width:70%;
margin:10px auto 10px;
}

}

@media only screen and (max-width: 480px) {

.side_box{
width:90%;
margin:10px auto 10px;
}

}

/* ----------   フッターナビ  --------------------- */

#page_up{width:62px;
margin:10px auto 0;
text-align:center;
}
#page_up img{width:100%;}


.fotter_bg{
background:#fff url(../common_img/fotter_bg.png) repeat-x 0 0px;
color:#633d1f;
}

.fnav {
width:100%;
margin:20px 0 0 20px;
}

.fnav li{
float:left;
margin:0px 20px 5px 0;
color:#fff;
}

.fnav li a:before  { content:'>'; float:left;margin-right:5px;font-size:80%;padding:0px 3px;}

.fnav li a{
display:block;
color:#633d1f;
}

.fnav li a:hover{
text-decoration:none;
}

.f_link {
  text-align: center;
  padding: 30px 0 0;
}
.f_link img{
  padding: 10px;
  width:180px;
}


#site_copy{
text-align:center;
margin:40px 0 0 0;
padding:10px;
color:#fff;
background:#005fea;
}

/* ----------   デバイス毎の振り分け  --------------------- */


/*PC960px以上 */


h1{
font-size:80%;
padding:0px 0 0px;
line-height:25px;
font-weight:normal;
color:#fff;
text-align:left;
}

.logo{float:left;width:276px;padding:0px 0px 0px 0px ;}


.h_info{float:right;width:320px;padding:20px 0px 5px 0px ;
margin:10px 0 0 0;
background:url(../common_img/header_info.png) no-repeat center 0px;
}
.h_info li{float:left;padding:0px 0px 0px 0px ;}


@media only screen and (max-width: 959px) {}

@media only screen and (max-width: 768px) {


.logo{float:none;width:276px;margin:0px auto 0px ;}

.h_info{float:none;width:276px;margin:0px auto 0px ;padding:35px 0px 0px 0px ;}

.h_info li{float:left;padding:0px 0px 0px 0px ;width:48%;text-align:right;}
.h_info li:last-child{float:right;padding:0px 0px 0px 0px ;width:48%;text-align:left;}
.h_info span{display:none;}



h1{
display:none;
}


#side_bar{display:none;}
#pan {display:none;}

#page_up{width:25%;
margin:0px auto 0;
}
#page_up img{width:100%;}

}

@media only screen and (max-width: 480px) {

#page_up{width:35%;
margin:0px auto 0;
}
#page_up img{width:100%;}


.fnav {
width:90%;
margin:20px auto 0px;
}

.fnav li{
float:none;
margin:0px 0px 5px 0;
color:#fff;
}

.fnav li a{
display:block;
color:#fff;
background:#004ec0;
padding:10px 15px;
}

}


/* ロールオーバーで不透明度変更
-------------------------------------------------- */
.hover_img a:hover img,
a.hover_img:hover img {
	opacity:0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	-webkit-transition: opacity linear 0.4s; -moz-transition: opacity linear 0.4s; transition: opacity linear 0.4s;
}


/* タイトルのスタイル
-------------------------------------------------- */

.tt_style01{
background:#e1f2e1;
border-left:solid 6px #308800;
padding:10px 0px 10px 10px ;
margin:25px 0 25px;
color:#308800;
font-size:120%;
font-weight:bold;
}




.tt_style02{
font-size: 120%; 
color: #e6cb72;
padding:7px 0 7px 20px;
margin:0px 0px 20px;
font-weight:bold;
border:solid 1px #308800;
background:#308800;
text-shadow:1px 1px 3px #333;
box-shadow:1px 1px 1px #fff inset,-1px -1px 1px #fff inset;
}

/* 
====================================================================================================
◆画像のレフト・ライト
---------------------------------------------------------------------------------------------------- */

.fig_01{
float:right;
width:36%;
margin:0px 0px 20px 20px;
}

.fig_02{
float:left;
width:26%;
margin:0px 20px 20px 0px;
}

.fig_03{
float:right;
width:20%;
margin:0px 0px 20px 20px;
}

.fig_04{
float:left;
width:20%;
margin:0px 20px 20px 0px;
}


.fig_05{
float:right;
width:20%;
margin:0px 0px 20px 20px;
text-align:center;
}

.fig_06{
float:left;
width:20%;
margin:0px 20px 20px 0px;
}

@media only screen and (max-width: 768px) {

.fig_01{
float:none;
width:80%;
margin:0px auto 20px;
}

.fig_04{
display:none;
}

}