/** Shopify CDN: Minification failed

Line 445:0 Invalid escape
Line 659:2 Invalid escape
Line 665:4 Invalid escape
Line 687:2 Invalid escape

**/
/* ポーカードリル用のカスタムスタイル */

/* カラー変数 */
:root {
  --color-yellow: #ffc906;
  --color-yellow-soft: #ffd43b;
  --color-blue-royal: #0055ff;
  --color-blue-600: #0044cc;
  --color-accent-orange: #de4804;
  --color-accent-yellow: #f9ad06;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
}

/* ベーススタイル */
.poker-drill-page {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
  color: var(--color-gray-900);
  background-color: var(--color-white);
  margin: 0;
  padding: 0;
  line-height: 1.5;
  width: 100%;
  overflow-x: hidden;
  /* Remove the padding-top that was creating white space */
  /* padding-top: 70px; */
  font-size: 18px;
}

/* コンテナ */
.container {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem; /* 1.5remから2remに統一 */
  padding-right: 2rem; /* 1.5remから2remに統一 */
}

@media (min-width: 768px) {
  .container {
    padding-left: 2.5rem; /* PCでのパディングを統一 */
    padding-right: 2.5rem; /* PCでのパディングを統一 */
  }
}

/* セクション共通スタイル */
section {
  padding: 5rem 0; /* 4remから5remに変更して統一 */
  position: relative;
}

@media (min-width: 768px) {
  section {
    padding: 7rem 0; /* 6remから7remに変更して統一 */
  }
}

/* セクションヘッダー - 共通スタイル */
.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h2 {
  font-size: 2.5rem; /* 文字サイズを大きく */
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.section-subtitle {
  font-size: 1.25rem; /* 文字サイズを大きく */
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-accent-yellow);
}

.section-subtitle.orange {
  color: var(--color-accent-orange);
}

@media (min-width: 768px) {
  .section-header h2 {
    font-size: 3.5rem; /* PCでさらに大きく */
    line-height: 1.2;
  }

  .section-subtitle {
    font-size: 1.5rem; /* PCでさらに大きく */
  }
}

/* 黒背景セクション共通スタイル */
.dark-section {
  background: linear-gradient(to bottom right, var(--color-black), var(--color-gray-900));
  color: var(--color-white);
}

.dark-section .section-header h2,
.dark-section p {
  color: var(--color-white);
}

/* 黒背景セクションでのサブタイトル */
.dark-section .section-subtitle {
  color: var(--color-accent-yellow);
}

/* ユーティリティクラス */
.bold {
  font-weight: 700;
}

.highlight {
  color: var(--color-accent-yellow);
  font-weight: 700;
}

/* カラーハイライトクラス */
.highlight-yellow {
  color: #f9ad06 !important;
  font-weight: 700;
}

.highlight-orange {
  color: #de4804 !important;
  font-weight: 700;
}

.space-y > * + * {
  margin-top: 1.5rem;
}

.desktop-only {
  display: none;
}

@media (min-width: 768px) {
  .desktop-only {
    display: inline;
  }

  .mobile-only {
    display: none;
  }
}

/* ボタン - 共通スタイル */
.btn {
  display: inline-block;
  padding: 1rem 2rem;
  font-weight: 600;
  text-align: center;
  border-radius: 9999px;
  transition: all 0.3s ease;
  cursor: pointer;
  font-size: 1.8rem;
  line-height: 1.5;
  text-decoration: none;
  min-width: auto; /* Change from fixed width to auto */
}

@media (min-width: 768px) {
  .btn {
    padding: 1.25rem 2.5rem;
    font-size: 2.5rem; /* 2remから2.5remに変更してさらに大きく */
    min-width: auto; /* PCでの最小幅を大きく */
    width: auto; /* 幅を内容に合わせる */
  }
}

/* 追加: ボタンバリエーション */
.btn-primary {
  background-color: var(--color-yellow);
  color: var(--color-black);
}

.btn-primary:hover {
  background-color: var(--color-yellow-soft);
}

.btn-blue {
  background-color: #1b71e3; /* Update to requested color */
  color: var(--color-white);
  padding-left: 2rem;
  padding-right: 2rem;
}

