@charset "utf-8";

section{
	margin-bottom:80px;
}


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


		メインビジュアル


---------------------------------*/
#main-vew{
	width:100%;
	background-image: url("img/photo-back02.jpg");
	background-size: cover;
	background-position: center;
	padding:10px 0;
	text-align: center;
	line-height: 0;
	border-bottom:5px solid #65AB50;
}

#main-photo{
	width:98%;
	max-width: 1200px;
	margin:0 auto;
	line-height: 0;
	overflow: hidden;
}

#main-photo li{
	width:100%;
	line-height: 0;
	display: none;
}

#main-photo li img{
	width:100%;
	height: auto;
}

/*-----------------------
	スマホ・タブレット
-----------------------*/
@media screen and (min-width: 0) and (max-width: 480px){
	#main-vew{
		padding:0;
		background-image:none;
		background-color: #65AB50;
		border-bottom:3px solid #65AB50;
	}
	
	#main-photo{
		width:100%;
	}
}

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


		プラント営業時間


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

#plant-time{
	width:100%;
	background-color:#65AB50;;
	padding:5px 0;
	color:#fff;
}

#plant-time .inner{
	width:98%;
	max-width: 1200px;
	margin:0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	line-height: 1.4;
	background-image: url("img/leef.png"),url("img/leef02.png");
	background-size: auto 75%,auto 75%;
	background-position: left bottom, right bottom;
	background-repeat: no-repeat,no-repeat;
}

#plant-time-name{
	display: inline-block;
	text-align: center;
	line-height: 1.3;
}

#plant-time-name h1{
	font-family: 'Noto Serif JP', serif;
	font-weight: 800;
	font-size:1.32rem;
	line-height: 1.2;
	margin-bottom:8px;
}

#plant-time a{
	color:#fff;
	text-decoration:underline dotted;
	text-underline-offset:3px;
}

#plant-time-name .la-external-link-alt{
	font-size:0.85rem;
	color: rgba(255,255,255,0.78);
	margin-right:5px;
}

#plant-time-name .contact{
	font-size:0.9rem;
	font-weight: bold;
	margin:8px 0 0 0;
}

#plant-time-name .tel{
	font-size:1.55rem;
	margin-left: 5px;
	display: inline-block;
}

#plant-time-adress{
	display: inline-block;
	/*border-left:1px dotted #fff;*/
	padding-left:40px;
	font-size:0.95rem;
}

#plant-time-adress span{
	width:8em;
	margin-right:8px;
}

#plant-time-adress p.chu{
	font-size:0.9rem;
	padding-left:1em;
	text-indent: -1em;
}

/*-----------------------
	スマホ・タブレット
-----------------------*/
@media screen and (min-width: 0) and (max-width: 800px){
	#plant-time .inner{
		background-image: none;
	}
}

@media screen and (min-width: 0) and (max-width: 740px){
	#plant-time{
		padding:15px 0;
	}
	#plant-time .inner{
		max-height: 100%;
		display: block;
		text-align: center;
	}
	#plant-time-name{
		display: block;
		padding-bottom:10px;
	}
	#plant-time-adress{
		display: block;
		padding-left:0;
	}
	
	#plant-time-adress p{
		margin-bottom:10px;
	}

	#plant-time-adress p.chu{
		text-align: left;
	}
	
		
	#plant-time-adress p.chu{
		text-align: center;
	}
}

@media screen and (min-width: 0) and (max-width: 480px){
	#plant-time-name h2{
		font-size:1.5rem
	}
	#plant-time-adress p.chu{
		text-align: left;
	}
}
/*-----------------------------


		お知らせ


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

#news{
	/*display: flex;*/
	justify-content: space-between;
}

#news .item{
	/*width:calc(50% - 10px);*/
	width:100%;
	/*border-bottom: 1px solid #D6D6D6;*/
	padding-bottom:20px;
	margin-bottom:50px;
	display: flex;
}

#news h2{
	/*border-bottom:1px solid #D6D6D6;*/
	line-height: normal;
	font-size:1.4rem;
	margin-bottom:10px;
	display: inline-block;
	padding:20px 0;
}

/*#news h2 span{
	border-bottom:2px solid #8ABF7B;
	padding:0 5px;
}*/

