html {
  font-size: 100%;
}

/* SP 414px 基準で同倍率可変 (16/414*100 = 3.8647...) */
@media screen and (max-width: 767.98px) {
  html {
    font-size: 3.8647342995vw;
  }
}

:where(.kd) img {
  width: 100%;
}

.kd {
  font-family: "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  color: #1a1a1a;
}

.kd__inner {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  /* max-width: 1680px; */
  margin-inline: auto;
}


.kd-pc-left {
  flex: 28;  /* 左右パネルの比率 28 : 17 → 中央コンテンツが右寄せに見える */
}

@media screen and (max-width: 900px) {
.kd-pc-left  {
  display: none;
}
}

.kd-pc-left__inner {
  position: fixed;
  top: 50vh;
  /* .kd-pc-left の左右中央 = (左パネル幅 = (100vw - 560px) * 28 / 40) / 2 */
  left: calc((100vw - 560px) * 29.4 / 40 / 2);
  transform: translate(-50%, -50%);
  /* 最大幅 618px、パネル幅が 618px を下回ったらパネル幅まで縮む */
  width: min(618px, calc((100vw - 560px) * 28 / 40));
}
/* main 画像（ロゴ・テキスト・スタッフ・バッジまで一体型） */
.kd-pc-left__main {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
/* CTA（LINE / TEL）は main 画像の最下部に重ねる */
.kd-pc-left__cta {
  position: absolute;
  left: 50%;
  bottom: 7%;
  transform: translateX(-50%);
  width: 82%;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.kd-pc-left__cta-line,
.kd-pc-left__cta-tel {
  flex: 1;
  display: block;
}
.kd-pc-left__cta-line img,
.kd-pc-left__cta-tel img {
  width: 100%;
  height: auto;
  display: block;
}

.kd-content {
  flex-shrink: 0;
  width: 560px;
  max-width: 100%;
  background: #fff;
}
.kd-content__inner {
  width: 100%;
  margin-inline: auto;
  overflow: hidden;
}
.kd-content__inner > * {
  position: relative;
}

.kd-pc-right {
  flex: 12;  /* 左右パネルの比率 28 : 17 */
}
.kd-pc-right__inner {
  position: fixed;
  top: 50vh;
  /* .kd-pc-right の左右中央 = 中央コンテンツ右端 + (右パネル幅 = (100vw - 560px) * 12 / 40) / 2 */
  left: calc(((100vw - 560px) * 28 / 40) + 560px + ((100vw - 560px) * 12 / 40 / 2));
  transform: translate(-50%, -50%);
  /* 最大幅 260px、パネル幅が 260px を下回ったらパネル幅まで縮む */
  width: min(260px, calc((100vw - 560px) * 12 / 40));
  height: 90vh;
}
/* 縦書き「想いに寄り添い 買取りいたします」テキスト：上部・左寄り */
.kd-pc-right__text {
  position: absolute;
  top: 22%;
  left: 40%;
  transform: translateX(-50%);
  /* left:40% + translateX(-50%) で中心を親の40%に置くため、
     要素幅が親の80%を超えると左（kd-content側）にはみ出る。
     よって最大 137px かつ親の80%までに制限して、kd-contentと被らないようにする */
  width: min(137px, 80%);
  height: auto;
  object-fit: contain;
      margin-left: 0.8rem;
}
/* バッグ画像：画面右下に固定。画面幅が変わっても見切れず、画面端からの距離で移動 */
.kd-pc-right__bag {
  position: fixed;
  bottom: 1vh;
  right: -1.5vw;
  width: min(188px, 14vw);
  height: auto;
  object-fit: contain;
}

/* === 共通ボタン === */
.kd-btn {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}

/* === PC表示時（768px以上）：背景画像を2枚重ね ===
   ・最背面: pc-bg.webp（画面全体に cover）
   ・上層:   pc-bg-inner.webp（左右33px / 上下36px 内側に配置） */
@media screen and (min-width: 768px) {
  body {
    background-image:
      url(../img/pc-bg-inner.webp),
      url(../img/pc-bg.webp);
    background-position:
      33px 36px,
      center top;
    background-size:
      calc(100% - 66px) calc(100% - 72px),
      cover;
    background-repeat:
      no-repeat,
      no-repeat;
    background-attachment:
      fixed,
      fixed;
  }
  .kd-content {
    border: 3px solid #fff;
        margin-top: 4rem;
        border-radius: 1.8rem 1.8rem 0 0;
        overflow: hidden;
        box-shadow: 0 0 2rem rgb(0 0 0 / 20%);
    /* 中央コンテンツは flex で固定幅。左右パネルの flex 比率で位置が決まる */
  }
}

/* === 1059px以下: PC右パネル非表示 ＋ 左パネルを左側の残り幅いっぱいに広げる === */
@media screen and (max-width: 1059.98px) {
  .kd-pc-right {
    display: none;
  }
  .kd-pc-left__inner {
    /* 右パネルが消えたので、左側の残り幅 = (100vw - 560px) 全体を使う */
    left: calc((100vw - 560px) / 2);
    width: min(618px, calc(100vw - 560px));
  }
}

/* === 767px以下 (SP): 中央コンテンツのみ表示 === */
@media screen and (max-width: 767.98px) {
  .kd__inner {
    display: block;
    max-width: 100%;
  }
  .kd-pc-left,
  .kd-pc-right {
    display: none;
  }
  .kd-content {
    width: 100%;
  }
  .kd-content__inner {
    width: 100%;
  }
}

/* ========================================
   全幅可変モデル:
   - .kd-content の幅は PC=520px / SP=100%（既存設定）
   - 各セクションは width:100%、img も width:100%
   - 高さは aspect-ratio で width 比例可変
   - 絶対配置は親比率の % で記述
   ======================================== */

.kd-content__inner > section {
  width: 100%;
}
.kd-content__inner > section img {
  display: block;
  width: 100%;
  height: auto;
}


:where(.kd-content__inner) :where(h1, h2, h3, h4, p) {
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

.kd-fv__img {
  aspect-ratio: 414 / 710;
  object-fit: cover;
}

.kd-ihin__inner {
  position: relative;
}
.kd-ihin__img {
  aspect-ratio: 414 / 442;
}

/* ihin: 画像下部に LINE / TEL ボタンを重ねる */
.kd-ihin__buttons {
  position: absolute;
  top: 50.8072%;    /* 267 / 442 */
  left: 10.8696%;   /* 45 / 414 */
  width: 78.2609%;  /* 324 / 414 */
  height: 38.6878%; /* 171 / 442 */
}
.kd-ihin__btn {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
}
.kd-ihin__btn--1 {
  top: 0;
  height: 52.0468%; /* 89 / 171 */
}
.kd-ihin__btn--2 {
  top: 60.2339%;    /* 103 / 171 */
  height: 39.7661%; /* 68 / 171 */
}
.kd-ihin__btn-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kd-trust__header  { aspect-ratio: 414 / 323; }
.kd-trust__amount  { aspect-ratio: 414 / 111; }
.kd-trust__rating  { aspect-ratio: 414 / 111; }
.kd-trust__promise { aspect-ratio: 414 / 210; }

.kd-stop {
  background: #ffffff;
}
.kd-stop__list {
  display: flex;
  flex-direction: column;
}
.kd-stop__img--1  { aspect-ratio: 414 / 294; }
.kd-stop__img--2  { aspect-ratio: 414 / 226; }
.kd-stop__img--3  { aspect-ratio: 414 / 155; }
.kd-stop__img--4  { aspect-ratio: 414 / 256; }
.kd-stop__img--5  { aspect-ratio: 414 / 158; }
.kd-stop__img--6  { aspect-ratio: 414 / 372; }
.kd-stop__img--7  { aspect-ratio: 414 / 127; }
.kd-stop__img--8  { aspect-ratio: 414 / 109; }
.kd-stop__img--9  { aspect-ratio: 414 / 383; }
.kd-stop__img--10 { aspect-ratio: 414 / 135; }
.kd-stop__img--11 { aspect-ratio: 414 / 366; }
.kd-stop__img--12 { aspect-ratio: 414 / 140; }
.kd-stop__img--13 { aspect-ratio: 414 / 377; }
.kd-stop__img--14 { aspect-ratio: 414 / 386; }
.kd-stop__img--15 { aspect-ratio: 414 / 183; }
.kd-stop__img--16 { aspect-ratio: 414 / 242; }

.kd-examples__header-img { aspect-ratio: 414 / 179; }
.kd-examples__item--1 .kd-examples__item-img { aspect-ratio: 414 / 110; }
.kd-examples__item--2 .kd-examples__item-img { aspect-ratio: 414 / 393; }
.kd-examples__bottom-img { aspect-ratio: 414 / 406; }


.kd-worry__header-img            { aspect-ratio: 414 / 200; }
.kd-worry__card--1 .kd-worry__card-img { aspect-ratio: 414 / 208; }
.kd-worry__card--2 .kd-worry__card-img { aspect-ratio: 414 / 163; }
.kd-worry__card--3 .kd-worry__card-img { aspect-ratio: 414 / 170; }
.kd-worry__card--4 .kd-worry__card-img { aspect-ratio: 414 / 171; }


.kd-support__img--1 { aspect-ratio: 414 / 346; }
.kd-support__img--2 { aspect-ratio: 414 / 282; }
.kd-support__img--3 { aspect-ratio: 414 / 193; }
.kd-support__img--4 { aspect-ratio: 414 / 164; }
.kd-support__img--5 { aspect-ratio: 414 / 227; }
.kd-support__img--6 { aspect-ratio: 414 / 165; }
.kd-support__img--7 { aspect-ratio: 414 / 203; }
.kd-support__img--8 { aspect-ratio: 414 / 228; }

.kd-buyflow {
  background-color: #ffffff;
}
.kd-buyflow__heading-ttl {
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

/* step--1: step-img(414x532) 内の LINE / TEL ボタンを画像座標に重ねる */
.kd-buyflow__step--1 {
  position: relative;
}
.kd-buyflow__step-line,
.kd-buyflow__step-tel {
  position: absolute;
  display: block;
  text-decoration: none;
  left: 10.8696%;   /* 45 / 414 */
  width: 78.2609%;  /* 324 / 414 */
}
.kd-buyflow__step-line {
  top: 59.0226%;    /* 314 / 532 */
  height: 16.5414%; /* 88 / 532 */
}
.kd-buyflow__step-tel {
  top: 78.3835%;    /* 417 / 532 */
  height: 12.7820%; /* 68 / 532 */
}

.kd-buyflow__cta {
  position: relative;
}
.kd-buyflow__cta-line,
.kd-buyflow__cta-tel {
  position: absolute;
  display: block;
  text-decoration: none;
  left: 11.1111%;   /* 46 / 414 */
  width: 78.2609%;  /* 324 / 414 */
}
.kd-buyflow__cta-line {
  top: 22.9927%;    /* 63 / 274 */
  height: 32.4818%; /* 89 / 274 */
}
.kd-buyflow__cta-tel {
  top: 60.5839%;    /* 166 / 274 */
  height: 24.8175%; /* 68 / 274 */
}

.kd-buyflow__step-btn-img,
.kd-buyflow__cta-btn-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kd-buyflow__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.kd-points__header-img { aspect-ratio: 414 / 278; }
.kd-points-item--1 .kd-points-item__title-img { aspect-ratio: 414 / 124; }
.kd-points-item--1 .kd-points-item__body-img  { aspect-ratio: 414 / 357; }
.kd-points-item--2 .kd-points-item__title-img { aspect-ratio: 414 / 139; }
.kd-points-item--2 .kd-points-item__body-img  { aspect-ratio: 414 / 353; }
.kd-points-item--3 .kd-points-item__title-img { aspect-ratio: 414 / 155; }
.kd-points-item--3 .kd-points-item__body-img  { aspect-ratio: 414 / 434; }
.kd-points-item--4 .kd-points-item__title-img { aspect-ratio: 414 / 154; }
.kd-points-item--4 .kd-points-item__body-img  { aspect-ratio: 414 / 360; }
.kd-points__footer-img { aspect-ratio: 414 / 408; }

.kd-shops {
  background: #ffffff;
}
.kd-shops__ttl {
  margin: 0;
}
.kd-shops__ttl-img { aspect-ratio: 414 / 228; }

.kd-shops-card {
  position: relative;
}

.kd-shops-card--1 .kd-shops-card__banner { aspect-ratio: 414 / 271; }
.kd-shops-card--1 .kd-shops-card__info   { aspect-ratio: 414 / 185; }
.kd-shops-card--1 .kd-shops-card__btn {
  position: absolute;
  top: 77.5175%;
  left: 10.5696%;
  width: 56.7633%;
  height: 16.0088%;
}
.kd-shops-card--1 .kd-shops-card__btn-img { aspect-ratio: 235 / 73; }

.kd-shops-card--2 .kd-shops-card__banner { aspect-ratio: 414 / 284; }
.kd-shops-card--2 .kd-shops-card__info   { aspect-ratio: 414 / 210; }
.kd-shops-card--2 .kd-shops-card__btn {
  position: absolute;
  top: 79.3425%;
  left: 10.8696%;
  width: 56.7633%;
  height: 14.7773%;
}
.kd-shops-card--2 .kd-shops-card__btn-img { aspect-ratio: 235 / 73; }

.kd-shops-card--3 .kd-shops-card__banner { aspect-ratio: 414 / 293; }
.kd-shops-card--3 .kd-shops-card__info   { aspect-ratio: 414 / 203; }
.kd-shops-card--3 .kd-shops-card__btn {
  position: absolute;
  top: 75.8016%;
  left: 10.8111%;
  width: 56.7633%;
  height: 14.7177%;
}
.kd-shops-card--3 .kd-shops-card__btn-img { aspect-ratio: 235 / 73; }

.kd-voice__header-img { aspect-ratio: 414 / 187; }

.kd-voice__slider {
  position: relative;
  width: 100%;
  aspect-ratio: 414 / 573;
  overflow: hidden;
}
.kd-voice__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kd-voice__swiper {
  --swiper-pagination-bottom: 50px;
  position: relative;
  width: 100%;
  height: 100%;
  padding-bottom: 13.77%;
  box-sizing: border-box;
  overflow: visible !important;
}
.kd-voice__slide {
  width: 88.1256%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  transform: scale(0.82) !important;
  transition: transform 0.5s ease;
}
.kd-voice__slide.swiper-slide-prev {
  transform-origin: right center;
}
.kd-voice__slide.swiper-slide-next {
  transform-origin: left center;
}
.kd-voice__slide.swiper-slide-active {
  transform: scale(1) !important;
  transform-origin: center center;
}
.kd-voice__slide-img {
  display: block;
  width: 100%;
  height: auto;
}

.kd-voice__nav {
  position: absolute;
  top: 47%;
  transform: translateY(-50%);
  width: 9.29%;
  aspect-ratio: 1 / 1;
  border: none;
  border-radius: 50%;
  background:
    linear-gradient(126deg, rgba(1, 109, 225, 0.30) 27.63%, rgba(4, 44, 87, 0.30) 88.8%),
    #242C5D;
  cursor: pointer;
  padding: 0;
  z-index: 10;
}
.kd-voice__nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28%;
  height: 28%;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.kd-voice__nav--prev {
  left: 1.83%;
}
.kd-voice__nav--prev::before {
  transform: translate(-30%, -50%) rotate(-135deg);
}
.kd-voice__nav--next {
  right: 2.83%;
}
.kd-voice__nav--next::before {
  transform: translate(-70%, -50%) rotate(45deg);
}

.kd-voice__pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 10;
}
.kd-voice__pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #c9cad6;
  opacity: 1;
  border-radius: 50%;
  margin: 0;
  transition: background-color 0.2s;
}
.kd-voice__pagination .swiper-pagination-bullet-active {
  background: #2a357b;
}
.kd-comparison {
  background: #fff;
}
.kd-comparison__header-img { aspect-ratio: 414 / 184; }
.kd-comparison__table-img  { aspect-ratio: 414 / 707; }
.kd-comparison__note-img   { aspect-ratio: 414 / 151; }
.kd-faq {
  position: relative;
}

.kd-faq__inner {
  position: relative;
}

.kd-faq__header-img { aspect-ratio: 414 / 134; }

.kd-faq__list {
  position: relative;
  padding: 4.1063% 6.8048% 15.4589% 7.2879%;
  background-color: #f5f8ff;
  background-image: url(../img/faq-bg.webp);
  background-repeat: repeat-y;
  background-position: top center;
  background-size: 100% auto;
}

.kd-faq-card {
  position: relative;
  background-color: #ffffff;
  border: 1px solid rgba(42, 51, 104, 0.30);
  border-radius: 10px;
  margin-bottom: 4.1063%;  /* 17 / 414 */
}

.kd-faq-card:last-child {
  margin-bottom: 0;
}

.kd-faq-card {
  cursor: pointer;
}

.kd-faq-card__inner {
  position: relative;
  padding: 1.1875rem 1.25rem 1.1875rem 2.25rem;
}

.kd-faq-card__mark {
  position: absolute;
  top: -0.1875rem;
  left: -0.25rem;
  width: 2.0625rem;
  margin: 0;
  overflow: visible;
}
.kd-faq-card__mark img {
  display: block;
  width: 100%;
  height: auto;
}

.kd-faq-card__ttl {
  position: relative;
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.45;
  letter-spacing: 0.05em;
  color: #2a357b;
  text-align: left;
  padding-right: 0.925rem;
}

.kd-faq-card__ttl::after {
  content: "";
  position: absolute;
  top: 11%;
  right: -0.1875rem;
  width: 0.875rem;
  height: 0.875rem;
  background:
    linear-gradient(#242C5D 0 0) center / 100% 1px no-repeat,
    linear-gradient(#242C5D 0 0) center / 1px 100% no-repeat;
  transition: transform 0.3s ease;
}
.kd-faq-card--open .kd-faq-card__ttl::after {
  background: linear-gradient(#2a357b 0 0) center / 100% 1px no-repeat;
}

.kd-faq-card__txt {
  margin: 0.625rem 0 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.55;
  letter-spacing: 0.05em;
  color: #2a357b;
  text-align: left;
}

.kd-faq-card:not(.kd-faq-card--open) .kd-faq-card__txt {
  display: none;
}

.kd-faq-card--1 {
  margin-bottom: 5.0725%;
}

.kd-cta {
  position: relative;
}

.kd-cta__inner {
  position: relative;
}

.kd-cta__card {
  position: relative;
}

.kd-cta__bg { aspect-ratio: 414 / 815; }

.kd-cta__buttons {
  position: absolute;
  top: 70.5521%;
  left: 10.8696%;
  width: 78.2609%;
  height: 20.9816%;
}

.kd-cta__btn {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
}

.kd-cta__btn--1 {
  top: 0;
  height: 52.0468%;
}

.kd-cta__btn--2 {
  top: 60.2339%;
  height: 39.7661%;
}

.kd-cta__btn-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.kd-cta__footer-img { aspect-ratio: 414 / 68; }


.kd-follow {
  display: none;
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  padding: 12px 14px;
  background: rgba(26, 30, 58, 0.90);
  align-items: center;
  gap: 5px;
  z-index: 900;
  box-sizing: border-box;
}
.kd-follow__btn {
  display: block;
  text-decoration: none;
}
.kd-follow__btn--tel  { flex: 687; }
.kd-follow__btn--line { flex: 507; }
.kd-follow__btn-img {
  display: block;
  width: 100%;
  height: auto;
}

.kd-follow--hidden {
  transform: translate(-50%, 100%);
  opacity: 0;
  pointer-events: none;
}
.kd-follow {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

@media screen and (max-width: 767.98px) {
  .kd-follow {
    display: flex;
  }
  .kd-content {
  }
}

/* ========================================
   電話ポップアップ
   ======================================== */
.kd-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kd-popup[hidden] {
  display: none;
}

.kd-popup__overlay {
  position: absolute;
  inset: 0;
  background: rgba(26, 30, 58, 0.95);
  cursor: pointer;
}

.kd-popup__card {
  position: relative;
  width: 90%;
  max-width: 380px;
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px 20px;
  box-sizing: border-box;
  text-align: center;
  font-family: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
}

/* 右上の × 閉じるボタン */
.kd-popup__close {
  position: absolute;
  top: -52px;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid #fff;
  padding: 0;
  cursor: pointer;
}
.kd-popup__close::before,
.kd-popup__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 1px;
  background: #fff;
}
.kd-popup__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.kd-popup__close::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* タイトル（ロゴ） */
.kd-popup__ttl {
  margin: 0 0 24px;
}
.kd-popup__ttl-img {
  display: inline-block;
  width: 50%;
  max-width: 160px;
  height: auto;
}

/* 店舗リスト */
.kd-popup__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.kd-popup__item {
  margin-bottom: 18px;
}
.kd-popup__item:last-child {
  margin-bottom: 0;
}
.kd-popup__shop {
  margin: 0 0 6px;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  color: #2a357b;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.kd-popup__btn {
  display: block;
  text-decoration: none;
}
.kd-popup__btn-img {
  display: block;
  width: 100%;
  height: auto;
}

/* 下部の「閉じる」テキストリンク */
.kd-popup__close-text {
  display: block;
  margin: 18px auto 0;
  padding: 4px 8px;
  background: none;
  border: none;
  color: #1a1a1a;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}