@charset "utf-8";
@-ms-viewport {
	width: device-width;
}
/*---------------------------------------
チェック
---------------------------------------*/
/*
*{
	border:1px solid #FF0000;
}
*/
/*---------------------------------------
clearfix
---------------------------------------*/
.clearfix {
	*zoom: 1;
}
.clearfix:before, .clearfix:after {
	display: table;
	content: "";
	line-height: 0;
}
.clearfix:after {
	clear: both;
}

/*---------------------------------------
全体
---------------------------------------*/
body {
	margin: 0;
	padding: 0;
	font-family: YakuHanJP, 'Noto Sans JP', "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
	font-feature-settings: "palt";
	font-weight: 400;
	background: url(../img/pat/pat_dotted_02.png) repeat center / 100%,linear-gradient(90deg, rgba(134, 240, 255, 1) 0%, rgba(117, 205, 255, 1) 50%, rgba(104, 173, 255, 1) 100%);
	position: relative;
	width: 100%;
	/*
	overflow-x: hidden;
	overflow-y: auto;
	*/
}
main {
	width: 100%;
	box-sizing: border-box;
	scrollbar-width: none;       /* Firefox */
	-ms-overflow-style: none;    /* IE, Edge */
}
main::-webkit-scrollbar {
	display: none;               /* Chrome, Safari */
}
.main_inner {
	width: 95%;
	margin: 0 auto;
	padding: 1em 0;
}
.common_wrap {
	max-width: 500px;
	width: 100%;
	margin: 0 auto;
	background: url(../img/pat/pat_dotted_01.png) repeat center / 100%,linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(51, 45, 31, 1) 50%, rgba(0, 0, 0, 1) 100%);
	
}
textarea:focus {
	outline: none;
}

a.a_link{
	text-decoration: underline;
}

/*---------------------------------------
hover
---------------------------------------*/
/* 共通の画像ボタン hover効果（全色共通） */
.common_btn_img a:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}
a img:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/*---------------------------------------
header（ログイン後）
---------------------------------------*/
.login_after_header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 3;
	height: 0;
    padding-top: 17.142857142857143%;
	background-image: url("../img/common/header_bg.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.header_wrap {
	width: 100%;
	padding: 0.5em;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	position: absolute;
	top:0;
	left: 50%;
	transform: translateX(-50%);
}
.header_left {
	display: flex;
	align-items: flex-end;
	gap: 0.5em;
}
.header_left a {
	width: 23%;
	display: inline;
}
.header_left a img {
	width: 100%;
}
.logo {
	color: #ffffff;
	filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
	width: 100%;
	height: auto;
}
.user_id_wrap {
	color: #ffffff;
	filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.7));
	border: 1px solid #ffffff;
	border-radius: 4px;
	width: fit-content; /* 中の内容に合わせる */
}
.user_id_wrap dl {
	display: flex;
	align-items: center;
	font-size: 0.7em;
}
.user_id_wrap dl dt {
	background: #ffffff;
	color: var(--navy);
	padding: 0 0.4em;
}
.user_id_wrap dl dd {
	margin: 0;
	padding: 0 0.3em;
}
.reserve{
	color: #ffffff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
	font-size: 0.8em;
	position: relative;
}
.reserve i{
	margin-right: 0.2em;
}
.reserve span.badge{
	top:-1em;
	right:-1.7em;
}
.menu_bt i {
	font-size: 2em;
}

@media screen and (min-width: 501px) {
  .login_after_header {
    padding-top: 0;
    height: 86px;
    width: 500px;
    left: 50%;
    transform: translateX(-50%);
  }
	.user_id_wrap dl {
	font-size: 0.9em;
}
	.reserve{
	font-size: 0.9em;
}
	.reserve span.badge{
	top:-1.2em;
	right:-1.8em;
		font-size: 0.9em;
        width: 25px;
        height: 25px;
}
}

/*---------------------------------------
footer（ログイン後）
---------------------------------------*/
.login_after_footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 2;
	height: 0;
    padding-top: 21.224489795918367%;
	background-image: url("../img/common/footer_bg.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
ul.footer_menu {
	width: 100%;
	display: flex;
	justify-content: space-around;
	padding: 0em 0.3em;
	gap: 0.5em;
	line-height: 0;
	box-sizing: border-box;
	position: absolute;
	bottom:0;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	height: 70%;
}
ul.footer_menu li {
	width: calc(100% / 6);
	position: relative;
	background: url(../img/pat/p5.png) repeat center / 6px,#ffffff;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
	font-size: 0.7em;
	/*
	color: #7a7a7a;
	*/
	color: #083059;
}
ul.footer_menu li a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	z-index: 2;
	text-decoration: none;
	color: inherit;
}
ul.footer_menu li a i{
	font-size: 1.8em;
	margin-bottom: 0.6em;
}

/*footerのclass付与で滞在ページを色変え
ul.footer_menu.tipster li.footer_menu_tipster{
	color: var(--blue);
	font-weight: bold;
}
ul.footer_menu.support li.footer_menu_support{
	color: var(--blue);
	font-weight: bold;
}
*/

@media screen and (min-width: 501px) {
	ul.footer_menu {
	padding: 0em 0.5em;
	gap: 0.8em;
	height: 70%;
}
  .login_after_footer {
    padding-top: 0;
    height: 106px;
    width: 500px;
    left: 50%;
    transform: translateX(-50%);
  }
	ul.footer_menu li {
	font-size: 0.75em;
}
	ul.footer_menu li a i{
	font-size: 2.1em;
}
}

/*---------------------------------------
ハンバーガーメニュー
---------------------------------------*/
.menu_bt i,.global i{
	color: #ffffff;
}
.global {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	/* iOS 14 以前用（iOSのアドレスバーを考慮した高さ） */
	height: calc(100vh - 80px);
	/* iOS 15+ 以降用（iOSのアドレスバーを考慮した高さ） */
	height: 100dvh;
	background: rgba(28,56,124,0.7);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	z-index: 200;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}
.global .menu_wrapper {
	max-width: 500px;
	margin: 0 auto;
	height: 100%;
	left: 0;
	z-index: 120;
	/*
  position: absolute;
  top: 0;
	*/
	transform: translateY(-100%);
	transition: transform 0.6s ease-in-out;
	text-align: center;
	padding-top: 4em;
}
.global.active {
	opacity: 1;
	visibility: visible;
}
.global.active .menu_wrapper {
	transform: translateY(0);
}
.global.close {
	opacity: 0;
	visibility: hidden;
}
.global.close .menu_wrapper {
	transform: translateY(-100%);
}
/* スクロール制御 */
.no_scroll {
	overflow: hidden;
	position: fixed;
	width: 100%;
}
.global .menu_wrapper p.top_close_bt {
	position: absolute;
	top: 0;
	right: 0.3em;
	font-size: 2em;
	color: var(--t_blue);
}
.global .menu_wrapper ul.global_menu {
	position: relative;
	width: 100vw;
	height: auto;
	text-align: center;
	border-radius: 5vw;
	padding-bottom: 4vw;
	font-size: 0;
}
.global_prof_header{
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap:0.8em;
}
.global_prof_header_logo{
	width: 30%;
}
.global_prof_header_logo svg{
	width: 100%;
}
.global_prof_header_detail a{
	border-radius: 900px;
    color: #fff;
    padding: 0.2em 1em;
    font-size: 0.7em;
    text-align: center;
    background: var(--green);
    margin: 1em auto;
    display: inline-block;
	font-weight: bold;
}
nav.global_menu_wrapper{
	overflow-y: auto;
}
nav.global_menu_wrapper ul {
	padding: 0;
	margin: 1em auto 0 auto;
	list-style: none;
}
nav.global_menu_wrapper ul li {
	text-align: center;
	padding-bottom: 0.5em;
	position: relative;
	color: #ffffff;
	margin-bottom: 0.8em;
}
nav.global_menu_wrapper ul li a {
	text-decoration: none;
}
nav.global_menu_wrapper ul li p {
	font-size: 0.85em;
	text-shadow: 0 0 5px #1c387c, 0 0 10px #1c387c, 0 0 15px #1c387c, 0 0 20px #1c387c;
	margin-bottom: 0.2em;
	position: relative;
	display: inline-block;
	font-weight: bold;
}
nav.global_menu_wrapper ul li::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #cccccc 50%, rgba(255, 255, 255, 0) 100%);
}
nav.global_menu_wrapper a.global_glay_btn {
	margin: 1em auto 0.5em auto;
	display: inline-block;
}

