/* ===== Comparison (image version) ===== */
.lp-comparison{
  position: relative;
  padding: 72px 20px 84px;
  background: #fff;               /* セクションは白 */
  overflow: hidden;               /* 肉球ははみ出さない */
}

/* 右下の黄色肉球（白背景の右下に“背景として”） */
.lp-comparison::after{
  content:"";
  position:absolute;
  right: -10px;
  bottom: -10px;
  width: 360px;
  height: 360px;
  background: url("../img/lp/comparison/bg_nikukyu.png") no-repeat right bottom / contain;
  z-index: 0;
  pointer-events: none;
}

/* 見出し（中央＆あしらい） */
.lp-comparison__head{
  text-align:center;
  position: relative;
  z-index: 2;
  margin-bottom: 28px;
}
.lp-comparison__title{
  margin: 0;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.2;
  font-size: clamp(22px, 2.4vw, 34px);
}
.lp-comparison__underline{
  display:block;
  width: 84px;
  height: 8px;
  border-radius: 999px;
  background: #F3CC57;
  margin: 14px auto 0;
}

/* 淡い青の角丸パネル（“表の部分だけ”） */
.lp-comparison__panel{
  position: relative;
  z-index: 2;
  width: min(1100px, 100%);
  margin: 0 auto;
  border-radius: 24px;
  padding: 44px 44px;
}

/* 画像本体 */
.lp-comparison__img{
  width: min(980px, 100%);
  margin: 0 auto;
}
.lp-comparison__img img{
  display:block;
  width:100%;
  height:auto;
}

/* 画面には見せないテキスト */
.lp-comparison__sr{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* SP */
@media (max-width: 767px){
  .lp-comparison{
    padding: 56px 16px 72px;
  }
  .lp-comparison::after{
    width: 260px;
    height: 260px;
    right: -6px;
    bottom: -6px;
  }
  .lp-comparison__panel{
    border-radius: 18px;
    padding: 28px 18px;
  }
  .lp-comparison__underline{
    width: 76px;
    height: 7px;
    margin-top: 12px;
  }
}

/* =========================
   Comparison: SPは画像 + 横スクロール
   ========================= */

/* まずデフォルト：PCはテーブル、SP画像は非表示 */
.lp-comparison__table-wrap--sp { display: none; }

/* SPだけ切り替え */
@media (max-width: 767px) {
  .lp-comparison__table-wrap--pc { display: none; }
  .lp-comparison__table-wrap--sp { display: block; }

  /* 横スクロールの器 */
  .lp-comparison__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* 余計なズレ防止 */
    position: relative;
    z-index: 2;
  }

  /* 画像は“画面より大きく”してスクロールさせる */
  .lp-comparison__img {
    display: block;
    height: auto;
    width: 700px;          /* ←ここでスクロール量を作る。700〜900で調整 */
    max-width: none;       /* これがないと縮んでスクロールできない */
  }

  /* ヒント */
  .lp-comparison__scroll-hint {
    margin-top: 10px;
    font-size: 12px;
    text-align: center;
    color: #1a3552;
    opacity: .8;
  }

  /* 重要：SPで“強調枠”の疑似要素が残って二重化するのを完全停止 */
  .lp-comparison__table-wrap--pc *,
  .lp-comparison__table-wrap--pc *::before,
  .lp-comparison__table-wrap--pc *::after {
    box-shadow: none !important;
  }
}


/* ===============================
   Comparison：画像版（SP横スクロール）
   HTMLはそのまま
================================ */

/* デフォルト（PC）：普通に中央表示 */
.lp-comparison__img {
  width: 100%;
  margin: 0 auto;
}

.lp-comparison__img img {
  display: block;
  width: 100%;
  height: auto;
}

/* ===============================
   SPだけ横スクロール
================================ */
@media (max-width: 767px) {

  /* 横スクロールさせる「器」 */
  .lp-comparison__img {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  /* 画像は「画面より大きく」して縮ませない */
  .lp-comparison__img img {
    width: 600px;      /* ← ここ重要。画像の実寸に合わせて調整（800〜1100） */
    max-width: none;   /* ← これが無いと絶対に横スクロールしない */
  }

  /* スクロール案内（任意） */
  .lp-comparison__img::after {
    content: "← 横にスクロールできます →";
    display: block;
    text-align: center;
    font-size: 12px;
    margin-top: 10px;
    color: #1a3552;
    opacity: .8;
  }
}