#news dl{
	flex:1;
	margin-left:20px;
	padding:20px 0 20px 20px;
	/*width:100%;*/
	/*height: 300px;*/
	overflow-y: auto;
	scrollbar-width: thin;
	/*padding:15px 10px ;*/
	border-left: 1px solid #D6D6D6;
}

#news dt{
	font-weight: bold;
	line-height: 1.6;
	margin-bottom:8px;
	padding-top:15px;
}


#news dt span.renew{
	display: inline-block;
	background-color:#B04E7C ;
	font-size:0.9rem;
	line-height: 21px;
	padding:0 10px;
	color:#fff;
	border-radius: 5px;
	margin-left:10px;
}


#news dt::before{
	content: "■";
	color:#528B5B;
}

#news dd{
	padding-left:1em;
	line-height: 1.6;
	padding-bottom:15px;
	border-bottom:1px dotted #ccc;
}

#news dd:last-child{
	border-bottom:none;
}

#event dt{
	transform: rotate(0.003deg);
	font-size:1.1rem;
}

#event dd{
	font-size:0.95rem;
}
#event li{
	margin-bottom:5px;
	font-size:1.05rem;
	
}

#event .more a{
	display: inline-flex;
	background-color:#B04E7C ;
	font-size:0.9rem;
	line-height: 21px;
	padding:0 10px;
	color:#fff;
	border-radius: 5px;
	margin-top:10px;
}

#event .more a::after{
	font-family: "Font Awesome 6 Free";
	 content: "\f0da\f0da\f0da";
	flex:1;
	text-align: right;
	/*color:rgba(255,255,255,0.5);*/
	font-size:0.7rem;
	font-weight: bold;
}

/*#event a{
	display: block;
	border-bottom:1px dotted #B5B5B5;
	padding:10px 0;
	color:#050505;
}

#event a:hover h3{
	color:#528B5B;
}*/

/*#event h3{
	transform: rotate(0.003deg);
	font-size:1.1rem;
}


#event h3::before{
	content: "■";
	color:#528B5B;
}

#event .content{
	margin-left:16px;
}*/

/*-----------------------
	スマホ・タブレット
-----------------------*/
@media screen and (min-width: 0) and (max-width: 980px){
	#news{
		display: block;
	}
	
	#news .item{
		width:100%;
		display: block;
		margin-bottom:20px;
	}
	
	#news h2{
		font-size:1.2rem;
		display: block;
		border-bottom: 1px solid #D6D6D6;
		margin-bottom:15px;
	}
	
	#event h3{
		transform: rotate(0deg);
	}
	
	#news dl{
		margin-left:0;
		padding:0;
		width:100%;
		border-left: none;
	}
}

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


	各共通設定


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


#ukeire .item,
#introduction .item{
	border:1px solid #D6D6D6;
	padding:5px;
	border-radius: 5px;
}

#ukeire .title,
#introduction .title{
	width:100%;
	display: flex;
	justify-content: space-between;
	/*align-items: center;*/
	background: rgb(99,159,81);
	background: -webkit-linear-gradient(bottom, rgba(99,159,81,1) 0%, rgba(105,169,86,1) 100%);
	background: -o-linear-gradient(bottom, rgba(99,159,81,1) 0%, rgba(105,169,86,1) 100%);
	background: linear-gradient(to top, rgba(99,159,81,1) 0%, rgba(105,169,86,1) 100%);
	border-radius: 5px;
	margin-bottom:30px;
}

#ukeire .title h2,
#introduction .title h2{
	color:#fff;
	font-size:1.6rem;
		 text-shadow:1px 1px 0 #4B783D, -1px -1px 0 #4B783D,
              -1px 1px 0 #4B783D, 1px -1px 0 #4B783D,
              0px 1px 0 #4B783D,  0 -1px 0 #4B783D,
              -1px 0 0 #4B783D, 1px 0 0 #4B783D,
			 2px 2px 0 #4B783D;
	display: flex;
	align-items: center;
	flex:1;
	padding-left:5px;
}

#ukeire .title h2::before,
#introduction .title h2::before{
	content:'';
	width:42px;
	height: 31px;
	display: block;
	background-image: url("img/ico01.png");
	background-size: cover;
	margin-right:5px;
}

