/* ========== Image page (dp) ========== */
#dp-image-menu *, #dp-image-menu *::before, #dp-image-menu *::after{
  box-sizing: border-box !important;
}

/* 見出しと検索の間隔 */
#dp-image-menu .narrator__title{ margin-bottom: 16px !important; }

/* 検索エリア（PC横並び / SP縦積み） */
#dp-image-menu .telop__search{
  display: flex !important; gap: 8px !important; align-items: center !important;
  justify-content: space-between !important; flex-wrap: wrap !important;
  margin-bottom: 10px !important;
}
#dp-image-menu .telop__search--left{
  display: flex !important; gap: 8px !important; flex-wrap: wrap !important;
}
#dp-image-menu .telop__search--right{
  display: flex !important; align-items: center !important; gap: 6px !important;
}

/* 入力UIの高さと角丸（Planと統一感） */
#dp-image-menu input[type="text"],
#dp-image-menu select{
  height: 36px !important; border: 1px solid #d8d8d8 !important;
  border-radius: 8px !important; padding: 0 10px !important; background:#fff !important;
}
#dp-image-menu .telop__search--one-button,
#dp-image-menu .telop__search--button-search{
  height: 36px !important; width: 36px !important; border: 0 !important; background: #fff !important;
  border: 1px solid #d8d8d8 !important; border-radius: 8px !important; display: inline-flex !important;
  align-items: center !important; justify-content: center !important; cursor: pointer !important;
}

/* ====== リスト本体：グリッド化 ====== */
#dp-image-menu .image__list{ /* 親divは幅固定を解除 */
  float: none !important; width: auto !important; clear: both !important;
}
#dp-image-menu .image__list--image{ /* ul をグリッドに */
  list-style: none !important; margin: 12px 0 0 !important; padding: 0 !important;
  display: grid !important; grid-template-columns: repeat(5, minmax(0,1fr)) !important;
  gap: 16px !important;
}

/* li 各カード */
#dp-image-menu .image__item{ margin: 0 !important; }

/* a に付いている Bootstrap の .btn を中和してカード化 */
#dp-image-menu .image__item--content{
  display: block !important; background: #fff !important; border: 1px solid #e5e5e5 !important;
  border-radius: 2px !important; padding: 0 !important; text-decoration: none !important;
  color: #222 !important; box-shadow: none !important;
}
#dp-image-menu .image__item--content:hover{
  box-shadow: 0 2px 10px rgba(0,0,0,.07) !important;
}

/* 画像 */
#dp-image-menu .image__item--cont-img{
  width: 100% !important; overflow: hidden !important; background:#fff !important;
}
#dp-image-menu .image__item--cont-img img{
  display: block !important; width: 100% !important; height: auto !important;
}

/* タイトル（カード下部） */
#dp-image-menu .image__item--text{
  margin: 0 !important; padding: 8px 10px !important; text-align: center !important;
  font-size: 1.3rem !important; line-height: 1.4 !important; color:#222 !important;
  display: -webkit-box !important; -webkit-line-clamp: 2 !important; -webkit-box-orient: vertical !important;
  overflow: hidden !important; min-height: 3.2em !important; /* 2行ぶんの高さ確保 */
}

/* ページング */
#dp-image-menu .paging{ margin-top: 20px !important; }

/* ====== レスポンシブ ====== */
@media (max-width: 1280px){
  #dp-image-menu .image__list--image{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
}
@media (max-width: 1024px){
  #dp-image-menu .image__list--image{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width: 768px){
  #dp-image-menu .image__list--image{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
/* スマホは左右に20px余白・UIを縦積み */
@media (max-width: 640px){
  #dp-image-menu{ padding-left: 20px !important; padding-right: 20px !important; }
  #dp-image-menu .telop__search{ flex-direction: column !important; align-items: stretch !important; }
  #dp-image-menu .telop__search--right{ align-self: flex-end !important; }
  #dp-image-menu .image__item--text{ font-size: 1.2rem !important; padding: 6px 8px !important; }
}

/* ====== ツール別にサムネ枠の高さを固定 ====== */
/* LP / Site：縦長想定（32rem） */
#dp-image-menu .image__item--content[data-tool="lp"]   .image__item--cont-img,
#dp-image-menu .image__item--content[data-tool="site"] .image__item--cont-img{
  max-height: 32rem !important;
  overflow: hidden !important;
}

