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


/****************************************　
 * マナBチェック
************************************/

.point {/*マナチェック*/
font-size: 20px;
font-weight: 600;/*900でもいい*/
/*color:;*/
}
.single p.point i {
  /*color#6C9FD3:#67aff7;*/
	color:#003B9B;
	font-size: 1.1em;
/* #6c9fce-font-size:0.9em;/*フォントサイズ変更*/
}
/* チェックアイコンの色を変更 */
.point .fa-check {
  color: #003B9B;
}


.single p.point {
  font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}


/************************************
** PRの文言
************************************/
.pr-label-s {
    position: absolute;
    top: 3px;
    left: 3px;
    font-size: 12px;
    color:#999;/*#545454;*/
	border: 0px solid rgba(51, 51, 51, 0.7);
    background-color: #f5f6f7;
    padding: 2px 12px;
    border-radius: var(--cocoon-badge-border-radius);
}



/************************************
**H4→h1とかはこっちもある
************************************/

.article h4 {
	border-bottom:none;/*この下の線はいらない*/
	line-height: 1;
    font-weight: bold;
	font-size: 18px;
    padding: 2px 10px;
	margin-bottom:1.0em;
}

.article h4:before{
font-family: FontAwesome;
content: "\f00c\ ";
color: #3b5890;/*チェックの色*/
font-size: 1em;
font-weight:normal;
margin-top:1.5em;
margin-bottom:1.0em;/*original 1.5em*/
/*margin: 1.8em 0;ボックス↓の距離を広く*/
}

/************************************
**H4背景とか…こっちのほうが先に読み込まれる？
************************************/

.haikei { /*h4*/
line-height:2;
background-color:#fafafa;
/*background-color:#f5f6f7;*/
font-size: 16px;
font-weight:normal;
color:#333;
border: 0.5px solid #f0f0f0;/*#ddd*/
padding: 20px;
padding:1.5em;
margin-top:1em;
margin-bottom:1.5em;
}

.gray {
    line-height: 2;
    background-color: #fafafa;
    font-size: 16px;
    font-weight: normal;
    color: #333;
    border: 0.5px solid #ddd;
    padding: 20px;
    padding: 10px 25px 10px 25px;
    margin-top: -1.3em;
    margin-bottom: 1.5em; 
}


.sankou{
line-height:2;
background-color:#fffbf4;
font-size: 16px;
font-weight:normal;
color:#333;
padding: 20px;
padding:5px 25px 5px 25px;
border-radius: 0px;
border: 1px solid #ee7917;
}


.kakomido {/*h5 これは緑*/
line-height:2;
background:#f1f7ed;
font-size: 16px;
font-weight:normal;
color:#333333;
border:1.0px dashed;
border-color:#007b43;
border-radius: 0px;
padding:1.5em;
margin-top:1em;
margin-bottom:4em;/*変えてみた*/
}


.kakomi {　 /* リストの囲みの話 */
    line-height: 2.5;
    background: #f8f9ff;         /* リストで使っていた背景色 */
    font-size: 16px;
    font-weight: normal;
    color: #333333;
    border: 1.0px dashed #4865b2; /* リストで使っていた枠線色（青） */
    border-radius: 0px;
    padding: 1.5em 1.8em;   /* 上下1.5em / 左右1.8em で内側の幅を調整 */
    margin-top: 1em;
    margin-bottom: 4em;
}
/* 引用の””を消した */
blockquote::after {
  content: "";
}
/* 引用のを消す*/
blockquote::before {
  content: "";
}

blockquote {
 line-height:2;
/*background-color:#fafafa;*/
background-color:#f5f6f7;
font-weight:normal;
font-size:16px;
color:#333;
border: 0.5px solid #f0f0f0;/*#ddd*/
padding: 20px;
padding:1.5em;
margin-top:1em;
margin-bottom:1.5em;
}



@media (max-width:600px){
.haikei{
	font-size: 0.8em;
}
.gray {
	font-size: 0.9em;
	}
.kakomi {
	font-size: 0.9em;
}
	.kakomido{
	font-size: 0.9em;
	}
.sankou {
	font-size: 0.8em;
}
	
}

/*---------------------------------
カテゴリ&アーカイブ文字小さくする行間とフォントを小さくする
--------------------------------*/
.widget_categories ul li a{
	line-height: 1.5;
	font-size: 15px;
}

.widget_archive  ul li a {
	line-height: 1.6;
	font-size: 15px;
}

/************************************
**** 表のカスタマイズ「最新：とりあえず完成2023/05/10
************************************/

.body div.scrollable-table table, .body .wp-block-table table {
    padding: 0.5em;
    border-width: 1px;
    border-style: solid;
    text-align: left;
    vertical-align: middle;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;

}

