@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCs16Ew-.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Ew-.ttf) format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtZ6Ew-.ttf) format('truetype');
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/mulish/v12/1Ptyg83HX_SGhgqO0yLcmjzUAuWexZNRwaA.ttf) format('truetype');
}
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/mulish/v12/1Ptyg83HX_SGhgqO0yLcmjzUAuWexaFRwaA.ttf) format('truetype');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosansjp/v42/-F62fjtqLzI2JPCgQBnw7HFowA.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosansjp/v42/-F6pfjtqLzI2JPCgQBnw7HFQMisq1A.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notosansjp/v42/-F6pfjtqLzI2JPCgQBnw7HFQei0q1A.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Serif JP';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/notoserifjp/v21/xn77YHs72GKoTvER4Gn3b5eMZGKLRkg.otf) format('opentype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrFJA.ttf) format('truetype');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9V1s.ttf) format('truetype');
}
/*
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 VARIABLE FOR  _media
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
/*
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 VARIABLE FOR  _font-line
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
/*
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 VARIABLE FOR  _color
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 */
 main {
	background: none;
}
 
#news-fv {
	background-image: url("/wp-content/themes/keys-bunkering/assets/images/page/news/news_01.png");
   background-size: 100%;
   height: 450px;
   background-repeat: no-repeat;
}

#news-fv .news-fv-title {
	position: absolute;
    top: 205px;
    left: 133px;
    color: white;
}

#news-fv .news-fv-title .title-text {
	font: normal normal normal 52px/74px Lusitana;
	letter-spacing: 0px;
}

#news-fv .news-fv-title .title-text-small {
	font-family: Noto Serif JP;
	font-size: 18px;
	line-height: 34px;
	letter-spacing: 0px;
}

#news-content {
	width: 1100px;
	margin: 80px auto;
	background: #FFFFFF 0% 0% no-repeat padding-box;
	box-shadow: 0px 0px 30px #00000014;
}

#news-content .news-content-list {
	padding: 87px 100px 50px;
	border-top: solid 2px #1D76BD;
}

#news-content .news-content-list a.year-button div{
	background: white 0% 0% no-repeat padding-box;
	border: 1px solid #1D76BD;
	border-radius: 17px;
	opacity: 1;
	text-align: center;
	font: normal normal normal 14px/32px Noto Sans CJK JP;
	letter-spacing: 0px;
	color: #1D76BD;
	width: 100px;
	display: inline-block;
	margin-right: 12px;
}
#news-content .news-content-list a.year-button:hover div{
	background: #1D76BD 0% 0% no-repeat padding-box;
	color: #FFFFFF;
}
#news-content .news-content-list a.year-button.isActive div{
	background: #1D76BD 0% 0% no-repeat padding-box;
	border-radius: 17px;
	opacity: 1;
	text-align: center;
	font: normal normal normal 14px/32px Noto Sans CJK JP;
	letter-spacing: 0px;
	color: #FFFFFF;
	width: 100px;
	display: inline-block;
	margin-right: 12px;
}

#news-content .news-content-list ul {
	margin-top: 20px;
}

#news-content .news-content-list .news-content-item {
	padding: 20px 0px;
	border-bottom: 1px solid #F2F2F2;
	position: relative;
}

#news-content .news-content-list .news-content-item::after {
	content: "";
	margin: auto;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 94%;
	width: 10px;
	height: 10px;
	border-top: 3px solid #333333;
	border-right: 3px solid #333333;
	transform: rotate(45deg);
}

#news-content .news-content-list .news-content-item .content-date {
	font: normal normal normal 14px/32px Lusitana;
	letter-spacing: 0px;
	color: #333333;
}

#news-content .news-content-list .news-content-item .content-title {
	font: normal normal normal 14px/32px 'Noto Sans JP';
	letter-spacing: 0px;
	color: #333333;
	width: 90%;
}

#news-content .news-content-list .news-content-item .content-text {
	font: normal normal normal 14px/32px 'Noto Sans JP';
	letter-spacing: 0px;
	color: #333333;
}

@media only screen and (max-width: 1365px) {
	#news-fv {
		background-image: url("/wp-content/themes/keys-bunkering/assets/images/page/news/news_01.png");
	   background-size: 1365px;
		height: 450px;
		background-repeat: no-repeat;
		background-position-x: calc((100vw - 1365px) / 2);
	}
}

@media only screen and (max-width: 768px) {
	#news-fv {
		background-image: url("/wp-content/themes/keys-bunkering/assets/images/page/news/news_01_sp.png");
	   background-size: cover;
	   height: 110vw;
	   background-repeat: no-repeat;
	   background-position-x: 0px;
	}
	
	#news-fv .news-fv-title {
		width: 90%;
		margin: 0 auto;
		left: 5%;
		top: 50vw;
		text-align: center;
	}
	#news-fv .news-fv-title.english {
		width: 90%;
		margin: 0 auto;
		left: 5%;
		top: 55vw;
		text-align: center;
	}
		
	#news-fv .news-fv-title .title-text {
		font: normal normal normal 36px/47px Lusitana;
		letter-spacing: 0px;
	}
	
	#news-fv .news-fv-title .title-text-small {
		font-family: Noto Serif JP;
		font-size: 16px;
		line-height: 42px;
		letter-spacing: 0px;
	}
	
	#news-content {
		width: calc(100% - 60px);
	}

	#news-content .news-content-list {
		margin: 60px 0px 0px;
		padding: 50px 20px 0px;
	}
	
	#news-content .news-content-list a.year-button div{
		width: calc(50% - 12px);
		display: inline-block;
		margin-right: 0px;
		margin-bottom: 12px;
	}
	#news-content .news-content-list a.year-button:nth-child(odd) div {
		margin-right: 20px !important;
	}
	#news-content .news-content-list a.year-button:hover div{

	}
	#news-content .news-content-list a.year-button.isActive div{
		width: calc(50% - 12px);
		display: inline-block;
		margin-right: 0px;
	}
	
	#news-content .news-content-list ul {
		margin-top: 20px;
	}
	
	#news-content .news-content-list .news-content-item {
		width: 100%;
		height: auto;
		display: block;
		padding: 20px 20px 20px 0;
	}
	
	#news-content .news-content-list .news-content-item .content-date {

	}
	
	#news-content .news-content-list .news-content-item .content-title {
		line-height: 26px;
		width: 100%;
	}
}