@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 100;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 200;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 300;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Medium");
  font-weight: 400;
}
@font-face {
  font-family: "Yu Gothic";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}

body {
 font-family: "游ゴシック", "Yu Gothic", "YuGothic", "ヒラギノ角ゴシック", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
 font-feature-settings : "palt" 1;
 margin: 0;
 padding: 0;
 color: #000;
 -webkit-text-size-adjust: 100%;
 }


* {
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 -o-box-sizing: border-box;
 -ms-box-sizing: border-box;
 box-sizing: border-box;
 }

a {
 color: #000;
 -webkit-transition: 0.5s;
 -moz-transition: 0.5s;
 -o-transition: 0.5s;
 -ms-transition: 0.5s;
 transition: 0.5s;
}
a:hover {
 color: #FFE660;
 }
a:hover img {
 -webkit-animation: zoom .5s;
 animation: zoom .5s;
}
@-webkit-keyframes zoom {
	50% {
		-webkit-transform: scale(1.05);
	}
}
@keyframes zoom {
	50% {
		transform: scale(1.05);
	}
}

h1 {
 font-size: 150%;
 color: #FFE600;
 font-weight: normal;
 position: relative;
 padding-bottom: .5em;
 border-bottom: 4px solid #e9e9e9;
}
h1::after {
 position: absolute;
 bottom: -4px;
 left: 0;
 z-index: 2;
 content: '';
 width: 30%;
 height: 4px;
 background-color: #88B04B;
}

h2 {
 width: 100%;
 text-align: center;
 color: #555555;
 font-family: 'Cabin Sketch', cursive;
 font-weight: normal;
 font-size: 2.5em;
 margin: 0 auto 20px;
 }
h3 {
 font-family: 'Nixie One', cursive;
 color: #555555;
 }

h4 {
 padding: 0 .5em .5em 2.5em;
 border-bottom: 1px solid #ccc;
 position: relative;
}

h4::before,
h4::after {
 position: absolute;
 content: '';
 border-radius: 100%
}
h4::before {
 top: 0;
 left: 0;
 z-index: 2;
 width: 25px;
 height: 25px;
 background: rgba(255, 230, 0, .6);
}
h4::after {
 top: .7em;
 left: 1em;
 width: 15px;
 height: 15px;
 background: rgba(210, 210, 210, .5);
}


/*=================================
各ページ共通
==================================*/

.top_header {
 float: right;
 right: 0;
 background: rgba(136, 176, 75, 0.9);
 text-align: right;
 color: #FFF;
 padding: 25px 30px;
}

.top_header a {
 font-family: 'Nixie One', cursive;
 font-weight: bold;
 color: #FFF;
 font-size: 90%;
 letter-spacing: 3px;
 text-decoration: none;
 text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
}
.top_header a:hover {
 color: #FFE660;
 }

.common_header {
 padding: 10px 0 0;
 margin-top: 0;
 background: rgba(255, 255, 255, 0.9);
 text-align: center;
 box-shadow: 0px 3px 15px rgba(0,0,0,0.9);
 }
 .common_header a {
 font-family: 'Nixie One', cursive;
 font-weight: bold;
 font-size: 90%;
 letter-spacing: 3px;
 text-decoration: none;
}
.common_header a:hover {
 color: #FFE660;
 }
.c_h_flexbox {
 display: flex;
}
.header_logo{
 padding-left: 30px;
 align-self: center;
}
.header_menu {
 flex-grow: 2;
 align-self: center;
 text-align: right;
 padding-right: 30px;

}


/*ページTOPへ戻る*/
.pagetop {
 display: none;
 position: fixed;
 bottom: 5px;
 right: 10px;
 width: 60px;
 height: 60px;
 background:  #FFE600;
 border-radius: 50px;
 -webkit-border-radius: 50px;
 -moz-border-radius: 50px;
 }
.pagetop a {
 display: block;
 width: 15px;
 height: 15px;
 background: transparent;
 border-top: 6px solid #FFF;
 border-left: 6px solid #FFF;
 transform: rotate(45deg);
 margin: 23px auto;
 }
