/* トップ画像（木・ベージュ・セージグリーン）に合わせたナチュラル配色。
   ロゴのピンク・ラベンダーはアクセントとして少しだけ使う */
:root {
  --ink: #5a4632;
  --text: #5a4632;
  --wood: #c8955a;
  --wood-light: #e9d3b0;
  --wood-dark: #8a6440;
  --sage: #8fa77f;
  --sage-soft: #e3eadb;
  --sage-dark: #6b8560;
  --cream: #fbf6ee;
  --beige: #f3e9d9;
  --pink: #e48aa5;
  --lavender: #9b86c9;
  --radius: 24px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "M PLUS Rounded 1c", "Fredoka", sans-serif;
  color: var(--text);
  background: var(--cream);
  line-height: 1.8;
  overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 6px 28px;
  background: rgba(251, 246, 238, .9);
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 0 var(--wood-light);
}
.site-header .logo img { height: 54px; display: block; transition: transform .3s; }
.site-header .logo:hover img { transform: rotate(-4deg) scale(1.05); }
.site-header nav { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.site-header nav a {
  font-family: "Fredoka", sans-serif; font-weight: 600; letter-spacing: .04em;
  text-decoration: none; color: var(--wood-dark);
  padding: 4px 14px; border-radius: 999px;
  transition: background .2s, color .2s, transform .2s;
}
.site-header nav a:hover { background: var(--sage-soft); color: var(--sage-dark); transform: translateY(-2px); }

/* ---------- Common sections ---------- */
section { padding: 80px 24px; }
.inner { max-width: 1080px; margin: 0 auto; }
.section-title {
  text-align: center; margin: 0 0 44px;
  font-family: "Fredoka", sans-serif; font-size: clamp(32px, 5vw, 46px);
  color: var(--wood-dark); letter-spacing: .1em; line-height: 1.2;
}
.section-title::before {
  content: ""; display: block; width: 34px; height: 34px; margin: 0 auto 8px;
  background: var(--sage);
  -webkit-mask: url("assets/paw.png") center / contain no-repeat;
          mask: url("assets/paw.png") center / contain no-repeat;
}
.section-title small {
  display: block; margin-top: 6px; font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 14px; color: var(--sage-dark); letter-spacing: .15em;
}
.btn {
  display: inline-block; padding: 12px 30px; border-radius: 999px;
  background: var(--sage); color: #fff; font-weight: 800; text-decoration: none;
  box-shadow: 0 5px 0 var(--sage-dark); transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(3px); box-shadow: 0 2px 0 var(--sage-dark); }
.btn.sub { background: var(--wood); box-shadow: 0 5px 0 var(--wood-dark); }
.btn.sub:hover { box-shadow: 0 2px 0 var(--wood-dark); }

/* スクロールで現れる */
.reveal { opacity: 0; transform: translateY(36px); transition: opacity .8s, transform .8s cubic-bezier(.2,1.3,.4,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Footer ---------- */
.site-footer {
  text-align: center; padding: 44px 24px 28px;
  background: var(--wood-dark); color: #f6ead7; font-size: 13px;
  border-radius: 48px 48px 0 0;
}
.site-footer .footer-logo {
  display: inline-block; padding: 10px 24px; background: var(--cream); border-radius: 999px;
}
.site-footer .footer-logo img { height: 56px; display: block; }
.site-footer nav { margin: 20px 0 8px; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.site-footer nav a { text-decoration: none; font-family: "Fredoka", sans-serif; font-weight: 600; }
.site-footer nav a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 640px) {
  .site-header { padding: 4px 14px; }
  .site-header .logo img { height: 42px; }
  .site-header nav a { padding: 2px 7px; font-size: 13px; }
  section { padding: 60px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}