/* Banner：やや低め（19rem） */
#dp-image-menu .image__item--content[data-tool="banner"] .image__item--cont-img{
  max-height: 19rem !important;
  overflow: hidden !important;
}

/* Movie：16:9の枠を確保（高さをCSSで作る） */
#dp-image-menu .image__item--content[data-tool="movie"] .image__item--cont-img{
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
}

/* 画像は枠いっぱいに広げて中央トリミング */
#dp-image-menu .image__item--content .image__item--cont-img img{
  width: 100% !important;
  height: 100% !important;           /* ← これで object-fit が効く */
  object-fit: cover !important;      /* 枠を満たしつつ中央でカット */
  display: block !important;
}

/* SPは少し低めにして見やすく */
@media (max-width: 640px){
  #dp-image-menu .image__item--content[data-tool="lp"]   .image__item--cont-img,
  #dp-image-menu .image__item--content[data-tool="site"] .image__item--cont-img{
    max-height: 24rem !important;
  }
  #dp-image-menu .image__item--content[data-tool="banner"] .image__item--cont-img{
    max-height: 14rem !important;
  }
}

/* ====== 動画モーダル：16:9で安定表示 ====== */
#dp-image-menu .modal-dialog-video{
  max-width: 960px !important;
  width: calc(100% - 40px) !important;
  margin: 30px auto !important;
}
#dp-image-menu .modal-dialog-video .modal-content{
  padding: 0 !important;
  border: 0 !important;
  background: #000 !important;
  aspect-ratio: 16 / 9 !important;   /* 親に高さを作る */
}
#dp-image-menu .modal-dialog-video iframe{
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* ===== [A] 検索バーを1行に固定・表示件数を右端に ===== */
#dp-image-menu .telop__search{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap: nowrap !important;   /* ← 折り返さない */
  margin-bottom:14px !important;
}
#dp-image-menu .telop__search--left{
  display:flex !important;
  gap:8px !important;
  flex:1 1 auto !important;       /* ← 右側(表示件数)のために縮む余地を作る */
  min-width:0 !important;
}
#dp-image-menu .telop__search--right{
  margin-left:auto !important;    /* ← 常に右端へ */
  white-space:nowrap !important;
  display:flex !important; align-items:center !important; gap:6px !important;
}
/* スマホは縦積み */
@media (max-width: 980px){
  #dp-image-menu .telop__search{ flex-wrap: wrap !important; }
  #dp-image-menu .telop__search--right{ margin-left:0 !important; }
}

/* ===== [B] カード幅を自動タイル化（横幅が狭い問題の解消） ===== */
#dp-image-menu .image__list--image{
  display:grid !important;
  gap:18px !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
}

/* ===== [C] サムネの高さを “種類” ごとに統一（崩れ防止） ===== */
#dp-image-menu .image__item--cont-img{
  width:100% !important;
  overflow:hidden !important;
  background:#fff !important;
  /* 既存の高さ指定があれば上書きされます */
}
#dp-image-menu a[data-tool="lp"]   .image__item--cont-img,
#dp-image-menu a[data-tool="site"] .image__item--cont-img{ aspect-ratio: 3 / 4 !important; }
#dp-image-menu a[data-tool="banner"] .image__item--cont-img{ aspect-ratio: 5 / 3 !important; }
#dp-image-menu a[data-tool="movie"]  .image__item--cont-img{ aspect-ratio: 16 / 9 !important; }
#dp-image-menu .image__item--cont-img img{
  width:100% !important; height:100% !important; object-fit:cover !important; display:block !important;
}

/* タイトル */
#dp-image-menu .image__item--text{
  margin:0 !important; padding:8px 10px !important; text-align:center !important;
  font-size:1.3rem !important; line-height:1.4 !important;
  display:-webkit-box !important; -webkit-line-clamp:2 !important; -webkit-box-orient:vertical !important; overflow:hidden !important;
  min-height:3.2em !important;
}

