@charset "UTF-8";

/* 基本のフォントサイズ設定 */
html {
  font-size: 16px; /* 基本のフォントサイズを16pxに設定 */
}

/* デフォルトのフォントサイズ */
body {
  font-size: 1rem; /* 16px */
}

/* 見出しのフォントサイズ */
h1 {
  font-size: 2.5rem; /* 40px */
}

h2 {
  font-size: 2rem; /* 32px */
}

h3 {
  font-size: 1.75rem; /* 28px */
}

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

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

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

/* 段落のフォントサイズ */
p {
  font-size: 1rem; /* 16px */
}

/* スマートフォン向けのフォントサイズ調整 */
@media (max-width: 768px) {
  h1 {
    font-size: 2rem; /* 32px */
  }

  h2 {
    font-size: 1.75rem; /* 28px */
  }

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

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

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

  h6 {
    font-size: 0.875rem; /* 14px */
  }

  p {
    font-size: 0.875rem; /* 14px */
  }
}

/* タブレット向けのフォントサイズ調整 */
@media (min-width: 769px) and (max-width: 1024px) {
  h1 {
    font-size: 2.25rem; /* 36px */
  }

  h2 {
    font-size: 2rem; /* 32px */
  }

  h3 {
    font-size: 1.75rem; /* 28px */
  }

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

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

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

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

/* 全体のスタイル */
body {
  font-family: "Yu Gothic", "YuGothic", sans-serif;
  line-height: 1.6;
  font-weight: bold;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  color: #45322b;
  overflow-x: hidden; /* 横スクロールを防ぐ */
}
/* スマートフォンだけ表示するスタイル */
.sp-only {
  display: none; /* デフォルトでは非表示にする */
}

@media screen and (max-width: 768px) {
  .sp-only {
    display: block; /* スマートフォンでは表示する */
  }

  .pc-only {
    display: none; /* スマートフォンでは非表示にする */
  }
}
.main-container {
  width: 40%; /* 必要に応じて調整 */
  margin: 0 auto;
  background-color: #f9fff0;
}

.header-content {
  text-align: center;
}

.header-image {
  width: 100%;
  height: auto;
}

.free-assessment {
  text-align: center;
  margin: 20px 0;
}

.free-assessment-image {
  width: 100%;
  max-width: 600px; /* 必要に応じて調整 */
  height: auto;
}

/* お問合わせ */
.consultation-section {
  width: 100%;
  background-color: #1e6332; /* 背景色を設定 */
  padding: 20px 0; /* 上下の余白を追加 */
  box-sizing: border-box; /* パディングを含めて幅を計算 */
  margin: 0; /* 親要素との余白をリセット */
}

.consultation-container {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.consultation-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.consultation-image {
  width: 20%;
  height: auto;
  margin-right: 20px;
}

.consultation-header-text {
  position: relative;
  background: #fff;
  border: 2px solid #28a745;
  border-radius: 10px;
  padding: 10px;
  max-width: 300px;
  text-align: left;
  line-height: 1;
}

.consultation-header-text::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px; /* 吹き出しの位置を調整 */
  transform: translateY(-50%);
  border-width: 15px; /* 三角形のサイズを変更 */
  border-style: solid;
  border-color: transparent #28a745 transparent transparent;
}

.consultation-header-text h2 {
  font-size: 1.5em;
  margin: 0;
  color: #28a745;
}

.consultation-header-text p {
  font-size: 1em;
  margin: 5px 0 0;
}

.consultation-content01 {
  text-align: -webkit-center;
}
.consultation-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 85%;
}

.consultation-box {
  display: flex;
  align-items: center;
  padding: 10px;
  border-radius: 5px;
  color: #fff;
  cursor: pointer; /* カーソルをポインターに変更 */
  border: 1px solid #ccc; /* 四方を囲う線を追加 */
}

.consultation-box a {
  color: inherit; /* リンクの色を継承 */
  text-decoration: none; /* 下線を削除 */
}

.consultation-box a:hover {
  text-decoration: none; /* ホバー時に下線を削除 */
}

/* デフォルトではTELリンクを無効にする */
.consultation-box-orange a {
  pointer-events: none;
}

.consultation-box-orange {
  background-color: #ffa500;
}

.consultation-box-green {
  background-color: #28a745;
}

.consultation-box-red {
  background-color: #dc3545;
}

.consultation-box-text {
  line-height: 1.1;
  text-align: start;
}

.consultation-box-icon {
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 10px;
}

a.consultation-box.consultation-box-green {
  text-decoration: none;
}

