@charset 'UTF-8';
/*********************************************
 Intersection
/********************************************/
* {
	margin: 0;
	padding: 0;
	box-sizing:border-box;
}
/****************************************
body
****************************************/
body {
   background: #fbfbfb;
   font-size: 15px;
}

img {
   max-width: 100%;
   height: auto;
}
.main {
   margin-bottom: 20px;
}
h2{
   width: 95%;
   margin: 0 auto;
}
.fbok1{
   color: #333;
   text-align: left;
   margin-bottom: 0px;
}


@media screen and (max-width: 500px){
h2{
   font-size: 100%;
}
}
.fbok3{
	color: #333;
	margin-top: 20px;
	font-weight: bold;
}
.face{
	text-align: left;
	margin-left: 5%;
	color: #333;
	font-size: 18px;

}
@media screen and (max-width: 500px){
.face{
	width: 100%;
	margin-left: 0;
}
.sas{
	width: 100%;
}
}
.face iframe{
	width: 100%;
    max-width: 100%;
	height: 325px;
    max-height: 100%;
}
@media screen and (max-width: 1072px){

.face iframe{
	height: 200px;
    max-height: 100%;
}
}
.face iframe img{
	width: 100%;
	height: 100%;
}
h4{
	font-size: 20px;
	color: #004ea2;
	font-weight: bold;
}
.fbok{
	color: #004ea2;
	font-weight: bold;
	font-size: 110%;
}
.fbok2{
    width: 100%;
	height:320px;
	margin-top: -20px;
}
@media screen and (max-width: 500px){

.fbok2 {
    width: 100%;
}
}
.container main{
	margin-top: -21px;
    margin:0 auto;
}
@media screen and (min-width: 768px) and (max-width:1199px){
h2.fbok1{
	margin-bottom: 50px;
}
iframe{
	width: 100%;
	height: 100%;
}
}
@media screen and (min-width: 768px) and (max-width:990px){
h2{
	font-size: 20px;
}
section{
	text-align: center;
}
iframe{
	height: 65%;
}
}
.space{
	padding-top: 30px;

}
.space2{
	padding-top: 100px;
}
.space3{
	padding-top: 26px;
}
.center{
	display:inline-block;
	width:100%;
	padding:30px 5% 10px 5%;
}
#overview{
	font-size:18pt;
	padding-bottom:10px;
	margin:0;
	border-bottom:4px solid #2b68ad;
	font-weight:bold;
}
.overview2{
	font-size:13pt;
	line-height:1.5em;
	margin:0;
}

@media screen and (min-width: 1349px) and (max-width: 1467px) {

.space3{
	padding-top:0px;
}
}
/****************************************
.header
****************************************/
.header {
      background: #fff;
}

@media screen and (max-width:768px) {
	.header {
		height: 141px;
		width: 100%;
		z-index: 1;
	}
}
/****************************************
.site-logo
****************************************/
.site-logo {
  margin-top: 16px;
  margin-bottom: 14px;
  padding-right: 0px;
}
.toplogo1{
	margin-left: 0px;
}

.top-mobile {
  display: none;
}

