/* =========================================
   TFC GYM  スタイルシート
   （上から「土台 → ヘッダー → 各セクション → フッター」の順）
   ========================================= */

/* ページ内リンクをゆっくり滑らかにスクロール */
html {
  scroll-behavior: smooth;
}

/* ----- 全体の土台 ----- */
body {
  background-color: #ffffff;
  color: #000000;
  font-family: 'Noto Sans JP', sans-serif;  /* 本文フォント */
  line-height: 1.8;    /* 行間をゆったり取って読みやすく */
  max-width: 900px;   /* 横幅の上限 */
  margin: 0 auto;     /* 中央寄せ */
  padding: 0 20px;    /* 左右に余白 */
}

/* 各セクションの見出し（h2）に赤いバー */
section h2 {
  font-family: 'Anton', sans-serif;  /* 極太・縦長の英字見出しフォント */
  font-size: 11vw;      /* 少し小さめの特大サイズ */
  font-weight: 400;     /* Antonは1種類なので400のままで極太 */
  letter-spacing: 0.02em; /* 字間を少し空けて締まった印象に */
  color: #e60023;       /* 赤 */
  line-height: 1;       /* 行間を詰める */
  margin-top: 0;        /* 各セクションの背景の上部に配置 */
  margin-left: -20px;   /* 左端に寄せる（余白を相殺） */
  position: relative;
  z-index: 2;
}

/* ----- ヘッダー ----- */
header {
  padding: 16px 20px;
  position: sticky;                  /* スクロールしても上に固定 */
  top: 0;
  background-color: transparent;     /* 背景の白を消して透明に */
  z-index: 100;
  width: 100vw;                      /* 画面幅いっぱい */
  margin-left: calc(50% - 50vw);     /* 横の隙間をなくす */
  box-sizing: border-box;
  transition: background-color 0.3s ease;   /* 背景の切り替えを滑らかに */
}
/* スクロールしたらうっすら黒背景を付ける */
header.scrolled {
  background-color: rgba(0, 0, 0, 0.75);
}
header h1 {
  font-size: 24px;
  margin: 0;
}
header h1 a {
  color: inherit;         /* 文字色はそのまま（黒） */
  text-decoration: none;  /* 下線を消す */
}
.header-top {
  display: flex;
  justify-content: space-between;  /* ロゴを左、ボタンを右に */
  align-items: center;
}
#menu-btn {
  display: flex;
  flex-direction: column;   /* 線とMENU文字を縦に並べる */
  align-items: center;
  gap: 1px;
  background: none;
  border: 2px solid #ffffff; /* 周りの枠（白） */
  border-radius: 8px;
  color: #ffffff;            /* 線・文字を白に */
  cursor: pointer;
  line-height: 1;
  padding: 10px 18px;        /* 枠と中身の間の余白（大きめ） */
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); /* 明るい写真でも読める */
  transition: background-color 0.2s ease, color 0.2s ease;
}
#menu-btn:hover {
  background-color: #ffffff; /* ホバーで反転 */
  color: #000000;
  text-shadow: none;
}
.menu-icon {
  font-size: 32px;   /* 3本線（大きめ） */
}
.menu-label {
  font-family: 'Anton', sans-serif;   /* シャープな英字 */
  font-size: 13px;
  letter-spacing: 0.12em;
}
/* MENUの左隣：Instructorへ飛ぶ人型ボタン */
.header-buttons {
  display: flex;
  align-items: stretch;   /* 2つのボタンの高さを揃える */
  gap: 10px;
}
.instructor-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: 2px solid #ffffff;   /* MENUと同じ白枠 */
  border-radius: 8px;
  color: #ffffff;
  cursor: pointer;
  line-height: 1;
  padding: 10px 18px;
  text-decoration: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.instructor-btn:hover {
  background-color: #ffffff;   /* ホバーで反転 */
  color: #000000;
  text-shadow: none;
}
.person-icon {
  width: 32px;
  height: 32px;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5));
}
/* ナビ：左からスライドするドロワーメニュー */
#nav-menu {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;   /* ← 追加：paddingを幅に含める */
  background-color: #0d0d0d;
  display: flex;
  flex-direction: column;
  padding: 80px 24px;
  transform: translateX(-100%);
  z-index: 200;
}
/* ページ読み込み後だけスライドを有効化（初期のチラつき防止） */
body.loaded #nav-menu {
  transition: transform 0.3s ease;
}
#nav-menu.open {
  transform: translateX(0);         /* 押したら画面内へスライドイン */
}
#nav-menu a {
  color: #ffffff;                   /* 黒背景なので白文字 */
  padding: 14px 0;
  text-decoration: none;
  font-size: 18px;
}
/* メニューを閉じる×ボタン */
#menu-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: #ffffff;
  font-size: 36px;
  cursor: pointer;
}

