@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}
/************************************
** 小型　中型　大型　猫　多頭
************************************/
/* アイコン全体のラッパーをFlexに */
#pet-toggle-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

/* 各アイコンブロック */
.pet-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 calc(20% - 10px); /* 5個並べる（gap考慮） */
  cursor: pointer;
  box-sizing: border-box;
}

/* アイコン画像 */
.pet-toggle img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 160px; /* 上限サイズ */
  border: 2px solid transparent;
  border-radius: 8px;
  filter: brightness(0.3); /* 初期は暗く */
  transition: border-color 0.2s, filter 0.2s;
}

/* 選択時の明るさ＋枠色 */
.pet-toggle.selected img {
  border-color: #0073aa;
  filter: brightness(1); /* 通常の明るさに */
}

/* ラベル（テキスト） */
.pet-toggle-label {
  text-align: center;
  margin-top: 4px;
  font-size: 0.9em;
}

/* チェックボックス非表示 */
input.pet-checkbox {
  display: none;
}

/* スマホ（768px以下）では2列表示 */
@media (max-width: 768px) {
  .pet-toggle {
    flex: 1 1 calc(33% - 10px);
  }
}

/************************************
** バーナーサイズ（画像の枠をボーダーで囲う）
************************************/
.banner-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 300px;
  height: auto;

  border: 2px solid #ccc;
  border-radius: 8px;
  padding: 6px;
  background-color: #fff;
}


/************************************
** 地域別表の色変更（オレンジ系）
************************************/

.custom-table {
  border-collapse: collapse;
  width: 100%;
  max-width: none;
  margin-top: 10px;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  font-size: 25px; /* フォントサイズ大きめ */
  table-layout: fixed;
  word-wrap: break-word;
}

.custom-table thead th {
  background-color: #f57c00; /* 濃いオレンジ */
  color: white;
  padding: 10px;
  text-align: left;
  border: 1px solid #ef6c00; /* 少し明るめのオレンジ */
  font-size: 25px;
}

.custom-table tbody td {
  border: 1px solid #ffcc80; /* 薄めのオレンジ系ボーダー */
  padding: 8px;
}

.custom-table tbody tr:nth-child(even) {
  background-color: #fff3e0; /* 薄いオレンジ背景（偶数行） */
}

.custom-table tbody tr:hover {
  background-color: #ffe0b2; /* ホバー時の明るいオレンジ */
}

.custom-table label {
  cursor: pointer;
}

.custom-table input[type="checkbox"] {
  margin-right: 6px;
  vertical-align: middle;
}

.custom-checkbox-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.custom-checkbox-label input[type="checkbox"] {
  margin-right: 10px; /* チェックボックスとテキストの間にスペースを追加 */
}

.checkbox-text {
  font-size: 18px; /* テキストのサイズ調整 */
}

.custom-checkbox-label input[type="checkbox"]:checked + .checkbox-text {
  color: #f57c00; /* チェックされているときに文字色をオレンジに変更 */
}

.custom-checkbox-label input[type="checkbox"]:checked {
  background-color: #f57c00; /* チェックボックスの背景色 */
  border-color: #f57c00; /* チェックボックスの境界線の色 */
}

/* Google FontsからPoppinsを読み込む */
@import url('https://fonts.googleapis.com/css2?family=Sacramento&family=Poppins:wght@300;400;500&display=swap');

/************************************
** 間取りボタン用（ライトグレーに変更）
************************************/

.madori-toggle-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  max-width: 100%; /* 横幅を画面いっぱいに広げる */
  margin-bottom: 20px;
  padding: 20px 0;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* スマホ（768px以下）では3列表示 */
@media (max-width: 768px) {
  .madori-toggle-container {
    padding: 18px 0;
    grid-template-columns: repeat(3, 1fr); /* 3列 */
    font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif !important;
  }

  /* 4LDK以上ボタンがフル幅になる */
  .madori-toggle.full-width {
    grid-column: span 3; /* 3列分横幅を取る */
    width: 100%; /* 横幅いっぱいに広げる */
  }
}
/************************************
** 地域別表の色変更（オレンジ系）
************************************/

.custom-table {
  border-collapse: collapse;
  width: 100%;
  max-width: none;
  margin-top: 10px;
  font-family: "Yu Gothic", "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  font-size: 25px; /* フォントサイズ大きめ */
  table-layout: fixed;
  word-wrap: break-word;
}

.custom-table thead th {
  background-color: #f57c00; /* 濃いオレンジ */
  color: white;
  padding: 10px;
  text-align: left;
  border: 1px solid #ef6c00; /* 少し明るめのオレンジ */
  font-size: 25px;
}

.custom-table tbody td {
  border: 1px solid #ffcc80; /* 薄めのオレンジ系ボーダー */
  padding: 8px;
}

.custom-table tbody tr:nth-child(even) {
  background-color: #fff3e0; /* 薄いオレンジ背景（偶数行） */
}

.custom-table tbody tr:hover {
  background-color: #ffe0b2; /* ホバー時の明るいオレンジ */
}

.custom-table label {
  cursor: pointer;
}

.custom-table input[type="checkbox"] {
  margin-right: 6px;
  vertical-align: middle;
}

.custom-checkbox-label {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.custom-checkbox-label input[type="checkbox"] {
  margin-right: 10px; /* チェックボックスとテキストの間にスペースを追加 */
}

.checkbox-text {
  font-size: 18px; /* テキストのサイズ調整 */
}

.custom-checkbox-label input[type="checkbox"]:checked + .checkbox-text {
  color: #f57c00; /* チェックされているときに文字色をオレンジに変更 */
}

.custom-checkbox-label input[type="checkbox"]:checked {
  background-color: #f57c00; /* チェックボックスの背景色 */
  border-color: #f57c00; /* チェックボックスの境界線の色 */
}

/* Google FontsからPoppinsを読み込む */
@import url('https://fonts.googleapis.com/css2?family=Sacramento&family=Poppins:wght@300;400;500&display=swap');
@media screen and (max-width: 768px) {
  .custom-table {
    font-size: 15px; /* 文字サイズを小さく */
  }

  .custom-table thead th {
    font-size: 15px; /* ヘッダーの文字サイズを小さく */
  }

  .checkbox-text {
    font-size: 12px; /* チェックボックスのテキストも小さく */
  }
}
/* ************************************
** 間取りボタン用 — モダンスタイル強化
************************************ */

/* ベースのボタン */
.madori-toggle {
  border: 1px solid #f57c00;           /* 太めのオレンジボーダー */
  border-radius: 20px;                  /* 角をぐっと丸く */
  border-radius: 12px;                 /* 少し大きめの丸み */
  padding: 16px 0;                     /* 上下をやや狭く */
  text-align: center;
  font-size: 16px;                     /* 少し小さめでシャープに */
  font-weight: 500;                    /* ミドルウェイトに */
  cursor: pointer;
  user-select: none;
  background-color: #fcecd9;           /* 薄いオレンジ背景 */
  color: #333;
  transition: 
    background-color 0.2s ease, 
    border-color 0.2s ease, 
    transform 0.1s ease, 
    box-shadow 0.2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 軽い影で浮かせる */
}

/* ホバー時の効果 */
.madori-toggle:hover {
  background-color: #ffe0b2;           /* ほんのりオレンジ強調 */
  transform: translateY(-2px);         /* 軽いリフトアップ */
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* フォーカス時（キーボード操作対応） */
.madori-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(245,124,0,0.5);
}

/* 選択時のスタイル */
.madori-toggle.selected {
  border-color: #ef6c00;               /* 濃いオレンジ */
  background-color: #f57c00;           /* メインオレンジ */
  color: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  transform: none;                      /* 選択時はリフト無効 */
}

/* チェックボックスは隠す */
.madori-toggle input[type="checkbox"] {
  display: none;
}

/* ーーーーーーーーーー */
/* ここから詳細設定css */
/* ーーーーーーーーーー */

/* フィールドセット全体 */
.filter-setubi {
  margin: 1.5em 0;
  font-family: "Yu Gothic","Hiragino Kaku Gothic Pro",Meiryo,sans-serif;
}
.filter-setubi legend {
  font-weight: bold;
  margin-bottom: 0.5em;
}

/* タグ群のラッパー */
.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 個別のタグ */
.filter-tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 16px;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, color .2s;
  font-size: 14px;
  color: #333;
  user-select: none;
}

/* チェックボックス自体は非表示 */
.filter-tag input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ホバー時 */
.filter-tag:hover {
  border-color: #007bbb;
  color: #007bbb;
}

/* 選択状態 */
.filter-tag.active,
.filter-tag input:checked + span {
  background-color: #007bbb;
  border-color: #007bbb;
  color: #fff;
}

/* span 内のテキスト */
.filter-tag span {
  pointer-events: none;
}


/* custom-accordion.css */

/* 全セクション共通 */
.accordion-section {
  border: 1px solid #ddd;
  margin-bottom: 8px;
  border-radius: 4px;
  overflow: hidden;
  font-family: "Yu Gothic","Hiragino Kaku Gothic Pro",Meiryo,sans-serif;
}

/* ヘッダー部分 */
.accordion-header {
  padding: 0.6em 1em;
  background:  #ffd4a1;
  cursor: pointer;
  position: relative;
  font-weight: bold;
}
.accordion-header:after {
  content: "▼";
  position: absolute;
  right: 1em;
  transition: transform .2s;
}
.accordion-header.active:after {
  transform: rotate(-180deg);
}

/* 詳細検索　アコーディオン用 */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease, padding .3s ease;
  padding: 0 1em;
}
.accordion-content.open {
  padding: 1em;
  /* 必要に応じて十分大きめに */
}

/* チェックボックスの並び */
.accordion-content label {
  display: block;
  margin-bottom: 0.4em;
  cursor: pointer;
}

/* 小見出し（子カテゴリー） */
.accordion-content .subgroup {
  margin-bottom: 1em;
}

.accordion-content .subgroup-title {
  margin: 0 0 0.5em;
  font-size: 1em;
  font-weight: 600;
  color: #333;
}

/* チェックボックスを少し内側へ */
.accordion-content .subgroup label {
  display: block;
  margin-left: 1em;
  margin-bottom: 0.3em;
  cursor: pointer;
  font-size: 0.95em;
}

/* .subgroup 全体を flexbox 化 */
.subgroup {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* ← ここで左寄せ */
  gap: 12px;
  margin-bottom: 1em;
  align-items: center; /* ラベルの縦位置だけ中央揃え */
}

/* subgroup 内のタイトルだけはフル幅で下げる */
.subgroup-title {
  flex-basis: 100%;
  margin-bottom: 0.5em;
  font-size: 1em;
  font-weight: 600;
  color: #333;
}

/* チェックボックスラベルをリセットして詰める */
.subgroup label {
  margin: 0;
  white-space: nowrap;  /* テキストが折り返されないように */
}

/* input とテキストの間の隙間 */
.subgroup label input {
  margin-right: 4px;
}

/* 小さい画面では２列表示に */
@media (max-width: 600px) {
  .subgroup {
    gap: 8px;
  }
  .subgroup label {
    flex: 1 1 calc(50% - 8px);
  }
}
/* ーーーーーーーーーー */
/* 検索条件のアイコンサイズ
/* ーーーーーーーーーー */
/* legendタグ自体に余白がある可能性があるのでまずリセット */
.custom-legend {
  margin: 0;
  padding: 10px;
}

/* 画像を完全に左端に寄せる */
.banner-img {
  border: 1px solid #ddd;
  display: block;
  margin: 10px;
  padding: 0;
  width: 100%; /* 必要なら削除。幅を自動にしたい場合は auto */
  max-width: 300px;
}





/* 検索ボタン */
input[type="submit"].button {
  background: linear-gradient(to right, #f57c00, #ff9800); /* オレンジ系のグラデーション */
  border: none;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  border-radius: 30px; /* 角丸 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.2); /* 影 */
  cursor: pointer;
  transition: all 0.3s ease-in-out; /* すべての変更にアニメーション */
}

.search-box + hr {
  display: none !important;
}

/* フォーカス時のスタイル */
input[type="submit"].button:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(245, 124, 0, 0.5); /* オレンジ色のアウトライン */
}

fieldset {
  padding: 20px; /* 内側の余白を広くする */
}


/* ----------------------------- */
/* 沿線検索フォーム（モダンオレンジ） */
/* ----------------------------- */
/* 検索ボタンのカスタマイズ（カプセル型・特大） */
input[type="submit"].button.button-primary {
    /* オレンジの色味を適用 */
    background-color: var(--accent, #e3a678); 
    color: #ffffff;
    
    /* 【修正】角を完全に丸くする（高さの半分以上の数値を指定） */
    border-radius: 50px; 
    
    /* 文字を大きく、力強く */
    font-size: 24px; 
    font-weight: 900;
    letter-spacing: 0.1em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1); /* 文字を少し浮き立たせる */

    /* 縦幅を1.5倍〜に調整（paddingで高さを出す） */
    padding: 22px 60px; 
    height: auto;
    line-height: 1;

    /* 装飾 */
    border: none;
    box-shadow: 0 4px 15px rgba(227, 166, 120, 0.3);
    
    /* 【修正】下の要素との距離（margin）をしっかり確保 */
    margin-top: 20px;
    margin-bottom: 50px; 

    /* アニメーション */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: inline-block;
}

/* ホバー時の挙動 */
input[type="submit"].button.button-primary:hover {
    background-color: #d69566; 
    transform: translateY(-3px) scale(1.02); /* 少し浮いて大きくなる */
    box-shadow: 0 8px 20px rgba(227, 166, 120, 0.5);
    opacity: 1;
}

