/* =========================================================
   PAWS デザイントークン＆基本部品（paws.co.jp 2026-10-30 実測）
   - 現行サイト（STUDIO）の計測値をそのまま変数化
   - 新ロゴ（11/30受領・1/15確定）が来たら logo と色だけ差し替える前提
   ========================================================= */
:root{
  /* 色 */
  --paws-orange:#F39800;        /* ブランドオレンジ（見出しラベル・ボタン） */
  --paws-orange-ink:#8F5300;    /* 小さい文字用（クリーム地・薄オレンジ地とも4.5:1以上） */
  --paws-orange-soft:#FDEBCB;   /* 薄いオレンジ（背景の差し色） */
  --paws-ink:#060606;           /* 本文・フッター */
  --paws-cream:#FFFBF0;         /* ページ背景 */
  --paws-cream-2:#FFFAF2;       /* 交互背景 */
  --paws-gray:#6B6B6B;          /* 補足文字（実測#888は小文字で不足するため濃く） */
  --paws-line:#EADFC8;
  --paws-white:#fff;
  --paws-blue:#0553DD;          /* SPメニューボタン（現行サイト準拠） */

  /* 書体：和文は現行の A1ゴシック M に近いもの → Zen Kaku Gothic New */
  --paws-font-ja:"A1ゴシック M JIS2004","Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif;
  --paws-font-en:"Roboto","Helvetica Neue",Arial,sans-serif;

  /* 文字サイズ（PC実測） */
  --paws-h1:52px;   --paws-h1-ls:.1em;
  --paws-label:46px;--paws-label-ls:.05em;
  --paws-h2:36px;   --paws-h2-ls:.05em;
  --paws-h3:22px;
  --paws-body:16px; --paws-body-ls:.05em; --paws-lh:1.8;
  --paws-nav:14px;  --paws-nav-ls:.15em;

  /* 形 */
  --paws-r-xl:130px;   /* 大きい写真の片側だけ大きく丸める */
  --paws-r-lg:80px;
  --paws-r-card:12px;
  --paws-r-pill:128px;

  --paws-max:1180px;
  --paws-gutter:clamp(16px,4vw,40px);
  --paws-header-h:90px;
}
@media (max-width:760px){
  :root{--paws-h1:32px;--paws-label:34px;--paws-h2:24px;--paws-h3:19px;--paws-body:15px;--paws-r-xl:64px;--paws-r-lg:40px;--paws-header-h:64px}
}

