/* リセットCSS */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 基本設定 */
:root {
  --primary-color: #dc2626; /* 赤 */
  --secondary-color: #fbbf24; /* ゴールド */
  --background-color: #0c0c0c; /* 深い黒 */
  --surface-color: #1a1a1a; /* ダークグレー */
  --text-primary: #ffffff; /* 白 */
  --text-secondary: #b3b3b3; /* ライトグレー */
  --border-color: #333333;
  --transition: all 0.3s ease;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  background-color: var(--background-color);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
}

.container {
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ヘッダー */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(12, 12, 12, 0.95);
  backdrop-filter: blur(10px);
  z-index: 1000;
  padding: 1rem 0;
  transition: var(--transition);
}

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

.logo h1 {
  color: var(--primary-color);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: 2px;
}

@media (max-width: 768px) {
  .logo h1 {
    font-size: 1.1rem;
    letter-spacing: 1px;
  }
}

/* ロゴをリンク化したときの見た目を維持 */
.site-title-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  padding: .25rem .5rem; /* クリック範囲を少し広げる */
}
.site-title-link:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.nav-list {
  display: flex;
  list-style: none;
  gap: 2rem;
}

.nav-list a {
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  transition: var(--transition);
  position: relative;
}

.nav-list a:hover {
  color: var(--primary-color);
}

.nav-list a::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transition: var(--transition);
}

.nav-list a:hover::after {
  width: 100%;
}

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  cursor: pointer;
  gap: 4px;
}

.mobile-menu-toggle span {
  width: 25px;
  height: 3px;
  background: var(--text-primary);
  transition: var(--transition);
}

/* ヒーローセクション */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  position:relative;
  padding:80px 60px;  /* ← 横の余白を戻す */
  background:
    linear-gradient(135deg, rgba(220,38,38,.10) 0%, rgba(12,12,12,.90) 100%),
    url("public/bizyo2.png") 60% center / cover no-repeat;
  }

.hero-content {
  flex: 1;
  max-width: 600px;
}

.hero-text h2 {
  font-size: 3.5rem;
  font-weight: 900;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-text p {
  font-size: 1.2rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.hero-features {
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
}

.feature-card {
  background: var(--surface-color);
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  max-width: 300px;
  backdrop-filter: blur(10px);
}

.feature-card h3 {
  color: var(--secondary-color);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

/* ボタンスタイル */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: var(--transition);
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

.btn-primary {
  background: var(--primary-color);
  color: white;
}

.btn-primary:hover {
  background: #b91c1c;
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: var(--secondary-color);
  border: 2px solid var(--secondary-color);
}

.btn-secondary:hover {
  background: var(--secondary-color);
  color: var(--background-color);
}

.btn-full {
  width: 100%;
}

/* セクション共通スタイル */
section {
  padding: 5rem 0;
}

/* コンセプトだけタイトルを拡大 */
#concept .section-title{
  font-size: clamp(2.0rem, 5.4vw, 3.0rem); /* 例: 最大3.0rem */
  line-height: 1.15;
}

.section-title {
  text-align: center;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 3rem;
  color: var(--text-primary);
}

.section-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
  align-items: start;
}

.content-blocks {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.content-block {
  background: var(--surface-color);
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.content-block h3 {
  color: var(--text-primary);
  font-size: 1.3rem;
  font-weight: 600;
}

.info-cards {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.info-card {
  background: var(--surface-color);
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  text-align: center;
}

.info-card h4 {
  color: var(--secondary-color);
  font-size: 1.1rem;
  font-weight: 600;
}

/* トレーニング紹介 */
.training-intro {
  background: var(--surface-color);
}

.training-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.training-text {
  grid-column: 1;
  grid-row: 1;
}

.training-text h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

.training-image {
  grid-column: 2;
  grid-row: 1;
}

.training-image img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  border-radius: 12px;
}

.training-info {
  grid-column: 2;
  grid-row: 2;
  background: var(--background-color);
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.training-info h4 {
  color: var(--secondary-color);
  margin-bottom: 0.5rem;
}

/* プログラムセクション */
.programs-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.program-block {
  background: var(--surface-color);
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.program-block h3 {
  color: var(--text-primary);
  font-size: 1.3rem;
  font-weight: 600;
}

.program-info {
  background: var(--background-color);
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.program-info h4 {
  color: var(--secondary-color);
  margin-bottom: 0.5rem;
}

/* インスタグラム */
.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.instagram-item {
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  transition: var(--transition);
}

.instagram-item:hover {
  transform: scale(1.05);
}

.instagram-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ビフォーアフター */
.before-after-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.before-after-item {
  text-align: center;
}

.before-after-item img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.before-after-item h4 {
  font-size: 1.2rem;
  color: var(--secondary-color);
}

/* トレーナーセクション */
.trainers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.trainer-card {
  background: var(--surface-color);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  border: 1px solid var(--border-color);
  transition: var(--transition);
  position: relative;
}

.trainer-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary-color);
}

.trainer-card.featured {
  border-color: var(--secondary-color);
}

.trainer-image {
  margin-bottom: 1.5rem;
}

.trainer-image img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--primary-color);
}

.trainer-info h4 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.trainer-title {
  color: var(--secondary-color);
  font-weight: 600;
  margin-bottom: 1rem;
}

.trainer-rating {
  color: var(--secondary-color);
  font-size: 1.2rem;
  margin-top: 1rem;
}

.featured-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--secondary-color);
  color: var(--background-color);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

/* アクセスセクション */
.access-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.access-details {
  background: var(--surface-color);
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.access-details h4 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  color: var(--primary-color);
}

.detail-item {
  display: flex;
  margin-bottom: 1rem;
}

.detail-item .label {
  font-weight: 600;
  color: var(--secondary-color);
  min-width: 100px;
}

.map-placeholder {
  background: var(--surface-color);
  height: 300px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border-color);
  margin-bottom: 1rem;
}

