@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* 元のロゴ画像を非表示 */
.logo-header{
  display: none;
}
/*グローバルメニュー下の余白削除*/
.content {
	margin-top: 0;
}
/*リンクの下線削除*/
a {
    text-decoration:none; 
}
/* 非表示 */
#header-in {
 display: none;
}
#footer {
 display: none;
}
/*見出し初期化*/
.article h2,
.article h3,
.article h4,
.article h5,
.article h6
{
    padding: 0;
    margin: 0;
    background:none;
    border-collapse: separate;
    border-spacing: 0;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: none;
    line-height: normal;
    position:relative;
}
/*h1非表示*/
.article h1 {
	display: none;
}
/*reCAPTCHA 保護マーク削除*/
.grecaptcha-badge {
	visibility: hidden;
}

/*******ヘッダー*******/
/*****メニュー*****/
/***トップメニュー***/
.tma {
	background-color: rgba(255,250,205,0.5);
	width: 100%;
	height: 60px;
	padding: 5px 20px 0 20px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
}
	.tma-f {
		display: flex;
		flex-direction: row;
	}
		.tma-i1 {
			flex-basis: 40%;
		}
			.tma-i1-f {
				display: flex;
				flex-direction: row;
			}
				.tma-i1-rogo-b {
					width: 100px;
					margin-top: 5px;
				}
				.tma-i1-c {
					font-size: 25px;
					font-weight: 600;
					color: #622d18;
					margin-top: 12px;
					margin-left: 10px;
					line-height: 1;
				}
		.tma-i2 {
			flex-basis: 60%;
			padding-top: 14px;
			
		}

/*** メニュー ***/
			ul{
				list-style: none;
				padding: 0;
				margin: 0;
			}
			a {
				text-decoration: none;
				color: #622d18;
			}
			.accodion{
				width: 100%;
			}
				.accodion .menu {
					display: flex;
					justify-content: space-between
				}
					.accodion .menu>li{
						width: 20%;
						background-color: rgba(255,250,205,0.5);
						border: 1px solid #ccc;
						position: relative;
					}
						.accodion .menu li a{
							padding: 5px;
							display: block;
						}
						.accodion .menu .menu-title{
							font-size: 16px;
							text-align: center;
							line-height: 1.5em;
						}
						.accodion .menu .sub-menu{
							position: absolute;
							z-index: 11;
							width: 100%;
							top: 100%;
							left: 0;
						}
						.accodion .menu .sub-menu li{
							background-color: rgba(255,250,205,0.7);
							border: 1px solid #ccc;
							border-top: none;
							width: 100%;
						}
							.accodion .menu .sub-menu li:first-child{
								border-top: 1px solid #ccc;
								display: none;
							}
							.accodion .menu .sub-menu li a{
								padding: 5px;
								width: 100%;
								
							}
								.accodion .menu li a:hover{
									opacity: .6;
									
								}
									.sub-menu-t {
										font-size: 16px;
										text-align: center;
										line-height: 1.5em;
									}
										.menu-st {
											font-size: 14px;
										}

/******* トップ画像 *******/
/*** ホーム ***/
.fta-slide {
  position: relative;
  width: 100%;
  height: 550px;
  overflow: hidden;
}
/* 文字 固定 */
	.fta-t-tb-p {
		position: absolute;
		top: 140px;
		left: 50%;
		width: 100%;
	}
		.fta-t-tb-f {

		}
			.fta-t-tb {
				
			}
				.fta-t-t2 {
					font-size: 50px;
					font-weight: 400;
					color: #fff;
					text-shadow: 1px 1px 0 #37a34a, -1px -1px 0 #37a34a,
								 -1px 1px 0 #37a34a, 1px -1px 0 #37a34a,
								 0px 1px 0 #37a34a,  0-1px 0 #37a34a,
								 -1px 0 0 #37a34a, 1px 0 0 #37a34a;
					margin-top: 60px;
				}
				.fta-t-t2-1 {
					display: none;
				}
				.fta-t-t3 {
					font-size: 30px;
					font-weight: 400;
					color: #fff;
					line-height: 1.5em;
					text-shadow: 1px 1px 0 #37a34a, -1px -1px 0 #37a34a,
								 -1px 1px 0 #37a34a, 1px -1px 0 #37a34a,
								 0px 1px 0 #37a34a,  0-1px 0 #37a34a,
								 -1px 0 0 #37a34a, 1px 0 0 #37a34a;
					margin: 20px 0 0 20px;
				}
					.fta-t-t3-1 {
						font-size: 25px;
					}

