/* --------------------------------------------------
	JRAニュース 共通
-------------------------------------------------- */



.news_header_line {
	background-color: var(--main-color);
	color: #fff;
}

.news_header_line > .inner > .grid {
	/*display: grid;
	grid-template-columns: 1fr 1fr;
	*/
	display: flex;
}

.news_header_line > .inner > .grid > div {
	flex-grow: 1;
}

.news_header_line > .inner > .grid > .left {
	padding: 15px 0;
	min-width: 356px;
}

.news_header_line > .inner > .grid > .left p.title {
	font-size: 2.2rem;
	font-weight: bold;
}

/*
.news_header_line > .inner > .grid > .left .month_nav {
	display: flex;
	align-items: center;
	gap: 30px;
}

.news_header_line > .inner > .grid > .left .month_nav h1 {
	font-size: 3rem;
	font-weight: bold;
	line-height: 1.3;
}

.news_header_line > .inner > .grid > .left .month_nav h1 span.year {
	font-size: 2rem;
}

.news_header_line > .inner > .grid > .left .month_nav h1 span.cap {
	font-size: 2rem;
}

.news_header_line > .inner > .grid > .left .month_nav .btn-round {
	padding: 0.5em 1em;
	margin-top: 5px;
}

.news_header_line > .inner > .grid > .left .month_nav .btn-round.btn-xs i {
	font-size: 1.1rem;
	line-height: 1.2;
}
*/


.month_nav {
	display: flex;
	/*align-items: baseline;*/
	align-items: center;
	gap: 20px;
}

.month_nav h1 {
	font-size: 3rem;
	font-weight: bold;
	line-height: 1.3;
}

.month_nav h1 span.year {
	font-size: 2rem;
}

.month_nav h1 span.cap {
	font-size: 2rem;
}

.month_nav > div {
	min-width: 60px;
}

.month_nav .btn-round {
	padding: 0.5em 1em;
	margin-top: 5px;
}

.month_nav .btn-round.btn-xs i {
	font-size: 1.1rem;
	line-height: 1.2;
}



.news_header_line > .inner > .grid > .right {
	padding: 20px 0;
	display: flex;
}

.news_header_line > .inner > .grid > .right > .line {
	
	display: flex;
	align-items: stretch;
	flex-grow: 1;
	
}

.news_header_line > .inner > .grid > .right > .line.pc {
	display: flex;
}

.news_header_line > .inner > .grid > .right > .line.sp {
	display: none;
}

.news_header_line > .inner > .grid > .right > .line > .cap {
	display: none;
}

.news_header_line > .inner > .grid > .right > .line > .cap a {
	color: #fff;
}

.news_header_line > .inner > .grid > .right > .line > .cap a i {
	color: #fff;
}


.news_header_line > .inner > .grid > .right > .line > .content {
	display: flex;
	align-items: stretch;
	flex-grow: 1;
}

.news_header_line > .inner > .grid > .right > .line > .content.collapse-target.show {
	display: flex;
}


.news_header_line > .inner > .grid > .right > .line > .content > .cell {
	text-align: center;
	height: 100%;
	border-right: 1px solid #fff;

	flex-grow: 1;
	align-content: center;
	align-content: flex-end;

	padding: 0 15px;
}

.news_header_line > .inner > .grid > .right > .line > .content > .cell.backnumber {
	border-left: 1px solid #fff;
}

.news_header_line > .inner > .grid > .right > .line > .content > .cell.backnumber label {
	display: block;
	margin-bottom: 8px;
}


.news_header_line > .inner > .grid > .right > .line > .content > .cell.backnumber .select {
	display: inline-block;
	position: relative;
	/*border: 1px solid #eee;*/
	vertical-align: middle;
}