/* ----- ヒーロー（トップの見せ場） ----- */
.hero {
  text-align: center;
  padding: 80px 20px;
  color: #ffffff;
  border-radius: 8px;
  background-color: #0d0d0d;
  min-height: 85vh;          /* 画面の高さいっぱい近くまで大きく */
  display: flex;
  flex-direction: column;
  justify-content: center;   /* 中身を縦中央に */
  align-items: center;       /* 中身を横中央に */
  position: relative;        /* スクロール誘導を下端に置く基準 */
  overflow: hidden;          /* 背景スライドをはみ出さない */
}
/* 背景の自動スライド（2枚をクロスフェード） */
.hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: heroFade 9s ease-in-out infinite;  /* 3枚を各3秒でクロスフェード */
}
.hero-slide1 { background-image: url('slide1.jpg'); animation-delay:  0s; }
.hero-slide2 { background-image: url('slide2.jpg'); animation-delay: -3s; }
.hero-slide3 { background-image: url('slide3.jpg'); animation-delay: -6s; }
/* 各レイヤー：フェードイン→表示→フェードアウト→待機（3枚を6秒ずつずらす） */
@keyframes heroFade {
  0%    { opacity: 0; }
  5.5%  { opacity: 1; }   /* フェードイン */
  33.3% { opacity: 1; }   /* 表示キープ */
  38.9% { opacity: 0; }   /* フェードアウト */
  100%  { opacity: 0; }   /* 次の出番まで待機 */
}
/* 読みやすさ用の暗いグラデ（画像の上・文字の下） */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.55) 0%,     /* 上：ヘッダーの後ろを少し暗く */
    rgba(0, 0, 0, 0.30) 45%,    /* 中央：明るめで写真をクッキリ */
    rgba(0, 0, 0, 0.80) 100%);  /* 下：暗くして News へ自然につなぐ */
}
.hero-logo {
  width: 80%;
  max-width: 500px;
  position: relative;   /* グラデより前面に */
  z-index: 2;
  animation: hero-fade-up 1s ease-out both;   /* ふわっと登場 */
}
/* 下から浮き上がりながらフェードイン */
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* 単純にフェードインだけ（位置を動かさない用） */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
/* ヒーローのキャッチコピー（英字＝Anton） */
.hero-copy {
  font-family: 'Anton', sans-serif;
  font-size: clamp(20px, 4.6vw, 42px);   /* 画面幅で自動調整 */
  color: #ffffff;
  letter-spacing: 0.04em;
  line-height: 1.25;
  margin: 26px 0 10px;
  position: relative;   /* グラデより前面に */
  z-index: 2;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);  /* 写真の上でも読める */
  /* ①ふわっと登場 → ②登場後に心臓のようにドクドク */
  animation:
    hero-fade-up 1s ease-out 0.35s both,
    heartbeat 1.6s ease-in-out 1.6s infinite;
}
/* 心臓の鼓動（lub-dub の2連打 → 休み） */
@keyframes heartbeat {
  0%   { transform: scale(1); }
  8%   { transform: scale(1.008); }   /* ドク（かなり控えめ） */
  16%  { transform: scale(1); }
  24%  { transform: scale(1.008); }   /* ドク（かなり控えめ） */
  32%  { transform: scale(1); }
  100% { transform: scale(1); }       /* 休み */
}
/* スクロール誘導（下端でふわふわ動く） */
.scroll-cue {
  position: absolute;
  z-index: 2;     /* グラデより前面に */
  bottom: 88px;   /* LINEボタンと重ならないよう少し上に */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #ffffff;
  text-decoration: none;
  font-family: 'Anton', sans-serif;
  font-size: 12px;
  letter-spacing: 0.35em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
  animation: fade-in 1s ease-out 0.9s both;   /* 最後に遅れて出現 */
}
.scroll-arrow {
  font-size: 20px;
  animation: scroll-bounce 1.6s ease-in-out infinite;  /* 上下にふわふわ */
}
@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0);   opacity: 1; }
  50%      { transform: translateY(7px); opacity: 0.4; }
}
.header-logo {
  height: 40px;
  vertical-align: middle;
}
.hero h2 {
  font-size: 32px;
  margin: 0 0 16px;
  color: #ffffff;      /* ヒーローの見出しは白のまま */
  border-left: none;
  padding-left: 0;
}

