@charset "UTF-8";

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

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

/*メニューデザインをマテリアル風*/
nav#navi, .menu-header .sub-menu{
    font-weight: bold;
    box-shadow: 0 5px 15px -5px rgba(0,0,0,0.2);
}

.menu-header .sub-menu .item-label{
    font-size: 80%;
}
.menu-header .item-label{
    color: #7d521c !important;
}
.menu-header .current-menu-item,
.menu-header .current-post-item,
.menu-header .current-menu-ancestor,
.menu-header .current-post-ancestor,
.menu-header .menu-item:hover {
    color: #333 !important;
    border-bottom: 3px solid #7d521c;
    transition: all .2s ease;
}

.menu-header .sub-menu .menu-item,
.menu-header .sub-menu .menu-item:hover{
    border-bottom: none;
}
.menu-header .current-menu-item>a .item-label,
.menu-header .current-post-item>a .item-label,
.menu-header .current-menu-ancestor>a .item-label,
.menu-header .current-post-ancestor>a .item-label,
.menu-header .item-label:hover{
    color: #333 !important;
    transition: all .2s ease;
}

/* エントリーカードラベル非表示 */
.entry-categories {
  display: none;
}

/* 投稿ページの投稿日と更新日を逆に表示 */
.date-tags {
  display: flex;
  flex-direction: row-reverse;
}

/*サイドメニューの文字サイズ変更*/
#sidebar {
    font-size: 14px;
}

/*サイドバー人気記事タイトル*/
.widget-entry-card {
font-size: 14px;
line-height: 1.5em;
font-weight: lighter;
}

/*サイドバー見出し 下線*/
.sidebar h3 {
  border-bottom:2px solid #8BC34A;/*下線の太さ、種類、色*/
  background:transparent;/*背景を透明に*/
  padding:10px 0 5px 3px;
}

/*サイドバー最近の投稿 投稿日*/
.widget_recent_entries ul li .post-date {
    display: block;
    text-align: right;
    font-size: 0.7rem;
    color: #bbb;
    font-weight: 300;
    letter-spacing: 1px;
}

/*サイドバーSNSボタン*/
.author-box .sns-follow .sns-follow-buttons a.follow-button {
  font-size: 36px;
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
  margin-right: 10px;
  color: #fff;
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 5px 0 rgba(0,0,0,.1),0 3px 5px 0 rgba(0,0,0,.2);
}

.author-box .sns-follow-buttons a.twitter-button {
  background-color: #1da1f2 !important;
}

.author-box .sns-follow-buttons a.youtube-button {
  background-color: #FF0000 !important;
}

.author-box .sns-follow-buttons a.feedly-button {
  background-color: #6cc655 !important;
}

.author-box .sns-follow-buttons a.rss-button {
  background-color: #f26522 !important;
}

/*サイドバーの固定リンク*/
a.side_link {
text-decoration: none;
}

/*リンク画像を半透明*/
a:hover img {
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  opacity: 0.5;
}

/* 見出しの装飾 */
.entry-title, #editor .entry-title, .archive-title {
	padding: 5px;
	margin: 5px 0;
	background-color: transparent;
	background:none;
	color: #7d521c!important;
	font-size: 24px;
	border-left:none;
	border-bottom:solid #7d521c;
	text-align:left;
}

.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
	font-weight: 600;
}

.article h2{
	background: #7d521c;
	padding: 20px 15px 18px;
	color: #ffffff;
	border-top:none;
	border-bottom:solid #7d521c;
	border-left: 9px solid #7d521c;
	line-height: 30px;
	font-size: 22px;
	border-radius:5px;
}

.article h3{
	font-weight: 600;
	letter-spacing: 1.6px;
	border:solid #dd9933;
	border-left: 20px solid #dd9933;
	border-radius:5px;
	margin: 30px 0 30px 5px;
	background:#fff6dc;
	color: #7d521c;
	font-size: 20px;
}

.article h4{
	font-weight: 600;
	margin: 30px 0 0;
	padding: 5px 0 0 10px;
	background: none;
	color: #000000;
	font-size: 18px;
	position: relative;
	padding-left: 1.2em;/*アイコン分のスペース*/
	line-height: 1.4;
}

