@charset "UTF-8";
/* ==========================================================================
   カチアル コーポレートサイト / 追加部品
   株式会社DOUBLE CONNECTION 様  ／  制作 lowgear

   骨格・色・文字は system.css（KACHIARU市場LPと共通）に置いている。
   このファイルには、コーポレートサイトにしか出てこない部品だけを足す。
     ・全ページ共通のグローバルナビ
     ・パンくず
     ・トップの2つの入口（個人／法人）
     ・お見積書カード
     ・AI概算フォームの結果表示
     ・運営者情報・規約ページの体裁
     ・段組みのフッター
   LPと同じ見え方をここで作り直さない。system.css の class をまず探すこと。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. ページ内リンク
   ヘッダーが上に貼り付くので、その分だけ着地位置を下げる。
   -------------------------------------------------------------------------- */
html { scroll-padding-top: 96px; }

/* ==========================================================================
   0-a. KACHIARU luxury のパレット（黒地）
   レイアウトは他のページとまったく同じまま、地と文字を反転させる。
   使う色は「黒・金・白」の3つだけ。彩度のある差し色は置かない。

   system.css は明るい紙を前提に組んであるので、
   「白い紙」「白い枠線」を前提にしている箇所だけをこの下でまとめて上書きする。
   トークン（--paper など）を入れ替えれば大半は自動で反転するが、
   var(--ink) を直接「背景」に使っている部品（帯・表の見出し・フッター）は
   反転すると白く光ってしまうため、個別に指定し直している。
   ========================================================================== */
:root {
  --lux-gold: #C7A253;   /* 真鍮の金 */
  --lux-ink:  #0D0D0C;   /* ほぼ黒 */
}

.theme-luxury {
  --paper:   var(--lux-ink);  /* 地＝黒 */
  --paper-2: #1A1917;         /* カードの地。地よりわずかに浮かせる */
  --ink:     #F4F1EA;         /* 文字＝オフホワイト */
  --ink-mut: #A79F90;
  --key:     var(--lux-gold); /* 主役の色面＝金 */
  --key-2:   #E2C68A;         /* 強調。黒地では明るい金のほうが効く */
  --pop:     var(--lux-gold);
  --rule:    #35312A;         /* 罫線。白のままだと線が強すぎる */
  --tint:    #121211;         /* 一段沈めた帯 */
}

/* 見出しの圧を少しだけ抜き、字間を開ける。高級品の紙面に寄せる */
.theme-luxury .d1,
.theme-luxury .d2,
.theme-luxury .d3 { font-weight: 700; letter-spacing: -.005em; }
.theme-luxury .sechead .eyebrow { letter-spacing: .24em; }
.theme-luxury .tags li { font-weight: 500; }

/* --- 枠線。白い2本線を落ち着いた灰へ ------------------------------------- */
.theme-luxury .site-head,
.theme-luxury .sticky,
.theme-luxury .crumb,
.theme-luxury .price-card,
.theme-luxury .promise,
.theme-luxury .tags li,
.theme-luxury .table-wrap,
.theme-luxury .form,
.theme-luxury .quote,
.theme-luxury .chip { border-color: var(--rule); }

/* スペック表は枠と目地に ink を使っているので、まとめて灰へ */
.theme-luxury .spec { background: var(--rule); border-color: var(--rule); }

/* --- 地に ink を敷いている部品。黒地では白帯になってしまうので反転 ------- */
.theme-luxury .license-bar {
  background: var(--tint);
  color: var(--ink-mut);
  border-block: 1px solid var(--rule);
}
.theme-luxury .tbl thead th { background: var(--rule); color: var(--ink); }
.theme-luxury .tbl thead th.ours { background: var(--key); color: var(--lux-ink); }
.theme-luxury .tbl tbody th { background: var(--tint); }
.theme-luxury .hero .who { background: var(--key); color: var(--lux-ink); }
.theme-luxury .tags li:nth-child(7n) { background: var(--rule); color: var(--ink); }

