/* ============================================================
   通常物件 買取LP 追加スタイル（アキラッキーの style.css に足す分だけ）
   ============================================================ */

/* 帯・バッジ帯（横長画像をそのまま幅100%で置く） */
.band img,
.strip img {
  display: block;
  width: 100%;
  height: auto;
}

/* 節画像の直下に置く小さな注記（出典など） */
.source-note {
  margin: 0;
  padding: 8px 18px 16px;
  background: #f4f1ec;
  color: #6b7280;
  font-size: 11px;
  line-height: 1.6;
}

/* 選ばれる5つの理由：見出し帯＋行カード5枚 */
.reasons {
  background: #faf7f1;
  padding: 0 0 8px;
}
.reasons-title {
  margin: 0;
}
.reasons-title img {
  display: block;
  width: 100%;
  height: auto;
}
.reasons-list {
  list-style: none;
  margin: 0;
  padding: 10px 12px 6px;
}
.reasons-list li {
  margin: 0 0 10px;
}
.reasons-list img {
  display: block;
  width: 100%;
  height: auto;
}

/* フォーム見出し（画像） */
.form-header-image img {
  display: block;
  width: 100%;
  height: auto;
}

/* 送信ボタン（画像化） */
.form-submit--image {
  background: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}
.form-submit--image img {
  display: block;
  width: 100%;
  height: auto;
}

/* 画面下に固定する追従CTA（10/1：白い帯をやめてボタンだけ浮かせる。FVを過ぎたら出現・フォーム表示中は隠す＝遺品整理LPと同じ動き） */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding: 0 12px calc(8px + env(safe-area-inset-bottom));
  background: none;
  pointer-events: none;
  transform: translateY(130%);
  transition: transform .35s ease;
}
.sticky-cta.show { transform: translateY(0); }
.sticky-cta a {
  display: block;
  max-width: 456px;
  margin: 0 auto;
  pointer-events: auto;
  border-radius: 999px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .28));
  animation: cta-purupuru 2.6s ease-in-out infinite;
}
.sticky-cta img {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes cta-purupuru {
  0%, 16%, 100% { transform: rotate(0) scale(1); }
  2%  { transform: rotate(1.6deg)  scale(1.012); }
  5%  { transform: rotate(-1.4deg) scale(1.012); }
  8%  { transform: rotate(1.1deg)  scale(1.01); }
  11% { transform: rotate(-0.7deg) scale(1.006); }
  14% { transform: rotate(0.3deg)  scale(1.002); }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta a { animation: none; } }
/* 追従CTAの分だけ末尾に余白（フッターが隠れないように） */
.lp {
  padding-bottom: 0;  /* 10/1 追従CTAを外したので余白も不要 */
}
/* 作成中の仮枠（10/1 買取実績）*/
.pending-note { margin: 0; padding: 40px 16px; text-align: center; color: #999; font-size: 13px; border-top: 1px dashed #ccc; border-bottom: 1px dashed #ccc; background: #fafafa; }

/* ===== 買取実績（10/1・アキラッキー sec-record をそのまま流用し配色だけ紺×金×赤に）===== */
.sec-record {
  background: linear-gradient(#EAF3FB 0, #ffffff 90px);
  padding-bottom: 30px;
}

/* 見出しは画像(record-head.webp)。文言はプロンプト側で管理する。
   区切り線は画像に描かずCSSで引く(画像側に罫線があると余白の自動均等化が効かないため) */
.sec-record__head {
  margin: 0;
  border-top: 2px solid #1F3F6E;
  border-bottom: 1px solid #cfe0ee;
  line-height: 0;
}

.sec-record__head-image {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.sec-record__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding: 20px 16px 0;
  list-style: none;
}

/* flex column + spec に flex:1 で、価格帯を常にカード下端へ貼り付ける。
   グリッドの行は最も高いカードに揃うため、これをやらないと
   中身の少ないカード(例: 横須賀)で価格帯の下に白い隙間が出る */
.sec-record__card {
  display: flex;
  flex-direction: column;
  padding: 0 0 12px;
  overflow: hidden;
  border: 1px solid #d6e2ee;
  border-radius: 8px;
  background: #f7fbfe;
  text-align: center;
}

/* 物件イメージ画像(16:9 でクロップ表示)
   楽待掲載の実物件写真は使用許可がないため、AI生成のイメージを使っている */
.sec-record__figure {
  position: relative;
  margin-bottom: 9px;
  line-height: 0;
}

/* <picture> は既定で inline。WebP非対応環境向けのjpgフォールバック用に
   ラップしているだけなので、レイアウトに影響しないよう block 化する */
.sec-record__figure picture,
.sec-record__head picture {
  display: block;
}

.sec-record__photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #e8eef4;
  user-select: none;
  -webkit-user-drag: none;
}

/* 金の斜めスタンプ風バッジ。実績の「達成感」を出すためのテンション装置 */
.sec-record__badge {
  position: absolute;
  top: 5px;
  left: 4px;
  padding: 5px 10px 6px;
  border: 1px solid #b98f2c;
  border-radius: 4px;
  background: linear-gradient(160deg, #fff6cf 0%, #ffe083 38%, #f0bf42 62%, #ffeeae 100%);
  color: #B01C25;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transform: rotate(-4deg);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.32);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  overflow: hidden;
}

/* 斜めに走る光沢(キラッと見せる) */
.sec-record__badge::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -20%;
  width: 45%;
  height: 220%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(20deg);
  pointer-events: none;
}

/* 「!!」だけ濃い赤で一段跳ねさせる */
.sec-record__badge em {
  font-style: normal;
  font-size: 16px;
  color: #D9232E;
}

/* ------------------------------------------------------------
   買取価格の表示(A/Bで出し分ける)
   価格を出すと期待値が上がるトレードオフがあるため、
   ul に --price を付けたときだけ価格帯が出る作りにしている。
   ------------------------------------------------------------ */
.sec-record__list--price .sec-record__card {
  padding-bottom: 0;
}

.sec-record__price {
  display: none;
  margin: 9px 0 0;
  padding: 5px 6px 6px;
  border-top: 1px solid #ecd79a;
  background: linear-gradient(#fffaea, #fdf0c6);
  color: #7a5a1e;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.04em;
}

.sec-record__list--price .sec-record__price {
  display: block;
}

.sec-record__price strong {
  color: #D9232E;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.sec-record__price span {
  color: #D9232E;
  font-size: 12px;
  font-weight: 900;
}

.sec-record__pref {
  margin: 0;
  color: #0B4FA2;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
}

.sec-record__city {
  margin: 0 0 7px;
  color: #1F3F6E;
  font-size: 17px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.sec-record__spec {
  flex: 1; /* 余った高さを吸収して価格帯を下端に押し付ける */
  margin: 0 10px;
  padding-top: 7px;
  border-top: 1px dashed #cddced;
  color: #5a6470;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
}

/* 築年数・徒歩分数・坪数など、物件の「極端さ」を示す数字 */
.sec-record__spec em {
  color: #D9232E;
  font-size: 15px;
  font-weight: 900;
  font-style: normal;
}

/* 狭幅端末(iPhone SE 等)では市町村名が折り返して高さがズレるため微縮小 */
@media (max-width: 374px) {
  .sec-record__badge { font-size: 11.5px; padding-left: 8px; padding-right: 8px; }
  .sec-record__badge em { font-size: 14px; }
  .sec-record__city { font-size: 15px; }
  .sec-record__spec { font-size: 11px; margin-left: 7px; margin-right: 7px; }
  .sec-record__list { gap: 8px; padding: 18px 12px 0; }
}