/* ----------------------------------------------------------------------

	日本馬近況

---------------------------------------------------------------------- */

#japan { margin-top: 30px; }


#japan .contents_head > .inner { display: table; }
#japan .contents_head > .inner > .cell { display: table-cell; vertical-align: middle; }
#japan .contents_head > .inner > .cell.opt { width: auto; }


/* - 日本馬詳細
---------------------------------------------------------------------- */

#japan > .jp_block {
    margin-top: 30px;
    position: relative;
}

#japan > .jp_block + .jp_block {
    margin-top: 50px;
}

#japan > .anchor_block {
    margin: 30px 0 40px;
}

#japan > .jp_block > .content {
    border: 1px solid #CCC;
    border-top: none;
    padding: 20px;
}

#japan .jp_block .horse_title {
    background: #444;
    color: #FFF;
    padding: 10px 15px;
    display: flex;
    width: 100%;
    align-items: center;
}

#japan .jp_block .horse_title h2 {
    font-weight: bold;
    font-size: 2.6rem;
}

#japan .jp_block .horse_title .main {
    display: flex;
    align-items: center;
}

#japan .jp_block .horse_title .main .name {
    margin-right: 20px;
}

#japan .jp_block .horse_title .main .opt {
    font-size: 1.3rem;
}

#japan .jp_block .horse_title .btn {
    flex: 1;
    text-align: right;
}

#japan .jp_block .horse_title .btn > ul {
    font-size: 0;
}

#japan .jp_block .horse_title .btn > ul > li {
    display: inline-block;
}

#japan .jp_block .horse_title .btn > ul > li + li {
    margin-left: 7px;
}

#japan .jp_block > .content .top_content  {
    display: flex;
    width: 100%;
}

#japan .jp_block > .content > .top_content > .img {
    max-width: 300px;
    width: 100%;
}

#japan .jp_block > .content > .top_content.no_detail  {
    justify-content: center;
}

#japan .jp_block > .content > .top_content.no_detail > .img {
    max-width: 480px;
}


#japan .jp_block > .content > .top_content > .detail {
    margin-left: 30px;
    flex: 1;
}

#japan .jp_block > .content > .top_content > .detail .caption {
    background-color: #efefef;
    padding: 10px;
}


#japan .jp_block>.content>.movie_area {
	margin-top: 30px;
}

#japan .jp_block>.content>.movie_area .item_flex_list.col2>div,
#japan .jp_block>.content>.movie_area .item_flex_list.col3>div {
	margin-bottom: 0;
}

#japan .jp_block>.content>.movie_area .item_flex_list.col2>div:nth-child(n+3) {
	margin-top: 30px;
}

#japan .jp_block>.content>.movie_area .item_flex_list.col2>div.empty:nth-child(n+3) {
	margin-top: 0;
}

#japan .jp_block>.content>.movie_area .item_flex_list.col3>div:nth-child(n+4) {
	margin-top: 30px;
}

#japan .jp_block>.content>.movie_area .item_flex_list.col3>div.empty:nth-child(n+4) {
	margin-top: 0;
}

#japan .jp_block>.content>.movie_area .item_flex_list .panel>.content {
	background-color: #ebebeb;
	border: none;
}

#japan .jp_block>.content>.movie_area .item_flex_list.col3 .panel>.content {
	padding: 15px;
}

#japan .jp_block > .content > .movie_area .panel a { position: relative; text-align: center; }
#japan .jp_block > .content > .movie_area .panel a img { vertical-align: top; max-width: 450px; width: 100%;}

#japan .jp_block > .content > .movie_area .panel a > .icon {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -30px;
    margin-top: -20px;
    font-size: 1.8rem;
    color: #eee;
    background-color: rgba(0,0,0,0.8);
    width: 60px;
    height: 40px;
    text-align: center;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease-in-out;
}

#japan .jp_block>.content>.movie_area .panel a>.icon i {
	position: relative;
	left: 1px;
}

.no-touch #japan .jp_block>.content>.movie_area .panel a:hover>.icon,
#japan .jp_block>.content>.movie_area .panel a:focus>.icon {
	background-color: rgba(0, 0, 0, 0.5);
}

#japan>.news_area {
	margin-top: 50px;
}

#japan>.news_area ul.note_list.news a {
	color: #06a;
	text-decoration: none;
}

#japan>.news_area ul.note_list.news i {
	color: #268300;
}

#japan>.news_area ul.note_list.news>li {
	padding: 8px 5px;
	border-bottom: 1px dotted #CCC;
	width: 100%;
}

#japan>.news_area ul.note_list.news>li:first-child {
	padding-top: 0;
}

#japan>.news_area ul.note_list.news>li>span.cap {
	width: 18px;
	padding-right: 0.4em;
}

.no-touch #japan > .news_area ul.note_list.news a:hover,
#japan > .news_area ul.note_list.news a:focus{
    text-decoration: underline;
    color: #098825;
}