/*---------------------------------------
NEWS
---------------------------------------*/
.news {
  background: #ffffff;
  margin-bottom: 1em;
  overflow: hidden;
}
.news dl {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.news dl dt {
  color: var(--pink);
  font-size: 0.7em;
  white-space: nowrap;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.3em;
	    font-weight: bold;
	background: #000000;
	padding: 0.5em;
}
.news dl dt i{
	margin-top: 0.2em;
}
.news dl dd {
  margin: 0;
  color: #ffffff;
  overflow: hidden;
  flex: 1;
	font-size: 0.8em;
}
.news_scroll {
  display: inline-block;
  padding-left: 100%;
  white-space: nowrap;
	color: #000000;
  animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

/*---------------------------------------
スライドショー
---------------------------------------*/
.slider_wrapper{
	position: relative;
	margin-bottom: 1em;
}
.slider_wrapper p{
	position: absolute;
	top:0;
	left: 0;
	background: #000000;
	padding: 0.3em 0.5em;
	color: var(--green);
	z-index: 1;
	font-size: 0.7em;
	font-weight: bold;
}
.slider_wrapper p i{
	margin: 0 0.2em;
}
.slider {
  position: relative;
  overflow: hidden;
  background: url(../img/pat/fresh-snow.png) repeat center / 270px,
              linear-gradient(144deg,rgba(75, 200, 250, 1) 0%, rgba(203, 168, 255, 1) 100%);
  padding: 2em 0 0.3em 0;
   box-shadow: inset 0 3px 4px -3px rgba(0, 0, 0, 0.25), 
              inset 0 -3px 4px -3px rgba(0, 0, 0, 0.25);
	margin-bottom: 0!important;
}
.slider .slick-slide {
  margin: 0 0.3em;
  transform: scale(0.9);
  transition: transform 0.3s ease;
  opacity: 0.8;
  transform-origin: center center;
  overflow: hidden;
}
.slider .slick-slide img {
  width: 100%;
  height: auto;
  display: block;
}
.slider .slick-center {
  transform: scale(1.1);
  opacity: 1;
  z-index: 2;
}
.slider .slick-dots li {
  margin: 0;
}
.slider .slick-dots {
  position: relative;
  bottom: 0;
}
.slick-dots li.slick-active button:before {
    opacity: 1!important;
    color: #ff08ce!important;
}
.slick-dots li button:before {
    font-size: 8px!important;
}

/* 1枚だけのとき中央寄せする */
.slider.only-one-slide .slick-slide {
  margin: 0 auto;
  transform: scale(0.9) !important; /* 通常と同じ縮小 */
  opacity: 0.8 !important;
  width: auto !important; /* slick の 100%指定を解除 */
  max-width: 90%; /* 任意。必要に応じて */
}

/* slick内部のtrackを中央寄せ */
.slider.only-one-slide .slick-track {
  display: flex !important;
  justify-content: center !important;
}

/*---------------------------------------
PICKUPレース
---------------------------------------*/
.pick_up{
	padding: 2em 0.5em;
	background: url(../img/pat/pat_dotted_01.png) repeat center / 100%,url(../img/content/pickup/pickup_bg_decoration_top.png) no-repeat center top / 100%,url(../img/content/pickup/pickup_bg_decoration_bottom.png) no-repeat center bottom / 100%,linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(51, 45, 31, 1) 50%, rgba(0, 0, 0, 1) 100%);
}
.pick_up_inner{
	width: 100%;
    height: 0;
    /* (画像の高さ / 画像の横幅) × 100 */
    padding-top: 86.696230598669623%;
    background: url(../img/content/pickup/pickup_bg.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	position: relative;
}
.pick_up_detail_wrapper{
	position: absolute;
	left: 50%;
	top:22%;
	transform: translateX(-50%);
	width: 85%;
}
.pick_up_detail_set{
	display: flex;
	align-items: center;
	gap:0.5em;
	background: rgba(0,0,0,0.9);
	border-radius: 6px;
	padding: 0.7em 0.5em;
	margin-top: 1.3em;
	color: #ffffff;
}
.pick_up_detail_set .race_grade{
	width: 15%;
}
.pick_up_detail_set .race_grade img{
	width: 100%;
}
.race_detail p.race_name{
	font-weight: bold;
}
.race_detail ul{
	display: flex;
	align-items: center;
	gap:0.5em;
	margin-top: 0.3em;
	font-size: 0.7em;
	color: #ffffff;
}
.race_detail ul li{
	border-radius: 6px;
	padding: 0.1em 0.5em;
}
.race_detail ul li.race_place{
	background: var(--blue);
}
.race_detail ul li.race_day{
	background: var(--green);
}
.race_detail ul li.race_flag{
	background: var(--pink);
}

@media screen and (min-width: 501px) {
	.pick_up{
	padding: 2em;
}
	.pick_up_detail_set{
	margin-top: 1.5em;
}
	.race_detail p.race_name{
	font-size: 1em;
}
	.race_detail ul{
	gap:0.6em;
	margin-top: 0.5em;
	font-size: 0.8em;
}
}

/*---------------------------------------
ナビゲーションバナー（footerサブメニュー）
---------------------------------------*/
.nav_bn{
	margin-top: 1em;
}
.nav_bn ul{
	display: flex;
	align-items: center;
	justify-content: center;
	gap:0.5em;
}
.nav_bn ul li{
	width: calc(100% / 3);
}
.nav_bn ul li img{
	width: 100%;
}
.nav_bn.nav_bn_2culum ul{
	width: 92%;
	margin: 0 auto;
}
.nav_bn.nav_bn_2culum ul li{
	width: calc(100% / 2);
}

/*---------------------------------------
今週のオススメ
---------------------------------------*/
.recommended_detail_bn{
	margin: 0.5em auto;
}
/* プラン表 */
.plan_table {
	margin: 0 auto;
}
.plan_table table {
	width: 100%;
	margin: 1.5em auto;
	font-size: 0.9em;
	border-collapse: collapse;
	table-layout: auto; /* 自動でカラム幅調整 */
}
.plan_table table, .plan_table td, .plan_table th {
	border: 1px solid #595959;
}
.plan_table td, th {
	padding: 0.3em;
	vertical-align: top;
}
.plan_table tr:nth-child(even) {
	background: #f2fbeb;
}
.plan_table tr:nth-child(odd) {
	background: #E8E8E8;
}
.plan_table tr.plan_table_benefit {
	background: var(--pink);
	color: #ffffff;
}
/* 左カラムは文字量に合わせる */
.plan_table td:first-child {
	white-space: nowrap;
}
/* 右カラムは可変＆必要に応じて折り返す */
.plan_table td:last-child {
	white-space: normal;
	min-width: 200px; /* 最低限の幅（調整可） */
}

/*---------------------------------------
ピックアップRSS
---------------------------------------*/
.pick_up_rss_set{
	border-bottom: 1px solid #E3E4E6;
	background: #ffffff;
}
.pick_up_rss_set a {
    display: block;
    padding: 0.8em 0.5em;
    text-decoration: none;
}
.pick_up_rss_day_tag{
	display: flex;
	align-items: center;
	margin-bottom: 0.3em;
}
.pick_up_rss_day_tag p{
	color: #ACACAC;
	font-weight: bold;
	margin-right: 0.3em;
	font-size: 0.9em;
}
.pick_up_rss_day_tag ul{
	display: flex;
	align-items: center;
	gap:0.3em;
	font-size: 0.65em;
}
.pick_up_rss_day_tag ul li{
	padding: 0 0.2em;
}
.pick_up_rss_day_tag ul li.pick_up_rss_tag_news{
	color: #45CAD5;
    border: 1px solid #45CAD5;
}
.pick_up_rss_day_tag ul li.pick_up_rss_tag_new{
	color: #F05A28;
    border: 1px solid #F05A28;
}
.pick_up_rss_day_tag ul li.pick_up_rss_tag_movie{
	color: #BC6CE0;
    border: 1px solid #BC6CE0;
}
.pick_up_rss_day_tag ul li.pick_up_rss_tag_data{
	color: #75B543;
    border: 1px solid #75B543;
}
.pick_up_rss_day_tag ul li.pick_up_rss_tag_place{
	color: #666C75;
    border: 1px solid #666C75;
}
.pick_up_rss_day_tag ul li.pick_up_rss_tag_campaign{
	color: #F09400;
    border: 1px solid #F09400;
}
.pick_up_rss_detail{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap:0.3em;
}
.pick_up_rss_detail p{
	font-size: 0.8em;
	color: #333;
	line-height: 1.6em;
}
.pick_up_rss_detail i{
	font-size: 1.2em;
	color: #3A7ED8;
}
.pick_up_rss_set a:hover {
    background-color: #dcf3ff;
}
.pick_up_rss_set a:hover .pick_up_rss_detail p {
    text-decoration: underline;
}

@media screen and (min-width: 501px) {
	.pick_up_rss_day_tag p{
	margin-right: 0.5em;
	font-size: 1.1em;
}
.pick_up_rss_day_tag ul{
	font-size: 0.8em;
}	
	.pick_up_rss_detail p{
	font-size: 0.9em;
	line-height: 1.7em;
}
}

/*---------------------------------------
予想家一覧
---------------------------------------*/
.tipster_wrapper{
	background: url(../img/pat/pat_dotted_01.png) repeat center / 100%,linear-gradient(90deg,rgba(0, 0, 0, 1) 0%, rgba(51, 45, 31, 1) 50%, rgba(0, 0, 0, 1) 100%);
}

/* 予想家詳細エリア */
.tipster_detail {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  overflow: hidden;
}
.tipster_detail_img img {
  width: 100%;
  height: auto;
  display: block;
}
.tipster_detail_text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 0.5em 0.8em 0.5em;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 50%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0) 100%);
}
.tipster_detail_text h2 {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0 0 0.1em 0;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}
.tipster_detail_text p{
	font-size: 0.75em;
	line-height: 1.5em;
	margin-bottom: 0.6em;
}
.tipster_detail_text p.tipster_catch {
  display: inline-block;
  padding: 0.2em 0.5em;
  border: 1px solid #fff;
  font-size: 0.8em;
  margin-bottom: 0.3em;
}