.scrollable-table.stfc-sticky tr > *:first-child {
	  background-color: #edf6ff;
	border:1.0px solid #aaaaaa;
	text-align: center;
    position: sticky;
    position: -webkit-sticky;
    left: 0;
   /*z-index: 2;*/
	z-index: 1;
}

.scrollable-table th {
	background-color: #f3f4f5;
	 border-color: #aaaaaa;
/*	margin: 0 auto;  横方向の中央揃え */
 text-align: center;
}

.scrollable-table td {
	/*white-space: normal;*/
	/*↓は2行にして行間をせまく*/
	line-height:1.4;
	white-space:nowrap;
    border-style: solid;
    border-color: #aaaaaa;
	/*border-color:#333;*/
}
/*最後の行だけ折り返し＠スマホ*/
/*.scrollable-table td:last-child {
  white-space: normal;
}

.breakall {
  word-break: break-all;
}


/*.scrollable-table th,*/
.scrollable-table td {
     padding: 3px 5px; 
  /* white-space: nowrap; */
}

@media screen and (max-width: 480px) {
.scrollable-table td {
		font-size: 0.8em;
	}
.scrollable-table th {
		font-size: 0.8em;
	}
}


/************************************
**** 点「・」リスト
************************************/
.article ul:not(li ul,.toc-list,dd ul,.widget ul){
background:#f8f9ff;/*背景色薄い緑*/
line-height:2.5;
border-radius: 0px;
border:1.0px dashed;
border-color:#4865b2; /*枠の色#4169e1*/
  padding: 1.5em;
  padding-left: 1.8em;
}
/*margin: 3.1em 0;/*ボックス↓の距離を広く*/
}

.article ol li:not(.toc-list li,.toc-list ol li,.faq li){
margin: 1em;
}

/*目次のリスト、ウィジェットリスト調節*/

.article ul li, .article ol li {
    margin: 1.1em;
    line-height: 2;
}

/*下↓の目次を変える必要あり*/
.toc .toc-list li {
	 margin: 0.2em;
	line-height:1.6
}
/*下↓の追従目次を変える必要あり*/
.toc-widget-box .toc.tnt-number.toc-center.border-element, .toc-widget-box .toc a, #related_entries-2 .widget-related-entry-cards a {
    color: slategray;
    font-size: 0.9em;
    line-height: 1.4;
    padding: 3px;
}


/************************************
**** 数字の最初だけ黒字にする数字リスト 1/2
************************************/

.article ol:not(li ol,.toc-list,dd ol,.widget ol){
background:#f8f9ff;/*背景色*/
line-height:2.5;
border-radius: 0px;
border:1.0px dashed;
border-color:#4865b2; /*枠の色#4169e1*/
padding: 1.4em;
padding-left: 1.5em;
/*margin: 3.1em 0;/*ボックス↓の距離を広く*/
}
.article ol li:not(.toc-list li,.toc-list ol li,.faq li){
margin: 1em;
}

@media (max-width:600px){
.article ol:not(li ol,.toc-list,dd ol,.widget ol){
padding-left:2em;
}
.article li ol{
padding-left:1em;
font-size: 0.9em;
}
}

@media screen and (max-width: 834px) {
  .article ul{
	font-size: 0.9em;
  /*padding-left: 12px! important;*/
  }
  .article ol {
	font-size: 0.9em;
  /*padding-left: 12px! important;*/
  }
}

/************************************
****　数字の最初だけ黒字にする数字リスト 2/2
************************************/

ol:not(li ol):not(.toc-list):not(dd ol):not(.widget ol) {
    counter-reset: number;
    list-style-type: none;
    margin: em;
}

ol:not(li ol):not(.toc-list):not(dd ol):not(.widget ol) > li {
    position: relative;
    margin: em 0 !important;
}

ol:not(li ol):not(.toc-list):not(dd ol):not(.widget ol) > li:before {
    counter-increment: number;
    content: counter(number) ".";
    font-weight: bold;
    position: absolute;
    left: 0;
    top: 0;
    color: black;
}

ol:not(li ol):not(.toc-list):not(dd ol):not(.widget ol) > li {
    padding-left: 2.2em;
}

ol:not(li ol):not(.toc-list):not(dd ol):not(.widget ol) > li:nth-child(-n + 9) {
    padding-left: 1.8em;
}

/****************************************
 * 　目次デザイン①,②の完成版1/3
************************************/