/* スマホ対応：横幅いっぱいの角丸ボタンにする */
@media screen and (max-width: 480px) {
    input[type="submit"].button.button-primary {
        width: 100%;
        font-size: 20px;
        padding: 20px 0;
        margin-bottom: 40px;
    }
}

/* =====================
   全体（もっとスマートに）
   ===================== */
html, body{
  background: var(--bg);
  font-family: "Noto Sans JP", "Inter", "Segoe UI", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#ensen-search-form{
  max-width: 100%;  /* 横幅一杯に設定 */
  margin: 8px auto;
  padding: 8px;
  box-sizing: border-box;
}

/* ===================== 
   路線ブロック（一覧で見やすくコンパクト）
   ===================== */
.route-block{
  background: var(--panel-bg);
  border-radius: var(--radius);
  padding: 6px;
  margin-bottom: 8px;
  border: 1px solid rgba(20,20,20,0.04);
  box-shadow: var(--shadow);
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  overflow: hidden;
}

/* 路線ヘッダー部分を常に見やすく（スクリーンショット風） */
.route-header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  background: linear-gradient(180deg, var(--section-bg), rgba(0,0,0,0.00));
  border-radius: calc(var(--radius) - 2px);
  margin-bottom: 6px;
}
.line-label{
  font-weight:700;
  font-size:13px;
  color: var(--text);
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* route 全選択で route-block 全体をうっすらオレンジに */
.route-block:has(.line-checkbox:checked),
.route-block.line-checked {
  background: linear-gradient(180deg, rgba(180, 77, 0, 0.06), rgba(255,255,255,0.00)); /* 濃いオレンジ */
  border-color: rgba(180, 77, 0, 0.10);
  box-shadow: 0 8px 18px rgba(180, 77, 0, 0.04);
}

/* 小さめのラインチェック（ピル） */
.line-checkbox{
  -webkit-appearance:none;
  appearance:none;
  width:34px; height:20px;
  border-radius:999px;
  position:relative;
  background: #fff;
  border: 1px solid rgba(20,20,20,0.06);
  box-shadow: inset 0 -1px 0 rgba(0,0,0,0.02);
  cursor:pointer;
  transition: all var(--transition);
  flex:0 0 auto;
}
.line-checkbox::after{
  content:"";
  position:absolute;
  width:12px; height:12px;
  top:50%;
  transform:translateY(-50%) translateX(2px);
  left:0;
  border-radius:50%;
  background:#fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: left var(--transition), transform var(--transition);
}
.line-checkbox:checked::after{
  left: calc(100% - 14px);
  transform: translateY(-50%);
}
.line-checkbox:checked{
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  border-color: rgba(180, 77, 0, 0.12);
}

/* =====================
   駅リスト（最大5カラム、超えると改行）
   ===================== */
.station-list{
  display:grid;
  grid-template-columns: repeat(4, 1fr); /* 常に5カラム */
  gap: var(--gap);
  padding: 2px 1px 1px 1px;
}

/* =====================
   駅アイテム（さらにスマート＆読みやすく）
   ===================== */
.station-item{
  display:flex;
  align-items:center;
  gap:1px;
  padding:1px;
  border-radius:6px;
  border: 1px solid rgba(20,20,20,0.12);  /* ボーダー追加 */
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  background: transparent;
  min-width: 0;
}

/* 駅が選択されたときは控えめなオレンジトーンで背景のみ（文字は黒のまま） */
.station-item.is-checked,
.station-item:has(.station-checkbox:checked){
  background: linear-gradient(90deg, rgba(255,122,24,0.2), rgba(255,183,106,0.15));
  transform: translateY(-0.3px);
  box-shadow: 0 6px 14px rgba(255,122,24,0.1);
}

/* ラベル全体をクリック可能に */
.station-checkbox-label{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  cursor:pointer;
  user-select:none;
  box-sizing:border-box;
}

/* =====================
   チェックボックス（黒チェックマーク、塗りつぶさない）
   ===================== */
.station-checkbox{
  -webkit-appearance:none;
  appearance:none;
  width:14px; height:14px;
  border-radius:4px;
  border: 2px solid rgba(34,34,34,0.12);
  background: transparent;
  position:relative;
  cursor:pointer;
  transition: all 120ms cubic-bezier(.2,.9,.3,1);
  flex:0 0 auto;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.station-checkbox:hover{
  background: rgba(0,0,0,0.02);
}
.station-checkbox:focus{
  outline:none;
  box-shadow: 0 0 0 6px rgba(0,0,0,0.04);
}

/* チェック時：ボックス自体は塗りつぶさず、内側に黒いチェックマークだけ表示 */
.station-checkbox::after{
  content: "";
  position: absolute;
  left: 3px; top: 1px;
  width: 6px; height: 8px;
  border: solid rgba(0,0,0,0.95);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0.9);
  opacity: 0;
  transition: opacity 100ms ease, transform 100ms ease;
}
.station-checkbox:checked::after{
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
/* チェック時も背景を透明にして塗りつぶさない（要求どおり） */
.station-checkbox:checked{
  background: transparent;
  border-color: rgba(0,0,0,0.18);
}

/* =====================
   駅名（常に黒で固定・折返しあり）
   ===================== */
.station-name{
  font-size:13px;
  color: #111; /* 常に黒 */
  flex:1;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
  line-height: 1.15;
  min-width: 0;
  transition: font-weight 120ms ease, transform 120ms ease;
  margin-right: 6px;
  flex-grow: 1; /* 駅名領域を広げる */
}

/* 選択時でも黒、強調は太字だけ */
.station-item.is-checked .station-name,
.station-item:has(.station-checkbox:checked) .station-name{
  color: #111;
  font-weight:700;
	transform: translateX(2px);
}

/* =====================
   物件数バッジ（白い●をなくす・選択時の違和感を解消）
   ===================== */
.station-count{
  font-size:11px;
  font-weight:700;
  color: var(--muted);
  background: rgba(255,255,255,0.94);
  padding:1px 1px;
  border-radius:999px;
  border: 1px solid rgba(20,20,20,0.04);
  width:44px;
  min-width:36px;
  text-align:center;
  box-sizing:border-box;
  transition: background 120ms ease, color 120ms ease, transform 100ms ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap;
}

/* remove decorative dot */
.station-count::before{ display:none; }

/* 選択時のバッジは背景をほんのり濃くするが白丸感は出さない */
.station-item.is-checked .station-count,
.station-item:has(.station-checkbox:checked) .station-count{
  background: rgba(255,255,255,0.9);
  color: var(--muted);
  border-color: rgba(20,20,20,0.05);
  transform: translateY(-0.6px) scale(1.01);
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

/* 非表示 */
.station-count:empty{ display:none; }

/* =====================
   検索ボタン（小さめ・控えめ）
   ===================== */
#ensen-search-form input[type="submit"]{
  margin-top:8px;
  background: linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#fff;
  border:none;
  padding:12px 15px;
  border-radius:8px;
  font-weight:700;
  font-size: 1.0em; /* フォントサイズを少し大きく */
  letter-spacing: 30px; /* 文字間隔を10pxに設定 */
  cursor:pointer;
  box-shadow: 0 8px 18px rgba(255,122,24,0.06);
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
}
#ensen-search-form input[type="submit"]:hover{
  transform: translateY(-0.6px);
  box-shadow: 0 12px 26px rgba(255,122,24,0.08);
}

/* 検索結果 */
.ensen-search-results{
  margin-top:8px;
  padding-left:12px;
}
.ensen-search-results li{ margin-bottom:6px; }

/* =====================
   レスポンシブ（さらにコンパクト）
   ===================== */
@media (max-width:800px){
  .station-list{ grid-template-columns: repeat(1, 1fr); gap:4px; }
  .station-name{ -webkit-line-clamp: 1; font-size:12px; }
  
  /* 物件数の左側の余白を削減 */
  .station-count{ 
    width:35px; 
    font-size:10px; 
    padding:2px 4px; 
    margin-left: 0; /* 左側のマージンを削除 */
  }
  
  /* 駅名の領域を優先して広げる */
  .station-item{
    gap:4px; /* 駅名と物件数の間隔を調整 */
  }
  
  /* 駅名の幅を広げて物件数に押されないようにする */
  .station-name{
    flex-grow: 2; /* 駅名の領域を広げる */
  }
	
}

/* =====================
   固定ページでの
  大坂京都のデザイン変更
===================== */

#ensen-search-form h3 {
    font-size: 1.6em; /* フォントサイズを少し大きく */
    font-weight: bold;
    text-align: center;
    padding: 0.6rem 2rem; /* 帯の左右の広がり */
    margin: 1rem 0;
    border-radius: 0px; /* 完全に角を取らない */
    background-color: #a4d8d3; /* 淡いグリーン */
    color: white;
    display: inline-block;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    letter-spacing: 10px; /* 文字間隔を10pxに設定 */
    width: 33%; /* 横幅を1/3に設定 */
    text-align: center;
}

@media (max-width: 800px) {
    #ensen-search-form h3 {
        font-size: 1em; /* フォントサイズを少し大きく */
        font-weight: bold;
        text-align: center;
        padding: 0.6rem 2rem; /* 帯の左右の広がり */
        margin: 1rem 0;
        border-radius: 0px; /* 完全に角を取らない */
        background-color: #a4d8d3; /* 淡いグリーン */
        color: white;
        display: inline-block;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        letter-spacing: 10px; /* 文字間隔を10pxに設定 */
        width: auto; /* 自動で調整 */
        min-width: 100px; /* 横幅が100px以下にならないように設定 */
        text-align: center;
    }
}

/* =====================
   検索結果用　ギャラリーサイズ修正版
===================== */

/* スマホでサムネイルを大きくする */
@media (max-width: 900px) {
  .ensen-card .thumb {
    height: 180px !important;      /* ← ここを大きくする！ */
    max-height: none !important;   /* ← 上限を解除する！ */
    min-height: 180px !important;  /* ← 下限も強制する！ */
  }
}

/* 小さいスマホ用も大きくする */
@media (max-width: 480px) {
  .ensen-card .thumb {
    height: 180px !important;      /* ← ここも大きくする！ */
    max-height: none !important;
  }
}

/* アスペクト比の指定は削除するかコメントアウトしてください */
/*
@media (max-width: 900px) {
  .ensen-card .thumb {
    height: auto !important;
    aspect-ratio: 16 / 9; 
  }
}
*/
/* =====================
   物件詳細を見るボタン
===================== */
/* スマホ用 詳細を見るボタン調整 */
/* スマホ用 詳細を見るボタン調整 */
@media (max-width: 900px) {
  .detail-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 0;
    font-size: 18px;
    border-radius: 8px;
    box-sizing: border-box;
    letter-spacing: 3px; /* 文字間隔を10pxに設定 */
  }
}



/************************************
** 人気のこだわり条件ボタン用（間取りボタンと同デザイン）
************************************/

/* コンテナ（5個なら自動で上3下2の見た目になる：3列グリッド） */
.ninki-toggle-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* デスクトップは3列（5個なら自動で3+2になる） */
  gap: 15px;
  width: 100%;
  max-width: 100%;
  margin-bottom: 20px;
  padding: 20px 0;
  box-sizing: border-box;
  font-family: 'Sacramento', cursive;
}

/* もし explicit に分ける場合の補助グリッド（上3列／下2列） */
.ninki-toggle-wrapper { width:100%; box-sizing:border-box; }
.ninki-grid { display:grid; gap:12px; margin-bottom:12px; }
.ninki-grid-top { grid-template-columns: repeat(3, minmax(0,1fr)); }
.ninki-grid-bottom { grid-template-columns: repeat(2, minmax(0,1fr)); }

/* --------------------------
   ベース（既存の外観ルールを尊重しつつ補強）
   -------------------------- */
