/* ぱんだ動物病院 TOP デザイン案 — 3案共通の土台（色・書体・ヘッダー・ボタン・表・フッター）
   ★これは「案を見比べるためのカンプ」用。採用案を pages/index.html（保存正規形）と
     css/decorations.css へ起こし直す。ここのCSSは本番には持ち込まない。
   ★方針（2026-09-25 ユーザー指示）: 参考 midori-no-mori.jp の構成を借り、イラストは使わない。白ベースですっきり。 */

:root {
  /* ロゴの実測色（PNG gw 版の最多色 rgb(88,136,96)） */
  --c-green: #588860;
  --c-green-deep: #3f6b48;   /* 白文字を載せる面（#588860 だと 4.0:1 で AA に届かない） */
  --c-green-ink: #2f5237;    /* 見出しの濃い緑 */
  --c-sage-50: #f4f7f2;
  --c-sage-100: #e7eee4;
  --c-sage-200: #d3e0cf;
  /* 水彩の丸の差し色（参考サイトの黄と水色を、ロゴの緑に合わせて落とした） */
  --c-wash-leaf: #b9d3b2;
  --c-wash-sun: #efe0ad;
  --c-wash-sky: #c9dfe3;
  --c-ochre: #b98a3e;        /* お灸の色。数字や小さな印だけ */
  /* 地色と文字 */
  --c-base: #ffffff;
  --c-paper: #fbfaf7;
  --c-body: #3a3a36;
  --c-muted: #72746d;
  --c-line: #e3e6df;
  --font-head: 'Zen Maru Gothic', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;
  --font-en: 'Nunito', 'Zen Maru Gothic', sans-serif;
  --w: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--c-base); color: var(--c-body);
  font-family: var(--font-body); font-size: 16px; line-height: 1.95; letter-spacing: .03em;
  font-feature-settings: "palt" 1;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-green-deep); }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; color: var(--c-green-ink); line-height: 1.5; margin: 0; }
.inner { width: min(var(--w), calc(100% - 48px)); margin: 0 auto; position: relative; }
.sec { position: relative; padding: 120px 0; overflow: hidden; }
.sec > .inner { z-index: 1; }

/* ─ ヘッダー ─ */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--c-line); }
.site-header .inner { display: flex; align-items: center; gap: 28px; height: 84px; width: min(1280px, calc(100% - 48px)); }
.site-header .logo img { height: 52px; width: auto; }
.gnav { display: flex; gap: 26px; margin-left: auto; font-family: var(--font-head); font-weight: 700; font-size: 15px; }
.gnav a { color: var(--c-body); text-decoration: none; white-space: nowrap; }
.gnav a:hover { color: var(--c-green); }
.h-tel { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; text-decoration: none; }
.h-tel .num { font-family: var(--font-en); font-weight: 800; font-size: 21px; color: var(--c-green-ink); letter-spacing: .04em; }
.h-tel .num::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -1px; background: var(--c-green); -webkit-mask: var(--ico-tel) center/contain no-repeat; mask: var(--ico-tel) center/contain no-repeat; }
.h-tel .sub { font-size: 11px; color: var(--c-muted); letter-spacing: .08em; }
.menu-btn { display: none; }

