:root {
  --color-action: #a94f3a;
  --color-action-hover: #8e4230;
  --color-on-action: #ffffff;
  --color-accent: #4f6672;
  --color-text: #4a4541;
  --color-text-muted: #66615c;
  --color-surface: #ffffff;
  --color-page: #f6f1eb;
  --color-line: #e5ddd3;
  --color-stale: #98651a;
  --tag-nurse: #f6e1db;
  --tag-rehab: #e4e9ec;
  --tag-escort: #dfe7ef;
  --tag-respite: #ebe4ef;
  --tag-life: #f5ecd6;
  --tag-taxi: #ece7e0;
  --color-beige-deep: #f2eae2;
  --color-bluegray: #e4e9ec;
  --color-mark: #e5d8c9;
  --color-dot: #ffffff;
  --color-night: #1d2752;
  --panel-inset: 10px;
  --panel-radius: 2rem;
  --blob-shape-1: 46% 54% 52% 48% / 52% 46% 54% 48%;
  --blob-shape-2: 58% 42% 46% 54% / 44% 56% 44% 56%;
  --blob-shape-3: 40% 60% 56% 44% / 56% 42% 58% 44%;
  --dot-shape-1: 42% 46% 44% 48% / 46% 42% 48% 44%;
  --dot-shape-2: 48% 40% 46% 42% / 42% 48% 40% 46%;
  --dot-shape-3: 38% 48% 42% 46% / 44% 40% 48% 42%;
  --motif-cloud-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='30' cy='58' r='17'/%3E%3Ccircle cx='52' cy='45' r='23'/%3E%3Ccircle cx='74' cy='58' r='15'/%3E%3Crect x='13' y='56' width='76' height='19' rx='9.5'/%3E%3C/svg%3E");
  --motif-cloud-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='26' cy='60' r='13'/%3E%3Ccircle cx='44' cy='48' r='19'/%3E%3Ccircle cx='66' cy='50' r='17'/%3E%3Ccircle cx='82' cy='62' r='11'/%3E%3Crect x='13' y='58' width='80' height='15' rx='7.5'/%3E%3C/svg%3E");
  --motif-leaf-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 6C80 26 84 62 50 94C16 62 20 26 50 6Z'/%3E%3C/svg%3E");
  --motif-leaf-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M24 80C18 46 42 18 86 14C84 56 62 80 24 80Z'/%3E%3Cpath d='M24 80L12 92' stroke='black' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E");
  --motif-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect x='37' y='8' width='26' height='84' rx='13'/%3E%3Crect x='8' y='37' width='84' height='26' rx='13'/%3E%3C/svg%3E");
  --motif-spark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 4C53 38 62 47 96 50C62 53 53 62 50 96C47 62 38 53 4 50C38 47 47 38 50 4Z'/%3E%3C/svg%3E");
  --blob-period: 24s;
  --blob-period-small: 16s;
  --blob-cover: 140%;
  --ease-pop: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --dot-pop-duration: 0.5s;
  --dot-out-duration: 0.2s;
  --line-reveal-duration: 1.5s;
  --line-reveal-stagger: 0.1s;
  --radius-s: 8px;
  --radius-m: 14px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --hero-height: 480px;
  --search-hero-height: 240px;
  --searchbar-overlap: 48px; /* 検索バーをヒーローのイラスト下端に重ねる量 */
  /* 画面の高さから見出し分を引き、最初の画面の下端に検索バーの頭が残る高さにする */
  --top-hero-art-height: max(270px, calc(100svh - 454px));
  --top-hero-copy-padding: var(--space-9);
  --top-searchbar-overlap: var(--searchbar-overlap);
  /* dod.camp に倣い、トップのイラストは本文の幅を越えて画面いっぱいに広げる（research/dod.camp/mix-plan.md） */
  --top-hero-art-max: 1392px;
  --top-hero-art-gutter: var(--space-6);
  --top-hero-art-position: center 38%;
  --scroll-cue-period: 1.6s;
  --top-section-space: 72px;
  --leading-prose: 1.8;
  --tracking-prose: 0.05em;
  --tracking-body: 0.05em;
  --weight-heading: 600;
  --hero-slide-interval: 6s;
  --hero-slide-fade: 1.6s;
  --hero-slide-zoom: 1.15;
  --top-hero-title-size: clamp(3rem, 6.4vw, 5.75rem);
  --sidebar-width: 272px;
  --row-thumb: 168px;
  --row-thumb-sm: 88px;
  --row-specs: 15rem;
  --detail-aside: 20rem;
  --sheet-max-height: 85svh;
  --z-filter-bar: 6;
  --z-sheet: 20;
  --color-backdrop: rgba(74, 69, 65, 0.45);
  --search-hero-art-position: right 40%;
  --font-body: "DM Sans", "Noto Sans JP", system-ui, sans-serif;
  /* 見出し・ロゴ・ヒーローは手書きに近い教科書体。Klee One は 400 と 600 しかない */
  --font-display: "Klee One", "Noto Sans JP", system-ui, sans-serif;
  /* about */
  --about-slant: 7%;
  --about-veil: rgba(255, 255, 255, 0.88);
  --about-page: var(--color-page);
  --about-dot: rgba(74, 69, 65, 0.24);
  --about-scene-a: var(--color-page);
  --about-scene-b: var(--color-bluegray);
  --about-blob-size: min(44vw, 74svh);
  --about-full-pop-size: calc(var(--about-blob-size) * 0.85);
  --about-copy-width: 36rem;
  --about-copy-inline: clamp(2rem, 4.5vw, 4.5rem);
  --about-gutter: clamp(1.25rem, 7vw, 8rem);
  --about-art-width: 58%;
  --about-copy-gap: clamp(0.75rem, 1.6vh, 1rem);
  --about-block-gap: clamp(1.5rem, 4vh, 2.75rem);
  --about-copy-pad: clamp(4.5rem, 11vh, 7.5rem);
  --about-copy-bottom: clamp(3rem, 9vh, 5rem);
  --about-bar-clearance: 4.5rem;
  --about-title-size: clamp(1.7rem, 3.4vw, 4rem);
  --about-lead-size: clamp(1rem, 1.35vw, 1.25rem);
  --about-list-size: clamp(0.9375rem, 1.05vw, 1rem);
  --about-radius: 1.25rem;
  --about-shadow: 0 1.2rem 3rem rgba(74, 69, 65, 0.16);
  --about-mobile-art-height: 32svh;
  --about-mobile-art-height-dense: 18svh;
  --about-mobile-bar-clearance: 3.75rem;
  --about-mobile-dot-clearance: 5rem;
  --about-mobile-title-size: 1.55rem;
  --about-mobile-body-size: 0.8125rem;
  --about-mobile-note-size: 0.75rem;
  --lp-icon-size: 1.5rem;
  --lp-scroll-cue-height: 3rem;
  --lp-town-focus-x: 0.5;
  --lp-town-focus-y: 0.5;
  --lp-town-focus-x-narrow: 0.42;
  --lp-town-overscan: 1.05;
  --lp-town-start: 1.2s;
  --lp-town-spread: 3.4s;
  --lp-town-fade: 0.7s;
  --lp-town-night-opacity: 0.35;
  --lp-town-night-duration: 4.6s;
  --lp-town-snow-fall: 14s;
  --lp-town-snow-sway: 18px;
  --lp-town-ink: var(--color-page);
  --lp-town-ink-shadow: 0 1px 12px color-mix(in srgb, var(--color-night) 55%, transparent);
  --lp-town-scrim: linear-gradient(110deg, color-mix(in srgb, var(--color-night) 45%, transparent), transparent 55%);
  --lp-town-night-gradient: linear-gradient(180deg, var(--color-night), transparent 62%);
  --lp-tile-pad: var(--space-3);
  --lp-tile-radius: var(--radius-m);
  --lp-diagram-gap: var(--space-2);
  --lp-screen-reader-size: 1px;
  --lp-step-number-size: 1.25rem;
  --about-full-copy-width: 42rem;
  /* LP 2枚目: 困りごとの場面（深い青） */
  --lp-pain-bg: #1c3664; /* 深い青 */
  --lp-pain-text: #ffffff;
  --lp-pain-text-muted: rgba(255, 255, 255, 0.8);
  --lp-pain-card: rgba(255, 255, 255, 0.08);
  --lp-pain-line: rgba(255, 255, 255, 0.22);
  --lp-pain-marquee: rgba(255, 255, 255, 0.13);
  --lp-pain-accent: #f2c46d; /* 1枚目の窓の灯りの色に寄せる */
  --lp-pain-marquee-size: 5rem;
  --lp-pain-marquee-period: 48s;
  --lp-pain-marquee-gap: 4rem;
  --lp-pain-row-gap: 1.25rem;
  --lp-pain-figure-height: 78%;
}

@media (max-width: 640px) {
  :root {
    /* スマホは縦長に切り出して最初の画面をイラストで埋め、検索バーは頭だけ見せる */
    --top-hero-art-height: max(220px, calc(100svh - 362px));
    --top-hero-art-gutter: var(--space-2);
    --top-hero-art-position: 58% 60%;
    --top-searchbar-overlap: var(--space-8);
    --top-section-space: var(--space-10);
    /* 「在宅ケアを」5字を375幅の1行に収める（左右の余白 16px×2 を引いた幅） */
    --top-hero-title-size: 12.5vw;
    --panel-inset: 6px;
    --panel-radius: 1.25rem;
    --lp-pain-marquee-size: 2.5rem;
    --lp-pain-marquee-gap: 2rem;
    --lp-pain-row-gap: 0.5rem;
  }
}