#ukeire .more,
#introduction .more{
	width:250px;
}

#ukeire .more a,
#introduction .more a{
	width:100%;
	height: 100%;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	color:#003F10;
	font-size:1.05rem;
	background: #B1D2A7;
	/*-webkit-text-stroke: 1px #66A353;
	text-stroke: 1px #83B874;*/
	padding-right:3px;
	display: flex;
	align-items: center;
	text-shadow:1px 1px 0 #fff, -1px -1px 0 #fff,
              -1px 1px 0 #fff, 1px -1px 0 #fff,
              0px 1px 0 #fff,  0 -1px 0 #fff,
              -1px 0 0 #fff, 1px 0 0 #fff;
	border-radius: 0 5px 5px 0;
}

#ukeire .more a::after,
#introduction .more a::after{
	font-family: "Font Awesome 6 Free";
	 content: "\f0da\f0da\f0da";
	flex:1;
	text-align: right;
	/*color:rgba(255,255,255,0.5);*/
	font-size:0.9rem;
	font-weight: bold;
	letter-spacing: 0.08em;
		
}

#ukeire .more a::before,
#introduction .more a::before{
	content:'';
	height:100%;
	aspect-ratio: 1 / 1;
	clip-path: polygon(0 0, 0% 100%, 100% 100%);
	background: rgb(99,159,81);
	background: -webkit-linear-gradient(bottom, rgba(99,159,81,1) 0%, rgba(105,169,86,1) 100%);
	background: -o-linear-gradient(bottom, rgba(99,159,81,1) 0%, rgba(105,169,86,1) 100%);
	background: linear-gradient(to top, rgba(99,159,81,1) 0%, rgba(105,169,86,1) 100%);
	margin-right:8px;
	filter: drop-shadow(3px 0px 2px #000000);
-webkit-filter: drop-shadow(3px 0px 2px #000000);
-moz-filter: drop-shadow(3px 0px 2px #000000);
/*border: calc(1rem + 3px) solid rgb(99,159,81);
  border-right-color: transparent;
  border-bottom-color: transparent; 
  height: 0;
  width: 0;*/
}

#ukeire h3,
#introduction h3{
	font-size:1.4rem;
	color:#661900;
}

/*-----------------------
	
スマホ・タブレット

-----------------------*/
@media screen and (min-width: 431px){
	#ukeire .more a,
	#introduction .more a{
		transition: background 0.3s ease;
	}
	
	#ukeire .more a:hover,
	#introduction .more a:hover{
		background:#9EC792;
	}
}
@media screen and (min-width: 0) and (max-width: 980px){
	
	#ukeire .title,
	#introduction .title{
		width:100%;
		display: block;
		padding:5px 0 0 3px;
	}
	
	
	#ukeire .more,
	#introduction .more{
		width:100%;
		display: flex;
		justify-content: flex-end;
	}
	
	#ukeire .more a,
	#introduction .more a{
		width:50%;
		height: 2em;
		/*-webkit-text-stroke: 1px #66A353;
		text-stroke: 1px #83B874;*/
		border-radius: 0 0 5px 0;
		clip-path: polygon(50px 0, 100% 0, 100% 100%, 0% 100%);
		padding-right:0;
		padding:0 3px 0 50px;
	}

	#ukeire .more a::before,
	#introduction .more a::before{
		content: none;
	}
}

@media screen and (min-width: 0) and (max-width: 480px){
	#ukeire .title h2,
	#introduction .title h2{
		width:100%;
		display: block;
		font-size:1.2rem;
		text-align: left;
		line-height: normal;
		padding-bottom:5px;
	}
	
	#ukeire .title h2::before,
	#introduction .title h2::before{
		content:none;
	}
	
	#ukeire .more a,
	#introduction .more a{
		width:80%;
	}
}

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


	植物発生材の受入について


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

#ukeire .item:first-child{
	margin-bottom:80px;
}

#ukeire .inner{
	padding:30px 40px 0 40px;
}

#ukeire .cachi{
	width:100%;
	margin-bottom:30px;
}

#ukeire dl{
	border:1px solid #65A353;
	border-radius: 5px;
	margin-bottom:20px;
}

#ukeire dt{
	display: flex;
	align-items: center;
	gap:15px;
}

