@charset "UTF-8";

/* 基本色 */
:root {
	--main-color: #5D9AB2;
	--accent-color: #BF6A7A;
	--dark-main-color: #2B5566;
	--text-bright-color: #fff;
	--icon-color: #fff;
	--icon-bk-color: #ddd;
	--gray-color: #ddd;
	--large-width: 1000px;
	--middle-width: 800px;
	--ink:#1d2b36;
    --muted:#4b778b;
    --sunday:#c64232;
    --line:#e5e7ea;
    --maxw:950px;
}

/* 基本設定： フォントサイズ */
@media (max-width: 599px) {
	:root {
		font-size: 14px;
	}
}

@media (min-width: 600px) and (max-width: 799px) {
	:root {
		font-size: 16px;
	}
}

@media (min-width: 800px) {
	:root {
		font-size: 18px;
	}
}

body {font-size: 16px;}


/* 基本設定： ページ全体 */
body {
	margin: 0;
	font-family: 'メイリオ',
		'Hiragino Kaku Gothic Pro', 
		sans-serif;
}



:root{
  --komaki-orange:#f3a02b; /* 見本のオレンジ */
  --komaki-orange-deep:#e38f16;
  --komaki-red:#d34a2f;
  --ink:#333; --muted:#777; --line:#ececec;
  --maxw: 1000px;
}

.takuhaikaitori{
	background:#fff; color:var(--ink);
	font-feature-settings:"palt";
}

/* ===============================
   共通スタイル
=============================== */

/* コンテナ */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px;
}

/* セクションタイトル */
.sec-ttl {
  font-size: 24px;
  text-align: center;
  margin: 36px 0 20px;
  position: relative;
}

.sec-ttl::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  background: var(--komaki-orange);
  margin: 10px auto 0;
  border-radius: 2px;
}

/* 区切り線 */
.divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 24px 0;
}

/* ボタン */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 12px 22px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
}

.btn--line {
  background: #00c300;
  color: #fff;
}

.btn--form {
  background: var(--komaki-orange);
  color: #fff;
}

.btn:hover {
  filter: brightness(0.98);
  transform: translateY(-1px);
}


/* ヒーロー／KV */
.kv{
  background:#fff;
  padding-top:100px;
}

.kv__img{
  width:100%;
  max-width:960px;
  height:auto;
  display:block;
  margin:0 auto;
}

/* リード（創業60年の京都老舗質屋だからできる安心の高価買取！） */
.lead{
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(520px, 100%);
  gap: 24px;
  align-items: center;
  padding: 28px 16px;
}

.lead__ttl{
  font-size: 26px;
  line-height: 1.6;
  margin: 0 0 10px;
}

