@charset "UTF-8";

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

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

/*Chromeではデフォルトだと画像の縮小時になめらかにぼかされるため、トップページのアイキャッチ画像がぼやけてしまう。下のimage-renderingの設定で、画像の縮小時にエッジを保つようにしている*/
img {
    image-rendering: -webkit-optimize-contrast;
}

body{
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif !important;
}

/* フォントを游ゴシック体にしたいとき
body{
font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "メイリオ", sans-serif;
font-weight: 500;
}
*/

/* 画面幅が1100px以上の場合のみ適用 ここから*/
@media screen and (min-width: 1100px){

.wrap {
        width: 1020px;
    }

.main {
      width: 720px;
  }

.sidebar {
      padding: 19px 19px;
      width: 300px;
  }

.home .wrap {
      width: 1100px;
  }

.home .main {
    width: 800px;
}

.home .sidebar {
    padding: 19px 19px;
    width: 300px;
}


}
/* 画面幅が1100px以上の場合のみ適用 ここまで*/



.list-title {
  position: relative;
  /* float: left; */
  width: 100%;
  height: 28px;
  background-color: #fff;
  display: block;
  border-bottom: 2px solid #111111;
  margin: 0 0 20px;
  text-align: left;
  font-size: 15px;
}

.list-title-in:before, .list-title-in:after {
    display: none;
  }

.list-title-in {
    padding: 0 0;
}

.list-column {
    padding-right: 5px;
    padding-left: 5px;
}

.ect-3-columns .entry-card-wrap {
    width: 32%;
}

/* トップページの各カテゴリーのエントリーカード */
a.new-entry-card-link.widget-entry-card-link.a-wrap {

}

.widget-entry-cards figure {
    width: 100%;
}

.card-arrow .a-wrap::after {
  display: none;
}

.card-arrow .card-content {
    margin-right: 0;
}

.widget-entry-card-content {
    margin-left: 0;
}







/* -- トップページ -- */
.logo{
	text-align:left;  /*ヘッダーロゴを左寄せに*/
}

.ecb-entry-border .entry-card-wrap {
    border: 0px;
    border-radius: 5px;
    box-shadow: 0 0 3px 0 rgba(0,0,0,.12), 0 2px 3px 0 rgba(0,0,0,.22);
}

.entry-card-content, .related-entry-card-content {
    padding: 1.5% 3% 1.2em 3%;
}

a.entry-card-wrap.a-wrap {
    padding: 0;
    margin: 5px;
}

.ect-vertical-card .entry-card-wrap {
    margin-bottom: 20px;
}

.ect-vertical-card .entry-card-wrap .entry-card-thumb img {
    border-radius: 5px 5px 0 0;
}

figure.new-entry-card-thumb.widget-entry-card-thumb.card-thumb {
  margin-bottom: 5px;
}


.ect-vertical-card .entry-card-wrap .post-date {
    color: #b5b5b5;
}

.entry-card-title, .related-entry-card-title {
    font-size: 17px;
    line-height: 1.5;
}

.entry-card-meta, .related-entry-card-meta {
    margin: 7px;
}

a.entry-card-wrap.a-wrap {
    margin: 2px;
}

/* 縦型カード3列で記事数が3の倍数でないとき最後の行のエントリーカードが中央寄せにならないようにする */
.ect-3-columns {
  justify-content: flex-start;
}

/* カテゴリラベル */
.cat-label {
    top: 0.5em; /*上からの距離*/
    left: 0.5em; /*左からの距離*/
    border: none; /*ボーダーを消す*/
    font-size: 12px; /*文字サイズ*/
    color: #fff; /*文字色*/
    background-color: #4682b4; /*背景色*/
    padding: 1px 10px; /*余白*/
    border-radius: 14px; /*角を丸く*/
}

/* サイドバー */
#sidebar {
    font-size: 14px;
	line-height: 1.5;
}

/* ヘッダーロゴ */
.logo-image {
    padding: 10px 0 0;
    font-size: inherit;
}

/*パンくずリスト*/
.breadcrumb {
  margin: 0 0 7px 0;
  color: #4682b4;
  font-size: 60%;
}
.breadcrumb a {
    color: #4682b4;
}


/* 目次 */
.toc-title {
    position: relative;
    padding:7px 0 0 0;
    color: #4682b4; /**文字色**/
    font-weight: bold; /**太字*/
}
.toc {
    padding:0px 0px;
}
.toc .toc-content {
    padding: 0 20px 5px 20px;
}

.article .toc {
	border-radius: 5px;
}

/* 以下はh3以下に適用される */
.article .toc-list > li li {
    list-style: none; /* 目次先頭の数字を非表示に */
}
.toc-list > li li ::before { /* 目次先頭に黒い丸を表示して中黒に見せる */
    display: inline-block;
    position: relative;
    content: '';
    width: 5px;
    height: 5px;
    left: -10px; /**横(左)の位置**/
    margin-bottom: 2px; /**下の余白**/
    border-radius: 100%;
    background: #cdcdcd; /**・の色**/
}
.toc-list > li li a {
    font-weight: normal;
    font-size: 95%;
    color: #708090;
    margin-left: -20px;
}