#ukeire .inner a{
	text-decoration: underline;
	color: rgba(18,16,183,1.00);
}

#ukeire .paper{
	display: flex;
	align-items: center;
	gap:10px;
}



#ukeire dt h3{
	/*display: inline-block;*/
	width:min(100%,500px);
	background-color: #65A353;
	clip-path: polygon(0 0, 100% 0%, calc(100% - 30px) 100%, 0% 100%);
	border-top-left-radius: 5px;
	color:#fff;
	font-size:1.15rem;
	font-weight: bold;
	padding:0 40px 0 10px;
	 text-shadow:1px 1px 0 #4B783D, -1px -1px 0 #4B783D,
              -1px 1px 0 #4B783D, 1px -1px 0 #4B783D,
              0px 1px 0 #4B783D,  0 -1px 0 #4B783D,
              -1px 0 0 #4B783D, 1px 0 0 #4B783D,
			 2px 2px 0 #4B783D;
}

#ukeire .paper a.pdf,
#ukeire .paper a.excel,
#ukeire .paper a.word{
	width:100px;
	line-height: 25px;
	border-radius: 5px;
}


#ukeire dd{
	padding:20px 15px 10px 15px;
	font-weight: bold;
}


#ukeire .paper h4{
	/*display: inline-block;*/
	background-color: #609E4F;
	border-radius: 5px;
	padding:3px 10px;
	line-height: 1.4;
	color:#fff;
	font-size:1.15rem;
	 text-shadow:1px 1px 0 #538844, -1px -1px 0 #538844,
              -1px 1px 0 #538844, 1px -1px 0 #538844,
              0px 1px 0 #538844,  0 -1px 0 #538844,
              -1px 0 0 #538844, 1px 0 0 #538844,
		   		0px -2px 1px #538844; 
	/*margin-bottom:20px;*/
	text-align: center;
	margin-bottom:15px;
}

#ukeire .download{
	flex:1;
}

#ukeire .contact{
	margin:50px 0;
}

#ukeire a.contact_bana{
	width:min(90%,500px);
	height: 80px;
	line-height: 80px;
	margin:0 auto;
	font-size:30px;
	display: flex;
	justify-content: space-between;
}

#ukeire p.chu{
	font-size:0.95rem;
}

/*-----------------------
	
スマホ・タブレット

-----------------------*/
@media screen and (min-width: 0) and (max-width: 980px){
	#ukeire .inner{
		width:100%;
		padding:30px 1vw 0 1vw;
	}
	
	#ukeire dt{
		gap:0.5vw;
	}
	
	#ukeire .paper{
		gap:3px;
	}
	
	#ukeire dt h3{
		width:450px;
		padding:0 20px 0 5px;
	}
}

@media screen and (min-width: 0) and (max-width: 430px){
	#ukeire .inner{
		width:100%;
		padding:15px 0 0 0;
	}
	
	#ukeire dt{
		display: block;
	}
	
	#ukeire dt h3{
		width: 100%;
		line-height: 1.4;
		font-size:1.12rem;
		font-weight: bold;
		padding:0 30px 0 10px;
	}
	
	#ukeire .paper{
		margin-top:15px;
	}
}

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


	リサイクル製品


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

#recycling dt h3{
	width:300px;
}

#recycling dt h3 strong{
	font-size:1.43rem;
	margin-right:3px;
}

#recycling dd p{
	padding-left:1em;
}

#recycling .paper{
	margin-bottom:15px;
	/*background-color:rgba(232,232,232,0.8);
	padding:5px;*/
	display: flex;
	align-items: center;
	/*justify-content: space-between;*/
	gap:15px;
	border-radius: 5px;
}

#recycling .paper .text{
	display: inline-block;
	color:#571400;
	font-weight: bolder;
		 text-shadow:1px 1px 0 rgba(255,255,255,0.84), -1px -1px 0 rgba(255,255,255,0.84),
              -1px 1px 0 rgba(255,255,255,0.84), 1px -1px 0 rgba(255,255,255,0.84),
              0px 1px 0 rgba(255,255,255,0.84),  0 -1px  rgba(255,255,255,0.84),
              -1px 0 0 rgba(255,255,255,0.84), 1px 0 0 rgba(255,255,255,0.84);
}