/* ボタンラッパーの基本（既存 .ninki-toggle がある想定） */
.ninki-toggle {
  position: relative;                /* 絶対配置の input を包むため */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border-radius: 12px;
  padding: 16px 12px;                /* 横paddingを明示 */
  min-height: 56px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  background-color: #fcecd9;
  color: #333;
  transition: background-color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* hover / focus（外観上の強調） */
.ninki-toggle:hover {
  background-color: #ffe0b2;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}
.ninki-toggle:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(245,124,0,0.5);
}

/* 選択時の見た目（元のカラーを尊重） */
.ninki-toggle.selected {
  border-color: #ef6c00;
  background-color: #f57c00;
  color: #fff;
  box-shadow: 0 3px 6px rgba(0,0,0,0.18);
  transform: scale(1.01);
  transition: transform 0.18s ease-out;
}

/* --------------------------
   チェックボックスを確実に視覚的に隠す（アクセシビリティを損なわない方法）
   - 視覚的に完全に見えないようにし、クリックはラッパーで受けられるようにする
   -------------------------- */
.ninki-toggle input[type="checkbox"],
.ninki-toggle input[type="checkbox"].ninki-checkbox {
  /* オフスクリーン技法 + clip で確実に隠す */
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important; /* 視覚的に隠してマウスイベントはラッパーへ */
}

/* フォールバック（もし他のスタイルが効いて input が可視化される場合の保険） */
.ninki-toggle input[type="checkbox"]::before,
.ninki-toggle input[type="checkbox"]::after {
  display: none !important;
  content: none !important;
}

/* --------------------------
   ラベルテキスト（折返しと自動縮小）
   -------------------------- */
/* 推奨：ラベルは <span class="ninki-label">...<span> を使うとより安定 */
.ninki-toggle .ninki-label,
.ninki-toggle > span {
  display: inline-block;
  width: 100%;
  text-align: center;
  line-height: 1.12;
  white-space: normal;       /* 改行許可 */
  word-break: break-word;
  overflow-wrap: anywhere;
  padding: 2px 4px;
  box-sizing: border-box;
  /* clamp() でレスポンシブに縮小（第一手段） */
  font-size: clamp(11px, 2.0vw, 13px);
}

/* 2行までに抑えたい場合のオプションクラス */
.ninki-toggle.two-lines .ninki-label,
.ninki-toggle.two-lines > span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 補助：さらに小さくしたい場合 */
.ninki-toggle.fit-text .ninki-label,
.ninki-toggle.fit-text > span {
  font-size: clamp(9px, 2.4vw, 13px);
  line-height: 1.06;
}

/* --------------------------
   モバイル対応
   -------------------------- */

@media (max-width: 480px) {
  /* 極小画面は1列 */
  .ninki-toggle-container,
  .ninki-grid-top,
  .ninki-grid-bottom { grid-template-columns: 1fr; }
  .ninki-toggle { min-height: 48px; padding: 10px; }
  .ninki-toggle .ninki-label,
  .ninki-toggle > span { font-size: clamp(10px, 3.6vw, 12px); }
}

/* --------------------------
   互換性・保険：他のスタイルに上書きされにくくするための高特異性ルール
   （必要に応じてコメントアウトして使ってください）
   -------------------------- */
/* もしテーマの別ルールで input が見えてしまうならこちらを有効化（上書き用） */
/*
.ninki-toggle input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
}
*/

/* Optional: :focus-visible 表示をアクセシブルにする */
.ninki-toggle:focus-visible {
  outline: 3px solid rgba(245,124,0,0.38);
  outline-offset: 2px;
}


/* --------------------------
   検索フィルターの内容協調
   -------------------------- */
/* ensen-results.css */
.ensen-current-filters{
  background: linear-gradient(90deg, #fff9e6 0%, #ffffff 100%);
  border: 1px solid #ffd66a;
  padding: 10px 14px;
  border-radius: 10px;
  color: #222;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  margin-bottom: 16px;
  display: inline-block;
  line-height:1.3;
}
.ensen-current-filters span.ensen-current-filters__count{
  display:block;
  font-weight:400;
  color:#666;
  font-size:0.92rem;
  margin-top:6px;
}
@media(max-width:600px){
  .ensen-current-filters{display:block;width:100%;}
}


#sidebar-menu-open {
    position: relative;
}

.sidebar-menu-icon {
    position: absolute;
    top: 60%; 
    left: 40%; 
    transform: translate(-45%, -77%); /* 完全中央 */
	display: flex;
    flex-direction: column;   /* アイコンを上、文字を下 */
}
.sidebar-menu-icon {
    margin-bottom: 0.4em;    /* アイコンと文字の間隔 */
}

/* アイコンの目立たせ用スタイル */
.sidebar-menu-icon span {
    font-size: 1.5em;                         /* アイコンを大きく */
    color: #FF6F00;                         /* 目立つオレンジ色 */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.3); /* 浮き感 */
    transition: transform 0.3s, color 0.3s; /* ホバーアニメーション */
}


/* 文字はアイコンの下で中央揃え */
.sidebar-menu-caption {
    margin-top: 0.3em;    /* アイコンとの間隔 */
    font-size: 1em;
    font-weight: bold;
    color: #333;
    text-align: center;
}


/* ===== 強制: 上下どちらの検索ボタンもフル幅にする（即効） ===== */
/* ===== 強制: 上下どちらの検索ボタンもフル幅にする（即効） ===== */
#ensen-search-form .ensen-search-btn,
.ensen-search-panel .ensen-search-btn,
.ensen-search-panel button.ensen-search-btn,
#ensen-search-form button.ensen-search-btn,
.ensen-search-panel input.ensen-search-btn,
#ensen-search-form input.ensen-search-btn {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 12px 14px !important;
  font-size: 1rem !important;
  border-radius: 10px !important;
  border: 0 !important;
  cursor: pointer !important;
  line-height: 1.3 !important;
  margin: 12px 0 18px !important; /* ← ボタン上下に余白を追加 */
}

/* もし既存スタイルが input[type="submit"] を使っている場合に備えた補完 */
#ensen-search-form input[type="submit"],
.ensen-search-panel input[type="submit"] {
  display: block !important;
  width: 100% !important;
  margin: 12px 0 18px !important; /* ← 同じく余白を追加 */
}

/* ボタン下のラッパー余白を強制的に確保 */
.ensen-btn-bottom-wrap {
  margin: 18px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* タイトルや fieldset の余白も調整（詰まり防止） */
.ensen-search-panel .ensen-search-title {
  margin: 0 0 12px !important;
}
.ensen-search-panel fieldset {
  margin: 0 0 14px !important;
  padding: 12px !important;
  box-sizing: border-box !important;
}

/* 親パネルにパディングを与えて margin collapse を防ぐ */
.ensen-search-panel {
  padding: 12px !important;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
}

/* 小画面調整 */
@media (max-width:420px) {
  #ensen-search-form .ensen-search-btn,
  .ensen-search-panel .ensen-search-btn {
    padding: 10px !important;
    font-size: 0.95rem !important;
    border-radius: 8px !important;
    margin: 10px 0 14px !important;
  }
  .ensen-btn-bottom-wrap {
    margin-top: 14px !important;
    gap: 8px !important;
  }
}

/* ---------- WP-Members　新規登録用 ---------- */
/* ===========================
   WP-Members register: 全文 CSS
   （ベース + ペット/性別の更なる修正）
   =========================== */

/* ====== デスクトップ等（ベース） ====== */
#wpmem_reg #wpmem_register_form fieldset {
  display: grid;
  grid-template-columns: 180px 1fr; /* 左にラベル幅、右に入力 */
  gap: 12px 20px; /* 行の隙間 / 列の隙間 */
  align-items: center;
  max-width: 920px;
  margin: 18px auto;
  padding: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.04);
  box-sizing: border-box;
}

/* ラベル（左カラム） */
#wpmem_reg #wpmem_register_form label {
  margin: 0;
  font-weight: 600;
  color: #2d2d2d;
  font-size: 15px;
  line-height: 1.25;
  display: block;
  box-sizing: border-box;
  padding-right: 8px;
}

/* 必須マーク */
#wpmem_reg .req { color: #e55353; margin-left: 4px; font-weight:700; }

/* 入力ラッパー（右カラム） */
#wpmem_reg #wpmem_register_form .div_text,
#wpmem_reg #wpmem_register_form .div_textarea {
  width: 100%;
  min-width: 0; /* これ重要：グリッド内で入力が縮むのを防ぐ */
  box-sizing: border-box;
}

/* テキストボックス共通 */
#wpmem_reg #wpmem_register_form .textbox,
#wpmem_reg #wpmem_register_form input[type="email"],
#wpmem_reg #wpmem_register_form input[type="password"],
#wpmem_reg #wpmem_register_form input[type="text"],
#wpmem_reg #wpmem_register_form textarea {
  width: 100% !important; /* 親に合わせて必ず伸ばす */
  min-width: 0 !important; /* 小さくならないように保険 */
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  outline: none;
  box-sizing: border-box;
  transition: box-shadow .15s, border-color .15s;
  background: #fff;
  display: block;
}

/* テキストエリア高さ */
#wpmem_reg #wpmem_register_form .div_textarea textarea { min-height: 110px; resize: vertical; }

/* ボタン */
#wpmem_reg #wpmem_register_form .buttons {
  grid-column: 2 / 3; /* ボタンは右カラムに寄せる */
  padding: 10px 18px;
  font-size: 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: linear-gradient(90deg,#4f46e5,#06b6d4);
  color: #fff;
  box-shadow: 0 8px 20px rgba(6,182,212,0.12);
  box-sizing: border-box;
}

/* 複数行になる説明等（req-text）をラベル側に表示したい場合 */
#wpmem_reg #wpmem_register_form .req-text {
  grid-column: 2 / 3;
  font-size: 13px;
  color: #666;
  margin-top: 6px;
}

/* ====== 共通の崩れ防止（重要） ====== */
/* グリッド要素内で子要素が縮みすぎてしまうケースを防ぐ */
#wpmem_reg #wpmem_register_form fieldset * {
  min-width: 0;
  box-sizing: border-box;
}

/* ====== モバイル（狭い画面）での整列ルール：ここが本命 ====== */
@media (max-width: 720px) {

  /* 1カラムに切替え（全体） */
  #wpmem_reg #wpmem_register_form fieldset {
    grid-template-columns: 1fr !important;
    padding: 14px !important;
    gap: 10px 12px !important;
  }

  /* ラベルは上に出す（1行） */
  #wpmem_reg #wpmem_register_form fieldset > label {
    grid-column: 1 / -1 !important;
    margin-bottom: 6px !important;
    display: block !important;
    width: 100% !important;
  }

  /* 入力ラッパーはラベルの下で幅100% */
  #wpmem_reg #wpmem_register_form fieldset > .div_text,
  #wpmem_reg #wpmem_register_form fieldset > .div_textarea,
  #wpmem_reg #wpmem_register_form fieldset > .div_radio {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  /* テキスト入力はフォントと高さを上げて押しやすく */
  #wpmem_reg #wpmem_register_form .textbox,
  #wpmem_reg #wpmem_register_form input[type="text"],
  #wpmem_reg #wpmem_register_form input[type="email"],
  #wpmem_reg #wpmem_register_form input[type="password"],
  #wpmem_reg #wpmem_register_form textarea {
    font-size: 16px !important;
    padding: 12px 14px !important;
    min-height: 44px !important; /* タップしやすい高さ */
    width: 100% !important;
    display: block !important;
  }

  /* ボタンは1列で幅を100%に */
  #wpmem_reg #wpmem_register_form .buttons {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: 16px !important;
  }
}

/* ===== モバイル専用：強制的に縦積み＆ボタンをtextareaの下へ ===== */
@media (max-width: 720px) {
  /* 親を縦並びのflexにして、子要素を縦積みに（全体の保険） */
  #wpmem_reg #wpmem_register_form fieldset {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding: 12px !important;
    box-sizing: border-box !important;
  }

  /* 全てのラベルはフル幅（回り込み解除） */
  #wpmem_reg #wpmem_register_form fieldset > label {
    display: block !important;
    width: 100% !important;
    float: none !important;
    margin: 0 0 6px 0 !important;
  }

  /* 入力ラッパーを必ずフル幅に */
  #wpmem_reg #wpmem_register_form fieldset > .div_text,
  #wpmem_reg #wpmem_register_form fieldset > .div_textarea,
  #wpmem_reg #wpmem_register_form fieldset > .div_radio {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    clear: both !important;
  }

  /* textarea を含むラッパー内でボタンが横に並ぶ場合の保険（親内のボタンを縦にする） */
  #wpmem_reg #wpmem_register_form .div_textarea .buttons,
  #wpmem_reg #wpmem_register_form .div_textarea .button_div,
  #wpmem_reg #wpmem_register_form .div_textarea .buttons input,
  #wpmem_reg #wpmem_register_form .div_textarea .button_div input {
    display: block !important;
    width: 100% !important;
    margin-top: 8px !important;
    box-sizing: border-box !important;
    clear: both !important;
    position: static !important;
  }

  /* 直接のボタンラッパーも必ずフル幅で下に出す */
  #wpmem_reg #wpmem_register_form .buttons,
  #wpmem_reg #wpmem_register_form .button_div {
    display: block !important;
    width: 100% !important;
    justify-self: stretch !important;
    margin-top: 8px !important;
    clear: both !important;
    box-sizing: border-box !important;
    position: static !important;
  }

  /* ボタン要素をフル幅に */
  #wpmem_reg #wpmem_register_form .buttons input[type="submit"],
  #wpmem_reg #wpmem_register_form .button_div input[type="submit"] {
    width: 100% !important;
    display: block !important;
  }

  /* 余計な float / absolute を無効化（保険） */
  #wpmem_reg #wpmem_register_form fieldset * {
    float: none !important;
    position: static !important;
    min-width: 0 !important;
  }
}

/* ===========================================================
   ペット種類チェックボックス：更に強化
   （PCで確実に3カラム×2行、モバイルで1列・チェックは ✓、余白詰め）
   =========================================================== */
/*　ーーーーーここから------------------------------*/
/* 親グリッド（PC：3カラム固定） */
/* -----------------------------
  差し替え用：.div_multicheckbox（全て書き直し）
  目的：HTMLを触らずに「確実に3カラム×2行」にする
  アプローチ：inputを視覚的に非表示にしてラベルを確実にgridアイテム化、
            nowrapを解除、折返し許可、mobileは詰めて1列表示
  ※ 他セレクタは触らないよう高特異度で上書きしています
  ----------------------------- */

#wpmem_reg #wpmem_register_form .div_multicheckbox {
  display: grid !important;
  width: 100% !important;
  max-width: 100% !important;
  grid-template-columns: repeat(3, 1fr) !important; /* 均等3カラム */
  grid-auto-rows: auto !important;
  grid-auto-flow: row !important;     /* dense を外して順序安定化 */
  grid-auto-columns: 1fr !important;
  gap: 8px 12px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  align-content: start !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
  position: relative !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* <br> が残っている場合の妨害を完全除去 */
#wpmem_reg #wpmem_register_form .div_multicheckbox br {
  display: none !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* input は視覚的に完全に除外（ただし DOM に残して label と連動させる） */
#wpmem_reg #wpmem_register_form .div_multicheckbox input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  opacity: 0 !important;
}

/* ラベルを確実に grid の「セル」として扱う（幅はカラムに従う） */
#wpmem_reg #wpmem_register_form .div_multicheckbox > label,
#wpmem_reg #wpmem_register_form .div_multicheckbox > input + label,
#wpmem_reg #wpmem_register_form .div_multicheckbox label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  margin: 0 !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  background: #fff !important;
  cursor: pointer !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
  min-width: 0 !important;           /* これで縮められるようにする */
  width: auto !important;            /* width:100% は NG にする（削除） */
  white-space: normal !important;    /* 折返しを許可 */
  word-break: break-word !important; /* 長い語句は折返す */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .06s !important;
  align-self: stretch !important;    /* 行高さに合わせる */
}

