/* =========================================================
   あおき鑑定買取 — page-index.css（トップ固有・接頭辞 .p-index-）
   部品とトークンは base.css のものだけを使う（色・影・角丸・書体を足さない）
   ========================================================= */

/* ---------- 1. ヒーロー ---------- */
/* 写真の右下に明るい被写体（金の鎖・真珠）が来るため、「1 | 3」と矢印の後ろだけを柔らかく暗くする
   （ui 自身の疑似要素なので、ui の位置が幅で変わっても必ず後ろに付く） */
.p-index-hero .c-hero__ui::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -36px; bottom: -36px; left: -56px; right: -56px;
  background: radial-gradient(closest-side, rgba(0,0,0,.58) 0%, rgba(0,0,0,.46) 62%, rgba(0,0,0,0) 100%);
}
@media (max-width: 767px) {
  /* SP は ui が写真の下端から16pxの位置＝影を写真の外（白い本文の面）へはみ出させない */
  .p-index-hero .c-hero__ui::before { top: -24px; bottom: -16px; left: -32px; right: -24px; }
  /* 3枚目の長い見出しを2行に収める */
  .p-index-hero-long { letter-spacing: 0; }
}

/* ---------- 3. 最近の買取：査定の理由（価格とセットで出す） ---------- */
.p-index-why {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.7; color: var(--ink-2);
}
.p-index-recent__note { margin-top: 24px; }

/* ---------- 4. 取扱品目 ---------- */
/* 大判の縦カード2枚（4pxの間隔）。SPは画面の端まで */
.p-index-feat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin: 0 -16px; }
@media (min-width: 768px) { .p-index-feat { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; } }
/* 下部の白文字は写真の明るさに関わらず読めるよう、文字の下だけ暗くする
   （写真の下部が白い漆喰でも 4.5:1 以上＝文字が載る下30%で黒 .5〜.66） */
.p-index-feat .c-feature::before {
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 42%, rgba(0,0,0,.5) 70%, rgba(0,0,0,.66) 100%);
}
.p-index-feat .c-feature__bottom .c-link { color: #fff; }
@media (min-width: 1024px) {
  .p-index-feat .c-feature__top, .p-index-feat .c-feature__bottom { padding: 40px; }
}

/* 残り4品目＝1pxの罫で区切った行（PCは2列×2行） */
.p-index-cats { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
.p-index-cats > li { border-top: 1px solid var(--line-2); }
.p-index-cats > li:last-child { border-bottom: 1px solid var(--line-2); }
@media (min-width: 768px) { .p-index-cats { margin-top: 56px; } }
/* 2列は 1024 から（768〜1023 の2列は品目名と主な品が折れて窮屈になる） */
@media (min-width: 1024px) {
  .p-index-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; margin-top: 64px; }
  .p-index-cats > li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-2); }
}
@media (min-width: 1200px) { .p-index-cats { column-gap: 72px; } }

.p-index-cat {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: 16px; align-items: center;
  padding: 14px 0;
}
.p-index-cat__img {
  width: 72px; height: auto; aspect-ratio: 1 / 1; object-fit: contain;
  transition: transform .6s var(--ease);
}
.p-index-cat:hover .p-index-cat__img { transform: scale(1.04); }
.p-index-cat__body { display: block; min-width: 0; }
.p-index-cat__desc { display: block; margin-top: 4px; font-size: 13px; line-height: 1.7; color: var(--ink-2); }
.p-index-cat__more { white-space: nowrap; align-self: center; }
@media (min-width: 1024px) {
  .p-index-cat { grid-template-columns: 112px minmax(0, 1fr) auto; column-gap: 28px; padding: 20px 0; }
  .p-index-cat__img { width: 112px; }
}

