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

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

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

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

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

/************************************
**　ヘッダーメニュー サブメニューの区切り線 濃い青
************************************/
}
.navi-in > ul{
justify-content:flex-start;
}
.navi-in > ul .sub-menu a {
padding: 0;
}
.sub-menu{/*サブメニュー*/
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
.sub-menu .caption-wrap {/*サブメニューを仕切る点線*/
border-top: dotted #19295a;
padding:0 0 0 2em;
margin:0;
}
.navi-in > ul .sub-menu a:hover {
transform: none!important;
}
div#header-container {/*ヘッダー下の影を非表示*/
box-shadow: none;
}
div.item-label{
font-weight:lighter;
font-size:13px;
}


/************************************
**　フッターメニュー クレジットの文字色変更 濃い青
************************************/
.source-org.copyright {
  color: #19295a; /*クレジットの文字色*/
}

/************************************
固定ページの日付を非表示にする
*************************************/
.post-1157 .date-tags {
  display: none;
}

/************************************
**　表を統一化 鮮やかな青
************************************/
table {
	border: 1px solid #ccc;
}
table th{
	padding: 10px;
	background: #2ca9e1; 
	color: #ffffff;
}
table td{
	border: 1px solid #ccc;
	background: #ffffff;
}
.td-editcolor {
	color: #ffffff;
	background-color: #2ca9e1;
}
.td-editcolortabbox {
	color: #ffffff;
	background-color: #2ca9e1;
}


/************************************
**　プロセスパイプライン 鮮やかな青 <div class="processpipeline">で呼び出す
************************************/
.processpipeline ol {
	list-style: none;
	counter-reset: no; 
	margin: 10px 0px; 
	padding-left: 2em;
}
.processpipeline li {
	position: relative; 
	line-height: 2em; 
	margin-bottom: 0.5em;
}
.processpipeline ol li::after {
	left: -2em; 
	top: 0.2em; 
	width: 25px; 
	height: 25px; 
	text-align: center; 
	line-height: 25px; 
	font-weight: normal; 
	display: inline-block; 
	white-space: nowrap; 
	position: absolute; 
	content: counter(no); 
	counter-increment: no;
	background: #2ca9e1; 
	color: #ffffff; 
	border-radius: 50%; 
}
.processpipeline ol li::before {
	left: -1.25em; 
	top: 1em; 
	height: calc(100%); 
	border-left-color: #2ca9e1; 
	border-left-width: 1px; 
	border-left-style: solid; 
	position: absolute; 
	z-index: 0; 
	content: "";
}
.processpipeline ol li:last-child::before {
	display: none;
}

/************************************
**　プロセス用 鮮やかな青
************************************/
.processtittle span{
	background: #2ca9e1; 
	padding: 6px 10px; 
	border-radius: 5px; 
	color: #ffffff; 
	font-weight: bold; 
	margin-left: 10px;
} 
.processbox {
	padding: 30px 15px 10px; 
	border-radius: 5px; border: 
	1px solid #2ca9e1; 
}
.processstr {
	font-size: 12px;
	color: #2ca9e1; 
}

/************************************
**　注釈用 鮮やかな青
************************************/
.pointtittle span{
	height: 12px;
	background: #2ca9e1; 
	padding: 6px 10px; 
	border-radius: 5px; 
	color: #ffff00; 
	font-weight: bold; 
	margin-left: 10px;
} 
.pointbox {
	padding: 30px 15px 10px; 
	border-radius: 5px; border: 
	2px solid #2ca9e1; 
	font-size: 16px;
}
.pointstr {
	font-size: 14px;
	color: #2ca9e1; 
}

/************************************
**　カテゴリラベル 鮮やかな青
************************************/
.cat-label {
	background: #2ca9e1; 
	border-color: #2ca9e1; 
	color: #ffffff; 
}

/************************************
**　　　　アピールエリア
************************************/
.appeal{
padding:.1em 0.2em;
box-shadow: 0px 1px 4px 0 rgba(0,0,0,.1);
}
div#appeal-in.appeal-in.wrap{
padding:0;
min-height:0px;
max-height:30px;
}
div.appeal-content{
padding:0;
}
.appeal-content{
background-color:#19295a; /*背景の色をここで変更します*/
margin:auto;
max-width:100%;
opacity:1;
line-height:1.6;
}
a.appeal-button {
color: #fff!important;
font-size:.85em;
padding:0 23em 0;
margin:0;
max-width:100%;
white-space: nowrap;
box-shadow: none;
}
@media screen and (max-width: 1023px){
a.appeal-button {
padding:0 18em 0 ;
}}
@media screen and (max-width: 834px){
a.appeal-button {
padding:0 13em 0 ;
}
}
@media screen and (max-width: 652px){
a.appeal-button {
padding:0 8em 0 ;
}}
@media screen and (max-width: 500px){
a.appeal-button {
padding:0 6em 0 ;
}}
@media screen and (max-width: 420px){
a.appeal-button {
padding:0 3em 0 ;
}}
.appeal-button:hover {
transform:none;
box-shadow: none;
}

#recommended {
background: #ededed;
}

/************************************
**　　　　ブログカード
************************************/
.bct-related .blogcard-label,/*関連記事*/
.bct-reference .blogcard-label,/*参考記事*/
.bct-reference-link .blogcard-label,/*参考リンク*/
.bct-popular .blogcard-label,/*人気記事*/
.bct-together .blogcard-label,/*あわせて読みたい*/
.bct-detail .blogcard-label,/*詳細はこちら*/
.bct-check .blogcard-label,/*チェック*/
.bct-pickup .blogcard-label,/*ピックアップ*/
.bct-official .blogcard-label,/*公式サイト*/
.bct-dl .blogcard-label{/*ダウンロード*/
margin-left:.5em;
}
@media screen and (max-width: 600px){
.blogcard-label{
margin-left:-0.3em!important;
}
}
.bct-together .blogcard-label{/*あわせて読みたい*/
background-color: #2ca9e1;
}
.bct-reference .blogcard-label{/*参考記事*/
background-color: #2ca9e1;
}
.bct-official .blogcard-label{/*公式サイト*/
background-color: #2ca9e1;
}
.bct-detail .blogcard-label{/*詳細はこちら*/
background-color: #2ca9e1;
}
.bct-related .blogcard-label{/*関連記事*/
background-color: #2ca9e1;
}
.bct-pickup .blogcard-label{/*ピックアップ*/
background-color: #2ca9e1;
}
.bct-prev .blogcard-label{/*前回の記事*/
background-color: #2ca9e1;
}
.bct-next .blogcard-label{/*続きの記事*/
background-color: #2ca9e1;
}
.bct-check .blogcard-label{/*チェック*/
background-color: #2ca9e1;
}
.bct-reference-link .blogcard-label{/*参考リンク*/
background-color: #2ca9e1;
}

.blogcard-wrap {
background-color: #ffffff;
}
.internal-blogcard-snippet{
    display: none;
}
.blogcard{
    border: 1px solid #2ca9e1 !important
}
.internal-blogcard::after{
	content: '記事を読む \00bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 70%;
	background-color: #2ca9e1; /* 内部リンク右下枠の背景色 */
	padding: .4em 3em;
	font-weight: bold;
	color: #ffffff; /* 内部リンク右下枠の文字色 */
	border-radius: 2px;
}
.internal-blogcard-footer{
	display: none; /* 内部ブログカードのアイコンとURLを非表示 */
}


/************************************
** ボックス（白抜き）の枠の太さを変える
************************************/
.blank-box {border-width: 1px;}