/* ぴかりんパズル — brand styles (per brand.md, app-UI-derived palette) */
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700;900&family=Baloo+2:wght@500;600;700;800&display=swap');

:root {
  /* palette — from brand.md */
  --orange: #F28C33;        /* primary CTA */
  --orange-deep: #CC7326;   /* price emphasis / hover */
  --blue: #7385BF;          /* secondary */
  --link: #4D73D9;
  --yellow-soft: #F7EFC0;
  --yellow: #F5E27A;
  --ink: #262626;           /* soft black text */
  --coral: #D9735C;         /* accent / badge */
  --cream: #FFFDF7;         /* base bg */
  --cream-2: #FFF8E8;       /* alt panel */
  --white: #ffffff;

  /* derived soft tints */
  --orange-soft: #FCE6CF;
  --blue-soft: #E4E8F5;
  --coral-soft: #F7E1DA;
  --mint-soft: #DCF2E9;
  --pink-cheek: #F4A6B8;

  --ink-60: #5b5750;
  --ink-40: #8b867d;

  /* shape */
  --r-sm: 14px;
  --r-md: 22px;
  --r-lg: 34px;
  --r-pill: 9999px;

  /* shadow — soft, warm */
  --sh-sm: 0 4px 14px rgba(120, 92, 40, 0.08);
  --sh-md: 0 12px 30px rgba(120, 92, 40, 0.12);
  --sh-lg: 0 22px 50px rgba(120, 92, 40, 0.16);
  --sh-cta: 0 10px 22px rgba(242, 140, 51, 0.35);
  --sh-cta-hover: 0 14px 28px rgba(242, 140, 51, 0.45);

  --maxw: 1120px;
  --ease: cubic-bezier(.2, .8, .2, 1);

  --font-jp: 'Zen Maru Gothic', system-ui, sans-serif;
  --font-en: 'Baloo 2', 'Zen Maru Gothic', sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-jp);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--orange-deep); }

h1, h2, h3 { line-height: 1.4; margin: 0; font-weight: 900; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 22px;
}

/* eyebrow label */
.eyebrow {
  font-family: var(--font-en);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: 13px;
  color: var(--orange);
  margin: 0 0 12px;
}

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 17px;
  border: none;
  border-radius: var(--r-pill);
  padding: 16px 30px;
  cursor: pointer;
  transition: transform var(--ease) .2s, box-shadow var(--ease) .2s, background var(--ease) .2s, color var(--ease) .2s;
  text-decoration: none;
  line-height: 1;
}
.btn .arrow { transition: transform var(--ease) .2s; }
.btn:hover .arrow { transform: translateX(4px); }

.btn-primary {
  background: var(--orange);
  color: #fff;
  box-shadow: var(--sh-cta);
}
.btn-primary:hover {
  background: #f59a4c;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--sh-cta-hover);
}
.btn-primary:active { transform: translateY(0); }

.btn-ghost {
  background: #fff;
  color: var(--ink);
  box-shadow: var(--sh-sm);
}
.btn-ghost:hover {
  color: var(--orange-deep);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}

.btn-lg { font-size: 18px; padding: 18px 36px; }

/* fill-in placeholder marker — visually obvious "要記入" slot */
.fillin {
  display: inline-block;
  background: repeating-linear-gradient(-45deg, #fff3d6, #fff3d6 8px, #ffe9b8 8px, #ffe9b8 16px);
  color: #9a6a16;
  border: 1.5px dashed #e0a93f;
  border-radius: 8px;
  padding: 1px 9px;
  font-size: .92em;
  font-weight: 700;
  white-space: normal;
}

/* section scaffolding */
section { position: relative; }
.section-pad { padding: clamp(56px, 9vw, 104px) 0; }
.section-head { text-align: center; max-width: 660px; margin: 0 auto clamp(32px, 5vw, 56px); }
.section-head h2 { font-size: clamp(28px, 4.4vw, 44px); }
.section-head p { color: var(--ink-60); font-size: 17px; margin: 16px 0 0; }
.nowrap-head { white-space: nowrap; }
@media (max-width: 560px) { .nowrap-head { white-space: normal; } }