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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.header{
	background-position: center !important;
}
.wp-block-search__button{
	background-color:#6CAFD9 !important;
}
[class*=bc-brand-color] .copy-button{
	background-color:#6CAFD9 !important;
}
.site-name-text{
	display:none !important;
}
.cat-link{
	background-color:#6CAFD9 !important;
}
.tag-link{
	color:#6CAFD9 !important;
	border:1px solid #6CAFD9 !important;
}
.logo-image{
	width:100% !important;
	display:flex;
	align-items: center !important;
	justify-content: center !important;
	a{
		display:block !important;
		width:350px !important;
		.site-name-text{
			display:block !important;
			width:100% !important;
			height:auto !important;
		}
	}
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	.header{
		background-position: center !important;
	}
	.logo-image{
		width:100% !important;
		display:flex;
		align-items: center !important;
		justify-content: center !important;
		a{
			display:block !important;
			width:350px !important;
			height:auto !important;
			.site-name-text{
				display:block !important;
				width:100% !important;
				height:auto !important;
			}
		}
	}
}	
/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.header{
		background-position: center !important;
	}
	.logo-image{
		width:100% !important;
		display:flex;
		align-items: center !important;
		justify-content: center !important;
		a{
			display:block !important;
			width: 240px !important;
			.site-name-text{
				display:block !important;
				width:100% !important;
				height:auto !important;
			}
		}
	}
}
	
/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
	.header{
		background-position: center !important;
	}
	.logo-image{
		width:100% !important;
		display:flex;
		align-items: center !important;
		justify-content: center !important;
		a{
			display:block !important;
			width: 210px !important;
			.site-name-text{
				display:block !important;
				width:100% !important;
				height:auto !important;
			}
		}
	}

}