@charset "UTF-8";

/*
 * 市区町村ページ: よくある質問・お客様の声・片付けと買取（#175）
 *
 * **このページ専用。** 3 つとも「小さい前置き＋大きい見出し＋一覧」という
 * 同じ骨格なので 1 ファイルにまとめている。
 *
 * デザイン: vault `資料/受領資料/リニューアル用/デザイン/PC/05_よくある質問_Frame-1@2x.png`
 *           同 `06_お客様の声_Frame-2@2x.png` / `07_片付けと買取_SectionHighlightBox@2x.png`
 */

/* ==================================================================
 * 05 よくある質問
 * ================================================================== */

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

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

/* 実測: 20px・濃紺。左右に「\」「/」の飾りが付く */
.kau-faq__lead {
  margin: 0;
  color: var(--kau-faq-navy);
  font-size: 20px;
  line-height: 1.4;
  text-align: center;
}

/* 実測: 48px Bold。左に ? と ! の丸い印 */
.kau-faq__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 8px 0 0;
  color: var(--kau-faq-navy);
  font-size: 48px;
  font-weight: var(--kau-heading-weight);
  line-height: 1;
}

.kau-faq__marks {
  display: flex;
  align-items: flex-end;
  gap: 2px;
}

/* 右側の飾りは見出しよりやや下に付く（実測: 左は上・右は下寄り） */
/*
 * **左右のマークは同じ高さにそろえる。**
 * デザインでは右側が 38px 下にずれているが、不揃いに見えるため
 * 意図的に合わせている（2026-09-14 指示）。
 */
.kau-faq__marks--after {
  align-self: center;
  margin-bottom: 0;
}

/* 実測: ? が 40px の濃紺、! が 32px の水色 */
.kau-faq__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--kau-white);
  line-height: 1;
}

.kau-faq__mark--q {
  width: 40px;
  height: 40px;
  background: var(--kau-faq-navy);
  font-size: 20px;
  font-weight: var(--kau-heading-weight);
}

.kau-faq__mark--e {
  width: 32px;
  height: 32px;
  background: var(--kau-faq-light);
  font-size: 18px;
  font-weight: var(--kau-heading-weight);
}

.kau-faq__list {
  margin: 48px 0 0;
}

/*
 * 質問と回答は **1 枚の白いカード**に入る（実測 896 幅・枠 #c7d2fe・
 * 角丸 12・内側 24/25・薄い影・カード間 16px）。以前の「Q の帯＋A の枠」
 * の 2 段スタイルはデザインと違っていた（2026-09-11 照合）。
 */
