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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* 投稿記事TOP表示 アイキャッチ画像中央寄せ */
.eye-catch-wrap {
    margin: 0 auto;
}
/* 投稿記事本文 中央寄せ 幅縮小 */
.entry-content {
    width: 85%;
    margin: 1em auto 3em;
}

/* マウスエフェクトテスト */
.mouse-ring {
	position: fixed;
	left: 0;
	top: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	pointer-events: none;
	z-index: 9999;

	border: 2px solid rgba(170, 214, 220, 0.55);

	box-shadow:
		0 0 8px rgba(196, 233, 238, 0.3),
		0 0 16px rgba(176, 219, 224, 0.18);

	background: radial-gradient(
		circle,
		rgba(232, 247, 249, 0.2) 0%,
		rgba(193, 229, 233, 0.1) 40%,
		rgba(173, 214, 220, 0) 70%
	);

	transform: translate3d(-50%, -50%, 0) scale(0.2);
	animation: mouse-ring-grow 1s ease-out forwards;

	will-change: transform, opacity;
}

@keyframes mouse-ring-grow {
	0% {
		transform: translate3d(-50%, -50%, 0) scale(0.2);
		opacity: 0.7;
	}

	100% {
		transform: translate3d(-50%, -50%, 0) scale(8);
		opacity: 0;
	}
}

@media screen and (max-width: 820px) {
	.mouse-ring {
		display: none;
	}
}

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

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

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