/* ----- News（白いカード） ----- */
#news-top,
#news-all {
  list-style: none;   /* ● を消す */
  padding: 0;
  margin: 24px 0 0;
}
#news-top li,
#news-all li {
  margin-bottom: 14px;   /* カード同士の間隔 */
}

/* スクロールで画面に入ると下からふわっと表示 */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.show {
  opacity: 1;
  transform: none;
}

/* スクロールで画面に入ると左からスライドイン */
.reveal-left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-left.show {
  opacity: 1;
  transform: none;
}

/* ニュース1件＝白い四角のカード */
.news-card {
  display: block;
  background-color: #ffffff;
  padding: 18px 22px;
  border-left: 4px solid #e60023;   /* 左に赤いライン */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.news-card:hover {
  transform: translateY(-3px);      /* ホバーで少し浮く */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}
.news-card .news-date {
  display: block;
  font-size: 13px;
  font-weight: bold;
  color: #e60023;                   /* 日付は赤 */
  letter-spacing: 0.05em;
}
.news-card .news-title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: #111111;                   /* タイトルは黒 */
  margin-top: 5px;
  line-height: 1.5;
}

/* 「View More」「← 戻る」ボタン（白い丸っぽい図形の上に載せる） */
#news > a,
#instructor > a {
  display: block;
  width: fit-content;             /* 文字幅ぴったり */
  margin: 28px auto 8px;          /* 上に余白＆中央寄せ */
  padding: 14px 40px;
  background-color: #ffffff;      /* 白い図形 */
  color: #111111;
  border-radius: 50px;            /* 丸っぽく */
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.08em;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
#news > a:hover,
#instructor > a:hover {
  background-color: #e60023;      /* ホバーで赤に反転 */
  color: #ffffff;
  transform: translateY(-2px);
}

