/* ==== お客様の声をもらい次第、これを削除
  ついでにHTMLの準備中も削除をわすれない ==== */
  #voice .voice-slider,
  #voice .voice-dots {
    display: none;
  }


  :root {
    --brand-navy: #394d65;
    --brand-gray: #f9fbff;
    --accent: #ff7a00;
    --text: #0a1a2b;
    --white: #fff;
  }
  
  * {
    box-sizing: border-box;
  }
  
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }
  
  a {
    color: inherit;
    text-decoration: none;
  }
  
  .container {
    width: min(1120px, 92%);
    margin-inline: auto;
    color: #2a3d5f;
  }
  
  .section {
    padding: 64px 0;
  }
  
  .section-gray {
    background: var(--brand-gray);
  }
  
  .section-navy {
    background: var(--brand-gray);
    color: var(--white);
  }
  
  .lead {
    font-size: 1.1rem;
  }
  
  :root {
    --header-h: 64px;
  }

  #campaign,
  #reasons,
  #compare-methods,
  #price,
  #trial,
  #faq,
  #access,
  #columns {
    scroll-margin-top: calc(var(--header-h) + 12px);
  }
  
/* =========================
   Header（透明→白／ロゴ切替）
   ========================= */

/* 固定ヘッダー本体 */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;    /* top/left/right 固定 */
  height: 65px;
  z-index: 1000;

  /* 初期は透明 */
  background: transparent;
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* スクロール後に“白い”ヘッダーへ */
.site-header.is-solid{
  background: rgba(255,255,255,.98);
  border-bottom-color: #e6e8eb;
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  backdrop-filter: saturate(160%) blur(8px); /* 対応端末のみ */
}

/* ヘッダー内レイアウト */
.header-inner{
  display: flex;
  align-items: center;              /* 上下センター */
  justify-content: space-between;
  height: 65px;
}

/* 透明時のナビ色・ハンバーガー色 */
.site-header:not(.is-solid) .nav a { color: #fff; }
.site-header:not(.is-solid) .hamburger-lines span { background:#fff; }
.site-header:not(.is-solid) .hamburger-label {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
  transition: color .25s ease;
}

/* 白化後（is-solid）のナビ色 */
.site-header.is-solid .nav a { color: #555; }
.site-header.is-solid .hamburger-label { color: #222; text-shadow: none; }

/* ページ上部の余白制御（出現時のみ余白を付与） */
body{ padding-top: 0 !important; }  /* 初期は余白なし */
body.header-padded{
  padding-top: calc(65px + env(safe-area-inset-top, 0px));
}

/* ── ロゴ（A/B切替＆上下センター） ───────────────── */

.logo{
  display:flex;
  align-items:center;               /* 画像を縦センター */
  height:100%;                      /* ヘッダー行の高さに合わせる */
  line-height:0;
  margin-left:-3rem;                /* 既存の横位置調整 */
}

/* ロゴ画像の共通サイズ */
.logo-img{
  height:60px;
  width:auto;
  display:block;
}

/* まずは両方隠す → 状態で出し分け */
.logo .logo-light,
.logo .logo-dark{ display:none; }

/* 透明ヘッダー中＝白ロゴを表示 */
.site-header:not(.is-solid) .logo .logo-light{ display:block; }

/* 白ヘッダー中＝濃色ロゴを表示 */
.site-header.is-solid .logo .logo-dark{ display:block; }

/* 必要なら微調整（1–3pxで） */
/* .logo{ transform: translateY(2px); } */

/* ── ナビ（横並び） ───────────────── */
.nav{
  display:flex;
  gap:20px;
  position:static;
  background:none;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  opacity:1;
  max-height:none;
  pointer-events:auto;
}

.nav a{
  display:block;
  width:100%;
  text-align:center;
  padding:18px 0;
  font-size:1.1rem;
  font-weight:600;
  text-decoration:none;
  transition:color .3s ease;
}

.nav a:hover{ color:#000; }

/* ハンバーガー */
.hamburger{
  display:flex;
  flex-direction:column;
  align-items:center;
  background:none;
  border:0;
  cursor:pointer;
  padding:6px;
  margin-top:.5rem;
}
.hamburger-label{
  font-size:.9rem;
  color:#222;
  font-weight:600;
  letter-spacing:.08em;
  text-align:center;
}
.hamburger-lines{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:8px;
}
.hamburger-lines span{
  display:block;
  width:40px;
  height:2px;
  background:#222;
  border-radius:1px;
  transition:all .3s ease;
}
/* ✕ 変形 */
.hamburger.active .hamburger-lines span:first-child{ transform: rotate(45deg) translate(4px, 4px); }
.hamburger.active .hamburger-lines span:last-child { transform: rotate(-45deg) translate(4px, -4px); }

/* ナビ内ロゴ（ドロワー等で使っている場合） */
.nav-logo{ margin: 2rem 0 1rem; }
.nav-logo img{ max-width:250px; height:auto; }

body.menu-open #nav-menu { padding-bottom: 110px; }

/* ===== Hamburger nav (見出しバー + 左矢印 + 下線) ===== */
@media (max-width: 840px) {
/* 見出しバー */
#nav-menu .nav-head{
  margin: 16px 0 0 8px;
  padding: 10px 14px;
  background: #394d65;
  color: #fff;
  font-weight: 800;
  letter-spacing: .03em;

  align-self: stretch;    /* 幅100%に */
  text-align: left;
}

/* 各行（テキスト左寄せ・下線） */
#nav-menu > a{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin: 0 4px;
  color: #222;
  text-decoration: none;
  border-bottom: 1px solid #e8ecf2;
  position: relative;
  font-size: 0.9rem;
  line-height: 1.4;
}

/* 左の「く」の矢印（画像なし） */
#nav-menu > a::before{
  content: "";
  width: 8px; height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  margin-right: 2px;
  flex: 0 0 8px;
}

/* ホバー/アクティブ時の触感 */
#nav-menu > a:hover  { background: rgba(0,0,0,.03); }
#nav-menu > a:active { background: rgba(0,0,0,.05); }

/* 最後の区切り線を消したい場合は有効化 */
#nav-menu > a:last-of-type{ border-bottom: 0; }

/* メニューが開いた時に見出しを少し詰める（任意） */
.nav.active .nav-head{ margin-top: 12px; }

/* 透明ヘッダー時でもメニュー内は読みやすい色で（任意） */
.site-header:not(.is-solid) .nav.active > a{ color:#222; }

}

@media (min-width: 841px){
  #nav-menu .nav-head{
    display: none !important;
  }
}

  /* ==== メインビジュアル ==== */
.slider {
  position: relative;
  overflow: hidden;
  height: 80vh;
  min-height: 520px;
}

.slide {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,37,80,.3), rgba(10,37,80,.3)), var(--bg) center/cover no-repeat;
  opacity: 0;
  transition: opacity .6s ease;
}

.slide.active {
  opacity: 1;
}

/* テキスト配置共通 */
.hero-copy {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  max-width: 820px;
  padding: 0 16px;
}

.hero-copy p {
  font-size: 1.2rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.14);
  margin-top: 1rem;
}

/* 見出し（共通デザイン） */
.hero-title {
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 0 0 16px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.45);
  margin-top: 5rem;
}

.hero-title .en {
  font-family: 'Montserrat', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  display: block;
}

/* 上段を少し小さく（お好みで） */
.hero-title .en .en-sub{
  display:inline-block;
  font-size:1.5rem;      /* 0.55〜0.7で調整 */
  letter-spacing:.06em;
  line-height:1.1;
}

/* 2行目（TRUE FORM）の前に“ちょい余白” */
.hero-title .en .en-main{
  display:block;        /* 改行相当 */
  margin-top:0.8rem;     /* ここで隙間を調整（.2〜.4em） */
  line-height:1.05;
  font-size: 2rem;
}

.hero-title .en .en-main2{ 
  display:block;        /* 改行相当 */
  margin-top:0.8rem;     /* ここで隙間を調整（.2〜.4em） */
  line-height:1.05;
  font-size: 1.6rem;
 }

/* 背景設定（共通） */
.slide.s1 { --bg: url('images/hero1_pc.jpg'); }
.slide.s2 { --bg: url('images/hero2_pc.jpg'); }
.slide.s3 { --bg: url('images/hero3_pc.jpg'); }

/* スライダーボタン */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.75);
  border: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}
.slider-btn.prev { left: 12px; }
.slider-btn.next { right: 12px; }

/* ドット */
.dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}
.dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.5);
  cursor: pointer;
}
.dots button.active { background: #fff; }

/* 前面制御 */
.slider-btn, .dots { z-index: 5; }
.hero .hero-copy { pointer-events: none; z-index: 2; }
.hero .hero-copy a, .hero .hero-copy button { pointer-events: auto; }

/* SEO用H1を隠す */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

  /* about セクション2カラム */
  .about-wrap {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr; /* 左テキスト広め・右画像やや小さめ */
    gap: 32px;                          /* カラム間の余白を広げる */
    align-items: center;
    max-width: 1100px;                  /* 全体を少しワイドに */
    margin: 0 auto;
  }
  
  .about-text h2 {
    font-size: 1.5rem; /* タイトル縮小 */
    font-weight: 700;
    color: #2a3d5f;
    line-height: 1.4;
    margin-bottom: 16px;
  }
  
  .about-text .lead {
    font-size: 1rem;    /* 少し大きめ */
    line-height: 1.8;   /* 行間を広め */
    margin-bottom: 18px;
  }
  
  .about-image img {
    width: 100%;       /* 90% → 100% */
    max-width: 480px;  /* 上限を指定して大きすぎないように */
    border-radius: 12px;
    display: block;
    margin: 0 auto;
  }
  
  .about-cta {
    margin-top: 24px;
    text-align: center;
  }
  
  /* ボタン上のアイキャッチ行 */
/* 置換してOK */
/* ラベル風の白ハイライト */
.btn-eyecatch{
  display: inline;                          /* ← inlineで“文字の幅だけ” */
  padding: 2px 6px;                         /* 余白は控えめ */
  margin: 10px auto 10px;
  font-weight: 800;
  letter-spacing: .04em;
  font-size: 1rem;
  color: #ffffff;
  border: 0;                                 /* 枠なしで“非ボタン化” */
  box-shadow: none;                          /* 影も無し */
  backdrop-filter: saturate(140%) blur(1px); /* 読みやすさ向上(対応端末) */
}

.hero-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 0.1srem;
  margin-top:1rem;          /* ← ブロック自体の上余白。上段には影響しない */
}

@media (max-width: 840px) {
.hero-cta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 0.1srem;
  margin-top:10rem;          /* ← ブロック自体の上余白。上段には影響しない */
}
}

  /* ==== 特典セクション ==== */
  :root {
    --gold: #2f5aa8; /* ネイビー系ゴールド */
  }
  
  #campaign .campaign-wrap {
    position: relative;
    border: 2px solid var(--gold);
    border-radius: 28px;
    padding: 36px 28px 32px; /* 余白を少し縮める */
    background: #fff;
    max-width: 800px; /* 横幅を小さく */
    margin-inline: auto;
  }
  
  #campaign .campaign-sub {
    text-align: center;
    color: var(--gold);
    letter-spacing: .12em;
    margin: 0 0 6px;
    font-size: 0.85rem; /* 小さめに調整 */
  }
  
  #campaign .campaign-ttl {
    text-align: center;
    font-weight: 700;
    font-size: 1.6rem; /* 小さく */
    margin: 0 0 20px;
    color: var(--gold);
  }
  
  #campaign .campaign-ttl span {
    font-size: 2rem; /* 全体に合わせて縮小 */
    color: var(--gold);
  }
  
  #campaign .campaign-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px; /* 間隔を少し縮める */
    align-items: start;
  }
  
  #campaign .campaign-card {
    text-align: center;
    padding: 18px 14px 10px; /* コンパクトに */
    border-radius: 18px;
    background: #fff;
  }
  
  #campaign .badge {
    width: 46px;
    height: 46px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: var(--gold);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 1.3rem; /* バッジの文字も小さく */
    letter-spacing: .06em;

  }
  
  #campaign h3 {
    margin: 0 0 8px;
    font-size: 0.95rem;
    color: #555;
  }
  
  #campaign .divider {
    height: 1px;
    background: #e6e0d4;
    margin: 8px auto 10px;
    width: 80%;
  }
  
  #campaign .note {
    color: #999;
    margin: 0 0 4px;
    font-size: 0.85rem;
  }
  
  #campaign .arrow {
    color: #908f8f;
    margin-bottom: 6px;
    font-size: 0.85rem;
  }
  
  #campaign .price {
    margin: 0;
    font-size: 1.3rem; /* 全体バランスに合わせ縮小 */
    color: var(--gold);
    font-weight: 700;
    display: inline-flex;       /* ← これを入れる！ */
    align-items: flex-end; /* 下端を揃える */
    gap: 2px; /* 数字と円の間隔 */
  }
  
  #campaign .price span {
    font-size: 2.4rem;
    line-height: 1;
    display: inline-block;
    margin-right: 3px;
  }
  
  #campaign .price.off {
    color: var(--gold);
  }
  
  #campaign .small {
    margin-top: 8px;
    color: #9a9a9a;
    font-size: 0.75rem;
    line-height: 1.4;
  }
  
  /* 枠線装飾 */
  #campaign .campaign-wrap::before,
  #campaign .campaign-wrap::after {
    content: "";
    position: absolute;
    inset: 4px; /* 枠線との距離を少し縮める */
    border: 1px solid #001dc0;
    border-radius: 24px;
    pointer-events: none;
  }
  
  /* =========================
   ① TRUE FORMの特徴（画像＋下テキスト×6）
   ========================= */