.tipster_detail_data{
	position: absolute;
	top:0.7em;
	right: 0.5em;
	text-align: right;
	z-index: 1;
}
.tipster_detail_data p.tipster_detail_data_score{
	background: var(--pink);
	color: #ffffff;
	text-align: center;
	padding: 0.1em 0.5em;
	border-radius: 6px;
	font-size: 0.8em;
}
.tipster_detail_data p.tipster_detail_data_rate{
	background: rgba(255,255,255,0.8);
	text-align: center;
	border-radius: 6px;
	margin-top: 0.4em;
	display: table;
	margin-left: auto;
	padding: 0.1em 0.5em;
	font-size: 0.9em;
}
.tipster_detail_data p.tipster_detail_data_rate span{
	color: var(--pink);
}

.tipster_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--green);
    color: #fff;
    font-weight: bold;
    padding: 0.5em 1.2em;
    border-radius: 30px;
    font-size: 0.9em;
    text-decoration: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.2);
    transition: opacity 0.3s ease;
    float: right;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}
.tipster_btn i {
    margin-left: 0.5em;
	margin-top: 0.1em;
}
.tipster_btn:hover {
    opacity: 0.8;
}

/* 予想家スライダー */
.tipster_slider_wrap {
    padding: 1em 0.5em 0 0.5em;
    color: #fff;
}
.tipster_slider_wrap h3 {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 0.5em;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}
.tipster_slider {
    width: 100%;
    overflow: hidden;
}
.tipster_slider_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.tipster_slider_item img {
    width: 100%;
    height: auto;
    border-radius: 6px; 
    object-fit: cover;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    transition: box-shadow 0.3s ease;
}
.tipster_slider_item p {
    font-size: 0.8em;
    margin-top: 0.3em;
	margin-left: 0.3em;
	font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}

/*---------------------------------------
予想情報
---------------------------------------*/
/* 全体 */
.tipster_info_wrapper{
	width: 95%;
	margin: 1em auto;
}

/* 注意書き */
.tipster_info_wrapper .tipster_info_caution{
	background: rgba(255,255,255,0.8);
	padding: 0.2em 0.6em;
	font-size: 0.8em;
	border-radius: 6px;
	line-height: 1.5em;
	color: #676767;
}

/* 的中実績、感謝の声での予想家ビジュアル */
.tipster_visual{
	width: 100%;
	height: 90px;
	overflow: hidden;
}
.tipster_visual img{
	width: 100%;
}

/* 予想情報のタブ */
.tipster_info_tab{
	margin: 1em auto;
}
.tipster_tab_nav {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.tipster_tab_nav li {
  flex: 0 0 calc(100% / 7);
  box-sizing: border-box;
  padding: 0.4em 0;
  background: #ffffff;
  cursor: pointer;
  font-size: 0.85em;
  text-align: center;
  border: 1px solid #ccc;
  border-bottom: none;
}
.tipster_tab_nav li.active {
  background: #f4edd9;
  color: #121212;
  font-weight: bold;
	border-bottom: 1px solid #f4edd9;
}
.tipster_tab_nav span.sat{
	color: #00a0e9;
}
.tipster_tab_nav span.sun{
	color: #e5004f;
}
.tipster_tab_content{
	margin-top: -1px;
}
.tipster_tab_content .tab {
  display: none;
}
.tipster_tab_content .tab.active {
  display: block;
	background: #f4edd9;
	border: 1px solid #ccc;
	padding: 1em 0.5em 1.5em 0.5em;
}
.tipster_tab_content .plan_table{
	font-size: 0.9em;
	padding: 0.5em 0 1em 0;
	margin-bottom: 1em;
	position: relative;
}
.tipster_tab_content .plan_table table{
	margin: 0 auto 2em auto;
}
.plan_table.plan_coming:before{
	content: "";
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.7);
}
.plan_table.plan_coming:after{
	content: "COMING SOON\A情報公開までお待ちください";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.3em;
	font-weight: bold;
	color: #ffffff;
	z-index: 1;
	white-space: pre;
	text-align: center;
}

/*---------------------------------------
的中実績
---------------------------------------*/
.tipster_result_wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
ul.tipster_result_set{
	width: calc(50% - 0.25em);
	background: url(../img/content/hit/hit.png) no-repeat center top 1em / 60%,#ffffff;
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	text-align: center;
	margin-bottom: 0.5em;
}
ul.tipster_result_set li.result_title{
	padding: 0.2em 0;
	color: red;
}
ul.tipster_result_set li.result_money{
	background: red;
	padding: 0.3em 0;
	color: #ffffff;
	font-weight: bold;
	font-size: 1.2em;
	margin-top: 0.5em;
}
ul.tipster_result_set li{
	font-size: 1em;
	line-height: 1.7em;
}
.tipster_continued{
	text-align: right;
	color: #ffffff;
	width: 100%;
	font-size: 0.9em;
	padding-right: 0.5em;
}
.tipster_continued p a{
	text-decoration: underline;
}

/*予想家バナー一覧*/
.tipster_bn_list{
	padding: 0.5em;
}
.tipster_bn_list_set{
	position: relative;
	border: 2px solid darkgoldenrod;
	border-radius: 6px;
	overflow: hidden;
	margin: 1.2em auto;
}
.tipster_bn_list_set a{
	padding: 1em 0.5em;
    display: block;
}
.tipster_bn_list_set img{
	position: absolute;
	top:-1.2em;
	right: 0;
	width: 40%;
}
.tipster_bn_list_text{
	color: #f8be52;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
	position: relative;
	z-index: 2;
}
.tipster_bn_list_text p{
	color: #F1F2DB;
	font-size: 0.8em;
}
.tipster_bn_list_text_blue_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
  background: url(../img/pat/pat_dotted_01.png) repeat center / 100%,
            linear-gradient(to right, #000022 0%, #000088 80%, rgba(0, 0, 255, 0) 100%);
  z-index: 1;
}
.tipster_bn_list_text_pink_bg{
	position: absolute;
  top: 0;
  left: 0;
  width: 80%;
  height: 100%;
  background: url(../img/pat/pat_dotted_01.png) repeat center / 100%,
            linear-gradient(to right, #2e003e 0%, #b03090 80%, rgba(255, 192, 203, 0) 100%);
  z-index: 1;
}

@media screen and (min-width: 501px) {
	.tipster_bn_list_set{
	width: 90%;
}
}

/*---------------------------------------
感謝の声
---------------------------------------*/
ul.tipster_voice_set{
	background: url(../img/content/voice/voice.png) no-repeat center bottom 0.5em / 35%,#ffffff;
	overflow: hidden;
	border-radius: 6px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	margin-bottom: 1em;
}
ul.tipster_voice_set li{
	font-size: 0.8em;
	padding: 0.3em 0.4em;
	line-height: 1.7em;
}
ul.tipster_voice_set li.voice_title{
	background: url(../img/common/title_bg_dotted.png) no-repeat bottom right / 60%,#2B75CF;
	color: #ffffff;
	font-size: 1em;
	padding: 0.2em 0.4em 0.3em 0.4em;
}
ul.tipster_voice_set li.voice_prof{
	text-align: right;
	padding: 0.3em 0.4em 0.3em 0;
}

/*---------------------------------------
 ぺージャースタイル
---------------------------------------*/
.pager_wrap .pager {
	text-align: center;
	margin-top: 20px;
	margin-bottom: 20px;
	position: relative;
	top: 0;
	left: 0;
	transform: none;
	padding: 0;
	z-index: 1;
}
.pager_wrap .pager:before {
	content: "";
	display: block;
	position: relative;
	top: 0;
	left: 0;
	width: 0;
	height: 0;
	background: none;
}
.pager_wrap .pager span {
	margin: 5px;
	padding: 4px;
	color: #444;
	background: #ffffff;
	border-radius: 4px;
	font-size: 12px;
	border: 1px solid #cecece;
}
.pager_wrap .pager span:hover {
	cursor: pointer;
	background: #f1f1f1;
	border: 1px solid #a8a8a8;
	color: #444;
	text-decoration: underline;
}
/* 開いているページ（current）*/
.pager_wrap .pager span.current {
	color: #fff;
	background: var(--pink);
	border: 1px solid #b26fdb;
	font-weight: bold;
}
.pager_wrap .pager span.current:hover {
	cursor: default;
	text-decoration: none;
}
/* 前へ　次へ（invalid）*/
.pager_wrap .pager span.invalid {
	background: #eee;
	border: solid 1px #eee;
	color: #aaa;
}
.pager_wrap .pager span.invalid:hover {
	cursor: default;
	text-decoration: none;
}
/* …点々（ellipsis）*/
.pager_wrap .pager span.ellipsis {
	color: #C8C8C8;
	background: none;
	border: none;
}
.pager_wrap .pager span.ellipsis:hover {
	cursor: default;
	text-decoration: none;
}

/*---------------------------------------
お問合せ
---------------------------------------*/
textarea#message {
    width: 100%;
	min-height:300px;
    resize: vertical;
    padding: 10px;
    border: 1px solid var(--blue);
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.5em;
}
button.btn_common {
    background: var(--blue);
    display: block;
    padding: 0.5em 0;
    width: 80%;
    color: #ffffff;
    font-size: 1em;
    text-align: center;
    cursor: pointer;
	margin: 1em auto;
}
button.gray_btn {
    background: #777777;
	width: 60%;
	border-radius: unset;
	font-size: 0.8em;
}