#myModal2 .modal-dialog {
  max-width: 960px !important;
  width: calc(100% - 40px) !important;
  margin: 5% auto !important;   /* 中央寄せ */
}
#myModal2 .modal-content {
  background:#000 !important;
  border:0 !important;
  box-shadow:0 8px 30px rgba(0,0,0,.4) !important;
}
#myModal2 .modal-content img,
#myModal2 .modal-content iframe {
  width:100% !important;
  height:auto !important;
  display:block !important;
}

/* スマホは左右20px余白 */
@media (max-width:640px){
  #dp-image-menu{ padding:0 20px !important; }
}

/* ===== modal を画面中央に（BS3/BS4両対応） ===== */
/* モーダルを表示時だけ中央寄せ（BS3= .in / BS4+ = .show） */
#myModal2.modal.in,
#myModal2.modal.show{
  display: flex !important;
  align-items: center !important;
}

#myModal2 .modal-dialog{ margin:0 auto !important; max-width:1000px !important; width:min(1000px,96vw) !important; }
#myModal2 .modal-content{ background:#000 !important; border:0 !important; max-height:90vh !important; overflow:auto !important; }
#myModal2 .modal-content img{ width:100% !important; height:auto !important; display:block !important; }
#myModal2 .dp-video{ position:relative !important; width:100% !important; aspect-ratio:16/9 !important; }
#myModal2 .dp-video iframe{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; border:0 !important; }

/* ===== SP: 検索UIを2段にして表示件数を必ず見せる ===== */
@media (max-width: 640px){

  /* 親を block に戻して折り返しを確実化（flex の競合を避ける） */
  #dp-image-menu .telop__search{
    display: block !important;
    width: 100% !important;
  }

  /* 左右のブロックを 100% 幅の“行”にする。既存 float/position を無効化 */
  #dp-image-menu .telop__search--left,
  #dp-image-menu .telop__search--right{
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* 表示件数の行は右寄せで1行表示 */
  #dp-image-menu .telop__search--right{
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: -120px !important;
  }

  /* セレクトがはみ出さない保険 */
  #dp-image-menu .telop__search--right-select{
    min-width: 92px !important;
    height: 36px !important;
  }
}

/* ===== Image / PC：検索行を 1 行に固定して横幅調整 ===== */
@media (min-width: 1024px){

  /* 行全体：折り返し禁止・左右20px間隔 */
  #dp-image-menu .telop__search{
    display:flex !important;
    align-items:center !important;
    flex-wrap: nowrap !important;       /* ← 2段化の原因を封じる */
    column-gap:20px !important;         /* 左(検索群)と右(表示件数)の間を20px */
  }

  /* 左のまとまり：可変で広がる。中の要素が縮められるように min-width:0 */
  #dp-image-menu .telop__search--left{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    flex:1 1 auto !important;
    min-width:0 !important;             /* ← 子要素のはみ出し防止 */
  }

  /* 検索テキスト（虫眼鏡+入力） */
  #dp-image-menu .telop__search-one{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    flex:1 1 32% !important;            /* 目安：行の約3割を目標 */
    min-width:240px !important;
    min-inline-size:0 !important;
  }
  #dp-image-menu .telop__search--one-select{
    flex:1 1 auto !important;
    width:100% !important;
    min-width:0 !important;
  }
  #dp-image-menu .telop__search--one-button,
  #dp-image-menu .telop__search--button-search{
    flex:0 0 36px !important;           /* アイコンボタンは一定幅で固定 */
  }

  /* Tool（中）…やや固定寄り、縮小可 */
  #dp-image-menu select.telop__search-two{
    flex:0 1 200px !important;          /* 基本200px、狭い時は縮む */
    min-width:160px !important;
  }

  /* Target（右）…可変で広げる */
  #dp-image-menu select.telop__search-three{
    flex:1 1 28% !important;            /* 目安：行の約3割を目標 */
    min-width:200px !important;
    min-inline-size:0 !important;
  }

  /* 右の「表示件数」は内容ぶんだけ。折返し防止 */
  #dp-image-menu .telop__search--right{
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }
}

