@charset "utf-8";

/* reset
*********************************************************/
*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* 基本設定 */
body, html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #181818;
  background-image: url(https://www.transparenttextures.com/patterns/asfalt-dark.png);
}

/****************************** ⚪︎⚪︎⚪︎⚪︎⚪︎競艇用⚪︎⚪︎⚪︎⚪︎⚪︎　******************************/
.header {
  position: fixed;
  top: 0;
  width: 100%;
  background: #313131;
  background: linear-gradient(0deg, #111111 0%, #373737 100%);
  color: #fff;
  z-index: 999;
  left: 50%;
  transform: translateX(-50%);
  max-width: 900px;
  align-items: center;
  box-shadow: 0px 0px 9px #00000078;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 7px;
}

.logo {
  font-size: 1.5em;
  font-weight: bold;
}

.logo_img {
  width: 100%;
  max-width: 143px;
}


.line_btn {
  transition: transform 0.3s ease;
}

.line_btn:hover {
  transform: scale(1.05);
  opacity: 0.8;
}

.nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.nav a {
  text-decoration: none;
  color: #333;
}

/* ハンバーガーメニュー */
.menu-toggle {
  display: none;
  font-size: 1.8em;
  cursor: pointer;
}

/* メニューオーバーレイ */
.menu-overlay {
  position: fixed;
  top: 56px; /* ヘッダーの高さ分 */
  left: 0;
  width: 100%;
  background-color: #ffffffe6;
  border-top: 1px solid #ddd;
  z-index: 998;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.menu-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.menu-overlay ul {
  list-style: none;
  margin: 0;
  padding: 10px 20px;
}

.menu-overlay li {
  margin: 10px 0;
}

.menu-overlay a {
  text-decoration: none;
  color: #333;
}

/* ファーストビュー */
.first-view {
  margin: 0 auto;
  margin-top: 89px; /* ヘッダー分の余白 */
  text-align: center;
  background: #282828 url("../images/gyakb_bg04.png") repeat top center;
  background-size: contain;
  box-shadow: 0px 0px 9px #00000078;
  max-width: 900px;
}

.first-view02 {
  margin: 0 auto;
  margin-top: 89px; /* ヘッダー分の余白 */
  text-align: center;
  background: #1f1f1f;
  background-image: url(https://www.transparenttextures.com/patterns/carbon-fibre.png);
  max-width: 900px;
}

.first-view picture img {
  width: 100%;
  height: auto;
  display: block;
}

.ssg_fv01 {
  width: 100%;
  margin: 0 auto;
  max-width: 645px;

}

.ssg_fv02 {
  margin: auto;
  margin-top: -41px;
  width: 100%;
  max-width: 850px;
  opacity: 0;
  animation: fadeIn 1s 1.2s forwards, cycleShake 8s 2.4s infinite;
}

.ssg_fv03 {
  width: 100%;
  margin: 0 auto;
  margin-top: -41px;
  max-width: 560px;
  transform: translateX(-100%);
  opacity: 0;
  animation: slideIn 1s forwards;
}

.ssg_bg01 {
  text-align: center;
  background: #999999 ;
  background-size: cover;
}

.sub-head {
  display: inline-block;
  background: repeating-linear-gradient(
  -45deg,
  yellow,
  yellow 10px,
  transparent 10px,
  transparent 20px
  );
  padding: 10px 20px;
  font-size: 1.5em;
  font-weight: bold;
  color: #333;
  position: relative;
}

/* オプション: テキスト中央寄せ・レスポンシブ調整 */
.sub-head {
  text-align: center;
  max-width: 90%;
  margin: 20px auto;
}

/* CTAボタン */
.cta-button {
  margin: 0px 0 3px 0;
}

/* フッター */
footer {
  text-align: center;
  padding: 20px;
  background-color: #ffe600;
  font-size: 0.9em;
  max-width: 900px;
  margin: 0 auto;
  box-shadow: 0px 0px 9px #002f4778;
}

.footer_contents{
  width: 100%;
  padding: 6px;
}

.footer_menu{
  display: flex; /* フレックスボックスを使用 */
  justify-content: center; /* 子要素を等間隔に配置 */
  align-items: center; /* 垂直方向の揃えを中央に */
  margin: 0; /* 不要な外側の余白を削除 */
  padding: 0; /* 不要な内側の余白を削除 */
  list-style: none;
  gap: 20px; /* メニュー同士の隙間、調整してください */
}

.footer_menu li {
  padding: 24px 29px;
}

.menubar{
  text-decoration:none;
  color: #003046;
}

.menubar2{
  color: #003046;
  font-size: 10px;
  display: block;
  text-align: left;
  width: 80%;
  margin: auto;
  padding: 25px 30px;
}

.l-footer-image {
  border-radius: 240px 240px 0 0;
  text-align: center;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.contents_yellow_bg{
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  height: auto;
  line-height:2.0;
  padding-bottom: 20px;
  background: #ffe600;
  /*background-image: url(https://www.transparenttextures.com/patterns/checkered-pattern.png);*/
  color: #fff; 
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}

.contents_yellow_bg02{
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  height: auto;
  line-height: 2.0;
  background: #ffdb01;
  /* background-image: url(https://www.transparenttextures.com/patterns/checkered-pattern.png); */
  color: #000000;
}

.contents_red_bg01{
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  height: auto;
  line-height: 2.0;
  padding-top: 32px;
  padding-bottom: 67px;
  background: #e10116 url("../images/gyakb_bg01.png") repeat center center;
  background-size: cover;
  color: #fff;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}

.contents_red_bg02{
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  height: auto;
  line-height: 2.0;
  background: #e10116 url("../images/gyakb_bg01.png") repeat center center;
  background-size: cover;
  color: #ffffff;
}

.contents_black_bg01{
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  height: auto;
  line-height: 2.0;
  padding-top: 12px;
  padding-bottom: 12px;
  background: #1f1f1f;
  background-image: url(https://www.transparenttextures.com/patterns/carbon-fibre.png);
  color: #fff;
}

.contents_black_bg02{
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  margin-top: -6px;
  height: auto;
  line-height: 2.0;
  padding-top: 32px;
  padding-bottom: 67px;
  background: #1f1f1f url("../images/gyakb_bg02.png") repeat center center;
  background-size: cover;
  color: #fff;
  position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);
}

.sec01{
  width: 100%;
  margin: 0 auto;
  margin-top: -65px;
  max-width: 1200px;
}

.sec02{
  width: 100%;
  margin: 0 auto;
  margin-top: -6px;
  max-width: 1200px;
}

.contents_blue_bg02{
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  height: auto;
  line-height:2.0;
  padding-top: 9px;
  padding-bottom: 34px;
  background: #004e8e;
  /*background-image: url(https://www.transparenttextures.com/patterns/checkered-pattern.png);*/
  color: #fff; 
}

.contents_white_bg{
  width: 100%;
  max-width: 718px;
  margin: 0 auto;
  height: auto;
  line-height: 2.0;
  /* padding-top: 9px; */
  border-radius: 15px;
  margin-top: -73px;
  /* padding-bottom: 34px; */
  background: #ffffff;
  /* background-image: url(https://www.transparenttextures.com/patterns/checkered-pattern.png); */
  color: #191919;
  padding: 15px 20px;
  box-sizing: border-box;
  box-shadow: 5px 5px 0px #00000082;
}

.contents_invisible{
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto;
  line-height: 1.6;
  text-align: center;
  padding-bottom: 10px;
}

.contents_invisible_text{
  width: 99%;
  max-width: 900px;
  font-size: 27px;
  font-weight: 600;
  height: auto;
  margin: 0 auto;
  line-height: 1.6;
  text-align: left;
  padding-bottom: 20px;
}

.contents_blue01{
  width: 95%;
  max-width: 900px;
  height: auto;
  margin: 0 auto 0px auto;
  margin-top: -40px;
  line-height: 2.0;
  text-align: left;
  border-right: solid 3px #fff;
  border-left: solid 3px #fff;
  padding: 10px 10px 0px;
  background: #0c9fd8 url("../images/bt_ssg_hit.png") no-repeat center center;
  background-size: cover;
  color: #fff;
}

.contents_blue02{
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto 0px auto;
  margin-top: -72px;
  line-height: 2.0;
  text-align: left;
  padding: 10px 10px 10px;
  background: #0c9fd8;
  background-image: url(https://www.transparenttextures.com/patterns/az-subtle.png);
  color: #fff;
}

.contents_blue03{
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto 0px auto;
  line-height: 2.0;
  text-align: left;
  padding: 10px 10px 0px;
  background: #0c9fd8 url(../images/bt_ssg_hit.png) no-repeat center center;
  background-size: cover;
  color: #fff;
}

.contents_blue04{
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto 0px auto;
  margin-top: 0px;
  line-height: 2.0;
  text-align: left;
  padding: 10px 10px 10px;
  background: #0c9fd8;
  background-image: url(https://www.transparenttextures.com/patterns/az-subtle.png);
  color: #fff;
}

.contents_yellow01{
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto 0px auto;
  margin-top: 0px;
  line-height: 2.0;
  text-align: left;
  padding: 10px 10px 10px;
  background: #f4d600;
  /* background-image: url(https://www.transparenttextures.com/patterns/az-subtle.png); */
  color: #fff;
}

.contents_yellow02{
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto 0px auto;
  margin-top: -72px;
  line-height: 2.0;
  text-align: left;
  padding: 10px 10px 10px;
  background: #f4d600;
  background-image: url(https://www.transparenttextures.com/patterns/az-subtle.png);
  color: #fff;
}

.contents_black01{
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto 0px auto;
  margin-top: 0px;
  line-height: 2.0;
  text-align: left;
  padding: 10px 10px 10px;
  background: #0c0c0c;
  /* background-image: url(https://www.transparenttextures.com/patterns/az-subtle.png); */
  color: #fff;
}

.contents_black02{
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto 0px auto;
  margin-top: -77px;
  line-height: 2.0;
  text-align: left;
  padding: 10px 10px 10px;
  background: #181818;
  background-image: url(https://www.transparenttextures.com/patterns/hixs-evolution.png);
  color: #fff;
}

.contents_black03{
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto 0px auto;
  margin-top: -72px;
  line-height: 2.0;
  text-align: left;
  padding: 10px 10px 0px;
  background: #181818;
  background-image: url(https://www.transparenttextures.com/patterns/hixs-evolution.png);
  color: #fff;
}

.contents_white01{
  width: 95%;
  max-width: 900px;
  height: auto;
  margin: 0 auto 0px auto;
  margin-top: -40px;
  line-height: 2.0;
  text-align: left;
  border-right: solid 3px #5c5c5c;
  border-left: solid 3px #5c5c5c;
  padding: 10px 30px 0px;
  background: #fffffff4;
  color: #fff;
}

.contents_white02{
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto 0px auto;
  margin-top: -72px;
  line-height: 2.0;
  text-align: left;
  padding: 10px 10px 0px;
  background: #fff url(../images/bt_ssg_hit.png) no-repeat center center;
  background-size: cover;
  color: #101010;
}

.contents_white03{
  width: 100%;
  max-width: 900px;
  height: auto;
  margin: 0 auto 0px auto;
  margin-top: -72px;
  line-height: 2.0;
  text-align: left;
  padding: 10px 10px 0px;
  background: #fff;
  background-image: url(https://www.transparenttextures.com/patterns/axiom-pattern.png);
  color: #101010;
}

.contents_yellow_text01{
  color: #181818;
  font-weight: 900;
  font-size: 55px;
  text-shadow: 2px 2px 0px #2626261a;
}

.contents_black_text01{
  color: #101010;
  font-weight: 900;
  font-size: 35px;
  text-shadow: 1px 2px 0px #00000014;
}

.contents_white_text01{
  color: #ffffff;
  font-weight: 900;
  font-size: 35px;
  text-shadow: 1px 2px 0px #00000014;
}

.contents_blue_text01{
  color: #ffffff;
  font-weight: 900;
  font-size: 35px;
  text-shadow: 1px 2px 0px #00000014;
}

.contents_blue_text02{
  color: #fff;
  font-weight: 900;
  font-size: 45px;
  text-shadow: 3px 3px 0px #02264f3b;
}

.contents_blue_text03{
  color: #fff;
  font-weight: 900;
  font-size: 45px;
  text-shadow: 3px 3px 0px #02264f3b;
  background: linear-gradient(transparent 90%, #fff600 90%); 
}


.moving-image {
  position: relative;
  overflow: hidden;
  width: 100%; /* コンテナの幅 */
  height: 117px; /* コンテナの高さ（画像高さに合わせて） */
}

.moving-image img {
  position: absolute;
  top: 0;
  left: -300px;
  animation: moveRight 3s linear infinite, moveUpDown 0.5s ease-in-out infinite alternate;
}

.submit-btn01 {
    padding: 10px 20px;
    background-color: #0050b1;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 34px;
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 最終行の画像を中央に */
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 72px;
  padding-bottom: 30px;
}

.image-grid img {
  width: calc((100% - 40px) / 3); /* 3列計算（gapが2つ×20px） */
  max-width: 100%;
  height: auto;
}

/*********************** 直近jisseki ***************************/

/* Swiper全体ラッパー */
.swiper-containerjisseki {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 5px 0;
  box-sizing: border-box;
  overflow: hidden; /* 横スクロール防止 */
  position: relative; /* ← 追加！ */
}

.swiper-containerjisseki2 {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 5px 0;
  box-sizing: border-box;
  overflow: hidden; /* 横スクロール防止 */
  position: relative; /* ← 追加！ */
}

/* 各slide */
.swiper-slide {
  width: auto !important; /* Swiperに合わせる */
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

/* slide内のjissekiブロック */
.jissekislide {
  width: 100%;
  max-width: 480px; /* スマホで適正サイズ、必要なら変更可 */
  position: relative;
  box-sizing: border-box;
}

/* 画像 */
.jissekislide img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0px;
  object-fit: cover;
}

/* テキストオーバーレイ */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: #2f2f2f;
  font-weight: bold;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-shadow: 2px 2px 7px #ffffff;
  box-sizing: border-box;
  white-space: nowrap;
}

.date {
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: 30px;
}

.race {
  position: absolute;
  top: 59px;
  right: 88px;
  font-size: 33px;
}

.amount {
  color: #fb2700;
  position: absolute;
  top: 97px;
  right: 36px;
  font-size: 40px;
  letter-spacing: -2.5px;
  font-weight: bold;
  font-family: Arial;
  font-style: italic;
}

.amount .big {
  font-size: 60px;
}

.hit {
  font-size: 40px;
  margin-left: 2px;
}

.man {
    font-size: 40px;
    margin-left: 2px;
}

/* 矢印の位置をjisseki画像の中央に合わせる */
.swiper-containerjisseki .swiper-button-next,
.swiper-containerjisseki .swiper-button-prev {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    z-index: 10;
    background: #000000ba;
    border-radius: 50px;
    color: #ffdb03;
    text-shadow: 2px 2px 0px #000000b3;
    width: 40px;
    height: 40px;
}

/* jisseki2用の矢印位置 */
.swiper-containerjisseki2 .jisseki2-next,
.swiper-containerjisseki2 .jisseki2-prev {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    z-index: 10;
    background: #000000ba;
    border-radius: 50px;
    color: #ffdb03;
    text-shadow: 2px 2px 0px #000000b3;
    width: 40px;
    height: 40px;
}

/* 左矢印 */
.swiper-containerjisseki .swiper-button-prev {
  left: 8px; /* 調整可能 */
}

/* 右矢印 */
.swiper-containerjisseki .swiper-button-next {
  right: 8px; /* 調整可能 */
}

/*********************** 直近jisseki_end ***************************/

.voice-box {
  display: flex;
  flex-direction: column;
  align-items: center; /* 中央揃え（横並び全体を中央に） */
  gap: 20px;
}

.icon-and-name {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: flex-start;
  width: 100%;
}

.icon-area img {
    width: 100%;
    max-width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
}

.text-area {
  text-align: left;
}

.name {
  font-size: 26px;
  font-weight: bold;
  margin-bottom: 5px;
}

.san {
  font-size: 20px;
  font-weight: bold;
}

.profile {
  font-size: 0.95rem;
  color: #ffffff;
  font-weight: 900;
  padding: 0 7px 0 7px;
  border-radius: 50px;
  background: #222222;
}

/* コメント全体左寄せ */
.comment {
  font-size: 20px;
  background: #ffdf11a8;
  border-radius: 6px;
  font-weight: 600;
  line-height: 1.6;
  color: #333;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 10px 10px;
}

/* テーブル全体をラップして横スクロール対応 */
.compare-table-wrapper {
  overflow-x: auto;
  border: solid 7px #191919;
  border-radius: 5px;
  width: 100%;
  margin: 20px 0;
}

/* テーブル本体 */
.compare-table {
  border-collapse: collapse;
  min-width: 700px; /* 横スクロール用 */
  width: 100%;
  color: #101010;
  table-layout: fixed;
  font-size: 16px;
  text-align: center;
}

/* 通常セル・ヘッダー共通 */
.compare-table th,
.compare-table td {
  padding: 7px 7px;
  white-space: normal; /* ✅ 自動改行を許可 */
  background-color: #f0fbff;
  word-break: break-word; /* ✅ 長い単語も折り返し */
}

/* 左端の「項目」列固定（ヘッダーも含む） */
.sticky-col {
  position: sticky;
  left: 0;
  font-size: 20px;
  background-color: #1f1f1f !important;
  font-weight: bold;
  color: #ffffff;
  text-shadow: 2px 2px 0px #00000047;
  z-index: 1;
}

/* ヘッダーの左列は z-index 強めに */
.compare-table thead .sticky-col {
  z-index: 2;
}

/* ヘッダー全体 */
.compare-table thead th {
  background-color: #474747;
  color: #ffffff;
  font-weight: bold;
}

/* 「ボート新撰組」列を強調 */
.compare-table td.highlight,
.compare-table th.highlight {
  color: #101010;
  font-weight: 900;
  background: #BF8000;
  background: linear-gradient(90deg, rgba(191, 128, 0, 1) 0%, rgba(255, 200, 0, 1) 10%, rgba(255, 234, 0, 1) 20%, rgba(255, 231, 0, 1) 80%, rgba(255, 200, 0, 1) 90%, rgba(191, 128, 0, 1) 100%);
  border-bottom: 1px solid #313131;
  white-space: normal;
  word-break: break-word;
}

.compare-table tr,
.compare-table th,
.compare-table td {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #313131;
  text-align: center;
  vertical-align: middle;
}

/* 最後の行のボーダーを消す */
.compare-table tr:last-child th {
  border-bottom: 1px solid #313131;
}

.compare-table tr:last-child td {
  border-bottom: 1px solid #313131;
}

.kain_koe01 {
    width: 100%;
    margin: 0 auto;
    max-width: 600px;
    margin-top: 71px;
}

.kain_koe02 {
    width: 100%;
    margin: 0 auto;
    max-width: 600px;
    margin-top: 12px;
}

.line_sec01 {
    background: #ffdb01;
    background-image: url(https://www.transparenttextures.com/patterns/climpek.png);
    color: #101010;
    width: 100%;
    max-width: 855px;
    margin: 0 auto;
    margin-top: 70px;
    padding: 10px;
    border-radius: 10px;
}

.text-reveal {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.text-reveal::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #004e8e; /* 背景色に合わせて調整 */
  transform: translateX(0%);
  transition: transform 1s ease-out;
  z-index: 2;
}

.text-reveal.visible::before {
  transform: translateX(100%);
}

.text-reveal02 {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

.text-reveal02::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #ffdb01; /* 背景色に合わせて調整 */
  transform: translateX(0%);
  transition: transform 1s ease-out;
  z-index: 2;
}

.text-reveal02.visible::before {
  transform: translateX(100%);
}

/*********************** 画面右下のボタン ***************************/
.line-float-button {
  position: fixed;
  bottom: 15px;
  right: 15px;
  max-width: 300px;
  width: 50%;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

/* 画面幅によって幅を調整（例：スマホなら幅80%） */
@media screen and (max-width: 480px) {
  .line-float-button {
    width: 74%;
    right: 3%;
  }
}
/*********************** 画面右下のボタン_end ***********************/

/*********************** アニメーション ***********************/
/* 左右移動 */
@keyframes moveRight {
  0% {
    left: -300px;
  }
  100% {
    left: 100%;
  }
}

/* 上下移動（ゆらゆら） */
@keyframes moveUpDown {
  0% {
    top: 0;
  }
  100% {
    top: 20px; /* 上下の動きの幅（調整可能） */
  }
}

/* 横からslideイン */
@keyframes slideIn {
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* フェードイン */
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* ブルブル2回→止める（3秒）→ブルブル2回→止める（3秒） */
@keyframes cycleShake {
  0%, 10% { transform: translateX(0); }
  1%, 3%, 5%, 7%, 9% { transform: translateX(-5px); }
  2%, 4%, 6%, 8%, 10% { transform: translateX(5px); }
  11%, 50% { transform: translateX(0); }
  51%, 61% { transform: translateX(-5px); }
  52%, 62% { transform: translateX(5px); }
  53%, 63% { transform: translateX(-5px); }
  54%, 64% { transform: translateX(5px); }
  65%, 100% { transform: translateX(0); }
}

.marker-animate {
  position: relative;
  display: inline-block;
  z-index: 0;
}

/* マーカーの疑似要素 */
.marker-animate::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0.1em;
  width: 100%;
  height: 1em;
  background: #ffe000;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s ease-out;
}

/* 表示トリガー時 */
.marker-animate.active::before {
  transform: scaleX(1);
}

.fade-in-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.pulse-heart {
  animation: heartBeat 1.4s infinite ease-in-out;
  transform-origin: center center;
}

/* 心臓のようなドクドク感 */
@keyframes heartBeat {
  0%   { transform: scale(1); }
  14%  { transform: scale(1.12); }
  28%  { transform: scale(0.95); }
  42%  { transform: scale(1.1); }
  70%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

.shake-element {
  /* アニメーションのプロパティを設定 */
  animation: shake 4s infinite; /* shakeアニメーションを4秒かけて無限に繰り返す */
}

/* shakeアニメーションの定義 */
@keyframes shake {
  0%, 75% { /* 0%から75%の期間（3秒間）は静止 */
    transform: translateX(0); /* 横方向の移動なし */
  }
  78% { /* 震え始め */
    transform: translateX(-5px); /* 左に少し移動 */
  }
  81% {
    transform: translateX(5px); /* 右に少し移動 */
  }
  84% {
    transform: translateX(-5px);
  }
  87% {
    transform: translateX(5px);
  }
  90% {
    transform: translateX(-5px);
  }
  93% {
    transform: translateX(5px);
  }
  96% {
    transform: translateX(-5px);
  }
  100% { /* 震え終わり */
    transform: translateX(0); /* 元の位置に戻る */
  }
}

@keyframes zoomOutFromFront {
  0% {
    transform: scale(3) translateZ(0);
    opacity: 0;
  }
  60% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.image-zoom-in {
  animation: zoomOutFromFront 0.8s cubic-bezier(0.23, 1.02, 0.23, 1);
  transform-origin: center center;
  display: inline-block;
  will-change: transform, opacity;
}

/*********************** アニメーション_end ***********************/

/******************************　⚪︎⚪︎⚪︎⚪︎⚪︎競艇用_end⚪︎⚪︎⚪︎⚪︎⚪︎　******************************/

/*********************** レスポンシブ ***************************/
@media screen and (max-width: 768px) {
  .nav {
    display: none;
  }
  .menu-toggle {
    display: block;
  }
  .logo_img {
    max-width: 75px;
  }
  .first-view {
    margin-top: 57px;
  }
  .first-view02 {
    margin-top: 57px;
  }
  .footer_menu {
    flex-direction: column; /* ←縦一列に並べる */
    align-items: center;    /* 中央揃え */
    gap: 10px;              /* 縦方向の隙間、調整してください */
  }
  .footer_menu li {
    padding: 4px 4px;
  }
  .ssg_fv01 {
    max-width: 310px;
    margin-bottom: 27px;
  }

  .ssg_fv02 {
  margin: auto;
  margin-top: -56px;
  width: 100%;
}

  .image-grid img {
    width: calc((100% - 40px) / 2); /* 3列計算（gapが2つ×20px） */
  }

  .swiper-containerjisseki .swiper-button-next,
  .swiper-containerjisseki .swiper-button-prev {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    z-index: 10;
    background: #000000ba;
    border-radius: 50px;
    color: #ffdb03;
    text-shadow: 2px 2px 0px #000000b3;
    width: 40px;
    height: 40px;
  }

  .swiper-containerjisseki2 .jisseki2-next,
  .swiper-containerjisseki2 .jisseki2-prev {
    position: absolute;
    top: 60%;
    transform: translateY(-50%);
    z-index: 10;
    background: #000000ba;
    border-radius: 50px;
    color: #ffdb03;
    text-shadow: 2px 2px 0px #000000b3;
    width: 40px;
    height: 40px;
  }



  /* 左矢印 */
  .swiper-containerjisseki .swiper-button-prev {
    left: 8px; /* 調整可能 */
  }

  /* 右矢印 */
  .swiper-containerjisseki .swiper-button-next {
    right: 8px; /* 調整可能 */
  }

.contents_blue_bg {
    padding-bottom: 0px;
}

.contents_white_bg {
    padding: 3px 3px;
}

.contents_blue02 {
    width: 100%;
    max-width: 900px;
    padding: 10px 0px 0px;
}

.contents_white_bg {
    width: 93%;
    max-width: 620px;
    border-radius: 8px;
}

.contents_yellow_text01 {
    font-size: 30px;
    padding-bottom: 0px;
}

.contents_blue_text01 {
    font-size: 30px;
    padding-bottom: 10px;
}

.contents_blue_text02 {
    font-size: 30px;
    padding-bottom: 10px;
}

.contents_blue_text03 {
    font-size: 30px;
    padding-bottom: 10px;
    background: linear-gradient(transparent 95%, #004e8e 90% 90%);
}

.contents_invisible_text {
    font-size: 16px;
}

.contents_yellow_bg02{
  border-radius: 0px 0px 0 0;
}

.line_sec01 {
    width: 95%;
    max-width: 460px;
}

  .voice-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .icon-area img {
    width: 80px;
    height: 80px;
  }

  .text-area {
    text-align: left;
  }

  .comment {
    font-size: 17px;
  }

  .compare-table {
    min-width: 700px;
  }

  .kain_koe01 {
      width: 96%;
  }

  .kain_koe02 {
      width: 96%;
  }

  .contents_black_text01{
    font-size: 30px;
  }

  .contents_black_bg02{
    padding-top: 8px;
    padding-bottom: 17px;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  }

  .contents_red_bg01{
    padding-top: 8px;
    padding-bottom: 17px;
    clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
  }

.sec01{
  margin-top: -29px;
}

.jissekislide {
  width: 100%;
  max-width: 366px; /* スマホで適正サイズ、必要なら変更可 */
  position: relative;
  box-sizing: border-box;
}

.date {
    top: 10px;
    right: 26px;
    font-size: 21px;
}

.race {
    top: 36px;
    right: 57px;
    font-size: 27px;
}

.amount {
    top: 74px;
    right: 32px;
    font-size: 30px;
}

.amount .big {
    font-size: 48px;
}

.hit {
    font-size: 32px;
    margin-left: 2px;
}

.man {
    font-size: 30px;
    margin-left: 2px;
}



}
/*********************** レスポンシブ_end ***********************/