/* ─ ボタン ─ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 30px;
  border-radius: 999px; font-family: var(--font-head); font-weight: 700; font-size: 16px; text-decoration: none; letter-spacing: .06em;
  transition: transform .2s, box-shadow .2s, background .2s; }
.btn-primary { background: var(--c-green-deep); color: #fff; box-shadow: 0 6px 16px -8px rgba(47,82,55,.55); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost { background: #fff; color: var(--c-green-deep); border: 1.5px solid var(--c-green); }
.btn-sm { min-height: 44px; padding: 8px 22px; font-size: 14px; }
.btn .arrow { width: 18px; height: 18px; flex: none; background: currentColor; -webkit-mask: var(--ico-arrow) center/contain no-repeat; mask: var(--ico-arrow) center/contain no-repeat; }
.link-more { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-head); font-weight: 700; color: var(--c-green-deep); text-decoration: none; font-size: 15px; }
.link-more::after { content: ""; width: 34px; height: 34px; flex: none; background: var(--ico-arrow-circle) center/34px no-repeat; transition: transform .2s; }
.link-more:hover::after { transform: translateX(4px); }

/* ─ 診療時間の表 ─ */
.hours { width: 100%; border-collapse: collapse; background: #fff; font-size: 15px; text-align: center; }
.hours th, .hours td { padding: 14px 6px; border-bottom: 1px solid var(--c-line); }
.hours thead th { font-family: var(--font-head); font-weight: 700; color: var(--c-green-ink); background: var(--c-sage-50); font-size: 14px; }
.hours tbody th { text-align: left; padding-left: 18px; font-family: var(--font-en); font-weight: 700; white-space: nowrap; color: var(--c-body); }
.hours td { color: var(--c-green); font-size: 18px; }
.hours td.off { color: #b9bcb3; }
.hours-note { font-size: 13px; color: var(--c-muted); margin-top: 12px; }

/* ─ 地図（製品の型 .c-embed / .c-embed-map と同じ形） ─ */
.c-embed-map { position: relative; overflow: hidden; border-radius: 24px; aspect-ratio: 4 / 3; background: var(--c-sage-50); }
.c-embed-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ─ 水彩の丸（.c-shape + .c-blob-N が形・ここは色） ─ */
.wash { position: absolute; z-index: 0; pointer-events: none; filter: blur(.4px); }
.wash-leaf { background: var(--c-wash-leaf); opacity: .42; }
.wash-sun  { background: var(--c-wash-sun);  opacity: .55; }
.wash-sky  { background: var(--c-wash-sky);  opacity: .55; }
.wash-sage { background: var(--c-sage-100);  opacity: 1; }

/* ─ LINE ─ */
.line-box { display: flex; gap: 22px; align-items: center; }
.line-box .qr { width: 132px; flex: none; padding: 10px; background: #fff; border-radius: 14px; border: 1px solid var(--c-line); }
.line-box h3 { font-size: 18px; margin-bottom: 6px; }
.line-box p { font-size: 14px; margin: 0 0 10px; color: var(--c-muted); }
.btn-line { background: #06c755; color: #fff; }

/* ─ フッター ─ */
.site-footer { background: var(--c-sage-50); padding: 72px 0 28px; font-size: 14px; }
.site-footer .cols { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 48px; align-items: start; }
.site-footer .f-logo img { width: 230px; }
.site-footer address { font-style: normal; line-height: 1.9; margin-top: 18px; }
.site-footer .f-tel { font-family: var(--font-en); font-weight: 800; font-size: 24px; color: var(--c-green-ink); text-decoration: none; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; font-family: var(--font-head); font-weight: 700; }
.site-footer ul a { color: var(--c-body); text-decoration: none; }
.site-footer .copy { text-align: center; color: var(--c-muted); font-size: 12px; margin-top: 56px; letter-spacing: .08em; }

/* ─ アイコン（線画の SVG を mask で。色は currentColor） ─ */
:root {
  --ico-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2a1 1 0 0 1 1-.25 11.4 11.4 0 0 0 3.6.57 1 1 0 0 1 1 1V20a1 1 0 0 1-1 1A17 17 0 0 1 3 4a1 1 0 0 1 1-1h3.5a1 1 0 0 1 1 1c0 1.25.2 2.45.57 3.57a1 1 0 0 1-.25 1z'/%3E%3C/svg%3E");
  --ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --ico-arrow-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Ccircle cx='17' cy='17' r='16' fill='%233f6b48'/%3E%3Cpath d='M11 17h12M18 12l5 5-5 5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E");
  --ico-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
  --ico-car: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 16V11l2-5h12l2 5v5z'/%3E%3Ccircle cx='7.5' cy='16.5' r='1.8'/%3E%3Ccircle cx='16.5' cy='16.5' r='1.8'/%3E%3Cpath d='M4 11h16'/%3E%3C/svg%3E");
  --ico-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3C6.5 3 2 6.6 2 11c0 3.9 3.5 7.2 8.3 7.9.3.1.8.2.9.5.1.3.1.7 0 1l-.1.9c0 .3-.2 1 .9.5s6-3.5 8.2-6.1C21.5 14.1 22 12.6 22 11c0-4.4-4.5-8-10-8z'/%3E%3C/svg%3E");
  --ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.ico { display: inline-block; width: 20px; height: 20px; flex: none; background: currentColor; -webkit-mask: var(--i) center/contain no-repeat; mask: var(--i) center/contain no-repeat; }

/* ─ スマホ ─ */
@media (max-width: 1080px) {
  .gnav { display: none; }
  .h-tel { margin-left: auto; }
  .menu-btn { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 48px; height: 48px; border-radius: 50%; background: var(--c-green-deep); padding: 0 14px; }
  .menu-btn span { display: block; height: 2px; background: #fff; border-radius: 2px; }
}
@media (max-width: 720px) {
  body { font-size: 15px; line-height: 1.9; }
  .inner { width: calc(100% - 40px); }
  .sec { padding: 80px 0; }
  .site-header .inner { height: 66px; gap: 12px; width: calc(100% - 28px); }
  .site-header .logo img { height: 38px; }
  .h-tel { display: none; }
  .menu-btn { margin-left: auto; width: 44px; height: 44px; }
  .h-contact { display: none; }
  .site-footer .cols { grid-template-columns: 1fr; gap: 28px; }
  .line-box { flex-direction: column; align-items: flex-start; }
  .hours { font-size: 13px; }
  .hours th, .hours td { padding: 12px 2px; }
  .hours tbody th { padding-left: 8px; font-size: 12px; }
  .hours td { font-size: 15px; }
}