@charset "utf-8";

/*
 * 作業事例の一覧ページ
 * 見た目はFigma「20260929_作業事例一覧」に合わせている。
 * 色はテーマの実測値。緑 #00c26d ／ 濃い緑 #2c8b60 ／ 薄緑 #daf0e6 ／ 電話の赤 #cc0814 ／ オレンジ #f18122
 */

.reportArchive {
  /* 色はFigma「20260929_作業事例一覧」から実測した値 */
  --ra-brand: #00c26d;
  --ra-brand-dark: #16825d;   /* 見出し・選択中のタブ・項目名 */
  --ra-brand-light: #e6f8ed;  /* お客様の声の枠・絞り込みの地 */
  --ra-brand-pale: #e6f8ed;
  --ra-applied: #cce3d5;      /* 絞り込み中の帯 */
  --ra-chip-on: #636363;      /* 選んだ項目のチップ */
  --ra-label-bg: #f3f3f3;     /* 絞り込みの左のラベル欄 */
  --ra-star: #e88100;         /* 星と点数 */
  --ra-photo-tag: #3c3c3c;    /* Before・After の札 */
  --ra-photo-time: #2e2a26;   /* ◯分で完了！の札 */
  --ra-tel: #cc0814;
  --ra-orange: #f18122;
  --ra-ink: #222;
  --ra-sub: #666;
  --ra-faint: #999;
  --ra-line: #d8e6df;
  --ra-line2: #ececec;
  --ra-gray: #f2f2f2;
  color: var(--ra-ink);
}

/* ページの見出しの帯。PCもスマホも上下左右10px（三浦の指示 2026-09-30） */
#main.reportArchiveMain {
  padding: 10px;
}

/* このページ用の囲み。部品が持つ .inner には触らない。
   .inner をまとめて上書きすると、中に入れたCTAなどの部品が崩れる */
.reportArchive .raInner {
  max-width: 1340px;   /* 中身 1300px ＋ 左右 20px */
  margin: 0 auto;
  padding: 0 20px;
}

.reportArchive .archiveLead {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ra-sub);
  margin: 16px 0 20px;
}

/* ===== 条件で絞り込む ===== */
.reportFilter {
  background: var(--ra-brand-pale);
  border-radius: 14px;
  padding: 20px 40px 0;
  margin-bottom: 40px;   /* 枠の下端から事例一覧まで 40px */
}

.filterHead {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #cacaca;
  margin-bottom: 20px;
}

.filterTitle {
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  color: #000;
  margin: 0;
}

.filterApplied {
  display: none;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  gap: 12px;
  background: var(--ra-applied);
  border-radius: 50px;
  padding: 10px 20px;
}

.filterApplied.isOn {
  display: flex;
}

.filterApplied .appliedLabel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  color: #000;
  white-space: nowrap;
}

.filterApplied .appliedLabel::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 10px;
  margin-right: 6px;
  vertical-align: -1px;
  background:
    linear-gradient(var(--ra-sub), var(--ra-sub)) 0 0 / 14px 2px no-repeat,
    linear-gradient(var(--ra-sub), var(--ra-sub)) 2px 4px / 10px 2px no-repeat,
    linear-gradient(var(--ra-sub), var(--ra-sub)) 4px 8px / 6px 2px no-repeat;
}

.appliedTag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #fff;
  border-radius: 100px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  line-height: 1;
}

.appliedTag:hover {
  background: var(--ra-brand-light);
}

.appliedTag .tagClose {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #b9b9b9;
  position: relative;
  flex: none;
}

.appliedTag .tagClose::before,
.appliedTag .tagClose::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 8px;
  height: 2px;
  background: #fff;
}

.appliedTag .tagClose::before { transform: rotate(45deg); }
.appliedTag .tagClose::after  { transform: rotate(-45deg); }

.appliedClear {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 26px;
  border: 1px solid #a1a1a1;
  background: #fff;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: #636363;
  text-decoration: none;
  white-space: nowrap;
}

.appliedClear:hover {
  border-color: var(--ra-brand-dark);
  color: var(--ra-brand-dark);
}

.filterTail {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.filterCount {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #000;
  margin: 0;
  white-space: nowrap;
}

.filterCount b {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--ra-tel);
}

.filterSort {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #636363;
  white-space: nowrap;
}

/* 矢印はブラウザ任せにせず自前で描く。ブラウザの矢印は右端に寄りすぎて動かせない（三浦の指摘 2026-10-01）。
   幅は一番長い「作業時間が短い順」が切れないよう、文字に合わせて広げる */
.filterSort select {
  box-sizing: border-box;
  width: auto;
  min-width: 133px;
  height: 32px;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%206%22%3E%3Cpath%20d%3D%22M1%201l4%204%204-4%22%20fill%3D%22none%22%20stroke%3D%22%23636363%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E") no-repeat right 14px center / 10px 6px;
  padding: 0 34px 0 12px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: #636363;
}

/* 絞り込みの3行 */
.filterBody {
  background: #fff;
  border: 1px solid var(--ra-line);
  border-radius: 12px;
  overflow: hidden;
}

.filterRow {
  display: flex;
  align-items: stretch;
  min-height: 56px;
  border-bottom: 1px solid #cacaca;
}

.filterRow:last-child {
  border-bottom: 0;
}

/* 見出し欄はデザインの160pxから140pxに詰める。項目を1行に収めるため（三浦の指示 2026-09-30） */
.filterRow .rowLabel {
  flex: 0 0 140px;
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: stretch;
  background: var(--ra-label-bg);
  margin: 0;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: #636363;
}

/* 絞り込みの軸のアイコン。線の色は見出しの文字色に合わせる */
.rowIcon {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--ra-brand-dark);
}

.filterRow .rowChips {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  gap: 6px;
  padding: 10px 14px;
  margin: 0;
  list-style: none;
}