.toc {
	background:#f9F9F9;/*背景色#f5faff*/
	  border:none;
    border-top:5px solid;
    border-top-color:#003B9B;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
  /*  padding: 40px 55px;*/
  padding: 30px 40px 40px 60px;
}
/*クリックできる目次の内容*/
.toc-title{
font-weight:bold;
font-size:18px;
color: #333333;
margin-left:-20px;
padding: 5px 0 18px 0;
}
/*↑スマホ表示のときの閉じる調整*/
.toc-title:before {
    top: 0;
    left: -45px;
    width: 50px;
    height: 50px;
    font-family: FontAwesome;
    content : "\f0ca"; 
    font-size:17px;
    margin-right:5px;
    color:#FFF; /* アイコンの色を変える場合はここを変更 */
    background-color:#003B9B; /* アイコンの背景色を変える場合はここを変更 */
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    padding:12px;
}

.toc-title::after {
color:#003B9B; /* 目次の色 */
}
.toc-list > li a {
font-weight: bold;
font-size:15px;
color:#333333;
display:block;
margin-top:10px;
margin-left: 10px;
	/* border-bottom: dashed 1px silver;←H2の↓に線入れたいなら*/
	 border-bottom: dashed 1px silver;
}
.toc-list > li a::before {
margin-right: 7px;
}

.toc-list > li li a {
font-weight: normal;
font-size: 95% ;
margin-top:0;
border-bottom: dashed 1px silver;

}/*目次に線を入れた*/

.toc-list > li li a::before {/*H3*/
 font-family: FontAwesome;
content: "\f0da"; /* アイコンを変える場合はここを変更 */
 margin-left: -5px; /* アイコンを少し左にずらす */
    color: #003B9B; /* 色を変える場合はここを変更 */
    font-weight: bold;
}

/*数字のやつ*/
.toc {
  counter-reset: num; /* カウンタをリセット */
}

.toc .toc-list li {
  font-size: 14px;
  color: #003B9B;
  position: relative; /* ::before の位置を相対位置に設定 */
  padding-left: 10px; /* ::before の幅分だけ左側に余白を設定 */
}
/*↓少し数字の大きさとか変えた*/
.toc .toc-list > li:before {
  counter-increment: num;
  position: absolute;
  display: inline-block;
  left: -24px;
  width: 27px;
  line-height: 27px;
  text-align: center;
  border-radius: 50%;
  content: counter(num) ""; /* カウンタの数字が1, 2, 3, ...と表示されるように設定 */
  /*background-color: #ffa952;*/
	background-color:#003B9B;
  font-family: 'Quicksand', sans-serif;
	font-weight:bold;
  color: #fff;
	
}

@media (max-width:880px){

	.toc-title {
		font-size:17px;
	}

.toc-list > li a {
margin-left: -2px;
}
.toc-list > li li a {
margin-left: -2em;
}
/*margin-left:0emにしたらいい感じ*/
.toc-list > li li a::before {
margin-left: 0em;
margin-bottom:1px;
}
.toc .toc-list > li:before {
  left: -34px;
}
}
/*↓線がどっかおかしかったのでimportantで調節*/
.toc a:hover {
color: #333 !important;
text-decoration: underline !important;
}

/***********************************
****　目次にスクロールバー設置 2/3
************************************/
.widget_toc{
	overflow-y:scroll;/*縦方向スクロールを設置*/
	max-height: calc(130vh - 160px); /* 目次の高さ上限*/
}
/*スクロールバー調整*/
.widget_toc::-webkit-scrollbar {
	width: 10px;/*幅*/
}
.widget_toc::-webkit-scrollbar-track {
	background: transparent;/*背景色を消す*/
}
.widget_toc::-webkit-scrollbar-thumb {
	background: #ccc;/*可動部のみ背景色を付ける*/
	border-radius: 10px;
}

/***********************************
****　追従目次←ここも変える 3/3
************************************/
#sidebar .widget-title, #slide-in-sidebar .widget-title {
    position: relative;
    padding: 10px 10px;
    box-shadow: none;
    margin: 0;
    background: #003B9B;
    border-radius: 4px 4px 0 0;
    font-weight: 700;
    color: #fff;
    letter-spacing: .05em;
    font-size: 18px;
	text-align:center;
	margin-bottom:15px;
}


.toc-widget-box .toc.tnt-number.toc-center.border-element, .toc-widget-box .toc a, #related_entries-2 .widget-related-entry-cards a

{
   /* color: slategray;*/
    font-size: 0.9em;
    line-height: 2.0;
   padding:2px; /* Modified the padding to have a value for the right side */
}
/*ウィジェットの目次の下を増やした*/
.toc-checkbox:checked~.toc-content {
    visibility: visible;
    padding: 0 0 5px 0;
    height: 100%;
    opacity: 1;
}