/* ----- Concept（格闘技ジムの写真を背景に・3枚スライド） ----- */
#concept {
  position: relative;
  overflow: hidden;
  background-color: #0d0d0d;
  padding: 56px 20px 64px;
  color: #ffffff;   /* 写真の上なので白文字 */
}
/* Concept背景の自動スライド（3枚をクロスフェード・各3秒） */
.concept-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.concept-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: heroFade 9s ease-in-out infinite;  /* ヒーローと同じ動き */
}
.concept-slide1 { background-image: url('concept1.jpg'); animation-delay:  0s; }
.concept-slide2 { background-image: url('concept2.jpg'); animation-delay: -3s; }
.concept-slide3 { background-image: url('concept3.jpg'); animation-delay: -6s; }
/* 上下を暗く落とすオーバーレイ（文字の下） */
#concept::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.92) 0%,     /* 上：濃い影 */
    rgba(0, 0, 0, 0.60) 28%,    /* 中央：明るめ（写真がうっすら見える） */
    rgba(0, 0, 0, 0.60) 72%,
    rgba(0, 0, 0, 0.92) 100%);  /* 下：濃い影 */
}
/* テキストは背景・オーバーレイより前面に */
#concept h3 {
  position: relative;
  z-index: 2;
  font-size: 20px;
  margin: 8px 0 12px;
}
#concept p {
  position: relative;
  z-index: 2;
  line-height: 2;
  margin: 0 0 12px;
  max-width: 640px;
}
/* 理念・思い：フロストガラス風カード */
#concept .concept-lead {
  position: relative;
  z-index: 2;
  max-width: 680px;
  margin: 30px auto 0;
  padding: 40px 36px;
  background: rgba(0, 0, 0, 0.24);   /* 暗さを薄くして背景を見せる */
  backdrop-filter: blur(2.5px);      /* ぼかしを弱める */
  -webkit-backdrop-filter: blur(2.5px);
  border-left: 5px solid #e60023;   /* 赤いアクセント */
  border-radius: 14px;
  text-align: left;
}
#concept .concept-label {
  margin: 0 0 8px;
  max-width: none;
  font-family: 'Anton', sans-serif;   /* 英字ラベル */
  font-size: 14px;
  letter-spacing: 0.25em;
  color: #e60023;
}
#concept .concept-heading {
  margin: 0 0 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);   /* 区切り線 */
  font-size: 24px;
  font-weight: 900;
  line-height: 1.4;
}
#concept .concept-text {
  margin: 0;
  max-width: none;
  font-size: 16px;
  line-height: 2;
  color: #f0f0f0;
}

/* ----- Price（料金カード：白カードで見やすく） ----- */
#price div {
  background-color: #ffffff;                  /* 白カード */
  color: #111111;
  border-radius: 10px;
  padding: 26px 24px;
  margin-top: 16px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30); /* 影で浮かせる */
}
#price h3 {
  margin: 0 0 8px;
  color: #e60023;   /* プラン名は赤のアクセント */
  font-size: 21px;
}
#price div p {
  margin: 0;
  color: #111111;
  font-size: 18px;
  font-weight: bold;   /* 料金を太字で目立たせる */
}

/* ----- Schedule（営業時間：Conceptと同じ背景） ----- */
#schedule {
  background-image:
    linear-gradient(to bottom,
      rgba(0, 0, 0, 0.92) 0%,     /* 上：濃い影 */
      rgba(0, 0, 0, 0.60) 28%,    /* 中央：明るめ */
      rgba(0, 0, 0, 0.60) 72%,
      rgba(0, 0, 0, 0.92) 100%),  /* 下：濃い影 */
    url('schedule.jpg');
  background-size: cover;
  background-position: center;
  padding: 56px 20px 64px;
  color: #ffffff;   /* 暗い背景なので白文字 */
}
#schedule ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;   /* 狭い画面では折り返す */
  gap: 16px;
}
#schedule li {
  flex: 1 1 220px;   /* 横並び（残り幅を均等に） */
  padding: 20px 24px;
  background-color: rgba(255, 255, 255, 0.08);   /* うっすら白のカード */
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-top: 4px solid #e60023;   /* 上に赤ライン */
  border-radius: 10px;
  font-size: 18px;
  text-align: center;
}

/* ----- Access（地図） ----- */
#access iframe {
  width: 100%;
  height: 300px;
  border: 0;
  border-radius: 8px;
}

/* News・Price・Access・Instructor の壁（石）背景 */
#news,
#price,
#access,
#instructor {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url('背景画像_壁.jpg');
  background-size: cover;
  background-position: center;
  padding: 24px 20px;
  border-radius: 8px;
  margin-top: 24px;
  color: #ffffff;   /* 背景が暗いので文字を白に */
}

