@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');



/* #mainimage
-----------------------------------------------------------------------------------*/
#mainimage {background: url("../news/img/mainimage-news.jpg") center/cover no-repeat;}





/* news-area
-----------------------------------------------------------------------------------*/
#news-area {
	padding: 0 0 100px;
}

.newsBlock {
	padding: 1.5em;
	width: 100%;
	background-color: #fff;
	border-radius: 5px;
	box-sizing: border-box;
	box-shadow: 0 0 5px rgba(0,0,0,0.2);
	font-size: 1.125em;
	position: relative;
	overflow: hidden;
}
.newsBlock:not(:last-of-type) {margin-bottom: 2em;}
/* icon */
.newsBlock::before {
	position: absolute;
	top: -0.7em;
	left: -3.5em;
	padding: 2.5em 0 0.5em;
	width: 134px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	transform: rotate(-45deg);
	z-index: 3;
}
.newsBlock.newsIcon-news::before {
	content: 'お知らせ';
	background-color: #239c2e;
}
.newsBlock.newsIcon-important::before {
	content: '重要';
	background-color: #ff5656;
}
.newsBlock.newsIcon-product::before {
	content: '製品情報';
	background-color: #00afcc;
}
/* title */
.newsTrigger {
	padding: 1em 3.5em;
	cursor: pointer;
	position: relative;
	transition: all 0.3s ease;
}
.newsTrigger::before,
.newsTrigger::after {
	content: '';
	width: 1.25em;
	height: 3px;
	background-color: #e6c0c0;
	position: absolute;
	inset: 0 1.5em 0 auto;
	margin: auto;
	transition: all 0.3s ease;
}
.newsTrigger::before {transform: rotate(90deg);}
.newsTrigger.open::before {transform: rotate(0);}
.newsTrigger:hover,
.newsTrigger.open {background-color: #f7f6f5;}
/* date */
.newsDate {
	margin-right: 2em;
	font-weight: 600;
}
/* article */
.newsDetail {
	margin: 0 1em;
	padding: 1.5em 0 0;
	text-align: justify;
}
/* img */
.newsImage {
	margin: 0 auto;
	width: 90%;
	max-width: 700px;
}

@media screen and (max-width: 897px) {
	.newsTrigger {padding: 1em 3.5em 1em 2em;}
}

@media screen and (max-width: 480px) {
	.newsBlock {font-size: 1em;}
	.newsTrigger::before,
	.newsTrigger::after {inset: 0 1em 0 auto;}
	.newsDate {
		margin-right: 0;
		display: block;
	}
	.newsDetail {margin: 0;}
	.newsImage {width: 100%;}
}






/* newspager
-----------------------------------------------------------------------------------*/
.newsPager {
	margin-top: 5em;
	text-align: center;
	line-height: 1;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	grid-gap: 10px;
}
.newsPager a {
	padding: 1em;
	background-color: #dedede;color: #666;
}
.newsPager a:hover,
.newsPager a.active {
	background-color: #ff5656;
	color: #fff;
}