@charset "UTF-8";

/*
 * 市区町村ページ: フリマアプリとの比較（#175）
 *
 * **このページ専用。** 2 列 × 3 行の比較表。行見出しが縦に長く、SP では
 * 1 列に積むため `<table>` ではなくグリッドで組んでいる。
 *
 * デザイン: vault `資料/受領資料/リニューアル用/デザイン/PC/03_買取実績とフリマ比較_Frame29@2x.png`
 * 数値の正本は同フォルダ `解析/レイヤー詳細ダンプ.txt`。
 */

.kau-compare {
  background: var(--kau-white);
  font-family: var(--kau-font);
}

.kau-compare__inner {
  box-sizing: border-box;
  max-width: 1360px;
  margin-inline: auto;
  padding: var(--kau-main-pad) 16px;
}

/* ---- 見出し ---- */

/* セクション頭の CTA（実測 1163×140・見出しまで 73px） */
.kau-compare__cta {
  max-width: 1163px;
  margin: 0 auto 64px;
}

/* 実測: 48px の Black・濃紺（#06154b）・左右に緑の走り線（44×44・#37902d） */
.kau-compare__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin: 0;
  color: var(--kau-navy);
  font-size: 48px;
  font-weight: 900;
  letter-spacing: -1.2px;
  line-height: 1;
}

/* もう一回り大きく（2026-09-11 指摘。実測 44px 相当を 56px で表示） */
.kau-compare__deco {
  width: 56px;
  height: 56px;
  background-color: var(--kau-compare-mark);
  -webkit-mask: url("../../../images/area-renewal/compare-deco.svg?v=2") no-repeat center / contain;
  mask: url("../../../images/area-renewal/compare-deco.svg?v=2") no-repeat center / contain;
}

.kau-compare__deco--mirror {
  transform: scaleX(-1);
}

.kau-compare__lead {
  margin: 24px 0 0;
  color: var(--kau-gray-600);
  font-size: 20px;
  font-weight: var(--kau-body-weight);
  line-height: 1.4;
  text-align: center;
}

/* ---- 表 ---- */

/*
 * 実測: 行見出し 222 ／ 各列 590 ／ 行の高さ 242。
 * 列の見出し（緑・グレーの帯）は 590×42・角丸 15。
 */
/*
 * 罫線は**セル自身のボーダー**で引く（右・下＋外周ぶん）。
 * 以前は背景色を隙間に見せる方式だったが、列見出しの行で線が
 * 中途半端に途切れて見えた（2026-09-11 指摘）。
 */
.kau-compare__table {
  display: grid;
  grid-template-columns: 222px 1fr 1fr;
  margin: 40px 0 0;
}

.kau-compare__corner {
  background: var(--kau-white);
}

.kau-compare__rowhead,
.kau-compare__cell {
  border-right: 1px solid var(--kau-compare-line);
  border-bottom: 1px solid var(--kau-compare-line);
}

/* 左端の列と、本体の 1 行目に外周の線を足す */
.kau-compare__rowhead {
  border-left: 1px solid var(--kau-compare-line);
}

.kau-compare__table > :nth-child(4),
.kau-compare__table > :nth-child(5),
.kau-compare__table > :nth-child(6) {
  border-top: 1px solid var(--kau-compare-line);
}

.kau-compare__col {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 15px 15px 0 0;
  color: var(--kau-white);
  font-size: 24px;
  font-weight: var(--kau-heading-weight);
}

.kau-compare__col img {
  width: 153px;
  height: auto;
}

.kau-compare__col--kau { background: var(--kau-compare-kau); }
.kau-compare__col--flea { background: var(--kau-compare-flea); }

/* ---- 行見出し ---- */

/*
 * 実測: 222×242・背景 #f0fdf4。番号の円（左端から 16px）と名前が横に並び、
 * アイコンは名前の頭に揃えて下に付く。中央揃えではない。
 */
.kau-compare__rowhead {
  box-sizing: border-box;
  min-height: 242px;
  padding: 48px 12px 16px 16px;
  background: var(--kau-compare-rowhead);
}

.kau-compare__rowhead:first-of-type {
  border-top-left-radius: 20px;
}

.kau-compare__rowhead-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}

/* 番号は緑の円（実測 50px・#3b8849） */
.kau-compare__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--kau-compare-number);
  color: var(--kau-white);
  font-size: 24px;
  font-weight: var(--kau-heading-weight);
  line-height: 1;
}

