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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.entry-title{
	display:none
}

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

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

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

/* 表の外枠：ここを横スクロールできるようにする */
.scroll-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	width: 100%;
}

/* ========================================================
   1. PC・共通の基本設定（基本は横スクロールのみ）
   ======================================================== */

/* 表の外枠：横スクロールを基本とし、中身に応じて広がります */
.scroll-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	width: 100%;
}

/* スクロールバーのデザイン（常に表示させて気づかせやすくする設定） */
.scroll-table::-webkit-scrollbar {
	height: 8px; /* 横スクロールバーの太さ */
	width: 8px;  /* 縦スクロールバーの太さ */
}
.scroll-table::-webkit-scrollbar-track {
	background: #f1f1f1;
	border-radius: 4px;
}
.scroll-table::-webkit-scrollbar-thumb {
	background: #ccc;
	border-radius: 4px;
}
.scroll-table::-webkit-scrollbar-thumb:hover {
	background: #999;
}

/* 表「layout-table」の構造設定 */
table.layout-table {
	table-layout: auto;        /* スクロールさせるため自動幅に設定 */
	width: auto;               
	min-width: 100%;           /* 表が画面幅より小さい場合は画面幅いっぱいに広げる */
	text-align: center;        /* 各セル内の文字の横位置 */
	border-collapse: separate; /* sticky固定時の枠線バグを防ぐため指定 */
	border-spacing: 0;         /* 枠線が離れないように隙間を0にする */
}

/* 1列目（一番左の列）の幅と背景色 */
table.layout-table tr td:nth-child(1),
table.layout-table tr th:nth-child(1) { 
	min-width: 60px; 
	background: #f4f4f4;       /* 1列目の背景色（薄いグレー） */
}

/* 2列目以降の最小幅設定 */
table.layout-table tr td:nth-child(n+2),
table.layout-table tr th:nth-child(n+2) { 
	min-width: 100px; 
}

/* ★修正：1行目（ヘッダー行）の「各セル」に直接背景色を設定して透過を防止 */
table.layout-table tr:nth-child(1) td,
table.layout-table tr:nth-child(1) th { 
	background: #e8e8e8;       /* 1行目の背景色（少し濃いめのグレー） */
	padding-top: 12px;         /* 1行目のセルの高さを少し追加 */
	padding-bottom: 12px;
}


/* ========================================================
   2. スマホ表示（画面幅767px未満）の設定
   ======================================================== */
@media screen and (max-width: 767px) {
	
	/* 表の外枠：高さを画面の半分に制限して、縦スクロールも許可する */
	.scroll-table {
		overflow-y: auto;          /* 縦スクロールを有効化 */
		max-height: 50vh;          /* スマホ画面の高さの50%に制限 */
	}

	/* 表全体：高さを抑えるために余白と文字サイズをギュッと詰める */
	table.layout-table {
		font-size: 12px;           /* 文字サイズを少し小さく */
		line-height: 1.3;          /* 行間を少し詰める */
	}
	table.layout-table tr td,
	table.layout-table tr th {
		padding-top: 8px !important;    /* 全セルの上下余白をコンパクトに */
		padding-bottom: 8px !important; 
	}

	/* ① 1列目（縦ライン）の固定 ＋ 右側に影 */
	table.layout-table tr td:nth-child(1),
	table.layout-table tr th:nth-child(1) {
		position: -webkit-sticky;
		position: sticky;
		left: 0;
		z-index: 10;
		box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.2); 
	}

	/* ② 1行目（横ライン）の固定 ＋ 下側に影 ＋ 背景色の再保証 */
	table.layout-table tr:nth-child(1) td,
	table.layout-table tr:nth-child(1) th {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		z-index: 20;               /* 1列目より手前に配置 */
		background: #e8e8e8;       /* ★ここでもセル自体に背景色を確実に適用 */
		box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.2); 
	}

	/* ③ 左上のマス（交差点）の固定 ＋ 右下に影 */
	table.layout-table tr:nth-child(1) td:nth-child(1),
	table.layout-table tr:nth-child(1) th:nth-child(1) {
		background: #e8e8e8;       /* 1行目の背景色を維持 */
		left: 0;
		top: 0;
		z-index: 30;               /* 最前面に配置して文字の裏映りを防ぐ */
		box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, 0.2); 
	}
}