.kau-faq__item {
  box-sizing: border-box;
  padding: var(--kau-sub-pad);
  border-radius: 12px;
  background: var(--kau-white);
  border: 1px solid var(--kau-faq-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.kau-faq__item + .kau-faq__item {
  margin-top: 16px;
}

/* Q は 40px の濃紺の丸。質問は 18px lh28 の濃紺 */
.kau-faq__question {
  position: relative;
  margin: 0;
  padding: 0 0 16px 56px;
  color: var(--kau-faq-navy);
  font-size: 18px;
  font-weight: var(--kau-body-weight);
  line-height: 28px;
}

.kau-faq__question::before {
  content: "Q";
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--kau-faq-navy);
  color: var(--kau-white);
  font-size: 20px;
  font-weight: var(--kau-heading-weight);
}

/* 質問の下の罫線。**右へ行くほど薄くなる**（実測のグラデーション） */
.kau-faq__question::after {
  content: "";
  position: absolute;
  left: 56px;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(to right, var(--kau-faq-border), rgba(199, 210, 254, 0));
}

/* A は丸ではなく**青い文字だけ**（実測 20px Bold #3b82f6） */
.kau-faq__answer {
  position: relative;
  margin: 16px 0 0;
  padding: 0 0 0 83px;
  color: var(--kau-gray-700);
  font-size: 16px;
  line-height: 24px;
}

.kau-faq__answer::before {
  content: "A";
  position: absolute;
  top: 2px;
  left: 56px;
  color: var(--kau-faq-answer);
  font-size: 20px;
  font-weight: var(--kau-heading-weight);
  line-height: 20px;
}

/* ==================================================================
 * 06 お客様の声
 * ================================================================== */

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

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

/*
 * **飾り（＼＼ ／／）は中央のまま、文だけ左寄せにする。**
 * 全体を中央寄せにすると、2 行になったとき 2 行目が中央に浮いて見える
 * （2026-09-14 指摘）。文を inline-block にして、その中で左寄せにする。
 */
.kau-voice__lead-text,
.kau-summary__closing-heading-text {
  display: inline-block;
  text-align: left;
}

/*
 * **デザインには文の左右に斜線の飾り（29×30・#9ca3af）があるが出していない**
 * （2026-09-14 指示）。文だけを中央に置く。
 */
.kau-voice__lead {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  margin: 0;
  color: var(--kau-voice-navy);
  font-size: 20px;
  font-weight: var(--kau-heading-weight);
  letter-spacing: 0.5px;
  line-height: 1.4;
  text-align: center;
}

/*
 * 実測: 29×30 のベクター（斜線 2 本・#9ca3af）。文字で代用しているので、
 * 高さが 30px 前後になるサイズにして色をそろえる。
 */
/* 前置きの SP 用改行（文言側の \n 由来）。PC・タブレットでは 1 行 */
.kau-voice__lead-break {
  display: none;
}

.kau-voice__slashes {
  flex: 0 0 auto;
  margin: 0;
  color: var(--kau-voice-slash);
  font-size: 22px;
  line-height: 28px;
}

.kau-voice__heading {
  margin: 8px 0 0;
  color: var(--kau-voice-navy);
  font-size: 48px;
  font-weight: var(--kau-heading-weight);
  line-height: 1;
  text-align: center;
}

/* 見出しの下: 破線（211px×2 本・#cbd5e1）の間にオレンジの吹き出し */
.kau-voice__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 32px 0 0;
}

.kau-voice__divider::before,
.kau-voice__divider::after {
  content: "";
  width: 211px;
  border-top: 2px dashed var(--kau-voice-dash);
}

.kau-voice__divider-icon {
  width: 24px;
  height: 21px;
  background-color: var(--kau-voice-star);
  -webkit-mask: url("../../../images/area-renewal/comment.svg") no-repeat center / contain;
  mask: url("../../../images/area-renewal/comment.svg") no-repeat center / contain;
}

