.hero {
  position: relative;   /* これが nav の position:absolute の基準になる */
  width: 100%;

  /* ▼ ここが重要 */
  height: 0;            /* 高さゼロにして余白をなくす */
  min-height: 0;
  aspect-ratio: auto;

  overflow: visible;    /* はみ出しても表示する → ナビがちゃんと見える */
  background: none;     /* 黒背景などを完全に消す */
  margin-bottom: 0;
}

/* ヒーロースライド系はサブページでは非表示 */
.hero__slides,
.hero__slide,
.hero__overlay,
.hero__control,
.hero__catch,
.hero-badges,
.hero-banner {
  display: none;
}



/* メインビジュアル全体 */
.page-hero {
  position: relative;
}
/* PC: メイン画像を下げる */
@media (min-width: 960px) {
  .page-hero {
    margin-top: 200px; /* 好きな値へ */
  }
}

/* SP: メイン画像を少し下げる */
@media (max-width: 959.98px) {
  .page-hero {
    margin-top: 120px; /* 好きな値へ */
  }
}


/* 横長に見せるメイン画像 */
.page-hero__media img {
  display: block;
  width: 100%;
  max-height: 360px;    /* 横長に見える目安。必要なら調整OK */
  object-fit: cover;    /* 横幅いっぱいでトリミング */
  object-position: center;
  /* 角丸は禁止のため border-radius は付けない */
}

/* H1 を画像の中央に重ねる */
.page-hero__title {
  position: absolute;
  inset: 0;                         /* 上下左右0で画像全体をカバー */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 16px;
  pointer-events: none;             /* 背景へのクリックは通す */
}

/* H1 本体 */
.page-hero__title h1 {
  pointer-events: auto;             /* テキスト選択やリンクはOK */
  margin: 0;
  padding: 0.7em 2em;
  max-width: min(960px, 100%);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.5;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.65); /* 濃い背景色 + 白文字 */
  font-weight: 700;
  /* 角丸禁止なので border-radius なし */
}

/* スマホ時：少しだけ詰める */
@media (max-width: 599.98px) {
  .page-hero__title h1 {
    padding: 0.8em 1.4em;
    font-size: clamp(20px, 5vw, 24px);
  }
}

/* -------------------------
   2. 本文コンテンツ全体
   ------------------------- */

.page-content {
  width: min(1200px, 100% - 24px);
  margin: clamp(32px, 5vw, 48px) auto clamp(64px, 6vw, 80px);
  font-size: 1.05rem;
  line-height: 1.8;
  color: #665952; /* 既存サイトのトーンに合わせた中間色 */
}

/* 段落 */
.page-content p {
  margin: 0 0 1.2em;
}

/* strong（強調） */
.page-content strong {
  font-weight: 800;
  color: #E5006C;
}

/* リンク */
.page-content a {
  color: #E70670;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  font-weight: 600;
}
.page-content a:hover {
  opacity: 0.85;
}

/* -------------------------
   3. 見出し H2〜H5
   ------------------------- */

/* H2：センター揃え + 下線（幅80％） */
.page-content h2 {
  margin: clamp(32px, 5vw, 40px) auto 1.2em;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  text-align: center;
  line-height: 1.4;
	clear: both;
}

/* H2 の下線（横幅80％程度） */
.page-content h2::after {
  content: "";
  display: block;
  width: 80%;
  max-width: 480px;
  height: 1px;
  margin: 8px auto 0;
  background-color: #dddddd;
}

/* H3：左揃え + ピンク2色の下線 */
.page-content h3 {
  margin: clamp(24px, 4vw, 32px) 0 0.8em;
  font-size: clamp(18px, 2.4vw, 22px);
  font-weight: 800;
  color: #E70670;
  text-align: left;
  padding-bottom: 0.4em;
  /* 下線：左30％が濃いピンク、残りが淡いピンク */
  background-image: linear-gradient(
    to right,
    #E70670 0,
    #E70670 30%,
    #FAD0E2 30%,
    #FAD0E2 100%
  );
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: 100% 1px;
	clear: both;
}