.toc-widget-box .toc .toc-list > li:before {
  counter-increment: num;
  position: absolute;
  display: inline-block;
	left: -6px;
	top:-1.5px;/*調節にここを追加した*/
  width: 24px;
  line-height: 24px;
  text-align: center;
  border-radius: 50%;
  content: counter(num) ""; /* カウンタの数字が1, 2, 3, ...と表示されるように設定 */
  /*background-color: #ffa952;*/
	background-color:#003B9B;
  font-family: 'Quicksand', sans-serif;
	font-weight:bold;
  color: #fff;
}

.toc-widget-box .toc .toc-list > li {
  padding-left: 10px; /* Added padding-left to prevent overlapping */
}
/*↑目次コード終わり*/

/************************************
****　サイドバーの目次追従をモバイルのみキャンセル3/3
************************************/
@media (max-width:880px){

.sidebar .widget_toc {
    display: none;
}
}

/************************************
****　ロゴとキャッチフレーズのカスタマイズ
************************************/

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

.tagline {
    text-align: center;
    font-size: 13px;
    margin: 0.23em 0.1em;
}

.logo.logo-header.logo-text {
	    padding: 10px 0px 0px 10px;
}

/* タイトル背景の高さ */
.logo-text{
padding:10px 0px 0px 10px;
}

/* メニューバー背景の高さ */
.navi-in>ul li {
height: 40px;
line-height: 40px;
}


/****************************************
content: ""; 
width: 7px;
height: 7px;
left: -2px;
display: inline-block;
border-radius: 50%;
background:#007b43;/*こちらで緑点の色を変更できます
position: relative;
margin-bottom: 2px;

/************************************
****　記事本文　ブログカード　ラベル
************************************/
.bct-related .blogcard-label,/*関連記事*/
.bct-reference .blogcard-label,/*参考記事*/
.bct-detail .blogcard-label,/*詳細はこちら*/
.bct-reference-link .blogcard-label,/*参考リンク*/
.bct-popular .blogcard-label,/*人気記事*/
.bct-together .blogcard-label,/*あわせて読みたい*/
/*.bct-check .blogcard-label,/*チェック*/
.bct-pickup .blogcard-label,/*ピックアップ*/
.bct-official .blogcard-label,/*公式サイト*/
.bct-dl .blogcard-label{/*ダウンロード*/
display: inline !important;
background-color: #003B9B;/*←黄緑「#9031f詳細は#3e9cf1こちら」などの背景色変更*/
margin-left:.5em;
}
.bct-check .blogcard-label{
	display:none;
}

.blogcard-label {
    position: absolute;
    top: -15px;
    left: 16px;
    font-size: 12px;
    padding: 3px 0.5em;
    background-color: #333;
    color: #fff;
    border-radius: 3px;
    letter-spacing: 0.7px;
}
/*】がないだけで全てかわるんやな…*/
@media screen and (max-width: 600px){
.blogcard-label{
margin-left:-0.3em!important;
}
}

/************************************
****　アフィリボタンの＞を削除
************************************/
.btn-wrap.btn-wrap-l > a::after {
    content: "";
    position: absolute;
    right: 0;
    font-size: 20px;
}
/************************************
****　単なる赤の色を変えた
************************************/
.red {
    color: #ce000d;
	font-weight:bold;
}


/*******　なべたろ茶色あわせて読みたい******/

.title-box4{
  margin: 4em 0 3em 0;
 background-color: #fffbf4;
  border: 2px solid #ee7917;
}

.title-box4-title {
    font-size: 14px;
    position: absolute;
    margin-top: -33px;
    background-color: #ee7917;
    color: #fff;
    font-weight: bold;
    border-radius: 4px 4px 0 0;
    padding: 2px 10px;
}
/*.title-box4-title:before{
  font-family: FontAwesome;
  content: "\f24a";
  font-size: 14px;
}*/
.title-box4 p{
  margin: 0.8em;
  padding 2em;
}

/************************************
****　吹き出し
************************************/
.sbp-l .speech-person {
width: 16%;
min-width: 16%;
min-width:4em;/*人の窓の大きさの調節*/
min-height:5em;
margin-right:1em;
margin-left:1em;
}
.sbp-r .speech-person {
width: 16%;
min-width: 16%;
min-width:4em;
min-height:5em;
margin-right:2em;
margin-left:1em;
}

