@charset "UTF-8";

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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*ロゴ*/
.logo-image * {
  display: block;
}

.logo-image {
  padding: 10px 0 0;
}


/*検索窓*/
.search-box{
  margin: 1em;
}
.search-edit{
  height: 40px;
  border-radius: 40px;
}
.search-submit{
  line-height: 0;
  top: 0;
  bottom: 0;
}
.search-edit:focus{
  outline: none;
  border-color: #84e0da; /* フォーカス時の枠色 */
}


/*サイドバータイトル*/
.sidebar h3 {
  background: none;
  letter-spacing: 2px;
  display: inline-block;
  position: relative;
  width: 100%;
  padding: 0;
  text-align: center;
}
.sidebar h3::before, .sidebar h3::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 28%; /*ラインの長さ*/
  border-top: 3px solid #333; /*ラインの色*/
}
.sidebar h3::before {
  left: 0;
}
.sidebar h3::after {
  right: 0;
}


/*サイドバーメニュー*/
.widget_categories ul li a { /*親カテゴリ用のコード*/
  color: #333;
  font-size: 0.9em;
  text-decoration: none;
  padding: 6px 0;
  display: block;
  padding-right: 4px;
  padding-left: 4px;
  border-top: 1px dotted #ccc; /*上部にボーダーを引く*/
}
.widget_categories ul li a::before { /*親カテゴリのアイコン*/
  font-family: FontAwesome;
  content: "\f0da";
  padding-right: 10px;
}
.widget_categories > ul > li > a:first-child { 
  border-top: none; /*最初の親カテゴリは上部ボーダーを消す*/
}
.widget_categories > ul > li > a:last-child {
  border-bottom: 1px dotted #ccc; /*最後の親カテゴリは下部ボーダーを引く*/
}
.widget_categories ul li a .post-count { /*記事数用のコード*/
  display: block;
  float: right;
  background: #ededed;
  padding: 0 1em;
  font-size: 0.8em;
  margin-top: .2em;
  border-radius: 4px;
}
.widget_categories ul li a:hover { /*親子共通マウスホバー時*/
  background: none;
  transition: 0.5s;
  color: #84e0da;
}
.widget_categories ul li a:hover .post-count { /*記事数のマウスホバー時*/
  background: #84e0da;
  color: #fff;
  transition: 0.5s;
}
.widget_categories ul li ul { /*子カテゴリのボックス*/
  border-bottom: 1px dotted #ccc;
}
.widget_categories ul li ul li a { /*子カテゴリ用のコード*/
  color: #333;
  text-decoration: none;
  padding: 0 4px 4px 4px;
  display: block;
  border: none;
}
.widget_categories ul li ul li a::before { /*子カテゴリのアイコン*/
  font-family: FontAwesome;
  content: "・";
  padding: 0;
}


/*タグクラウド*/
.tagcloud a {
  background: none; /*背景を消す*/
  border: 1px solid #ccc; 
  border-radius: 20px; /*角の丸み*/
  color: #555; /*文字色*/
  display: inline-block;
  padding: 3px 10px;
  text-decoration: none;
  font-size: 0.7em;
  margin: 2px;
  flex: 1 1 auto;
  display: flex;
  justify-content: space-between;
}
.tagcloud a .tag-caption::before {
  content: "#"; /*アイコンの変更*/
  padding-right: 3px;
}
.tagcloud a:hover { /*マウスホバー時*/
  background: #84e0da;
  border: 1px solid #84e0da;
  color: #fff;
  transition: 0.5s; /*アニメーションの時間*/
}
.tag-caption .fa-tag {
    display: none;
}


