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

	レース情報　レース概要/過去の結果

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


#race_about {
  margin-top: 30px;
}

#race_about .contents_unit {
  margin-top: 30px;
}

#race_about .contents_unit+.contents_unit {
  margin-top: 50px;
}

.contents_unit>h2.lv6 {
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: bold;
  color: #0c6194;
  margin-bottom: 0;
}

#race_about>div.nav.tab {
  display: table;
  margin-top: 30px;
}

#race_about>div.nav.tab>div {
  display: table-cell;
  border-bottom: none;
  border-left: 1px solid #FFF;
}

#race_about>div.nav.tab>div.current>a:after {
  display: block;
}


/* - レーススライド
---------------------------------------------------------------------- */

#main_visual {
  position: relative;
  width: 100%;
  margin-top: 30px;
}

/* --- 自動再生｜ページャー --- */
div.slide_control {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 4px;
  padding-right: 10px;
  border-radius: 2px;
}

div.slide_control.off {
  display: none;
}

div.slide_control .inner {
  display: table;
}

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

div.slide_control .inner>.cell+.cell {
  padding-left: 10px;
}

/* --- 自動再生ボタン --- */
div.slide_control .inner>.cell.auto .btn>a {
  display: block;
  background-color: rgba(51, 51, 51, 0.9);
  border: 1px solid #222;
  color: #fff;
  padding: 5px 10px;
  border-radius: 3px;
  text-decoration: none;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}

.no-touch div.slide_control .inner>.cell.auto .btn>a:hover,
div.slide_control .inner>.cell.auto .btn>a:focus {
  border: 1px solid #eee;
}

div.slide_control .inner>.cell.auto .btn.on>a {
  border: 1px solid #999;
  background-color: #e7e7e7;
  color: #444;
}

.no-touch div.slide_control .inner>.cell.auto .btn.on>a:hover,
div.slide_control .inner>.cell.auto .btn.on>a:focus {
  border: 1px dashed #222;
  background-color: #fff;
  color: #222;
}

div.slide_control .inner>.cell.auto .btn>a span.play {
  display: none;
}

div.slide_control .inner>.cell.auto .btn.on>a span.play {
  display: block;
}

div.slide_control .inner>.cell.auto .btn>a span.stop {
  display: block;
}

div.slide_control .inner>.cell.auto .btn.on>a span.stop {
  display: none;
}


/* --- ページャー --- */
ul.slick-dots {
  display: table;
}

ul.slick-dots>li {
  display: table-cell;
  vertical-align: middle;
}

ul.slick-dots>li+li {
  padding-left: 5px;
}

ul.slick-dots>li>a {
  color: #fff;
  transition: all 0.3s ease-in-out;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 10px;
  display: block;
  border: 2px solid #333;
  width: 12px;
  height: 12px;
}

ul.slick-dots>li>a img {
  max-width: 6px;
  vertical-align: top;
  max-width: 100%;
}

.no-touch ul.slick-dots>li>a:hover,
ul.slick-dots>li>a:focus {
  border: 2px solid #ccc;
}

ul.slick-dots>li.slick-active>a {
  background-color: rgba(255, 255, 255, 0.9);
}


/* --- スライダー：一時停止／再開ボタン --- */
div.control_area {
  max-width: 940px;
  margin: 0 auto;
  position: relative;
}


div.slide_unit {
  position: relative;
}

div.slide_unit>.race_pic {
  position: relative;
}

div.slide_unit>.caption {
  position: absolute;
  top: 10px;
  left: 10px;
  color: #FFF;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
  opacity: 0;
}

.slick-current div.slide_unit>.caption.on {
  animation: fadeText 0.3s ease-out 1 forwards;
}

@keyframes fadeText {
  0% {
    opacity: 0;
    transform: translateX(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


.slick-current div.slide_unit>.caption.on {
  opacity: 1;
}


@keyframes firstLoadFade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}


#main_visual>.arrow_unit {
  width: 100%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}

#main_visual>.arrow_unit>.inner {
  position: relative;
  width: 100%;
  height: 32px;
}

div.slide-arrow {
  position: absolute;
  top: 0;
  z-index: 10;
}

div.slide-arrow>a {
  color: #FFF;
  text-decoration: none;
  background: rgba(34, 34, 34, 0.8);
  width: 32px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
  border: 1px solid #333;
}

.no-touch div.slide-arrow>a:hover,
div.slide-arrow>a:focus {
  border: 1px solid #111;
  background: rgba(0, 0, 0, 0.8);
}

div.slide-arrow>a i {
  font-size: 2rem;
  position: relative;
}

div.slide-arrow.prev-arrow {
  left: 15px;
}

div.slide-arrow.prev-arrow>a i {
  right: 1px;
}

div.slide-arrow.next-arrow {
  right: 15px;
}

div.slide-arrow.next-arrow>a i {
  left: 1px;
}

/* - レース概要
---------------------------------------------------------------------- */
#about .content>p {
  line-height: 1.6;
  font-size: 1.4rem;
}

