/*
 * article.css
 * 記事ページ（single.php / page.php）専用スタイル
 * style.css の :root 変数を継承して使用します
 */

/* ============================================================
   PAGE WRAPPER（2カラムレイアウト）
   ============================================================ */
.page-wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 70px 24px 80px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 0 40px;
  align-items: start;
}

/* ============================================================
   パンくずリスト
   ============================================================ */
/*
.breadcrumb {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.72rem;
  color: var(--mid);
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--mid); }
.breadcrumb a:hover { color: var(--green); text-decoration: none; }
.breadcrumb span { color: #bbb; }
*/
.breadcrumb {
  grid-column: 1 / -1;
  display: block;
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--mid);
  margin-bottom: 8px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.breadcrumb a,
.breadcrumb span {
  display: inline;
}

.breadcrumb a {
  white-space: nowrap;
}

/* HTML内の "/" 用spanを非表示 */
.breadcrumb > span:first-of-type {
  display: none;
}

/* 最後のタイトルの前に区切りを出す */
.breadcrumb > span:last-of-type::before {
  content: " › ";
  color: var(--mid);
}

/* ============================================================
   記事ヘッダー
   ============================================================ */
.article-main { min-width: 0; }

.article-header { margin-bottom: 28px; }

.article-meta-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.article-cat {
  background: var(--gradient);
  color: var(--white);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 12px;
  border-radius: 3px;
  font-family: 'Barlow Condensed', sans-serif;
}

.article-updated {
  font-size: 0.7rem;
  color: var(--mid);
}

.article-pr {
  font-size: 0.65rem;
  color: #aaa;
  background: #f0f0f0;
  padding: 3px 8px;
  border-radius: 3px;
}

.article-title {
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  font-weight: 900;
  line-height: 1.45;
  color: var(--dark);
  letter-spacing: -0.01em;
  margin-bottom: 20px;
}

/* アイキャッチ画像 */
.article-eyecatch {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 5px; /*24px*/
  aspect-ratio: 16 / 9;
  background: #ddd;
}
.article-eyecatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   監修者ボックス
   ============================================================ */
.supervisor-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--green-pale);
  border: 1px solid rgba(34, 168, 69, 0.2);
  border-left: 4px solid var(--green);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 32px;
}

.supervisor-img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #ccc;
}

.supervisor-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
}

.supervisor-desc {
  font-size: 0.72rem;
  color: var(--mid);
  line-height: 1.7;
}

.supervisor-policy {
  font-size: 0.68rem;
  color: var(--mid);
  margin-top: 6px;
}

.supervisor-policy a { color: var(--green-dark); }

/* ============================================================
   目次（Table of Contents）
   ============================================================ */
.toc {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--green);
  border-radius: 6px;
  padding: 24px 28px;
  margin-bottom: 48px;
}

.toc-title {
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--dark);
  letter-spacing: 0.06em;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toc-title::before {
  content: '';
  width: 14px;
  height: 14px;
  background: var(--gradient);
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}

.toc ol {
  list-style: none;
  counter-reset: toc-cnt;
  padding: 0;
}
.toc ol li {
  counter-increment: toc-cnt;
  padding: 4px 0;
}
.toc ol li a {
  font-size: 0.8rem;
  color: var(--green-dark);
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.5;
  text-decoration: none;
}
.toc ol li a::before {
  content: counter(toc-cnt);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.65rem;
  font-weight: 900;
  background: var(--green-pale);
  color: var(--green-dark);
  width: 18px;
  height: 18px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.toc ol li a:hover { text-decoration: underline; }

/* 入れ子リスト */
.toc ol ol {
  padding-left: 26px;
  counter-reset: toc-cnt;
}
.toc ol ol li a {
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--mid);
}
.toc ol ol li a::before {
  content: '–';
  background: transparent;
  color: var(--border);
  font-size: 0.8rem;
}

/* ============================================================
   記事本文（article-body）
   ============================================================ */
.article-body {
  font-size: 0.92rem;
  color: var(--dark);
  line-height: 1.9;
}

/* --- 見出し H2 --- */
.article-body h2 {
  font-size: 1.25rem;
  font-weight: 900;
  line-height: 1.4;
  margin: 56px 0 20px;
  padding: 16px 20px 16px 22px;
  background: var(--dark);
  color: var(--white);
  border-radius: 6px;
  border-left: 5px solid var(--green);
  position: relative;
}
.article-body h2::after {
  content: '';
  position: absolute;
  left: 22px;
  bottom: -10px;
  border: 6px solid transparent;
  border-top-color: var(--dark);
}