.article h4:before {
 	font-family: "Font Awesome 5 Free";
	content: "\f00c";/*アイコンのユニコード*/
	font-weight: 900;
	padding: 4px 0 0 0;
	position: absolute;/*絶対位置*/
	font-size: 1em;/*サイズ*/
 	left: 0;/*アイコンの位置*/
	top: 0;/*アイコンの位置*/
	color: #5ab9ff; /*アイコン色*/
}


/* 目次の装飾 */
.toc {
	display: block;
	padding: 5px;
	background-color:#f8fafd;
	border: dashed 1px #0693cd !important;
}

.toc-title {
    font-weight: bold;
	display: block;
	color: #046e9a;
	font-size: 20px;
	padding-top: 5px;
}

.toc-title:before{
 font-family: "Font Awesome 5 Free";
 content: "\f15b"; /* タイトル前のアイコン */
 margin-right: 5px;
 margin-left: 5px;
}

.toc .toc-content{
  	color: #666666;
	font-size: 16px;
	padding: 0 20px 5px ;
	margin-left: 20px;
}

.toc a {
  color: #0693cd;
}

.toc-list > li a {
	font-weight: bold;
	display:block;
	margin-left: 3px;
}

.article .toc-list > li li {
  list-style: none;
}

.toc-list > li li a {
	font-weight: normal;
	font-size: 90%;
	margin-top:0;
	margin-left: -1em;
}

.toc-list > li li a::before {
		font-family: "Font Awesome 5 Free";
	content : "\f35a";
	color: #046e9a;
	margin-right: 7px;
}

.toc a:hover {
	color: #046e9a;
	text-decoration: underline;
}

/* 本文の装飾 */
p {
  margin-left: 10px;
  margin-right: 10px;
  font-size: 17px;
}

/* 投稿本文下プロフィール */
.selfintroduction {
 background-color: #e0ffff;
 padding: 20px 20px 5px 20px;
 border-radius: 15px;
}

/* キャプションの配置 */
figcaption {
  text-align: right;
}

/* SNSボタンのサイズ指定 */
#main .sns-share a {
	width: 4.5em;
	margin-left: 1.2em;
}
.sns-share-buttons {
	justify-content: center;
}
#main .button-caption {
	display: none;
}
#main .social-icon {
	font-size: 25px;
}

/* カテゴリタイトルのアイコン */
.archive-title .fa-folder-open:before {
	content: "";
}

/* ブログカードのアイコン */
.bct-related .blogcard-label {/*関連記事*/
display: inline !important;
background-color: #7d521c;
margin-left:.5em;
}

.bct-reference .blogcard-label {/*参考記事*/
display: inline !important;
background-color: #8bc34a;
margin-left:.5em;
}

.bct-reference-link .blogcard-label {/*参考リンク*/
display: inline !important;
background-color: #ffb74b;
margin-left:.5em;
}

.bct-popular .blogcard-label,/*人気記事*/
.bct-together .blogcard-label,/*あわせて読みたい*/
.bct-detail .blogcard-label,/*詳細はこちら*/
.bct-check .blogcard-label,/*チェック*/
.bct-pickup .blogcard-label,/*ピックアップ*/
.bct-official .blogcard-label,/*公式サイト*/
.bct-dl .blogcard-label{/*ダウンロード*/
display: inline !important;
background-color: #90C31F;
margin-left:.5em;
}

/* ブログカードの装飾 */
.blogcard {
border: 0px solid whitesmoke;
border-radius:4px;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 30%);
}

a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf{
transition: all 200ms;
}

a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf:hover{/*内部ブログカードのみhovershadowを非表示*/
background-color: #fafafa;
box-shadow:none;
transform: none;
transition: all 200ms;
}

.internal-blogcard::after{
background-color:#8b968d!important;
}

.blogcard:before {/*ブログカード左上のアイコンを非表示*/
display:none;
}

.internal-blogcard::after{/** 続きを読む*/
content: "続きを読む \00bb"; /* 内部リンク右下枠の文言 */
position: absolute;
bottom: 0.5rem;
right: 0.7rem;
font-size: 70%;
background-color: #ffd242; /* 内部リンク右下枠の背景色 */
padding: .4em 3em;
font-weight: bold;
color: #fff;
border-radius: 2px;
}

.blogcard-date{
display:none;
}

