@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Template:   cocoon-master
Version:    1.0.7
*/

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

/*---------------------------------------------------*/
/*　　　Cocoon上書き　　　　　　　　　　             */
/*---------------------------------------------------*/
/* 内部ブログカード 本文非表示 */
.internal-blogcard-snipet {
  display: none;
}

/* 目次変更 */
.toc{
/*   width:90%; */
}

/*---------------------------------------------------*/
/*　　　Bizarre-food上書き　　　　　　　　　         */
/*---------------------------------------------------*/
/*------------------------------*/
/* 投稿アイキャッチ非表示       */
/*------------------------------*/
.single .article-header > .eye-catch-wrap {
	display: none !important;
}

.single .article-header h1,
header.article-header.entry-header,
.eye-catch,
header .article-header,
.date-tags {
	position: static;
}

/*------------------------------*/
/* h2デザイン調整               */
/*------------------------------*/
.article h2{
	border-bottom: solid 2px lightseagreen;
    padding-bottom: 10px;
}

/*------------------------------*/
/* h4デザイン調整               */
/*------------------------------*/

article h4:before {
    width: .3em;
    height: 100%;
    top: 0;
    left: 0;
    background: lightseagreen;
    border-top-right-radius: 3px;
	border-top-left-radius: 3px;
    border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
}

/*---------------------------------------------------*/
/*　　ボックスオリジナル    　　　　                 */
/*---------------------------------------------------*/
/*------------------------------*/
/* ブルー  ぽんひろ (直線)      */
/*------------------------------*/
.box3-blue {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	/*max-width:600px; *//* ボックスの横幅 */
	/*margin: 2em auto;*/	/* ボックスの外側余白(上下:2em　左右:auto) */ 
	margin: 1.5em 0.5em;	/* ボックスの外側余白(上下:2em　左右:auto) */
	/*padding: 1.7em 2em;*/	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	padding: 1.2em 1.2em;
	border: 2px solid #0e7ac4;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
}
.box3-blue .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 30px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #0e7ac4; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	/*font-size: 20px;*/ /* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}

/* ブルーボックス p用*/
.box3-blue p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
	
	/* margin-bottom: 1.4em;*/ /* 文字の下側余白をセット*/ 
	margin-top: 0.7em;
	margin-bottom: 0.7em;
}

/* ブルーボックス ul用、ol用*/
.box3-blue ul,.box3-blue ol {
	margin-top: 0.7em;
	margin-bottom: 0.7em;
}

/*------------------------------*/
/* ピンク  ぽんひろ (直線)      */
/*------------------------------*/
.box3-pink {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	/*max-width:600px;*/ /* ボックスの横幅 */
	/*margin: 2em auto;*/	/* ボックスの外側余白(上下:2em　左右:auto) */
	margin: 1.5em 0.5em;	/* ボックスの外側余白(上下:2em　左右:auto) */
	/*padding: 1.7em 2em;*/	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	padding: 1.2em 1.2em;
	border: 2px solid #f27398;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
}
.box3-pink .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 30px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #f27398; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	/*font-size: 20px;*/ /* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}

/* ピンクボックス p用*/
.box3-pink p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
	
	/* margin-bottom: 1.4em;*/ /* 文字の下側余白をセット*/ 
	margin-top: 0.7em;
	margin-bottom: 0.7em;
}

/* ピンクボックス ul用、ol用*/
.box3-pink ul,.box3-pink ol {
	margin-top: 0.7em;
	margin-bottom: 0.7em;
}

/*------------------------------*/
/* イエロー(点線)  ぽんひろ  */
/*------------------------------*/
.box4-yellow {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	/*max-width:600px;*/ /* ボックスの横幅 */
	/*margin: 2em auto;*/	/* ボックスの外側余白(上下:2em　左右:auto) */
	margin: 1.5em 0.5em;	/* ボックスの外側余白(上下:2em　左右:auto) */
	/*padding: 1.7em 2em;*/	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	padding: 1.2em 1.2em;
	border: 2px dotted #fdc44f;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
}
.box4-yellow .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -10px; /* 上から（-10px）移動*/
	left: 30px; /* 左から(30px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #fdc44f; /* タイトル文字色 */
	padding: 0 10px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	/*font-size: 20px;*/ /* タイトル文字の大きさ */
	font-weight: bold;/* タイトル文字の太さ */
}
.box4-yellow p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}