@media screen and (max-width:768px) {
  .top-mobile {
    display: block;
    margin: 0 auto;
  }
  .top-pc {
    display: none;
  }
}
/****************************************
.breadcrumb
****************************************/
.breadcrumb {
  padding: 0;
  background: none;
}
/****************************************
.navbar
****************************************/
.navbar {
  min-height: auto;
  margin-bottom: 0;
}
@media screen and (min-width: 140px) and (max-width:767px) {
header {
	position: fixed;
	background-color: #fff;
	z-index: 999;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .navbar .container {
    width: 100%;
  }
}
@media screen and (max-width:768px) {
/**  ハンバーガー　***/
.navbar-toggle {
  margin-top:-2px;
  height: 42px;
  z-index: 1;
  background-image: -webkit-linear-gradient(top,#3384cf 0,#2865ac 100%);
  background-image:      -o-linear-gradient(top,#3384cf 0,#2865ac 100%);
  background-image: -webkit-gradient(linear,left top,left bottom,from(#3384cf),to(#2865ac));
  background-image:         linear-gradient(to bottom,#3384cf 0,#2865ac 100%);
}
.navbar-toggle .icon-bar {
  background-color: #FFF;
}
/**  ハンバーガーs　***/
.navbar-inverse {
  border: none;
  text-align: center;
  -webkit-border-radius: 0;
          border-radius: 0;
  background-color: #2865ac;
  background-repeat: repeat-x;
  z-index: 1;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
  .navbar-inverse .navbar-nav>li>a {
    padding: 10px 0;
    color: #fff;/**nav文字色**/
  }
}
.navbar-toggle::after{
	position: absolute;
	left: 0;
	bottom: -4px;
	content: 'MENU';
	display: block;
	width: 100%;
	color:#fff;
	font-size: 1px;
	text-decoration: none;
	transition: all.4s;
}
@media screen and (max-width:340px) {
.navbar-toggle::after{
	position: absolute;
	left: 0;
	bottom: -4px;
	content: 'MENU';
	display: block;
	width: 100%;
	color:#fff;
	font-size: 1px;
	text-decoration: none;
	transition: all.4s;
}
}
.nav-toggle {
  text-align: right;
}
/**  ハンバーガー　***/
@media screen and (min-width: 768px) {
.navbar-toggle .icon-bar {
  background-color: #FFF;
}
/**  nav　***/
nav.fixed {
	width: 100%;
	position: fixed;

	top: 0;
	z-index: 1;
}
.navbar-inverse {
  border: none;
  -webkit-border-radius: 0;
          border-radius: 0;
  background-color: #fff;/** nav背景カラー **/
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border: none;
}
.navbar-collapse {
  box-shadow: none;
}
  .navbar-collapse {
    margin-top: 0;
  }
.navbar-nav {
  float: none;
  margin: 0;
}
.navbar-nav li {
  width: 100%;
}
.navbar-inverse .navbar-nav>li>a,
.navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
  color: #000;
}
}
@media screen and (min-width: 768px) {
  .navbar-inverse .navbar-nav .open .dropdown-menu>li>a {
    color: #333;
  }
}
.navbar-inverse .navbar-nav>li>a:focus,
.navbar-inverse .navbar-nav>li>a:hover {
  color: #fff;
  background-color: #777;
}
.navbar-inverse .navbar-nav>.open>a,
.navbar-inverse .navbar-nav>.open>a:focus,
.navbar-inverse .navbar-nav>.open>a:hover {
  color: #fff;
  background-color: #2865ac;
}

@media screen and (min-width: 768px) {
  .navbar-nav li {
    width: 100%;
    font-size: 16px;
  }
  .navbar-nav>li {
    width: calc(100% / 8);
    text-align: center;
  }
  .navbar-nav li:hover {
    background: rgba(255, 255, 255, 0.1);
  }
  .navbar-inverse .navbar-nav>li>a {
    padding: 10px 0;
    color: #333;/**nav文字色**/
  }
}
/****************************************
.centerButton
****************************************/
.centerButton {
  margin-top: 9px;
  border-radius: 36px;
  height: 39px;
  line-height: 35px;
  width: 260px;
  font-size: 110%;
  color: #fdfdfd;
  text-align: center;
  border: 2px solid #b6a25f;
  display: inline-block;
  position: relative;
  font-weight:bold;
  background: #fff;
  overflow: hidden;
}
.centerButton:hover {
  text-decoration: none;
}
.centerButton:before {
  border-radius: 36px;
  content: attr(data-text)"";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: #efcd4c;
  color: #707070;
  transition: 0.3s all;
  width: 100%;
  font-weight:bold;
  height: 100%;
  line-height: 36px;
}
.centerButton:hover:before {
  content: "";
  opacity: 0;
  width: 8em;
  height: 1em;
  line-height: 1em;
}
@media screen and (min-width: 768px) {
.tel{
  display:none;
}
}
@media screen and (max-width:768px) {
.centerButton {
  display:none;
}
.tel{
  display:block;
  width: 41px;
  position: absolute;
  right:90px;

}
.tel2{
  display:block;
  width: 43px;
  position: absolute;
  right:70px;
  top:65px;

}
}
/****************************************
.sub-nav
****************************************/
.sub-nav,
.navbar-form {
  display: none;
  margin-top:0px;
  margin-left:10px;
}
.sub-nav a {
  color: #fff;
}
.contact{
  height: 35px;
  margin-top:15px;
  margin-left:90px;
}
@media screen and (min-width: 768px) {
  .sub-nav {
  display: block;
  padding-top: 0px;
  text-align: left;
  }
  .navbar-form {
  display: block;
  padding: 0;
  text-align: right;
  }
}
.input-group {
  width: 280px;
}
/*********************************************
 bk1
/********************************************/
.bk1 {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(90deg, #F9F9F9, #F9F9F9 5px, #ECECEC 0, #ECECEC 10px);
}
.spacea{
  margin-top: 5%;
	}
@media screen and (min-width: 320px) and (max-width:500px) {
.spacea{
  margin-top: 70px;
	}
}
.dan1{
  width: 100%;
  margin: 0 auto;
}
.dan2{
  width: 100%;
  margin: 0 auto;
}
.top3{

  margin-top: 20px;
}
.top3 img:hover{
    opacity: 0.5;
}
.con1{
  border: 1px solid #ddd;
  width: 100%;
  height: 100%;
  margin: 20px auto 0;
  transition-duration: 0.5s;
}
.con1 img{
  width: 100%;
  cursor: pointer;
}
.con1:hover{
  box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  transform: translateY(-10px);
  transition-duration: 0.5s;
}

.text-center img:hover{
  box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  transform: translateY(-10px);
  transition-duration: 0.5s;
}
/****************************************
.thumb-box-a
****************************************/
.thumb-box-a {
  padding: 10px;
  list-style: none;
}
.thumb-box-a li {
   padding: 0 15px 10px;
}
@media screen and (max-width: 500px) {
.thumb-box-a li {
   margin: 5px 0;
}
}
@media screen and (min-width: 768px) {
.thumb-box-a li {
    padding: 5px 5px 10px 5px;
  }
}
.thumb-box-a 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;
}
@media screen and (max-width: 500px) {
.thumb-box-a li {
	max-width: 100%;
    padding: 0px;
  }
.thumb-box-a li a {
    overflow: hidden;
    padding:0px;
}
}
.thumb-box-a li a:hover{
    text-decoration: none;
    border: 1px solid #2b68ad;
}
.thumb-box-a li:hover{
	opacity: 0.6;
}
.thumb-box-a li a img {
    width: 100%;
    height: auto;
}
.thumb-box-a p {
  padding: 0 15px;
}
.con3{
  border: 1px solid #ddd;
  width: 100%;
  height: 100%;
  margin: 10px auto 0;
  transition-duration: 0.5s;
}
.con3 img{
  width: 100%;
  cursor: pointer;
}
.con3:hover{
  box-shadow: 10px 10px 10px rgba(0,0,0,0.5);
  transform: translateY(-10px);
  transition-duration: 0.5s;
  opacity: 0.5;
}
.con4 {
	text-align: center;
}
.con4 img:hover {
opacity: 0.8;
box-shadow: 0 3px 5px rgba(0, 0, 0, 0.7);

}
@media screen and (max-width: 992px) {
.con4{
	width: 100%;
	text-align: center;
}
}
.bg2{

	text-align: center;
	margin-bottom: 60px;
}
.bg3{

	text-align: center;
	margin-top: 60px;
}
bg3 img{
	width: 90%;
}
/****************************************
.jumbotron
****************************************/
.jumbotron {
   margin: 0px;
   padding: 0;
}
@media screen and (max-width:500px) {
.jumbotron {
   margin: 0px;
	}
}
/****************************************
.key-visual
****************************************/
.key-visual {
  margin: 0px 0 0px 0;
}
@media screen and (max-width: 767px){
.key-visual {
	padding-top:141px;
}
}
.carousel-control i {
  position: absolute;
  z-index: 5;
  top: 50%;
  display: inline-block;
  margin-top: -10px;
  color: #bababa;
}
.carousel-control .fa-angle-left {
  left: 50%;
  margin-left: -10px;
}
.carousel-control .fa-angle-right {
  right: 50%;
  margin-right: -10px;
}
@media screen and (min-width: 768px) {
  .carousel-control i {
    font-size: 30px;
    width: 30px;
    height: 30px;
    margin-top: -15px;
  }
  .carousel-control .fa-angle-left {
    margin-left: -15px;
  }
  .carousel-control .fa-angle-right {
    margin-right: -15px;
  }
}
.carousel-indicators {
   display: none;
}
.carousel-inner>.item>a>img {
    width: 100%;
}
@media screen and (min-width: 500px) {
.carousel-inner{
	margin-top: -30px;
}
}
@media screen and (min-width: 0px) {
.carousel-inner{
	margin-top: -0px;
}
}
/****************************************
.page-visual
****************************************/
@media screen and (min-width: 500px) {
  .pagevisual-title {
    font-size: 60px;
	font-weight:bolder;
	text-align: center;
    padding-top:150px;
    height: 375px;
    color: #fff;
	text-shadow: 5px 5px 1px #555;
    background-position: right top;
    -webkit-background-size: auto;
         -o-background-size: auto;
            background-size: auto;
  }
}
.page-visual {
    margin-bottom: 20px;
}
.ttop{
	position:relative;
}
#tokaifloat{
	width:100%;
	position:absolute;
	top:40%;
	text-align:center;
}
.tokai{
	font-size:8vw;
	font-weight:bold;
	color:#000;
	text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}
#bottomtext{
	position:absolute;
	top:70%;
	right:0;
	left:0;
	font-size:7vw;
	font-weight:bold;
	color:#fff;
	text-align:center;
	text-shadow:0 5px 3px #555;
}
@media screen and (max-width: 500px) {
	.pagevisual-title {
    font-size: 300%;
	font-weight:bolder;
	text-align: center;
    padding-top:200px;
    height: 300px;
    color: #fff;
	text-shadow: 5px 5px 1px #555;
    background-position: right top;
    -webkit-background-size: auto;
         -o-background-size: auto;
            background-size: auto;
  }
h1{
	margin: 0px;
}
}
/****************************************
.feature
****************************************/
.feature-block {
  margin-bottom: 0px;
}
@media screen and (min-width: 768px) {
  .feature-block {
    margin-bottom: 0;
    text-align: center;
  }
}
.feature-block2 {
  margin-top: -15px;
}
.feature-block a {
  display: table-cell;
}
@media screen and (min-width: 768px) {
  .feature-block a {
    display: block;
  }
}
.feature-block a:hover {
  text-decoration: none;
}
.feature-block a p,
.feature-block a h3 {
  display: table-cell;
  float: none;
  vertical-align: middle;
}
@media screen and (min-width: 768px) {
  .feature-block a p,
  .feature-block a h3 {
    display: block;
    float: left;
  }
}
.feature-block a p {
  padding-bottom: 0;
}
@media screen and (min-width: 768px) {
  .feature-block a p {
    margin-bottom: 0;
    padding-bottom: 10px;
  }
}
.feature-block a p img {
  border: 4px solid #ececec;
}
.feature-block a:hover p img {
  opacity: 0.5;
}
.feature-block a h3 {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 24px;
  color: #666;
}
@media screen and (min-width: 480px) {
  .feature-block a h3 {
    font-size: 40px;
    margin-top: 0;
    padding: 20px 15px 0;
  }
}
.feature-block a:hover h3 {
  color: #bbb;
}
.feature-block a h3 span {
  font-size: 14px;
  display: block;
}
.featureblock-title {
  padding-left: 0;
}
/****************************************
.home-subtitle
****************************************/
.home-subtitle {
  font-size: 28px;
  padding-left: 10px;
  border-left: 2px solid #333;
}
.constructioncome{
    color: #f00;
    font-weight: bold;
	font-size: 110%;
}
@media screen and (min-width: 768px) {
  .home-subtitle {
    font-size: 28px;
  }

}
@media screen and (max-width: 500px) {
  .home-subtitle {
    font-size: 15px;
  }

}
/****************************************
.nav-tabs
****************************************/
.nav-tabs li {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
}
@media screen and (min-width: 768px) {
  .nav-tabs li {
    width: 190px;
    height: 52px;
    margin: 0 4px 0 0;
  }
}
.nav-tabs>li>a {
  font-size: 16px;
  margin: 0;
  padding: 14px 15px;
  text-align: center;
  -webkit-border-radius: 0;
          border-radius: 0;
  background: #cfe4f6;
}
@media screen and (min-width: 768px) {
  .nav-tabs>li>a {
    -webkit-border-radius: 8px 8px 0 0;
            border-radius: 8px 8px 0 0;
  }
}
.nav-tabs li.active a,
.nav-tabs li.active a:hover,
.nav-tabs li.active a:focus {
  color: #fff;
  background: #468dc8;
}
/****************************************
.tab-content
****************************************/
.tab-content {
  padding: 18px;
  border: 2px solid #e8e8e8;
  background: #fff;
}
.tab-pane {
  margin-bottom: 0;
  list-style-type: none;
  -webkit-padding-start: 0;
}
.tab-pane li {
  overflow: hidden;
}
.tab-pane li+li {
  margin-top: 12px;
}
.tab-pane div {
  float: left;
}
.tab-pane .article-title {
  font-size: 14px;
  line-height: 1.4;
  float: left;
  display: block;
  margin: 0;
}
@media screen and (min-width: 768px) {
  .tab-pane .article-title {
    float: none;
    padding-left: 154px;
  }
}
.tab-pane .date {
  width: 80px;
  margin-right: 10px;
}
label{
	width: 170px;
}
.tab-pane .label {
  display: inline-block;
  width: 60px;
  margin-right: 10px;
  padding: 0.3em 0 0.4em;
  text-align: center;
  color: #fff;
}
.label-new {
  background: #f0ad4e;
}

.label-product {
  background: #5cb85c;
}
.label-news {
  background: #5fc2df;
}
.label-topics {
  background: #e54728;
}
.label-seminer {
  background: #d34edf;
}
/****************************************
.mainblock
****************************************/
.mainblock {
  padding: 25px 0;
  border: 1px solid #eaeaea;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  background: #fff;
}

.inner-block p {
  padding: 0 15px;
}
.inner-block li {
  padding: 0 15px 10px;
}
.inner-block{
	padding: 0;
}
@media screen and (min-width: 768px) {
.inner-block li {
    padding: 0 15px;
  }
}
/****************************************
.article-nav
****************************************/
.article-nav ul {
  padding: 15px;
  list-style: none;
}
.article-nav li {
  display: inline-block;
}
.article-nav .prev {
  float: left;
}
.article-nav .next {
  float: right;
}
.article-nav li a {
  font-size: 14px;
  line-height: 26px;
  display: inline-block;
  width: 86px;
  height: 26px;
  text-align: center;
  border: 1px solid #ddd;
  -webkit-border-radius: 13px;
          border-radius: 13px;
}
.article-nav li a:hover {
  text-decoration: none;
  background: #eee;
}
.article-nav+.inner-block {
  border-top: 1px solid #eaeaea;
}
/****************************************
.title
****************************************/
.maintitle {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 30px;
  line-height: 1.2;
  position: relative;
  padding: 12px 30px;
  margin:0;
  color: #2b68ad;
  border-right: 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(#2b68ad), to(#90b7df));
  background: -moz-linear-gradient(left, #2b68ad, #90b7df);
  background:      linear-gradient(left, #2b68ad, #90b7df);
}
#mtitlewrap{
	width:100%;
	background:#fff;
	border-left:1px solid #eaeaea;
	border-right:1px solid #eaeaea;
	border-bottom:1px solid #eaeaea;
	padding:6px 20px 20px 30px;
	margin-bottom:20px;
}
#mtitle{
	margin:0;
	font-family: 'Roboto Condensed', sans-serif;
}
@media screen and (max-width: 450px) {
.maintitle {
 font-size: 17px;
	}
}
.subtitle {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 25px;
  line-height: 1.2;
  padding: 12px 20px 12px 16px;
  color: #2b68ad;
  border-top: 1px solid #eaeaea;
  border-right: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  border-left: 4px solid #2b68ad;
}
@media screen and (max-width: 500px) {
.subtitle {
  font-size: 15px;
	}
}
.blocktitle {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 20px;
  line-height: 1.2;
  padding: 8px 10px;
  color: #2b68ad;
  border-bottom: 2px dotted #eaeaea;
}
@media screen and (max-width: 450px) {
.blocktitle {
  font-size: 19px;
	}
}
@media screen and (max-width: 370px) {
.blocktitle {
  font-size: 15px;
	}
}
.boxtitle {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 24px;
  line-height: 1.2;
  padding: 8px 0;
}
/****************************************
.thumb-box
****************************************/
.thumb-box {
  padding: 0;
  list-style: none;
}
.thumb-box li {
  padding: 0 15px 10px;
}
@media screen and (min-width: 768px) {
  .thumb-box li {
    padding: 0 15px;
  }
}
.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;
}
@media screen and (max-width: 500px) {
.thumb-box li {
	max-width: 100%;
    padding: 0px;
  }
.thumb-box li a {
    overflow: hidden;
    padding:0px;
}
}
.thumb-box li a:hover {
  text-decoration: none;
  border: 1px solid #2b68ad;
}
.thumb-box li a img {
  width: 100%;
  height: auto;
}
.thumb-box h3,
.thumb-box p {
  padding: 0 15px;
}
.thumb-box button {
  float: right;
  margin: 0 15px 15px 0;
}
/****************************************
.thumb-block
****************************************/
.thumb-block {
  list-style: none;
}
.thumb-block li {
  margin-bottom: 10px;
  padding: 4px 4px 15px;
  color: #333;
  border: 1px solid #eaeaea;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  background: #fff;
}
@media screen and (min-width: 768px) {
  .thumb-block li {
    padding: 4px;
  }
}
.thumb-block li div {
  position: relative;
  overflow: hidden;
}
.thumb-block li:last-child {
  margin-bottom: 20px;
}
.thumb-block li>div:first-child {
  padding-right: 0;
  padding-left: 0;
}
.thumb-block li>div:first-child img {
  width: 100%;
  height: auto;
}
.thumb-block button {
  float: right;
}
/****************************************
.aside
****************************************/
.aside {
  margin: 10px auto 0;
}
.aside .banner {
  text-align: center;
}
.aside p,
.aside .fb-page {
  text-align: center;
}
.aside p a:hover {
  opacity: 0.6;
}
@media screen and (min-width: 992px) {
  .aside {
    margin: 0 auto;
  }
  .aside p img {
    width: 100%;
    height: auto;
  }
}
/****************************************
.cat-nav
****************************************/
.cat-nav {
  margin-bottom: 10px;
}
.cat-nav .cat-title {
  font-size: 16px;
  line-height: 46px;
  height: 46px;
  margin: 0;
  padding: 0 17px;
  color: #fff;
  background: #2b68ad;
}
.cat-nav ul {
  padding: 0;
  list-style: none;
  border-top: 1px solid #eaeaea;
}
.cat-nav li {
  height: 46px;
  border-right: 1px solid #eaeaea;
  border-bottom: 1px solid #eaeaea;
  border-left: 1px solid #eaeaea;
}
.cat-nav li a {
  font-size: 16px;
  line-height: 46px;
  display: block;
  padding: 0 17px;
  color: #8e8e8e;
}
.cat-nav li a::before {
  position: absolute;
  right: 15px;
}
/****************************************
.btn-pagetop
****************************************/
.btn-pagetop {
  border-bottom: 5px solid #a8c9e8;
  background: #fbfbfb;
}
.btn-pagetop .container {
  text-align: right;
}
.btn-pagetop .container a {
  display: inline-block;
  width: 50px;
  height: 28px;
  text-decoration: none;
  color: #fff;
  -webkit-border-radius: 4px 4px 0 0;
          border-radius: 4px 4px 0 0;
  background: #a8c9e8;
}
.btn-pagetop .container a:hover {
  text-decoration: none;
  background: #c1d5e8;
}
.btn-pagetop .container a i {
  padding-top: 5px;
}
/****************************************
.footer
****************************************/
.footer {
  background: #e6e9f5;
}
.footer .container {
  padding: 10px 0;
}
.footer-nav {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 34px;
  margin: 0;
  color: #dedede;
}
@media screen and (min-width: 768px) {
  .footer-nav>div {
    float: left;
    max-width: 50%;
  }
}
@media screen and (min-width: 992px) {
  .footer-nav>div {
    max-width: 25%;
    text-align: left;
  }
}
.footernav-title {
  font-size: 16px;
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid #fff;
}
.footernav-title .glyphicon-chevron-down:before {
  margin-right: 10px;
}
@media screen and (min-width: 768px) {
  .footernav-title .glyphicon-chevron-down:before {
    display: none;
  }
}
.list-group {
  margin-bottom: 0;
}
.list-group a {
  font-size: 14px;
  position: relative;
  display: block;
  padding: 10px 15px;
  color: #004ea2;
}
.list-group a:hover {
  text-decoration: none;
  color: #6aaae6;
}
.footer-logo {
  margin-top: 20px;
}
.footer-icon .container {
  list-style-type: none;
}
.footer-icon p,
.footer-icon ul {
  width: 100%;
  text-align: center;
}
.footer-icon li {
  display: inline-block;
  float: none;
}
.footer-icon li a:hover {
  opacity: 0.6;
}
.footer-icon li img {
  width: 40px;
  height: auto;
  border: 2px solid #bedaff;
}
.content img{
	width: 100%;
	height: 100%;
}
.otoiawase{
  width: 40%;
  margin-left: 45%;
  transition-duration: 0.5s;
}
.otoiawase img{
  margin-top: -40%;
}
.otoiawase:hover{
  box-shadow: 10px 10px 10px　rgba(0,0,0,0.5);
  transform: translateY(-10px);
  transition-duration: 0.1s;
}
.dan{
  background: #333;
  text-align: center;
}
.sns-icon {
  float: left;
}
.copyright {
  text-align: center;
  color: #fff;
}
/*********************************
施工実績例
**********************************/
/****************************************
BUTTON
****************************************/
.button {
  display: inline-block;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all 0.3s;
          transition: all 0.3s;
  border: 2px solid #000000;
  margin: 0;
  overflow: hidden;
  /*-- button size --*/
  /*-- button radius --*/
  /*-- button color --*/
  /*-- button hover  --*/
}

  .button .button-text {
    color: #000000;
    position: relative;
    z-index: 2;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;
}
  .button .button-bg {
    position: absolute;
    top: 0;
    left: 0;
}
  .button:last-child {
    margin-right: 0; }
  .button.button-small {
    width: 150px;
    height: 40px;
    line-height: 40px;
}
  .button.button-medium {
    width: 170px;
    height: 45px;
    line-height: 45px;
}
  .button.button-large {
    width: 190px;
    height: 60px;
    line-height: 60px;
}
  .button.button-xlarge {
    width: 240px;
    height: 60px;
    line-height: 60px;
}
  .button.button-color01 {
    border: 2px solid #00AB7C;
}
    .button.button-color01 .button-text {
      color: #00AB7C;
}
  .button.button-color02 {
    border: 2px solid #0953AB;
}
    .button.button-color02 .button-text {
      color: #0953AB;
}
  .button.button-color03 {
    border: 2px solid #0953AB;
      background-color: #0953AB;}
    .button.button-color03 .button-text {
      color: #0953AB;
}
  .button.button-color04 {
    border: 2px solid #0953AB;
      background-color: #f6f6f6;}
    .button.button-color04 .button-text {
      color: #0953AB;
}
  .button.button-hover08 .button-text {
    color: #fff;
    -webkit-transition: all 0.3s;
            transition: all 0.3s;
}
  .button.button-hover08 .icon {
    position: absolute;
    top: 0;
    right: -30px;
    z-index: 2;
    -webkit-transition: all 0.3s;
            transition: all 0.3s;
}
  .button.button-hover08 .button-bg {
    width: 0;
    height: 100%;
    background-color: #fff;
    -webkit-transition: all 0.3s;
            transition: all 0.3s;
}
  .button.button-hover08:hover .button-text {
    color: #0953AB;
    -webkit-transition: all 0.3s;
            transition: all 0.3s;
}
  .button.button-hover08:hover .icon {
    color: #0953AB;
    right: -70px;
    -webkit-transition: all 0.3s;
            transition: all 0.3s;
}
  .button.button-hover08:hover .button-bg {
    width: 100%;
    -webkit-transition: all 0.3s;
            transition: all 0.3s;
}
  .button.button-hover09 .button-text {
    color: #0953AB;
    -webkit-transition: all 0.3s;
            transition: all 0.3s;
}
  .button.button-hover09 .icon {
    position: absolute;
    top: 0;
    right: -30px;
    z-index: 2;
    -webkit-transition: all 0.3s;
            transition: all 0.3s;
}
  .button.button-hover09 .button-bg {
    width: 0;
    height: 100%;
    background-color: #0953AB;
    -webkit-transition: all 0.3s;
            transition: all 0.3s;
}
  .button.button-hover09:hover .button-text {
    color: #fff;
    -webkit-transition: all 0.3s;
            transition: all 0.3s;
}
  .button.button-hover09:hover .icon {
    color: #fff;
    right: -70px;
    -webkit-transition: all 0.3s;
            transition: all 0.3s;
}
  .button.button-hover09:hover .button-bg {
    width: 100%;
    -webkit-transition: all 0.3s;
            transition: all 0.3s;
}
.flow .label-danger{
	position: relative;
	top:-2px;
}
/****************************************
.table
****************************************/
.table-style1{
  width: 100%;
  border-spacing: 0;
  font-size:14px;
  border-top:1px solid #aaa;
}
.table-style1 th{
  color: #000;
  padding: 8px 15px;
  background: #eee;
  background:-moz-linear-gradient(#eee, #ddd 50%);
  background:-webkit-gradient(linear, 100% 0%, 100% 50%, from(#eee), to(#ddd));
  font-weight: bold;
  border-top:1px solid #aaa;
  border-bottom:1px solid #aaa;
  border-right:1px solid #aaa;
  line-height: 120%;
  text-align: center;
  text-shadow:0 -1px 0 rgba(255,255,255,0.9);
  box-shadow: 0px 1px 1px rgba(255,255,255,0.3) inset;
}
.table-style1 th:first-child{
  border-left:1px solid #aaa;
  border-radius: 5px 0 0 0;
}
.table-style1 th:last-child{
  border-radius:0 5px 0 0;
  border-right:1px solid #aaa;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
.table-style1 tr td{
  padding: 8px 15px;
  text-align: center;
      box-shadow:1px 2px 2px 1px rgba(0,0,0,0.1);
}
.table-style1 tr td:first-child{
  border-left: 1px solid #aaa;
}

.table-style1 tr td:last-child{
  border-right: 1px solid #aaa;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
.table-style1 tr{
  background: #fff;
}
.table-style1 tr:nth-child(2n+1){
  background: #f5f5f5;
}
.table-style1 tr:last-child td{
  border-bottom:1px solid #aaa;
  box-shadow: 2px 2px 1px rgba(0,0,0,0.1);
}
.table-style1 tr:last-child td:first-child{
  border-radius: 0 0 0 5px;
}
.table-style1 tr:last-child td:last-child{
  border-radius: 0 0 5px 0;
}
.tablebox {
  padding: 25px 15px;
  border: 1px solid #eaeaea;
  -webkit-border-radius: 4px;
          border-radius: 4px;
  background: #fff;
}
.table>tbody>tr>th {
  border-top: none;
  border-bottom: 2px solid #ddd;
}
.table>tbody>tr>th:first-child,
.table>tbody>tr>td:first-child {
  padding: 8px 8px 8px 15px;
}
td{
	width: 100%;
}
/****************************************
.会社概要
****************************************/
#key{
	font-size:30px;
}
.vv2{
  font-size:30px;
  font-weight: bold;
  background: -webkit-linear-gradient(#39f, #cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.dai{
	font-weight: bold;
	margin: 30px auto;
	font-size:30px;
	text-align: center;
}
.dai2{

	margin: 30px auto;
	font-size:30px;
	text-align: center;
}
.dai3{

	line-height:40px;
	font-size:17px;
	text-align: center;
}
@media screen and (max-width: 500px) {
.dai{
	font-size:20px;
}
.dai2{
	font-size:18px;
	font-weight: bold;
    margin-top:-5px;
}
.dai3{
	font-size:15px;
}
}
.g-map{
	line-height:40px;
	text-align: center;
}
.inner{
	text-align: center;
}
@media screen and (max-width: 768px) {
.ttop{
	margin-top: 139px;
}
}
@media screen and (max-width: 500px) {
.inner{
  font-size: 15px;
}
}
@media screen and (max-width: 320px) {
.inner{
  font-size: 17px;
}
}
.kasen {
	margin: 30px auto;
    border-bottom: solid 7px #ff1;
}
@media screen and (max-width: 500px) {
.inner{
	font-size:20px;
	}
.kasen {
	/*font-size:2vw;*/
	font-size:20px;
    border-bottom: solid 4px #ff1;
}
}
@media screen and (max-width: 320px) {
.kasen {
	font-size:13px;
}
}
.kasen2{
	width: 100%;
	margin:30px auto;
    text-align: center;
}
@media screen and (max-width: 500px) {
	.kasen2 p{
    text-align: center;
}
}
@media screen and (max-width: 320px) {
	.kasen2 p{
   width: 95%;
   	margin:15px auto;
}
}
.kasen3{
	margin-top: 50px;
}
.trim-image-to-circle1 {
    background-image: url("../img/fftt1.png");
    width:  400px;
    height: 290px;
    border-radius: 50%;
    border: 9px solid #00cc00;  /* 枠線を付加 */.
	border: 12px solid rgba(0,255,0,0.3); /* 半透明の枠線を付加 */
}
.trim-image-to-circle2 {
    background-image: url("../img/fftt2.png");
    width:  400px;
    height: 290px;
    border-radius: 50%;
    border: 9px solid #00cc00; /* 枠線を付加 */.
	border: 12px solid rgba(0,255,0,0.3); /* 半透明の枠線を付加 */
}
#riyu{
	width:100%;
	text-align:center;
	background:url(../img/safety1.jpg) no-repeat;
	background-position:center center;
}
#riyu h3{
	margin-top:60px;
	font-weight:bold;
	color:#0000ff;
    font-weight: bold;
    text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
    -1px 1px 0 #FFF, 1px -1px 0 #FFF, 0px 1px 0 #FFF,  0-1px 0 #FFF,
    -1px 0 0 #FFF, 1px 0 0 #FFF;
}
#riyu h3{
	margin:0 auto;
	padding:.25em;
}
#omoi p,#riyu p{
	margin:20px 0 40px; line-height:2em; font-size:16px; color:#fff;
	text-shadow:1px 1px 0 #444;
}
.animewrap{
	width: 100%;
}
#riyu{
	margin:80px auto 0;
	background-position:center center;
}
 #riyu h3{margin-top:10px; font-size:2vw; width:90%; padding:.25em; }
 #riyu p{margin:10px 0 20px; font-size:1.5vw; }
 .mobilebrnone{display:none;}
@media screen and (min-width: 500px) and (max-width:860px){
 #riyu h3{
	 font-size:3.5vw;
	}
 #riyu p{margin:10px 0 20px; font-size:3vw; }
}
@media screen and (max-width: 500px) {
 #riyu h3{
	 font-size:3.5vw;
	}
 #riyu p{margin:10px 0 20px; font-size:3vw; }
}
/****************************************
.エリア紹介
****************************************/
.box29 {
    margin: 2em 0;
    background: #dcefff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
}
.box29 .box-title {
	text-align: left;
    font-size: 1.1em;
    background: #5fb3f5;
    padding: 4px;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box29 p{
		text-align: left;
}

.aria-item {
  display: flex;
  align-items: center;
  padding: 20px 0;
}


@media screen and (max-width: 768px) {
.box29 .box-title {
    text-align: left;
	padding-left: 10px;
}
}
@media screen and (max-width: 45
0px) {
.box29 .box-title {
    font-size: 1.1vw;
}
}
.box29 p {
    padding: 15px 20px;
    margin: 0;
}
@media screen and (max-width: 600px) {
.eria img{
width: 60%;
}
}
/****************************************
.Q&A
****************************************/
#container {
	min-width: 320px;
	max-width: 800px;
	margin: auto;
	padding: 1em 2em;
}

/*　box-sizingの設定　*/
div,
p,
img {
	box-sizing: border-box;
}

/*　会話ベーススタイル　*/
.message {
	overflow: hidden;
	margin: 0 0 1em 0;
	padding: 0;
}
.message span {
	display: block;
	margin: 0;
	padding: 0;
}
.message .speaker-name {
	display: none;
}
.message .speaker-icon {
	float: left;
	width: 64px;
}
/*　吹き出しベーススタイル　*/
.message .message-content {
	position: relative;
	box-sizing: border-box;
	width: auto;
	min-height: 64px;
	margin: 0 160px 0 80px;
	padding: 1em;
	color: #333;
	border-radius: 10px;
	background: #e4f2f9;
}
/*　会話詳細スタイル　*/
.message .speaker-icon img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
	border: 2px solid white;
	border-radius: 50%;
}
/*　吹き出しのしっぽ　*/
.message .message-content:before {
	position: absolute;
	top: 20px;
	left: -20px;
	display: block;
	width: 0;
	height: 0;
	content: '';
	border: 10px solid transparent;
	border-right-color: #e4f2f9;
}
/*　逆方向の上書きスタイル　*/
.message.myself .speaker-icon {
	float: right;
}
.message.myself .message-content {
	margin: 0 80px 0 160px;
	color: #000;
	background: #F8E0F7;
}
.message.myself .message-content:before {
	right: -20px;
	left: auto;
	border-color: transparent;
	border-left-color: #F8E0F7;
}
/*　その他の付加的な装飾　*/
#chat-title {
	font-size: 19px;
	font-size: 1.2rem;
	font-weight: normal;
	margin: 0.5em;
	padding: 0.5em;
	text-align: center;
	color: white;
	border-radius: 0;
	background: #4472aa;
}
.pagetop {
	padding: 1em;
	text-align: center;
}
.pagetop a {
	font-size: 16px;
	font-size: 1rem;
	display: inline-block;
	padding: 0.5em 2em;
	text-align: center;
	text-decoration: none;
	color: white;
	border-radius: 100px;
	background: #4472aa;
}
.message.myself + .message.myself {
	margin-top: -0.5em;
}
@media screen and (max-width: 640px) {
	#container {
		padding: 0 1em;
	}
	#chat-title {
		margin: 0.5em 0.5em 1em;
	}
	.message .message-content {
		margin-right: 0;
	}
	.message.myself .message-content {
		margin-left: 0;
	}
}
/****************************************
.施工紹介
****************************************/
.pic2{
	position:relative; overflow:hidden;
}
.pic2 div{
	position:absolute;
	left:0;
	bottom:-60px; background:rgba(0,0,0,1); color:#fff;
	padding:6px;
}
@media screen and (max-width: 500px) {
.pic2{
	position:relative; overflow:hidden;
}
.pic2 div{
	position:absolute;
	left:0;
	bottom:-100px; background:rgba(0,0,0,1); color:#fff;
	padding:6px;
	opacity: 0.8;
}
}
.pic5{
	width:100%;
}
pic6{
	font-size: 100%;
}
#list{
	list-style:none;
	margin:0;
	padding:0;
	width:100%;
    padding-bottom: 30%;
}
#list li{
	width:80px;
	border:1px solid #ccc; margin:5px;
	padding:5px;
	float:left;
}

