:root{ --mds-border:#d0d0d0; --mds-sep:#e3e3e3; --mds-bg:#fff; --mds-text:#222; }
.mds-form-wrap{ position:relative; }
.mds-count-badge{ position:absolute; right:10px; top:-10px; background:#333; color:#fff; font-size:12px; line-height:20px; padding:0 8px; border-radius:10px; opacity:.9; }
.mds-form-horizontal{ display:grid; grid-template-columns:35% 30% 15% 20%; width:100%; border:1px solid var(--mds-border); border-radius:8px; background:var(--mds-bg); overflow:hidden; }
.mds-cell{ position:relative; height:44px; display:flex; align-items:center; }
.mds-cell:not(:first-child)::before{ content:''; position:absolute; left:0; top:6px; bottom:6px; width:0; border-left:1px solid var(--mds-sep); }
.mds-cell input[type="text"], .mds-cell select{ width:100%; height:44px; line-height:44px; padding:0 12px; border:0; background:transparent; font-size:14px; color:var(--mds-text); outline:none; }
.mds-flag-cell{ display:flex; align-items:center; } .mds-flag-cell label{ margin-left:12px; display:flex; align-items:center; gap:8px; font-size:14px; line-height:1; }
.mds-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; margin-top:16px; }
.result-item{ text-align:center; }
.result-item .result-image{ display:block; text-decoration:none; }
.result-item img{ width:175px; height:175px; object-fit:cover; border-radius:4px; transition:opacity 0.2s; }
.result-item .result-image:hover img{ opacity:0.85; }
.result-item h3{ font-size:14px; margin-top:8px; }
.result-item h3 a{ color:#333; text-decoration:none; transition:color 0.2s; }
.result-item h3 a:hover{ color:#0073aa; text-decoration:underline; }
/* Hot keywords */
.mds-hot-box{ background: linear-gradient(180deg,#f9b6c2 0%,#f4839a 100%); padding:12px; border-radius:10px; color:#fff; margin:14px 0; }
.mds-hot-title{ font-weight:700; color:#fff; margin-bottom:8px; font-size:20px; }
.mds-hot-list{ background:#fff; color:#333; border-radius:6px; padding:10px; line-height:2; font-size:15px; }
.mds-hot-list .mds-hot-term{ display:inline-block; margin-right:10px; text-decoration:none; border-bottom:1px dotted #999; }
.mds-hot-list .mds-hot-term:hover{ text-decoration:underline; }
/* Sortbar */
.mds-sortbar{position:relative;display:inline-block;margin:8px 0 6px 0;cursor:pointer;user-select:none;}
.mds-sortbar-title{font-size:14px;color:#333;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border:1px solid #ddd;border-radius:6px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.03);}
.mds-sortbar-menu{position:absolute;z-index:9999;top:100%;left:0;margin-top:6px;width:240px;background:#fff;border:1px solid #e5e5e5;border-radius:8px;box-shadow:0 10px 20px rgba(0,0,0,.08);padding:10px;display:none;}
.mds-sortbar.open .mds-sortbar-menu{display:block;}
.mds-sortbar-menu .sec-title{font-size:12px;color:#666;margin:4px 0 6px 4px;}
.mds-sortbar-menu hr{border:none;border-top:1px solid #eee;margin:8px 0;}
.mds-sortbar-menu label{display:flex;align-items:center;gap:8px;padding:6px 4px;border-radius:6px;cursor:pointer;}
.mds-sortbar-menu label:hover{background:#f7f7f7;}
@media (max-width:768px){ .mds-form-horizontal{grid-template-columns:1fr} .mds-cell:not(:first-child)::before{display:none} }

/* ============================================
   PC/SP 表示切り替え用スタイル (末尾に追加)
   ============================================ */
@media screen and (min-width: 769px) {
  .sp-only {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  .pc-only {
    display: none !important;
  }
}

/* ============================================
   画像なし（プレースホルダー）のPC用スタイル
   ============================================ */
.mds-no-img {
  width: 175px;
  height: 175px;
  background: #eee;
  border-radius: 4px;
  margin: 0 auto; /* 中央寄せ */
}

/* ============================================
   スマホ用レイアウト修正 (3カラム強制 & 画像レスポンシブ)
   ============================================ */
@media screen and (max-width: 768px) {
  
  /* グリッドを強制的に3列にする */
  .mds-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important; /* 隙間を少し狭めてスペース確保 */
  }

  /* 画像とプレースホルダーを枠に合わせて伸縮させる */
  .result-item img,
  .result-item .mds-no-img {
    width: 100% !important;       /* 幅をカラム一杯に */
    height: auto !important;      /* 高さは自動 */
    aspect-ratio: 1 / 1;          /* 正方形を維持 */
    object-fit: cover;            /* 画像のトリミング調整 */
    min-width: 0;                 /* グリッド内での崩れ防止 */
  }

  /* スマホではタイトル文字サイズも少し小さく調整するとバランスが良いです */
  .result-item h3 {
    font-size: 12px !important;
    margin-top: 4px !important;
  }
}

/* ============================================
   スマホ用検索ボタンの追加スタイル
   ============================================ */
@media screen and (max-width: 768px) {
  /* 右側エリアをFlexboxにして横並びにする */
  .kensu-sp-r {
    display: flex;
    align-items: center;
    gap: 10px; /* 件数とボタンの間隔 */
  }

  /* 検索ボタンのデザイン */
  .mds-btn-sp {
    appearance: none;
    border: none;
    background: #0073aa; /* WP標準の青、またはお好みの色 */
    color: #fff;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.5;
  }
  
  /* 押した時のスタイル */
  .mds-btn-sp:active {
    opacity: 0.8;
  }
}

/* ============================================
   スマホ用：件数バッジとボタンのレイアウト修正
   ============================================ */
@media screen and (max-width: 768px) {
  
  /* 右側エリア（バッジとボタンの親） */
  .kensu-sp-r {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* 右寄せ */
    gap: 10px; /* バッジとボタンの間隔 */
  }

  /* ★重要：スマホ版ではバッジの絶対配置を解除して、ボタンの横に並べる */
  .kensu-sp-r .mds-count-badge {
    position: static !important; /* absoluteを無効化 */
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    
    /* 見た目の微調整 */
    transform: none; 
    line-height: 24px; /* 高さ合わせ */
    display: inline-block;
  }

  /* 検索ボタンのデザイン（前回と同じ） */
  .mds-btn-sp {
    appearance: none;
    border: none;
    background: #0073aa; 
    color: #fff;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    line-height: 1.5;
    white-space: nowrap; /* ボタン内の改行防止 */
  }
  
  .mds-btn-sp:active {
    opacity: 0.8;
  }
}