/*--------------------------------------
  競走馬ページ　ヘッダー
--------------------------------------*/
/*--------------------------------------
  WEB新聞 index スライダー
--------------------------------------*/
.main-banner .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0.5;
}

.main-banner .swiper-pagination-bullet-active {
    background: var(--primary);
    opacity: 1;
}

.webpaper-banner {
    margin: 0 auto;
	padding: 0 0 1rem;
    border-radius: 8px;
    box-shadow: 2px 2px 5px 1px #e5e5e5;
  }
  
.webpaper-banner__header {
      width: 100%;
      margin: 0 auto;
      display: -webkit-flex;
      display: flex;
      background-color: #00b94a;
	  color: #FFFFFF;
	  padding: 0.5rem 0.5rem;
      border-radius: 8px 8px 0 0;
    }
	
.webpaper-banner__header .left {
  	width: 20%;
  }
  
.webpaper-banner__header .left p {
	margin: 0 auto;
	text-align: center;
    font-size: 0.8rem;
	}
  
.webpaper-banner__header .right {
  	width: 80%;
	font-size: 20px;
	padding: 0;
	display: flex;
	align-items: center;
  }
  
.webpaper-banner__header .right p {
	 font-size: 1.2rem;
	 font-weight: bold;
	}

.webpaper-banner__header .right span {
	font-size: 0.8rem;
	font-weight: normal;
}
  
.webpaper-banner__header .image {
    width: 2.5rem;
    height: 2.5rem;
	margin: 3px auto 0;
  }
  
.webpaper-banner__body {
    padding: 1rem 0.7rem 0;
  }


/* スライダー連対率 */
.webpaper-banner__body_flex {
    display: flex;/*コレ*/
}

.webpaper-banner__body_flex .bodyleft{
	width: 30px;
	background-color: #323f4c;
	color: #FFFFFF;
	padding: 25px 0 0;
	border-radius: 5px;
	font-weight: bold;
	text-align: center;
}

.webpaper-banner__body_flex .bodyleft p {
    writing-mode: vertical-rl;
	display: inline-block;
	font-size: 1rem;
}

.webpaper-banner__body_flex .bodyright {
	font-size: 1rem;
	margin-left: 8px;
}

.bodyright .top {
	display: flex;/*コレ*/
	padding: 0 0 5px 0;
	justify-content: flex-start;
    align-items: center;
}

.bodyright .top p {
	align-items: center;
	padding: 0 0 0 10px;
	font-size: 1.2rem;
}

.bodyright .top img {
    width: 3rem;
    height: 3rem;
	margin: 0;
  }

.bodyright .bottom {
	display: flex;
	align-items: center;
}

.bottom .bottom-left {
	text-align: center;
}

.bottom .bottom-left p {
	align-items: center;
	color: #F44336;
	border: 1px solid #F44336;
	padding: 10px 5px;
	font-size: 0.8rem;
}

.bottom .bottom-center {
	padding-left: 5px;
}

.bottom .bottom-center p {
	font-size: 1.8rem;
    font-family: var(--roboto);
	font-weight: bold;
	color: #F44336;
	line-height: 1;
}

.bottom .bottom-center p .small {
	font-size: 0.8rem;
    font-weight: normal;
}

.bottom .bottom-right {
	padding-left: 10px;
}

.bottom .bottom-right p {
	font-size: 0.7rem;
}

/* PCレイアウト用のメインコンテナとサイドバーの配置 (768px以上) */
@media (min-width: 768px) {
    .bottom .bottom-left p {
	font-size: 0.9rem;
}
}


/* スライダーランキング */
.webpaper-banner__ranking .top {
	display: flex;/*コレ*/
	padding: 0;
	justify-content: flex-start;
    align-items: center;
}

.webpaper-banner__ranking .top p {
	padding: 0 0 0 10px;
	font-size: 1.2rem;
}

.webpaper-banner__ranking .top img {
    width: 3rem;
    height: 3rem;
	margin: 0;
  }
  
.webpaper-banner__ranking .middle {
	display: flex;/*コレ*/
	padding: 0 !important;
    margin: 0;
	justify-content: flex-start;
    align-items: center;
}

.webpaper-banner__ranking .middle p {
	align-items: center;
	padding: 0;
    font-size: 0.8rem;
    color: var(--global-gray-50);
}

.webpaper-banner__ranking .bottom {
	display: flex;
    padding-top: 5px;
    justify-content: flex-start !important;
    align-items: center;
}

.webpaper-banner__ranking .bottom .bottom-center {
	padding-left: 5px;
    font-size: 1rem;
    color: #000000 !important;
}

.webpaper-banner__ranking .bottom .bottom-right {
    font-size: 2rem;
    font-family: var(--roboto);
	font-weight: bold;
	line-height: 1;
}

.webpaper-banner__ranking .bottom .bottom-right .kinds{
  font-size: 0.8rem;
  font-weight: normal;
}

.ranking-flag {
  position: relative;/*親要素にrelative*/
  margin-right: 10px;
}
.ranking-flag p {
  position: absolute;/*重ねたい子要素にabsolute*/
  top:38%;
  left: 50%;
 -ms-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-50%,-50%);/*ベンダープレフィックス*/
  transform: translate(-50%,-50%);/*センター寄せの修正*/
  color: #000000;
  font-size: 1.8rem !important;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
  font-family: "Inconsolata", monospace;
  font-weight: 800;
  font-style: normal;
}


/* スライダー的中 */
.webpaper-banner__header__hit {
      width: 100%;
      margin: 0 auto;
      background-color: #00b94a;
	  color: #FFFFFF;
	  padding: 0.5rem 1rem 0.5rem;
      border-radius: 8px 8px 0 0;
    }

.webpaper-banner__header__hit p {
    font-size: 1rem;
    }

.webpaper-banner__hit .top {
	display: flex;/*コレ*/
	padding: 0;
	justify-content:space-between;
    align-items: center;
}

.webpaper-banner__hit .top .top-left {
    display: flex;
}

.webpaper-banner__hit .top .top-left img {
    width: 3rem;
    height: 3rem;
	margin: 0;
    padding: 0;
}

.webpaper-banner__hit .top .top-left .name__nameTxt {
    padding-left: 10px;
}
.webpaper-banner__hit .top .top-left .name__nameTxt .copy{font-size: 0.8rem;}
.webpaper-banner__hit .top .top-left .name__nameTxt .name{font-size: 1rem; font-weight: bold; display: flex; align-items: center;}
  
.webpaper-banner__hit .top .top-right {
}
  
.webpaper-banner__hit .middle {
	padding: 0 0 10px !important;
    margin: 0;
}

.webpaper-banner__hit .middle p {
	align-items: center;
	padding: 0;
    font-size: 0.8rem;
    color: var(--global-gray-50);
}

.webpaper-banner__hit .middle-2 {
  display: flex;
  gap:3px;
  padding-top: 5px;
  }

.webpaper-banner__hit .middle-2 .rank{
  color: var(--webpaper);
  font-weight: bold;
  font-size: 1.2rem;
}
.webpaper-banner__hit .middle-2 .name{
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.1;
  color: var(--black);
}

.webpaper-banner__hit .middle-2 .ratio{
  font-size: 0.8rem;
  font-weight: normal;
    color: var(--black);
}

.webpaper-banner__hit .bottom {
  display: flex;
  gap:8px;
  align-items: center;
}

.bottom__result__num {
  font-size: 1.2rem;
  font-weight: bold;
}
.bottom__result__num .kinds{
  font-size: 0.8rem;
  font-weight: normal;
}
.bottom__result__num .num{
  font-family: var(--roboto);
  font-size: 2rem;
}
	

/*--------------------------------------
  WEB新聞 メニュー
--------------------------------------*/

.webpaper-tabnav-wrap {
    width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 0 5px;
    padding: 10px 10px 0;
}

.webpaper-tabnav-wrap a {
	flex: 1 1 auto;
	order: -1;
	padding: 0.4rem 0 0.2rem;
	background-color: #e0e2e4;
	color: #777777;
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	border-radius: 15px 15px 0 0;
	display: flex;
    margin: 0;
    justify-content: center;  /*両端に配置*/
    align-items: center;
    font-size: 1rem;
	line-height: 1.3;
	text-decoration: none;
	}
	
.webpaper-tabnav-wrap a:hover {
	opacity: 0.8;
	}
	
.webpaper-tabnav-wrap input {
	display: none;
	}

.webpaper-tabnav-wrap .checked {
	background-color: #00b94a !important;
    color: #FFFFFF;
}


/*--------------------------------------
  WEB新聞 TOP レースナビ
--------------------------------------*/
.bl_raceNavi__Topline {
    border-top: 4px solid #323F4C;
  }

.webpaper-racelist {
    background: var(--global-gray-10);
    padding:10px;
    width: 100%;
}

/* レース名パーツ */
a.webpaper-race__ttlWrap:hover{
    opacity: 0.6;
}

.webpaper-race__ttlWrap{
    background:var(--white);
    width: 100%;
    border-radius: 6px;
    padding: 10px;
    border: 1px solid #CDCDCD;
    margin: 10px 0 0;
}

.bl_webpaper-raceTtl-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.webpaper-raceTtl-box__left{
    display: flex;
    gap:8px;
}
.webpaper-raceTtl-box__numWrap{
    display: flex;
    flex-direction: column;
    color: var(--white);
    background-color: var(--site-color);
    border-radius: 8px;
    padding: 8px;
    align-items: center;
    justify-content: center;
    line-height: 1;
    gap:4px;
}
.webpaper .webpaper-raceTtl-box__numWrap{
    background-color: var(--webpaper);
}
.webpaper-raceTtl-box__numWrap .date{font-size: 0.9rem;}
.webpaper-raceTtl-box__numWrap .place{font-weight: bold;font-size: 1.1rem;}
.webpaper-raceTtl-box__numWrap .num{font-weight: bold; font-size: 1.1rem;}
.webpaper-raceTtl-box__txtWrap{
        display: flex;
        flex-direction: column;
        padding-bottom: 5px;
        justify-content: center;
}
.webpaper-raceTtl-box__txt__aLine{
  display: flex;
  gap:5px;
  align-items: center;
}

.webpaper-raceTtl-box__txtWrap .name,.el_racettl{
        font-size: 1rem;
}
.webpaper-raceTtl-box__txtWrap .course,.raceTtl-box__txtWrap .condition{
    font-size: 0.8rem;
}
.webpaper-raceTtl-box__txtWrap .condition{color: var(--dark-gray); line-height: 1;}
.webpaper-raceTtl-box__txtWrap .el_raceStart{
    font-size: 0.7rem;
    line-height: 1;
    color: var(--dark-gray);
}
.webpaper-raceTtl-box__txtWrap .el_raceStart .time{
    font-family: var(--roboto);
    font-size: 1.3em;
    font-weight: 700;
    color: var(--main-black);
}

a.webpaper-race__ttlWrap{
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 100%;
  box-sizing: border-box;
  text-decoration: none;
  padding: 8px 24px 8px 8px;
  background: var(--white);
    border-radius: 6px;
    border:1px solid var(--global-gray-20);
    position:relative;
    cursor: pointer;
}

.webpaper-race__ttlWrap:after{
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.webpaper_raceList__release{
  display: flex;
  gap:2px;
  align-items: center;
  justify-content: center;
  background-color: var(--salon);
  color: var(--white);
  font-weight: bold;
  font-size: 0.8rem;
  line-height: 1;
  padding: 8px;
  border-radius: 3px;
}

.webpaper_raceList__release p {
    /* writing-mode: vertical-rl; */
	display: inline-block;
    text-align: center;
    line-height: 1.5;
}
.webpaper_raceList__release:has(.kautei) {
    background-color: rgb(255, 0, 0); /* 例: 背景色を黄色に */
  }

  .webpaper_raceList__release:has(.free) {
    background-color: rgb(81, 159, 255); /* 例: 背景色を黄色に */
  }

/* PCレイアウト用のメインコンテナとサイドバーの配置 (768px以上) */
@media (min-width: 768px) {
.webpaper-raceTtl-box__txtWrap .name,.el_racettl{
        font-size: 1.2rem;
}
}


/*--------------------------------------
  PDF新聞
--------------------------------------*/
.pdfpaper-ttl-1 {
    background: var(--global-gray-10);
    display: flex;
    align-items: center;
    text-align: center;
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--site-color);
    padding: 0.6rem 1rem;
    gap: 3px;
}

.pdfpaper-ttl-1 img {
    width: 3.4rem;
    height: auto;
    filter: invert(14%) sepia(100%) saturate(7284%) hue-rotate(262deg) brightness(83%) contrast(120%);
    vertical-align: 2px;
}

.pdfpaper-day-ttl {
    border-bottom: 3px solid var(--global-gray-20);
}

.pdfpaper-day-ttl span {
    display: inline-block;
    position: relative;
    padding: 0 .2em .2em;
    color: var(--site-color);
    font-size: 1.1rem;
    font-weight: normal;
}

.pdfpaper-day-ttl span::before {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--site-color);
    content: '';
}

/*　新聞一覧　*/
.pdfpaper-container {
  display : flex;
  flex-wrap : wrap;
  justify-content:flex-start;
  padding: 1rem 0 0.5rem;
  gap:10px;
}

.pdfpaper-container .pdfpaper-item {
    /*コレ*/width: calc(100% / 4 - 8px);
    /*コレ追加*/margin: 0 0 10px;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.pdfpaper-item img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    object-position: right top;
}

.pdfpaper-item:hover {
    filter: brightness(1.1); 
    transition: 0.3s;
}

.pdfpaper-container::after{
  content:"";
  display: block;
  width: calc(100% / 4 - 8px);
    /*コレ追加*/margin: 0 0 10px;
}

.pdfpaper-item .triangle {
    position: absolute;
    border-bottom: 60px solid transparent;
    border-left: 60px solid #ff5a34;
  }

