@charset "UTF-8";
/*
  Template: swell
  Theme Name: SWELL CHILD
  Author: LOOS WEB STUDIO

  --- 構成 ---
  01) 固定ページのタイトル非表示 & 余白ゼロ化（最重要）
  02) セクションタイトル（リボン付き）
  03) FAQ
  04) お客様の声（Query Loop カード化）
  05) トップ：子猫カード（一覧のカード風）
  06) お問い合わせボタン横並び
  07) 子猫：詳細ページ
  08) 子猫：アーカイブ一覧
  09) Access セクション
  10) 親猫
　11）出産情報
　12）購入について
  13)ちゅらラグについて
*/

/* =========================================================
   00) 共通設定
   ========================================================= */
/* 日本語段落をきれいに折り返す */
.keep-ja {
  word-break: keep-all;        /* 日本語の文字間では原則改行しない */
  overflow-wrap: anywhere;     /* どうしても収まらない場合だけ折り返す */
  hyphens: auto;               /* 英単語はハイフンで分割（対応ブラウザ） */
}

/* ===== PCで中央揃え、スマホで左揃え ===== */
.text-center-sp-left {
  text-align: center;
}

@media (max-width: 767px) {
  .text-center-sp-left {
    text-align: left;
  }
}
/* SWELLボタンを均等幅に揃える */
.swell-block-button,
.wp-block-button {
  flex: 1 1 0 !important;   /* 均等に広がる */
}

.swell-block-button__link,
.wp-block-button__link {
  width: 100% !important;   /* ボタンの中身を広げる */
  text-align: center;       /* 文字を中央寄せ */
  box-sizing: border-box;   /* パディング込みで幅調整 */
}
/* ボタン幅をある程度揃える */
.swell-block-button__link,
.wp-block-button__link {
  min-width: 120px;  /* 最小幅 */
  max-width: 250px;  /* 最大幅 */
  text-align: center;
}

/* スマホ（768px以下）の場合は縦並び */
@media (max-width: 768px) {
  .button-group {
    flex-direction: column;
    align-items: center; /* 中央寄せ */
  }
  .button-group a {
    width: 100%; /* 横幅いっぱいにする場合 */
    max-width: 300px; /* 最大幅を制御したいなら追加 */
  }
}


/* =========================================================
   01) 固定ページのタイトル非表示 & 余白ゼロ化（最重要）
   ========================================================= */

/* デフォルトのページタイトル・サブタイトルを消す */
.page .c-pageTitle,
.page .c-pageSubTitle,
.page .p-pageTitle{
  display: none !important;
}

/* タイトル分のヘッダーブロック余白もゼロ */
.page .p-articleHead,
.page .l-main .p-articleHead{
  margin: 0 !important;
  padding: 0 !important;
}

/* コンテンツ外枠側の余白はゼロに（保険） */
.page #content,
.page .l-content,
.page .l-mainContent_inner{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 本文直下の「4em」を確実に打ち消す（これが最重要） */
body.page main#main_content .l-mainContent_inner > .post_content{
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 本文の最初のブロックに margin が付いていても 0 に */
body.page main#main_content .l-mainContent_inner > .post_content > *:first-child{
  margin-top: 0 !important;
}

/* 最初がグループ/カラム/見出し/スペーサーだった時の保険 */
body.page .post_content > .wp-block-group:first-child,
body.page .post_content > .wp-block-columns:first-child,
body.page .post_content > .section-title:first-child{
  margin-top: 0 !important;
}
body.page .post_content > .wp-block-spacer:first-child{
  height: 0 !important;
  margin: 0 !important;
}

/* =========================================================
   02) セクションタイトル（リボン付き）
   ========================================================= */

.section-title{
  text-align: center;
  margin: 0 0 2rem;       /* 下だけ少し余白 */
  padding: 0;
}

.section-title .ribbon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 .8rem;      /* リボンと見出しの間隔 */
  line-height: 1;
}
.section-title .ribbon img,
.section-title .ribbon svg{
  display: block;
  width: 40px;
  height: auto;
}

/* 日本語タイトル */
.section-title__heading{
  margin: 0;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.3;
  font-size: clamp(22px, 2.6vw, 32px);
}

/* 英字サブ */
.section-title__sub{
  display: block;
  margin-top: .5rem;
  font-size: .95rem;
  letter-spacing: .2em;
  color: #c59fa3;
  font-weight: 500;
  text-transform: uppercase;
}

/* 並び順バリエーション */
.section-title.-enTop{
  display: grid;
  justify-items: center;
  row-gap: 2px;
}
.section-title.-jaTop{
  display: grid;
  justify-items: center;
}
.section-title.-jaTop .section-title__heading{ order: 2; }
.section-title.-jaTop .section-title__sub{ order: 3; }

/* ページ冒頭でさらに詰めたい時のユーティリティ */
.section-title.-tight{ margin-top: 8px; }