/*---------------------------------------
購入関係
---------------------------------------*/
.buy_caution{
	background: #8B8B8B;
	padding: 0.5em;
	border-radius: 6px;
}
.buy_caution p{
	color: #dddddd;
	font-size: 0.7em!important;
	line-height: 1.5em;
	margin: 0!important;
}

/*---------------------------------------
よくある質問
---------------------------------------*/
.acd-check {
	display: none;
}
.faq{
	width: 100%;
	margin: 1em auto;
}
.faq > img{
	margin-bottom: 20px;
}
.acd-label-faq{
	background: url(../img/common/title_bg_dotted.png) no-repeat bottom right / 80%,linear-gradient(90deg, rgba(17,76,25,1) 0%, rgba(50,154,65,1) 100%);
    color: #ffffff;
    margin: 0 auto ;
    padding: 1em 0.5em;
	display: block;
	position: relative;
}
.acd-label-faq:after{
    box-sizing: border-box;
    content: '\f107';
    display: block;
    font-family:"Font Awesome 5 Free";
    padding: 10px;
    position: absolute;
    top: 50%;
	right:0;
	transform: translateY(-50%);
	font-weight: 900;
	font-size: 25px;
}
.acd-content-faq{
    height: 0;
    opacity: 0;
    transition: .1s;
    visibility: hidden;
	margin: 0 auto 1px auto;
	background: #fafafa;
}
.acd-check:checked + .acd-label-faq:after{
    content: '\f106';
}
.acd-check:checked + .acd-label-faq + .acd-content-faq{
    height: auto;
    opacity: 1;
    padding: 5px 0;
    visibility: visible;
}

.acd-label-faq dl{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}
.acd-content-faq dl{
	display:-webkit-box;
  	display:-ms-flexbox;
  	display:flex;
	-webkit-box-align: flex-start;
	-ms-flex-align: flex-start;
	align-items: flex-start;
	padding: 10px;
}
.faq dl dt{
	width: 6%;
}
.faq dl dt img{
	width: 100%;
}
.faq dl dd{
	margin:0;
	width: 85%;
	padding-left: 0.4em;
}
.acd-content-faq dl dd{
	width: 100%;
	color: #373737;
}

/*---------------------------------------
共通箇所
---------------------------------------*/
/* セクションタイトル */
.common_title{
	text-align: center;
	padding: 0.7em 0.5em;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
	color: #ffffff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	position: relative;
}
.common_title h3{
	font-size: 1.5em;
}
.common_title h4{
	font-size: 1.3em;
}
.common_title p{
	font-size: 0.9em;
}
/* セクションタイトル（ブルーグラデ） */
.common_title.blue_grad{
	background: #17E1F3;
	background: url(../img/common/title_bg_dotted.png) no-repeat center/100%,linear-gradient(129deg,rgba(23, 225, 243, 1) 0%, rgba(0, 180, 230, 1) 100%);
}

/* セクションタイトル（ブラック） */
.common_title.black_bg{
	background: url(../img/pat/pat_dotted_01.png) repeat center / 100%, linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(51, 45, 31, 1) 50%, rgba(0, 0, 0, 1) 100%);
	color: darkgoldenrod;
	border-top:2px solid darkgoldenrod;
	border-bottom:2px solid darkgoldenrod;
}

/* エリア背景色（ブルー） */
.erea_blue{
	background: var(--light_blue);
	padding: 5% 2.5%;
}

/* ページタイトル */
.page_title {
	text-align: center;
	color: #fff;
	margin-bottom: 1.3em;
}
.page_title h1 {
	font-size: 1.5em;
	margin-bottom: 0.2em;
}
.page_title p {
	font-size: 0.8em;
	line-height: 1.5em;
}
/* ページタイトル（画像とタイトル） */
.page_title dl {
	background: var(--navy);
	border-radius: 8px;
	overflow: hidden;
	text-align: center;
}
.page_title dl dd {
	font-size: 1em;
	padding: 1em 0;
	margin: 0;
}
/* コンテンツ挿入箇所 */
.common_content_wrapper {
	background: #fff;
	border-radius: 6px;
	line-height: 1.7em;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
	position: relative;
	padding: 1em;
	margin: 0 auto 1em auto;
}
.common_content_wrapper p {
	margin: 0 auto 1em auto;
	font-size: 0.9em;
}
.common_content_box{
	border: 1px solid var(--blue);
	border-radius: 6px;
	overflow: hidden;
	padding-bottom: 1em;
	margin-bottom: 1.5em;
}
.common_content_box h4{
	background: var(--blue);
	padding: 0.3em 0.2em;
	color: #ffffff;
	text-align: center;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}
.common_content_box p{
	padding: 0.5em;
	font-size: 0.9em;
	line-height: 1.7em;
}
.plan_set{
	margin: 1em auto 2em auto;
}
.plan_set .plan_table table{
	width: 95%;
	margin: 0 auto 1.5em auto;
}

/* 公的ページ（会社概要など） */
.public_erea{
	margin-bottom: 2em;
}

/*---------------------------------------
文字色定義
---------------------------------------*/ 
:root {
	--blue: #3d58ab;
	--light_blue:#54c3f1;
	--navy: #1c387c;
	--pink: #ff08ce;
	--green: #20e941;
	--yellow: #ffd800;
}

