:root {
  /* Pink */
  --pink-50:#FFF0F6; --pink-100:#FFD9E8; --pink-300:#FF9BC3; --pink-500:#FF6FA9; --pink-700:#D65087;
  /* Light Blue */
  --blue-50:#F0F9FF; --blue-100:#D9F0FF; --blue-300:#9CD9FF; --blue-500:#6FC1FF; --blue-700:#3E99D9;
  /* Lavender */
  --lav-50:#F8F5FF; --lav-100:#EFE6FF; --lav-300:#D9C7FF; --lav-500:#C2A7FF; --lav-700:#A07DE6;

  /* Neutrals */
  --ink:#222222; --muted:#6B7280; --line:#E5E7EB; --surface:#FFFFFF; --surface-2:#FAFAFC;

  /* Brand/semantic */
  --primary: var(--pink-500);
  --primary-weak: var(--pink-100);
  --secondary: var(--blue-500);
  --secondary-weak: var(--blue-100);
  --accent: var(--lav-500);
  --accent-weak: var(--lav-100);

  --text: var(--ink);
  --link: var(--blue-700);

  /* States */
  --success:#22C55E; --warning:#F59E0B; --error:#EF4444; --info:#3B82F6;

  /* Gradients */
  --grad-hero: linear-gradient(135deg, var(--pink-100), var(--lav-100));
  --grad-cta: linear-gradient(135deg, var(--pink-500), var(--lav-500));
  --grad-card: linear-gradient(180deg, var(--surface), var(--lav-50));

  /* Radius/Shadows */
  --r-lg: 16px; --r-xl: 24px; --shadow-sm: 0 2px 6px rgba(0,0,0,.06); --shadow-md: 0 8px 24px rgba(0,0,0,.08);
}

/* ダークモード（任意）： */
@media (prefers-color-scheme: dark) {
  :root {
    --surface:#111318; --surface-2:#171A20; --text:#F5F7FA; --muted:#A3AAB5; --line:#2A2F37;
    --link:#93C5FD; /* 淡い水色リンク */
    --grad-hero: linear-gradient(135deg, #251726, #1C2230);
  }
}


/* ボタン */
.button {
  display:inline-block; padding:10px 18px; border-radius:999px;
  font-weight:600; text-decoration:none; transition:.2s ease; box-shadow: var(--shadow-sm);
  border:1px solid transparent;
}
.button--primary { background: var(--primary); color:#fff; border-color: var(--pink-700); }
.button--primary:hover { filter: brightness(0.96); box-shadow: var(--shadow-md); }
.button--secondary { background: var(--secondary); color:#092135; border-color: var(--blue-700); }
.button--secondary:hover { filter: brightness(0.97); }
.button--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.button--ghost:hover { background: var(--pink-50); border-color: var(--pink-300); }

/* バッジ（ステータス） */
.status-badge {
  display:inline-block; padding:4px 10px; border-radius: 999px; font-size:12px; font-weight:600; border:1px solid transparent;
}
.status-badge.is-available { background: var(--pink-50); color: var(--pink-700); border-color: var(--pink-300); }
.status-badge.is-hold      { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-300); }
.status-badge.is-closed    { background: var(--lav-50);  color: var(--lav-700);  border-color: var(--lav-300); }

/* 見出し/リンク/ボーダー */
.section-title { color: var(--text); border-left: 6px solid var(--primary); padding-left:10px; }
a { color: var(--link); }
a:hover { opacity:.9; }

/* テーブル/線 */
hr, .divider { border: 0; border-top:1px solid var(--line); }



/* body */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.5;
    color: var(--text);
}

/* header */
.site-header {
    display: block;
    box-sizing: border-box;
    margin: 0;;
    padding: 0;
}

.hero {
    background-color: var(--pink-50);
    display: block;
    box-sizing: border-box;
    height: 400px;
    width: 100%;
    margin: 0;
    padding: 128px 0;
    position: relative;
}

.wave {
  position: absolute;
  height: 70px;
  width: 100%;
  background: var(--pink-50);
  bottom: 0;
}

.wave::before, .wave::after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
}

.wave::before {
  width: 55%;
  height: 109%;
  background-color: #fff;
  right: -1.5%;
  top: 60%;
}
.wave::after {
  width: 55%;
  height: 100%;
  background-color: var(--pink-50);
  left: -1.5%;
  top: 40%;
}

.hero-inner {
    background: url(https://jump.reality-web.jp/wp-content/themes/jump/img/cat-01.jpg) no-repeat;
    background-size: 300px;
    background-position: right;
    width: 1000px;
    margin: 0 auto;
    position: absolute;
    left: 25%;
    top:-200px;
}

.hero-text {
    display: block;
    box-sizing: border-box;
    padding: 16px 24px;
    width: 1000px;
    margin: 0 auto;
}

.site-nav {
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.section {
    display: block;
    box-sizing: border-box;
    width: 1000px;
    margin: 32px auto;
    padding: 0;
}

.about {
    margin: 64px auto 32px auto;
}

footer {
    text-align: center;
    margin: 16px;
}