.pdfpaper-item .label {
    position: absolute;
    top: 2px;
    left: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    line-height: 1.1;
    color: #fff;
  }  
.pdfpaper-item .label .number {
    font-size: 1.2rem;
  }

.card-description-box {
    position:  absolute;
    width: 100%;
    height: 45px;
    background-color: rgba(68, 5, 228, 0.7);   
    color:#fff;
    box-sizing:  border-box;
    bottom:0;
}

.card-description-box .card-description {
    font-size: 0.8rem;
    line-height: 1.3;
    vertical-align: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(2 * 1.3rem);
    padding: 0 5px;
    color: #FFFFFF;
}


/*　バックナンバー　*/
.pdfpaper-ttl-2 {
    background: var(--global-gray-10);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--site-color);
    padding: 0.4rem 1rem;
    gap: 3px;
}

/*　セレクトボックス　*/
.pdfpaper-bn-selectbox {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.pdfpaper-bn-selectbox::after {
    position: absolute;
    right: 10px;
    width: 10px;
    height: 7px;
    background-color: var(--global-gray-50);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}

.pdfpaper-bn-selectbox select {
    appearance: none;
    width: 100px;
    padding: 0.4rem 0 0.4rem 0.5rem;
    border: 1px solid var(--global-gray-30);
    border-radius: 3px;
    background-color: #FFFFFF;
    color: #000000;
    font-size: 1rem;
    font-weight: normal;
    cursor: pointer;
}

.pdfpaper-bn {
    width: 100%;
    margin-bottom: 7px;
    border-bottom: 1px solid var(--global-gray-30);
}

.pdfpaper-bn summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0.5rem 0.5rem 0.5rem 0.2rem;
    color: #000000;
    font-size: 1rem;
    cursor: pointer;
}

.pdfpaper-bn summary::-webkit-details-marker {
    display: none;
}

.pdfpaper-bn summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 2px solid var(--global-gray-50);
    border-right: 2px solid var(--global-gray-50);
    content: '';
    transition: transform .3s;
}

.pdfpaper-bn[open] summary::after {
    transform: rotate(225deg);
}


/* モーダルCSS */
.pdfpaper-modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 320px;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.pdfpaper-modal-content {
  margin: auto;
  width: 70%;
  background-color: #fff;
}

.pdfpaper-close {
  color: #AAAAAA;
  font-size: 1.6rem;
  font-weight: bold;
}

.pdfpaper-close:hover,
.pdfpaper-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.close-btn {
  margin: 0 auto;
  width: 70%;
  text-align:right;
}

.pdfpaper-item-2 {
    box-sizing: border-box;
    position: relative;
}

.pdfpaper-item-2 img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: right top;
}
.pdfpaper-item-2 .triangle {
    position: absolute;
    border-bottom: 60px solid transparent;
    border-left: 60px solid #ff5a34;
  }

.pdfpaper-item-2 .label {
    position: absolute;
    top: 0;
    left: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    line-height: 1.1;
    color: #fff;
  }  
.pdfpaper-item-2 .label .number {
    font-size: 1.2rem;
  }

.card-description-box-2 {
    position:  absolute;
    width: 100%;
    height: 45px;
    background-color: rgba(68, 5, 228, 0.7);   
    color:#fff;
    box-sizing:  border-box;
    bottom:0;
}

.card-description-2 {
    font-size: 0.8rem;
    line-height: 1.3;
    vertical-align: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(2 * 1.3rem);
}


/* PCレイアウト用のメインコンテナとサイドバーの配置 (768px以上) */
@media (min-width: 768px) {
/*　新聞一覧　*/
.pdfpaper-container {
  padding: 1rem 0 1rem;
}

.pdfpaper-container .pdfpaper-item {
    /*コレ*/width: calc(100% / 4 - 10px);
    /*コレ追加*/margin: 0 0 15px;
    box-sizing: border-box;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

.pdfpaper-container::after{
  content:"";
  display: block;
  width: calc(100% / 4 - 10px);
  /*コレ追加*/margin: 0 0 15px;
}

/*　セレクトボックス　*/
.pdfpaper-bn-selectbox select {
    width: 140px;
}

/*　モーダル　*/
.pdfpaper-modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 300px;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.pdfpaper-modal-content {
  width: 20%;
}

.close-btn {
  width: 20%;
}

.pdfpaper-item-2 img {
    height: 220px;
}
.pdfpaper-item-2 .triangle {
    border-bottom: 80px solid transparent;
    border-left: 80px solid #ff5a34;
  }

.pdfpaper-item-2 .label {
    top: 5px;
    left: 5px;
    font-size: 1rem;
  }  
.pdfpaper-item-2 .label .number {
    font-size: 1.6rem;
  }

.card-description-box-2 {
    width: 100%;
    height: 60px;
}

.card-description-2 {
    font-size: 1rem;
    line-height: 1.3;
    vertical-align: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(2 * 1.8rem);
}
}


/*--------------------------------------
  WEB新聞 出馬表 サブメニュー
--------------------------------------*/
.webpaper-racecard-nav {
	background-color: #00b94a;
	overflow-x: auto;
}

.webpaper-racecard-nav ul {
	display: flex;
	width: max-content;
	margin: 0 auto;
    padding: 0.7rem 0 0.7rem 0.5rem;
	}
	
.webpaper-racecard-nav ul li {
	list-style: none;
	margin-left: 5px;
	font-weight: bold;
}
	
.webpaper-racecard-nav ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem 1rem;
	font-size: 1rem;
	background-color: #FFFFFF;
	text-decoration: none;
	border-radius: 100px;
	}
	
.webpaper-racecard-nav ul li a:hover {
	opacity: 0.8;
}

.racecard-nav-checked {
	background-color: #FF4433 !important;
    color: #FFFFFF !important;
}

/*　出馬表の注釈　*/
.racecard-notes-wrap {
    margin: 0;
    padding: 5px 5px;
    background-color: #FFFFFF;
}
.racecard-notes-wrap .flex {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
}

.racecard-notes-wrap .flex .flex-item {
    display: flex;
    padding-right: 10px;
}

.racecard-notes-wrap .flex .flex-item img {
    width: 20px;
    height: auto;
}

.racecard-notes-wrap .flex .flex-item p {
    color: #777777;
    font-size: 0.9rem;
}

.racecard-notes-wrap p.AI {
    color: #777777;
    font-size: 0.9rem;
    padding-right: 5px;
}

/*--------------------------------------
  WEB新聞 出馬表 テーブル
--------------------------------------*/

.racecard-table_box {
    width: 100%;
}

.racecard-table_top {
  text-align: center;
  width:100vw;
}
.racecard-table_top th, .racecard-table_top td {
  padding: 0.3rem 0.3rem;
  border: 1px solid var(--global-gray-30);
}
.racecard-table_top th {
  background: #eaffe7;
  color: var(--global-gray-50);
  border-right: 1px solid var(--global-gray-30);
  border-top: 1px solid var(--global-gray-30);
  font-size: 0.75rem;
  font-weight: normal;
  line-height: 1.4;
}
.racecard-table_top th:last-of-type {
  border-right: 1px solid var(--global-gray-30);
}

.racecard-table_top th.horse-number {
    width: 2rem;
}

.racecard-table_top th.order-of-finish {
    width: 2rem;
}

.racecard-table_top td {
    font-size: 0.9rem;
    font-weight: normal;
    line-height: 1.4;
}

.racecard-table_top td.horse-number {
    text-align: center;
    font-weight: bold;
}

.racecard-table_top td .mark-box {
    border: 1px solid var(--global-gray-30);
    border-radius: 5px;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0 auto !important;
    text-align: center;
}
.racecard-table_top td .mark-box p {
    padding: 2px 0;
    line-height: 1;
}