.news_header_line > .inner > .grid > .right > .line > .content > .cell.backnumber select {
	
	appearance: none;
	width: 120px;
	width: 126px;
	height: 36px;
	height: 32px;
	padding: 6px 12px;
	padding-right: 1.5em;
	border: none;
	border-radius: 6px;
	/*outline: 0;*/
	background: #fff;
	background-image: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	cursor: pointer;
}

.news_header_line > .inner > .grid > .right > .line > .content > .cell.backnumber select:focus {
	outline: auto;
}

.news_header_line > .inner > .grid > .right > .line > .content > .cell.backnumber .select > .icon {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-6px);
	color: #ccc;

	pointer-events: none;
}

.news_header_line > .inner > .grid > .right > .line > .content > .cell.backnumber .select > .icon img {
	vertical-align: top;
}



select#year_month {
	font-size: 1.4rem;
	font-family: inherit;
	font-weight: inherit;
	vertical-align: middle;
}

button#set_year_month {
	/*-webkit-appearance: none;*/
	border-radius: 0;
	border: none;
	border-color: #4070ff;
	border-color: #3669ff;
	background-color: #4070ff;
	background-color: #3669ff;
	/*background-color:#268300;*/
	color: #fff;
	width: auto;
	border: none;
	border-radius: 6px;
	padding: 4px 8px;
	vertical-align: middle;
	font-size: 1.2rem;

	height: 36px;
	height: 32px;
	width: 48px;
	background-color: #0055AD;
	
	display: inline-block;

}

/*
.news_header_line > .inner > .grid > .right > .line > .cell.backnumber .select::before {
	position: absolute;
	top: 8px;
	right: 16px;
	width: 0;
	height: 0;
	border-width: 10px 5px 0 5px;
	border-style: solid;
	border-color: #eee transparent transparent transparent;
	content: '';
	pointer-events: none;
}
*/





/* - カテゴリータブ
-------------------------------------------------- */



/* - ニュース内検索
-------------------------------------------------- */
#news_search_box label {
	display: block;
	margin-bottom: 8px;
}

#news_search_box > form > .line {
	display: flex;
	justify-content: center;
}

#news_search_box form input[type="text"] {
	line-height: 1;
	vertical-align: middle;
	/*margin-right: 5px;*/
	font-size: 1.5rem;
	padding: 4px 10px;
	border: 1px solid #ccc;
	
	width: 250px;
	height: 36px;
	height: 32px;
	border-radius: 6px 0 0 6px;
}

#news_search_box form input[type="submit"] {
	line-height: 1.2;
	border-radius: 0;
	border: none;
	
	color: #fff;
	
	vertical-align: middle;
	font-size: 1.4rem;
	/*width: 80px;
	padding: 2px 8px 3px 8px;
	min-height: 28px;
	*/
	
	appearance: none;
	border-radius: 0 6px 6px 0;

	height: 36px;
	height: 32px;
	width: 48px;
	background-color: #0055AD;
}


/*
#news_search_box {
	position: absolute;
	right: 5px;
	top: 0;
	margin-top: 14px;
}

#news_search_box label {
	vertical-align: middle;
	background-color: #444;
	color: #fff;
	margin-right: 5px;
	line-height: 1;
	font-size: 1.2rem;
	padding: 8px;
	background-color: #444;
	color: #eee;
	height: 28px;
	box-sizing:border-box;
	visibility: hidden;
}

#news_search_box form {
	font-size: 0;
	margin: 0;
	padding: 0;
}

#news_search_box form input[type="text"] {
	line-height: 1;
	vertical-align: middle;
	margin-right: 5px;
	font-size: 1.5rem;
	padding: 4px;
	border: 1px solid #ccc;
	min-width: 200px;
	min-height: 28px;
}

#news_search_box form input[type="submit"] {
	line-height: 1.2;
	border-radius: 0;
	border: none;
	
	border-color:#4070ff;
	border-color:#3669ff;
	background-color:#4070ff;
	background-color:#3669ff;
	color: #fff;
	
	vertical-align: middle;
	font-size: 1.4rem;
	width: 80px;
	padding: 2px 8px 3px 8px;
	min-height: 28px;
	
	-webkit-appearance: none;
	border-radius: 4px;
}
*/




