@charset "utf-8";

/* 支部紹介・入会案内CSS */

/* wrapper-道場をPCのみで表示 */
@media screen and (min-width: 769px) {
  /* 共通スタイル */
  .wrapper-sihan,
  .wrapper-nyukai {
    border-left: 2px solid #9abce4;
    border-right: 2px solid #9abce4;
    border-top: none;
    border-bottom: none;
    max-width: 900px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-repeat: no-repeat;
    background-position: top;
  }

  /* 個別の背景画像 */
  .wrapper-sihan {
    background-image: url(photo_top/title_sihan.jpg);
  }

  .wrapper-nyukai {
    background-image: url(photo_top2/title_nyukai.jpg);
  }
}
/* wrapper-道場をPCのみで表示 おわり*/

/* 青線 */

hr.style3 {
  width: 80%;
  height: 3px;
  background-color: #3399cc;
  border: none;
}

/* P赤字 */

.red {
  color: #ff0000;
}

/* ===============================
   ページタイトル
   =============================== */
.page-title {
  font-size: 28px;
  font-weight: 600;
  text-align: left;
  color: #666;
  border-left: 8px solid #4c9ac0;
  position: relative; /* ← ずれ防止必須 */
  margin: 0 0 20px;
  line-height: 1.2; /* ← 文字高さを少し締める */
  letter-spacing: 0.05em;
  padding: 0.1em 0 0.3em 0.5em;
}

.page-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-bottom: 2px dashed #b4b4b4;
}

/* ===== 見出し ===== */
.page-topics {
  font-size: 18px;
  color: #666;
  border-bottom: none;
  width: auto;
  border-left: 10px double #4c9ac0;
  padding: 0 0.5em; /* ← 上下ゼロにする */
  line-height: 1.3;
}

/* ===== スマホ見え方微調整 ===== */
@media screen and (max-width: 768px) {
  .page-title {
    font-size: 21px; /* ← 少し大きめ */
    margin-top: 20px; /* ← 上余白しっかり */
    margin-bottom: 20px; /* ← 下も少し広げる */
  }
}

/* ===============================
   道場紹介ページの親要素BOX
   =============================== */

.sihan-wrapper {
  max-width: 600px;
  width: 100%;
  margin: 25px auto 0;
  padding: 30px;
  background-color: #fff;
  box-sizing: border-box;
}

/* ===============================
   支部長・指導員紹介
   =============================== */

/* ===============================
   イントロ文章
   =============================== */
.intro-text {
  max-width: 820px;
  margin: 20px auto;
  padding: 0 10px;
  font-size: 14px;
}

/* 全体エリア section*/
.staff {
  width: 100%;
  margin: 0 auto;
  padding: 5px 0;
  background-color: #fff;
}

.staff-leader p,
.staff-card p,
.intro-text {
  line-height: 1.7;
  letter-spacing: 0.02em;
}

/* 支部長エリア */
.staff-leader {
  margin-bottom: 40px;
  background-color: #fff;
}

/* float解除用（高さ崩れ防止） */
.staff-leader::after {
  content: "";
  display: block;
  clear: both;
}

/* 写真を右に配置 */
.staff-leader .leader-photo {
  float: right;
  max-width: 250px;
  height: auto;
  margin: 0 0 5px 10px; /* 下と左に余白 */
}

/* 指導員エリア */
.staff-instructors {
  display: flex;
  gap: 30px;
  justify-content: center;
  margin-top: 40px;
  background-color: #fff;
}

.staff-card {
  width: 280px;
  text-align: left;
}

.staff-card img {
  width: 100%;
  height: auto;
  margin-top: 10px;
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .staff-leader .leader-photo {
    float: none;
    display: block;
    width: 100%;
    max-width: 350px;
    margin: 0 auto 20px;
  }

  .staff-instructors {
    flex-direction: column;
    align-items: center;
  }

  .staff-card {
    width: 100%;
    max-width: 350px;
  }
}

/* ===============================
   入会案内の親要素BOX
   =============================== */

.nyukai-wrapper {
  max-width: 600px;
  width: 100%;
  margin: 25px auto 0;
  padding: 30px;
  background-color: #fff;
  box-sizing: border-box;
}

/* ===============================
   おすすめポイント
   =============================== */

.recommend-box {
  margin: 30px 0;
  display: flex;
  gap: 15px;
}

.recommend-item {
  flex: 1;
  border: 2px solid #ffc9b8; /* 少し濃いピーチ枠 */
  background: #fff4ef; /* 明るいピーチ背景 */
  padding: 15px;
  text-align: center;
  border-radius: 30px; /* 角丸 */
  font-size: 14px; /* 少し小さめに */
  line-height: 1.5;
  font-weight: 500;
  box-sizing: border-box; /* ← 幅計算を安定させる */
}

.recommend-item strong {
  font-size: 15px;
  display: block;
  margin-bottom: 4px;
}

/* ===== スマホ２段分け ===== */
@media screen and (max-width: 768px) {
  .recommend-box {
    flex-wrap: wrap; /* ← 折り返し可能にする */
    justify-content: center; /* ← 中央寄せ */
    gap: 12px;
  }

  .recommend-item {
    flex: 0 0 calc(50% - 6px); /* 2列安定 */
  }

  .recommend-item:first-child {
    flex: 0 0 50%; /* 1段目フル幅 */
  }
}

/* ===============================
   会費レイアウト
   =============================== */

.fee-table {
  width: 100%;
  overflow-x: auto;
  margin: 10px 0;
}

.fee-table table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.fee-table th {
  letter-spacing: -0.05em;
} /* ===== 見出し文字間隔詰め ===== */

.fee-table th .small {
  font-size: 12px;
  font-weight: 400;
}

