/* ===========================================================
   HUITE — カテゴリページ（/lineup/<cat> ・ /stock/<cat>）専用
   2026-11-01 新規。既存の lineup.css / stock.css の上に重ねる。
   ・色はサイト既存の暖色系のみ（新しい色相は持ち込まない）
   ・グリッドはホームの .bw-* と衝突しないよう lq- 接頭辞
   =========================================================== */

/* ---------- 枠 ---------- */
.lq-wrap{max-width:1200px;margin:0 auto;padding:0 20px}
.ln-page .lq-wrap{max-width:1200px;padding:0 20px}
@media (max-width:900px){
  .ln-page .lq-wrap{padding:0 20px}
}

/* ---------- hero ---------- */
.lq-hero{
  padding:0;
  background:linear-gradient(180deg,#f8f5ef 0%,#fff 100%);
  border-bottom:1px solid var(--line);
}
.lq-hero .lq-wrap{padding-top:24px;padding-bottom:32px}
/* ★ 2026-11-01 改：テキストだけが続く「文字の壁」を避け、右に代表写真を置く。
   空（画像なし）のときは flex アイテムごと消えるので 1 カラムに戻る。 */
.lq-hero-in{display:flex;align-items:center;gap:52px}
.lq-hero-main{flex:1 1 auto;min-width:0;max-width:760px}
.lq-hero-fig{
  flex:0 0 430px;position:relative;aspect-ratio:4 / 3;margin:4px 0 0;
  background:#fff;border:0;border-radius:12px;overflow:hidden;
  /* 実線の枠はやめ、ぼかした影だけで輪郭を出す */
  box-shadow:0 4px 20px rgba(31,28,24,.10);
}
/* 縦長の素材（現物写真は 3:4）でも枠の高さを変えない。中で contain して
   靴が切れないようにする＝「商品は必ず全部写る」の既存ルールを守る。 */
.lq-hero-fig img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:0;      /* 余白は素材側の白に任せ、枠いっぱいに見せる */
}
.lq-hero-fig:empty{display:none}
.lq-crumb{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-size:11.5px;letter-spacing:.03em;color:#a89c8a;margin:0 0 16px;
}
.lq-crumb a{color:#8d8375;text-decoration:none}
.lq-crumb a:hover{color:#8a6a3b;text-decoration:underline}
.lq-crumb span{color:#cfc6b8}
.lq-crumb em{font-style:normal;color:#6f665a}
.lq-kick{
  font-family:'Lato','Noto Sans JP',sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.2em;
  color:#a5895c;margin:0 0 12px;text-transform:uppercase;
}
.lq-hero h1{
  font-size:30px;line-height:1.42;font-weight:700;letter-spacing:.01em;
  color:#2b2620;margin:0 0 16px;max-width:1000px;
}
.lq-lead{
  font-size:14.5px;line-height:2.05;color:#57524b;
  max-width:840px;margin:0 0 22px;
}
.lq-stats{
  display:flex;flex-wrap:wrap;gap:12px 40px;
  list-style:none;margin:0 0 16px;padding:0;
}
.lq-stats li{display:flex;flex-direction:column;gap:2px;min-width:0}
.lq-stats .v{
  font-family:'Lato','Noto Sans JP',sans-serif;
  font-size:22px;font-weight:700;line-height:1.15;color:#2b2620;
  display:flex;align-items:baseline;gap:3px;
}
.lq-stats .v i{font-style:normal;font-size:11px;font-weight:400;color:#8d8375;letter-spacing:.02em}
.lq-stats .k{font-size:11px;color:#948b7d;letter-spacing:.04em;line-height:1.4}
.lq-note{font-size:11.5px;line-height:1.75;color:#a29a8c;margin:0}

/* ---------- セクション ---------- */
/* ★ クラス名は .lq-sect（-sec ではない）。lineup.css に「見積フォームの区切り」用の
   .lq-sec{border-top:1px solid} が既にあり、-sec にすると全セクションの上端に線が
   出て、ヒーローの border-bottom と二重線になる（2026-10-31 実害）。改名で回避。 */
.lq-sect{padding:52px 0}
.lq-sect--tight{padding-top:0}
.lq-h2{
  font-size:19px;font-weight:700;line-height:1.5;letter-spacing:.02em;
  color:#2b2620;margin:0 0 20px;padding-bottom:11px;
  border-bottom:1px solid var(--line);
}
.lq-h2::before{
  content:"";display:inline-block;width:3px;height:15px;
  background:#b08d57;margin-right:10px;vertical-align:-1px;
}

/* 現物カテゴリは素材が 3:4 の縦位置。ヒーローは 2 枚並べる。
   （仕様横の 1 枚は --ar で実寸比を受けるので個別指定は不要） */
.sk-page .lq-hero-fig{
  flex:0 0 366px;aspect-ratio:auto;display:grid;grid-template-columns:1fr 1fr;
  gap:10px;padding:0;border:0;background:none;box-shadow:none;overflow:visible;
}
.sk-page .lq-hero-fig img{
  position:static;width:100%;height:auto;aspect-ratio:3 / 4;object-fit:contain;
  padding:0;background:#fff;border:0;border-radius:12px;
  box-shadow:0 4px 18px rgba(31,28,24,.10);
}

/* ---------- 仕様＋写真（2 カラムで縦を詰める） ---------- */
/* 2026-11-01 改：
   ① 写真は左の文字ブロック（h2＋表）の全体高に対して縦センター（align-items:center）
   ② 枠の比率は素材の実寸（--ar を figure に直書き）。以前は 4:3 固定だったため
      3:4 の現物写真で左右に大きな白が残っていた。
      幅 = min(列幅, 高さ上限×比率) なので、横長素材は列いっぱい・
      縦長素材は高さ上限で頭打ちになり、どちらも枠が絵にぴたりと寄る。 */
.lq-duo{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:46px;align-items:center}
.lq-duo-fig{
  --cap:480px;                     /* 縦長素材のときの高さ上限 */
  justify-self:end;                /* 右端は列の右端＝上の写真と同じ右ライン */
  box-sizing:content-box;
  width:min(calc(100% - 10px), calc(var(--cap) * var(--ar, 1.3333)));
  aspect-ratio:var(--ar, 1.3333);
  margin:0;padding:5px;            /* 白の台紙は 5px だけ＝実線の枠は使わない */
  background:#fff;border:0;border-radius:12px;
  box-shadow:0 4px 18px rgba(31,28,24,.09);
}
.lq-duo-fig img{display:block;width:100%;height:100%;object-fit:contain;border-radius:8px}
.lq-duo-fig:empty{display:none}

/* ---------- 仕様表 ---------- */
.lq-tbl{
  width:100%;border-collapse:collapse;
  font-size:13.5px;background:#fff;
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
}
.lq-tbl th{
  width:156px;text-align:left;vertical-align:top;
  background:#faf8f4;color:#4a4238;font-weight:700;
  padding:13px 18px;border-bottom:1px solid var(--line);
  letter-spacing:.02em;white-space:nowrap;
}
.lq-tbl td{
  padding:13px 18px;border-bottom:1px solid var(--line);
  color:#4c4a45;line-height:1.85;
}
.lq-tbl tr:last-child th,.lq-tbl tr:last-child td{border-bottom:0}

/* ---------- 技術ブロック ---------- */
.lq-blocks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 34px}
.lq-blk h3{
  font-size:15.5px;font-weight:700;line-height:1.6;color:#2b2620;
  margin:0 0 10px;letter-spacing:.01em;
}
.lq-blk p{font-size:13.5px;line-height:1.98;color:#514d47;margin:0}

/* ---------- 一覧（JS グリッド） ---------- */
.lq-listnote{font-size:12px;line-height:1.8;color:#948b7d;margin:-8px 0 20px;max-width:840px}
.lq-page .ln-body{padding-bottom:0}
.lq-page .ln-empty{padding:0 32px 40px}

/* ---------- 他カテゴリ ---------- */
.lq-cats{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:10px;list-style:none;margin:0 0 20px;padding:0;max-width:1120px;
}
.lq-cats a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:14px 16px;border:1px solid var(--line);border-radius:10px;
  background:#fff;color:#3a332b;text-decoration:none;
  font-size:13.5px;font-weight:700;letter-spacing:.01em;
  transition:border-color .25s,background .25s,transform .25s;
}
.lq-cats a:hover{border-color:#dccbb0;background:#fdfaf4;transform:translateY(-1px)}
.lq-cats .c{
  font-family:'Lato','Noto Sans JP',sans-serif;
  font-size:11px;font-weight:400;color:#a2988a;white-space:nowrap;
}
.lq-xlink{
  display:inline-block;font-size:13px;color:#8a6a3b;
  text-decoration:underline;text-underline-offset:3px;
}
.lq-xlink:hover{color:#6d5228}

/* ---------- CTA ---------- */
.lq-cta{
  background:#2b2620;color:#f4ede2;border-radius:14px;
  padding:38px 32px;text-align:center;
}
.lq-cta h2{
  font-size:20px;font-weight:700;line-height:1.5;color:#fff;
  margin:0 0 12px;letter-spacing:.02em;
}
.lq-cta p{
  font-size:13.5px;line-height:1.95;color:#d9cec0;
  max-width:660px;margin:0 auto 22px;text-wrap:pretty;
}
.lq-cta .btn{
  display:inline-block;background:#fff;color:#2b2620;border-color:#fff;
  font-weight:700;text-decoration:none;
}
.lq-cta .btn:hover{background:#f3ece1;color:#1d1913}

/* ---------- レスポンシブ ---------- */
@media (max-width:1100px){
  .lq-hero-fig{flex:0 0 350px}
  .sk-page .lq-hero-fig{flex:0 0 320px}
}
@media (max-width:900px){
  /* 携帯では写真をテキストの下へ回し、幅いっぱいに見せる */
  .lq-hero-in{display:block}
  .lq-hero-main{max-width:none}
  .lq-hero-fig{flex:none;margin:22px 0 0;max-width:460px}
  .lq-duo{grid-template-columns:1fr;gap:26px}
  /* 1 カラム時は表が全幅になるので、写真は左に寄せず中央に置く
     （縦長素材は高さ上限で幅が決まるため、左寄せだと右半分が空く） */
  .lq-duo-fig{--cap:520px;justify-self:center}
}
@media (max-width:760px){
  .lq-hero .lq-wrap{padding-top:18px;padding-bottom:26px}
  .lq-hero h1{font-size:22px;line-height:1.45}
  .lq-lead{font-size:13.5px;line-height:1.95}
  .lq-stats{gap:10px 26px}
  .lq-stats .v{font-size:18px}
  .lq-hero-fig{border-radius:10px}
  .lq-sect{padding:36px 0}
  .lq-h2{font-size:16.5px}
  .lq-tbl{font-size:12.5px}
  .lq-tbl th{width:32%;white-space:normal;padding:11px 12px}
  .lq-tbl td{padding:11px 12px;line-height:1.8}
  .lq-blocks{grid-template-columns:1fr;gap:24px}
  .lq-cats{grid-template-columns:repeat(2,minmax(0,1fr));max-width:none}
  .lq-cats a{padding:12px 13px;font-size:12.5px}
  .lq-cta{padding:28px 20px;border-radius:12px}
  .lq-cta h2{font-size:17px}
  .lq-page .ln-empty{padding:0 20px 32px}
}
@media (prefers-reduced-motion:reduce){
  .lq-cats a{transition:none}
  .lq-cats a:hover{transform:none}
}