/* 実測: 896×125・白・枠 #0b2352 1px・角丸 12。左右を細い縦線で仕切る */
.kau-voice__rating {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  max-width: 896px;
  margin: 40px auto 0;
  padding: 0 20px;
  border-radius: 12px;
  background: var(--kau-white);
  border: 1px solid var(--kau-voice-navy);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 絵（G のロゴ／吹き出し）＋ラベルと数字の縦積み */
.kau-voice__rating-item {
  display: flex;
  align-items: center;
}

.kau-voice__rating-image {
  flex: 0 0 auto;
  width: auto;
  height: 125px;
}

.kau-voice__rating-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kau-voice__rating-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kau-voice__rating-sep {
  align-self: center;
  width: 1px;
  height: 64px;
  background: var(--kau-voice-divider);
}

.kau-voice__rating-label {
  color: var(--kau-gray-500b);
  font-size: 14px;
  font-weight: var(--kau-heading-weight);
}

/* 実測: 48px Bold の濃紺 */
.kau-voice__rating-value {
  color: var(--kau-voice-navy);
  font-size: 48px;
  font-weight: var(--kau-heading-weight);
  line-height: 1;
}

.kau-voice__rating-unit {
  color: var(--kau-voice-navy);
  font-size: 20px;
  font-weight: var(--kau-heading-weight);
}

.kau-voice__stars {
  color: var(--kau-voice-star);
  font-size: 20px;
  letter-spacing: 1px;
}

.kau-voice__stars--sm {
  font-size: 14px;
}

/* 評価 4.6 のぶんだけ塗る（5 個めが途中で欠ける） */
.kau-voice__stars--clip {
  background: linear-gradient(
    90deg,
    var(--kau-voice-star) var(--kau-star-fill, 100%),
    var(--kau-voice-divider) var(--kau-star-fill, 100%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kau-voice__note {
  margin: 16px 0 0;
  color: var(--kau-gray-500);
  font-size: 14px;
  text-align: center;
}

/* ---- スライダー（実測: 左右 40px の丸い矢印・下にドット） ---- */

.kau-voice__slider {
  position: relative;
  margin: 16px 0 0;
  padding: 0 48px;
}

/* 収まっているとき（JS 判定）は矢印を出さず、余白も詰める */
.kau-voice__slider--static {
  padding: 0;
}

.kau-voice__slider--static .kau-voice__arrow {
  display: none;
}

/* 実測: 357×296 のカードが 3 枚見え。横に流して 1 画面ずつ送る */
.kau-voice__cards {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 8px 0 16px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.kau-voice__cards::-webkit-scrollbar {
  display: none;
}

.kau-voice__card {
  flex: 0 0 calc((100% - 48px) / 3);
  scroll-snap-align: start;
}

/* 矢印は濃紺の丸（実測 40×40・白い矢じり・影） */
.kau-voice__arrow {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--kau-voice-navy);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1), 0 6px 15px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.kau-voice__arrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--kau-white);
  border-right: 2px solid var(--kau-white);
}

.kau-voice__arrow--prev {
  left: 0;
}

.kau-voice__arrow--prev::before {
  transform: rotate(-135deg);
  margin-left: 4px;
}

.kau-voice__arrow--next {
  right: 0;
}

.kau-voice__arrow--next::before {
  transform: rotate(45deg);
  margin-right: 4px;
}

.kau-voice__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

/* ドット（実測 12px・現在地が濃紺・他は #d1d5db） */
.kau-voice__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 16px 0 0;
}

.kau-voice__dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--kau-voice-hr);
  cursor: pointer;
}

.kau-voice__dot--active {
  background: var(--kau-voice-navy);
}

.kau-voice__card {
  box-sizing: border-box;
  padding: var(--kau-sub-pad);
  border-radius: 16px;
  background: var(--kau-white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.01), 0 4px 25px rgba(0, 0, 0, 0.05);
}

/* 似顔絵 65px＋在住・年代・星の縦積み。下に薄い罫線（実測 #d1d5db） */
.kau-voice__who {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--kau-voice-hr);
}

.kau-voice__avatar {
  flex: 0 0 auto;
  width: 65px;
  height: auto;
}

.kau-voice__who-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
}

.kau-voice__place {
  color: var(--kau-voice-navy);
  font-size: 14px;
  font-weight: var(--kau-heading-weight);
}

.kau-voice__person {
  color: var(--kau-voice-navy);
  font-size: 16px;
  font-weight: var(--kau-heading-weight);
}

.kau-voice__body {
  margin: 0;
  color: var(--kau-gray-700);
  font-size: 14px;
  font-weight: var(--kau-body-weight);
  line-height: 23px;
}

/*
 * 長い口コミの折りたたみ（2026-09-11 指示）。既定は 6 行で切り、
 * あふれたカードだけ JS が「続きを読む」を付ける。
 */
.kau-voice__body--clamp {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  /* line-clamp が効かない環境向けの保険（6 行 × lh23px） */
  max-height: 138px;
  overflow: hidden;
}

/* 原稿由来の <p> の余白は殺す（折りたたみの行数計算を狂わせない） */
.kau-voice__body p {
  margin: 0;
}

.kau-voice__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--kau-voice-navy);
  font-family: var(--kau-font);
  font-size: 13px;
  font-weight: var(--kau-heading-weight);
  cursor: pointer;
}

.kau-voice__more::after {
  content: "";
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.kau-voice__more[aria-expanded="true"]::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

/* ---- Google の口コミへの導線（実測 500×84・濃紺・角丸 12） ---- */

.kau-voice__cta {
  margin: 48px 0 0;
  text-align: center;
}

.kau-voice__cta-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-width: min(500px, 100%);
  padding: 12px 24px;
  border-radius: 12px;
  background: var(--kau-voice-navy);
  color: var(--kau-white);
  font-size: 20px;
  font-weight: var(--kau-heading-weight);
  line-height: 28px;
  text-decoration: none;
}

