:root {
    --color-main:          #5A3838;
    --color-main-dark:     #3f2929;
    --color-accent:        #C9923F;
    --color-accent-light:  #e7c27a;

    --color-bg:            #FCFAF6;
    --color-surface:       #ffffff;
    --color-bg-soft:       #faf6ef;
    --color-bg-section:    #F2EBDD;
    --color-bg-cta:        #C9923F;

    --color-border:        #e6d8c6;
    --color-border-strong: #d1b78f;

    --color-text:          #2C2017;
    --color-text-muted:    #8B7F70;
    --color-text-body: #6B5D4F;
    --color-text-light:    #ffffff;

    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    --container-max: 1160px;
    --container-pc:  28px;
    --container-sp:  20px;

    --section-y-pc: 88px;
    --section-y-sp: 56px;

    --gap-sm: 16px;
    --gap-md: 24px;
    --gap-lg: 40px;
  }/* 症状・部位から探す（site/symptoms/）。文字・余白は docs/design-rules.md に従う。見出し「こんな症状はありませんか？」はPC44px/SP30pxの例外（2026-10-13承認）。 */
body {font-family:'Noto Sans JP',sans-serif;font-size:17px;line-height:1.8;color:var(--color-text);background:var(--color-bg)}
h1,h2,h3 {color:var(--color-main);font-family:'Noto Serif JP',serif;font-weight:500}
button,input {font:inherit;color:inherit}button,a,input {-webkit-tap-highlight-color:transparent}button {cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible {outline:2px solid var(--color-main);outline-offset:4px}
[hidden],.js-only {display:none!important}.has-js .js-only {display:block!important}
.skip-link {position:fixed;top:0;left:var(--gap-sm);z-index:1000;transform:translateY(-110%);padding:var(--gap-sm);background:var(--color-surface)}.skip-link:focus {transform:none}
.body-section {padding-top:var(--gap-md);padding-bottom:var(--gap-lg)}
.finder-heading {display:flex;align-items:flex-start;gap:var(--gap-sm)}
.finder-number {font-family:'Lora',serif;font-size:30px;line-height:1.6;color:var(--color-accent)}
.finder-heading p {margin-top:calc(var(--gap-sm)/4);color:var(--color-text-body)}
.animal-maps {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-lg);margin-top:var(--gap-md)}
.animal-name {display:flex;justify-content:center;gap:calc(var(--gap-sm)/2);align-items:baseline;font-size:20px}.animal-name span {font-family:'Lora',serif;font-size:11px;color:var(--color-text-body);letter-spacing:.15em}
.body-map {position:relative;isolation:isolate;width:100%;aspect-ratio:1.3;max-width:36rem;margin-inline:auto}
.map-halo {position:absolute;inset:19% 12% 7%;border-radius:50%;background:var(--color-bg-section);z-index:-1}
.animal-image {position:absolute;width:76%;height:auto;left:12%;bottom:3%;pointer-events:none}
.part-label {position:absolute;top:var(--label-y);min-height:48px;min-width:72px;padding:calc(var(--gap-sm)/2) calc(var(--gap-sm)*.75);display:flex;align-items:center;justify-content:center;border:1px solid var(--color-border);border-radius:100vmax;background:var(--color-surface);color:var(--color-main);z-index:2;white-space:nowrap;line-height:1.6;letter-spacing:.06em}
.part-label--left {left:var(--label-inset,0%)}.part-label--right {right:var(--label-inset,0%)}.part-label:hover,.part-label[aria-current='true'] {background:var(--color-main);border-color:var(--color-main);color:var(--color-surface)}
.map-lines {position:absolute;inset:0;pointer-events:none;z-index:1}.map-line {position:absolute;height:1px;background:var(--color-border-strong);transform-origin:0 50%}.map-dot {position:absolute;width:5px;height:5px;border:1px solid var(--color-surface);border-radius:50%;background:var(--color-main);transform:translate(-50%,-50%)}
.shared-note {text-align:center;color:var(--color-text-body);margin-top:calc(var(--gap-sm)/2)}
.has-js .animal-switch {display:none!important}
.symptom-section {background:var(--color-bg-section);position:relative;padding-block:var(--gap-lg)}
.symptom-bottom-grid {display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:calc(var(--gap-lg)*2);align-items:center}
.symptom-list {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:calc(var(--gap-sm)/2);list-style:none;padding:0;margin:var(--gap-md) 0 0}.symptom-list li {min-width:0}
.symptom-list a {display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:calc(var(--gap-lg) + var(--gap-sm)/2);padding:calc(var(--gap-sm)/2) calc(var(--gap-sm)*.75);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);color:var(--color-main);line-height:1.6}
.symptom-list a[aria-current='true'] {background:var(--color-main);border-color:var(--color-main);color:var(--color-surface)}
.keyword-area {padding-left:var(--gap-lg);border-left:1px solid var(--color-border-strong)}.keyword-area h2 {margin-block:calc(var(--gap-sm)/2) var(--gap-md)}
#symptom-search label {display:block;margin-bottom:calc(var(--gap-sm)/2)}.search-field {display:flex;min-height:56px;background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-lg)}
.search-field input {width:100%;min-width:0;border:0;background:transparent;padding:calc(var(--gap-sm)*.75);border-radius:var(--radius-lg)}.search-field button {flex:0 0 56px;display:grid;place-items:center;border:0;background:var(--color-main);color:var(--color-surface);border-radius:0 var(--radius-lg) var(--radius-lg) 0}
.search-icon {display:block;position:relative;width:17px;height:17px;border:1.5px solid currentColor;border-radius:50%;margin-right:4px}.search-icon:after {content:'';position:absolute;width:8px;height:1.5px;left:85%;top:85%;background:currentColor;transform:rotate(45deg);transform-origin:left}
.search-hint {margin-top:var(--gap-sm);color:var(--color-text-body)}
.results-section {background:var(--color-bg)}#results,#body-title {scroll-margin-top:calc(96px + var(--gap-md))}.results-head {display:flex;align-items:end;justify-content:space-between;gap:var(--gap-sm)}.results-head h2 {margin-top:calc(var(--gap-sm)/2)}#result-count {display:grid;place-items:center;flex-shrink:0;min-width:calc(var(--gap-lg) + var(--gap-md));min-height:calc(var(--gap-lg) + var(--gap-md));border-radius:50%;background:var(--color-bg-section);color:var(--color-main);font-family:'Lora','Noto Sans JP',serif}
.results-intro {margin-top:var(--gap-md);max-width:40em;color:var(--color-text-body)}
.filter-state {display:flex;justify-content:space-between;align-items:center;gap:var(--gap-sm);padding:var(--gap-sm);background:var(--color-bg);border-radius:var(--radius-sm);margin-top:var(--gap-md);overflow-wrap:anywhere}.filter-state button {border:0;background:none;color:var(--color-main);min-height:44px;flex-shrink:0;text-decoration:underline;text-underline-offset:.25em}
/* 写真を入口にした記事一覧。既存記事のサムネイルを使用。 */
.results-list {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap-md);margin-top:var(--gap-lg);align-items:stretch}
.results-list[data-visible-count="1"] {grid-template-columns:minmax(0,1fr);max-width:40rem}
.results-list[data-visible-count="2"] {grid-template-columns:repeat(2,minmax(0,1fr))}
.result-item {min-width:0;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);overflow:hidden}
.result-item .result-link {display:flex;flex-direction:column;height:100%;color:var(--color-text)}
.result-item:hover,.result-item:focus-within {border-color:var(--color-border-strong)}
.result-item .result-link:focus-visible {outline-offset:-4px}
.result-media {position:relative;aspect-ratio:16/9;background:var(--color-bg-section);overflow:hidden;flex-shrink:0}
.result-media img {width:100%;height:100%;object-fit:cover;object-position:center}
.result-media--shiba img {object-position:center 0%}
.result-media--illustration img {object-fit:contain;padding:var(--gap-sm)}
.result-tag {position:absolute;bottom:var(--gap-sm);left:var(--gap-sm);max-width:calc(100% - var(--gap-md));padding:calc(var(--gap-sm)/4) var(--gap-sm);border-radius:100vmax;background:var(--color-bg);color:var(--color-main);font-size:13px;line-height:1.7}
.result-body {display:flex;flex-direction:column;flex:1;padding:var(--gap-md)}
.result-type {display:block;color:var(--color-text-body);font-size:13px;margin-bottom:calc(var(--gap-sm)/2)}
.result-item h3 {font-size:20px;line-height:1.6}
.result-item p {margin-block:var(--gap-sm) var(--gap-md);font-size:15px;line-height:1.85;color:var(--color-text-body)}
.result-read {align-self:flex-start;margin-top:auto;padding-top:calc(var(--gap-sm)/2);border-top:2px solid var(--color-border-strong);font-size:15px;color:var(--color-main)}
.result-item a:hover .result-read {border-color:var(--color-main)}
.result-item--clinic .result-body {background:var(--color-bg-soft)}
@media (max-width:1023px) {.results-list {grid-template-columns:repeat(2,minmax(0,1fr))}}
.all-columns {display:flex;align-items:center;justify-content:center;gap:var(--gap-lg);max-width:24rem;min-height:56px;margin:var(--gap-lg) auto 0;border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);color:var(--color-main)}
.empty-results {padding-block:var(--gap-lg)}.empty-results p {margin-top:var(--gap-sm);max-width:40em}.empty-results button,.empty-results a {display:inline-flex;align-items:center;min-height:48px;margin-top:var(--gap-md);margin-right:var(--gap-sm);padding:calc(var(--gap-sm)/2) var(--gap-sm);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-bg);color:var(--color-main)}
.consult-section {background:var(--color-bg-section)}.consult-layout {display:grid;grid-template-columns:1fr 1fr;gap:var(--gap-lg);align-items:center}.consult-layout h2 {margin-top:var(--gap-sm)}.consult-layout p {margin-top:var(--gap-md);color:var(--color-text-body)}.consult-actions {text-align:center}.visit-link {display:flex;justify-content:center;align-items:center;padding:var(--gap-sm) var(--gap-md);border-radius:100vmax;background:var(--color-main);color:var(--color-surface);max-width:24rem;margin-inline:auto;min-height:56px}.consult-tel {display:block;margin-top:var(--gap-md);font:30px 'Lora',serif;color:var(--color-main)}.consult-actions p {margin-top:var(--gap-sm)}
@media(max-width:1023px) {.symptom-bottom-grid {gap:var(--gap-lg)}.keyword-area {padding-left:var(--gap-md)}}
@media(max-width:767px) {
 body {font-size:16px}
 .body-section {padding-top:var(--gap-sm);padding-bottom:var(--gap-md)}.finder-heading {gap:calc(var(--gap-sm)*.75)}.finder-number {font-size:24px}.finder-heading h2 {font-size:24px}.finder-heading p {margin-top:calc(var(--gap-sm)/2)}
 .has-js .animal-switch {display:flex!important;justify-content:center;margin:var(--gap-md) auto var(--gap-sm);border:1px solid var(--color-border);border-radius:100vmax;padding:calc(var(--gap-sm)/4);width:80%;max-width:22rem;background:var(--color-bg-section)}
 .animal-switch button {display:flex;justify-content:center;align-items:center;gap:calc(var(--gap-sm)/2);width:50%;font-size:16px;min-height:44px;padding-block:0;line-height:1;border:0;border-radius:100vmax;background:transparent;color:var(--color-main)}.animal-switch button[aria-pressed='true'] {background:var(--color-main);color:var(--color-surface)}.animal-switch span {line-height:1;transform:translateY(1px);font-family:'Lora',serif;font-size:14px;letter-spacing:.14em;opacity:.8}
 .animal-maps {grid-template-columns:minmax(0,1fr);margin-top:0;gap:var(--gap-md)}.animal-name {margin-block:var(--gap-sm)}.has-js .animal-name {display:none}.has-js .animal-panel[data-animal='cat'] {display:none}.has-js[data-animal='cat'] .animal-panel[data-animal='dog'] {display:none}.has-js[data-animal='cat'] .animal-panel[data-animal='cat'] {display:block}
 .body-map {aspect-ratio:1.08;max-width:26rem}.animal-image {width:86%;left:7%;bottom:5%}.map-halo {inset:23% 3% 10%}.part-label {min-width:64px;padding-inline:calc(var(--gap-sm)/2);gap:calc(var(--gap-sm)/4)}.shared-note {margin-top:0;font-size:14px}
 .symptom-section {padding-block:var(--section-y-sp)}.symptom-bottom-grid {grid-template-columns:minmax(0,1fr);gap:var(--gap-lg)}.symptom-list a {padding-inline:calc(var(--gap-sm)/2)}.keyword-area {padding:var(--gap-lg) 0 0;border-left:0;border-top:1px solid var(--color-border-strong)}.keyword-area h2 {margin-bottom:var(--gap-sm)}.search-hint br {display:none}
 .results-list,.results-list[data-visible-count="2"] {grid-template-columns:minmax(0,1fr)}.result-body {padding:var(--gap-md)}.result-media {aspect-ratio:2/1}.result-read {font-size:14px}.results-head {align-items:center}.result-item h3 {font-size:18px}.result-item p {font-size:14px}.filter-state {flex-wrap:wrap}.results-head h2 {font-size:24px}.consult-layout {grid-template-columns:minmax(0,1fr)}.consult-layout h2 {font-size:24px}.consult-tel {font-size:30px}#results,#body-title {scroll-margin-top:calc(72px + var(--gap-md))}
}
@media(prefers-reduced-motion:reduce) {html {scroll-behavior:auto}*,*::before,*::after {transition:none!important}}

