/* 制作サンプルカタログ。ミニモックは各パターンの実フォント・実配色でファーストビューを縮小再現する。 */

.cat-genre {
  font-size: 20px; margin: 44px 0 18px; padding-left: 12px;
  border-left: 6px solid #ea580c;
}
.cat-grid { display: grid; gap: 24px; }
@media (min-width: 880px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }

.cat-card {
  background: #fff; border: 1px solid #e2e8f0; border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.06); display: flex; flex-direction: column;
}

/* --- ミニモック共通 --- */
.cat-mock {
  position: relative; display: block; aspect-ratio: 16/10;
  background-size: cover; background-position: center; text-decoration: none;
}
.cat-mock__overlay { position: absolute; inset: 0; }
.cat-mock__inner {
  position: relative; height: 100%; display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start; gap: 6px; padding: 16px 18px;
}
.cat-mock__company { font-size: 10px; letter-spacing: .12em; opacity: .85; }
.cat-mock__title { font-size: 16px; font-weight: bold; line-height: 1.5; }
.cat-mock__cta {
  font-size: 10px; font-weight: bold; padding: 5px 14px; border-radius: 999px; margin-top: 4px;
}

/* --- パターン別ミニモック（実物の配色・フォントを反映） --- */
.cat-mock--care_warm { background-color: #fff8ef; font-family: "Hiragino Maru Gothic ProN", sans-serif; }
.cat-mock--care_warm .cat-mock__overlay { background: linear-gradient(90deg, rgba(255,248,239,.95) 35%, rgba(255,248,239,.45)); }
.cat-mock--care_warm .cat-mock__company { color: #8a7a68; }
.cat-mock--care_warm .cat-mock__title { color: #4a3f35; }
.cat-mock--care_warm .cat-mock__cta { background: #e8590c; color: #fff; }

.cat-mock--care_trust { background-color: #fff; }
.cat-mock--care_trust .cat-mock__overlay { background: linear-gradient(90deg, rgba(255,255,255,.96) 40%, rgba(255,255,255,.6)); }
.cat-mock--care_trust .cat-mock__company { color: #5d6b7a; }
.cat-mock--care_trust .cat-mock__title { color: #1b3a5c; font-family: "Hiragino Mincho ProN", serif; }
.cat-mock--care_trust .cat-mock__cta { background: #1b3a5c; color: #fff; border-radius: 0; }

.cat-mock--care_people { background-color: #18181b; }
.cat-mock--care_people .cat-mock__overlay { background: linear-gradient(transparent 20%, rgba(0,0,0,.8)); }
.cat-mock--care_people .cat-mock__inner { justify-content: flex-end; }
.cat-mock--care_people .cat-mock__company { color: #f43f5e; font-weight: 900; }
.cat-mock--care_people .cat-mock__title { color: #fff; font-weight: 900; font-size: 18px; }
.cat-mock--care_people .cat-mock__cta { background: #f43f5e; color: #fff; border-radius: 0; }

.cat-mock--kensetsu_goketsu { background-color: #111; }
.cat-mock--kensetsu_goketsu .cat-mock__overlay { background: rgba(10,10,10,.55); }
.cat-mock--kensetsu_goketsu .cat-mock__company { color: #fbbf24; font-weight: 900; }
.cat-mock--kensetsu_goketsu .cat-mock__title { color: #fff; font-weight: 900; font-size: 20px; }
.cat-mock--kensetsu_goketsu .cat-mock__cta {
  background: #fbbf24; color: #111; border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 94% 100%, 0 100%);
}

.cat-mock--kensetsu_works { background-color: #f6f4ef; }
.cat-mock--kensetsu_works .cat-mock__overlay { background: linear-gradient(rgba(246,244,239,.2), rgba(246,244,239,.92) 75%); }
.cat-mock--kensetsu_works .cat-mock__inner { justify-content: flex-end; }
.cat-mock--kensetsu_works .cat-mock__company { color: #4d6635; font-weight: bold; }
.cat-mock--kensetsu_works .cat-mock__title { color: #2d2a26; font-size: 14px; }
.cat-mock--kensetsu_works .cat-mock__cta { background: #4d6635; color: #fff; border-radius: 5px; }

.cat-mock--kensetsu_ishizue { background-color: #f6f1e7; font-family: "Hiragino Mincho ProN", serif; }
.cat-mock--kensetsu_ishizue .cat-mock__overlay { background: linear-gradient(90deg, rgba(246,241,231,.95) 45%, rgba(246,241,231,.5)); }
.cat-mock--kensetsu_ishizue .cat-mock__company { color: #8c8270; letter-spacing: .3em; }
.cat-mock--kensetsu_ishizue .cat-mock__title { color: #2b2a28; letter-spacing: .2em; }
.cat-mock--kensetsu_ishizue .cat-mock__cta { background: #b5452e; color: #fff; border-radius: 0; }

.cat-mock--unsou_sokusen { background-color: #0b1220; }
.cat-mock--unsou_sokusen .cat-mock__overlay { background: rgba(11,18,32,.62); }
.cat-mock--unsou_sokusen .cat-mock__company { color: #22d3ee; font-weight: 900; }
.cat-mock--unsou_sokusen .cat-mock__title { color: #fff; font-weight: 900; font-size: 19px; }
.cat-mock--unsou_sokusen .cat-mock__cta { background: #22d3ee; color: #0b1220; border-radius: 4px; }

.cat-mock--unsou_corporate { background-color: #172554; }
.cat-mock--unsou_corporate .cat-mock__overlay { background: linear-gradient(rgba(23,37,84,.25), rgba(23,37,84,.85)); }
.cat-mock--unsou_corporate .cat-mock__inner { justify-content: flex-end; }
.cat-mock--unsou_corporate .cat-mock__company { color: #bfdbfe; }
.cat-mock--unsou_corporate .cat-mock__title { color: #fff; font-size: 15px; }
.cat-mock--unsou_corporate .cat-mock__cta { background: #1d4ed8; color: #fff; border-radius: 4px; }

.cat-mock--unsou_friendly { background-color: #fffdf8; font-family: "Hiragino Maru Gothic ProN", sans-serif; }
.cat-mock--unsou_friendly .cat-mock__overlay { background: linear-gradient(90deg, rgba(255,253,248,.95) 35%, rgba(255,253,248,.4)); }
.cat-mock--unsou_friendly .cat-mock__company { color: #38bdf8; font-weight: bold; }
.cat-mock--unsou_friendly .cat-mock__title { color: #3d3a34; }
.cat-mock--unsou_friendly .cat-mock__cta { background: #06c755; color: #fff; }

.cat-mock--inshoku_baito { background-color: #fff6e8; font-family: "Hiragino Maru Gothic ProN", sans-serif; }
.cat-mock--inshoku_baito .cat-mock__overlay { background: linear-gradient(90deg, rgba(255,246,232,.95) 35%, rgba(255,246,232,.45)); }
.cat-mock--inshoku_baito .cat-mock__company { color: #8a6f5e; }
.cat-mock--inshoku_baito .cat-mock__title { color: #43332a; }
.cat-mock--inshoku_baito .cat-mock__cta { background: #06c755; color: #fff; }

.cat-mock--inshoku_shokunin { background-color: #161210; }
.cat-mock--inshoku_shokunin .cat-mock__overlay { background: rgba(12,10,9,.6); }
.cat-mock--inshoku_shokunin .cat-mock__company { color: #e9b96a; letter-spacing: .3em; }
.cat-mock--inshoku_shokunin .cat-mock__title { color: #fff; font-weight: 800; font-size: 18px; }
.cat-mock--inshoku_shokunin .cat-mock__cta { background: #c1272d; color: #fff; border-radius: 0; }

.cat-mock--inshoku_brand { background-color: #ece3d4; }
.cat-mock--inshoku_brand .cat-mock__overlay { background: linear-gradient(transparent 30%, rgba(50,40,28,.72)); }
.cat-mock--inshoku_brand .cat-mock__inner { justify-content: flex-end; align-items: center; text-align: center; }
.cat-mock--inshoku_brand .cat-mock__company { color: #fff; letter-spacing: .3em; font-size: 12px; }
.cat-mock--inshoku_brand .cat-mock__title { color: #fff; font-weight: normal; font-size: 13px; letter-spacing: .15em; }
.cat-mock--inshoku_brand .cat-mock__cta { background: #8c6d46; color: #fff; border-radius: 0; }

.cat-mock--seizou_genba { background-color: #f2f3f5; }
.cat-mock--seizou_genba .cat-mock__overlay { background: linear-gradient(90deg, rgba(242,243,245,.95) 38%, rgba(242,243,245,.4)); }
.cat-mock--seizou_genba .cat-mock__company { color: #f97316; font-weight: 900; }
.cat-mock--seizou_genba .cat-mock__title { color: #2c3138; font-weight: 900; font-size: 18px; }
.cat-mock--seizou_genba .cat-mock__cta { background: #f97316; color: #fff; border-radius: 3px; }

.cat-mock--seizou_tech { background-color: #1f2730; }
.cat-mock--seizou_tech .cat-mock__overlay { background: rgba(15,22,30,.6); }
.cat-mock--seizou_tech .cat-mock__company { color: #60a5fa; font-family: "Courier New", monospace; letter-spacing: .25em; }
.cat-mock--seizou_tech .cat-mock__title { color: #fff; font-weight: 900; font-size: 18px; }
.cat-mock--seizou_tech .cat-mock__cta { background: #2563eb; color: #fff; border-radius: 2px; }

.cat-mock--seizou_light { background-color: #f0faf8; }
.cat-mock--seizou_light .cat-mock__overlay { background: linear-gradient(90deg, rgba(240,250,248,.95) 38%, rgba(240,250,248,.45)); }
.cat-mock--seizou_light .cat-mock__company { color: #0f9488; font-weight: bold; }
.cat-mock--seizou_light .cat-mock__title { color: #2f3e3b; font-size: 14px; }
.cat-mock--seizou_light .cat-mock__cta { background: #0f9488; color: #fff; border-radius: 0; }

/* --- カード本文 --- */
.cat-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.cat-card__name { font-size: 17px; font-weight: bold; }
.cat-card__tags { margin: 8px 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.cat-tag {
  font-size: 11px; font-weight: bold; padding: 2px 10px; border-radius: 999px;
  background: #f1f5f9; color: #475569;
}
.cat-tag--photo { background: #fef3c7; color: #92400e; }
.cat-card__specs { font-size: 12px; display: grid; gap: 6px; margin-bottom: 14px; flex: 1; }
.cat-card__specs dt { color: #94a3b8; font-weight: bold; font-size: 11px; }
.cat-card__specs dd { color: #334155; line-height: 1.6; }
.cat-card__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cat-btn {
  text-align: center; padding: 11px 6px; border-radius: 8px;
  font-size: 13px; font-weight: bold; text-decoration: none;
}
.cat-btn--view { background: #0f172a; color: #fff; }
.cat-btn--consult { background: #fff; color: #ea580c; border: 2px solid #ea580c; }