/* ============================================================
   平屋図鑑 カタログ詳細ページ共通スタイル
   ============================================================ */
.cat-hero { max-width: 1160px; margin: 0 auto; padding: 28px clamp(20px, 4vw, 40px) 0; }
.cat-label {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; letter-spacing: 0.28em; color: var(--olive); font-weight: 600;
}
.cat-label::before { content: ''; width: 28px; height: 1px; background: var(--olive); }
.cat-hero h1 { margin: 14px 0 0; font-size: clamp(24px, 3.4vw, 38px); font-weight: 600; letter-spacing: 0.1em; line-height: 1.7; }
.cat-hero .case-id { font-size: 0.6em; color: var(--muted); letter-spacing: 0.2em; margin-right: 14px; }
@media (max-width: 760px) {
  /* SP: CASE番号で改行し、タイトルは左端から */
  .cat-hero .case-id { display: block; margin: 0 0 6px; }
}
.spec-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.spec-chips span {
  display: inline-flex; align-items: center; gap: 8px;
  background: #FFFFFF; border: 1px solid var(--line); color: var(--navy);
  font-size: 14px; letter-spacing: 0.08em; padding: 9px 18px; border-radius: 999px;
}
.spec-chips i { color: var(--olive); font-size: 12px; }
.cg-note {
  margin-top: 18px; display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 0.08em; color: var(--muted);
  background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 8px 14px;
}
.cat-main-img { margin-top: 28px; border-radius: 10px; overflow: hidden; aspect-ratio: 16/8.5; position: relative; }
.cat-main-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: hero-in 1.9s cubic-bezier(.22,1,.36,1) both; }

.cat-body { max-width: 1160px; margin: 0 auto; padding: 24px clamp(20px, 4vw, 40px) 80px; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 32px 0; }
@media (max-width: 760px) { .gallery { grid-template-columns: 1fr; } }
.g-item { border-radius: 8px; overflow: hidden; position: relative; aspect-ratio: 16/9; }
.g-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.22,1,.36,1); }
.g-item:hover img { transform: scale(1.04); }
.g-item .g-cap {
  position: absolute; left: 0; bottom: 0; background: rgba(20,28,51,0.7); color: var(--bg);
  font-size: 11px; letter-spacing: 0.2em; padding: 7px 14px; border-radius: 0 8px 0 0;
}

.plan-box { background: #FFFFFF; border: 1px solid var(--line); border-radius: 10px; padding: clamp(16px, 3vw, 36px); margin: 32px 0; overflow-x: auto; position: relative; }
.plan-box svg { display: block; min-width: 640px; width: 100%; height: auto; }
@media (max-width: 760px) {
  /* SP: 間取り図は幅100%に収める(拡大したい人はピンチズーム) */
  .plan-box { padding: 12px 10px; }
  .plan-box svg { min-width: 0; }
}
.plan-note { margin-top: 14px; font-size: 12px; letter-spacing: 0.06em; color: var(--muted); text-align: center; }
.plan-box .wall { stroke-dasharray: 6400; stroke-dashoffset: 6400; }
.plan-box.is-visible .wall { animation: draw-wall 2.6s cubic-bezier(.4,0,.2,1) .2s forwards; }
@keyframes draw-wall { to { stroke-dashoffset: 0; } }
.plan-box .room-label { opacity: 0; }
.plan-box.is-visible .room-label { animation: label-in .8s ease 1.7s forwards; }
@keyframes label-in { to { opacity: 1; } }

.sec-title {
  position: relative; margin: 64px 0 28px; padding-bottom: 16px;
  color: var(--navy); font-size: clamp(20px, 2.2vw, 25px); font-weight: 600; letter-spacing: 0.12em;
}
.sec-title::before { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--line); }
.sec-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 64px; height: 2px; background: var(--olive); }
.cat-body p.txt { font-size: 15.5px; line-height: 2.15; letter-spacing: 0.06em; color: var(--text-sub); margin: 0 0 1.6em; }

.point-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0; }
@media (max-width: 900px) { .point-list { grid-template-columns: 1fr; } }
.point-card { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 26px 24px; }
.point-card .p-no { font-size: 12px; letter-spacing: 0.24em; color: var(--olive); font-weight: 600; }
.point-card h3 { margin: 12px 0 10px; font-size: 16.5px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.7; color: var(--navy); }
.point-card p { margin: 0; font-size: 15px; line-height: 2; color: var(--text-gray); }

