/* ----------------------------------------------------------------------
	出走馬情報
---------------------------------------------------------------------- */
#contentsBody {
    max-width: 940px;
    width: 940x;
}

#race_horse {
    margin: 30px auto 0 auto;
}


/* - 参考レース｜出走馬プロフィール
---------------------------------------------------------------------- */
.movie_area {
    margin-top: 30px;
}

.movie_area .panel>.sub_header {
    background-color: #333;
    font-size: 1.5rem;
}

.movie_area .panel>.sub_header .race {
    display: block;
    font-size: 1.2rem;
}

.movie_area .item_flex_list.col2>div {
    margin-bottom: 0;
}

.movie_area .panel .img_flex_list>div {
    margin-bottom: 0;
}

.movie_area .panel .movie {
    text-align: center;
    display: block;
    margin: 0 auto;
    max-width: 450px;
    height: auto;
}

.movie_area .panel .movie a {
    position: relative;
    display: inline-block;
}

.movie_area .item_flex_list.col2>div .movie a {
    display: block;
}

.movie_area .panel .movie a img {
    vertical-align: top;
}

.movie_area .panel .movie 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;
}

.movie_area .panel .movie a>.icon i {
    position: relative;
    left: 1px;
}

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


/* - 馬リスト
---------------------------------------------------------------------- */
.horse_list_area {
    margin-top: 30px;
}

.horse_list_area .horse_list {
    margin-top: 10px;
}

.horse_list_area .horse_list {
    display: flex;
    flex-wrap: wrap;
    background-color: #eaeaea;
    padding: 5px;
}

.horse_list_area .horse_list>.unit {
    padding: 5px;
}

.horse_list_area .horse_list.col2>.unit {
    width: 50%;
}

.horse_list_area .horse_list.col3>.unit {
    width: 33.333%;
}

.horse_list_area .horse_list.col4>.unit {
    width: 25%;
}

.horse_list_area .horse_list>.unit>a {
    text-decoration: none;
    display: block;
    color: #333;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
    padding: 10px;
    border-radius: 4px;
    transition: background-color 0.3s ease-in-out;
    position: relative;
}

.no-touch .horse_list_area .horse_list>.unit>a:hover {
    background-color: #fff8e1;
}

.horse_list_area .horse_list>.unit>a .line {
    display: flex;
    align-items: center;
}

.horse_list_area .horse_list>.unit>a .line>.flag {
    width: 50px;
}

.horse_list_area .horse_list>.unit>a .line>.flag img {
    max-width: 50px;
    vertical-align: top;
}

.horse_list_area .horse_list>.unit>a .line>.name {
    padding-left: 10px;
}

.horse_list_area .horse_list>.unit>a .line>.name .jpn {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.3;
}

.horse_list_area .horse_list>.unit>a .line>.name .en {
    font-size: 1.1rem;
    line-height: 1.2;
    color: #444;
}

.horse_list_area .horse_list>.unit>a .cancel {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    border-radius: 4px;
}

.horse_list_area .horse_list>.unit>a .cancel>.wrap {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100%;
    width: 100%;
}

.horse_list_area .horse_list>.unit>a .cancel>.wrap>.inner {
    color: #fff;
    text-align: right;
    margin-right: 4px;
    margin-bottom: 2px;
}

.horse_list_area .horse_list>.unit>a .cancel>.wrap>.inner>p {
    font-size: 1rem;
    line-height: 1.3;
    letter-spacing: normal;
    text-align: right;
    display: inline-block;
    vertical-align: baseline;
}

.horse_list_area .horse_list>.unit>a .cancel>.wrap>.inner>p.txt {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.2;
    letter-spacing: 0.1em;
    text-align: right;
    margin-left: 10px;
    vertical-align: baseline;
}


/* ----- ライター ----- */
p.writer {
    display: table;
}

p.writer>span {
    display: table-cell;
}

p.writer>span:first-child {
    white-space: nowrap;
}


/* - 出走馬詳細
---------------------------------------------------------------------- */
body.modal_open {
    overflow: hidden;
}

#detail_modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9000;
    overflow: hidden;
    background-color: rgba(0, 0, 0, 0.9);
    display: none;
}

