@charset "utf-8";
/* CSS Document */

/*------------------------------------------------------
				ヘッダー
-------------------------------------------------------*/
header{
	background-image: url(../img/main_img.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 60px;
	padding-bottom: 80px;
}
/*------------------------------------------------------
				ページタイトル
-------------------------------------------------------*/
.page_title{
	padding-top: 320px;
}
.page_title .title_box h2{
	width: 200px;
}
.page2 .page_title .title_box h2{
	width: 240px;
}
.page3 .page_title .title_box h2{
	width: 140px;
}
.page4 .page_title .title_box h2{
	width: 140px;
}
.page6 .page_title .title_box h2{
	width: 180px;
}
.page7 .page_title .title_box h2{
	width: 320px;
}
.page8 .page_title .title_box h2{
	width: 360px;
}
/*　縦ボーダースクロール表示　*/
.marker-animation.active{
    background-position: -100% 2px;
}
.border_box{
	transform: rotate(125deg);
	position: absolute;
	 top: -17%;
}
.marker-animation {
	display: block;
	width: 100px;
  	height: 100px;
	position: absolute;
	left: 50%;
    right: 50%;
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(0,150,67) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(0,150,67) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(0,150,67) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(0,150,67) 50%);
    background-image: linear-gradient(left, transparent 50%, rgb(0,150,67) 50%);
    background-repeat: repeat-x;
    background-size: 200% 2px;
    background-position: 0 2px;
    transition: all 2s ease;
}
.cate_link{
	margin-top: 70px;
}
.cate_link li{
-webkit-transform: skewX(160deg);
-moz-transform: skewX(160deg);
transform: skewX(160deg);
border-right: 1px solid #333;
}
.cate_link li:last-child{
border-right: none;
}
.cate_link li a{
display:block;
transform: skewX(-160deg);
padding:0 10px;
}
/*------------------------------------------------------
				代表挨拶
-------------------------------------------------------*/
.greeting .cate{
	margin-bottom: 80px;
}
.greeting .cate_item .cate_txt1{
	margin-left: 5%;
}
.greeting .box_wrap {
	background-color: #f6ffeb;
}
.greeting .box_wrap:empty{
	display: none;
}
.greeting .box_wrap .box:last-child{
	margin-bottom: 0px;
}
/*------------------------------------------------------
				現場の声
-------------------------------------------------------*/
.voice .cate{
	margin-bottom: 80px;
}
.voice .box_wrap {
	background-color: #f6ffeb;
}
.voice .box_wrap .box:last-child{
	margin-bottom: 0px;
}
.voice .cate_img{
	width: 35%;
	padding-right: 5%;
}
/*------------------------------------------------------
				 造園業の魅力
-------------------------------------------------------*/
.about .cate .box{
	margin-bottom: 80px;
}
.about .cate .box:nth-child(even){
	flex-direction: row-reverse;
}
.about .cate .box:nth-child(even) figure{
	margin-left: 20px;
	margin-right: 0px!important;
}
/*------------------------------------------------------
				事業内容
-------------------------------------------------------*/

.content .cate .box {
    position: relative;
    background: #fff;
    padding: 30px 0 30px;
    margin: 0;
	margin-bottom: 30px;
}
    /* 下三角 */ 
.content .cate .box:before{
        content: "";
        position: absolute;
        bottom: -44px;
        margin-left: -0px;
        border: 22px solid transparent;
        border-top: 22px solid #fff;
        z-index: 2;
    }
.content .cate .box:after {
        position: absolute;
        border: 24px solid transparent;
        border-top-color: #009643;
        border-bottom-width: 0;
        bottom: -25px;
        content: "";
        z-index: 1;
    }

.content .cate .box:last-child:before{
        bottom: 0px;
        border:0px solid transparent;
        border-top: 0px solid #fff;
    }
.content .cate .box:last-child:after {
        border: 0px solid transparent;
        bottom: 0px;
    }
/*------------------------------------------------------
				ギャラリー
-------------------------------------------------------*/
.gallery .cate{
	margin-bottom: 70px;
}
.gallery .cate:last-child{
	margin-bottom: 0px;
}
/*IE個別指定の設定
---------------------------------------------------------------------------*/
@media all and (-ms-high-contrast: none){

.content .cate .box {
    margin: 0;
}
.content .cate .box::after {
    bottom: -25px;
    left: 50.95%;
}
	.content .cate .box::before {
    margin-left: 48.8%;
}

.page7 .info_list .d_table{
	padding-bottom: 15px;
	padding-top: 20px;
}
}