.map-info {
  background: var(--background-color);
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.map-info h4 {
  color: var(--secondary-color);
}

/* Q&Aセクション */
.qa-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.qa-block {
  background: var(--surface-color);
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.qa-block h3 {
  color: var(--text-primary);
  font-size: 1.3rem;
  font-weight: 600;
}

.qa-info {
  background: var(--background-color);
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.qa-info h4 {
  color: var(--secondary-color);
}

/* お問い合わせセクション */
.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.contact-info h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--primary-color);
}

.contact-buttons {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.contact-form {
  background: var(--surface-color);
  padding: 2rem;
  border-radius: 12px;
  border: 1px solid var(--border-color);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  font-weight: 600;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--background-color);
  color: var(--text-primary);
  font-family: inherit;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}

/* フッター */
.footer {
  background: var(--surface-color);
  padding: 3rem 0 1rem;
  border-top: 1px solid var(--border-color);
}

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

.footer-logo h3 {
  color: var(--primary-color);
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.footer-column h4 {
  color: var(--secondary-color);
  margin-bottom: 1rem;
}

.footer-column ul {
  list-style: none;
}

.footer-column ul li {
  margin-bottom: 0.5rem;
}

.footer-column ul li a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition);
}

.footer-column ul li a:hover {
  color: var(--primary-color);
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid var(--border-color);
  color: var(--text-secondary);
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
  .nav {
    display: none;
  }

  .mobile-menu-toggle {
    display: flex;
  }

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

  .hero-features {
    position: static;
    transform: none;
    margin-top: 2rem;
  }

  .section-grid,
  .training-content,
  .programs-content,
  .access-content,
  .contact-content,
  .qa-content {
    grid-template-columns: 1fr;
  }

  .instagram-grid {
    grid-template-columns: 1fr;
  }

  .trainers-grid {
    grid-template-columns: 1fr;
  }

  .before-after-grid {
    grid-template-columns: 1fr;
  }

  .footer-content {
    grid-template-columns: 1fr;
  }

  .footer-links {
    grid-template-columns: 1fr;
  }

  .hero-buttons {
    flex-direction: column;
  }

  .contact-buttons {
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 15px;
  }

  .hero-text h2 {
    font-size: 2rem;
  }

  .section-title {
    font-size: 2rem;
  }
}

/* スクロールバー */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--surface-color);
}

::-webkit-scrollbar-thumb {
  background: var(--primary-color);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #b91c1c;
}

/* アニメーション */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.6s ease-out;
}

.service-title{display:flex;align-items:center;gap:.5rem;font-weight:700;}
.service-title i{color: rgb(37,99,235); font-size:1.1em; line-height:1;}

.services-grid .service-card li .item-icon{
  color: rgb(37,99,235);
  margin-right:.4em;
  font-size:1.05em;
  vertical-align:middle;
}

/* ヒーローのコピーに半透明の黒ボックスを敷く */
.hero-text{
  /* font-size: 1rem; */
  position: relative;
  z-index: 2;                     /* 背景の暗幕より前に */
  display: inline-block;          /* テキストの実寸に合わせて箱の幅を絞る */
  max-width: min(680px, 92vw);    /* はみ出し防止 */
  padding: 16px 20px;
  border-radius: 14px;
  background: rgba(0,0,0,.42);    /* ← 透けた黒 */
  backdrop-filter: blur(3px);     /* 背景だけ微ボカし（対応ブラウザ） */
  -webkit-backdrop-filter: blur(3px);
  box-shadow: 0 12px 36px rgba(0,0,0,.35); /* 浮かせて読みやすく */
}

/* 見出し＆本文は影でさらにコントラスト確保（任意） */
/* .hero-text h2{ text-shadow: 0 3px 14px rgba(0,0,0,.55); }
.hero-text p { color:#f5f5f5; text-shadow: 0 2px 10px rgba(0,0,0,.65); } */

/* モバイルは少し軽く */
@media (max-width: 768px){
  .hero-text{
    background: rgba(0,0,0,.32);
    padding: 12px 14px;
    border-radius: 12px;
  }
}

/* ===== Concept を赤テーマに ===== */
#concept { --accent: var(--primary-color); }

/* 見出しを赤＆下線アクセント */
#concept .section-title{
  color: var(--accent);
  position: relative;
}
#concept .section-title::after{
  content:"";
  display:block;
  width:72px; height:3px;
  margin:.6rem auto 0;
  background: linear-gradient(90deg, var(--accent), var(--secondary-color));
  border-radius: 2px;
}

/* リードは少し明るめで読みやすく */
#concept .section-lead{ color:#ffd7d7; }

