@charset "UTF-8";
/* 06_買取_pc / 1440x4670 */
.lead--buy { height: 580px; padding-top: 68px; }        /* デザイン y=410 */
.deco-blob--b1 { top: -126px; left: calc(50% + 383px); width: 449px; height: 521px; }
.deco-blob--b2 { top:  157px; left: calc(50% - 922px); width: 555px; height: 644px; }
.lead--buy .lead__photo { height: 380px; }
.crop--buy-hero > img { left: -31px; top: -20px; width: 551px; height: 412px; }

.points-sec--buy { height: 1360px; }
.crop--buy-p1 > img { left: -14px; top: -80px; width: 502px; height: 335px; }
.crop--buy-p2 > img { left: -46px; top: -62px; width: 532px; height: 354px; }
.crop--buy-p3 > img { left:  -5px; top:-234px; width: 482px; height: 722px; }
.crop--buy-p4 > img { left:-296px; top:-397px; width:1082px; height: 721px; }

.flow { height: 557px; }
.flow-step__icoimg { width: 56px; height: 56px; object-fit: contain; }

.faq  { height: 1060px; }
.faq--buy .faq__head,
.faq--buy .faq__list { position: relative; z-index: 1; }
.deco-blob--buyfaq1 { top:  40px; left: calc(50% - 900px); width: 416px; height: 630px; }
.deco-blob--buyfaq2 { top: 320px; left: calc(50% + 460px); width: 371px; height: 642px; }

/* ============================================================
   SP（760px 以下 / 06_買取_sp 375x5079）
   detail.css の SP 共通指定を、買取ページのデザインに合わせて上書きする。
   ============================================================ */
