@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    0.0.4
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
/************************************
A.ayCique子テーマCSS(PC)
************************************/
/*Cocoon英文フォント（白抜きになるのはHelvetica Neueが犯人対策全部Segoe UIに変更）*/
.ff-meiryo,
.wf-loading body {
  font-family: "Segoe UI", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
.ff-yu-gothic {
  font-family: "Segoe UI", "Yu Gothic", Meiryo, "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
}
.ff-ms-pgothic {
  font-family: "Segoe UI", "MS PGothic", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
/************************************
a1*全体フォントなど
************************************/
/*bodyフォント*/
body {
  /* フォントの種類 */
  font-family: Times New Roman, 游明朝, /*'Noto Sans JP'*/ serif;
  /* フォントのサイズ */
  font-size: 22px;
  /* フォントの色 */
  color: #333;
  /* カーニングの設定 */
  /* 行間の設定 */
  line-height: 1.8;
  margin: 0;
  overflow-wrap: break-word;
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
}
/*段落回り（p=paragraph 段落 本文の文章のこと）*/
p {
 /* フォントの種類 */
  font-family: Times New Roman, 游明朝, /*'Noto Sans JP'*/ serif;
 /* フォントのサイズ */
 font-size: 22px;
}
/************************************
a2*記事見出しフォントサイズ・背景色（PC）
************************************/
/*見出し上下余白*/
.article h2, .article h3, .article h4, .article h5, .article h6 {
    margin-top: 1.0rem;
    margin-bottom: 0px;
}
.article h1 {
	font-size: /*1.9rem*/32px;
	padding: .0em .3em;
}
.article h2 {
	font-size: 1.5rem;
	background-color: #bce2e8;
	color: white;
	padding: 1.0rem;
}
.article h3 {
	font-size: 1.2rem;
	border-color: #97885f;
	color: black;
	padding: 10px 0px 8px 14px ; /*上右下左*/
}
.article h4 {
	font-size: 1.0rem;
}
.article h5 {
	font-size: 1.0rem;
}
.article h6 {
	font-size: 1.0rem/*22px*/;
}
/******************************
 a3*記事タイトル回り
 ******************************/
/*パン屑リストまわり*/
.breadcrumb {
    margin: .0em .0em;
    color: #777;
    font-size: 20px;
}
/*パン屑リスト文字サイズ*/
.breadcrumb.sbp-main-before, .breadcrumb.sbp-footer-before, .breadcrumb.pbp-main-before, .breadcrumb.pbp-footer-before {
    background-color: #fff;
    margin: 0px auto 0;
    padding: .1em .1em;
    font-size: 20px;
}
/*コンテントの上のマージンなし*/
.content {
margin-top: 0;
}
/****************************************
エントリーカード
****************************************/
/*エントリーカード・投稿下関連記事抜粋文字サイズ*/
.entry-card-snippet, .related-entry-card-snippet {
    font-size: .5em;
    max-height: 7.8em;
    line-height: 1.3;
    overflow: hidden;
}
/*エントリーカード・投稿下関連記事インデックス日付文字サイズ*/
.ect-vertical-card .entry-card-wrap .post-date, .ect-vertical-card .entry-card-wrap .post-update, .related-entry-card-info.e-card-info .post-date, .related-entry-card-info.e-card-info .post-update{
    font-size: .5em;
    margin-right: 0;
}
/***************************************
*投稿日・更新日
****************************************/
/*日付・更新日文字サイズ*/
.entry-category, .post-date, .post-update, .post-author, .amp-back {
    padding: 2px;
    display: inline;
    font-size: /*10px*/.6em;
}
/*投稿（個別投稿 シングルページ single.php）の日付「Cocoon 公開日と最終更新日を並べて表示」*/
.date-tags {
  display: flex;
  flex-direction: row-reverse;
}
/*投稿日・更新日表示左右順番順序*/
.post-date {
    order: 1; /* 投稿日の表示順を1番目に */
}
.post-update {
    order: 2; /* 更新日の表示順を2番目に */
}
/***************************
*ヘッダー回り
******************************/
/*グローバルメニュー sub caption*/
.sub-caption {
    color: black;
}
/***************************
*フッター回り*
****************************/
/*footer font size*/
footer#footer a {
color: #f2edd5;
font-size: 14px;
padding: 5px;
}
/*フッターメニューの囲み*/
.navi-footer-in>.menu-footer li {
    width: auto;
    border-left: 0px solid #000;
    border-right: 0px solid #000;
}
footer#footer .footer-widgets p {
font-size: 18px;
padding: 3px;
}
/**************************************
*カテゴリ回り
****************************************/
/*サブカテゴリーのリストマージン高さ*/
ol, ul {
    margin: 0em 0;
}
/******************************
*タグクラウド
******************************/
/*フッター下のタグクラウド*/
.tagcloud a {
    background: none; /*背景を消す*/
	border: none;/*枠線消す*/
    /*color: #ffffff; 文字色*/
    font-size: 20px;
    flex: 0 1 auto;
    display: flex;
    justify-content: space-between;
	text-decoration: none;
}
/*wp block tag cloud
p.wp-block-tag-cloud{
	font-size: .8rem;
}*//*javascript.jsで上のタグクラウドを継承してるのでCSSきかない*/
/*****************************************
*吹き出し文字サイズ
******************************************/
/*Cocoon 吹き出し文字サイズ*/
div.speech-balloon p {
    font-size: 0.6em;
}
/*********************************
*Cocoonブロック ラベルボックス余白
*********************************/
.label-box-content {
    margin-top: -1rem;
    border: 3px solid #888;
    padding: .4em .4em .4em;
    border-radius: 8px;
}
/************************
*目次まわり
************************/
/*目次フォント色*/
.toc{
	color: #d8a373/*#ddd0b3*/ ; /*目次を文章の色に統一*/
}
.toc a{
	color: #d8a373/*#ddd0b3*/ ; /*目次のリスト要素を文章の色に統一*/
}
/*目次 h3 左寄せ*/
.toc ul, .toc ol {
    padding-left: 6px;
    /*margin-top: .5em;*/
}
/*目次 h3 左寄せ*/
.toc ul, .toc ol {
    padding-left: 6px;
    margin-top: .5em;
}
/*目次フォントサイズ行間など*/
.toc {
    color: #d8a373;
    font-size: 0.9em;
    line-height: 1.4em;
}
/*iPhone画像崩れ対策ためし*/
body{
    -webkit-appearance: none;
	-webkit-text-size-adjust: 100%;
}
/************************************
* 引用（blockquote）
************************************/
blockquote {
    background-color: #1e282d;
    color: #9ea3a8;
    font-family: Segoe UI,"游ゴシック",sans-serif;
    border: 1px solid #9ea3a8;
    margin: 1em 0;
    padding: 10px 1.2em;
    position: relative;
    font-style: italic;
}
blockquote p{
	font-size:16px;
}
blockquote::before, blockquote::after {
  color: #C8C8C8;
  font-family: serif;
  position: absolute;
  font-size: 200%;
}
blockquote cite{
	font-size:.50em;
}
/*********************************
*YouTube 埋め込み 調整
*********************************/
/*cocoon youtube 埋め込み 中央寄せ*/
.video-container {
margin: 0px auto;
}
/*cocoon youtube 埋め込み 余白なし*/
.video-container {
  margin-top: -1.4em;
}
/*youtube 埋め込み 全幅 サイズ*/
.video-container, .instagram-container, .facebook-container {
    max-width: 800px;
}
/**********PCここまで***************/