/* 見出し（そのまま残す） */
#features h2 {
  text-align: center;
  color: #333;
  font-size: 1.5rem;
  margin-bottom: 40px;
}

/* グリッド：PC基準（841px〜）は3列 */
.features-grid{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:24px;
}

/* カード */
.feature-item{
  background:#fff;
  border:1px solid #e8ecf2;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
  padding:16px;
  position:relative;
  text-align:left;
}

/* サムネイル */
.feature-item img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:8px;
  display:block;
  margin-bottom:12px;
}

/* タイトル・本文 */
.feature-item h3{
  font-size:1rem;
  line-height:1.5;
  margin:8px 0 8px;
  color:#2a3d5f;
  font-weight:700;
}

.feature-item p{
  margin:0;
  color:#4a5568;
  line-height:1.8;
  font-size:.95rem;
}

/* =========================
パーソナルレッスンの強み
========================= */

/* 見出し */
#personal h2 {
  color: #333;
  font-size: 1.5rem; /* タイトル縮小 */
}

.personal-ttl {
  text-align: center;
  font-size: 1.5rem; /* h2と同じサイズ感に統一 */
  margin: 2rem 0 3rem;
}

/* リスト全体 */
.personal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 15px;
}

.personal-item {
  display: grid;
  grid-template-columns: 80px 1fr; /* 少しコンパクトに */
  align-items: center;
  gap: 10px;
  padding: 2px 12px;
  background: #fff;
  border: 1px solid #e9edf2;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
  transition: transform .15s ease, box-shadow .15s ease;
}

.personal-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
}

/* 偶数行は左右反転 */
.personal-item:nth-child(even) {
  grid-template-columns: 1fr 80px;
}
.personal-item:nth-child(even) .badge {
  order: 2;
  justify-self: end;
}
.personal-item:nth-child(even) .body {
  order: 1;
  text-align: right;
}

/* カード幅 */
#personal .personal-item {
  width: 100%;
  max-width: 720px;
  margin-inline: auto;
}

/* バッジ */
#personal .badge {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid var(--brand-navy, #0a2550);
  color: var(--brand-navy, #0a2550);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: .02em;
  background: conic-gradient(from 180deg, rgba(10, 37, 80, .08), rgba(10, 37, 80, .02));
  box-shadow: inset 0 0 0 4px #fff;
}

/* テキスト */
#personal .body h3 {
  color: #2a3d5f;
  font-weight: 700;
  font-size: 1rem; /* 小見出しも縮小 */
  border-bottom: 1px solid #2a3d5f;
  padding-bottom: 3px;
  margin-bottom: 6px;
}

#personal .body p {
  color: #2a3d5f;
  font-size: 0.85rem; /* 説明文縮小 */
  line-height: 1.6;
}

/* =========================
こんな人にオススメ → 効果（交互レイアウト）
========================= */
#recommend-effects h2 {
  text-align: center;
  color: #333;
  font-size: 1.5rem; /* タイトル縮小 */
  margin-bottom: 40px; /* 下余白も少し減らす */
}

.effect {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr; /* 少し比率を均等寄りに */
  gap: 28px; /* 横の間隔を縮小 */
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid #e9edf2;
  width: 820px; /* 幅も少し縮小 */
  margin: 0 auto;
}

.effect:first-of-type {
  border-top: 0;
}

.effect.reverse {
  grid-template-columns: 0.95fr 1.05fr;
}

.effect-ttl {
  margin: 0 0 8px;
  font-size: 1.2rem; /* 小見出し縮小 */
  line-height: 1.35;
  color: #2a3d5f;
  display: flex;
  align-items: center;
  gap: 8px;
}

.effect-ttl .num {
  font-weight: 800;
  color: #9aa7b4;
  font-size: 1.05em;
}

.tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
}

.tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  background: #eef5ff;
  color: #2f5aa8;
  font-size: 0.78rem;
  border: 1px solid #dbe7ff;
}

.effect-text p {
  margin: 0;
  color: #2a3d5f;
  line-height: 1.7;
  font-size: 0.9rem; /* 説明文を少し小さく */
}

.effect-image img {
  width: 100%;
  display: block;
  border-radius: 12px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
}

/* 余白と背景のニュアンス（任意） */
.section-gray #recommend-effects .effect-text p {
  background: transparent;
}
.section-gray .container {
  position: relative;
}

/* ===== ヨガ、ジム、ピラティス比較 ===== */

/* 見出し */
.modality-wrap h2 {
  color: #333;
  font-size: 1.5rem; /* 縮小 */
  text-align: center;
  margin: 0 0 0.25rem;
  letter-spacing: .02em;
  margin-top: 1.8rem; /* 少し余白減らす */
}

.modality-wrap h3 {
  color: #6a6f77;
  font-size: 0.9rem; /* 縮小 */
  text-align: center;
  margin: 0.25rem 0 1.5rem;
  margin-bottom: 3rem; /* 下余白調整 */
}

/* 全体レイアウト（中央・幅控えめ） */
.modality-list {
  max-width: 800px; /* 幅もコンパクトに */
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

/* カード本体（小ぶり・フラット） */
.modality-row {
  display: grid;
  grid-template-columns: 100px 1fr; /* アイコン側を少し縮小 */
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e9edf2;
  box-shadow: 0 1px 6px rgba(0,0,0,.03);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.modality-row:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  border-color: #dde3ea;
}

/* 画像（小さめの円形＋薄いリング） */
.modality-img {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modality-img img {
  width: 72px;
  height: 72px; /* 縮小 */
  object-fit: cover;
  border-radius: 50%;
  display: block;
  box-shadow: 0 0 0 5px #f5f7fb, 0 1px 6px rgba(0,0,0,.05);
}

/* テキスト */
.modality-text {
  color: #4b5563;
}

.modality-ttl {
  color: #2c3442;
  font-size: 0.92rem; /* 縮小 */
  margin: 0 0 4px;
  font-weight: 700;
  letter-spacing: .01em;
}

.modality-text p {
  margin: 0;
  color: #5d6876;
  line-height: 1.6;
  font-size: 0.85rem; /* 縮小 */
}

/* 区切りノート */
.modality-note {
  text-align: center;
  color: #596273;
  margin: 14px 0 2.5rem;
  font-size: 0.88rem;
}

/* ===== パーソナル vs グループ 比較ボード ===== */
#compare-board .pg-title{
  text-align:center;
  line-height:1.35;
  margin:0 0 22px;
  font-size: 1.5rem;
  color: #333;  
  margin-bottom: 3rem;
}

.pg-wrap{
  position:relative;
  max-width: 820px;
  margin: 0 auto 18px;
}

/* グリッド本体 */
.pg-grid{
  background:#fff;
  color:#2b3340;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  border: 6px solid rgba(255,255,255,.22);
  padding: 22px 18px 18px;
  display:grid;
  grid-template-columns: 1.05fr 1.15fr 1.15fr;
  gap: 0;
}

/* 見出し */
.pg-head{
  background:#f3f5f8;
  color:#2b3340;
  font-weight:700;
  text-align:center;
  padding:18px 12px;
  border:1px solid #e2e6ec;
}

/* パーソナル列（ヘッダセル）の背景＆文字色 */
#compare-board .pg-grid .pg-col2{
  background: #2f5aa8;
  color: #fff;
  font-size: 1rem;
}

/* 太字も白で統一 */
#compare-board .pg-grid .pg-col2 strong{
  color: #fff;
}

/* 比較ボード：全セルの上下中央寄せ（PC） */
#compare-board .pg-head,
#compare-board .pg-key {
  display: flex;
  align-items: center;   /* 縦（上下）中央 */
  justify-content: center; /* 横中央（既存のtext-align:centerと併用OK） */
}

.pg-col2{ 
  border-left:0; 
  border-right:0; 
}

/* 各行の左キー */
.pg-key{
  background:#f3f5f8;
  font-weight:700;
  text-align:center;
  padding:18px 12px;
  border:1px solid #e2e6ec;
  display: flex;            /* Flexbox有効化 */
  align-items: center;      /* 縦方向中央 */
  justify-content: center;  /* 横方向中央 */
}

/* 通常セル */
.pg-cell{
  padding:18px 16px;
  border:1px solid #e2e6ec;
  line-height:1.7;
  text-align:center;
}

/* 中央カラムをやや強調 */
.pg-cell.pg-mid{
  background:#fffaef;
  border-left: 2px solid #d3c7bf;
  border-right: 2px solid #d3c7bf;
  font-weight:600;
}
.pg-cell strong{ font-weight:800; }

/* 下の注釈 */
.pg-note{
  text-align:center;
  color: #555;
  line-height:1.8;
  margin: 16px auto 0;
  max-width: 880px;
  font-size: 0.9rem;
}

.pg-key,
.pg-cell.pg-mid,
.pg-cell {
  font-size: 0.8rem; /* 好みのサイズに調整 */
}

/* =========================
   PRICING compact (PC)
   ========================= */
  #pricing .container {
    max-width: 700px;
    margin: 0 auto;
    padding: 28px 16px;
  }
  
  /* headings */
  #pricing h2 {
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;  
    margin: 0 0 16px;
    margin-bottom: 1rem;
  }
  
  #pricing h3 {
    text-align: center;
    font-size: 1.2rem;
    font-weight: 700;
    color: #2f5aa8; 
    margin: 0 0 8px;
    margin-top: 4rem;
  }

  .small-text {
    font-size: 0.7em; /* 親の85%のサイズ */
    font-weight: normal; /* 太字を解除したい場合 */
    color: #2f5aa8 /* 少し薄い色に */
  }  
  
  .price-row-flex {
    display: flex;
    gap: 20px; /* 間隔 */
    justify-content: center; /* 中央寄せ */
    flex-wrap: wrap; /* スマホ時は縦並びに */
  }
  
  .price-row-flex .block {
    flex: 1 1 300px; /* 横幅の最小値を設定し、余白で調整 */
  }
  
  #pricing .block {
    margin-top: 20px;
  }
  
  #pricing .note {
    text-align: center;
    color: #2a3d5f;
    font-size: .8rem;
    margin: 0 0 10px;
    line-height: 1.7;
  }
  
  .price-intro {
    text-align: center;
    color: #2a3d5f;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 2rem; /* 下の要素との間隔 */
  }
  
  .campaign-text {
    color: #e67e22; /* 深みのある赤 */
    font-weight: 600;
  }
  
  /* -------------------------
     単価カード（上段ラベル／下段価格）
     ------------------------- */
  .price-box {
    border: 1px solid #d9d9d9;
    background: #fff;
    text-align: center;
    padding: 0;
  }
  
  .price-label {
    background: #2f5aa8;       /* 見出し帯の青 */
    color: #fff;
    font-weight: 700;
    padding: 8px 0;
    font-size: 1rem;
  }
  
  .price-value {
    padding: 10px 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #222;
  }
  
  .price-value .old s {
    color: #9aa5af;
    text-decoration-thickness: 2px;
    font-size: 1rem;
  }
  
  .price-value .arrow {
    margin: 0 6px;
    color: #aab4be;
    font-size: 1rem;
  }
  
  .price-value .new strong {
    color: #2f5aa8;          /* キャンペーンの強調色 */
    font-size: 1.3rem;
  }
  
  .price-value .tax {
    font-size: 0.8rem;
    color: #6d7680;
    margin-left: 2px;
  }
  
  .campaign-note {
    background: #e7f4ff; /* 薄い水色 */
    color: #005b9a; /* 濃いブルー文字 */
    text-align: center;
    font-weight: 700;
    padding: 8px 12px;
    margin-top: 10px;
    border-radius: 4px;
    font-size: 0.95rem;
  }
  
  /* -------------------------
     テーブル（回数券・月額 共通）
     ------------------------- */
  #pricing .price-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    border: 1px solid #dfe6eb;
  }
  
  #pricing .price-table thead th {
    background: #2f5aa8;       /* テーブル見出しの青 */
    color: #fff;
    font-weight: 700;
    text-align: center;
    padding: 10px 8px;
    border-right: 1px solid #dfe6eb;
    border-bottom: 1px solid #dfe6eb;
    font-size: .9rem;
  }
  
  #pricing .price-table thead th:first-child {
    text-align: center;
    padding-left: 14px;
  }
  
  #pricing .price-table thead th:last-child {
    border-right: 0;
  }
  
  #pricing .price-table tbody th,
  #pricing .price-table tbody td {
    background: #fff;
    border-bottom: 1px solid #edf1f4;
    border-right: 1px solid #edf1f4;
    padding: 14px 12px;
  }
  
  #pricing .price-table tbody td:last-child {
    border-right: 0;
  }
  
  #pricing .price-table tbody th {
    font-weight: 700;
    color: #4a4a4a;
    line-height: 1.55;
    padding-left: 16px;
    font-size: 0.8rem;
  }
  
  #pricing .plan-name {
    color: #2f5aa8; /* ネイビー系 */
    font-weight: 800;
    font-size: 1rem;
  }
  
  #pricing .fee {
    text-align: center;
    padding: 14px 8px 6px;
    font-size: 0.6rem;
  }
  
  #pricing .fee strong {
    font-size: 1rem;
    font-weight: 800;
    color: #2a3d5f;
    letter-spacing: .01em;
  }
  
  #pricing .per {
    margin-top: 4px;
    color: #6a6a6a;
    font-size: .7rem;
  }
  
  #pricing .highlights {
    text-align: center;
    color: #2a3d5f;
    font-size: 0.7rem;
  }

  #pricing .valid {
    text-align: center;
    color: #505a64;
    font-size: 0.8rem;
  }
  
