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

/*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;
}

@media not screen and (min-width: 768px) {
/*BASE*/
@media (orientation: landscape){
}
/*HEADER*/
#header h1 svg.logo-svg {
	width:auto;
	height:32px;
}
#header h1 svg.logo-svg path {
	fill:rgba(31,130,205,1);
}
#headerNavi {
	display:none;
}
#headerNavi.display-on {
	display:none;
}
#mainvisual img,
#mainvisual svg {
	width:100%;
}
@media (orientation: portrait){
}
@media (orientation: landscape){
}

/*NEWS*/
#news {
	padding:0 0 4rem 0;
	
}
#news .container {
}
#news .contents {
	width:100%;
}
#news .head-box {
	background-color:rgba(245,245,245,1);
}
#news .head-box h1 {
	display:flex;
	flex-direction:column-reverse;
	justify-content:center;
	align-items:center;
	width:100%;
	padding:2rem 0;
	margin:0;
}
#news h1 .en {
	font-size: 40px;
	font-weight:700;
}
#news h1 .ja {
	font-size: 18px;
}
#news .head-box menu {
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	background-color: rgba(255,255,255,1);
	border-bottom:solid 1px rgba(31,126,173,1);
	overflow-x:auto;
}
#news .head-box menu::-webkit-scrollbar {
  height: 4px;
}
#news .head-box menu::-webkit-scrollbar-track {
  border-radius: 4px;
  background: rgba(241,241,241,1);
}
#news .head-box menu::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background: rgba(30,55,128,1);
}
#news .head-box menu input[type="radio"]:not(:checked) + label {
	color:rgba(31,126,173,1);
	background-color: rgba(255,255,255,1);
}
#news .head-box menu input[type="radio"]:checked + label {
	color:#FFF;
	background-color:rgba(31,126,173,1);
}
#news .head-box menu li {
	white-space:nowrap;
}
#news .head-box menu li label {
	display:block;
	font-size:12px;
	text-align:center;
	padding:.5rem 0;
}

#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;
}

/*CONTENTS*/
#contents {
	padding:4rem 2rem;
	background: linear-gradient(125deg, rgba(26,65,134,1) 0%, rgba(24,140,207,1) 50%, rgba(28,147,214,1) 50%, rgba(31,130,205,1) 100%);
}
#contents .container {
}
#contents ul.pages {
	display:grid;
	grid-template-columns:1fr 1fr;
	row-gap:1rem;
	column-gap:1rem;
}
#contents ul.pages li {
}
#contents ul.pages li a {
	display:block;
	width:100%;
	height:100%;
	color:#FFF;
}
#contents ul.pages li a .txt-box:before {
	content:"";
	display:block;
	background-repeat:no-repeat;
	background-size:cover;
	width:100%;
	height:auto;
	aspect-ratio:16 / 10;
}
#contents ul.pages li.dispensers a .txt-box:before {
	background-image:url(../images/home/contents_products.jpg?ver1.1);
}
#contents ul.pages li.parts a .txt-box:before {
	background-image:url(../images/home/contents_parts.jpg?ver1.1);
}
#contents ul.pages li.maintenance a .txt-box:before {
	background-image:url(../images/home/contents_maintenance.jpg?ver1.1);
}
#contents ul.pages li.used a .txt-box:before {
	background-image:url(../images/home/contents_used.jpg?ver1.1);
}
#contents ul.pages li.contract a .txt-box:before {
	background-image:url(../images/home/contents_contract.jpg?ver1.1);
}
#contents ul.pages li.ec a .txt-box:before {
	background-image:url(../images/home/contents_ec.jpg?ver1.2);
}
#contents ul.pages li a .txt-box h1 {
	font-size: 14px;
	font-weight:600;
	text-align:center;
	padding:.5rem 0;
	background-color:rgba(0,0,0,.8);
}
#contents ul.pages li.contract a .txt-box h1 {
	color:#333;
	background-color:rgba(255,255,255,1);
}

/*バナーリスト*/
#pickup {
	padding:4rem 0;
}
}

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

/*HEADER*/

#mainvisual img,
#mainvisual svg {
	width:100%;
}

/*NEWS*/
#news {
	padding:80px 0;
	
}
#news .container {
	background: linear-gradient(90deg, rgba(245,245,245,1) 0%, rgba(245,245,245,1) 30%, rgba(255,255,255,1) 30%, rgba(255,255,255,1) 100%);
	padding:0 60px;
}
#news .contents {
	display:grid;
	grid-template-columns: minmax(400px, 30%) auto;
	width:100%;
}
#news .head-box {
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	background-color:rgba(245,245,245,1);
	padding-right:1rem;
}
#news .head-box h1 {
	display:flex;
	flex-direction:column-reverse;
	justify-content:center;
	align-items:center;
	width:100%;
	max-width:400px;
	margin:0 0 2rem auto;
}
#news h1 .ja {
	font-size: clamp(14px, 1.2vw, 16px);
}
#news h1 .en {
	font-size: clamp(32px, 2.8vw, 40px);
	font-weight:700;
}
#news .head-box menu input[type="radio"]:not(:checked) + label {
	background-color:#FFF;
	color:rgba(31,126,173,1);
}
#news .head-box menu input[type="radio"]:checked + label {
	color:#FFF;
	background-color:rgba(31,126,173,1);
}
#news .head-box menu {
	display:flex;
	flex-flow: row wrap;
	justify-content:center;
	align-items:center;
	gap:1rem;
	width:100%;
	max-width:400px;
	margin:0 0 0 auto;
}
#news .head-box menu li {
	width:calc((100% / 3) - 1.5rem)
}
#news .head-box menu li label {
	display:block;
	font-size:14px;
	text-align:center;
	padding:.5rem 1rem;
	cursor:pointer;
}

