/* 買取ページ(2026-10-03)。全規則を .op-page 内に限定。既存サイトのCSSを変更しない。
   元: docs/design/purchase_20261003/purchase.css。色・文字はトップ中段(.ottimo-middle)に揃える。ヘッダー・フッターはサイト共通のものを使う。 */
.op-page{background:#faf8f2;color:#142e48;font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;line-height:1.8;--teal:#126b6b;--line:#bad2d0}
.op-page *{box-sizing:border-box}.op-page img{max-width:100%;display:block}
.op-page a{color:inherit;text-decoration:none}
.op-page a:focus-visible,.op-page summary:focus-visible{outline:3px solid #a86615;outline-offset:5px}
.op-page h1,.op-page h2,.op-page h3,.op-page h4,.op-page p{margin-top:0}
.op-page h2{font-size:clamp(24px,2.6vw,36px);line-height:1.55;font-weight:600}
.op-page h3{font-size:21px;line-height:1.6}
.op-page p{font-size:16px;line-height:1.9}
.op-page .op-small{font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:12px;color:#516675;margin:14px 0 0}
.op-page .op-button{display:inline-flex;align-items:center;justify-content:center;background:var(--teal);color:#fff;padding:12px 28px;min-height:48px;border-radius:4px;letter-spacing:.08em;white-space:nowrap;font-weight:600}
.op-page .op-button:hover{background:#0c5258}
.op-page .op-nw{display:inline-block;white-space:nowrap}   /* 見出しは決めた切れ目でだけ折り返す(320px で「…しません／か。」に割れない) */

/* ヒーロー */
.op-hero{position:relative;isolation:isolate;max-width:1440px;margin:auto;min-height:580px;display:flex;align-items:center;overflow:hidden}
.op-page .op-backdrop{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover}
.op-hero-copy{width:54%;padding:48px 5%}
.op-page .op-eyebrow{display:block;color:var(--teal);letter-spacing:.1em;font-size:16px;font-weight:400;line-height:1.8;margin-bottom:12px}
.op-hero h1{margin-bottom:20px}
.op-hero .op-h1-main{display:block;font-size:clamp(26px,2.7vw,39px);line-height:1.6;letter-spacing:-.045em;font-weight:600}
.op-hero-copy>p{max-width:470px}
.op-page .op-handwritten{width:280px;max-width:85%;height:auto;margin:24px 0 0 36px;transform:rotate(-3deg)}

/* 共通の段 */
.op-section{max-width:1200px;margin:auto;padding:48px 28px}
.op-centered{text-align:center;margin-bottom:32px}
.op-rule{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:24px}
.op-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.op-cards img{width:100%;aspect-ratio:1;object-fit:cover;height:auto}
.op-cards h3{margin:12px 0 4px}.op-cards p{font-size:14px;margin:0}
.op-split{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;background:#fff}
.op-split>img{width:100%;height:100%;object-fit:cover;max-height:570px}
.op-split>div{padding:40px}
.op-split h2{border-bottom:1px solid var(--line);padding-bottom:14px}
.op-split h3{font-size:25px}
.op-checks{display:flex;padding:0;gap:20px;list-style:none;counter-reset:check}
.op-checks li{flex:1;font-size:15px;border-top:1px solid var(--line);padding-top:16px}
.op-checks li:before{counter-increment:check;content:"0" counter(check);display:block;color:var(--teal);font-size:28px}
/* 線のアイコン(SVG・文字は画像にしない) */
.op-page .op-icon{display:block;width:34px;height:34px;margin:6px 0 8px;fill:none;stroke:var(--teal);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.op-page .op-icon-sm{display:inline-block;width:22px;height:22px;margin:0 8px 0 0;vertical-align:-5px}
.op-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;list-style:none;padding:0;margin:0}
.op-number{color:var(--teal);font-size:32px;display:block;border-bottom:1px solid var(--line);margin-bottom:12px}
.op-flow h3{font-size:19px;margin-bottom:8px}.op-flow p{font-size:14px;margin:0}
.op-conditions{display:grid;grid-template-columns:30% 1fr;gap:28px}
.op-conditions>img{width:100%;height:100%;object-fit:cover;max-height:340px}
.op-page table{width:100%;border-collapse:collapse;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:14px}
.op-page th,.op-page td{text-align:left;border:1px solid #d1dddc;padding:18px;vertical-align:top}
.op-page thead{background:#e7f0ef}.op-page tbody th{width:28%;white-space:nowrap}
.op-faq{border-bottom:1px solid var(--line);padding:0 8px}
.op-faq summary{cursor:pointer;padding:18px 4px;font-size:17px}
.op-faq p{padding:0 20px 12px;font-size:15px}
.op-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* 詳しく知りたい方へ(前のページから残す内容) */
.op-more .op-block{padding:8px 0 32px;border-bottom:1px solid var(--line);margin-bottom:32px}
.op-more .op-block:last-child{border-bottom:0;margin-bottom:0}
.op-more h3{font-size:22px;margin-bottom:12px}
.op-more h4{font-size:16px;color:var(--teal);margin:20px 0 10px;font-weight:600}
.op-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px}
.op-grid li{border-top:1px solid var(--line);padding-top:12px}
.op-grid strong{display:block;font-size:16px;margin-bottom:4px}
.op-grid span{display:block;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:14px;line-height:1.8;color:#2f4a5e}
.op-page .op-center{text-align:center;margin-top:24px}
.op-page .op-small a,.op-page .op-textlink{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.op-cases{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.op-cases img{width:100%;aspect-ratio:4/3;object-fit:cover}
.op-cases p{font-size:14px;margin:10px 0 0}
.op-cases .op-case-pair{grid-column:1 / -1}
.op-before-after{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.op-before-after figure{margin:0}.op-before-after img{width:100%;aspect-ratio:3/4;object-fit:cover}
.op-before-after figcaption{font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:13px;color:#516675;margin-top:6px}
.op-line-row{display:flex;gap:24px;align-items:center}
.op-line-row img{width:160px;height:160px;flex:none}
.op-page .op-button-line{background:#06c755}
.op-page .op-button-line:hover{background:#05a648}
.op-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}
.op-company dt{color:#516675}.op-company dd{margin:0}
.op-company a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}

/* 相談の帯 */
.op-closing{position:relative;isolation:isolate;max-width:1320px;margin:0 auto;min-height:350px;display:flex;align-items:center;overflow:hidden}
.op-closing>div{width:47%;padding:36px}
.op-closing h2{font-size:27px;letter-spacing:-.035em}
.op-closing p{font-size:14px}
.op-page .op-closing .op-handwritten{width:300px;margin:20px 0 0}

@media(max-width:800px){
  .op-hero{flex-direction:column;min-height:0}
  .op-hero-copy{width:100%;padding:32px 24px;background:#faf8f2}
  .op-hero .op-h1-main{font-size:clamp(22px,4.6vw,34px)}
  .op-hero .op-backdrop{position:relative;order:2;height:auto;aspect-ratio:2/1;object-fit:cover;object-position:right;width:100%;z-index:0}
  .op-section{padding:32px 20px}
  .op-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}
  .op-cards h3{font-size:18px}.op-cards p{font-size:13px}
  .op-split{grid-template-columns:1fr}
  .op-split>img{max-height:340px;aspect-ratio:1.6}
  .op-split>div{padding:28px 20px}.op-split h3{font-size:22px}
  .op-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
  .op-conditions{grid-template-columns:1fr}
  .op-conditions>img{height:180px;object-position:center}
  .op-page th,.op-page td{padding:12px;font-size:13px}
  .op-closing{flex-direction:column;align-items:stretch;background:#e7f4f1}
  .op-closing>div{width:100%;padding:30px 20px}
  .op-closing h2{font-size:23px}
  .op-closing .op-backdrop{position:relative;order:2;height:auto;aspect-ratio:2100/749;object-position:right;z-index:0}
  .op-checks{gap:12px}.op-checks li{font-size:13px}
  .op-page .op-handwritten{width:250px;margin:20px 0 0}
  .op-page .op-closing .op-handwritten{width:270px}
  .op-grid,.op-cases{grid-template-columns:1fr}
  .op-line-row{flex-direction:column;align-items:flex-start}
  .op-more h3{font-size:20px}
  .op-page .op-center{text-align:left}   /* 右下の固定の相談ボタンと重ならないよう、左に寄せる */
}
@media(max-width:400px){
  .op-flow{grid-template-columns:1fr}
  .op-page tbody th{white-space:normal}
  .op-hero-copy{padding:28px 18px}
  .op-hero-copy p br{display:none}
  .op-page .op-button{padding:12px 20px;letter-spacing:.04em}
  .op-company{grid-template-columns:5.5em 1fr}
}
@media(max-width:360px){
  .op-hero .op-h1-main{font-size:19px}
  .op-page .op-eyebrow{font-size:13px;letter-spacing:.04em}
  .op-closing h2{font-size:21px}
  .op-page .op-button{padding:12px 16px}   /* 右下の固定の相談ボタン(左端 225px)に掛からない幅 */
}