/* デザインはカテゴリ5つで1行。実際は「引越し時の不用品回収」を足した6つあるので、
   文字13px・左右12px・約物を詰めて、1280px以上の画面で1行に収める（三浦の指示 2026-09-30） */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  height: 32px;
  border: 1px solid #cacaca;
  border-radius: 100px;
  background: #fff;
  padding: 4px 12px;
  font-size: 13px;
  font-feature-settings: "palt";
  font-weight: 400;
  color: #2a2a2a;
  text-decoration: none;
  line-height: 1;
}

.chip:hover {
  border-color: var(--ra-brand);
  color: var(--ra-brand-dark);
}

.chip.isOn {
  background: var(--ra-chip-on);
  border-color: var(--ra-chip-on);
  color: #fff;
  font-weight: 500;
}

/* 「すべて」だけは緑 */
.chip--all.isOn {
  background: var(--ra-brand-dark);
  border-color: var(--ra-brand-dark);
}

.chipCount {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e7e7e7;
  border-radius: 16px;
  padding: 4px;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: var(--ra-brand-dark);
}

.chip.isOn .chipCount {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

/* スマホの絞り込みボタンとモーダルの部品。PCでは出さない */
.filterSheetOpen,
.filterClear,
.filterOverlay,
.sheetHead,
.sheetFoot,
.chipCount--all {
  display: none;
}

/* 0件の項目はPCでは隠す（スマホのモーダルでは他の条件を選び直すと件数が戻るので残す） */
.rowChips li.isZero {
  display: none;
}

/* CTAのスマホだけの部品 */
.telBadge,
.telTimeSp {
  display: none;
}

/* ===== 相場とデータ ===== */
.reportStats {
  margin-top: 20px;
}

.statsTabs {
  display: flex;
  gap: 6px;
  min-height: 46px;
  border-bottom: 2px solid var(--ra-brand-dark);
  margin-bottom: 16px;
}

.statsTabs button {
  border: 1px solid var(--ra-line);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #fff;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ra-sub);
  cursor: pointer;
  line-height: 1.3;
}

.statsTabs button[aria-selected="true"] {
  background: var(--ra-brand-dark);
  border-color: var(--ra-brand-dark);
  color: #fff;
}

.statsTabs .tabSm {
  display: none;
}

.statsPanel[hidden] {
  display: none !important;
}

/* 相場のまとめ */
.statsKpi {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Figmaの定義 … 箱280x100・余白24px・角丸8px・線 #CACACA。アイコン36px、アイコンと文字の間12px。
   数字は Roboto Bold 40px、単位は 18px（¥ だけ 24px）、説明は 12px #636363 */
.statsKpi li {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid #cacaca;
  border-radius: 8px;
  padding: 16px 24px;
  /* 高さはデザインの100pxを下限にし、説明が折り返したら伸ばす。決め打ちにすると文字が枠からはみ出す */
  min-height: 100px;
  min-width: 0;
}

/* アイコンはFigmaの書き出し。¥ とグラフは丸まで入っている。時計とトラックは丸を敷く */
/* アイコンはデザインの36pxより大きく50px（三浦の指示 2026-09-30）。中の絵も同じ割合で大きくする */
.kpiIcon {
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #daf0e9 no-repeat center;
}

.kpiIcon--yen   { background: url(../images/report-archive/kpi-yen.svg) no-repeat center / 100% 100%; }
.kpiIcon--chart { background: url(../images/report-archive/kpi-chart.svg) no-repeat center / 100% 100%; }
.kpiIcon--time  { background-image: url(../images/report-archive/kpi-time.svg); background-size: 28px 25px; background-position: calc(50% + 1px) 50%; }
.kpiIcon--truck { background-image: url(../images/report-archive/kpi-truck.svg); background-size: 27px 20px; background-position: calc(50% + 1px) 50%; }

/* 数字と説明の間。PCもスマホも8px（三浦の指示 2026-09-30） */
.kpiText {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.kpiValue {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin: 0;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-weight: 700;
  line-height: 1;
  color: var(--ra-brand-dark);
  white-space: nowrap;
}

.kpiNum {
  font-size: 40px;
}

.kpiValue small {
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.kpiMoney .kpiValue {
  gap: 0;
  color: var(--ra-tel);
}

.kpiValue .kpiYen {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 24px;
}

/* 折り返すのは <wbr> の位置だけ。それでも入らないときだけ文字の途中で折る。
   括弧の前後の空きはFigmaと同じく詰める（palt） */
.kpiNote {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  color: #636363;
  margin: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-feature-settings: "palt";
}

/* 「中央値（642件）」はひとまとまり。全角の「（」の前でもブラウザは折り返すので止める */
.kpiNote .kpiKeep {
  white-space: nowrap;
}

/* 棒グラフ */
.statsBars,
.statsRank {
  list-style: none;
  margin: 0;
  padding: 0;
}

.statsBars li {
  display: grid;
  grid-template-columns: auto 1fr 44px 48px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 5px 0;
}

.statsBars--price li {
  grid-template-columns: 90px 1fr 60px;
  padding: 6px 0;
}

.statsBars--price .barCount {
  font-size: 19px;
  font-weight: 800;
  color: var(--ra-sub);
}

.statsBars--price .isTop .barTrack i {
  background: var(--ra-orange);
}

.statsBars--price .isTop .barCount {
  color: var(--ra-orange);
  font-size: 22px;
}

/* よく回収している品目は2列。順位は四角 */
.statsRank {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 44px;
}

.statsRank li {
  display: grid;
  grid-template-columns: 22px auto 1fr 40px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 5px 0;
}

.barLabel,
.rankLabel {
  white-space: nowrap;
  font-weight: 700;
}

.barTrack {
  height: 11px;
  background: var(--ra-gray);
  border-radius: 4px;
  overflow: hidden;
}

.barTrack i {
  display: block;
  height: 100%;
  background: var(--ra-brand);
  border-radius: 4px;
  transition: width .7s cubic-bezier(.22, .8, .3, 1);
}

.barRatio {
  text-align: right;
  font-weight: 800;
  color: var(--ra-brand-dark);
  font-variant-numeric: tabular-nums;
}

.barRatio small {
  font-size: 10px;
  margin-left: 1px;
}

.barCount {
  text-align: right;
  color: var(--ra-sub);
  font-variant-numeric: tabular-nums;
}

.rankNo {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  background: var(--ra-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

a.rankLabel {
  color: var(--ra-ink);
  text-decoration: none;
}

a.rankLabel:hover {
  color: var(--ra-brand-dark);
  text-decoration: underline;
}

/* 間取り別の表 */
.statsTableWrap {
  overflow-x: auto;
}

.statsTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
}

.statsTable th,
.statsTable td {
  border: 1px solid var(--ra-line);
  padding: 9px 12px;
  white-space: nowrap;
}

.statsTable thead th {
  background: var(--ra-brand-dark);
  color: #fff;
  font-weight: 700;
}

.statsTable tbody tr:nth-child(odd) {
  background: #f7f7f7;
}

.statsTable .right {
  text-align: right;
}

.statsTable td {
  font-variant-numeric: tabular-nums;
}

.statsTable .range {
  color: var(--ra-sub);
}

/* ご依頼いただいた方 */
.statsProfile {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 22px;
}

.profileGroup + .profileGroup {
  border-left: 1px solid var(--ra-line2);
  padding-left: 22px;
}

.profileGroup h4 {
  font-size: 13px;
  font-weight: 800;
  color: var(--ra-brand-dark);
  margin: 0 0 6px;
}

.profileGroup .statsBars li {
  grid-template-columns: auto 1fr 38px 34px;
  gap: 7px;
  font-size: 12.5px;
}

.statsNote {
  font-size: 12px;
  color: var(--ra-sub);
  margin: 12px 0 0;
  line-height: 1.7;
}

/* ===== この条件の新着事例 ===== */
.reportRecent {
  margin-top: 20px;
}

.recentTitle {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 18px;
  font-weight: 800;
  color: var(--ra-brand-dark);
  margin: 0 0 20px;
}

.recentTitle::before,
.recentTitle::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ra-line);
}

/* Figmaの実測 … カード375x140、写真126x140、本文217、間隔16px、カード間20px */
.recentList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.recentItem a {
  display: flex;
  gap: 16px;
  box-sizing: border-box;
  min-height: 140px;
  background: #fff;
  border: 1px solid var(--ra-line);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ra-ink);
  height: 100%;
}

/* 写真は事例カードと同じく3枚で切り替わる */
.recentPhoto {
  position: relative;
  flex: 0 0 126px;
  width: 126px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  background: var(--ra-gray);
}

.recentPhoto .introSlide {
  position: absolute;
  inset: 0;
}

.recentPhoto .introBox {
  min-width: 0;
}

.recentPhoto .photoImg {
  margin: 0;
  height: 100%;
}

.recentPhoto .photoImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.recentPhoto .isReceipt {
  background: #fff;
}

.recentPhoto .isReceipt .photoImg img {
  object-fit: cover;
}

.recentTag {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  min-height: 20px;
  background: var(--ra-photo-tag);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 0 0 6px 0;
}

.recentTag--after {
  background: var(--ra-star);
}

.recentTag--receipt {
  background: var(--ra-photo-tag);
}

.recentBody {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 16px 16px 0;
  min-width: 0;
}

.recentHead {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 21px;
  margin: 0;
}

.recentNew {
  background: var(--ra-tel);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: 3px;
  padding: 2px 6px;
  line-height: 1.3;
}

/* Figmaの定義 … Noto Sans JP Bold 14px、余白8px、角丸4px */
.cardNew {
  flex: none;
  background: var(--ra-tel);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  border-radius: 4px;
  padding: 6px 8px;
}

.recentName {
  font-size: 14px;
  font-weight: 700;
}

.recentFloor {
  font-size: 12px;
  color: var(--ra-sub);
}

.recentVoice {
  box-sizing: border-box;
  height: 38px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ra-sub);
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.recentPrice {
  min-height: 17px;
  font-size: 18px;
  line-height: 1;
  font-weight: 800;
  color: var(--ra-tel);
  margin: 0;
  font-family: "Poppins", "Noto Sans JP", sans-serif;
}

/* CTAの帯は緑の枠いっぱいに出す。左右の余白を打ち消す */
/* 人物はFigmaどおり帯の上にはみ出させるので、ここでは切り取らない */
.filterCta {
  margin: 30px -40px 0;
  border-radius: 0 0 14px 14px;
}

/* ===== 事例一覧 ===== */
.reportList {
  margin-bottom: 44px;
}

/* 事例の並びとページ送りのあいだ。デザインの実測は24px */
.reportList .pagination {
  margin-top: 24px;
}

/* Figmaの定義 … 「事例一覧」Bold 32px。件数は数字だけ Roboto Bold 20px の緑、残りは Medium 12px #636363。
   見出しからカードまで24px */
.listTitle {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  color: #000;
  margin: 0 0 24px;
}

.listTitle small {
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  color: #636363;
}

.listTitle small b {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--ra-brand-dark);
  margin: 0 3px;
}

.listTitle small b:first-child {
  margin-left: 0;
}

/* ページ送り。Figmaの定義 … 40px角、線2px #00C26D、角丸4px、Roboto Bold 18px、間8px */
.reportList .pagination {
  gap: 8px;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 18px;
}

.reportList .pagination li {
  padding: 0;
}

.reportList .pagination a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 6px;
  border-radius: 4px;
  line-height: 1;
}

