@charset "utf-8";

*,*::before,*::after {
box-sizing: border-box;}

ul,li {list-style: none; margin:0; padding: 0;}
a {text-decoration: none;}




/* PC ================================================== */
@media all and (min-width:960px){
	#news-page {
	padding-top: 80px;
	}
		.top-img-area {
			width: 100%;
			height: auto;
			max-width: 1500px;
			margin: 0 auto;
			position: relative;
			display: flex;
			justify-content: center;
			flex-direction: row-reverse;
			align-items: center;
  }
	.top-img {
		display: block;
		width: 800px;
		height: auto;
		/* margin: 0 0 0 auto; */
		background-image: url(../img/news_img.png);
		background-size: cover;
		background-position: center;
}
	.ttl-box {
		/* position: absolute;
		top:50%;
		left: 70px;
		transform: translateY(-50%); */
	}
		.ttl-box h1 {
			font-size: 60px;
		}
			.ttl-box span {
				font-size: 20px;
			}
		.news-inner {
		width: 100%;
    max-width: 1080px;
    margin: 100px auto 0;
		}
		.news-box {
			width: 100%;
			display: flex;
			margin: 30px 0 0;
			color:#404040;
		}
			.news-box:hover {
				opacity: 0.8;
			}
		/* .news-box img {
			width: 371px;
			height:230px;
			margin: 0 0 15px;
		} */
		.news-img {
			width: 371px;
			height:275px;
			margin: 0 0 15px;
			background-size: cover;
			background-position: center;
		}
		.news-img img{
			width: 100%;
		    background-size: cover;
		    background-position: center;
		   }
		.news-box-txt-area  {
			width: 677px;
			margin: 0 0 0 40px;
		}
			.date-inbox {
				display: flex;
				align-items: center;
				color: #CCCCCC;
			}
			.category-box {
				margin-left: 10px;
			}
				.news-ttl-inbox {
					width: 70%;
					margin: 10px 0 10px;
					font-weight: bold;
					font-size: 24px;
					line-height: 1.5;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					overflow: hidden;
				}
					.news-txt {
						font-size: 16px;
						font-weight: normal;
						line-height: 1.5;
						letter-spacing: 0.075em;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 4;
						overflow: hidden;
					}

/* ページネーション */
.pagenation {
    width: 100%;
    margin: 50px auto 90px;
    max-width: 1080px;}
	.pages {
		display: flex;
		width: 280px;
		height: auto;
	}
		.page {
			width: 45px;
			height: 45px;
			border-radius: 3px;
			background-color: #056C21;
		}
			.page:not(:first-child){
				background-color: #DEDEDE;
				margin-left :5px;
			}
			.page:hover {
				background-color: #056C21;
			}
			.page a {
				color:#fff;
				display: inline-block;
				width: 100%;
				height: 45px;
				text-align: center;
				line-height: 45px;
			}

/* detail */
.detail-inner {
	display: flex;
	width: 80%;
	max-width: 1500px;
	margin: 80px auto;
}
	.contents {
		width: 700px;
	}
		.detail-ttl {
			font-weight: bold;
			font-size: 32px;
			line-height: 1.2;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			margin: 0px 0 20px;
		}
		.detail-inbox {
			margin:0 0 40px 0;
		}
		.detail-category {
			margin:0 10px 0 0;
		}
			.contents img {
				width: 100%;
				height: auto;
				margin: 20px 0;
			}
			.detail-txt {
				width: 100%;
				height: auto;
				margin: 20px 0 60px;
				line-height: 1.7;
				letter-spacing: 0.12em;
			}
				.back {
					text-decoration: underline;
					color: #056C21;
				}
