@charset 'UTF-8';





/*********************************************
/*

/* Intersection
/*
/********************************************/



/****************************************
body
****************************************/


body {

  background: #ffffff;

}



img {

  max-width: 100%;

  height: auto;

}



.main {

  margin-bottom: 20px;

}




/*********************************************
/*
/* Header
/*
/********************************************/


/****************************************
.header
****************************************/


.header {

  background: #fff;

}





/****************************************
.site-logo
****************************************/

.site-logo {

  margin-top:10px;

  margin-bottom: 8px;

  padding-right: 0;

}







/****************************************
.page-visual
****************************************/

.page-visual {
  background-color: #cecece;
  margin-bottom: 20px;
}


.pagevisual-title {
  margin: 0;

  font-size: 20px;

  padding: 15px 0 0 10px;

  height: 54px;

  color: #339900;

  background-color: #eeeeee;

  background-image: url(../img/bg-title.jpg);

  background-repeat: no-repeat;

  background-position: right top;

  -webkit-background-size: 50%;

       -o-background-size: 50%;

          background-size: 50%;
}



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

  .pagevisual-title {

    font-size: 30px;

    padding: 60px 0 0 50px;

    height: 160px;

    color: #339900;

    background-position: right top;

    -webkit-background-size: auto;

         -o-background-size: auto;

            background-size: auto;
  }
}







/*********************************************
/*
/* Navigation
/*
/********************************************/


/****************************************
.breadcrumb
****************************************/

.breadcrumb {
  padding: 0;
  background: none;
}

.breadcrumb li+li:before {
  content: '»';
}







/****************************************
.title
****************************************/

.maintitle {

  font-family: 'Roboto Condensed', sans-serif;

  font-size: 20px;

  line-height: 1.2;

  position: relative;

  padding: 10px 20px;

  color: #333333;

  border-right: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;

  border-left: 1px solid #eaeaea;
  background: #fff;
}



.maintitle:before {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 4px;
  content: '';

  background: -webkit-gradient(linear, left top, right bottom, from(#339900), to(#99cc00));

  background: -moz-linear-gradient(left, #339900, #99cc00);

  background:      linear-gradient(left, #339900, #99cc00);
}






/*********************************************
/*
/* MainContent-index
/*
/********************************************/


/****************************************
.feature
****************************************/


.feature-block {

  margin-bottom: 10px;
}







/****************************************
.thumb-box
****************************************/

.thumb-box {
  padding: 0;
  list-style: none;
}


.thumb-box li {
  padding: 0 5px 5px;
}



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

  .thumb-box li {
    padding: 0 7px 7px;
  }
}


.thumb-box li a {

  position: relative;

  display: block;

  overflow: hidden;

  padding: 4px;

  color: #333;

  border: 1px solid #eaeaea;

  -webkit-border-radius: 4px;

          border-radius: 4px;
  background: #fff;
}



.thumb-box li a:hover {
  text-decoration: none;
  border: 1px solid #339900;
}

.thumb-box li a:hover img {
  opacity: 0.5;
}


.thumb-box li a img {
  width: 100%;
  height: auto;
}











/*********************************************
/*
/* Footer
/*
/********************************************/


/****************************************
.btn-pagetop
****************************************/

.btn-pagetop {

  border-bottom: 5px solid #99cc00;
  background: #ffffff;
}



.btn-pagetop .container {
  text-align: right;
}



.btn-pagetop
 .container a {

  display: inline-block;

  width: 50px;

  height: 25px;

  text-decoration: none;

  color: #fff;

  -webkit-border-radius: 4px 4px 0 0;

          border-radius: 4px 4px 0 0;

  background: #99cc00;
}



.btn-pagetop
 .container a:hover {

  text-decoration: none;

  background: #999999;
}



.btn-pagetop .container a i {

  padding-top: 5px;
}




/****************************************
.footer
****************************************/

.footer {

  background: #339900;
}



.footer .container {

  padding: 30px 0;
  color: #ffffff;
}


.manabeshouten {

  text-align: center;


}

.company {

  font-size: 18px;

}



.otoiawase {

  text-align: center;


}

.copyright {

  height: 30px;

  text-align: center;

  color: #ffffff;
}