/* ============================================================
   ペット火葬・市川  共通スタイル / デザイントークン
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;600;700;800&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&family=Zen+Old+Mincho:wght@400;600;700&display=swap');

:root{
  /* purples */
  --p-900:#5a4d78;
  --p-800:#6a5b8c;
  --p-700:#7c6da0;
  --p-600:#8b7caa;
  --p-500:#9a8cb8;
  --p-400:#b1a4c8;
  --p-300:#c8bedb;
  --p-200:#ddd5ea;
  --p-100:#ece7f3;
  --p-50:#f4f1f8;
  /* neutrals (warm, low-chroma) */
  --cream:#f6f2ec;
  --cream-2:#faf7f2;
  --paper:#ffffff;
  --line:#e7e0ee;
  --ink:#4c4658;
  --ink-soft:#766f84;
  --ink-faint:#9a93a6;
  /* accent */
  --gold:#b79b6c;
  --green:#7f9a72;
  --shadow:0 10px 30px rgba(90,77,120,.10);
  --shadow-sm:0 4px 14px rgba(90,77,120,.08);
  --radius:16px;
  --mincho:'Shippori Mincho B1',serif;
  --omincho:'Zen Old Mincho',serif;
  --gothic:'Zen Kaku Gothic New',sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--gothic);
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  line-height:1.7;
  letter-spacing:.01em;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}

/* ---------- soft dawn-sky hero backdrop ---------- */
.sky{
  background:
    radial-gradient(120% 90% at 78% 18%, rgba(255,228,210,.55) 0%, rgba(255,228,210,0) 42%),
    radial-gradient(140% 120% at 12% 6%, rgba(214,205,235,.55) 0%, rgba(214,205,235,0) 50%),
    linear-gradient(180deg,#efe9f3 0%,#f4eee9 45%,#faf6f0 100%);
  position:relative;overflow:hidden;
}
.sky::after{ /* faint rainbow arc */
  content:"";position:absolute;right:-6%;top:-30%;width:62%;aspect-ratio:1/1;border-radius:50%;
  background:conic-gradient(from 200deg at 50% 50%,
    rgba(170,150,210,.0) 0deg,
    rgba(196,162,196,.18) 18deg,
    rgba(170,180,214,.20) 30deg,
    rgba(168,200,196,.16) 42deg,
    rgba(214,196,160,.14) 54deg,
    rgba(216,170,170,.12) 66deg,
    rgba(170,150,210,0) 84deg);
  -webkit-mask:radial-gradient(closest-side,transparent 66%,#000 67%,#000 78%,transparent 79%);
          mask:radial-gradient(closest-side,transparent 66%,#000 67%,#000 78%,transparent 79%);
  pointer-events:none;
}

/* ---------- image placeholder ---------- */
.ph{
  position:relative;background:
    repeating-linear-gradient(135deg,#efeaf2 0 10px,#e7e1ee 10px 20px);
  color:#8e85a0;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:11px;letter-spacing:.02em;
  border-radius:12px;overflow:hidden;
}
.ph.photo{background:
   radial-gradient(80% 70% at 70% 25%,rgba(255,231,214,.6),rgba(255,231,214,0) 55%),
   radial-gradient(90% 80% at 20% 20%,rgba(210,200,232,.6),rgba(210,200,232,0) 60%),
   repeating-linear-gradient(135deg,#ece7f1 0 12px,#e4def0 12px 24px);}
.ph span{background:rgba(255,255,255,.7);padding:3px 8px;border-radius:20px;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  background:linear-gradient(180deg,#9c8eb9 0%,#8979a6 100%);
  color:#fff;border:none;border-radius:12px;font-family:var(--gothic);font-weight:700;
  box-shadow:0 6px 16px rgba(120,104,156,.35),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
  letter-spacing:.04em;
}
.btn:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:0 10px 22px rgba(120,104,156,.4);}
.btn:active{transform:translateY(0);}
.btn .ico,.btn .ic,.btn svg{width:1.2em;height:1.2em;flex:none;}

/* paw bullet */
.paw{color:var(--p-500);}

/* small flourish */
.flourish{color:var(--p-400);letter-spacing:.3em;}

/* generic card */
.card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow-sm);}

/* fade-in on load — base state is VISIBLE; animation plays FROM hidden when .in is added */
@media (prefers-reduced-motion:no-preference){
  .reveal.in{animation:riseIn .7s ease both;}
  @keyframes riseIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
}

/* floral corner (soft css suggestion) */
.floral{position:absolute;bottom:0;width:200px;height:150px;pointer-events:none;opacity:.9;
  background:
   radial-gradient(closest-side at 30% 80%,rgba(170,158,205,.55),transparent 70%),
   radial-gradient(closest-side at 55% 92%,rgba(150,178,150,.45),transparent 70%),
   radial-gradient(closest-side at 18% 95%,rgba(220,212,236,.6),transparent 70%);
  filter:blur(.3px);}
.floral.l{left:0;}
.floral.r{right:0;transform:scaleX(-1);}

/* form error + carousel dots (shared) */
.err{border-color:#cf8a8a !important;background:#fcf4f4 !important;}
.cdot{width:8px;height:8px;border-radius:50%;border:none;background:var(--p-200);padding:0;cursor:pointer;transition:.2s;}
.cdot.on{background:var(--p-500);width:22px;border-radius:5px;}