.reportList .pagination .resultDot a {
  min-width: 24px;
  padding: 0;
  font-size: 32px;
  align-items: flex-end;
}

.reportCards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 並べた箱は、中の写真の元サイズまで広がってしまうので幅の下限を外す */
.reportCards > li,
.recentList > li {
  min-width: 0;
}

.reportArchive img {
  max-width: 100%;
}

/* Figmaの定義 … 線は無く、ぼかし30pxの薄い影。角丸8px */
.reportCard .cardLink {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(0, 0, 0, .08);
  overflow: hidden;
  text-decoration: none;
  color: #000;
  transition: box-shadow .15s;
}

.reportCard .cardLink:hover {
  box-shadow: 0 0 30px rgba(0, 0, 0, .16);
}

.cardPhotos {
  position: relative;
  aspect-ratio: 406.67 / 235;
  overflow: hidden;
  background: var(--ra-gray);
}

/* 中を浮かせておかないと、写真の元の高さが枠を押し広げてカードの高さがバラつく */
.reportArchive .cardPhotos .introSlide {
  position: absolute;
  inset: 0;
}

.reportArchive .introSlide,
.reportArchive .introBox {
  height: 100%;
}

/* 写真は1枚ずつ。幅の指定はスライダーの処理が入れるので、ここでは下限だけ外す */
.reportArchive .cardPhotos .introBox {
  min-width: 0;
}