/* 色替え例 */
.section-title.-pink .section-title__sub{ color:#d9a4a4; }
.section-title.-blue .section-title__sub{ color:#5ca8c4; }

/* ===== セクションタイトルの余白を完全コントロール ===== */
.section-title{
  display: grid;              /* 縦に並べる */
  grid-auto-flow: row;
  justify-items: center;      /* 中央寄せ */
  row-gap: .6rem;             /* リボン↔見出し↔英字の感覚（好みで） */
  margin: 0 0 2rem;           /* 外側は下だけ余白 */
  padding: 0;
}

/* 中の要素のデフォルト margin を全消し（これが効くと崩れない） */
.section-title > *{
  margin: 0 !important;
}

/* リボンの調整（余白は grid の row-gap でコントロール） */
.section-title .ribbon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.section-title .ribbon img,
.section-title .ribbon svg{
  display: block;
  width: 40px;
  height: auto;
}

/* 見出しと英字の基本（必要最低限だけ） */
.section-title__heading{
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.3;
  font-size: clamp(22px, 2.6vw, 32px);
}
.section-title__sub{
  letter-spacing: .2em;
  color: #c59fa3;
  font-weight: 500;
  text-transform: uppercase;
  font-size: .95rem;
}

/* もしページ冒頭だけさらに詰めたいとき用 */
.section-title.-tight{ margin-top: 8px; }

/* 並び順を変える場合のユーティリティ（使ってなければ無視でOK） */
.section-title.-enTop{ display: grid; justify-items: center; row-gap: .6rem; }
.section-title.-jaTop{ display: grid; justify-items: center; row-gap: .6rem; }
.section-title.-jaTop .section-title__heading{ order: 2; }
.section-title.-jaTop .section-title__sub{ order: 3; }


/* =========================================================
   03) FAQ
   ========================================================= */

.swell-block-faq .faq_q{ font-size: 1rem; }
.faq_q{ background:#d3ebf2; color:#706D6D; }

.faq_a{
  max-height: 0; overflow: hidden; transition: max-height 0s;
  padding: 0 !important;
}
.faq_a.open{
  max-height: fit-content;
  padding: 1em 1em 1em 3em !important;
  border: 1px solid var(--color_main);
}
.swell-block-faq .faq_q:before,
.swell-block-faq .faq_a:before{
  box-shadow: none; left: 10px;
}
.swell-block-faq .swell-block-faq__item + .swell-block-faq__item{ position: relative; }

.swell-block-faq__item .faq_q:after{
  content: "\e91c"; font-family: icomoon !important; color:#706D6D;
  font-weight: 700; position: absolute; right: 30px; top: 50%;
  transform: translateY(-50%); font-size: 1.4em;
}
.swell-block-faq__item.open .faq_q:after{ content: "\e919"; }

/* =========================================================
   04) お客様の声（Query Loop カード化）
   ========================================================= */

.wp-block-post-template.is-layout-grid{
  list-style: none; padding-left: 0; gap: 24px;
  grid-template-columns: 1fr;           /* SP: 1列 */
}
@media (min-width: 640px){
  .wp-block-post-template.is-layout-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 1024px){
  .wp-block-post-template.is-layout-grid{ grid-template-columns: repeat(3,1fr); }
}

.wp-block-post-template.is-layout-grid > li.wp-block-post{
  background:#fff; border:1px solid #eee; border-radius:14px;
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  padding: 20px 22px; overflow:hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.wp-block-post-template.is-layout-grid > li.wp-block-post:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}
.wp-block-post-template .wp-block-post-title{
  font-weight:700; font-size:1.05rem; line-height:1.6; margin:0 0 8px;
}
.wp-block-post-template .wp-block-post-title a{
  text-decoration:none; color:inherit;
}
.wp-block-post-template .wp-block-post-date{
  color:#9aa0a6; font-size:.85rem; margin:0 0 10px;
}
.wp-block-post-template .wp-block-post-excerpt{ margin:0; line-height:1.8; color:#555; }
.wp-block-post-template .wp-block-post-excerpt__excerpt{
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
}

/* SWELL の ul/li ディスクを打ち消し（保険） */
.post_content ul.wp-block-post-template.is-layout-grid,
.post_content .wp-block-query .wp-block-post-template.is-layout-grid{ list-style:none !important; }
.post_content .wp-block-query .wp-block-post-template.is-layout-grid > li{ list-style:none !important; }

/* =========================================================
   05) トップ：子猫カード
   ========================================================= */

.wp-block-post-template .kitten-card{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.kitten-status-wrap{ margin:10px 0 8px; text-align:center; }
/* 価格：右寄せ＆太字（hyphen版に対応） */
.kitten-price{
  text-align: right !important;
  font-weight: 700 !important;
  font-size: 1.1rem;
  margin: 8px 0 12px !important;
}

/* 任意：数字だけ強く、（税込）は軽くしたい場合 */
.kitten-price .amount{ font-weight: 800; }
.kitten-price .tax   { font-weight: 400; font-size: .9em; }


.kitten-card .wp-block-post-featured-image img{
  width:100%; height:260px; object-fit:cover; border-radius:8px;
}
.kitten-badge{ display:inline-block; padding:4px 10px; border-radius:999px;
  background:#f3f4f6; font-size:12px; line-height:1; margin:6px 0; }

.kitten-status-wrap{ display:flex; justify-content:center; margin:10px 0 8px; }

.kitten-status-pill{
  font-size: clamp(14px, .9rem + .2vw, 18px);
  font-weight:700; line-height:1;
  padding:10px 22px;
  color:#5CA8C4; border:2.5px solid #5CA8C4; border-radius:9999px; background:#fff;
  letter-spacing:.02em;
}

.kitten-status--decided,
.kitten-status--on-sale,
.kitten-status--reserved{
  color:#5CA8C4 !important; border-color:#5CA8C4 !important; background:#fff !important;
}

.kitten-meta{ margin-top:6px; font-size:14px; color:#475569; }
.kitten-meta .row{ display:flex; justify-content:space-between; gap:12px;
  padding:8px 0; border-top:1px dashed #e2e8f0; }
.kitten-meta .row.first{ border-top:none; }
.kitten-meta .label{ color:#64748b; }
.kitten-meta .value{ text-align:right; }

.kitten-readmore-btn{
  display:inline-block; padding:.6em 1.4em; border-radius:999px;
  font-weight:600; text-decoration:none; background:#E89C9A; color:#fff; border:none;
  margin-top:12px; float:right;
}
.kitten-readmore-btn:hover{ background:#d87c7a; }

/* =========================================================
   06) お問い合わせボタン横並び
   ========================================================= */

.contact-btns{ display:flex; gap:.75rem; margin-block: 12px 28px;   /* 上 12px / 下 28px くらい。お好みで */}
.contact-btns .swell-block-button{
  flex:1 0 0;
  min-width:max-content;         /* 中身の長い方に合わせる */
}
.contact-btns .swell-block-button__link,
.contact-btns .is-style_btn_normal a{
  display:inline-flex; justify-content:center; white-space:nowrap;
}
@media (max-width: 767px){
  .contact-btns{ flex-direction:column; margin-block-end: 40px;}
  .contact-btns .swell-block-button{ flex:none; width:100%; min-width:0; }
  .contact-btns .swell-block-button__link,
  .contact-btns .is-style_btn_normal a{ width:100%; }
  .contact-btns{ gap:6px; }
}
.contact-btns.is-row{ --wp--style--block-gap:8px; gap:8px; }
.contact-btns .swell-block-button,
.contact-btns .wp-block-button{ margin:0; }
.contact-btns .swell-block-button .btn-wrap,
.contact-btns .is-style_btn_normal{ margin:0; }

/* =========================================================
   07) 子猫：詳細ページ
   ========================================================= */

.kitten-single .l-container{ max-width:900px; }

body.single-kittens .kitten-single__heading{
  max-width:860px; margin:40px auto 8px; text-align:center;
}
body.single-kittens .kitten-single__heading .section-title__heading{
  font-size: clamp(26px, 2.6vw, 32px); line-height:1.35; font-weight:700; margin:0 0 6px;
}
body.single-kittens .kitten-single__heading .section-title__sub{
  display:inline-block; font-size:12px; letter-spacing:.22em; color:rgba(0,0,0,.45);
}
body.single-kittens .kitten-subhead{
  display:flex; justify-content:center; align-items:center; gap:20px; margin:8px auto 28px;
}

.kitten-profile{
  display:grid; grid-template-columns:300px 1fr; gap:18px;
  background:#fff; border-radius:12px; padding:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
.kitten-hero__img{ width:100%; height:auto; border-radius:10px; display:block; }

.kitten-table{ -webkit-column-count:1 !important; column-count:1 !important; display:block !important; font-size:14px; }
.kitten-table > div{
  display:grid; grid-template-columns:6.5em 1fr; gap:.5em 1.2em;
  padding:10px 12px; border-bottom:1px dotted #e5eaee;
}
.kitten-table > div:first-child{ border-top:1px dotted #e5eaee; }
.kitten-table dt{ margin:0; color:#6b7b86; font-weight:600; }
.kitten-table dd{ margin:0; }

.kitten-content{ margin-top:20px; }
.kitten-content p{ line-height:1.9; }
.kitten-content figure{ margin:18px 0; }
.kitten-content img{ height:auto; border-radius:8px; }

.kitten-footer{ text-align:center; margin:26px 0 10px; }
.kitten-cta{ display:inline-block; background:#E89C9A; color:#fff; padding:12px 26px; border-radius:999px; font-weight:700; }

@media (max-width: 768px){
  .kitten-profile{ grid-template-columns:1fr; }
  .kitten-table > div{ grid-template-columns:5.5em 1fr; padding:10px 8px; }
}

/* 旧ヘッダーが残っている場合用（未使用なら削除OK） */
.kitten-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin:10px 0 16px; }
.kitten-head__titles{ display:flex; flex-direction:column; gap:6px; }
.kitten-eyebrow{ color:#9fb6bf; font-size:14px; }
.kitten-head__title{ margin:0; font-size:22px; letter-spacing:.02em; }
.kitten-head__title small{ font-size:12px; color:#90a4ae; margin-left:6px; }
.kitten-head__price{ display:none; }
.kitten-price--inline{ text-align:right; font-weight:700; font-size:18px; margin:0 0 10px; }
.kitten-price--inline span{ margin-left:4px; font-weight:400; font-size:.9em; }
body.single-kittens .kitten-status-pill{ margin-bottom:16px; }

/* =========================================================
   08) 子猫：アーカイブ一覧
   ========================================================= */

/* コンテナ */
.kittens-archive .l-container{ max-width:1200px; }

/* グリッド（一覧カード） */
.kittens-grid{
  list-style:none; margin:24px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:36px;
}
@media (max-width:1024px){ .kittens-grid{ grid-template-columns:repeat(2,1fr); gap:28px; } }
@media (max-width:640px){  .kittens-grid{ grid-template-columns:1fr; gap:22px; } }

/* カード本体 */
.kitten-card{
  background:#fff; border-radius:16px; box-shadow:0 10px 26px rgba(0,0,0,.07);
  padding:16px 16px 18px;
  white-space: normal; /* ← wrap を戻す。nowrap だと崩れます */
}
.kitten-card__thumb img{ width:100%; height:auto; display:block; border-radius:12px; }
/* ───────── 子猫 一覧カード：画像とpillの間隔 ───────── */
.kitten-card__status{ display:flex; justify-content:center; margin: 20px 0 10px;  /* ← 上下余白を広めに */ }
/* ───────── 子猫 詳細ページ：タイトル下のpill＆価格 ───────── */
/* pillをインラインブロック化して上下マージンを有効化 */
.single-kittens .kitten-status-pill{
  display: inline-block;
  margin: 10px 0 12px;   /* pillの上下に余白 */
}

footer.kitten.footer {
  display: flex;
  justify-content: center; /* 水平方向中央寄せ */
  align-items: center;     /* 垂直方向中央寄せ（高さがある場合） */
  text-align: center;      /* インライン要素にも効かせたい場合 */
}

/* ========== 価格の揃え（アーカイブ＆詳細 共通） ========== */
.kittens-archive .kitten-card__price,
.single-kittens  .kitten-card__price,
.single-kittens  .kitten-price{
  text-align: right !important;
  font-weight: 700 !important;
  font-size: 1.1rem;
  margin: 8px 0 12px !important;
}
.kittens-archive .kitten-card__price small,
.single-kittens  .kitten-price small{
  font-weight: 400;
  font-size: .9em;
}

/* 旧誤記の保険 */
.kitten.price{ text-align:right !important; }

/* ========== 仕様リスト（「項目：値」を揃えて、上下余白も詰める） ========== */
/* コンテナは block（行を grid にする） */
.kitten-table{
  display:block;
  font-size:14px;
  margin: 4px 0 0;
}

/* 行を grid に。左ラベル幅/右値、間隔、上下パディングを詰める */
.kitten-table > div{
  display:grid;
  grid-template-columns: 5.2em 1fr;      /* ← ラベル幅 */
  align-items: center;
  column-gap: .6em;                      /* ← 「項目と値の距離」 */
  padding: 6px 8px;                      /* ← 行の上下左右の余白 */
  border-bottom: 1px dotted #e5eaee;     /* 行の下線を1本だけ */
}
.kitten-table > div:first-child{
  border-top: 1px dotted #e5eaee;        /* 先頭行だけ上に線（不要なら消してOK） */
}

/* dd 側に既定の下線が入っていれば消す（重複防止） */
.kitten-table dd{ border: 0 !important; }

/* テキストのリセットと見やすさ */
.kitten-table dt{
  margin:0; color:#6b7b86; white-space:nowrap;
}
.kitten-table dd{
  margin:0; line-height:1.5;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* スマホはさらにコンパクトに */
@media (max-width: 640px){
  .kitten-table > div{
    grid-template-columns: 5.0em 1fr;
    column-gap: .5em;
    padding: 6px 6px;
  }
}

/* CTA */
.kitten-card__cta{ text-align:center; margin-top:16px; }
.kitten-readmore-btn{
  display:inline-block; background:#E89C9A; color:#fff; padding:12px 26px;
  border-radius:999px; font-weight:700;
}

/* 一覧＆詳細の見出しサイズを統一 */
.post-type-archive-kittens .section-title__heading,
.single-kittens          .section-title__heading{
  font-size:28px; line-height:1.35; margin:0 0 6px;
}


/* =========================================================
   09) Access セクション（クリーン & レスポンシブ）
   ========================================================= */

/* セクション背景 / 見出し・リンク色 */
.access-sec{
  background:#e8929f;                 /* 必要ならブランド色に変更OK */
  color:#fff;
  padding:72px 0;
}
.access-sec .section-title__heading,
.access-sec .section-title__sub{ color:#fff; }
.access-sec a{ color:#fff; text-decoration:underline; }

/* セクション直上の余白を詰めたい場合（任意） */
.access-sec .section-title,
.access-sec .section-title.-enTop{ margin-top:0 !important; }

/* 中央寄せのインナー（スマホでも左右に内側余白） */
.access-inner{
  width:min(1120px, 100%);
  margin:0 auto;
  padding-inline: clamp(14px, 5vw, 24px);   /* ← SPで左右に内側余白 */
  box-sizing:border-box;
}

/* --- 2カラム：CSS Grid（モバイル優先） --- */
.access-grid{
  display:grid !important;               /* 旧 flex を確実に無効化 */
  grid-template-columns: 1fr;            /* SP：縦積み */
  grid-template-areas:
    "map"
    "info";
  gap:28px;
  align-items:start;
}
.access-grid .map-col  { grid-area: map;  min-width:0; }
.access-grid .info-col { grid-area: info; min-width:0; }

/* PC：横並び（map 固定幅 + 情報カラム可変） */
@media (min-width: 1024px){
  .access-grid{
    grid-template-columns: 680px minmax(0,1fr);
    grid-template-areas: "map info";
    gap:32px;
  }
}
@media (min-width: 1400px){
  .access-grid{
    grid-template-columns: 720px minmax(0,1fr);
  }
}

/* --- Google Map（レスポンシブ） --- */
.gmap{
  position:relative;
  width:100%;
  aspect-ratio:4/3;
  min-height:360px;
  overflow:hidden;
  border-radius:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
.gmap iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
/* 古いブラウザ用フォールバック */
@supports not (aspect-ratio:4 / 3){
  .gmap{ padding-top:75%; min-height:0; }
}

/* --- 情報表（定義リスト） --- */
.access-list{ margin:0; width:100%; color:#fff; }
.access-list .row{
  display:grid;
  grid-template-columns: 120px 1fr;   /* 左：ラベル / 右：内容 */
  align-items:start;
  gap:18px;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.6);
}
.access-list .row:first-child{ border-top:1px solid rgba(255,255,255,.6); }
.access-list dt{ font-weight:700; }
.access-list dd{ margin:0; }

/* スマホで少しコンパクトに */
@media (max-width:520px){
  .access-list .row{
    grid-template-columns: 100px 1fr;
    padding:12px;
    gap:14px;
  }
}

/* --- 交通案内カード（任意） --- */
.access-notes{ margin-top:28px; }
.info-cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
@media (max-width:900px){
  .info-cards{ grid-template-columns:1fr; }
}
.note-card{
  background:rgba(255,255,255,.85);
  border:2px solid rgba(255,255,255,.9);
  border-radius:14px;
  padding:18px 20px;
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}
/* カード内文字は読みやすい濃いめ */
.access-sec .note-card,
.access-sec .note-card p,
.access-sec .note-card h3{ color:#334155; }

.note-card__title{
  display:flex; align-items:center; gap:.6em;
  margin:0 0 6px;
  font-size:18px; font-weight:700; line-height:1.4;
}

/* セクション内の h3（カード見出しなど）の余白を少し詰める */
.access-sec .post_content h3,
.access-sec .note-card__title{
  margin:.4rem 0 .7rem !important;
  line-height:1.35;
}
@media (min-width:960px){
  .access-sec .post_content h3,
  .access-sec .note-card__title{
    margin:.5rem 0 .9rem !important;
  }
}
/* ===== Access：PCレイアウトのバランス補正（地図を少し絞って右カラムを確保） ===== */

/* 標準PC（～1440px くらい）では：
   左：地図 = 520～640pxの範囲で可変
   右：情報 = 最低 420px を確保  */
@media (min-width: 1024px){
  .access-grid{
    /*          最小   理想(画面比)  最大       |   右は最小幅420pxを死守  */
    grid-template-columns: clamp(520px, 54vw, 640px) minmax(420px, 1fr);
    gap: clamp(24px, 3vw, 36px);
  }
  /* 地図の縦がつぶれすぎるのも防ぐ（お好みで） */
  .gmap{ min-height: 400px; }
}

/* 広い画面ではもう少し余裕を持たせる（任意） */
@media (min-width: 1440px){
  .access-grid{
    grid-template-columns: 640px minmax(480px, 1fr);
  }
}
/* ===== Access：ノートカード（電車/車）の横余白 & モバイル快適化 ===== */

/* .access-inner と同じ「幅の制御 + 左右の内側余白」を付与 */
.access-notes{
  width: min(1120px, 100%);
  margin: 28px auto 0;                      /* 中央寄せ + 上余白 */
  padding-inline: clamp(14px, 5vw, 24px);   /* スマホで左右に内側余白を確保 */
  box-sizing: border-box;
}

/* カードの並びと間隔（モバイルで心持ち広めに） */
.access-notes .info-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 3.5vw, 20px);            /* 画面に合わせて可変 */
}
@media (max-width: 900px){
  .access-notes .info-cards{ grid-template-columns: 1fr; }
}

/* 各カードの内側余白もモバイルで少し可変に */
.access-notes .note-card{
  background: rgba(255,255,255,.85);
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 14px;
  padding: clamp(14px, 4vw, 20px) clamp(16px, 4.8vw, 22px);
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

/* 下の注意書きも同じリズムで余白を整える */
.access-notes .visit-note{
  margin-top: clamp(18px, 4vw, 24px);
  line-height: 1.9;
}
/* =========================================================
   Visit セクション：画像＋本文（PC=横並び / SP=縦積み）
   ========================================================= */

/* セクションのベース（背景はサイト変数のグレー） */
.visit-sec{
  padding: clamp(40px, 6vw, 72px) 0;
}

/* セクション内コンテンツの横並び（Gridで安定表示） */
.visit-sec .visit-wrap{
  /* WPブロックの横並び(flex)を確実に無効化 */
  display: grid !important;

  /* PC：画像 420〜520px + 本文 可変、のイメージ */
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 40px);
  align-items: start;

  /* セクション左右の内側余白（SPで詰まらないように） */
  width: min(1120px, 100%);
  margin: clamp(12px, 2vw, 24px) auto 0;
  padding-inline: clamp(14px, 5vw, 24px);
  box-sizing: border-box;
}

/* スマホ：縦積み＆画像を先頭に */
@media (max-width: 900px){
  .visit-sec .visit-wrap{
    grid-template-columns: 1fr;
  }
  .visit-sec .visit-media{
    order: -1;                 /* 画像を先に */
    margin: 0 auto 8px;        /* 画像を中央 */
    max-width: 520px;
    width: min(92%, 520px);
  }
}

/* 画像の見栄え */
.visit-sec .visit-media img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

/* テキスト側（visit-media 以外の要素）を広がりやすく */
.visit-sec .visit-wrap > *:not(.visit-media){
  min-width: 0;  /* 長い日本語の折返しで崩れないように */
}

/* 段落やリストの読みやすさ */
.visit-sec .visit-wrap p{ line-height: 1.9; }
.visit-sec .visit-wrap ol{ padding-left: 1.2em; margin: .4em 0 1em; }
.visit-sec .visit-wrap li{ margin: .4em 0; }

/* “注意書き”等の下段にも余白を確保（任意） */
.visit-sec .visit-note{ 
  margin-top: clamp(16px, 3vw, 28px);
  line-height: 1.9;
}
/* ===== Visit セクション 微調整（余白＆カラム間隔）===== */

/* 上の余白だけ少し減らす（以前: 40px〜72px 相当） */
.visit-sec{
  padding-top: clamp(28px, 4.5vw, 56px);
}

/* PC時の写真↔本文の距離（カラム間のgap）を少し詰める */
@media (min-width: 960px){
  .visit-sec .visit-wrap{
    column-gap: clamp(12px, 2.2vw, 18px);  /* 距離の微調整は数値を前後させてOK */
  }
}

/* スマホ時の縦積みでも少しだけコンパクトに（任意） */
@media (max-width: 959.98px){
  .visit-sec .visit-wrap{
    row-gap: clamp(14px, 3vw, 20px);
  }
}
/* 見出しの直下の余白を少し広げる */
.post_content .visit-sec .section-title { 
  margin-bottom: clamp(14px, 3.5vw, 24px);
}
.post_content .visit-wrap{
  /* 写真と文章の距離（カラム間）を少し詰める */
  gap: clamp(14px, 2.8vw, 24px);
}
/* 説明文コンテナ：横幅を絞りつつ左右にインナー余白、行間もゆったり */
.post_content .visit-sec .visit.text{
  width: min(42rem, 100%);                  /* 行の長さを最適化 */
  margin: 0 auto clamp(20px, 5vw, 32px);    /* 下に余白（→地図との間隔） */
  padding-inline: clamp(16px, 5vw, 24px);   /* スマホで左右の“内側余白” */
  line-height: 1.9;
}

/* 段落間にも少し間隔 */
.post_content .visit-sec .visit.text p{
  margin: 0 0 1em;
}

/* （任意）地図の上にも少しだけ余白を足したい場合 */
.post_content .visit-sec .gmap{
  margin-top: clamp(12px, 3vw, 20px);
}
/* ── 画像ブロックの「サイズ変更」を無効化 → 余白の原因を除去 ── */
.post_content figure.visit-media.is-resized,
.post_content figure.visit-media[style]{
  width: 100% !important;       /* エディタが埋めた inline width を上書き */
  max-width: none !important;
}

/* 画像が列いっぱいに綺麗に広がるように */
.post_content figure.visit-media{
  margin: 0;                    /* 余計な外側マージンを除去 */
  text-align: left;             /* SWELLの center 指定を無効化 */
}
.post_content figure.visit-media > img{
  display: block;               /* インラインの隙間対策 */
  width: 100%;
  height: auto;
}
/* 見学セクションの文字色をデフォルト(#706D6D)に戻す */
.post_content .visit-sec{
  color: #706D6D;                 /* 親で基準色を指定（#333を上書き） */
}

/* 見出しも同じ色に */
.post_content .visit-sec .section-title__heading{
  color: #706D6D;
}

/* もしリンク色を親に合わせたい場合（任意） */
.post_content .visit-sec a{ color: inherit; }

/* 見学セクション：見出し下の余白を増やす */
.post_content .visit-sec .section-title{
  margin-bottom: 1.2rem;   /* SPのとき（控えめ） */
}

@media (min-width: 1024px){
  .post_content .visit-sec .section-title{
    margin-bottom: 2.4rem; /* PCのとき：ここを 2.0–3.0rem で好み調整OK */
  }
}
/* 猫舎見学のイントロ文（ピンクのセクション）に余白を付ける */
.post_content .access-sec .visit-text{
  display:block;                              /* p でも group でもOK */
  width: min(42rem, 100%);                    /* PCで行の長さを最適化 */
  margin: 0 auto clamp(20px, 5vw, 32px);      /* 下に余白 → 地図との間隔 */
  padding-inline: clamp(16px, 5vw, 24px);     /* SPで左右の内側余白 */
  line-height: 1.9;
}

/* visit-text 内の段落の間隔（グループに付けた場合用） */
.post_content .access-sec .visit-text p{ margin: 0 0 1em; }

/* もし visit-text を “最初の段落だけ” に付けた場合、
   その直後の段落にも同じ余白を適用（2つ先まで拡張） */
.post_content .access-sec .visit-text + p,
.post_content .access-sec .visit-text + p + p{
  margin-top: .8em;
  padding-inline: clamp(16px, 5vw, 24px);
  line-height: 1.9;
}

/* 地図の上にも少し余白（任意） */
.post_content .access-sec .gmap{
  margin-top: clamp(12px, 3vw, 20px);
}

/* =========================================================
   Online Visit / オンライン見学  —— クリーン最終版
   （.ov-sec / .ov sec、ov-btn line / ov btn line 両対応）
   ========================================================= */

/* ---------- 1) 色の変数 ---------- */
:root{
  --ov-text:    #706D6D;      /* 本文色 */
  --ov-marker:  #f4cecd;      /* 見出しマーカー */
  --ov-rail:    #dfeee8;      /* タイムライン左レール */
  --ov-badge:   #9fd6c5;      /* 丸数字の枠線 */
  --ov-badge-t: #59b79b;      /* 丸数字の数字色 */
  --ov-green:   #59b79b;      /* ①〜③と同じ緑（LINEボタンもこれ） */
}

/* ---------- 2) セクション土台 ---------- */
.post_content .ov-sec,
.post_content .ov.sec{
  background: var(--color_gray, #f6f7f9);
  color: var(--ov-text);
  padding: clamp(56px, 6vw, 88px) 0;
}

/* 2カラム（左=テキスト／右=画像） */
.post_content .ov-sec .ov-inner,
.post_content .ov.sec .ov-inner{
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
@media (max-width: 960px){
  .post_content .ov-sec .ov-inner,
  .post_content .ov.sec .ov-inner{
    grid-template-columns: 1fr;
  }
}

/* ---------- 3) ご検討中の方へ（チップ） ---------- */
.post_content .ov-sec .ov-eyebrow,
.post_content .ov.sec .ov-eyebrow{
  display: inline-flex; align-items: center; gap: .6em;
  padding: .6em 1.15em; border-radius: 999px;
  border: 2px solid var(--ov-marker); background: #fff;
  font-weight: 700; font-size: .95rem; line-height: 1;
  margin: .6rem 0 1rem;
}
.post_content .ov-sec .ov-eyebrow::before,
.post_content .ov.sec .ov-eyebrow::before{
  content: ""; width: 1.25em; height: 1.25em;
  background: url("/wp-content/uploads/2025/08/paw.svg") no-repeat center/contain;
  opacity: .95;
}

/* ---------- 4) 見出し（h2）＋マーカー ---------- */
.post_content .ov-sec .ov-title,
.post_content .ov.sec .ov-title{
  margin: .45rem 0 .95rem; line-height: 1.28; font-weight: 700; color: var(--ov-text);
}
.post_content .ov-sec .ov-title::before,
.post_content .ov.sec .ov-title::before,
.post_content .ov-sec .ov-title::after,
.post_content .ov.sec .ov-title::after{
  content: none !important; display: none !important;
}
.post_content .ov-sec .ov-title > span,
.post_content .ov.sec .ov-title > span{
  background-image: linear-gradient(to bottom, transparent calc(100% - .46em), var(--ov-marker) 0);
  background-repeat: no-repeat; background-size: 100% .46em; background-position: 0 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  padding: 0 .06em;
}

/* ---------- 5) 手順（①②③） ---------- */
.post_content .ov-sec .ov-steps,
.post_content .ov.sec .ov-steps{
  counter-reset: step; list-style: none;
  margin: 1rem 0 1.25rem; padding-left: 22px; border-left: 3px solid var(--ov-rail);
}
.post_content .ov-sec .ov-steps > li,
.post_content .ov.sec .ov-steps > li{
  display: grid; grid-template-columns: 2.1rem 1fr; column-gap: .9rem;
  align-items: start; margin: 18px 0; line-height: 1.9;
}
.post_content .ov-sec .ov-steps > li::before,
.post_content .ov.sec .ov-steps > li::before{
  counter-increment: step; content: counter(step);
  grid-column: 1; display: grid; place-items: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 2px solid var(--ov-badge); color: var(--ov-badge-t);
  background: #fff; font-weight: 700; line-height: 1;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.post_content .ov-sec .ov-steps > li > *,
.post_content .ov.sec .ov-steps > li > *{ grid-column: 2; }

/* ---------- 6) 画像カード（右側） ---------- */
.post_content .ov-sec .ov-media,
.post_content .ov.sec .ov-media,
.post_content .ov-sec figure.ov.media,
.post_content .ov.sec  figure.ov.media{
  position: relative; margin: 0; max-width: 560px; justify-self: end;
  transform: rotate(-2.2deg);
}
.post_content .ov-sec .ov-media img,
.post_content .ov.sec .ov-media img,
.post_content .ov-sec figure.ov.media img,
.post_content .ov.sec  figure.ov.media img{
  display: block; width: 100%; height: auto; border-radius: 28px;
  box-shadow: 0 30px 60px rgba(0,0,0,.14);
  -webkit-mask-image: radial-gradient(120% 120% at 50% 40%, #000 60%, transparent 100%);
          mask-image: radial-gradient(120% 120% at 50% 40%, #000 60%, transparent 100%);
}
.post_content .ov-sec .ov-badge,
.post_content .ov.sec  .ov-badge,
.post_content .ov-sec figure.ov.media figcaption,
.post_content .ov.sec  figure.ov.media figcaption{
  position: absolute; right: 12px; bottom: -14px;
  background: #fff; color: var(--ov-text);
  border: 1px solid #e8edf2; border-radius: 999px;
  padding: .45em .9em; font-size: .85rem; font-weight: 700;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
@media (max-width: 960px){
  .post_content .ov-sec .ov-media,
  .post_content .ov.sec  .ov-media,
  .post_content .ov-sec figure.ov.media,
  .post_content .ov.sec  figure.ov.media{
    order: -1; justify-self: center; transform: rotate(-1.5deg);
  }
  .post_content .ov-sec .ov-media img,
  .post_content .ov.sec  .ov-media img,
  .post_content .ov-sec figure.ov.media img,
  .post_content .ov.sec  figure.ov.media img{
    max-width: 86vw;
  }
}

/* ---------- 7) 注意書き ---------- */
.post_content .ov-sec .ov-note,
.post_content .ov.sec .ov-note{
  margin: .8rem 0 0; color: rgba(0,0,0,.65); font-size: .95rem; line-height: 1.9;
  padding-left: 1.2em; text-indent: -1.2em;
}
.post_content .ov-sec .ov-note::before,
.post_content .ov.sec .ov-note::before{ content: "※"; margin-right: .25em; }

/* ---------- 8) CTA（ボタン行） ---------- */
.post_content .ov-sec .ov-cta,
.post_content .ov.sec  .ov-cta,
.post_content .ov-sec .ov.cta,          /* ハイフン無し fallback */
.post_content .ov.sec  .ov.cta{
  display: flex; gap: 14px; flex-wrap: wrap;
}
@media (max-width: 768px){
  .post_content .ov-sec .ov-cta,
  .post_content .ov.sec  .ov-cta,
  .post_content .ov-sec .ov.cta,
  .post_content .ov.sec  .ov.cta{
    justify-content: center;
  }
}

/* ---------- 9) ボタン（ここが勝ち筋） ---------- */
/* セクション内の通常リンク色（ボタンは除外） */
.post_content .ov-sec a:not(.ov-btn):not(.ov-btn-line),
.post_content .ov.sec  a:not(.ov-btn):not(.ov-btn-line){
  color: var(--ov-text);
}

/* LINEボタン：背景=緑、文字=白（全バリエーションに適用）
   ※ :link / :visited を含め、テーマの a 色に必ず勝つようにする */
.post_content .ov-sec a.ov-btn-line,
.post_content .ov.sec  a.ov-btn-line,
.post_content .ov-sec a.ov-btn.line,
.post_content .ov.sec  a.ov-btn.line,
.post_content .ov-sec a.ov.btn.line,
.post_content .ov.sec  a.ov.btn.line,
.post_content .ov-sec a.ov-btn-line:link,
.post_content .ov.sec  a.ov-btn-line:link,
.post_content .ov-sec a.ov-btn-line:visited,
.post_content .ov.sec  a.ov-btn-line:visited,
.post_content .ov-sec a.ov-btn.line:link,
.post_content .ov.sec  a.ov-btn.line:link,
.post_content .ov-sec a.ov-btn.line:visited,
.post_content .ov.sec  a.ov-btn.line:visited,
.post_content .ov-sec a.ov.btn.line:link,
.post_content .ov.sec  a.ov.btn.line:link,
.post_content .ov-sec a.ov.btn.line:visited,
.post_content .ov.sec  a.ov.btn.line:visited{
  background: var(--ov-green) !important;
  border-color: var(--ov-green) !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* ボタン内の子要素（span等）も必ず白 */
.post_content .ov-sec a.ov-btn-line *,
.post_content .ov.sec  a.ov-btn-line *,
.post_content .ov-sec a.ov-btn.line *,
.post_content .ov.sec  a.ov-btn.line *,
.post_content .ov-sec a.ov.btn.line *,
.post_content .ov.sec  a.ov.btn.line *{
  color: #fff !important; fill: #fff !important;
}

/* サブボタン（フォーム） */
.post_content .ov-sec a.ov-btn.-sub,
.post_content .ov.sec  a.ov-btn.-sub,
.post_content .ov-sec a.ov.btn.sub,
.post_content .ov.sec  a.ov.btn.sub{
  background: #fff; color: var(--ov-text); border-color: #e5e9ef;
}

/* ふわっと浮くホバー */
.post_content .ov-sec a.ov-btn:hover,
.post_content .ov.sec  a.ov-btn:hover,
.post_content .ov-sec a.ov.btn:hover,
.post_content .ov.sec  a.ov.btn:hover,
.post_content .ov-sec a.ov-btn-line:hover,
.post_content .ov.sec  a.ov-btn-line:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
/* ===== Online Visit（#online-visit）最終パッチ ===== */
:root{ --ov-green: #59b79b; } /* ①〜③と同じ緑（未定義なら使われます） */

/* LINEボタン：背景=緑、文字=白  ← ここが本命（.ov-btn.-line を指定）*/
.post_content #online-visit .ov-cta a.ov-btn.-line{
  background: var(--ov-green, #59b79b) !important;
  border-color: var(--ov-green, #59b79b) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;   /* iOS/Safari 保険 */
  text-decoration: none !important;
}
/* ボタン内の子要素も白で固定 */
.post_content #online-visit .ov-cta a.ov-btn.-line *{
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  fill: #fff !important;
}

/* フォーム（サブ）ボタン：白背景＋グレー文字 */
.post_content #online-visit .ov-cta a.ov-btn.-sub{
  background: #fff !important;
  border: 1px solid #e5e9ef !important;
  color: var(--ov-text, #706D6D) !important;
  -webkit-text-fill-color: var(--ov-text, #706D6D) !important;
}

/* ホバーで少しだけ浮かせる */
.post_content #online-visit .ov-cta a.ov-btn.-line:hover,
.post_content #online-visit .ov-cta a.ov-btn.-sub:hover{
  filter: brightness(.95);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

/* SP はボタン行を中央寄せ（念のため強制） */
@media (max-width:768px){
  .post_content #online-visit .ov-cta{ justify-content: center !important; }
}

/* --- 将来の表記ゆれ対策（任意 / 付けておくと安心） --- */
.post_content #online-visit .ov-cta a.ov-btn-line,
.post_content #online-visit .ov-cta a[class~="ov"][class~="btn"][class~="line"]{
  background: var(--ov-green, #59b79b) !important;
  border-color: var(--ov-green, #59b79b) !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
}
.post_content #online-visit .ov-cta a.ov-btn-line *,
.post_content #online-visit .ov-cta a[class~="ov"][class~="btn"][class~="line"] *{
  color:#fff !important; -webkit-text-fill-color:#fff !important; fill:#fff !important;
}

/* ===== Online Visit｜CTA ボタンの最終仕上げ ===== */

/* 行の間隔など */
.post_content #online-visit .ov-cta{ gap:12px; }

/* ベース：サイズ感・丸み・アニメーション */
.post_content #online-visit .ov-cta .ov-btn{
  --h: 44px;
  min-height: var(--h);
  padding: .65em 1.25em;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  text-decoration: none;
  transition: box-shadow .18s ease, transform .12s ease, filter .2s ease, background .2s ease;
}

/* LINEボタン：上品なグラデ＋柔らかい影（文字は必ず白） */
.post_content #online-visit .ov-cta .ov-btn.-line{
  background: linear-gradient(180deg, #5ec3ac 0%, #59b79b 100%);
  border-color: #3e9f86;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 6px 16px rgba(89,183,155,.28);
}
.post_content #online-visit .ov-cta .ov-btn.-line:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 10px 24px rgba(89,183,155,.34);
}
.post_content #online-visit .ov-cta .ov-btn.-line:active{
  transform: translateY(0);
  filter: brightness(.98);
  box-shadow: 0 6px 14px rgba(89,183,155,.26);
}
.post_content #online-visit .ov-cta .ov-btn.-line:focus-visible{
  outline: 3px solid rgba(89,183,155,.35);
  outline-offset: 2px;
}

/* 小さめの吹き出しアイコン（画像不要・色は文字色に追従） */
.post_content #online-visit .ov-cta .ov-btn.-line::before{
  content: "";
  width: 1.1em; height: 1.1em; margin-right: .45em;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M20 2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h3.6l3.9 3.25c.66.55 1.66.09 1.66-.77V18H20a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M20 2H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h3.6l3.9 3.25c.66.55 1.66.09 1.66-.77V18H20a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2Z"/></svg>') center/contain no-repeat;
}

/* フォームボタン：クリーンなゴースト（白地＋細い枠） */
.post_content #online-visit .ov-cta .ov-btn.-sub{
  background: #fff;
  color: var(--ov-text, #706D6D);
  border: 1px solid #d9e0e5;
  box-shadow: 0 4px 12px rgba(28,39,49,.04);
}
.post_content #online-visit .ov-cta .ov-btn.-sub:hover{
  border-color: #cbd6dd;
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(28,39,49,.06);
}

/* モバイルは1列で大きくタップしやすく */
@media (max-width:560px){
  .post_content #online-visit .ov-cta{ gap:10px; }
  .post_content #online-visit .ov-cta .ov-btn{ width:100%; }
}
/* PC(デフォルト)ではラベル非表示 */
.post_content #online-visit .ov-media::before,
.post_content #online-visit figure.ov.media::before{
  content: none;   /* ← これでPCでは出さない */
}

/* スマホだけ左上に表示 */
@media (max-width: 960px){
  .post_content #online-visit .ov-media::before,
  .post_content #online-visit figure.ov.media::before{
    content: "オンライン見学";
    position: absolute;
    left: 10px;
    top: 10px;
    padding: .4em .8em;
    border-radius: 999px;
    font-weight: 700;
    font-size: .8rem;
    background: var(--ov-green, #59b79b);
    color: #fff;
    border: 1px solid #3ea48a;
    box-shadow: 0 6px 18px rgba(0,0,0,.10);
    z-index: 2;
    pointer-events: none;
  }
}


/* =========================================================
   10) 親猫
   ========================================================= */
/* ===== 親猫紹介（Parents）共通 ===== */

/* タイトル周りの余白を少し広げる */
.parents-page .section-title { 
  margin: 24px auto 18px !important;
}
@media (max-width: 640px){
  .parents-page .section-title { margin: 18px auto 12px !important; }
}

/* ── MAMA / PAPA のセクション見出し ── */
.parents-group__title{
  text-align: center;
  margin: 22px 0 16px;
  font-weight: 800;
  font-size: 1.2em; 
  letter-spacing: .12em;
  color: #706D6D;
  position: relative;
}
.parents-group__title span{
  display:inline-block;
  background:#fff;
  padding: 0 .9em;
  border-radius: 999px;
}
.parents-group__title::before,
.parents-group__title::after{
  content:"";
  position:absolute;
  top:50%;
  width:40%;
  height:1px;
  background: #e8ecef;
}
.parents-group__title::before{ left:0; transform: translateY(-50%); }
.parents-group__title::after{ right:0; transform: translateY(-50%); }

/* ── 親猫カード本体 ── */
.parent-card{
  background:#fff;
  border:1px solid #eef2f5;
  border-radius:16px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  padding: 20px 20px 22px;
  margin: 16px 0 28px;
}

/* 画像＋本文の2カラムレイアウト */
.parent-card__grid{
  display:grid;
  grid-template-columns: 340px 1fr;   /* 画像 / 本文 */
  gap: 18px 24px;
  align-items:start;
}
@media (max-width: 1024px){
  .parent-card__grid{ grid-template-columns: 300px 1fr; }
}
@media (max-width: 800px){
  .parent-card__grid{ grid-template-columns: 1fr; }
}

/* サムネイル */
.parent-card__thumb img{
  width: 100%;
  height: auto;
  display:block;
  border-radius: 12px;
  object-fit: cover;
}

/* 名前（カード内の大見出し） */
.parent-card__name{
  margin: 6px 0 10px;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: .02em;
}
.parent-card__name a{ color: inherit; text-decoration: none; }

/* ── 仕様テーブル（dt/dd の左右2列） ── */
.parent-spec{
  margin: 8px 0 12px;
  display: grid;
  gap: 0;                     /* 行間は各行の padding で調整 */
}
.parent-spec > div{
  display:grid;
  grid-template-columns: 7.5em 1fr;   /* ラベル幅 / 値 */
  align-items:center;
  padding: 10px 0;
  border-bottom: 1px dotted #e5eaee;
}
.parent-spec > div:first-child{ border-top: 1px dotted #e5eaee; }
.parent-spec dt{
  margin:0;
  font-weight:700;
}
.parent-spec dd{
  margin:0;
  line-height: 1.8;
  /* 長い値は1行で省略（必要なら外してください） */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width:640px){
  .parent-spec > div{ grid-template-columns: 6.5em 1fr; padding: 9px 0; }
}

/* 紹介文 */
.parent-card__intro{
  margin-top: 10px;
  line-height: 1.95;
}

/* カード間のすき間調整（最終カード下を少し広めに） */
.parents-group .parent-card:last-child{ margin-bottom: 36px; }

/* ===== Parents 見出し（MAMA / PAPA）を白文字＋グレー背景に ===== */

/* 余白とセンタリング */
.parents-group__title{
  text-align: center;
  margin: 26px 0 18px;     /* 上に少し余白を増やす */
  position: relative;
}

/* ラベル本体（白文字＋グレー背景） */
.parents-group__title > span{
  display: inline-block;
  background: #E0D98B;
  color: #fff;
  padding: .5em 1.1em;
  border-radius: 6px;      /* 角丸。丸 Pill にしたければ 999px に */
  font-weight: 800;
  letter-spacing: .12em;
  font-size: clamp(16px, 1.05rem + .2vw, 20px); /* ほんのり大きめに */
}

/* 以前の左右ライン装飾をオフ（ごちゃつき解消） */
.parents-group__title::before,
.parents-group__title::after{
  content: none !important;
}

/*（任意）スマホは少しだけ詰める */
@media (max-width: 599px){
  .parents-group__title{
    margin: 20px 0 14px;
  }
  .parents-group__title > span{
    padding: .45em 1em;
  }
}
/* セクション見出し */
.kitten-section__title{
  color:#706D6D; font-weight:700;
  font-size: clamp(16px, 2.1vw, 20px);
  margin: 28px 0 14px;
}

/* 2列グリッド（SPは1列） */
.parents-mini__grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:18px;
}
@media (max-width: 800px){ .parents-mini__grid{ grid-template-columns:1fr; } }

/* カード本体 */
.parents-mini__card{
  display:grid; grid-template-columns: 180px 1fr; gap:14px;
  background:#fff; border-radius:14px; box-shadow:0 10px 26px rgba(0,0,0,.07);
  padding:14px; color:#706D6D;
}
@media (max-width: 520px){ .parents-mini__card{ grid-template-columns: 120px 1fr; } }

.parents-mini__thumb img{ width:100%; height:auto; display:block; border-radius:10px; }
.parents-mini__name{ margin:4px 0 8px; font-size:18px; font-weight:700; color:#706D6D; }

.parents-mini__badge{
  display:inline-block; font-size:12px; font-weight:700; letter-spacing:.06em;
  color:#fff; padding:4px 10px; border-radius:999px;
}
.parents-mini__badge--mama{ background:#E89C9A; }
.parents-mini__badge--papa{ background:#5CA8C4; }

.parents-mini__spec{ margin:6px 0 10px; font-size:14px; }
.parents-mini__spec > div{
  display:grid; grid-template-columns: 3.5em 1fr; gap:8px;
  padding:6px 0; border-bottom:1px dotted #e5eaee;
}
.parents-mini__spec > div:last-child{ border-bottom:none; }
.parents-mini__spec dt{ color:#9aa7b3; }
.parents-mini__spec dd{ margin:0; }

.parents-mini__link{ display:inline-block; font-weight:700; text-decoration:none; }
.parents-mini__card--mama .parents-mini__link{ color:#E89C9A; }
.parents-mini__card--papa .parents-mini__link{ color:#5CA8C4; }


/* 名前リンクの色を 706D6D に固定 */
.parents-mini__name a{
  color:#706D6D !important;   /* テーマのリンク色より優先させる */
  text-decoration:none;
}
.parents-mini__name a:hover{
  color:#5f5b5b;               /* お好みのホバー色に */
}

/* 「MAMAのページへ」「PAPAのページへ」を右寄せ */
.parents-mini__link{
  display:block;
  text-align:right;
  margin-top:8px;
}

/* バッジ色に合わせたリンク色（任意） */
.parents-mini__card--mama .parents-mini__link{ color:#E89C9A; }
.parents-mini__card--papa .parents-mini__link{ color:#5CA8C4; }

/* セクション全体の横幅を整えて中央寄せ */
.parents-mini{
  max-width: 980px;
  margin: 40px auto 32px !important;  /* 上40px 下32px とかに広げる */
}

/* 見出し本体（中央・太字・カラー） */
.parents-mini .kitten-section__title{
  margin: 0 auto 28px; /* 下の余白を18px→28px に拡大 */
  color: #706D6D;
  font-weight: 800;
  letter-spacing: .04em;
  position: relative;
  width: fit-content;        /* 文字幅に合わせる */
}

/* 見出しテキスト（ハイライト下線用） */
.parents-mini .kitten-section__title > span{
  position: relative;
  display: inline-block;
  padding: 0 .6em;
}

/* 足あとアイコン（左右） */
/* --- 足あとSVG（マスク） --- */
.kitten-section__title{
  /* 見出し文字色＝足あと色にしたい色 */
  color: #706D6D;
  /* お好みで */
  text-align:center;
}

/* ぱっとサイズ変更したい時はこの変数だけ替えればOK */
.kitten-section__title{ --paw-size: 18px; }

.kitten-section__title::before,
.kitten-section__title::after{
  content:"";
  display:inline-block;
  width: var(--paw-size);
  height: var(--paw-size);
  vertical-align: -.15em;
  margin: 0 .5em;
  /* ←ここで paw.svg をマスクとして使う */
  -webkit-mask: url('/wp-content/uploads/2025/08/paw.svg') no-repeat center;
          mask: url('/wp-content/uploads/2025/08/paw.svg') no-repeat center;
  -webkit-mask-size: contain;
          mask-size: contain;
  /* マスクに塗る色（=見出しの color をそのまま使う） */
  background-color: currentColor;
  opacity: .95;
}
.parents-mini .kitten-section__title::before{
  left: -28px;
  color: #E89C9A;   /* MAMAカラー */
}
.parents-mini .kitten-section__title::after{
  right: -28px;
  color: #5CA8C4;   /* PAPAカラー */
}

/* 1カードしか無い時も中央寄せ（任意） */
.parents-mini__grid{
  display: grid; /* 既にgridなら不要 */
  justify-content: center;
}


/* =========================================================
   11) 出産情報
   ========================================================= */
/* ===== 季節見出し（写真の上／装飾付き） ===== */
.post_content .season-title{
  /* レイアウト */
  margin: clamp(8px, 2vw, 14px) auto clamp(16px, 3.2vw, 24px);
  text-align: center;

  /* タイポ＆カラー */
  color: #5CA8C4;                 /* メインカラー */
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.25;
  letter-spacing: .06em;

  /* 位置調整 */
  position: relative;
}



.post_content .season-title::before{ margin-right: .5em; }
.post_content .season-title::after { margin-left:  .5em;  }

/* 見出しの左右にラインを引く（内側の <span> を使う） */
.post_content .season-title > span{
  position: relative;
  display: inline-block;
  padding: 0 .6em;
}

.post_content .season-title > span::before,
.post_content .season-title > span::after{
  content: "";
  position: absolute;
  top: 50%;
  width: clamp(44px, 10vw, 120px);
  height: 2px;
  background: #5CA8C4;
  opacity: .35;
  transform: translateY(-50%);
}

.post_content .season-title > span::before{ right: 100%; margin-right: .8em; }
.post_content .season-title > span::after {  left: 100%;  margin-left:  .8em; }

/* 見出しの下に短いアンダーライン（好みでON/OFF） */
.post_content .season-title:after{
  content: "";
  display: block;
  width: 88px; height: 4px;
  margin: .55rem auto 0;
  background: #5CA8C4;
  opacity: .25;
  border-radius: 999px;
}

/* 画面が狭いときは少しだけコンパクトに */
@media (max-width: 520px){
  .post_content .season-title::before,
  .post_content .season-title::after{ width: 22px; height: 22px; vertical-align: -4px; }
  .post_content .season-title > span::before,
  .post_content .season-title > span::after{ width: 64px; }
}

/* ===== 一覧の並び ===== */
.post_content .litter-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:24px;
}

/* ===== カードの箱 ===== */
.post_content .litter-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e7ecf2;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.05);
}

/* 画像 */
.post_content .litter-card .litter-media{ margin:0; }
.post_content .litter-card .litter-media img{
  display:block; width:100%; height:auto;
}

/* 本文 */
.post_content .litter-card .litter-body{
  padding:16px 18px;
  color:#706D6D;
}
.post_content .litter-card .litter-title{
  margin:0 0 6px; font-weight:700; font-size:18px;
}
.post_content .litter-card .litter-meta{
  margin:8px 0 0; font-size:14px; line-height:1.8;
}

/* ステータスバッジ（左上） */
.post_content .litter-card .badge{
  position:absolute; left:12px; top:12px;
  padding:.35em .6em; font-size:.8rem; font-weight:700;
  color:#fff; border-radius:999px; line-height:1;
  box-shadow:0 6px 12px rgba(0,0,0,.12);
}
.post_content .litter-card .badge.-open{    background:#59b79b; } /* 募集中 */
.post_content .litter-card .badge.-planned{ background:#e1a948; } /* 出産予定 */
.post_content .litter-card .badge.-closed{  background:#8b99a6; } /* 決定 */


/* ── 配置の違いだけ切替 ───────────────── */
/* カードの外側に置くとき（段落などに付ける） */
.badge.-outside{
  position:static;               /* ＝通常の流れ */
  margin:0 0 .5rem .25rem;       /* 見出しの下にちょい余白 */
}

/* 画像の上に重ねる従来の置き方（必要なら） */
.litter-card .badge.-inside{
  position:absolute; z-index:2;
  top:10px; left:10px;
}


/* ===== CTA 行（ボタン2つ） ===== */
.post_content .litter-card .litter-cta{
  margin-top:auto;                      /* カード最下部に寄せる */
  padding:14px 18px 18px;
  display:flex; flex-wrap:wrap; gap:10px;
}

/* ボタンの土台（WP/SWELLどちらでも効く） */
.post_content .litter-card .litter-cta .wp-block-button__link{
  --h:44px;
  min-height:var(--h);
  padding:.65em 1.2em;
  border-radius:999px;
  font-weight:700; letter-spacing:.02em; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid transparent;
  text-decoration:none !important;
  transition:box-shadow .18s ease, transform .12s ease, filter .2s ease, background .2s ease;
}

/* LINE（緑） */
.post_content .litter-card .litter-cta .btn.-line .wp-block-button__link{
  background:linear-gradient(180deg,#5ec3ac 0%, #59b79b 100%) !important;
  border-color:#3e9f86 !important;
  color:#fff !important; -webkit-text-fill-color:#fff !important;
  box-shadow:0 6px 16px rgba(89,183,155,.28);
}
.post_content .litter-card .litter-cta .btn.-line .wp-block-button__link:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  box-shadow:0 10px 24px rgba(89,183,155,.34);
}

/* フォーム（白ゴースト） */
.post_content .litter-card .litter-cta .btn.-ghost .wp-block-button__link{
  background:#fff !important;
  color:#706D6D !important;
  border:1px solid #d9e0e5 !important;
  box-shadow:0 4px 12px rgba(28,39,49,.05);
}
.post_content .litter-card .litter-cta .btn.-ghost .wp-block-button__link:hover{
  border-color:#cbd6dd !important;
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(28,39,49,.08);
}

/* SPは幅いっぱいでタップしやすく */
@media (max-width:480px){
  .post_content .litter-card .litter-cta .wp-block-button{ flex:1 1 100%; }
  .post_content .litter-card .litter-cta .wp-block-button__link{ width:100%; }
}
/* ===== STEP FLOW base ===== */
.stepflow{
  --accent: #9FC7D7;       /* アクセント色 */
  --bg: #F7F8FA;           /* カードの背景 */
  --text: #706D6D;         /* 文字 */
  --title: #3A3A3A;
  --shadow: 0 1px 0 rgba(0,0,0,.04);
  color: var(--text);
}

/* セクションタイトル（リボン風） */
.ribbon-title{
  display:inline-block;
  margin: 0 auto 24px;
  padding: .6rem 1.1rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--title);
  position: relative;
  text-align:center;
}
.ribbon-title::before,
.ribbon-title::after{
  content:"";
  position:absolute; top:50%;
  width:64px; height:18px;
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 14px;
  transform: translateY(-50%);
  opacity:.9;
}
.ribbon-title::before{ left:-80px; rotate:-6deg; }
.ribbon-title::after{ right:-80px; rotate: 6deg; }

/* ===== STEP Card ===== */
.step-card{
  background: var(--bg);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 24px 22px;
  margin: 24px 0;
}

.step-row{
  display:flex;
  align-items:center;
  gap: 20px;
}

.step-head{
  display:flex;
  align-items:baseline;
  gap: 8px;
  margin: 0 0 6px;
  font-weight:700;
  color: #E89C9A;
}
.step-num{
  font-family: "Poppins","Noto Sans JP",sans-serif;
  font-size: clamp(28px, 2.4vw, 34px);
  color: var(--accent);
  line-height:1;
  letter-spacing:.04em;
}
.step-title{
  font-size: clamp(18px,1.6vw,22px);
  line-height:1.4;
}
.step-body{
  margin: .35rem 0 0;step-head
  line-height: 1.9;
}

/* 右側ボタン */
.step-cta{ margin-left:auto; }
.step-cta .swell-block-button__link,
.step-cta .wp-block-button__link{
  min-width: 180px;
}

/* ステップ間の下向きマーク（SVG） */
.step-arrow{
  width: 40px; height: 40px;
  margin: 18px auto 2px;
  opacity:.4;
  background: center/contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23706D6D'%3E%3Cpath d='M12 16.5 4.5 9l1.4-1.4L12 13.3l6.1-5.7L19.5 9 12 16.5z'/%3E%3C/svg%3E");
}

/* レスポンシブ：スマホは縦積み */
@media (max-width: 767px){
  .step-row{ flex-direction:column; align-items:flex-start; gap:12px; }
  .step-cta{ margin:10px 0 0; width:100%; }
  .step-cta .swell-block-button__link,
  .step-cta .wp-block-button__link{ width:100%; }
  .ribbon-title::before{ left:-56px; }
  .ribbon-title::after{ right:-56px; }
}

/* ===== 出産情報　親猫情報 ===== */
/* 画像2枚を横並び（スマホは1列） */
.post_content .parent-row{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 2.6vw, 18px);
  align-items: start;
}
@media (max-width: 768px){
  .post_content .parent-row{
    grid-template-columns: 1fr !important;
  }
}

/* 親カード本体 */
.parent-card{ position:relative; margin:0; border-radius:12px; overflow:hidden;
  background:#fff; box-shadow:0 8px 18px rgba(0,0,0,.06); }
.parent-card .img img{ display:block; width:100%; height:auto; }

/* 画像左上の “父：たろう / 母：みゆき” チップ */
.parent-card .chip{
  position:absolute; left:10px; top:10px;
  background:rgba(255,255,255,.94); border:1px solid #e7edf3;
  border-radius:999px; padding:.25em .6em; font-weight:700; color:#4f6b7a;
  box-shadow:0 6px 12px rgba(0,0,0,.06);
}

/* 画像左下の名前＋サブ情報 */
.parent-card figcaption{
  position:absolute; left:10px; bottom:10px;
  background:rgba(255,255,255,.94); border:1px solid #e7edf3;
  border-radius:10px; padding:.35em .7em; box-shadow:0 6px 12px rgba(0,0,0,.06);
}
.parent-card .name{ font-weight:700; color:#1f2937; margin-right:.4em; }
.parent-card .sub{ font-weight:600; color:#6b7280; }

/* 仕様リスト（dl）を左右詰め＋下線色 #5CA8C4 */
.birth-spec{
  margin: clamp(6px, 1.6vw, 10px) 0;
  border-top:1px solid #5CA8C4;
}
.birth-spec .row{
  display:grid; grid-template-columns: 120px 1fr;
  gap:10px; align-items:start;
  border-bottom:1px solid #5CA8C4;
  padding: 8px 0;
}
.birth-spec dt{ font-weight:700; color:#334155; }
.birth-spec dd{ margin:0; }

/* 注意書き */
.birth-note{ margin:.4rem 0 .6rem; color:#6b7280; }

/* CTA：ボタンの間隔を狭く */
.litter-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.litter-cta .ov-btn{ --h:44px; min-height:var(--h); padding:.65em 1.25em;
  border-radius:999px; font-weight:700; display:inline-flex; align-items:center;
  justify-content:center; text-decoration:none; border:1px solid transparent; }
.litter-cta .ov-btn.-line{
  background:linear-gradient(180deg,#5ec3ac 0%, #59b79b 100%); color:#fff; border-color:#3e9f86;
}
.litter-cta .ov-btn.-sub{
  background:#fff; color:#706D6D; border:1px solid #d9e0e5;
}

/* ── 出産予定カード：親写真ラベル調整 ───────────────── */

/* 画像ラッパは相対配置に（すでにあれば不要） */
.parent-media{ position: relative; }

/* 下のラベルを右下に寄せる（左は無効化） */
.parent-label{
  position: absolute;
  right: 12px;        /* ← 右下 */
  bottom: 12px;
  left: auto;
  margin: 0;

  /* 見た目は現状のまま（必要なら調整） */
  background: #fff;
  border-radius: 999px;
  padding: .35em .8em;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

/* ラベル先頭の <b>（名前）だけ消す → 色柄/性別だけを表示 */
.parent-label b{ display: none !important; }
/* 親カードの土台 */
.parent-card{
  position: relative;
  display: block;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;              /* 角丸に沿って中身も切る */
}

/* 画像 */
.parent-card .img{ line-height: 0; }
.parent-card .img img{
  display: block;
  width: 100%;
  height: auto;
}

/* 上のチップ（父：たろう / 母：みゆき） */
.parent-card .chip{
  position: absolute;
  left: 12px;
  top: 12px;
  background: #fff;
  border: 1px solid #e6eef2;
  padding: .35em .8em;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 6px 14px rgba(0,0,0,.06);
}

/* 下の四角（右下へ）。デフォの余白を消してピル形に */
.parent-card figcaption{
  position: absolute;
  right: 12px;
  bottom: 12px;
  left: auto;
  margin: 0;
  background: #fff;
  border: 1px solid #e6eef2;
  border-radius: 999px;
  padding: .45em .9em;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);
}

/* 下の四角から“名前”だけ消して、色柄/性別だけを残す */
.parent-card figcaption .name{ display: none !important; }
.parent-card figcaption .sub{
  display: block;
  font-size: .85rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
}

/* 出産情報リスト */
.birth-spec{ margin-top: 8px; }
.birth-spec .row{
  display: grid;
  grid-template-columns: 8em 1fr;   /* 左ラベル 右値 */
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px border #5CA8C4; /* 下線色 */
}


.birth-spec dt{
  font-weight: 700;
  color: var(--ov-text, #706D6D);
}
.birth-spec dd{
  margin: 0;
  line-height: 1.9;
}

/* 注釈 */
.birth-note{
  margin: 10px 0 0;
  font-size: .95rem;
  color: rgba(0,0,0,.65);
  line-height: 1.8;
}

/* =========================================================
   12) 購入について
   ========================================================= */
.section-title__frame{
  position: relative;
  padding: 8px 16px;
  outline: 1px solid #706D6D;
  font-size: 24px;
  letter-spacing: .1em;
  color: #706D6D;
  font-weight: 400;
  display: block;
  max-width: 500px;
  text-align: center;
  margin: 24px auto;
}

/* 背景は ::after にする */
.section-title__frame::after{
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 100%;
  height: 100%;
  background: #eee9e6;
  z-index: -1; /* テキストの下に配置 */
}

/* 念のため SWELL の underline を無効化（必要なら） */
.post_content h3.section-title__frame::before{
  content: none !important;
}


/* 通常のセクション */
.purchase-section {
  margin: 40px 0;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 12px;
  border: 1px solid #eee;
}


/* 特別スタイル：予約金・キャンセル */
.highlight-cancel {
  background: #fff5f5;      /* 淡いピンク背景 */
  border: 1px solid #f2bcbc;
}

.highlight-cancel .section-title {
  color: #d9534f;           /* 赤系タイトル */
  border-left-color: #d9534f;
}

.highlight-cancel .note-list li strong {
  color: #c9302c;           /* 強調文字を赤で */
}

/* 小見出し：マーカー風のまま余白を効かせる */
.subhead{
  display: inline-block;           /* ← inline だと上下marginが効きづらいので修正 */
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1.4;
  margin: 22px 0 12px;             /* 全体的にゆとりを出す */
  padding-bottom: 0.05em;
  background-image: linear-gradient(
    to bottom,
    transparent 60%,
    rgba(232,156,154,0.35) 60%
  );
  background-repeat: no-repeat;
  background-size: 100% 0.6em;
  background-position: 0 100%;
}

/* 各セクションの“最初の”小見出しだけ上余白を詰める（見学場所の間延び対策） */
.purchase-section > .subhead:first-of-type{
  margin-top: 8px;                 /* 4px → 8px（周囲とのバランス） */
}

/* 小見出しの前後バランス：直前に要素があるときは上を広めに */
.purchase-section > * + .subhead{
  margin-top: 26px;                /* 同一ボックス内で次の小見出しが来た時の間隔 */
}

/* 段落・リスト・表の行間＆下余白を少し確保 */
.purchase-section p,
.purchase-section ul,
.purchase-section .fee-table{
  margin-top: 6px;
  margin-bottom: 18px;             /* 本文の後ろをあけて詰まり感を解消 */
  line-height: 1.8;
}

/* 箇条書きの内側余白を少しだけ（テーマにより不要なら削除） */
.note-list{
  padding-left: 1.2em;
}

/* スマホ微調整（任意） */
@media (max-width: 480px){
  .subhead{
    font-size: 1.04em;
    background-size: 100% 0.5em;
    margin: 20px 0 10px;
  }
  .purchase-section > * + .subhead{
    margin-top: 22px;
  }
}
/* 強調（色＋太字） */
.hl{
  color: #E89C9A;
  font-weight: 700;
}

/* アクセスへのリンク（お好みで） */
.link-access{
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-access:hover{
  opacity: .85;
}

/* ▼ 譲渡費用カード */
.price-cards{ display: grid; gap: 28px; }
.price-card{
  display: grid; gap: 16px;
  grid-template-columns: 1fr 200px;
  align-items: start;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  padding: 18px;
}
.price-card .card-media img{
  width: 100%; height: auto;
  display: block; border-radius: 12px;
}
.price-card .price{
  font-weight: 700; font-size: 1.05em; margin: 6px 0 6px;
}
.price-card .catch{
  margin: 0 0 8px; color: #666;
}

/* 小さめ箇条書き */
.note-list.small{ font-size: 0.95em; line-height: 1.7; }

/* バッジ */
.badge{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 10px;
  font-weight: 700;
  font-size: .9em;
}
.badge--soft{ background:#efe6e1; color:#7a6e67; }  /* まったり日常派 */
.badge--mint{ background:#dff1f4; color:#4f6d74; }  /* バランス重視派 */
.badge--gold{ background:#f8eed9; color:#8a6b2c; }  /* ショー候補クラス */

/* 価格周りの補助 */
.price-lead{ margin: 0 0 18px; color:#666; }
.price-factors, .price-includes{ margin-top: 24px; }
.price-note{ margin-top: 14px; color:#777; }

/* レスポンシブ */
@media (max-width: 720px){
  .price-card{ grid-template-columns: 1fr; }
  .price-card .card-media{ order: -1; } /* 画像を上へ */
}

/* =========================================================
   12) ちゅらラグについて
   ========================================================= */
/* ラグドールとは：レイアウト＆写真 */
.breed-layout{
  display:grid;
  grid-template-columns: 1fr minmax(220px, 320px);
  gap: 20px;
  align-items:start;
}
.breed-photo img{
  width:100%;
  aspect-ratio: 1 / 1;      /* 正方形に見せる */
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}
.breed-photo figcaption{
  font-size: .9em;
  color:#777;
  margin-top:6px;
}

/* スマホ：縦並びで画像を上へ */
@media (max-width: 768px){
  .breed-layout{ grid-template-columns: 1fr; }
  .breed-photo{ order:-1; margin-bottom: 6px; }
}