/* ===== Voice: お客様の声（横スクロール・JS不要） ===== */
:root{
  --voice-accent: #2f5aa8;   /* 見出しの差し色（柔らかい赤） */
  --voice-navy:   #2a3d5f;    /* テキスト濃紺（サイト基調に合わせる） */
}

#voice .container{
  max-width: 1060px;
  margin: 0 auto;
  padding: 28px 16px;
}

#voice .voice-head{
  text-align: center;
  margin-bottom: 16px;
}

#voice h2{
  margin: 0 0 22px;
  font-size: 1.5rem;               /* 他セクションの基準に合わせる */
  color: #333;
  font-weight: 700;
}

/* スライダー本体 */
.voice-slider{
  overflow: hidden;                /* 余白のはみ出し非表示 */
}
.voice-track{
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;   /* 横方向にスナップ */
  scroll-padding: 12px;
  padding: 4px 4px 12px;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.voice-track::-webkit-scrollbar{ height: 8px; }
.voice-track::-webkit-scrollbar-thumb{
  background: #e5e9ef;
  border-radius: 999px;
}
.voice-track::-webkit-scrollbar-track{ background: transparent; }

/* カード */
.voice-card{
  flex: 0 0 calc((100% - 40px) / 3); /* PC: 3枚見せ（gap=20px×2） */
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
  padding: 22px 22px 18px;
  color: var(--voice-navy);
}
.voice-card h3{
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--voice-accent);
  letter-spacing: .02em;
}
.voice-card p{
  margin: 0;
  line-height: 1.85;
  font-size: .92rem;
}
.voice-card .voice-name{
  margin-top: 16px;
  font-style: italic;
  text-align: right;
  color: #6c7a89;
}

/* ドットナビ */
.voice-dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}
.voice-dots a{
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: #cbd5e1;
  transition: transform .15s ease, background .15s ease;
}
.voice-dots a:hover{ transform: scale(1.15); background: #9fb3c8; }

.voice-dots a.active { background: #9fb3c8; }

.voice-comingsoon {
  text-align: center;
  padding: 3rem 1rem;
  font-size: 1rem;
  color: #555;
  background: #f9f9f9;
  border: 1px dashed #ccc;
  border-radius: 12px;
}
.voice-comingsoon p {
  margin: 0;
  line-height: 1.8;
}

/* ===== 体験レッスンの流れ（中央寄せ＋アレンジ） ===== */
#trial-flow h2 {
  text-align: center;
  font-size: 1.5rem; /* ルール遵守 */
  margin-bottom: 2rem;
  color: #333;
}

/* 全体の中央寄せ */
.flow-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  counter-reset: trialstep;
}

/* 各項目 */
.flow-item {
  position: relative;
  margin-bottom: 0.5rem;
  counter-increment: trialstep;
}

/* 旧デザインの線・バッジは使わない */
.flow-wrap::before,
.flow-num {
  display: none;
}

/* カード：左にブランドライン＋淡グラデ＋柔らか影 */
.flow-content {
  position: relative;
  background: linear-gradient(90deg, #ffffff 0%, #f7fbff 100%);
  border: 1px solid #e6ecf3;
  border-radius: 12px;
  padding: 1rem 1.25rem 1rem 4.5rem; /* 数字ぶん左に余白 */
  box-shadow: 0 8px 24px rgba(10, 37, 80, .06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* 左のアクセントライン */
.flow-content::after {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 4px;
  background: linear-gradient(
    180deg,
    rgba(47, 90, 168, .9),
    rgba(47, 90, 168, .55)
  );
}

/* ホバーで少し持ち上げる（PC） */
.flow-item:hover .flow-content {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(10, 37, 80, .12);
  border-color: #dfe6f2;
}

/* 見出し */
.flow-content h3 {
  position: relative;
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0 0 .5rem;
  color: #2a3d5f;
  margin-bottom: 1rem;
}

/* 数字 */
.flow-content h3::before {
  content: counter(trialstep, decimal-leading-zero);
  position: absolute;
  left: -3.5rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(135deg, #074da9, #2b507c);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* 本文：左端から始まるように */
.flow-content p {
  margin: 0;
  margin-left: -3rem;          /* h3の数字用余白を相殺 */
  font-size: .9rem;
  line-height: 1.85;
  color: #2a3d5f;
}


.flow-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  counter-reset: trialstep;
}

/* 各カード */
.flow-item {
  position: relative;
  margin-bottom: 2.5rem; /* 矢印分の余白 */
  counter-increment: trialstep;
}

/* 最後のカードだけは余白をリセット */
.flow-item:last-child {
  margin-bottom: 0;
}

/* カード本体 */
.flow-content {
  position: relative;
  background: #fff;
  border: 1px solid #e6ecf3;
  border-radius: 12px;
  padding: 1.2rem 1.5rem 1.2rem 4.5rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
}

/* 矢印 ▼ を下に追加 */
.flow-item::after {
  content: "⬇︎";
  position: absolute;
  bottom: -2.2rem; /* 矢印の位置 */
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.4rem;
  color: #2f5aa8; /* ブランドカラー */
}

/* 最後のアイテムには矢印を出さない */
.flow-item:last-child::after {
  display: none;
}

/* よくある質問 */
#faq h2 {
  text-align: center;
  font-size: 1.5rem;
  margin-bottom: 2rem;
  color: #333;
}

.faq-list {
  max-width: 640px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid #ddd;
}

/* 質問ボタン */
.faq-question {
  width: 100%;
  text-align: left;
  padding: 1rem;
  background: none;
  border: none;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  color: #2a3d5f;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* プラス表示（閉じている） */
.faq-question::after {
  content: "+";
  font-size: 1.6rem; /* ← ここを大きく */
  line-height: 1;
  transition: transform .3s ease;
}

/* マイナス表示（開いている） */
.faq-item.open .faq-question::after {
  content: "−"; /* U+2212のマイナス */
  font-size: 1.6rem; /* 同じ大きさにしておく */
  line-height: 1;
}

/* 答え部分（スムーズアニメーション用） */
.faq-answer {
  height: 0;               /* 高さ0からスタート */
  overflow: hidden;
  padding: 0 1rem;         /* 閉じている時は左右だけ */
  opacity: 0;              /* 閉じている時は透明 */
  transition: height 0.35s ease, opacity 0.25s ease;
}

/* ===== アクセス（PC） ===== */
/* ============================
   locations（メインページ）
============================ */

/* 見出しを中央寄せ */
#locations h2 {
  text-align: center;
  color: #333;
}

/* リスト */
.store-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* カード本体 */
.store-card {
  background: #fff;
  border: 1px solid #e8ecf2;
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
}

/* カードヘッダー */
.store-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.store-name {
  margin: 0;
  font-weight: 700;
  font-size: 1.1rem;
  color: #2a3d5f;
}

.badge {
  font-size: .75rem;
  color: #2a3d5f;
  background: #eaf2ff;
  border: 1px solid #cfe1ff;
  border-radius: 999px;
  padding: 3px 8px;
  line-height: 1;
}

/* メタ情報・補足 */
.store-meta {
  margin: .35rem 0 .75rem;
  color: #4a5568;
  font-size: .95rem;
}

.store-note {
  margin: 0 0 1rem;
  color: #697386;
  font-size: .9rem;
}

/* 住所 */
.store-address {
  margin: .35rem 0 .4rem;
  font-style: normal; /* address の斜体を打消し */
  line-height: 1.6;
  color: #2a3d5f;
}

/* アクションボタン */
.store-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

@media (min-width: 841px){
  /* 横方向を中央に寄せる器 */
  .store-list{
    display:flex;
    justify-content:center;   /* 中央寄せ */
  }
  /* カードを中央に・横幅は広がりすぎないように */
  .store-card{
    width:100%;
    max-width:760px;          /* 好みで 680–840px くらい */
    margin:0 auto;
  }
}

/* ============================
   店舗ページ
============================ */

#access h2 {
  text-align: left;           /* ルール: h2=1.5rem */
  font-size: 1.5rem;
  margin: 0;
  color: #333;
  text-align: center;
  margin-bottom: 3rem;
}


.access-wrap { max-width: 1000px; margin: 0 auto; }
.access-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 24px;
  align-items: start;
}

/* 情報ブロック */
.access-info {
  background: #fff;
  border: 1px solid #e6ecf3;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(10,37,80,.06);
  padding: 16px 18px;
}

.access-dl { margin: 0; }
.access-dl > div {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed #e6ecf3;
}
.access-dl > div:last-child { border-bottom: 0; }
.access-dl dt {
  color: #8b97a6;
  font-weight: 700;
  font-size: .9rem;
}
.access-dl dd {
  margin: 0;
  color: #2a3d5f;
  font-size: .85rem;
  line-height: 1.7;
}

/* マップ（レスポンシブ枠） */
.access-map .map-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.8;      /* PC比率 */
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(10,37,80,.08);
  border: 1px solid #e6ecf3;
}
.access-map iframe{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.map-note{
  margin: 8px 2px 0;
  color: #8b97a6;
  font-size: .85rem;
}

/* 2店舗目以降（将来） */
.store-list { display: grid; gap: 20px; } /* 複数店舗カードの母体に */

/* ===== コラム (PC) ===== */

#columns h2 {
  text-align: center;
  font-size: 1.5rem; /* ルール遵守 */
  color: #333;
  margin: 0 0 1rem;
}

/* ボックス本体 */
.columns-panel {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e6ecf3;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(10,37,80,.06);
  padding: 8px;
  position: relative; /* フェード用 */
}

.columns-scroll {
  max-height: 300px;       /* 高さは調整可 */
  overflow-y: auto;        /* ← スクロール */
  padding: 4px;
}

/* リスト */
.columns-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.column-item + .column-item {
  border-top: 1px dashed #e6ecf3;
  margin-top: 12px;
}

/* 行（横並び：日付 + タイトル） */
.column-item a {
  position: relative;          /* 左バー用 */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  color: #2a3d5f;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.column-item a:hover {
  background: #fafcfc;
  transform: translateX(1px);
}

/* 左アクセントバー */
.column-item a::before{
  content:"";
  position:absolute;
  left:6px;
  top:8px;
  bottom:8px;
  width:3px;
  border-radius:2px;
  background: linear-gradient(180deg, rgba(47,90,168,.35), rgba(57,77,101,.35));
  transition: width .25s ease, background .25s ease, opacity .25s ease;
}

