/* ===== 出張買取ページ固有 ===== */


/* ---- ファーストビュー ---- */
/* 上端はブランドカラー寄りの黄、下は白へ抜く。
   ベタ塗りだと次のセクションとの境目に横線が出るのでグラデーションにしている */
.bfv{padding-top:var(--hdr-h); padding-bottom:clamp(34px,4.4vw,62px); background:var(--luxlite);
  /* 黄の地に真っ黒は素っ気なくなるので、金と同系の濃い茶を見出し色にする */
  --fvink:#33280E}
/* 左＝案内スタッフ／右＝コピーと月桂冠バッジ */
.bfv .inner{display:grid; grid-template-columns:clamp(140px,18vw,250px) 1fr; gap:clamp(14px,2.4vw,38px); align-items:center; min-height:clamp(420px,48vw,530px); padding-top:clamp(30px,3.8vw,52px); padding-bottom:0}
/* 人物は高さ基準でスケールさせ、FVの下端に接地させる */
.bfv-person{align-self:end; justify-self:center; min-width:0}
.bfv-person img{display:block; height:clamp(250px,40vw,450px); width:auto; max-width:none}
/* サブコピー・見出し・リード文をひとかたまりにして中央へ。
   fit-content で「いちばん広い子＝h1」に幅を合わせるので、
   下の「無料」やバッジ（.bfv-body 幅の中央）と中心軸が一致する。
   リード文はこの箱の中で左揃えのまま＝見出しの左端に揃う */
.bfv-head{width:fit-content; margin-inline:auto}
.bfv-catch{justify-content:center}

/* サブコピーを斜線で囲む。ロゴのシンボル（スラッシュ）から取ったモチーフ */
.bfv-catch{font-family:var(--sans); font-weight:700; font-size:clamp(12.5px,1.5vw,16.5px);
  letter-spacing:.04em; color:var(--fvink);
  display:flex; align-items:center; gap:clamp(9px,1.1vw,13px)}
.bfv-catch::before,.bfv-catch::after{
  content:""; flex:0 0 auto; width:2px; height:1.15em; background:currentColor;
}
.bfv-catch::before{transform:skewX(20deg)}   /* \\ */
.bfv-catch::after {transform:skewX(-20deg)}  /* // */
/* 1行に収める。字数が変わったらここの上限を触る。
   「出張買取なら」を細く小さくしたぶん、社名側を大きくできる */
.bfv h1{font-family:var(--sans); font-weight:700; font-size:clamp(26px,5.15vw,64px); line-height:1.32;
  letter-spacing:.01em; margin-top:8px; white-space:nowrap; color:var(--fvink)}
.bfv h1 .h1-s{font-size:.6em; font-weight:500; letter-spacing:.05em; margin-right:.14em}
.bfv-lead{font-size:14px; line-height:2.1; color:#333; margin-top:20px}
.spbr{display:none}   /* SPだけ改行するための空タグ */
/* 罫線の箱をやめ、ゴールドの文字だけで見せる（月桂冠バッジの直上） */
.bfv-free{
  margin-top:clamp(16px,1.9vw,22px); text-align:center; color:var(--gold);
  font-family:var(--sans); font-weight:500; font-size:clamp(13px,1.55vw,17px); letter-spacing:.08em;
  padding-bottom:clamp(6px,.85vw,10px); border-bottom:1px dotted rgba(200,168,56,.5);
}
.bfv-free b{font-weight:700; font-size:1.18em; letter-spacing:.06em; margin-left:.25em}
.bfv-btns{justify-content:center; margin-top:clamp(18px,2.2vw,26px); gap:10px}
/* FVのボタンだけ小ぶりにする（角丸は使わない＝サイト全体を直角で統一） */
.bfv-btns .btn{flex:0 1 300px; min-width:0; padding:12px 18px; font-size:13px}
.bfv-btns .btn .tel{font-size:18px}
.bfv-btns .btn .ttl{font-size:13.5px}
.bfv-btns .btn .bi{width:36px; height:36px}
.bfv-btns .btn small{font-size:10.5px}
/* 主行動（フォーム）はブランドイエロー。黒文字なのでコントラストは黒ボタンとほぼ同等 */
/* FVは背景が明るいので電話は白抜き＋グレー枠にし、黄色（申込）を主役にする */
.bfv-btns .btn-fill{background:var(--paper); color:var(--ink); border-color:transparent}
.bfv-btns .btn-fill:hover{background:var(--lux); color:var(--ink); border-color:var(--lux)}
.bfv-btns .btn-line{background:var(--lux); border-color:var(--lux); color:var(--ink); font-weight:700}
.bfv-btns .btn-line:hover{background:#F0D400; border-color:#F0D400; color:var(--ink)}

/* ---- 月桂冠バッジ（左右の葉は別ファイル。鏡像ではないので2枚使う） ---- */
/* 枠（li）は3等分で幅を揃え、葉は中身（.c-in）に付ける。
   葉を li 側に付けると、文字が短いバッジで葉だけ外側に取り残される */
/* PCではただの入れ物。display:contents なので .crests は .bfv-body の直下として振る舞う。
   SPだけ flex になって、左に人物・右にバッジ文言が並ぶ */
.bfv-sp-row{display:contents}
.bfv-person-sp{display:none}

/* 隙間は gap で固定（space-between だと余りが全部隙間に回って広がりすぎる）。
   上の「査定料・出張料・手数料 無料」と軸を合わせて中央寄せ */
.crests{list-style:none; display:flex; justify-content:center;
  gap:clamp(12px,2vw,30px); margin-top:clamp(9px,1.2vw,15px)}
.crests li{display:flex; justify-content:center; min-width:0}
.c-in{
  position:relative; display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px; text-align:center; white-space:nowrap;
  min-height:clamp(56px,6.6vw,80px);
  padding:clamp(4px,.6vw,8px) clamp(27px,3.4vw,42px);
}
/* 葉は中身の高さいっぱいに伸ばして、文字を左右から抱える */
.c-in::before,.c-in::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(24px,3.1vw,38px);
  background-repeat:no-repeat; background-size:contain;
}
.c-in::before{left:0;  background-position:left center;  background-image:url(assets/img/crest-l.png)}
.c-in::after {right:0; background-position:right center; background-image:url(assets/img/crest-r.png)}
/* バッジ内は3要素ともゴールドで統一 */
.crests .c-lead{font-family:var(--sans); font-weight:700; font-size:clamp(10px,1.1vw,12px);
  letter-spacing:.04em; color:var(--gold)}
.crests .c-main{font-family:var(--sans); font-weight:700; font-size:clamp(13px,1.6vw,18px);
  letter-spacing:.01em; line-height:1.3; color:var(--gold)}
/* 支給アセット実測：注釈の字幅はメインの0.30倍。それに寄せて詰める */
.crests .c-note{font-size:clamp(7px,.75vw,8px); letter-spacing:0; color:var(--gold); line-height:1.3}

/* ボタン内の矢印 */
.btn .ar{width:26px; height:1px; background:currentColor; display:block; transition:width .34s}
.btn:hover .ar{width:40px}

/* ---- 中央寄せのセクション見出し ---- */
.sec-lead{line-height:1.9}   /* このページだけ少し詰める */

/* ---- 買取の種類 ---- */
/* 品目：イメージ画像＋組み版。画像は未支給のため青い破線のプレースホルダー */
.items{list-style:none; display:grid; grid-template-columns:repeat(10,1fr); gap:clamp(8px,1.1vw,16px) clamp(6px,0.9vw,12px)}
.items li{text-align:center}
.items .ph{
  display:block; aspect-ratio:1/1; width:100%; max-width:104px; margin:0 auto;
  position:relative; overflow:hidden; background:var(--wash);
}
.items .ph img{width:100%; height:100%; object-fit:cover; display:block}
/* 素材未支給のマスだけ青い破線にする */
.items .ph.is-empty{border:1px dashed var(--pv)}
.items .ph em{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-style:normal; font-family:var(--num); font-weight:600;
  font-size:10px; letter-spacing:.16em; color:var(--pv);
}
.items .en{display:block; font-family:var(--en); font-size:8.5px; letter-spacing:.1em; color:var(--gray); margin-top:9px}
.items .nm{display:block; font-family:var(--sans); font-weight:700; font-size:11.5px; letter-spacing:.02em; line-height:1.55; margin-top:3px}

/* ---- なんでもお任せ ---- */
.anything{background:var(--wash); padding:clamp(44px,5.6vw,76px) 0; text-align:center}
.anything .en{font-family:var(--en); font-size:11.5px; letter-spacing:.22em; color:var(--gray)}
.anything h2{font-family:var(--sans); font-weight:700; font-size:clamp(21px,3vw,33px); letter-spacing:.04em; margin-top:12px; line-height:1.6}
.anything h2::after{content:""; display:block; width:44px; height:3px; background:var(--lux); margin:20px auto 0}
.anything .txt{font-size:14px; line-height:2.15; color:#333; margin-top:22px}

/* ---- 流れ（番号は実際の手順＝順序に意味がある） ---- */
.flow{list-style:none; counter-reset:none; max-width:860px; margin:0 auto}
/* 番号+アイコン / 本文 / 画像 の3カラム。画像は素材待ちのプレースホルダー */
.flow li{display:flex; align-items:flex-start; gap:clamp(16px,2.4vw,34px);
  padding:clamp(24px,3vw,36px) 0; border-top:1px solid var(--rule); position:relative}
.flow .fmark{flex:0 0 auto; width:clamp(54px,6.6vw,92px)}
.flow .fbody{flex:1 1 auto; min-width:0}
.flow .f-img{
  flex:0 0 auto; width:clamp(140px,19vw,240px); aspect-ratio:4/3;
  background:var(--wash); position:relative; overflow:hidden;
}
.flow .f-img img{width:100%; height:100%; object-fit:cover; display:block}
.flow .f-img em{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-style:normal; font-family:var(--num); font-weight:600;
  font-size:10px; letter-spacing:.16em; color:var(--pv);
}
.flow li:last-child{border-bottom:1px solid var(--rule)}
/* 左列：アイコン（墨）＋連番（イエロー）を縦に積む */
.fmark{display:flex; flex-direction:column; align-items:flex-start; gap:clamp(8px,1.2vw,14px)}
.flow .no{font-family:var(--num); font-weight:600; font-size:clamp(26px,3.4vw,40px); line-height:1; color:var(--lux); letter-spacing:.02em}
.flow h3{font-size:clamp(17px,2vw,21px); line-height:1.6}
.flow .fbody p{font-size:13.5px; line-height:2.05; color:#333; margin-top:10px}
.flow .fbody b{font-weight:700; background:linear-gradient(transparent 62%, var(--lux) 62%)}
.flow .meta{font-size:12px !important; color:var(--gray) !important; margin-top:10px !important}
.flow .meta a{border-bottom:1px solid var(--rule)}
.flow .meta a:hover{border-bottom-color:var(--ink)}

/* ---- 買取実績 ---- */
.results{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,32px)}
.results .photo{aspect-ratio:4/3; width:100%}
.results .who{font-size:12px; color:var(--gray); letter-spacing:.06em; margin-top:16px}
.results .what{font-family:var(--sans); font-weight:700; font-size:16px; letter-spacing:.03em; margin-top:4px}
.results .price{font-family:var(--num); font-weight:600; font-size:clamp(26px,3.2vw,34px); line-height:1.3; margin-top:8px; letter-spacing:.02em}
.results .price em{font-style:normal; font-family:var(--sans); font-size:13px; margin-left:4px}

/* ---- FAQ ---- */
.faq{max-width:860px; margin:0 auto; border-top:1px solid var(--rule)}
.faq-i{border-bottom:1px solid var(--rule)}
.faq-q{
  width:100%; background:none; border:0; cursor:pointer; text-align:left; font:inherit; color:inherit;
  display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; line-height:1.7;
}
.faq-q span{font-size:14.5px; font-family:var(--sans); font-weight:700; letter-spacing:.02em}
.faq-q i{position:relative; width:14px; height:14px; flex:none}
.faq-q i::before,.faq-q i::after{content:""; position:absolute; background:var(--ink); transition:transform .34s}
.faq-q i::before{left:0; top:6.5px; width:14px; height:1px}
.faq-q i::after{left:6.5px; top:0; width:1px; height:14px}
.faq-q[aria-expanded="true"] i::after{transform:scaleY(0)}
.faq-a{padding:0 34px 24px 0}
.faq-a p{font-size:13.5px; line-height:2.1; color:#333}
.faq-a a{border-bottom:1px solid var(--rule)}
.faq-a a:hover{border-bottom-color:var(--ink)}

/* 流れ・選ばれる理由の本文は文節区切りをやめる。
   auto-phrase だと行末が大きく余って、かえって不自然に見えるため（実測：STEP4の1行目が幅の59%） */
.flow .fbody p, .flow .meta, .reasons .r-t{word-break:normal; text-wrap:wrap}

@media (max-width:900px){
  /* 1カラムに。コピーを先に読ませ、人物はその下に回す */
  .bfv .inner{grid-template-columns:1fr; min-height:0; gap:0; padding-bottom:0}
  .bfv-body{order:1}
  .bfv-person{display:none}        /* 左カラムの人物はSPでは使わない */
  .bfv h1{white-space:normal}      /* 1行に収まらないので折り返しを許す */
  /* SPではFVのコピーを中央に揃える（見出し・リード・無料表示） */
  .bfv-head, .bfv-free{text-align:center}
  /* SPは3行に増えるので、字を少し詰めて行間も締める */
  .bfv-lead{font-size:13.5px; line-height:1.9}
  .spbr{display:inline}
  /* 左に人物、右にバッジ文言 */
  .bfv-sp-row{display:flex; align-items:center; justify-content:center; gap:clamp(8px,2.6vw,18px);
    margin-top:clamp(10px,2.6vw,18px); margin-bottom:clamp(10px,2.6vw,18px)}
  .bfv-person-sp{display:block; flex:0 0 36%; min-width:0}
  .bfv-person-sp img{display:block; width:100%; height:auto}
  /* 中身なりの幅にしないと行いっぱいに広がって中央寄せが効かない */
  .crests{flex:0 1 auto; flex-direction:column; align-items:stretch; gap:clamp(9px,2.4vw,14px);
    margin-top:0; min-width:0}
  .crests li{justify-content:flex-start}
  /* 月桂樹は出さず、ゴールドの罫だけで区切る */
  .c-in{width:100%; min-height:0; padding:0 0 0 11px; align-items:flex-start; text-align:left;
    border-left:2px solid var(--gold); white-space:normal}
  .c-in::before,.c-in::after{content:none}
  .bfv-btns{flex-direction:column}
  /* 縦積みでは flex-basis が「高さ」になるため解除する（300pxの高さになっていた） */
  .bfv-btns .btn{width:100%; flex:0 0 auto}
  .items{grid-template-columns:repeat(5,1fr)}
  /* 左に写真、右に3行。行を明示しないと写真が1行目にしか跨がらず、
     左下に大きな空白ができる */
  .results{grid-template-columns:1fr; gap:clamp(14px,3.6vw,22px)}
  .results li{display:grid; grid-template-columns:clamp(104px,30vw,132px) 1fr;
    grid-template-rows:auto auto auto; gap:2px 16px; align-items:center}
  .results .photo{grid-column:1; grid-row:1 / -1; aspect-ratio:1/1; align-self:center}
  .results .who  {grid-column:2; grid-row:1; margin-top:0; align-self:end}
  .results .what {grid-column:2; grid-row:2; margin-top:2px}
  .results .price{grid-column:2; grid-row:3; margin-top:2px; align-self:start;
    font-size:clamp(23px,7vw,30px)}
  .flow li{flex-wrap:wrap}
  .flow .fmark{width:52px}
  .flow .f-img{width:100%; order:3; aspect-ratio:16/9; margin-top:14px}
  .flow .no{font-size:22px}
  }
@media (max-width:520px){
  .items{grid-template-columns:repeat(4,1fr)}
}

/* ---- 選ばれる理由：3カード ---- */
.reasons{list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2vw,24px)}
.reasons li{
  border:1px solid var(--rule); padding:clamp(28px,3.2vw,40px) clamp(22px,2.6vw,32px) clamp(30px,3.4vw,42px);
  display:flex; flex-direction:column; transition:border-color .34s, transform .34s;
}
/* ホバーは「押せる」の合図。リンクを持つカード（01）だけ反応させる */
.reasons li:has(a):hover{border-color:var(--ink); transform:translateY(-4px)}
/* 連番・アイコン・見出しは中央、本文だけ左揃え */
/* アイコンはインラインSVG。Material Symbols の合字はSafariで効かず、
   文字（verified / badge / home）がそのまま出てしまった */
.reasons .r-ic{margin-top:clamp(12px,1.6vw,18px); text-align:center; line-height:0}
.reasons .r-ic svg{width:clamp(28px,3.2vw,38px); height:auto; color:var(--ink); display:inline-block}
.reasons .r-n{font-family:var(--num); font-weight:600; font-size:clamp(22px,2.6vw,32px);
  line-height:1; color:var(--lux); letter-spacing:.02em; text-align:center}
.reasons h3{font-size:clamp(15.5px,1.7vw,19px); line-height:1.65; letter-spacing:.03em; margin-top:12px;
  text-align:center; text-wrap:balance}
.reasons .r-t{font-size:13px; line-height:2.05; color:#333; margin-top:12px}
/* 外部リンクはカードの下端に置く。カードごとに本文の長さが違うので margin-top:auto で揃える */
.reasons .r-go{margin-top:auto; padding-top:clamp(20px,2.4vw,28px); align-self:flex-start;
  white-space:nowrap}   /* 矢印だけが次行に落ちるのを防ぐ */

@media (max-width:900px){
  .reasons{grid-template-columns:1fr}
}