@charset "utf-8";

/*==========================================
 
===========================================*/
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
*:focus{
 outline: none;
}
/*=== clearfix ===*/
.cf {
  zoom: 1;
}
.cf:before, .cf:after {
  content: "";
  display: table;
}
.cf:after {
  clear: both;
}
/*=== フォント ===*/
html{
 font-size: 62.5%;
}
body {
 -webkit-text-size-adjust: 100%;
 font-family: 'M PLUS Rounded 1c','M+ C Type-1 (basic latin) Light','M+ Type-1 (general-j) Light', "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
 font-size: 1.6rem;
 line-height: 1.5;
}
.fw-bold{
 font-family: 'M PLUS Rounded 1c','M+ C Type-1 (basic latin) Bold','M+ Type-1 (general-j) Bold';
 font-weight:bold;
}
br{/*IE対策*/
 font-family:"メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
}
/*=== リンク ===*/
a{
 color: #000;
 text-decoration: none;
 transition: .5s ease-in-out;
}
a:hover {
 text-decoration: none;
}
/*=== 【TEL】リンク ===*/
@media screen and (min-width: 768px){
a[href^="tel:"] {
 pointer-events: none!important;
 cursor: default!important;
}
}
/*=== 画像 ===*/
img{
 max-width: 100%;
}
/*=== 基本幅 ===*/
.wrap{
 max-width: 960px;
 width: 100%;
 margin: 0 auto;
}
.wrap-inner{
 padding: 0 10px;
}
/*=== FLEX ===*/
.row{
 display: flex;
}
@media screen and (min-width: 768px){
.pc-row{
 display: flex;
}
}

/*=== hover Action ===*/
@media screen and (min-width:768px) {
/*memo 【_d】aタグに直*/
/*= opacity =*/
.hover_oc_d:hover,
.hover_oc a:hover{
 opacity:  0.8;
}
/*= 縦回転 =*/	
.hover_rotation a,
.hover_rotation a span {
  display: inline-block;
}
.hover_rotation a span {
  transition: .5s;
}
.hover_rotation a:hover span {
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
 font-family:'M+ C Type-1 (basic latin) Bold','M+ Type-1 (general-j) Bold';
 font-weight: bold;
}
}
/*=== アンカーリンク ===*/
.anchor-link{
 position: relative;
 top: -115px;
 display: block;
}
@media screen and (max-width:767px) {
.anchor-link{
 top: -54px;
}
}
/*=== パンくずリスト ===*/
.breadcrumb {
 background: #f9f4ea;
 font-size: 1.4rem;
 padding: 2px 0;
}
@media screen and (min-width:768px) {
.breadcrumb a:hover{
 text-decoration: underline;
}
}
@media screen and (max-width:767px) {
.breadcrumb {
 font-size: 1.2rem;
}
}
/*=== SP-NONE / PC-NONE ===*/
@media screen and (min-width:481px) {
.pc-none_s{
 display: none;
}
}
@media screen and (min-width:768px) {
.pc-none{
 display: none;
}
}
@media screen and (max-width:767px) {
.sp-none{
 display: none;
}
}
@media screen and (max-width:480px) {
.sp-none_s{
 display: none;
}
}
/*==========================================
 アニメーション
===========================================*/
@keyframes jumpingtwo {
0% {
transform:scale(1.1, 0.9)
}
3% {
transform:scale(0.9, 1.1) translate(0, -5px)
}
7.5% {
transform:scale(1, 1) translate(0, -3px)
}
9% {
transform:scale(1, 1) translate(0, 0px)
}
58% {
transform:scale(1, 1)
}
96% {
transform:scale(1, 1)
}
100% {
transform:scale(1, 1)
}
}
.jumping {
	-webkit-transform-origin: bottom center;
	-moz-transform-origin: bottom center;
	-ms-transform-origin: bottom center;
	transform-origin: bottom center;
	-webkit-animation: jumpingtwo 4s ease-in infinite;
	-moz-animation: jumpingtwo 4s ease-in infinite;
	-ms-animation: jumpingtwo 4s ease-in infinite;
	animation: jumpingtwo 4s ease-in infinite
}