/* 見出し */

.article h1 {
	font-size: 150%;
}

 .article h2 {
     position: relative;
     padding: 0.6em;
     margin-top: 1.5em;
     background: #4682b4;
   }

 .article h2:after {
     position: absolute;
     content: '';
     top: 100%;
     left: 30px;
     border: 15px solid transparent;
     border-top: 15px solid #4682b4;
     width: 0;
     height: 0;
   }


.article h3 {
	font-size: 18px;
  padding: 0px 9px;/*上下 左右の余白*/
  margin-top: 1.8em;
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 4px #4682b4;/*左線*/
	border-right: none;
	border-top: none;
	border-bottom: none;
}

.article h4 {
	font-size: 20px;
  padding: 0.25em 0.5em;/*上下 左右の余白*/
  color: #494949;/*文字色*/
  background: transparent;/*背景透明に*/
  border-left: solid 2px #4682b4;/*左線*/
	border-right: none;
	border-top: none;
	border-bottom: none;
}


/* 本文 */
.article p {
  margin: 1.5em 0;
}

/* 本文中の画像 */
.article p img {
  margin-top: 17px;
  margin-bottom: 20px;
}

/* マージン*/
.mgn_b_5 {
	margin-bottom: 5px;
}

.mgn_b_0 {
	margin-bottom: 0px;
}

/* ボックス */
.info-box{
    background-color: #fefbf3;
    border: 2px solid #4682b4;
    color: #252525;
}


/* テーブル */
table tr:nth-of-type(2n+1){
	background-color: #fff;/*行の背景色を交互に変えるのを無効化*/
}

td {
	text-align: center;
}

.body .scrollable-table {
  margin-top: 1.3em;
}

.scrollable-table td {
  padding: 10px 6px 10px 6px;
}


/* ブログカード */

.blogcard-type .blogcard::before {
  top: -0.8em;
}

.blogcard-type.bct-related{
	margin: 40px 0;
}
.blogcard-wrap {width: 100%;}

/* タブ付きボックス */
.blank-box.bb-tab.bb-red::before {
    background-color: #dd6f70;
}

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

/* 固定ページの記事一覧 */
.page .new-entry-cards {
	display: flex;
	flex-wrap: wrap;
}

.page .new-entry-card-link {
	width: 50%; /* 固定ページの記事一覧は２カラム表示にする */
}

.page .new-entry-card-title {
    font-weight: bold; /* タイトルを太字に */
}

.page .widget-entry-cards .a-wrap {
    padding: 1.5%;
}

.page .new-entry-card-date {
  display: block; /* 日付を表示する */
  text-align: right;
}

.page .new-entry-cards .post-update {
   display: none; /* 更新日は非表示に */
}

/*ホームページに設定している固定ページで不要な要素を非表示に*/
.home.page .entry-title,
.home.page .date-tags{
  display: none;
}

/*---------------------------------
  サイドバーのカテゴリウィジェット
--------------------------------*/

/* 親カテゴリ */
.widget_categories ul li a {
  border-bottom: 2px dotted #dcdcdc;
}

.widget_categories ul li a::before{
  font-family: "Font Awesome 5 Free";
  content: "\f07b"; /* FontAwesomeのユニコード */
  color: #4682b4; /* アイコンの色 */
  padding-right: 6px;
}

/* 子カテゴリ */
.widget_categories ul li ul li a::before{
  font-family: "Font Awesome 5 Free";
  content: "\f0da"; /* FontAwesomeのユニコード */
  color: #4682b4; /* アイコンの色 */
  padding-right: 6px;
}

/* カテゴリ内の記事数 */
.widget_categories ul li a .post-count {
  color: #4682b4;
	opacity: 0.8;
  padding-right: 5px;
}

/* タイトル付き破線ボックス */
.dot-title-box {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	/* max-width:600px; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.7em 2em;	/* ボックスの内側余白(上下:1.7em　左右:2em) */
	border: 2px dotted #4682b4;	/* ボックスの線 (太さ　線の種類　線の色)*/
	border-radius: 4px;	/* ボックスの角丸 */
}
.dot-title-box .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
  top: -8px; /* 上から（-18px）移動*/
	left: 20px; /* 左から(27px)移動 */
	background: #fff; /* タイトル背景色 */
	color: #4682b4; /* タイトル文字色 */
	padding: 0 7px;/* タイトルの余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-weight: bold;/* タイトル文字の太さ */
}
.dot-title-box p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}