/* ----- LINE誘導の追従バー（画面下に横幅いっぱいで常に表示） ----- */
.line-float {
  position: fixed;
  left: 12px;
  right: 12px;                   /* 左右を指定して横幅いっぱいに */
  bottom: 14px;
  max-width: 860px;
  margin: 0 auto;               /* PCでは中央に寄せて広がりすぎ防止 */
  z-index: 150;                  /* メニュー(200)より下・他より上 */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background-color: #06c755;     /* LINE公式グリーン */
  color: #ffffff;
  text-decoration: none;
  padding: 24px 20px;            /* 上下を大きめにして縦を確保 */
  border-radius: 18px;           /* 角丸の横長バー */
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.40),   /* 大きく広がる影 */
    0 3px 8px rgba(0, 0, 0, 0.30);     /* 近くの濃い影 */
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
  animation: line-bob 2.6s ease-in-out infinite;  /* ぷかぷか浮く */
}
/* 上下にゆっくり浮遊 */
@keyframes line-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.line-float:hover {
  background-color: #05b34c;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.48),
    0 4px 10px rgba(0, 0, 0, 0.35);
}
/* 左の「LINE」バッジ */
.line-float-icon {
  flex-shrink: 0;
  background-color: #ffffff;
  color: #06c755;
  font-size: 13px;
  font-weight: 800;
  padding: 5px 9px;
  border-radius: 7px;
}
/* テキスト（2段） */
.line-float-text {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.line-float-main {
  font-size: 17px;
  font-weight: 700;
}
.line-float-sub {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.95;
}
/* スマホではLINEバーを大きく（存在感を出す） */
@media (max-width: 600px) {
  .line-float {
    left: 10px;
    right: 10px;
    bottom: 10px;
    padding: 14px 16px;   /* 縦を低く */
    gap: 12px;
    border-radius: 16px;
  }
  .line-float-icon {
    font-size: 15px;
    padding: 7px 11px;
  }
  .line-float-main {
    font-size: 18px;   /* 1行に収まる大きさに */
  }
  .line-float-sub {
    font-size: 12px;
  }
  /* スマホ：ヘッダーのボタンは控えめサイズに */
  #menu-btn,
  .instructor-btn {
    padding: 7px 13px;
  }
  .menu-icon {
    font-size: 28px;
  }
  .person-icon {
    width: 28px;
    height: 28px;
  }
  .menu-label {
    font-size: 12px;
  }
}

/* ----- フッター ----- */
footer {
  background-color: #0d0d0d;
  color: #ffffff;
  text-align: center;
  padding: 40px 24px;
  margin-top: 48px;
  border-radius: 8px;
}
/* LINEバーがあるページ（index）だけ、フッター下を広げてバーと重ならないように */
body:has(.line-float) footer {
  padding-bottom: 140px;
}
/* フッターのメニュー（各ページ・各セクションへ飛ぶ） */
.footer-nav {
  display: flex;
  flex-wrap: wrap;              /* 狭い画面で折り返す */
  justify-content: center;
  gap: 12px 28px;
  margin-bottom: 22px;
}
.footer-nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}
.footer-nav a:hover {
  color: #e60023;   /* ホバーで赤 */
}

/* ----- ニュース一覧ページ（news.html）は上の .news-card を共用 ----- */