/*********************************
B. レスポンシブデザイン用のメディアクエリ
**********************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}
/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
}
/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
}
/*********************************
C.スマホ用
*********************************/
/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
/* スマホ用フォント*/
	body {
 /* フォントの種類 */
  font-family: Times New Roman, 游明朝, /*'Noto Sans JP'*/ serif;
  /* フォントのサイズ */
  font-size: 22px;
  /* フォントの色 */
  color: #333;
  /* カーニングの設定 */
  /* 行間の設定 */
  line-height: 1.2;
  margin: 0;
  overflow-wrap: break-word;
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
  background-attachment: fixed;
  }
/*p=paragraph（段落）本文の文章*/
p {
  /* フォントの種類 */
  font-family: Times New Roman, 游明朝, /*'Noto Sans JP'*/ serif;
  /* フォントのサイズ */
  font-size: 18px;
  /* 行間の設定 */
  line-height: 1.2;
  }
  /*スマホインデックスタイトル文字サイズ*/
  .entry-card-title{
      font-size: 16px; /*スマホでのフォントサイズ*/
      line-height: 1.4; /*スマホでの行間*/
    }
  .e-card-info{
      font-size: 12px; /*スマホでのフォントサイズ*/
    }/**スマホクエリ終わり**/
  /*************************************************
   *  記事見出しフォントサイズ・背景色（スマホ）
  *************************************************/
  .article h1 {
  	font-size: 1.59rem/*25px*/;
  }
 .article h2 {
  	font-size: 1.3rem/*17px*/;
  	background-color: #bce2e8;
  	color: white;
  }
  .article h3 {
  	font-size: 1.2rem/*16px*/;
  	border-color: #97885f;
  	color: black;
  }
  .article h4 {
  	font-size: 1.0rem;
  }
  .article h5 {
  	font-size: 1.0rem;
  }
  .article h6 {
  	font-size: 1.0rem;
  }
}
/*スマホCSSここまで*/