/* 投稿日・更新日 */
.date-tags {
  line-height: .8;
  position: relative;
  color: #aaa; /* 文字色を薄くする */
  flex-direction: row-reverse;  /* 右揃えにする */
}
.post-date {
  order: 1; /* 投稿日の表示順を1番目に */
}
.post-update {
  order: 2; /* 更新日の表示順を2番目に */
}
.post-date, .post-update {
  padding: 2px;
  display: inline;
  font-size: .8em; /* 少しだけ文字サイズを大きく */
}
.post-date::before { /* 投稿日のアイコンの変更 */
  font-family: FontAwesome;
  content: "\f040";
  padding-right: 3px;
}
.post-update::before { /* 更新日のアイコンの変更 */
  font-family: FontAwesome;
  content: "\f021";
  padding-right: 3px;
}


/*記事タイトルまわり*/
.article h1 {
  font-size: 1.5em;
  margin: 16px 0;
  line-height: 1.3;
  padding: 0 0 10px 0;
  position: relative;
}
.cat-link { /* カテゴリー */
  color: #fff;
  text-decoration: none;
  display: inline-block;
  margin-right: 5px;
  padding: 2px 8px;
  font-size: 0.7em;
  background-color: #84e0da;
  border-top-right-radius: 10px; /* 右上の角だけ丸く */
  border-bottom-left-radius: 10px; /* 左下の角だけ丸く */
  word-break: break-all;
}
.cat-link:hover { /* マウスホバー時 */
  opacity: 1;
  background: #a2d5d2;
  transition: all .5s ease; /* ふわっと変化するアニメーション */
  color: #fff;
}
.tag-link { /* タグ */
  color: #fff;
  text-decoration: none;
  display: inline-block;
  margin-right: 5px;
  padding: 2px 8px;
  font-size: 0.7em;
  background-color: #84e0da;
  border: none;
  border-top-right-radius: 10px;
  border-bottom-left-radius: 10px;
  word-break: break-all;
}
.tag-link:hover {
  background: #a2d5d2;
  transition: all .5s ease;
  color: #fff;
}
.tag-link::before {
  content: "#"; /*アイコンの変更*/
  padding-right: 3px;
}
.tag-link .fa-tag {
    display: none;
}

/*見出しリセット*/
.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 {
  color: #333;
  padding: .8em .5em;
  margin-top: 70px;
  background: #fff;
  border-top: 3px solid #333;
  border-bottom: 3px solid #333;
}
.article h3 {
  color: #333;
  padding: .2em .5em;
  margin-top: 50px;
  border-bottom: 2px solid #000;
}
.article h4 {
  color: #333;
  padding: .2em 1em;
  margin-top: 40px;
  border-left: 6px solid #000;
}
.article h5 {
  color: #333;
  margin-top: 40px;
}
.article h6 {
  color: #555;
  margin-top: 40px;
}


/*目次*/
.toc {
  margin-bottom: 40px;
  padding: 15px 20px;
  background: #ffffff;
  border: 2px solid #84e0da;
  border-radius: 2px;
  color: #666;
  display: block; 
}
.toc .toc-title {
  font-weight:bold;
  text-align: center;
  margin-top: 0;
  margin-bottom: 5px;
  padding-top: 10px;
  padding-bottom:10px;
  background: #b3e0dd;
}
.toc .toc-title::before{
	font-family: FontAwesome;
	content: '\f0f6';
	margin-right: .5em;
}

.toc .toc-list {
  margin-top:35px;
  list-style-type: none !important;
  counter-reset: li; 
}
.toc .toc-list > li {
  position: relative;
  margin-bottom: 15px;
  margin-left: 10px;
  line-height: 1.6em;
  font-size: 1.1em;
}
.toc .toc-list > li:after {
  counter-increment: li;
  content: "0" counter(li) "|";
  position: absolute;
  left: -40px;
  top: 0px;
  background: none;
  font-size: 1.4em;
  letter-spacing: -1px;
  color: #84e0da;
}
.toc .toc-list > li a {
  letter-spacing:1px;
  text-decoration: none !important; 
}
.toc .toc-list > li a:hover {
  text-decoration: underline !important; 
}
.toc .toc-list > li ol {
  list-style-type: disc;
  margin-top: 15px;
  padding-left:20px;
  font-size: 0.9em;
  line-height:1.8;
  color: #84e0da; 
}
.toc .toc-list > li > ol li a{
  letter-spacing:1px;
  margin-bottom: 20px;
}
@media only screen and (min-width: 641px) {
  .toc {
    padding: 25px 40px;
  }
  .toc .toc-list > li {
    margin-bottom: 18px;
    margin-left: 12px;
}
  .toc .toc-list > li:after {
    left: -48px;
    top: 0px;
  }
}


