@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
*/
/************************************
** 目次
************************************/
.toc-title{/*目次タイトルを太く*/
font-weight:bold;
color:#7b7b7b;
}
.toc-list > li a {/*小見出し（H2）*/
font-weight: bold;
color: #7b7b7b;
display:block;
margin-top:10px;
margin-left: 10px;
}
.toc-list > li a::before {/*小見出し（H2）の先頭につけるアイコン*/
 font-family:"Font Awesome 5 Free"; /*フォント指定*/
 content:"\f138"; /*記号*/
 color: #343159; /*アイコン色*/
 margin-right: 7px;
}
.toc-list > li li a {/*小見出し（H3）*/
 font-weight: normal;
 font-size: 95%;
 color: #7b7b7b;
 margin-top:0;
 margin-left: 3em;
}
.toc-list > li li a::before {/*小見出し（H3)以降のアイコンを消す*/
 content: none;
}
.toc{/*枠に影を付けます*/
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.15);
}
/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
hr {/*横線の間隔調整*/
margin: 20px 0 20px 0 ;
}
.sidebar h3{
  background-color:#343159;/*好きな背景色にする*/
  color:#C7AF41;/*好きな文字色にする*/
  padding:16px 10px;
  margin:16px 0;
}
.article h2 {
    padding: 0;
    background: none;
}
.article h3 {
    border: none;
    padding: 0;
}
.article h4 {
    border: none;
    padding: 0;
}
.article h5 {
    border: none;
    padding: 0;
}
.article h6 {
    border: none;
    padding: 0;
}

.article h2 {
     padding: 8px;
     color: #C7AF41;
     background-color: #343159;
}
.article h3 {
     padding: 8px 4px 8px 12px;
     border-left: 6px solid #343159;
     border-bottom: solid 1px #ccc;
}
.article h4 { /*基本デザイン*/
 font-size: 18px;  /*フォントサイズ*/
 padding: 10px 10px 10px;  /*余白*/
}
.article h4::before { /*h4の先頭*/
 font-family:"Font Awesome 5 Free"; /*フォント指定*/
 content:"\f005"; /*記号*/
 color: #343159; /*アイコン色*/
 margin-right:1px; /*記号右側の余白*/
}
.article h5 { /*基本デザイン*/
 font-size: 18px;  /*フォントサイズ*/
 padding: 10px 10px 10px;  /*余白*/
}
.article h5 { /*基本デザイン*/
 font-size: 17px;  /*フォントサイズ*/
 padding: 10px 10px 10px;  /*余白*/
}
.article h5::before { /*h5の先頭*/
 font-family:"Font Awesome 5 Free"; /*フォント指定*/
 content:"\f00c"; /*記号*/
 color: #343159; /*アイコン色*/
 margin-right:1px; /*記号右側の余白*/
}
.article h6 {
     padding: 8px 8px 8px 8px;
}

.shadow1{ /*指定した画像に影をつける*/
  box-shadow: 5px 5px 5px #999;
}
.kaigyou1{ /*指定した改行を調整する*/
line-height:300%;&
}
.column-right{
	padding: 0px 10px 0px 10px !important;
	margin: 0px
}
.column-center{
	padding: 0px 10px 0px 10px !important;
	margin: 0px
}
.column-left{
	padding: 0px 10px 0px 10px !important;
	margin: 0px
}
/***** BlogCard *****/
.blogcard2 {
  border: solid 2px  #e1e1e1;
  position: relative;
  padding: 5px;
  background-color: #FFFFFF;
}
.blogcard2:hover {
  background-color: #f0f0f0;
}
.blogcard2-thumbnail {
  display: flex;
  padding: 10px;
  align-items: center;
  width: 140px;
  height: 80px;
  float: left;
  margin: 10px;
 }