@media (max-width: 760px) {
  /* ページ見出し：「（アップル札幌里塚店）」だけ一回り小さく */
  .page-head__ja { font-size: 26px; line-height: 32px; font-weight: 700; }
  .page-head__ja-sub { font-size: 20px; font-weight: 500; }

  /* ------------------------------------------------------------
     導入（写真 → ラベル → チップ → 本文）
     ------------------------------------------------------------ */
  section.lead--buy { padding: 32px 0 60px; overflow: hidden; }
  /*
    deco-blob--b1 / --b2 は index.html の SHOWROOM 用クラス名と衝突しているため、
    全ページ共通の sp.css 側のルールに勝てるよう、親セクションのクラスを足して
    specificity を上げたうえで配置しなおしている。
  */
  .lead--buy .deco-blob--b1 { display: block; top: -40px; left: auto; right: -120px; width: 260px; height: 300px; }
  .lead--buy .deco-blob--b2 { display: block; top: auto; bottom: -80px; left: -140px; width: 260px; height: 300px; }
  .lead--buy .lead__inner { width: auto; padding-inline: 16px; gap: 24px; }
  .lead--buy .lead__photo { order: -1; height: 240px; }
  .crop--buy-hero > img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
  .lead--buy .label { font-size: 14px; line-height: 14px; }
  .lead--buy .lead__chips { margin-top: 8px; }
  .lead--buy .lead__chip--sm { min-height: 36px; padding: 6px 10px 8px; font-size: 18px; line-height: 22px; }
  .lead--buy .lead__chip--lg { min-height: 50px; padding: 8px 12px 10px; font-size: 24px; line-height: 32px; }
  .lead--buy .lead__text { margin-top: 20px; font-size: 14px; line-height: 28px; color: var(--ink); }

  /* ------------------------------------------------------------
     REASON（縦書き POINT + 写真、写真の下端に緑チップを重ねる）
     ------------------------------------------------------------ */
  section.points-sec--buy { padding-bottom: 40px; }
  .points-sec--buy .points-sec__head { padding-top: 60px; }
  .points-sec--buy .points-sec__head .sec-title { margin-top: 8px; font-size: 24px; line-height: 34px; }
  .points-sec--buy .points-grid { margin-top: 20px; gap: 16px; }
  .points-sec--buy .point-card { padding: 20px 16px 28px; border-radius: 5px; }
  .points-sec--buy .point-card__no {
    position: absolute;
    left: 16px;
    top: 20px;
    margin: 0;
    writing-mode: vertical-rl;
    gap: 6px;
    font-size: 12px;
    line-height: 12px;
    letter-spacing: .04em;
  }
  .points-sec--buy .point-card__no .label__dot { width: 5px; height: 5px; }
  .points-sec--buy .point-card__photo { width: auto; height: 160px; margin-left: 21px; border-radius: 5px; }
  .crop--buy-p1 > img, .crop--buy-p2 > img,
  .crop--buy-p3 > img, .crop--buy-p4 > img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; }
  .points-sec--buy .point-card__chips { position: relative; left: auto; top: auto; z-index: 1; margin-top: -53px; gap: 4px; }
  .points-sec--buy .point-card__chip { border-radius: 3px; }
  .points-sec--buy .point-card__chip--sm { padding: 6px 8px 7px; font-size: 14px; line-height: 17px; }
  .points-sec--buy .point-card__chip--lg { padding: 5px 8px 7px; font-size: 22px; line-height: 24px; }
  .points-sec--buy .point-card__text { margin-top: 20px; font-size: 14px; line-height: 26px; color: var(--ink); }

  /* ------------------------------------------------------------
     FLOW（横長の白カードを縦に積む：番号 + 丸アイコン + ラベル）
     ------------------------------------------------------------ */
  section.flow--buy { padding: 60px 0 40px; }
  .flow--buy .sec-title { margin-top: 8px; font-size: 24px; line-height: 34px; }
  .flow--buy .flow__list { flex-direction: column; flex-wrap: nowrap; gap: 8px; margin-top: 20px; }
  .flow--buy .flow-step {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 112px;
    padding: 16px 16px 16px 29px;
    border-radius: 30px;
    text-align: left;
  }
  .flow--buy .flow-step__num { left: 16px; top: 16px; z-index: 1; width: 30px; height: 30px; font-size: 14px; line-height: 14px; }
  .flow--buy .flow-step__ico { flex: none; width: 80px; height: 80px; margin: 0; }
  .flow--buy .flow-step__icoimg { width: 44px; height: 44px; }
  .flow--buy .flow-step__label { margin-top: 0; font-size: 16px; line-height: 26px; letter-spacing: .06em; }
  .flow--buy .flow-step__label br { display: none; }
  .flow--buy .flow-step:last-child .flow-step__label br { display: inline; }   /* 「ご納得いただけたら／買取契約へ」はデザイン通り改行 */

  /* ------------------------------------------------------------
     よくある質問
     ------------------------------------------------------------ */
  section.faq--buy { padding: 40px 0 80px; overflow: hidden; }
  .faq--buy .sec-title { margin-top: 8px; font-size: 24px; line-height: 34px; }
  .faq--buy .faq__list { margin-top: 24px; gap: 10px; }
  .faq--buy .faq-item { padding: 0 12px; border-radius: 3px; }
  .faq--buy .faq-item__q { min-height: 82px; padding: 16px 0; }
  .faq--buy .faq-item[open] .faq-item__q { min-height: 0; padding-top: 18px; }
  .faq--buy .faq-item__mark { font-size: 15px; line-height: 15px; }
  .faq--buy .faq-item__text { font-size: 16px; line-height: 24px; letter-spacing: .04em; color: var(--ink); }
  .faq--buy .faq-item__btn { width: 22px; height: 22px; }
  .faq--buy .faq-item__btn::before,
  .faq--buy .faq-item__btn::after { left: 5px; top: 10px; width: 12px; height: 2px; }
  .faq--buy .faq-item__body { margin: 0; padding: 16px 0 18px; }
  .faq--buy .faq-item__body p { font-size: 14px; line-height: 24px; letter-spacing: .04em; color: var(--ink); }

  /* 装飾ブロブ：FLOW 下の右と FAQ 下の左 */
  .faq--buy .deco-blob--buyfaq1 { display: block; top: auto; bottom: 120px; left: -150px; width: 260px; height: 390px; }
  .faq--buy .deco-blob--buyfaq2 { display: block; top: -60px; left: auto; right: -170px; width: 240px; height: 410px; }
}