#about .content>p.signature {
  text-align: right;
  margin-top: 15px;
  font-size: 1.2rem;
}


/* - コースの特徴
---------------------------------------------------------------------- */

#race_features>h2.lv6 {
  color: #333;
}

#race_features>.content>.course_block {
  margin-top: 10px;
  border: 1px solid #ddd;
  text-align: center;
}

#race_features>.content>.course_block>.img {
  padding: 15px;
}

#race_features>.content>.course_block>.img img {
  vertical-align: top;
  width: 100%;
  max-width: 720px;
}

#race_features>.content>.course_block>.img+div.link_list {
  border-top: 1px solid #ddd;
}

#race_features>.content>.course_block>.img+div.link_list>div>a {
  background-color: #176aa4;
  color: #FFF;
}

#race_features>.content>.course_block>.img+div.link_list>div>a i {
  color: #fff;
}


/* - コース紹介動画
---------------------------------------------------------------------- */
.movie_area .sub_header.lg {
  font-size: 1.6rem;
}

.movie_area .panel>.content {
  background-color: #efefef;
  border: none;
  text-align: center;
}

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

.movie_area .panel a img {
  vertical-align: top;
  max-width: 480px;
  width: 100%;
}

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

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

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


/* - 過去10年の結果
---------------------------------------------------------------------- */
#race_about.past caption.simple>.inner>div.main {
  font-size: 1.8rem;
  line-height: 1.4;
  font-weight: bold;
  color: #0c6194;
}

#past_result>.content table.basic>caption.simple>.scr_caution {
  margin-bottom: 10px;
}

#past_result table.basic tbody>tr>th {
  font-weight: bold;
  font-size: 1.2rem;
  white-space: nowrap;
}

#past_result table.basic tbody>tr>td {
  font-size: 1.2rem;
}

#past_result table.basic tbody>tr>td img {
  max-width: 22px;
  vertical-align: middle;
  margin-right: 3px;
  border: 1px solid #ddd;
}

#past_result table.basic.narrow-xy tfoot>tr>th,
#past_result table.basic.narrow-xy tbody>tr>th,
#past_result table.basic.narrow-xy tbody>tr>td {
  padding: 5px 3px;
}

#past_result table.basic.narrow-xy tbody>tr>td span.block {
  display: block;
  font-size: 1rem;
}

/* ----- 2026/04 折り返し対応追加 ----- */
table.basic.narrow-xy thead>tr>th {
  padding: 5px 2px;
  font-size: 1.2rem;
}

#past_result table.basic.narrow-xy thead>tr>th {
  word-break: keep-all;
}

#past_result table.basic.narrow-xy tbody>tr>td {
  white-space: nowrap;
}


/* - 日本馬の成績
---------------------------------------------------------------------- */

#japan_result table thead tr th.date {
  width: 120px;
}

#japan_result table thead tr th.place {
  width: 54px;
}

#japan_result table thead tr th.jockey,
#japan_result table thead tr th.trainer {
  width: 110px;
}

#japan_result table thead tr th.year {
  width: 56px;
}

#japan_result table thead tr th.year.on-movie {
  width: 80px;
}

#japan_result table thead tr th.age {
  width: 56px;
}

#japan_result table tbody>tr>th {
  font-size: 1.3rem;
  font-weight: bold;
}

#japan_result table tbody>tr>th .movie_block {
  display: block;
  border-top: 1px dashed #CCC;
  margin-top: 6px;
  padding-top: 8px;
}

#japan_result table tbody>tr>td {
  font-size: 1.2rem;
}

#japan_result table tbody tr td .txt-sm {
  font-size: 1.0rem;
}

#japan_result table tbody tr td img {
  max-width: 28px;
  vertical-align: bottom;
  margin-right: 4px;
  border: 1px solid #ddd;
}

#japan_result table thead>tr>th .opt {
  font-size: 1.0rem;
}

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

/* ------------------------------------------------------------
	〜479px
------------------------------------------------------------ */
@media screen and (max-width : 479px) {
  div.slide_control {
    right: inherit;
    top: inherit;
    left: 5px;
    bottom: 10px;
  }

  div.slide_unit>.caption {
    padding: 5px;
    top: 5px;
    left: 5px;
  }

  #main_visual>.arrow_unit>.inner {
    height: 26px;
  }

  div.slide-arrow {
    position: absolute;
    top: 0;
    z-index: 10;
  }

  div.slide-arrow>a {
    width: 26px;
    height: 26px;
  }

  div.slide-arrow>a i {
    font-size: 1.6rem;
    position: relative;
  }

  div.slide-arrow.prev-arrow {
    left: 5px;
  }

  div.slide-arrow.next-arrow {
    right: 5px;
  }
}

/* ------------------------------------------------------------
	〜374px
------------------------------------------------------------ */
@media screen and (max-width : 374px) {}


@media print {

  html,
  body {
    height: auto;
  }

  #wrapper {
    min-height: 1px;
  }

  #contentsBody table {
    border-collapse: separate;
  }

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

  #main_visual {
    display: none;
  }

  #race_about>div.nav.tab {
    display: none;
  }
}