/* 各カードを赤アクセント化 */
#concept .content-block{
  border: 1px solid rgba(220,38,38,.35);         /* 赤の薄いボーダー */
  background: linear-gradient(180deg,
              rgba(220,38,38,.06), var(--surface-color)); /* ほんのり赤み */
}
#concept .content-block h4{
  color: var(--accent);
  font-weight: 700;
}
#concept .content-block p{ line-height:1.9; }

/* 任意：ホバーで赤を少し強めに（PCだけの軽い演出） */
@media (hover:hover){
  #concept .content-block:hover{
    border-color: rgba(220,38,38,.55);
    box-shadow: 0 8px 22px rgba(220,38,38,.12);
  }
}

/* info-cardを使う場合の色味合わせ */
#concept .info-card h4{ color: var(--accent); }

/* 1) コンセプトのリードを中央＆幅を整える */
#concept .section-head { text-align: center; }
#concept .section-lead{
  display: inline-block;
  margin: .25rem auto 0;
  max-width: 52ch;       /* 読みやすい行長に制限 */
  margin-bottom: 12px;
}

/* 2) ボックスのサイズを統一（デスクトップで2列・同じ高さ） */
#concept .section-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 幅を揃える */
  gap: 1.5rem;
  align-items: stretch;   /* 行の高さに揃える */
  grid-auto-rows: 1fr;    /* 行の高さを均一化 */
}
#concept .content-block{
  height: 100%;
  display: flex;          /* 内部を縦積み */
  flex-direction: column;
}

/* タイトル下の余白を少しだけ詰める（お好みで） */
#concept .content-block h4{ margin-bottom: .6rem; }

/* レスポンシブ：タブレットで2列、スマホで1列 */
@media (max-width: 1024px){
  #concept .section-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  #concept .section-grid{ grid-template-columns: 1fr; }
}

/* コンセプト内の H4 を大きく（他の見出しは据え置き） */
#concept .content-block h4{
  font-size: clamp(1.4rem, 2.2vw, 1.8rem); /* PCで~1.8rem、画面幅に合わせて可変 */
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: .02em;
  margin-bottom: .6rem;  /* 下の余白をやや短めにして締まりを出す */
}

/* スマホで少しだけ控えめ（任意） */
@media (max-width: 480px){
  #concept .content-block h4{
    font-size: 1.35rem;
  }
}

.training-intro .section-title{
  font-size: clamp(3rem, 6.5vw, 3rem); /* モバイル〜PCで可変 */
  line-height: 1.1;
  letter-spacing: .02em;
  margin-bottom: 2rem; /* 下に少し余白 */
  /* 目立たせたい場合は色もアクセントにするなら↓を有効化 */
  /* color: var(--primary-color); */
}

/* プログラム見出しを赤に */
#programs .section-title{
  color: var(--primary-color);
}

/* ── プログラム：3枚を横並び＆高さそろえ ── */
#programs .cards-3{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  align-items: stretch;      /* 行内でカードの高さをそろえる */
}

#programs .card{
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;             /* 中身を縦積み＋高さ100%に */
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: var(--transition);
}

#programs .card:hover{
  transform: translateY(-4px);
  border-color: var(--primary-color);
}

/* 画像の縦横比を固定して“高さズレ”を解消 */
#programs .card > img{
  width: 100%;
  aspect-ratio: 16 / 9;      /* ここを 4/3 や 1/1 に変えてもOK */
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 1rem;
}

/* タイトル＆本文の余白を統一 */
#programs .card h4{
  margin: 0 0 .5rem;
  font-size: 1.2rem;
  color: var(--text-primary);
  font-weight: 700;
  line-height: 1.25;
}

#programs .card p{
  margin: 0;
  color: var(--text-secondary);
}

/* レスポンシブ：タブレット2列／スマホ1列 */
@media (max-width: 1024px){
  #programs .cards-3{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  #programs .cards-3{ grid-template-columns: 1fr; }
}

/* ── 料金：3カードを横並び・均等幅・高さ揃え ── */
/* 料金 見出しを赤に */
#pricing .section-title{
  color: var(--primary-color);
}

#pricing .pricing-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  align-items: stretch; /* 各カードの高さを行内でそろえる */
}

#pricing .price-card{
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;
  display: flex;             /* 中身を縦積み＆高さ100% */
  flex-direction: column;
  height: 100%;
  transition: var(--transition);
  position: relative;        /* バッジ配置用 */
}

#pricing .price-card:hover{
  transform: translateY(-4px);
  border-color: var(--primary-color);
}

/* 見出し・価格・リストの整形 */
#pricing .price-card h4{
  margin: 0 0 .5rem;
  font-size: 1.3rem;
  color: var(--text-primary);
  font-weight: 800;
}

#pricing .price-card .price{
  margin: 0 0 1rem;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--secondary-color);
}

#pricing .price-card ul{
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  color: var(--text-secondary);
}

/* 申込ボタンをカード下端に揃える */
#pricing .price-card .btn{
  margin-top: auto;
}

/* おすすめカードの強調 */
#pricing .price-card.featured{
  border-color: var(--secondary-color);
  box-shadow: 0 10px 28px rgba(251,191,36,.18);
}

#pricing .price-card .featured-badge{
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--secondary-color);
  color: var(--background-color);
  font-size: .85rem;
  font-weight: 800;
  padding: .3rem .6rem;
  border-radius: 9999px;
}