/*ここからタブレット用（768px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 768px){
/*------------------------------------------------------
				ヘッダー
-------------------------------------------------------*/
.button_container {
    right: 60px!important;
    top: 100px!important;
}
/*------------------------------------------------------
				ページタイトル
-------------------------------------------------------*/
.page_title{
	padding-top: 280px;
}
/*------------------------------------------------------
				会社概要
-------------------------------------------------------*/
.info{
	margin-top: 60px;
}
iframe{
	width: 70%!important;
    height: 300px!important;	
}
/*------------------------------------------------------
			　　プライバシーポリシー
-------------------------------------------------------*/
.privacy{
	margin-top: 50px;
}
/*------------------------------------------------------
				サイトマップ
-------------------------------------------------------*/
.sitemap{
	margin-top: 50px;
}
}





/*ここからスマホ用（667px以下）環境の設定
---------------------------------------------------------------------------*/
/*表示を切り替えるウィンドウサイズの指定*/
@media screen and (max-width: 667px){
/*------------------------------------------------------
				ヘッダー
-------------------------------------------------------*/
header{
	padding-top: 40px;
	padding-bottom: 60px;
}
.button_container {
  right:40px!important;
  top:80px!important;
}
/*------------------------------------------------------
				ページタイトル
-------------------------------------------------------*/
.page_title {
    padding-top: 240px;
}
.page_title .title_box h2{
	width: 180px;
}
.border_box {
    top: -10%;
}
.marker-animation {
    width: 80px;
    height: 80px;
}
.cate_link {
    margin-top: 40px;
}
.cate_link li{
border-right: none;
}
/*------------------------------------------------------
				ページタイトル
-------------------------------------------------------*/
.page2 .page_title .title_box h2 {
    width: 180px;
}
.page3 .page_title .title_box h2{
	width: 100px;
}
.page4 .page_title .title_box h2{
	width: 100px;
}
.page5 .page_title .title_box h2{
	width: 160px;
}
.page6 .page_title .title_box h2{
	width: 140px;
}
.page7 .page_title .title_box h2{
	width: 240px;
}
.page8 .page_title .title_box h2{
	width: 280px;
}
.page9 .page_title .title_box h2{
	width: 160px;
}
/*------------------------------------------------------
				代表挨拶
-------------------------------------------------------*/
.greeting .cate_item .cate_txt1 {
    margin-left: 0%;
}
/*------------------------------------------------------
				現場の声
-------------------------------------------------------*/
.voice .cate_item .cate_item2{
	margin-left: 0%;
}
.voice .cate_img{
	width: 60%;
	padding-right: 0%;
}
/*------------------------------------------------------
				 造園業の魅力
-------------------------------------------------------*/
.about .cate .box{
	margin-bottom: 50px;
}
.about .cate .box:nth-child(even) figure {
    margin-left: 0px!important;
    margin-right: 0px!important;
}
/*------------------------------------------------------
				 事業内容
-------------------------------------------------------*/
.content .cate .box{
	flex-direction: column-reverse;
}
/*------------------------------------------------------
				ギャラリー
-------------------------------------------------------*/

/*------------------------------------------------------
			　　プライバシーポリシー
-------------------------------------------------------*/
.info {
    margin-top: 50px;
}
	.page7 iframe {
    width: 100%!important;
    height: 220px!important;
		}

/*------------------------------------------------------
			　　プライバシーポリシー
-------------------------------------------------------*/

/*------------------------------------------------------
				サイトマップ
-------------------------------------------------------*/
.sitemap{
	margin-top: 30px;
}
}
@media screen and (max-width: 667px) and (-ms-high-contrast: none){
	.content .cate .box{
		margin-bottom: 50px;
	}
.content .cate .box::before {
    margin-left: 0%;
}
.content .cate .box::after {
    left: 49.75%;
}
.content .cate .box .box_img1{
	overflow: hidden;
}
.page9 ul li{
    margin-bottom: 20px;
}
}