.column-item a:hover::before{
  width:5px;
  background: linear-gradient(180deg, #2f5aa8, #394d65);
}

/* 日付（小さめ・固定幅） */
.col-date {
  flex: 0 0 auto;
  width: 8.5rem;              /* 2025.08.01想定 */
  font-size: 0.75rem;
  color: #8b97a6;
  letter-spacing: .02em;
  margin: 0;
}

/* タイトル（1行省略） */
.col-title {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  color: #2a3d5f;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* スクロールバー（任意） */
.columns-scroll::-webkit-scrollbar { width: 8px; }
.columns-scroll::-webkit-scrollbar-thumb{
  background: #e5e9ef;
  border-radius: 999px;
}
.columns-scroll::-webkit-scrollbar-track{ background: transparent; }

/* 上下フェード */
.columns-panel::before,
.columns-panel::after{
  content:"";
  position:absolute;
  left:8px; right:8px;
  height:22px;
  pointer-events:none;
  z-index:2;
}

.columns-panel::before{
  top:8px;
  background: linear-gradient(to bottom, #fff, rgba(255,255,255,0));
}

.columns-panel::after{
  bottom:8px;
  background: linear-gradient(to top, #fff, rgba(255,255,255,0));
}

/* カテゴリチップ（長方形固定サイズ） */
.col-cat {
  display: inline-flex;             /* 中央寄せに便利 */
  align-items: center;
  justify-content: center;
  width: 70px;                       /* 固定幅（お好みで） */
  height: 22px;                      /* 固定高さ */
  border-radius: 4px;                /* 丸すぎない角丸 */
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .02em;
  margin-right: 6px;
  white-space: nowrap;
  border: 1px solid transparent;
  box-sizing: border-box;            /* 枠を含めて幅計算 */
}

/* お知らせ */
.column-item.is-news .col-cat {
  background: rgba(255, 122, 0, 0.10);
  color: #ff7a00;
  border-color: rgba(255, 122, 0, 0.30);
}

/* コラム */
.column-item.is-column .col-cat {
  background: rgba(47, 90, 168, 0.10);
  color: #2f5aa8;
  border-color: rgba(47, 90, 168, 0.30);
}


/* 左アクセントバーもカテゴリで色替え（形はそのまま） */
.column-item.is-news a::before {
  background: linear-gradient(180deg, rgba(255,122,0,.55), rgba(255,122,0,.35));
}
.column-item.is-column a::before {
  background: linear-gradient(180deg, rgba(47,90,168,.55), rgba(57,77,101,.45));
}

/* ===== 体験レッスン===== */
#reservation,
#reservation2,
#reservation3 {
  background-color: #4c6f91;
}

/* 見出し */
#reservation h2,
#reservation2 h2,
#reservation3 h2 {
  text-align: center;
  font-size: 1.5rem;
  margin: 0 0 1.5rem;
  color: #ffffff;
}

.res-panel {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 32px 24px 24px;
  color: #2a3d5f;
  background:#fff;
  border: 2px solid #2a3d5f;
  box-shadow:
    inset 0 0 0 6px #fff,
    0 10px 28px rgba(0,0,0,.12);
  outline: 6px solid #ffffff;
}

/* 円形スタンプ */
.res-stamp {
  position: absolute;
  left: -16px;
  top: -22px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.6) 0, rgba(255,255,255,0) 60%),
    #eaeef5;
  border: 3px solid #2a3d5f;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
  display: grid;
  place-items: center;
  text-align: center;
  transform: rotate(-6deg);
}

.res-stamp span {
  display: block;
  line-height: 1;
}

.res-stamp .stamp-top {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  letter-spacing: .18em;
  font-size: .82rem;
  margin-top: 10px;
}

.res-stamp .stamp-mid {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  margin: 6px 0 4px;
}

.res-stamp .stamp-btm {
  font-weight: 800;
  font-size: .9rem;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

/* レイアウト行（共通） */
.res-row {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 入会金 → 0円 行 */
.res-row.mid {
  gap: 18px;
  margin: 8px 0 22px;
  flex-wrap: wrap;
}

.res-join-text {
  margin: 0;
  color: #2a3d5f;
  font-size: 1.05rem;
  text-align: center;
}

.res-join-text .through {
  text-decoration: line-through;
  text-decoration-thickness: 3px;
  text-decoration-color: #bfbfbf;
}

/* → 0円 の矢印パーツ */
.res-arrow {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding-left: 56px;
  color: #9b8867;
  font-weight: 800;
  font-size: 2.6rem;
  line-height: 1;
}

.res-arrow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 40px;          /* 線の長さ */
  height: 2px;          /* 線の太さ */
  background: linear-gradient(90deg, #7f8b9a, #2a3d5f);
  transform: translateY(-50%);
}

.res-arrow::after {
  content: "";
  position: absolute;
  left: 40px;           /* 線の右端に配置 */
  top: 50%;
  transform: translateY(-50%);
  border-left: 8px solid #2a3d5f; /* 三角の色（線の右端の色に合わせる） */
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.res-arrow span {
  font-size: 1.2rem;
  font-weight: 700;
  margin-left: 2px;
  color: #9b8567;
}

/* CTA */
.res-row.cta {
  margin: 10px 0 8px;
}

.btn-solid {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  max-width: 540px;
  padding: 16px 24px;
  background: #06C755; 
  color: #fff;
  border: 0;
  border-radius: 2px;
  font-weight: 800;
  letter-spacing: .06em;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
  overflow: hidden;
}

.btn-solid:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
}

/* リボン光沢 */
.btn-solid::before {
  content: "";
  position: absolute;
  left: -10%;
  right: -10%;
  top: -40%;
  height: 200%;
  transform: rotate(2deg);
  background:
    linear-gradient(90deg, rgba(255,255,255,.08), rgba(255,255,255,0) 28%, rgba(255,255,255,.08) 70%, rgba(255,255,255,0));
  pointer-events: none;
}

.btn-solid:hover::before {
  transform: rotate(2deg) translateX(3%);
}

/* ボタン内の小タグと矢印 */
.btn-tag {
  display: inline-block;
  padding: 4px 8px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: #2f5aa8;  
  background: #fff;
  border: 1px solid #dfe3ea;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}

.btn-solid .arrow {
  display: inline-block;
  width: 14px;
  height: 14px;
  position: relative;
  font-size: 0;
}

.btn-solid .arrow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
}

/* 備考 */
.res-note {
  text-align: center;
  color: #ffffff;
  font-size: .85rem;
  margin: 10px 0 0;
  position: relative;
  padding-left: 12px;
}

/* オープン前キャッチコピー専用 オープン後に消す*/
.btn-preopen {
  color: #16C05F;
  font-weight: 800;
  font-size: 1rem;
  background: rgba(255,255,255,0.9);
  padding: 6px 12px;
  border-radius: 6px;
  display: block;        /* ← ここを block に */
  width: fit-content;    /* ← 中身に合わせて幅を調整 */
  margin: 0 auto 6px;    /* ← 中央寄せ */
  text-align: center;
}
  
/* ===== 各種ボタン ===== */
  /* メインビジュアルのボタン */ 
  a.btn-primary {
    display: inline-flex;
    align-items: center;
    gap: .5rem; /* テキストと矢印の間隔 */
    padding: 12px 20px;
    border: 2px solid #fff;
    border-radius: 0; /* 初期は角丸なし */
    font: 700 1rem/1 'Noto Sans JP','Hiragino Kaku Gothic ProN',Meiryo,sans-serif;
    letter-spacing: .05em;
    color: #fff;
    background: transparent;
    text-decoration: none;
    text-shadow: 0 2px 4px rgba(0,0,0,0.14);
    transition: background .3s ease, color .3s ease;
  }
  
  a.btn-primary:hover,
  a.btn-primary:focus-visible {
    background: rgba(255,255,255,.15);
  }
  
  /* 矢印（下側なしのくの字） */
  .btn-primary .arrow {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 10px;
    position: relative;
    font-size: 0; /* 文字を見せない */
    vertical-align: middle;
  }
  .btn-primary .arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
  }
  
  /* ==========================
     LINE塗りつぶしボタン
  ========================== */
  a.btn-primary.btn-line-solid {
    background: #06C755;         /* 塗りつぶし */
    border-color: #ffffff;       /* 枠 */
    color: #fff;                  /* 文字＆矢印は白（currentColor） */
    border-radius: 20px;          /* 少し角丸 */
    text-shadow: none;             /* 緑地では白影を外す */
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
  }
  
  a.btn-primary.btn-line-solid:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 26px rgba(0,0,0,.22);
  }
  
  a.btn-primary.btn-line-solid:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0,0,0,.18);
  }
  
  a.btn-primary.btn-line-solid:focus-visible {
    outline: 2px solid #c7f3da;  /* 薄いLINE系グリーン */
    outline-offset: 2px;
    border-radius: inherit;
  }
  
  @media (hover: none) {
    a.btn-primary.btn-line-solid:hover {
      transform: none;
      box-shadow: 0 6px 18px rgba(0,0,0,.18);
    }
  }

/* ヒーローのテキスト層を前面へ（hoverを確実に拾う） */
.hero .hero-copy{
  position: relative;
  z-index: 2;
}

  .btn-outline {
    background-color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* テキストと矢印の間隔 */
    padding: 0.8rem 2rem;
    border: 1px solid #555;
    border-radius: 2px;
    text-decoration: none;
    color: #555;
    font-size: 1rem;
    transition: all 0.3s ease;
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    letter-spacing: 0.05em; /* 少し文字間を広げる */
    flex-direction: row-reverse;
  }
  
  .btn-outline:hover {
    background-color: #2a3d5f;
    color: #fff;
  }
  
  .btn-outline .arrow { 
    display: inline-block;
    width: 14px;                 /* 矢印サイズ */
    height: 14px;
    font-size: 0;                 /* 中の文字を見えなくする */
    margin-left: 10px;            /* 文字との間隔 */
    vertical-align: middle;
    position: relative;
  }
  
  .btn-outline .arrow::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-top: 2px solid currentColor;   /* 上の線だけ */
    border-right: 2px solid currentColor; /* 右の線だけ */
    transform: rotate(225deg); 
  }

  .btn-center {
    text-align: center;
    margin-top: 2rem; /* 上の余白はお好みで */
  }
  
/* ===== Footer (simple stacked) ===== */
.site-footer {
  background: var(--brand-navy);
  color: #fff;
  padding: 40px 0 0;
}

.footer-stack {
  text-align: center;
}

.ft-brand {
  margin: 0 0 16px;
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: .04em;
  color: #fff;
}

/* 規約系リンク：横並び・縦線区切り */
.ft-legal {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 0.7rem;
}

.ft-legal li {
  position: relative;
}

.ft-legal li + li::before {
  content: "｜";
  color: #fff;
  margin-right: 18px;
}

.ft-legal a {
  color: #fff;
  text-decoration: none;
}

.ft-legal a:hover {
  text-decoration: underline;
}

/* コピーライト帯 */
.footer-copy {
  margin-top: 20px;
  border-top: 1px solid rgba(255,255,255,.18);
  text-align: center;
  padding: 12px 0;
  font-size: .85rem;
  color: #fff;
}

/* 関連事業リンク */
.ft-related {
  margin: 20px auto;
  text-align: center;
  width: 60%; /* 横幅を短めに調整 */
}

.ft-related-heading {
  font-size: 0.85rem;

  color: #fff;
  border-top: 1px solid rgba(255,255,255,.18);
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding: 6px 0; /* ラインとテキストの間の余白 */
  margin-bottom: 10px; /* 下のリンクとの間隔 */
}

.ft-related-link {
  font-size: 0.75rem;
  color: #fff;
  text-decoration: none;
  line-height: 1.6;
}

.ft-related-link:hover {
  text-decoration: underline;
}

.ft-related-inline .ft-related-row {
  margin: 0;
}

.ft-related-inline .ft-related-link {
  display: inline;
  white-space: nowrap;
}

.ft-related-inline .ft-related-link + .ft-related-link::before {
  content: "｜";
  margin: 0 8px;
  opacity: .8;
}

/* ── 1) 既存の「｜」テキスト区切りを無効化 ── */
.site-footer .ft-legal li + li::before,
.site-footer .ft-legal-sp .ft-legal-row li + li::before {
  content: none !important;
}

/* ── 2) PC用：.ft-legal（pc-only）の区切り線を中央表示 ── */
.site-footer .footer-stack > .ft-legal.pc-only li {
  position: relative;
}

.site-footer .footer-stack > .ft-legal.pc-only li + li {
  margin-left: 14px;
  padding-left: 14px;
}

.site-footer .footer-stack > .ft-legal.pc-only li + li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1em;
  border-left: 1px solid rgba(255,255,255,.85);
}

/* ── 3) SP用：.ft-legal-sp の各行にも同じ区切り線 ── */
.site-footer .ft-legal-sp .ft-legal-row li {
  position: relative;
}

