/*
  Skin Name: 自作スキン
  Description: スキンテンプレートを基に自作中の実験スキンです。
  Skin URI: https://wp-cocoon.com/
  Author: かずず
  Author URI: https://nelog.jp/
  Screenshot URI: https://im-cocoon.net/wp-content/uploads/skin-template.png
  Version: 1.0.2
  Priority: 9999000000
*/
/*以下にスタイルシートを記入してください*/


/* =========================================================
   今後cssはここで検証後、css-assets内のファイルに移動させます。

     ↓分割したファイルを読み込むためのコード例
     @import url("css-assets/ファイル名");

   ========================================================= */


/* =========================================================
	↓背景設定のCSSを読み込む（2026/02/04）
   ========================================================= */
/* 
@import url("css-assets/_background.css");
 */


/* =========================================================
	↓カルーセルエリアのCSSを読み込む（2026/02/09）

@import url("css-assets/_carousel.css");
   ========================================================= */

/* =========================================================
	↓カルーセルエリア2のCSSを読み込む（2026/02/09）
   ========================================================= */
@import url("css-assets/_carousel2.css");



/* =========================================================
   
   ========================================================= */


/* 表（テーブル） */
table tr:nth-of-type(2n + 1) {/* 縞々背景の解除 */
  background-color: inherit;
}
.wp-block-table thead {/* 横線の太さ */
  border-bottom: 1.5px solid var(--cocoon-middle-thickness-color);/* 元は3 */
}
.wp-block-table tfoot {/* 横線の太さ */
  border-top: 1.5px solid #ccc;/* 元は3 */
}
.scrollable-table th, .scrollable-table.stfc-sticky table:not(.wp-calendar-table) tr > *:first-child {/* 左の列の色 */
  background-color: #f5f6f7;
  color: var(--cocoon-text-color);
}

/* --- 5. アニメーション --- */
@keyframes moveBackground {
	0%,
	100% {
		background-size: 145vh;
		background-position: center 60%;
	}
	20% {
		background-size: 160vh;
		background-position: center 40%;
	}
	50% {
		background-size: 220vh;
		background-position: center 60%;
	}
	80% {
		background-size: 160vh;
		background-position: center 80%;
	}
}



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

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

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