@charset "utf-8";

.white-img-shadow {
  display: inline-block;
  filter:
    brightness(1.1)
    drop-shadow(0 0 10px rgba(255, 255, 255, 0.85))
    drop-shadow(0 0 24px rgba(255, 255, 255, 0.55));
  animation: img-kira 2.8s ease-in-out infinite;
}

@keyframes img-kira {
  0% {
    filter:
      brightness(1.1)
      drop-shadow(0 0 10px rgba(255, 255, 255, 0.75))
      drop-shadow(0 0 24px rgba(255, 255, 255, 0.45));
  }

  42% {
    filter:
      brightness(1.1)
      drop-shadow(0 0 10px rgba(255, 255, 255, 0.75))
      drop-shadow(0 0 24px rgba(255, 255, 255, 0.45));
  }

  50% {
    filter:
      brightness(1.65)
      drop-shadow(0 0 16px rgba(255, 255, 255, 1))
      drop-shadow(0 0 34px rgba(255, 255, 255, 0.95))
      drop-shadow(0 0 54px rgba(255, 255, 255, 0.65));
  }

  58% {
    filter:
      brightness(1.18)
      drop-shadow(0 0 12px rgba(255, 255, 255, 0.9))
      drop-shadow(0 0 26px rgba(255, 255, 255, 0.55));
  }

  100% {
    filter:
      brightness(1.1)
      drop-shadow(0 0 10px rgba(255, 255, 255, 0.75))
      drop-shadow(0 0 24px rgba(255, 255, 255, 0.45));
  }
}
.orange-text-glow {
  color: #fff;
  text-shadow:
    0 0 4px rgba(255, 255, 255, 0.9),
    0 0 8px rgba(255, 180, 60, 1),
    0 0 18px rgba(255, 120, 0, 0.95),
    0 0 36px rgba(255, 90, 0, 0.8),
    0 0 60px rgba(255, 70, 0, 0.55);
}

.crossfive-evolution-box {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 24px;
  background: #0d0a08;
  border: 2px solid #ff7a00;
  border-left: 8px solid #ff7a00;
  box-shadow:
    7px 7px 0 #7a2f00,
    0 12px 24px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.crossfive-evolution-box::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../../images/sgk_gp/crossfive_logo1.png") center center / 78% auto no-repeat;
  opacity: 0.34;
  pointer-events: none;
}

.crossfive-evolution-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  pointer-events: none;
}

.crossfive-before,
.crossfive-after,
.crossfive-arrow {
  position: relative;
  z-index: 1;
}

.crossfive-before,
.crossfive-after {
  box-sizing: border-box;
  padding: 20px;
  background: rgba(8, 7, 6, 0.82);
  border: 2px solid rgba(255, 122, 0, 0.75);
  text-align: center;
}

.crossfive-before {
  opacity: 0.9;
}

.crossfive-after {
  border-color: #ff7a00;
  background: rgba(18, 10, 5, 0.88);
}

.crossfive-label {
  width: fit-content;
  color: #0b0705;
  font-weight: 900;
  letter-spacing: 0.12em;
  background: #ff7a00;
  padding: 6px 14px;
  margin-bottom: 14px;
  box-shadow: 4px 4px 0 #7a2f00;
  text-align: left;
}

.crossfive-title {
  color: #fff0df;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 0.04em;
  font-size: 1.22em;
  text-align: center;
}

.crossfive-points {
  display: inline-block;
  color: #ff9a26;
  font-weight: 900;
  margin-top: 10px;
  padding: 5px 12px;
  border: 2px solid #ff7a00;
  background: #160b04;
  font-size: 1.16em;
  text-align: center;
}

.crossfive-rate {
  color: #fff0df;
  font-weight: 700;
  margin-top: 14px;
  line-height: 1.7;
  font-size: 1.08em;
  text-align: center;
}

.crossfive-rate span {
  color: #ff8a00;
  font-weight: 900;
  margin-left: 0.4em;
}