.mark-box {
    position: relative;
}
.mark-box__display {
    pointer-events: none;
}
.mark-box .mark-select {
    position: absolute;
    inset: 0;
    display: block;
}
.mark-box .mark-select select {
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.mark-box .mark-select select:focus {
    outline: none;
}
.mark-box:focus-within {
    outline: 2px solid #4a90e2;
    outline-offset: 1px;
}

.racecard-table_top td.horse-detail {
    text-align: left;
    color: var(--global-gray-50);
}

.racecard-table_top td.horse-detail .line_1st {
    display: flex;
    justify-content: space-between;
    padding-bottom: 5px;
    align-items: center;
}
.racecard-table_top td.horse-detail h3 {
    font-size: 1rem;
}

.racecard-table_top td.horse-detail .line_1st .riding-style {
    font-size: 0.6rem;
    color: var(--global-gray-50);
}

.racecard-table_top td.horse-detail .line_2st {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.racecard-table_top td.horse-detail .line_2st .icon {
    display: flex;
    gap: 5px;
}

.racecard-table_top td.horse-detail .line_2st .icon img {
    width: 20px;
    height: auto;
}

.racecard-table_top td.horse-detail .line_2st .jockey {
    font-size: 0.8rem;
}

.racecard-table_top td.horse-detail .line_2st .jockey a {
    color: var(--blue);
}

.racecard-table_top td.horse-detail p {
    font-size: 0.9rem;
}

.racecard-table_top td.horse-detail .normal a {
    color: var(--blue);
}

.racecard-table_top td.time {
    text-align: left;
}

.racecard-table_top td.odds strong {
    color: var(--attention);
}

.racecard-table_top td .pass-order,.favourite {
    font-size: 0.8rem;
}

.racecard-table_top .triangle-set {
    padding-top:3px;
}

.racecard-table_top .triangle_top{
    text-align: center;
    background-color: var(--global-gray-50);
    width: 10px;
    height: 8px;
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
    margin: 0 auto !important;
}

.racecard-table_top .triangle_bottom{
    text-align: center;
    background-color: var(--global-gray-50);
    width: 10px;
    height: 8px;
    clip-path: polygon(0 0,100% 0, 50% 100%);
    margin: 2px auto 0 !important;
}

/*　新聞ボタン　*/
.webpaper-button-box {
    padding: 1rem;
}
.webpaper_button-1 {
    display: flex;
    justify-content:space-between;
    align-items: center;
    width: 100%;
    margin:0 auto;
    padding: 0.5rem 1rem;
    border: 1px solid var(--global-gray-30);
    border-radius: 5px;
    background-color: #fff;
    color: var(--global-gray-50);
    font-size: 1em;
}
.webpaper_button-1::after {
    transform: rotate(135deg);
    width: 10px;
    height: 10px;
    margin-left: 10px;
    border-top: 2px solid var(--global-gray-30);
    border-right: 2px solid var(--global-gray-30);
    content: '';
}
.webpaper_button-1 span {
    display: flex;
}
.webpaper_button-1 img {
    width: 1.3rem;
    margin-right: 5px;
}


/* PCレイアウト用のメインコンテナとサイドバーの配置 (768px以上) */
@media (min-width: 768px) {
.racecard-table_top {
    width:100%;
    }
    
.racecard-table_top th, .racecard-table_top td {
  padding: 0.3rem 0.5rem;
}
.racecard-table_top th {
  font-size: 0.8rem;
}
.racecard-table_top th:last-of-type {
  border-right: 1px solid var(--global-gray-30);
}
.racecard-table_top td {
    font-size: 1rem;
}
.racecard-table_top td .mark-box {
    border: 1px solid var(--global-gray-30);
    border-radius: 5px;
    width: 2.2rem;
    height: 2.2rem;
    margin: 0 auto !important;
    text-align: center;
}
.racecard-table_top td .mark-box p {
    padding: 8px 0;
    line-height: 1;
}
.racecard-table_top td.horse-detail h3 {
    font-size: 1.3rem;
}
.racecard-table_top td.horse-detail .line_1st .riding-style {
    font-size: 0.8rem;
}
.racecard-table_top td.horse-detail .line_2st .icon img {
    width: 25px;
}
.racecard-table_top td.horse-detail .line_2st .jockey {
    font-size: 1rem;
}
.racecard-table_top td.horse-detail p {
    font-size: 1rem;
}

/*　新聞ボタン　*/
.webpaper-button-box {
    padding: 1rem;
}
.webpaper_button-1 {
    display: flex;
    justify-content:space-between;
    align-items: center;
    width: 100%;
    margin:0 auto;
    padding: 0.5rem 1rem;
    border: 1px solid var(--global-gray-30);
    border-radius: 5px;
    background-color: #fff;
    color: var(--global-gray-50);
    font-size: 1em;
}
.webpaper_button-1::after {
    transform: rotate(135deg);
    width: 10px;
    height: 10px;
    margin-left: 10px;
    border-top: 2px solid var(--global-gray-30);
    border-right: 2px solid var(--global-gray-30);
    content: '';
}
.webpaper_button-1 span {
    display: flex;
}
.webpaper_button-1 img {
    width: 1.3rem;
    margin-right: 5px;
}
    
/*　新聞ボタン　*/
.webpaper-button-box {
    padding: 1rem 0;
    display: flex;
    justify-content: flex-end;
}
.webpaper_button-1 {
    width: 300px;
}
}


/*--------------------------------------
  WEB新聞 予想 テーブル
--------------------------------------*/

.guess-table_box {
    width: 100%;
    overflow-x: auto;
    max-width: 1240px;
    margin: 0 auto;
   font-size: 0.75rem;
   overscroll-behavior-x: contain;
   touch-action: pan-x;
   -webkit-overflow-scrolling: touch;
}
.guess-table_top {
    width: 100%; 
    border-collapse: collapse;
    white-space: nowrap;
}
.guess-table_box{
    scrollbar-gutter: stable both-edges;
    contain: layout paint;
    /* まだ揺れる端末がある場合のみ試験的に: */
    /* -webkit-overflow-scrolling: auto; */
  }
.guess-table_top th, .guess-table_top td {
  padding: 0.2rem 0.3rem;
  border: 1px solid var(--global-gray-30);
}
.guess-table_top th {
  background: #eaffe7;
  color: var(--global-gray-50);
  border-right: 1px solid var(--global-gray-30);
  border-top: 1px solid var(--global-gray-30);
    font-weight: bold;
  line-height: 1.4;
}
.guess-table_top th:last-of-type {
  border-right: 1px solid var(--global-gray-30);
}

.guess-table_top th.horse-number {
    width: 2.2rem;
}

.guess-table_top th.mark {
    width: 3rem;
}

/*
.guess-table_top th.horse-name {
     min-width: 200px; 
}
*/
.guess-table_top th.AI-expect {
    background-image: -webkit-linear-gradient(left, #48f2b3, #00b9ca 36%, #0054ca);
    background-image: -o-linear-gradient(left, #48f2b3, #00b9ca 36%, #0054ca);
    background-image: linear-gradient(to right, #48f2b3, #00b9ca 36%, #0054ca);
   
    padding: 1rem 0.3rem !important;
    color: var(--white);
    font-weight: bold;
    letter-spacing: 0.1rem;   
    font-size: 1.2rem;
}

.guess-table_top th.tipster {
    width: 3rem;
   
    max-width: 3rem;
    font-weight: bold;  
    padding: 0.3rem;
}
.guess-table_top th.teamSeishun {
    background-color: #e53935!important;
    color: #FFF;
}
.guess-table_top th.teamYuuma {
    background-color: #331d77!important;
    color: #FFF;
}
.guess-table_top th.teamYuumaSub {
    background-color: #e6e3f1!important;
    color: #000;
}

.guess-table_top td {
    font-weight: normal;
    line-height: 1.4;
}

.guess-table_top td.horse-number {
    text-align: center;
    font-weight: bold;
}

.guess-table_top td.mark {
    width: 1.5rem;
    text-align: center;
    font-size: 1rem;
    font-weight: 900;
}

.guess-table_top td .mark-box {
    border: 1px solid var(--global-gray-30);
    border-radius: 8px;
    margin: 0 auto !important;
    width: 1.5rem;
}

.guess-table_top td .mark-box p {
    text-align: center;
    padding: 2px 0;
}

img.emoji-small {
    width: 50%;
    margin: 0 auto;
}

.mark-select {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.mark-select select {
    border: 1px solid var(--global-gray-30);
    border-radius:5px;
    min-width: 1.8rem;
    height: 1.8rem;
    padding: 0;
    background-color: transparent; /* 親の背景色を使用するため */
    color: var(--global-gray-50);
    font-size: 0.75em;
    cursor: pointer;
    line-height: 1.8rem; /* 上下中央用 */
    /* ブラウザのデフォルトスタイルを無効化し、より細かい制御を可能にする */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  /* 選択されたテキストを中央に配置する */
  text-align: center;
  text-align-last: center; /* Safariなどのブラウザで特に重要です */
}

/* ドロップダウンリストが開いたときの、各項目（option）のテキスト揃えをリセットする */
.mark-select select option {
  text-align: left; /* お好みでleft, right, centerを設定してください */
}

/* 固定したいセル（th, td）に共通のクラスを設定 */
.sticky-col {
  /* position: sticky を使ってセルを固定 */
  position: sticky;
  left: 0; /* 左端に固定する */
  z-index: 1; /* ベースは1。列ごとに上書きして段階付け */

}

/* 2列目のセルの位置を調整 */
.sticky-col:nth-child(1) {
  left: 0;
  z-index: 3; /* 最も左の列が最前面 */
  box-shadow: inset -1px 0 0 var(--global-gray-30),
  inset 0 -1px 0 var(--global-gray-30);
  border: none;
}

.sticky-col:nth-child(2) {
  left: 33px; /* 1列目のセルの幅に合わせて調整 */
  z-index: 2; /* 2列目は2 */
  /* 右境界を視認しやすくする */
  box-shadow: inset -1px 0 0 var(--global-gray-30),
  inset 0 -1px 0 var(--global-gray-30);
  border: none;  
}

/* 3列目のセルの位置を調整 */
.sticky-col:nth-child(3) {
  left: 65px; /* 1列目と2列目のセルの合計幅に合わせて調整 */
  z-index: 1; /* 3列目は一番下（2列目のボーダーに被せない） */
  /* 必要に応じてこちらにも薄い仕切り線 */
  /* 右側の薄い仕切り + 下側の仕切りを追加 */
  box-shadow: 
    inset -1px 0 0 var(--global-gray-30),
    inset 0 -1px 0 var(--global-gray-30);
  border: none;
}

/* セルの背景色を設定することで、スクロール時にコンテンツが見えなくなるのを防ぐ */
.sticky-col{ transform: translateZ(0); will-change: left; }
.sticky-col:nth-child(1) {
    
}
.sticky-col:nth-child(2) {
  background-color: #FFFFFF;
  /* border-right: 1px solid var(--global-gray-30);
  border-top: 1px solid var(--global-gray-30); */
}
.sticky-col:nth-child(3) {
  background-color: #FFFFFF;
  /* border-right: 1px solid var(--global-gray-30);
  border-top: 1px solid var(--global-gray-30); */
}

/* thのsticky列は背景を白にしない（表ヘッダーのデザインを保つ） */
th.sticky-col {
  background-color: #eaffe7!important;
}

.guess-table_top td.horse-number{ width: 2.2rem; text-align: center; }
.guess-table_top td.mark{ width: 3rem; text-align: center; }

/* @media (max-width: 767px){
    .sticky-col{ position: sticky; left: 0; z-index: 3; }
    .sticky-col:nth-child(2),
    .sticky-col:nth-child(3){
      position: static;
      left: auto;
      z-index: auto;
      box-shadow: none;
      background-color: transparent;
    }
  } */

/*--------------------------------------
  WEB新聞 調教分析 テーブル
--------------------------------------*/

.training-ana-table_box {
    width: 100%;
}

.training-ana-table {
  text-align: center;
  width:100vw;
}

.training-ana-table th, .training-ana-table td {
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--global-gray-30);
}
.training-ana-table th {
  background: #eaffe7;
  color: var(--global-gray-50);
  border-right: 1px solid var(--global-gray-30);
  border-top: 1px solid var(--global-gray-30);
  font-size: 0.8rem;
  font-weight: normal;
  line-height: 1.4;
}
.training-ana-table th:last-of-type {
  border-right: 1px solid var(--global-gray-30);
}

.training-ana-table th.horse-number {
    width: 2.2rem;
}

.training-ana-table th.mark {
    width: 3rem;
}

.training-ana-table td {
    font-size: 1rem;
    font-weight: normal;
    line-height: 1.4;
}

.training-ana-table td.horse-number {
    text-align: center;
    font-weight: bold;
    width: 30px;
}

.training-ana-table td .mark-box {
    border: 1px solid var(--global-gray-30);
    border-radius: 8px;
    width: 2rem;
    height: 2rem;
    margin: 0 auto !important;
    text-align: center;
    background: var(--white);
}
.training-ana-table td .mark-box p {
    text-align: center;
    padding: 2px 0;
}

.training-ana-table td.horse-detail {
    color: var(--global-gray-50);
    /* padding: 0.5rem 0.4rem; */
    background: #eaffe7;
}

.training-ana-table td.horse-detail .line_1st {
    display: flex;
    justify-content:space-between;
    align-items: center;
    text-align: left;
}
.training-ana-table td.training-day {
    text-align: left;
    background: #FFFFFF;
    width: 2rem;
    color: var(--global-gray-50);
    padding: 0.5rem 0.4rem;
}

.training-ana-table td.time {
    padding: 0.3rem 0.1rem;
    font-weight: bold;
}

.training-ana-table td.super-fast {
    background: #ffe3cc;
}
.training-ana-table td.fast {
    background: #fffad2;
}

.training-ana-table td.comment {
    text-align: left;
    padding: 0.5rem 0.3rem;
}

.training-ana-table td .finished {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.training-ana-table td .finished p {
    text-align: left;
}

.training-ana-table td .level-set {
    gap:5px;
    display: flex;
    justify-content: flex-end;
}

.training-ana-table td .kehai {
    width: 60px;
    height: 60px;
    background: #e8f7ff;
    border-radius: 6px;
    align-items: center;
    line-height: 1.1;
    padding-top: 8px;
    font-size: var(--font-sm);
    color: var(--global-gray-50);
}

.training-ana-table td .ugoki {
    width: 60px;
    height: 60px;
    background: #fce8ec;
    border-radius: 6px;
    align-items: center;
    line-height: 1.1;
    padding-top: 8px;
    font-size: var(--font-sm);
    color: var(--global-gray-50);
}

.training-ana-table td .level-k {
    font-size: var(--font-xl);
    color: #1a91e2;
    font-weight: bold;
}

.training-ana-table td .level-u {
    font-size: var(--font-xl);
    color: #e46d6f;
    font-weight: bold;
}


/*　調教コメント　*/
.training-ana-table td .focus-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.4rem 0.8rem;
	background-color: #e46d6f;
	border-radius: 100px;
    color: var(--white);
    gap:2px;
    text-align: left;
    font-size: 0.9rem;
	}
    
.training-ana-table td .focus-mark img {
    width: 12px;
    height: auto;
	}
    
.training-ana-table p.question {
    color: var(--global-gray-50);
    padding-bottom: 5px;
}

.training-ana-table td.item {
    width: 60px;
    background: #eaffe7;
    color: var(--global-gray-50);
}

.training-ana-table td.content {
    text-align: left;
}

.training-ana-table td.point {
    text-align: left;
    padding: 0.5rem 0.3rem;
}

.training-ana-table td .text {
    color: #f44336;
}

.training-ana-table td .triangle {
    font-size: var(--font-xs);
    color: #f44336;
    vertical-align: baseline;
}

/*　AIアナライズ　*/
.training-ana-table td.line_AI {
    background: #eaffe7;
}

.training-ana-table td .rating-box {
    display: flex;
    justify-content:space-between;
    align-items: center;
    text-align: left;
}
.training-ana-table td .rating-box .left {
    display: flex;
    gap: 10px;
    align-items: center;
}

.training-ana-table td .rating {
    background: var(--white);
    border-radius: 5px;
    padding: 0.2rem 0.5rem;
    display: flex;
    align-items:center;
}
.training-ana-table td .rating .text {
    font-size: var(--font-xs);
    color: var(--global-gray-50);
    line-height: 1.2;
}
.training-ana-table td .rating .score {
    font-size: var(--font-lg);
    color: var(--global-gray-50);
    line-height: 1.2;
    font-weight: bold;
}
.training-ana-table td .rating img {
    width: 40px;
    height: auto;
}

.training-ana-table td.AIscore {
    text-align: center;
    vertical-align: top;
    font-size: var(--font-lg);
    color: var(--global-gray-50);
    line-height: 1.2;
    font-weight: bold;
}

.training-ana-table td.AIscore p {
    font-size: var(--font-xxs);
    color: var(--global-gray-50);
    line-height: 1.2;
    padding-bottom: 3px;
    font-weight: normal;
}
.training-ana-table td.AIscore img {
    width: 25px;
    height: auto;
    margin: 0 auto;
}
.training-ana-table td.rank {
    text-align: center;
}

.training-ana-table td.heavy-rating {
    text-align: center;
    background: var(--global-gray-10);
}
.training-ana-table td.heavy-rating p {
    font-size: var(--font-xs);
    color: var(--global-gray-50);
    line-height: 1.2;
    padding-bottom: 3px;
}
.training-ana-table td.heavy-rating img {
    width: 25px;
    height: auto;
    margin: 0 auto;
}

/*　競走馬ページ　調教分析　*/
.race-trainingana-table-wrap {
  width:100% !important;
}

.race-trainingana-table-wrap .block:after {
	content: "";
	height: 1px;
	width: 100%;
	padding: 10px 0;
	display: block;
}

.training-ana-table th.race-detail {
    color: var(--global-gray-50);
    padding: 0.5rem 0.4rem;
    text-align: left;
    font-size: 1rem;
    line-height: 1.5;
}

.training-ana-table th.race-detail .race {
    display: flex;
    align-items: center;
}

.training-ana-table th.race-detail .race_line {
    display: flex;
    align-items: center;
    gap:10px;
}

.training-ana-table .race_line h3.race-name {
    font-size: 1.2rem;
    color: var(--blue);
}

.training-ana-table td.race-training-day {
    text-align: left;
    background: #FFFFFF;
    width: 2rem;
    color: var(--global-gray-50);
    padding: 0.5rem 0.4rem;
}

.training-ana-table .race-detail .order-of-finish {
    padding: 0.1rem 0.5rem;
    font-weight: bold;
    max-width: 60px;
    text-align: center;
}

/*　順位色　*/
.training-ana-table .race-detail .icon-nomal {
    background: #FFFFFF;
    border: 1px solid var(--global-gray-50);
    color: var(--global-gray-50);
}
.training-ana-table .race-detail .icon-1st {
    background: #fce8ec;
    border: 1px solid #e46d6f;
    color: #e46d6f;
}
.training-ana-table .race-detail .icon-2nd {
    background: #e8f7ff;
    border: 1px solid #1a91e2;
    color: #1a91e2;
}
.training-ana-table .race-detail .icon-3rd {
    background: #fff3dd;
    border: 1px solid #ff9900;
    color: #ff9900;
}

.hidden-view.open .training-ana-table {
  text-align: center;
  width:100% !important;
}



/*　新聞ボタン　*/
.training-ana_button-1 {
    display: flex;
    justify-content:center;
    align-items: center;
    width: 110px;
    margin:0;
    padding: 0.2rem 0.5rem;
    border: 1px solid var(--global-gray-30);
    border-radius: 5px;
    background-color: #fff;
    color: var(--global-gray-50);
    font-size: 1em;
}
.training-ana_button-1::after {
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
    margin-left: 5px;
    border-top: 2px solid var(--global-gray-30);
    border-right: 2px solid var(--global-gray-30);
    content: '';
}


/* PCレイアウト用のメインコンテナとサイドバーの配置 (768px以上) */
@media (min-width: 768px) {
.training-ana-table {
    width:600px;
    }
.training-ana-table td .finished {
    display: flex;
    justify-content:flex-start;
    gap:10px;
}

.training-ana-table td.AIscore .rank {
    display: flex;
    justify-content: center !important;
    align-items: center;
    text-align: center;
    gap: 2px;
}

.training-ana-table td.AIscore {
    vertical-align: middle;
}

.training-ana-table td.AIscore p {
    font-size: var(--font-xs);
    color: var(--global-gray-50);
    line-height: 1.2;
    padding-bottom: 3px;
    font-weight: normal;
}
.training-ana-table td.AIscore img {
    margin: 0 !important;
}

.training-ana-table td.AIscore br {
    display: none;
}

.training-ana-table td.heavy-rating br {
    display: none;
}

.training-ana-table td.heavy-rating img {
    width: 25px;
    height: auto;
}
}


/*--------------------------------------
  WEB新聞 メモ　ポップアップ
--------------------------------------*/
.racecard-table_top td.memo {
    text-align: left;
    vertical-align: top;
    position: relative;
    max-width: 130px;
    padding-bottom: 1.8rem;
}

.racecard-table_top td.memo img {
    width: 30px;
    position: absolute;
    bottom: 10px;
    right: 5px;
}

.racecard-table_top td.memo p.before {
    color: var(--global-gray-30);
}

.racecard-table_top td div.icon {
    position: relative;
}

#popup {
  display: none; /* label でコントロールするので input は非表示に */
}

.popup-open {
  cursor: pointer; /* マウスオーバーでカーソルの形状を変えることで、クリックできる要素だとわかりやすいように */
  color: var(--global-gray-30);
}

.memo-popup-overlay {
  display: none; /* input にチェックが入るまでは非表示に */
}

#popup:checked ~ .memo-popup-overlay {
  display: block;
  z-index: 9999;
  background-color: #00000070;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

.memo-popup-window {
  width: 100%;
  padding: 0 0 50px;
  background-color: #ffffff;
  position: fixed;
  top: 0;
}
    
.memo-header {
    background: var(--global-gray-10);
    padding: 0.8rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.memo-header .close-button {
    color: var(--global-gray-50);
    cursor: pointer;
    }

.memo-header div.right {
    display: flex;
    justify-content: space-between;
    gap:10px;
}

.memo-popup-window .save-button {
    background: #323F4C;
    color: #FFFFFF;
    padding: 0.3rem 1rem;
    cursor: pointer;
    border-radius: 100px;
}

.memo-popup-window .delete-button {
    color: var(--global-gray-50);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 2;
    vertical-align:baseline;
}

.memo-popup-window .memo-textarea {
    width:100%;
    height:200px;
    resize:none;
    border: none;
    padding:1rem;
}

.memo-popup-window .name {
    display: flex;
    gap:5px;
    padding: 1rem 0.8rem 0;
    align-items: center;
}

.memo-popup-window .name img {
    width: 1.2rem !important;
    position: static !important;
}

.memo-popup-window .name p {
    color: #323F4C !important;
    }

.memo-popup-window .counter {
  text-align: right;
  font-size: 0.8rem;
  color: var(--global-gray-50);
  padding: 0 0.8rem;
}


/* 競走馬ページメモ　*/
.training-ana-table td.memo {
    height: 60px;
    max-height: 140px;
    padding-bottom: 1rem;
    text-align: left;
    vertical-align: top;
    position: relative;
}

.training-ana-table td.memo img {
    width: 30px;
    position: absolute;
    bottom: 10px;
    right: 5px;
}

.training-ana-table td.memo p.before {
    color: var(--global-gray-30);
}


/* 削除確認モーダルのスタイル */
.delete-confirm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.delete-confirm-overlay.show {
    display: flex;
    opacity: 1;
}

.delete-confirm-modal {
    background: white;
    border-radius: 16px;
    padding: 32px 24px 24px;
    max-width: 320px;
    width: 90%;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.delete-confirm-overlay.show .delete-confirm-modal {
    transform: scale(1);
}

.modal-close-button {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.modal-close-button:hover {
    background-color: #f5f5f5;
}

.delete-confirm-content {
    text-align: center;
    margin-bottom: 32px;
}

.delete-confirm-content h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
}

.delete-confirm-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.confirm-delete-button,
.cancel-delete-button {
    width: 100%;
    padding: 16px 24px;
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.confirm-delete-button {
    background-color: #ff4444;
    color: white;
    order: 1;
}

.confirm-delete-button:hover {
    background-color: #e63939;
    transform: translateY(-1px);
}

.cancel-delete-button {
    background-color: #f5f5f5;
    color: #666;
    order: 2;
}

.cancel-delete-button:hover {
    background-color: #e9e9e9;
}

/* レスポンシブ対応 */
@media (max-width: 480px) {
    .delete-confirm-modal {
        width: 95%;
        margin: 20px;
    }
}

/* 削除完了モーダルのスタイル */
.delete-success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.delete-success-overlay.show {
    display: flex;
    opacity: 1;
}

.delete-success-modal {
    background: white;
    border-radius: 16px;
    padding: 32px 24px 24px;
    max-width: 320px;
    width: 90%;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.delete-success-overlay.show .delete-success-modal {
    transform: scale(1);
}

.delete-success-content {
    text-align: center;
    margin-bottom: 24px;
}

.delete-success-content h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

.delete-success-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.success-ok-button {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #4CAF50;
    color: white;
}

.success-ok-button:hover {
    background-color: #45a049;
    transform: translateY(-1px);
}

/* 保存完了モーダルのスタイル */
.save-success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.save-success-overlay.show {
    display: flex;
    opacity: 1;
}

.save-success-modal {
    background: white;
    border-radius: 16px;
    padding: 32px 24px 24px;
    max-width: 320px;
    width: 90%;
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.save-success-overlay.show .save-success-modal {
    transform: scale(1);
}

.save-success-content {
    text-align: center;
    margin-bottom: 24px;
}

.save-success-content h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    line-height: 1.4;
}

.save-success-buttons {
    display: flex;
    justify-content: center;
    gap: 12px;
}


/* 削除確認モーダルのスタイル */
.delete-confirm-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        z-index: 10000;
        display: none;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
.delete-confirm-overlay.show {
        display: flex;
        opacity: 1;
    }
    
.delete-confirm-modal {
        background: white;
        border-radius: 16px;
        padding: 32px 24px 24px;
        max-width: 320px;
        width: 90%;
        position: relative;
        transform: scale(0.9);
        transition: transform 0.3s ease;
    }
    
.delete-confirm-overlay.show .delete-confirm-modal {
        transform: scale(1);
    }
    
.modal-close-button {
        position: absolute;
        top: 16px;
        right: 16px;
        background: none;
        border: none;
        font-size: 24px;
        color: #999;
        cursor: pointer;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: background-color 0.2s ease;
    }
    
.modal-close-button:hover {
        background-color: #f5f5f5;
    }
    
.delete-confirm-content {
        text-align: center;
        margin-bottom: 32px;
    }
    
.delete-confirm-content h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 500;
        color: #333;
        line-height: 1.4;
    }
    
.delete-confirm-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    
.confirm-delete-button,
.cancel-delete-button {
        width: 100%;
        padding: 16px 24px;
        border: none;
        border-radius: 50px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    
.confirm-delete-button {
        background-color: #ff4444;
        color: white;
        order: 1;
    }
    
.confirm-delete-button:hover {
        background-color: #e63939;
        transform: translateY(-1px);
    }

.cancel-delete-button {
        background-color: #f5f5f5;
        color: #666;
        order: 2;
    }
    
.cancel-delete-button:hover {
        background-color: #e9e9e9;
    }
    
/* レスポンシブ対応 */
@media (max-width: 480px) {
        .delete-confirm-modal {
            width: 95%;
            margin: 20px;
        }
    }


/*--------------------------------------
  WEB新聞 結果払い戻し
--------------------------------------*/

.race-ttl-belt {
    display: flex;
    align-items: center;
    background: var(--webpaper);
    color: var(--white);
    font-weight: bold;
    padding: 0.5rem 1rem;
    gap:5px;
}

.race-ttl-belt img {
    width: 1.1rem;
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(73deg) brightness(103%) contrast(103%);
}

.horse-payoff-table {
    width: 100%;
    border: 1px solid var(--global-gray-30);
}

.horse-payoff-table th.ticket-types {
  padding: 0.7rem 0;
  background: #eaffe7;
  color: var(--global-gray-50);
  border-right: 1px solid var(--global-gray-30);
  border-top: 1px solid var(--global-gray-30);
  font-weight: normal;
  font-size: 0.9rem;
  width: 20%;
  vertical-align: top;
}

.horse-payoff-table th.tan {
  background: #ffcbcb;
}
.horse-payoff-table th.fuku {
  background: #ffd9bd;
}
.horse-payoff-table th.waku {
  background: #fff6a8;
}
.horse-payoff-table th.uren {
  background: #e4feb3;
}
.horse-payoff-table th.utan {
  background: #c6fed0;
}
.horse-payoff-table th.wide {
  background: #c4fefa;
}
.horse-payoff-table th.trio {
  background: #d7e1fd;
}
.horse-payoff-table th.trif {
  background: #e5cbfc;
}


.horse-payoff-table td {
  padding: 0.7rem 0.5rem;
  border-top: 1px solid var(--global-gray-30);
  border-left: 1px solid var(--global-gray-30);
  font-size: 0.9rem;
  vertical-align: middle;
}

.horse-payoff-table tr.bg-color {
      background: #f7f7f7;
}

.horse-payoff-table td.waku {
  text-align: center;
}

.horse-payoff-table td.payoff {
  width: 30%;
  text-align: right;
}

.horse-payoff-table td.popular {
  width: 25%;
  text-align: center;
}

.horse-payoff-table td.border-dashed {
  border-top: 1px dashed var(--global-gray-30);
}

.horse-payoff-table span {
    font-size: 0.5rem !important;
    vertical-align: middle;
}

.horse-payoff-table td.corner {
    font-weight: bold;
}

.horse-payoff-table td.corner span.box {
    background: var(--webpaper);
    font-size: 0.9rem !important;
    color: #FFFFFF;
    padding: 0 0.2rem; 
}

.horse-payoff-table td.corner span.red {
    color: var(--red);
    font-size: 0.9rem !important;
}


/*-----------ラップタイム　*/

.horse-laptime-table {
    width: 100%;
    border: 1px solid var(--global-gray-30);
}

.horse-laptime-table th {
  padding: 0.5rem 0;
  background: #eaffe7;
  color: var(--global-gray-50);
  border-right: 1px solid var(--global-gray-30);
  border-top: 1px solid var(--global-gray-30);
  font-weight: normal;
  font-size: 0.9rem;
  width: 20%;
  vertical-align: top;
}

.horse-laptime-table td {
  padding: 0.7rem 0.5rem;
  border-top: 1px solid var(--global-gray-30);
  border-left: 1px solid var(--global-gray-30);
  font-size: 1rem;
  text-align: center;
  font-weight: bold;
}


/* アコーディオンメニュー */
.webpaper_button-2 {
    max-width: 100%;
    border: 1px solid var(--global-gray-30);
    border-radius: 5px;
}

.webpaper_button-2 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0.5rem 1rem;
    color: var(--global-gray-50);
    cursor: pointer;
}

.webpaper_button-2 summary::-webkit-details-marker {
    display: none;
}

.webpaper_button-2 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 10px;
    height: 10px;
    margin-left: 10px;
    border-bottom: 2px solid var(--global-gray-30);
    border-right: 2px solid var(--global-gray-30);
    content: '';
    transition: transform .3s;
}

.webpaper_button-2[open] summary::after {
    transform: rotate(225deg);
}

.webpaper_button-2 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 1rem 1rem 0.5rem;
    color: #000000;
    transition: transform .5s, opacity .5s;
    font-size: 0.9rem;
}

.webpaper_button-2[open] p {
    transform: none;
    opacity: 1;
}

/*-----------ボタン内テーブル　*/
.horse-payoff-table.border-none {
    border: none;
}


/* PCレイアウト用のメインコンテナとサイドバーの配置 (768px以上) */
@media (min-width: 768px) {
.horse-laptime-table {
    display: flex;
    justify-content: space-between;
    border-left: none;
}

.horse-laptime-table th {
    width: 100px;
    border-right: none;
    border-top: none;
    border-left: 1px solid var(--global-gray-30);
}

.horse-laptime-table td {
    width: 100px;
    border-top: 1px solid var(--global-gray-30);
    border-left: 1px solid var(--global-gray-30);
}

.webpaper_button-2 {
    width: 300px;
}
}

/*--------------------------------------
  WEB新聞 オッズ
--------------------------------------*/

/* 券種ナビ */
.webpaper-odds-nav {
	background-color: var(--webpaper);
	width: 100%;
}

.webpaper-odds-nav ul {
	display: flex;
	justify-content: space-around;
	flex-flow: wrap;
	margin: 0 auto;
    padding: 0.8rem 0.7rem 0.4rem;
	}
	
.webpaper-odds-nav__item {
	width: 23%;
	margin: 0 0 0.5rem;
	list-style: none;
	display: flex;
}

.webpaper-odds-nav__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 0.6rem 0.9rem;
	font-size: 1rem;
	background-color: #FFFFFF;
	text-decoration: none;
	border-radius: 100px;
	color: var(--global-gray-40);
	font-weight: bold;
	cursor: pointer;
}

.webpaper-odds-nav__link:hover {
	opacity: 0.8;
}

.odds-nav-checked {
	background-color: #FF4433 !important;
    color: #FFFFFF !important;
}


/* オッズ並べ替え */
.odds-sort-wrap {
	padding: 0.8rem 1rem;
}
.odds-sort-inner {
	display: flex;
	gap:10px;
	align-items: center;
}

.odds-sort-inner p {
	font-size: 0.8rem;
	color: var(--global-gray-50);
	}
	
.odds-sort-inner ul {
	display: flex;
	gap:3px;
}

.odds-sort-inner ul li {
	list-style-type: none;
	display: flex;
	align-items: center;
	gap:7px;
}
.odds-sort-inner ul li p {
	color: #1447e6;
	font-size: 0.9rem;
}
.odds-sort-inner ul li p:hover {
	opacity: 0.8;
}
.odds-sort-inner ul li.checked p {
	color: #000000;
	border-bottom: 2px solid #1447e6;
}

.odds-sort-inner .triangle-set {
    padding-top:3px;
}

.odds-sort-inner li .triangle-set .triangle_top{
    text-align: center;
    background-color: #1447e6;
    width: 9px;
    height: 7px;
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
    margin: 0 auto !important;
}

.odds-sort-inner li .triangle-set .triangle_bottom{
    text-align: center;
    background-color: #1447e6;
    width: 9px;
    height: 7px;
    clip-path: polygon(0 0,100% 0, 50% 100%);
    margin: 2px auto 0 !important;
}

.odds-sort-inner li.checked .triangle_top {
    text-align: center;
    background-color: var(--global-gray-30);
    width: 9px;
    height: 7px;
    clip-path: polygon(0 100%, 50% 0, 100% 100%);
    margin: 0 auto !important;
}
.odds-sort-inner li.checked .triangle_bottom{
    text-align: center;
    background-color: var(--global-gray-30);
    width: 9px;
    height: 7px;
    clip-path: polygon(0 0,100% 0, 50% 100%);
    margin: 2px auto 0 !important;
}

.odds-sort-inner li.checked .triangle-set .t-checked {
    background-color: #1447e6 !important;
}


/* 通常〜流しなどナビ */
.betting-nav {
	background-color: #FFFFFF;
	width: 100%;
}
.betting-nav ul {
	display: flex;
	margin: 0 auto;
    padding: 1rem 0.5rem 0.5rem;
	gap: 5px;
	}
	
.betting-nav ul li {
	margin: 0 0 0.5rem;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.2rem 0.6rem;
	font-size: 0.9rem;
	text-decoration: none;
	border-radius: 50px;
	color: var(--webpaper);
	font-weight: bold;
	border: 1px solid var(--webpaper);
}
	
.betting-nav ul li:hover {
	opacity: 0.8;
}

.betting-checked {
	background-color: var(--webpaper);
    color: #FFFFFF !important;
}

/* オッズ切り替えナビ */
.odds-tab-container {
    padding: 0.5rem 0.7rem 0.8rem;
}

.odds-tab-container ul {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    background: #FFFFFF;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid var(--webpaper);
}

.odds-tab-container ul li {
    flex: 1;
    padding: 0.7rem 0.5rem;
    text-align: center;
    cursor: pointer;
    position: relative;
    color: var(--global-gray-50);
    font-size: 0.9rem;
}

.odds-tab-container ul li+li{
    border-left: 1px solid var(--webpaper);
}

.odds-tab-container ul li.selected {
    color: #FFFFFF;
    background: var(--webpaper);
    border-right: none;
}

.odds-tab-container ul li:not(.selected):hover {
    background: var(--global-gray-10);
}

/* マルチ */
.odds-multi {
    padding: 0 0 1rem;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.odds-multi .mark-box {
    border: 1px solid var(--global-gray-30);
    border-radius: 5px;
	width: 1.5rem;
	height: 1.5rem;
    text-align: center;
	position: relative;
}

.odds-multi .mark-box img {
  filter: invert(90%) sepia(1%) saturate(30%) hue-rotate(105deg) brightness(92%) contrast(91%);
  width: 60%;
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right:0;
  margin:auto;
}

.odds-multi .checked {
    border-radius: 5px;
	width: 1.5rem;
	height: 1.5rem;
    text-align: center;
	position: relative;
	background: var(--webpaper);
}

.odds-multi .checked img {
  filter: invert(100%) sepia(0%) saturate(7489%) hue-rotate(123deg) brightness(97%) contrast(101%);
  width: 60%;
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right:0;
  margin:auto;
}

/* 3連複　馬指定 */
.odds-horse-pickup {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 8px;
    padding: 0.5rem 0.7rem 1rem;
}
.odds-horse-pickup .left-side {
    background: var(--webpaper);
    color: #FFFFFF;
    height: 3rem;
    padding: 0.2rem 0.5rem;
    text-align: center;
    border-radius: 5px;
    flex-grow: 1;
    max-width: 80px;
    position: relative;
    width: 30%;
}

.odds-horse-pickup .left-side p {
  position: absolute;
  top: 0.5rem;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  }
  
.odds-horse-pickup-trif {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 8px;
    padding: 0.5rem 0.7rem 1rem;
}

.odds-horse-pickup-trif .pickup-title {
    flex-grow: 1;
    background: var(--webpaper);
    color: #FFFFFF;
    height: 5.2rem;
    text-align: center;
    border-radius: 5px;
    max-width: 100px;
    width: 30%;
    padding: 0 1rem;
    position: relative;
    line-height: 1.2;
}

.odds-horse-pickup-trif .pickup-title p {
  position: absolute;
  top: 1.2rem;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  }

.odds-horse-pickup-trif .right-side {
    width: 100%;
    flex-grow: 1;
  }

.odds-horse-pickup-trif .right-side .top {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
    flex-grow: 1;
}

.odds-horse-pickup-trif .top .result {
    background: #FFFFFF;
    color: var(--webpaper);
    padding: 0.2rem 1rem;
    text-align: center;
    border-radius: 5px;
    border: 1px solid var(--webpaper);
    font-size: 0.9rem;
}

.odds-horse-pickup-trif .top .result_checked {
    background: var(--webpaper);
    color: #FFFFFF;
    padding: 0.2rem 1rem;
    text-align: center;
    border-radius: 5px;
    border: none;
    font-size: 0.9rem;
}

.odds-horse-selectbox {
    display: inline-flex;
    align-items: center;
    position: relative;
    flex-grow: 1;
    width: 100% !important;
}

.odds-horse-selectbox::after {
    position: absolute;
    right: 15px;
    width: 12px;
    height: 10px;
    background-color: var(--global-gray-50);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    content: '';
    pointer-events: none;
}

.odds-horse-selectbox select {
    width: 100%;
    appearance: none;
    height: 3rem;
    padding: 0.2rem 1rem;
    border: 1px solid var(--webpaper);
    border-radius: 5px;
    background-color: #FFFFFF;
    color: #000000;
    cursor: pointer;
}




/* PCレイアウト用のメインコンテナとサイドバーの配置 (768px以上) */
@media (min-width: 768px) {
.odds-tab-container {
    padding: 0.5rem 0 1rem;
}
}

/*--------------------------------------
  オッズ用　テーブル
--------------------------------------*/

.odds-table_wrap {
    width: 100%;
}

.odds-table {
    width: 100%;
}
.odds-table th, .odds-table td {
  border: 1px solid var(--global-gray-30);
}
.odds-table th {
  background: #eaffe7;
  color: var(--global-gray-50);
  border-right: 1px solid var(--global-gray-30);
  border-top: 1px solid var(--global-gray-30);
  font-size: 0.8rem;
  font-weight: normal;
  padding: 0.4rem 0.5rem;
  line-height: 1.2;
}
.odds-table th:last-of-type {
  border-right: 1px solid var(--global-gray-30);
}
.odds-table th.horse-number {
    width: 2.2rem;
}
.odds-table th.mark {
    width: 2.2rem;
}

.odds-table th.check-box {
	width: 3.2rem;
}

.odds-table td {
	text-align: center;
    font-size: 1rem;
    line-height: 1.4;
	padding: 0.5rem 0.3rem;
}

.odds-table td.horse-name {
	text-align: left;
}

.odds-table td.horse-name h3 {
	font-size: 1rem;
}

.odds-table td.odds-box {
	font-weight: bold;
}

.odds-table td .odds {
	text-align: right;
	font-weight: bold;
	font-size: 0.8rem;
}
.odds-table td .accent {
	color: var(--red);
	}
	
.odds-table td .mark-box {
    border: 1px solid var(--global-gray-30);
    border-radius: 8px;
	width: 2rem;
	height: 2rem;
    margin: 0 auto !important;
    text-align: center;
	position: relative;
}

.odds-table td .mark-box img {
  filter: invert(90%) sepia(1%) saturate(30%) hue-rotate(105deg) brightness(92%) contrast(91%);
  width: 80%;
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right:0;
  margin:auto;
}

.odds-table td .mark-box_checked {
    border-radius: 8px;
	width: 2rem;
	height: 2rem;
    margin: 0 auto !important;
    text-align: center;
	position: relative;
	background: var(--webpaper);
}

.odds-table td .mark-box_checked img {
  filter: invert(100%) sepia(0%) saturate(7489%) hue-rotate(123deg) brightness(97%) contrast(101%);
  width: 80%;
  position: absolute;
  top: 0;
  bottom: 0;
  left:0;
  right:0;
  margin:auto;
}

.odds-table td .jiku-box {
    border: 1px solid var(--global-gray-30);
	border-radius: 50%;
	width: 2rem;
	height: 2rem;
    margin: 0 auto !important;
    text-align: center;
	position: relative;
}

.odds-table td .jiku-box .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 35%;
    padding-top: 35%;
    border-radius: 100%;
    background-color: var(--global-gray-30);
    transform: translate(-50%, -50%);
}

.odds-table td .jiku-box_checked {
	border-radius: 50%;
	width: 2rem;
	height: 2rem;
    margin: 0 auto !important;
    text-align: center;
	position: relative;
	background: var(--webpaper);
}

.odds-table td .jiku-box_checked .circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 35%;
    padding-top: 35%;
    border-radius: 100%;
    background-color: #FFFFFF;
    transform: translate(-50%, -50%);
}

.odds-table td.popular {
    width: 2.2rem;
    background: #eaffe7;
}

.odds-table td.combi {
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: none;
    border-right: none;
    border-left: none;
    gap: 10px;
}

.odds-table td .horse-name-set p {
    text-align: center;
    font-size: 0.7rem;
    color: var(--global-gray-50);
}

.odds-table td .number-box {
    padding: 0.2rem 0.4rem;
    line-height: 1.2;
    border: 1px solid #000000;
    font-size: 0.9rem;
    border-radius: 3px;
}

.odds-table td .triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--global-gray-50);
  border-right: 0;
}

/* 下部　選択部分 */
.odds-table td.choice-title {
    background: #eaffe7;
    text-align: right;
    padding: 0.4rem 0.7rem;
    color: var(--blue);
}

.odds-table td.choice-title .in::before{
  content: "";
  display: inline-block;  
  background-image: url('https://wwwyuma.esys.jp/img/db/icon/check-solid-full.svg');
  filter: invert(43%) sepia(72%) saturate(3602%) hue-rotate(328deg) brightness(72%) contrast(184%);
  background-size: cover;
  background-repeat: no-repeat;
  width: 1.1rem;
  height: 1.1rem;
  vertical-align: -1px;
  margin-right: 1px;
}

.odds-table td.choice-title .zen::before{
  content: "";
  display: inline-block;  
  background-image: url('/public/img/db/icon/icon_grid.svg');
  filter: invert(43%) sepia(72%) saturate(3602%) hue-rotate(328deg) brightness(72%) contrast(184%);
  background-size: cover;
  background-repeat: no-repeat;
  width: 0.9rem;
  height: 0.9rem;
  margin-right: 5px;
}

.odds-table td.choice-title .xmark::before{
  content: "";
  display: inline-block;  
  background-image: url('/img/db/icon/icon_xmark.svg');
  filter: invert(43%) sepia(72%) saturate(3602%) hue-rotate(328deg) brightness(72%) contrast(184%);
  background-size: cover;
  background-repeat: no-repeat;
  width: 1.2rem;
  height: 1.2rem;
  vertical-align: -3px;
  margin-right: 1px;
}

/* PCレイアウト用のメインコンテナとサイドバーの配置 (768px以上) */
@media (min-width: 768px) {
.odds-table th.mark {
    width: 2.5rem;
}
.odds-table td {
	padding: 0.5rem 0.6rem;
}
.odds-table td.horse-name h3 {
	font-size: 1.2rem;
}
.odds-table td .odds {
	font-size: 0.9rem;
}
.odds-table td .accent {
	color: var(--red);
	}
	
.odds-table td .mark-box {
	width: 2.2rem;
	height: 2.2rem;
}

.odds-table td .mark-box_checked {
	width: 2.2rem;
	height: 2.2rem;
}
.odds-table td .jiku-box {
	width: 2.2rem;
	height: 2.2rem;
}
.odds-table td .jiku-box_checked {
	width: 2.2rem;
	height: 2.2rem;
}
}


/*--------------------------------------
  オッズ　選択結果
--------------------------------------*/
.select-ttype-title {
    background: var(--webpaper);
    text-align: center;
    padding: 0.3rem 0;
    color: #FFFFFF;
}
.select-ttype-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 1rem 0.7rem;
}
.select-ttype-wrap p.select-item {
    font-size: 0.9rem;
    color: var(--global-gray-50);
    margin-bottom: 10px;
}
.select-ttype-wrap .select-item::before{
  content: "";
  display: inline-block;  
  background-image: url('https://wwwyuma.esys.jp/img/db/icon/check-solid-full.svg');
  filter: invert(49%) sepia(0%) saturate(12%) hue-rotate(179deg) brightness(93%) contrast(80%);
  background-size: cover;
  background-repeat: no-repeat;
  width: 1.1rem;
  height: 1.1rem;
  vertical-align: -3px;
  margin-right: 1px;
}
.select-ttype-wrap .right-side .line {
    display: flex;
    margin-bottom: 8px;
}
.select-ttype-wrap .right-side .line-waku {
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--global-gray-30);
    font-size: 0.9rem;
    margin-right: 5px;
}
.select-ttype-wrap .right-side .line p {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
    border-right: 1px solid var(--global-gray-30);
    font-size: 1.1rem;
}

