@charset "utf-8";
/* ============================================================
   検索ページ（search.php）の新しい部品 2026-11-12 Claude
   いまは「今のサイトの見た目に合う仮の見た目」。
   デザインが決まったら、このファイルを差し替えるだけで見た目を変えられる
   （HTML 側のクラスは s397-〇〇 にそろえてある）
   ============================================================ */
.s397-search{max-width:100rem;margin:0 auto;padding:0 1.5rem 3rem;font-family:"游ゴシック体",YuGothic,"游ゴシック Medium","Yu Gothic Medium","游ゴシック","Yu Gothic",sans-serif}
.s397-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 選んでいる条件 */
.s397-chips{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.5rem 0;padding:0;list-style:none}
.s397-chips a{display:inline-flex;align-items:center;min-height:4rem;padding:0 1.4rem;border-radius:2rem;background:#ff02b4;color:#fff;font-weight:bold;font-size:1.4rem;text-decoration:none}
.s397-chips .s397-clear a{background:#fff;color:#333;border:2px solid #ccc}

/* 条件をえらぶ箱 */
.s397-filter{margin:1.5rem 0 2.5rem;border:3px solid #ff02b4;border-radius:1.2rem;background:#fff}
.s397-filter-head{cursor:pointer;padding:1.4rem 1.8rem;font-size:1.7rem;font-weight:bold;color:#ff02b4;list-style:none}
.s397-filter-head::-webkit-details-marker{display:none}
.s397-filter-head::after{content:"▼";float:right}
.s397-filter[open] .s397-filter-head::after{content:"▲"}
.s397-form{padding:0 1.8rem 1.8rem}
.s397-group{border:0;margin:0 0 1.8rem;padding:0}
.s397-group legend{font-size:1.6rem;font-weight:bold;margin-bottom:.8rem;padding:0}
.s397-sub{margin:1.2rem 0 .6rem;font-size:1.4rem;font-weight:bold;color:#555}
.s397-n{font-size:1.2rem;color:#777}

.s397-links,.s397-checks{display:flex;flex-wrap:wrap;gap:.8rem;margin:0;padding:0;list-style:none}
.s397-links a{display:inline-flex;align-items:center;min-height:4.4rem;padding:0 1.4rem;border:2px solid #ff02b4;border-radius:.8rem;color:#ff02b4;background:#fff;font-size:1.4rem;font-weight:bold;text-decoration:none}
.s397-links a.is-on{background:#ff02b4;color:#fff}
.s397-links a.is-on .s397-n{color:#fff}
.s397-checks label{display:inline-flex;align-items:center;gap:.6rem;min-height:4.4rem;padding:0 1.2rem;border:2px solid #ddd;border-radius:.8rem;background:#fff;font-size:1.4rem;cursor:pointer}
.s397-checks input{width:1.8rem;height:1.8rem;accent-color:#ff02b4}
.s397-checks label:has(input:checked){border-color:#ff02b4;background:#fff0fa;font-weight:bold}

.s397-submit{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem;position:sticky;bottom:0;padding:1.2rem 0;background:#fff}
.s397-submit button{min-height:5rem;padding:0 3rem;border:0;border-radius:2.5rem;font-size:1.7rem;font-weight:bold;cursor:pointer}
.s397-reset{font-size:1.4rem;color:#333}

/* 結果 */
.s397-count{font-size:1.6rem}
.s397-count strong{font-size:2.4rem;color:#ff02b4}
.s397-card .tags_wrap li.is-hit{font-weight:bold}
.s397-empty p{text-align:center;padding:5rem 1rem}
.s397-pager{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;list-style:none;padding:0}
.s397-pager a,.s397-pager p{display:inline-flex;align-items:center;justify-content:center;min-width:4.4rem;min-height:4.4rem;padding:0 1rem;border-radius:.8rem;font-size:1.5rem}
.s397-pager a{border:2px solid #ff02b4;color:#ff02b4;text-decoration:none;background:#fff}
.s397-pager .selected{background:#ff02b4;color:#fff;margin:0}
.s397-gap{align-self:center}

/* 折りたたみ（ジャンル・こだわり） */
details.s397-group{border-top:1px dashed #ddd;padding-top:1.2rem}
details.s397-group>summary{cursor:pointer;font-size:1.6rem;font-weight:bold;margin-bottom:1rem;min-height:4.4rem;display:flex;align-items:center}
.s397-card .tags_wrap li.s397-more{background:none;border:0;color:#777}

/* 検索ページでは画面下に固定の案内キャラを出さない（ボタンや結果にかぶるため） */
.girl_fixed,.boy_fixed{display:none !important}

/* 結果カード：スマホでは「左に写真・右に情報」の横並びで短く（全体がリンク） */
@media (max-width: 768px){
  .s397-search .s397-card{padding:1.2rem !important;margin:0 0 1.2rem !important}
  .s397-search .s397-card > a{display:grid !important;grid-template-columns:10.4rem minmax(0,1fr);gap:1.2rem;align-items:start;text-decoration:none}
  .s397-search .s397-card > a > img{width:10.4rem !important;height:13.8rem !important;max-width:none !important;object-fit:cover;margin:0 !important;border-radius:.8rem}
  .s397-search .s397-card .txt_wrap{padding:0 !important;width:auto !important;margin:0 !important}
  .s397-search .s397-card .area_cat{margin:0 0 .4rem !important;font-size:1.2rem}
  .s397-search .s397-card .area_cat li{margin:0 .4rem .3rem 0 !important}
  .s397-search .s397-card .shopName{font-size:1.7rem !important;line-height:1.4 !important;margin:0 0 .4rem !important;padding:0 0 .4rem !important}
  .s397-search .s397-card .txt_wrap > p{font-size:1.25rem !important;line-height:1.6 !important;margin:0 0 .6rem !important}
  .s397-search .s397-card dl{display:grid !important;grid-template-columns:auto minmax(0,1fr);gap:.2rem .6rem;margin:0 0 .6rem !important;font-size:1.25rem}
  .s397-search .s397-card dl dt,.s397-search .s397-card dl dd{width:auto !important;margin:0 !important;padding:.1rem .4rem !important;border:0 !important;line-height:1.5}
  .s397-search .s397-card dl dd{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .s397-search .s397-card dl dt:nth-of-type(3),.s397-search .s397-card dl dd.time_area{display:none}
  .s397-search .s397-card .tags_wrap{margin:0 !important;display:flex;flex-wrap:wrap;gap:.4rem}
  .s397-search .s397-card .tags_wrap li{font-size:1.1rem !important;margin:0 !important;padding:.2rem .6rem !important}
  .s397-search .s397-card .btn_yellow{display:none !important}
}