.news-sidebar {
	width: 290px;
	margin: 0 auto;
}
	.side-top-ttl {
		font-size: 24px;
		font-weight: bold;
	}
		.side-box {
			margin: 10px 0;
			padding: 0 0 10px;
			border-bottom :1px dotted #DEDEDE;
		}
			.side-box a {
				color: #404040;
			}
		.side-ttl {
			font-size: 16px;
			font-weight: bold;
			margin: 7px 0 0;
			display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
		}
		.new-category {
			margin: 40px 0 0;
		}
			.cate-ttl {
				font-size: 16px;
				font-weight: bold;
				margin: 12px 0 0;
			}
}


/* Tablet ================================================== */
@media all and (min-width:560px) and (max-width:959px){
	#news-page {
		padding-top: 80px;
		}
			.top-img-area {
				width: 100%;
				height: auto;
				margin: 0 auto;
				position: relative;
		}
		.top-img {
			width: 100%;
			height: auto;
			margin: 0 auto;
			background-image: url(../img/news_img.png);
			position: relative;
			background-size: cover;
			background-position: center;
	}
		.ttl-box {
			width: 86%;
		}
			.ttl-box h1 {
				font-size: 38px;
			}
				.company-txt-area span {
					font-size: 20px;
				}
				.top-img-area img {
					width: 100%;
					height: auto;
					margin:0 auto;
				}
			.news-inner {
			width: 86%;
			margin: 50px auto 0;
			}
			.news-box {
				display: inline-block;
				width: 100%;
				margin: 30px 0 0;
				color:#404040;
			}
			.news-img {
				width: 100%;
				height:auto;
				margin: 0 0 15px;
			}
				.news-img img {
					width: 100%;
					height:auto;
				}
			.news-box-txt-area  {
				width: 100%;
				margin: 20px auto 20px;
			}
				.date-inbox {
					display: flex;
					align-items: center;
					color: #CCCCCC;
					font-size: 16px;
				}
				.category-box {
					margin-left: 10px;
				}
					.news-ttl-inbox {
						width: 100%;
						margin: 10px 0 10px;
						font-weight: bold;
						font-size: 26px;
						line-height: 1.5;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
						.news-txt {
							font-size: 16px;
							font-weight: normal;
							line-height: 1.5;
							letter-spacing: 0.075em;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 4;
							overflow: hidden;
						}

	/* ページネーション */
	.pagenation {
		width: 86%;
		margin: 50px auto 100px;
		height: 70px;}
		.pages {
			display: flex;
			width: 280px;
			height: auto;
		}
			.page {
				width: 45px;
				height: 45px;
				border-radius: 3px;
				background-color: #056C21;
			}
				.page:not(:first-child){
					background-color: #DEDEDE;
					margin-left :5px;
				}
				.page:hover {
					background-color: #056C21;
				}
				.page a {
					color:#fff;
					display: inline-block;
					width: 100%;
					height: 45px;
					text-align: center;
					line-height: 45px;
				}

	/* detail */
	.detail-inner {
		width: 86%;
		margin: 60px auto;
	}
		.contents {
			width: 100%;
		}
			.detail-ttl {
				font-weight: bold;
				font-size: 28px;
				line-height: 1.2;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				margin: 0px 0 20px;
			}
			.detail-inbox {
				margin:0 0 40px 0;
			}
			.detail-category {
				margin:0 10px 0 0;
			}
				.contents img {
					width: 100%;
					height: auto;
					margin: 20px 0;
				}
				.detail-txt {
					width: 100%;
					height: auto;
					margin: 20px 0 60px;
					line-height: 1.7;
					letter-spacing: 0.075em;
				}
					.back {
						text-decoration: underline;
						color: #056C21;
					}
	.news-sidebar {
		width: 100%;
		margin: 120px auto;
	}
		.side-top-ttl {
			font-size: 24px;
			font-weight: bold;
		}
			.side-box {
				margin: 15px 0;
				padding: 0 0 15px;
				border-bottom :1px dotted #DEDEDE;
			}
				.side-box a {
					color: #404040;
				}
			.side-ttl {
				font-size: 16px;
				font-weight: bold;
				margin: 7px 0 0;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			.new-category {
				margin: 120px 0 0;
			}
				.cate-ttl {
					font-size: 16px;
					font-weight: bold;
					margin: 12px 0 0;
				}
}

/* SP ================================================== */
@media all and (max-width:559px){
	#news-page {
		padding-top: 80px;
		}
			.top-img-area {
				width: 100%;
				height: auto;
				margin: 0 auto;
				position: relative;
		}
		.top-img {
			width: 100%;
			height: auto;
			margin: 0 auto;
			background-image: url(../img/news_img.png);
			position: relative;
			background-size: cover;
			background-position: center;
	}
		.ttl-box {
			width: 86%;
		}
			.ttl-box h1 {
				font-size: 32px;
			}
				.company-txt-area span {
					font-size: 20px;
				}
				.top-img-area img {
					width: 100%;
					height: auto;
					margin:0 auto;
				}
			.news-inner {
			width: 86%;
			margin: 20px auto 0;
			}
			.news-box {
				display: inline-block;
				width: 100%;
				margin: 30px 0;
				color:#404040;
			}
			.news-img {
				width: 100%;
				height:auto;
				margin: 0 0 15px;
			}
				.news-img img {
					width: 100%;
					height:auto;
				}
			.news-box-txt-area  {
				width: 100%;
				margin: 20px auto 20px;
			}
				.date-inbox {
					display: flex;
					align-items: center;
					color: #CCCCCC;
					font-size: 15px;

				}
				.category-box {
					margin-left: 10px;
				}
					.news-ttl-inbox {
						width: 100%;
						margin: 10px 0 10px;
						font-weight: bold;
						font-size: 18px;
						line-height: 1.4;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
						.news-txt {
							font-size: 14px;
							font-weight: normal;
							line-height: 1.5;
							letter-spacing: 0.12em;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 4;
							overflow: hidden;
						}

	/* ページネーション */
	.pagenation {
		width: 86%;
		margin: 50px auto 100px;
		height: 70px;}
		.pages {
			display: flex;
			width: 280px;
			height: auto;
		}
			.page {
				width: 45px;
				height: 45px;
				border-radius: 3px;
				background-color: #056C21;
			}
				.page:not(:first-child){
					background-color: #DEDEDE;
					margin-left :5px;
				}
				.page:hover {
					background-color: #056C21;
				}
				.page a {
					color:#fff;
					display: inline-block;
					width: 100%;
					height: 45px;
					text-align: center;
					line-height: 45px;
				}

	/* detail */
	.detail-inner {
		width: 86%;
		margin: 60px auto;
	}
		.contents {
			width: 100%;
		}
			.detail-ttl {
				font-weight: bold;
				font-size: 24px;
				line-height: 1.4;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				margin: 0px 0 10px;
			}
			.detail-inbox {
				margin:0 0 30px 0;
			}
			.detail-category {
				margin:0 10px 0 0;
			}
				.contents img {
					width: 100%;
					height: auto;
					margin: 20px 0;
				}
				.detail-txt {
					width: 100%;
					height: auto;
					margin: 20px 0 60px;
					font-size: 16px;
					line-height: 1.5;
					letter-spacing: 0.075em;
				}
					.back {
						text-decoration: underline;
						color: #056C21;
					}
	.news-sidebar {
		width: 100%;
		margin: 120px auto;
	}
		.side-top-ttl {
			font-size: 24px;
			font-weight: bold;
		}
			.side-box {
				margin: 10px 0;
				padding: 0 0 10px;
				border-bottom :1px dotted #DEDEDE;
			}
				.side-box a {
					color: #404040;
				}
			.side-ttl {
				font-size: 16px;
				font-weight: bold;
				margin: 7px 0 0;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
			}
			.new-category {
				margin: 120px 0 0;
			}
				.cate-ttl {
					font-size: 16px;
					font-weight: bold;
					margin: 12px 0 0;
				}
}