/* ---- 過去のニュース プルダウンメニュー ---- */
/*
div.past_news_list { display: none; }

#month_header { position: relative; }

#ym_menu {
	position: absolute;
	right: 0;
	top: 0;
}

#ym_menu label {
	vertical-align: middle;
	margin-right: 0.4em;
	margin-left: 4px;
	font-size: 1.3rem;
}

#ym_menu label > span {
	position: relative;
	padding: 5px 8px;
	color: #fff;
	font-size: 1.1rem;
	background-color: #555;
}

#ym_menu label > span:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(85, 85, 85, 0);
	border-left-color: #555;
	border-width: 5px;
	margin-top: -5px;
}


#year_month {  }

select#year_month {
	font-size: 1.4rem;
	font-family: inherit;
	font-weight: inherit;
	vertical-align: middle;
}

select#year_month option {  }
*/

/*
button#set_year_month {
	
	border-radius: 0;
	border: none;
	border-color: #4070ff;
	border-color: #3669ff;
	background-color: #4070ff;
	background-color: #3669ff;
	color: #fff;
	width: auto;
	border: none;
	border-radius: 3px;
	padding: 4px 8px;
	vertical-align: middle;
	font-size: 1.2rem;
}
*/


/* - カテゴリータブ
-------------------------------------------------- */

.no-touch .contents_area > .tab > ul > li > a:hover,
.contents_area > .tab > ul > li > a:focus {
  color: var(--main-color);
}

.no-touch .contents_area > .tab > ul > li.current > a:hover {
  color: var(--color-white);
}

/* --- タブ --- */
.contents_area .tab {
  margin-top: 24px;
}

.contents_area .tab.bottom {
	margin-top: 48px;
}

.contents_area {
	--color-race: #def2ed;
	--color-dento: #ffe2e1;
	--color-event: #f8c890;
	--color-other: #ccd9fb;

	--color-white: #ffffff;
	--color-black: #333333;

	--color-border: #707070;

	--color-link: #0155ad;
    --color-link-hover: #098825;

	--font-bolder: 600;
	--font-bold: 700;

	/* ===== フォントサイズ ===== */
	--font-size-10: 1rem;
	--font-size-11: 1.1rem;
	--font-size-12: 1.2rem;
	--font-size-13: 1.3rem;
	--font-size-14: 1.4rem;
	--font-size-15: 1.5rem;
	--font-size-16: 1.6rem;
	--font-size-18: 1.8rem;
	--font-size-20: 2rem;
	--font-size-22: 2.2rem;
	--font-size-24: 2.4rem;
	--font-size-26: 2.6rem;
	--font-size-28: 2.8rem;
	--font-size-30: 3rem;
	--font-size-32: 3.2rem;
	--font-size-40: 4rem;
}

.contents_area a {
    color: var(--color-link);
}

/* --- ニュースリスト --- */
.contents_area .tab ul {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  padding-bottom: 6px;
  margin: 0;
  list-style: none;
}

.contents_area .tab ul li a {
  display: block;
  position: relative;
  padding: 8px 12px;
  border-radius: var(---radius_xs);
  color: var(--color-black);
  font-size: var(--font-size-12);
  font-size: var(--font-size-16);
  font-weight: var(--font-bolder);
  line-height: 1;
  text-decoration: none;
  transition: var(--btn-ease);
}

.contents_area .tab ul li a::after {
  content: "";
  position: absolute;
  top: 99%;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--main-color);
  width: 16px;
  height: 6px;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  opacity: 0;
  transition: var(--btn-ease);
}

.contents_area .tab.bottom ul li a::after {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  
  background-color: var(--main-color);
  width: 16px;
  height: 6px;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  opacity: 0;
  transition: var(--btn-ease);
  
}

