@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){
  /*必要ならばここにコードを書く*/
}

/* #####################################################
   4. Table (Common)
##################################################### */

/* -----------------------------------------------------
   4-1. ブロックエディタ：テーブル内文字設定
----------------------------------------------------- */
body .wp-block-table th,
body .wp-block-table td {
  font-size: 14px !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
}

/* -----------------------------------------------------
   4-2. テーブルブロック外枠（スクロール・カード化）
   - 横スクロールのみ許可
   - 縦スクロールは強制的に抑止
----------------------------------------------------- */
.wp-block-table {
  margin: 2rem 0;
  width: 100%;

  /* 横スクロール対応 */
  overflow-x: auto;
  overflow-y: hidden;

  /* タッチ端末での慣性スクロール */
  -webkit-overflow-scrolling: touch;

  /* 見た目 */
  font-size: 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

/* -----------------------------------------------------
   4-3. table 要素本体
   - カード風の基礎
   - min/max 幅で暴走抑止
   - 数字の桁揃え（tabular-nums）
----------------------------------------------------- */
.wp-block-table table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  table-layout: auto !important;

  min-width: 300px;
  max-width: 1200px;

  background: #fff;
  border: 1px solid #dee2e6;

  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------
   4-4. テーブルヘッダー（上部固定）
----------------------------------------------------- */
.wp-block-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;

  background: #2c3e50 !important;
  color: #fff;

  font-weight: 600;
  padding: 16px 8px;
  text-align: center;

  border: 1px solid #485e74;
}

/* -----------------------------------------------------
   4-5. 行ヘッダー（左列固定）
----------------------------------------------------- */
.wp-block-table tbody th {
  position: sticky;
  left: 0;
  z-index: 1;

  background: #f8f9fa !important;
  font-weight: 600;
  padding: 16px 16px;

  border: 1px solid #dee2e6;
}

/* -----------------------------------------------------
   4-6. 通常セル（データ部）
----------------------------------------------------- */
.wp-block-table tbody td {
  padding: 16px 8px;
  border: 1px solid #dee2e6;
}

/* 交互色 */
.wp-block-table tbody tr:nth-child(even) {
  background-color: #f8f9fa;
}

/* -----------------------------------------------------
   4-7. Responsive（768px 以下）
   - 左固定ヘッダーを解除して崩れ防止
----------------------------------------------------- */
@media screen and (max-width: 768px) {
  .wp-block-table {
    margin-left: 2vw;
    margin-right: 2vw;
  }

  .wp-block-table tbody th {
    position: static;
    left: auto;
  }
}

@media screen and (max-width: 768px) {
  /* スクロールさせる箱（figure） */
  .wp-block-table{
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }

/* ★本丸：直下でなくても table を拾う */
  .wp-block-table table{
    width: max-content;
    min-width: 100%;
    max-width: none;
  }
}

/* -----------------------------------------------------
   4-8. Print（印刷用）
   - スクロール解除
   - 色・影を印刷向けに調整
----------------------------------------------------- */
@media print {
  .wp-block-table {
    overflow-x: visible;
    box-shadow: none;
  }

  .wp-block-table table {
    min-width: auto;
  }

  .wp-block-table thead th {
    position: static;
    background: #f8f9fa !important;
    color: #000;
  }

  .wp-block-table tbody th {
    position: static;
    left: auto;
  }

  .wp-block-table tbody tr:nth-child(even) {
    background-color: #f8f9fa !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* -----------------------------------------------------
   4-8 Tables / Mobile core（上書き用）
   - 横スクロールは許容
   - 数値・金額は1行固定
   - 項目列は改行OK
----------------------------------------------------- */

@media screen and (max-width: 768px) {

  /* 横スクロールは禁止しない（安全弁） */
  .wp-block-table {
    overflow-x: auto;
  }

  /* 1列目（項目列）：読ませる */
  .wp-block-table th:first-child,
  .wp-block-table td:first-child {
    white-space: normal;
    min-width: 7.5em; /* 好みで調整（7〜10em） */
  }

  /* 2列目以降：意味を壊さない（通貨・円の前で改行させない） */
  .wp-block-table th:not(:first-child),
  .wp-block-table td:not(:first-child) {
    white-space: nowrap;
  }
}

/* -----------------------------------------------------
   4-9 Common Table / Caption
   - figcaption（Gutenberg テーブルのキャプション）
   - 本文(#333333)より一段薄い色にする
----------------------------------------------------- */

/* キャプションだけ例外でサイズを落とす */
body .wp-block-table figcaption.wp-element-caption,
body .wp-block-table .wp-element-caption {
  font-size: 13px !important;
  color: #666666;
  line-height: 1.4;
  letter-spacing: 0.02em;
}