.site-footer .ft-legal-sp .ft-legal-row li + li {
  margin-left: 14px;
  padding-left: 14px;
}

.site-footer .ft-legal-sp .ft-legal-row li + li::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 1em;
  border-left: 1px solid rgba(255,255,255,.85);
}

/* =========================================
   親子セクション（ティーザー）
   ========================================= */
#parents .parents-wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 24px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}

#parents h2 {
  font-size: 1.5rem;
  color: #333;
  margin: 0 0 0.75rem;
  text-align: left;
}

#parents .parents-text .lead {
  font-size: 0.95rem;
  color: #2a3d5f;
  line-height: 1.9;
}

/* 箇条書き */
#parents .parents-points {
  list-style: none;
  margin: 12px 0 18px;
  padding: 0;
  color: #2a3d5f;
  font-size: 0.9rem;
}

#parents .parents-points li {
  position: relative;
  padding-left: 1.2rem;
  line-height: 1.8;
}

#parents .parents-points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: #2f5aa8;               /* ブランド紺 */
  font-weight: 800;
}

/* 画像と注記 */
#parents .parents-image img {
  width: 90%;
  height: auto;
  margin-top: 2rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

.parents-image img.only-pc {
  margin-top: 16px; /* 好きな値に調整してください */
}

#parents .img-note {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: #6b7280;
}

/* 応援割（コンパクトカード） */
.parents-offer.compact {
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed #cfd7e5;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 1rem;
}

.parents-offer.compact .offer-badge {
  display: inline-block;
  margin: 0 0 4px;
  padding: 3px 9px;
  font-weight: 800;
  font-size: 0.8rem;
  color: #2a3d5f;
  background: #eaf2ff;
  border: 1px solid #cfe1ff;
  border-radius: 999px;
}

.parents-offer.compact .offer-lead {
  margin: 0 0 6px;
  font-size: 1rem;
  color: #ff6262;               /* 強調の赤 */
}

.parents-offer.compact .offer-note {
  margin: 0;
  font-size: 0.85rem;
  color: #6f7a86;
}

.parents-offer .offer-link {
  text-decoration: underline;
}

/* キーボード操作のフォーカス（アクセシビリティ） */
#parents a:focus-visible,
#parents button:focus-visible {
  outline: 2px solid #2f5aa8;
  outline-offset: 2px;
  border-radius: 6px;
}

@media (max-width: 840px) {

  #parents h2 {
    text-align: center;
  }

  #parents .parents-wrap {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  #parents .parents-text .lead {
    font-size: 0.9rem;
    line-height: 1.8;
  }

  /* SP はボタンをフル幅＆タップしやすく */
  .btn-outline {
    width: 100%;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .parents-offer.compact {
    padding: 10px;
  }

  .parents-offer.compact .offer-lead {
    font-size: 0.98rem;
  }

  .parents-offer.compact .offer-note {
    font-size: 0.83rem;
  }

  #parents .parents-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-top: 0rem;
  }
}

/* =========================================================
   コラム・ニュース専用ヒーロー（置き換え）
   ========================================================= */
/* 全体 */
.post{
  padding: 56px 0 44px;
}

/* 見出しブロック */
.post-header{
  width: min(920px, 96%);
  margin-inline: auto;
  padding-bottom: 16px;
  border-bottom: 1px solid #007cf8;
  margin-bottom: 3rem;
}

.post-date{
  display: inline-block;
  color: #555;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .02em;
}
.post-title{
  margin: 10px 0 0;
  font-size: 1.5rem;
  line-height: 1.35;
  color: #0163c4;
  font-weight: 1000;
  text-align: left;
}

/* レイアウト：縦並び（目次→本文） */
.post-layout{
  width: min(920px, 92%);
  margin-inline: auto;
  display: block;
}

/* 目次 */
.post-toc{
  position: static;
  max-width: 920px;
  margin: 14px auto 18px;
  border-radius: 8px;
  border: 1px solid #a7d1fd;
  background: #fff;
  overflow: hidden;
}

.post-toc-title{
  margin: 0;
  padding: 12px 14px;
  font-weight: 800;
  color: #2a3d5f;
  background: #beddfd;
  border-bottom: 1px solid #95c7f9; /* 旧 line-thin 相当 */
}

.post-toc summary{
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  font-weight: 800;
  color: #2a3d5f;
  background: #ddecfa;
  border: 0;
}

.post-toc ol{
  margin: 0;
  padding: 8px 0;
  list-style: decimal;          /* 番号は維持 */
  list-style-position: outside; /* 既定の位置 */
}

.post-toc li{
  border-bottom: 1px solid #eef2f6; /* 仕切り線 */
  color: #007cf8;
  font-size: .9rem;
  line-height: 1.8;                 /* 行送りは控えめに */
}

.post-toc li:last-child{
  border-bottom: none;              /* 最後の線は消す */
}

/* 行全体をクリック可能に */
.post-toc a{
  display: block;
  padding: 10px 16px 10px 14px;     /* 左パディングはお好みで微調整 */
  color: inherit;
  text-decoration: none;            /* 下線オフ */
  text-underline-offset: 2px;
}

/* ホバー時にほんのり背景を付与（番号も含めたいので li に付ける） */
.post-toc li:hover{
  background: #fbfdff;
}

/* 本文（行間で読ませる） */
.post-body{
  max-width: 920px;
  margin: 0 auto;
  color: #273247;          /* 本文ベースのインク色 */
  line-height: 3;
  letter-spacing: .01em;
  word-break: auto-phrase;
  text-wrap: pretty;
}

/* セクション */
.post-section{
  padding: 28px 0 8px;
  border-bottom: 1px solid #f5f7fb;
}
.post-section:last-child{ border-bottom: 0; }

/* h3（#333／上下に細めの罫線） */
.post-body .post-section h2{
  color: #0163c4;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 3;
  margin: 40px 0 18px;
  padding: 12px 0;
  border-top: 1px solid #007cf8;
  border-bottom: 1px solid #007cf8;
  scroll-margin-top: calc(var(--header-h,64px) + 16px);
}
.post-body .post-section:first-of-type h3{ margin-top: 20px; }

/* h4（シンプル、装飾なし） */
.post-section h3{
  margin: 18px 0 8px;
  font-size: 1.02rem;
  line-height: 3;
  color: #0163c4;
  font-weight: 700;
}

/* 段落 p（#555） */
.post-body .post-section p{
  color: #555;
  font-size: .95rem;
  line-height: 3;
  letter-spacing: .02em;
  margin: 0 0 1.6rem;
}

/* 強調 */
.post-body strong{ font-weight: 800; }

/* 下部ナビ（一覧／上へ） */
.post-bottom-nav{
  width: min(320px, 92%);
  margin-inline: auto;
  display: flex;
  flex-direction: column;   /* ← 縦並びにする */
  align-items: stretch;     /* ← 子要素をフル幅に */
  gap: 2rem;
  justify-content: center;
  padding-top: 26px;
  margin-top: 2rem;
}

.post-bottom-nav .btn-outline{
  display: inline-flex;     /* 中央寄せのため */
  justify-content: center;
  align-items: center;
  width: 100%;              /* ← ボタンを横幅いっぱい */
  min-width: 0;             /* 既存のmin-widthを無効化 */
  border-color: #555;
  text-align: center;
}

/* フォーカス可視化 */
.post a:focus-visible{
  outline: 2px solid #98b2ff;
  outline-offset: 3px;
  border-radius: 2px;
}

/* 本文中の #reservation をフルブリード化（左右の白帯解消） */
.article-section #reservation,
.post-body #reservation{
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  padding-left: max(env(safe-area-inset-left), 0px);
  padding-right: max(env(safe-area-inset-right), 0px);
}
.article-section #reservation .container,
.post-body #reservation .container{
  max-width: none;
  width: min(1120px, 92%);
  margin-inline: auto;
}

/* ===============================
  規約ページ 共通スタイル
   =============================== */

   .hero-visual {
    position: relative;
    width: 100%;
    height: 65vh;
    min-height: 420px;
    margin-top: 65px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
  }
  
  /* 背景画像 */
  .hero-visual .hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  
  .hero-visual .hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
  }
  
  /* グラデーションオーバーレイ */
  .hero-visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(1,9,22,.25), rgba(3,16,36,.5));
    z-index: 1;
  }
  
  /* テキストコンテンツ */
  .hero-visual .hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem; /* ← 余白をgapで管理 */
    max-width: 90%;
  }
  
  /* タイトル */
  .hero-visual .hero-title{
    font-size: 2rem;
    line-height: 1.4;
    font-weight: 800;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,.4);
  }
  
  /* サブタイトル */
  .hero-visual p {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
    margin-top: 2rem;
  }
  
  /* 規約ページだけ小さく*/
  .hero-tokusho .hero-content p {
    font-size: 1.3rem; /* スマホはさらに少し小さく */
  }

/* 規約本文エリア */
.article-section {
  padding: 60px 20px;
  background: #fff;
  line-height: 1.9;
  font-size: 1rem;
  color: #333;
}

.article-section .container {
  max-width: 900px;
  margin: 0 auto;
}

/* 見出し h2（ページタイトル：会員規約など） */
.article-title {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 3px solid #2f5aa8;
}

/* 各条文ブロック */
.article-block {
  margin-bottom: 2.5rem;
}

/* H3（番号付き見出し＋第◯条） */
.article-block h2 {
  display: flex;
  align-items: center;
  font-size: 1.2rem;        /* 統一 */
  font-weight: 600;         /* 両者の中間値 */
  color: #2f5aa8;           /* 色を統一 */
  margin: 0 0 0.8rem;       /* 下余白を調整 */
  border-left: 4px solid #2f5aa8; /* 左線 */
  border-bottom: 2px solid #e5e5e5; /* 下線 */
  padding-left: 0.6rem;     /* 左余白 */
  padding-bottom: 0.5rem;   /* 下余白 */
}

.article-block h2 .num{
  display:inline-block;
  min-width:2rem; height:2rem;
  margin-right:.8rem;
  background:#2f5aa8;
  color:#fff;
  font-size:1rem; font-weight:800;
  text-align:center; line-height:2rem;
  border-radius:50%;
}

/* 本文（段落） */
.article-block p {
  font-size: 1rem;
  line-height: 1.9;
  margin: 0 0 1rem 0;
  color: #444;
}

/* 箇条書き */
.article-block ul {
  margin: 0 0 1.5rem 1.2rem;
  padding: 0;
}

.article-block ul li {
  list-style-type: disc;
  margin-bottom: 0.5rem;
  line-height: 1.8;
}

/* 更新日 */
.update-date {
  text-align: right;
  font-size: 0.9rem;
  color: #666;
  margin-top: 2rem;
  border-top: 1px solid #eee;
  padding-top: 1rem;
}

.back-to-the-top {
  text-align: center;
  margin: 1rem 0 2rem;
  margin-top: 5rem;
}

.back-to-the-top a {
  color: #2f5aa8;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.back-to-the-top a:hover {
  color: #1a3b70;
}


.back-to-top {
  text-align: center;
  margin: 1rem 0 2rem;
}

.back-to-top a {
  color: #272f3d;
  font-weight: 600;
  text-decoration: none;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.back-to-top a:hover {
  color: #1a3b70;
}

.btn-row{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
  margin: 40px 0 10px;
}
.btn-row .btn-outline{ min-width: 220px; }

/* 応募フォームボタン */
.cta-center {
  text-align: left;
  margin: 20px 0;
}

.tbtn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:240px;
  padding:14px 24px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1;
  transition: all .2s ease;
}

.tbtn--filled {
  background:#1976d2;
  color:#fff;
  border:2px solid #1976d2;
}
.tbtn--filled:hover {
  background:#1565c0;
  border-color:#1565c0;
}

/* ===============================
  お知らせ用
   =============================== */
.news-section {
  padding: 2rem 0;
  border-top: 3px solid #2f5aa8;
  margin-top: 2rem;
}

.news-title {
  font-size: 1.5rem;
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #2f5aa8;
}

.news-date {
  display: block;
  font-size: 0.9rem;
  color: #888;
  margin-bottom: 1rem;
}

.news-content p {
  margin-bottom: 1rem;
  line-height: 1.8;
}

.news-points {
  background: #f9fbff;
  border-left: 4px solid #2f5aa8;
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
}

.news-points li {
  margin: 0.5rem 0;
  font-weight: 500;
}

/* ==== 共通 ==== */
.sp-br {
  display: none;
}

.pc-br {
  display: inline;
}

.sp-hide {
  display: inline;
}