/* レスポンシブ：タブレット2列／スマホ1列 */
@media (max-width: 1024px){
  #pricing .pricing-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  #pricing .pricing-grid{ grid-template-columns: 1fr; }
}

/* ── おすすめ：テキストだけ赤＆大きく ── */
#pricing .price-card .featured-badge{
  color: var(--primary-color);  /* 赤文字 */
  font-size: 1.35rem;           /* ひと回り大きく */
  font-weight: 900;
  letter-spacing: .02em;

  /* 位置はそのまま右上に（必要なければ調整不要） */
  position: absolute;
  top: 8px;
  right: 12px;
}

/* モバイルで少し控えめ */
@media (max-width: 600px){
  #pricing .price-card .featured-badge{
    font-size: 1.15rem;
    top: 6px;
    right: 10px;
  }
}

/* ── 料金：おすすめバッジを右上に縦書き ── */
#pricing .price-card{ position: relative; }

/* バッジ本体（縦書き・赤文字・大きめ） */
#pricing .price-card .featured-badge{
  position: absolute;
  top: 10px;
  right: 8px;

  /* 縦書き設定 */
  writing-mode: vertical-rl;   /* 上→下方向に縦書き */
  text-orientation: upright;   /* 1文字ずつ正立 */

  /* 見た目 */
  color: var(--primary-color);
  font-size: 1.25rem;          /* 少し大きめ（お好みで上げ可） */
  font-weight: 900;
  letter-spacing: .12em;       /* 縦書きで詰まりを回避 */
  line-height: 1.1;

  /* 余計な装飾をオフ（過去の丸バッジ等を無効化） */
  background: none !important;
  border: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  display: block;              /* 1列表示に */
  padding: 0 !important;
}

/* バッジぶんの余白をカード内に確保（重なり防止） */
#pricing .price-card.featured{
  padding-right: 2.6rem;       /* バッジ幅に合わせて調整OK */
}

/* モバイル微調整 */
@media (max-width: 600px){
  #pricing .price-card .featured-badge{
    top: 8px; right: 6px;
    font-size: 1.1rem;
    letter-spacing: .1em;
  }
  #pricing .price-card.featured{ padding-right: 2.2rem; }
}

/* スタンダード（featured）もホバーで“赤”に */
#pricing .price-card.featured:hover{
  border-color: var(--primary-color) !important;
  box-shadow: 0 12px 32px rgba(220,38,38,.22);
  transform: translateY(-4px); /* 既存と同じ浮き上がり */
}

/* （任意）背景もほんのり赤みを足したい場合 */
#pricing .price-card.featured:hover{
  background: linear-gradient(180deg, rgba(220,38,38,.06), var(--surface-color));
}

/* ── 料金：他店舗比較表 ── */
#pricing .pricing-compare{ margin-top: 2.5rem; }
#pricing .compare-title{
  margin: 0 0 1rem;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary-color);
  text-align: center;
}
#pricing .table-wrap{
  overflow-x: auto;              /* モバイルで横スクロール許可 */
  border: 1px solid var(--border-color);
  border-radius: 12px;
}
#pricing .compare-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px;              /* 列が潰れない最低幅 */
  background: var(--surface-color);
}
#pricing .compare-table th,
#pricing .compare-table td{
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--border-color);
  text-align: center;
  white-space: nowrap;
}
#pricing .compare-table thead th{
  position: sticky;
  top: 0;
  background: #151515;           /* ヘッダ固有背景 */
  color: var(--text-primary);
  font-weight: 800;
  z-index: 1;
}
#pricing .compare-table tbody tr:nth-child(odd){
  background: rgba(255,255,255,.02);
}
#pricing .compare-table td:first-child,
#pricing .compare-table th:first-child{
  text-align: left;
  position: sticky; left: 0;
  background: rgba(26,26,26,.96); /* 行見出し固定で見やすく */
  z-index: 2;
}

/* ○×△ の色分け */
#pricing .compare-table .ok{  color: #34d399; font-weight: 800; }   /* 緑：○ */
#pricing .compare-table .ng{  color: #f87171; font-weight: 800; }   /* 赤：× */
#pricing .compare-table .opt{ color: #fbbf24; font-weight: 800; }   /* 黄：△ */

/* 注釈 */
#pricing .compare-note{
  margin-top: .6rem;
  color: var(--text-secondary);
  font-size: .9rem;
  text-align: center;
}

/* モバイル微調整 */
@media (max-width: 600px){
  #pricing .compare-title{ font-size: 1.2rem; }
  #pricing .compare-table th, #pricing .compare-table td{ padding: .7rem .8rem; }
}

/* 比較表をグリッドの全幅にして、上の3カードと左右を完全にそろえる */
#pricing .pricing-compare{
  grid-column: 1 / -1;                 /* ← 3列ぶち抜き */
  margin-top: 2.5rem;
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1.5rem;                     /* price-card と同じ余白 */
  box-shadow: 0 10px 18px rgba(0,0,0,.18);
}

/* タイトル（カード見出し風） */
#pricing .pricing-compare .compare-title{
  margin: 0 0 1rem;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary-color);
  text-align: left;
}