.btn-blue:hover {
  background-color: #1660c5; /* Slightly darker for hover state */
}

@media (min-width: 768px) {
  .btn {
    padding: 1.25rem 2.5rem;
    font-size: 2.5rem; /* 2remから2.5remに変更してさらに大きく */
    min-width: auto; /* PCでの最小幅を大きく */
    width: auto; /* 幅を内容に合わせる */
  }

  .btn-blue {
    padding-left: 2rem; /* SPと同じパディング */
    padding-right: 2rem; /* SPと同じパディング */
    width: auto; /* 幅を内容に合わせる */
  }
}

/* ヒーローセクションのボタン用特別スタイル */
.hero-section .btn {
  font-size: 1.8rem; /* モバイル用 */
}

@media (min-width: 768px) {
  .hero-section .btn {
    font-size: 2.5rem; /* PC用 */
  }
}

/* LINE登録バナー */
.line-banner {
  background-color: #06c755;
  color: var(--color-white);
  padding: 0.75rem 1rem;
  text-align: center;
  font-weight: 500;
  font-size: 1.25rem; /* 文字サイズを大きく */
  position: relative;
  z-index: 2; /* バナーのz-indexを設定 */
}

/* ヘッダー固定 */
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 100;
  background-color: transparent; /* Make header transparent initially */
  transition: background-color 0.3s ease;
}

/* Add this to make header background visible only when scrolled */
header.scrolled {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ヒーローセクション */
.hero-section {
  position: relative;
  min-height: 85vh; /* 90vhから85vhに変更して少しコンパクトに */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 2rem;
  background-color: var(--color-black);
  color: var(--color-white);
  overflow: hidden;
  text-align: center;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.glow {
  position: absolute;
  width: 12rem;
  height: 12rem;
  border-radius: 9999px;
  background-color: rgba(255, 201, 6, 0.1);
  filter: blur(100px);
}

.glow-1 {
  top: 25%;
  left: 25%;
}

.glow-2 {
  bottom: 25%;
  right: 25%;
}

.hero-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  max-width: 1100px; /* 最大幅を設定 */
  margin: 0 auto; /* 中央揃え */
  padding-top: 1.5rem; /* ヘッダーとの重なりを防ぐための追加パディング */
}

/* ヒーローセクションのレイアウト調整 */
.hero-title-container {
  width: 100%;
  margin-bottom: 1rem;
}

.hero-image-container {
  width: 100%;
  max-width: 150px; /* SPでの最大幅 */
  margin: 0 auto 1rem auto; /* 上下左右の余白を調整 */
  position: relative;
}

.hero-image-container img {
  position: relative;
  z-index: 0;
}

/* 画像オーバーレイ */
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 薄い黒いレイヤー */
  border-radius: 16px;
  z-index: 1;
}

.hero-button-container {
  width: 100%;
  margin-top: 1rem;
}

/* SP表示時の余白調整 */
@media (max-width: 767px) {
  .hero-section {
    padding-top: 4rem; /* ヘッダーとの間隔を調整 */
    padding-bottom: 3rem; /* 下部余白を調整 */
    display: flex;
    align-items: center;
    min-height: 85vh; /* 高さを少し小さく */
  }

  .hero-title-container {
    margin-bottom: 1.5rem; /* タイトルの下の余白 */
  }

  .hero-image-container {
    margin-bottom: 1.5rem; /* 画像の下の余白 */
  }

  .hero-button-container {
    margin-top: 0.5rem; /* ボタンの上の余白 */
  }
}

/* PC表示時の余白調整 */
@media (min-width: 768px) {
  .hero-title-container {
    margin-bottom: 2rem;
  }

  .hero-image-container {
    max-width: 440px;
    margin-bottom: 2.5rem;
  }

  .hero-button-container {
    margin-top: 1.5rem;
  }
}

/* ヒーローセクションのタイトルとサブタイトル用の新しいクラス */
.hero-title-text {
  font-size: calc(var(--font-heading-scale) * 2.8rem); /* Increase size to match screenshot */
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
  text-align: center;
}