/*---------------------------------------
img定義
---------------------------------------*/
a img {
	display: inline;
}
.img_100 {
	width: 100%;
}
.img_90 {
	width: 90%;
}
.img_80 {
	width: 80%;
}
/*---------------------------------------
文字の装飾
---------------------------------------*/
.glow_text_01 {
	text-shadow: 0 0 5px #570c7a, 0 0 10px #570c7a, 0 0 15px #570c7a, 0 0 20px #570c7a;
}
.glow_text_02 {
	text-shadow: 0 0 5px #b53909, 0 0 10px #b53909, 0 0 15px #b53909, 0 0 20px #b53909;
}
.red {
	color: #cb181d;
}
.yellow {
	color: #ffd800;
}
.navy {
	color: #210c5f;
}
.bold {
	font-weight: bold;
}
.gold {
	color: #deb22c;
}
/*グラデーション文字（紫系）*/
.grad_text_purple {
	font-weight: bold;
	background: linear-gradient(90deg, #d14ebf, #b26fdb);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
/*グラデーション文字（ピンク系）*/
.grad_text_pink {
	font-weight: bold;
	background: linear-gradient(90deg, #ff187f, #b652d4);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.text_center{
	text-align: center;
}

/*---------------------------------------
新着バッジ
---------------------------------------*/
span.badge {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	color: #ffffff;
	border: 2px solid #371381;
	background: var(--pink);
	top: -0.4em;
	right: -0.4em;
	width: 6vw;
	height: 6vw;
	border-radius: 50%;
	font-size: 3vw;
	font-weight: bold;
	letter-spacing: 0.1vw;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
	filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
}
@media screen and (min-width:501px) {
	span.badge {
		font-size: 1em;
		width: 30px;
		height: 30px;
	}
}
/*ハンバーガーメニュー内の新着バッジ*/
nav.global_menu_wrapper span.badge {
	top: -10px;
	right: -30px;
}

/*---------------------------------------
ボタン類
---------------------------------------*/
/* 親サイズ */
.common_btn_img {
    width: 80%;
    margin: 1em auto;
}
.common_btn_img_mini{
	width: 60%;
    margin: 1em auto;
}

/* ボタン背景（青） */
.common_btn_img a.blue_btn {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 30.4%; /* アスペクト比維持 */
    background-image: url("../img/btn/btn_blue.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}
/* ボタン背景（赤） */
.common_btn_img a.red_btn {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 30.4%; /* アスペクト比維持 */
    background-image: url("../img/btn/btn_red.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}
/* ボタン背景（緑） */
.common_btn_img a.green_btn {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 30.4%; /* アスペクト比維持 */
    background-image: url("../img/btn/btn_green.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}
/* ボタン背景（金） */
.common_btn_img a.gold_btn {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 30.4%; /* アスペクト比維持 */
    background-image: url("../img/btn/btn_gold.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}
/* 文字位置 */
.common_btn_img a p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -58%);
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
    font-weight: bold;
    font-size: 1.2em;
    margin: 0;
    width: 90%;
    text-align: center;
    word-break: break-word;
}
/* 文字色（白） */
.common_btn_img a p.btn_white_text {
    color: #ffffff;
}

@media screen and (min-width: 501px) {
	.common_btn_img {
    width: 70%;
}
}

/* 共通ボタン */
.common_btn{
	text-align: center;
	margin: 0.5em auto;
}
.common_btn a {
    color: #fff;
    font-weight: bold;
    padding: 0.5em 1.5em;
    border-radius: 30px;
    font-size: 1.2em;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: opacity 0.3s ease;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}
.common_btn a i {
    margin-left: 0.5em;
	margin-top: 0.1em;
}

/* 共通ボタン(ミニ) */
.common_btn.common_btn_mini{
	text-align: center;
	margin: 0.5em auto;
}
.common_btn.common_btn_mini a {
    color: #fff;
    font-weight: bold;
    padding: 0.5em 1.5em;
    border-radius: 30px;
    font-size: 1em;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: opacity 0.3s ease;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}
.common_btn.common_btn_mini a i {
    margin-left: 0.5em;
	margin-top: 0.1em;
}

/* 共通ボタン */
.common_btn.btn_2culum{
	display: flex;
	justify-content: center;
	align-items: center;
	gap:0.5em;
	margin-top: 1em;
}
.common_btn.btn_2culum a {
    color: #fff;
    font-weight: bold;
    padding: 0.5em;
    border-radius: 30px;
    font-size: 0.9em;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
    transition: opacity 0.3s ease;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
	width: calc(100% / 2);
}

/* 共通ボタン（グリーン） */
.common_btn a.green_btn{
	background: var(--green);
}

/* 共通ボタン（ブルー） */
.common_btn a.blue_btn{
	background: var(--blue);
}

/* 共通ボタン（hover） */
.common_btn a.green_btn:hover {
    opacity: 0.8;
}

/* 共通ボタン（戻る矢印） */
i.fa-angle-left{
	margin-left: 0!important;
	margin-top: 0.1em;
	margin-right: 0.5em;
}

/*---------------------------------------
ローディング画面（ページ全体）
---------------------------------------*/
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background-color: #3d58ab;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    overflow: hidden;
}

#loading .loading_logo {
    width: 45%;
    max-width: 250px;
    margin-bottom: 0.3em;
    mix-blend-mode: difference;
}

#loading svg {
    width: 100%;
    height: auto;
    display: block;
}

#loading p {
    color: #fff;
    font-size: 0.9em;
    letter-spacing: 0.1em;
    mix-blend-mode: difference;
    margin: 0.5em 0 1em 0;
}
#loading.fade-out {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s ease, visibility 0.7s ease;
}
body.loading-active {
    overflow: hidden;
}
.loading_spinner {
    width: 30px;
    height: 30px;
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    mix-blend-mode: difference;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/*---------------------------------------
footerナビゲーション（会社概要など）
---------------------------------------*/
.footer_nav {
	background: var(--navy);
	padding: 1em;
	text-align: center;
}
.footer_nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1em;
	margin: 0 auto;
	padding: 0;
}
.footer_nav ul li {
	width: calc(50% - 0.5em); /* 2列配置 */
	text-align: center;
	list-style: none;
	padding: 0.5em 0;
	border-bottom: 1px solid #c1c1c1; /* 下に白い線 */
}
.footer_nav ul li a {
	color: #DBDBDB;
	text-decoration: none;
	display: block;
	font-size: 0.7em;
}
.footer_nav_eng {
	display: block;
	font-size: 0.5em;
	opacity: 0.6;
}
.footer_nav p {
	color: #c1c1c1;
	font-size: 0.5em;
	margin-top: 3em;
}

/*---------------------------------------
メールBOX（ログイン後）
---------------------------------------*/
.mail_set{
	border-radius: 4px;
    border:2px solid #210c5f;
    margin-bottom: 1.5em;
}
.mail_set dl dt{
	color: #fff;
	border-bottom: 2px solid #210c5f;
	background: #210c5f;
	padding: 0.5em;
}
.mail_set dl dt a{
	text-decoration: underline;
}
.mail_set dl dd{
	margin: 0;
	padding: 0.5em;
}
.mail_set dl dd ul{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap:5px;
}

/*---------------------------------------
ユーザープロフィール確認・変更（ログイン後）
---------------------------------------*/
/*共通*/
.mypage_wrapper h3{
	text-align: center;
	margin:0.5em auto 1em auto;
	color: var(--blue);
}
/*プロフィール確認*/
.user_profile_table{
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap:1em;
	margin-bottom: 2.5em;
}
.user_profile dl{
	text-align: center;
	border: 1px solid var(--blue);
	border-radius: 6px;
	width: 40%;
}
.user_profile dl dt{
	background: var(--blue);
	color: #ffffff;
	padding: 0.1em 0;
}
.user_profile dl dd{
	margin: 0;
	padding: 0.1em 0 0.2em 0;
	color: var(--blue);
}
.user_profile dl dd.user_profile_pt:after{
	content: "pt";
	margin-left: 0.2em;
}
/*パス変更*/
.user_pass h3{
	margin-top: 2em;
}
.user_pass{
	text-align: center;
}
.user_pass dl:last-of-type{
	margin-bottom: 2.5em;
}
.user_pass dl dt{
	margin-bottom: 0.5em;
}
.user_pass dl dd{
	margin: 0 0 0.5em 0;
}
.user_pass dl dd input{
	padding: 0.5em 0 0.5em 0.3em;
	width: 100%;
}
/*アドレス変更*/
.user_mail h3{
	margin-top: 2em;
}
.user_mail p{
	margin-bottom: 2.5em;
}


/*---------------------------------------
ログイン前
---------------------------------------*/
/*全体*/
body.before_body{
	background: #000000;
}
.before_footer_nav{
	background: #000000;
}

/*キービジュアル*/
.kv {
  width: 100%;
  aspect-ratio: 16 / 9; /* 例：16:9の比率にしたい場合 */
  background: url(../img/before/kv_bg_pc.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;
  position: relative;
	max-height: 690px;
}
.kv_btn{
	position: absolute;
	right: 1em;
	bottom: 1em;
	width: 180px;
	z-index: 10;
}
.kv_btn a img{
	width: 100%;
}
.kv_inner{
	max-width: 780px;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	position: relative;
}

.kv_inner h1 img {
  width: 90%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  z-index: 9;
  opacity: 0; /* 初期は非表示にしておく */
  transition: opacity 0.3s ease;
}

.kv_inner h2 img{
	width: 73%;
	margin: 0 auto;
	position: relative;
	z-index: 9;
	opacity: 0;
}

.kv_bg_6color{
	display: flex;
	justify-content: center;
	align-items: center;
	gap:-3px;
}
.kv_bg_6color .color-block:nth-child(odd) {
  margin-top: 20px; /* お好みの数値でOK */
}

.color-block {
  position: relative;
  width: calc(100% / 6);
  height: 350px;
}
.color-block .fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scaleY(0);
  transform-origin: bottom;
	box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);
}
.color-block .fill.animate {
  animation: verticalFill 0.8s ease forwards;
}

/* 各色 */
.color-block.white .fill  {
	background: url("../img/before/kv_flame_top.png") no-repeat center top / 100%,url("../img/before/kv_flame_bottom.png") no-repeat center bottom / 100%,url("../img/before/kv_bg_boat_01.png") no-repeat center bottom / 100%,url("../img/pat/pat_logo_black.png") repeat center top / 100%,linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(204, 204, 204, 1) 100%);
	animation-delay: 0s;
	box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.8);
	z-index: 6;
}
.color-block.black .fill  {
	background: url("../img/before/kv_flame_top.png") no-repeat center top / 100%,url("../img/before/kv_flame_bottom.png") no-repeat center bottom / 100%,url("../img/before/kv_bg_boat_02.png") no-repeat center bottom / 100%,url("../img/pat/pat_logo_white.png") repeat center top / 100%,linear-gradient(0deg,rgba(94, 94, 94, 1) 0%, rgba(0, 0, 0, 1) 100%);
	animation-delay: 0.2s;
	box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.8);
	z-index: 5;
}
.color-block.red   .fill  {
	background: url("../img/before/kv_flame_top.png") no-repeat center top / 100%,url("../img/before/kv_flame_bottom.png") no-repeat center bottom / 100%,url("../img/before/kv_bg_boat_03.png") no-repeat center bottom / 100%,url("../img/pat/pat_logo_white.png") repeat center top / 100%,linear-gradient(0deg,rgba(177, 5, 18, 1) 0%, rgba(128, 5, 15, 1) 100%);
	animation-delay: 0.4s;
	box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.8);
	z-index: 4;
}
.color-block.blue  .fill  {
	background:  url("../img/before/kv_flame_top.png") no-repeat center top / 100%,url("../img/before/kv_flame_bottom.png") no-repeat center bottom / 100%,url("../img/before/kv_bg_boat_04.png") no-repeat center bottom / 100%,url("../img/pat/pat_logo_white.png") repeat center top / 100%,linear-gradient(0deg,rgba(19, 35, 158, 1) 0%, rgba(13, 23, 99, 1) 100%);
	animation-delay: 0.6s;
	box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.8);
	z-index: 3;
}
.color-block.yellow .fill{ 
	background: url("../img/before/kv_flame_top.png") no-repeat center top / 100%,url("../img/before/kv_flame_bottom.png") no-repeat center bottom / 100%,url("../img/before/kv_bg_boat_05.png") no-repeat center bottom / 100%,url("../img/pat/pat_logo_white.png") repeat center top / 100%,linear-gradient(0deg,rgba(230, 188, 43, 1) 0%, rgba(230, 136, 14, 1) 100%);
	animation-delay:0.8s;
}
.color-block.green .fill  { 
	background: url("../img/before/kv_flame_top.png") no-repeat center top / 100%,url("../img/before/kv_flame_bottom.png") no-repeat center bottom / 100%,url("../img/before/kv_bg_boat_06.png") no-repeat center bottom / 100%,url("../img/pat/pat_logo_white.png") repeat center top / 100%,linear-gradient(0deg,rgba(64, 145, 79, 1) 0%, rgba(13, 99, 29, 1) 100%);
	animation-delay: 1s; 
}