/* テーブル体裁 */
#pricing .pricing-compare .table-wrap{
  overflow-x: auto;        /* モバイルは横スクロール */
  border-radius: 8px;
}
#pricing .pricing-compare .compare-table{
  width: 100%;
  min-width: 720px;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}
#pricing .pricing-compare .compare-table th,
#pricing .pricing-compare .compare-table td{
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--border-color);
  text-align: center;
  white-space: nowrap;
}
#pricing .pricing-compare .compare-table thead th{
  background: #151515;
  color: var(--text-primary);
  font-weight: 800;
}
#pricing .pricing-compare .compare-table tbody tr:nth-child(odd){
  background: rgba(255,255,255,.02);
}
#pricing .pricing-compare .compare-table td:first-child,
#pricing .pricing-compare .compare-table th:first-child{
  text-align: left;
  background: rgba(26,26,26,.96);
}

/* ○×△ の色 */
#pricing .pricing-compare .ok{  color:#34d399; font-weight:800; }
#pricing .pricing-compare .ng{  color:#f87171; font-weight:800; }
#pricing .pricing-compare .opt{ color:#fbbf24; font-weight:800; }

/* モバイル微調整 */
@media (max-width: 600px){
  #pricing .pricing-compare{ padding: 1.1rem; }
  #pricing .pricing-compare .compare-title{ font-size: 1.15rem; }
  #pricing .pricing-compare .compare-table th,
  #pricing .pricing-compare .compare-table td{ padding: .7rem .8rem; }
}

/* ── 比較表の“間延び”をギュッと詰める ── */

/* 1) セルの左右パディングを少なめに */
#pricing .pricing-compare .compare-table th,
#pricing .pricing-compare .compare-table td{
  padding: .6rem .75rem;  /* 既存 .9rem 1rem → ちょい詰め */
}

/* 2) 1列目（項目）の幅を狭め、折り返し可に */
#pricing .pricing-compare .compare-table{
  table-layout: fixed;     /* 列幅を固定配分に */
}
#pricing .pricing-compare .compare-table th:first-child,
#pricing .pricing-compare .compare-table td:first-child{
  width: 180px;            /* ←お好みで 160–220px で調整可 */
  white-space: normal;     /* 長い項目名は折り返しOK */
  padding-right: .5rem;    /* 2列目との間をさらに詰める */
}

/* 3) 2列目以降は均等配分（固定レイアウトで自動） */
#pricing .pricing-compare .compare-table th:not(:first-child),
#pricing .pricing-compare .compare-table td:not(:first-child){
  white-space: nowrap;     /* ○×△は折り返さない */
}

/* 料金見出し下のキャンペーン告知 */
#pricing .campaign-note{
  margin: -0.5rem 0 1.5rem;         /* 見出しに近づける */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  font-size: clamp(2.5rem, 2.2vw, 2.5rem);
  line-height: 1.3;
}

#pricing .campaign-note .label{
  color: var(--text-primary);
  font-weight: 800;
  letter-spacing: .02em;
}

#pricing .campaign-note .old-price{
  position: relative;
  display: inline-block;
  color: var(--text-secondary);
  padding: 0 .15rem;
}

/* 斜めの打ち消し線（横線ではなく斜線） */
#pricing .campaign-note .old-price::after{
  content: "";
  position: absolute;
  left: -6%;
  right: -6%;
  top: 50%;
  height: 2px;
  background: linear-gradient(
    to right,
    transparent 0,
    #fda4a4 15%,
    var(--primary-color) 50%,
    #fda4a4 85%,
    transparent 100%
  );
  transform: rotate(-12deg);        /* ← 斜めにする角度 */
  transform-origin: center;
  pointer-events: none;
}

#pricing .campaign-note .arrow{
  opacity: .9;
}

#pricing .campaign-note .now{
  color: var(--text-primary);
}

#pricing .campaign-note .now strong{
  color: var(--primary-color);      /* 0円を赤で強調 */
  font-size: 1.05em;
  font-weight: 900;
}

/* モバイル微調整 */
@media (max-width: 600px){
  #pricing .campaign-note{ gap: .6rem; }
}

/* 価格の「(税込み)」を半分サイズに */
#pricing .price-card .price .tax{
  font-size: 0.5em;        /* 金額の半分 */
  opacity: .85;            /* 少しだけ弱め（任意） */
  margin-left: .25em;      /* 金額との間に余白 */
  white-space: nowrap;     /* 折り返し防止（任意） */
  vertical-align: baseline;
}

/* === Before & After：画像を大きく＆4:3に === */
.before-after-grid{
  max-width: 1400px;              /* 800px → 広げる */
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.before-after-item img{
  width: 100%;
  height: auto;                   /* 既存の height:400px を打ち消し */
  aspect-ratio: 4 / 3;            /* ← 4:3 比率に固定 */
  object-fit: cover;
  border-radius: 12px;
}

/* キャプション少しだけ大きく（任意） */
.before-after-item figcaption{
  font-size: 1.05rem;
}

/* スマホは1列表示 */
@media (max-width: 900px){
  .before-after-grid{ grid-template-columns: 1fr; }
}

/* ==== Trainers：写真を大きく・カード高さをそろえる ==== */

/* 3→2→1 の素直なレスポンシブ */
.trainers-grid{
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
@media (max-width: 1024px){
  .trainers-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px){
  .trainers-grid{ grid-template-columns: 1fr; }
}

/* カードの体裁を統一＆高さ100%に */
.trainer-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 2rem 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--surface-color);
  transition: var(--transition);
}
.trainer-card:hover{
  transform: translateY(-4px);
  border-color: var(--primary-color);
  box-shadow: 0 12px 28px rgba(220,38,38,.15);
}