body.modal_open #detail_modal.on {
    overflow-x: hidden;
    /*overflow-y: auto;*/
    overflow-y: scroll;
    display: block;
    animation: detail_modal_fade_in 0.3s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes detail_modal_fade_in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#detail_modal>.inner {
    position: relative;
    width: auto;
    /*min-height: calc(100% - (50px * 2));*/
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 0;
}

#detail_modal .detail_area {
    position: relative;
    align-self: center;
    box-sizing: border-box;
    display: block;
    max-width: 940px;
}

#detail_modal.on .detail_area {
    animation: modal_fade_in 0.4s ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes modal_fade_in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#detail_modal .detail_area>.close {
    position: absolute;
    right: 0;
    top: -35px;
    z-index: 15;
}

#detail_modal .detail_area>.close.bottom {
    right: inherit;
    top: inherit;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
}

#detail_modal .detail_area>.modal_control {
    /*position: absolute;*/
    position: fixed;
    top: 50%;
    /*left: 0;*/
    transform: translateY(-50%);
    z-index: 100;
    width: 100%;
    max-width: 940px;
    margin: 0 auto;
}

#detail_modal .detail_area>.modal_control>.inner {
    position: relative;
    width: 100%;
}

#detail_modal .detail_area>.modal_control>.inner>.arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: inherit;
    right: inherit;
    color: #fff;
    font-size: 3.2rem;
    z-index: 100;
}

#detail_modal .detail_area>.modal_control>.inner>.arrow.left {
    left: -30px;
}

#detail_modal .detail_area>.modal_control>.inner>.arrow.right {
    right: -30px;
}

#detail_modal .detail_area>.modal_control>.inner>.arrow>a {
    text-decoration: none;
    color: #fff;
    display: block;
}

#detail_modal .detail_area>.modal_control>.inner>.arrow>a i {
    display: block;
}

/* --- スマホ用モーダルコントロール --- */
#detail_modal .detail_area>.modal_control.sp {
    position: static;
    transform: translateY(0);
    width: 100%;
    margin-bottom: 10px;
    display: none;
    max-width: 100%;
}

#detail_modal .detail_area>.modal_control.sp.bottom {
    margin-bottom: 0;
    margin-top: 15px;
}

#detail_modal .detail_area>.modal_control.sp>.inner {
    position: static;
    display: flex;
    align-items: center;
    width: 100%;
}

#detail_modal .detail_area>.modal_control.sp>.inner>div {
    flex-grow: 1;
    width: 33.333%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#detail_modal .detail_area>.modal_control.sp>.inner>.arrow {
    position: static;
    transform: translateY(0);
    font-size: 1.5rem;
}

#detail_modal .detail_area>.modal_control.sp>.inner>.arrow>a {
    text-decoration: none;
    display: block;
    background-color: #555;
    border: 1px solid #333;
    color: #fff;
    padding: 5px;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgb(0 0 0 / 15%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.5rem;
    top: 0;
    height: 30px;
}

#detail_modal .detail_area>.modal_control.sp>.inner>.arrow>a.btn-def>i {
    margin-right: 0;
}

#detail_modal .detail_area>.modal_control.sp>.inner>div.close {
    margin: 0 15px;
}

#detail_modal .detail_area>.modal_control.sp>.inner>div.close>a {
    display: block;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    padding: 0;
    line-height: 1.4;
    height: 30px;
    font-size: 1.2rem;
    color: #444;
}

#detail_modal .detail_area>.modal_control.sp>.inner>div.close>a>i {
    font-size: 1.5rem;
}


/* - 出走馬情報 ユニット
---------------------------------------------------------------------- */
#detail_modal .detail_area .horse_unit {
    background-color: #fff;
    padding: 30px;
    display: none;
    position: relative;
    width: 940px;
}

#detail_modal .detail_area .horse_unit.on {
    display: block;
    animation: horse_unit_fade_in 0.2s ease-out;
    animation-fill-mode: forwards;
}

@keyframes horse_unit_fade_in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

#detail_modal .detail_area .horse_unit>.inner {
    width: 100%;
}

/* --- 出走取り消し --- */
#detail_modal .detail_area .horse_unit>.inner>.cancel {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
}

#detail_modal .detail_area .horse_unit>.inner>.cancel>.wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

#detail_modal .detail_area .horse_unit>.inner>.cancel>.wrap>.inner {
    text-align: center;
}

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

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