.kau-compare__label {
  color: var(--kau-gray-900);
  font-size: 24px;
  font-weight: var(--kau-heading-weight);
  line-height: 1.3;
}

/* アイコンは 72px・名前の頭（円 50px＋間 14px）に揃える。mask で塗る */
.kau-compare__icon {
  display: block;
  margin: 18px 0 0 64px;
  width: 72px;
  height: 72px;
  background-color: var(--kau-compare-number);
  -webkit-mask: var(--kau-compare-icon) no-repeat center / contain;
  mask: var(--kau-compare-icon) no-repeat center / contain;
}

.kau-compare__icon--1 { --kau-compare-icon: url("../../../images/area-renewal/compare-box.svg"); }
.kau-compare__icon--3 { --kau-compare-icon: url("../../../images/area-renewal/compare-handshake.svg"); }

/* 「¥」は文字（デザインも文字・40px・円の枠つき） */
.kau-compare__icon--text {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 2px solid var(--kau-compare-yen);
  border-radius: 50%;
  background: none;
  color: var(--kau-compare-yen);
  font-size: 40px;
  font-weight: var(--kau-heading-weight);
  line-height: 1;
}

/* ---- セル ---- */

/* 実測: 590×242・背景 #fbfbfb */
.kau-compare__cell {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 242px;
  padding: 20px 16px 12px;
  background: var(--kau-compare-cell);
  text-align: center;
}

/*
 * **画面幅に応じて縮める。** 実測は 16px（PC 1440px のとき）だが、列幅は
 * 画面幅で決まるため、狭い画面では 1 行が収まらず指定した改行位置より
 * 手前で折り返していた（2026-09-14 指摘）。
 *
 * 最長の行「相場や値下げ交渉の影響を受けやすい」は 17 文字。
 * 1.15vw なら 1400px で 16px、900px で 10.4px になり、
 * どの幅でも 1 行に収まる。
 */
/*
 * **左寄せにする。** デザインの実測は中央寄せ（textAlignHorizontal=CENTER）だが、
 * 最終行が短いと中央に浮いて見えるため左寄せに変えている（2026-09-14 指示）。
 */
.kau-compare__text {
  margin: 0;
  text-align: left;
  font-size: clamp(10px, calc(var(--kau-canvas-w) * 0.0115), 16px);
  font-weight: var(--kau-heading-weight);
  line-height: 1.5;
}

.kau-compare__cell--kau .kau-compare__text {
  /* 実測: 買取UP 側は緑（#1e8735）で強い */
  color: var(--kau-compare-kau-text);
  font-size: 18px;
}

.kau-compare__cell--flea .kau-compare__text {
  color: var(--kau-gray-700);
}

.kau-compare__note {
  margin: 0;
  color: var(--kau-compare-kau-text);
  font-size: 16px;
  font-weight: var(--kau-heading-weight);
}

/* 画像は横に並べる（1 行目の買取UP 側だけ 2 枚） */
.kau-compare__figures {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  margin: auto 0 0;
}

.kau-compare__figures img {
  max-width: 100%;
  height: auto;
}

/* ---- 下部の帯 ---- */

/* 実測: 1070×46・#f0fdf4・枠 #3b8849 1px・角丸 8・薄い影・電球つき */
.kau-compare__footer {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 1070px;
  margin: 24px auto 0;
  padding: 8px 20px;
  border-radius: 8px;
  background: var(--kau-compare-rowhead);
  border: 1px solid var(--kau-compare-number);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: var(--kau-gray-900);
  font-size: 18px;
  font-weight: var(--kau-heading-weight);
  line-height: 28px;
  text-align: center;
}

/* 電球（実測 24×24 相当を一回り大きく 30px で表示・線 #eab308） */
.kau-compare__footer-icon {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  background-color: #eab308;
  -webkit-mask: url("../../../images/area-renewal/compare-bulb.svg?v=2") no-repeat center / contain;
  mask: url("../../../images/area-renewal/compare-bulb.svg?v=2") no-repeat center / contain;
}

/* 「高価買取！」「スピーディー」だけ緑（文字単位スタイルの実測） */
.kau-compare__footer-em {
  color: var(--kau-compare-kau-text);
}

/* ------------------------------------------------------------------
 * タブレット（1024px 以下）
 *
 * **1 列に積む。** 行見出し → 買取UP → フリマアプリ の順で 3 段になる。
 * ------------------------------------------------------------------ */

