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

/************************************
** 子テーマ用のスタイルを書く
************************************/


/************************************
** フロントページのアピールエリア
************************************/

.appeal {
			background-image: url(http://inochi-to-sei.happy2calf.com/wp-content/uploads/2024/11/22349121_m.jpg);	/* スマホ画面での画像 */
			background-attachment: fixed;
			min-height: calc(100vh - 84px); /* スマホ画面での高さ */
			min-width: 100%;
			background-size: cover;
			position: relative;
		}
		@media screen and (min-width: 768px){
			.appeal {
				background-image: url(http://inochi-to-sei.happy2calf.com/wp-content/uploads/2024/11/22349121_m.jpg);	/* パソコン画面での画像 */
				min-height: calc(100vh - 90px);	/* パソコン画面での高さ */
			}
		}
		.appeal::before {
			content: "";
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: rgba(69, 69, 69, .5); /* 画像の明るさ設定 */
		}
		.appeal-in {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}
		.appeal-content {
			background-color: transparent;
			width: 100%;
			padding: 2em 1em;
		}
		.appeal-title {
			color: #FFF; /* タイトルの色 */
			font-size: 2em; /* タイトルのフォントサイズ（スマホ） */
			text-shadow: 0 4px 4px #333; /* タイトルの影 */
		}
		@media screen and (min-width: 768px){
			.appeal-title {
				font-size: 5em; /* タイトルのフォントサイズ（パソコン） */
			}
		}
		.appeal-message p {
			color: #FFF; /* サブタイトルの色 */
			font-size: 1em; /* サブタイトルのフォントサイズ（スマホ） */
			margin-top: 2em; /* タイトルとサブタイトルの行間（不要なら削除） */
		}
		@media screen and (min-width: 768px){
			.appeal-message p {
				font-size: 1.2em; /* サブタイトルのフォントサイズ（パソコン） */
				margin-top: 2em; /* タイトルとサブタイトルの余白（不要なら削除） */
			}
		}
		/* スクロールボタン */
		.appeal-button {
			color: #FFF; /* スクロールボタンの色 */
			background-color: transparent!important;
			margin-top: 5em; /* サブタイトルとボタンの余白（不要なら削除） */
			transition: .5s;
		}
		.appeal-button:hover {
			color: #CBCBCB; /* スクロールボタンの上にカーソルを載せたときの色 */
			transition: .5s;
		}
		.appeal-button:before {
			font-family: "Font Awesome 5 Free";
			content: "\f103"; /* スクロールボタンのマーク */
			display: block;
			animation: updown 1s infinite alternate ease-in-out;
		}
		@keyframes updown {
			from {
				transform: translateY(0);
			}
			to {
				transform: translateY(15px);
			}
		}
	


/********************************
 * 固定ページの日時非表示
 * ******************************/
.post-19 .date-tags,
.post-17 .date-tags,
.post-3 .date-tags,
.post-8 .date-tags,
.post-13 .date-tags,
.post-15 .date-tags,
.post-5 .date-tags {
display: none;
}

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

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

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

/************************************/
/* 見出しのデザインリセット */
/************************************/

/*H2 */
.entry-content h2{
border:none;
background:none;
padding: 0;
}

/* H3 */
.entry-content h3{
border:none;
background:none;
padding: 0;
}

/* H4 */
.entry-content h4{
border:none;
background:none;
padding: 0;
}

/************************************/
/* 見出しのデザイン */
/************************************/

h1.entry-title {
   padding: 1rem 0 2rem;
    margin-bottom: 1rem;
    color: #76C8C9;
font-size: 40px;
    text-align: center;
   background-image: repeating-linear-gradient(45deg, #76C8C9 0 2px, transparent 2px 4px);
    background-repeat: no-repeat;
    background-size: 4rem 0.4rem;
    background-position: center bottom;
}


/*H2 */
.entry-content h2 {
	font-weight: bold;
	text-align: center;
	color: #BC6090;
	border: 3px solid #BC6090;
	position: relative;
	font-size: 28px; /* 文字サイズ */
	padding-top:20px; /* 文字と上部の間隔 */
	padding-bottom:20px;/* 文字と下部の間隔 */

}

.entry-content h2::after {
  content: '';
  background-color: #FFEBF6;
 width: calc(100% + 3px);
  height: calc(100% + 3px);
  position: absolute;
  top: -7px;
  left: 4px;
  z-index: -1;
}



/*h3*/
.entry-content h3 {
    position: relative;
    padding: 0.8rem 0;
    margin-bottom: 0.2rem;
    color: #BC6090;
    background: linear-gradient(90deg, #FFEBF6 0%, #FFFFE0 100%);
    background-repeat: no-repeat;
    background-size: 100% 10px;
    background-position: bottom;
    font-weight: bold;
    font-size: 26px;
}



/**********************************************
** 固定ページの新着記事一覧(new_list)を
** 3カラム表示にする
**********************************************/
.new-entry-cards.fp-new-entry-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
}

.fp-new-entry-cards .new-entry-card-link.a-wrap {
    display: inline-block;
    width: 32%;
}


/********************************
 * Youtubeちゅうおうあわせ
******************************/

.video-container {
margin: 0px auto;
}