/* ─ 写真を大きく ─
   120px → 190px（お好みで 160〜220px 調整可） */
.trainer-card > img{
  width: 190px;
  height: 190px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--primary-color);
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  margin-bottom: 1rem;
}

/* テキストの見栄えを微調整 */
.trainer-card h4{
  font-size: 1.25rem;
  font-weight: 800;
  margin: .25rem 0 .35rem;
  color: var(--text-primary);
  text-align: center;
}

/* 役職にピル風バッジ */
.trainer-title{
  display: inline-block;
  padding: .28rem .6rem;
  border: 1px solid rgba(251,191,36,.5);
  color: var(--secondary-color);
  border-radius: 9999px;
  font-size: .9rem;
  font-weight: 700;
  margin-bottom: .6rem;
}

/* 説明文は下に伸ばしても整うように */
.trainer-card p:last-of-type{
  color: var(--text-secondary);
  margin-top: .4rem;
}

/* 行内の2カラムを同じ高さに */
.access-content{ align-items: stretch; }

/* 左右とも中の .access-details を“1枚のカード”として伸ばす */
.access-info, .access-map{ display:flex; }
.access-details{ flex:1; }

/* 右カラムの外枠はカード化しない（ダブり防止） */
.access-map{
  border: none;
  background: transparent;
  padding: 0;
}

/* 問い合わせ行のリンクを白に */
.contact-links a{
  color: var(--text-primary);  /* #fff */
}
.contact-links a:hover{
  color: var(--secondary-color); /* ゴールドに */
  text-decoration: underline;    /* ホバーで下線つけたい場合 */
}


/* 右のMAPカード：見出しと画像の間を詰める */
.access-map .access-details{
  display: flex;
  flex-direction: column;
  gap: .2rem;              /* ← ここで隙間をまとめて管理 */
}

.access-map .access-details h4{
  margin: 0;               /* 既存の margin-bottom を打ち消す */
}

.access-map .map-link{
  margin-top: 0;           /* 念のため余白をゼロに */
  flex: 1;                 /* 画像エリアをカードいっぱいに */
}

.access-map .map-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 1) 左右カードの内側パディングを統一 */
.access-info .access-details,
.access-map  .access-details{
  padding: 2rem;          /* 両方とも同じ内側余白 */
}

/* 2) 見出しの“上位置”と下余白を統一（左右で同じ値に） */
.access-info .access-details h4,
.access-map  .access-details h4{
  margin: 0 0 .8rem;      /* 上0 / 下0.8rem に固定 → 上端が完全一致 */
  line-height: 1.2;
  font-size: 1.5rem;
  color: var(--primary-color);
}

/* モバイルは自然な比率に戻す */
@media (max-width:768px){
  .access-map .map-link{ flex:unset; }
  .access-map .map-img{ height:auto; aspect-ratio:16/9; }
}


/* Q&A：2カラムレイアウト */
.qa-list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.5rem; /* 行間 / 列間 */
}

