#news {
	background-color: rgb(51,204,255,0.5);
	width: 100%;
	padding-top: 15px;
	padding-bottom: 40px;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #CCCCCC;
	border-left-color: #CCCCCC;
}
#newslist {
	width: 98%;
	margin-right: auto;
	margin-left: auto;
	max-width:1009px;
	padding-right: 1%;
	padding-left: 1%;
	overflow: hidden;
}
#newslist .title {
	font-size: 18px;
}
#newslist .bt a:link{
	COLOR:#ffffff;
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: 0px;
	padding: 0px;
}

#newslist .bt a:visited{
	COLOR:#ffffff;
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: 0px;
	padding: 0px;
}
#newslist .bt a:hover{
	COLOR:#FF9900;
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: 0px;
	padding: 0px;
}


#catch {
	background-color: #f8f8f8;
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}
#catch .box {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	max-width:1009px;
}
#catch .com {
	font-size: 24px;
	text-align: center;
	padding-bottom: 5px;
}
#catch .comment {
	text-align: center;
	padding-bottom: 30px;
	margin-right: auto;
	margin-left: auto;
}

#catch .logo {
	text-align: center;
	width: 60%;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 10px;
}
#catch .comment .bt a:link{
	COLOR:#ffffff;
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: 0px;
	padding: 0px;
}

#catch .comment .bt a:visited{
	COLOR:#ffffff;
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: 0px;
	padding: 0px;
}
#catch .comment .bt a:hover{
	COLOR:#FF9900;
	text-decoration: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: 0px;
	padding: 0px;
}





#recycle {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	max-width:1009px;
	margin-top: 35px;
	margin-bottom: 50px;
}
#recycle .subtitle {
	border-bottom-width: 3px;
	border-bottom-style: double;
	border-bottom-color: #0099CB;
	font-size: 30px;
	text-align: center;
	margin-bottom: 50px;
}
#recycle .pic {
	margin: 0px;
	padding: 0px;
}

#country {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	background-image: url(../img/country-bg.jpg);
	background-repeat: repeat-y;
	background-position: center top;
	padding-bottom: 20px;
	padding-top: 20px;
}
#country .block {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	max-width:1009px;
}
#country .subtitle {
	border-bottom-width: 3px;
	border-bottom-style: double;
	border-bottom-color: #0099CB;
	font-size: 30px;
	text-align: center;
	margin-bottom: 50px;
}
#frags {
	width: 100%;
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
	text-align: center;
}


/*  -----------------------------------------------------------------------------------------------------------  */
/*  画面サイズが480pxまで  */
@media screen and (max-width:480px){
#newslist .com {
	float: left;
	width: 75%;
	line-height: 36px;
}
#newslist .bt {
	float: right;
	width: 20%;
	padding-right: 2%;
	background-color: #0099CB;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}
#newslist .com {
	float: none;
	width: 90%;
	line-height: 36px;
	margin-right: auto;
	margin-left: auto;
}
#newslist .bt {
	float: none;
	width: 30%;
	background-color: #0099CB;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
}
#catch .comment .bt {
	width: 70%;
	margin-right: auto;
	margin-left: auto;
	background-color: #0099CB;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
}


#catch #slidemb {
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
}
#slide {
	display: none;
}
#frags .pic {
	float: left;
	width: 32%;
	padding-right: 2px;
	padding-left: 2px;
	padding-bottom: 15px;
}

}

@media screen and (min-width:480px) and (max-width:600px) { 
    /*　画面サイズが480pxからはここを読み込む　*/
#newslist .com {
	float: left;
	width: 75%;
	line-height: 36px;
}
#newslist .bt {
	float: right;
	width: 20%;
	padding-right: 2%;
	background-color: #0099CB;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}
#newslist .com {
	float: none;
	width: 90%;
	line-height: 36px;
	margin-right: auto;
	margin-left: auto;
}
#newslist .bt {
	float: none;
	width: 30%;
	background-color: #0099CB;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
}
#catch .comment .bt {
	width: 60%;
	margin-right: auto;
	margin-left: auto;
	background-color: #0099CB;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
}


#catch #slidemb {
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
}
#slide {
	display: none;
}
#frags .pic {
	float: left;
	width: 24%;
	padding-right: 2px;
	padding-left: 2px;
	padding-bottom: 15px;
}

}

@media screen and (min-width:600px) and (max-width:960px) {
    /*　画面サイズが600pxから960pxまではここを読み込む　*/
#newslist .com {
	float: left;
	width: 75%;
	line-height: 36px;
}
#newslist .bt {
	float: right;
	width: 20%;
	padding-right: 2%;
	background-color: #0099CB;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}
#newslist .com {
	float: none;
	width: 90%;
	line-height: 36px;
	margin-right: auto;
	margin-left: auto;
}
#newslist .bt {
	float: none;
	width: 30%;
	background-color: #0099CB;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 20px;
	margin-right: auto;
	margin-left: auto;
}
#catch .comment .bt {
	width: 50%;
	margin-right: auto;
	margin-left: auto;
	background-color: #0099CB;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
}


