body{
  font-family:system-ui, -apple-system, Segoe UI, sans-serif;
  margin:16px;
}
form{
  display:flex;
  gap:.5rem;
  margin-bottom:1rem;
  flex-wrap:wrap
}
input[name="q"]{
  flex:1;
  min-width:240px;
  padding:.6rem .8rem
}
select,button{
  padding:.5rem .7rem
}
table{
  width:100%;
  border-collapse:collapse
}
th,td{
  border-bottom:1px solid #eee;
  padding:.5rem;
  vertical-align:top
}
th{
  background:#fafafa;
  text-align:left
}
.src{
  font-size:.85em;
  color:#666;
  margin-top:.25rem
}
.thumb{
  width:80px;
  height:auto
}
mark{
  background:#ffeb3b
}
.pill{
  border:1px solid #ddd;
  border-radius:999px;
  padding:.25rem .6rem;
  text-decoration:none;
  white-space:nowrap
}
.sugg-wrap{
  position:relative;
  max-width:640px
}
.sugg-pop{
  display:none;
  position:absolute;
  inset:auto auto auto 0;
  top:calc(100% + 10px);      /* 変換候補とかぶりにくく */
  width:min(640px, 100%);
  max-height:min(48vh, 320px);
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 10px 20px rgba(0,0,0,.06);
  z-index:50;
  overflow:auto;              /* 候補が多い時にスクロール */
  overscroll-behavior:contain;/* スクロールが親に伝播しないように */
}
.sugg-pop.open{display:block}
.sugg-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.45rem .75rem;
  font-size:.9em;
  color:#555;
  background:#fafafa
}
.sugg-hint{opacity:.7}
.sugg-list{
  list-style:none;
  margin:0;
  padding:0;
  max-height:320px;
  overflow:auto
}
.sugg-item{
  display:flex;
  gap:.75rem;
  align-items:center;
  justify-content:space-between;
  padding:.5rem .75rem;
  cursor:pointer
}

/* ===== 共通モーダル（詳細・個別検索） ======================== */
.detail-modal{
  overflow:hidden; /* 基本は中身側でスクロール管理 */
  width:min(1000px, 96vw);
  height:min(86vh, 900px);
  border:none;
  padding:0;
  border-radius:12px;
  box-shadow:0 20px 40px rgba(0,0,0,.18);
}
.detail-modal::backdrop{
  background:rgba(0,0,0,.35);
}
.detail-head{
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.6rem .9rem;
  border-bottom:1px solid #e5e7eb;
  background:#fff;
}

.detail-title{
  font-weight:600;
  flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.detail-actions a{
  font-size:.9em;
  color:#2563eb;
  text-decoration:none;
}
.detail-close{
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:8px;
  padding:.25rem .6rem;
  cursor:pointer;
}
.detail-body{
  position:relative;
  height:calc(100% - 48px);
  background:#fff;
}
.detail-body iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:#fff;
}
.detail-loading{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.95em;
  color:#555;
  background:#fff;
}

/* 640px以下：汎用モーダルは少し大きめにする */
@media (max-width: 440px){
  .detail-modal{
    width:96vw;
    height:92vh;
    border-radius:10px;
  }
  #detail-modal .detail-close {
    font-size:20px;
  }
}

.thumb-wrap{
  position:relative;
  display:inline-block;
}
.thumb-wrap .badge-on-thumb{
  position:absolute;
  right:4px;
  bottom:4px;
  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:.75em;
  padding:.15rem .35rem;
  border-radius:6px;
}

