/*!
 * applesama 機種ページの記事(2026-09-25。運営者の決定: 機種ページを記事型に)。
 *
 * マークアップは inc/model-article.php(文章は inc/model-articles/{slug}.php)。
 *
 * ## 記事だけの色(2026-09-25 運営者「applesama には色がなく単調なのが絶望的。画像が無いのもしんどい」)
 *
 * サイト全体のソフトカード(灰色の濃淡)の例外として、**記事の中だけ**で使う色を持つ。参考はおいくらの記事
 * (ベージュの帯の見出し・黄色の蛍光ペン・枠つきの「ポイント」の箱・チェックの一覧)。
 * サイトの色の意味(値上がり = --up 赤 / 値下がり = --down 緑 / 売るボタン = --cta 橙)と取り違えないよう、
 * 飾りは **青緑(--art-accent)・ベージュ・黄色のマーカー・琥珀色のチェック** に限る。価格の上下の色には使わない。
 * 色の値はここ(.mart の変数)だけに置き、部品は変数を経由する。
 */

.mart {
  --art-accent: #0e7c86;        /* 青緑: 見出しの線・箱の枠・番号・棒 */
  --art-accent-2: #13a3a3;      /* 青緑(明るい): 棒の終わり */
  --art-accent-soft: #e6f4f5;   /* 青緑の淡い地 */
  --art-beige: #faf6ef;         /* ベージュの地(チェックリスト・まとめ) */
  --art-beige-2: #f2ebdf;       /* ベージュ(見出しの帯) */
  --art-marker: #ffe766;        /* 蛍光ペン */
  --art-check: #eea000;         /* チェックの印 */
  --art-gold: #d9a21b;          /* 1 位のメダル */
  --art-silver: #9aa3ad;        /* 2 位 */
  --art-bronze: #c07a45;        /* 3 位 */
  --art-note: #fff6dd;          /* 注意の箱 */
  --art-note-line: #f0c040;
  --art-note-ink: #8a5a00;      /* 注意の見出しの文字 */
  --art-on: var(--card);        /* 色の地に載せる白い文字 */

  /*
   * 読みやすさ(2026-09-25 運営者の決定「C」): 記事の部分だけ地を白にし、補助の灰色を濃くする。
   * 灰色の地(--paper #f2f1ed)に #6b7280 の小さい文字は 4.28:1 で基準(4.5:1)を下回っていた。白に #4b5563 で 7.56:1。
   * 白は左右いっぱいに広げる。2026-09-26 に box-shadow の広がり + clip-path から border-image の外側(outset)に描き直した:
   * 運営者「地の色 #F4F3EF と白の境目が突然白に変わるので違和感。グラデーションで徐々に変わるように」。
   * 影では色を変えられないので、border-image の縦のグラデーション(地 → 白 … 白 → 地)を、上下は記事の外の余白まで・左右は画面いっぱいに広げる。
   * outset は見た目だけのはみ出しなので、横スクロールも中身の位置の変化も生まれない。border-image が効かないブラウザでは記事の幅だけ白(background)
   */
  --muted: #4b5563;
  --faint: #6b7280;
  --mart-fade-out: 40px;       /* 上: 記事の外(上の余白 = margin-top)へ広げる長さ。ここから地 → 白 */
  --mart-fade-in: 60px;        /* 上: 記事の中でぼかしを続ける長さ(冒頭の題の枠の後ろまで。枠は自分の地を持つので読みは変わらない) */
  --mart-fade-out-b: 48px;     /* 下: 記事の外(下の「冒頭の 1 文」など)へ広げる長さ */
  --mart-fade-in-b: 32px;      /* 下: 記事の中(下の余白 = padding-bottom)でぼかす長さ */
  --mart-fade-end: var(--paper);   /* 下の端の色(下が白いフッターにつながるページは白) */

  max-width: 880px;
  padding-block: 24px 32px;
  background: var(--card);
  border-image: linear-gradient(
      to bottom,
      var(--paper) 0,
      var(--card) calc(var(--mart-fade-out) + var(--mart-fade-in)),
      var(--card) calc(100% - var(--mart-fade-out-b) - var(--mart-fade-in-b)),
      var(--mart-fade-end) 100%
    ) fill 0 / 0 / var(--mart-fade-out) 100vmax var(--mart-fade-out-b);
}