#catch #slidemb {
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
}
#slide {
	display: none;
}
#frags .pic {
	float: left;
	width: 19%;
	padding-right: 2px;
	padding-left: 2px;
	padding-bottom: 15px;
}

}

@media screen and (min-width:960px) and (max-width:1280px) {
    /*　画面サイズが960pxから1280pxまではここを読み込む　*/
#newslist .com {
	float: left;
	width: 75%;
	line-height: 36px;
}
#newslist .bt {
	float: right;
	width: 20%;
	padding-right: 2%;
	background-color: #0099CB;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}
#catch .comment .bt {
	width: 40%;
	margin-right: auto;
	margin-left: auto;
	background-color: #0099CB;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
}




#catch #slidemb {
	display: none;
}
#slide {
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
}
.picture {
	width:			330px;
	width:			155px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;	/* 相対位置指定 */
}
.picture .name {
	font-size:		130%;
	text-align: 		center;
	padding-top:		20%;
	padding-bottom:		20%;
	color:			#fff;
}
.picture .mask {
	width:			100%;
	position:		absolute;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
.picture:hover .mask {
	opacity:		1;	/* マスクを表示する */
}

 .loop_css2 {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	width: 100vw;
	left: 50%;
	margin-left: -50vw;
	overflow: hidden;
	margin-bottom: 10px;
  }

  .loop_css2 ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .loop_css2 li {
    display: inline-block;
    width: calc(100vw / 4);
    margin: 0 20px 0 0;
    list-style: none;
    text-align: center;
  }

  .loop_css2 li a {
    display: block;
  }

  .loop_css2 li img {
    display: block;
    width: 100%;
    height: auto;
  }

  .loop_css2 li a:hover {
    opacity: .7;
  }

  .loop_css2 ul:first-child {
    -webkit-animation: loop 50s -25s linear infinite;
    animation: loop 50s -25s linear infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
  }

  .loop_css2 ul + ul {
    -webkit-animation: loop2 50s  linear infinite;
    animation: loop2 50s linear infinite;
  }

  .loop_css2:hover ul {
    animation-play-state: paused;
  }
/*アニメーション*/
@-webkit-keyframes loop {
  0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@keyframes loop {
  0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@-webkit-keyframes loop2 {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}

@keyframes loop2 {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}

#frags .pic {
	float: left;
	width: 16%;
	padding-right: 2px;
	padding-left: 2px;
	padding-bottom: 15px;
}


}
@media screen and (min-width:1280px) {
    /*　画面サイズが1280pxからはここを読み込む　*/
#newslist .com {
	float: left;
	width: 75%;
	line-height: 36px;
}
#newslist .bt {
	float: right;
	width: 20%;
	padding-right: 2%;
	background-color: #0099CB;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 10px;
}
#catch .comment .bt {
	width: 40%;
	margin-right: auto;
	margin-left: auto;
	background-color: #0099CB;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-top: 20px;
	margin-bottom: 20px;
}


	

#catch #slidemb {
	display: none;
}
#slide {
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;

}
.picture {
	width:			330px;
	width:			155px;
	overflow:		hidden;
	margin:			10px 8px 10px 16px;
	position:		relative;	/* 相対位置指定 */
}
.picture .name {
	font-size:		130%;
	text-align: 		center;
	padding-top:		20%;
	padding-bottom:		20%;
	color:			#fff;
}
.picture .mask {
	width:			100%;
	position:		absolute;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.4);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
.picture:hover .mask {
	opacity:		1;	/* マスクを表示する */
}

 .loop_css2 {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row nowrap;
	flex-flow: row nowrap;
	width: 100vw;
	left: 50%;
	margin-left: -50vw;
	overflow: hidden;
	margin-bottom: 10px;
  }

  .loop_css2 ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .loop_css2 li {
    display: inline-block;
    width: calc(100vw / 4);
    margin: 0 20px 0 0;
    list-style: none;
    text-align: center;
  }

  .loop_css2 li a {
    display: block;
  }

  .loop_css2 li img {
    display: block;
    width: 100%;
    height: auto;
  }

  .loop_css2 li a:hover {
    opacity: .7;
  }

  .loop_css2 ul:first-child {
    -webkit-animation: loop 50s -25s linear infinite;
    animation: loop 50s -25s linear infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
  }

  .loop_css2 ul + ul {
    -webkit-animation: loop2 50s  linear infinite;
    animation: loop2 50s linear infinite;
  }

  .loop_css2:hover ul {
    animation-play-state: paused;
  }
/*アニメーション*/
@-webkit-keyframes loop {
  0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@keyframes loop {
  0% {
    -webkit-transform: translateX(100%);
    -ms-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
  }
}

@-webkit-keyframes loop2 {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}

@keyframes loop2 {
  0% {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
  }
  to {
    -webkit-transform: translateX(-200%);
    -ms-transform: translateX(-200%);
    transform: translateX(-200%);
  }
}
#frags .pic {
	float: left;
	width: 16%;
	padding-right: 2px;
	padding-left: 2px;
	padding-bottom: 15px;
}

}

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