/*
* Yuma CSS - モバイルファースト
* 基本スタイルはモバイル向けに記述し、PC向けはメディアクエリでオーバーライド
*/

.salon_raceList__wrap{
  display: flex;
  flex-direction: column;
  gap:10px;
  background-color: var(--global-gray-10);
  padding: 10px;
  width: 100%;
}

a.salon_raceList__btn{
  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);
    width: 100%;
    border-radius: 6px;
    border:1px solid var(--global-gray-20);
    position:relative;
    cursor: pointer;
}

a.salon_raceList__btn: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);
}

.salon_raceList__count{
  display: flex;
  gap:2px;
  align-items: center;
  justify-content: center;
  background-color: var(--salon);
  color: var(--white);
  font-weight: bold;
  font-size: 0.7rem;
  line-height: 1;
  padding: 8px 5px;
  border-radius: 3px;
  text-align: center;
  line-height: 1.5;
  width: 3.5rem;
  min-width: 3.5rem;
}
.salon_raceList__count:has(.kautei) {
  background-color: rgb(255, 0, 0); /* 例: 背景色を黄色に */
}

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


.salon_raceList__count .count{
    font-family: var(--roboto);
    font-size: 1.4rem;
}

a.salon_raceList__btn .name{color: var(--main-black);}

/* TOP的中スライダー */
/*
.salonSlider_wrap{
  background-color: var(--global-gray-10);
}
*/
.bl_commonSlider_wrap .salon_hitSlide{
  background-color: var(--white);
  border-radius: 5px;
  box-shadow: 2px 2px 5px 0px #e5e5e5;
  display: flex;
  flex-direction: column;
  gap:8px;
}
.salon_hitSlide__ttl{
  background-color: var(--salon);
  color: var(--white);
  font-size:1rem;
  font-weight: normal;
  padding: 5px 8px;
  border-radius: 5px 5px 0 0;
}
.salon_hitSlide__inner{
  padding:0 8px 8px;
}
.salon_hitSlide__nameWrap{
  display: flex;
  justify-content: space-between;
}
.salon_hitSlide__name__detail,.salon_hitSlide__race__horseWrap{
  display: flex;
  gap:8px;
}
.salon_hitSlide__raceWrap{
  display: flex;
  flex-direction: column;
  gap:5px;
}
.salon_hitSlide__resultWrap{
  display: flex;
  gap:8px;
  align-items: center;
}
.salon_hitSlide__result__num{
  font-size: 1.2rem;
  font-weight: bold;
}
.salon_hitSlide__result__num .kinds{
  font-size: 0.8rem;
  font-weight: normal;
}
.salon_hitSlide__result__num .num{
  font-family: var(--roboto);
  font-size: 2rem;
}

.salon_hitSlide__name__nameTxt .copy{font-size: 0.8rem;}
.salon_hitSlide__name__nameTxt .name{font-size: 1rem; font-weight: bold; display: flex; align-items: center;}

.salon_hitSlide__race__horseWrap .rank{
  color: var(--salon);
  font-weight: bold;
  font-size: 1.2rem;
}
.salon_hitSlide__race__horseWrap .name{
  font-weight: bold;
  font-size: 1.2rem;
  line-height: 1.1;
}

.salon_hitSlide__race__horseWrap .ratio{
  font-size: 0.8rem;
  font-weight: normal;
}

.salon_featured-race__tipsterList{
  display: flex;
  flex-direction: column;
  gap:5px;
  margin-top: 15px;
}
.tipsterList__ttl{
  font-size: 1rem;
  color: var(--white);
  font-weight: normal;
}
.tipsterList__ttl .num{
  font-family: var(--roboto);
  font-weight: bold;
  font-size: 1.4em;
}
.bl_commonSlider-scroll_wrap.tipsterList .swiper-scrollbar_tipsterSwiper{
  height: 4px;
  background: var(--global-gray-80);
    border-radius: 100px;
    margin-top: 10px;
    width: calc(100% - 20px);
}
.bl_commonSlider-scroll_wrap.tipsterList .swiper-scrollbar-drag{
  background: var(--global-gray-50);
  border-radius: 100px;
}

.bl_commonSlider-scroll_wrap .swiper-scrollbar_otherTipsterSwiper{
  height: 4px;
  background: var(--global-gray-20);
    border-radius: 100px;
    margin-top: 10px;
    width: 100%;
}
.bl_commonSlider-scroll_wrap .swiper-scrollbar-drag{
  background: var(--global-gray-30);
  border-radius: 100px;
}

.salon_otherTipsterSwiper{
  padding: 0 15px;
}

.tipsterList-slide{
  display: block;
  width: auto;
  cursor: pointer;
}

.tipsterList-slide .icoName_name{
  color: var(--white);
}

.featured-guess{
  background-color: var(--menuBar-100);
  padding: 20px 10px;
}

.featured-guessList{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap:10px;
}
.featured-guessCard{
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  border-radius: 5px;
  background-color: var(--white);
}