.select-ttype-wrap .No-item {
    padding: 0 1rem;
    height: 45px;
    line-height:40px;
    border: 1px solid var(--global-gray-30);
    font-size: 1.4rem;
}

.select-ttype-wrap .No-item span {
    font-size: 1.6rem;
    color: var(--attention);
}

/* オッズ　アコーディオン */
.accordion  {
  margin: 0 auto 20px;
}

.accordion_title {
  position: relative;
  display: block;
  list-style: none;
  width: 100%;
  cursor: pointer;
  background: #eaffe7;
  padding: 0.4em 1em 0.5rem;
  color: var(--webpaper);
  border: 2px solid var(--webpaper);
  border-radius: 6px;
  text-align: center;
}

.accordion_title p {
    font-size: 1rem;
}

summary.accordion_title::-webkit-details-marker {
  display:none;
}

.accordion_title p:before{
    content: "\025bc";
    font-size: 0.9rem;
    vertical-align: 1px;
    margin-right: 3px;
    color: var(--attention);
  }

.accordion::details-content {
  opacity: 0;
  block-size: 0;
  transition: .3s;
  transition-property: display, opacity, block-size, padding;
  transition-behavior: allow-discrete;
  line-height: 1.6em;
  background: #ffffff;
}

.accordion .accordion_content {
  padding: 1rem 0 0;
}

