/* 悠の仕事用サイト */
:root {
  /* 作品の絵（画面の図）の色。案ごとに skin で上書きする */
  --ui-card: var(--dg-surface);
  --ui-soft: var(--dg-surface-2);
  --ui-line: var(--dg-border);
  --ui-strong: var(--dg-text-muted);
  --ui-accent: var(--dg-primary);
  --ui-accent2: var(--dg-success);
  --ui-on: var(--dg-on-primary);
  /* 札の点（LIVE・DEMO） */
  --live-dot: var(--dg-success);
  --demo-dot: var(--dg-warning);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--dg-bg);
  color: var(--dg-text);
  font-family: var(--dg-font-sans);
  font-size: var(--dg-text-base);
  line-height: var(--dg-line-height);
  letter-spacing: var(--dg-letter-spacing, 0);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-family: var(--dg-font-heading); line-height: 1.35; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--dg-focus); outline-offset: 2px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }

/* ── 上の帯 ── */
.top { position: sticky; top: 0; z-index: 20; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.brand { display: flex; align-items: center; min-height: var(--dg-tap-min); }
.mark { display: grid; place-items: center; width: 38px; height: 38px; font-size: 18px; font-weight: 700; flex: none; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a { display: inline-flex; align-items: center; min-height: var(--dg-tap-min); padding: 0 12px; font-size: 15px; }
.nav-cta { font-weight: 600; }
@media (max-width: 719px) {
  .nav a:not(.nav-cta) { display: none; }
}

/* ── はじめの面 ── */
.hero { padding: 36px 0 48px; }
.hero .wrap { display: grid; gap: 36px; }
@media (min-width: 880px) {
  .hero { padding: 64px 0 72px; }
  .hero .wrap { grid-template-columns: 1.1fr 1fr; align-items: center; gap: 64px; }
}
.eyebrow { font-size: 14px; font-weight: 600; margin-bottom: 14px; }
.hero h1 { font-size: 44px; line-height: 1.2; letter-spacing: 0.02em; }
.hero h1 small { margin-left: 12px; font-size: 16px; font-weight: 600; letter-spacing: 0.08em; color: var(--dg-text-muted); }
.lead { margin-top: 18px; max-width: 32em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--dg-tap-min); padding: 0 22px;
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  border: 0; cursor: pointer; white-space: nowrap;
  transition: transform var(--dg-motion-fast) var(--dg-ease), background-color var(--dg-motion-fast) var(--dg-ease), box-shadow var(--dg-motion-fast) var(--dg-ease);
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--dg-primary); color: var(--dg-on-primary); }

.mosaic { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 520px; width: 100%; justify-self: center; }
.mosaic .tile { margin: 0; overflow: hidden; }
.mosaic .tile img { width: 100%; height: 100%; object-fit: cover; }
.mosaic .tall { grid-row: span 2; }
.mosaic .sq { aspect-ratio: 1; }
.float-chip {
  position: absolute; left: -12px; bottom: 28px;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; font-size: 12px; font-weight: 700; line-height: 1.3; letter-spacing: 0.04em;
}
.float-chip .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live-dot); flex: none; }
.float-chip .chip-name {
  margin-left: 2px; padding-left: 10px;
  border-left: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  font-size: 14px; font-weight: 600; letter-spacing: 0;
}
@media (max-width: 719px) { .float-chip { left: 8px; bottom: 16px; } }

/* ── 区切り ── */
.section { padding: 56px 0; }
@media (min-width: 720px) { .section { padding: 72px 0; } }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 32px; margin-bottom: 28px; }
.section-head h2 { font-size: 28px; }
.section-head p { color: var(--dg-text-muted); max-width: 34em; }

/* ── 作品 ── */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.filters button {
  font: inherit; font-size: 14px; font-weight: 600; line-height: 1.2;
  min-height: 40px; padding: 0 16px; border: 0; cursor: pointer;
  transition: background-color var(--dg-motion-fast) var(--dg-ease), color var(--dg-motion-fast) var(--dg-ease);
}
.works { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.work { display: flex; flex-direction: column; overflow: hidden; transition: transform var(--dg-motion-std) var(--dg-ease), box-shadow var(--dg-motion-std) var(--dg-ease); }
.work[hidden] { display: none; }
.thumb { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--thumb-bg); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

/* 作品の絵：画面の図（文字や数字は入れない） */
.thumb .ui { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: none; }
.u-card { fill: var(--ui-card); filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--dg-text) 10%, transparent)); }
.u-soft { fill: var(--ui-soft); }
.u-line { fill: var(--ui-line); }
.u-strong { fill: var(--ui-strong); }
.u-accent { fill: var(--ui-accent); }
.u-accent2 { fill: var(--ui-accent2); }
.u-on { stroke: var(--ui-on); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.u-on-fill { fill: var(--ui-on); }

.badge {
  position: absolute; top: 12px; left: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: 0.04em;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--badge-dot, var(--dg-text-muted)); }