/*------------------------------*/
/* イエロー(テープ風)  ぽんひろ  */
/*------------------------------*/
.box6-yellow {
	position:relative;/* 配置に関するもの(ここを基準に) */
	/*padding: 2em 2em 1.7em;*/	/* ボックスの内側余白(上:2em　左右:2em 下：1.7em) */
	padding: 1em 1em 0.5em;
	/*margin: 2.5em auto; */ /*ボックス外側余白*/ 
	margin: 1.5em 0.5em;	/* ボックスの外側余白(上下:2em　左右:auto) */	
	
	background-color: #fef9ed; /*ボックス背景色*/ 
	box-shadow: 0px 1px 5px rgba(0,0,0,0.1);/*ボックス影*/ 
	border-radius:4px;/* ボックス角丸 */
	/*max-width:600px;*/ /*ボックス横幅*/ 
}
.box6-yellow .box-title {
	position: absolute;/* 配置に関するもの(ここを動かす) */
	top: -22px;/* 上から（-22px）移動*/
	left: 30px;/* 左から（30px）移動*/
	padding: 0.2em 2em;/* テープ内側余白*/
	color: #fdc44f; /* テープ文字色 */
	font-weight: bold;/* テープ文字太さ*/
	/*font-size:18px;*/ /* テープ文字大きさ*/
	background-color: rgba(255,255,255,.1);/* テープ背景色と透過*/
	border-left: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ左*/
	border-right: 2px dotted rgba(0,0,0,.1);/* テープのギザギザ→*/
	box-shadow: 0 0 5px rgba(0,0,0,0.2); /* テープ影*/
	transform: rotate(-3deg);/* テープの傾き*/
}
.box6-yellow p{
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}



/*---------------------------------------------------*/
/*　　トップページ目次用テーブル                     */
/*---------------------------------------------------*/
table.mokujiTbl td {
    text-align: center;
    font-size: 1.2em;	
    padding: 0em 0em;	
}

table.mokujiTbl td img {
 vertical-align: bottom;/*画像下余白をなくすため*/
}

/*---------------------------------------------------*/
/*　　リンク用ミニタイトル                           */
/*---------------------------------------------------*/
.mini-title {
  padding: 0.3em;/*文字周りの余白*/
  color: #494949;/*文字色*/

  background: #e0f2f0;
  border-left: solid 5px lightseagreen;
  
  font-size:1em;
  margin-top:2em;
}

