:root{
    --bg: #fff8fb;
    --surface: #ffffff;
    --text: #231826;
    --muted: #7a7580;
    --accent-1: #8fb7ff;
    --accent-2: #ffd1e6;
    --accent-3: #b8f0d0;
    --accent-4: #ffd98a;
    --link: #2d5fb0;
    --glow: rgba(143,183,255,0.22);
    --shadow-1: rgba(34,34,34,0.06);
    --radius-lg: 16px;
    --radius-md: 12px;
    --radius-sm: 8px;
    --max-width: 980px;
    --safe-font: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", sans-serif;
    --focus-ring: 4px solid rgba(61,111,191,0.18);
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:var(--safe-font);
    background:
      radial-gradient(1200px 600px at 10% 10%, rgba(255,209,230,0.10), transparent 12%),
      radial-gradient(1000px 450px at 90% 90%, rgba(143,183,255,0.05), transparent 12%),
      var(--bg);
    color:var(--text);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.5;
  }

  .site{max-width:var(--max-width);margin:28px auto;padding:20px}

  .header-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px}
  .header-row h1{
    margin:0;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:12px 18px;
    border-radius:18px;
    font-size:1.6rem;
    font-weight:800;
    background:linear-gradient(90deg, #ffe6f0 0%, #e8f2ff 50%, #edfff6 100%);
    box-shadow:0 8px 30px var(--shadow-1);
    position:relative;
    color:#2a2330;
    transform:translateZ(0);
  }
.header-row h1 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 36px; /* ← 左側に余白を追加 */
  border-radius: 18px;
  font-size: 1.6rem;
  font-weight: 800;
  background: linear-gradient(90deg, #dcffdf 0%, #f6ffef 50%, #e2fff0 100%);
  box-shadow: 0 8px 30px var(--shadow-1);
  position: relative;
  color: #7e4e01;
  transform: translateZ(0);
}
  .header-row p{margin:0;font-size:0.9rem;color:var(--muted)}

  .lead{display:grid;grid-template-columns:1fr 320px;gap:22px;align-items:start}
  @media (max-width:840px){ .lead{grid-template-columns:1fr} }

  .main, .main-content, .aside{
    background:var(--surface);
    border-radius:var(--radius-lg);
    padding:20px;
    box-shadow:0 14px 36px var(--shadow-1);
    border:1px solid rgba(60,60,90,0.03);
  }

  /* h1 / h2 / h3 のかわいい装飾群 */
  h1{font-size:1.6rem;margin:0 0 12px 0}
  h1 .subtitle{
    display:block;
    margin-top:6px;
    font-family:"Segoe Script","Hiragino Maru Gothic Pro","Yu Mincho",cursive;
    font-size:0.92rem;
    color:#463d45;
    opacity:0.95;
  }

  h2{
    font-size:1.05rem;
    margin:0 0 10px 0;
    font-weight:800;
    color:#009229;
    letter-spacing:-0.01em;
  }
  /* ラベンダー系 */
  h2.lavender{
    padding:8px 12px;border-radius:12px;
    background:linear-gradient(90deg, #eadaff, #f3f7ff);
    color:#422c48;box-shadow:0 8px 22px rgba(109,88,138,0.06);
  }
  h2.lavender::after{content:"✦";margin-left:10px;color:#caa6ff;text-shadow:0 6px 14px rgba(202,166,255,0.12);}

  /* ミント系 */
  h2.mint{
    padding:8px 12px;border-radius:12px;
    background:linear-gradient(90deg, #e0ffeb, #eefaff);
    color:#1a3c32;box-shadow:0 8px 22px rgba(60,120,90,0.04);
  }
  h2.mint::before{content:"•";display:inline-block;margin-right:8px;color:#6ee2b6;font-weight:900;}

  /* ピーチ系 */
  h2.peach{
    padding:8px 12px;border-radius:12px;
    background:linear-gradient(90deg, #ffe6ed, #fffcf7);
    color:#503040;box-shadow:0 8px 22px rgba(200,110,140,0.04);
  }
  h2.peach::after{content:"♡";margin-left:10px;color:#ffb6d6;font-size:1rem;}

  h3{
    font-size:0.98rem;
    margin:14px 0 8px 0;
    font-weight:700;
    color:#800071;
    display:flex;align-items:center;gap:10px;
  }
  /* リボン風 */
  h3.ribbon{
    position:relative;padding:6px 10px;border-radius:999px;
    background:linear-gradient(90deg,#ffd7d7,#fff0f7);
    color:#5a2242;font-weight:800;
    box-shadow:0 8px 20px rgba(255,183,210,0.06);
  }
  h3.ribbon::before{
    content:"";
    position:absolute;left:-10px;top:50%;transform:translateY(-50%) rotate(-20deg);
    width:10px;height:26px;background:linear-gradient(180deg,#ffb6d6,#ffa8c4);
    border-radius:4px;
  }

  /* 下線グラデ */
  h3.underline{padding-bottom:6px}
  h3.underline::after{
    content:"";display:block;height:6px;border-radius:6px;margin-top:6px;
    background:linear-gradient(90deg,#d9ffe9,#eff4fe);opacity:0.18;
  }

  /* バッジ左 */
  h3.badge-left::before{
    content:"";width:28px;height:28px;border-radius:999px;
    background:linear-gradient(180deg,#ffeec8,#ffedf5);
    display:inline-block;margin-right:8px;box-shadow:0 8px 18px rgba(255,168,120,0.06);
  }

  .description{margin:0 0 12px 0;color:var(--muted);font-size:0.98rem}
  ul{margin:8px 0 0 18px;padding:0;color:var(--text)}
  li{margin:8px 0}

  .price{
    display:inline-flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;
    background:linear-gradient(180deg,#fff8f9,rgba(184,240,208,0.03));
    border:1px solid rgba(255,162,190,0.14);box-shadow:0 10px 28px rgba(255,183,210,0.06);
    font-weight:900;color:#17324b;margin:10px 0;
  }

  .nav ul{list-style:none;padding:0;margin:10px 0 0 0;display:flex;flex-direction:column;gap:10px}
  .nav a{
    display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--link);
    background:linear-gradient(180deg, rgba(143,183,255,0.03), transparent);
    border:1px solid rgba(55,102,176,0.06);
    transition:transform 200ms cubic-bezier(.2,.9,.2,1), box-shadow 200ms;
  }
  .nav a:hover{ transform:translateY(-4px); box-shadow:0 12px 30px rgba(61,111,191,0.12) }

  .aside p[style]{margin:6px 0}

  .footer{
    display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px;padding:14px;border-radius:14px;
    background:linear-gradient(180deg, rgba(255,209,230,0.03), rgba(143,183,255,0.02));
    border:1px solid rgba(136,153,180,0.03);color:var(--muted);
  }
  .footer div:first-child{font-weight:600;color:#3b3b50}
  @media (max-width:780px){ .footer{flex-direction:column;align-items:flex-start} }

  a:focus, button:focus, input:focus, textarea:focus{outline:none;box-shadow:var(--focus-ring);border-radius:10px}

  .btn{
    display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;
    color:#fff;font-weight:800;text-decoration:none;
    background:linear-gradient(180deg,var(--accent-1),#6ca8ff);
    box-shadow:0 12px 30px rgba(61,111,191,0.18), inset 0 -2px 6px rgba(0,0,0,0.06);
    transition:transform 180ms ease, box-shadow 180ms ease;
  }
  .btn.secondary{ background:linear-gradient(180deg,var(--accent-2),#ffb6d6); color:#2a2030; }
  .btn:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(61,111,191,0.22) }

  .badge{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:999px;
    background:linear-gradient(180deg,var(--accent-2),var(--accent-4));box-shadow:0 8px 20px rgba(255,183,210,0.08);
    font-weight:800;color:#3b2d34}

  img{max-width:100%;height:auto;border-radius:12px;object-fit:cover;display:block;box-shadow:0 8px 24px rgba(34,34,34,0.06)}

  @keyframes floaty {0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)}}
  .floaty{animation:floaty 5s ease-in-out infinite}
  @media (prefers-reduced-motion: reduce){ .nav a, .btn, .floaty { transition:none !important; animation:none !important; transform:none !important; } }

  @media (max-width:840px){
    .lead{grid-template-columns:1fr}
    h2{padding:8px 10px}
    .aside{padding:16px}
    .footer{flex-direction:column;align-items:flex-start;gap:10px}
  }

  /* 微調整 */
  h2::after, h2::before{font-weight:800}