/*==========================================
 ヘッダー
===========================================*/
/*固定ヘッダー*/
.main-head{
 background: #1a631a;
 color: #fff;
 padding: 20px 0 0;
}
.main-head::after{
 content: "";
 display: block;
 height: 1px;
 background: #fff;
 width: 100%;
}
.main-head p{
 font-size: 1.2rem;
 line-height: 1.6rem;
}
.main-head-inner{
 max-width: 960px;
 width: 100%;
 margin: 0 auto;
 padding: 0 10px;
 display: flex;
 justify-content: space-between;
}
.main-head .lead{
 background: url(../img/head-img.png) no-repeat bottom center;
 height: 90px;
 max-width: 164px;
 width: 100%;
 text-align: center;
}
.main-head .tel .icon{
 margin-right: 0.5em;
}
#top-head {
    position: fixed;
    width: 100%;
    margin: 0 auto;
    padding: 0 0 0;
    line-height: 1;
    z-index: 10;
}
#top-head:after {
    content: "";
    display: block;
    height: 1px;
    background: #fff;
    width: 100%;
}
 
#top-head a,
#top-head {
    color: #000;
    text-decoration: none;
}
#global-nav{
 border-top: 2px solid #1a631a;
 padding: 20px 2%;
 background: #fff;
}
#global-nav ul {
 display: flex;
 justify-content: center;
}
#global-nav ul li {
 font-size: 1.4rem;
 letter-spacing: 0.1em;
}
#global-nav ul li:not(:last-child)::after{
 content: "/";
 color: #003e00;
}
#global-nav ul li a {
 color: #003e00;
 padding: 0 23px;
}
/* transition */
#top-head,
#top-head:after,
#global-nav ul li,
#global-nav ul li a,
#top-head.fixed .main-head,
#top-head.fixed .main-head .lead,
#top-head.fixed .main-head .logo{
 transition: all 0.3s ease;
}
/* Fixed */
#top-head.fixed {
    background: rgba(255,255,255,.7);
    height:60px;
    z-index:999;
}
#top-head.fixed:after {
}
#top-head.fixed .main-head{
 padding: 7px 0 0;
}
#top-head.fixed .main-head .logo{
 max-width: 50px;
 width: 100%;
 padding: 3px;
}
#top-head.fixed .main-head .lead{
 height: 50px;
}
#top-head.fixed .lead p,
#top-head.fixed .tel p{
 display: none;
}
.inner{
    max-width:100%;
    margin:0 auto;
}
.inner:after {
            content: "";
            clear: both;
            display: block;
        }

@media screen and (min-width: 769px){
#global-nav ul li a,
#global-nav ul li a span {
  display: inline-block;
}
#global-nav ul li a span {
  transition: .5s;
}
#global-nav ul li a:hover span {
  -webkit-transform: rotateX(360deg);
  transform: rotateX(360deg);
 font-weight: bold;
}
}
@media screen and (max-width: 930px){
#global-nav ul li a{
 padding: 0 15px;
}
#global-nav ul li{
 letter-spacing: 0.025em;	
}
}
@media screen and (max-width: 768px) {
    #top-head{
        display: none;
    }
}
/*固定ヘッダーここまで*/

/*==========================================
 イベント情報用スライダー
===========================================*/


