/* sub-page.css — サブページ共通骨格（about / service / meetup / contact）
 * ページ固有の見た目は about.css / service.css / meetup.css / contact.css。
 * styles.css 末尾にも sub-page 用の最小セット（footer 固定など）がある。
 */

/* ページ全体の背景 */
body.sub-page {
  background: linear-gradient(180deg, #f5f8ff 0%, var(--bg) 38%, var(--bg) 100%);
}

/* -------------------------------------------------------------------------- *
 * ヘッダー（.detail-header）
 * index の .header と同じトークンを使い、サブページ用に色を白系へ寄せる
 * -------------------------------------------------------------------------- */

.detail-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* --nav-header-bg は gradient なので background-color ではなく shorthand（background） */
  background: var(--nav-header-bg);
  box-shadow: var(--nav-chrome-shadow);
}

.detail-header .logo,
.detail-header .logo-name,
.detail-header .nav-links a {
  color: rgba(255, 255, 255, 0.92);
}

.detail-header .logo-name:hover {
  color: #fff;
  font-weight: 700;
}

.detail-header .nav-links a {
  display: inline-block;
  transition: color 0.2s ease, scale 0.2s ease;
}

.detail-header .nav-links a:hover {
  color: #fff;
  font-weight: 700;
}

.detail-header .logo:hover .logo-name {
  color: #fff;
}

.detail-header .nav {
  height: 56px;
}

/* ロゴのスタイル */
.detail-header .logo {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

/* 「← HOME に戻る」 */
.detail-header .detail-back {
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: color 0.2s ease;
}

.detail-header .detail-back:hover {
  color: #fff;
}

.detail-header .logo-name {
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
}

/*
 * PC: オーバーレイ枠を「なかったこと」にする（中の ul が横並びの flex 子になる）。
 * SP: 下の @media で display:flex に切り替え、全画面メニューにする。
 * ※ .sub-page 付きで詳細度を上げ、styles.css の .nav-mobile-overlay より優先する。
 */
.sub-page .nav-mobile-overlay {
  display: contents;
}

/* ハンバーガー（線は白。ダーク緑ヘッダー上で見えるように styles.css 側を上書き） */
.sub-page .nav-toggle {
  display: none; /* PC では隠す。SP で flex 表示 */
  position: relative;
  z-index: 2;
  width: 44px;
  height: 44px;
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.sub-page .nav-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

.sub-page .nav-toggle-line {
  position: absolute;
  left: 10px;
  right: 10px;
  height: 2px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 1px;
  transition: transform 0.28s ease, top 0.28s ease, background 0.2s ease;
}

.sub-page .nav-toggle-line:nth-child(1) {
  top: 16px;
}

.sub-page .nav-toggle-line:nth-child(2) {
  top: 26px;
}

/* 開いたとき：2本の線で × を作る */
.sub-page .nav-toggle.is-open .nav-toggle-line:nth-child(1) {
  top: 21px;
  transform: rotate(45deg);
}

.sub-page .nav-toggle.is-open .nav-toggle-line:nth-child(2) {
  top: 21px;
  transform: rotate(-45deg);
}

/* -------------------------------------------------------------------------- *
 * 本文まわり
 * -------------------------------------------------------------------------- */

.normal-list {
  list-style: disc;
  padding-left: 20px;
  font-size: 0.9rem;
  line-height: 2;
  margin-top: 20px;
  margin-bottom: 40px;
}

/* 本文中の通常リンク色（.btn-cta などは styles.css 側の指定が勝つ） */
a {
  color: blue;
}

.sub-page-block {
  padding-top: 60px; /* ブロック間の区切り余白 */
}

/* 小見出し（左の縦ライン付き） */
.sub-title-common {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text);
  margin-top: 64px;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.sub-title-common::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 2rem;
  background: var(--accent-grad-line-v);
  margin-right: 10px;
  vertical-align: bottom;
}

/* 緑系アクセント版（SERVICE / CONTACT の一部見出し） */
.sub-title-common-2::before {
  background: var(--accent-grad-2);
}

/* サブページ内の入場アニメ速度（styles.css の :root 値を上書き） */
.sub-page .sub-page-block .reveal-on-scroll {
  --reveal-duration: 2s;
  --reveal-delay: 0.1s;
}

/* -------------------------------------------------------------------------- *
 * Block A: テキスト + 写真の2カラム
 * -------------------------------------------------------------------------- */

.side-by-side-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr; /* 左テキスト : 右写真（写真側をやや広く） */
  gap: 60px;
  align-items: center;
}