#news .feed {
	overflow-y:scroll;
	height:calc((1em + 2em + 1px) * 6 );
}
#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 2em;
	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);
}
#news .feed > li .time::after {
	font-size: clamp(12px, 1.504vw, 14px);
}
#news .feed > li .data {
	flex-grow: 1;
}

/*CONTENTS*/
#contents {
	padding:80px 60px;
	background: linear-gradient(125deg, rgba(26,65,134,1) 0%, rgba(24,140,207,1) 50%, rgba(28,147,214,1) 50%, rgba(31,130,205,1) 100%);
}
#contents .container {
}
#contents ul.pages {
	display:grid;
	grid-template-columns:1fr 1fr 1fr;
	row-gap:30px;
	column-gap:30px;
	width:100%;
	max-width:1000px;
	margin:auto;
}
#contents ul.pages li {
	background-position:center center;
	background-size:cover;
}
#contents ul.pages li.dispensers {
	grid-row:1 / 2;
	grid-column:1 / 2;
	background-image:url(../images/home/contents_products.jpg?ver1.1);
}
#contents ul.pages li.parts {
	grid-row:1 / 2;
	grid-column:2 / 3;
	aspect-ratio: 16 / 10;
	background-image:url(../images/home/contents_parts.jpg);
}
#contents ul.pages li.maintenance {
	grid-row:1 / 2;
	grid-column:3 / 4;
	aspect-ratio: 16 / 10;
	background-image:url(../images/home/contents_maintenance.jpg);
}
#contents ul.pages li.used {
	grid-row:2 / 3;
	grid-column:1 / 2;
	aspect-ratio: 16 / 10;
	background-image:url(../images/home/contents_used.jpg?ver1.1);
}
#contents ul.pages li.ec {
	grid-row:2 / 3;
	grid-column:2 / 3;
	aspect-ratio: 16 / 10;
	background-image:url(../images/home/contents_ec.jpg?ver1.2);
}
#contents ul.pages li.contract {
	grid-row:2 / 3;
	grid-column:3 / 4;
	aspect-ratio: 16 / 10;
	background-image:url(../images/home/contents_contract.jpg?ver1.1);
}
#contents ul.pages li a {
	display:block;
	width:100%;
	height:100%;
	color:#FFF;
	position:relative;
}
#contents ul.pages li a .txt-box {
	width:100%;
	background-color:rgba(0,0,0,.85);
	padding:1em 0;
	position:absolute;
	bottom:0;
	left:0;
	z-index:1;
	transition:background-color ease-in-out .25s;
}
#contents ul.pages li.contract a {
	color:#333;
}
#contents ul.pages li.contract a .txt-box {
	background-color:rgba(255,255,255,.85);
}
#contents ul.pages li a:hover .txt-box {
	/*color:#FFF;
	background-color:rgba(31,130,205,1);*/
	color:rgba(31,130,205,1);
	background-color:#FFF;
}
#contents ul.pages li a .txt-box h1 {
	font-size: 18px;
	font-weight:600;
	line-height:1;
	letter-spacing:.15em;
	text-indent:-.15em;
	text-align:center;
	position:relative;
}
#contents ul.pages li:not(.contract, .ec) a .txt-box h1::after {
	content:"＞";
	display:flex;
	justify-content:center;
	align-items:center;
	width:20px;
	height:20px;
	font-size:10px;
	line-height:1;
	letter-spacing:0;
	text-indent:0;
	border:solid 1px #FFF;
	position:absolute;
	top:0;
	right:10px;
	z-index:1;
}
#contents ul.pages li:not(.contract, .ec) a:hover .txt-box h1::after {
	border-color:rgba(31,130,205,1);
}
#contents ul.pages li.contract a .txt-box h1::after {
	content:"";
	background: url(../images/tmpl/ico-pdf.svg) no-repeat center center;
	background-size:cover;
	width:20px;
	height:20px;
	line-height:1;
	letter-spacing:0;
	text-indent:0;
	position:absolute;
	top:0;
	right:10px;
	z-index:1;
}
#contents ul.pages li.ec a .txt-box h1::after {
	content:"";
	background: url(../images/tmpl/icon-open-new-window.svg) no-repeat center center;
	background-size:cover;
	width:20px;
	height:20px;
	line-height:1;
	letter-spacing:0;
	text-indent:0;
	position:absolute;
	top:0;
	right:10px;
	z-index:1;
}
#contents ul.pages li a .txt-box h2 {
	/*font-size: clamp(18px, 1.6vw, 32px);
	margin-bottom:.5em;*/
	display:none;
}
/*#contents ul.pages li a .txt-box p {
	font-size: clamp(14px, 1.2vw, 20px);
}*/

/*バナーリスト*/
#pickup {
	padding:80px 0;
}
}
