:root{
  --jd-gap: 18px;
  --jd-radius: 12px;
  --jd-badge-bg: #0b357a;
  --jd-badge-color: #fff;

  --jd-overlay: rgba(0,0,0,.55);
  --jd-modal-bg: #bebbcf;
  --jd-modal-z: 2147483647;
  --jd-shadow: 0 10px 40px rgba(0,0,0,.25);
}

.jd{display:block;}
.jd__grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap: var(--jd-gap);
}
.jd--align-left .jd__grid{justify-content:flex-start;}

/* columns alignment */
.jd--cols-1 .jd__grid,
.jd--cols-2 .jd__grid{justify-content:flex-start;}
@media (max-width: 980px){
  .jd__grid{justify-content:flex-start;}
}
.jd-card{
  box-sizing:border-box;
  flex: 0 1 calc((100% - (var(--jd-gap) * (var(--jd-cols,3) - 1))) / var(--jd-cols,3));
  max-width: 380px;
  position:relative;
}
@media (max-width: 980px){
  .jd-card{flex-basis: calc((100% - var(--jd-gap)) / 2);}
}
@media (max-width: 560px){
  .jd-card{flex-basis: 100%; max-width: 520px;}
}

.jd-card__link,
.jd-card__trigger{
  display:block;
  text-decoration:none;
  cursor:pointer;
}
.jd-card__thumb{position:relative; aspect-ratio: var(--jd-thumb-ratio, 4/3); overflow:hidden; background:#e9e9ee;}
.jd-card__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.jd-card__badge{
  position:absolute;
  top:10px; right:10px;
  background: var(--jd-badge-bg);
  color: var(--jd-badge-color);
  padding: .35em .7em;
  font-size: 12px;
  font-weight: 800;
  border-radius: 0;
}
.jd-card__title{
  margin:10px 0 0;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
}

/* modal layer (footer) */
.jd-modals{
  position:relative;
  z-index: var(--jd-modal-z);
  isolation:isolate;
}
.jd-modal__toggle{
  position:fixed;
  left:-9999px;
  width:1px;height:1px;overflow:hidden;
}
.jd-modal{
  position:fixed;
  inset:0;
  z-index: var(--jd-modal-z);
  display:none;
  align-items:center;
  justify-content:center;
  padding: 24px;
}
.jd-modal__toggle:checked + .jd-modal{display:flex;}
.jd-modal__overlay{
  position:absolute;
  inset:0;
  background: rgba(0, 0, 0, .6);/*モーダルバックグラウンド色*/
}
.jd-modal__dialog{
  position:relative;
  width:min(900px, calc(100% - 48px));
  max-height: calc(100vh - 48px);
  overflow:auto;
  background: var(--jd-modal-bg);
  box-shadow: var(--jd-shadow);
  border-radius: var(--jd-radius);
  z-index:1;
}
.jd-modal__close{
  position:sticky;
  top:0;
  float:right;
  margin:0 0 8px 0;
  font-size:1.8rem;
  cursor:pointer;
  user-select:none;
  line-height:1;
  background:rgba(255,255,255,.8);
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
}
.jd-modal__body{
  padding: 0;
  clear:both;
}
.jd-modal__head{
  display:flex;
  gap:12px;
  align-items:baseline;
  justify-content:space-between;
  margin:0 0 14px;
}
.jd-modal__title{
  margin:0;
  font-size:1.25rem;
  font-weight:900;
  padding:0 1em;
}
.jd-modal__badge{
  background: var(--jd-badge-bg);
  color: var(--jd-badge-color);
  padding: .35em .7em;
  font-size: 12px;
  font-weight: 800;
  border-radius: 0;
}

/* slider (CSS radio) */
.jd-slider{
  margin:0 0 14px;
  position:relative;
  padding: 18px 18px 12px;
  background: var(--jd-modal-bg);
  overflow:hidden; /* ←ここでクリップする（track側ではクリップしない） */
}
.jd-slider__radio{position:absolute;left:-9999px;}
.jd-slider__track{
  display:flex;
  width: calc(100% * var(--jd-slide-count, 1));
  --jd-slide-index: 0;
  transform: translateX(calc(-100% / var(--jd-slide-count, 1) * var(--jd-slide-index)));
  transition: transform .35s ease;
  will-change: transform;
}

/* 画像はトリミングしない（実ファイル通り）＋高さを揃える */
.jd-slider__slide{
  flex: 0 0 calc(100% / var(--jd-slide-count, 1));
  overflow: hidden;
/*
  background: #e9e9ee;
*/
  /* 高さ統一：どれか一方で運用 */
  height: 420px;          /* ←固定で揃える（推奨） */
  /* max-height: 420px; */ /* ←レスポンシブ寄りにしたい場合 */
}
@media (max-width: 768px){
  .jd-slider__slide{ height: 260px; }
}

/* contain で全体表示。余白は background で吸収 */
.jd-slider__slide img{
  width: 100%;
  height: 100%;
  object-fit: contain;   /* ★ここがポイント */
  display: block;
}

.jd-slider__nav{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:10px;
}

/* slider arrows (PDF style) */
.jd-slider__arrows .jd-slider__arrow{
  position:absolute;
  top: calc(18px + 50%);
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display:none;
  align-items:center;
  justify-content:center;
  font-size: 34px;
  line-height:1;
  color:#fff;
  cursor:pointer;
  user-select:none;
  background: rgba(0,0,0,.15);
}
.jd-slider__arrows .jd-slider__prev{left: 8px;}
.jd-slider__arrows .jd-slider__next{right: 8px;}
.jd-slider__arrows .jd-slider__arrow:hover{background: rgba(0,0,0,.25);}
.jd-slider__radio:nth-of-type(1):checked ~ .jd-slider__arrows .jd-slider__arrow[data-for="0"],
.jd-slider__radio:nth-of-type(2):checked ~ .jd-slider__arrows .jd-slider__arrow[data-for="1"],
.jd-slider__radio:nth-of-type(3):checked ~ .jd-slider__arrows .jd-slider__arrow[data-for="2"]{
  display:flex;
}
.jd-slider__dot{
  width:8px;height:8px;
  background:#fff;
  border:0;
  border-radius:999px;
  cursor:pointer;
  opacity:1;
}
.jd-slider__radio:nth-of-type(1):checked ~ .jd-slider__track{--jd-slide-index:0;}
.jd-slider__radio:nth-of-type(2):checked ~ .jd-slider__track{--jd-slide-index:1;}
.jd-slider__radio:nth-of-type(3):checked ~ .jd-slider__track{--jd-slide-index:2;}
.jd-slider__radio:nth-of-type(1):checked ~ .jd-slider__nav label:nth-child(1),
.jd-slider__radio:nth-of-type(2):checked ~ .jd-slider__nav label:nth-child(2),
.jd-slider__radio:nth-of-type(3):checked ~ .jd-slider__nav label:nth-child(3){
  background: var(--jd-badge-bg);
  opacity:1;
}

/* meta (PDF style) */
.jd-meta{
  display:flex;
  flex-direction:column;
  gap: 10px; /* separator shows modal bg */
  padding: 0 1em 1em 1em;
}
.jd-meta__row{
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
}
.jd-meta__item{
  display:grid;
  grid-template-columns: 7.2em 1fr;
  gap: 0;
  border-top:1px solid rgba(0,0,0,.12);
}
.jd-meta__item:first-child{border-top:0;}
.jd-meta__label{
  padding: 10px 12px;
  font-weight:800;
  color:#333;
  border-right:1px solid rgba(0,0,0,.12);
  white-space:nowrap;
}
.jd-meta__value{
  padding: 10px 12px;
}