.icon-tel {
  background-image: url("./img/icon/icn_footer_tel.png");
}

.icon-line {
  background-image: url("./img/icon/icn_footer_line.png");
}

.icon-contact {
  background-image: url("./img/icon/icon_contact_wh.png");
}

.consultation-box-orange:hover .icon-tel {
  background-image: url("./img/icon/icon_tel.png"); /* ホバー時の画像 */
}

.consultation-box-green:hover .icon-line {
  background-image: url("./img/icon/icn_footer_line_hover.png"); /* ホバー時の画像 */
}

.consultation-box-red:hover .icon-contact {
  background-image: url("./img/icon/icon_contact_wh_hover.png"); /* ホバー時の画像 */
}

.consultation-box-text h3 {
  font-size: 1.5em;
  margin: 0;
}

.consultation-box-text p {
  font-size: 1.1em;
  margin: 5px 0 0;
}

.consultation-box-arrow {
  margin-left: auto;
  font-size: 1.5em;
}

.consultation-box-text a {
  color: inherit; /* リンクの色を継承 */
  text-decoration: none; /* 下線を削除 */
}

.consultation-box-text a:hover {
  text-decoration: none; /* ホバー時に下線を削除 */
}

p.tel_text {
  font-size: 1.8em;
  line-height: 1;
}

.tel_text {
  line-height: 1.5; /* 行の高さを1.5に設定 */
}

.highlight {
  color: yellow; /* 文字色を黄色に設定 */
  font-size: 1.1em;
}

.consultation-box:hover .highlight {
  color: #ff642c; /* ホバー時の文字色を設定 */
}

/* ホバー時の色反転と境界線の追加 */
.consultation-box:hover {
  background-color: #f0f0f0; /* 背景色を薄いグレーに */
  color: #000; /* テキスト色を黒に */
  border: 2px solid #ccc; /* 境界線の色を変更 */
}

.consultation-box-orange:hover {
  background-color: #f0f0f0; /* 背景色を薄いグレーに */
  color: #ffa500; /* テキスト色をオレンジに */
  border: 2px solid #ffa500; /* 境界線の色をオレンジに */
}

.consultation-box-green:hover {
  background-color: #f0f0f0; /* 背景色を薄いグレーに */
  color: #28a745; /* テキスト色を緑に */
  border: 2px solid #28a745; /* 境界線の色を緑に */
}

.consultation-box-red:hover {
  background-color: #f0f0f0; /* 背景色を薄いグレーに */
  color: #dc3545; /* テキスト色を赤に */
  border: 2px solid #dc3545; /* 境界線の色を赤に */
}

.consultation-box a:hover {
  color: inherit; /* リンクの色を継承 */
  text-decoration: none; /* 下線を削除 */
}

.consultation-box-icon {
  width: 40px;
  height: 40px;
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 10px;
}

.icon-tel {
  background-image: url("../img/icon/icn_footer_tel.png");
}

.icon-line {
  background-image: url("../img/icon/icn_footer_line.png");
}

.icon-contact {
  background-image: url("../img/icon/icon_contact_wh.png");
}

.consultation-box-orange:hover .icon-tel {
  background-image: url("../img/icon/icon_tel.png"); /* ホバー時の画像 */
}

.consultation-box-green:hover .icon-line {
  background-image: url("../img/icon/icon_line.png"); /* ホバー時の画像 */
}

.consultation-box-red:hover .icon-contact {
  background-image: url("../img/icon/icon_contact.png"); /* ホバー時の画像 */
}
/* お問合わせend */

/* 買取実績 */
.results-container {
  display: flex;
}

.results-section {
  width: 100%;
  text-align: -webkit-center;
}

.results-content {
  width: 100%;
}

.results-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 85%;
  margin: 0 auto;
  background: #fff3d1;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
}

.results-image {
  flex: 1;
  text-align: center;
  width: 50%;
}

.results-image img {
  width: 100%;
}

.results-content {
  flex: 1;
  padding-left: 20px;
  text-align: left;
}

.results-text dl {
  display: flex;
  flex-wrap: wrap;
}

.results-text dt,
.results-text dd {
  width: 50%;
  margin: 0;
}

.results-header h2 {
  font-size: clamp(35px, 5vw, 45px);
}

dt.price-label {
  font-weight: bold;
  color: red;
}