#detail_modal .detail_area .horse_unit>.inner>.cancel>.wrap>.inner>p.txt .opt {
    font-size: 1.4rem;
    font-weight: normal;
    letter-spacing: 0;
    margin-top: 4px;
    margin-bottom: 0;
    display: block;
}

/* --- ユニット ヘッダー --- */
div.horse_unit>div.inner>div.head {
    display: table;
}

div.horse_unit>div.inner>div.head>div {
    display: table-cell;
    vertical-align: middle;
}

/* - 国旗 - */
div.horse_unit>div.inner>div.head>div.flag {
    padding-right: 10px;
}

div.horse_unit>div.inner>div.head>div.flag img {
    vertical-align: top;
    max-width: 60px;
}

div.horse_unit>div.inner>div.head>div.flag img.cos {
    max-height: 40px !important;
}

/* - 馬名・性齢・英語表記 - */
div.horse_unit>div.inner>div.head>div.name>div.inner {
    display: table;
}

div.horse_unit>div.inner>div.head>div.name>div.inner>div {
    display: table-cell;
    vertical-align: middle;
}

div.horse_unit>div.inner>div.head>div.name>div.inner>div.name_line {
    font-size: 3rem;
    font-weight: bold;
    line-height: 1.3;
}

div.horse_unit>div.inner>div.head>div.name>div.inner>div.age_line {
    padding-left: 1em;
    font-weight: normal;
}

div.horse_unit>div.inner>div.head>div.name>div.inner>div.age_line .en {
    font-size: 1.3rem;
    line-height: 1.3;
}

div.horse_unit>div.inner>div.head>div.name>div.inner>div.age_line .en span {
    margin-left: 0.5em;
}

div.horse_unit>div.inner>div.head>div.name>div.inner>div.age_line .age,
div.horse_unit>div.inner>div.head>div.name>div.inner>div.age_line .record {
    display: inline-block;
    font-size: 1.3rem;
    line-height: 1.3;
    margin-top: 4px;
}

div.horse_unit>div.inner>div.head>div.name>div.inner>div.age_line .record {
    margin-left: 1em;
}

/* --- 写真・血統・主な成績 --- */
div.horse_unit .familiy_line {
    margin-top: 10px;
}

div.horse_unit .familiy_line>.grid {
    display: table;
    width: 100%;
}

div.horse_unit .familiy_line>.grid>.cell {
    display: table-cell;
    vertical-align: top;
}

div.horse_unit .familiy_line>.grid>.cell.img {
    width: 320px;
}

div.horse_unit .familiy_line>.grid>.cell.img img {
    vertical-align: top;
}

div.horse_unit .familiy_line>.grid>.cell.img+.cell.txt {
    padding-left: 20px;
}

div.horse_unit .familiy_line>.grid>.cell.txt>h3 {
    padding: 4px 8px;
    background-color: #efefef;
    margin-bottom: 1px;
    font-weight: bold;
    font-size: 1.2rem;
}

/* --- 写真なし版 --- */
.detail_list.no_img div.horse_unit:not(.show-img) .familiy_line,
.detail_list div.horse_unit.no_img .familiy_line {
    margin-top: 20px;
}

.detail_list.no_img div.horse_unit:not(.show-img) .familiy_line>.grid>.cell.img,
.detail_list div.horse_unit.no_img .familiy_line>.grid>.cell.img {
    display: none;
}

.detail_list.no_img div.horse_unit:not(.show-img) .familiy_line>.grid>.cell.txt,
.detail_list div.horse_unit.no_img .familiy_line>.grid>.cell.txt {
    padding-left: 0;
}




/* --- 血統 --- */
.blood_line {
    display: table;
    width: 100%;
}

.blood_line>.line {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
    padding: 6px;
}

.blood_line>.line+.line {
    border-left: 2px solid #fff;
}

.blood_line>.line.sire {
    background-color: #eff6ff;
}

.blood_line>.line.mare {
    background-color: #ffefef;
}

.blood_line>.line>dl {
    display: flex;
    align-items: center;
}

.blood_line>.line>dl>dt {
    margin-right: 5px;
    font-size: 0;
}

.blood_line>.line>dl>dt>span {
    display: inline-block;
    vertical-align: middle;
    padding: 3px 4px;
    background-color: #37474F;
    color: #fff;
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.3;
    border-radius: 2px;
}