/* 記事の白い帯の上に地の色の余白を取る(2026-09-25 運営者「買取条件のカードの下と記事が被って見栄えが悪い」)。
   白い帯は横いっぱいに広がるので、すぐ上のカードの角丸と影が帯にくっついて見えていた。2026-09-26 からこの余白の中で地 → 白にぼかす */
.cap-main .mart { margin-top: 40px; }
/* 解説記事は記事そのものがページ(上はパンくず・下は白いフッター)。上は記事の中の余白でだけぼかし、下はぼかさない */
.guide-main .mart {
  margin-top: 0;
  --mart-fade-out: 0px;
  --mart-fade-in: 24px;
  --mart-fade-out-b: 0px;
  --mart-fade-in-b: 0px;
  --mart-fade-end: var(--card);
}

/* ---------------------------------------------------------------- 冒頭(題名 + 機種の写真) */
.mart-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  align-items: center;
  column-gap: 14px;
  padding: 16px 16px 16px 18px;
  border-radius: var(--r-card);
  background: linear-gradient(135deg, var(--art-accent-soft), var(--art-beige));
}

.mart__title {
  margin: 0;
  font-size: 21px;
  font-weight: 900;
  line-height: 1.45;
  font-feature-settings: "palt";
  color: var(--ink);
}

.mart__meta {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-2);
}

.mart-hero__photo { display: block; }
.mart-hero__photo picture { display: contents; }
.mart-hero__img {
  display: block;
  width: 96px;
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(20, 22, 26, 0.18));
}

/* 本文は 16.5px・太さ 500・いちばん濃い黒(2026-09-25「C」。Zen Kaku の 400 は線が細く、15px では読みにくかった) */
.mart__lead,
.mart__p {
  margin: 0 0 14px;
  max-width: 38em;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.85;
  color: var(--ink);
}

.mart__lead { margin-top: 16px; }

.mart__lead b,
.mart__p b,
.mart b { color: var(--ink); font-weight: 700; }

/* 蛍光ペン(==文字==) */
.mart__mk {
  padding: 0 1px;
  background: linear-gradient(transparent 58%, var(--art-marker) 58%);
  font-weight: 700;
  color: var(--ink);
}

.mart a {
  color: var(--art-accent);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--art-accent) 35%, transparent);
  text-underline-offset: 3px;
}

@media (hover: hover) {
  .mart a:hover { text-decoration-color: var(--art-accent); }
}

/* 差し込んだ数字(DB の値) */
.mart__v { font-weight: 700; color: var(--ink); white-space: nowrap; }

.mart__note {
  margin: 0 0 14px;
  max-width: 44em;
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ink-2);
}

/* ---------------------------------------------------------------- 目次 */
.mart-toc {
  margin: 18px 0 8px;
  padding: 14px 18px 12px;
  border: 2px solid var(--art-accent);
  border-radius: var(--r-card);
  background: var(--card);
}

.mart-toc__h {
  display: inline-block;
  margin: 0 0 8px;
  padding: 2px 12px;
  border-radius: var(--r-pill);
  background: var(--art-accent);
  font-size: 13px;
  font-weight: 900;
  color: var(--art-on);
}

.mart-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: marttoc;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
}

.mart-toc__list li {
  position: relative;
  padding: 6px 0 6px 32px;
  counter-increment: marttoc;
}

.mart-toc__list li + li { border-top: 1px dashed var(--hairline); }

.mart-toc__list li::before {
  content: counter(marttoc);
  position: absolute;
  left: 0;
  top: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--art-accent-soft);
  font-size: 12px;
  font-weight: 900;
  line-height: 22px;
  text-align: center;
  color: var(--art-accent);
}

.mart .mart-toc__list a { color: var(--ink); font-weight: 500; text-decoration: none; }

@media (hover: hover) {
  .mart .mart-toc__list a:hover { color: var(--art-accent); text-decoration: underline; }
}

@media (min-width: 769px) {
  .mart-toc { padding: 16px 28px 14px; }
  .mart-toc__list { columns: 2; column-gap: 32px; }
  .mart-toc__list li { break-inside: avoid; }
}

