/* ============================================================
   kaitai-kojin.css - 個人向け解体工事ページ
   ページ背景: #FEE400（黄色）
   ============================================================ */

body {
  background-color: #FEE400;
}

/* --------------------------------------------------------
   kj_onayami - こんなお悩みで
   PC: 1180px幅中央 / 中央に家の画像 + 4つの白楕円アイテム（絶対配置）
   -------------------------------------------------------- */
.kj_onayami {
  padding: 40px 10px;
}

.kj_onayami_inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.kj_onayami_title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.362;
  text-align: center;
  color: #000000;
  margin: 0;
}

/* SP: 2列グリッドで4アイテムを並べる */
.kj_onayami_board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 10px;
  width: 100%;
}

/* SP では中央画像を非表示 */
.kj_onayami_img {
  grid-column: 1 / 3;
}

/* 白楕円アイテム */
.kj_onayami_item {
  background-color: #ffffff;
  border-radius: 50%;
  aspect-ratio: 330 / 174;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.kj_onayami_item p {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.05em;
  color: #000000;
  margin: 0;
  padding: 0 12px;
}

/* --------------------------------------------------------
   kj_hojokin - 空き家解体補助金
   PC: 1280×749px / 背景画像 + 中央コンテンツ(w=672)
   -------------------------------------------------------- */
.kj_hojokin {
  background: url('../images/kojin_hojokin_bg.png') center / cover no-repeat;
  background-color: #4E9C37; /* fallback */
  padding: 60px 24px;
}

.kj_hojokin_inner {
  max-width: 672px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.kj_hojokin_title {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.362;
  text-align: center;
  color: #ffffff;
  margin: 0;
}

.kj_hojokin_ex {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.362;
  text-align: center;
  color: #ffffff;
  margin: 0;
}

.kj_hojokin_note {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.362;
  text-align: center;
  color: #ffffff;
  margin: 0;
}

/* 下向き三角 */
.kj_hojokin_arrow {
  display: block;
  width: 100px;
  height: 30px;
  background-color: #ffffff;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* ライン付きテキスト */
.kj_hojokin_deco {
  display: flex;
  align-items: center;
  gap: 8px;
}

.kj_hojokin_line {
  display: block;
  width: 36px;
  height: 3px;
  background-color: #ffffff;
  flex-shrink: 0;
}

.kj_hojokin_support {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.362;
  color: #ffffff;
  margin: 0;
  text-align: center;
}

/* CTAボタン */
.kj_hojokin_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  max-width: 540px;
  height: 84px;
  background-color: #FF7B00;
  border-radius: 10px;
  text-decoration: none;
}

.kj_hojokin_btn span {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.362;
  color: #ffffff;
}

/* --------------------------------------------------------
   kj_trouble - 解体工事の不安・心配
   PC: 967px幅中央 / タイトル + 左:チェックリスト + 右:画像
   背景: #FEE400（ページ背景のまま）
   -------------------------------------------------------- */
.kj_trouble {
  padding: 60px 24px;
}

.kj_trouble_inner {
  max-width: 967px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.kj_trouble_title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.362;
  text-align: center;
  color: #000000;
  margin: 0;
}

/* SP: 縦積み */
.kj_trouble_body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.kj_trouble_list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.kj_trouble_list li {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 2;
  color: #000000;
}

.kj_trouble_img img {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------
   kj_reason - 選ばれる理由
   PC: 1280px幅 / SVG背景 + 中央ヘッダー(w=719) + アイテム5件(w=900)
   -------------------------------------------------------- */
.kj_reason {
  background: url('../images/kojin_reason_bg.png') center / cover no-repeat;
  background-color: #4E9C37; /* fallback */
  padding: 100px 24px 60px;
}

/* ヘッダー */
.kj_reason_head {
  max-width: 800px;
  margin: 0 auto 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.kj_reason_sub {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.362;
  text-align: center;
  color: #ffffff;
  margin: 0;
}

.kj_reason_lead {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.362;
  text-align: center;
  color: #ffffff;
  margin: 0;
}

.kj_reason_catchline {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.362;
  text-align: center;
  color: #ffffff;
  margin: 0;
}

/* アイテムリスト */
.kj_reason_items {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.kj_reason_item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
}

/* 丸バッジ（番号） */
.kj_reason_badge {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kj_reason_badge span {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
  color: #4E9C37;
}

.kj_reason_text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.kj_reason_heading {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.5;
  color: #ffffff;
  margin: 0;
}

.kj_reason_body {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.444;
  color: #ffffff;
  margin: 0;
}

/* --------------------------------------------------------
   kj_kaitai - 解体工事内容
   PC: 940px幅中央 / タイトル + 白ボックス（テキストリスト + 右画像）
   -------------------------------------------------------- */
.kj_kaitai {
  padding: 60px 24px;
}

.kj_kaitai_inner {
  max-width: 940px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 29px;
}

.kj_kaitai_title {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.362;
  text-align: center;
  color: #000000;
  margin: 0;
}

.kj_kaitai_box {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.kj_kaitai_list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.kj_kaitai_list li {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 2;
  color: #000000;
}

.kj_kaitai_img img {
  width: 100%;
  height: auto;
  display: block;
}

/* --------------------------------------------------------
   kj_case - 解体の事例
   PC: 1220px幅中央 / タイトル + 4列グリッド
   -------------------------------------------------------- */
.kj_case {
  padding: 60px 24px;
}

.kj_case_inner {
  max-width: 1220px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.kj_case_title {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.362;
  text-align: center;
  color: #000000;
  margin: 0;
}

/* SP: 2列グリッド */
.kj_case_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.kj_case_card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kj_case_card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  display: block;
}

.kj_case_card_title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.362;
  color: #000000;
  margin: 0;
}

.kj_case_card_info {
  list-style: none;
  padding: 0;
  margin: 0;
}

.kj_case_card_info li {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.362;
  color: #000000;
}

/* --------------------------------------------------------
   kj_price - 料金の目安
   PC: 1280px幅 / 背景画像 + タイトル + 2枚カード + 注釈 + CTA
   -------------------------------------------------------- */
.kj_price {
  background: url('../images/kojin_price_bg.png') center / cover no-repeat;
  background-color: #4E9C37; /* fallback */
  padding: 100px 24px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.kj_price_title {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.362;
  text-align: center;
  color: #ffffff;
  margin: 0;
  width: 100%;
}

.kj_price_cards {
  max-width: 945px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* SP: カード縦積み */
.kj_price_row {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.kj_price_card {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.kj_price_card img {
  width: 100%;
  height: auto;
  display: block;
}

.kj_price_card_title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.362;
  text-align: center;
  color: #ffffff;
  margin: 0;
}

/* 注釈ボックス */
.kj_price_note {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 16px 20px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kj_price_note_text {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.55;
  color: #000000;
  margin: 0;
}

.kj_price_note_sub {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.362;
  color: #000000;
  margin: 0;
}

/* CTAエリア */
.kj_price_cta {
  max-width: 540px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.kj_price_cta_deco {
  display: flex;
  align-items: center;
  gap: 10px;
}

.kj_price_cta_line {
  display: block;
  width: 36px;
  height: 3px;
  background-color: #ffffff;
  flex-shrink: 0;
}

.kj_price_cta_label {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.362;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
}

.kj_price_cta_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  height: 84px;
  background-color: #FF7B00;
  border-radius: 10px;
  text-decoration: none;
}

.kj_price_cta_btn span {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.362;
  color: #ffffff;
}

/* --------------------------------------------------------
   kj_voice - お客様の声
   PC: 940px幅中央 / タイトル + 3枚白カード（アバター左 + テキスト右）
   -------------------------------------------------------- */
.kj_voice {
  padding: 60px 24px;
}

.kj_voice_inner {
  max-width: 940px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 29px;
}

.kj_voice_title {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.362;
  text-align: center;
  color: #000000;
  margin: 0;
}

.kj_voice_list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.kj_voice_card {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.kj_voice_avatar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.kj_voice_avatar img {
  width: 80px;
  height: 80px;
  display: block;
}

.kj_voice_name {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.875;
  text-align: center;
  color: #000000;
  margin: 0;
}

.kj_voice_text {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.875;
  color: #000000;
  margin: 0;
}

/* --------------------------------------------------------
   kj_faq - よくあるご質問
   PC: 1280px幅 / 背景画像 + タイトル + 2列Q&A（各448px）
   -------------------------------------------------------- */
.kj_faq {
  background: url('../images/kojin_faq_bg.png') center / cover no-repeat;
  background-color: #4E9C37; /* fallback */
  padding: 100px 24px 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.kj_faq_title {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.362;
  text-align: center;
  color: #ffffff;
  margin: 0;
  width: 100%;
}

.kj_faq_inner {
  max-width: 938px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kj_faq_col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kj_faq_row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
}

.kj_faq_badge {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: #4E9C37;
}

.kj_faq_badge_q {
  background-color: #FEE400;
}

.kj_faq_badge_a {
  background-color: #ffffff;
}

.kj_faq_q {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.362;
  color: #ffffff;
  margin: 0;
  padding-top: 8px;
}

.kj_faq_a {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.362;
  color: #ffffff;
  margin: 0;
  padding-top: 8px;
}

/* --------------------------------------------------------
   kj_inquiry - 見積依頼・お問い合わせ
   PC: 618px幅中央 / お問い合わせフォーム
   -------------------------------------------------------- */
.kj_inquiry {
  padding: 60px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.kj_inquiry_title {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.362;
  text-align: center;
  color: #000000;
  margin: 0;
  width: 100%;
}

.kj_inquiry_form {
  max-width: 618px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 43px;
}

.kj_inquiry_fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.kj_inquiry_field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.kj_inquiry_label {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: #000000;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kj_inquiry_req {
  font-size: 0.75rem;
  font-weight: 500;
  color: #ffffff;
  background-color: #4E9C37;
  padding: 2px 8px;
  border-radius: 3px;
}

.kj_inquiry_input {
  width: 100%;
  height: 48px;
  border: 2px solid #4E9C37;
  border-radius: 6px;
  background-color: #ffffff;
  font-size: 1rem;
  padding: 0 12px;
  box-sizing: border-box;
  color: #000000;
}

.kj_inquiry_textarea {
  width: 100%;
  height: 187px;
  border: 2px solid #4E9C37;
  border-radius: 6px;
  background-color: #ffffff;
  font-size: 1rem;
  padding: 12px;
  box-sizing: border-box;
  color: #000000;
  resize: vertical;
}

.kj_inquiry_btn {
  width: 100%;
  height: 75px;
  background-color: #FF7B00;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.362;
  color: #ffffff;
}

/* ============================================================
   PC (768px〜)
   ============================================================ */
@media (min-width: 768px) {

  /* kj_onayami */
  .kj_onayami {
    padding: 60px 0;
  }

  .kj_onayami_inner {
    gap: 55px;
  }

  .kj_onayami_title {
    font-size: 2.75rem; /* 44px */
  }

  /* PC: 相対配置コンテナ + アイテム絶対配置 */
  .kj_onayami_board {
    display: block;
    position: relative;
    width: 1180px;
    height: 567px;
  }

  .kj_onayami_img {
    display: block;
    position: absolute;
    left: 260px;
    top: 39px;
    width: 680px;
    height: 458px;
    overflow: hidden;
  }

  .kj_onayami_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .kj_onayami_item {
    position: absolute;
    width: 340px;
    height: 174px;
    aspect-ratio: auto;
  }

  .kj_onayami_item p {
    font-size: 1.5rem; /* 24px */
    padding: 0 40px;
  }

  /* 各アイテムの配置位置 */
  .kj_onayami_item1 { left: 60px;  top: 0;   }
  .kj_onayami_item2 { left: 0;     top: 261px; }
  .kj_onayami_item3 { left: 830px; top: 80px;  }
  .kj_onayami_item4 { left: 728px; top: 393px; }

  /* kj_hojokin */
  .kj_hojokin {
    min-height: 750px;
    padding: 100px 0 100px;
  }

  .kj_hojokin_title {
    font-size: 2.75rem; /* 44px */
  }

  .kj_hojokin_ex {
    font-size: 2.75rem; /* 44px */
  }

  .kj_hojokin_note {
    font-size: 1.875rem; /* 30px */
  }

  .kj_hojokin_arrow {
    width: 160px;
    height: 40px;
  }

  .kj_hojokin_support {
    font-size: 1.875rem; /* 30px */
  }

  .kj_hojokin_btn span {
    font-size: 2.25rem; /* 36px */
  }

  /* kj_trouble */
  .kj_trouble {
    padding: 60px 0;
  }

  .kj_trouble_title {
    font-size: 2.75rem; /* 44px */
  }

  .kj_trouble_body {
    flex-direction: row;
    align-items: flex-start;
  }

  .kj_trouble_list {
    flex: 0 0 608px;
  }

  .kj_trouble_list li {
    font-size: 1.875rem; /* 30px */
  }

  .kj_trouble_img {
    flex: 0 0 300px;
    margin-top: 69px;
  }

  .kj_trouble_img img {
    height: 220px;
    object-fit: cover;
  }

  /* kj_reason */
  .kj_reason {
    padding: 107px 0 80px;
  }

  .kj_reason_head {
    margin-bottom: 70px;
    gap: 32px;
  }

  .kj_reason_sub {
    font-size: 1.875rem; /* 30px */
  }

  .kj_reason_lead {
    font-size: 2.75rem; /* 44px */
  }

  .kj_reason_catchline {
    font-size: 2.75rem; /* 44px */
  }

  .kj_reason_items {
    gap: 38px;
  }

  .kj_reason_badge {
    flex: 0 0 80px;
    width: 80px;
    height: 80px;
    border-radius: 50px;
  }

  .kj_reason_badge span {
    font-size: 3.2rem; /* 60px */
  }

  .kj_reason_heading {
    font-size: 2.2rem; /* 40px */
  }

  .kj_reason_body {
    font-size: 1.125rem; /* 18px */
  }

  /* kj_kaitai */
  .kj_kaitai {
    padding: 60px 0;
  }

  .kj_kaitai_title {
    font-size: 2.75rem; /* 44px */
  }

  .kj_kaitai_box {
    flex-direction: row;
    align-items: center;
    gap: 90px;
    padding: 45px 38px 67px 40px;
    height: 514px;
  }

  .kj_kaitai_list {
    flex: 1;
  }

  .kj_kaitai_list li {
    font-size: 1.25rem; /* 20px */
  }

  .kj_kaitai_img {
    flex: 0 0 320px;
  }

  /* kj_case */
  .kj_case {
    padding: 60px 30px;
  }

  .kj_case_title {
    font-size: 2.75rem; /* 44px */
  }

  .kj_case_grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }

  .kj_case_card img {
    height: 200px;
  }

  .kj_case_card_title {
    font-size: 1.0625rem; /* 17px */
  }

  .kj_case_card_info li {
    font-size: 0.9375rem; /* 15px */
  }

  /* kj_price */
  .kj_price {
    padding: 97px 0 80px;
  }

  .kj_price_title {
    font-size: 2.75rem; /* 44px */
  }

  .kj_price_row {
    flex-direction: row;
    gap: 25px;
  }

  .kj_price_card {
    flex: 1;
  }

  .kj_price_card img {
    height: 317px;
    object-fit: cover;
  }

  .kj_price_card_title {
    font-size: 1.5rem; /* 24px */
  }

  .kj_price_note {
    padding: 16px 20px 20px 40px;
  }

  .kj_price_note_text {
    font-size: 1.25rem; /* 20px */
  }

  .kj_price_note_sub {
    font-size: 1rem; /* 16px */
  }

  .kj_price_cta_label {
    font-size: 2.375rem; /* 38px */
  }

  .kj_price_cta_btn span {
    font-size: 2.25rem; /* 36px */
  }

  /* kj_voice */
  .kj_voice {
    padding: 60px 0;
  }

  .kj_voice_title {
    font-size: 2.75rem; /* 44px */
  }

  .kj_voice_card {
    flex-direction: row;
    align-items: flex-start;
    gap: 46px;
    padding: 45px 34px 35px 50px;
  }

  .kj_voice_avatar {
    flex: 0 0 160px;
    width: 160px;
  }

  .kj_voice_avatar img {
    width: 160px;
    height: 160px;
  }

  .kj_voice_text {
    font-size: 1rem; /* 16px */
  }

  /* kj_faq */
  .kj_faq {
    padding: 124px 0 80px;
  }

  .kj_faq_title {
    font-size: 2.75rem; /* 44px */
  }

  .kj_faq_inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 42px;
  }

  .kj_faq_col {
    flex: 0 0 448px;
    gap: 29px;
  }

  .kj_faq_col:last-child {
    gap: 37px;
  }

  .kj_faq_badge {
    font-size: 2.25rem; /* 36px */
  }

  .kj_faq_q {
    font-size: 1.125rem; /* 18px */
    padding-top: 4px;
  }

  .kj_faq_a {
    font-size: 1rem; /* 16px */
    padding-top: 4px;
  }

  /* kj_inquiry */
  .kj_inquiry {
    padding: 60px 0;
  }

  .kj_inquiry_title {
    font-size: 2.75rem; /* 44px */
  }

  .kj_inquiry_field {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .kj_inquiry_label {
    font-size: 1.25rem; /* 20px */
    flex-shrink: 0;
  }

  .kj_inquiry_input {
    flex: 0 0 460px;
    width: 460px;
  }

  .kj_inquiry_textarea {
    flex: 0 0 460px;
    width: 460px;
  }

  .kj_inquiry_btn {
    font-size: 1.625rem; /* 26px */
  }
}