/* .is-reversed … 見た目の左右を入れ替え（写真を左・テキストを右） */
.side-by-side-grid.is-reversed {
  grid-template-columns: 1.2fr 1fr;
}

.side-by-side-grid.is-reversed .grid-text-part {
  order: 2;
}

.side-by-side-grid.is-reversed .grid-photo-part {
  order: 1;
}

/* 通常: 2番目（写真側）の入場を遅らせる */
.side-by-side-grid > *:nth-child(2) {
  --reveal-delay: 0.8s;
}

/* 反転時: DOM 1番目が写真になるので、そちらを遅らせる */
.side-by-side-grid.is-reversed > *:nth-child(1) {
  --reveal-delay: 0.8s;
}

.side-by-side-grid.is-reversed > *:nth-child(2) {
  --reveal-delay: 0.1s;
}

/*
 * .reveal-order-reversed … レイアウト（左右）はそのまま。
 * アニメで「どちらが先に出るか」だけ入れ替える。
 * .is-reversed（見た目の左右入替）とは別物。両方同時に付けてもよい。
 */
.side-by-side-grid.reveal-order-reversed > *:nth-child(1) {
  --reveal-delay: 0.1s;
}

.side-by-side-grid.reveal-order-reversed > *:nth-child(2) {
  --reveal-delay: 0.8s;
}

/* -------------------------------------------------------------------------- *
 * Block B: 詳細テーブル（COMMUNITY / サポート一覧など）
 * -------------------------------------------------------------------------- */

.detail-table {
  width: 100%;
  border-collapse: collapse;
}

.detail-table tr {
  border-bottom: 1px solid #000;
}

.detail-table th {
  width: 250px;
  text-align: left;
  padding: 32px 32px 32px 0; /* 右余白で th と td が詰まらないようにする */
  color: var(--text-muted);
  font-weight: 500;
}

.detail-table td {
  padding: 32px 0;
}

/* -------------------------------------------------------------------------- *
 * 768px 以下
 * -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .detail-header .logo {
    min-width: auto;
  }

  /* ロゴ横テキストを消してヘッダーをコンパクトに */
  .detail-header .logo-name {
    display: none;
  }

  .sub-page .nav-toggle {
    display: flex;
  }

  /* PC用の display:contents を解除し、全画面メニューにする */
  .sub-page .nav-mobile-overlay {
    display: flex;
  }

  .u-sp-only {
    display: block;
  }

  /* 2カラム → 1列。写真を上・テキストを下 */
  .side-by-side-grid,
  .side-by-side-grid.is-reversed {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .grid-text-part {
    order: 2;
  }

  .grid-photo-part {
    order: 1; 
  }

  /*
   * 通常のラベル|値テーブルだけを Grid 化（MEMBERS は除外）。
   * .sub-page 付きで詳細度を上げ、service-support-list の th 幅などと !important なしで勝つ。
   */
  .sub-page .detail-table:not(.members-table) tr {
    display: grid;
    grid-template-columns: 6em 1fr; /* 左ラベル約6文字分 */
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--accent-border);
  }

  .sub-page .detail-table:not(.members-table) th,
  .sub-page .detail-table:not(.members-table) td {
    display: block;
    width: auto;
    padding: 0;
    border: none;
    text-align: left;
  }

  .sub-page .detail-table:not(.members-table) th {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 500;
  }

  .sub-page .detail-table:not(.members-table) td {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--ink-on-white);
  }

  /* 最後の行の下線を消して二重線っぽさを防ぐ */
  .sub-page .detail-table:not(.members-table) tr:last-child {
    border-bottom: none;
  }
}