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

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

.page .date-tags {display: none;}
.page h1 {display: none;}


.page-id-678 h2 {color: #6B6258;}

.logo-image span, .logo-image a{padding: 0;}
.logo-image{padding: 0; }
.top-learning{
	gap: 5%;
    padding: 0 60px;
}

.article h2{background-color:#f9f3f0 ;}
.sidebar h3{background-color:#f9f3f0 ;}

/*-イベントカード関連CSS-------------------------------------------------------------------------*/
.event-card{
	display:flex;
	gap:18px;
	align-items:center;
	padding:14px 16px;
	border:1px solid #c6c0b8;
	border-radius:4px;
	background:#fff;
	text-decoration:none;
	color:#333;
	box-shadow:0 1px 0 rgba(0,0,0,.05);
	max-width: 90%;
	margin:0 auto 15px;
}

.event-card:hover{
	box-shadow:0 6px 18px rgba(0,0,0,.08);
	transform:translateY(-1px);
	transition:.18s ease;
}

/* 左：日付 */
.event-date{
  width:92px;
  flex:0 0 92px;
  text-align:center;
  border-right:1px solid #c6c0b8;
  padding-right:14px;
}

.event-day{
  font-weight:700;
  font-size:20px;
  line-height:1.1;
  letter-spacing:.5px;
}

.event-week{
  margin-top:2px;
  font-size:13px;
  color:#5a5148; /* 例：みちが使ってる茶寄りグレー */
  font-weight:600;
}

.event-time{
  margin-top:8px;
  font-size:12px;
  color:#555;
}

/* 中央：本文 */
.event-body{
  flex:1;
  min-width:0; /* 省略表示のため */
}

.event-card .event-title{
	margin: 0;
	padding: 10px 16px;
	font-size: 20px;
	font-weight: 600;
	line-height: 1.4;
	color: #5A5148;
	letter-spacing: 0.05em;
	background: #fff;
	display: block;
}

/* タイトル下の本文 */
.event-card .event-text{
	margin: 10px 0 0;
	font-size: 14px;     /* ←ここで調整 */
	line-height: 1.7;
	color: #555;
}

/* 右：サムネ */
.event-thumb{
  width:160px;
  flex:0 0 160px;
  border-radius:10px;
  overflow:hidden;
  background:#f5f5f5;
}

.event-thumb img{
  display:block;
  width:100%;
  height:90px;
  object-fit:cover;
}

/* スマホ表示 */
@media (max-width:640px){
	
	.event-card{
		flex-wrap: wrap;
		padding: 14px;
		gap: 12px;
	}
	
	.event-date{
		width: 72px;
		flex: 0 0 72px;
		padding-right: 10px;
		border-right: 1px solid #e6e0d8;
	}
	
  .event-day{ font-size: 18px; }
  .event-week{ font-size: 12px; }
  .event-time{ font-size: 12px; }

  /* 本文 */
	.event-body{
		min-width: 0;
		width: calc(100% - 72px);
	}

  /* タイトル（p） */
	.event-title{
		font-size: 24px;
		line-height: 1.4;
		padding: 10px 12px;
		white-space: normal;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

  /* 詳細テキスト */
	.event-text{
		margin-top: 10px;
		font-size: 14px;
		line-height: 1.75;
		color: #555;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

  /* サムネは下に */
	.event-thumb{
		width: 100%;
		flex: 0 0 100%;
		margin-top: 6px;
		border-radius: 12px;
		overflow: hidden;
	}
	
	.event-thumb img{
		width: 100%;
		height: 140px;
		object-fit: cover;
	}
}

/*--------------------------------------------------------------------------------------------------------*/


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

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

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