/*
  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/12）
   ========================================================= */
@import url("css/_color.css");


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


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

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

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



/**
 * 修正日: 2025/XX/XX
 * 目的: Masonryタイルカードの画像上にタイトルを浮かせる
 */

/* 画像エリアを基準にする */
.entry-card-thumb {
  position: relative !important;
  display: block;
}

/* タイトル全体のコンテナ */
.js-custom-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0; /* 下端に配置 */
  padding: 8px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  z-index: 20; /* カテゴリラベルより手前に */
  pointer-events: none; /* 下のリンクをクリック可能に */
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
}

/* サブタイトル（上段） */
.js-custom-overlay .sub {
  color: #fff;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.8);
  padding: 1px 6px;
  margin-bottom: 3px;
  border-radius: 2px;
  line-height: 1.2;
}

/* メインタイトル（下段） */
.js-custom-overlay .main {
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  background: rgba(0, 0, 0, 0.8);
  padding: 3px 8px;
  width: 70%;
  text-align: center;
  line-height: 1.3;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  border-radius: 2px;
}

/* 既存タイトルの非表示（まだ設定していない場合） */
.entry-card-content {
  display: none !important;
}

  

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


/* 表（テーブル） */
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){
  /*必要ならばここにコードを書く*/
}