/* ---------- ベース ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--paws-header-h) + 16px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paws-cream);color:var(--paws-ink);font-family:var(--paws-font-ja);font-size:var(--paws-body);letter-spacing:var(--paws-body-ls);line-height:var(--paws-lh);font-feature-settings:"palt" 0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--paws-blue);outline-offset:3px}
.p-frame{width:min(100% - var(--paws-gutter)*2,var(--paws-max));margin-inline:auto}
.p-skip{position:absolute;left:-9999px}.p-skip:focus{left:16px;top:16px;z-index:99;background:#fff;padding:8px 12px}
.p-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- ヘッダー（90px・小文字pawsロゴ＋オレンジのお問い合わせ） ---------- */
.p-header{position:sticky;top:0;z-index:50;background:rgba(255,251,240,.94);backdrop-filter:blur(6px)}
.p-header-inner{height:var(--paws-header-h);display:flex;align-items:center;gap:24px}
.p-logo img{width:150px;height:auto}
.p-nav{margin-left:auto;display:flex;align-items:center;gap:28px;font-size:var(--paws-nav);letter-spacing:var(--paws-nav-ls);font-weight:700}
.p-nav a{text-decoration:none}
.p-nav a:hover{color:var(--paws-orange-ink)}
.p-menu{display:none}
.p-nav a,.p-nav .p-pill{white-space:nowrap}
@media (max-width:1100px){
  .p-menu{display:grid;place-items:center;margin-left:auto;width:48px;height:48px;border-radius:50%;border:0;background:var(--paws-blue);color:#fff;font:700 10px/1 var(--paws-font-en);letter-spacing:.1em;cursor:pointer}
  .p-nav{display:none;position:absolute;top:var(--paws-header-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paws-cream);padding:8px var(--paws-gutter) 24px;box-shadow:0 12px 24px rgba(0,0,0,.08)}
  .p-nav.is-open{display:flex}
  .p-nav a{padding:14px 0;border-bottom:1px solid var(--paws-line)}
  .p-nav .p-pill{margin-top:16px;justify-content:center}
}
@media (max-width:760px){.p-logo img{width:108px}}

/* ---------- ピルボタン ---------- */
.p-pill{display:inline-flex;align-items:center;gap:8px;padding:12px 26px;border-radius:var(--paws-r-pill);border:0;background:var(--paws-orange);color:var(--paws-ink);font:700 14px/1.2 var(--paws-font-ja);letter-spacing:.1em;text-decoration:none;cursor:pointer}
.p-pill:hover{background:#FFAD1F}
.p-pill--ghost{background:transparent;box-shadow:inset 0 0 0 2px var(--paws-ink)}
.p-pill--white{background:#fff}

/* ---------- 見出し：英字ラベル（オレンジ・Roboto）＋短い下線＋和文見出し ---------- */
.p-label{margin:0;font:700 var(--paws-label)/1.1 var(--paws-font-en);letter-spacing:var(--paws-label-ls);color:var(--paws-orange);text-transform:uppercase}
.p-label::after{content:"";display:block;width:40px;height:3px;margin-top:14px;background:var(--paws-orange)}
.p-h2{margin:22px 0 0;font-size:var(--paws-h2);font-weight:700;letter-spacing:var(--paws-h2-ls);line-height:1.6}
.p-h3{margin:0 0 8px;font-size:var(--paws-h3);font-weight:700;letter-spacing:.05em;line-height:1.5}
.p-lead{max-width:40em}
.p-note{font-size:13px;color:var(--paws-gray)}

/* ---------- 矢印丸リンク（オレンジ丸＋白矢印＋太字） ---------- */
.p-arrow{display:inline-flex;align-items:center;gap:14px;font-weight:700;text-decoration:none;background:none;border:0;padding:0;color:inherit;font-family:inherit;font-size:16px;letter-spacing:.05em;cursor:pointer}
.p-arrow-i{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--paws-orange);transition:transform .2s}
.p-arrow-i svg{width:28px;height:28px}
.p-arrow:hover .p-arrow-i{transform:translateX(4px)}
.p-arrow--white .p-arrow-i{background:#fff}

/* ---------- 片側だけ大きく丸めた写真 ---------- */
.p-photo{margin:0;position:relative}
.p-photo img{width:100%;object-fit:cover}
.p-photo--r{border-radius:0 var(--paws-r-xl) var(--paws-r-xl) 0;overflow:hidden}
.p-photo--l{border-radius:var(--paws-r-lg) 0 0 var(--paws-r-lg);overflow:hidden}
.p-photo--tr{border-radius:0 var(--paws-r-xl) 0 0;overflow:hidden}
.p-photo--card{border-radius:var(--paws-r-card);overflow:hidden}
.p-photo figcaption{position:absolute;right:12px;bottom:10px;font-size:12px;letter-spacing:.05em;color:#fff;background:rgba(6,6,6,.7);padding:2px 8px;border-radius:4px}

/* ---------- 医・食・住のオレンジ丸バッジ ---------- */
.p-badge{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:var(--paws-orange);color:var(--paws-ink);font-size:30px;font-weight:700;letter-spacing:0}

/* ---------- カード ---------- */
.p-card{background:#fff;border:1px solid var(--paws-orange);border-radius:var(--paws-r-card);padding:28px}

/* ---------- お問い合わせ帯（全幅オレンジ） ---------- */
.p-contact{background:var(--paws-orange);padding:72px 0}
.p-contact-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.p-contact .p-label{color:var(--paws-ink)}.p-contact .p-label::after{background:var(--paws-ink)}
.p-contact p{margin:12px 0 0;font-weight:700}

/* ---------- フッター（黒地・白ロゴ） ---------- */
.p-footer{background:var(--paws-ink);color:#fff;padding:64px 0 32px;font-size:14px}
.p-footer-inner{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:start}
.p-footer-logo img{width:110px}
.p-footer-nav{display:flex;flex-wrap:wrap;gap:12px 28px;font-weight:700;letter-spacing:.1em}
.p-footer-nav a{text-decoration:none}
.p-footer small{display:block;margin-top:40px;font:700 12px var(--paws-font-en);letter-spacing:.1em;color:#bbb}
@media (max-width:760px){.p-footer-inner{grid-template-columns:1fr;gap:28px}}

/* ---------- ダイアログ（未接続の説明） ---------- */
.p-dialog{border:0;border-radius:var(--paws-r-card);padding:28px;max-width:420px}
.p-dialog::backdrop{background:rgba(6,6,6,.5)}
.p-photo--r figcaption,.p-photo--tr figcaption{right:auto;left:12px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}