.pagetop a:hover {
 opacity : 0.4;
 }

/*パンくずリスト*/
.breadcrumb {
 position: absolute;
 top: 80px;
 left: 0;
 list-style: none;
 font-size: 14px;
 color: #FFF;
 }
.breadcrumb a {
 color: #FFE600;
 text-decoration: none;
}
.breadcrumb a:hover {
 color: #88B04B;
}
.breadcrumb li {
 display: inline-block;
}
.breadcrumb li::after {
 content: '≫';
 padding: 0 5px;

}
.breadcrumb li:last-child::after {
 content: none;
 }

/*サブリンク*/
aside {
 background:  #dfdfdf;
 padding: 50px;
 margin: 0;
 }
aside ul li {
	position: relative;
}
aside ul li::after,
aside ul li::before {
	display: block;
	content: '';
	position: absolute;
}
aside ul li::after {
	top: .35em;
	left: -1.2em;
	width: 14px;
	height: 14px;
	background-color: #FFE600;
	border-radius: 100%;
}
aside ul li::before {
	z-index: 2;
	top: .625em;
	left: -.975em;
	width: 4px;
	height: 4px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}


.common {
 padding: 80px;
 margin: 80px auto 0;
 background: rgba(255, 255, 255, 0.95);
 }

.text-area {
 max-width: 700px;
 margin: 0 auto;
 }

.text-area p {
 margin: 10px auto 50px;
 }

.common ul li { list-style-type: decimal; }

.common ul {
 margin: 0 auto 50px;
 }

hr {
 margin: 150px 0 100px;
 border-top: 1px dashed #7f7f7f;
 }

.photo {
 width: 100%;
 margin: 0 auto;
 padding: 0;
 }
figure {
 margin: 0;
 }

figure img {
 max-width: 100%;
 height: auto;
 border-radius: 3px;
 -webkit-border-radius: 3px;
 -moz-border-radius: 3px;
 }



/*==============================
トップページ
================================*/

/* 四季・アニメーション初期設定*/

section .inner div {
    opacity: 0;
    -webkit-transform-origin: 0px 0px;
    -ms-transform-origin: 0px 0px;
    transform-origin: 0px 0px;
    -webkit-animation-name: Drop;
    animation-name: Drop;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

/*花びら・葉っぱ設定*/

#shiki .inner div {
 position: absolute;
 display: block;
 width: 11px;
 height: 17px;
 background: url("../img/summer.png") no-repeat;
}

#shiki .inner div.flake2,
#shiki .inner div.flake4,
#shiki .inner div.flake6,
#shiki .inner div.flake8 {
    background-size: 5px 6px !important;
}


/*表示位置とアニメーションの時間設定*/
.flake1 {
    left: 50px;
    -webkit-animation-duration: 2.5s;
    animation-duration: 2.5s;
}

.flake2 {
    left: 100px;
    -webkit-animation-duration: 2.7s;
    animation-duration: 2.7s;
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s;
}

.flake3 {
    left: 150px;
    -webkit-animation-duration: 2.9s;
    animation-duration: 2.9s;
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

.flake4 {
    left: 200px;
    -webkit-animation-duration: 2.4s;
    animation-duration: 2.4s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

.flake5 {
    left: 250px;
    -webkit-animation-duration: 2.4s;
    animation-duration: 2.4s;
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.flake6 {
    left: 300px;
    -webkit-animation-duration: 2.2s;
    animation-duration: 2.2s;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

.flake7 {
    left: 350px;
    -webkit-animation-duration: 2.7s;
    animation-duration: 2.7s;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

.flake8 {
    left: 400px;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}

/*アニメーションの設定*/

@-webkit-keyframes Drop {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 0;
    }

    50% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 0.3;
    }
}

@keyframes Drop {
    0% {
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        opacity: 0;
    }

    50% {
        -webkit-transform: translateY(50px);
        transform: translateY(50px);
        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
        opacity: 0.3;
    }
}

/*　↑　四季・アニメーションここまで*/

#shiki {
 background: url("../img/treemanlogo.png") center center no-repeat;
 height: 300px;
 width: 450px;
 margin: 0 auto;
 position: relative;
 -webkit-animation: fade 3s;
 }
@-webkit-keyframes fade {
	0%{
		opacity:0;
	}
	50%{
		opacity:0.8;
	}
	100% {
		opacity:1;
	}
 }


#treeman {
 color: #000;
 font-size: 120%;
 margin: 0 50px 200px 50px;
 padding: 50px;
 width: 600px;
 background: rgba(255, 255, 255, 0.9);
/* background: rgba(229, 229, 229, 0.9);*/
}



/*============================
斜め区切り
==============================*/
.contents {
  position: relative;
  overflow: hidden;
  margin: 3% 0;
  padding: 90px 0 0;
}

.contents:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 96%;
  margin: 3% -10% 0;
  background: #FFF;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  z-index: -1;
}