/* --- 出走取り消し --- */
.jp_block > .cancel {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: rgba(0,0,0,0.6);
    color: #fff;
    z-index: 2;
    display: none;
}

.jp_block.cancel > .cancel {
  display: block;
}

.jp_block > .cancel > .wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.jp_block > .cancel > .wrap > .inner { text-align: center; }

.jp_block > .cancel > .wrap > .inner > p {
    font-size: 1.6rem;
    line-height: 1.3;
    text-align: center;
    letter-spacing: normal;
    margin-bottom: 5px;
}

.jp_block > .cancel > .wrap > .inner > p.txt {
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    line-height: 1.3;
    letter-spacing: 0.4em;
}

.jp_block>.cancel>.wrap>.inner>p.txt span.opt {
	display: block;
	font-size: 1.3rem;
	letter-spacing: 0.08em;
	margin-top: 5px;
}


/* - 2024.11 追記
---------------------------- */

.item_grid_list .sub_header {
	display: flex;
	align-items: center;
}


.item_grid_list .panel .content {
	background-color: #ebebeb;
	border: none;
}

.item_grid_list[data-columns="3"] {
	--cardSize: 250px
}

.item_grid_list[data-columns="2"] {
	--cardSize: 300px
}

.item_grid_list {
	display: grid;
	grid: auto / repeat(auto-fit, minmax(var(--cardSize, auto), 1fr));
	gap: 30px 40px;

	& a {
		display: block;
		width: 100%;
		height: 100%;
	}
}

.item_grid_list>div {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
}

.item_grid_list>div .panel {
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	gap: 0;
}


/* ------------------------------------------------------------

	?939px

------------------------------------------------------------ */

@media screen and (max-width : 939px) {

	#japan .jp_block>.content>.movie_area .item_flex_list.col3>div {
		width: 33.333%;
		flex-basis: calc((100% - 60px) / 3);
		max-width: calc((100% - 60px) / 3);
	}

}

/* ------------------------------------------------------------

	?767px

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

	#japan .jp_block>.content>.movie_area .item_flex_list.col3>div {
		width: 100%;
		flex-basis: auto;
		max-width: 100%;
	}

	#japan .jp_block>.content>.movie_area .item_flex_list.col2>div+div,
	#japan .jp_block>.content>.movie_area .item_flex_list.col3>div+div {
		margin-top: 30px;
	}

}

/* ------------------------------------------------------------

	?639px

------------------------------------------------------------ */
@media screen and ( max-width : 639px ) {#japan {
		margin-top: 25px;
	}

	#japan>.jp_block+.jp_block {
		margin-top: 40px;
	}

	#japan>.jp_block>.content {
		padding: 15px;
	}

	#japan .jp_block .horse_title .main {
		display: block;
		align-items: center;
		margin-right: 15px;
	}

	#japan .jp_block .horse_title .main .name {
		margin-right: 0;
	}

	#japan .jp_block .horse_title .main .opt {
		font-size: 1.3rem;
	}

	#japan .jp_block .horse_title h2 {
		font-size: 2rem;
	}

	#japan .jp_block .horse_title .main .opt ul li {
		display: inline-block;
	}

	#japan .jp_block .horse_title .main .opt ul li:first-child {
		margin-right: 10px;
	}

	#japan .jp_block>.content>.top_content {
		margin-top: 25px;
		margin-bottom: 30px;
		display: block;
		width: 100%;
	}

	#japan .jp_block>.content>.top_content>.img {
		margin: 0 auto;
		max-width: 480px;
	}

	#japan .jp_block>.content>.top_content>.detail {
		margin-left: 0;
		margin-top: 20px;
	}

}



/* ------------------------------------------------------------

	479px

------------------------------------------------------------ */

@media screen and (max-width : 479px) {


	#japan .jp_block .horse_title {
		padding: 10px;
	}

	#japan .jp_block .horse_title h2 {
		font-size: 2rem;
	}

	#japan .jp_block .horse_title .btn>ul>li {
		display: block;
	}

	#japan .jp_block .horse_title .btn>ul>li+li {
		margin-left: 0;
		margin-top: 5px;
	}

	#japan .jp_block .horse_title .btn>ul>li .btn-def.btn-sm {
		font-size: 1.0rem;
	}

	#japan .jp_block>.content>.movie_area .item_flex_list.col3 .panel>.content {
		padding: 10px;
	}

}


/* ------------------------------------------------------------

	?374px

------------------------------------------------------------ */

@media screen and (max-width : 374px) {

	.item_grid_list {
		grid: auto / auto;
	}

	#japan .jp_block .horse_title {
		padding: 10px 8px;
	}

	#japan .btn-def.btn-sm.btn-narrow {
		padding: 4px;
		font-size: 1rem;
	}

	#japan .jp_block .horse_title .main {
		margin-right: 7px;
	}


}


@media print {

	html,
	body {
		height: auto;
	}

	#wrapper {
		min-height: 1px;
	}

	#contentsBody table {
		border-collapse: separate;
	}

	#race_title>h1 {
		background-color: #333;
	}
}