.blogcard-title { /* タイトル */
font-size:1em;
padding:.2em .2em 0;
line-height:1.4em;
text-align: justify;
}

.blogcard-snippet {
display: none; /* 本文を消す */
}

.blogcard-content.internal-blogcard-content{/*ブログカードタイトルの枠を大きくする*/
max-height:20em;
}

/* ブログカード下のファビコンとURLを消す */
.internal-blogcard-footer{
display: none
}

/*固定ページの投稿日を非表示*/
.post-3 .date-tags,
.post-97 .date-tags,
.post-1709 .date-tags,
.post-4727 .date-tags{
display: none;
}

/*固定ページの投稿者名を非表示*/
 .author-info{
display: none;
}

/*記事内の地図*/
.map {
 text-align: center;
}

/*記事内の動画*/
.video-container {
margin: 0px auto;
}

/*記事内のAmazonボックス*/
.amazon-item-box {
margin : 0 auto;
}

/* ページネーション */
.pagination-next {
  display: none;
}

.page-numbers { /*通常時*/
  color: #7d521c;
  border: 1px solid #7d521c;
}
.pagination .current { /*現在のページ*/
  background-color: #7d521c;
  color: #fff;
}
.page-numbers.dots { /*ドット「…」の部分*/
  opacity: 1;
  background: none;
}
.pagination a:hover { /*マウスホバー時*/
  background-color: #7d521c;
  color: #fff;
}

/* ステマ規制の表記 */
#custom_html-10{
margin-top:-20px;
}

/* モバイル表示　ヘッダーメニュー・検索アイコン */

.mobile-menu-buttons{
height:50px;
}
.mobile-menu-buttons > li {
padding-top:0;
}
.menu-button{
color: #7d521c!important;
margin: auto;
}
.mobile-menu-buttons .menu-button:hover{
background-color:white;
}
span.fas.fa-search::before{
margin-left:1em;
}
span.fas.fa-bars::before{
margin-right:1em;
}
.navi-menu-caption.menu-caption,.home-menu-caption.menu-caption,.search-menu-caption.menu-caption,.top-menu-caption.menu-caption,.sidebar-menu-caption.menu-caption{
display:none;
}

/* モバイルスライドインメニュー */
span.fas.fa-times::before{
    font-family: "Font Awesome 5 Free";
    content: "\f00d";
}
ul.menu-drawer:before{
    font-size:1.2em;
    background: white;
    color:#333;
    margin-bottom:1em;
    border-bottom:3px solid #90C31F; 
    content: "メニュー";
}

ul.menu-drawer:after {
    background: white;
}

.menu-drawer li {
    padding:0;
}

.menu-drawer li{
    font-weight: bold;
}

.menu-drawer a{
    font-size:1.3em;
    background-color:#ffffff;
    color:#545454;
    margin: .5em 0;
}

.menu-drawer a:hover{
    background-color:#f7f7f7;
}

.menu-drawer .sub-menu {
    padding:0;
}

.menu-drawer .sub-menu li{
    font-size: .9em;
}

.menu-drawer .sub-menu li a::before {
    font-family: "Font Awesome 5 Free";
    content : "\f105";
    color:#7b7b7b;
    margin:0 .5em 0 1em;
}

@media (max-width:834px){
.sub-menu{
    box-shadow: none;
}
}

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

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

/*ロゴサイズの変更*/
.logo-menu-button img {
display: block;
height: 100%;
width: 130px;
margin: 0 auto;
}
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	
/* 見出しの装飾 */
h1.entry-title {
	font-size: 20px;
}

.article h2 {
	padding: 15px 15px 13px;
	font-size: 18px;
}

.article h3 {
	font-size: 16px;
}
	
.article h4 {
	font-size: 16px;
}

.article h4:before {
	padding: 6px 2px 0 0;
	position: absolute;/*絶対位置*/
}
	
/* 目次の装飾 */
.toc-title {
	font-size: 18px;
	padding: 5px 0 0 0;
}
	
.toc .toc-content{
	padding: 0 10PX 5px;
}

.toc a {
	font-size: 16px;
}

.toc-list > li li a {
	font-size: 16px;
	margin-left: -15px;
}

/* 本文の装飾 */
p {
  font-size: 16px;
}

/* ブログカードのアイコン */
.blogcard-label{
margin-left:-0.3em!important;
}
}

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