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

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


/*目次の文字・背景色・枠線を変更*/
.toc {
	color: #222222;
	font-size: 18px;
	background: #f4f5f7;
	border: 0px solid #000000!important;
}

/*項目の文字色を変更*/
.toc a {
	color: #222222;
}

/* アピールエリアタイトル文字の色とサイズ、影 */
.appeal-title {  font-size:30px;color: #fff;text-shadow: 3px 3px 2px #000000;}
/* アピールエリアメッセージ文字の色とサイズ、影 */
.appeal-message {  font-size:30px;color: #fff;text-shadow: 3px 3px 2px #000000;}

/* ①アピールエリア */
#appeal {
	height: calc(100vw * calc(800 / 1260));
}
/* ②アピールエリアのアニメーション設定 */
.home #appeal {
	animation : appeal-fadein 0.8s ease-in;
}
/* ③アピールエリアのアニメーション詳細 */
@keyframes appeal-fadein{
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/*コンテンツエリア*/
.appeal-content {
	background-color:initial; /*デフォルトの背景色無効化*/
}

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

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

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

@media (max-width: 768px)  {
.col-reverse{
flex-direction: column-reverse; 
}
}