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

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

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

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

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

/*フロント固定ページのタイトルを非表示*/
.front-top-page #main .entry-title{
  display: none;
}
/*固定ページの日付を非表示にする*/
.post-22 .date-tags {
  display: none;
}

/*特定ページのシェア・フォローボタン非表示*/
.page-id-22 .sns-share,
.page-id-22 .sns-follow {
    display: none;
}
.page-id-22 .author-info{
display: none;
}

body {
    background-color: #e8e6e3;
}
.header-container, .main, .sidebar, .footer {
    background-color: #e8e6e3;  
　　color:#555555;
}
.site-name-text-link {
    color: #555555;  
}
.a-wrap {
    color: #555555;
}
.site-name-text-link {
    color: #555555;   
}
.sidebar {
    background-color: #e8e6e3;
}
.widget_recent_entries ul li a, 
.widget_categories ul li a, 
.widget_archive ul li a, 
.widget_pages ul li a, 
.widget_meta ul li a, 
.widget_rss ul li a, 
.widget_nav_menu ul li a {
 color: #555555;
}
#navi ul li a:hover{
  color: #5FB3F5 !important;
}
#navi ul li a:before{
  background:#5FB3F5 !important;
}
#navi ul,#navi{
  background-color:#e8e6e3;
}
/* フォントの色 */
body{
　color:#555555 !important;
}
/************************************************
 トップへ戻るボタン
*************************************************/

.go-to-top {
  right: 20px; /*右から20px*/
  bottom: 55px; /*下から55px*/
}

.go-to-top-button {
  border-radius: 50%; /*丸くする*/
  width: 60px; /*横幅*/
  height: 60px; /*高さ*/
  font-size: 30px; /*アイコンフォントのサイズ*/
  opacity:0.9; /*透明度*/
  box-shadow: 2px 2px 4px rgba(0, 0, 0, .2); /*影*/
}

/*ホバー時*/
.go-to-top-button:hover {
  color: #333; /*アイコンフォントの色*/
  background-color:#ebf0f5; /*背景色*/
}
.entry-card-content h2{
height:72px;
}
.page .date-tags {
display: none;
}
/* コメント欄の項目を非表示 */
.comment-form-email {display: none;}
.comment-form-url {display: none;}
.form-allowed-tags {display: none;}
.comment-form-email, .comment-form-url, .comment-notes {
  display: none;
}
#main .masonry-brick{
  height: 500px;
}

/*サイドバー見出しカスタマイズ*/
 .sidebar h3 {
     color:black;
     background: none; /*背景色を解除*/
     font-size: 16px; /*文字サイズを小さく*/
 }
 .sidebar h3:first-letter {
     font-size: 1.5em; /*最初の文字を1.5文字分に大きく*/
 }
 .sidebar h3:after { /*グラデーションのラインを引く*/
     content:"";
     display:block;
     height:2.5px;
     width:100%;
     background: -webkit-linear-gradient(left, #454747 0%,#9da8a8 82%,#ccd9d9 100%);
     background: linear-gradient(to right, #454747 0%,#9da8a8 82%,#ccd9d9 100%);
 }
.cat-label {
 display: none;
 }

/* アピールエリア---------------------------------------------- *
/*全体*/
.appeal-in {
    min-height: 800px;/*パソコンでの高さ調整*/
	min-width:100%;/*幅を最大に*/	
	background-color:rgba(250,250,250,.5);/*背景色、白を透過させる*/
}

/*480px以下*/
@media screen and (max-width: 480px){
	.appeal-in {
		min-height: 600px!important;/*スマホでの高さ調整*/
	}
}

/*コンテンツエリア*/
.appeal-content {
width:100%;/*幅を最大に*/
padding:2em 1em;/*内側余白調整*/
background-color:transparent;/*コンテンツエリアの背景無効化*/
}

/*タイトル*/
.appeal-title{
padding-bottom:1.5em;/*タイトル下の余白*/
font-weight:normal;/*文字の太さ*/
font-size:1.1em;/*タイトル文字の大きさ*/
}

/*本文*/
.appeal-message {
 font-size: 1em;/*本文文字の大きさ*/
}
/*480px以下*/
@media screen and (max-width: 480px){
.appeal-message {
 font-size: .8em;/*スマホ表示する文字の大きさ*/
}	
}

/*ボタン*/
.appeal-button{
background-color:transparent!important;/*ボタンの背景色無効化*/
font-weight:normal;/*文字の太さ*/
color: #777; /*ボタン部分文字とアイコンの色*/
}

/*アイコンを追加*/
.appeal-button:before{
display:block;
font-family: "Font Awesome 5 Free";
font-weight:bold;
content: "\f103";/*アイコン指定*/
font-size: 2em;/*アイコンの大きさ*/
animation: move 1s infinite alternate ease-in-out;/*以下、アイコンを動かすアニメーション*/
}

@keyframes move{
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}

/*スムーズにスクロール*/
html { scroll-behavior: smooth;}

/****************************
スライドインメニューをカスタマイズ
****************************/
.navi-menu-content{
	left: auto;
	right: 0;
	background-color: rgba(210,228,245,0.8);
	transform: translateX(101%);
}

.menu-drawer a{
	font-size: 1.1em;/*文字の大きさ*/
	color: #555555;/*文字の色*/
	height: 3em;/*行の高さ*/
}

.menu-drawer a:hover{
	color: rgba(210,228,245,0.2);
	background-color: rgba(210,228,245,0.2);
}

/*グローバルナビメニュー マウスオーバーでアンダーライン*/
#navi .navi-in a:after{
position: absolute;/*線の位置を絶対配置に*/
content: "";/*文字はなし*/
left: 0px;/*線の位置*/
bottom: 1px;/*線の位置*/
height: 1px;/*線の高さ*/
width: 100%;/*幅いっぱいに線を引く*/
background: #1b68ae;/*線の色*/
transform: scale(0,1);/*マウスオーバーの前は線を消す*/
transition: 0.3s;/*線が0→100%になるまでの秒数*/
}

#navi .navi-in a:hover:after{
transform: scale(1);/*マウスオーバー後、線を100%出す*/
}