@keyframes verticalFill {
  0%   { transform: scaleY(0); }
  100% { transform: scaleY(1); }
}

@media screen and (max-width:1100px) {
	.kv {
	min-height: 780px;
}
}

@media screen and (max-width: 579px) {
  .kv {
    background-image: url(../img/before/kv_bg_sp.jpg);
    aspect-ratio: auto;
    min-height: 70vh;
    max-height: none;
  }
	.kv_btn{
	display: none;
}
	.kv_inner{
	width: 100%;
	height: 70vh;
}
	.kv_inner h1 img {
  width: 95%;
  position: absolute;
  bottom: 0.5em;
}
.kv_inner h2 img{
	width: 90%;
	padding-top: 0.2em;
}
	.color-block {
  height: 35vh;
}
}

/* 共通コンテンツ幅 */
.before_content_wrapper{
	max-width: 580px;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	position: relative;
}

/* 4大特典 */
.benefit {
  background-image: 
    url(../img/before/bg_line_white_pc.png),
    linear-gradient(90deg, rgba(110, 5, 7, 1) 0%, rgba(178, 0, 4, 1) 50%, rgba(110, 5, 7, 1) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, 100% 100%; /* 画像はcoverに、グラデーションは100% */
  padding: 2em 0 2.5em 0;
}

.benefit h3 img{
	width: 100%;
}
.benefit h4 img{
	width: 100%;
	margin-top: 1em;
}

.benefit ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5em;
  max-width: 580px;
  margin: 1em auto 0 auto;
  padding: 0;
  list-style: none;
}

.benefit ul li {
  width: calc(50% - 0.25em);
}

.benefit ul li img {
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (max-width: 579px) {
  .benefit ul li {
    width: 90%;
	  margin: 0 auto;
  }
}

/* 的中実績 */
.result {
  padding: 2em 0;
  background:url("../img/pat/pat_gold.jpg") repeat center / 450px;
  overflow: hidden;
  position: relative;
}
.result h3 img{
	width: 100%;
	margin-bottom: 1.5em;
}
.result h4 img{
	width: 100%;
	margin-top: 1.5em;
}
.result_loop {
  display: flex;
  width: 200%; /* 複製無しのループ処理前提 */
  animation: scrollLoop 20s linear infinite;
}
.result_items {
  display: flex;
}
/* ループアニメーション */
@keyframes scrollLoop {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
.result_item {
  background-color: #000;
  border: 2px solid #000;
  width: 25%;
  margin-right: 1em;
  box-sizing: border-box;
  cursor: pointer;
  transition: opacity 0.3s;
	padding-bottom: 1em;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
}
.result_item:hover {
  opacity: 0.8;
}
.result_item_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
	overflow: visible;
}
.result_item_img img {
  width: 100%;
  height: auto;
  margin-bottom: 1em;
}
.result_item_date,
.result_item_race {
  color: #fff;
  font-size: 1em;
}
.result_item_date{
	margin-bottom: 0.3em;
}
.result_item_money {
  font-size: 1em;
  font-weight: bold;
  background: linear-gradient(to bottom, #9d5b00 12%, #fff000 28%, #fff 50%, #bd6f00 55%, #dc960e 55%, #ffd600 58%, #ffd800 60%, #ffffff 85%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}
.result_item_money.highlight_money {
  font-family: "Barlow", sans-serif;
  font-size: 2.7em;
  font-style: italic;
  margin-top: 0.2em;
  padding-right: 0.2em;
  overflow: visible; 
}

@media screen and (max-width: 579px) {
  .result_loop {
    animation-duration: 10s;
  }
	.result_item_money.highlight_money {
  font-size: 2.4em;
		padding: 0 0.3em;
}
}

/* LINE登録エリア */
.before_entry{
	padding: 2.5em 0 3em 0;
	background: #ffffff;
	
}
.line_entry{
	text-align: center;
}
.line_entry a img{
	width: 90%;
	display: inline;
}
.line_entry ul.line_entry_point{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1em;
	font-weight: bold;
	margin: 0.3em auto;
	color: #000000;
	background: none;
}
.line_entry ul.line_entry_point i{
	color: #00b900;
	margin: 0 0.2em;
}
.line_entry p.entry_caption{
	font-weight: normal;
	font-size: 0.9em;
}
.line_entry p.entry_caption span.entry_caption_kiyaku{
	text-decoration: underline;
	color: #d40e36;
}
.line_entry p.entry_login{
	margin-top: 0.5em;
}
.line_entry p.entry_login span{
	text-decoration: underline;
	color: #d40e36;
	font-weight: bold;
}
.entry_camp img{
	width: 90%;
	margin: 1.5em auto 0 auto;
}

.footer_fixed{
	display: none;
}

@media screen and (max-width: 579px) {
	.line_entry p.entry_login{
		display: none;
	}
	.line_entry ul.line_entry_point{
	display: block;
		padding: 0;
}
	.footer_fixed {
		display: block;
	max-width: 580px;
	width: 100%;
	margin: 0 auto;
	position: fixed;
		left: 0;
		bottom: 0;
	background: #1c387c;
	box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.1);
	z-index: 999;
		padding: 0.4em 0 0.7em 0;
}
.footer_fixed nav {
	display: flex;
	align-items: stretch;
	text-align: center;
	justify-content: center;
	gap:0.3em;
}
	.footer_fixed nav a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.footer_fixed nav a {
  display: flex;
  align-items: stretch;
  height: 70px; /* 任意。画像の高さを明示的に指定 */
}

}

/* Zoom Repeat Animation */
@keyframes zoomRepeat {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.1, 1.1);
    }
    60% {
        transform: scale(1);
    }
    100% {
        transform: scale(1);
    }
}

.animated_zoomRepeat {
    animation: zoomRepeat 1.3s ease-in-out infinite;
}