/*---------------------------------------------------*/
/*　　リンク用ミニリスト                             */
/*---------------------------------------------------*/
ul.mini-lst li {
  position: relative;
}
ul.mini-lst li::after,
ul.mini-lst li::before {
  display: block;
  content: '';
  position: absolute;
}
ul.mini-lst li::after {
  top: .35em;
  left: -1.2em;
  width: 14px;
  height: 14px;
  background-color: #3498db;
  border-radius: 100%;
}
ul.mini-lst li::before {
  z-index: 2;
  top: .625em;
  left: -.975em;
  width: 4px;
  height: 4px;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/*---------------------------------------------------*/
/*　　　タイトルありテーブル:タイトル部とテーブル部　　　　　　　 */
/*---------------------------------------------------*/
p.fncTitleLabel{
 margin-bottom:0.4em;
}

.fncTitleTable{
 /* margin-top:0em;*/
}
	

/*---------------------------------------------------*/
/*　　　関数名(※関数以外でも共通で使用)             */
/*---------------------------------------------------*/
.fncNm{
    position: relative;
    background: #fff4e6;
    box-shadow: 0px 0px 0px 5px #fff4e6;
    border: dashed 2px white;
    padding: 1.5em 0.5em;
    color: #454545;
}
.fncNm:after{
    position: absolute;
    content: '';
    right: -7px;
    top: -7px;
    border-width: 0 15px 15px 0;
    border-style: solid;
    border-color: #ffdb88 #fff #ffdb88;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}
.fncNm p.title {
	font-size:1.8em;
    margin: 0; 
    padding: 0;
}

.fncNm p.titleS {
	font-size:1.4em;
    margin: 0; 
    padding: 0;
}

.fncNm p.titleSS {
	font-size:1.1em;
    margin: 0; 
    padding: 0;
}

.fncNm p.setsu {
	font-size:1em;
    margin: 0; 
    padding: 0em 1em;
}
.fncNm p.midashi {
	font-size:1em;
    margin: 0; 
    padding: 0em;
}

/*---------------------------------------------------*/
/* テクニック辞典用見出し(ブロック用)                */
/*---------------------------------------------------*/
.tec-midashi {
  padding: 0.2em 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #fff4e6;/*背景色*/
  border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/

  font-weight: bold; /*フォント変更追加*/ 
  font-size: 1em;
  min-width: 14em;
  max-width:14em;
	
  margin-top   : 3em;
  margin-bottom: 0.5em;
  margin-left  : 0em;
  margin-right : 0em;
}

/*---------------------------------------------------*/
/* テクニック辞典用見出し(h3用)                      */
/*---------------------------------------------------*/
h3.tec-title::before{
	width: 0em;
}
h3.tec-title{
 border-left: 5px solid #ffaf58;
 background: #fff4e6;
 padding: 0.5em 0.5em;

 max-width:18em;
 font-size: 1.1em;
}

/*---------------------------------------------------*/
/* テクニック辞典用見出し(h4用)                      */
/*---------------------------------------------------*/
h4.tec-title4::before{
	width: 0em;
}
h4.tec-title4{
 border-left: 5px solid #ffaf58;
 background: #fff4e6;
 padding: 0.5em 0.5em;

 max-width:18em;
 font-size: 1.1em;
}

/*---------------------------------------------------*/
/* デザイン上書き                                    */
/*---------------------------------------------------*/
/* 囲み赤→ピンク*/
.blank-box.bb-tab.bb-red::before {
    background-color: #ff99a8;
}

.blank-box.bb-red {
    border-color: #ff99a8;
}

/*---------------------------------------------------*/
/* 目次のデザイン修正                                */
/*---------------------------------------------------*/
/* H3以下の先頭数字を非表示に変更 */
.article .toc-list > li li {
  list-style: none;
  margin-left: 2em;
}

/* H3以下の先頭に点を表示 */
.toc-list > li li ::before {
  content: '';
  width: 5px;
  height: 5px;
  display: inline-block;
  left: -15px;
  border-radius: 100%;
  background: #cdcdcd;
  position: relative;
  margin-bottom: 2px;
 }

/*---------------------------------------------------*/
/* 吹き出しのデザイン修正                                */
/*---------------------------------------------------*/
/*吹き出し フラットタイプ（薄い緑色 E6FFE7、薄いオレンジ FFF4E6、薄い青緑 E6FFF4）*/
 .sbs-flat .speech-balloon{
    background-color: #E6FFF4;
    border-color: #E6FFF4;
}

    .sbs-flat .speech-balloon::before,
    .sbs-flat .speech-balloon::after{
      border-right-color: #E6FFF4;
      border-left-color: #E6FFF4;
}

/*---------------------------------------------------*/
/* ブログカードのデザイン修正                        */
/*---------------------------------------------------*/
/*ブログカード 説明文(スニペット) 非表示 */
.blogcard-snippet {
display: none;
}

/*---------------------------------------------------*/
/* 固定ページ投稿日、更新日を非表示                */
/*---------------------------------------------------*/
.page .date-tags {
display: none;
}

/*---------------------------------------------------*/
/* リンク用矢印               */
/*---------------------------------------------------*/
.arrow{
    position: relative;
    display: inline-block;
    padding: 0 0 0 32px;
   /* color: #000;*/
    vertical-align: middle;
   /* text-decoration: none;*/
   /* font-size: 15px;*/
}
.arrow::before,
.arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.arrowBlue::before{
    width: 24px;
    height: 24px;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #3498db;
}
.arrowBlue::after{
    left: 6px;
    width: 6px;
    height: 6px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/*---------------------------------------------------*/
/* 関連記事下のアドセンスとの距離を調整              */
/*---------------------------------------------------*/
.entry-content {
	/*本文下の空白を削除*/
	padding-bottom: 0;
	margin-bottom: 0;
	/*本文左右の空白を削除*/
	padding-left: 0em;
    padding-right: 0em;
}

/*---------------------------------------------------*/
/* 関連記事など横並び               */
/*---------------------------------------------------*/
.widget-entry-cards.large-thumb {
display: flex;
flex-wrap: wrap;
}

.widget-entry-cards.large-thumb a {
width: 25%;
}

/768px以下/
@media screen and (max-width: 768px){
.widget-entry-cards.large-thumb a {
width: 50%;
}
}

/480px以下/
@media screen and (max-width: 480px){
.widget-entry-cards.large-thumb a {
width: 100%;
}
}



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

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

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

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