.contents:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 96%;
  margin: 3% -10% 0;
  background: #88B04B;
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
  z-index: -2;
}

.contents_inner {
  box-sizing: boder-box;
  width: 100%;
  max-width: 1350px;
  margin: 0 auto;
  padding: 100px 10px;
  text-align: center;
}


.top-work_wrap {
 margin: 60px auto 200px;
}

.top-work {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;
 margin-top: 60px;
 }
.top-work img {
 width: 300px;
 border: solid 1px #FFE600;
 }

.new_text {
 padding-bottom: 90px;
 padding-top: 0;
 margin: 0;
 }
.animated {
 color: #FFE660;
}

.insta_frame {
 max-width: 600px;
 margin-bottom: 150px;
}

.gst_button {
 margin: 0 auto;
 }
.gst_button a {
 color: #555;
 font-weight: ;
 background: #FFE600;
 border: solid 1px #FFE600;
 border-radius: 5px;
 padding: 12px 60px;
 text-decoration: none;
 }
.gst_button a:hover {
 background-color: #FFF;
 color: #FFE600;
 border: solid 1px #FFE600;
 transition: 0.5s;
 }

/*============================
会社概要・事業案内
==============================*/
.main {
 display: -webkit-flex;
 display: flex;
 justify-content: center;
}

.main section {
 margin: 10px 20px;
 padding: 20px;

}

.main span, .contact_form span {
 font-size: 80%;
 }

.col-1, .col-2 {
max-width: 400px;
 }

dt {
 border-bottom: 1px dotted #556B2F;
 border-top: 1px dotted #556B2F;
 font-weight: bold;
 color: #556B2F;
 }

dd {
 padding: 15px 0 60px 0;
 margin-left: 0;
 }


/*メールフォーム*/
.contact_form {
 max-width: 600px;
 margin: 100px auto 0;
}
.contact_info {
 margin: 60px auto;
}

button, input, select, textarea {
font-family : inherit;
font-size : 100%;
}

input, textarea {
 box-sizing: border-box;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 border: solid 1px #c0c0c0;
 border-radius: 5px;
 -webkit-appearance:none;
 }
input {
 padding: 10px;
 font-size: 16px;
 margin-bottom: 15px;
 }

input[type="text"], input[type="email"], input[type="tel"]{
 width: 100%;

 }

textarea {
 padding: 10px;
 font-size: 16px;
 margin-bottom: 15px;
 width: 100%;
 height: 280px;
 }


input[type="button"] {
 width: 100%;
 color: #FFF;
 font-weight: bold;
 background-color: #88B04B;
 border: solid 1px #88B04B;
 padding: 15px;
 }

input[type="button"]:hover {
 background-color: #FFF;
 color: #88B04B;
 border: solid 1px #88B04B;
 transition: 0.5s;
 }

input:required, input:invalid	{
 background-image: url("../img/caution.png");
 background-repeat: no-repeat;
 background-position: right center;
 }

input:valid {
 background-image: none;
 }

.contact_form p {
 margin-top: 30px;
 }