/* --- 見出し H3 --- */
.article-body h3 {
  font-size: 1.08rem;
  font-weight: 900;
  line-height: 1.45;
  margin: 40px 0 16px;
  padding: 0 0 10px 16px;
  color: var(--dark);
  border-left: 4px solid var(--green);
  border-bottom: 1px solid var(--border);
}

/* --- 見出し H4 --- */
.article-body h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark);
  margin: 28px 0 10px;
  padding: 8px 14px;
  background: var(--green-pale);
  border-radius: 4px;
  border-left: 3px solid var(--green);
}

/* --- 段落 --- */
.article-body p { margin-bottom: 10px; }
.article-body p:last-child { margin-bottom: 0; }

/* --- 強調 --- */
.article-body strong { font-weight: 700; }
.article-body em { color: var(--green-dark); font-style: normal; font-weight: 700; }

/* --- リスト --- */
.article-body ul,
.article-body ol {
  margin: 0 0 20px 0;
  padding: 16px 20px 16px 36px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.article-body ul li,
.article-body ol li {
  margin-bottom: 6px;
  font-size: 0.88rem;
  line-height: 1.7;
}
.article-body ul { list-style: none; padding-left: 20px; }
.article-body ul li::before {
  content: '▶';
  color: var(--green);
  font-size: 0.55rem;
  margin-right: 8px;
  vertical-align: middle;
}

/* --- 記事内画像 --- */
.article-body figure { margin: 28px 0; }
.article-body figure img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.article-body figcaption {
  text-align: center;
  font-size: 0.72rem;
  color: #aaa;
  margin-top: 8px;
}

/* ============================================================
   ジム紹介カード（.gym-card）
   ============================================================ */
.gym-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin: 32px 0 40px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* カードヘッダー */
.gym-card-header {
  background: var(--dark);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.gym-card-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--green);
  line-height: 1;
  flex-shrink: 0;
}
.gym-card-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1.4;
}
.gym-card-tag {
  margin-left: auto;
  background: var(--gradient);
  color: var(--white);
  font-size: 0.58rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 3px;
  white-space: nowrap;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.06em;
}

/* カード画像 */
.gym-card-img {
  width: 100%;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: #eee;
}

@media (max-width: 767px){
	.gym-card-img {
	  aspect-ratio: 9 / 6;　/* 16 / 9 */
	 }
 }

.gym-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* カード本文 */
.gym-card-body { padding: 12px; }

.gym-card-desc {
  font-size: 0.88rem;
  line-height: 1.85;
  color: var(--dark);
  margin-bottom: 20px;
}

/* CTAボタン */
.gym-cta-btn {
  display: block;
  text-align: center;
  background: var(--gradient);
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 14px 20px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 4px 16px rgba(34, 168, 69, 0.3);
  margin: 16px 0;
  text-decoration: none;
}
.gym-cta-btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--white);
}

/* タブUIラベル */
.gym-tabs {
  display: flex;
  border-bottom: 2px solid var(--border);
  gap: 2px;
  flex-wrap: wrap;
}
.gym-tab-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--mid);
  padding: 8px 14px;
  background: var(--light-bg);
  border-radius: 4px 4px 0 0;
  border: 1px solid var(--border);
  border-bottom: none;
  cursor: default;
}
.gym-tab-label.active {
  background: var(--dark);
  color: var(--green-light);
  border-color: var(--dark);
}

/* 情報テーブル */
.gym-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.gym-table tr { border-bottom: 1px solid var(--border); }
.gym-table tr:last-child { border-bottom: none; }
.gym-table th {
  width: 36%;
  padding: 11px 14px;
  font-weight: 700;
  color: var(--mid);
  background: var(--light-bg);
  text-align: left;
  vertical-align: top;
  font-size: 0.78rem;
}
.gym-table td {
  padding: 11px 14px;
  color: var(--dark);
  vertical-align: top;
  line-height: 1.6;
}

/* タブパネル */
.gym-tab-panel {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
}
.gym-plan-text {
  padding: 16px 16px 4px;
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--dark);
}