.only-pc { display: block; }
.only-sp { display: none; }


.pc-only { display: table; }
.sp-only { display: none; }

.sp-price-card {
  display: none;
}


.ft-legal.pc-only { display: inline-flex; }
.ft-legal-sp.sp-only { display: none; }

/* ===============================
===============================
店舗ページ
===============================
=============================== */
/* ===============================
メインビジュアル
=============================== */
.hero-store {
  position: relative;
  width: 100%;
  height: 80vh;
  overflow: hidden;
  padding-top: 65px;
  box-sizing: border-box;
}

.hero-store-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* オーバーレイ */
.hero-store-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,37,80,.3), rgba(10,37,80,.3));
  z-index: 1;
}

/* テキストを最前面に */
.hero-store-copy {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  text-align: center;
  padding: 20px;
  z-index: 2; /* ← overlayより上 */
}

/* タイトル（店舗用） */
.hero-store-title {
  line-height: 1.4;
  margin-bottom: 20px;
  color: #fff;
}

.hero-store-sub {
  font-family: 'Noto Serif JP', sans-serif;
  font-size: 1.6rem;   /* 小さめ（例） */
  font-weight: 400;
  display: block;
  line-height: 1.3;
  text-shadow: 0 2px 4px rgba(0,0,0,0.14);
}

.hero-store-main {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.8rem;   /* 大きめ（例） */
  font-weight: 800;
  letter-spacing: 0.05em;
  display: block;
  margin-top: 0.5rem;
  text-shadow: 0 2px 4px rgba(0,0,0,0.45);
}

/* 説明テキスト（店舗用） */
.hero-store-text {
  font-size: 1.2rem;
  margin-bottom: 30px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.14);
}

/* ============================
   ギャラリー
============================ */
.gallery-slider {
  max-width: 900px;
  margin: 0 auto;
}
.gallery-main {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}
.gallery-main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .6s ease;
}
#gallery h2 {
  text-align: center;
  margin: 0 auto 1rem; /* 下に少し余白 */
  line-height: 1.3;
}
.gallery-main img.active {
  opacity: 1;
}
.gallery-thumbs {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 15px;
}
.gallery-thumbs img {
  width: 100px;
  height: 70px;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.6;
  border: 2px solid transparent;
  transition: opacity .3s, border .3s;
}
.gallery-thumbs img.active,
.gallery-thumbs img:hover {
  opacity: 1;
  border-color: #e60033; /* ブランドカラー */
}

/* 後ほど削除↓ */
.gallery-note{
  text-align:center;
  color:#6f7a86;
  font-size:.9rem;
  margin: 0 0 12px;
}

/* 準備中バッジ（お好みで） */
.badge-soon{
  position: absolute;
  top: 16px; left: 16px;
  background: #2a3d5f;
  color:#fff;
  font-weight:700;
  font-size:.85rem;
  padding: 6px 10px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* 準備中スタイルを少し淡く（任意） */
.gallery-slider.is-placeholder .gallery-main img{
  filter: grayscale(20%);
}
.gallery-slider.is-placeholder .gallery-thumbs img{
  opacity:.6;
  pointer-events:none;
  border-color: transparent;
}
/* 後ほど削除↓ */

@media (max-width: 840px){
  .gallery-slider{
    max-width: 100%;
  }

  /* メイン画像：画面幅に応じて高さ可変 */
  .gallery-main{
    height: 54vw;          /* だいたい 9:5 程度の比率 */
    min-height: 220px;
    border-radius: 8px;
  }

  /* サムネ：横スクロール＋スナップ */
  .gallery-thumbs{
    gap: 8px;
    margin-top: 10px;
    padding: 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    justify-content: flex-start;      /* 中央寄せ→左寄せに */
  }
  .gallery-thumbs img{
    flex: 0 0 auto;                   /* 横並びで流す */
    width: 28vw;                      /* 3〜4枚見えるサイズ感 */
    height: 18vw;
    min-width: 96px;                  /* 端末によって小さすぎ防止 */
    min-height: 64px;
    border-width: 1px;                /* 枠線を少し細く */
    scroll-snap-align: center;
  }
}

/* タブレット中間ブレーク（任意） */
@media (min-width: 841px) and (max-width: 1100px){
  .gallery-main{ height: 420px; }
  .gallery-thumbs img{ width: 120px; height: 80px; }
}

/* ============================
   施設情報
============================ */
#facility h2 {
  text-align: center;
}

.facility-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* PCでは5列 */
  gap: 20px;
  margin-top: 30px;
}

.facility-card {
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}
.facility-card:hover {
  transform: translateY(-3px);
}

.facility-card img {
  width: 100%;
  height: 120px;        /* 高さを揃える */
  object-fit: cover;    /* トリミングでバランス良く */
}

.facility-card p {
  padding: 10px;
  font-size: 0.95rem;
  font-weight: 600;
}

@media (max-width: 1100px){
  .facility-grid{
    grid-template-columns: repeat(3, 1fr); /* 5→3列 */
    gap: 16px;
  }
}
@media (max-width: 840px){
  .facility-grid{
    grid-template-columns: repeat(2, 1fr); /* SPは2列 */
    gap: 12px;
  }
  .facility-card{
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
  }
  .facility-card img{
    height: 28vw;                /* 画面幅に応じて高さ調整 */
    max-height: 140px;           /* 伸びすぎ防止 */
    border-bottom: 1px solid #f2f4f7;
  }
  .facility-card p{
    padding: 10px 8px;
    font-size: .9rem;
  }
}

/* タッチ端末ではホバー浮き上がりを無効（ピョコつき防止） */
@media (hover: none){
  .facility-card:hover{ transform: none; }
}

/* キーボード操作のフォーカス可視化（アクセシビリティ） */
.gallery-thumbs img:focus-visible,
.facility-card:focus-within{
  outline: 2px solid #98b2ff;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================
   支払い方法
============================ */

#payment h2{
  text-align: center;
}

.payment-text {
  text-align: center;
  margin-bottom: 20px;
}
.payment-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
}
.payment-logos img {
  height: 40px;
  width: auto;
  filter: grayscale(20%);
  transition: filter .3s;
}
.payment-logos img:hover {
  filter: none;
}

/* ============================
   スタッフ紹介
============================ */
#staff h2 {
  text-align: center;
}

.staff-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 30px;
}
.staff-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.1);
  padding: 20px;
  text-align: center;
}
.staff-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 15px;
}
.staff-card h3 {
  font-size: 1.2rem;
  margin-bottom: 5px;
}
.staff-role {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 15px;
}
.staff-bio {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #333;
}

@media (max-width: 840px){
  .staff-grid{
    grid-template-columns: 1fr;  /* 1カラム */
    gap: 20px;                    /* 少し詰める */
  }
  .staff-card img{
    height: 220px;                /* 画像を少し低めに */
  }
}

/* ===============================
  フォント
   =============================== */
/* 本文（日本語用） */
html, body {
  font-family: 'M PLUS Rounded 1c', 'Meiryo', sans-serif;
  line-height: 1.5;   /* ← 少し詰める */
  color: var(--text);
  margin: 0;          /* ← ブラウザ標準の余白を消す */
  padding: 0;
}

/* 数字・英語（Montserratで詰め気味に） */
.en, 
.price span, 
h2 .en, 
h3 .en {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.1;   /* ← 欧文はさらに詰める */
  display: inline-block; /* ← 行間の影響を抑える */
  vertical-align: middle; /* ← 日本語と高さを揃える */
}

.hamburger {
  display: none;
}

.nav-logo {
  display: none;
}

/* Responsive */
@media (max-width: 840px) {

  .pc-only { display: none; }
  .sp-only { display: block; }

  .ft-legal.pc-only { display: none !important; }
  .ft-legal-sp.sp-only { display: block; }

  .sp-price-card {
    display: block;
  }

  .sp-br {
    display: inline;
  }

  .pc-br {
    display: none;
  }

  .sp-hide {
    display: none;
  }

  .only-pc { display: none; }
  .only-sp { display: block; }

  
/* ヘッダー */
  .logo {
    margin-left: -0.5rem;
  }

  .logo img {
    height: 50px; /* 必要に応じて調整 */
    width: auto;
    display: block;
  }

/* ナビ全体（モーダル表示用） */

.nav {
  position: absolute;
  top: 65px; /* ヘッダーの下から開始 */
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.95);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  overflow: hidden;
  max-height: 0;   /* ← 最初は非表示 */
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease;
  pointer-events: none;
  z-index: 998;
}

.nav.active {
  max-height: 800px; /* メニュー分の高さを確保 */
  opacity: 1;
  pointer-events: auto;
}

.nav-logo {
  display: block;
  margin-bottom: 1rem;
  text-align: center;
}

  
  .hamburger {
    display: block;
  }

/* ===== SP: メインビジュアル（ヒーロー） ===== */
/* 見出し（スマホサイズに調整） */

  .hero-title {
    font-size: clamp(1.1rem, 4.2vw, 1.4rem);
    line-height: 1.35;
    margin: 0 0 1rem;
  }

  .hero-title .en {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    display: block;
  }

  .hero-title .en .en-sub{
    font-size: 1.3rem;
    letter-spacing: 0.04em;
  }

  .hero-title .en .en-main{ 
    margin-top:1rem;
   }

   .hero-title .en .en-main2{ 
    font-size: 1.5rem;
    margin-top:1rem;
   }

  /* 説明文：固定topをやめて自然な余白に */
  .hero-copy p {
    font-size: clamp(0.9rem, 3.8vw, 1rem);
    line-height: 1.6;
    margin: 0 0 1.5rem;
    position: static !important;
    top: auto !important;
    margin-top: 5rem;
  }

  /* ボタン：固定topをやめる */
  .hero-copy .btn-primary {
    position: static !important;
    top: auto !important;
  }

  /* SP用背景画像 */
  .slide.s1 { --bg: url('images/hero1_sp.jpg'); }
  .slide.s2 { --bg: url('images/hero2_sp.jpg'); }
  .slide.s3 { --bg: url('images/hero3_sp.jpg'); }
  
  /* テキストの縦位置は可変で微調整（必要なら数値だけ触ってください） */
  .hero { --hero-nudge: 6svh; } /* 5–9svh でお好み調整 */

  .hero-copy {
    top: 30%;
    transform: translateX(-50%); /* Y方向の-50%は使わない */
  }

  /* スライダーボタン */
  .slider-btn {
    top: 50%;
    width: 35px;
    height: 35px;
  }

  .hero{
    margin-top: 0;
  }

/* ===== About ===== */
  #about h2 {
   margin-top: -2rem;
   font-size: 1.3rem;
   text-align: left;
   grid-row: 1;
  }

  #about .about-wrap {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* 子要素をグリッド直下にする（h2だけ先頭に置ける） */
  #about .about-text {
    display: contents;
  }

  /* 2行目：画像 */
  #about .about-image {
    grid-row: 2;
    justify-self: center;
  }

  #about .lead {
    font-size: 0.9rem;
    margin-bottom: 0;
  }

/* =====キャンペーン情報 ===== */
#campaign .campaign-wrap {
  max-width: 680px;
  padding: 24px 18px 20px;
  border-radius: 24px;
  border-width: 1.5px;
}

#campaign .campaign-wrap::before,
#campaign .campaign-wrap::after {
  inset: 5px;
  border-color: #001dc0;
  border-radius: 20px;
}

#campaign .campaign-sub {
  font-size: 1rem;
  letter-spacing: .16em;
  margin-bottom: 6px;
}

#campaign .campaign-ttl {
  font-size: 1.45rem;
  margin-bottom: 16px;
}

#campaign .campaign-ttl span {
  font-size: 1.85rem;
}

/* 1カラムに */
#campaign .campaign-grid {
  grid-template-columns: 1fr;
  gap: 18px;
}

/* —— 01とタイトルを“すぐ横”に —— */
#campaign .campaign-card {
  padding: 14px 6px 12px;
  border-radius: 0;
  border-bottom: 1px solid #e6e0d4;
}

#campaign .campaign-card:last-child {
  border-bottom: 0;
}

/* 番号は左に固定、タイトルを直右に寄せる（余白小さめ） */
#campaign .badge {
  width: 32px !important;   /* ← !important で上書き */
  height: 32px !important;
  font-size: 0.75rem !important;
  margin: 0 18px 0 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  float: left;
}

#campaign .campaign-card h3 {
  margin: 0;
  line-height: 36px;         /* バッジと高さを合わせる */
  font-size: 1.1em;
  color: #555;
  text-align: left;
}

/* バッジ行の直後でフロート解除 */
#campaign .divider {
  clear: both;
  width: 100%;
  margin: 10px 0 12px;
  background: #e6e0d4;
}

