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

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

/* トップへ戻るボタン画像サイズ */
.go-to-top-button {
width: 60px;
height: 60px;
}

/* メインカラムの背景色を透明にする */
#main{
  background: transparent;
}
/* サイドバーの背景色を透明にする */
#sidebar{
  background: transparent;
}

/*全てをまとめて非表示*/
.home.page .entry-title,
.home.page .sns-share,
.home.page .sns-follow,
.home.page .date-tags,
.home.page .author-info{
  display: none;
}

/*モバイルメニュー　文字消す*/
/*1023px以下*/
@media screen and (max-width: 1023px){
  .mobile-menu-buttons .menu-caption{
    display: none;
  }
  .mobile-menu-buttons{
    align-items: center;
  }
}

/* ホームボタンの色 */
.mobile-menu-buttons .home-menu-button > a {
color: #ffffff;
}

/* サイドバーボタンの色 */
.sidebar-menu-button {
color: #a3c6cc;
}



/*モバイルメニュー背景色*/
.navi-menu-content {
background-color: rgba(244,247,247,0.8);
}

.menu-drawer a {
font-size: 0.9em;
line-height: 1.6em;
border-bottom: solid 1px #1c8291;
}
.menu-drawer a:hover {
background-color:#1c8291;　/*マウスオーバー時の背景色*/
}
.sub-menu li {                                      
margin-left:-14px;
font-size: 0.9em;
color: #1c8291;
}

/*モバイルメニューを開いた時の記事色を変えない*/
#navi-menu-input:checked ~ #navi-menu-close,
#sidebar-menu-input:checked ~ #sidebar-menu-close,
#search-menu-input:checked ~ #search-menu-close,
#share-menu-input:checked ~ #share-menu-close,
#follow-menu-input:checked ~ #follow-menu-close {
opacity: 0;
}

/*×アイコンを移動*/
.menu-close-button {
 padding-top: 15px;
 padding-left: 25px;
 padding-bottom: 30px;
text-align: left;
font-size: 1.3em;
color: #1c8291;
}

/*モバイルメニューの行間を広く*/
.menu-drawer > li {
  padding: 15px 0;
  line-height: 2;
}

/*サブメニューを左詰めに*/
.menu-drawer .sub-menu li {
  text-align: left;
}

/*メニューの文字調整*/
.menu-drawer a{
	font-size: 1.0em;/*文字の大きさ*/
	color: #222222;/*文字の色*/
	height: 2em;/*行の高さ*/
	font-weight: bold;/*太字*/
}

/*ヘッダーモバイルボタンの文字色と背景色を変更*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background: #1c8291;
	color: #ffffff;
}

.logo-menu-button.menu-button{
	background: #1c8291;
}

.mobile-menu-buttons{
	background: #1c8291;
}

/*768px以下でロゴの大きさを変更*/
@media screen and (max-width: 768px){
img.site-logo-image{
	width: 180px;
}
}


/*フッターメニューを一列にする*/
@media screen and (max-width: 834px){
.navi-footer-in>.menu-footer{
    flex-wrap: nowrap;  /*フッターメニューを一列に*/
    justify-content: center;
  }
.navi-footer-in a{
    font-size: 90%;  /*フッターメニューの文字の大きさを変更*/
  }
}

/*目次カスタマイズ*/	

/* 目次の背景色を変更する */
.toc-title{
  background-color: #1c8291;  /* 背景色を変更する */
  font-size: 1.2em;  /* 文字の大きさを変える */
  padding: 0.3em;  /* 文字の周囲の余白を変える */
  font-weight: bold;  /* 文字を太字にする */
  color: #ffffff;  /* 文字の色を変える */
}

/* 目次のH2見出しのみ太字にする */
.toc-content ol li{
  color: #222222;  /* 文字の色 */
  margin:0.5em;  /* 文字の余白 */
}
.toc-list > li{
  font-weight: bold;  /* h2のみ太字にする */
}
.toc-list > li li{
  font-weight: normal;  /* h2以外を標準の太さにする */
}

/* 目次のタイトル部分にアイコンを追加する */
.toc-title:before {
  font-family: 'Font Awesome 5 Free';  /* Font Awesome 5を使用するために指定 */
  content : "\f0c9";  /* Font Awesome 5のアイコン番号 */
  font-size:20px;  /* アイコンの大きさ */
  margin-right:10px;  /* アイコン右の余白 */
  color:#ffffff;  /* アイコンの色 */
  background-color:#1c8291;  /* アイコンの背景の色 */
  border-radius: 50%;  /* アイコンの背景を丸くする */
  padding:8px;  /* アイコン背景の余白 */
}

/*見出し前のアイコンの色を変更*/
.toc-content ol li{
    color:#1c8291;
    margin:0.5em;
}

.toc-content ol li li{
    color:#a3c6cc;
    margin:0.5em;
}


/* サイドバーの目次のみデザインを変更する */
#sidebar .toc{
  padding: 10px;  /* 周囲の余白を変える */
}

/* はみ出た分をスクロール可能にするコード */
.sidebar #toc-2 .toc-content {
	overflow-y: scroll; /* 縦スクロールを可能に */
	max-height: 530px; /* 目次の高さ上限 */
}

/* スクロールバーを常に表示 */
.sidebar .toc-content::-webkit-scrollbar {
	-webkit-appearance: none; /* スタイルの初期化を禁止 */
	width: 8px; /* スクロールバーの横幅 */
}

/* スクロールできるツマミ部分 */
.sidebar .toc-content::-webkit-scrollbar-thumb {
	background-color: #a3c6cc; /* ツマミの色 */
}


/*ボックスメニューの画像を大きくする*/

.box-menu{
	padding: 0;
	min-height: 0;
}

.box-menu:hover{
	box-shadow:none;
	opacity: 0.8;
} 

.box-menu-label,
.box-menu-description{
	display: none;
}

.box-menu-icon *{
	margin: 0;
	max-width: 90%;
	max-height: 90%;
}

/*ボックスメニューを中央寄りに*/
.box-menu:first-child {
    margin-left: auto;
}

.box-menu:last-child{
    margin-right: auto;
}

/*ボックスメニューに余白をつける*/
@media screen and (min-width: 100px){
.wwa .box-menu{
	margin-right: 4.5%;
}
}

/*ボックスメニューの枠線を消す*/
.box-menu{
box-shadow:none;
}

/*ウィジェット画像を中央寄せ*/
.widget_media_image {
text-align: center;
}

/*recapthaを非表示に*/
.grecaptcha-badge { visibility: hidden; }

/* 見出しデザインのリセット */
.article h2,
.article h3 {
    background-color: transparent; /* 背景色を透明に */
    border: none; /* 枠線なし */
    border-radius: 0; /* 角の丸みなし */
}

/*背景をずらしたデザイン*/
.article h2 {
	position: relative;
	border: 1px solid #333;/*枠線*/
	color:#333;/*文字色（黒）*/
	font-size: 32px;/*文字の大きさを34pxに*/
}
.article h2:after {
	content: '';
	background: #a3c6cc;
	width: calc(100% + 1px);
	height: calc(100% + 1px);
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: -1;
}

.article h3{
 	padding: 0.3em 0;/*内側余白調整*/
       border-bottom: double 7px #a3c6cc; /*二重線・太さ・色*/
       color:#333;/*文字色（黒）*/
	   font-size: 28px;/*文字の大きさを24pxに*/
}


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

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

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