/* 明示的にラベルを grid のセルにさせる保険（子要素順依存の問題回避） */
#wpmem_reg #wpmem_register_form .div_multicheckbox > label { grid-column: auto !important; }

/* ラベル先頭の □（未チェック） */
#wpmem_reg #wpmem_register_form .div_multicheckbox > label::before,
#wpmem_reg #wpmem_register_form .div_multicheckbox input + label::before,
#wpmem_reg #wpmem_register_form .div_multicheckbox label::before {
  content: "" !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  flex: 0 0 14px !important;
  margin-right: 8px !important;
  border-radius: 4px !important;
  border: 1px solid rgba(0,0,0,0.12) !important;
  background: #fff !important;
  box-sizing: border-box !important;
}

/* チェック時のラベル（見た目） */
#wpmem_reg #wpmem_register_form .div_multicheckbox input[type="checkbox"]:checked + label,
#wpmem_reg #wpmem_register_form .div_multicheckbox label[aria-checked="true"] {
  background: linear-gradient(90deg,#eef6ff,#f0fffb) !important;
  border-color: rgba(34,197,94,0.85) !important;
  box-shadow: 0 6px 16px rgba(34,197,94,0.06) !important;
}

/* チェック時の □ 表示（視認性を保つが過度に大きくしない） */
#wpmem_reg #wpmem_register_form .div_multicheckbox input[type="checkbox"]:checked + label::before,
#wpmem_reg #wpmem_register_form .div_multicheckbox label[aria-checked="true"]::before {
  background: radial-gradient(circle at 45% 40%, rgba(34,197,94,0.95) 0 60%, transparent 61%) !important;
  border-color: rgba(16,185,129,0.9) !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.08) !important;
}
/* label:nth-of-type を使うため、<label> 要素が何個あるかに依存（6個想定） */
#wpmem_reg #wpmem_register_form .div_multicheckbox label:nth-of-type(1) { grid-column: 1; grid-row: 1; }
#wpmem_reg #wpmem_register_form .div_multicheckbox label:nth-of-type(2) { grid-column: 2; grid-row: 1; }
#wpmem_reg #wpmem_register_form .div_multicheckbox label:nth-of-type(3) { grid-column: 3; grid-row: 1; }
#wpmem_reg #wpmem_register_form .div_multicheckbox label:nth-of-type(4) { grid-column: 1; grid-row: 2; }
#wpmem_reg #wpmem_register_form .div_multicheckbox label:nth-of-type(5) { grid-column: 2; grid-row: 2; }
#wpmem_reg #wpmem_register_form .div_multicheckbox label:nth-of-type(6) { grid-column: 3; grid-row: 2; }

/* 6個以上の可能性がある場合は並べ替えに対応（4以降は自動で次行へ流れる） */
#wpmem_reg #wpmem_register_form .div_multicheckbox label:nth-of-type(n+7) {
  /* 7番目以降は自然に次の行へ。必要ならここで別スタイルを入れてください */
}

/* ---- 強制：モバイルでフォームを画面幅いっぱいに使わせる（wpmem専用） ---- */
@media (max-width: 720px) {
	
  /* 親コンテナを画面幅いっぱいに */
  #wpmem_reg,
  #wpmem_reg #wpmem_register_form,
  #wpmem_reg .wpmem_wrap,
  #wpmem_reg .wpmem_container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;   /* 必要な左右余白はここで統一 */
    padding-right: 12px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    transform: none !important;      /* transform が幅制限を生む場合を排除 */
  }

  /* フォーム内のほぼすべての要素を横幅100%に */
  #wpmem_reg #wpmem_register_form *,
  #wpmem_reg #wpmem_register_form input,
  #wpmem_reg #wpmem_register_form select,
  #wpmem_reg #wpmem_register_form textarea,
  #wpmem_reg #wpmem_register_form label,
  #wpmem_reg #wpmem_register_form .wpmem-field {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;       /* flex/grid の崩れ防止 */
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

	
	/* label:nth-of-type を使うため、<label> 要素が何個あるかに依存（6個想定） */
	#wpmem_reg #wpmem_register_form .div_multicheckbox label:nth-of-type(1) { grid-column: 1; grid-row: 1; }
	#wpmem_reg #wpmem_register_form .div_multicheckbox label:nth-of-type(2) { grid-column: 2; grid-row: 1; }
	#wpmem_reg #wpmem_register_form .div_multicheckbox label:nth-of-type(3) { grid-column: 1; grid-row: 2; }
	#wpmem_reg #wpmem_register_form .div_multicheckbox label:nth-of-type(4) { grid-column: 2; grid-row: 2; }
	#wpmem_reg #wpmem_register_form .div_multicheckbox label:nth-of-type(5) { grid-column: 1; grid-row: 3; }
	#wpmem_reg #wpmem_register_form .div_multicheckbox label:nth-of-type(6) { grid-column: 2; grid-row: 3; }

	
  /* チェック系（ラベル）は幅100%のまま見た目は維持 */
  #wpmem_reg #wpmem_register_form .div_multicheckbox,
  #wpmem_reg #wpmem_register_form .div_radio {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important; /* 1列にする */
    gap: 6px 0 !important;
    padding: 0 !important;
  }
  #wpmem_reg #wpmem_register_form .div_multicheckbox label,
  #wpmem_reg #wpmem_register_form .div_radio > label {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
   white-space: normal !important;
    word-break: keep-all !important;     /* 日本語の不自然な分割を抑える */
    overflow-wrap: anywhere !important;  /* 長い語を折るための保険 */
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* テキスト入力等の内側パディングを安定させる（見切れるのを防ぐ） */
  #wpmem_reg #wpmem_register_form input[type="text"],
  #wpmem_reg #wpmem_register_form input[type="email"],
  #wpmem_reg #wpmem_register_form input[type="tel"],
  #wpmem_reg #wpmem_register_form textarea,
  #wpmem_reg #wpmem_register_form select {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  /* ラベル疑似要素が幅を食っている場合を防ぐ */
  #wpmem_reg #wpmem_register_form label::before,
  #wpmem_reg #wpmem_register_form .div_multicheckbox label::before {
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    pointer-events: none !important;
  }

  /* 余計な横スクロールを起こさないための最終防御 */
  body, html {
    overflow-x: hidden !important;
  }

}

/* --- モバイル：電話番号の上に犬の注意書きを表示 --- */
#wpmem_reg #wpmem_register_form label[for="pet"]::after {
    content: "小型犬は10kg未満、中型犬は10kg以上25kg未満、大型犬は25kg以上で選択してください。" !important;
    display: block !important;
    margin-top: 6px !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #062b1f !important;
    background: linear-gradient(180deg,#fffef6,#fff9e6) !important;
    border-left: 4px solid #f59e0b !important;
    border-radius: 6px !important;
    padding: 6px 8px !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
	    /* 改行を有効にする（\A を改行として扱う） */
    white-space: pre-line !important;
    text-align: left !important;
}

/* ---------- PCのみ：WP-Members 登録ボックスをページ中央に寄せる ---------- */
/* ---------- 強制：PCのみで WP-Members 登録フォームを中央表示 ---------- */
@media (min-width: 721px) {
  /* 1) 親が flex/grid で左寄せしていると効かないので、中央寄せしやすく上書き */
  /* 高特異度で上書き。必要ならセレクタをあなたのテーマの main セレクタに置換してください */

  .wrap {

  }

  /* 2) フォーム親を横方向のセンターコンテナにする（左右中央に寄せる） */
  #wpmem_reg {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 3) 実際のフォーム幅を上限付きで中央に（fieldset を中に置く） */
  #wpmem_reg #wpmem_register_form {
    width: 100% !important;        /* 親幅いっぱいを許容（必要なら auto に） */
    max-width: 980px !important;   /* 好きな最大幅に調整（例: 920px → 980px） */
    margin: 0 auto !important;     /* 親内中央 */
    display: block !important;
    box-sizing: border-box !important;
    text-align: left !important;   /* 内部は左寄せに戻す */
  }

  /* 4) fieldset 本体を中央に寄せつつ既存の grid レイアウトを保持 */
  #wpmem_reg #wpmem_register_form fieldset {
    display: grid !important;
    grid-template-columns: 180px 1fr !important;
    gap: 12px 20px !important;
    width: 100% !important;        /* max-width に従う */
    max-width: 920px !important;   /* この値がフォームの見た目幅になります */
    margin: 18px auto !important;
    box-sizing: border-box !important;
  }

  /* 5) 万一、テーマが更に強い指定で flex を使っている場合の保険 */
  /* （これで親レイアウトの強制左寄せを打ち消します） */
  .site, .site-content, .content-area, .primary, .secondary {
    min-width: 0 !important;
    max-width: 100% !important;
  }
}
/*　ーーーーーここまで------------------------------*/
/* ================================================================
   性別ラジオ：更に強化（PCで確実に3カラム、チェックマーク小さく）
   ================================================================ */

/* まず既存の <br> を無視して不意な折返しを防ぐ */
#wpmem_reg #wpmem_register_form .div_radio br { display: none !important; }

/* ラジオ input を画面上隠す（ラベルがクリック領域） */
#wpmem_reg #wpmem_register_form .div_radio input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  border: 0 !important;
}

/* 親はグリッド：3カラム固定（幅が足りない場合は小さい画面で1列に戻す） */
#wpmem_reg #wpmem_register_form .div_radio {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  grid-auto-flow: row;
}

/* ラベルをセルにしてボーダーで囲む（クリック領域＝セル全体） */
#wpmem_reg #wpmem_register_form .div_radio > label,
#wpmem_reg #wpmem_register_form .div_radio > input + label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0,0,0,0.08) !important;
  cursor: pointer !important;
  background: #fff !important;
  justify-content: flex-start !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  white-space: nowrap !important; /* ラベルの長いテキストは省略される */
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* 先頭の丸（疑似要素）を小さくして「でかすぎる」問題を解消 */
#wpmem_reg #wpmem_register_form .div_radio > label::before,
#wpmem_reg #wpmem_register_form .div_radio > input + label::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  box-sizing: border-box;
}

/* チェック時のラベルスタイル（視覚効果） */
#wpmem_reg #wpmem_register_form .div_radio input[type="radio"]:checked + label,
#wpmem_reg #wpmem_register_form .div_radio > label[aria-checked="true"] {
  background: linear-gradient(90deg,#eef2ff,#ecfeff) !important;
  border-color: rgba(59,130,246,0.9) !important;
  box-shadow: 0 6px 14px rgba(59,130,246,0.06) !important;
}

/* チェック時の丸（疑似要素）を小さく塗る */
#wpmem_reg #wpmem_register_form .div_radio input[type="radio"]:checked + label::before {
  background: radial-gradient(circle at 50% 50%, rgba(59,130,246,0.95) 0 60%, transparent 61%) !important;
  border-color: rgba(59,130,246,0.9) !important;
}

/* モバイル（小さい端末）では読みやすさ優先で縦並びに戻す（必要に応じて閾値調整） */
@media (max-width: 420px) {
  #wpmem_reg #wpmem_register_form .div_radio {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  #wpmem_reg #wpmem_register_form .div_radio > label,
  #wpmem_reg #wpmem_register_form .div_radio > input + label {
    white-space: normal !important;
    padding: 10px 12px !important;
  }
}
/* ペットの種類ラベルの下に注意書きを追加 */
#wpmem_reg #wpmem_register_form label[for="pet"]::after {
    content: "小型犬：10kg未満、\A中型犬：10kg～25kg\A大型犬：25kg" !important;
    display: block !important;
    margin-top: 6px !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    color: #062b1f !important;
    background: linear-gradient(180deg,#fffef6,#fff9e6) !important;
    border-left: 4px solid #f59e0b !important;
    border-radius: 6px !important;
    padding: 6px 8px !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
}
/* ================================================================
   保険：他の既存要素を不意に壊さないためにセレクタは限定的に追加しています
   ================================================================ */
/* ---- 安定化パッチ：grid 再配置の安定化・:has フォールバック・フォーカス表示 ---- */

/* dense を使わない安定版（アクセシビリティを優先） */
#wpmem_reg #wpmem_register_form .div_multicheckbox {
  /* 既に定義済みのため override（副作用回避） */
  grid-auto-flow: row !important;
}

/* ::before をクリック無効にしてラベル本体でクリックを受けるように */
#wpmem_reg #wpmem_register_form .div_multicheckbox label::before {
  pointer-events: none !important;
}

/* キーボード操作時の視覚フィードバック（input がフォーカスされたら label を強調） */
#wpmem_reg #wpmem_register_form .div_multicheckbox input[type="checkbox"]:focus + label,
#wpmem_reg #wpmem_register_form .div_multicheckbox input[type="checkbox"]:focus-visible + label {
  outline: 3px solid rgba(59,130,246,0.15) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.06) !important;
}

/* カーソルでラベルにフォーカスしたときの見た目（ラベル自体をフォーカス可能にする環境向け） */
#wpmem_reg #wpmem_register_form .div_multicheckbox > label:focus,
#wpmem_reg #wpmem_register_form .div_multicheckbox > label:focus-visible {
  outline: 3px solid rgba(59,130,246,0.15) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.06) !important;
}