.badge.live { --badge-dot: var(--live-dot); }
.badge.demo { --badge-dot: var(--demo-dot); }
.work-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.work h3 { font-size: 18px; }
.work p { font-size: 15px; color: var(--dg-text-muted); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; }
.tags li { font-size: 12px; line-height: 1.5; padding: 3px 10px; }

/* ── できること：記号を左、文を右に。3列×2段 ── */
.services { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.service { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto 1fr; column-gap: 16px; padding: 22px; }
.service .ico { grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; }
.service .ico svg { width: 24px; height: 24px; }
.service h3 { font-size: 17px; align-self: center; }
.service p { margin-top: 4px; font-size: 14px; color: var(--dg-text-muted); }

/* ── 進め方 ── */
.steps { display: grid; gap: 16px; }
@media (min-width: 880px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { position: relative; padding: 22px; }
.step .num { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 14px; font-size: 15px; font-weight: 700; }
.step h3 { font-size: 17px; }
.step p { margin-top: 6px; font-size: 14px; color: var(--dg-text-muted); }

/* ── ご相談 ── */
.contact-card { display: grid; gap: 20px; padding: 28px; align-items: center; }
@media (min-width: 880px) { .contact-card { grid-template-columns: 1fr auto; padding: 40px 48px; } }
.contact-card h2 { font-size: 28px; margin-bottom: 8px; }
.contact-card p { color: var(--dg-text-muted); }


/* ── 下 ── */
.foot { padding: 32px 0 48px; font-size: 13px; color: var(--dg-text-muted); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 4px 24px; }

:root {
  --accent-teal: var(--dg-focus);      /* ティール #12a39a */
  --accent-yellow: var(--dg-warning);  /* 黄 #f5c451 */
  --thumb-bg: linear-gradient(135deg, var(--dg-primary-soft), color-mix(in srgb, var(--dg-primary) 7%, var(--dg-bg)));
  --edge-light: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --ui-card: var(--dg-surface);
  --ui-soft: color-mix(in srgb, var(--dg-primary) 10%, white);
  --ui-line: color-mix(in srgb, var(--dg-primary) 16%, white);
  --ui-strong: color-mix(in srgb, var(--dg-primary) 45%, white);
  --ui-accent: var(--dg-primary);
  --ui-accent2: var(--accent-teal);
  --live-dot: var(--accent-teal);
  --demo-dot: var(--accent-yellow);
}

/* 背景の光（ゆっくり流れる） */
body::before,
body::after {
  content: ""; position: fixed; z-index: -1; width: 70vmax; height: 70vmax;
  border-radius: 50%; filter: blur(60px); opacity: 0.55; pointer-events: none;
}
body::before {
  top: -30vmax; left: -25vmax;
  background: radial-gradient(circle, #d7f1ee 0%, rgba(215, 241, 238, 0) 65%);
  animation: drift 24s var(--dg-ease) infinite alternate;
}
body::after {
  bottom: -35vmax; right: -30vmax;
  background: radial-gradient(circle, #e4ebf8 0%, rgba(228, 235, 248, 0) 65%);
  animation: drift 30s var(--dg-ease) infinite alternate-reverse;
}
@keyframes drift { to { transform: translate(8vmax, 6vmax) scale(1.08); } }
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; }
  .work, .btn { transition: none; }
}

/* すりガラスの面 */
.work, .service, .step, .contact-card, .mosaic .tile, .float-chip,
.btn-secondary, .filters button[aria-pressed="false"] {
  background: var(--dg-glass);
  -webkit-backdrop-filter: var(--dg-blur);
  backdrop-filter: var(--dg-blur);
  border: 1px solid var(--dg-glass-edge);
  box-shadow: var(--dg-shadow-1), var(--edge-light);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .work, .service, .step, .contact-card, .mosaic .tile, .float-chip,
  .btn-secondary, .filters button[aria-pressed="false"] { background: var(--dg-surface); }
}

/* 上の帯：地の色を 70% の透明にしてぼかす */
.top {
  background: color-mix(in srgb, var(--dg-bg) 70%, transparent);
  -webkit-backdrop-filter: var(--dg-blur);
  backdrop-filter: var(--dg-blur);
  border-bottom: 1px solid color-mix(in srgb, white 70%, transparent);
}
.mark { background: var(--dg-primary); color: var(--dg-on-primary); border-radius: 50%; box-shadow: var(--dg-shadow-1); }
.nav a { border-radius: var(--dg-radius-pill); color: var(--dg-primary); }
.nav a:not(.nav-cta):hover { background: color-mix(in srgb, white 60%, transparent); }
.nav-cta { margin-left: 6px; background: var(--dg-primary); color: var(--dg-on-primary) !important; padding: 0 18px !important; box-shadow: var(--dg-shadow-1); }

/* はじめの面 */
.eyebrow { color: var(--dg-primary); }
.eyebrow::before {
  content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px;
  border-radius: 50%; background: var(--accent-teal); vertical-align: 2px;
}
.hero h1 { color: var(--dg-primary); }
.btn { border-radius: var(--dg-radius-pill); }
.btn-primary { box-shadow: var(--dg-shadow-1); }
.btn-secondary { color: var(--dg-primary); }
.btn:hover { transform: translateY(-2px); }
.btn-primary:hover { box-shadow: var(--dg-shadow-2); }

.mosaic .tile { padding: 6px; border-radius: var(--dg-radius-m); }
.mosaic .tile img { border-radius: 16px; }
.float-chip { border-radius: var(--dg-radius-pill); color: var(--dg-primary); box-shadow: var(--dg-shadow-2), var(--edge-light); }

/* 区切り */
.section-head h2 { color: var(--dg-primary); }

/* 作品 */
.filters button { border-radius: var(--dg-radius-pill); color: var(--dg-primary); }
.filters button[aria-pressed="true"] { background: var(--dg-primary); color: var(--dg-on-primary); border: 1px solid var(--dg-primary); box-shadow: var(--dg-shadow-1); }
.work { border-radius: var(--dg-radius-m); }
.work .thumb { margin: 8px 8px 0; border-radius: 16px; }
.work:hover { transform: translateY(-4px); box-shadow: var(--dg-shadow-2), var(--edge-light); }
.badge { border-radius: var(--dg-radius-pill); background: color-mix(in srgb, white 88%, transparent); color: var(--dg-primary); box-shadow: var(--dg-shadow-1); }
.work h3 { color: var(--dg-primary); }
.tags li { border-radius: var(--dg-radius-pill); background: color-mix(in srgb, var(--dg-primary) 6%, transparent); color: var(--dg-primary); }

/* できること */
.service { border-radius: var(--dg-radius-m); }
.service .ico { border-radius: 50%; background: var(--dg-primary-soft); color: var(--dg-primary); }
.service h3 { color: var(--dg-primary); }

/* 進め方：番号の丸と、カードの間をつなぐ線 */
.step { border-radius: var(--dg-radius-m); }
.step .num { border-radius: 50%; background: var(--dg-primary); color: var(--dg-on-primary); box-shadow: var(--dg-shadow-1); }
.step h3 { color: var(--dg-primary); }
@media (min-width: 880px) {
  .step:not(:last-child)::after {
    content: ""; position: absolute; top: 39px; right: -17px; width: 18px; height: 2px;
    border-radius: 2px; background: var(--accent-teal); opacity: 0.6;
  }
}

/* ご相談 */
.contact-card { border-radius: var(--dg-radius-l); }
.contact-card h2 { color: var(--dg-primary); }

/* ── 本体で足したもの ── */
.float-chip { margin: 0; }
.thumb .pos-left { object-position: 20% 50%; }
.work { position: relative; }
.work-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.work-link:focus-visible { outline: none; }
.work:has(.work-link:focus-visible) { outline: 2px solid var(--dg-focus); outline-offset: 3px; }
.open { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 13px; font-weight: 700; color: var(--dg-primary); }
.open svg { width: 15px; height: 15px; }
.foot p:last-child { flex-basis: 100%; }
/* 公開中の作品は、1段まるごとの横長のカードに（残りが列の数でそろう） */
.work.featured { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .work.featured { flex-direction: row; }
  .work.featured .thumb { flex: 0 0 42%; aspect-ratio: auto; min-height: 300px; margin: 8px 0 8px 8px; }
  .work.featured .work-body { justify-content: center; padding: 28px 32px; }
  .work.featured h3 { font-size: 22px; }
  .work.featured .tags { margin-top: 8px; }
}

/* 名前の文字を大きく（PC） */
@media (min-width: 880px) { .hero h1 { font-size: 60px; } }
/* アプリの画面は上を合わせて切る */
.thumb .pos-top { object-position: 50% 0; }