#list ul{
	background: #ff1;
}
/****************************************
.商品紹介
****************************************/
@media screen and (min-width: 768px) {
.monob li{
	padding: 10px;
}
}


 .elTitle{
	overflow: hidden;
	margin-top: 15px;
	color:#333;
   	font-weight:bold;
	font-size:12px;
}
.elExpwrap{
	height:100%;
	background-color:rgba(0,0,0,0.75);
	position:absolute;
	top:365px;
	right:0.5px;
	padding-top:15px;
	transition:top 0.3s;
}
.slideup:hover > .elExpwrap{
	top:0px;
	transition:top 0.3s;
}
.elExp ul{
	list-style:none;
}
.smalltxt{
	font-size:4vw;
}
.elExp, .elExp li{
	color:#fff;
	font-size:14px;
	padding:3px 5px;
}

@media screen and (max-width: 500px) {
 .elTitle{
	font-size:2.9vw;
}
}
@media screen and (max-width: 375px) {
 .elTitle span{
	font-size:2.7vw;
}
}
.elCount{
	margin-left:-0.3em;
	display:inline-block;
	line-height:17px;
	font-size:11px;
	color:#555;
}


.elExp{
	font-size:16pt;
}

/****************************************
.スタッフ紹介
****************************************/
.staff-list {
  text-align: center;
  /* padding: 0 20px 25px 20px !important; */
  padding: 0 20px 50px 20px !important;

}
.staff-card {
  position: relative;
  box-shadow: 1px 1px 2px #c7c7c7;
}
.staff-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}