.accordion .accordion_content > *:first-of-type {
  margin-top: 0;
}

.accordion .accordion_content > *:last-of-type {
  margin-bottom: 0;
}

.accordion[open]::details-content {
  opacity: 1;
  block-size: auto;
  block-size: calc-size(auto, size);
}

.accordion[open] .accordion_content {
  padding: 1rem 0 0;
}




/*--------------------------------------
  オッズ用　人気順　テーブル
--------------------------------------*/
.odds-popular-table_wrap {
    padding: 0 0 1rem;
}

.odds-popular-table {
    width: 100%;
    margin-bottom: 20px;
}

.odds-popular-table th, .odds-popular-table td {
  border: 1px solid var(--global-gray-30);
}
.odds-popular-table th {
  border-right: 1px solid var(--global-gray-30);
  border-top: 1px solid var(--global-gray-30);
  font-size: 1rem;
  font-weight: normal;
  padding: 0.8rem 0;
  line-height: 1.2;
}
.odds-popular-table th.rank {
    background: #848c94;
    color: #FFFFFF;
    width: 12%;
    padding: 0.8rem 0;
    text-align: center;
}
.odds-popular-table th.section-number {
  border-right: 1px solid var(--global-gray-30);
  border-top: 1px solid var(--global-gray-30);
  font-size: 1rem;
  font-weight: normal;
  padding: 0.8rem 0;
  line-height: 1.2;
  width: calc(100% / 3);
}