label {
 letter-spacing: 6px;
 }
label span {
 color: #ff0000;
 }

input:focus, textarea:focus {
 outline: solid 4px rgba(255, 230, 0, 0.7);
 }
 .reception {
  font-size: 90%;
 }



#pageback {
 margin: 70px auto;
 }
#pageback a {
 color: #555;
 font-weight: bold;
 background: #FFE600;
 border: solid 1px #FFE600;
 border-radius: 5px;
 padding: 17px 50px;
 text-decoration: none;
 }
#pageback a:hover {
 background-color: #FFF;
 color: #FFE600;
 border: solid 1px #FFE600;
 transition: 0.5s;
 }


/* topページのギャラリー*/
#gallery {
 padding: 60px 0;
 background: rgba(203, 203, 203, 0.9);
 margin-top: 300px;
 }

.flexbox {
 display:-webkit-box;
 display:-moz-box;
 display: box;

 display: -webkit-flex;
 display: flex;

 -webkit-flex-direction: column;
 flex-direction: column;

 -webkit-flex-wrap: wrap;
 flex-wrap: wrap;

 height: 100vw;
 padding: 0;
 }

.item {
 position: relative;
 width: 33.33%;
 max-width: 100%;
 }

.title {
 position: absolute;
 top: 48%;
 left: 0;
 width: 100%;
 padding: 0 3%;
 font-size: 30px;
 text-shadow: 0 0 8px rgba(0,0,0,0.42);
 }

.item img {
 width: 100%;
 display: block;
 }

/* 表示幅が860px以下 */
@media ( max-width : 860px ){
  .flexbox{
    height:220vw;
  }
  /* 2カラムにする */
  .flexbox .item{
    width: 50%;
  }
}
/* 表示幅が667px以下 */
@media ( max-width : 667px ){
  .flexbox{
    height:auto;
  }
  /* １カラムにする */
  .flexbox .item{
    width: 100%;
  }
}


#masonry {
 width: 100%;
 padding: 10px;
 overflow: auto;
 margin: 0 auto;
 }

.grid {
 width: 360px;
 margin: 5px;
 padding: 5px;
 float: left;
 display: inline;
 }




 /*============================
   施工例一覧ページ
 ==============================*/
.work_list_flexbox {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 max-width: 1200px;
 margin: 10px auto;
}
.work_list a {
 text-decoration: none;
}

.work_list figure {
 max-width: 400px;
 padding: 90px 30px 0 30px;
}



/*============================
  施工例個別ページ
==============================*/

.work_photo {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 }

.work_item {
 padding: 10px;
 max-width: 900px;
 }

.works_totop {
 max-width: 100%;
 margin: 30px auto;
 text-align: center;
}






/*==============================================
 　レスポンシブ-スタイル　スマホ・タブレット共通
  =============================================*/
/*==  1024px以上なら  ここから==*/
@media only screen and (min-width: 1024px) {
  body {
   background-image: url("../img/bg-img.jpg");
   background-position: center center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;
   background-color: #f7f7f7;
   }


.mobile-top, .gblnv_box {
display: none;
}
				}
/*==  1024px以上なら  ここまで==*/