.recentPhoto,
.recentBody {
  min-width: 0;
}

.photoImg {
  margin: 0;
  height: 100%;
}

.photoImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Figmaの実測 … Before は #3C3C3C、After は #E88100。どちらも不透明。
   角丸は左上8px・右下16px、文字は Roboto Bold 24px、余白 8px 16px */
.photoTag {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  background: var(--ra-photo-tag);
  color: #fff;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.17;
  padding: 8px 16px;
  border-radius: 8px 0 16px 0;
}

/* Figmaの実測 … Before は濃いグレー、After はオレンジ、実際のお支払い は濃いグレー */
.photoTag--after {
  background: var(--ra-star);
}

/* 領収書の札だけは角にぴったり付けず、内側に浮かせる。
   Figmaの実測 … 左13px・上20px、箱は157x42、文字の余白は上下8px・左右16px */
/* 領収書の札だけは角から離し、半透明の黒にする */
.photoTag--receipt {
  left: 13px;
  top: 20px;
  background: rgba(0, 0, 0, .5);
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  line-height: 1.45;
  padding: 8px 16px;
  border-radius: 8px;
}

/* 領収書も写真と同じ切り取り方（三浦の指示 2026-09-30） */
.reportArchive .introBox.isReceipt {
  background: #fff;
}

.reportArchive .introBox.isReceipt .photoImg img {
  object-fit: cover;
}

/* 「◯分で完了！」は半透明の黒。数字だけ大きい */
.photoTime {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  background: rgba(0, 0, 0, .5);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.19;
  padding: 8px 16px;
  border-radius: 8px;
  white-space: nowrap;
}

.photoTime b {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 700;
}

.cardBody {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

/* Figmaの定義 … 名前は SemiBold 16px。カテゴリの札は Regular 12px #636363、線 #CACACA、角丸4px、高さ27px */
.cardHead {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  min-height: 27px;
}

.cardName {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}

.cardKind {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 27px;
  margin-left: auto;
  border: 1px solid #cacaca;
  border-radius: 4px;
  background: #fff;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  color: #636363;
  white-space: nowrap;
}

/* Figmaの実測 … 星は21px×5＝105px、点数はRoboto SemiBold 18px #E88100、
   「お客様アンケート」は14px #666。星と点数の間7px、点数と文字の間8px */
.cardRate {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 21px;
  margin: 0;
}

.rateStars {
  position: relative;
  display: inline-block;
  flex: none;
  width: 105px;
  height: 21px;
  margin-right: -1px;
  background: #dcdcdc;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.3l2.95%205.98%206.6.96-4.77%204.65%201.12%206.57L12%2017.36l-5.9%203.1%201.13-6.57L2.46%209.24l6.6-.96z%22%2F%3E%3C%2Fsvg%3E") repeat-x left center / 21px 21px;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202.3l2.95%205.98%206.6.96-4.77%204.65%201.12%206.57L12%2017.36l-5.9%203.1%201.13-6.57L2.46%209.24l6.6-.96z%22%2F%3E%3C%2Fsvg%3E") repeat-x left center / 21px 21px;
}

.rateFill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--ra-star);
}

.rateValue {
  margin-left: -1px;
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: var(--ra-star);
}

.rateNote {
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  color: #666;
}

