/* この商品を見た人はこんな商品も見ています*/
/* 共通 */
.fdbi-related-block{margin:16px 0}
.fdbi-related-block > h2{font-size:1.05rem;margin:0 0 .6em}
.fdbi-linkcards{width:100%}

/* ============ 横型（既定） ============ */
.fdbi-linkcards.fdbi-layout--hlist{display:flex;flex-direction:column;gap:12px}
.fdbi-linkcards.fdbi-layout--hlist .fdbi-linkcard{
  display:flex;gap:10px;align-items:flex-start;
  background:transparent;  /* テーマ色に馴染ませる */
  color:inherit;
  border-radius:10px;overflow:hidden;
}
.fdbi-linkcards.fdbi-layout--hlist .fdbi-lc-thumb{
  flex:0 0 180px;display:block;aspect-ratio:16/10;
  background:#222;overflow:hidden;position:relative;
}
.fdbi-linkcards.fdbi-layout--hlist .fdbi-lc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.fdbi-linkcards.fdbi-layout--hlist .fdbi-lc-body{flex:1 1 auto;padding:10px}
.fdbi-linkcards.fdbi-layout--hlist .fdbi-lc-title{margin:0 0 .35em;font-weight:700;font-size:1rem}
.fdbi-linkcards.fdbi-layout--hlist .fdbi-lc-excerpt{margin:.2em 0 .6em;font-size:.9rem;opacity:.9}
.fdbi-linkcards.fdbi-layout--hlist .fdbi-lc-meta{display:flex;gap:8px;font-size:.8rem;opacity:.8}
.fdbi-linkcards.fdbi-layout--hlist a{color:inherit;text-decoration:none}

/* ============ カード（grid） ============ */
.fdbi-linkcards.fdbi-layout--grid{display:grid;gap:12px}
.fdbi-linkcards.fdbi-layout--grid.cols-1{grid-template-columns:1fr}
.fdbi-linkcards.fdbi-layout--grid.cols-2{grid-template-columns:repeat(2,1fr)}
.fdbi-linkcards.fdbi-layout--grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:640px){
  .fdbi-linkcards.fdbi-layout--grid.cols-3{grid-template-columns:repeat(2,1fr)}
  .fdbi-linkcards.fdbi-layout--grid.cols-2{grid-template-columns:repeat(2,1fr)}
}

/* カード本体：タイトルを画像の上に重ね、hoverでタイトル非表示 */
.fdbi-linkcards.fdbi-layout--grid .fdbi-linkcard{
  position:relative; display:block; background:#111; color:#fff; border-radius:10px; overflow:hidden;
  box-shadow:0 6px 16px rgba(0,0,0,.15); transition:transform .15s ease, box-shadow .15s ease;
}
.fdbi-linkcards.fdbi-layout--grid .fdbi-linkcard:hover{
  transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.fdbi-linkcards.fdbi-layout--grid .fdbi-lc-thumb{
  display:block; position:relative; aspect-ratio:16/10; background:#222; overflow:hidden;
}
.fdbi-linkcards.fdbi-layout--grid .fdbi-lc-thumb img{
  width:100%; height:100%; object-fit:cover; display:block; position:relative; z-index:0; transform:scale(1.001);
  transition:transform .25s ease;
}
.fdbi-linkcards.fdbi-layout--grid .fdbi-linkcard:hover .fdbi-lc-thumb img{ transform:scale(1.02); }
/* 画像上グラデ（可読性UP） */
.fdbi-linkcards.fdbi-layout--grid .fdbi-lc-thumb::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.70) 100%);
  z-index:1; pointer-events:none;
}
/* タイトルを画像上に重ねる（hoverで透明に） */
.fdbi-linkcards.fdbi-layout--grid .fdbi-lc-body{
  position:absolute; left:10px; right:10px; bottom:10px; padding:0; z-index:2; pointer-events:none;
}
.fdbi-linkcards.fdbi-layout--grid .fdbi-lc-title{
  margin:0; font-size:.95rem; line-height:1.35; font-weight:700; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.7); transition:opacity .2s ease; opacity:1;
}
.fdbi-linkcards.fdbi-layout--grid .fdbi-linkcard:hover .fdbi-lc-title{ opacity:0; }
/* テーマの飾り抑止 */
.fdbi-linkcards.fdbi-layout--grid .fdbi-lc-thumb::after,
.fdbi-linkcards.fdbi-layout--grid .fdbi-lc-thumb a::before{ content:none !important; }

/* リンク色は継承 */
.fdbi-linkcards .fdbi-linkcard a,
.fdbi-linkcards .fdbi-linkcard a:hover,
.fdbi-linkcards .fdbi-linkcard a:focus{ color:inherit; text-decoration:none }