/********************************
D.Cocoon外部ソース(PC/スマホ)*
********************************/
/*******************************
*プラグインsimple-sitemap調整
********************************/
.simple-sitemap-container ul {
    margin: 0 0 0 1.2em;
    padding: 0;
	font-size: .80em;
}
@media screen and (max-width: 1334px){
	.simple-sitemap-container .main {
	width: 95%;
}
}
/********************************
*かんたんリンク カスタマイズ
********************************/
/* --------- 外枠 --------- */
div.easyLink-box {
    border:double #CCC !important; /* ２重線 */
    box-shadow: 2px 3px 9px -5px rgba(0,0,0,.25);
}
/* --- 商品リンク タイトル --- */
p.easyLink-info-name a {
    color: #3296d2 !important; /* 文字色 */
}
/* --------- ボタン色 --------- */
a.easyLink-info-btn-amazon {
    background: #f6a306 !important; /* 背景色 */
    border: 2px solid #f6a306 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
a.easyLink-info-btn-rakuten {
    background: #cf4944 !important; /* 背景色 */
    border: 2px solid #cf4944 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
a.easyLink-info-btn-yahoo {
    background: #51a7e8 !important; /* 背景色 */
    border: 2px solid #51a7e8 !important; /* 外枠 */
    box-shadow: 0px 3px 7px 0px rgba(0,0,0,.25); /* 影 */
}
/* --- マウスオーバー時のボタン色 --- */
a:hover.easyLink-info-btn-amazon {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #f6a306 !important; /* 文字色 */
}
a:hover.easyLink-info-btn-rakuten {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #cf4944 !important; /* 文字色 */
}
a:hover.easyLink-info-btn-yahoo {
    opacity: 1 !important; /* 透明度(1.0=不透明 0.0=完全透明) */
    background: #fff !important; /* 背景色 */
    color: #51a7e8 !important; /* 文字色 */
}
/* --- PC以外の時の設定 --- */
@media screen and (max-width: 703px) {
div.easyLink-box div.easyLink-img,
div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht {
    max-height: 180px !important; /* 商品画像の大きさを調整 */
}
}/*かんたんリンクここまで*/
/*Cocoon外部(PC/スマホ)ここまで/

/*****************************
E.個別設定（トップページなど）
*****************************/
/*****************************
 * サイトフロントページタイトル非表示
 * ***************************/
/*フロント固定ページのタイトルを非表示*/
.home.page .entry-title{
  display: none;
}
/*フロント固定ページのシェアボタンを非表示*/
.home.page .sns-share{
  display: none;
}
/*フロント固定ページのフォローボタンを非表示*/
.home.page .sns-follow{
  display: none;
}
/*フロント固定ページの投稿日を非表示*/
.home.page .post-date{
  display: none;
}
/*フロント固定ページの更新日を非表示*/
.home.page .post-update{
  display: none;
}
/*フロント固定ページの投稿者名を非表示*/
.home.page .author-info{
  display: none;
}

/**人気記事ランキング（月間・習慣）カスタムHTMLウィジェット**/
/* tab switcher */
.tab-wrap {
	background: White;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 0 0 20px;
}
.tab-label {
	color: Gray;
	cursor: pointer;
	flex: 1;
	font-weight: bold;
	order: -1;
	padding: 1px 2px;
	position: relative;
	text-align: center;
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s;
	user-select: none;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	border-bottom: 3px solid #ddd;
}
.tab-label:hover {
	background: rgba(100, 100, 100,.1);
}
.tab-switch:checked + .tab-label {
	color: #545454;
}
.tab-label::after {
	background: #545454;
	bottom: -3px;
	content: '';
	display: block;
	height: 3px;
	left: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transform: translateX(100%);
	transition: cubic-bezier(0.4, 0, 0.2, 1) .2s 80ms;
	width: 100%;
	z-index: 1;
}
.tab-switch:checked ~ .tab-label::after {
	transform: translateX(-100%);
}
.tab-switch:checked + .tab-label::after {
	opacity: 1;
	transform: translateX(0);
}
.tab-content {
	height:0;
	opacity:0;
	padding: 0 10px;
	pointer-events:none;
	transform: translateX(-30%);
	transition: transform .3s 80ms, opacity .3s 80ms;
	width: 100%;
}
.tab-switch:checked ~ .tab-content {
	transform: translateX(30%);
}
.tab-switch:checked + .tab-label + .tab-content {
	height: auto;
	opacity: 1;
	order: 1;
	pointer-events:auto;
	transform: translateX(0);
}
.tab-wrap::after {
	content: '';
	height: 20px;
	order: -1;
	width: 100%;
}
.tab-switch {
	display: none;
}/* tab switcher END*/