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

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

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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){
  /*必要ならばここにコードを書く*/
}



body {
  font-size: 17px!important;
  font-family: Hiragino Sans, Arial, sans-serif !important;
  color:#000;
}

/*画像*/
.article img {
	width:100%;
}

/* 目次消去 */
#toc {
  display: none;
}

/*日付が消えなかったので*/
.date-tags {
	display:none;
}

/*記事の画像、特殊なタイプ*/

.article img.insta {
	display:block;
	max-width:450px;
	margin:0 auto;
}

.article img.prof {
	display:block;
	max-width:450px;
	margin:0 auto;
}

.article img.button {
	display:block;
	max-width:450px;
	margin:0 auto;
}

.article .banner-link-wrapper {
	text-align: center;
}

.article .banner-link-wrapper img{
	width:auto;
  max-height: 580px;
}



/* カスタムスタイル */

.article strong.colorMarker {
	background-color: #ffff99;
}

.article strong.coloredMain {
	color:#ff0000;
}

.article strong.middleSize {
	font-size:21px;
}

.article strong.bigSize {
	font-size:26px;
}

.article h2 {
	margin:16px 0;
  background-color: #ddb1b1;
  color:#fff;
  white-space: pre-wrap;
}

.article h3 {
	margin:16px 0;
  border-color: #ddb1b1;
  white-space: pre-wrap;
}

.article h4 {
	border:none!important;
	padding:0!important;
	display:flex;
	align-items:center;
	position:relative;
	margin-left:40px!important;
	line-height:40px!important;
	color:#BF433E;
	font-size:26px;
	margin:16px 0;
  white-space: pre-wrap;
}

.article h4::before{
	content:url(/wp-content/uploads/general/check.svg);
	display:block;
	width:32px;
	height:32px;
	margin-top:4px;
	margin-right:8px;
	position:absolute;
	top:0;
	left:-40px;
}

@media screen and (max-width: 720px){
/* 	sp */
	.article h4 {
		font-size:20px;
	}
}

.article h5 {
	border-bottom: 3px dotted #ddb1b1!important;
	margin:16px 0;
  white-space: pre-wrap;
}

.article p.prDisplay {
	color: #666; 
	text-align:right;
}

.article p.anotation {
	color: #999999; 
	font-size: 11px;
	text-align:right;
}

/* 動くマーカー */
.article span.movingMarker  {
  background-image: -webkit-linear-gradient(left, #ffff99 50%, transparent 50%);
  background-image: linear-gradient(to right, #ffff99 50%, transparent 50%);
  background-position: 100% 0%;
  background-size: 200% auto;
  background-repeat: no-repeat;
  -webkit-transition: background-position .5s ease-out;
  transition: background-position .8s ease-out;
}
.article span.movingMarker.active {
  background-position: 0% 0%;
}
.wp-editor span.movingMarker {
  background-position: 0% 0%;
	text-decoration:underline;
	text-decoration-color:red;
}

.article span.blinking {
  animation: flash .4s linear infinite;
}

@keyframes flash {
  0%,100% {
    opacity: 1;
  }

  70% {
    opacity: 0;
  }
}

.article span.bounding {
  animation: bound .8s ease-in-out infinite;
  display: inline-block;
  transform-origin: bottom center;

}

@keyframes bound {
  0%,100% {
    transform: translateY(-0.8em);
  }

  30% {
    transform: translateY(0px) scaleY(1);
  }
  50% {
    transform: translateY(0px) scaleY(0.8);
  }
  70% {
    transform: translateY(0px) scaleY(1);
  }
}


/* ボタンアニメーション */

.shake.animation {
	animation: shake 1s ease 0s infinite none alternate running;
	width:calc(100% - 32px);
	margin-left:auto;
	margin-right:auto;
}


@keyframes shake {
	
	0% {transform:translatex(16px)}
	100% {transform:translatex(-16px)}
}