/*---------------------------------------
汎用ポップアップ
---------------------------------------*/
.popup-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  justify-content: center;
  align-items: center;
  padding: 1em;
  box-sizing: border-box;
}
.popup-box {
  background: #fff;
	border: 3px solid #b20004;
  width: 100%;
  max-width: 500px;
  max-height: 60vh;
  border-radius: 8px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
}
.popup-close {
  position: absolute;
  top: 0.5em;
  right: 1em;
  font-size: 1.2em;
  background: none;
  border: none;
  cursor: pointer;
}
.popup-content {
  padding: 2em 1em 1em;
  overflow-y: auto;
  flex-grow: 1;
  min-height: 0;
}
.popup-register_text{
	text-align: center;
}
.popup-content h2{
	text-align: center;
	margin-bottom: 0.5em;
}
.popup-content h2 img{
	width: 100%;
	margin-top: 0.5em;
}
.popup-content p{
	line-height: 1.7em;
}
.popup-content p span.popup-register_title{
	font-size: 1.5em;
}
.popup-content ul{
	background: #b20004;
	border-radius: 8px;
	color: #ffffff;
	padding: 0.5em;
	width: 90%;
	margin: 0.5em auto 1em auto;
	line-height: 1.7em;
}
.popup-content ul li i{
	color: yellow;
}
.js-popup-trigger {
  cursor: pointer;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.js-popup-trigger:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

@media screen and (max-width: 579px) {
	.popup-box {
		width: 90%;
  max-height: 70vh;
}
	.popup-close {
  right: 0.5em;
}
}

/*---------------------------------------
ログインフォーム
---------------------------------------*/
/* 入力フォーム */
form {
	width: 90%;
	margin: 0.5em auto 0 auto;
	padding-bottom: 1em;
}
form dl {
	width: 100%;
	margin: 0 auto;
}
form dl dt {
	margin: 0 0.2em;
	font-size: 13px;
}
form dl dd {
	margin: 0;
}
form input {
	width: 100%;
	border: 2px solid orange;
	background: #fefefe;
	border-radius: 8px;
	padding: 0.7em 0.5em;
	-webkit-box-shadow: inset 0px 0px 5px 2px #E6E6E6;
	-moz-box-shadow: inset 0px 0px 5px 2px #E6E6E6;
	box-shadow: inset 0px 0px 5px 2px #E6E6E6;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	cursor: pointer;
}
.input_arrow {
	cursor: pointer;
}
form input.filled, form input:focus, form input:not(:placeholder-shown) {
	background: #ffffff !important;
}
::placeholder {
	font-size: 15px;
	color: gray;
}
/* 各項目のタイトル */
.form_section_title {
	display: flex;
	align-items: center;
	margin: 1em 0;
}
.form_section_title p {
	color: #000;
	font-size: 16px;
	font-weight: 600;
}
span.form_section_title_small {
	font-size: 13px;
}
p.form_required {
	background: orange;
	border-radius: 2px;
	text-align: center;
	color: #000;
	font-size: 11px;
	font-weight: normal;
	padding: 0.2em 0.7em;
	margin: 0 0.3em 0 0.5em;
}
p.error {
	color: red;
	font-size: 1em;
	font-weight: bold;
	text-align: center;
	margin-top: 1em;
}
p.form_caption {
	color: #434343;
	font-size: 12px;
	width: 95%;
	margin: 0.5em auto 0 auto;
}
/* パスワードの表示非表示 */
.pass_display {
	text-align: right;
}
#togglePasswordLabel {
	cursor: pointer;
	color: #7C7C7C;
	font-size: 13px;
	margin-top: 0.5em;
}
/* 確認ボタン */
.submit-button {
	display: block;
	width: 90%;
	margin: 1.5em auto 0 auto;
	padding: 0.8em 0;
	background-color: orange;
	border: 1px solid orange;
	color: white;
	border-radius: 90px;
	font-size: 20px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
	position: relative;
	box-shadow: 0 5px 0 orangered; /* 立体感のある影 */
	transition: all 0.2s ease; /* スムーズなアニメーション */
}
.submit-button:hover {
	box-shadow: 0 0 0 #1c8b77; /* 影を消して押し込む */
	transform: translateY(5px); /* ボタンが押し込まれる効果 */
}
.submit-button i {
	position: absolute;
	right: 20px; /* 右端からの位置 */
	top: 50%;
	transform: translateY(-50%); /* 上下中央に配置 */
	font-size: 20px;
}
/* パス忘れ */
.pass_forget {
	text-align: center;
	color: #7C7C7C;
	font-size: 13px;
	text-decoration: underline;
}
@media screen and (max-width: 579px) {
	.popup-content form{
		width: 100%;
	}
}

/*---------------------------------------
キャンペーンページ（夜競艇）
---------------------------------------*/
/* 全体 */
.camp_night{
	background: #A587D2;
	background: linear-gradient(90deg,rgba(165, 135, 210, 1) 0%, rgba(78, 140, 194, 1) 68%, rgba(133, 170, 201, 1) 100%);
}
.camp_night_common_section{
	padding-bottom: 1.5em;
}
.camp_night_common_section h2{
	position: relative;
	z-index: 1;
}

/* キービジュアル */
.camp_night_kv{
	width: 100%;
    height: 0;
    /* (画像の高さ / 画像の横幅) × 100 */
    padding-top: 130.510204081632653%;
    background: url(../img/camp/night/camp_night_kv.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	position: relative;
}

.camp_night_kv_btn_erea{
	position: absolute;
	left: 50%;
	bottom: 0.5em;
	transform: translateX(-50%);
	width: 100%;
	padding: 0 0.5em 0.5em 0.5em;
}
.camp_night_kv_btn{
	width: 23%;
	margin-bottom: 1em;
	padding-left: 0.5em;
}
.camp_night_kv_btn a img{
	width: 100%;
}
.camp_night_kv nav{
	display: flex;
	align-items: center;
	justify-content: center;
	gap:0.7em;
}
.camp_night_kv nav a img{
	width: 100%;
}

/* 夜競艇とは */
.camp_night_common_section.camp_night_about p{
	padding: 2em 0.7em;
	text-align: center;
	font-size: 1em;
	line-height: 2em;
	color: #ffffff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
	font-weight: bold;
}
span.camp_night_about_strong{
	color: #fcf302;
	margin-top: 0.5em;
}

/* 夜競艇の魅力 */
.camp_night_common_section ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  gap: 1em; /* アイテム間の余白（調整可） */
  list-style: none;
  padding: 0;
  margin: 1em auto 0 auto;
  width: 90%;
}
.camp_night_common_section ul li {
  width: 100%;
}
.camp_night_common_section ul li img {
  width: 90%;
  height: auto;
	margin: 0 auto;
  display: block;
}

@media screen and (max-width: 579px) {
	.camp_night_common_section ul {
  gap: 0.5em;
  width: 95%;
}
	.camp_night_common_section ul li img {
  width: 95%;
}
}

/* 夜競艇の予想 */
#camp_night_buy{
	background: #000000;
}
#camp_night_buy .tipster_detail{
	margin-top: -0.5em;
}
#camp_night_buy .tipster_detail_text{
	padding: 0 0.5em 0 0.5em;
}
#camp_night_buy .plan_table{
	width: 96%;
	margin: 0 auto;
}

/* 購入ボタン*/
.camp_night_common_section_btn{
	text-align: center;
	margin-bottom: 1.5em;
}
.camp_night_common_section_btn a img{
	width: 80%;
	display: inline;
}

/*---------------------------------------
キャンペーンページ（サブスク）
---------------------------------------*/
/* 全体 */
.camp_subscription{
	background: #ffffff;
}
.camp_night_common_section{
	padding-bottom: 1.5em;
}
.camp_night_common_section h2{
	position: relative;
	z-index: 1;
}

/* キービジュアル */
.camp_subscription_kv{
	width: 100%;
    height: 0;
    /* (画像の高さ / 画像の横幅) × 100 */
    padding-top: 142.857142857142859%;
    background: url(../img/camp/subscription/camp_houdai_kv.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
	position: relative;
}
.camp_subscription_kv_nav{
	position: absolute;
	left: 50%;
	bottom: 0.5em;
	transform: translateX(-50%);
	width: 100%;
}
.camp_subscription_kv_nav ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列 */
  gap: 1em; /* アイテム間の余白（調整可） */
  list-style: none;
  padding: 0;
  margin: 0 auto 0.5em auto;
  width: 90%;
}
.camp_subscription_kv_nav ul li {
  width: 100%;
}
.camp_subscription_kv_nav ul li img {
  width: 100%;
  height: auto;
	margin: 0 auto;
  display: block;
}
.camp_subscription_kv_nav p{
	font-size: 0.6em;
	line-height: 1.7em;
	color: #D6D6D6;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
	padding: 1em 1em 0.5em 1em;
}

/* 登録エリア（共通） */
.camp_subscription_entry{
	text-align: center;
}
.camp_subscription_entry p img{
	width: 90%;
	margin: 0 auto 1em auto;
}
.camp_subscription_entry a img{
	display: inline;
	width: 90%;
}

/* 登録エリア（背景グレー） */
.camp_subscription_entry.entry_bg_gray{
	background: #f2f2f2;
	padding: 2em 0 1.5em 0;
}

/* 登録エリア（背景グレー） */
.camp_subscription_entry.entry_bg_black{
	background: #000000;
	padding: 2em 0 1.5em 0;
}