/* H4/H5 はシンプルに（必要ならあとで調整） */
.page-content h4 {
  margin: 1.5em 0 0.6em;
  font-size: 1.05em;
  font-weight: 700;
	clear: both;
}

.page-content h5 {
  margin: 1.4em 0 0.4em;
  font-size: 1em;
  font-weight: 700;
}

/* -------------------------
   4. 画像レイアウト
   ------------------------- */

.page-content img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* figure の基本スタイル */
.figure {
  margin: 24px 0;
  font-size: 0.9em;
  color: #777777;
}

.figure figcaption {
  margin-top: 0.4em;
}

/* PC時の左右寄せ */
.figure--left img {
  margin-right: auto;
}

.figure--right img {
  margin-left: auto;
}

.figure--center img {
  margin-left: auto;
  margin-right: auto;
}

/* 縦長画像などの幅指定（PC/SP共通） */
.img-w80 img,
.img--w80 img {
  width: 80%;
}

.img-w50 img,
.img--w50 img {
  width: 50%;
}

.img-w30 img,
.img--w30 img {
  width: 30%;
}

/* スマホでは基本すべて中央寄せに */
@media (max-width: 767.98px) {
  .figure--left img,
  .figure--right img,
  .figure--center img {
    margin-left: auto;
    margin-right: auto;
  }
}

/* -------------------------
   5. テーブル
   ------------------------- */


.table-wrap,
.table--scroll {
  margin: 24px 0;
}

/* 横スクロール用のラッパー（SP） */
@media (max-width: 599.98px) {
  .table--scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .table--scroll table {
    min-width: 480px; /* 列が多い場合でも崩れないように */
  }
}

.table-basic {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95em;
}

.table-basic th,
.table-basic td {
  border: 1px solid #e5e5e5;
  padding: 10px 12px;
  vertical-align: top;
}
.table-tdcenter td {
	text-align: center;
}

/* ヘッダー行 */
.table-basic thead th {
  background-color: #fff7fb;
  text-align: center;
  font-weight: 700;
}

/* 左端の見出しセル */
.table-basic tbody th {
  background-color: #ffffff;
  white-space: nowrap;
}

/* 偶数行に薄い背景色 */
.table-basic tbody tr:nth-child(even) td {
  background-color: #fdf7fb;
}

/* -------------------------
   6. ポイントボックス
   ------------------------- */

/*
  背景色入りの四角いボックス。
  特に伝えたいポイントや注意書きなどに使用。
*/
.point-box {
  margin: clamp(24px, 4vw, 32px) 0;
  padding: 0px 20px;
  background-color: #FFF0F6;
  border: 1px solid #F7B4D3;
  /* 角丸は禁止なので border-radius なし */
}

.point-box__title {
  margin: 0 0 6px;
  font-size: 1.05em;
  font-weight: 800;
  color: #E5006C;
}

.point-box__text {
  margin: 0;
  line-height: 1.9;
}
/* ========================================
   画像位置（左右・中央）
   シンプルな img_left / img_right / img_center で指定
   ======================================== */

/* 画像の共通スタイル */
.page-content img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ▼ 左寄せ（PC） */
.img_left {
  display: block;
  margin: 0 auto 1.2em 0;
}

/* ▼ 右寄せ（PC） */
.img_right {
  display: block;
  margin: 0 0 1.2em auto;
}

/* ▼ 中央寄せ（PC） */
.img_center {
  display: block;
  margin: 0 auto 1.2em auto;
}

/* ========================================
   縦長画像などの調整
   .img_w80 / .img_w50 / .img_w30
   ======================================== */

.img_w80 { width: 80%; }
.img_w50 { width: 50%; }
.img_w30 { width: 30%; }

/* ========================================
   スマホ版（基本すべて中央揃えにする）
   ======================================== */
