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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/*---------------------------------------------------------------*/
/* 2023/10/28:アピールエリア start */
/*---------------------------------------------------------------*/
/* アピールテキストの背景の透明化 */
.appeal-content {
    /*
	max-width: 740px;
    */
	/*background-color: transparent;*/
	/*background-color: rgba(0, 0, 0, 0) !important;*//* 背景と透明にする */
	/*background-color: transparent !important;*/
	background-color: rgba(255, 255, 255, 0) !important;/* 何故かこの順序じゃないと透明化できない */
	background-color: rgba(255, 255, 255, 0);
    /*opacity: 0.5;*/
	margin: auto;
    padding: 2em;
    text-align: center;
    border-radius: var(--cocoon-basic-border-radius);
    /*display: block;*/
	color: white;
	/*
	position: absolute;
	bottom: 20%; 
	left:10%;
    */
}

/*---------------------------------------------------------------*/
/* アピールテキストのテキストエフェクト・アニメーション化 */
/* textefect_Pure CSS Text Reveal */
/*---------------------------------------------------------------*/
:root {
	--delay: 0;
	--duration: 800ms;
	--iterations: 1;
}
/* •·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· */
.reveal-text,
.reveal-text::after {
	-webkit-animation-delay: var(--animation-delay, 2s);
	        animation-delay: var(--animation-delay, 2s);
	-webkit-animation-iteration-count: var(--iterations, 1);
	        animation-iteration-count: var(--iterations, 1);
	-webkit-animation-duration: var(--duration, 800ms);
	        animation-duration: var(--duration, 800ms);
	-webkit-animation-fill-mode: both;
	        animation-fill-mode: both;
	-webkit-animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
	        animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

.reveal-text {
	--animation-delay: var(--delay, 0);
	--animation-duration: var(--duration, 800ms);
	--animation-iterations: var(--iterations, 1);
	position: relative;
	font-size: 5vw;
	font-family: "Comic Sans MS";
	-webkit-animation-name: clip-text;
	        animation-name: clip-text;
	color: #FFF;
	white-space: nowrap;
	cursor: default
	
}

.reveal-text::after {
		content: "";
		position: absolute;
		z-index: 999;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #ffd700;/*ゴールド*/ /*#f2f98b;*/
		transform: scaleX(0);
		transform-origin: 0 50%;
		pointer-events: none;
		-webkit-animation-name: text-revealer;
		        animation-name: text-revealer;
	}


@-webkit-keyframes clip-text {
	from {
		-webkit-clip-path: inset(0 100% 0 0);
		        clip-path: inset(0 100% 0 0);
	}
	to {
		-webkit-clip-path: inset(0 0 0 0);
		        clip-path: inset(0 0 0 0);
	}
}


@keyframes clip-text {
	from {
		-webkit-clip-path: inset(0 100% 0 0);
		        clip-path: inset(0 100% 0 0);
	}
	to {
		-webkit-clip-path: inset(0 0 0 0);
		        clip-path: inset(0 0 0 0);
	}
}


@-webkit-keyframes text-revealer {
	
	0%, 50% {
		transform-origin: 0 50%;
	}
	
	60%, 100% {
		transform-origin: 100% 50%;		
	}

	
	60% {
		transform: scaleX(1);
	}
	
	100% {
		transform: scaleX(0);
	}
}


@keyframes text-revealer {
	
	0%, 50% {
		transform-origin: 0 50%;
	}
	
	60%, 100% {
		transform-origin: 100% 50%;		
	}

	
	60% {
		transform: scaleX(1);
	}
	
	100% {
		transform: scaleX(0);
	}
}
/*---------------------------------------------------------------*/
/* 2023/10/28:アピールエリア end */
/*---------------------------------------------------------------*/

/*---------------------------------------------------------------*/
/* 2018/07/06: プロフィールボックスのカスタマイズ start */
/*---------------------------------------------------------------*/
.author-box {
	border: none;
	padding: 0;
}
.author-box .author-widget-name{
	color: #666;
	background-color: #eaedf2;
	display: inline-block;
	margin: 0 auto 3px 1rem;
	padding: .4em;
	border-radius: 4px;
	font-weight: bold;
	position: relative;
	z-index: 2;
	font-size: .9em;
}

.author-box .author-widget-name::before {
	content: '';
	position: absolute;
	left: 20%;
 	bottom: -15px;
 	display: block;
	width: 0;
	height: 0;
	border-right: 15px solid transparent;
	border-top: 15px solid #eaedf2;
	border-left: 15px solid transparent;
	z-index: 1;
}

.author-box figure.author-thumb{
	float: none;
	margin: 0 !important;
	text-align: center;
	width: 100% !important;
	background: url(https://iinjyane.com/wp-content/uploads/2023/10/header-iinjyane-logo-002.png) center no-repeat; /* カバー画像を指定 */
	background-size: cover;
	position: relative;
	height: 0;
	/* フル表示にしたい場合のpadding-topの値： 表示画像の高さ(px) ÷ 表示画像の幅(px) × 100(%) */
	padding-top: 40%;
	z-index: 0;
	border-radius: 8px;
}

.author-box figure.author-thumb img{
	border-radius: 50%;
	border: 3px solid #fff;
  	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
	height: auto;
	width: 30%;
	max-width: 200px;
	position: absolute;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: -1em;  /* -5em -> -1em */
}

.author-box .author-content{
	margin-left: 0 !important;
	margin-top: 5.5em;
}

.author-box .author-content .author-name{
	text-align: center;
	font-size: 1.3rem;
}

.author-box .author-content .author-name a{
	color: #14171a;
	text-decoration: none;
}
.author-box .author-content .author-name a:hover{
	color: #14171a;
	text-decoration: underline;
}

.author-box .author-content .author-description p{
	margin: .5em auto;
	line-height: 1.5 !important;
	max-width: 500px;
}

.author-box .author-content .author-description p a{ text-decoration: none; }
.author-box .author-content .author-description p a:hover{ text-decoration: underline; }
.author-box .author-content .author-follows .sns-buttons{ justify-content: center; }

.author-box .author-content .author-follows .sns-buttons a.follow-button{
	border-radius: 50%;
	border: none;
	width: 40px;
	height: 40px;
	color: #fff;
	margin-bottom: .5em;
	margin-right: .5em;
  	box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
}

.author-box .sns-follow .website-button{ background-color: #6eb6fd !important; }
.author-box .sns-follow .twitter-button{ background-color: #7dcdf7 !important; }
.author-box .sns-follow .facebook-button{ background-color: #7c9dec !important; }
.author-box .sns-follow .hatebu-button{ background-color: #2c6ebd !important; }
.author-box .sns-follow .google-plus-button{ background-color: #dd4b39 !important; }
.author-box .sns-follow .instagram-button{ position: relative; background: linear-gradient(135deg, #427eff 0%, #f13f79 80%) no-repeat !important; overflow: hidden;}
.author-box .sns-follow .instagram-button span::before{ z-index: 1 !important; position: relative; }
.author-box .sns-follow .instagram-button span::after{ content: ''; position: absolute; top: 14px; left: -20px; width: 60px; height: 60px; background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); }
.author-box .sns-follow .youtube-button{ background-color: #cd201f !important; }
.author-box .sns-follow .flickr-button{ background-color: #111 !important; }
.author-box .sns-follow .pinterest-button{ background-color: #bd081c !important; }
.author-box .sns-follow .line-button{ background-color: #00c300 !important; }
.author-box .sns-follow .amazon-button{ background-color: #ff9900 !important; }
.author-box .sns-follow .github-button{ background-color: #4078c0 !important; }
.author-box .sns-follow .feedly-button{ background-color: #2bb24c !important; }
.author-box .sns-follow .rss-button{ background-color: #f26522 !important; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span{ line-height: 40px; }
.author-box .author-content .author-follows .sns-buttons a.follow-button span::before{ font-size: 20px !important; }


main .author-box{
	max-width: 400px;
	margin: 0 auto;
	font-size: 80%;
}
/*---------------------------------------------------------------*/
/* 2018/07/06: プロフィールボックスのカスタマイズ end */
/*---------------------------------------------------------------*/
/*---------------------------------------------------------------*/
/* 2023/10/29 : カルーセルエリア start */
/*---------------------------------------------------------------*/
/* (参考)https://tachimade.com/cocoon-carousel/ */
/* (参考)https://masaa.net/2021/10/07/cocoon-211005-1/　*/
/* (参考)https://yururitolabo.online/appealarea-text/ */
/* エントリーカードカテゴリー名 */
.carousel .cat-label {
  display: none; /* カテゴリーを消す */
}
/* タイトル設定 */
.carousel-entry-card-title{
display:none;  /* タイトルを非表示にする */
}
/* ドット設定 */
.slick-dots li button:before{
display:none;　/* ドットを非表示にする */
}
/*枠削除*/
/*
.carousel .carousel-entry-card .cat-label {
  border: none; 
}
*/
/*---------------------------------------------------------------*/
/* 2023/10/29 : カルーセルエリア end */
/*---------------------------------------------------------------*/

/*---------------------------------------------------------------*/
/* 202311/28 : Cocoonのソースコードをハイライト表示するCSSセレクター start
/*---------------------------------------------------------------*/
.entry-content pre{font-family: Consolas, Monaco, monospace;}
/*---------------------------------------------------------------*/
/* 202311/28 : Cocoonのソースコードをハイライト表示するCSSセレクター end
/*---------------------------------------------------------------*/
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

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

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