/* 画像 */
	.slide-image {
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		animation: slider-1 24s linear infinite;
	}
/* スライド画像 */
.slide-image:nth-child(1) {
	background-image: url(https://www.gu-ju.co.jp/wp-content/uploads/2023/09/farmland-regeneration1.jpg);
	animation-delay: -2s;
}
.slide-image:nth-child(2) {
	background-image: url(https://www.gu-ju.co.jp/wp-content/uploads/2023/09/farmland-regeneration2.jpg);
	animation-delay: 6s;
}

.slide-image:nth-child(3) {
	background-image: url(https://www.gu-ju.co.jp/wp-content/uploads/2023/09/farmland-regeneration3.jpg);
	animation-delay: 14s;
}
@keyframes slider-1 {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  4.16% {
    opacity: 1;
  }
  33.33% {
    opacity: 1;
  }
  41.66% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 0;
  }
}

/*** 農園の作物 ***/
.fta-s {
	background-image: url(https://www.gu-ju.co.jp/wp-content/uploads/2023/03/abokado-image03-e1678957373287.jpg);
	background-color: #f5f5f5;
	background-attachment: fixed;
	background-position: top 50%;
	background-size: cover;
	width: 100%;
	height: 300px;
	position: relative;
}
/*** 耕作放棄地再生・耕作放棄地再生 施工事例 ***/
.fta-h {
	background-image: url(https://www.gu-ju.co.jp/wp-content/uploads/2023/03/nouti-image-scaled-e1678952545110.jpg);
	background-color: #f5f5f5;
	background-attachment: fixed;
	background-position: top 50%;
	background-size: cover;
	width: 100%;
	height: 300px;
	position: relative;
}
/*** 会社概要 ***/
.fta-k {
	background-image: url(https://www.gu-ju.co.jp/wp-content/uploads/2023/03/office-image02-e1679834927814.jpg);
	background-color: #f5f5f5;
	background-attachment: fixed;
	background-position: bottom center;
	background-size: cover;
	width: 100%;
	height: 300px;
	position: relative;
}
/*** お問合せ・プライバシーポリシー ***/
.fta-c {
	background-image: url(https://www.gu-ju.co.jp/wp-content/uploads/2023/04/coppice-image14-e1681400601657.jpg);
	background-color: #f5f5f5;
	background-attachment: fixed;
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 300px;
	position: relative;
}
/*** YouTube 投稿 ***/
.fta-y {
	width: 100%;
	height: 300px;
	background-image: url(https://www.gu-ju.co.jp/wp-content/uploads/2023/05/coppice-image15-e1683309777155.jpg);
	background-color: #f5f5f5;
	background-attachment: fixed;
	background-position: center top;
	background-size: auto 400px;
	position: relative;
}
/*** アボカド ***/
.fta-a {
	background-image: url(https://www.gu-ju.co.jp/wp-content/uploads/2023/03/abocado-image02-e1678893660221.jpg);
	background-color: #f5f5f5;
	background-attachment: fixed;
	background-position: top 50%;
	background-size: cover;
	width: 100%;
	height: 300px;
	position: relative;
}
/*** やまもも ***/
.fta-m {
	background-image: url(https://www.gu-ju.co.jp/wp-content/uploads/2023/03/yamamomo-image-e1678950956666.jpg);
	background-color: #f5f5f5;
	background-attachment: fixed;
	background-position: top 50%;
	background-size: cover;
	width: 100%;
	height: 300px;
	position: relative;
}
/*** 雑木林の再生・雑木林の再生 施工事例 ***/
.fta-mori {
	background-image: url(https://www.gu-ju.co.jp/wp-content/uploads/2023/04/sunlight-image01-e1681103702784.jpg);
	background-color: #f5f5f5;
	background-attachment: fixed;
	background-position: bottom;
	background-size: cover;
	width: 100%;
	height: 300px;
	position: relative;
}


/* トップ見出し home以外 */
.fta-tb-p {
	position: absolute;
	top: 130px;
	left: 0;
	width: 100%;
}
	.fta-tb-f {
		display: flex;
		justify-content: center;
	}
		.fta-tb {
			background-color: rgba(255,255,255,0.5);
			padding: 20px;
		}
			.fta-tb-c {
				font-size: 30px;
				font-weight: 700;
				text-align: center;
				color: #622d18;
				line-height: 1;
				letter-spacing: 0.12em;
			}
			.fta-tb-t {
				font-size: 16px;
				text-align: center;
				color: #622d18;
				line-height: 1;
				margin-top: 10px;
			}

/******* フッター *******/
.footer-area {
	background-color: #fffacd;
	margin-right: calc(50% - 49.3vw);
	margin-left: calc(50% - 49.3vw);
	width: auto;
	padding: 20px;
}
/***** ロゴ *****/
	.foot-f {
		display: flex;
		justify-content: center;
	}
		.foot-rogo {
			width: 100px;
			margin-top: 5px;
		}
		.foot-c {
			font-size: 25px;
			font-weight: 600;
			color: #622d18;
			margin-top: 12px;
			margin-left: 10px;
			line-height: 1;
		}
/***** フッターメニュ *****/
	.foot-ma {
		padding: 20px 100px 50px;
	}
		.foot-m-f {
			display: flex;
			justify-content: center;
		}
			.foot-m-i {
				flex-basis: 15%;
			}
			.foot-m-b {
				border-radius: 5px;
				width: 100%;
				padding: 10px;
				font-size: 16px;
				color: #622d18;
				line-height: 1;
				transition: all 1.0s;
			}
				.foot-m-b:hover {
					background-color: #fff;
					color: #ff7f50;
				}
/***** コピーライト *****/
		.foot-copy {
			font-size: 16px;
			color: #622d18;
			line-height: 1;
		}
/* SNSアイコン 画面下固定 */
.sns-button-p {
	position: fixed;
    bottom: 20px;
    left: 20px;
}
	.sns-button-b {
		background-color: #fff;
		border-radius: 5px;
		padding: 5px;
	}
		.sns-button-f {
			display: flex;
			flex-direction: row;
		}
			.sns-button-i {
				padding: 5px 10px;
			}
				.sns-button-image {
					width: 30px;
					height: 30px;
				}
					.sns-button-image img {
						object-fit: contain;
						width: 100%;
						height: 100%;
					}

/* lineアイコン 画像下固定 */
.line-button-p {
	position: fixed;
    bottom: 80px;
    left: 20px;
}
	.line-button-b {
		background-color: #fff;
		border-radius: 5px;
		padding: 10px 20px;
	}
		.line-button-f {
			display: flex;
			flex-direction: row;
		}
			.line-image1 {
				width: 40px;
				height: 40px;
			}
				.line-image1 img {
					object-fit: contain;
					width: 100%;
					height: 100%;
				}
			.line-image2 {
				width: 140px;
				height: 30px;
				margin: 0 0 0 20px;
			}
				.line-image2 img {
					object-fit: contain;
					width: 100%;
					height: 100%;
				}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1040px以下*/
@media screen and (max-width: 1040px){

/*** トップメニュー タイトル ***/
						.accodion .menu .menu-title{
							font-size: 12px;
							text-align: center;
							line-height: 1.5em;
						}

}

/***** フッターメニュ *****/
	.foot-ma {
		padding: 20px 10px 50px;
	}
			.foot-m-b {
				border-radius: 5px;
				width: 100%;
				padding: 5px;
				font-size: 15px;
				color: #622d18;
				line-height: 1;
				transition: all 1.0s;
			}

/*1023px以下*/
@media screen and (max-width: 1023px){

/*** トップメニュー非表示 ***/
		.tma-i1 {
			flex-basis: 100%;
		}
			.tma-i1-f {
				display: flex;
				justify-content: center;
			}
		.tma-i2 {
			display: none;
		}

/*834px以下*/
@media screen and (max-width: 834px){

/***** トップ画像 *****/
/* 文字 固定 */
	.fta-t-tb-p {
		position: absolute;
		top: 140px;
		left: 0;
		width: 100%;
	}
		.fta-t-tb-f {
			display: flex;
			justify-content: center;
		}
				.fta-t-t2 {
					font-size: 40px;
					font-weight: 400;
					color: #fff;
					text-shadow: 1px 1px 0 #37a34a, -1px -1px 0 #37a34a,
								 -1px 1px 0 #37a34a, 1px -1px 0 #37a34a,
								 0px 1px 0 #37a34a,  0-1px 0 #37a34a,
								 -1px 0 0 #37a34a, 1px 0 0 #37a34a;
				}
				.fta-t-t3 {
					font-size: 25px;
					font-weight: 400;
					color: #fff;
					line-height: 1.5em;
					text-shadow: 1px 1px 0 #37a34a, -1px -1px 0 #37a34a,
								 -1px 1px 0 #37a34a, 1px -1px 0 #37a34a,
								 0px 1px 0 #37a34a,  0-1px 0 #37a34a,
								 -1px 0 0 #37a34a, 1px 0 0 #37a34a;
					margin: 20px 0 0 20px;
				}
					.fta-t-t3-1 {
						font-size: 20px;
					}

}

/* SNSアイコン 画面下固定 */
.sns-button-p {
	display: none;
}

/* lineアイコン 画像下固定 */
.line-button-p {
	position: fixed;
    bottom: 60px;
    left: 20px;
}

/*480px以下*/
@media screen and (max-width: 480px){

/***** トップ画像 *****/
/*** ホーム ***/
.fta-slide {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}
	.fta-t-tb-p {
		position: absolute;
		top: 100px;
		left: 0;
		width: 100%;
	}
				.fta-t-t2 {
					display: none;
				}
				.fta-t-t2-1 {
					display: block;
					font-size: 27px;
					font-weight: 400;
					color: #fff;
					text-shadow: 1px 1px 0 #37a34a, -1px -1px 0 #37a34a,
								 -1px 1px 0 #37a34a, 1px -1px 0 #37a34a,
								 0px 1px 0 #37a34a,  0-1px 0 #37a34a,
								 -1px 0 0 #37a34a, 1px 0 0 #37a34a;
					margin-top: 10px;
					text-align: center;
				}
				.fta-t-t3 {
					font-size: 20px;
					font-weight: 400;
					color: #fff;
					line-height: 1.5em;
					text-shadow: 1px 1px 0 #37a34a, -1px -1px 0 #37a34a,
								 -1px 1px 0 #37a34a, 1px -1px 0 #37a34a,
								 0px 1px 0 #37a34a,  0-1px 0 #37a34a,
								 -1px 0 0 #37a34a, 1px 0 0 #37a34a;
					margin: 20px 0 0 20px;
				}
					.fta-t-t3-1 {
						font-size: 18px;
					}
/*** 荒廃地再生・荒廃地再生 施工事例一覧 ***/
.fta-h {
	background-image: url(https://www.gu-ju.co.jp/wp-content/uploads/2023/03/nouti-image-scaled-e1678952545110.jpg);
	background-color: #f5f5f5;
	background-attachment: fixed;
	background-position: 40% center;
	background-size: cover;
	width: 100%;
	height: 300px;
	position: relative;
}
/*** 農園の作物 ***/
.fta-s {
	background-image: url(https://www.gu-ju.co.jp/wp-content/uploads/2023/03/abokado-image03-e1678957373287.jpg);
	background-color: #f5f5f5;
	background-attachment: fixed;
	background-position: center center;
	background-size: cover;
	width: 100%;
	height: 300px;
	position: relative;
}

/*******ヘッダー*******/
/*****メニュー*****/
/*** メニュー ***/
				.tma-i1-c {
					font-size: 20px;
					font-weight: 600;
					color: #622d18;
					margin-top: 12px;
					margin-left: 10px;
					line-height: 1;
				}

/******* フッター *******/
.footer-area {
	background-color: #fffacd;
	margin-right: calc(50% - 49.3vw);
	margin-left: calc(50% - 49.3vw);
	width: auto;
	padding: 0 10px 100px;
}
/***** ロゴ *****/
	.foot-f {
		display: flex;
		justify-content: center;
	}
		.foot-rogo {
			width: 80px;
			margin-top: 5px;
		}
		.foot-c {
			font-size: 20px;
			font-weight: 600;
			color: #622d18;
			margin-top: 12px;
			margin-left: 10px;
			line-height: 1;
		}
	/***** メニュ *****/
	.foot-ma {
		padding: 20px 20px 20px;
	}
		.foot-m-f {
			display: flex;
			flex-direction: column;
		}
			.foot-m-i {
				flex-basis: 100%;
			}
			.foot-m-b {
				border-radius: 5px;
				width: 100%;
				padding: 10px 20px;
				font-size: 16px;
				color: #622d18;
				line-height: 1;
				transition: all 1.0s;
			}
				.foot-m-b:hover {
					background-color: #fff;
					color: #ff7f50;

}