/* 右端の矢印 */
.kau-voice__cta-button::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-top: 3px solid currentColor;
  border-right: 3px solid currentColor;
  transform: rotate(45deg);
}

/* G のロゴは白い丸（60px）に乗る */
.kau-voice__cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--kau-white);
}

.kau-voice__cta-icon img {
  width: 40px;
  height: 40px;
}

.kau-voice__cta-note {
  margin: 16px 0 0;
  color: var(--kau-gray-500b);
  font-size: 14px;
  font-weight: var(--kau-heading-weight);
  text-align: center;
}

/* ==================================================================
 * 07 片付けと買取
 * ================================================================== */

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

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

.kau-summary__lead {
  margin: 0;
  color: var(--kau-summary-navy);
  font-size: 24px;
  font-weight: var(--kau-heading-weight);
  line-height: 1.4;
  text-align: center;
}

/*
 * 実測: 帯は 947×52（本文コラム幅・全幅ではない）。塗りは**縦方向の
 * グラデーションで 60% を境にアルファ 0 → 1**、つまり上 60% が透明・
 * 下 40% だけ #fefcbf の蛍光マーカー（2026-09-11・.fig の transform と
 * stops を確認。前日に「ベタ塗り」としたのは下側だけを画素サンプルした誤り）。
 */
/* まとめ見出しの SP 用改行（文言側の \n 由来）。PC・タブレットでは 1 行 */
.kau-summary__heading-break {
  display: none;
}

.kau-summary__heading {
  box-sizing: border-box;
  display: block;
  max-width: 947px;
  margin: 27px auto 0;
  padding: 6px 0;
  background: linear-gradient(to bottom, rgba(254, 252, 191, 0) 60%, var(--kau-summary-mark) 60%);
  color: var(--kau-summary-navy);
  font-size: 36px;
  font-weight: var(--kau-heading-weight);
  line-height: 40px;
  text-align: center;
}

/* 実測: 947 幅・背景 #f0f7f7・角丸 12・内側 上42/左右32/下32。カード間 32px */
.kau-summary__section {
  box-sizing: border-box;
  max-width: 947px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 32px auto 0;
  padding: var(--kau-sub-pad);
  border-radius: 12px;
  background: var(--kau-summary-bg);
}

/* 番号は 56px の円。白い縁 2px と影が付く（実測） */
.kau-summary__number {
  flex: 0 0 auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0;
  border-radius: 50%;
  background: var(--kau-summary-accent);
  border: 2px solid var(--kau-white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 3px 6px rgba(0, 0, 0, 0.1);
  color: var(--kau-white);
  font-size: 24px;
  font-weight: var(--kau-heading-weight);
  line-height: 1;
}

.kau-summary__content {
  flex: 1 1 auto;
  min-width: 0;
}

/* 見出しの下に薄い罫線（実測: #d1d5db 1px・文字から 8px） */
.kau-summary__section-heading {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--kau-summary-divider);
  color: var(--kau-summary-navy);
  font-size: 24px;
  font-weight: var(--kau-heading-weight);
  line-height: 32px;
}

.kau-summary__section-heading-line {
  display: block;
}

/* 実測: 16px の Regular（400）・lh24。見出しの罫線から 12px */
.kau-summary__text {
  margin: 12px 0 0;
  color: var(--kau-gray-700);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

/* タグの列はカードの右端に寄る（実測）。pill の間隔 9px */
.kau-summary__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin: 16px 0 0;
}

.kau-summary__tags-label {
  color: var(--kau-summary-accent);
  font-size: 18px;
  font-weight: var(--kau-heading-weight);
}

.kau-summary__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 9999px;
  background: var(--kau-white);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  color: var(--kau-gray-700);
  font-size: 14px;
  font-weight: var(--kau-body-weight);
  line-height: 20px;
}