.blood_line>.line>dl>dd {
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.3;
}


/* --- 主な成績 --- */
.record_line {
    margin-top: 20px;
}

.record_line>h3 {
    padding: 4px 8px;
    background-color: #efefef;
    border-bottom: none;
    margin-bottom: 1px;
    font-size: 1.2rem;
    font-weight: bold;
}

.record_line>.content {
    background-color: #f7f7f7;
    margin-top: 1px;
    padding: 10px;
}

.record_line>.content>.unit+.unit {
    margin-top: 8px;
}

.record_line>.content>.unit>dl {
    display: flex;
    font-size: 1.2rem;
}

.record_line>.content>.unit>dl>dt {
    min-width: 60px;
    white-space: nowrap;
    font-weight: bold;
}

.record_line>.content>.unit>dl>dd {
    flex-grow: 1;
}


/* --- 最近5走の成績 --- */
div.horse_unit .recent_result {
    margin-top: 30px;
}

div.horse_unit .recent_result caption.simple>.inner>div.main {
    font-size: 1.5rem;
}

div.horse_unit .recent_result table.basic thead>tr>th {
    font-size: 1.2rem;
}

div.horse_unit .recent_result table.basic thead>tr>th.date {
    width: 120px;
}

div.horse_unit .recent_result table.basic thead>tr>th.country {
    width: 188px;
}

div.horse_unit .recent_result table.basic thead>tr>th.dis {
    width: 80px;
}

div.horse_unit .recent_result table.basic thead>tr>th.place {
    width: 54px;
}

div.horse_unit .recent_result table.basic thead>tr>th.movie {
    width: 90px;
}



div.horse_unit .recent_result table.basic tbody>tr>td {
    font-size: 1.2rem;
}

div.horse_unit .recent_result table.basic tbody>tr>td.date {
    font-weight: bold;
    background-color: #eceff1
}

div.horse_unit .recent_result table.basic tbody>tr>td.country>.line {
    display: flex;
}

div.horse_unit .recent_result table.basic tbody>tr>td.country>.line>.flag {
    flex-grow: 0;
    margin-right: 4px;
}

div.horse_unit .recent_result table.basic tbody>tr>td.country>.line>.txt {
    flex-grow: 1;
}

div.horse_unit .recent_result table.basic tbody>tr>td.dis {
    line-height: 1.4;
    text-align: center;
    white-space: nowrap;
}

div.horse_unit .recent_result table.basic tbody>tr>td.dis>span {
    display: block;
    font-size: 1rem;
}

div.horse_unit .recent_result table.basic tbody>tr>td.country img {
    max-width: 28px;
    vertical-align: top;
    border: 1px solid #ddd;
}

div.horse_unit .recent_result table.basic tbody>tr>td.place {
    text-align: center;
}

div.horse_unit .recent_result table.basic tbody>tr>td.movie {
    text-align: center;
}

/* --- テーブル内「レース映像」列を非表示 --- */
div.horse_unit .recent_result table.basic.off-movie thead>tr>th.movie {
    display: none;
}

div.horse_unit .recent_result table.basic.off-movie tbody>tr>td.movie {
    display: none;
}

/* --- 全馬のテーブル内「レース映像」列を非表示 --- */
.detail_area.off-race-movie div.horse_unit .recent_result table.basic tr>.movie:is(td, th) {
    display: none;
}

/* --- 2024/9/6 追記 「レース映像」列 表示例外--- */
.detail_area.off-race-movie[data-show-movie~="1"] div#horse1 .recent_result table.basic tr>.movie:is(td, th),
.detail_area.off-race-movie[data-show-movie~="2"] div#horse2 .recent_result table.basic tr>.movie:is(td, th),
.detail_area.off-race-movie[data-show-movie~="3"] div#horse3 .recent_result table.basic tr>.movie:is(td, th),
.detail_area.off-race-movie[data-show-movie~="4"] div#horse4 .recent_result table.basic tr>.movie:is(td, th),
.detail_area.off-race-movie[data-show-movie~="5"] div#horse5 .recent_result table.basic tr>.movie:is(td, th),
.detail_area.off-race-movie[data-show-movie~="6"] div#horse6 .recent_result table.basic tr>.movie:is(td, th),
.detail_area.off-race-movie[data-show-movie~="7"] div#horse7 .recent_result table.basic tr>.movie:is(td, th),
.detail_area.off-race-movie[data-show-movie~="8"] div#horse8 .recent_result table.basic tr>.movie:is(td, th),
.detail_area.off-race-movie[data-show-movie~="9"] div#horse9 .recent_result table.basic tr>.movie:is(td, th),
.detail_area.off-race-movie[data-show-movie~="10"] div#horse10 .recent_result table.basic tr>.movie:is(td, th) {
    display: table-cell;
}