.contents_area .tab > ul > li.current > a {
  color: var(--color-white);
  background-color: var(--main-color);
}

.contents_area .tab > ul > li.current > a::after,
.contents_area .tab.bottom > ul > li.current > a::before {
  opacity: 1;
}

.contents_area .tab.slide_menu {
  position: relative;
  width: 100%;
  white-space: nowrap;
  font-weight: bold;
  margin-inline: auto;
  max-width: var(--max-content-width);
}

.contents_area .tab.slide_menu > ul {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 auto;
  padding: 0 32px 0 0;
  max-width: 1200px;
  align-items: stretch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  justify-content: space-between;
  cursor: grab;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -ms-user-select: none;
}

.contents_area .tab.slide_menu > ul > li {
  padding-bottom: 6px;
}

.contents_area .tab.bottom.slide_menu > ul > li {
  padding-bottom: 6px;
  padding-top: 6px;
}


/* .slide_menu
---------------------------- */
.slide_menu .navController_nav {
  display: none;
}
.slide_menu.sp ul {
  padding-right: 32px;
}
.slide_menu.sp .navController_nav {
  display: block;
  position: absolute;
  background: #fff;
  height: 100%;
  top: 0;
  z-index: 1;
  cursor: pointer;
  width: 30px;
  right: 0;
  box-shadow: -8px 0 8px -4px #fff;
  appearance: none;
  -webkit-appearance: none; /* Safari対策 */
  border: none; /* ボーダーを削除 */
  padding: 0; /* パディングを削除 */
  margin: 0; /* マージンを削除 */
  /* 必要に応じて他のスタイルを追加 */
}
.slide_menu.sp .navController_nav i {
  margin-left: 0;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  margin-top: -3px;
}

.slide_menu.sp.bottom .navController_nav i {
	margin-top: 0;
}

.slide_menu ul:focus-visible  {
  outline: none;
  box-shadow: 0 0 0 2px #007aff inset;
}


.slide_menu ul li a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #007aff inset;
}



/* --- ニュース --- */
/*
.contents_area > .news_unit:first-child {
	margin-top: 30px;
}
*/

.news_unit_area {
	margin-top: 30px;
}

.news_unit {
	/*margin-top: 30px;*/
	display: block;

	margin-bottom: 50px;
}

.news_unit_area > .news_unit:last-child {
	margin-bottom: 0;
}

/*
.tab + .news_unit {
	margin-top: 30px;
}
*/

.news_unit.off {
	display: none;
}

/*
.news_unit + .news_unit {
	margin-top: 50px;
}
*/

.news_unit .heading-leftline.h2.sat {
	color: #00a;
	/*color: var(--color-blue);*/
}

.news_unit .heading-leftline.h2.sun {
	color: #da0000;
	/*color: var(--color-red);*/
}



/* --- ニュース一覧 --- */
ul.news_line_list {
	margin-top: 30px;
	border-bottom: 1px solid var(--color-border);
}

ul.news_line_list > li {
  border-top: 1px solid var(--color-border);
  display: block;
}

ul.news_line_list > li.off {
	display: none;
}

ul.news_line_list > li.no_link {
  padding: 12px;
}

ul.news_line_list > li:last-child {
  /*border-bottom: 1px solid var(--color-border);*/
}

ul.news_line_list > li > .news_line {
  font-weight: var(--font-bolder);
  position: relative;
}

ul.news_line_list > li > .news_line > a {
  text-decoration: none;
  padding: 12px;
  padding-right: 24px;
  display: block;
  position: relative;
}

ul.news_line_list > li > .news_line > a:focus {
	color: var(--color-link-hover);
}

@media (hover: hover) {
  ul.news_line_list > li > .news_line > a:hover {
    color: var(--color-link-hover);
  }
}

ul.news_line_list > li > .news_line > a > i {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--main-color);
  position: absolute;
  display: block;
  transform: translateY(-50%);
  top: 50%;
  right: 12px;
  margin-left: 0;
}