.fee-table th,
.fee-table td {
  border: 1px solid #acacff;
  padding: 8px;
}

.fee-table thead {
  background-color: #f0f2ff;
}

/* ===============================
   スマホ対応：fee-table タブ型表示
   =============================== */
@media screen and (max-width: 768px) {
  /* ▼ テーブルをブロック表示にして縦並びにする */
  .fee-table table,
  .fee-table thead,
  .fee-table tbody,
  .fee-table th,
  .fee-table td,
  .fee-table tr {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  /* ▼ PC用のヘッダーは非表示にする */
  .fee-table thead {
    display: none;
  }

  /* ▼ tr は relative にして .dojo-title の基準にする
        padding-top でタブの高さ分のスペースを確保 */
  .fee-table tr {
    position: relative;
    margin-bottom: 20px; /* 下余白（行間） */
    padding-top: 35px; /* ← タブ高さ分 */
  }

  /* ▼ 道場名タブ */
  .fee-table .dojo-title {
    position: absolute; /* tr 内で絶対配置 */
    top: 0; /* tr の padding-top に合わせる */
    left: 0;
    width: 60%; /* 左側の幅を固定 */
    background: #acacff;
    color: #fff;
    font-weight: bold;
    text-align: center;
    padding: 4px 0; /* タブの高さ */
    border-radius: 12px 12px 0 0; /* 上角丸だけ */
    z-index: 2; /* td より前に表示 */
  }

  /* ▼ td はブロック表示でラベルを左に表示 */
  .fee-table td {
    border: none;
    text-align: left;
    padding-top: 4px;
    padding-bottom: 4px;
    position: relative; /* ::before 基準 */
    padding-left: 65%; /* ラベル分の左スペース */
    z-index: 1; /* タブの下に表示 */
  }

  /* ▼ td の前にラベルを表示 */
  .fee-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 25px; /* ← 左余白 */
    width: 65%;
    font-weight: 400;
    white-space: pre-line;
    line-height: 1.2;
  }

  /* ▼ th はブロックでも左寄せ */
  .fee-table th {
    text-align: left;
    border: none;
    padding-bottom: 8px;
  }

  /* ▼ tr の下に枠を作る場合（任意） */
  .fee-table tr::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 44px; /* tr padding-top と同じ値 （実際は少し変えた）*/
    border: 1px solid #acacff;
    box-sizing: border-box;
    z-index: 0; /* タブと td より下 */
  }
}

/* ===== 会費テーブル内の文字だけ (スマホベース）===== */

.fee-table {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px; /* ベースのフォントサイズ */
  color: #333;
  line-height: 1.3;
}
/* 表タイトル部分 */
.fee-table th {
  font-weight: 400;
  font-size: 14px;
  color: #333;
}
/* 下の項目部分 */
.fee-table td {
  font-weight: 500;
  font-size: 14px; /* 金額だけ少し強調 */
  letter-spacing: 0.5px; /* 円の文字を少し締めたいなら */
  margin-top: 10px;
}

/* ===== 会費テーブル内の文字だけ（PC表示）===== */
@media screen and (min-width: 769px) {
  .fee-table {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 15px;
    color: #333;
    line-height: 1.3;
  }

  .fee-table th {
    font-weight: 400;
    font-size: 14px;
    color: #333;
  }

  .fee-table td {
    font-weight: 400;
    font-size: 16px; /* 金額だけ少し強調 */
    letter-spacing: 0.5px; /* 円の文字を少し締めたいなら */
  }
}
/* PC非表示、スマホ表示用学生説明ラッパー （現在使用してない）*/
.gakusei {
  display: none; /* デフォルトは非表示（PC） */
}

@media screen and (max-width: 768px) {
  .gakusei {
    display: block; /* スマホで表示 */
    margin-bottom: 10px;
  }
}

/* ===============================
    ファミリー割引・年会費 INFOボックス 
   =============================== */

.info {
  max-width: 600px;
  margin: 30px auto;
  border: 2px solid #acacff;
  border-radius: 8px;
  background-color: #f7f8ff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  font-family: "Noto Sans JP", sans-serif;
}

/* タイトル部分 */
.info-title {
  background-color: #acacff;
  color: #fff;
  font-weight: bold;
  text-align: center;
  padding: 12px;
  font-size: 18px;
  letter-spacing: -0.03em;
}

/* 本文部分 */
.info-body {
  padding: 18px;
  font-size: 15px;
  line-height: 1.8;
  color: #333;
}

/* ===== スマホ ===== */
@media screen and (max-width: 768px) {
  .info {
    width: 92%;
    margin: 20px auto;
  }

  .info-title {
    font-size: 16px;
    padding: 10px;
  }

  .info-body {
    font-size: 14px;
    padding: 15px;
  }
}

/* ===============================
    始めに用意するものリスト 
   =============================== */

/* 入会案内 箇条書きはみ出し防止 */
.nyukai-list {
  margin: 15px 0 15px 3em; /* 3emで左に少しだけ余白 */
  padding: 0;
  box-sizing: border-box;
}

.nyukai-list li {
  margin-bottom: 4px; /* ← 下余白も少し縮める */
  line-height: 1.4; /* ← 行間を締める */
  word-break: break-word; /* スマホではみ出し防止 */
}

.nyukai-list li.no-bullet {
  list-style: none; /* 点を消す */
  padding-left: 0; /* 位置ズレ補正 */
}

/* ===============================
    改行制御　一番下におくこと 
   =============================== */

/* 改行制御1　デフォルトは非表示 　<span class="sp-br"></span> 　*/
.sp-br {
  display: none;
}
/* 改行制御2　スマホだけ表示 */
@media screen and (max-width: 768px) {
  .sp-br {
    display: block; /* br をスマホだけ表示 */
  }
}