@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

/*
 * Article Design System v1 / Phase 1
 * Canonical CSS managed in Git.
 * Spec: docs/design/article-design-system.md
 * Deploy target: WordPress cocoon-child-master/style.css
 */

/* ==========================================================
   H2 / H3 — visual hierarchy
   ========================================================== */

.article .entry-content h2 {
  background: transparent;
  border-left: 5px solid #19448e;
  border-bottom: 2px solid #ddd;
  border-radius: 0;
  padding: 14px 24px 12px;
  margin: 64px -29px 16px;
  font-size: 26px;
}

.article .entry-content h3 {
  background: transparent;
  border: none;
  border-bottom: 2px solid #eee;
  padding: 6px 0;
  margin: 44px 0 12px;
  font-size: 21px;
}

@media screen and (max-width: 834px) {
  .article .entry-content h2 {
    margin: 48px 0 14px;
    padding: 12px 16px 10px;
    font-size: 23px;
  }
  .article .entry-content h3 {
    margin: 40px 0 12px;
    font-size: 20px;
  }
}

@media screen and (max-width: 480px) {
  .article .entry-content h2 {
    font-size: 21px;
  }
  .article .entry-content h3 {
    font-size: 18px;
  }
}

/* ==========================================================
   Comparison Table — first column sticky
   Keeps horizontal scroll, nowrap, and table-layout as-is.
   Column-count agnostic: no nth-child on columns.
   ========================================================== */

.article .entry-content .scrollable-table table tr > :first-child {
  position: sticky;
  left: 0;
  z-index: 1;
}

/* Opaque backgrounds on the sticky column only, matching the
   existing thead / zebra-stripe colors so the rest of the table
   keeps its current look. */
.article .entry-content .scrollable-table table thead tr > :first-child {
  background-color: #eee;
}

.article .entry-content .scrollable-table table tbody tr:nth-of-type(2n+1) > :first-child {
  background-color: #fafbfc;
}

.article .entry-content .scrollable-table table tbody tr:nth-of-type(2n) > :first-child {
  background-color: #ffffff;
}

/* Visible boundary between the fixed column and the scrolling area. */
.article .entry-content .scrollable-table table tr > :first-child::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1px;
  bottom: 0;
  width: 1px;
  background-color: #ccc;
}

/* ==========================================================
   Comparison Table — typography
   16px: one step below body text (18px), matches the size
   Cocoon already uses at <=480px, so it does not read as
   unusually small at any breakpoint.
   ========================================================== */

.article .entry-content .scrollable-table table {
  font-size: 16px;
  line-height: 1.6;
}

.article .entry-content .scrollable-table table th,
.article .entry-content .scrollable-table table td {
  padding: 0.6em 0.8em;
}