/* ---------- 5. 査定書について（左右分割＋査定書の見本） ---------- */
.p-index-ledger { margin-top: 32px; max-width: 480px; }
.p-index-ledger .c-ledger__row { padding: 10px 0; }
.p-index-ledger .c-ledger__total { padding-top: 14px; }
.p-index-ledger .c-ledger__total-amt { font-size: 32px; }
.p-index-promise .c-split__text > .c-link { margin-top: 28px; }
/* 768〜1199 は文の列が細く縦に伸び、写真が極端な縦長に切られるため、文→写真の縦積みにする */
@media (min-width: 768px) and (max-width: 1199px) {
  .p-index-promise { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .p-index-promise .c-split__text { max-width: none; justify-self: stretch; padding: 80px 32px 64px; }
  .p-index-promise .c-split__text .t-body { max-width: 36em; }
  .p-index-promise .c-split__media img { min-height: 0; height: auto; aspect-ratio: 3 / 2; }
}
/* 1024〜1199：縦積みの文の段を「文｜査定書の見本」の2列にして右の空きを埋める */
@media (min-width: 1024px) and (max-width: 1199px) {
  .p-index-promise .c-split__text {
    display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-rows: auto auto 1fr;
    column-gap: 56px; align-items: start;
  }
  .p-index-promise .c-split__text > .t-h2 { grid-column: 1; grid-row: 1; }
  .p-index-promise .c-split__text > .t-body { grid-column: 1; grid-row: 2; }
  .p-index-promise .c-split__text > .c-link { grid-column: 1; grid-row: 3; justify-self: start; }
  .p-index-promise .p-index-ledger { grid-column: 2; grid-row: 1 / span 3; margin-top: 8px; max-width: none; }
}
@media (min-width: 1200px) {
  .p-index-promise .c-split__text { padding-top: 88px; padding-bottom: 88px; }
}

/* ---------- 6. 買取の流れ（左＝見出しとステッパー／右＝段ごとに替わる写真） ---------- */
.p-index-flow__h { margin-bottom: 0; }
.p-index-flow__pics { display: grid; }
.p-index-flow__pic {
  grid-area: 1 / 1; align-self: start;
  width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
  opacity: 0; transition: opacity .6s var(--ease);
}
.p-index-flow__pic.is-active { opacity: 1; }
html:not(.js) .p-index-flow__pic:first-child { opacity: 1; }
.p-index-flow__steps > .c-link { margin-top: 4px; }
@media (min-width: 768px) {
  .p-index-flow { grid-template-rows: auto minmax(0, 1fr); }
  .p-index-flow__h { grid-column: 1 / 12; grid-row: 1; margin-bottom: 48px; }
  .p-index-flow__steps { grid-column: 1 / 12; grid-row: 2; }
  .p-index-flow__pics { grid-column: 13 / 24; grid-row: 1 / span 2; }
  .p-index-flow__pic { aspect-ratio: 5 / 4; }
}
@media (prefers-reduced-motion: reduce) { .p-index-flow__pic { transition: none; } }

/* ---------- 7. 概算の入口（左＝写真／右＝セージの面） ---------- */
.p-index-est .t-body { max-width: 30em; }
.p-index-rates { margin-top: 40px; max-width: 360px; }
.p-index-rates__h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 10px; border-bottom: 1px solid var(--ink);
  font-size: 13px; font-weight: 500; line-height: 1.5;
}
.p-index-rates__h span { font-size: 12px; font-weight: 400; }
.p-index-rates__table th, .p-index-rates__table td {
  padding: 10px 0; border-bottom: 1px solid var(--teal); text-align: left; font-weight: 400;
}
.p-index-rates__table th { font-family: "Inter", sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .02em; }
.p-index-rates__table td { text-align: right; font-size: 13px; }
.p-index-rates__table td .u-num { font-size: 16px; margin-right: 2px; }
.p-index-rates__foot { margin-top: 12px; font-size: 12px; line-height: 1.7; }

