/* 提案の案一覧ページ。どの業種でも使えるよう、色は控えめな無彩色寄りにする */
:root {
  --bg: #F2F0EB;
  --ink: #23221F;
  --ink-2: #6A675F;
  --line: rgba(35, 34, 31, .14);
  --accent: #8A6A45;
  --f: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f); font-size: 15px; line-height: 1.9; letter-spacing: .04em; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, p, figure { margin: 0; }

.p-head { max-width: 1120px; margin: 0 auto; padding: 72px 24px 48px; display: grid; gap: 10px; }
.p-to { font-size: 13px; color: var(--ink-2); letter-spacing: .1em; }
.p-head h1 { font-size: clamp(24px, 3vw, 34px); font-weight: 600; letter-spacing: .08em; line-height: 1.5; }
.p-lead { max-width: 40em; color: var(--ink-2); }

.p-list { max-width: 1120px; margin: 0 auto; padding: 0 24px 80px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 32px 28px; }
.p-card { display: grid; align-content: start; gap: 16px; }
.p-card figure { overflow: hidden; border: 1px solid var(--line); background: #fff; }
.p-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform .5s ease; }
.p-card:hover img { transform: scale(1.02); }
.p-body { display: grid; gap: 6px; }
.p-label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--accent); }
.p-badge { padding: 1px 10px; border: 1px solid var(--accent); font-size: 11.5px; letter-spacing: .1em; }
.p-body h2 { font-size: 19px; font-weight: 600; letter-spacing: .06em; line-height: 1.6; }
.p-desc { color: var(--ink-2); font-size: 14px; }
.p-scope { font-size: 12.5px; color: var(--ink-2); padding-top: 6px; border-top: 1px solid var(--line); }

.p-foot { max-width: 1120px; margin: 0 auto; padding: 32px 24px 64px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); display: grid; gap: 6px; }