/* --- 金の色面に載る文字。白のままだと読めないので黒へ -------------------- */
.theme-luxury .fill,
.theme-luxury .chip,
.theme-luxury .hero-facts .chk,
.theme-luxury .price-card .cond,
.theme-luxury .price-card--hero,
.theme-luxury .promise:nth-child(2),
.theme-luxury .promise:nth-child(2) p,
.theme-luxury .tags li:nth-child(3n),
.theme-luxury .spec > div:nth-child(2),
.theme-luxury .spec > div:nth-child(2) dt { color: var(--lux-ink); }

/* --- 紙の粒子感。黒地では白い粒でないと出ない ---------------------------- */
.theme-luxury .grain::after {
  mix-blend-mode: screen;
  opacity: .7;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px);
}

/* --- 最終CTA。ページの締めだけ金一面に反転させる ------------------------- */
.theme-luxury .final { background: var(--key); color: var(--lux-ink); }
.theme-luxury .final .en { color: color-mix(in srgb, var(--lux-ink) 62%, transparent); }
.theme-luxury .final .btn--ghost { border-color: var(--lux-ink); color: var(--lux-ink); }
/* 金の上の強調は、黒の色面に金文字で抜く */
.theme-luxury .final .fill { background: var(--lux-ink); color: var(--key); }

/* --- フッター。地が ink（白）になってしまうので黒へ戻す ------------------ */
.theme-luxury .site-foot {
  background: #070706;
  color: color-mix(in srgb, var(--ink) 74%, transparent);
}
.theme-luxury .site-foot .fname,
.theme-luxury .foot-cols h2,
.theme-luxury .foot-cols a:hover { color: var(--ink); }
.theme-luxury .site-foot .foot-legal { border-top-color: var(--rule); }

/* --------------------------------------------------------------------------
   0-b. 本文へ飛ぶリンク
   キーボードだけで操作する方が、毎回ナビを読み飛ばせるようにする。
   ふだんは画面の外に置き、Tabキーで選ばれたときだけ出てくる。
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  font-weight: 900;
  text-decoration: none;
  padding: 14px 20px;
}
.skip-link:focus { left: 0; }

/* 本文中のリンクは、下線で「押せる」と分かるようにする */
.prose a, .lede a, .price-note a, .callout a, .table-note a,
.doc a, .company a, .est-note a, .faq .a a {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   1. ブランド表記とグローバルナビ
   ロゴは縦2行。ナビは広い画面では1行に並べ、狭い画面ではヘッダーの
   2段目に回して横スクロールさせる。項目を隠してしまわない。
   -------------------------------------------------------------------------- */
.site-head .inner { flex-wrap: wrap; }

.brand {
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  line-height: 1.2;
}
.brand .mark { font-size: clamp(19px, 4.6vw, 23px); }
.brand .sub { font-size: 10.5px; letter-spacing: .18em; }

.gnav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.9vw, 26px);
}
.gnav a {
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  white-space: nowrap;
  padding-block: 6px;
  border-bottom: 3px solid transparent;
}
.gnav a:hover { border-bottom-color: var(--key-2); }
.gnav a[aria-current="page"] { border-bottom-color: var(--key-2); }

@media (max-width: 1023px) {
  .gnav {
    order: 3;
    width: 100%;
    gap: 22px;
    margin-inline: calc(var(--pad-x) * -1);
    padding-inline: var(--pad-x);
    border-top: 2px solid color-mix(in srgb, var(--ink) 16%, transparent);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .gnav::-webkit-scrollbar { display: none; }
  .gnav a {
    min-height: 46px;
    display: flex;
    align-items: center;
    padding-block: 0;
  }
}

/* --------------------------------------------------------------------------
   2. パンくず
   -------------------------------------------------------------------------- */
.crumb {
  background: var(--tint);
  border-bottom: 2px solid var(--ink);
}
.crumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding-block: 11px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}
.crumb li + li::before {
  content: "›";
  margin-right: 8px;
  color: var(--ink-mut);
}
.crumb a { text-decoration: none; }
.crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumb li:last-child { color: var(--ink-mut); }