/* ===== 個別検索モーダル（refine） ============================ */
#refine-modal.detail-modal{
  width:min(1100px,96vw);
  height:min(90dvh,1000px);
  padding:0;
  border:0;
  border-radius:12px;
  box-shadow:0 20px 40px rgba(0,0,0,.25);

  /* 中身を縦に並べて、body が余り高さ全部を使うように */
  display:flex;
  flex-direction:column;
  overflow: visible;
}
#refine-modal .detail-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.6rem .9rem;
  background: linear-gradient(180deg, #0b2d9b 0%, #2743c0 100%);
  color:#fff;
  border-top-left-radius:12px;
  border-top-right-radius:12px;
  position:sticky;
  top:0;
  z-index:1;
  min-height: 80px;     /* 全モーダル共通で行の高さを確保 */

}
#refine-modal .detail-title{
  font-weight:700;
}
#refine-modal .detail-actions{
  display:flex;
  align-items:center;
  gap:.75rem;
}
#refine-modal .detail-actions a{
  color:#fff;
  text-decoration:underline;
}
#refine-modal .detail-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  padding:0;
  border-radius:50%;
  line-height:1;
  font-size:18px;
}
#refine-modal .detail-close:hover{
  background:#ffffff33;
}

/* ★ refine-modal の中身をスクロール可能にする本体 */
#refine-modal .detail-body{
  position:relative;
  /* 既存の height:calc(...) を打ち消す */
  height:auto;
  flex:1;                         /* ヘッダー以外の残り高さを全て使う */
  overflow-y:auto;                /* 中身だけ縦スクロール */
  -webkit-overflow-scrolling:touch;
}
#refine-modal .detail-loading{
  padding:.9rem;
  font-size:.95rem;
  color:#444;
}
#refine-modal iframe#refine-frame{
  width:100%;
  height:100%;
  border:0;
  overflow:auto;
  background:#fff;
}

/* 440px以下：refine は全画面モーダル風にする */
@media (max-width: 440px){
  #refine-modal.detail-modal{
    width:95vw;
    height:100dvh;
    max-height:100dvh;
    border-radius:0;
    display:flex;
    flex-direction:column;
    overflow: visible;
  }
}

/* 背景ページはスクロール禁止 */
@media (min-width: 441px){
  html:has(#refine-modal[open]){
    overflow:hidden;
  }
}
/* ===== 通常の詳細モーダル（オレンジ） ======================= */
#detail-modal .detail-head{
  background: linear-gradient(180deg,#ff9f1a 0%, #ff7a00 100%);
  color:#fff;
  border-bottom:1px solid #ff8c3a;
}
#detail-modal .detail-head .detail-actions a,
#detail-modal .detail-head .detail-actions button{
  color:#fff;
}
#detail-modal .detail-head :is(a,button):focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
}
#detail-modal::backdrop{
  background: rgba(0,0,0,.35);
}
#detail-modal .detail-head .detail-actions a,
#detail-modal .detail-head .detail-close{
  color:#fff !important;
}
#detail-modal .detail-head .detail-close{
  background: transparent;
  border: 0;
  line-height: 1;
  cursor: pointer;
}
#detail-modal .detail-head .detail-close:hover{
  filter: brightness(1.1);
}
#detail-modal .detail-head .detail-close:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 2px;
}
#detail-modal::backdrop{
  background: rgba(0,0,0,.35);
}