@media (max-width: 1199px) {
  .kau-compare__inner {
    padding: var(--kau-main-pad) 16px;
  }

  .kau-compare__heading {
    gap: 12px;
    font-size: 22px;
  }

  .kau-compare__deco {
    width: 28px;
    height: 28px;
  }

  .kau-compare__cta {
    /* 親（__inner）が左右 16px を持つので、帯側の 32px 控除と二重にしない */
    width: 100%;
    margin-bottom: 32px;
  }

  .kau-compare__lead {
    margin-top: 16px;
    font-size: 14px;
    /* 折り返す本文は中央寄せにしない（2026-09-14 指示・SP のみ） */
    text-align: left;
  }

  .kau-compare__table {
    grid-template-columns: 1fr 1fr;
    gap: 2px;
  }

  /* 左上の空きは出さず、行見出しを横いっぱいに */
  .kau-compare__corner {
    display: none;
  }

  /* 行見出しは横いっぱいの 1 行（番号・名前・右端にアイコン） */
  .kau-compare__rowhead {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 0;
    padding: 10px 16px;
  }

  .kau-compare__rowhead:first-of-type {
    border-top-left-radius: 0;
  }

  .kau-compare__rowhead-top {
    gap: 10px;
  }

  .kau-compare__number {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .kau-compare__label {
    font-size: 16px;
  }

  .kau-compare__icon {
    width: 36px;
    height: 36px;
    margin: 0 0 0 auto;
  }

  .kau-compare__icon--text {
    font-size: 20px;
  }

  .kau-compare__col {
    font-size: 14px;
  }

  .kau-compare__col img {
    width: 110px;
  }

  .kau-compare__cell {
    min-height: 0;
    /*
     * 左右の余白は 4px。**8px だと文字の収まる幅が足りない**
     * （画面 375px のとき内側 170.5px に対し、最長の行が 170px で
     * 余裕がほぼ無く折り返していた。2026-09-14 指摘）。
     */
    padding: 12px 4px;
  }

  /*
   * SP は絵を 1 枚だけにする（工具と釣具のイラスト。2 枚並べると
   * セルからはみ出す。2026-09-11 指示）。
   */
  .kau-compare__figures img:nth-child(n + 2) {
    display: none;
  }

  .kau-compare__figures img {
    max-width: 100%;
    height: auto;
  }

  .kau-compare__text,
  .kau-compare__cell--kau .kau-compare__text {
    /*
     * 最長の行「相場や値下げ交渉の影響を受けやすい」（17 文字）が
     * 指定した改行位置のまま 1 行に収まるサイズ。
     *   画面 375px → 9.0px → 必要 150px / 内側 178.5px
     *   画面 430px → 10.3px → 必要 172px / 内側 206px
     * 下限を 10px にしていたときは余裕が 0.5px しか無く折り返していた。
     */
    font-size: clamp(9px, calc(var(--kau-canvas-w) * 0.024), 12px);
    letter-spacing: -0.02em;
  }

  .kau-compare__note {
    font-size: 11px;
  }

  .kau-compare__footer {
    font-size: 13px;
    text-align: left;
  }
}

/* ==================================================================
 * SP（767px 以下）
 *
 * タブレット（1024px 以下）の指定を継承し、差分だけ書く。
 * ================================================================== */

/* 見出しの SP 用改行（文言側の \n 由来）。PC・タブレットでは 1 行 */
.kau-compare__heading-break {
  display: none;
}

@media (max-width: 767px) {
  /*
   * 締めの一文は 2 行に固定（2026-09-15 指示）:
   *   1 行目: カイトリアップなら、幅広い品目をまとめて高価買取！
   *   2 行目: 手間なくスピーディーに現金化できます。
   * 行の区切りは文言側の \n。行ごとに折り返しを禁止し、1 行目（25 文字）が
   * 枠に入る大きさまで文字を落とす。
   */
  .kau-compare__footer-line {
    display: block;
    white-space: nowrap;
  }

  /* 「カイトリアップと／フリマアプリの比較」で改行（2026-09-15 指示） */
  .kau-compare__heading-break {
    display: inline;
  }

  /*
   * **行ラベルは 1 行にする**（2026-09-14 指示）。
   * デザインは「まとめ買取／がある」の 2 行だが、SP では行の見出しが
   * 縦に伸びて中身と釣り合わない。文中の改行だけ無効にする。
   */
  .kau-compare__label br {
    display: none;
  }
}