/*==  1023px以下なら  ここから==*/
@media only screen and (max-width: 1023px) {

/* ハンバーガーメニュー */
.gblnv_box{
 position: fixed;
 top: 10px;
 right: 0;
 z-index: 100;
 text-align: right;
 font-size: 130%;
 background: rgba(255,255,255, 0);
 font-family: 'Nixie One', cursive;
 text-shadow: 0 0 20px rgba(0, 0, 0, 0.6);
 font-weight: bold;
 letter-spacing: 2px;
 }
.gblnv_box span { color: #333; }
.gblnv_box a {margin: 15px 20px 10px; color: #FFF;}
.gblnv_block{
 background: rgba(136, 176, 75, 0.9);
 color: #FFF;
 height:111vh;
 display: none;
 text-align: left;
 margin-top: -100px;
 padding-top: 100px;
 padding-right: 20px; }
.gblnv_block ul{padding: 5px; list-style: none;}
.gblnv_block ul li{line-height: 180%;}
.gblnv_block ul li a{color: #FFF; line-height: 360%; text-decoration: none;}
.gblnv_block ul li a:hover{color: #FFF;}
.onanimation{display: block;}

.menu-trigger,
.menu-trigger span {display: inline-block; transition: all .4s; box-sizing: border-box;}
.menu-trigger {position: relative; width: 36px; height: 23px;}
.menu-trigger span {
 position: absolute;
 left: 0;
 width: 100%;
 height: 2px;
 background-color: #333;
 border-radius: 4px;
 }
.menu-trigger span:nth-of-type(1) {
 top: 0;
 }
.menu-trigger span:nth-of-type(2) {
 top: 10px;
 }
.menu-trigger span:nth-of-type(3) {
 bottom: 0;
 }
.menu-trigger.active span:nth-of-type(1) {
 -webkit-transform: translateY(8px) rotate(-45deg);
 transform: translateY(8px) rotate(-45deg);
 }
.menu-trigger.active span:nth-of-type(2) {
 left: 50%;
 opacity: 0;
 -webkit-animation: active-menu-bar .8s forwards;
 animation: active-menu-bar .8s forwards;
 }
@-webkit-keyframes active-menu-bar {
    	100% {
    		height: 0;
    	}
    }
@keyframes active-menu-bar {
    	100% {
    		height: 0;
    	}
    }
.menu-trigger.active span:nth-of-type(3) {
 -webkit-transform: translateY(-12px) rotate(45deg);
 transform: translateY(-12px) rotate(45deg);
 }

.mb_sns {
  font-size: 90%;
  font-weight: bold;
 }

hr#mb_separate {
 height: 0px;
 border: 1px solid #FFF;
 width: 30px;
 margin-left: 20px;
 margin-top: 30px;
 margin-bottom: 30px;
 }
.gblnv_menu {
 font-size: 10px;
 padding-right: 20px;
 margin: -10px auto 0 auto;
 font-weight: bold;
 letter-spacing: 1px;
}

/* ハンバーガーメニューここまで */


.top_header, .common_header {
 display: none;
}

.top-work {
 flex-direction: column;
 }
.top-work img {
 width: 90%;
}

#treeman {
 margin: 0 auto 0 auto;
 width: 100%;
 padding: 0;
 }
.treeman-text{
 padding: 0 20px 50px 20px;
 }
.mobile-top img {
 width: 100%;
 }
h3 {
 margin-left: 20px;
 }

.main {
 flex-direction: column;
 font-size: 120%;
 }
.col-1, .col-2 {
 max-width: 900px;
}

#gallery {
 margin-top: 0px;
 }

.flake1 { left: 15%; }
.flake2 { left: 25%; }
.flake3 { left: 35%; }
.flake4 { left: 45%; }
.flake5 { left: 55%; }
.flake6 { left: 65%; }
.flake7 { left: 75%; }
.flake8 { left: 85%; }

#shiki {
 background-size: 180px;
 height: 150px;
 width: 100%;
 }

h1 {
 font-size: 120%;
 }

.common {
 padding: 30px;
 }
aside {
 padding: 10px;
 }
.breadcrumb {
 display: none;
 }


.contents:before {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
 }

.contents:after {
  -webkit-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  transform: rotate(0deg);
 }

.contents_inner {
 padding: 0px 10px 190px;
 }

form {
 padding: 0 20px;
 font-size: 110%;
}
.contact_info {
 font-size: 120%;
 padding: 0 20px;
}

						}

/*==  600px以下なら  ここから==*/
@media only screen and (max-width: 600px) {
.work_list_flexbox {
 flex-direction: column;
}
.work_list figure {
 max-width: 600px;
  padding: 90px 10px 0 10px;
}
.gst_button a {
 padding: 20px 60px;
}
.reception {
 font-size: 120%;
 padding: 20px;
}
.text-area p {
 font-size: 130%;
 }

            }