@charset "utf-8";
/*全体の設定
---------------------------------------------------------------------------*/
body {
/*	font-size: 18px;	/*文字サイズ*/
	line-height: 1.5;	/*行間*/
	margin: 0px;
	padding: 0px;
	-webkit-text-size-adjust: none;
	color: #666;	/*全体の文字色*/
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;	/*フォント種類*/
	background: #fff;	/*背景色*/
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form,select,input,textarea {margin: 0px;padding: 0px;font-size: 100%;font-weight: normal;font-family: inherit;}
ul {list-style-type: none;}
ol {padding-left: 40px;padding-bottom: 15px;}
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}
table {border-collapse:collapse;font-size: 100%;border-spacing: 0;}
iframe {width: 100%;}

/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
	color: blue;	/*リンクテキストの色*/
	transition: 0.3s;	/*マウスオン時の移り変わるまでの時間設定。0.3秒。*/
}
a:hover {
	color:royalblue;
	font-weight: bold;
}

/*コンテナー（ホームページを囲む一番外側のブロック）
---------------------------------------------------------------------------*/
#container {
	max-width: 1400px;	/*ブロックの最大幅*/
	margin: 0 auto;
	padding: 0 3%;
}

/*ヘッダー（ロゴが入った最上段のブロック）
---------------------------------------------------------------------------*/
/*headerブロック*/
header {
	text-align: center;	/*内容を中央よせ*/
}
/*ロゴ画像設定*/
#logo img {
	position: absolute;
	z-index: 1;
	width: 220px;	/*画像幅*/
	margin: 0px auto;	/*ロゴの上と下に40pxスペースを空ける設定*/
	left: 0px;
	right: 0px;
	top:55px;
}
#logo2 img {
	position: absolute;
	z-index: 1;
	width: 280px;	/*画像幅*/
	margin: 0px auto;	/*ロゴの上と下に40pxスペースを空ける設定*/
	left: 0px;
	right: 0px;
	top:138px;
}
/*トップページのメイン画像
---------------------------------------------------------------------------*/
/*画像ブロック*/
#mainimg {
	height:240px;
	width: 640px;
	margin: auto;
	clear: left;
	position: relative;
	margin-bottom: 20px;
	border: 0px solid #fff;
	-webkit-box-shadow: 0px 0px 20px rgba(0,0,0,0.5);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2が透明度。*/
	box-shadow: 0px 0px 20px rgba(0,0,0,0.5);			/*同上*/
}

/*Slide
---------------------------------------------------------------------------*/
/*３枚画像の共通設定*/
#slide1,#slide2,#slide3 {
    -webkit-animation-duration: 20s;	/*実行する時間。「s」は秒の事。*/
    animation-duration: 20s;			/*同上*/
    -webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
    animation-iteration-count:infinite;			/*同上*/
    position: absolute;left:0px;top:0px;width: 640;height: 240px;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-delay: 2s;
}
/*土台画像*/
#slide0 {
	height:240px;
	width: 640px;
}
/*１枚目*/
#slide1 {
    -webkit-animation-name: slide1;	/*上で設定しているキーフレーム（keyframes）の名前*/
    animation-name: slide1;			/*同上*/
}
/*２枚目*/
#slide2 {
    -webkit-animation-name: slide2;	/*上で設定しているキーフレーム（keyframes）の名前*/
    animation-name: slide2;			/*同上*/
}
/*３枚目*/
#slide3 {
    -webkit-animation-name: slide3;	/*上で設定しているキーフレーム（keyframes）の名前*/
    animation-name: slide3;			/*同上*/
}
/*CSSスライドショー設定
---------------------------------------------------------------------------*/
/*１枚目*/
@keyframes slide1 {
    0% {opacity: 0;}
    10% {opacity: 1;}
    30% {opacity: 1;}
    40% {opacity: 0;}
    100% {opacity: 0;}
}
@-webkit-keyframes slide1 {
    0% {opacity: 0;}
    10% {opacity: 1;}
    30% {opacity: 1;}
    40% {opacity: 0;}
    100% {opacity: 0;}
}
@-moz-keyframes slide1 {
    0% {opacity: 0;}
    10% {opacity: 1;}
    30% {opacity: 1;}
    40% {opacity: 0;}
    100% {opacity: 0;}
}
@-ms-keyframes slide1 {
    0% {opacity: 0;}
    10% {opacity: 1;}
    30% {opacity: 1;}
    40% {opacity: 0;}
    100% {opacity: 0;}
}