.odds-popular-table th:last-of-type {
  border-right: 1px solid var(--global-gray-30);
}

.odds-popular-table td.horse-name {
    padding: 0.8rem 0.8rem;
    width: 100%;
}

.odds-popular-table tr {
    width: 100%;
    display: flex;
}

.odds-popular-table td.odds-separate {
    width: calc(100% / 3);
    }

.odds-popular-table .odds-set {
    display: flex;
    border-top: 1px solid var(--global-gray-30);
}
.odds-popular-table .odds-set:first-of-type {
    border-top: none;
}

.odds-popular-table .popular {
    border-right: 1px solid var(--global-gray-30);
    background: #eaffe7;
    text-align: center;
    font-size: 1rem;
    vertical-align: baseline;
	padding: 0.5rem 0.8rem;
}
.odds-popular-table .odds-box {
    width: 100%;
	font-weight: bold;
	text-align: right !important;
    font-size: 1rem;
    line-height: 1.4;
	padding: 0.8rem 0.6rem 0.8rem 0;
}
.odds-popular-table td .accent {
	color: var(--red);
	}

/* PCレイアウト用のメインコンテナとサイドバーの配置 (768px以上) */
@media (min-width: 768px) {
.odds-popular-table_wrap {
    padding: 0 0 1rem;
}
}

/*--------------------------------------
  WEB新聞　レースナビ
--------------------------------------*/
.section-title-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--main-black);
    font-weight: bold;
    font-family: 'Noto Sans JP', sans-serif;
    margin-bottom: 10px;
    border-left: 4px solid var(--webpaper);
    padding-left: 8px;
}

.section-title-box span {
    font-size: 0.7rem;
    font-weight:normal;
    color: var(--global-gray-50);
}

/* 展開予想図 */
.unfol-wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-radius: 5px;
    background-image: url(https://www.keiba.jp/img/webpaper/bg_arrow.png);
    background-repeat: no-repeat;
    background-size: 90%;
    background-position: center bottom;
}

.unfol-section {
    border-right: 1px solid var(--global-gray-30);
    width: 100%;
    min-height: 300px;
    max-height: 510px;
    text-align: center;
    position: relative;
}

.unfol-section:last-child {
    border-right: none;
}

