@charset "utf-8";
section{
	width: 98%;
	max-width: 1200px;
	margin:0 auto 80px auto;
}
h2:not(#introduction){
	width:100%;
	font-family: 'Noto Serif JP', serif;
	font-weight: 700;
	font-size:2.6rem;
	line-height: 1em;
	display: flex;
	align-items: center;
	margin-bottom:80px;
	letter-spacing: 0.1em;
}

h2:not(#introduction)::before,
h2:not(#introduction)::after{
	content:'';
	flex:1;
	height: 1px;
	display: block;
	border-top:1px solid #D6D6D6;
	border-bottom:1px solid #D6D6D6;
}

h2:not(#introduction)::before{
	margin-right:15px;
}

h2:not(#introduction)::after{
	margin-left:15px;
}

/*---------------------------

	タイトル部分

---------------------------*/

#content #title{
	width:100%;
	border-bottom:1px solid #D6D6D6;
}

#content #title .inner{
	width:95%;
	max-width: 1200px;
	min-height:130px;
	margin:0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-image: url("../../com/img/titile-back.png");
	background-position: bottom right;
	background-repeat: no-repeat;
	color:#3D453D;
	text-align: left;
}

#content #title h1{
	width:100%;
	max-width: 100%;
	min-height:auto;
	margin:0 auto;
	display: block;
	background-image:none;
}

h1 .sfont{
	font-size:1.7rem;
	margin-right:10px;
	letter-spacing: -0.05rem;
}

/*-----------------------
	スマホ・タブレット
-----------------------*/
	
@media screen and (min-width: 0) and (max-width: 480px){
	h2:not(#introduction){
		margin-bottom:30px;
		font-size:2rem;
	}
	section{
		margin:0 auto 50px auto;
	}
	#content #title .inner{
		background-image: none;
	}
	
	h1 .sfont{
		display: block;
		font-size:1.2rem;
		margin-bottom:10px;
	}
}


/*---------------------------

	紹介文

---------------------------*/

#introduction{
	font-weight: bold;
	padding:50px 0 30px 0;

}

#introduction h2::before,
#introduction h2::after{
	content:none;
}

#introduction .inner{
	display: flex;
	align-items: center;
	margin-top:50px;
}

#circle{
	width:50%;
	line-height: 0;
	flex-shrink: 0;
	margin:0 auto;
	padding-right:20px;
}

#circle img{
	width: 100%;
	height: auto;
	padding-left:20px;
}

#youtube{
	width:50%;
	line-height: 0;
}

#youtube iframe{
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 10px;
	box-shadow: 1px 2px 6px 0px rgba(0,0,0,0.6);
}

#introduction .text{
	margin-left: 20px;
	font-size:1.1rem;
	transform: rotate(0.003deg);
	text-align: center;
}
#introduction h2{
	font-family:"メイリオ", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, sans-serif;
	font-size:1.8rem;	
	color:#4A8044;
	margin-bottom:10px;
	line-height: 1.8;
	letter-spacing: 0;
	transform: rotate(0.003deg);
	text-align: center;
	display: block;
}

/*-----------------------
	スマホ・タブレット
-----------------------*/
@media screen and (min-width: 0) and (max-width: 890px){

	#introduction .inner{
		display: block;
	}
	
	#circle{
		flex:none;
		width:80%;
		max-width: 600px;
		margin:0 auto 20px auto;
	}
	
	#introduction .text{
		width:100%;
		margin-left:0;
		text-align: center;
		font-size:1rem;
	}
	
	#introduction h2{
		display: block;
		text-align: center;
		font-size:1.3rem
	}
	
	#youtube{
		width:80%;
		margin-left:0;
		margin:15px auto 0 auto;
	}
	#youtube iframe{
		width:100%;
		aspect-ratio:16/9;
	}
}

@media screen and (min-width: 0) and (max-width: 480px){
		#introduction .text,
		#introduction h2{
			text-align: left;
		}
	
		#introduction h2{
			font-size:1.1rem;
		}
	
		#circle{
		width:100%;
	}
	
	#youtube{
		width:100%;
	}
}
/*---------------------------

	概要

---------------------------*/

#outline .inner{
	width:100%;
	display: flex;
}

#outline .photo{
	width:380px;
	line-height: 0;
}

#outline .photo img{
	width:100%;
	height: auto;
	border-radius: 6px;
	border:1px solid #ccc;
}

#outline table{
	flex:1;
	margin-left:20px;
	border-collapse:separate;
	border-spacing:0 5px;
}


#outline th,
#outline td{
	padding:8px 15px;
	line-height: 1.6;
}

#outline th{
	width:150px;
	background-color: #8ABA85;
	border-radius: 5px 0 0 5px;
	color:#fff;
	font-weight: bold;
}

#outline td{
	background-color: #F7F7F7;
	border-radius: 0 5px 5px 0;
	padding:5px 15px 5px 20px;
}

#outline td dd{
	margin-left:1em;
}