ul.news_line_list > li > .news_line .date {
  font-size: var(--font-size-14);
  color: var(--color-black);
  display: inline-block;
  margin-right: 10px;

  display: none;
}

ul.news_line_list > li > .news_line .icon {
  font-size: var(--font-size-12);
  line-height: 1;
  padding: 3px 6px;
  display: inline-block;
  color: var(--color-black);
}

ul.news_line_list > li > .news_line .txt {
  font-size: var(--font-size-16);
  display: block;
  padding-top: 5px;
}

ul.news_line_list > li > .news_line > .mov_btn {
  display: inline-block;
  margin-bottom: 12px;
   padding: 0 12px;
  font-size: var(--font-size-16);
  line-height: 1;
}

ul.news_line_list > li > .news_line > .mov_btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 16px;
  background-color: var(--main-color);
  color: #fff;
}

ul.news_line_list > li > .news_line > .mov_btn a .fa,
ul.news_line_list > li > .news_line > .mov_btn a .fa-solid{
  color: #fff;
  margin-left: 0;
  font-size: 0.9em;
}

ul.news_line_list > li.race .icon {
  background-color: var(--color-race);
}
ul.news_line_list > li.dento .icon {
  background-color: var(--color-dento);
}
ul.news_line_list > li.event .icon {
  background-color: var(--color-event);
}

ul.news_line_list > li.other .icon {
  background-color: var(--color-other);
}




.bottom_line {
	background-color: var(--main-color);
	color: #fff;
	padding: 20px 0;

	/*text-align: center;*/

	display: flex;
	justify-content: center;


}


.rss_link {
	text-align: center;
}

.rss_link .btn_radius {
	display: flex;
	width: 300px;
	margin: 0 auto;
	padding: 16px 8px;
	border: solid 1px rgb(from var(--main-color) r g b / 10%);
	border-radius: var(--radius_sm);
	border-radius: 10px;
	font-size: var(--font-size-14);
	box-shadow: 0px 8px 20px rgb(from var(--main-color) r g b / 15%);
	text-decoration: none;
	font-size: var(--font-size-14);
	font-weight: var(--font-bolder);
	color: var(--color-black);
}

.rss_link .btn_radius > * {
	margin: 0 auto;
}

.rss_link .btn_radius.btn-rss i {
	padding-right: 8px;
}


.rss_link .btn-def-simple {
	/*background-color: #FF6F12;*/
	/*font-weight: bold;*/

	
	/*background-color: #FFC07F;*/
	/*
	background-color: #FF6F12;
	color: #333;
	border: none;
	*/
	
}

.rss_link .btn-def-simple i {
	color: #FF6F12;
	/*color: #333;*/
}




/* ------------------------------------------------------------
	959px以下
------------------------------------------------------------ */
@media screen and ( max-width : 959px ) {
	
	.news_header_line > .inner > .grid {
		display: block;
	}

	.news_header_line > .inner > .grid > .left {
		text-align: center;
		padding: 15px 0 10px 0;

		padding: 15px 15px 10px 15px;
	}

	.news_header_line > .inner > .grid > .left p.title {
		font-size: 1.4rem;
	}

	.news_header_line > .inner > .grid > .left .month_nav {
		margin-top: 5px;
		
		/*gap: 20px;*/
	}


	.news_header_line > .inner > .grid > .left .month_nav h1 {
		font-size: 2.6rem;
	}

	.news_header_line > .inner > .grid > .left .month_nav h1 span.year,
	.news_header_line > .inner > .grid > .left .month_nav h1 span.cap {
		font-size: 2rem;
	}

	.news_header_line > .inner > .grid > .left .month_nav {
		justify-content: center;
	}

	.news_header_line > .inner > .grid > .right {
		padding: 10px 20px 20px 20px;
	}

	.news_header_line > .inner > .grid > .right > .line.pc {
		display: none;
	}

	.news_header_line > .inner > .grid > .right > .line.sp {
		display: block;

		border-top: 1px solid #fff;
		border-bottom: 1px solid #fff;
		padding: 10px 0;
	}

	.news_header_line > .inner > .grid > .right > .line > .content {
		display: none;
	}

	.news_header_line > .inner > .grid > .right > .line.sp > .content.collapse-target.show {
		display: block;
	}

	.news_header_line > .inner > .grid > .right > .line > .content > .cell {
		height: auto;
		padding: 15px 0;
		border: none;
	}

	.news_header_line > .inner > .grid > .right > .line > .content > .cell.backnumber {
		border-left: none;
		padding-top: 25px;
	}

	.news_header_line > .inner > .grid > .right > .line > .cap {
		display: block;
		text-align: center;
	}

	#news_search_box form input[type="text"] {
		width: 200px;
	}
}