/* ---------- 8. お客様の声（1 | 3・左右の矢印・フェード・自動送りなし） ---------- */
.p-index-voice { position: relative; }
/* 引用は文節の切れ目でだけ折り返す（語の途中で行が割れないように） */
.p-index-ph { display: inline-block; }
.p-index-voice__item + .p-index-voice__item { margin-top: 48px; }
.p-index-voice__ui { display: none; }
.js .p-index-voice__stage { display: grid; }
.js .p-index-voice__item {
  grid-area: 1 / 1; margin-top: 0; align-self: center;
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease), visibility 0s linear .6s;
}
.js .p-index-voice__item.is-active { opacity: 1; visibility: visible; transition: opacity .6s var(--ease), visibility 0s; }
.js .p-index-voice__ui { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 40px; }
.p-index-voice__count { font-size: 13px; letter-spacing: .06em; min-width: 3.2em; text-align: center; }
.p-index-voice__count b { font-weight: 500; }
.p-index-voice__btn {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--line);
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .3s var(--ease);
}
.p-index-voice__btn:hover { border-color: var(--ink); }
.p-index-voice__btn svg { width: 14px; height: 14px; }
@media (min-width: 768px) {
  /* PCは矢印を左右の端へ（アンカーと同じ置き方） */
  .js .p-index-voice__btn { position: absolute; top: 50%; margin-top: -58px; }
  .js .p-index-voice__btn--prev { left: 0; }
  .js .p-index-voice__btn--next { right: 0; }
  .js .p-index-voice__ui { margin-top: 32px; }
  .p-index-voice .c-quote { padding: 0 64px; max-width: 908px; }
}
@media (prefers-reduced-motion: reduce) { .js .p-index-voice__item { transition: none; } }

/* ---------- 9. 店舗（罫で区切った3行） ---------- */
.p-index-stores > li { border-top: 1px solid var(--line-2); }
.p-index-stores > li:last-child { border-bottom: 1px solid var(--line-2); }
.p-index-store {
  display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: 16px; row-gap: 16px;
  padding: 24px 0; align-items: center;
}
.p-index-store__img { grid-column: 1; grid-row: 1; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.p-index-store__name {
  grid-column: 2; grid-row: 1;
  font-family: var(--f-serif); font-weight: 400; font-size: 22px; line-height: 1.4; letter-spacing: .04em;
  font-feature-settings: "palt" 1;
}
.p-index-store__info { grid-column: 1 / -1; grid-row: 2; font-size: 13px; line-height: 1.8; }
.p-index-store__info > div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); column-gap: 12px; }
.p-index-store__info > div + div { margin-top: 2px; }
.p-index-store__info dt { color: var(--ink-2); }
.p-index-store__more { grid-column: 1 / -1; grid-row: 3; justify-self: start; }
@media (min-width: 768px) {
  .p-index-store { grid-template-columns: repeat(23, minmax(0, 1fr)); column-gap: 0; row-gap: 12px; padding: 32px 0; align-items: start; }
  .p-index-store__img { grid-column: 1 / 8; grid-row: 1 / span 3; }
  .p-index-store__name { grid-column: 9 / 24; grid-row: 1; font-size: 26px; }
  .p-index-store__info { grid-column: 9 / 24; grid-row: 2; }
  .p-index-store__more { grid-column: 9 / 24; grid-row: 3; }
}
@media (min-width: 1024px) {
  .p-index-store { row-gap: 0; }
  .p-index-store__img { grid-column: 1 / 6; grid-row: 1; }
  .p-index-store__name { grid-column: 7 / 11; grid-row: 1; font-size: 28px; margin-top: -4px; }
  .p-index-store__info { grid-column: 11 / 20; grid-row: 1; }
  .p-index-store__more { grid-column: 20 / 24; grid-row: 1; justify-self: end; }
}
.p-index-stores__foot { margin-top: 24px; font-size: 13px; line-height: 1.8; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 20px; }
.p-index-stores__foot .c-link { color: var(--ink); }

/* ---------- 10. よくあるご質問（帯の上では罫を一段濃く） ---------- */
.p-index-faq .c-acc { border-color: var(--line-2); }
.p-index-faq .c-acc__a-in { color: var(--ink-2); }
.p-index-faq__more { margin-top: 28px; }