/* —— 「通常価格 ▶ 価格」を中央で横一列 —— */
#campaign .campaign-card {
  text-align: center;        /* 行全体を中央に */
}

#campaign .note,
#campaign .arrow,
#campaign .price {
  display: inline-flex;      /* 横並び化 */
  align-items: center;
  vertical-align: middle;
  margin: 0;
}


#campaign .note {
  font-size: .92rem;
  color: #6f7a86;
  margin-right: -5px;
}

#campaign .arrow {
  font-size: 0;
  margin: 0 6px;             /* 間隔を“少し” */
}

#campaign .arrow::before {
  content: "▶︎";
  font-size: .9rem;
  color: #a6a6a6;
}

#campaign .price {
  display: inline-flex;        /* ← flexを入れる！ */
  align-items: flex-end;       /* 下端揃え */
  font-size: 1rem;
  color: var(--gold);
  font-weight: 700;
  margin-left: 8px;          /* 間隔を“少し” */
  gap: 2px;     
}

#campaign .price span {
  font-size: 2rem;
  margin-right: 4px;
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  line-height: 1;     /* ← 行間をギュッと詰める */
  letter-spacing: 0;  /* 数字なので字間もゼロ推奨 */
}

#campaign .small {
  text-align: center;
  margin-top: 8px;
  font-size: .78rem;
  line-height: 1.5;
}

/* ===== 体験レッスンの予約（スマホ調整） ===== */

/* 枠・余白をコンパクトに */
#reservation .res-panel,
#reservation2 .res-panel,
#reservation3 .res-panel {
  padding: 24px 16px 18px;
  max-width: 680px;
  padding-top: 30px; /* スタンプぶんの余白 */
}

/* スタンプ：左上固定（小さめ） */
#reservation .res-stamp,
#reservation2 .res-stamp,
#reservation3 .res-stamp {
  position: absolute;
  top: -50px;
  left: -10px;
  transform: rotate(-6deg);
  width: 86px;
  height: 86px;
}
#reservation .res-stamp .stamp-top,
#reservation2 .res-stamp .stamp-top,
#reservation3 .res-stamp .stamp-top { font-size: .6rem; }

#reservation .res-stamp .stamp-mid,
#reservation2 .res-stamp .stamp-mid,
#reservation3 .res-stamp .stamp-mid { font-size: 0.9rem; }

#reservation .res-stamp .stamp-btm,
#reservation2 .res-stamp .stamp-btm,
#reservation3 .res-stamp .stamp-btm { font-size: .7rem; }

/* 中段：テキストと矢印の並び */
#reservation .res-row.mid,
#reservation2 .res-row.mid,
#reservation3 .res-row.mid {
  display: grid;
  grid-template-columns: 1fr auto;  /* 左可変／右は内容幅 */
  align-items: center;
  justify-content: initial;
  gap: 10px 16px;
  width: 100%;
  flex-wrap: nowrap; /* 念のため上書き */
}
#reservation .res-join-text,
#reservation2 .res-join-text,
#reservation3 .res-join-text {
  margin: 0;
  line-height: 1.6;
  text-align: center;
}
#reservation .res-arrow,
#reservation2 .res-arrow,
#reservation3 .res-arrow {
  justify-self: end;
  white-space: nowrap; /* 「→ 0円」を改行させない */
}
#reservation .res-arrow::before,
#reservation2 .res-arrow::before,
#reservation3 .res-arrow::before {
  width: 32px;
}
#reservation .res-arrow::after,
#reservation2 .res-arrow::after,
#reservation3 .res-arrow::after {
  left: 32px;
  border-left-width: 7px;
  border-top-width: 4px;
  border-bottom-width: 4px;
}
#reservation .res-arrow span,
#reservation2 .res-arrow span,
#reservation3 .res-arrow span {
  font-size: 1rem;
}

/* CTAボタン */
#reservation .res-row.cta,
#reservation2 .res-row.cta,
#reservation3 .res-row.cta {
  margin: 8px 0 6px;
}
#reservation .btn-solid,
#reservation2 .btn-solid,
#reservation3 .btn-solid {
  max-width: 520px;
  padding: 14px 18px;
}
#reservation .btn-tag,
#reservation2 .btn-tag,
#reservation3 .btn-tag {
  font-size: .68rem;
  padding: 3px 7px;
}

/* 備考 */
#reservation .res-note,
#reservation2 .res-note,
#reservation3 .res-note {
  font-size: .8rem;
  margin-top: 8px;
  text-align: left;
}

/* ===== 特徴 ===== */
.features-grid{
  grid-template-columns: 1fr;
  gap:16px;
}

.feature-item img{
  height:200px;
}

.feature-item h3{
  font-size: 1.1rem;
}

.feature-item p{
  font-size: 0.8rem;
}

/* ===== パーソナルの特徴 ===== */
  #personal h2.personal-ttl {
    font-size: 1.5rem;
    line-height: 1.4;
    margin-top: -2rem;
  }

  #personal .personal-item .badge {
    font-size: 1.2rem;
    width: 48px;
    height: 48px;
  }

  #personal .personal-item h3 {
    font-size: 0.9rem;
    line-height: 1.5;
    text-align: left;
  }

  #personal .personal-item p {
    font-size: 0.8rem;
    line-height: 1.6;
    text-align: left;
  }

/* ===== こんな人におすすめ ===== */
  /* 記事を縦並びに */
  #recommend-effects .effect {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;        /* 既存の幅指定を上書き */
    padding: 16px 0;
  }
  /* reverse も同じ縦並び */
  #recommend-effects .effect.reverse {
    flex-direction: column;
  }

  /* テキスト側は h3→tags→p の自然順を維持 */
  #recommend-effects .effect-text {
    order: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* 画像は最後に */
  #recommend-effects .effect-image {
    order: 4;
    width: 100%;
    margin: 0;
  }
  #recommend-effects .effect-image img {
    display: block;
    width: 100%;        /* はみ出し防止 */
    height: auto;
    border-radius: 10px;
  }

  #recommend-effects .effect-ttl {
    font-size: 1.1rem;
  }

  #recommend-effects .tags .tag {
    font-size: 0.75rem;
  }

  #recommend-effects .effect-text p {
    font-size: 0.85rem;
  }

/* ===== どの種目がいいの？ ===== */
  #compare-board-modality .modality-wrap {
    padding-left: 16px;
    padding-right: 16px;
    margin-top: -2rem;
  }

  #compare-board-modality .modality-list {
    gap: 14px;
  }

  #compare-board-modality .modality-row {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 10px;
    padding: 12px 14px;
    text-align: left;
  }

  #compare-board-modality .modality-img {
    justify-content: center;
    margin-bottom: 4px;
  }

  #compare-board-modality .modality-img img {
    width: 100px;
    height: 100px;
  }

  #compare-board-modality .modality-ttl {
    font-size: 1rem;
    margin: 0 0 6px;
    text-align: center;
  }

  #compare-board-modality .modality-text p {
    font-size: 0.85rem;
    line-height: 1.65;
  }

  #compare-board-modality .modality-note {
    font-size: 0.82rem;
  }

/* ===== パーソナルorグループ ===== */
/* タブはSPでは非表示 */
#compare-board .pg-tab{ 
  display:none; 
}

/* スクロール容器は .pg-wrap をそのまま使う */
#compare-board .pg-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;             /* スクロールバーの逃げ */
}

/* 表本体に最小幅を与えて横に流す（数値は好みで調整） */
#compare-board .pg-grid{
  min-width: 980px;                 /* 960〜1040pxあたりで微調整 */
  padding: 18px 12px;
}

/* 文字サイズ・余白を少しだけ締める */
#compare-board .pg-head,
#compare-board .pg-key,
#compare-board .pg-cell{
  font-size: .9rem;
  padding: 14px 9px;
}

/* 端のフェード（スワイプの気配づけ：不要なら削除） */
#compare-board .pg-wrap::before,
#compare-board .pg-wrap::after{
  content:"";
  position: sticky;
  top: 0; bottom: 0;
  width: 16px;
  pointer-events: none;
  z-index: 5;
}
#compare-board .pg-wrap::before{
  left: 0;
  background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
}
#compare-board .pg-wrap::after{
  float: right;
  right: 0;
  background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
}

#compare-board .pg-note{
  margin: 12px 0 0;
  padding: 0 8px;     /* 横の詰まりを少し緩める */
  text-align: left;   /* 好みで center→left に */
  font-size: .9rem;   /* 読みやすい大きさに微調整 */
  line-height: 1.8;
}

#compare-board .pg-wrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 表そのものの“最小幅”と列幅を縮める */
#compare-board .pg-grid{
  min-width: 800px; /* ← ここを小さくすると更にギュッと詰まる（例: 580px） */
  grid-template-columns: 180px minmax(300px,1fr) minmax(300px,1fr);
  padding-left: 8px;
  padding-right: 8px;
}

/* セル内の余白も控えめに＋左寄せで“余白感”を減らす */
#compare-board .pg-head,
#compare-board .pg-key,
#compare-board .pg-cell{
  padding-left: 8px !important;
  padding-right: 8px !important;
  text-align: center;
}

/* ===== 料金プラン ===== */
#pricing h3 {
  text-align: center;
  font-size: 1.5rem;
}

#pricing .note {
  text-align: left;
}

/* SPカード用デザイン */
.sp-price-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sp-price-card {
  border: 1px solid #ddd;
  border-radius: 0;     /* 角を四角に */
  padding: 12px;
  background: #fff;
  margin-bottom: 24px;  /* カード同士の隙間を広げる */
}

/* スマホ用タイトル（青背景＋白文字） */
.sp-price-title {
  background: #2f5aa8;   /* 青 */
  color: #fff;           /* 白文字 */
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  padding: 8px;
  margin: -12px -12px 12px -12px; /* カード内で横いっぱいにする */
}

.sp-price-title span {
  font-size: 0.9rem;
}

/* 金額部分 */
.sp-price-card .fee {
  text-align: center;
  font-size: 1rem !important;
  font-weight: bold;
  color: #2f5aa8 !important; 
  margin: 8px 0 4px;
}

.sp-price-card .fee strong {
  font-size: 1.5rem !important; /* 金額を少し大きく強調 */
  color: #2f5aa8 !important;    /* タイトルと同じ青 */
}

/* 1回あたり */
.sp-price-card .per {
  text-align: center;
  font-size: 1rem !important;
  color: #555 !important;
  margin: 0 0 8px;
}

/* 説明文 */
.sp-price-card .desc {
  text-align: center;
  font-size: 1rem !important;
  color: #333 !important;
  line-height: 1.6;
}

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

/* ===== お客様の声 ===== */
/* スクロール部分 */
  .voice-track {
    gap: 12px;                  /* カード間隔を少し狭く */
    padding: 4px 2px 10px;
  }

  /* カード */
  .voice-card {
    flex: 0 0 85%;              /* 1枚を大きめに表示（横スクロールで1枚ずつ見せる） */
    border-radius: 8px;         /* 丸みを少し抑える */
    padding: 18px 16px;
  }

  .voice-card h3 {
    font-size: 1rem;            /* 見出しを少し小さく */
    margin-bottom: 8px;
  }

  .voice-card p {
    font-size: 0.85rem;         /* 読みやすいサイズに調整 */
    line-height: 1.7;
  }

  .voice-card .voice-name {
    margin-top: 12px;
    font-size: 0.75rem;
  }

  /* ドットナビ */
  .voice-dots {
    margin-top: 16px;
    gap: 6px;
  }
  .voice-dots a {
    width: 10px;
    height: 10px;
  }

/* ===== 体験レッスンの流れ ===== */
.flow-wrap {
  max-width: 92%; /* 余白を活かす */
}
.flow-content {
  padding: 1rem 1rem 1rem 4rem; /* コンパクト */
}
.flow-content h3::before {
  width: 36px;
  height: 36px;
  font-size: 0.9rem;
  left: -3rem;
}
.flow-content p {
  font-size: 0.85rem;
  line-height: 1.7;
}

/* ===== アクセス ===== */
  #access h2 {
    font-size: 1.3rem;
    margin-bottom: 2rem;
  }

  .access-grid {
    grid-template-columns: 1fr; /* 1カラムに */
    gap: 16px;
  }

  .access-info {
    border-radius: 8px;
    padding: 14px 16px;
  }

  .access-dl > div {
    grid-template-columns: 70px 1fr;
    gap: 8px;
    padding: 8px 0;
  }
  .access-dl dt {
    font-size: 0.8rem;
  }
  .access-dl dd {
    font-size: 0.8rem;
  }

  .access-map .map-frame {
    aspect-ratio: 16 / 12; /* スマホは少し縦長 */
    border-radius: 8px;
  }