/* ---------------------------------------------------------------- 節の見出し */
.mart__sec { padding-top: 34px; scroll-margin-top: 12px; }

.mart__h2 {
  margin: 0 0 16px;
  padding: 12px 14px 12px 16px;
  border-left: 6px solid var(--art-accent);
  border-radius: 4px var(--r-card) var(--r-card) 4px;
  background: var(--art-beige-2);
  font-size: 19px;
  font-weight: 900;
  line-height: 1.45;
  font-feature-settings: "palt";
  color: var(--ink);
}

.mart__h3 {
  margin: 22px 0 10px;
  padding: 0 0 6px 14px;
  position: relative;
  border-bottom: 2px solid var(--art-accent-soft);
  font-size: 16.5px;
  font-weight: 900;
  line-height: 1.5;
  color: var(--ink);
}

.mart__h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 6px;
  height: 1.05em;
  border-radius: 3px;
  background: var(--art-accent);
}

.mart__list {
  margin: 0 0 14px;
  padding: 14px 18px 14px 2.2em;
  max-width: 44em;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
  font-weight: 500;
}

.mart__list li + li { margin-top: 6px; }
.mart__list li::marker { color: var(--art-accent); font-weight: 900; }

@media (min-width: 1024px) {
  .mart__title { font-size: 25px; }
  .mart__h2 { font-size: 21px; }
  .mart__lead,
  .mart__p { font-size: 16.5px; }
  .mart-hero { grid-template-columns: minmax(0, 1fr) 130px; padding: 20px 24px; }
  .mart-hero__img { width: 130px; }
}

/* ---------------------------------------------------------------- ポイントの箱(枠 + 見出しのタブ) */
.mart-point {
  margin: 4px 0 16px;
  border: 2px solid var(--art-accent);
  border-radius: 12px;
  background: var(--card);
  overflow: hidden;
}

.mart-point__label {
  display: inline-block;
  margin: 0;
  padding: 5px 14px 6px;
  border-bottom-right-radius: 12px;
  background: var(--art-accent);
  font-size: 14px;
  font-weight: 900;
  color: var(--art-on);
}

.mart-point__list,
.mart-check__list {
  margin: 0;
  padding: 10px 16px 14px;
  list-style: none;
}

.mart-point__list li,
.mart-check__list li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 8px;
  padding: 6px 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  font-weight: 500;
}

.mart-point__list li + li { border-top: 1px dashed var(--hairline); }

.mart-point__icon { margin-top: 4px; color: var(--art-accent); }

/* チェックリスト(ベージュ地 + 琥珀のチェック) */
.mart-check {
  margin: 4px 0 16px;
  padding: 6px 4px 4px;
  border-radius: 12px;
  background: var(--art-beige);
  box-shadow: var(--sh-flat);
}

.mart-check__label {
  margin: 10px 16px 0;
  font-size: 15px;
  font-weight: 900;
  color: var(--ink);
}

.mart-check__icon {
  margin-top: 4px;
  padding: 1px;
  border-radius: 5px;
  background: var(--art-check);
  color: var(--art-on);
}

/* 注意の箱 */
.mart-notice {
  position: relative;
  margin: 4px 0 16px;
  padding: 14px 16px 12px;
  border: 1px solid var(--art-note-line);
  border-radius: 12px;
  background: var(--art-note);
}

.mart-notice__label {
  display: inline-block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 900;
  color: var(--art-note-ink);
}

.mart-notice p {
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink);
  font-weight: 500;
}

/* 全社の価格へのボタン(内部リンク。売るボタンの橙 --cta は使わない) */
.mart-btnwrap { margin: 6px 0 18px; text-align: center; }

.mart .mart-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: var(--r-pill);
  background: var(--art-accent);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--art-accent) 60%, #000);
  font-size: 15.5px;
  font-weight: 900;
  color: var(--art-on);
  text-decoration: none;
}

@media (hover: hover) {
  .mart .mart-btn:hover { filter: brightness(1.08); }
}

/* ---------------------------------------------------------------- 相場の表(〜699px は 1 容量 1 枚のカード) */
.mart-souba { margin: 0 0 6px; }
.mart-souba .mart__note,
.mart-shops + .mart__note { margin-top: 10px; }

