/* 売買仲介ページ(2026-10-04)。全規則を .ob-page 内に限定。既存サイトのCSSを変更しない。
   元: docs/design/brokerage_20261004/brokerage.css。色・文字・部品は買取ページ(.op-page)とトップ中段(.ottimo-middle)に揃える。 */
.ob-page{background:#faf8f2;color:#142e48;font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;line-height:1.8;--teal:#126b6b;--line:#bad2d0}
.ob-page *{box-sizing:border-box}.ob-page img{max-width:100%;display:block}
.ob-page a{color:inherit;text-decoration:none}
.ob-page a:focus-visible,.ob-page summary:focus-visible{outline:3px solid #a86615;outline-offset:5px}
.ob-page h1,.ob-page h2,.ob-page h3,.ob-page p{margin-top:0}
.ob-page h2{font-size:clamp(24px,2.6vw,36px);line-height:1.55;font-weight:600}
.ob-page h3{font-size:21px;line-height:1.6}
.ob-page p{font-size:16px;line-height:1.9}
.ob-page .ob-small{font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:12px;color:#516675;margin:14px 0 0;line-height:1.8}
.ob-page .ob-small a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.ob-page .ob-nw{display:inline-block;white-space:nowrap}
.ob-page .ob-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.ob-page .ob-button{display:inline-flex;align-items:center;justify-content:center;background:var(--teal);color:#fff;padding:12px 24px;min-height:48px;border-radius:4px;letter-spacing:.06em;white-space:nowrap;font-weight:600}
.ob-page .ob-button:hover{background:#0c5258}
.ob-page .ob-line{background:#06c755}.ob-page .ob-line:hover{background:#05a648}
.ob-actions{display:flex;flex-wrap:wrap;gap:12px}

/* ヒーロー */
.ob-hero{position:relative;isolation:isolate;max-width:1440px;margin:auto;min-height:580px;display:flex;align-items:center;overflow:hidden}
.ob-page .ob-backdrop{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover}
.ob-page .ob-pic{display:contents}   /* スマホ用の切り出し(<source>)を選ぶだけ。箱は作らない(PC の並びを変えない) */
.ob-hero-copy{width:48%;padding:48px 5%}
.ob-page .ob-eyebrow{display:block;color:var(--teal);letter-spacing:.1em;font-size:16px;font-weight:400;line-height:1.8;margin-bottom:12px}
.ob-hero h1{margin-bottom:20px}
.ob-hero .ob-h1-main{display:block;font-size:clamp(28px,3.2vw,46px);line-height:1.5;letter-spacing:-.03em;font-weight:600}
.ob-hero .ob-h1-sub{display:block;font-size:clamp(19px,1.7vw,24px);line-height:1.7;font-weight:600;margin-top:10px}
.ob-hero-copy>p{max-width:470px}

/* 共通の段 */
.ob-section{max-width:1200px;margin:auto;padding:56px 28px}
.ob-heading{margin-bottom:28px}.ob-heading>p:last-child{color:#516675;margin-bottom:0}
.ob-center{text-align:center}
.ob-rule{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px}
.ob-number{display:block;color:var(--teal);font-size:30px;line-height:1.2}
.ob-three-pic{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:6px;margin:0 0 14px}
.ob-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.ob-three article{border-top:1px solid var(--line);padding-top:20px}
.ob-three p{font-size:15px;margin:0}
.ob-band{background:#eaf2ef}
.ob-compare{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ob-compare article{background:#fff;border-radius:6px;padding:28px}
.ob-tag{display:inline-block;font-size:22px;font-weight:600;color:var(--teal);margin-bottom:4px}
.ob-compare h3{font-size:20px}
.ob-compare-pic{float:right;width:150px;height:150px;margin:-10px -10px 8px 14px;border-radius:6px}
.ob-badge{display:inline-block;margin-left:10px;padding:2px 10px;border:1px solid var(--teal);border-radius:999px;font-size:13px;font-weight:600;vertical-align:4px}
.ob-compare p{font-size:15px}
.ob-for{display:inline-block;background:#9ab5b0;color:#fff;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:12px!important;padding:2px 12px;border-radius:3px;margin:4px 0 8px}
.ob-checks{list-style:none;padding:0;margin:0 0 8px;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:14px}
.ob-checks li{padding-left:22px;position:relative;line-height:1.9}
.ob-checks li:before{content:"";position:absolute;left:3px;top:.45em;width:8px;height:12px;border:solid var(--teal);border-width:0 2px 2px 0;transform:rotate(40deg)}
.ob-page .ob-textlink{display:inline-block;margin-top:12px;border-bottom:1px solid var(--teal);color:var(--teal);font-weight:600}
.ob-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;list-style:none;padding:0;margin:0}
.ob-flow li{border-top:1px solid var(--line);padding-top:16px}
.ob-flow h3{font-size:19px;margin:8px 0}.ob-flow p{font-size:14px;margin:0}

/* 媒介契約 */
.ob-page table{width:100%;border-collapse:collapse;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:14px;background:#fff}
.ob-page th,.ob-page td{border:1px solid #d1dddc;padding:14px 16px;text-align:center;vertical-align:middle}
.ob-contract-table thead th{background:#5d7f90;color:#fff;font-weight:600}
.ob-contract-table tbody th{background:#eef3f2;text-align:left;font-weight:600;width:30%}
.ob-contract-cards{display:none}

/* 仲介手数料 */
.ob-fee-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ob-fee-card{background:#f0f2eb;border-radius:6px;padding:20px;text-align:center}
.ob-fee-card>img{width:100%;height:170px;object-fit:contain;background:#fefdf8;border-radius:4px;margin-bottom:14px}
.ob-fee-card p{margin:0}
.ob-fee-price span,.ob-fee-amount span{display:block;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:12px;color:#516675}
.ob-fee-price strong{display:block;font-size:24px;line-height:1.4}
.ob-fee-amount strong{display:block;font-size:30px;line-height:1.4;color:#142e48}
.ob-fee-arrow{display:block;color:var(--teal);font-size:22px;line-height:1.2}
.ob-fee-more{max-width:520px;margin:20px auto 0}
.ob-fee-more caption{font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:13px;color:#516675;margin-bottom:6px}
.ob-fee-more th{text-align:left;font-weight:500}
.ob-special{max-width:720px;margin:24px auto 0;padding:18px 24px;border:1px solid #b9a271;border-radius:6px;background:#fffaf0}
.ob-special h3{font-size:18px;margin-bottom:4px}.ob-special p{margin:0;font-size:15px}
.ob-formula{max-width:720px;margin:20px auto 0;text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:14px 0}
.ob-formula span{display:block;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:12px;color:#516675}
.ob-formula strong{font-size:clamp(17px,2vw,22px);font-weight:600}
.ob-fee>.ob-small{max-width:720px;margin-left:auto;margin-right:auto}

/* よくある質問・詳しく */
.ob-faq-section{max-width:1000px}
.ob-faq{border-bottom:1px solid var(--line);padding:0 8px}
.ob-faq summary{cursor:pointer;padding:18px 4px;font-size:17px}
.ob-faq p{padding:0 20px 12px;font-size:15px}
.ob-more .ob-block{padding:8px 0 28px;border-bottom:1px solid var(--line);margin-bottom:28px}
.ob-more .ob-block:last-child{border-bottom:0;margin-bottom:0}
.ob-more h3{font-size:22px;margin-bottom:12px}
.ob-kinds{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.ob-kinds li{border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 16px;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:14px}
.ob-company{display:grid;grid-template-columns:7em 1fr;gap:8px 16px;margin:0;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:14px}
.ob-company dt{color:#516675}.ob-company dd{margin:0}
.ob-company a,.ob-page .ob-textlink-sm{color:var(--teal);text-decoration:underline;text-underline-offset:3px}

/* 相談の帯 */
.ob-closing{position:relative;isolation:isolate;max-width:1320px;margin:0 auto;min-height:380px;display:flex;align-items:center;overflow:hidden}
.ob-closing>div{width:50%;padding:36px}
.ob-closing h2{font-size:27px;letter-spacing:-.035em}
.ob-closing p{font-size:15px}
.ob-page .ob-handwritten{width:300px;max-width:85%;height:auto;margin:20px 0 0;transform:rotate(-3deg)}

@media(max-width:800px){
  .ob-hero{flex-direction:column;min-height:0}
  .ob-hero-copy{width:100%;padding:32px 24px;background:#faf8f2}
  .ob-hero .ob-backdrop{position:relative;order:2;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:right;width:100%;z-index:0}
  .ob-hero .ob-h1-main{font-size:clamp(26px,7vw,36px)}
  .ob-section{padding:36px 20px}
  .ob-three{grid-template-columns:1fr;gap:20px}
  .ob-three article{display:grid;grid-template-columns:112px 1fr;column-gap:14px;align-items:start}
  .ob-three-pic{grid-column:1;grid-row:1/4;margin:4px 0 0}
  .ob-three .ob-number{font-size:22px}
  .ob-compare{grid-template-columns:1fr}
  .ob-compare article{padding:22px 20px}
  .ob-compare-pic{width:104px;height:104px;margin:-6px -4px 6px 10px}
  .ob-flow{grid-template-columns:1fr;gap:16px}
  .ob-flow li{display:grid;grid-template-columns:48px 1fr;column-gap:12px}
  .ob-flow .ob-number{grid-row:1/3;font-size:26px}
  .ob-flow h3{margin:0 0 4px}
  /* 媒介契約: スマホは契約の種類ごとのカード */
  .ob-contract-table{display:none}
  .ob-contract-cards{display:grid;grid-template-columns:1fr;gap:14px}
  .ob-contract-cards article{background:#eef3f2;border-top:2px solid #729c95;padding:16px 18px;border-radius:4px}
  .ob-contract-cards h3{font-size:19px;margin:0 0 4px}
  .ob-contract-cards dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:13px}
  .ob-contract-cards dt{color:#516675}.ob-contract-cards dd{margin:0;font-weight:600;text-align:right}
  /* 手数料: 1枚ずつ縦に・絵は左に小さく */
  .ob-fee-cards{grid-template-columns:1fr;gap:14px}
  .ob-fee-card{display:grid;grid-template-columns:88px 1fr;align-items:center;gap:14px;padding:16px;text-align:left}
  .ob-fee-card>img{width:88px;height:88px;margin:0}
  .ob-fee-amount strong{font-size:26px}
  .ob-fee-price strong{font-size:21px}
  .ob-center{text-align:left}
  .ob-closing{flex-direction:column;align-items:stretch;background:#e7f4f1}
  .ob-closing>div{width:100%;padding:30px 20px}
  .ob-closing h2{font-size:23px}
  .ob-closing .ob-backdrop{position:relative;order:2;height:auto;aspect-ratio:2172/724;object-position:right;z-index:0}
  /* ★右下の固定の相談ボタン(幅 約80px)の分を空ける。ボタンが帯の右端まで伸びると、下までスクロールしたとき重なる */
  .ob-actions{padding-right:88px}
  .ob-actions .ob-button{flex:1 1 100%;font-size:15px}
  .ob-page .ob-handwritten{width:260px}
}
@media(max-width:360px){
  .ob-hero-copy{padding:28px 18px}
  .ob-hero-copy p br{display:none}
  .ob-page .ob-eyebrow{font-size:13px;letter-spacing:.04em}
  .ob-hero .ob-h1-main{font-size:24px}
  .ob-hero .ob-h1-sub{font-size:18px}
  .ob-page .ob-button{padding:12px 12px;letter-spacing:.02em;font-size:14px}
  .ob-actions{padding-right:84px}
  .ob-fee-card{grid-template-columns:70px 1fr;gap:12px;padding:14px}
  .ob-fee-card>img{width:70px;height:70px}
  .ob-fee-amount strong{font-size:23px}
  .ob-closing h2{font-size:21px}
  .ob-company{grid-template-columns:5.5em 1fr}
}

/* ★スマホ(600px 以下・2026-10-04 小野さん): 絵は左の白いぼかしを切り落とした切り出し(<picture> の <source>)を端から端まで。タブレット(601〜800px)と PC は今のまま。
   ★人物の顔が右下の固定ボタン(相談・電話・LINE)の列に入らない切り方。★相談の帯は絵を上に(モックのスマホ版の並び・絵を文の下に置くと、相談ボタンを読む位置で年配の男性の顔が固定ボタンの下に入った) */
@media(max-width:600px){
  .ob-hero .ob-backdrop{aspect-ratio:700/538;object-position:center}
  .ob-closing .ob-backdrop{order:-1;aspect-ratio:780/430;object-fit:cover;object-position:center}
}
@media (max-width:600px){
  .ob-compare-pic{float:none;display:block;width:100%;height:140px;margin:0 0 12px;object-fit:contain;background:#fefdf8}
}
@media (max-width:360px){
  .ob-three article{grid-template-columns:84px 1fr;column-gap:12px}
}