/* ===== コラム ===== */
  #columns h2 {
    font-size: 1.3rem;
    margin-bottom: 0.75rem;
  }

  .columns-panel {
    border-radius: 8px;
    padding: 6px;
  }

  .columns-scroll {
    max-height: none;   /* スクロールやめて縦並び */
    overflow-y: visible;
    padding: 0;
  }

  .column-item + .column-item {
    margin-top: 8px;
  }

  .column-item a {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 14px 12px 14px 20px; /* ← 左に余白を追加 */
    position: relative;
  }

  /* 日付を上段に小さめで */
  .col-date {
    width: auto;
    font-size: 0.75rem;
    color: #6c7a89;
    margin-bottom: 2px;
  }

  /* タイトルは2行まで表示（省略） */
  .col-title {
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: normal;
  }

  /* リスト間の区切りを広めに */
  .column-item + .column-item {
    margin-top: 16px;
    border-top: 1px dashed #e6ecf3;
    padding-top: 12px;
  }

  /* 上下フェード幅をスマホに合わせる */
  .columns-panel::before,
  .columns-panel::after {
    left: 6px; right: 6px; height: 18px;
  }

  .columns-scroll {
    max-height: 420px;   /* ← SPでは220pxに制限 */
    overflow-y: auto;    /* スクロールを有効に */
  }

/* ===== Footer (2行に分けるバージョン) ===== */
.ft-legal-sp { text-align: center; margin: 0 0 14px; }
.ft-legal-row {
  display: inline-flex;
  gap: 12px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  font-size: .8rem;
}
.ft-legal-row li { position: relative; white-space: nowrap; }
.ft-legal-row li + li { padding-left: 12px; }
.ft-legal-row li + li::before {
  content: "｜";
  position: absolute; left: 0; color: #fff;
}
.ft-legal-row a { color: #fff; text-decoration: none; }
.ft-legal-row a:hover { text-decoration: underline; }

.site-footer .ft-legal-sp .ft-legal-row {
  display: inline-flex;
  align-items: center !important;
  gap: 12px;
}

.site-footer .ft-legal-sp .ft-legal-row li {
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap;
}

/* 既存の「｜」テキストは完全に無効化 */
.site-footer .ft-legal-sp .ft-legal-row li + li::before {
  content: none !important;
  display: none !important;
}

/* 既存の余白は維持（見た目を崩さない） */
.site-footer .ft-legal-sp .ft-legal-row li + li {
  padding-left: 12px !important;
  margin-left: 0 !important;
}

/* 文字ではなく“線”で区切り（常に中央） */
.site-footer .ft-legal-sp .ft-legal-row li + li::after {
  content: "" !important;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%) !important;
  width: 1px;
  height: 1.05em; /* 長い/短い時は 0.95〜1.15em に調整 */
  background: rgba(255,255,255,.85);
}

/* 端末差対策：行高を固定してズレ防止 */
.site-footer .ft-legal-sp .ft-legal-row a {
  display: inline-block;
  line-height: 1 !important;
  padding: 6px 0; /* 触りやすさUP */
}

.site-footer .ft-legal-sp .ft-legal-row:nth-of-type(3){
  margin-top: 16px !important; /* 14–24でお好み調整 */
}

 /* 横スクロール防止（フルブリードの副作用対策） */
 html, body{
   overflow-x: hidden;
 }

 /* SPでの見え方微調整（任意） */
 .slider{
   height: 90vh;          /* 画面高に合わせる。長すぎるなら 80–90vh で調整 */
   min-height: 520px;     /* 低すぎ防止の下限 */
 }

 .slide{
   background-position: center 35%; /* 顔や主役を少し上寄せ（画像に合わせて微調整） */
 }
  
  .split {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .table-grid {
    grid-template-columns: 1fr;
  }

  #campaign .campaign-wrap{
    padding: 28px 16px 20px;
    border-radius: 20px;
  }
      
  #campaign .campaign-grid{
    grid-template-columns:1fr;
    gap: 16px;
  }
      
  #campaign .badge{
    width:48px;height:48px;
    }

/* ===============================
   スマホ規約
   =============================== */
   .hero-visual {
    height: 60vh;
    min-height: 360px;
  }

  .hero-visual .hero-title {
    font-size: 1.5rem;
    line-height: 1.3;
  }

  .hero-visual p {
    font-size: 1.2rem;
    margin-top: 0;
  }

  .hero-visual .hero-content {
    gap: 0.5rem;
  }

  /* 規約ページだけ小さく*/
  .hero-tokusho .hero-content p {
    font-size: 1rem; /* スマホはさらに少し小さく */
  }

.article-section {
  padding: 40px 15px;
  font-size: 0.95rem;
}

.article-title {
  font-size: 1.4rem;
  margin-bottom: 2rem;
  padding-bottom: 0.6rem;
}

.article-block h2 {
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
}

.article-block h2 .num {
  min-width: 1.6rem;
  height: 1.6rem;
  line-height: 1.6rem;
  font-size: 0.85rem;
  margin-right: 0.6rem;
}

.article-block p {
  font-size: 0.95rem;
  line-height: 1.8;
}


.article-block ul li {
  font-size: 0.95rem;
  line-height: 1.8;
}

.update-date {
  font-size: 0.85rem;
}
}
  
@media (min-width: 841px) {
  .nav {
    position: static;  /* PCでは固定解除 */
    display: flex;
    flex-direction: row; /* 横並び */
    align-items: center;
    justify-content: flex-end; /* 右寄せ or leftにしたければ flex-start */
    background: none;
    max-height: none;
    opacity: 1;
    pointer-events: auto;
    gap: 2rem; /* 項目同士の間隔を調整 */
  }

  .nav a {
    font-size: 0.95rem;
    white-space: nowrap; /* ← 改行を防ぐ */
  }

  .nav-logo {
    display: none; /* PCではメニュー内ロゴ非表示 */
  } 

  .footer-stack > .ft-legal.pc-only {
    display: block !important;
    width: 100%;
  }
  
  /* 中の項目は横並びのまま */
  .footer-stack > .ft-legal.pc-only li {
    display: inline-block;
  }
}


/* =========================================================
コラムの記事ページ（メインビジュアルは規約、ニュースと統一）
   ========================================================= */
/* =========================
   スマホ用タイプサイズ調整
   ここを触れば本文のサイズ感だけ個別に変えられます
   ========================= */
@media (max-width: 840px){
  .post{ 
    padding: 40px 0 28px; 
  }

  .post-title{ 
    font-size: 1.2rem;   /* 少し小さく */
    line-height: 1.3;
  }

  .post-toc{ 
    margin: 10px auto 14px; 
  }

  /* ▼本文の文字サイズ（SP） */
  .post-body .post-section p{ 
    font-size: 1rem; 
    line-height: 2.0; 
  }

  .post-body .post-section h2{ 
    font-size: 1.15rem; 
  }

  .post-section h3{ 
    font-size: 1rem; 
  }

  .post-section{ 
    padding: 24px 0 6px; 
  }
}

/* ====== 求人フォーム共通（ピラティス） ====== */
.job-pilates .form-wrap {
  max-width: 870px;
  margin: 40px auto;
  padding: 0 20px;
}
.job-pilates .job-head {
  text-align: center;
  margin: 20px auto 10px;
}
.job-pilates .job-head h1 {
  color: #394d65;
  border: none;
  font-size: 1.8em;
  margin: 0 0 .25rem 0;
}
.job-pilates .brand-uf {
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #394d65;
  font-weight: 700;
  text-align: center;
}

.job-pilates .job-note {
  background: #f9f9f9;
  border-left: 4px solid #1976d2;
  padding: 12px 16px;
  margin: 12px auto 24px;
  max-width: 870px;
  color: #333;
}
.job-pilates .job-note .hint { color:#666; font-size:.9rem; }

.job-pilates .form-grid {
  display: grid;
  gap: 16px;
}

.job-pilates .form-grid input[type="text"],
.job-pilates .form-grid input[type="email"],
.job-pilates .form-grid input[type="tel"],
.job-pilates .form-grid input[type="url"],
.job-pilates .form-grid select,
.job-pilates .form-grid textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid #cfd8dc;
  border-radius: 8px;
  background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease;
  font-size: 16px; /* iOSズーム回避 */
}
.job-pilates .form-grid textarea {
  min-height: 160px;
  line-height: 1.7;
}
.job-pilates .form-grid input:focus-visible,
.job-pilates .form-grid select:focus-visible,
.job-pilates .form-grid textarea:focus-visible {
  outline: none;
  border-color: #1976d2;
  box-shadow: 0 0 0 3px rgba(25,118,210,.15);
}

.job-pilates .form-required { color:#e53935; margin-left:.25em; font-weight:700; }
.job-pilates .form-note { font-size:.9rem; color:#666; }

/* チェックボックスを“チップ”風に */
.job-pilates .checklist {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
}
.job-pilates .checklist label {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border: 1px solid #cfd8dc; border-radius: 999px;
  background:#fff; cursor:pointer; user-select:none;
  transition: border-color .2s ease, background .2s ease;
}
.job-pilates .checklist label:hover { border-color:#90caf9; background:#f7fbff; }
.job-pilates .checklist input[type="checkbox"] { accent-color:#1976d2; }

/* セレクトの縦幅を広げる（スマホでも統一） */
.job-pilates .select-lg {
  -webkit-appearance: none; appearance: none;
  height: 48px;
  padding: 10px 40px 10px 12px;
  border: 1px solid #cfd8dc; border-radius: 8px; background:#fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%231976d2' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px;
}

/* ファイル入力（最小） */
.job-pilates input[type="file"] { padding: 8px 0; }

/* 送信ボタン */
.job-pilates .form-actions { margin-top: 8px; }
.job-pilates .button {
  display:inline-block; padding:12px 24px; background:#1976d2; color:#fff;
  text-decoration:none; border-radius:8px; font-weight:700; border:none;
}
.job-pilates .button:hover { background:#1565c0; }

/* ===== Thanks page (Pilates) ===== */
:root {
  --header-h: 70px; /* ← ヘッダーの実高さに合わせて調整 */
}
.thanks-page .thanks-wrap {
  margin-top: calc(var(--header-h) + 24px); /* ヘッダー分 + 既存マージン */
}

.thanks-wrap{
  max-width: 900px;
  padding: 0 20px;
  text-align: left;
}

.thanks-title{
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.3;
  color: #333;           /* 会社サイトのブランド青 */
  margin: 0 0 18px;
  letter-spacing: .02em;
  position: relative;
  display: inline-block;
}

.thanks-lead{
  color: #333;
  line-height: 1.9;
  font-size: 1.05rem;
  margin: 0 auto 28px;
}
.thanks-lead strong{
  color: #333;           /* 少し濃い青で強調 */
  font-weight: 800;
}

/* アクションボタン（※ここから下だけ差し替え） */
.thanks-actions{
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}

/* 専用ボタンベース */
.thanks-wrap .tbtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:240px;
  padding:12px 20px;
  border-radius:999px;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1;
  border:2px solid transparent;
  transition:transform .05s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  box-shadow:0 6px 16px rgba(25,118,210,.18);
}

/* 塗りボタン */
.thanks-wrap .tbtn--filled{
  background:#1976d2;
  color:#fff;
}
.thanks-wrap .tbtn--filled:hover{
  background:#1565c0;
}

/* アウトライン */
.thanks-wrap .tbtn--outline{
  background:#fff;
  color:#1976d2;
  border-color:#1976d2;
  box-shadow:0 4px 12px rgba(0,0,0,.06);
  margin-bottom: 3rem;
}
.thanks-wrap .tbtn--outline:hover{
  background:#f8fbff;
  border-color:#1565c0;
  color:#1565c0;
}

/* 共通のフォーカス・押下 */
.thanks-wrap .tbtn:active{ transform:translateY(1px); }
.thanks-wrap .tbtn:focus-visible{
  outline:none;
  box-shadow:0 0 0 4px rgba(25,118,210,.18);
}

@media (min-width: 841px) {
  .thanks-wrap{
    text-align: center;          /* ←既存そのまま */
    /* ここから追加 */
    max-width: 960px;            /* 900–1000px お好みで。例では 960px */
    width: min(100%, 960px);     /* 画面が狭い時は自動で縮む */
    margin-left: auto;           /* 中央寄せ */
    margin-right: auto;          /* 中央寄せ */
    padding-left: 20px;          /* 既存の余白を維持 */
    padding-right: 20px;
    box-sizing: border-box;      /* パディング分でズレないように */
  }
}