.kau-summary__tags-etc {
  margin-left: 3px;
  font-size: 14px;
  line-height: 20px;
  color: #000000;
}

/*
 * 最後のカードの右に出る白い箱（実測 256×144・角丸 12・影）。
 * 文はティールの 16px Bold lh26 中央揃えで、下にティールの短い罫線。
 * 左辺の真ん中あたりに小さな吹き出しの尾が付く。
 */
.kau-summary__quote {
  position: relative;
  flex: 0 0 256px;
  box-sizing: border-box;
  align-self: center;
  padding: 20px;
  border-radius: 12px;
  background: var(--kau-white);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  text-align: center;
}

.kau-summary__quote::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 60%;
  border-style: solid;
  border-width: 6px 10px 6px 0;
  border-color: transparent var(--kau-white) transparent transparent;
}

.kau-summary__quote-text {
  margin: 0;
  color: var(--kau-summary-accent);
  font-size: 16px;
  font-weight: var(--kau-heading-weight);
  line-height: 26px;
}

/* 文の下のティールの罫線（実測 162×2・文から 18px） */
.kau-summary__quote::after {
  content: "";
  display: block;
  width: 162px;
  margin: 18px auto 0;
  border-top: 2px solid var(--kau-summary-accent);
}

/* 印はチェック付きの丸（実測）。SVG は currentColor なので mask で塗る */
.kau-summary__tag::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: var(--kau-summary-accent);
  -webkit-mask: url("../../../images/area-renewal/check-fill.svg") no-repeat center / contain;
  mask: url("../../../images/area-renewal/check-fill.svg") no-repeat center / contain;
}

/* ---- 締めの帯 ---- */

.kau-summary__closing {
  margin: 40px 0 0;
  text-align: center;
}

/*
 * 1 行目は「――― ＼ 文 ／ ―――」の形（2026-09-10 実測）。
 * 細い罫線は**この行の高さの真ん中**を左右に走り、文の両脇に ＼ ／ が付く。
 * 以前はオレンジの行の上に罫線を引いていたが、位置が違った。
 */
.kau-summary__closing-heading {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0;
  color: var(--kau-summary-navy);
  font-size: 20px;
  font-weight: var(--kau-heading-weight);
  line-height: 28px;
}

.kau-summary__closing-heading::before,
.kau-summary__closing-heading::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--kau-voice-divider);
}

/*
 * **飾りと文を flex で横に並べる。** inline-block のままだと文が 2 行になった
 * とき 2 行目が「＼」の真下から始まる。flex なら文は「＼」の右で 1 つの列に
 * なり、2 行目の頭が 1 行目の「買取ＵＰ」に揃う（2026-09-14 指示）。
 * 「＼」は 1 行目の高さ、「／」は最終行の高さに置く。
 */
.kau-summary__closing-heading-text {
  display: inline-flex;
  align-items: flex-start;
}

.kau-summary__closing-heading-text::before {
  content: "＼";
  flex: 0 0 auto;
  align-self: flex-start;
  padding-right: 8px;
  color: var(--kau-summary-accent);
  font-weight: var(--kau-body-weight);
}

.kau-summary__closing-heading-text::after {
  content: "／";
  flex: 0 0 auto;
  /* 右の飾りも左（＼）と同じ高さ＝1 行目にそろえる（2026-09-15 指示。以前は 2 行目の下端） */
  align-self: flex-start;
  padding-left: 8px;
  color: var(--kau-summary-accent);
  font-weight: var(--kau-body-weight);
}

/* SP 用の改行（「みなさんからの」を 2 行目へ）。PC では 1 行 */
.kau-summary__closing-break {
  display: none;
}

/* 実測: 24px Bold のオレンジ。1 行目との間 8px */
.kau-summary__closing-main {
  margin: 8px 0 0;
  color: var(--kau-summary-strong);
  font-size: 24px;
  font-weight: var(--kau-heading-weight);
  line-height: 32px;
}

.kau-summary__closing-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin: 24px 0 0;
}

