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

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

.gen-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(0,0,0,0.8);
  color: #fff;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.gen-toast.show {
  opacity: 1;
}


.seigo{
	font-size: 0.8em;
}
#b_yer,#a_yer{
	width: 4em;
	margin: 0 0 5px 0;
}
#b_mon,#b_day,#a_mon,#a_day{
	width: 3em;
	margin: 0 0 5px 10px;
}
#b_yer,#a_yer,#b_mon,#b_day,#a_mon,#a_day{
	text-align: center;
	padding: 5px 10px;
	border-radius: 3px;
}
#b_calc,#b_del{
	padding: 5px 10px;
	text-align: center;
	margin: 10px 5px 15px 0;
	border-radius: 3px;
}
#result{
	font-size: 1.2em;
	padding: 0 10px;
	border-bottom: solid 3px #21c8c8;
}
#memo{
	font-size: 0.8em;
	margin-top:10px;
}

h4, .list-title-in, .color-key ul li:before{
color: #21c8c8;
}
.color-orange ul li:before{
color: #ffb107;
}
.color-gray ul li:before{
color: #424242;
}
.color-pink ul li:before{
color: #f48fb1;
}
.color-blue ul li:before{
color: #29b6f6;
}
.color-purple ul li:before{
color: #5c6bc0;
}
.color-green ul li:before{
color: #4caf50;
}
.color-red ul li:before{
color: #ef5350;
}

.list-title-in:before, .list-title-in:after, .color-key ol li:before{
background-color: #21c8c8;
}
.color-orange ol li:before{
background: #ffb107;
}
.color-gray ol li:before{
background: #424242;
}
.color-pink ol li:before{
background: #f48fb1;
}
.color-blue ol li:before{
background: #29b6f6;
}
.color-purple ol li:before{
background: #5c6bc0;
}
.color-green ol li:before{
background: #4caf50;
}
.color-red ol li:before{
background: #ef5350;
}

.origin-ul ul, .check-ul ul{
padding: 0.5em 1em 0.5em 2.3em;
position: relative;
}
.origin-ul ul li, .check-ul ul li{
line-height: 1.5em;
padding: 0.5em 0;
list-style-type: none!important;
}

.origin-ul ul li:before, .check-ul ul li:before{
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left : 1em;/*左端からのアイコンまでの距離*/
}

.origin-ul ul li:before{
content: "\f138";/*アイコンの種類*/
}
.check-ul ul li:before{
content: "\f00c";
}

.round_ol ol {
counter-reset:number; /*数字をリセット*/
list-style-type: none!important; /*数字を一旦消す*/
padding:0.5em;
}
.round_ol ol li {
position: relative;
line-height: 1.5em;
padding: 0.5em 0.5em 0.5em 1.8em;
}
.round_ol ol li:before {
/* 位置を調整する */
margin-top: -2px;
/* 以下数字をつける */
position: absolute;
counter-increment: number;
content: counter(number);
/*以下数字のデザイン変える*/
display:inline-block;
color: white;
font-family: 'Avenir','Arial Black','Arial',sans-serif;
font-size: 1em;
border-radius: 50%;
left: -0.5em;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
}

.pad0{
	margin: 0 !important;
	padding: 0 !important;
}

.toc-widget-box {
  max-height: 50vh; /* 目次の縦幅 ビューポートの高さ50％以内に表示 */
  overflow-y: auto; /* スクロールの方向 */
  margin-bottom: 2em; /* 要素の下外側の余白 */
}
/** AndroidとiPhone用のスクロールバー表示 **/
/* スクロールバー全体 */
.toc-widget-box::-webkit-scrollbar {
  width: 14px; /* スクロールバーの横幅 */
}

/* スクロールバーのハンドル */
.toc-widget-box::-webkit-scrollbar-thumb {
  background: #949495; /* ハンドルの背景色 */
  border-radius: 10px; /* ハンドル角の丸み */
}

/* スクロールバーの背景エリア */
.toc-widget-box::-webkit-scrollbar-track {
  background: #ccc; /* スクロールバーの背景色 */
}

/* コードのスタイル変更 */
p code {padding: 5px 10px;}

/* 埋め込みをセンター揃え */
.video-container, 
.instagram-container, 
.facebook-container,
.twitter-tweet{
	margin: 30px auto !important;
}

/* フッターメニューの文字 */
.footer-bottom, .navi-footer-in a{
	font-size: 16px;
	line-height: 2;
}

/* ブログランキング */
.ranking{
	padding-bottom: 5px;
}

/* 横スクロール */
/* テーブル見出し */
.yokoscroll tr>*:first-child{
	background-color: #21c8c8 !important;
	color: #fff !important;
}
.yokoscroll th{
	background-color: #dbffef;
}
.yokoscroll td, .yokoscroll tr{
	border-color: #a8bbd8;
	border-width: 0px 1px 1px 0px;
}
/* 横スクロールバー */
.scrollable-table::-webkit-scrollbar {
 height: 20px;
}

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

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

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