.blogcard2-thumbnail img {
  width: 80px;
  max-height: 120px;
}
.blogcard2-content {
  height: 160px;
}
.blogcard2-title {
  font-size: 18px;
  font-weight: bold;
  color: #000000;
  height: 2em;
  margin-bottom: 20px;
}
.blogcard2-description {
  font-size: 15px;
  color: #000000;
  height: 2em;
  overflow: normal;
  margin-bottom: 60px;
}
.blogcard2-url {
  font-size: 15px;
  color: #000000;
  height: 1.5em;
  overflow: normal;
  white-space: nowrap;
  text-overflow: normal;
}
.blogcard2 a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.blogcard2-clear {
  clear: left;
}
iframe.wp-embedded-content  {
    width:100%;
}
/*=================================================================================
	カッテネ
=================================================================================*/
.kattene {
	border: none !important;
	border-radius: unset !important;
	box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
	background-color: #fafafa; /* 背景カラー */
	font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
	font-size: 16px;
	height: auto;
	line-height: 1.5;
	margin: 36px auto !important;
	padding: 12px 8px !important;
	overflow: hidden;
	width: 98% !important;
}
.kattene__imgpart {
	background: #fff;
	box-sizing: border-box;
	min-width: 150px;
	padding: 12px 0;
	vertical-align: middle;
}
.kattene__imgpart img {
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
}
.kattene__title>a {
	display: block;
	padding: 5px;
	color: #4392f1; /* タイトルのテキストカラー */
}
.kattene__description {
	color: rgba(0,0,0,0.54); /* 説明文のテキストカラー */
	font-size:0.7em !important;
	padding: 0 5px;
}
.kattene__btns {
	display: flex;
	flex-wrap: wrap;
	margin: 0 auto !important;
	padding: 12px 5px !important;
	position: initial !important;
}
.kattene__btns > div {
	box-shadow: 0 6px 12px -5px rgba(0,0,0,.3);
	border-radius: 35px;
}
@media screen and (max-width: 900px) {
.kattene__imgpart {
	width: 100%;
}
.kattene__title,
.kattene__description {
	text-align: center;
}
.kattene__btns {
	padding: 10px 5px !important;
}
.kattene__btns > div {
	width: 99% !important;
	margin: 3.5px auto !important;
}
}
/*  全ボタン共通  */
.kattene__btns a {
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 35px !important;
	font-size: .8em !important;
	line-height: 30px !important;
	letter-spacing:0;
	-webkit-box-shadow: none !important;
	box-sizing: border-box;
	box-shadow: none !important;
}
.kattene__btns a:hover {
	background: #ffffff !important;
	opacity: 1;
}
/* ボタンオレンジ */
.kattene__btn.__orange {
	border: 2px solid #ff9901 !important;
}
.kattene__btn.__orange:hover{
	color: #ff9901 !important;
}
/* ボタンブルー */
.kattene__btn.__blue{
	border: 2px solid #007dcd !important; 
}
.kattene__btn.__blue:hover{
	color: #007dcd !important;
}
/* ボタンレッド */
.kattene__btn.__red {
	border: 2px solid #c20004 !important; 
}
.kattene__btn.__red:hover{
	color: #c20004 !important;
}
/* ボタングリーン */
.kattene__btn.__green {
	border: 2px solid #0BBD80 !important; 
}
.kattene__btn.__green:hover {
	color: #0BBD80 !important;
}
/* ボタンピンク */
.kattene__btn.__pink {
	border: 2px solid #e1325b !important; 
}
.kattene__btn.__pink:hover {
	color: #e1325b !important;
}
/* WordPressで自動挿入されたPタグの余白を消す */
.kattene p {
	margin: 0;
	padding: 0;
}
/************************************
** アフィリエイトボタン
************************************/
.mybtn {
  text-align: center ;
}
.mybtn-1 a {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 auto ;
  padding: 6px 5px ;
  position: initial ;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.3em;
  text-decoration: none;
  border-radius: 35px;
  box-shadow: 0px 4px 12px -5px #666;
  position: relative;
  transition: 1s !important;
}
.mybtn-1 a:hover {
	background: #ffffff !important;
	opacity: 1;
}
.mybtn-1 a:after {
  font-family:"Font Awesome 5 Free"; /*フォント指定*/
  content: '\f054';
  color: #fff;
  position: absolute;
  right: 10px;
  top: 50%;
  margin: auto;
  margin-top: -10px;
}
.mybtn-indigo a {
  background: #1e50a2;
  border: 2px solid #1e50a2;
}
.mybtn-indigo a:hover{
	color:  #1e50a2;
	border: 2px solid #1e50a2;
}	
.mybtn-green a {
  background: #3eb370;
  border: 2px solid #3eb370;
}
.mybtn-green a:hover{
	color:  #3eb370;
	border: 2px solid #3eb370;
}	
.mybtn-red a {
  background: #d43d39;
  border: 2px solid #d43d39;
}
.mybtn-red a:hover{
	color:  #d43d39;
	border: 2px solid #d43d39;
}	
.mybtn-amber a {
  background: #ffc107;
  border: 2px solid #ffc107;
}
.mybtn-amber a:hover{
	color:  #ffc107;
	border: 2px solid #ffc107;
}	
/************************************
** アフィリエイト囲み枠
************************************/
.af-box1 {
 position: relative;
 margin: 2em auto;
 padding: 1.2em 0 0.2em 0;
 width: 100%;
 color: #343159; /* 文字色 */
 background-color: #fff;
 border: 2px solid #343159; /* 枠線の太さ・色 */
 box-shadow: 2px 2px 1px #ccc;/* 影の色 */
}
.title-box1 {
 position: absolute;
 padding: 0 .5em;
 left: 20px;
 top: -15px;
 font-weight: bold;
 background-color: #fff; /* タイトル背景色 */
 color: #343159; /* タイトル文字色 */
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*ヘッダーの文字と背景の色を変える*/
.search-menu-button.menu-button,
.navi-menu-button.menu-button{
	background-color: #343159;
	color: #C7AF41;
}
.logo-menu-button.menu-button{
	background-color: #343159;
}
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
.column-wrap{
flex-direction: row !important; 
}
}
/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
.blogcard2-title {
  font-size: 85%;
  overflow: normal;
}
.blogcard2-description {
  font-size: 75%;
  overflow: normal;
}
}
/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
.blogcard2-title {
  font-size: 75%;
  overflow: normal;
}
.blogcard2-description {
  font-size: 65%;
  overflow: normal;
}
}
/*エントリーカード、関連記事エントリーカードのスニペットの文字スペースの高さを調整*/
@media screen and (max-width:480px) {
.entry-card-content {
padding-bottom: 25px;
}
}