@charset "utf-8";

.pc{
	@media screen and (max-width: 767px) {
		display: none !important;
	}
}
.sp{
	@media screen and (min-width: 768px) {
		display: none !important;
	}
} 
.recycle_main{
	*{
		color:  #19823d;
		font-family: YakuHanJP, "Noto Sans JP", Meiryo, sans-serif;
		line-height: 1.8;
		@media screen and (max-width: 768px) {
			font-size: 3.6vw;
		}
	}
	img{
		height: auto;
	}
	.inner{
		width: 1000px;
		margin-right: auto;
		margin-left: auto;
		@media screen and (max-width: 767px) {
			width: 96%;
		}
		@media screen and (max-width: 1023px) {
			width: 96%;
			max-width: 1000px;
		}
	}
	.kome{
		text-indent:-1em;
		padding-left: 1em;
		display: block;
	}
	.mv{
		background-image: url(../images/mv_bg.jpg);
		background-repeat: no-repeat;
		background-position: bottom center;
		padding-bottom:75px;
		.catch{
			background-image:url(../images/recycle_mark.webp);
			background-repeat:no-repeat;
			background-position:left center;
			background-size:27% auto;
			@media screen and (max-width: 1023px) {
				background-position:left 6% center;
			}
			@media screen and (max-width: 768px) {
				background:none;
			}
			h1{
				width: 65%;
				margin-left: 35%;
				height: 650px;
				background-image: url(../images/mv_man.webp);
				background-repeat: no-repeat;
				background-position: right top ;
				background-size: auto 100%;
				padding-left: 10%;
				padding-top: 10%;
				@media screen and (max-width: 1023px) {
					background-size: 100% auto;
					padding: 8% 10%;
					height: 60vw;
				}
				@media screen and (max-width: 768px) {
					width: 100%;
					margin-left: 0;
					background-size: 100% auto;
					height: 93vw;
					padding: 1% 19%;
				}
				img{
					mix-blend-mode:multiply;
					@media screen and (max-width: 768px) {
						mix-blend-mode:normal;
					}
				}
			}
		}/* catch */
		.exp{
			width: 85%;
			margin-left: auto;
			margin-right: auto;
			background-color: #fff;
			border:3px solid #19823d;
			position:relative;
			@media screen and (max-width: 1023px) {
				width: 96%;
			}
			@media screen and (max-width: 767px) {
				width: 96%;
			}
			h2{
				text-align: center;
				position: absolute;
				top: -70px;
				width: 100%;
				@media screen and (max-width: 767px) {
					top: calc(-20vw / 1.5);
				}
			}
			.expbox{
				.point{
					display: flex;
					.pt3000,
					.pt500{
						width: 50%;
						text-align: center;
						padding-bottom:10px;
						h3{
							background-repeat: no-repeat;
							background-position: center bottom;
							background-size: 95% auto;
							padding-bottom: 30px;
							margin-bottom: 10px;
							font-size: 32px;
							@media screen and (max-width: 1023px) {
								font-size: 3.6vw;
								margin-bottom: 3%;
								padding-bottom: 8%;
								line-height: 1.4;
								& + p{
									img{
										max-height: 12vw;
										width: auto;
									}
								}
							}
						}
					}
					.pt3000{
						background-color: #19823d;
						h3{
							color: #fff;
							background-image: url(../images/exp_arrow01.webp);
						}
					}
					.pt500{
						background-color: #ffff98;
						h3{
							background-image: url(../images/exp_arrow02.webp);
						}
					}
				}/* point */
				.present{
					text-align: center;
					padding: 15px 0 6px;
					border-bottom:3px solid #19823d;
					@media screen and (max-width: 767px) {
						padding: 3% 0 2%;
					}
					p{
						@media screen and (max-width: 767px) {
							font-size: 4.2vw;
						}
						img{
							margin-bottom: 5px;
							@media screen and (max-width: 767px) {
								max-width: 80%;
								height: auto;
							}
						}
					}
				}/* present */
				.terms{
					padding: 16px 20px;
					@media screen and (max-width: 768px) {
						padding: 5% 4%;
					}
					h3{
						margin-bottom: -29px;
						@media screen and (max-width: 768px) {
							margin-bottom: 3%;
						}
					}
					ol{
						width: 75%;
						margin-left:25%;
						@media screen and (max-width: 768px) {
							margin-left:0;
							width:100%;
						}
						li{
							line-height: 1.6;
							margin-bottom:5px;
							vertical-align: middle;
							font-size:22px;
							position:relative;
							@media screen and (max-width: 768px) {
								font-size:3.6vw;
								padding-left: 2.4em;
								margin-bottom: 5%;
							}
							h4{
								line-height: 1.6;
								display: block;
								position: absolute;
								top: 0;
								left: -33.5%;
								@media screen and (max-width: 768px) {
									position: relative;
									top: 0;
									left: 0;
								}
								img{
								vertical-align: middle;
								}
							}
							span{
								vertical-align: super;
								font-size: 50%;
							}
							&:before{
								background-color: #19823d;
								color: #fff;
								padding: 5px 10px;
								text-align: center;
								margin-right: 5px;
								display: inline;
								vertical-align: middle;
								font-size:22px;
								@media screen and (max-width: 768px) {
									font-size:3.6vw;
									position: absolute;
									left: 0;
									top:-0.3em;
								}
							}
							&:nth-child(1):before{content: "1";}
							&:nth-child(2):before{content: "2";}
							&:nth-child(3):before{content: "3";}
							&:nth-child(4):before{content: "4";}
						}
						& + span{
							display: block;
							margin-left: 25%;
							@media screen and (max-width: 768px) {
								margin-left: 0;
							}
						}
					}
				}/* terms */
			}
		}/* exp */
	}/* mv */
	.tab_area {
		width: 100%;
		background: #fff;
		/* 視覚的に非表示（フォーカスは残す） */
		.tab_radio {
			position: absolute;
			inline-size:1px;
			block-size:1px;
			margin:-1px; padding:0; 
			clip:rect(0 0 0 0);
			overflow:hidden; white-space:nowrap;
		}
		&:has(input[data-tab="1"]:checked) .tab_contents .tab_content[data-tab="1"]{
			display:block;
		}
		&:has(input[data-tab="2"]:checked) .tab_contents .tab_content[data-tab="2"] {
			display:block;
		}
		&:has(input[data-tab="1"]:checked) .tab_header ul li:nth-child(2){
			border-bottom:3px solid #19823d;
			transition: all 0.08s ease-out;
			top: 0;
			&:hover{
				position: relative;
				top: 6px;
			}
		}
		&:has(input[data-tab="1"]:checked) .tab_footer ul li:nth-child(2){
			border-top:3px solid #19823d;
			transition: all 0.08s ease-out;
			top: 0;
			&:hover{
				position: relative;
				top: -6px;
			}
		}
		&:has(input[data-tab="2"]:checked) .tab_header ul li:nth-child(1){
			transition: all 0.08s ease-out;
			top: 0;
			&:hover{
				position: relative;
				top: 6px;
			}
		}
		&:has(input[data-tab="2"]:checked) .tab_footer ul li:nth-child(1){
			transition: all 0.08s ease-out;
			top: 0;
			&:hover{
				position: relative;
				top: -6px;
			}
		}

		.tab_header {
			position:relative;
			&.tab_header1:before{
				content: "";
				display: block;
				width: 100%;
				height: 100%;
				top: -1px;
				left: 0;
				position: absolute;
				background-image: url(../images/mv_bg.jpg);
				background-repeat: no-repeat;
				background-position: bottom center;
				transform: scale(1, -1);
			}
			.inner{
				position:relative;
				z-index:2;
				ul {
					overflow: hidden;
					display:flex;
					align-items: stretch;
					gap:10px;
					margin:0;
					padding:0;
					list-style:none;
					position:relative;
					li{
						display: flex;
						flex:1 1 0;
						flex-direction: column;
						align-items:center;
						border-top:3px solid #19823d;
						border-left:3px solid #19823d;
						border-right:3px solid #19823d;
						box-sizing: border-box;
						border-radius: 15px 15px 0 0 ;
						&:nth-child(1){
							background-color: #19823d;
							span{
								color: #fff;
							}
						}
						&:nth-child(2){
							background-color: #ffff98;
						}
						label{
							text-align:center;
							cursor:pointer;
							user-select:none;
							flex-grow: 1;
							width: 100%;
							display: flex;
							flex-direction: column;
							justify-content:center;
							padding:15px 0;
							@media screen and (max-width: 768px) {
								padding:3% 0;
							}
							&:has(input:focus-visible) {
								outline:2px solid #4c9ffe;
								outline-offset:2px;
							}
							span{
								line-height: 1.4;
								font-size: 24px;
								@media screen and (max-width: 768px) {
									font-size: 3.8vw;
								}
							}
						}
					}
				}/* ul */
			}/* inner */
		}/* tab_header */
		.tab_contents {
			width:100%;
			box-sizing:border-box;
			margin-top:-3px;
			margin-bottom:-3px;
			position:relative;
			z-index:1;
			.tab_content{
				h2{
		            text-align: center;
		            font-size: 42px;
		            font-weight: bold;
					@media screen and (max-width: 1023px) {
		            	font-size: 4.8vw;
		            	margin-bottom: 4%;
					}
				}
				.btnbox{
					p{
						color: #fff;
						text-align: center;
						font-size: 24px;
						margin-bottom: 2%;
						@media screen and (max-width: 768px) {
							font-size: 4.2vw;
						}
					}
					.aboutid{
						background-color:#fff;
						padding:40px 0;
						border-radius:15px;
						width:85%;
						margin-right:auto;
						margin-left:auto;
						margin-bottom:60px;
						@media screen and (max-width: 768px) {
							padding:4% 4%;
							margin-bottom:8%;
							width: 94%;
						}
						strong{
							text-align: center;
							font-size: 24px;
							font-weight: bold;
							display:block;
							color:#19823d;
							@media screen and (max-width: 768px) {
								font-size: 4.8vw;
							}
							& + p{
								text-align: center;
								font-size: 24px;
								color:#19823d;
								margin-bottom: 10px;
								@media screen and (max-width: 768px) {
								font-size: 4.2vw;
								}
							}
							& + p + p{
								color:#19823d;
								font-size: 16px;
								@media screen and (max-width: 768px) {
								font-size: 3.6vw;
								text-align: left;
								}
							}
						}
					}
					.btn{
						border-radius: 100px;
						position:relative;
						display: block;
						text-align: center;
						background-color: #ffff98;
						width: 85%;
						margin: 0 auto 30px;
						min-height: 94px;
						top: 0;
						left: 0;
						box-shadow:6px 9px 0 rgba(0, 0, 0, 0.2);
						transition: all 0.03s ease-out;
						display:flex;
						justify-content:center;
						align-items:center;
						font-size:32px;
						@media screen and (max-width: 1023px) {
							font-size: 3.6vw;
							min-height: auto;
							padding: 3% 0;
							width: 94%;
						}
						span{
							background-color: #fff000;
							padding: 0 15px;
							line-height: 1.6;
						}
						&:hover{
							top: 4px;
							left: 7px;
							box-shadow:2px 2px 0 rgba(0, 0, 0, 0.2);
						}
					}/* btn */
					& > .btn:first-child{
						background-color: #fff;
						border:1px solid #19823d;
					}
					.online{
						display: flex;
						gap: 20px;
						width: 85%;
						margin-left: auto;
						margin-right: auto;
						@media screen and (max-width: 1023px) {
							width: 94%;
							gap:3%;
						}
						.btn{
							font-size: 20px;
							line-height: 1.4;
							@media screen and (max-width: 768px) {
								font-size: 3.2vw
							}
						}
					}
				}/* btnbox */
				h3{
					font-size: 140%;
					@media screen and (max-width: 768px) {
						font-size: 4.6vw;
						text-align: center;
					}
				}
				&.tab3000{
					background-color: #19823d;
					/*background-color: #999;*/
					.btn{
						background-color:  #ffff98;
					}
				}
				&.tab500{
					.btnbox{
						.btn{
							background-color: #19823d;
							color: #fff;
						}
						.btn:first-child{
							color: #19823d;
							background-color: #fff;
						}
					}
					background-color: #ffff98;
				}
				display:none;
				border-top: 3px solid #19823d;
				border-bottom: 3px solid #19823d;
				padding:80px 0;
				@media screen and (max-width: 768px) {
					padding:10% 0;
				}
				.inner{
					.flow{
						margin-bottom:120px;
						@media screen and (max-width: 768px) {
							margin-bottom:10%;
						}
						& > ul{
							position:relative;
							& > li{
								display: flex;
								justify-content: space-between;
								background-color: #fff;
								margin-bottom: 60px;
								border-radius: 15px 15px 0 15px;
								padding: 30px 25px 25px 40px;
								border:2px solid #19823d;
								position:relative;
								@media screen and (max-width: 768px) {
									padding: 5% 4% 5%;
									display: block;
								}
								&:last-child{
									margin-bottom: 0;
								}
								&:before{
									position: absolute;
									top: 2px;
									left: 2px;
									border-radius: 11px 0 11px 0;
									width: 30px;
									text-align: center;
									background-color: #19823d;
									color: #fff;
									@media screen and (max-width: 768px) {
										font-size: 5.2vw;
										width: 10%;
									}
								}
								&:nth-child(1):before{content:"1" ;}
								&:nth-child(2):before{content:"2" ;}
								&:nth-child(3):before{content:"3" ;}
								&:nth-child(4):before{content:"4" ;}
								&:nth-child(5):before{content:"5" ;}
								&:nth-child(6):before{content:"6" ;}
								&:nth-child(7):before{content:"7" ;}
								&:after{
									content: "";
									background-image: url(../images/flow_arrow.webp);
									width: 100%;
									height: 30px;
									display: block;
									background-repeat: no-repeat;
									background-position: top center;
									position: absolute;
									left: 0;
									bottom:-30px;
								}
								&:last-child:after{
									content: none;
								}
								.mainbox{
									padding-top: 2%;
									padding-bottom: 2%;
									padding-left: 15%;
									width: 60%;
									position:relative;
									&.full{
										width: 100%;
									}
									@media screen and (max-width: 768px) {
										width: 100%;
										padding-left: 0;
										padding-top: 30%;
									}
									.sbtn{
										background-color:#19823d;
										color: #fff;
										display: block;
										text-align: center;
										border-radius: 100px;
										padding: 5px 0;
										box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
										position:relative;
										transition: all 0.08s ease-out;
										top:0;
										left:0;
										margin-top:20px;
										&:hover{
											top: 3px;
											left: 3px;
											box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
										}
									}
								}
								&:nth-child(1) .mainbox .sbtn,
								&:nth-child(2) .mainbox .sbtn{
									width: 80%;
									@media screen and (max-width: 768px) {
										width: 100%;
									}
								}
								&:nth-child(4) .mainbox .sbtn,
								&:nth-child(5) .mainbox .sbtn{
									width: 65%;
									@media screen and (max-width: 768px) {
										width: 100%;
									}
								}
								.subbox{
									width: 38%;
									@media screen and (max-width: 768px) {
										width: 100%;
										align-items: center;
										img{
											max-width: 100%;
										}
									}
								}
								li{
								}
							}/* li */
						}
						&.f3000{
							h2{
								color: #fff;
							}
							& > ul{
								.mainbox{
									background-repeat:no-repeat;
									background-position:left 2% center;
									background-size:20% auto;
									&.full{
										background-size:12% auto;
									}
									@media screen and (max-width: 768px) {
										background-position: center top	;
										background-size: auto 26vw ;
										&.full{
											background-size: auto 26vw ;
										}
									}
								}
								& > li{
									p .ul{
										background-color: #ffff00;
									}
									&:nth-child(1) .mainbox{background-image: url(../images/flow_icon01.webp);}
									&:nth-child(2) .mainbox{background-image: url(../images/flow_icon02.webp);}
									&:nth-child(3) .mainbox{background-image: url(../images/flow_icon03.webp);}
									&:nth-child(4) .mainbox{background-image: url(../images/flow_icon04.webp);}
									&:nth-child(5) .mainbox{background-image: url(../images/flow_icon05.webp);}
									&:nth-child(6) .mainbox{background-image: url(../images/flow_icon06.webp);}

									&:nth-child(1) .subbox{
										text-align: center;
										img{
											max-width: 160px;
											@media screen and (max-width: 768px) {
												max-width: 40%;
											}
										}
									}
									&:nth-child(2) .subbox{
										display: flex;
										gap:10px;
										align-items: center;
										@media screen and (max-width: 1023px) {
											display: block;
											text-align: center;
										}
									}

								}
							}
							.caution{
								border-radius: 15px;
								border:2px solid #ffff00;
								text-align: center;
								width: 75%;
								margin-left: auto;
								margin-right: auto;
								padding: 20px 0;
								margin-top: 20px;
								@media screen and (max-width: 768px) {
									width: 100%;
								}
								p{
									color: #ffff00;
									font-size: 20px;
									@media screen and (max-width: 768px) {
										font-size: 3.4vw;
									}
								}
							}
						}/* &.f3000 */
						&.f500{
							h2{
							}
							& > ul{
								.mainbox{
									background-repeat:no-repeat;
									background-position:left 2% center;
									background-size:20% auto;
									&.full{
										background-size:12% auto;
									}
									@media screen and (max-width: 768px) {
										background-position: center top	;
										background-size: auto 26vw ;
										&.full{
											background-size: auto 26vw ;
										}
									}
								}
								& > li{
									&:nth-child(1) .mainbox{background-image: url(../images/flow_icon02.webp);}
									&:nth-child(2) .mainbox{background-image: url(../images/flow_icon07.webp);}
									&:nth-child(3) .mainbox{background-image: url(../images/flow_icon04.webp);}
									&:nth-child(4) .mainbox{background-image: url(../images/flow_icon05.webp);}
									&:nth-child(5) .mainbox{background-image: url(../images/flow_icon08.webp);}

									&:nth-child(1) .subbox{
										text-align: center;
									}
									&:nth-child(1) .subbox,
									&:nth-child(2) .subbox{
										display: flex;
										gap:10px;
										align-items: center;
										@media screen and (max-width: 1023px) {
											display: block;
											text-align: center;
										}
									}

								}
							}
						}/* &.f500 */
					}/* flow */
					.confirm{
						.confirmbox{
							padding-bottom:40px;
							margin-bottom:80px;
							@media screen and (max-width: 768px) {
								padding-bottom:6%;
								margin-bottom:4%;
							}
								h3{
									text-align: center;
									font-weight: bold;
									font-size: 32px;
									margin-bottom: 20px;
									@media screen and (max-width: 768px) {
										font-size: 4.8vw;
									}
								}
								& > p{
									font-size: 22px;
									text-align: center;
									line-height:1.6;
									margin-bottom:22px;
									@media screen and (max-width: 768px) {
										font-size: 3.6vw;
										margin-bottom:4%;
									}
									span{
										background-color: #ffff00;
										display: inline-block;
										line-height:1.3;
									}
								}
							.criterion{
								.criterionbox{
									padding: 20px 40px;
									display: flex;
									gap: 20px;
									@media screen and (max-width: 768px) {
										display: block;
										padding: 4%;
									}
									& > div{
										padding:10px 20px;
										border-radius: 15px;
										background-repeat: no-repeat;
										background-position: center center;
										background-size: auto 50%;
										@media screen and (max-width: 768px) {
											margin-bottom: 4%;
										}
										h4{
											text-align: center;
											font-size: 24px;
											font-weight: bold;
											@media screen and (max-width: 768px) {
												font-size: 4.8vw;
											}
										}
										&.ok{
											background-image: url(../images/confirm_ok.webp);
										}
										&.ng{
											background-image: url(../images/confirm_ng.webp);
										}
										ul{
											padding-left:3rem;
											li{
												list-style: disc;
												line-height: 1.6;
												margin-bottom: 8px;
												span{
													background-color: rgba(255,240 , 0 , 0.6);
												}
											}
										}
									}
								}/* criterionbox */
								.caution{
									padding:0 40px;
									@media screen and (max-width: 768px) {
										padding:0 4%;
									}
									p{
										text-align: center;
										background-color: #fff;
										padding: 20px;
										color: #c0272d;
										line-height: 1.6;
									}
								}/* caution */
							}/* criterion */
							.quality{
								padding:0 40px;
								h4{
									font-size: 24px;
									font-weight: bold;
									text-align: center;
									padding-top:20px;
									@media screen and (max-width: 768px) {
										font-size: 4.2vw;
									}
									span{
										color: #ffff00;
										font-size: 120%;
									}
								}
								.qualitybox{
									background-color: #fff;
									border-radius: 15px;
									padding: 20px 60px;
									display: flex;
									align-items: center;
									justify-content: space-around;
									@media screen and (max-width: 768px) {
										display: block;
										padding: 4%;
										& > img{
											margin: 0 auto 8%;
											display: block;
										}
									}
									ul{
										li{
											margin-bottom: 40px;
											padding-left:40px;
											background-repeat: no-repeat;
											background-position: left top;
											background-size: auto auto;
											@media screen and (max-width: 768px) {
												margin-bottom: 8%;
											}
											&:nth-child(1){
												background-image: url(../images/confirm_num01.webp);
											}
											&:nth-child(2){
												background-image: url(../images/confirm_num02.webp);
											}
											p{
												padding-left:40px;
												background-repeat: no-repeat;
												background-position: left center;
												background-size: auto 100%;
												color:#000;
												font-size:22px;
												font-weight:bold;
												line-height:1em;
												margin-bottom:0.6em;
												@media screen and (max-width: 1023px) {
													font-size: 3.6vw;
													background-size: auto 1em;
													padding-left:1.5em;
													line-height:1.4em;
												}
												&:nth-child(1){
													background-image: url(../images/confirm_ok2.webp);
												}
												&:nth-child(2){
													background-image: url(../images/confirm_ng2.webp);
													margin-bottom:0;
												}
											}
										}
									}
								}
							}/* quality */
						}
						&.confirm3000{
							.confirmbox{
								border:2px solid #fff;
								h3{
									background-color: #fff;
								}
								& > p{
									color: #fff;
								}
								.criterion{
									.criterionbox{
										& > div{
											background-color: #fff;
										}
									}
								}
								.quality{
									h4{
										color: #fff;
									}
								}
							}
						}
						&.confirm500{
							.confirmbox{
								background-color: #fff;
								border:2px solid #19823d;
								h3{
									background-color: #19823d;
									color: #fff;
								}
								& > p{
									color: #19823d;
								}
								.criterion{
									.criterionbox{
										& > div{
											background-color: rgba(255, 249, 180, 0.4);
										}
									}
								}
								.quality{
									h4{
										color: #19823d;
										span{
											color: #19823d;
											background-color: #ffff00;
										}
									}
									.qualitybox{
										background-color: rgba(255, 249, 180, 0.4);
									}
								}
							}
						}
					}/* confirm */
				}
			}/* tab_content */
		}/* tab_contents */
		.tab_footer {
			border-bottom:none;
			.inner{
				ul {
					li{
						border-radius: 0 0 15px 15px ;
						border-top:none;
						border-left:3px solid #19823d;
						border-right:3px solid #19823d;
						border-bottom:3px solid #19823d;
						&:nth-child(1){
							label{
								color: #fff;
							}
						}
					}
				}
			}
		}
	}/* tab_area */
	.faq{
		padding:80px 0 0;
		@media screen and (max-width: 768px) {
			padding:14% 0 0;
		}
		h2{
			text-align: center;
			color: #19823d;
			font-size: 42px;
			font-weight: bold;
			margin-bottom:20px;
			@media screen and (max-width: 768px) {
				font-size: 4.8vw;
				margin-bottom:4%;
			}
		}
		.faq-item{
			border-radius: 15px;
			background-color: #fff;
			border:2px solid #19823d;
			margin-bottom:20px;
			box-sizing:border-box;
			.faq-question {
				cursor: pointer;
				padding:20px;
				position: relative;
				padding-right: 55px; /* プラスマーク分の余白 */
				p{
					color: #333;
					font-size:20px;
					font-weight:bold;
					@media screen and (max-width: 768px) {
						font-size: 3.8vw;
					}
					span{
						color: #19823d;
						font-weight: bold;
						border-radius: 8px;
						display: inline-block;
						padding:2px 10px;
						@media screen and (max-width: 768px) {
							font-size: 4.8vw;
						}
					}
				}
			}
			.faq-question::before,
			.faq-question::after {
			  content: "";
			  position: absolute;
			  right: 15px;
			  top: 50%;
			  width: 30px;
			  height: 6px;
			  background: #19823d;
			  transition: transform 0.3s ease;
			}
			/* 横棒（常に表示） */
			.faq-question::before {
			  transform: translateY(-50%) rotate(180deg);
			}
			.faq-question::after {
			  transform: translateY(-50%) rotate(90deg);
			}
			/* 開いているとき → 縦棒を回転して横棒に重ねる */
			.faq-question.active::before {
			  transform: translateY(-50%) rotate(360deg);
			}
			.faq-question.active::after {
			  transform: translateY(-50%) rotate(360deg);
			}
			.faq-answer {
				max-height: 0;
				overflow: hidden;
				transition: max-height 0.4s ease, padding 0.4s ease;
				border-radius: 0 0 14px 14px;
				p{
					padding:20px;
					background-color: rgba(255, 249, 180, 1.0);
					color: #333;
					span{
						font-size: 20px;
						color: #19823d;
						font-weight: bold;
						display: inline-block;
						margin-right: 10px;
					}
				}
			}
			.faq-answer.open {
				max-height: 400px; /* 中身が十分収まるくらいの大きめ数値 */
			}
		}

	}/* faq */
	.terms{
		padding:80px 0;
		@media screen and (max-width: 768px) {
			padding:10% 0;
		}
		h2{
			text-align: center;
			color: #19823d;
			font-size: 42px;
			font-weight: bold;
			margin-bottom:20px;
			@media screen and (max-width: 768px) {
				font-size: 4.8vw;
				margin-bottom:4%;
			}
		}
		.inner{
			.termsbox{
				background-color: #e3e4d9;
				padding: 40px 60px;
				border-radius: 15px;
				color: #333;
				@media screen and (max-width: 768px) {
					padding: 6% 6%;
				}
				*{
					color: #333;
				}
			}/* termsbox */
		}/* inner */
	}/* terms */
	.aboutrp{
		.abouthead{
			background-color: #eff6f3;
			background-image: url(../images/rp_footbg.webp);
			background-repeat: no-repeat;
			background-size: 100% auto;
			background-position: center bottom -2px;
			text-align: center;
			padding: 8% 0;
			@media screen and (max-width: 768px) {
				background-size: 140% auto;
				padding: 8% 0 20%;
			}
			h2{
				margin-bottom: 10%;
				img{
					width: 25%;
					@media screen and (max-width: 768px) {
						width: 40%;
					}
				}
				& + img{
					margin-bottom: 6%;
					width: 60%;
					@media screen and (max-width: 768px) {
						width: 80%;
					}
				}
			}
			h3{
				background-color: #4c8c6a;
				color: #fff;
				font-weight: bold;
				width: 70%;
				margin-left: auto;
				margin-right: auto;
				border-radius: 6px;
				margin-bottom: 4%;
				@media screen and (max-width: 768px) {
					width: 80%;
					font-size: 4vw;
					line-height: 1.4;
					padding: 2% 0;
				}
				& + p{
					@media screen and (max-width: 768px) {
						font-size: 3.2vw;
					}
					img{
						display: block;
						margin-left: auto;
						margin-right: auto;
						margin-top: 4%;
						@media screen and (max-width: 768px) {
							width: 40%;
						}
					}
				}
			}
		}
		.aboutfoot{
			background-color: #00823e;
			padding: 20px 20px;
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			& img:nth-child(1){
				max-width: 45%;
				height: auto;
			}
			& img:nth-child(2){
				max-width: 25%;
				height: auto;
			}
		}
	}/* aboutrp */
}/* recycle_main */