.unfol-section-title {
    text-align: center;
    color: var(--global-gray-50);
    padding: 0 0 0.5rem;
    font-weight: bold;
    border-bottom: 2px solid var(--webpaper);
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.unfol-section .inside {
    left:0;
    right:0;
    margin:0 auto;
    width: 70px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.bracket-number-set {
    width: 50%;
    text-align: center;
    margin-bottom: 0.5rem;
}

.bracket-number-set .bracket-number {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    font-size: 1rem;
    margin: 0 auto;
    font-weight: bold;
}

.bracket-number-set p {
    font-size: 0.8rem;
}

/* 配当レンジ */
/* 
.dividend-range {
    width:100%;
    height: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 0 0.5rem 0.5rem;
}
.dividend-range p {
    width: 20px;
    writing-mode: vertical-rl;
    color: var(--global-gray-50);
    font-size: 1rem;
}

.dividend-range-list{
    width:100%;
    display:flex;
    flex-wrap: nowrap;
    padding:0;
    list-style:none;
    border-radius: 5px; 
}
.dividend-range-list li{
    width:100%;
    height: 2rem;
}
.dividend-range-list li.leftmost {
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
.dividend-range-list li.rightmost {
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}

.dividend-range-list li.none {
    background: var(--global-gray-20);
}
.dividend-range-list li.first {
    background:repeating-linear-gradient(-45deg,#80e339,#80e339 3px,#66cc33 0,#66cc33 7px);
}
.dividend-range-list li.second {
    background:repeating-linear-gradient(-45deg,#fbf833,#fbf833 3px,#f3f100 0,#f3f100 7px);
}
.dividend-range-list li.third {
    background:repeating-linear-gradient(-45deg,#fcdb30,#fcdb30 3px,#ffcd00 0,#ffcd00 7px);
}
.dividend-range-list li.fourth {
    background:repeating-linear-gradient(-45deg,#ffaa31,#ffaa31 3px,#ff9600 0,#ff9600 7px);
}
.dividend-range-list li.fifth {
    background:repeating-linear-gradient(-45deg,#ff8942,#ff8942 3px,#ff6f18 0,#ff6f18 7px);
} */

/* 配当レンジ */
.dividend-range {
    width:100%;
    height: 4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 0 0.5rem 0.5rem;
}
.dividend-range p {
    width: 20px;
    writing-mode: vertical-rl;
    color: var(--global-gray-50);
    font-size: 1rem;
}
.dividend-range-list li:first-child {
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
.dividend-range-list li:last-child {
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}

.dividend-range-list{
    width:100%;
    display:flex;
    flex-wrap: nowrap;
    padding:0;
    list-style:none;
    border-radius: 5px; 
}
.dividend-range-list li{
    width:100%;
    height: 2rem;
}

.dividend-range-list {
    width:100%;
    display:flex;
    flex-wrap: nowrap;
    padding:0;
    list-style:none;
    border-radius: 5px; 
    align-items: center;
  }
  
  .dividend-range-list li {
    flex: 1;
    border: 1px solid #ccc;
    background: #ddd; /* デフォルト（OFF:グレー） */
    width:100%;
    height: 2rem;
    
  }
  
  /* 各段階の色（ストライプ） */
  .dividend-range-list li:nth-child(1) { 
    --on-color: repeating-linear-gradient(-45deg, #80e339, #80e339 3px, #66cc33 0, #66cc33 7px);
  }
  .dividend-range-list li:nth-child(2) { 
    --on-color: repeating-linear-gradient(-45deg, #ffff66, #ffff66 3px, #ffcc00 0, #ffcc00 7px);
  }
  .dividend-range-list li:nth-child(3) { 
    --on-color: repeating-linear-gradient(-45deg, #ffd9a6, #ffd9a6 3px, #ff9933 0, #ff9933 7px);
  }
  .dividend-range-list li:nth-child(4) { 
    --on-color: repeating-linear-gradient(-45deg, #ffb366, #ffb366 3px, #ff6600 0, #ff6600 7px);
  }
  .dividend-range-list li:nth-child(5) { 
    --on-color: repeating-linear-gradient(-45deg, #ff6666, #ff6666 3px, #cc0000 0, #cc0000 7px);
  }
  
  /* memoryN → N個までONにする */
  .dividend-range.range1 li:nth-child(1),
  .dividend-range.range2 li:nth-child(2),
  .dividend-range.range3 li:nth-child(3),
  .dividend-range.range4 li:nth-child(4),
  .dividend-range.range5 li:nth-child(5) {
    background: var(--on-color);
  }





/* データ上位評価 */
.racenav_data-wrap {
	display: flex;
	justify-content: space-between;
	width: 100%;
	gap: 10px;
	flex-wrap: wrap;
	}

.racenav_data-box {
	width:48%; 
    margin: 0 0 0.5rem;
    background: #FFFFFF;
	border: 1px solid var(--global-gray-30);
}
.racenav_data-box .box-title {
    background: var(--webpaper);
    padding: 0.2rem 0;
    text-align: center;
    color: #FFF;
	font-size: 0.9rem;
}
.racenav_data-box .box-contents {
	display: flex;
	justify-content: space-around;
	gap:10px;
    padding: 1rem 1rem 0.2rem;
    margin: 0;
}

/* PCレイアウト用のメインコンテナとサイドバーの配置 (768px以上) */
@media (min-width: 768px) {
.racenav_data-box {
	width:49%; 
    margin: 0;
    background: #FFFFFF;
	border: 1px solid var(--global-gray-30);
}
.racenav_data-box .box-title {
	font-size: 1rem;
}
.racenav_data-box .box-contents {
    padding: 1rem 5.5rem 0.2rem;
}
}


/*--------------------------------------
  WEB新聞　コース解説
--------------------------------------*/
h3.course-overview {
    border-bottom: 3px solid var(--webpaper);
    padding: 0 0 5px 5px;
    margin: 1rem 0 0.7rem;
}

div.course-overview {
    border-bottom: 3px solid var(--webpaper);
    padding: 0 0 5px 5px;
    margin: 2rem 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-weight: bold;
    color: var(--global-gray-50);
}

.coursedata-img {
    width: 100%;
    text-align: center;
}

.coursedata-img img {
    width: 100%;
    margin: 0 auto;
}

div.course-overview span {
    font-size: 0.7rem;
    font-weight:normal;
}

.racecourse-table {
    width: 100%;
    border: 1px solid var(--global-gray-30);
}

.racecourse-table th {
  padding: 0.4rem 0.2rem;
  border-top: 1px solid var(--global-gray-30);
  font-weight: normal;
  font-size: 0.9rem;
}

.racecourse-table h3 {
    font-size: 1.1rem;
}

.racecourse-table td {
    padding: 0.5rem 0.5rem;
    border-top: 1px solid var(--global-gray-30);
    border-left: 1px solid var(--global-gray-30);
}
.racecourse-table td.upper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.racecourse-table td.lower {
    display: flex;
    text-align: left;
    align-items: center;
    gap: 6px;
}

.racecourse-table td .horse {
    display: flex;
    align-items: center;
    gap:3px;
    font-size: 0.73rem;
}

.racecourse-table .waku-box {
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}

/* もっと見るボタンのスタイル */
.more-best-button {
  background-color: #FFFFFF;
  color: var(--global-gray-50);
  border: 1px solid var(--global-gray-30);
  padding: 0.5rem 1rem;
  margin: 1rem auto 0;
  border-radius: 5px;
  cursor: pointer;
}

.more-best-button:hover {
  background-color: var(--global-gray-10);
}

/* PCレイアウト用のメインコンテナとサイドバーの配置 (768px以上) */
@media (min-width: 768px) {
.coursedata-img img {
    width: 60%;
    margin: 0 auto;
}

.racecourse-table td.upper {
    gap: 10px;
}
.racecourse-table td.lower {
    display: flex;
    text-align: left;
    align-items: center;
    gap: 6px;
}

.racecourse-table td .horse {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9rem;
}

.racecourse-table .waku-box {
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}
}


/*--------------------------------------
  WEB新聞 今日の傾向
--------------------------------------*/
.bl_raceNavi__trend{
    background-color: var(--webpaper);
    display: flex;
    justify-content: space-between;
    padding:15px 20px;
    align-items: center;
}

.raceNavi_placeWrap__trend {
    list-style: none;
    display: flex;
    gap:15px;
    font-weight: bold;
    color: var(--menuBar-100);
}

.raceNavi_placeWrap__trend li a{padding: 0 8px 5px; display: block;}
.raceNavi_placeWrap__trend li.active a{color: var(--white) !important; border-bottom: 4px solid var(--white);}


/*-----------今日の傾向 切り替えタブ　*/
.trend-tab-container {
    padding: 0 0 1rem;
}

.trend-tab-container ul {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    background: #FFFFFF;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #323f4c;
}

.trend-tab-container ul li {
    flex: 1;
    padding: 0.7rem 0.5rem;
    text-align: center;
    cursor: pointer;
    position: relative;
    color: #323f4c;
    font-size: 0.8rem;
}

.trend-tab-container ul li+li{
    border-left: 1px solid #323f4c;
}

.trend-tab-container ul li.selected {
    color: #FFFFFF;
    background: #323f4c;
    border-right: none;
}

.trend-tab-container ul li:not(.selected):hover {
    background: var(--global-gray-10);
}


/*-----------今日の傾向 テーブル　*/
.horse-trend-table {
    width: 100%;
    border: 1px solid var(--global-gray-30);
    table-layout:fixed;
}

.horse-trend-table th {
  padding: 0.5rem 0;
  background: #eaffe7;
  color: var(--global-gray-50);
  border-right: 1px solid var(--global-gray-30);
  border-top: 1px solid var(--global-gray-30);
  font-weight: normal;
  font-size: 0.9rem;
  vertical-align: top;
}

.horse-trend-table th.race {
  width: 12%;
}
.horse-trend-table th.pace {
  width: 18%;
}

.horse-trend-table td {
  padding: 0.7rem 0.3rem 0.7rem 0.5rem;
  border-top: 1px solid var(--global-gray-30);
  border-left: 1px solid var(--global-gray-30);
  font-size: 0.9rem;
  align-items: center;
}
.horse-trend-table td .flex {
  display: flex;
  gap:4px;
  }
  
.horse-trend-table td.center {
    text-align:center;
  }
.horse-trend-table td.right {
    text-align:right;
  }

.horse-trend-table td.turf {
    background: #b2ffd1;
    text-align: center;
    font-size: 0.9rem;
}

.horse-trend-table td.dirt {
    background: #fff2c6;
    text-align: center;
    font-size: 0.9rem;
}

.horse-trend-table td.hurdle {
    background: #ffe3fe;
    text-align: center;
    font-size: 0.9rem;
}

.horse-trend-table td a {
    text-decoration: underline;
}

td .horse-No {
    width: 16px;
    height: auto;
    text-align: center;
    font-size: 0.7rem;
    border-radius: 4px;
    line-height: 1.8;
}

/*-----------今日の傾向 脚質　*/
.horse-trend-table .high {
    color: var(--red);
}
.horse-trend-table .middle {
    color: var(--green);
}
.horse-trend-table .slow {
    color: var(--blue);
}

.horse-trend-table .bg-high {
    background: var(--red);
    color: #FFFFFF;
    padding: 0 0.1rem;
}
.horse-trend-table .bg-middle {
    background: var(--green);
    color: #FFFFFF;
    padding: 0 0.1rem;
}
.horse-trend-table .bg-slow {
    background: var(--blue);
    color: #FFFFFF;
    padding: 0 0.1rem;
}


/*-----------今日の傾向 血統　*/
.blood-Nea {
    background: #fffcd8;
}
.blood-Sts {
    background: #e4d8ff;
}
.blood-Man {
    background: #ffe5e5;
}
.blood-Nas {
    background: #e5ffd8;
}
.blood-Nat {
    background: #d8f6ff;
}
.blood-Roy {
    background: #fcd5ff;
}
.blood-Tou {
    background: #d8e0ff;
}
.blood-Ecl {
    background: #F3F3F3;
}

ul.pedigree-color {
    font-size: 0.9rem;
    list-style: none;
    padding: 0 0 1rem;
}

ul.pedigree-color li {
  display: flex;
  gap:5px;
  padding-left: 1.2em;
  margin-bottom: 5px;
}

ul.pedigree-color li div {
    width: 20px;
    height: 20px;
}


.horse-trend-table .volatile {
    background: var(--green);
    color: #FFFFFF;
    padding: 0 0.2rem;
    border-radius: 3px;
}
.horse-trend-table .very-volatile {
    background: var(--red);
    color: #FFFFFF;
    padding: 0 0.2rem;
    border-radius: 3px;
}
.horse-trend-table .favorite {
    background: var(--blue);
    color: #FFFFFF;
    padding: 0 0.2rem;
    border-radius: 3px;
}


/* PCレイアウト用のメインコンテナとサイドバーの配置 (768px以上) */
@media (min-width: 768px) {
.trend-tab-container {
    padding: 0.5rem 0 1rem;
}

.horse-trend-table th.race {
  padding: 0.5rem 0;
  background: #eaffe7;
  color: var(--global-gray-50);
  border-right: 1px solid var(--global-gray-30);
  border-top: 1px solid var(--global-gray-30);
  font-weight: normal;
  font-size: 1rem;
  width: 12%;
  vertical-align: top;
}

.horse-trend-table td {
  padding: 0.7rem 0.5rem;
  border-top: 1px solid var(--global-gray-30);
  border-left: 1px solid var(--global-gray-30);
  font-size: 1.1rem;
  align-items: center;
}
.horse-trend-table td .flex {
  display: flex;
  gap:4px;
  }

.horse-trend-table td.turf {
    text-align: center;
    font-size: 1rem;
}

.horse-trend-table td.dirt {
    text-align: center;
    font-size: 1rem;
}

.horse-trend-table td.hurdle{
    text-align: center;
    font-size: 1rem;
}

.horse-trend-table td a {
    text-decoration: underline;
}

 td .horse-No {
    width: 24px;
    height: auto;
    text-align: center;
    font-size: 0.8rem;
    border-radius: 4px;
}
}


/*--------------------------------------
  競走馬ページ　ヘッダー
--------------------------------------*/
.header_back-button {
    display: flex;
    justify-content:space-around;
    align-items: center;
    padding: 0.5em 1em 0.5em 2em;
    border-radius: 100px;
    background-color: var(--white);
    color: var(--site-color);
}

.header_back-button a {
    vertical-align: middle;
    line-height: 1;
}
.header_back-button a::before {
    display: inline-block;
    transform: rotate(225deg) translateY(-50%);
    width: .5em;
    height: .5em;
    border-top: 2px solid var(--site-color);
    border-right: 2px solid var(--site-color);
    content: '';
    position: absolute;
    top: 27px;
    left: 30px;
}

/*　 ぱんくずリスト　*/
.breadcrumb-nav {
    padding: 0.5rem 0.5rem 1rem;
}

.breadcrumb-001 {
    display: flex;
    gap: 0 10px;
    list-style: none;
    padding: 0;
    font-size: .8em;
}

.breadcrumb-001 li {
    display: flex;
    align-items: center;
}

.breadcrumb-001 li:not(:last-child)::after {
    display: inline-block;
    transform: rotate(45deg);
    width: .5em;
    height: .5em;
    margin-left: 5px;
    border-top: 1px solid #333333;
    border-right: 1px solid #333333;
    content: '';
}

.breadcrumb-001 a {
    color: var(--global-gray-50);
    text-decoration: none;
}

/* PCレイアウト用のメインコンテナとサイドバーの配置 (768px以上) */
@media (min-width: 768px) {
.header_back-button a::before {
    top: 20px;
}
}

/*--------------------------------------
  競走馬ページ ナビ
--------------------------------------*/

ul.horse-data-nav {
    display:flex;
    justify-content: space-around;
    list-style:none;
    gap:5px;
    padding: 1rem 0.5rem;
    width: 100%;
}

ul.horse-data-nav li .circle {
    width: 65px;
    height: 65px;
    max-width: 65px;
    max-height: 65px;
    background: var(--global-gray-10);
    border-radius: 50%;
    position: relative;
    margin-bottom: 5px;
}

ul.horse-data-nav li .check {
    width: 65px;
    height: 65px;
    max-width: 65px;
    max-height: 65px;
    background: #323F4C !important;
    border-radius: 50%;
    position: relative;
}

ul.horse-data-nav li {
    font-size: 0.7rem;
    text-align: center;
    color: #323F4C;   
}

ul.horse-data-nav .others img {
    width: 40px;
    position: absolute;	/*left,rightが0の時左右の中央揃えになります*/
	left:20%;
    top:26%;
}

ul.horse-data-nav .paper img {
    width: 26px;
    position: absolute;	/*left,rightが0の時左右の中央揃えになります*/
	left:29%;
    top:26%;
}

ul.horse-data-nav .memo img {
    width: 32px;
    position: absolute;	/*left,rightが0の時左右の中央揃えになります*/
	left:30%;
    top:26%;
}

ul.horse-data-nav .memo .memo-check img {
    width: 32px;
    position: absolute;	/*left,rightが0の時左右の中央揃えになります*/
	left:30%;
    top:26%;
}

ul.horse-data-nav .check .memo-check img {
    display:none;
    }

/* PCレイアウト用のメインコンテナとサイドバーの配置 (768px以上) */
@media (min-width: 768px) {
ul.horse-data-nav {
    display:flex;
    justify-content: center;
    gap:20px;
    padding: 2rem 0 1.5rem;
}
ul.horse-data-nav li {
    font-size: 0.9rem;
}

ul.horse-data-nav li .circle {
    width: 90px;
    height: 90px;
    max-width: 90px;
    max-height: 90px;
}
ul.horse-data-nav li .check {
    width: 90px;
    height: 90px;
    max-width: 90px;
    max-height: 90px;
}
ul.horse-data-nav .others img {
    width: 60px;
    position: absolute;	/*left,rightが0の時左右の中央揃えになります*/
	left:17%;
    top:22%;
}
ul.horse-data-nav .paper img {
    width: 40px;
    position: absolute;	/*left,rightが0の時左右の中央揃えになります*/
	left:25%;
    top:20%;
}
ul.horse-data-nav .memo img {
    width: 48px;
    position: absolute;	/*left,rightが0の時左右の中央揃えになります*/
	left:25%;
    top:22%;
}
ul.horse-data-nav .memo .memo-check img {
    width: 48px;
    position: absolute;	/*left,rightが0の時左右の中央揃えになります*/
	left:25%;
    top:22%;
}
}


/*--------------------------------------
  競走馬ページ カルーセル
--------------------------------------*/

.horse-data-wrap {
    display: flex;
    justify-content: space-between;
    gap:10px;
}

.prev-horse-btn {
    background: #323f4c;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    padding: 1rem 0;
    text-align: center;
    font-size: var(--font-xs);
    color: #FFFFFF;
    box-sizing: border-box;
    min-width: 36px;
    height: 115px;
    }
    
.prev-horse-btn .bracket-number {
    width: 25px;
    border-radius: 5px;
    font-size: 1rem;
    margin: 0 auto;
    font-weight: bold;
}

.prev-horse-btn .arrow {
  position: relative;
  display: inline-block;
  width: 11px;
  height: 40px;
}

.prev-horse-btn .arrow::before,
.prev-horse-btn .arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 15px;
  height: 3px;
  border-radius: 9999px;
  background-color: #FFFFFF;
  transform-origin: 2px 50%;
}

.prev-horse-btn .arrow::before {
  transform: rotate(45deg);
}

.prev-horse-btn .arrow::after {
  transform: rotate(-45deg);
}

.next-horse-btn {
    background: #323f4c;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    padding: 1rem 0;
    text-align: center;
    font-size: var(--font-xs);
    color: #FFFFFF;
    box-sizing: border-box;
    min-width: 36px;
    height: 115px;
    }
    
.next-horse-btn .bracket-number {
    width: 25px;
    border-radius: 5px;
    font-size: 1rem;
    margin: 0 auto;
    font-weight: bold;
}

.next-horse-btn .arrow {
  position: relative;
  display: inline-block;
  width: 11px;
  height: 40px;
}

.next-horse-btn .arrow::before,
.next-horse-btn .arrow::after {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  width: 15px;
  height: 3px;
  border-radius: 9999px;
  background-color: #FFFFFF;
  transform-origin: calc(100% - 1px) 50%;
}

.next-horse-btn .arrow::before {
  transform: rotate(45deg);
}

.next-horse-btn .arrow::after {
  transform: rotate(-45deg);
}
    
.horse-data-banner {
    background-color: var(--global-gray-10);
    padding: 10px;
    box-sizing: border-box;
    border-radius: 8px;
    width: 100%;
    height: 115px;
    }
    
.horse-data-banner .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
    }
    
.horse-data-banner .left {
    display: flex;
    align-items: center;
    gap:10px;
}
    
.horse-data-banner .horse-number {
    width: 30px;
    height: 90px;
    border-radius: 5px;
    text-align: center;
    position: relative;	/*親要素指定*/
}

.horse-data-banner .horse-number  p{
	position: absolute;	/*left,rightが0の時左右の中央揃えになります*/
	left:0;
	right:0;
    top:30px;
    font-weight: bold;
    } 

.horse-data-banner .horseinfo .name {
    display: flex;
    align-items: center;
    gap:5px;
    font-size: 1rem;
}

.horse-data-banner .horseinfo .name img {
    width: 30px;
}

.horse-data-banner .horseinfo p {
    font-size: 0.9rem;
    color: var(--global-gray-50);
}

.horse-data-banner .horseinfo a {
    color: var(--blue);
}

.horse-data-banner .favorite {
  width: 40px;
  height: 40px;
  background: #FFFFFF;
  border-radius: 50%;
  border: 1px solid var(--global-gray-30);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  cursor: pointer;
}

.horse-data-banner .favorite:hover{
  opacity: 0.7;
}

.horse-data-banner .favorite:active {
	transform: translateY(1px);
  }

.horse-data-banner .favorite img{
  width: 20px;
  height: 20px;
}

.horse-data-banner .ai_btn {
	display: flex;
    justify-content:space-between;
    align-items: center;
	text-align: center;
	text-decoration: none;
	width: 100%;
	margin: auto;
	padding: 0.5rem 1rem;
    background-image: -webkit-linear-gradient(left, #48f2b3, #00b9ca 36%, #0054ca);
    background-image: -o-linear-gradient(left, #48f2b3, #00b9ca 36%, #0054ca);
    background-image: linear-gradient(to right, #48f2b3, #00b9ca 36%, #0054ca);
	color: #FFFFFF;
	position: relative;
    font-size: 1rem;
    border-radius: 8px;
    line-height: 1.3;
}

.horse-data-banner .ai_btn img {
    width: 40px;
    height: auto;
}

.horse-data-banner .ai_btn::after {
	content: '';
	width: 14px;
	height: 14px;
	border-top: 3px solid #FFFFFF;
	border-right: 3px solid #FFFFFF;
	transform: rotate(45deg);
}

/* PCレイアウト用のメインコンテナとサイドバーの配置 (768px以上) */
@media (min-width: 768px) {
.prev-horse-btn {
    width: 80px;
    height: 115px;
    border-radius: 5px;
    }
.next-horse-btn {
    width: 80px;
    height: 115px;
    border-radius: 5px;
    }

.horse-data-banner {
    background-color: var(--global-gray-10);
    padding: 10px 20px;
    box-sizing: border-box;
    border-radius: 8px;
    width: 500px;
    height: 115px;
    }
    
.horse-data-banner .horseinfo .name {
    font-size: 1.4rem;
}
}

/*--------------------------------------
  競走馬ページ 調教分析とコメント　切り替えタブ
--------------------------------------*/
/* ===== Design 2: Modern ===== */
.racehorse-tab-container {
    padding: 0.5rem 0.7rem 1rem;
}

.racehorse-tab-container ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    background: #FFFFFF;
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid #323f4c;
}

.racehorse-tab-container ul li {
    flex: 1;
    padding: 0.7rem 0.5rem;
    text-align: center;
    cursor: pointer;
    position: relative;
    color: #323f4c;
    font-size: 0.9rem;
}

.racehorse-tab-container ul li+li{
    border-left: 1px solid #323f4c;
}

.racehorse-tab-container ul li.selected {
    color: #FFFFFF;
    background: #323f4c;
    border-right: none;
}

.racehorse-tab-container ul li:not(.selected):hover {
    background: var(--global-gray-10);
}

/* PCレイアウト用のメインコンテナとサイドバーの配置 (768px以上) */
@media (min-width: 768px) {
.racehorse-tab-container {
    padding: 0.5rem 0 1rem;
}
}

/*--------------------------------------
  競走馬ページ 血統　生産者
--------------------------------------*/
.horse-basicinfo-wrap {
    padding: 0 0.7rem 1rem;
}

.horse-specifics-table {
    background: var(--global-gray-10);
    border-radius: 8px;
    display: flex;
    justify-content: space-around;
    padding: 0.5rem 0.5rem;
    gap:5px;
    margin-bottom:20px;
}

.horse-specifics-table th {
    padding: 0.3rem 0.3rem 0.3rem 0;
    text-align: left;
    font-weight: normal;
    font-size: 0.7rem;
}

.horse-specifics-table td {
    padding: 0.3rem 0.3rem 0.3rem;
    text-align: left;
    font-size: 0.7rem;
    max-width: 10rem;
}

.horse-specifics-table th.sire {
    color: var(--sire) !important;
}
.horse-specifics-table th.dam {
    color: var(--dam);
}
.horse-specifics-table th.damSire {
    color: var(--damSire) !important;
}
.horse-specifics-table th.people {
    color: var(--global-gray-50) !important;
}

.horse-specifics-table a {
    color: var(--blue);
}

/* 所属ラベル */
.label_division {
  font-size: 0.65rem;
  font-weight: normal;
  line-height: 1;
  display: inline-block;
  padding: 2px 6px 3px;
  border-radius: 100px;
  margin-left: 5px;
}

.miho {
  color: var(--miho);
  border: 1px solid var(--miho);
}
.ritto {
  color: var(--ritto);
  border: 1px solid var(--ritto);
}

/* ボタン */
.basicinfo-button-box {
    padding: 1rem 3rem 2rem;
}
.pedigree-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin:0 auto;
    padding: 0.5rem 1rem;
    border: 1px solid var(--global-gray-50);
    border-radius: 5px;
    background-color: #fff;
    color: var(--global-gray-50);
    font-size: 0.9rem;
    position: relative;
}
.pedigree-button::after {
    transform: rotate(45deg);
    width: 10px;
    height: 10px;
    margin-left: 10px;
    border-top: 1px solid var(--global-gray-50);
    border-right: 1px solid var(--global-gray-50);
    content: '';
    position: absolute;
    right: 15px;
    top:40%;
}

/* 成績 */
.eval-results {
    border: 3px solid var(--webpaper);
    border-radius: 8px;
    padding: 10px 0;
    font-weight: bold;
    text-align: center;
    font-size: var(--font-lg);
}

.horse-results-box {
    padding: 10px 0 10px;
}

.horse-results-box h4 {
    font-size: 1.1rem;
    padding-bottom: 5px;
    font-weight: normal;
}

.horse-results-box-2rows {
    display: flex;
    justify-content: space-between;
    gap:20px;
}

.horse-results-box-2rows div {
    width: 100%;
}

.horse-results-table {
    width: 100%;
    border: 1px solid var(--global-gray-30);
}
.horse-results-table th {
  padding: 0.5rem 0.1rem;
  background: #eaffe7;
  color: var(--global-gray-50);
  border-right: 1px solid var(--global-gray-30);
  border-top: 1px solid var(--global-gray-30);
  font-weight: normal;
  font-size: 0.9rem;
  width: 42%;
}
.horse-results-table th:last-of-type {
  border-right: 1px solid var(--global-gray-30);
}

.horse-results-table td {
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--global-gray-30);
  width: 100%;
  text-align: center;
}

/* 枠番 色*/
.horse-results-table .hn1 {
    background-color: #FFFFFF;
    color: #000000;
}
.horse-results-table .hn2 {
    background-color: #000000;
    color: #FFFFFF;
}
.horse-results-table .hn3 {
    background-color: #FF2B2B;
    color: #FFFFFF;
}
.horse-results-table .hn4 {
    background-color: #2B66FF;
    color: #FFFFFF;
}
.horse-results-table .hn5 {
    background-color: #FFFF2B;
    color: #000000;
}
.horse-results-table .hn6 {
    background-color: #2BFF2B;
    color: #000000;
}
.horse-results-table .hn7 {
    background-color: #FF8C00;
    color: #FFFFFF;
}
.horse-results-table .hn8 {
    background-color: #FF66CC;
    color: #FFFFFF;
}

/* PCレイアウト用のメインコンテナとサイドバーの配置 (768px以上) */
@media (min-width: 768px) {
.horse-basicinfo-wrap {
    padding: 0 0 1rem;
}

.horse-specifics-table {
    background: var(--global-gray-10);
    border-radius: 8px;
    display: flex;
    justify-content: center;
    padding: 0.5rem 0;
    gap:40px;
    width: 100%;
    margin: 0 auto 20px;
}
.horse-specifics-table th {
    font-size: 1rem;
}

.horse-specifics-table td {
    font-size: 1rem;
    max-width: 20rem;
}

.basicinfo-button-box {
    padding: 1rem 3rem 2rem;
}
.pedigree-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 300px;
    margin:0 auto;
    padding: 0.5rem 1rem;
    border: 1px solid var(--global-gray-50);
    border-radius: 5px;
    background-color: #fff;
    color: var(--global-gray-50);
    font-size: 0.9rem;
    position: relative;
}
}

/*--------------------------------------
  競走馬ページ 過去走
--------------------------------------*/
.horse-past-table {
    width: 100%;
    border-right: 1px solid var(--global-gray-30);
    border-left: 1px solid var(--global-gray-30);
    border-bottom: 1px solid var(--global-gray-30); 
}
.horse-past-table th {
  background: #eaffe7;
  color: var(--global-gray-50);
  border-right: 1px solid var(--global-gray-30);
  border-top: 1px solid var(--global-gray-30);
  font-weight: normal;
  text-align: center;
  width: 36px;
  position: relative;
}
.horse-past-table th:last-of-type {
  border-right: 1px solid var(--global-gray-30);
}

.horse-past-table th p {
	position: absolute;
	top:50%;
	left:50%;
	display:inline;
	transform:translate(-50%, -50%);
    writing-mode: vertical-rl;
}

.horse-past-table td {
  border-top: 1px solid var(--global-gray-30);
  }

.horse-past-table td.race_detail {
  display: flex;
  gap:10px;
  padding: 1rem 0.2rem 1rem 0.5rem;
  width: 100%;
  text-align: left;
}

.horse-past-table .upper-row {
    display: flex;
    gap:10px;
    align-items: center;
}

.horse-past-table .rank {
    border: 2px solid var(--global-gray-30);
    padding: 0.1rem 0.8rem; 
    font-size: 1.2rem;
    font-weight: bold;
    vertical-align: middle;
    border-radius: 5px;
    background: #FFFFFF;
}
.horse-past-table .day {
    font-size: 0.85rem;
    line-height: 1.4;
}

.horse-past-table .race-name {
    display: flex;
    align-items: center;
    padding: 5px 0;
}
.horse-past-table .race-name .name {
    font-size: 1.2rem;
    line-height: 1.2;
}

.horse-past-table .lower-row {
	display: flex;
	gap: 10px;
	font-size: 1rem;
}

.horse-past-table .right p {
    font-size: 0.9rem;
}

.horse-past-table .lap-box {
	display: flex;
	align-items: center;
	gap: 5px;
}
.horse-past-table .lap {
    padding: 0.1rem 0.2rem;
    max-width:80px; 
    background: #FFFFFF;
    text-align: center;
    font-size: 0.8rem;
    margin: 3px 0;
	border: 1px solid var(--global-gray-30);
}

/*　順位背景色　*/
.bg-rank1 {
    background: #fce8ec;
}
.bg-rank2 {
    background: #e8f7ff;
}
.bg-rank3 {
    background: #fff3dd;
}


/*--------------------------------------
  競走馬ページ メモ
--------------------------------------*/
.favorite-horse-title {
    display: flex;
    align-items: center;
    gap:5px;
    padding-bottom: 5px;
}

.favorite-horse-title img {
    width: 20px;
}

.favorite-horse-memo {
    padding: 0.5rem 0.5rem 1rem;
    border: 1px solid #000000;
    margin-bottom: 2rem;
    position: relative;
    height: 100px;
    max-height: 150px;
}

.favorite-horse-memo p.before {
    color: var(--global-gray-30);
}

.favorite-horse-memo img {
    width: 30px;
    position: absolute;
    bottom: 10px;
    right: 5px;
}


/* -- もっと見るボタン -- */
.more-button::before{
    content: "もっと見る";
}

.more-button-close::before {
    content: "閉じる" !important;
}

.button-box {
	width: 100%;
    padding: 0 0 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}
.more-button {
    display: flex;
    justify-content:space-around;
    align-items: center;
    padding: 0.8rem 3rem;
    max-width: 200px;
    border-radius: 100px;
    background-color: var(--white);
    color: var(--global-gray-50);
    border: 1px solid var(--global-gray-30);
    position: relative;
    }

.more-button span {
    vertical-align: middle;
    line-height: 1;
}
.more-button span::before {
    display: inline-block;
    transform: rotate(135deg) translateY(-50%);
    width: .6em;
    height: .6em;
    border-top: 2px solid var(--global-gray-30);
    border-right: 2px solid var(--global-gray-30);
    content: '';
    position: absolute;
    top: 28%;
    right: 20px;
}

.more-button-close {
    display: flex;
    justify-content:space-around;
    align-items: center;
    padding: 0.8rem 3rem;
    max-width: 200px;
    border-radius: 100px;
    background-color: var(--white);
    color: var(--global-gray-50);
    border: 1px solid var(--global-gray-30);
    position: relative;
    }

.more-button-close span {
    vertical-align: middle;
    line-height: 1;
}
.more-button-close span::before {
    display: inline-block;
    transform: rotate(315deg) translateY(-50%);
    width: .6em;
    height: .6em;
    border-top: 2px solid var(--global-gray-30);
    border-right: 2px solid var(--global-gray-30);
    content: '';
    position: absolute;
    top: 54%;
    right: 15px;
}



/* PCレイアウト用のメインコンテナとサイドバーの配置 (768px以上) */
@media (min-width: 768px) {
.horse-past-table th {
  width: 50px;
}
.horse-past-table .race-name .name {
    font-size: 1.4rem;
    line-height: 1.2;
}
.horse-past-table td.race_detail {
	gap:30px;
    padding: 1rem 1rem 1rem 1rem;
}
}






/* =============================
 * 予想テーブル: 注意文バナー
 * ============================= */
.notice-head { padding: 0; background: transparent; border: none; }

.notice {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff3cd, #ffe08a);
  color: #3a3a3a;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.notice--important { position: relative; }
.notice--important::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #f5c518;
  box-shadow: 0 0 0 4px rgba(245,197,24,0.25);
}

.notice__label {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.04em;
  color: #222;
  background: #ffd54f;
  padding: 2px 8px;
  border-radius: 6px;
}

.notice__text { font-weight: 700; font-size: 1rem;}

@media (max-width: 767px) {
  .notice { padding: 10px 12px; border-radius: 8px; }
  .notice__label { font-size: 1rem; }
}


.ai-time-divider {
    
    border-bottom: 1px solid var(--global-gray-30);
}


/* =============================
 * トップ的中スライダー追記
 * ============================= */
 .swiper.webHitswiper{
    padding-bottom: 10px;
}

.webpaper-bnr__ttl {
    font-size: 1rem;
    font-weight: normal;
    padding: 5px 8px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(90deg,rgba(32, 40, 29, 1) 0%, rgba(73, 92, 67, 1) 100%);
    color: var(--white);
}

.webpaper-bnr{
    border-radius:14px;
    padding: 6px;
    background: linear-gradient(0deg,rgba(0, 204, 187, 1) 0%, rgba(105, 235, 0, 1) 100%);
    box-shadow: 0px 0px 15px 0px rgba(166,255,97,0.35);
}

.webpaper-bnr__inner{
    background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.webpaper-bnr .webpaper-banner__body{
    padding: 1rem 0.7rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

@media (min-width: 767px) {
    .webHitswiper .swiper-slide{
        width: 300px;
    }
  }