@charset "UTF-8";

/* =========================================================
   竜輝工業 - 資材紹介 (materials.css)
   ========================================================= */

/* ---------- Material cards ---------- */
.mat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
  margin-bottom: 56px;
}
.mat-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }
.mat-card { overflow: hidden; }
.mat-swatch {
  height: 180px;
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: #e3e6ed;
}
.mat-swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.18));
}
/* ---- 写真未設定スロット ----
   フリー素材が用意でき次第、sw-empty を外して
   style="background-image:url('images/○○.jpg')" を指定してください */
.sw-empty {
  background: repeating-linear-gradient(135deg, #eceef3 0 12px, #e3e6ed 12px 24px);
}
.sw-empty::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Crect x='6' y='11' width='36' height='26' rx='3' stroke='%23a8afc0' stroke-width='2'/%3E%3Ccircle cx='17' cy='20' r='3' fill='%23a8afc0'/%3E%3Cpath d='M9 33l10-9 7 6 6-5 7 8' stroke='%23a8afc0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 44px no-repeat;
  opacity: 0.75;
}
.mat-card__body { padding: 26px 26px 30px; }
.mat-card__body h3 { font-size: 1.22rem; margin-bottom: 12px; }
.mat-card__no { color: var(--gold-600); font-family: var(--font-en); margin-right: 4px; }
.mat-card__body p { font-size: 0.9rem; color: var(--muted); margin-bottom: 18px; }
.mat-card__body p strong { color: var(--ink); font-weight: 700; }
.mat-spec { display: flex; flex-wrap: wrap; gap: 8px; }
.mat-spec li {
  font-size: 0.74rem;
  color: var(--blue);
  background: var(--bg-tint);
  border-radius: 999px;
  padding: 5px 13px;
  letter-spacing: 0.04em;
}
@media (max-width: 880px) { .mat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .mat-grid,
  .mat-grid--2 { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

/* ---------- Feature card（ガルバリウム鋼板） ---------- */
.mat-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  margin-bottom: 56px;
}
.mat-feature__swatch {
  min-height: 300px;
  background-size: cover;
  background-position: center;
  background-color: #e3e6ed;
}
.mat-feature__body { padding: clamp(28px, 4vw, 46px); align-self: center; }
.mat-feature__body h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-bottom: 16px; }
.mat-feature__body h3::after { content: ""; display: block; width: 32px; height: 2px; background: var(--gold); margin-top: 14px; }
.mat-feature__body p { font-size: 0.95rem; color: var(--text); line-height: 2; margin-bottom: 22px; }
.mat-feature__body p strong { color: var(--ink); font-weight: 700; border-bottom: 2px solid var(--gold-soft); }
@media (max-width: 780px) {
  .mat-feature { grid-template-columns: 1fr; max-width: 480px; margin-inline: auto; }
  .mat-feature__swatch { min-height: 220px; }
}

/* ---------- 形状バリエーション ---------- */
.mat-shape {
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 48px);
  margin-bottom: 56px;
}
.mat-shape .mat-grid { margin-bottom: 0; }
.mat-shape .mat-card { background: #fff; }
.mat-shape__title {
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.mat-shape__title::before { content: ""; flex-shrink: 0; width: 26px; height: 2px; background: var(--gold); }
.mat-shape__lead {
  font-size: 0.94rem;
  color: var(--text);
  line-height: 2.05;
  margin-bottom: 32px;
}
.mat-shape__lead strong { color: var(--ink); font-weight: 700; }

/* ---------- Color variation ---------- */
.mat-color {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-sm);
}
.section--soft .mat-color { background: #fff; }
.mat-color__title {
  font-size: 1.15rem;
  margin-bottom: 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.mat-color__title::before { content: ""; width: 26px; height: 2px; background: var(--gold); }
.mat-color__list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
}
.mat-color__list li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--text);
  text-align: center;
}
.chip {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: inset 0 -8px 16px rgba(0,0,0,0.12);
}
.mat-color__note { margin-top: 22px; font-size: 0.8rem; color: var(--muted); }
@media (max-width: 680px) { .mat-color__list { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Info box ---------- */
.mat-info__box {
  display: flex;
  align-items: center;
  gap: 28px;
  background: linear-gradient(135deg, var(--bg-tint), #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--shadow-sm);
}
.mat-info__ico { flex-shrink: 0; width: 72px; height: 72px; background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.mat-info__ico svg { width: 42px; height: 42px; }
.mat-info__box h3 { font-size: 1.2rem; margin-bottom: 10px; }
.mat-info__box p { font-size: 0.92rem; color: var(--text); }
@media (max-width: 600px) { .mat-info__box { flex-direction: column; text-align: center; } }