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

/************************************
** 子テーマ用のスタイルを書く
************************************/



/* 見出しのデザインリセット */
/*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;
}

/* 見出しのデザイン設定 */
/* H2 */
.entry-content h2{
color: #333333; /* 文字色 */
font-size: 2.0em; /* 文字サイズ */
background-color: #DEB887; /* 背景色 */
padding-top:20px; /* 文字と上部の間隔 */
padding-left:10px;/* 文字と左線の間隔 */
padding-bottom:20px;/* 文字と下部の間隔 */
border-left: solid 10px #800000; /* 左側に実線・色*/
border-right: solid 10px #800000; /* 右側に実線・色*/
}

/* H3 */
.entry-content h3{
color: #000; /* 文字色 */
font-size: 1.5em; /* 文字サイズ */
background-color: #ebebeb;/* 背景色 */
padding: 10px;
border-left: solid 10px #800000; /* 左側に実線・色*/
}

/* H4 */
.entry-content h4{
color: #000; /* 文字色 */
font-size: 1.2em; /* 文字サイズ */
padding: 10px;
border-top: solid 3px #800000;/* 上側に実線・色 */
border-bottom: solid 3px #800000;/* 下側に実線・色*/
}

/* H5 */
.entry-content h5{
color: #000; /* 文字色 */
font-size: 1.0em; /* 文字サイズ */
padding: 10px;
border-bottom: dotted 3px #800000;/* 下側に点線・色*/
}

/* H6 */
.entry-content h6{
color: #000; /* 文字色 */
font-size: 1.0em; /* 文字サイズ */
padding: 5px;
border-left: solid 7px #800000; /* 左側に実線・色*/
}



/*目次を中央に表示*/
#toc_container {
  margin-left: auto;
  margin-right: auto;
}

/*---SNSボタンを丸くする---*/
#main .button-caption {
	display: none; /*キャプション非表示*/
}

/*SNSシェアボタン*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/*SNSフォローボタン*/
.sns-follow-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-follow-buttons {
	justify-content: center; /*中央寄せ*/
}
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	
/*モバイルでの目次の非表示（目次は記事の一番下に表示されるから、不要*/
	#sidebar .widget_toc{
  display: none;
}
}

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

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



/*サイドバーデザイン*/
 h3.widget-sidebar-title {
	 font-size: 1.3em; /* 文字サイズ */
    color: #333333;                      /* 文字色 */
    background: none;                 /* 背景色 */
    padding: 3em 0.2em 0em 0.2em;      /* [上][右][下][左]の余白 */
    border-top: none;                    /* 上枠 */
    border-right: none;                  /* 右枠 */
    border-bottom: solid 5px #800000;    /* 下枠 */
    border-left: none;                   /* 左枠 */
  }


	
/*サイドバーのカテゴリーデザイン*/

.widget_categories ul li a { /*親カテゴリ用のコード*/
    color: #333;
    text-decoration: none;
    padding: 6px 0;
    display: block;
    padding-right: 4px;
    padding-left: 4px;
    border-top: 1px dotted #ccc; /*上部にボーダーを引く*/
    font-size: 16px;
}
.widget_categories ul li a::before { /*親カテゴリのアイコン*/
    font-family: FontAwesome;
    content: "\f0da";
    padding-right: 10px;
}
.widget_categories > ul > li > a:first-child { 
    border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}
.widget_categories > ul > li > a:last-child {
    border-bottom: 1px dotted #ccc; /*最後の親カテゴリは下部ボーダーを引く*/
}
.widget_categories ul li a .post-count { /*記事数用のコード*/
    display: block;
    float: right;
    background: #ededed;
    padding: 0 1em;
    font-size: 14px;
    margin-top: .2em;
    border-radius: 4px;
}
.widget_categories ul li a:hover { /*親子共通マウスホバー時*/
    background: none;
    transition: 0.5s;
    color: #800000;
	font-weight:  bold;
}
.widget_categories ul li a:hover .post-count { /*記事数のマウスホバー時*/
    background: #800000;
    color: #fff;
    transition: 0.5s;
}
.widget_categories ul li ul { /*子カテゴリのボックス*/
    border-bottom: 1px dotted #ccc;
}
.widget_categories ul li ul li a { /*子カテゴリ用のコード*/
    color: #333;
    text-decoration: none;
    padding: 0 4px 4px 4px;
    display: block;
    border: none;
}
.widget_categories ul li ul li a::before { /*子カテゴリのアイコン*/
    font-family: FontAwesome;
    content: "・";
    padding: 0;
}



