/* 静的ページ(記事・規約)共通スタイル。配色・質感はアプリ側(src/index.css)と揃える */
:root {
  --bg: #e9f0fa;
  --surface: #ffffff;
  --text: #1c2130;
  --text-sub: #667085;
  --border: #e3e6ef;
  --accent: #3aa6d9;
  --accent-strong: #1f7fae;
  --error: #e5484d;
  --shadow: 0 2px 8px rgba(45, 55, 100, 0.08);
  --rounded: 'Zen Kaku Gothic New', 'Hiragino Sans', system-ui, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family:
    system-ui,
    -apple-system,
    'Segoe UI',
    'Hiragino Sans',
    'Noto Sans JP',
    'Yu Gothic UI',
    sans-serif;
  line-height: 1.8;
}

html::before,
body::before,
body::after {
  content: '';
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

body::before {
  width: 60vmax;
  height: 60vmax;
  left: -15vmax;
  top: -20vmax;
  background: radial-gradient(circle, rgba(96, 170, 240, 0.3), transparent 65%);
  animation: drift-a 37s ease-in-out infinite;
}

body::after {
  width: 55vmax;
  height: 55vmax;
  right: -18vmax;
  bottom: -22vmax;
  background: radial-gradient(circle, rgba(105, 200, 233, 0.26), transparent 65%);
  animation: drift-b 47s ease-in-out infinite;
}

html::before {
  width: 45vmax;
  height: 45vmax;
  left: 30vmax;
  bottom: -25vmax;
  background: radial-gradient(circle, rgba(110, 215, 205, 0.16), transparent 65%);
  animation: drift-c 53s ease-in-out infinite;
}

@keyframes drift-a {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  23% {
    transform: translate(4vmax, 2vmax) scale(1.08);
  }
  47% {
    transform: translate(1vmax, 6vmax) scale(0.95);
  }
  71% {
    transform: translate(6vmax, 3vmax) scale(1.12);
  }
}

@keyframes drift-b {
  0%,
  100% {
    transform: translate(0, 0) scale(1.08);
  }
  29% {
    transform: translate(-5vmax, -2vmax) scale(0.94);
  }
  55% {
    transform: translate(-2vmax, -7vmax) scale(1.1);
  }
  78% {
    transform: translate(-6vmax, -4vmax) scale(1);
  }
}

@keyframes drift-c {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  31% {
    transform: translate(5vmax, -3vmax) scale(1.1);
  }
  63% {
    transform: translate(-4vmax, -1vmax) scale(0.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  html::before,
  body::before,
  body::after {
    animation: none;
  }
}

.watermarks {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.watermarks img {
  position: absolute;
  transform: rotate(var(--rot));
  animation: float-mark 16s ease-in-out infinite alternate;
}

.wm-a {
  --rot: -10deg;
  left: 62%;
  top: 18%;
  width: 190px;
  opacity: 0.1;
  animation-duration: 15s;
}

.wm-b {
  --rot: 12deg;
  left: 12%;
  top: 48%;
  width: 140px;
  opacity: 0.09;
  animation-duration: 18s;
  animation-delay: -7s;
}

.wm-c {
  --rot: -6deg;
  left: 70%;
  top: 62%;
  width: 110px;
  opacity: 0.11;
  animation-duration: 20s;
  animation-delay: -13s;
}

@keyframes float-mark {
  from {
    transform: translateY(8px) rotate(var(--rot));
  }
  to {
    transform: translateY(-22px) rotate(calc(var(--rot) + 9deg));
  }
}

@media (prefers-reduced-motion: reduce) {
  .watermarks img {
    animation: none;
  }
}

.site-header {
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(30, 50, 80, 0.06);
}

.site-header nav {
  max-width: 720px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.site-header .brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rounded);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text);
  text-decoration: none;
  margin-right: auto;
}

.typo .t {
  color: var(--accent);
}

.typo {
  padding-bottom: 0.12em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 6' preserveAspectRatio='none'%3E%3Cpath d='M0 3 Q2 0.8 4 3 T8 3 T12 3 T16 3 T20 3 T24 3 T28 3 T32 3 T36 3 T40 3' fill='none' stroke='%23e5484d' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.375em;
}

.fist {
  margin-left: 0.1em;
  font-size: 0.9em;
}

.site-header a {
  color: var(--text-sub);
  text-decoration: none;
  font-size: 0.95rem;
}

.site-header a:hover {
  color: var(--accent-strong);
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 20px 64px;
}

article {
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 36px 40px;
}

h1 {
  font-family: var(--rounded);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.5;
}

article h2 {
  font-family: var(--rounded);
  font-weight: 700;
  font-size: 1.2rem;
  margin-top: 2.5em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--border);
}

article p {
  margin: 1em 0;
}

a {
  color: var(--accent-strong);
}

.article-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.article-list a {
  display: block;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 22px 26px;
  text-decoration: none;
  color: var(--text);
  transition: box-shadow 0.15s;
}

.article-list a:hover {
  box-shadow: 0 4px 14px rgba(30, 50, 80, 0.14);
}

.article-list .title {
  font-family: var(--rounded);
  font-weight: 700;
  color: var(--accent-strong);
}

.article-list .desc {
  margin: 6px 0 0;
  color: var(--text-sub);
  font-size: 0.95rem;
}

.meta {
  color: var(--text-sub);
  font-size: 0.9rem;
}

.site-footer {
  color: var(--text-sub);
  font-size: 0.85rem;
}

.site-footer .inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.site-footer a {
  color: var(--text-sub);
}

@media (max-width: 480px) {
  article {
    padding: 24px 20px;
  }
}