/* ===== モバイル：画像→タイトル→日付(メタ) の縦並びレイアウト ===== */
@media (max-width: 640px){
  /* 1枚のカードを縦積みに */
  .fdbi-linkcards.fdbi-layout--hlist .fdbi-linkcard{
    display: block;               /* ← flexをやめて縦積み */
    background: transparent;
  }

  /* 画像を1行目いっぱいに */
  .fdbi-linkcards.fdbi-layout--hlist .fdbi-lc-thumb{
    width: 100%;
    max-width: 100%;
    aspect-ratio: 16 / 9;
    margin: 0 0 8px;              /* 画像とタイトルの間隔 */
    border-radius: 8px;
    overflow: hidden;
  }
  .fdbi-linkcards.fdbi-layout--hlist .fdbi-lc-thumb img{
    width: 100%; height: 100%; object-fit: cover; display: block;
  }

  /* 本文ブロック（タイトル/抜粋/日付） */
  .fdbi-linkcards.fdbi-layout--hlist .fdbi-lc-body{
    padding: 0;
    min-width: 0;
  }

  /* 2行目：タイトル（2～3行で省略） */
  .fdbi-linkcards.fdbi-layout--hlist .fdbi-lc-title{
    font-size: 1rem;
    line-height: 1.45;
    margin: 0 0 .4em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;        /* 行数は2～3で調整可 */
    overflow: hidden;
    word-break: normal;
    overflow-wrap: anywhere;
  }

  /* 3行目：抜粋があれば2行で省略（不要なら display:none でもOK） */
  .fdbi-linkcards.fdbi-layout--hlist .fdbi-lc-excerpt{
    font-size: .9rem;
    opacity: .9;
    margin: 0 0 .45em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  /* 4行目：日付などメタ情報を独立行に */
  .fdbi-linkcards.fdbi-layout--hlist .fdbi-lc-meta{
    display: block;               /* 1行にまとめて下段へ */
    font-size: .82rem;
    opacity: .75;
    margin-top: .2em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* 超狭幅はそのまま（保険） */
@media (max-width: 420px){
  .fdbi-linkcards.fdbi-layout--hlist .fdbi-lc-thumb{ margin-bottom: 8px; }
}

/* =========================
   この商品を見た人はこんな商品も見ています
   ========================= */
.fdbi-related-block{margin:0 0 var(--fdbi-gap,24px)}
.fdbi-related-block>h2{
  border-left:4px solid var(--fdbi-accent,#0d4de0);
  padding:.2em .6em;margin:0 0 .6em
}

/* linkcards */
.fdbi-linkcards{display:grid;gap:12px}

.fdbi-linkcard{
  display:grid;grid-template-columns:180px 1fr;gap:16px;
  background:#fff;border:1px solid #e5e7eb;border-radius:8px;
  padding:12px;transition:box-shadow .15s ease,transform .15s ease
}
.fdbi-linkcard:hover{box-shadow:0 6px 18px rgba(0,0,0,.06);transform:translateY(-1px)}

.fdbi-lc-thumb{display:block}
.fdbi-lc-thumb img{
  width:100%;height:auto;display:block;border-radius:6px;
  object-fit:cover;aspect-ratio:16/9
}

.fdbi-lc-title{margin:0 0 6px;font-size:1.15rem;line-height:1.35}
.fdbi-lc-title a{text-decoration:none;color:#111}
.fdbi-lc-title a:hover{opacity:.85}

.fdbi-lc-excerpt{
  margin:0 0 10px;color:#374151;line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}

.fdbi-lc-meta{display:flex;justify-content:space-between;align-items:center;color:#64748b;font-size:.95rem}
.fdbi-lc-domain{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:70%}

/* モバイル：画像→タイトル→抜粋→メタの縦並び */
@media (max-width:640px){
  .fdbi-linkcard{grid-template-columns:1fr}
}

/* ダークモード */
@media (prefers-color-scheme: dark){
  .fdbi-linkcard{background:#0b0b0c;border-color:#1f2937}
  .fdbi-lc-title a{color:#f3f4f6}
  .fdbi-lc-excerpt{color:#cbd5e1}
  .fdbi-lc-meta{color:#9ca3af}
}

/* =========================
   作品紹介テーブル
   ========================= */
.spec-table{
  width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;
  background:#fff;border:1px solid #e8ecef;border-radius:10px;overflow:hidden
}
.spec-table th,.spec-table td{
  padding:14px 16px;vertical-align:top;line-height:1.7;
  word-break:normal;overflow-wrap:anywhere
}
.spec-table th{
  background:#f7f9fb;font-weight:700;color:#2b2f36;width:28%
}
.spec-table td{width:72%}
.spec-table tr+tr th,.spec-table tr+tr td{border-top:1px solid #eef1f4}

/* テキストリンクの間隔 */
.spec-table td a{margin-right:.6em}
.spec-table td a:last-child{margin-right:0}

/* タブレット：左右比率を調整 */
@media (max-width:980px){
  .spec-table th{width:35%}
  .spec-table td{width:65%}
}

/* スマホ：項目→内容の縦積み */
@media (max-width:640px){
  .spec-table,.spec-table tbody,.spec-table tr{display:block}
  .spec-table tr{border-top:1px solid #eef1f4}
  .spec-table tr:first-child{border-top:0}
  .spec-table th,.spec-table td{
    display:block;width:auto;border-top:0!important;padding:12px 14px
  }
  .spec-table th{
    background:#f7f9fb;border-bottom:1px dashed #e3e7ec;font-size:.95rem;margin:0
  }
  .spec-table td{background:#fff;margin:0 0 6px}
}