@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
*/

/* ========= 作品情報テーブル / 用語テーブル 共通 =========== */
.info-table{
  --info-border: #e5e7eb;
  --info-head-bg: #f8fafc;
  --info-row-alt: #fafdff;
  --info-text: #111827;
  --info-muted: #6b7280;
  --info-accent: #2563eb;

  width: 100%;
  border: 1px solid var(--info-border);
  border-radius: 12px;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  overflow: hidden;            /* 角丸を効かせる */
  box-shadow: 0 1px 2px rgba(17,24,39,.04);
}

.info-table tr + tr th,
.info-table tr + tr td{
  border-top: 1px solid var(--info-border);
}

.info-table th,
.info-table td{
  padding: 12px 16px;
  vertical-align: top;
  line-height: 1.6;
  color: var(--info-text);
}

.info-table th{
  width: 34%;
  background: var(--info-head-bg);
  font-weight: 600;
  text-align: left;
  color: var(--info-text);
  white-space: nowrap;
}

.info-table tr:nth-child(even) td{
  background: var(--info-row-alt);
}

/* リンクの見た目（さりげない下線風） */
.info-table a{
  text-decoration: none;
  border-bottom: 1px solid rgba(37,99,235,.35);
}
.info-table a:hover{
  color: var(--info-accent);
  border-color: var(--info-accent);
}

/* 数値系を右寄せしたい時に使える補助クラス */
.info-table .num{
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 余白を少し詰めたバージョンを使いたい場合：<table class="info-table compact"> */
.info-table.compact th,
.info-table.compact td{
  padding: 8px 12px;
}

/* ---------- モバイル最適化 ---------- */
@media (max-width: 640px){
  .info-table{
    border-radius: 10px;
  }
  .info-table th{
    padding: 10px 14px 4px;
    background: transparent;   /* 見出しの背景色を外す */
    color: var(--info-muted);
    border-top-color: transparent;
  }
  .info-table td{
    padding: 2px 14px 12px;
    background: transparent;   /* 交互色も外す（読みやすさ優先） */
  }
  .info-table tr + tr th,
  .info-table tr + tr td{
    border-top: 1px dashed var(--info-border);
  }
}