.mart-souba__cap {
  margin: 0;
  padding: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}

.mart-souba__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
  font-size: 14px;
}

.mart-souba__table th,
.mart-souba__table td {
  padding: 11px 10px;
  border-top: 1px solid var(--hairline-soft);
  text-align: right;
  vertical-align: baseline;
  white-space: nowrap;
}

.mart-souba__table thead th {
  border-top: 0;
  background: var(--art-accent);
  font-size: 12px;
  font-weight: 700;
  color: var(--art-on);
}

.mart-souba__table tr > :first-child { padding-left: 18px; text-align: left; }
.mart-souba__table tr > :last-child { padding-right: 18px; }

.mart-souba__table tbody tr:nth-child(even) { background: var(--art-beige); }
.mart-souba__table tbody th { font-weight: 900; }

.mart-souba__px { display: block; font-weight: 900; font-size: 15px; color: var(--ink); }
.mart-souba__n { display: block; font-size: 11.5px; color: var(--muted); }
.mart-souba__na { color: var(--faint); }
/* 定価のマスの注記「発売時 ¥134,800・2024年9月に変更」(2026-09-25 運営者の決定。inc/list-price.php) */
.mart-souba__chg { display: block; max-width: 10em; margin-left: auto; font-size: 11px; line-height: 1.5; color: var(--muted); }

@media (max-width: 699px) {
  .mart-souba__table,
  .mart-souba__table tbody,
  .mart-souba__table tr { display: block; }
  .mart-souba__table { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
  .mart-souba__table thead { display: none; }
  .mart-souba__table tbody tr,
  .mart-souba__table tbody tr:nth-child(even) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 0 10px;
    padding: 0 0 8px;
    background: var(--card);
    border-radius: var(--r-card);
    box-shadow: var(--sh-card);
    overflow: hidden;
  }
  .mart-souba__table tbody th {
    grid-column: 1 / -1;
    margin-bottom: 4px;
    padding: 8px 18px;
    border-top: 0;
    background: var(--art-accent-soft);
    font-size: 16px;
  }
  .mart-souba__table tbody th a { color: var(--art-accent); }
  .mart-souba__table tbody td {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 6px 18px;
    border-top: 0;
    text-align: left;
  }
  .mart-souba__table tbody td::before {
    content: attr(data-label);
    font-size: 11.5px;
    color: var(--muted);
  }
  .mart-souba__table tr > :last-child { padding-right: 18px; }
  .mart-souba__chg { max-width: none; margin-left: 0; }
}

/* ---------------------------------------------------------------- 横棒(容量ごと・状態ごとの最高値) */
.mart-bars {
  margin: 4px 0 16px;
  padding: 14px 18px 16px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
}

.mart-bars__cap {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}

.mart-bars__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mart-bars__row {
  display: grid;
  grid-template-columns: 6.6em minmax(0, 1fr);
  grid-template-areas:
    "k v"
    "tr tr";
  align-items: baseline;
  column-gap: 10px;
  row-gap: 6px;
  font-size: 14px;
}

.mart-bars__k { grid-area: k; font-weight: 700; color: var(--ink); white-space: nowrap; }
.mart .mart-bars__k { color: var(--ink); }

.mart-bars__track {
  grid-area: tr;
  position: relative;
  height: 12px;
  border-radius: var(--r-pill);
  background: var(--paper-2);
  overflow: hidden;
}

.mart-bars__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--w, 0) * 100%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--art-accent), var(--art-accent-2));
  transform-origin: left center;
}

.mart-bars--cond .mart-bars__row--new_sealed .mart-bars__fill { background: linear-gradient(90deg, var(--ink), var(--ink-2)); }

.mart-bars__v {
  grid-area: v;
  justify-self: end;
  font-size: 16px;
  font-weight: 900;
  color: var(--ink);
  white-space: nowrap;
}

.mart-bars__sub {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}

@media (min-width: 700px) {
  .mart-bars { padding: 16px 28px 18px; }
  .mart-bars__row {
    grid-template-columns: 7em minmax(0, 1fr) 12em;
    grid-template-areas: "k tr v";
    align-items: center;
  }
}

