@charset "utf-8";

:root { --color-satei:#35509c; }

#kaitori #pan { max-width:1080px; margin-bottom: 3em; padding:0; }
#kaitori .sec-box:first-of-type { margin-top: 0; padding-top: 0; }
.mt25 { margin-top:2.5em; }

/* top ---------------- */
.kaitori-top {
  display:grid; grid-template-columns:52% 1fr; align-items:stretch; max-width:1100px; margin-inline:auto;
  img { width:100%; }
  .lead {
    .submit { width:100%; margin-block:unset;
      input { margin-block:unset; padding-block:.5em; font-size:1.5em; color:var(--color-wht); font-weight:700; background-color:var(--color-satei); border-radius:0; }
    }
    .list { display:grid; grid-template-columns:repeat(2,1fr); justify-items:center; gap:1em; width:95%; margin:2em auto .3em;
      li { width:max-content; font-size:1.2em; color:var(--color-sub1); text-align:center; font-weight:600; position:relative;
        &::before, &::after { content:''; position:absolute; top:50%; transform:translateY(-50%); width:.4em; height:70%; border-style:solid; border-width:0 2px 0 2px; }
        &::before { left:-.5em; rotate:-25deg; }
        &::after { right:-.5em; rotate:25deg; }
      }
    }
  }
  .form-wrap { margin-inline:.7em; border:2px solid var(--color-gry1); border-radius:6px; }
  .ttl { align-items:center; gap:.7em; padding:.7em 1em; font-weight:700; background-color:var(--color-blk); border-radius:5px 5px 0 0;
    .main { font-size:1.3em; color:var(--color-wht); }
    .sub { padding-inline:.3em; color:var(--color-base); background-color:var(--color-wht); border-radius:3px; }
  }
  .top-tbl { width:100%; margin-block:1em .5em; border-collapse:separate; border-spacing:15px;
    :where(th,td) { display:block; }
    th { margin-bottom:.3em; padding-block:.3em; background-color:var(--color-gry1); position:relative;
      &::after { position:absolute; top:50%; right:1em; transform:translateY(-50%); padding:.3em .5em .4em; font-size:.75em; line-height:1; white-space:nowrap; }
      &.required::after { content:'\5FC5\9808'; color:var(--color-wht); background-color:var(--color-base); }
    }
    select { width:100%; }
    input.l { width:98%; }
  }
  .submit {
    width:95%; margin:1em auto;
    input {
      width:100%; margin-inline:unset; padding-block: .6em; color: var(--color-wht); font-weight: 600; font-size:1.3em; background: var(--color-base); border-radius: 10px; transition: all .3s;
      &:hover { color: var(--color-wht); background-color: var(--color-pnk); }
    }
  }
}

.link-list-wrap { margin-block:5em 3em; }
.bg-gry + .link-list-wrap { margin-top:6em; }
.link-list-wrap:has(+ .bg-gry) { margin-block:6em 5em; }

.link-list { display:grid; grid-template-columns:repeat(2,1fr); gap:1.5em;
  &.satei { row-gap:2em; }
  p { margin-block:unset; }
  .btn { display:block; padding:1em .7em .7em; font-size:clamp(20px,3vw,24px); color:var(--color-wht); font-weight:700; text-align:center; border-radius:10px; position:relative;
    .sub { position:absolute; top:-1em; left:50%; transform:translateX(-50%); width:65%; min-width:fit-content; padding:0 1.5em .1em; font-size:.65em; color:var(--color-text); background-color:var(--color-wht); border:2px solid var(--color-satei); border-radius:2em;
      &::before { content:''; position:absolute; bottom:-.5em; left:50%; transform:translateX(-50%); width:1em; height:.7em; background-color:var(--color-wht); clip-path:polygon(100% 0, 0 0, 50% 100%); }
    }
  }
  .form .btn { display:grid; align-items:center; height:100%; padding-top:1em; background-color:var(--color-satei); }
  .tel .btn { padding-bottom:.5em; background-color:var(--color-base);
    .copy { font-size:.9em; }
    .sub { border-color:var(--color-sub2); }
    .num { padding-left:.75em; font-size:1.5em; line-height:1; font-family:'Helvetica','Arial',sans-serif; position:relative;
      &::before { content:''; position:absolute; top:50%; left:0; transform:translateY(-50%); width:.6em; height:.8em; background-color:var(--color-wht); mask:url(../img/common/ico_tel_wht.svg) no-repeat center / contain; }
    }
  }
}

/* 買取実績（Swiper） ---------------- */
.pex-slider { position:relative;
  .swiper { padding:5px 5px 1em; }
  div[class*="swiper-button"] {
    top:calc(50% - 50px); width:20px; height:90px; margin-top:0; opacity:.95; background:var(--color-gry5); border-radius:2px;
    &::after { content:''; position:absolute; inset:0; width:.5rem; height:.5rem; margin:auto; border-top:2px solid var(--color-wht); border-right:2px solid var(--color-wht); }
  }
  .swiper-button-prev { left:-.5em; &::after { rotate:-135deg; } }
  .swiper-button-next { right:-.5em; &::after { rotate:45deg; } }
  .swiper-pagination { position:static; --swiper-pagination-color:var(--color-gry5); --swiper-pagination-bullet-inactive-color:var(--color-gry3); --swiper-pagination-bullet-inactive-opacity:1; }
}
.pex-list {
  .item { height:auto; box-shadow:var(--shadow1); border-radius:5px; }
  .pex-ttl { margin:0; padding:.5em; font-size:1.1em; color:#fff; font-weight:bold; text-align:center; line-height:1.4; background-color:var(--color-base); border-radius:10px 10px 0 0; }
  .pex-img { padding:.95em .95em 0; }
  .pex-data { padding:0 .7em .5em; }
  .pex-price { align-items:baseline;
    dt { font-weight:bold; }
    em { font-size:1.7em; font-family:'Helvetica','Arial',sans-serif; }
  }
  .pex-info { display:grid; grid-template-columns:5em 1fr; gap:.3em; margin-top:.5em; font-size:.95em;
    dt { color:var(--color-gry5); }
  }
}

/* 選ばれる理由・流れ ---------------- */
.bg-gry .label-list > li { border-color:#ccc; background-color:var(--color-wht); }
.label-list {
  --label-bg: var(--color-base); /*ラベルの背景色*/
  --ttl-color: var(--color-base); /*見出しの文字色*/
  &.flow { --label-bg: var(--color-sub1); --ttl-color: var(--color-sub1); }

  /* ---- 共通 ---- */
  display:grid; gap:1.2em; padding-left:unset; counter-reset:label-num;
  > li { position:relative; padding:3em 1em 1em; border:1px solid var(--color-sub1); border-radius:6px; counter-increment:label-num; list-style:none; }
  .label { position:absolute; top:0; left:0; width:100%; padding:.2em .5em; font-size:1em; font-weight:700; font-family:'Helvetica','Arial',sans-serif; text-align:center; color:var(--color-wht); background-color:var(--label-bg); border-radius:5px 5px 0 0;
    &::after { content:counter(label-num, decimal-leading-zero); margin-left:.2em; font-size:1.2em; }
  }
  .ttl { margin-block:unset; font-size:1.7em; color:var(--ttl-color); font-weight:800; text-align:center; line-height:1.4; }
  .txt { margin-block:unset; }

  /* 選ばれる理由 */
  &.reason { grid-template-columns:repeat(3,1fr);
    li { display:grid; grid-template-rows:subgrid; grid-row:span 2; row-gap:.5em; }
    .ttl { align-self:center; font-size:1.4em; }
  }
  /* 買取の流れ */
  &.flow { grid-template-columns:1fr; row-gap:2em;
    > li { display:grid; grid-template-columns:20% 1fr; gap:.5em 1.5em; align-items:center;
      &:not(:last-child)::before { content:''; position:absolute; bottom:-1.5em; left:50%; transform:translateX(-50%); width:1em; height:1em; background:url(../img/kaitori/arrow-down-blk.svg) no-repeat center / contain; }
    }
    .img-wrap { text-align:center; }
    img { max-width:100px; }
    .ttl { margin-bottom:.4em; padding-bottom:.3em; font-size:1.4em; text-align:start; border-bottom:1px solid var(--color-gry1); }
  }
}
.sec-btm { margin-block:4em; }

/* 比較表 ---------------- */
.hikaku { margin-block:4em 0;
  .tbl { width:100%; border-collapse:separate; border-spacing:2px; background-color:var(--color-gry2);
    :where(th,td) { padding-block:.7em .9em !important; font-size:.95em; }
    th { text-align:center !important; font-weight:bold !important; color:var(--color-wht); background-color:var(--color-gry5); }
    thead th { width:calc(85% / 3); }
    tr > th:first-child { width:15%; }
    thead th.bg-red { background-color:var(--color-base); }
    td { padding-inline:.7em !important; font-weight:bold; border-bottom: unset; background-color:var(--color-wht);
      &.bg-red2 { background-color:#fff4f5; }
    }
  }
}

/* 買取に必要なもの・FAQ ---------------- */
.faq-box { margin-top:3em; }
.drawer {
  > div:not(:last-child) { margin-bottom:1.5em; }
  :is(dt,dd) { position:relative; border-radius:5px;
    &::before { position:absolute; top:.25em; left:.65em; font-size:1.4em; line-height:1.5; text-align:center; }
  }
  dt { padding:.5em .5em .5em 2.5em; font-size:1.12em; font-weight:600; color:#fff; background:var(--color-sub1); cursor:pointer;
    span { position:absolute; top:50%; right:1.3em; translate:0 -50%; width:1em; height:1em;
      &::before, &::after { content:''; position:absolute; top:50%; left:50%; translate:-50% -50%; width:100%; height:2px; background:#fff; }
      &::after { rotate:90deg; transition:all .3s; }
    }
  }
  > div.open dt span::after, &.open dt span::after { rotate:180deg; }
  dd { padding:1.5em 2em; background:#fff9eb;
    figure { width:40%; margin-top:2em;
      &.size-w { width:80%; }
      figcaption { margin-top:.5em; }
    }
  }
  .open dt { border-radius:5px 5px 0 0; }

  &.need { width:80%; margin-inline:auto;
    dt { padding:.5em; }
    .ttl { text-align:center; }
    dd > .disc { display:grid; grid-template-columns:repeat(2,1fr); }
  }
  &.faq {
    > div { border:1px solid #ccc; border-radius:5px; background-color:var(--color-wht); }
    dt { color:var(--color-text); background-color:var(--color-wht);
      &::before { content:'Q'; color:var(--color-base); font-family:'Helvetica','Arial',sans-serif; }
      span::before, span::after { background:var(--color-base); }
    }
    dd { margin:.3em 1em 1em 2.7em; padding:.7em .7em .7em 3em; background-color:var(--color-gry0); border-radius:3px;
      &::before { content:'A'; top:.33em; left:.9em; font-weight:bold; font-family:'Helvetica','Arial',sans-serif; }
    }
  }
}

.group-box {
  max-width:1000px; padding-bottom: 0; font-weight:700; text-align:center; line-height:1.3;
  .ttl { padding:.35em .5em; font-size:clamp(1.4em,4vw,2.2em); color:var(--color-wht); background-color:var(--color-base); }
  .lead { margin-block:.6em .5em; font-size:clamp(1.3em,3.5vw,1.9em);
    em { margin-inline:.1em; font-family:var(--font-en); font-size:1.8em; font-style:italic; font-weight:800; line-height:1; color:var(--color-base); }
  }
  .list { display:grid; gap:1em; }
  li { border:2px solid var(--color-base); border-radius:6px; background-color:var(--color-wht); }
  .label { letter-spacing:.2em; font-weight:500; }
  .num { white-space:nowrap;
    em { margin-right:.1em; font-family:var(--font-en); font-style:italic; font-weight:800; line-height:1; color:var(--color-base); }
  }
  .foot { margin-top:.6em; font-size:clamp(1.3em,3.5vw,1.9em); }
}

@media (min-width: 1100px) {
  .inner-narrow { width:860px; margin-inline:auto; }
}


/* PC ---------------------------------------------------------- */
:where(body.pc) {
  .kaitori-top {
    .top-form { margin-top: 2em; }
    .lead .list { margin-top: .5em; }
  }
  .group-box {
    .list { grid-template-columns:repeat(3, 1fr); gap:2.5em; padding-inline:3%; }
    li { padding:.5em 1em .6em; }
    .hanbai { order:-1; }
    .label { display:block; padding-bottom:.3em; font-size:1.3em; border-bottom:2px solid var(--color-base); }
    .num { display:block; padding-top:.2em; font-size:1.5em; em { font-size:1.9em; } }
  }
}

/* スマホ ------------------------------------------------------ */
:where(body.sp) {
  &#kaitori #pan { margin-bottom: 2em; }
  &#kaitori .flo-nav { display:none !important; }  section { padding-bottom:2rem; }

  .kaitori-top { grid-template-columns:1fr;
    .submit input { max-width:none; padding:.7em !important; }
  }

.link-list-wrap { margin-block:3em 0; }
.bg-gry + .link-list-wrap { margin-top:3em; }
.link-list-wrap:has(+ .bg-gry) { margin-block:2em 0; }

  .link-list {
    grid-template-columns:1fr;
    &.satei { row-gap: 1em; }
    .btn { padding-top:.7em;
      .sub { top:-1.1em; width:90%; padding-bottom:0; font-size:.75em; line-height:1.5; }
    }
  }

  .pex-slider {
    .swiper-button-prev { left:-1.1em; }
    .swiper-button-next { right:-1.1em; }
  }
  .pex-list {
    .pex-ttl { display:flex; justify-content:center; align-items:center; min-height:57px; }
    .pex-img { padding:.45em .45em 0; }
    .pex-price { flex-direction:column;
      dt { font-size:.7em; }
      em { font-size:1.3em; }
      dd { align-self:flex-end; line-height:1.2; }
    }
    .pex-info { font-size:.85em; }
  }

  .label-list {
    &.reason { grid-template-columns:1fr; }
    &.flow {
      > li { grid-template-columns:1fr; }
      img { max-width:50px; }
      .ttl { text-align:center; }
    }
  }
  .sec-btm { margin-block:3em 0; }

  .hikaku { margin-block:3em 0;
    .tbl { width:640px; :is(th,td) { display:table-cell; } }
  }

  .drawer {
    dt { font-size:.95em; }
    &.need dd > .disc { grid-template-columns:1fr; }
  }

  #form { margin-top:1em; }

  .group-box {
    li { display:flex; justify-content:space-between; align-items:center; padding:.4em 1em; }
    .label { font-size:1.05em; }
    .num { font-size:1.3em; em { font-size:2em; } }
  }
}