/*---------------------------------
目次の文字間隔を調整＆枠線の撤廃
--------------------------------*/

#toc_container p.toc_title+ul.toc_list>li {
 margin-bottom: 0.1em;
 padding-bottom: 0.4em;
}

#toc_container p.toc_title+ul.toc_list {
    margin-top: 1em;
    margin-right: 0.4em;
}

#toc_container {
 border: none !important;
 border-radius: 9px;
 margin-top: 30px;
}

#toc_container li {
 padding-left: 1em !important;
 line-height: 1.8em;
}

#toc_container ul ul {
 margin-bottom: 10px;
}



/*星のスタイル*/
.rating-star{
  color: #f5bc55;
  font-size: 1.2em;
}
/*数字のスタイル*/
.rating-number{
  color: #333;
  font-size: 0.9em;
  margin-left: 0.4em;
}
	
	
	
/* モバイルトップメニュー横並びにする */
@media screen and (max-width: 768px){
	ul.menu-mobile{
		overflow-x: auto;
		overflow-y: hidden;
		display: flex !important;
		flex-wrap: nowrap;
		font-size: 14px;
		justify-content: flex-start;
		padding: 0 1em;
		-webkit-overflow-scrolling: touch;
		position: relative;
	}

	ul.menu-mobile > li{
		padding-right: 1em;
		white-space: nowrap;
	}
	ul.menu-mobile　.item-label{
		white-space: nowrap;
		font-size: 14px;
	}
}



/* サイドバー目次 */
#sidebar .toc{
margin-top: 1em;/*枠の上の余白*/
margin-bottom: 2em;/*枠の下の余白*/
padding: 1em 1.5em;/*枠の中の余白*/
border: 3px solid #800000;/*枠線の太さ・種類・色*/
border-radius: 10px;/*枠線の角の丸み*/
}

/* サイドバー目次javaとセット */
.toc li .current {/*現在位置*/
color: #333;/*文字色*/
padding: 6px 6px 6px;
background-color: #DEB887;/*背景色*/
border-radius: 2px;/*枠線の角の丸み*/
}



/* 目次の位置の調整　空間をあける */
.sidebar-scroll {
  top: 5%;
}



/* 目次の見出し部分のカスタマイズ */
.sidebar-scroll .widget_toc .widget-title {
border-bottom: solid 5px #800000;
	text-align: center;
	background: white;
padding: 3em 0.2em 0em 0.2em;      /* [上][右][下][左]の余白 */
	font-size: 1.3em; /* 文字サイズ */
}


/* top-pageの日付を非表示 */
.post-2813 .date-tags {
display: none;
}



/*-------------------------------------
ヘッダーとグローバルナビのデザインについて
--------------------------------------*/

#header-container .navi-in > ul li {
   height: auto;
   font-weight: 600;
   line-height:1.3;
}

#header-container #navi{
   background:#FFFFFF; /* 背景色 */
}
#header-container #navi a{
   color:#333; /* 文字色 */
   padding:0.8em 1em;
}
#header-container #navi a:hover{
   color:#333; /* マウスホバー時の文字色 */
}

/*cocoonデフォルトのカーソルオン時の色変化をさせない（白のまま）*/
#navi .navi-in a:hover{
	background: #FFFFFF;
	transition: all 0.5s ease;
}

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


#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){
   .navi-in > .menu-header{
  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;
   }
}


