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

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

/* フッター背景の効果 */
.footer-container {
	background: linear-gradient(to right, #890900, #3f0200) !important;
	background-size: 200% 200%;
	animation: gradient 5s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* ヘッダ画像のリサイズ */
.header-container {
	max-width: 1200px;
	margin: 0 auto;
}

.header-in {
	justify-content: flex-end;
	flex-direction: unset;
	width: 100%;
}

.logo-header {
	margin-right: 3em;
}

/* タイトルのフォント */
.header-container .site-name-text {
	font-family: "IM Fell Great Primer SC", serif !important;
	font-size: 64px;
	font-weight: bolder;
	animation: glow 5s ease-in-out infinite alternate;
	margin-left: 0.2em;
	margin-right: 0.2em;
	-webkit-text-stroke: 0.5px #460400;
}

@keyframes glow {
	from {
		text-shadow: 0 0 5px #890900, 0 0 10px #890900, 0 0 15px #890900;
	}
	to {
		text-shadow: 0 0 10px #3f0200, 0 0 15px #3f0200, 0 0 20px #3f0200;
	}
}

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.header-container .site-name-text {
		font-size: 48px !important;
		-webkit-text-stroke: 0.25px #460400;
	}

	.header-in {
		justify-content: center;
	}
	
	.logo-header {
		margin-right: 0em;
		margin-bottom: -5em;
		align-self: flex-end;
	}
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.header-container .site-name-text {
		font-size: 36px !important;
		-webkit-text-stroke: 0.1px #460400;
	}
}