.crossfive-arrow {
  color: #ff7a00;
  font-weight: 900;
  text-align: center;
  margin: 18px 0;
  font-size: 1.5em;
  animation: crossfive-arrow-move 1.3s ease-in-out infinite alternate;
}

.crossfive-main-copy {
  margin-top: 20px;
  padding: 18px 14px;
  text-align: center;
  background: #100804;
  border: 2px solid #ff7a00;
  box-shadow: 5px 5px 0 #7a2f00;
}

.crossfive-main-copy span {
  display: block;
  color: #ff9a26;
  font-weight: 900;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  font-size: 1.18em;
  text-align: center;
}



.crossfive-main-copy strong {
  display: block;
  color: #0b0705;
  font-weight: 900;
  letter-spacing: 0.12em;
  padding: 12px 16px;
  background: #ff7a00;
  border: 2px solid #ffb15a;
  font-size: 1.35em;
  text-align: center;
}

@keyframes crossfive-arrow-move {
  from {
    opacity: 0.75;
    transform: translateY(-3px);
  }

  to {
    opacity: 1;
    transform: translateY(12px);
  }
}

.img-edge-fade {
  display: block;

  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
  -webkit-mask-composite: source-in;

  mask-image:
    linear-gradient(to right, transparent 0%, #000 15%, #000 85%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 15%, #000 85%, transparent 100%);
  mask-composite: intersect;
}

.lottery-offer-section {
  display: grid;
  gap: 20px;
  width: 100%;
}

.lottery-offer-card {
  position: relative;
  background: #0d0a08;
  border: 2px solid #ff7a00;
  border-left: 8px solid #ff7a00;
  box-shadow:
    7px 7px 0 #7a2f00,
    0 12px 24px rgba(0, 0, 0, 0.4);
  padding: 18px;
  overflow: hidden;
}

.lottery-offer-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 64px;
  height: 64px;
  background:
    linear-gradient(135deg, rgba(255, 122, 0, 0.22) 0%, transparent 70%);
  pointer-events: none;
}

.lottery-offer-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38%;
  height: 3px;
  background: #ff7a00;
  pointer-events: none;
}

.lottery-offer-number {
  display: inline-block;
  color: #0b0705;
  font-weight: 900;
  line-height: 1;
  background: #ff7a00;
  border: 2px solid #ffb15a;
  box-shadow: 4px 4px 0 #7a2f00;
  padding: 6px 12px;
  margin-bottom: 14px;
}

.lottery-offer-inner {
  text-align: center;
  background: rgba(18, 10, 5, 0.88);
  border: 2px solid rgba(255, 122, 0, 0.75);
  padding: 20px 16px;
}

.lottery-offer-service {
  color: #ff9a26;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1.6;
}

.lottery-offer-title {
  margin-top: 12px;
  color: #0b0705;
  font-weight: 900;
  line-height: 1.5;
  background: #ff7a00;
  border: 2px solid #ffb15a;
  box-shadow: 5px 5px 0 #7a2f00;
  padding: 12px 14px;
}

.benefit-rule-section {
  width: 100%;
}

.benefit-rule-mainbox {
  position: relative;
  box-sizing: border-box;
  padding: 20px;
  background: #0d0a08;
  border: 2px solid #ff7a00;
  border-left: 8px solid #ff7a00;
  box-shadow:
    7px 7px 0 #7a2f00,
    0 12px 24px rgba(0, 0, 0, 0.42);
  overflow: hidden;
}

.benefit-rule-mainbox::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 42%;
  height: 3px;
  background: #ff7a00;
  pointer-events: none;
}

.benefit-rule-heading {
  position: relative;
  z-index: 1;
  margin-bottom: 18px;
  padding: 12px 16px;
  text-align: center;
  color: #0b0705;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: #ff7a00;
  border: 2px solid #ffb15a;
  box-shadow: 5px 5px 0 #7a2f00;
}

.benefit-rule-block,
.benefit-rule-chance,
.benefit-rule-desc,
.benefit-rule-note {
  position: relative;
  z-index: 1;
  background: rgba(18, 10, 5, 0.9);
  border: 2px solid rgba(255, 122, 0, 0.75);
  padding: 18px;
}

