/* ==========================================================================
   entry-content.css
   WordPressブロックエディタ（the_content()）出力用 共通スタイル
   対象ラッパー: .c-entry-content
   ※ お知らせ詳細・技術コラム詳細・FAQ詳細など、複数ページで共有
   ========================================================================== */


/* ==========================================================================
   WRAPPER
   ========================================================================== */

.c-entry-content {
  line-height: 1.8;
  color: var(--color-text);
  font-size: var(--fs-sm);
}


/* ==========================================================================
   PARAGRAPH
   ========================================================================== */

.c-entry-content p {
  line-height: 1.9;
  margin-bottom: 1.6em;
}

.c-entry-content p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   HEADINGS
   ========================================================================== */

/* H2 – 左ボーダー＋背景帯 */
.c-entry-content h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: 1.4;
  margin-top: 3em;
  margin-bottom: 1em;
  padding: 0.7em 1em 0.7em 1.1em;
  border-left: 4px solid var(--color-darkblue);
  background-color: var(--color-bg-light);
  border-bottom: 1px solid var(--color-border);
}

.c-entry-content h2:first-child {
  margin-top: 0;
}

/* H3 – 左ボーダーのみ（ライン） */
.c-entry-content h3 {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: 1.4;
  margin-top: 2.4em;
  margin-bottom: 0.8em;
}

/* H4 – シンプルなテキスト見出し（下線） */
.c-entry-content h4 {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  line-height: 1.5;
  margin-top: 2em;
  margin-bottom: 0.6em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--color-border);
}


/* ==========================================================================
   IMAGES
   ========================================================================== */

.c-entry-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto 1.6em;
  border-radius: var(--radius-sm);
}

.c-entry-content figure {
  margin: 0 0 2em;
}

.c-entry-content figcaption {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 0.5em;
}


/* ==========================================================================
   YOUTUBE / IFRAME
   ========================================================================== */

.c-entry-content iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  border: none;
  display: block;
  margin-bottom: 1.6em;
  border-radius: var(--radius-sm);
}

/* iframeをラップする場合 */
.c-entry-content .wp-block-embed,
.c-entry-content .c-embed-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 2em;
}

.c-entry-content .wp-block-embed iframe,
.c-entry-content .c-embed-wrap iframe {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
  border: none;
  border-radius: var(--radius-sm);
}


/* ==========================================================================
   TABLE
   ※ デザイン参考: 比較項目テーブル（円筒研削盤 vs アンギュラ式研削盤）
   ========================================================================== */

.c-entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2em;
  font-size: var(--fs-sm);
  line-height: 1.6;
}

/* th / td 共通 */
.c-entry-content th,
.c-entry-content td {
  border: 1px solid #cccccc;
  padding: 0.75em 1em;
  text-align: left;
  vertical-align: middle;
}

/* thead の th（最上部ヘッダー行） */
.c-entry-content thead th {
  background-color: var(--color-bg-light);
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  text-align: center;
  white-space: nowrap;
}

/* tbody の th（左端の行ラベル） */
.c-entry-content tbody th {
  /*background-color: #f3f4f8;*/
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  white-space: nowrap;
  width: 22%;
}

/* tbody の td（通常セル） */
.c-entry-content tbody td {
  background-color: var(--color-white);
  color: var(--color-text);
}

/* tbody の td:first-child（左端が td の場合のフォールバック） */
.c-entry-content tbody tr td:first-child {
  background-color: #f3f4f8;
  font-weight: var(--fw-bold);
}

/* テーブル横スクロール対応ラッパー（WPが自動生成する場合もある） */
.c-entry-content .wp-block-table,
.c-entry-content .c-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 2em;
}

.c-entry-content .wp-block-table table,
.c-entry-content .c-table-wrap table {
  margin-bottom: 0;
}


/* ==========================================================================
   LISTS
   ========================================================================== */

.c-entry-content ul,
.c-entry-content ol {
  margin-bottom: 1.6em;
  padding-left: 1.8em;
}

.c-entry-content ul {
  list-style: disc;
}

.c-entry-content ol {
  list-style: decimal;
}

.c-entry-content li {
  margin-bottom: 0.4em;
  line-height: 1.7;
}


/* ==========================================================================
   BLOCKQUOTE
   ========================================================================== */

.c-entry-content blockquote {
  margin: 1.5em 0 2em;
  padding: 1em 1.4em;
  border-left: 4px solid var(--color-border);
  background-color: var(--color-bg-light);
  color: var(--color-text-light);
  font-style: italic;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}


/* ==========================================================================
   HORIZONTAL RULE
   ========================================================================== */

.c-entry-content hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2.5em 0;
}


/* ==========================================================================
   RESPONSIVE – 768px
   ========================================================================== */

@media (max-width: 768px) {

  .c-entry-content h2 {
    font-size: var(--fs-lg);
    padding: 0.65em 0.9em 0.65em 0.9em;
    margin-top: 2.5em;
  }

  .c-entry-content h3 {
    font-size: var(--fs-md);
    margin-top: 2em;
  }

  .c-entry-content h4 {
    font-size: var(--fs-sm);
  }

  /* テーブル: スマホで横スクロール */
  .c-entry-content table {
    font-size: var(--fs-xs);
    min-width: 480px;
  }

  .c-entry-content th,
  .c-entry-content td {
    padding: 0.6em 0.75em;
  }

  /* テーブルを包む親要素でスクロール制御 */
  .c-entry-content .c-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 2em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }

  .c-entry-content .c-table-scroll table {
    margin-bottom: 0;
    min-width: 100%;
  }

}