/*==========================================
 フッター
===========================================*/
.footer{
 background: #1a631a;
 padding: 0 0 25px;
 color: #fff;
 font-size: 1.4rem;
 border-top: 3px solid #1a631a;
 margin: 200px auto 0;
}
.footer::before{
 content: "";
 display: block;
 height: 1px;
 background: #fff;
 width: 100%; 
}
.footer-line{
 border-top: 2px solid #1a631a;
 border-bottom: 1px solid #fff;
 margin-bottom: 35px;
}
.footer-inner{
 display: flex;
 justify-content: space-between;
}
.footer-data-block{
 max-width: 240px;
 width: 100%;
}
.footer-company-data{
 margin-top: 20px;
}
.footer-company-data a{
 color: #fff;
}
.footer .btn-company{
 display: block;
 background: #fff;
 color: #003e00;
 width: 100%;
 text-align: center;
 margin: 20px auto 0;
 padding: 2px ;
}
.footer .btn-company::before{
 content: "\f101";
 font-family: FontAwesome;
 margin-right: 0.5em;
}
.footer-link-block{
 max-width: 600px;
 width: 100%;
}
.footer-lead-text{
 font-size: 1.3rem;
}
.footer-link-area{
 border-top: 1px solid #fff;
 border-bottom: 1px solid #fff;
 padding: 20px 0;
 margin: 15px auto;
}
.footer-link{
 display: flex;
 flex-wrap: wrap;
}
.footer-link li:not(:last-child){
 margin-right: 3em;
}
.footer-link li a{
 color: #fff;
 line-height: 2.8rem;
}
.footer-link li a::before{
 content: "\f0a9";
 font-family: FontAwesome;
 margin-right: 0.5em;
}
.footer-other-link{
 display: flex;
 justify-content: space-between;
 align-items: center;
 margin-top: 20px;
}
.footer-information{
 display: flex;
 justify-content: space-between;
 max-width: 320px;
 width: 100%;
}
.footer-information li{
 max-width: 150px;
 width: 100%;
 text-align: center;
}
.footer-information li a{
 display: block;
 background: url(../img/icon-arw_btn.png) no-repeat right 3px bottom 3px,url(../img/bg-stripe.png);
 border-radius: 3px;
 font-size: 1.6rem;
 color: #003e00;
 padding: 2px 0;
}
.footer-information .btn-contact::before{
 content: "";
 background: url(../img/icon-mail.png) no-repeat top left;
 background-size: contain;
 width: 20px;
 height:19px;
 display: inline-block;
 vertical-align: middle;
 margin-right: 0.5em;
 margin-top: -4px;
}
.footer-information .btn-topics::before{
 content: "";
 background: url(../img/icon-info.png) no-repeat top left;
 background-size: contain;
 width: 17px;
 height:17px;
 display: inline-block;
 vertical-align: middle;
 margin-right: 0.5em;
 margin-top: -4px;
}
.copyright{
 font-size: 1.3rem;
}
.copyright a{
 color: #fff;
}
@media screen and (min-width:768px){
.footer .btn-company:hover{
 background: #000;
 color: #fff;
}
.footer-information .btn-contact:hover::before,
.footer-information .btn-topics:hover::before{
 transform-origin: bottom center;
 animation: jumpingtwo 4s ease-in infinite;
}
.footer-tel-block .icon{
 display: inline-block;
 max-width: 16px;
 margin-right: 0.5em;
}
.footer-tel-block .number{
 display: inline-block;
 max-width: 144px;
}
}
@media screen and (max-width:880px) {
.footer-inner{
 display: block;
}
.footer-data-block {
 margin: 0 auto 35px;
}
.footer-link-block{
 max-width: none;
}
.footer-other-link{
 display: block;
 text-align: center;
}
.footer-information{
 margin: 15px auto 0;	
}
}
@media screen and (min-width: 0px) and (max-width:767px) {
.footer{
 margin: 100px auto 0;
 padding:0 0 70px;
}
.footer .btn-company{
 padding: 10px 2%;
}
.footer-link{
 display: none;
}
.footer-information li a{
 padding: 10px 0;
}
}
@media screen and (max-width:380px) {
.footer-information{
 display: block;
}
.footer-information li{
 max-width: none;	
}
.footer-information li:first-child{
 margin-bottom: 10px;	
}
}