/* サムネを比率ボックス化して常に幅ぴったり */
#dp-image-menu .image__item--cont-img{
  width:100% !important;
  aspect-ratio: 4 / 3;      /* 任意。縦長が多ければ 3/4 に */
  overflow:hidden !important;
  background:#fff;
}
#dp-image-menu .image__item--cont-img img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit: cover !important;  /* 画像が小さくても余白を作らない */
  max-width:none !important;
}

/* 旧マークアップ */
body.role-nonhigh.slug-image .image_list .image_item{
  width: 300px !important;       /* お好みで 280～320px */
  float: none !important;
  margin: 0 16px 16px 0 !important;
}
/* 新マークアップ（将来切り替わっても同じ幅に） */
body.role-nonhigh.slug-image #dp-image-menu .image__item{
  width: 300px !important;
  float: none !important;
  margin: 0 16px 16px 0 !important;
}

/* スマホは2列の自動幅でOK（カードは100%幅） */
@media (max-width: 768px){
  body.role-nonhigh.slug-image .image_list .image_item,
  body.role-nonhigh.slug-image #dp-image-menu .image__item{
    width: 100% !important;
    margin-right: 0 !important;
  }
}

/* SP：カード内のサムネを全面フィット（左右の空白を解消） */
@media (max-width: 640px){
  #dp-image-menu .image__item--cont-img{
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;   /* 既存の見た目に近い比率。必要なら 3/2 などに */
    overflow: hidden !important;
  }
  #dp-image-menu .image__item--cont-img img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;     /* 余白なしでフィット（上下は少しトリミング） */
  }
}

#videoModal .modal-dialog {
  max-width: 90vw;
  margin: auto;
  display: flex;
  align-items: center;
  min-height: 100vh;
}
#videoModal .modal-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
#videoModal .modal-body {
  padding: 0 !important;
  text-align: center;
}
#imageModal .modal-dialog-video{
  max-width:960px;
  width:calc(100% - 40px);
  margin:30px auto;
}
#imageModal .modal-content{
  padding:0; border:0; background:#000;
  aspect-ratio:16/9;
}
#imageModal iframe{
  width:100%; height:100%; display:block;
}
/* ====== 動画モーダルを16:9で表示 ====== */
#imageModal .modal-dialog-video {
  max-width: 960px;
  width: calc(100% - 40px);
  margin: 30px auto;
}
#imageModal .modal-content {
  padding: 0;
  border: 0;
  background: #000;
  aspect-ratio: 16 / 9;   /* ←動画用の高さ固定 */
}
#imageModal iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* ① 検索バーを1行に＆サイズUP */
#dp-image-menu .telop__search{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
}
#dp-image-menu .telop__search--left{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex:1 1 auto !important;
  min-width:0 !important;
}
#dp-image-menu .telop__search--left input[type="text"]{
  flex:1 1 auto !important;
  min-width:0 !important;
  height:36px !important;
  font-size:1.6rem !important;
  padding:6px 10px !important;
  border-radius:8px !important; /* 角丸 */
}
#dp-image-menu .telop__search--left button{
  height:36px !important;
  padding:0 10px !important;
}
#dp-image-menu .telop__search--right{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex:0 0 auto !important;
  white-space:nowrap !important;
}
#dp-image-menu .telop__search--right-title{ margin:0 !important; font-size:1.6rem !important; }
#dp-image-menu .telop__search--right-select{ height:36px !important; font-size:1.6rem !important; border-radius:8px !important; }

/* ❸ 検索バーとリストの間隔を20px */
#dp-image-menu .telop__search{ margin-bottom:20px !important; }

/* ❹ スマホ調整 */
@media (max-width: 640px){
  #dp-image-menu{ font-size:12px !important; }
  #dp-image-menu .telop__search--right-title,
  #dp-image-menu .telop__search--left input[type="text"],
  #dp-image-menu .telop__search--right-select{ font-size:12px !important; }
  #dp-image-menu .telop__search--left button{ height:32px !important; }
}

.telop__archive .container .modal .modal-dialog-video .modal-content{
  height: auto;