/*吹き出し普通*/
.sbs-flat .speech-balloon {
background-color: #e3f3e5;/*吹き出しの色の変更はこちら*/
border-color:#e3f3e5;/*吹き出しの色の変更はこちら*/
border-radius: 10px;
padding-left:1em;/*吹き出しの右の空間*/
}
.sbs-flat .speech-balloon::before, .sbs-flat .speech-balloon::after{
border-right-color: #e3f3e5;/*吹き出しの色の変更はこちら*/
border-left-color: #e3f3e5;/*吹き出しの色の変更はこちら*/
}
/************************************
****　吹き出し
************************************/
.sbp-l .speech-person {
width: 16%;
min-width: 16%;
min-width:5em;
min-height:5em;
margin-right:1em;
margin-left:2em;
}
.sbp-r .speech-person {
width: 16%;
min-width: 16%;
min-width:5em;
min-height:5em;
margin-right:2em;
margin-left:1em;
}
.speech-icon-image {
box-shadow:none!important;
}
.sbs-flat .speech-balloon {
background-color: #e3f3e5;/*吹き出しの色の変更はこちら*/
border-color: #e3f3e5;/*吹き出しの色の変更はこちら*/
border-radius: 10px;
padding:1em;
}
.sbs-flat .speech-balloon::before, .sbs-flat .speech-balloon::after{
border-right-color: #e3f3e5;/*吹き出しの色の変更はこちら*/
border-left-color: #e3f3e5;/*吹き出しの色の変更はこちら*/
}

.sbs-think .speech-balloon {
background-color: #e3f3e5;/*吹き出しの色の変更はこちら*/
border: 3px solid #e3f3e5;/*吹き出しの色の変更はこちら*/
border-radius: 10px;
padding:1em;
}

div.sbs-think .speech-balloon::before {
    border-width: 2px;
    border-style: solid;
    border-color: #e3f3e5;
    background-color: #e3f3e5;
    border-radius: 50%;
    left: -29px;
    top: 11px;
    width: 20px;
    height: 20px;
}

div.sbs-think .speech-balloon::after {
    border-width: 2px;
    border-style: solid;
    border-color: #e3f3e5;
    background-color: #e3f3e5;
    border-radius: 50%;
    left: -44px;
    top: 25px;
    width: 10px;
    height: 10px;
}
/*Cocoon更新してバルーンが変になったので*/
.sbs-flat {
    --cocoon-custom-background-color: #e3f3e5;
    --cocoon-custom-border-color: #e3f3e5;
    --cocoon-custom-text-color: var(--cocoon-text-color);
}
div.sbs-think:not(.not-nested-style) .speech-balloon::after {
    border-width: 2px;
    border-style: solid;
    border-color: #e3f3e5;
    background-color: #e3f3e5;
    border-radius: 50%;
    left: -44px;
    top: 25px;
    width: 10px;
    height: 10px;
}

div.sbs-think:not(.not-nested-style) .speech-balloon::before {
    border-width: 2px;
    border-style: solid;
    border-color: #e3f3e5;
    background-color: #e3f3e5;
    border-radius: 50%;
    left: -29px;
    top: 11px;
    width: 20px;
    height: 20px;
}
/* 右側の吹き出し：枠線カラーを背景色と同じ緑にする */
.sbp-r .speech-balloon {
  background-color: #e3f3e5 !important; /* 背景色：緑 */
  border-color: #e3f3e5 !important;     /* 枠線色：背景と同じ緑 */
}

/* 吹き出しの三角形（しっぽ）部分の色も同じ緑で統一 */
.sbp-r .speech-balloon::before {
  border-left-color: #e3f3e5 !important; /* 外枠線の三角 */
}
.sbp-r .speech-balloon::after {
  border-left-color: #e3f3e5 !important; /* 背景の三角 */
}

/* フクロウ（sb-id-11）の吹き出しを背景と同色の緑にする */
.sb-id-11 .speech-balloon {
  background-color: #e3f3e5 !important; /* 背景色：緑 */
  border-color: #e3f3e5 !important;     /* 枠線色：背景と同じ緑 */
}

/* 左側の吹き出しは「border-right-color」でしっぽの色を指定します */
.sb-id-11 .speech-balloon::before {
  border-right-color: #e3f3e5 !important; /* 外枠線の三角 */
}
.sb-id-11 .speech-balloon::after {
  border-right-color: #e3f3e5 !important; /* 背景の三角 */
}
/* 以下はブロックエディターでも切れない吹き出しの作成 */
.speech-wrap .speech-person {
  flex: 0 0 16% !important;
  max-width: 16% !important;
}