/* ---------------------------------------------------------------- おすすめの買取業者(いま高い順。1〜3 位はメダル) */
.mart-shops {
  display: grid;
  gap: 10px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.mart-shops__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 12px;
  padding: 12px 16px;
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--sh-card);
}

.mart-shops__row.is-top1 { box-shadow: inset 0 0 0 2px var(--art-gold), var(--sh-card); }

.mart-shops__no {
  display: flex;
  align-items: baseline;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding-top: 9px;
  border-radius: 50%;
  background: var(--paper-2);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  color: var(--ink-2);
}

.mart-shops__i { font-size: 10px; font-weight: 700; margin-left: 1px; }

.mart-shops__row.is-top1 .mart-shops__no { background: var(--art-gold); color: var(--art-on); }
.mart-shops__row.is-top2 .mart-shops__no { background: var(--art-silver); color: var(--art-on); }
.mart-shops__row.is-top3 .mart-shops__no { background: var(--art-bronze); color: var(--art-on); }

.mart-shops__main { min-width: 0; }

.mart .mart-shops__name {
  display: block;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
}

@media (hover: hover) {
  .mart a.mart-shops__name:hover { color: var(--art-accent); text-decoration: underline; }
}

.mart-shops__terms {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
}

.mart-shops__px {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--ink);
}

.mart-shops__gap {
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
}

/* ---------------------------------------------------------------- 高く売るコツのカード */
.mart-tips {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  counter-reset: marttip;
}

.mart-tips__card {
  display: flex;
  flex-direction: column;
  padding: 0 0 18px;
  background: var(--card);
  border-radius: 14px;
  box-shadow: var(--sh-card);
  overflow: hidden;
}

.mart-tips__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--art-accent), var(--art-accent-2));
  color: var(--art-on);
}

.mart-tips__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: var(--art-on);
}

.mart-tips__no {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--art-on);
}

.mart-tips__h {
  margin: 14px 18px 0;
  font-size: 17.5px;
  font-weight: 900;
  line-height: 1.45;
  color: var(--ink);
}

.mart-tips__stat {
  display: flex;
  flex-direction: column;
  margin: 10px 18px 0;
  padding: 10px 14px;
  border-left: 4px solid var(--art-check);
  border-radius: 8px;
  background: var(--art-beige);
}

.mart-tips__stat-v {
  font-size: 24px;
  font-weight: 900;
  line-height: 1.3;
  color: var(--ink);
}

.mart-tips__stat-v .mart__v { font-weight: 900; }

.mart-tips__stat-k {
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
}

.mart-tips__text {
  margin: 10px 18px 0;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--ink);
  font-weight: 500;
}

@media (min-width: 700px) {
  .mart-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- 仕様の表・色の見本 */
.mart-spec {
  margin: 0 0 12px;
  padding: 0 0 8px;
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  overflow: hidden;
}

.mart-spec__cap {
  margin: 0 0 4px;
  padding: 10px 18px;
  background: var(--art-accent-soft);
  font-size: 13.5px;
  font-weight: 900;
  color: var(--art-accent);
}

.mart-spec__list { margin: 0; padding: 0 18px; }

.mart-spec__row {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  column-gap: 12px;
  padding: 9px 0;
  font-size: 14px;
  line-height: 1.7;
}

.mart-spec__row + .mart-spec__row { border-top: 1px solid var(--hairline-soft); }

.mart-spec__row dt { font-weight: 700; color: var(--art-accent); }
.mart-spec__row dd { margin: 0; color: var(--ink-2); }

.mart-swatches { margin: 0 0 14px; }

.mart-swatches__cap { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--ink-2); }

.mart-swatches__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--ink);
}

.mart-swatches__list li { display: inline-flex; align-items: center; gap: 6px; }

.mart-swatches__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* ---------------------------------------------------------------- 売り方の社数 */
.mart-methods { margin: 0 0 14px; }

.mart-methods__cap {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}