/* 締めのタグは背景なし（実測は文字とアイコンだけ・印は 16px） */
.kau-summary__tag--plain {
  padding: 0;
  background: none;
  color: var(--kau-gray-900);
  font-size: 16px;
}

.kau-summary__tag--plain::before {
  width: 16px;
  height: 16px;
}

.kau-summary__closing-note {
  margin: 16px 0 0;
  color: var(--kau-gray-500b);
  font-size: 12px;
}

/* ---- 「これって売れるのかな？」の箱 ---- */

/*
 * 実測: 1031×109・#fef8f1・角丸 24。電球の絵と文の列が中央に並ぶ
 * （絵 114×104・間 80px）。全ページ共通の文。
 */
.kau-summary__highlight {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
  margin: 48px auto 0;
  max-width: 1031px;
  padding: 0 24px;
  box-sizing: border-box;
  border-radius: 24px;
  background: var(--kau-summary-highlight-bg);
  text-align: center;
}

/*
 * **文は左寄せ。** 箱の中で絵と文の列は中央に並べるが、文が複数行になると
 * 中央寄せでは行の頭がそろわず読みにくい（2026-09-14 指摘）。
 */
.kau-summary__highlight-body {
  text-align: left;
}

/* 絵の背景色は箱とほぼ同じ色が焼き込まれている（JPEG・透過なし） */
.kau-summary__highlight-image {
  flex: 0 0 auto;
  width: 114px;
  height: auto;
}

/* 実測: 前半 24px・「大丈夫」と「です。」だけ 20px。間 18px */
.kau-summary__highlight-title {
  margin: 0;
  color: var(--kau-summary-navy);
  font-size: 24px;
  font-weight: var(--kau-heading-weight);
  line-height: 28px;
}

.kau-summary__highlight-ok {
  color: var(--kau-summary-strong);
  font-size: 20px;
  /* 実測: 1px の破線（dash 3 / 空き 2）の下線 */
  border-bottom: 1px dashed var(--kau-summary-strong);
}

.kau-summary__highlight-tail {
  font-size: 20px;
}

.kau-summary__highlight-text {
  margin: 18px 0 0;
  color: var(--kau-gray-900);
  font-size: 16px;
  font-weight: var(--kau-body-weight);
  line-height: 24px;
}

/* 「費用は一切頂いておりません！」だけ太字のオレンジ（文字単位スタイルの実測） */
.kau-summary__highlight-text strong {
  color: var(--kau-summary-strong);
  font-weight: var(--kau-heading-weight);
}

