@charset "utf-8";
/*BASE*/

/*HEADER*/
.keyvisual {
	background-image:url(../images/company/keyvisual.webp);
}

/*News Topics*/
@import url('https://fonts.googleapis.com/css2?family=Courier+New&display=swap&text=0123456789.%20');
#news menu input { display:none; }
#news .feed a {
	color:#333;
}
#news .feed .time {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	align-items:center;
	gap:1em;
	box-sizing:content-box;
	font-family: "Courier New";
    font-feature-settings: "tnum";
	font-weight:600;
	letter-spacing:-0.04em;
	line-height:1;
	white-space:nowrap;
}
#news .feed > li .time::after {
	display:block;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight:400;
	letter-spacing: normal !important;
	color:#FFF;
	width:calc(4em + 2em);
	text-align:center;
	padding:.5em 0;
	border-radius:6px;
}
#news .feed > li[data-category="ItemNew"] .time::after {
	content:"新製品";
	background-color:#1f82cd;
}
#news .feed > li[data-category="ItemPump"] .time::after {
	content:"給油機器";
	background-color:#39F;
}
#news .feed > li[data-category="ItemUsed"] .time::after {
	content:"中古機器";
	background-color:#be8f3c;
}
#news .feed > li[data-category="PriceDown"] .time::after {
	content:"値下げ";
	background-color:#C00;
}
#news .feed > li[data-category="MediaTV"] .time::after {
	content:"TV放映";
	background-color:#C00;
}

@media not screen and (min-width: 768px) {
/*BASE*/

/*NEWS*/
#news {
	padding:0 0 4rem 0;
	
}
#news .container {
}
#news .contents {
	width:100%;
}
#news h1 .en {
	font-size: 40px;
	font-weight:700;
}
#news h1 .ja {
	font-size: 18px;
}
#news .feed {
	overflow-y:scroll;
	height:calc((1em + 2em + 1px) * 6 );
	max-height:calc(100vh - 120px);
	padding:1rem 0 0;
	margin:0 2rem;
}
#news .feed li {
	padding:1rem 0;
	border-bottom:solid 1px rgba(245,245,245,1);
}
#news .feed li a {
	display:block;
}
#news .feed .time {
	display:flex;
	flex-flow: row nowrap;
	justify-content:space-between;
	align-items:center;
	font-size: 14px;
	margin-bottom:.5rem;
}
#news .feed > li .time::after {
	font-size: 12px;
}


}

@media screen and (min-width: 768px) {
/*BASE*/

/*HEADER*/

/*NEWS*/
#news {
	padding:80px 60px;
	
}
#news .container {
	width:100%;
	max-width:1000px;
	margin:auto;
}
#news .contents {
}

#news .feed {
	overflow-y:scroll;
	height:calc((1em + 2em + 1px) * 10 );
}
#news .feed li {
	border-bottom:solid 1px rgba(245,245,245,1);
}
#news .feed li a {
	display:flex;
	align-items:flex-start;
	gap:1em;
	padding:1em 1em 1em 1em;
	transition: box-shadow 0.3s ease;
}
#news .feed li a:hover {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 -4px 8px rgba(0, 0, 0, 0.2);
}
#news .feed .time {
	font-size: clamp(14px, 1.805vw, 16px);
	width:200px;
}
#news .feed > li .time::after {
	font-size: clamp(12px, 1.504vw, 14px);
}
#news .feed > li .data {
	/*flex-grow: 1;*/
	width:calc(100% - 200px);
}

}