/* 解決事例のページ(2026-11-05)。全規則を .ocs- に限定。既存サイトのCSSを変更しない。
   色・文字・部品は会社概要(company_page.css)・売買仲介・買取のページに揃える。 */
.ocs-page{background:#faf8f2;color:#142e48;font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;line-height:1.8;--teal:#126b6b;--line:#bad2d0}
.ocs-page *{box-sizing:border-box}
.ocs-page a{color:inherit;text-decoration:none}
.ocs-page a:focus-visible{outline:3px solid #a86615;outline-offset:5px}
.ocs-page h1,.ocs-page h2,.ocs-page p,.ocs-page dl,.ocs-page dd{margin-top:0}
.ocs-page .ocs-nw{display:inline-block;white-space:nowrap}

/* 頭 */
.ocs-hero{max-width:960px;margin:auto;padding:56px 24px 32px}
.ocs-eyebrow{display:block;color:var(--teal);letter-spacing:.1em;font-size:16px;margin-bottom:8px}
.ocs-h1-main{display:block;font-size:clamp(30px,3.4vw,44px);line-height:1.4;font-weight:600;letter-spacing:.02em}
.ocs-hero h1{margin-bottom:20px}
.ocs-result{display:inline-block;margin:0;background:#eaf2ef;border-left:4px solid var(--teal);padding:12px 18px;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:16px;font-weight:600;line-height:1.7}

/* 事例 */
.ocs-cases{max-width:960px;margin:auto;padding:8px 24px 48px;display:grid;gap:28px}
.ocs-case{background:#fff;border:1px solid #d1dddc;border-radius:6px;padding:28px 28px 20px}
.ocs-num{color:var(--teal);font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:13px;font-weight:700;letter-spacing:.12em;margin-bottom:6px}
.ocs-case h2{font-size:clamp(20px,2.2vw,26px);line-height:1.6;font-weight:600;text-wrap:balance;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px}
.ocs-meta{display:inline-block;font-size:15px;font-weight:400;color:#516675;margin-left:4px}
.ocs-steps{margin:0;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:15px}
.ocs-step{display:grid;grid-template-columns:10em 1fr;gap:16px;padding:12px 0;border-top:1px dashed #d1dddc}
.ocs-step:first-child{border-top:0;padding-top:0}
.ocs-step dt{font-weight:700;color:var(--teal)}
.ocs-step dd{margin:0;line-height:1.9;min-width:0}
.ocs-lesson{background:#eaf2ef;border-top:0;border-radius:4px;padding:14px 16px;margin-top:8px}

/* 相談の帯 */
.ocs-closing{background:#eaf2ef;text-align:center;padding:56px 24px}
.ocs-closing h2{font-size:clamp(22px,2.4vw,32px);line-height:1.55;font-weight:600;margin-bottom:12px}
.ocs-closing p{font-size:16px}
.ocs-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:20px 0 8px}
.ocs-button{display:inline-flex;align-items:center;justify-content:center;background:var(--teal);color:#fff!important;padding:12px 24px;min-height:48px;border-radius:4px;letter-spacing:.06em;white-space:nowrap;font-weight:600}
.ocs-button:hover{background:#0c5258}
.ocs-line{background:#06c755}.ocs-line:hover{background:#05a648}
.ocs-small{font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:13px;color:#516675;margin-top:16px}
.ocs-small a{color:var(--teal);text-decoration:underline;text-underline-offset:3px;margin:0 6px;white-space:nowrap}

@media (max-width:600px){
  .ocs-hero{padding:36px 16px 24px}
  .ocs-cases{padding:4px 16px 36px;gap:20px}
  .ocs-case{padding:22px 18px 16px}
  .ocs-step{grid-template-columns:1fr;gap:4px}
  .ocs-result{font-size:15px}
}

/* 一覧(2026-11-05 個別のページに分けた) */
.ocs-list{max-width:960px;margin:auto;padding:8px 24px 48px;display:grid;gap:20px}
.ocs-item{display:block;background:#fff;border:1px solid #d1dddc;border-radius:6px;padding:24px 28px;transition:border-color .2s,box-shadow .2s}
.ocs-item:hover{border-color:var(--teal);box-shadow:0 2px 12px rgba(18,107,107,.12)}
.ocs-item h2{font-size:clamp(19px,2vw,24px);line-height:1.6;font-weight:600;text-wrap:balance;margin-bottom:10px}
.ocs-lesson-text{font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:15px;line-height:1.9;color:#2b4357;margin-bottom:10px}
.ocs-more{font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:14px;font-weight:700;color:var(--teal)}

/* 個別のページ */
.ocs-crumb{max-width:960px;margin:auto;padding:24px 24px 0;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:13px;color:#516675}
.ocs-crumb a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.ocs-page .ocs-case-h{font-size:clamp(22px,2.6vw,30px);line-height:1.55;font-weight:600;text-wrap:balance;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px}
.ocs-links{background:#fff;border:1px solid #d1dddc;border-radius:6px;padding:22px 28px}
.ocs-links h2{font-size:19px;font-weight:600;margin-bottom:10px}
.ocs-links ul{margin:0;padding-left:1.2em;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;font-size:15px;line-height:1.9}
.ocs-links li a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){
  .ocs-list{padding:4px 16px 36px}
  .ocs-item{padding:20px 18px}
  .ocs-links{padding:18px}
  .ocs-crumb{padding:16px 16px 0}
}

/* 事例の写真(2026-11-05)。説明の文は付けない。スマホは横にすべらせる */
.ocs-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 22px}
.ocs-photos img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:4px;max-width:100%}
@media (max-width:600px){.ocs-photos{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}}