@font-face{
  font-family:"Mochiy Pop One";
  src:url("../fonts/MochiyPopOne-subset.woff") format("woff");
  font-display:swap;
}
:root{
  --cream:#f8f3e9;
  --cream-2:#fdf9f1;
  --ink:#4a3a34;
  --ink-soft:#7a6a62;
  --pink:#ffc9d2;
  --pink-deep:#f59aab;
  --peach:#ffdcc6;
  --mint:#c6ecd9;
  --mint-deep:#7fcfab;
  --butter:#ffebb3;
  --radius:28px;
  --shadow:0 10px 30px rgba(140,100,80,.10), 0 2px 6px rgba(140,100,80,.06);
  --pop:"Mochiy Pop One","Hiragino Maru Gothic ProN","Zen Maru Gothic",sans-serif;
  --body:"Hiragino Maru Gothic ProN","Zen Maru Gothic","M PLUS Rounded 1c","Hiragino Sans","Noto Sans JP","Noto Sans CJK JP","Yu Gothic","Meiryo",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.9;letter-spacing:.03em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
.nw{display:inline-block}
a{color:inherit}
.wrap{width:min(100% - 40px, 1040px);margin-inline:auto}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--pop);font-size:1rem;text-decoration:none;
  padding:.85em 1.6em;border-radius:999px;
  background:var(--ink);color:#fff;
  box-shadow:0 5px 0 #2e2420, 0 10px 20px rgba(74,58,52,.18);
  transition:transform .25s cubic-bezier(.34,1.8,.5,1), box-shadow .25s;
}
.btn:hover,.btn:focus-visible{transform:translateY(-3px) scale(1.04);box-shadow:0 8px 0 #2e2420, 0 14px 24px rgba(74,58,52,.2)}
.btn:active{transform:translateY(3px) scale(.98);box-shadow:0 2px 0 #2e2420}
.btn:focus-visible{outline:3px dashed var(--pink-deep);outline-offset:4px}
.btn-lg{font-size:1.1rem;padding:.8em 2em;white-space:nowrap}
.btn-lg span{display:flex;flex-direction:column;align-items:flex-start;line-height:1.35}
.handle{font-family:var(--body);font-size:.75rem;opacity:.8;letter-spacing:.04em}
.x-logo{width:1.1em;height:1.1em;fill:currentColor;flex:none}

/* ---------- sparkles & dots ---------- */
.spk{position:absolute;width:22px;height:22px;fill:var(--butter);pointer-events:none}
.spk1{top:12%;left:7%;fill:#ffd36e;width:20px;height:20px}
.spk2{top:20%;right:9%;fill:var(--pink-deep);width:16px;height:16px}
.spk3{bottom:14%;left:46%;fill:var(--mint-deep);width:14px;height:14px}
.dots{
  position:absolute;inset:0;pointer-events:none;opacity:.65;
  background-image:
    radial-gradient(circle,var(--pink) 0 5px,transparent 6px),
    radial-gradient(circle,var(--mint) 0 4px,transparent 5px),
    radial-gradient(circle,var(--butter) 0 6px,transparent 7px),
    radial-gradient(circle,var(--peach) 0 4px,transparent 5px);
  background-size:300px 260px,240px 300px,380px 340px,200px 220px;
  background-position:20px 40px,140px 10px,260px 180px,60px 150px;
}

/* ---------- hero ---------- */
.hero{position:relative;padding:48px 0 24px;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 0%, var(--cream-2) 0%, var(--cream) 70%)}
.hero-inner{position:relative;display:flex;flex-direction:column-reverse;align-items:center;gap:8px;text-align:center}
.eyebrow{
  display:inline-block;margin:0 0 6px;padding:.25em 1em;border-radius:999px;
  background:#fff;color:var(--ink-soft);font-size:.85rem;font-weight:700;
  box-shadow:0 2px 0 var(--pink);
}
.title{
  font-family:var(--pop);font-weight:400;margin:.1em 0 .15em;
  font-size:clamp(3.2rem, 15vw, 5.6rem);line-height:1.1;letter-spacing:.04em;color:var(--ink);
  text-shadow:4px 4px 0 var(--pink);
}
.catch{margin:0 0 28px;font-size:1.02rem;color:var(--ink-soft);font-weight:700;line-height:1.9}
.hero-art{position:relative;width:min(78vw,360px);aspect-ratio:1/1;display:grid;place-items:center}
.blob{
  position:absolute;inset:6%;
  background:radial-gradient(circle at 35% 30%, #ffe3dc 0%, var(--pink) 75%);
  border-radius:58% 42% 52% 48% / 50% 56% 44% 50%;
  animation:morph 12s ease-in-out infinite;
}
.hero-art img{position:relative;width:82%;filter:drop-shadow(0 6px 0 rgba(255,255,255,.35))}
.float{animation:float 4.2s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-12px) rotate(1deg)}}
@keyframes morph{
  0%,100%{border-radius:58% 42% 52% 48% / 50% 56% 44% 50%}
  50%{border-radius:46% 54% 44% 56% / 56% 46% 54% 44%}
}

/* ---------- wavy divider ---------- */
.wave-divider{line-height:0;padding:6px 0}
.wave-divider svg{display:block;width:min(100% - 40px, 760px);height:18px;margin:auto}
.wave-divider path{fill:none;stroke:var(--pink);stroke-width:5;stroke-linecap:round}

/* ---------- sections ---------- */
.section{padding:56px 0}
#daily .sec-title{margin-bottom:88px}
.section-tint{background:var(--cream-2);border-radius:48px 48px 48px 48px;margin:0 10px}
.sec-title{text-align:center;margin:0 0 32px;font-family:var(--pop);font-weight:400;font-size:clamp(1.5rem,6vw,2rem);line-height:1.4}
.sec-title span{position:relative;display:inline-block;padding:0 .2em}
.sec-title span::after{
  content:"";position:absolute;left:0;right:0;bottom:.05em;height:.42em;z-index:-1;
  background:var(--butter);border-radius:999px;
}
.sec-title::before,.sec-title::after{
  content:"";display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:middle;margin:0 14px;
  background:var(--pink-deep);box-shadow:-16px 0 0 -2px var(--mint-deep);
}
.sec-title::after{box-shadow:16px 0 0 -2px var(--mint-deep)}
.sec-title{position:relative;isolation:isolate}
.lead{text-align:center;margin:0 auto 32px;max-width:34em;font-weight:700}

/* ---------- profile ---------- */
.profile-card{
  position:relative;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);
  padding:28px 16px 22px;display:grid;gap:20px;max-width:820px;margin:auto;
  border:3px solid #fff;outline:2px dashed var(--pink);outline-offset:-12px;
}
.profile-photo{display:grid;justify-items:center}
.profile-photo img{
  width:170px;padding:16px 18px 6px;background:var(--mint);border-radius:50%;
  aspect-ratio:1/1;object-fit:contain;
}
.photo-name{margin:10px 0 0;font-family:var(--pop);font-size:1.3rem;line-height:1}
.profile-list{margin:0;display:grid;gap:8px}
.row{display:grid;grid-template-columns:6.6em 1fr;align-items:center;gap:12px;padding:9px 14px;border-radius:16px;background:var(--cream-2);line-height:1.7}
.row:nth-child(odd){background:#fff5f2}
dt{font-weight:700;font-size:.78rem;white-space:nowrap;color:#fff;background:var(--pink-deep);border-radius:999px;text-align:center;padding:.15em .5em;line-height:1.7;align-self:center}
.row:nth-child(3n+2) dt{background:var(--mint-deep)}
.row:nth-child(3n) dt{background:#f2b36b}
dd{margin:0;font-weight:500}
.motto{
  margin:4px 0 0;padding:20px 20px 18px;border-radius:22px;background:var(--peach);
  text-align:center;position:relative;font-family:var(--pop);font-size:1.02rem;line-height:1.8;
}
.motto p{margin:0}

.motto-heart{position:absolute;top:-12px;left:50%;width:26px;height:26px;margin-left:-13px;fill:var(--pink-deep)}

/* ---------- about ---------- */
.about-grid{list-style:none;padding:0;margin:0;display:grid;gap:18px}
.about-item{background:#fff;border-radius:var(--radius);padding:26px 22px 22px;box-shadow:var(--shadow);text-align:center;
  transition:transform .3s cubic-bezier(.34,1.6,.5,1)}
.about-item:hover{transform:translateY(-4px) rotate(-.6deg)}
.about-item h3{font-family:var(--pop);font-weight:400;font-size:1.1rem;margin:.6em 0 .4em;line-height:1.5}
.about-item p{margin:0;color:var(--ink-soft);font-size:.95rem}
.icon{width:76px;height:76px;margin:auto;border-radius:50%;display:grid;place-items:center}
.icon svg{width:44px;height:44px;fill:#fff}
.icon .dot{fill:var(--ink)}
.icon .band{fill:rgba(74,58,52,.18)}
.c-pink .icon{background:var(--pink-deep)}
.c-mint .icon{background:var(--mint-deep)}
.c-peach .icon{background:#f6b48a}

/* ---------- daily ---------- */
.daily-card{
  position:relative;max-width:640px;margin:auto;text-align:center;padding:36px 22px 30px;border-radius:40px;
  background:linear-gradient(160deg,#fff 0%,#fff6f2 100%);box-shadow:var(--shadow);
}
.daily-pic{width:96px;margin:-82px auto 10px;filter:drop-shadow(0 4px 0 rgba(255,201,210,.6))}
.daily-text{margin:0 0 26px;font-weight:700}
.tag{margin:18px 0 0;font-family:var(--pop);color:var(--pink-deep);font-size:.95rem}
.spk4{top:18px;left:22px;fill:#ffd36e}
.spk5{bottom:22px;right:26px;fill:var(--mint-deep);width:16px;height:16px}

/* ---------- footer ---------- */
.footer{text-align:center;padding:24px 20px 40px}
.footer-name{margin:0;font-family:var(--pop);font-size:1.4rem}
.footer-motto{margin:4px 0 14px;color:var(--ink-soft);font-size:.9rem}
.copy{margin:0;color:var(--ink-soft)}

/* ---------- larger screens ---------- */
@media (min-width:760px){
  .hero{padding:72px 0 40px}
  .hero-inner{flex-direction:row;justify-content:space-between;text-align:left;gap:40px}
  .hero-text{flex:1}
  .hero-art{width:min(42vw,440px)}
  .catch{font-size:1.15rem}
  .spk3{left:40%}
  .section{padding:80px 0}
  .section-tint{margin:0 24px}
  .profile-card{grid-template-columns:220px 1fr;padding:40px;gap:28px 36px}
  .profile-photo{align-self:start}
  .profile-photo img{width:200px}
  .motto{grid-column:1/-1}
  .about-grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .daily-card{padding:48px 40px 40px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}