.benefit-rule-block + .benefit-rule-alert,
.benefit-rule-alert + .benefit-rule-chance,
.benefit-rule-chance + .benefit-rule-desc,
.benefit-rule-desc + .benefit-rule-note {
  margin-top: 18px;
}

.benefit-rule-label {
  display: inline-block;
  margin-bottom: 12px;
  padding: 6px 12px;
  color: #0b0705;
  font-weight: 900;
  letter-spacing: 0.08em;
  background: #ff7a00;
  border: 2px solid #ffb15a;
  box-shadow: 4px 4px 0 #7a2f00;
}

.scroll-guide {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 9999;
  transform: translate(-50%, 8px);
  text-align: center;
  color: #fff;
  font-weight: 900;
  letter-spacing: 0.08em;
  pointer-events: none;

  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.8s ease,
    transform 0.8s ease,
    visibility 0.8s ease;
}

.scroll-guide.is-show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.scroll-guide.is-hide {
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
}

.scroll-guide-text {
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.72);
  border: 2px solid #ff7a00;
  color: #ff9a26;
  box-shadow: 4px 4px 0 #7a2f00;
}

.scroll-guide-arrow {
  margin-top: 8px;
  color: #ff7a00;
  font-weight: 900;
  animation: scroll-guide-arrow 1s ease-in-out infinite;
}

@keyframes scroll-guide-arrow {
  0% {
    transform: translateY(0);
    opacity: 0.55;
  }

  50% {
    transform: translateY(10px);
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 0.55;
  }
}

@media (max-width: 767px) {
  .scroll-guide {
    display: none !important;
  }
}

.benefit-rule-date {
  padding: 12px 14px;
  text-align: center;
  color: #f39325;
  font-weight: 900;
  line-height: 1.7;
  background: #140b06;
  border: 2px solid #ff7a00;
}

.benefit-rule-text {
  margin-top: 14px;
  padding: 14px;
  text-align: center;
  color: #fff0df;
  font-weight: 700;
  line-height: 1.9;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 122, 0, 0.35);
}

.benefit-rule-alert {
  position: relative;
  z-index: 1;
  padding: 10px 14px;
  text-align: center;
  color: #ff7a00;
  font-weight: 900;
  letter-spacing: 0.08em;
  border: 2px dashed #ff7a00;
  background: rgba(255, 122, 0, 0.08);
}

.benefit-rule-chance-lead {
  margin-bottom: 16px;
  padding: 14px;
  text-align: center;
  color: #fff0df;
  font-weight: 700;
  line-height: 1.9;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 122, 0, 0.3);
}

.benefit-rule-block-second {
  margin-top: 0;
}

.benefit-rule-ticket {
  margin-top: 16px;
  padding: 16px;
  text-align: center;
  background: #100804;
  border: 2px solid #ff7a00;
  box-shadow: 5px 5px 0 #7a2f00;
}

.benefit-rule-ticket-service {
  color: #ff9a26;
  font-weight: 900;
  line-height: 1.6;
  letter-spacing: 0.04em;
}

.benefit-rule-ticket-name {
  margin-top: 10px;
  padding: 10px 14px;
  color: #0b0705;
  font-weight: 900;
  line-height: 1.5;
  background: #ff7a00;
  border: 2px solid #ffb15a;
  box-shadow: 4px 4px 0 #7a2f00;
}

.benefit-rule-desc-title {
  margin-bottom: 12px;
  text-align: center;
  color: #ff9a26;
  font-weight: 900;
  line-height: 1.7;
}

.benefit-rule-desc-text {
  padding: 16px;
  text-align: center;
  color: #fff0df;
  font-weight: 700;
  line-height: 1.9;
  background: #140b06;
  border: 2px solid rgba(255, 122, 0, 0.65);
}

.benefit-rule-note {
  display: grid;
  gap: 12px;
}

.benefit-rule-note-item {
  padding: 14px;
  color: #ffd9b5;
  font-weight: 700;
  line-height: 1.8;
  background: rgba(0, 0, 0, 0.22);
  border-left: 4px solid #ff7a00;
  border-top: 1px solid rgba(255, 122, 0, 0.25);
}

