@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){
  /*必要ならばここにコードを書く*/
}
/************************************
** 関連記事の非表示
************************************/
/*202408-thailand　26*/
.categoryid-26 #related-entries {
  display: none;
}
/*脱毛日記　37*/
.categoryid-37 #related-entries {
  display: none;
}
/*関連記事をスクロール表示にするカスタマイズ（縦型カード3列）*/
/*ここから*/
/*関連記事リストの要素*/
.main .rect-vartical-card-3 .related-list {
	flex-wrap: nowrap;
	justify-content: unset;
	overflow-x: auto;
	overflow-y: hidden;
}

/*関連記事カードの要素*/
.main .rect-vartical-card-3 .related-entry-card-wrap { 
	position: relative;
	margin: 6px 4px;
	min-width: 28.57%;
	min-width: calc((100% / 3.5) - 8px);
	overflow: visible;
}

.main .rect-vartical-card-3 .related-entry-card-wrap:last-child::after {
	content: '';
	position: absolute;
	display: block;
	top: 1px;
	left: 100%;
	height: 1px;
	width: 4px;
	background-color: transparent;
}

/*アンダースクロールバーと関連記事カードの間の調整（モバイル時）*/
@media screen and (max-width: 1023px) {
	.main .rect-vartical-card-3 .related-entry-card-wrap {
		margin-bottom: 12px;
	}
}

/*画面サイズがスマートフォンの場合の関連記事カードの幅の再調整*/
@media screen and (max-width: 834px) {
	.main .rect-vartical-card-3 .related-entry-card-wrap {
		min-width: 40%;
		min-width: calc((100% / 2.5) - 8px);
	}
}
/*ここまで*/



/*スクロール表示向きのデザインにする関連記事カードのカスタマイズ（縦型カード3列）*/
/*ここから*/
.main .rect-vartical-card-3 .related-entry-card-wrap {
	border-radius: 2px;
	box-shadow: 0px 0px 2px 0.3px rgba(0, 0, 0, 0.3);
}

.main .rect-vartical-card-3 .related-entry-card-wrap:hover {
	background-color: #fff;
	box-shadow: 0px 0px 4px 0.5px rgba(0, 0, 0, 0.5);
}
/*ここまで*/