.staff-card .murai {
   object-position: top center;
}
.staff-card .ikemata {
   object-position: top center;
}
.staff-card .hayashi {
   object-position: top center;
}
.staff-card .murai {
   object-position: top center;
}
.staff-card .ikeda {
   object-position: top center;
}
.staff-card .mutou {
   object-position: top center;
}
.staff-card .tamaki {
   object-position: top center;
}
.staff-card .fukushima {
   object-position: top center;
}

.text-box {
  width: 100%;
  height: 80px;
  color: black;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}


.text-box h3 {
  font-size: 17px;
  font-weight: bold;
  margin: 0;
  padding-top: 20px;
  padding-bottom: 5px;
}
.text-long-size h3 {
  font-size: 14px !important;
}

/* .color-parts {
  position: absolute;
  bottom:0;
  right: 0;
  width: 20px;
  height: 20px;
  background-color: blue;
} */

.position {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  transform: rotate(180deg);
}
.color-parts {
  aspect-ratio: 1/cos(0deg);
  clip-path: polygon(0 0,100% 0,0 100%);
  background-color: blue;
}
.toukatsu {
  background-color: rgb(43,104,173);
}
.eigyou {
  background-color: rgb(34, 139, 34);
}
.koujibu {
  background-color: rgb(206,58,92);
}
.genba-kanri {
  background-color: rgb(191,217,195);
}
.zumen-sekkei {
  background-color: rgb(173, 216, 230);
}
.exterior-planner {
  background-color: rgb(217,91,150);
}
.ec-jigyoubu {
  background-color: rgb(255, 165, 0);
}

@media screen and (max-width: 992px){
  .staff-card img {
    height: 350px;
  }
}
@media screen and (max-width: 600px){
  .staff-card img {
    /* height: 170px; */
    height: 200px;
  }
}
@media screen and (max-width: 768px){
  .text-box h3 {
    font-size: 16px;
  }
}