:root {
  --works-ink: #07142d;
  --works-blue: #0869ed;
  --works-cyan: #19d8ff;
  --works-paper: #f4f7fb;
  --works-shell: min(1180px, calc(100% - 40px));
}

.works-page .page-hero--works {
  min-height: min(720px, 92svh);
  grid-template-columns: 1fr;
  background:
    radial-gradient(circle at 82% 18%, rgba(25, 216, 255, .32), transparent 26%),
    radial-gradient(circle at 12% 90%, rgba(8, 105, 237, .38), transparent 32%),
    linear-gradient(140deg, #061328, #092656 58%, #075dbd);
}

.works-page .page-hero__copy { width: min(1040px, 100%); }
.works-breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; color: rgba(255,255,255,.72); font-size: .7rem; }
.works-breadcrumb a { text-decoration: underline; text-underline-offset: 3px; }
.works-page .page-hero h1 {
  max-width: 100%;
  white-space: nowrap;
  word-break: keep-all;
  font-size: clamp(1.8rem, 6.2vw, 5.5rem);
}

.works-intro { max-width: 760px; }
.works-section { padding: clamp(76px, 9vw, 132px) 0; }
.works-section--soft { background: #eaf4ff; }
.works-shell { width: var(--works-shell); margin: 0 auto; }
.works-heading { margin-bottom: clamp(30px, 5vw, 56px); }
.works-heading span { color: var(--works-blue); letter-spacing: .15em; font-size: .7rem; font-weight: 900; }
.works-heading h2 {
  margin: 8px 0 0;
  max-width: 100%;
  white-space: nowrap;
  word-break: keep-all;
  font-size: clamp(1.55rem, 4.4vw, 3.7rem);
  line-height: 1.2;
  letter-spacing: -.045em;
}
.works-heading p { max-width: 760px; margin: 18px 0 0; color: #5c6c88; }

.works-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.work-card {
  overflow: hidden;
  color: var(--works-ink);
  background: #fff;
  border: 1px solid rgba(8, 105, 237, .14);
  border-radius: 26px;
  box-shadow: 0 20px 54px rgba(7, 20, 45, .08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.work-card:first-child { grid-column: span 2; }
.work-card:hover { transform: translateY(-5px); box-shadow: 0 26px 68px rgba(7, 20, 45, .14); }
.work-card__image { aspect-ratio: 16 / 9; overflow: hidden; background: #dce6f5; }
.work-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.work-card:hover .work-card__image img { transform: scale(1.025); }
.work-card__body { padding: clamp(22px, 3vw, 34px); }
.work-card__type { color: var(--works-blue); letter-spacing: .12em; font-size: .68rem; font-weight: 900; }
.work-card h2 { margin: 8px 0 10px; white-space: nowrap; font-size: clamp(1.35rem, 2.5vw, 2rem); line-height: 1.25; }
.work-card p { margin: 0; color: #5c6c88; }
.work-card__link { display: inline-flex; margin-top: 20px; padding: 10px 16px; color: #fff; background: var(--works-blue); border-radius: 999px; font-size: .76rem; font-weight: 900; }

.works-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.works-point { padding: 28px; background: #fff; border-radius: 22px; border: 1px solid rgba(8, 105, 237, .14); }
.works-point b { color: var(--works-blue); font-size: .72rem; }
.works-point h3 { margin: 10px 0 8px; white-space: nowrap; font-size: clamp(1.05rem, 2vw, 1.35rem); }
.works-point p { margin: 0; color: #5c6c88; font-size: .9rem; }

.works-faq { display: grid; gap: 14px; }
.works-faq details { padding: 20px 22px; background: #fff; border: 1px solid rgba(8, 105, 237, .14); border-radius: 18px; }
.works-faq summary { cursor: pointer; font-weight: 900; }
.works-faq p { margin: 12px 0 0; color: #5c6c88; }

.works-cta { padding: clamp(70px, 9vw, 112px) 20px; text-align: center; color: #fff; background: var(--works-ink); }
.works-cta h2 { margin: 0; white-space: nowrap; font-size: clamp(1.25rem, 4vw, 3.2rem); }
.works-cta p { max-width: 680px; margin: 18px auto 28px; color: rgba(255,255,255,.72); }
.works-cta a { display: inline-flex; padding: 15px 24px; color: var(--works-ink); background: var(--works-cyan); border-radius: 999px; font-size: .82rem; font-weight: 900; }

.sample-notice {
  position: fixed;
  z-index: 10000;
  left: 50%;
  bottom: 16px;
  width: min(680px, calc(100% - 24px));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  color: #fff;
  background: rgba(7, 20, 45, .94);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
  transform: translateX(-50%);
  font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
  line-height: 1.45;
}
.sample-notice h1 { display: block; margin: 0; color: #fff; font-family: "Noto Sans JP", "Yu Gothic", sans-serif; font-size: .8rem; font-weight: 800; letter-spacing: 0; line-height: 1.45; white-space: nowrap; }
.sample-notice span { display: block; color: rgba(255,255,255,.68); font-size: .66rem; }
.sample-notice__links { display: flex; flex: 0 0 auto; gap: 8px; }
.sample-notice__links a { flex: 0 0 auto; padding: 9px 13px; color: #07142d; background: #19d8ff; border-radius: 999px; text-decoration: none; font-size: .72rem; font-weight: 800; }
.sample-notice__links a:first-child { color: #fff; background: rgba(255,255,255,.13); }

@media (max-width: 760px) {
  .works-grid { grid-template-columns: 1fr; }
  .work-card:first-child { grid-column: auto; }
  .works-points { grid-template-columns: 1fr; }
  .works-page .global-nav { overflow-y: auto; }
  .sample-notice { bottom: 10px; }
}

@media (max-width: 430px) {
  .works-shell { width: min(100% - 28px, 1180px); }
  .works-page .page-hero { padding-inline: 15px; }
  .works-page .page-hero h1 { font-size: clamp(.86rem, 4.1vw, 2rem); }
  .works-heading h2 { font-size: clamp(.95rem, 5vw, 1.8rem); }
  .work-card h2 { font-size: clamp(1.12rem, 5.4vw, 1.45rem); }
  .works-cta h2 { font-size: clamp(.95rem, 4.7vw, 1.45rem); }
  .sample-notice { display: grid; grid-template-columns: 1fr; align-items: flex-start; padding: 10px 12px; }
  .sample-notice h1 { font-size: clamp(.55rem, 2.35vw, .65rem); letter-spacing: -.04em; }
  .sample-notice__links { gap: 4px; }
  .sample-notice__links a { padding: 7px 8px; font-size: .56rem; }
  .sample-notice span { display: block; margin-top: 2px; font-size: .55rem; line-height: 1.35; }
}

@media (prefers-reduced-motion: reduce) {
  .work-card, .work-card__image img { transition: none; }
}