/* 見た目と余白を統一（任意） */
.qa-list details{
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

.qa-list summary{
  cursor: pointer;
  font-weight: 700;
  list-style: none;                 /* Firefox対策 */
}
.qa-list summary::-webkit-details-marker{ display:none; } /* Chrome対策 */

/* 開いたときの余白 */
.qa-list details[open] summary{ margin-bottom: .5rem; }

/* 本文の余白 */
.qa-list details p{ margin: 0; line-height: 1.8; }

/* スマホは1カラムに戻す */
@media (max-width: 768px){
  .qa-list{
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ==== スマホ時：ヒーローを縦積み、カードは等間隔・同じ高さ ==== */
@media (max-width: 768px){
  .hero{
    padding: 100px 16px 32px;     /* 上はヘッダー分を余裕もって */
    flex-direction: column;       /* 横並び→縦並び */
    align-items: stretch;
  }

  .hero-content{
    order: 1;                     /* テキストを先に表示 */
    max-width: none;              /* 幅制限を解除 */
  }

  .hero-features{
    order: 2;
    position: static;             /* 絶対配置を解除 */
    transform: none;
    margin-top: 16px;

    display: grid;                /* グリッドで縦並び */
    grid-template-columns: 1fr;   /* 1カラム */
    grid-auto-rows: 1fr;          /* 各行の高さを均等に */
    gap: 12px;                    /* カード間の余白 */
  }

  .feature-card{
    height: 100%;                 /* 行の高さ一杯に伸ばす */
    display: flex;                /* 中身を中央寄せ */
    flex-direction: column;
    justify-content: center;
  }
}

/* ==== モバイルメニュー（右スライド） ==== */
.mobile-menu{
  position: fixed;
  top: 0; right: 0;
  height: 100dvh;
  width: 78%;
  max-width: 360px;
  background: rgba(26,26,26,.98);
  backdrop-filter: blur(8px);
  border-left: 1px solid var(--border-color);
  transform: translateX(100%);
  transition: transform .28s ease;
  z-index: 1200; /* ヘッダーより前に */
  padding: 84px 20px 20px; /* 上はヘッダー分＋余白 */
}

.mobile-menu.open{ transform: translateX(0); }

.mobile-menu-list{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mobile-menu-list a{
  display: block;
  padding: 12px 10px;
  text-decoration: none;
  color: var(--text-primary);
  font-weight: 700;
  border-radius: 8px;
  transition: var(--transition);
}

.mobile-menu-list a:hover{
  background: rgba(255,255,255,.06);
  color: var(--secondary-color);
}

/* メニュー展開中は背景のスクロールを止める */
.body-lock{ overflow: hidden; }

/* スマホでのみ有効 */
@media (min-width: 769px){
  .mobile-menu{ display: none; }
  .mobile-menu-toggle{ display: none; } /* PCは不要なら隠す */
}

/* ハンバーガーを右上にしっかり配置（必要なら強めに） */
@media (max-width: 768px){
  .header .mobile-menu-toggle{
    margin-left: auto;        /* 右寄せ */
  }
  .mobile-menu-toggle span{
    /* 動きのちょい演出（任意） */
    transition: transform .2s ease, opacity .2s ease;
  }
  /* 開いたときの“×”アイコン化（任意） */
  .mobile-menu-toggle.is-open span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
  .mobile-menu-toggle.is-open span:nth-child(2){ opacity: 0; }
  .mobile-menu-toggle.is-open span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
}

/* ==== ハンバーガー：黒背景＋白の三本線 ==== */
.header .mobile-menu-toggle{
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;                          /* 三本線の間隔 */
  background: rgba(0,0,0,.92);       /* 黒背景 */
  border: 1px solid #222;            /* うっすら枠 */
  border-radius: 10px;               /* 角丸 */
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  margin-left: auto;                 /* 右上へ寄せる */
}
.header .mobile-menu-toggle:hover{
  background: #000;
}

.header .mobile-menu-toggle span{
  width: 22px;
  height: 2px;                       /* 白い細線 */
  background: #fff !important;       /* 既存色を上書き */
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}

/* 開いたときは “×” に */
.header .mobile-menu-toggle.is-open span:nth-child(1){
  transform: translateY(8px) rotate(45deg);
}
.header .mobile-menu-toggle.is-open span:nth-child(2){
  opacity: 0;
}
.header .mobile-menu-toggle.is-open span:nth-child(3){
  transform: translateY(-8px) rotate(-45deg);
}

/* PCでは必要なければ非表示（任意） */
@media (min-width: 769px){
  .header .mobile-menu-toggle{ display: none; }
}

/* ===== ドロワー本体 ===== */
.mobile-drawer{
  position: fixed;
  inset: 0 0 0 auto;               /* 右側から出す */
  width: min(78vw, 420px);
  height: 100dvh;
  background: rgba(0,0,0,.94);
  box-shadow: -18px 0 40px rgba(0,0,0,.35);
  transform: translateX(100%);     /* 初期はオフ画面 */
  transition: transform .35s ease; /* スライド演出 */
  z-index: 1200;
  padding: 72px 24px 24px;
}
.mobile-drawer.open{ transform: translateX(0); }

.drawer-nav .drawer-menu{
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 0;
  margin: 0;
}
.drawer-nav .drawer-menu a{
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  font-size: clamp(18px, 3.8vw, 22px);
}

/* ===== 背景のオーバーレイ ===== */
.drawer-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s step-end;
  z-index: 1100;
}
.drawer-backdrop.show{
  opacity: 1;
  visibility: visible;             /* ふわっと出る */
  transition: opacity .25s ease, visibility .25s step-start;
}

/* ===== 右上の「×」ボタン ===== */
.drawer-close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6);
  border: 1px solid #222;
  border-radius: 10px;
}
.drawer-close span{
  position: absolute;
  width: 22px; height: 2px;
  background: #fff;
  border-radius: 2px;
}
.drawer-close span:nth-child(1){ transform: rotate(45deg); }
.drawer-close span:nth-child(2){ transform: rotate(-45deg); }

/* PCではドロワーを使わない（任意） */

/* ===== スマホ時：トレーニング紹介の見出しを小さく ===== */
@media (max-width: 768px){
  .training-intro .section-title{
    font-size: 1.5rem;   /* 例: 2rem → 1.6rem */
    margin-bottom: 1rem; /* 余白も少し詰める（任意） */
    line-height: 1.2;    /* 文字の詰まりを整える（任意） */
  }
}

/* さらに狭い端末で少しだけ小さく（任意） */
/* @media (max-width: 480px){
  .training-intro .section-title{
    font-size: 1.45rem;
  }
} */

/* ========== スマホ時の #pricing を完全に整える最終版 ========== */
@media (max-width: 768px){

  /* 1) グリッドは1列・隙間は控えめ */
  #pricing .pricing-grid{
    display: grid;
    grid-template-columns: 1fr;   /* 1カラム */
    gap: 14px;
  }

  /* 2) カード本体：固定高さナシ・はみ出し禁止・内側を少しタイトに */
  #pricing .price-card{
    padding: 14px 12px;
    height: auto;                 /* 内容に合わせて伸縮 */
    overflow: hidden;             /* 内側の飛び出しを止める */
    border-radius: 12px;
  }
  /* 子要素は箱の中で折り返す */
  #pricing .price-card *{
    max-width: 100%;
    word-break: break-word;
  }

  /* 3) タイトルと金額は一回り小さく */
  #pricing .price-card h4{
    font-size: 1.1rem;
    margin: 0 0 .4rem;
  }
  #pricing .price-card .price{
    font-size: 1.2rem;
    margin: 0 0 .7rem;
  }

  /* 4) リストは詰め気味 + 長文でも崩れない */
  #pricing .price-card ul{
    margin: 0 0 .9rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .4rem;
    line-height: 1.55;
  }

  /* 5) 申込ボタンは全幅・最後に固定されない（=はみ出し防止） */
  #pricing .price-card .btn{
    width: 100%;
    margin-top: auto;
  }

  /* 6) “おすすめ”バッジは横書き・右上に収める（はみ出し完全防止） */
  #pricing .price-card .featured-badge{
    position: absolute;
    top: 8px; right: 10px; left: auto; bottom: auto;
    writing-mode: horizontal-tb !important;   /* 縦書きを上書き */
    font-size: .95rem;
    letter-spacing: .02em;
    background: transparent;
    border: 0;
    box-shadow: none;
    max-width: calc(100% - 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* 縦書き用に確保していた右パディングを打ち消し */
  #pricing .price-card.featured{ padding-right: 12px; }

  /* 7) キャンペーン帯は折り返し可＆小さめ */
  #pricing .campaign-note{
    flex-wrap: wrap;
    gap: .4rem .6rem;
    font-size: clamp(0.95rem, 3.6vw, 1.1rem);
    text-align: center;
    padding: 0 .25rem;
  }

  /* 8) 比較表：カードと同幅・横スクロール可で見切れない */
  #pricing .pricing-compare{
    grid-column: 1 / -1;
    padding: 12px;
    margin-top: 14px;
    overflow: hidden;
    border-radius: 12px;
  }
  #pricing .pricing-compare .compare-title{
    text-align: left;
    font-size: 1.05rem;
    margin: 0 0 .6rem;
  }
  #pricing .pricing-compare .table-wrap{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #pricing .pricing-compare .compare-table{
    min-width: 640px;             /* 列潰れ回避。横スクロールで見る */
  }
}