.dark-review-section {
  width: 100%;
  display: grid;
  gap: 24px;
}

.dark-review-card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255, 122, 0, 0.16), transparent 38%),
    linear-gradient(180deg, #1b120c 0%, #0d0b09 100%);
  border: 1px solid rgba(255, 132, 0, 0.85);
  box-shadow:
    0 0 0 1px rgba(255, 132, 0, 0.18) inset,
    8px 8px 0 rgba(255, 95, 0, 0.35),
    0 18px 35px rgba(0, 0, 0, 0.45);
  padding: 16px;
  overflow: hidden;
}

.dark-review-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 42%;
  height: 3px;
  background: linear-gradient(90deg, #ff7a00, transparent);
}

.dark-review-card::after {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 160px;
  height: 160px;
  background: radial-gradient(circle, rgba(255, 106, 0, 0.35), transparent 68%);
  pointer-events: none;
}

.dark-review-image {
  position: relative;
  z-index: 1;
  width: 100%;
  background: #050505;
  border: 1px solid rgba(255, 132, 0, 0.65);
  box-shadow:
    0 0 0 2px rgba(255, 132, 0, 0.12) inset,
    0 0 22px rgba(255, 106, 0, 0.22);
  overflow: hidden;
}

.dark-review-image img {
  display: block;
  width: 100%;
  height: auto;
}

.dark-review-content {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  padding: 16px;
  background: rgba(0, 0, 0, 0.42);
  border-left: 4px solid #ff7a00;
  border-top: 1px solid rgba(255, 132, 0, 0.35);
}

.dark-review-name {
  width: fit-content;
  color: #ff9a26;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding: 6px 12px;
  margin-bottom: 12px;
  background: rgba(255, 122, 0, 0.12);
  border: 1px solid rgba(255, 132, 0, 0.65);
  box-shadow: 4px 4px 0 rgba(255, 95, 0, 0.35);
}

.dark-review-text {
  color: #fff0df;
  font-weight: 700;
  line-height: 1.8;
}

.expert-comment-section {
  width: 100%;
  display: grid;
  gap: 22px;
}