/*記事一覧*/
h1.archive-title{
  margin-top: 0;
}
.home .main, .archive .main {
    background: none;
}
.entry-card-wrap{
    background-color: white;
    border-radius: 4px;
    margin-bottom: 1em!important;
}
.entry-card-wrap:hover{
    box-shadow: 0 10px 20px -5px rgba(0,0,0,0.2);
    transform: translateY(-2px);
    background-color: white; 
    transition: all .3s ease;
}
/* エントリーカードラベル非表示 */
h2.entry-card-title{
  line-height: 1.5em;
  padding:0 5px;
  margin-bottom: 0.8em;
}

h2.entry-card-title:before {
  content: "\f004";
  font-family: FontAwesome;
  color:#fdacc7;
  margin-right:5px;
  font-size:90%;
}


/*ページ送り*/
.pagination-next {
 display: none;
}
.page-numbers {
  color: #84e0da;
  border: 1px solid #84e0da;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2); /*数字部分の影*/
}
.pagination .current {
  background-color: #84e0da;
  color: #fff;
}
.page-numbers.dots {
  opacity: 1;
  background: none;
}
.pagination a:hover {
  background-color: #84e0da;
  color: #fff;
}
a.prev, a.next {
  display: none;
}
@media screen and (max-width: 480px) {
  .page-numbers {
    width: 48px;
    height: 48px;
    line-height: 48px;
  }
}


/*カテゴリラベル*/
.cat-label {
  top: 0;
  left: 3px;
  border: none;
  color: #fff;
  background-color: #84e0da;
  padding: 3px 10px;
  margin: -8px 0 0 0;
  overflow: visible;
}
.cat-label::after { /*右上に小さな三角を作る*/
  position: absolute;
  content: '';
  top: 0;
  right: -8px;
  border: none;
  border-bottom: solid 8px #81a9a7; /*小さな三角の色*/
  border-right: solid 8px transparent;
}
.related-entry-card .cat-label {
  font-size: 0.6em;
}

/*上に戻るボタン*/
.go-to-top {
	right: 0;
	bottom: 0;
}
.go-to-top-button {
	width: 80px; /* 横幅指定 */
	height: auto; /* 画像の高さpx指定でもOK！ */
}


marker-under {
    background: linear-gradient(transparent 60%, #ffeba4 60%);
}


/*ブログカード*/
.blogcard-wrap{
	margin-top: 1em;
	margin-bottom: 1em;
}

.blogcard-wrap:hover{
	background-color: #F4F3F1;
	transform: translateY(-2px);
	box-shadow: 2px 2px 6px 0 #ccc;
}

.blogcard{
	border:3px solid #efefef;
}

.internal-blogcard::after{
	content: '続きを読む \00bb'; /* 内部リンク右下枠の文言 */
	position: absolute;
	bottom: .5rem;
	right: 1rem;
	font-size: 80%;
	background-color: #B3E0DD; /* 内部リンク右下枠の背景色 */
	padding: .4em 3em;
	font-weight: bold;
	color: #fff; /* 内部リンク右下枠の文字色 */
	border-radius: 2px;
}

/*インスタ*/
.instagram-center {
	margin:0 auto;
	max-width: 350px;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*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){
  /*必要ならばここにコードを書く*/
}