.featured-guessCard__btn{
  font-size: 1rem;
  background-color: var(--salon);
  width: calc(1rem + 14px);
  color: var(--white);
  font-weight: bold;
  line-height: 1.1;
  padding: 8px 8px 8px 6px;
  border-radius: 0 5px 5px 0;
  display: flex;
  align-items: center;
}
.featured-guessCard__btn .el_iconArrow__next_white{
  margin-top: 3px;
}
.el_iconArrow__next_white {
  display: inline-block;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: var(--white);
  position: relative;
  box-sizing: border-box;
}
.el_iconArrow__next_white::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(50% - 1px);
  width: 0.4em;
  height: 0.4em;
  border-top: 2px solid var(--salon);
  border-right: 2px solid var(--salon);
  transform: translate(-50%, -50%) rotate(45deg);
  box-sizing: border-box;
}

.featured-guessCard__detail{
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap:5px;
  flex-grow: 1;
}

.featured-guessCard__detail__nameWrap{
  display: flex;
  gap:5px;
}

.featured-guessCard__detail__nameWrap .icoName_ico{
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
}

.featured-guessCard__detail__nameTxt{
  display: flex;
  flex-direction: column;
  width: 100%;
}
.featured-guessCard__detail__nameTxt .copy{
  border-bottom: 1px solid var(--main-black);
  width: 100%;
  display: block;
  font-size: 1rem;
}
.featured-guessCard__detail__nameTxt .division{
  font-size: 0.8rem;
  margin-top: 3px;
}
.featured-guessCard__detail__nameTxt .name{
  color: var(--main-blac);
  font-weight: bold;
  font-size: 1.3rem;
}

.featured-guessCard__detail__caption{
  background-color: var(--global-gray-10);
  border-radius: 5px;
  padding:8px;
  font-size: 1rem;
}

.free-guess{
  margin: 20px 10px;
}

.free-guessCard{
  background-color: var(--global-gray-10);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 2px 5px 0px #e5e5e5;
}

.free-guessCard__btn{
  background-color: var(--salon);
  color: var(--white);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  gap:3px;
  border-radius: 0 0 5px 5px;
  padding: 6px 10px;
  letter-spacing: 2px;
  font-size: 1rem;
}

.free-guessCard__detail{
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap:8px;
}

.free-guessCard__detail .ttl{
  font-size: 1rem;
  font-weight: bold;
  border-bottom: 1px solid var(--main-black);
  padding-bottom: 3px;
}
.free-guessCard__detail__nameWrap{
  display: flex;
  gap:5px;
}

