@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

.male-style-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px auto;
  font-size: 14px;
  font-family: "Arial", "Helvetica Neue", sans-serif;
  background-color: #ffffff; /* 白背景 */
  color: #333333; /* 濃いグレー文字 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 2px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
}

.male-style-table td {
  padding: 12px 15px;
  border-bottom: 1px solid #eee;
}

.male-style-table td:first-child {
  width: 35%;
  background-color: #f7f7f7; /* 薄いグレーで区切り */
  font-weight: bold;
  color: #333333; /* 落ち着いた濃いグレー */
  text-align: left;
}

.male-style-table a {
  color: #1976d2; /* 少し落ち着いた青 */
  text-decoration: underline;
}

.male-style-table a:hover {
  text-decoration: none;
  color: #0d47a1; /* 濃い青でアクセント */
}


/* 関連記事（single直書き版） */
/* 行内でカードの高さを揃える */
.fd-related-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  align-items:stretch;      /* ← 同一行で高さ揃える */
}

/* カード内を縦フレックス化して、ボタンを最下部へ */
.fd-related-item{
  display:flex;             /* ← 追加 */
  flex-direction:column;    /* ← 追加 */
  flex:1 0 calc(50% - 10px);
  max-width:calc(50% - 10px);
  background:#fff;
  border:1px solid #ccc;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  text-align:center;
  transition:transform .2s ease;
}

/* 作品名：最大2行で省略、見映えを揃える */
.fd-related-worktitle{
  font-size:13px;
  font-weight:700;
  background:#f5f5f5;
  padding:6px 8px;
  border-bottom:1px solid #ddd;
  color:#333;
  line-height:1.4;
  display:-webkit-box;           /* ↓ 2行でトリム */
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  min-height: calc(1.4em * 2 + 12px); /* 2行分 + 上下パディング分で帯高さを安定 */
}

/* サムネ：比率固定で高さを揃える（縦横比はお好みで） */
.fd-related-thumb{
  aspect-ratio: 4 / 3;   /* 例: 3:4。縦長なら 2/3、横長なら 4/3 に調整可 */
  overflow:hidden;
}
.fd-related-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;      /* 余白・歪みを防ぐ */
  display:block;
  border-bottom:1px solid #ccc;
}

/* ボタンを最下部に固定（前要素の高さに影響されない） */
.fd-related-actions{
  margin-top:auto;       /* ← これで下に押し付け */
  padding:0;
}
.fd-related-btn{
  display:block;
  width:100%;
  box-sizing:border-box;
  text-align:center;
  font-size:14px;
  padding:10px 0;
  border:none;
  border-radius:0 0 8px 8px;
  background:#2196f3;
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  transition:background-color .2s ease;
}
.fd-related-btn:hover{ background:#1976d2; }

/* スマホも横2列 */
@media (max-width: 767px){
  .fd-related-item{
    flex:1 0 calc(50% - 10px);
    max-width:calc(50% - 10px);
  }
}