.price-value {
  font-weight: bold;
  color: red;
  display: inline-block;
  background-image: linear-gradient(to bottom, #f1e321 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 100% 20px;
  background-position: 0 100%;
  padding-bottom: 4px;
}

span {
  font-size: 20px;
}

/* 買取実績 */

/* 代表挨拶 */

section.profile-section {
  text-align: -webkit-center;
}

.relative.flex-list {
  display: flex;
  gap: 20px;
}
.txt-block,
.photo img {
  width: 100%;
}

ul.confident-list {
  padding: 0;
  width: 85%;
  text-align: left;
}

.inner h2 {
  padding: 1rem 0;
  margin: 1.9rem 0 1.9rem;
  text-align: center;
  color: #fff;
  background: #ff9e00;
  border-bottom: #e18b00 solid 0.5rem;
  font-size: 2.3rem;
}

.flex-list .txt-block .name {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.4;
  padding: 0 0 0.6rem;
  margin: 0 0 0.5rem;
  border-bottom: #ff9e00 solid 0.1rem;
}

ul.confident-list {
  padding: 0;
}

li.confident-item {
  list-style: none;
}

p.fs-20 {
  margin: 0;
}
/* 代表挨拶 */

/* カンタン申し込み */
section.step-section {
  text-align: -webkit-center;
}
.step-section img {
  width: 100%;
  height: auto;
  margin-top: 20px;
}

img.step-logo {
  width: 85%;
  margin-top: 18px;
  margin-bottom: -15px;
  position: relative;
}

.assessment-box {
  width: 85%;
  border: 2px solid #000000; /* 四方に線を追加 */
  padding: 10px; /* 内側の余白を追加 */
  border-radius: 8px; /* 角を丸くする場合 */
}

.assessment-box p {
  text-align: left;
}

.assessment-box h3 {
  color: crimson;
  margin: 0;
  font-size: clamp(18px, 3vw, 25px);
}

.assessment-box p {
  text-align: left;
  margin: 0;
}

p.assessment_text {
  text-align: left;
}

/* FAQ */

section.faq-section h2 {
  font-size: clamp(25px, 5vw, 45px);
  text-align: center;
  margin-bottom: 20px;
}
.faq-section {
  width: 85%;
  margin: 0 auto;
  padding: 20px;
  border-radius: 5px;
}

.faq-item {
  margin-bottom: 10px;
  border-bottom: 3px dashed #ffbe69;
  padding-bottom: 10px;
}

.faq-question {
  padding: 0 0 5px 0;
  cursor: pointer;
  border-radius: 5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-answer {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-in-out, padding 0.3s ease-in-out;
  padding: 0 10px;
  background-color: #ffedd3;
}

.faq-answer.open {
  height: auto;
  padding: 10px;
}

.toggle-icon {
  font-size: 24px;
  font-weight: bold;
  color: #fff; /* アイコンの色を白に */
  background-color: #ffbe69; /* 背景色をオレンジに */
  border-radius: 50%; /* 背景を丸くする */
  width: 30px; /* アイコンの幅 */
  height: 30px; /* アイコンの高さ */
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-question.active .toggle-icon {
  transform: rotate(180deg); /* 矢印を上下逆にする */
}

.faq-question.active .toggle-icon {
  content: "-";
}

.faq-question h3 {
  margin: 0;
  font-size: 20px;
}
/* FAQ */

/* from */
.form {
  width: 100%;
  margin: -140px auto 0;
  text-align: center;
  background: url("../img/form_bg_sp.png") top center no-repeat;
  background-size: cover;
  padding: 160px 0 20px 0;
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 0);
  position: relative;
  z-index: 300;
}

.form h2 {
  font-size: clamp(25px, 5vw, 45px);
  text-align: center;
  margin-bottom: 20px;
}

.form h2::before {
  bottom: 0;
  height: 3px;
  width: 15%;
}

.form p {
  font-size: 18px;
  margin: 20px auto 20px;
  width: 95%;
}

.form span {
  font-size: 18px;
  font-weight: 400;
  text-align: left;
  margin: 0 auto 0 0;
  line-height: 1.4;
}

.form_box {
  margin: 0 auto;
  width: 85%;
  background-color: #ffffff;
  padding: 0 0 20px 0;
}

.form_box_s {
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  margin: 0 auto;
  line-height: 1.4;
  width: 95%;
}

.form_box_p {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  margin: 20px auto 0;
  line-height: 1.4;
  font-size: 20px;
}

.form_box_p a {
  color: #0000d7;
}

.form_box dl {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
  width: 85%;
  border-bottom: 2px solid #dddddd;
  font-size: 16px;
  font-weight: 500;
  padding: 20px 0;
}

.form_box .dl_none {
  border-bottom: 0px solid #dddddd;
}

.form_box .dl_none dt {
  width: 100%;
}
.form_box .dl_none dd {
  width: 100%;
}

.form_box .dl_none dd .textbox-1 {
  width: 94%;
  margin: 10px auto 0;
}

.form_box dt {
  width: 46%;
  text-align: left;
  padding: 3px 0 0 0;
  display: flex;
  justify-content: flex-end;
  /* line-height: 1.4; */
  flex-direction: row-reverse;
  gap: 10px;
}

.form_box dt p {
  background-color: #d70000;
  color: #ffffff;
  padding: 3px 5px;
  font-size: 12px;
  border-radius: 5px;
  text-align: right;
  margin: 0 0 0 0;
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.form_box dd {
  width: 70%;
  text-align: left;
}

.selectbox-1 select {
  font-size: 14px;
}

.selectbox-1 select {
  border: 1px solid #dddddd;
}

.selectbox-1::before {
  display: inline-block;
  right: 0;
  width: 6%;
  height: 32px;
  background-color: #000000;
}
.selectbox-1::after {
  position: absolute;
  top: 50%;
  right: 3%;
  transform: translate(50%, -50%) rotate(45deg);
  width: 3px;
  height: 3px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
}
.textbox-1 {
  width: 90%;
  padding: 5px 10px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  font-size: 16px;
  line-height: 1.5;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
}
.checkbox-2 label {
  font-size: 16px;
}

.button-2 {
  width: 100%;
  margin: 20px auto 0;
  padding: 10px 0;
  border-radius: 5px;
  font-size: 20px;
}

/* from */

/* カンタン申し込み */
/* カテゴリ別のクラス */
.footer-item-tel {
  /* 電話アイテムのスタイル */
}

.footer-item-line {
  /* LINEアイテムのスタイル */
}

.footer-item-instagram {
  /* Instagramアイテムのスタイル */
}

.footer-item-assessment {
  /* 無料査定アイテムのスタイル */
}
/* フッター追従end */

/* スマートフォンではTELリンクを有効にする */
@media screen and (max-width: 768px) {
  .consultation-box-orange a {
    pointer-events: auto;
  }
}

/* ページのトップに戻るボタンのスタイル */
.back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;
  height: 47px;
  background-color: #ffbe69; /* ボタンの背景色 */
  color: #fff; /* ボタンのテキスト色 */
  text-align: center;
  line-height: 40px;
  border-radius: 50%; /* ボタンを丸くする */
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  display: none; /* 初期状態では非表示 */
  z-index: 1000;
}

.back-to-top:hover {
  background-color: #ff9e00; /* ホバー時の背景色 */
}

/* 追従フッターの各アイコンの背景を変更するためのスタイル */

.footer-item {
  background-color: #f1f1f1; /* デフォルトの背景色 */
  padding: 10px;
  display: inline-block;
}

.sticky-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px; /* 親要素の高さを60pxに変更 */
}

.footer {
  margin-bottom: 70px;
}

/* フッター追従 */
.sticky-footer {
  width: 40%;
  position: fixed;
  bottom: 0;
  background-color: #fff;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 0;
  z-index: 1000;
}

.footer-item {
  text-align: center;
}

.footer-icon {
  width: 40px;
  height: 40px;
}

.footer-item a {
  text-decoration: none;
  color: #000;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-item a {
  text-decoration: none;
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.concerns-container img,
.reason-container img,
.slider img {
  width: 100%;
  height: auto;
}

.reason-container.voice {
  margin-top: 20px;
}
.footer-item {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 10px;
}

.footer-item-tel,
.footer-item-line,
.footer-item-instagram {
  flex: 1; /* 3分割で50% */
}

.footer-item-assessment {
  flex: 4; /* 無料査定で50% */
}

.footer-item-tel {
  background-color: #ffa500; /* 電話アイコンの背景色 */
}

.footer-item-line {
  background-color: #28a745; /* LINEアイコンの背景色 */
}

.footer-item-instagram {
  background: linear-gradient(
    315deg,
    #ffd600,
    #ff7a00,
    #ff0069,
    #d300c5,
    #7638fa
  );
}

.footer-item-assessment {
  background-color: #dc3545; /* 無料査定アイコンの背景色 */
}

/* タブレット向けのスタイル */
@media screen and (max-width: 1024px) {
  .main-container {
    width: 100%;
  }
}
/* スマホ向けのスタイル */
@media screen and (max-width: 768px) {
  .main-container {
    width: 100%;
  }
}