.speech-wrap .speech-balloon {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.speech-person img {
  max-width: 100% !important;
  height: auto !important;
}
.speech-wrap {
  align-items: flex-start !important;
}
img.speech-icon-image {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}

.speech-wrap .speech-person {
  flex: 0 0 80px !important;
  max-width: 80px !important;
  width: 80px !important;
}

.speech-wrap .speech-balloon {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
.speech-wrap .speech-wrap {
  width: 100%;
}
.speech-wrap .speech-person {
  flex: 0 0 120px !important;
  max-width: 120px !important;
  width: 120px !important;
}

@media screen and (max-width: 480px){
.speech-person {
margin-right:0!important;
margin-left:0!important;
}}


/************************************
****　本文下の関連記事＆コメントのカスタマイズ
************************************/

.related-entry-heading, .comment-title {
    margin: 22px 0;
	  text-align:center;
    font-size: 18px;
	  color:#fff;
	  background-color:#003B9B;
}


/****************************************
 * 　↑のトップボタンの変更
************************************/
.go-to-top-button {
    background-color: #003B9B;
    border-radius: 50%;
    color: #fff;
    width: 50px;
    height: 50px;
	  opacity:0.7;
}
/****************************************
 * 　ブログカードカスタマイズ
************************************/
.blogcard {
padding-bottom:.5%;
border: 0px solid whitesmoke;
border-radius:2px;
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 30%);
}
a.blogcard-wrap.internal-blogcard-wrap.a-wrap.cf,
a.blogcard-wrap.external-blogcard-wrap.a-wrap.cf{
transition: all 200ms;
}

.blogcard-footer {
padding-top: 2%;
}
.blogcard:before {
display:none;
}
/* 記事を読むを追加「峠ver」 */
.internal-blogcard:after{
	content: 'クリックして読む \00bb';
    position: absolute;
    bottom: 0.5rem;
    right: 1rem;
    font-size: 65%;
    background-color: #66c2c3;
    padding: 0.4em 3em;
    font-weight: bold;
    color: #fff;
    border-radius: 20px;
}

.blogcard-content{
max-height: none;
font-weight: normal;

}
}
.blogcard-date{
display:none;
}
.blogcard-title {
font-size:0.9em;
color:#333;
padding:.2em .1em 0;
line-height:1.4em;
text-align: justify;
}

.blogcard-snippet {
padding:0em .5em;
color:#7b7b7b;
}
text-align: justify;
}

@media screen and (max-width: 1023px){
.blogcard-title {
padding:.3em .3em 0em .2em;
line-height:1.5em;
}
.blogcard-snippet {
font-size:.9em;
margin-top:.3em;
}
}
@media screen and (max-width: 960px){
.blogcard-title {
padding:.3em .3em .2em .2em;
line-height:1.5em;
}
.blogcard-snippet{
font-size:.8em;
max-height:15em;
}
}
@media screen and (max-width: 834px){
.blogcard-title {
font-size:1.1em;
padding:.2em .3em .5em .2em;
}
.blogcard-snippet {
font-size:.9em;
}
}
@media screen and (max-width: 740px){
.blogcard-title {
padding:.3em;
}
}
@media screen and (max-width: 673px){
.blogcard-title {
padding:.3em .5em 1em .2em;
line-height:1.8em;
}
.blogcard-snippet {
display:none;/*スマホ上での内部*/
}
}
@media screen and (max-width: 480px){
.blogcard {
padding-bottom: 2%;
}
.blogcard-title {
padding:.1em .4em 0em .1em;
line-height:1.5em;
}
.blogcard-footer {
padding-top: 5%;
}
}
@media screen and (max-width: 410px){
.blogcard-domain{
max-width: 11em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}}
@media screen and (max-width: 375px){
.blogcard-domain{
max-width: 9em;
}}

/****************************************position: absolute;
	bottom: 10px;
	right: 20px;
	font-family: 'Font Awesome 5 free';
	content: '記事を読む \f101';
	font-size: 80%;
	font-weight: bold;
	background-color: #007b43;
	color: #FFF; 
	padding: 0.2em 2em;
	border-radius: 2px
************************************/


/****************************************
 *  トグルボタンの色変え
************************************/

.toggle-button {
    display: block;
    cursor: pointer;
    padding: 3px 10px;
		font-weight: bold;
    background-color: #007b43;
 	  color:#fff;
	  text-align: center;
    border-radius: var(--cocoon-basic-border-radius);
    position: relative;
    margin: 0;
}
.toggle-button:before {
    color: #fff;
	border :none;
    opacity: 1;
}


/************************************
****　★リンクを太字→クリックで下線＋色が変わるようにする
************************************/

.entry-content a {
text-decoration:none;
font-weight:bold;
}

.entry-content a:hover {
	text-decoration:underline;/*underlineにすれば出現する*/
	color:#23527c;
}

.blogcard {
color: #333333 ;
font-weight:normal;
text-decoration:none;
}