.mart-methods__cells {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.mart-methods__cell {
  padding: 14px 10px 13px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: inset 0 3px 0 var(--art-accent), var(--sh-card);
  text-align: center;
}

.mart-methods__v { font-size: 24px; font-weight: 900; line-height: 1.3; color: var(--art-accent); }
.mart-methods__k { margin-top: 2px; font-size: 12.5px; font-weight: 700; color: var(--ink-2); }

@media (min-width: 700px) {
  .mart-methods__cells { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------- よくある質問 */
.mart-faq { display: grid; gap: 12px; }

.mart-faq__item {
  padding: 16px 18px;
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--sh-card);
}

.mart-faq__q {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 10px;
  margin: 0;
  font-size: 15.5px;
  font-weight: 900;
  line-height: 1.6;
  color: var(--ink);
}

.mart-faq__a {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--hairline);
}

.mart-faq__mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--art-accent);
  font-size: 14px;
  font-weight: 900;
  line-height: 30px;
  text-align: center;
  color: var(--art-on);
}

.mart-faq__mark--a { background: var(--art-check); color: var(--art-on); }

.mart-faq__body p {
  margin: 0;
  max-width: 38em;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
  font-weight: 500;
}

.mart-faq__body p + p { margin-top: 8px; }

@media (min-width: 769px) {
  .mart-faq__item { padding: 18px 26px; }
  .mart-spec__list { padding: 0 28px; }
  .mart-spec__cap { padding: 10px 28px; }
  .mart__list { padding-right: 28px; }
}

/* ---------------------------------------------------------------- 機種の写真を並べる(兄弟機種との比べ) */
.mart-photos {
  display: grid;
  grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr));
  gap: 12px;
  margin: 4px 0 16px;
}

.mart-photos__item {
  margin: 0;
  padding: 14px 10px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--art-accent-soft), var(--card));
  box-shadow: var(--sh-card);
  text-align: center;
}

.mart-photos__img { display: block; }
.mart-photos__img picture { display: contents; }
.mart-photos__img img {
  display: block;
  width: 96px;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 6px 10px rgba(20, 22, 26, 0.16));
}

.mart-photos__cap {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
}

.mart-photos__cap b { display: block; font-size: 14.5px; color: var(--ink); }

/* ---------------------------------------------------------------- 挿絵(さや。gpt-image-2.5。全機種で共通) */
.mart-illust {
  margin: 0 0 16px;
  border-radius: var(--r-card);
  background: var(--card);
  box-shadow: var(--sh-card);
  overflow: hidden;
}

.mart-illust img,
.mart-tips__img img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

@media (min-width: 700px) {
  /* 広い画面では挿絵を大きくしすぎない(文章の幅に合わせる) */
  .mart-illust { max-width: 480px; }
}

.mart-tips__img { margin: 0; border-bottom: 1px solid var(--hairline-soft); }

/* ---------------------------------------------------------------- 会話(博士が左・さやが右。2026-09-25。解説記事 /guide/ と機種・容量ページの記事で共通。マークアップは inc/guide.php の applesama_guide_talk()) */
.gtalk {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 16px;
  max-width: 42em;
}

.gtalk--right {
  flex-direction: row-reverse;
  margin-left: auto;
}

.gtalk__who {
  flex: 0 0 60px;
  text-align: center;
}

.gtalk__img {
  display: block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--art-beige);
  box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--art-beige-2);
  object-fit: cover;
}

.gtalk--hakase .gtalk__img { background: var(--art-accent-soft); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--art-accent-soft); }

.gtalk__name {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--muted);
}

.gtalk__b {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin: 4px 0 0;
  padding: 11px 15px;
  border-radius: 16px;
  background: var(--art-beige);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.8;
  color: var(--ink);
}

.gtalk--hakase .gtalk__b { background: var(--art-accent-soft); }

/* 吹き出しの口(アイコンの側に向ける) */
.gtalk__b::before {
  content: "";
  position: absolute;
  top: 18px;
  width: 0;
  height: 0;
  border: 7px solid transparent;
}

.gtalk--left .gtalk__b::before { left: -13px; border-right-color: var(--art-accent-soft); }
.gtalk--right .gtalk__b::before { right: -13px; border-left-color: var(--art-beige); }

.gtalk__b b { font-weight: 700; }

@media (min-width: 769px) {
  .gtalk__who { flex-basis: 72px; }
  .gtalk__img { width: 72px; height: 72px; }
  .gtalk__b { font-size: 16.5px; padding: 12px 18px; }
}