@charset "UTF-8";

/* ==========================================
  Pages / 下層ページ本文パーツ
  page-flow.php / page-items.php / page-first.php / page-shops.php / page-contact.php が
  直接出力する実HTMLの見た目。ブロックエディタには依存しない（Classic Editor 運用）。
========================================== */

/* style.css が読まれない環境（編集画面など）への保険 */
:root {
  --otf-red: #c80e15;
  --otf-red-dark: #a80b11;
  --otf-yellow: #fee97e;
  --otf-line-green: #06c755;
  --otf-text: #1a1a1a;
  --otf-text-sub: #555555;
  --otf-line: #e5e5e5;
  --otf-bg-gray: #fafafa;
}

/* ==========================================
  リード文
========================================== */
.otf-lead{font-size:1.0625rem;font-weight:500;line-height:2;color:var(--otf-text);margin-bottom:2rem;}
.otf-lead--stack{margin-bottom:1em;}
@media (min-width:768px) {
  .otf-lead{font-size:1.125rem;}
}

/* ==========================================
  セクション見出し（黒文字＋赤の下線アクセント）
========================================== */
.otf-heading{position:relative;font-weight:800;letter-spacing:.02em;line-height:1.4;color:var(--otf-text);padding-bottom:.875rem;margin:2.5rem 0 1.25rem;}
.otf-heading:first-child{margin-top:0;}
.otf-heading::after{content:"";position:absolute;left:0;bottom:0;width:40px;height:4px;background:var(--otf-red);}

/* ==========================================
  本文の基本要素
========================================== */
.otf-text{font-size:.9375rem;line-height:2;color:var(--otf-text);margin-bottom:1.25rem;}
.otf-list{padding-left:1.25em;list-style:disc;font-size:.9375rem;line-height:1.9;color:var(--otf-text-sub);margin-bottom:1.5rem;}
.otf-list li + li{margin-top:.5rem;}
.otf-list strong{color:var(--otf-text);font-weight:800;}

/* ==========================================
  グリッド共通（特徴・STEP・品目）
========================================== */
.otf-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin:1.5rem 0 2rem;list-style:none;padding:0;}
@media (min-width:600px) {
  .otf-grid{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:768px) {
  .otf-grid--3{grid-template-columns:repeat(3,1fr);}
  .otf-grid--4{grid-template-columns:repeat(4,1fr);}
}

/* ==========================================
  特徴カード
========================================== */
.otf-feature{background:#fff;border:1px solid var(--otf-line);border-radius:5px;padding:1.5rem;text-align:center;}
.otf-feature__icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;margin:0 auto .75rem;border-radius:5px;background:var(--otf-yellow);}
.otf-feature__icon i{font-size:28px;color:var(--otf-red);}
.otf-feature__title{font-size:1.125rem;font-weight:800;letter-spacing:.02em;color:var(--otf-red);margin-bottom:.5rem;}
.otf-feature__text{font-size:.875rem;line-height:1.8;color:var(--otf-text-sub);text-align:left;}

/* ==========================================
  買取の流れ STEP
========================================== */
.otf-step{background:var(--otf-bg-gray);border:1px solid var(--otf-line);border-radius:5px;padding:1.5rem;}
.otf-step__no{display:inline-block;font-size:.75rem;font-weight:800;letter-spacing:.08em;color:#fff;background:var(--otf-red);border-radius:5px;padding:.25rem .75rem;margin-bottom:.75rem;}
.otf-step__title{display:flex;align-items:center;gap:.5rem;font-size:1.125rem;font-weight:800;letter-spacing:.02em;color:var(--otf-text);margin-bottom:.5rem;}
.otf-step__title i{font-size:22px;color:var(--otf-red);}
.otf-step__text{font-size:.875rem;line-height:1.8;color:var(--otf-text-sub);}

/* ==========================================
  表
========================================== */
.otf-table{width:100%;border-collapse:collapse;font-size:.9375rem;margin:1.5rem 0 .75rem;}
.otf-table th,.otf-table td{border:1px solid var(--otf-line);padding:.875rem 1rem;text-align:left;vertical-align:top;line-height:1.8;}
.otf-table thead th{background:var(--otf-red);color:#fff;font-weight:800;letter-spacing:.02em;}
.otf-table tbody th{background:var(--otf-bg-gray);font-weight:700;width:34%;}
.otf-table__note{font-size:.8125rem;color:var(--otf-text-sub);margin-bottom:2rem;}
.otf-table__wrap{overflow-x:auto;}

/* ==========================================
  買取品目カード
========================================== */
.otf-item{background:#fff;border:1px solid var(--otf-line);border-radius:5px;overflow:hidden;}
.otf-item__thumb{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;}
.otf-item__body{padding:1rem 1.25rem 1.25rem;}
.otf-item__title{font-size:1.0625rem;font-weight:800;letter-spacing:.02em;color:var(--otf-red);margin-bottom:.5rem;}
.otf-item__text{font-size:.875rem;line-height:1.8;color:var(--otf-text-sub);}

/* ==========================================
  Q&A（details）
========================================== */
.otf-faq{margin:1.5rem 0 2rem;}
.otf-faq__item{border:1px solid var(--otf-line);border-radius:5px;padding:1rem 1.25rem;margin-bottom:.75rem;background:#fff;}
.otf-faq__item summary{font-weight:800;letter-spacing:.02em;color:var(--otf-text);cursor:pointer;line-height:1.6;}
.otf-faq__item summary::marker{color:var(--otf-red);}
.otf-faq__answer{font-size:.9375rem;line-height:1.9;color:var(--otf-text-sub);margin-top:.75rem;}

/* ==========================================
  注意書きボックス
========================================== */
.otf-notice{background:var(--otf-bg-gray);border:1px solid var(--otf-line);border-radius:5px;padding:1.25rem 1.5rem;margin:1.5rem 0 2rem;}
.otf-notice__title{font-size:1rem;font-weight:800;letter-spacing:.02em;color:var(--otf-text);margin-bottom:.5rem;}
.otf-notice .otf-list{margin-bottom:0;}

/* ==========================================
  ページ内CTA（電話・メール）
========================================== */
.otf-cta{background:var(--otf-red);border-radius:5px;padding:1.75rem 1.25rem;margin:2.5rem 0 0;text-align:center;}
.otf-cta__title{font-size:1.25rem;font-weight:800;letter-spacing:.02em;color:#fff;margin-bottom:.5rem;}
.otf-cta__text{font-size:.875rem;color:#fff;line-height:1.8;margin-bottom:1.25rem;}
.otf-cta__actions{display:flex;flex-direction:column;align-items:center;gap:.75rem;}
.otf-cta__btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:260px;padding:.875rem 1.5rem;font-weight:800;font-size:1rem;letter-spacing:.02em;border-radius:5px;transition:opacity .15s;}
.otf-cta__btn:hover{opacity:.85;}
.otf-cta__btn i{font-size:22px;}
.otf-cta__btn--tel{background:#fff;color:var(--otf-red);}
.otf-cta__btn--mail{background:var(--otf-yellow);color:var(--otf-text);}
@media (min-width:768px) {
  .otf-cta__actions{flex-direction:row;justify-content:center;}
}