/* さらに狭い端末（～480px）：ほんの少しだけ縮小 */
@media (max-width: 480px){
  #pricing .price-card{ padding: 12px 10px; }
  #pricing .price-card h4{ font-size: 1.05rem; }
  #pricing .price-card .price{ font-size: 1.1rem; }
}

/* ==== スマホ：Before & After の縦の間隔を広げる ==== */
@media (max-width: 768px){
  .before-after-grid{
    grid-template-columns: 1fr;                 /* 1列 */
    row-gap: clamp(60px, 7vw, 60px);            /* ← 縦の間隔を増量 */
  }
  /* キャプションの下にも少しだけ余白（任意） */
  .before-after-item figcaption{
    margin-bottom: .25rem;
  }
}

/* ── プログラム：PCも2カラム、モバイル1カラム ── */
#programs .cards-3{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* ← 2列に変更 */
  gap: 2rem;
  align-items: stretch;
}

/* 600px以下は1列 */
@media (max-width: 600px){
  #programs .cards-3{ grid-template-columns: 1fr; }
}

/* ====== イベント一覧 ====== */
#events .section-title{
  color: var(--primary-color);
}

.events-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* PCも2カラム */
  gap: 2rem;
  align-items: stretch;
}

.event-card{
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}
.event-card:hover{
  transform: translateY(-4px);
  border-color: var(--primary-color);
}

.event-media{
  position: relative;
  width: 100%;
  overflow: hidden;
}
.event-media img{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}
.event-badge{
  position: absolute;
  left: 12px;
  top: 12px;
  background: var(--secondary-color);
  color: var(--background-color);
  font-weight: 900;
  padding: .25rem .55rem;
  border-radius: 9999px;
  font-size: .85rem;
}

.event-body{
  padding: 1.1rem 1.2rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.event-title{
  margin: 0;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text-primary);
}

.event-meta{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  color: var(--text-secondary);
  font-size: .95rem;
}

.event-desc{
  margin: .2rem 0 .4rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

.event-actions{
  margin-top: auto;                 /* ボタンを下側に寄せる */
  display: flex;
  gap: .6rem;
}

/* スマホは1カラム */
@media (max-width: 768px){
  .events-grid{ grid-template-columns: 1fr; }
}

.training-actions{ margin-top: 1rem; }
@media (max-width: 768px){
  .training-actions .btn{ width: 100%; }
}

/* 共通の締まり（サイズは今のままでもOK） */
.hero-text h2{
  letter-spacing: -0.02em; /* ほんの少し詰めて密度アップ */
  line-height: 1.08;
  font-weight: 800;        /* Kaisei用の指定。Rampart/Reggaeは1ウェイト */
}

/* どれか1つを有効化：クラスで切替できるように分けておく */
.font-rampart .hero-text h2{
  font-family: "Rampart One", "Noto Sans JP", sans-serif;
}
.font-reggae .hero-text h2{
  font-family: "Reggae One", "Noto Sans JP", sans-serif;
}
.font-kaisei .hero-text h2{
  font-family: "Kaisei Tokumin", "Noto Serif JP", serif;
}