/*トップページカスマイズ***************************************/
.toppage{
padding:3em 0;/*内側余白（上下・左右）*/
}

/*見出し*/
div.title{
       margin:2rem 0;/*外側余白*/
	padding:0;/*内側余白*/
	text-align:center;/*中央寄せ*/
	font-size:2.5rem;/*文字の大きさ*/
	letter-spacing:1px;/*文字間の余白*/
	line-height:1.8;/*行の高さ*/
}


/***リンクボタン***/
.link-btn{
  display:block;/*ブロック要素にする*/
  margin:1em auto;/*外側余白*/
  padding: 0.7em 2.5em;/*内側余白*/
  text-align: center;/*中央寄せ*/
  text-decoration: none;/*文字装飾なし*/
  border:1px solid #ccc; /*枠線（太さ、種類、色）*/
  font-size:.9em;/*文字の大きさ*/
  color:#666;/*文字色*/
  width:250px;/*ボタンの幅*/
}


/************************************
****　本文下　関連記事
************************************/

.e-card-title {
font-weight: bold;
color:#555555;
}
.related-entry-card-content {
margin-left: 190px;
margin-right: 5px;
}
a.related-entry-card-wrap.a-wrap.border-element.cf:hover{
background-color: #fafafa;
transform: none;
transition: all 200ms;
}
.related-entry-card .cat-label{
display:none;
}
@media screen and (max-width: 480px){
.related-entry-card-thumb {
margin-right: 1em;
}
.e-card-title {
font-size: 15px;
line-height: 1.8;
}
article.related-entry-card.e-card.cf {
margin-left: .5em;
margin-right: .3em;
}
}
aside#related-entries.related-entries.rect-entry-card{
margin-bottom: 0;
}

/************************************
****　目次
************************************/
.toc-title{
font-weight:bold;
}
.toc-title::after {
color:#337ab7;
}
.toc-list > li a {
font-weight: bold;
display:block;
margin-top:10px;
margin-left: 10px;
}
.toc-list > li a::before {
font-family: "Font Awesome 5 Free";
content : "\f144";
margin-right: 7px;
}
.toc-list > li li a {
font-weight: normal;
font-size: 95%;
margin-top:0;
margin-left: 2em;
}
.toc-list > li li a::before {
content: "";
width: 7px;
height: 7px;
left: -2px;
display: inline-block;
border-radius: 50%;
background: #555555;/*点の色の変更*/
position: relative;
margin-bottom: 2px;
}
@media (max-width:880px){
.toc-list > li a {
margin-left: -10px;
}
.toc-list > li li a {
margin-left: -2em;
}
.toc-list > li li a::before {
left: 3px;
margin-bottom:1px;
}
}
.toc a:hover {
color: #333333;
text-decoration: underline;
}

.pager-post-navi {/*ページ送りナビ*/
background-color: #e8e6e3;/*背景色*/
border: 2px dashed #ccc;/*枠の大きさ、スタイル、色*/
}
.pager-post-navi a{/*ページ送りナビ*/
border-bottom: 3px dashed #e8e6e3;/*枠の大きさ、スタイル、色*/
}
.pager-post-navi a {/*ページ送りナビ*/
color: #555555;/*文字色*/
line-height: 1.7;/*行間*/
font-size: 1em;/*文字の大きさ*/
font-weight: bold;/*文字の太さ*/
}

/**************************
 タブ切り替え
***************************/

/* 親要素で囲みタブの横並びのためflexを指定*/
.tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:5px 0;
}


/*タブ(label)のスタイル*/
.tab-label {
  border:1px solid #ccc;
  text-align: center;
  padding: .5em 1em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  flex: 1;
}

/*タブの間に余白をあける*/
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}

/* タブのコンテンツ部分*/
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}

