/* そんな日 — 公開ページ共通スタイル
   アプリ本体（index.html）のデザイントークンに合わせたニューモーフィズム。
   アプリ側は明暗両対応だが、公開ページはホワイトモード固定。 */

:root{
  --app-bg:#DCE5E8;
  --app-bg-deep:#CDD9DF;
  --app-bg-light:#E8EEF0;
  --surface:#EEF2F2;
  --surface-highlight:#F7F9F8;
  --surface-sunken:#E1E9EC;

  --text-primary:#3F484D;
  --text-secondary:#4E5A62;
  --text-muted:#58656C;

  --border-soft:rgba(255,255,255,.48);
  --border-hair:rgba(129,145,153,.20);

  --shadow-raised:8px 8px 18px rgba(129,145,153,.22),-8px -8px 18px rgba(255,255,255,.72);
  --shadow-raised-small:4px 4px 10px rgba(129,145,153,.18),-4px -4px 10px rgba(255,255,255,.66);
  --shadow-inset:inset 3px 3px 8px rgba(132,147,154,.17),inset -3px -3px 8px rgba(255,255,255,.72);
  --focus-ring:rgba(96,132,152,.55);

  --accent:#5E7A8A;
  --accent-ink:#3A5060;
  --accent-soft:rgba(94,122,138,.14);

  --radius-card-large:28px;
  --radius-card:22px;
  --radius-button:20px;
  --radius-cell:16px;
  --radius-pill:999px;

  --font:"Zen Kaku Gothic New","Noto Sans JP","Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Meiryo",system-ui,sans-serif;
  --font-display:"Shippori Mincho B1","Noto Serif JP","Yu Mincho","Hiragino Mincho ProN",serif;
  --ease:cubic-bezier(.22,.68,.36,1);
}

*{box-sizing:border-box}

body{
  margin:0;
  padding:0 18px 72px;
  background:
    radial-gradient(120% 70% at 50% 0%, var(--app-bg-light) 0%, var(--app-bg) 46%, var(--app-bg-deep) 100%)
    fixed;
  color:var(--text-primary);
  font-family:var(--font);
  font-size:15px;
  line-height:1.95;
  -webkit-font-smoothing:antialiased;
  text-size-adjust:100%;
}

.page{max-width:680px;margin:0 auto}

/* ---------- ヘッダー ---------- */

.head{padding:56px 4px 30px}

.mark{
  width:66px;height:66px;border-radius:22px;
  background:linear-gradient(145deg, var(--surface-highlight), var(--surface-sunken));
  box-shadow:var(--shadow-raised);
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;
}
.mark span{
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(145deg,#C9D9DC,#A9BEC2);
  box-shadow:inset 2px 2px 5px rgba(255,255,255,.75),inset -2px -2px 5px rgba(120,140,148,.35);
}

.head h1{
  font-family:var(--font-display);
  font-size:31px;font-weight:700;line-height:1.5;
  margin:0 0 6px;letter-spacing:.03em;
}
.head .tagline{
  margin:0;color:var(--text-muted);font-size:14px;letter-spacing:.04em;
}
.head .date{
  margin:10px 0 0;color:var(--text-muted);font-size:12.5px;
}

/* ---------- カード ---------- */

.card{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-card-large);
  box-shadow:var(--shadow-raised);
  padding:32px 30px;
  margin-bottom:22px;
}
@media (max-width:520px){
  .card{padding:26px 21px;border-radius:var(--radius-card)}
  .head{padding:40px 2px 24px}
  .head h1{font-size:26px}
}

.card > :first-child{margin-top:0}
.card > :last-child{margin-bottom:0}

.card h2{
  font-family:var(--font-display);
  font-size:18px;font-weight:700;line-height:1.6;
  margin:34px 0 10px;letter-spacing:.02em;
}
.card h2:first-child{margin-top:0}

.card h3{
  font-size:14.5px;font-weight:700;
  margin:26px 0 6px;color:var(--text-primary);
}

p{margin:0 0 14px;color:var(--text-secondary);font-size:14.5px}
p:last-child{margin-bottom:0}
strong{color:var(--text-primary);font-weight:700}

ul{margin:0 0 14px;padding:0;list-style:none}
li{
  position:relative;padding-left:22px;margin-bottom:9px;
  color:var(--text-secondary);font-size:14.5px;
}
li::before{
  content:"";position:absolute;left:2px;top:.78em;
  width:7px;height:7px;border-radius:50%;
  background:var(--app-bg-deep);
  box-shadow:inset 1px 1px 2px rgba(120,140,148,.5),inset -1px -1px 2px rgba(255,255,255,.85);
}

hr{
  border:0;height:1px;margin:28px 0;
  background:linear-gradient(90deg,transparent,var(--border-hair) 18%,var(--border-hair) 82%,transparent);
}

a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--accent)}
a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px;border-radius:4px}

/* ---------- 連絡先 ---------- */

.mail{
  display:inline-block;
  margin:4px 0 0;padding:13px 22px;
  border-radius:var(--radius-button);
  background:var(--surface-sunken);
  box-shadow:var(--shadow-inset);
  font-size:15px;letter-spacing:.02em;
}
.mail a{text-decoration:none;color:var(--accent-ink);font-weight:500}
.mail a:hover{text-decoration:underline}

/* ---------- ピル型リンク ---------- */

.pills{display:flex;flex-wrap:wrap;gap:12px;margin:26px 0 0;padding:0;list-style:none}
.pills li{padding:0;margin:0}
.pills li::before{display:none}
.pills a{
  display:block;padding:13px 24px;
  border-radius:var(--radius-pill);
  background:var(--surface);
  border:1px solid var(--border-soft);
  box-shadow:var(--shadow-raised-small);
  color:var(--accent-ink);text-decoration:none;
  font-size:14px;font-weight:500;letter-spacing:.03em;
  transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}
.pills a:hover,.pills a:focus-visible{
  box-shadow:var(--shadow-inset);
  transform:translateY(1px);
}

/* ---------- 注記 ---------- */

.notice{
  margin:22px 0 0;padding:18px 20px;
  border-radius:var(--radius-cell);
  background:var(--surface-sunken);
  box-shadow:var(--shadow-inset);
  color:var(--text-muted);font-size:13px;line-height:1.9;
}
.notice p{color:inherit;font-size:inherit;margin:0}

/* ---------- フッター ---------- */

footer{
  margin-top:34px;padding:0 6px;
  color:var(--text-muted);font-size:12.5px;line-height:2.1;
}
footer a{color:var(--text-muted);text-decoration:none}
footer a:hover{text-decoration:underline}
footer .sep{opacity:.5;padding:0 8px}

@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}