@charset "UTF-8";
/*
 * news.css
 *
 */

/* !ニュース
---------------------------------------------------------- */
.news {
	width:auto;
	padding:120px 50px 120px 50px;
}
	.news div.inner {
		width:auto;
		max-width:1100px;
		margin:0 auto;
		position:relative;
	}
		.news div.inner h2.pageTit {
			font-size:34px;
			font-weight: 700;
			color: #26353D;
			line-height: 1.6;
			letter-spacing: 0.04em;
			padding-left:1em;
			position: relative;
			margin-bottom: 60px;
		}
			.news div.inner h2.pageTit:before {
				position: absolute;
				content: "";
				width:3px;
				height: 100%;
				background-color: #21A6D8;
				top:0;
				left:0;
				transform: rotate(20deg);
			}		

		.news div.inner div.newsList {
			display:block;
			width:100%;
			border-top:1px solid #E6E9EA;
		}
			.news div.inner div.newsList dl {
				width:100%;
				line-height:1.8;
				display:flex;
				flex-wrap:wrap;
				border-bottom:1px solid #E6E9EA;
			}
				.news div.inner div.newsList dl dt {
					width:20%;
					padding:1.6em 0;
				}
				.news div.inner div.newsList dl dd {
					width:80%;
					padding:1.6em 60px 1.6em 0;
				}
				.news div.inner div.newsList a dl dt {
						font-weight: 700;
						color:#26353D;
						opacity:.5;
					}
						.news div.inner div.newsList a dl dd {
							color:#26353D;
							transition:.6s;
							position: relative;
						}
							.news div.inner div.newsList a:hover dl dd {
								color:#21A6D8;
							}
							.news div.inner div.newsList a dl dd div.arrow {
								position: absolute;
								width:40px;
								height: 40px;
								border:2px solid #21A6D8;
								border-radius: 50%;
								top:50%;
								margin-top: -20px;
								right:0;
								transition:.3s;
							}
								.news div.inner div.newsList a:hover dl dd div.arrow {
									transform: scale(1.1);
								}
								.news div.inner div.newsList a dl dd div.arrow span {
									display: inline-block;
									vertical-align: middle;
									color: #21A6D8;
									line-height: 1;
									position: relative;
									width: 0.5em;
									height: 0.13em;
									background: currentColor;
									top:1px;
									left:14px;
								}
									.news div.inner div.newsList a dl dd div.arrow span:before {
										content: '';
										width: 0.5em;
										height: 0.5em;
										border: 0.13em solid currentColor;
										border-left: 0;
										border-bottom: 0;
										transform: rotate(45deg);
										transform-origin: top right;
										position: absolute;
										top: 50%;
										right: -0.05em;
										box-sizing: border-box;
									}
							
ul.articleNavi{
	width:60%;
	margin-left:auto;
	margin-right:auto;
}
	ul.articleNavi li {
		width:33.3%;
		float:left;
	}
	ul.articleNavi li a{
		display:block;
		height:56px;
		line-height:56px;
		background:#21a6d8;
		color:#FFF;
		text-align:center;
		-webkit-transition: all .5s;
		transition: all .5s;
		margin-left:1px;
	}
		ul.articleNavi li:first-child a{
			border-radius: 6px 0 0 6px;
		}
		ul.articleNavi li:last-child a{
			border-radius: 0 6px 6px 0;
		}
	ul.articleNavi li a:hover{
		opacity:.7;
	}
	
.articleBody {
	margin-bottom:20px;
}
	.articleBody h2.articleTit{
		font-size:20px;
		font-weight:700;
		line-height:1.6;
		letter-spacing: 0;
		border-bottom:1px solid #E7EBED;
		padding-bottom:1em;
		padding-left:0;
		margin-bottom:10px;
	}
	.articleBody p.date{
		text-align:right;
		color:#999;
		margin-bottom:30px;
	}
	.articleBody div.txt p {
		margin-bottom:30px;
	}
	.articleBody div.txt a {
		color:#21a6d8;
		text-decoration:underline;
		transition:.6s;
	}
		.articleBody div.txt a:hover {
			opacity:.7;
		}
		
.imgBlock {
	text-align:center;
}
.imgBlock img {
	display:block;
	width:auto;
	max-width:80%;
	margin:0 auto 40px auto;
}

.fileBlock a {
	color:#21a6d8;
	transition:.6s;
}
	.fileBlock a:hover {
		opacity:.7;
	}

@media screen and (max-width:1039px){
.news {
	padding:100px 30px 100px 30px;
}
		.news div.inner h2.pageTit {
			font-size:28px;
			padding-left:0.8em;
			margin-bottom: 50px;
		}

				.news div.inner div.newsList dl dt {
					padding:1.6em 0;
				}
				.news div.inner div.newsList dl dd {
					padding:1.6em 60px 1.6em 0;
				}
							.news div.inner div.newsList a:hover dl dd {
								color:#26353D;
							}
								.news div.inner div.newsList a:hover dl dd div.arrow {
									transform: none;
								}

	ul.articleNavi li a:hover{
		opacity:1;
	}
	
	.articleBody h2.articleTit{
		font-size:18px;
	}
		.articleBody div.txt p a:hover {
			opacity:1;
		}
	
	.fileBlock a:hover {
		opacity:1;
	}
}

@media screen and (max-width:767px){
.news {
	padding:80px 25px 100px 25px;
}
		.news div.inner h2.pageTit {
			font-size:22px;
			line-height: 1.8;
			margin-bottom: 40px;
		}
			.news div.inner h2.pageTit:before {
				width:2px;
			}
	
				.news div.inner div.newsList dl dt {
					width:100%;
					padding:1.6em 0 0 0;
					margin-bottom: -1.4em;
				}
				.news div.inner div.newsList dl dd {
					width:100%;
					padding:1.6em 60px 1.6em 0;
				}
							.news div.inner div.newsList a dl dd div.arrow {
								top:50%;
								margin-top: -33px;
							}
								.news div.inner div.newsList a dl dd div.arrow span {
									top:3px;
									left:14px;
								}

ul.articleNavi{
	width:100%;
	font-size:12px;
}
	ul.articleNavi li a{
		height:50px;
		line-height:50px;
	}
	
	.articleBody h2.articleTit{
		font-size:16px;
	}

.imgBlock img {
	max-width:90%;
}
}