/* 4つの理由 */
.camp_subscription_reason_section{
	padding: 1em 0;
}
.camp_subscription_reason_section ul{
	background: #f4f4f4;
	padding: 1em 0;
	margin: 1.5em auto;
}
.camp_subscription_reason_section ul li img{
	width: 90%;
	margin: 2em auto;
}

/* 予想家紹介 */
.camp_subscription_tipster_section_detail{
	background: #000000;
	padding-bottom: 2em;
	margin-top: 1em;
}

/*---------------------------------------
無料コンテンツ
---------------------------------------*/
/* ボート番号の色定義 */
.boat_number{
	font-size: 16px;
    width: 28px;
    height: 28px;
    line-height: 28px;
    display: inline-block;
    text-align: center;
    color: #fff;
    margin: 0 5px;
}
.boat_number_01{
	color: #000!important;
    background: #EBEBEB!important;
}
.boat_number_02{
	color: #fff!important;
    background: #505050!important;
}
.boat_number_03{
	color: #fff!important;
    background: #f04141!important;
}
.boat_number_04{
	color: #fff!important;
    background: #4184d0!important;
}
.boat_number_05{
	color: #000!important;
    background: #ece962!important;
}
.boat_number_06{
	color: #fff!important;
    background: #54b74d!important;
}
.boat_number_box_01{
	color: #000!important;
    border: 1px solid #D5D6D7;
    background: #EBEBEB!important;
}
.boat_number_box_02{
	color: #fff!important;
	border: 1px solid #505050;
    background: #505050!important;
}
.boat_number_box_03{
	color: #fff!important;
	border: 1px solid #F04141;
    background: #f04141!important;
}
.boat_number_box_04{
	color: #fff!important;
	border: 1px solid #4184D0;
    background: #4184d0!important;
}
.boat_number_box_05{
	color: #000!important;
    border: 1px solid #D5D6D7;
    background: #ece962!important;
}
.boat_number_box_06{
	color: #fff!important;
	border: 1px solid #54B74D;
    background: #54b74d!important;
}
.grade_g1{
	background: #F0BC17;
	color: #ffffff!important;
	padding: 0.2em;
}
.grade_g2{
	background: #78B04A;
	color: #ffffff!important;
	padding: 0.2em;
}
.grade_g3{
	background: #3D7ECF;
	color: #ffffff!important;
	padding: 0.2em;
}
.grade_sg{
	background: #ED3C39;
	color: #ffffff!important;
	padding: 0.2em;
}
.grade_normal{
	background: #B7BEC4;
	color: #ffffff!important;
	padding: 0.2em;
}

/* データ表 全体 */
.table_free_content{
	width: 100%;
	margin: 0 auto 0.5em auto;
	border: 1px solid #0a3ea8;
	border-collapse: collapse;
	text-align: center;
	color: #0a3ea8;
	font-weight: bold;
	font-size: 85%;
}
.free_content_data_box .free_content_data_title{
	display: flex;
	align-items:baseline;
	justify-content: space-between;
	background: #A59E95;
	padding: 0.3em 0.5em;
	color: #ffffff;
	margin-bottom: 0.5em;
}
.free_content_data_box .free_content_data_title p{
	font-size: 0.7em;
	color: #EBEBEB;
}
.free_content_data_box .free_content_data_title p span{
	background: #F07DA6;
	padding: 0.1em 0.3em;
	margin-right: 0.3em;
}
.free_content_data_box h3{
	margin-bottom: 0.3em;
}
.table_bg_blue{
	background: #097dff!important;
	color: #ffffff!important;
	text-align: center!important;
}
table.table_free_content td, th {
	padding: 0.5em 0.2em!important;
	border: 1px solid #0a3ea8;
	background: #fefefe;
}
td.table_gray{
	background: #E4E4E4;
	color: #333333;
}
.table_scroll{
	overflow-x: scroll;
	overflow: auto;
	width: 98%;
	font-size: 80%;
	margin: 0 auto;
	    margin: 0 auto 1em auto;
}
.table_scroll::-webkit-scrollbar {
  height: 8px;
}
.table_scroll::-webkit-scrollbar-track {
  background-color: #ffffff;
	border-radius: 8px;
}
.table_scroll::-webkit-scrollbar-thumb {
  background-color: #bc3b3b;
  border-radius: 8px;
}
table.table_free_content {
    table-layout: fixed; /* テーブルレイアウトを自動に */
    white-space: nowrap; /* テーブルの内容を1行に並べる */
	border-collapse: separate;
}

table.tabel_data td {
    white-space: nowrap; /* テーブルデータの内容を1行に */
	width: calc(100% / 7);
}

/* データ表 会場ジャンプボタン */
.race_place_nav {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5em;
  width: 100%;
  margin: 0 auto 1.5em auto;
	font-weight: bold;
}

.race_place_nav a {
  display: block;
  text-align: center;
  color: #d10000;
  text-decoration: none;
  border-bottom: 5px solid #d10000;
  padding: 0.6em 0;
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* データ表 BEST10 */
.free_content_data_best_box table.tabel_data td {
    white-space: nowrap; /* テーブルデータの内容を1行に */
	width: 100px;
}
.free_content_data_best_box table.tabel_data td.table_fixed_01 {
    position: sticky;
    left: 0;
	z-index: 1;
	width: 60px !important;
}
.free_content_data_best_box table.tabel_data td.table_money{
	width: 80px;
}
.free_content_data_best_box table.tabel_data td.table_place{
	width: 60px;
}
.free_content_data_best_box table.tabel_data td.table_grade{
	width: 60px;
}
.free_content_data_best_box table.tabel_data td.table_day{
	width: 120px;
}
.free_content_data_best_box table.tabel_data td.table_number{
	width: 50px;
}
.free_content_data_best_box table.tabel_data td.table_category{
	width: 60px;
}
.free_content_data_best_box table.tabel_data td.table_group_number{
	width: 90px;
}
.free_content_data_best_box table.tabel_data td.table_group_number span{
	width: 16px;
	height: 16px;
	display: inline-flex;
    align-items: center;
    justify-content: center;
}
.free_content_data_best_box {
  display: none;
}
.best10_month_title {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 0.2em;
	text-align: center;
	color: #ffffff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
	
}
.best10_range {
  font-size: 0.8em;
  color: #666;
	text-align: center;
}
.free_content_data_best_wrapper .pager_wrap {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  margin: 1em auto 0.5em auto;
	width: 98%;
}
.free_content_data_best_wrapper .pager_wrap button {
  font-size: 0.8em;
	font-weight: bold;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.3s;
}
.free_content_data_best_wrapper .pager_wrap button i{
	margin: 0 0.2em;
}
.free_content_data_best_wrapper .pager_wrap button:disabled {
  color: #999;
  cursor: not-allowed;
  opacity: 0.6;
}

/*---------------------------------------
メールBOX（ログイン後）
---------------------------------------*/
.mail_set{
	background:#ffffff;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    margin-bottom: 1.5em;
}
.mail_set dl dt{
	background: url(../img/common/title_bg_dotted.png) no-repeat bottom right / 70%, #2B75CF;
    color: #ffffff;
    font-size: 0.9em;
    padding: 0.2em 0.4em 0.3em 0.4em;
}
.mail_set dl dt a{
	text-decoration: underline;
}
.mail_set dl dd{
	font-size: 0.8em;
    padding: 0.5em 1em;
    line-height: 1.7em;
	margin: 0;
}
.mail_set dl dd ul{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap:5px;
}

/*---------------------------------------
オススメ情報（ログイン後）
---------------------------------------*/
.product_name{
	margin: 1em auto 0 auto;
	    font-size: 0.9em;
}
.product_name dl dt{
	background: var(--navy);
	color: #ffffff;
	padding: 0.1em 0.5em;
	border-radius: 4px;
	display: inline-block;
	margin-bottom: 0.2em;
}
.product_name dl dd{
	margin: 0;
}

/*---------------------------------------
今週の予想家（ログイン後）
---------------------------------------*/
.tipster_week_slider_wrap{
	padding: 2em 0.5em 2em 0.5em;
}
.scroll_induction_wrapper {
  text-align: center;
	margin-top: 1.3em;
}
.scroll_induction {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
  padding: 0.5em 0;
  gap: 0.5em;
	font-size: 0.8em;
}
.scroll_induction img {
  width: 8%;
}
.tipster_week_slider_wrap .tipster_slider_item img{
	border-radius: 0;
	position: relative;
	z-index: 2;
}
.tipster_week_slider_wrap .tipster_slider_item img.tipster_week_slider_img{
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}
.tipster_overlay{
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
	z-index: 9;
}
.tipster_overlay p{
	position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
	text-align: center;
	font-size: 1.2em;
}

span.voice_date{
margin-left:0.5em;
}