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


/************************************
** カラー
************************************/
:root {
	--dark-blue:#5e91d1;
	--pale-blue:#e5eeff;
	--dark-brown: #6b5353;
	--pale-brown: #edd6c9;
	--pale2-brown: #ebe3d8;
	--dark-pink: #ff668a;
	--pale-pink: #ffe3df;
	--dark-yellow: yellow;
	--pale-yellow: #fff6b8;
	--dark-green: #00b26a;
}

/************************************
** モバイルメニュー
************************************/
/*ヘッダメニューのスタイル*/
.menu-item i{
  padding-right: 4px;
}

/* ヘッダモバイルボタンのスタイル*/
#menu-mobile-header,#menu-en-mobile-header,#menu-mobile-footer-button,#menu-en-mobile-footer-button{
  background-color:var(--dark-blue);
  color:white;
}
.mobile-menu-buttons .menu-button > a{
	color:white;
}

/* モバイルトップメニュー 横スクロール*/
#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:1.3;
}
#header-container #navi a{
   color:#fff; /* 文字色 */
   padding:0.8em 1em;
}

#header-container .navi-in > ul > .menu-item-has-children > a::after {
   top: 0.8em;
   font-size: 1.2em;
   font-weight: 600;
}
#header-container .sub-menu .caption-wrap{
   padding-left:1em;
}
.navi-in > ul .menu-item-has-description > a > .caption-wrap{
   height:auto;
}
@media screen and (max-width: 1030px){
	#header-container .menu-mobile{
		display:none;
	}
	.navi-in > .menu-mobile{
		display:-webkit-box;
		display:-ms-flexbox;
		display:flex;
		overflow-x: scroll;
		white-space: nowrap;
		-webkit-box-pack: start;
		-ms-flex-pack: start;
		justify-content: flex-start;
		flex-wrap: nowrap;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
	}
	#header-container #navi a{
		font-size:0.8em;
		padding: 1em 1.2em;
	}
	#header-container .navi-in > ul > .menu-item-has-children > a::after{
		display:none;
	}
	#navi .navi-in > .menu-mobile li {
		height: auto;
		line-height: 1.8;
	}
	.mblt-header-mobile-buttons {
		margin-top: 53px;
	}
}
/************************************
** サイドバー
************************************/
.widget-title{
    background-color:var(--dark-blue) !important;
  color:white;
}
#slide-in-sidebar .author-box{
  display: none;
}

/************************************
** カテゴリタグ非表示
************************************/
.cat-label {
display: none;
}

/************************************
** 目次タイトル非表示
************************************/
.toc-title{
  display: none;
}
/************************************
** 記事の見出し
************************************/
.article h2{
  background-color: var(--dark-blue);
	color: white;
	padding-left: 20px;
	margin-left: -15px; /*以降は横幅いっぱいに表示する設定。以下のpxの半分*/
    width: calc(100% + 30px);
    width: -webkit-calc(100% + 30px); /*上と同じpx値に*/
}
.article h3{
  background-color: #e5eeff;
	color: var(--dark-blue);
	padding-left: 15px;
  border: none;
  border-left: 8px solid var(--dark-blue);
	margin-left: -15px; /*以降は横幅いっぱいに表示する設定。以下のpxの半分*/
    width: calc(100% + 30px);
    width: -webkit-calc(100% + 30px); /*上と同じpx値に*/
}
.article h4{
  padding-left: 15px;
  color: var(--dark-blue);
  border-top: 3px solid var(--dark-blue);
  border-bottom: 3px solid var(--dark-blue);
}

/************************************
**　「この記事を書いた人」カスタマイズ
**　ref:https://s41t0h.jp/cocoon-author-box-customize/
************************************/
.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-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 .bc-brand-color.sns-follow .website-button{ background-color: var(--dark-blue) !important; }
.author-box .bc-brand-color.sns-follow .twitter-button{ background-color: #7dcdf7 !important; }
.author-box .bc-brand-color.sns-follow .facebook-button{ background-color: #7c9dec !important; }
.author-box .bc-brand-color.sns-follow .hatebu-button{ background-color: #2c6ebd !important; }
.author-box .bc-brand-color.sns-follow .google-plus-button{ background-color: #dd4b39 !important; }
.author-box .bc-brand-color.sns-follow .instagram-button{ background: linear-gradient(135deg, #427eff 0%, #f13f79 80%) no-repeat !important;}
.author-box .bc-brand-color.sns-follow .youtube-button{ background-color: #cd201f !important; }
.author-box .bc-brand-color.sns-follow .flickr-button{ background-color: #111 !important; }
.author-box .bc-brand-color.sns-follow .pinterest-button{ background-color: #bd081c !important; }
.author-box .bc-brand-color.sns-follow .line-button{ background-color: #00c300 !important; }
.author-box .bc-brand-color.sns-follow .amazon-button{ background-color: #ff9900 !important; }
.author-box .bc-brand-color.sns-follow .github-button{ background-color: #4078c0 !important; }
.author-box .bc-brand-color.sns-follow .feedly-button{ background-color: #2bb24c !important; }
.author-box .bc-brand-color.sns-follow .rss-button{ background-color: #f26522 !important; }
.author-box .bc-brand-color.sns-follow .tiktok-button{ background-color: #000000 !important; }
.author-box .bc-brand-color.sns-follow .rakuten-room-button{ background-color: #FF547C !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%;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
/* @media screen and (max-width: 1023px){} */

/*834px以下*/
/* @media screen and (max-width: 834px){} */

/*480px以下*/
/* @media screen and (max-width: 480px){} */