/* インストラクターの写真（角丸の四角） */
.instructor-card img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  object-position: top;     /* 枠に合わせてトリミング＝大きさが揃う */
  border-radius: 8px;       /* 角丸の四角 */
}
/* 講師カードの並び（画面幅に応じて横並び／狭いと縦積み） */
.instructor-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  max-width: 860px;
  margin: 24px auto 0;
}
/* インストラクターのカード（白カード＋影） */
.instructor-card {
  background-color: #ffffff;                  /* 白カード */
  color: #111111;                             /* 中の文字は黒 */
  border-radius: 10px;                        /* 角丸 */
  padding: 30px 24px;                         /* 内側の余白 */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30); /* しっかりした影 */
  text-align: center;                         /* 中身を中央に */
}
.instructor-card h3 {
  margin: 16px 0 0;
  font-size: 20px;
}
/* 担当競技（赤文字のアクセント） */
.instructor-role {
  margin: 4px 0 12px;
  color: #e60023;
  font-weight: bold;
  letter-spacing: 0.03em;
}

/* ===== 記事ページ（article.html／ブログ風） ===== */
/* 壁背景を画面いっぱいに（Newsと同じ背景・全幅・ヘッダー下まで） */
.article-page {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: -104px;             /* 透明ヘッダーの下まで背景を伸ばす */
  box-sizing: border-box;
  min-height: 100vh;
  padding: 132px 20px 60px;      /* 上：ヘッダー分＋余白 */
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
    url('背景画像_壁.jpg');
  background-size: cover;
  background-position: center;
}

/* 白い記事カード（紙のような読みやすい本文エリア） */
.article-card {
  max-width: 720px;
  margin: 0 auto;
  background-color: #ffffff;
  color: #111111;
  padding: 48px 40px;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}
/* 日付（小さめ・赤） */
.article-date {
  margin: 0 0 10px;
  color: #e60023;
  font-weight: bold;
  font-size: 14px;
  letter-spacing: 0.05em;
}
/* タイトル（大きく・下線） */
.article-title {
  margin: 0 0 24px;
  padding-bottom: 22px;
  border-bottom: 3px solid #111111;
  font-size: 28px;
  font-weight: 900;
  line-height: 1.45;
}
/* 本文（ブログ用の読みやすい組版） */
.article-body {
  font-size: 16px;
  line-height: 2;
}
.article-body p {
  margin: 0 0 1.4em;
}
.article-body h2 {
  margin: 1.8em 0 0.7em;
  padding-left: 12px;
  border-left: 5px solid #e60023;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
}
.article-body h3 {
  margin: 1.6em 0 0.6em;
  font-size: 18px;
  font-weight: 700;
}
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 0.6em 0;
}
.article-body a {
  color: #e60023;
  text-decoration: underline;
}
.article-body ul,
.article-body ol {
  padding-left: 1.4em;
  margin: 0 0 1.4em;
}
/* 「← ニュース一覧へ戻る」ボタン（暗い背景の上に白い丸ボタン） */
.article-page .back-link {
  display: block;
  width: fit-content;
  margin: 30px auto 0;
  padding: 13px 34px;
  background-color: #ffffff;
  color: #111111;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.3);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.article-page .back-link:hover {
  background-color: #e60023;
  color: #ffffff;
  transform: translateY(-2px);
}

/* ----- 背景セクションを画面幅いっぱい・隙間なく（フルブリード） ----- */
.hero,
#news,
#concept,
#price,
#schedule,
#access,
#instructor,
footer {
  width: 100vw;                     /* 画面の横幅いっぱい */
  margin-left: calc(50% - 50vw);    /* 中央基準から画面の端まで広げる */
  margin-top: 0;                    /* 縦の隙間をなくす */
  border-radius: 0;                 /* 角丸をなくす */
  box-sizing: border-box;
}

/* ヒーローをヘッダーの分だけ上に詰めて、上の空白をなくす */
.hero {
  margin-top: -104px;   /* ヘッダー高さ(約103px)に合わせて引き上げ */
}

/* 先頭が壁セクションのページ（news.html）：
   透明ヘッダーの下まで背景を伸ばして、上の白い余白を消す */
#news.first-section,
#instructor.first-section {
  margin-top: -104px;   /* ヘッダー高さに合わせて上へ（背景が上まで伸びる） */
  padding-top: 128px;   /* 見出しがヘッダーに隠れないよう下げる */
}