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

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

/* ヘッダー */

.header .header-in {
    min-height: 67px;
}

.logo-image {
    padding: 0;
    margin-left: 0;
    margin-top: .6em;
    margin-bottom: 1em;
    max-height: 40px;
}

/* ヘッダーメニュー */

.navi .item-label, .navi .item-description {
	font-size: 14px;
}

.navi-in > ul li {
    width: 120px;
}


#menu-item-61 > a > div > div,
#menu-item-62 > a > div > div,
#menu-item-63 > a > div > div {	
  padding-bottom: 5px;
  position: relative;
}
#menu-item-61 > a > div > div::before,
#menu-item-62 > a > div > div::before,
#menu-item-63 > a > div > div::before{
  background: #2f4f4f;
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform-origin: right top;
  transform: scale(0, 1);
  transition: transform .3s;
}
#menu-item-61 > a > div > div:hover::before,
#menu-item-62 > a > div > div:hover::before,
#menu-item-63 > a > div > div:hover::before{
  transform-origin: left top;
  transform: scale(1, 1);
}


/* カテゴリ */
.cat-link, .cat-label {
    background-color: #e3ebf2;
    color: #2b4257;
	border-top-right-radius: 7px;

}

/* プロフィール */

/* プロフィール全体 */
.nwa .author-box {
	border: none;
	padding: 0 20px;
}

/* アイコン */
.nwa .author-box .author-thumb{
	width: 110px;
}
.nwa .author-box .author-thumb img{
	box-shadow: 0 1px 3px rgba(0,0,0,.18);
	border-radius: 7px;
}

/* 下側 */
.nwa .author-box .author-content {
	padding: 1em 0;
}

/* 名前 */
.author-box .author-name {
	margin-bottom: 1em;
}
.author-box .author-content .author-name a{
	color: #1f1f1f; /* リンク色にしない */
	font-size: 1.2em;
	font-weight: normal; /* 太字にしない */
	text-decoration: none; /* 下線をなくす */
	letter-spacing: 0.2em; /* 字間を広く */
}

/* プロフィール文 */
.author-description{
	margin-bottom: 16px;
}
.author-description p{
	margin: 0 0 0.5em 0;
	text-align: center;
	line-height: 1.5;
}

.author-box p {
    margin-top: 1.5em;
    line-height: 1.8;
    font-size: 14px;
	color: #5f5f5f;
}

.author-box {
	border-radius: 16px;
}

/* サイドバー */

aside {										/* サイドバーの色と余白*/
    background: transparent;
    padding: 2em;
}

#toc-2{
	padding:1em;
}

.widget_block ul li a {
    padding: 5px;
    font-size: 14px;
    background: #2f4f4f;
    color: #fcfcfc;
    border-radius: 10px 0 10px 0;
    text-align: center;
}

.sidebar {									/* サイドバーの各項目*/
    padding: 0;
    border: none;
    background: transparent;
}

.sidebar h2, .sidebar h3{
    color: #1f1f1f;
    font-size: 14px;
    text-align: center;
    background-color: transparent;
    border-bottom: 1px dashed #2f4f4f;
}


/* 目次 */

.toc {											/* 目次全体 */
    padding: 0 0 1em 0;
    border: 2px solid whitesmoke;
    border-top-left-radius: 7px;
    border-top-right-radius: 7px;
    width: 90%;
}

