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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.main {
	background-color: transparent;
	animation-name: fadein;
	animation-duration: 1s;
	padding: 0px;
}
@keyframes fadein {
	from {
		opacity: 0;
		transform: translateY(30px);
	}
	to {
		opacity: 1;
		transform: translateY(0px);
	}
}
.logo {
	animation-name: tpdwn;
	animation-duration: 1s;
}
@keyframes tpdwn {
	from {
		opacity: 0;
		transform: translateY(-30px);
	} to {
		opacity: 1;
		transform: translateY(0px);
	}
}
.navi {
	animation-name: nvdwn;
	animation-duration: 1s;
}
@keyframes nvdwn {
	from {
		opacity: 0;
		transform: translateX(-30px);
	} to {
		opacity: 1;
		transform: translateX(0px);
	}
}

.contentBlock {
	border-radius: 10px;
	background-color: #FFFFFF;
	padding: 0px;
	box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, .2);
}
.article h2 {
	border-radius: 10px 10px 0px 0px;
	padding: 15px;
}
.LinkArea a img:hover {
 opacity: 0.6;
 transition: all 0.8s ease;
}
.LinkArea a img {
 opacity: 1;
 transition: all 1s ease;
}


h1 {
	background-color: #AAAAAA;
	color: #FFFFFF;
	height: 200px;
	padding: 10px;
	text-shadow: 0 0 5px #000000;
}

.breadcrumb.sbp-footer-before, .breadcrumb.pbp-main-before, .breadcrumb.pbp-footer-before {
	background-color: transparent;
}


@media (max-width: 1030px){
	h1 {
		height: 20vw;
	}
}
@media screen and (min-width: 768px){
	.br-sp {
		display: none;
	}
}
.contentGallery {
	border-radius: 10px;
	background-color: #555555;
	padding: 0px;
	box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, .2);
}
.contentGallery h2 {
	background-color: #555555;
	color: #FFFFFF;
	padding: 6px 10px 0px 10px;
	font-weight: lighter;
	font-size: middle;
}
.label-box-content ,block-box-content{
	border: 3px solid #D4D4D4;
}
#appeal {
	height:30vw;
}
@media (max-width: 1030px){
	#appeal {
		height: 55vw;
	}
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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