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

/* 変数定義 */
:root {
    /* カラーパレット */
    --site-color: #4405E4;
    --primary: #4405E4;
    --primary-light: #6633FF;
    --primary-dark: #3300CC;
    --secondary: #FDC700;
    --secondary-light: #FFDF4D;
    --secondary-dark: #E6B800;
    --attention: #E7000B;
    --white: #FFFFFF;
    --black: #000000;
    --dark-gray: #6a6a79;
    --gray:#CDCDCD;
    --light-gray:#E0E0E0;
    --base-gray:#F3F7FA;
    --main-black: #292524;
    --global-gray-10: #F3F3F3;
    --global-gray-20: #E0E2E4;
    --global-gray-30: #CDCDCD;
    --global-gray-40: #ADB2B7;
    --global-gray-50: #777777;
    --global-gray-80: #4f4f4f;
    --menuBar-100: #323F4C;
    --gold2:linear-gradient(45deg, #ffd700, #ffed4e, #ffc107, #ff8f00, #ffd700, #ffeb3b);
    --grd:linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3, #54a0ff) ;
    --ai-grd:linear-gradient(to right, #48f2b3, #00b9ca 36%, #0054ca);
    
    --webpaper:#00B94A;
    --topics:#FF7031;
    --salon:#FF4AF2;
    --otakara:#ceb950;
    --premium:#FFEC00;
    --index:#FF7031;

    /* 欧文フォント */
    --roboto: "Roboto", sans-serif;

    --red:#FF4433;
    --blue:#3F51B5;
    --link-blue:#007bff;
    --light-blue:#00bfff;
    --deep-blue:#2828ff;
    --purple:#C4B4FF;
    --pink:#F06292;
    --hot-pink:#ec4899;
    --coral:#ff8484;
    --green:#2E7D32;
    --light-green:#22c55e;
    --sea-green:#20b2aa;
    --deep-green:#005312;
    --yellow:#FFEB3B;
    --chrome-yellow:#fcc800;
    --orange:#FFA726;
    --vivid-orange:#ff6600;
    --violet:#8a2be2;
    --dart:#D6B959;
    --turf:#00B94A;
    --g3:#00B94A;
    --g2:#3F51B5;
    --g1:#FF4433;
    --gold:#FFD047;
    --silver:#C8D5D7;
    --bronze:#ECA881;
    --yj-red:#FF5A34;
    --ai-green:#00B9CA;
    --link-yellow:#ffd700;
    --link-lightblue:#87ceeb;
    --pregold:#dab710;
    
    --sire:#53EAF1;
    --dam:#FFA2A2;
    --damSire:#C4B4FF;
    --ritto:#53EAFD;
    --miho:#FFA2A2;



/* 背景色用クラス */
.bg-red        { background-color: var(--red); }
.bg-yj-red     { background-color: var(--yj-red); }
.bg-blue       { background-color: var(--blue); }
.bg-link-blue  { background-color: var(--link-blue); }
.bg-light-blue { background-color: var(--light-blue); }
.bg-deep-blue  { background-color: var(--deep-blue);}
.bg-purple     { background-color: var(--purple); }
.bg-violet     { background-color: var(--violet); }
.bg-pink       { background-color: var(--pink); }
.bg-hot-pink   { background-color: var(--hot-pink); }
.bg-coral   { background-color: var(--coral); }
.bg-green      { background-color: var(--green); }
.bg-deep-green {background-color: var(--deep-green);}
.bg-light-green { background-color: var(--light-green); }
.bg-sea-green { background-color: var(--sea-green); }
.bg-yellow     { background-color: var(--yellow); }
.bg-chrome-yellow { background-color: var(--chrome-yellow); }
.bg-orange     { background-color: var(--orange); }
.bg-vivid-orange { background-color: var(--vivid-orange); }

.bg-dart       { background-color: var(--dart); }
.bg-turf       { background-color: var(--turf); }
.bg-g3         { background-color: var(--g3); }
.bg-g2         { background-color: var(--g2); }
.bg-g1         { background-color: var(--g1); }
.bg-gold       { background-color: var(--gold); }
.bg-silver     { background-color: var(--silver); }
.bg-bronze     { background-color: var(--bronze); }
.bg-grd        { background-color: var(--grd); }

.bg-sire       { background-color: var(--sire); }
.bg-dam        { background-color: var(--dam); }
.bg-damSire    { background-color: var(--damSire); }
.bg-ritto      { background-color: var(--ritto); }
.bg-miho       { background-color: var(--miho); }

/* 文字色用クラス */
.red        { color: var(--red); }
.text-red        { color: var(--red); }
.text-yj-red     { color: var(--yj-red); }
.text-blue       { color: var(--blue); }
.text-link-blue  { color: var(--link-blue); }
.text-purple     { color: var(--purple); }
.text-pink       { color: var(--pink); }
.text-green      { color: var(--green); }
.text-yellow     { color: var(--yellow); }
.text-orange     { color: var(--orange); }
.text-dart       { color: var(--dart); }
.text-turf       { color: var(--turf); }
.text-g3         { color: var(--g3); }
.text-g2         { color: var(--g2); }
.text-g1         { color: var(--g1); }
.text-gold       { color: var(--gold); }
.text-silver     { color: var(--silver); }
.text-bronze     { color: var(--bronze); }
.text-link-yellow  { color: var(--link-yellow); }
.text-link-lightblue { color: var(--link-lightblue); }
.text-glay { color: var(--global-gray-40); }

.text-sire       { color: var(--sire); }
.text-dam        { color: var(--dam); }
.text-damSire    { color: var(--damSire); }
.text-ritto      { color: var(--ritto); }
.text-miho       { color: var(--miho); }
    
    /* レイアウト */
    --sidebar-width: 15rem;      /* 240px */
    --header-height: 3.5rem;     /* 56px */
    --footer-height: 7.5rem;     /* 120px */
    --container-padding: 1rem;   /* 16px */
    --card-border-radius: 0.5rem; /* 8px */
    --carousel-height: 25rem;
    
    /* フォントサイズ */
    --font-xxxs: 0.625rem;    /* 10px */
    --font-xxs: 0.6875rem;    /* 11px */
    --font-xs: 0.75rem;       /* 12px */
    --font-sm: 0.875rem;      /* 14px */
    --font-base: 1rem;        /* 16px */
    --font-md: 1.125rem;      /* 18px */
    --font-lg: 1.25rem;       /* 20px */
    --font-xl: 1.5rem;        /* 24px */
    --font-xxl: 2rem;         /* 32px */

.std3 { font-size: 0.875rem; }       /* 14px */
.std8 { font-size: 0.5rem !important; }    /* 8px */
.std10 { font-size: 0.625rem !important; } /* 10px */
.std11 { font-size: 0.6875rem !important; }/* 11px */
.std12 { font-size: 0.75rem !important; }  /* 12px */
.std13 { font-size: 0.8125rem !important; }/* 13px */
.std14 { font-size: 0.875rem !important; } /* 14px */
.std16 { font-size: 1rem !important; }     /* 16px */
.std18 { font-size: 1.125rem !important; } /* 18px */
.std20 { font-size: 1.25rem !important; }  /* 20px */
.std22 { font-size: 1.375rem !important; } /* 22px */
.std24 { font-size: 1.5rem !important; }   /* 24px */
.std26 { font-size: 1.625rem !important; } /* 26px */
.std28 { font-size: 1.75rem !important; }  /* 28px */
.std30 { font-size: 1.875rem !important; } /* 30px */
.std32 { font-size: 2rem !important; }     /* 32px */
.std34 { font-size: 2.125rem !important; } /* 34px */
.std36 { font-size: 2.25rem !important; }  /* 36px */
    
    /* アニメーション */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;
    
    /* ブレークポイント (px指定を維持) */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    
    /* シャドウ */
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-md: 0 3px 6px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.12);
    --shadow-lg: 0 10px 20px rgba(0,0,0,0.15), 0 3px 6px rgba(0,0,0,0.1);
    
    /* Z-index階層 */
    --z-index-base: 1;
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal: 1040;
    --z-index-popover: 1050;
    --z-index-tooltip: 1060;
}

/* 共通ユーティリティクラス */
.text-center { text-align: center; }
.tC { text-align: center; }
.text-left { text-align: left; }
.tL { text-align: left; }
.text-right { text-align: right; }
.tR { text-align: right; }

.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-row { flex-direction: row; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.flex-wrap { flex-wrap: wrap; }

.m-0 { margin: 0; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }

.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }

.rounded { border-radius: var(--card-border-radius); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }

.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-white { color: var(--white); }
.text-dark { color: var(--main-black); }
.text-gray { color: var(--dark-gray); }

.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-white { background-color: var(--white); }
.bg-light { background-color: var(--global-gray-10); }

.hidden { display: none; }
.visible { display: block; }

.font_roboto{
    font-family: "Roboto", sans-serif;
}
.bold{font-weight: bold;}
.normal{font-weight: normal;}

.underline {text-decoration: underline;}

/* マージンとかレイアウト */
.w100{width:100% !important;}
.overflow-x{overflow: visible; overflow-x: auto;}
.overflow-y{overflow: visible; overflow-y: auto;}

.basicContainer{
	background: #fff;
	position: relative;
	}
.basicC_inner{
	margin: 0 1.25rem;
	}
.margin{margin: 0 1.25rem;}

.imgR{float: right;}
.imgL{float: left;}

.noScroll{height: 100%; overflow: hidden;}
.fixed{position: fixed !important; backface-visibility:hidden; z-index: 900;}

.margin-auto{margin: 0 auto !important;}
.margin0{margin: 0 !important;}

.mt0{margin-top: 0 !important;}
.mt_05rem{margin-top:0.5rem !important;}
.mt_06rem{margin-top:0.6rem !important;}
.mt_07rem{margin-top:0.7rem !important;}
.mt_08rem{margin-top:0.8rem !important;}
.mt_09rem{margin-top:0.9rem !important;}
.mt_1rem{margin-top:1rem !important;}
.mt_11rem{margin-top:1.1rem !important;}
.mt_12rem{margin-top:1.2rem !important;}
.mt_13rem{margin-top:1.3rem !important;}
.mt_14rem{margin-top:1.4rem !important;}
.mt_15rem{margin-top:1.5rem !important;}
.mt_16rem{margin-top:1.6rem !important;}
.mt_17rem{margin-top:1.7rem !important;}
.mt_18rem{margin-top:1.8rem !important;}
.mt_19rem{margin-top:1.9rem !important;}
.mt_2rem{margin-top:2rem !important;}
.mt_21rem{margin-top:2.1rem !important;}
.mt_22rem{margin-top:2.2rem !important;}
.mt_29rem{margin-top:2.9rem !important;}
.mt_38rem{margin-top:3.8rem !important;}

.mb_05rem{margin-bottom:0.5rem !important;}
.mb_06rem{margin-bottom:0.6rem !important;}
.mb_07rem{margin-bottom:0.7rem !important;}
.mb_08rem{margin-bottom:0.8rem !important;}
.mb_09rem{margin-bottom:0.9rem !important;}
.mb_1rem{margin-bottom:1rem !important;}
.mb_11rem{margin-bottom:1.1rem !important;}
.mb_12rem{margin-bottom:1.2rem !important;}
.mb_13rem{margin-bottom:1.3rem !important;}
.mb_14rem{margin-bottom:1.4rem !important;}
.mb_15rem{margin-bottom:1.5rem !important;}
.mb_16rem{margin-bottom:1.6rem !important;}
.mb_17rem{margin-bottom:1.7rem !important;}
.mb_18rem{margin-bottom:1.8rem !important;}
.mb_19rem{margin-bottom:1.9rem !important;}
.mb_2rem{margin-bottom:2rem !important;}
.mb_21rem{margin-bottom:2.1rem !important;}
.mb_22rem{margin-bottom:2.2rem !important;}
.mb_29rem{margin-bottom:2.9rem !important;}
.mb_38rem{margin-bottom:3.8rem !important;}

.mt5{margin-top: 5px !important;}
.mt10{margin-top: 10px !important;}
.mt20{margin-top: 20px !important;}
.mt30{margin-top: 30px !important;}
.mt40{margin-top: 40px !important;}
.mt50{margin-top: 50px !important;}
.mt60{margin-top: 60px !important;}
.mt70{margin-top: 70px !important;}
.mt80{margin-top: 80px !important;}
.mt90{margin-top: 90px !important;}
.mt100{margin-top: 100px !important;}

.mb0{margin-bottom: 0 !important;}
.mb5{margin-bottom: 5px !important;}
.mb10{margin-bottom: 10px !important;}
.mb20{margin-bottom: 20px !important;}
.mb30{margin-bottom: 30px !important;}
.mb40{margin-bottom: 40px !important;}
.mb50{margin-bottom: 50px !important;}
.mb60{margin-bottom: 60px !important;}
.mb70{margin-bottom: 70px !important;}
.mb80{margin-bottom: 80px !important;}
.mb90{margin-bottom: 90px !important;}
.mb100{margin-bottom: 100px !important;}

.ml5{margin-left: 5px !important;}
.ml10{margin-left: 10px !important;}
.ml20{margin-left: 20px !important;}
.ml30{margin-left: 30px !important;}
.ml40{margin-left: 40px !important;}
.ml50{margin-left: 50px !important;}
.ml60{margin-left: 60px !important;}
.ml70{margin-left: 70px !important;}
.ml80{margin-left: 80px !important;}
.ml90{margin-left: 90px !important;}
.ml100{margin-left: 100px !important;}


.mr3{margin-right: 3px !important;}
.mr5{margin-right: 5px !important;}
.mr10{margin-right: 10px !important;}
.mr20{margin-right: 20px !important;}
.mr30{margin-right: 30px !important;}
.mr40{margin-right: 40px !important;}
.mr50{margin-right: 50px !important;}
.mr60{margin-right: 60px !important;}
.mr70{margin-right: 70px !important;}
.mr80{margin-right: 80px !important;}
.mr90{margin-right: 90px !important;}
.mr100{margin-right: 100px !important;}

/* padding */
.padding_15{padding: 15px;}
.pt5{padding-top: 5px !important;}
.pt10{padding-top: 10px !important;}
.pt20{padding-top: 20px !important;}
.pt30{padding-top: 30px !important;}
.pt40{padding-top: 40px !important;}
.pt50{padding-top: 50px !important;}
.pt60{padding-top: 60px !important;}
.pt70{padding-top: 70px !important;}
.pt80{padding-top: 80px !important;}
.pt90{padding-top: 90px !important;}
.pt100{padding-top: 100px !important;}

.pb5{padding-bottom: 5px !important;}
.pb10{padding-bottom: 10px !important;}
.pb20{padding-bottom: 20px !important;}
.pb30{padding-bottom: 30px !important;}
.pb40{padding-bottom: 40px !important;}
.pb50{padding-bottom: 50px !important;}
.pb60{padding-bottom: 60px !important;}
.pb70{padding-bottom: 70px !important;}
.pb80{padding-bottom: 80px !important;}
.pb90{padding-bottom: 90px !important;}
.pb100{padding-bottom: 100px !important;}

.pl5{padding-left: 5px !important;}
.pl10{padding-left: 10px !important;}
.pl20{padding-left: 20px !important;}
.pl30{padding-left: 30px !important;}
.pl40{padding-left: 40px !important;}
.pl50{padding-left: 50px !important;}
.pl60{padding-left: 60px !important;}
.pl70{padding-left: 70px !important;}
.pl80{padding-left: 80px !important;}
.pl90{padding-left: 90px !important;}
.pl100{padding-left: 100px !important;}

.pr5{padding-right: 5px !important;}
.pr10{padding-right: 10px !important;}
.pr20{padding-right: 20px !important;}
.pr30{padding-right: 30px !important;}
.pr40{padding-right: 40px !important;}
.pr50{padding-right: 50px !important;}
.pr60{padding-right: 60px !important;}
.pr70{padding-right: 70px !important;}
.pr80{padding-right: 80px !important;}
.pr90{padding-right: 90px !important;}
.pr100{padding-right: 100px !important;}


.pt_05rem{padding-top:0.5rem !important;}
.pt_06rem{padding-top:0.6rem !important;}
.pt_07rem{padding-top:0.7rem !important;}
.pt_08rem{padding-top:0.8rem !important;}
.pt_09rem{padding-top:0.9rem !important;}
.pt_1rem{padding-top:1rem !important;}
.pt_11rem{padding-top:1.1rem !important;}
.pt_12rem{padding-top:1.2rem !important;}
.pt_13rem{padding-top:1.3rem !important;}
.pt_14rem{padding-top:1.4rem !important;}
.pt_15rem{padding-top:1.5rem !important;}
.pt_16rem{padding-top:1.6rem !important;}
.pt_17rem{padding-top:1.7rem !important;}
.pt_18rem{padding-top:1.8rem !important;}
.pt_19rem{padding-top:1.9rem !important;}
.pt_2rem{padding-top:2rem !important;}
.pt_21rem{padding-top:2.1rem !important;}
.pt_22rem{padding-top:2.2rem !important;}
.pt_29rem{padding-top:2.9rem !important;}

.pb_05rem{padding-bottom:0.5rem !important;}
.pb_06rem{padding-bottom:0.6rem !important;}
.pb_07rem{padding-bottom:0.7rem !important;}
.pb_08rem{padding-bottom:0.8rem !important;}
.pb_09rem{padding-bottom:0.9rem !important;}
.pb_1rem{padding-bottom:1rem !important;}
.pb_11rem{padding-bottom:1.1rem !important;}
.pb_12rem{padding-bottom:1.2rem !important;}
.pb_13rem{padding-bottom:1.3rem !important;}
.pb_14rem{padding-bottom:1.4rem !important;}
.pb_15rem{padding-bottom:1.5rem !important;}
.pb_16rem{padding-bottom:1.6rem !important;}
.pb_17rem{padding-bottom:1.7rem !important;}
.pb_18rem{padding-bottom:1.8rem !important;}
.pb_19rem{padding-bottom:1.9rem !important;}
.pb_2rem{padding-bottom:2rem !important;}
.pb_21rem{padding-bottom:2.1rem !important;}
.pb_22rem{padding-bottom:2.2rem !important;}
.pb_29rem{padding-bottom:2.9rem !important;}
.pb_4rem{padding-bottom:4rem !important;}


.clearfix::after {
content: “”;
display: block;
clear: both;
}

.clearfix{clear: both;}

/* * ================================================
 * 馬番ごとの枠色設定 (JRAルール準拠)
 * ================================================
 */

 .waku{text-align: center;}
.waku1{background: #ffffff; color: #000000; font-weight: bold;border: 1px solid #E0E0E0;}
.waku2{background: #000000; color: #ffffff; font-weight: bold;}
.waku3{background: #ea3323; color: #ffffff; font-weight: bold;}
.waku4{background: #1616ed; color: #ffffff; font-weight: bold;}
.waku5{background: #fcef4f; color: #000000; font-weight: bold;}
.waku6{background: #4d9629; color: #ffffff; font-weight: bold;}
.waku7{background: #ef8732; color: #000000; font-weight: bold;}
.waku8{background: #ec6a98; color: #000000; font-weight: bold;}



/* 共通スタイル */
/* 黒SVGアイコンに色つける */
.ico_color__topics img{filter: invert(45%) sepia(96%) saturate(767%) hue-rotate(338deg) brightness(104%) contrast(104%);}
.ico_color__webpaper img{filter: invert(50%) sepia(48%) saturate(2253%) hue-rotate(109deg) brightness(93%) contrast(101%);}
.ico_color__salon img{filter: invert(46%) sepia(21%) saturate(5504%) hue-rotate(281deg) brightness(103%) contrast(106%);}
.ico_color__premium img{filter: invert(85%) sepia(80%) saturate(5892%) hue-rotate(1deg) brightness(105%) contrast(104%);}

.icon-clock {
  display: inline-block;
  width: 0.75rem; /* 12px */
  height: 0.75rem; /* 12px */
  background-image: url('/img/common/clock-regular.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 0.25rem; /* 4px */
  filter: brightness(0) saturate(100%) invert(60%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* スライダー基本設定 */
.bl_commonSlider_wrap{
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 10px 0;
}
.bl_commonSlider_wrap .commonSwiper{
  padding-bottom: 10px;
  box-sizing: border-box;
}
.custom-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  position: relative;
}

.bl_commonSlider_wrap .swiper-button-prev,
.bl_commonSlider_wrap .swiper-button-next {
  top:0;
  height: 1rem;
  z-index: 20;
}

.salon .bl_commonSlider_wrap .swiper-button-prev,
.salon .bl_commonSlider_wrap .swiper-button-next {
color: var(--salon);
}
.topics .bl_commonSlider_wrap .swiper-button-prev,
.topics .bl_commonSlider_wrap .swiper-button-next {
color: var(--topics);
}
.webpaper .bl_commonSlider_wrap .swiper-button-prev,
.webpaper .bl_commonSlider_wrap .swiper-button-next {
color: var(--webpaper);
}
.premium .bl_commonSlider_wrap .swiper-button-prev,
.premium .bl_commonSlider_wrap .swiper-button-next {
color: var(--premium);
}

.bl_commonSlider_wrap .swiper-button-prev,.bl_commonSlider_wrap .swiper-rtl .swiper-button-next{
left: 0;
cursor: pointer;
}
.bl_commonSlider_wrap .swiper-button-next,.bl_commonSlider_wrap .swiper-rtl .swiper-button-prev{
  right: 0;
}

.bl_commonSlider_wrap .swiper-button-next:after,.bl_commonSlider_wrap .swiper-button-prev:after{
  font-size: 1rem;
}

.swiper-pagination {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-pagination-bullet {
  background: var(--global-gray-20);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 0 4px;
  opacity: 1;
}

.salon .bl_commonSlider_wrap .swiper-pagination-bullet-active {
  background: var(--salon);
}
.webpaper .bl_commonSlider_wrap .swiper-pagination-bullet-active {
  background: var(--webpaper);
}
.topics .bl_commonSlider_wrap .swiper-pagination-bullet-active {
  background: var(--topics);
}
.premium .bl_commonSlider_wrap .swiper-pagination-bullet-active {
  background: var(--premium);
}

.index .bl_commonSlider_wrap .swiper-pagination-bullet-active {
  background: var(--index);
}

/* カスタムナビ内では絶対配置を解除して行内に表示 */
.custom-navigation .swiper-button-prev,
.custom-navigation .swiper-button-next,
.custom-navigation .swiper-pagination {
  position: static !important;
  inset: auto; /* top/right/bottom/leftをリセット */
  transform: none;
}

/* 矢印ボタンの表示領域と視認性を確保 */
.custom-navigation .swiper-button-prev,
.custom-navigation .swiper-button-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  line-height: 1;
  color: inherit;
  opacity: 1;
}

.custom-navigation .swiper-button-prev:after,
.custom-navigation .swiper-button-next:after {
  font-size: 16px;
  font-weight: 700;
}

/* 非活性時の見え方（任意） */
.custom-navigation .swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* 横スクロールバーのswiper基本 */
.bl_commonSlider-scroll_wrap {
  margin-left: 0;   /* 左寄せ */
}
.commonSwiper-scroll{
  padding: 0 10px 15px 10px;
}
.bl_commonSlider-scroll_wrap .swiper-scrollbar {
  height: 4px;
  background: var(--global-gray-10);
  border-radius: 100px;
  margin-top: 10px;
  left: 10px;
  width: calc(100% - 20px);
}
.bl_commonSlider-scroll_wrap .swiper-scrollbar-drag {
  background: var(--global-gray-20);
  border-radius: 100px;
}

/* 所属ラベル */
.el_divisionLabel{
 
  color: var(--white);
  font-size: 0.7rem;
  font-weight: normal;
  line-height: 1;
  display: inline-block;
  padding: 2px 8px 3px;
  border-radius: 100px;
  margin-left: 5px;
  position: relative;
}
.el_divisionLabel.yuuma{background-color: #4405E4;}
.el_divisionLabel.seishun{background-color: #e53935;}

.el_divisionLabel.seishun::after{
  content: "成駿";
 
}

.el_divisionLabel.yuuma::after{
  content: "優馬";
 
}


.el_label_borderBox{
  border: 1px solid var(--main-black);
  font-size: 0.8rem;
  padding: 5px 8px;
  line-height: 1;
  display: inline-block;
}

/* セクション見出し */
.section-title {
    font-size: 1.2rem;
    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(--primary);
    padding-left: 8px;
}
.section-title.white {
    color: var(--white);
}

.topics .section-title{border-color: var(--topics);}
.webpaper .section-title{border-color: var(--webpaper);}
.salon .section-title{border-color: var(--salon);}
.premium .section-title{border-color: var(--premium);}
.debit .section-title{border-color: var(--red);}
.ai .section-title{border-color: var(--ai-green);}

/* 注目レースセクション */
.featured-race{
    background: #323F4C;
    padding:20px;
    width: 100%;
}
.featured-race__ttlWrap{
    background:var(--white);
    width: 100%;
    border-radius: 6px;
    padding: 10px;
}

/* レース名パーツ */
.raceTtl_wrapper{
    margin:15px 20px 20px;
    display: flex;
    flex-direction: column;
    gap:10px;
}

.bl_raceTtl-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.raceTtl-box__left{
    display: flex;
    gap:8px;
}
.raceTtl-box__numWrap{
    display: flex;
    flex-direction: column;
    gap:3px;
    color: var(--white);
    background-color: var(--site-color);
    border-radius: 8px;
    padding: 8px;
    align-items: center;
    flex-shrink: 0;
}
.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;
}
.raceTtl-box__numWrap .date{font-size: 0.9rem;}
.raceTtl-box__numWrap .place{font-weight: bold;font-size: 1.2rem;}
.raceTtl-box__numWrap .num{font-weight: bold; font-size: 1.3rem;}
.raceTtl-box__txtWrap{
        display: flex;
        flex-direction: column;
        justify-content: center;
}
.raceTtl-box__txt__aLine{
  display: flex;
  gap:5px;
  align-items: center;
}

.raceTtl-box__txtWrap .name,.el_racettl{
        font-size: 1.4rem;
}
a .name{color: var(--blue); white-space: nowrap;}

.ico005, .ico010, .ico016, .ico999, .icoG1, .icoG2, .icoG3, .icoJG1, .icoJG2, .icoJG3, .icoL { 
    display: inline-block;
    margin-left: 5px;
    padding: 0.3em 0.6em 0.1em;
    border-radius: 100px;
    line-height: 1;
    font-size: 0.8em;
    font-family:var(--roboto);
    background-color: var(--main-black);
    color: var(--white);
    font-weight: 500;
    vertical-align: middle;
    line-height: 1.3;
    position: relative;
    top: -1px;
}

.icoG1, .icoJG1 {
  background-color:#0c74d5
}

.icoG2, .icoJG2 {
  background-color:#e53935
}

.icoG3, .icoJG3 {
  background-color:#208400
}

.ico005, .ico010, .ico016, .ico999 {
  background-color:#546e7a
}

.icoL {
  background-color:#1976d2
}

.icoG1:before {
  content: "GⅠ"
}

.icoG2:before {
  content: "GⅡ"
}

.icoG3:before {
  content: "GⅢ"
}

.icoJG1:before {
  content: "J·GⅠ"
}

.icoJG2:before {
  content: "J·GⅡ"
}

.icoJG3:before {
  content: "J·GⅢ"
}

.icoL:before {
  content: "L"
}

.ico005:before {
  content: "1勝"
}

.ico010:before {
  content: "2勝"
}

.ico016:before {
  content: "3勝"
}

.ico999:before {
  content: "OP"
}



.raceTtl-box__txtWrap .course,.raceTtl-box__txtWrap .condition{
    font-size: 0.8rem;
}
.raceTtl-box__txtWrap .condition{color: var(--dark-gray);}
.raceTtl-box__weather{
        display: flex;
        flex-direction: column;
        align-items: center;
        line-height: 1;
        gap:5px;
        flex-shrink: 0;
}
.el_raceStart{
    font-size: 0.7rem;
    line-height: 1;
    color: var(--dark-gray);
}
.el_raceStart .time{
    font-family: var(--roboto);
    font-size: 1.3em;
    font-weight: 700;
    color: var(--main-black);
}
.weather_label{
    display: flex;
    align-items: center;
    border: 3px solid var(--site-color);
    border-radius: 8px;
}
.weather_label.turf{border-color: var(--turf); background-color: var(--turf);}
.weather_label .weather_ico{padding: 5px; background-color: var(--white); border-radius: 5px 0 0 5px;}
.weather_label .weather_ico img{height: 0.8rem; width: auto;}
.weather_label .weather_ico.sun img{filter: brightness(0) saturate(100%) invert(74%) sepia(74%) saturate(2179%) hue-rotate(339deg) brightness(104%) contrast(102%);}
.weather_label .weather_ico.cloud img{filter: brightness(0) saturate(100%) invert(41%) sepia(9%) saturate(530%) hue-rotate(201deg) brightness(98%) contrast(90%);}
.weather_label .weather_ico.rain img{filter: brightness(0) saturate(100%) invert(20%) sepia(96%) saturate(2238%) hue-rotate(226deg) brightness(90%) contrast(74%);}
.weather_label .racetrack{font-size: 0.7rem; color: var(--white); font-weight:normal; padding: 5px;}

.raceTtl_btnWrap {
    display: flex;
    gap: 12px;
    width: 100%;
  }

  .raceTtl_btn {
    width: 50%;
    display: flex;
    align-items: center;
    gap: 5px;
    padding:8px 30px 8px 15px;
    border-radius: 100px;
    font-size: 1.1rem;
    cursor: pointer;
    font-weight: bold;
    position: relative;
  }

  .raceTtl_btn:hover{opacity: 0.7;}

  .ipat {
    background-color: #e0f5e9;
    border: 2px solid var(--green);
    color: var(--green);
  }

  .result {
    background-color: #fdecea;
    border: 2px solid var(--red);
    color: var(--red);
  }

  .raceTtl_btn__ico img {
    height: 1.1rem;
    width: auto;
  }
  .result .raceTtl_btn__ico img{filter: brightness(0) saturate(100%) invert(39%) sepia(81%) saturate(4774%) hue-rotate(344deg) brightness(105%) contrast(91%);}
  .ipat .raceTtl_btn__ico img{filter: brightness(0) saturate(100%) invert(39%) sepia(42%) saturate(747%) hue-rotate(73deg) brightness(92%) contrast(87%);}


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

/* レースナビ */
.raceNavi_btn__num,.raceNavi_btn__date,.raceNavi_placeWrap{font-size: 1.2rem;}

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

.raceNavi_btn__date {
    background-color:var(--white);
    border-radius: 8px;
    padding:12px 26px 12px 10px;
    font-family: var(--roboto);
    font-weight: bold;
    display: flex;
    gap:3px;
    align-items: center;
    line-height: 1;
    position: relative;
    color: var(--main-black);
}
.raceNavi_btn__date:hover{opacity: 0.7;}
.raceNavi_btn__date:after{
    content: '';
  width: 8px;
  height: 8px;
  border: 0;
  border-bottom: solid 2px var(--main-black);
  border-right: solid 2px var(--main-black);
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  margin: auto;
}

.raceNavi_btn__date .week{
    background-color: #ffebee;
    color: #FF5A34;
    border-radius: 100px;
    font-size: 0.6rem;
    line-height: 1;
    width: calc(0.6rem + 9px);
    height: calc(0.6rem + 9px);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.2rem;
}

.raceNavi_btn__date .week.sun{background-color: #ffebee; color: #FF5A34;}
.raceNavi_btn__date .week.sat{background-color: #def2ff; color: #3471ff;}

.raceNavi_date__dropdown{
    position: absolute;
    top: 110%;
    min-width: 100%;
    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);

    display: grid; 
    grid-template-columns: repeat(3, minmax(3.25rem, 1fr)); 
    gap: 6px 8px; 
    padding: 8px;
    width: max-content; 
    max-height: calc(calc(1rem + 24px) * 4); 
    overflow-y: auto;
}

#raceNavi_date__dropdown{
    display: none;
}

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

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

.raceNavi_date__dropdown a:hover{opacity: 1;}
.raceNavi_date__dropdown .raceNavi_btn__date:hover{opacity: 1; background-color: var(--global-gray-10);}

.bl_raceNavi{
    background-color: var(--global-gray-20);
    display: flex;
    justify-content: space-between;
    padding:15px 20px;
    align-items: center;
}

.webpaper .bl_raceNavi {
  background-color:var(--webpaper);
}

.salon .bl_raceNavi{
  background-color:var(--salon);
}

.raceNavi_placeWrap{
    list-style: none;
    display: flex;
    gap:15px;
    font-weight: bold;
    color: #161616;
}

.raceNavi_placeWrap li a{padding: 0 8px 5px; display: block;}
.raceNavi_placeWrap li.active a{color:#FFF !important; border-bottom: 4px solid #FFF;}

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

.raceNavi_btn__num{
    background-color: var(--menuBar-100);
    color: var(--white);
    border-radius: 8px;
    padding: 12px 26px 12px 10px;
    font-family: var(--roboto);
    font-weight: bold;
    display: flex;
    gap: 3px;
    align-items: center;
    line-height: 1;
    position: relative;
}

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

.raceNavi_num__dropdown{
    position: absolute;
    top: 110%;
    min-width: 100%;
    display: grid; 
    grid-template-columns: repeat(4, minmax(3.25rem, 1fr)); 
    gap: 6px 8px; 
    padding: 8px;
    width: max-content; 
    max-height: calc(calc(1rem + 24px) * 4); 
    overflow-y: auto;
    right: 0; 
    left: auto; 
    z-index: 1;
    list-style: none;
    border-radius: 8px;
    background-color: var(--menuBar-100);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

#raceNavi_num__dropdown{
    display: none;
}

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

  .raceNavi_num__dropdown::-webkit-scrollbar-track{
    background-color: var(--menuBar-100);
    border-radius: 0 8px 8px 0;
  }
  .raceNavi_num__dropdown::-webkit-scrollbar-thumb{
    background-color:var(--global-gray-50);
    border: 2px solid var(--menuBar-100);
    border-radius: 100px;
  }

.raceNavi_num__dropdown a:hover{opacity: 1;}
.raceNavi_num__dropdown .raceNavi_btn__num:hover{opacity: 1; background-color: #222930;}

/* 的中速報パーツ */
.bl_hittingNews {
    background-color:var(--menuBar-100);
    padding:20px;
  }

  .hittingNews__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }

  .el_ttl__left-ico {
    display: flex;
    align-items: center;
    gap:5px;
    font-size: 1.2rem;
  }
  .el_ttl__left-ico.white{
    color: #fff;
  }

  .ttl__left-ico__img img{
    height: 1.8rem;
    width: auto;
  }

  .hittingNews__btnWrap {
    display: flex;
    gap: 10px;
  }

  /* ボタン共通スタイル */
  .hittingNews__btn{
    position: relative; /* 矢印を絶対配置するため */
    padding: 8px 25px 8px 12px; /* 右側の余白確保 */
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    border: none;
    border-radius: 100px;
    display: flex;
    align-items: center;
  }

.hittingNews__btn:hover{opacity: 0.7;}

  /* 矢印を入れるspan */
  .arrow-container {
    position: absolute;
    right: 8px;  /* ボタン右端からの距離 */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 12px;
    height: 20px;
    justify-content: center;
    align-items: center;
    pointer-events: none; /* 矢印はクリックイベントを妨げない */
  }

/* 上向き矢印 */
.arrow-up {
width: 0;
height: 0;
border-left: 3px solid transparent;  
border-right: 3px solid transparent; 
border-bottom: 6px solid currentColor;
}

/* 下向き矢印 */
.arrow-down {
width: 0;
height: 0;
border-left: 3px solid transparent;  
border-right: 3px solid transparent;
border-top: 6px solid currentColor;
}

  /* 大穴順 */
  .hittingNews__btn.longShot {
    background-color:var(--topics);
    color: #fff;
  }

  /* 新着順 */
  .hittingNews__btn.new {
    background-color: #fff;
    color: var(--main-black);
  }

 /* 的中リスト  */
 .hittingList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px; /* 縦の間隔 */
  }

  .hitting_box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 10px;
    background-color: #fff;
    border-radius: 8px;
  }

  .el_icoName_vertical {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 4rem;
  }

  .el_icoName_beside{
    display: flex;
    align-items: center;
    gap:5px;
  }

  .icoName_ico {
    width: 3rem;
    height: 3rem;
    background-color: #ccc;
    border-radius: 50%;
    margin-bottom: 4px;
    overflow: hidden;
    position: relative;
  }

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

  .el_icoName_beside .icoName_ico{
    width: 1.8rem;
    height: 1.8rem;
  }

  .icoName_name {
    font-size: 0.8rem;
    text-align: center;
    color: var(--global-gray-50);
  }

  .hitting_detail {
    flex: 1;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
  }

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

  .el_racettl{font-size: 1rem;}

.hitting_detail__horse{
    font-weight: bold;
    font-size: 1rem;
}

  .hitting_mark img {
    width: 2.4rem;
    height: auto;
  }

  .el_ttl__tag{
    font-size: 0.9rem;
    background-color: var(--menuBar-100);
    color: var(--white);
    font-weight: bold;
    padding: 8px 15px 8px 10px;
    border-radius: 0 100px 100px 0;
    display: inline-block;
  }

  .el_ttl__box_black{
    font-size: 0.9rem;
    background-color: var(--menuBar-100);
    color: var(--white);
    font-weight: bold;
    text-align: center;
    padding: 8px 15px 8px 15px;
  }

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

  .el_rankingLabel{
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 5px;
  z-index: 2;
  width: calc(1.2rem + 10px);
  text-align: center;
  font-size: 1.2rem;
  font-family: var(--roboto);
  font-weight: bold;
  }

  .el_rankingLabel.gold{background: var(--gold);}
  .el_rankingLabel.silver{background: var(--silver);}
  .el_rankingLabel.bronze{background: var(--bronze);}

  .el_rankingLabel:after{
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    height: 0;
    width: 0;
    border-bottom: calc(calc(1.2rem + 10px) /4) solid transparent;
  }

  .el_rankingLabel.gold:after{border-left: calc(calc(1.2rem + 10px) /2) solid var(--gold); border-right: calc(calc(1.2rem + 10px) /2) solid var(--gold);}
  .el_rankingLabel.silver:after{border-left: calc(calc(1.2rem + 10px) /2) solid var(--silver); border-right: calc(calc(1.2rem + 10px) /2) solid var(--silver);}
  .el_rankingLabel.bronze:after{border-left: calc(calc(1.2rem + 10px) /2) solid var(--bronze); border-right: calc(calc(1.2rem + 10px) /2) solid var(--bronze);}

  .el_btn__follow{
    background: var(--white);
    border-radius: 3px;
    border: 1px solid var(--global-gray-30);
    padding:5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    font-size: 0.5rem;
    color: #26B3FF;
    cursor: pointer;
  }
  .el_btn__follow.done{
    color:var(--global-gray-30);
  }
  .el_btn__follow .ico_checked img{
    width: auto;
    height: 1.1rem;
    filter: brightness(0) saturate(100%) invert(83%) sepia(5%) saturate(3%) hue-rotate(64deg) brightness(100%) contrast(88%);
  }

  .el_btn__follow:hover{opacity: 0.7; }

  .el_icon__follow {
    display: inline-block;
    width: 1.1rem;       /* アイコン全体のサイズ */
    height: 1.1rem;
    border-radius: 50%;
    border: 2px solid #26B3FF; /* 丸の枠色と太さ */
    position: relative;
    box-sizing: border-box;
  }
  .el_icon__follow::before,
  .el_icon__follow::after {
    content: '';
    position: absolute;
    background-color: #26B3FF;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .el_icon__follow::before {
    width: 50%; /* 丸の半分の幅に設定 */
    height: 2px;
  }
  .el_icon__follow::after {
    width: 2px;
    height: 50%; /* 丸の半分の高さに設定 */
  }

  .el_btn_AIkaime{
    background: linear-gradient(90deg,rgba(72, 242, 179, 1) 0%, rgba(0, 185, 202, 1) 36%, rgba(0, 84, 202, 1) 100%);
    color: var(--white);
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.2rem;
    padding: 10px 28px 10px 10px;
    margin: 0 10px;
    display: flex;
    gap: 8px;
    align-items: center;
    position: relative;
    justify-content: center;
  }
  .el_btn_AIkaime:after{
    content: "";
    position: absolute;
    top: 50%;
    right: 10px;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .el_btn_AIkaime .ico_ai img{
    height: 3.2rem;
    width: auto;
    filter: brightness(0) saturate(100%) invert(98%) sepia(1%) saturate(2%) hue-rotate(321deg) brightness(115%) contrast(100%);
  }

  .el_ttl__normal-sml{
    font-size: 1rem;
    font-weight: normal;
  }

  .el_btn__radius-solid-gray{
    color: var(--global-gray-50);
    border: 1px solid var(--global-gray-30);
    border-radius: 100px;
    padding: 8px 30px;
    font-size: 1.1rem;
    display: inline-block;
    position: relative;
  }

  .el_btn__radius-solid-gray input, .el_btn__radius-solid-gray a{
    color: var(--global-gray-50);
  }

  .el_btn__radius-fill-gray{
    color: var(--white);
    background: var(--global-gray-50);
    border-radius: 100px;
    padding: 8px 30px;
    font-size: 1.1rem;
    display: inline-block;
    position: relative;
  }

  .el_btn__radius-fill-gray input,.el_btn__radius-fill-gray a{
    color: var(--white);
  }

  .el_btn__radius-solid-gray:hover{
    opacity: 0.7;
  }

  .el_btn__radius-fill-gray:hover{
    opacity: 0.7;
  }

  .el_btn__radius-solid-gray.arrow,.el_btn__radius-fill-gray.arrow{
    padding-right:45px;
  }

  .el_btn__radius-fill-gray.close::before,.el_btn__radius-fill-gray.close::after{
    content: "";
    position: absolute;
    top: calc(8px + 0.45em);
    bottom: 0;
    left: 25px;
    width: 2px; /* 棒の幅（太さ） */
    height: 1em; /* 棒の高さ */
    background: var(--white); /* バツ印の色 */
    margin: auto 0;
  }

  .el_btn__radius-solid-gray.close::before,.el_btn__radius-solid-gray.close::after{
    content: "";
    position: absolute;
    top: calc(8px + 0.45em);
    bottom: 0;
    left: 25px;
    width: 2px; /* 棒の幅（太さ） */
    height: 1em; /* 棒の高さ */
    background: var(--global-gray-30); /* バツ印の色 */
    margin: auto 0;
  }

  .el_btn__radius-solid-gray.close:before, .el_btn__radius-fill-gray.close:before{
    transform: translate(-50%,-50%) rotate(45deg);
  }
   
  .el_btn__radius-solid-gray.close:after, .el_btn__radius-fill-gray.close:after{
    transform: translate(-50%,-50%) rotate(-45deg);
  }

  .el_btn__radius-solid-gray.arrow.prev, .el_btn__radius-solid-gray.close,.el_btn__radius-fill-gray.close{
    padding-left:45px;
    padding-right: 30px;
  }

  .el_btn__radius-fill-gray.arrow.prev{
    padding-left:45px;
    padding-right: 30px;
  }

  .el_btn__radius-solid-gray.arrow.prev:after{
    content: '';
    width: 0.5em;
    height: 0.5em;
    border: 0;
    border-bottom: solid 2px var(--global-gray-30);
    border-right: solid 2px var(--global-gray-30);
    transform: rotate(-225deg);
    position: absolute;
    top: 0;
    left: 20px;
    bottom: 0;
    margin: auto;
  }

  .el_btn__radius-solid-gray.arrow.down:after{
    content: '';
    width: 0.5em;
    height: 0.5em;
    border: 0;
    border-bottom: solid 2px var(--global-gray-30);
    border-right: solid 2px var(--global-gray-30);
    transform: rotate(45deg);
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    margin: auto;
  }

  .el_btn__radius-solid-gray.arrow.up:after{
    content: '';
    width: 0.5em;
    height: 0.5em;
    border: 0;
    border-bottom: solid 2px var(--global-gray-30);
    border-right: solid 2px var(--global-gray-30);
    transform: rotate(225deg);
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    margin: auto;
  }

  .el_btn__radius-solid-gray.arrow.up:after{
    content: '';
    width: 0.5em;
    height: 0.5em;
    border: 0;
    border-bottom: solid 2px var(--global-gray-30);
    border-right: solid 2px var(--global-gray-30);
    transform: rotate(225deg);
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    margin: auto;
  }

  .el_btn__radius-solid-gray.arrow.next:after{
    content: '';
    width: 0.5em;
    height: 0.5em;
    border: 0;
    border-bottom: solid 2px var(--global-gray-30);
    border-right: solid 2px var(--global-gray-30);
    transform: rotate(-45deg);
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    margin: auto;
  }

  .el_btn__radius-fill-gray.arrow.next: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: 20px;
    bottom: 0;
    margin: auto;
  }

  .el_btn__radius-fill-gray.arrow.down: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: 20px;
    bottom: 0;
    margin: auto;
  }

  .el_btn__radius-fill-gray.arrow.up:after{
    content: '';
    width: 0.5em;
    height: 0.5em;
    border: 0;
    border-bottom: solid 2px var(--white);
    border-right: solid 2px var(--white);
    transform: rotate(225deg);
    position: absolute;
    top: 0;
    right: 20px;
    bottom: 0;
    margin: auto;
  }

  .el_btn__radius-fill-gray.arrow.prev:after{
    content: '';
    width: 0.5em;
    height: 0.5em;
    border: 0;
    border-bottom: solid 2px var(--white);
    border-right: solid 2px var(--white);
    transform: rotate(-225deg);
    position: absolute;
    top: 0;
    left: 20px;
    bottom: 0;
    margin: auto;
  }


.el_btn_underLine-gray{
    color: var(--global-gray-50);
    font-weight: bold;
    border-bottom: 3px solid var(--global-gray-50);
    padding: 8px 10px;
    font-size: 1.1rem;
    display: inline-block;
    position: relative;
    cursor: pointer;
    min-width: 200px;
}

.el_btn_underLine-gray:hover{opacity: 0.7; cursor: pointer;}

.el_btn_underLine-gray input{
  color: var(--global-gray-50);
  font-weight: bold;
  cursor: pointer;
}

.el_btn_underLine-gray.close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
  content: "";
    position: absolute;
    top: calc(8px + 0.5em);
    bottom: 0;
    left: 15px;
    width: 3px;
    height: 1em;
    background: var(--global-gray-50);
    margin: auto 0;
}

.el_btn_underLine-gray.close:before {
  transform: translate(-50%, -50%) rotate(45deg);
  content: "";
    position: absolute;
    top: calc(8px + 0.5em);
    bottom: 0;
    left: 15px;
    width: 3px;
    height: 1em;
    background: var(--global-gray-50);
    margin: auto 0;
}


.el_btn_underLine-gray.arrow.prev:after {
  content: '';
  width: 0.7em;
  height: 0.7em;
  border: 0;
  border-bottom: solid 3px var(--global-gray-50);
  border-right: solid 3px var(--global-gray-50);
  transform: rotate(-225deg);
  position: absolute;
  top: 0;
  left: 12px;
  bottom: 0;
  margin: auto;
}

.el_btn_underLine-gray.arrow.next:after {
  content: '';
  width: 0.7em;
  height: 0.7em;
  border: 0;
  border-bottom: solid 3px var(--global-gray-50);
  border-right: solid 3px var(--global-gray-50);
  transform: rotate(-45deg);
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  margin: auto;
}

.el_btn_underLine-gray.arrow.down:after {
  content: '';
  width: 0.7em;
  height: 0.7em;
  border: 0;
  border-bottom: solid 3px var(--global-gray-50);
  border-right: solid 3px var(--global-gray-50);
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  margin: auto;
}

.el_btn_underLine-gray.arrow.up:after {
  content: '';
  width: 0.7em;
  height: 0.7em;
  border: 0;
  border-bottom: solid 3px var(--global-gray-50);
  border-right: solid 3px var(--global-gray-50);
  transform: rotate(225deg);
  position: absolute;
  top: 0;
  right: 10px;
  bottom: 0;
  margin: auto;
}

.el_btn_underLine-gray.arrow.next,.el_btn_underLine-gray.arrow.down,.el_btn_underLine-gray.arrow.up{
  padding-right: 35px;
}
.el_btn_underLine-gray.arrow.prev,.el_btn_underLine-gray.close{
  padding-left: 35px;
}

  .el_ico_chip{
    margin-right: 0.3em;
  }

.el_ico_chip img{
  height: 1.1em;
  width: auto;
  display: inline-block;
  filter: brightness(0) saturate(100%) invert(81%) sepia(28%) saturate(4278%) hue-rotate(338deg) brightness(101%) contrast(102%);
}

.el_balloon-border-left{
  display: inline-block;
  margin-bottom: 15px;
  padding: 15px;
  border: 3px solid var(--global-gray-30);
  border-radius: 8px;
  background-color: #ffffff;
  text-align: left;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
  color: #000000;
  position: relative;
}


.el_balloon-border-left:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 18%;
  border-style: solid;
  border-width: 15px 20px 0 0;
  border-color: var(--global-gray-30) transparent transparent;
  translate: -50% 100%;
  transform: skew(-15deg);
  transform-origin: top;
}

.el_balloon-border-left:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 18%;
  border-style: solid;
  border-width: 9px 12px 0 0;
  border-color: #ffffff transparent transparent;
  translate: calc(-50% - 1px) 100%;
  transform: skew(-15deg);
  transform-origin: top;
}

/* ポイント表示 */
.el_point_txt{
  font-size: 1.5em;
  font-family: var(--roboto);
  font-weight: 900;
  position: relative;
}

.el_point_txt .ico_point{
  position: relative;
  width: 1em;
  height: 1em;
  display: inline-block;
  background-image: url(/img/icons/ico_point.svg);
  background-repeat: no-repeat;
  background-size: 100%;
  margin-right: 5px;
  top: 0.1em;
}

.el_AIcredit{
  text-align: right;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 3px;
  color: var(--global-gray-50);
  font-size: 0.8rem;
  line-height: 1;
  margin: 5px 0;
  font-family: var(--roboto);
}

.el_AIcredit .btn_aboutThis img{
  height: 1.2em;
  width: auto;
}

.el_AIcredit .btn_aboutThis:hover{opacity: 0.7;}

/* ログインカットパーツ */
.plan_entry__wrap{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.plan_entry__btn{
  background: var(--site-color);
  color: var(--white);
  font-weight: bold;
  font-size: 1.3rem;
  text-align: center;
  border-radius: 8px;
  padding: 15px 20px;
  display: flex;
  gap:8px;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}

.plan_entry__btn .grow-1{
  flex-grow: 1;
}

.plan_entry__btn .arrow{
  display: block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: var(--white);
    position: relative;
    box-sizing: border-box;
}

.plan_entry__btn .arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(50% - 2px);
  width: 0.4em;
  height: 0.4em;
  border-top: 2px solid var(--site-color);
  border-right: 2px solid var(--site-color);
  transform: translate(-50%, -50%) rotate(45deg);
  box-sizing: border-box;
}

.el_utility__txtLink {
    font-size: 0.9rem;
    color: var(--link-blue);
    display: block;
    margin-bottom: 8px;
}

.el_utility__txtLink .iconArrow__next {
    display: inline-block;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: var(--link-blue);
    position: relative;
    box-sizing: border-box;
    margin-right: 4px;
    top: 0.1em;
}
.el_utility__txtLink .iconArrow__next:after {
    content: '';
    position: absolute;
    top: 49%;
    left: calc(50% - 1px);
    width: 0.35em;
    height: 0.35em;
    border-top: 1px solid var(--white);
    border-right: 1px solid var(--white);
    transform: translate(-50%, -50%) rotate(45deg);
    box-sizing: border-box;
}
.loginCut_box{
max-width: 400px;
margin: 30px 15px;
padding: 15px;
background: #fff;
box-shadow: 8px 8px 30px 0px rgba(0, 0, 0, 0.1);
border-radius: 10px;
}

.loginCut_ico__lock{
background: #ececff;
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
margin: 0 auto;
}

.loginCut_ico__lock img{
width: 50px; height: auto; filter: brightness(0) saturate(100%) invert(11%) sepia(97%) saturate(6805%) hue-rotate(261deg) brightness(83%) contrast(121%);
}

.loginCut_box__txt{
font-weight: bold;
font-size: 1rem;
margin: 15px 0;
text-align: center;
}

/* ログインカットPC表示用 */
@media (min-width:685px) {

.loginCut_box{
max-width: 400px;
margin: 30px auto;
padding: 20px;
}

}
/* ログインカットパーツ */


/* 先ドリ注目馬パーツ */
.sakidori_pickupBox{
margin: 1.25rem auto;
max-width: 500px;
background-color: #fafafa;
border-radius: 8px;
border: 2px solid var(--global-gray-50);
}

.sakidori_pickupBox.kanto{
border-color: #1e77c5;
}

.sakidori_pickupBox.kansai{
border-color: #24824f;
}

.sakidori_pB__ttl{
background: var(--global-gray-50);
text-align: center;
color: #ffffff;
font-weight: bold;
font-size: 1rem;
padding: 8px;
border-radius: 6px 6px 0 0;
}

.kanto .sakidori_pB__ttl{
background: #1e77c5;
}
.kansai .sakidori_pB__ttl{
background: #24824f;
}

.sakidori_pB__detailWrap{
	padding: 1rem;
}

.sakidori_pB__horseBox{
background-color: white;
    border-radius: 6px;
    box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
    color: #4a4a4a;
    display: block;
    padding: 0.9rem;
font-size: 0.9rem;
}

.sakidori_pB__txt{
margin-top: 1rem;
font-size: 1rem;
}
/* 先ドリ注目馬パーツ */


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

  .el_ttl__box_black{
    font-size: 1rem;
    padding: 8px 20px;
  }

  .el_rankingLabel{
    padding: 8px;
    z-index: 2;
    width: calc(1.5rem + 16px);
    text-align: center;
    font-size: 1.5rem;
    font-family: var(--roboto);
    font-weight: bold;
  }
  
  .el_rankingLabel:after{
    content: '';
    position: absolute;
    left: 0;
    top: 100%;
    height: 0;
    width: 0;
    border-bottom: calc(calc(1.5rem + 16px) /4) solid transparent;
  }
  
  .el_rankingLabel.gold:after{border-left: calc(calc(1.5rem + 16px) /2) solid var(--gold); border-right: calc(calc(1.5rem + 16px) /2) solid var(--gold);}
  .el_rankingLabel.silver:after{border-left: calc(calc(1.5rem + 16px) /2) solid var(--silver); border-right: calc(calc(1.5rem + 16px) /2) solid var(--silver);}
  .el_rankingLabel.bronze:after{border-left: calc(calc(1.5rem + 16px) /2) solid var(--bronze); border-right: calc(calc(1.5rem + 16px) /2) solid var(--bronze);}

  .el_btn__follow{
    font-size: 0.8rem;
  }
  .el_icon__follow{
    width: 1.3rem;
    height: 1.3rem;
  }
  .el_btn__follow .ico_checked img{height: 1.3rem;}

  .bl_commonSlider_wrap{
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 10px 0;
}
.bl_commonSlider_wrap .commonSwiper{
  padding-bottom: 10px;
  box-sizing: border-box;
}
.custom-navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
  position: relative;
}
.bl_commonSlider_wrap{
  padding: 20px 0;
}
.bl_commonSlider_wrap .commonSwiper{
  padding-bottom: 20px;
}
.custom-navigation {
  margin-top: 20px;
}

.bl_commonSlider_wrap .swiper-button-prev, .bl_commonSlider_wrap .swiper-rtl .swiper-button-next{
  left: 10px;
}
.bl_commonSlider_wrap .swiper-button-next, .bl_commonSlider_wrap .swiper-rtl .swiper-button-prev{
  right: 10px;
}

.el_ttl__normal-sml{
  font-size: 1.2rem;
}

.el_ttl__tag{font-size: 1rem;}

.el_btn__radius-fill-gray,.el_btn__radius-solid-gray{
  font-size: 1.3rem;
  padding: 13px 30px;
}

.el_btn__radius-fill-gray.arrow.prev:after {
	content: '';
    width: 0.6em;
    height: 0.6em;
    left: 25px;
}

/*
.el_btn__radius-solid-gray.arrow.down:after{
content: '';
  width: 0.6em;
  height: 0.6em;
  right: 25px;
}

.el_btn__radius-solid-gray.arrow.up:after{
content: '';
  width: 0.6em;
  height: 0.6em;
  right: 25px;
}

.el_btn__radius-fill-gray.arrow.next:after{
content: '';
  width: 0.6em;
  height: 0.6em;
  right: 25px;
}
*/



.el_btn__radius-solid-gray.arrow.up, .el_btn__radius-fill-gray.arrow.up, .el_btn__radius-solid-gray.arrow.down, .el_btn__radius-fill-gray.arrow.down{
  padding-right: 55px;
}
 .el_btn__radius-solid-gray.close,  .el_btn__radius-fill-gray.close{
  padding-left: 55px;
}

.el_btn__radius-solid-gray.close::before, .el_btn__radius-solid-gray.close::after {
  content: "";
  position: absolute;
  top: calc(13px + 0.5em);
  bottom: 0;
  left: 30px;
  width: 2px;
  height: 1em;
  background: var(--global-gray-30);
  margin: auto 0;
}

.el_btn__radius-fill-gray.close::before, .el_btn__radius-fill-gray.close::after {
  content: "";
  position: absolute;
  top: calc(13px + 0.5em);
  bottom: 0;
  left: 30px;
  width: 2px;
  height: 1em;
  background: var(--white);
  margin: auto 0;
}

.el_btn_underLine-gray{
  padding: 8px 10px;
  font-size: 1.3rem;
}

.el_btn_underLine-gray.close:after {
transform: translate(-50%, -50%) rotate(-45deg);
content: "";
  position: absolute;
  top: calc(12px + 0.5em);
  bottom: 0;
  left: 15px;
  width: 3px;
  height: 1em;
  background: var(--global-gray-50);
  margin: auto 0;
}

.el_btn_underLine-gray.close:before {
transform: translate(-50%, -50%) rotate(45deg);
content: "";
  position: absolute;
  top: calc(12px + 0.5em);
  bottom: 0;
  left: 15px;
  width: 3px;
  height: 1em;
  background: var(--global-gray-50);
  margin: auto 0;
}


.el_btn_underLine-gray.arrow.prev:after {
content: '';
width: 0.7em;
height: 0.7em;
border: 0;
border-bottom: solid 3px var(--global-gray-50);
border-right: solid 3px var(--global-gray-50);
transform: rotate(-225deg);
position: absolute;
top: 0;
left: 12px;
bottom: 0;
margin: auto;
}

.el_btn_underLine-gray.arrow.next:after {
content: '';
width: 0.7em;
height: 0.7em;
border: 0;
border-bottom: solid 3px var(--global-gray-50);
border-right: solid 3px var(--global-gray-50);
transform: rotate(-45deg);
position: absolute;
top: 0;
right: 10px;
bottom: 0;
margin: auto;
}

.el_btn_underLine-gray.arrow.down:after {
content: '';
width: 0.7em;
height: 0.7em;
border: 0;
border-bottom: solid 3px var(--global-gray-50);
border-right: solid 3px var(--global-gray-50);
transform: rotate(45deg);
position: absolute;
top: 0;
right: 10px;
bottom: 0;
margin: auto;
}

.el_btn_underLine-gray.arrow.up:after {
content: '';
width: 0.7em;
height: 0.7em;
border: 0;
border-bottom: solid 3px var(--global-gray-50);
border-right: solid 3px var(--global-gray-50);
transform: rotate(225deg);
position: absolute;
top: 0;
right: 10px;
bottom: 0;
margin: auto;
}

.el_btn_underLine-gray.arrow.next,.el_btn_underLine-gray.arrow.down,.el_btn_underLine-gray.arrow.up{
padding-right: 35px;
}
.el_btn_underLine-gray.arrow.prev,.el_btn_underLine-gray.close{
padding-left: 35px;
}

}
/* ↑PC表示用のレスポンシブスタイル (768px~)ここまで↑ */


/* モバイル表示用のレスポンシブスタイル (〜767px)ここから */
@media (max-width: 767px) {

    .raceTtl_wrapper{
        margin: 10px;
        display: flex;
        flex-direction: column;
        gap:8px;
    }

    .grade_label{
        font-size: 0.7em;
    }

    .section-title {
        font-size: 1rem;
        line-height: 1.5;
        color: var(--main-black);
        font-weight: bold;
        font-family: 'Noto Sans JP', sans-serif;
        border-left: 4px solid var(--primary);
        padding-left: 6px;
        margin-bottom: 10px;
    }

    .featured-race{
        background: #323F4C;
        padding:20px 10px;
        width: 100%;
    }
    
    .featured-race__ttlWrap{
        padding: 8px;
    }
    .raceTtl-box__numWrap .date{font-size: 0.8rem;}
    .raceTtl-box__numWrap .place{font-weight: bold;font-size: 1.1rem;}
    .raceTtl-box__numWrap .num{font-weight: bold; font-size: 1.2rem;}

    .raceTtl-box__txtWrap .name{
        font-size: 1.1rem;
    }
    .raceTtl_btnWrap{gap:10px;}
    .raceTtl_btn {
        font-size: 1rem;
    }
    .raceTtl_btn__ico img{height: 1rem;}

/* レースナビsp */
.bl_raceNavi{
    padding:10px;
}
.raceNavi_btn__num,.raceNavi_btn__date,.raceNavi_placeWrap{font-size: 1rem;}
.raceNavi_placeWrap{
    gap:10px;
}

/* 的中速報sp */
.bl_hittingNews {
    padding:20px 10px;
  }
.ttl__left-ico__img img{
    height: 1.5rem;
    width: auto;
  }

}
/* ↑モバイル表示用のレスポンシブスタイル (〜767px)ここまで↑ */




/* プロフィールカード モバイルファースト*/
/* プロフィールカード */
.profile-card {
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
    width: calc(100% - 1rem);
    max-width: 600px;
    margin: 0 auto;
}

/* グラデーションボーダー */
.profile-card.grd {
    position: relative !important;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #feca57, #ff9ff3, #54a0ff) !important;
    padding: 3px !important;
    border-radius: 15px !important;
    box-shadow: none !important;
}

.profile-card.grd .profile-card__header,
.profile-card.grd .profile-card__description,
.profile-card.grd .profile-card__footer {
    background: var(--white) !important;
    border-radius: 12px !important;
    position: relative;
    z-index: 1;
    margin: 0;
}

.profile-card.grd .profile-card__header {
    border-radius: 12px 12px 0 0 !important;
}

.profile-card.grd .profile-card__footer {
    border-radius: 0 0 12px 12px !important;
}
.profile-card.salon {
  position: relative !important;
  /* 紫の光るグラデーション */
  background: linear-gradient(135deg, #5a00ff, #7a2cff, #a84dff, #7a2cff, #5a00ff) !important;
  background-size: 200% 200% !important;
  animation: salonGlow 6s ease infinite !important;
  padding: 3px !important;
  border-radius: 15px !important;
  box-shadow: 0 4px 20px rgba(122, 44, 255, 0.35), 0 0 24px rgba(168, 77, 255, 0.25) !important;
}

.profile-card.salon .profile-card__header,
.profile-card.salon .profile-card__description,
.profile-card.salon .profile-card__footer {
    background: var(--white) !important;
    border-radius: 12px !important;
    position: relative;
    z-index: 1;
    margin: 0;
}

.profile-card.salon .profile-card__header {
    border-radius: 12px 12px 0 0 !important;
}

.profile-card.salon .profile-card__footer {
    border-radius: 0 0 12px 12px !important;
}

@keyframes salonGlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.profile-card.salon .rank-button {
  background-color: #6633FF;
}
/* 金色ボーダー */
.profile-card.gold {
    position: relative !important;
    background: linear-gradient(45deg, #ffd700, #ffed4e, #ffc107, #ff8f00, #ffd700, #ffeb3b) !important;
    padding: 3px !important;
    border-radius: 15px !important;
    box-shadow: 0 4px 20px rgba(255, 215, 0, 0.3) !important;
}

.profile-card.gold .profile-card__header,
.profile-card.gold .profile-card__description,
.profile-card.gold .profile-card__footer {
    background: var(--white) !important;
    border-radius: 12px !important;
    position: relative;
    z-index: 1;
    margin: 0;
}

.profile-card.gold .profile-card__header {
    border-radius: 12px 12px 0 0 !important;
}

.profile-card.gold .profile-card__footer {
    border-radius: 0 0 12px 12px !important;
}

.profile-card__header {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: 0.5rem;
    padding: 1rem 0rem 0.5rem 1rem;

}

.profile-card__avatar {
    flex-shrink: 0;
}

.profile-card__avatar-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
}

.profile-card__info {
    flex: 1;
    min-width: 0;
}

.profile-card__title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    flex-wrap: nowrap;
    margin-bottom: -0.25rem;
}

.profile-card__category {
    font-size: var(--font-sm);
    color: var(--text-secondary, #666);
}


.profile-card__name {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--blue);
    margin-bottom: 0.25rem;
}

.profile-card__tags {
    display: flex;
    justify-content: flex-start;
    gap: 0.2rem;
    flex-wrap: wrap;
}

.profile-card__tag {
    color: var(--dark-gray);
    font-size: var(--font-xxxs);
    background: #FFF;
    padding: 0.25rem 0.4375rem;
    border-radius: 12px;
    border: 1px solid var(--dark-gray);
}

.profile-card__stats {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-end;
    justify-content: flex-start;
    margin-top: 0;
    flex-shrink: 0;
}

.profile-card__stat {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 3px 0 0 3px;
    font-size: var(--font-xxs);
    font-weight: 700;
    color: white;
    min-width: 6em;
}


.profile-card__footer {
    display: flex;
    padding-top: 7px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    align-self: stretch;
    padding: 0.5rem;
}


.profile-card__actions {
    flex-direction: row;
    gap: 1rem;
}

.profile-card__stat--honmei {
    background: #ef4444;
}

.profile-card__stat--renshow {
    background: #22c55e;
}

.profile-card__stat--ichion {
    background: #ec4899;
}

.profile-card__description {
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--text-secondary, #666);
    text-align: left;
}

.profile-card__text {
    margin: 0;
    padding: 1rem;
}

.profile-card__actions {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
}

.profile-card__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.625rem 0.625rem;
    border-radius: 24px;
    border: 2px solid;
    background: white;
    font-weight: 600;
    font-size: var(--font-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    width: auto;
}


.profile-card__btn--follow {
  background: #26B3FF;
  color: white;
}

.profile-card__btn--follow:hover {

    border-color: #26B3FF;
    color: #26B3FF;
    background-color: #FFF;
}

.profile-card__btn--follow .icon__follow img {
  filter: brightness(0) invert(1);
}


.profile-card__btn--follow:hover .icon__follow img {
    filter: invert(0);
}

.profile-card__btn--chip:hover .icon__chip img {
    filter: brightness(0) invert(1);
}

.profile-card__btn--chip {
    border-color: #f59e0b;
    color: #f59e0b;
}
.profile-card__btn--chip .icon__chip img {
    filter: invert(60%) sepia(96%) saturate(1352%) hue-rotate(8deg) brightness(101%) contrast(103%);
}

.profile-card__btn--chip:hover {
    background: #f59e0b;
    color: white;
}
.profile-card__btn--about {
    text-decoration: underline;
    color: var(--dark-gray);
    font-size: var(--font-sm);
}
.profile-card__btn--about:hover {
    color: var(--primary);
}

/* プロフィールカード ヒットボックス */
.profile-card__footer_hit {
    padding-top: 7px;
    gap: 8px;
    padding: 0.5rem;
}
.profile-card__hitting_box {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    background-color: var(--global-gray-10);
    color: var(--main-black);
    padding: 1rem;
    border-radius: 4px;
}

.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://wwwyuma.esys.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);
  }
  
  .bestHit_list__box .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: 1.2rem;
    border-left: 6px solid var(--salon);
    border-bottom: 1px solid var(--salon);
    color: var(--salon);
    font-weight: bold;
    padding-left: 11px;
    padding-bottom: 5px;
    display: block;
  }


  .profile-card__footer .salon_raceList__wrap{
    display: flex;
    flex-direction: column;
    gap:10px;
    background-color: inherit;
    padding: 0px;
    width: 100%;
  }
  
  .profile-card__footer a.salon_raceList__btn{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    background: var(--white);
    width: 100%;
    position:relative;
    cursor: pointer;
    border-bottom: 1px solid var(--global-gray-20);
    padding: 0px 0px 8px 0px;
  }
  
  .profile-card__footer a.salon_raceList__btn:last-child{
    border-bottom: none;
  }
  
  .profile-card__footer .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.75rem;
    line-height: 1;
    padding: 4px;
    border-radius: 3px;
  }
  .profile-card__footer .raceTtl-box__txtWrap .name {
    font-size: 1rem;
}
  .profile-card__footer .salon_raceList__count .count{
      font-family: var(--roboto);
      font-size: 1.4rem;
  }
  
  .profile-card__footer a.salon_raceList__btn .name{color: var(--main-black);}
  
  .profile-card__footer .grade_label{
    font-size: var(--font-xxxs);
  
  }
  .profile-card__footer .raceTtl-box__numWrap .place {
    font-weight: bold;
    font-size: 0.875rem;
}


.profile-card__footer .raceTtl-box__numWrap .num {
    font-weight: bold;
    font-size: 1rem;
} 



/* Prediction Component */
.prediction-component {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 8px;
    padding: 0.75rem;
    gap: 0.75rem;
    box-sizing: border-box;
    min-height: 60px;
}

.prediction-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 0.75rem;
    box-shadow: 0 2px 4px 0 rgba(31, 38, 135, 0.37);
}

.honmei-label {
    background: #F149DB;
    color: white;
    padding: 0.375rem 0.75rem;
    border-radius: 4px;
    font-weight: bold;
    font-size: 0.75rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.prediction-text {
    color: #333;
    font-size: var(--font-lg);
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.prediction-button {
    flex-shrink: 0;
}

.rank-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    background: #4a5568;
    color: white;
    border: none;
    border-radius: 20px;
    padding: 0.5rem 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    min-width: 200px;
}

.rank-button:hover {
    background:var(--primary);
    transform: translateY(-1px);
}

.rank-text {
    background: white;
    color: #4a5568;
    padding: 0.1875rem 0.5rem;
    border-radius: 12px;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1;
}

.button-text {
    font-size: 1.125rem;
}

.arrow-icon {
    background: white;
    color: #e91e63;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    flex-shrink: 0;
}

/* ランク別スタイル */
.rank-text.rank2 {
    background: #ffd700 !important;
    color: #333 !important;
}

.rank-text.rank3 {
    background: linear-gradient(45deg, #ff6b6b, #4e83cd, #96a0f5, #c4a2ff, #57c6fe, #22fff4) !important;
    color: white !important;
}

/* Back Number Section */
.backnumber-section {
    margin: 2rem 0;
}

.backnumber-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: #6b7280;
    color: white;
    border: none;
    border-radius: 24px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    max-width: 400px;
    margin: 0 auto;
}

.backnumber-btn:hover {
    background: #4b5563;
}

.btn-arrow {
    font-size: 1.2rem;
    margin-left: auto;
}

.backnumber-btn .btn-arrow img {
    filter: brightness(0) invert(1) !important;
    width: 16px;
    height: 16px;
    display: inline-block;
}

/* Share Section */
.share-section {
    margin: 2rem 0;
    text-align: center;
    background-color: var(--global-gray-10);
    padding: 12px 15px;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    align-items: center;
    justify-content: center;
}

.share-title {
    font-size: 1rem;
    font-weight: 600;
}

.share-buttons {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    transition: transform 0.2s ease;background-color: #FFF;
}

.share-btn:hover {
    transform: translateY(-2px);
}


.share-btn.facebook img {
    filter: brightness(0) saturate(100%) invert(35%) sepia(44%) saturate(644%) hue-rotate(192deg) brightness(92%) contrast(87%);
}

.share-btn.line img {
    filter: brightness(0) saturate(100%) invert(41%) sepia(86%) saturate(1186%) hue-rotate(72deg) brightness(98%) contrast(100%);
}

.share-btn img {
    width: 24px;
    height: 24px;
    /* filter: brightness(0) invert(1); */
}


/* Topics Pager */
.pager-container {
    display: flex;
    justify-content: center;
    padding: 2rem 0;

}

.pager {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pager-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid var(--global-gray-20);
    background: white;
    color: var(--menuBar-70);
}

.pager-item:hover {
    background: var(--global-gray-20);
    border-color: var(--global-gray-20);
   
}

.pager-number.active {
    background: var(--menuBar-100);
    border-color: var(--menuBar-100);
    color: var(--white);
}

.pager-number.active:hover {
    background: var(--menuBar-100);
    border-color: var(--menuBar-100);
}

.pager-prev,
.pager-next {
    background: var(--dark-gray);
    border-color: var(--dark-gray);
    color: var(--white);
}

.pager-prev:hover,
.pager-next:hover {
    background: var(--dark-gray);
    border-color: var(--dark-gray);
}

.pager-dots {
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    color: var(--global-gray-20);
    font-weight: 500;
}




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

    記事パーツ
    
-------------------------*/

pre {
  margin: 1rem 0;
  padding: 0 0.2rem;
  white-space: pre-line;
  background-color: #eeeeee;
}

code {
  font-weight: normal;
}

/*　画像 */
.imgBox {
    width: 100%;
    margin-bottom: 1rem;
}

.imgBox img {
    width: 100%;
    height: auto;
    display: block;
}

.imgBox figcaption {
  width: fit-content; /* コンテンツサイズに依存するが最大幅は500px */
  width: -moz-fit-content; /* Firefox旧バージョン対応 */
  margin-top: 7px;
  margin-right: auto;
  margin-left: auto;
  font-size: 0.9rem;
}

/*  プロフ */
.article__sub-prof {
    display: flex;
    align-items: center;
    gap:8px;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--global-gray-30);
    padding-bottom: 5px;
    margin-bottom: 10px;
}
.article__sub-prof img {
    width: 40px;
    height: auto;
}
.article__sub-prof .phrase {
    font-size: 0.7rem;
    color: var(--global-gray-50);
}
.premium .article__sub-prof .phrase {
  font-size: 0.7rem;
  color: var(--light-gray);
}

.premium .topic-date {
    font-size: 0.7rem;
    color: var(--light-gray);
}
/*  プロフ　ダーク */
.article__sub-prof .phrase-prem {
    font-size: 0.7rem;
    color: #FFFFFF;
}

/* PCレイアウト用のメインコンテナとサイドバーの配置 (768px以上) */
@media (min-width: 768px) {
.article__sub-prof_wrap {
    display: flex;
    justify-content: flex-start;
    gap:20px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--global-gray-30);
}
.article__sub-prof {
    padding: 0 5px 5px;
    margin-bottom: 0;
    border-bottom: none;
}
}