#outline .access{
	display: inline-block;
	padding:5px 8px;
	background: rgb(94,151,87);
	background: -webkit-linear-gradient(bottom, rgba(94,151,87,1) 0%, rgba(123,176,117,1) 100%);
	background: -o-linear-gradient(bottom, rgba(94,151,87,1) 0%, rgba(123,176,117,1) 100%);
	background: linear-gradient(to top, rgba(94,151,87,1) 0%, rgba(123,176,117,1) 100%);
	border:1px solid #fff;
	box-shadow: 0px 0px 0px 1px rgba(58,58,58,0.40);
	border-radius: 6px;
	color:#fff;
	line-height: 1em;
	margin-left:10px;
	font-size:0.7rem;
}

#outline .access:hover{
		background: rgb(94,151,87);
	background: -webkit-linear-gradient(rgba(94,151,87,1) 0%, rgba(123,176,117,1) 100%);
	background: -o-linear-gradient(rgba(94,151,87,1) 0%, rgba(123,176,117,1) 100%);
	background: linear-gradient(rgba(94,151,87,1) 0%, rgba(123,176,117,1) 100%);

}

/*-----------------------
	スマホ・タブレット
-----------------------*/
@media screen and (min-width: 0) and (max-width: 890px){
	#outline .inner{
		display: block;
	}
	
	#outline .photo{
		margin:0 auto 20px auto;
	}
	
	#outline table{
		width:100%;
		margin-left:0;
	}
}
	
	@media screen and (min-width: 0) and (max-width: 480px){
		#outline th,
		#outline td{
			display: block;
			width:100%;
		}
		
		#outline th{
			border-radius: 6px 6px 0 0;
		}
		
		#outline td{
			border-radius: 0 0 6px 6px;
		}
		
		#outline .photo{
			width:100%;
			max-width:250px;
		}
	}

/*---------------------------

	事業内容

---------------------------*/

#business .item{
	border:1px solid #ccc;
	border-radius: 6px;
	padding:0 5px 5px 5px;
}

#business .item h3{
	border-left:10px solid #8ABF7B;
	padding:8px;
	/*font-size:1.5rem;*/
	font-size:clamp(1.2rem, -0.518rem + 2.91vw, 1.3rem);
	margin-bottom:15px;
	line-height: 1.4;
}

#business .item h3 .sfont{
	font-size:1.08rem;
}

#business-top{
	width:100%;
	display: flex;
	justify-content: space-between;
}

#business-top .item{
	width: calc(50% - 2px);
}

#business-top .main{
	width:100%;
	display: flex;
	justify-content: center;
}

#business-top .photo{
	width: clamp(180px, 40%, 280px);
	/*width:calc(100% / 3);*/
	line-height: 0;
	flex-shrink: 0;
}

#business-top .photo img{
	width:100%;
	height: auto;
	border-radius: 5px;
	object-fit: cover;
}

#business-top .text{
	margin-left:20px;
	margin-right:15px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#chip.item h3{
	padding:10px 8px;
}
#chip.item{
	width:100%;
	margin-top:5px;
}

#chip.item .inner{
	width:100%;
	display: flex;
	justify-content: space-around;
}

#chip.item .citem{
	width:calc(50% - 5px);
	max-width: 530px;
}

#chip h4{
	width:100%;
	color:#fff;
	background-color: #77B465;
	font-size:1.18rem;
	text-align: center;
	line-height: 1;
	padding:5px 10px;
	margin-bottom:15px;
	border-radius: 6px;
}

#chip .goods{
	display: flex;
}

#chip .gphoto{
	width:140px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#chip .gphoto img{
	width:100%;
	height: auto;
}

#chip .gtext{
	flex:1;
	margin-left:15px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/*-----------------------
	スマホ・タブレット
-----------------------*/
@media screen and (min-width: 0) and (max-width: 890px){
	#business-top{
		display: block;
	}
	
	#business-top .item{
		width:100%;
		margin-top:5px;
	}
	
	#business-top .item:first-child{
		margin-top:0;
	}
	
	#chip.item .inner{
		display: block;
	}
	
	#chip.item .citem{
		width:100%;
		max-width: 100%;
		margin-bottom:15px;
	}
	
	#chip.item .citem:last-child{
		margin-bottom:0;
	}
	
	#chip.item .goods{
		padding:0 10px;
	}
}
	
@media screen and (min-width: 0) and (max-width: 480px){
	
	#business .item{
		border:1px solid #ccc;
		border-radius: 6px;
		padding:0 5px 15px 5px;
	}
		
		#business-top .main{
			display: block;
		}
		
		#business-top .photo{
			width:100%;
		}
		
		#business-top .photo img{
			aspect-ratio:20 / 9;
			object-position:top;
		}
		
		#business-top .item:first-child .photo img{
				object-position:center;
		}
		#business-top .text{
			margin-left:0;
			margin-right:0;
			padding:0 5px;
			margin-top:15px;
		}
		#chip .goods,
		#chip .gphoto{
			display: block;
		}
	
		#chip .gphoto{
			margin:0 auto 15px auto;
		}
	

		#chip .gtext{
			flex:none;
			margin-left:0;
			display: block;
		}
		
}