.toc-title {									/* 目次タイトル（色や丸み） */
    background: #f5f5f5;
    color: #292929;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.font-awesome-5 .toc-title::before {			/* 目次タイトル（アイコン追加） */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
.toc-title::before {
    content: "\f0ca";
    margin-right: .5em;
    padding: .3em;
}

.font-awesome-5 .toc-list > li a::before {						/* 目次リスト（アイコン追加） */
	font-family: "Font Awesome 5 Free";
    font-weight: 900;
	font-size: .8em;
}

ul.toc-list > li a::before {						/* 目次リスト（アイコン追加） */
	content : "\f04b";
	margin-right: 7px;
}


.toc-list.open {								/* 目次リスト（左右の空白） */
    padding: 0 2em;
}

.article ul li {								/* 目次リスト（各行下の余白） */
	margin: 1em 0;
}

.toc-list > li a::before {						/* 目次リストh1（アイコン） */
    counter-increment: item;
    content: counter(item)'';
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    background: white;
    color: #545454;
    border-radius: 50%;
    margin-right: .5em;
}


.toc-list > li li a::before {						/* 目次リストh2以降（アイコン） */
	content: "";
	width: 7px;
	height: 7px;
	left: -2px;
	display: inline-block;
	border-radius: 50%;
	background: #2f4f4f;							/*アイコンカラー*/
	position: relative;
	margin-bottom: 2px;
}

.toc-list > li li li a::before {						/* 目次リストh3以降（アイコン） */
	content: "";
	width: 7px;
	height: 7px;
	left: -2px;
	display: inline-block;
	border-radius: 50%;
	background: #ffffff;							/*アイコンカラー*/
	position: relative;
	margin-bottom: 2px;
}

.toc-list > li a {									/* 目次リストh2（文字の太さやカラー） */
	font-weight: bold;
	display:block;
    color: #545454;
}

.toc-list > li li a {								/* 目次リストh3以降（文字の太さやカラー） */
	font-weight: normal;
	font-size: 95%;
    color: #545454;
	margin-left: 2em;
}

/* タイトル */
header.article-header.entry-header {
    text-align: center;
    margin-bottom: 3em;
}

/* h1 */
.article-header h1 {
    position: static;
    font-size: 1.4em;
    color: #333;
    background-color: #fff;
    line-height: 1.8em;
    text-shadow: none;
    margin: 0;
    padding: 1.5em .95em 1.1em;
}

/* h2 */
.article h2 {
    line-height: 2;
    background-color: #f6f6f6;
    font-size: 24px;
    color: #333;
    border-left: solid 13px #2f4f4f;
    padding: .8em;
    margin-top: 70px;
    margin-bottom: 2em;
}

/* h3 */
.article h3 {
    line-height: 2;
    font-size: 20px;
    border-bottom: 1px solid #2f4f4f;
    border-left: 10px solid #2f4f4f;
    border-top: none;
    border-right: none;
	padding: .4em .8em;
    margin-top: 90px;
}

/* h4 */
.article h4 {
    line-height: 2;
    font-size: 18px;
    border-bottom: 1px solid #2f4f4f;
    border-left: none;
    border-top: none;
    border-right: none;
	padding: .4em .8em;
    margin-top: 30px;
}

/* SNS, 関連記事, コメント */

.sns-share-message, .sns-follow-message, span.related-entry-main-heading.main-caption, .comment-title {　/* 項目の周囲の空白 */
    margin: 20px 0 15px 0;
}

.sns-share-message, span.related-entry-main-heading.main-caption, .comment-title  {	/* cocoon 上での設定無効化および中央位置 */
    font-size: 0;
    text-align: center;
    display: block;
}

.sns-share-message::before {								/* SNSのシェア */
    content: "SHARE";
    font-size: 16px;
    font-family: sans-serif;
    font-weight: 100;
}

span.related-entry-main-heading.main-caption::before {		/* 関連記事 */
    content: "MORE";
	font-size: 16px;
    font-family: sans-serif;
    font-weight: 100;
}

.comment-title::before {									/* コメント */
    content: "COMMENTS";
	font-size: 16px;
    font-family: sans-serif;
    font-weight: 100;
}

.sns-share-message::before, span.related-entry-main-heading.main-caption::before, .comment-title::before {    /* 項目の形や色 */
	letter-spacing: .3em;
    border-radius: 20px;
    border: 0;
    padding: 0;
    background-color: #3f5569;
    color: #fff;
    display: inline-block;
    width: 40%;
}



.pagination-next-link:hover, .comment-btn {				    /* コメントの入力欄カスタム */
    background-color: #f7f7f7;
    transition: 0.3s;
}

.comment-btn {			    								/* コメントの入力欄カスタム */
    background-color: whitesmoke;
    border: none;
    color: #545454;
    border-radius: 30px;
    display: block;
    font-size: 15px;
}


/* 非表示 */

.footer-meta {		/* SNSシェア下のプロフィール */
    display: none;
}

.nwa .author-box .sns-follow-buttons {		/* プロフィール欄のSNS*/
    display: none;
}

.post-2 .date-tags,
.post-3 .date-tags,
.post-4 .date-tags 
{
display: none;
}

/************************************/

/* アイキャッチ画像 */
.eye-catch{
	 box-shadow:5px 5px 10px #b2b2b2;
}

/************************************/

/* 投稿日の位置変更 */

.article-header{
	display: flex;
	flex-direction: column;
}

.article-header .entry-title {
	order:1;
}

.article-header .eye-catch-wrap {
	order:3;
}

.article-header .date-tags {
	order:2;
}

.entry-date{
	margin-right: 4em;	
}

.post-date {
	display: none;
}

/************************************/

/* リスト */

/* リストの点なし*/
/* none-list-style */
.wp-block-list.none-list-style{
  list-style: none;	
}

/* ラベンダー色のシャドウ付き背景 */
/* shadow-style */
ul.wp-block-list.shadow-style, ol.wp-block-list.shadow-style {
	background: #e6e6fa;/*ラベンダー*/
	border-radius :8px;
	box-shadow :0px 0px 5px silver;
	padding: 0.5em 0.5em 0.5em 3em;
}

ul.wp-block-list.shadow-style li, ol.wp-block-list.shadow-style li {
	line-height: 1.5;
	padding: 0.5em 0;
}


/* シェブロンマーク */
/* marking */
ul.wp-block-list.marking {
	border: solid 2px #2f4f4f;
	border-radius: 5px;
	padding: 0.5em 1em 0.5em 3em;
	position: static;
}

ul.wp-block-list.marking.noflame {
	border: none;
}

ul.wp-block-list.marking > li {
	line-height: 1.5;
	padding: 0.5em 0;
	list-style-type: none!important;
}

.font-awesome-5 ul.wp-block-list.marking > li:before  {			/* 目次タイトル（アイコン追加） */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

ul.wp-block-list.marking > li:before {
	content : "\f138";
	position: absolute;
	left : 3em;/*左端からのアイコンまでの距離*/
	color: #2f4f4f;/*アイコン色*/
}

/* marking-nonflame */

ul.wp-block-list.marking-nonflame {
	padding: 0.5em 1em 0.5em 3em;
	position: static;
}

ul.wp-block-list.marking-nonflame > li {	
	list-style-type: none!important;
}

.font-awesome-5 ul.wp-block-list.marking-nonflame > li:before  {			/* 目次タイトル（アイコン追加） */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

ul.wp-block-list.marking-nonflame > li:before {
	content : "\f138";
	position: absolute;
	left : 3em;/*左端からのアイコンまでの距離*/
	color: #2f4f4f;/*アイコン色*/
}



/* 点線 */
/* dashed-silver */
ul.wp-block-list.dashed-silver > li {
	line-height: 1.5;
	padding: 0em 0 0.5em 1.4em;
	border-bottom: dashed 1px silver;
	list-style-type: none!important;
}

/* dashed-silver-simple */
ul.wp-block-list.dashed-silver-simple > li {
	padding: 0em 0 0.5em 1.4em;
	border-bottom: dashed 1px silver;
}



/************************************/

/* テーブル */

/* pro.con用*/
/* procon-style */

.wp-block-table.procon-style{
  max-width: 900px;
  width: 100%;
  margin: 15px auto;
  background: #FFF;
  text-align: center;
  font-size: 14px;
  display: block;
  white-space: normal;
  color: #333;
  border: none;
}

.wp-block-table.procon-style table{
  border-collapse: separate;
}


.wp-block-table.procon-style td, 
.wp-block-table.procon-style th
{
	padding: 1.5em 1.0em;
  	line-height: 1.25em;
	border: none;
  	position: relative;
  	text-align: center;
  	vertical-align: middle;
}

.wp-block-table.procon-style td
{
  border-bottom: 1px solid #2f4f4f;	
}

.wp-block-table.procon-style tr td:first-child {
  position: sticky;
  left: 0;
  background: #FFF;
  z-index: 2;	
}

.wp-block-table.procon-style tr th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
}

.wp-block-table.procon-style tr td:nth-child(2) {
  background: #FAFAFA;
}

.wp-block-table.procon-style tr td:nth-child(3) {
  background: #F3F3F3;
}

.wp-block-table.procon-style tr th {
  padding: .8em 2em;
  background: #2f4f4f;
  color: #fff;
  width: 100%;
  position: relative;
}


/************************************/

/* 記事内プロフィール */

/* 2カラム用*/
/* test-2column */

.me-info-2column li{
	font-size: 12px;
	margin: 0em!important
}

.me-info-2column p{
	font-size: 12px;
	margin-bottom: 0em;
}

.me-info-2column ul{
	margin-bottom:1.2em!important;
}


/************************************/

/* ブログカード	 */


/* 内部ブログカードのURLを非表示 */
.internal-blogcard-site {
    display: none;
}

/* 内部ブログカード 説明文を非表示 */
.internal-blogcard .blogcard-snippet{
    display: none;
}

/* 内部ブログカード　続きを読む */

.internal-blogcard::after {
	position: absolute; 
	content: "Read \f138"; /*表示文字＆アイコン*/
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: #fff; /*文字の色*/
	background-color: #2F4F4F; /*背景色#00897b;*/
	padding: 2px 1em;
	bottom: 8px;
	right: 24px;
	font-size: 14px; /*文字のサイズ*/

}

.internal-blogcard{
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /*ボックスシャドウ*/
}

.internal-blogcard::after:hover{
  background: #fff;
  color: #ff701e;	
}

.blogcard:hover {
    transform: translateY(-5px);
}

.blogcard-title {
	font-size : 14px;
	padding: 0.3em;
}



@media(max-width:480px) {

  table.nomad_table tr td,
  table.nomad_table tr th {
    padding: 1em !important;
    font-size: 12px !important;
  }

table.nomad_table tr th {
    padding: .8em 2em !important;
    font-size: 13px !important;
  }

table.nomad_table .table_img {
    max-width: 45px;
    margin: 0 auto 10px auto;
  }

table.nomad_table a {
    font-size: 10px !important;
  }

}

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

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
	.article ul, .article ol {
        padding-left: 13px;
	}
}

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