/* 見出し */
.cap__underline {
    font-size: 1.1rem;
    padding: 0 0.5rem 0.5rem;
    margin-bottom: 1rem;
    color: var(--site-color);
    border-bottom: 3px solid var(--site-color);
    margin: 2.5rem 0rem 2rem;
}

.cap__back-underline {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding: 0.7rem;
    border-bottom: 3px solid var(--site-color);
    background: #ececff;
}

.cap__topttl {
    font-size: 1.1rem;
    position: relative;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 4px solid var(--site-color);
    text-align: center;
}

.cap__topttl:before {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  content: '';
  border: 2px solid var(--site-color);
}

/*　テキスト */
.text_L {text-align: left;}
.text_Cn {text-align:center;}
.text_R {text-align: right;}

/*　文字色 */
.d-red {color: #C10000; font-weight: 600;}
.l-red {color: #ff0000; font-weight: 600;}
.blue {color: #0000cd; font-weight: 600;}
.green {color: #008000; font-weight: 600;}
.yellow {color: #ffd700; font-weight: 600;}
.orange {color: var(--vivid-orange); font-weight: 600;}

.marker-red {background: linear-gradient(transparent 60%, #ffa6b7 60%); padding-bottom: .5%; font-weight: 600}
.marker-blue {background: linear-gradient(transparent 60%, #96bbff 60%); padding-bottom: .5%; font-weight: 600}
.marker-green {background: linear-gradient(transparent 60%, #90ec97 60%); padding-bottom: .5%; font-weight: 600}
.marker-yellow {background: linear-gradient(transparent 60%, #f0ea30 60%); padding-bottom: .5%; font-weight: 600}


/*　太文字 */
.bold {font-weight: 600;}
.ex-bold {font-weight:900;}


/*　文字サイズ */
.txt80 {font-size: 80%;}
.txt90 {font-size: 90%;}
.txt120 {font-size: 120%;}
.txt140 {font-size: 140%;}
.txt160 {font-size: 160%;}
.txt180 {font-size: 180%;}
.txt200 {font-size: 200%;}

/*　ボックス */
.box__background {
    padding: 1rem;
    margin: 1.5rem 0;
    color: #000000;
    background: var(--global-gray-10);
    border-radius: 6px;
}
.box__background p {
    margin: 0; 
    padding: 0;
}

.box__waku {
    padding: 1rem 1rem;
    margin: 1.5rem 0;
    color: #000000;
    background: #ececff;
    border: solid 2px var(--site-color);
    border-radius: 6px;
}
.box__waku p {
    margin: 0; 
    padding: 0;
}

.box__obi {
    margin: 1.5rem 0;
    background: #ececff;
    border-radius: 6px;
}
.box__obi .box-title {
    font-size: 1.1rem;
    background: var(--site-color);
    padding: 0.8rem 1rem;
    text-align: left;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.box__obi p {
    padding: 1rem 1rem;
    margin: 0;
    line-height: 1.5 !important;
}

/*　ユーチューブ */
.video-container {
    position: relative;
    width: 100%;
    height: 0;
    margin: 0 auto 7% auto;
    padding-bottom: 56.25%;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*　吹き出し */
.fuki__L, .fuki__R {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 0 0.5rem 10px;
}

.fuki__L p::before {
    border-right: 8px solid #ccc;
    left: -9px;
}
.fuki__L p::before, .fuki__R p::before {
    content: "";
    position: absolute;
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
    top: 16px;
}

.fuki__L p::after {
    border-right: 8px solid #fff;
    left: -6px;
}
.fuki__L p::after, .fuki__R p::after {
    content: "";
    position: absolute;
    clear: both;
    display: block;
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
    top: 16px;
}

.fuki__L p {
    width: 85%;
    height: auto;
    font-size: 1rem;
    border: 2px solid #ccc;
    padding: 15px;
    position: relative;
    border-radius: 10px;
    margin-top: .6em;
    margin-bottom: 1em;
    margin-left: 1.2em;
}

.fuki__R p::before {
    border-left: 8px solid #ccc;
    right: -9px;
}

.fuki__R p::after {
    border-left: 8px solid #fff;
    right: -6px;
}

.fuki__R p {
    width: 85%;
    height: auto;
    font-size: 1rem;
    border: 2px solid #ccc;
    padding: 15px;
    position: relative;
    border-radius: 10px;
    margin-top: .6em;
    margin-bottom: 1em;
    margin-right: 1.2em;
}

.fuki__L .img-left { margin-left: 4px; margin-top: -1px; float: left; width: 60px; height: 60px;
}
.fuki__R .img-right { margin-right: 4px; margin-top: -1px; float: right; width: 60px; height: 60px;
}
/* 画像の下のテキスト */
.fuki__L .img-description, .fuki__R .img-description {
    padding: 5px 0 0;
    font-size: 0.6rem;
    line-height: 1.2;
    text-align: center;
}


/*　プレミアム系 ダーク背景 */
.cap__underline-prem {
    font-size: 1.1rem;
    padding: 0 0.5rem 0.5rem;
    margin-bottom: 1rem;
    color: var(--pregold);
    border-bottom: 3px solid var(--pregold);
    margin: 2.5rem 0rem 2rem;
}

.cap__back-underline-prem {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    padding: 0.7rem;
    border-bottom: 3px solid var(--pregold);
    background: #fff7d9;
    color: #000000;
}

.cap__topttl-prem {
    font-size: 1.1rem;
    position: relative;
    padding: 1rem;
    margin-bottom: 1rem;
    border: 4px solid var(--pregold);
    text-align: center;
    background: #fff7d9;
    color: #000000;
}

.cap__topttl-prem:before {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  content: '';
  border: 2px solid var(--pregold);
}

/*　ボックス ダーク */
pre.dark {
  margin: 1rem 0;
  padding: 0 0.2rem;
  white-space: pre-line;
  background-color: #eeeeee;
  color: #000000;
}

.box__background-prem {
    padding: 1rem;
    margin: 1.5rem 0;
    color: #000000;
    background: #fff7d9;
    border-radius: 6px;
}
.box__background-prem p {
    margin: 0; 
    padding: 0;
}

.box__waku-prem {
    padding: 0.7rem 1rem;
    margin: 1.5rem 0;
    color: #000000;
    background: #FFF;
    border: solid 2px var(--pregold);
    border-radius: 6px;
}
.box__waku-prem p {
    margin: 0; 
    padding: 0;
}

.box__obi-prem {
    margin: 1.5rem 0;
    background: #fff7d9;
    border-radius: 6px;
    color: #000000;
}
.box__obi-prem .box-title {
    font-size: 1.1rem;
    background: var(--pregold);
    padding: 0.5rem 1rem;
    text-align: left;
    color: #000000;
    font-weight: bold;
    letter-spacing: 0.05em;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.box__obi-prem p {
    padding: 0.7rem 1rem;
    margin: 0;
}

/*　マーカーダーク */
.marker-red-prem {background: linear-gradient(transparent 60%, #9c0000 60%); padding-bottom: .5%; font-weight: 600}
.marker-blue-prem {background: linear-gradient(transparent 60%, #1939bf 60%); padding-bottom: .5%; font-weight: 600}
.marker-green-prem {background: linear-gradient(transparent 60%, #108e1f 60%); padding-bottom: .5%; font-weight: 600}
.marker-yellow-prem {background: linear-gradient(transparent 60%, #b19a00 60%); padding-bottom: .5%; font-weight: 600}

/* 吹き出し　ダーク */
.fuki__L-prem, .fuki__R-prem {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    margin: 0 0.5rem 10px;
}

.fuki__L-prem p::before {
    border-right: 8px solid #FFFFFF;
    left: -9px;
}
.fuki__L-prem p::before, .fuki__R-prem p::before {
    content: "";
    position: absolute;
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
    top: 16px;
}

.fuki__L-prem p::after {
    border-right: 8px solid #FFFFFF;
    left: -6px;
}
.fuki__L-prem p::after, .fuki__R-prem p::after {
    content: "";
    position: absolute;
    clear: both;
    display: block;
    border-bottom: 8px solid transparent;
    border-top: 8px solid transparent;
    top: 16px;
}

.fuki__L-prem p {
    width: 85%;
    height: auto;
    font-size: 1rem;
    border: 2px solid #FFFFFF;
    padding: 15px;
    position: relative;
    border-radius: 10px;
    margin-top: .6em;
    margin-bottom: 1em;
    margin-left: 1.2em;
    color: #000000;
    background: #FFFFFF;
}

.fuki__R-prem p::before {
    border-left: 8px solid #FFFFFF;
    right: -9px;
}

.fuki__R-prem p::after {
    border-left: 8px solid #FFFFFF;
    right: -6px;
}

.fuki__R-prem p {
    width: 85%;
    height: auto;
    font-size: 1rem;
    border: 2px solid #FFFFFF;
    padding: 15px;
    position: relative;
    border-radius: 10px;
    margin-top: .6em;
    margin-bottom: 1em;
    margin-right: 1.2em;
    color: #000000;
    background: #FFFFFF;
}

.fuki__L-prem .img-left { margin-left: 4px; margin-top: -1px; float: left; width: 60px; height: 60px;
}
.fuki__R-prem .img-right { margin-right: 4px; margin-top: -1px; float: right; width: 60px; height: 60px;
}
/* 画像の下のテキスト */
.fuki__L-prem .img-description, .fuki__R-prem .img-description {
    padding: 5px 0 0;
    font-size: 0.6rem;
    line-height: 1.2;
    text-align: center;
}


/* SNSパーツ */

.indexSNS .account-card{
  overflow:auto;
  max-height: 1000px;
}
.account-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* 影をつけて立体感を出す */
  padding: 20px;
  max-width: 350px;
  transition: transform 0.2s;
  margin: 0 auto;
  border: 1px solid #3808f6;
  margin-bottom: 20px;
}

.account-card:hover {
  transform: translateY(-5px); /* ホバー時に少し浮き上がる */
}

.card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  
}

.card-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  
}
.card-name {
  margin: 0;
  font-size: 1.1em;
}

.card-description {
  margin: 0;
  font-size: 0.9em;
  color: #666;
}

.card-social-links {
  display: flex;
  justify-content: flex-end; /* アイコンを右寄せに */
  gap: 12px;
}

.card-social-links a img {
  width: 28px;
  height: 28px;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.card-social-links a:hover img {
  opacity: 1; /* ホバー時にアイコンを濃くする */
}

/* レイアウト: モバイル1列、PCで2列 */

.account_name {
  margin: 5px 0 5px 10px;
  font-size: 14px;
  line-height: 1.45em
}

.fa-solid::before {
  font: var(--fa-font-solid)
}

.iconn_box {
  margin: 0px 0px 20px;
  display: flex;
  align-items: center
}

.iconn_box .iconn {
  width: 55px;
  height: auto
}

.post-detail {
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between
}


.timeStamp {
  background: #e7e7e7;
  width: 90px;
  border-radius: 100px;
  font-size: 16px;
  margin: 20px auto;
  text-align: center
}




/* カード幅の統一（max-width/中央寄せを無効化） */
.main-container .account-card,
.main-container .balloon-top {
max-width: none;
width: 100%;
margin: 0;
box-sizing: border-box;
}
/* account-card だけ下の余白を広めにする */
.main-container .account-card {
margin: 0 0 24px !important; /* お好みで 20〜32px など調整 */
}


  /* 動画カード */
  .video-card {
    display: block;
    background: #fff;
    border: 1px solid #d9e2ec;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(16,24,40,0.06);
    text-decoration: none;
    color: inherit;
    overflow: hidden; /* 角丸に合わせてサムネイル等を切る */
  }
  
  /* 内側レイアウト：左サムネ、右テキスト */
  .video-card__inner {
    display: flex;
    gap: 12px;
    padding: 10px;
    align-items: center;
  }
  
  /* サムネイル領域 */
  .video-card__thumb {
    position: relative;
    flex: 0 0 120px;
    width: 120px;
    aspect-ratio: 16 / 9;        /* 比率固定 */
    border-radius: 8px;
    overflow: hidden;
    background: #f2f4f7;
  }
  .video-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  /* 再生バッジ */
  .video-card__play {
    position: absolute;
    left: 8px;
    bottom: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #1da1f2;         /* 水色系（お好みで） */
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  }
  .video-card__play::before {
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 9px solid #fff; /* 三角（再生） */
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    margin-left: 2px;
  }
  
  /* 右側テキスト */
  .video-card__body {
    min-width: 0; /* テキストの折返しに必要 */
    display: grid;
    gap: 4px;
  }
  
  /* ドメイン（例: youtube.com） */
  .video-card__meta {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.2;
  }
  
  /* タイトル（2行で省略） */
  .video-card__title {
    font-size: 14px;
    font-weight: 700;
    color: #111827;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  /* ホバー */
  .video-card:hover {
    box-shadow: 0 6px 16px rgba(16,24,40,0.12);
    transform: translateY(-1px);
    transition: 160ms ease;
  }
  
  /* モバイルで詰め気味に */
  @media (max-width: 480px) {
    .video-card__inner { gap: 10px; padding: 10px; }
    .video-card__thumb { flex-basis: 110px; width: 110px; }
  }

  .sns-more-wrap { padding: 24px 0 8px; }
  .sns-more-btn {
    display: block;
    width: 100%;
    background: #fff;
    color: #1677ff;
    border: 2px solid #e5e7eb;
    border-radius: 9999px;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    padding: 14px 20px;
    text-decoration: none;
    transition: all .2s ease;
  }
  .sns-more-btn:hover {
    background: #f5faff;
    border-color: #1677ff;
    box-shadow: 0 4px 12px rgba(22,119,255,0.18);
  }

  /* SNSパーツEND */

.webpaper .secinner {
    padding: 0.9375rem 0.625rem 0rem; /* 15px 10px */
    }
  .secinner {
    padding: 0.9375rem 0.625rem; /* 15px 10px */
    background-color: var(--white);
  }
  
 .inner {padding: 0.9375rem 0.625rem;}