/* ------------------------------------------------------------
	767px以下
------------------------------------------------------------ */
@media screen and ( max-width : 767px ) {

	.contents_area .tab ul li a {
		font-size: var(--font-size-12);
	}
	
	.news_unit .heading-leftline.h2 {
		font-size: var(--font-size-16);
	}

	ul.news_line_list {
		margin-top: 20px;
	}

	ul.news_line_list > li > .news_line .txt {
		font-size: var(--font-size-12);
	}

	ul.news_line_list > li > .news_line > .mov_btn {
		font-size: var(--font-size-10);
	}

	

}


/* ------------------------------------------------------------
	639px以下
------------------------------------------------------------ */
@media screen and ( max-width : 639px ) {
	
	/*
	.search_line { text-align: center; }
	
	#news_search_box {
		position: static;
		margin-top: 20px;
		margin-top: 15px;
	}
	
	#news_search_box label {
		display: block;
		height: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	
	#news_search_box form input[type="text"] {
		min-width: 0px;
		width: 80%;
		margin: 0;
		line-height: 20px;
		width: 78%;
	}
	
	#news_search_box form input[type="submit"] {
		width: 18%;
		width: 20%;
		margin-left: 2%;
	}
	*/
	
}


/* ------------------------------------------------------------
	479px以下
------------------------------------------------------------ */
@media screen and ( max-width : 479px ) {

	.news_header_line > .inner > .grid > .left .month_nav {
		width: 100%;
		/*gap: 20px;*/
		display: table;
	}

	.news_header_line > .inner > .grid > .left .month_nav > * {
		display: table-cell;
		vertical-align: middle;
	}

	.news_header_line > .inner > .grid > .left .month_nav > div {
		width: 80px;
	}

	/*
	.news_header_line > .inner > .grid > .left .month_nav > div:first-child {
		text-align: left;
	}

	.news_header_line > .inner > .grid > .left .month_nav > div:last-child {
		text-align: right;
	}
	*/

	
	/*
	#news_search_box label {  }
	
	#news_search_box form input[type="text"] {
		min-width: 0px;
		width: 80%;
		margin: 0;
		line-height: 20px;
	}
	
	#news_search_box form input[type="submit"] {
		width: 18%;
		margin-left: 2%;
	}
	*/

	/* --- 過去のニュース（プルダウン） --- */
	/*
	#ym_menu {
		position: static;
		padding: 10px 0;
		border-top: 1px dotted #ddd;
		border-bottom: 1px dotted #ddd;
		width: 100%;
		text-align: center;
		margin-bottom: 10px;
	}
	*/
	
}

/* ------------------------------------------------------------
	359px以下
------------------------------------------------------------ */
@media screen and ( max-width : 359px ) {
	
	.news_header_line > .inner > .grid > .left {
		min-width: auto;
	}
	.news_header_line > .inner > .grid > .left .month_nav > div {
		width: 60px;
	}

	/*
	#ym_menu label {
		margin-right: 0.2em;
		margin-left: 0;
	}
	*/
}