.lead__ttl span{
  color: var(--komaki-red, #c32020); /* 変数未定義でも #c32020 にフォールバック */
  font-weight: 800;
}

/* 画像や右カラム用の要素があるなら安全策 */
.lead__media{ width: 100%; }
.lead__media img{ max-width: 100%; height: auto; display: block; }

/* モバイルで1カラムに崩す */
@media (max-width: 768px){
.lead{
    grid-template-columns: 1fr;
    gap: 16px;
}
.lead__ttl {
	font-size: 22px;
}
}

.lead__para {
	color:#555;
	margin:0;
	font-size: 15px;
}
.lead__illust {
	width:100%;
	max-width:500px;
	height:auto;
}

@media (max-width:900px){
  .lead {
	grid-template-columns:1fr;
	text-align:center;
}
  .lead__illust {
	max-width:520px;
	justify-self:center;
}
}
/* ─── 箇条書きデザイン ─── */
.lead__bullets {
  margin-top: 10px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.lead__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 15px;
  line-height: 1.6;
  color: #333;
}

.lead__bullets li::before {
  content: "✔";
  color: var(--komaki-orange, #f18a00);
  font-weight: 700;
  margin-top: 2px;
  flex-shrink: 0;
}

/* スマホ調整 */
@media (max-width: 600px) {
  .lead__bullets li {
    font-size: 14px;
    padding: 8px 10px;
  }
}


/* 選ばれる理由3つ */
.reason-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-bottom: 6px;
  list-style: none;
  margin: 0;
  padding-left: 0;  /* ← ★ 左余白を削除 */
}

.reason {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  background: #fff;
}

.reason__icon img {
  width: 100px;
  height: 100px;
}

.reason__ttl {
  color: var(--komaki-orange);
  font-size: 18px;
  margin: .2em 0 .4em;
}

.reason__txt {
  color: #666;
  font-size: 14px;
  margin: 0;
}

/* ▼ スマホ（1カラム＋中央寄せ） */
@media (max-width: 800px) {
  .reason-cards {
    grid-template-columns: 1fr;
    justify-items: center; /* 中央寄せ */
    padding-left: 0;        /* 念のため残しておく */
  }

  .reason {
    width: 90%;
    max-width: 330px;
  }

  .sec-ttl {
    font-size: 19px;
    text-align: center;
  }
}


/* ===============================買取簡単ステップ（画像準拠デザイン）=============================== */

.steps {
  text-align: center;
  margin: 60px auto;
  padding-top:20px;
}

.steps .sec-ttl {
  font-size: 1.6em;
  font-weight: bold;
  margin-bottom: 30px;
}

/* ステップ全体 */
.steps .step-cards {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 auto 20px;
  padding: 0;
}

/* 各ステップカード */
.step {
  background: #fff6e7;
  border: 1px solid #f3d49a;
  border-radius: 4px;
  width: 170px;
  padding: 0;
  text-align: center;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 上のオレンジ帯 */
.step__cap {
  background: #f6a21e;               /* 濃いオレンジ */
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  padding: 6px 0;
  margin: 0;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* 本体内容 */
.step__ttl {
  font-weight: bold;
  font-size: 15px;
  margin: 20px 0 5px;
  color: #333;
}

.step__txt {
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  margin: 0 10px 15px;
}

.step__txt .note {
  color: #d33;         
  font-size: 12px;     
  margin-top: 4px;     
}

.step img {
  width: 100px;
  margin-top: 12px;
}

/* 矢印アイコン（右向き） */
.step:not(:last-child)::after {
  content: "▶";
  color: #f6a21e;
  font-size: 16px;
  position: absolute;
  right: -18px;
  top: 50%;
  transform: translateY(-50%);
}

/* LINE査定＆宅配申込みボタン */
.steps .cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 30px;
}

.steps .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 240px;
  padding: 12px 20px;
  border-radius: 4px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  position: relative;
  font-size: 16px;
  box-sizing: border-box;
}

.steps .btn::before {
  content: "▶";
  color: #fff;
  font-size: 12px;
  margin-right: 8px;
  display: inline-block;
  transform: translateY(1px);
}

.btn--line {
  background: #f16234;
}

.btn--form {
  background: #d34a2f;
}

.steps .btn:hover {
  opacity: 0.9;
}

/* スマホ対応 */
@media (max-width: 900px) {
  .steps .cta-row {
    flex-direction: column;
    gap: 10px;
  }

  .steps .btn {
    width: 100%;          /* ← スマホでは全幅にするのが自然 */
    max-width: 320px;     /* ← デカすぎ防止（任意） */
  }

  .steps .step-cards {
    justify-content: center;
  }

  .step {
    width: 45%;
  }

  .step:not(:last-child)::after {
    display: none;
  }
}


@media (max-width: 600px) {
  .step {
    width: 100%;
  }
}


/* -----------------------------------------ボロボロのお品でも買取OK！ -------------------------------*/
.condition {
  text-align: center;
  padding-top:10px;
}

/* コンディションリード文 */
.condition__lead {
  text-align: center;
  color: #555;
  margin: 0px 0 20px;
  font-size: 15px;
}

/* PC & タブレットは5→3→2のグリッド */
.detail-photos {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.detail-photos img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.detail-cap {
  font-size: 14px;
  color: #555;
  margin-top: 6px;
  text-align: center;
  font-weight: bold;
}

/* タブレット */
@media (max-width: 900px) {
  .detail-photos {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ✅ スマホ：画像＋テキスト横並び & 縦1列リスト */
@media (max-width: 520px) {
  .detail-photos {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .detail-photos li {
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
  }

  .detail-photos img {
    width: 70px;      /* ← 画像小さめサムネ */
    height: auto;
  }

  .detail-cap {
    margin: 0;
    font-size: 14px;
    line-height: 1.4;
  }
}



/* ----------------------------------------- 宅配キット案内（右パネル＝画像版） -----------------------------*/
.kit {
  text-align: center;
  padding-top: 30px;
  margin-top: 40px;
}

/* 上段レイアウト */
.kit__top {
  display: grid;
  grid-template-columns: 420px 1fr; /* 左画像 / 右画像 */
  gap: 28px;
  align-items: start;
  justify-content: center;
  max-width: 920px;
  margin: 10px auto 8px;
}

/* 左側メイン画像 */
.kit__hero img {
  width: 75%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* 右側：黄色パネル画像 */
.kit__panel {
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
}

.kit__panel-list img {
  width: 100%;
  height: auto;
  margin-top: 40px;
  border-radius: 8px;
  display: block;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* 下段：サイズカード部分（そのまま利用OK） */
.kit-sizes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  list-style: none;
  margin: 24px auto 0;
  padding: 24px 20px;
  max-width: 1050px;
  border: 4px solid #f3c972;
  border-radius: 10px;
}

.size-card {
  position: relative;
  background: #fff;
  border: 1px solid #e9e1cf;
  border-radius: 10px;
  padding: 16px 16px 18px;
  text-align: left;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.size-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}



.size-dim {
  margin: 10px 0 6px;
  font-weight: 700;
  color: #7a6b51;
  text-align: center;
}

.size-text {
  margin: 0;
  color: #444;
  line-height: 1.8;
  font-size: 13px;
}

/* レスポンシブ対応 */
@media (max-width: 980px) {
  .kit__top {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .kit-sizes {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .kit-sizes {
    grid-template-columns: 1fr;
    padding: 18px 14px;
    gap: 18px;
  }

  .size-badge {
    left: 12px;
    top: -16px;
    width: 56px;
    height: 56px;
  }
}



/* =============================== FAQ =============================== */

.faq {
  margin-top: 80px;
}

/* アコーディオン全体 */
.accordion {
  max-width: var(--maxw);
  margin: 8px auto 0;
  padding: 0;
}

/* Q & Aブロック */
.qa {
  background: #fff;
  border-bottom: 1px solid var(--line);
}

/* 質問 */
.q {
  margin: 0;
  padding: 14px 16px;
  background: #fff8ea;
  font-weight: 700;
  cursor: pointer;
  position: relative;
}

/* Qマーク */
.q span {
  display: inline-block;
  margin-right: .6em;
  color: #f5a02b;
  font-weight: 800;
}

/* ＋／－アイコン */
.q::after {
  content: "＋";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: #bbb;
}

.qa.open .q::after {
  content: "－";
}

/* 回答（閉じている状態） */
.a {
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0 16px; /* 左右だけ残す */
  color: #444;
  background: #fff;
  transition: max-height .35s ease, padding .35s ease;
}

/* 回答（開いた状態） */
.qa.open .a {
  max-height: 300px;
  padding: 14px 16px;
}

/* Aマーク */
.a span {
  display: inline-block;
  margin-right: .6em;
  color: #d34a2f;
  font-weight: 800;
}



/* =============================== 最終CTA =============================== */
.final-cta {
	margin-bottom: 60px;
}

/* ボタン2つ横並び */
.final-cta .cta-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;              /* ← steps と統一 */
  margin-top: 60px;       /* steps より少し広めに設定（任意） */
}

.final-cta .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 240px;           /* ← steps と統一（同じボタン幅） */
  padding: 12px 20px;
  border-radius: 4px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  font-size: 16px;
  box-sizing: border-box;
  position: relative;
}

/* 左に ▶ アイコン */
.final-cta .btn::before {
  content: "▶";
  color: #fff;
  font-size: 12px;
  margin-right: 8px;
  display: inline-block;
  transform: translateY(1px);
}

.btn--line {
  background: #f16234;
}

.btn--form {
  background: #d34a2f;
}

.final-cta .btn:hover {
  opacity: 0.9;
}

/* ================= スマホ対応 ================= */
@media (max-width: 900px) {
  .final-cta .cta-row {
    flex-direction: column;    /* ← スマホで縦並び */
    gap: 10px;
  }

  .final-cta .btn {
    width: 100%;               /* 全幅 */
    max-width: 320px;          /* でかくなりすぎ防止 */
  }
}

/* =================== 最終CTA：電話ボックス =================== */

.tel--box {
  border: 3px solid var(--komaki-orange);
  border-radius: 6px;
  padding: 40px 20px 28px;
  margin: 40px auto 0;
  max-width: 720px;
  text-align: center;
  position: relative;
  box-sizing: border-box;
}

/* 上のオレンジ帯（ラベル） */
.tel__label {
  background: var(--komaki-orange);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 6px 22px;
  border-radius: 20px;
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
}

/* 電話番号 */
.tel__num {
  margin: 0;
  margin-top: 10px;
  font-size: 26px;
  font-weight: 700;
  color: #222;
}

/* 「買取専用」ラベル */
.tel__num span {
  background: #ffefcf;
  padding: 3px 10px;
  border-radius: 6px;
  margin-right: .6em;
  font-size: 15px;
  font-weight: 700;
}

/* 電話アイコン */
.tel__num .fa-phone {
  color: #2e9c3f; /* 緑色：フリーダイヤル感 */
  margin-right: 6px;
  font-size: 22px;
  transform: translateY(2px);
}


/* ================= スマホ対応 ================= */
@media (max-width: 600px) {
  .tel--box {
    padding: 26px 14px 18px;
    margin-top: 28px;
    border-width: 2px;
    max-width: 94%;
  }

  .tel__label {
    font-size: 12px;
    padding: 5px 20px;
    white-space: nowrap;
    min-width: 230px;
    text-align: center;
  }

  .tel__num {
    font-size: 18px;
    margin-top: 6px;
    line-height: 1.4;
  }

  .tel__num span {
    font-size: 12px;
    padding: 2px 7px;
    margin-right: .4em;
    border-radius: 4px;
  }

  .tel__num .fa-phone {
    font-size: 18px;
    margin-right: 4px;
    transform: translateY(1px);
  }
}