/* label が input を内包するパターンや label が先行するパターンへのフォールバック（モダンブラウザのみ） */
@supports (selector(:has(*))) {
  /* input が label の内部でチェック済みのとき */
  #wpmem_reg #wpmem_register_form .div_multicheckbox label:has(input[type="checkbox"]:checked) {
    background: linear-gradient(90deg,#eef6ff,#f0fffb) !important;
    border-color: rgba(34,197,94,0.85) !important;
    box-shadow: 0 6px 16px rgba(34,197,94,0.06) !important;
  }
  /* label の前に input があり、input がチェックの場合（余裕を持たせたセレクタ） */
  #wpmem_reg #wpmem_register_form .div_multicheckbox :has(input[type="checkbox"]:checked) > label {
    background: linear-gradient(90deg,#eef6ff,#f0fffb) !important;
    border-color: rgba(34,197,94,0.85) !important;
  }
}

/* 小さい画面でのタップ領域確保（フォーカスリングのための余白） */
@media (max-width: 720px) {
  #wpmem_reg #wpmem_register_form .div_multicheckbox > label,
  #wpmem_reg #wpmem_register_form .div_multicheckbox label {
    -webkit-tap-highlight-color: rgba(0,0,0,0.06) !important;
    tap-highlight-color: rgba(0,0,0,0.06) !important;
  }
}

/* 万が一 label が長くなって改行する場合に備え、line-height を安定させる */
#wpmem_reg #wpmem_register_form .div_multicheckbox > label,
#wpmem_reg #wpmem_register_form .div_multicheckbox label {
  line-height: 1.2 !important;
}

/* もしプラグインが label をブロック要素に強制している場合の保険（横に伸びすぎないように） */
#wpmem_reg #wpmem_register_form .div_multicheckbox > label,
#wpmem_reg #wpmem_register_form .div_multicheckbox label {
  max-width: 100% !important;
  box-sizing: border-box !important;
}





/* ================================================================
   未ログイン時に
  お気に入りボタンをタッチしたときの吹き出し ================================================================ */



/* 吹き出しスタイル（myfav-login-bubble） */
.myfav-login-bubble {
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  box-sizing: border-box;
  background: #fff;
  color: #222;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  box-shadow: 0 8px 22px rgba(8,24,48,0.12);
  padding: 10px 12px;
  max-width: 260px; /* 少し小さめで折り返し防止 */
  line-height: 1.4;
  transition: opacity 0.12s ease;
  position: absolute;
  z-index: 99999;
}

.myfav-login-bubble .bubble-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.myfav-login-bubble .bubble-message {
  font-size: 14px;
  color: #333;
  word-break: break-word; /* 文字が折り返しやすくなる */
}

.myfav-login-bubble .bubble-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-start; /* 左寄せで横並び */
  flex-wrap: wrap; /* 小さい画面でも崩れない */
}

.myfav-login-bubble .bubble-actions .bubble-login {
  display: inline-block;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  background: #0073aa;
  color: #fff;
  font-weight: 600;
  white-space: nowrap; /* ボタン内改行防止 */
}

.myfav-login-bubble .bubble-actions .bubble-close {
  appearance: none;
  border: 0;
  background: transparent;
  color: #666;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}

/* 矢印 */
.myfav-login-bubble .bubble-arrow {
  position: absolute;
  width: 14px;
  height: 10px;
  left: 20px;
  top: -8px;
  overflow: hidden;
  pointer-events: none;
}

.myfav-login-bubble .bubble-arrow::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: #fff;
  border-left: 1px solid rgba(0,0,0,0.06);
  border-top: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 6px 14px rgba(8,24,48,0.08);
}
.myfav-login-bubble .bubble-message {
  font-size: 14px;
  color: #333;
  word-break: break-word;
  text-align: center; /* ← ここで中央寄せ */
}
.myfav-login-bubble .bubble-actions {
  display: flex;
  gap: 8px;
  justify-content: center; /* ← 中央寄せ */
  flex-wrap: wrap;
}

/* ================================================================
  メニュー　会員表示　中央揃え
 ================================================================ */
/* 親はそのまま。li と a に vertical-align を明示 */
ul.menu-top,
ul.menu-top.menu-header,
ul.menu-top.menu-header.menu-pc,
ul.menu-top.menu-mobile {
  text-align: center !important;
  white-space: nowrap !important;
  padding: 0;
  margin: 0 auto;
  list-style: none;
  /* ここで高さが決まっている場合は明示しておくと安定します（例: height: 60px;） */
}

ul.menu-top > li,
ul.menu-top.menu-header > li {
  display: inline-block !important;
  vertical-align: middle; /* これで li は親の中央に揃う（親の行高さ次第） */
  margin: 0 10px;
}

/* a を inline-block にして vertical-align を揃える（不可視文字を削除） */
ul.menu-top > li > a {
  display: inline-flex !important;   /* inline のままで横並びを壊さない */
  align-items: center;               /* 縦方向中央揃え（これで確実） */
  justify-content: center;           /* 横方向も中央 */
  padding: 0 12px;                   /* 高さは padding と親の高さで決める */
  height: 48px;                      /* 必要に応じてメニューの高さを揃える */
  box-sizing: border-box;
  text-decoration: none;
}

/* PC側（既存） */
ul.menu-top,
ul.menu-top.menu-header,
ul.menu-top.menu-header.menu-pc {
  text-align: center !important;
  white-space: nowrap !important;
  padding: 0;
  margin: 0 auto;
  list-style: none;
}

/* モバイルだけ2カラムにする（例：幅767px以下） */
/* --- モバイル 2カラム（推奨：改行をさせずに揃える） --- */
@media (max-width: 1050px) {
  /* グリッド本体：列の幅崩れを防ぎつつ、セル内を中央揃えにする */
  ul.menu-top.menu-mobile,
  ul.menu-top.menu-header.menu-mobile {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    justify-items: center !important; /* 各セルのコンテンツを水平方向中央に */
    align-items: center !important;   /* 各セルのコンテンツを垂直方向中央に */
    box-sizing: border-box !important;
    width: 100% !important;
  }

  /* li は幅100% にしてグリッドセルを満たす */
  ul.menu-top.menu-mobile > li,
  ul.menu-top.menu-header.menu-mobile > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* a をフルサイズのフレックスコンテナにして中で完全中央揃え */
  ul.menu-top.menu-mobile > li > a,
  ul.menu-top.menu-header.menu-mobile > li > a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 10px 12px !important;
    min-height: 44px !important;     /* 好みで調整 */
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: nowrap !important;   /* 改行をさせたくない場合。許容するなら normal に */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* もし左右に余白（内側スペース）を縮めたい場合 */
  ul.menu-top.menu-mobile { gap: 4px !important; }
}














/* ------------------------------------------------------------------------------------------------------ */
/* --- 固定ページ（body に .page が付くページ）向け：日付（とそのアイコン）＋投稿者名を非表示 --- */
/* ---------------------------------------------------------------------------------------------- */
 * 
/* よく使われる selectors をまとめて非表示にします */
body.page .posted-on,
body.page .posted-on *,
body.page .entry-date,
body.page time.entry-date,
body.page .byline,
body.page .byline *,
body.page .author,
body.page .vcard,
body.page .post-author,
body.page .meta-author,
body.page .post-meta .posted-on,
body.page .post-meta .byline {
  display: none !important;
}

/* 疑似要素でアイコンを出しているテーマ向け */
body.page .posted-on::before,
body.page .byline::before,
body.page .author::before {
  display: none !important;
  content: "" !important;
}
body.page .fa.fa-history,
body.page span.fa.fa-history,
body.page i.fa.fa-history {
  display: none !important;
}
body.page .fa-history::before {
  display: none !important;
  content: "" !important;
}

body.page .fa.fa-history,
body.page .fa.fa-pencil,
body.page span.fa.fa-history,
body.page span.fa.fa-pencil,
body.page i.fa.fa-history,
body.page i.fa.fa-pencil {
  display: none !important;
}
body.page .fa-history::before,
body.page .fa-pencil::before {
  display: none !important;
  content: "" !important;
}
/* Font Awesome の古いクラス（fa-clock-o）／新しいクラス（fa-clock）両対応 */
.fa.fa-clock-o,
span.fa.fa-clock-o,
i.fa.fa-clock-o,
.fa-clock-o,
.fa-clock,
span.fa-clock,
i.fa-clock,
[class*="fa-clock"] {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* ::before / ::after で描画される場合に備える */
.fa-clock-o::before,
.fa-clock::before,
[class*="fa-clock"]::before,
[class*="fa-clock"]::after {
  display: none !important;
  content: "" !important;
  visibility: hidden !important;
}


/* --------------------------------------------------------------------------- */
/* --- マイページのレイアウト変更 --- */
/* ---------------------------------------------------------------------------- */

/* page-id-367: マイページのリンクをボタン化して横並びに */
body.page-id-367 .entry-content > ul {
  display: flex;
  gap: 12px;
  padding: 0;
  margin: 0 0 1.2rem 0;
  list-style: none;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
}

body.page-id-367 .entry-content > ul > li {
  flex: 1 1 0;
  margin: 0;
  box-sizing: border-box;
}

/* リンクをフル幅ボタンに */
body.page-id-367 .entry-content > ul > li > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 14px;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(90deg,#f57c00 0%,#ff9800 100%);
  box-shadow: 0 6px 16px rgba(245,124,0,0.12);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  box-sizing: border-box;
}

/* ホバー・フォーカス効果 */
body.page-id-367 .entry-content > ul > li > a:hover,
body.page-id-367 .entry-content > ul > li > a:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(245,124,0,0.15);
  opacity: 0.98;
  outline: none;
}

/* アクセシビリティ：キーボード時の見え方 */
body.page-id-367 .entry-content > ul > li > a:focus {
  box-shadow: 0 0 0 4px rgba(245,124,0,0.22);
}

/* 小さい画面では縦並び（スタック） */
@media (max-width: 600px) {
  body.page-id-367 .entry-content > ul {
    flex-direction: column;
  }
  body.page-id-367 .entry-content > ul > li {
    width: 100%;
  }
}




/* --------------------------------------------------------------------------- */
/* --- 登録情報の編集のレイアウト変更 --- */
/* ---------------------------------------------------------------------------- */
/* 見た目で残る星印を消す（念のため） */
article#post-367 #wpmem_reg,
article#post-367 #wpmem_reg * {
  box-sizing: border-box;
}

/* 親コンテナの整え（中央寄せ） */
article#post-367 #wpmem_reg {
  width: 100% !important;
  max-width: 980px !important;
  margin: 18px auto !important;
  padding: 16px !important;
}

/* fieldset をカード風のグリッドに */
article#post-367 #wpmem_profile_form fieldset {
  display: grid !important;
  grid-template-columns: 180px 1fr;
  gap: 12px 20px;
  align-items: start;
  background: #ffffff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.04);
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

/* legend（もしあれば）の見た目 */
article#post-367 #wpmem_profile_form fieldset > legend {
  display: block;
  font-weight:700;
  padding: 0 6px 8px 0;
  grid-column: 1 / -1;
}

/* ラベル（左カラム） */
article#post-367 #wpmem_profile_form label {
  margin: 0;
  font-weight: 600;
  color: #222;
  font-size: 15px;
  line-height: 1.25;
  display: block;
  padding-right: 8px;
}

/* 必須マーク */
article#post-367 #wpmem_profile_form .req { color:#e55353; margin-left:4px; font-weight:700; }

/* 入力ラッパー（右カラム） */
article#post-367 #wpmem_profile_form .div_text,
article#post-367 #wpmem_profile_form .div_textarea,
article#post-367 #wpmem_profile_form .div_radio {
  width: 100%;
  min-width: 0;
}

/* テキスト入力/textarea 共通 */
article#post-367 #wpmem_profile_form .textbox,
article#post-367 #wpmem_profile_form input[type="text"],
article#post-367 #wpmem_profile_form input[type="email"],
article#post-367 #wpmem_profile_form input[type="tel"],
article#post-367 #wpmem_profile_form textarea {
  width: 100% !important;
  padding: 10px 12px;
  font-size: 15px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  background: #fff;
  outline: none;
  transition: box-shadow .15s, border-color .15s;
  box-sizing: border-box;
  min-width: 0;
}

/* テキストエリア高さ */
article#post-367 #wpmem_profile_form .div_textarea textarea { min-height:110px; resize:vertical; }

/* ボタン配置（右カラム） */
article#post-367 #wpmem_profile_form .button_div {
  grid-column: 2 / 3;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  margin-top: 8px;
}

/* サブミットボタン */
article#post-367 #wpmem_profile_form .buttons,
article#post-367 #wpmem_profile_form input[type="submit"].buttons {
  padding: 10px 16px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  background: linear-gradient(90deg,#4f46e5,#06b6d4);
  color: #fff;
  font-size: 15px;
  font-weight:700;
  box-shadow: 0 8px 20px rgba(6,182,212,0.12);
  min-width: 160px;
  box-sizing: border-box;
}

/* 説明テキスト */
article#post-367 #wpmem_profile_form .req-text {
  grid-column: 2 / 3;
  color:#000;
  font-size:13px;
  margin-top:6px;
}

/* ======================
   ペットのチェック群（div_multicheckbox）
   スコープ：article#post-367 内のみ
   ====================== */
article#post-367 #wpmem_profile_form .div_multicheckbox {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 8px 12px !important;
  align-items: stretch;
  justify-items: stretch;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  min-width: 0;
}

/* 隠す不要な <br>（WP が入れる場合） */
article#post-367 #wpmem_profile_form .div_multicheckbox br { display: none !important; }

/* inputを視覚的に隠してlabelで操作 */
article#post-367 #wpmem_profile_form .div_multicheckbox input[type="checkbox"] {
  position: absolute !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow:hidden !important;
  opacity:0 !important;
}

