@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.7
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
#main{
    animation: fadeIn 1s ease-out 0s 1 normal;
}
#appeal {
    animation: fadeIn 1s ease-out 0s 1 normal;
}
@keyframes fadeIn {
    from {transform: translateY(10%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}
#header-container {
    animation: Down 1s ease-out 0s 1 normal;
}
#appeal {
    animation: Down 1s ease-out 0s 1 normal;
}
@keyframes Down {
    from {transform: translateY(-10%); opacity: 0;}
    100% {transform: translateY(0%); opacity: 1;}
}

.home.page .entry-title,
.home.page .sns-share,
.home.page .date-tags,
.home.page .author-info{
  display: none;
}

.page .entry-title,
.single .entry-title {
	text-align: center;
}

.content {
	margin-top: 0;
}

.logo-text {
	padding: 20px 0 0;
}

.main {
	padding: 0 29px 20px;
}
	
.btn {
    overflow: hidden;
}
.btn img {
    transition: all .6s ease-out 0.1s;
}
.btn img:hover {
    transform: scale(1.1);
    transition: all .3s ease-out 0.1s;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

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

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

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