/* =========================================
   kk-tablepage.css（整理版）
   - 表（2列）＋セクション
   - 画像と文章を同じ行に並べる（kk-media / kk-split）
   - サイドバー環境でも崩れにくい
========================================= */

.kk-tablepage{
  /* 文字の読みやすさ（必要なら調整） */
  font-size: 16px;
  line-height: 1.85;
}

/* セクション */
.kk-tablepage .kk-section{
  margin: 0 0 1.8em;
}
.kk-tablepage .kk-section__title{
  margin: 1.2em 0 .6em;
  font-size: 1.15em;
  font-weight: 700;
}

/* テーブル（2列） */
.kk-tablepage .kk-table{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 列暴走を防ぐ */
  background: #fff;
}
.kk-tablepage .kk-table th,
.kk-tablepage .kk-table td{
  border: 1px solid #e6e6e6;
  padding: 12px 14px;
  vertical-align: top;
  min-width: 0; /* はみ出し抑止 */
}

/* 左列（ラベル） */
.kk-tablepage .kk-table__label{
  width: 230px;      /* 左列幅（必要なら 240〜280） */
  background: #f7f7f7;
  font-weight: 700;
}

/* 右列（値） */
.kk-tablepage .kk-table__value{
  overflow-wrap: anywhere;
  word-break: break-word;
}
.kk-tablepage .kk-table__value p{ margin: 0 0 .8em; }
.kk-tablepage .kk-table__value ul{ margin: .2em 0 .8em 1.2em; }

/* 画像 共通 */
.kk-tablepage img{
  display: block;
  max-width: 100%;
  height: auto;
}

/* 値セル内：画像＋文章（左が画像、右が文章） */
.kk-tablepage .kk-media{
  display: grid;
  grid-template-columns: minmax(140px, 260px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.kk-tablepage .kk-media--logo{
  grid-template-columns: minmax(100px, 160px) minmax(0, 1fr);
}

/* 値セル内：文章＋画像（左が文章、右が画像） */
.kk-tablepage .kk-split{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 360px);
  gap: 16px;
  align-items: start;
}
/* 「決済の流れ」などスクショ列を少し広く */
.kk-tablepage .kk-split--flow{
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
}

/* 画像に軽い説明（figcaption） */
.kk-tablepage .kk-figure{
  margin: 0 0 16px;
}
.kk-tablepage .kk-figure figcaption{
  margin: 0 0 6px;
  font-size: .92em;
  color: #666;
}

/* レイアウト切り替え（サイドバー環境を想定して早めに縦積み） */
@media (max-width: 1100px){
  .kk-tablepage .kk-media,
  .kk-tablepage .kk-split{
    grid-template-columns: 1fr;
  }
}

/* スマホ：テーブル自体を縦積み（th→tdの順で表示） */
@media (max-width: 768px){
  .kk-tablepage .kk-table,
  .kk-tablepage .kk-table tbody,
  .kk-tablepage .kk-table tr,
  .kk-tablepage .kk-table th,
  .kk-tablepage .kk-table td{
    display: block;
    width: 100%;
  }
  .kk-tablepage .kk-table th{ border-bottom: none; }
  .kk-tablepage .kk-table td{ border-top: none; }
}