/* --------------------------------------------------------------------------
   3. ヒーローの派生
   3-a. トップ：右側は写真ではなくお見積書カード。画面端で切らない。
   3-b. 下層：1段組み。見出しだけを大きく置く。
   -------------------------------------------------------------------------- */
.hero .hero-media--card {
  margin-right: 0;
  padding-top: 6px;
}
@media (min-width: 900px) {
  .hero .hero-media--card { padding-left: 12px; }
}

.hero--sub { padding-bottom: clamp(40px, 5.5vw, 76px); }
.hero--sub .hero-copy { grid-column: 1 / -1; }
.hero--sub .sub { max-width: 38em; }
/* 下層の見出しはトップより短めに。原稿が長いので折り返しも許す */
.hero--sub h1 { font-size: clamp(28px, 6.6vw, 56px); margin-bottom: 16px; }

.hero--doc { padding-block: clamp(36px, 5vw, 68px); }
.hero--doc h1 { font-size: clamp(26px, 5vw, 46px); margin-bottom: 12px; }
.hero--doc .sub { margin-bottom: 0; }

/* 下層ヒーローの肩見出し。LPの .en と同じ調子でそろえる */
.hero .who {
  display: inline-block;
  font-family: var(--ff-en);
  font-variation-settings: "wdth" 78;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  padding: 7px 14px;
  margin-bottom: 20px;
}

/* ボタンを2つ横に並べるとき。狭い画面では自然に折り返す */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   4. お見積書カード
   実際の画面で出している見積書を、そのまま紙の伝票として見せる。
   -------------------------------------------------------------------------- */
.quote-wrap { position: relative; }

.quote {
  background: var(--paper-2);
  border: 2px solid var(--ink);
  box-shadow: 10px 10px 0 var(--ink);
}
.quote .qhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  background: var(--ink);
  color: var(--paper);
}
.quote .qhead b { font-size: 14px; font-weight: 900; letter-spacing: .08em; }
.quote .qhead span {
  font-family: var(--ff-en);
  font-variation-settings: "wdth" 78;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  opacity: .8;
}
.quote ul { padding: 4px 18px; }
.quote li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--ink) 26%, transparent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}
.quote li:last-child { border-bottom: none; }
.quote .st {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink-mut);
}
.quote .yen {
  font-weight: 900;
  font-size: 16px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.quote .qfoot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  background: var(--key);
  border-top: 2px solid var(--ink);
  font-size: 14px;
  font-weight: 900;
}
.quote .qfoot .yen { font-size: 23px; }

