@charset "UTF-8";
/* うちの子パスポートのロゴ（見本 v6・v7。Z:\Claude\file\わんろぐ_確認\うちの子パスポート_見本）。公開ページ（紹介・新着情報・届けの手続き・同行避難・個人情報の守り方）で共通。
   アプリの中のロゴは src/components/ui/PassportLogo.module.css（同じ形）。
   まる子と茶トラのにゃんこは丸く切り抜かず、耳まで入れて、あごの下でふわっと消す。名前は うちの子みっけ! と同じく「うちの子」を吹き出しに。
   大きさは --u（1 で横長の小さい形）で変える */
.pp_lock { --u: 1; display: inline-flex; align-items: flex-end; gap: calc(8px * var(--u)); }
.pp_heads { display: inline-flex; align-items: flex-end; flex-shrink: 0; }
/* 頭の部分：絵（480x480）の上から出す。左右の余白（毛の外）を少し詰める */
.pp_head {
  display: block; width: calc(40px * var(--u)); height: calc(34px * var(--u));
  background-repeat: no-repeat; background-size: 128% auto; background-position: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%);
}
.pp_head.pp_dog { background-image: url(/img/maruko/hai.webp); }
.pp_head.pp_cat { background-image: url(/img/guide/cat/hai.webp); margin-left: calc(-9px * var(--u)); }
.pp_word { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
/* うちの子みっけ! と同じ、こげ茶の吹き出し */
.pp_bubble {
  position: relative; display: inline-block; font-family: 'Kiwi Maru', serif; font-weight: 500; font-size: calc(10px * var(--u));
  color: #fffdf9; background: #5a3a26; border-radius: 999px; padding: calc(3px * var(--u)) calc(8px * var(--u)); letter-spacing: .06em; white-space: nowrap;
}
.pp_bubble::after {
  content: ""; position: absolute; left: calc(12px * var(--u)); bottom: calc(-4px * var(--u));
  border-style: solid; border-width: calc(5px * var(--u)) calc(4px * var(--u)) 0 0; border-color: #5a3a26 transparent transparent;
}
.pp_main { font-family: 'Kiwi Maru', serif; font-weight: 500; font-size: calc(19px * var(--u)); color: #5a3a26; letter-spacing: .04em; margin-top: calc(4px * var(--u)); white-space: nowrap; }

/* イラストのまわりの飾り（左上に星2つ・右上にハート） */
.pp_deco { padding: calc(6px * var(--u)) calc(6px * var(--u)) 0 calc(10px * var(--u)); }
.pp_deco .pp_heads { position: relative; font-size: calc(40px * var(--u)); }
.pp_deco .pp_heads::before {
  content: ""; position: absolute; pointer-events: none; background-repeat: no-repeat; background-size: contain;
  left: -.36em; top: -.34em; width: 2.3em; height: .87em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 132 50'%3E%3Cpath transform='translate(2 6) scale(.62)' d='M12 1.5c.9 5.6 4.9 9.6 10.5 10.5-5.6.9-9.6 4.9-10.5 10.5C11.1 16.9 7.1 12.9 1.5 12 7.1 11.1 11.1 7.1 12 1.5z' fill='%23e8b54a'/%3E%3Cpath transform='translate(16 0) scale(.36)' d='M12 1.5c.9 5.6 4.9 9.6 10.5 10.5-5.6.9-9.6 4.9-10.5 10.5C11.1 16.9 7.1 12.9 1.5 12 7.1 11.1 11.1 7.1 12 1.5z' fill='%23e8b54a'/%3E%3Cpath transform='translate(116 4) scale(.6) rotate(12 12 12)' d='M12 21s-8.5-5.4-8.5-11.2A4.8 4.8 0 0 1 12 6.6a4.8 4.8 0 0 1 8.5 3.2C20.5 15.6 12 21 12 21z' fill='%23e9967a'/%3E%3C/svg%3E");
}

/* ヘッダー・フッターのロゴ（見本 v7：少し小さく・2匹と文字のあいだを空ける） */
.header_logo, .footer_logo { text-decoration: none; }
.header_lock { --u: 1.08; gap: calc(14px * var(--u)); }
.footer_logo .pp_lock { --u: 1.1; }
@media (max-width: 640px) {
  .header_lock { --u: .9; gap: calc(10px * var(--u)); }
}