/* アクティブなタブ、選択されていることが分かるようにチェックされているradioボタンの隣にあるlabelの背景色を変える*/
.tab-switch:checked+.tab-label {
  color:#fff;/*文字色*/
  background-color:#b5b5ae;/*タブの背景色*/
  border:1px solid #b5b5ae;/*タブの枠線　太さ　種類　色*/
}

/*吹き出し部分のスタイル*/
.tab-switch:checked+.tab-label:after{
	content: "";
	position: absolute;
	top: 100%;
	left: calc(50% + 5px);
	margin-left: -15px;
	border: 10px solid transparent;
       border-top:10px solid #b5b5ae;/*タブの吹き出し部分*/
	width: 0;
	height: 0;
}

.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 20px 0 0 0;
  opacity: 1;
  transition: .5s opacity;
}

/* radioボタンは仕組みだけ利用するため非表示に、トップページヘッダーまわり非表示*/
.tab-switch,
.home .article-header,
.home .article-footer{
  display: none;
}

/* 新着記事サムネイル(大)を横並びにする---------------------------------------------- */
.widget-entry-cards.card-large-image .a-wrap {
  max-width: 100%;/*カード幅調整*/
}

.new-entry-cards.large-thumb {
    display: flex;
    flex-wrap: wrap;
}

.new-entry-cards.large-thumb a {
    width: 33.333%;
}

/*768px以下*/
@media screen and (max-width: 768px){
  .new-entry-cards.large-thumb a {
      width: 50%;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .new-entry-cards.large-thumb a {
      width: 100%;
  }
} 

/*カテゴリーごとの記事内の新着記事を横並びにする*/
.cate .new-entry-cards.large-thumb a{
 width: 33.333%;
}

/*768px以下*/
@media screen and (max-width: 768px){
  .new-entry-cards.large-thumb a {
      width: 50%;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .new-entry-cards.large-thumb a {
      width: 100%;
  }
} 

/*ブログカード*/
 .a-wrap:hover {
 background-color: 
#d4d4d2
;/*オンマウス時の背景色*/
 transform: translateY(-2px);
 box-shadow: 2px 2px 6px 0 #cccccc;
 }

h1 {
  position: relative;
  padding: 0.25em 0;
}
h1:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(left, #454747 0%,#9da8a8 82%,#ccd9d9 100%);
     background: linear-gradient(to right, #454747 0%,#9da8a8 82%,#ccd9d9 100%);
}

/* 見出しのデザインリセット */
/*H2 */
.entry-content h2{
border:none;
background:none;
padding: 0;
}

/* H3 */
.entry-content h3{
border:none;
background:none;
padding: 0;
}

/* H4 */
.entry-content h4{
border:none;
background:none;
padding: 0;
}

/* H5 */
.entry-content h5{
border:none;
background:none;
padding: 0;
}

/* H6 */
.entry-content h6{
border:none;
background:none;
padding: 0;
}


/* 見出し */
.single-post .entry-content h2,
.single-post .entry-content h3 {
	position: relative;
	padding-bottom: 6px;
}

.single-post .entry-content h2:before,
.single-post .entry-content h3:before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	background-position: center;
	background-repeat: no-repeat;
}

.single-post .entry-content h2:before {
	height: 3px;
	background-image: -webkit-linear-gradient(left,gray,white 90%);
	background-image: linear-gradient(to right,gray,white 90%);
}

.single-post .entry-content h3:before {
	height: 1px;
	background-image: -webkit-linear-gradient(left,gray,white 70%);
	background-image: linear-gradient(to right,gray,white 70%);
}

.pagination-next-link{
background: #e8e6e3; /*背景色*/
color:#555555; /*文字色*/
font-weight: bold; /*太字*/
}
.pagination-next-link a:hover{ /*オンマウス時*/
background: #fff;
color:#839b5c;
}
.pagination-next-link{border-radius: 8px;}

.page-numbers{
border-radius: 50%; /*角丸*/
color:#555555; /*文字色*/
font-weight: bold; /*太字*/
}
.pagination a:hover { /*オンマウス時*/
background: #e1eaeb;
color:#fff;
}

.box-menu{
	background: #d9d6d2;
}

.nwa .box-menu {
	width: 47%;
	margin: 0.5%;
}

.nwa .box-menu-icon img{
	transition:0.3s all;
}

.nwa .box-menu-icon img:hover{
	transform: scale(1.1,1.1);
	transition: 0.8s all;
}

.box-menu:hover{
	box-shadow: inset 2px 2px 0 0 #99e9f2,
	2px 2px 0 0 #99e9f2,
	2px 0 0 0 #99e9f2,
	0 2px 0 0 #99e9f2;
}
.cat-label {
display: none;
}
.box-menu{
border: 1px solid #F8F8F8;
border-radius: 4px;
padding: 0;
min-height: 0;
}

.box-menu-icon img{
transition:0.3s all;
}

.box-menu-icon img:hover{
transform:scale(1.2,1.2);
transition:0.8s all;
}

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

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

/*– 目次の中央上下揃え –*/
#toc_container {
margin: 5.4em auto 3.2em;
margin-left: auto;
margin-right: auto;
}