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

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

/***********************
参考の右マージン
***********************/
.badge,
.sanko,
.reffer,
.ref{
  
  margin-right:5px;
}
/***********************
1px排除
***********************/
.img-inline > img {
       display: inline !important;
}


/* PCで電話番号リンクを無効に */

    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
		color:#333;
    }





/***********************
見出しのリセット
***********************/
/* H2 */
.article h2{
background:none;
padding: 0;
}
 
/* H3 */
.article h3{
border-top:none;
border-bottom:none;
border-left:none;
border-right:none;
padding: 0;
}
 
/* H4 */
.article h4{
border-top:none;
border-bottom:none;
padding: 0;
}
 
/* H5 */
.article h5{
border-bottom:none;
padding: 0;
}
 
/* H6 */
.article h6{
border-bottom:none;
padding: 0;
}

/***********************
見出し
***********************/
.article h1 {
 font-weight: 800;
 font-size: 1.5rem;
 line-height: 1.3;
}

.article h2 {           
 font-size: 26px;      /*---文字サイズ---*/
 line-height: 28px;    /*---行の高さ---*/
 padding: 15px 10px 12px 17px;  /*---内側の余白---*/
 background: #6bb6ff;   /*---背景の色---*/
 color: #fff;           /*---文字色---*/
 margin: 25px 0;        /*---外側の余白---*/
 position: relative;
 border:none;
}
 
 
.article h3,
#comment-area h3,
#related-entries h3{
 font-size: 23px;
 padding: 10px;
 border-bottom:5px solid #364f6b;
}
 
.article h4 {
 font-size: 20px;
 border-left: 6px solid #364f6b;
 border-bottom: 0px;
 padding: 5px 0 5px 12px;
}

/***********************
サイドバーの見出しを変更 カテゴリー
***********************/
.widget_categories ul .cat-item a::before{
    line-height: 1!important;
    content: "\f0da"; 
    color: #499eda;
    padding-right: 10px;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 14px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    animation: horizontal 3s ease infinite;
    -webkit-animation: horizontal 3s ease infinite;
    font-weight: 900; /*アイコンの太さ*/
    font-family: "Font Awesome 5 Free";
}
.widget_categories ul .cat-item{
    border-top: 1px dotted #e1e1e1;
}
/***
 * .widget_categories ul .cat-item:last-child{
     border-bottom: 1px dotted #e1e1e1;
}**重なるため非表示**/

.widget_categories ul li a{
    padding: 10px 0;
    padding-right: 10px;
    padding-left: 10px;
}
.sidebar .widget-sidebar-title{
   	color: #499eda;
	background-color: #fff;
	margin: 16px 0 0 0;
	padding: 16px 0 10px 5px;
	font-size:18px;
}
.sidebar .widget_categories .widget-sidebar-title:before {
    line-height: 1!important;
    content: "\f07b";
    color: #499eda;
    padding-right: 5px;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 16px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    animation: horizontal 3s ease infinite;
    -webkit-animation: horizontal 3s ease infinite;
    font-weight: 900; /*アイコンの太さ*/
    font-family: "Font Awesome 5 Free";
}

.sidebar .widget_new_entries .widget-sidebar-title:before {
    line-height: 1!important;
    content: "\f1d8";
    color: #499eda;
    padding-right: 5px;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 16px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    animation: horizontal 3s ease infinite;
    -webkit-animation: horizontal 3s ease infinite;
    font-weight: 900; /*アイコンの太さ*/
    font-family: "Font Awesome 5 Free";
}

.sidebar .widget_pc_text .widget-sidebar-title:before {
    line-height: 1!important;
    content: "\f002";
    color: #499eda;
    padding-right: 5px;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 16px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    animation: horizontal 3s ease infinite;
    -webkit-animation: horizontal 3s ease infinite;
    font-weight: 900; /*アイコンの太さ*/
    font-family: "Font Awesome 5 Free";
}

.sidebar .widget_mobile_text .widget-sidebar-title:before {
    line-height: 1!important;
    content: "\f002";
    color: #499eda;
    padding-right: 5px;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 16px;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    animation: horizontal 3s ease infinite;
    -webkit-animation: horizontal 3s ease infinite;
    font-weight: 900; /*アイコンの太さ*/
    font-family: "Font Awesome 5 Free";
}



/***********************
hタグ不使用時の見出し
***********************/

