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

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

/* 見出しの装飾リセット */
/* H1 */
.article h1{
	margin-top:50px;
	color:#47b1c2;
}

/* H2 */
.article h2{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
background:none;
color:#47b1c2;
}
.article H2:before{
	content:"";
	height:80px;
	width:80px;
	background-color:#ffeb9b;
	position: absolute;
	margin-left:-20px;
	margin-top:-1em;
	border-radius:100px;
	z-index:-1;
}

/* H3 */

.article h3{
border-top:none;
border-bottom:none;
border-right:none;
border-left: none;
}

/* H4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}

/* H5 */
.article h5{
border-bottom:none;
padding: 0;
}

/* H6 */
.article h6{
border-bottom:none;
padding: 0;
}

/* 投稿日を非表示 */
.post-135 .date-tags
{
display: none;
}

/*リンクのホバー色*/
a:hover{
color:#7bcedb;
}

/* メイン部分の上の隙間削除	 */
.main{
	padding:0;
}
.content{
	margin-top:0;
}
.article{
	margin-top:-20px;
}

/* 送信ボタン */
input[type=submit] {
	background-color:#47b1c2;
	color:white;
}

/*選ばれる理由のデザイン*/
.reason{
	border-bottom:solid 2px #ffeb9b;
	border-right:solid 1px #ffeb9b;
	border-radius:10px;
	padding:20px;
}

/* スライドイン */
.slide-in{
	opacity:0;
	animation: slideIn 1.5s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay:0.5s;
}
 
@keyframes slideIn {
  0% {
    transform: translateX(-180px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
  }
  40%,100% {
    opacity: 1;
  }
}

/* フェードイン */
.fade-in{
	animation: fadeIn 3s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/* 跳ねる */
.jamp {
	animation: blinking 3s ease-in-out infinite alternate;
}

@keyframes blinking {
	0% {
		transform: translateY(0);
	}
	10% {
		transform: translateY(10px);
	}
	20% {
		transform: translateY(0);
	}
	30% {
		transform: translateY(10px);
	}
	40% {
		transform: translateY(0);
	}
	100% {
		transform: translateX(0);
	}
}
	

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

	/*サービス欄×３デザイン*/
	.service{
		padding:20px;
		border-right:1px solid gray;
	}
	.service:last-child{
		border-right:none;
	}
	.service-title{
		height:2em;
	}
	.service-text{
		height:2em;
	}
	
	/*スマホのみ*/
	.smp-only{
		display:none;
	}
}

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

		/*サービス欄×３デザイン*/
	.service{
		padding:20px;
		border-bottom:1px solid gray;
	}
	.service:last-child{
		border-bottom:none;
	}
	
	
	/*PCのみ*/
	.pc-only{
		display:none;
	}
}