.cta-band {
  margin: 64px 0 0; background: var(--navy); border-radius: 10px; padding: 40px clamp(24px, 4vw, 48px);
  color: var(--bg); text-align: center; position: relative; overflow: hidden;
}
.cta-band::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at top right, rgba(92,102,72,0.5), transparent 60%); }
.cta-band > * { position: relative; }
.cta-band .c-title { font-size: clamp(18px, 2vw, 22px); font-weight: 600; letter-spacing: 0.14em; line-height: 1.9; margin: 0; }
.cta-band p { margin: 14px 0 0; font-size: 15px; letter-spacing: 0.08em; line-height: 2; color: #C6CBDA; }
.cta-band .c-btn {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 26px;
  background: var(--bg); color: var(--navy); font-size: 15px; font-weight: 600; letter-spacing: 0.1em;
  padding: 18px 40px; border-radius: 4px;
}
.cta-band .c-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0,0,0,0.3); }

/* ============================================================
   カタログ一覧ページ
   ============================================================ */
.cl-head { max-width: 1280px; margin: 0 auto; padding: 36px clamp(20px, 4vw, 40px) 0; text-align: center; }
.cl-head .c-en { margin: 0; font-size: 12px; letter-spacing: 0.3em; color: #6B7280; }
.cl-head h1 { margin: 12px 0 0; font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: 0.14em; line-height: 1.8; }
.cl-head p { margin: 20px 0 0; font-size: 15px; line-height: 2.1; letter-spacing: 0.08em; color: var(--text-gray); }

.cl-filters { max-width: 1280px; margin: 36px auto 0; padding: 0 clamp(20px, 4vw, 40px); }
.cl-filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.cl-filter-label { font-size: 12px; letter-spacing: 0.2em; color: var(--muted); margin-right: 6px; white-space: nowrap; }
.cl-filter {
  border: 1px solid var(--line); background: #FFFFFF; color: var(--navy);
  font-family: 'Shippori Mincho', serif; font-size: 14px; letter-spacing: 0.08em; font-weight: 600;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  transition: all .3s ease;
}
.cl-filter:hover { border-color: var(--navy); }
.cl-filter.is-active { background: var(--navy); color: var(--bg); border-color: var(--navy); }

.cl-grid {
  max-width: 1280px; margin: 36px auto 0; padding: 0 clamp(20px, 4vw, 40px) 96px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
@media (max-width: 1024px) { .cl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .cl-grid { grid-template-columns: 1fr; } }
.cl-card {
  background: #FFFFFF; border-radius: 10px; overflow: hidden; color: var(--navy); display: block;
  transition: transform .7s cubic-bezier(.22,1,.36,1), box-shadow .7s cubic-bezier(.22,1,.36,1), opacity .5s ease;
}
.cl-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(30,42,74,0.14); }
.cl-card.is-hidden { display: none; }
.cl-card .cc-img { position: relative; aspect-ratio: 16/9.5; overflow: hidden; display: block; }
.cl-card .cc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(.22,1,.36,1); }
.cl-card:hover .cc-img img { transform: scale(1.05); }
.cl-card .cc-case {
  position: absolute; top: 0; left: 0; background: rgba(20,28,51,0.82); color: var(--bg);
  font-size: 11px; letter-spacing: 0.22em; padding: 7px 14px; border-radius: 0 0 8px 0;
}
.cl-card .cc-body { display: block; padding: 22px 28px 28px; }
.cl-card .cc-title { display: block; font-size: 16px; font-weight: 600; letter-spacing: 0.08em; line-height: 1.75; }
.cl-card .cc-specs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cl-card .cc-specs span {
  font-size: 11.5px; letter-spacing: 0.08em; color: var(--text-gray);
  background: var(--card); border: 1px solid var(--line); border-radius: 4px; padding: 4px 10px;
}
.cl-empty { display: none; text-align: center; padding: 60px 20px; color: var(--muted); font-size: 15px; letter-spacing: .1em; grid-column: 1 / -1; }