.hero { position: relative; padding: clamp(52px, 8vw, 104px) 0 65px; background: linear-gradient(120deg, #fff8f1 30%, #fdeeda 100%); }
.hero::after { position: absolute; z-index: 0; top: -120px; right: -100px; width: min(45vw, 600px); aspect-ratio: 1; content: ""; border: 1px solid rgba(240,100,110,.16); border-radius: 48% 52% 45% 55%; transform: rotate(14deg); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); align-items: center; gap: clamp(35px, 6vw, 90px); }
.hero h1 { max-width: 590px; margin: 0; font-size: clamp(47px, 6.5vw, 78px); font-weight: 900; letter-spacing: -.09em; line-height: 1.06; }
.hero h1 em { color: var(--primary-dark); font-style: normal; }
.hero-copy { max-width: 495px; margin: 24px 0; color: var(--muted); font-size: 19px; letter-spacing: -.035em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-doodle { display: inline-flex; align-items: center; gap: 6px; margin-top: 34px; color: var(--primary-dark); font-family: var(--font-deco); font-size: 18px; }
.home-map-preview { position: relative; min-height: 405px; overflow: hidden; border: 8px solid var(--paper); border-radius: 46px; background: #e5f0df; box-shadow: var(--shadow); }
.home-map-preview .map-canvas { position: absolute; inset: 0; }
.map-preview-overlay { position: absolute; z-index: 600; right: 18px; bottom: 17px; max-width: 230px; padding: 13px 15px; border-radius: 14px; background: rgba(255,253,249,.94); box-shadow: var(--shadow-soft); font-size: 13px; font-weight: 700; }
.map-preview-overlay strong { display: block; color: var(--primary-dark); font-size: 15px; }
.value-strip { padding: 26px 0; border-block: 1px solid var(--line); background: var(--paper); }
.value-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; width: var(--wide); margin: auto; }
.value-item { display: flex; align-items: center; gap: 14px; font-size: 17px; font-weight: 750; letter-spacing: -.035em; }
.value-icon { display: grid; flex: 0 0 auto; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: #fff1dc; color: var(--orange); }
.value-item:nth-child(2) .value-icon { background: #fce4ea; color: var(--pink); }.value-item:nth-child(3) .value-icon { background: #eaf2e9; color: var(--green); }
.facility-mini-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.facility-mini { display: grid; gap: 12px; padding: 21px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); transition: transform .18s, box-shadow .18s; }
.facility-mini:hover { box-shadow: var(--shadow-soft); transform: translateY(-3px); }
.facility-mini h3 { margin: 0; font-size: 20px; letter-spacing: -.045em; }.facility-mini p { margin: 0; color: var(--muted); font-size: 14px; }
.mini-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.animal-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.animal-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper); box-shadow: var(--shadow-soft); cursor: pointer; }
.animal-image { aspect-ratio: 1 / .9; overflow: hidden; background: var(--soft); }.animal-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }.animal-card:hover .animal-image img { transform: scale(1.04); }
.animal-content { padding: 15px; }.animal-content h3 { margin: 7px 0 2px; font-size: 21px; letter-spacing: -.055em; }.animal-content p { margin: 0; color: var(--muted); font-size: 14px; }
.activity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.activity-card { padding: 23px; }.activity-card time { color: var(--primary-dark); font-size: 13px; font-weight: 800; }.activity-card h3 { margin: 10px 0 8px; font-size: 20px; letter-spacing: -.04em; }.activity-card p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); font-size: 15px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.two-col-story { display: grid; grid-template-columns: .84fr 1.16fr; gap: clamp(28px, 5vw, 80px); align-items: center; }.story-art { min-height: 320px; border-radius: var(--radius-lg); background: linear-gradient(135deg, #ffdb90, #f6a5b5); }.story-copy h2 { margin: 0; font-size: clamp(31px,4vw,49px); font-weight: 900; letter-spacing: -.07em; line-height: 1.16; }.story-copy p { color: var(--muted); }
.join-panel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; padding: 40px; border-radius: var(--radius-lg); background: var(--cta); color: #fff; }.join-panel h2 { margin: 0; font-size: clamp(29px,4vw,46px); letter-spacing: -.07em; line-height: 1.16; }.join-panel p { margin: 11px 0 0; color: #f8ddce; }.join-panel .button { background: var(--dog); color: var(--cta); }

.page-hero { padding: 69px 0 45px; background: #fff4eb; }.page-hero h1 { margin: 0; font-size: clamp(42px, 6vw, 66px); font-weight: 900; letter-spacing: -.085em; line-height: 1.08; }.page-hero p { max-width: 630px; margin: 17px 0 0; color: var(--muted); }
.warning-banner { display: flex; gap: 12px; align-items: flex-start; margin: 24px auto 0; padding: 16px 18px; border: 1px solid #f2bb6e; border-radius: 16px; background: #fff0d3; color: #70451b; font-size: 15px; }.warning-banner strong { display: block; }.warning-banner p { margin: 2px 0 0; color: inherit; font-size: 14px; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; height: min(680px, calc(100vh - 180px)); min-height: 525px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); box-shadow: var(--shadow-soft); }.map-canvas { min-height: 100%; background: #e5f0df; }.map-side { overflow: auto; border-left: 1px solid var(--line); background: var(--paper); }.map-side-head { position: sticky; z-index: 2; top: 0; padding: 20px; border-bottom: 1px solid var(--line); background: rgba(255,253,249,.96); }.map-side-head h2 { margin: 0 0 10px; font-size: 20px; letter-spacing: -.04em; }.facility-list { display: grid; gap: 0; }.facility-list-item { display: grid; gap: 8px; padding: 18px 20px; border: 0; border-bottom: 1px solid var(--line); background: transparent; cursor: pointer; text-align: left; }.facility-list-item:hover, .facility-list-item.active { background: #fff6ed; }.facility-list-item h3 { margin: 0; font-size: 18px; letter-spacing: -.04em; }.facility-list-item p { margin: 0; color: var(--muted); font-size: 14px; }.facility-detail { padding: 22px; }.facility-detail h2 { margin: 9px 0; font-size: 26px; letter-spacing: -.06em; }.facility-detail dl { display: grid; grid-template-columns: 70px 1fr; gap: 11px 12px; margin: 21px 0; font-size: 14px; }.facility-detail dt { color: var(--muted); }.facility-detail dd { margin: 0; }.facility-detail .button { width: 100%; }
.animal-board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }.animal-flip { min-height: 350px; perspective: 1100px; }.animal-flip-inner { position: relative; width: 100%; height: 100%; min-height: 350px; transition: transform .6s; transform-style: preserve-3d; }.animal-flip.flipped .animal-flip-inner { transform: rotateY(180deg); }.animal-flip-front, .animal-flip-back { position: absolute; inset: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); box-shadow: var(--shadow-soft); backface-visibility: hidden; }.animal-flip-back { display: flex; flex-direction: column; padding: 25px; transform: rotateY(180deg); }.animal-flip-back h3 { margin: 8px 0; font-size: 26px; letter-spacing: -.06em; }.animal-flip-back p { margin: 0; color: var(--muted); font-size: 15px; }.animal-flip-back .button { margin-top: auto; }.flip-hint { display: block; padding: 11px 14px; color: var(--muted); font-size: 13px; text-align: center; }.animal-photo { height: 255px; }.animal-photo img { width: 100%; height: 100%; object-fit: cover; }
.timeline { position: relative; display: grid; gap: 20px; max-width: 900px; margin: auto; }.timeline::before { position: absolute; top: 8px; bottom: 8px; left: 19px; width: 2px; content: ""; background: var(--line); }.timeline-item { position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 18px; }.timeline-dot { z-index: 1; display: grid; width: 40px; height: 40px; place-items: center; border: 5px solid var(--bg); border-radius: 50%; background: var(--primary); }.timeline-body { padding: 22px; }.timeline-body time { color: var(--primary-dark); font-size: 13px; font-weight: 800; }.timeline-body h2 { margin: 7px 0; font-size: 24px; letter-spacing: -.055em; }.timeline-body p { margin: 0; color: var(--muted); }
.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.comparison-card { padding: 32px; }.comparison-card h2 { margin: 0; font-size: 30px; letter-spacing: -.06em; }.comparison-card p { color: var(--muted); }.comparison-card.accent { border-color: #f4bdc7; background: #fff1f4; }.value-points { display: grid; gap: 10px; padding: 0; list-style: none; }.value-points li { display: flex; gap: 10px; align-items: center; font-weight: 650; }.value-points svg { color: var(--primary-dark); }
.join-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }.join-card { display: flex; min-height: 265px; flex-direction: column; padding: 28px; }.join-card h2 { margin: 17px 0 9px; font-size: 27px; letter-spacing: -.06em; }.join-card p { margin: 0; color: var(--muted); }.join-card .button { margin-top: auto; align-self: flex-start; }.recruit-banner { display: grid; grid-template-columns: 1fr auto; gap: 25px; align-items: center; padding: 34px; border: 2px solid var(--ink); border-radius: var(--radius-lg); background: var(--dog); }.recruit-banner h2 { margin: 0; font-size: 32px; letter-spacing: -.06em; }.recruit-banner p { margin: 8px 0 0; }

@media (max-width: 950px) {
  .hero-grid { grid-template-columns: 1fr; }.home-map-preview { min-height: 350px; }.facility-mini-grid, .animal-strip { grid-template-columns: repeat(2, 1fr); }.activity-grid { grid-template-columns: 1fr; }.map-layout { grid-template-columns: 1fr; height: auto; }.map-canvas { min-height: 430px; }.map-side { max-height: 420px; border-top: 1px solid var(--line); border-left: 0; }.animal-board { grid-template-columns: repeat(2, 1fr); }.join-grid { grid-template-columns: 1fr; }.two-col-story { grid-template-columns: 1fr; }.comparison { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .hero { padding-top: 50px; }.hero h1 { font-size: 46px; }.hero-copy { font-size: 17px; }.home-map-preview { min-height: 280px; border-width: 5px; border-radius: 30px; }.value-list { grid-template-columns: 1fr; gap: 17px; }.facility-mini-grid, .animal-strip, .animal-board { grid-template-columns: 1fr; }.animal-flip, .animal-flip-inner { min-height: 330px; }.page-hero { padding: 50px 0 36px; }.map-canvas { min-height: 345px; }.warning-banner { margin-top: 18px; }.join-panel, .recruit-banner { grid-template-columns: 1fr; padding: 27px; }.join-panel .button, .recruit-banner .button { justify-self: start; }.section-more { font-size: 14px; }
}