.expert-comment-card {
  position: relative;
  background:
    linear-gradient(135deg, rgba(255, 122, 0, 0.14), transparent 34%),
    linear-gradient(180deg, #17100c 0%, #080706 100%);
  border: 1px solid rgba(255, 132, 0, 0.75);
  border-left: 6px solid #ff7a00;
  padding: 20px;
  box-shadow:
    0 0 0 1px rgba(255, 132, 0, 0.16) inset,
    6px 6px 0 rgba(255, 95, 0, 0.28),
    0 18px 34px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.expert-comment-card::before {
  content: "“";
  position: absolute;
  top: -28px;
  right: 16px;
  color: rgba(255, 122, 0, 0.18);
  font-size: 120px;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.expert-comment-card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 45%;
  height: 3px;
  background: linear-gradient(90deg, #ff7a00, transparent);
}

.expert-comment-label {
  position: relative;
  z-index: 1;
  width: fit-content;
  color: #0b0705;
  font-weight: 900;
  letter-spacing: 0.12em;
  background: #ff8a00;
  padding: 5px 12px;
  margin-bottom: 14px;
  box-shadow: 4px 4px 0 rgba(255, 95, 0, 0.35);
}

.expert-comment-name {
  position: relative;
  z-index: 1;
  color: #ffae42;
  font-weight: 900;
  letter-spacing: 0.04em;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255, 132, 0, 0.45);
}

.expert-comment-text {
  position: relative;
  z-index: 1;
  padding: 1%;
  background-color: #161616e5;
  border:1px solid #6b6b6ba4;
  color: #fff0df;
  font-weight: 700;
  line-height: 1.9;
}

/* ===== 上から震えて勢いよく降りてくる + フェードイン ===== */
.gf-drop-in {
  --dur: 1.6s;       /* ← アニメ全体 */
  --delay: 4s;       /* 開始遅延 */
  --dist: 120%;      /* 上から入ってくる距離 */
  --shake: 6px;      /* 震え幅 */
  --bounce: 14px;    /* 着地後のバウンド幅 */

  animation: gf-shake-then-drop var(--dur) var(--delay) both;
  will-change: transform, opacity;
  transform-origin: top center;
  opacity: 0; /* 最初は透明 */
}

@keyframes gf-shake-then-drop {
  0%   { transform: translateY(calc(-1 * var(--dist))); opacity: 0; }
  6%   { transform: translateY(calc(-1 * var(--dist) - var(--shake))); opacity: .2; }
  12%  { transform: translateY(calc(-1 * var(--dist) + var(--shake))); opacity: .4; }
  18%  { transform: translateY(calc(-1 * var(--dist) - var(--shake))); opacity: .6; }
  24%  { transform: translateY(calc(-1 * var(--dist) + var(--shake))); opacity: .8; }
  30%  { transform: translateY(calc(-1 * var(--dist))); opacity: 1; }

  /* ドロップ */
  60%  { transform: translateY(0); }

  /* 着地後のバウンド */
  75%  { transform: translateY(calc(-1 * var(--bounce))); }
  88%  { transform: translateY(0); }
  94%  { transform: translateY(calc(-1 * var(--bounce) * .35)); }
  100% { transform: translateY(0); opacity: 1; }
}

/* モーション制御 */
@media (prefers-reduced-motion: reduce) {
  .gf-drop-in { animation: none !important; opacity: 0.5 !important; transform: none !important; }
}


/* レースBOX全体のラッパー */
.race-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;              /* BOX間の余白 */
  justify-content: center; /* 中央寄せ */
}

/* 各BOX */
.race-box {
  flex: 0 0 400px;         /* PC時は幅400px固定 */
  background: #000;
  border: 2px solid #FFD700;
  padding: 10px 6px;
  border-radius: 8px;
  box-shadow: 0 0 6px #FFD700, 0 0 12px #FFEA00;
  font-family: "Arial Black", "Segoe UI", sans-serif;
  color: #fff;
  text-align: left;
}

/* 日付 */
.race-date {
  font-size: 1.5rem;
  color: #ffe366;
  font-weight: bold;
  text-shadow: 0 0 3px #FFEA00, 0 0 6px #FFD700;
  margin-bottom: 4px;
}

/* レース名 */
.race-name {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #fff;
  text-shadow: 0 0 3px #FFD700;
}

/* 払戻金額 */
.race-amount {
text-align: center;
  font-size: 2rem;
  font-weight: 900;
  color: #FFEB3B;
  text-shadow: 
    0 0 3px #FFD700, 
    0 0 6px #FFEA00, 
    0 0 12px #FFFF00;
  animation: neonPulse 1.5s infinite alternate;
}

/* ネオン点滅アニメーション */
@keyframes neonPulse {
  from {
    text-shadow: 
      0 0 3px #FFD700, 
      0 0 6px #FFEA00, 
      0 0 12px #FFFF00;
  }
  to {
    text-shadow: 
      0 0 6px #FFD700, 
      0 0 12px #FFEA00, 
      0 0 24px #FFFF00;
  }
}

/* スマホ時は1列表示 */
@media (max-width: 767px) {
  .race-box {
    flex: 1 1 100%;
  }
}


.scroll-btn {
  position: fixed;
  right: 40px;
  bottom: 30px;
  padding: 14px 24px;
  background: #f17400; /* 黄色 */
  color: #333;
  font-weight: bold;
  border-radius: 50px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(255, 255, 255, 0.25);
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 9999;
  text-align: center;
}

/* 表示時 */
.scroll-btn.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ホバー（PCのみ効く） */
.scroll-btn:hover {
  background: #ffa365;
  box-shadow: 0 6px 14px rgba(143, 57, 0, 0.3);
}

/* ===== スマホ用スタイル ===== */
@media (max-width: 768px) {
  .scroll-btn {
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    padding: 16px;
    font-size: 18px;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.25);
  }
}