/*==========================================
 スマホ用メニュー
===========================================*/
.sp-header{
  display:none;
  position: fixed;
    z-index: 99;
    background: rgba(26, 99, 26,1);
    top: 0;
  width:100%;
  min-width: 320px;
  padding:5px 0;
 border-bottom: 1px solid #fff;
}
.sp_header_logo img{
  width:200px;
  padding-left:20px;
}
#spmenu{
  display: none;
}
#sp-navi {
    position: fixed;
    z-index: 100;
    top: 8px;
    right: 5px;
    background-color:transparent;
    font-size: 14px;
}
.sp_navlog{
  margin-top:10%;
  text-align: center;
}
.sp_navlog img {
  max-width: 78px;
  width: 100%;
}
@media screen and (max-width:768px) {
.sp-header,
#spmenu{
  display: block;
}
.sp-btn a:hover{
  cursor: pointer;
  }
}
.sp-btn {
  float: right;
  text-align: center;
  line-height: 1;
}
.sp-btn a {
  color: #fff;
  font-size:12px;
  text-align: center;
  text-decoration: none;
  display: block;
  padding: 0 10px;
}
.sp-btn i {
    color: #fff;
  font-size:30px;
}
.menu-toggle {
    display: none;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.sp-menu {
  width: 100%;
  opacity: 0;
  overflow-y: auto;
  z-index: 9999;
  position: relative;
  height: 100%;
  box-sizing: border-box;
  display: block;
  overflow: auto;
  background: rgba(0,0,0,.95);
  -webkit-overflow-scrolling: touch;
  /*margin-bottom: 64px;*/
}
.sp-menu ul {
    box-sizing: border-box;
    display: table-row;
    display: block;
    width: 90%;
    vertical-align: middle;
    height: 100%;
    margin: 10% auto 0 auto;
}
.sp-menu li {
    color: #fff;
    text-indent: 5px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    margin-bottom: 5px;
}
.sp-menu li:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}
.sp-menu li a {
    color: #fff;
    padding: 12px 0;
    display: block;
  text-decoration: none;
}
.sp-menu .color a {
    color: #fff;
}
.sp-menu li .sp-sub-btn {
    margin: -41px 8px 0 12px;
    display: table;
    display: block;
    float: right;
    padding: 0 0 0 5px;
    width: 40px;
    height: 35px;
    text-align: center;
    position: relative;
    z-index: 100;
}
.sp-menu li .sp-sub-btn i {
    font-size: 1.5rem;
    padding: 0px 0 0 0;
    border-left: 1px solid rgba(255, 255, 255, 0.5);
    display: table-cell;
    vertical-align: middle;
    height: 35px;
    width: 40px;
    text-align: center;
    color: #fff;
}
.sp-menu li ul.sp-menu-sub {
    display: none;
    width: 100%;
    margin: 0;
}
.sp-menu li ul.sp-menu-sub li {
    text-indent: 20px;
    border-bottom: none;
    border-left: none;
    border-right: none;
    width: 100%;
    margin: 0 auto 0 auto;
}
.show {
    -webkit-animation: navi-show 0.7s ease both;
    -moz-animation: navi-show 0.7s ease both;
    animation: navi-show 0.7s ease both;
}
 @-webkit-keyframes navi-show {
 from {
 -webkit-transform: scale(1.2, 1.2);
 -webkit-opacity: 0;
}
 to {
 -webkit-transform: scale(1, 1);
 -webkit-opacity: 1;
}
}
 @-moz-keyframes navi-show {
 from {
 -moz-transform: scale(1.2, 1.2);
 -moz-opacity: 0;
}
 to {
 -moz-transform: scale(1, 1);
 -moz-opacity: 1;
}
}
 @keyframes navi-show {
 from {
 transform: scale(1.2, 1.2);
 opacity: 0;
}
 to {
 transform: scale(1, 1);
 opacity: 1;
}
}
.sp-close {
    padding: 10px;
  background: rgba(0,0,0,1);
    color: #fff;
    border: none;
    margin: 20px auto;
    width: 50%;
    text-align: center;
    cursor: pointer;
}
/*背景固定用*/
.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}