/*２枚目*/
@keyframes slide2 {
    0% {opacity: 0;}
    20% {opacity: 0;}
    30% {opacity: 1;}
    60% {opacity: 1;}
    70% {opacity: 0;}
    100% {opacity: 0;}
}
@-webkit-keyframes slide2 {
    0% {opacity: 0;}
    20% {opacity: 0;}
    30% {opacity: 1;}
    60% {opacity: 1;}
    70% {opacity: 0;}
    100% {opacity: 0;}
}
@-moz-keyframes slide2 {
    0% {opacity: 0;}
    20% {opacity: 0;}
    30% {opacity: 1;}
    60% {opacity: 1;}
    70% {opacity: 0;}
    100% {opacity: 0;}
}
@-ms-keyframes slide2 {
    0% {opacity: 0;}
    20% {opacity: 0;}
    30% {opacity: 1;}
    60% {opacity: 1;}
    70% {opacity: 0;}
    100% {opacity: 0;}
}

/*３枚目*/
@keyframes slide3 {
    0% {opacity: 0;}
    50% {opacity: 0;}
    60% {opacity: 1;}
    85% {opacity: 1;}
    95% {opacity: 0;}
    100% {opacity: 0;}
}
@-webkit-keyframes slide3 {
    0% {opacity: 0;}
    50% {opacity: 0;}
    60% {opacity: 1;}
    85% {opacity: 1;}
    95% {opacity: 0;}
    100% {opacity: 0;}
}
@-moz-keyframes slide3 {
    0% {opacity: 0;}
    50% {opacity: 0;}
    60% {opacity: 1;}
    85% {opacity: 1;}
    95% {opacity: 0;}
    100% {opacity: 0;}
}
@-ms-keyframes slide3 {
    0% {opacity: 0;}
    50% {opacity: 0;}
    60% {opacity: 1;}
    85% {opacity: 1;}
    95% {opacity: 0;}
    100% {opacity: 0;}
}

/*コンテンツ（見出しバーや文字などが入っているブロック）
---------------------------------------------------------------------------*/
/*コンテンツのh2タグの設定*/
#contents h2 {
	clear: both;
	margin-bottom: 20px;
	color: #fff;		/*文字色*/
	padding: 10px 20px;	/*上下、左右への余白*/
	background: #00bd29;	/*背景色#d08047*/
/*	background: linear-gradient(#04ff3b, #00bd29);	/*背景色#d08047*/
	border-radius: 10px;	/*角を丸くする指定。この１行を削除すれば角丸がなくなります。*/
}

/*コンテンツのh3タグの設定*/
#contents h3 {
	clear: both;
	margin-bottom: 20px;
	padding: 8px 20px;	/*上下、左右への余白*/
	background: #fff;	/*背景色*/
	border: 1px solid #ccc;	/*枠線の幅、線種、色*/
	border-radius: 10px;	/*角を丸くする指定。この１行を削除すれば角丸がなくなります。*/
}
/*コンテンツのp(段落)タグ設定*/
#contents img {
	cursor: pointer;
}
#contents div {
	margin-top:10px;
}

---------------------------------------------------------------------------*/
/*各ブロックごとの設定*/
.list {
	overflow: hidden;
/*	border-bottom: 1px solid #ccc;	/*下線の幅、線種、色*/
}
/*h4見出しの設定*/
.list h4 {
	font-size: larger;		/*文字サイズ*/
	font-weight: bold;	/*太字にする設定。標準がいいならこの行削除。*/
	color: #80ad45;	/*文字色*/
}
/*画像の設定*/

img.wide {
	width: 200px;			/*画像幅*/
	float: right;		/*画像を右に回り込み*/
	display: block;
}
img.narrow {
	display: none;
}

.hoshi {
	margin-left: 0.5em;text-indent: -0.5em;
}
/*フッター(ページ最下部のcopyrightのパーツ)設定
---------------------------------------------------------------------------*/
footer {
	clear: both;
	text-align: center;	/*文字をセンタリング*/
	padding: 5px 0px 3px 0px;	/*上、左右、下へのボックス内の余白*/
	background: #23b3e9;
	color: #FFF;
	line-height: 1.1;
	font-size: 14px;
}
footer a {
	text-decoration: none;
	border: none;
}

