@charset "UTF-8";
/* ===================================================================
   投稿記事（通常投稿 post）共通スタイル
   ・絵文字を使わず、アイコンは CSS（インライン SVG data URI）で付与
   ・記事側はネイティブブロック＋クラス指定のみ（編集しやすさ優先）
==================================================================== */

/* --- 緊急ボックス（AEDマップ等） ---------------------------------- */
/* 枠線・背景はブロック側の設定（インライン style）で付与。
   ここではアイコンと余白の微調整のみ担当。 */
.aed-alert__head {
  font-size: 1.1em;
  line-height: 1.7;
  margin: 0 0 0.6em;
}
.aed-alert__head::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-right: 0.4em;
  vertical-align: -0.22em;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202L1%2021h22L12%202z'%20fill='%23e06363'/%3E%3Crect%20x='11'%20y='9'%20width='2'%20height='6'%20rx='1'%20fill='%23fff'/%3E%3Crect%20x='11'%20y='17'%20width='2'%20height='2'%20rx='1'%20fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain;
}
.aed-alert__note {
  font-size: 0.9em;
  line-height: 1.7;
  margin: 0;
  color: #444;
}

/* --- 地図リンク（位置ピンアイコン） ------------------------------- */
.map-link a::before {
  content: "";
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.4em;
  vertical-align: -0.18em;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202C8.13%202%205%205.13%205%209c0%205.25%207%2013%207%2013s7-7.75%207-13c0-3.87-3.13-7-7-7z'%20fill='%23444'/%3E%3Ccircle%20cx='12'%20cy='9'%20r='2.5'%20fill='%23fff'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ===================================================================
   動物園記事 かわいい装飾（背景透過PNGを"ちりばめる"）
   ・対象は .kz-article 内に限定（他記事に影響させない）
   ・各装飾は本文中の <figure class="kz-deco kz-deco--left/right"> に透過PNG
   ・float＋負マージン＋傾きで、本文の端から動物が"ひょっこり"覗く演出
==================================================================== */
.kz-article {
  /* 装飾がはみ出しても切れないように */
  overflow: visible;
}

/* 共通：切り抜き動物のサイズ・影・重なり */
.kz-article .kz-deco {
  margin: 0;
  width: clamp(96px, 20vw, 156px);
  pointer-events: none;   /* リンク等の邪魔をしない */
  position: relative;
  z-index: 2;
}
.kz-article .kz-deco img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.18));
  -webkit-user-select: none;
  user-select: none;
}

/* 右からひょっこり */
.kz-article .kz-deco--right {
  float: right;
  margin: -0.8em -0.6em 0.4em 1em;
  transform: rotate(6deg);
}
/* 左からひょっこり */
.kz-article .kz-deco--left {
  float: left;
  margin: -0.8em 1em 0.4em -0.6em;
  transform: rotate(-6deg);
}

/* ふわっと浮く動き（控えめ）。動きを抑えたい人には配慮 */
@media (prefers-reduced-motion: no-preference) {
  .kz-article .kz-deco img {
    animation: kz-bob 4.5s ease-in-out infinite;
  }
  .kz-article .kz-deco--left img {
    animation-delay: -2.2s;
  }
}
@keyframes kz-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* スマホでは小さめ＆寄せを弱めて、本文と重なりすぎないように */
@media (max-width: 600px) {
  .kz-article .kz-deco {
    width: clamp(72px, 26vw, 112px);
  }
  .kz-article .kz-deco--right { margin: -0.4em -0.2em 0.3em 0.6em; }
  .kz-article .kz-deco--left  { margin: -0.4em 0.6em 0.3em -0.2em; }
}

/* ===================================================================
   表（テーブル）セル背景の基本色
   ・見出しセル(th) #f9f4f8 ／ データセル(td) #fdfdfd
   ・サイト全体の .wp-block-table が対象
==================================================================== */
.wp-block-table th {
  background-color: #f9f4f8;
}
.wp-block-table td {
  background-color: #fdfdfd;
}

/* ===================================================================
   横に長い表は表エリア内だけ横スクロールにする
   ・列の min-width 指定などで表がコンテナ幅を超えても、
     ページ全体ではなく表の中でスクロールさせて崩れを防ぐ
==================================================================== */
.wp-block-table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ===================================================================
   表（テーブル）をサイトのカラーに合わせる
   ・背景 #fff3f0 ／ アクセント #d98666 ／ 文字 #4a2f2a
   ・対象は .kz-article 内のみ（他記事に影響させない）
==================================================================== */
.kz-article .wp-block-table table {
  color: #4a2f2a;
  border-collapse: collapse;
  overflow: hidden;
}
.kz-article .wp-block-table th,
.kz-article .wp-block-table td {
  border: none !important;
  border-bottom: 1px solid #f4e6e0 !important;
  padding: 0.55em 0.8em;
}
/* 見出しセル（thead の見出し・左端の項目名）はアクセント色 */
.kz-article .wp-block-table thead th,
.kz-article .wp-block-table tbody th {
  background-color: #f9f4f8;
  color: var(--swl-text_color--black);
}
/* ストライプは、サイトのアクセントを薄くしたトーンで（SWELL既定より優先） */
.kz-article .wp-block-table.is-style-stripes tbody tr:nth-child(odd) td {
  background-color: #fffaf7 !important;
}
.kz-article .wp-block-table.is-style-stripes tbody tr:nth-child(even) td {
  background-color: rgba(217, 134, 102, 0.12) !important;
}
.kz-article .wp-block-table figcaption {
  color: #8a655a;
}



/* ===================================================================
   料金表など「項目名＋金額×2列」の表で、金額列を狭くする
   ・1列目（項目名）を優先して幅を確保し、2・3列目（料金）は詰める
   ・className に "narrow-price-cols" を付けた表にだけ適用
==================================================================== */
.kz-article .wp-block-table.narrow-price-cols table {
  table-layout: fixed;
}
.kz-article .wp-block-table.narrow-price-cols th:nth-child(2),
.kz-article .wp-block-table.narrow-price-cols td:nth-child(2),
.kz-article .wp-block-table.narrow-price-cols th:nth-child(3),
.kz-article .wp-block-table.narrow-price-cols td:nth-child(3) {
  width: 5.5em;
  white-space: nowrap;
}

/* ===================================================================
   スマホ表示で h3 が h2 より大きく見える現象の修正
   ・SWELL 側のスマホ用見出しサイズ設定で h2:18px / h3:19px と
     逆転しているため、本文（.post_content）内の h3 だけ明示的に縮める
==================================================================== */
@media (max-width: 600px) {
  .post_content h3 {
    font-size: 16px !important;
  }
}