/* 札は右上。ここに文字を置くと札で隠れるので、伝票の見出しは左だけにする */
.quote-badge {
  position: absolute;
  z-index: 3;
  top: -18px;
  right: -10px;
  transform: rotate(4deg);
  background: var(--pop);
  color: #fff;
  border: 2px solid var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .08em;
  padding: 8px 14px;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   5. 2つの入口（個人のお客様／法人・買取店様）
   トップの分岐はページで一番押してほしい場所なので、色面で塗り分ける。
   -------------------------------------------------------------------------- */
.doors {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .doors { grid-template-columns: 1fr 1fr; } }
/* 入口が3つのとき。中くらいの画面では3枚目だけ横いっぱいに寝かせる */
@media (min-width: 820px) and (max-width: 1059px) {
  .doors--3 > :last-child { grid-column: 1 / -1; }
}
@media (min-width: 1060px) { .doors--3 { grid-template-columns: repeat(3, 1fr); } }

.door {
  display: flex;
  flex-direction: column;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  padding: 32px 28px 28px;
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.door:hover { transform: translateY(-3px); box-shadow: 10px 10px 0 var(--ink); }
.door .who {
  font-family: var(--ff-en);
  font-variation-settings: "wdth" 78;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.door h3 {
  font-size: clamp(23px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -.01em;
  margin: 10px 0 14px;
}
.door p { font-size: .96em; }
.door .go {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 2px solid currentColor;
  font-weight: 900;
  font-size: .98em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.door .go::after { content: "→"; font-size: 1.3em; line-height: 1; }

/* 個人は主役の色面、法人は締めた墨。白抜き文字の読みやすさを優先し、
   彩度の高い色の上には本文を置かない */
.door--personal { background: var(--key); }
.door--business { background: var(--ink); color: var(--paper); }
.door--business p { color: color-mix(in srgb, var(--paper) 84%, transparent); }
.door--business .who { color: var(--key); }
.door--business:hover { box-shadow: 10px 10px 0 var(--key); }

/* ブランド品の入口。明るいページに置いても luxury の黒地と金で出す。
   法人の入口も墨色なので、こちらは金の枠線と金の見出しで見分けられるようにする */
.door--luxury {
  background: var(--lux-ink);
  color: #F4F1EA;
  border-color: var(--lux-gold);
}
.door--luxury p { color: color-mix(in srgb, #F4F1EA 80%, transparent); }
.door--luxury .who,
.door--luxury h3 { color: var(--lux-gold); }
.door--luxury:hover { box-shadow: 10px 10px 0 var(--lux-gold); }

/* --------------------------------------------------------------------------
   6. 買取実例カードの状態表記
   system.css の .price-card に、状態の1行だけを足す。
   -------------------------------------------------------------------------- */
.price-card .st {
  display: block;
  margin-top: 6px;
  font-size: .8em;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ink-mut);
}
.price-card--hero .st { color: color-mix(in srgb, var(--ink) 72%, transparent); }

/* 色面で塗ったスペック欄だけ、見出しの文字が薄くて読みづらいので濃くする */
.spec > div:nth-child(2) dt { color: var(--ink); }

/* 表の「当社」列の見出しは、明るい橙の上に白文字だと読みにくいので墨に戻す */
.theme-personal .tbl thead th.ours { color: var(--ink); }

/* カードが4枚のとき。自動配置だと3枚＋1枚になって最後の1枚が浮くので、
   広い画面でも2列×2段に固定する。1枚あたりの幅も余裕が出る */
@media (min-width: 700px) {
  .promises--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 最終CTAの上は地の色が変わる。補足文はその地の文字色から作る */
.final .btn-note { color: color-mix(in srgb, currentColor 78%, transparent); }

/* 濃い地の最終CTAでは、色面で塗った文字が白のままだと読みにくい。墨に戻す
   （luxury は金一面なので 0-a 側で別に指定している） */
.theme-business .final .fill { color: var(--ink); }

/* --------------------------------------------------------------------------
   取扱品目の一覧（/items/）
   品目が増えても崩れないよう、カードは自動で折り返す
   -------------------------------------------------------------------------- */
.item-group + .item-group { margin-top: clamp(44px, 6vw, 72px); }
.item-group h2 {
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -.005em;
  margin-bottom: 20px;
  padding-left: 16px;
  border-left: 8px solid var(--key-2);
}
.item-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.item-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--paper-2);
  border: 2px solid var(--ink);
  padding: 22px;
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.item-card:hover { transform: translateY(-3px); box-shadow: 8px 8px 0 var(--ink); }
.item-card b { font-size: 1.08em; font-weight: 800; line-height: 1.5; letter-spacing: -.005em; }
.item-card span { font-size: .84em; line-height: 1.75; color: var(--ink-mut); }
/* 矢印は右下。品目名が2行になっても文字とぶつからない */
.item-card::after {
  content: "→";
  align-self: flex-end;
  margin-top: auto;
  padding-top: 10px;
  font-size: 1.2em;
  line-height: 1;
}
/* ブランド品の品目だけ、行き先の配色に合わせて墨と金で出す */
.item-card--lux { background: var(--lux-ink); border-color: var(--lux-gold); color: #F4F1EA; }
.item-card--lux b { color: var(--lux-gold); }
.item-card--lux span { color: color-mix(in srgb, #F4F1EA 74%, transparent); }
.item-card--lux:hover { box-shadow: 8px 8px 0 var(--lux-gold); }

/* 品目の札はリンクになる。下線ではなく面で押せることを示す */
.tags li:has(> a) { padding: 0; }
.tags li > a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 999px;
}

/* --------------------------------------------------------------------------
   ブランド名の一覧。ジャンルごとに小見出しを立てて並べる
   -------------------------------------------------------------------------- */
.tag-group + .tag-group { margin-top: var(--gap-block); }
.tag-group h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.06em;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.5;
  margin-bottom: 18px;
}
.tag-group h3::before {
  content: "";
  width: 24px;
  height: 2px;
  flex: none;
  background: var(--key-2);
}

/* --------------------------------------------------------------------------
   7. ご利用の流れに付ける小さな札
   -------------------------------------------------------------------------- */
.chip {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 10px;
  background: var(--key);
  border: 2px solid var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.7;
  vertical-align: 3px;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. AI概算フォーム
   入力欄は system.css の .form / .field をそのまま使い、結果の見せ方だけ足す。
   -------------------------------------------------------------------------- */
.est-result {
  display: none;
  margin-top: 26px;
  padding-top: 24px;
  border-top: 2px solid var(--ink);
}
.est-result .range {
  font-weight: 900;
  font-size: clamp(28px, 4.6vw, 46px);
  line-height: 1.15;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.est-result .range small {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-mut);
}
.est-result .cm { margin-top: 12px; font-size: .96em; color: var(--ink-mut); }
.est-note { margin-top: 20px; font-size: .9em; color: var(--ink-mut); }
.form .btn { margin-top: 6px; }

/* --------------------------------------------------------------------------
   9. 運営者情報・規約ページ
   ここは飾らない。読ませることだけを考える。
   -------------------------------------------------------------------------- */
.doc { max-width: 46em; }
.doc h2 {
  font-size: clamp(21px, 2.8vw, 28px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -.01em;
  margin: clamp(44px, 6vw, 68px) 0 22px;
  padding-left: 18px;
  border-left: 8px solid var(--key-2);
}
.doc h2:first-child { margin-top: 0; }

/* 運営者情報とよくあるご質問。かたまりごとに小見出しを立てる */
.company h2,
.faq-block h2 {
  font-size: clamp(19px, 2.4vw, 24px);
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -.005em;
  margin-bottom: 18px;
  padding-left: 16px;
  border-left: 8px solid var(--key-2);
}
.company + .company,
.faq-block + .faq-block { margin-top: clamp(44px, 6vw, 72px); }
.doc > p { margin-bottom: 1.1em; }
.doc ol {
  counter-reset: doc;
  display: grid;
  gap: 14px;
}
.doc ol li {
  position: relative;
  padding-left: 46px;
}
.doc ol li::before {
  counter-increment: doc;
  content: counter(doc, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--ff-en);
  font-variation-settings: "wdth" 78;
  font-weight: 900;
  font-size: .96em;
  letter-spacing: .06em;
  color: var(--key-2);
}

/* --------------------------------------------------------------------------
   10. フッター
   system.css の .site-foot に段組みだけ足す。
   -------------------------------------------------------------------------- */
.foot-cols {
  display: grid;
  gap: 30px;
  grid-template-columns: 1fr;
  margin-bottom: 34px;
}
@media (min-width: 760px) {
  .foot-cols { grid-template-columns: 1.6fr 1fr 1fr; gap: 44px; }
}
.foot-cols h2,
.foot-cols h3 {
  color: var(--paper);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .14em;
  margin-bottom: 12px;
}
.foot-cols ul { display: grid; gap: 4px; }
.foot-cols a {
  text-decoration: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
}
.foot-cols a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 4px; }
.foot-cols .fdesc { margin-top: 12px; }

/* 運営会社の表記。リンクだけは行の中に収める（.foot-cols a の高さ指定を打ち消す） */
.foot-cols .fcorp { margin-top: 16px; font-size: .94em; }
.foot-cols .fcorp a {
  display: inline;
  min-height: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.site-foot .foot-legal {
  border-top: 1px solid color-mix(in srgb, var(--paper) 24%, transparent);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  font-size: .84em;
}