/* ----- 騎手・調教師 ----- */
.person_unit {
    background-color: #f7f7f7;
    border: 1px dashed #ccc;
    padding: 15px;
}

.person_unit h3 {
    font-size: 1.5rem;
    font-weight: bold;
    padding-bottom: 0.3em;
    border-bottom: 1px dotted #ccc;
}

.person_unit h3>span.inner {
    display: table;
}

.person_unit h3>span.inner>span {
    display: table-cell;
    vertical-align: middle;
}

.person_unit h3>span.inner>span.cap {
    background-color: #ddd;
    padding: 4px 8px;
    background-color: #0069a7;
    color: #fff;
    font-size: 1.2rem;
}

.person_unit h3>span.inner>span.txt {
    padding-left: 8px;
}

.person_unit h3>span.inner>span.txt>span {
    font-size: 1.2rem;
    font-weight: normal;
}

.person_unit>.grid {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.person_unit>.grid>.cell {
    display: table-cell;
    width: 50%;
}

.person_unit>.grid>.cell.jockey {
    padding-right: 20px;
}

.person_unit>.grid>.cell.trainer {
    padding-left: 20px;
}

.person_unit>.grid>.cell>h4,
.person_unit>.grid>.cell>h5 {
    font-weight: bold;
    margin-bottom: 2px;
}

.person_unit .grid h3 {
    margin-bottom: 15px;
}

.person_unit .grid h4 {
    margin-bottom: 2px;
    font-size: 1.3rem;
    border-bottom: none;
    padding-bottom: 0;
}

.person_unit>.grid>.cell>p {
    font-size: 1.2rem;
}

.person_unit>.grid>.cell>p+h4 {
    margin-top: 12px;
}


/* --- 解説 --- */
div.horse_unit>div.inner>.comment {
    margin-top: 30px;
}

div.horse_unit>div.inner>.comment>h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 1px dotted #ccc;
}

/* --- 関連動画 --- */
div.horse_unit>div.inner>.related_movie {
    margin-top: 30px;
}

div.horse_unit>div.inner>.related_movie>h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 10px;
    padding-bottom: 4px;
    border-bottom: 1px dotted #ccc;
}

.related_movie div.link_list>div>a span.opt.block {
    display: inline;
}


/* --- 2026.3 追記 ニュースエリア --- */


.news_area .news_list a {
	color: var(--link-color);
	text-decoration: none;
}

.news_area .news_list i {
	color: var(--logo-green);
}

.news_area .news_list>li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4em;
	padding: clamp(6px,1.2vw,12px) 5px;
	border-bottom: 1px dotted #CCC;
}