/* ラベルをグリッドアイテム化 */
article#post-367 #wpmem_profile_form .div_multicheckbox > label,
article#post-367 #wpmem_profile_form .div_multicheckbox label {
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  padding:8px 10px !important;
  margin:0 !important;
  border-radius:8px !important;
  border:1px solid rgba(0,0,0,0.08) !important;
  background:#fff !important;
  cursor:pointer !important;
  font-size:14px !important;
  box-sizing:border-box !important;
  justify-content:flex-start !important;
  white-space:normal !important;
  word-break:break-word !important;
}

/* 未チェック時の□ */
article#post-367 #wpmem_profile_form .div_multicheckbox label::before {
  content: "" !important;
  display:inline-block !important;
  width:14px !important;
  height:14px !important;
  flex:0 0 14px !important;
  margin-right:8px !important;
  border-radius:4px !important;
  border:1px solid rgba(0,0,0,0.12) !important;
  background:#fff !important;
  box-sizing:border-box !important;
}

/* チェック時の見た目（input:checked + label 形式に合わせる） */
article#post-367 #wpmem_profile_form .div_multicheckbox input[type="checkbox"]:checked + label,
article#post-367 #wpmem_profile_form .div_multicheckbox label[aria-checked="true"] {
  background: linear-gradient(90deg,#eef6ff,#f0fffb) !important;
  border-color: rgba(34,197,94,0.85) !important;
  box-shadow: 0 6px 16px rgba(34,197,94,0.06) !important;
}

/* チェック時の□マーク変更 */
article#post-367 #wpmem_profile_form .div_multicheckbox input[type="checkbox"]:checked + label::before {
  background: radial-gradient(circle at 45% 40%, rgba(34,197,94,0.95) 0 60%, transparent 61%) !important;
  border-color: rgba(16,185,129,0.9) !important;
}

/* ラベル個別位置（PC: 3カラム × 2行想定） */
article#post-367 #wpmem_profile_form .div_multicheckbox label:nth-of-type(1) { grid-column:1; grid-row:1; }
article#post-367 #wpmem_profile_form .div_multicheckbox label:nth-of-type(2) { grid-column:2; grid-row:1; }
article#post-367 #wpmem_profile_form .div_multicheckbox label:nth-of-type(3) { grid-column:3; grid-row:1; }
article#post-367 #wpmem_profile_form .div_multicheckbox label:nth-of-type(4) { grid-column:1; grid-row:2; }
article#post-367 #wpmem_profile_form .div_multicheckbox label:nth-of-type(5) { grid-column:2; grid-row:2; }
article#post-367 #wpmem_profile_form .div_multicheckbox label:nth-of-type(6) { grid-column:3; grid-row:2; }

/* ======================
   モバイル（狭い画面）調整
   ====================== */
@media (max-width: 720px) {
  article#post-367 #wpmem_reg { padding: 12px !important; }
  article#post-367 #wpmem_profile_form fieldset {
    display: block !important;
    padding: 12px !important;
  }
  article#post-367 #wpmem_profile_form fieldset > label { display:block !important; width:100% !important; margin-bottom:6px !important; }
  article#post-367 #wpmem_profile_form .div_text,
  article#post-367 #wpmem_profile_form .div_textarea,
  article#post-367 #wpmem_profile_form .div_radio { width:100% !important; display:block !important; min-width:0 !important; }
  article#post-367 #wpmem_profile_form .buttons,
  article#post-367 #wpmem_profile_form input[type="submit"].buttons {
    width:100% !important;
    min-width: 0 !important;
    display:block !important;
    margin-top:8px !important;
  }

  /* チェック群を1列に */
  article#post-367 #wpmem_profile_form .div_multicheckbox {
    grid-template-columns: 1fr !important;
    gap: 6px 0 !important;
  }
  article#post-367 #wpmem_profile_form .div_multicheckbox label { width:100% !important; padding-left:8px !important; padding-right:8px !important; }
}

/* 最終防御：テーマの強い指定を打ち消す保険 */
article#post-367 #wpmem_profile_form,
article#post-367 #wpmem_profile_form * {
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
}
/* 見た目で残る星印を消す（念のため） */
article#post-367 .req,
article#post-367 .req::before,
article#post-367 label .req {
  display: none !important;
}

/* req-text（「*必須項目」などの文言）を非表示 */
article#post-367 .req-text {
  display: none !important;
}

/* ラベル疑似要素で追加している星も消す保険 */
article#post-367 label::after,
article#post-367 label::before {
  content: none !important;
}

/* --------------------------------------------------------------------------- */
/* --- 星レイアウト用 --- */
/* ---------------------------------------------------------------------------- */

/* --- スライダー上の☆/★ボタンスタイル（.ps-fav-toggle） --- */
.ps-fav-toggle{
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 75;
  border: 0;
  background: rgba(255,255,255,0.88);
  color: #666;
  font-size: 20px;
  line-height: 1;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(6,12,20,0.12);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s, color .12s;
  -webkit-tap-highlight-color: transparent;
}

/* hover / active */
.ps-fav-toggle:hover { transform: translateY(-3px) scale(1.02); }
.ps-fav-toggle:active { transform: translateY(0) scale(.98); }

/* 未お気に入り */
.ps-fav-toggle { color: #666; }

/* お気に入り状態（塗りつぶし・黄色） */
.ps-fav-toggle.is-favorited {
  background: linear-gradient(90deg,#fff3d6,#fff1c4);
  color: #ffca28;
  box-shadow: 0 8px 20px rgba(255,160,0,0.12);
}

/* モバイル微調整 */
@media (max-width:768px){
  .ps-fav-toggle { top: 10px; right: 10px; width:34px; height:34px; font-size:18px; }
}


/* --------------------------------------------------------------------------- */
/* --- お気に入りボタン　パージン用 --- */
/* ---------------------------------------------------------------------------- */
/* 全体に余白をつける */
.add-to-favorites {
  margin: 10px;        /* 外側の余白（変更可） */
  padding: 8px 12px;   /* クリックしやすくするための内側余白（任意） */
  display: inline-block;
  box-sizing: border-box;
}
/* --------------------------------------------------------------------------- */
/* --- 各アイコン　ジャンプ用サイズ編集 --- */
/* ---------------------------------------------------------------------------- */
/* アイコン行全体：余計な要素を徹底排除 */
.icon-row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 16px !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    font-size: 0 !important; /* 文字の隙間を消す */
}

/* 外枠の円形：ここから画像がはみ出すのを許さない */
.icon-link {
    display: block !important;
    width: 180px !important;
    height: 180px !important;
    border-radius: 50% !important; /* 999pxより50%の方が確実 */
    overflow: hidden !important;   /* はみ出しをカット */
    position: relative !important;
    box-shadow: 0 6px 14px rgba(6,12,20,0.06);
    flex: 0 0 auto !important;
}

/* 中の画像：外枠に100%吸着させる */
.icon-link img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 縦横比を保って円を満たす */
    margin: 0 !important;         /* Cocoonのマージン干渉を殺す */
    padding: 0 !important;        /* Cocoonのパディング干渉を殺す */
    border: none !important;      /* 枠線干渉を殺す */
    max-width: none !important;   /* 上限を外す */
}

/* レスポンシブ（中画面） */
@media (max-width: 1080px) {
    .icon-link {
        width: 128px !important;
        height: 128px !important;
    }
}

/* レスポンシブ（スマホ） */
@media (max-width: 680px) {
    .icon-link {
        width: 75px !important; /* 少し大きく調整 */
        height: 75px !important;
    }
    .icon-row {
        gap: 10px !important;
    }
}

/* スムーズスクロール */
html {
  scroll-behavior: smooth;
}



/* --------------------------------------------------------------------------- */
/* --- お問合せボタン　デザイン編集 --- */
/* ---------------------------------------------------------------------------- */

/* 大きめフル幅問い合わせボタン */
.contact-cta-wrap { 
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-left: 12px;   /* 必要なら左右余白を調整 */
  padding-right: 12px;
  margin: 0 auto;
}