@media (max-width: 767.98px) {
  .img_left,
  .img_right,
  .img_center {
    margin-left: auto;
    margin-right: auto;
  }

  /* 横幅指定はそのまま有効：中央寄せされる */
  .img_w80,
  .img_w50,
  .img_w30 {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ========================================
   画像の回り込み（PCのみ有効）
   img_left, img_right に float を付ける
   ======================================== */

@media (min-width: 768px) {
  .img_left {
    float: left;
    margin: 0 1em 1em 0;  /* 右側と下に余白 */
    display: block;
  }

  .img_right {
    float: right;
    margin: 0 0 1em 1em;  /* 左側と下に余白 */
    display: block;
  }
}

/* 回り込み解除したい箇所で使用（必要に応じて）*/
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
/* YouTubeなどの埋め込みをレスポンシブに */
.video{
  width: 100%;
  max-width: 900px;     /* PCで大きくしすぎない上限。不要なら消してOK */
  margin: 24px auto;    /* 中央寄せ */
  aspect-ratio: 16 / 9; /* 比率固定（今どきブラウザ向け） */
  position: relative;
}

.video iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* ========================================
   写真＋吹き出し（角丸なし）
   PC：横並び / SP：吹き出し→写真
   ======================================== */

.speech{
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 28px 0;
}

/* 写真側（小さめ） */
.speech__photo{
  flex: 0 0 auto;
  width: 176px;           /* PC写真サイズ：必要なら調整 */
}

.speech__photo img{
  width: 100%;
  height: auto;
  display: block;
  /* 角丸なし */
}

/* 吹き出し本体 */
.speech__bubble{
  position: relative;
  flex: 1 1 auto;
  padding: 16px 18px;
  border: 1px solid #E70670;
  background: #ffffff;
  color: #665952;
}

/* 吹き出しの「三角」：左側（写真側） */
.speech__bubble::before{
  content: "";
  position: absolute;
  left: -14px;
  top: 22px;              /* 三角の縦位置（調整可） */
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 14px solid #E70670;   /* 枠線色 */
}

.speech__bubble::after{
  content: "";
  position: absolute;
  left: -12px;
  top: 22px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 12px solid #ffffff;   /* 背景色 */
}

/* 吹き出し内の見出しと本文 */
.speech__title{
  margin: 0 0 6px;
  font-size: 1.05em;
  font-weight: 800;
  color: #E70670;
}

.speech__text{
  margin: 0;
  line-height: 1.85;
}

/* -------------------------
   スマホ：吹き出し→写真の順
   ------------------------- */
@media (max-width: 767.98px){
  .speech{
    flex-direction: column;
    gap: 12px;
  }

  /* スマホは吹き出しを先に表示 */
  .speech__bubble{ order: 1; }
  .speech__photo{ order: 2; width: 160px; margin: 0 auto; }

  /* 三角は上側に変更（下に写真が来るので「下向き」に） */
  .speech__bubble::before{
    left: 24px;
    top: auto;
    bottom: -14px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 14px solid #E70670;
    border-bottom: 0;
    border-right-color: transparent;
  }

  .speech__bubble::after{
    left: 24px;
    top: auto;
    bottom: -12px;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 12px solid #ffffff;
    border-bottom: 0;
    border-right-color: transparent;
  }
}
/* ========================================
   サブページ専用：ul / li スタイル
   既存リストには影響しない
   ======================================== */

.list_basic{
  margin: 1.2em 0;
  padding-left: 1.8em;   /* ← 左に寄りすぎないための調整 */
  list-style: disc;      /* 標準の黒丸 */
}

.list_basic li{
  margin: 0.6em 0;
  line-height: 1.8;
  padding-left: 0.2em;   /* テキストとマーカーの間隔 */
}
.clear{
	clear: both;
}
/* =========================
   スマホ用 比較カード
   ========================= */

.compare-cards-sp {
  display: none;
}

/* カード */
.compare-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  background: #fff;
}

/* タイトル */
.compare-card__title {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* リスト */
.compare-card__list {
  margin: 0;
  padding: 0;
}

.compare-card__list div {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dotted #ddd;
}

.compare-card__list div:last-child {
  border-bottom: none;
}

.compare-card__list dt {
  font-weight: 500;
  color: #555;
}

.compare-card__list dd {
  margin: 0;
  font-weight: 600;
}

/* =========================
   表示切替
   ========================= */

@media (max-width: 768px) {
  .table--scroll {
    display: none;
  }
  .compare-cards-sp {
    display: block;
  }
}

/* =========================
   スマホ用 経歴カード
   ========================= */

.career-cards-sp {
  display: none;
}

/* 1カード */
.career-card {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-bottom: 12px;
  background: #fff;
}

/* 年 */
.career-card__year {
  font-weight: 600;
  color: #984394; /* ブランドカラーに変更可 */
  white-space: nowrap;
}

/* 内容 */
.career-card__text {
  font-size: 17px;
  line-height: 1.7;
  color: #555;
}

/* =========================
   表示切替
   ========================= */

@media (max-width: 768px) {

  /* =========================
     基本：スマホでは非表示
     ========================= */
  .table-basic {
    display: none;
  }

  .career-cards-sp {
    display: block;
  }

  /* =========================
     is-sp-visible のときだけ
     テーブルをスマホでも表示
     ========================= */
  .table--scroll.is-sp-visible {
    display: block;
    width: 100%;
    overflow: hidden; /* 画面外にはみ出させない */
  }

  .table--scroll.is-sp-visible .table-basic {
    display: table;
    width: 100%;
    table-layout: fixed;     /* ← 列幅を強制的に画面内に収める */
    border-collapse: collapse;
  }

  /* セル内の文字を折り返して収める */
  .table--scroll.is-sp-visible .table-basic th,
  .table--scroll.is-sp-visible .table-basic td {
    padding: 10px 6px;
    font-size: 14px;
    line-height: 1.4;
    white-space: normal;          /* 折り返し許可 */
    word-break: break-word;       /* 長い単語対策 */
    overflow-wrap: anywhere;      /* さらに保険 */
  }

  /* 画像がある場合の保険 */
  .table--scroll.is-sp-visible .table-basic img {
    max-width: 100%;
    height: auto;
  }

  /* （任意）左端の列が広がりすぎる場合の保険 */
  /*
  .table--scroll.is-sp-visible .table-basic th:first-child,
  .table--scroll.is-sp-visible .table-basic td:first-child {
    width: 30%;
  }
  */

}


/* =========================
   スマホ用 経歴カード（年代なし）
   ========================= */

.career-simple-cards-sp {
  display: none;
}

.career-simple-card {
  padding: 14px 16px;
  margin-bottom: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  font-size: 17px;      /* 読みやすさ重視 */
  line-height: 1.7;
  color: #333;
  font-weight: 500;
}

@media (max-width: 768px) {
  .career-simple-cards-sp {
    display: block;
  }
}

/* =========================
   スマホ用 ガイコツ比較カード
   ========================= */

.skeleton-compare-cards-sp {
  display: none;
}

.skeleton-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  background: #fff;
  text-align: center;
}

/* タイトル */
.skeleton-card__title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

/* 画像 */
.skeleton-card__image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* =========================
   表示切替
   ========================= */

@media (max-width: 768px) {
  .table-basic {
    display: none;
  }
  .skeleton-compare-cards-sp {
    display: block;
  }
}
/* ▼ カード内テキスト（共通利用OK） */
.skeleton-card__text {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.7;
  color: #333;
  font-weight: 500;
}

/* タイトル（共通） */
.price-title {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* PC/スマホで同じh3を2回出したくない場合 */
.price-title--sp { display: none; }

@media (max-width: 768px) {
  .price-title { display: none; }
  .price-title--sp { display: block; margin-bottom: 12px; }
}

/* PC表：画像のはみ出し防止（短い保険） */
.table-basic .price-image img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* スマホカード：明細リスト（他カードにも使い回し可） */
.price-card__list {
  margin: 12px 0 0;
  padding: 0;
}

.price-card__list div {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dotted #ddd;
}

.price-card__list div:last-child {
  border-bottom: none;
}

.price-card__list dt {
  font-weight: 500;
  color: #555;
}

.price-card__list dd {
  margin: 0;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
}

.price-card__total dt,
.price-card__total dd {
  font-weight: 700;
}

.price-card__note {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: #666;
}
/* ▼はみ出し対策（スマホカード用） */
@media (max-width: 768px) {
  .price-card__list div {
    flex-wrap: wrap;            /* 折り返しを許可 */
  }
  .price-card__list dt,
  .price-card__list dd {
    min-width: 0;               /* 折り返しが効くように */
    overflow-wrap: anywhere;    /* 長い文字も折る */
    word-break: break-word;
  }
  .price-card__list dd {
    white-space: normal;        /* ← 以前の nowrap を打ち消す（重要） */
  }
}
/* ========================================
   質問用 吹き出し（Q）
   右側に人物、右から吹き出し
   SPは吹き出し→人物（下）
   ※角丸なし
   ======================================== */

.speechQ{
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin: 28px 0;
}

/* 吹き出しを左、人物を右にする */
.speechQ__bubble{ order: 1; }
.speechQ__photo{ order: 2; }

/* 人物（小さめ） */
.speechQ__photo{
  flex: 0 0 auto;
  width: 70	px;         /* PC写真サイズ（必要なら調整） */
}
.speechQ__photo img{
  width: 100%;
  height: auto;
  display: block;
}

/* 吹き出し本体（既存と区別できる類似色：淡いブルー系） */
.speechQ__bubble{
  position: relative;
  flex: 1 1 auto;
  padding: 16px 18px;

  border: 1px solid #C9D8F2;     /* 淡いブルーの枠 */
  background: #F3F7FF;           /* 淡いブルーの面（類似色） */
  color: #665952;
}

/* 右側（人物側）へ向かう三角 */
.speechQ__bubble::before{
  content: "";
  position: absolute;
  right: -14px;
  top: 22px;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 14px solid #C9D8F2;  /* 枠線色 */
}

.speechQ__bubble::after{
  content: "";
  position: absolute;
  right: -12px;
  top: 22px;
  width: 0;
  height: 0;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 12px solid #F3F7FF;  /* 背景色 */
}

/* 吹き出し内 */
.speechQ__title{
  margin: 0 0 6px;
  font-size: 1.05em;
  font-weight: 800;
  color: #2E5AA7; /* 質問側は青系で区別 */
}
.speechQ__text{
  margin: 0;
  line-height: 1.85;
}

/* -------------------------
   スマホ：吹き出し→人物（下）
   三角は下向き
   ------------------------- */
@media (max-width: 767.98px){
  .speechQ{
    flex-direction: column;
    gap: 12px;
  }

  .speechQ__bubble{ order: 1; }
  .speechQ__photo{
    order: 2;
    width: 80px;
    margin: 0 auto;
  }

  /* 三角を下向き（人物が下に来る） */
  .speechQ__bubble::before{
    right: auto;
    left: 24px;
    top: auto;
    bottom: -14px;

    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 14px solid #C9D8F2;

    border-bottom: 0;
  }

  .speechQ__bubble::after{
    right: auto;
    left: 24px;
    top: auto;
    bottom: -12px;

    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 12px solid #F3F7FF;

    border-bottom: 0;
  }
}
/* Q行を横並びにする */
.speechQ__row{
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
}

/* Q. の文字 */
.speechQ__q{
  font-weight: 800;
  color: #2E5AA7;
  flex: 0 0 auto;   /* 幅固定 */
  line-height: 1.6;
}

/* 質問文 */
.speechQ__text{
  margin: 0;        /* pのデフォルト余白を消す */
  line-height: 1.85;
}
/* ========================================
   QAページ用：回答側の人物画像を小さく
   既存 .speech には影響させない
   ======================================== */

/* PC */
.speech--qa .speech__photo{
  width: 90px;      /* お好みで 64 / 72 / 80 など */
  flex: 0 0 auto;
}

.speech--qa .speech__photo img{
  width: 100%;
  height: auto;
  display: block;
}

/* スマホ */
@media (max-width: 767.98px){
  .speech--qa .speech__photo{
    width: 88px;    /* SPは少し大きめでもOK */
    margin: 0 auto;
  }
}
/* =========================
   Staff unit layout
   ========================= */
.staffunit{
  display: grid;
  grid-template-columns: 260px minmax(220px, 340px) 1fr; /* 人物｜like｜メッセージ */
  gap: 20px;
  align-items: start;
  margin: 14px 0 34px;
}

/* 画像共通：はみ出し防止 */
.staffunit img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* 左：人物 */
.staffunit__person{
  margin: 0;
	max-width: 220px;
}
.staffunit__person img{
  width: 100%;
	height: auto;
  object-fit: contain;
}

/* 中：like一式 */
.staffunit__likes{
  display: grid;
  gap: 10px;
}
.staffunit__likesTitle img{
  width: 100%;
  max-width: 300px; /* like.jpgが幅300指定だった場合の目安 */
}
.staffunit__likesChart img{
  width: 100%;
  max-width: 350px; /* kim_like.jpgが幅350指定だった場合の目安 */
}

/* 右：メッセージ */
.staffunit__message p{
  margin: 0;
  line-height: 1.9;
}

/* =========================
   Responsive (SP)
   ========================= */
@media (max-width: 768px){
  .staffunit{
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 10px 0 26px;
  }

  /* スマホ：人物→表題→チャート→メッセージの順はHTML順でOK */
  .staffunit__likesTitle img,
  .staffunit__likesChart img{
    max-width: 100%;
  }
}
/* 高さ固定版（必要な人だけ付与） */
.staffunit__person--fixed{
  max-width: 220px;
  height: 200px; /* 表示枠の高さ */
  overflow: hidden;
}

.staffunit__person--fixed img{
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠いっぱいに表示（多少トリミング） */
}
@media (max-width: 768px){
  .staffunit__person{
    margin-left: auto;
    margin-right: auto;
  }
}
/* =========================
   ビフォーアフター比較
   ========================= */

.beforeafter {
  margin: 40px 0;
}

/* 共通：画像 */
.beforeafter__img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* ===== PC：テーブル ===== */
.beforeafter__table {
  width: 100%;
  border-collapse: collapse;
}

.beforeafter__table th {
  text-align: center;
  font-weight: 600;
  padding: 12px;
  background: #f5f5f5;
  border: 1px solid #ddd;
}

.beforeafter__table td {
  padding: 16px;
  border: 1px solid #ddd;
  text-align: center;
}

/* ===== スマホ：カード ===== */
.beforeafter__cards {
  display: none;
}

.beforeafter__card {
  margin-bottom: 24px;
}

.beforeafter__label {
  text-align: center;
  font-weight: 600;
  margin-bottom: 8px;
}

/* =========================
   レスポンシブ切替
   ========================= */
@media screen and (max-width: 767px) {

  /* テーブル非表示 */
  .beforeafter__table {
    display: none;
  }

  /* カード表示 */
  .beforeafter__cards {
    display: block;
  }

}
.page-content .btn_primary{
  color: #ffffff;
  text-decoration: none;
}

.page-content .btn_primary:hover{
  color: #ffffff;
}
@media (max-width: 767.98px) {
  .img_w30,
  .img_w50,
  .img_w60,
  .img_w80 {
    width: 100%;
  }
}
@media (max-width: 959.98px) {
  .services__list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
  }

  .services__item,
  .services__item:nth-child(n+9) {
    flex: 0 0 calc((100% - 16px) / 2);
    max-width: calc((100% - 16px) / 2);
    display: flex;
    justify-content: center;
  }

  .services__item .svc-card {
    width: 100%;
    max-width: 160px;
  }
}