/*==========================================
フッター固定メニュー(SP)
===========================================*/
.sp-bottom-menu {
  display: none;
}
@media screen and (max-width: 768px) {
.sp-bottom-menu {
  display: block;
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 57px;
  z-index: 9;
  background-color:#000;
}
.sp-bottom-menu ul {
  margin: 7px 0 0 0;
}
.sp-bottom-menu li {
  float: left;
  width: 20%;
  text-align: center;
}
.sp-bottom-menu li i {
  color: #fff;
}
.sp-bottom-menu li a {
  color: #fff;
  font-size: 9px;
  text-decoration: none;
 display: block;
}
.sp-bottom-menu li span {
  display: block;
}

/*ホーム*/
.sp-bottom-menu li:nth-child(1) {
  height: 40px;
  margin: -3px 0 0 0;
}
.sp-bottom-menu li:nth-child(1) i {
  font-size: 30px;
}
.sp-bottom-menu li:nth-child(1) span {
  margin: 3px 0 0 0;
}

/*施工事例*/
.sp-bottom-menu li:nth-child(2) {
  height: 40px;
  margin: -1px 0 0 0;
}
.sp-bottom-menu li:nth-child(2) i {
  font-size: 25px;
}
.sp-bottom-menu li:nth-child(2) span {
  margin: 7px 0 0 0;
}

/*お問い合わせ*/
.sp-bottom-menu li:nth-child(3) {
  height: 40px;
  margin: -1px 0 0 0;
}
.sp-bottom-menu li:nth-child(3) i {
  font-size: 24px;
}
.sp-bottom-menu li:nth-child(3) span {
  margin: 8px 0 0 0;
}

/*お電話*/
.sp-bottom-menu li:nth-child(4) {
  height: 40px;
  margin: -3px 0 0 0;
}
.sp-bottom-menu li:nth-child(4) i {
  font-size: 30px;
}
.sp-bottom-menu li:nth-child(4) span {
  margin: 4px 0 0 0;
}

/*ページトップへ*/
.sp-bottom-menu li:nth-child(5) {
  height: 40px;
  margin: -3px 0 0 0;
}
.sp-bottom-menu li:nth-child(5) i {
  font-size: 28px;
}
.sp-bottom-menu li:nth-child(5) span {
  margin: 6px 0 0 0;
}
}

/*==========================================
ページトップへ
===========================================*/
.wrapper{
 position: relative;
}
/*pagetop*/
#pagetop{
  margin:0;
  position:fixed; /*固定*/
  bottom:20px; /*場所を右下に移動*/
  right:20px; /*場所を右下に移動*/
}
#pagetop a{
  display: block;
  text-align: center;
  width:80px;
  height:80px;
  background-color: rgba(255,255,255,0.7);
  color:#003e00;
  border: 1px solid #003e00;
  padding-top:5px;
  transition:.5s all;
  line-height: 1.4;
  margin:0;
  z-index:500;
  text-decoration: none;
}
#pagetop a::before{
 content: "\f106";
 font-family: FontAwesome;
 display: block;
 font-size: 2.4rem;
 font-weight: bold;
 line-height: 0.7em;
}
@media screen and (min-width: 768px) {
#pagetop a:hover{
 background-color:rgba(0,0,0,1);
 color: #fff;
}
}
@media screen and (max-width: 767px) {
#pagetop a{
  display: none;
}
}

/*==========================================
中ページ
===========================================*/
.inner-page-wrap{
 padding-top: 168px;
}
.inner-page-contents{
 margin-top: 80px;
}
@media screen and (max-width: 768px) {
.inner-page-wrap{
 padding-top: 54px;
}
.inner-page-contents{
 margin-top: 40px;
}
}
/*==========================================
準備中・404・サンクスページ
===========================================*/
.anyway{
 text-align: center;
}
.anyway-page-ttl{
 text-align: left;
 font-size:;
 margin-bottom: 25px;
}
.anyway .btn-back{
 margin: 50px auto 0;
}