/*-------------------------------------
記事下のSNSシェアボタンとSNSフォローボタン編集
シェアボタン文字の非表示（アイコンのみ）
--------------------------------------*/
/*---SNSボタンを丸くする---*/
#main .button-caption {
	display: none; /*キャプション非表示*/
}

/*SNSシェアボタン*/
.sns-share-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-share-buttons {
	flex-wrap: nowrap; /*折り返さない*/
	justify-content: center; /*中央寄せ*/
}
.sns-share-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-share a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}

/*SNSフォローボタン*/
.sns-follow-message{
	font-weight: bold; /*太字*/
	color: #875d5b; /*文字色*/
}
.sns-follow-buttons {
	justify-content: center; /*中央寄せ*/
}
.sns-follow-buttons a {
	border-radius: 50%; /*丸くする*/
	font-size: 20px; /*アイコンのサイズ*/
	margin: 0 10px; /*ボタン同士の間隔*/
}
#main .sns-follow a {
	width: 40px; /*ボタンの横幅*/
	height: 40px; /*ボタンの高さ*/
}





/* タブ切り替え 新着記事-人気記事 開始 */
.tab-wrap {
	display: flex;
	flex-wrap: wrap;　　/* nowrapを試すのもあり？ */
	overflow: hidden;
	padding: 0 0 20px;
}

.tab-label {
	color: Gray;
	cursor: pointer;
	flex: 1;
	font-weight: bold;
	order: -1;
	padding: 12px 24px;
	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);
}

/*要素がチェックされたりONの状態のとき */
.tab-switch:checked + .tab-label { 
	color: #333333;
}

.tab-label::after {
	background: #800000;
	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-wrap2 {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	padding: 0 0 20px;
}

.tab-label2 {
	color: Gray;
	cursor: pointer;
	flex: 1;
	font-weight: bold;
	order: -1;
	padding-bottom: 1.5%;
	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;
}

@media screen and (max-width: 500px){
	.tab-label2 {
		color: Gray;
		cursor: pointer;
		flex: 1;
		font-weight: bold;
		font-size: 0.8em;
		order: -1;
		padding: 12px 24px;
		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;
	}
}

@media screen and (max-width: 350px){
	.tab-label2 {
		color: Gray;
		cursor: pointer;
		flex: 1;
		font-weight: bold;
		font-size: 0.5em;
		order: -1;
		padding: 12px 24px;
		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-label2:hover {
	background: rgba(100, 100, 100,.1);
}

/*要素がチェックされたりONの状態のとき */
.tab-switch2:checked + .tab-label2 { 
	color: #333333;
}

.tab-label2::after {
	background: #800000;
	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;
	*/
	transform: scale(1);
	transition-duration : 0.4s;
	width: 100%;
	z-index: 1;
}

.tab-switch2:checked ~ .tab-label2::after {
	/*transform: translateX(-100%);*/
	transform: scale(1);
}

.tab-switch2:checked + .tab-label2::after {
	opacity: 1;
	/*transform: translateX(0);*/
	transform: scale(1);
}

.tab-content2 {
	height:0;
	opacity:0;
	padding: 0 10px;
	pointer-events:none;
	transform: translateX(-30%);
	transition: transform .3s 80ms, opacity .3s 80ms;
	width: 100%;
}

.tab-switch2:checked ~ .tab-content2 {
	transform: translateX(30%);
}

.tab-switch2:checked + .tab-label2 + .tab-content2 {
	height: auto;
	opacity: 1;
	order: 1;
	pointer-events:auto;
	transform: translateX(0);
}

.tab-wrap2::after {
	content: '';
	height: 20px;
	order: -1;
	width: 100%;
}

.tab-switch2 {
	display: none;
}
/* タブ切り替え 新着記事-人気記事 終了 */










/*固定ページ（トップページカスタマイズ）t*/
/*フロント固定ページのタイトルを非表示*/
.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; }








/*ボックスデザインのcss*/
/*
<div class="box26">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章</p>
</div>
*/
.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #800000;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #800000;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}