.hero-subtitle-text {
  font-size: 2rem; /* Increase size to match screenshot */
  font-weight: 500;
  margin-top: 1rem;
  text-align: center;
}

@media (min-width: 768px) {
  .hero-title-text {
    font-size: 5rem;
  }

  .hero-subtitle-text {
    font-size: 2.5rem;
  }
}

.hero-title {
  margin-bottom: 2rem;
  width: 100%; /* 幅を100%に */
  text-align: center; /* テキストを中央揃え */
}

.hero-title h1 {
  font-size: calc(var(--font-heading-scale) * 3.6rem); /* SPサイズを指定のサイズに変更 */
  font-weight: 700;
  line-height: 1.2;
  background: linear-gradient(to bottom, #fcd34d, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: 1rem;
  text-align: center; /* テキストを中央揃え */
}
\
.hero-title h2 {
  font-size: 4rem; /* 2.5remから4remに変更して倍のサイズに */
  font-weight: 500;
  background: linear-gradient(to bottom, #fcd34d, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-top: 1rem;
  text-align: center; /* テキストを中央揃え */
}

/* ネオンテキスト効果 */
.neon-text-primary {
  text-shadow: 0 0 10px rgba(255, 201, 6, 0.9), 0 0 20px rgba(255, 201, 6, 0.7), 0 0 30px rgba(255, 201, 6, 0.5), 0 0
    40px rgba(255, 201, 6, 0.4);
}

.neon-text-secondary {
  text-shadow: 0 0 7px rgba(255, 201, 6, 0.8), 0 0 15px rgba(255, 201, 6, 0.6), 0 0 20px rgba(255, 201, 6, 0.4);
}

/* ヒーローセクションの画像スタイルを修正 - インラインスタイルを優先 */
.image-wrapper {
  width: 100%;
  height: auto;
  padding-bottom: 140%;
  position: relative;
  overflow: hidden !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  margin: 0 auto;
}

/* 画像コンテナ用の新しいクラス */
.rounded-image-container {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* 画像自体用の新しいクラス */
.rounded-image {
  border-radius: 16px !important;
  -webkit-border-radius: 16px !important;
  -moz-border-radius: 16px !important;
}

.image-wrapper {
  border-radius: 16px !important;
  -webkit-border-radius: 16px !important;
  -moz-border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* 画像コンテナ自体にも角丸を適用 */
#hero-image-container {
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* 画像に直接スタイルを適用するためのセレクタ */
#hero-image {
  border-radius: 16px !important;
  -webkit-border-radius: 16px !important;
  -moz-border-radius: 16px !important;
}

.image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px !important;
}

@media (min-width: 768px) {
  .image-wrapper {
    border-radius: 12px !important;
  }

  .image-wrapper img {
    border-radius: 12px !important;
  }
}

/* PC表示時の画像スタイルを修正 */
@media (min-width: 768px) {
  .image-wrapper {
    border-radius: 16px; /* PCでは少し大きめの角丸に */
    overflow: hidden; /* 角丸を確実に適用するため */
  }

  .image-wrapper img {
    border-radius: 16px; /* PCでは少し大きめの角丸に */
  }

  .hero-image-container {
    max-width: 440px; /* PCでの最大幅 */
    margin-bottom: 2.5rem;
    border-radius: 16px; /* コンテナ自体にも角丸を適用 */
    overflow: hidden; /* 角丸を確実に適用するため */
  }
}

.hero-cta {
  margin-top: 0.75rem; /* 1.5remから0.75remに減らして余白を狭くする */
  text-align: center; /* テキストを中央揃え */
  width: 100%; /* 幅を100%に */
}

@media (min-width: 768px) {
  .hero-section {
    padding-top: 3rem; /* PCでのヘッダーとの間隔を調整 */
    padding-bottom: 5rem; /* PC表示時は元の余白に戻す */
  }

  .hero-image-container {
    max-width: 440px; /* PCでの最大幅を倍にする (220px * 2) */
    margin-bottom: 3rem; /* PC表示時は元の余白に戻す */
  }

  .hero-title h1 {
    font-size: 15rem; /* PCでのフォントサイズを倍にする (7.5rem * 2) */
  }

  .hero-title h2 {
    font-size: 8rem; /* PCでのフォントサイズを倍にする (4rem * 2) */
  }

  .hero-cta {
    margin-top: 1.5rem; /* PC表示時は元の余白に戻す */
  }
}

/* イントロセクション */
.intro-section {
  padding: 5rem 0 6rem; /* 下部余白を増やす */
}

@media (min-width: 768px) {
  .intro-section {
    padding: 7rem 0 8rem; /* PC表示での下部余白を増やす */
  }
}

.intro-content {
  max-width: 800px; /* tournament-contentと同じ幅に統一 */
  width: 100%;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.intro-content > div {
  width: 100%;
  max-width: 800px; /* テキストブロックの最大幅を設定 */
}

.intro-content p {
  font-size: 1.8rem; /* 1.5remから1.8remに変更 */
  line-height: 2.2;
  margin-bottom: 1rem;
  white-space: nowrap; /* 1行が折れないようにする */
}

@media (max-width: 850px) {
  .intro-content p {
    white-space: normal; /* モバイル表示では折り返しを許可 */
  }
}

.intro-section .section-header {
  margin-bottom: 3rem;
}

.intro-section .section-subtitle.orange {
  color: var(--color-accent-orange);
}

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

.highlight-orange {
  color: #de4804 !important;
  font-weight: 700;
}

.divider {
  width: 4rem;
  height: 1px;
  background-color: var(--color-gray-300);
  margin: 5rem auto 1rem;
}

.tagline-text {
  font-size: 2rem;
  font-weight: 400; /* 300から400に変更してやや太く */
  line-height: 1.4;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .intro-section {
    padding-top: 4rem;
    padding-bottom: 8rem;
  }
  \
  .intro-content p {
    font-size: 2rem;
  }

  .tagline-text {
    \
    font-size: 2.2rem; /* 2remから2.2remに変更して階層を明確に */
    font-weight: 400; /* フォントウェイトを維持 */
  }
}

@media (min-width: 1024px) {
  .tagline-text {
    font-size: 2.5rem; /* 現状維持 */
  }
}

/* トーナメントセクション */
.tournamentnt-section {
  background-color: var(--color-black);
  padding: 6rem 0;
}

@media (min-width: 768px) {
  .tournament-section .container {
    max-width: 1100px; /* 800pxから1100pxに変更して統一 */
  }
  \
}

.tournament-content {
  max-width: 800px; /* コンテンツ自体の幅を制限 */
  width: 100%;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tournament-content > div {
  width: 100%;
  max-width: 800px; /* テキストブロックの最大幅を設定 */
}

.tournament-content p {
  font-size: 1.8rem; /* 1.5remから1.8remに変更 */
  line-height: 2.2;
  margin-bottom: 1rem;
  white-space: nowrap; /* 1行が折れないようにする */
}

@media (max-width: 850px) {
  .tournament-content p {
    white-space: normal; /* モバイル表示では折り返しを許可 */
  }
}

@media (min-width: 768px) {
  .tournament-section {
    padding: 8rem 0;
  }

  .tournament-content {
    max-width: 800px; /* PC表示時の最大幅を制限 */
    margin: 0 auto;
  }

  .tournament-content > div {
    width: 100%;
    max-width: 100%; /* 親要素の幅に合わせる */
  }

  .tournament-content p {
    font-size: 2rem; /* PCでさらに大きく */
    text-align: left; /* PC表示時は中央揃えから左揃えに変更 */
    margin-left: auto;
    margin-right: auto;
    max-width: 800px; /* テキスト自体の最大幅を設定 */
  }
}

.tournament-content .highlight {
  color: var(--color-accent-yellow) !important;
  font-weight: 700;
}

.tournament-section .highlight {
  color: var(--color-accent-yellow) !important;
  font-weight: 700;
}

/* エクスペリエンスセクション */
.experience-section {
  padding: 6rem 0;
}

.experience-intro {
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: 8rem; /* 6remから8remに増やす */
  text-align: center;
  color: var(--color-gray-600);
}

.experience-intro p {
  font-size: 1.8rem;
  line-height: 2.0;
  font-weight: 300;
  max-width: 42rem;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .experience-intro p {
    font-size: 2rem;
    white-space: nowrap; /* PC表示時に改行を防止 */
    max-width: none; /* 最大幅の制限を解除 */
    width: auto; /* 幅を内容に合わせる */
  }

  /* コンテナの幅を広げて、テキストが収まるようにする */
  .experience-intro {
    max-width: 1000px; /* より広い最大幅を設定 */
    margin: 0 auto 10rem auto; /* 下部マージンを10remに増やして余白を確保 */
  }
}

.lessons-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem; /* 1.5remから2remに増やして余白を広げる */
  margin-top: 0; /* 6remから0に変更して余白を調整 */
  margin-bottom: 6rem; /* 4remから6remに増やして下の余白を広げる */
  width: 100%;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .lessons-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 2rem; /* 上部マージンを追加 */
  }
}

.lesson-card {
  background-color: #f5f5f0;
  padding: 1.25rem; /* 1.5remから1.25remに縮小 */
  border-radius: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

@media (min-width: 768px) {
  .lesson-card {
    max-width: 600px; /* 元のサイズに戻す */
    width: 100%;
    padding: 1.5rem; /* PCサイズでは少し余裕を持たせる */
    margin-left: auto;
    margin-right: auto;
  }
}

.lesson-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem; /* 1remから0.75remに減らす */
}

.lesson-number {
  background-color: var(--color-black);
  color: var(--color-white);
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  flex-shrink: 0;
}

.lesson-number span {
  font-size: 1.5rem; /* 文字サイズを大きく */
}

.lesson-title h3 {
  font-size: 2rem; /* 1.75remから2remに変更 */
  font-weight: 700;
}

.lesson-description {
  margin-top: 1rem; /* 1.5remから1remに減らす */
  margin-left: 4rem;
}

.experience-footer {
  text-align: center;
  margin-top: 4rem;
}

.experience-footer p {
  font-size: 1.8rem; /* 1.5remから1.8remに変更 */
  line-height: 2.0; /* 追加 */
  color: var(--color-gray-700);
  margin-bottom: 1rem;
}

.experience-footer p.highlight-orange {
  color: #de4804 !important;
  font-weight: 700;
}

/* 説明セクション - 黒背景共通スタイルを使用 */
.explanation-section {
  padding: 6rem 0;
}

.explanation-content {
  max-width: 800px; /* 48remから800pxに変更して統一 */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.explanation-content > div {
  width: 100%;
  max-width: 700px; /* 600pxから700pxに変更して幅を広くする */
  text-align: left; /* 中央揃えから左揃えに戻す */
}

.explanation-content p {
  font-size: 1.8rem; /* 1.5remから1.8remに変更 */
  line-height: 2.2;
  color: rgba(255, 255, 255, 0.9) !important;
  white-space: nowrap; /* 1行が折れないようにする */
}

@media (max-width: 850px) {
  .explanation-content p {
    white-space: normal; /* モバイル表示では折り返しを許可 */
  }
}

.explanation-content .highlight {
  color: #f9ad06;
  font-weight: 700;
}

.explanation-content .bold {
  font-weight: 700;
}

@media (min-width: 768px) {
  .explanation-section {
    padding: 8rem 0;
  }

  .explanation-content p {
    font-size: 2rem; /* PCでさらに大きく */
  }
}

/* テスティモニアルセクション */
.testimonial-section {
  padding: 6rem 0;
}

.testimonial-intro {
  max-width: 800px; /* 幅を制限して統一 */
  margin: 0 auto 4rem auto; /* 5remから4remに変更して統一感を出す */
  font-size: 1.8rem;
  line-height: 2.2;
  color: var(--color-gray-800);
  text-align: center;
}

.testimonial-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.testimonial-header h3 {
  font-size: 2.5rem; /* 文字サイズを大きく */
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.testimonial-header p {
  font-size: 1.25rem; /* 文字サイズを大きく */
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-gray-500);
  font-weight: 500;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.testimonial-card {
  background-color: var(--color-gray-50);
  padding: 2.5rem; /* 2remから2.5remに増やす */
  border-radius: 1rem;
  position: relative;
}

.quote {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-size: 3rem;
  font-family: serif;
  color: var(--color-yellow);
}

.testimonial-content {
  padding-top: 2rem;
}

.testimonial-text {
  font-size: 1.6rem; /* Increase from 1.25rem to 1.6rem */
  color: var(--color-gray-700);
  margin-bottom: 2rem;
  position: relative;
  z-index: 10;
  font-weight: 300;
}

.testimonial-text strong {
  font-weight: 700 !important;
  display: inline !important;
  color: inherit !important;
}

.testimonial-author {
  display: flex;
  align-items: center;
}

.author-avatar {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-gray-200);
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  flex-shrink: 0;
}

.author-name {
  font-size: 1.25rem; /* 文字サイズを大きく */
  font-weight: 500;
}

@media (min-width: 768px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .testimonial-intro {
    font-size: 2rem; /* PCでさらに大きく */
  }

  .testimonial-header h3 {
    font-size: 3rem; /* PCでさらに大きく */
  }

  .testimonial-header p {
    font-size: 1.5rem; /* PCでさらに大きく */
  }

  .testimonial-text {
    font-size: 1.8rem; /* Increase from 1.5rem to 1.8rem */
  }

  .author-name {
    font-size: 1.5rem; /* PCでさらに大きく */
  }
}

/* バリューセクション - 黒背景共通スタイルを使用 */
.value-section {
  padding: 6rem 0;
}

.value-content {
  margin-top: 3rem; /* 4remから3remに変更して統一感を出す */
}

.value-intro,
.value-conclusion {
  max-width: 800px; /* 幅を制限して統一 */
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: 4rem;
}

.value-intro p {
  font-size: 1.8rem; /* 1.5remから1.8remに変更 */
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.value-box {
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 2.5rem;
  margin-bottom: 4rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.value-box p {
  font-size: 1.8rem; /* 1.5remから1.8remに変更 */
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.value-box ul {
  margin-bottom: 1.5rem;
  padding-left: 0;
  list-style-type: none;
}

.value-box li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.bullet {
  color: var(--color-yellow);
  margin-right: 0.75rem;
  font-size: 1.75rem; /* 文字サイズを大きく */
}

.value-box li span:last-child {
  font-size: 1.8rem; /* 1.5remから1.8remに変更 */
  line-height: 1.6;
}

.value-conclusion {
  text-align: center;
}

.value-conclusion p {
  font-size: 1.8rem; /* 1.5remから1.8remに変更 */
  line-height: 1.6;
  font-weight: 700;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .value-intro {
    text-align: center;
  }

  .value-intro p {
    font-size: 2rem; /* PCでさらに大きく */
  }

  .value-box p {
    font-size: 2rem; /* PCでさらに大きく */
  }

  .bullet {
    font-size: 2.25rem; /* PCでさらに大きく */
  }

  .value-box li span:last-child {
    font-size: 2rem; /* PCでさらに大きく */
  }

  .value-conclusion p {
    font-size: 2rem; /* PCでさらに大きく */
  }
}

/* 最終CTAセクション - 黒背景共通スタイルを使用 */
.final-cta-section {
  padding: 6rem 0;
}

.cta-content {
  max-width: 800px; /* 幅を制限して統一 */
  margin: 3rem auto; /* 4remから3remに変更して統一感を出す */
}

.cta-content p {
  font-size: 1.8rem; /* 1.5remから1.8remに変更 */
  line-height: 1.6;
  font-weight: 300;
  margin-bottom: 1rem;
  text-align: center;
}

.cta-button {
  text-align: center;
}

@media (min-width: 768px) {
  .cta-content p {
    font-size: 2rem; /* PCでさらに大きく */
  }
}

/* ボーナスセクション */
.bonus-section {
  background: linear-gradient(to bottom, var(--color-gray-50), var(--color-white));
  color: var(--color-gray-900);
  padding: 6rem 0;
}

.bonus-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  margin-bottom: 3rem;
}

.bonus-header {
  margin-bottom: 2rem;
  text-align: center;
}

@media (min-width: 768px) {
  .bonus-header {
    text-align: left;
  }
}

.bonus-header h2 {
  font-size: 2.5rem; /* 文字サイズを大きく */
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.bonus-description p {
  font-size: 1.8rem; /* 文字サイズを大きく */
  line-height: 1.6;
  color: var(--color-gray-700);
  margin-bottom: 1.5rem;
}

.bonus-features {
  background-color: #f5f5f0;
  padding: 2rem;
  border-radius: 0.5rem;
  border: 1px solid var(--color-gray-200);
}

/* ボーナスセクションの特典タイトル調整 */
.bonus-features h3 {
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  color: var(--color-gray-900);
  text-align: center; /* SP表示時はセンター揃え */
}

@media (min-width: 768px) {
  .bonus-features h3 {
    text-align: left; /* PC表示時は左揃え */
  }
}

.features-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ボーナスセクションの特典リスト調整 */
.feature-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  margin-bottom: 2rem;
}

.feature-icon-title {
  display: flex;
  flex-direction: row;
  align-items: center; /* 中央揃えを確実にする */
  margin-bottom: 1rem;
  width: 100%;
}

.feature-icon {
  margin-right: 1rem;
  margin-bottom: 0;
  padding: 0.75rem;
  background-color: var(--color-yellow);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-content {
  width: 100%;
  text-align: left;
}

.feature-icon-title h4 {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--color-gray-900);
  margin: 0; /* マージンをリセット */
  padding: 0; /* パディングをリセット */
  text-align: left;
  line-height: 1.2; /* 行の高さを調整 */
}

.feature-content p {
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--color-gray-700);
  padding-left: calc(24px + 0.75rem + 1rem); /* アイコンの幅 + パディング + 右マージン */
}

@media (min-width: 768px) {
  .feature-icon-title h4 {
    font-size: 2.25rem; /* PCでさらに大きく */
  }

  .feature-content p {
    font-size: 2rem; /* PCでさらに大きく */
  }
}

.bonus-footer {
  margin-top: 3rem;
  text-align: center;
}

.bonus-footer p {
  font-size: 1.8rem; /* 文字サイズを大きく */
  line-height: 1.6;
  color: var(--color-gray-700);
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .bonus-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
  }

  .bonus-header h2 {
    font-size: 3.5rem; /* PCでさらに大きく */
  }

  .bonus-description p {
    font-size: 2rem; /* PCでさらに大きく */
  }
}

/* PC専用の改行 */
.pc-break {
  display: none;
}

@media (min-width: 768px) {
  .pc-break {
    display: block;
    height: 0;
    content: "";
  }
}

/* アニメーション */
.animate-fade-in {
  opacity: 0;
  animation: fadeIn 1.2s forwards;
}

.animate-fade-in-delayed {
  opacity: 0;
  animation: fadeIn 1s forwards;
  animation-delay: 0.3s; /* 0.5sから0.3sに変更 */
}

.animate-fade-in-delayed-more {
  opacity: 0;
  animation: fadeIn 0.6s forwards;
  animation-delay: 0.6s; /* 0.8sから0.6sに変更 */
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-on-scroll-x-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-on-scroll-x-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-scale {
  opacity: 0;
  transform: scaleX(0);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scaleX(1);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* レスポンシブ調整 - PCサイズの表示を改善 */
@media (min-width: 1024px) {
  .container {
    padding-left: 3rem; /* 統一したパディング */
    padding-right: 3rem; /* 統一したパディング */
  }

  .section-header h2 {
    font-size: 4rem; /* PCでさらに大きく */
  }

  .hero-title h1 {
    font-size: 6rem; /* PCでさらに大きく */
  }

  .hero-title h2 {
    font-size: 4rem; /* PCでさらに大きく */
  }

  .text-block p,
  .tournament-content p,
  .experience-intro p,
  .explanation-content p,
  .testimonial-intro,
  .value-intro p,
  .value-box p,
  .value-box li span:last-child,
  .value-conclusion p,
  .cta-content p,
  .bonus-description p,
  .bonus-footer p {
    font-size: 2rem; /* PCでさらに大きく */
  }

  .tagline-text {
    font-size: 2.5rem; /* PCでさらに大きく */
  }

  /* PCサイズでのフォントサイズと余白を大きく */
  .hero-section {
    min-height: 100vh;
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .hero-image {
    max-width: 400px; /* PCでは大きく表示 */
  }

  .btn {
    padding: 1.25rem 2.5rem;
    font-size: 2rem; /* PCでさらに大きく */
  }

  .lesson-card {
    padding: 2rem;
  }

  .lesson-title h3 {
    font-size: 2.5rem; /* PCでさらに大きく */
  }

  .lesson-description {
    font-size: 2rem; /* PCでさらに大きく */
  }

  .testimonial-text {
    font-size: 1.75rem; /* PCでさらに大きく */
  }

  .bonus-features h3 {
    font-size: 4rem; /* PCでさらに大きく */
  }

  .feature-content h4 {
    font-size: 2.5rem; /* PCでさらに大きく */
  }

  .feature-content p {
    font-size: 2rem; /* PCでさらに大きく */
  }
}

/* Shopifyヘッダーとの互換性を確保 */
.shopify-section {
  position: relative;
  z-index: 10; /* Shopifyセクションのz-indexを設定 */
}

/* ヘッダーの下に表示されるようにする */
.poker-drill-template-section {
  position: relative;
  z-index: 1; /* テンプレートセクションのz-indexを設定 */
}

/* Shopifyのヘッダーが固定されている場合の対応 */
.shopify-section-header-sticky {
  position: relative;
  z-index: 100; /* 固定ヘッダーのz-indexを高く設定 */
}

header.header {
  position: relative;
  z-index: 100; /* ヘッダーのz-indexを高く設定 */
}

/* ページ全体のスタイル調整 */
body {
  overflow-x: hidden;
}

/* 特にモバイルでのスタイル調整 */
@media (max-width: 767px) {
  .hero-section {
    padding-top: 6rem; /* モバイルでのヘッダーとの間隔を調整 */
  }

  /* SP表示時の画像がはみ出る問題を修正 */
  .hero-image {
    width: 80%;
    max-width: 280px;
  }

  .hero-image img {
    max-width: 100%;
    height: auto;
  }

  /* SP表示時のコンテナ余白を調整 */
  .container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* 特定のセクションでさらに余白を追加 */
  .tournament-content > div,
  .explanation-content > div,
  .testimonial-intro,
  .value-intro,
  .cta-content {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ボタンスタイル */
.bg-yellow {
  background-color: var(--color-yellow);
}

.hover\:bg-yellow-soft:hover {
  background-color: var(--color-yellow-soft);
}

.bg-blue-royal {
  background-color: var(--color-blue-royal);
}

.hover\:bg-blue-600:hover {
  background-color: var(--color-blue-600);
}

.rounded-full {
  border-radius: 9999px;
}

/* テキストスタイル */
.text-transparent {
  color: transparent;
}

.bg-clip-text {
  -webkit-background-clip: text;
  background-clip: text;
}

.bg-gradient-to-b {
  background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}

.from-yellow-300 {
  --tw-gradient-from: #fcd34d;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(252, 211, 77, 0));
}

.to-yellow-500 {
  --tw-gradient-to: #f59e0b;
}

/* レスポンシブ調整 */
@media (min-width: 768px) {
  .md\:text-6xl {
    font-size: 3.75rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
  }

  .md\:mb-12 {
    margin-bottom: 3rem;
  }

  .md\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .md\:py-6 {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .md\:text-lg {
    font-size: 1.125rem;
  }
}

@media (min-width: 1024px) {
  .lg\:text-7xl {
    font-size: 4.5rem;
  }

  .lg\:text-4xl {
    font-size: 2.25rem;
  }
}

.dark-section .highlight-orange {
  color: #de4804 !important;
}

@media (min-width: 768px) {
  .experience-section .container {
    max-width: 1100px; /* コンテナの最大幅を広げる */
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.image-overlay {
  display: none;
}