@charset "UTF-8";
@import url('https://fonts.googleapis.com/earlyaccess/hannari.css');
@import url('https://fonts.googleapis.com/css2?family=Sawarabi+Mincho&display=swap');

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

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

/*ーーーーーーーーーーーーーーーーーーーーーーーーー
 * 【マイルール】
 * ①全てに共通の場合はここに記入（文字サイズ、目次、文字コード、リンク、ホバー、アニメーション）
 * ②画面の大きさで変わるものはカスタムCSS（表示オブジェクト）
 * ③ページ固有のものはページのCSS（固有のボタン、絵日記スライダー系、MyOfficialSiteのもの）
 * ーーーーーーーーーーーーーーーーーーーーーーーー*/

/*fontawesomeを使えるようにする*/
@import url("/wp-content/themes/cocoon-master/css/fontawesome.min.css");

/*↓はんなり明朝のclassコード*/
.wf-hannari { font-family: "Hannari"; }

/*↓さわらび明朝のclassコード*/
.sawarabi-mincho-regular {
  font-family: "Sawarabi Mincho", serif;
  font-weight: 400;
  font-style: normal;
}
body{
 font-family: "Sawarabi Mincho", serif; 
}

/*↓リンクに付く下線を消す（全てに対応？）*/
a:where(:not(.wp-element-button)) {
    text-decoration: none;
}

/* 内部ブログカードのURLを非表示*/
.internal-blogcard-site {
    display: none;
}

/*全てホバー時に浮かせる*/
.a-wrap:hover{
transform: translateY(-5px);
box-shadow: 5px 5px 10px 0 #ccc;
}

/*リンクの最後にアイコンを追加(class="linkicon"用)*/
.linkicon:after {
   font-family: 'Font Awesome 5 Free';
   content: '\f35d';
   font-size: 0.9em;
   margin: 0px 3px;
   font-weight: 900;
   /*content: "リンクマーク";*/ 
}

/*モバイルでタップしたときの青い光を消す*/
*{
	-webkit-tap-highlight-color:     rgba(0,0,0,0);
	cursor:pointer;
}

/* 画面全体を覆うオーバーレイ(タブパネル切り替え中、ロード中は操作不可にする) */
#overlay {
    display: block; /* 初期状態では→(jsでロード後ON) */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0); /* 透明の背景 */
    z-index: 9999; /* 最前面に配置 */
    pointer-events: all; /* すべてのイベントを遮断 */
}
/* POPUP表示中に、後ろをグレーにする */
.back-grey {
    display: none; /* 初期状態では非表示 */
	z-index: 9999; /* 最前面に配置、再設定すること！ */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.5); /* グレーの背景 */
}
/* 画像を左右によせて文章を折り返せるようにする */
.image-left {
    float: left;
    margin-right: 20px;
}
.image-right {
    float: right;
    margin-left: 20px;
}


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

/*上下にふわふわと動かす*/
.fwfw {
    animation-name: fw-fw;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1s;
}
@keyframes fw-fw {
    0% {transform: translate(0,0px)}
    100% {transform: translate(0,-10px)}
}
/*逆の上下にふわふわと動かす*/
.wfwf {
    animation-name: wf-wf;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1s;
}
@keyframes wf-wf {
    0% {transform: translate(0,-10px)}
    100% {transform: translate(0,0px)}
}

/*大きく小さくと動かす*/
.bsbs {
    animation-name: bs-bs;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1s;
}
@keyframes bs-bs {
    0% {transform: scale(1.2);opacity: 0.5}
    100% {transform: scale(0.8)}
}
/*小さく大きくと動かす*/
.sbsb {
    animation-name: sb-sb;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 1s;
}
@keyframes sb-sb {
    0% {transform: scale(0.8)}
    100% {transform: scale(1.2);opacity: 0.5}
}

/************************************
** レスポンシブデザイン用のメディアクエリ(default：1023px以下、834px以下、480px以下)
************************************/
/*-------------------------------------------------- （PC版） -*/
/*本文のフォントサイズを変更する*/
.honbun {
	font-size: 1.125rem;
	color: grey;
}
.honbun_2 {			/*（本文サイズ＋2）*/
	font-size: 1.375rem;
	color: grey;
}
.honbun_1 {			/*（本文サイズ＋1）*/
	font-size: 1.25rem;
	color: grey;
}
.honbun-1 {			/*（本文サイズ－１）*/
	font-size: 1rem;
	color: grey;
}
.honbun-2 {			/*（本文サイズ－２）*/
	font-size: 0.875rem;
	color: grey;
}
/*目次部分を中央ぞろえ*/
.mokuji{
	text-align: center;
}
/*-------------------------------------------------- 950px以下（タブレット版） -*/
@media screen and (max-width: 950px){
	/*本文のフォントサイズを変更する*/
	.honbun {
		font-size: 1rem;
		color: grey;
	}
	.honbun_2 {			/*（本文サイズ＋2）*/
		font-size: 1.25rem;
		color: grey;
	}
	.honbun_1 {			/*（本文サイズ＋１）*/
		font-size: 1.125em;
		color: grey;
	}
	.honbun-1 {			/*（本文サイズ－１）*/
		font-size: 0.875rem;
		color: grey;
	}
	.honbun-2 {			/*（本文サイズ－２）*/
		font-size: 0.75rem;
		color: grey;
	}
	/*目次の左右に余白を入れる*/
	.mokuji {
			margin-left:  10px;
			margin-right: 10px;
	}
	/*目次を左によせる*/
	.mokuji{
			text-align: left;
	}
}
/*-------------------------------------------------- 750px以下（モバイル版） -*/
@media screen and (max-width: 750px){
	/*本文のフォントサイズはタブレットのまま*/
	/*mokuji段落の設定*/
	.mokuji p{
		font-size: 1.125rem;
		color : grey;
	}
	/*mokouji部分的な設定…をなくす*/
	.mokuji span{
		display:none;
	}	
}