.blogcard:hover{/*クリックしたら色変*/
background: #f1f7ed;
text-decoration:none;
}

.entry-content.cf a.blogcard-wrap:hover {
    color: #333;
    text-decoration: none;
}

/************************************
****　タグクラウドカスタマイズ
************************************/
.tagcloud a {
   background: none; /*背景を消す*/
   border: 1px solid #003B9B; /*実線の太さと色*/
   border-radius: 2px; /*角の丸み*/
   color: #333; /*文字色*/
   padding: 3px 10px; /*要素の内部余白*/
   text-decoration: none; /*文字の装飾なし*/
   font-size: 12px; /*文字サイズ*/
   margin: 2px; /*要素の外部余白*/
   display: flex; /*横並びにする*/
   flex: 1 1 auto; /*余白分の自動伸縮比率*/
   justify-content: space-between; /*左右幅いっぱいに均等に配置する*/
}
.tagcloud a:hover { 
	background:#f1f7ed;
   color:#fff; /*カーソルを合わせた時の文字色*/
   transition: 0.5s; /*アニメーションの時間*/
}
 /* background: #f1f7ed; カーソルを合わせた時の背景色*/
/*文字色:#40210f;*/
/************************************
****　かんたんリンク カスタマイズ 最新
************************************/
/*-----------外枠------------*/
div.easyLink-box {
width:100%
/*全体の背景カラー*/
background-color: #F1F8E9;
overflow: hidden;
border-radius: 0px;
box-sizing: border-box;
padding: 12px 8px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
/*-------------商品リンク タイトル----- */
p.easyLink-info-name a {
	color: #337ab7 !important; /*#1A237E文字色*/
	font-weight: bold;
	font-size: 14px;
}

/*----各ボタン----*/
.easyLink-info-btn-amazon {
	background: #f6a306 !important; /*Amazon 背景色*/
	position:relative;
	width: 100%;
	display: inline-block;
	text-align :center;
	box-sizing:border-box;
	margin: 1px 1px;
	padding: 3% 0.5%;
	border-radius: 8px;
	font-size: 13px;
	font-weight: bold;
	line-height: 180%;
	color: #fff;
	box-shadow: 0px 4px 0 #455A64;
		transition: 0.2s all ease 0s;
	overflow: hidden;
}

a.easyLink-info-btn-rakuten {
	background: #BF0000 !important; /*楽天 背景色*/
position:relative;
width: 100%;
display: inline-block;
	text-align: center;
	box-sizing: border-box;
	margin: 1px 1px;
	padding: 3% 0.5%;
	border-radius: 8px;
	font-size: 13px;
	font-weight: bold;
	line-height: 180%;
	color: #fff;
	box-shadow: 0px 4px 0 #455A64;
		transition: 0.2s all ease 0s;
	overflow: hidden;
}

a.easyLink-info-btn-yahoo {
	background: #FF0033 !important; /*ヤフー背景色*/
	position:relative;
	width: 100%;
	display: inline-block;
	text-align:center;
	box-sizing:border-box;
	margin: 1px 1px;
	padding:3% 0.5%;
	border-radius:8px;
	font-size: 13px;
	font-weight: bold;
	line-height: 180%;
	color: #fff;
	box-shadow: 0px 4px 0 #455A64;
		transition: 0.2s all ease 0s;
	overflow: hidden;
}

a.easyLink-info-btn-custom_4 {
	background: #f4b170 !important; /*kindle*/
	position:relative;
	width: 100%;
	display: inline-block;
	text-align:center;
	box-sizing:border-box;
	margin: 1px 1px;
	padding:3% 0.5%;
	border-radius:8px;
	font-size: 13px;
	font-weight: bold;
	line-height: 180%;
	color: #fff;
	box-shadow: 0px 4px 0 #455A64;
	transition: 0.2s all ease 0s;
	overflow: hidden;
	
}

/*--かんたんリンクマウスオーバーの時のボタン色---*/
a:hover.easyLink-info-btn-amazon {
	box-shadow: none;
	transform: translate3d(0, 3px, 0);
}

a:hover.easyLink-info-btn-rakuten {
	box-shadow: none;
	transform: translate3d(0, 3px, 0);
}
a:hover.easyLink-info-btn-yahoo {
	box-shadow: none;
	transform: translate3d(0, 3px, 0);
}

a:hover.easyLink-info-btn-custom_4 {
	box-shadow: none;
	transform: translate3d(0, 3px, 0);
}
	

/*---PC以外の時の設定---*/
@media screen and (max-width: 703px) {
	div.easyLink-box div.easyLink-img,
	div.easyLink-box div.easyLink-img p.easyLink-img-box img.easyLink-img-pht {
	max-height: 300px !important; /*商品画面の大きさ調整*/
	}
}


/************************************
****　お問い合わせフォーム contact form7
************************************/
.haveto{
font-size:9px;
padding:2px 5px;
background:#4169e1;/*必須 色の変更はこちら*/
color:#fff;
border-radius:20px;
margin-right:5px;
position:relative;
bottom:2px;
}
#formbtn{
display: block;
padding:10px;
width:300px;
background:#f7f7f7;
color:#545454;
font-size:17px;
border:none;
border-radius:50px;
margin:25px auto 0;
transition:0.3s;
}
#formbtn:hover{
background:#4169e1;/*送信 色の変更はこちら*/
color:#fff;
border-radius:50px;
box-shadow: 0px 1px 5px 0 rgba(0,0,0,.2);
}