.midashi_green {
  color: #23cc47;
  padding-top:0.8em;
  padding-bottom:0.8em;
  padding-left:4px;

  border-top: solid 2px #6ce4be;
  border-bottom: solid 2px #6ce4be;
  background: -webkit-repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#bbfac1 3px, #bbfac1 7px);
  background: repeating-linear-gradient(-45deg, #f0f8ff, #f0f8ff 3px,#fbfbfb 3px, #bbfac1 7px);
  font-size:19px;
  font-weight:bold;
  margin-top:20px;
  margin-bottom:20px;

}



/***********************
マーカー
***********************/
.marker_pink {
background: linear-gradient(transparent 72%, #ff9ece 70%);
}

.marker_orange {
background: linear-gradient(transparent 75%, #ffbf7f 75%);
}
.marker_blue {
background: linear-gradient(transparent 60%, #9eceff 70%);
}
.marker_green {
background: linear-gradient(transparent 60%, #b2ffb2 70%);
}
.marker_red {
background: linear-gradient(transparent 70%, #ff7d8c 75%);
}


/***********************
引用部分
***********************/

.post blockquote p{
	margin: .4em 0;
}

.post blockquote cite{
	font-size:11px;
}


/***********************
タイトル付きリスト1　Pタグ入る
***********************/

.box27 {
    position: relative;
    margin: 3em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -31px;
    left: -3px;
    padding: 0 15px;
    height: 29px;
    line-height: 29px;
    vertical-align: middle;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}

.box27 p {
    margin: 0; 
    padding: 0;
}

.box27 ul {
	padding-left:2%;
	margin-top:12px;
}




/***********************
タイトル付きリスト1
***********************/

.title_list1 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 0.3em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.title_list1 .title_list1_title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.title_list1 p {
    margin: 3px 2% 3px 2%;
    padding: 0;
}


.title_list1 ul {
	padding-top:0.5em;

}

.title_list1 ol {
	padding-top:0.5em;

}





/***********************
タイトル付きリスト2併せて
***********************/
.title_list2 {
  margin: 2em 0 2em 0;
}
.title_list2 a{
  text-decoration:none;
}
.title_list2 a:hover{
  text-decoration:underline;
}


.title_list2-title {
  display: inline-block;
  padding: 1px 10px 0 10px;
  background: #62c1ce;
  color: #fff;
  letter-spacing: 0.1em;
  font-weight: bold;
  border-radius: 5px 5px 0 0;
}
.title_list2 ul,.title_list2 ol {
  margin: 0;
  padding: 5px;
  position: relative;
  border: solid 2px #62c1ce;
}
.title_list2 ol {
  counter-reset: number;
}
.title_list2 ul li,.title_list2 ol li {

  line-height: 1.5;
  padding: 0.5em 0.5em 0.5em 1.8em;
  list-style-type: none;
  font-weight: bold;
}
.title_list2 ul li:before {
  font-family: "Font Awesome 5 Free";
  content: '\f14a';
  position: absolute;
  left : 0.5em;
  color: #62c1ce;

}
.title_list2 ol li:before {
  display: inline-block;
  position: absolute;
  left: 0.5em;
  width: 22px;
  height: 22px;
  border-radius: 20%;
  background: #62c1ce;
  color: white;
  font-family: "Quicksand", sans-serif;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  line-height: 22px;
  content: counter(number);
  counter-increment: number;
}



/***********************
タイトル付きボックス3黒
***********************/
/* 角丸　影（タイトル）4 */
.kakomi-maru {
 position: relative;
 margin: 2em auto;
 width: 94%;
 border: 2px solid #555555; /* 枠線の太さ・色 */
 color: #555555; /* 文字色 */
 background-color: #fff;
 box-shadow: 2px 2px 1px #c7c7c7;/* 影の色 */
 border-radius: 8px; /* 角の丸み */
}



.kakomi-maru ol{
	padding-bottom:1.2em;
}

.kakomi-maru ul{
	padding-bottom:1.2em;
}


.kakomi-maru_naka_sentence {
	padding-left:0.5em;
	padding-right::0.5em;
	padding-bottom:1.3em;
	
}



.title-maru {
 position: absolute;
 right: 20px; /*（left）に変更すると左 */
 top: -15px;
 padding: 0 .5em;
 font-weight: bold;
 font-size: 1.1em;
 color: #555555; /* タイトル色 */
 background-color: #fff;
}


/***********************
リスト番号をブロック
***********************/

.bango_sikaku {
	margin-bottom:1.4em;
}


.bango_sikaku ol{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
  padding:0.5em;
  border: dashed 1px gray;
}

.bango_sikaku ol li{
  position: relative;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 30px;
}

.bango_sikaku ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*数字のデザイン変える*/
  display:inline-block;
  background: #74c2f8;
  color: white;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align:center;
  /*以下上下中央寄せのため*/
  top: 50%;
  -moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
}










/***********************
アフィリエイト
***********************/
.af-box{
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    -o-border-radius:5px;
    -ms-border-radius:5px;
    border: 1px solid #d1d1d1;
    padding: 10px;
    margin: 0 8px 8px 0;
	
	line-height:5%;
}
.af-imgbox{
    width: 250px;
    margin-right: 10px;
    float: left;
    text-align: center;
}
.af-textbox{
    width: 100%;
	
	line-height:170%;
}
.af-title{

    font-weight: bold;
    margin-bottom: 10px;
}

.af-title a{
    text-decoration: none!important;
}



.af-desc{
    font-size:14px;
    margin-bottom: 10px;
}
.af-kobox{
    width: 52%;
    margin: 0 5px 5px 0;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    float: left;
    text-align: center;
}
.af-kobox a.aflink{
    display: block;
    padding: 5px 0 5px 0;
    text-decoration: none;
}
.af-amazon{
    border: 1px solid #F3A847;
	background:#ffb36b;

}
.af-amazon a{
    /**color: #F3A847;**/
	color: #fff;

}
.af-amazon a:hover{
	text-decoration:underline;

}

.af-rakuten{
    border: 1px solid #BF0000;
	background:#ea7373;

}

.af-rakuten a{
    /**color: #BF0000;**/
	color: #fff;
}
.af-rakuten a:hover{
	text-decoration:underline;

}

.af-blue{
    border: 1px solid #1995DF;
	background:#51a7e8;
}
.af-blue a{
   /** color: #1995DF;**/
	color: #fff;
}
.af-blue a:hover{
	text-decoration:underline;

}


.af-midori{
    border: 1px solid #090;
	background:#4cc488;
}
.af-midori a{
   /**  color: #090;**/
	color: #fff;
}
.af-midori a:hover{
	text-decoration:underline;

}


 	
.inline-deimg img {
	display: none !important;
}

.clear{clear:both;
}


/***********************
アフィリエイト おすすめ用
***********************/

.af-kobox8{
    width: 52%;
    margin: 0 5px 5px 0;
    font-size: 20px;
    font-weight: bold;
    border-radius: 5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    float: left;
    text-align: center;
	
	height:60px;

}

.af-kobox8 a.aflink8{
    display: block;
    padding: 15px 0 15px 0;
    text-decoration: none;
}


.af-green{
    /*border: 1px solid #4CAF50;*/
    box-shadow:2px 2px 0 #2E7D32, 0px 3px rgba(0,0,0,0.5);
	
	background-color:#4CAF50;
}
.af-green a{
    color: #FFF;
}

.af-green:hover{
position:relative;
top:3px;
left:3px;
}





/************************************
リンク　ボタン
************************************/

/* 角丸 */
.Radius5 {  
    border-radius: 5px;        /* CSS3草案 */  
    -webkit-border-radius: 5px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 5px;   /* Firefox用 */  
	
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
/* ボタン共通 */
.Button {
	overflow: hidden;
	width: 400px;
	height: 70px;
	/* margin: 0; */  
	padding: 0;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	margin-bottom:40px;
}
.Button a {
	display: block;
	position: relative;
	z-index: 100;
	text-align:center;
	background: #FF5722;
	color: #fff;
	font-size: 16px;
	line-height: 70px;
	text-decoration:none;
	
	font-weight:bold;
}
.Button a:hover {
	/* background: #3ab2e9;        マウスオーバーカラー */  
	
	color: #333;
	background-color: #FF5722;

}

#IconList1 a:before {        /*白いひし型 */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 16px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: #fff;
}
#IconList1 a:after {        /*バックグラウンドと同じ色のひし型をずらして「before要素」を隠す */  
	display: block;
	content: "";
	position: absolute;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	top: 50%;
	left: 11px;
	width: 8px;
	height: 8px;
	margin-top: -4px;
	background: #FF5722;
}
#IconList1 a:hover:after {        /*「after要素」のマウスオーバー（カラーを合わせる） */  
	/* background: #3ab2e9; */  
	
	color: #333;
	background-color: #FF5722;
}


/************************************
検索結果ページ
************************************/

.page-id-7916 .sns-share,　/* SNSシェア */
.page-id-7916 .sns-follow, /* SNSフォロー */
.page-id-7916 .date-tags, /* 投稿日 */
.page-id-7916 .article-footer, /* 投稿日 */
.page-id-7916 .author-info /*著者情報 */
{
    display: none;
}






/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
  
  
  
/***********************
アフィリエイト おすすめ用
***********************/
.af-kobox8{
    width: 100%;

}
  
  
/************************************
リンク　ボタン
************************************/
/* ボタン共通 */
.Button {

	width:100%;

}
  
  
}




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

/***********************
タイトル付きリスト1
***********************/

.title_list1 .title_list1_title {
    font-size: 93%;

}




/***********************
アフィリエイト
***********************/
.af-imgbox{
        margin: 0 auto;
        text-align: center;
        float: none;
    }

.af-kobox{
    width: 100%;

}

/***********************
アフィリエイト おすすめ用
***********************/
.af-kobox8{
    width: 100%;
	

}

  
}

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

  
  
  
}