/* ------------------------------------------------------------------
 * タブレット（1024px 以下）
 * ------------------------------------------------------------------ */

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

  .kau-faq__lead,
  .kau-voice__lead {
    font-size: 16px;
  }

  .kau-faq__heading,
  .kau-voice__heading {
    gap: 8px;
    font-size: 24px;
  }

  .kau-faq__mark--q { width: 28px; height: 28px; font-size: 15px; }
  .kau-faq__mark--e { width: 22px; height: 22px; font-size: 13px; }

  .kau-faq__item {
    padding: var(--kau-sub-pad);
  }

  .kau-faq__question {
    padding: 0 0 12px 44px;
    font-size: 15px;
    line-height: 24px;
  }

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

  .kau-faq__question::after {
    left: 44px;
  }

    .kau-faq__answer {
    margin-top: 12px;
    /* 44px（Q・A の左位置）＋ A の幅と間隔 */
    padding-left: 66px;
    font-size: 14px;
    line-height: 22px;
  }

    /*
   * **SP でも「A」の右横から本文を始める**（2026-09-14 指示）。
   * 以前は `position: static` でブロックにしていたため、本文が A の下から
   * 始まっていた。PC と同じく A を左に固定し、本文はその右へ回す。
   */
  .kau-faq__answer::before {
    position: absolute;
    top: 0;
    left: 44px;
    display: block;
    margin-bottom: 0;
    font-size: 16px;
    line-height: 22px;
  }

  /* 口コミのバナーは縦積み。仕切りは横線に */
  .kau-voice__rating {
    flex-direction: column;
    gap: 8px;
    padding: 8px 16px;
  }

  .kau-voice__rating-sep {
    width: 100%;
    height: 1px;
  }

  .kau-voice__rating-image {
    height: 80px;
  }

  .kau-voice__rating-value {
    font-size: 32px;
  }

  .kau-voice__divider::before,
  .kau-voice__divider::after {
    width: 80px;
  }

  .kau-voice__divider {
    margin-top: 20px;
  }

    /*
   * **「Googleの口コミをチェックする」を 1 行に**（2026-09-14 指示・入るギリギリ）。
   * 16px では文の幅 215px に対し 224px 必要で「る」が落ちた。左右の余白を
   * 24→16px に詰めて 15px にすると 210px／231px で収まる。nowrap で固定。
   */
  .kau-voice__cta-button {
    min-width: 0;
    width: 100%;
    padding: 12px 16px;
    font-size: 15px;
    gap: 12px;
    white-space: nowrap;
  }

  .kau-voice__cta-icon {
    width: 44px;
    height: 44px;
  }

  .kau-voice__cta-icon img {
    width: 30px;
    height: 30px;
  }

  /* SP は 1 枚ずつ横に送る */
  .kau-voice__slider {
    padding: 0 44px;
  }

  .kau-voice__cards {
    gap: 16px;
  }

  .kau-voice__card {
    flex: 0 0 100%;
  }

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

  /*
   * SP のマーカーは帯（コラム幅）ではなく、**文字幅なりの細い線**を
   * 行ごとに敷く（Figma SP 実測: 文字の下 3 割に重なり、少し下へはみ出す。
   * 2026-09-14 指摘: 折り返すと下の行だけ太い帯になっていた）。
   */
  .kau-summary__heading {
    padding: 0 12px;
    background: none;
    font-size: 20px;
    line-height: 1.6;
  }

  .kau-summary__heading-text {
    padding: 0 6px 3px;
    background: linear-gradient(to bottom, rgba(254, 252, 191, 0) 62%, var(--kau-summary-mark) 62%);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }

  /*
   * カードは番号の**右横**から見出しを始め、罫線から下は全幅に戻す
   * （Figma SP 実測。2026-09-14 指摘: 番号の下に文言が落ちていた）。
   * flex のままだと折り返しで番号が 1 行を占めるので block ＋絶対配置にする。
   */
  .kau-summary__section {
    display: block;
    position: relative;
    margin-top: 24px;
  }

  .kau-summary__number {
    position: absolute;
    top: 24px;
    left: 16px;
    width: 40px;
    height: 40px;
    font-size: 16px;
  }

  .kau-summary__section-heading {
    min-height: 40px;
    padding-left: 52px;
    font-size: 16px;
  }

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

  .kau-summary__section {
    padding: var(--kau-sub-pad) 16px;
  }

  .kau-summary__quote {
    flex: 1 1 100%;
    align-self: auto;
    margin-top: 12px;
  }

  .kau-summary__quote::before {
    content: none;
  }

  .kau-summary__tags {
    justify-content: flex-start;
  }

  /*
   * **14px にして、折り返しは <br> だけに任せる。**
   * 15px だと 1 行目「買取ＵＰでは、和歌山県西牟婁郡上富田町の」（20em＝300px）が
   * 「＼」「／」を引いた文の幅 297px に収まらず「の」だけ落ちて 3 行になった
   * （2026-09-14 指摘）。14px なら 280px で全 215 ページが収まる（余裕 19px）。
   * `white-space: nowrap` は幅任せの折り返しを止めるだけで、<br> は効く。
   */
  .kau-summary__closing-heading {
    /* SP は罫線が無いので、＼ 文 ／ のかたまりを帯の中央に置く（2026-09-15 指示） */
    justify-content: center;
    gap: 12px;
    font-size: 14px;
    line-height: 24px;
  }

  .kau-summary__closing-heading-text {
    white-space: nowrap;
  }

  /* SP は左右の罫線を消し、＼ ／だけにする（Figma SP 実測） */
  .kau-summary__closing-heading::before,
  .kau-summary__closing-heading::after {
    content: none;
  }

  .kau-summary__closing-break {
    display: inline;
  }

  .kau-summary__closing-main {
    font-size: 18px;
  }

  /* 箱は 1 行のまま小さく（SP 実測: 絵 50px・見出し 16px・本文 14px） */
  .kau-summary__highlight {
    gap: 16px;
    margin-top: 32px;
    padding: 12px 16px;
  }

  .kau-summary__highlight-image {
    width: 50px;
  }

  .kau-summary__highlight-title {
    font-size: 16px;
    line-height: 24px;
  }

  .kau-summary__highlight-ok,
  .kau-summary__highlight-tail {
    font-size: 16px;
  }

  .kau-summary__highlight-text {
    margin-top: 6px;
    font-size: 14px;
    line-height: 22px;
  }
}

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