/*トップページ内「更新情報・お知らせ」ブロック
---------------------------------------------------------------------------*/
/*ブロック全体の設定*/
#shigen-shin dl {
	padding: 0px 20px;	/*上下、左右へのブロック内の余白*/
	margin-bottom: 20px;	/*ブロックの下(外側)に空ける余白*/
}
/*日付設定*/
#shigen-shin dt {
	font-weight: bold;	/*太字にする設定。標準がいいならこの行削除。*/
	float: left;
	padding-bottom:0.5em;
}
/*記事設定*/
#shigen-shin dd {
	padding-left: 6em;
	padding-bottom:0.5em;
}

/*テーブル
---------------------------------------------------------------------------*/
/*テーブル１行目に入った見出し部分（※caption）*/
.ta1 caption {
	border: 1px solid #999;	/*テーブルの枠線の幅、線種、色*/
	border-bottom: none;	/*下線だけ消す*/
	text-align: center;		/*文字を左寄せ*/
	background: #eee;		/*背景色*/
	font-weight: bold;		/*太字に*/
	padding: 10px;			/*ボックス内の余白*/
}
/*テーブル１行目に入った見出し部分（※tamidashi）*/
.ta1 th.tamidashi {
	width: 73px;
	text-align: center;	/*左よせ*/
	background: #eee;	/*背景色*/
}
/*テーブル１行目に入った見出し部分（※tamidashi）*/
.ta1 td.tamidashi {
	width: auto;
	text-align: center;	/*左よせ*/
	background: #eee;	/*背景色*/
}
/*テーブル１行目に入った見出し部分（※tamidashi）*/
.ta1 td.tamidashiBIKO {
	width: auto;
	text-align: center;	/*左よせ*/
	background: #eee;	/*背景色*/
}
/*ta1テーブルブロック設定*/
.ta1 {
	table-layout: fixed;
	width: 100%;
	margin: 0 auto 20px;
}
.ta1, .ta1 td, .ta1 th {
	word-break: break-all;
	border: 1px solid #999;	/*テーブルの枠線の幅、線種、色*/
	padding: 5px;			/*テーブル内の余白*/
}
/*テーブルの左側ボックス*/
.ta1 th {
	text-align: center;	/*センタリング*/
	font-weight: bold;		/*太字に*/
}

.msg {
	color: red;
	font-weight: bold;
}
/*PAGE TOP（↑）設定
---------------------------------------------------------------------------*/
/*通常時のボタンは非表示*/
body .nav-fix-pos-pagetop a {
	display: none;
}
/*fixmenu_pagetop.jsで設定している設定値になったら出現するボタンスタイル*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 100;position: fixed;animation-name: scroll;animation-duration: 1s;animation-fill-mode: forwards;
	width: 50px;		/*ボタンの幅*/
	line-height: 50px;	/*ボタンの高さ*/
	bottom: 50px;		/*ウィンドウの下から20pxの場所に配置*/
	right: 1%;			/*ウィンドウの右から1%の場所に配置*/
	color: #fff;		/*文字色*/
	border-radius: 50%;	/*角丸指定。50%にすると円形になる。四角形がいいならこの１行削除。*/
	background: #23b3e9;	/*背景色*/
}
/*マウスオン時の背景色*/
body.is-fixed-pagetop .nav-fix-pos-pagetop a:hover {
	background: #fff;
	color: #000;
}

p.indentback{
	padding-left: 2em;
  }
  
pp {
	font-weight: normal; font-size: small;
}
  
  
/*画面幅750px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:750px){

/*テーブル１行目に入った見出し部分（※tamidashi）*/
.ta1 td.tamidashiBIKO {
	width: 112px;
}
/*各ブロックごとの設定*/
#logo img {
	width: 170px;	/*画像幅*/
	top:55px;
}
#logo2 img {
	width: 210px;	/*画像幅*/
	top:115px;
}
#mainimg,#slide0,#slide1,#slide2,#slide3 {
	height:203px;
	width: 540px;
}
}

/*画面幅400px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:560px){
/*回収資源のイメージ*/
img.wide {
	display: none;
}
img.narrow {
	width: 180px;			/*画像幅*/
	float: right;		/*画像を右に回り込み*/
	display: block;
}
#mainimg,#slide0,#slide1,#slide2,#slide3 {
	height:143px;
	width: 380px;
}
}
/*画面幅400px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:400px){

#logo img {
	width: 170px;	/*画像幅*/
	top:30px;
}
#logo2 img {
	width: 210px;	/*画像幅*/
	top:85px;
}
#mainimg,#slide0,#slide1,#slide2,#slide3 {
	height:120px;
	width: 320px;
}
}