/* タイトル付きボックス */
.title-box {
	position: relative;	/* 配置に関するもの(ここを基準に) */
	/* max-width:600px; /* ボックスの横幅 */
	margin: 2em auto;	/* ボックスの外側余白(上下:2em　左右:auto) */
	padding: 1.7em 1.7em;	/* ボックスの内側余白 */
	border: 2px solid #4682b4;
	border-radius: 4px;	/* ボックスの角丸 */
  background-color: #fefbf3;
  color: #252525;
}
.title-box .box-title {
	position: absolute; /* 配置に関するもの(ここを動かす) */
	top: -15px; /* 上から（-18px）移動*/
	left: 20px; /* 左から(27px)移動 */
	background: #4682b4; /* タイトル背景色 */
	color: #fff; /* タイトル文字色 */
	padding: 0.4em 1em;/* タイトルの内側余白 */
	line-height: 1;/* タイトルの行の高さ */
	font-weight: bold;/* タイトル文字の太さ */
	border-radius:20px;/* タイトルの角丸 */
}
.title-box p {
	margin: 0; /* 文字の外側余白リセット*/
	padding: 0; /* 文字の内側余白リセット*/
}

.title-box ul {
  margin-bottom: 0px;
  margin-top: 10px;
   padding-left: 17px;
}

.title-box ol {
  margin-bottom: 0px;
}




/* マウスホバー時に透明度70にする*/
.hover_opacity a:hover img {
  opacity: 0.7;
}

/* 画像のキャプション(デフォルトだとマージンが変なので調整) */
.wp-caption-text {
	margin: -20px 0 5px;
  color:  #4682b4;
}

/* font awesomeのフォントの色を変更するとき用 */
.yt-color {color: #4682b4}

.yt-postscript {
	font-size: 19px;
	border-bottom: 2px dotted #969998;
}

/* -----YT番号付きリスト ここから----- */
.yt-ol{
   counter-reset:number;
   list-style-type: none;
   padding:0;
   margin:0;
}
.yt-ol li {
   position: relative;
   margin:0.5em 0 !important;
   padding-left: 1.8em;
}
.yt-ol li:before {
   counter-increment: number;
   content: counter(number);
   background-color: #4682b4; /* 文字背景色 */
   color: #fff; /* 文字色 */
   position: absolute;
   font-weight:bold;
   font-size: 14px;
   border-radius: 50%;
   left: 0;
   top:0.2em;
   width: 22px;
   height: 22px;
   line-height: 22px;
   text-align: center;
}
/* -----YT番号付きリスト ここまで----- */

ol {
	margin: 0.3em 0 0.7em 0;
}



/* ----- ul（番号なしリスト）----- */

.entry-content ul {
  list-style-type: none;
}
.entry-content ul li {
  position: relative;
}
/* 頭にチェックマーク */
.entry-content ul li::after {
  content: '';
  display: block;
  position: absolute;
  top: .5em;
  left: -1.5em;
  width: 10px;
  height: 5px;
  border-left: 4px solid #4682b4;
  border-bottom: 4px solid #4682b4;
  transform: rotate(-45deg);
}

/* ulの余白 */
.article ul {
  margin: 0.7em 0 0.7em 0;
  line-height: 150%;
}
/* ul liの余白 */
.article ul li {
  margin: 0 0.2em 0 0.2em;
}





/* タイムライン */
.timeline-item-content {
  border-left: 3px #f6f6f6 solid;
}
.timeline-item:before {
  background: #4682b4;
}

/* ボタン */
.btn-l, .ranking-item-link-buttons a, .btn-wrap.btn-wrap-l > a {
    margin: 0;
}

/* 「次のページ」ボタン */
.pagination-next-link {
    border-radius: 50px;
}

/* ページ番号ボタン */
.page-numbers {
    border-radius: 50%;
}

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

/*1030px以下*/
@media screen and (max-width: 1030px){

		/* スマホでは記事ページトップのアイキャッチ画像を画面幅いっぱいに表示する */
	.eye-catch img {
		width: 100vw;
		margin: 0 calc(50% - 50vw);
		max-width: 100vw;
	}
}

/*834px以下*/
@media screen and (max-width: 834px){

.logo-header img {
  width: 200px;
  height: auto;
  padding-left: 20px;
}

main.main {
		margin: 0 0;
	}

.content {
    margin-top: 0;
}

.article .yt-ol {
  padding-left: 0;
}

.entry-card-title, .related-entry-card-title {
    font-size: 12px;
}

}


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

/* 480px以下 ここから */
@media screen and (max-width: 480px){

/* スマホではトップのエントリーカードを3列にしない */
.ect-3-columns .entry-card-wrap {
    width: 100%;
}

.entry-card-title, .related-entry-card-title {
    font-size: 16px;
}


	/*見出し*/
.article h1, .article h2 {
	font-size: 1.2em;
}

.entry-title {
	padding: 0 0 0 0;
}


}
/* 480px以下 ここまで */



/************************************
** カエレバ商品紹介リンク
************************************/
.kaerebalink-box{
border:double #d2d7e6;
margin-top: 17px;
}

.shoplinkrakuten a{
  background: #dc143c;
  }
.shoplinkamazon a {
  background: #ffa500;
}

/* ボタンの色をどちらもテーマカラーのブルーに
.shoplinkrakuten a, .shoplinkamazon a {
    background: #4682b4;
}
*/