.no-touch .news_area .news_list a:hover,
.news_area .news_list a:focus{
    text-decoration: underline;
    color: #098825;
}




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

    /* - 出走馬詳細
    ---------------------------------------------------------------------- */
    #detail_modal>.inner {
        padding: 15px 0;
    }

    #detail_modal .detail_area {
        max-width: calc(100% - 20px);
    }

    #detail_modal .detail_area .horse_unit {
        padding: 15px;
    }

    #detail_modal .detail_area>.modal_control {
        display: none;
    }

    #detail_modal .detail_area>.modal_control.sp {
        display: block;
    }

    #detail_modal .detail_area>.close {
        display: none;
    }
}

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

    #contentsBody {
        width: auto;
        max-width: 100%;
    }

    #detail_modal .detail_area .horse_unit {
        min-width: 900px;
        width: 100%;
    }

    /* --- 写真・血統・主な成績 --- */
    div.horse_unit .familiy_line>.grid {
        display: block;
    }

    div.horse_unit .familiy_line>.grid>.cell {
        display: block;
    }

    div.horse_unit .familiy_line>.grid>.cell.img {
        width: 100%;
        text-align: center;
    }

    div.horse_unit .familiy_line>.grid>.cell.img img {
        width: 100%;
        max-width: 480px;
    }

    div.horse_unit .familiy_line>.grid>.cell.txt {
        padding-left: 0;
        margin-top: 20px;
    }

    div.horse_unit .familiy_line>.grid>.cell.img+.cell.txt {
        padding-left: 0;
    }

    /* --- 写真なし版 --- */
    .detail_list.no_img div.horse_unit:not(.show-img) .familiy_line>.grid>.cell.txt,
    .detail_list div.horse_unit.no_img .familiy_line>.grid>.cell.txt {
        padding-left: 0;
        margin-top: 0;
    }

}


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

    /* - 馬リスト
    ---------------------------------------------------------------------- */
    .horse_list_area .horse_list.col3>.unit,
    .horse_list_area .horse_list.col4>.unit {
        width: 50%;
    }

    .horse_list_area .horse_list>.unit>a .line>.flag {
        width: 36px;
    }

    .horse_list_area .horse_list>.unit>a .line>.flag img {
        max-width: 36px;
    }

    /* - 出走馬詳細
    ---------------------------------------------------------------------- */
    #detail_modal .detail_area .horse_unit {
        width: auto;
        max-width: 100%;
        min-width: auto;
    }

    .recent_result table.basic thead>tr>th.country {
        width: 160px;
    }

    /* --- 最近5走の成績 --- */
    .recent_result table.basic thead>tr>th.country {
        width: 130px;
    }

}

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

    /* - 参考レース｜出走馬プロフィール
    ---------------------------------------------------------------------- */
    .movie_area .item_flex_list.col2>div+div {
        margin-top: 20px;
    }

    /* - 出走馬詳細
    ---------------------------------------------------------------------- */
    .recent_result table.basic thead>tr>th.date {
        width: 116px;
    }

    .recent_result table.basic thead>tr>th.country {
        width: 120px;
    }

    .recent_result table.basic thead>tr>th.place {
        width: 40px;
    }

    /*.recent_result table.basic thead > tr > th.movie { width: 100px; }*/
    .recent_result table.basic tbody>tr>th {
        font-size: 1.1rem;
    }

    /* --- 馬名 --- */
    div.horse_unit>div.inner>div.head>div.name>div.inner {
        display: block;
    }

    div.horse_unit>div.inner>div.head>div.name>div.inner>div {
        display: block;
    }

    #race_horse div.horse_unit>div.inner>div.head>div.name>div.inner>div.name_line h2 {
        font-size: 2.8rem;
    }

    div.horse_unit>div.inner>div.head>div.name>div.inner>div.name_line h3 {
        font-size: 2.8rem;
    }

    div.horse_unit>div.inner>div.head>div.name>div.inner>div.age_line {
        padding-left: 0;
        font-size: 0;
    }

    div.horse_unit>div.inner>div.head>div.name>div.inner>div.age_line>p {
        display: inline-block;
    }

    div.horse_unit>div.inner>div.head>div.name>div.inner>div.age_line .age {
        font-size: 1.4rem;
        display: inline-block;
        margin-left: 1em;
    }

    div.horse_unit>div.inner>div.head>div.name>div.inner>div.age_line .record {
        display: block;
        margin-left: 0;
        font-size: 1.4rem;
    }

    div.horse_unit>div.inner>div.head>div.name>div.inner>div.age_line .en {
        font-size: 1.4rem;
        line-height: 1.3;
        margin-left: 0;
    }

    /* --- 血統 --- */
    .blood_line {
        display: block;
    }

    .blood_line>.line {
        width: 100%;
        display: block;
    }

    .blood_line>.line+.line {
        border-left: none;
    }

    /* --- 最近5走の成績 --- */
    .recent table.basic thead>tr>th {
        font-size: 1.1rem;
    }

    .recent table.basic thead>tr>th.date {
        width: 110px;
    }

    /* --- 騎手・調教師 --- */
    .person_unit>.grid {
        display: block;
    }

    .person_unit>.grid>.cell {
        display: block;
        width: 100%;
    }

    .person_unit>.grid>.cell.jockey {
        padding-right: 0;
    }

    .person_unit>.grid>.cell.trainer {
        padding-left: 0;
        margin-top: 25px;
    }
}

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

    #race_horse {
        margin: 25px auto 0 auto;
    }

    /* - 参考レース｜出走馬プロフィール
    ---------------------------------------------------------------------- */
    .movie_area .panel .movie a {
        display: block;
    }

    /* - 馬リスト
    ---------------------------------------------------------------------- */
    .horse_list_area .horse_list.col3>.unit,
    .horse_list_area .horse_list.col4>.unit {
        width: 100%;
    }

    .horse_list_area .horse_list>.unit>a .cancel>.wrap>.inner>p.txt {
        font-size: 1.4rem;
    }

    /* - 出走馬詳細
    ---------------------------------------------------------------------- */
    .recent_result table.basic thead>tr>th.date {
        width: 120px;
    }

    .recent_result table.basic thead>tr>th.country {
        width: 180px;
    }

    .recent_result table.basic thead>tr>th.place {
        width: 50px;
    }

    .recent_result table.basic tbody>tr>th {
        font-size: 1.1rem;
    }

    /* --- 馬名 --- */
    div.horse_unit>div.inner>div.head>div.name>div.inner {
        display: block;
    }

    div.horse_unit>div.inner>div.head>div.name>div.inner>div.name_line h2,
    div.horse_unit>div.inner>div.head>div.name>div.inner>div.name_line h3 {
        font-size: 2.4rem
    }

    #race_horse div.horse_unit>div.inner>div.head>div.name>div.inner>div.name_line h2 {
        font-size: 2.4rem;
        margin: 0;
    }

    div.horse_unit>div.inner>div.head>div.name>div.inner>div {
        display: block;
    }

    div.horse_unit>div.inner>div.head>div.name>div.inner>div.age_line {
        padding-left: 0;
        margin-top: 4px;
    }

    div.horse_unit>div.inner>div.head>div.name>div.inner>div.age_line .age {
        font-size: 1.3rem;
        display: block;
        margin-left: 0;
    }

    div.horse_unit>div.inner>div.head>div.name>div.inner>div.age_line .record {
        font-size: 1.3rem;
    }

    div.horse_unit>div.inner>div.head>div.name>div.inner>div.age_line .en {
        display: block;
        margin-left: 0;
        margin-top: 0;
    }

    /* - 2020.06 血統・主な成績　追加
    -------------------------------------------------- */
    div.horse_unit>div.inner>div.head>div {
        vertical-align: top;
    }

    div.horse_unit>div.inner>div.head>div.flag {
        text-align: center;
        padding-right: 10px;
        padding-top: 0;
    }

    div.horse_unit>div.inner>div.head>div.flag>img {
        display: block;
        margin: 0 auto;
    }

    div.horse_unit>div.inner>div.head>div.flag>img.cos {
        max-height: 30px !important;
        margin-top: 4px;
    }


    /* --- 写真なし版 --- */
    .detail_list.no_img div.horse_unit:not(.show-img) .familiy_line,
    .detail_list div.horse_unit.no_img .familiy_line {
        margin-top: 15px;
    }

    /* --- 主な成績 --- */
    .record_line>.content>.unit>dl {
        display: block;
    }

    .record_line>.content>.unit>dl>dt {
        font-size: 1.1rem;
    }

}

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

    br.sp {
        display: block;
    }

    /* - 馬リスト
    ---------------------------------------------------------------------- */
    .horse_list_area .horse_list>.unit>a .line>.flag {
        width: 36px;
    }

    .horse_list_area .horse_list>.unit>a .line>.flag img {
        max-width: 36px;
    }

    /* - 出走馬詳細
    ---------------------------------------------------------------------- */
    #detail_modal .detail_area .horse_unit>.inner>.cancel>.wrap {
        align-items: flex-start;
    }

    #detail_modal .detail_area .horse_unit>.inner>.cancel>.wrap>.inner {
        margin-top: 150px;
    }

    /* --- ユニット ヘッダー --- */
    div.horse_unit>div.inner>div.head>div.flag {
        padding-right: 10px;
    }

    div.horse_unit>div.inner>div.head>div.flag img {
        max-width: 45px;
    }

    /* --- 馬名 --- */
    div.horse_unit>div.inner>div.head>div.name>div.inner>div.name_line h2,
    div.horse_unit>div.inner>div.head>div.name>div.inner>div.name_line h3 {
        font-size: 2rem;
        line-height: 1.3;
    }

    #race_horse div.horse_unit>div.inner>div.head>div.name>div.inner>div.name_line h2 {
        font-size: 2rem;
        line-height: 1.3;
    }

    div.horse_unit>div.inner>div.head>div.name>div.inner>div.age_line .age {
        font-size: 1.3rem;
        line-height: 1.2;
    }

    div.horse_unit>div.inner>div.head>div.name>div.inner>div.age_line .en {
        font-size: 1.2rem;
        line-height: 1.2;
    }

    /* --- 最近5走の成績 --- */
    .recent_result table.basic thead>tr>th.date {
        width: 110px;
    }

    .recent_result table.basic tbody>tr>td.date {
        font-size: 1.1rem;
    }

    /* ----- 騎手・調教師 ----- */
    div.person_unit>h3>span.inner>span.txt>span,
    div.person_unit>h4>span.inner>span.txt>span {
        display: block;
        font-size: 1.1rem;
    }

    div.person_unit div.content.img {
        display: block;
    }

    div.person_unit div.content.img>div {
        display: block;
    }

    div.person_unit div.content.img>div.img {
        width: auto;
        padding-right: 0;
        text-align: center;
        margin-bottom: 15px;
    }

    div.person_unit .name_area>h3>.wrap,
    div.person_unit .name_area>h4>.wrap {
        width: 100%;
    }

    div.person_unit .name_area>h3>.wrap>.cell.opt,
    div.person_unit .name_area>h4>.wrap>.cell.opt {
        width: 72px;
        box-sizing: border-box;
    }

    div.person_unit .name_area>h3>.wrap>.cell.opt a,
    div.person_unit .name_area>h4>.wrap>.cell.opt a {
        padding: 4px;
    }

    div.person_unit .name_area>h3>.wrap>.cell.main span.inner>span.txt,
    div.person_unit .name_area>h4>.wrap>.cell.main span.inner>span.txt {
        line-height: 1.4;
    }

    div.person_unit .name_area>h3>.wrap>.cell.main span.inner>span.txt>span,
    div.person_unit .name_area>h4>.wrap>.cell.main span.inner>span.txt>span {
        display: block;
        font-size: 1.1rem;
    }

    /* --- 関連動画 --- */
    .related_movie div.link_list>div>a span.opt.block {
        display: block;
    }

}

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

    /* - 馬リスト
    ---------------------------------------------------------------------- */
    .horse_list_area .horse_list>.unit>a .line>.flag {
        width: 32px;
    }

    .horse_list_area .horse_list>.unit>a .line>.flag img {
        max-width: 32px;
    }

    .horse_list_area .horse_list>.unit>a .line>.name .jpn {
        font-size: 1.5rem;
    }

    /* --- ユニット ヘッダー --- */
    div.horse_unit>div.inner>div.head>div.flag {
        padding-right: 10px;
    }

    div.horse_unit>div.inner>div.head>div.flag img {
        max-width: 40px;
    }

    div.horse_unit>div.inner>div.head>div.name>div.inner>div.name_line h2 {
        font-size: 1.6rem;
    }

    /* --- 騎手・調教師 --- */
    div.person_unit .name_area>h3,
    div.person_unit .name_area>h4 {
        font-size: 1.4rem;
    }

    div.person_unit .name_area>h3>.wrap>.cell.main span.inner>span.cap,
    div.person_unit .name_area>h4>.wrap>.cell.main span.inner>span.cap {
        padding: 4px 6px;
        font-size: 1rem;
    }

    div.person_unit .name_area>h3>.wrap>.cell.opt,
    div.person_unit .name_area>h4>.wrap>.cell.opt {
        padding-left: 5px;
        width: 64px;
    }

    div.person_unit .name_area>h3>.wrap>.cell.opt .btn_detail>a,
    div.person_unit .name_area>h4>.wrap>.cell.opt .btn_detail>a {
        font-size: 1rem;
    }

    div.person_unit div.content.img {
        display: block;
    }

    div.person_unit div.content.img>div {
        display: block;
    }

    div.person_unit div.content.img>div.img {
        width: auto;
        padding-right: 0;
        text-align: center;
        margin-bottom: 15px;
    }

}


@media print {

    html,
    body {
        height: auto;
    }

    #wrapper {
        min-height: 1px;
    }

    #contentsBody table {
        border-collapse: separate;
    }

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