/************************************
****　アコーディオンボックス「自分で作成」
************************************/
/*表示非表示*/
.hidden_box {
	margin: 1em 0;
	padding: 0;
	text-align: center;
}
.hidden_box label {
    padding: 0.4em 0em;
	background:#007b43;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
	letter-spacing:2px;
	display:block;
	transition: all 0.3s ease-in-out
  text-align: center; /* テキストを中央揃えにする */
}
.hidden_box label:hover {
	transform: translateY(2px);
	box-shadow: 0 0px 3px rgba(0, 0, 0, .16);
}
.hidden_box input {
	display: none;
}
.hidden_box input + p{
	display:none
}
.hidden_box .hidden_show {
    border: 1px solid #ddd;
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.3s;
    font-size: 16px; /* 大きさを変更 */
    text-align: center; /* 中央に配置 */
    margin-top: 10px; /* 余白を追加 */
}

.hidden_box input:checked ~ .hidden_show {
	padding: 20px 20px;
	height: auto;
	opacity: 1;
	text-align: left;
}



/*--------------------------------------
Rinkerのデザイン変更(最新)
--------------------------------------*/
div.yyi-rinker-contents ul.yyi-rinker-links {
    border: 0px!important;
    background-color: white!important;
	padding:1.1em!important;
}

/* Rinker カスタマイズ */
/* 外枠 2本線 */
div.yyi-rinker-contents {
border: double #dbdbdb;
}

/*外部リンクマーク非表示*/
div.yyi-rinker-contents div.yyi-rinker-title a span,
div.yyi-rinker-contents div.yyi-rinker-detail a span,
div.yyi-rinker-contents ul.yyi-rinker-links li a span {
	display: none;
}

/*ボタンのデザイン*/
/*kindleボタン色の変更*/
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonkindlelink {
    background: #FFC266;
    order: 15;
}


div.yyi-rinker-contents ul.yyi-rinker-links li {
	min-width: 180px;
	border-radius: 4px !important;
	margin: 5px !important;
}

div.yyi-rinker-contents ul.yyi-rinker-links li a {
	height: 40px !important;
	line-height: 40px !important;
	text-align: center;
	font-size: 14px !important;
	color: #fff;
	transition: all 0.5s 0s ease;
}



/* PC・タブレット・スマホ レイアウト調整 */
@media only screen and (min-width: 1166px) {
div.yyi-rinker-contents ul.yyi-rinker-links {
justify-content: center;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
width: 40%;
margin: 0.7% 0.7%;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
padding: 0 0.5px;
text-align: center;
}
}
@media screen and (max-width: 768px) {
div.yyi-rinker-contents div.yyi-rinker-box {
display: block;
}
div.yyi-rinker-contents div.yyi-rinker-image {
width: 100%;
}
div.yyi-rinker-contents div.yyi-rinker-info {
text-align: center;
width: 100%;
}
div.yyi-rinker-contents ul.yyi-rinker-links {
justify-content: center;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
width: 45%;
margin: 0.7% 0.7%;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a {
padding: 0 0.5px;
}
}
/*レスポンシブ480px以下*/
@media screen and (max-width: 480px){
	/*縦表示*/
	div.yyi-rinker-contents div.yyi-rinker-box {
		flex-direction: column;
	}

	/*画像を中央寄せ*/
	div.yyi-rinker-contents div.yyi-rinker-image {
		width: auto;
	}

	/*商品情報を中央寄せ*/
	div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
		width: calc(100% - 10px);
		text-align: center;
		padding: 0 !important;
	}

	div.yyi-rinker-contents div.yyi-rinker-detail {
		padding: 0 !important;
	}

	/*ボタンの幅を100%にする*/
	div.yyi-rinker-contents ul.yyi-rinker-links li {
		width: 100%;
	}

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

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

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