@media (max-width: 767px) {
  /* Q・A の左余白を詰めて本文の幅を稼ぐ */
  .kau-faq__question {
    padding-left: 38px;
  }

  .kau-faq__question::before {
    width: 28px;
    height: 28px;
    font-size: 14px;
  }

  .kau-faq__question::after {
    left: 38px;
  }

  .kau-faq__answer {
    padding-left: 58px;
  }

  .kau-faq__answer::before {
    left: 38px;
    font-size: 15px;
  }

  /* 前置きの飾りは間隔を詰める */
  .kau-voice__lead {
    gap: 8px;
  }

  /* 「和歌山県西牟婁郡すさみ町の／みなさまから寄せられた」で改行（2026-09-15 指示） */
  .kau-voice__lead-break {
    display: inline;
  }

  /* 「〜を同時に／進める方が増えています」で改行（2026-09-15 指示） */
  .kau-summary__heading-break {
    display: inline;
  }

  }

/* 買取実績の導入文（旧マークアップの h2 を p にした分。h2 のときと同じ見た目: 通常太さ・行間 1.5） */
.jissekitxt .jissekitxt-lead {
  margin: 0;
  font-weight: normal;
  line-height: 1.5;
}

/*
 * 買取実績ブロック（旧テンプレート由来 .jisseki_out）の上下余白を新ページの統一ルールに合わせる。
 * 旧 CSS は .jisseki_in の padding 30px だけなので、上は前のセクションとの間が 30px しかなかった。
 * 上下とも「コンテンツ間 = main-pad × 2」に揃える（帯の下は次セクションの padding と足して 80px）。
 */
.kau-page .jisseki_in {
  padding-top: calc(var(--kau-main-pad) * 2);
  /* 帯の下: 次セクション先頭の WEB 査定 CTA は PC で内側に 20px の余白を持つので、足して 80px になる値 */
  padding-bottom: 20px;
}

@media (max-width: 1199px) {
  .kau-page .jisseki_in {
    padding-bottom: 30px; /* CTA 側の余白が無いので 30 + 30 = 60px */
  }
}

/*
 * 「高額買取にはコツがあります」の帯（2026-09-30 先方指摘・支給デザイン）
 * 買取実績の下に置く紺の帯。電球＋文字は支給デザインから切り出した画像を等倍で中央に置く
 * （帯の色 #283661 は画像の紺と同じ値。画像と帯の境目が出ないように CSS 側を合わせている）。
 * 支給デザインの実測: 帯 720×56（1440 幅のフレーム）。旧バナー画像（.tokaitorikotu）の置き換え。
 */
.kau-kotsu {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 32px);
  max-width: 720px;
  min-height: 56px;
  margin: 8px auto 0;
  padding: 0 16px;
  border-radius: 4px;
  background: var(--kau-kotsu-navy);
  text-decoration: none;
  clear: both;
  transition: filter 0.2s ease, transform 0.2s ease;
}

.kau-kotsu:hover {
  text-decoration: none;
  filter: brightness(1.18);
  transform: translateY(-2px);
}

.kau-kotsu__text {
  display: block;
  width: 377px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 767px) {
  .kau-kotsu {
    min-height: 48px;
    padding: 0 12px;
  }
  .kau-kotsu__text {
    width: 320px;
  }
}