/* Figmaの定義 … 地 #E6F8ED、余白8px、角丸4px。Regular 12px・行の高さ18px・黒。2行まで */
.cardVoice {
  box-sizing: border-box;
  background: var(--ra-brand-light);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  line-height: 18px;
  color: #000;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* Figmaの定義 … ¥ は Roboto Medium 32px、金額は Roboto SemiBold 40px、赤。
   「実際のお支払い額」は 12px #666。間8px、下揃え */
.cardPrice {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  margin: 0;
  white-space: nowrap;
}

.priceYen {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1;
  color: var(--ra-tel);
}

.priceYen small {
  font-size: 32px;
  font-weight: 500;
  margin-right: .2em;
}

.priceNote {
  font-size: 12px;
  font-weight: 400;
  color: #666;
}

/* Figmaの定義 … 14px。項目名は SemiBold の緑、値は Regular の黒。
   下に黒の破線、上下8px。項目どうしは 横14px・縦5px で折り返す */
.cardSpec {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
}

.cardSpec > div {
  display: flex;
  gap: 11px;
  box-sizing: border-box;
  border-bottom: 1px dashed #000;
  padding: 8px 0;
  min-width: 0;
  max-width: 100%;
  align-items: flex-start;
}

.cardSpec dt {
  color: var(--ra-brand-dark);
  font-weight: 600;
  white-space: nowrap;
}

.cardSpec dt::after {
  content: "：";
}

.cardSpec dd {
  margin: 0;
  font-weight: 400;
  color: #000;
}

/* 該当なし */
.reportEmpty {
  background: #fff;
  border: 1px solid var(--ra-line);
  border-radius: 12px;
  padding: 40px 20px;
  text-align: center;
}

.emptyTitle {
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 6px;
}

.emptyText {
  font-size: 13px;
  color: var(--ra-sub);
  margin: 0 0 16px;
}

.emptyBack {
  display: inline-block;
  background: var(--ra-brand-dark);
  color: #fff;
  border-radius: 8px;
  padding: 11px 26px;
  font-weight: 700;
  text-decoration: none;
}

/* ===== 狭いPC ===== */
/* 4つ並べると数字（40px）が枠に入らなくなるので2列にする */
@media screen and (max-width: 1200px) {
  .statsKpi {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== タブレット ===== */
@media screen and (max-width: 1024px) {
  .statsKpi,
  .statsProfile {
    grid-template-columns: repeat(2, 1fr);
  }

  .reportCards,
  .recentList {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== スマホ ===== */
/* Figma「SP_相場まとめ」「SP_条件で絞り込む」（390px幅）の定義から起こした値 */
@media screen and (max-width: 767px) {
  .reportArchive .raInner {
    padding: 0 15px;
  }

  /* 絞り込みの薄緑は画面の端まで。中身は左右15px（Figmaは中身360px） */
  .reportFilter {
    margin: 0 -15px 38px;
    padding: 6px 15px 43px;
    border-radius: 0;
  }

  .filterCta {
    margin: 22px 0 0;
    border-radius: 12px;
  }

  /* 見出しと並び替えを1行に。下に #CACACA の線。320pxなど入らない幅では並び替えを次の行へ */
  .filterHead {
    flex-wrap: wrap;
    gap: 12px;
    padding: 8px 0;
    margin-bottom: 16px;
  }

  .filterTitle {
    font-size: 18px;
    font-weight: 600;
    white-space: nowrap;
  }

  /* 条件はモーダルを開くボタンに出すので、上の帯は畳む */
  .filterApplied {
    display: none !important;
  }

  .filterCount {
    display: none;
  }

  .filterTail {
    margin-left: auto;
  }

  /* 「並び替え」の文字は出さない。選ぶ欄に aria-label がある */
  .filterSort .sortLabel {
    display: none;
  }

  /* 一番長い「作業時間が短い順」まで切れずに出る幅にする */
  .filterSort select {
    width: auto;
    min-width: 150px;
    height: 38px;
    padding: 0 40px 0 12px;
    background-position: right 16px center;
    border-color: #e4e4e4;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    color: #636363;
  }

  /* いまの条件と件数が見えるボタン。押すとモーダルが開く */
  .filterSheetOpen {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    min-height: 56px;
    padding: 8px 12px;
    border: 2px solid var(--ra-brand-dark);
    border-radius: 8px;
    background: #fff;
    color: #000;
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .sheetLead {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
  }

  .sheetIcon {
    flex: none;
    width: 40px;
    height: 40px;
  }

  /* 条件を3つ選ぶと1行に入らないので、折り返して全部出す */
  .sheetCurrent {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
  }

  .sheetCount {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex: none;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    color: #000;
    white-space: nowrap;
  }

  .sheetCount b {
    font-family: "Roboto", "Noto Sans JP", sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--ra-brand-dark);
  }

  /* 条件を消す。デザインどおり灰色の地。条件で絞り込んでいるときだけ出る */
  .filterClear {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 50px;
    margin-top: 8px;
    border: 1px solid #cacaca;
    border-radius: 8px;
    background: #e7e7e7;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #636363;
    text-decoration: none;
  }

  .filterClear::before {
    content: "";
    width: 16px;
    height: 16px;
    background: url(../images/report-archive/icon-clear.svg) no-repeat center / 100% 100%;
  }

  /* ===== 絞り込みのモーダル（Figma「SP_条件で絞り込む」） ===== */
  .filterBody {
    display: none;
  }

  /* 画面の一番上から出す。上に隙間を残さない（三浦の指示 2026-09-30） */
  .filterBody.isOpen {
    position: fixed;
    z-index: 10001;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    overflow: hidden;
  }

  .filterOverlay {
    display: block;
    position: fixed;
    z-index: 10000;
    inset: 0;
    background: rgba(0, 0, 0, .6);
  }

  .filterOverlay[hidden] {
    display: none;
  }

  /* 開いているあいだは後ろの画面を動かさない */
  html.isFilterOpen,
  html.isFilterOpen body {
    overflow: hidden;
  }

  .sheetHead {
    flex: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 8px;
    background: var(--ra-brand-dark);
  }

  .sheetTitle {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
  }

  .sheetTitle img {
    width: 40px;
    height: 40px;
  }

  .sheetClose {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 0;
    border-radius: 4px;
    background: #fff;
    color: var(--ra-brand-dark);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
  }

  .sheetClose::after {
    content: "";
    width: 16px;
    height: 16px;
    background: url(../images/report-archive/icon-close.svg) no-repeat center / 100% 100%;
  }

  .sheetScroll {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 24px 15px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .sheetFoot {
    flex: none;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 80px;
    padding-bottom: env(safe-area-inset-bottom);
    background: #e7e7e7;
  }

  .sheetReset {
    box-sizing: border-box;
    width: 134px;
    height: 50px;
    border: 1px solid #a1a1a1;
    border-radius: 8px;
    background: #fff;
    color: #a1a1a1;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
  }

  /* 何か選んでいるときは押せる色にする */
  .sheetReset.isActive {
    border-color: #636363;
    color: #636363;
  }

  .sheetApply {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 50px;
    padding: 0 24px;
    border-radius: 8px;
    background: var(--ra-brand);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
  }

  /* 0件の組み合わせでは押せなくする */
  .sheetApply.isEmpty {
    background: #a1a1a1;
    pointer-events: none;
  }

  .applyCount {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    padding: 6px;
    border-radius: 16px;
    background: #fff;
    color: #636363;
    font-family: "Roboto", "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
  }

  /* 縮めると中の項目が次のまとまりに重なるので、高さは中身どおりにする */
  .filterRow {
    flex: none;
    display: block;
    min-height: 0;
    border: 0;
    margin: 0;
  }

  .filterRow .rowLabel {
    display: block;
    background: none;
    padding: 0;
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ra-brand-dark);
  }

  .filterRow .rowIcon {
    display: none;
  }

  .filterRow .rowChips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 0;
  }

  .rowChips li.isZero {
    display: block;
  }

  .chip {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    width: 100%;
    height: 56px;
    padding: 0 12px;
    border: 1px solid #cacaca;
    border-radius: 8px;
    background: #fff;
    color: #636363;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
  }

  .chip:hover {
    border-color: #cacaca;
    color: #636363;
  }

  .chipName {
    min-width: 0;
  }

  .chip.isOn,
  .chip--all.isOn,
  .chip.isOn:hover {
    background: var(--ra-brand-dark);
    border-color: var(--ra-brand-dark);
    color: #fff;
  }

  .chipCount,
  .chip.isOn .chipCount {
    flex: none;
    padding: 6px;
    border-radius: 16px;
    background: #e7e7e7;
    color: var(--ra-brand-dark);
    font-size: 14px;
    font-weight: 500;
  }

  .chipCount--all {
    display: inline-flex;
  }

  /* 他の条件と組み合わせると0件になる項目 */
  .chip.isDisabled {
    opacity: .4;
    pointer-events: none;
  }

  /* ===== 相場とデータ ===== */
  .reportStats {
    margin-top: 21px;
  }

  /* タブ5つを1行に。Figma … SemiBold 15px、左右8px、高さ36px、上だけ角丸4px、下に2pxの緑線 */
  .statsTabs {
    justify-content: space-between;
    gap: 0;
    min-height: 0;
    margin-bottom: 9px;
  }

  .statsTabs button {
    flex: none;
    box-sizing: border-box;
    height: 36px;
    padding: 0 8px;
    border: 1px solid var(--ra-brand-dark);
    border-bottom: 0;
    border-radius: 4px 4px 0 0;
    background: #fff;
    color: var(--ra-brand-dark);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
  }

  .statsTabs button[aria-selected="true"] {
    background: var(--ra-brand-dark);
    color: #fff;
  }

  .statsTabs .tabLg { display: none; }
  .statsTabs .tabSm { display: inline; }

  /* 相場のまとめ。Figma … 176x80、左8px、アイコン32px、間8px。数字24px・単位14px・¥20px、説明 Bold 12px */
  .statsKpi {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* 高さはデザインの80pxを下限にし、説明が長いときは箱を伸ばして全文を出す（三浦の指示 2026-09-30） */
  .statsKpi li {
    height: auto;
    min-height: 80px;
    gap: 8px;
    padding: 12px 10px 12px 8px;
  }

  .kpiIcon {
    width: 32px;
    height: 32px;
  }

  .kpiIcon--time  { background-size: 18px 16px; }
  .kpiIcon--truck { background-size: 19.5px 14.5px; }

  /* 狭い画面で「1.5t トラック」が入らないときは、単位を次の行へ */
  .kpiValue {
    flex-wrap: wrap;
    gap: 2px;
  }

  .kpiNum {
    font-size: 24px;
  }

  .kpiValue small {
    font-size: 14px;
  }

  .kpiValue .kpiYen {
    font-size: 20px;
  }

  /* 回収量の単位だけ16px */
  .kpiIcon--truck + .kpiText .kpiValue {
    gap: 4px;
  }

  .kpiIcon--truck + .kpiText .kpiValue small {
    font-size: 16px;
  }

  /* 説明は途中で切らない。デザインは回収量の説明を1行で「…」にしていたが、読めないので全文を出す */
  .kpiNote {
    font-weight: 700;
    line-height: 16px;
  }

  .statsProfile {
    grid-template-columns: 1fr 1fr;
    gap: 12px 14px;
  }

  .statsRank {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .profileGroup + .profileGroup {
    border-left: 0;
    padding-left: 0;
  }

  .statsBars--price li {
    grid-template-columns: 76px 1fr 48px;
  }

  .profileGroup .statsBars li {
    grid-template-columns: auto 1fr 34px 30px;
    gap: 5px;
    font-size: 12px;
  }

  /* ===== この条件の新着事例。Figma … 写真110x124、札は角に付ける、本文は上下12px ===== */
  .reportRecent {
    margin-top: 31px;
  }

  .recentTitle {
    display: block;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px;
  }

  .recentTitle::before,
  .recentTitle::after {
    content: none;
  }

  .recentList {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .recentItem a {
    gap: 12px;
    min-height: 124px;
    border: 0;
    border-radius: 8px;
  }

  .recentPhoto {
    flex: 0 0 110px;
    width: 110px;
  }

  .recentTag {
    min-height: 0;
    padding: 2px 8px;
    border-radius: 6px 0 4px 0;
    font-family: "Roboto", "Noto Sans JP", sans-serif;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
  }

  .recentTag--receipt {
    font-family: "Noto Sans JP", sans-serif;
    font-size: 12px;
    line-height: 1.4;
  }

  .recentBody {
    justify-content: center;
    gap: 8px;
    padding: 12px 16px 12px 0;
  }

  /* 名前が長いときは折り返す。途中で切らない */
  .recentHead {
    gap: 4px;
    min-width: 0;
  }

  .recentNew {
    flex: none;
    box-sizing: border-box;
    width: 35px;
    padding: 4px 0;
    border-radius: 4px;
    font-family: "Roboto", "Noto Sans JP", sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
  }

  .recentName,
  .recentFloor {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #000;
  }

  .recentName {
    min-width: 0;
  }

  .recentFloor {
    flex: none;
    margin-left: .5em;
    white-space: nowrap;
  }

  .recentVoice {
    height: auto;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    color: #636363;
  }

  .recentPrice {
    font-family: "Roboto", "Noto Sans JP", sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
  }

  /* ===== 事例一覧 ===== */
  .reportCards {
    grid-template-columns: 1fr;
  }

  .reportCards {
    gap: 16px;
  }

  /* 写真は 360x203 */
  .cardPhotos {
    aspect-ratio: 360 / 203;
  }

  /* 名前の下にカテゴリの札。Figma … 名前 SemiBold 18px、札・説明・値は Bold */
  .cardHead {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px 6px;
  }

  .cardName {
    font-size: 18px;
  }

  .cardKind {
    grid-column: 1 / -1;
    justify-self: start;
    margin-left: 0;
    font-weight: 700;
  }

  .rateNote,
  .cardVoice,
  .cardSpec dd {
    font-weight: 700;
  }


  .priceYen {
    font-size: 32px;
  }

  .priceYen small {
    font-size: 28px;
    font-weight: 700;
  }

  .priceNote {
    font-size: 14px;
    font-weight: 700;
  }

  .listTitle {
    gap: 4px 18px;
    font-size: 18px;
    margin-bottom: 19px;
  }

  .listTitle small {
    font-weight: 700;
  }
}

/* 絞り込みの枠の中に入れるCTA帯。
   もともと幅いっぱいで使う作りなので、枠の内側でも収まるように幅の指定を外す */
.reportArchive .filterCta .areaCtaHoarding {
  margin: 0;
}




/* =========================================================================
 * CTAの帯（Figma Frame 191 / 1300x116）
 * 定義から起こした値をそのまま使う。左が緑、右が白地。
 * 並びは 電話 → メール → LINE で固定
 * ========================================================================= */
.raCta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  box-sizing: border-box;
  min-height: 116px;
  padding-right: 16px;
  background: #fff;
  border: 3px solid var(--ra-brand-dark);
  border-radius: 0 0 12px 12px;
}

/* --- 左：緑の訴求 --- */
.raCtaLead {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  gap: 11px;
  align-self: stretch;
  width: 480px;
  padding: 0 16px;
  background: var(--ra-brand-dark);
  /* 外枠の角丸の内側に合わせる。枠で切り取らないので、ここで角を丸める */
  border-radius: 0 0 0 9px;
}

/* 人物は帯の上にはみ出す。下端は外枠の線3pxに重ねて、人物の下に線が見えないようにする（三浦の指示 2026-09-30） */
.raCtaPhoto {
  position: absolute;
  left: 8px;
  bottom: -3px;
  width: 134px;
  height: 139px;
  margin: 0;
}

/* デザインと同じ見た目にする（三浦の指示 2026-09-30）。
   Figmaは元の画像（698x1024）を枠134x139いっぱいに合わせて描いているので、ここでも同じにする。
   縦横の比は保たない。帽子の先から手の下までが全部入る */
.raCtaPhoto img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* Figmaでは帯の左の余白16pxのすぐ右から置く。右に寄せると吹き出しが人物から離れる（三浦の指摘 2026-09-30） */
.raCtaWords {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  width: 429px;
  height: 88px;
  margin-left: 0;
}

/* 吹き出しはFigmaの形（左に角がある）をそのまま敷く。243x34。
   Figmaでは幅280pxの箱の左に置いてあるので、右に37px空ける */
.raCtaPill {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 243px;
  height: 34px;
  margin: 0 37px 0 0;
  padding: 0 9px 0 17px;
  background: url(../images/report-archive/cta-bubble-pc.svg) no-repeat left center / 100% 100%;
  color: var(--ra-brand-dark);
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  white-space: nowrap;
  /* Figmaと同じく約物を詰める。詰めないと「！」が吹き出しからはみ出す */
  font-feature-settings: "palt";
}

/* 見出しは全部黄色 */
.raCtaTitle {
  margin: 0;
  color: #fafa34;
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .05em;
  white-space: nowrap;
  font-feature-settings: "palt";
}

.raCtaTitle em {
  font-style: normal;
  color: inherit;
}

/* --- 右：連絡先 --- */
.raCtaContact {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 798px;
  /* 外枠3pxの内側。116pxにすると枠ぶん高くなり、人物の下に隙間が出る */
  height: 110px;
}

.raCtaTel {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  text-decoration: none;
  color: var(--ra-tel);
}

.telHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 225px;
}

.telFree {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 57px;
  height: 17px;
  background: var(--ra-tel);
  color: #fff;
  font-size: 11.4px;
  font-weight: 700;
  line-height: 1;
  border-radius: 2px;
}

/* 受付時間も赤 */
.telTime {
  font-size: 14.3px;
  font-weight: 700;
  line-height: 1;
  color: var(--ra-tel);
}

.telNumber {
  display: flex;
  align-items: center;
  gap: 3.4px;
}

.telNumber svg {
  flex: none;
  width: 32px;
  height: 32px;
}

.telNumber b {
  font-family: "Roboto", "Noto Sans JP", sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

/* --- メールとLINEのボタン。上に白いバッジが乗り、下に影がある --- */
.raCtaBtns {
  display: flex;
  gap: 10px;
  flex: none;
}

.raCtaBtn {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 215px;
  height: 57px;
  margin-top: 11px;
  border-radius: 6px;
  color: #fff;
  text-decoration: none;
}

.raCtaBtn--mail {
  background: #f18122;
  border: 2px solid #f18122;
  box-shadow: 0 4px 0 0 #c65b01;
}

.raCtaBtn--line {
  background: #06c755;
  border: 2px solid #06c755;
  box-shadow: 0 4px 0 0 #029f42;
}

.btnBadge {
  position: absolute;
  left: 50%;
  top: -11px;
  transform: translateX(-50%);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 179px;
  height: 29px;
  background: #fff;
  border-radius: 15px;
  font-size: 12.9px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.raCtaBtn--mail .btnBadge {
  color: #f18122;
  border: 1.5px solid #f18122;
}

.raCtaBtn--line .btnBadge {
  color: #06c755;
  border: 1.5px solid #06c755;
}

.btnLabel {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 18.6px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* アイコンはFigmaの書き出し。メール 21x20、LINE 28.5x27 */
.btnIcon,
.btnIcon img {
  display: block;
  flex: none;
}

.btnIcon img {
  width: 100%;
  height: 100%;
}

.raCtaBtn--mail .btnIcon {
  width: 21px;
  height: 20px;
}

.raCtaBtn--line .btnIcon {
  width: 28.5px;
  height: 27px;
}

/* --- 狭いPC・タブレット。CTAはデザインどおり横幅1300pxが要り、画面幅1339px以下では右側がはみ出す。
   緑の帯と連絡先を上下に分ける（三浦の指摘 2026-09-30） --- */
@media screen and (min-width: 768px) and (max-width: 1339px) {
  .raCta {
    flex-direction: column;
    align-items: stretch;
    padding-right: 0;
  }

  .raCtaLead {
    width: auto;
    min-height: 116px;
    border-radius: 0;
  }

  /* 帯の下は白い連絡先なので、枠の線には重ねない */
  .raCtaPhoto {
    bottom: 0;
  }

  .raCtaWords {
    width: auto;
    margin-left: 150px;
    align-items: flex-start;
  }

  .raCtaContact {
    flex-wrap: wrap;
    gap: 20px;
    width: auto;
    height: auto;
    padding: 20px 16px 24px;
  }
}

/* --- スマホ。Figma「SP_相場まとめ」の Frame 191（360x435）--- */
@media screen and (max-width: 767px) {
  .raCta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 0 0 28px;
    border-width: 4px;
    border-radius: 12px;
    overflow: hidden;
  }

  /* 上の緑の帯。人物は帯の中に下揃えで収める（はみ出させない） */
  .raCtaLead {
    box-sizing: border-box;
    align-self: stretch;
    align-items: flex-end;
    gap: 8px;
    width: auto;
    height: 94px;
    padding: 0;
    border-radius: 0;
  }

  .raCtaPhoto {
    position: static;
    flex: none;
    width: 88px;
    height: 89px;
  }

  /* スマホもデザインと同じく、枠88x89いっぱいに合わせる（PCと同じ描き方） */
  .raCtaPhoto img {
    width: 100%;
    height: 100%;
  }

  .raCtaWords {
    flex: 1;
    min-width: 0;
    align-self: center;
    align-items: flex-start;
    gap: 10px;
    width: auto;
    height: auto;
    margin: 0;
  }

  /* 吹き出しはFigmaの形をそのまま敷く */
  .raCtaPill {
    min-width: 0;
    width: min(223px, 100%);
    height: 35px;
    margin: 0;
    padding: 0 0 0 21px;
    background: url(../images/report-archive/cta-bubble.svg) no-repeat left center / 100% 100%;
    border-radius: 0;
    /* 390pxでデザインどおり16px。それより狭い画面では文字を縮める */
    font-size: min(16px, calc((100vw - 134px) / 14));
    letter-spacing: .04em;
  }

  /* 390pxでデザインどおり22px。360pxなど狭い画面ではみ出さないよう縮める */
  .raCtaTitle {
    font-size: min(22px, calc((100vw - 134px) / 11.4));
    letter-spacing: .05em;
  }

  .raCtaContact {
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    width: 320px;
    max-width: calc(100% - 24px);
    height: auto;
    padding: 0;
  }

  /* 電話は赤いボタン。左に白い丸、右に番号と受付時間 */
  .raCtaTel {
    box-sizing: border-box;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    height: 82px;
    /* 内側の余白は上下10px・左右16px（三浦の指示 2026-10-01） */
    padding: 10px 16px;
    border-radius: 8px;
    background: linear-gradient(#d91e2d, #c70f15);
    box-shadow: 0 3px 0 #a5040a;
    color: #fff;
  }

  .telHead {
    display: none;
  }

  .telBadge {
    position: relative;
    flex: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    width: 55px;
    height: 55px;
    padding-bottom: 9px;
    border-radius: 50%;
    background: #fff;
    color: #d51520;
    line-height: 1.15;
    text-align: center;
  }

  .telBadge img {
    position: absolute;
    left: 18px;
    top: 5px;
    width: 18.5px;
    height: 21px;
    transform: rotate(-6.66deg);
  }

  .telBadge b {
    font-size: 9px;
    font-weight: 900;
  }

  .telBadge small {
    font-size: 6px;
    font-weight: 700;
  }

  .telNumber {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .telNumber svg {
    display: none;
  }

  .telNumber b {
    font-family: "DIN2014-Demi", "Roboto", sans-serif;
    font-size: 38px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: .02em;
    color: #fff;
  }

  .telTimeSp {
    display: block;
    margin-left: 35px;
    font-family: "Roboto", "Noto Sans JP", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
  }

  /* メールとLINEは縦に並べる。上に白いバッジが乗る */
  .raCtaBtns {
    flex-direction: column;
    gap: 16px;
  }

  .raCtaBtn {
    flex: none;
    width: 100%;
    height: 74px;
    margin-top: 14px;
    border-width: 3px;
    border-radius: 7px;
  }

  .raCtaBtn--mail { box-shadow: 0 5.5px 0 0 #c65b01; }
  .raCtaBtn--line { box-shadow: 0 5.5px 0 0 #029f42; }

  .btnBadge {
    top: -15px;
    width: 230px;
    height: 37px;
    padding: 0;
    border-width: 2px;
    border-radius: 19px;
    font-size: 16.5px;
  }

  .raCtaBtn--mail .btnBadge,
  .raCtaBtn--line .btnBadge {
    border-width: 2px;
  }

  .btnLabel {
    gap: 8px;
    margin-top: 20px;
    font-size: 26px;
  }

  .raCtaBtn--mail .btnIcon {
    width: 27px;
    height: 26px;
  }

  .raCtaBtn--line .btnIcon {
    width: 37px;
    height: 35px;
  }
}

/* =========================================================================
 * 下のCTA（region-areaCtaRegion）の電話ボタン
 * 事例一覧から呼んだときだけ、スマホでは上のCTAと同じ赤いボタンにする（三浦の指示 2026-10-01）。
 * PCは上も下も赤い文字の形でそろっているので、元の作りのまま
 * ========================================================================= */
.areaCtaRegion .raTelSwap {
  display: none;
}

@media screen and (max-width: 767px) {
  /* 元の電話ボタンと同じく、下のボタンとの間を24px空ける。
     幅は下のボタンの並びと同じく枠いっぱいにして、左右の端をそろえる（三浦の指摘 2026-10-01） */
  .areaCtaRegion.hasRaTel .raTelSwap {
    display: block;
    align-self: stretch;
    width: 100%;
    margin-bottom: 24px;
  }

  .areaCtaRegion.hasRaTel .wrapCtaTelHoarding {
    display: none;
  }

  .areaCtaRegion .raTelSwap .raCtaTel {
    display: flex;
    width: 100%;
    text-decoration: none;
  }
}