/* おすすめユーザー層リスト */
.gym-recommend-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
}
.gym-recommend-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--dark);
}
.gym-recommend-list li:last-child { border-bottom: none; }
.gym-recommend-list li::before {
  content: '✓';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-size: 0.6rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ============================================================
   比較カード（3択グリッド）
   ============================================================ */
.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}
.compare-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.compare-card-rank {
  background: var(--dark);
  color: var(--green-light);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.65rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-align: center;
  padding: 6px;
  text-transform: uppercase;
}
.compare-card-body { padding: 16px; flex: 1; }
.compare-card-name {
  font-size: 0.88rem;
  font-weight: 900;
  color: var(--dark);
  margin-bottom: 8px;
}
.compare-card-desc {
  font-size: 0.75rem;
  line-height: 1.65;
  color: var(--mid);
  margin-bottom: 12px;
}
.compare-card-ratings {
  border-top: 1px solid var(--border);
  padding-top: 10px;
  margin-top: auto;
}
.compare-mini-rating {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--mid);
  padding: 3px 0;
  border-bottom: 1px solid #f0f0f0;
}
.compare-mini-rating:last-child { border-bottom: none; }
.compare-mini-val {
  font-weight: 700;
  color: var(--green-dark);
  font-family: 'Barlow Condensed', sans-serif;
}
.compare-card-btn {
  display: block;
  text-align: center;
  background: var(--gradient);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 10px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.compare-card-btn:hover { opacity: 0.85; text-decoration: none; color: var(--white); }

/* ============================================================
   STEPボックス
   ============================================================ */
.step-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 20px 20px 72px;
  margin: 20px 0;
  position: relative;
}
.step-box-num {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--green);
  line-height: 1;
  width: 44px;
  text-align: center;
}
.step-box-title {
  font-size: 0.92rem;
  font-weight: 900;
  color: var(--dark);
  margin-bottom: 8px;
}
.step-box-text {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.75;
}

/* ============================================================
   価格帯ボックス
   ============================================================ */
.price-box {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin: 20px 0;
}
.price-box-header {
  background: var(--dark);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.price-box-range {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--green);
}
.price-box-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
}
.price-box-body {
  background: var(--white);
  padding: 16px 18px;
  font-size: 0.85rem;
  line-height: 1.8;
  color: var(--dark);
}

/* ============================================================
   注目ボックス（Callout）
   ============================================================ */
.callout {
  border-radius: 8px;
  padding: 18px 20px;
  margin: 24px 0;
  font-size: 0.85rem;
  line-height: 1.8;
}
.callout-green {
  background: var(--green-pale);
  border: 1px solid rgba(34, 168, 69, 0.25);
  border-left: 4px solid var(--green);
}

.callout-white {
  background: var(--white);
  border: 1px solid rgba(34, 168, 69, 0.25);
  border-left: 4px solid var(--green);
}

.callout-dark {
  background: var(--dark);
  border: 1px solid #333;
  color: rgba(255, 255, 255, 0.8);
}
.callout-dark strong { color: var(--green-light); }

.callout-title {
  font-weight: 900;
  font-size: 0.88rem;
  color: var(--dark);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.callout-title::before {
  content: '';
  width: 4px;
  height: 16px;
  background: var(--gradient);
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}
.callout-green .callout-title { color: var(--green-dark); }

/* ============================================================
   FAQアコーディオン
   ============================================================ */
.faq-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}
.faq-q {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: var(--white);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.5;
}
.faq-q-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--gradient);
  color: var(--white);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.faq-a {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px;
  background: var(--green-pale);
  border-top: 1px solid rgba(34, 168, 69, 0.15);
  font-size: 0.85rem;
  color: var(--dark);
  line-height: 1.8;
}
.faq-a-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  background: var(--white);
  border: 2px solid var(--green);
  color: var(--green-dark);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.9rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}




/* ============================================================
   関連記事（記事下部）
   ============================================================ */