/* Header sizing copied from the canonical access page. */
.header-logo img {width:clamp(180px,12vw,210px);height:auto}
@media(max-width:767px) {.global-nav,.header-contact,.header-reserve-btn {display:none}.header-logo img {width:150px}}
@media(min-width:768px) and (max-width:1023px) {.global-nav,.header-contact,.header-reserve-btn {display:none}.header-logo img {width:170px}}

/* 尿ラベルをおなかの下に置くため、図の下側に余白を確保。 */
.body-map {margin-bottom:var(--gap-lg)}


.symptom-lead {text-align:center;margin-top:var(--gap-sm);margin-bottom:calc(var(--gap-lg)*1.5)}.symptom-lead h2 {margin-top:calc(var(--gap-sm)/2);color:var(--color-main);font-size:44px;line-height:1.55;font-weight:500;letter-spacing:.04em}.symptom-lead h2 span {display:inline}.symptom-lead p {margin-top:calc(var(--gap-md)*1.5);color:var(--color-text-body);text-wrap:balance}
@media (max-width:767px) {.symptom-lead h2 span {display:block}.symptom-lead {margin-bottom:var(--gap-lg)}.symptom-lead h2 {font-size:30px}.symptom-lead p {margin-top:var(--gap-md)}}
.br-sp {display:inline}@media (min-width:768px) {.br-sp {display:none}}

/* 部位ラベルの位置（旧：HTMLのインラインstyle。犬猫共通） */
.part-label[data-topic="eye"]{--label-y:6%;--label-inset:2%}.part-label[data-topic="ear"]{--label-y:10%;--label-inset:1%}.part-label[data-topic="nose"]{--label-y:29%;--label-inset:0%}.part-label[data-topic="mouth"]{--label-y:37%;--label-inset:0%}.part-label[data-topic="skin"]{--label-y:53%;--label-inset:1%}.part-label[data-topic="belly"]{--label-y:60%;--label-inset:3%}.part-label[data-topic="leg"]{--label-y:78%;--label-inset:7%}.part-label[data-topic="urine"]{--label-y:calc(60% + 48px + var(--gap-sm));--label-inset:3%}

/* 320px前後で「す。」だけが次の行に残らないよう、リード・補足文は語のまとまりで折り返し、行の長さをそろえる */
.symptom-lead p,.finder-heading p,.shared-note,.search-hint {word-break:auto-phrase;text-wrap:balance}
@media (max-width:359px) {.br-sp {display:none}}