.contact-cta {
  display: inline-block;
  width: 100%;               /* 横幅いっぱい */
  text-align: center;
  padding: 16px 18px;        /* ボタンの高さ（大きめ） */
  font-size: 18px;           /* 文字大きめ */
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(90deg, #0ea5e9 0%, #3b82f6 100%); /* 青系グラデ */
  border-radius: 12px;       /* 角丸 */
  border: none;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(3, 64, 120, 0.12);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

/* ホバー / フォーカス時 */
.contact-cta:hover,
.contact-cta:focus {
  transform: translateY(-3px);
  box-shadow: 0 12px 26px rgba(3, 64, 120, 0.14);
  opacity: 0.98;
  outline: none;
}

/* キーボードアクセス対応 */
.contact-cta:focus {
  box-shadow: 0 0 0 4px rgba(59,130,246,0.18);
}

/* モバイル微調整（高さを少し増やすなど） */
@media (max-width: 420px) {
  .contact-cta {
    padding: 14px 16px;
    font-size: 16px;
    border-radius: 10px;
  }
}




/* --------------------------------------------------------------------------- */
/* --- 通常記事のスタイル --- */
/* ---------------------------------------------------------------------------- */
/* D: 大胆ボックス（改良版） */
.interview-article h2{
  display:block;
  font-size:1.32rem;
  font-weight:900;
  color:#fff;
  margin:22px 0 12px;
  padding:10px 16px;
  border-radius:10px;
  background:linear-gradient(90deg,#ff6b6b,#ffb86b);
  box-shadow:0 6px 24px rgba(255,107,107,0.18);
  text-transform:uppercase;
  letter-spacing:0.08em;
  line-height:1.2;
}
.interview-article h2::after{
  content:"";
  display:block;
  height:3px;
  width:100%;
  margin-top:8px;
  background:rgba(255,255,255,0.12);
  border-radius:3px;
  opacity:0.9;
}

/* --- Info + Map (two-column) --- */
.info-section { margin-top:20px; margin-bottom:28px; }
.info-title { font-size:1.18rem; margin-bottom:12px; font-weight:700; color:#071428; }

.info-map-grid{
  display:flex;
  gap:20px;
  align-items:stretch;
  max-width:1100px;
  margin:0 auto;
  box-sizing:border-box;
}

/* left info */
.info-box{
  flex:1 1 50%;
  background:#fff;
  padding:18px;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(6,12,20,0.04);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:320px;
  box-sizing:border-box;
}
.info-box .address { font-size:0.95rem; color:#0f1724; line-height:1.6; margin-bottom:12px; }
.info-box .address strong { display:block; font-size:1.06rem; margin-bottom:6px; }
.info-actions { display:flex; gap:10px; margin-top:8px; }
.btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 14px; border-radius:8px; text-decoration:none; font-weight:700; cursor:pointer; box-shadow:0 6px 18px rgba(2,6,23,0.04); }
.btn-primary { background:linear-gradient(90deg,#ff6b6b,#ffb86b); color:#fff; border:0; }
.btn-outline { background:transparent; color:#0f1724; border:1px solid rgba(15,23,36,0.08); }
.info-note { margin-top:12px; color:#64748b; font-size:0.85rem; }

/* right map */
.map-box{ flex:1 1 50%; box-sizing:border-box; display:flex; align-items:stretch; min-height:320px; }
.map-ratio{ position:relative; width:100%; height:100%; border-radius:12px; overflow:hidden; box-shadow:inset 0 -6px 24px rgba(6,12,20,0.02); }
.map-ratio iframe{ position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

/* --- Author profile (left 1/3 image, right 2/3 text) --- */
.author-profile{
  margin:28px auto;
  max-width:1100px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 8px 30px rgba(6,12,20,0.04);
  padding:18px;
  box-sizing:border-box;
  overflow:hidden;
}
.author-profile__title{ font-size:1.06rem; margin:0 0 12px; color:#071428; font-weight:700; }

/* container: left/right */
.author-profile__inner{
  display:flex;
  gap:24px;
  align-items:flex-start;
  flex-wrap:nowrap;
  box-sizing:border-box;
}

/* left column: avatar (1/3) */
.author-profile__avatar{
  flex:0 0 33.3333%;
  max-width:33.3333%;
  min-width:0;                 /* critical: allow shrink in flex */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  box-sizing:border-box;
  padding:6px;
}

/* avatar image: fill column but cap max width, no shadow */
.author-profile__avatar img{
  width:100%;
  max-width:260px;            /* change this to grow/shrink overall max */
  aspect-ratio:1/1;
  height:auto;
  object-fit:cover;
  border-radius:12px;
  box-shadow:none;
  border:none;
  display:block;
  margin:0 0 12px 0;
}

/* name under image */
.author-profile__avatar-name{
  display:block;
  font-weight:800;
  font-size:1.02rem;
  color:#071428;
  line-height:1.2;
}
.author-profile__avatar-sub{
  display:block;
  font-weight:600;
  font-size:0.88rem;
  color:#475569;
  margin-top:4px;
}

/* right column: meta (2/3) */
.author-profile__meta{
  flex:1 1 66.6667%;
  max-width:66.6667%;
  min-width:0;                 /* critical: prevent overflow */
  box-sizing:border-box;
  padding-left:12px;
  font-size:0.96rem;
  color:#0f1724;
  line-height:1.6;

  /* wrap protection */
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}
/* normalize margins inside meta */
.author-profile__meta p,
.author-profile__meta .author-profile__desc,
.author-profile__meta .author-profile__note,
.author-profile__meta .author-profile__comment{
  margin:0 0 12px;
  padding:0;
}

/* CTAs */
.author-profile__ctas{ margin-top:12px; display:flex; gap:10px; justify-content:flex-start; }
.author-profile .btn{ padding:8px 12px; border-radius:8px; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
.author-profile .btn-primary{ background:linear-gradient(90deg,#ff6b6b,#ffb86b); color:#fff; box-shadow:0 6px 18px rgba(2,6,23,0.06); border:0; }
.author-profile .btn-outline{ background:transparent; color:#0f1724; border:1px solid rgba(15,23,36,0.08); }

/* safety: ensure flex children can shrink properly */
.author-profile__avatar, .author-profile__meta { box-sizing:border-box; min-width:0; }

/* --- Responsive: mobile stack and larger avatar --- */
@media (max-width:768px){
  /* info/map -> vertical */
  .info-map-grid{ flex-direction:column; gap:12px; padding:0 12px; }
  .info-box, .map-box{ min-height:auto; }
  .map-ratio{ height:240px; }

  /* author profile -> vertical */
  .author-profile__inner{ flex-direction:column; gap:12px; align-items:center; }
  .author-profile__avatar, .author-profile__meta{ flex:1 1 100%; width:100%; max-width:100%; padding:0; }
  .author-profile__avatar img{ width:180px; max-width:220px; height:auto; margin-bottom:12px; } /* mobile image larger */
  .author-profile__meta{ text-align:center; padding:6px 12px; }
  .author-profile__ctas{ flex-direction:column; gap:8px; align-items:center; }
}

/* small adjustments for narrow desktops (optional) */
@media (min-width:769px) and (max-width:980px){
  .author-profile__avatar img{ max-width:220px; }
  .author-profile__avatar{ max-width:36%; flex-basis:36%; }
  .author-profile__meta{ max-width:64%; flex-basis:64%; padding-left:10px; }
}

/* ----- モバイルでボタンを横並びにし、画像をさらに大きくする ----- */
@media (max-width: 768px) {
  /* CTA を横並びに強制（横幅が足りない場合は横スクロール） */
  .author-profile__ctas {
    display: flex !important;
    flex-direction: row !important;       /* 横並び */
    flex-wrap: nowrap !important;         /* 折り返さない */
    justify-content: center !important;   /* 中央寄せ */
    gap: 12px !important;
    overflow-x: auto !important;          /* 横スクロールで見せる */
    -webkit-overflow-scrolling: touch !important;
    padding-bottom: 6px !important;       /* スクロール時の余白 */
  }

  /* 各ボタンは幅固定せず内容に沿うように */
  .author-profile .btn {
    flex: 0 0 auto !important;
    white-space: nowrap !important;       /* ボタン内のテキストを折返さない */
  }

  /* モバイルのアバターを大きめに（希望があれば数値変更可） */
  .author-profile__avatar img {
    width: 220px !important;     /* ← モバイルでの表示サイズ */
    max-width: 260px !important; /* 上限（狭い画面で余白確保） */
    height: auto !important;
    margin-bottom: 12px !important;
  }

  /* 余白調整：テキストがボタンに近づきすぎないように */
  .author-profile__meta { padding-top: 8px !important; }
}

.author-comment {
  margin: 18px 0;
  box-sizing: border-box;
}

.author-comment__bubble {
  position: relative;
  background: linear-gradient(90deg, #fffaf4, #fff6f0);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 8px 22px rgba(6, 12, 20, 0.06);
  border: 1px solid rgba(15, 23, 36, 0.04);
  color: #0f1724;
  line-height: 1.75;
}

.author-comment__bubble p {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ▼ 吹き出し三角（左）：PC・モバイル共通 */
.author-comment__bubble::after {
  content: "";
  position: absolute;
  left: -13px;
  top: 24px; /* 三角位置：テキスト高さに合わせて微調整可 */
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 13px solid rgba(15, 23, 36, 0.04); /* 外側シャドウっぽい三角 */
  z-index: 1;
}

.author-comment__bubble::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 24px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-right: 11px solid #fff6f0; /* 吹き出し本体の背景と一致 */
  z-index: 2;
}

/* スマホ時：少し内側に余白調整 */
@media (max-width: 768px) {
  .author-comment__bubble {
    padding: 14px 16px;
  }
  .author-comment__bubble::after {
    left: 16px;
    top: -13px;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 13px solid rgba(15, 23, 36, 0.04);
    border-top: none;
  }
  .author-comment__bubble::before {
    left: 18px;
    top: -11px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 11px solid #fff6f0;
    border-top: none;
  }
}



/* --------------------------------------------------------------------------- */
/* ---　近隣ペット向け用テーブルCSS --- */
/* ---------------------------------------------------------------------------- */
.nearby-facilities { margin:16px 0 32px; font-family:inherit; }
.nearby-facilities-heading { margin:0 0 8px; font-size:1.05rem; }
.nearby-grid { display:flex; gap:16px; }
.nearby-item { width:33.333%; box-sizing:border-box; border:1px solid #eee; padding:10px; border-radius:6px; background:#fff; }
.nearby-item .nearby-label { font-weight:700; margin-bottom:8px; }
.nearby-link { color:inherit; text-decoration:none; display:block; }
.nearby-thumb img { width:100%; height:auto; display:block; border-radius:4px; }
.nearby-thumb-placeholder { width:100%; height:80px; display:flex; align-items:center; justify-content:center; background:#f5f5f5; color:#999; border-radius:4px; }
.nearby-title { margin-top:8px; font-size:0.95rem; line-height:1.3; }

/* Mobile: two-column layout per item (label left, thumb right, title under thumb) */
@media (max-width:720px) {
  .nearby-grid { display:block; }
  .nearby-item { display:grid; grid-template-columns: 36% 64%; grid-template-rows: auto auto; gap:6px 8px; margin-bottom:8px; padding:8px 6px; }
  .nearby-item .nearby-label { grid-column:1 / 2; grid-row:1 / 2; align-self:center; font-weight:700; }
  .nearby-thumb { grid-column:2 / 3; grid-row:1 / 2; }
  .nearby-thumb img, .nearby-thumb-placeholder { width:100%; height:auto; }
  .nearby-title { grid-column:2 / 3; grid-row:2 / 3; margin-top:4px; }
  .nearby-item-empty { border:0; background:transparent; padding:6px 0; }
  .nearby-item-empty .nearby-thumb-placeholder { height:48px; display:flex; align-items:center; justify-content:center; }
}
/* --------------------------------------------------------------------------- */
/* ---　近隣物件用テーブルCSS（改訂：モバイルで左右ちょうど半々） --- */
/* ---------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */
/* ---　近隣物件用テーブルCSS（改訂：モバイルで左右ちょうど半々） --- */
/* ---------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */
/* ---　近隣物件用テーブルCSS（全文） ---                                    */
/* ---------------------------------------------------------------------------- */
.nearby-facilities { margin:16px 0 32px; font-family:inherit; }
.nearby-facilities-heading { margin:0 0 8px; font-size:1.05rem; }
.nearby-grid { display:flex; gap:16px; }
.nearby-item { width:33.333%; box-sizing:border-box; border:1px solid #eee; padding:10px; border-radius:6px; background:#fff; }
.nearby-item .nearby-label { font-weight:700; margin-bottom:8px; }
.nearby-link { color:inherit; text-decoration:none; display:block; }
.nearby-thumb img { width:100%; height:auto; display:block; border-radius:4px; }
.nearby-thumb-placeholder { width:100%; height:80px; display:flex; align-items:center; justify-content:center; background:#f5f5f5; color:#999; border-radius:4px; }
.nearby-title { margin-top:8px; font-size:0.95rem; line-height:1.3; }
/* ===== 最終：モバイル（max-width:720px）差し替え用 ===== */
@media (max-width:720px) {

  /* 祖先の overflow によるクリップを防ぐ（広めに指定） */
  html, body, .site, .content, .entry-content, .post-content, .nearby-facilities, table, tbody, tr, td, th {
    overflow: visible !important;
  }

  /* -------------------------
     見出し：画面いっぱいの淡いオレンジ縦グラデ（中央寄せ）
     - left/transform の組み合わせで安全にフルブリード表示
     - 負の vw マージンは使わない（過去に問題を起こしたため）
     ------------------------- */
  tr > th[colspan="2"] {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* ビューポート中央に合わせる */
    width: 100vw !important;                 /* 画面横いっぱい */
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    background: linear-gradient(180deg, #fff4e6 0%, #ffe9d6 100%) !important; /* 淡いオレンジの縦グラデ */
    text-align: center !important;
    font-weight: 700 !important;
    color: #222 !important;
    z-index: 9999 !important;
    visibility: visible !important;
    margin: 0 !important; /* 既存の margin をリセット */
  }
  tr > th[colspan="2"] * { text-align: center !important; color: inherit !important; visibility: visible !important; }

  /* --- 既存で入れてしまった破壊的なルールを確実に上書き --- */
  tr > th[colspan="2"] { left: 50% !important; transform: translateX(-50%) !important; }

  /* -------------------------
     カード群：左 25% / 右 75%（カードは白）
     - テンプレが inline style で flex を使っている場合に備えたセレクタ優先度
     ------------------------- */
  td div > div[style*="display:flex"],
  td div > div[style*="display:flex"] > div {
    display: block !important;
    padding: 0 !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
  }

  td div > div[style*="display:flex"] > div,
  .nearby-grid > .nearby-item {
    display: grid !important;
    grid-template-columns: 25% 75% !important;    /* ← 左:1/4 右:3/4 */
    grid-template-rows: auto auto !important;
    gap: 8px 10px !important;
    align-items: start !important;
    box-sizing: border-box !important;
    width: calc(100% - 16px) !important; /* 親の左右余白を考慮 */
    margin-bottom: 12px !important;
    padding: 8px !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    background: #fff !important; /* カードは白 */
  }

  /* 左ラベル（中央寄せ・上下中央） */
  td div > div[style*="display:flex"] > div > div:first-child,
  .nearby-item .nearby-label {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: center !important;
    padding: 8px 6px !important;
    font-weight: 700 !important;
    text-align: center !important;
    background: transparent !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* 右カラム（リンク：サムネ＋タイトル） */
  td div > div[style*="display:flex"] > div > a,
  .nearby-item .nearby-link {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 3 !important;
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  /* サムネ高さは元に戻す（260px） */
  td div > div[style*="display:flex"] > div > a > img,
  td div > div[style*="display:flex"] > div > a > div:first-child,
  .nearby-item .nearby-thumb img,
  .nearby-item .nearby-link > .nearby-thumb {
    width: 100% !important;
    height: 260px !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    margin: 0 !important;
  }

  /* タイトルはサムネの下（右カラム） */
  td div > div[style*="display:flex"] > div > a > div:nth-child(2),
  td div > div[style*="display:flex"] > div > a > .nearby-title,
  .nearby-item .nearby-title {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    margin-top: 6px !important;
    text-align: left !important;
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    color: #333 !important;
    padding-right: 6px !important;
  }

  /* プレースホルダも高さ合わせ */
  td div > div[style*="display:flex"] > div .nearby-thumb-placeholder,
  .nearby-item .nearby-thumb-placeholder {
    width: 100% !important;
    height: 160px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    margin: 0 !important;
  }

  /* 全体の左右余白（親コンテナに合わせる） */
  .nearby-facilities { margin: 16px 8px 32px !important; }
}
/* --- モバイル：見出しを淡いグレーに戻すだけ（レイアウトはそのまま） --- */
@media (max-width:720px) {
  tr > th[colspan="2"] {
    background: none !important; /* ← 背景指定を完全解除 */
    background-color: transparent !important; /* ← 念のため透明指定 */
    color: inherit !important; /* ← テーマ標準の文字色を継承 */
  }
}
@media (max-width:720px) {
  tr > th[colspan="2"] {
    height: 60px !important;
    line-height: 60px !important;    /* 単一行を垂直中央にする */
    padding: 0 16px !important;      /* 左右の余白は残す */
    font-size: 18px !important;      /* ← ここを変えて文字サイズ調整 (例: 16px, 20px) */
    letter-spacing: 0.5px !important;/* ← ここを変えて字間調整（正の数で広がる、負で詰める） */
    text-align: center !important;
    color: inherit !important;
  }
}
@media (max-width:720px) {
  /* 近隣ペット施設 見出しセルを完全に独立レイヤー化 */
  tr > th[colspan="2"] {
    position: relative !important;
    isolation: isolate !important; /* ← テーマのborder-collapseの影響を断つ */
    background: #fff !important;   /* 背景：元に戻したい色に合わせて変更 */
    border-left: none !important;
    border-right: none !important;
    z-index: 2 !important;
  }

  /* テーブル構造によるborderが残る場合を視覚的にマスク */
  tr > th[colspan="2"]::before,
  tr > th[colspan="2"]::after {
    content: "" !important;
    position: absolute !important;
    top: -1px !important;
    bottom: -1px !important;
    width: 10px !important;
    background: #fff !important;  /* ← ページ背景に合わせて変更 */
    z-index: 3 !important;
    pointer-events: none !important;
    display: block !important;
  }
  tr > th[colspan="2"]::before { left: -2px !important; }
  tr > th[colspan="2"]::after  { right: -2px !important; }
}
@media (max-width:720px) {
  /* サムネイルの高さを少し低くする */
  td div > div[style*="display:flex"] > div > a > img,
  td div > div[style*="display:flex"] > div > a > div:first-child,
  .nearby-item .nearby-thumb img,
  .nearby-item .nearby-link > .nearby-thumb {
    height: 150px !important; /* ← 元は260px。高さを20〜25%圧縮 */
    object-fit: cover !important;
  }

  /* タイトル部分も詰める */
  td div > div[style*="display:flex"] > div > a > div:nth-child(2),
  td div > div[style*="display:flex"] > div > a > .nearby-title,
  .nearby-item .nearby-title {
    margin-top: 4px !important;   /* ← 元は6px */
    font-size: 0.9rem !important; /* ← 少し小さめ */
    line-height: 1.2 !important;  /* ← 行間を詰める */
  }

  /* カード内の余白も少しだけ圧縮 */
  td div > div[style*="display:flex"] > div,
  .nearby-grid > .nearby-item {
    padding: 6px !important;       /* ← 元は8px */
    margin-bottom: 10px !important;/* ← 元は12px */
  }
}

/* --------------------------------------------------------------------------- */
/* ---　近隣物件用テーブルCSS（全文） ---                                    */
/* ---------------------------------------------------------------------------- */
:root{
  --nearby-thumb-h: 260px; /* デスクトップのサムネ高さ（必要に応じて変更） */
}

.nearby-facilities { margin:16px 0 32px; font-family:inherit; }
.nearby-facilities-heading { margin:0 0 8px; font-size:1.05rem; }
.nearby-grid { display:flex; gap:16px; }
.nearby-item { width:33.333%; box-sizing:border-box; border:1px solid #eee; padding:10px; border-radius:6px; background:#fff; }
.nearby-item .nearby-label { font-weight:700; margin-bottom:8px; }
.nearby-link { color:inherit; text-decoration:none; display:block; }

/* サムネ（画像） */
.nearby-thumb { width:100%; height:var(--nearby-thumb-h); overflow:hidden; border-radius:4px; box-sizing:border-box; }
.nearby-thumb img { width:100%; height:100%; display:block; object-fit:cover; border-radius:4px; }

/* プレースホルダ：デスクトップ（デフォルト）ではサムネと同じ高さにする */
.nearby-thumb-placeholder { width:100%; height:var(--nearby-thumb-h); display:flex; align-items:center; justify-content:center; background:#f5f5f5; color:#999; border-radius:4px; }

/* タイトル等 */
.nearby-title { margin-top:8px; font-size:0.95rem; line-height:1.3; }

/* ===== 最終：モバイル（max-width:720px）差し替え用 ===== */
@media (max-width:720px) {

  /* 祖先の overflow によるクリップを防ぐ（広めに指定） */
  html, body, .site, .content, .entry-content, .post-content, .nearby-facilities, table, tbody, tr, td, th {
    overflow: visible !important;
  }

  /* -------------------------
     見出し：画面いっぱいの淡いオレンジ縦グラデ（中央寄せ）
     - left/transform の組み合わせで安全にフルブリード表示
     - 負の vw マージンは使わない（過去に問題を起こしたため）
     ------------------------- */
  tr > th[colspan="2"] {
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important; /* ビューポート中央に合わせる */
    width: 100vw !important;                 /* 画面横いっぱい */
    max-width: 100vw !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    background: linear-gradient(180deg, #fff4e6 0%, #ffe9d6 100%) !important; /* 淡いオレンジの縦グラデ */
    text-align: center !important;
    font-weight: 700 !important;
    color: #222 !important;
    z-index: 9999 !important;
    visibility: visible !important;
    margin: 0 !important; /* 既存の margin をリセット */
  }
  tr > th[colspan="2"] * { text-align: center !important; color: inherit !important; visibility: visible !important; }

  /* --- 既存で入れてしまった破壊的なルールを確実に上書き --- */
  tr > th[colspan="2"] { left: 50% !important; transform: translateX(-50%) !important; }

  /* -------------------------
     カード群：左 25% / 右 75%（カードは白）
     - テンプレが inline style で flex を使っている場合に備えたセレクタ優先度
     ------------------------- */
  td div > div[style*="display:flex"],
  td div > div[style*="display:flex"] > div {
    display: block !important;
    padding: 0 !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
  }

  td div > div[style*="display:flex"] > div,
  .nearby-grid > .nearby-item {
    display: grid !important;
    grid-template-columns: 25% 75% !important;    /* ← 左:1/4 右:3/4 */
    grid-template-rows: auto auto !important;
    gap: 8px 10px !important;
    align-items: start !important;
    box-sizing: border-box !important;
    width: calc(100% - 16px) !important; /* 親の左右余白を考慮 */
    margin-bottom: 12px !important;
    padding: 8px !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    background: #fff !important; /* カードは白 */
  }

  /* 左ラベル（中央寄せ・上下中央） */
  td div > div[style*="display:flex"] > div > div:first-child,
  .nearby-item .nearby-label {
    grid-column: 1 / 2 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: center !important;
    padding: 8px 6px !important;
    font-weight: 700 !important;
    text-align: center !important;
    background: transparent !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* 右カラム（リンク：サムネ＋タイトル） */
  td div > div[style*="display:flex"] > div > a,
  .nearby-item .nearby-link {
    grid-column: 2 / 3 !important;
    grid-row: 1 / 3 !important;
    display: block !important;
    text-decoration: none !important;
    color: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }

  /* サムネ高さは元に戻す（var で制御） */
  td div > div[style*="display:flex"] > div > a > img,
  td div > div[style*="display:flex"] > div > a > div:first-child,
  .nearby-item .nearby-thumb img,
  .nearby-item .nearby-link > .nearby-thumb {
    width: 100% !important;
    height: var(--nearby-thumb-h) !important;
    display: block !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    margin: 0 !important;
  }

  /* タイトルはサムネの下（右カラム） */
  td div > div[style*="display:flex"] > div > a > div:nth-child(2),
  td div > div[style*="display:flex"] > div > a > .nearby-title,
  .nearby-item .nearby-title {
    grid-column: 2 / 3 !important;
    grid-row: 2 / 3 !important;
    margin-top: 6px !important;
    text-align: left !important;
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    color: #333 !important;
    padding-right: 6px !important;
  }

  /* プレースホルダも高さ合わせ */
  td div > div[style*="display:flex"] > div .nearby-thumb-placeholder,
  .nearby-item .nearby-thumb-placeholder {
    width: 100% !important;
    height: calc(var(--nearby-thumb-h) - 100px) !important; /* モバイルでは少し低め（後段で上書き） */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    margin: 0 !important;
  }

  /* 全体の左右余白（親コンテナに合わせる） */
  .nearby-facilities { margin: 16px 8px 32px !important; }
}

/* --- モバイル：見出しを淡いグレーに戻すだけ（レイアウトはそのまま） --- */
@media (max-width:720px) {
  tr > th[colspan="2"] {
    background: none !important; /* ← 背景指定を完全解除 */
    background-color: transparent !important; /* ← 念のため透明指定 */
    color: inherit !important; /* ← テーマ標準の文字色を継承 */
  }
}
@media (max-width:720px) {
  tr > th[colspan="2"] {
    height: 60px !important;
    line-height: 60px !important;    /* 単一行を垂直中央にする */
    padding: 0 16px !important;      /* 左右の余白は残す */
    font-size: 18px !important;      /* ← ここを変えて文字サイズ調整 (例: 16px, 20px) */
    letter-spacing: 0.5px !important;/* ← ここを変えて字間調整（正の数で広がる、負で詰める） */
    text-align: center !important;
    color: inherit !important;
  }
}
@media (max-width:720px) {
  /* 近隣ペット施設 見出しセルを完全に独立レイヤー化 */
  tr > th[colspan="2"] {
    position: relative !important;
    isolation: isolate !important; /* ← テーマのborder-collapseの影響を断つ */
    background: #fff !important;   /* 背景：元に戻したい色に合わせて変更 */
    border-left: none !important;
    border-right: none !important;
    z-index: 2 !important;
  }

  /* テーブル構造によるborderが残る場合を視覚的にマスク */
  tr > th[colspan="2"]::before,
  tr > th[colspan="2"]::after {
    content: "" !important;
    position: absolute !important;
    top: -1px !important;
    bottom: -1px !important;
    width: 10px !important;
    background: #fff !important;  /* ← ページ背景に合わせて変更 */
    z-index: 3 !important;
    pointer-events: none !important;
    display: block !important;
  }
  tr > th[colspan="2"]::before { left: -2px !important; }
  tr > th[colspan="2"]::after  { right: -2px !important; }
}
@media (max-width:720px) {
  /* サムネイルの高さを少し低くする（モバイル用の実寸） */
  :root { --nearby-thumb-h: 150px; } /* モバイルではサムネを小さくする */
  td div > div[style*="display:flex"] > div > a > img,
  td div > div[style*="display:flex"] > div > a > div:first-child,
  .nearby-item .nearby-thumb img,
  .nearby-item .nearby-link > .nearby-thumb {
    height: var(--nearby-thumb-h) !important;
    object-fit: cover !important;
  }

  /* タイトル部分も詰める */
  td div > div[style*="display:flex"] > div > a > div:nth-child(2),
  td div > div[style*="display:flex"] > div > a > .nearby-title,
  .nearby-item .nearby-title {
    margin-top: 4px !important;   /* ← 元は6px */
    font-size: 0.9rem !important; /* ← 少し小さめ */
    line-height: 1.2 !important;  /* ← 行間を詰める */
  }

  /* カード内の余白も少しだけ圧縮 */
  td div > div[style*="display:flex"] > div,
  .nearby-grid > .nearby-item {
    padding: 6px !important;       /* ← 元は8px */
    margin-bottom: 10px !important;/* ← 元は12px */
  }

  /* モバイルでのプレースホルダ高さをサムネ高さに合わせる */
  td div > div[style*="display:flex"] > div .nearby-thumb-placeholder,
  .nearby-item .nearby-thumb-placeholder {
    height: var(--nearby-thumb-h) !important;
  }
}

  /* -------------------------
     h３タグなどをこれで囲むと帯化を無力化できる
     ------------------------- */
/* 指定したエリア内のH3装飾を完全に無力化する */
.no-obi h3 {
    background: none !important;    /* 背景（帯）を消す */
    border: none !important;        /* 左側の棒などを消す */
    padding: 0 !important;         /* 余白をリセット */
    margin: 1.5em 0 1.5em 0 !important; /* 文脈に合わせた適切な余白 */
    position: static !important;    /* Cocoonの擬似要素対策 */
}

/* 擬似要素（チェックマークやアイコン）が出ている場合の対策 */
.no-obi h3::before, 
.no-obi h3::after {
    content: none !important;
}

/* ==============================================
   サイト説明セクション（完全版）
   ============================================== */

/* --- 全体の外枠設定 --- */
.shop-intro-section {
    background-color: #fff9f0;
    border-top: 3px solid #f5cf9e;
    border-bottom: 3px solid #f5cf9e;
    padding: 50px 20px;
    margin: 30px auto 50px;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* 上部の肉球アイコン */
.shop-intro-section::before {
    content: "\f1b0";
    font-family: FontAwesome;
    position: absolute;
    top: -24px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff9800;
    color: #fff;
    width: 46px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border-radius: 50%;
    font-size: 22px;
    border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.shop-intro-inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

/* --- タイトル --- */
.shop-intro-title {
    font-size: 1.6rem;
    color: #333;
    margin: 0 0 35px 0;
    line-height: 1.4;
    font-weight: 700;
}

.shop-intro-title .sub-title {
    display: block;
    font-size: 0.95rem;
    color: #ff9800;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 0.05em;
}

/* --- PCレイアウト（3カラム） --- */
.shop-intro-body {
    display: grid;
    /* 左画像(170px) - テキスト(残り) - 右画像(170px) */
    grid-template-columns: 170px 1fr 170px;
    align-items: center;
    gap: 30px;
}

/* --- 画像スタイル --- */
.profile-item {
    margin: 0;
    display: flex;
    justify-content: center;
}

.profile-item img {
    width: 170px;
    height: 170px;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.profile-item img:hover {
    transform: scale(1.05) rotate(3deg);
}

/* --- テキストエリア --- */
.shop-intro-text {
    text-align: left;
    font-size: 1rem;
    line-height: 1.9;
}

.shop-intro-text p {
    margin-bottom: 0;
}

/* --- 強調メッセージ（PC版） --- */
.lead-msg-box {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    color: #d35400;
    border-bottom: 2px dashed #ffcc80;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

/* キャッチコピー（横並び） */
.lead-msg-titles {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* ここで「大型犬」と「猫」の間隔を調整 */
    margin-bottom: 10px;
}

.lead-msg-titles .lead-item {
    font-size: 1.15rem;
    font-weight: 700;
    color: #bf360c;
    white-space: nowrap; /* ★勝手な改行を禁止 */
}

.lead-msg-desc {
    font-size: 1rem;
    margin: 0;
}


/* ==============================================
   スマホ・タブレット対応 (768px以下)
   ============================================== */
@media (max-width: 768px) {
    /* 外枠の余白調整 */
    .shop-intro-section {
        padding: 40px 15px 30px;
    }

    /* レイアウト変更：テキストを上に、画像を下に */
    .shop-intro-body {
        grid-template-columns: 1fr 1fr; /* 下部は2列 */
        grid-template-areas: 
            "text text"
            "img1 img2";
        gap: 20px 10px;
    }

    /* テキスト全体を中央寄せ */
    .shop-intro-text {
        grid-area: text;
        text-align: center;
        font-size: 0.95rem;
        line-height: 1.7;
    }

    /* 画像配置 */
    .profile-user { grid-area: img1; }
    .profile-rabbit { grid-area: img2; }

    /* スマホでの画像サイズ */
    .profile-item img {
        width: 110px;
        height: 110px;
        border-width: 3px;
    }

    /* タイトル文字サイズ調整 */
    .shop-intro-title {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }
    .shop-intro-title .sub-title {
        font-size: 0.8rem;
    }

    /* --- 強調メッセージ（スマホ版） --- */
    .lead-msg-box {
        border-bottom: none;
        background: rgba(255,255,255,0.6); /* 背景を薄く白に */
        padding: 15px 10px;
        border-radius: 8px;
        margin-bottom: 15px;
    }

    .lead-msg-titles {
        flex-direction: column; /* ★ここが重要：縦並びに変更 */
        gap: 5px; /* 上下の隙間 */
        margin-bottom: 8px;
    }
    
    .lead-msg-titles .lead-item {
        font-size: 1.1rem;
    }

    .lead-msg-desc {
        font-size: 0.9rem;
    }
}