/* === Hit counter pulse (件数>0で点滅) ======================= */
.hit-counter{
  display:inline-block;
  padding:.15rem .55rem;
  margin:-0.25rem 0 0.4rem;
  border-radius:5px;
  line-height:1.35;
  background:#fff;           /* 初期 */
  color:#222;
  border:1px solid #e5e7eb;
}
.hit-counter.flash-on{
  animation: con-hit-2blink 0.9s ease-in-out 0s 2 forwards;
}
@keyframes con-hit-2blink{
  0%   { background:#fff;      color:#222;   box-shadow:0 0 0 rgba(255,122,0,0); }
  20%  { background:#fff7c2;   color:#222;   box-shadow:0 0 0 rgba(255,122,0,0); }
  50%  { background:#fff;      color:#222; }
  80%  { background:#fff7c2;   color:#222; }
  100% { background:#ff7a00;   color:#fff;   border-color:#ff7a00; }
}

/* 低速端末や reduce-motion では点滅しないで最終状態だけ適用 */
@media (prefers-reduced-motion: reduce){
  .hit-counter.flash-on{
    animation:none;
    background:#ff7a00;
    color:#fff;
    border-color:#ff7a00;
  }
}

/* ==== help-tip撤去後：ホバー/フォーカスでターゲットを点線囲み ==== */
[data-help-text],
[data-help]{
  outline-offset: 3px;
  border-radius: 6px;
}
[data-help-text]:hover,
[data-help-text]:focus-visible,
[data-help]:hover,
[data-help]:focus-visible{
  outline: 2px dotted #ff7a00;
}

/* キーボード操作時の視認性（既存のボタンなどにも効く） */
:focus-visible{
  scroll-margin: 16px;
}

/* ミニボタン系 */
.mini-tools{
  display:flex;
  gap:4px;
  justify-content:center;
  margin-top:.25rem;
}
.mini{
  border:1px solid #e5e7eb;
  background:#fff;
  border-radius:6px;
  padding:.15rem .35rem;
  font-size:.75rem;
  line-height:1;
  cursor:pointer;
}
.mini:hover{
  background:#f8fafc;
}
.mini.hi{
  background:#0b5cff;
  color:#fff;
  border-color:#0b5cff;
}
.detail-nav{
  border:1px solid #e5e7eb;
  background:#f9fafb;
  border-radius:999px;
  padding:.25rem .7rem;
  font-size:.85em;
  cursor:pointer;
  margin-right:.25rem;
  color: #000 !important;
}
.detail-nav:disabled{
  opacity:.4;
  cursor:default;
}

/* === サジェストブロック ================================ */
.suggest-block{
  margin: 0.8em 0;
}
.suggest-title{
  font-size: 0.95rem;
  font-weight: 600;
  color: #444;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 0.4em;
}
.suggest-list{
  display: flex;
  flex-wrap: wrap;
  gap: 0.45em 0.6em;
}
.suggest-chip{
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.87rem;
  line-height: 1.3;
  cursor: pointer;
  transition: all 0.18s ease;
  color: #333;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.suggest-chip:hover{
  background: #ffeed8;
  border-color: #ffa85c;
  color: #c75a00;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transform: translateY(-1px);
}
.suggest-title::before{
  font-size: 1rem;
}
.suggest-block.suggest-recent .suggest-title::before{
  content: "🕘";
}
.suggest-block.suggest-popular .suggest-title::before{
  content: "🔥";
}

/* モバイル用：検索結果テーブルを横スクロールにする */
@media (max-width: 440px){
  .result-scroll{
    width: 100%;
    max-width: 100vw;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .result-scroll table{
    min-width: 800px;
  }

  /* タイトル行＋ボタン行に分ける（すべてのdetail-modal共通） */
  .detail-modal .detail-head{
    flex-direction: column;
    align-items: stretch;
    gap: .25rem;
  }

  .detail-modal .detail-title{
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.3;
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    overflow: visible;
    text-overflow: clip;
  }

  .detail-modal .detail-actions{
    justify-content: flex-end;
    flex-wrap: wrap;
    column-gap: .35rem;
    row-gap: .25rem;
  }

  .detail-modal .detail-actions a,
  .detail-modal .detail-actions button{
    font-size: .9rem;
    padding: .2rem .4rem;
  }
}

/* ギャラリーバッジ用 */
.pill-gallery {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* 左側の丸アイコン */
.pill-gallery .pill-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}

/* カテゴリごとに画像切り替え */
.pill-koshashin .pill-icon {
  background-image: url('/srch-dc/common_img/icon_koshashin.jpg');}

.pill-ehagaki .pill-icon {
  background-image: url('/srch-dc/common_img/icon_ehagaki.jpg');
}

.pill-hikifuda .pill-icon {
  background-image: url('/srch-dc/common_img/icon_hikifuda.jpg');
}