.free-guessCard__detail__nameWrap .icoName_ico{
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
}
.free-guessCard__detail__nameTxt{
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.free-guessCard__detail__nameTxt .division{
  font-size: 0.8rem;
}
.free-guessCard__detail__nameTxt .name{
  font-weight: bold;
  font-size: 1.3rem;
  color: var(--main-black);
}

.free-guessCard__race{
  background-color: var(--white);
  border-radius: 3px;
  padding: 8px 10px;
  text-align: center;
}

.free-guessCard__race .race_num{
  font-family: var(--roboto);
  font-weight: bold;
  font-size: 1.3rem;
  line-height: 1;
}

.el_ico_week{
  border-radius: 100px;
    font-size: 0.6em;
    line-height: calc(0.6em + 12px);
    width: calc(0.6em + 12px);
    height: calc(0.6em + 12px);
    text-align: center;
    display: inline-block;
    margin-left: 3px;
    background-color: #ffebee;
    color: #FF5A34;
}
.el_ico_week.sat{
  background-color: #def2ff;
    color: #3471ff;
}


.free-guessCard__race .race_num .num{
  font-family: var(--roboto);
  margin-left: 8px;
}
.free-guessCard__race .race_name{
  font-size: 1rem;
}

.salon_free-guess{
  padding-bottom: 20px;
}

.salon_ranking{
  margin: 20px 0;
}
.salon_rankingGroup_list{
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.salon_ranking .el_ttl__left-ico{
  margin:0 10px 10px 10px;
}

.salon_rankingGroup .el_captionTxt{
  margin: 3px 10px 0;
}

.salon_rankingGroup__inner{
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin: 10px 10px 0;
}

.salon_rankingCard{
  background-color: var(--global-gray-10);
  border: 1px solid var(--global-gray-30);
  border-radius: 5px;
  padding:0 8px 8px 8px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.salon_rankingCard.theBest.treasure{gap:0;}

.salon_rankingCard.theBest .icoName_ico{
  width: 4rem;
  height: 4rem;
}
.salon_rankingCard.theBest.treasure .icoName_ico{
  width: 2.5rem;
  height: 2.5rem;
}


.salon_rankingGroup__inner .others{
  display: flex;
  gap: 5px;
}

.salon_rankingCard.theBest .rank{
  display: flex;
  gap: 8px;
  justify-content: space-between;
  align-items: flex-start;
}

.theBest_nameWrap{
  display: flex;
  gap:8px;
  align-items: flex-start;
}

.salon_rankingCard .salon_hitSlide__name__detail{
  padding-top: 8px;
}

.salon_rankingCard .salon_hitSlide__name__nameTxt .copy{
  font-size: 1rem;
}
.salon_rankingCard .salon_hitSlide__name__nameTxt .name{
  font-size: 1.4rem;
}

.salon_rankingCard .el_btn__follow{margin-top: 8px; flex-shrink: 0;}

.salon_rankingCard .detail{
display: flex;
gap: 8px;
justify-content: flex-end;
align-items: center;
list-style: none;
}

.salon_rankingCard .detail dt{
  background-color: var(--menuBar-100);
  color: var(--white);
  font-size: 0.7rem;
  line-height: 1;
  padding: 5px 8px;
}

.salon_rankingCard .detail .detailNum{
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1;
}

.salon_rankingCard .detail .detailNum .num{
  font-family: var(--roboto);
  font-size: 2em;
  font-weight: 900;
  line-height: 1;
}

.others .salon_rankingCard{
  align-items: center;
}

.others .salon_rankingCard .rank{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.others .salon_rankingCard .salon_hitSlide__name__nameTxt .copy{
  font-size: 0.8rem;
}
.others .salon_rankingCard .salon_hitSlide__name__nameTxt .name{
  font-size: 1.1rem;
}

.others .salon_rankingCard .detail .detailNum{
  font-size: 1rem;
}
.others .salon_rankingCard .detail .detailNum .num{
  font-size: 1.5em;
}

.salon_rankingCard .others_nameWrap{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.salon_rankingGroup .el_ttl__box_black{
  margin: 0 10px;
}

.el_btn__follow.done:hover{opacity: 1; cursor: inherit;}

.salon_ranking__raceName_wrap .race_num{
  font-family: var(--roboto);
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1;
}
.salon_ranking__raceName_wrap .race_num .num{
  font-family: var(--roboto);
    margin-left: 8px;
}
.salon_ranking__raceName_wrap .race_name{
  font-size: 0.9rem;
}

.theBest_raceDetail{
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.treasure .icoName_name{color: var(--main-black);}

.salon_ranking__treasureHorse_name{
  font-size: 1.4rem;
  padding-left: calc(1.2rem + 18px);
  font-weight: bold;
  line-height: 1.3;
  font-family: var(--roboto);
  margin-top: 5px;
}
.salon_ranking__treasureHorse_name .rate{
  font-weight: normal;
  font-size: 0.9rem;
  margin-left: 5px;;
}

.others .treasure .salon_ranking__raceName_wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.others .treasure  .salon_ranking__raceName_wrap .race_num{
font-size: 1.1rem;
}

.others .treasure .salon_ranking__treasureHorse_name{
padding-left: 0;
font-size: 1.1rem;
text-align: center;
margin-top: 0;
}
.others .treasure .salon_ranking__treasureHorse_name .rate{ display: block;}

.bl_commonSlider_wrap .salonHitswiper{
  padding-bottom: 15px;
    box-sizing: border-box;
}

/* 予想記事ページ */
.salon_profCard_wrap{
  background-color: var(--salon);
  background-image:
    /* 細かなスパークル */
    repeating-radial-gradient(
      circle at 10% 20%,
      rgba(255,255,255,0.12) 0 0.5px,
      rgba(255,255,255,0.00) 0.5px 8px
    ),
    repeating-radial-gradient(
      circle at 80% 30%,
      rgba(255,255,255,0.10) 0 0.5px,
      rgba(255,255,255,0.00) 0.5px 10px
    ),
    linear-gradient(135deg, #ffd1e6 0%, #ff9bd5 35%, #ff6fbe 65%, #ff3fa6 100%);
  background-blend-mode: screen, screen, normal;
  background-size: 100% 100%;
  background-position: center;
  padding: 20px 10px;
}

.salon_articleWrap{
  margin: 0;
}

.salon_article__wrapper{
  display: flex;
  flex-direction: column;
  gap:20px;
}

.salon_mainTxt__wrap{
  margin: 0 10px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.el_salon_favoHorse__box{
  border: 2px solid var(--salon);
  border-radius: 5px;
}

.favoHorse__box_header{
  background: var(--salon);
  color: var(--white);
  font-size: 1.2rem;
  font-weight: bold;
  padding: 8px 15px;
  line-height: 1;
  text-align: center;
}

.salon_mainTxt__wrap.otakara .el_salon_favoHorse__box{
  border: 2px solid var(--otakara);
  border-radius: 5px;
}

.salon_mainTxt__wrap.otakara .favoHorse__box_header{
  background: var(--otakara);
  color: var(--white);
  font-size: 1.2rem;
  font-weight: bold;
  padding: 8px 15px;
  line-height: 1;
  text-align: center;
}

.favoHorse__box_inner{
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap:5px;
}

.favoHorse__NameWrap{
  display: flex;
  gap:8px;
  font-size: 1.4rem;
  font-weight: bold;
}

.favoHorse__NameWrap .ico_num{
  font-family: var(--roboto);
  width: calc(1.4rem + 16px);
  height: calc(1.4rem + 16px);
  line-height: calc(1.4rem + 16px);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  flex-shrink: 0;
}

.salon_guessTrend__wrap{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.guessTrend_box{
  background: var(--white);
  border: 1px solid var(--global-gray-30);
  display: flex;
  align-items: stretch;
}

.guessTrend_box__ttl{
  background:var(--salon);
  color: var(--white);
  font-weight: bold;
  font-size: 0.9rem;
  text-align: center;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(3.6rem + 16px);
}

.guessTrend_box__meterWrap{
  display: flex;
  gap: 8px;
  padding: 8px;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

.guessTrend_box__meterWrap .meter_txt{
  font-size: 0.9rem;
  line-height: 1.2;
  text-align: center;
  width: 3.6rem;
}

.guessTrend_meter{
  list-style: none;
  display: flex;
  gap: 3px;
}

.guessTrend_meter li{
  background: var(--global-gray-20);
  width: 0.6rem;
  height: 2.4rem;
  display: block;
  border-radius: 2px;
}

.guessTrend_meter.lv1 li:nth-child(1),.guessTrend_meter.lv2 li:nth-child(2),.guessTrend_meter.lv3 li:nth-child(3),.guessTrend_meter.lv4 li:nth-child(4),.guessTrend_meter.lv5 li:nth-child(5),.guessTrend_meter.lv6 li:nth-child(6),.guessTrend_meter.lv7 li:nth-child(7),.guessTrend_meter.lv8 li:nth-child(8),.guessTrend_meter.lv9 li:nth-child(9),.guessTrend_meter.lv10 li:nth-child(10),.guessTrend_meter.lv11 li:nth-child(11){background:var(--salon);}

.salon_reaction__wrap{
  margin: 0 10px;
  padding-top:20px;
  border-top: 1px solid var(--global-gray-20);
}

.salon_reaction__btnWrap{
  background: var(--global-gray-10);
  border-radius: 5px;
  padding: 10px;
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  margin: 10px 0 0;
}

.reaction_unit{
  display: flex;
  gap: 8px;
  align-items: center;
}

.reaction_btn{
  cursor: pointer;
}

.reaction_btn:active{
  transform: translateY(1px);
}

.reaction_btn:hover{
  opacity: 0.7;
}

.reaction_btn img{
  height: 2.5rem;
  width: auto;
}

.reaction_num{
  font-family: var(--roboto);
  font-weight: 900;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--site-color);
}

.reaction_comment__wrapper{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap:15px;
  margin: 20px 0;
}

.reaction_comment {
  display: flex;
  align-items: flex-start;
  gap:8px;
}

/* 左側のアイコン */
.reaction_comment__icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 10px;
  flex-shrink: 0;
}
.reaction_comment__icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.reaction_comment__stamp{
  width: 3.5rem;
  height: 3.5rem;
  border: 1px solid var(--global-gray-20);
  border-radius: 5px;
  flex-shrink: 0;
  overflow: hidden;
}

.reaction_comment__stamp img{
  width: 100%;
  height: 100%;
}

/* 右側本文 */
.reaction_comment__body {
  flex: 1;
}

/* 名前＋時間 */
.reaction_comment__header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}
.reaction_comment__name {
  font-weight: bold;
  font-size: 0.9rem;
}

.reaction_comment__name.reply{
  cursor: pointer;
  color: var(--link-blue);
}

.reaction_comment__name.reply:hover{opacity: 0.7;}

.reaction_comment__time {
  font-size: 0.7rem;
  color:var(--global-gray-50);
}

/* コメント本文と「続きを見る」を横並びに */
.reaction_comment__text {
  font-size: 0.9rem;
  line-height: 1.7;
  display: inline;
}
.reaction_comment__more {
  font-size: 0.9rem;
  color: var(--link-blue);
  cursor: pointer;
  margin-left: 4px;
}

.reaction_comment__more:hover{
  opacity: 0.7;
}

/* 返信を見るボタン */
.reaction_comment__reply-toggle {
  display: block;
  font-size: 0.9rem;
  color: var(--global-gray-50);
  cursor: pointer;
  margin-top: 8px;
  padding-left: 1.1em;
  position: relative;
}

.reaction_comment__reply-toggle:hover{
  opacity: 0.7;
}

.reaction_comment__reply-toggle:before,.reaction_comment__reply-toggle:after{
  content: '';
  position: absolute;
  background-color: var(--global-gray-50); /* 線の色 */
}
  /* 横線（下側、左から右） */
  .reaction_comment__reply-toggle:before {
    width: 0.9em;
    height: 1px;
    bottom: 30%;
    left: 0;
  }

  /* 縦線（左側、上から下） */
  .reaction_comment__reply-toggle:after {
    width: 1px;
    height: calc(70% - 3px);
    left: 0;
    top: 3px;
  }

/* 返信リスト */
.reaction_comment__replies {
  margin-top: 10px;
  display: none;
}
.reaction_comment__replies .reaction_comment {
  margin-bottom: 10px;
}

.salon_reaction__wrap .el_btn__radius-solid-gray{margin: 0 auto;}

.salon_reaction__forChip{
  margin: 0 auto;
  display: flex;
  gap:5px;
  align-items: flex-start;
  justify-content: center;
  position: relative;
}

.forChip__btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.forChip__icoPanel{
  border: 4px solid var(--orange);
  border-radius: 8px;
  overflow: hidden;
  width: 100px;
  height: 100px;
  position: relative;
}

.forChip__icoPanel img{
  width: 100%;
  height: auto;
  position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.forChip__label{
  background: var(--orange);
  border-radius: 100px;
  padding: 8px 13px;
  line-height: 1;
  font-size: 1rem;
  font-weight: bold;
  color: var(--white);
  margin-top: -4px;
  z-index: 10;
  display: flex;
  align-items: center;
}

.forChip__label .el_ico_chip img{
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(94deg) brightness(101%) contrast(101%);
}

.salon_guess__otherTipster_wrap{
  background: var(--global-gray-10);
  position: relative;
  padding-bottom: 20px;
}

.salon_guess__otherTipster_wrap .el_ttl__tag{
  position: relative;
 top:calc((0.5rem + 8px) * -1);
}

.salon_guess__otherTipster_wrap .tipsterList-slide .icoName_name,.salon_favoSpecialist__wrap .tipsterList-slide .icoName_name{
  color: var(--main-black);
}

.salon_guess__otherRace_wrap{
  margin-bottom: 20px;
}

.salon_guess__otherRace_wrap .salon_raceList__count{
  line-height: 1.3;
  text-align: center;
}

.salon_guess__otherRace_wrap .salon_raceList__wrap{
  background: var(--white);
}

.salon_tip__wrapper,.salon_specialist__wrapper{
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 20px 10px;
}

.salon_tip__ttl{
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  color: var(--salon);
}
.salon_tip__subTxt{
  font-size: 0.8rem;
  text-align: center;
}

.salon_tipList{
  display: flex;
  gap:15px 10px;
  list-style: none;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
}

.salon_tipBtn_wrap{
 display: flex;
 flex-direction: column;
 gap: 5px;
 width: calc((100vw - 50px) / 4);
 height: auto;
 align-items: center;
}

.salon_tipBtn{
  width: 100%;
  height: calc((100vw - 50px) / 4);
  z-index: 1;
  display: block;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}

.tip_price{
  font-family: var(--roboto);
}

.salon_tipBtn img{
  width: 100%;
  height: auto;
  position: absolute;
  top:0;
  left: 0;
  z-index: 1;
  cursor: pointer;
}

.salon_tipBtn input[type=radio]{
  display: none;
}

.salon_tipBtn label{
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 10;
  cursor: pointer;
  border: 1px solid var(--global-gray-20);
  border-radius: 5px;
  box-sizing: border-box;
}

.salon_tipBtn .tip_price{
  font-size: 0.9rem;
  text-align: center;
  line-height: 1;
  font-family: var(--roboto);
}

.salon_tipBtn label:hover{
  border: 2px solid var(--orange);
}

.salon_tipBtn_wrap input[type="radio"]:checked + label{
	border: 5px solid var(--orange);
}

.tip_messageBox{
  padding: 8px;
  border-radius: 5px;
  width: 100%;
  height: calc(1rem + 16px);
  resize: none;
  border: 1px solid var(--global-gray-30);
  background: var(--global-gray-10);
  font-size: 1rem;
}
textarea.tip_messageBox:not([rows]){
  min-height: 4.2em;
}

.tip_messageBox::placeholder{
  color: var(--global-gray-30);
}

/* 匿名チェックボックス */
.tip_anonymous {
  margin: 10px 0 15px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--global-gray-50);
  cursor: pointer;
}
.tip_anonymous label{ cursor: pointer;}

.tip_anonymous__ico{
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--global-gray-30);
  border-radius: 3px;
  appearance: none;
  cursor: pointer;
}

.tip_anonymous__ico:checked{
  background: var(--orange); 
  border: 1px solid var(--orange);
}

.tip_anonymous__ico:checked:before{
  position: absolute;
  top: 2px;
  left: 0.6em;
  transform: rotate(50deg);
  width: 0.5em;
  height: 1em;
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  content: '';
}

.tip_message__attention{
  color: var(--red);
  font-size: 0.9rem;
}

.salon_tip__submitWrap{
  margin: 0 auto;
  width: 100%;
}

.tip_submitBtn{
   background: var(--orange);
   color: var(--white);
   font-size: 1.4rem;
   font-weight: bold;
   border-radius: 100px;
   padding: 13px 30px;
   text-align: center;
   min-width: 70%;
   display: block;
   margin: 0 auto;
}

.tip_submitBtn:hover{opacity: 0.7;}

.salon_tip__agreement{
  border-top: 1px solid var(--main-black);
  border-bottom: 1px solid var(--main-black);
  padding: 10px 0;
  margin: 20px 0;
}

.salon_tip__agreement .ttl{
  text-align: center;
  font-weight: normal;
  font-size: 0.9rem;
  margin-bottom: 8px;
}

.salon_tip__agreement .txt{
  font-size: 0.8rem;
}

.specialist_bestHit__list{
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  margin-top: 8px;
}

/* .bestHit_list__box{
  background-color: var(--global-gray-10);
  border:1px solid var(--global-gray-20);
  border-radius: 5px;
  padding: 8px calc(3rem + 16px) 8px 8px;
  background-image: url("https://www.keiba.jp/img/icons/ico_gekiso.svg");
  background-repeat: no-repeat;
  background-size: 3rem 3rem;
  background-position: right 8px top 8px;
  min-height: calc(3rem + 16px);
} */

.race_name{
  font-size: 0.8rem;
}

.bestHit_list__box .horse_name{
  font-size: 1.2rem;
  font-weight: bold;
}

.bestHit_list__box .race_result{
  font-size: 1rem;
  font-weight: bold;
  line-height: 1;
}

.bestHit_list__box .race_result .num{
  font-family: var(--roboto);
  font-size: 1.5em;
  color: #FF5A34;
}

.bestHit_list__box .race_result .rate{
  font-weight: normal;
  font-size: 0.8rem;
  margin-left: 5px;
}

.el_salon__ttl_border{
  font-size: 1rem;
  border-left: 5px solid var(--salon);
  border-bottom: 1px solid var(--salon);
  color: var(--salon);
  font-weight: bold;
  padding-left: 8px;
  padding-bottom: 4px;
  display: block;
}

.favoResult__tabWrap{
 margin: 10px auto;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
}

.favoResult__tabList{
  display: flex;
  gap:8px;
  align-items: center;
}

.favoResult__tabBtn input{
  display: none;
}

.favoResult__tabBtn{
  background: var(--white);
  border: 1px solid var(--global-gray-50);
  color: var(--global-gray-50);
  line-height: 1;
  padding: 6px 15px;
  text-align: center;
  border-radius: 100px;
  font-size: 0.8rem;
  cursor: pointer;
}

.favoResult__tabBtn:hover{opacity: 0.7;}

.favoResult__tabBtn:has(input[type="radio"]:checked){
  background: var(--salon);
  color: var(--white);
  border: none;
}

.favoResult__table{
  background: var(--white);
  border: 1px solid var(--global-gray-30);
  width: 100%;
}

.favoResult__table th{
  background: var(--global-gray-10);
  color: var(--global-gray-50);
  font-size: 0.8rem;
  font-weight: normal;
  line-height: 1;
  padding: 5px 8px;
  text-align: center;
  border: 1px solid var(--global-gray-30);
}

.favoResult__table td{
  font-size:1.2rem;
  line-height: 1;
  font-weight: 500;
  font-family: var(--roboto);
  text-align: center;
  padding: 8px;
  border: 1px solid var(--global-gray-30);
}

.treasureResult__list{
  list-style: none;
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid var(--global-gray-30);
}

.treasureResult__box{
  background: var(--global-gray-10);
  border-bottom: 1px solid var(--global-gray-30);
  padding: 8px;
}
.treasureResult__box:last-child{
  border: none;
}

.treasureResult__box .race_name{
  font-size: 0.8rem;
}

.treasureResult__box .horse_nameWrap{
  display: flex;
  gap:8px;
  font-weight: bold;
  line-height: 1;
  margin-top: 5px;
}


.treasureResult__box .horse_nameWrap .result{
  border: none;
  background: none;
  color: var(--main-black);
}

.treasureResult__box .horse_nameWrap .num{
  font-family: var(--roboto);
  font-size: 1.3em;
}

.salon_favoSpecialist__wrap{
  padding: 20px 0;
  background: var(--global-gray-10);
}

.salon_favoSpecialist__wrap .ico_all{
  background: var(--salon);
  color: var(--white);
  font-family: var(--roboto);
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 3rem;
  width: 3rem;
    height: 3rem;
    border-radius: 50%;
    margin-bottom: 4px;
    overflow: hidden;
    text-align: center;
}

.salon_favorite__following_wrap{
  margin: 20px 0 30px;
}

.salon_favoList__wrap{
  margin: 20px 10px;
  display: flex;
  flex-direction: column;
  gap:20px;
}

.profile-card__footer a.salon_raceList__btn{
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--global-gray-20);
}

.profile-card__footer .salon_raceList__count{
  line-height: 1.3;
}

.profile-card__footer a.salon_raceList__btn:after{
content: none;
}

.specialistNavi_btn{
  background: var(--salon);
  color: var(--white);
  font-size: 0.7rem;
  text-align: center;
  border-radius: 100px;
  padding: 8px 30px 8px 15px;
}

.specialistNavi_btn:after {
  content: '';
  width: 0.5em;
  height: 0.5em;
  border: 0;
  border-bottom: solid 2px var(--white);
  border-right: solid 2px var(--white);
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 13px;
  bottom: 0;
  margin: auto;
}

.specialistNavi_dropdown{
  position: absolute;
    top: 110%;
    min-width: calc(100% + 18px);
    max-height: calc(calc(0.9rem + 24px) * 3.5);
    overflow-y: scroll;
    left: 0;
    z-index: 1;
    list-style: none;
    border-radius: 8px;
    background-color: var(--white);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#specialistNavi_style__dropdown{
  min-width:100%;
}

.specialistNavi_dropdown .specialistNavi_btn_txt {
  border-radius: 0;
  background: none;
  padding-right: 10px;
}

.specialistNavi_btn_txt{
  font-size: 0.9rem;
  padding:8px 10px 8px 8px;
  border-bottom: 1px solid var(--global-gray-20);
  display: block;
}

.specialistNavi_btn_txt:hover{
  background: var(--global-gray-10);
}

.specialistNavi_dropdown::-webkit-scrollbar {
  width: 10px;
  border-radius: 0 8px 8px 0;
}

.specialistNavi_dropdown::-webkit-scrollbar-track{
  background-color: #fff;
  border-radius: 0 8px 8px 0;
}
.specialistNavi_dropdown::-webkit-scrollbar-thumb{
  background-color:var(--global-gray-20);
  border: 2px solid var(--white);
  border-radius: 100px;
}

.specialistNavi_result__dropdown li:last-child .specialistNavi_btn_txt{
  border: none;
}

.specialistNavi_dropdown{
 display: none;
}

.specialistNavi__wrap{
  position: relative;
    display: inline-block;
}

.salon_specialistNavi__wrap{
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 10px;
}

.specialistNavi_btn.noArrow{
  padding-right: 15px;
}

.specialistNavi_btn.noArrow::after{
content: none;
}

.specialistNavi_btn:hover{
  opacity: 0.7;
}

.salon_kaimeList__wrap{
  background: var(--global-gray-10);
  padding: 20px 5px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.salon-bnr__ttl {
  font-size: 1rem;
  font-weight: normal;
  padding: 5px 8px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(90deg,rgba(39, 29, 40, 1) 0%, rgba(107, 59, 103, 1) 100%);
  color: var(--white);
}

.salon-bnr{
  border-radius:14px;
  padding: 6px;
  background: linear-gradient(0deg,rgba(255, 90, 164, 1) 24%, rgba(250, 103, 255, 1) 100%);
  box-shadow: 0px 0px 15px 0px rgba(250, 103, 255,0.35);
}

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

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

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


/* PC表示用のレスポンシブスタイル (768px〜) */
@media (min-width: 768px) {

  .salon_raceList__wrap{
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  a.salon_raceList__btn{
    padding-right: 30px;
  }

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

  .featured-guess{
    padding:20px;
  }

  .featured-guessCard__btn{
    font-size: 1rem;
    line-height: 1.2;
    padding: 15px;
    width: calc(1rem + 30px);
  }
  .featured-guessCard__btn .el_iconArrow__next_white{
    margin-top: 5px;
  }

  .featured-guessCard__detail__nameWrap .icoName_ico{
    width: 5rem;
    height: 5rem;
  }
  .featured-guessCard__detail__nameTxt .copy{
    font-size: 1.2rem;
  }
  .featured-guessCard__detail__nameTxt .division{
    font-size: 1rem;
    margin-top: 5px;
  }
  .featured-guessCard__detail__nameTxt .name{
    font-size: 1.6rem;
  }
  .featured-guessCard__detail__caption{
    font-size: 1rem;
    padding: 10px;
  }
  .featured-guessCard__detail{
    padding: 10px;
  }
  .featured-guessList{
    gap: 15px;
  }

  .free-guess{
    margin: 30px 0;
  }

  .free-guessCard{
    width: 320px;
  }
  .free-guessCard__detail .ttl{
    font-size: 1.2rem;
    padding-bottom: 6px;
  }
  .free-guessCard__detail__nameTxt .division{
    font-size: 1rem;
  }
  .free-guessCard__detail__nameTxt .name{
    font-size: 1.4rem;
  }
  .free-guessCard__race .race_num{
    font-size: 1.2rem;
  }
  .free-guessCard__race{
    padding: 10px;
  }
  .free-guessCard__race .race_name{
    font-size: 1rem;
  }
  .free-guessCard__btn{
    font-size: 1rem;
    padding:8px 10px;
  }
  .salon_rankingCard{
    padding: 0 10px 15px;
  }

  .salon_rankingCard .el_btn__follow{margin-top: 10px;}
  .salon_rankingCard .others_nameWrap{
    flex-direction: row;
    gap: 8px;
  }

  .theBest_nameWrap{
    gap: 15px;
  }
  .salon_rankingCard .salon_hitSlide__name__detail{
    padding-top: 10px;
  }
  .salon_rankingCard.theBest .icoName_ico{
    width: 5rem;
    height: 5rem;
  }
  .salon_hitSlide__name__detail, .salon_hitSlide__race__horseWrap{
    gap: 10px;
  }
  .salon_rankingCard .salon_hitSlide__name__nameTxt .copy{
    font-size: 1.2rem;
  }
  .salon_rankingCard .salon_hitSlide__name__nameTxt .name{
    font-size: 1.8rem;
  }
  .salon_rankingCard .detail dt{
    font-size: 1rem;
    padding: 8px 10px;
  }
  .salon_rankingCard .detail .detailNum{
    font-size: 1.8rem;
  }
  .salon_ranking .el_ttl__left-ico{
    margin: 0 0 10px;
  }
  .salon_rankingGroup__inner,.salon_rankingGroup__inner .others{
    gap: 15px;
  }
  .salon_ranking{margin: 30px 0;}
  .salon_rankingGroup .el_ttl__box_black{margin: 0;}

  .salon_rankingGroup__inner{
    margin: 15px 0;
  }

  .others .salon_rankingCard .salon_hitSlide__name__nameTxt .copy{
    font-size: 1rem;
  }
  .others .salon_rankingCard .salon_hitSlide__name__nameTxt .name{
    font-size: 1.4rem;
  }
  .others_nameWrap .icoName_ico{
    width: 4rem;
    height: 4em;
  }
  .others .salon_rankingCard .detail .detailNum{
    font-size: 1.6rem;
  }

  .salon_ranking__raceName_wrap{
    display: flex;
    gap: 5px;
    align-items: center;
  }
  .treasure .icoName_name{
    font-size: 1rem;
  }
  .salon_ranking__raceName_wrap .race_num{
    font-size: 1.3rem;
  }
  .salon_ranking__raceName_wrap .race_name{
    font-size: 1rem;
  }
  .salon_ranking__treasureHorse_name{
    font-size: 1.8rem;
    padding-left: calc(1.5rem + 26px);
  }
  .salon_ranking__treasureHorse_name .rate{
    font-size: 1rem;
  }
  .salon_rankingCard.treasure .others_nameWrap{
    flex-direction: column;
  }
  .treasure  .el_icoName_beside .icoName_ico{
    width:2.5rem;
    height: 2.5rem;
  }
  .others .treasure .salon_ranking__raceName_wrap .race_num{
    font-size: 1.3rem;
  }
  .others .treasure .salon_ranking__treasureHorse_name{
    font-size: 1.4rem;
  }
  .others .treasure .salon_ranking__raceName_wrap{gap:0;}

  .salonSlider_wrap{padding-left: 20px; padding-right: 20px;}
  .bl_commonSlider_wrap .salon_hitSlide{width: 300px;}
  .bl_commonSlider_wrap .salonHitswiper{
    padding-bottom: 20px;
      box-sizing: border-box;
  }

  .salon_guessTrend__wrap{
    width: 400px;
    margin: 0 auto;
  }

  .el_btn_AIkaime{
    margin: 0 auto;
    padding: 15px 47px 15px 30px;
    font-size: 1.3rem;
  }

  .el_btn_AIkaime:after {
    right: 15px;
    width: 10px;
    height: 10px;
  }

  .salon_reaction__btnWrap{
    gap:30px;
    padding: 13px;
  }

  .reaction_comment{
    gap: 10px;
  }

  .reaction_comment__stamp{
    width: 4rem;
    height: 4rem;
  }

  .salon_reaction__forChip{
    margin: 30px auto;
  }

  .forChip__label{
    font-size: 1.2rem;
  }
  .forChip__icoPanel{
    width: 110px;
    height: 110px;
  }

  .salon_reaction__forChip .el_balloon-border-left{
  font-size: 1.2rem;
  }

  .salon_guess__otherTipster_inner{
    margin: 0 20px;
  }

  .salon_tip__ttl{
    font-size: 1.5rem;
  }
  .salon_tip__subTxt{
    font-size: 1rem;
  }

  .salon_tip__wrapper,.salon_specialist__wrapper{
    gap:30px;
    margin: 0;
  }

  .salon_tipList{
    gap:30px 15px;
  }

  .salon_tipBtn_wrap{
    width: 156px;
  }

  .salon_tipBtn{
    height: 156px;
    border-radius: 8px;
  }

  .salon_tipBtn label{
    border-radius: 8px;
  }

  .salon_tipBtn_wrap input[type="radio"]:checked + label{
    border: 6px solid var(--orange);
  }

  .tip_price{
    font-size: 1.5rem;
      font-family: var(--roboto);
  }

  .tip_anonymous{
    font-size: 1rem;
    gap: 8px;
  }

  .tip_anonymous__ico:checked:before{
    top: 3px;
    left: 0.5em;
    width: 0.4em;
    height: 0.8em;
  }

  .bestHit_list__box{
    padding: 10px calc(3rem + 20px) 10px 10px;
    background-position:right 10px top 10px;
  }
  .bestHit_list__box .race_name{
    /* font-size: 1rem; */
  }
  .bestHit_list__box .horse_name{
    font-size: 1.4rem;
  }
  .bestHit_list__box .race_result{
    font-size: 1.2rem;
  }
  .bestHit_list__box .race_result .rate{
    font-size: 1rem;
  }

  .salon_specialist__wrapper{margin: 0 50px 30px;}

  .el_salon__ttl_border{
    font-size: 1.2rem;
  }
  .favoResult__tabBtn{
    font-size: 1rem;
  }
  .favoResult__tabWrap{
    margin: 15px auto;
  }

  .favoResult__table th{
    font-size: 1rem;
    padding: 8px;
  }

  .favoResult__table td{
    font-size: 1.6rem;
    padding: 8px;
  }

  .treasureResult__box .race_name{
    font-size: 1rem;
  }

  .treasureResult__box .horse_nameWrap{
    font-size: 1.2rem;
  }

  .salon_favoList__wrap{
    margin: 30px 0;
    display: flex;
    flex-direction: column;
    gap:30px;
  }

  .salon_kaimeList__wrap{
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .salon_otherTipsterSwiper{
    padding: 0;
  }

  .specialistNavi_btn{
    font-size: 0.9rem;
  }

}