#recycling .paper .text::before{
	content: "■";
	color:#6AAA57;
}

#recycling .paper .bana{
	display: inline-block;
}

/*-----------------------
	
スマホ・タブレット

-----------------------*/
@media screen and (min-width: 0) and (max-width: 430px){
	#recycling .paper{
		flex-direction: column;
		align-items: stretch;
	}
	
	#recycling dt h3 strong{
		font-size:1.15rem;
	}
}


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


	はまっこユーキ


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

#hakou{
	width:100%;
	display:flex;
	align-items: center;
	margin-top:50px;
	gap:15px;
}

#hakou .ico{
	width:80px;
	line-height: 0;
	gap:15px;
}

#hakou .ico img{
	width:100%;
	height: auto;
}

#hakou .text{
	flex:1;
}

#hakou h3{
	color:#37683E;
	font-size:1.13rem;
	font-weight: bold;
}



/*-----------------------
	スマホ・タブレット
-----------------------*/
@media screen and (min-width: 0) and (max-width: 980px){
	#ukeire-download .inner{
		display: block;
	}
	
	#ukeire-download .inner table:last-child{
		margin-left:0;	
	}
	
	#ukeire-download .inner table{
		width:100%;
	}
	
	#ukeire-download .inner th{
		color:#661900;
		font-weight: bold;
		padding-left:calc(1em + 3px);
		text-indent: calc((1em + 3px) * -1);
		display: block;
	}
	
	#ukeire-download .inner th,
	#ukeire-download .inner td{
		width:100%;
		display: block;
	}
	
	#ukeire-download .inner td{
		padding-left:calc(1em + 3px);
		/*display: flex;
		justify-content: flex-end;
		text-align: right;*/
	}
	
	#ukeire-download .inner td a{
		width:70px;
	}
}

@media screen and (min-width: 0) and (max-width: 480px){
	#ukeire-cachi{
		display: block;
		text-align: center;
	}
	
	#ukeire-cachi .text{
		margin-left:0;
		text-align: left;
	}
	
	#hakou{
		display: block;
		padding:0 10px;
	}
	
	#hakou .ico{
		width:50px;
		margin:0 auto 15px auto;
	}
}

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


	はまっ子ユーキ・組合員


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

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

#introduction h3{
	font-size:1rem;
}
#introduction .item{
	width:calc(50% - 10px);
}

#introduction .ico{
	width:100%;
	height:180px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

#introduction .text{
	padding:0 15px;
}

/*-----------------------
	スマホ・タブレット
-----------------------*/

@media screen and (min-width: 0) and (max-width: 980px){
	#introduction{
		display: block;
	}
	
	#introduction .item{
		width:100%;
	}
	
	#introduction .item:last-child{
		margin-top:20px;
	}
}

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


	ロード画面


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

#loader{
	width:100%;
	height: 100vh;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: fixed;
	left:0;
	top:0;
	z-index: 99999;
}

#loader img{
	width:200px;
	height: auto;
	margin-bottom:20px;
}

/* HTML: <div class="loader"></div> */
/* HTML: <div class="loader"></div> */
.loader {
  width: 100px;
  height: 20px;
  --c:no-repeat radial-gradient(farthest-side,#C4E1BB 93%,#C4E1BB);
  background:
    var(--c) 0    0,
    var(--c) 50%  0,
    var(--c) 100% 0;
  background-size: 15px 15px;
  position: relative;
  animation: l4-0 1s linear infinite alternate;
}
.loader:before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
border-radius: 50%/50%;
  background: #C4E1BB;
  left: 0;
  top: 0;
  animation: 
    l4-1 1s  linear infinite alternate,
    l4-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}
@keyframes l4-0 {
  0%      {background-position: 0  100%,50% 0   ,100% 0}
  8%,42%  {background-position: 0  0   ,50% 0   ,100% 0}
  50%     {background-position: 0  0   ,50% 100%,100% 0}
  58%,92% {background-position: 0  0   ,50% 0   ,100% 0}
  100%    {background-position: 0  0   ,50% 0   ,100% 100%}
}
@keyframes l4-1 {
  100% {left:calc(100% - 8px)}
}
@keyframes l4-2 {
  100% {top:-0.1px}
}