.related-articles {
  margin: 40px 0 0;
  padding-top: 32px;
  border-top: 2px solid var(--border);
}
.related-title {
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 16px;
  font-family: 'Barlow Condensed', sans-serif;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.related-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.related-card:hover {
  border-color: rgba(34, 168, 69, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
.related-card-img {
  width: 72px;
  height: 54px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--light-bg);
  overflow: hidden;
}
.related-card-img img { width: 100%; height: 100%; object-fit: cover; }
.related-card-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar { position: sticky; top: 84px; }

/* ウィジェット共通 */
.sidebar-widget {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 24px;
}
.sidebar-widget-title {
  background: var(--dark);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 10px 16px;
  border-bottom: 2px solid var(--green);
  font-family: 'Barlow Condensed', sans-serif;
  text-transform: uppercase;
}

/* サイドバー目次 */
.sidebar-toc { padding: 16px; }
.sidebar-toc ol {
  list-style: none;
  counter-reset: s-toc;
  padding: 0;
}
.sidebar-toc ol li {
  counter-increment: s-toc;
  border-bottom: 1px solid var(--border);
}
.sidebar-toc ol li:last-child { border-bottom: none; }
.sidebar-toc ol li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 0.72rem;
  color: var(--dark);
  line-height: 1.4;
  text-decoration: none;
}
.sidebar-toc ol li a::before {
  content: counter(s-toc);
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.62rem;
  font-weight: 900;
  color: var(--green-dark);
  background: var(--green-pale);
  width: 16px;
  height: 16px;
  border-radius: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-toc ol li a:hover { color: var(--green-dark); }

/* サイドバー関連記事リスト */
.sidebar-related-list { padding: 12px 16px; }
.sidebar-related-item {
  display: flex;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  align-items: flex-start;
}
.sidebar-related-item:last-child { border-bottom: none; }
.sidebar-related-thumb {
  width: 56px;
  height: 42px;
  border-radius: 4px;
  background: var(--light-bg);
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar-related-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.sidebar-related-title {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sidebar-related-item:hover .sidebar-related-title { color: var(--green-dark); }

/* サイドバーCTA */
.sidebar-cta {
  background: var(--dark);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  border: 1px solid rgba(34, 168, 69, 0.3);
  margin-bottom: 24px;
}
.sidebar-cta-label {
  font-size: 0.58rem;
  color: var(--green-light);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  margin-bottom: 10px;
}
.sidebar-cta-title {
  font-size: 0.88rem;
  font-weight: 900;
  color: var(--white);
  line-height: 1.4;
  margin-bottom: 14px;
}
.sidebar-cta-btn {
  display: block;
  background: var(--gradient);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 12px;
  border-radius: 5px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.sidebar-cta-btn:hover { opacity: 0.85; color: var(--white); }

/* ============================================================
   レスポンシブ
   ============================================================ */
@media (max-width: 900px) {
  .page-wrap {
    grid-template-columns: 1fr;
    padding: /*24px*/70px 16px 60px;
  }
  .sidebar { position: static; }
  .compare-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .area-link-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .area-link-grid { grid-template-columns: repeat(2, 1fr); }
}


/* =========================
   CVボタン
========================= */
.g-cv{
  display:flex; align-items:center; justify-content:center;
  width:100%;
  min-height:52px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--green);
  color:#fff;
  font-weight: 800;
  text-decoration:none;
  box-shadow: 0 10px 20px rgba(25,177,90,.22);
  transition: transform .08s ease, filter .12s ease;
}
.g-cv:hover{ filter: brightness(.96); }
.g-cv:active{ transform: translateY(1px); }

.g-cv-note{
  margin:10px 0 0;
  font-size:12px;
  color: var(--muted);
}

.g-cv-sticky{
  position: sticky;
  bottom: 0;
  z-index: 30;
  padding: 10px 16px;
  background: linear-gradient(transparent, rgba(246,247,249,.92) 35%, rgba(246,247,249,1));
}
.g-cv--sticky{ border-radius: 12px; }


/* =========================
   監修者
========================= */
.g-supervisor{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.g-supervisor__inner{
  display:flex;
  gap:14px;
  padding:16px;
  align-items:flex-start;
}
.g-supervisor__avatar{
  width:56px; height:56px; border-radius: 999px;
  object-fit: cover;
  border:1px solid var(--g-border);
}
.g-supervisor__label{
  margin:0 0 4px;
  font-size:12px;
  font-weight:800;
  color:#fff;
  background: var(--black);
  display:inline-block;
  padding: 4px 8px;
  border-radius: 999px;
}
.g-supervisor__name{
  margin:0 0 6px;
  font-size:16px;
  font-weight: 900;
  color: var(--g-ink);
}
.g-supervisor__bio{
  margin:0;
  font-size:13px;
  color: var(--muted);
  line-height:1.6;
}

/* =========================
   ボックス
========================= */
.g-box{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--light-bg);
}
.g-box__title{
  margin:0;
  padding:12px 14px;
  background: var(--black);
  color:#fff;
  font-size:14px;
  font-weight: 900;
  letter-spacing:.02em;
}
.g-box__cols{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
}
.g-box__list{
  list-style:none;
  margin:0;
  padding:12px 14px;
  border-right:1px solid var(--border);
}
.g-box__list:last-child{ border-right:none; }

.g-box__list li{ margin: 8px 0; }
.g-box__list a{
  display:flex; align-items:center; gap:8px;
  text-decoration:none;
  color:#1f2937;
  font-weight:700;
  font-size:13px;
}
.g-box__list a::before{
  content:"";
  width:10px; height:10px;
  border-radius: 999px;
  border:2px solid var(--black);
  box-sizing:border-box;
}
.g-box__list a:hover{ color: var(--green-dark); }
.g-box__list a:hover::before{ border-color: var(--green); }

@media (max-width: 767px){
  .g-box__cols{ grid-template-columns: 1fr; }
  .g-box__list{ border-right:none; border-top:1px solid var(--border); }
  .g-box__list:first-child{ border-top:none; }
}

/* =========================
   テーブル
========================= */
.g-table{
  width:100%;
  border-collapse: separate;
  border-spacing: 0;
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
}
.g-table th, .g-table td{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  font-size:13px;
  line-height:1.5;
}
.g-table tr:last-child th, .g-table tr:last-child td{ border-bottom:none; }
.g-table th{
  width:38%;
  background: var(--light-bg);
  color:#111827;
  font-weight: 900;
}
.g-table td{ color:#111827; font-weight:700; }


/* =========================
   ジム紹介情報
========================= */
.gym-info__title{
  margin:0 0 10px;
  font-size:16px;
  font-weight: 900;
  color: var(--ink);
}

.gym-info__tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.gym-info__tab-radio{ display:none; }

.gym-info__tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius: 10px;
  border:1px solid var(--line);
  background:#fff;
  font-size:12px;
  font-weight:900;
  color:#111827;
  cursor:pointer;
  user-select:none;
}
#tab1:checked + label,
#tab2:checked + label,
#tab3:checked + label,
#tab4:checked + label{
  border-color: rgba(25,177,90,.35);
  background: rgba(25,177,90,.10);
  color: var(--green-dark);
}

/* panes：全部非表示→選択タブだけ表示 */
.gym-info__pane{ display:none; }
#tab1:checked ~ .gym-info__panes .gym-info__pane[data-tab="tab1"],
#tab2:checked ~ .gym-info__panes .gym-info__pane[data-tab="tab2"],
#tab3:checked ~ .gym-info__panes .gym-info__pane[data-tab="tab3"],
#tab4:checked ~ .gym-info__panes .gym-info__pane[data-tab="tab4"]{
  display:block;
}

/* プランカード（4枚目のカード感） */
.plan-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.plan-card__name{
  margin:0;
  padding:12px 14px;
  background: #4b4a99;     /* 紫寄りの見出し（画像に寄せるなら） */
  color:#fff;
  font-weight: 900;
  text-align:center;
  letter-spacing:.02em;
}
.plan-card__table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.plan-card__table th,
.plan-card__table td{
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  font-size:13px;
}
.plan-card__table tr:last-child th,
.plan-card__table tr:last-child td{ border-bottom:none; }
.plan-card__table th{
  width:40%;
  background: var(--g-bg);
  font-weight:900;
}
.plan-card__table td{ font-weight:800; }
.plan-card__note{
  margin:0;
  padding:10px 14px 14px;
  font-size:12px;
  color: var(--muted);
}

/* 箇条書きボックス */
.g-bullets{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px 14px;
}
.g-bullets ul{ margin:0; padding-left: 1.2em; }
.g-bullets li{ margin: 6px 0; font-weight:700; color:#111827; }

/* ============================================================
   エリアリンク：見た目（高さ・列揃え）優先版
   PC 4列 / SP 3列（リンク3〜44件対応）
   ============================================================ */

.area-link-grid{
  background:#fff;
  border:1px solid var(--border);
  border-radius:6px;
  padding:12px 14px;
  margin:12px 0 18px;

  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* PC:4列 */
  column-gap:18px;
  row-gap:12px;

  position:relative;
}

/* 1行リンク */
.area-link-grid a{
  display:flex;
  align-items:center;
  gap:8px;

  text-decoration:none;
  font-weight:700;
  font-size:13px;
  line-height:1.2;
  color: #6b5cff;

  /* 1行で省略して高さが暴れないようにする */
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.area-link-grid a::before{
  content:"";
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid #111;
  box-sizing:border-box;
  flex:0 0 auto;
}

.area-link-grid a:hover{ text-decoration: underline; }

.area-link-grid::before{
  content:"";
  position:absolute;
  top:12px; bottom:12px;
  left:14px; right:14px;   /* paddingに合わせる */
  pointer-events:none;
  z-index:0;

  background:
    linear-gradient(to right,
      transparent calc(25% - .5px),
      var(--border)  calc(25% - .5px),
      var(--border)  calc(25% + .5px),
      transparent    calc(25% + .5px),

      transparent calc(50% - .5px),
      var(--border)  calc(50% - .5px),
      var(--border)  calc(50% + .5px),
      transparent    calc(50% + .5px),

      transparent calc(75% - .5px),
      var(--border)  calc(75% - .5px),
      var(--border)  calc(75% + .5px),
      transparent    calc(75% + .5px)
    );
}

/* リンクは線の上に */
.area-link-grid > a{
  position: relative;
  z-index: 1;
}


/* SP: 3列（仕切り線2本） */
@media (max-width: 767px){
  .area-link-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap:14px;
    padding:10px 12px;
  }
  .area-link-grid a{
    font-size:12px;
  }

  .area-link-grid::before{
    background:
      linear-gradient(to right,
        transparent calc(33.333% - .5px),
        var(--border)  calc(33.333% - .5px),
        var(--border)  calc(33.333% + .5px),
        transparent    calc(33.333% + .5px),

        transparent calc(66.666% - .5px),
        var(--border)  calc(66.666% - .5px),
        var(--border)  calc(66.666% + .5px),
        transparent    calc(66.666% + .5px)
      );
  }
}


/* 44件でも崩れない：PC=4列 / SP=3列（見た目揃え優先） */
.page_entry .area-link-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: 18px;
  row-gap: 10px;                 /* ここを詰めると1画面に収まりやすい */
  align-items: start;
  justify-items: start;

  background:#fff;
  border:1px solid var(--border);
  border-radius:6px;
  padding:12px 14px;
  margin:12px 0 18px;

  position: relative;
}

/* リンク：余計な幅指定（width:45% 等）を無効化してセル内で左寄せ */
.page_entry .area-link-grid > a{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;

  display:flex;
  align-items:center;
  justify-content:flex-start;

  gap:8px;
  padding: 0;                    /* ボタン感を消す */
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;

  text-decoration:none;
  font-weight:700;
  font-size:13px;
  line-height:1.2;

  color: var(--green-dark);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 左の丸 */
.page_entry .area-link-grid > a::before{
  content:"";
  width:12px;
  height:12px;
  border-radius:999px;
  border:2px solid #111;
  box-sizing:border-box;
  flex:0 0 auto;
}

.page_entry .area-link-grid > a:hover{
  text-decoration: underline;
}

/* 縦の仕切り線（PC:4列→3本） */
.page_entry .area-link-grid::before{
  content:"";
  position:absolute;
  top:10px;
  bottom:10px;
  left:25%;
  width:1px;
  background: var(--border);
  pointer-events:none;
  box-shadow:
    calc(25%) 0 0 0 var(--border),
    calc(50%) 0 0 0 var(--border);
}

/* SP：3列（縦線2本） */
@media (max-width: 767px){
  .page_entry .area-link-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 14px;
    row-gap: 8px;
    padding:10px 12px;
  }
  .page_entry .area-link-grid > a{
    font-size:12px;
  }
  .page_entry .area-link-grid::before{
    left:33.333%;
    box-shadow: calc(33.333%) 0 0 0 var(--border);
  }
}


/* タブはクリックできる見た目に */
.gym-tab-label{
  cursor: pointer;
  user-select: none;
}

/* パネル切替 */
.gym-panel{ display:none; }
.gym-panel.is-active{ display:block; }

/* パネルの枠を「共通」で持たせる（オプション/ユーザー層でも囲いを揃える） */
.gym-panels{
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 6px 6px;
  overflow: hidden;
}

/* 既存の .gym-tab-panel の枠と二重にならないようにするなら */
.gym-tab-panel{ border: none; } /* 使っていないなら消してOK */

/* リストの最外周にもパネル余白が欲しい場合 */
.gym-panel{ padding: 0; }
.gym-panel .gym-plan-text{ padding: 16px 16px 4px; }


/* =========================
   オプション / ユーザー層 リスト
   ========================= */
.gym-card .gym-panel .gym-recommend-list{
  list-style: none;
  margin: 0;
  padding: 10px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.gym-card .gym-panel .gym-recommend-list li{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 12px 14px;
  border-bottom: 1px solid var(--border);

  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--dark);
}

.gym-card .gym-panel .gym-recommend-list li:last-child{
  border-bottom: none;
}

/* チェックアイコン（緑丸） */
.gym-card .gym-panel .gym-recommend-list li::before{
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(34,168,69,.12);
  flex: 0 0 auto;
}

/* 文字の詰まり防止（長文でも崩れない） */
.gym-card .gym-panel .gym-recommend-list li{
  min-width: 0;
}

.gym-card .gym-panel .gym-recommend-list li::before{
  content: "✓";
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 3px rgba(34,168,69,.12);
  flex: 0 0 auto;
}

/* =========================
   CVボタン：横幅をカード内に収める
   ========================= */
.gym-card .gym-cta-btn{
  width: min(100%, 720px);  /* ←ここで最大幅制限 */
  margin: 0 auto 24px;      /* ←中央寄せ */
  border-radius: 10px;
  padding: 16px 18px;
}

/* SPは少しだけ広げる（見た目安定） */
@media (max-width: 767px){
  .gym-card .gym-cta-btn{
    width: min(92%, 640px);
  }
}


/* 目次（.toc）内のリストは、本文リスト用の枠線デザインを無効化する */
.article-body .toc ul,
.article-body .toc ol,
.sidebar .sidebar-toc ul,
.sidebar .sidebar-toc ol{
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}



/* =========================
   rec3：PC/SPとも添付画像の横一列デザイン固定
   - img：常にスクエア＆小さめ
   - 評価/料金/口コミ/サービス：極小
   - ボタン：評価の右（横長）
   ========================= */
:root{
  --rec-accent:#19b15a;
  --rec-dark:#111318;
  --rec-border:#d9dde6;
  --rec-bg:#ffffff;
  --rec-soft:#eef1f5;
  --rec-text:#1b0815;
}

/* Card */
.rec3-card{
  border:2px solid var(--rec-dark);
  background:#fff;
  overflow:hidden;
}

/* Head */
.rec3-card__head{
  position:relative;
  background:linear-gradient(#1a1c21,#0f1116);
  color:#fff;
  padding:10px 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:2px solid var(--rec-dark);
}
.rec3-card__badge{
  font-weight:900;
  color:var(--rec-accent);
  white-space:nowrap;
  font-size:13px;
}
.rec3-card__num{
  font-weight:900;
  color:var(--rec-accent);
  font-size:18px;
  line-height:1;
  white-space:nowrap;
}
.rec3-card__name{
  font-weight:900;
  font-size:18px;
  letter-spacing:.02em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rec3-card__head::after{
  content:"";
  position:absolute;
  left:92px;
  bottom:-10px;
  width:0;height:0;
  border-left:12px solid transparent;
  border-right:12px solid transparent;
  border-top:10px solid #0f1116;
}

/* Body layout (PC/SP共通) */
.rec3-card__body{
  display:flex;
  gap:12px;
  padding:10px;
  background:var(--rec-soft);/*var(--rec-bg);*/
  align-items:flex-start;
}

/* Square thumb */
.rec3-card__thumb{
  flex:0 0 88px;
  width:88px;
  height:88px;
  border:2px solid var(--rec-dark);
  border-radius:6px;
  overflow:hidden;
  background:#fff;
}
.rec3-card__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  aspect-ratio:1/1; /* 念のため */
}

/* Content */
.rec3-card__content{
  flex:1 1 auto;
  min-width:0;
}

/* copy (薄グレー帯) */
.rec3-card__copy{
  display:inline-block;
  background:var(--rec-soft);
  border-radius:6px;
  padding:8px 10px;
  margin:0 0 8px;
  font-weight:800;
  font-size:13px;
  line-height:1.4;
  color:var(--rec-text);
}

/* bottom row: rate + button */
.rec3-card__bottom{
  display:flex;
  gap:10px;
  align-items:stretch;
}

/* wpautop対策（ショートコードが<p>で包まれても崩れない） */
.rec3-card__bottom > p{
  margin:0 !important;
  display:flex;
}
.rec3-card__bottom > p > a.rec3-btn{ height:100%; }

/* Rate (超コンパクト・横2カラム) */
.rec3-rate{
  flex:1 1 auto;
  min-width:0;
  background:#fff;
  border:1px solid var(--rec-border);
  border-radius:8px;
  padding:8px 10px;

  display:grid;
  grid-template-columns: 1fr 0.9fr; /* 左:総合評価 右:料金等 */
  gap:0 10px;
  align-items:center;
}

/* 左カラム（総合評価） */
.rec3-rate__top{
  grid-column:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;

  padding-right:10px;
  border-right:1px solid var(--rec-border);

  /* 旧CSSの名残を無効化 */
  margin:0;
  padding-bottom:0;
  border-bottom:none;
}
.rec3-rate__ttl{
  font-weight:900;
  font-size:11px;
  color:var(--rec-text);
  white-space:nowrap;
}
.rec3-rate__score{
  font-weight:900;
  font-size:18px;
  line-height:1;
  white-space:nowrap;
}

/* 右カラム（料金/口コミ/サービス） */
.rec3-metrics{
  grid-column:2;
  display:grid;
  grid-template-columns:auto auto;
  gap:0 8px;
  align-items:center;
}
.rec3-metrics__label{
  font-weight:800;
  font-size:11px;
  color:var(--rec-text);
  white-space:nowrap;
}

/* Starbar（極小） */
.starbar{
  --rating: 4.5;
  --star-color: #f59e0b;
  position:relative;
  display:inline-block;
  font-size:11px;
  letter-spacing:1px;
  line-height:1;
  white-space:nowrap;
}
.starbar::before{ content:"★★★★★"; color:#d6d8de; }
.starbar::after{
  content:"★★★★★";
  position:absolute;
  left:0;top:0;
  width: calc((var(--rating) / 5) * 100%);
  overflow:hidden;
  color: var(--star-color);
  white-space:nowrap;
}

/* CTA（横長・右） */
.rec3-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-weight:900;
  color:#fff;
  background:var(--rec-accent);
  border:2px solid #0b3b1f;
  border-radius:8px;
  padding:0 14px;
  box-shadow:none;
  white-space:nowrap;
}
.rec3-btn--side{
  flex:0 0 auto;
  width: clamp(160px, 28vw, 240px); /* 画面が狭くても同一レイアウト維持 */
  align-self:stretch;               /* 評価の高さに合わせる */
  font-size:13px;
}
.rec3-btn--side span{
  margin-left:10px;
  font-size:14px;
  line-height:1;
}

/* SPでも同じデザインのまま、さらに詰める */
@media (max-width: 767px){
  .rec3-card__body{ gap:10px; padding:10px; }
  .rec3-card__thumb{ flex-basis:72px; width:72px; height:72px; }
  .rec3-card__copy{ font-size:12px; padding:7px 9px; }

  .rec3-rate{ padding:7px 9px; gap:0 8px; }
  .rec3-rate__score{ font-size:16px; }
  .starbar{ font-size:10.5px; }
  .rec3-metrics__label{ font-size:10.5px; }

  .rec3-btn--side{ width: clamp(140px, 32vw, 220px); font-size:12px; }
}


/* =========================
   SPだけ：評価の下に横長ボタン（画像はスクエア固定）
   ========================= */
@media (max-width: 767px){

  /* 画像はスクエアのまま小さく固定 */
  .rec3-card__thumb{
    flex: 0 0 72px;
    width: 72px;
    height: 72px;
  }
  .rec3-card__thumb img{
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  /* SP：評価＋ボタンを「縦に」積む（＝画像のデザイン） */
  .rec3-card__bottom{
    flex-direction: column;   /* ←ここが本命 */
    align-items: stretch;
    gap: 8px;
  }

  /* 評価ボックスは幅100% */
  .rec3-rate{
    width: 100%;
  }

  /* ボタンは横長に戻して、評価の下で横幅いっぱい */
  .rec3-btn.rec3-btn--side{
    width: 100%;
    align-self: stretch;

    writing-mode: horizontal-tb; /* 縦書き解除 */
    text-orientation: mixed;

    padding: 4px 12px;
    font-size: 12.5px;
    border-radius: 8px;
  }

  .rec3-btn.rec3-btn--side span{
    margin-left: 10px;
    font-size: 14px;
  }

  /* wpautopで<p>に包まれても同じ配置になるよう保険 */
  .rec3-card__bottom > p{
    margin: 0 !important;
  }
  .rec3-card__bottom > p > .rec3-btn.rec3-btn--side{
    width: 100%;
  }
  .rec3-card__name {
    font-size: 13px;
  }
  .rec3-card__num {
    font-size: 13px;
  }
}