/* Web制作 ページ固有スタイル */

/* Hero watermark */
.hero::before { content: 'WEB'; position: absolute; right: -30px; top: 50%; transform: translateY(-50%); font-size: clamp(200px, 28vw, 360px); font-weight: 900; color: rgba(255,255,255,.025); letter-spacing: -.04em; line-height: 1; pointer-events: none; white-space: nowrap; }


/* Challenge Cards */
.challenge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ch { padding: 28px 32px; border: 1px solid var(--border-light); border-radius: 6px; display: flex; align-items: baseline; gap: 16px; }
.ch-icon { font-size: 20px; color: var(--border); flex-shrink: 0; line-height: 1.4; }
.ch p { font-size: 14px; color: var(--text-sub); font-weight: 400; line-height: 1.8; }

/* Design Scope */
.ds-grid { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border-light); border-radius: 6px; overflow: hidden; }
.ds-item { display: grid; grid-template-columns: 180px 1fr; align-items: baseline; padding: 24px 32px; border-bottom: 1px solid var(--border-light); }
.ds-item:last-child { border-bottom: none; }
.ds-label { font-size: 13px; font-weight: 700; color: var(--black); display: flex; align-items: center; gap: 8px; }
.ds-label::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--black); flex-shrink: 0; }
.ds-desc { font-size: 14px; color: var(--text-sub); font-weight: 300; line-height: 1.8; }

/* Deliverables */
.dlv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dlv { background: var(--bg); border: 1px solid var(--border-light); border-radius: 6px; padding: 32px 28px; position: relative; overflow: hidden; }
.dlv::before { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 3px; background: var(--black); }
.dlv h3 { font-size: 14px; font-weight: 700; color: var(--black); margin-bottom: 8px; line-height: 1.5; }
.dlv p { font-size: 13px; color: var(--text-muted); line-height: 1.8; font-weight: 300; }

/* After Launch List */
.after-list { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-top: 40px; }
.after-list li { font-size: 14px; color: var(--text-sub); line-height: 1.9; font-weight: 300; padding-left: 20px; position: relative; }
.after-list li::before { content: '\2014'; position: absolute; left: 0; color: var(--text-pale); }

/* Responsive */
@media (max-width: 760px) {
  .challenge-grid { grid-template-columns: 1fr; }
  .ds-item { grid-template-columns: 1fr; gap: 8px; }
  .dlv-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .ch { padding: 20px 24px; }
  .dlv { padding: 24px 20px; }
}